かな子は可愛いなあ!

 

誰得かと言われれば俺得なこのページがリリースされました。

※真面目な所感も書いています。

 

開発の経緯

「開発」という言葉を使ってみただけでそこまで大袈裟なものでもないのですが、開発の経緯など。

最近ソーシャルゲームの「アイドルマスターシンデレラガールズ」というゲームにハマっておりまして、というところが前提。

そこで、ステータスなどを上げやすくするようなちょっと裏技的な要素「道場(殴られ屋)」というものがあります。
道場の説明は割愛しますが(→詳しくはこちら)、道場を探す際にやらなくてはいけないこととして、スマホのURLを入力しなくてはいけないんですね。

で、実際にやってみると分かると思うのですがスマホのURLを入力するのってとてもめんどくさい。
この道場探しをする際に入力するのはURLの一部(ID)だけなのですがそれでも結構手間。

そこでIDだけをフォームで入力すればURLが出てくるようにすればいいのでは?と考え、開発に至りました。

 

気にしたこと

・XXS対策
→この辺を参考に:@IT:クロスサイトスクリプティング対策の基本

・スマホ向け画像の最適化
→今回これが一番苦戦しました。
meta viewportで対応すればなんとかなるだろうと甘く見ていました。

最初の失敗として以下を設定した際の事例。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes”>


見てもらうと分かると思うのですが、文章は画面内に収まっているものの、画像がはみ出てしまっています。
(iPhone3GSだと画面いっぱいに画像が入り、文章がやや左に偏る)
その後CSSを別途作成してみたり、色々と取り組んでみたのですが、最終的に落ち着いたのが以下の形式。

 

<meta name=”viewport” content=”width=device-width, initial-scale=0.7, maximum-scale=1.2, user-scalable=yes”>

initial-scale(初期値)を0.7に設定することで画像に合わせるようにしました。
あとは拡大をする際にmaximum-scale(最大値)を1だと少し余裕が無さそうだったので1.2で設定しています。
設定後は以下のような感じ。

すっきり収まるようになりました。(iPhone5)

 

気付いたこと

簡単に。

・スマホでURL入力をするのはとても不便
→逆を言うとそこに作業が発生しているものに関してはツールとしての需要があるのでは?
→また、そこにユーザーの作業を発生させてはいけない。

・meta viewportの設定
→画像の処理がうまくいかないことがあるので要確認。あと他の端末の画面が小さい端末だとどうなるのか気になるところ。
※色々なサイトを参考にしてみたのですが、最適化がちょっとめんどくさい状況にあるのかなという印象を持ちました。

というわけでモバマスユーザーの皆様、ぜひとも使ってやってください。
あと、今回画像を提供してくれたがべさんにこの場を借りてお礼申し上げます。

【スマホ版】アイドルマスターシンデレラガールズID×URL早打ち君
https://www.baka-ke.com/lab/mobamasu.php


“スマホ向けサイト「モバマスユーザーURL探しツール」を作成しました” への1件のコメント

コメントをどうぞ