# [スクラッチ上級者講座] 任意のフォントファイル(ttf)から個別のsvg画像に変換してコスチュームとして使う方法 |p2>2020/11/19{1}一般的なttfファイルを使ってスクラッチプロジェクトに導入する方法 svgへ変換オンラインの無料で使えるファイルコンバータを利用して、ttf形式のフォントをsvg(フォント)に変換します。例えば、今回は[Convertio](https://convertio.co/ja/)で変換しました。 ttfをsvgに変換する場合、`SVGフォント`形式に変換されます。まずはこれがどういうものかをさっとおさらいします。 ### SVGフォント？ [SVG Fonts - MDN Doc](https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/SVG_Fonts) SVGでは、Webフォントを定義するための要素``がサポートされています。ただしFirefoxなどでは`woff`などの新しいフォントレンダリング技術の開発に集中する理由で、SVGフォントの実装は現在無期限停止になっている扱いをされている状況ですので、現在はあまり主流には使われていないWebフォント形式となっています。判例を上げると、以下のようになります。 ```xml font1.svg

``` svgフォントは以下のような階層構造をもつ要素です。 ```text svgフォントの各タグ font: フォントの宣言をするコンテナ要素 font-face: フォントに関わる様々な設定情報を記述. フォント名称や太さ・基底線・描画グリッドなど missing-glyph: 対応していない文字に対する形状を定義 glyph: 文字の形状とマッピングテーブルの定義 v-kern, h-kern: 文字のカーニング情報を定義 ``` より詳しい[SVGフォントの説明](http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_16.htm)はそちらのサイトをご参照ください。ここでの結論では、スクラッチのコスチューム画像での登録は一つのコスチュームにつき、静的なsvg画像を一つ割り当てるようにしないと行けないので、スクラッチアプリでこのsvgフォントをそのまま直接使うことは出来ません。ということで、このSVGフォントからさらに`glyph`要素を抽出し、文字を一つ一つ個別のsvgファイルとして取り出す必要があります。 - - - &[self]~[2]~[article]~(1) ## SVGフォントを分割・抽出するシェルスクリプトたとえば先程のttfからsvgフォントに変換したファイルの中で重要なポイントだけ選り抜いて見てみると、 ```xml font2.svg

``` 細かい要素ごとの属性の役割はここでは説明しませんが、[こちらのサイトの解説](http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_16.htm)が詳しいので気になったらそちらで確認してください。まず`font-face`要素のなかで着目すると、今回は`bbox`属性があります。この属性は`全てのグリフ(文字)を欠けること無く描画可能な最小の矩形範囲`だそうですので、個別に文字を描画する際の`viewBox`に設定するのにちょうど良さそうです。次に文字の形状定義を表す`glyph`要素の中身は、グリフの名称・`glyph-name`、文字のユニコード・`unicode`、パス形状・`d`は文字を抽出するのに重要な情報を与えてくれます。では以上の情報から、文字`3`をsvg表示してみます。 svgの描画を試す場合、[軽量なオンラインSVG viewer/editor](https://www.rapidtables.com/web/tools/svg-viewer-editor.html)を利用してみます。 ```xml font3.svg ``` このsvgコードを試すと、 !611*368*[1](article34/__1.jpg) で文字が確かに表示されています。ちょっと例で使った文字が`3`であったので分かりづらいかも知れません。 svgフォントの形式では、ttfでの文字定義と上下の軸方向の正負の取り扱いが逆であるので、ちょうど上下が反転して表示されていまいます。要はいい感じに文字を反転するように、`transform`属性から`translate`メソッドや`scale`メソッド使って調整を入れます。 ```xml font3.svg ``` !423*238*[5](article34/__5.jpg) 文字も上下裏返ったのですが、実はこれだとまだスクラッチで読み込ませた時に不十分です。スクラッチがsvgをインポートする際に、内部のプログラム処理で読み込んだ画像のサイズを`viewBox`、`width/height`属性から優先的に取得するのでかなり大きい画像のように扱われることがあります。上の例では、svg画像が`1024x879`のサイズの画像として扱われるのでコスチューム画像の表示枠外になってしまい表示されません。対策は簡単で、`viewBox`と`width/height`属性はスクラッチをインポートする際には使わないでおくと、スクラッチの内部処理で、svg画像サイズが自動で判別されるようになります。 ```xml font3.svg ``` 以上がスクラッチで読み込ませるsvgフォントの最低限必要な形式なのです。いかんせんプログラムの自動判別で文字の描画配置が設定されるので、表示位置が気に入らない場合には手で個別のコスチュームの位置を移動させる必要も出てくるかも知れません。 ### 抽出するシェルスクリプトここではシェルスクリプトの骨子だけを解説します。 ```bash svgfont_convert.sh #!/bin/bash FILE_NAME=$1 cat "${FILE_NAME}" | sed -e 's/\.\;\,\|\-] ]] || [[ $1 =~ backslash ]]; then svgfilename="spec_char/$1" fi cat << EOF > fonts/${svgfilename}.svg EOF } makeSvgImgUniX() { svgfilename=$(echo -e "$2") cat << EOF > fonts/$3/${svgfilename}.svg EOF } cat tmp.svg | grep -e 'glyph-name' | grep -e 'unicode' | while read line; do glyph_name=$(echo "${line}" | sed -e "s/.*glyph-name=\"$[^\"]*$\".*/\1/") unicode=$(echo "${line}" | sed -e "s/.*unicode=\"$[^\"]*$\".*/\1/" | sed -e 's/&#x$[^;]*$;/\\u\1/') d_shape=$(echo "${line}" | sed -e "s/.*d=\"$[^\"]*$\".*/\1/") if [[ $glyph_name =~ ^uni4 ]] ; then makeSvgImgUniX "$glyph_name" "$unicode" 'uni4' "$d_shape" elif [[ $glyph_name =~ ^uni5 ]] ; then makeSvgImgUniX "$glyph_name" "$unicode" 'uni5' "$d_shape" elif [[ $glyph_name =~ ^uni6 ]] ; then makeSvgImgUniX "$glyph_name" "$unicode" 'uni6' "$d_shape" elif [[ $glyph_name =~ ^uni7 ]] ; then makeSvgImgUniX "$glyph_name" "$unicode" 'uni7' "$d_shape" elif [[ $glyph_name =~ ^uni8 ]] ; then makeSvgImgUniX "$glyph_name" "$unicode" 'uni8' "$d_shape" elif [[ $glyph_name =~ ^uni9 ]] ; then makeSvgImgUniX "$glyph_name" "$unicode" 'uni9' "$d_shape" elif [[ $glyph_name =~ ^uniF(9|A) ]] ; then makeSvgImgUniX "$glyph_name" "$unicode" 'unif9a' "$d_shape" else makeSvgImg "$glyph_name" "$unicode" "$d_shape" fi if [[ $glyph_name =~ backslash ]] ; then #👇バックラッシュ文字は特殊文字の中でも特殊なので特別扱い echo -e "$glyph_name" '\' >> fonts/unicode_table.csv else echo -e "$glyph_name" "$unicode" >> fonts/unicode_table.csv fi done rm -rf tmp.svg ``` これを`svgfont_convert.sh`という名前で保存し、SVGフォントと同じフォルダにこのスクリプトを配置して置きます。 ※このスクリプトはgnu sedを含みますので、MacosxなどのBSD sed標準の環境では、少し修正が必要です。このフォルダ内で早速このスクリプトを実行すると、`fonts`フォルダ以下に個別のsvgフォントと特殊文字を仕分けしたフォルダ`spec_char`、漢字フォントセット`uni4`から`unif9a`、今回出力したsvgファイルとユニコード文字の変換対応表`unicode_table.csv`が出力されていれば成功です。 ```shell $ chmod +x svgfont_convert.sh #👇下は利用例、svgfont_convert.sh $ ./svgfont_convert.sh AP.svg #...数分の処理待ち $ tree . ├── AP.svg └── fonts ├── unicode_table.csv ├── spec_char ├── uni4 ├── uni5 ├── uni6 ├── uni7 ├── uni8 ├── uni9 ├── unif9a #👇以降は特殊文字＆漢字以外の標準フォント ├── ｧ.svg ├── ｨ.svg #...中略 └── №.svg ``` - - - &[self]~[3]~[article]~(1) ## スクラッチでの作業早速先程の個別に抽出したsvgフォントをスクラッチプロジェクトで読み込んでみます。 ### 免責事項前節でも触れましたが、フリーフォントで頂いたものは利用規約を良く読んでからスクラッチプロジェクトで使いましょう。 svgフォントを試す際、スクラッチのプロジェクトに読み込ませる前に、まず読み込ませる先のプロジェクトが非公開にされているか確認しましょう。スクラッチのデスクトップ版を利用してオフラインのプライベートモードで利用しても良いと思います。スクラッチプロジェクトを公開していまうと、誰にでもリミックスされたり、ソースコードの中身からリソースが再利用可能になるので、|px>{2}これが明らかに再配布行為に当たります{2}１つのコスチュームに設定して負荷なく動作する上限はせいぜい200~300個程度