OpenSocialjOpenSocialを試しつつjQuery事始めを目的としてmixiアプリを作成しました。何を作ったかというと、うちで飼っている十姉妹のこいつのアテレコする、というとても個人的なアプリです。出来上がった画面がこちら。言いたいことも言えないこんな世の中で、心に秘めた叫びをこの小鳥に言わせようというアプリです。今回のアプリの概要はこんな感じです。jQueryとjOpenSocialは下記のサイトからダウンロード出来ます。それぞれのリファレンスはこちらになります。-jOpenSocialドキュメントさて、jOpenSocialはjQueryのpluginということで、まずはjQueryから学びます。一通りの機能を本で学んでから、webサイトのリファレンスを参照するという流れで進めました。機能はこの2つで理解できます。次に、jQueryを使ってみて気になった点をあげていきます。applicationを作っていると、callback関数を指定する場面に頻繁に出くわします。した場面で指定するcallback関数のthisを変更したいことがあります。指定するcallback関数が特定のObjectに結びついていて、callback関数内でそのObjectにひもづく変数にアクセスしたいときなど。これに関しては下記の記事を参考にさせて頂きました。jQueryを読み込んだ後に以下のような拡張メソッドを定義して利用しました。これでこんなことが出来るようになります。画像のダウンロード部分と音声出力の部分でFlashを使っているのですが、SWFへFlashVarsを渡す際にJSONでencodeしたObjectを渡しています。encodeするにはjquery-jsonというjQueryのpluginを利用しました。使い方はこんな感じです。swfobjectに渡す際にはURIエンコードして渡してあげないとIEで正常に値が渡せないので注意しましょう。$.browserを使うだけで出来ました。1.3以降ではサポート外のようです。schemeを利用しているのでIEでは元の画像を見にいく判定を付けるために使いました。schemeのサポート判定が$.supportで出来れば、そちらに移行すべきですかね。読めば使えると思います。APIを使ったことがあれば、このラクチンさ加減に衝撃を受けつつ、すぐに使いこなせるようになるかと思います。気になった点をメモしておきます。mixiアプリではUserPrefが使えないので、Ownerのcanvasビューにおいて色々な設定を行うことが多いかと思います。その際に現在のOwnerとViewerが同じであるかの判定が必要となります。その際には$.opensocial.personを使います。idで指定された要素を表示するには以下のようにします。「おひさまフォント」を使わせて頂きました。メッセージを女子高生風のフォントに変換するAPIはPHPとImageMagickを利用して作成しました。validationとかを省略したソースはこんな感じ。指定した文字列を画像を返す、または画像をbase64に変換して返す、という処理を行っています。schemeに対応したブラウザでは、base64に変換した文字列をOpenSocialコンテナの永続化データに保存しておけば、毎回APIに変換してもらう必要がなくなります。schemaに対応していないブラウザ(IEって知ってますか?)では毎回APIに変換してもらう必要があるため、この処理を行います。先に示した通り、今回のアプリでは画像を重ねて表示しているだけなので、それを保存するだけでは別々の画像となってしまいます。そこで、FLASHを使って、base64でエンコードされた画像と小鳥の画像を合成して出力してあげます。そもそも画像を重ねて表示する部分でFLASH使えばいいんですが、今回は色々勉強用に無駄なことをしていることをご理解下さい。base64でエンコードされた画像はFlashVarsを通して、受け取ります。JSONで渡しているのでデコードします。デコードは以下のように行います。JSON.encodeは、adobeのas3corelibを使っています。base64でエンコードされた画像の読み込みはLoaderを使います。classも合わせて。||<画像の合成では、BitmapDataのdrawとJPEGEncoderを使います。JPEGEncoderもadobeのas3corelibです。これは、矢野さとるさんのAPIを利用しています。FLASHの実装は、以下の記事を参考にさせて頂きました。schemeが利用出来ないので、フルFLASHで作った方が良かったのではないかという結論。勉強になったのでよしとします。当mixiアプリを使ってみようという奇特な方は下記からどうぞ。#114に来たので、目標のブログ記事を書いてた。10注目記事-->引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。