JavaScript名探偵コナンの「月と星と太陽の秘密」のネタバレになってます!名探偵コナンのアニメ163~164話で出てきた暗号をフォントにしたいと思った。Editorっていうのが入ってたので、それを使って作る。svgで一文字ずつ作らんとあかんねんけど、めっちゃ面倒。こんなに規則性がある文字なのに普通に一文字ずつ作るのは非効率極まりないと思ったので、パスの数値とかはスクリプトから出力することにした。今JavaScriptの書き方しか覚えてないので、それで作る。URLのパラメータでひらがなを指定したらパスのd属性の中身が出てくるようにする。月、星、太陽の大きさをどれくらいにすればいいのかよくわからないので、とりあえず定数として定義しておく。150;後から思ったけど、SUN_MARGINが小さすぎたせいで太陽の丸と放射線がすごく近くなり、太陽が工場の地図記号みたいになってしまった。CIRCLE_HANDLE_RATIOっていうのは、円を描くためのハンドルの長さ。円の半径に対して0.55くらいにしたらいいって下のサイトに書いてくれてあったので、それに従った。9.ベジェ曲線の方向線についての補足それから、URLにくっつけるパラメータは、「char」と「small」の二つにする。charは"a"とか"ni"とかローマ字で受け取る。smallは、「ゅ」「っ」みたいな小文字にするかどうかをtrue/falseで指定。次のようなURLが渡ってくることになる。.../index.html?char=wa&small=trueそれをJavaScriptのwindow.location.searchで受け取って、母音と子音で場合分けしながらパスの文字列を作っていく。SVGの書き方は、私にとってはこのページが一番わかりやすい↓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の状態)になって鬱陶しい。普通に立ち上げると既に無効(たまにまぐれで入力できるときもある)。何か一つパスを選択した状態で立ち上げると、入力できる状態になる。エディタ内でノードを新規作成すると、また無効になる。エディタウィンドウの外側に触れてしまっても無効になる。無効になったら、また開き直すしかない。これって私だけなんかな。検索しても同じような状況の人は全然出てこない。それとも検索力が低いだけ?とにかく、ひらがなのパス全て作成し終えたら、一番めんどいところは終了。Editorを使う作りたいフォントの全般設定(フォントファミリー名とか大きさとかの設定)をしたら、個々のグリフを作成する。http://www.sturnus.net/inkscape/menu/svg_font.html↑このページのやり方を参考にした。(「1文字ごとにレイヤーにしてください」っていうのには従わなかったけど多分支障はなかった)グリフを十分な数追加してマッチング文字列も入力したら、xmlエディタとフォントエディタを突き合わせて一つずつ登録していく。登録するたびにプレビューが一文字ずつ出来上がっていくのが快感。全部登録し終えたらInkscapeでの作業は終了!ttfに変換ttfに変換する前に、svgファイルをテキストエディタで開いて、fontタグのidをちゃんとした名前に変えておく。Converterを使わせていただいた。サイトの見た目がめっちゃかわいいから。ここでもらえたzipファイルの中にttfファイルがあるので、インストールする。使ってみるメモ帳で使った↓ちゃんと暗号になってる!メモ帳やとアンチエイリアスかかってなくて汚いけど、Inkscapeで使ったらきれいなフォントだったので安心。Office系のソフトでは使えないさっきのページによると、なぜかオフィスでは英数字用のフォントになります。この状態では全角文字をこのフォントで表示することができません。