ぼくのかんがえたさいきょうのアンサー管理画面 at...
DESCRIPTION
管理画面チラ見せ♡ナイト #2 : ATND https://atnd.org/events/57411 での発表資料です。 株式会社nanapi 秋田真宏TRANSCRIPT
![Page 1: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/1.jpg)
ぼくのかんがえた さいきょうのアンサー管理画面
2014/10/21 at 管理画面チラ見せ♡ナイト #2
![Page 2: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/2.jpg)
自己紹介
• 2011年4月nanapi入社 (4年目) • akiyan.com でブログを書いてます •社内向けの管理画面を作るのが大好きです
秋田 真宏 / あきやん 株式会社 nanapi エンジニア (社員)
![Page 3: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/3.jpg)
アンサーとは
•即レスコミュニケーションサービス • iOS / Android ネイティブアプリ展開 •リリースから約1年 • 2014年9月1日時点で累計 5,000万コメント
![Page 4: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/4.jpg)
こんな感じ
![Page 5: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/5.jpg)
アンサー管理画面を使う人たち
アプリエンジニア
サーバーサイドエンジニア ←俺
オペレーター
ディレクター
全員社内の人間。
![Page 6: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/6.jpg)
今日伝えたいこと
さいきょうの管理画面であるためにしている5つのこと
![Page 7: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/7.jpg)
ここから管理画面!
![Page 8: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/8.jpg)
1. リンクしまくる
![Page 9: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/9.jpg)
1. リンクしまくる
• IDがあれば詳細ページヘ • 参照IDや集計値があれば一覧ページへ リンクが多いとデータをどんどん辿れるのでデバッグがスムーズ。 「この集計の内訳は?」が知りたいときにいちいちフォームから検索しなくていい。 ほとんどのデータにパーマリンクがあると、何かと社内コミュニケーションが捗る。
![Page 10: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/10.jpg)
2. 横幅は貴重な資源なのでリッチに表現する
![Page 11: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/11.jpg)
2. 横幅は貴重な資源なのでリッチに表現する
横幅を節約すると1画面に表示できる情報が増えてデバッグが捗る。
荒らし対応やユーザーサポートも捗る。
アイコンは Bootstrap や Fontawesome などのCSSだけで表示させられるアイコンが便利。
適切なアイコンがわからない時はデザイナーさんに相談すると解決する。
日付時刻の2段表示はかなりオススメ!
![Page 12: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/12.jpg)
3. アプリ画面を再現する
![Page 13: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/13.jpg)
3. アプリ画面を再現する
アプリでいちいち表示確認するのが面倒くさくなってカッとなって作った。
再現画面からも全てのデータにリンクを張る(ユーザーや発言の詳細画面へ)。
社内チャットの「こんな投稿があるよシェア」で大活躍(チャットからアプリで該当のスポットを開くのはかなりの手間)。
![Page 14: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/14.jpg)
4. まさかのレスポンシブデザイン
![Page 15: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/15.jpg)
4. まさかのレスポンシブデザイン
ノリで最適化したら結構使いどころがあった。
社内専用ビルドでアプリから直接に管理画面を開けるようにしてもらった。
アプリを使っていて管理画面で裏側を確認したいときに捗るようになった。
偶然見つけたものに即応できるようになった。
![Page 16: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/16.jpg)
5. 反復作業はフルキーボード操作で完結
[ デモ画面 ]
![Page 17: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/17.jpg)
5. 反復作業はフルキーボード操作で完結
最初は普通にリンクで操作する画面だった
画面の更新を待つのがだるい > 非同期化
マウス操作がだるい > キーボード化
20倍の速度で処理できるようになった
![Page 18: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/18.jpg)
なんで!?
![Page 19: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/19.jpg)
なぜここまで作りこむのか
• ベースのモチベーションは趣味の領域 • 便利なものを作りたい欲求がなんかすごい • 管理画面は思いついた便利機能をゼロ確認で実装できる
• 辿れるデータは全てリンクで辿りたいし辿らせたい • 全てのデータにパーマリンクが欲しい • 何度も同じSQLを打ちたくない
![Page 20: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/20.jpg)
作りこんでよかったこと
• エンジニアにとって便利な機能はみんなにとっても便利
• 便利機能を作ると喜びの声が聞けてモチベーションが上がる
• デバッグしてもらえる範囲が広がる • 1人で完結するウェブアプリケーションはすごい速度で作れるので作っていて楽しい
![Page 21: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/21.jpg)
KPIとかは?
![Page 22: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/22.jpg)
定量的なモニタリング機能はつけない
• KPIなどの追跡は管理画面では行わない
• RDBMSに格納されたデータの集計でわかる範囲は狭い
• KVSへの移行によって出来なくなることもある
• アクセスログを元に TresureData や Google Big Query を使う。RDBMSともJOINする
• アンサーではディレクターや専門チームが行っている
• バックトラックなどの超重い分析も可能
• 複雑なクエリはエンジニアが見てもひと目では理解できない
• 解析結果の適切なビジュアライズは素人には難しいので専門家にやってもらったほうがいい
![Page 23: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/23.jpg)
きょうのまとめ
![Page 24: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/24.jpg)
まとめ
管理画面の作り込みは楽しい
フィードバックが嬉しい !
パーマリンク便利
![Page 25: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/25.jpg)
おまけの面白画面
![Page 26: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/26.jpg)
ダッシュボード
![Page 27: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/27.jpg)
ダッシュボード
• Analytics のようなかっこいい集計画面への憧れがあった
• 定量的な「いまの雰囲気」を表現したかった • グラフ描画には Goolge Graph API を使った • リリース後データ量が増えてクエリが重くなる度にどんどん情報が減っていった
![Page 28: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/28.jpg)
タイムマシーン
![Page 29: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/29.jpg)
タイムマシーン
• 過去のある時点でのホーム画面を再現できる • 同時刻の年代別の投稿をひと目で比較できる • 「正月の雰囲気ってどんな感じだったっけ?」 • 「年代別でどう違うんだっけ?」 • といったことが気になって作ったら面白そうだし勢いで作った
![Page 30: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/30.jpg)
翻訳
![Page 31: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/31.jpg)
翻訳
• 無断で中国語版Androidアプリが作られて配布されたときに、中国語のコメントが大量に流れた
• 中国語は雰囲気しかわからなくて意味不明 • いちいちコピペして翻訳するのが面倒だったので、Google 翻訳の結果を自動で開くリンクをつけた
• 意外と普通にユーザーとして参加していてほっこりしたが、既存ユーザーは混乱した
![Page 32: ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2](https://reader030.vdocuments.site/reader030/viewer/2022020711/55843a8ad8b42a84368b4906/html5/thumbnails/32.jpg)