mixi アプリ 大全集

mixi アプリでflash を表示

mixi アプリ 「ぐるなび検索」を作った時にいろいろとハマったので共有しておきます。

• flash (swfファイル) が表示されない！？

ローカルでのテストでは正常に動作していたのですが、いざmixiアプリに登録してテストしたところ flash が一切表示されず・・・。

この問題はflashの呼び出し方、mixi側に何も問題もありませんでした。

自分のホームページを持っていなかったのでアプリのxmlや、swfファイルを置く場所がなく急遽FC2で無料のホームページサービス用のアカウントを作ったのですが、結果としてFC2のサーバに置いたのがダメだったみたいです。

FC2のホームページに置いた swf ファイルをブラウザで直接アクセスすると その swf ファイルは取得できるのですが、OpenSocialコンテナ経由や、HTTP REUQESTのヘッダの内容(Acceptパラメータ?)を変えてリクエストを送信してみると、下記のレスポンスが返ってきて swf ファイルを取得できていませんでした。

———————————————————-
HTTP/1.x 302 Found
Date: Mon, 13 Apr 2009 17:23:25 GMT
Server: Apache/2.0.63 (Unix) PHP/4.4.9 mod_perl/2.0.2 Perl/v5.8.8
Location: http://error.fc2.com/web/403.html
Content-Length: 217
Connection: close
Content-Type: text/html; charset=iso-8859-1
———————————————————-

深くは追っていないので原因不明なのですが、とは言っても xml, swf を置く場所が無いので、このサイトの tatsuya さんに頼んでファイルを置かせてもらいました！ ありがとうございました。　この変更により mixi でも正常に flash が表示されるようになりました。

• Javascript から Flash へのアクセス

これまたローカルのテストでは正常に動作していたのですが、いざ mixi でアプリを実行してみるとうんともすんとも言わず・・・。

ネットで調べて Security.allowDomain(”*”); を ActionScript 内に追加することで回避できました。

• Javascriptを用いた外部サービス呼び出しの挙動がおかしい

これもまたまたローカルのテストでは正常に動作していたものです。

外部サーバのリソースにアクセスするために jquery の $.ajax(…) メソッドを使っているのですが、全てのリクエストにおいてエラーが発生。 リクエストは OpenSocial コンテナ経由で外部サーバにアクセスするので、OpenSocialコンテナと外部サーバで何が行われているのか一切分からずデバッグもままならず・・・。

Firebug などを使ってレスポンスを調査してみると、レスポンス自体はエラーで返ってきているのですがエラーハンドラの引数に渡される  第一引数の xmlHttpRequest 変数の responseText プロパティに正常な結果が入っていることが判明！　なぜ！？ 強引ですが、それを使うことにしました。

詳細は不明ですがとりあえず動作しているので今のところこのままいきます。

今回作ってみて思ったのですがローカルと実際のサーバ上での動作(当然ですが、主にクロスドメインのセキュリティー周り)があまりにも違うのでローカルで全て開発/テストを行ってからmixiに登録するよりも、ローカルでもmixi上でも並行で開発するのが一番効率が良さそうです。　かなりの手戻りが発生してしまいますので

ガジェットなどを作ったことのある方達は当然知っている内容だと思いますが、今回初めての自分は相当苦労しました・・・。　こんなことにはめげずに、どんどんサービスを公開していきます！

mixiアプリ 「ぐるなび検索」

mixi アプリ  「ぐるなび検索」 を作ったので紹介しますー！

http://platform001.mixi.jp/view_appli.pl?id=1229

mixi アプリ 「ぐるなび検索」

まだまだ機能は少ないのですがこれから作り込んでいきます:)

個人でもmixiアプリ開発可能な「mixiアプリ」オープンβ版が公開されました!

個人の皆さまでもソーシャルアプリケーションの開発が可能に。
「mixiアプリ」オープンβ版公開！
http://mixi.co.jp/press_09/0408_1.html

これでやっと自分も開発が可能となったので、いろいろと試していきたいと思います！

1つのviewで複数のページを表示する

jQuery や YUI ( yahoo user interface library ) などのタブ機能を使えば１つのviewで複数のページを簡単に作れるのですが、今回はちょっと違った方法で表現してみます。

OpenSocial の view モジュールを用いると gadgets.views.requestNavigateTo(view, opt_params, opt_ownerId) メソッドでviewの移動を行えるのですが、そのメソッドの第２引数に独自のパラメータをMap型で渡すことができます。
viewの移動後には、gadgets.views.getParams( ) メソッドで先のパラメータの取得が可能となります。

これらを組み合わせることにより1つのviewで複数のページを表現可能となります。
例えば、home view に canvas view へ移動する下記のコードが存在するとします。

var opt_params = {target:'LIST'};
gadgets.views.requestNavigateTo(new gadgets.views.View('canvas'), opt_params);

移動後の canvas view では、下記のコードで先の target を取得し、その値を判定することにより表示するページ(LIST, ITEM 等)を決定します。

var opt_params = gadgets.views.getParams( );
var target = opt_params ? ( opt_params.target ? opt_params.target : null ) : null;
if ( target == 'LIST' ){
   // LIST 用ページの表示
} else if ( target == 'ITEM' ){
  // ITEM 用ページの表示
} else {
  // エラー表示
}

上の例では、home view から canvas view への遷移でしたが、canvas view から canvas view 自身への遷移も可能です。
よって canvas view に複数のボタンを表示し、ボタンがクリックされた際の遷移先は canvas view にし、opt_paramsのtarget キーには別の値を指定することにより1つのviewで複数のページを表現することが可能となります。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs
            title="TestBed"
            author_email="testbed@example.com">
        <Require feature="opensocial-0.8" />
        <Require feature="views" />
    </ModulePrefs>
    <Content type="html" view="canvas"><![CDATA[
<script type="text/javascript">
var onClick = function(page){
   var opt_params = {target:page};
   gadgets.views.requestNavigateTo(new gadgets.views.View('canvas'), opt_params);
}
var init = function(){
   var opt_params = gadgets.views.getParams();
   var target = opt_params ? ( opt_params.target ? opt_params.target : null ) : null;
   if ( target == 'ITEM' ){
      // ITEM 用ページの表示
      document.getElementById("content").innerHTML = 'ITEM PAGE';
   } else if ( target == 'SETTING' ){
     // SETTING 用ページの表示
     document.getElementById("content").innerHTML = 'SETTING PAGE';
   } else {
     // デフォルトで LIST 用ページの表示
     document.getElementById("content").innerHTML = 'LIST PAGE';
   }
}

gadgets.util.registerOnLoadHandler(init);
</script>

<button onclick="onClick('LIST');">List</button>
<button onclick="onClick('ITEM');">Item</button>
<button onclick="onClick('SETTING');">Setting</button>
<br /><br />
<div id="content"></div>
  ]]></Content>
</Module>

下の図は、OSDE を用いて上記コードを試した結果です。

canvasの初期表示 (opt_params に target が指定されていないとき) 画面です。

item ボタンをクリックした時の画面です。

デザインを工夫すればjQueryやYUIのタブ機能を使用しなくても同じようなことが可能になるのでシンプルな実装を保ちたい時には結構良いのではないでしょうか

OSDE のインストール: ウィンドウズで Eclipse 3.4.2 と Java 1.6 を用いた方法

OpenSocial アプリ すなわち mixi アプリを開発するにあたって便利なツールを紹介します。

その名も OSDE ( OpenSocial Development Environment ) !!

自分が作った OpenSocial アプリを試すには、既に OpenSocial サービスを提供している Orkut などのサイトに登録すれば可能ですが、デバッグなどを考えると作業効率は悪く現実的ではありません。

そこで本日紹介するのは OpenSocial アプリを自分のマシン上で開発できる OSDE です。

OSDEのオフィシャルサイトは、http://code.google.com/p/opensocial-development-environment/ です。

この OSDE は、Eclipse の プラグインとして提供されており、SNS上でのユーザ、ユーザ間の関係や、テストで必要になるであろうデータを簡単に作成/設定できます。
また OpenSocial の view ( preview, home, profile, canvas ) を一発で開くことができるのでかなり楽に作業が進められます。

それでは早速インストール方法を紹介しますが、 Robson Dantas Lab の記事を翻訳する形で進めていきます。

私の環境は、下記の通りです。

• Windows Xp Pro - SP 3
• Java SDK version 1.6.0_12
• Eclipse 3.4.2

Java SDK と Eclipse は、それぞれインストールを済ましておいてください。

• Eclipse を起動して、メニューから Help -> Software Updates を選択します。

• “Available Software” タブを選択し、右側に表示されている “Add site” ボタンをクリックします。

• ダイアログボックスのテキスト入力エリアに http://opensocial-development-environment.googlecode.com/svn/update-site/site.xml を入力し、OKボタンをクリックします。
• 追加されたOSDKのURLのチェックボックスにチェックをし、右側の install ボタンをクリックします。　インストールが完了すると、Eclipse が再起動を要求してくるのでその指示に従ってください。

Tips

• OSDE のバージョンが 0.2.5 以降のものがインストールされていることを確認してください。
• OSDEプロジェクトの作成時に、そのプロジェクトの workspace となるフォルダへのパスにはスペースが含まれないようにしてください。 ウィンドウズでは、workspace のパスが c:\documents and settings\user\local settings\temp となってしまい (スペースが含まれている )、OSDEが正常に動作しません。 よって、私はworkspaceのフォルダを c:\temp に変更しました。
• Eclipse のメニューから Window -> Preferences を選択します。　ダイアログボックスが開くので、左側のツリーから OSDE を選択してください。　そして “Jetty context directory” と “Shindig Database directory” もまたパスにスペースが含まれないフォルダーを指定してください。 例えば、c:\temp など。

• 次に gadgets.xml を右クリックし、コンテキストメニューから “Run As-> Run configurations” を選択します。 “Apache Shindig” をクリックし、 “Arguments” タブ内の Program arguments テキストエリア内の既にある値の後ろに temp フォルダへのパスを追加します。
• 左側のツリーの “Apache Shindig” の直下にある “Shindig Database” に対しても同じ用に変更を加えます。

• Eclipse のツールバー上にある緑色のボタンをクリックして、Apache Shindig サーバをスタートします。

• Eclipse のメニューから OSDE -> Create sample data in shindig を選択してサンプルのデータが追加可能となります。

全てうまくいけば、console view にエラーなどは表示されません。

これらの情報がみなさんのお役に立つことを願います・・・って、ここまで訳す必要ないか

ここまでが Robson さんが書かれた情報となります。

作成したOpenSocial アプリ自体を起動するところまでは説明がされてないので、OpenSocial アプリ起動方法を補足しておきます。

• Navigator view 内の先ほど作成したプロジェクトの gagadgets.xml をマウスでクリックしてください。すると、Eclipse のツールバー上にあるOSDE 用の5種類のボタンの内左から３つ目のものが activate されるので、そのボタンをクリックすることによりアプリケーションの起動が行えます。

以上となります。

僕自身、OpenSocial アプリを開発するときには必ずOSDEを使っていますが正直かなり良いです！　皆さんもぜひ試してみてください。

mixiアプリ大全集 立ち上げました！

・・・が、mixi アプリはまだスタートしていないので、しばらくは mixi アプリ 開発に関するコンテンツを充実させていく予定です。

まずはじめに、mixi アプリとは、mixi内で動作させることが可能な独自のアプリケーションです。これで何ができるかというと、例えばマイミク同志だけのスケジュール帳や、マイミク同志でなくとも他のユーザとのゲームなど新たなコミュニケーションの創造が可能になります。

また、他のユーザとのコミュニケーションはなくても、mixi外の既存のサービスからデータを引っ張ってきてそれを自分のプロフィール画面に表示し、プロフィール画面を飾ったりなども可能となります。

それら以外にも予想もしないようなすごいmixiアプリがきっと出てくることでしょう！　みなさんと一緒にそれらすごいmixiアプリを体験していければと想います。

堅苦しいサイトにはしたくないのでお気軽に投稿でもコメントでもしちゃってくださいね。

それでは、よろしくおねがいします！

あ、一発目の投稿がエイプリルフールとは・・・。