Boostrap のカスタマイズ と LESS

Boostrap のカスタマイズ

boostrap.css の背景色などの値を変更する場合

直接CSSの内容を変更するか
別に作成したCSSでオーバーライドして値を変更する

boostrap の CSS は
LESS　を利用して記載されているので
boostrap.css の元となるLESSファイルを変更することで
直接 boostrap.css を変更するより簡単に値の変更ができる

LESSは、コンパイルすることでCSSを出力するため
環境構築が必要
このためBoostrap では
カスタマイズ用のサイトを用意しているので
web サイトで LESS の変数の値を変更して

この変更された値でコンパイル済みの
Boostrap のファイル一式をダウンロードするのが
効率的

Boostrap のカスタマイズ用の web サイトは
http://twitter.github.io/bootstrap/customize.html

customize and download

このLESSについては
日本語ページなら
http://less-ja.studiomohawk.com

英語なら
http://lesscss.org
に仕様などがかかれています

LESSとは
CSSの言語を拡張して
CSSではでできなかった
変数
ミックスイン
演算
関数のような動的処理をCSSへ追加拡張した言語のこと

boostrap のCSSメモ

li class="unstyled" とすると
オーダーを削除し、左寄せに表示できる

class="btn" とすると
カーソルが当たったときの
ホバー表示
クリックしたときの車道などの表現が追加される

また
class=" btn btn-success"
class="btn btn-danger"
とすれば
ボタンの色を変更できる

ボタンには Boostrap であらかじめ用意されている
アイコンを表示することも可能

ゴミ箱のアイコンなら
icon-trash とすればOK

また、ボタンのグループ化も可能
グループ化したいなら
そのボタンを div タグでくくって
class="btn-group"
とすれば、ボタンのグループ化ができる
例えば
</div>
<div class="btn-group" style="margin-top:10px;">
<button class="btn btn-success">作成</button>
<button class="btn btn-success">削除</button>
</div>
というようにする

boostrap の適用

boostrap 適用

<link href="css/boostrap.min.css" rel="stylesheet">
<link href="css/boostrap-responsive.min.css" rel="stylesheet">

これで
boostrap.css を読み込んでから
boostrap-responsive.css を読み込む

あらかじめ
メディアクエリーが指定されているので
画面サイズに合わせてえスタイルが細かく制御される

メディアクエリーとは

メディア、たとえば、プリンタ、ディスプレイなど
と閲覧者の環境、つまり画面サイズに応じて
CSSの適用条件を細かく指定できるという仕組みのこと

#media (min-width: 768px) and (max-width:979px){
//画面さいず最小　768px
最大で 979px の場合に視聴するスタイルを記述
}

#media (max-width]707px){
//画面さいず最大 767px のときに使用するスタイルを記述
}

ということで
買物リストアプリの header タグに
boostrap 適用

<header class="navbar navbar-fixed-top">
<nav class="navbar-inner">
<span class="brand">買物長</span>
<ul class="nav">
<li class="active"><a href="index.html">買物帳リス
ト</a></li>
</ul>
</nav>
</header>


ヘッダーをナビゲーションバーへ変更する
これは
class="navbar"
class="navbar-inner"
を指定することで見た目をナビゲーションバーにできる

あわせて
navbar-fixed-top とすれば
画面さいずが変更されたときでも
ナビゲーションバーを画面上部へ固定できる

class="brand"とすると
サイトのブランド名を表示できる

ナビゲーションバーにリンクを追加したいなら
class="nav"
とする

現在表示している画面のリンクをアクティブに見せるには
class="active"
とすればリンクが強調表示される

twitter boostrap ちょいメモ

Boostrap をダウンロード

zip なので、これを解凍

css には
boostrap.css
boostrap-responsive.css

boostrap-responsive.css には
Responsible Design に必要な設定が記載されている

これらのファイルを
minify したのが
boostrap.min.css
boostrap-responsive.min.css
とうこと

img には
Boostrap で使うイメージがある
glyhicons-halfings.png
glyphicons-falfings-white,png
はイメージの色が違う

js の中には
boostrap.js
boostrap.min.js
となっている

Boostrap で画面に簡単に動作を加えることができるように
あらかじめ用意されているJavaScript になる

モーダルダイアログ
タブ
ドロップダウンリスト
などが用意されている

jQuery に依存しているので
jQuery を読み込み、その後、
boostrap.js を読み込んでから使う

Boostrap.min.js は minify したファイル
になっている

GWのあたりは円安にはなりにくいらしい

GWのあたりは。あまり円安にならないようです

原因は、長期休み前には
休み中のオーダーとして
輸出企業がドル売りオーダーを銀行に預けてしまうからとのこと

今週末には米国の雇用統計がでたり
FOMCの発言などにより大きく動く可能性があります

毎週月曜にはIMMの通貨ポジションレートがでているので
これを参考にすることで、どの程度円安、円高が進行しそうか
予測することができます

クロス円の算出、つまりユーロ円とかポンド円の算出方法は
ドル円 x 対ドルレートでだせますので

この通貨ポジションレートが大幅に傾いている
もしくは、ショートやロングが過去最高になっている場合
相場は反転する可能性があります

ちなみに、安全資産といわれている金ですが
値下がりすることがありますので、買っておいて放置しておいても
大丈夫ということにはなりません

金の価格も変動します

有事の金といわれますが
実際には、なにか有った時には金を売って資金にするというものであり
かつてリーマンショックのときには
金を売って資金繰りにしたため、金価格は下がりました
株、為替、債券、金
どれも買って保管しておけば安泰というものはありません

GWなど、市場が閉まっているときには予想外の動きが多くなりますので
注意しましょう

JSON メモ

JSON メモ

JSONは、javascript object notation の略

java script のオブジェクトの表記法

javascript のおい無事ぇくとをもj列へ相互変換が可能で
key-value 形式でデータを保持する

例えば
{"name":"Saito",
"age":20,
"birthday":"2012/12/19"}

左側のname とかが key
右側の 20 とかが value
ちなみに、数値はそのままでいいけど、文字列は""でかこむ


自分で作成したJSONが
正しいかチェックするには
JSONLint
という
JSON チェックサイトがある
http://jsonlikokont.com

ここで、JSONの書式をチェックしてから
JSONを使えば、記載ミスなどを把握できる

DeviceOrientationEvent API の活用

DeviceOrientationEvent API の活用

ゲームの操作感
端末の傾きを検知して
ゲーム操作に利用する
より直感的なコントローラデバイスとして活用できる
前にみたサンプルでは、たまを転がしたり
バランスをとるゲームに使われていた

ジェスチャ認識
端末の加速度を検知して信号処理すれば
特定のジェスチャ判定につなげられる
端末をシェイクすると入力フォームをクリアするなど

マップ表示の回転制御
端末の向きを検知すれば
画面に表示する地図の向きをユーザ目線の
方向に揃えられる
主に、ナビアプリに使われる

devicemotionイベント

devicemotionイベント

端末の物理的な動きを検知するには
windowオブジェクトにイベントリスナを登録

window.addEventListenr("devicemotion",function(event){
//event .acceleration, accelarationIncludingGravity, ratationRate, interval を取得して何かする
},true);

devicemotion イベントには以下の属性が含まれる

eventaccelaration
端末にかかる加速度を
x,y,zの３軸成分で保持
単位は m/秒 ^2
各成分の値は下記属性として取得可能
event.acceleraton.x
event.acceleration.y
event.acceleration.z
端末を静止しているならx,y,zは0になる
端末が自由落下しているなら
x,yは０
zは-9.81になる

event.acceleationIncludingGravity
重力加速分を含む以外は
event.accelerationと同じ
端末を静止していると
x,yは０
zは 9.81
端末が自由落下しているなら
x,y,zは０になる

event.rotationRate
端末の回転速度を
alpha
beta
ganma
の３成分で保持
各成分の値は
event.rotationRate.alpha
event.rotationRate.beta
event.rotationRate.ganma
の属性として取得可能

event.interval
前回イベント発生時からの経過時間を保持
単位はミリ秒

重力加速度を含まないため、加速度を取得できないなら
重力加速度込みの加速度が
accelerationの値にセットされ
accelerationIncludingGravityと同じ値になることがある
これはジャイロスコープが搭載されていないデバイスとかである

onconmpassneedscalibration イベント

onconmpassneedscalibration イベント

コンパスのキャリブレーションが必要になったことを
検知するには
window オブジェクトにイベントリスナーを登録

window.addEventListeenr("oncompassneedcaribration",function(event){
//コンパスキャリブレーションについてユーザに通知
},true);

deviceorientation で端末向きを取得するために
使用されている電子コンパスなどのセンサーに
キャリブレーションが必要と判断されたタイミングで
このイベントが発生する

ブラウザベンダには
コンパスのキャリブレーションにより
deviceorientation イベント値の精度が工場可能な場合のみイベント発生することが推奨されている

このイベント発生時には
コンパ鵜sの化yリブレーション操作の詳細について
ブラウザがユーザに通知する

アプリのよりイベントをキャンセルして独自方法でキャリブレーション操作などを案内することが可能

deviceorientation イベント
デバイスの向きが変わったことを検知するには
windowオブジェクトにイベントリスナーを登録する

window.addEventListener("deviceorientatin",function(event){
//event.alpha, beta, ganmaを取得して何かする
},true);

イベント引数にはデバイスの向きに関する情報が保持される
ブラウザや端末によっては無理
そのときにはnullがセットされる

とりえあずメモ
event.alpha
デバイスを基準状態からz軸を中心として
x軸からy軸の方向へ回転させた角度
0<=alpha<360
で表される
デバイスを水平に保ったままy軸を西に向けると
alpha=90

event.beta
デバイスを基準状態から x軸を中心として
y軸からz軸方向へ回転させた角度
-180<=beta<180
で表される

event.ganma
デバイスを基準状態から、y軸を中心として
z軸からx軸の方向へ回転させた角度
-90<=ganma<90
で表される

DeviceOrientation Event

DeviceOrientation Event


これは
デバイスの物理的な向きと傾きに関する情報を提供する
DOMイベント

使える機能は
デバイスの物理的向きに関する情報を提供するDOMイベント

デバイスの加速度に関する情報を提供するDOMイベント

コンパスのキャリブレーションが必要であることを知らせる
DOMイベント

そして、以下がデバイスの向きがどのように表現されているかのメモ


地球座標系
物理的な方角は
XYZの３軸で表現する

西から東に向かうのがX軸
南から北に向かうのがY軸
下から上に向かうのがZ軸になる
デバイスの向きは関係ない



デバイス座標系
デバイスにひもづけられる座標系でxyz の３軸で表現

スクリーンの左から右がX軸
スクリーンの下部から上部がY軸
スクリーンの背面から表面がZ軸になる

デバイス座標系は
デバイスの上下左右に限定されるので
デバイスを傾けると
デバイスと同じ向き、角度だけ傾く


デバイスの回転座標系

デバイス座標系(xyz) と
地球座標系（XYZ）が
それぞれ同じ向きを向いている状態を
基準状態として
この状態からの誤差を３つの角度で表す

alpha
デバイスが基準状態から
z軸を中心として
x軸からy軸の方向へ回転させた角度
手のひらでくるくるまわすのがalpha

beta
デバイスを基準状態から
x軸を中心として
y軸からz軸方向へ回転させた角度
両手でまわすようにするのがbeta

ganma
デバイスを基準状態から
y軸を中心にして
z軸からx軸方向へ回転させた角度
ねじるようにぐるぐるまわすのがganma

HTML Media Capture APIとセキュリティ

HTML Media Capture APIは
<input type="file">
の拡張タグにすぎない

input タグと同様のセキュリティ/プライバシー指針
に基づいた挙動となる

具体的な制限は
プログラム側からファイルパスを設定できない

ユーザの操作なしでは、キャプチャ処理が実行sれない
参照ボタンをクリックしたときのUIは
ブラウザで完全制御されるため
アプリ側で省略、改変できない


このAPIをつかうメリットは
アップロードするときの操作を楽にできること

スマートフォンの画面は大きくないし
アップロードするファイルを探したり選んだりする手間を
ファイルを指定することで省くことができる

写真共有とかカメラでとった写真をアップロードするのに使える

HTML Media Capture API

HTML Media Capture API


これはユーザがデバイスのメディア機能にアクセスすることを
手助けするHTMLフォームの拡張機能

機能としては
HTML のinput 要素に
capture 属性
accdept 属性を提供する

ユーザは簡単に端末の画像、動画、音声をキャプチャする
選択してアップロードも可能

このAPIはキャプチャツールの起動
ファイル参照を手助けするだけで
ユーザの関与なしで自動的メディアファイルを
アップロードなどはできない

また、このAPIでは動画や音声をストリーム送信することもできない

capture 属性には
４種類の値を設定できる
例を書くと





ソースにすると
<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などの新しい標準はW３Cで段階的に
検討、発表される

草案だと
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だと
こういった待ち時間を
他の処理に割り当てれるので
１つのスレッドで大量の処理ができる
処理完了を待ってから
次の処理を行いたいのなら
コールバックを使う

リクエスト、コールバック発生に関しては
イベントとして扱われていて
あるイベントに関する処理が完了したら
次のイベントを処理する

というようなイベントループで動作する

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: 表示する地図を指定
});

というようになる

GeoLocation API メモ

//位置を取得するときのオプション
var positionOptions ={
enableHighAccuracy; true,
timeout:6000,
maximumAge:0
};

//位置の取得に成功したら実行する
function successCallback(position)~{
alert(position.coords.latitude +','+postion.coords.longitude);
}
これで緯度経度が表示

//位置取得失敗したら実行
function errorCallback(positionError){
alert(positionEror.code +','+poositionError.message);
}


//位置取得
function getPosition(){
navigator.getlocation.getCurrentPosition(successCallback,errorcallback,positionOptions);
}

あらかじめ
positionOptions
successCallback
errorCallback
を作成して
あとは、
navigator.geolocation.getCurrentPostion()
の引数に当てはめている

positionOptions の意味だけど
enableHighAccuray
高精度の情報を取得

timeout
タイムアウトまでの時間

maximumAge
位置情報の有効期限
０なら常時更新になる

今回は
getCurrentPosition()
だけど、これは１回しか取得しないので
通常、位置情報アプリをつくるなら
位置情報を継続して取得する
watchPosition(successCallback,errorcallback,positionOptions)
こちらをつかう

ただし、ずっと動かすわけにはいかないので
止めるための機能もある
それが
clearWatch(watchId)
これで
識別番号 watchId で稼働している位置情報の監視を停止できる
watchId は watchPosition() の戻り値になる

また
function successCallback(position){
.........}

のところで
プロパティがでてきたので、これも解説メモ
coords.altitude
緯度

coords.longitude
経度

coords.altitude
高度をmで表す

coords.altitudeAccuracy
高度の精度を表す

coords.heading
方角を表す

coords.speed
速度を表す

timestamp
位置を取得した自国のタイムスタンプを表す


最後に positionError のプロパティ
これは
function errorCallback(positionError){
.....}
の中で使っている

code
以下の数値がエラーの意味になる
１ PERMISSION_DENIED
2 POSITION_UNABAILABLE
3 TIMEOUT

message
エラーメッセージ

Audio/Video関連のイベント

Audio/Video関連のイベント

emtied
読み込みの最初に発生

loadstart
読み込み開始で発生

progress
読み込み中に断続的に発生

loadmetadata
メタデータ読み込みで発生

loadeddata
データ読み込みで発生

canplay
再生できるぐらいまでデータ読み込みで発生

canplaythrow
最後まで再生できるぐらいまでデータ読み込みで発生

load
データ読み込み完了で発生

suspend
データ読み込み一時停止で発生

stalled
データ読み込み失速で発生

abort
データ読み込みがエラー中断されると発生

error
エラーで発生

loaded
読み込みがloadで正常終了
もしくは
abortなどでエラー終了しても発生する
とにかく、終わると発生

video /Audio メモ

再生状態の取得
再生中のメディアファイルのURLは
currentSrc プロパティから取得

また、メディアファイルの長さは
duration プロパティから取得できる

単位は秒

他の情報を取得するプロパティは以下の通り
currentSrc
読み込み、再生を行っているメディアファイルのURL

duration
データの長さを秒で表す

ended
再生終了かどうか表す

error.code
1 MEDIA_ERROR_ABORTED
ユーザがダウンロードを中止
2 MEDIA_ERROR_NETWORK
ネットワーク接続失敗
3 MEDIA_ERROR_DECODE
デコード失敗
4 MEDIA_ERROR_SRC_NOT_SUPPORTED
形式をサポートしていない

networkState
0 NETWORK_EMPTY
要素の初期状態
1 NETWORK_IDLE
ネットワークを接続前
2 NETWORK_LOADING
ダウンロード中
3 NETWORK_LOADED
ダウンロード完了
4 NETWORK_NO_SOURCE
サポートしていない形式のためダウンロードしない

played
再生済みの時間範囲である TimeRanges を返す

seekable
シーク可能な時間範囲を表す

seeking
指定された再生位置に移動中か表す

startTime
再生可能な位置を秒数で表す

readyState
メディアのダウンロード状態を示す
0 HAVE_NOTHING
ダウンロード開始していない
1 HAVE_METADATA
メタデータのみダウンロード済み
2 HAVE_CURRENT_DATA
現在の再生位置を表示できるだけのデータをダウンロード済み
3 HAVE_GUTURE_DATA
現在の再生位置より少し先を再生できるぶんのダウンロード済み
4 HAVE_ENOUGH_DATA
最後まで表示できるデータをダウンロード済み


次に再生状態の変更
値を変更するプロパティも存在する
src
指定されたメディアファイルのURL

currentTIme
現在の再生位置を秒数で表す

defaultPlaybackRate
デフォルトの再生速度を泡ラス
デフォルトは1.0
マイナスにすると巻き戻し

playbackRate
再生速度
デフォルトは１。０
マイナスなら巻き戻し

preload
先読みするかどうか

loop
ループ再生するかどうか

controls
コントロールバーの表示

volume
音声ボリューム
0.0　～ 1.0 の値

muted
消音

video Audio の使い方

基本的には
<audio src="sample.mp3" controles="controls" loop="loop" autoplay="autoplay"></audio>

controls でコントロールバーの表示
loop でループ再生
autoplay で自動再生
muted をつけると消音

動画なら
<video src="movie.mp4" poster="c4,2002png" controls="controls" height="300px" width="300px"></video>

poster は動画が再生されるまでお待ちくださいという
変わりの画像の指定
controls はコントロールバーの表示

autoplay には
autoplay
autoplay="autoplay"
autoplay=""
のどれかを選ぶ

preload は自動でファイル読み込み設定
none 無効
metadata メタデータのみ
auto 自動
のどれかを選ぶ

controls はコントロールバー
controls
controls="controls"
controls=""
のどれかを選ぶ

loop ループ再生の指定
loop
loop="loop"
loop=""
のどれかにする

あと複数メディアファイル対応にするなら
source タグで指定すればいい
<video controle="controls">
<source src=A"movie.mp4" type="video/mp4"></source>
<source src="movie.webm" type="video.webm"></source>
</video>

というかんじ

あと、重要なのが読み込みと再生関連

load()
メディアファイル読み込み

play()
メディアファイル再生

conPlayType(type)
type で指定したMIMEタイプが再生できるかどうか判定
再生できるなら
maybe
もしくは
probably
を返す

node.js準備

ubuntu12.04 LTS の場合

sudo apt-get -y install build-essential
で開発環境導入

続いてnode.jsインストール

wget http://nodejs.org/dist/v0.8.16/node-v0.8.16.tar.gz
tar zxvf node-v0.8.16.tar.gz
sudo mv node-v0.8.16 /usr/local/

cd /usr/local/node-v0.8.16
sudo ./configure
sudo make install
node --version

次に、アプリ格納ディレクトリ作成
mkdir c4_5001
mkdir c4_5001/public
cd c4_5001
npm install socket.io express

Express はNode.jsのための
Webアプリのフレームワーク

npm は
rpm みたいな
node.js のためのパッケージマネージャー
必要なモジュールを自動ダウンロードする
どちらかというと
apt-get
とか
yum
みたいなかんじかもしれない

jQuery Mobile

jQuery Mobile は
jQuery ベースのモバイル向けUIを簡単に
構築できるようにしたライブラリ

まず。必要なファイルをダウンロード
http://jquerymobile.com/download

から
jquery.mobile-1.2.１.zip をダウンロード

あとは、解凍して
プロジェクトディレクトリに配置する

unzip コマンドで簡単に解凍可能
unzip jquery.mobile-1.2.1.zip

解凍するといろいろファイルとかディレクトリあるけど
使うのは
images/
jquery.mobile-1.2.1.css
jquery.mobile-1.2.1.js

注意点としては、
css ファイルと
images ディレクトリを同じ階層におかないと
アイコンが表示されなくなるの注意

あとは、このディレクトリのところにHTMLファイルなどを
書いていくことで、スマートフォン向けのものが
作成できます

JavascriptのDOMアクセス

JavascriptのDOMアクセス

要素のID タグ名 クラス名から要素を選択するなら

getElementById()
IDが一致する要素を取得

getElementsByTagName()
タグ名に一致する要素一覧を取得

getElementsByClassName()
クラス名に一致する要素一覧を取得


また、CSSセレクタからの取得もできる

querySelector()
CSSセレクタに一致する最初の要素を取得

querySelectorAll()
CSSセレクタに一致する要素一覧を取得

Javascriptの try~catch~finally

Javascriptの try~catch~finally

役割をまとめると

try{
例外の発生する可能性のある処理
}catch(e){
例外の処理
}finally{
例外が発生してもかならず実行したい処理
}
というかんじ

あと、自分で例外発生させることもできる
それには
throwを使う

あと、例外処理のcatchのところは
if~elseで例外ごとに分岐処理することも可能

animationを使ってアニメーション

animationを使ってアニメーション

animationなら
transitionより複雑なアニメーションができる

transitionは、プロパティの変化の仕方を指定しただけ
animationては、
キーフレームを使うことで
様々な制御が可能

キーフレームは@keyframes
というキーワードを使い指定する

@keyframesの
キーフレームの設定は
アニメーション全体に対するバーセンテージで表す

最初は 0%
中間は 50%
最後が 100%
となり
このバーセンテージで示したところに
スタイルを適用することで
キーフレーム間でアニメーションが実現する

@keyframesの書式は

@keyframes アニメーション名{
0% { 変化させるプロパティ : 値; }
25% { 変化させるプロパティ : 値; }
....
100% {変化させるプロパティ : 値 }
}
となる

CSS3のアニメーション

CSS3のアニメーション

CSS3でアニメーションするなら
transition
または
animation
を使う

シンプルなアニメーションをするなら
transition
これなら
マウスのロールオーバーによるリンクの強調とか
ユーザーの動作についてちょうどエフェクトかけるとかできる

とりあえずソースにすると
. slowly{
transition:
background-color 背景色を
1s アニメーション実行時間
0 開始までの遅延秒数
ease-in-out 変化の仕方
;}

.slowlyは
class="slowly"という意味

ease-in-outの意味は
最初と最後がゆっくり変化する
他にも指定できる

ease
最初と最後が滑らか

ease-in
最初はゆっくり

ease-out
最後がゆっくり

linear
一定速度