ぼくのかんがえたさいきょうのアンサー管理画面 書き起こし

管理画面 Advent Calendar 2014 の5日目への参加として、「ぼくのかんがえたさいきょうのアンサー管理画面」の書き起こしを公開します。

ぼくのかんがえたさいきょうのアンサー管理画面 at 管理画面チラ見せ♡ナイト #2 プレゼン書き起こし

株式会社nanapiの秋田と申します。よろしくお願いします。ちなみにnanapiを知らない人いますか？いないですね。じゃあ、アンサーを知っている人は？ありがとうございます。すでにアンサーをインストールした人は？おお、ありがとうございます。手を挙げてない方は今日インストールして帰ってください。

それでは「ぼくがかんがえたさいきょうのアンサー管理画面」を発表します。

自己紹介です。フルネームは秋田真宏で、あきやんという名前で活動しています。nanapiのエンジニア社員です。2010年入社で入社4年目で、個人ブログも書いてます。社内向けの管理画面を作るのが大好きです。むちゃくちゃ好きです。

アンサーの説明です。アンサーは即レスコミュニケーションサービスです。iOSとAndoirdのネイティブアプリで展開してまして、ウェブは閲覧だけです。リリースから1年ほど経過してまして、9月の先月時点で5000万コメントを記録しています。

実際の画面です。左がホーム画面で、並んでいるのはスポットという名前で所謂掲示板のスレッドにあたるものですね。それをタップするとスポットの詳細があって、コメントがずらずら並んでいると。これで皆でコメントしてコミュニケーションをしましょう、というサービスになっています。

アンサーの管理画面を使う人たちなんですが、ディレクターとアプリエンジニアとサーバー管理エンジニアに分かれます。あとオペレータの人がいて、一番使うのはオペレータの人です。全員社内の人間です。

今日伝えたいことである「最強の管理画面であるためにしている5つのこと」をご紹介します。あ、すみません、最初に聞き忘れました。nanapiが買収されたことを知っている人？あ、いましたね。今日はその話はしません。

ここから管理画面です。まず、リンクしまくります、とにかく。ユーザーが投稿したものは全て把握したいので、基本情報だけでなく、スポット一覧、コメント一覧、画像一覧、ランキング、メッセージ、その人の動画など、全部ここからリンクで辿ることができます。

編集画面を下にスクロールするとさらに、参加数、コメント数とかばーっと集計された数字が並んでいます。ここで集計値にも全部リンクを貼って、一覧に飛べるようにしています。とにかく何か辿れそうだなと思ったらリンクします。例えばDBで集計値を出した時には絶対にリンクするみたいな、そういう感じでやってます。IDもあれば、詳細ページにリンクします。

リンクがあれば、集計値の内訳を知りたい時に、いちいち検索しなおさなくても辿れます。また、ほとんどのデータにパーマリンクがあると、社内チャットとかでURLを渡すだけで見てもらえるので、コミュニケーションがはかどります。

2番。横幅は貴重な資源なので一気に表現する。貴重な資源というのは、画面サイズですね。横スクロールとかやらせたくないんで、表示を節約するために、例えばユーザー名を出すところには左に性別のアイコンを出します。あとこの記号みたいなマークは、公式ユーザーです。ニックネームではなくIDが表示されている行は、退会するとニックネームがなくなるので最初は空にしてたんですね、で、空だといけないので、IDを表示しちゃってます。

赤くなってるのは、BANされたユーザーを示しています。旗のマークはボランティアユーザーのアイコンです。こんな感じで、結構いろんな情報を詰めこんでいます。アイコン選びは悩みどころなんですが、デザイナーさんに聞くと、すごくよい答えをくれるのでおススメです。

次にスポット一覧なんですが、削除されたスポットは打ち消し線をつけて、中身は残します。赤くなっているのはスポット自体がBAN対象となった場合です。画像も添付されているのがあれば抽出して表示します。

そしてここ、投稿日の日付と時刻を上下に表示することで、横幅を節約するように最近しました。これがかなりおすすめです。実は前回のカンムさんの発表で、この表示を見まして、取り入れさせて頂きました、ありがとうございます。

3番。アプリ画面を再現。左はアプリ画面のスクリーンショットなんですが、右は管理画面です。ほぼ同じ感じで見れるようになってます。これが魅力的でして。なんで作ったかというと、アプリ画面を端末から開くのが面倒くさくなって、カッとなって作りました。そして再現画面のデータにはすべてリンクを貼ってます。コメントなら、コメントの編集ページを開きます。

社内チャットでこんなスレッドがあるよとシェアされることがあって、この画面を作る前はアプリをいちいち開かないとそれの雰囲気がわからなかったんですが、この再現画面のURLを社内チャットで投げることで皆さんすぐPCから見れるんで、はかどります。

4番。まさかのレスポンシブデザインです。これ全部同じ画面です。別々に用意しているわけなくて、いわゆるレスポンシブですね。結構ちゃんとやってて、テーブルでは、不要なカラムを消しました。このボタンはスマホの時だけ出るもので、ここからアプリを直接開けるようにしました。

これもノリで対応しちゃったんですけど、結構使いどころがありました。まず、社内専用ビルドでアプリから直接管理画面を開くようにしてもらいました。そうするとアプリを使っていて、管理画面で裏側でどういうユーザーが使っているのっていうのを確認する時にすごいはかどるようになりました。で、実際にユーザーとして使っていて、偶然見つけた違反とか速報できるようになって、よかったです。

5番。反復作業はキーボード操作で。これはデモ画面でやります。デモはテスト環境の画面なので（個人情報的に）大丈夫です。（デモ画面のスクリーンショットはありません）

アンサーにはコメント違反報告というものがありまして、これは人間の目で違反をチェックします。この色が変わっているところがカーソルで、キーボードで移動します。例えばこれを違反とするなら、xキーを押して完了です。画面上の報告を全て処理すると、自動で画面がリロードされます。他にも画像ならmキーで開いたり、vキーを押すとコメント編集に飛ぶことができます。こんな感じでやたら作り込みました。

この画面は、最初は普通にリンクで操作するように作りました。実際に使ってみると画面の更新を待つのがだるくて、マウスの操作もだるいのでキーボード化しました。そうしたら最初との比較で20倍の速度で処理できるようになりました。実際、オペレーターさん達は使いこなせているかわからないんですけど。すごい慣れた人であれば、だーっと50件ぐらい一気に表示していけるんで、すごい便利だと思います。

なんでこんなにこだわるかと言いますと、モチベーションは、趣味の領域です。で、僕個人、便利なものを作りたいって欲求がなんかすごいんです。管理画面ってエンジニアの自由にできるところなんで、自由に発想ができます。工場とかで作業上便利な機械を勝手に作っちゃう人みたいな、そんな感じです。

また、エンジニアにとって便利だと結構皆にとって便利だったりもします。便利な機能を作ると喜びの声がきゃーっとあがります、本当に。嬉しいなと。便利だとデバッグしてもらえる範囲も広がります。

KPIの話をします。KPIを見る画面はつけてません。DBの集計で出せる範囲が結構狭いんです、アンサー関しては。そこでTreasureDataを使ってやります。アンサーでは専門チームが主にやっています。超重い分析も可能なんで断然いいです。複雑なクエリになると半日以上かかったりします。

また、集計だけしてばーっと数字だけ並んでもしょうがないので、グラフとか書いてもらうには、専門家におまかせするのがよいかなあと思っています。

今日のまとめです。管理画面作るの楽しいです。フィードバックが嬉しいです。パーマリンクがあると便利です。

おまけの面白画面を紹介します。まずダッシュボード。ログインすると出てくる画面なんですが。進行中のスポットの年代、性別、ジャンル、などなど。ダッシュボードって、結構、憧れの画面ですよね。ちなみにここもちゃんとレスポンシブデザインしてます。ここの罫線、横にあるものが、ちゃんと下に移動するようにしてます。

グラフ描画はGoogleのAPIです。この画面には結構もっと詳しい情報があったんですが、データ量が増えてきて重くなってきて、ここの表示速度を上げるために頑張ってもなんか意味がないので、どんどん情報を減らしていった経緯があります。

タイムマシーン。なんぞやと。これは、基準日を入れるとその時点でのホーム画面の様子を再現できるものです。

例えば正月どんな感じだったっけとか、ラピュタ放送している時どんな感じだったっけ、みたいなことが気になったので、作ったら面白そうという勢いで作りました。

翻訳。コメント編集ページの上に翻訳リンクがあって、Googleの翻訳にリンクしてます。なんで作ったかというと、無断で中国語のAndroid版アンサーアプリが配布されたことがありまして。マジな話です。中国語の投稿がばーっと増えました。中国語は雰囲気でしかわからないので、いちいち翻訳してたんですが、面倒だったんで、翻訳済みのページへのリンクをつけたら、皆喜んでくれました。

翻訳してみると意外に普通に参加していてほほえましかったんですけど、既存ユーザーはびっくりしていました。

以上になります。ありがとうござました。

質疑応答

司会：はい、質問ある方いらっしゃいますか。

Ｑ１：お話ありがとうございました。横幅が大事という話があったんですけど、皆さんが一番使われている画面サイズってのはどのぐらいが一番多いんですか。もしくは一番小さい人っていうのはどういう、iPadとかで見てる人もいるんですか。

秋田：iPadは多分あんまり社内ではいなくて、役員、経営陣が見てるんじゃないかなあと思います。基本はフルHDの画面とノートPC、2画面で大体やっています。

Ｑ１：ノートPCで見れて、大きい、専門が使っているというのはそれをHDのディスプレイで見れれば、という感じの、幅の大事さ？

秋田：そうですね。結構量が多いんでだいぶ削った上で、幅も縮めて、縮めて、横スクロールしたくないと。

Ｑ１：はい、ありがとうございました。

司会：他にいらっしゃいますか。ちょっと聞いていいですか。この管理画面って（CSSフレームワークは）何でできてるんですか？

秋田：Bootstrapですね。

司会：ありがとうございます。

Ｑ２：キーボードショートカットは何を使ったんですか？

秋田：いろいろライブラリーあると思うんですね。前に同じようなことをしようとして、いろいろ選んだんですけど、どれも、あれができない、これができないみたいなのがあって、結局自前でやりました。ブラウザサポートは、管理画面なんでChromeを使ってっていう指示はしてあるんで、Chromeで動けばいいと。

Ｑ３：秋田さんの会社は、秋田さんが趣味の領域でゴリゴリ改善できると思うんですけど、結構一般の会社とかってそうじゃないのかな、そうじゃない方が多いんじゃないかなと思うんですが、そういう方に、なんか社風とかもあると思うんですけど、そういう社内の雰囲気にしていくために何かやってることが、もしおススメできることがあれば教えてください。

秋田：自分で考えて動ける組織にしようってのがここ半年ぐらいのあれなんで、むしろやっちゃって、そこまでこうお金がかかるとか、そういうリスクがないのであれば、やってから報告でいいんじゃないの？っていう感じで。僕も結果的にそうしてやっているんで、勝手に画面が作られたり、チャットだったらいつのまにかBotが増えていたり。そんな感じで、やってから報告してます。

Ｑ３：趣味でありつつ、社内の評価が上がったりするんですか。

秋田：評価に結びつく…あるといいですね。

司会：ありがとうございました。

• 全てのスライドは 「ぼくのかんがえたさいきょうのアンサー管理画面」を発表してきました | nanapi TechBlog から閲覧できます。
• 冒頭の写真は Innova :: 「管理画面チラ見せ♡ナイト #2」レポート より拝借させていただきました。