こんにちは、ディレクターの荻野です。先日とあるプロジェクトでTinkerBoardという高性能小型ボードを利用する機会があったので今回はその時に知識ゼロからセットアップした方法をご紹介いたします。

(所要時間 : 2〜3時間程度)

TinkerBoardって何

今回はプロジェクト以下の要件を満たすプロダクトのプロトタイプを求められていました。

イメージでいうとAppleTVに近いプロダクトのプロトタイプです。

当然ですが、最初に浮かんだのはRaspberry Piですが、少し高スペックなものを求められていたので知り合いに聞いたところTinkerBoardをオススメされて購入。初めてなので色々含まれたスターターキットにして見ました。

購入したスターターキット
https://www.amazon.co.jp/dp/B0788HV6PX/ref=pe_492632_159100282_TE_item

ハードのセットアップ

セットアップに参考にしていた記事はこちらです。多分一番最初に出てきます。筆者さんありがとうございます。

ASUS Tinker Boardの初期設定(日本語表示、日本語入力など)
https://qiita.com/akino_shiki/items/7b82f42290f675780238

そういえばRaspberry Piも普段使ってるけどセットアップを1からした経験がないな、とおもいつつ、を箱を開いて、最終形を想像しながらハードをセットアップするところから開始。

まずは電源アダプタとUSBケーブルをつなぐ。コンセントにさして、USB側もTinkerBoard本体に接続。HDMIをディスプレイにつなぎ、マウス、キーボードをUSBに接続。ワクワクしながらケーブルにスイッチがついているのでonにしてみたが、赤いLEDがつくだけで何もおきず。

調べてみるとMicroSDカードにbootするOSイメージを焼いた後、スロットにさして起動する必要があるようです。MicroSDカードとそれを大きなSDカードにさせるようにするSDカードもスターターキットに含まれていたので早速SDカードにOSイメージを焼き付けるところから始めます。僕のMacBookにはSDカードリーダーがないのでここからの作業は会社のiMacに移動。OSイメージのダウンロードはここから行えます。

ASUS公式サイトでOSイメージをダウンロード
https://www.asus.com/uk/Single-Board-Computer/Tinker-Board/HelpDesk_Download/

セットアップで参考にしていた記事だと、おそらくRaspberry Piとかをある程度触った人向けの記事になっているのかこの辺の焼くフローが割愛されています。

イメージの焼き方はこのあたりの記事が参考になります。

TinkerBoardの起動まで
https://www.h-fj.com/blog/archives/2017/08/09-122053.php

Rasberry PIのイメージの焼き方
https://qiita.com/naoyuki_sugi/items/53c082807a03b1f119b2

ちなみにこの記事を書いている時点でASUSの公式サイトで配布されていたOSはVersion 2.0.5です。

Bootして初期設定

SDカードにイメージを焼いた後はTinkerBoard本体のスロットにSDカードをさして再度電源を入れると無事にOSが起動。ここからは最初に紹介させていただいた記事通り、以下の通り進めていきます。

ここまできて日本語入力で少し筆者さんもスタックしたようで、リンクにある通り以下の記事を参考にしました。

TinkerOSに日本語環境を設定する
https://signal-flag-z.blogspot.jp/2017/08/tinkerosjapanese.html

ここまでで初期のセットアップは完了です。ここから先は要件に求められている内容をチェックしていきます。

ブラウザの起動

TinkerBoardの公式OSでは標準Chromeの元になったChroniumというブラウザが含まれています。CHromeをインストールできるのかな、と思っていたのですが見た感じChromeに似ているので一旦これでOKとしました。
使って見て必要があればChromeがinstallできそうか調べて見ます。

音声入力

音声に関してはTinkerBoardは標準で音声入出力ができるので、HDMIに繋いでいる時点でYoutubeをみるとディスプレイから音楽が流れます。サウンド関連の設定はここから行いました。

Menu>Sound & Video>PulseAudio Volume Control

入力はヘッドセットをイヤフォンジャックにさした時点で、入力されているのがわかります。(設定画面で音声の入出力状況が見れます)

これで一旦要件を満たせそうなので設定を終了しました。

これから色々なことができそうでワクワクしています。TinkerBoard楽しめそうです。


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

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では制御できてしまいそう。

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

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

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

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

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

Yasuhiro Ogino

Technical Director / Co-Founder of Konel

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store