HTML Media Capture APIは
<input type=”file”>
の拡張タグにすぎない
input タグと同様のセキュリティ/プライバシー指針
に基づいた挙動となる
具体的な制限は
プログラム側からファイルパスを設定できない
ユーザの操作なしでは、キャプチャ処理が実行sれない
参照ボタンをクリックしたときのUIは
ブラウザで完全制御されるため
アプリ側で省略、改変できない
このAPIをつかうメリットは
アップロードするときの操作を楽にできること
スマートフォンの画面は大きくないし
アップロードするファイルを探したり選んだりする手間を
ファイルを指定することで省くことができる
写真共有とかカメラでとった写真をアップロードするのに使える
月別: 2013年4月
HTML Media Capture API
HTML Media Capture API
これはユーザがデバイスのメディア機能にアクセスすることを
手助けするHTMLフォームの拡張機能
機能としては
HTML のinput 要素に
capture 属性
accdept 属性を提供する
ユーザは簡単に端末の画像、動画、音声をキャプチャする
選択してアップロードも可能
このAPIはキャプチャツールの起動
ファイル参照を手助けするだけで
ユーザの関与なしで自動的メディアファイルを
アップロードなどはできない
また、このAPIでは動画や音声をストリーム送信することもできない
capture 属性には
4種類の値を設定できる
例を書くと
ソースにすると
<input type=”file” capture=”camera”/>
<input type=”file” capture=”camcorder”/>
<input type=”file” capture=”microphone”/>
<input type=”file” capture=”filesystem”/>
このどのcaprure属性の指定でも
ユーザが参照ボタンをタップすると
ファイル選択ダイアログが起動する
ファイル選択ダイアログは
capure 属性に設定した値に応じて変化する
capture=”camera”なら
カメラを起動して
撮影された写真ファイルを選択した状態になる
capture=”camcorder”では
ビデオカメラを起動し
撮影された動画ファイルを選択する
capure=”microphone”なら
サウンドレコーダーを起動し
録音された音声ファイルを選択した状態になる
capture=”filesytem”なら
ファイル選択ダイアログが起動して
選択されたファイルを選択した状態になる
Android の場合、いずれの場合も
ブラウザからcaprure 属性の内容に応じたインテントが発行される
capture属性値が camera なら
カメラアプリを起動するインテントが発行され
端末にインストールされているアプリの中から
適合するアプリを自動で探してくれる
検索結果件数、関連付け設定により
アプリが直接起動したり
アプリ選択画面を表示する
デフォルトで起動するアプリを指定しているなら
アプリが直接起動し
そうでないなら、アプリの選択になる
もし。該当するアプリがないならエラーメッセージがでる
そして、accept 属性の設定
accept 属性を設定すると、
ブラウザが
カメラ、サウンドレコーダーだけでなく
画像、音声ファイル選択のオプションを表示する
ソースにすると
< input type=”file” accept=”image/*”/>
<input type=”file” accept=”audio/*”/>
これで参照ボタンをタップすると
capture属性を設定したときみたいに
ファイル選択ダイアログが起動する
ファイル選択ダイアログは
accept 属性に指定した値により変わる
accept=”image/*”なら
画像ファイルを選択するダイアログになり
accept=”audio/*”なら
音声ファイルを選択するダイアログが表示される
vibration interfaceへのアクセス
vibration interfaceへのアクセス
Navigator型は
vibration interfaceを実装している
var vibration = navigator;
vibration interfaceを取得すると
2種類のメソッドを使うことで
端末を振動させられる
var vibration=navigator;
navigator.vibrate(1000);
navigator.vibrate([1000,500,1000,500,1000]);
()のなかは、振動時間をmsecで指定
1000,500,1000
とすると
1000 振動時間
500 休止時間
1000 振動時間
となる
このAPIを活用するなら
今までなら
着信のときの振動だけだったけど
スマートフォンなら
ユーザーの操作に対するフィードバック演出とか
ゲームの演出などが可能
加速度センサーと組み合わせることで
ジェスチャー入力をすることで
ユーザーが別のメディアを見ながら操作することが可能になる
battery status API
バッテリーの状態に関する情報を提供してくれる
取得できるバッテリー情報は
充電中か否か
充電時間
放電時間
バッテリーレベル
DeviceAPIs WorkingGroup で議論が勧められているAPIで
勧告候補状態になっている
ちょっとしたメモ
CSS HTMLなどの新しい標準はW3Cで段階的に
検討、発表される
草案だと
Internal Dralf > Public Working draft >
Stable draft(LastCall)
となっていって
次に
勧告候補
Implementors feedback(Cadidate Recommendation
そして
勧告
Standard Recommendation
という順番ですすんでいく
草案段階でブラウザに先行実装するなら
ベンダープリフィックス
moz*
webkit*
o*
ms*
などを付けて、書くブラウザの拡張機能扱いにする
そして勧告候補まですすむと
この
ベンダープリフィックスは外すようにすることが推奨されている
facebook などのAPIと同様に、変化が激しいので
いろいろ調べる必要がありそう
device access API
デバイスアクセスAPIとは
スマートフォン端末が持っているハードウェア機能制御
ユーザデータ活用を実現するAPI群のこと
一般的には
デバイスAPI
デバイス系APIと呼ばれる
device access API の一例としては
加速度計
温度計
バッテリー状態などのセンサー系API
Device APIs ワーキンググループがあり
これは
デバイスアクセスAPIの策定にあたり
中心的な存在になっている
サイトURLは
http://www.w3.org/2009/dap/
node.jsメモ
node.jsメモ
emit(EventName, data)
を使うと
データを送信してきたクライアントへ
対してのみデータを送信する
broadcast.emit(eventName, data)
を使うと
データを送信してきたクライアント以外にデータを送信できる
Socket.IO を使ったときのメモ
Socket.IO を使ったときのメモ
ディレクトリの中に app.js を作成
コードは
var io= require(‘socket.io’);
var express = require(‘express’);
var http = require(‘htt@’);
var app = express();
app.use(express.atatci(__dirname + ‘/public’);
var server = http.createServer(app).listen(8080);
var io=io.listen(server);
io.sockets.on(‘connection’, function(socket){
socket.on(‘msg’,function(msg){
socket.emit(‘msg’,msg);
socket.broadcast.emit(‘msg’,msg);
});
});
では解説
require で必要モジュール読み込み
Express サーバーを生成し
その上にSocket.IOサーバーを立ち上げる
それが
var express = require(‘express’);
と
var app = express();
var server = http.createServer(app).listen(8080);
var io=io.listen(server);
クライアントからの情報要求があって
接続が確立すると
connection イベントが発生して
socket オブジェクトをコールバックで取得できる
このコールバックの中で、処理を書く
io.sockets.on(‘connection’, function(socket){
socket.on(‘msg’,function(msg){
socket.emit(‘msg’,msg);
socket.broadcast.emit(‘msg’,msg);
});
});
がそれにあたる
もっとわかりやすく分解すると
io.sockets.on(‘connection’,コールバック関数)
となっていて
このコールバック関数の中身が
function(socket){
socket.on(‘msg’,function(msg){
socket.emit(‘msg’,msg);
socket.broadcast.emit(‘msg’,msg);
});
ということ
on は jQuery とかででてきている
古いものだと
bind() とかで書かれているかもしれない
on() ひとつで bind() live() delegate() を表せる
に詳しい解説あり
Socket.IO 概要
Socket.IO は
Node.js で利用できる
リアルタイム通信のためのモジュール
トランスポートメカニズムを吸収することで
クライアントのブラウザやデバイス対応状況によらず
リアルタイム通信が可能
もし、クライアント側が
WebSocket 未対応なら
Adobe Flash Socket
Ajax Long Polling
Ajax Multipart Streaming
Forever Iframe
JSONP Polling
ちう代替方式で通信を行なう
Node.js の概要
Node.js はサーバーサイドのjavaScriptを実行できる
javaScript で webアプリを構築できるプラットフォーム
のこと
Node.js のコアには
Google Chrome 用に開発された javaScript エンジンV8 が搭載されている
Node.js のアーキテクチャの特徴は
ノンブロッキングI/O
ノンブロッキングI/Oは
ある処理のデータ送受信の完了を待たずに
他の処理を開始する方式
一般に
CPU、メモりの伝送速度に比べると
ストレージやネットワークの伝送速度は遅い
そのため、ブロッキングI/O
つまり、ストレージとかネットワークのデータ送受信の完了を待つ方式だと
多くの待ち時間が発生する
イメージとしては
外付けHDDからデータを読み込んで実行すると
遅いというかんじ
これが
ノンブロッキングI/Oだと
こういった待ち時間を
他の処理に割り当てれるので
1つのスレッドで大量の処理ができる
処理完了を待ってから
次の処理を行いたいのなら
コールバックを使う
リクエスト、コールバック発生に関しては
イベントとして扱われていて
あるイベントに関する処理が完了したら
次のイベントを処理する
というようなイベントループで動作する
Google Maps API 使い方
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?libraries=geometry&sensor=true”></script>
これで Google Maps API javascript の読み込み
アプリがユーザ位置情報の取得にセンサーを使いたいので
sensor=true にしている
あと、
libraries パラメータを利用して ライブラリを読み込む
<body onload=”createMap()”>
<div id=”map” stype=”with:640px; height:480px; “></div>
これで
id=”map” の div を作って
body の onload イベントつまり読み込んだときの
イベントから
createmap()を読んで
map オブジェクトの初期化をする
そのときに呼び出す自作関数
ていうか、』世の中ではユーザ関数というらしい
function createMap(){
var position = new google.maps.LatLnt(35,135);
var options ={
zoom:15,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(‘map’), options);
var market = new googlemaps.market({
position:position,
map:map
});
}
地図を初期化するための各種プロパティを設定した
options を作成している
center には、地図の中心位置を設定するので
これは
var position で 35.135 を指定してあるので
これをそのまま使う
mapTypeId には地図のスタイルを設定する
たしか yahoo マップなら地下とかあった
普通の地図なら
ROADMAP にする
google.maps.Map() の引数には
描く場所、指定するオプション
だけど全部かくのは面倒なので
var options で変数宣言して格納するほうが楽
あと、描画する位置も div の id=”map” のところだから
map としている
次は、。マーカー
position はマーカーを表示する位置の指定
これは、すでに緯度経度の場所を指定しているから
そこにマーカーを出したいのでそのまま
position:position
でOK
map には、マーカーを表示する地図を指定する
すでに
var map で変数宣言して、この中にいろいろ設定しているから
map:map
でOK
つまり、マーカーを描きたいなら
var market=new google.maps.Market({
position: マーカーの位置,
map: 表示する地図を指定
});
というようになる