ファビコン作成ツールの開発（手作業編）

◎構想記録　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・ＳＶＧでデザインする　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・ブラウザのフォントを使う方法を考える　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・とりあえずはサーバのフォントでも可　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・イメージマジックでファビコンに変換する　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

◎当面の目標　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・ブラウザでデザインしてico ファイルを作れるツールを目指す。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・テキストエディタで書き、ブラウザでデザインを確認し、サーバでコマンドを叩いてico ファイルを作る（手作業編）に変更　　　　　　　　　　　　　　

◎ＴＯＤＯ　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・ブラウザで画像を確認してもサーバでのフォントが違うので思ったような画像にならない。これを克服する方法を探る。　　　　　　　　　　　　　　　　
　　・Windows でImageMagick を使う。（自動化できないので却下）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　・サーバーとＰＣに同じフォントを入れる（フリーフォントの入手が困難）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　・Webフォント を使ってみる　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　・サーバのImageMagickでIPAフォントを使う方法を調べる　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　・ブラウザでpng に変換し、それをサーバーに送って変換する（これならフォントの自由度が増す）　　　　　　　　　　　　　　　　　　　　　　　　
　　・ブラウザで作成した画像をbase64で取り出し、サーバに送り、ico に変換してダウンロードできるようにする（ベスト）　　　　　　　　　　　　　　
・背景を透過にする（下記参照）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・データ化した文字列が既にフォントのアウトライン情報を含んているか確認する（サーバにないフォントを使う：MS 明朝 ）　　含んでいない　　　　　　
・一回変換したものをもう一度変換して文字列が既にフォントのアウトライン情報を含んだpng 画像にする方法を探る　　　　　　できた　　　　　　　　　
・２段階のデータ化をシンプルにできないか確認　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・ＰＣ（ブラウザ）で使えるフォントの一覧を取得する（無理そうなので、ＯＳ上のアプリで調べて文字列をコピペとする方向）　　　　　　　　　　　　　
・Webフォントのサブセット化を検討する（node.js：fontmin、python：fonttools）　　 icoファイル作成ツールには不要。他のツール開発で検討　　　　　

◎作業記録　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・svg ファイルを作成　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・サーバーにImageMagickをインストールしてconvertでico に変換。予想通り、フォントが違い位置がずれている。　　　　　　　　　　　　　　　　　　　
・WindowsにImageMagick をインストールしてconvertでico に変換。フォントファミリーを指定してもブラウザと出来上がりとでフォントが違う　　　　　　
・WebフォントでIPAフォントを指定してブラウザで反映した画像を表示できた。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・サーバーにIPAフォントをダウンロードして配置したがImageMagickのconvert で反映する方法が見つからない　　　　　　　　　　　　　　　　　　　　　
・ダウンロードしたフォントをfc-cache -fvで反映　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・svgのWebフォントの設定とインストールしたフォントの名前を一致させ。ブラウザとコマンドラインでフォントを一致させることができた。　　　　　　　
・convertで-transparentを使って透過できた。-fuzz 10%のように指定すると近い色も透過してくれる　　　　　　　　　　　　　　　　　　　　　　　　　
・ここまでのまとめ convert -font "fontdir/fontfile.ttf" source.svg -fuzz 0% -transparent color destination.ico　　　　　　　　　　　　　　　　
・ブラウザで表示したSVGは var svgData = new XMLSerializer().serializeToString(svg);でデータ化し　　　　　　　　　　　　　　　　　　　　　　　
・それを "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData)));のように文字列化すればconvertで変換できる 　
・この方法ではsvgのままで、convertでフォントからアウトラインに変換されるらしいことが分かった　　　　　　　　　　　　　　　　　　　　　　　　　
・これで得られた文字列を使ってimg を表示し、それから別のcanvasを使ってデータを取り出すとフォントが既にアウトラインに変換されることを確認した　
・１段階でできることを確認した　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

＜ＴＯＤＯと状況＞