HTML5
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/1707/html5%e3%81%a7iphoneandroid%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8d%e3%81%86-phone-gap%e5%85%a5%e9%96%80-1/’;CheckHTML5によるAndroidアプリ「はてぶリーダー」を作るにあたり利用したのがこの「Phone Gap」というツールである。 HTML5によるアプリ制作の利点としては、iOS向け、Android向けを問わず、ひとつのプログラムソースから各プラットホームに対応したネイティブアプリを生成可能である点があげられる。 私も代表的なオーサリングツールのひとつ、PhoneGapを使用しまずはAndroidのネイティブアプリ作成してみた。 基本的な流れは 1.Eclipseの準備（Android開発環境の構築と同様） 2.HTML5コンテンツの作成 3.PhoneGapによるアプリの生成 4.アプリ(.apk)のアップロード 5.ダウンロード用ページの作成 6.端末にダウンロード となる。 詳細は文末のリンク先の記事を良く読むことで、 自作アプリのオーサリングの方法がわかる。 実は何も知らない私がしばらくの間疑問だったのは、 Phone Gapにより生成された多くのファイルのうち、 どのファイルをアップすればよいのか、という点。 フォルダ丸ごと？それともひとつでいいの？ これについては調べたらなんてことはない。 生成された.apkファイルひとつをサーバーに上げるだけでよい。 \workspace\プロジェクト名\bin\ 内の、拡張子が.apkのファイルをサーバに上げる。 このアプリを勝手サイトからダウンロードし端末に登録するには、 Androidマーケット以外からダウンロードしたアプリのインストールを許可する設定を行う。 方法は、ホーム画面でメニューボタンを押して[設定]を選択→[設定]から[アプリケーション]を選択→[アプリケーション設定]の[提供元不明のアプリ]をチェック。 以上、まずは簡単にPhone Gapを使ったiPhone/Androidアプリの作成方法をざっと紹介してみた。 感想としては、HTMLで手軽にアプリを作れるから、僕のようなプログラムに疎い人間も夢が広がる。 敷居が低いということは、無条件に、良いことだ。 参考サイト(1) Phone Gapのインストール～アプリの作成まではこちら http://phonegap-fan.com/install3.php 参考サイト(2) 1)で作成したアプリをサーバに上げAndroid端末にダウンロードするまで http://gihyo.jp/dev/serial/01/androidapp/0003?page=1
Continue reading about HTML5でiPhone/Androidアプリを作ろう (Phone Gap入門 – 1)
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」を試してみた。
