#pgid
* 概要 [#dd9856b0]
残念ながら、[[つくるぶ:http://tkrb.jp/]]が閉鎖してしまうということで、
つくるぶの「ガイドブログ」で竹村が書いていた記事についてまとめたページを作りました。
#blikimore
* 一覧 [#h363dbe8]
** 「Zooomr」の「写真の上に別の写真のレイヤーを配置する」部分をクラスライブラリ化してみました [#v61668e5]
http://www.tkrb.jp/guide/2007/10/javascript_photograph_on_another_layer_of_photograph.html
[[Zoomer:http://jp.zooomr.com/]]というサービスで実装している写真の上に別の写真へ遷移する穴を開けておいて、
ユーザがクリックしたら穴のURLに遷移するような動作をJavaScriptで prototype.js を利用して実装したものです。
- Crosslayerクラスライブラリ
- Prototype.js 1.6.0 RC1
** Flickrとのマッシュアップ！（PopBoxとdhtmlxGrid） その１ [#zd4f0819]
http://www.tkrb.jp/guide/2007/11/flickr_image_search_mashup.html
Flickrから画像データを取ってきて、その画像の拡大表示をしたり、データグリッドに格納したりするサービスを想定したWebアプリを作るまでについて書いています。
初回は、Flickrから画像をJSONPで取得して表示する部分がメインになっています。
- Flickr API
- Prototype.js 1.6.0
- jsr_class.js によるJSONPの実装
- PopBox (概略)
- dhtmlxGrid (概略)
** Flickrとのマッシュアップ！ (PopBoxとdhtmlxGrid) その２ [#e1ecad13]
http://www.tkrb.jp/guide/2007/11/flickr_image_search_mashup_vol2.html
第2回は、PopBoxとdhtmlxGridの使い方についてメインに扱っています。
簡単な使い方と細かい設定とAPIについては、下記もあわせてご覧ください。
[[PopBoxの使い方:http://www.ark-web.jp/sandbox/wiki/265.html]]
[[dhtmlxGridの使い方:http://www.ark-web.jp/sandbox/wiki/270.html]]
- PopBox
- dhtmlxGrid
** Flickrとのマッシュアップ！ (PopBoxとdhtmlxGrid) その３ [#g46f891d]
http://www.tkrb.jp/guide/2007/12/flickr_image_search_mashup_vol3.html
第3回は、それぞれの技術を組み合わせて、Webアプリになるように動作制御を入れています。
具体的には、登録済みチェックや一言コメントを入れる、内容をサーバへ送信する、サーバから受けたXMLデータをリスト表示するなどです。
また、この3回シリーズを振り返った[[つくるぶガイドブログ：『Flickrとのマッシュアップ』記事のまとめと振り返り:http://www.ark-web.jp/blog/archives/2007/12/flickr_image_search_mashup_summary.html]]には、
JSONPに対応しているWebサービスAPI提供サイトをいくつかピックアップしておきました。
JSONPは、JavaScriptのみで完結するためマッシュアップには適しています。
- Flickr API
- Prototype.js 1.6.0
- PopBox
- dhtmlxGrid
- JSONP提供サービス
** reCAPTCHAのススメ [#rd4a60dc]
http://www.tkrb.jp/guide/2008/01/recaptcha.html
スパム書き込みを防ぐCAPTCHAの一つである、reCAPTCHAの導入とカスタマイズについて書きました。
また、LITBoxを使用したレイヤー表示後にreCAPTCHA表示を動的に行うサンプルを書いています。
- reCAPTCHA
- LITBox
- prototype.js + scriptaculous
** SWFAddress2.0を利用した「状態」による機能制御 [#k951fc20]
http://www.tkrb.jp/guide/2008/02/state_control_that_used_swfaddress2.html
Ajaxで動的に表示する商品詳細などの画面に対して、ディープリンクをつけることができるSWFAddress2.0について書いています。
また、イベントハンドラによる動作制御と、状態による動作制御の違いについて書いています。
また、弊社ビジネスブログの方に記述した[[RIA：SWFAddress2.0によるディープリンクの作り方とアクセス解析の注意点:http://www.ark-web.jp/blog/archives/2008/03/deep_link_and_access_analysis_by_swfaddress2_in_ria.html]]も合わせてチェックしてみてください。
- SWFAddress
- PopBox
- SWFAddressのアクセスログへの反映
** 楽天API＋SWFAddress2.0を利用したストアのマッシュアップ [#h4d53534]
http://www.tkrb.jp/guide/2008/02/swfaddress2_store-mushup_demo_with_rakuten-api.html
楽天のAPIを利用して、一覧を表示し、詳細を表示するマッシュアップを作る際に、前回のSWFAddressを使ってディープリンクを確保する。というSWFAddressの実践編的な内容です。
JSONPで取得したデータを表示する際に、外部HTMLをテンプレートとしてAjaxで読み込んで、prototype.jsのinterpolateで置換する形にチャレンジしています。
- 楽天 API
- jsr_class.js によるJSONPの実装
- prototype.js
- SWFAddress
- 外部テンプレート化
** Adobe AIRでAjax！HTMLとJavaScriptでそのままAIRに移行できるサンプル [#aff60949]
http://www.tkrb.jp/guide/2008/03/just_shift_to_adobe_air_by_html_and_javascript.html
AIRの魅力の1つに、今までWebを構築してきた技術であるHTMLとJavaScriptによって、AIRアプリもまた構築できる点があげられると思います。
この記事では、まずWebアプリを作ってからAIRアプリ化する方法を記述しています。
AIRアプリの配布の方法として、インストールバッジによる配布について記述してあります。
この方法ではAIRランタイムも同時にユーザ環境へインストールされるので、ユーザのインストールへの敷居をグッと下げられると思います。
- Adobe AIR SDK による構築
- WebアプリからAIRアプリへ
- prototype.js
- AIR インストールバッジ
** Adobe AIRでAjax！(その２) AIR APIを利用してWebとLocalを繋ぐマッシュアップ サンプル [#hfb2e70f]
http://www.tkrb.jp/guide/2008/03/mashup_sample_which_joins_web_and_local_together_using_air_api.html
ホットペッパーのAPIを利用して、まずはWebアプリを作っています。
そこから、AIRに設定ファイルを渡して、ローカルのSQLiteに保存、そのデータを利用したAIRアプリの実装について書いています。
最終回でともかく山盛りになってしまいました＾＾；
- ホットペッパー API
- jsr_class.js によるJSONPの実装
- prototype.js
- 外部テンプレート化
- GoogleMaps
- GoogleMapsで円の描画
- GoogleMapsで住所から緯度/経度を取得する (ローカルサーチ)
- AIR API
- SQLiteへのデータアクセス
- SQLite ManagerというFirefoxのエクステンション
#blikifooter(竹村)
----
tag: [[JavaScript>tag/JavaScript]]
![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
