SVGをPNGに変換するツール(まとめ)

ウェブ上でSVGファイルをPNGファイルに変換することができるツールを紹介します。
最初の「SVG to PNG」がベストだと思います。 (さらに…)

チャートが簡単に作成できる「RAW」

CSVを与えるとチャートを自動的に作成するウェブサイトです。
円グラフや棒グラフとは違うグラフを描くことができます。
登録が不要なので手軽に使うことができます。
Raw
試してみます。

データ

データはCSVで与えます。1行目は見出しです。日本語がそのまま使えます。
サンプルも用意されていますが、分かりにくいので、日本の都道府県に関するデータを準備しました。記事の末尾に載せました。

サークルパッキング

次の通り設定しました。どんなチャートができるか。

  • LAYOUT
    • CIRCLE PACKING
  • MAPPING
    • HIERARCHY
      • 地方,都道府県
    • SIZE
      • 人口

circle_packing

ツリーマップ

次のように設定してみます。「ツリー」ですが木の形になりません。

  • LAYOUT
    • TREEMAP
  • MAPPING
    • HIERARCHY
      • 地方,都道府県
    • SIZE
      • 人口

treemap

サークルデンドログラム

次のように設定してみます。「デンドログラム」とは何でしょう? 耳慣れません。

  • LAYOUT
    • CIRCLE DENDROGRAM
  • MAPPING
    • HIERARCHY
      • 地方,都道府県

北海道北海道東北青森岩手宮城秋田山形福島関東茨城栃木群馬埼玉千葉東京神奈川中部新潟富山石川福井山梨長野岐阜静岡愛知三重近畿滋賀京都大阪兵庫奈良和歌山中国鳥取島根岡山広島山口四国徳島香川愛媛高知九州福岡佐賀長崎熊本大分宮崎鹿児島沖縄

サンプルデータ

都道府県,地方,人口
北海道,北海道,563
青森,東北,144
岩手,東北,139
宮城,東北,236
秋田,東北,115
山形,東北,122
福島,東北,209
茨城,関東,298
栃木,関東,202
群馬,関東,202
埼玉,関東,705
千葉,関東,606
東京,関東,1258
神奈川,関東,879
新潟,中部,243
富山,中部,111
石川,中部,117
福井,中部,82
山梨,中部,88
長野,中部,220
岐阜,中部,211
静岡,中部,379
愛知,中部,725
三重,中部,187
滋賀,近畿,138
京都,近畿,265
大阪,近畿,882
兵庫,近畿,559
奈良,近畿,142
和歌山,近畿,104
鳥取,中国,61
島根,中国,74
岡山,中国,196
広島,中国,288
山口,中国,149
徳島,四国,81
香川,四国,101
愛媛,四国,147
高知,四国,80
福岡,九州,505
佐賀,九州,87
長崎,九州,148
熊本,九州,184
大分,九州,121
宮崎,九州,115
鹿児島,九州,175
沖縄,九州,136

EBNFから図を描く「Railroad Diagram Generator」

前に「EBNFの記法」でEBNFから画像に変換する仕組みを紹介しましたが、今回は別のサイトを紹介します。

Railroad Diagram Generator

このサイトでは別の記法を使います。詳細は省きますが、正規表現のような記法です。こちらの方が分かりやすいかもしれません。

attr-stmt

上のような図が描かれます。線路図に似ているので「Railroad」と名付けられています。

試しにDOT言語の文法をEBNFで記述して図を描いてみました。
PNGで出力することができますが、ここではXHTMLで出力してみました。図が埋め込まれて一つのファイルで出力されます。

diagram.xhtml

GoogleのスプレッドシートでJavaScriptを使う

GoogleのスプレッドシートはExcelに似た感覚で使えて便利です。
しかもJavaScriptが使えます。
これを使えばユーザー定義関数などを作ることができます。
過去にJavaScriptで作った関数がそのまま使えるケースも多いでしょう。 (さらに…)

サンプル画像を作る「Placehold.jp」

サンプル画像を作成するサイト。日本製です。

Placehold.jp|ダミー画像生成 モック用画像作成

サイトの使い勝手がよいので特に説明は必要ないかもしれませんが。 (さらに…)

Pocketの使い方

pocket

「後で読む」系のサービス「Pocket (Formerly Read It Later)」の使い方です。

ネットなどで「後で読みたい記事」を見付けたときにPocketにその記事を登録します。
基本的にURLを送信すればOKです。
あとは、PocketにはウェブサイトiPhoneアプリなどがあるので、暇なときに開いて読むだけです。

特徴としては、記事の登録が簡単である点が挙げられます。 (さらに…)

名言集「1000 Word Dressing」

有名人の名言や面白い言葉を表示するページを作りました。

1000 Word Dressing

「サウザンワードドレッシング」と読みます。もちろんサウザンアイランドドレッシングの捩りです。
「千の言葉」というつもりですが実際は今のところ269個。
なるべく普通の名言集に載っていない言葉を集めているつもりです。

サイズを指定してサンプル画像を作る「Dummy Image」

HTMLを書いていてサンプル画像が必要な場合があります。
URLにパラメータをセットすることで自由にサイズを指定したり文字列を描いたりできるサイトがあります。

Dynamic Dummy Image Generator - DummyImage.com

http://dummyimage.com/200x140/000000/ffffff
これが基本的な書き方になります。サイズ、背景色、文字色の順に指定します。
「000000」は黒、「ffffff」は白です。

http://dummyimage.com/200x140/123/def
色は6桁で指定するのが基本ですが3桁で指定することもできます。

http://dummyimage.com/200x140/112233/ddeeff
「123」は「112233」と同じ意味です。

http://dummyimage.com/200x140/12/ef
2桁で指定することもできます。

http://dummyimage.com/200x140/121212/efefef
「12」は「121212」と同じ意味です。

http://dummyimage.com/200x140/1/f
1桁で指定することもできます。

http://dummyimage.com/200x140/111111/ffffff
「1」は「111111」と同じ意味です。

http://dummyimage.com/200x140
色を省略すると背景色がグレー、文字色が黒になります。

http://dummyimage.com/200x140/000000/ffffff&text=ABC
「&text=」で文字列を指定できます。

http://dummyimage.com/200x140/000000/ffffff&text=A+B+C
スペースは「+」です。

http://dummyimage.com/200x140/000000/ffffff&text=漢字
漢字も使えます。

jsFiddleを使う

jsFiddleというサイトがあります。

Edit this Fiddle - jsFiddle

色々な環境でJavaScriptやCSSの実行状況を確認することができます。

jsFiddle

左上にHTML、右上にCSS、左下にJavaScriptを入力します。
右下に実行結果が表示されます。

特徴の一つに、実行させたHTMLやJavaScriptをそのまま保存してURLで共有できる点があります。
試しにやってみました。ブラウザによっては動作が不安定ですが。

http://jsfiddle.net/N6rPY/

サンプルを他人に見せたり実行してもらったりしたいときに使えます。

動物が浮かび上がる「Koalas to the Max dot Com」

変なサイトを見付けました。

Koalas to the Max dot Com

最初は一つの円ですがマウスをのせると四つに分裂します。分裂した円はさらに四つに分裂します。
これを繰り返すと最終的にある動物が浮かび上がります。
なぜタイトルが「コアラ」なのか。

古い記事

タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報