こんにちは、ディレクターの荻野です。

Konel社内では今年から外部講師を招き定期的に勉強会を開催しています。1月から開始し、現在はWebのフロントエンド開発に関する勉強会を3回実施しています。今後はバックエンド編、電子工作編などテーマのバリエーションも増やしていく予定です。

今回の記事では勉強会の第1回目の内容にあたる、npmを使った環境構築手法を紹介したいと思います。

フロントエンド環境構築

1. なぜ環境構築が必要なのか
2. 開発環境の準備

- node.js(nodebrew)のインストール
- npmを使ったプロジェクト管理
- npmを使ったおすすめの開発環境・モジュールの紹介（詳細は次回以降）
  - scss:cssのコーディング簡易化 & ファイル分割管理
  - autoprefixer:ベンダープレフィックス付与の自動化
  - babel:jsのES2015(以降)への対応
  - minify:ファイル圧縮
  - browsersync:ブラウザの自動リロード & 外部機器でのアクセス
  - webpack:jsのモジュール管理(ファイル分割・依存関係解決)

次回以降は各モジュールの詳細な設定方法や使い方を勉強していきます。

内容の詳細はこちらに記載していますので興味がありましたらぜひお読みください。
https://github.com/zap-mueda/frontend-env/wiki/フロントエンド環境

＊Konelでは色々なジャンルで定期的に勉強会を実施しております。
外部の方でも大歓迎ですのですので参加したいという方はお気軽にメールかfacebookで私までご連絡ください。

Facebook : https://www.facebook.com/oginoyasu

Twitter : https://twitter.com/ogiyasu

Email : yasuhiro.ogino@konel.jp

こんにちは、ディレクターの荻野です。

最近、とあるアパレルの会社さまから「展示会で、SURFACEと外部ディスプレイを用いてインタラクティブなデジタルサイネージを実現できませんか？」というご相談を受けました。
具体的には、展示会のエントランスに設置し、SURFACEを操作すると大きな65インチのディスプレイに映像やアニメーションで説明が表示させるようなサイネージしたいとのことでした。

今回はその時の僕の思考回路と直面した問題、解決方法などをお話しできればと思います。

すぐ思いついたのはSURFACE + 別のPCでWebsocketで連動させる

僕がWebな人間なのか、話を聞いてパッと思いついたのはSURACEと別のPC（例えばMacBookなど）を外部ディスプレイをつなぎ、それぞれブラウザを開いてWebsocketサーバーを立てて動かす方法でした。

この時点でいくつか懸念点はあったものの、まずは実践しながら検証してみることにしました。

＊Websocketを使った簡単なアプリケーションの作り方はこちらの記事がとても参考になります。

[懸念点1] WiFiを経由するとタイムラグがあるんじゃない？

当初僕が考えていた構成では、クラウド上にWebsocketサーバーを立てて、WiFiを経由してSURFACEとMacbookを連動させる方法でした。ただ、この方法はWiFiを経由するので2つのデバイス間の通信にタイムラグが発生するリスクが非常に高いと感じました。代替案として同一WiFi内に2つをセットし、1つをサーバーとして利用する方法も検討しました。ただ、実はこの展示会は海外なので

・日本にサーバーを立ててしまうとより通信時間がかかってしまう

・そもそも安定したWifi環境があるか？すら不安。（仮にWiFiが会場で提供されたとして、それが落ちた場合僕らの意志ではどうにもなりません。）

・スケジュールの都合上海外に自分がいけないのでそこまで複雑なシステム構成を組める人間がいない

こんなリスクを考慮しながらサイネージの打ち合わせをその手のプロの方と相談していた時にその方の意見を聞いてふと思いつきました。

あれ、そもそもこれって2台PCいらないんじゃないか？

ついついSURFACEとディスプレイを別のデバイスと思い込んでしまいましたが、そもそもSURFACEからHDMIで外部映像出力ってできるんだからSURFACE1台で、その中にローカルサーバーを立ててしまえば完結するのでは？

実際に試したところ問題なくSURFACE1台で実現できそうでしたので、と次のステップでSURFACEにローカルサーバーを立ててみることにしました。

[懸念点2] SURFACEってWindowsだけど大丈夫かな？

そもそもMacには慣れているし、node.jsもちゃんと動くけどSURFACEってWindowsだけどちゃんと色々動かせるか不安でした。

node.jsだけでなく、実際に運用するにはgitも入れないといけないし、コマンドラインに慣れているのでGUIのgitは使いたくない。

ただ、調べるとこの2つの問題は以外とすぐに解決しました。

コマンドラインからリポジトリはpullできるし、nodeも問題なく動かせます。

（もちろん実際の開発はmacbookで行います。）

[懸念点3] ユーザーって余計なとこ押すよね。制御できる？

実際に展示する際にはGoogle Chromeをフルスクリーンにして展示する想定でしたが、最後に僕が懸念していたのがユーザーの余計な操作です。

“ユーザーは馬鹿だと思え”という格言がありますが、実際SURFACEを置いたところで、ユーザーがこちらの期待する操作だけをしてくれるわけはありません。SURFACEもiPhoneなどと同じうように、OS標準で右端や下からフリックすことでツールバーや通知センターが表示されます。また、Chromeもタブレットモードでも長押しで右クリックなどはできてしまいます。

この問題に関してはチームのエンジニアであるKenjiとTamaに調査を調べてもらったのですが

3- 1. ピンチやフリックなどブラウザ上の動きに関しては全てjsで制御できそう。

そもそもブラウザ上のeventであればjsですべて制御はできそうです。なのでchrome上の余計な操作は問題がなさそうでした。

3–2. OS標準の操作

通知センターやツルーバーなどのOS標準の機能はOSレベルで制御できるようです。

3–3. そもそもKIOSKモードっていう神モードがある

これはKenjiが見つけてくれたのですが、そもそもGoogle Chromeをサイネージに利用できるようにするためのモードがあるようです。

これを使えばKeyboardのショートカット以外の操作は受け付けなくなるので、ユーザーのどんな操作もキーボードがないSURFACEでは制御できてしまいそう。

[結論] 抱えていた懸念点は無事解決しました。

こんな流れで懸念点を解決し、現在無事実稼働に向けてコンテンツを作成しています。

まだ実稼働が成功したわけではないのですが、同じようなことを考えてる方がいれば参考になれば幸いです。

またプロジェクトが進行し、実稼働に向けて発見があれば随時情報を追加いたします。

長々とお読みいただきありがとうございました。