<?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/sample/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>TweetボタンのパラメータをJavascriptで動的に変えるサンプル</title>
		<link>http://blog.alt-scape.com/archives/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>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/420/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>スマートフォン向けHTML5のVIDEOタグを使った動画再生 ～MediaElement.js編～</title>
		<link>http://blog.alt-scape.com/archives/415</link>
		<comments>http://blog.alt-scape.com/archives/415#comments</comments>
		<pubDate>Mon, 15 Aug 2011 08:48:47 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[サンプル]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=415</guid>
		<description><![CDATA[
先日のYoutube編に続き、
HTML5ビデオで動画再生を実装する際の有効手段として
オープンソースのライブラリを使うのが考えられます。

HTML5＋Flashのフォールバックでスマートフォン（iPhone,And [...]]]></description>
			<content:encoded><![CDATA[<p>
先日の<a href="http://blog.alt-scape.com/archives/414">Youtube編</a>に続き、<br />
HTML5ビデオで動画再生を実装する際の有効手段として<br />
オープンソースのライブラリを使うのが考えられます。<br />
<br />
HTML5＋Flashのフォールバックでスマートフォン（iPhone,Android）のOSに対応しているものを探すと<br />
「<strong>VideoJS</strong>」、「<strong>MediaElement.js</strong>」、「<strong>projekktor</strong>」、「<strong>LeanBack Player</strong>」などがあります。<br />
VideoJSの方は内包しているswfにライセンス縛りのある<strong><a href="http://flowplayer.org/" target="_blank">Flowplayer</a></strong>を使用しているので、<br />
MediaElement.jsの方から試してみたいと思います。<br />
<br />
MediaElement.js<br />
<a href="http://mediaelementjs.com/" target="_blank">http://mediaelementjs.com/</a><br />
紹介記事<br />
<a href="http://journal.mycom.co.jp/articles/2010/09/28/html5-video-and-mediaelementjs/index.html" target="_blank">http://journal.mycom.co.jp/articles/2010/09/28/html5-video-and-mediaelementjs/index.html</a><br />
<br />
<span id="more-415"></span><br />
【スマートフォン向けビデオ素材の準備】<br />
HTML5 videoのソース指定には<strong>ogv</strong>、<strong>mp4</strong>、<strong>webm</strong>の3つを用意します。<br />
今回は手っ取り早く自分のYoutube動画から抜き取ってみました。<br />
<a href="http://www.vid-dl.net/">Vid-DL</a>などのツール使えばmp4とwebmは落とせます。<br />
スマホであれば低画質にエンコードされた640pで十分です。<br />
<br />
.ogvはスマートフォン向けに特化した動画コンバーター「<a href="http://www.mirovideoconverter.com/" target="_blank"><strong>Miro Video Converter</strong></a>」を使います。<br />
変換先を「<strong>Theora</strong>」に指定して、さきほど落としたmp4をドラッグし、コンバートするだけ。<br />
<br />
<br />
【HTML5の記述】<br />
<br />
■まず普通にHTML5の＜video＞タグを使った場合<br />
<pre class="code"><span class="tag">&lt;video <span class="value">controls </span><span class="attr">poster=</span><span class="value">&quot;html5video.jpg&quot;</span> <span class="attr">width=</span><span class="value">&quot;320&quot;</span> <span class="attr">height=</span><span class="value">&quot;240&quot;</span>&gt;</span><br />
    <span class="tag">&lt;source <span class="attr">src=</span><span class="value">&quot;html5video.theora.ogv&quot;</span> <span class="attr">type=</span><span class="value">&quot;video/ogg&quot;</span>&gt;</span><br />
    <span class="tag">&lt;source <span class="attr">src=</span><span class="value">&quot;html5video.mp4&quot;</span> <span class="attr">type=</span><span class="value">&quot;video/mp4&quot;</span>&gt;</span><br />
    <span class="tag">&lt;source <span class="attr">src=</span><span class="value">&quot;html5video.webm&quot;</span> <span class="attr">type=</span><span class="value">&quot;video/webm&quot;</span>&gt;</span><br />
    <span class="tag">&lt;p&gt;</span>フォールバックコンテンツ(Flashの代替え処理など)<span class="tag">&lt;/p&gt;</span><br />
<span class="tag">&lt;/video&gt;</span></pre>
<br />
<br />
■mediaelement.jsを使った場合 [<a href="http://blog.alt-scape.com/js/mediaelement_js/" target="_blank"><strong>サンプル</strong></a>]<br />
<br />
＜HEAD＞内<br />
<pre class="code"><span class="tag">&lt;script <span class="attr">src=</span><span class="value">&quot;build/jquery.js&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;build/mediaelement-and-player.min.js&quot;</span>&gt;</span><span class="tag">&lt;/script&gt;</span><br />
<span class="tag">&lt;link <span class="attr">rel=</span><span class="value">&quot;stylesheet&quot;</span> <span class="attr">href=</span><span class="value">&quot;build/mediaelementplayer.css&quot;</span> /&gt;</span><br />
</pre>
<br />
＜BODY＞内<br />
<pre class="code"><span class="rem">&lt;!-- Multiple codecs with Flash fallback --&gt;</span><br />
<span class="tag">&lt;video <span class="attr">id=</span><span class="value">&quot;player&quot;</span> <span class="attr">width=</span><span class="value">&quot;320&quot;</span> <span class="attr">height=</span><span class="value">&quot;240&quot;</span> <span class="attr">poster=</span><span class="value">&quot;media/html5video.jpg&quot;</span> <span class="attr">controls=</span><span class="value">&quot;controls&quot;</span> <span class="attr">preload=</span><span class="value">&quot;none&quot;</span>&gt;</span><br />
    <br />
    <span class="rem">&lt;!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --&gt;</span><br />
    <span class="tag">&lt;source <span class="attr">type=</span><span class="value">&quot;video/mp4&quot;</span> <span class="attr">src=</span><span class="value">&quot;media/html5video.mp4&quot;</span> /&gt;</span><br />
    <br />
    <span class="rem">&lt;!-- WebM/VP8 for Firefox4, Opera, and Chrome --&gt;</span><br />
    <span class="tag">&lt;source <span class="attr">type=</span><span class="value">&quot;video/webm&quot;</span> <span class="attr">src=</span><span class="value">&quot;media/html5video.webm&quot;</span> /&gt;</span><br />
    <br />
    <span class="rem">&lt;!-- Ogg/Vorbis for older Firefox and Opera versions --&gt;</span><br />
    <span class="tag">&lt;source <span class="attr">type=</span><span class="value">&quot;video/ogg&quot;</span> <span class="attr">src=</span><span class="value">&quot;media/html5video.theora.ogv&quot;</span> /&gt;</span><br />
    <br />
    <span class="rem">&lt;!-- Flash fallback for non-HTML5 browsers without JavaScript --&gt;</span><br />
    <span class="tag">&lt;object <span class="attr">width=</span><span class="value">&quot;320&quot;</span> <span class="attr">height=</span><span class="value">&quot;240&quot;</span> <span class="attr">type=</span><span class="value">&quot;application/x-shockwave-flash&quot;</span> <span class="attr">data=</span><span class="value">&quot;build/flashmediaelement.swf&quot;</span>&gt;</span><br />
        <span class="tag">&lt;param <span class="attr">name=</span><span class="value">&quot;movie&quot;</span> <span class="attr">value=</span><span class="value">&quot;build/flashmediaelement.swf&quot;</span> /&gt;</span><br />
        <span class="tag">&lt;param <span class="attr">name=</span><span class="value">&quot;flashvars&quot;</span> <span class="attr">value=</span><span class="value">&quot;controls=true&amp;poster=media/html5video.jpg&amp;file=media/html5video.mp4&quot;</span> /&gt;</span><br />
        <span class="rem">&lt;!-- Image as a last resort --&gt;</span><br />
        <span class="tag">&lt;img <span class="attr">src=</span><span class="value">&quot;media/html5video.jpg&quot;</span> <span class="attr">width=</span><span class="value">&quot;320&quot;</span> <span class="attr">height=</span><span class="value">&quot;240&quot;</span> <span class="attr">title=</span><span class="value">&quot;&quot;</span> /&gt;</span><br />
    <span class="tag">&lt;/object&gt;</span><br />
<span class="tag">&lt;/video&gt;</span><br />
<span class="tag">&lt;script&gt;</span><br />
// jQuery method<br />
$('video').mediaelementplayer();<br />
<br />
// normal JavaScript <br />
var player = new MediaElementPlayer('#player');<br />
<span class="tag">&lt;/script&gt;</span></pre>
<br />
<br />
<div style="line-height:170%">
【エラーのときは】<br />
動画の再生がエラーになる場合は以下を疑ってみてください。<br />
Webサーバーがビデオフォーマット（拡張子）を認識できていない場合は<br />
.htaccessに<br />
<strong>AddType video/ogg  .ogv<br />
AddType video/mp4  .mp4<br />
AddType video/webm .webm</strong><br />
を追加。<br />
Basic認証がある環境だと動画を読み込み時、エラーになります。<br />
<br />
<br />
【余談】<br />
＜video＞タグはAndroidだと<a href="http://developer.android.com/sdk/android-2.0-highlights.html" target="_blank">バージョン2.0</a>以上しかサポートされていないので<br />
それ以下はブラウザ内での動画再生は諦めて、<br />
aタグによる動画リンクにして外部プレーヤーで再生させる方がベター。<br />
他いろいろ調べていると、2.0～2.3ぐらいまではどうもメーカーによってコーデックをサポートしてなかったり、<br />
Javascriptで<a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/" target="_blank">トリガーを設置</a>してあげないとフルスクリーン再生してくれなかったりするようです。<br />
<br />
<br />
こちらのサイトにHTML5動画再生ライブラリ比較表が載ってます。<br />
ほかにも良さそうなのがいくつかあるのでまたの機会に試してみます。<br />
<a href="http://praegnanz.de/html5video/" target="_blank">http://praegnanz.de/html5video/</a><br />
<br />
<br />
【参考】<br />
Android Supported Media Formats<br />
<a href="http://developer.android.com/guide/appendix/media-formats.html" target="_blank">http://developer.android.com/guide/appendix/media-formats.html</a><br />
Video for Everybody!<br />
<a href="http://camendesign.com/code/video_for_everybody" target="_blank">http://camendesign.com/code/video_for_everybody</a><br />
<br />
<br />
【2011/10/7追記】<br />
Youtubeから落とした動画を違うソフトを使ってエンコードした場合、<br />
動画再生時に「<strong>残念ながら、このビデオはこのデバイスへのストリーミングが有効ではありません</strong>」と<br />
表示されるケースがあります。<br />
<a href="http://www.videohelp.com/tools/mp4box" target="_blank">MP4BOX</a>を使ってヘッダを書き換えてやると直ります。<br />
<a href="http://d.hatena.ne.jp/android-cafe/20110401" target="_blank">コチラ</a>を参考にしました。<br />
<br />
それと<strong>GalaxyS</strong>は＜video＞タグを設置するだけでは再生できないので<br />
Javascriptの<strong>play</strong>メソッドで再生する必要があります。<br />
</div>
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/415/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>スマートフォン向けHTML5のVIDEOタグを使った動画再生 ～Youtube編～</title>
		<link>http://blog.alt-scape.com/archives/414</link>
		<comments>http://blog.alt-scape.com/archives/414#comments</comments>
		<pubDate>Fri, 12 Aug 2011 11:36:47 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[サンプル]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=414</guid>
		<description><![CDATA[
iPhone、Androidなどのスマートフォンサイトで動画コンテンツを提供するとなると
真っ先に思いつくのがHTML5の＜video＞タグですよね。

但し、OSやバージョンによって以下の要素がバラバラです。

－－ [...]]]></description>
			<content:encoded><![CDATA[<p>
<strong>iPhone</strong>、<strong>Android</strong>などのスマートフォンサイトで動画コンテンツを提供するとなると<br />
真っ先に思いつくのが<strong>HTML5</strong>の＜<strong>video</strong>＞タグですよね。<br />
<br />
但し、OSやバージョンによって以下の要素がバラバラです。<br />
<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
＜video＞タグのサポート。（Androidは2.0～）<br />
<strong>H.264</strong>、<strong>OGG</strong>、<strong>WebM</strong>などのビデオコーデック。<br />
再生可能な<a href="http://ascii.jp/elem/000/000/592/592830/" target="_blank">解像度</a>、ビットレート、fpsの規定。<br />
※コーデックは＜source＞タグで全部指定すれば大丈夫。<br />
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br />
<br />
iPhone、Android、Windows Phone、各種タブレットのブラウザに対応させるだけでもひと苦労ですね。。<br />
実装手段としてHTML5 videoのサポート状況に応じて<strong>Flash</strong>のフォールバックを利用する<br />
動画再生ライブラリもありますが、まずは<strong>Youtube</strong>を使った実験をば。<br />
※動画再生ライブラリを使うやり方は次回書きます。<br />
<br />
<span id="more-414"></span><br />
～なぜYoutubeか～<br />
・海外のスマートフォンサイトでも動画再生はYoutubeを活用しているところが多い。<br />
・<a href="http://www.geek.com/articles/mobile/goodbye-flash-youtube-mobile-goes-html5-on-iphone-and-android-2010079/" target="_blank">HTML5の＜video＞タグ</a>に対応している。<br />
・<a href="http://www.google.com/support/mobile/bin/answer.py?hl=ja&#038;answer=174814#supported" target="_blank">m.youtube.com</a>がAndroid、BlackBerry、iPhone、Nokia S60、Windows Mobileの各OSに対応している。<br />
<br />
～メリットとして～<br />
動画を置く<strong>インフラ</strong>（帯域・サーバー）、<strong>ビデオエンコード</strong>、ユーザー環境による分岐処理をすべてYoutube側に任せてしまえる。<br />
（動画アップするとmp4とwebmとflvにそれぞれ高・中・低画質でエンコードしてくれているみたい）<br />
アノテーションやキャプション・字幕もつけられる。インサイト機能もある。<br />
外部サービスを使う分、公開範囲などはYoutubeマナーに縛られてしまう。<br />
<br />
プライバシー設定：<br />
・公開<br />
・限定公開（リンクを知っている人のみ再生可能）<br />
・非公開（再生するにはログインが必要）<br />
※コメントや評価の許可・不許可設定も可能<br />
<br />
<br />
<iframe width="320" height="270" src="http://www.youtube.com/embed/Y4-dqqLUjDo?rel=0" frameborder="0" allowfullscreen></iframe><br />
<br />
【埋め込み方式でやる場合】<br />
アップした動画の埋め込みコードを自サイトに貼り付けます。<br />
昨年、埋め込みコードの仕様が＜<strong>object</strong>＞から＜<strong>iframe</strong>＞に変わりましたが、<br />
iOSの3.x、Safari4.xの下位バージョンでiframeが正常に機能しない例もあるので<br />
「以前の埋め込みコードを使用する」をチェックして＜object＞タグを使った方が安全かもしれません。<br />
但し、Googleブログには<br />
「iframe埋め込み方式対応により、閲覧者の環境に応じてFlash版とHTML5版を自動的に選択して表示することが可能になった」<br />
と書いてあるので、iOS以外はiframe方式を使うべきかも。<br />
<pre class="code"><span class="tag">&lt;iframe <span class="attr">width=</span><span class="value">&quot;320&quot;</span> <span class="attr">height=</span><span class="value">&quot;270&quot;</span> <span class="attr">src=</span><span class="value">&quot;http://www.youtube.com/embed/Y4-dqqLUjDo?rel=0&quot;</span> <span class="attr">frameborder=</span><span class="value">&quot;0&quot;</span> <span class="value">allowfullscreen</span>&gt;</span><span class="tag">&lt;/iframe&gt;</span></pre>
<br />
<br />
<div style="line-height:170%">
【Youtube JavaScript Player API方式でやる場合】<br />
もうひとつ、<a href="http://googledevjp.blogspot.com/2011/01/iframe-youtube-player-javascript-player.html" target="_blank"><strong>JavaScript Player API</strong></a>を使う方法。<br />
これにより細かい動画プレイヤーの制御が可能になります。<br />
</div>
<pre class="code">&lt;script&gt;<br />
<span class="rem">//Load player api asynchronously.</span><br />
<span class="keyword">var</span> tag = document.createElement(<span class="str">'script'</span>);<br />
tag.src = <span class="str">&quot;http://www.youtube.com/player_api&quot;</span>;<br />
<span class="keyword">var</span> firstScriptTag = document.getElementsByTagName(<span class="str">'script'</span>)[<span class="num">0</span>];<br />
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);<br />
<span class="keyword">var</span> player;<br />
<span class="keyword">function</span> onYouTubePlayerAPIReady() {<br />
    player = <span class="keyword">new</span> YT.Player(<span class="str">'player'</span>, {<br />
      height: <span class="str">'270'</span>,<br />
      width: <span class="str">'320'</span>,<br />
      videoId: <span class="str">'Y4-dqqLUjDo'</span>, <br />
      events: { <br />
        <span class="str">'onReady'</span>: onPlayerReady, <br />
        <span class="str">'onStateChange'</span>: onPlayerStateChange <br />
      }<br />
    });<br />
}<br />
<span class="keyword">function</span> onPlayerReady(evt) {<br />
}<br />
<span class="keyword">function</span> onPlayerStateChange(evt) {<br />
}<br />
<span class="keyword">function</span> stopVideo() {<br />
}<br />
&lt;/script&gt;<br />
</pre>
<br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/414/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Adobe AIR2でOSネイティブと連携する</title>
		<link>http://blog.alt-scape.com/archives/399</link>
		<comments>http://blog.alt-scape.com/archives/399#comments</comments>
		<pubDate>Tue, 22 Feb 2011 07:34:47 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[サンプル]]></category>
		<category><![CDATA[AIR]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=399</guid>
		<description><![CDATA[
Adobe AIR2から新たにOSネイティブ統合の機能が追加され、
AIRアプリ（ネイティブインストーラ）からユーザー権限内の
OSネイティブなリソースと連携できようになりましたね。

ちょっと実案件でも使う機会があり [...]]]></description>
			<content:encoded><![CDATA[<p>
<strong>Adobe AIR2</strong>から新たに<strong>OSネイティブ統合</strong>の機能が追加され、<br />
<strong>AIR</strong>アプリ（ネイティブインストーラ）からユーザー権限内の<br />
<strong>OSネイティブ</strong>なリソースと連携できようになりましたね。<br />
<br />
ちょっと実案件でも使う機会がありましたので<br />
サンプル程度にこちらにもアップしておきます。<br />
<br />
<span id="more-399"></span><br />
【参考記事】<br />
Adobe AIR 2 マスターシリーズ「第6回 OSネイティブとの統合」<br />
<a href="http://www.adobe.com/jp/joc/devnet/air/articles/air2master06.html" target="_blank">http://www.adobe.com/jp/joc/devnet/air/articles/air2master06.html</a><br />
<br />
【サンプル1】<br />
・AIRから<strong>bat</strong>ファイルを直接開けないのでcmd.exe（コマンドプロンプト）経由でcalc.batを開いてみるテスト。<br />
実行するファイルに引数でbatファイルのパスを渡します。<br />
batの中身は単純に電卓を実行する以下の1行のみです。<br />
C:\\Windows\\System32\\calc.exe<br />
自前で作ったcalc.batを任意・デスクトップ・アプリインストール先のいずれかに置いてディレクトリを指定。<br />
<br />
<pre class="code"><span class="keyword">if</span> (NativeProcess.isSupported)<br />
{<br />
    <span class="keyword">var</span> info = <span class="keyword">new</span> NativeProcessStartupInfo();<br />
    <br />
    <span class="rem">// 実行するプログラムを指定</span><br />
    <span class="keyword">var</span> file:File = <span class="keyword">new</span> File(<span class="str">&quot;C:\\Windows\\System32\\cmd.exe&quot;</span>); <span class="rem">//コマンドプロンプト</span><br />
    info.executable = file;<br />
    <br />
    <br />
    <span class="rem">// 実行するプログラムに渡す引数</span><br />
    <span class="keyword">var</span> args:Vector.&lt;<span class="keyword">String</span>&gt; = <span class="keyword">new</span> Vector.&lt;<span class="keyword">String</span>&gt;();<br />
    args.push(<span class="str">&quot;/c&quot;</span>);<br />
    <br />
        <span class="rem">// 任意ディレクトリ指定</span><br />
        <span class="rem">//args.push(&quot;C:\\calc.bat&quot;);</span><br />
        <br />
        <span class="rem">// デスクトップディレクトリ指定</span><br />
        args.push(File.desktopDirectory.nativePath + <span class="str">&quot;\\calc.bat&quot;</span>);<br />
        <br />
        <span class="rem">// アプリインストールディレクトリ指定</span><br />
        <span class="rem">//args.push(File.applicationDirectory.nativePath + &quot;\\calc.bat&quot;);</span><br />
    <br />
    info.arguments = args;<br />
    <br />
    <br />
    <span class="rem">// プロセス生成</span><br />
    <span class="keyword">var</span> nativeProcess = <span class="keyword">new</span> NativeProcess();<br />
    <br />
    <span class="rem">// プロセス開始</span><br />
    nativeProcess.start(info);<br />
}</pre>
<br />
<p style="line-heigth: 130%;">
【サンプル2】<br />
・AIRアプリから直接シャットダウンしてみるテスト。<br />
シャットダウンの実行ファイル（shutdown.exe）に引数でコマンド＋パラメータを渡します。<br />
</p>
<pre class="code"><span class="keyword">if</span> (NativeProcess.isSupported)<br />
{<br />
    <span class="keyword">var</span> info = <span class="keyword">new</span> NativeProcessStartupInfo();<br />
    <br />
    <span class="rem">// 実行するプログラムを指定</span><br />
    <span class="keyword">var</span> file:File = <span class="keyword">new</span> File(<span class="str">&quot;C:\\Windows\\System32\\shutdown.exe&quot;</span>); <span class="rem">//シャットダウン</span><br />
    info.executable = file;<br />
    <br />
    <br />
    <span class="rem">// 実行するプログラムに渡す引数</span><br />
    <span class="keyword">var</span> args:Vector.&lt;<span class="keyword">String</span>&gt; = <span class="keyword">new</span> Vector.&lt;<span class="keyword">String</span>&gt;();<br />
    args.push(<span class="str">&quot;/c&quot;</span>);<br />
    <br />
        <span class="rem">// パラメータ指定</span><br />
        args.push(<span class="str">&quot;shutdown -s -t 5&quot;</span>);<br />
    <br />
    info.arguments = args;<br />
    <br />
    <br />
    <span class="rem">// プロセス生成</span><br />
    <span class="keyword">var</span> nativeProcess = <span class="keyword">new</span> NativeProcess();<br />
    <br />
    <span class="rem">// プロセス開始</span><br />
    nativeProcess.start(info);<br />
}</pre>
<br />
<br />
<p style="line-heigth: 130%;">
サンプルソースは <a href="http://blog.alt-scape.com/fla/air_os.zip">こちら</a>（Windows）<br />
初期時はデスクトップディレクトリのcalc.batを開くようになっているので解凍後、calc.batを移動してください。<br />
※コードサイニング証明書（p12）はご自身で新規作成してください。<br />
</p>
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/399/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Papervision3DでGoogle SketchUpの3Dギャラリーを読み込んでみる</title>
		<link>http://blog.alt-scape.com/archives/396</link>
		<comments>http://blog.alt-scape.com/archives/396#comments</comments>
		<pubDate>Tue, 08 Feb 2011 04:02:05 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[サンプル]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Papervision3D]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=396</guid>
		<description><![CDATA[
Papervision3Dを使って、Google SketchUpの3Dデータを読み込んでみる実験。
他人の記事を読んでいると、
最新バージョンのGoogle SketchUpから書き出したcollada（.dae）形 [...]]]></description>
			<content:encoded><![CDATA[<p>
<strong>Papervision3D</strong>を使って、<a href="http://sketchup.google.com/intl/ja/" target="_blank" title="Google SketchUp"><strong>Google SketchUp</strong></a>の3Dデータを読み込んでみる実験。<br />
他人の記事を読んでいると、<br />
最新バージョンのGoogle SketchUpから書き出した<strong>collada</strong>（.<strong>dae</strong>）形式や<strong>kmz</strong>形式で<br />
それぞれDAEクラスとKMZクラスを使用してパースしてもうまくテクスチャが貼られてないケースが多い。<br />
（jpgが書き出されたときはdaeファイルといっしょにサーバーにアップする）<br />
<br />
調べていると、「<a href="http://www.xknowledge.co.jp/fordevelopers/papervision3d/google-sketchup71kmz.html" target="_blank">Papervision3D入門</a>」のサポートサイトに下記のとおり、<br />
<strong>SketchUp 7.1</strong>以上のkmzは読み込めないと書いてあるので<br />
7.0より古いバージョンを入れ直してみました。<br />
<br />
<span id="more-396"></span><br />
<em>現状のPapervision3DではSketchUp7.1で出力されたKMXファイルを読み込むことができないためPapervision3Dのフォーラムでは過去のSketchUpのバージョンを利用す るようにと返答されています。<br />
そのため、バージョンSketchUp 7.0で利用するようにしてください。</em><br />
<br />
Google SketchUp 6.0.515<br />
<a href="http://google-sketchup.brothersoft.com/google-sketchup6.0.515">http://google-sketchup.brothersoft.com/google-sketchup6.0.515</a><br />
<br />
注意点としては古いバージョンでkmz書き出しするときに<br />
<strong>Google Earth 4</strong>形式（kmz）の方に書き出し設定しないといけないらしい。<br />
<br />
それではまず<a href="http://sketchup.google.com/3dwarehouse/" target="_blank">3Dギャラリー</a>からCCライセンスが明示されたskpファイルをダウンロードしてみます。<br />
SketchUpに読み込んで「File」→「Export」→「3D Model..」でkmzファイルに書き出します。<br />
kmzをサーバーにアップしてPapervision3Dライブラリを使ってFlashに読み込んでみます。<br />
↓うまくいきました。めでたし、めでたし。（データ重いのでロードに時間かかります）<br />
<script type="text/javascript" src="http://wonderfl.net/blogparts/57xs/js"></script><p class="ttlBpWonderfl" style="width: 465px; margin: 0; text-align: right; font-size: 11px;">
<br />
<p style="line-heigth: 130%;">
ちなみにライセンスまわりですが、<br />
<a href="http://sketchup.google.com/intl/ja/3dwh/tos.html" target="_blank">利用規約</a>と<a href="http://www.google.com/intl/ja/sketchup/3dwh/policy.html" target="_blank">プロダクトポリシー</a>を確認したうえで利用する限りは<br />
自由に創作活動に役立てていいと解釈できますがそのあたりどうなんですかね。<br />
<br />
とくに<strong>４．所有権</strong>あたりのユーザーの権利に<br />
<br />
<em>Google は、ユーザーが3Dギャラリーを介して送信、掲載、または表示したコンテンツの所有権または管理する権利を要求しません。ユーザーまたは第三者のライセンサーは、必要に応じて、ユーザーが3Dギャラリーを介して送信、投稿、表示するコンテンツに対するすべての特許、商標、著作権を有し、必要に応じてこれらの権利を保護する責任を負います。<strong>3Dギャラリーを介して、コンテンツを送信、投稿、表示することにより、ユーザーは当該コンテンツで次のような行為を実行する非独占的、永久的ライセンスを全世界に著作権使用料なしで、Googleとそのエンドユーザーに付与することになります。</strong><br />
<br />
a. コンテンツを転載する<br />
b. コンテンツの派生物を作成し、転載する<br />
c. コンテンツのコピーを公開して配布する<br />
d. コンテンツの派生物のコピーを公開して配布する</em><br />
<br />
と書いてあり、つまりは<br />
3Dデータの投稿者に著作権は帰属され保護する義務があり<br />
エンドユーザーは著作権使用料なしでこれらを利用できる、<br />
というもの。<br />
</p>
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/396/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flashで入力フォームの点滅カーソルを自力で作る</title>
		<link>http://blog.alt-scape.com/archives/393</link>
		<comments>http://blog.alt-scape.com/archives/393#comments</comments>
		<pubDate>Tue, 01 Feb 2011 05:51:48 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[サンプル]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[コンポーネント]]></category>

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






銀行のATM、カラオケのタッチ式リモコン、居酒屋の注文タッチパネル、
スマートフォン、テレビと今後フルタッチインターフェイスを
Flashで作るケースが増えてくるかもしれませんのでテキストまわりでつまづいた [...]]]></description>
			<content:encoded><![CDATA[<p>
<div id="scrollH"></div>
<script type="text/javascript">
<!--
	var so_hd = new SWFObject("http://blog.alt-scape.com/swf/scrollH.swf", "hd", "500", "200", "10", "#000000");
	so_hd.addParam("wmode", "window");
	so_hd.addParam("allowFullScreen", "true");
	so_hd.addParam("menu", "false");
	so_hd.write("scrollH");
-->
</script>
<br />
<p style="line-heigth: 130%;">
銀行のATM、カラオケのタッチ式リモコン、居酒屋の注文タッチパネル、<br />
スマートフォン、テレビと今後フルタッチインターフェイスを<br />
Flashで作るケースが増えてくるかもしれませんのでテキストまわりでつまづいた方に。<br />
<br />
TextInputコンポーネントを使用して<strong>テキスト入力フォーム</strong>を作った場合、<br />
通常、キーボードからは自動入力されますが<br />
Flash上にソフトウェアキーボードを用意した場合は<br />
マウス操作、タッチ操作時のイベントハンドラにスクリプトから<br />
入力フォームにテキストを代入してあげないといけません。<br />
このとき問題なのが、入力フォームを選択したときに出る縦の<strong>点滅カーソル</strong>が<br />
テキストの長さに応じてついてきてくれません。（もちろん十字キーでは移動できるよ）<br />
そこでTextInputコンポーネントではなく、<br />
TextFieldクラスの<strong>ダイナミックテキスト</strong>か<strong>テキスト入力</strong>に設定して<br />
<strong>scrollH</strong>プロパティを使って、点滅カーソル移動を実装してみる。<br />
<br />
<span id="more-393"></span><br />
やり方はいたって簡単で、<br />
常に最新の<strong>textWidth</strong>プロパティを<strong>scrollH</strong>に反映してあげるだけ。<br />
上のswfは1秒ごとにテキスト入力に1からの連番を放り込んでいるサンプルです。<br />
<br />
flaは<a href="http://blog.alt-scape.com/fla/scrollH.fla" title="点滅カーソルサンプルソース">こちら</a>。<br />
</p>
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/393/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>FlashからHTTP/HTTPSリクエストしてBasic認証を通過する方法</title>
		<link>http://blog.alt-scape.com/archives/391</link>
		<comments>http://blog.alt-scape.com/archives/391#comments</comments>
		<pubDate>Tue, 25 Jan 2011 09:11:10 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[サンプル]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[ソースコード]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=391</guid>
		<description><![CDATA[
URLLoaderクラスを使ってHTTP/HTTPSリクエストをする先にBasic認証がかかっていたら、
URLRequestHeaderメソッドを使ってヘッダーに認証情報を付加すればOK。
ヘッダーに付加するid/p [...]]]></description>
			<content:encoded><![CDATA[<p>
<strong>URLLoader</strong>クラスを使って<strong>HTTP</strong>/<strong>HTTPS</strong>リクエストをする先に<strong>Basic認証</strong>がかかっていたら、<br />
<strong>URLRequestHeader</strong>メソッドを使ってヘッダーに認証情報を付加すればOK。<br />
ヘッダーに付加するid/passはBase64エンコードしなければならないのですが<br />
FlexにあるBase64EncoderがFlashにはないので<br />
下記にあるas3httpclientライブラリのBase64クラスを使用しました。<br />
Basic認証だと<strong>GET</strong>/<strong>POST</strong>とも問題なかったのですが<br />
<a href="http://www.fxug.net/modules/xhnewbb/viewtopic.php?topic_id=1046&#038;forum=1&#038;post_id=4297#forumpost4297" target="_blank">ここらへん</a>の記事を読んでいると<strong>WSSE認証</strong>ではあやしい動きになるようなので<br />
Basic認証でも<strong>HTTPURLLoader</strong>や<strong>SocketURLLoader</strong>をテストしてみる。<br />
余談ですが、AIRの場合は<strong>URLRequestDefaults</strong>クラスの<br />
<strong>setLoginCredentialsForHost</strong>メソッドという便利なものもあります。<br />
<br />
<span id="more-391"></span><br />
使用するライブラリはこちら。<br />
<br />
<strong>as3httpclient</strong>（SocketURLLoader.as）<br />
<a href="http://code.google.com/p/as3httpclient/">http://code.google.com/p/as3httpclient/</a><br />
（HTTPURLLoader.asは<a href="http://code.google.com/p/as3httpclient/downloads/detail?name=as3httpclient-0.2-source.zip&amp;can=2&amp;q=">ココ</a>からダウンロード）<br />
<br />
<strong>as3corelib</strong>（StringUtil.as）<br />
<a href="http://code.google.com/p/as3httpclient/">http://code.google.com/p/as3corelib/</a><br />
<br />
<br />
■<strong>HTTPURLLoader</strong>でのやり方。（POSTは未対応っぽい）<br />
<pre class="code"><span class="keyword">import</span> flash.net.URLRequest;<br />
<span class="keyword">import</span> flash.net.URLRequestHeader;<br />
<span class="keyword">import</span> com.abdulqabiz.net.HTTPURLLoader;<br />
<span class="keyword">import</span> com.abdulqabiz.crypto.Base64;<br />
<br />
<span class="keyword">var</span> request:URLRequest = <span class="keyword">new</span> URLRequest(<span class="str">&quot;http://blog.alt-scape.com/swf/basic_test/?data1=&quot;</span> + escape(<span class="str">&quot;parameter1&quot;</span>) + <span class="str">&quot;&amp;data2=&quot;</span> + escape(<span class="str">&quot;parameter2&quot;</span>));<br />
request.method = URLRequestMethod.GET;<br />
<br />
<span class="keyword">var</span> loader:HTTPURLLoader = <span class="keyword">new</span> HTTPURLLoader();<br />
loader.addEventListener(<span class="str">&quot;complete&quot;</span>, onComplete);<br />
loader.addEventListener(<span class="str">&quot;httpStatus&quot;</span>, onHTTPStatus);<br />
<br />
<span class="keyword">var</span> id:<span class="keyword">String</span> = <span class="str">&quot;alt&quot;</span>;<br />
<span class="keyword">var</span> password:<span class="keyword">String</span> = <span class="str">&quot;alt&quot;</span>;<br />
<span class="keyword">var</span> credentials:<span class="keyword">String</span> = Base64.encode(id + <span class="str">&quot;:&quot;</span> + password);<br />
<br />
<span class="rem">//create HTTP Auth request header</span><br />
<span class="keyword">var</span> authHeader:URLRequestHeader = <span class="keyword">new</span> URLRequestHeader(<span class="str">&quot;Authorization&quot;</span>,<span class="str">&quot;Basic &quot;</span> + credentials);<br />
<br />
<span class="rem">//add the header to request</span><br />
request.requestHeaders.push(authHeader);<br />
<br />
loader.load(request);<br />
<br />
<span class="keyword">function</span> onComplete(event:Event):<span class="keyword">void</span><br />
{<br />
    <span class="rem">//headers stroed as name-value(hash map)</span><br />
    <span class="keyword">var</span> rh:Object = HTTPURLLoader(event.target).responseHeaders;<br />
    <span class="keyword">var</span> str:<span class="keyword">String</span> = <span class="str">&quot;&quot;</span>;<br />
    <span class="keyword">for</span>(<span class="keyword">var</span> p:<span class="keyword">String</span> <span class="keyword">in</span> rh) str += p + <span class="str">&quot;:&quot;</span> + rh[p] + <span class="str">&quot;\n&quot;</span>;<br />
    debug.appendText(<span class="str">&quot;Response Headers: \n&quot;</span> + str + <span class="str">&quot;\n\n&quot;</span>);<br />
    <br />
    <span class="rem">//data property holds the content</span><br />
    debug.appendText(<span class="str">&quot;Body Content:\n&quot;</span> + HTTPURLLoader(event.target).data + <span class="str">&quot;\n\n&quot;</span>);<br />
}<br />
<span class="keyword">function</span> onHTTPStatus(event:HTTPStatusEvent):<span class="keyword">void</span><br />
{<br />
    <span class="rem">//if httpStatus is 401, 403, 404, 500, 501, socket is closed.</span><br />
    debug.appendText(<span class="str">&quot;Event: httpStatus (&quot;</span> + event.status + <span class="str">&quot;)\n\n&quot;</span>);<br />
}</pre>
<br />
<p style="line-height:170%">
<br />
■<strong>SocketURLLoader</strong>（POSTメソッド）でパラメータを付与してみる。<br />
<pre class="code"><span class="keyword">import</span> code.google.as3httpclient.*;<br />
<span class="keyword">import</span> com.abdulqabiz.crypto.Base64;<br />
<span class="keyword">import</span> flash.net.*;<br />
<span class="keyword">import</span> flash.events.*;<br />
<br />
<span class="keyword">var</span> socketLoader:SocketURLLoader = <span class="keyword">new</span> SocketURLLoader();<br />
socketLoader.addEventListener (HTTPStatusEvent.HTTP_STATUS, handleHTTPStatus);<br />
socketLoader.addEventListener (Event.COMPLETE, handleComplete);<br />
socketLoader.addEventListener (Event.OPEN, handleOpen);<br />
<br />
<span class="keyword">var</span> request2:SocketHTTPRequest = <span class="keyword">new</span> SocketHTTPRequest();<br />
request2.url = <span class="str">&quot;http://blog.alt-scape.com/swf/basic_test/&quot;</span>;<br />
request2.method = URLRequestMethod.POST;<br />
<span class="keyword">var</span> variables:URLVariables = <span class="keyword">new</span> URLVariables();<br />
variables.data1 = escape(<span class="str">&quot;parameter1&quot;</span>);<br />
variables.data2 = escape(<span class="str">&quot;parameter2&quot;</span>);<br />
request2.data = variables;<br />
<br />
<span class="keyword">var</span> id2:<span class="keyword">String</span> = <span class="str">&quot;alt&quot;</span>;<br />
<span class="keyword">var</span> password2:<span class="keyword">String</span> = <span class="str">&quot;alt&quot;</span>;<br />
<span class="keyword">var</span> credentials2:<span class="keyword">String</span> = Base64.encode(id2 + <span class="str">&quot;:&quot;</span> + password2);<br />
<br />
<span class="rem">//create HTTP Auth request header</span><br />
<span class="keyword">var</span> authHeader2:URLRequestHeader = <span class="keyword">new</span> URLRequestHeader(<span class="str">&quot;Authorization&quot;</span>,<span class="str">&quot;Basic &quot;</span> + credentials2);<br />
<br />
<span class="rem">//add the header to request</span><br />
request2.requestHeaders.push(authHeader2);<br />
<br />
socketLoader.load(request2);<br />
<br />
<span class="keyword">function</span> handleHTTPStatus(event:HTTPStatusEvent):<span class="keyword">void</span><br />
{<br />
    debug.appendText(<span class="str">&quot;HTTPStatus: &quot;</span> + event.status + <span class="str">&quot;\n&quot;</span>);<br />
    <span class="keyword">var</span> header:URLRequestHeader;<br />
    <span class="keyword">for</span> <span class="keyword">each</span> (header <span class="keyword">in</span> socketLoader.responseHeaders)<br />
    {<br />
        debug.appendText(header.name + <span class="str">&quot; : &quot;</span> + header.value + <span class="str">&quot;\n&quot;</span>);<br />
    }<br />
}<br />
<span class="keyword">function</span> handleComplete(event:Event):<span class="keyword">void</span><br />
{<br />
    debug.appendText(<span class="str">&quot;Complete: &quot;</span> + socketLoader.data + <span class="str">&quot;\n&quot;</span>);<br />
}<br />
<br />
<span class="keyword">function</span> handleOpen(event:Event):<span class="keyword">void</span><br />
{<br />
    debug.appendText(<span class="str">&quot;Connected...\n&quot;</span>);<br />
}</pre>
<br />
<a href="blog.alt-scape.com/fla/httpurlloader.fla">サンプルファイル</a>（CS5）<br />
<br />
参考記事：<br />
<a href="http://blog.ozacc.com/archives/001749.html" target="_blank">http://blog.ozacc.com/archives/001749.html</a><br />
<a href="http://www.abdulqabiz.com/blog/archives/2006/03/03/http-authentication-for-httpget-requests-using-actionscript-3/" target="_blank">http://www.abdulqabiz.com/blog/archives/2006/03/03/http-authentication-for-httpget-requests-using-actionscript-3/</a><br />
</p>
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/391/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>永遠の林檎</title>
		<link>http://blog.alt-scape.com/archives/384</link>
		<comments>http://blog.alt-scape.com/archives/384#comments</comments>
		<pubDate>Tue, 10 Aug 2010 02:49:16 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[サンプル]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=384</guid>
		<description><![CDATA[
いろんなところで紹介されているコレ。
自分のブログにも10枚貼ってみた。GIFアニメって楽しいね。














]]></description>
			<content:encoded><![CDATA[<p>
いろんなところで紹介されているコレ。<br />
自分のブログにも10枚貼ってみた。GIFアニメって楽しいね。<br />
<br />
<span id="more-384"></span><br />
<img src="http://blog.alt-scape.com/img/apple.gif" alt="永遠の林檎" class="imgnostyle" style="margin:0px; padding:0px" /><br />
<img src="http://blog.alt-scape.com/img/apple.gif" alt="永遠の林檎" class="imgnostyle" style="margin:0px; padding:0px" /><br />
<img src="http://blog.alt-scape.com/img/apple.gif" alt="永遠の林檎" class="imgnostyle" style="margin:0px; padding:0px" /><br />
<img src="http://blog.alt-scape.com/img/apple.gif" alt="永遠の林檎" class="imgnostyle" style="margin:0px; padding:0px" /><br />
<img src="http://blog.alt-scape.com/img/apple.gif" alt="永遠の林檎" class="imgnostyle" style="margin:0px; padding:0px" /><br />
<img src="http://blog.alt-scape.com/img/apple.gif" alt="永遠の林檎" class="imgnostyle" style="margin:0px; padding:0px" /><br />
<img src="http://blog.alt-scape.com/img/apple.gif" alt="永遠の林檎" class="imgnostyle" style="margin:0px; padding:0px" /><br />
<img src="http://blog.alt-scape.com/img/apple.gif" alt="永遠の林檎" class="imgnostyle" style="margin:0px; padding:0px" /><br />
<img src="http://blog.alt-scape.com/img/apple.gif" alt="永遠の林檎" class="imgnostyle" style="margin:0px; padding:0px" /><br />
<img src="http://blog.alt-scape.com/img/apple.gif" alt="永遠の林檎" class="imgnostyle" style="margin:0px; padding:0px" /><br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/384/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Twitter Streaming APIを使ったFlashサンプル</title>
		<link>http://blog.alt-scape.com/archives/367</link>
		<comments>http://blog.alt-scape.com/archives/367#comments</comments>
		<pubDate>Fri, 28 May 2010 10:35:10 +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=367</guid>
		<description><![CDATA[



Twitter APIのなかに
HTTP接続を開いたままにして、サーバ側から次々と更新情報をクライアントに送り出す
「Twitter Streaming API」というのがあります。

通常のRESTを使ったプル [...]]]></description>
			<content:encoded><![CDATA[<p>
<img src="http://blog.alt-scape.com/img/twitter_stream_api.jpg" alt="Twitter Stream API" class="imgnostyle" />
<br />
<br />
Twitter APIのなかに<br />
HTTP接続を開いたままにして、サーバ側から次々と更新情報をクライアントに送り出す<br />
「<strong><a href="http://apiwiki.twitter.com/Streaming-API-Documentation" target="_blank" title="Twitter API Wiki / Streaming API Documentation">Twitter Streaming API</a></strong>」というのがあります。<br />
<br />
通常のRESTを使ったプル型とは違って、<br />
サーバーからプッシュでリアルタイムにJSONが送られてくるので<br />
それをパースしてフロントを作っていきます。<br />
単位時間当たりのAPI利用回数制限の上限も気にしなくてよいです。<br />
<br />
<span id="more-367"></span><br />
プッシュなので<br />
APIと接続するところは<strong>Flash</strong>のSocketクラスを使って実装といきたいところですが<br />
サーバー側は考えずに手っ取り早い方法として<br />
以下の<strong>Javascript</strong>ライブラリを使ってみます。<br />
（JSとの連携はAS3.0のExternalInterface.addCallback()で）<br />
<br />
JavaScriptからTwitter Streaming APIを利用するためのライブラリ<br />
<a href="http://wiki.livedoor.jp/staff_reader/d/Streaming%20API/JavaScript" target="_blank" title="">http://wiki.livedoor.jp/staff_reader/d/Streaming%20API/JavaScript</a><br />
<br />
サンプルのjson_viewer.html内に<br />
LDReader.JSON.stringify(json)というストリームで流れてくるJSONデータがありますので<br />
ここでFlashの関数を呼び出してJSONを引数で渡します。<br />
あとは呼ばれる度にFlashでお好きなようにビジュアライズしてあげるだけ。<br />
<br />
で、今回作ったもの。<br />
「<strong>iPad</strong>」に関するタイムラインが流れてきます。<br />
<a href="http://blog.alt-scape.com/swf/twitter_stream_api/" target="_blank" title="Twitter Stream API Flashサンプル">http://blog.alt-scape.com/swf/twitter_stream_api/</a><br />
（いくら待ってもTLが流れてこない場合はブラウザの更新ボタンを押してみてください）<br />
<br />
サンプルの流れ<br />
１．Stream APIのJavasriptライブラリ使って情報が更新される度に毎回JS→Flashの関数をたたく。<br />
２．引数で渡ってきたJSONデータをcorelibを利用してパース。<br />
３．テキストを作成して下に向かって流す。<br />
４．ある程度表示したらremoveChildでメモリーリーク対策。<br />
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/367/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>続・Flash Lite1.1からメーラー起動メモ</title>
		<link>http://blog.alt-scape.com/archives/344</link>
		<comments>http://blog.alt-scape.com/archives/344#comments</comments>
		<pubDate>Tue, 13 Oct 2009 15:49:08 +0000</pubDate>
		<dc:creator>alt</dc:creator>
				<category><![CDATA[サンプル]]></category>
		<category><![CDATA[Flash Lite]]></category>
		<category><![CDATA[ソースコード]]></category>

		<guid isPermaLink="false">http://blog.alt-scape.com/?p=344</guid>
		<description><![CDATA[
先日書いた「Flash Liteからメーラー起動メモ」ですが、
メーラーの件名や本文にデフォルトで文字列を表示したいとき、
一筋縄ではいかないことが判明しました。
やっかいなのはキャリアごと、Flash Liteのバー [...]]]></description>
			<content:encoded><![CDATA[<p>
先日書いた「<a href="http://blog.alt-scape.com/archives/343" target="_blank" title="Flash Liteからメーラー起動メモ"><strong>Flash Liteからメーラー起動メモ</strong></a>」ですが、<br />
メーラーの件名や本文にデフォルトで文字列を表示したいとき、<br />
一筋縄ではいかないことが判明しました。<br />
やっかいなのはキャリアごと、Flash Liteのバージョンごとにエンコード形式が違うこと。<br />
Docomo、au、SoftBankで書き方を変えておかないと文字化けしちゃいます！<br />
<br />
<span id="more-344"></span><br />
まずFlash Liteのバージョンを取得します。<br />
flv_strに<strong>5</strong>が返ればバージョン1.1、<strong>8</strong>が返ればバージョン3.0、<strong>9</strong>が返ればバージョン3.1。<br />
<pre class="code">flVersion = $version;<br />
flv_str = substring(flVersion, <span class="num">0</span>, <span class="num">1</span>);<br />
</pre>
<br />
DocomoとSoftbankでは1.1以下とそれ以外で分岐します。<br />
<br />
Docomoの場合<br />
※F-09AやN-02Aなどの簡体字、繁体字に対応した端末だけは文字化けを起こします。これは調査中。<br />
<br />
<pre class="code"><span class="rem">// Docomo（改行コードは1.1以下は\r\n、3.0以上は%0D%0A）</span><br />
<span class="keyword">if</span> (int(flv_str) &lt;= <span class="num">5</span>)<br />
{<br />
        title_str = <span class="str">&quot;タイトル&quot;</span>;<br />
        body_str = <span class="str">&quot;本文\r\nhttp://xxx.com&quot;</span>;<br />
}<br />
<span class="keyword">else</span><br />
{<br />
        title_str = <span class="str">&quot;タイトル&quot;</span>;<br />
        body_str = <span class="str">&quot;本文%0D%0Ahttp://xxx.com&quot;</span>;<br />
}<br />
status = fscommand2(<span class="str">&quot;escape&quot;</span>, title_str, <span class="str">&quot;enco_title&quot;</span>);<br />
status = fscommand2(<span class="str">&quot;escape&quot;</span>, body_str, <span class="str">&quot;enco_body&quot;</span>);<br />
getURL(<span class="str">&quot;mailto:?subject=&quot;</span> add enco_title add <span class="str">&quot;&amp;body=&quot;</span> add enco_body);</pre>
<br />
auの場合は一律これでいけるっぽい。<br />
<br />
<pre class="code"><span class="rem">// au</span><br />
title_str = <span class="str">&quot;タイトル&quot;</span>;<br />
body_str = <span class="str">&quot;本文\r\nhttp://xxx.com&quot;</span>;<br />
status = fscommand2(<span class="str">&quot;escape&quot;</span>, title_str, <span class="str">&quot;enco_title&quot;</span>);<br />
status = fscommand2(<span class="str">&quot;escape&quot;</span>, body_str, <span class="str">&quot;enco_body&quot;</span>);<br />
getURL(<span class="str">&quot;mailto:?subject=&quot;</span> add enco_title add <span class="str">&quot;&amp;body=&quot;</span> add enco_body);</pre>
<br />
SoftBankの場合<br />
<br />
<pre class="code"><span class="rem">// Softbank（1.1以下はS-JIS、2.0以上はUTF-8でエンコードしておく）</span><br />
<span class="keyword">if</span> (int(flv_str) &lt;= <span class="num">5</span>)<br />
{<br />
            title_str = <span class="str">&quot;タイトル&quot;</span>;<br />
            body_str = <span class="str">&quot;本文\r\nhttp://xxx.com&quot;</span>;<br />
}<br />
<span class="keyword">else</span><br />
{<br />
            title_str = <span class="str">&quot;%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab&quot;</span>;<br />
            body_str = <span class="str">&quot;%e6%9c%ac%e6%96%87%0d%0ahttp%3a%2f%2fxxx%2ecom%0d%0a&quot;</span>;<br />
}<br />
status = fscommand2(<span class="str">&quot;escape&quot;</span>, title_str, <span class="str">&quot;enco_title&quot;</span>);<br />
status = fscommand2(<span class="str">&quot;escape&quot;</span>, body_str, <span class="str">&quot;enco_body&quot;</span>);<br />
getURL(<span class="str">&quot;mailto:?subject=&quot;</span> add enco_title add <span class="str">&quot;&amp;body=&quot;</span> add enco_body);</pre>
<br />
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alt-scape.com/archives/344/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

