こんにちは。メルカリ Engineering Manager の @_hitima です。Mercari Advent Calendar 2018 の17日目を担当します。Frontend チームに所属しています。
本記事ではメルカリが取り組んでいる Karakuri Challenge というものと、実際に作った Karakuri について、紹介させてください。
メルカリですが、公式資料からの情報によると、現在連結で 1,350 名程度の社員が在籍しています。私が入社した約 3 年前で約 100 名だったと思いますので、3 年で 100 名規模から 1,350 人規模まで人員を拡大していることになります。
急に人数が拡大すると、色々な課題が浮き彫りになってきます。その一つが情報格差や情報のアクセスのしやすさだと思っていて、これは私個人の考えですが 知らない人と知っている人の格差をどう埋めるか は、急拡大する会社での宿命・命題になってくるのではないでしょうか。
Karakuri を説明する前に、メルカリの Value について少し触れておきます。
メルカリの3つのValueとして、 Go Bold, All for One, Be Professional があるのはすでにご存知な方も多いかもしれません。
それとは別に、Engineer の行動指針があるのはご存じでしょうか？
メルカリの Engineer の行動指針として以下のようなものがあげられています。
- Ownership
- Automation, Karakuri
- Progressive
この中の Karakuri について、今回挑戦したことを書いていこうと思います。 Karakuri とはその名の通りカラクリ人形などで有名な日本語の カラクリ に由来しています。
社内にはあらゆる課題が存在していて、それを Engineering をもって仕組みで解決していこうよ。というメッセージだと私は理解しています。詳しく知りたいという方は去年の Mercari Tech Conference でCTO名村が発表したの基調講演の資料をご覧ください。
Karakuri について、メルカリではどのような挑戦をしているのでしょうか。メルカリでは、 Karakuri Challenge という投稿フォームを設け、日々社内で不便なことを課題として情報収集する仕組みを設け、Engineering の課題だけでなく、組織的な課題にも挑戦しています。
すごく大まかに説明すると、ここ、不便なんだけど何とかならないの？ という投稿フォームですね。
そして、 Engineer を中心に、その投稿フォームから収集したお困り情報を通常の業務とは別に解決する動きがはじまっています。
その中で、今回は 会議室がどこにあるかわからない という投稿があり、その課題解決に挑戦してきました。
会議室がどこにあるかわからないという課題
メルカリは会議室の設定などを Google Calender から行っています。ミーティングしたい相手の予定と、空いてる会議室を確保して、指定の時間になったらその会議室でミーティングを行うといったものです。他の会社でも割と見かけられるものかと思います。
六本木ヒルズ18Fの会議室だけでも 数十部屋以上ある状態で、ユニークな名前がつけられています。
そう言えば私も入社当時、何度か会議室の場所を聞くこともありました。
また、最近はやはり会議室がわからずウロウロしている人や、実際に執務室の外にある会議室を執務室内で一生懸命探している人を何度か案内したこともあります。
また、私の場合はですが、入社後しばらくしてから会議室が段階的に拡大されていった事もあり、脳内である程度グルーピングができていて、正確な場所はわからなくても、執務室エリアのあのへん エントランス付近のあのへん とかが比較的容易に推測出来るので不便に感じたことはありませんでした。これは経験しか解決出来ないと思っていて、かつ新入社員に求めるのは難しいですよね。
中にはこのように、デスクトップに地図情報を表示させている方もオフィス内では散見されます。どんだけフロアマップ好きなんだよって思われるのは嫌なので、私は絶対に設定したくありません。何より、デスクトップくらいは趣味嗜好に走りたいなんて人もいますよね。余談ですが、私はデスクトップは無地派です。
厳密に言うと Slack の Custom Response などで特定のワードを入力すると地図の URL が帰ってくるような Karakuri はすでにあるのですが、Slack で 「いでよフロアマップ」的な事を入力しなくてはなりませんし、Slackbot へのダイレクトメッセージや自分へのダイレクトメッセージで効かなかったりして、最適なチャンネルがわからない…!!なんて方もいると思います。
見たく無い人からも見えてしまうのも難点ですよね。 毎回地図を出すのは面倒ですし、English Speaker には User Friendly ではないですよね。
Google Calendar の Location の Link について
Google Calendar には Location の Link がデフォルトで用意されています。思い返せば飲食店などのマップはリンクとして使ったことある方も多いのではないでしょうか？
会議室など、社内の Location 情報が記載されている場合の挙動はどうなのでしょうか？ クリックしてみることにします。 Google さんのことです。すでに六本木ヒルズのビル情報などを参照して、 Geo Location などでゴニョゴニョしてひょっとしたら何もしないでも解決！なんてこともあるかもしれません。
バァン！
見つかりませんでした。と出てきます。404 です。潔い現在地情報が出てきます。
というわけで、無情にも六本木ヒルズの地図(現在地)が表示されてしまいました。そりゃそうですよね。たまたまオフィスにいたので大きくは外れてなく見えるのもまた癪ですよね。 I knew it!!! と叫びたくなります。
ここからが本題: Karakuri で解決
先程の404のURLが大体こんなかんじです。
https://www.google.com/maps?hl=ja&q=JP-TKO-18F(in)-M-Kouzoh+(10)+%5BGoogle+Hangout%5D&source=calendar
会議室の情報が URL に埋め込まれています。ここの URL を判定して、独自の地図を表示してあげれば Google Calendar から直接地図情報を参照できるようになります。
今回は、Chrome Extension で上記の仕組みを実装してみました。
manifest の指定
Chrome Extension の技術的な情報は参考になるサイトがたくさん出ていると思うので、細かい部分は割愛させていただきます。(公式を見るのが一番良いと思います)
manifest ファイルには以下のように記載しています。
ざっくり説明すると
- メルカリ東京オフィス18Fの会議室情報にはすべて URL に
q=JP-TKO-18Fが含まれ、参照元情報としてsource=calendarが含まれているので、その時に同梱している JS を実行させ、何らかの Dom を生成し Google map の変わりに 独自のフロアマップを表示する - CSS も使うので一緒に指定する
web_accessible_resourcesでは、Chrome Extension としてパッケージ化した時に、使用する地図の画像や会議室の位置を示す矢印の画像を指定するpermissionsでは、後述するchrome.extension.getURLなど chrome の API を使う時に許可する指定です。
{ "name": "Mercari Map", "version": "0.1", "manifest_version": 2, "description": "Mercari map", "content_scripts": [ { "matches": ["https://www.google.com/maps*&q=JP-TKO-18F*&source=calendar"], "css": ["style.css"], "js": ["content.js"], "run_at": "document_end" } ], "web_accessible_resources": ["floor_map_0705_w.png", "arrow.png"], "permissions": [ "tabs", "https://www.google.com/maps*" ] }
この指定で、特定の URL リンクを踏んだ先で content.js が実行され、style.css を読み込み、かつ同梱した画像サブリソース floor_map_0705_w.png, arrow.png を読んでくれるようになりました。
JavaScript 側でやったこと
特定の URL で実行される JavaScript 部分では、今回は難しい事はしていません。
DOM を innerHTML で挿入して、 URL を判定して特定の会議室の画像上に矢印画像を配置してあるだけです。
innerHTML 使っていることや、どうして switch(true) でやったかは、あんまり言及しないで欲しいと思っています。
const setMap = () => { const imageUrl = chrome.extension.getURL("floor_map_0705_w.png"); const dom = ` <div class="contents"> <img class="floorimg" src="${ imageUrl }"> <div id="target"></div> </div>`; document.body.innerHTML = dom; }; const setPin = () => { const url = location.search; const target = document.getElementById('target'); switch (true) { case /JP-TKO-18F\(ex\)-M-Edison/.test(url): target.classList.add('edison'); break; case /JP-TKO-18F\(ex\)-M-Darwin/.test(url): target.classList.add('darwin'); break; // 略 default: break; } }; // 略
CSS でちょっとだけ嵌ったこと
chrome extension を書くの自体が久しぶりだったので、ちょっとハマりましたが、CSSから背景画像などを呼び出す場合は、相対パスで指定しても動かないです。
以下のように special message で指定すると extension の方でよしなにパス変換してくれ、参照可能になります。
background-image:url('chrome-extension://__MSG_@@extension_id__/arrow.png');
参考: developer.chrome.com/extensions/i18n#overview-predefined
出来たやつ
Google Map の Location 部分をクリックすると以下のような画面を表示させることに成功しました。
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
カラクリ・カンセイナリよ~！
おいおい、画像がボケてて何をやってるかわからない
今回、本ブログを公開直前までPRの確認が取れず、いやーな予感はしていたのですが、フロアマップを公開することはできず、ボカす事になってしまったことをお詫びします。
画像が何を表しているかというと、オフィスのフロアマップが表示され、適した会議室の上に矢印画像が配置されています。
社内公開
会社が Google G Suite を契約している場合は、社内限定の Chrome Web Store を持つことがデフォルトで出来るので、 Extension の社内配布は簡単にできます。
メルカリも同様に契約があるので、以下のリンクの手順に従って社内ツールとしてちょうど本日公開しました。
社内ツールの場合、公開範囲に注意してください。
非公開(Private) の @mercari.com ユーザーに公開します、のようなラジオボタンの選択をしましょう。
公開申請後、公開まで60分くらい最大でかかるみたいなので、気長にコーヒーでも飲みながら待ちましょう。
最後に
今回のこの Extension は現在、一部限定的に配っていたものの、パブリッシュは2018/12/16なので、まだまだ実際に便利になったのかわかりません。使いやすいかどうか、実際使うのかどうかっていうところも含めてなところはあるので、どんな効果があるかはわかりません。
作って満足！というのは Be Professional ではないので、どこかで自分の中で振り返ったり、修正、他の方法も検討したりはしたいなと思っています。
また、メルカリにはまだ東京だけであと 2 フロア、仙台、福岡、パロアルト、ポートランド、ロンドン、、、各拠点で同じ課題がもしかしたらあるかもしれません。とりあえずは東京オフィスの 18F だけで小さく実験的にやってみました。
また、こういった類の課題についてですが、長い間会社に在籍し続ける人からはこのような課題は出てこないと思っています。(私は会議室の位置の情報がなくても大丈夫なように) 不便に慣れてしまうという類のものもあると思います。
今回のこの会議室がどこかわからないという課題も、入社後あまり期間の経っていない方の意見から生まれました。
新しく入ってくる社員の方は、新しい視点を持てている唯一の存在だとも言えるかもしれません。不便さに慣れてないので、不便さがフレッシュかつダイレクトなのです。
社内やオンボーディングなど、組織的・業務的観点で見てもすごく良い意見を持っているかも知れないので、あなたの周りにも、何か社内で不便はあるか、是非聞いて見てはいかがでしょうか？
ナイスな発見やソリューションが、あるかもしれませんよ。
明日、17日目の執筆担当は Mercari US Android チームの @panini が、素晴らしい記事をシェアしてくれるみたいですよ！お楽しみに！
