HTML5
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/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コンテンツオーサリングツールについてのメモ）
tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/916/%e3%80%8c%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%83%bc%e3%81%ae%e6%99%82%e4%bb%a3%e3%81%af%e7%b5%82%e3%82%8f%e3%81%a3%e3%81%9f%e3%80%8d/’;Check「ブラウザーの時代は終わった」 この問題提起に、あなたは何を思うだろうか。 ・iPhoneやiPad、銀行のATMなどでおなじみのタッチパネルデバイスがより進化すると、コンテンツをブラウザで見るというスタイルだけではなくなる。学校、企業、旅客機、さまざまなシチュエーションで、ブラウザに取って代わる、タッチパネルデバイスにより、コンテンツは参照され、閲覧される。 ・iPhoneの二本指によるズームイン／アウトなどの、より直感的な、人間の生理に基づいたHCD（ヒューマン・センタード・デザイン）の考え方によるインターフェイス・デザインが主流となる。 そして重要なのは、コンテンツは変わらないということ。 映像も、音楽も、文学作品も、今も昔もそれ自体は変わらない。 素晴らしい作品は厳然として存在し続ける。 変わるのは、コンテンツを操作する、インターフェイスの部分だけである。 これらを踏まえて、下記の映像を見て、どういう感想を持つだろうか。 http://ow.ly/1Bc1T ブラウザでおなじみの「進む／戻る」といったボタンによる操作がないことに着目して欲しい。 iPhoneライクなHCD(ヒューマン・センタード・デザイン)、指先による直感的な操作体系がそれにとって変わっている。 こういった事象について考えるなかに、次の十年を生き抜くヒントが隠されている。 これと並行して、HTML5が主流になると、ブラウザ、タッチパネルデバイスとコンテンツの関係はどう変わるのか、という点についても引き続き、考えていきたい。
