ThinkIT

Flash web コラム

今更ですが、ThinkITで2月に公開された記事を書かせていただきました。「気になるあのFlashバナーを作る」という特集で毎週火曜日にアップされていました。

与えられたテーマは「Flashバナーで何か」というものでした。
そのテーマに沿って自分に書けることは何か、と考えつつ書いたのですが、書いてみて分かったのは自分の未熟さばかり。
読まれた方からの反応はゼロですし、後悔したこともいろいろあるのですが、それでも様々な意味で良い勉強になりました。
例えば、こういうウェブサイトの編集がどこまで文章や内容に介入してくるか、とか、報酬金額の水準とか、そういうのを肌で感じられたことが一番の収穫でした。

文章と文字数

中でも、一番おもしろく感じたのは、「文字数の感覚」です。
私は高校大学と理系コースでしたので、文章を書くことはあってもその体裁とかはあまり気にしていませんでした。卒業論文も枚数は決まってたと思うけど、文字数に制限はなかったと思うし。そういう生活をしてきた人間にとって「xxx文字でどの程度の表現が出来るのか？」というのは未知の感覚なのです。
昔、「鉄腕DASH」という番組で、「3000歩で○○まで行けるか？」とかみたいなことをやっていて楽しく見ていたのだが（今もやってるのかな？）、そのおもしろさに似ているところがあります。
そういう意味で言うと、ショートコーディング（「何文字で同じ計算結果を出すプログラムを書けるか」というコーディング）のおもしろさも同じだと思います。
文章が苦手なプログラマの方には、「ショートコーディングなどのノリで文章を書くとおもしろい内容が書けるかもしれない」と言うと、文章を書く楽しさを伝えることができるかもしれません。
普段、blogというシステム上で文章を書いていても、この文字数制限ってあまり気になることがなかったので、文字数制限か入力文字数の指標をつけたら、何か表現の幅が広がったり、何かしら質の変化が起きる可能性も考えられます。

文字数カウントbookmarklet

上記のコラムを書くに当たって、とても便利だったbookmarkletを一つ紹介しておきます。

「文字列を選択してブックマークレットをクリックすると、文字数がポップアップダイアログで表示される」というものです。
ウェブ上のいろいろな記事を読みつつ、これを使っていると、「この段落にこの文字数なのか」とかが分かります。

SparkProject勉強会#8

Flash AS3.0 勉強会

毎月恒例のSpark勉強会、今回は項目数は少ないのですが、熱かったです！

最新情報 by Adobe　オカダさん(30min)

Adobeさんからの最新情報ですが、今回はAdobe Scene7の紹介、ということで、Adobeのオカダさんの話でした。

Adobe Scene7とは、私は初めて聞いたのですが、欧米ではすでに結構使われていて有名らしいオンデマンドリッチメディアソリューションとのこと（アメリカ Top100のECサイトのうち40サイトは使っているらしい）。日本ではまさにこれから売りはじめるところらしいです。
主にE-commerceで使えるソリューションパッケージで、データサーバのホスティングとそのデータを取り扱う仕組みをSaaSとして販売している。サービスユーザ（E-commerceの提供側）はコンテンツ（主に画像）を預けて、必要に応じて当該コンテンツを配信するのですが、同じリソースを元に7つの機能を使える。だからScene7というのかな。
その7つとは、Dynamic Imaging、eCatalgs、Media Portal、eVideos、Visual Configurators、Web-to-Print、Targetd Email & Print。まぁ、最初にこれを聞いたときには具体的にイメージが出来なかったけど、例を挙げてもらえてそれで理解できた。
要は製品の画像を一つアップする。通常であれば、それを、サムネイル用、詳細確認用、プリント用、email用、などに加工する必要があるのだけど、その加工作業をサーバ側でリクエストに応じて動的にやってくれる、ということなのだ。
その仕組みがおもしろくて、URLベースでリクエスト出来たりする。
例えば、"Jacket.jpg"という画像があったとして、通常であれば、"Jacket.jpg"とアクセスするところで、"Jacket?wid=200"とアクセスすると、幅200pixelの画像が返ってくる、ということ。この引数によるオプションは約200もあって、その中で色を変えたりも出来るらしいのだ。この色変更の仕組みはよく分からなかったけど、「ちょっと色調を変える」というレベルではなくて、服の色を全く（しかもデザインにぴったり合わせて）変えてしまうのだ。どういう画像素材が必要なのかは分からなかったけど、そのクォリティの高さはさすがAdobeという感じ。

Spark近況 by yossyさん(15min)

SparkProjectが今日でちょうど2周年！おめでとうございます！
今では、130人以上のコミッタがいて、200以上のライブラリがコミットされているらしい。一覧を見てもパッと見、分かりませんが、結構多いですね！
今回は少なめのコミットだったようです。

  • FlaProfiler
    • 説明ページが追加されたらしい！
    • FlexBuilder3のProfiler機能ライクなツール
    • ちょっと良さそうなので、週末にでも早速試してみたいところです。
  • multitouch
    • マルチタッチライブラリ
    • ソースを見るとserverがあるので、二つ同時に動かす感じかな。
  • Anime
    • Imageディレクトリ内の連番静止画を読み込み、MovieClipのように操作できる
  • chumbyas

AS3で画像処理してQRコードを読んだり by kenoさん(15min)

ロゴスウェア株式会社の上野賢一さんによる発表。
QRコードの画像解析部分を順を追って紹介されていました。個人的には画像処理をやってみたかったので、楽しく聞かせていただきました。
ちなみに、QRコードの使用は「JIS X 0510:2004」にあるとのこと。

  1. グレー化
    • ColorMatrixFilter
  2. 2値化
    • BitmapData.threshold
  3. ラベリング（3つのシンボルを抜き出す）
    • 黒い集合を順番に番号を振っていく
    • 黒:白:黒:白:黒 = "1:1:3:1:1"になっていたらシンボルと判定！
    • BitmapData.getColorBoundRect（←こんなメソッドがあったのか！）
    • BitmapData.copyPixels
    • BitmapData.floodFill
  4. 角度補正
    • Math.atan
    • Matrix.trans
    • Matrix.rotate
  5. タイミングパターン
  6. 位置合わせパターン（右下のみ）を検出
    • 読み込むときの補正に使用
  7. 読み取り完了。残りはデコーダーへ。

これを実装したものをラボサイトにアップしているらしい！とのことで、1年前の記事へリンク。
近いうちにSparkProjectにもコミットするかも、とのことで、期待しています。
今回のスライドもアップされたらうれしいなぁ。勉強したいです！

今日からあなたもコミッター by yossyさん(1hour)

最後にyossyさんによる「SparkProjectにコミットするまで」の説明でした。
これが熱い熱い！Subversionの概要から、コミッタとは？という説明などをし、Eseclockというライブラリをライブコーディングしてコミットするところまでを一気に1時間弱でやってくれました。
パッケージの説明で、ドメイン名を使うのが一般的なのですが、libspark.orgは自由に使って可ということを言っておられました。
で、ディレクトリ構成の基本形も説明。

  • Eseclock/
    • branches/ .. 習慣的に作るもの.
    • tags/
    • trunck/
      • src/ ←ソースコード（必要なものだけ）この下に"org/libspark/eseclock"
      • samples/ ←サンプル（あるといい）
桁揃えアルゴリズム

ライブコーディングの中で使われていた桁揃えのコードが、個人的には新しい感じがしたので、メモ。数値を入力したら0で詰めた2桁の数字にして返す、という関数なのですが、なるほど、これは知らなかった。

function ketaSoroe( num:int ) :String{
  return ('0'+n.toString()).substr(-2,2));
}

こういう発見が出来るのもライブコーディングのおもしろさですね。
自分もFlashDevelopを使ってるので、やってることは全部分かったし、そういう上で人の作業を見ていると少し自分のやってることにも自信が持てたりする。

その他の豆知識

WindowsのsubversionクライアントではtortoiseSVNが有名で、私も使っているのですが、このアプリの名前の読み方を私は間違って覚えていたようです。「トータス」なんですね！（発音→http://ext.dictionary.goo.ne.jp/leaf/ej/tortoise/m0u/tortoise/）今まで「トートイズ」って言っていました。。恥ずかしい。
ちなみに、MacOSXのSVNクライアントでは、Versionsが有名らしい。覚えておこう。
tagsというディレクトリには、スナップショット時のファイルが全て保存されている、とのこと。

濃密な2時間

今回もいろいろ勉強になりました！ありがとうございます！

発表資料（2009-04-08 追記）

yossyさんによる発表資料が公開されていますので、リンクを張っておきます。

ContextualGeneratorのショートカットを変更

Flash FlashDevelop

ContextualGenerator

FlashDevelopには、[Control]+[Shift]+[1]という魔法のコマンドがあります。
ContextualGeneratorという機能で、カーソルがある位置の単語に応じた自動補完機能です。
例えば、importされていないクラスを使用してる箇所で上記コマンドを入力すれば、自動でimport文を追記してくれます。(ex:以前のメモ)
他にも、変数を定義している箇所で使用すると、getter,setterの関数を自動生成してくれたり、addEventListner内でイベントハンドラとして関数名を書き、そこで実行すれば、Eventハンドラも自動生成してくれます。
ただ一つの問題は、[Control]+[Shift]+[1]という組み合わせが、片手では押しづらいこと。
そこでこの組み合わせを変更したいと思ったのですが、ショートカット一覧のxmlには書いて無くて、メニューから変更する仕組みでした。

ショートカット変更手順

[Tools]→[Program Settings...]で開くダイアログの中で設定します。
左側のカラムで[ASCompletion]を選択し、右側の下の方にある[Shortcuts]グループ内の[Contextual Generator]の項目を変更します。

私は[Control]+[Shift]+[Z]に割り当てて、片手で楽々コンテクスチャル補完しています。

うちの社長は、なぜ「ああ」なのか

本

「うちの社長は、なぜ「ああ」なのか」のプレゼント企画に応募したら当選した！

ちょっと前に届いていて読み終わっていたのですが、仕事の関係でなかなか感想が書けずにいました。ただで入手した本書、簡単で申し訳ないのですが、お礼がてら感想を書かせていただきます。

うちの社長は、なぜ「ああ」なのか

うちの社長は、なぜ「ああ」なのか

しかも開いたら著者のサイン入りでした。“「思ったら実行！！」石原明”と書かれています！

中小企業の問題

この本で言う「社長」とは、中小企業の社長が対象。ちょっとネットで調べてみたら、日本の企業のうち99.7%が中小企業らしい（「中小企業白書 2004年度版」より）
その多くの会社である中小企業のが、何かの問題で行き詰まってしまった場合、その問題のほとんどはその社長の問題であることが多い、という著者の言い分。そして経営コンサルタントである著者の経験を元にその問題を5つに分類し、その分類それぞれの対処例が載っている。

5つのパターン

5つのパターンとその対処例の概要は目次で分かり、帯にも書かれているのでここに引用してみる。

1章　「他者不信型」社長は愛に目覚めなければならない
2章　「振り回され型」社長は格闘家にならなければならない
3章　「目先没頭型」社長は仕事を忘れなければならない
4章　「振り回し型」社長は部下にマネジメントしてもらわなければならない
5章　「リスク回避型」社長はお金を使わなければならない
6章　「中小企業病」を克服するための処方箋

最初の5章でそれぞれのタイプの事例を挙げ、最後の章でまとめており、また、自己診断シートもある。ちなみに私は少々「目先没頭型」であるらしい。

まずアクション！

結局自分で考え努力してもその方向が間違っていたから失敗を続けてしまうわけで、そのもとを変化させるには考えるよりも行動が大事、ということなのだ。
考えてから行動出来る、と信じているから失敗ループに入るわけで、このシートか著者のようなコンサルか、身近な第三者かの誰かにとるべき行動を提案してもらい、それを無条件で行い、思考に変化を起こす、というのが本書のポイントである。
つまり、「パラダイム転換は想定外の行動によって起こる」という文章にヒントが詰まっている。
自分で考えて行動してそれでだめだったときの次のステップの話でもあるので、まずそのステップにたつことも重要。
なんだか最近ハマってるなぁ、と思ったときには、社長じゃなくても、自分で読むか、自分に近い人に読んでもらうと何か次のアクションが見つかるかもしれない。

SharedObjectとByteArrayのテスト

AS3.0

ActionScriptには、ブラウザで言うところのCookieのような機能を持つSharedObjectというのがある。
また、自由にバイナリデータを使用できるByteArrayというクラスもある。
どちらもあまり使ったことがなかったので、この二つを組み合わせたテストコードを書いてみた。
1回目の起動ではSharedObjectに格納し、2回目以降ではSharedObjectから読み出すだけ、というコードです。

/* TestObject.as */
package {
  import flash.display.Sprite;
  import flash.net.SharedObject;
  import flash.utils.ByteArray;
  
  public class TestObject extends Sprite
  {
    // SharedObjectのキーワード.
    public const so_name:String = "TEST2";
    
    public function TestObject()
    {
      // 読み出しチェック.
      // SharedObjectを準備して、そこにコピー.
      var so:SharedObject = SharedObject.getLocal( so_name );
      if( so.size == 0 ){
        // 1回目の起動：まだデータがないので格納します.
        var orgArray:ByteArray = new ByteArray();
        orgArray.writeUTF( "Hello" );
        orgArray.writeUTF( "SharedObject" );
        orgArray.writeUTF( "World" );
        orgArray.compress();  // 圧縮.
        
        so.data.array = orgArray;
        trace("store!");
      }
      else{
        // 2回目以降：データを取得できたので、表示します.
        var storedBA:ByteArray = so.data.array as ByteArray;
        storedBA.uncompress();  // 解凍.
        
        // 格納されているのはすべて文字列という前提で処理.
        while( storedBA.position < storedBA.length ){
          trace( storedBA.readUTF() );
        }
        trace( "done." );
      }
    }
  }
}

SparkProject勉強会#7

Flash AS3.0 勉強会

Spark project勉強会、今回も参加してきました。
記録用のメモをざっくりとまとめてアップしてきます。

最新情報 by Adobe 西村さん

the edge newsletter、Adobe Developer Connectionなどの担当もされているとのことで、日本での事例の紹介を増やしたいとおっしゃっていました。Flashのプロマネが来たときに、Flash CS4つかった上で、リクエストあれば言って欲しい。等々。
「わたしたちが届けたいコト」というプロモーションサイトも始めたらしい。このサイト内にあるAdobeTV的なチュートリアルは良い感じです。

Spark近況 by yossyさん

「MAX2009でSparkしたよ！（詳細はこちら）」という話から、怒濤の発表。
4月25日〜28日にFITC Tronto 2008があるよ、という話で、なんとShawnさんのご厚意で入場料が無料になるらしい！申し込みは3/1まで、ということなのですが、詳細はこちら。SparkProjectもセッションするらしいですよ。
FLARToolkitの話。もともとARToolkitがGPLだったらしいのですが、交渉の結果FLARToolkitに有料ライセンスが出来て、商用サイトでも使いやすくなったらしい。こういうライセンスの話は重要ですよね。
で、恒例の今月＆先月のコミット紹介。数が多いので、これは！と思ったものだけピックアップ。（にしても多い！）

  • FlaProfiler
    • FlexBuilderなしでプロファイルをチェックできる！
    • Flashユーザのための
    • メモリ状況とか？

かなり良さそうなのだが、libspark.orgにはsvnしかあがっていない様子→http://www.libspark.org/browser/as3/FlaProfiler/trunk?rev=2267

  • FFTutil
    • 2^n個のデータをFFT出来る
  • Exif
    • JPEGファイルのExif情報が取得できる
  • Next
    • 非同期処理を簡素にするためのライブラリ
    • 書き方が特徴的で、N.load("Image.png").then = ..;

非同期処理ライブラリ、何か使い慣れておきたいところ、と思い始めました。

ちょうど最近、似たようなことやっていたのですが、それは近々このblogにアップします。

この話を聞いてるだけでテンションが上がってくる。
（2009-03-04更新）yossyさんのスライドがアップされました→PDF

MAXレポートの裏側 by atsunosukeさん

flabaka.comの中の人、atsunosukeさんの発表。
この前のMAX 2009のレポートの裏話です。そのレポートというのが以下のもの。

なかなかおもしろい。
で、このレポートを書くときに考えたこととかを発表されました。
まず、どんなレポートがいいか考える。つまり「リサーチ」。
すると、時系列でまじめな文章が多いコトが分かり、それとは違う方向で書くことにした。
こんな具合で、次に「ターゲットを定める」「表現方法を検討」と非常にマーケティング的に考えてこのレポートを書かれたことが分かりました。
最後にSpark projectについても改善提案もされて、ちょっといつものSparkとは違う雰囲気でありながら、何か共感を得るような内容。
自分もこのblogをどうにかしようかと一瞬考えたが、文章に芸がないのでやっぱりやめよう、と0.03秒で考え直した。
flabakaさんのこの発表関連エントリはこちら。スライドも公開されています。

SVG on AS by nutsuさん

続いては、SVGに関するnutsuさんの発表。
最近のブラウザはSVG対応している、DOM+JavaScriptでSVGを操作できる、という話で、SVGは枯れている技術だからこそいろいろ使いやすいよ。過去のSpark勉強会でもちょっと触れられているし、という導入。
Processingも1.0になってSVGの描画に対応したので、FrocessingもSVGに対応したという。
そう、nutsuさんはFrocessingの中の人なのです。
ビューアと言うより素材利用のために実装し始めて、いくつかの基本機能を実装したとのこと。
その後は、実際にActionScriptコードを書きつつ見せてくれた。地味だけどこういうライブコーディングを絡めたプレゼンはおもしろい。
この話を聞いていると、グラフィックス素材をXMLで持っておけるのはいろいろな可能性があるように見えてきた。特に、Illustratorとの連携を考えると、いろいろな可能性があると思える。
最後のデモも、いかにもProcessingという感じがあり、なかなかかっこいい感じで、正直、SVG好きになりました！
おもしろかったです！

自前で3Dした話 by dokeさん

KAYACのdokeさんの発表。
勉強会に参加しても、自分でやらないと、本当には分からないよ、という話から始まったり、自分で何か作るべき、ということで、3Dを基本からつくってみた話。
FlashPlayer10なら、Matrix3Dがあるので、実際の計算部分は考えなくて良い、と言っていたが、なんだかなぁ。
ちなみに、Wonderflは、仕組みとしては、Flex3.2をサーバに置いているらしい。

女子的Flashデザイン by knuckleさん

さらにKAYACの中野さんの発表
まず、"Progression"使ってみた、とう話。BATHTOLOGYというサイトでProgression使ってみた感想の話。作ったサイトを見つつちょっとした要求を思い出したように言うだけ。
次の「「かわいい」とは」という話では、例を挙げて、「かわいい」「きれい」「かっこいい」の評価付けをしていた。だらだらとサイトを見続けて終わり。
うーん、Spark Projectの勉強会では、別に技術的な話ばかりをして欲しい訳じゃないのだが、なんか違うような気がした。最後にはFLASHer女子集まれ！的なことを言ってた。

BetweenAS3 Preview by yossyさん

BetweenAS3という制作中のトゥイーンライブラリの話。

「いろいろトゥイーンライブラリがあるが、「調べていたら作りたくなった！」」とのこと。この感覚はいいなぁ。
Tweenerで出来ることは出来るようになる予定で、速度、メモリ使用量も、TweenMaxは確実に超え、現在催促と言われているTweensyも超えたい、とすごい意気込み。
しかし、意気込みだけではなく、Tweensy付属のプロファイラで見る限り、現在Tweensyより高速且つ省メモリで動作しているとのこと！
エフェクトというか処理関数は、（rubyが好きなプログラマとしては）ドットシンタックスでつなげていきたい、と思った。でも結構設計が変わりそうなので、声高らかにチケットに書かず、こっそりとここにメモ。と思ったけど、やっぱり欲しい機能なので、ticketに書いてみた→（http://www.libspark.org/ticket/63）
例えば、今では、

BetweenAS3.reverse(Between.slice(t, 0.9, 1.0)).play();

となっているがこれをこうしたい、という話。

t.slice(0.9, 1.0).reverse().play();

まだ実装していない機能もいろいろあるようで、速度を落とさないように実装するのが大変そうです。がんばってください！
（2009-03-04更新）yossyさんのスライドがアップされました→PDF

ちょっと心配になる電卓

javascript web etc

リクルート内にあるMTLというラボblogに「超シンプルな電卓作ったよ」というエントリがアップされた。

で、この説明を読んでみたのだが、ちょっと心配になる。

「超シンプルな電卓」に欠けてるもの

blogっていうメディアは気軽なメディアなのだが、ある程度認知度のあるblogで紹介された記事は、google検索にヒットし、その内容を参考にされ様々なものが作られていくこともある。
MTLのような複数人数で書いているblogではちょっと別の人による精査が入っても良さそうだと思うのだが、この記事で、このblogには明らかにそういう思考が欠けているのではないだろうか。

「シンプル」という定義

「JavaScriptでevalするだけの超シンプルな電卓」と説明している。
しかし、これでは「超シンプルな電卓」なのではなく「ただ何も考えていない危険な電卓」ではないのか？
例えば次のような文字列を入力してみよう。

document.body.innerHTML="DANGER?"

これを参考にして、「入力された数式の計算結果をサーバにリクエストしてどうのこうの」という仕組みを誰かが作って、そのリクエスト文字列の影響で情報が漏洩したりしても、その賠償責任はさすがにMTLにはこないだろうけど。

実際どうなのか？

自分自身セキュリティの専門家ではないので、evalは何となく危なそうだなー、と思っているだけですが、実際そんなに危なくないのかな？
どこかJavascriptの限界があり大丈夫な仕組みなのかな？

JavaScript 第5版

JavaScript 第5版

危険ではないらしい（追記　2009-02-22）

はてブでコメントいただきました。ありがとうございます！
はてブより、id:hirokidaichiさん曰く

危険ではない。JSのセキュリティに関する認知が低いのかもしれないなぁ。これを保存して他人が見れるようになったら問題。

なるほど、危険ではないのか。
もう一つ、はてブより、id:mogyaさん曰く

ボクも一瞬危険な気がしたけど、具体的なリスクが思いつかなかった。他人がマッシュアップして自爆することまでは責任とれないよ。

mogyaさん同様、私も「一瞬危険な気がした」のです。自分がもし同様のことをやろうとしたら、入力された文字列に文字種制限を入れて、それ以外の入力があったときにはエラーなりワーニングを出すだろうな、と思うのです。
でも、こういう問題って、危険な理由が思いつかないから危険ではない、というところで締めくくっていいのか？と思うわけです。
それを言ってたら何もできなくなりそうですが、それでも予想しうる限りのセキュリティ対策はとっておきたいなと。危険な可能性があるならその可能性を知っておきたいなと。
（ちなみに自分はセキュリティとか専門家でも何でもないです）
こうなると、「Javascriptでform入力文字列をそのままevalすることが、危険ではない理由」もしくは「Javascriptでform入力文字列をそのままevalすることが、危険である理由」を知りたくなってくる。
こういう問題は、想像をふくらませつつ、勉強するしかないですね。