acclist

by Sure Sure

HTML

<div class='container'>
  <div class='filters'>
    <div class='filter-container'>
        <input autocomplete='off' class='filter' name='元ユニット' placeholder='元ユニット' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='名称' placeholder='名称' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='ステータス' placeholder='ステータス' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='特化ダメージ' placeholder='特化ダメージ' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='特殊効果' placeholder='特殊効果' />
    </div>
    <div class='clearfix'></div>
  </div>
</div>
<div class='container'>
  <table id="accessoryStatusTable">
		<thead>
      <th width="5%">No</th>
      <th width="10%">元ユニット</th>
      <th width="15%">名称</th>
      <th width="20%">ステータス</th>
      <th width="20%">特化ダメージ</th>
      <th width="30%">特殊効果</th>
    </thead>
    <tbody>
    </tbody>
  </table>
  <br>
  <div>
    <a href="http://wedata.net/databases/rtd_accessory_lists/items">OpenDataBase@WeData</a>
    <P id="mess"></P>
  </div>

CSS

.actions a {
  display: block;
  margin: 25px auto 0;
  width: 200px;
  text-align: center;
  background: #b31d14;
  color: #c8c8c8;
  padding: 6px;
  border-radius: 3px;
  text-decoration: none;
}

.filters {
  margin-bottom: 10px;
}

.filter-container {
  float: left;
  width: 17%;
  padding-right: 5px;
}

.filter-container:last-of-type {
  padding-right: 0;
}

.filter-container input {
  -webkit-appearance: none;
  border: 1px solid #999;
  background: #FFF;
  border-radius: 2px;
  width: 100%;
  font-size: x-small;
}

.filter-container input:focus {
  outline: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th {
	white-space: nowrap;
  text-align: left;
  background: seagreen;
  color: white;
  font-size: x-small;
}

table th,
table td {
  padding: 4px 3px;
  font-size: x-small;
}

table td {
  border-bottom: 1px solid #087891;
  font-size: x-small;
}

table tr:last-of-type td {
  border-bottom: none;
}

table tr td:last-of-type {
  border-right: none;
}

.clearfix {
  clear: both;
  width: 100%;
}

a,
button,
p,
div {
  font-size: x-small;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

@media only screen and (max-device-width: 480px) {
  /* デバイス幅によって以下を適用 */
.filters {
  margin-bottom: 5px;
}

.filter-container {
  float: left;
  width: 15%;
  padding-right: 5px;
}

.filter-container input {
  -webkit-appearance: none;
  border: 1px solid #999;
  background: #FFF;
  border-radius: 2px;
  width: 100%;
  font-size: xx-small;
}
table th {
	white-space: wrap;
  text-align: left;
  background: seagreen;
  color: white;
  font-size: xx-small;
}
table th,
table td {
  font-size: xx-small;
}
a,
button,
p,
div {
  font-size: xx-small;
}

JavaScript

//データ強制更新ボタン
$("#resetData").click(function() {
  $("#mess").text("Reloding...");
  localStorage.removeItem("rtd_accessory_status_info");
  localStorage.removeItem("rtd_accessory_status_items");
  getAccessoryData();
});

//画面描画後処理
$(document).ready(function() {
  //データ取得＆テーブル生成
  getAccessoryData();
});

/*****************************************************/
//データ取得	getAccessoryData
//WeDataからJSONPで取得し、localstorageに格納する処理。
//処理完了後に後処理として「getAccessoryData_after()」を実行する。
//	[LocalStorage Key]
//		rtd_accessory_status_info : WeData基本情報。更新日等を保持。
//		rtd_accessory_status_items : ユニットステータスデータ本体。
/*****************************************************/
function getAccessoryData() {
  var flgNeedGetJsonData = false;
  var chkInfo;
  var chkItems;
  // ローカルストレージ対応判定
  if (!localStorage) {
    alert('ローカルストレージに対応したブラウザを使用してください。');
    flgNeedGetJsonData = true;
    retrun(false);
  } else {
    //LS存在チェック
    chkInfo = localStorage.getItem('rtd_accessory_status_info');
    chkItems = localStorage.getItem('rtd_accessory_status_items');
    if (!chkInfo || !chkItems) {
      flgNeedGetJsonData = true;
    }
  }
  //LSデータ更新確認（JSONP）rtd_accessory_status_info
  var url = 'http://wedata.net/databases/rtd_accessory_lists.json?callback=?';
  chkInfo = JSON.parse(chkInfo);
  $.getJSON(url, function(jsonAccessoryStatusInfo) {
    $("#mess").text("データ更新確認中...");
    if (flgNeedGetJsonData || (chkInfo['updated_at'] !=  jsonAccessoryStatusInfo['updated_at'])) {
      localStorage.setItem('rtd_accessory_status_info', JSON.stringify(jsonAccessoryStatusInfo));
      flgNeedGetJsonData = true;
    }

$("#lastUpdate").text("データ最終更新: " + jsonAccessoryStatusInfo['updated_at']);

    //データ取得が必要な場合
    if (flgNeedGetJsonData) {
      //データ取得（JSONP）
      //取得元：http://wedata.net/databases/rtd_accessory_lists/items
      var url = 'http://wedata.net/databases/rtd_accessory_lists/items.json?callback=?';
      $.getJSON(url, function(jsonAccessoryData) {
        $("#mess").text("データ取得実行中...");
  ...