つくるぶガイドブログ http://www.tkrb.jp/guide/ つくるぶガイドの7人がお届けする、Web開発にチョット役立つブログです。 ja Copyright 2008 Mon, 31 Mar 2008 14:30:00 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss Adobe AIRでAjax！(その２) AIR APIを利用してWebとLocalを繋ぐマッシュアップ サンプル （株）アークウェブの竹村です。 前回はAdobe AIRの制作環境構築と、ユーザに配布するまでの流れを説明しました。 今回もマッシュアップサービスを利用しつつ、AIR APIをいくつか使ったサンプルを用意しました。

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

ホットペッパーのAPIに「ランチ」というフラグがあるのに着目し、ランチを提供しているショップリストを表示するサンプルです。ショップ検索をする際に、予め自分の住所や 指定した緯度経度などを設定できるようにしています。 オヒルダ！の構成は↓このようになります。 01organize.jpg 最初にWeb版を作ります。Web版には下記の機能を盛り込みます。 w-1. ホットペッパーAPIを通して検索結果一覧を表示する w-2. 検索で使用する地域/ジャンルを設定できるようにする w-3. 設定をAIRアプリ用にエクスポートできるようにする AIR版には下記の機能を盛り込みます。 a-1. ホットペッパーAPIを通して検索結果一覧を表示する a-2. Web版の設定をインポートできるようにする 今回利用するAIR APIは『ローカルファイル選択ダイアログの表示』と『ファイルの内容の読み取り』と『SQLiteへのアクセス』の 3点です。 完成版は↓こちらからアクセスできます。
オヒルダ！ (Web版)
02image.jpg
オヒルダ！ 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版のソース一式ダウンロード
  • まとめ
]]> http://www.tkrb.jp/guide/2008/03/mashup_sample_which_joins_web_and_local_together_using_air_api.html http://www.tkrb.jp/guide/2008/03/mashup_sample_which_joins_web_and_local_together_using_air_api.html JavaScript AIR API Adobe AIR CookieManager GoogleMaps SQLite ホットペッパー マッシュアップ ローカルサーチ Mon, 31 Mar 2008 14:30:00 +0900 失敗しない Rails が動かせるホスティングサービス選びと環境構築
  • つくるぶガイドブログ: Ruby on Rails を使ってひとりでサービスを作ってみよう
  • つくるぶガイドブログ: ひとりサービスの雛型をつくる(リキッドレイアウト、GetText、Acts as Authenticated)
  • つくるぶガイドブログ: Rails で楽々ソーシャルブックマークの仕組みを作る
  • つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう
  • つくるぶガイドブログ: ドラッグアンドドロップで並べ替え(Rails + Ajax)
  • つくるぶガイドブログ: Rails + rcov でテストカバレッジを調べる
  • つくるぶガイドブログ: capistrano で本番環境にデプロイ
  • つくるぶガイドブログ: Rails で Yahoo 検索 API + Widgets Tabnav でタブナビゲーション
  • つくるぶガイドブログ: ひとりサービスをリリースするまでやっておくこと10個
    • ]]>     http://www.tkrb.jp/guide/2008/03/_rails.html http://www.tkrb.jp/guide/2008/03/_rails.html Ruby Rails ホスティング 環境構築 Wed, 19 Mar 2008 12:35:00 +0900     JiftyでWebアプリをつくる - JiftyからMVCを考える
  • JiftyでWebアプリをつくる - Windowsにインストール
  • JiftyでWebアプリをつくる - ログイン機能を作る

    • Jiftyの考え方

    一般的にWebアプリケーションのフレームワークなどで使用されるアプリケーション構造はMVC(Model-View-Controller)と呼ばれる形に機能は分類されますが、 Jiftyでは本家サイトのBasic concepts of Jiftyで説明されているように「Dispatcher」「Action] 「Template」「Model」という4つの要素でアプリケーションを構成しています。 それぞれの要素は主に以下のような役割で開発するように設計されています。
    • Dispatcher: URLに対してActionやTemplateへのマッピングを定義。
    • Action: 画面内での操作やリクエストなどをトリガーに発生するビジネスロジックを定義。
    • Template: 表示系のデータ取得処理や、UIのレイアウト情報を定義。
    • Model: 操作対象となるデータモデルの構造や操作を定義。
    通常のMVCではControllerでまとめて扱われることの多いDispatcherとActionの役割を、Jiftyではフレームワークレベルで明確に分けています。 また、表示系の処理もViewが使用するhtmlテンプレートやControllerに分散しやすいですが、JiftyではTemplateのPerlモジュール内で一括管理するように設計されているのが特徴だと思います。

    サンプルアプリShrinkURLを見る

    新しいモジュールやフレームワークの使い方を理解するには サンプルをてっとり早く動かしてみていろいろいじってみるのが早いと思います。 サンプルアプリケーションであるShrinkURLを見てみましょう。
    セットアップ
    先ほどサンプルはJiftyと一緒に配布されていると書きましたが、 Windows版のPPMには含まれていないようです。 TortoiseSVNなどのSubversionクライアントをインストールしている方は下記レポジトリから、 チェックアウトしてください。 
    http://svn.jifty.org/svn/jifty.org/jifty/trunk/examples/ShrinkURL
    ブラウザ経由でもCPANのJiftyのページからダウンロードできます。 解凍後のフォルダのexamples\ShrinkURLが今回使用するアプリケーションフォルダです。 適当な作業フォルダにShrinkURLをコピーしてください。 また、ShrinkURLが依存するモジュールとしてNumber::RecordLocatorが必要になります。 別途Package Managerを使ってインストールしてください。 最後に、以下のようにコマンドプロンプトから ShrinkURLフォルダ配下でコマンドを実行するとセットアップ完了です。 
    C:\tmp\ShrinkURL>perl bin\jifty schema --setup
    動作確認
    まずは素の状態の動作を見てみます。 以下のようにjiftyコマンドにserverオプションを指定して実行するとアプリケーションサーバが起動し、 デフォルトではhttp://localhost:8888/のURLで アクセスできるようになります。 
    C:\tmp\ShrinkURL>perl bin\jifty server
    ShrinkURLは、入力されたURLにユニークなキーを割り当て、短縮したURLでサイトにアクセスできるようにするアプリケーションです。 登録したURLはDBに登録され、短縮したURLはいつでも利用することができます。 1.URLを入力してShrink it!ボタンをクリック sc0000.png 2.短縮したURLが生成される sc0001.png 生成されたURLにブラウザからアクセスすると、元の入力したURLへリダイレクトされます。 ]]>     http://www.tkrb.jp/guide/2008/03/jiftyweb_jiftymvc_1.html http://www.tkrb.jp/guide/2008/03/jiftyweb_jiftymvc_1.html Perl Perl Webアプリケーション Windows Tue, 18 Mar 2008 10:18:28 +0900     アプリケーションとサーバサイドマッシュアップの統合 第2回、第3回、第4回でStrutsとAjaxを組み合わせてサーバへの通信と比較的リッチなUIを作成しました。また、第5回、第6回、第7回ではマッシュアップについて説明し、実際にサーバーサイドマッシュアップの実装を行いました。 今回は、題材のアプリケーションにサーバーサイドマッシュアップを統合します。]]> http://www.tkrb.jp/guide/2008/03/struts.html http://www.tkrb.jp/guide/2008/03/struts.html Java Wed, 12 Mar 2008 18:45:14 +0900 Adobe AIRでAjax！HTMLとJavaScriptでそのままAIRに移行できるサンプル （株）アークウェブの竹村です。 2008年2月25日にAdobe AIR 1.0 (英語版)がリリースされましたね。 AIRはHTMLやJavaScriptなどWebの技術をそのまま利用してクライアントサイドのデスクトップアプリケーションの開発ができるので、今までのWebデベロッパーには親しみやすいと思います。 今回は、このAIRでHTMLとJavaScriptを使ったWebアプリをAIRに変換してユーザに配布するまでについて、書いていきます。 レジュメは↓このようになっています。
    • AIRアプリケーションを制作できる環境構築
    • ユーザに配布するまでの流れ
    • アプリケーション記述ファイルの作成
    • AIRコンテンツの制作
    • AIRコンテンツの確認
    • 電子署名の作成
    • インストールパッケージの作成
    • Webにアップする (インストールバッジの作成)
    • おまけ：JavaScriptライブラリを利用したフォーム入力チェックのAIR化
    • フォーム入力チェックのWeb版を制作
    • AIRアプリをWebにアップするまで一気におさらい
    • まとめ
    今回作る2つのサンプルは↓こんな感じです。 まずは、Windows環境にAIRアプリケーションを構築できる環境を作って、 パブリッシュした swf をサーバにおいて動作できるようにしてみましょう。]]>     http://www.tkrb.jp/guide/2008/03/just_shift_to_adobe_air_by_html_and_javascript.html http://www.tkrb.jp/guide/2008/03/just_shift_to_adobe_air_by_html_and_javascript.html JavaScript AIR+HTML+JavaScript Adobe AIR 入力チェック Wed, 12 Mar 2008 14:00:00 +0900     ひとりサービスをリリースするまでやっておくこと10個
  • つくるぶガイドブログ: Ruby on Rails を使ってひとりでサービスを作ってみよう
  • つくるぶガイドブログ: ひとりサービスの雛型をつくる(リキッドレイアウト、GetText、Acts as Authenticated)
  • つくるぶガイドブログ: Rails で楽々ソーシャルブックマークの仕組みを作る
  • つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう
  • つくるぶガイドブログ: ドラッグアンドドロップで並べ替え(Rails + Ajax)
  • つくるぶガイドブログ: Rails + rcov でテストカバレッジを調べる
  • つくるぶガイドブログ: capistrano で本番環境にデプロイ
  • つくるぶガイドブログ: Rails で Yahoo 検索 API + Widgets Tabnav でタブナビゲーション
    • ]]>     http://www.tkrb.jp/guide/2008/03/14.html http://www.tkrb.jp/guide/2008/03/14.html Ruby exception notifier google adsense google analytics montastic rails slow query log バックアップ Wed, 05 Mar 2008 11:20:29 +0900     lightboxをカスタマイズしてみよう（中編）- 角丸対応ライブラリとCanvas ※このエントリは「Lightboxのデザインをカスタマイズしてみよう（前編）」のつづきです。 こんにちは、HTML+CSS担当の小森です。 ずいぶん間が空いてしまいましたが、前回の続きです。前回は、CSSだけでlightboxを角丸にする方法をいろいろと模索したものの、サイズ可変に対応できなかった…というところで終わりました。]]> http://www.tkrb.jp/guide/2008/02/lightbox_canvas.html http://www.tkrb.jp/guide/2008/02/lightbox_canvas.html HTML/CSS Fri, 29 Feb 2008 22:33:32 +0900 Restletとjson-lib を使ったWebサービスへのアクセス 前回の内容は、標準Java APIを使用を使用してテクノラティのWebサービスにアクセスしました。今回は、前々回で紹介した標準Java API以外のライブラリを利用して、Webサービスにアクセスしてみたいと思います。]]> http://www.tkrb.jp/guide/2008/02/restletjsonlib_web.html http://www.tkrb.jp/guide/2008/02/restletjsonlib_web.html Java Mon, 25 Feb 2008 22:50:22 +0900 楽天API＋SWFAddress2.0を利用したストアのマッシュアップ （株）アークウェブの竹村です。 前回の『SWFAddress2.0を利用した「状態」による機能制御』でSWFAddressのによるディープリンクの作り方と、通常のイベント駆動との違いについて理解いただけたと思います。 今回はこれを利用して、JavaScriptだけで楽天APIとマッシュアップしたストアのサイトを作ってみたいと思います。 レジュメは↓このようになっています。
    • Ajaxストア つくるぶ店
    • 楽天のAPI
    • 状態の設計
    • 初期化と状態制御部分
    • 楽天APIでJSONを取得するまで
    • 取得したJSONの出力はテンプレートを外部ファイルで
    • 詳細側も同じ要領で出力
    • ディープリンクにアクセスしてみる
    • まとめ

    Ajaxストア つくるぶ店

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

    ▼Ajaxストア つくるぶ店 ajax_store.jpg http://okra.ark-web.jp/~takemura/public/js/swfaddress2_store_demo/#/detail/?category=100317&product=wineya:664477

    ]]>     http://www.tkrb.jp/guide/2008/02/swfaddress2_store-mushup_demo_with_rakuten-api.html http://www.tkrb.jp/guide/2008/02/swfaddress2_store-mushup_demo_with_rakuten-api.html JavaScript RIA SWFAddress 外部テンプレート 楽天API 状態制御 Mon, 25 Feb 2008 10:30:00 +0900     Rails で Yahoo 検索 API + Widgets Tabnav でタブナビゲーション
  • つくるぶガイドブログ: Ruby on Rails を使ってひとりでサービスを作ってみよう
  • つくるぶガイドブログ: ひとりサービスの雛型をつくる(リキッドレイアウト、GetText、Acts as Authenticated)
  • つくるぶガイドブログ: Rails で楽々ソーシャルブックマークの仕組みを作る
  • つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう
  • つくるぶガイドブログ: ドラッグアンドドロップで並べ替え(Rails + Ajax)
  • つくるぶガイドブログ: Rails + rcov でテストカバレッジを調べる
  • つくるぶガイドブログ: capistrano で本番環境にデプロイ
    • 今回は API との連携、マッシュアップをおこなってみたいと思います。 手前味噌ではありますが、筆者が以前作成した » Rails で Yahoo 検索 API を使うためのプラグイン YahooSearchApi : 僕は発展途上技術者 を使います。 ソーシャル「OSを入れた後にインストールする10のアプリケーション」(仮) は、みんながOSを入れた直後にどんなアプリケーションをインストールするのかを、そのアプリケーションの Web ページをブックマークすることで共有するサイトです。 アプリケーション名をキーワードに、API を使って Yahoo 検索の結果を表示することで、そのアプリケーションの関連情報を表示してみます。 後半では Widgets というプラグインの Tabnav 機能を使って、タブナビゲーションを実現します。 ]]>     http://www.tkrb.jp/guide/2008/02/rails_yahoo_api_widgets_tabnav.html http://www.tkrb.jp/guide/2008/02/rails_yahoo_api_widgets_tabnav.html Ruby API Rails Tabnav Widgets Yahoo タブ プラグイン 検索 Wed, 20 Feb 2008 10:00:00 +0900     標準Java APIを使用したWebサービスへのアクセス 前回の内容は、典型的なマッシュアップの形態や、SOAPやRESTなどのWebサービスの種類についても取り上げました。今回は、実際にWebサービスにアクセスして情報を得るためのコードを紹介しようと思います。何らかのライブラリをいきなり使っても良いのですが、まずは堅く、標準Java APIのみで試してみたいと思います。といっても、とっても面倒な手順というわけではありませんので、ご安心ください。]]> http://www.tkrb.jp/guide/2008/02/java_apiweb.html http://www.tkrb.jp/guide/2008/02/java_apiweb.html Java Tue, 12 Feb 2008 20:03:12 +0900 SWFAddress2.0を利用した「状態」による機能制御 （株）アークウェブの竹村です。 以前、「Flash|Ajaxベストサイトセレクション２０」でご紹介していた 「Gucci」のサイトですが、今もなお、Ajaxによる画面遷移を行っています。 さて、この「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というディープリンクをお助けするライブラリがありますので、 このライブラリを使いながら、概念を理解していきましょう。 ]]>     http://www.tkrb.jp/guide/2008/02/state_control_that_used_swfaddress2.html http://www.tkrb.jp/guide/2008/02/state_control_that_used_swfaddress2.html JavaScript PopBox SWFAddress 状態制御 Fri, 08 Feb 2008 15:00:00 +0900     capistrano で本番環境にデプロイ
  • つくるぶガイドブログ: Ruby on Rails を使ってひとりでサービスを作ってみよう
  • つくるぶガイドブログ: ひとりサービスの雛型をつくる(リキッドレイアウト、GetText、Acts as Authenticated)
  • つくるぶガイドブログ: Rails で楽々ソーシャルブックマークの仕組みを作る
  • つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう
  • つくるぶガイドブログ: ドラッグアンドドロップで並べ替え(Rails + Ajax)
  • つくるぶガイドブログ: Rails + rcov でテストカバレッジを調べる
    • まだ開発途中ではありますが、今回はアプリケーションを本番環境にデプロイしてしまおうと思います。 開発環境で開発したアプリケーションを本番環境に移すデプロイの作業は、それぞれの環境によって千差万別なやりかたがあるため、ときにはかなりてこずることがあります。 リリース間際ではなく、なるべく早い段階で本番環境でも開発環境と同じように動くことを確認しておくと安心です。 capistrano はデプロイの作業を楽にしてくれるおすすめのツールです。 » Capistrano: Home 本番環境には筆者が契約している VPS(Cent OS 5) を例に、capistrano のデプロイ作業の流れを紹介します。 アプリケーションサーバーには Mongrel Cluster、Web サーバーには Apache という定番の構成をとることにします。]]>     http://www.tkrb.jp/guide/2008/02/capistrano_rails.html http://www.tkrb.jp/guide/2008/02/capistrano_rails.html Ruby capistrano rails デプロイ 本番環境 Thu, 07 Feb 2008 22:30:01 +0900     JiftyでWebアプリをつくる - ログイン機能を作る ※2008/02/09 Jifty::Plugin::Authentication::Passwordについて追記しました。 こんにちは、Perl担当の西山です。 前回に引き続き、DRY(Don't Repeat Yourself)をとことん追求する WebフレームワークJiftyの話題です。 今回からJiftyを使ったWebアプリケーションの作り方について書いていこうと思います。 手元の環境にPerlの実行環境やJiftyをインストールしていない方は 前回のエントリーを参照してください。

    ログイン機能を付ける

    さてサンプルアプリのお題は・・・と考えてみましたが、
    Jifty自体がRailsを少なからず意識していることもありますし、
    本ガイドブログのRubyのエントリーに勝手に(汗;)連動して
    パスワード認証によるログイン機能をまずは実装してみようと思います。
    Ruby on Railsを使った作り方はこちら を参照して比較してみるのも面白いのでは？

    なお、ここでは説明の簡単の為にDBはMySQLではなく標準添付のSQLiteを使用します。 ]]>     http://www.tkrb.jp/guide/2008/02/jiftyweb.html http://www.tkrb.jp/guide/2008/02/jiftyweb.html Perl Perl Webアプリケーション Windows Tue, 05 Feb 2008 19:34:15 +0900     Javaによるサーバサイドマッシュアップ 前回までに、Strutsアプリケーションの一部機能がAjax対応になりました。ビジネスロジックがJavaBeansになっていることで、それが持つ処理の再利用が実現でき、さらにDWRを使うことによって、Webブラウザ上からJavaScriptでのサーバサイドの処理を比較的簡単に利用することができました。多くのStrutsで作られたシステムは、このようにAjax対応を進めていくことができますので、積極的にAjaxに対応して、よりリッチな操作感を利用者に提供していきましょう。 さて今回からは、Javaでのマッシュアップに関する話をしていきたいと思います。元々Javaは「ネットワークに強い」という特徴がありますので、インターネット上に存在するどんなWebサービスでも、マッシュアップを行って自分のサービスに統合することが可能です。他の言語と違い、Javaの世界は、無数のOSSが次々と登場しています。それらをうまく活用することで、よりマッシュアップが手軽なものになります。]]> http://www.tkrb.jp/guide/2008/01/stru.html http://www.tkrb.jp/guide/2008/01/stru.html Java Mon, 28 Jan 2008 19:55:35 +0900