Skip to content

Commit 139d47a

Browse files
emahubemahub
committed
init
0 parents  commit 139d47a

12 files changed

+372
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎README.md

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# WINT (browser digital signage system)
2+
3+
これはブラウザだけで利用できるデジタルサイネージシステムです。画面にはコンテンツ表示部とニュース表示部の二つの表示部があることで複数の情報を配信することができます。表示できるコンテンツは画像だけでなくHTMLも表示でき、表示時に逐次コンテンツを取得するため内容が動的なコンテンツの表示も可能です。コンテンツ表示部とニュース表示部で表示する内容は表示スケジュールを一巡するごとに必要に応じて更新させるため、システムを止めずに表示内容を変更することが可能です。
4+
5+
## 設置方法
6+
7+
config.jsのcontentJsonUrlおよびnewsJsonUrlに表示スケジュールを示すJSONファイルのURLを記述し、このディレクトリをサーバ上に公開します。その後、Google Chromeで公開されたディレクトリにアクセスしてください。Google Chromeでのフルスクリーン表示はWindowsではF11キー、Macintoshではshift + command + Fで出来ます。
8+
9+
本システムでは、サーバサイドプログラミングを一切利用していないため、サーバ上での特殊な環境設定を必要としません。
10+
11+
## 設定の編集
12+
13+
config.jsにはスケジュールファイルのURLおよびコンテンツ部、ニュース部の表示内容切替時のアニメーションの設定などが記述されています。また、style.cssではコンテンツ部、ニュース部の文字、大きさ、余白の背景などを指定しています。環境にあわせてこれらの値を変更してください。
14+
15+
## スケジュールを指定する
16+
17+
コンテンツやニュースの表示スケジュールはconfig.jsのcontentJsonUrlとnewsJsonUrlのURLから得られるJSONの出力を元に解釈します。このJSONのフォーマットは下記のようになります。なお、本コード内ではこのJSONはファイルとして保持されているため時間経過に伴う変更はないスケジュールになっておりますが、別途、サーバサイドプログラミングでJSONを出力するプログラムを開発することでスケジュールを動的に変更できるようなシステムが完成します。
18+
19+
### コンテンツスケジュールのJSON仕様
20+
21+
[
22+
{
23+
"duration": 10,
24+
"type": "iframe",
25+
"url": "http://localhost/wint/sample.html"
26+
},
27+
{
28+
"duration": 10,
29+
"type": "img",
30+
"url": "http://localhost/wint/sample.png"
31+
}
32+
]
33+
34+
<dl>
35+
<dt>duration</dt>
36+
<dd>コンテンツの表示時間の長さ、単位は秒</dd>
37+
<dt>type</dt>
38+
<dd>iframeもしくはimg</dd>
39+
<dt>url</dt>
40+
<dd>コンテンツが存在するURL</dd>
41+
</dl>
42+
43+
### ニューススケジュールのJSON仕様
44+
45+
[
46+
"text1",
47+
"text2",
48+
"text3"
49+
]
50+
51+
## テスト環境
52+
53+
本プログラムはGoogle Chrome バージョン 25.0.1364.160(Mac OS X)にて起動を確認しています。
54+
55+
## ライセンス
56+
57+
MITライセンスに準じています。利用にあたってlicense.txtを参照してください。
58+
59+
## 開発・運用上の仕様
60+
61+
* コンテンツ、ニュースのスケジュールファイルは各スケジュールの最後の表示時に再取得します。そのためスケジュールの編集が即座に反映されるわけでありません。
62+
* コンテンツ部の表示の大きさは縦横比を保ったまま、画面を超過しないように拡大化しています。
63+
* スケジュールを示すJSONの取得にはキャッシュ対策のため、取得時にURLの末尾に「'?timestamp='+日時」もしくは「'&timestamp='+日時」を追加してURLを変更しています。デリミタが?であるか&であるかの判定は、スケジュールファイルのURLに?の文字が含まれているか否かで判定しています。
64+
* コンテンツを表示している際に、バックグラウンドで次に表示すべきコンテンツを取得する仕様になっています。このため、コンテンツ表示の段階でコンテンツを受信しないため、スムーズが画面の切り替えが可能になっております。稀にコンテンツの受信速度が遅いと次のコンテンツがスムーズに表示されないことがありますが、こういった場合はコンテンツを所有するサーバとの回線環境等を調整してください。
65+
* HTMLページの表示にはHTMLタグのiframeを用いています。そのため、表示先ページにてHTTPヘッダ"X-Frame-Options"が"deny"にセットされている場合、表示することができません。

‎boot.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>WINT - System Now Booting...</title>
6+
<!--[if IE]>
7+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
8+
<![endif]-->
9+
<style>
10+
article, aside, dialog, figure, footer, header,
11+
hgroup, menu, nav, section { display: block; }
12+
html{
13+
text-align: center;
14+
background-color: #fff;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<p>System Now Booting...</p>
20+
</body>
21+
</html>

‎config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
var contentFadeInTime = 700;
2+
var contentFadeOutTime = 700;
3+
var contentJsonUrl = "http://localhost/wint/content.json";
4+
5+
var newsEffectSpeed = 1000;
6+
var newsSwitchDelay = 10000;
7+
var newsEasing = "swing";
8+
var newsJsonUrl = "http://localhost/wint/news.json";

‎content.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
[
2+
{
3+
"duration": 15,
4+
"type": "iframe",
5+
"url": "http://localhost/wint/sample.html"
6+
},
7+
{
8+
"duration": 15,
9+
"type": "img",
10+
"url": "http://localhost/wint/sample.png"
11+
}
12+
]

‎index.html

+219
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<meta http-equiv="Content-Language" content="ja" />
7+
<meta http-equiv="Content-Style-Type" content="text/css" />
8+
<meta http-equiv="Content-Script-Type" content="text/javascript" />
9+
<link rel="stylesheet" type="text/css" href="style.css">
10+
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
11+
<script type="text/javascript" src="config.js"></script>
12+
<!--[if IE]>
13+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
14+
<![endif]-->
15+
<title>WINT</title>
16+
<style>
17+
* {
18+
margin:0;
19+
padding:0;
20+
}
21+
22+
html,body {
23+
height:100%;
24+
overflow: hidden; /* スクロールバー非表示へ */
25+
}
26+
27+
#content {
28+
text-align: center; /* コンテンツ画面を中心に配置 */
29+
}
30+
31+
#footer {
32+
line-height:0; /* 二つのspanの縦位置をあわせる */
33+
}
34+
35+
#footer > span{
36+
position: relative; /* スライドさせるアニメーションに必要 */
37+
}
38+
39+
iframe {
40+
border: 0;
41+
background-color:#fff;
42+
}
43+
</style>
44+
<script>
45+
var frame = {
46+
"iframe": ["#iframe0", "#iframe1"],
47+
"img": ["#img0", "#img1"]
48+
};
49+
50+
var dispId = 0;
51+
var dispType = "iframe";
52+
var prevType = "iframe";
53+
var loadType = "iframe";
54+
55+
var contentList = ["dummy"];
56+
var i = 0; // 表示中のコンテンツ番号
57+
var duration = 5; // コンテンツの表示時間
58+
59+
function resize(){
60+
target = frame[dispType][dispId];
61+
62+
scrWidth = $(window).width();
63+
scrHeight = $(window).height() - $("#footer").height();
64+
$("#content").css({"height": scrHeight});
65+
66+
if(dispType == "img"){
67+
imgWidth = $(target).width();
68+
imgHeight = $(target).height();
69+
70+
if( imgWidth/imgHeight < scrWidth/scrHeight ){
71+
// スクリーンに対して縦長
72+
$(target).css({
73+
"width": imgWidth * scrHeight / imgHeight,
74+
"height": scrHeight
75+
});
76+
} else {
77+
// スクリーンに対して横長;
78+
$(target).css({
79+
"width": scrWidth,
80+
"height": imgHeight * scrWidth / imgWidth
81+
});
82+
}
83+
} else if(dispType == "iframe"){
84+
$(target).css({
85+
"width": scrWidth,
86+
"height": scrHeight
87+
});
88+
}
89+
90+
var hspace = scrHeight - $(target).height();
91+
92+
$(target).css({
93+
"margin-top": hspace > 0 ? hspace / 2 : 0,
94+
"margin-bottom": hspace > 0 ? hspace / 2 + 1 : 0
95+
});
96+
}
97+
98+
$(window).load(function(){
99+
console.log("window load");
100+
resize();
101+
$(frame[dispType][dispId]).fadeIn(contentFadeInTime);
102+
});
103+
104+
$(window).resize(function(){
105+
resize();
106+
});
107+
108+
$(document).ready(function(){
109+
/* コンテンツ画面の実装 */
110+
function loadContent(data){
111+
contentList = data;
112+
console.log(contentList);
113+
}
114+
115+
$.getJSON(contentJsonUrl, null, loadContent);
116+
117+
var state = 0; // 0: load 1: change content 2: go to state0
118+
var passedsec = 0; // 経過時間
119+
120+
var timestamp; // JSON取得時のキャッシュを防ぐためにURLにtimestampを含ませる
121+
122+
setInterval(function () {
123+
passedsec++;
124+
125+
if(state == 0){
126+
console.log("load");
127+
128+
loadType = contentList[i]["type"];
129+
130+
$(frame[loadType][1-dispId]).attr('src', contentList[i]["url"]);
131+
132+
state = 1;
133+
if(i+1==contentList.length){
134+
timestamp = (contentJsonUrl.indexOf("?") == -1 ? "?" : "&")+"timestamp="+(new Date()).getTime();
135+
$.getJSON(contentJsonUrl+timestamp, null, loadContent);
136+
}
137+
} else if(state == 1){
138+
if(passedsec > duration - 1){
139+
state = 2;
140+
passedsec = 0;
141+
142+
console.log("change");
143+
dispId = 1-dispId;
144+
dispType = loadType;
145+
$(frame[dispType][dispId]).css({
146+
"width": "",
147+
"height": ""
148+
});
149+
resize();
150+
$(frame[dispType][dispId]).delay(contentFadeOutTime).fadeIn(contentFadeInTime);
151+
$(frame[prevType][1-dispId]).fadeOut(contentFadeOutTime);
152+
153+
prevType = dispType;
154+
duration = contentList[i]["duration"];
155+
156+
if(i+1==contentList.length) i = 0; else i++;
157+
}
158+
} else if(state == 2){
159+
if(passedsec >= 1){
160+
state = 0;
161+
passedsec = 0;
162+
}
163+
}
164+
}, 1000);
165+
166+
/* ニュースバーの実装 */
167+
function loadNews(data){
168+
newsList = data;
169+
console.log(newsList);
170+
}
171+
172+
var newsList = Array();
173+
var newsOrder = 0;
174+
var newsElm = ["#news0", "#news1"];
175+
var newsState = 0;
176+
var newsWidth = $("#footer").width();
177+
178+
$.getJSON(newsJsonUrl, null, loadNews);
179+
180+
$(newsElm[newsState]).css({left:(newsWidth),display:'block',opacity:'0'}).
181+
animate({left:'0',opacity:'1'},newsEffectSpeed,newsEasing);
182+
183+
setInterval(function(){
184+
$(newsElm[newsState]).animate({left:(-(newsWidth)),opacity:'0'},newsEffectSpeed,newsEasing);
185+
186+
newsState = 1 - newsState;
187+
188+
$(newsElm[newsState]).text(newsList[newsOrder]);
189+
newsOrder++;
190+
191+
if(newsOrder == newsList.length){
192+
timestamp = (newsJsonUrl.indexOf("?") == -1 ? "?" : "&")+"timestamp="+(new Date()).getTime();
193+
$.getJSON(newsJsonUrl+timestamp, null, loadNews);
194+
newsOrder = 0;
195+
}
196+
197+
$(newsElm[newsState]).css({left:(newsWidth),display:'block',opacity:'0'}).
198+
animate({left:'0',opacity:'1'},newsEffectSpeed,newsEasing);
199+
200+
},newsSwitchDelay);
201+
});
202+
203+
</script>
204+
</head>
205+
<body>
206+
<div id="container">
207+
<div id="content">
208+
<iframe id="iframe0" src="boot.html" scrolling="no" style="display:none;"></iframe>
209+
<iframe id="iframe1" src="boot.html" scrolling="no" style="display:none;"></iframe>
210+
<img id="img0" src="" style="display:none;"/>
211+
<img id="img1" src="" style="display:none;"/>
212+
</div>
213+
</div>
214+
<div id="footer">
215+
<span id="news0">WINT Information</span>
216+
<span id="news1" style="display:none;">news</span>
217+
</div>
218+
</body>
219+
</html>

‎jquery-1.9.0.min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎license.txt

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
The MIT License (MIT)
2+
Copyright (c) 2013 emahub
3+
4+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
5+
6+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7+
8+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
9+
10+
refer to: http://opensource.org/licenses/mit-license.php
11+
12+
---
13+
14+
The MIT License
15+
Copyright (c) 2013 emahub
16+
17+
�ȉ��ɒ�߂�����ɏ]���A�{�\�t�g�E�F�A����ъ֘A�����̃t�@�C���i�ȉ��u�\�t�g�E�F�A�v�j�̕������擾���邷�ׂĂ̐l�ɑ΂��A�\�t�g�E�F�A�𖳐����Ɉ������Ƃ𖳏��ŋ��‚��܂��B����ɂ́A�\�t�g�E�F�A�̕������g�p�A���ʁA�ύX�A�����A�f�ځA�Еz�A�T�u���C�Z���X�A�����/�܂��͔̔����錠���A����у\�t�g�E�F�A��񋟂��鑊��ɓ������Ƃ����‚��錠�����������Ɋ܂܂�܂��B
18+
19+
��L�̒��쌠�\������і{�����\�����A�\�t�g�E�F�A�̂��ׂĂ̕����܂��͏d�v�ȕ����ɋL�ڂ�����̂Ƃ��܂��B
20+
21+
�\�t�g�E�F�A�́u����̂܂܁v�ŁA�����ł��邩�Öقł��邩���킸�A����̕ۏ؂��Ȃ��񋟂���܂��B�����ł����ۏ؂Ƃ́A���i���A����̖ړI�ւ̓K�����A����ь�����N�Q�ɂ‚��Ă̕ۏ؂��܂݂܂����A����Ɍ��肳�����̂ł͂���܂���B ��҂܂��͒��쌠�҂́A�_��s�ׁA�s�@�s�ׁA�܂��͂���ȊO�ł��낤�ƁA�\�t�g�E�F�A�ɋN���܂��͊֘A���A���邢�̓\�t�g�E�F�A�̎g�p�܂��͂��̑��̈����ɂ���Đ������؂̐����A���Q�A���̑��̋`���ɂ‚��ĉ���̐ӔC������Ȃ����̂Ƃ��܂��B
22+
23+
�Q��: http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license

‎news.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[
2+
"text1",
3+
"text2",
4+
"text3"
5+
]

‎sample.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<html><body>sample.html</body></html>

‎sample.png

1.96 KB
Loading

‎style.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#content {
2+
background-color: #222;
3+
}
4+
5+
#footer {
6+
background-color: #000;
7+
color: #fff;
8+
font-family: "sans-serif";
9+
font-size: 24pt;
10+
height: 50px;
11+
padding-top: 26px;
12+
padding-left: 0.5em;
13+
}

0 commit comments

Comments
 (0)