各配信サイトのアイコンをつくる３

http://checker-site.hatenablog.com/entry/2015/12/07/002953
の続き。

YoutubeLiveも追加しちゃう。
カラーは#D50000

雑記

アーカイブについてどう考えるか
著作権と単純にサーバの負荷になる問題がありそう。

生配信チェッカーに必要な情報一覧(json)

生配信チェッカーに必要な情報一覧
http://checker-site.hatenablog.com/entry/2015/11/30/124107
↑の続き

jsonコードのテンプレート(途中)

{
	"total":{
		"id":"",
		"name":"",
		"gender":"",
		"isLive":"",
		"viewers":"",
		"lastDate":""
		"twitter":"",
		"twitter_id":""
	},
	"broadcast":[
		"ustream":{
			"isLive":"",
			"viewers":"",
			"title":"",
 			"description":"",
			"created_at":"",
			"id":"", //$arr['results']['id'];
			"channel_name":"",
			"user_name":"",
			"url":"", //$arr['results']['user']['url'];
			"archive_url":"",
			"snapshot":"",
			"lastDate":""
		},
		"twitch":{
			"isLive":"",
			"viewers":"",
			"title":"",
 			"description":"",
			"created_at":"",
			"id":"",
			"channel_name":"",
			"user_name":"",
			"url":"",
			"archive_url":"",
			"snapshot":"",
			"lastDate":""
		"niconico":{
			"isLive":"",
			"viewers":"",
			"title":"",
 			"description":"",
			"created_at":"",
			"id":"",
			"channel_name":"",
			"user_name":"",
			"url":"",
			"archive_url":"",
			"snapshot":"",
			"lastDate":""
		},
		"livetube":{
			"isLive":"",
			"viewers":"",
			"title":"",
 			"description":"",
			"created_at":"",
			"id":"",
			"channel_name":"",
			"user_name":"",
			"url":"",
			"archive_url":"",
			"snapshot":"",
			"lastDate":""
		},
		"youtubelive":{
			"isLive":"",
			"viewers":"",
			"title":"",
 			"description":"",
			"created_at":"",
			"id":"",
			"channel_name":"",
			"user_name":"",
			"url":"",
			"archive_url":"",
			"snapshot":"",
			"lastDate":""
		},
		"twicas":{
			"isLive":"",
			"viewers":"",
			"title":"",
 			"description":"",
			"created_at":"",
			"id":"",
			"channel_name":"",
			"user_name":"",
			"url":"",
			"archive_url":"",
			"snapshot":"",
			"lastDate":""
		},
		"fc2":{
			"isLive":"",
			"viewers":"",
			"title":"",
 			"description":"",
			"created_at":"",
			"id":"",
			"channel_name":"",
			"user_name":"",
			"url":"",
			"archive_url":"",
			"snapshot":"",
			"lastDate":""
		},
		"afreecacom":{
			"isLive":"",
			"viewers":"",
			"title":"",
 			"description":"",
			"created_at":"",
			"id":"",
			"channel_name":"",
			"user_name":"",
			"url":"",
			"archive_url":"",
			"snapshot":"",
			"lastDate":""
		},
		"cavetube":{
			"isLive":"",
			"viewers":"",
			"title":"",
 			"description":"",
			"created_at":"",
			"id":"",
			"channel_name":"",
			"user_name":"",
			"url":"",
			"archive_url":"",
			"snapshot":"",
			"lastDate":""
		},
		"hitbox":{
			"isLive":"",
			"viewers":"",
			"title":"",
 			"description":"",
			"created_at":"",
			"id":"",
			"channel_name":"",
			"user_name":"",
			"url":"",
			"archive_url":"",
			"snapshot":"",
			"lastDate":""
		}
	],
	"chat":[
		"ustirc":{
			"id":"",
			"channel":"",
			"topic":""
		},
		"juschat":{
			"id":"",
			"channel":"",
			"status":"1",
			"viewers":"0",
			"lastDate":"",
			"snapshot":""
		}
	]
}

データベースに情報を登録(mysql)

配信情報更新等

<?php

$db_sever = "DB Server domain";
$user_name = "user name";
$password = "password";
$db_name = "database name";
$table_name = "table name";

$encode = array();

if(isset($_GET['id'])){

	$mysqli = new mysqli($db_sever, $user_name, $password, $db_name);
	if (mysqli_connect_error()) {
		die('Connect Error (' . mysqli_connect_errno() . ') '
				. mysqli_connect_error());
	}
	$mysqli->query("UPDATE checker_broadcaster SET isLive = 1 WHERE id =" . $_GET['id'] );
	$mysqli->close();
}

TableSorterを使う

テーブルを並び替えるJavaScriptライブラリTableSorterを使ってみる。
http://tablesorter.com
内容は後日。

游ゴシックを使う

honokaを参考に游ゴシックを使えるようCSSを編集する
http://honokak.osaka

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.tooltip {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.popover {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

各配信サイトのアイコンをつくる２

background-colorを下記のようになんとなく設定。
Livestream #E91E63
Twitch #673AB7
Fc2live #9E9E9E
Hitbox #FF5722
Livetube #F0AD4E
Cavetube #5CB85C
Twitcasting #5BC0DE
Ustream #337AB7
ニコ生 #FFFFFF

色は下記URLを参照して決定した。
http://www.google.com/design/spec/style/color.html#color-color-palette

ついでにCSSでextra smallより小さいクラスも定義

.btn-checker,
.btn-group-checker > .btn {
  padding: 1px 3px;
  font-size: 8px;
  line-height: 1;
  border-radius: 3px;
}
.navbar-btn.btn-checker {
  margin-top: 14px;
  margin-bottom: 14px;
}
.btn-checker .badge,
.btn-group-checker > .btn .badge {
  top: 0;
  padding: 1px 5px;
}