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