Safariで始めるiOSプログラミング(２)：ホーム画面から起動しよう

Leoを使って、自分だけのiOSアプリを作ります。


練習問題

簡単なデジタル時計を作ってみました。下記スクリプトをLeoに書き込み、Runで実行してください。コピペでLeoのテキスト領域に貼り付ければOKです。

<meta name=apple-mobile-web-app-capable content=yes>

<style>

  #Timer{

    color:lime;

    background:black;

    font-family:Verdana-Bold;

    font-size:50px;

    padding:50px;

    text-align:center;

    border-radius:10px;

}

</style>

<div id=Timer></div>

<script>

setInterval(Disp,1000);
function Disp(){

  d=new Date();

  hh=Zero(d.getHours());

  mm=Zero(d.getMinutes());

  ss=Zero(d.getSeconds());

  Timer.innerText = hh + ":" + mm + ":" + ss;

}
function Zero(s){

  return ("00"+s).slice(-2);

}

</script>


Runで実行

時計が出ましたか。左エッジ・スワイプでソースに戻ることが出来ます。style内の変数を書き換えれば、色やフォントの変更も可能。いろいろ試して、プログラミングの面白さを感じてみてください。Runするたび別の時計が現れる。とても楽しいですよ。
スクリプトの内容としては、divで作った表示領域にTimerというIDを付け、そこに時刻を書き込んでいます。setInterval()を使い、一秒おきに表示を更新。これで時計が動いているように見える。この仕組みを使えば、時刻以外のことでも表示できるわけです。


アイコン化

dataスキームはSafariの「ホーム画面に追加」でアイコン化され、ホーム画面から起動できます。一行目のmetaタグが魔法の呪文で、これを付けるとSafariのアドレスバーが省略されます。見た目も単体アプリになる。画面も広く使えるし、なかなかお得。

<meta name=apple-mobile-web-app-capable content=yes>


まとめ

結局プログラミングはstyle次第かな。あまり詳しくないので、シンプルなデザインになりました。CSS3で調べると深いテクニックがあり、エフェクトを付けたり出来るみたいです。プログラマーの人ってこういう知識を追いかけてるのか。すごいなあ。
とはいえ、このシリーズで目指すのは「個人が自分用にアプリを作る」。なので、分かりやすさを優先していきます。今回は「アイコン化」がポイント。ホーム画面にアイコンを置き、タップすれば自分が作ったアプリが走る。どんどん作っていける。アイコンを画像にしたい場合は、下記linkタグをソースの先頭に付けるだけ。凝れば凝るほどコルホーズ。

<link rel=apple-touch-icon-precomposed href=アイコン画像のURLアドレス>