古籏一浩のJavaScriptラボ ― 第79回

CanvasとPhoneGapで作るiPhone用落書きアプリ

2012年01月12日 11時02分更新

古籏一浩

ツイートする

　HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回は、HTML5で作成したWebアプリケーションを、PhoneGapを使ってiPhoneアプリに変換してみましょう。

　本連載では以前、HTML5で作ったWebアプリケーションを、「NimbleKit」でiPhoneアプリに変換する方法を取り上げました。

Canvasで作ったWebアプリをiPhoneアプリに変換: http://ascii.jp/elem/000/000/618/618059/

　この記事では、PCのブラウザー向けに作成したお絵かきアプリを、iPhoneアプリに移植しました。多少の変更は必要でしたが、比較的すんなりと移植できたケースです。

　このiPhoneアプリでは、NimbleKitのスライダー機能を使ってペンの色を指定しましたが、残念ながらPhoneGapにはNimbleKitのように手軽に使えるスライダー機能がありません（jQuery UIもしくはjQuery Mobileのようなライブラリーを利用すれば類似の機能を実装できます）。

　まったく同じものを作ってもおもしろくないので、今回はあえてスライダー機能は実装せず、その代わりにフォトライブラリ（カメラロール）やカメラから画像を取り込む機能を追加します。PhoneGapの独自機能を使うと、ちょっとした工夫で、写真の上に落書きができるお絵かきアプリが作れます。

前へ 1 2 3 4 次へ