サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
developmentor.lrlab.to
jQuery coder プラグイン を使って、テキストボックスを拡張して、住所の入力を支援できます。いわゆるサジェストと呼ばれるものです。Google サジェスト や gooサジェストβ with ATOK は、検索キーワードの入力を支援しますが、jQuery coder プラグインは、住所の入力を支援します。 テキストボックスに住所の単語を入力すると、その単語を含む住所を検索し、その結果を入力候補としてリスト表示します。入力候補を選択すると、その住所をテキストボックスに設定します。入力候補の選択は、マウスのほかにキーボードも使えます。 <script type="text/javascript"> //<![CDATA[ jQuery(function($) { $('#a1').codable(); }); //]]> </script> 入力候補を選択したときのイベントをハンドリン
jTemplates は、テンプレートから HTML を生成するためのテンプレートエンジンです。jTemplates は jQuery プラグインという形式で提供され、jQuery の特性を活かした使い方ができるのが特徴です。 一般的に jQuery を使うなかで、テンプレートエンジンが必要となるケースは少ないという印象があります。が、旧バージョンの The geo microformat 生成ツール を開発したとき、jQuery を使った DOM 操作よりも、テンプレートの文字列から HTML を生成する方が、目的に適う場合もあったので、その事例を紹介します。 次のように、The geo microformat 生成ツールは、JavaScript を使って HTML を生成し、その HTML を貼り付けコードとして表示します。 jQuery は DOM 操作を得意としますが、このような
Postal Search Ajax API 構築キットは、あなたの WEB サーバに Postal Search Ajax API の機能を構築するためのパッケージ です。本 API 構築キットを使うと、あなたの WEB サーバに Postal Search APIs & Solutions のサーバとは完全に独立した形で Postal Search Ajax API の環境を構築でき、あなたの WEB サーバのみで独立して運用できるようになります。 本 API 構築キットは Perl や PHP といった CGI プログラムを必要としません。本 API 構築キットの プログラムやデータベースは、すべて JavaScript で構成 しています。ですので、FTP を使ってファイルをアップロードでき、JavaScript でプログラミングができる方なら、以下の手順にしたがって簡単に導入でき
jQuery lookup プラグインは Postal Search Ajax API の Postal.Lookup クラス を jQuery プラグインにラップしたものです。jQuery lookup プラグインを使うと Postal.Lookup クラスが持つ郵便番号から住所を検索する機能を jQuery のメソッドチェーンの中で利用できます。 郵便番号から住所を検索するときは lookup メソッドを使います。lookup メソッドの引数には郵便番号とコールバック関数を指定します。lookup メソッドはその中で Postal.Lookup クラスをを使って郵便番号から住所を検索し、その結果をコールバック関数を使って伝えます。このときの検索は非同期です。 コールバック関数の引数は検索結果とステータスコードです。検索結果は Postal.Lookup クラスの response プロ
The geo microformat を生成するツールです。 次の手順にしたがって The geo microformat を生成し、その HTML をブログやホームページに貼り付けてください。 The geo microformat を生成します はじめに、郵便番号、住所、地名、場所、または画像のURLを入力し、目的地を検索するボタンか、現在地を取得ボタンをクリックしてください。 例: 160-0021, 新宿区 歌舞伎町, 新宿コマ劇場, http://farm1.static.flickr.com/... PlaceEngine をインストールする と、無線 LAN (Wi-Fi) の電波から、現在位置を取得できるようになります。 次に、矢印のアイコンを目的地までドラッグして移動し、その目的地の住所や地名を入力して OK ボタンをクリックしてください。 最後に The geo mi
Postal Search APIs & Solutions ホーム Postal Search Ajax API デモ Postal Search Ajax API のデモを紹介します。 目次 ベーシック 郵便番号から住所を検索する 住所の単語から郵便番号を検索する 住所の単語から郵便番号を検索してその住所を表示する 送信フォーム 郵便番号を住所に変換するフォーム 郵便番号を住所とフリガナに変換するフォーム #1 郵便番号を住所とフリガナに変換するフォーム #2 郵便番号を住所に変換し、都道府県を選択するフォーム 郵便番号を住所とフリガナに変換し、都道府県を選択するフォーム with jQuery 郵便番号から住所を検索する #1 郵便番号から住所を検索する #2 送信フォームの入力形式を郵便番号に制限する 住所の単語から郵便番号を検索する 住所の単語から郵便番号を検索してその住所を表示
jQuery coder プラグインは Postal Search Ajax API の Postal.Coder クラス を jQuery プラグインにラップしたものです。Postal Coder Plugin を使うと Postal.Coder クラスが持つ住所の単語から郵便番号を検索する機能を jQuery のメソッドチェーンの中で利用できます。 住所の単語から郵便番号を検索するときは coder メソッドを使います。coder メソッドの引数には住所の単語とコールバック関数を指定します。coder メソッドはその中で Postal.Coder クラスをを使って住所の単語から郵便番号を検索し、その結果をコールバック関数を使って伝えます。このときの検索は非同期です。 コールバック関数の引数は検索結果とステータスコードです。検索結果は Postal.Coder クラスの response
jQuery later プラグインはメソッドチェーンの中で、指定した処理の実行を後回しにできるプラグインです。JSONP のコールバック関数の中で script 要素を削除すると IE がクラッシュしてしまう問題を jQuery 的に解決しようとして、このプラグインを作成しました。 KoshigoeBLOG: 某所の"MochiKit.Async JSONP"を使わさせていただきました。 ロードのたびにユニークにしなければならなかったのは、script要素を削除している辺りにIEのバグが潜んでいたかららしいので、その辺を中心にtry&error。setTimeoutを使ってscript要素の削除を遅延させてみました。 このプラグインを作成するにあたり、上記のブログとそのリンク先を参考にさせてもらいました。 さらにいろいろ調べた結果、次の条件を満たすとき、script 要素を削除しようとす
指定した URL からそのサイトの favicon (ファビコン) を表示する jQuery プラグインです。サイトによって favicon があったりなかったりしますが、jQuery Favicon プラグインは favicon が見つかったときだけ表示するようにしています。 http:// からはじまる任意の URL を指定できます。その URL からプロトコルとホスト名を切り出して favicon.ico の URL を組み立てます。ですので、相対パスは対応していません。 Favicon Plugin は img タグを操作することを前提としています。favicon.ico の URL を設定し、そのサイズを 16 × 16 としています。 はじめは非表示としておき favicon のロードが完了したとき表示するようにしています。これで favicon のないサイトは img タグが
JSON for jQuery This adds a json() method to the $ function. The first argument is the URL to the JSON resource, with the text {callback} wherever the JSON callback method should be provided. In a JSONP URL, you would use jsonp={callback}; in a Yahoo! JSON URL you would use format=json&callback={callback}. JSON for jQuery というプラグインを jQuery ライクな jQuery JSONP プラグインに書き換えてみました。 ダウンロード jquery.jsonp.js (
WEB ブラウザの画面下に指定したブロック要素を固定して表示する jQuery プラグインです。ページをスクロールしても、指定したブロック要素を常に WEB ブラウザの画面下に表示します。 また、固定したブロック要素は表示や非表示の指示ができます。表示を指示すると、画面下からブロック要素をスライドしながら表示します。非表示を指示すると、画面下にブロック要素をスライドしながら隠します。 同じ効果のある jQuery Catfish Advert Plugin という jQuery プラグインもあるのですが、配布していたサイトが休止?していて入手できなくなっています。今後、再開してメンテナンスするのかもかわかりません。それじゃということで jQuery Catfish Advert Plugin と同じ振る舞いをするプラグインを自ら作ってみたわけです。 ダウンロード jquery.fixedU
メソッドチェーンの中で、指定した関数をその場で実行せず、遅延して後回しにできる jQuery プラグインです。jQuery の操作を後でまとめて実行したり、一定の間隔でステップ実行できるので、その特性を活かした様々な応用が期待できます。 後回しにする関数は delay メソッドで指定します。このとき、指定した関数はキューに追加するだけで、その関数は実行しません。delay メソッドで繰り返し関数を指定して、後回しにする関数をどんどん追加していきます。 後回しにする関数は $.resume メソッドで実行します。$.resume メソッドの引数には実行間隔が指定でき、その実行間隔の周期で、キューの中の関数を先頭から1つずつ順番に実行します。実行間隔はミリ秒の単位で指定します。省略したときは 10 ミリ秒です。なお、$.resume メソッドを実行し直すと、現在の実行周期を変更できます。 キュ
Jakob Nielsen は ウェブ・ユーザビリティ 顧客を逃がさないサイトづくりの秘訣 や ホームページ・ユーザビリティ 顧客をつかむ勝ち組サイト32の決定的法則 の中で、ホームページのユーザビリティを保証するガイドラインの1つとして、ページの中から自ページにリンクしない というのがあります。 トップページであるにも関わらず HOME ボタンやロゴのリンクがあるなどがその代表例です。ページの中から自ページのリンクがあると、利用者は自らの立ち位置がわからなくなり、混乱するというのが趣旨のようです。 このことはよく理解していますが、ホームページを作成する過程で、ヘッダ、フッタ、サイドバーなどページで変化がない領域は、テンプレートを使って手間を削減したりするので、各ページで異なるリンク先を指定したり、しなかったりするのは、技術や予算の面から現実的じゃないというところに落ち着きます。 ホームペ
現在のページ数と総ページ数の表示では、総行数が伝わりません。またページ数よりも、検索エンジンの検索結果のように、総行数のうち何行目から何行目と表示したほうが伝わりやすいと想定できます。 残念ながら tablesorter pagination plugin は、現在のページ数と総ページ数の表示をカスタマイズする方法がありません。非公式な方法がないかとソースコードを見てみましたが、その表示を横取りできるようになっていませんでした。そこでプラグインの外部でイベントを捕捉して、現在の行位置と総行数を表示することを試みてみました。 次の例では、先頭のページ、前のページ、次のページ、最後のページのリンクの click イベントと、選択ボックスの change イベントを捕捉して、現在の行位置と総行数を表示しています。また、ページをロードしたときにもその表示を反映するため、現在の行位置と総行数を表示し
Postal Search Ajax API チュートリアル Postal Search Ajax API は、郵便番号から住所、住所から郵便番号を検索できる クロスドメインに対応した JavaScript ベースの API です。本 API は 利用規約 に同意することで、どなたでもすぐに利用できます。 本 API は Postal Search APIs & Solutions のサーバで検索する仕組みなので、以下の手順にしたがって WEB ページに JavaScript コードを記述するだけ で、あなたの WEB ページに検索機能を追加できます。 郵便番号と住所のデータベースは Postal Search APIs & Solutions のサーバで管理するため、あなたの WEB サーバに データを格納したり、最新データを維持する必要はありません。 1. 郵便番号と住所の送信フォーム
郵便番号から住所を検索する #1 郵便番号から住所を検索する #2 送信フォームの入力形式を郵便番号に制限する 住所の単語から郵便番号を検索する 住所の単語から郵便番号を検索してその住所を表示する 住所の単語から住所の候補をサジェスト表示する #1 住所の単語から住所の候補をサジェスト表示する #2 住所の単語から住所の候補をサジェスト表示する #3 郵便番号から住所を検索する jQuery lookup プラグイン 住所の単語から郵便番号を検索する jQuery coder プラグイン 指定した処理の実行を後回しにする jQuery later プラグイン fixedUI プラグイン 画面の下からフィードバックフォームをスライド表示して固定する jTemplates jTemplates を使ってテンプレートから HTML の貼り付けコードを作成する Cycle Plugin cycle
jQuery Browser Selector プラグインはメソッドチェーンを途切ることなく、特定の Web ブラウザに依存したコードを書き分けることができる jQuery プラグインです。 jQuery 自体はクロスブラウザ (Cross-browser) を指向しているので、このプラグインの存在は矛盾するかもしれません。また、ブラウザの依存性は、他の JavaScript ライブラリを活用したり、CSS を工夫すれば解決できることでもあります。 ただ、場面によって Web ブラウザの違いを JavaScript コードの中で書き分ける(たい)ことがあるのも確かです。このプラグインはそのグレーなニーズを埋めるために作ってみたものです。 jQuery Browser Selector プラグイン自体はとてもシンプルです。browser メソッドに Web ブラウザを指定すると、その Web
Interface elements for jQuery の Scrollto を使って、ページ内リンクのジャンプを、スムースにスクロールするようにします。 いわゆる普通のページ内リンクだと、即ジャンプしてしまうので、油断しているとページ内のどこにジャンプしたのか判断できなくなることがありました。が、Scrollto を使ってスクロールするようにしたところ、ページ内リンクの振る舞いが視覚的になり、何が起こっているのか判断しやすくなりました。 Scrollto を使ったスクロールは、次のようなページ内リンクがあったとすると、 <a href="#Postal">Postal オブジェクト</a> そのスクロール先は、ページ内リンクで指定した # 以降の id を持つ要素になります。ページ内リンクは name 属性を使うことが多いようですが、Scrollto を使うときは id 属性である必
jQuery Tag プラグインは jQuery のメソッドチェーンを途切ることなく、HTML タグを組み立てるためのプラグインです。HTML タグの生成と追加をスタックで操作することで、メソッドチェーンを崩さずに HTML タグを組み立て続けることができます。 スタックの操作は jQuery 自体が持つスタックの仕組みを利用しています。jQuery は pushStack メソッドで現在のインスタンスをスタックに積み、end メソッドで直前のインスタンスに戻すことができます。 この特性を利用して、tag メソッドで HTML タグを生成して pushStack メソッドでスタックに積みます。gat メソッドで end メソッドでスタックから戻し、HTML タグを追加します。gat メソッドの名前は tag メソッドを逆に読んだものです。戻すや反対という意味を込めています。 また $.ta
1行間隔で行の背景色を変える widgets プロパティに zebra を指定すると、1行間隔でテーブル行の背景色を入れ替わり表示できます。 jQuery(function($) { $('#r4').tablesorter({ widgets: ['zebra'] }); }); //jQuery tr 要素のクラスに even と odd が交互に付与されるので、スタイルシートを使って even と odd の背景色を指定します。 table.tablesorter tbody tr.odd td { background-color:#F0F0F6; } # 都道府県 フリガナ ふりがな ローマ字
object[] response 検索結果です。検索結果は住所のオブジェクトの配列です。住所のオブジェクトは、次のプロパティを持ちます。 string c 郵便番号です。"1234567" といった7桁の数字からなる文字列です。 string a 住所です。 string k 住所のフリガナ(全角カナ)です。 string g 住所の全国地方公共団体コードです。"14104" といった5桁の数字からなる文字列です。 number x 住所の経度です。139.704268 といった世界測地系を表す数値です。 number y 住所の緯度です。35.693312 といった世界測地系を表す数値です。 住所が見つからないときは、要素数が0の配列になります。複数の住所が見つかったときは、要素数が2以上にもなります。 検索結果は onload イベントもしくは onerror イベントの中でのみ有効
Postal Search APIs & Solutions とは Postal Search APIs & Solutions は、郵便番号と住所を軸に様々なデータを検索できる API の提供と、その API を活用したアプリケーションの提案や事例 を紹介するサービスです。おかげさまで本サービスは、2008年3月31日をもって1周年を迎えることができました。応援してくださったみなさん。ありがとうございました。 Postal Search APIs & Solutions は、利用者のフィードバックを尊重しながら進化し続けたい BETA サービスです。Postal Search Ajax API という郵便番号から住所、住所から郵便番号を検索できる JavaScript ベースの API と、その API を使ったサンプルを提供します。さらに、WEB サーバに Postal Search
このページを最初にブックマークしてみませんか?
『developmentor.lrlab.to』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く