Daidiru | 代汁

イイ人 | iihito

daijima — Fri, 18 Nov 2011 11:19:02 +0000

イイ人 | iihito

「イイ人」こと夏井瞬という男がいるのですが、彼のサイトがリニューアルされたようなので紹介します。
何だかようわからんけど反響はすごいみたいなので良かったら見てやってください。
ちなみに私も出ていたりします。

インバースキネマティクス

daijima — Tue, 20 Sep 2011 05:57:04 +0000

インバースキネマティクスの習作。

ドブえもんによるエクトプラズム曲芸。
こんな風に自分のエクトプラズムを自在に操って曲芸してみたい。
ボールをドラッグできますのでドブえもんのエクトプラズムと思う存分戯れてみてください！

Dobuemon’s Ectoplasm – wonderfl build flash online

Away3D3.6

daijima — Thu, 15 Sep 2011 07:24:40 +0000

Away3D4.0の開発が絶賛進んでるけど、FlashPlayer10対応のAway3D3.6を一足遅れていじってみた。

日本有数の心霊スポット、その名はドブえもんトンネル。
ずーーーっと見てると気分を悪くする場合がありますのでくれぐれもご注意ください。
当方では責任を負いかねます。

Dobuemon Tunnel – wonderfl build flash online

【フラッグ・メッセージ】〜私を、あなたに伝えたい。〜

daijima — Wed, 14 Sep 2011 05:17:12 +0000

【フラッグ・メッセージ】〜私を、あなたに伝えたい。〜

コクリコ坂×KDDIのキャンペーンサイトの制作に関わらせていただきました。
〜私を、あなたに伝えたい。〜をテーマに、コクリコ坂の舞台である横浜で撮影会を実施。参加者の“伝えたいという気持ち”をU・W旗をモチーフにしたメッセージボードにのせて撮影しています。全8回の撮影で多くの人に参加いただきました。それらの写真をwebサイト上で公開し、伝えるというテーマのもと表現しています。またサイト上のデザインやモーションも旗をイメージして制作しました。
(2011年8月31日をもちまして公開終了いたしました。)

のどごしカンパイマーチ

daijima — Fri, 05 Aug 2011 10:07:31 +0000

のどごしカンパイマーチ

のどごし<生>のキャンペーンサイト、「のどごしカンパイマーチ」の制作に関わらせていただきました。

Twitterのアカウントを利用してサイト上でマーチに参加できたり、
インスタントくじをすることでのどごし<生>の商品やイベントの参加権利が当たったりするサイトになっています。

ユーザーが参加することによりサイト上に自分のアイコンが現れ、他の参加ユーザーのアイコン達と一緒に楽しげで賑やかにマーチすることで、商品との親近感を訴求しています。
(2011年8月31日をもちまして公開終了いたしました。)

SKYACTIV TECHNOLOGY | Voice Parking

daijima — Fri, 05 Aug 2011 10:07:16 +0000

SKYACTIV TECHNOLOGY | Voice Parking

「SKYACTIV TECHNOLOGY | Voice Parking」の制作に関わらせていただきました。
MAZDAの新技術SKYACTIV TECHNOLOGYに関する世の中の声を集めて視覚化したサイトになっています。
News記事やTwitter等のつぶやきを地面に描き、そこに人が集まる様子を微速度再生することで、話題が世の中で絶え間なく更新されている様子を表現しました。
更に引きの映像とヨリの映像を同期させ、様々な角度から観て楽しめる演出を盛り込んでいます。
(このサイトは公開終了しました。)

Aqua Contents Produce

daijima — Fri, 01 Apr 2011 04:18:20 +0000

Aqua Contents Produce

株式会社アクアコンテンツプロデュース部のサイト制作に関わらせていただきました。
株式会社アクアはイラストレーションやキャラクターの制作を中心に、企業や商品の個性を見出し、独創性のある表現を創り、人とモノ、人と企業、さらには人と人の架け橋となることを企業理念にしていらっしゃる制作会社さんです。
今回、制作に関わらせていただいたのは、そのアクアの中でWEBコンテンツの企画・制作を行っているコンテンツプロデュース部のサイトです。

“夢”を精一杯詰め込んだつもりです。ご覧いただけたら幸いです。

関係者の皆様、お疲れさまでした。

daijima.jpのホームページ

daijima — Thu, 10 Mar 2011 07:27:37 +0000

daijima.jpのホームページ

daijima.jpのホームページを作ってみました。

TwitterだのFacebookだののSNSに押されて、個人のホームページからエネルギーが失われつつある昨今のネット社会を憂い、嘆き、少しでも「個人ホームページ熱いぜ！」という流れを取り戻すために、SNSのやつらに唾を吐くべく、自分のホームページを作るに至りました (嘘)。

個人ホームページの覇権を取り戻すぞー！！（おおげさ）

おふざけはこのくらいにして、技術よりの補足をいくつか。

iPhoneでも閲覧可能にしたかったのでHTML5で作りました。
また、iPhone SafariではJavaScriptでタッチイベントを取得できるので、マルチタッチにも対応させました。iPhone上でのインタラクションも可能です。（ぶっちゃけiPhoneで見ると、もっさもさの動きですけど。。。）iPadや他のスマホでは表示、動作確認をしていないので、おかしなことになっているかもしれません。

Canvasに対応していないIEに関しては、excanvas.jsなどのCanvasをエミュレートするJavaScriptライブラリを利用することで、Canvas用のJavaScriptコードを再現できますが、表示がうまくいかない箇所があったり、動きが激遅だったりしたので、今回は代替Flashを表示させることで対応しました。ですが、同じ見た目、同じ挙動のものを「HTML5+JavaScript版」と「Flash版」の2パターンを作るというのは、当然工数もかかってくるので、実案件の際には、この問題をどう対応していくべきか、今後検討していかなければと思っています。

Blender ショートカット・キーや操作メモなど

daijima — Fri, 31 Dec 2010 14:42:35 +0000

Blenderで個人的によく使うショートカット・キー。
※今後も加筆、修正していく予定です。

●ファイル入出力

ファイル読み込み	[F1]
名前をつけて保存	[F2]
保存	[Ctrl] + [W]

●視点変更

トップビュー	テン･キー[7]
フロントビュー	テン･キー[1]
サイドビュー	テン･キー[3]
カメラビュー	テン･キー[0]
3Dカーソルを原点に	[Shift] + [C]
3Dカーソルを視点の中心に	[C]
3Dカーソルを選択オブジェクトの中心に	[Shift] + [S] + [4]
全体表示	[HOME]

※[Ctrl]を押しながらで、反対側の視点になる。

●3Dウインドウの操作

平行移動

[Shift] + [中マウスボタン]をドラッグ

回転

[中マウスボタン]をドラッグ

※[C]で、回転の中心を3Dカーソルの位置に変更できる。

拡大・縮小

[マウスホイール回転]
or
[Ctrl] ＋ [中マウスボタン]
or
テン・キー[+]/[-]

※テン･キー[Enter]を押すと、拡大率がリセットされる。

●選択

単一選択	[右クリック]
複数選択	[Shift] + [右クリック]
矩形選択	[B]を押した後、[左クリック]以外もしくは[Alt]＋[左クリック]で囲む
全選択・全選択解除	[A]
範囲選択	[B]
エッジループ選択	[Alt] + [右クリック]
Vertex選択モード	[Ctrl] + [Tab] + [1]
Edge選択モード	[Ctrl] + [Tab] + [2]
Face選択モード	[Ctrl] + [Tab] + [3]
ループ選択	[Alt] + [右クリック]
選択した辺と平行になっている辺や面を選択	[Ctrl] + [Alt] + [右クリック]
投げ縄選択	[Ctrl] + [左クリック]

●編集

メニューを表示	[Space]
移動	[G]
拡大縮小	[S]
回転	[R]
選択オブジェクトの消去	[X]
数値入力で移動	オブジェクト移動中に[テンキー]で数値を入力。[Ctrl]でキリの良い数値になり[Shift]で元の数値に戻る。 or 3Dビュー上で[N]を押してプロパティ画面を出し数値を入力。項目にマウスカーソルを乗せた状態で[Ctrl] + [C]で数値のコピー、[Ctrl] + [V]で数値のペースト。
Specialsを表示	エディットモード時に[W]
重なっているオブジェクトの一覧表示	[Alt]を押しながら重なっている箇所を[右クリック]
Undo	[Ctrl] + [Z]
Redo	[Alt] + [Ctrl]+ [Z]または[Shift] + [Ctrl] + [Z]
キャンセル	[Escape]
選択部分を隠す	[H] 隠した部分を再度表示する場合は[Alt] + [H] 選択した部分以外を隠す場合は[Shift] + [H]
マージ	[Alt] + [M]
頂点の分離	[V]
EditModeとObjectModeの切り替え	[Tab]
Proportional Vertex EditingのOn/Offの切り替え	[O]
押し出し	[E]
ナイフ	[K]でLoop/Cut Menuを表示してKnifeを選択
ループカット	[K]でLoop/Cut Menuを表示してLoop Cutを選択 or [Ctrl] + [R]
四角ポリゴンから三角ポリゴンへ変換	[Ctrl] + [T] さらに[Ctrl] + [Shift] + [F] で対角線を切り替えられる
三角ポリゴンから四角ポリゴンへ変換	[Alt] + [J]
選択メッシュの結合	EditMode時に結合したいメッシュを選択して[Ctrl] + [J]
オブジェクトの結合	ObjectMode時に結合したいオブジェクトを選択して[Ctrl] + [J]
すばやく簡単にポリゴン数を減らす	Decimate モディファイア ※EditMode ではその変更を見ることができない
Transform Propertiesパネルの表示	[N]
シェーディング / ワイヤフレーム表示切り替え	[Z]
UV展開	[U]を押してUnwrapを選択
切断面の定義	[Ctrl] + [E] を押してMark Seamを選択
鏡面コピー	[Shift] + [C]で3Dカーソルを中心線に持ってくる ↓ [Shift] + [S]でメニューを開き、Cursor Gridを選択 ↓ Pivotを3D Cursor ↓ [Shift] + [D] → [Enter]で同じ位置にアイテムコピー ↓ [Ctrl] + [M]を押した後に、[X] or [Y] or [Z]を押して、鏡面コピーを作りたい方向を決めて、[Enter]
法線方向の表示	[Edit Mode]→Editing]→[Mesh Tools More]タブ内の[Draw Normals]を有効にする。ブルーのラインが表示されている面が表。ラインの長さは[NSize:]の数値にて変更可能。
法線の反転	[W] → [Flip Normals]を選択

Blenderでモデリングしたデータにメッシュアニメーションをつけてみた。

daijima — Tue, 30 Nov 2010 04:37:19 +0000

以前作ったこれにメッシュアニメーションをつけてみた。せっかくなので音に合わせてダンスさせてみた。（ダンスというよりただの顔芸。）

Dancing Dobuemon – wonderfl build flash online

実装の流れは、メッシュアニメーション作成→メッシュデータをmd2形式で出力→md2をAway3DLiteで読み込んで表示。

Blenderでモデリング

daijima — Thu, 28 Oct 2010 06:26:21 +0000

Blenderでモデリングの練習。
Twiiterアイコンとして使わせてもらっているドブえもんを3D化してみた。

Dobuemon ~With Suneo’s Theme~ – wonderfl build flash online

わりとキモいです。ごめんなさい。
ついでにスネオのテーマを添えてみました。

3Dソフトの扱いはド素人かつ完全に我流。とはいえ、俺、モデリング下手くそ。
自分を戒めて今後頑張る意味で晒してみる。
モデリング自体はとても楽しい作業なので、三日坊主にせず、今後も時間を見つけて続けていきたい。なので、ざっくりとした目標をたててみる。半年後にこれを見て、クオリティのひどさに顔を赤らめるくらいのスキルアップはしたいところ。（現時点でも十分恥ずかしさはありますが。。）

あとは、メッシュをいじってフェイスアニメーションを入れたかったんだけど、ColladaにうまくExportできなかったので、あとでやる気が出たら、Pythonなどいじったりして頑張ってみる。

HTML5 Canvasをいじってみた。

daijima — Thu, 30 Sep 2010 04:01:15 +0000

昨今のHTML5の流れに乗っかって、Canvasをいじってみることに。
即席3Dライブラリを作って、Canvasがどんなものか、処理速度、描画速度はどんなものか等々、もろもろの挙動を体感してみた。
せっかくなので、jsdo.itに投稿した。今更ですが、wonderflとともに本当に素晴らしいサービスですね。ありがとうございます。

変体 – jsdo.it – share JavaScript, HTML5 and CSS

Canvasの描画精度が低いのか自分の作り方が悪いのかわからないが、stroke()で線を引くと微妙にずれたりして、線が重なってる部分が汚く描画されてしまう。そもそもstroke()で線を引かないと、Triangle間に隙間ができてしまう。。。
とりあえず動けばいいレベルの実装なので、ちょっとずつブラッシュアップして汎用化しつつ機能を追加していけたらと思います。

以下今後のタスクなど。
・HTML+css+Javascriptの開発環境を整える。
・prototypeをひさびさに使ったが、若干しっくりきてないので慣れておく。
・asでいうところのpublicだのprivateだのstaticだのは、今回は何も考えずに実装してるので、実案件でそれなりの規模のものを作れる準備として、今後詰めていきたい。

ナビで地上絵―TOKYO ZOO PROJECT

daijima — Tue, 31 Aug 2010 04:14:46 +0000

ナビで地上絵―TOKYO ZOO PROJECT

『“nav-u”presents ナビで地上絵―TOKYO ZOO PROJECT』キャンペーンサイトのFlash制作を担当させていただきました。

“nav-u”（ナブ・ユー）『NV-U35』を使用して、東京に世界最大の動物園を開園させてしまおうというGPSアートプロジェクトです。“nav-u”の走行ログ機能とGoogle Mapを連携させて、たくさんの動物を入園させました。

動物の地上絵は、「TOKYO ZOO PROJECT制作委員会」が実際に街を自転車走行・歩行した上で作成しています。
また、動物ごとに、制作委員会が走っている道中で見つけたカフェや、お勧めしたい景色等の楽しい「おでかけポイント」も紹介しています。

Twitterの公式アカウント（@tokyozoopj）で、ユーザーから描いてほしい動物を募り、そのツイートの中から制作委員会がピックアップし、実際にコースを作成・公開していきました。
当初は10種類の動物を入園する予定でしたが、最終的には全部で15種類の動物達が入園しました！
この15種類の地上絵の膨大なGPSデータを、いかにGoogle Map上に描画負荷をおさえて表示させるかに、個人的には苦心したところでもあります。

『NV-U35』を使うと、自分でも同じように地上絵を描くことができます。走行ログはPetaMapで共有したり走行軌跡（GPSログ）をKMLフォーマットで記録し、対応アプリケーションで表示することも可能です。当然Google Mapに表示することも可能ですので、興味のある方は、ぜひ挑戦してみてはいかかでしょうか。

Google Maps API For Flash

daijima — Fri, 30 Jul 2010 10:37:18 +0000

先日、某案件でGoogle Maps API For Flashを使ってごにょごにょしたので、
自分なりに感じたことや注意点をメモっとく。

APIキーに関して

Google Maps APIを使用するには、ここでGoogle Maps API For Flashを使用するサイト（またはアプリ）のドメインを指定してAPIキーを取得する。
取得したAPIキーは、Flashで開発する場合は以下のようにASのコード内で指定する。

map.key = “取得したAPIキー”;

APIキーはSWFファイルにコンパイルされ、SWFファイルがホストされているドメインと一致する必要がある。
なので、開発環境、テスト環境、本番環境など、各環境でドメインが違う際には、予め各ドメインごとにAPIキーを取得しておいて、ドメイン判別してそれぞれにAPIキーを設定してあげる作りにしておくと良いかもしれない。

var _url:String = loaderInfo.url;
if(_url.indexOf(”honban.jp”) >= 0) map.key = “honban.jp用のAPIキー”;
else if(_url.indexOf(”test.com”) >= 0) map.key = “test.com用のAPIキー”;
else if(_url.indexOf(”dev.co.jp”) >= 0) map.key = “dev.co.jp用のAPIキー”;

Map3Dに関して

※以下2010年7月現在の最新版であるVersion 1.18に対しての内容

・地図を3Dで見せたい時などはMap3Dクラスを使用する。
使い方はここを参考。
ただMapクラスに比べると、Map3Dクラスは地図画像の読み込みや描画が若干遅いようだ。

・Map3Dクラスは、デフォルトだと黄色の枠が表示されてしまう。これはAPI独自のキーボードイベントが有効になっていると出てしまう枠のようだ。黄色枠を消したければ、キーボードイベントを無効にする。

map.disableControlByKeyboard();

黄色枠は気になるけど、キーボード操作をさせたいのであれば、API独自のキーボードイベントを使わずに、Flashのネイティブキーボードイベントを使用して、自分でキーボード操作の仕組みを作った方がよさげ。

・地図にパースをつける。

地図にパースをつけたい時は、Map3DインスタンスのsetAttitudeメソッドに対してAttitudeクラスのインスタンスを指定する。

Attitude(yaw:Number, pitch:Number, roll:Number)

例えば、30度Pitch回転させたい時は以下のように指定する。

map.setAttitude(new Attitude(0, 30, 0));

ただ、傾ければ傾けるほど描画処理が重くなるようなので注意が必要。

・ドラッグを無効にする。

map.disableDragging();

・ダブルクリックを無効にする。

map.setDoubleClickMode(MapAction.ACTION_NOTHING);

・マウスホイールでのZOOM機能はAPI独自の機能を使わずに自分でZOOMの仕組みを作った方がいい。
理由は、Macのfirefoxで動作しないし、細かい動きの設定などができないから。
ちなみにAPI独自の機能を使う場合は以下のように指定する。

map.enableScrollWheelZoom(); //マウスホイールで拡大縮小できる
map.enableContinuousZoom(); //スムースな拡大縮小ができる

・地図上を滑らかに移動、寄り引きをさせる。
個人的な感覚だが、setCenterメソッドが、一番滑らかに移動できた。
panToやsetZoomなどメソッドは何種類か用意されているが、setCenterが一番良さげ。
このsetCenterメソッドをENTER_FRAMEイベントとかトィーンライブラリのUPDATEイベントの中で処理して、
アニメーションさせるとそれなりに滑らかに動く。

public function setCenter(latLng:LatLng, opt_zoom:Number, opt_mapType:IMapType = null):void

・Parameters
latLng:LatLng — Coordinates for the new center.
opt_zoom:Number — New zoom level.
opt_mapType:IMapType (default = null) — New map type.

・ズームの範囲。
ズームは0〜21くらい（すごいアバウトw）までの数値で指定できるようだ。0が一番引き、21が一番寄り。

Polylineに関して

Polylineオブジェクトは、地図上に線形のオーバーレイを作成する。
Polylineは一連の点で構成され、これらの点を指定された順序に結ぶ連続した線セグメントを作成する。
KMLデータを元にPolylineを描画することもできる。
点（緯度経度）が多すぎると画面描画処理が重くなるので注意が必要。
個人的な感覚では、20,000ポイントくらいがまともに動く限界の数といったところ。
エンコード化ポリラインを使用すると、描画処理も軽くなる。
これは地図のズームレベルによって、ラインの精度をコントロールできるらしい。詳細地図の場合は詳細なポイントを、粗い地図の場合はポイントも粗くして表示速度を得ているらしい。

注意点やもっとこうして欲しい点はあるけど、
やっぱりよくできてる、すごいぞGoogle Maps API！！

After Effectsでループ作成

daijima — Tue, 01 Jun 2010 05:07:49 +0000

やるたびに毎回忘れているのでメモ。
はいすいません、またまた備忘録メモです。

フッテージをループさせるには、ビジュアルフッテージをプロジェクト内で連続してループする場合は、
After Effectsで1サイクルのみのフッテージを作成すればよい。
手順は下記のとおり。

１．プロジェクトパネルで、ループさせるフッテージを選択する。
２．ファイル／フッテージを変換／メインを選択する。
３．「ループ」に整数値を入力して、「OK」をクリック。

以上。
いいかげん覚えろ、俺。