『[HTML5メモ] 追加された文書構造化タグ #1』のつづき。 asideタグ サイドバーなど、メインのコンテンツ部分と明確にわかれる部分をくくる。 navタグ ナビゲーションをくくる。 <nav> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="corp.html">会社概要</a></li> <li><a href="access.html">アクセス</a></li> </ul> </nav> 『[HTML5メモ] 追加された文書構造化タグ #1』と併せると、HTML5だと次のような文書構造になるんだと思う。 HTML5の文書構造化タグを利用したレイアウトイメージ navはheaderに入れなくてもいいかも。 参考 HTML 5のレイアウト要素（1/4）：CodeZine HTML 5 ― HTML 4 か

やりたいこと バッジ（インストールボタン）をウェブページに配置し、クリックされるとシームレスインストール（Adobe AirランタイムとAirアプリの同時インストール）が開始するようにしたい。 はまったとこ badge.swfを使ったシームレスインストールを実装しようとしたところ、バッジをクリックしても、Adobe Airのインストーラー画面が現れず、シームレスインストールが動作しなかった（Windowsの話。Macは動作した）。 シームレスインストールの実装サンプルはAdobe AIR SDKをダウンロードすると同梱（[samples]-[badge]フォルダ）されているので、badge.flaを編集してバッジを作る。 badge.swfを使ったシームレスインストール実装は、書籍『Flashで作る AIRアプリケーション レシピブック』を参考に。 シームレスインストールが動作しなか

メモ1 次のようにウィンドウの最大サイズを指定しておくと、stage.nativeWindow.maximize();で全画面にならずに済む。 stage.nativeWindow.maxSize = new Point(502, 454); メモ2 ウィンドウリサイズ時、ウィンドウサイズを取得するには、stage.stageWidthではなく、NativeWindowBoundsEventクラスのafterBounds.widthを見るようにする。 stage.nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZE, resizeHandler); // ボタンの位置をウィンドウサイズに合わせて変更 private function resizetHandler(e:NativeWindowBoundsEvent

SCRATCHBRAIN.NETのトップページにツールチップをつけようと思い、qTip.jsを使用。 qTip.js と qTip.css 取得ページ Tip › Code › Learn Fireworks/Code › qrayg.com 利用手順 1.qTip.js と qTip.css 読み込み <script type="text/javascript" src="js/qTip.js"></script> <link href="css/qTip.css" rel="stylesheet" type="text/css" /> 2.ツールチップで表示したいテキストを<a>タグのtitle属性に書く （ツールチップ内のテキストは<br />タグで改行もできる！） <a href="http://www.scratchbrain.net/blog/ver2/" title

『bulk-loader - Google Code』で公開されているBulkLoaderクラスは、複数のファイルのローディングをまとめて行うときにとても便利なクラスです。 たとえば、example.jpgとexample.xmlをロードすると、そのローディング経過と両方のロードが完了したタイミングのイベントが拾えます。 サンプルソース BulkLoaderの使い方 （サンプルソース見るのが一番てっとりばやいかも） １.import import br.com.stimuli.loading.BulkLoader; import br.com.stimuli.loading.BulkProgressEvent; 2.BulkLoaderのインスタンス生成 private var loader : BulkLoader ;loader = new BulkLoader("main");

Tweensyで色操作したかったので、パラメータを試せるのようなものを作成。 ColorMatrixFilter利用の流れ 1.import import flash.filters.ColorMatrixFilter; import com.flashdynamix.motion.extras.ColorMatrix; 2.TweensyGroupインスタンス生成 tween = new TweensyGroup(); 3.画像配置 var _img:Bitmap= new Bitmap(new Img(200,160));// ImgはFlashのライブラリで書き出した画像データ addChild(_img); 3.tween実行 tween.to(new ColorMatrixFilter(), new ColorMatrix(_b, _s, _c, _h), 2, nul

minimライブラリに標準で用意されている7つのエフェクトと、minimのAudioEffectクラスを拡張して作成されたエフェクト（[File]-[Examples]-[Libraries]-[Minim (Sound)]-[User DefinedEffect]で使用されている『ReverseEffect』）を使ってみた。 表示（音が出ます） サンプルソース エフェクトさせる手順 上のサンプルをもっと簡略化したもの。 // ライブラリをインポート import ddf.minim.*; import ddf.minim.effects.*; // 定義 Minim minim; AudioPlayer player; HighPassSP highPs; void setup(){ // minimインスタンス生成 minim = new Minim(this); // プレーヤ

ボタンをクリックすると色が一瞬変わるだけのサンプル 表示 ソース 次の3つの条件を使うことで、Processingでボタンを作成。 ボタンの上にマウスがあるか マウスがクリックされたか マウスが離されたか ボタンの上にマウスがあるか ボタンの上にマウスがあるかどうかは、mouseX、mouseYを使って判定。 ボタンの上端、下端、左端、右端の座標とマウスの位置を、次のようなif文で比較。 if(mouseX > ボタンのx座標 && mouseX ボタンのy座標 && mouseY マウスがクリックされたか マウスがクリックされると、mousePressed()メソッドが呼ばれる。 mousePressed()メソッドはスケッチのどこをクリックしても呼ばれるので、ボタンの上にあるときだけ反応するようにするには、さっきの「ボタンの上にマウスがあるか」判定と組み合わせる。

どうやら近頃、ポストTweenerとして期待を集めているTweensy。 参考記事 Tweensy トゥイーンライブラリが面白そう（trick7） Tweensyが早いらしい（storage.goodmix） TweensyとSWF Profiler（Relishable Blog） Tweensy Originalを使って、イージングパラメータテスト & コード生成できるようなものを手始めに作っておいた。 パラメータ変化させて『tween開始』を押すと、実行。 次のようなソースが生成されます。 Tweensy.fromTo(testObj,{x:15,y:15}, {x:350, y:250},2,Back.easeIn,0); パラメータは順番に、次のようになります。 Tweenさせるインスタンス、 Tween開始位置、 Tween終了位置、 Tween所要時間（秒）、

クラスがどんなものか知らない人に、まず簡単に『クラス』について。 クラスとは 4色ボールペンを例に考えてみます。 4色ボールペンの芯は中に入っているインクの色は違えど、形状や機能は同じです。 製造工場で生産するときは、きっと芯の形状は同じ生産ラインで作って、インクを入れるときだけ個別の処理を行うことで、合理化をはかっているんじゃないかと思います。 このように同じような意味合いを持つ部品を、ひとつのくくりとすることをプログラムの世界では『クラス』と呼びます。 よくわからなくても、実際にクラスを作ってみると、感覚としてわかると思います。 今回、Processingでクラスを使ったのは、次のサンプル。 画面をクリックするとランダムな色・サイズ・位置の10個の円が切り替わります。 表示 円は色・サイズ・位置は違えど、基本的な形状、機能は同じなので、『クラス』化することが可能です。 クラス

Movable Type 4.2x でテンプレートをいじっていたら、ブログ記事の確認画面でつぎのようなエラーが出る。 Can't call method "entry_based" on an undefined value 原因 ブログ記事のテンプレートで、を使っていたことが原因。 解消 をに変えることで解消。 よかった。 参考記事 MT4の覚え書き - 中川陽平 MovableType4.2 (akiblog)

Web Premium をインストールして本格的にFlash CS4。ここのところ、縦書きを使うものを作っていたので、その過程で出てきたことを、ひとつ。 Flash Player 10 になって、ActionScript 3.0でテキスト表示をするには、2つの方法が用意されている（flashx.textLayout系もあるけど）。 1.flash.text系（TextFieldクラス）を使う 2.flash.text.engine系を使う flash.text系はこれまでもあったやつなので最後に少し触れるだけにして、flash.text.engine系の話。 flash.text.engine系は、ただテキストを表示するだけでも結構まどろっこしい。 少しでも単純にするために、縦書きじゃなくて、横書きで考えてみる。 次のようなことをしたかった場合。 TextFieldでいいじゃん、と思

Category Map 表示（要 Flash Player 10） 作ったものの概要 Movable Type からブログのカテゴリーと数を出力して、そのデータをもとにFlashでツリーマップを作成（どのカテゴリーのエントリーが多いか、視覚化） 考え方 ツリーマップは、位置、サイズ、色で表現するので、それぞれで使用する情報を決める。 位置と色は、カテゴリー同士のグループや親和性で決定。 サイズはエントリー数。 おまけ Flash Player 10の縦書きを使ってみた。 縦長のエリアに表示するときは、縦書き。 横長のときは、横書きって感じに。 ツリーマップについてはgihyo.jpの『具体例で学ぶ！情報可視化のテクニック』を参考に。『第3回　ツリーマップによる木構造の可視化（前編）』あたり。 Flash CS4のUIは改良がいろいろされたかいあって、CS3よりたしかにつかい

フォント指定の流れ 1.[Tools]-[Create Font]を選択 2.フォントとサイズを指定して、『OK』 dataフォルダにフォントが書き出される。 3.次のようなソースを記述 // 書き出されたフォントの名前を指定 PFont font = loadFont("AppleCasual-30.vlw"); textFont(font); // フォントの色を指定 fill(0); // 整列を指定 textAlign(CENTER,CENTER); // 文字列、x座標、y座標を指定 text("Hello World",width/2,height/2); 参考 Processing 1.0 APIリファレンス PFont

『ビジュアライジング・データ』に載っているサンプルを参考に、都道府県の人口データをProcessingで視覚化してみた。 2005年都道府県人口マップ表示 x軸は緯度、y軸は経度、円のサイズは面積、色は人口で決定。 データは、すべてWikipediaから。 日本の緯度経度一覧 - Wikipedia 都道府県の人口一覧 - Wikipedia 都道府県の面積一覧 - Wikipedia 使用したのは2005年の人口データだけど、これが正しいデータだとして、東京周辺はやっぱり人口が集中。 そんな中、山梨県の人口が少なく、全国41位。 東北地方はもっと少ないのかと思っていた。 日本地図と人口をこうやって結びつけて考えたことなかったかも。 比較したくなったので、つづいて1920年の人口データを使ってみる。 1920年都道府県人口マップ表示 全国的に少なくて、茶色や赤いとこはない。 中間の年とかや

標準ライブラリのひとつ、minimライブラリを使えば、mp3ファイルの読み込みや波形出力が簡単にできる。 mp3ファイルを再生するだけなら、ソースは6行。 // minimライブラリをimport import ddf.minim.*; // 変数定義 Minim minim; AudioPlayer player; // インスタンス生成 minim = new Minim(this); player = minim.loadFile("test.mp3");// ロード // 再生 player.play(); setup メソッドとdraw メソッド 『Built with Processing』を流し読みしていたら書いてあったんだけど、初期化処理とメインのループ処理をそれぞれsetup メソッドとdraw メソッド内に記述して構造化するのがいいみたい。 今回のmp3再生だと次のよ