IM@S Engineer Talksで喋ってきた話のメイキングのおはなし #imas_hack

imas.connpass.com

IM@S Engineer Talksの30分枠で喋ってきた。 ライブのときの心拍数のログを取っているので,BDの再生と合わせて表示するアプリの話。ドキドキしているのはどの曲だったのか?

f:id:banjun:20180713211724j:plain:w480 f:id:banjun:20180713211959j:plain:w480

スライド

かわいいを支援するAppleハック,そして💓で振り返るシンデレラ5th / Apple hack assisting kawaii & Replay Cinderella Girls 5th LIVE with heartbeats - Speaker Deck

YouTube Liveのアーカイブ

IM@S Engineer Talks - YouTube

trebyさんに「今度長めに喋りませんか?」という話をされてから数ヶ月たち,ほんとに喋る機会をもらえたので,じゃあやるぞということで,追加の実装とかしつつスライドを作った。そのときの話を書く。

狙い

いつものLTのノリで作るとカタイ30分になるかもしれないと思い,遊びを入れていこうとしていた。最初に書いた,やりたいネタメモ:

  • そろそろスライドマスター変えたいけど
  • サブタイトルスライドは,しんげきのアイキャッチみたいな文字にしたい
  • サブタイトルスライドの端に,ありすの絵をいれていくか?
  • PhotoStudioPlayerありす付きにする?あとで出す?
  • 盛り上がり箇所いれたい

スライドマスターは最初にLTしたときにアクロスザスターズ風のヘッダーを置いて,そのままどこに出すときでも使っている。のでそろそろ変えたかったが,時間がとれなくて今回もそのままになった。でも他の項目は実現した。

アイキャッチ

f:id:banjun:20180713222552p:plain:w480

シンデレラガールズ劇場のアニメのアイキャッチがシンプルでかわいくて気に入っているので,スライドの区切りにいれる文字だけのサブタイトルスライドを,そういうテイストにすることにした。

f:id:banjun:20180713222620p:plain:w480

この背景かんたんにできないかな~と手元にあったPixelmator Proの機能をいじっていたところ,背景はGenerate系のフィルターのみで作れたので,そうした。ストライプをつくって傾けて星を置くだけ。パラメータをいじっただけで出来てしまった。

f:id:banjun:20180713223103p:plain:w480

Keynoteだけではフチが太い文字を作るのが難しいので,これもPixelmator Proでつくった。FillとStrokeで同じテキストを入れて重ねている。FillとStrokeを同時に設定したときの重ね順が,欲しい順序と逆なので,2レイヤー必要になってしまっているのが,おしい。

サブタイトル文字だけじゃなくてイラストもあったほうが明るくなると思う。ちょうど最近描いていた絵がいくつかあったので,それを使うことにした。足りない分はアイコン描いたときのものを持ってきたりした。目立ちすぎないように明るさを調整している。

これらのイラストはProcreateとApple Pencilで描いている。Procreateなので,イラストのメイキング自体はタイムラプスで録画できている。

imastodon.net

imastodon.net

登壇したあとで,イラストかわいいって言ってもらえて,とっても嬉しかった。

PhotoStudioPlayerでありすを出す

PhotoStudioPlayer (デレステフォトスタジオのリアルタイム透過プレイヤーをつくった - ツバメになったバリスタ) の話も少しだけしようと思い,でも新規ではないので長い話にしないために,デモを兼ねて,途中からスライドと一緒に表示しておくことにした。

そのままではKeynoteのプレゼンモードの上には出なかったが,id:mzp がそれより前面に出すようにPRをくれたので,Keynoteの上に出した。

Release 0.8.0: Front Row · banjun/PhotoStudioPlayer · GitHub

盛り上がり箇所をつくる

imas_hackのLTでは,ペンライトを振ったりUOを振ったり,急に \かわいい!/ コールがあったり,ということが起きる。 前回のLTでは,PhotoStudioPlayerでありすを出したときにいろんなコールをもらって楽しかったので,今回もやってみたいと思った。発表順2番目で最初のほうだし。おそらくライブ慣れしているみんなも声を出したいのだろうと思う。声出したいよね?

ちょうどその週にひなたが誕生日だったので,画面に大きく出して,おめでとうを言ってもらった。みんな優しい。。。本当にありがとう,ありがとう。

そしてPhotoStudioPlayerでありすを出すところ。流れで,はい出ました,ってやるよりも,みんなで呼び出してみたい。「せーの」\\ありすちゃーん// で出せて,楽しかった。とはいえもうちょいスムーズに出せるように準備しておいたらよかった。

他のこまかいこと

そんなふうに作っていたら楽しくなってきて他にやったこと

スシロータイムライン

f:id:banjun:20180713230210p:plain:w480

これは今回作った,ライブフォトの歴史に関して世界で一番情報濃度の高いタイムライン。

f:id:banjun:20180713230826j:plain:w480

3軸の流れを並行して見せたかった。進んでいく形式のUIといえば,デレステの「ススメ!シンデレラロード」イベント(通称「スシロー」)。 というわけで,それっぽいブロックを並べた。ブロックの色には特別な意味はなくふんいき。Keynoteで四角シェイプをeditすると平行四辺形にできるのでちまちまとコピペして並べた。

Keynote+Apple Pencil

f:id:banjun:20180713231530p:plain:w480

他の勉強会で,iPadKeynoteだとApple Pencilで直接絵を描きこめるというのをみたので,いくつかのページはそれで描いてみた。 特に,自由な矢印を描くときには,スッと描けていい感じだった。iCloudで共有しておけば,ほぼ,同時というか交互に,Macで編集し,iPadで描きこむ,というのができた。

会場やtwitterハッシュタグでいただいたフィードバックなど

メイキングはここまで。

登壇して,たくさん質問&フィードバックをもらえて嬉しかった。ありがとうございます。

  • 心拍数グラフ側から再生位置指定したい
  • AppleScriptでは出来ないか?
  • YPTとか絶対特権とか終わったあとに心肺止まっているのでは?(グラフがないところがある)
  • CNNが必要では,ない,よね
  • 心拍数だけじゃなく加速度とかとって,動いてないのにドキドキしてるとか分かるかも
  • みんなの心拍数をシェアしたら,みんな高いところとか,みんなが高いのに自分が低いとか,みえそう
  • 絵がかわいい
  • (就職したら) Watch買います
  • どうして心拍数をとりはじめたのか

さらにフィードバックありましたらぜひ: https://quesdon.rinsuki.net/@banjun@imastodon.net

どうして心拍数をとりはじめたのかについては,たしかになぜ・・・,と考えてしまったが,記憶がガバガバで分からなかった。 日記などを掘りかえした事実からは,シンデレラ4thではワークアウトにせずに心拍数アプリで取れたぶん(=取りこぼしの期間が長すぎる)でチェックしていて,年を明けて2017年から,ワークアウトで記録しはじめていた。

そして残りのツアーBDの確認へ

imastodon.net

翌週には5thの静岡のBDが届いた。これも「頭にYPT」の心拍数パターン。まだまだ残りも届くので楽しみ。