アイデアがどんどん湧いてくる!? Processingで作るスマートフォン向けWebアプリ

今年もProcessing Advent Calender 2012に参加しました。本日12/6のテーマは適当に「スマートフォン」とだけしていたのですが……ちょうどいいネタがない!

 〜ここから回想〜

思い起こせば、小学生の頃のこと。「しんはつめいじどうぽちぽちき」という絵本を読みました。記憶の中での絵本の内容は、「すごい機械を発明したので、その機械にさせたいことを募集したところ、大量の手紙が届き、じどうぽちぽち機は大量の手紙を自動処理する機械になった」というもの。

それが現在郵便局で使われている機械だと思うと非常に感慨深いですね。

――ではなくて、ネタに困った結果、前々から作りたかったネタを作るためのWebアプリを作ってみました。

iPhone / Androidなどのスマートフォン向けです。が、iPhone5、iPhone3GSでしかテストしてません。Androidはエミュレーターで少しだけ。

 http://goo.gl/bZg1G

上記URLにスマートフォンからアクセスするとWebアプリを確認できます。

Shuffleボタンで3つのキーワードすべてをシャッフル。

各キーワードは上下にドラッグして入れ替えたり、左右に動かして個別に新しいキーワードと入れ替えたりもできます。

アイデアの生み出し方について考えた古典「アイデアのつくり方」で、ジェームス・W・ヤングは次のように語っています。

アイデアとは既存の要素の新しい組み合わせ以外の何ものでもない。

――ジェームス・W・ヤング著、今井茂雄訳 『アイデアのつくり方』阪急コミュニケーションズ、1988年、28頁

そう、新しい組み合わせこそが、新しい発見であり、アイデアなんです。

さあ、これで湯水のごとくアイデアが湧き出てきますね!
新しいアプリ、新しい料理、新しい政党、クリスマスプレゼントでもなんでもござれ!!

……と言い切るにはナンセンスなものですが、作りながらひとりで笑えたのでこれはこれでよし。

ソースコードはこちら IdeaMan.pde。200行ちょっとです。index.htmlもリンク先を保存するか、アクセスしてソースコードを表示すれば確認できます。

※UTF8なので文字化けする方はダウンロードして対応エディタでご確認ください。

構成を単純にするためキーワードのテキストデータもソースに入れてます。
データはまだ100個+αぐらいしか入れてないので増やすと面白いですよ。

さて、ではこのアプリのようなスマートフォン向けのWebアプリ作り方をピンポイントで説明しましょう。

1.Processing 2.0をダウンロード

いまはProcessing 2.0 beta 6をダウンロードできますね。

2.JavaScriptモードでプログラムを作成

Processingを起動したあと右上にあるモードのボタンでJavaをJavaScriptに変更します。

iPhoneとAndroidでどうも画面拡大率が同じように書けなかったので、以下のように分岐して画面サイズを決めました。

 void setup() 
 {
     size(640, 1136); // PCでのテスト用。iPhone 5相当
 
     if( navigator.userAgent.indexOf("iPhone")>0 || 
         navigator.userAgent.indexOf("iPod")>0 ||
         navigator.userAgent.indexOf("iPad")>0 )
     {
         size(screen.width * 2, screen.height * 2);
     }
     else if( navigator.userAgent.indexOf("Android")>0 ) 
     {
         size(screen.width, screen.height);
     }
     ...

PC用のものが余計ですが、PC用のsizeを最初に書いておかないとprocessing(PDE)上でのテストがうまくいかないため、こんなありさまに。

でも、あとは普通にProcessingでプログラミングするだけ!

3.実行するとできるweb-exportフォルダのindex.htmlにスマートフォン向けのmetaタグを追加

幅とか拡大率とか、拡大縮小禁止とかを指定しました。
Android用にtarget-densitydpi=device-dpiと指定しています。

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" />

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

iPhoneのHome画面にブックマークを登録するときのWebアプリ用のアイコンを指定する場合は以下のような感じで。

<link rel="apple-touch-icon" href="icon.png" />""

あと余計なcssなども取り除いています。

それから、web-exportフォルダのままだと上書きされるので、書き換えたindex.htmlは別のところに退避しておくとよいでしょう。

4.ブラウザのURLバーを見えなくする&スクロールを禁止に

そうするためには強引にウインドウをスクロールさせるらしいので以下のようにしてみました。

<body onLoad="window.scrollTo(0, 1); setTimeout(scrollTo, 500, 0, 1);" ontouchmove="event.preventDefault()"">

でもダブルタップするとスクロールしちゃいますが。どうにかならないのかな?

5.Webサイトにアップロード

自分のWebサイトがないときには、Dropboxのpublicフォルダに置いて、index.htmlのURLリンクを公開(長いときは短縮URLにして)という技もあります。

以上で完了です。

調整したいところはまだ色々あるのですが、ひとまずお試しください。

# もしmetaタグやスクロール、canvas側のサイズなど、iPhone/Android両対応でうまいやり方をご存知の方がいましたら、ぜひ twitter @n_ryotaBBSなどにコメントください。

12/25 追記
このWebアプリをもとにProcessingでAndroidアプリを作成しました



Trackback(0)