JavaScript で作る iPhone アプリ ~ Simple Painter ~

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

最近「スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応」という本を読みました。

サンプルもいくつかあってなかなか面白かったです。 今回は、この本を参考に作ったアプリのうちのひとつ「Simple Painter」を紹介したいと思います。

Demo and Data

http://tmlife.net/examples/simple-painter-for-mobile/

操作方法

一応、PC用ブラウザ、モバイルブラウザ両方で動くようになっています。

iPhone / Android

  • 描く … 画面上をタッチして動かす
  • 色を変更 … 2本指タップするとランダムで色が変わります
  • 画面クリア … 3本指タップすると画面がクリアされます

PC

  • 描く … 画面上をクリックしてドラッグ
  • 色を変更 … ダブルクリックするとランダムで色が変わります

iPhoneで全画面表示にしてアプリっぽく使う

  1. Safariで「Simple Painter」を開いてボタンをタッチ

    image1

  2. 「ホーム画面に追加」を選択

    image1

  3. ホームにアイコンが生成されます。このアイコンを選択して「Simple Painter」を起動

    image1

  4. フルスクリーンで表示されるので1段多くかけちゃいます!!

    image1

基本的に PC と iPhone/Android との違いは、マウス/タッチ部分のイベント処理でざっくりと説明すると

  • onmousemove ⇒ ontouchmove
  • onmousedown ⇒ ontouchstart
  • onmouseup ⇒ ontouchend

ってなぐらいでした。 意外と簡単で、1時間ほどで作れました。

ソースも載せようと思ったのですがかなり汚いので、今度改めて まとめて公開したいと思います。



スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。