JavaScript
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1801/html5%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%83%86%e3%83%83%e3%83%97%e3%82%b7%e3%83%bc%e3%82%b1%e3%83%b3%e3%82%b5%e3%83%bc%e3%80%81%e3%80%8cpattern-sketch%e3%80%8d/’;Check 音楽クリエイターからWebクリエイターに転身あるいは同時進行中の人、私も含め多く散見される。こういう人たちはexpress（表現）+ communication（伝達）が重要なのであって、その二つを実現する手段＝触媒として、たまたま音で行うことを選んだというだけのことで、実は触媒が音だろうと画像だろうとテキストだろうとかまわない（実際にはそれらを組み合わせてwebで表現する「Web表現」というのが正しいだろう）。もし純粋に音楽を追求したいというのだったらそのままサウンドの追求に邁進するだろう（もちろん需給のバランスで本当は音楽制作を続けたかったがやむなくWeb制作に走ったという人も多いだろう）。しかしいざWebクリエイターとしてWeb表現を追求し始めると、音楽表現のノウハウが生かせる場面が非常に少ないことに気付きしばし悩む。Webは「目で見て動かして楽しむ」というプロセスが基本なのだ。そのようなWebの性質もあり、Web表現における音に関する仕様は視覚表現におけるそれより随分遅れていた。しかしここにきて、html5のオーディオ系の最新APIとクラウド環境が急ピッチで進化してきた。そのおかげでこのようなWebアプリケーションが実用レベルで作成可能になった。これはブラウザでシーケンスを組み完成させたらクラウド上でオーディオファイルを書き出し、それをe-mailやsoundclooudでシェアする、というクラウド型の音楽制作アプリケーションサービス。 http://patternsketch.com/
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1729/jsdo-it%e3%81%ab%e6%8a%95%e7%a8%bf%e3%81%97%e3%81%9f%ef%bc%93%e3%81%a4%e3%81%ae%e5%ae%9f%e9%a8%93%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/’;Checkくるくるディスプレイ くるくるディスプレイ – jsdo.it – share JavaScript, HTML5 and CSS トップページでコンテンツ内のサムネイルを並べているようなサイトで、ちょっとしたアニメーションで遊びたい、という場合などに使っていただけるのではないでしょうか。 ただ残念なことに現在、css3のtransitionの対応状況がまちまちで、webkit系（chrome safari）でしか正しく動作しないこと、さらにはrotateY(Y方向に回転)というパラメータの挙動にも差異がある（X方向に回転してしまうケースもある）という状況です。 css3 next/prev button + 簡易カウンタ css3 next/prev button + 簡易カウンタ – jsdo.it – share JavaScript, HTML5 and CSS css3で、押した時の状態も含めてどれくらいリアルに作れるかを検証しました。それだけでは寂しいのでjQueryで簡易カウンタを作成しました。使いみちは、貴方次第！ ボタンを追加し均等な幅に並べる ボタンを追加し均等な幅に並べる – jsdo.it – share JavaScript, HTML5 and CSS 「ボタンを一列に並べたい。その際、常に横幅いっぱいの大きさになるようにしたい。ボタンを追加するのは、cssをいじらずhtmlに要素を追加するだけでできるようにしたい」という要望に答えて作成したソースの応用で作ってみました。これも使い方は、貴方次第！ ※これらの実験（というか遊び）は、css3を多用しており、Google Chromeを基準ブラウザとしております。ご了承ください。
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1691/%e3%81%af%e3%81%a6%e3%83%96%e3%81%ae%e4%b8%80%e8%a6%a7%e3%82%92%e9%96%b2%e8%a6%a7%e3%81%99%e3%82%8b%e3%81%93%e3%81%a8%e3%81%8c%e3%81%a7%e3%81%8d%e3%82%8bandroid%e3%82%a2%e3%83%97%e3%83%aa%e3%80%8c/’;Checkダウンロードはこちらから はてブリーダー
Continue reading about はてブの一覧を閲覧することができるAndroidアプリ「はてなブックマークリーダー」を作ってみた。
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1648/flash%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%92html5%e3%81%ab%e5%a4%89%e6%8f%9b%e3%81%99%e3%82%8bgoogle%e3%81%ae%e3%80%8cswiffy%e3%80%8d%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf/’;Check 「Swiffy」のトップ画面。 変換前のswfを選ぶ。 重要事項にチェックをいれるとUpload and convertが活性化する コンバート完了画面。左がコンバート前のswf、右がコンバート後のhtml5。 変換前後での、挙動の違いを確認できる。 コンバート時のエラーログも出力されている。 書き出されたhtmlファイルへのリンクも生成されるので、これを右クリックで対象をファイルに保存する。 書き出されたソースコード。JSON形式でSVGのベクターデータが書き出されているのがわかる。画像はbase64変換でバイナリデータ化されている模様。 データ量は、変換前が40K,変換後が120Kくらい。約3倍になっている。 しかしSVGアニメーションとしては大変優秀な軽量化がされている。 base64化されている画像をpngなどで外部ファイル化すればもう少し軽くなるであろう。 しかし、SVGはベクターで画像を描画するフォーマットであるはずなので、 base64変換されているのはどの部分なのか、ベクターで描画されているのはどの部分なのか、ソースコードの解明をすすめていきたい。
Continue reading about FlashコンテンツをHTML5に変換するGoogleの「Swiffy」を試してみた。
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1639/flash%e2%86%92html5%e5%a4%89%e6%8f%9b%e3%81%ae%e3%83%a1%e3%83%a2%ef%bc%88%e5%85%bc%e3%80%80html5%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%aa%e3%83%bc%e3%82%b5%e3%83%aa%e3%83%b3%e3%82%b0/’;CheckFlash→HTML5はFXG形式で書き出し可能（Flash CS5以降） swfからASを抜き出すフリーソフトあり ↓ 挫折 ↓ 一からHTML5アニメを作るには・・・こんなツールがあった (for Windowsでフリーのもの) Inkscape・・・フリーのベクター描画ツール SVG形式で書き出し Blender・・・3Dアニメーション作成ツール(Blender to WebGL exporterで変換) ↓ SVGのオーサリングツールは割と充実していることが分かった。 ところで、SVGとcanvasの違いって？ SVGはベクター、canvasはビットマップで描画する ↓ Why Adobe chose FXG over SVG? → Essentially, SVG didnt map well to the Flash world.
Continue reading about Flash→HTML5変換のメモ（兼 HTML5コンテンツオーサリングツールについてのメモ）
