玄人Macデベロッパーである@hiroshi3110さんに聞かれました。

せっかくなので怖話のダッシュボードの実装についてご紹介。

https://gyazo.com/b7cdc15a354ebafb347742bd11368abe

ダッシュボード | 怖話(こわばな)

Team Dashboardから自作へ

以前ブログに書いたTeam Dashboardはもう使ってません。今は怖話内の1ページとして作っています。

Team Dashboardで目標数字をチームで共有する - komagata

最初は表示するだけで満足してたんですが、スクラムでスプリント毎に数値ベースの仮説検証をしはじめたら痒いところに手が届かなくなり、自前実装になりました。

ダッシュボードはフレームワークやSaaSがたくさんありますがロードアベレージや通信量などインフラ向け作られているのが多くてマッチしなかったです。

使っているツール

ただのRailsのページなのでjQueryです。チャートはChart.jsを使っています。(Highchartsを使いたかったけどオープンソースのがいいので)

今のところデータソースは下記です。

  • Google Analytics API
  • 怖話のDB
  • 自前のGoogle検索結果収集サービス
  • App Annie API

Google Analytics(以下GA)で取れないものをほかで補う形です。(Google AnalyticsとApp Annieが提携したので取れるかも?)

自前のGoogle検索結果収集サービス

他のサイトでも使いたいのでHerokuにアプリとして置いてます。その過程で下記gemを作りました。

Googleでの検索順位を取る - komagata

Herokuのアプリは上記を使ってMongoLabに1日1回保存してるだけです。JSON APIはMongoLabが提供してるので自分で書く必要なし。便利。

DistimoからApp Annieへ

アプリダウンロード数はDistimo APIを使ってましたが、App Annieへ吸収され消滅しました。

iPhone・Androidアプリのダウンロード数をTeam Dashboardで出す - komagata

アカウントとデータはサービス側で移行してくれたのですが、APIは別なのでがんばって書き換えました。(報われない系仕事)

Google Analytics最強伝説

ほとんどのイベントトラッキングはGAさえあれば可能で、性能・価格的にも最強ってわかっちゃいるけど真正面から取り組むことを避けていました。

難しいんですよね。GA。何冊書籍読んでもよくわかりませんでした。

プログラマーにおすすめなのは一度GAのAPIを使って自前でダッシュボード作ってみることです。そうするとGAの仕組みがスッキリ理解できます。

「GAサイトにある画面のどれでも自前で再現できるぞ!」

となるので、Webの数値への苦手感がなくなります。

TL;DR

HerokuでPull Request毎にステージング環境が勝手にできるようになりました。

https://gyazo.com/e999f53578a80cffd0641d271a815f63

Review Apps

Review Apps自体はHeroku Buttonから続くWebアプリデプロイの自動化の流れの成果の内の一つとです。もともとPipelinesを自分で色々やればできたろうとは思いますが、管理画面だけでPR毎の自動環境構築ができるのはクッソ便利です。

Sendagaya.rb #127で下記の発表をさせていただきました。

Sendagaya.rb #127に行ってきました - komagata

Review Appsで無限ステージング環境 // Speaker Deck

スライドみればわかりますが、githubとconnectして、環境変数・addon選んでapp.json生成して、PR作れば勝手にステージング環境ができます。PRがmergeされれば消えます。

AWS + dockerとかで作ると結構大変な環境がポンッとできるのは魅力ですが問題もあります。

Review Apps化への障壁

まずapp.jsonのpostdeployで指定する1コマンドで初期化できるようにしておく必要があります。railsだったらrake db:setup指定しろって書いてあります。

新規アプリだったらいいですが、皆さんの仕事のコード、ちゃんとseed動きますか?

また、PRの分だけ有料add-onの料金がかかってしまいます。freeプランや一番low costなプランを選べって書いてありますが、一番low costプランが$20とかだとちょっと躊躇しちゃうかも。

さらに、外部共有サービス(共有というと大体がストレージですが)を使っている場合は環境が無数にできることに対応しておく必要があります。

例えば、 Blabo!では画像をS3にアップしていて、環境毎にblabo, blabo-stagingというようにbucketを分けていましたが、環境毎にbucketを作るというような設計はうまくないのでサブディレクトリにするとか工夫が必要です。

実際僕もCDN(CloudFront)とかどうしようとか困ってますね。

12factorを徹底せよ

しかしどれもHerokuの提唱してる12factor appを徹底していれば避けられるものばかりです。12factor度が甘かった部分を反省しているところです。

Review Appsを考慮した設計を

とはいえ有料add-onとかどうにもならない部分もあります。個人的にはAWSでなくHerokuを選んだ時点でadd-on対応してないものを使わない(add-onになってれば環境毎にアカウントが勝手にできるので)。freeプランの無いadd-onは使わないというしばりで設計するのが良いのでは無いかと思います。

フィーチャーブランチの是非

基本Review Appsを絶賛していますが、そもそもフィーチャーブランチは悪手ではないのか?という問題もあります。

フィーチャブランチ

フィーチャーブランチは意味的衝突に弱いので、フィーチャートグルや抽象化ブランチを使って1つのメインブランチにコミットすべきという意見です。

この辺も議論が進むといいですね。

まとめ

Review Appsはクッソ便利。だが設計に注意が必要。

Sendagaya.rbに初めて行ってきました。

Sendagaya.rb #127 - Sendagaya.rb | Doorkeeper

僕はHerokuのReview Appsについてお話しさせていただきました。それについての詳細は別エントリーにて。

Heroku Review Appsで無限ステージング環境 - komagata

また、@cesareさんによるRailsでデータ分析するときのハマりどころの発表があり、ある程度の規模のデータ分析の大変さが面白かったです。

bricolageとRedShiftの組み合わせはこういうことが必要になった時、覚えておくととっても助かりそうです。

今回は発表2つで終わりましたが、Sendagaya.rbは普段はもうちょっともくもくタイムとかがある雰囲気でした。

大江戸ruby会議でも思いましたが、最近は知り合いとばっかり仕事してたので会ったことのないrubyistを新しく知り合うのは新鮮でいいですね。

ちなみに株式会社Blaboではrails/フロントエンドエンジニアを超募集しています。

未来のBlabo!をつくる仲間、募集します。 - 株式会社Blabo

@machida さんが三軒茶屋に引っ越して自転車通勤になったので、今まで玄関に停めていたスタイルは通用しなくなったのでMINOURAのバイクタワーを買いました。

狭いオフィスで圧迫感がありますが、パーテーションとして機能しております。

オフィスに@machida さん用のThunderbolt Displayを買い足しました。

快適!

ちなみに2台ともヤフオクで買いました。5〜6万って感じです。中古のアーロンチェアと同じぐらいですね。

なんで今頃Thunderbolt Displayなのかというと、次のモデルは4K or 5Kになって、データ帯域的にThunderbolt3対応が必要なのでそれが出て、更にMacBookも買い換える必要があるので、MacBookを買い換えてからでいいかなと思ったからです。

5KでThunderbolt3対応のUSB TypeCとかで出たら嬉しいですね。高そうだけど・・・。

大江戸ruby会議05に行ってきました。

各種発表の詳細は下記を。

もう確認した?「大江戸Ruby会議05」全公開スライドまとめ | TechStars Blog

みんな色々作ってるなー。俺もやんなきゃなぁと感じました。

最近俺は動いてるけど、ぐちゃぐちゃになってるrailsコードを「普通っぽくする」とか、作法が分からない人に「普通っぽい書き方・設計」を伝えるというようなことばかりやっていて、新しいもの作ってない。

大江戸ruby会議に行ってみたらバンバン作ってる人がいっぱいいて、俺がやってる「普通っぽくする」ってなんだそりゃって改めて思いました。

「weirdだろうがmessyだろうが、ガンガン作りたい!」

と強く思いました。

素晴らしい懇親会でじゃんけんでAsakusa.rb Tシャツいただきました。

TMIXサイコー!

ruby意識低い問題を修正しました。

そりゃ最新の方が良いに決まってるんだけど、新機能実装、バグ修正などのプレッシャーの中、rubyのバージョンをアップするということをどれぐらい優先できるかという点に会社の文化ができる気がします。 https://gyazo.com/5b39bc550be6c6d992de8056713f9962

YES, WE CAN!

株式会社Blaboではruby意識高いプログラマーを募集しています。

未来のBlabo!をつくる仲間、募集します。 - 株式会社Blabo

会社のインターンのEラーニングシステムのデザインを変えました。(bootstrap2系を3系にした)

ついでにどの人がどの課題をやっているかをアイコンで出すようにしてみたらとっても把握しやすくなった。非アクティブな人(3週間以上アクセスがない人)は半透明になっています。

どの課題がつまづきやすいのかが丸わかり。

動きのない人に声をかけてあげられるようにどのくらいその課題で時間を費やしているのかも可視化できるといいなーと思った。

合同会社フィヨルドではプログラマーのインターンを募集しています。

インターンシップ « FJORD, LLC

会社の本棚にオライリーが少ない件を一部修正致しました。

よくみると一冊増えてます。

Knockout.jsに日本語オライリー書籍は存在しないので英語版。こんなに薄っい本だとは思いませんでした 😭

株式会社Blaboではエンジニア募集しております!!

未来のBlabo!をつくる仲間、募集します。ウェブアプリケーションエンジニア【正社員/契約社員】 - 株式会社Blabo

Thunderbolt Displayを導入したら机の奥行きが必要になり、同時に肩こりにならないように高さの変えられるテーブルが欲しくて、6年ほど使っていたオフィスのテーブル6台を買い換えました。

IKEAのHISSMONという天板とOLOVという高さの変えられる脚の組み合わせです。

IKEA BUSINESSで注文して1週間ぐらいで到着。組み立ては3人で1〜2時間ぐらいかかりました。電動ドライバーを初めて使いましたが便利だし楽しいですね。

Magic KeyboardとMagic Mouse 2も買っちゃいました。

手元がひろびろ〜。

元々2台テーブルがあった場所は二人がけの長い天板(と同じ脚)に変えました。今同じ案件で仕事をしてる@rono23とペアプロしたらはかどりました。

キーボードのマニュアルに書いてあるように、キーボードは腕を下に下ろす姿勢が楽です。腕を胸元まで上げる姿勢だと肩凝ります。

テーブルも高さが変えられるとベスポジにできて便利ですね。

4台並べてるのでながーい机みたいです。

@machida さん用のThunderbolt Displayも手配中なのでそろうのが楽しみです。