このページの本文へ

CanvasとPhoneGapで作るiPhone用落書きアプリ (2/4)

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

文●古籏一浩

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

PhoneGapプロジェクトの作成

 お絵かきアプリの基本機能は、第64回の記事の最初にあるプログラムをPhoneGapに移植します。これまで同様、XcodeでPhoneGapプロジェクトを作成します。

【図】1.png

ファイルメニューから「新規プロジェクト...」を選択

【図】2.png

PhoneGap-based Applicationを選択し、「選択...」ボタンをクリック

【図】3.png

作成するプロジェクト名を入力し保存

 新規プロジェクトを作成したら、お絵かきアプリのプログラムであるJavaScriptファイルを、jsフォルダごとプロジェクトフォルダ内にあるwwwフォルダに入れます。

【図】4.png

jsフォルダをwwwフォルダに入れる

 次に、「index.html」ファイルの内容を変更します。NimbleKitの場合と読み込むスクリプトとmetaタグが異なるだけで、あとは同じです。

【図】5.png

移植したお絵かきアプリのプロジェクト


<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        body { margin:0; padding: 0; background-color:black; }
        canvas { background-color: white; }
    </style>
    <script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.min.js"></script>
  </head>
  <body>
    <canvas id="myCanvas" width="320" height="320"></canvas>
    <div id="stat"></div>
    <script type="text/javascript" charset="utf-8" src="js/draw.js"></script>
  </body>
</html>

 この段階では、NimbleKitの独自機能は使っていないので、そのままビルドすればPhoneGapのアプリケーションとして動くはずです。実際に動くかどうか試してみましょう。カメラ機能などは使っていないので、iOSシミュレータでも動作します。

 実際に実機で動かしたのが以下の写真です。PhoneGapのアプリケーションとして構築され、動作しています。指で画面上をなぞると赤い線が描けます。動作に問題はないようです。

【図】6.jpg

起動した時の画面。Canvasサイズが320×320なので画面下部分は黒い背景色になっている

【図】7.jpg

画面上を指でなぞると絵が描ける

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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