rch850 の上澄み

技術的な話題とか、雑談とか。タイトルを上澄みに変えました @ 2020/09/02

Mashup Summit 2019 と SPRESENSE ハンズオン

ma_2019 ma_summit2019

今年入ったあたりから、ようやく Scrapbox 多用し始めて、今日もプライベート Scrapbox にガシガシ書いてたんですが、外に出せるものを書いていきますね。

そもそも外に出せるもの、めちゃくちゃツイートしてたのですが、それはそのうち togetter に上がるでしょう。

Mashup Summit 2019

今年もやってきました Mashup Summit 2019。

  • 伴野さんの「"オープニングセッション" ～最新IT技術と最新ツクリビト～」改め、MAを通じて見るツクリビト
    • 求める作品像が「作りたいもの、トガったもの、振り切ったもの」と明示されるようになったのはありがたいです。（今日が初出ではない話）
    • いつも出てくるハイプサイクルの話、今回初めてソースを見にいきました。
  • SONY 小林さんの「Deep Learningのもたらすゲームチェンジとモノづくり」
  • パネルディスカッション
    • はい、モデレーターでした。
    • 昨年もモデレーターを務めたのですが、その後ある方から「学生、子どもとして接するのはあまりプラスにならないのでは？」といった意見をもらい、それを噛み締めての進行でした。という裏話。
    • 個人的には30分でも1時間でも話を聞いていたかったです。特にパネリスト同士で質問してもらうコーナー。パネリスト同士で自然と盛り上がってもらうのが良い。
  • 金子さんの「Facelot アイデアを包囲せよ」
    • Facelot
    • 消極性、意識決定に興味があるとのことで、個人的に興味があるところに近いなと感じました。僕が日々気にしているのは、アニメ画像が目に入った瞬間の人間は、眉をひそめる人間と、口角が上がる人間の二種類しかいないのではないかということです。無意識の意思表示です。消極的な意思決定とは離れているけど、重なるところがあるような気がする。
    • タイトルの「アイデアを包囲せよ」は、「問題意識のストック」と「技術のストック」で包囲しておくことで、アイデアが作品に昇華していくという意味だったようです。
  • 興梠さんの、作品を作ったら発表するといいぞという話
    • 承認VUI
    • 自分のために作った VUI ということで、自分が年末に取り組んだ Google Home でのゴミ分別に重なるところがありました。
    • 俺得俺得という語彙力無い状態から、VUI の良さを言語化して他人に説明できるようになったというのは、作って発表した成果なんでしょうね。
  • 山本大策さんの「MAKE 〜開発者にとっての「ものづくり」の意義とは」
    • 昨年の FESTA での発表のだいたい再演（当時の資料）。資料は当時と少し違っていました。
    • （個人的に）大事なことは、この2枚のスライドに詰まってる。たしか MA7 あたりのポスターの一言「あなたの中のエンジニア、眠っていませんか？」と通じるものがある。
    • f:id:rch850:20190317010731p:plain
      充実感のある働き方
    • f:id:rch850:20190317010512p:plain
      開発者としての生きがい

以上、最後の2枚だけでもお腹いっぱいなイベントでした。

SPRESENSE ハンズオン

Mashup Summit が午後で、午前中に SPRESENSE ハンズオンがありました。

このツイートから導入、ハンズオンの流れは追えるので、これをもって発表と変えさせていただきます。

以上、3月16日のイベント参加レポートでした。

Scrapbox に web-design-clipping を作った

Design Scrapbox

最近、ウェブデザインのことを考えることが多くて、他者の事例をまとめておきたいなと思うようになりました。

どうやってまとめたものかなと考えた結果、web-design-clipping という Scrapbox を作って色々入れてみることにしました。

なんか見てるだけでも楽しいぞこれ。

  • MicroInteraction とか Skeleton とかタグ振って貼り付けてます
  • 動画は GIF に変換してから貼り付けてます。
    • ffmpeg -i screenshot.mov -vf fps=fps=30 screenshot.gif
    • ffmpeg -i screenshot.mov -vf fps=fps=30:w=iw/2:-1 screenshot.gif （大きすぎて半分にスケールするとき）

こう見てみると、一言にデザインといっても、画面全体よりはパーツのことを考えているなと思いました。

なんかうまいまとめ方が分かりませんが、気が向いたら上げていこうかと。

なぜ Scrapbox か

あるスクリーンショットについて、複数の側面から見ることができます。

  • どのサイトのものか
  • どういう用途のものか
  • どういうキーワードで語られるか

これらについてタグ付けをして、まとめて見たいと考えていたので、Scrapbox を選びました。便利です。ありがとう Scrapbox。

コミュニケーション手段何がいいかって話のメモ

高専カンファレンスのコミュニケーション手段が ML しかなくて、他に何がいいかって話をした時のメモ。Discord あまり使ってなくて万能なんだろうと思い込んでたんですが、Slack と比べて困るところが少しあると聞けて有益でした。自分が Discord 使うのって、ISUCON での連絡手段ぐらいなんですよね。

Slack:

  • ワークスペースごとにプロフィールを変えられて良い
    • Discord の話の裏返しです

Discord:

  • 新しいサーバに入るのにアカウント作らなくていいから楽
  • 全部のサーバでプロフィールが共通だから、あるサーバでネタが通じるアイコンでも他サーバでは謎ってことが起きる
    • 個人的に全く意識したことがなかったので、なるほどオブ・ザ・デーでした
  • スレッド無いのがつらい

Gitter:

  • 「「「知らない」」」
  • ログインしなくても会話が見える
  • 日本語対応してない！

Gitter 話しても分かってくれる人少なくて寂しいです。GitLab が買収した時にちょっと話題には上がったと思うんだけど。でも日本語対応してないのはネックですね。

M5StackからAITalkを呼び出してしゃべらせる

M5Stack

引き続き M5Stack ネタです。

先日の MA 作業回で AITalk Web API を試用させてもらえることになったし、せっかくだから M5Stack にしゃべらせてみるかーということで、やってみました。

あっさり簡単そうに書きましたけど、そこそこつまづきながら、なんとかしゃべらせるところまでたどり着きました。

  • M5Stack のサンプルには PlayMP3FronSDToDAC など、ストレージからの読み出ししかなく、HTTP 経由で取得するサンプルが見当たらない。
  • StreamMP3FromHTTP がそれっぽいと思いきや、微妙に違っていて、それが分からずしばらく詰まる。
    • このサンプルが使っているのは AudioFileSourceICYStream だが、これはストリーミング再生用らしく、普通に MP3 を取得するなら AudioFileSourceHTTPStream を使う。
    • このサンプルが使っているのは AudioOutputI2SNoDAC だが、M5Stack では AudioOutputI2S を使う。使い方は PlayMP3... のサンプルのほうにある。
  • この違いに気づかずに、さては MP3 がだめで AAC なら行けるのかと勘違いし、余計に迷い込んでしまう。違いに気づいて直してもうまく再生されなくて、もしかして MP3 に戻せばいいのかと試してみたら再生された。

ソースはこちら: M5Stack-sandbox/AITalk.ino at master · rch850/M5Stack-sandbox

ちなみにテキスト表示をセンタリングするのに M5.Lcd.setTextDatum(MC_DATUM) を使ってます。これを見つけるまでの流れは

  • M5.Lcd で使えるいい感じの関数を探しに M5Stack.h を眺める
  • Lcd は M5Display クラスとなっているので M5Display.h を眺める
  • M5Display クラスは TFT_eSPI クラスを継承しているので In_eSPI を眺める
  • drawCentreString という気になる名前の関数が見つかったが Deprecated, use setTextDatum() and drawString() と書かれている

という流れで、setTextDatum でセンタリングできそうだという事が分かったわけです。他にも M5.Lcd で使える色々な関数が In_eSPI にあったので、どんどん使っていきたいところです。

ふくもく会その45

ふくもく会 M5Stack

スマートジョッキ開発するぞと意気込んでふくもく会その45に参加してきました。featuring MashupAwards です。

1日目

ジョッキに M5Stack つけていい感じにしようと考え、そのために M5Stack の機能を色々試してました。

  • M5.Speaker.beep() で音がなるけど、かなり音が大きい。サンプルの Basic > Speaker を参考にした。
  • サンプルの Advanced > Display > All_Free_Fonts_Demo に、フォントを選ぶ方法があった。
  • サンプルの Modules > MPU9250 > MPU9250BasicAHRS に、加速度センサなどの値を取る方法があった。

あと VSCode に Arduino の拡張を入れて、VSCode だけで開発ができるようにしました。ボード選択したりシリアルポート選択したりと、Arduino と同じことができて、シリアルモニタまでついてて、すごかったです。

隣では @macoshita がアンパンマンを表示させてました。

2日目

午前中は AITalk を触ったり、持ち込んだジョッキや M5Stack の紹介 LT をしたりしてました。

昼食のピザを食べたあと、さて何作るんだっけ？という話をしばらく。

  • 役に立つよりは面白いものを作りたいよねー
  • ゲームは色々思いつくけど、本当に操作しやすいものとなると限られてきそう
  • 両手にジョッキ、頭に Oculus Go つけてアイススケートしたい

とかなんとかで、とりあえずジョッキに M5Stack 付けるところから始めようかってことでホームセンターに買い出し。

適当な太さ、長さのゴムを買って帰ったら、 @kotobuki555ing から「ちょっと MA に登録されてる作品見てみて」と。言われたとおり見てみたところ、スマートグラス e幹事がジョッキに M5Stack で見事にかぶってました！乾杯検出とか地味に難しそうだと思ってたところとか、見事にクリアされてました。作者は MA で見かけたことがあるaNo研さんでした。さすが。

うーん、素晴らしいですね。脱帽。ここまでかぶってるところに正面からぶつかるのもなーというわけで、ひとまずはゲーム方面に行くことにしました。

とりあえず M5Stack のサンプルのテトリスを、加速度センサで操作できるようにして、ジョッキに付けた M5Stack でプレイしてみました。

が、操作がなかなかに難しい。左右にジョッキを捻ってブロックを動かすようにしたんですが、これが直感的なようで直感的ではないんじゃないかと。ジョッキをかなり傾けるとブロックが加速するようにしたことで、飲み終わりにさしかかると難易度が上がるようになり、ここはいい感じになったのではないかと思います。

まだまだ M5Stack でできることのほんの少ししかできてないので、他の機能も色々と使い込んで行きたいなーと思いました。

Google 機械学習 勉強会 in 福井

Report GCP

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 が％指定の場合は、（ざっくり言うと）親要素の幅が基準となる。ということを仕様ベースで説明できたのは良かったです。

あとがき

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