投稿

5月, 2013の投稿を表示しています

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

イメージ
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/が見える位置なので、…

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

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

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


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



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










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

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







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

 デザインを変えたい部分の タグ/class…

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

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

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

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



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

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


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


ツールは「ブラシ」(ブラシで描画) GIMPでフリーな線を引けるツールは、「鉛筆・ブラシ・インク」の3種類です。
ペ…

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+…