1. 管理画面
!
前田 雅央 @brtriver
気づける
営業・運用を支える
PHPカンファレンス 2015
株式会社 Zucks
https://joind.in/15322

2. @brtriver

4. アドネットワークとは？
アドネットワーク
広告主
広告主
広告主
① 広告入稿
④ 収益レポート
③ 配信調整
営業・運用
② 広告配信

5. アドネットワーク
広告主
広告主
広告主
① 広告入稿② 広告配信
③ 配信調整
営業・運用
管理画面
④ 収益レポート
アドネットワークとは？

6. 管理画面開発したことありますか？

7. • コ ミ ュ ニ ケ ー シ ョ ン の 工 夫
• 運 用 を 楽 に す る た め の 工 夫
• 機 能 開 発 の デ プ ロ イ の 工 夫
• データの変化に気づくための工夫
気づける 管理画面のためにやっている工夫

8. 管 理 画 面 と は

9. 管理画面の主な機能
• ユーザー、権限管理
• データのCRUD処理
• レポーティング機能、データ出力 (CSV)

10. 管理画面あるある
• 使いづらい画面でも利用者が使いこなしてしまう
• 何度か作り直したくなる病が発病する。が諦める
• 使われているか分からない機能、画面がある
長期運用されてくると…
• 裏機能がいつのまにかできてる

11. 管理画面の種類
利用ユーザーが限定的な管理画面
誰でもアカウントを作成可能な開放された管理画面
社内システムの管理画面
PHPMyAdmin
会社ブログの管理画面
Google Analytics の管理画面
<何かしらのサービス> の管理画面

12. 利用ユーザーが限定的な管理画面
誰でもアカウントを作成可能な開放された管理画面
Zucks AdNetwork アプリ開発者用 管理画面
Zucks AdNetwork 運用チーム用 管理画面
管理画面の種類

13. 限定 と 開放 の違い
限定 開放
同 時 ア ク セ ス 数 少 な い 多 い
利 用 者 の 声 聞きやすい 聞こえづらい
メンテナンスのための停止
気楽に 丁寧に
大胆な改修、機能停止

14. 今日のメインの話はココ
利用ユーザーが限定的な管理画面
誰でもアカウントを作成可能な
Zucks AdNetwork
Zucks AdNetwork 運用チーム用 管理画面
管理画面の種類

15. コミュニケーションの工夫
何 故 必 要 な の で す か ？ を 聞 く

16. 一緒にサービスを作る必要
コ ミ ュ ニ ケ ー シ ョ ン 力
りょく
現 場 の 声 を 聞 き な が ら
観 察 力
りょく

17. 期間、案件名、配信状態、アプリ名
で絞り込んで単価調整したいんだよね
なるほど。じゃあ、検索フォーム作りましょう
現場
エンジニア
コミュニケーション力、観察力が足らないと…

18. 期間
案件名
配信状態
メディア名
2015-09-01 2015-09-01
配信中 停止中
検 索
and or
メディア名 条件追加
OS種別 iOS Android
広告種別 インライン インタースティシャル
リッチな検索フォームつくったど！

19. ああ。うん。(毎回条件指定するの大変なんだよね)
ところで検索フォームって大活躍してますか？
後日…
心の声はあまりエンジニアには聞こえてこない
コミュニケーション力、観察力が足らないと…

20. 期間、案件名、配信状態、アプリ名で絞り込みしたい
それらの項目の中でいつも最初に絞り込むのは何ですか？
あー。期間を最初に絞り込んでから他の軸を見てるね
じゃあ、期間を最初に指定できるようにしましょう
なぜ必要なのか を質問する

21. 期 間 を 指 定 ( 固 定 )
一覧から案件名、OS種別 etc… でフィルタリング
単 価 画 面 に 遷 移 し 調 整 作 業
実際の業務フローが見えてきた
繰り返し
なぜ必要なのか を質問する

22. 管理画面全体で共通の期間設定
Google Analytics も…

23. シンプルなフィルタがあれば十分だった
文字列で全体検索
候補からフィルタ

24. ページャは大体シンプルでOK
前へ 次へ1 2 3 4 5 6 7
○ページ目を直接指定することはほぼない
必要なのは、最初、前へ、次へ、最後
最初 最後

25. フォームは最低限実装に。何も困ってない
それぞれの項目を何故必要なのかを確認
結 果

26. 運用を楽にする工夫
嫌 な 兆 候 を 事 前 に 把 握
更新履歴をシンプルに表示
共 有 で き る U R L

27. 共有できるURL
その1
URLを伝えれば同じ画面を確認できる仕組み

28. 共有できるURLがないと…
営業 エンジニア
どのページですか？
../user/articles/list
どのお客さんですか…?
お客さんから表示されるはずのデータが見えないという
問い合わせがあるんだけど…

29. URLに必要な情報が不足
BAD
ログイン後のURLがずっと同じ
無 駄 に P O S T で 画 面 遷 移
何故URLを共有できないのか
a j a x で 裏 で 画 面 遷 移 せ ず が ん ば り す ぎ
確認しようにもパラメータが不明

30. 共有できるURLがあると
営業 エンジニア
URLください
../user/brtriver/articles/list
確認します
お客さんから表示されるはずのデータが見えないという
問い合わせがあるんだけど…

31. URLを貰えば同じ画面がみれる
Better
アクセスログからも調査しやすい
共有できるURLがあると

32. 更新履歴をシンプルに表示
その2

33. 更新履歴を見せていないと…
営業 エンジニア
え？いつのまにか？
変更していないはず
調べてみますね…
案件の単価がいつのまにか30円になってるんだけど
※ 営業さん悪くないです。人間どういった操作したかなんて覚えてません。ごく自然です。

34. 人 間 は 何 を し た か 忘 れ る も の
BAD
調査していてもログから探すの面倒
更新履歴を見せていないと…

35. Entity を配列に変換したものをひたすら保存
9/27
name: test
price: 10
9/28
name: test2
price: 10
9/29
name: test2
price: 30
9/27,28 のdiff
name: test => test2
9/28,29 のdiff
price: 10 => 30

36. 更新履歴
2015-09-29 13:40:12 - 案件の更新 ユーザID: 1
!
price
更新前: 10
更新後: 30
!
2015-09-28 15:29:44 - 案件の更新 ユーザID: 2
2015-09-27 15:00:55 - 案件の新規登録 ユーザID: 1
シンプルにdiffを更新履歴として見せるだけ
1つ前とのdiff から表示
ユーザー名じゃなくてもなんとなく分かるよね
単価 って言わなくてもなんとなく分かるよね

37. 更新履歴を見せる
変化を記録するのではなく状態を記録
Better
複数個前の状態とも比較が楽
array_diff 便利

38. 嫌な兆候を事前に把握
その3

39. タイムアウトで500エラー
メモリ不足で500エラー
問題が起きてから気づくのは当たり前

40. 問題が起きてから気づくのは当たり前
Symfonyだと ルーティング定義名毎の Transactionが見えます

41. 問題が起きる前に気づくための工夫
レスポンスに40秒以上掛かったらwarning
メモリ上限の90%超え たらwarning
閾値を超えたらwarningのログを残す
http://d.hatena.ne.jp/brtRiver/20131206/1386345547

42. warning の通知は Slackに
Slack は通知に気づきやすい

43. monolog 便利
fingers_crossed で詳細なログを残す

44. エンジニアからアクション(コミュニケーション)を
Aさん
エンジニア
A さ ん ! レ ポ ー ト の 取 得 期 間 が 長 す ぎ
て 時 間 が 掛 か り 過 ぎ て る よ う な の で 、
期 間 を 短 く して 試 して も ら え ま す か ？
お。そうなんだ。ありがとう
warning 発生

45. 嫌な兆候を把握することで
事前に気づくことで大きな障害を起こさない
Better
エンジニアから営業にコミュニケーション

46. デプロイ時の工夫
こっ そり リリース

47. 導線を用意せずページを増やして確認
一覧
現レポート画面
リンク
/report
新レポート画面
deploy
/report2
本番環境のデータで 新レポート画面 と 現レポート画面を比較

48. 別URLでリリースすることで
本番 データで動作確認比較ができる
Better
既存の画面のコードに修正が不要 (安全)

49. データの変化に気づく工夫
slack の活用

50. Slack だとアクションを起こしやすい
管理画面
案件停止
通知
「何か聞いてる？」
「確認します」

51. monolog に slack 用の Handler あります

52. メール と Slack を併用する
Slack の スマホのpush通知は気づきやすい
Better
Slack はメールに返信するよりコストが低い
Slack の通知はAPIが失敗することあるので注意

53. • コ ミ ュ ニ ケ ー シ ョ ン の 工 夫
• 運 用 を 楽 に す る た め の 工 夫
• 機 能 開 発 の デ プ ロ イ の 工 夫
• データの変化に気づくための工夫
気づける 管理画面のためにやっている工夫

54. 気づける管理画面は
サービスの質を向上させます

55. 気づける管理画面を開発しましょう！
https://joind.in/15322
もっと濃い話は声掛けてください