強火で進め

このブログではプログラム関連の記事を中心に書いてます。

audioタグで再生したものはオーディオ再生コントロールで操作可能性

iPhoneプログラミング


本日参加した「南東京iPhone開発者勉強会」で id:KishikawaKatsumi さんがRemote-Control Eventsの話をされました。

Event Handling Guide for iOS: Remote Control of Multimedia
http://developer.apple.com/library/ios/#documentation/EventHandling/Conceptual/EventHandlingiPhoneOS/RemoteControl/RemoteControl.html

こちら、iPhone 4から搭載されたiPodアプリで使用されるホームボタンをダブルタップすると表示される画面に有る、こちらの「再生」や「進む」「戻る」のボタン(オーディオ再生コントロール)を自分のアプリで利用するという機能です。

この発表を受けて懇親会でiPhone上のSafariでaudioタグではどうなるのかを試した方が居ました。

結果はOK。audioタグで再生された音楽でもここのコントローラで「再生」「停止」や「戻る」が出来る様です。

自分でも試してみたかったのでサンプルページを作ってみました。以下のページでテスト出来ます。

audioタブ(MP3を使用)のサンプル
http://tsuyobi.heteml.jp/html/html5/audio/mp3.html

iPhoneでcanvasに描画するサンプル

JavaScript iPhoneプログラミング


iPhoneのSafariでcanvasタグに描画するサンプルを作ってみました。

iPhoneでcanvasに描画
http://tsuyobi.heteml.jp/html/iphone/canvas/


ざっくりと重要な処理の部分のみ解説。

メタタグで画面の拡大縮小のリミットを1.0倍に設定→ピンチによる拡大、縮小の抑止

<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">

body部分でのtouchstartの動作を抑止→canvas以外の部分をスクロールして、離したときにウィンドウがバウンドする動作を抑止

document.body.ontouchstart = function(e) { e.preventDefault(); };

bodyタグでstyleに -webkit-user-select: none; を設定→canvasを長押ししたときに選択状態になり、「コピー」などのメニューが表示されるのを抑止

<body style="-webkit-user-select: none; background: gray">

iPhone固有のタッチイベントで描画処理を行う。

	canvas.addEventListener("touchstart", touchStart, false);
	canvas.addEventListener("touchmove", touchMove, false);
	canvas.addEventListener("touchend", touchEnd, false);

(2010/12/15 追記)
必要に応じて、 -webkit-touch-callout: none; も指定しておいた方が良いかもしれません。

iPhoneアプリ開発ブログ in 大阪 | モバイルSafariでの “Action” ポップアップを抑制する
http://devlog.feedtailor.jp/items/detail/3/iPhone

-webkit-tap-highlight-color のこの指定もしていた方が良いかも？

AndroidのWebViewでフォーカスされたときのハイライト（枠、網掛け）を消すCSS記述 - にたまごほうれん草
http://d.hatena.ne.jp/emergent/20100616/1276701579

南東京iPhone開発者勉強会に参加しました

iPhoneプログラミング

南東京iPhone開発者勉強会 : ATND
http://atnd.org/events/7261

南東京iPhone開発者勉強会に参加しました。

セミナーの内容をまとめました。

今回の「南東京iPhone開発者勉強会」ですが日頃は「Yokohama iPhone Developers」というグループで活動されており、横浜で勉強会を開催されています。今回はニフティさんが勉強会会場を提供して頂ける事により特別に東京での開催でした。

Yokohama iPhone Developers | Google グループ
http://groups.google.co.jp/group/yidev/

今まで発表された講演のスライドはこちらに上がっているそうです。
今回のものもこちらにアップされるとの事です。

SlideShare >> Group >> yidev
http://www.slideshare.net/group/yidev