JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式
闇金被害【弁護士・司法書士】に無料相談
日本を代表する港湾都市：神戸 当サイトは、兵庫県の県庁所在地である神戸市についての情報を発信するサイトです。 神戸市は古くから港の利用で栄えたエリアです。また江戸時代には、ヨーロッパから来日した外国人の居留地も作られ、外国の文化を真っ先に受け入れた重要な地域でもありました。 1995年に起きた大型地震阪神淡路大震災により、神戸市は甚大な被害を受けましたが、現在では見事に復興し、多くの産業を抱える経済都市としての地位を確立しています。 神戸市立王子動物園 3 Jul 2021 神戸市立王子動物園は神戸で最大級の動物園です。日本ではあまり多くないパンダを見ることができ、パンダのタンタンと会うことができます。他にも様々な動物を見て楽しむことができます。 Comment → 有馬温泉 27 May 2021 神戸の観光名所といえば、まずは有馬温泉を思い浮かべるのではないでしょうか。全国的にも有名な
人を馬鹿にしたブロックくずし
人を馬鹿にしたブロック崩し [space] でスタート 左右キーで操作 Game Over Score: 0 Replay | Tweet 作者: @yubais
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
第1回 読み込んだ画像をトゥイーンアニメーションさせる | gihyo.jp
これからのWebはHTML5だ。とはいわれるものの、どの機能や技術を使うかは、コンテンツ次第でさまざまといえる。その中で、ダイナミックでインタラクティブな表現をつくりたいとき、Canvasの機能が注目される。ただし、Canvasが提供するのはおもに描画の機能で、アニメーションやインタラクションはJavaScriptライブラリの助けを借りることになる。 そこで本連載では、CreateJS Suiteを選んだ。開発者は、Flashコンテンツの世界で有名な Grant Skinner（グラント・スキナー）氏だ[1]。「ダイナミックでインタラクティブな表現」ともって回った言い方をしたが、つまりは「Flashみないな」ものがつくりたい（つくってほしい）という要求だろう。CreateJSのライブラリ群は、Flashを使っていた人たちにとっては、なじみやすい設計になっている。 また、最近注目されてい
CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
第32回 HTML5によるリッチコンテンツ作成のためのJavaScriptライブラリ「CreateJS」 | gihyo.jp
CreateJSで提供される5つのツール 今回は、4月に公開されたばかりの「CreateJS」を紹介します。CreateJSはHTML5を利用したリッチコンテンツ作成のためのJavaScriptライブラリ/ツール集です。著名なFlashエンジニアであるGrant Skinner氏が開発しており、ActionScriptに似た使用感を実現している点が大きな特徴と言えます。 CreateJSでは、次の5つのツールが提供されています。 EaselJS TweenJS SoundJS PreloadJS Zoe それぞれ、以下のような機能を備えています。 EaselJS EaselJSはHTML5のキャンバス上にコンテンツを描画するためのJavaScriptライブラリです。提供されるAPIがActionScript風になっており、Flash開発者ができるだけ違和感なく利用できるように工夫されてる点
[JS]透過処理をした写真画像の転送量を軽くする方法
通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。 デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。 ;(function() { var create_alpha_jpeg = function(img) { var alpha_path = img.getAttribute('data-alpha-src') if(!alpha_path) return // Hide the original un-alpha'd img.style.visiblity = 'hidden' // Preload the un-alpha'd image var image = document.cre
particles.js - A lightweight JavaScript library for creating particles
particles.js is a lightweight JavaScript library for creating particles.
[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス
最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://vincentgarreau.com/particles.js/particles.js"></script> </body> Step 2: HTML コンテンツの一番下あたりに、粒子の元となる空divを用意します。 <body> ... コンテンツ ... <div id="particles-js"></div> <script src="http://vincentg
![[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/cad2019e6d6cf42b90ad3ce1d63503395565f36b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111405.png)
プログラミング HTML5 Canvas
TOPICS HTML/CSS , JavaScript 発行年月日 2014年07月 PRINT LENGTH 624 ISBN 978-4-87311-687-7 原書 Core HTML5 Canvas FORMAT PDF 本書は、HTML5 Canvasを詳しく解説しながら、ゲームやアニメーションなどの開発に必須の項目を取り上げて実践的な知識とテクニックを提供する解説書です。アニメーションのタイミング仕様など、Canvasに関連するHTML5の側面に深く踏み込み、デスクトップのブラウザとモバイルデバイスで実行できるアプリケーションを実装していきます。はじめにCanvas APIの基本とシェイプやテキストをキャンバスに描画する方法、イメージを描画し操作する方法などを解説し、続いてAPIを使ってアニメーションやアニメーションスプライトを実装する方法、物理シミュレーションや衝突判定、ビ
HTML5 Canvasデスクトップリファレンス
HTML5の一部として仕様が策定されているグラフィック描画のためのJavaScript API、Canvasについて紹介する書籍です。Canvasの2Dオブジェクトの描画に関する簡単なチュートリアルとリファレンスから構成されており、仕様の全体像を簡潔に知ることができます。Canvasでプログラミングをする際には手元に置いておきたい1冊です。なお本書はEbookのみの販売となります。 はじめに 1. Canvasチュートリアル 線の描画と多角形の塗りつぶし グラフィック属性 Canvasの寸法と座標 座標系の変換 座標変換の数学的な理解 座標変換のサンプルコード 曲線の描画と塗りつぶし 矩形 色、透明度、グラデーション、パターン 線を引くための属性 テキスト クリッピング 影 画像 合成 ピクセル操作 ヒット判定 Canvasの実例：Sparkline 2. Canvasリファレンス Can
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
第1回 SVGの基礎知識 | gihyo.jp
SVGは比較的古くからある仕様の1つですが、2010年3月にマイクロソフトがInternet Explorer 9でのサポートを表明してから一気に注目が高まりました。そんな古くて新しいSVGを今から使える情報と、将来の展望を全4回の集中連載で解説します。 SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィック言語もしくは画像フォーマットです。W3Cによってその仕様が定義されており、画像フォーマットとして用いる場合は拡張子.svgが使用され、MIME形式はimage/svg+xmlが用いられます。 SVGの現状 Firefox、Safari、Google Chrome、Operaなどのブラウザが既にサポートしており、Internet Explorerもそのバージョン9、具体的にはInternet Explorer 9: Platform
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本気で使いこなす「SVG」再入門【2015年版】
Chart.js
DeNA Engineering - DeNAエンジニアのポータルサイト
JavaScriptグラフィックス