Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
管理画面 ! 前田 雅央 @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 nam...
更新履歴 2015-09-29 13:40:12 - 案件の更新 ユーザID: 1 ! price 更新前: 10 更新後: 30 ! 2015-09-28 15:29:44 - 案件の更新 ユーザID: 2 2015-09-27 15:00:...
更新履歴を見せる 変化を記録するのではなく状態を記録 Better 複数個前の状態とも比較が楽 array_diff 便利
嫌な兆候を事前に把握 その3
タイムアウトで500エラー メモリ不足で500エラー 問題が起きてから気づくのは当たり前
問題が起きてから気づくのは当たり前 Symfonyだと ルーティング定義名毎の Transactionが見えます
問題が起きる前に気づくための工夫 レスポンスに40秒以上掛かったらwarning メモリ上限の90%超え たらwarning 閾値を超えたらwarningのログを残す http://d.hatena.ne.jp/brtRiver/2013120...
warning の通知は Slackに Slack は通知に気づきやすい
monolog 便利 fingers_crossed で詳細なログを残す
エンジニアからアクション(コミュニケーション)を Aさん エンジニア A さ ん ! レ ポ ー ト の 取 得 期 間 が 長 す ぎ て 時 間 が 掛 か り 過 ぎ て る よ う な の で 、 期 間 を 短 く して 試 して も...
嫌な兆候を把握することで 事前に気づくことで大きな障害を起こさない Better エンジニアから営業にコミュニケーション
デプロイ時の工夫 こっ そり リリース
導線を用意せずページを増やして確認 一覧 現レポート画面 リンク /report 新レポート画面 deploy /report2 本番環境のデータで 新レポート画面 と 現レポート画面を比較
別URLでリリースすることで 本番 データで動作確認比較ができる Better 既存の画面のコードに修正が不要 (安全)
データの変化に気づく工夫 slack の活用
Slack だとアクションを起こしやすい 管理画面 案件停止 通知 「何か聞いてる？」 「確認します」
monolog に slack 用の Handler あります
メール と Slack を併用する Slack の スマホのpush通知は気づきやすい Better Slack はメールに返信するよりコストが低い Slack の通知はAPIが失敗することあるので注意
• コ ミ ュ ニ ケ ー シ ョ ン の 工 夫 • 運 用 を 楽 に す る た め の 工 夫 • 機 能 開 発 の デ プ ロ イ の 工 夫 • データの変化に気づくための工夫 気づける 管理画面のためにやっている工夫
気づける管理画面は サービスの質を向上させます
気づける管理画面を開発しましょう！ https://joind.in/15322 もっと濃い話は声掛けてください
営業・運用を支える "気付ける" 管理画面
Próxima SlideShare
Cargando en…5
×

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

34.041 visualizaciones

Publicado el

動画: https://youtu.be/CqMILKp3Ens?t=3h53m39s

PHPカンファレンス2015での講演資料。
データを管理するだけが管理画面じゃない。サービスの質を向上させていくことができる最強の管理画面を開発運用していて意識していることを4つの工夫を軸にまとめています

joind.in: https://joind.in/15322

Publicado en: Tecnología
no profile picture user

  • Inicia sesión para ver los comentarios

Mostrar más

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

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

×