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の3軸成分で保持
単位は m/秒 ^2
各成分の値は下記属性として取得可能
event.acceleraton.x
event.acceleration.y
event.acceleration.z
端末を静止しているならx,y,zは0になる
端末が自由落下しているなら
x,yは0
zは-9.81になる
event.acceleationIncludingGravity
重力加速分を含む以外は
event.accelerationと同じ
端末を静止していると
x,yは0
zは 9.81
端末が自由落下しているなら
x,y,zは0になる
event.rotationRate
端末の回転速度を
alpha
beta
ganma
の3成分で保持
各成分の値は
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の3軸で表現する
西から東に向かうのがX軸
南から北に向かうのがY軸
下から上に向かうのがZ軸になる
デバイスの向きは関係ない
デバイス座標系
デバイスにひもづけられる座標系でxyz の3軸で表現
スクリーンの左から右がX軸
スクリーンの下部から上部がY軸
スクリーンの背面から表面がZ軸になる
デバイス座標系は
デバイスの上下左右に限定されるので
デバイスを傾けると
デバイスと同じ向き、角度だけ傾く
デバイスの回転座標系
デバイス座標系(xyz) と
地球座標系(XYZ)が
それぞれ同じ向きを向いている状態を
基準状態として
この状態からの誤差を3つの角度で表す
alpha
デバイスが基準状態から
z軸を中心として
x軸からy軸の方向へ回転させた角度
手のひらでくるくるまわすのがalpha
beta
デバイスを基準状態から
x軸を中心として
y軸からz軸方向へ回転させた角度
両手でまわすようにするのがbeta
ganma
デバイスを基準状態から
y軸を中心にして
z軸からx軸方向へ回転させた角度
ねじるようにぐるぐるまわすのがganma