技術選択とアーキテクトの役割 (要約版)

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

Developers Summit 2015

技術選択とアーキテクトの役割( 要約版 )

C-7

デブサミアワード 2015冬・あの人気セッションの再演＆アワード表彰式

July 29, 2015

Toru YamaguchiSenior Architect and Sub Business Unit HeadOpen Platform Business UnitDeNA Co., Ltd.



自己紹介

会社⁃ 株式会社ディー・エヌ・エー

組織⁃ オープンプラットフォーム事業本部

役職⁃ 副事業本部長シニアアーキテクト

活動⁃ 前 Japan Perl Association 理事⁃ Perl Monger

⁃ Identity Conference 設立メンバー• OAuth 2.0, OpenID Connect

インターネット上のアカウント⁃ @zigorou (Twitter)

⁃ zigorou (Facebook)

2



Abstract – 今日の概要

枠の長さから要約版という事にしました前回のスライドは

http://www.slideshare.net/zigorou/ss-44864139 から読む事が出来ます

自分で改めてスライドを読んでみて要約してみると、「アーキテクトの役割」は過去・現在・未来に向き合う役割だと主張したかったように思えました

そうして向き合って得た知識や経験、志向などがその時々の「技術選択」を確からしくしていくのだと思います

こういった事の要約をお話したいと思います

3

http://www.slideshare.net/zigorou/ss-44864139



Shortcut Service が生まれるまで

技術選択とアーキテクトの役割 ( 要約版 )

4



Shortcut Service とは

Mobage の HTML5 ゲーム開発環境である JavaScript SDK の機能の一つです

スマートフォンブラウザではあまりなじみの無いホームスクリーンアイコンを作成する為のヘルパー機能 + α です

5



アーキテクトの役割 – 課題意識を常に持つ事

当時も現在もスマホブラウザでショートカットを作成する事は稀⁃ つまり、スマホブラウザはスマホアプリに比べてリテンションが低

くなる• 蛇足ですが、ショートカット以外の要因も含めてまだまだネイティブアプ

リには及びません

⁃ 何となくこれが勝手に常識になっていませんか？課題意識は常日頃から考える癖をつけた方がいいです

⁃ 何故稀になってしまっているのか⁃ 技術的制約？ UX の悪さ？

6



UX の比較 – ネイティブアプリ

ネイティブアプリはマーケットでアプリを見つけると、インストールと同時にホームスクリーンアイコンが出来る

7

インストール探す遊ぶ



UX の比較 – ブラウザアプリ

ブラウザアプリの場合は探したらすぐ遊べる点が利点⁃ 但しこの為、どこかのタイミングでショートカットアイコンを作って貰う必要がある⁃ どこかのタイミングって言うのはつまり、ユーザーが楽しいと思ったタイミングが自

然な解釈ですよね？• つまり人それぞれ異なるということ

8

探す遊ぶ

ここで言うブラウザアプリとは、インストール型の物ではなく、ブラウザで動作するアプリケーションの事です。



技術的制約

iOS Safari も Android Chrome も現在閲覧している URL に対するショートカットを作る為の機能は提供しています⁃ Configuring Web Applications

⁃ Add to Homescreen

そのため、良くあるウェブサイトではトップページでポップアップバナーなどでショートカットアイコンの作成を促します⁃ 当然、ショートカットを押したらトップページに戻って来るから⁃ 得てしてユーザーが楽しいと感じるタイミングはトップページでは

ないまたこのショートカット作成機能はそこまで簡単な操作ではないのも難

点です

9

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

https://developer.chrome.com/multidevice/android/installtohomescreen



突然のひらめき

同僚から上記のようなアプリの存在を教えられる⁃ ブラウザ立ち上がってるぞ？？？⁃ しかも作成時の url と起動時の url は同じはずなのに挙動が違

う？？？

10

アイコン選択ショートカット作成

ショートカットクリック

アプリ起動とあるアイコン着せ替えアプリ



多分こういう形で実現出来ます

load イベント時の fragment の有無で挙動を変える⁃ ショートカット作成時は fragment を付けずにアクセス

• load イベントで fragment 付与をすると、ショートカット作成時の url には fragment が付く

⁃ fragment がついている場合はトップページなど意図した URI に飛ばす

11

アイコン選択ショートカット作成

ショートカットクリック

アプリ起動とあるアイコン着せ替えアプリ

/path/to /path/to#fragment

/path/to#fragment

load イベント時に fragment の有無で無ければ location.hash で付与



何が実現出来るようになったか

閲覧時の url ではなく、任意の url に対してホームスクリーンアイコン付きのショートカットが作成出来るようになった⁃ 元の課題感の技術的制約はクリアした• 但し UX その物は解決していない

任意の url に戻れるショートカットアイコンを作成する為の新しい window を立ち上げる仕組みとして Shortcut Service という形にまとめてローンチしました

⁃ ショートカットアイコン作成支援機能

⁃ JS SDK ホームスクリーンアイコン機能が生まれるまで－NBPF 構想の小さなピース ( 今日の元ネタです )

ここまでは普通に出てくる発想ですが実はショートカットアイコン作成機能は他にも面白い機能があります

12

https://docs.mobage.com/display/JPJSSDK/Shortcut_Icon

http://developers.mobage.jp/blog/js-sdk-home-screenicon






不慣れな体験を定着させる為に

ここまで色々とやってきましたが Native App と比較し、やはり UX としてユーザーに手頃とは言えない⁃ まずは使って貰う事が大事⁃ 使って貰ったらインセンティブが渡せるような枠組みを作った

具体的には？⁃ 実際には Platform のサーバーが仲介する仕組みなのでショート

カットから起動したかどうかは基本的には fragment の有無だけで判定出来ます• fragment ありでアクセスした場合は誰がアクセスしたのかを

Application Server に通知する仕組みがあります

• 通知が来たらアイテムプレゼント、、、みたいな使い方です

13



アーキテクトの役割 – システムをどう使って貰うか

常日頃から情報は仕入れましょう⁃ 人から聞いてひらめく事もあります

初めて見た仕組みがどう動いているか自分で実現出来ると確信出来る程度に考えましょう⁃ 自分は動作確認のために簡単なコードを書きました

新しい概念を提供する場合はそれを使いやすくさせる仕組みを提供していきましょう⁃ 今回はインセンティブを付与しやすい仕組みを追加⁃ また他にも実は楽しく見せる為のネタを幾つか仕込んでいました

どう使って貰うかを設定する事は KPI 指標としても使えます⁃ 要するにこう使って貰おうという意図が当たったのか外れたのか

14



アーキテクトの時間軸

ちょっと変な絵ですが自分はこんなイメージを持っています⁃ 突然やって来た要件をその場限りで解決する繰り返しとは大きく異

なる頭の使い方をしないとアーキテクトにはなれないと思います

15

現在過去未来

課題意識・知識・経験

疑問

R&D実現力

予測ビジョン



時間・目線をずらす事が大事

前のページのように時間軸の視点をずらすのも重要ですまた当然システム全容に対してマクロ・ミクロに視点を移し替えてそれ

ぞれ良く理解し構想も出来るようにすべきです

常日頃からそういった疑問や課題を持ち、実際に試す事また試すだけでなく活かすような工夫をする

こういった事がアーキテクトの役割であり、技術選択の基準だと思います。より詳細には前回のスライドも読んでみて下さい。

ご清聴ありがとうございました

16

Internet

技術選択とアーキテクトの役割 (要約版)