Chrome Developer Tools の設定変更
Ctrl + Shuft + i でツールを起動して
画面の一番右下にある歯車マークをクリックすると
Chrome Develoepr Tools の設定変更が可能
おそらく
この中で一番つかうのが
Override 項目の
User Agent
これを変更すると
いろいろなブラウザのテストをすることができる
例えば
User Agent を
iPhone —-iOS 5
にすれば
スマートフォンをもっていなくても
スマートフォンのブラウザ表示でみることが可能
これにより、PCでWeb アプリを開発するときに
スマートフォン対応の検証ができるようになる
また。
Shuft + / をおすと
ショートカットキー一覧をみることができる
http://dotinstall.com/lessons/basic_chrome_dev/7111
の解説をみると動画解説されているので
とてもわかりやすい
月別: 2013年5月
browser パフォーマンス調査
browser パフォーマンス調査
TimeLines
Profiles
Audits
はパフォーマンス調査
遅いときとかに調べるのに使う
Timelines は
どのタイミングでどの処理が行われているかみれる
あとメモリ状態なども見れる
Profiles は
CPUの状態調査に使う
Auditsは
webサイトに関する改善提案などがでる
基本動作に関しては
http://dotinstall.com/lessons/basic_chrome_dev/7109
の動画を参照
なお
TimelineパネルではEventsなどで右クリックするとデータの保存、読み込みができ
他の人のデータを読み込んで解析する、といった使い方が可能とのことです
テストユーザがいるなら使えるかも
chrome と break point
今回はブレークポイントの使い方
http://dotinstall.com/lessons/basic_chrome_dev/7108
の動画解説を使って実戦開始
動画では、クリックすれば
ブレークポイントが設置されているみたいだけど
行数のところを右クリックして
Add Breakpoint を選択してもOK
実際に前回と同じように
Developer Tools を起動して
Sources タブで
13行目を修正して保存
そして９行目にブレークポイントを設置した状態で
おみくじをひく
をクリックすると、ブレークポイントの効果で
止まります
Sourceタブの中で、変数の上にマウスをもっていけば
中身をみることができるので
8行目の
var omikuji をみると
”” という中身がない状態になっています
今回は、関数の中身の確認ということで１つずつみたいので
↓のアイコンをクリック
これは
Step into next function というアイコン
これをおすことで、ブレークポイントから
次の処理へすすめていくことができます
結論から言えば単純なのですが
if (omikuji = “大吉”)
で代入となっているからですが
これも意外に気づかなかったりします
こんなときにマウスオーバーすることで
値がなにか変だと気づくことができ、
原因が分かったりします
ブレークポイントは、異常がおきている周辺で設置し
あとは１ステップごとにみていくことで
原因解明に役立てることができるというものです
このように、便利なツールですが
残念なことにタブレットやスマートフォン版の
chrome では使えないということです
あと、java script のソースに
debugger;
と記述すると、ブレークポイントを設置する
ということもできます
chrome で java script デバッグ
chrome で java script デバッグ
chromeを開いている状態で
Ctrl + Shift + i
でDeveloper Tools を起動できるので
今回は
その中にある
Sourceタブを使って
java script のデバッグ
今回の実践に使わせてもらったのは
http://dotinstall.com/lessons/basic_chrome_dev/7107
の動画
そして
実際にデバッグを行うのは
http://samples.dotinstall.com/basic_chrome_dev/7102/
です
動画を見ながら実際におこなうことができるので
実戦形式で覚えることができます
以下は、実際にやったときのメモ
java script でエラーが起きているときには
developer tools の画面の一番右下に
エラーの個数がでるのでそれをクリックすれば
エラーが表示されます
scriptタグの中の java script は編集できるので
修正し、保存します
保存とはいっても一時保存みたいなもので
実際のソースコードそのものは保存はされません
とりあえず
document.getElementbyId(‘result’).innerHTML = omikuji;
を
document.getElementById(‘result’).innerHTML = omikuji;
に編集したら
Ctrl +s で保存して
ブラウザで
おみくじをひく
をクリックすれば
あなたの今日の運勢は大吉！！！！！
というように
反応するようになります
ちなみに、編集前は
あなたの今日の運勢は…！
のまま変わりません
実際にソースを書き換えたのを保存したいなら
右クリックして
Save As
を選択して保存するようにします
また
Cmd+L:行番号でジャンプ
Cmd+O:ファイルの一覧を表示
Cmd+Shift+O:関数やセレクタの一覧を表示
というショートカットキーですが
ubuntu の場合なら
Cmd ではなく Ctrl キーとなります
virtualbox インストール
virtualbox インストール
実験環境を構築するため
普段は VMware Player を使っているけど
今回は Virtualbox をインストール
インストールは簡単で
Ubuntu ソフトウェアセンターを起動して
検索欄で
virtualbox
と入力すればでてくるので
あとはインストールを選ぶだけ
これで Ubuntu 環境へVirtualBox をインストールできます
ちなみに、Mac にもこのソフトはインストール可能です
BackTrack 5R3 download
BackTrack 5R3 download
http://www.backtrack-linux.org/downloads/
から
ダウンロード可能
一見、ユーザ登録必須に見えるけど
実はそのままダウンロード可能
今回は、hacker japan に載っていた
Virtualbox における実験環境構築と
実践のために必要なので
仮想マシンそのものをダウンロード
このときに選んだ構成は
BackTrack Release には
BackTrack 5R3
Window Manager には
GNOME
Architecture には
32
Image Type には
VMware
Download Type には
Direct
を選択しました
BackTrack の後継機 ? Kali Linux
BackTrack の後継機
Kali Linux という BackTrack の後継機らしきものがでました
いままで、BackTrack は Ubuntu ベースでしたが
Ubuntu Touch が発表されたように
今後はスマホ、タブレットに合わせた方向へシフトする可能性があり
BackTrack で採用されている
Gnome-KDE は切り捨て路線の可能性があるから
かもしれません
この Kali LInux は Debian ベースとなるようです
BackTrack からの変更点としては
ブラウザが firefox から Iceweasel となり
Android 開発環境の
Android SDK Manager
パッケージのリバースエンジニアリングツール
apktool
アセンブラとディスアセンブラの
small/backsmall
dexファイルから jar ファイルを取り出す
dex2jar という
Android アプリ解析ツール関連が充実していること
また、収録ツール関連もいくつか変更があります
Armitage が入っていないので
apt-get でインストールすること
そして、Gerix が収録されておらず
リポジトリにもないので
apt-get でインストールができないということ
この kali Linux のダウンロードですが
http://www.kali.org/downloads/
からダウンロードします
ダウンロードするときに
No thanks just wait to download !
をクリックすれば個人情報を入力せず
ダウンロードできます
ただ、混み合っているので、なかなかダウンロードできないかも
Chrome Developer Tools
リファレンスの
サイトは
https://developers.google.com/chrome-developer-tools/
このツールを使うには
chrome が必要
ちなみに、起動して
developer tools の画面左下のアイコンをクリックすると
別のウインドウと分離できる
もう一度おすと、一つの画面に戻る
これについては
http://dotinstall.com/lessons/basic_chrome_dev/7102
で解説がある
html body などのタグ入りのものもでるけど
これは
ESCキーをおすことで消したり出したりできる
このツールを使うことで様々な編集ができる
コードの編集をしたいのなら
右クリックして
Edit as HTML
を選択すれば編集もできる
あと、DOM要素をクリックして移動させることもできる
ただし、編集はリロードすると元にもどるので
保存したいのなら
右クリックして
Copy As HTML を選択して保存する
Elementsパネル
使い勝手はよさそうだけど多機能なので忘れそう
http://dotinstall.com/lessons/basic_chrome_dev/7104
に動画で解説されているので、今後忘れたときには
またみるとしよう
Resourcesパネルを使ってみよう
http://dotinstall.com/lessons/basic_chrome_dev/7105
また、ネットワークパネルを使えば
どのタイミングで読み込んでいるのかを調べることができる
使い方は
Networkパネルを使ってみよう
http://dotinstall.com/lessons/basic_chrome_dev/7106
を参考に
TimeLine でどの程度の時間がかかるかを調べることができる
青いラインがDOM構成の時間
赤い線がすべて終わった時の時間
という意味になっている
一番下のところは
フィルタリングで、これは
画像だけにしたり
ドキュメントだけにしたりできる
通行止めのようなアイコンがあるけど
これはクリア
その横にある●は、一時保存のような効果
これは、他の画面にいったら
結果が消えてしまうので、これを押しておくことで保留しておける
また、ネットワークパネルで
右クリックすると
メニューから
browser の cache を消すこともできる
連続再生の設定とユーザビリティ
連続再生の設定
https://developers.google.com/youtube/iframe_api_reference#Events
のリファレンスの中にある
onStateChange
この中にあるプレイヤーが終わった時を意味する
０(ended)
を使う
そして、これは定数が用意されているので
こちらを使うことにする
YT.PlayerState.ENDED
これを追加するには
プレイヤーを初期化する関数の
function onYouTubePlayerAPIReady() の中へ
イベントを追記する
events:{
onStateChange: onPlayerStateChange
}
そして、
function onPlayerStateChange(e){
if(e.data == YT.PlayerState.ENDED){
$(‘#next’).trigger(‘click’);
}
}
というようにする
if(e.data == YT.PlayerState.ENDED)
は
動画の再生が終了になったら
という意味
onPlayerStateChange
はユーザ関数で、
このように関数にしておけば使いまわしもできるし
処理を書く時に関数を書くだけでよくなる
これで実行すると、エンドレスで動画が流れる
ここまできたらユーザビリティの改良
ロードしたら自動的に検索するところにフォーカスを当てる
これはアンケートサイトとかでもよく使われる
$(‘#q’).focus();
これで、
input id=”q”
となっているので、
ここの部分に
focus() によってフォーカスがあたるようになる
記述するのは、java script ファイル
さらに、いちいち検索ボタンをおさずに
google の検索とかみたいにEnter 押せばよいようにする
これは
HTMLファイルの入力のところをフォームにすればいい
このときに、onsubmit=”return false;”
とすれば、画面遷移しなくなる
また、変更に伴い
<input type=”button” id=”search” value=”Search”>
は
<input type=”submit” value=”search”>
とする
form 自体のソースは
<form id=”search” onsubmit=”return false;”>
<inpout type=”text” id=”q”>
<input type=”submit” value=”Search”>
</form>
これにより
java script ファイルのほうも変更が必要
これは
click 扱いから submit になったため
なので
$(‘#search’).click(function(){
ではなく
$(‘#search’).submit(function(){
となる
動画コントロールの実装
http://dotinstall.com/lessons/youtube_jukebox_js/7612
を参考に動画コントロールの実装
これで、一時停止とか次、前、などのボタンも使えるようにする
next
prev
に関しては
currentIndex を増やしたり減らしたりすることで実装可能
まずは一時停止
$(‘#pause’).click(function(){
player.pauseVideo();
}
これは、そのままAPIをつかう
次に、nextボタン
これは currentIndex を増やせばいい
ただし、最初からとは限らないので
if で分岐処理する
$(‘#next’).click(function(){
if(currentIndex ==$(‘li.movie.on’).lenght -1 ){
currentIndex=0;
}else{
currentIndex++;
}
play();
}
これは、currentIndex が配列で
配列は０から始まる
$(‘li.movie.on’).lenght -1
つまり１になるなら、currentIndex==0
となる
それ以外なら currentIndex を増やす
そして、その状態で play() を実行すれば
再生される
ちなみに、play() はユーザ関数
つまり、自作の関数となる
そして、次は prev つまり前に戻るというもの
ただし、１番最初なら戻ってしまうのはまずいので
１番最初なら何もおきないようにしておく
$(‘#prev’).click(function(){
if(currentIndex ==0){
return false;
}else{
currentIndex–;
play();
}
});
currentIndex ==0 というのは
最初という意味
配列は０から開始なので、０なら最初になる
currentIndex– というのは
１減らすという意味
return false;
これはなにもしないということ
HTML５の API を使う時に
return で終了するという処理もあるので
覚えておくと楽