About

Posts by :

[C-4] Webアプリのつくり方 ④ (図形描画)

今回はCanvasへの図形描画を取り上げます。例題として、与えられたデータの円グラフをつくりましょう。他にも利用できるよう、できるだけ汎用につくります。 例題「タブレット端末シェアの円グラフ」sample3 アプリを開くと、基礎データのテーブルが表示され、さらに凡例の小さな長方形が描画されます。「グラフ」というボタンを押すと2012年度上期(4月〜9月)の国内タブレットシェアの「円グラフ」が描画されます。このボタンはマウスが上に来ると画像が変わります。 （１）「HTMLファイル」sample3.html
  •  1から13行目までは前の例題でおわかりでしょう。
  • 14行目はイメージボタンで、マウスが上に来ると「button2.png」の画像を、マウスがボタンの外み来ると「button1.png」の画像が表示されます。
  • 16から18行目もおわかりでしょう。
(2)「CSSファイル」sample3.css
  •  これも前回と同様なのでおわかりでしょう。
(3)「JavaScriptファイル」
  •  1,2行目は前回と同様なのでおわかりでしょう。
  • 3から5行目は、「start」「finish」「per」の名前で、サイズがそれぞれ10,10,9個の配列を用意します。
  • 6行目は「data」という名前の配列を[]の中の値に設定します。これが、今回円グラフを書くメーカー別出荷台数のデータです。
  • 7,8行目は「color」という配列を対応するメーカー別の円グラフの「扇形」の色に設定します。最後の”gray”の色は、円グラフを立体の影のように見せるための色です。
  • 9行目の「radius」は円グラフの半径です。
  • 10,11行目の「x0」「y0」はそれぞれ円グラフの中心のx座標、y座標です。
  • 12,13行目の「tx0」「ty0」は表示するテーブルの左上のx座標、y座標です。
  • 14,15行目の「tw」「th」は凡例の長方形の横幅、高さです。
  • 16行目の「ts」は次の凡例の長方形との隙間の高さです。
  • 17,18行目の「lx0」「ly0」は最初の凡例の長方形の左上のx座標、y座標です。
  • 19行目の「angle0」は最初の扇形の左側の半径の角度(ラジアン)です。ここで「Math.PI」は円周率です。
  • 20行目の「total」はすべてのメーカーの台数の合計を入れる変数です。
  • 21行目の「num」は表示するメーカーの会社(その他も含む)の数です。
  • 22から27行目で「start」と「finish」という配列を使って、台数を累積しながら区切っていきます。i+1番目の「start」はi番目の「finish」に等しくします。また「total+=data[i]」は「total=total+data[i]」の簡略形で、totalにi番目のデータdata[i]を加えた値をtotalに代入するという意味です。ここで、23から27行目の「for var i=0; i<num; i++){A}」は繰り返しの命令で、変数iを0から始めてAを実行し、iを1増やします。この操作をiがnumより小さい間、繰り返します。
  • 28から32行目ですべての区切りの台数をtotalで割って、円の一回り(360°=2πラジアン)のパーセントに変換します。ここで、Math.floorは切り捨て関数で、パーセントを小数点以下第1位で切り捨てます。
  • 33行目の「drawTable」でテーブルを表示します。
  • 34行目の「drawLegend」で凡例の長方形を描画します。
  •  35から41行目でテーブルを表示する関数「drawTable」を定義しています。前回の例題でやったように「img」オブジェクトを新しく用意し、テーブルの画像ファイル「table1.png」を設定して描画します。
  • 42から46行目で凡例を描画する関数「drawLegend」を定義しています。関数の引数x,yには最初の凡例の左上の座標(x,y)を指定します。「context.fillStyle」で凡例の長方形の色を設定します。「context.fillRect(x,y,tw,th)」は左上の座標を(x,y)とし、横幅tw、高さthの塗りつぶし長方形を描画します。
  • 48から58行目で塗りつぶしの扇形を描画する関数「fillArc」を定義しています。「Math.cos」「Math.sin」はそれぞれ、数学のサイン、コサイン関数です。(x,y)は扇形の中心座標、rは半径、r1,r2は始まりと終わりの半径の角度(ラジアン)です。「context.beginPath()」でパスを開始します。「context.MoveTo(x,y)」でペンを(x,y)に移動します(描画はしません)。「context.LineTo(x,y,x1,x2)」で中心(x,y)から始まりの半径の先端(x1,y1)まで直線を引きます。「context.arc(x,y,r,r1,r2,false)」で中心(x,y)、半径r、始まりの角度r1、終わりの角度r2で円弧を書きます。ここで「false」は時計回り(「true」は反時計回り)です。「context.closePath()」でパスを終了し、閉じます。このパスで囲まれた図形の中身を「context.fill()」で塗りつぶします。
  • 59から64行目で円グラフを描画する関数「drawGraph」を定義します。60行目は立体的に見せるために円の影を中心をx座標,y座標とも4pxずつずらせて”gray”色で塗りつぶします。61から63行目で先に定義した関数「fillArc」を使って、すべての扇形を描画します。
  • 65から67行目は前回登場した「RollOver関数」です。
(4)「画像フォルダ」images 「sample3」のソースコードと画像のダウンロードはここをクリックしてください

By • コラム •

[C-3] Webアプリのつくり方 ③ (ボタンの種類)

●ボタンの種類 Webアプリでは、何かの処理を行うのに、ボタンが重要な役割を果たします。ボタンには、「タイトルだけのボタン」、画像でできている「イメージボタン」、ボタンの上をなぞると「画像がかわるボタン」があります。 以下の例題でこの使い方を示します。 ●例題２「フォトギャラリー」sample2
４つのボタン「ボタン０」「ボタン１」「ボタン２」「ボタン３」を押すと写真と背景の色が変わります。 （１）「HTMLファイル」sample2.html [解説]
  • 1から7行目はお決まりの部分です。
  • 8行目にこのアプリのタイトルを書きます。
  • 9行目はcssファイルへのリンクです。
  • 12行目でcanvas2という名前のCanvasを使用することを宣言します。
  • 14行目は「タイトルだけのボタン」です。位置と大きさは「CSSファイル」で指定します。このボタンを押すと引数を0として「pushButton」という関数を実行します。この引数でボタン０が押されたことが分かります。
  • 15行目は「CSSファイル」で位置と画像が指定された「イメージボタン」です。このボタンを押すと引数を1としてpushButtonという関数を実行します。この引数でボタン１が押されたことが分かります。
  • 16行目は15行目と同じ役割をする「イメージボタン」ですが、15行目は「button」タグですが、16行目は「img」タグでかかれています。このボタンを押すと引数を2としてpushButtonという関数を実行します。この引数でボタン２が押されたことが分かります。
  • 17行目はマウスがボタンの上にくると、画像が「button3_2.png」に、またマウスがボタンを離れると「button3_1」になる「画像がかわるボタン」です。この動作は「RollOver」という関数で行っています。このボタンを押すと引数を3として「pushButton」という関数を実行します。この引数でボタン３が押されたことが分かります。はじめの画像は「CSSファイル」で定義しておきます。
（２）「CSSファイル」sample2.css [解説]
  • 2行目はブラウザの背景画像として、繰り返しパターン「pattern1.png」の画像を利用するように指定しています。
  • 10行目はキャンバスの背景色として「beige」を指定しています。
  • 29行目は「button1」の画像として、「button1.png」を指定しています。27行目の「border: 0px;」はボタンの周囲の境界線を書かないように指定しています。
  • 36行目は「button2」の画像として、「button2.png」を指定しています。ここは「img」タグなので、27行目のように「border: 0px;」はいりません。
  • 43行目は「button3」の最初の画像として「button3_1.png」を指定しています。マウスがボタンの上にくると「RollOver」関数で「button3_2.png」の画像に変えます。
（３）「JavaScriptファイル」sample2.js [解説]
  • 1,2行目はsample1と同じく、「canvas2」という名前のCanvasを2Dで描画できるように宣言します。
  • 3行目で「img」という名前で新しい画像オブジェクトを用意します。
  • 4行目は、backColorという名前で背景色用の配列を宣言します。[]で囲まれたデータはbackColor[0]=”pink”;    backColor[1]=”lightblue;….;backColor[4]=”lightgray”　を意味します。
  • 5行目のloadedという配列はそれぞれの写真が読み込まれたかどうかを記憶する配列です。loadedの値が0のときまだ読み込まれていない、1のとき読み込まれたを意味します。最初の値はすべて0にしておきます。
  • 6行目は「pushButton」という関数を使って、背景(lightgray)と写真(photo4.png)を描画します。
  • 7から19行目は「pushButton」という名前で、対応するボタン番号の写真と背景を描画する関数を定義します。
  • 12から15行目は読み込まれた画像を描画する無名の関数です。
  • 17行目は2回目以降の描画で、すでにデータが読み込まれた画像を描画します。
  • 20行目は画像オブジェクトobjを、valという名前のpngファイルに指定する関数です。
（４）「画像フォルダ」images 「sample2」のソースコードと画像のダウンロードはここをクリックしてください

By • コラム •

[C-2] Webアプリのつくり方 ② (構成)

●Webアプリの３つの構成要素 HTMLファイルだけでもつくれますが、繰り返し利用することを考えて、「HTML」「CSS」「JavaScript」の３つのファイルに分けることにします。また標準のモバイルとして「iPhone」を扱うことにします。この設定でも他のモバイルも表示されます。 Webアプリのフォルダ「sample1」内にsample1.html、フォルダ「css」（その中にsample1.css）、フォルダ「js」（その中にsample1.js）、フォルダ「images」を置きます。 ●例題１「トランプめくり」(sample1) 「めくる」ボタンを押すと、トランプがめくれて、絵札になり、もう一度押すと、元に戻ります。
この例題で、３種類のファイルのひな形を見てみましょう。 （１）「HTMLファイル」sample1.html [解説]
  • 4行目で文字コードを「UTF-8」に指定していますから、テキストエディタでも「UTF-8」で保存して下さい。1~7行目まではお決まりの行とします。
  • 8行目でブラウザのタブの見出しを「トランプめくり」にします。
  • 9行目でスタイルシートのファイルとして、「sample1.css」を使うことを宣言します。
  • 12行目でアプリの表示画面にcanvas1という名前のcanvasを使うことを宣言します。ここで「id=」の次に来る名前は、このタグに固有(ひとつしかない)で、「CSSファイル」や「JavaScriptファイル」からこの名前を使って参照したり変更したりすることができます。
  • 13行目でトランプめくりという文字を画面に表示します。
  • 14行目で「めくる」という名前のついたボタンを表示し、これがクリックされたらturnCard()という名前の関数を呼び出します。
  • 15行目でjavascriptファイルとして「sample1.js」を使うことを宣言します。
（２）「CSSファイル」sample1.css [解説]
  • 2行目で背景に繰り返しパターンとして「images」というフォルダの中にある「pattern1.png」を使うことを宣言します。
  • 5,13,18行目の「position: absolute」で位置の指定に絶対座標を使うことを宣言します。絶対座標は画面の位置(x,y)をピクセル単位で指定します。これに対して相対座標は画面の縦または横の割合(%)で位置を表します。
  • 6,14,19行目の「left」はx座標(水平方向)、7,15,20行目の「top」はy座標(垂直方向)を意味します。「px」はピクセルという単位です。
  • 8,21行目のwidthは横幅、9,22行目のheightは縦の高さを意味します。
  • 10行目は背景色としてカラーコード#90ee90の色を使うことを宣言します。（カラーコード表はインターネットなどで調べられます）
このファイルで背景の色やデザイン、文字やボタンの位置を定義します。 （３）「JavaScriptファイル」samlpe1.js [解説]
  • 1行目の「var」は変数宣言です。関数外はグローバル変数(どこの場所でも参照・変更できる)、関数内はローカル変数(関数内のみ参照・変更できる)です。省略するとグローバル変数になります。「document.getElementById(“canvas1”)」は「HTML」のid=”canvas1″の要素を指定します。
  • 2行目のgetContext(“2d”)はキャンバス要素から２次元描画用のコンテキストを取得します。「キャンバス」と「コンテキスト」は「画用紙」と「色鉛筆」のような関係と考えて下さい。
  • 3行目は「img」という名前で新しい画像オブジェクトを用意します。
  • 4行目の「mode」はトランプを0のとき裏柄、1のとき表柄に表示するために用意した変数です。はじめは0に設定し裏柄を表示します。
  • 5行目の「num」はカードの種類を保持する変数です。はじめは1でダイヤのジャックです。
  • 6行目でturnCard()を実行します。
  • 7から20行目で、ボタンが押されたときカードをめくる関数を定義しています。
  • 8行目のif(条件){ A } else { B }は条件が成立すればAを、成立しなければBを実行します。「==」は等しいことを意味します。よく似ていますが「=」は右辺を左辺の変数に代入することを意味します。modeが0なら裏柄、1ならnumで表される種類のカードを表示します。
  • 9,12行目で画像オブジェクト「img」のファイル名を指定します。変数が数字だけの場合「+」は足し算ですが、この行のように文字列が混じると「+」は文字列の結合を意味します。
  • 13行目で設定後numを1増やします。「++」の記号は1増（インクリメント）、「–」は1減（デクリメント）です。
  • 14行目はカードが6枚しかないのでnumが6より大きくなると1に戻るようにします。
  • 17から19行目でファイルが読み込まれた(onload)とき、キャンバスにその画像を表示します。
（４）「images」フォルダ 画像ファイルを用意します。ネットから捜すか写真で撮ったりして、画像処理ソフトで大きさをそろえたり、角を丸くしたりします。 「sample1」のソースコードと画像のダウンロードはここをクリックしてください

By • コラム •

« 106 107 108 109 110 111 112 113 »