名探偵コナンの「月と星と太陽の秘密」のネタバレになってます！
名探偵コナンのアニメ163～164話で出てきた暗号をフォントにしたいと思った。
これがコナンくんが作成した解読表↓
InkscapeにSVG Font Editorっていうのが入ってたので、それを使って作る。
svgで一文字ずつ作らんとあかんねんけど、めっちゃ面倒。こんなに規則性がある文字なのに普通に一文字ずつ作るのは非効率極まりないと思ったので、パスの数値とかはスクリプトから出力することにした。
今JavaScriptの書き方しか覚えてないので、それで作る。URLのパラメータでひらがなを指定したらパスのd属性の中身が出てくるようにする。
スクリプト作成
月、星、太陽の大きさをどれくらいにすればいいのかよくわからないので、とりあえず定数として定義しておく。
// 全体 var SIZE = 1000; var CIRCLE_HANDLE_RATIO = 0.55; // 文字本体 var MOON_DIAMETER = 760; var STAR_DIAMETER = 800; var SUN_DIAMETER = 530; var SUN_MARGIN = 50; var RADIATION_LENGTH = 110; // 文字についてくる丸（濁点, 半濁点, 右下の丸） var ATTACHED_CIRCLE_DISTANCE_FROM_CENTER = 380; var ATTACHED_CIRCLE_DIAMETER = 150;
後から思ったけど、SUN_MARGINが小さすぎたせいで太陽の丸と放射線がすごく近くなり、太陽が工場の地図記号みたいになってしまった。
CIRCLE_HANDLE_RATIOっていうのは、円を描くためのハンドルの長さ。円の半径に対して0.55くらいにしたらいいって下のサイトに書いてくれてあったので、それに従った。
それから、URLにくっつけるパラメータは、「char」と「small」の二つにする。charは"a"とか"ni"とかローマ字で受け取る。smallは、「ゅ」「っ」みたいな小文字にするかどうかをtrue/falseで指定。
つまり、次のようなURLが渡ってくることになる。
.../index.html?char=wa&small=true
それをJavaScriptのwindow.location.searchで受け取って、母音と子音で場合分けしながらパスの文字列を作っていく。
SVGの書き方は、私にとってはこのページが一番わかりやすい↓
出力は、パスのd属性の中身だけでなく、それをsvgで実際に描画したものも出したい。
なのでindex.htmlには、描画したのを見せるためのsvgとd属性の中身出力用のpタグ、両方を置いておく。
実際にパラメータを入力してみると、以下のように出てきた。
char=gi&small=falseのとき
char=yu&small=trueのとき
これを見ながらさっきの定数を調節して大きさをいい感じにしたら、JavaScriptでやることは完了！
Inkscapeに移す
それでは、JavaScriptで出力されるd属性を使って、実際にInkscapeでパスを作っていく。
Inkscapeのxmlエディタを使って一文字ずつ作成していく。そして、ストロークをパスに変換して、塗りつぶす必要のあるやつ（え段、お段とか）は適宜塗りつぶす。この作業がめっちゃくちゃめんどくさかった。もしかしたら初めからInkscapeだけで描画してた方が早かったんかも…。
それから、xmlエディタの入力欄は、すぐ無効（disabledの状態）になって鬱陶しい。 普通に立ち上げると既に無効（たまにまぐれで入力できるときもある）。何か一つパスを選択した状態で立ち上げると、入力できる状態になる。 エディタ内でノードを新規作成すると、また無効になる。エディタウィンドウの外側に触れてしまっても無効になる。一旦無効になったら、また開き直すしかない。
これって私だけなんかな。検索しても同じような状況の人は全然出てこない。それとも検索力が低いだけ？
とにかく、ひらがなのパス全て作成し終えたら、一番めんどいところは終了。
SVG Font Editorを使う
作りたいフォントの全般設定（フォントファミリー名とか大きさとかの設定）をしたら、個々のグリフを作成する。
http://www.sturnus.net/inkscape/menu/svg_font.html
↑このページのやり方を参考にした。（「1文字ごとにレイヤーにしてください」っていうのには従わなかったけど多分支障はなかった）
グリフを十分な数追加してマッチング文字列も入力したら、xmlエディタとフォントエディタを突き合わせて一つずつ登録していく。登録するたびにプレビューが一文字ずつ出来上がっていくのが快感。
全部登録し終えたらInkscapeでの作業は終了！
ttfに変換
ttfに変換する前に、svgファイルをテキストエディタで開いて、fontタグのidをちゃんとした名前に変えておく。じゃないと後々後悔する( ;∀;)
ttfに変換してくれるフリーのWebサービスはいくつかあるけど、Online Font Converterを使わせていただいた。サイトの見た目がめっちゃかわいいから。
ここでもらえたzipファイルの中にttfファイルがあるので、インストールする。
使ってみる
メモ帳で使った↓
ちゃんと暗号になってる！
メモ帳やとアンチエイリアスかかってなくて汚いけど、Inkscapeで使ったらきれいなフォントだったので安心。
ただ、二つ問題点がある。
1. Office系のソフトでは使えない
さっきのページによると、
なぜかオフィスでは英数字用のフォントになります。この状態では全角文字をこのフォントで表示することができません。調査中です。
とのこと。なのでWordでも使えず残念。
2. 他のフォントと並べると縦方向の位置がずれてる
作ったフォントに登録されてない文字（つまりひらがな以外全部）を入力すると、別のフォントで補ってくれる。ただ、そうやって並ぶと、下の画像のように縦位置がすごいずれてるのがわかる。
何が原因なのかはよくわからん。
配布
ここにttfファイル置いてあるので、よかったらどうぞ(*'▽')
