たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果 | エンタープライズ | マイコミジャーナル
GoogleからGoogle AJAX APIを拡張する新しいサービス「The AJAX Libraries API」が公開された。The AJAX Libraries APIはGoogleのサイトで人気のある有益なJavaScriptライブラリを提供しようというもの。これまでYUIであればYahoo!、DojoであればAOLなどが同類のサービスを提供していたが、特定のJavaScriptライブラリに限定することなく有益であれば配布に追加するというポリシーをもっている点が新しい。 JavaScriptライブラリを活用するタイプのWebアプリケーションは数多くある。結果として、何度も似たようなJavaScriptライブラリをダウンロードしていることになり、このままいけば今後ライブラリ自体のサイズの巨大化や多くのサービスの登場でライブラリダウンロード総量は増加することになる。 The AJAX
js-users.jp - 日本の JavaScript ユーザのためのハブサイト
YAPC::Asia 2008 で Michael Schwern は「SEO に有効な独自ドメインを取って、もっと Perl 初心者が集まりやすい nice な Perl の情報を集めたサイトを作れ！」といったそうです。そして「Perl-users.jp - 日本のPerlユーザのためのハブサイト」ができました。それにインスパイアされてas-users.jpも出来たらしい。 これは JavaScript も同じではないのか？ そう思って js-users.jp ドメインを取り、ここに js-users.jp を開始します。完全に as-users.jp にインスパイアされています。本当にありがとうございます。ノープランです。 イベント情報 ajax Experience http://ajaxexperience.techtarget.com/html/index.html 2008年
Contents -- Eloquent JavaScript
This file is part of the first edition of Eloquent JavaScript. Consider reading the third edition instead.
これは便利! JavaScriptの勉強はこのコンテンツで - Eloquent JavaScript | エンタープライズ | マイコミジャーナル
Eloquent JavaScript Eloquent JavaScriptというタイトルのもとでJavaScriptに関する情報が公開されている。同コンテンツの作成はMarijn Haverbeke氏の手によるもの。プログラミングの簡単な紹介からJavaScriptを使ったプログラミングの勘どころが丁寧にまとまっている。JavaScriptの仕様を解説するスタイルではなく、実際に必要になる処理や間違いやすい部分について取り上げながら説明がおこなわれている。JavaScriptを使ったプログラミングを実施するすべてのデベロッパに一読をお薦めしたいコンテンツだ。Eloquent JavaScriptの目次は次のとおり。 Introduction Basic JavaScript: values, variables, and control flow Functions Data stru
3ping.org｜XHTML CSS Archives
出版社の破産宣告により絶版となってしまった「実践 Web Standards Design」ですが、半月ほど前から Amazon での売り上げランキングが急激に落ち始め、とうとう在庫も切れたようで、中古本が 高値で売られている ようです。欲しいけど買えないというメールもいくつか届いているので、なかなか複雑な気分です。デッドモノってやつですかこれは。 さすがにこんな値段で購入する方はいないと思いますが、11月頃には別の出版社から再出版される予定でおりますので、それまでしばらくお待ちくださるようお願いします。 現在、それに向けて校正ゲラを見ながら修正・加筆をしている段階です。 著作権や印税のことで突然弁護士事務所からお手紙や電話がきてびびったり、書いたことも見たこともない文書の署名に戸惑ったりとありましたが、なんとかまた世の中に送り届ける事ができそうなのでとても嬉しいです。 ヤッ ＼(⌒∇⌒(
ハタさんのブログ(復刻版) : javascriptを初めて学ぶ人についてのおさらい。その１
僕にも教える人ができた(? というか人にモノを教える立場)になったので、とりあえず、最近はもっぱらjavascriptを教えています。 もともとCやJavaなどについてはある程度の知識がある人なので、それを少しjs的な意味で、関数言語的な教えをやっている最中のメモ 変数って何ですか？変数って値もしくは式そのものに利便的な名前をつけているものです 次のhogeとfooは値をいれる箱ではなく、値そのものに別名(もしくは分かりやすい名称)を割り当てているだけに過ぎませんよ。 var hoge = 1; var foo = [1, 2, 3]; alert(hoge + 1); // 2 alert(foo[0]); // 1 alert(1 + 1); // 2 alert([1, 2, 3][0]); // 1 つまり、関数自体を変数に代入する事ができます。(functionとは特別な呼び名
アスタリスクで隠されたパスワードを確認する方法 [K'conf]
ログインが必要なサイトの多くは、IDとパスワードを入力するフォームが設置されています。 通常、このようなフォーム内のパスワード部分に入力した文字は盗み見防止のため、「********」のようなアスタリスクになって文字が隠されるようになっていますが、しばしば、この入力したパスワードを確認したい状況になる場合も少なくありません。 このようなケースに役立つハックの紹介。 以下のJavaScriptをアドレスバーに入力すると、次のようなダイアログ内にパスワードが表示されます。 javascript:(function(){var s,F,j,f,i; s = ""; F = document.forms; for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i) { if (f[i].type.toLowerCase() ==
![アスタリスクで隠されたパスワードを確認する方法 [K'conf]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a87d5887c466cccb0b849babb90931bdfa1b8c8/height=288;version=1;width=512/http%3A%2F%2Fkenz0.s201.xrea.com%2Fimage%2Fweblog%2F071121%2F2.gif)
ブラウザから手軽に使えるJavaScriptの統合開発環境『TIDE』 | 100SHIKI.COM
これはすごい・・・。 TIDEは「Tiny IDE（統合開発環境）」の略らしい。 そのシンプルな名前にたがわず、実に手軽にJavaScriptを書いて、テストすることができる。日本語もきちんと通るようだ。 しかもIDEだけあって、変数の中身をウォッチしたり、ステップごとに実行していくことが可能だ。 JavaScriptは慣れていないとどうにもとっつきにくかったりするが、こうした環境があればその動作を確認しながら学習していくことができるだろう。 まだベータ版ということで多少のバグがあるようだが、これからJavaScriptをやってみよう！と思われている方にはお勧めだ。
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
第4回 JavaScriptでオブジェクト指向プログラミング ― ＠IT
JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ
ハタさんのブログ : Javascriptによる大規模開発の覚え書き
未だに半年前のエントリにブクマされるみたいなので、もう少しjavascriptについて書いてみる。 今回は大規模化開発におけるJavascriptの注意点とかそういうの。当てはまらない環境の方もいます。(しかも基本的な事だらけで大したことは書いてないです) ほぼリッチクライアントを主目的としたjavascripterとコードを対象とします。 どちらかというと、ライブラリを提供する側の視点から 1.ログを出力せよ あなたが書いたコードは遅い、と必ず言われます。なので言われる前から、自分の書いたコードの処理時間をログするようにしましょう。 次のような処理時間を計測するロガーを作ります。 var TraceLog = function (){ this.startTime = -1; var outer = document.getElementById('_outer'); if(oute
ハタさんのブログ(復刻版) : 私は如何にしてJavascriptのprototypeを身につけたか。
javascriptのprototypeはなかなか理解してもらえないですねぇ。 ここ1年間でマジマジと実感しました。 特に、大規模開発をしているとこだと、いろんな知識が入り乱れていて（ホームページ時代からAjax本を読んだ人とか)が、javascriptが単なる関数型列挙な言語(語弊があるけど)という見方が大多数を占めているように見えます。 そんな中で "String.prototype.trim" みたいなコードを見せても、説明下手なのか中々上手く伝わらないですねぇ。 ということで(?)、僕がjavascriptのprototypeを身に着けるまでやったこと、とか。これも備忘 prototype.jsのソースコードを眺める Array.mapとかEnumerable, Hashは勉強になりますねー。 ただ、prototype継承されすぎて、ちょっと多すぎなこともあります。 var
はじめてのJSONPプログラミング
前回の「ブログの☆の総数を取得できるAPIを組み込みました」では、はじめてJSONPを使ってみました。以下、実際にJSONPを使ってみての覚え書きと、これからJSONPプログラミングをはじめる方へのTIPSです。 ブログの☆の総数を取得できるAPIは、はてなスターに登録されたブログの情報を取得できるJSON形式とJSONP形式で提供されているAPIでした。 はてなスター日記 - ブログの☆の総数を取得できるAPIを追加しました JSONとは、JavaScriptにおけるオブジェクトの表記法をほぼそのまま利用したデータフォーマットのことで、JSONPはJSONにちょっと記述を加えて、クロスドメインのJSONデータを非同期で読み込ませて処理するための手法のことです。（詳しい定義については、自分で調べてみてください） 通常、Webブラウザでは他ドメインのJavaScriptのデータを読み込んで実
prototype.jsを読み解く：第1回 Prototypeライブラリ（1〜197行目）｜gihyo.jp
他のライブラリや、自分のコードと共存させるときは、これらの名前と衝突しないように気をつける必要があります。同じ名前を使ってしまうと、コードがロードされた順番によって挙動が変わる、というようなわかりにくい問題が発生してしまう場合が出てきます。 オブジェクト、クラスの使われ方 ライブラリ内では、上記の名前空間は大きく分けて以下のような使われ形をしています。 その下に別のオブジェクトを入れるための親名前空間として使う Class.create()を使って Prototypeライブラリ風のクラスとして定義する Object.extend()を使って他のクラス、オブジェクトから継承されることを前提とする関数を集める コードを簡潔に記述する為に短い名前の関数として使う 特に、Object.extend()を使って継承を実現している箇所が多く、最終的にどのオブジェクト・クラスにどのメソッドが定義されてい
[はてなダイアリー]てっく煮ブログ - はてなダイアリーで JavaScript eval
３ヶ月ほど前、弾さんや id:amachang さんが、はてなダイアリーで JavaScript が使えたらいいのにね、という話をしていました。404 Blog Not Found:Hatena::Diary - スーパpre記法で実行可能なJavaScriptをIT戦記 - Re: スーパー pre 記法で実行可能な JavaScript をで、先日、自分のはてなダイアリーにブログパーツを設置できるようになったので、事実上の JavaScript 解禁になりました。ということで、JavaScript の eval を貼り付けるガジェットを Google Gadgets で作ってみました。サンプルまずは簡単に Hello World。nanto_vi さんによる Math.random().toString(36).slice(-8) でパスワード生成 もすぐに試せる。（関連エントリ：Ja
404 Blog Not Found:怠翻 - JavaScriptでありがちな9つのシマッタ
2007年08月17日01:15 カテゴリ翻訳/紹介Lightweight Languages 怠翻 - JavaScriptでありがちな9つのシマッタ 私自身結構シマッタしちゃうので。 Nine Javascript Gotchas 尻カンマ注意 以下のコードはFireFoxでは動きますが、Internet Explorer (以下IE)では問題になります。 var theObj = { city : "Boston", state : "MA", } 最後にカンマが入らないよう注意しましょう。 浮気なthisは何を見てるやら 以下のコードで、thisは何を指しているでしょうか。 <input type="button" value="Gotcha!" id="MyButton" > <script> var MyObject = function () { this.alertMess
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社
cyano: なぜCSSは先でJavaScriptは後に読み込ませることが推奨されるのか