【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

HTML5 「Canvas」で更新可能なグラフを作る3つのステップ

HTML5 「Canvas」で更新可能なグラフを作る3つのステップ

CanvasとJavascriptでグラフを描いてみよう

今回は「HTML5 API」の機能の1つである「Canvas」の使い方を紹介します。

Canvasとはブラウザ上で図を描くためのHTML5が用意している機能です。通常グラフをコンテンツとして扱う場合、jpegやpng形式の画像ファイルを用いることも多いですが、Canvasを使えばHTML/CSS/Javascriptを使って棒グラフ、円グラフといった図を描くことが可能です。

Canvasで作成する棒グラフ

Canvasで描くグラフはHTML/CSS/Javascriptで作成しているのでデザインやグラフの数値を容易に変更できます。つまり使い回しやメンテナンス、簡単に更新が出来るというメリットがあるといえますね。

以下、棒グラフ作成のためのコードをご紹介します。

HTML

canvas要素を記述してグラフを描く準備をします

<section>
  <h1>Z社のデバイス別売上比率(2015年3月)</h1>
  <canvas>
    canvas要素が利用できるWebブラウザで開いてください。
  </canvas>
</section>

CSS

section, h1, canvasの各要素のスタイルとなります。こちらはサイトのテイストに合わせてカスタマイズしてください。

section{
	width: 360px;
	margin: 16px;
}
h1{
	-moz-box-shadow: 0 5px 5px -3px black;
	-webkit-box-shadow: 0 5px 5px -3px black;
	box-shadow: 0 5px 5px -3px black;
	background: orange;
	color: black;
	font-size: 20px;
	padding: 2px 4px;
	margin: 1em 0 0.5em 0;
	border-radius: 6px;
}
canvas {
	width: 360px;
	height: 180px;
	-moz-box-shadow: 0 5px 5px -3px black;
	-webkit-box-shadow: 0 5px 5px -3px black;
	box-shadow: 0 5px 5px -3px black;
	border: solid 2px orange;
	border-radius: 8px;
	padding: 6px;
	background: white;
}

Javascript

グラフの情報を配列変数を使って記述してるので、値を動的に変更することが可能です。

<script>
  //配列変数device_dataにグラフの情報を定義。
    //nameはデバイス名、ratioが比率、colorがグラフの色の情報となります。
    device_data = [
      {name:'スマートフォン', ratio:54.6, color:'red'},
      {name:'PC', ratio:43.5, color:'blue'},
      {name:'ガラケー', ratio:1.9, color:'green'},
    ];
    window.addEventListener('load', 
      function(event){
        drawGraph();
      }
    , false);
    //グラフ描画
    function drawGraph(){
      var cvs = document.querySelector('canvas');
      var context = cvs.getContext('2d');
  //棒グラフの長さ基準を定義
      var std_value = 30;
      var std_width = 200;
   //fontプロパティに文字サイズ、フォント名を定義
      context.font = '10 Arial';
      for (var i = 0; i < device_data.length; i++) {
   //文字の色
      context.fillStyle = 'black';
   //(デバイス名の)テキストを描画
      context.fillText(device_data[i].name + '(' + device_data[i].ratio + '%)', 0, 28*i+18);
   //棒グラフの色
        context.fillStyle = device_data[i].color;
   //棒グラフを描画
      context.fillRect(
          65, 28*i + 4,
          std_width / std_value * device_data[i].ratio,
          20
        );
      }
    }
</script>

HTML5で表現する時代

HTML5では今回ご紹介したグラフだけでなく、動画の再生のための「Video」、GPSやWi-Fiから現地情報を取得するための「Geolocation」などJavascriptをつかって制御するAPIがたくさん用意されています。テキストや画像に加えて、これらを有効に利用することリッチなコンテンツのWEBサイトを作っていきましょう!

市川

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+