ぼくのかんがえた さいきょうのアンサー管理画面

2014/10/21 at 管理画面チラ見せ♡ナイト #2

自己紹介

• 2011年4月nanapi入社 (4年目) • akiyan.com でブログを書いてます •社内向けの管理画面を作るのが大好きです

秋田 真宏 / あきやん 株式会社 nanapi エンジニア (社員)

アンサーとは

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

こんな感じ

アンサー管理画面を使う人たち

アプリエンジニア

サーバーサイドエンジニア ←俺

オペレーター

ディレクター

全員社内の人間。

今日伝えたいこと

さいきょうの管理画面であるためにしている5つのこと

ここから管理画面！

1. リンクしまくる

1. リンクしまくる

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

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

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

横幅を節約すると1画面に表示できる情報が増えてデバッグが捗る。

荒らし対応やユーザーサポートも捗る。

アイコンは Bootstrap や Fontawesome などのCSSだけで表示させられるアイコンが便利。

適切なアイコンがわからない時はデザイナーさんに相談すると解決する。

日付時刻の2段表示はかなりオススメ！

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

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

アプリでいちいち表示確認するのが面倒くさくなってカッとなって作った。

再現画面からも全てのデータにリンクを張る（ユーザーや発言の詳細画面へ）。

社内チャットの「こんな投稿があるよシェア」で大活躍（チャットからアプリで該当のスポットを開くのはかなりの手間）。

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

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

ノリで最適化したら結構使いどころがあった。

社内専用ビルドでアプリから直接に管理画面を開けるようにしてもらった。

アプリを使っていて管理画面で裏側を確認したいときに捗るようになった。

偶然見つけたものに即応できるようになった。

5. 反復作業はフルキーボード操作で完結

[ デモ画面 ]

5. 反復作業はフルキーボード操作で完結

最初は普通にリンクで操作する画面だった

画面の更新を待つのがだるい > 非同期化

マウス操作がだるい > キーボード化

20倍の速度で処理できるようになった

なんで！？

なぜここまで作りこむのか

• ベースのモチベーションは趣味の領域 • 便利なものを作りたい欲求がなんかすごい • 管理画面は思いついた便利機能をゼロ確認で実装できる

• 辿れるデータは全てリンクで辿りたいし辿らせたい • 全てのデータにパーマリンクが欲しい • 何度も同じSQLを打ちたくない

作りこんでよかったこと

• エンジニアにとって便利な機能はみんなにとっても便利

• 便利機能を作ると喜びの声が聞けてモチベーションが上がる

• デバッグしてもらえる範囲が広がる • １人で完結するウェブアプリケーションはすごい速度で作れるので作っていて楽しい

KPIとかは？

定量的なモニタリング機能はつけない

• KPIなどの追跡は管理画面では行わない

• RDBMSに格納されたデータの集計でわかる範囲は狭い

• KVSへの移行によって出来なくなることもある

• アクセスログを元に TresureData や Google Big Query を使う。RDBMSともJOINする

• アンサーではディレクターや専門チームが行っている

• バックトラックなどの超重い分析も可能

• 複雑なクエリはエンジニアが見てもひと目では理解できない

• 解析結果の適切なビジュアライズは素人には難しいので専門家にやってもらったほうがいい

きょうのまとめ

まとめ

管理画面の作り込みは楽しい

フィードバックが嬉しい !

パーマリンク便利

おまけの面白画面

ダッシュボード

ダッシュボード

• Analytics のようなかっこいい集計画面への憧れがあった

• 定量的な「いまの雰囲気」を表現したかった • グラフ描画には Goolge Graph API を使った • リリース後データ量が増えてクエリが重くなる度にどんどん情報が減っていった

タイムマシーン

タイムマシーン

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

翻訳

翻訳

• 無断で中国語版Androidアプリが作られて配布されたときに、中国語のコメントが大量に流れた

• 中国語は雰囲気しかわからなくて意味不明 • いちいちコピペして翻訳するのが面倒だったので、Google 翻訳の結果を自動で開くリンクをつけた

• 意外と普通にユーザーとして参加していてほっこりしたが、既存ユーザーは混乱した