読者です 読者をやめる 読者になる 読者になる

my bright tomorrow.

明日に向かってゴーゴゴー。

光ポータブル状況確認Webアプリを作ってみた(ちと更新)。


ポータブルWi-Fi/光ポータブルのバッテリ残量と電波強度などを簡単に確認する為のiPhone用Webアプリを作ってみました。
いや「作ってみた」と言うよりは「整えてみた」と言う方が正しい気もしますが、そこはそれ。


まぁ、元々ポータブルWi-Fi/光ポータブルは、設定用アドレス(デフォルトで192.168.11.1)にアクセスすれば・・・

こんな感じでその辺の情報が一画面にまとまってるのですが、いちいちSafariのブックマークから開いて・・・とかするんじゃなくてホーム画面から直接アクセスしたいな、と。



何はともあれ、下記の画面をご覧あれ。

このそれっぽいアイコンをタップすると・・・



スプラッシュスクリーンが表示され・・・


はい、前述の状況画面がいい感じにズームされた上に、上下のバーが無くなって全画面表示されます。


Safariのタブで開いてるわけじゃないので、別のアプリに切り替えてもアプリ切り替え一覧に、ほらこの通り。いつでも1タップで確認できます。


一見、アプリ風の挙動なわけですが、作り方は基本的にホームにWebクリップを置くのと変わりません。
ただ、若干見映えをよくする為に別のHTMLファイル経由で参照する必要があり、インターネットに繋がらない環境でも使えるよう、microSDにファイルを放り込む必要があります。
しつこいぐらい詳しい説明は以下の通り。

その辺に明るい人向けに先に簡単に書くと、後述の3つのファイルを光ポータブルのmicroSDに入れて、HTMLの方を開いてホームに置けばおk。

  1. まず、PC/Macで下記3つのファイルをダウンロードして下さい。一般的に言う「右クリックしてリンクの先をダウンロード」です。
    stat_pwr.html(HTMLファイル)
    apple-touch-icon-precomposed.png(アイコン用ファイル)
    wbc_start.png(起動時画像ファイル)
     
  2. 次に、ポータブルWi-Fi/光ポータブルに挿すmicroSDをご用意下さい。
    そして、そのmicroSDの第一階層、所謂ルートに先程ダウンロードした3つのファイルをドラッグ&ドロップして下さい。
     
  3. そのmicroSDをポータブルWi-Fi/光ポータブルに挿し、ポータブルWi-Fi/光ポータブルの電源を入れます。
     
  4. さて、ここからはiPhone側の操作です。
    Safariで192.168.11.1にアクセスし、ポータブルWi-Fi/光ポータブルの状況画面を開きます。
     
  5. 次に、一番下にある「ストレージ」ボタンを押してmicroSD内のファイル一覧画面を開いて下さい。
    先程の3つのファイルの名前が見えてますか?microSDのフォーマットによってはうまく表示がされない場合もあるので、その場合はデジカメなんかでmicroSDを初期化してみるといいかもしれません(自己責任で)。
     
  6. さて、うまくファイルが見えてたらstat_pwr.htmlの方をタップして下さい。
    さっきの状況画面が表示されますが、さっきよりちょっとズーム気味に表示されましたね?ここで画面下のSafariの+ボタンを押して「ホーム画面に追加」を選択して下さい。それっぽいアイコンが自動で適用されると思います。

     
  7. 次からはホームに出来た「ステータス」アプリをタップ!
    全画面表示されるアプリとしてSafariとは別タスクで起動します。

なお、この「ステータス」アプリは状況画面を簡単に確認する為のものなので、ズーム率を決めうち/変更不可にしてあります。
ログインしてポータブルWi-Fi/光ポータブルを細かく設定したい場合は今まで通りSafariでのアクセスでお願いします。

状況画面のURLをデフォルトから変更している人は、上記説明およびstat_pwr.html内の「192.168.11.1」を全て変更して下さい。

以上でございます。

しかし、プログラマじゃなくても何かアプリっぽいものが作れるのはおもしろいですねぇ。
今回はやっつけの習作でしたが、またアイデアがあったら何か試してみたいと思う今日この頃。


(9/11更新:スプラッシュスクリーン追加、アイコン変更しました)