You Look Too Cool

Markdownで簡単にスライドを作れる「slideship」

Markdown記法はかなり浸透してきた気がします。
これを使って簡単にスライドを作れるウェブサイトがあります。 (さらに…)

SVGをPNGに変換するツール（まとめ）

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

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

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

データ

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

サークルパッキング

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

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

ツリーマップ

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

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

サークルデンドログラム

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

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

サンプルデータ

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

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

Railroad Diagram Generator

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

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

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

diagram.xhtml

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

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

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

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

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

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

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の実行状況を確認することができます。

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

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

http://jsfiddle.net/N6rPY/

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