営業・運用を支える "気付ける" 管理画面

Masao Maeda
Masao Maeda社内PA at VOYAGE GROUP
管理画面
!
前田 雅央 @brtriver
気づける
営業・運用を支える
PHPカンファレンス 2015
株式会社 Zucks
https://joind.in/15322
@brtriver
営業・運用を支える "気付ける" 管理画面
アドネットワークとは?
アドネットワーク
広告主
広告主
広告主
① 広告入稿
④ 収益レポート
③ 配信調整
営業・運用
② 広告配信
アドネットワーク
広告主
広告主
広告主
① 広告入稿② 広告配信
③ 配信調整
営業・運用
管理画面
④ 収益レポート
アドネットワークとは?
管理画面開発したことありますか?
• コ ミ ュ ニ ケ ー シ ョ ン の 工 夫
• 運 用 を 楽 に す る た め の 工 夫
• 機 能 開 発 の デ プ ロ イ の 工 夫
• データの変化に気づくための工夫
気づける 管理画面のためにやっている工夫
管 理 画 面 と は
管理画面の主な機能
• ユーザー、権限管理
• データのCRUD処理
• レポーティング機能、データ出力 (CSV)
管理画面あるある
• 使いづらい画面でも利用者が使いこなしてしまう
• 何度か作り直したくなる病が発病する。が諦める
• 使われているか分からない機能、画面がある
長期運用されてくると…
• 裏機能がいつのまにかできてる
管理画面の種類
利用ユーザーが限定的な管理画面
誰でもアカウントを作成可能な開放された管理画面
社内システムの管理画面
PHPMyAdmin
会社ブログの管理画面
Google Analytics の管理画面
<何かしらのサービス> の管理画面
利用ユーザーが限定的な管理画面
誰でもアカウントを作成可能な開放された管理画面
Zucks AdNetwork アプリ開発者用 管理画面
Zucks AdNetwork 運用チーム用 管理画面
管理画面の種類
限定 と 開放 の違い
限定 開放
同 時 ア ク セ ス 数 少 な い 多 い
利 用 者 の 声 聞きやすい 聞こえづらい
メンテナンスのための停止
気楽に 丁寧に
大胆な改修、機能停止
今日のメインの話はココ
利用ユーザーが限定的な管理画面
誰でもアカウントを作成可能な
Zucks AdNetwork
Zucks AdNetwork 運用チーム用 管理画面
管理画面の種類
コミュニケーションの工夫
何 故 必 要 な の で す か ? を 聞 く
一緒にサービスを作る必要
コ ミ ュ ニ ケ ー シ ョ ン 力
りょく
現 場 の 声 を 聞 き な が ら
観   察   力
りょく
期間、案件名、配信状態、アプリ名
で絞り込んで単価調整したいんだよね
なるほど。じゃあ、検索フォーム作りましょう
現場
エンジニア
コミュニケーション力、観察力が足らないと…
期間
案件名
配信状態
メディア名
2015-09-01 2015-09-01
配信中 停止中
検 索
and or
メディア名 条件追加
OS種別 iOS Android
広告種別 インライン インタースティシャル
リッチな検索フォームつくったど!
ああ。うん。(毎回条件指定するの大変なんだよね)
ところで検索フォームって大活躍してますか?
後日…
心の声はあまりエンジニアには聞こえてこない
コミュニケーション力、観察力が足らないと…
期間、案件名、配信状態、アプリ名で絞り込みしたい
それらの項目の中でいつも最初に絞り込むのは何ですか?
あー。期間を最初に絞り込んでから他の軸を見てるね
じゃあ、期間を最初に指定できるようにしましょう
なぜ必要なのか を質問する
期 間 を 指 定 ( 固 定 )
一覧から案件名、OS種別 etc… でフィルタリング
単 価 画 面 に 遷 移 し 調 整 作 業
実際の業務フローが見えてきた
繰り返し
なぜ必要なのか を質問する
管理画面全体で共通の期間設定
Google Analytics も…
シンプルなフィルタがあれば十分だった
文字列で全体検索
候補からフィルタ
ページャは大体シンプルでOK
前へ 次へ1 2 3 4 5 6 7
○ページ目を直接指定することはほぼない
必要なのは、最初、前へ、次へ、最後
最初 最後
フォームは最低限実装に。何も困ってない
それぞれの項目を何故必要なのかを確認
結 果
運用を楽にする工夫
嫌 な 兆 候 を 事 前 に 把 握
更新履歴をシンプルに表示
共 有 で き る U R L
共有できるURL
その1
URLを伝えれば同じ画面を確認できる仕組み
共有できるURLがないと…
営業 エンジニア
どのページですか?
../user/articles/list
どのお客さんですか…?
お客さんから表示されるはずのデータが見えないという
問い合わせがあるんだけど…
URLに必要な情報が不足
BAD
ログイン後のURLがずっと同じ
無 駄 に P O S T で 画 面 遷 移
何故URLを共有できないのか
a j a x で 裏 で 画 面 遷 移 せ ず が ん ば り す ぎ
確認しようにもパラメータが不明
共有できるURLがあると
営業 エンジニア
URLください
../user/brtriver/articles/list
確認します
お客さんから表示されるはずのデータが見えないという
問い合わせがあるんだけど…
URLを貰えば同じ画面がみれる
Better
アクセスログからも調査しやすい
共有できるURLがあると
更新履歴をシンプルに表示
その2
更新履歴を見せていないと…
営業 エンジニア
え?いつのまにか?
変更していないはず
調べてみますね…
案件の単価がいつのまにか30円になってるんだけど
※ 営業さん悪くないです。人間どういった操作したかなんて覚えてません。ごく自然です。
人 間 は 何 を し た か 忘 れ る も の
BAD
調査していてもログから探すの面倒
更新履歴を見せていないと…
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
更新履歴
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 から表示
ユーザー名じゃなくてもなんとなく分かるよね
単価 って言わなくてもなんとなく分かるよね
更新履歴を見せる
変化を記録するのではなく状態を記録
Better
複数個前の状態とも比較が楽
array_diff 便利
嫌な兆候を事前に把握
その3
タイムアウトで500エラー
メモリ不足で500エラー
問題が起きてから気づくのは当たり前
問題が起きてから気づくのは当たり前
Symfonyだと ルーティング定義名毎の Transactionが見えます
問題が起きる前に気づくための工夫
レスポンスに40秒以上掛かったらwarning
メモリ上限の90%超え たらwarning
閾値を超えたらwarningのログを残す
http://d.hatena.ne.jp/brtRiver/20131206/1386345547
warning の通知は Slackに
Slack は通知に気づきやすい
monolog 便利
fingers_crossed で詳細なログを残す
エンジニアからアクション(コミュニケーション)を
Aさん
エンジニア
A さ ん ! レ ポ ー ト の 取 得 期 間 が 長 す ぎ
て 時 間 が 掛 か り 過 ぎ て る よ う な の で 、
期 間 を 短 く して 試 して も ら え ま す か ?
お。そうなんだ。ありがとう
warning 発生
嫌な兆候を把握することで
事前に気づくことで大きな障害を起こさない
Better
エンジニアから営業にコミュニケーション
デプロイ時の工夫
こっ そり リリース
導線を用意せずページを増やして確認
一覧
現レポート画面
リンク
/report
新レポート画面
deploy
/report2
本番環境のデータで 新レポート画面 と 現レポート画面を比較
別URLでリリースすることで
本番 データで動作確認比較ができる
Better
既存の画面のコードに修正が不要 (安全)
データの変化に気づく工夫
slack の活用
Slack だとアクションを起こしやすい
管理画面
案件停止
通知
「何か聞いてる?」
「確認します」
monolog に slack 用の Handler あります
メール と Slack を併用する
Slack の スマホのpush通知は気づきやすい
Better
Slack はメールに返信するよりコストが低い
Slack の通知はAPIが失敗することあるので注意
• コ ミ ュ ニ ケ ー シ ョ ン の 工 夫
• 運 用 を 楽 に す る た め の 工 夫
• 機 能 開 発 の デ プ ロ イ の 工 夫
• データの変化に気づくための工夫
気づける 管理画面のためにやっている工夫
気づける管理画面は
サービスの質を向上させます
気づける管理画面を開発しましょう!
https://joind.in/15322
もっと濃い話は声掛けてください
1 of 55

More Related Content

What's hot(20)

スペシャリストになるにはスペシャリストになるには
スペシャリストになるには
外道 父12.2K views

Similar to 営業・運用を支える "気付ける" 管理画面(20)

Webmarketing_CareerBar_ver1.pdfWebmarketing_CareerBar_ver1.pdf
Webmarketing_CareerBar_ver1.pdf
Cybozu, Inc.2.4K views
運用管理を楽にしたいという話運用管理を楽にしたいという話
運用管理を楽にしたいという話
Hisashi HATAKEYAMA1K views
LOGLY会社概要.pdfLOGLY会社概要.pdf
LOGLY会社概要.pdf
ssuser2dc9211.2K views
ユーザ目線の実践的BPMユーザ目線の実践的BPM
ユーザ目線の実践的BPM
Shigeaki Wakizaka2.6K views
Base 20141011 1_for_slideshreBase 20141011 1_for_slideshre
Base 20141011 1_for_slideshre
正善 大島1.4K views
すごいタスク管理(仮)すごいタスク管理(仮)
すごいタスク管理(仮)
Kakigi Katuyuki1.7K views
SocialAnalyticsとCQ5がスゴイSocialAnalyticsとCQ5がスゴイ
SocialAnalyticsとCQ5がスゴイ
Makoto Shimizu1.8K views
楽天エンジニアライフ楽天エンジニアライフ
楽天エンジニアライフ
Rakuten Group, Inc.4.3K views
connpass特徴と開発の流れconnpass特徴と開発の流れ
connpass特徴と開発の流れ
Ikeda Yosuke1.5K views

More from Masao Maeda(7)

営業・運用を支える "気付ける" 管理画面