SVGの方のチャートライブラリ「C3.js」をGettingしてStartedする - クモのようにコツコツと
以前、JSで図（チャート）を作るライブラリとしてCanvasベースの「Chart.js」をGettingしてStartedしました。そのときにもう一つSVGベースのライブラリ「D3.js」も候補で考えていたのですがChart.jsと比べて少し敷居が高く感じてました。 その後、D3.jsベースでチャート機能に特化して作られた「C3.js」の存在を知りました。SVGがどんなものなのかも気になっていたので、さっそくGettingしてStartedしたいと思います！ ※目次： SVGとCanvasの違い C3.jsの公式サイト CSSとJSファイルの読み込む コードを貼ってみる JSを読み解く CSSを変えてみる。 SVG要素が書き出されていた 最後に ※参考：JSライブラリとは？ 【卒jQueryへの道】生JSとライブラリとフレームワークの理解 - クモのようにコツコツと ※参考：Canvasベ
Canvas と SVG の性能について
ただし，SVG 部分までスクロールするとかなり重くなり，なかなか表示されない． 特に，タブを切り替えてまた戻ってくるときにもしばらく待たされる． さらに，関係ないタブまで表示が遅くなったりする． Chrome 一度描画されれば，SVG 部分も Firefox の場合ほどは重くない． Microsoft Edge 複数回再読込したあげく，表示に失敗した． なお，SVG 描画を無効にして読み込むと，canvas 部分は正しく描画される． 結論 canvas はビットマップベース，SVG はベクターベースという違いはあるため，単純には比較はできないものの（SVG のほうが，見た目は高精細になる） 10 万本もの直線を描画する必要がある場合は，SVG を用いると処理が重くなりすぎるため，canvas を使ったほうがよさそうである． コード 以下のコードを実行すると， <!DOCTYPE html>
オンライン地図のベクトルデータにはSVG？それともCanvas？ - 自然環境保全のための周辺技術
これまで自然環境の調査には地図が重要だよねという名目のもと、地図画像→ラスター→GDAL関係の記事ばかりだったのですが、これからは地図に載せるデータの取得方法をなんとかしなければという気になっています。それで、Google Maps とか OpenLayersは、ベクトルデータをどのように扱っているのか調べました。 で、その結果ですが、ベクトルデータの描画にGoogle MapsはCanvasで、OpenLayersはSVGを利用しているということが分かりました。厳密に言うと「Google Maps は昔はSVGだったけど今はCanvasで、OpenLayersはSVGを推奨しつつCanvasにも対応している」になります。CanvasとSVGの違いは、PhotoshopとIllustratorの関係と同じで、素直に考えれば地図データ用のベクトルデータはSVGがいいような気がします。Open
HTMLとCSSでSVGを使うためのメモ - Qiita
Qiita初投稿です。 2014年にフリーランスとなってからというもの、なかなか勉強の時間がとれず、おざなりになってしまっている技術がいくつかあります…… その中でもSVGの扱い方について、簡単にではありますが調べたのでメモしておきます。 昨日までの自分に教えるような気持ちで書きます！ まず、SVGは使えるのか？ ブラウザ対応状況 Can I use... Support tables for HTML5, CSS3, etc だいたい大丈夫です（2016/07/27現在） IEも9以降であれば表示はできるっぽいです。 メリット 拡大・縮小に強い（きれい） 軽い 使い方によってはCSSで装飾したり、アニメーションさせることも可能 アクセシビリティ上も良いことがある（まだあまり調べてない） デメリット 写真やイラスト等には向かない（どんな画像かによる。これまでGIFやPNGで書き出していたタ
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
『WP-PostViews』の使い方と設定方法 | メルプラ
WP-PostViewsの主な機能 WP-PostViewsの主な機能です。 投稿した一般記事・固定記事の閲覧数を閲覧できる。 閲覧数で記事をソートすることができる。 専用のウィジェットを利用できる。 インストール方法 「WP-PostViews」は公式ディレクトリに登録されているプラグインです。 公式ディレクトリからプラグインをインストールします。 インストールの方法が分からない方はこちらを参考にしてください。 閲覧数の表示 プラグインを有効化すると記事の管理画面に閲覧数（表示数）が表示されるようになります。 ここで表示される「表示数」はプラグインを有効化してからの閲覧数です。 それまでの表示数はカウントされないので注意してください。 この表示数は手動で非表示にすることも可能です。 投稿画面の右上にある「表示オプション」をクリックします。 表示されたオプションの「カラム」にある「表示数」
WordPress4.0から使えるようになった複雑な’oderby’を使ってみる
クエリーのパラメータに以前より指定した項目の値で投稿をソートする’orderby’というのがありました。記事の表示一覧などを作成するときに、表示順を指定したりするのに使用しますが、WordPress4.0からこのパラメータに複数の値を指定できるようになっています。どういう風に強化されたかというと、例えばタイトルと日付の２つの値で表示順を指定できるので、タイトルは昇順で日付は降順をいった指定ができます。指定は以下のようにします。 $args = array( 'orderby' => array( 'title' => 'ASC', ‘date' => 'DESC' ) ); $query = new WP_Query( $args ); この場合どのように並ぶかというと、左の記述から優先的に並べるので、例えば同じタイトルが複数あった場合は（同じタイトルの中で）日付の新しいもの順に並べるとい
カテゴリー順番変更!整理が簡単！ワードプレスのプラグインのやり方
ワードプレスのカテゴリーの順番って変えれないのかなーって思って調べました。 ブログのカテゴリーの数が多くなってくるとカテゴリーAの上にカテゴリーSを置いたほうが見栄えがいいなーとか出てきますよね。 今回はwordpressのカテゴリーの順番を簡単に変えるプラグイン [Category Order and Taxonomy Terms Order]のやり方や設置方法をまとめてます。 カテゴリー順番変更プラグイン！ワードプレスにインストール方法 ワードプレスのカテゴリーの順番を変更するプラグインCategory Order and Taxonomy Terms Orderのインストール方法の説明です。 プラグインの新規追加に行って，キーワードのところからCategory Order and Taxonomy Terms Orderを入力、今すぐインストールを押して、有効にしてください。 Cat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://twitter.com/i/web/status/1027874901221244929