飴屋

mixiアプリ / 日記13

mixiアプリ開発に関係する環境の変化

mixiアプリ開発以外の業務がここのところ多かったので、すっかりご無沙汰をしていました。開発に関する所作もいろいろ忘れていたので、自分の日記でも読んでいろいろ思い出さないといけなそうです。今回はmixiアプリのAPIを叩くユーザのIDが従来の数字から13文字の英数字に変更になるという仕様変更にいよいよ対応しないといけないということで、久しぶりにgadget.xmlのファイルを開いてみました。

IDの変更っていうのは仕様変更の中でも相当強烈なやつなので、これほどのインパクトの強いこともそうそうないとは思いますが、その他にもAPIの機能の強化などはちょこちょこと行われています。

課金プログラム周りでWebMoneyが導入できるようになるっていう変更があったみたいです。少額決済については、IT業界内でも大きな動きが起こっている途中ですので、来年にはもうちょっと面白いことになるかもしれませんね。私みたいな零細事業主には新しいチャンスにもなりますし、いろんな個人の活躍がみれるようになってきたら楽しいと思います。まだ、国内ではお金の流通が絡むといろいろ障害が多いですが、ソーシャルゲームのプラットフォーム屋さんのうち、どこがそこに穴をあけてくれるのか気になります。私はpaypalさんをウォッチングしてたんですが、ここにきてgoogleさんが動きだしました。(googleさんはゲーム開発の方にも手をつけそうですね。)

また、国内でのfacebookに対しての動きがチラホラと目に映るようになってきました。まだfacebookの利点やアプリの開発のしやすさは勉強中なのでわかりませんが、海外在住の友達とはfacebookで交流せざるをえないという状況ですので、mixiの国際化対応への舵取り次第では5年後はどうなってるかわかんないな〜って思いました。mixiはまずアジアのSNS企業との提携を開始したようで、opensocial利用のメリットがその辺で出てくるのかもしれません。opensocialといえばgoogleさんが一枚噛んでますので、facebookとgoogleという2大プレーヤーの対立に集約されるのかななんて簡単に考えてしまいがちですが、mixiさんのポジションやいかに?

そうそう、アプリのように多くの人からのアクセスが想定される内容において、バックエンドのスケーラビリティを担保するのにGoogle App Engineを選択するデベロッパーがたくさんいたと思うのですが、Google App Engineがついに料金改定を行い、アプリによってはその継続を危ぶまれるものも出てきているそうです。私は影響が無視できるほど小さいので、ちょっとだけ設計を見直す程度でことなきを得ているのですが、プラットフォーム側の突然の変更にいろんなものが真っ白になることが今後もありそうです。とにかく、IDの変更とかとんでもなくしんどいので勘弁してください。

画面にタブをつけてみる

さて、今回は画面にタブ機能をつける話をしたいと思います。せまいアプリの画面を有効に使おうっていうことで、タブによる描画内容の切り替えというUIが標準的に用意されています。まずは、gadget.xmlにタブ機能を使う旨、宣言を入れておきます。

<Module>
<ModulePrefs ...>
<Require feature="tabs" />
</ModulePrefs>
</Module>

次にタブで画面の描画を切り替える部分の要素も用意しておきます。#tabsが描画エリアで#rankingと#newsが各タブの中身ですね。

<div id="tabs"></div>
<div id="ranking">Here's written the ranking.</div>
<div id="news">Here's written what's new.</div>

あとは、前述の要素部分を使って、gadgets.TabSetを作成して、表示したい情報をaddTabメソッドで追加してあげるだけです。以下、developer centerのコードより。

var tabs = new gadgets.TabSet(__MODULE_ID__, null, document.getElementById("tabs"));
var ranking = {
contentContainer: document.getElementById("ranking"),
callback: function() {
// do something...
}
};
tabs.addTab("Ranking", ranking);
var news = {
contentContainer: document.getElementById("news"),
callback: function() {
// do something...
}
};
tabs.addTab("News", news);

この機能を使ってみて思ったことは、特別多機能でもないし、見た目が優れてるわけでもないし、設置がすごい簡単でもないなぁということでした。jQueryを使って同等の機能以上のものを自分で作った方がいろいろできそうです。

<div class="mixitabset">
<div id="ranking" onclick="">Here's written the ranking.</div>
<div id="news" onclick="">Here's written what's new.</div>
</div>

こんな感じでHTMLを用意しておいたら、勝手にタブにしてくれるようなフレームワークを作っとけばもうちょっと手軽に使えるかな〜とか思いましたが、そもそもFlashでUIを作り込むアプリが多いので、あんまり需要はないのかな・・・。iPadやiPhoneでのmixiアプリはスマートフォン向けとして提供されるので、PC向けアプリだとJavaScriptで実装されたUIの出番が少なくなりがちかもしれません。

Date:2011/6/27

日記一覧

Last-Modified