こんにちは、ディレクターの荻野です。 Konel社内では今年から外部講師を招き定期的に勉強会を開催しています。1月から開始し、現在はWebのフロントエンド開発に関する勉強会を3回実施しています。今後はバックエンド編、電子工作編などテーマのバリエーションも増やしていく予定です。 今回の記事では勉強会の第1回目の内容にあたる、npmを使った環境構築手法を紹介したいと思います。 フロントエンド環境構築 なぜ環境構築が必要なのか 開発環境の準備 - node.js(nodebrew)のインストール - npmを使ったプロジェクト管理 - npmを使ったおすすめの開発環境・モジュールの紹介（詳細は次回以降） - scss:cssのコーディング簡易化 & ファイル分割管理 - autoprefixer:ベンダープレフィックス付与の自動化 - babel:jsのES2015(以降)への対応 - minify:ファイル圧縮 - browsersync:ブラウザの自動リロード & 外部機器でのアクセス - webpack:jsのモジュール管理(ファイル分割・依存関係解決)

こんにちは、ディレクターの荻野です。 最近、とあるアパレルの会社さまから「展示会で、SURFACEと外部ディスプレイを用いてインタラクティブなデジタルサイネージを実現できませんか？」というご相談を受けました。 具体的には、展示会のエントランスに設置し、SURFACEを操作すると大きな65インチのディスプレイに映像やアニメーションで説明が表示させるようなサイネージしたいとのことでした。 今回はその時の僕の思考回路と直面した問題、解決方法などをお話しできればと思います。 すぐ思いついたのはSURFACE + 別のPCでWebsocketで連動させる 僕がWebな人間なのか、話を聞いてパッと思いついたのはSURACEと別のPC（例えばMacBookなど）を外部ディスプレイをつなぎ、それぞれブラウザを開いてWebsocketサーバーを立てて動かす方法でした。 この時点でいくつか懸念点はあったものの、まずは実践しながら検証してみることにしました。