html5+jqueryを使った デジタルサイネージの実装事例
TRANSCRIPT
![Page 1: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/1.jpg)
HTML5+jQueryを使ったデジタルサイネージの実装事例
株式会社 四国新聞社英 誠一朗(Seiichiro Hanafusa)
![Page 2: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/2.jpg)
盆栽 新聞 ラムネ ジャーナリズム 山登り 茶道 香川
高松市 鬼無町 手品 酒 apple クラフトビール スバル AB型 営業 ハラミ 讃岐うどん 企業内担当者 マーケティング 戦略 サザン 肉食 美容 ラーメン チーズ 高専 マーケティング 丸顔 モバイルサイト ATOK 非スモーカー RedBull 営業 短髪 天気予報 M 釣り せっかち 既婚 普通二輪 シスアド ピンク ダイエット 筋トレ 観光振興 宴会幹事 営業 既婚 ANA COBOL Google 発注者...
自己紹介
![Page 3: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/3.jpg)
本セッションの内容
サイネージの紹介
サイネージで使えるHTML5の機能
jQueryによるアニメーション効果
総まとめ
![Page 4: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/4.jpg)
サイネージの紹介
![Page 5: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/5.jpg)
Wi-Fiの話
人を集める工夫
無料Wi-Fiスポットキー:0120084459(テロップで流している)
高松空港出発ロビー実験的に設置。現状はXHTMLの記述
![Page 6: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/6.jpg)
![Page 7: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/7.jpg)
![Page 8: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/8.jpg)
サイネージDEMOhttp://mango.shikoku-np.co.jp/SignageDemo/index.html
![Page 9: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/9.jpg)
ブラウザで作るメリット・使い慣れた技術を活用できる
・インターネット接続すれば、 リアルタイム情報も掲載できる
・タッチパネルであれば、<a>タグ で画面を簡単に遷移
・安価なハードウェアで実現可能
![Page 10: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/10.jpg)
サイネージで使えるHTML5の機能
![Page 11: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/11.jpg)
HTML要素の拡張
フォーム機能の拡張
Web Storage
File API
Indexed DB API
マルチメディア対応
マイクロデータ
ドラッグ&ドロップAPI
Web Workers
Server-Sent Events
Web Messaging API
Canvas
Web Socket
CSS3
オフライン対応
Geolocation APISVG
![Page 12: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/12.jpg)
HTML要素の拡張
マルチメディア対応
CSS3
オフライン対応
![Page 13: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/13.jpg)
HTML要素の拡張
マルチメディア対応
CSS3(Webフォント)
オフライン対応
![Page 14: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/14.jpg)
HTML要素の拡張
マルチメディア対応
CSS3(Webフォント)
オフライン対応
![Page 15: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/15.jpg)
<div id="headline">
<div id="telop">
![Page 16: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/16.jpg)
<section id="headline">
<section id="telop">
コンテンツブロックごとに <section> を利用
![Page 17: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/17.jpg)
<section id="telop">
<div class="page">
![Page 18: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/18.jpg)
<article class="page">
<section id="telop">
<header><h3>
<section> のなかでも記事に該当する内容は<article> で定義
<article> の上部で定型的に(お決まりで)出力する内容は <header> でまとめる
![Page 19: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/19.jpg)
<h2>(CSSで不可視化)
HTMLだけの状態
![Page 20: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/20.jpg)
<section id="headline">
<h1>(CSSで不可視化)
<h2>(CSSで不可視化)
<h2>(CSSで不可視化)<section id="kiji">
![Page 21: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/21.jpg)
<h2>(CSSで不可視化)
![Page 22: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/22.jpg)
<h2>(CSSで不可視化)
<section id="kiji"> <h2>(CSSで不可視化)
<article class="page">
<header>
<h3>
<article class="page"> 以下、繰り返し
![Page 23: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/23.jpg)
<p class="kiji_time"> <time datetime="2012-05-09T14:24+09:00"> 5/9 14:42 </time> 配信
</p><time> を利用
![Page 24: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/24.jpg)
HTML要素の拡張
マルチメディア対応
CSS3(Webフォント)
オフライン対応
![Page 25: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/25.jpg)
<audio src="test.mp3"></audio>
<video src="test.mp4"></video>
音楽/音声
動画
<video src="test.mp4" autoplay></video>
属性を指定することでデータ読み込み次第自動再生させるように設定可能
![Page 26: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/26.jpg)
<section id="opening"><div id="page0" class="page"><div style="position:absolute;
left:0px;top:0px; width:1024px;height:768px;"> <video id="opening_video" width="1024" height="768"> <source src="demo.mp4"> </video> </div> </div>
![Page 27: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/27.jpg)
VIDEOタグhttp://mango.shikoku-np.co.jp/SignageDemo/video.html
![Page 28: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/28.jpg)
videoタグ対応状況
When can I use「Video」http://caniuse.com/video
![Page 29: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/29.jpg)
PNG
GIF
JPG
画像圧縮フォーマットの一例
コーデック(codec)
![Page 30: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/30.jpg)
コーデック(codec)
動画 音声 コンテナー
H.264 AAC MP4
VP8 Vorbis Matroska
Theora Vorbis Ogg
![Page 31: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/31.jpg)
コーデック(codec)
動画 音声 コンテナー
H.264 AAC MP4
VP8 Vorbis Matroska
Theora Vorbis Ogg
この総称をWebMと呼ぶ
![Page 32: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/32.jpg)
MPEG-4/H.264 WebM/VP8 Ogg/Theora
IE 9 ○ × ×
Firefox 12.0 × ○ ○
Chrome 18.0 ○ ○ ○
Safari 5.1 ○ × ×
HTML5では標準コーデックを定めておらず
ブラウザによって対応はまちまち
![Page 33: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/33.jpg)
HTML要素の拡張
マルチメディア対応
CSS3(Webフォント)
オフライン対応
![Page 34: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/34.jpg)
・予期せず通信の切断
・キャリアによる計画停止
![Page 35: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/35.jpg)
データを保存するいくつかの方法
Application Cache
Web Storage API
Indexd DatabaseWeb SQL Database
![Page 36: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/36.jpg)
データを保存するいくつかの方法
Application Cache
Web Storage API
Indexd DatabaseWeb SQL Database
![Page 37: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/37.jpg)
Application Cache
・ブラウザのキャッシュ領域を利用して ローカルにファイルを保存しておくしくみ
・HTML、CSS、JavaScript、画像などを手軽に キャッシュ
・容量制限はデバイスに依存、古いものから 「ところてん式」に消される
・スマホでも有用。ロゴ画像、JSをキャッシュ することで3G環境でもダウンロード時間削減
![Page 38: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/38.jpg)
When can I use「Offline web applications」http://caniuse.com/offline-apps
![Page 39: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/39.jpg)
CACHE MANIFEST
#revision 201205110948
#キャッシュ対象コンテンツCACHE:
index.htmljs/jquery-1.4.1.min.jsjs/jquery.cj-object-scaler.min.jsjs/jquery-ui.jsjs/jquery.effects.drop.min.jscss/css1024x768.css
/css/img
offline.appcache 拡張子は.appcacheとする
CACHE MANIFESTで書き始める
ローカルにキャッシュするリソースを指定
ディレクトリー単位でも指定可能
![Page 40: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/40.jpg)
CACHE MANIFEST
#revision 201205110948
#キャッシュ対象コンテンツCACHE:
index.htmljs/jquery-1.4.1.min.jsjs/jquery.cj-object-scaler.min.jsjs/jquery-ui.jsjs/jquery.effects.drop.min.jscss/css1024x768.css
/css/img
offline.appcache
ファイルの一部を修正することで再キャッシュ
![Page 41: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/41.jpg)
Webサーバーが送信するMIMEタイプの設定は、「text/cache-manifest」
にしておく
<html manifest=”offline.appcache”>
htmlの開始タグにmanifest属性でファイル名を指定すれば導入完了
![Page 42: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/42.jpg)
オフライン環境デモhttp://mango.shikoku-np.co.jp/SignageDemo/
![Page 43: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/43.jpg)
「オフライン環境」のまとめ
データ容量や複雑さはApplication Cache < Web Storage < Indexed DB
というイメージただし、これらは組み合わせて利用されることも多い
比較的軽量なデータのサイネージでは予期せぬ通信の切断や不安定さの問題を避けるため
Application Cache の利用が有効
![Page 44: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/44.jpg)
HTML要素の拡張
マルチメディア対応
CSS3(Webフォント)
オフライン対応
![Page 45: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/45.jpg)
.page{ font-family: ‘RodinPro-EB’;}
![Page 46: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/46.jpg)
.page{ font-family:
‘IwaGNeesPro-Md’;
}
![Page 47: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/47.jpg)
Webフォントデモhttp://mango.shikoku-np.co.jp/SignageDemo/font1.html
![Page 48: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/48.jpg)
「Webフォント」のまとめ
・文字が大きいために フォントの違いが発揮できる。
・文字数が限られているために モバイル環境でもダウンロード 時間が気にならない。
![Page 49: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/49.jpg)
jQueryによるアニメーション効果
![Page 51: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/51.jpg)
jQueryとは
HTML
CSS
jQueryデザインに関する指定
操作、イベントに応じて変更
操作、イベントに応じて変更
![Page 52: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/52.jpg)
オススメ書籍
Web制作の現場で使う jQueryデザイン入門
西畑一馬[著]
![Page 53: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/53.jpg)
主なアニメーション機能メソッド 概要show 非表示になっている要素を徐々に表示hide 表示状態の要素を非表示にtoggle 要素の表示/非表示を交互に切り替えslideDown 非表示の要素をスライドさせつつ表示slideUp 表示中の要素をスライドさせつつ非表示にslideToggle スライドアップ/スライドダウンを交互にfadeIn 非表示の要素をフェードインfadeOut 表示中の要素をフェードアウトanimate 指定されたパラメータに従って動作
![Page 54: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/54.jpg)
div{width:200px;height:200px;background:red;display:none;
}
CSS
$(function(){$("button").click(function(){$("div").show("slow");});
});
JavaScript
<button>表示</button><div></div>
HTML
![Page 55: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/55.jpg)
div{width:200px;height:200px;background:red;display:none;
}
CSS
$(function(){$("button").click(function(){$("div").show("drop",{direction: "down"},2000);});
JavaScript
<button>表示</button><div></div>
HTML
![Page 56: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/56.jpg)
アニメーションのデモhttp://mango.shikoku-np.co.jp/SignageDemo/show.html
![Page 57: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/57.jpg)
jQuery DOCUMENTATION「UI/Effects」http://docs.jquery.com/UI/Effects
![Page 59: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/59.jpg)
この章のまとめ
CSSの知識があれば、何をしているのか直感的に理解できる。
プラグインを利用することでさらに魅力的なビジュアルエフェクトが使える。
![Page 60: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/60.jpg)
総まとめ
![Page 61: HTML5+jQueryを使った デジタルサイネージの実装事例](https://reader033.vdocuments.mx/reader033/viewer/2022050812/588db0f21a28ab82218bc961/html5/thumbnails/61.jpg)
総まとめ・ブラウザ等の動作環境を単一に絞れるために HTML+CSS+JavaScriptをフル活用できる
・大型テレビとパソコンがあれば、蓄えた スキルを活用してサイネージを構築できる
・フロントデザインの構築スキルとしてjQuery の知識は不可欠。デザイナーも習得が簡単