スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ChromeWebアプリ] キオスクモードでサイネージのコンテンツを作る

どもお久しぶりでーす。。。すっかりご無沙汰で、アカウントを忘れかけてたにょorz
つい先日、職場にChromeBookとChromeBoxが来たんですが、噂通り
ChromeBookはWiFi環境が無いとただの板
でしたね、うん(^◇^;)これで1万円台だったら買うんだけどなぁ~。
※2015/05/25追記:とか言いつつ、今年の3月に35000円でASUSのChromebook買いましたorz

ChromeBoxの方は、ある日突然東京本社から送られてきたのですが、
それ以前にデジタルサイネージのコンテンツ作成(「ゆう子でタッチ」とか)についての話がありまして、
多分、こんな記事を見た社長が「とりあえず送っとけw」みたいな感じでこっち来たのかなぁ~。。。と。

って事で、ちょっと仕事で勉強してたのもあり、ChromeWebアプリでサイネージのコンテンツを作るやり方をかるーくご紹介します。

Chromeウェブストアで公開中のサンプルはこちら↓
https://chrome.google.com/webstore/detail/digital-signage-sample%E3%83%87%E3%82%B8%E3%82%BF/cdidejmbjgeeodmioknejbbofiemafol?hl=ja

◆必要なもの
 Chromeブラウザ(が動けばタブレットでも何でも)
 テクストエディター

作り方はとても簡単で、HTMLが書ければ誰でも作れます。
JavaScriptが書けるなら、インタラクティブなコンテンツも思いのままです。
もちろんjqueryやその他諸々も使えます。
実際に作ったサンプルがありますので、こちらをダウンロードしてやってみてください。

https://drive.google.com/file/d/0B702QB7AnQ5LdVZ2SW9ra25PME0/view?usp=sharing

①まずダウンロードしたzipを解凍します。

②Chromeブラウザの設定から「機能拡張」を選択。
signagesample1.png

③デベロッパーモードにチェックを入れて、「パッケージ化されていない~」ボタンを押して①で解凍したフォルダを選択。
signagesample2.png

で、「起動」をクリックするとキオスクモードで表示されます。
全画面解除はキーボードで「Esc」キーを押してください。

あと作ってみて気づいた点を幾つか。

ChromeWebアプリでは、HTMLのソース内にインラインでjavascriptを埋め込む事はできません。
なので<script src="ほにゃらら.js"></script>
という感じで外に出さないといけません(CSSは外出ししなくてもおk)。

あとJavaScriptの記述方法がちょいと厳密のようです。
たまたま気づいたのがsetTimeout関数で、割とアバウトな記述をしてもWebブラウザでは動くのに、
ChromeWebアプリにすると動かない。。。なんてのがありました。
これについては色んな記述を試してみて、Webアプリで使えるのを見つける事ができましたが。

と言うことで、腰痛いので寝ます~ノシ
スポンサーサイト

Pagination

Utility

プロフィール

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。