java script でストップウォッチ

java script でストップウォッチ
スタート
ストップ
リセットボタン
を作成
表示は div で作成
id=”set”
style=”fong size:120px”>0.0</div>
用はボタンの onclick=”関数”
として<script> のところにそれぞれの関数を記述しておけばOK
簡単に
setinterval を使って百ミリ秒ごとに0.1 足しているけど
正確なストップウオッチに比べると時間がずれる
これを回避するには0.1 足すのではなく
new Date().getTime() で
ミリ秒を取得し、start の時刻との差を取る用にする
setInterval(function(){
sec +=0.1;
document.getElementById(“set”).innerHTML=sec;
},100);
だけだとたまに変になる
一旦１０倍にして四捨五入するようにして
1/10 にすればいい
round() は
四捨五入する関数
なので
setInterval(function(){
sec +=0.1;
document.getElementById(“set”).innerHTML=sec;
},100);
を
sec から
Math.round(sec*10)/10;
とすれば、見た目もすっきりする
こうしないと凄い桁数になっている
次にストップとリセット作成
var timerid ;
で宣言しておいて
function start() のところの
setInterval(function(){
を
timerId = setInterval(function(){
にする
あとは
function stop(){
clearInterval(timerid);
}
これでOK
次にリセット
function reset(){
document.getElementById(‘sec’).innerHTML=’0.0′;
sec =0.0;
}
とすればOK
innerHTML=’0.0′;
で表示を
0.0
に置き換えて
sec =0.0;
とすることで数値も初期化している

PHP でクイズ作成

http://dotinstall.com/lessons/quiz_php/1801
を参考にクイズ作成
arrayにクイズを格納
question に問題
options にクイズの選択肢
answer には正解
でOK
ソースにすると
$quiz = array(
‘question’=>’百式は何色？’,
‘options’=>array(‘赤’, ‘青’, ‘金’, ‘銀’, ‘黒’),
‘answer’=>2);
クイズの問題は echo で出力
回答するためのフォーム作成
選択肢は foreach() で表示
<p>Q: <?php echo $quiz[‘question’];?></p>
<ul>
<?php foreach ($quiz[‘options’] as $option) :?>
<li><?php echo $option;
?></li>
<?php endforeach;?>
</ul>
これで
<?php echo $quiz[‘question’];?>
で
問題が表示される
foreach ($quiz[‘options’] as $option)
で配列内容を１つずつ
$option に代入しながら終わるまでループする
<li><?php echo $option; ?></li>
となっているので
ループが終わるまで
リストが作られ続ける
すると
赤
青
金
黒
というようになる
このやりかたはAPI関連でリスト表示するときによくつかう
youtube とかお店リストとか
でクイズなので、ラジオボタンをつける
<input type=”radio” name=”answer” value=”<?php echo $key; ?>”>
これでラジオボタンがでる
さらに、回答の番号も把握したいので
foreach ($quiz[‘options’] as $option)
を
foreach ($quiz[‘options’] as $key=>$option)
にする
これで、１とかの番号がつくようだ
$key=>$option
にすることで
配列の関係にできる
つまり、キーと値の関係ができる
これもAPIでよく使う
そしてクイズの回答判定
送っているのはPOSTなので
判定をif で行う
if($_SERVER[“REQUEST_METHOD”]==”POST”)
まずは、これでPOSTか判定している
次に、回答と答え合わせ
これは三項演算子を使う
$message =($_POST[‘answer’]== $quiz[‘answer’])?”正解”:”不正解”;
これでOK
三項演算子は
（条件）? true の時の処理 : false のときの処理 ;
というかき方をする
これで、もし答えが間違っているなら
$message の中身は 不正解
$_POST[‘answer’]== $quiz[‘answer’])
であるなら、
$message の中身は　正解
というようになる
$quiz[‘answer’]
は
$quiz = array(
‘question’=>’百式は何色？’,
‘options’=>array(‘赤’, ‘青’, ‘金’, ‘銀’, ‘黒’),
‘answer’=>2);
の answer のことで
$_POST[‘answer’]
は
<form action=”” method=”post”>
の中で選んだラジオボタンの答えになる
そして、定番だけど
PHP で 出力するには
echo でできるので
echo $message;
とすれば
正解か不正解か表示されるというもの
最後に
exit するのを忘れずに
次はクイズの選択肢をシャッフル
これは
shufle() を使う
クイズの選択肢をシャッフルしたいので
shuffle($quiz[‘options’]);
でOK
三項演算子は
（条件）? true の時の処理 : false のときの処理 ;
というかき方をする
これで、もし答えが間違っているなら
$message の中身は 不正解
$_POST[‘answer’]== $quiz[‘answer’])
であるなら、
$message の中身は　正解
というようになる
$quiz[‘answer’]
は
$quiz = array(
‘question’=>’百式は何色？’,
‘options’=>array(‘赤’, ‘青’, ‘金’, ‘銀’, ‘黒’),
‘answer’=>2);
の answer のことで
$_POST[‘answer’]
は
<form action=”” method=”post”>
の中で選んだラジオボタンの答えになる
そして、定番だけど
PHP で 出力するには
echo でできるので
echo $message;
とすれば
正解か不正解か表示されるというもの
最後に
exit するのを忘れずに
次はクイズの選択肢をシャッフル
これは
shufle() を使う
クイズの選択肢をシャッフルしたいので
shuffle($quiz[‘options’]);
でOK
あと、配列をシャッフルするのに２だと答えがおかしいので
answer=>2
から
answer=>’金’
というようにする
あと、変更に伴い、配列の添字にしている
$key じゃなくて $option になるので
これも変更
<li><input type=”radio” name=”answer” value=”<?php echo $key;?>”>
から
<li><input type=”radio” name=”answer” value=”<?php echo $option;?>”>
<?php foreach ($quiz[‘options’] as $key=>$option) :?>
も
<?php foreach ($quiz[‘options’] as $option) :?>
となる

Javascript のサンプル

http://dotinstall.com/lessons/just_five_js/3001
を参考にアルゴリズムの勉強
必要なもの
<input type=”button” value=”start” onclick=”start();”>
<input type=”button” value=”stop” onclick=”stop();”>
<p id=”result”></p>
これでボタン、変化する領域ができた
getTimeで得られるのは1970/1/1から現在までのミリ秒
UNIXタイムのこと
getTime() のドキュメント
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/getTime
start = new Date().getTime();
でstart クリック時の時間取得
stop = new Date().getTime();
でstop クリック時の時間取得
とりあえず、デバッグするだけなので
developer tools を使うので
chrome で Ctrl +Shift +i で開いて確認
ここまできたら、結果算出
var diff = (stop -start)l;
これで、時間の差がでる
var FIVE_SECOND = 5 * 1000;
と定義しているので
var diff = FIVE_SECOND – (stop – start);
とすれば結果算出ができる
あとは、結果を
if else で分岐して表示できる
このときに、p id=”result” なので
これを格納する変数を用意する
var e = document.getElementById(“result”);
ument.getElementById(“result”);
そして分岐処理
表示内容は innerHTML で書き換えている
if(diff ==0){
e.innerHTML =’ぴったり’;
}else if(diff > 0){
e.innerHTML=(diff/1000)+’秒はやい’;
}else {
e.innerHTML =(diff/1000)+’秒遅い’;
}
というかんじ
これで実行してみてうごかない場合
developer tools を
Ctrl + Shift + i
で起動すると間違っていると思われる場所のエラーが
表示される

Google Feed APIで使える、特定の語句を含むフィードの検索機能

http://dotinstall.com/lessons/basic_google_feed_api/9105
を参考に、google feed api の実践
今回はフィード検索機能を使う
いままでは、URLを指定していた
でも、これだとURLがわからないと使えない
なので、改良
var query =”ドットインストール”;
構文は
google.feeds.findFeeds(
検索キーワード,
コールバック関数
);
今回は
google.feeds.findFeeds(
query,
function(result){}
);
となる
コールバック関数には、結果が result になって
返ってくるので
if でエラーチェックする
if(!result.error){
console.log(result);
}
これで、chrome develoer tools で開くと
コンソールの中でURLの確認ができる
この中の
entries->0->url のところにURLが格納されている
ドットインストールの場合は
http://dotinstall.com/lessons.rss
となっている

取得するフィードの設定

取得するフィードの設定
http://dotinstall.com/lessons/basic_google_feed_api/9104
を参考に実践
フィードの中身を取得できたので、
今度はリンクをつけてみる
なので、
<div id=”feed”></div>
から
<ul id=”feed”></ul>
というようにリスト要素にする
こうなると div 関連の処理はいらないので
コメントアウト、もしくは削除
var div = document.createElement(“div”);
div.appendChild(document.createTextNode(entry.title));
代わりに
var link = document.createElement(“a”):
で
aタグ作成
さらに、
link.href= entry.link;
とする
また、リンクのところをつくるので
var li = document.createElement(“li”);
li.appendChild(link);
container.appendChild(li);
ここまで記述すると
リンクできるようになる
次にデフォルトで表示件数が４件なので
これを設定する
var feed = new google.feeds.Feed(‘http://www.ideaxidea.com/feed’);
で
feed と取ってきたあと
fedd.setNumEntries(8);
というようにすると８件ずつになる
また、１０件なのに、もっとたくさん表示したいというときには
feed.includeHistoricalEntries();
とすれば、過去のデータも取ってこれるようになる
~
~

外部フィールドの内容を表示

外部フィールドの内容を表示
http://dotinstall.com/lessons/basic_google_feed_api/9103
を参考に
Google Feed API の実践
https://developers.google.com/feed/v1/devguide?hl=ja#resultJson
で
Google Feed APIで取得されるJSONデータにどのようなものが含まれるか確認できる
まずは、前回作成したものを実行
java script console を使うので
chrome で実行する
実行したときには何も表示されないけど
気にせずに
Ctrl + Shit + i で
java script console を起動して
一番右の
Console タブをひらく
k.(anonymous function).o
と表示されているので
左側の▼をおすといろいろと出てくる
この中の feed->entries
ここに、実際に Feed に対する
タイトル
URLなど、様々な情報が格納されている
このデータを使って
feed のタイトルを表示する
まずは表示領域の設定
var container = docment.getElementById(“feed”);
これで 要素を取得
また、表示する領域は
HTMLで div で作成する
今回なら
<div id=”feed”></feed>
となる
そしてfor で処理
for(va i=0; i<result.feed.entrues.length;i++){
}
こうすれば、中身のぶんだけ繰り返す
あと、内部処理のところで
var entry = result.feed.entries[i];
としているのは
長いから entry という変数に格納している
var div = docment.createElement(“div”);
これでプログラム側で div タグをつくれる
さらに、div.appendChild(document.createTextNode(entry, title));
今回はテキストを表示するだけなので
entry, title にしている
そして、
container に追加するので
container.appendChild(div);
とする

Google Feed API

Google Feed API
ドットインストールを参考に
Google Feed API を使ってみます
http://dotinstall.com/lessons/basic_google_feed_api/9102
を参考に開始
公式サイトは
https://developers.google.com/feed/?hl=ja
feed API はサイトの更新情報を取得できる
JSON XMLなどで取得できる
サンプルは、公式サイトの
Google Feed API Developer’s Guide
https://developers.google.com/feed/v1/devguide?hl=ja
を参照
そしてやることは
１、feed api のためのライブラリ読み込み
２、次に設定
３、ページが読み込まれたときに行う処理を記述
まずはライブラリの読み込み
<script src=”https://www.google.com/jsapi”></script>
google.load(“feeds”, “1”);
でロード
1 はバージョンになる
google.setOnLoadCallback()
で読み込まれたら実行する関数を指定
今回は
google.setOnLoadCallback(initialize);
この initialize は
function initialize(){
}
として作成する
この中の処理が実際に行う処理になる
まずは、何のフィールドを読み込むかURLで指定する
var feed = new google.feeds.Feed();
で設定
今回は
http://www.ideaxidea.com/feed
なので
var feed = new google.feeds.Feed(‘http://www.ideaxidea.com/feed’);
となる
読み込みは
feed.load();
でOK
このときに、読み込んだあとに実行することを関数で指定
今回は
feed.load(function(result){
});
となる
この function(result){}
の中でやるのが、まずはエラーチェック
if(!result.error){
console.log(result);
}
これで !result.error なので
エラーがないなら結果を表示するようになる

短縮URLの利用統計取得

短縮URLの利用統計取得
これは公式サイトの
Look up a short URL’s analytics
で確認可能

https://developers.google.com/url-shortener/v1/getting_started#url_analytics
curl ‘https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&projection=FULL’
というようにアクセスすることで
“shortUrlClicks”: “3227”,
というように、統計をみることができる
今回はGETでアクセス
ソース部分は
$url =’https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&projection=FULL’;
さらに apiKey を付けるので
$url =’https://www.googleapis.com/urlshortener/v1/url?shortUrl=’.$shortUrl.’&projection=FULL&key=’.$apikey;
というように、最後にベースURLに＆をつけて
apiKey を追加
また、
http://goo.gl/fbsS
はサンプル部分なので、
これを変数にかえます
この部分は短縮URLなので
$shortUrlへ変更しています
あとは、この$url の中身を取得したいので
$res = file_get_contents($url);
とする
でも、返ってくる値はJSON形式なので
デコードするので
$res = json_decode(file_get_contents($url));
というように
json_decocde() をつかう
この状態で一時確認したいのなら
var_dump($res);
exit();
とすれば結果を見れる
確認できたら、この２行はコメントアウト
そして、クリックされた数は
$clicks = $res->analytics->allTime->shortUrlClicks;
で取得結果を
$clicks へ格納している
クリック数自体は
$res->analytics->allTime->shortUrlClicks;
にある
ここまでできたら表示する
いちおうエスケープしておくので
h() をつかっておく
echo h($clicks);
で表示できる
また、短縮URLに　
＋　をつけると統計ページにとぶことができる
これは a要素を使うことでできる
<a href=”<?php echo h($shortUrl) . ‘+’; ?>” target=”_blank”>詳細</a>
というようにすれば
短縮URL＋
というようになる
http://dotinstall.com/lessons/basic_google_url_api/10408
ではいろいろと解析結果がでていたけど
ローカル開発環境の場合だと
クリックが反映されないようです
facebook アプリのときにもローカル開発環境では
iframe がなくなったりしたので
公開開発環境で行ったほうがよいのかもしれません

エスケープ処理とクリックイベント

エスケープ処理とクリックイベント
http://dotinstall.com/lessons/basic_google_url_api/10406
を参考に、短縮URL表示の続き
今回はエスケープ処理から
h()関数はPHP のネイティブ関数htmlspecialchars()の短縮表記
PHP h() などで検索するとわかりやすいかも
function h($s){
return htmlspecialchars($s, ENT_QUOTES, “UTF-8”);
}
ENT_QUOTES を指定することで、シングルクオートも エスケープ出来る
これについては
ENT_QUOTES 意味
で検索するとでてくる
今回は
http://phpspot.org/blog/archives/2008/01/phphtmlspecialc.html
を参考にしました
これができたら
echo $longUrl;
を
エスケープ処理したいので
echo h($longUrl);
というように変更する
h() の中に変数を入れている
次に、よくあるクリックすると全部選択状態になって
URLがコピペできるような状態にする
これは
input タグの中で
onclick=”this.select();” とつければOK
なので、input のところが
<input type=”text” value=”<?php echo h($shortUrl); ?>”>
から
<input type=”text” value=”<?php echo h($shortUrl); ?>” onclick=”this.select();”>
というように、最後にonclick がついている
this.select();
で全部選択という意味になる

短縮URL表示

http://dotinstall.com/lessons/basic_google_url_api/10405
を参考に、短縮URLの表示
curl_close();
ではオプションで
curl_close($curl);
というようにしないとエラーとなる
なお、最近Ubuntu デスクトップでもできるように
設定をしてみました
ソースの記述には
Eclipse + PDT プラグインで行っています
サーバー機能を追加したので
sudo apt-get install apache2
sudo apt-get install php5
sudo apt-get install php5-curl
でインストールしておきます
PHP がインストールされていないと
ソースが表示されるだけです
そして、続き
string(19) “http://goo.gl/B2vaF”
というように、返ってきた値が短縮URLになっている
これをHTMLへ表示する
[“longUrl”]=> string(33) “http://localhost/google/index.php” }
となっているのが
短縮前のURL
短縮URLは
$res の中の id に入っているので
これを変数へ格納する
$shortUrl = $res->id;
結果をHTMlで表示するには
echo を使う
$longUrl = ‘http://’ . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’];
というように変換前のURLをだしたいのなら
Original <?php echo $longUrl; ?>
というようにして
短縮URLを表示したいのなら
ShortURL <?php echo $shortUrl; ?>
というようにする
また、出力は入力欄の中にすることも可能
<input type=”text” value=”<?php echo $longUrl; ?>”>
というようにすれば
入力欄に
変換前URLを表示することができる