jekyllをUbuntu14.04にインストール(github事前確認用)

まずはjekyllインストールまでの経緯について。

FontForge公式サイトは、FontForge日本語訳版ページを持っています。一部翻訳が古くなって英語版に追いついていない箇所もありますが、FontForgeの機能がしっかりとドキュメント化されており、基本的なフォント制作の作業中に困ることはまずありません。
また、日本語で読めるフォント基礎知識のまとめとして内容の充実度は飛び抜けています。FontForgeを直接使わないとしても、フォント制作を始めようという方はぜひ読むべき情報が詰まっています。

fontforge site on jekyll local HTTP server.

そのFontForge公式日本語訳ページなのですが、GitHub Pagesに移行してから文字化けするようになってしまったようです。
メーリングリストに文字化けの報告を上げたところ、『リポジトリアクセス権をあげるから、修正してプルリクエストを書いてみなよ！』と言われたため、いろいろ初めて含みな状態ではありますが、FontForge公式日本語訳ページの修正作業を行った次第です。

さて。
Github Pagesで内容の多いページや意匠にこだわったページを作るために、乱立している静的HTMLページ生成ツールを使うのが最近はスタンダードのようです。
FontForgeもその例に漏れず、Github Pagesに移転した現在の公式ページは、jekyllというRubyベースの生成ツールを使っています。
(日本語訳ページの部分は、普通の静的HTMLですが。)

FontoForge日本語訳ページの文字化けの原因は、ブラウザによるHTML文字コード自動判定機能の判定ミスです。遡れば、GitHub PagesのHTTPサーバ設定でデフォルト文字コードがUTF-8になっていることが原因にあるようで、最終的にはGitHub Pages上で再現と修正確認をすることになりました。
そのためあまりjekyllの導入に意味はなかったのですが、防備録としてここに残す次第です。


前置きが長かったようですが、どちらかというと本題は前置きの方です。
以下が、GitHub Pagesとjekyllについて。


実行環境はUbuntu14.04です。
Ruby環境の導入は『Redmine(非パッケージ)をUbuntu14.04にインストールする手順(暫定)』の際にすでに行っています。
Redmineを動かす際に、追加設定を行い、gemもいくつか導入しています。そのため、もしかしたら今回の手順で必要なものが漏れているかもしれません。あしからず。


現在のFontForgeのREADME.mdには、gemはjekyllのみ必要であるかのように書いてありますが、実際にはgithub-pagesというそのままな名前のgemも必要です。

私の環境では、gemのインストールにとても時間がかかりました(他の作業をして戻ってきても、まだ終わっていない)。

また、『gemの"jekyll/version"が足りない』的なエラーメッセージが出るのは、jekyll製のGithub Pagesサイトが現状でjekyll-2.4.0を要求しているからであり、最新のjekyll-2.5以降のgemが入っていると、このメッセージが出てエラーになる次第です。
以下、gemの導入。

sudo gem install jekyll
sudo gem install github-pages
sudo gem uninstall jekyll

Select gem to uninstall:
 1. jekyll-2.4.0
 2. jekyll-2.5.2
 3. All versions
> 2
Successfully uninstalled jekyll-2.5.2
最初からjekyllのバージョンを指定してインストールすれば良いと思います。

続いて、fontforge公式サイトを使って、jekyllの動作を確認。
(いえ、私にとってはfontforgeが主なのですが)。
git clone https://github.com/fontforge/fontforge.github.io.git
cd fontforge.github.io 
jekyll serve --watch

デフォルトのlocalhost:4000にてjekyllによるHTTPサーバの動作が確認できれば成功です。



なお、私的には本題であるfontforge公式サイトの修正は、無事にマージされました。
FontForge日本語訳版ページが問題なく閲覧できるのがその証拠です。
ルーン文字フリーフォントは、FontForgeとその公式サイトがなければ絶対に実現できませんでした。今回の作業で、少しでもFontForgeのオープンソースコミュニティに貢献の恩返しができたなら嬉しいです。

非表示のレイヤと描画されないパスを削除するIllustratorスクリプト

このスクリプトは、現在販売中のRuneAMN_Proフォントセットを制作していた時に作った。

 RuneAMN_Proフォント ブラックレター体
「シンボル」機能を活用してデザインされた

フォントを制作した際、文字のデザインも私が担当した。
ルーン文字の場合、最低でも26文字デザインする必要がある。文字はひとつずつ違う形を持っているが、文字をパーツに分けて見てみれば、複数の文字が同じ部品を共有している場合もある。

Illustratorで同じ形状のパスをいくつも置く場合に使われる「シンボル」機能は、そのまま使うとシンボルにした形状の位置決めが難しくなる。そこで、透明な長方形パスで囲ってシンボル化することで、位置決めしやすくするテクニックがよく使われる。

手製のフォント画像分割スクリプトと、フォント制作アプリケーションFontForgeの都合から、シンボルを解除して、透明なパスを削除する必要があった。
シンボル化の解除は、パスを全選択して、シンボル化機能の解除アイコンをクリックすれば良いので簡単に済む。
しかし、透明なパスの除去は、手作業ですれば面倒な作業になる。(字形を修正するために、何度も同じ作業が必要になるのでさらに大変。)


幸い、私はプログラマだった。すべてのパスをひとつずつチェックして、透明だったら削除するスクリプトを書くのは簡単だった。
そうして、以下の非表示レイヤと描画されないパスを削除するIllustratorスクリプトが誕生した。

/** 
 * 非表示のパス・レイヤを削除する。
 * Adobe Illustrator script(JavaScript).
 * Michinari.Nukazawa@gmail.com
 * License: BSD class2
 *
 * 既知の問題: 2回適用しないとすべての非表示パスが消えない場合がある。
 */

// 非表示のレイヤを削除する
layers = activeDocument.layers;
for (i=0; i<layers.length; i++)
{

if( !layers[i].visible ){

layers[i].locked = false;

// 非表示レイヤはremove()しようとするとエラー失敗する

layers[i].visible = true;

layers[i].remove();

}
}

pathObj = activeDocument.pathItems;
// 非表示のパスを削除する
for (i=0; i<pathObj.length; i++)
{

if( ((!pathObj[i].filled) && (!pathObj[i].stroked)) || pathObj[i].hidden ){

pathObj[i].locked = false;

pathObj[i].remove();

}
}

(このスクリプトは動作するが、古くなっている可能性がある。最新版は"delInvisiblePath.jsx"の名前で、RuneAMN_Proフォント 制作スクリプト公開ページにて公開されている。)

Illustratorのjsxスクリプトの使い方は、色々なサイトで説明されているので省略。

このスクリプトは、完全自動化を目指すことはせず、あくまで作業補助のために作ったので不出来ではあるけれど、きちんと機能はする。