こんにちは、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版のソース一式ダウンロード
• まとめ

続きを読む "Adobe AIRでAjax！(その２) AIR APIを利用してWebとLocalを繋ぐマッシュアップ サンプル" »

Ruby（とRails）を担当している石原です。

ソーシャル「OSを入れた後にインストールする10のアプリケーション」(仮) を作る過程をレポートしてきましたが、10回目の今回をもって終わりとさせていただきます。

最後は、いよいよリリースしようという段階で必要な、ホスティングサービス選びと環境構築について書きたいと思います。

参考までにこれまでのエントリーはこちらです ↓

1. つくるぶガイドブログ: Ruby on Rails を使ってひとりでサービスを作ってみよう
2. つくるぶガイドブログ: ひとりサービスの雛型をつくる(リキッドレイアウト、GetText、Acts as Authenticated)
3. つくるぶガイドブログ: Rails で楽々ソーシャルブックマークの仕組みを作る
4. つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう
5. つくるぶガイドブログ: ドラッグアンドドロップで並べ替え(Rails + Ajax)
6. つくるぶガイドブログ: Rails + rcov でテストカバレッジを調べる
7. つくるぶガイドブログ: capistrano で本番環境にデプロイ
8. つくるぶガイドブログ: Rails で Yahoo 検索 API + Widgets Tabnav でタブナビゲーション
9. つくるぶガイドブログ: ひとりサービスをリリースするまでやっておくこと10個

続きを読む "失敗しない Rails が動かせるホスティングサービス選びと環境構築" »

お久しぶりです、Perl担当の西山です。

前回に続きDRY(Don't Repeat Yourself)を追求するWebフレームワークJiftyを取り上げます。
手元の環境にPerlの実行環境やJiftyをインストールされていない方はこれまでの記事を参照してください。
今回はJiftyと一緒に配布されている"ShrinkURL"というサンプルアプリケーションを題材に、
Jiftyに従ってアプリケーションを開発する場合のモジュール構造や考え方を見ていきたいと思います。

これまでの記事：

1. JiftyでWebアプリをつくる - Windowsにインストール
2. 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!ボタンをクリック

2.短縮したURLが生成される

生成されたURLにブラウザからアクセスすると、元の入力したURLへリダイレクトされます。

続きを読む "JiftyでWebアプリをつくる - JiftyからMVCを考える" »

この連載の第2回、第3回、第4回でStrutsとAjaxを組み合わせてサーバへの通信と比較的リッチなUIを作成しました。また、第5回、第6回、第7回ではマッシュアップについて説明し、実際にサーバーサイドマッシュアップの実装を行いました。

今回は、題材のアプリケーションにサーバーサイドマッシュアップを統合します。

続きを読む "アプリケーションとサーバサイドマッシュアップの統合" »

こんにちは、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 をサーバにおいて動作できるようにしてみましょう。

続きを読む "Adobe AIRでAjax！HTMLとJavaScriptでそのままAIRに移行できるサンプル" »

Ruby（とRails）を担当している石原です。

ソーシャル「OSを入れた後にインストールする10のアプリケーション」(仮) を作る過程をレポートしています。

今回は、開発はひとやすみにして、サービスをリリースする前にやっておくべき細々としたことを紹介したいと思います。

これらは筆者がひとりサービスをリリースするときに、毎回なんとなく思い出しながらやってきたことで、サービスによっては忘れてしまっているものもあります。

ですから、次からはこれをチェックリスト代わりに使おうと思っています。

Rails に限った話とWebサービス一般の話が混ざっています。ほかの言語やフレームワークを使っている方にも、Rails に限った話を自分の使っている環境に読み替えれば、いくらか参考になるかもしれません。

参考までにこれまでのエントリーはこちらです ↓

1. つくるぶガイドブログ: Ruby on Rails を使ってひとりでサービスを作ってみよう
2. つくるぶガイドブログ: ひとりサービスの雛型をつくる(リキッドレイアウト、GetText、Acts as Authenticated)
3. つくるぶガイドブログ: Rails で楽々ソーシャルブックマークの仕組みを作る
4. つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう
5. つくるぶガイドブログ: ドラッグアンドドロップで並べ替え(Rails + Ajax)
6. つくるぶガイドブログ: Rails + rcov でテストカバレッジを調べる
7. つくるぶガイドブログ: capistrano で本番環境にデプロイ
8. つくるぶガイドブログ: Rails で Yahoo 検索 API + Widgets Tabnav でタブナビゲーション

続きを読む "ひとりサービスをリリースするまでやっておくこと10個" »

※このエントリは「Lightboxのデザインをカスタマイズしてみよう（前編）」のつづきです。

こんにちは、HTML+CSS担当の小森です。
ずいぶん間が空いてしまいましたが、前回の続きです。前回は、CSSだけでlightboxを角丸にする方法をいろいろと模索したものの、サイズ可変に対応できなかった…というところで終わりました。

続きを読む "lightboxをカスタマイズしてみよう（中編）- 角丸対応ライブラリとCanvas" »

前回の内容は、標準Java APIを使用を使用してテクノラティのWebサービスにアクセスしました。今回は、前々回で紹介した標準Java API以外のライブラリを利用して、Webサービスにアクセスしてみたいと思います。

続きを読む "Restletとjson-lib を使ったWebサービスへのアクセス" »

こんにちは、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

続きを読む "楽天API＋SWFAddress2.0を利用したストアのマッシュアップ" »

Ruby（とRails）を担当している石原です。

ソーシャル「OSを入れた後にインストールする10のアプリケーション」(仮) を作る過程をレポートしています。

これまでのエントリーはこちら ↓

1. つくるぶガイドブログ: Ruby on Rails を使ってひとりでサービスを作ってみよう
2. つくるぶガイドブログ: ひとりサービスの雛型をつくる(リキッドレイアウト、GetText、Acts as Authenticated)
3. つくるぶガイドブログ: Rails で楽々ソーシャルブックマークの仕組みを作る
4. つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう
5. つくるぶガイドブログ: ドラッグアンドドロップで並べ替え(Rails + Ajax)
6. つくるぶガイドブログ: Rails + rcov でテストカバレッジを調べる
7. つくるぶガイドブログ: capistrano で本番環境にデプロイ

今回は API との連携、マッシュアップをおこなってみたいと思います。

手前味噌ではありますが、筆者が以前作成した

» Rails で Yahoo 検索 API を使うためのプラグイン YahooSearchApi : 僕は発展途上技術者

を使います。

ソーシャル「OSを入れた後にインストールする10のアプリケーション」(仮) は、みんながOSを入れた直後にどんなアプリケーションをインストールするのかを、そのアプリケーションの Web ページをブックマークすることで共有するサイトです。

アプリケーション名をキーワードに、API を使って Yahoo 検索の結果を表示することで、そのアプリケーションの関連情報を表示してみます。

後半では Widgets というプラグインの Tabnav 機能を使って、タブナビゲーションを実現します。

続きを読む "Rails で Yahoo 検索 API + Widgets Tabnav でタブナビゲーション" »