管理画面!

前田 雅央 @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がずっと同じ

無駄にPOSTで画面遷移

何故URLを共有できないのか

ajaxで裏で画面遷移せずがんばりすぎ

確認しようにもパラメータが不明

共有できる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 のdiffname: test => test2

9/28,29 のdiffprice: 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

もっと濃い話は声掛けてください