このページの本文へ

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

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

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

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 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の独自機能を使うと、ちょっとした工夫で、写真の上に落書きができるお絵かきアプリが作れます。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング