雑感 Archive

Flasherになって1年が経ちました。この1年いろいろと勉強さしてもらいました。

大掃除で本の片付けついでに、今年買ったFlash技術周辺本のレビューでもしましょう。

途中までしか読んでない本が大半ですが、まったく読まなかった本もあります。
ここでは最低でも50ページは読んだ本19冊を選抜しました。Flash本9冊、それ以外10冊です。

ずらずらと並べた19冊の感想を読むのはつらいと思うので、1冊だけ「ムツゴロウさんの動物王国のナレーション」のモノマネをしながら書いています。

2008-01月～03月に読んだ本

01.ActionScript 3.0 アニメーション

★★★★★。オススメ。3か月で全ページ読破しようと思ってた。

結局、最後の100ページは流し読みをしたけれど、初心者にはかなりいい内容。とりあえず大量のモノを動かして、ある程度の高速化を意識して…という基本がわかればええと思う。

02.UMLモデリングレッスン-21の基本パターンでわかる要求モデルの作り方

★★★☆☆。例がFlashと無縁なので忍耐が必要。

UMLでも勉強しようと思って買った。この手の本に共通して言えるのが、例がよくわからんのだ。会員が何かを購買した情報を分類したり、従業員の種類を気にしたり、顧客の種類を気にしたり、といった「Flashではない向こう側のプログラミング」の例だらけだ。このような例に耐えられる、もしくはそんなん気にせず本質を読み取れるならいい本じゃないかと思う。UML、つまりオブジェクト指向の表現の幅が広がるはず。

03.リファクタリング―プログラムの体質改善テクニック

★★★★★。オススメ。ビューティフルなコードを書くための本。

第3章まで読めとamazonに書いてあったけど、そこまで読めたら全部読める。コードの不吉な匂いがわかればよし。優秀な人のソースも読めるようになる。
ただ、このままFlashに適応させると大変な目にあうので注意！律儀に書くとコードの実行が遅くなるので、この辺のバランス感覚は経験が必要になってくる。

04.モーション・タイポグラフィ

★★★☆☆。古い。中古で買ったら間の4ページくらいが破られてた。

モーション・タイポグラフィの歴史とか見方とかその辺を意識できるようになった気がする。とりあえず、映画のオープニングはしっかり見ようと思った。

05.ActionScript3.0 ビジュアル・リファレンス

辞書は1冊あればいいだろう。Flashのヘルプで事足りるので不要かもしれない。1か月に1度開くと知らん機能を発見できたりする。

06.Advanced ActionScript 3 with Design Patterns

★☆☆☆☆。Flashでのデザインパターンはどのようにして行われるのか、そういった疑問を持ち、英語の本に手をだした。

しかし、単に他言語の教育用デザインパターンをActionScriptで書きました的内容なのがとても気になってしまった。AbstractGameのサブクラスにFootBallGameやで。どこで使うねん。Flashのために書かれたとは思えない内容で残念。

2008-04～06月に読んだ本

07.Webデザインの「プロだから考えること」

★★★☆☆。一流の人たちの作り方がほんの少しわかる

個人的には電通の中村洋基氏とimaginativeの水藤祐之氏・深澤 洋介氏の話が印象に残ってる。みんなクオリティを高めるために死に物狂いなんやなー。そらぁ、僕みたいな底辺が太刀打ちできるはずもない。そういうことを実感できただけでもありがたや。

08.FLASH OOP (AS2のやつ)

★★★★☆。オススメ。のちにAS3版がでるけど、こっちのがいい。

なにがいいかというと、Flash以外のことが書いてある。すなわち、Flash以外の本を読め！と書いてあるのと同義だ（と思う）。これを見てプログラミングの世界の広さを垣間見れたし、興味の対象も広がった。

09.Learning Actionscript 3.0

★★★☆☆。のちに和訳が出たのでこいつ（原著）は買う必要がない。和訳はこっち初めてのActionScript 3.0 Flashユーザーのためのステップアップガイド

内容は実にわかりやすい。わかりやすすぎる。コードもわかりやすいし、サンプルも興味をそそるものが多い。あと、AS3でつまづきやすいところと基礎的なところに絞られていて、無理なく読めた。デザイナ上がりで大重さんの本を読んだら次はこれか。

10.Production Studio マスター After Effects

★★★☆☆。高い。高いけど、サンプル素材がすごいらしい。

内容は初心者向け。エフェクトの一覧があるので、やさしい。Flashばかりに頼ってたら死ぬ状況もあるので、AfterEffectsは絶対覚えとかないといけないし、表現の幅も広がる。

11.Flashデザインラボ -プロに学ぶ、一生枯れない永久不滅テクニック

★★★☆☆。初心者向けだけど、むらけん氏とTeamLabがずば抜けてる。

むらけん氏とTeamLabの2つはつくりがきれいだし、解説も豊富。Flashの実践的な作り方をきちんと書いてある本はほとんどないので、それだけで買う価値はある。

12.FLASH OOP for ActionScript 3.0

★★★☆☆。OOPとは少し違う。

AS版と比べて、OOPに比重が置かれていない。初心者には難しいだろうし、上級者ならすぐわかるだろうし…といった中途半端感が目立つ。もうすこしページがあってもいいのではないか。値段も高いんだから。

2008-07～09月に読んだ本

13.Adobe Flash CS3 詳細! ActionScript3.0入門ノート2

★★☆☆☆。入門ノート1の続編。

入門ノート1がかなりわかりやすかったので買ってみた。内容はそれほど高度なことや必要性のあることでもない（FLVのキャプションはそんなに必要ないだろう）。こちらは立ち読みをして購買の検討をすればいいと思う。

14.ゲーム開発のための数学・物理学入門

★★★☆☆。最近はAS3の数学・物理学本も出たみたいなので、そっち読めばいいのではないか。僕も今買った。

この本は説明をかなりはしょるけれど、公式は暗記すればいいのでそんなのでもいいかもしれない。高校数学どまりでも読めるけど、わけわからないぜ！これを乗り切らないと野たれ死ぬだけなので頑張ろう。

15.実例で学ぶゲームAIプログラミング

★★★★☆。ゲームの世界に衝撃を受けた。

ゲーム業界のノウハウはすごい。こんな膨大な知識が埋まっているとは。

内容は単純なステートパターンから探索行動まで、きっちり書かれてる。もうここまでくるとデザイナ上がりのFlasherは太刀打ちできないレベル。しかし、ここを理解できないとそのうち野たれ死ぬだろう。ノード探索とかはしっかり覚えたいところ。

16.増補改訂版Java言語で学ぶデザインパターン入門

★★★★★。オススメ。日本人のデザパタ本。読みやすくわかりやすい。

デザパタ本はずーっとGoF本と周辺本を読んでたけど、ぜんぜんわからん。ごめん言い過ぎた、なんとなくはわかる。でも「えっ？デザインパターン？ああ、となりのクラスの？」という顔見知りレベルを脱却できない。つまりなんにも使えないのだ。

しかし、この本は相当わかりやすい。わかりやすすぎて、Decoratorパターンはそんなに使う必要がないこともなんとなくわかる。抽象化して思考することを嫌というほど叩き込んでくれるので、パターンやOOPの本質を理解できるし、どのように応用すべきかもなんとなくわかる。デザパタ本ってそういうところが重要なんだわ。

2008-10～12月に読んだ本

17.達人プログラマー―システム開発の職人から名匠への道

★★★★★。オススメ。達人がなんたるかをなんとなく理解できる。

Web業界の歴史は浅いので、なかなか達人や師匠に巡り合えない。また、Flashなんて大抵1人で開発が終了するから、技を盗むことも至難だ。Web業界における「達人から盗む」という作業は、「他の業界の達人」から盗んだ方が効率がいい。この本は徹底した達人の姿勢を教えてくれる。個人的には「割れ窓理論」がマジウケるんだけど～！

18.ゲームプログラマになる前に覚えておきたい技術

★★★★★★★★★★。超オススメ。通称セガ本。セガの偉い人が新人教育用に書いた本。

これはすごい。どうしてこういう作りの戦略をとるか、最適化を行うかなどなどありったけのノウハウを詰め込んでる。まったくノウハウがない新人に教える感覚なので、Flasherみたいな独学大王たちはこの本からものすごくたくさんのことを学べるはずだ。まじで（僕のamazonリンクから）買えばいいと思う。

19.詳説 ActionScript 3.0

★★★★☆。せめて半年前に読みたかった。もうFlash10が来てるんだぜ！

広大なアメリカ大陸から西へ西へと遥々やってきたコリンムックさんの本。さあ、ここにはいったいどんな動物がムツゴロウさんを待ち構えているんでしょうか？

ムツゴロウ「いや～かわいいですね～、これを見てください。表紙をみてください。アメリカサンゴヘビですね～。アメリカサンゴヘビは毒を持っていて、この毒が獲物の体に回るまで噛みついたまま離さないんですね～」

まとめると…「Flasher1年生は2学期からFlashの本を読むな」

みなさんお気づきの通り、ムツゴロウさんのナレーションは間違いなく不要でしたね。高枝切りバサミに付いてくる普通のハサミと同じくらい不要ですね。

それはさておき、これらを一言でまとめると

「Flasher1年生は2学期からFlashの本を読むな」

ということです。いまのところFlash本でかっちりとした構築ノウハウを提供してくれる本はあまり見かけません。それならいっそのこと他の分野からノウハウを移植したほうが効率的です。

最初の4～6ヵ月でASの基礎を固めておいて、あとはデザインパターンや数学など、他分野から吸収したほうがよさげです。

特にゲームはFlashと近いところにいます。uiがあって、ローディングがあって、動的に画面が遷移して…と、かなり似ています。衝突判定やAI、画像処理など山のようにノウハウが蓄積されています。僕は今後がっつりこっちの本を読もうと思っています。

それと、あと1冊で20冊というキリのいい数字なのにどうして19冊なのか？そう思いますよね。いや、読んでるんです。50ページ以上ね。読んでるんです。なんだったら2周読んでます。でもね、その1冊が通学路で拾ったエロ本だったんです。

よいお年を～！！

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」などは合字を使おう
• リバー（リザード）にならないように気をつける
  • 単語と単語の間が河のようにつながらないように。

コードのハイライト表示をしてくれるプラグインを突っ込んだら、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をハイライト

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に移行しろとかは言わないでください。

答え

あります。

この業界に入って1年とちょっとですか、名もなきコーダーの書いた変なコードに悩まされ、ブラウザ間の挙動に悩まされ、 IEに悩まされ、そしてハゲました。この1年ちょっとの間、ずっと考えてることがあります。世界のWebに関わる人全てでマイクロソフトを訴えたらいいのではないか。そう思っています。cssもJavaScriptもなんもかんも、不要なストレスと不要な作業をずいぶんと負っています。こないだのコーディングコンテストでもたった2ページのコーディングで10時間。うち7割がIEの対処ですからね。訴えられると思いますがどうでしょうか。

まあ、僕は訴えるとかよりも、育毛剤にしか関心がありませんので今回の件はパスしましょう。

前置きが長くなりましたが、前書いたkansaiWSでの資料の追加です。今回は表組みについてです。

tableのわりとよろしい使い方

あとはブラウザリセットですね。遅筆ですみません。

さてさて、ながらくお待たせしました。
先週2007年07月21日にアップルストア心斎橋で行われた、kansaiWSの発表資料を公開します（しかし、まだ全部はできてません、すみません）。
http://katapad.com/logs/presentation/kansaiWS_followSite/070721/

まだ全部できてなくて申し訳ないのですが、すみません、39度の熱が続いていました。今朝、やっと引きました。これは間違いなく天罰が下りましたね。僕も本当に変死するかもしれませんね。そのときは奇跡体験アンビリバボーをよろしくお願いします。

またボチボチと進めますんで、なにか質問等ございましたらこのコメントもしくはkatapadアットgmailまでお願いします。

まだドキュメントができていないのが以下です。

• ブラウザのcssを消すやつ
• table回りの解説

cssとhtmlの話はもうよそう。

いま大事なのはdlの使い方でも、clearfixのことなんかでもない。そのようなことは人類の叡智であるtableとfontがやってくれるさ。

そう、いま大事なのはグッドウィルの会長の髪型について、ボブもトムもスミスも、英語の教科書に出てくる連中みんながしゃべれるような、ごくごく簡単な語彙で形容することだ。

彼の頭はヘルメットであると。"He always wears the helmet. "