Web業務システムの定番。HTML5×Canvasを使ったグラフライブラリ
HTML5で追加された新機能の一つにCanvasがあります。よく知られた使い方としてはブラウザゲームの描画がありますが、業務系システムとは縁遠い気がしてしまいます。そこで業務システムならではの活かし方としてチャート（グラフ）を紹介したいと思います。 Canvasタグを使ってグラフを描画するということは、Webブラウザだけで完結するということです。従ってサーバ側の準備は不要で、かつ負荷もありません。HTML5で業務システムを構築する上でCanvasを使ったグラフ描画は欠かせない存在と言えるでしょう。 Epoch Epochはリアルタイムチャートに対応しています。描画できるグラフは、エリア・ヒートマップ・曲線、円グラフ、棒グラフ、散布図となっています。 Epoch by Fastly Aristochart Aristochartは折れ線グラフ専門のライブラリで、Canvasタグにグラフを描画
MdN Design｜総合情報サイト
まずはCANVAS タグで描画するスペースのサイズを決める【1-1】。そのスペースにグラフを描画するための筆にあたるのがJavaScriptだ。getElementByIdメソッドを使いCANVASのidを取得、getContextメソッドで描画用のコンテキストを取得する。取得したコンテキストはctxというオブジェクトに格納（オブジェクト名は何でもかまわない）。このctxオブジェクトにグラフを描画していくことになる【1-2】。 【1-1】CANVASタグには、幅（width属性）と高さ（height属性）、範囲（描画領域）を指定する。またJavaScriptで使用するid属性も設定する。タグの間には非対応ブラウザ用の注意書きを入れておこう 【1-2】CANVASタグのidをgetElementByIdの引数に指定する。なお、getContext()の引数は現在では「2D」しか選択できないよ
無償のVisual Studio CodeがCordovaに対応。HTML5/JavaScriptでのモバイルアプリケーション開発が可能に
マイクロソフトが昨年11月にオープンソースで公開した無償のコードエディタ「Visual Studio Code」を、HTML5/JavaScript用のモバイルアプリケーション開発フレームワーク「Cordova」に対応させる「Cordova Tools Extension」が公開されました。 開発したのはマイクロソフト自身で、Visual Studio Codeを利用してCordovaアプリケーションのプログラミング、ビルド、デバッグが可能になります。 また、Ionic、Onsen、PhoneGap、SAP FioriなどのCordovaに対応したJavaScriptライブラリにも対応。IntelliSenseにも対応。 Visual Studio CodeはWindowsだけでなくMacOS、Linuxにも対応しているため、これらのOS上でCordovaを使ったモバイルアプリケーションの
videoタグとコーデックのお話し – アウトブレイク！[outbreak]
html5には動画を文書に埋め込むための<video>タグがありますね！ html5も2012年12月17日にW3Cが策定完了の発表を行ったり、2013年1月6日には全国のコワーキングスペースなどで新春!!HTML5KARUTA大会が行われるなど、話題にも事欠きませんが、流行のiPad、iPad miniなどiOS系ではFlashなどの技術が基本的には使えないなど、動画の世界もhtml5を利用した技術へとシフトしてきた感があります。 当方も今までFlashやWMVで提供していた動画を、各種スマートフォンやタブレットなどでも再生ができるように<video>タグによる動画再生へと変更することにしました。が！これが意外と面倒でしたよっと…技術的な覚え書きを残しておきます。 まずはhtml5のコードですね。 一応、現在作成中のサイトはIE7以下をばっさり切り落として作成しているので、IE8以降と一
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
