テンプレートを作る
読んでもらうために書いたものではないので、読みにくいと思います。
さらにデータを取得する
以前にこれを作っている。
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$.getJSON("https://spreadsheets.google.com/feeds/list/1kyJS7B6JAJzC_tXR2chDWvX8R7o1--C_-96IDFCWqu4/od6/public/values?alt=json", function(json){
console.log(json.feed.entry[73].gsx$_cn6ca.$t);
});
});
</script>
</head>
<body>
</body>
</html>どうやら1行目はヘッダみたいな扱いで、jsonから指定して読み込みっていうのはできなさそう。
1行目に日本語を入力してしまうと、その文字列がキーになってしまうので入れないほうがいいようだ。
_ciyn3がF列
_ckd7gがG列
_clrrxがH列
_cyevmがI列
_cztg3がJ列
$(function(){
$.getJSON("https://spreadsheets.google.com/feeds/list/1kyJS7B6JAJzC_tXR2chDWvX8R7o1--C_-96IDFCWqu4/od6/public/values?alt=json", function(json){
console.log(json.feed.entry[0].gsx$_ciyn3.$t);
console.log(json.feed.entry[0].gsx$_ckd7g.$t);
console.log(json.feed.entry[0].gsx$_clrrx.$t);
console.log(json.feed.entry[0].gsx$_cyevm.$t);
console.log(json.feed.entry[0].gsx$_cztg3.$t);
});
});出ますね。
jQueryはappendで出力できる。
append(content) - jQuery 日本語リファレンス
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$.getJSON("https://spreadsheets.google.com/feeds/list/1kyJS7B6JAJzC_tXR2chDWvX8R7o1--C_-96IDFCWqu4/od6/public/values?alt=json", function(json){
console.log(json.feed.entry[0].gsx$_ciyn3.$t);
console.log(json.feed.entry[0].gsx$_ckd7g.$t);
console.log(json.feed.entry[0].gsx$_clrrx.$t);
console.log(json.feed.entry[0].gsx$_cyevm.$t);
console.log(json.feed.entry[0].gsx$_cztg3.$t);
$("p").append(json.feed.entry[0].gsx$_ciyn3.$t);
});
});
</script>
</head>
<body>
<p>I would like to say: </p>
</body>
</html>動いた
実際のhtmlに合うようにする
$(function(){
$.getJSON("https://spreadsheets.google.com/feeds/list/1kyJS7B6JAJzC_tXR2chDWvX8R7o1--C_-96IDFCWqu4/od6/public/values?alt=json", function(json){
$(".name").append(json.feed.entry[0].gsx$_ciyn3.$t);
$(".change1").append(json.feed.entry[0].gsx$_ckd7g.$t);
$(".change2").append(json.feed.entry[0].gsx$_clrrx.$t);
$(".twpro_value").append(json.feed.entry[0].gsx$_cyevm.$t);
$(".nico_value").append(json.feed.entry[0].gsx$_cztg3.$t);
});
});当日の値を出力させるのを忘れていた。
スプレッドシートの方を直しておこう。
動かしてみると・・・
色を変えるjqueryが動かない。読み込みの順番の問題か。
→addclassもこのスクリプトに加えてしまえばいい
書き込んだclassが改行されてしまう
→前後の文字列も含めておけばいい
数値を文字列に変換する | 主にjQueryのメモ
文字列扱いにしておく。
var change_value = json.feed.entry[0].gsx$_ckd7g.$t.toString()
【JavaScript】～を含むかのチェック - Qiita
値が0なら±を付加、-が含まれればそのまま、それ以外なら+を付加、change2には（）を付加。
if(change_value == 0){
$(".change1").append('±' + json.feed.entry[0].gsx$_ckd7g.$t);
$(".change2").append('(' + '±' + json.feed.entry[0].gsx$_clrrx.$t + ')');
}
else{
if(change_value.indexOf('-') !== -1){
$(".change1").append(json.feed.entry[0].gsx$_ckd7g.$t);
$(".change2").append('(' + json.feed.entry[0].gsx$_clrrx.$t + ')');
}
else{
$(".change1").append('+' + json.feed.entry[0].gsx$_ckd7g.$t);
$(".change2").append('(' + '+' + json.feed.entry[0].gsx$_clrrx.$t + ')');
}
}値に応じてclassを付加する
addClass(class) - jQuery 日本語リファレンス
$(function(){
$.getJSON("https://spreadsheets.google.com/feeds/list/1kyJS7B6JAJzC_tXR2chDWvX8R7o1--C_-96IDFCWqu4/od6/public/values?alt=json", function(json){
$(".name").append(json.feed.entry[0].gsx$_ciyn3.$t);
//$(".change_lead").append('前週比');
$(".twpro_value").append('twpro検索数: ' + json.feed.entry[0].gsx$_cyevm.$t);
$(".nico_value").append('タグ「' + json.feed.entry[0].gsx$_ciyn3.$t + '」' + 'が付けられた動画: ' + json.feed.entry[0].gsx$_cztg3.$t + '件');
var change_value = json.feed.entry[0].gsx$_ckd7g.$t.toString()
if(change_value == 0){
$(".change_lead").append('前週比').addClass("even");
$(".change1").append('±' + json.feed.entry[0].gsx$_ckd7g.$t).addClass("even");
$(".change2").append('(' + '±' + json.feed.entry[0].gsx$_clrrx.$t + ')').addClass("even");
}
else{
if(change_value.indexOf('-') !== -1){
$(".change_lead").append('前週比').addClass("down");
$(".change1").append(json.feed.entry[0].gsx$_ckd7g.$t).addClass("down");
$(".change2").append('(' + json.feed.entry[0].gsx$_clrrx.$t + ')').addClass("down");
}
else{
$(".change_lead").append('前週比').addClass("up");
$(".change1").append('+' + json.feed.entry[0].gsx$_ckd7g.$t).addClass("up");
$(".change2").append('(' + '+' + json.feed.entry[0].gsx$_clrrx.$t + ')').addClass("up");
}
}
});
});
</script> 動きました。
