Soumettre la recherche
Mettre en ligne
ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2
•
38 j'aime
•
12,727 vues
Masahiro Akita
Suivre
管理画面チラ見せ♡ナイト #2 : ATND https://atnd.org/events/57411 での発表資料です。 株式会社nanapi 秋田真宏
Lire moins
Lire la suite
Ingénierie
Signaler
Partager
Signaler
Partager
1 sur 32
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
関西で働くという生き方
関西で働くという生き方
Manabu Yamamoto
Jawsfeta tohoku lt_20140906
Jawsfeta tohoku lt_20140906
Takayuki Niinuma
Umekita force 2014_0905_デブサミ関西2014コミュニティlt
Umekita force 2014_0905_デブサミ関西2014コミュニティlt
Hideki Akizuki
自分のアプリをつくろう
自分のアプリをつくろう
Satoru Ishikawa
JavaScript祭りLTでmonacaを紹介
JavaScript祭りLTでmonacaを紹介
Yuki Okamoto
SierでScalaを試した結果 Web系に転職した話
SierでScalaを試した結果 Web系に転職した話
bakenezumi
4月21日にクライアントを不安にさせない Googleモバイルアルゴリズムの基礎知識
4月21日にクライアントを不安にさせない Googleモバイルアルゴリズムの基礎知識
Naoto Nakatani
個人開発でサービスを作る < 0→1のはじめかた >
個人開発でサービスを作る < 0→1のはじめかた >
慎吾 入江
Recommandé
関西で働くという生き方
関西で働くという生き方
Manabu Yamamoto
Jawsfeta tohoku lt_20140906
Jawsfeta tohoku lt_20140906
Takayuki Niinuma
Umekita force 2014_0905_デブサミ関西2014コミュニティlt
Umekita force 2014_0905_デブサミ関西2014コミュニティlt
Hideki Akizuki
自分のアプリをつくろう
自分のアプリをつくろう
Satoru Ishikawa
JavaScript祭りLTでmonacaを紹介
JavaScript祭りLTでmonacaを紹介
Yuki Okamoto
SierでScalaを試した結果 Web系に転職した話
SierでScalaを試した結果 Web系に転職した話
bakenezumi
4月21日にクライアントを不安にさせない Googleモバイルアルゴリズムの基礎知識
4月21日にクライアントを不安にさせない Googleモバイルアルゴリズムの基礎知識
Naoto Nakatani
個人開発でサービスを作る < 0→1のはじめかた >
個人開発でサービスを作る < 0→1のはじめかた >
慎吾 入江
オンラインサロンSynapseの管理画面論
オンラインサロンSynapseの管理画面論
Kentaro Tamura
Cloud CMOの管理画⾯ チラ♡⾒せナイト
Cloud CMOの管理画⾯ チラ♡⾒せナイト
Innova Inc.
pocket concierge
pocket concierge
Ryosuke Kawamura
kitaro_tiramise
kitaro_tiramise
Tadasuke Kato
Raksul 管理画面チラ♡見せナイト
Raksul 管理画面チラ♡見せナイト
Yuta Tonegawa
管理画面チラ見せ-シスウ株式会社
管理画面チラ見せ-シスウ株式会社
Yoshihiko Hoshino
管理画面チラ見せナイト3 登壇資料
管理画面チラ見せナイト3 登壇資料
Yusuke Kon
2014.07.29 管理画面チラ見せ♡ナイト
2014.07.29 管理画面チラ見せ♡ナイト
pandeiro245
省リソース管理画面
省リソース管理画面
Sohei Iwahori
cloudpackを支える認証技術
cloudpackを支える認証技術
Kazuhiko ISOBE
【管理画面チラ見せナイト #4】ヌリカエCSを支える技術
【管理画面チラ見せナイト #4】ヌリカエCSを支える技術
Kohtaro Nishi
「オルタンシア・サーガ」開発の裏側
「オルタンシア・サーガ」開発の裏側
geechs inc. / geechs株式会社
20160803 axa agreement_ver1
20160803 axa agreement_ver1
loftwork
リソースのバージョン管理/運用の失敗談と改善策について
リソースのバージョン管理/運用の失敗談と改善策について
geechs inc. / geechs株式会社
Wantedlyインターン発表会
Wantedlyインターン発表会
Kenji Tanaka
すし×グローバリゼーション
すし×グローバリゼーション
Takuya Oikawa
Webエンジニアに贈る、正しい番犬の飼い方
Webエンジニアに贈る、正しい番犬の飼い方
Innova Inc.
広告費0円で10万DLさせたグロースハック
広告費0円で10万DLさせたグロースハック
Toshiki Chiba
【ランサーズ】 DevOpsで実現するグロースハック
【ランサーズ】 DevOpsで実現するグロースハック
Kei Kinoshita
PivotalTrackerでシンプルなタスク管理のススメ
PivotalTrackerでシンプルなタスク管理のススメ
Taiyo Kojima
「個」から「集」のデザイン
「個」から「集」のデザイン
Mari Kimura
デザイナーの私と サービスをつくる私
デザイナーの私と サービスをつくる私
Shizuka Yamada
Contenu connexe
En vedette
オンラインサロンSynapseの管理画面論
オンラインサロンSynapseの管理画面論
Kentaro Tamura
Cloud CMOの管理画⾯ チラ♡⾒せナイト
Cloud CMOの管理画⾯ チラ♡⾒せナイト
Innova Inc.
pocket concierge
pocket concierge
Ryosuke Kawamura
kitaro_tiramise
kitaro_tiramise
Tadasuke Kato
Raksul 管理画面チラ♡見せナイト
Raksul 管理画面チラ♡見せナイト
Yuta Tonegawa
管理画面チラ見せ-シスウ株式会社
管理画面チラ見せ-シスウ株式会社
Yoshihiko Hoshino
管理画面チラ見せナイト3 登壇資料
管理画面チラ見せナイト3 登壇資料
Yusuke Kon
2014.07.29 管理画面チラ見せ♡ナイト
2014.07.29 管理画面チラ見せ♡ナイト
pandeiro245
省リソース管理画面
省リソース管理画面
Sohei Iwahori
cloudpackを支える認証技術
cloudpackを支える認証技術
Kazuhiko ISOBE
【管理画面チラ見せナイト #4】ヌリカエCSを支える技術
【管理画面チラ見せナイト #4】ヌリカエCSを支える技術
Kohtaro Nishi
「オルタンシア・サーガ」開発の裏側
「オルタンシア・サーガ」開発の裏側
geechs inc. / geechs株式会社
20160803 axa agreement_ver1
20160803 axa agreement_ver1
loftwork
リソースのバージョン管理/運用の失敗談と改善策について
リソースのバージョン管理/運用の失敗談と改善策について
geechs inc. / geechs株式会社
Wantedlyインターン発表会
Wantedlyインターン発表会
Kenji Tanaka
すし×グローバリゼーション
すし×グローバリゼーション
Takuya Oikawa
Webエンジニアに贈る、正しい番犬の飼い方
Webエンジニアに贈る、正しい番犬の飼い方
Innova Inc.
広告費0円で10万DLさせたグロースハック
広告費0円で10万DLさせたグロースハック
Toshiki Chiba
【ランサーズ】 DevOpsで実現するグロースハック
【ランサーズ】 DevOpsで実現するグロースハック
Kei Kinoshita
PivotalTrackerでシンプルなタスク管理のススメ
PivotalTrackerでシンプルなタスク管理のススメ
Taiyo Kojima
En vedette
(20)
オンラインサロンSynapseの管理画面論
オンラインサロンSynapseの管理画面論
Cloud CMOの管理画⾯ チラ♡⾒せナイト
Cloud CMOの管理画⾯ チラ♡⾒せナイト
pocket concierge
pocket concierge
kitaro_tiramise
kitaro_tiramise
Raksul 管理画面チラ♡見せナイト
Raksul 管理画面チラ♡見せナイト
管理画面チラ見せ-シスウ株式会社
管理画面チラ見せ-シスウ株式会社
管理画面チラ見せナイト3 登壇資料
管理画面チラ見せナイト3 登壇資料
2014.07.29 管理画面チラ見せ♡ナイト
2014.07.29 管理画面チラ見せ♡ナイト
省リソース管理画面
省リソース管理画面
cloudpackを支える認証技術
cloudpackを支える認証技術
【管理画面チラ見せナイト #4】ヌリカエCSを支える技術
【管理画面チラ見せナイト #4】ヌリカエCSを支える技術
「オルタンシア・サーガ」開発の裏側
「オルタンシア・サーガ」開発の裏側
20160803 axa agreement_ver1
20160803 axa agreement_ver1
リソースのバージョン管理/運用の失敗談と改善策について
リソースのバージョン管理/運用の失敗談と改善策について
Wantedlyインターン発表会
Wantedlyインターン発表会
すし×グローバリゼーション
すし×グローバリゼーション
Webエンジニアに贈る、正しい番犬の飼い方
Webエンジニアに贈る、正しい番犬の飼い方
広告費0円で10万DLさせたグロースハック
広告費0円で10万DLさせたグロースハック
【ランサーズ】 DevOpsで実現するグロースハック
【ランサーズ】 DevOpsで実現するグロースハック
PivotalTrackerでシンプルなタスク管理のススメ
PivotalTrackerでシンプルなタスク管理のススメ
Similaire à ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2
「個」から「集」のデザイン
「個」から「集」のデザイン
Mari Kimura
デザイナーの私と サービスをつくる私
デザイナーの私と サービスをつくる私
Shizuka Yamada
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
Kentaro Matsumae
スマートフォンアプリ開発におけるディレクション
スマートフォンアプリ開発におけるディレクション
GIG inc.
女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?
女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?
Yuka Masaki
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
React way at_eight
React way at_eight
Hideharu Okuma
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
Takeshiro Kani
ウェブ開発者がやさしい日本語に取り組んでわかったこと - ウェブでの情報提供とやさしい日本語 発表スライド
ウェブ開発者がやさしい日本語に取り組んでわかったこと - ウェブでの情報提供とやさしい日本語 発表スライド
junnamacom
[_gaTracker]GAのここがすき。ここがきらい。
[_gaTracker]GAのここがすき。ここがきらい。
Toru Enomoto
エンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えます
エンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えます
Yuka Masaki
企業WebサイトにおけるグローバルWebガバナンスパターン
企業WebサイトにおけるグローバルWebガバナンスパターン
Concent, Inc.
インタラクションツール最前線!〜プロトタイピングツールの使い分け〜
インタラクションツール最前線!〜プロトタイピングツールの使い分け〜
Ryo Yoshitake
師弟登壇2015 GMOペパボ @orzup
師弟登壇2015 GMOペパボ @orzup
Asami Nakano
20130622_android横須賀_LT
20130622_android横須賀_LT
kei aran
会社やお店のホームページを自分で作ろう!
会社やお店のホームページを自分で作ろう!
Web自社運営の会
オールアバウトのアプリ開発
オールアバウトのアプリ開発
Kazuki Tsurugai
Swift勉強会2
Swift勉強会2
Hikari Yanagihara
HTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionic
Kenichi Kanai
保守性の高いアプリケーション設計について
保守性の高いアプリケーション設計について
TomomitsuKusaba
Similaire à ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2
(20)
「個」から「集」のデザイン
「個」から「集」のデザイン
デザイナーの私と サービスをつくる私
デザイナーの私と サービスをつくる私
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
スマートフォンアプリ開発におけるディレクション
スマートフォンアプリ開発におけるディレクション
女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?
女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
React way at_eight
React way at_eight
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
ウェブ開発者がやさしい日本語に取り組んでわかったこと - ウェブでの情報提供とやさしい日本語 発表スライド
ウェブ開発者がやさしい日本語に取り組んでわかったこと - ウェブでの情報提供とやさしい日本語 発表スライド
[_gaTracker]GAのここがすき。ここがきらい。
[_gaTracker]GAのここがすき。ここがきらい。
エンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えます
エンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えます
企業WebサイトにおけるグローバルWebガバナンスパターン
企業WebサイトにおけるグローバルWebガバナンスパターン
インタラクションツール最前線!〜プロトタイピングツールの使い分け〜
インタラクションツール最前線!〜プロトタイピングツールの使い分け〜
師弟登壇2015 GMOペパボ @orzup
師弟登壇2015 GMOペパボ @orzup
20130622_android横須賀_LT
20130622_android横須賀_LT
会社やお店のホームページを自分で作ろう!
会社やお店のホームページを自分で作ろう!
オールアバウトのアプリ開発
オールアバウトのアプリ開発
Swift勉強会2
Swift勉強会2
HTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionic
保守性の高いアプリケーション設計について
保守性の高いアプリケーション設計について
ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せナイト#2
1.
ぼくのかんがえた さいきょうの アンサー管理画面
2014/10/21 at 管理画面チラ見せ♡ナイト #2
2.
自己紹介 秋田 真宏
/ あきやん 株式会社 nanapi エンジニア (社員) • 2011年4月nanapi入社 (4年目) • akiyan.com でブログを書いてます • 社内向けの管理画面を作るのが大好きです
3.
アンサーとは • 即レスコミュニケーションサービス
• iOS / Android ネイティブアプリ展開 • リリースから約1年 • 2014年9月1日時点で累計 5,000万 コメント
4.
こんな感じ
5.
アンサー管理画面を使う人たち ディレクター アプリエンジニア
サーバーサイドエンジニア ←俺 オペレーター 全員社内の人間。
6.
今日伝えたいこと さいきょうの管理画面である ためにしている5つのこと
7.
ここから管理画面!
8.
1. リンクしまくる
9.
1. リンクしまくる •
IDがあれば詳細ページヘ • 参照IDや集計値があれば一覧ページへ リンクが多いとデータをどんどん辿れるのでデ バッグがスムーズ。 「この集計の内訳は?」が知りたいときにいち いちフォームから検索しなくていい。 ほとんどのデータにパーマリンクがあると、何 かと社内コミュニケーションが捗る。
10.
2. 横幅は貴重な資源なのでリッチに表現する
11.
2. 横幅は貴重な資源なのでリッチに表現する 横幅を節約すると1画面に表示できる情報が増えて
デバッグが捗る。 荒らし対応やユーザーサポートも捗る。 アイコンは Bootstrap や Fontawesome など のCSSだけで表示させられるアイコンが便利。 適切なアイコンがわからない時はデザイナーさん に相談すると解決する。 日付時刻の2段表示はかなりオススメ!
12.
3. アプリ画面を再現する
13.
3. アプリ画面を再現する アプリでいちいち表示確認するのが面倒くさく
なってカッとなって作った。 再現画面からも全てのデータにリンクを張る (ユーザーや発言の詳細画面へ)。 社内チャットの「こんな投稿があるよシェア」 で大活躍(チャットからアプリで該当のスポッ トを開くのはかなりの手間)。
14.
4. まさかのレスポンシブデザイン
15.
4. まさかのレスポンシブデザイン ノリで最適化したら結構使いどころがあった。
社内専用ビルドでアプリから直接に管理画面を 開けるようにしてもらった。 アプリを使っていて管理画面で裏側を確認した いときに捗るようになった。 偶然見つけたものに即応できるようになった。
16.
5. 反復作業はフルキーボード操作で完結 [
デモ画面 ]
17.
5. 反復作業はフルキーボード操作で完結 最初は普通にリンクで操作する画面だった
画面の更新を待つのがだるい > 非同期化 マウス操作がだるい > キーボード化 20倍の速度で処理できるようになった
18.
なんで!?
19.
なぜここまで作りこむのか • ベースのモチベーションは趣味の領域
• 便利なものを作りたい欲求がなんかすごい • 管理画面は思いついた便利機能をゼロ確認で実装で きる • 辿れるデータは全てリンクで辿りたいし辿らせたい • 全てのデータにパーマリンクが欲しい • 何度も同じSQLを打ちたくない
20.
作りこんでよかったこと • エンジニアにとって便利な機能はみんなにとっ
ても便利 • 便利機能を作ると喜びの声が聞けてモチベーショ ンが上がる • デバッグしてもらえる範囲が広がる • 1人で完結するウェブアプリケーションはすご い速度で作れるので作っていて楽しい
21.
KPIとかは?
22.
定量的なモニタリング機能はつけない • KPIなどの追跡は管理画面では行わない
• RDBMSに格納されたデータの集計でわかる範囲は狭い • KVSへの移行によって出来なくなることもある • アクセスログを元に TresureData や Google Big Query を 使う。RDBMSともJOINする • アンサーではディレクターや専門チームが行っている • バックトラックなどの超重い分析も可能 • 複雑なクエリはエンジニアが見てもひと目では理解できない • 解析結果の適切なビジュアライズは素人には難しいので専門家 にやってもらったほうがいい
23.
きょうのまとめ
24.
まとめ 管理画面の作り込みは楽しい フィードバックが嬉しい
! パーマリンク便利
25.
おまけの面白画面
26.
ダッシュボード
27.
ダッシュボード • Analytics
のようなかっこいい集計画面への憧 れがあった • 定量的な「いまの雰囲気」を表現したかった • グラフ描画には Goolge Graph API を使った • リリース後データ量が増えてクエリが重くなる 度にどんどん情報が減っていった
28.
タイムマシーン
29.
タイムマシーン • 過去のある時点でのホーム画面を再現できる
• 同時刻の年代別の投稿をひと目で比較できる • 「正月の雰囲気ってどんな感じだったっけ?」 • 「年代別でどう違うんだっけ?」 • といったことが気になって作ったら面白そうだ し勢いで作った
30.
翻訳
31.
翻訳 • 無断で中国語版Androidアプリが作られて配布され
たときに、中国語のコメントが大量に流れた • 中国語は雰囲気しかわからなくて意味不明 • いちいちコピペして翻訳するのが面倒だったので、 Google 翻訳の結果を自動で開くリンクをつけた • 意外と普通にユーザーとして参加していてほっこり したが、既存ユーザーは混乱した
Télécharger maintenant