ナチュラル @rch850

ナチュラル丼発祥の地、福井からお届けします。技術的な話題とか、雑談とか。

Google 機械学習 勉強会 in 福井

Google 機械学習 勉強会 in 福井に参加してきたので、ざっくりとまとめ。

  • TensorFlow は「てんさーふろー」と読んでいた
  • MLKit は Firebase のほうから出てきたもので、あまり関係ないらしい
  • Cloud Vision API
    • 「ボケて」は Safe Search を使っている
    • Document で中国語っぽくなってしまった。言語指定できる? → 言語のヒントを指定するオプションがある
    • 課金単位(ユニット)は、API1コールではなく1認識。1コールで複数回認識することもある
  • Cloud Speech-to-Text
    • バッチでやるか、gRPC でのストリーミングでやるか
    • 15秒で $0.006 → 1時間で $1.44
  • Cloud Natural Language
  • Google I/O でのロボットアームを使ったデモ
    • チョコレートと言われたら word2vec (TensorFlow) で意味を認識して、それらしい甘いものを持ってくる
  • qwiklab を使ったハンズオン

マークアップ道場をやってみた

マークアップ道場って何って話ですが、いま思いつきでそう呼んだだけです。

前々から「出されたお題に対して HTML と CSS を書いてみる会」ってのをやってみたかったんですが、それを社内勉強会でやってみたという話です。

  • 参加者の規模は十数人
    • フロントエンドエンジニアもいるし、そうじゃない人もいる
    • 普段一緒に仕事をしてない人もいる
  • 1人が大きな画面に出しながらコーディング。周りから適宜ツッコミを入れる。
    • モブプログラミングってやつに近いのかもしれない
  • 環境整備とか考えるのが面倒だったので、コーディングの舞台は codepen

時間が15分ほどだったのと、参加者層が広かったのと、なにより初回でまだ感覚がつかめていなかったのとで、お題はかなり簡単なものを選びました。

お題1. 最近良く見るあれ

f:id:rch850:20180605233400p:plain

あれです。右側に固定サイズのボタンがあって、左側の文字のところが伸縮。全体的に上下中央揃えって感じです。

こういうのを見ると反射的に display: flex; align-items: center; justify-content: center; って書いちゃうんですが、オーバーキルな場合もありますね。

ウォームアップだったのでそこまで話も白熱せずに「まぁそうなるよね」みたいな形で終わりました。

お題2. ユーザーアイコン的なやつ

f:id:rch850:20180605233939p:plain

画像サイズのアスペクト比が 1:1 ではない可能性があり、かつアイコンの大きさが親の 10% といった相対で示されている場合という条件付きでやりました。要は ::after 要素の padding-top: 100% をやりたかったというわけです。

これはだいぶ盛り上がって、まず書いてる段階で background-size が思い出せなくて、「ここなんて書くんだっけー、誰か教えてー」ですぐに助けてもらえました。

そして ::after ってなんなん?って話と、なんで padding-top: 100% なの?って話は案の定。 padding が%指定の場合は、(ざっくり言うと)親要素の幅が基準となる。ということを仕様ベースで説明できたのは良かったです。

あとがき

今回は、最適解と言えるであろう書き方がわかった上でのお題だったわけですが、これがもっとぼんやりしたもので、人によって書き方が違って、新しい発見があるようなお題を選べば、また楽しいんじゃなかろうかと思いました。

ふくもく会その40と Oculus Go と A-FRAME

土曜のふくもく会その40では Oculus Go のブラウザで動かすコンテンツを書いて試していた。

参考にした記事はこちら

ブラウザから A-FRAME のサンプルを動かしてみたところ、まぁまぁ動く。でもコントローラは駄目。そしてなによりもこれ。

人に見せるのが難しい!!かろうじて撮れたのがこれ。ブラウザ右下の全画面になるボタン押した瞬間に録画が止まっちゃいます。

書いたコードはこれ

  • html に <a-box> タグとか書けば表示される
  • createElement で素直に要素作っても表示される
  • インタラクション部分書いてみたけど動かなかった
    • <a-animation attribute="rotation" begin="click" dur="2000" to="360 405 45"></a-animation>
    • <a-animation attribute="scale" begin="mouseenter" dur="300" to="2.3 2.3 2.3"></a-animation>
  • Oculus の WebVR のドキュメントovrweb: というスキームがあって、それで Carmel Developer Preview というブラウザで開けると書いてあったのだけど、開かなかった。おそらく Rift 向け? Carmel 側に URL 入れる所があればよかったのに。

インタラクション部分がちゃんと動くようにできるといいなと思いました。以上。

イラレはじめました

自分でチラシを作る機会が発生したので、Illustrator CC 単体で月々払いで使い始めました。

プログラミングと同じでまずは素振りだろうってことで、Adobe から来るメールやチュートリアルの中からいくつか試してみているところです。

f:id:rch850:20180415010309p:plain

チュートリアル中に「選択ツールを使って……」と書かれていて、どこにそんなツールがあるのか分からなくても、アニメーションGIFで操作が説明されているので助かりました。また、ショートカットが併記されていることが多いので、ショートカットを多用したい自分としてはありがたかったです。V とか Cmd + Shift + O とかは覚えました。普段と全く違った作業をしているので、気分転換になるし、楽しいです。

GitHub に push したら GitLab CI が回るように設定した

GitLab には、外部の git リポジトリをミラーして CI/CD を走らせる機能がある。GitLab のサイトの言葉を引用するとこうだ。

Connect your external repositories, and CI/CD pipelines will run for new commits. A GitLab project will be created with only CI/CD features enabled.

まず GitLab 側で [New project] から [CI/CD for external repo] の [GitHub] を選ぶ。

f:id:rch850:20180313213802p:plain

そうすると GitHub から取り込むリポジトリを選ぶ画面が開く。取り込みたいリポジトリの [Connect] ボタンを押せば設定できる。

こうして GitHub からミラーした GitLab のリポジトリはこのように Mirrored from ... と表示される。

f:id:rch850:20180313232805p:plain

不吉な The repository failed to update の表示が出てるけど、まぁそんなこともあるらしい。割りと頻繁に目にする気がするけど、まだ使い始めて数日なので、気長に様子を見ようと思う。

GitLab CI/CD 自体について、例えば.gitlab-ci.yml をどうやって書くかといった話は、話が長くなるので書かない。でも circleci/node:8-browsers が便利だということだけは言っておく。

GitLab 側に Repository mirroring というドキュメントがあるけど、これは CI/CD for external repo のことではなさそうだった。

Google Home にしゃべってもらう

「今から帰るよ」と連絡しても、それを見てもらうことなく家に着いてしまうことがよくあるので、見なくても分かるソリューションとして Google Home にしゃべってもらおうと考えました。

Google Home アプリからしゃべらせることができるだろうと高をくくってたんですが、できない。セキュリティ的な配慮なんですかね。

さーてこれはコードを書かなきゃだめかなと思って探して見つかったのが google-home-notifer という npm。こいつを入れて、サンプル同様に

// index.js

const googlehome = require('google-home-notifier')
const language = 'ja'
const deviceName = 'Google Home'

googlehome.device(deviceName, language)
googlehome.notify('もう寝ます', res => {
  console.log(res)
})

と書いて実行したら、すんなりしゃべりました。

$ node index.js 
Device "Google-Home-32文字の16進数" at 192.168.xx.xx:xxxx
Device notified

うん、すんなり。

後はこれを誰が実行するかという話になるわけですが、ネット上の情報では圧倒的に Raspberry Pi が多い。でも個人的には単体で WiFi 接続できる ESP-WROOM-02 推しなので、なんとかして動かせないかなと調べているところです。Johnny-Five を使えばいけそうなんですが、うまく入れられずに試行錯誤中。

もしかして頻尿で Mashup Battle 1stStage in 北陸敗退しました

トイレに行く回数が気になったので、トイレに行った回数を記録するためのデバイスを作ってみました。

磁石とリードスイッチを使ってチャックの開閉を検出し、データをサーバに蓄積する仕組みです。

hacklog.jp

で、これを持って Mashup Awards 2017 の Mashup Battle 1stStage in 北陸 に出てみました。

@運営さん たくさんの写真、動画をありがとうございました!

昨年の Internet of Tairyoku では惜しくも2位だったので、今年こそ、と思って挑みましたが、得票は1票。無念の敗退でした。

この作品について、コンセプト自体はだいたい実現できたので満足したのですが、実装に改善の余地がありありだなと感じています。ということで、ここでひとつふりかえり。

よかった事:

  • ESP32 というおもちゃを手に入れた
    • センサーの入力結果に応じて自作 API 叩くとか kintone に保存するとか Slack に通知するとかできた
    • Bluetoothバイスとして動かすことができた
  • これをきっかけに工具箱、工具、材料などを買い揃えることができた
  • kintone に毎分データを送って可視化するといい感じだった
  • 頻尿だけじゃなくて尿道結石にも使えるんじゃないのという意見をもらった

今後の課題:

  • 電池で動かすつもりが、消費電力に不安があって PC から USB 給電でのデモとなった
    • 電池で1日動くようにしたい。いや、1日と言わず一週間は動かしたい
    • リチウムイオン電池を使って小型化してみたい
    • deep sleep とやらを使ってみたい
    • 消費電力をちゃんと測りたい
  • ブラウザから操作できたら素敵なのでは
    • Web Bluetooth API を使ってブラウザから通信したかった
    • ESP32 側での実装方法を調べきれずにできなかった
  • 小型化したい
    • Wio Node を買ってあるので、それを使うとか
    • Bluetooth 使うなら開発ボード使わず生の ESP32 にチャレンジ?
  • リードスイッチに固定に難あり
    • チャックに磁石をくっつけるのは、セロテープでぐるぐる巻きにすれば大丈夫だった
    • リードスイッチは、よく外れた。デモでも外れた

このように課題山積です。個人的にほしいデバイスなので(現時点で頻尿ってわけじゃないです)、今後も作り込んでいきたいなと思います。