ヴォルフロッシュ

2012年>4月

独自エンジンで動いてるいわゆるブログ

RSS

Vim Replacement Icon

[replacement icon]
Vim replacement icon

代替アイコン作ったよー。ここにきてVimですよ、Vim。

まぁご存知のように根っからのCotEditor愛用者なのですが、それでもEmacsかVimかと訊かれたらVimかなぁ、Terminal上でテキストファイル触らないといけないときはVim使うし。なんてね、まぁ単純にVimのアイコン触りたかった。

[icon]
MacVim original icon
[icon]
Vim logo

今回は基本的な意匠は全く替えないというルールの元に作成しました。独自のアレンジは一切せずに質感だけをモダンでリッチに。

個人的な思想から言うと、アプリケーションアイコンは具象的なモチーフで成り立っているべきだと思っているので、こういう文字だけのアイコンは好きではないのですが(某adobeシリーズとか某MS Officeとか)、これは代替アイコンであり、かつ作成動機が「今のアイコンをリッチにしよう」なのでオリジナルに倣ってます。

作成ツールは相変わらず終始Illustratorで。Illustrator CS3で作るアイコンもこれが最後、次回はCS6だな。

[icon]
32px

基本的にはベースはMacVimなのですが、せっかくマルチプラットホームなVimなので、Windows用のicoファイルも作ってみたり、それ以外にもUnix系でも自前で作れるようにPNGファイルも同梱してあります。最大サイズは1024px。

ダウンロードはdeviantARTから。どうぞよろしく。

CotEditorで画像のbase64埋め込み

webサイトに画像を表示させるときに、HTMLやCSSで画像ファイルのパスを指定してを呼び出すのではなく、画像ファイルをテキスト形式にエンコードしてそれを直接ソースに記述するという方法があります。

たとえばCSSで画像を追加したいとき、普通は

h2::before { content:url(../images/file.png) }

のように、CSSファイルから挿入したい画像のファイルのパスを指定しますが、画像データをbase64という形式でテキスト化することにより以下のように書くことができます。

h2::before { content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALBJREFUeNpiZACCyorK/9LS0gzo4P379x/evn3rMGHihIsoEpMmTvr/588fDLx+/fr/3V3d7/Ny8/RhaplAxL9//xj+//+PgTk5ORmysrMEZGSkD+RkZ+sjafiLVcP3798Zdu7cySAtIyPAzMx8AKSWBdkGdODs7AyWA4Enjx8LENTAxsYGZzMyMjIQ1IAMYDYNUg2ijx4+ZOjp7sarARhKIEoc5HVxIOZnIA58AQgwABZHliIIeBqFAAAAAElFTkSuQmCC) }

これで、この場合は file.png という画像データをテキスト形式で記述したことになり、これ以上サーバに file.png のファイルを上げる必要もありません。

CSS/HTMLファイルに直接画像も記述してしまえばそこから"画像ファイルを呼び出す" というトラフィックがなくなるので、サーバ負荷の軽減・表示速度の向上に繋がる、というテクニックです。大きい画像はテキスト化するとえらいことになるので、リストのマーカー画像や繰り返しの背景素材のような小さな画像データに向いています。

まぁ、詳しくはその辺を丁寧に解説してるサイトを検索して読んでください(雑)

CotEditor
CotEditor

本題は、「それをCotEditorでやるマクロを書いたから配布するよ」っていう方です。CotEditorのスクリプトメニューから実行するとファイルを選択するダイアログが出るので、挿入したい画像ファイルを選ぶとカーソル位置にbase64にエンコードされた画像データが挿入されます。Terminalを触ったりオンラインプログラムに頼ることなく、CotEditorだけで作業が完結するので、画像のテキスト埋め込みが気軽にできるようになるのではないでしょうか。

[screen shot]
screen shot: ダイアログから選択した画像をbase64エンコード

当サイトのCotEditor用マクロ配布ページからダウンロードできるようにしました。

画像データのbase64化というのは実はSVGでラスター画像を扱う上で重要な要素で、このスクリプトもSVG Suite用に書いたものが元なのですが、多分SVGをCotEditorで書くより画像のCSSファイル埋め込みの方が需要があると思われるので、単発の選択画像をbase64にエンコードするだけの版を作成しました1。良ければお使いください。

  1. SVG Suiteに入っている版は画像の縦横のサイズも拾った上で<image>タグを生成します。

Shareボタン

share buttons
share buttons

せっかくソーシャル・アイコンとか作ってるんだし、と色気を出してShareボタンなどを付けてみた。

しかし、設置しておいてなんだが私はこのボタンの意義がよく解っておらず、「そのサービス使ってるなら別にこっちで用意しなくてもそのサービス経由でシェアする手段1も得てるはずでしょ」と思うのだが、これだけボタンがはびこってるのをみるとそうでもないのかもしれない。

ひとまずページ下部に雑に置いたので、細かい配置は今後変わるかもしれない。納まりが良いのはサイドカラムだけど、機能を思うとページ下端であるべき。それにサイドカラムに出しているのはコンテンツレベルの機能2であり、メインカラムが各ページに属するの情報。一応気を使ってるんです。

当サイトで配布してるアイコンはPNG形式だけど自分で使ってるのはしれっとSVG形式だったり。

カウンタは見栄えが悪く邪魔なので非表示。ただfacebookだけは技術的にカウンタ外せなかった。そんくらい選択肢用意しておいて欲しい。

  1. Bookmarkletとか。
  2. 正確に言うと、サイト検索とAuthorはサイトレベルの情報なのでちょっと遺憾に思っている。