VRoidStudioでVRM形式のモデルを作る【基本操作編】

こんにちは。
SHOWROOM xR Labインターン生のはいえろです。
最近はVRoid Studioを触って、モデルの検証やパフォーマンスチェックを行っています。

最近はユニコーンの女の子「ゆにこーんちゃん」のモデルを作っていました。

hub.vroid.com

このゆにこーんちゃんモデルの作成過程や検証中に得られた知見やVRoidStudioを利用したモデル製作のポイントをまとめてみました! 5回にわけて書いていこうと思っているので、興味のある方は一緒に作っていきましょう!
今回の「基本操作編」
「髪型編」
「体編」
「髪の毛を利用した小物編」
「モデルデータの軽量化編」
となります。

キャラクター3Dモデルを作ってみたい方の参考になればうれしいです。

VRoid Studioとは

手描き感覚で誰でも簡単に3Dモデルを作成できるアプリです。
しかも絵が描けない私でもそれなりに作れるので、個人的にはだいぶ神アプリなのではないかと思っています!
なによりVRMでエクスポートされるので、VRM対応アプリが増えていくであろう今後のことを思うと大変助かりますね!

公式サイト(ダウンロードはここからできます) studio.vroid.com

【目次】

基本操作

image.png (321.4 kB) こちらが作業ウィンドウです。
完成状態を常にみながら作業できるので、「エクスポートしてみたらなんか違った!」となることも少なく、感覚的に操作できて大変使いやすいです!
画面上の帯に編集タブが並んでいます。

【基本的な操作】
マウスホイール:ズームアップ/ズームアウト
マウス右ボタンドラッグ:回転
マウスホイールボタン ドラッグor Shift+左ドラッグ:カメラ移動

できること

できることは大きく分けて6つ
・顔編集
 輪郭や顔パーツの位置調整、テクスチャの変更
・髪型編集
 髪の作成、髪揺れ設定、テクスチャの変更
・体型編集
 長さや太さの設定、テクスチャの変更
・衣装編集
 数種類あり、テクスチャの変更
・共通設定
 リムライトの設定、目の可動域の調整
・撮影/エクスポート
 ポーズやアニメーションをつけての撮影、VRMでエクスポート、VroidHubにアップロード

基本的な設定はすべてマウスでぽちぽちするだけで調整できます。
髪揺れのボーンもすべて自動でつけてくれるのでとても楽しいです!
テクスチャをオリジナルのものと差し替えて、個性をだしていきましょう!

テクスチャの修正はillustratorなどのペイントツール、ブレンドシェイプの調整はUnity、素体改変や追加パーツはBlenderなどのDCCツールを合わせて使用すると、よりオリジナリティのあるモデルが作れるようになるので、ぜひそちらもお試しください!

では具体的な説明と合わせて、実際にVroidでモデルを作っていきますね!
この記事では項目順に書いていきますが、わたしは作りながら調整したり、テクスチャをまとめて後回しにしたりしているので、実際にはいろいろな項目を行き来して製作しています。

事前準備

まずは作りたいモデルのイメージを固めておきます。
とはいいつつ、作りながら大幅に変更しちゃうこともあるので、お仕事で製作とかしていないのならふわっとしていても大丈夫です。
今回はわたしの好きなユニコーンをイメージした、「ゆるふわでゆめかわな女の子」を作ります。
絵が描けるのであれば、イメージイラストを用意してもいいですね!
絵の描けない私は、ピンタレストを使用してイメージマップを作成しています!

顔編集

1. 顔のパーツ位置や輪郭を決める

image.png (69.1 kB)

こんな風に、画面右のパラメーターをマウスでぽちぽちと調整していきます。
今回のは「少し幼い印象のあるおっとりした雰囲気」を意識して、
・目の位置を下げる
・瞳を大きくする
・たれ目
になるように意識しました!

2.png (990.0 kB)

2. テクスチャを変える

顔編集の「テクスチャ」タブをクリックすると、顔のテクスチャの編集画面に切り替わります(少し重いです)。 5-01.png (1.3 MB)

左の項目ごとに、それぞれテクスチャが「デフォルト画像」として入っています。
「レイヤー」の部分に、画面右のツールやカラーパレットを使用して、ほくろやメイクを描き足していくことができます。
もちろんデフォルト画像を非表示にしてすべて描き換えることも可能です!
外部のツールを使用してテクスチャを描きたい場合は、「ガイド」の上で右クリックをして、「エクスポート」を選択することで、ガイドテクスチャをPNG形式でかきだすことができます!
6-01.png (53.5 kB)

▼そうして書き出したガイドテクスチャがこちら image.png (112.9 kB)

これを目安にしてテクスチャを描いていきましょう!

私はiPadで使える無料アプリ「ibisPaint」を使用しています。

▼ibisPaint

ibis Paint X

ibis Paint X

  • ibis inc.
  • Entertainment
  • Free

様々な機能がありますが、使いこなせないので基本的にはブラシツールのみで作っています。

▼顔のテクスチャを描いてみました
face.png (149.6 kB)

▼これをpng形式で保存して、今度は「レイヤー」の上で「インポート」します
9-01.png (48.7 kB)

すると顔のテクスチャが変更されました! image.png (1.0 MB)

この要領で他のテクスチャも変更していきましょう!
全部描くのは大変!という方は、「アイライン」「まつげ」「まゆげ」の色のみを変更することもできます。

たとえば、まつげの色は「基本色」と「かげ色」の2つでできているので、この設定をこう↓変えると
image.png (25.4 kB)

▼このようにまつげを部分的に色づけることができます image.png (297.4 kB)

また、まつげの「デフォルト画像」を非表示にすると

▼このように、まつげ自体をなくすこともできます image.png (222.9 kB)

もちろんまつげのテクスチャを描けば、好きなデザインでまつげを作ることもできます!

ということで、今回は「肌」「アイライン」「まつげ」「瞳」「目のハイライト」のテクスチャを変更しました! image.png (532.7 kB)

テクスチャが描けない!という方は、「Booth」にて様々なテクスチャが販売、配布されているので、規約をよく読んで使ってみてください!

booth.pm

作りたいデザインに合わせて、いろいろいじってみましょう!

次回は【髪型編】を書こうと思います。

YAPC::Tokyo 2019に参加してきました #yapcjapan

こんにちは。サーバーサイドエンジニアの齋藤です。
2019年1月26日に開催されたYAPC::Tokyo 2019に参加してきたので、レポートをまとめようと思います。
一言で言うと、とてもいいYAPCだったと思います!楽しかったです!

続きを読む

Leap Motion社のARヘッドセット「Project North Star」を3万円で2019年に組み立てた

こんにちは。 SHOWROOM xR Lab エンジニアの @izm です。
xR LabはSHOWROOMの中でxR領域に関連する事業に取り組んでいる部署で、僕は主にR&D(主にUnity)を行っております。

LeapMotion社が主となりオープンソースで開発しているProject North Star(以下NorthStarとします)と言う高視野角で光学シースルーなAR-HMDがあります。

こういうUIや触り心地を実現できて、特に光学シースルー(現実の世界の視界を阻害しない)点や、広視野角な点から他には無い使い方が出来る点で話題になりました。

www.youtube.com

https://developer.leapmotion.com/northstar/

NorthStar自体は2018年6月に設計図がオープンソースで公開されてから半年以上が経ち、各所で組み立てノウハウが溜まっています。

そんなわけで僕もそろそろNorthStarを組み立てて遊んでみようと思いパーツ類を発注したりプリントしてきました。

先行例と比較して今回はお財布になるべく優しく作れないか、という点を気にしながら作っていきます。

//しかし、公開半年経っても新しいLeapMotionモジュールが未発売とは思わなかったなあ…

余談

ウキウキで組み立てている最中の今週( 2019/1/25 )、本家からHardware Update 3が入って、より頭に被りやすい構造のCADデータのファイルが公開されました。

組み立て記事をアップロードするタイミングとしては 最悪 ですが、Hardware Update3でも光学系やセンサーはそのままなので、そんなに差は無いということにしましょう!

Project North Star: Mechanical Update 3 - Leap Motion Blog

最初にまとめ

簡易版NorthStarは合計 およそ3万円程度 で組み立てることが出来ました。

世間の組み立て情報との差異としては

  • リフレクターを Smart Prototypingから調達( Project North Star Lens ) Deutsche Post Airmailで送料込み45ドルで18日程度でした。
  • 3Dプリンタは自宅のWanhao D6を使用(DMM 3Dプリントより精度は落ちるホビーユースですが、フィラメント代だけで刷れて安価)
  • Wanhao D6で刷れるように大きなパーツは分割する

です。
安価なリフレクター入手が出来るようになったことと、私物3Dプリンタを使えることで、先行例よりお安く出来る、という作戦です。

僕の場合はLeapMotionや動作用PCや各種ケーブルは既に手元にあったので、純粋な出費という意味では 2万円を切っています 。お得!

「これを揃えればOK」な参考URL

6000(リフレクター) + 6000(LCD) + 1400(ねじ) + ヘッドギア(1100)+ 9800(LeapMotion) + 3Dプリンタフィラメント代(3000円くらいのやつ)

で、おおよそ3万円しませんね。お安い!!!

Top Coverは見た目が良くなる以外に意味がないので、少しでも安く作る場合はプリントしなくても大丈夫です(今回は含めていません)

STLファイルは以下の2個の組み合わせの内、必須なパーツだけを抜き出しています。

exiiiさんはネジの規格統一や、各種補強、今回使うLCD用のホルダーデータの改変をしてくださってます。ありがたいです!

Ryo Kosaka (@tnctrekit) | Twitter さんが 150mmまで対応の家庭用3Dプリンタで対応できるような改造済みのデータを 公開してくださってます。ありがたいです!

組み立ての様子

最も時間が掛かるのはリフレクターなので、先にリフレクターを発注します。

リフレクターが届いたら、おもむろにプリンタをゴリゴリ使って出していきます。
ねじ穴がいっぱいあるので、速度はゆっくり目で、どの向きを上にするかは考えて適当に刷っていきます。
f:id:izm_11:20190119142252j:plain

適当なパラメータで印刷して失敗しても1リール3000円とかで何個も作れるので、気にせず失敗していきましょう。

f:id:izm_11:20190121094357j:plain

全部プリントできました。壮観ですね。サクサク組み上げていきます。

f:id:izm_11:20190126224443j:plain

普通にネジとドライバーだけでバシバシ組みあがります。
(公開されているNorthStar向け3Dプリント部品データは精度が低い家庭用3Dプリンタでも組み立てられるように、かなり親切な設計だと思います。)

ヤスリとかピンバイスを用意したのですが、今回はまったく出番がありませんでした。すばらしい!

リフレクターも完成品のまま届くので接着剤で取り付けて完成です!

f:id:izm_11:20190126224337j:plain

組み立て工夫ポイント

純粋に簡易版North Starを作ると、LCD用電源USBケーブル2本、LCD用HDMIケーブル2本、LeapMotion用USB3.0ケーブル、の計5本がヘッドセットから伸びることになって、すごくドキドキします。

なので、LCD用電源ケーブルだけはY字ケーブル+モバイルバッテリーを頭の後ろにカウンターウェイトとして取り付けておきます。

f:id:izm_11:20190126225750j:plain

すると、LeapMotion用USBケーブル+ LCDでHDMIケーブル*2の合計3本がヘッドセットから伸びることになります。

3本のケーブルならギリギリ許せそう(?)です。

簡易版NorthStarで3000円LCDを使うパターン(つまり、このエントリを参考にして組み立てる場合)は このケーブルセットを使って、モバイルバッテリー運用にしておくとケーブルごちゃごちゃ感が減って良いかと思います。

https://www.amazon.co.jp/gp/product/B0085P8WGQ/

https://www.amazon.co.jp/gp/product/B0722NG2MR/

結びと今後の展望

ちょっとAR-HMDがあると実現できるソフトウェア、というのを思いついているので、また報告したいと思います。

また、皆様も3Dプリンタを用意してしまえば、リフレクターの入手性向上も相まって、お手軽にProject NorthStarを作ることが出来ます。 一家に一台とは言いませんが、気軽にトライしてみてはいかがでしょうか。

SHOWROOM xR LabはNorth Starを作ってる最中に新ハードウェアアップデートが発表されても挫けない精神を持ったエンジニアの仲間を募集しています。
よろしくお願いします。

f:id:izm_11:20190127131530g:plain

ライブストリーミングHack #3 にて登壇しました

こんにちは。
SHOWROOMエンジニアの齋藤です。

11/15(木)にMirrativさんとSHOWROOMの合同イベント「ライブストリーミングHack #3」が行われました。

mirrativ.connpass.com

ご参加いただいた方々、ありがとうございました。
今回は「ライブ配信を支えるサーバーエンジニア」をテーマに、Mirrativさんと弊社でそれぞれ2名ずつお話しさせていただきました。
簡単ではありますがイベントの様子をお送りします。

登壇内容

弊社からは私齋藤とシミズの2名が登壇させていただきました。
スライドと簡単な内容をご紹介します。

カスタマーサービス品質向上へのエンジニア的アプローチ

speakerdeck.com

サーバーサイドエンジニアとは「当たり前品質」を向上させるのが役割である
という点から、「当たり前品質」の1つであるカスタマーサービスに対して
エンジニアとしてどう関わっているのか?
何を意識しているのか?
という点をお話しさせていただきました。

あまりテクニカルな内容ではないですが、サービスの信頼度を上げていくためには避けて通れない場所だと思っています。

同じような問題に向き合ってる方とも懇親会でお話しさせていただき、非常に勉強になりました。
また、今までよりもここに注力して、次の機会ではもっと大きな成果をご報告できるようにしなければ…!と決意を新たに固める機会にもなりました。
お話しさせていただいた方々、どうもありがとうございました。

SHOWROOMのDB負荷に対するキャッシュ運用のカクカクシカジカ

speakerdeck.com

こちらはシミズの登壇スライドになります。
DB負荷対策してるとはいうけれど、実際はどのような対策を行っているのか、
具体的な事例も紹介しながらの内容でした。

スライドの中にもありますが、ライブ配信サービスならではの大変さに
「いきなり人気配信が始まる」
というものがあります。

当然ながらいきなり始まった配信に対して
常にその場でアドリブ対応が出来るわけではないので、日頃から負荷対策を意識しておくことはもちろん重要ですし 、万が一の時に焦らないよう、十分な心構えをしておく必要もあります。
ユーザーのみなさまが楽しみにしている配信を無事にお届けするためにも、こういう地道な作業を1つずつ追求していくんだ、というメッセージは、同じサーバーサイドエンジニアとして、思うところの多い内容でした。

ちなみにスライド冒頭にて紹介されている
「Streaming Conference #4」の様子は以下のページにて公開されています。

tech.showroom.co.jp

終わりに

改めて「サーバーサイドエンジニア」という括りで考えると、その仕事はやはりフロントやアプリと比べたら地味になりがちです。
それでもここがサービスの土台なんだ、
という意識は常に持っておきたいですし、
今回はそういう話ができたのではないかな、と思います。

Mirrativさんのお話も非常に興味深い内容で
次の機会では自分ももう少しテクニカルな内容だったりとか
「〇〇を導入した理由とハマりポイント」
みたいな話をしてみたいな、とも思いました。
そのためには何かを導入しないといけないですね。
ネタ探しをしなければ…!

さて、 そんなSHOWROOMでは
情熱を持って一緒にお仕事ができるエンジニアを募集しております。
ご興味がある方はぜひ一度来ていただければ!

www.wantedly.com

LINEのMessaging APIのアカウント連携機能を使ってSHOWROOMとLINEを連携させて見た

こんにちわ。 SHOWROOMエンジニアのシミズです。
業務の合間をぬって、ひっそりとLINEのMessaging APIで遊んでいましたがそれがそこそこ形になってきました。

それがこちらです。

SHOWROOMのライブ開始をLINEに通知する

これは何かというと

  1. SHOWROOMのユーザーIDとLINEのユーザーIDを連携する
  2. SHOWROOMのお気に入りルーム情報を取得する
  3. LINEにSHOWROOMのお気に入りルームのライブ開始を通知する

というボットアプリです。(リリースするかは未定です。)

この投稿では「SHOWROOMのユーザーIDとLINEのユーザーIDを連携する」という部分について実際の画面のキャプチャを用いて解説したいと思います。

LINEのMessaging APIにはよりセキュアにLINEユーザーのアカウントとSHOWROOMなど既存サービスのユーザーアカウントを連携する仕組みが提供されており、今回はそれを利用しました。
公式のドキュメントと合わせてお読みいただければと思います。
https://developers.line.me/ja/docs/messaging-api/linking-accounts/

全体のシーケンス

f:id:otto13:20181109010648p:plain

アカウント連携開始URLを取得する

f:id:otto13:20181109000501p:plain

アカウント連携開始URLを要求するのに、リッチメニューからポストバックアクションを利用しました。
リッチメニューの「アカウント連携」ボタンを押下すると、LINEプラットフォームを経由して、我々のBotServerにリクエストが到達します。
するとBotServerはLINEプラットフォームにaccount_link_tokenを要求します。

require 'line/bot/request'
require 'line/bot/api/errors'
require 'line/bot'
class MyLineBotClient < Line::Bot::Client
  def apply_account_link_token(user_id)
    raise Line::Bot::API::InvalidCredentialsError, 'Invalidates credentials' unless credentials?

    request = Line::Bot::Request.new do |config|
      config.httpclient     = httpclient
      config.endpoint       = endpoint
      config.endpoint_path  = "/bot/user/#{user_id}/linkToken"
      config.credentials    = credentials
    end
    request.post
  end
end

rubyでこんな感じのメソッド用意してlink_tokenを取得しています。
取得したlink_tokenを組み込んで、showroomのOAuth認証ページへのURLを作成しLINEクライアントに返します。
このURLはテンプレートメッセージを利用してLINEクライアントに返し、表示しています。

SHOWROOMログイン

f:id:otto13:20181109002902p:plain

返されたURLからSHOWROOMのOAuth認証に遷移します。
SHOWROOMのログインが成功すると認可コードがBotServerに伝わって、 その認可コードを利用してaccess_tokenを取得し〜というのは一般的なOAuth2.0の認証のフロー通りです。
このOAuth2.0の仕組みをSHOWROOMに作ろうと思ったきっかけは2018年のDeNA TechConでLTさせていただきました。

SHOWROOMのイノベーションを加速させるためのマイクロサービスの取り組み

nonceを生成してLINEプラットフォームにリダイレクトさせる

LINEのドキュメントにしたがって、nonceがkeyで、SHOWROOMのユーザーIDがvalueのペアを保存しています。
ユーザーのすり替えなどを検知できるのがlink_tokenの強みなのだと思います。
ざっくりですが下記のような実装です。

Rails.cache.write("lineAccountLink:#{nonce}", sr_user_id, expires_in: expire_seconds)
redirect_to "https://access.line.me/dialog/bot/accountLink?linkToken=#{link_token}&nonce=#{nonce}

LINEプラットフォームからaccountLinkのWebhookイベントを受信する

LINEプラットフォームにリダイレクトされると、LINEプラットフォームからBotServerにaccountLinkのWebhookイベントが届きます。
このメッセージにはLINEのユーザーIDとBotServerで生成したnonceが含まれます。
nonceからSHOWROOMのユーザーIDを引き出し、そのSHOWROOMユーザーIDとLINEのユーザーIDを紐付けます。

line_user_id = event['source']['type'] == 'user' && event['source']['userId']
nonce = event['link']['result'] == 'ok' && event['link']['nonce']
if (line_user_id && nonce)
  showroom_user_id = Rails.cache.read("lineAccountLink:#{nonce}")
  User.create!(showroom_user_id: showroom_user_id, line_user_id: line_user_id)
  bot_client.link_user_rich_menu(line_user_id, account_linked_rich_menu_id) 
end

f:id:otto13:20181109010240p:plain

この連携の仕組みとは直接関係ないですが、連携完了時にリッチメニューのスイッチも行なっています。
こうすることで、連携後に利用可能となるメニューを表示させることができます。

総括

このアプリですが、はじめは一人で作っていましたが、途中からインターンとしてSHOWROOMで働いているいとう君にも参加してもらって今の状態まで持ってくることができました。 ボットプログラミング、特にLINEのボットプログラミングはクライアントのデザイン面の実装が不要なのに、ユーザービリティを追求する実装ができるのは面白かったです。
いとう君にはリッチメニュー周りの実装をまるっとやってもらいましたが、テキストメッセージのリプライによる動作から、ポストバックメッセージに変更して劇的にそっれぽいアプリになったなという印象です。
最終的に我々のBotServerは一度もHTMLを返さずに今の機能を実現できております。(アカウント連携機能が提供されてないと難しかったと思います)

途中でも述べましたが、本アプリのリリース予定は未定となります。
もしこのアプリに興味をもたれた方はどこかの現場でお声かけ下さい。
下記の現場には出現する予定です。

mirrativ.connpass.com

linedevday.linecorp.com

techcon.dena.com

最後に

SHOWROOMではエンジニアを募集しています。
SHOWROOMの機能やSHOWROOMの持つ情報を使って面白いことをしてみたいと思った人、お待ちしております。

www.wantedly.com

ライブ配信 Meet up 〜メルカリ × SHOWROOM〜で登壇をキメました

SHOWROOM Tech Studioの牧野です

先日、メルカリさんとSHOWROOMの合同イベントが行われました。

mercaridev.connpass.com

参加いただいた方、お疲れ様でした!

テーマは今流行りのライブコマースについてでした!

ざっくり説明すると、生配信中に、商品を購入することができるヤツです!

SHOWROOMのライブコマース機能の「SHOPROOM」ですが、 バックエンド側はScalaを使用して、主に私が開発したので、 そのことについて、登壇させていただきました。

ライブコマース開発秘話

こちらが登壇した際の資料です。

内容としては以下の構成です。

  • SHOWROOMの紹介
  • SHOPROOMの紹介
  • マイクロサービスっぽくなった理由とScala採用理由
  • Akka HTTPを使う上で苦労したこと

当日は80人ほどの方がお越しくださいました。 メルカリさんのオフィスをお借りしてイベントを行ったのですが、めちゃ広々で綺麗でした。

f:id:poisonotter:20181026184104j:plain

また、開始時に弁当と酒が無料で配られていて、最高でしたね。

f:id:poisonotter:20181026185820j:plain

メルカリのジョニーさんの発表内容について、メルカリさんはもともとECなので、どのようにECに対してLIVE機能を開発したのかを発表したのに対して、弊社はもともとLIVEなので、どのようにLIVEに対してECを追加したのかと言う対象的な内容でした。

f:id:poisonotter:20181026190624j:plain

SHOWROOMは稼働してから数年経過しており、どうしても中身にオレオレな部分や、運用のためにその場しのぎで作られたコードなどが発生しており、そのための課題解決の一例としてマイクロサービスっぽいことを行いました。結果、一部疎結合にEC機能を開発できたので、モノリシック脱却の第一歩を踏み出せたのかなと思います。

f:id:poisonotter:20181026190646j:plain

スライドの後には、パネルディスカッションというコーナーがあり、1問1答形式で、各社のLIVE ECについての質問や議論が交わされました。 中でも安室奈美恵さんが、仮にLIVE ECを始めるとしたらどう対策する?というのが好評でした。

石川さん(メルカリ)
「もし安室ちゃんがLIVE配信するとなったらどうする?」

ジョニーさん(メルカリ)
「そうですねえ。。事前に時間がわかってる場合は、対策ができるんですが、もし、アマチュア枠で突然配信を開始したとしたらあらゆるサービスが即死ですね。」

†村上†(SHOWROOM)
「じゃあ安室ちゃん検知システムを作って、検知した場合は各所に緊急警報アラームを鳴らしましょう!!」

ゴジラか!

このような和やかな空気の中でディスカッションしました。

最後に懇親会をやって、来場者同士で語り合って解散しました。

個人的な感想

エンジニアを始めてから5年くらいですが、人生初登壇な上に、このような大きい場での登壇だったので、非常に緊張しました。 ただ、酒という魔法のアイテムがあったので乗り切れました(登壇時には缶ビール二本開けていた) SHOWROOMでは酒が好きなエンジニアを募集しています(違う)

最後に

SHOWROOMではエンジニアを募集しています。BARスペースもあるので、ぜひ一度お酒を飲みに来てください!

www.wantedly.com

Mercari Tech Conf 2018に行ってきました

Mercari Tech Conf 2018に行ってきました

こんにちは。 SHOWROOMエンジニアの齋藤です。

10/4(木)にMercari Tech Conf 2018に行ってきました。
ちょっと時間経ってしまいましたが、感想書きたいと思います。

techconf.mercari.com

ところでアカデミーヒルズ(六本木ヒルズ・森タワー49階)の入り口って
ちょっと分かりにくくないですか?
毎回オフィスエントランスに行って迷子になってる気がします…

今回のTech Confですが印象に残ったテーマが3つあるので
それぞれについてまとめたいと思います。

経営課題をテクノロジーで解決すること

Introduction to the Corporate Solutions Engineering

speakerdeck.com

「経営課題を解決する」ためにテクノロジーを使うCSEという組織、
そのスタンスがすごく好きでセッションを聞いただけでなく、
ブースにもお邪魔させていただきました。

目標設定→達成度合いによる評価が一般的な世の中において
結果や成果ではなく、その人の実力を徹底的に評価するために
文化や制度が作られていて、それを実現するためのシステムを作る、
とても素晴らしいチームとプロダクトだと感じました。

あまりに出来がよかったので「SaaSとして世に出して欲しい」みたいなツイートをしてしまったのですが
セッションの最後にその辺を匂わせることもおっしゃっていたので
いつか来るその時を密かに期待しています。

とはいえあのシステム、メルカリ社の文化や制度に最適化されているので
文化ごと導入しないとうまくハマらないかもしれませんね。

モノリシック->Microservicesへの移行

Mercari API: from Monolithic to Microservices

speakerdeck.com

Listing Service: モノリスからマイクロサービスへ

speakerdeck.com

Web Application as a Microservice

speakerdeck.com

この他にもメルペイのMicroservicec化に関するセッションもあったのですが
満員御礼にて視聴を断念しました…

どのセッションでも試行錯誤しながら
Microservices化を進めていることが伝わって来ました。
ここを突き詰めていくと結局欲しくなるのがAPIGatewayとBFFだと思うのですが
どのプロダクトでもやはりそういう方式になってました。

また、データベースを先に移行するか、システムを先に移行するのかについて
書籍「マイクロサービスアーキテクチャ」では
データベースの移行からやるべき、というスタンスになっているのですが
どのプロダクトも基本的にはシステム(DAOレイヤー)を部分的に移行しつつ、
データベースは後追い方式を取っていて非常に興味深かったです。
書籍とは異なるケースの事例として参考になるのではないかと。

Customer Serviceとエンジニアリング

Customer Experience Improvement

speakerdeck.com

CSAT Score - 極度改善(しなさい) -

speakerdeck.com

個人的に一番いいと思ったのは実はここです。
ユーザーエクスペリエンスとしての顧客体験はどこでも重要視されていますが
長く使ってもらうサービスにおいて最も重要なのは
Customer Support(メルカリ社においてはCustomer Service)
なのではないか、と常々思っていたためです。

特にCSチーム用のツールなどは
実際のカスタマーから見える部分ではないため
どうしても後回しになりがちですが
ここの使い勝手を妥協せずにきちんと作り込むチームがいて、
それをフル活用するチームがいるのは素晴らしいと思います。

さらにはお問い合わせ対応の品質もスコアリングして
改善のサイクルが回るようにしているところも
CSとしての顧客体験に力を入れている何よりの証拠として
非常に感銘を受けました。

終わりに

CSE、Microservices、CS強化。
どれも自分たちもやっていかなければならないキーワードばかりで
非常にいい刺激をもらえた1日でした。
運営の方々、登壇者の方々、貴重な時間をありがとうございました!

僕たちもやれることを1つずつやっていこうと思いますが
あれこれやるにはまだまだ人手が足りていないので
SHOWROOMでは一緒にサービスの改善に取り組んでくれるエンジニアを募集しています!
ご興味ある方はぜひぜひ一度遊びに来てください! www.wantedly.com