カテゴリー 'サンプル' のアーカイブ

TweetボタンのパラメータをJavascriptで動的に変えるサンプル

ブログなどWEBサイトに設置するTweetボタンですが、
Twitter APIを参考にするとTweet内容をパラメータで設定できるようになっています。

■aタグのhref属性にGETパラメータで設定

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
<a href="http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com&amp;via=your_screen_name" class="twitter-share-button">Tweet</a>
</div>

■data Attributesにパラメータを設定(HTML5の独自データ属性)
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="http://dev.twitter.com/pages/tweet_button"
data-via="your_screen_name"
data-text="Checking out this page about Tweet Buttons"
data-related="anywhere:The Javascript API"
data-count="vertical">
Tweet</a>
</div>

続きを読む »

スマートフォン向けHTML5のVIDEOタグを使った動画再生 ~MediaElement.js編~

先日のYoutube編に続き、
HTML5ビデオで動画再生を実装する際の有効手段として
オープンソースのライブラリを使うのが考えられます。

HTML5+Flashのフォールバックでスマートフォン(iPhone,Android)のOSに対応しているものを探すと
VideoJS」、「MediaElement.js」、「projekktor」、「LeanBack Player」などがあります。
VideoJSの方は内包しているswfにライセンス縛りのあるFlowplayerを使用しているので、
MediaElement.jsの方から試してみたいと思います。

MediaElement.js
http://mediaelementjs.com/
紹介記事
http://journal.mycom.co.jp/articles/2010/09/28/html5-video-and-mediaelementjs/index.html

続きを読む »

スマートフォン向けHTML5のVIDEOタグを使った動画再生 ~Youtube編~

iPhoneAndroidなどのスマートフォンサイトで動画コンテンツを提供するとなると
真っ先に思いつくのがHTML5の<video>タグですよね。

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

---------------------------------------
<video>タグのサポート。(Androidは2.0~)
H.264OGGWebMなどのビデオコーデック。
再生可能な解像度、ビットレート、fpsの規定。
※コーデックは<source>タグで全部指定すれば大丈夫。
---------------------------------------

iPhone、Android、Windows Phone、各種タブレットのブラウザに対応させるだけでもひと苦労ですね。。
実装手段としてHTML5 videoのサポート状況に応じてFlashのフォールバックを利用する
動画再生ライブラリもありますが、まずはYoutubeを使った実験をば。
※動画再生ライブラリを使うやり方は次回書きます。

続きを読む »

Adobe AIR2でOSネイティブと連携する

Adobe AIR2から新たにOSネイティブ統合の機能が追加され、
AIRアプリ(ネイティブインストーラ)からユーザー権限内の
OSネイティブなリソースと連携できようになりましたね。

ちょっと実案件でも使う機会がありましたので
サンプル程度にこちらにもアップしておきます。

続きを読む »

Papervision3DでGoogle SketchUpの3Dギャラリーを読み込んでみる

Papervision3Dを使って、Google SketchUpの3Dデータを読み込んでみる実験。
他人の記事を読んでいると、
最新バージョンのGoogle SketchUpから書き出したcollada(.dae)形式やkmz形式で
それぞれDAEクラスとKMZクラスを使用してパースしてもうまくテクスチャが貼られてないケースが多い。
(jpgが書き出されたときはdaeファイルといっしょにサーバーにアップする)

調べていると、「Papervision3D入門」のサポートサイトに下記のとおり、
SketchUp 7.1以上のkmzは読み込めないと書いてあるので
7.0より古いバージョンを入れ直してみました。

続きを読む »

Flashで入力フォームの点滅カーソルを自力で作る


銀行のATM、カラオケのタッチ式リモコン、居酒屋の注文タッチパネル、
スマートフォン、テレビと今後フルタッチインターフェイスを
Flashで作るケースが増えてくるかもしれませんのでテキストまわりでつまづいた方に。

TextInputコンポーネントを使用してテキスト入力フォームを作った場合、
通常、キーボードからは自動入力されますが
Flash上にソフトウェアキーボードを用意した場合は
マウス操作、タッチ操作時のイベントハンドラにスクリプトから
入力フォームにテキストを代入してあげないといけません。
このとき問題なのが、入力フォームを選択したときに出る縦の点滅カーソル
テキストの長さに応じてついてきてくれません。(もちろん十字キーでは移動できるよ)
そこでTextInputコンポーネントではなく、
TextFieldクラスのダイナミックテキストテキスト入力に設定して
scrollHプロパティを使って、点滅カーソル移動を実装してみる。

続きを読む »

FlashからHTTP/HTTPSリクエストしてBasic認証を通過する方法

URLLoaderクラスを使ってHTTP/HTTPSリクエストをする先にBasic認証がかかっていたら、
URLRequestHeaderメソッドを使ってヘッダーに認証情報を付加すればOK。
ヘッダーに付加するid/passはBase64エンコードしなければならないのですが
FlexにあるBase64EncoderがFlashにはないので
下記にあるas3httpclientライブラリのBase64クラスを使用しました。
Basic認証だとGET/POSTとも問題なかったのですが
ここらへんの記事を読んでいるとWSSE認証ではあやしい動きになるようなので
Basic認証でもHTTPURLLoaderSocketURLLoaderをテストしてみる。
余談ですが、AIRの場合はURLRequestDefaultsクラスの
setLoginCredentialsForHostメソッドという便利なものもあります。

続きを読む »

永遠の林檎

いろんなところで紹介されているコレ。
自分のブログにも10枚貼ってみた。GIFアニメって楽しいね。

続きを読む »

Twitter Streaming APIを使ったFlashサンプル

Twitter Stream API

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

通常のRESTを使ったプル型とは違って、
サーバーからプッシュでリアルタイムにJSONが送られてくるので
それをパースしてフロントを作っていきます。
単位時間当たりのAPI利用回数制限の上限も気にしなくてよいです。

続きを読む »

続・Flash Lite1.1からメーラー起動メモ

先日書いた「Flash Liteからメーラー起動メモ」ですが、
メーラーの件名や本文にデフォルトで文字列を表示したいとき、
一筋縄ではいかないことが判明しました。
やっかいなのはキャリアごと、Flash Liteのバージョンごとにエンコード形式が違うこと。
Docomo、au、SoftBankで書き方を変えておかないと文字化けしちゃいます!

続きを読む »

次のページへ »