スパイスラボ神部です。

マインディアの西小倉さんと既存の Google アプリを mixi アプリ化させるプロジェクトをささやかに進めているのですが、あっという間に進捗が来たので次のステップに進めてみてはどうかと思います。

-【人生時計mixiアプリ】ソースの外部ファイル化 - 西小倉事典 - mindia(マインディア)

前回のおさらい

まずは前回のおさらい

-JavaScript の外部ファイル化

これはガジェット XML だけでやってるとだんだんソースがごちゃ混ぜになることと、エディタなどを使っている場合はカラーフォーマットを適用できたりコード補完を利用出来るようになります。Gadget XML でコード補完が聞くのはあって OSDE くらい？（未確認）

-ビューを profile, home, canvas に分ける

これは基本ですが、Gadget XML にはそういう違いないですもんね。

参考：ウノウラボ Unoh Labs: OpenSocialを始めよう！第1回

でも、OpenSocial API がガジェット XML で出来ていると気づければ、仕組みの部分はかなり理解に要する時間をスキップ出来ると思います。

質問への回答

-キャッシュの消去について

mixi では JS や CSS をキャッシュするのを（一時的にはどうかわかりませんが）やめているので、本来は nocahe=1 で home や profile もクリアされるはずなのですが、ブラウザのほうのキャッシュが聞いているのかもしれません。

-相対パスについて

はい、その通りで８／１３から mixi Platform が変更になりました。

参考：mixi Developer Center (ミクシィ デベロッパーセンター) » mixiアプリに関する仕様変更のお知らせ

step2

１．opensocial-jquery を入れてみたら？

ここはスルーされちゃったのですが、jQuery ライクな OpenSocial API アクセスが出来るライブラリである opensocial-jquery は入れておくといいと思います。これはビューごとに読み込まないといけないのですが、GadetXML の中に view="home, profile, canvas" という複数のビューの名前をしていしたコンテンツペインを作ると、そこのところはどのビューでも共通で読み込まれます。こういうのをつくったその中で読んでおくと、どのビューでも opensocial-jquery が呼べるようになるはずです。

２．縦横の幅を調整してみては

Canvas は現状のままでいいですが、home,profile では若干横にはみ出ているようです。mixi アプリでは 210x210に限られていますから、home, profile では横幅 180px になるよう表示内容を調整してみてはどうでしょうか。

人生時計のコンテンツは main.js で描画しているようですから、main_home.js、main_prof.js みたいな JS ファイルを作成し、それぞれのビューで呼ぶのがいいと思います。

なお、縦幅の調整は gadgets.window.adjustHeight(); で行います。

gadgets.window.adjustHeight(210);

（※ただし、ModulePrefs で dynamic-height を読み込んでおく必要あり）。

とかやると高さ調整ができ、どのビューでも共通ですが、mixi アプリでは高さが 210px に制限されていますのでそれ以上を指定しても無効になります。

こちらが参考になります。

-gadgets.window.adjustHeight();

()の中に指定がなかった場合は自動調整なのですが、あんまりうまくいかずスクロールバーが出てしまうことがあります。

３．コンテンツをタブ化してみるとか

特に Canvas ビューをタブ化し、情報入力のタブと時計表示のタブをつくってみてはどうでしょうか。

手前味噌ですがこちらが参考になると思います。opensocial-jquery を利用するのが前提になっているのでここでセットアップしておくのがよいかと。

-opensocial @ ウィキ - タブの設置

とりあえずこんなところでしょうか。