Adobe AIRでiTunes×Twitterクライアントを作ってみた

日々生み出されるネットサービスやテクノロジーに詳しい著者による、こんなふうにサービスに取り込んだら面白いのではないか、という提案。技術的な応用面にフォーカスしていく（編集部）

Webサービス開発者の徒労が軽減!?

　 こんにちは。以前「音ログ」というネットサービスをやっていた立薗です。当時の音ログの運営で、一番苦労したのはサービスと連携するクライアントアプリの開発でした。

　音ログは、iTunesで聴いている楽曲のタイトルをサーバに次々投稿して再生履歴（音ログ）を公開するというコンセプトだったのですが、Mac OS X用のクライアント、Windows用のクライアントをそれぞれ用意して、さらにOSのバージョンの違いによる問題にも対応しなければならず、サーバ側の開発だけでも手いっぱいなのに！ と泣きたくなったのを覚えています。

　Adobe AIRは、そんな開発者の苦労を軽減してくれるかもしれない、期待の開発プラットフォームです。

Adobe AIRとは

　Adobe AIRは、デスクトップ上で動作するアプリケーションを開発するためのプラットフォームです。

• Windows／Mac OS X／Linuxなどマルチプラットフォームで動作するアプリケーションを開発できる。
• Flash、XHTML、 JavaScriptなどのWeb技術をベースに開発を行うことができる。
• ファイルの読み書きや、メニューやタスクトレイなどのUI、ファイルシステムやソケットによるネットワーク機能といったOSネイティブな機能にアクセス可能。
• 組み込みのSQLデータベースや、サウンドの再生などのライブラリが利用可能。

と、Webアプリとネイティブアプリのいいとこ取りができるのが特徴です。

　今回は、PC上のiTunesで再生された楽曲の情報をTwitterに投稿するクライアント「音ログ Air」の開発を行いながら、Adobe AIRの可能性を探ってみたいと思います。

　Adobe AIRはFlexと連携できるなど、いくつかの開発手段が用意されていますが、ここではAdobe AIR SDKをベースに、HTMLとJavaScriptを使って開発を行っています。Flash／Flex（ActionScript）を使った開発の仕方については、連載「作って学ぶAIRウィジェットの基礎→応用」を参照してください。

Adobe AIR SDKを使ったデスクトップアプリ開発

■SDKのインストール

　HTMLおよびJavaScriptを用いた開発については、Adobe AIRデベロッパーセンターの下記のページから始めるといいでしょう。

HTMLおよびAjax用Adobe AIRデベロッパーセンター

　詳細な解説はヘルプの下記の文書が参考になります。

HTMLおよびAjaxでのAdobe AIR 1.1アプリケーションの開発

　ここから先は、Adobe AIRランタイムおよびAdobe AIR SDKがインストールされたものとして話を進めます。開発環境としてはMac OS Xを前提にしていますが、Windows環境でもほぼ同じ手順で開発を行えると思います。パスの設定などは、適宜読み替えて進めてください。

まずはスケルトンアプリを動かしてみる

　HTML＋JavaScriptによるAIRアプリは、以下の3つで最低限の構成ができます。

1. XML形式のAIRアプリケーション記述ファイル
2. ウィンドウの表示のためのHTMLファイル
3. Adobe AIRの機能をJavaScriptのコードから呼び出すためのAIRAliases.js

　アプリケーション記述ファイルには、アプリケーションIDやバージョンなどの基本情報のほか、初期アプリケーションウィンドウで使用するHTMLファイル（上記ファイル名を指定）のファイル名などを書き込みます。

　これらのファイルが準備できたら、コマンドラインから以下のコマンドを実行することで、実際に動作を確認できます。

% adl アプリケーション記述ファイル.xml

　このウィンドウをベースに必要な機能を追加していくことで、アプリケーションを作成することができます。

AIR SDKを使用した初めてのHTMLベースのAIRアプリケーションの作成

　それでは、Adobe AIRの提供する機能を紹介しながら、iTunes × Twitterクライアントに必要な機能を実装していきたいと思います。

今回作るもの

　音ログAIRはローカルのPC上のiTunesで再生された楽曲のタイトルを読み込み、ユーザーのTwitterアカウントに「いま聴いている曲」として投稿するアプリケーションです。

音ログAirのインターフェイス。「Twitterに投稿」のボタンが付いている

• 再生中の楽曲のタイトルなどを表示する「メインウィンドウ」と、各種の設定を行う「設定ウィンドウ」から構成される
• 設定ウィンドウは、メインウィンドウの中の「設定」と書かれたリンクをクリックすると、オープンする
• 設定ウィンドウは、iTunesのライブラリファイルへのパスを指定するフィールドと、Twitterのアカウント情報（ユーザー名、パスワード）を入力するフィールド、それに「ユーザーがログインした際に自動的にアプリを起動する」チェックボックスから構成される
• 設定ウィンドウには「キャンセル」と「OK」のボタンがあり、「OK」をクリックすることで設定を更新、キャンセルをクリックすると設定を更新せずにメインウィンドウに戻る

iTunesライブラリファイルとTwitterのログイン情報を入力

　「音ログAIR」のソースはこちらからダウンロードできます。また、設定方法は以下の通りです。

1. 設定のところで、自分のMac/PCの「iTunes Music Library.xml」のパスを指定します。
   Macだと「ミュージック」「iTunes」の下にあります。
   Mac以外だと「マイミュージック」「iTunes」の下にあるケースが多いでしょう。
2. Twitterのアカウント情報を設定して「OK」します。 実は普通に音楽を聴いているとiTunesはiTunes Music Library.xmlをなかなか更新しないので、聞いている曲の変化を検知できません。この場合「プレイリスト」を使って楽曲を再生してください。

※　AIRファイルのアイコン画像は、FAMFAMFAM SILK ICONSのフリーアイコンを使用しています。

1-2

INDEX
これ、俺ならこう使う（2） Adobe AIRでiTunes×Twitterクライアントを作ってみた
	Page1 Adobe AIRとは Adobe AIR SDKを使ったデスクトップアプリ開発 まずはスケルトンアプリを動かしてみる 今回作るもの
	Page2 HTMLとJavaScriptでUIを構成する AIRアプリケーションの配布 これ、どう使う？

■ ＠IT関連記事

AptanaでAjax・AIR・iPhone用ページの開発を行う どこまでできる？ 無料ツールでWebサイト作成（2）　AptanaはAjax開発にも便利な機能を発揮し、Eclipseベースなので、プラグインでさまざまな機能拡張も実現します 「リッチクライアント ＆ 帳票」フォーラム 2007/9/13

Twitterやクラウドへも分岐するAjax／Web APIの道 Ajax うきうき Watch（29）　芸能人も参加中のGoogleマイマップEXPO、日本語化するTwitter、クラウドコンピューティング、もうすぐ始まるIE 7への自動更新など全8トピック 「リッチクライアント ＆ 帳票」フ ォーラム 2008/1/23

jQueryを使ってTwitterをおいしくマッシュアップ パターンとライブラリで作るAjaxおいしいレシピ（1）　jQueryを使ってTwitterのコメントをかんたんに表示するサンプルを見ながら、AjaxデザインパターンやMVCについて解説 「リッチクライアント ＆ 帳票」フ ォーラム 2007/8/29

過熱するTwitterブームとMicrosoftのマッシュアップ Ajax うきうき Watch（21）　すさまじい勢いで増え続けるTwitterを使ったツールやマッシュアップを使ったまったく新しいサイト。さらに、無料Webオフィスほか5トピックを紹介！ 「リッチクライアント ＆ 帳票」フ ォーラム 2007/5/25

過熱するTwitterブームとMicrosoftのマッシュアップ Ajax うきうき Watch（21）　すさまじい勢いで増え続けるTwitterを使ったツールやマッシュアップを使ったまったく新しいサイト。さらに、無料Webオフィスほか5トピックを紹介！ 「リッチクライアント ＆ 帳票」フ ォーラム 2007/5/25

Google App Engineは20％プロジェクトから生まれた Google Developer Day 2008特集（2）　プロダクトマネージャーに聞く、App Engineの成り立ちと現状、ビジネス、Amazon EC2との違い、そして日本人への期待 「リッチクライアント ＆ 帳票」フ ォーラム 2008/6/24

ご意見、ご感想は Smart＆Social 会議室へどうぞ

Smart＆Social フォーラム トップページへ