<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>alt &#187; メモ</title>
	<atom:link href="http://blog.alt-scape.com/archives/category/%e3%83%a1%e3%83%a2/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.alt-scape.com</link>
	<description>alt-scape weblog</description>
	<lastBuildDate>Sat, 03 Dec 2011 18:00:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>FlashDevelop4でAIR for iOSの実機確認ができるまで for Windows</title>
		<link>http://blog.alt-scape.com/archives/437</link>
		<comments>http://blog.alt-scape.com/archives/437#comments</comments>
		<pubDate>Sat, 03 Dec 2011 17:54:28 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[メモ]]></category>
		<category><![CDATA[AIR for iOS]]></category>
		<category><![CDATA[Flash Develop]]></category>
		<category><![CDATA[iPhone]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=437</guid>
		<description><![CDATA[
AIR for iOSをFlashDevelopで構築してみました。
実機確認までうまくいったけど、正直これで合ってるか自信ない。。
以下、自分メモ程度に書いておく。

環境は現在最新のFlashDevelop4.0. [...]]]></description>
			<content:encoded><![CDATA[<p>
<strong>AIR for iOS</strong>を<strong>FlashDevelop</strong>で構築してみました。<br />
実機確認までうまくいったけど、正直これで合ってるか自信ない。。<br />
以下、自分メモ程度に書いておく。<br />
<br />
環境は現在最新の<strong>FlashDevelop4.0.0 RC2</strong>。<br />
FlashDevelopにバンドルされている<strong>AIR SDK</strong>は3.0、<strong>Flex SDK</strong>は4.5.1。<br />
OSは<strong>WindowsXP</strong>。<br />
<br />
最新の<a href="http://www.adobe.com/special/products/air/sdk/">AIR SDK</a>（3.1）、<a href="http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.5">Flex SDK</a>（4.5.1）にそれぞれバージョンをアップしたい場合は<br />
FlashDevelopのインストール先にダウンロードしたSDKを上書きするか<br />
SDKを別の場所に置いてFlashDevelopの参照先を変更するかでいけると思う。<br />
あとFlashDevelopの環境設定の方もアップしたバージョンに変更する。<br />
これらのバージョンアップは後ほど余裕のあるときにやってみる。<br />
<br />
<span id="more-437"></span><br />
以下はiOS Developer Programのアクティベーションが完了してからの手順。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">１．証明書署名要求ファイルを作成する。</p>
<br />
<div style="line-height:170%;">
<img src="http://blog.alt-scape.com/img/air_for_ios1.jpg" />
<br />
<br />
<a href="http://help.adobe.com/ja_JP/as3/iphone/WS144092a96ffef7cc-371badff126abc17b1f-8000.html" target="_blank">ココ</a>を参考にしてWindowsに<a href="http://www.slproweb.com/products/Win32OpenSSL.html" target="_blank"><strong>OpenSSL</strong></a>をインストールしてコマンドで<strong>CSR</strong>ファイルを作ろうとすると<br />
「<strong>WARNING: can’t open config file: /usr/local/ssl/openssl.cnf</strong>」とか<br />
「<strong>Unable to load config info from /usr/local/ssl/openssl.cnf</strong>」とか怒られるので<br />
「<strong>set OPENSSL_CONF=c:\[PATH TO YOUR OPENSSL DIRECTORY]\bin\openssl.cfg</strong>」<br />
とコンフィグファイルのパスを設定してからやり直すとファイルが作れた。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">２．先ほど作ったCSR（<strong>CertificateSigningRequest.certSigningRequest</strong>）ファイルを使用して、iPhone開発用証明書を取得する。</p>
<br />
<img src="http://blog.alt-scape.com/img/air_for_ios2.jpg" />
<br />
<br />
<a href="http://developer.apple.com/ios/manage/overview/index.action" target="_blank">iOS Provisioning Portal</a>にアクセス。<br />
↓<br />
左側のメニューの「Certificates」をクリックしてDevelopmentタブの「Request Certificate」ボタンを押す。<br />
↓<br />
Create iOS Development Certificate画面が開いたら下部の「ファイルを選択」からCertificateSigningRequest.certSigningRequestを選択。<br />
↓<br />
Submitボタンを押す。<br />
↓<br />
DevelopmentタブのページでStatusがIssuedになっていたら、少し時間をおいてページをリロードする。<br />
↓<br />
ActionにDownloadボタンが現れたら証明書（<strong>developer_identity.cer</strong>）をダウンロードする。<br />
（すぐ下の「click here to download now.」リンクを押してAppleWWDRCA.cerもダウンロードしておく）<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">３．開発用証明書を<strong>P12</strong>ファイルへ変換。</p>
<br />
<a href="http://help.adobe.com/ja_JP/as3/iphone/WS144092a96ffef7cc-371badff126abc17b1f-7fff.html" target="_blank">ココ</a>を参考にして先ほどダウンロードした証明書をP12ファイルへ変換する。<br />
↓<br />
C:\OpenSSL\bin配下に証明書ファイル（developer_identity.cer）を置く。<br />
↓<br />
コマンドプロンプトで置いた場所まで移動して<br />
「<strong>openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM</strong>」<br />
より<strong>developer_identity.pem</strong>ファイルを作成。<br />
↓<br />
「<strong>openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12</strong>」<br />
よりP12ファイルを作成。<br />
↓<br />
「Enter Export Password:」←適当にパスワードを入力<br />
「Verifying &#8211; Enter Export Password:」←同じパスワードを入力<br />
これで<strong>iphone_dev.p12</strong>が作成される。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">４．デバイスを登録する。</p>
<br />
<img src="http://blog.alt-scape.com/img/air_for_ios3.jpg" />
<img src="http://blog.alt-scape.com/img/air_for_ios4.jpg" />
<br />
<br />
iOS Provisioning PortalのDevicesページを開く。<br />
↓<br />
「Add Devices」をクリックして、Device Name欄に適当な名前を入れる。<br />
↓<br />
iTunesを立ち上げて、手持ちのiPhoneをつなぐ。<br />
↓<br />
概要タブにシリアル番号が出ていると思うので、そこをクリックすると識別子（<strong>UDID</strong>）が表示される。<br />
↓<br />
Ctrl+Cキーでクリップボードにコピーし、Device ID欄に入力する。<br />
↓<br />
Submitボタンを押す。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">５．アプリIDを登録する。</p>
<br />
iOS Provisioning PortalのApp IDsページを開く。<br />
↓<br />
「New App ID」を押す。<br />
↓<br />
Description欄に識別できる名前か説明を適当に入力。<br />
↓<br />
Bundle Identifier欄には例にあるようにreverse-domain（com.domainname.appname）を入力するが、<br />
決まってなければ<strong>*</strong>だけでもＯＫ。<br />
↓<br />
Submitボタンを押す。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">６．プロビジョニングプロファイルを取得する。</p>
<br />
<img src="http://blog.alt-scape.com/img/air_for_ios5.jpg" />
<br />
<br />
iOS Provisioning PortalのProvisioningページを開く。<br />
↓<br />
Profile Nameに適当な名前を入れる。<br />
↓<br />
Certificatesに名前が出ているのでチェック。<br />
↓<br />
App IDに先ほど登録したアプリIDを選択する。<br />
↓<br />
Devicesに先ほど登録したデバイス名が出ているのでチェック。<br />
↓<br />
Submitボタンを押す。<br />
↓<br />
StatusがPendingになっていたら少ししてからページをリロードする。<br />
↓<br />
ActionにDownloadボタンが現れたらプロビジョニングプロファイルをダウンロードする。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">７．プロビジョニングプロファイルをiTunesに追加する。</p>
<br />
プロビジョニングプロファイルをiTunesアイコンへドラッグ＆ドロップする。<br />
↓<br />
ちゃんとインストールされたのか心配な場合は、もう一度ドラッグ＆ドロップして置換ダイアログが出ればＯＫ。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">８．FlashDevelopで「AIR Mobile AS3 App」プロジェクトを新規作成。</p>
<br />
<img src="http://blog.alt-scape.com/img/air_for_ios6.jpg" />
<br />
<br />
プロジェクトのcertフォルダにP12ファイル（iphone_dev.p12）とプロビジョニングプロファイルを置く。<br />
↓<br />
batフォルダの<strong>SetupApplication.bat</strong>を編集する。<br />
<br />
<strong>set IOS_DEV_CERT_FILE=cert\P12ファイル名</strong><br />
<strong>set IOS_DEV_CERT_PASS=P12ファイルのパスワード</strong><br />
<strong>set IOS_PROVISION=cert\プロビジョニングプロファイル名</strong><br />
<br />
↓<br />
Run.batの:targetを<br />
goto ios-testに設定。<br />
↓<br />
set SCREEN_SIZE=NexusOneをコメントアウトして<br />
set SCREEN_SIZE=<strong>iPhoneRetina</strong>に設定。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">９．AIRプロジェクトの<strong>application.xml</strong>を設定する。</p>
<br />
先ほど、iOS Provisioning PortalのApp IDsページのDescription内にある黒い太字（バンドルシードID.バンドル識別子）をコピる。<br />
↓<br />
application.xmlを開いて＜id＞＜/id＞内に設定する。<br />
例）先ほど、iOS Provisioning PortalのApp IDsページで入力したBundle Identifier欄のreverse-domainがcom.domainname.appnameの場合は<br />
＜id＞com.domainname.appname＜/id＞<br />
例）Bundle Identifier欄が「*」だけにしていた場合は<br />
＜id＞任意の文字列＜/id＞<br />
↓<br />
SetupApplication.batの「set APP_ID=」にも同じものを貼り付ける。<br />
※ここを必ず同じにしておかないとエラーになる。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">１０．AIRをiOS用にパッケージ化する。</p>
<br />
プロジェクトのPackageApp.batを実行する。[5]で試してみた。<br />
↓<br />
distフォルダに<strong>ipa</strong>ファイルが作成される。<br />
↓<br />
ipaファイルを実行するか、iTunesのデスクトップアイコンにドラッグ＆ドロップしてiTunes内に送る。<br />
↓<br />
iPhoneと同期すればアプリが端末に転送される。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">１１．リモートデバッグしたい場合。</p>
<br />
<img src="http://blog.alt-scape.com/img/air_for_ios9.jpg" />
<img src="http://blog.alt-scape.com/img/air_for_ios10.jpg" />
<img src="http://blog.alt-scape.com/img/air_for_ios11.jpg" />
<br />
<br />
iPhoneを開発環境と同じLAN内にWifiモードでつないでおく。<br />
↓<br />
ipconfigで開発環境のPCのローカルIPアドレスをチェックしておく。<br />
↓<br />
Run.batを開いて、「goto ios-debug」以外をコメントアウトにする。<br />
↓<br />
さらに「set OPTIONS=-connect %DEBUG IP%」の%DEBUG IP%に先ほど調べたIPアドレスを入れる。<br />
↓<br />
PackageApp.batを開いて、同じように「if &#8220;%C%&#8221;==&#8221;5&#8243; set OPTIONS=-connect %DEBUG IP%」にもIPアドレスを入れる。<br />
↓<br />
プロジェクト内のasファイルに適当なtrace文を入れた状態でPackageApp.batを実行し、[Choice]は<strong>5</strong>でipaファイルを作成する。<br />
↓<br />
iTunes同期からiPhoneにアプリをインストールする。<br />
↓<br />
FlashDevelopで「Control+Enter」からパブリッシュし、コマンドプロンプトが立ち上がった状態で待機。<br />
「Now manually install and start application on device」がメッセージで出ているはず。<br />
↓<br />
iPhoneのアプリを起動すると、FlashDevelop上にtraceが出力される。<br />
<br />
<br />
<p style="background:#000; color:#FFF; padding:5px">１２．別のネットワーク環境のPCで並行開発する場合。</p>
<br />
<img src="http://blog.alt-scape.com/img/air_for_ios7.jpg" />
<img src="http://blog.alt-scape.com/img/air_for_ios8.jpg" />
<br />
<br />
プロジェクトフォルダごと別の環境に移動。<br />
↓<br />
３で作成したiphone_dev.p12を別のPC環境にもっていき、ダブルクリックして秘密鍵の複製をする。<br />
↓<br />
iTunesを立ち上げて、１０で作成したipaファイルをドラッグ＆ドロップで取り込む。<br />
↓<br />
iPhoneとPCを接続して、「購入した項目を転送」してからアプリのみ同期を取ればiPhoneに転送される。<br />
※ただし、ホーム画面上にフォルダとかでアプリを整理している場合はバラバラな配置になるので注意。自己責任でお願いします。<br />
※必ず事前にバックアップをとっておく。<br />
<br />
<br />
参考：<br />
<a href="http://www.emanueleferonato.com/2011/09/22/creation-of-an-iphone-app-with-flash-and-without-a-mac-for-all-windows-lovers/" target="_blank">http://www.emanueleferonato.com/2011/09/22/creation-of-an-iphone-app-with-flash-and-without-a-mac-for-all-windows-lovers/</a><br />
<a href="http://flash.polig.daa.jp/?month=201010" target="_blank">http://flash.polig.daa.jp/?month=201010</a><br />
<a href="http://ton-up.net/blog/archives/767" target="_blank">http://ton-up.net/blog/archives/767</a><br />
<br />
<br />
<div></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/437/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavascriptでH.264のビデオをデコード(再生)する「Broadway.js」</title>
		<link>http://blog.alt-scape.com/archives/431</link>
		<comments>http://blog.alt-scape.com/archives/431#comments</comments>
		<pubDate>Fri, 04 Nov 2011 04:43:31 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[メモ]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[動画]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=431</guid>
		<description><![CDATA[
またスゴいのが出てきたけど、このJSビデオデコーダよりもEmscriptenの方に驚きました。
これ使えば比較的簡単にC言語資産のライブラリとか移植ができそう。
似たようなアプローチだとGoogleのNative Cl [...]]]></description>
			<content:encoded><![CDATA[<p>
またスゴいのが出てきたけど、このJSビデオデコーダよりも<strong>Emscripten</strong>の方に驚きました。<br />
これ使えば比較的簡単にC言語資産のライブラリとか移植ができそう。<br />
似たようなアプローチだとGoogleの<strong>Native Client</strong>やAdobeの<strong>Alchemy</strong>がありますが<br />
どちらもブラウザプラグインなので、プラグインなしならコレ。<br />
あとJS変換のライバルは<a href="https://github.com/dmlap/llvm-js-backend" target="_blank"><strong>llvm-js-backend</strong></a>というのもあります。<br />
<br />
とりあえずメモだけ。<br />
下の翻訳間違ってたらすみません。<br />
<br />
<span id="more-431"></span><br />
<strong>Broadway.js</strong><br />
<a href="https://github.com/mbebenita/Broadway" target="_blank">https://github.com/mbebenita/Broadway</a><br />
<br />
<br />
デモ：<br />
<a href="http://mbebenita.github.com/Broadway/broadway.html" target="_blank">http://mbebenita.github.com/Broadway/broadway.html</a><br />
<br />
<br />
説明：<br />
Mozillaの開発者である<a href="http://haxpath.squarespace.com/" target="_blank"><strong>Michael Bebenita</strong></a>が、<strong>H.264</strong>ビデオフォーマットのJavaScriptデコーダを公開。<br />
ブラウザ上でネイティブに動作することを意図するこのJavascriptデコーダは、<br />
既存のH.264デコーダ（C言語で書かれたAndroidで使用されているH.264デコーダ）を簡素化し、<br />
C/C++のコードをコンパイルしたLLVMビットコードを<a href="https://github.com/kripken/emscripten" target="_blank"><strong>Emscripten</strong></a>を使用して<strong>Javascript</strong>に変換している。<br />
このデコーダは、従来のハードウェア構成のままで<strong>30fps</strong>の実行速度を保ちながらビデオを表示できる。<br />
ソースコードはGitHubにアップされているので誰でも参照できる。<br />
改善余地はWebGLを使用してGPU経由で並列処理を行うなど。<br />
現在の動作環境は、Firefox、Chrome、Safari、Operaはいけてるっぽい。<br />
<br />
<br />
Emscripten：<br />
<em>Emscripten is an LLVM-to-JavaScript compiler. It takes LLVM bitcode &#8211; which can be generated from C/C++, using llvm-gcc or clang, or any other language that can be converted into LLVM &#8211; and compiles that into JavaScript, which can be run on the web (or anywhere else JavaScript can run).</em><br />
<br />
<br />
プレゼン動画：<br />
<a href="http://yfrog.com/nmng0z" target="_blank">http://yfrog.com/nmng0z</a><br />
<br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/431/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ログ出力ライブラリ「Blackbird」をスマートフォンで使ってみる</title>
		<link>http://blog.alt-scape.com/archives/424</link>
		<comments>http://blog.alt-scape.com/archives/424#comments</comments>
		<pubDate>Thu, 20 Oct 2011 15:54:24 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[メモ]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[スマートフォン]]></category>
		<category><![CDATA[デバッグ]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=424</guid>
		<description><![CDATA[
スマートフォンのためのリモートデバッグ環境その1 – weinre
スマートフォンのためのリモートデバッグ環境その2 – JSconsle

とみてきましたが、
もっと単純にログ出力だけで十分という方にはコレがよさそう [...]]]></description>
			<content:encoded><![CDATA[<p>
<a href="http://blog.alt-scape.com/archives/423" target="_blank">スマートフォンのためのリモートデバッグ環境その1 – weinre</a><br />
<a href="http://blog.alt-scape.com/archives/418" target="_blank">スマートフォンのためのリモートデバッグ環境その2 – JSconsle</a><br />
<br />
とみてきましたが、<br />
もっと単純にログ出力だけで十分という方にはコレがよさそうです。<br />
<br />
<strong>Blackbird</strong><br />
<a href="http://www.gscottolson.com/blackbirdjs/" target="_blank">http://www.gscottolson.com/blackbirdjs/</a><br />
<br />
画面の端っこにログ出力用コンソールが表示されるので<br />
PC向けというよりはスマートフォンなどのログ情報が確認しにくい環境で役に立ちそうです。<br />
<strong>iPhone</strong>、<strong>Android</strong>は上記のweinreやJSconsle使うとしても、<br />
Windows Mobile6.5(IE6)やBlackBerryなどWebSocket使えない系のブラウザには試す価値アリ。<br />
<br />
<span id="more-424"></span><br />
ライブラリのjsとcssを読み込んで以下の通りに打てばコンソール内に出力されます。<br />
<pre class="code">log.debug( <span class="str">'this is a debug message'</span> );<br />
log.info( <span class="str">'this is an info message'</span> );<br />
log.warn( <span class="str">'this is a warning message'</span> );<br />
log.error( <span class="str">'this is an error message'</span> );</pre>
<br />
<div style="line-height:170%">
Public APIには<br />
<br />
<strong>log.toggle()</strong>　：　コンソールの表示・非表示切替<br />
<strong>log.move()</strong>　：　コンソールを画面の左上・右上・右下・左下の4箇所に切替<br />
<strong>log.resize()</strong>　：　コンソールのリサイズ（拡大・縮小）<br />
<strong>log.clear()</strong>　：　ログのクリア<br />
<strong>log.profile( label )</strong>　：　Javascriptの処理時間を出してくれるプロファイラ<br />
<br />
が用意されています。<br />
他にも<strong>キーボード</strong>によるショートカットキーや<strong>ブックマークレット</strong>でこれらのメソッドを実行できたりもしますが、<br />
スマートフォンでの問題はキーボードが使えないので<br />
ブックマークレットでコンソールの表示・非表示を切り替える必要が出てきます。<br />
ちょっとそれも面倒ですね。<br />
<br />
iPhoneに限ってしまいますが、<br />
jQueryプラグインの<a href="https://github.com/germanson/gshake" target="_blank"><strong>gShake</strong></a>使って、シェイクイベントをトリガーにするとか<br />
最上面に画面いっぱいdivをひいて、<a href="http://blog.webcreativepark.net/2010/09/08-204058.html" target="_blank"><strong>ダブルタップ</strong></a>されたら切り替えるとかですかね。<br />
<br />
とりあえず作ってみたらうまくいきました。<br />
<br />
</div>
<img src="http://blog.alt-scape.com/img/blackbird.jpg" />
<br />
<br />
<pre class="code"><span class="tag">&lt;div <span class="attr">id=</span><span class="value">&quot;test&quot;</span> <span class="attr">style=</span><span class="value">&quot;width:100%; height:100%; z-index:999;&quot;</span>&gt;</span>TEST<span class="tag">&lt;/div&gt;</span><br />
<span class="tag">&lt;script <span class="attr">src=</span><span class="value">&quot;jquery-1.6.1.min.js&quot;</span> <span class="attr">type=</span><span class="value">&quot;text/javascript&quot;</span>&gt;</span><span class="tag">&lt;/script&gt;</span><br />
<span class="tag">&lt;script <span class="attr">src=</span><span class="value">&quot;gShake.js&quot;</span> <span class="attr">type=</span><span class="value">&quot;text/javascript&quot;</span>&gt;</span><span class="tag">&lt;/script&gt;</span><br />
<span class="tag">&lt;script <span class="attr">src=</span><span class="value">&quot;jquery.event.dblTap.js&quot;</span> <span class="attr">type=</span><span class="value">&quot;text/javascript&quot;</span>&gt;</span><span class="tag">&lt;/script&gt;</span><br />
<span class="tag">&lt;script <span class="attr">src=</span><span class="value">&quot;blackbird.js&quot;</span> <span class="attr">type=</span><span class="value">&quot;text/javascript&quot;</span>&gt;</span><span class="tag">&lt;/script&gt;</span><br />
<span class="tag">&lt;link <span class="attr">href=</span><span class="value">&quot;blackbird.css&quot;</span> <span class="attr">type=</span><span class="value">&quot;text/css&quot;</span> <span class="attr">rel=</span><span class="value">&quot;Stylesheet&quot;</span> /&gt;</span><br />
<span class="tag">&lt;script&gt;</span><br />
$(document).ready(function() {<br />
    <br />
        log.debug( 'this is a debug message' );<br />
        log.info( 'this is an info message' );<br />
        log.warn( 'this is a warning message' );<br />
        log.error( 'this is an error message' );<br />
    <br />
        $(&quot;#test&quot;).bind(&quot;dblTap&quot;,function(){<br />
            log.toggle();<br />
    });<br />
    <br />
        $(this).gShake(function(){<br />
            log.toggle();<br />
    });<br />
<br />
});<br />
<span class="tag">&lt;/script&gt;</span></pre>
<br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/424/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML5を視野に入れてHTML4.01とXHTML1.0のどちらを選ぶべきか</title>
		<link>http://blog.alt-scape.com/archives/419</link>
		<comments>http://blog.alt-scape.com/archives/419#comments</comments>
		<pubDate>Tue, 18 Oct 2011 04:06:40 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[メモ]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=419</guid>
		<description><![CDATA[
もしクライアントのレギュレーションなりでHTML5ダメってなった場合、
のちのHTML5移行を想定してHTML4.01とXHTML1.0のどちらで作るべきか。
※XHTML2.0は策定打ち切りなので対象外


【HTM [...]]]></description>
			<content:encoded><![CDATA[<p>
もしクライアントのレギュレーションなりで<strong>HTML5</strong>ダメってなった場合、<br />
のちのHTML5移行を想定して<strong>HTML4.01</strong>と<strong>XHTML1.0</strong>のどちらで作るべきか。<br />
※XHTML2.0は策定打ち切りなので対象外<br />
<br />
<span id="more-419"></span><br />
【HTML4.01】<br />
・文章構造がゆるい<br />
・終了タグが省略可能<br />
・要素・属性は小文字・大文字どちらでも可能<br />
<br />
<br />
【XHTML1.0 or 1.1】<br />
・HTML4.01をベースに作られた<br />
・文章構造が厳格<br />
・他のプログラムで利用しやすい<br />
・要素・属性は小文字のみ可能<br />
・1.1は新たに＜ruby＞が増えたり、iframe,name属性が禁止されたりいろいろ<br />
・IE6は互換モードになる<br />
・XHTML1.0はブログの影響もあり現在の主流<br />
・XML宣言をしなければならない（「UTF-8」「UTF-16」のときは省略可能）<br />
<br />
<br />
【共通】<br />
HTML4.01とXHTML1.0はStrict(厳密型)、Transitional（移行型）、Frameset（フレーム設定型）の3種類のDTDがある<br />
XHTML1.1は上記3つのDTD宣言はなくなってStrict(厳密型)と同じ扱いになる<br />
HTML4.01 Strict, XHTML1.0 Strict, XHTML1.1ではtarget属性は廃止（HTML5では復活）<br />
<strong>Strict DTD</strong>:厳密なDTDで非推奨の要素や属性は使えない<br />
<strong>Transitional DTD</strong>: Strict DTDほど厳密ではなく非推奨の要素や属性なども使える<br />
<strong>Frameset DTD</strong>: Transitional DTDにフレームが加わったもの<br />
<br />
<br />
HTML5は仕様にXHTML1.1を踏襲しているXHTML5が含まれるのでどちらの書き方にも対応しています。<br />
なのでどちらで作っても支障はなく、最終的には好みの問題かと思います。<br />
DTDは非推奨要素は使えないstrictが無難ではないでしょうか。<br />
<br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/419/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>SNSプラットフォーム同士をミックスさせるスキーム</title>
		<link>http://blog.alt-scape.com/archives/421</link>
		<comments>http://blog.alt-scape.com/archives/421#comments</comments>
		<pubDate>Wed, 28 Sep 2011 07:49:45 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[メモ]]></category>
		<category><![CDATA[SNS]]></category>
		<category><![CDATA[マーケティング]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=421</guid>
		<description><![CDATA[



電車のなかでふと考えた。

こういう構図のキャンペーン、もしくはアンケートってないものだろうか。。
上の図のようにFacebook側の人が「いいね」押した数、
mixi側の人が「チェック」した数をグラフィカルに統 [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://blog.alt-scape.com/img/facebook_vs_mixi.jpg" class="imgnostyle" />
<br />
<br />
電車のなかでふと考えた。<br />
<br />
こういう構図のキャンペーン、もしくはアンケートってないものだろうか。。<br />
上の図のようにFacebook側の人が「いいね」押した数、<br />
mixi側の人が「チェック」した数をグラフィカルに統計し、<br />
期間内に投票された数で競わせたり、抽選でプレゼントしたりのなにか。<br />
まあmixiやFacebookでなくても、Google+、モバゲー、GREEなど<br />
外部サービス向けにソーシャルAPI公開してれば何でもいいんだけど。<br />
<br />
SNSのプラットフォームはそれぞれ文化もユーザー層もシステム仕様も違うから、<br />
キャンペーン利用するためのアプリケーションは基本、複数跨いで考えませんよね。<br />
そこを逆手にとって2極3極のパイを総取りする方法を考えてみようと。。<br />
要は<strong>SNSプラットフォームをミックスさせたスキーム</strong>ってあってもいいよねという発想です。<br />
既にありますかね？<br />
<br />
<span id="more-421"></span><br />
懸念点はいろいろあって、<br />
まずSNSを重複するユーザーをどう扱うか。どうやって競わせるか。<br />
（互いに2千万人ずつユーザーが居ても実際はほとんど重複してて、双方にリーチする意味がなかったり・・・）<br />
アプリケーションは双方のSNS上に用意するのではなく、<br />
外部アプリとして窓口はひとつで展開するのがいいと思うけど、<br />
ビジネスロジックやセキュリティ面の起こりえる弊害はないか。<br />
（Facebook以外はOpen Socialだから便利）<br />
クライアント目線でみてブランディングにどうつなげていくか。<br />
プラットフォーム別の規約（ガイドライン）にセーフかアウトか。<br />
<br />
これらが成立すればSNSをクロス展開するキャンペーンやゲームなんかの<br />
アプリもバンバンいけると思うのだけどどうだろう。問題あるかな。<br />
アクティビティなんかも加点すれば継続的にも盛り上がる仕組みができそうだし。<br />
あと競うのとは反対に力を合わせて的なアプリも面白そう。<br />
アバター画像ほか共通のメタ情報使ってクロスプラットフォームを意識させないビジュアルで見せるとか。<br />
<br />
<br />
というまあ車内のひとりブレストでした。<br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/421/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>スマートフォンサイト構築のためのリモートデバッグ環境その2 &#8211; JSconsole</title>
		<link>http://blog.alt-scape.com/archives/418</link>
		<comments>http://blog.alt-scape.com/archives/418#comments</comments>
		<pubDate>Tue, 27 Sep 2011 16:55:49 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[メモ]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[スマートフォン]]></category>
		<category><![CDATA[デバッグ]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=418</guid>
		<description><![CDATA[



前回紹介したweinreに続いて、
JSConsoleというデバッグツールもよさげなのでテスト。
簡易的に使うなら便利だけど、正直Firebug並みのことはできないです。
あとセキュリティ面でもjsconsole [...]]]></description>
			<content:encoded><![CDATA[<p>
<iframe width="560" height="345" src="http://www.youtube.com/embed/Y219Ziuipvc?rel=0" frameborder="0" allowfullscreen></iframe><br />
<br />
<br />
前回紹介した<a href="http://blog.alt-scape.com/archives/423" target="_blank"><strong>weinre</strong></a>に続いて、<br />
<strong>JSConsole</strong>というデバッグツールもよさげなのでテスト。<br />
簡易的に使うなら便利だけど、正直Firebug並みのことはできないです。<br />
あとセキュリティ面でもjsconsole.com側にDOMやクッキー情報が筒抜けなのでご注意をば。<br />
<br />
サポート環境は<br />
iOS 4.2.x &#8211; iPad, iPhone 4<br />
Andriod 2.2.2 &#8211; Nexus One<br />
webOS &#8211; Palm Pre<br />
<br />
JSConsoleのソースはGitHubにあります。<br />
<a href="https://github.com/remy/jsconsole" target="_blank">https://github.com/remy/jsconsole</a><br />
<br />
<span id="more-418"></span><br />
１．JSConsoleはサイト自体がデバッグコンソール画面となっているWEBアプリなので以下にアクセス。<br />
<a href="http://jsconsole.com/" target="_blank">http://jsconsole.com/</a><br />
<br />
２．最上部の入力フィールドに「<strong>:listen</strong>」と打つとコネクション用のIDが発行されたJavascriptソースが表示される。<br />
<img src="http://blog.alt-scape.com/img/jsconsole.jpg" />
<br />
<br />
３．JSをコピペしてデバッグ対象のHTML内に挿入する。<br />
<br />
４．HTMLファイルをサーバーへアップロードし、iPhoneやAndroidなどのスマートフォンでアクセスしてみる。<br />
<br />
５．デバッグコンソールに<br />
<strong>Connection established with http://xxx.com/xxx.html</strong><br />
と画面に出れば接続完了。<br />
<img src="http://blog.alt-scape.com/img/jsconsole2.jpg" />
<br />
<br />
６．デバッグコンソールの入力フィールドにalert(&#8221;hello&#8221;);と打ってiPhoneにダイアログが出ればOK。<br />
その他、「window.screen.width」と打ってリモートのwindowオブジェクトにアクセスしたり、<br />
jQueryを使ったサイトなら$()でDOMを操作できるのが分かる。<br />
もちろん、自作のJavascript関数も操作できる。<br />
<br />
７．ちなみに「<strong>:help</strong>」と打つと、<strong>JSconsle API</strong>を参照できる。<br />
<br />
<strong>:load</strong> <url> &#8211; 指定サイトのDOMが取得できる。 ← 使えなかったので未対応なのかな<br />
<strong>:load</strong> jquery, underscore, prototype, mootools, dojo, rightjs, coffeescript, yuiなどのライブラリを読み込ませることができる。<br />
例） :load jquery ← これでjQuery読み込めるっぽいけど、読み込み完了したのにこれも使えなかったよ<br />
<strong>:listen</strong> [id] &#8211; リモートデバッグを開始する<br />
<strong>:clear</strong> &#8211; コンソールのログを消去する<br />
<strong>:history</strong> &#8211; 入力フィールドの履歴を参照する<br />
<strong>:about</strong> &#8211; 不明<br />
<br />
<br />
「JSconsle」iPhoneアプリ版<br />
<a href="http://civic.xrea.jp/2011/03/03/jsconsole/" target="_blank">http://civic.xrea.jp/2011/03/03/jsconsole/</a><br />
<a href="http://d.hatena.ne.jp/nakamura001/20100928/1285637617" target="_blank">http://d.hatena.ne.jp/nakamura001/20100928/1285637617</a><br />
<br />
「JSconsle」Androidアプリ版もあった<br />
<a href="https://market.android.com/details?id=com.jgmcelwain.jsonsole&#038;hl=ja" target="_blank">https://market.android.com/details?id=com.jgmcelwain.jsonsole&#038;hl=ja</a><br />
<br />
<br />
上のアプリを手に入れるなら、ついでにこれらのスマホと連携して使える<strong>Bluetoothキーボード</strong>も欲しい。<br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B004I8V6Q2/alt-scape-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/41SvlvPTkgL._SL500_AA300_.jpg" /></a><br />
<br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00405DR8I/alt-scape-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/313Me9aAkAL._SL500_AA300_.jpg" /></a><br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/418/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>スマートフォンサイト構築のためのリモートデバッグ環境その1 – weinre</title>
		<link>http://blog.alt-scape.com/archives/423</link>
		<comments>http://blog.alt-scape.com/archives/423#comments</comments>
		<pubDate>Mon, 26 Sep 2011 11:05:16 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[メモ]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[スマートフォン]]></category>
		<category><![CDATA[デバッグ]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=423</guid>
		<description><![CDATA[



スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い
スマートフォン用ベージをデバッグする5つの方法


これらの記事みて自分の開発環境にもweinreを取り入れようと思い試して [...]]]></description>
			<content:encoded><![CDATA[<p>
<iframe width="560" height="345" src="http://www.youtube.com/embed/gaAI29UkVCc?rel=0" frameborder="0" allowfullscreen></iframe><br />
<br />
<br />
<a href="http://alpha.mixi.co.jp/blog/?p=3248" target="_blank">スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い</a><br />
<a href="http://www.kanasansoft.com/weblab/2011/07/html5toka19.html" target="_blank">スマートフォン用ベージをデバッグする5つの方法</a><br />
<br />
<br />
これらの記事みて自分の開発環境にも<strong>weinre</strong>を取り入れようと思い試してみました。<br />
<br />
加速度センサーやGeo Location APIなんかのデバッグにも<br />
PCのブラウザコンソールからCSSやJS弄ったりするのにもちょー便利。<br />
iPhone、Android問わず、クロスデバイスで利用できるし。<br />
<br />
<span id="more-423"></span><br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
【localhost上でデバッグする】<br />
<br />
１．下記サイトから「weinre-jar-1.5.0.zip」をダウンロード。<br />
<a href="https://github.com/phonegap/weinre/archives/master" target="_blank">https://github.com/phonegap/weinre/archives/master</a><br />
<br />
２．展開したフォルダを適当な場所に置く。<br />
<br />
３．コマンドプロンプトでフォルダまで移動して「<strong>java -jar weinre.jar &#8211;httpPort 8080</strong>」を実行。<br />
<img src="http://blog.alt-scape.com/img/weinre1.gif" />
<br />
<br />
４．ブラウザで「<strong>http://localhost:8080/</strong>」にアクセス。<br />
<br />
５．赤枠のブックマークレットをブラウザに登録。<br />
※JSをデバッグ対象のサイトに埋め込んでもOK。<br />
<img src="http://blog.alt-scape.com/img/weinre2.gif" />
<br />
<br />
６．デバッグページを開く。<br />
例）http://localhost:8080/client/#anonymous<br />
<br />
７．シュミレータか新規ウィンドウを立ち上げて、デバッグしたい対象のページを開く。<br />
（実機で確認したい場合は同一ネットワークの設定が必要）<br />
例）http://www.google.co.jp/<br />
<br />
８．さきほどのブックマークレットを実行するとデバッグ画面のTargetsが<strong>none</strong>から緑色のテキストに変わる。<br />
ソケットにつながったのでゴリゴリデバッグ開始。<br />
<img src="http://blog.alt-scape.com/img/weinre3.gif" />
<br />
※対象のページにprototype.jsのバージョン1.7以前があるとエラーを起こす。<br />
<br />
<br />
<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
【weinreのWEBサービス上でデバッグする】<br />
<br />
実はわざわざローカルでjarを展開しなくても、weinreのWEBサービス（API）を利用すれば、<br />
実機で直接サイトにアクセスしてリモートデバッグが可能。<br />
<br />
１．<a href="http://debug.phonegap.com/" target="_blank">http://debug.phonegap.com/</a>にアクセス。<br />
<br />
２．Step 1の入力フィールドに任意の文字列を入れる。<br />
<br />
３．Step 2のJSをコピペしてデバッグ対象のサイトに埋め込む。<br />
<br />
４．Step 3のデバッグページを開く。<br />
<br />
５．スマートフォンで対象のサイトにアクセスする。<br />
<br />
６．デバッグページのDEVICESのnoneが変わればゴリゴリデバッグ開始。<br />
<br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/423/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>ブラウザ(Firefox、Chrome)のキャッシュデータを確認したい</title>
		<link>http://blog.alt-scape.com/archives/417</link>
		<comments>http://blog.alt-scape.com/archives/417#comments</comments>
		<pubDate>Fri, 26 Aug 2011 09:34:07 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[メモ]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=417</guid>
		<description><![CDATA[
最近、頻繁にFirefoxがアップデートを繰り返しているので、
重宝しているCashe Viewer君がバージョン4あたりからずっと死んだままです。

仕事上、携帯Flashのリアルタイム生成に携わっていると、
Fir [...]]]></description>
			<content:encoded><![CDATA[<p>
最近、頻繁に<strong>Firefox</strong>がアップデートを繰り返しているので、<br />
重宝している<strong><a href="https://addons.mozilla.org/ja/firefox/addon/cacheviewer/" target="_blank">Cashe Viewer</a></strong>君がバージョン4あたりからずっと死んだままです。<br />
<br />
仕事上、携帯Flashのリアルタイム生成に携わっていると、<br />
<a href="https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/" target="_blank">FireMobileSimulator</a>でアクセスして、キャッシュしたswfをダウンロードしてデコンパイル・・・<br />
なんて機会も多いので、最新のFirefoxバージョン<strong>6</strong>でも動くCashe Viewerを探してみました。<br />
<br />
アドオンのレビュー欄にmegauploadやらmediafireのリンクがあるのですぐさまインストール。<br />
見つけたのはCasheViewer 0.6.3。Firefox3～6までで動きます。<br />
今のところ問題なく使えています。<br />
※自己責任でお願いします。<br />
<br />
<span id="more-417"></span><br />
アドオンなんて使わなくても、<br />
Firefoxのアドレスバーに「<strong>about:cache?device=disk</strong>」と打って、ファイルを選択すると、<br />
「<strong>file on disk:</strong>」にファイルパスが表示されているので抜き取れますね。<br />
<br />
ちなみにChromeの拡張機能にはそれらしいviewerがなかったので<br />
アドレスバーに「<strong>chrome://cache</strong>」と打ってもキャッシュ情報及びファイルを確認しています。<br />
<br />
ブラウザの拡張機能ではなくて、<br />
OSにインストールするキャッシュビューワーソフトもありました。<br />
<br />
IE・Firefox・Chromeのキャッシュを見るフリーソフト<br />
<a href="http://blog.verygoodtown.com/2010/01/ie-firefox-chrome-cache-search-freesoft/" target="_blank">http://blog.verygoodtown.com/2010/01/ie-firefox-chrome-cache-search-freesoft/</a><br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/417/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery Mobileをアルファからベータ版に切り替えるとクリックが効かなくなる!?</title>
		<link>http://blog.alt-scape.com/archives/411</link>
		<comments>http://blog.alt-scape.com/archives/411#comments</comments>
		<pubDate>Tue, 19 Jul 2011 15:28:19 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[メモ]]></category>
		<category><![CDATA[jQuery Mobile]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=411</guid>
		<description><![CDATA[
これにハマった方が少なくとも私ひとりではない気がします。
jQuery Mobileはベータ版になって、
アドレスバーを隠すためにvclickというカスタムクリックイベントが使われています。
これにより他のjQuery [...]]]></description>
			<content:encoded><![CDATA[<p>
これにハマった方が少なくとも私ひとりではない気がします。<br />
<strong>jQuery Mobile</strong>は<strong>ベータ版</strong>になって、<br />
アドレスバーを隠すために<strong>vclick</strong>というカスタムクリックイベントが使われています。<br />
これにより他のjQueryプラグインなどが使っている<strong>click</strong>イベントを阻害します。<br />
<br />
なので、ベータ版に切り替える際は<br />
あわせてプラグインも<strong>click</strong>⇒<strong>vclick</strong>にバインドしてあげればボタン操作が効くようになります。<br />
<br />
<span id="more-411"></span><br />
URL bar: Now hidden in iOS and Android<br />
<a href="http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/#features" target="_blank">http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/#features</a><br />
<br />
mobileinit時に<strong>$.mobile.useFastClick</strong>オプションを<strong>false</strong>にしてやると、<br />
vclickがclickで処理されるようになるのでこれでも直りますが、アドレスバーが隠れなくなります。<br />
<br />
<pre class="code">$(document).bind(<span class="str">'mobileinit'</span>, <span class="keyword">function</span>(){<br />
　　$.mobile.useFastClick = <span class="keyword">false</span>;<br />
});<br />
</pre>
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/411/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>AndroidでHTML5のaudioタグを使った音コンテンツについて</title>
		<link>http://blog.alt-scape.com/archives/405</link>
		<comments>http://blog.alt-scape.com/archives/405#comments</comments>
		<pubDate>Thu, 07 Jul 2011 11:37:08 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[メモ]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=405</guid>
		<description><![CDATA[
PCのブラウザ上での話しならコチラの記事を参考に
比較的簡単にHTML5のaudioタグで音声再生が可能ですが、
Androidのブラウザでも可能なのかどうかについて。

Andoridのデフォルトブラウザはaudio [...]]]></description>
			<content:encoded><![CDATA[<p>
PCのブラウザ上での話しなら<a href="http://ascii.jp/elem/000/000/525/525808/" target="_blank">コチラ</a>の記事を参考に<br />
比較的簡単に<strong>HTML5</strong>の<strong>audio</strong>タグで音声再生が可能ですが、<br />
<strong>Android</strong>のブラウザでも可能なのかどうかについて。<br />
<br />
Andoridのデフォルトブラウザはaudioタグはサポートしていても、<br />
<strong>PCM、MP3、AAC、Ogg Vorbis</strong>のようなファイルフォーマットには対応してないようです。<br />
ネット上にもあちらこちらにバージョン<strong>2.2</strong>まではムリっすって声が聞こえますし、<br />
実際にaudioタグを貼ってもプレイヤーが表示されず、音声も再生しない<a href="http://www.brianhadaway.com/html5-audio-support-on-android-devices/" target="_blank">検証結果</a>も出ています。<br />
バージョン2.3では<a href="http://blog.livedoor.jp/tak_tak0/archives/51817060.html" target="_blank">再生できた</a>という記事も目にしましたが、<br />
端末によってかもしれないし、Googleから公式のアナウンスがある？わけでもないので<br />
音コンテンツを作るうえでどのように対応していくかが鬼門です。<br />
<br />
<span id="more-405"></span><br />
まずUAの分岐は<br />
<a href="http://html5test.com/">コレ</a>とか<a href="http://textopia.org/androidsoundformats.html" target="_blank">コレ</a>で端末ごとの対応しているファイルフォーマットを調べるのは現実的ではないし、<br />
バージョンで一律、線を引いてよいのかも分からない。。<br />
↓<br />
デコードを<strong>Flash</strong>で代替えしてみるのはどうか。<br />
Androidの<strong>2.2以上</strong>はデフォルトでFlashPlayerが搭載されているので<br />
音声（MP3）のデコードをFlashに任せてしまいます。<br />
そうすればコンテンツ提供の仕方も2通りで済むのではないでしょうか。<br />
例えば<br />
<strong>2.2以上はFlash版(音声あり)、2.1以下はHTML5版(音声なし)</strong><br />
といった具合に。<br />
<br />
FlashとHTML両方作るのもめんどくさいという方には<br />
<br />
【jPlayerの紹介】<br />
<a href="http://www.jplayer.org/" target="_blank">http://www.jplayer.org/</a><br />
<br />
音声再生部分だけライブラリ側でFlashを使うのでコンテンツ自体は<strong>HTMLのワンソース</strong>で済みます。<br />
<br />
設置はHTMLの端っこに<br />
＜div id=&#8217;jplayer&#8217;＞＜/div＞<br />
でプレイヤーを表示させるタグを書いてコンソールが出ないようにする。<br />
下記で再生開始。<br />
<br />
$(&#8217;#jplayer&#8217;).jPlayer({<br />
　　ready: function () {<br />
　　　　$(this).jPlayer(&#8217;setMedia&#8217;, {<br />
　　　　　　mp3: &#8216;音声ファイルパス&#8217;<br />
　　　　}).jPlayer(&#8217;play&#8217;);<br />
　　},<br />
　　swfPath: &#8216;jquery.jplayer.min.jsが格納されているjsディレクトリパス&#8217;,<br />
　　solution: &#8216;flash, html&#8217;,<br />
　　supplied: &#8216;mp3&#8242;<br />
});<br />
<br />
※solutionは優先権指定。flashが非対応端末だった場合にhtml5での再生も代替してくれます。<br />
2.2以前は意味ないですが念のため。<br />
<br />
<br />
現状、Android向けのWEB（音声）コンテンツはこのような切り口がベスト？なのでしょうか。<br />
<br />
<br />
他の可能性としては<br />
<br />
■Androidのデフォルトブラウザではなく、<strong>Firefox</strong>や<strong>Opera</strong>アプリではどうか。<br />
<br />
■<strong>video</strong>タグで音声再生するやり方はどうか。<br />
＜video onclick=&#8221;this.play();&#8221;＞<br />
	＜source src=&#8221;test.mp3&#8243; type=&#8221;audio/mp3&#8243; /＞<br />
	＜source src=&#8221;test.ogg&#8221; type=&#8221;audio/ogg&#8221; /＞<br />
	   Get a better browser<br />
＜/video＞<br />
<br />
<br />
ちなみにPCでも全ブラウザでいける音声フォーマットってないんですね。。<br />
<br />
参考：<br />
HTML5 Audioサポート状況（メモ）<br />
<a href="http://d.hatena.ne.jp/shinobu_aoki/20110621/1308667618" target="_blank">http://d.hatena.ne.jp/shinobu_aoki/20110621/1308667618</a><br />
HTML5 Audio<br />
<a href="http://www.w3schools.com/html5/html5_audio.asp" target="_blank">http://www.w3schools.com/html5/html5_audio.asp</a><br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/405/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

