しろもじ様製のスクリプトでフォントを作るテスト

 Bloggerをメモ帳代わりにするテストを兼ねる。

はじめに

 正確には、mashabow様のサイトにて公開されている(感謝)手書きフォント作成スクリプトを使って、自作フォントを作るテストです。
 なぜテストを行うかというと、手書きフォント作成の様子がニコニコ動画に投稿されたのが2008年であり、私の使っているUbuntu13.04(2013年4月)環境でスクリプトが動くのか、確認する必要があったためです。せっかく先人がスクリプトを書いてくれても、システムの仕様変更などが原因で使えないこともあります。
 結論としては、スクリプトは問題なく動作しました。

フォント作成における基礎知識は、FontForgeの解説ページを読めば把握できます。日本語訳されているので、ひと通り目を通しておくとよいです。最低限、初歩的な概念あたりを記憶に留めておくと、用語の混乱が少なくなって作業もスムーズになると思います。

 最終目標はMagi-Cursiveフォントの作成です。

スクリプトの動作を確認

 スクリプト操作が大半を占めるので、ほとんどの作業はターミナル上で行います。
 まずはじめに、ダウンロードさせていただいたスクリプトが、Ubuntu13.04環境で動くか試してみようと思った……のですが。
 我が家にはプリンターがありません。当然、スキャナーも持っていません。
 これでは手書きフォントが作れません!
 そういうわけで、グリフをGIMPで描いてスキャン済みデータをでっちあげることにしました。
 作業開始します。

 各手順で必要なアプリケーションを導入していますが、作業前にまとめてインストールしたければ
 sudo apt-get install fontforge inkscape potrace
 としても良いと思います。


 さらに、独自の変更や作業途中に生成されるファイルがわかりやすいように、gitリポジトリで解凍直後のスクリプト群を保存。
 codeディレクトリに、文字割り当て表とUnicodeコードポイント変換リストが入っていることを確認。
 （magi-cursiveには半角カナは必要ないので、いずれこの2つを改造することになります。）

 pdfファイルの自動生成が上手く行くかテスト

 作業ディレクトリ位置は、ディレクトリcode/とsheet/が見える位置なので、解凍して得られるディレクトリのtfssss/tegakiの位置なので移動。
 第一引数に文字割り当て表へのパスを指定。
 例： perl codesheet.pl code/half.txt
 sheetディレクトリ内にhalf.pdfが作成されていれば成功です。

 文字を書く

 ｐｄｆファイルをGIMPで開いて、文字を書き込んでいきます。
 読み込み時にピクセル数を変更。幅を合わせると 高さがはみ出ます。後で問題があれば調整するということで。
 ペンタブがあるので楽ですが、 解像度の低さと文字の下手さで不安になります。
 適当に切り上げて、
 元サイト様では、スキャンの際に枠線が消えることを狙っています。手書き文字と位置ズレ修正用のマーカーだけが残っていればよいはずなので、枠線などpdf ファイル経由の画像を消した画像ファイルを作成。
 スキャン済み画像の仕様は、約1654x2291pixelのpgm画像で良いのでしょう。
 書いたフォントをGIMPからエクスポート。ファイル名をhalf.pgmとして拡張子でpgmを指定し、RAWを選択して保存。

分割

 出力先ディレクトリout/temp/とout/pgm/は、あらかじめ作っておかなければならないようです。
 perl glyphsplit.pl sheet/half.pgm code/_half.txt 

ベクタ化

 出力先ディレクトリout/svg/を作成。
 potraceをインストール
 sudo apt-get install potrace
 以下のように実行
 perl pgm2svg.pl 1 0.9
 引数の値は元サイト様を参考（そのまま）に。引数はオプションだと思っていたのですが、指定してやらないと、スクリプトが出力を吐き出しません。

 フォント化

 FontForgeをインストールします。Perlは大抵のLinuxディストリビューションなら標準搭載ですが、FontForgeはインストールしなければなりません。
 sudo apt-get install fontforge
 としてインストール。
  fontforge generate.pe
 で終了。

 Magi-Cursiveを作ろうと思って久しぶりにPuella Magi WikiのRunesページに行ったら、手書きフォントがリンクされている！（続く？）

Magi-Cursive ファンフォントのデザイン案(文字は"Puella")

Blogger ブログ記事を読みやすくするためのCSS設定ほか

 Bloggerのテンプレートを使いながらブログ記事を読みやすくするために行った、部分改造の方法を紹介します。

 主なカスタマイズは以下のとおり。
・文字サイズを変更
・画像に枠をつける
・ 閲覧済みページヘのリンク色を標準的な紫色に変更
・Google検索結果に表示されるページタイトルを変更

CSS記述により見た目を変更

 このブログには、Bloggerの標準的なテンプレートを使っています。ブログ作成時に選べるテンプレートのサンプルから、一番しっくり来た青色ベースのテンプレートを選びました。
 ネット上に数多くあるテンプレートからお気に入りのデザインを探して使うのは、時間がかかるし面倒です。また、野良のテンプレートなどを拾って使うと、不具合の原因になるかもしれません。
 そういった理由から、Blogger公式のテンプレートから選んだのですが、導入した際に2ヶ所ほど気になる部分がありました。
 記事ごとに文字サイズや色を変えることもできますが、すべての記事が同じデザインになるようにくり返し作業するのは見落としがありそうですし面倒です。
 そこで、テンプレート側を書き換えて、過去と未来すべての記事のデザインをまとめて変えることにします。
 幸いにもBloggerはCSSによるテンプレートの部分改造が可能だったため、ブログのデザインを手軽に変更することができます。

 「CSSを追加」の開き方

 Bloggerでブログの管理ページに入り、左側のリストの下の方にあるテンプレートからページを開きます。「ブログで使用中」テンプレート下のカスタマイズをクリックすると「Blogger テンプレート デザイナー」が開きます。










上級者向けの項目を下へドラッグしていくと１番下にCSSを追加があります。
 ここに、デザインの変更をCSSで書きこみ、「ブログへ適応」ボタンを押せば、すべてのブログ記事の見た目が変化します。

 (スクリーンショットは、わかりやすいよう一部加工してあります)

 CSS追加までの大まかな手順

 ・見た目を変えたい部分を指定できる タグ/class/id を特定する。
 ・変えたい部分とどのように変えるかを、CSSとして書く。
 ・Bloggerの「Blogger テンプレートデザイナー」に、自分の書いたCSSを追加する。

 デザインを変えたい部分の タグ/class/id を特定するためには、公開orプレビューしているブログ記事のhtmlソースを読む必要があります。
 htmlソースを見るためには、Webブラウザで記事のページを見ながらCtrl+Uを押します。
 出てきたhtmlソースの中で検索(Ctrl+F)を行えば、デザインを変えたい部分を効率よく探せます。

 今回の設定は、最低限の作業で見やすくなるように文字サイズを変更しただけですが、CSSを追記すれば、文字色の変更や、文字枠・下線・影の追加による装飾も可能です。

 HTMLの読み方・CSSの書き方については、google検索すればいくらでもサイトが出てくるので、それらを参考にすると良いと思います。

 実際に追加したCSS

  H2{
   font-size: x-large;
  }
  .date-header{
   font-size: small;
  }

　img{
　 padding: 10px;
　 border: 5px;
　 border-style: groove;
　 color: #66ccff;
　}

　a:visited {
　 color:#551A8B;
　}

 ・変更点1： 見出しのサイズが小さすぎた。

 記事の区切りがわかりやすくなるよう、見出しの文字を大きく表示することにしました。
 見出しはH2要素(タグ)なので、文字サイズをx-largeへ変更。

 ・変更点2： 日時が大きく表示されていた。

 重要性が低い部分なので、あまり目立たないように小さく表示することにしました。
 (例：「2013年5月23日木曜日」などの日付が、タイトルと同じくらいのサイズで表示されていた)
 日時はdate-headerクラスなので、文字サイズをsmallへ変更。

変更点3:記事内の画像に枠がついていない

白の多い画像を白い背景で表示すると、どこまでが画像なのかわかりません。
かといって、すべての画像に手作業で枠をつけるのは大変なので、CSSで一括設定することにします。

img{
 padding: 10px;
 border: 5px;
 border-style: groove;
 color: #66ccff;
}

変更点4:閲覧済みページヘのリンク色を標準的な紫色に変える

リンク色が青色なのは、テーマに合っていますし、標準的なリンク色も青系なので良いのですが。
閲覧済みページヘのリンクが薄い青になるのは、白背景のテンプレートでは読みづらいので、いただけないデザインだと思います。

a:visited {
 color:#551A8B;
}

検索で出てくるブログタイトルを変更

 検索結果に表示されるブログタイトルの変更方法は以下のリンクに書かれていますが、書かれた通りの方法と少し違っていて、書き換える箇所が"data:blog.pagetitle"に変わっています。
 Bloggerって、Google検索で出てくるブログタイトルを記事名にする方法といい、それなりにカスタマイズの余地が残っている気がします。(ブログタイトルは、最近では検索エンジンが勝手にタイトルを付け直す場合もあるそうですが。)

Bloggerの英文URLについてのTIPS

記事の本題とまったく無関係ですが。
Bloggerは日本語記事名で投稿すると、記事URLに反映されません。
わたしは、記事URLが英文になるようにしています。Analyticsが見やすくなるので。
方法としては、投稿時に英語のタイトルをつけて、投稿後に編集して記事名を日本語に変えています。
日本語記事名は記事を書いている途中に考えているので、末尾に付与しています。
記事名の例：
「-gimp28 starry sky allocation purpose- GIMP2.8で星空を描く」
といった感じです。
 URLは「http://blog.michinari-nukazawa.com/2013/08/gimp28-starry-sky-allocation-purpose.html」になりました。
"_"を入れるとどうなるか実験したのですが、アンダーバーはURLになる際に詰められてしまうようです。

GIMP2.8でイラストにペン入れを行う

GIMP2.8には手ブレ補正機能が標準搭載されました。これで、ペン入れに使える綺麗な線を手軽に引けるようになりました。
しかし、GIMP2.8の使い方情報は、他のイラストツールに比べて少ないです。GIMPをペン入れに使うには自分で設定を詰めなければならず、初心者にとって使いづらくなってしまっています。
ここでは、私なりのペン入れ設定を紹介することにしました。

ペンタブレットを使ったペン入れを想定しています。
環境はUbuntu13.04で、使っているペンタブはWacomのIntuos4です。ここでの設定は、一部を除けばWindowsマシンでも通用するはずです。

本来、初心者ならばWindows環境でSAIを使うのが良い選択肢だと思います。先駆者がいて良い作例が多く公開されており、ネットや書籍にペンデータや使い方の情報が集積されているからです。
わたしがGIMPを使っているのは、個人的にUbuntu上で使いやすいと感じるペイントツールがGIMPとMyPaintであったためです。
(WineでSAIを動かすという方法は、上手くいかないという報告が過去にある)



最低限、ペンだけを設定すればペン入れ作業はできます。ここでは、ペン入れを助ける便利スクリプトなども紹介します。
・「転写」スクリプトをGIMPに追加
・マルチビューのTIPS(方法２つ)
・自動バックアップを設定する

なお、G-Pen相当のペン作成と、転写機能スクリプトは、「GIMPでペン入れ」(サイトMagic Object)様に書かれている方法です。
また、 自動バックアップのスクリプトは「Auto SavePlugin」(サイトGIMP USERS様)に記載されているものです。
スクリプト本体は、上記サイト様から入手してください。

ペンの設定

おおまかなまとめとしては、
まず、アンチエイリアスが効いた線を引くために
・ツールは「ブラシ」(ブラシで描画)
・ブラシ(ペン先)は外周がボケているものを選ぶ("2. Hardness 075"など)
・手ブレ補正をONにする
・動的特性はサイズと筆圧が対応している特性を作って使う
　(GIMP PainterのG-Pen相当)

ツールは「ブラシ」(ブラシで描画)

GIMPでフリーな線を引けるツールは、「鉛筆・ブラシ・インク」の3種類です。
ペン入れにはブラシを使います。
[鉛筆で描画]だとアンチエイリアスが効きません。[インクで描画]だと入りが太くなってしまい、綺麗な線になりません。

ブラシ(ペン先)は外周がボケているものを使う

デフォルトのブラシの中では、2. Hardness 075が良いかと思います。
私が使っている自作ブラシは半径を100 にしてあります。

手ブレ補正をONにする

 手ブレ補正のチェックボックスをONにするだけです。
品質50、ウェイト80 くらいまで上げてみても良いと思います。
 わたしの場合、
サイズは8~20。手ブレ補正にチェックを入れ、品質20~60、ウェイト40~80あたりで作業しています。

動的特性はサイズと筆圧が対応している特性を作って使う

GIMP PainterのG-Penに相当するペンを作るにあたって、
動的特性を追加するには、「描画の動的特性」タブを開く必要があります。
「タブの追加」を行うか、 ブラシ設定の動的特性アイコンをクリックして探せば、「描画の動的特性」タブを開くことができます。
「新しい動的特性を作成」すると「動的特性エディター」タブが開くので、筆圧によるサイズ変化のみにチェックを入れます。

わたしの場合、「筆圧によって太さが変わる」設定で、2種類定義しています。 2つ目の動的特性は、「サイズ」設定で筆圧によるサイズ変化がすぐ上限に達するようにしてあります。こうすれば、太さが安定しない不恰好な腺になりにくいです。

引いてみた線の見た目が悪ければ変えます。あとは、慣れとその日の筆圧次第。

 その他

・画像サイズの大きいほうが、アンチエイリアスが効いて綺麗になる。
・線が太すぎると下手に見えるが、腺が細すぎるとアンチエイリアスが効かなくなり、見た目が汚くなる。
私は画像サイズ4000x6400で作業しています。
適切な線の太さは、画像のサイズによって違います。(イラストのタイプにもよりますが)
腺の太さは、ツールの「サイズ」、選択した「ブラシ」のサイズ、動的特性によるサイズ変化、によって決まります。状況によって「サイズ」を変更するとよいです。

Ubuntu(13.04)環境のGIMP2.8では、GIMPを設定して筆圧を有効化する必要があります。
筆圧検出を有効化しないと、ブラシ設定をしても入りや抜きの綺麗な線が引けません。
編集→入力デバイスの設定 で、ペンタブレットが認識されていればcursorやeraserなどがあると思うので、すべてモードを「不可」から「スクリーン」に変更してください。
入りや抜きの線幅が、筆圧で変化していることが確認できれば、設定に成功しています。


現状、GIMP2.8では画像全体の回転表示と左右反転表示がサポートされていません。
(画像を加工してしまう回転・反転処理は存在するのですが)
なお、Mypaint1.1では左右反転がサポートされています。また、GIMP 2.10では回転が可能になりそうな雰囲気です。

鉛筆と消しゴムのペン先設定の共有を解除する

ペン先の設定が共有されるのがデフォルト設定。（「ツールオプション」で表示される）
消しゴムはペンより太くしたほうが、線を消しやすくて便利です。
上部バーから 編集→設定 を選択し、ツールオプションにてツール共有の描画オプションからブラシのチェックボックスをOFFにします。

「転写」スクリプトをGIMPに追加

転写機能スクリプトとその導入方法は、「GIMPでペン入れ」(サイトMagic Object)様で紹介されています。
 

マルチビューっぽいもの

「ナビゲーション」タブを追加する。
描画中のブラシに追従するわけではありませんし、ウィンドウに表示されている範囲の外は暗くなるため、ぱっと見る以上の役には立ちません。ですが、全体のバランスを確認するには十分ではないかと思います。

自動保存(バックアップ)の設定

不意なPCの停止やGIMPのクラッシュに備えて、定時の自動バックアップを用意するスクリプトを導入しておきました。
(幸い、GIMPのクラッシュはまだ体験していないですが)
まず、スクリプトはGIMP USERSのAuto SavePluginページから。
このページに記載されたスクリプトを、ホームディレクトリの./gimp-2.8/plug-ins/ディレクトリ内に格納して再起動。
(スクリプトは、ページ下部の"#!/usr/bin/env python" から "main()" まで。)
メニューファイル(F)の一番下にActivate Autosaveが出てくるので、これをクリックすると、バックアップ保存機能が起動します。GIMPを起動したとき、忘れずに有効化します。

バックアップファイルは、ルート直下のテンポラリフォルダである/tmp/フォルダ内に作成されます。
ここから、必要に応じて取り出します。

バックアップ自体は行われているようですが、まだわからないことが多いです。導入後、GIMP起動時に自動起動しているっぽい挙動や、バックアップの実行タイミングが把握できていません。
GIMP2.8にはPythonスクリプト対応が標準搭載されているため、このスクリプトの追加が楽です。
動作はUbuntu13.04で確認したため、Windows対応は不明です。

JavaScriptで、変数を使った正規表現マッチング

例および失敗例は、自作のJavaScriptソースから抜粋。
※例ごとにマッチする文字列が違いますがご容赦ください。

 JavaScriptで正規表現を使う方法は2つあって、
 
 (1)正規表現を引数に与える
 例：
 空行あるいはコメントアウト(行頭が";")の場合にマッチするif文
   if(scinario_script[scriptLine].match(/^(\s*|\s*[;*].*)$/)){
 マッチした文字列をtarget[1]として取り出して使用する場合。
   if(target = name[1].match(/.*target\s*=\s*\*([^\s]+)/)){
 リテラルを変数に格納してもよいようです。
   var regex_linktag = /^\s*\[\s*link\s+([^\[]*)\[\s*endlink\s*\].*/;
   if(name = scinario_script[scriptLine].match(regex_linktag)){

 (2)正規表現オブジェクトを作って引数に与える
 例：
 一行目で、JavaScriptのlabel変数に格納した文字列とマッチさせる正規表現オブジェクトを作成。
   re_label = new RegExp ("\\s*"+label+"\\s*$");
   if (scinario_script[i].match(re_label)){



 このうち、正規表現を直接引数に指定する(1)のほうが書きやすいのですが、JavaScriptの変数を使った正規表現でマッチングをしたい場合は(2)を使う必要があるようです。

 ただし、(2)の正規表現は書き方に癖があります。（といってもスラッシュが2重になる程度ですが）
 ついでにいうと、正規表現オブジェクトの宣言ではvarは不要でした。

 失敗例：
       re_label = new RegExp ("^\s*\*"+label+"\s*$");

 JavaScriptでエラーを起こすと、エラー行でページ動作が止まります。
 検証にはブラウザをデバッグモードにする必要があります。
 chromeのデバッグモードで(Ctrl+Shift+iで入れる)正規表現に関連するエラーに引っかかると、「Uncaught SyntaxError: Invalid regular expression: (略) Nothing to repeat」などのエラーメッセージを拝むことになります。

chrome(chromium)によるエラー表示
エラーを起こしている正規表現部分はstackoverflow様より