カテゴリー: 未分類

基本的に、localStorage に保存したり
スマホで入力した内容を他の環境では
確認ができない
こんなときにはバックエンドのストレージとして利用できる技術をつかう
例えば Dropbox のAPI
Dropbox API は javascript から直接利用できるAPI
ないみたいだけど
バックエンドに
Python
Ruby
Java
などで
Dropbox API を呼び出せば
オンラインストレージを使える

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を活用するなら
今までなら
着信のときの振動だけだったけど
スマートフォンなら
ユーザーの操作に対するフィードバック演出とか
ゲームの演出などが可能
加速度センサーと組み合わせることで
ジェスチャー入力をすることで
ユーザーが別のメディアを見ながら操作することが可能になる

node.jsメモ
emit(EventName, data)
を使うと
データを送信してきたクライアントへ
対してのみデータを送信する
broadcast.emit(eventName, data)
を使うと
データを送信してきたクライアント以外にデータを送信できる

Audio/Video関連のイベント
emtied
読み込みの最初に発生
loadstart
読み込み開始で発生
progress
読み込み中に断続的に発生
loadmetadata
メタデータ読み込みで発生
loadeddata
データ読み込みで発生
canplay
再生できるぐらいまでデータ読み込みで発生
canplaythrow
最後まで再生できるぐらいまでデータ読み込みで発生
load
データ読み込み完了で発生
suspend
データ読み込み一時停止で発生
stalled
データ読み込み失速で発生
abort
データ読み込みがエラー中断されると発生
error
エラーで発生
loaded
読み込みがloadで正常終了
もしくは
abortなどでエラー終了しても発生する
とにかく、終わると発生

JavascriptのDOMアクセス
要素のID タグ名 クラス名から要素を選択するなら
getElementById()
IDが一致する要素を取得
getElementsByTagName()
タグ名に一致する要素一覧を取得
getElementsByClassName()
クラス名に一致する要素一覧を取得
また、CSSセレクタからの取得もできる
querySelector()
CSSセレクタに一致する最初の要素を取得
querySelectorAll()
CSSセレクタに一致する要素一覧を取得

Javascriptの try~catch~finally
役割をまとめると
try{
例外の発生する可能性のある処理
}catch(e){
例外の処理
}finally{
例外が発生してもかならず実行したい処理
}
というかんじ
あと、自分で例外発生させることもできる
それには
throwを使う
あと、例外処理のcatchのところは
if~elseで例外ごとに分岐処理することも可能

animationを使ってアニメーション
animationなら
transitionより複雑なアニメーションができる
transitionは、プロパティの変化の仕方を指定しただけ
animationては、
キーフレームを使うことで
様々な制御が可能
キーフレームは@keyframes
というキーワードを使い指定する
@keyframesの
キーフレームの設定は
アニメーション全体に対するバーセンテージで表す
最初は 0%
中間は 50%
最後が 100%
となり
このバーセンテージで示したところに
スタイルを適用することで
キーフレーム間でアニメーションが実現する
@keyframesの書式は
@keyframes アニメーション名{
0% { 変化させるプロパティ : 値; }
25% { 変化させるプロパティ : 値; }
….
100% {変化させるプロパティ : 値 }
}
となる

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
一定速度

CSS3で、変形とかアニメーション
まずは、transform
これを使えば、ラベルを斜めにしたり
拡大縮小して、まるで包装紙みたいなラッピングもできる
要素の移動はtranslate
拡大縮小は scale
回転は rotate
傾斜は skew

CSS3のメモ
last-child
兄弟要素で最後の要素へスタイルを適用
first-of-type
兄弟要素で最初の要素を指定し適用
last-of-type
兄弟要素で最後の要素を指定し適用
only-child
指定の要素が兄弟要素がないならスタイルを適用
単純に、要素が一つだけのときに適用されるということ
only-of-type
指定の要素の種類が
親要素の中で唯一の子要素であるときのみ適用
例えば
div id=”content”
で
その中にh2が1つだけのとき
empty
要素の中身が空のときにスタイル適用
よくあるのが
テーブルを作成していて
空のtdのところには色を変える
という使い方
target
id内でリンクがあり
リンクをタップやクリックしたら
そのリンク先にスタイル適用
使い道は、
リンクをクリックしたら
隠してある要素を表示するようなやり方
enable
要素の有効化
disable
要素の無効化
使い道は、inputで入力しているとき
入力欄の色を変えるなど
checked
チェックボタンやラジオボタンがチェックされたときに適用される
not
not(セレクタ)というように
指定したセレクタに一致しないところだけスタイル適用する
if(!条件){….}
みたいなかんじ
要素 ~ 要素
兄弟要素で
指定した要素の間のみスタイル適用
例えば
h1 ~ p {color:blue; }
なら
h1のあとのpタグの中身が
青色になる