アーカイブ

‘html’ カテゴリーのアーカイブ

[JavaScript]amChartsで簡単flashグラフ

2008 年 12 月 16 日 コメントはありません

amCharts:http://www.amcharts.com/

今回はフラッシュの画像を作ってくれるamChartsを紹介。
GoogleChart以外になんかいいツールはないかなと探していたところ、発見したのでメモ。
なんといってもこの利点はフラッシュで動的なグラフが作成できるところ。
urlを投げたら画像が帰ってくるGoogleChartよりはちょっとめんどくさいけど、慣れればいい感じｗ

詳しいやり方はこちらに書いてあるので割愛。

ちなみに無料ですがグラフの左上にちょっとした広告が入るそうです。

カテゴリー: html, javascript タグ: ,

[JavaScript]canvas要素でビジュアルな画像を(1)　～基本的な使い方～

2008 年 4 月 25 日 コメントはありません

今回はHTML5で脚光を浴びるであろうcanvas要素の基本について紹介する。

・概要

HTMLはウェブ関連技術の標準団体「W3C」（World Wide Web Consortium）によって定められていて、現在はHTML4だが2010年からHTML5が正式にリリースされるらしい。

【参考】
HTML5が持つ本当の意味：http://www.atmarkit.co.jp/news/200801/25/html.html

HTML5草案：http://www.w3.org/html/wg/html5/

canvas要素は決して新しくないがあまり使われていないのが事実。
しかし使いこなせばこんなこともできるらしいｗ

【参考】
Canvascape – 3D Walker：http://www.abrahamjoffe.com.au/ben/canvascape/
Canvas 3D Rendererデモ：http://tapper-ware.net/canvas3d/

canvas要素はWeb ページ上でインタラクティブな画像生成を行う技術で、従来 Java や Flash などを使わなければできなかったようなビジュアル的表現が、プラグインや特殊なツールなしで実現できる。
しかし、現在ではIEではcanvas要素に対応しておらず、Safari,Opera9,Firefox1.5などで使えるらしい。

・canvasを利用する流れ

まずはcanvas要素で描画領域を確保し、JavaScriptを用いて描画領域に図形を描画する。
canvas要素での描画領域の確保は以下のようにする。

  1.  <canvas  id="mycanvas" width="200" height="200">代替文章</canvas>

javascriptでcanvas要素を使うのでidを指定する。width,heightは描画領域のサイズでこれは必須らしい。IEなどのcanvas要素が使えないブラウザではcanvasタグにはさまれた代替文章が表示されるので入力しておいて方がよいかも。
</canvas>の閉じタグを忘れるとの後の部分が表示されないので注意すること。

次にJavaScriptでcanvas要素のオブジェクトにgetContextというメソッドを呼び出し、オブジェクトを取得する。

  1.  var canvas = document.getElementById("mycanvas");
  2.  var context = canvas.getContext("2d");

最後に描画コンテキストに実装されたメソッドも用いてcanvas内に描画していく。
サンプルは以下

  1.  <html>
  2.  <head>
  3.  <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">
  4.  <title>test</title>
  5.  <script type="text/javascript">
  6.  <!--
  7.  function inite() {
  8.  var canvas = document.getElementById("mycanvas");
  9.  if(!canvas.getContext) {
  10.  // canvas対応ブラウザではないとき
  11.  return;
  12.  } else {
  13.  var ctx = canvas.getContext("2d");
  14.  ctx.fillStyle = "rgb(200,0,0)";
  15.  ctx.fillRect (30, 30, 50, 50);
  16.  
  17.  // パスを使って三角形を描く
  18.  ctx.beginPath();
  19.  ctx.moveTo(70, 70);
  20.  ctx.lineTo(105,120);
  21.  ctx.lineTo(25,125);
  22.  ctx.lineTo(70, 70);
  23.  ctx.stroke();
  24.  
  25.  // 円弧(円)
  26.  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  27.  ctx.beginPath();
  28.  ctx.arc(100, 100, 50, 0, 2*Math.PI, true);
  29.  ctx.fill();
  30.  }
  31.  }
  32.  // -->
  33.  </script>
  34.  </head>
  35.  <body onload="inite()">
  36.  <canvas id="mycanvas" width="150" height="150"></canvas>
  37.  </body>
  38.  </html>

実行結果はこちら
描画コンテキストのメソッドについては次回に詳しく触れる。

カテゴリー: html, javascript タグ: ,

[PHP+Ethna]vistaにEthnaを入れてみる(1)　～XAMPPの導入～

2008 年 3 月 17 日 コメントはありません
・xmappのダウンロードからインストール

PHPの環境を作るとき、apacheやphpなどを個別にインストールするのはすごい手間がかかる。
なので今回は一括でインストールできるxamppを使う。

xampp(wiki):http://ja.wikipedia.org/wiki/XAMPP

まずは下記のサイトからXAMPP Windows版 1.6.6a(2008/3/12現在)のインストーラ版をデスクトップとかにダウンロード。

xampp:http://www.apachefriends.org/jp/xampp-windows.html

ダウンロードが終わったらインストーラを起動するのだが、ここで注意点が一つ。
apacheがポート80を使うので、skypeをインストールしている人は「ツール」→「設定」→「詳細」→「接続」で「上記のポートの代わりに、ポート80を使用」のチェックをはずしておく。

後は普通にインストールするだけ。うちはCドライブの直下にxamppをインストールした。
インストールや起動方法に関してはThinkITで詳しく書かれているので飛ばす。

・xamppのPHPを最新のやつに書き換える

xamppのインストールが終わったからさぁethnaだ！と行きたいとこだが、色々調べてみた結果xamppのPHP少し変らしいので最新のPHPファイルでxamppのPHPファイルを書き換える。

まずは下記のサイトからPHP 5.2.5 zip package(2008/3/12現在)をダウンロード。

PHP:http://www.php.net/downloads.php

ダウンロードしたらとりあえずLhacaなどでデスクトップなどに解凍しておく。

次にxamppが起動している場合、apacheとmysqlを停止する。
｢スタート」→「プログラム」→「Apache Friends」→「XAMPP」→「XAMPP Control Panel」を選択すると以下のような画面が出てくるので赤丸がついている２つをクリックして停止させる。

xampp_img1

xampp_img1

そしたら解凍したPHPの中身をC:￥xampp￥php(パスはインストールした場所によって異なる)にすべてコピーする（重なるものはすべて上書き）。

ここでちゃんとapacheなどをとめてないとエラーになってうまくコピーできない。

これでやっとEthnaを導入するためのPHP環境は作成できたぞ！
ということでEthna導入については次回で。

カテゴリー: ethna, html タグ: ,
Get Adobe Flash playerPlugin by wpburn.com wordpress themes