mixiアプリ/日記7

続・アプリの登録者数遷移

登録者数の増加も落ち着いてきた私のアプリですが、先日、新機能を投入してみたところいきなりユーザがまた大きく増加しました。これほど手ごたえがあると機能の追加しがいもあるというもので、開発者としては単純にうれしかったです。その増加数の上昇も瞬間的なものではありましたが、次の機能の開発への励みになりました。
せっかくのソーシャルアプリの発表の場なのに、私のアプリはあんまり「ソーシャル」じゃなかったのです。それで「アクティビティ」を送信するような機能を追加して、マイミクに活動内容を通知してあげるようにしたのですが、そこが登録者数の増加に一役買っていたのかな、と自分では分析しています。マイミク同士でのコミュニケーションを生むような機能があったらよりよいのだろうと思いますが、はてさてどうしたものでしょう。

プロフィール画面にアプリガジェット

さて、自分の中でやりたかったことは一通りできたので、mixiアプリ日記もひとまず終わろうかと思ったのですが、細かい手直しをしていく中で、まだ使っていない機能なども使うようになりましたので、もう少しだけ日記に残していこうと思います。上述の「アクティビティ」や「情報の永続化」なども触ってみたので後で日記にしてみます。今回は、mixiの「ホーム画面」と「プロフィール画面」にアプリをガジェットとして表示する方法について書きます。これまでは「アプリ実行画面」でアプリを操作することばかりしていましたが、その他の画面にもお邪魔してみようという算段です。

ホーム画面というのは、mixiにアクセスしたユーザが、提供されている情報を一瞥できるようになっているいわゆる「トップページ」のことです。一番最初にユーザがアクセスする画面で、このページを起点に友達の日記をみたり、コミュニティのトピックをみたり、いろんなアクションを起こせるようになっています。自分の登録しているアプリの一覧も初期状態で3件、拡張すると10件までこのページに表示されますので、この10件に入れるようなアプリはユーザのリピートも多くなるんじゃないでしょうか。
アプリのガジェット（小さい実行画面）が表示される場所はページの右下隅ですので、正直なところあまり目立ちません。カレンダーや天気予報よりも下ですね。表示順を変更するような機能は、今のところなさそうです。また、表示できるガジェットの件数は、現在最大3件です。アプリの管理画面からこの3件を設定することができます。そしてこの3件は次に述べるプロフィール画面にも反映されます。

プロフィール画面は、自分以外の人に自分の情報をみせるためのページです。ですから、自分で見ることはあまりないページともいえます。このページのガジェット表示位置はホーム画面同様にページの右下に3つまでです。マイミクがどんなガジェットを表示させているかで、その人のセンスを評価するなんてこともできるかもしれません。

開発者としては、「もっとガジェットを目立つ所に置いてほしい」「ホーム画面とプロフィール画面とで表示するガジェットを別に選択させてほしい」といった要望はあります。前者は広告との兼ね合いがあるのでレイアウトがあまり柔軟に設定できないのかなと思います。後者は、ホーム画面用のお役立ちアプリもあれば、プロフィール画面用の自己表現アプリもあると思うのです。

それ以上にアプリ管理画面がわかりにくいのか、あまりガジェットを選択している人がいないのではないかという懸念が大きいです。今のままだと、せっかく用意したホーム画面用のガジェットも気がつかれないまま終わりそうです。

さて、それでは実際にホーム画面とプロフィール画面にガジェットを表示してみます。私は最初、やり方がわからなくて、ガジェットの親フレームのURLを確認して、表示内容を切り替えていたのですが、そんなことはする必要は全くありませんでした。

<Content type="html">
<![CDATA[

]]>
</Content>

最初は上記のようにガジェットXMLのContentタグの中にアプリの内容を書いてあげていました。この状態ですと「アプリ実行画面」「ホーム画面」「プロフィール画面」の全てで同じ内容が表示されることになります。

<Content type="html" view="canvas">
<![CDATA[

]]>
</Content>
<Content type="html" view="home">
<![CDATA[

]]>
</Content>
<Content type="html" view="profile">
<![CDATA[

]]>
</Content>

それを上記のようにContentタグを3つ記述することで、表示内容を分けることができます。各画面には、「view」という名前がついていて、実行画面が「canvas」、ホーム画面が「home」、プロフィール画面が「profile」と定義されています。Contentタグのviewアトリビュートにその名前を指定してやることで、どのContentをどの画面に出すかを指定することができます。なお、各画面のContentは独立していますので、ホーム画面内で定義したJavaScriptの関数を、プロフィール画面内で呼び出すなんてことはできません。共通化したい部分は外部ファイルで定義して適宜呼び出すことになります。

ガジェットのサイズ設定

ホーム画面とプロフィール画面の制限事項として、ガジェットの縦横サイズが最大で212ピクセルという決まりがあります。なので、アプリ実行画面と比べるとできることは限られてきます。また、ガジェットはiframeタグの中で実行されますが、mixiの提供する親フレームのコンテンツに改変を加えるようなガジェットはマナー違反となります。いろいろいたずらもできてしまいそうな気がするので対策はされているのかもしれませんが、無茶な挙動を慎み、アプリの動作はアプリの中で完結させるのがよいと思います。

さて、212ピクセルの制限に話を戻しますが、ガジェットを表示するiframeの高さをガジェットの表示内容に合わせて変更してくれる機能が提供されています。無駄なスペースを占有したり、スペースが足りなくてスクロールバーが出てしまったりなんていう事態が生じた場合は、この機能で高さを調節してあげます。

<Require feature="dynamic-height" />
<Content type="html" view="home"><![CDATA[

<script type="text/javascript">
function init() {
// 画面が表示されたら高さを調整する
gadgets.window.adjustHeight();
}
gadgets.util.registerOnLoadHandler(init);
]]></Content>

まず、フレームの高さを調整するためにRequireタグでdynamic-heightをいう要素を読み込んでおく必要があります。あとは画面が表示されたタイミングでgadgets.window.adjustHeightメソッドを呼べば勝手に高さを計算して設定してくれます。
難しいことはないのですが、gadgets.window.adjustHeightを呼び出すタイミングが速かったり遅かったりすると、スクロールバーが表示されたままになってしまうというトラブルも発生しうると思います。

adjustHeight();
setTimeout(adjustHeight,1500);
function adjustHeight() {
gadgets.window.adjustHeight();
}

どうにもならない場合は上記のような感じでsetTimeoutを使って時間差で高さを調整してみたりするという手も使えるかもしれません。最初の高さ調節から1.5秒後に再度調節しなおしてみるというアプローチです。
ただ、時間なんて通信環境に依存するものですから、あまりきれいではないことは確かです。予め画面設計がされていて、高さが決まっているのであれば、高さを指定して調整することもできます。

// 高さを212ピクセルに指定
gadgets.window.adjustHeight(212);

日記一覧

Last-Modified 2017-09-01 17:48:45