jsWaffleでAndroidアプリを作ろう！クイズアプリ編③

さあ、いよいよクイズを出題しますよ！ list配列のあとに以下を記述して下さい。 for(var i=0;i

2013-05-14

jsWaffleでAndroidアプリを作ろう！クイズアプリ編②

サクウェブＴＶはコチラ↓↓↓ さて、表示と使用するファイルの準備ができたのでJavaScriptを記述していきましょう。これから作るクイズアプリは初めは簡単な作りのものから作成していき、徐々にグレードアップ改造を施していきます。最終的に出来上がるのは…

2013-05-14

jsWaffleでAndroidアプリを作ろう！クイズアプリ編①

サクウェブＴＶはコチラ↓↓↓ 今回からjsWaffleを使用してクイズアプリを作成していきます。前回までより少し難易度が上がります。開発環境の準備 jsWaffleのインストール jsWaffleでAndroidアプリを作ろう！インド式九九編① を参考にして、jsWaffleでの開発…

2013-05-13

HTML5のcanvasを使ってAndroidアプリ！描画練習⑧

サクウェブＴＶはコチラ↓↓↓ ではエンドレスリピートさせましょう。やるべきことは、drawLine2関数の最後の処理でcanvasを初期化してからもう一度drawLine関数を呼び出すだけです。以下の赤い部分です。 function drawLine2(){ if(para2<100){ c.beginPath(…

2013-05-13

HTML5のcanvasを使ってAndroidアプリ！描画練習⑦

サクウェブＴＶはコチラ↓↓↓ 前回行ったカラフル化に加えて、その途中から他の描画も始めてみましょう。たの描画を行うためのfunctionを定義します。 function drawLine2(){ if(para2<100){ c.beginPath(); c.moveTo(290,10); c.lineTo(290-para2*5,290); c.…

2013-05-13

HTML5のcanvasを使ってAndroidアプリ！描画練習⑥

サクウェブＴＶはコチラ↓↓↓ さて、前回予告した通り、カラフルにしてみましょう。やりたいことは、線を10本ずつで異なる色にすることです。色の変更は、 c.strokeStyle = "色"; とすればいいでしょう。では、10本ずつってどうやるのでしょうか。本数をカ…

2013-05-12

HTML5のcanvasを使ってAndroidアプリ！描画練習⑤

サクウェブＴＶはコチラ↓↓↓ さて、もう少し細工してみます。前回はfor文を使用して線を一気に描画しましたが、これを一定時間ごとに１本ずつ描画することで少し、アニメーションのように見えるかもしれません。やってみましょう。利用するのはsetInterval…

2013-05-12

HTML5のcanvasを使ってAndroidアプリ！描画練習④

サクウェブＴＶはコチラ↓↓↓ では、スクリプトをいじって描画を変えてます。単純に線を増やしてみましょう。描画処理を以下のように書きかえます。 for(var i=0;i<60;i++){ c.beginPath(); c.moveTo(10,10); c.lineTo(10+i*5,290); c.stroke(); } for文で線…

2013-05-12

HTML5のcanvasを使ってAndroidアプリ！描画練習③

サクウェブＴＶはコチラ↓↓↓ さて、描画処理です。前回のようにcanvas要素を描画オブジェクトとして取得したら、取得したオブジェクトに必要なメソッドを適用することで図形を描画できます。今回は直線しか使用しませんが、円弧、ベジュ曲線など様々な描画…

2013-05-12

HTML5のcanvasを使ってAndroidアプリ！描画練習②

サクウェブＴＶはコチラ↓↓↓ 開発開始では開発を始めます。 assetsフォルダのwwwフォルダにjsフォルダを作成し、その中にscript.jsを作成してください。次に、index.htmlを以下のように書きかえてください。 index.html <html> <head> <meta charset="utf-8"> <title>描画</title> <script type="text/javascript" src="jsWaffle.js"></script> </meta></head></html>

2013-05-12

HTML5のcanvasを使ってAndroidアプリ！描画練習①

サクウェブＴＶはコチラ↓↓↓ こんにちは。今回は、HTML5のcanvasの練習も兼ねて、簡単な描画を練習してみようと思います。どうせなら前回までやっていたjsWaffleでAndroidアプリ化してみようかと思います。開発環境の準備 jsWaffleのインストール jsWaffle…

2013-05-11

今更HTML5のcanvas！getContext()のメモ

サクウェブＴＶはコチラ↓↓↓ canvasはHTML5で追加された要素だが、getContextメソッドの理解が曖昧だったのでメモしておきます。 getContextメソッドはcanvasをJavaScriptから描画する際に、描画に必要なAPIにアクセスするためのオブジェクトを生成する。 var…

2013-05-11

jsWaffleでAndroidアプリを作ろう！インド式九九編⑧

サクウェブＴＶはコチラ↓↓↓ アプリ全体を実行してみます。１３のボタンを押すと他のボタンを押せば、他の九九が表示されます。「セレクト式」のリンクをクリックすると、セレクト式に飛びました。「表示したい段を選択してください」をクリックすると …

2013-05-11

jsWaffleでAndroidアプリを作ろう！インド式九九編⑦

サクウェブＴＶはコチラ↓↓↓ これでセレクト式の表示が完成しましたので、選択リストから段の選択がなされたら、九九の結果を表示するプログラムを組み込みましょう。では、選択後に計算処理をし、九九の結果表示をHTML内に挿入するための関数を定義します。…

2013-05-10

jsWaffleでAndroidアプリを作ろう！インド式九九編⑥

サクウェブＴＶはコチラ↓↓↓ では、script2.jsにスクリプトを記述していきます。まずは、選択フォームを設置するための処理です。選択フォームはselect.htmlの <div id="select_space"></div> に挿入します。挿入するselectタグに設置するoptionタグが１～２０までと多数あるため、JavaS…

2013-05-10

jsWaffleでAndroidアプリを作ろう！インド式九九編⑤

サクウェブＴＶはコチラ↓↓↓ 前回までで、簡単なボタン式のインド式九九アプリを作成してきました。これをセレクト式で作成してみようと思います。セレクト式にすることで、ボタンを20個も配置する必要がなくなるため限られたスペースを有効活用できます。 …

2013-05-10

jsWaffleでAndroidアプリを作ろう！インド式九九編④

サクウェブＴＶはコチラ↓↓↓ 次に、ボタンが押されたときに押された数字×（１～２０）を計算し、その結果を表示するための関数を定義します。表示される場所はindex.htmlの <div id="calc_display"></div> の部分です。まずは動作確認を含めてテストの関数を定義してみましょう。 $("#but…

2013-05-10

jsWaffleでAndroidアプリを作ろう！インド式九九編③

サクウェブＴＶはコチラ↓↓↓ JavaScriptからボタンを配置するさて、ではscript.jsにJavaScriptを記述していきましょう。まずは、インド式九九の20×20に対応するために数字の1～20までのボタンを作りましょう。 index.htmlの中の <div id="button_space"></div> にボタンを挿入します。 HT…

2013-05-10

jsWaffleでAndroidアプリを作ろう！インド式九九編②

サクウェブＴＶはコチラ↓↓↓ では、開発環境が整ったところで作成をはじめていきましょう。開発環境の構築は以下を参考にしてください。 jsWaffleでAndroidアプリを作ろう！インド式九九編① 今回はjsWaffleを使用してインド式九九のAndroidアプリを作成しま…

2013-05-10

jsWaffleでAndroidアプリを作ろう！インド式九九編①

サクウェブＴＶはコチラ↓↓↓ 今回からjsWaffleで簡単なアプリを作成していこうと思います。 JavaScriptを使用してAndroidのネイティブアプリが作成できるので簡単なアプリであれば短時間でできてしまいます。今回はjQeryも使用してより簡単に作成します。 …