mixiアプリ スマートフォン版でできるコトできないコト

HTML5 デザイン

iPhone用のWeb制作は、すばらしき諸先輩方のブログなどがあるので、こちらではmixiアプリ スマートフォン版について言及していきます。（もちろんちょいちょい他TIPSも出しますが）

今回はmixiアプリ スマートフォン版において、技術的に「こういうコトができる／できない（やらない）」ことを見ていきます。

できるコト

基本的には後述の「できないコト」以外は、ほとんど制限を受けません。が、「なんだこれ？」とハマって解決できたコトはありました。

ページ遷移時にページトップへ移動する

これは結構ハマる方多そう。mixiアプリ スマートフォン版が、という限定ではありません。iframeで読み込んでいるコンテンツ全てに起こります。
iframe内でページ遷移をすると、スクロール位置は保持したまま次のページを表示してしまいます。この仕様、わけわからん。。

解決方法は簡単、リンク先の末尾に「#」を付けてください。

index.html#
それによりウインドウがアプリの上端に移動した状態で遷移します。
また、副作用ですが「アプリの上端」なのでmixiのヘッダーも表示されません。ブラウザの表示領域を全てアプリで埋めることができます。これはうれしい誤算。
本来ならばmixiの広告が表示されないこの方法はmixiからお叱りを受けそうですが、現状表題のスクロール位置の問題を解決する術が無いためか、注意はうけていません。
（※今後もこの方法を使い続けられることを保証するものではありません）

formでpostする場合もactionのurlの末尾に「#」を付けてあげれば大丈夫なはず。

やらないコト

アプリアイコンの設定【iPhone】

iPhoneではWebページでもブックマークをホームに保存したときのため、アプリアイコンを設定ができます。

↑こんな感じ。


しかしコレ、mixiアプリ スマートフォン版では意味がありません。


mixiアプリ スマートフォン版はiframe内でアプリ用のhtmlを呼び出す仕様のため、あくまでアプリのurlはmixiの親フレームのモノになります。

mixi Touchでは

http://img.mixi.jp/img/smartphone/touch/favicon/x001_prec.png
がアプリアイコンとして指定されているため、アプリをプレイ中に「ホーム画面に追加」を教えてもmixiのアイコンが適用されてしまいます。

それならばわざわざアイコンを作る必要も無さそうですね。mixiが気をきかせて、アプリ側でアプリアイコンが設定されているとそちらを優先するとかしてくれるといいんですが。。


※若干蛇足になりますが、ホーム画面アイコンとして登録できるのは半角14文字までとなります。mixiアプリスマートフォン版の場合は「[mixi] xxxx」（xxxxはアプリ名）となり、既に7文字がmixiのタイトルで占められています。となるとアプリ名に許された文字数は半角7文字。

更にホームに登録した段階で、11文字以上のアプリ名は勝手に短縮されるため、実質的には半角4文字分しかアプリ名に許された文字数はありません。

これに合わせてアプリ名を付けるのは潔く諦めたほうが良さそうです。


また、ホームアイコンと同様の理由で、フルスクリーンモード／起動画面／ステータスバーの色変更などの記述もしても意味はありません。
もしかしたら将来的にmixiでアプリ側の情報を取得してmetaタグをアプリごとに書き換える、などの対応があるかもしれませんが、現状では意味なしということで。

横にしたとき（ランドスケープモード）のレイアウト対応

こちらは先日のエントリーでも触れましたが、mixiのヘッダーの領域と、デフォルトのステータスバーなどのおかげで、ファーストビューが以上に狭くなっています。
そのため「ランドスケープモードの時は2カラムに」などのステキ仕様も正直活かされない様に思います。その手間はまだRetina Displayなどの高解像度などの対応に回したほうがよさそうです。

絵文字の表示

iPhoneの絵文字は、実はメールだけでなくWebでも表示することが可能です。（formへの入力はできません）
しかしあくまでそれは「iPhone用の絵文字」を表示するだけなため、Androidでは表示できません。
弊社では既にモバイル用絵文字をPCで表示する変換エンジンを持っているため、スマートフォン版では画像に変換して表示しています。
Android対応アプリとするならば、絵文字は使わない方が無難です。

できないコト

親フレーム（mixi）側のJavaScriptでの情報取得

別にmixiアプリ スマートフォン版に限った話では無いのですが、「iframeの中に別ドメインのページを読み込む」場合このような制限が生まれます。

parent.document.xxx
などの記述で同ドメインであれば、jsで取得できるほとんどの情報を取得できるのですが、別ドメインの場合はセキュリティの関係所全て不可です。
こういう制限があるからこそ、もちろんmixiもこの方法を採用しているのかと思いますが、これにより困ったことを上げてみます。


  • スクロールした座標を取得できない

これで何が困るかというと、現在のコンテンツの座標を取得できないため、スクロールに追従するオブジェクトを配置できません。
例えばmixi Touchで表示される右図の「ホーム画面に追加しよう！」のようなものです。
cssの [ position:fixed ] が使えれば困らないという考えもありますが、mixiアプリ スマートフォン版ではiframeの高さをそのコンテンツの高さに自動調整します。つまりiframeの中の要素は読み込まれた時点で上からしたまで全て読み込まれた扱いとなり、そのコンテンツではスクロールが一切発生しないということになります。
また、そもそもiPhone版Safariでは仕様上それも使えないため意味がないんですが。。


他にも裏側でのシステム的な制限はちょいちょいあるのですが、とりあえず表面的なものはこんなものかと。
また何か発生したら追記していきます。