HTML5 × Chart.jsで円グラフを描く | ビジュアルシンキング
ビジュアライゼーション、データ・ジャーナリズムに活用できそうなツールの使い方を紹介します。今回はChart.jsの第1回。 第1回目なので「Chart.js」の概略から、円グラフを描くまでを。 [完成イメージの確認はこちら] Chart.jsとは Chart.js Javascriptのライブラリ。 HTML5ドキュメント内で使うと、6つのグラフを描けます。 Chart.jsで描画できるグラフ 線グラフ 棒グラフ レーダーチャート 鶏頭図（円グラフの一種） ドーナツグラフ Chart.jsの入手 ライブラリは下記リンク先より入手します。 [ダウンロード] インクルード ライブラリの機能を利用するには、HTMLファイルにインクルード設定します。 <!doctype html> <html> <head> <title>Chart.jsで描く円グラフ</title> <!-- インクルード -
Javascript ライブラリー - HTML5.JP
HTML5.JPオリジナルのJavaScriptライブラリを公開していきます。ご自由にライブラリをダウンロードして貴サイトにてご活用ください。 <meter> polyfill (jQuery プラグイン) <meter> polyfill は、HTML5 で新たに導入された meter 要素をサポートしていないブラウザーでも meter 要素がレンダリングされるようにする jQuery プラグインです。Chrome や Opera など、すでに meter 要素をサポートしているブラウザーには何も作用しません。このプラグインは、Internet Explorer 6, 7, 8, 9 でも動作します。 html5detector (Google Chrome Extentions) html5detector は、表示されているページが HTML5 でマークアップされていれば、アドレスバ
HTML5時代が目前！ 本気で学ぶJavaScript
登場当時、動きのあるWebページを作る技術として注目されたJavaScriptは、その後“不遇”の時代を経て、Ajaxで再び脚光を浴びました。jQueryなどのライブラリの普及で、開発生産性やブラウザ互換性の問題がほぼ解決した現在、HTML5時代を目前にして、JavaScriptの重要度はさらに高まっています。この特集では、今、知っておきたいJavaScriptを一気に解説します。 目次
どこまでがHTML5なの？
HTML5にはCanvasタグやVideo/Audioタグ、ドラッグ＆ドロップ、Microdata、Web Workersなどさまざまな機能があると説明されますが、実際にはこれらは「HTML5とその関連仕様」を含んでいます。 仕様書に従った厳密な「HTML5」とは、どこまでの範囲を指すのでしょうか？ モジラジャパンの浅井智也氏が「Keypoints HTML5」という資料を公開して分かりやすく紹介してくれています。 仕様書に沿った「HTML5」の範囲とは HTML5は、W3CとWHATWGが共同で仕様策定をしていますが、両者の仕様書に書かれている範囲は異なっています（非常に細かい部分では一部の仕様に違いもあります）。Keyoints HTML5から、その両方の仕様でHTML5の範囲を示した図を紹介します。 図の右側のW3C仕様ではCanvas、Microdata、Web Messaging
CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」:phpspot開発日誌
HTML5 video player in CSS with Silverlight and Flash : MediaElement.js CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 HTML5非対応ブラウザ向けに、Flashはもちろん、こちらのライブラリではSilverlightもサポートしています。 こうしたライブラリも多数出揃ってきていますが、どれがよく使われるようになるんでしょうね。 １つの選択肢として覚えておいてもよいでしょう。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能にするライブラリ集 MooTools用のHTML5動画プレイヤー「Moovie」
EExt Japan - Sencha Touch登場 - モバイル用HTML5フレームワーク
Ext CoreはダイナミックなWebサイト構築に最適な軽量かつ高機能なクロスブラウザー対応のJavaScriptライブラリです。その特徴は： ファイルサイズがコンパクトな約25kb (ext-core.jsをgzip圧縮した場合) 柔軟かつ利用しやすいオープンソースライセンスのMITライセンス Ext開発メンバーにより執筆された体系的かつ網羅的な75ページのマニュアル これまでのExt JSを同じ使い慣れた直感的なAPI Ext JS 2.2 Ext JSはリッチインターネットアプリケーション開発のためのクロスブラウザ対応JavaScriptライブラリです。 高性能でカスタマイズ可能なユーザーインターフェイス 優れた設計、文書が豊富、拡張性の高いコンポーネントモデル 商用ランセンスとオープンソースライセンスが利用できます Ext JS 3.0とExt GWT 2.0が
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」:phpspot開発日誌
Video JS | HTML5 Video Player CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」。 HTML5はまだ実装されてないブラウザが一杯あるし・・・という方も心配ないように、FlowPlayerによってFlashビデオ再生できるようになってます。 これなら多くのブラウザがHTML5対応しなくても、すぐにでも実装しちゃえますね。 ライブラリは独立しており、簡単に使え、フルウィンドウモード対応、ボリュームコントロール対応なんかの機能もついています。 GitHubでオープンソース開発されているので改造するのも容易です。 関連エントリ 無茶苦茶カッコいいHTML5ビデオプレイヤー「SublimeVideo」 ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」
HTML5のCanvasで動く超クールなデモページ:phpspot開発日誌
HTML5 Canvas Experiment ・IO 9elements HTML5のCanvasで動く超クールなデモページ。 Safari 4 とか Firefox3.5 で動くのですが、これは1回見ておいたほうがよいかもしれないカッコいい＆Canvasの可能性を見せてくれるものです。 単に動くだけでなく、インタラクティブな動作もします。 Flash、Silverlight、Canvas というもうひとつの選択肢が増えたという感想も持ってしまいます。 関連エントリ Canvasでブラウザ上に動的にテキストを描画できる「canvas-text」 CanvasデータをPNG/JPEG等の１枚画像に変換するJS「Canvas2Image」
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
「Web Directions」がアジア初上陸 Webがもたらす新たな世界／「Web Directions East 2008」レポート | 編集部ブログ―鈴木教之
去る2008年11月7日、国内外のWebに関する著名人によって繰り広げられるイベント「Web Directions East」が開催された。「Web Directions」は、2004年オーストラリア・シドニーでの開催を機に、主にオーストラリアを中心とした「Web Directions South」、カナダ・バンクーバーでの「Web Directions North」と世界規模で行われてきた。主にWebデザイナーを対象としたイベントで、デモを交えながらWeb関連の最新情報やエキスパートの知識・アイデアを共有できる場として知られている。 今回はSouth、Northに続く試みとして、アジア発上陸となる東京での開催を果たした。3日間の期日のうち、初日は「ユーザーに優しいウェブサイトの提供」をテーマとしたカンファレンス、翌日から2日間にわたって、講演者によるワークショップが執り行われる。ここでは
HTML 5の2つのDOM Storageを利用したカウンター - builder by ZDNet Japan
DOM Storageの仕組みを利用したカウンターの例 HTML 5の仕様では、sessionStorageがウィンドウやタブが開かれている間のみデータを保持するのに対して、localStorageではウィンドウやタブを閉じた後もデータを保持し、originが同じページで共有することはすでに説明した。現時点ではFirefox 3のglobalStorageもlocalStorageと同様に考えてよい。リスト1はその特性を利用したカウンターの例である。 この例ではlocalStorage.visitsにカウンターの値を保持している。そしてsessionStorage.visitingが設定されていない場合のみカウンターの値を1つ増やすようにしている。 リスト1 DOM Storageを利用したカウンターの例 DOM Storageによるカウンター 最初にページを開いたときにはまだsessio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5shiv - Project Hosting on Google Code
HTML5Rocks - A resource for open web HTML5 developers