Katapad Design

2008-10-25に「小林章の欧文タイプ・セミナー 2008」に行ってきました。

「欧文書体」「欧文書体2」の著者であり、ヒラギノの欧文やAXISフォントの欧文の作者である小林章氏のセミナーが大阪でありました。

畑違いではありますが、非常に有意義なセミナーでした。

以下、印象深かったところをメモ代わりに残しておきます。

文字の「M」は横幅が広く、「E」「S」は狭い。これが古典的なローマ字。

• 古典的ということはそれだけで格調ある雰囲気を出せる
• 「Trajan」がローマの碑文を元に作ってある。ローマの碑文が源流みたいな感じ。
• そのあとに「Garamondがそれを受け継いだ感じ
• 「Times New Roman」や「Century OldStyle」までくるとインダストリアルな感覚がする

タイプデザイナーは単語デザイナーである

• よみやすく、雰囲気のある文章・単語にするために調整を行っている

白と黒のバランスを意識することが上達の近道

黒い部分で形を視認するのだが、逆に白の部分で認識させることも重要。橘流の寄席文字はほぼ真っ黒。白い部分で形が見えてくる。

• フィンランドの切り絵
  • こんな感じの白と黒の切り絵
• 橘流の書体
  • グーグル画像検索

欧文フォントのバランスはカーニングだけじゃなくって、「O」や「n」の真ん中の空き具合（懐？）による

• 和文書体だと正方形なのでギッチギチにカーニングしたりするけれど、そういうことはしない

これから残るフォントは「Meta」と「The Sans」

以下の2つ。「欧文書体2」にも載っけてる。

Meta

http://www.myfonts.com/fonts/fontfont/ff-meta/

The Sans

http://www.fonts.com/findfonts/detail.htm?pid=413684

和欧混殖の場合は欧文フォントを使う

• 和文にも従属欧文が入っているが、欧文には欧文フォントを使ったほうがきれい
  • 従属欧文は「x軸」「y座標」など記号として用いるのが望ましい。

サイン（標識）なんかは字間が広いくらいがちょうどいい

• 飛行場や駅の案内なんかは、どの角度からも読みやすくするために字間をとるようにする
• 長体かけて、ギチギチにカーニングなんかはもってのほか

和文フォントと欧文フォントの違いは、字間

• 和文は正方形なので、それと釣り合うように字間をあけている
• 欧文はプロポーショナルなので、和文よりかは詰まる

これだけはやめて！

• ピリオドのあとの全角スペース
• 「fi」「fl」などは合字を使う
• リバー（リザード）にならないように気をつける
  • 単語と単語の間が河のようにつながらないように。

2008-09-14追記 すみません！「trace文をショートカットキーで書いてくれる便利なヤツ」のurl間違えてました！

PCの操作で不便に感じることがあれば真っ先に思うのが、「誰かが作ってくれてるやろ」ですね。だからwindowsはやめられない。そんなことで、FlashDevelop回りで調べたら見つかったプラグイン3つです。

以下、すべてFlashDevelop3.0.0 beta7での設定です。

1. as3・as2でASDocを吐き出してくれるやつ

5分もかけずにas3のASDocを吐き出すらしい

厳密にはプラグインではありませんが、コマンドラインを勝手に叩いてくれます。

http://www.flashdevelop.org/community/viewtopic.php?t=918

1. FlashDevelopを起動。
2. 「tools」→「Custom Arguments」でkeyとvalue を設定します
   • name → "ASDoc",
   • value → flexのpath\bin\asdoc.exe,
3. ツールバーに「ASDocを作成」するボタンを追加します。ソースは上記リンク先で。

FlashCS3用のプロジェクトだと、結構失敗します。コンポーネントとかはうまいこと指定しないとできないかもしれません。

2分くらいでas2でのASDoc（as2api）

デフォルトで入っていました。しかもGUIで。

1. 「tools」→「Flash Tolls」→「AS2API GUI」
2. 必要項目を入力
   • pagetitleはhtmlのタイトルとか
   • packageはASDoc化したいパッケージ。「com.katapad.*」みたいに書く。
   • Outputとclasspathはそのまんまなので適当に入力
3. 「Generato Documentation」ボタンを押してできあがり！…って文字化けしてるじゃねーか！
   • 文字コードがiso-8859-1で書き出されるので文字化けします。ちょこっといじくる必要ありです。
     1. 「tools」→「Application Files」でエクスプローラが開くので「Tools/as2api」 を開く
     2. as2apigui.bat をテキストエディタで開きます。iso-8859-1と書かれてるとこをutf-8に変更して保存
     3. as2apigui.batを実行すると、ようやく文字化けが直ります。

文字化けがうざいですが、それでもかなりの時間短縮になりますね。

2. trace文をショートカットキーで書いてくれる便利なヤツ

andrewlucking.com � fdtracer
FlashDevelop Trace Plugin

http://www.andrewlucking.com/archives/category/fdtracer/
http://www.double-quotes.com/flashdevelop/trace-plugin/

1. ダウンロードしたら「tools」→「Application Files」→pluginディレクトリにぶち込む
2. FlashDevelop再起動

変数とかを選択して「ctrl + 0」もしくは「ctrl + shift + 0」でtraceがきれいな形で！スニペットのtracethisと組み合わせたら、かなりの量のtraceを自分で書かずにすみます。

2-1 trace文をのぞき見するplugin

間違えて上のtraceのプラグインとこに書いてたurlのプラグインです。

こいつはブラウザで見たswfのtrace文を拾ったりしてくれます。要debug playerです。

andrewlucking.com � fdtracer

http://www.andrewlucking.com/archives/category/fdtracer/

1. ダウンロードしたらpluginディレクトリにぶち込みます
2. F10押して設定を開きます。
3. FDTracerの項目でflashplayerのlogファイルへのパスを設定（{user}と書いてあるところをpcのユーザ名に）します
   • mm.cfgというテキストファイルを新規作成して、Cドライブ直下に置きます。中身は以下

     TraceOutputFileEnable=1
     ErrorReportingEnable=1
     TraceOutputFileName=C:Documents and Settingsユーザ名Application DataMacromediaFlash PlayerLogsflashlog.txt

4. debugplayerを使ってその辺のサイトを見る。FlashDevelopのFDTracerパネルにたくさんtraceされてるはずです。マァ、いやらしい。

3. addEventListenerのrollOverHandlerとかをrollOutHandlerに勝手に書き換えてくれたりする、今回紹介する最強のplugin

以下にムービー付きで紹介されてます。今日は徹夜なのにブログを書く気にさせてくれるほど、ものすごい便利です。

FlashDevelop Duplicate Plugin

http://jde.name/duplicate/

mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);

と書いた文を複製すると

mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

Eventのtypeとハンドラまで「out」に書き換えて複製してくれます。まだ続けて複製するとclick、doubleClickまで書いてくれます。ヤッベー。ヤッベヤッベ。

mc.addEventListener(MouseEvent.CLICK, clickHandler);
mc.addEventListener(MouseEvent.DOUBLE_CLICK, doubleclickHandler);

他にもtrue→falseを切り替えたり、連番を自動で振ったりとかなり便利です。ありがとう、神様。

「とりあえず」とか「それなりに」とか「そのうち」クオリティのus-katapadフレームワークを公開しました

ながらくタンスのこやしにしてたので、とりあえずsvnに突っ込みました。

http://us-katapad.googlecode.com/svn/trunk/

どうやったらtag打ったりリリースしたりするのかわからんかったので、とりあえずtrunkを公開しておきます。tortoiseSVNかそこらでダウンロードしてみてください。TortoiseSVNのインストールと設定

中身

• html
• dwt
• cssセット
  • リセットはまだ現役で使えるかな？全称セレクタ使ってるけど。safariとIEでline-heightより小さいimgを使うときは個別対処ですが、それ以外はピッタリしてくれるはず。
• js

ドキュメント類はそのうち…

同梱してある_guideline/index.htmlあたりにちらっと書いてありますが、まだ準備してません。

以前、pukiwiki形式で20ページくらいしたためておいたのですが、googleのwikiの使い方がよくわからんのでしばらく放置状態になります。

ドキュメントがあったらかなりおもしろいと思うんやけどねー。とりあえずdwtはそれなりにいじっているので、それなりに使えると思います。bodyclassとかpagetitleとか。

上条さんとこで、AS2でOOPをやると遅くなる可能性があると書いてあって泣いた。

AS3 で動的言語のススメ

AS2 における型の使用は、オーサリング時の ”生産性向上のベストプラクティス” としての位置づけ以上ではないわけです。実際 OOP をまじめに追求するほど AS2 のアプリケーションは遅くなる傾向を持っています。

気になったので、単純なカウントアップでベンチマークをとった。

試したところは以下

• タイムラインに書くかクラスに書くか
• 型宣言の有無
• 処理をfunctionにくるむかどうか

AS2でタイムラインに書く。型宣言はなし

//型宣言なし
var startTime = getTimer();
var trialNum = 100000;
var cnt = 0;

for (var i:Number = 0; i < trialNum; i++) {
	cnt++;
}
benchmark();

function benchmark()
{
	var endTime = getTimer();
	trace("time: " + (endTime - startTime));
}
//だいたい228

AS2でタイムラインに書く。型宣言あり・カウントアップは生で書く

//型宣言あり
var startTime:Number = getTimer();
var trialNum:Number = 100000;
var cnt:Number = 0;

for (var i:Number = 0; i < trialNum; i++) {
	cnt++
}

benchmark();

function benchmark()
{
	var endTime:Number = getTimer();
	trace("time: " + (endTime - startTime));
}

//だいたい230

AS2でタイムラインに書く。型宣言あり・カウントアップはfunctionにくるむ

リファクタリングの本やOOPの本を読んでいると、できるだけ細かいfunctionに分けるべきだ、と書いてある。確かにそのほうがやりやすいが、やればやるほど遅くなる気はしていた。

//型宣言あり,function
var startTime:Number = getTimer();
var trialNum:Number = 100000;
var cnt:Number = 0;

for (var i:Number = 0; i < trialNum; i++) {
	countUp();
}

benchmark();

function countUp():Void
{
	cnt++;
}

function benchmark():Void
{
	var endTime:Number = getTimer();
	trace("time: " + (endTime - startTime));
}

//だいたい709

クラスに書く

クラスに書いてみた。やってる中身は上とほとんど一緒。試したのは以下。

• 型あり
• 型あり・function
• 型あり・別クラスstatic function
• 型あり・別クラスを参照static function
  「型あり・別クラスstatic function」は

  for (var i:Number = 0; i < trialNum; i++) {
  	cnt = sandbox.BenchTest.countUp(cnt);
  }

「型あり・別クラスstatic function」は

var test:BenchTest = BenchTest;
for (var i:Number = 0; i < trialNum; i++) {
	cnt = test.countUp(cnt);
}

AS2速度まとめ

ループ処理だけでの単純な比較なので、あまりあてにならない。

実際のところどっちが速いのかよくわからん、という結果になった。とりあえず、タイムラインでのfunctionがやたら遅いということがわかった。アクティベーションオブジェクトのせいだろうか。

でも、OOPにのっとってめちゃくちゃ細かく分割すると、遅くなることは事実だろう。わりと、お茶濁しな結果に！

AS3とAS2での差はクラスのメンバにあるかどうかでかなり変わる

AS3では

var point:Point = new Point(x,y)
point.x++;

と書くとめちゃくちゃ早い。メンバ変数であるかどうかがかなりの違いの模様。

これを単なるオブジェクトとして扱うとめちゃんこ遅くなる。ハッシュがどうのこうのらしい。配列はそこそこ早い。
PointとArrayで速度比較

var obj:Object = new Object();
obj.x = 1;
obj.x++;

AS2ではどれをやってもほとんど同じ速度だった。

さっさとAS3に全部移りたいぜ！

//var point:Point = new Point(1, 1);
//var obj:Object = new Object();
//obj.x = 1;
var array:Array = [1];
for (var i:Number = 0; i < trialNum; i++) {
	//point.x++;
	//obj.x++;
	array[0]++;
}

AS2でメンバとかの速度

point.x++;	obj.x++;	array[0]++;
94	93	106

コードのハイライト表示をしてくれるプラグインを突っ込んだら、pukiwikiプラグインと相性がよくありませんでした。

pukiwikiプラグインとハイライトプラグインは適用箇所をくくることが必要になります。

しかし、以下のような混ぜ混ぜするやりかたは[as]の部分がこのまま出力されるだけでNGでした。

［pukiwiki］
pukiwiki記法
［as］
 public function get unko(food:Food):Feed {
    return _unko;
}
［/as］
［/pukiwiki］

こっちなら動くけど…

［pukiwiki］
pukiwiki記法
［/pukiwiki］
［as］
 public function get unko(food:Food):Feed {
    return _unko;
}
［/as］

これはめんどくさい。pukiwikiやりもって、asに切り替えて…というループ処理は人間には向いてません。

さらに悪いことに、［/pukiwiki］と［as］の区切りの間に空の<p>が紛れるという事態に。もういいや。やーめた！

コードハイライトプラグインの文書は以下がよくまとまっている上にAS3まで対応してはりました。

iG:Syntax HiliterでActionScript 3.0をハイライト

長らくAS2でお世話になっているおまじない、Delegate.create。ただなんとなしに使うのではなく、そろそろ理解しようと思い調べてみました。

理解するためには2つ必要でした。

1. argumentsオブジェクトの理解
2. Functionクラスの理解

argumentsオブジェクトの理解

argumentsオブジェクトは引数オブジェクトのことです。アクセスするには配列演算子を用いますが、単なる配列とは異なるようです。

argumentsオブジェクトにはcallerとcalleeプロパティが存在します。

arguments.caller

現在実行中の関数を呼び出した関数への参照となります。関数オブジェクトはdynamicクラスなので、あとからいくらでもプロパティを追加できるので、実際に参照しているのかテストしてみましょう。

function firstStep(){
	secondStep();
}
firstStep._x = 1;

function secondStep(){
	trace(arguments.caller._x);
	arguments.caller._x++;
}
firstStep();   //1が出力される
firstStep();   //2が出力される
firstStep();   //3が出力される

arguments.callee

現在実行中の関数への参照となります。

Functionクラスの理解

Function.apply()

Function.apply(scope:Object, [argArray: Array ]) :Void

functionオブジェクトのthisを置き換えるのがこのapplyメソッド。
これをうまく使えばmc.onReleaseなどのthisが変わるめんどくささから解放されます。

以上を踏まえて、mx.utils.Delegate.create()では何をしているのかというと

まずはmx.utils.Delegate.create()のコードを見てみましょう。

static function create(obj:Object, func:Function):Function
{
	var f = function()
	{
		var target = arguments.callee.target;
		var func = arguments.callee.func;
		return func.apply(target, arguments);
	};

	f.target = obj;
	f.func = func;
	return f;
}

1. functionオブジェクト（var f）を作成
2. functionオブジェクトに匿名関数を参照させる
3. functionオブジェクトはdynamicクラスなので、追加プロパティを作れる
   • scopeとなるobjectと関数を保持させる
4. 匿名関数内で、arguments.calleeを使って、自身（現在の関数）を参照し、
   • 先ほど保持したscopeと関数を拾う。
   • func.apply()で意図したscopeにfuncを割り当てる（thisを変える）

だいたいこんな感じでした。しかしながら、func.apply()には同時に引数も渡せるはずです。なので、ちょっと付け足してみました。

static function createWithArgs(obj:Object, func:Function, args:Array):Function
{
	var f = function()
	{
		var target = arguments.callee.target;
		var func = arguments.callee.func;
		return func.apply(target, arguments.callee.args.concat()); //ここを追加
	};

	f.target = obj;
	f.func = func;
	f.args = args; //ここを追加
	return f;
}

applyメソッドの第2引数にarguments.callee.args.concat()を追加するとうまく引数を登録できます。
引数の配列となるargsはconcatしないとうまく動作しません。

このあたりがさっぱりわからなかったので、ググってみましたがめぼしいものは見つからずさらに謎の動作まで見つけてしまいました。

http://library.sfug.ch/trac/browser/trunk/doc/as2/examples/sfug_as2lib/ch/sfug/utils/Delegate.as

ここはarguments.shift()でscopeとfuncを定義してるあたりがおもしろいですね。concat(arguments)でさらにdelegateした後で呼び出したときの引数も定義しています。なぜargumentsが使えるのかがなんとなくでしかわからないので、完全なる理解にはしばらく時間がかかりそうです。

4月末で前職を退職し、5月より新しい会社で働くことになりました。Flashやる人です。

まだ2週間しか働いてませんが、かなりカルチャーショックです。いままでの底辺付近のヤバいやり方とぜんぜん違います。めちゃくちゃクオリティを求められますし、会社全体の空気がそうなってます。

これからじっくり腰をすえてがんばろうと思います。本当にがんばってますよ！まだunkoって1回しか言ってないからね！

そんなunkoちゃんの僕は、すぐunkoに逃げてしまうので、ToDoとNotToDoリストを書いておこう。

さっさとやらないといけないリスト

上から優先度高い

1. 早寝早起き
2. motionグラフィックの基礎・引き出し増やす
3. as3
4. デザインパターン
5. CoreserverでSubversion
6. blogをFlashのことだけ書く
7. asライブラリを作って公開
8. プログラミングのノウハウ的なこと・UMLとかそのへんの周辺知識
9. お笑い（いつも思いつきやから、クオリティとか緩急とかつけたい）
10. ui
11. Design

（できれば）やらないリスト。ある意味、そのうちやりたいことリスト

• 正規表現
• ruby・php・sqlとかサーバサイド
• ruby on railsとかのフレームワーク
• Processing（しまった。今日amazonで本買うてもうた）
• IA
• PM（これも本買ってもうた）
• ファミコン
• HTML

pukiwiki記法でblogが書けたら、ずいぶんはやく書けるし、自分用メモからの転載もはかどるのでplugin入れてみました。

おおまかな流れ

1. Xoopsのpluginを拝借
2. WordPress用PukiWIKI pluginを設定
3. 全部utf-8（BOMなし）で保存しなおす
4. 細かい設定

1～2のおおまかなところはこちらが参考になるので割愛します。
http://blog.absolute-zero.info/?p=88

全部utf-8（BOMなし）で保存しなおす

1. アップロードしたファイルすべてをUTF-8（BOMなし）に保存しなおします。
2. modPukiWiki/PukiWiki.phpの8行目を以下に変更

   if (!defined('MOD_PUKI_SOURCE_ENCODING')) define('MOD_PUKI_SOURCE_ENCODING','UTF-8');

こまかいところ

ulなどに勝手につくstyle属性をなくす設定

ulの入れ子をしたりすると、かなりstyle属性を入れられるので、消す。かなり物量が多いので、簡単なところだけ消しときます。（ホンマはmarginの計算処理部分も消したいけど、多くて断念）

config/default.php

• 80行目
• style="～～と書かれているとこを消す
  • これを

    $_settings['_list_pad_str'] = ' class="'.$_settings['style_prefix'].'list%d" style="padding-left:%dpx;margin-left:%dpx"';

  • これに変更

    $_settings['_list_pad_str'] = "";

一応、勝手に付与されるmargin、paddinの値も0にしとく

class/PukiWikiElement.php

• 263行目付近のclass PukiWikiListContainerのfunction PukiWikiListContainerを変更
  • これを

    $this->margin = PukiWikiConfig::getParam($var_margin);
    $this->left_margin = PukiWikiConfig::getParam($var_left_margin);

  • 以下のようにmarginとpaddingの値を0に変更する

    $this->margin = "";
    $this->left_margin = "";

h1は使わないので、一つずつ見出しレベルを下げる

• 「*」はh1じゃなくて、h2になってほしいので変更する

class/PukiWikiElement.php

• headingまわりの修正
• 207行目付近、PukiWikiHeadingのfunction PukiWikiHeadingの中
  • これを

    $this->level  = min(6, strspn($text, '*'));

  • これに変更

    $this->level  = min(6, strspn($text, '*') + 1 );
    

あわせて「#contents」の挙動も変更する

• ulが2つしか入れ子になってくれないので、変更する
• さっきheadingでlevelを変更したのでそれを直すのと、ulの入れ子を増やします。

class/PukiWikiElement.php

• 1188行目付近のfunction Contents_UListに一行追加

  • $level -= 1;

• 278行目付近のfunction PukiWikiListContainerを変更する
  • これを

    $this->level = min(3, strspn($text, $head));

  • これに変更

    $this->level = min(5, strspn($text, $head));
    

あとアンカーがおかしいことになってるので変更

class/PukiWikiElement.php

• 1142行目付近のfunction getAnchorを変更
  • これを

    $id = "content_{$this->id}_{$this->count}";

  • これに変更

    $id = "content_{$level}_{$this->count}";

実際に使った感想。

• h6まで見出しを作れる
• 入れ子<ul>・<ol>は通常通り3個まで
  • 入れ子<li>の挙動がおかしい。入れ子<li>の中にブロック要素を入れると、そのブロック要素の直前に「</p>」を無理やり生成される
• #contentsの目次生成は便利だけど、topやrssには不要なので、その辺をどうにかしたい。
  • topに置くと、id名が重複する可能性が高い？どうなんかな。
    • →ひとまずis_single()で個別記事だけ表示するように変更した。
    • 個別記事ID発行のthe_ID()を使ってid名に含ませようとしたが、ぜんぜんうまく動かなかった

しかしながら、これでめっちゃくちゃ楽になるぜ！まあ、wordpress止めてpukiwikiに移行しろとかは言わないでください。