管理画面チラ見せ♡ナイト #2 : ATND https://atnd.org/events/57411 での発表資料です。 株式会社nanapi 秋田真宏

1. ぼくのかんがえた
さいきょうの
アンサー管理画面
2014/10/21
at 管理画面チラ見せ♡ナイト #2

2. 自己紹介
秋田 真宏 / あきやん
株式会社 nanapi エンジニア (社員)
• 2011年4月nanapi入社 (4年目)
• akiyan.com でブログを書いてます
• 社内向けの管理画面を作るのが大好きです

3. アンサーとは
• 即レスコミュニケーションサービス
• iOS / Android ネイティブアプリ展開
• リリースから約1年
• 2014年9月1日時点で累計 5,000万
コメント

4. こんな感じ

5. アンサー管理画面を使う人たち
ディレクター
アプリエンジニア
サーバーサイドエンジニア ←俺
オペレーター
全員社内の人間。

6. 今日伝えたいこと
さいきょうの管理画面である
ためにしている5つのこと

7. ここから管理画面！

8. 1. リンクしまくる

9. 1. リンクしまくる
• IDがあれば詳細ページヘ
• 参照IDや集計値があれば一覧ページへ
リンクが多いとデータをどんどん辿れるのでデ
バッグがスムーズ。
「この集計の内訳は？」が知りたいときにいち
いちフォームから検索しなくていい。
ほとんどのデータにパーマリンクがあると、何
かと社内コミュニケーションが捗る。

10. 2. 横幅は貴重な資源なのでリッチに表現する

11. 2. 横幅は貴重な資源なのでリッチに表現する
横幅を節約すると1画面に表示できる情報が増えて
デバッグが捗る。
荒らし対応やユーザーサポートも捗る。
アイコンは Bootstrap や Fontawesome など
のCSSだけで表示させられるアイコンが便利。
適切なアイコンがわからない時はデザイナーさん
に相談すると解決する。
日付時刻の2段表示はかなりオススメ！

12. 3. アプリ画面を再現する

13. 3. アプリ画面を再現する
アプリでいちいち表示確認するのが面倒くさく
なってカッとなって作った。
再現画面からも全てのデータにリンクを張る
（ユーザーや発言の詳細画面へ）。
社内チャットの「こんな投稿があるよシェア」
で大活躍（チャットからアプリで該当のスポッ
トを開くのはかなりの手間）。

14. 4. まさかのレスポンシブデザイン

15. 4. まさかのレスポンシブデザイン
ノリで最適化したら結構使いどころがあった。
社内専用ビルドでアプリから直接に管理画面を
開けるようにしてもらった。
アプリを使っていて管理画面で裏側を確認した
いときに捗るようになった。
偶然見つけたものに即応できるようになった。

16. 5. 反復作業はフルキーボード操作で完結
[ デモ画面 ]

17. 5. 反復作業はフルキーボード操作で完結
最初は普通にリンクで操作する画面だった
画面の更新を待つのがだるい > 非同期化
マウス操作がだるい > キーボード化
20倍の速度で処理できるようになった

18. なんで！？

19. なぜここまで作りこむのか
• ベースのモチベーションは趣味の領域
• 便利なものを作りたい欲求がなんかすごい
• 管理画面は思いついた便利機能をゼロ確認で実装で
きる
• 辿れるデータは全てリンクで辿りたいし辿らせたい
• 全てのデータにパーマリンクが欲しい
• 何度も同じSQLを打ちたくない

20. 作りこんでよかったこと
• エンジニアにとって便利な機能はみんなにとっ
ても便利
• 便利機能を作ると喜びの声が聞けてモチベーショ
ンが上がる
• デバッグしてもらえる範囲が広がる
• １人で完結するウェブアプリケーションはすご
い速度で作れるので作っていて楽しい

21. KPIとかは？

22. 定量的なモニタリング機能はつけない
• KPIなどの追跡は管理画面では行わない
• RDBMSに格納されたデータの集計でわかる範囲は狭い
• KVSへの移行によって出来なくなることもある
• アクセスログを元に TresureData や Google Big Query を
使う。RDBMSともJOINする
• アンサーではディレクターや専門チームが行っている
• バックトラックなどの超重い分析も可能
• 複雑なクエリはエンジニアが見てもひと目では理解できない
• 解析結果の適切なビジュアライズは素人には難しいので専門家
にやってもらったほうがいい

23. きょうのまとめ

24. まとめ
管理画面の作り込みは楽しい
フィードバックが嬉しい
! パーマリンク便利

25. おまけの面白画面

26. ダッシュボード

27. ダッシュボード
• Analytics のようなかっこいい集計画面への憧
れがあった
• 定量的な「いまの雰囲気」を表現したかった
• グラフ描画には Goolge Graph API を使った
• リリース後データ量が増えてクエリが重くなる
度にどんどん情報が減っていった

28. タイムマシーン

29. タイムマシーン
• 過去のある時点でのホーム画面を再現できる
• 同時刻の年代別の投稿をひと目で比較できる
• 「正月の雰囲気ってどんな感じだったっけ？」
• 「年代別でどう違うんだっけ？」
• といったことが気になって作ったら面白そうだ
し勢いで作った

30. 翻訳

31. 翻訳
• 無断で中国語版Androidアプリが作られて配布され
たときに、中国語のコメントが大量に流れた
• 中国語は雰囲気しかわからなくて意味不明
• いちいちコピペして翻訳するのが面倒だったので、
Google 翻訳の結果を自動で開くリンクをつけた
• 意外と普通にユーザーとして参加していてほっこり
したが、既存ユーザーは混乱した