これ、俺ならこう使う(2)
Adobe AIRでiTunes×Twitterクライアントを作ってみた
立薗理彦
2008/8/11
ローカルのPC上のiTunesで再生されている楽曲のタイトルを読み込み、ユーザーのTwitterアカウントに「いま聴いている曲」として投稿するアプリケーション「音ログAIR」を作ってみました
Webサービス開発者の徒労が軽減!?
- - PR -
こんにちは。以前「音ログ」というネットサービスをやっていた立薗です。当時の音ログの運営で、一番苦労したのはサービスと連携するクライアントアプリの開発でした。
音ログは、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つで最低限の構成ができます。
- XML形式のAIRアプリケーション記述ファイル
- ウィンドウの表示のためのHTMLファイル
- Adobe AIRの機能をJavaScriptのコードから呼び出すためのAIRAliases.js
アプリケーション記述ファイルには、アプリケーションIDやバージョンなどの基本情報のほか、初期アプリケーションウィンドウで使用するHTMLファイル(上記ファイル名を指定)のファイル名などを書き込みます。
これらのファイルが準備できたら、コマンドラインから以下のコマンドを実行することで、実際に動作を確認できます。
% adl アプリケーション記述ファイル.xml |
このウィンドウをベースに必要な機能を追加していくことで、アプリケーションを作成することができます。
それでは、Adobe AIRの提供する機能を紹介しながら、iTunes × Twitterクライアントに必要な機能を実装していきたいと思います。
今回作るもの
音ログAIRはローカルのPC上のiTunesで再生された楽曲のタイトルを読み込み、ユーザーのTwitterアカウントに「いま聴いている曲」として投稿するアプリケーションです。
![]() |
| 音ログAirのインターフェイス。「Twitterに投稿」のボタンが付いている |
- 再生中の楽曲のタイトルなどを表示する「メインウィンドウ」と、各種の設定を行う「設定ウィンドウ」から構成される
- 設定ウィンドウは、メインウィンドウの中の「設定」と書かれたリンクをクリックすると、オープンする
- 設定ウィンドウは、iTunesのライブラリファイルへのパスを指定するフィールドと、Twitterのアカウント情報(ユーザー名、パスワード)を入力するフィールド、それに「ユーザーがログインした際に自動的にアプリを起動する」チェックボックスから構成される
- 設定ウィンドウには「キャンセル」と「OK」のボタンがあり、「OK」をクリックすることで設定を更新、キャンセルをクリックすると設定を更新せずにメインウィンドウに戻る
![]() |
| iTunesライブラリファイルとTwitterのログイン情報を入力 |
「音ログAIR」のソースはこちらからダウンロードできます。また、設定方法は以下の通りです。
- 設定のところで、自分のMac/PCの「iTunes Music Library.xml」のパスを指定します。
Macだと「ミュージック」「iTunes」の下にあります。
Mac以外だと「マイミュージック」「iTunes」の下にあるケースが多いでしょう。 - Twitterのアカウント情報を設定して「OK」します。 実は普通に音楽を聴いているとiTunesはiTunes Music Library.xmlをなかなか更新しないので、聞いている曲の変化を検知できません。この場合「プレイリスト」を使って楽曲を再生してください。
| 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 |
||
| リッチクライアント&帳票 全記事一覧へ |
ホワイトペーパー(TechTargetジャパン)
- 現場の無駄な流血を止めるための「プロトタイプ」とは (2010/3/12)
サイトやWebアプリ/RIAの設計やデザインを効率良く進めるには、プロジェクト関係者の想定を一致させていくことが大事だが… - Flashを閃光のごとく高速化するための基礎知識 (2010/3/9)
Flash高速化のための基礎知識や実践的テクニックを紹介する連載。初回は“処理負荷”を調べる具体的な方法を解説します - Windows 7でどんだけ“おばか”なアプリが作れるの? (2010/3/4)
おばかの発想の源やアプリの作り方などについて、おばかアプリ選手権の歴戦の受賞者や、マイクロソフトの代表者に話を伺った。アイデアのご参考に - APIでGoogleスプレッドシートの追加/更新/削除 (2010/2/24)
ワークシートの追加・削除、メタ情報の更新、行単位でのデータの追加・更新・削除する方法を徹底解説します
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
| 仮想環境の構築とデータ保護の特効薬?! 実績と信頼性の高いパッケージで安心運用 New! |
| 仮想環境のバックアップもこれまでどおり 「まるごと取ってまるごと戻す」簡単運用 |
| おばかアプリ選手権、第4弾開催中!! ムダにカッコよくてくだらない作品求ム! |
| 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |
| その数、なんと400台以上! グループ内 サーバの「統合管理」によるメリットは? |
| 美人!? まあまあ? 気になる いやし系!! PV急増で「美人時計」がとった手段とは? |
| .NET編集長が実践する「技術情報検索術」 サンプル・コードを簡単に探す“技”は? |
| 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |
お勧め求人情報

**先週の人気講座ランキング**
〜Java編〜
| ◆ | おばかアプリ選手権、第4弾開催中!! ムダにカッコよくてくだらない作品求ム! |
| ◆ | 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |
| ◆ | Twitterのアカウントはなぜ突破された? メールによる新手の攻撃手法とその対策 |

| ◆ | もう仮想化のお試しフェイズは終わりだ! Hyper-V 2.0が基幹システムも仮想化 |
| ◆ | 美人!? まあまあ? 気になる いやし系!! PV急増で「美人時計」がとった手段とは? |
| ◆ | クライアント企業から求められる人材 ⇒IT技術と経営戦略を併せ持つ「戦略家」 |

| ◆ | .NET編集長が実践する「技術情報検索術」 サンプル・コードを簡単に探す“技”は? |
| ◆ | 業務効率と情報セキュリティ対策を両立! 手間なく確実に機密情報を守る方法とは? |
| ◆ | 直属上司が海外にいるのエンジニアに見る 【実例】場所に捉われないワークスタイル |

| ◆ | 「仮想化工房」のマイスターが選んだのは VMware、Hyper-V、そしてVirtageだった! |
| ◆ | 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |

| ◆ | 【CTC事例】約30の基幹システムを統合! 膨大なバッジジョブを制御した方法は? |
| ◆ | 仮想化すればコストは削減できるか? 仮想化に必要な「3つの視点」を解説する |
| ◆ | その数、なんと400台以上! グループ内 サーバの「統合管理」によるメリットは? |








