こんにちは。
JavaScriptを担当している竹村です。

JavaScriptのライブラリは、進化が早いのでいろいろなライブラリを使ったサイトについて解説したり、サンプルを作ったりしながら、どのようにライブラリを利用しているのか参考にしてもらえればと思います。

今回のお題

このつくるぶに8/20に掲載された「特集 Flash|Ajax ベストサイトセレクション20」に私も参加させていただいているのですが、この対談ではプログラム的な話はあまりしていないためAjaxパートについて、JavaScriptの技術面のフォローを弊社のブログにて書いています。

つくるぶ　ベストサイトセレクション20技術フォローまとめ -ARK-Web SandBox Wiki

ちょうど今朝の投稿で4回目になり、次回でラストの予定です。

さて、上記4回目の記事に書きました「お題７＞写真/動画で魅せるサイト」の「Zooomr」の「写真の上に別の写真のレイヤーを配置する」という部分を簡単に自作してみました。

Crosslayer サンプル
http://staff.ark-web.jp/~takemura/public/js/crosslayer/

今回のつくるぶガイドブログでは、これをprototype.js 1.6.0 RC1を利用してクラス化をしてみようと思います。prototype.js 1.6.0 RC1は2007/10/16にリリースされた現在最新のリリース候補バージョンです。
※これで1.6.0についてFIXされたわけではないのでリリースにあたって仕様が変わる可能性があります。

まず、どういうライブラリを作る?

今回の説明用に、Crosslayerをライブラリ化したサンプル事例を作ってきました。

Crosslayerサンプル事例:
http://staff.ark-web.jp/~takemura/public/js/crosslayer/example_1.6.0rc1/

アークウェブの最寄り駅の1つである『銀座一丁目』から『ビル前』までをアクセスマップのように、遷移していくものです。写真の中の四角い枠にマウスオーバーすると、次の写真がチラ見でき、クリックで先に進みます。

では、具体的にポイントとなるコードを見ていきます。

こんにちは、JavaScript担当の竹村です。

先日、Adobe MAX Japanに行ってまいりました。
ケビン・リンチ氏の「重要なのは"UI"ではなく"コンテンツ"」という部分にいたく共感しまして、JavaScriptを使って"コンテンツ"を構築してみようかと思い立ちました。

それでは、どのような"コンテンツ"を作ってみるかを検討します。

↑クリックで拡大

手書きでスミマセン^^;
簡単に説明すると画像系のAPIでコンテンツの素を取ってきて、それをMyリストに登録し、選りすぐったMyリストにコメントを付けて保存。他人が保存したリストも見れるようにして、面白い組み合わせを作って楽しもう！
といったところです。

題して！
『画像検索マッシュアップ - 僕のお気に入り』というサービス名で作ります。

さっそく、タスクを考えました。

1. [検索]をクリックすると、Flickr検索の画像検索APIを利用して画像検索を要求します
2. レスポンスをHTMLに描画します
3. この画像をクリックすると、PopBoxで大きく表示されます
4. 表示された画像の[追加]をクリックすると、Myリストに追加できます
5. [保存]すると、、、

[保存]から先の動作はとりあえず置いておいて、まずは1～4を作りましょう。

できあがりサンプルも置いておきますので、あわせてご覧ください。

▼画像検索マッシュアップ - 僕のお気に入り　【タスク1～4まで】
http://okra.ark-web.jp/~takemura/public/js/my_favorite/

こんにちは、JavaScript担当の竹村です。

前回に引き続き
『画像検索マッシュアップ - 僕のお気に入り』というサービスを作っていきます。

前回のおさらい

前回の記事は↓こちらです。

Flickrとのマッシュアップ！ (PopBoxとdhtmlxGrid)　その１

タスクを下記のように挙げていました。

1. [検索]をクリックすると、Flickr検索の画像検索APIを利用して画像検索を要求します
2. レスポンスをHTMLに描画します
3. この画像をクリックすると、PopBoxで大きく表示されます
4. 表示された画像の[追加]をクリックすると、Myリストに追加できます
5. [保存]すると、、、

このうちの 3番目のタスクでタイムアップとなってしまったので、
今回はタスク3, 4の PopBox と dhtmlxGrid について説明していき、
5以降のタスクを考える…という流れでいきましょう。

こんにちは、JavaScript担当の竹村です。

2回に渡ってお送りしてきた『画像検索マッシュアップ - 僕のお気に入り』ですが、今回で一旦終了とします。

前回までをご覧になっていない方は下記でおさらいしてみてください。

前回のおさらい

• Flickrとのマッシュアップ！ (PopBoxとdhtmlxGrid)　その１
  このアプリケーションのベースを作っています。Flickrとのマッシュアップ方法と、アプリ中のPopBoxとdhtmlxGridの利用シーンを確認できます。
• Flickrとのマッシュアップ！ (PopBoxとdhtmlxGrid)　その２
  PopBoxとdhtmlxGridの説明です。iframeでそれぞれのサンプルを確認できます。

できあがりイメージ

さて、今回は今までのライブラリの使い方を生かして、コンテンツ化していきます。
ちょっとずつ修正していった最終的なできあがりは↓このようになります。

▼僕のお気に入り -完成系

http://okra.ark-web.jp/~takemura/public/js/my_favorite_v2.1/

では、現状から完成系までの調整箇所を説明していきましょう。

こんにちは、JavaScript担当の（株）アークウェブの竹村です。
ちょっと出遅れまして本年の初投稿です。よろしくお願い致します。

テーマ：reCAPTCHA

さて、早速今回の内容について入っていきます。
今回は単発でreCAPTCHAのススメです。レジュメは↓このようになっています。

• reCAPTCHAってナニ?
• reCAPTCHAの導入
• reCAPTCHAの文言日本語化
• reCAPTCHAの動的な表示
• reCAPTCHAをLITBoxで表示
• CMSに設置する方法リンク集

reCAPTCHAってナニ?

reCAPTCHAリリース当初に、下記の記事が2007年の5月末に出ています。

• スパムに対抗しながら書籍をデジタル化、一石二鳥の「reCAPTCHA」
• reCAPTCHA - キャプチャを利用した人力高性能OCR

まずは、reCAPTCHAの説明の前に『CAPTCHA(キャプチャ)』はご存知でしょうか?
Yahoo!の新規登録など、Webサービスでよく使われるようになってきている、
画像文字の内容を入力させるアレです。

CAPTCHAの目的は『人間』と『コンピュータ(SpamBot)』を見分けることにあります。
画像文字はバイナリデータなのでコンピュータにはすぐには分かりませんが、人間には
目で見たり音声で確認すれば短時間で対応できます。

このCAPTCHAが有効であったことが上記@ITの記事にあります。

それを書籍のデジタル化に有効活用するように目を向けたのがreCAPTCHAです。
reCAPTCHAでは画像文字に単語が2つ出てきます。このうち1つはCAPTCHAと同じ
ように予め答えの分かっているもので、もう1つはOCRで読み取れなかった単語です。

CAPTCHAのしくみ上、ユーザは「両方正しい単語を入れるだろう」ということで成り立っています。

こんにちは、JavaScript担当の（株）アークウェブの竹村です。

以前、「Flash|Ajaxベストサイトセレクション２０」でご紹介していた
「Gucci」のサイトですが、今もなお、Ajaxによる画面遷移を行っています。

• Gucci

さて、この「Gucci」のサイトを語る上で外せないのが、オンラインショッピング ページのURLです。

例えば、↓こちらのバッグのURLへアクセスすると、バッグの詳細画面が表示されます。
http://www.gucci.com/us/us-english/us/spring-summer-08/web-exclusives/#0-179859-197020BCB1G7007

# 以下に商品を表すIDが振ってあります。

これを取ってアクセスすると、↓このカテゴリトップが表示されます。
http://www.gucci.com/us/us-english/us/spring-summer-08/web-exclusives/

このように商品詳細へ直接リンクを張ることを「ディープリンク」と呼ぶようです。
今回は、このディープリンクを実装する概念とライブラリをご紹介します。

レジュメは↓このようになっています。

• SWFAddress2.0
• タブ切り替えのサンプル
• 初期化処理
• イベントハンドラの処理
• イベント駆動との違い
• 状態の中のパラメータ
• ディープリンクにアクセスしてみる
• 次回予告

まず、SWFAddress2.0というディープリンクをお助けするライブラリがありますので、
このライブラリを使いながら、概念を理解していきましょう。

こんにちは、JavaScript担当の（株）アークウェブの竹村です。

前回の『SWFAddress2.0を利用した「状態」による機能制御』でSWFAddressのによるディープリンクの作り方と、通常のイベント駆動との違いについて理解いただけたと思います。

今回はこれを利用して、JavaScriptだけで楽天APIとマッシュアップしたストアのサイトを作ってみたいと思います。

レジュメは↓このようになっています。

• Ajaxストア つくるぶ店
• 楽天のAPI
• 状態の設計
• 初期化と状態制御部分
• 楽天APIでJSONを取得するまで
• 取得したJSONの出力はテンプレートを外部ファイルで
• 詳細側も同じ要領で出力
• ディープリンクにアクセスしてみる
• まとめ

Ajaxストア つくるぶ店

どういうアプリか完成品を見てみてください。
名づけて『Ajaxストア つくるぶ店』ですっ！

▼Ajaxストア つくるぶ店

http://okra.ark-web.jp/~takemura/public/js/swfaddress2_store_demo/#/detail/?category=100317&product=wineya:664477

こんにちは、JavaScript担当の（株）アークウェブの竹村です。

2008年2月25日にAdobe AIR 1.0 (英語版)がリリースされましたね。

• Adobe AIR

AIRはHTMLやJavaScriptなどWebの技術をそのまま利用してクライアントサイドのデスクトップアプリケーションの開発ができるので、今までのWebデベロッパーには親しみやすいと思います。

今回は、このAIRでHTMLとJavaScriptを使ったWebアプリをAIRに変換してユーザに配布するまでについて、書いていきます。

レジュメは↓このようになっています。

• AIRアプリケーションを制作できる環境構築
• ユーザに配布するまでの流れ
• アプリケーション記述ファイルの作成
• AIRコンテンツの制作
• AIRコンテンツの確認
• 電子署名の作成
• インストールパッケージの作成
• Webにアップする (インストールバッジの作成)
• おまけ：JavaScriptライブラリを利用したフォーム入力チェックのAIR化
• フォーム入力チェックのWeb版を制作
• AIRアプリをWebにアップするまで一気におさらい
• まとめ

今回作る2つのサンプルは↓こんな感じです。

• 外部ファイルを読み込んで表示するサンプル
  
• フォームの入力チェックサンプル
  

まずは、Windows環境にAIRアプリケーションを構築できる環境を作って、
パブリッシュした swf をサーバにおいて動作できるようにしてみましょう。

こんにちは、JavaScript担当の（株）アークウェブの竹村です。

前回はAdobe AIRの制作環境構築と、ユーザに配布するまでの流れを説明しました。

• Adobe AIRでAjax！HTMLとJavaScriptでそのままAIRに移行できるサンプル

今回もマッシュアップサービスを利用しつつ、AIR APIをいくつか使ったサンプルを用意しました。

ホットペッパーのマッシュアップサンプル『オヒルダ！』

ホットペッパーのAPIに「ランチ」というフラグがあるのに着目し、ランチを提供しているショップリストを表示するサンプルです。ショップ検索をする際に、予め自分の住所や
指定した緯度経度などを設定できるようにしています。

オヒルダ！の構成は↓このようになります。

最初にWeb版を作ります。Web版には下記の機能を盛り込みます。

w-1. ホットペッパーAPIを通して検索結果一覧を表示する
w-2. 検索で使用する地域/ジャンルを設定できるようにする
w-3. 設定をAIRアプリ用にエクスポートできるようにする

AIR版には下記の機能を盛り込みます。

a-1. ホットペッパーAPIを通して検索結果一覧を表示する
a-2. Web版の設定をインポートできるようにする

今回利用するAIR APIは『ローカルファイル選択ダイアログの表示』と『ファイルの内容の読み取り』と『SQLiteへのアクセス』の 3点です。

オヒルダ！ (Web版)

オヒルダ！ AIR版 インストーラー

今回のレジュメは↓このようになっています。

• w-1. ホットペッパーAPIを通して検索結果一覧を表示する
• w-2. 検索で使用する地域/ジャンルを設定できるようにする
• w-2-1. GoogleMapsで住所から緯度/経度を取得する
• w-2-2. GoogleMapsで円を描く
• w-2-3. 設定内容を保存する
• w-3. 設定をAIRアプリ用にエクスポートできるようにする
• a-1. ホットペッパーAPIを通して検索結果一覧を表示する
• a-2. Web版の設定をインポートできるようにする
• a-2-1. ローカルファイル選択ダイアログを表示して選ばせる
• a-2-2. ファイルを開いて内容を読み込む
• a-2-3. SQLiteに設定を保存する
• a. SQLiteから設定を読み込むには
• オヒルダ！AIR版のソース一式ダウンロード
• まとめ