僕はほぼ絵心の無い人間ですが「他人からのファイルの受け渡し用」という受動的な理由で、アドビのイラストレーターを所有しています（なので機能的には十分なCS3で既に更新をストップ）。でも以前からたまに、このWEBページに簡単な説明図等を載せたいと思う時があって、そういう時に手軽に使えるお絵書きソフトみたいなもの無いかなあ、と考えていました。
それとは別件で、iPod touchを購入してから、やはりRetinaディスプレイの都合も少し考えるようになって、WEBページで高解像度の画像を手軽に扱いたい…という要求への一つの回答に「ロゴとか簡単なイラストなら、SVG画像を使えばイイんじゃない？」とアドバイスがありました（関連雑誌読んだだけ）。そう言えば、だいぶ昔にSVGとかいうファイル形式のことを聞いたことがあります。
iVinciが見事ストライク
「簡単な図を描きたい」＆「SVGファイルを扱いたい」という２つの要求は、もちろんイラストレーターで十分に叶えられるのですが（CS3にもSVG出力オプションがあった）、食わず嫌いなのか端から能力が欠如しているのか、どうしもてイラストレーターを起動して操作する気にはなれず、アドビ以外に何かお気楽アプリは無いだろうか…と先日、Mac App Storeをブラブラ徘徊していたら、全く偶然に発見。
前回とか前々回とか、第５９回で掲載したあまりにもラフな説明図は、この「iVinci」で作成したものです。まず「iVinci Express」という無料の機能省略版を試してみて「これならイケる！」と感じ、ビットマップイメージのトレース等も可能な高性能版を購入した次第。詳しい機能や操作方法についてはコチラの開発者サイトをご覧下さい。もう素晴らしいです、アイヴィンチ！
それにしても「Draw」と検索しただけで、おびただしい無数のアプリが表示された中、それらの解説を斜め読みしつつ、１０番目くらいに全く偶然に「iVinci」に巡り合えたのはホントにラッキーでした。如何にして目的のアプリに辿り着くかが依然として問題のApp Storeだけれど、怪しいアイコンをスルーしなくて良かった。ちなみに検索を開始してからExpress版を試し、購入を決意するまでに２時間くらい。
SVG画像をWordPressで扱う（Scalable Vector Graphics (SVG)プラグイン）
いつものようにテキトーに図を描いてみて、それを素直に.svgファイルで保存。それをWordPressにアップロードしようと思ったのですが、WordPressがSVGファイルを認識しません。FTPで直接アップロードしてもライブラリに現れない。そこで「Scalable Vector Graphics (SVG)プラグイン」をインストールし有効化すると、普段使用しているWordPressのアップローダーでも認識されるようになりました。ただし、画像のファイルサイズは自動認識されないので、ページに埋め込んだ後に手動でwidthとheightを書き込む必要があります。
.htaccessの設定
無事アップロード出来たので早速ページに埋め込んでみたものの、そのエリアは全くの白紙状態。ググって調べてみると、SVGをサイトで表示させるには.htaccessファイルにその旨（MIMEタイプの設定）を書き込んでおかねばならないのだとか。昔々CGIを動作させるのに弄ったことがあるくらいですっかりご無沙汰している.htaccessファイル。まず「Coda 2」で当サイトのサーバーにアクセスしてみたのだけれど、まあ、.htaccessファイルが見当たらないわな。以前、FTPアプリに「Cyberduck」を使っていた時は見えてたのに…と思って調べてみたら、「Coda 2」の場合はメニューの「表示」＞「不可視ファイルを表示」で見えるようになりました。ちなみに「Transmit」の場合も同様。
ローカルにダウンロードした.htaccessファイルに「AddType image/svg+xml .svg」と「AddType image/svg+xml .svgz」の２行を追加（miを使用しましたが、もちろんCoda 2でも編集可能）。改行コードはLF。先頭の２行は以前に追加したCGIを動かす為のもの（↓）。上書きアップロードして、パーミッションを604に設定。ちなみにWordPressも.htaccessファイルに何か書き込んでいるようなのですが、それは削除しない。
.htaccessに追記
Options +ExecCGI AddType application/x-httpd-cgi .cgi .pl AddType image/svg+xml .svg AddType image/svg+xml .svgz
その他メモ
これでSVG画像ファイルが表示されるハズ！と思ってページをリロードしてみると、これがまた白紙状態。何を間違えたかといろいろチェックし直してみたけれど思い当たらず。で、ふと「iVinci」で作成した画像にはテキストをレイアウトしてあって、それがマズかったのではないかと思い、再度ファイルを開いて「Modify」＞「Convert Text to Path」で文字列をパスに変換。これで無事表示されるようになりました。
その他の注意点としては、iVinciのシャドウ機能はSVGに反映されないという点。第５９回の冒頭に掲載した説明図にはドロップシャドウが付いていますが、それはPNGで書き出したもの。今回の冒頭のイラストはAutomatorアプリのアイコンをキャプチャしたものをiVinciで読み込んで、それを「Live Trace」したものです。背景とテキストのグラデーションはSVGでも大丈夫。Safari上で拡大しても綺麗に表示されるのが嬉しい。今回のファイルサイズは288KBとちょっと大きいですが、それはトレースしたままのものをレデュースせずに使用したせい。前回冒頭の画像は48KBです。つづく。
当サイトの右上に配置している「FLFL」のロゴ。公開当時から等倍サイズのjpgのままなので、拡大するとぼやけてしまう残念仕様なのですが、そのうちSVGファイルに差し替えたいと思います。写真画像などのRetina対応はまだ効率的な方法が分からないので先送り。
2014-06-07 ＞ VPS＆WordPress引っ越しメモ