Webエンジニアに光明！MonacaでiPhoneアプリ開発
「Objective-Cわからない」「Javaわからない」
でも
「スマフォアプリが作りたい！！」
っていう悩めるWebエンジニア
救いの手を差し伸べてくれる存在。
それが、Monacaです！
Monacaを使えば、iPhoneアプリはもとより、Androidアプリも作れちゃう！
目次
1. Monacaって何？
2. お絵描きアプリを作ってみよう
3. ソースコード
4. ソースコードの解説
5. カンボジアでMonacaのアプリを作ってみて
1. Monacaって何?
突然ですが、皆さんMonacaをご存知ですか？
え？知らない？わからない？なにそれ美味しいの？
Monacaは今、話題のHTML5を用いたハイブリットアプリケーションを作れる
オンライン上の統合開発環境です。
設定不要で無料ですぐにコーディングできちゃいます。
ハイブリッドアプリケーションの開発に興味のある方は、
使ってみるといいかもしれません！！
知らなかった方は下の画像をクリック！
2. お絵描きアプリを作ってみよう
Monacaを使って簡単なお絵描きアプリを作ってみましょう！
お絵描きアプリのイメージ
お絵描きノートみたいなアプリですね。
白い枠内をなぞることで線を描くことが出来ます。
下の赤、青、緑のボタンをタッチするとキャンバスに描く色を変えることができます。
3. ソースコード
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <!-- Viewportの設定 --> <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> function setMyCanvas(drawColor) { // Canvasの初期化 var myCanvas = $("#my-canvas").get(0); var myContext = myCanvas.getContext("2d"); myContext.strokeStyle = drawColor; myContext.lineWidth = 5; // 開始位置 var startX = 0; var startY = 0; // Canvasの位置を左上に調整 var offsetLeft = $("#my-canvas").offset().left; var offsetTop = $("#my-canvas").offset().top; // Canvasにタッチした時 $("#my-canvas").on("touchstart",function(event) { // タッチスタート時のスクロールを防ぐ event.preventDefault(); // 開始位置としてタッチした場所を設定 var pageX = event.originalEvent.touches[0].pageX; var pageY = event.originalEvent.touches[0].pageY; startX = pageX - offsetLeft; startY = pageY - offsetTop; }); // タッチが動いた時 $("#my-canvas").on("touchmove",function(event) { // 終了位置の設定 var pageX = event.originalEvent.touches[0].pageX; var pageY = event.originalEvent.touches[0].pageY; var endX = pageX - offsetLeft; var endY = pageY - offsetTop; // 開始位置から終了位置へパスを描く myContext.beginPath(); myContext.moveTo(startX, startY); myContext.lineTo(endX, endY); myContext.stroke(); // タッチスクロール時に開始位置から // 最新の終了位置に線を描く startX = endX; startY = endY; }); } // Canvasの色を各カラーボタンで変更 $(document).ready(function() { setMyCanvas("red"); $('#red').click(function() { console.log("RED"); setMyCanvas("red"); }); $('#blue').click(function() { console.log('BLUE'); setMyCanvas("blue"); }); $('#green').click(function() { console.log("GREEN"); setMyCanvas("green"); }); }); </script> </head> <body> <center> <h1>My Canvas</h1> <canvas id="my-canvas" width="300" height="300"> Your browser does not support the HTML5 canvas tag. </canvas> <button class="mybutton" id="red"></button> <button class="mybutton" id="blue"></button> <button class="mybutton" id="green"></button> </center> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
* { padding: 0; margin : 0; } body { padding-top : 5px; background: #DDDDDD; } #my-canvas { margin-top : 5px; background : #FFFFFF; border: thin inset #AAAAAA; } button { position:absolute; top: 10px; left:10px; position:relative; float: left; text-decoration: none; text-align: center; font-size: 20px; display: block; border: 1px solid #000; width: 100px; height:50px; } .mybutton { margin-left : auto; margin-right : auto; } #red { background-color: red; } #blue { background-color: blue; } #green { background-color: green; } |
4. ソースコードの解説
それではコードの解説をしていきます！
まずCanvasというのはHTML5から新たに追加された要素で、
ブラウザ上に図形を描くときに使います。
今回はこのCanvasを使ってアプリを作っていきました。
Canvasを使う場合、下のようにHTMLの中に要素として指定します。
|
1 2 3 |
<canvas id="my-canvas" width="300" height="300"> Your browser does not support the HTML5 canvas tag. </canvas> |
この要素の指定範囲内でCanvasのパスが描かれます。
<canvas>〜</canvas>の中には<canvas>タグがサポートされてない
環境(例えばHTML4など)に表示する文字を記述します。
次にJavascriptですが、はじめにCanvasで線を描く実装を解説します！
|
1 2 3 4 5 |
// Canvasの初期化 var myCanvas = $("#my-canvas").get(0); var myContext = myCanvas.getContext("2d"); myContext.strokeStyle = drawColor; myContext.lineWidth = 5; |
上のコードではCanvasの初期化をしています。
2行目：<BODY>タグ内のCanvas要素のID(my-canvas)を取ります。
3行目：myContextに2Dコンテキストのオブジェクトを入れます。
ただの平面の線なので浮き出て見える3Dではなく2Dです。
4行目：パスの色を指定 初期の色は赤にしています。
5行目：線のサイズの指定
これらの指定をしていないとCanvasで線を描くことができません(泣)
|
1 2 3 4 5 |
// 開始位置から終了位置へパスを描く myContext.beginPath(); myContext.moveTo(startX, startY); myContext.lineTo(endX, endY); myContext.stroke(); |
このコードでは実際に線を描く実装をしています。
2行目：パスを開始しますよーって宣言
3行目：パスの開始位置 この場合はX軸がstartX、Y軸がstartYです。
4行目：パスの終了位置 この場合はX軸がendX、Y軸がendYになります。
5行目：パスを描きますよーって宣言
この2つのサンプルコードでCanvasの基本的な実装ができます！
次に画面をタッチしたときの実装、タッチイベントの実装コードです。
タッチをした時↓
|
1 2 3 4 5 6 7 8 9 10 11 |
// Canvasにタッチした時 $("#my-canvas").on("touchstart",function(event) { // デフォルトのタッチイベントを避ける event.preventDefault(); // 開始位置としてタッチした場所を設定 var pageX = event.originalEvent.touches[0].pageX; var pageY = event.originalEvent.touches[0].pageY; startX = pageX - offsetLeft; startY = pageY - offsetTop; }); |
2行目：タッチをした時のイベント
タッチをした時の処理はこの中に実装します
4行目：デフォルトのタッチイベントを避けます
例えば、Canvas上をタッチする時、タッチする場所にボタンなどのイベントを起こすものがあれば、「いや俺、その処理はしないッス」って感じでその処理をしません。
タッチしてドラッグした時↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// タッチが動いた時 $("#my-canvas").on("touchmove",function(event) { // 終了位置の設定 var pageX = event.originalEvent.touches[0].pageX; var pageY = event.originalEvent.touches[0].pageY; var endX = pageX - offsetLeft; var endY = pageY - offsetTop; // 開始位置から終了位置へパスを描く myContext.beginPath(); myContext.moveTo(startX, startY); myContext.lineTo(endX, endY); myContext.stroke(); // タッチスクロール時に開始位置から // 最新の終了位置に線を描く startX = endX; startY = endY; }); |
2行目：タッチドラッグした時のイベント
touchstartと同じように中にしたい処理を実装します。
このアプリではtouchmoveの処理をドラッグしている時に繰り返すことで、お絵描きの機能を実装しています。
on(“touchstart”, function(event) {})とon(“touchmove”, function(event) {})は両方ともタッチイベントの実装ですが、touchstartやtouchmoveのところをtouchendに変えると、タッチが画面から離れたときのイベントを取得することができます。
こんな感じで、簡単にお絵描きアプリを作ることができます。
この実装は色々と応用して使うことができると思うので、ハイブリッドアプリ開発をしてみたい方は是非、参考にしてみて下さい。
5. カンボジアでMonacaのアプリを作ってみて
最後に自己紹介させて頂きます。
１４新卒の村崎がこの記事を書きました。
あっ「むらさき」って読みます。
あだ名はエヴァ初号機や猪木やアゴやカイジや
いろいろー・・・っとある訳ですが、
だいたい同期からはパーポーと呼ばれております。笑
ちなみにこのアプリをカンボジアの現地の学生と一緒に作っていました。
カンボジアでのMonacaの受けはよく、Monacaのハイブリッドアプリケーションとしての強みやオンラインで複数人での開発ができる利点はすごく興味を持ってくれたみたいで、今後は海外でも流行りそうな予感がしました！
また、Monacaはどんどんアップデートされて機能が随時追加されているので、
今後の展開が楽しみですね！
それではまた今度！！
村崎敏久
最新記事 by 村崎敏久 (全て見る)
- ネットショップの更新で、使えそうなツールを紹介します！ - 2014年8月7日
- Webエンジニアに光明！MonacaでiPhoneアプリ開発 - 2014年7月17日