<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2japanesefull.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>alt</title>
	
	<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>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/jp/alt" /><feedburner:info uri="jp/alt" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>FlashDevelop4でAIR for iOSの実機確認ができるまで for Windows</title>
		<link>http://feedproxy.google.com/~r/jp/alt/~3/iwIbmr5MEOo/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>
<img src="http://feeds.feedburner.com/~r/jp/alt/~4/iwIbmr5MEOo" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/437/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alt-scape.com/archives/437</feedburner:origLink></item>
		<item>
		<title>JavascriptでH.264のビデオをデコード(再生)する「Broadway.js」</title>
		<link>http://feedproxy.google.com/~r/jp/alt/~3/NdP7R2THajc/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>
<img src="http://feeds.feedburner.com/~r/jp/alt/~4/NdP7R2THajc" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/431/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alt-scape.com/archives/431</feedburner:origLink></item>
		<item>
		<title>ログ出力ライブラリ「Blackbird」をスマートフォンで使ってみる</title>
		<link>http://feedproxy.google.com/~r/jp/alt/~3/X1qXwuvXO10/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>
<img src="http://feeds.feedburner.com/~r/jp/alt/~4/X1qXwuvXO10" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/424/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alt-scape.com/archives/424</feedburner:origLink></item>
		<item>
		<title>HTML5を視野に入れてHTML4.01とXHTML1.0のどちらを選ぶべきか</title>
		<link>http://feedproxy.google.com/~r/jp/alt/~3/H6Ep0UIRQK4/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>
<img src="http://feeds.feedburner.com/~r/jp/alt/~4/H6Ep0UIRQK4" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/419/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alt-scape.com/archives/419</feedburner:origLink></item>
		<item>
		<title>SNSプラットフォーム同士をミックスさせるスキーム</title>
		<link>http://feedproxy.google.com/~r/jp/alt/~3/6J5znsCp8wY/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>
<img src="http://feeds.feedburner.com/~r/jp/alt/~4/6J5znsCp8wY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/421/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://blog.alt-scape.com/archives/421</feedburner:origLink></item>
		<item>
		<title>スマートフォンサイト構築のためのリモートデバッグ環境その2 – JSconsole</title>
		<link>http://feedproxy.google.com/~r/jp/alt/~3/PFbSM5Dhr9s/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>
<img src="http://feeds.feedburner.com/~r/jp/alt/~4/PFbSM5Dhr9s" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/418/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://blog.alt-scape.com/archives/418</feedburner:origLink></item>
		<item>
		<title>スマートフォンサイト構築のためのリモートデバッグ環境その1 – weinre</title>
		<link>http://feedproxy.google.com/~r/jp/alt/~3/JLI9GgL69cg/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>
<img src="http://feeds.feedburner.com/~r/jp/alt/~4/JLI9GgL69cg" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/423/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://blog.alt-scape.com/archives/423</feedburner:origLink></item>
		<item>
		<title>Adobe Digital Publishing Suiteの自分まとめ</title>
		<link>http://feedproxy.google.com/~r/jp/alt/~3/eerTfoya54Q/403</link>
		<comments>http://blog.alt-scape.com/archives/403#comments</comments>
		<pubDate>Fri, 09 Sep 2011 09:45:33 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[参考]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[Adobe Digital Publishing Suite]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=403</guid>
		<description><![CDATA[



Adobe Digital Publishing Suiteについて。

以下は、現バージョンのメモです。ベータ版とは仕様が大きく異なります。


―――――――――――――――――――――――――――――――― [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://blog.alt-scape.com/img/adobe_digital_publishing_suite.jpg" />
<br />
<br />
<strong>Adobe Digital Publishing Suite</strong>について。<br />
<br />
以下は、現バージョンのメモです。ベータ版とは仕様が大きく<a href="http://www.dtp-transit.jp/ebook/dmp/post_1297.html" target="_blank">異なり</a>ます。<br />
<br />
<span id="more-403"></span><br />
―――――――――――――――――――――――――――――――――――――――<br />
【作業工程】　Adobeとライセンス契約するディストリビューション前まで<br />
<br />
<strong>InDesign CS5</strong>および<strong>InDesign CS5.5</strong>をインストール<br />
　　　↓　↓　↓<br />
<strong>Folio Producer tools</strong>をインストール <a href="http://www.adobe.com/support/downloads/product.jsp?product=172&#038;platform=Windows" target="_blank">Windows</a> | <a href="http://www.adobe.com/support/downloads/product.jsp?product=172&#038;platform=Macintosh" target="_blank">Mac</a><br />
※アップデートが可能であれば最新（1.5.0）にしておく<br />
（1.5.0は下位互換性がないので注意）<br />
　　　↓　↓　↓<br />
InDesignの「<strong>Folio Builder</strong>」パネルもアップデートしておく<br />
　　　↓　↓　↓<br />
InDesignドキュメントを作成。縦置き版と横置き版のドキュメントを個別作成 or 向きを1つに固定かを選択<br />
　　　↓　↓　↓<br />
InDesignで各ページをデザインする<br />
　　　↓　↓　↓<br />
「<strong>Overlay Creator</strong>」パネルからスライドショーやビデオなどのインタラクティブ・オブジェクトを配置<br />
　　　↓　↓　↓<br />
「<strong>Folio Builder</strong>」パネルでFolioまたは記事を選択しプレビューする<br />
　　　↓　↓　↓<br />
完成したら、「<strong>Folio Builder</strong>」パネルからFolioデータをパブリッシュ<br />
　　　↓　↓　↓<br />
各デバイス上のプレビューは「<strong>Folio Builder</strong>」パネルから<strong>Acrobat.com</strong>にログインし、Folioをアップデート<br />
<br />
以下のビューワーを各OSにインストールして行う<br />
<br />
<strong>iPad</strong>用 <strong>Adobe Content Viewer</strong><br />
　iPad でApp Store からAdobe Content Viewer をダウンロード。<br />
　Adobe Content Viewerを起動し、Folio Builderパネルで使用したのと同じAdobe IDでサインイン。<br />
　自分がアクセス権を持っているFolioのダウンロードとプレビューができる。<br />
　<a href="http://kb2.adobe.com/jp/cps/906/cpsid_90621.html" target="_blank">http://kb2.adobe.com/jp/cps/906/cpsid_90621.html</a><br />
<br />
<strong>Androidr</strong>用 <strong>Adobe Content Viewer</strong><br />
<a href="https://market.android.com/details?id=air.com.adobe.contentviewer" target="_blank">https://market.android.com/details?id=air.com.adobe.contentviewer</a><br />
<br />
<strong>BlackBerry PlayBook</strong>用 <strong>Adobe Content Viewer</strong><br />
<a href="https://appworld.blackberry.com/webstore/content/45624" target="_blank">https://appworld.blackberry.com/webstore/content/45624</a><br />
<br />
※iPad以外はAIRランタイムによってビューワーが提供されているので各OSにAIRを入れておく必要がある。<br />
<br />
　　　↓　↓　↓<br />
対象のFolioをクライアントや複数のデザイナーで<a href="http://help.adobe.com/ja_JP/digitalpubsuite/using/WS9293e1fb3b977c5c7b1f65ad12f28224932-7fff.html#WS9293e1fb3b977c5c7b1f65ad12f28224932-7ffb" target="_blank">共有する</a>ことも可能<br />
<br />
―――――――――――――――――――――――――――――――――――――――<br />
【どんなインタラクティブ機能がある？】<br />
<br />
・スライドショー<br />
・画像シーケンス（360 ビューワ）<br />
・パンとズーム（小さい領域に大きな画像を表示）<br />
・パノラマ（6枚の立方体画像でパノラマ機能）<br />
・ハイパーリンク<br />
　（WEBページ、電子メール、外部のアプリケーション、アプリ内ブラウザでローカルHTMLファイルなど）<br />
・Webビューコンテンツ<br />
　（オーバーレイを使用するとWebページをビュー領域内に表示も可能。URLまたはローカルHTMLファイル指定）<br />
・スクロール可能フレーム（1ページでコンテンツ詰め込んで完結させたい場合に有効）<br />
・オーディオ＆ビデオ（URL指定はできないので埋め込み。WebビューのHTML5なら可能）<br />
<br />
―――――――――――――――――――――――――――――――――――――――<br />
【対応OS】<br />
<br />
・iPad<br />
・Android 2.2（Froyo）および3.0（Honeycomb）<br />
・RIM BlackBerry PlayBook<br />
<br />
―――――――――――――――――――――――――――――――――――――――<br />
【ディストリビューション以降】<br />
<br />
<strong>Distribution Service</strong><br />
ホストされたフルフィルメントサーバーで.folio形式でクロスプラットフォーム出版ファイルを格納し、様々な機器上のContent Viewerに出版物を配信します。<br />
<br />
<strong>e-Commerce Service</strong><br />
AppleのApp内購入機能による購読、出版社Webサイトからの直接販売、また、サードパーティのコンテンツ集約事業者に対する課金など、様々なeコマースモデルを柔軟にサポートします。<br />
<br />
<strong>Analytics Service</strong><br />
Adobe Online Marketing Suite, powered by Omniture®との緊密な連携により、記事および広告コンテンツが読者や顧客へとどのように伝わっているかを詳しく分析できます。<br />
<br />
―――――――――――――――――――――――――――――――――――――――<br />
【料金体系】<br />
<br />
<img src="http://blog.alt-scape.com/img/adobe_digital_publishing_suite2.jpg" />
<br />
<br />
■<strong>PROFESSIONAL EDITION</strong><br />
＜プラットフォーム費用＞<br />
年間60万円（月額5万円換算）<br />
<br />
＜サービス費用＞<br />
※1刊行物の料金は年間発行部数により変動する。<br />
25,000フォリオダウンロード（25円／フォリオ）	625,000円<br />
250,000フォリオダウンロード（17円／フォリオ）	4,250,000円<br />
500,000フォリオダウンロード（14円／フォリオ）	7,000,000円<br />
<br />
■「<strong>ENTERPRISE EDITION</strong>」<br />
※プラットフォーム、サービス、サポート費用に基づき個別の見積り。<br />
<br />
申し込みは<a href="http://www.adobe.com/jp/products/digitalpublishingsuite/partners.html" target="_blank">こちら</a><br />
<a href="https://digitalpublishing.acrobat.com/welcome.html" target="_blank">お客様ログイン画面</a><br />
<a href="http://www.adobe.com/jp/support/digitalpublishingsuite/" target="_blank">ヘルプ＆サポート</a><br />
<br />
―――――――――――――――――――――――――――――――――――――――<br />
【ショーケース】<br />
<br />
<a href="http://blogs.adobe.com/digitalpublishinggallery/publications" target="_blank">Adobe Digital Publishing Suiteを使った電子書籍アプリ事例</a><br />
<a href="http://adobe-digipub.jp/" target="_blank">ADOBE DIGIPUB MAGAZINE</a><br />
<br />
―――――――――――――――――――――――――――――――――――――――<br />
【ソリューション提供企業】<br />
<br />
<a href="http://www.dnp.co.jp/news/1230027_2482.html" target="_blank">大日本印刷（DNP）</a><br />
<a href="http://dp.amana.jp/" target="_blank">アマナインタラクティブ</a><br />
<br />
―――――――――――――――――――――――――――――――――――――――<br />
【資料】<br />
<br />
<a href="http://help.adobe.com/ja_JP/digitalpubsuite/using/digitalpubsuite_help.pdf" target="_blank">Digital Publishing Suite ユーザーガイド</a><br />
<a href="adobe-digipub.jp/common/pdf/ADPS_Manual_20110530.pdf" target="_blank">ADPS Manual</a><br />
<a href="http://qtweb.txt-nifty.com/indesign/" target="_blank">ADPS &#038; EPUBがやってくる InDesignで作る電子書籍</a><br />
<br />
</p>
<img src="http://feeds.feedburner.com/~r/jp/alt/~4/eerTfoya54Q" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/403/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alt-scape.com/archives/403</feedburner:origLink></item>
		<item>
		<title>音楽ストリーミングサービス「Shuffler.fm」が熱い</title>
		<link>http://feedproxy.google.com/~r/jp/alt/~3/hUofrkkMkcU/422</link>
		<comments>http://blog.alt-scape.com/archives/422#comments</comments>
		<pubDate>Thu, 08 Sep 2011 13:07:29 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[WEBサイト]]></category>
		<category><![CDATA[音楽]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=422</guid>
		<description><![CDATA[



以前、フランスのDeezerを紹介したこともありましたが、また気になる音楽ストリーミングサービスです。
「Shuffler.fm」というオランダのインタラクティブ・エージェンシーTONEによるサイト。

Shuf [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://blog.alt-scape.com/img/shuffler.jpg" />
<br />
<br />
以前、フランスの<a href="http://blog.alt-scape.com/archives/261" target="_blank"><strong>Deezer</strong></a>を紹介したこともありましたが、また気になる音楽ストリーミングサービスです。<br />
「<strong>Shuffler.fm</strong>」というオランダのインタラクティブ・エージェンシー<a href="http://tone.fm/" target="_blank">TONE</a>によるサイト。<br />
<br />
<strong>Shuffler.fm</strong><br />
<a href="http://shuffler.fm" target="_blank">http://shuffler.fm</a><br />
<br />
<span id="more-422"></span><br />
まずサイトに飛んでGenresタブをクリックし、<br />
150以上の（Last.fm APIをもとに）細分化されたジャンルのなかから好きなものを選びます。<br />
するとShuffler.fm独自のキュレーションリストから配信元のページを巡回しながら自動再生してくれます。<br />
仕組みはいたってシンプルなので、Deezerのようなソーシャルなつながりがあったり、マイプレイリスト作ったり、<br />
豊富なラジオ機能があったりするわけではありません。<br />
※ツイートやFacebookいいねボタン、ブログ・トラックのお気に入り登録はあります。<br />
<br />
おまけ程度に検索ボックスもありますが、基本はジャンルを選んで聴くだけの受動型サービスです。<br />
最初の2,3曲で期待外れの曲が流れてはもう二度と使ってもらえませんが、<br />
今のところ、毎度素晴らしいセレクトで曲を配信してくれます。僕的に。<br />
ジャンルの精度に関してはたまにアレっていうのもあるかも。<br />
<br />
<img src="http://blog.alt-scape.com/img/shuffler3.jpg" />
↑↑↑上のようにブログを巡回しながら曲が聴ける<br />
<br />
音楽検索エンジンがネット上のあらゆるmp3をクロールする数で勝負するタイプではなく、<br />
Shuffler.fmは良質な音楽ブログ・サイトの記事を頼りにそのRSSフィードからアグリゲートし、<br />
常に厳選された最新の音楽を聴くことができます。<br />
コンテンツ（音ネタ）提供元のブログを横断しながら曲が視聴できるので、<br />
制作者自身、またはSoundCloudなどからプレイヤーを貼り付けたユーザーの<br />
紹介記事もあわせて読むことができるのです。<br />
まさに魅力といえば、そのタイムリーさとレコメンデーション力を同時に味わえることではないでしょうか。<br />
<br />
音楽ブログのキュレーションリストも立ち上げ時には1600ほどあり、<br />
ユーザー自身がブログを<a href="http://shuffler.fm/blogs/" target="_blank">ココ</a>からリストに登録できる仕組みも兼ね備えています。<br />
こうやってShufflerのクオリティが保たれているのは、<br />
人の手を介したリストになっているからでしょうか。<br />
<br />
<img src="http://blog.alt-scape.com/img/shuffler2.jpg" />
↑↑↑dublab、FADER、FACT magazineなど先進的な音楽情報を扱ったサイトも登録されている<br />
<br />
そしてShufflerは先日、大きな<a href="http://techcrunch.com/2011/08/16/audio-magazine-shuffler-fm-gets-big-update-gives-us-sneak-peek-at-ipad-app/" target="_blank">アップデート</a>を行いました。<br />
なんとiPadアプリを近日リリースするそうです。<br />
「<strong>音楽のためのFlipboardだ</strong>」とうたってスタートして早1年。<br />
いよいよ本格的なオーディオ・マガジンの到来かもしれません。<br />
<br />
<br />
Chromeアプリもあるのでよかったらどうぞ。<br />
<br />
Chromeアプリ<br />
<a href="https://chrome.google.com/webstore/detail/njgfhnajhpjmlbfpieplfnocnodbkcfh" target="_blank">https://chrome.google.com/webstore/detail/njgfhnajhpjmlbfpieplfnocnodbkcfh</a><br />
<br />
Facebook<br />
<a href="http://www.facebook.com/shuffler.fm" target="_blank">http://www.facebook.com/shuffler.fm</a><br />
<br />
Twitter<br />
<a href="http://twitter.com/#!/ShufflerFM" target="_blank">http://twitter.com/#!/ShufflerFM</a><br />
<br />
</p>
<img src="http://feeds.feedburner.com/~r/jp/alt/~4/hUofrkkMkcU" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/422/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alt-scape.com/archives/422</feedburner:origLink></item>
		<item>
		<title>TweetボタンのパラメータをJavascriptで動的に変えるサンプル</title>
		<link>http://feedproxy.google.com/~r/jp/alt/~3/0jL3Vh5SjpM/420</link>
		<comments>http://blog.alt-scape.com/archives/420#comments</comments>
		<pubDate>Tue, 06 Sep 2011 04:40:21 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[サンプル]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Twitter]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=420</guid>
		<description><![CDATA[
ブログなどWEBサイトに設置するTweetボタンですが、
Twitter APIを参考にするとTweet内容をパラメータで設定できるようになっています。

■aタグのhref属性にGETパラメータで設定
&#60;scr [...]]]></description>
			<content:encoded><![CDATA[<p>
ブログなどWEBサイトに設置する<strong>Tweetボタン</strong>ですが、<br />
<a href="https://dev.twitter.com/docs/tweet-button" target="_blank">Twitter API</a>を参考にするとTweet内容をパラメータで設定できるようになっています。<br />
<br />
■aタグのhref属性にGETパラメータで設定<br />
<pre class="code"><span class="tag">&lt;script <span class="attr">src=</span><span class="value">&quot;http://platform.twitter.com/widgets.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;div&gt;</span><br />
  <span class="tag">&lt;a <span class="attr">href=</span><span class="value">&quot;http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com&amp;amp;via=your_screen_name&quot;</span> <span class="attr">class=</span><span class="value">&quot;twitter-share-button&quot;</span>&gt;</span>Tweet<span class="tag">&lt;/a&gt;</span><br />
<span class="tag">&lt;/div&gt;</span></pre>
<br />
<div style="line-height:150%">
■data Attributesにパラメータを設定（HTML5の独自データ属性）<br />
<pre class="code"><span class="tag">&lt;script <span class="attr">src=</span><span class="value">&quot;http://platform.twitter.com/widgets.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;div&gt;</span><br />
   <span class="tag">&lt;a <span class="attr">href=</span><span class="value">&quot;http://twitter.com/share&quot;</span> <span class="attr">class=</span><span class="value">&quot;twitter-share-button&quot;</span><br />
      <span class="attr">data-url=</span><span class="value">&quot;http://dev.twitter.com/pages/tweet_button&quot;</span><br />
      <span class="attr">data-via=</span><span class="value">&quot;your_screen_name&quot;</span><br />
      <span class="attr">data-text=</span><span class="value">&quot;Checking out this page about Tweet Buttons&quot;</span><br />
      <span class="attr">data-related=</span><span class="value">&quot;anywhere:The Javascript API&quot;</span><br />
      <span class="attr">data-count=</span><span class="value">&quot;vertical&quot;</span>&gt;</span>Tweet<span class="tag">&lt;/a&gt;</span><br />
<span class="tag">&lt;/div&gt;</span></pre>
<br />
<span id="more-420"></span><br />
やり方としては上記の<strong>aタグ</strong>か<strong>HTML5</strong>の<strong>独自データ属性</strong>かの2パターンになります。<br />
これを決めうちなり、サーバーサイドで予め仕込む分には問題ないですが、<br />
内容をフォームから取得したりとユーザーのインタラクションによって<br />
パラメータの中身が変わるときは<strong>Javascript</strong>で制御する必要が出てきます。<br />
<br />
Twitter APIはまず<strong>widgets.js</strong>という専用JSファイルを読み込んで<br />
こいつがaタグ要素をiframeに書き換える仕組みになっているようです。<br />
なので、事前にaタグ要素にパラメータを仕込むJavascriptサンプルを作ってみました。<br />
BUTTONを押すごとに入力フォームの値をTWEETします。<br />
<br />
<br />
<a href="http://blog.alt-scape.com/js/tweet_button/a_href.html" target="_blank"><strong>aタグのhref属性に設定するサンプル</strong></a><br />
<br />
<a href="http://blog.alt-scape.com/js/tweet_button/html5_dataset.html" target="_blank"><strong>data Attributesに設定するサンプル</strong></a><br />
※こちらは<strong>jQuery</strong>の<strong>.data()</strong>メソッドがうまく読み書きできなかったので、<a href="http://www.orangesoda.net/jquery.dataset.html" target="_blank">Dataset</a>プラグインを使用しています。<br />
<br />
</div>
<br />
</p>
<img src="http://feeds.feedburner.com/~r/jp/alt/~4/0jL3Vh5SjpM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/420/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alt-scape.com/archives/420</feedburner:origLink></item>
	</channel>
</rss>

