【ゼロからのmixiアプリ開発（２）開発編】「AppliTwitter」α版を作るために使ったもの
さて、前回の続きで、mixiアプリ「AppliTwitter」α版を作るのに使ったもの・参考にしたものについて、プログラミングの観点から書いていきます。
前回のエントリーも参考にしてください。
【ゼロからのmixiアプリ開発（１）概要編】「AppliTwitter」α版を作ってみました | ソーシャルアプリ.jp
mixiアプリのPC版は、とりあえず動作するものを作るだけなら難しくありません。HTML/CSS/JavaScriptと、OpenSocialの基本的な知識をつけておけば大丈夫です。
開発者側で用意するものは、アプリの内容（コード）を記述したXMLファイルを、どこかのサーバーに置くだけです。それをmixiアプリの設定画面で読み込ませると、ユーザーがアプリを使うときにmixiはそのXMLファイルを読み込みにいき、その内容をmixiのサイト内でユーザーに表示します。
XMLの内容は、下記が基本構成です。
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="任意のタイトル"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"> <![CDATA[ //ここにHTML,JavaScriptなどを記述していく ]]> </Content> </Module>
これを任意のエディタに記述し、「〜〜.xml」というファイル名で保存し、どこかの外部サーバーに置き、mixiアプリの設定画面でそのURLをひもづけるだけ、となります。
その外部サーバーというのも、いったん読み込んだxmlファイルはキャッシュが生成されますので、xmlを置いたファイルに負荷はほとんどかかりません。そもそもいまはGoogle App EngineやDropboxなど無料でサーバーとして使えるサービスがたくさんありますので、サーバー代もほぼ無料のようなものです。
ただしサーバーサイドの技術を使って外部サーバーと連携したアプリを作る場合などはもちろん別です。また、モバイルのmixiアプリはPC版とは仕様が違います。
基本的なmixiアプリ・OpenSocialの説明は他サイトで多く取り上げられていますので、詳しいチュートリアルはそちらを参照してください。いくつかリンクを貼っておきます。
連載インデックス「基礎から分かる、mixiアプリ作成入門」 – ＠IT
連載：OpenSocialを利用してガジェットを作ろう！｜gihyo.jp … 技術評論社
ウノウラボ Unoh Labs: OpenSocialを始めよう！第1回
【ポイント１】JavaScriptライブラリ「opensocial-jquery」を使って記述を大幅に簡略化
JavaScriptを書くにあたっては、オープンソースで公開されている「opensocial-jquery」というライブラリを使わせていただきました。これはいまやメジャーなJavaScriptライブラリである「jQuery」をOpenSocialの仕様を盛り込む形で拡張したもので、これを使うと複雑なコードの記述を大幅に簡略化することができます。mixiアプリはOpenSocialに準拠していますので、このライブラリが利用できます。
同様のライブラリにjOpenSocialというのもありますが、両方を比較検討した結果、現時点ではopensocial-jqueryのほうがドキュメントが充実していたため、私はそちらを使うことにしました。
jOpenSocial と opensocial-jquery についてまとめ ( ラボブログ )
opensocial-jqueryはjQueryの書き方をそのまま使えます。といっても私はそれまでjQueryを使ったことはなかったので（Prototype.jsなどは多少使っていました）jQueryの基本から始めたのですが・・・jQuery素晴らしいですね！ いや〜分かりやすい。しかも多機能。
CSSを書く感じで使えてしまいます。コードが飛躍的に分かりやすくできます。
【ポイント２】データを保存したい・・・さて、どうする？
mixiアプリを開発していると、ユーザーが繰り返しアプリを使う際に備えて、データを保存しておきたい場合があります。このときに、mixiアプリでは、
（１）外部のウェブサーバー・データベースなどに保存する
（２）Persistance APIを使って、mixiアプリ内でデータを保存（永続化）する
のどちらかになります。本来OpenSocialであれば（３）としてUserPref（ユーザー設定項目）を使って各ユーザーのデータを保持しておくことができるのですが、mixiではこれができません。今回は（２）を使ってみることにしました。データベースを使うような大量のデータの保存・整理には適しませんが、ちょっとしたデータの保存であれば便利に使えそうです。
Persistance APIの記述もけっこうややこしいのですが、opensocial-jqueryを使うと簡潔に記述できます。
UserPrefの代わりに永続化データを設定したりする画面を作ってみる – プログラマー、再起動中
私がつまづいたのはviewerかownerかというところ。mixiアプリではそのアプリを見ている人（viewer）と、そのアプリのオーナー（owner）が一致するとは限らないので、場合分けが必要になります。中でもポイントだったのは、「ownerとしてデータは保存できない」です。mixiデベロッパーのサイトにもこのことは書いてありますが、データが保存できないと勘違いして悩んでいました。
mixi Developer Center (ミクシィ デベロッパーセンター) » 情報を共有してみよう
第1引数のユーザIDは、Viewer固定となります。他のユーザへの情報の永続化は、セキュリティの観点からmixi Platformでは許可されません。
【ポイント３】本人がアプリを使っている場合と、他のユーザーが見に来た場合で見せ方をかえる
今回作ったAppliTwitterでは、マイミクのTwitterIDを入力する箇所がありますが、これはアプリのオーナーのみが可能な操作であるべきで、他のユーザーがそのアプリを見に来た場合には、勝手に編集されないように隠しておく必要があります。
そこで、いまそのアプリを見ている人がそのアプリをインストールしたオーナーなのか、それとも他のユーザーなのかを判定する処理が必要になります。
Owner = Viewer のチェック方法いろいろ ( ラボブログ )
これもopensocial-jqueryで簡潔に書けます。
viewerがownerと違うときには、Twitter IDの入力画面は表示されないようにした
–
まだ本格的な外部サイトとの連携や、アクティビティストリームを使っていないので、mixiアプリの機能の半分も使えているとはいえません。今後より使われるアプリにするために、ソーシャルな仕組みを考えて取り入れていかなければなりませんね。
また、7月17日(金)に行われるOpenSocial Hackathonに参加することになったので、それに向けてもう少し知識をつけておこうと思います。
mixi Engineers’ Blog » mixi、gooホーム共催！OpenSocial Hackathonを開催いたします！
関連リンク：
mixi Developer Center (ミクシィ デベロッパーセンター)
