FAKELOG

思うがままに書き殴るブログ

GIF アニメを手軽に作って共有しよう!

やぁやぁ! 皆さん、今日も GIF アニメ作ってますか?

今回は、GIF アニメを手軽に作れるイイカンジのアプリを見つけたので、ご紹介したいと思います。

ってかさ、GIF アニメなんて何に使うのよ?

いやいや、アプリの挙動を共有するときにね、めっちゃくちゃ使うんすよ!

例えば、こうっ!

https://user-images.githubusercontent.com/572020/30850769-8d19cc74-a2e1-11e7-9a85-e9316b66a5a6.gif

そして、こうっ!

https://user-images.githubusercontent.com/572020/30210826-08d75c9e-94d9-11e7-968c-2aead4684c1f.gif

キッズスターは、知育アプリの会社ですんで、プルリクを作ったとき、こうして GIF アニメを貼っておくと、アプリがビルドされることを待つことなく、現状、こういう感じで実装されてるんすよー!と、挙動を確認してもらうことが出来るようになります。

なるほど、便利っ!

デザイナーさんに挙動を確認してもらうときも、隣りの席に赴いて「ねぇねぇ!」と肩を叩かなくても、GIF アニメを貼ってメンションを飛ばすだけでヨイのです。

GIF アニメ作成アプリと言えば!

割りと定番で、今までずっと利用して来た LICEcap というアプリがあります。

f:id:fakestarbaby:20180206012219p:plain

最低限の機能しか有していませんが、サクッと、GIF アニメを作るには、最適なアプリなんですよね。

・・・しかーし!

サブディスプレイと相性が悪い

最近、サブディスプレイを導入して、意気揚々としていたんですけど、あるとき、Unity の Game View をいつものように録画して GIF アニメを作成したら、なんと・・・

f:id:fakestarbaby:20180206011846g:plain

真っ黒い画面とカーソルしか写っていませんでした。気持ち悪さある。

色々と調べてみたら、どうやら、サブディスプレイと相性が悪いようで正しく動かないみたいでした。サブディスプレイ側の録画がダメなら、メインディスプレイ側ならイケるのでは?と踏んで試してみたのですが、結果は変わりませんでした。

なんてこったい!

早速、ググります!

すぐにでも、プルリクに GIF アニメを貼りたかったので、とりあえず、ググってみました。そして、見つけました!

f:id:fakestarbaby:20180206012036p:plain

アイコンがアレっぽさありますが、イマドキ感が出ていてイイカンジそうです。

「Gifox」ヨサソウ!

早速、無料版をダウンロードして試してみることにしました。

f:id:fakestarbaby:20180207031905p:plain

最初からショートカットキーが割り当てられているので、「⌘ + Shift + 5」で録画範囲を切り取れます。

f:id:fakestarbaby:20180207031954p:plain

そして、この状態で「Space」で録画を開始出来ます。

f:id:fakestarbaby:20180207032050p:plain

そして、「⌘ + Esc」で録画を終了出来ます。

f:id:fakestarbaby:20180207033055p:plain

メニューバーにあるアイコンから、スッと、作成した GIF アニメにアクセス出来ます。過去に作成した GIF アニメにもアクセス出来るようですね。

そして、この状態で、GIF アニメをおもむろに、プルリクのコメント欄にドラッグしてみると・・・

f:id:fakestarbaby:20180207032257g:plain

はい、貼れたぁ〜!

シンプル!

ヨイ〜!ヨイのでは〜!

サブディスプレイ側でも、問題なく、録画して GIF アニメを作成することが出来ました!

無料版は録画 10 秒の制限アリ!

どうやら、無料版では 10 秒までしか録画出来ないようです。試しに、アプリの挙動を録画してみましたが、余裕で 10 秒を越えることが判明しました。つまり、尺が足りない・・・。

ということで、思いのほか、ヨサソウな挙動だったし、何より、今すぐにでもプルリクに GIF アニメを貼りたかったので、有料版を買いました。と言っても、$5 でクソ安いです。

サヨナラ LICEcap!! ヨロシク Gifox!!

長年愛用して来ただけに、別れは悲しいものですね。Gifox ヨロシクね!とか言っておきながら、まだ、そこまで使い込んでいないので、実は何かあるかもですけど、今のところ、イイカンジです。

残り時間を可視化しよう!

見えない時間とどう戦うか

会議中、ついつい、議論が白熱してしまって、気が付いたときには、残り時間はもうわずか・・・なんてこと、ありませんか?弊社では、まぁ、よくあります。一時期に比べたら、会議中の時間の使い方に気を配れるようにはなりましたが、やはり、まだまだ出来ていない感は否めません。

会議が始まったその瞬間から、1秒、また1秒と、残り時間は刻々と減っていくわけなんですけど、残念ながら、残り時間って目に見えないので忘れられがちなんですよね。

自分の目の前に PC を広げていたとしても、議論に意識が持って行かれると、モニタに表示されている時計すら見えなくなる。もしかしたら、自分の PC の時計をチラチラ見るようにする、という癖付けをすることで解決するかもしれないけど、なかなか難しい。PC を持って来ていないひともいるしね。

でも、なんとかしたいんすよ・・・残り時間が可視化出来たらいいのにな。

そこで、タイムタイマーですよ!

世の中には便利なものがあるんですね。 残り時間を可視化する画期的なタイマー、それが、このタイムタイマーです!

f:id:fakestarbaby:20171013213711j:plain

タイムタイマーアラーム付き (M) 20センチタイプ

タイムタイマーアラーム付き (M) 20センチタイプ

使い方はとっても簡単で、赤い部分をぐるんっ!と反時計回りに回すだけ、それだけです。あとは、時間が経過するとともに、赤い部分が減っていくので、残り時間がどれくらいなのか、一目瞭然!スゴイっ!

どうやって使っているの?

弊社では、このようにミーティングテーブルの脇にタイムタイマーを設置して、いつでも、誰でも使えるようにスタンバイさせています。

f:id:fakestarbaby:20171013214007j:plain

1時間の会議なら55分を、30分なら25分を設定してから、会議を始めています。敢えて、5分短く設定しているのは、会議のクロージングに5分くらいを充てたいからで、予め、その時間を引いた上で会議に臨むようにしています。

f:id:fakestarbaby:20171013213731j:plain

大きめサイズなので、会議をしていても、やたらと目に付きます。主張が激しいくらいが、とても、ちょうどいいんです。

これくらいのサイズ感なら、議論に集中しているひと以外の目にも付きやすいから残り時間を指摘しやすいし、時間がないからその話しはそこまでな!と強く制止するよりも、ホラ!残り時間が少ないから議論を前に進めようぜ!という感じを出しやすい。

ちなみに、残り時間がゼロになったら、ピピピ!と音声を鳴らして知らせることも出来るんですが、割りと、音が大きいので鳴らしていません。

ミニタイムタイマーもオススメ!

タイムタイマーには、いくつか種類があるんですよね。特に、この一番小さいミニタイムタイマーは個人的にも愛用していて、オススメです!

f:id:fakestarbaby:20171013213916j:plain

タイムタイマーアラーム付き  (S) 8センチタイプ

タイムタイマーアラーム付き  (S) 8センチタイプ

かわいいっ!

大きめサイズと機能は同じで、コンパクトに持ち運べる作りになっています。サイズ感としては、このくらいですね。

f:id:fakestarbaby:20171013215752j:plain

リモートワークのときに、ポモドーロで集中するぞ!っていうときに利用したり、KPT や開発定例の残り時間を可視化するために利用したりしています。

いやいや、そんなんアプリで代用しちゃえばいいんじゃん?と思うかもしれないんですけど、物理的にそこにある、視界に入り込んでくる、それしか出来ない、その機能しか備えてないっていうところが大事なところだと思うんですよね。

ちなみに、子どもたちに面白がってイタズラされて、赤い部分をぐるんぐるん回されて、少し挙動がおかしくなったりしたことがあるので、乱暴な取り扱いと子どもには要注意です。

おまけ: 子どもに残り時間を説明する難しさ

大人に比べると、子どもはもっと残り時間に無頓着です。あと、5分で時間になるから早く支度しなさい!と言われても、5分ってどれくらいなんだろう? 🤔 となってしまうわけですよ。時間の感覚値がまだ掴めていないからですね。

そんなときは、ミニタイムタイマーで残り時間を見せてあげることもアリなんですが、こんなアプリを使うのもヨサソウです。

かわいいっ!

残り時間が減っていく様子を、ネズミがリンゴを食べる様子に置き換えて表現しているんですよ、りんご1つ10秒という単位で表現されていて、とにかく、かわいいっ!説明なんて要らない!もう見てるだけで残り時間がなくなっていくことがスッと理解出来る感じが好きです。

残念ながら弊社のアプリではなく、リタリコさんのアプリです。リタリコさんは、最近、子ども向けのシンプルなアプリをリリースしたりしていて、個人的に注目しています。

残り時間を意識しよう!

会議の議事録のアジェンダに、時間配分を書いておいてもいいし、タイムタイマーを使ってもいいし、みんなで残り時間を意識して、無駄のない効率的な時間の使い方が出来るといいですね。

意識!意識〜!

コードからの解放!

コードの煩わしさよ!

プログラミングのコードの話しではありませんよ!イヤホンのコードの話しです 👂

f:id:fakestarbaby:20171005171034p:plain

通勤中、電車に座ってマシンを開くたび、イヤホンコードがみょーんって伸びたりして、ちょいちょい、カバンに引っかかって耳を持って行かれたり、トラックパッドに接触して操作を奪われてカーソルを見失ったりして、地味にストレスを感じていたんです。

もしかして、AirPods ヨサソウ?

で、ある日、ふと、隣りに座ってるもんりぃ (@monry) が耳にうどんを垂らしてるのを見て、あぁ、AirPods いいかも?と思うようになりました。確か、こっしー (@ppworks) も買ったと言っていたな?ということで、2人にヨサを聞いてみることにした。

f:id:fakestarbaby:20171005172030p:plain f:id:fakestarbaby:20171005172140p:plain f:id:fakestarbaby:20171005172219p:plain

なるほどっ! ヨサソウだし、ヨクナサソウだっ!

とは言え、やっぱり、カナル型がいいんすよね・・・

色々とヨサとワルさを聞いたものの、どうしても、カナル型じゃないところが引っ掛かっていました。そう、カナル型が好きなんすよっ!(知らんがな)

激しめの曲を大音量で聴いている身としては、音漏れは気になるし、自分の世界に思いっきり浸りたいんですよね。

実は、コードレスイヤホンなら、他にもヨサソウなやつがあるんじゃないか?と思って、色々探してみたんだけど、なかなか、イイカンジのやつが見つからなかったんだけど・・・。

コスパ最高のやつ、みっけ!

最終的に、コレを買いました。

f:id:fakestarbaby:20171005172458p:plain

コードレスじゃないけど、コードは短くてたるまない。音質もそこそこだし、何より、みょーんってならない。そして、何より安くて手が出しやすかったんですよね。bluetooth イヤホンなのに、¥3,000 行かないんすよ、安いっ!

手元に気を取られないというだけで、色々と作業もしやすくて、自分の中ではライフチェンジングな感じでした。一体、今まで、なんのためにみょーんと戦っていたんだ!バカか!と思ってしまうくらいには、買って良かったです。

どんどん、コードレスな社会になってくといいですね!

waffle.io で Issue の書き方の足並みを揃える

f:id:fakestarbaby:20171005141746p:plain

Issue の書き方って、個人差出るんすよね

バグ報告の Issue を眺めていると、大抵、この辺のことが気になり始めるんですよ。

  • iOS / Android どっちで発生したんだろう? 🤔
  • 端末の OS バージョンはいくつだろう? 🤔
  • DeployGate のバージョンはいくつだろう? 🤔
  • どの画面で、どんなタイミングで落ちたんだろう? 🤔
  • 再現手順はあるのかな? 🤔
  • たまにしか起きないやつなのかな? 🤔
  • 表示がおかしいみたいだけど、どうおかしいんだろう? 🤔
  • 画面がチラつくらしいけど、どうチラつくんだろう? 🤔
  • 現行バージョンでも発生するのかな? 🤔

悩みは尽きませんよね・・・。

こういった一次情報を書いて残してくれているひともいれば、書いていないひともいます。また、書いているときもあれば、書いていないときもあったりします。

バグの原因を調査するとき、これらの一次情報があるかないかで、バグの原因を突き止めるまでの時間に大きな差が生まれます。一次情報が少なければ、なんかこの辺でなんか起きるらしいぞ?という漠然とした推測のもとに調べていかないといけません。

だからこそ、出来るだけ Issue に個人差を持ち込まずに、Issue の書き方の足並みを揃えたいんですよ。

よーし!Issue Template を導入だっ!

Issue にはさ、こういうことを書いて欲しいんすよ〜!って伝えたとしても、Issue を書くのは人間なので、うっかり、忘れちゃったりするんですよね。でも、まぁ、仕方ないよね〜!っていうことで済ませるわけにもいかないので、どうしたらいいかを考えてみました。

恐らく、みんな、エンジニアが調査をするときにどういう情報が書いてあると嬉しいのか、といった部分が共有されていないことが問題なのかもしれないなぁと考え、こういう情報が書いてあると嬉しいんすよ〜!っていう項目をまとめた Issue Template を作ってみました。

f:id:fakestarbaby:20171005141944p:plain

esa に記事を書いて例文を載せたりもして、定例のときに、今度からこの Issue Template を活用して行きましょう!と周知したつもりではあったんだけど、それでも、まだ、個人差が出ていました。

なんでだろう?とその理由を考えてみると、waffle.io で Issue を作成するとき、毎回、入力フォームに Issue Template をコピペするの、つらみがあるんですよね・・・そりゃ、そうだよね!無理を言って申し訳ないっ!

ということで、GitHub の Issue Template を使って、自動的に差し込んじゃおうとも考えたんですが、弊社は、Issue を waffle.io で管理していて、この機能が使えなかったんですよね。waffle.io に、要望はたくさん上がってるっぽいんですけど、まだ、対応はされてないようです。

もう待てんっ!ということで、勝手に waffle.io に Issue Template を差し込む Chrome 拡張を作ってみました。

スッと入る Issue Template で統一感を!

初めて Chrome 拡張に手を出したので、理解も浅いんですけど、一応、それっぽいやつは出来ました。こんな感じになります。

f:id:fakestarbaby:20171005142305g:plain

スッと感ある。

まだ、実戦投入してなくて、これから、社員のみんなにインストールしてもらって運用して行く感じです。本当は、Issue Template 部分は、自由に書き換えられたり、GitHub に置いた Issue Template を読み込めるとオシャレなんですけど、早く運用したさのあまり、コードにベタ書きしてしまいましたが、後悔はしていません。

足並みをそろえる第一歩になればいいなぁ。

esa の記事内で喋ってる感を出そう (\( ⁰⊖⁰)/)

喋ってる感 is なんなの 🤔

例えば、Twitter だとこんな感じ。

f:id:fakestarbaby:20171005081630p:plain

なるほど、喋ってる感ある 🤔

じゃあ、Slack はどうだろうか?

f:id:fakestarbaby:20171005082022p:plain

なるほど、確かに、これは喋ってる感ある 🤔

じゃあ、esa だとどうなるの?

f:id:fakestarbaby:20171005082406p:plain

なるほどっ!喋ってる感ある〜! 😆

ということで、喋ってる感 is アイコンとテキストの合わせ技で成立する、誰かが何かを喋ってる雰囲気のことを意味します。

アイコン絵文字の使いどころ

esa には、ユーザのアイコンをカスタム絵文字として使える機能が標準で用意されており、これを利用することでこの喋ってる感を出せるようになります。使い方の紹介などは、こちらを参照するとヨサソウです。

ところで、喋ってる感なんて、どこでどういう感じで使うのよ?

例えば、KPT 記事で!

f:id:fakestarbaby:20171005082908p:plain

事前に、KPT に内容を書いておいてね〜!と周知しておき、追記したひとは、自分のアイコン絵文字を付け加えてもらいます。ただ、これだけで、誰が追記したのか一目瞭然になり、便利便利!

例えば、議事録で!

f:id:fakestarbaby:20171005084309p:plain

議事録の冒頭には、必ず、この辺の情報を記載していて、議事録を Ship It! したときに参加者にメンションが飛ぶようにしています。ここでアイコン絵文字を使うことにより、なんとなくスッと参加者が視認出来るようにしています。ここは喋ってる感というより、居るぞ感に近いかもしれませんね。

同じく、議事録で!

f:id:fakestarbaby:20171005083706p:plain

発言内容をまとめるとき、なんとなく、誰が発言したかアイコンを付けておくとヨサソウ。重要なトピックだけでもいいかもしれない。全発言に完璧にアイコン絵文字を付けてくぞっ!とか言い出すと、一気に辛くなるので、雑さが大事そう ( ˘ω˘)"

おまけ: あとは頼んだぞ!感を出す方法

f:id:fakestarbaby:20171005083817p:plain

こういう感じで、並べたタスクを誰に振るか、という意図で利用してもヨサソウですね。

アイコンはそのひとの顔だ!

アイコンによるひとの認識精度の高さ、ハンパないですね。弊社では、半年前までデフォルトアイコンのひとがたくさん居たんですが、アイコン警察のおかげで、今では、全員アイコンを設定していて、識別しやすさがあります。はー、アイコン大事!

はー、esa 楽しい〜 (( ⁰⊖⁰)/)