-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (151 loc) · 9.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<title>自治体ホームページレスキュープロジェクト</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style type="text/css">
body {
font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
.container {
padding-top: 50px;
}
.table tbody tr td {
vertical-align: top;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
font-size: 80%;
}
.navbar-default {
background-color: #21b776;
}
.navbar-default .navbar-brand {
color:#FFF;
}
.navbar-default .navbar-nav li a {
color: #FFF;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<a class="navbar-brand" href="#">自治体ホームページレスキュープロジェクト</a>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#about">プロジェクト概要</a></li>
<li><a href="#status">モニタリング状況</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>自治体ホームページレスキュープロジェクト</h1>
<p>被災者支援に必要な自治体<a href="#hpdef">ホームページ</a>からの情報発信をバックアップするためのプロジェクトです。</p>
<p>当初、大分県と熊本県の自治体ホームページを簡易調査した時に、いくつかの自治体ホームページにアクセス出来ない状況であったため、行政機関と連携して、暫定ホームページの立ちあげを目的に立ち上げたプロジェクトです。</p>
<p>現在のところ当時ダウンしていたホームページはすべて復旧しましたが災害は継続していると判断して、プロジェクトは継続することとなりました。</p>
<h2 id="about">プロジェクト概要</h2>
<p>プロジェクトには、大きく以下2つのパートがあります。</p>
<ul>
<li>モニタリング</li>
<ul style="list-style-type: none;">
<li>常時、自治体ホームページのモニタリングを行い、災害情報のバックアップを行います。</li>
<li>現在のモニタリングの状況の一部を本ページで公開しています。</li>
</ul>
<li>障害発生時の暫定サイト提供</li>
<ul style="list-style-type: none;">
<li>障害発生時には、災害情報モードで暫定サイトを構築して、自治体に提供します。</li>
<li><a href="http://itdart.jimdo.com/" target=_blank>暫定サイト（災害情報モード）のサンプル</a> <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></li>
</ul>
</ul>
<h2 id="status">モニタリング状況</h2>
<p>モニタリングを行っている情報の一部を一般公開させていただきます。今後、状況に応じた災害関連情報を随時追加する予定です。</p>
<h4>公開しているモニタリング情報について</h4>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">表示可否</div>
<div class="panel-body">
該当の自治体のホームページにアクセスし、内容が表示されたかどうかを示しています。具体的には、HTTPステータスコードが200以外の時には表示できないと判断します。
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">レスポンスタイム</div>
<div class="panel-body">
該当の自治体のホームページへの表示の時間を示します。具体的には、さくらインターネットのデータセンターから<code>curl -kL -w "%{time_total}"</code>で取得できる時間を表示しています。この数字はその大小に意味があるのではなく、あきらかに通常と異なるレスポンスタイムになった場合にホームページの異常を疑い、前もって対処するために利用しています。
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">最終更新日時</div>
<div class="panel-body">
該当の自治体のホームページが最後に更新された日時を示しています。具体的には、HTTPヘッダーのLast-Modfiledを表示しています。Last-ModifiedをHTTPヘッダーに含めないホームページの場合は空白となります。
</div>
</div>
</div>
</div>
<h4>現在のモニタリング状況</h4>
<div id="list"></div>
<div class="panel panel-info">
<div class="panel-heading"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 公共機関やNPO等支援団体の皆さんへ</div>
<div class="panel-body">
モニタリング＆暫定サイト提供を希望される方は<a href="https://docs.google.com/forms/d/1hIywPhg-Qa0GxqjN73DVob8lxYUrF1IGAbtEgveJgqQ/viewform" target=_blank>こちらのフォーム</a>からご連絡ください。
</div>
</div>
<p name="hpdef"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> ホームページ（HP）という用語は本来技術的にはWebサイトもしくはWebページと呼ぶべきであるが、自治体サイトでも良く用いられており、自治体職員などにも理解しやすいということで、このプロジェクトでは自治体ホームページと呼ぶこととしています。</p>
<p><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> このシステムは<a href="https://www.sakura.ad.jp/" target=_blank>さくらインターネット</a>よりサーバーを提供いただいております。</p>
<p>powered by <a href="http://itdart.org" target=_blank>IT DART</a></p>
</div>
<script>
$(function () {
$.ajax({
type: 'GET',
url: 'https://spreadsheets.google.com/feeds/cells/1LKh3qNLgi1G4bh486lrxOrphGnbQUPtw3opzdBMJUEE/2/public/values?alt=json',
dataType: 'jsonp',
cache: false,
success: function (data) {
renderForm(data.feed.entry);
},
error: function () { // 通信が失敗した時
console.log('error');
}
});
});
function renderForm(data) {
var target = $('#list');
var html = '<table class="table table-striped"><tr>';
var row = 1;
for (i = 0; i < data.length; i++) {
if (data[i].gs$cell.row == row) {
if (data[i].gs$cell.row != 1 && data[i].gs$cell.col == 3) {
// URLにアンカー処理
html = html + '<td><a href="' + data[i].gs$cell.$t + '" target=_blank>' + data[i].gs$cell.$t + '</a></td>';
} else if (data[i].gs$cell.row != 1 && data[i].gs$cell.col == 5 && data[i].gs$cell.$t != '◯') {
// 表示可否が☓のときに背景を変える
html = html + '<td style="background-color:#E0BDCE">' + data[i].gs$cell.$t + '</td>'
} else {
html = html + '<td>' + data[i].gs$cell.$t + '</td>'
}
} else if (data[i].gs$cell.col == 2) {
// 行頭で2列目なので県名列としてブランク列を追加する
html = html + '</tr><tr><td></td><td>' + data[i].gs$cell.$t + '</td>';
row = row + 1;
} else {
// 1列目にデータが入っている時の処理
html = html + '</tr><tr><td>' + data[i].gs$cell.$t + '</td>';
row = row + 1;
}
console.log(data[i].gs$cell.row + ' , ' + data[i].gs$cell.col + ' : ' + data[i].gs$cell.$t);
}
$("#list")[0].innerHTML = html;
}
</script>
</body>
</html>