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

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Developers Summit 2015
技術選択と
アーキテクトの役割
(要約版)
C-7
デブサミアワード2015冬・あの人気セ
ッションの再演＆アワード表彰式
July 29, 2015
Toru Yamaguchi
Senior Architect and Sub Business Unit Head
Open Platform Business Unit
DeNA 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

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

突然のひらめき
 同僚から上記のようなアプリの存在を教えられる
⁃ ブラウザ立ち上がってるぞ？？？
⁃ しかも作成時の 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

不慣れな体験を定着させる為に
 ここまで色々とやってきましたが Native App と比較し、やはり UX と
してユーザーに手頃とは言えない
⁃ まずは使って貰う事が大事
⁃ 使って貰ったらインセンティブが渡せるような枠組みを作った
 具体的には？
⁃ 実際には Platform のサーバーが仲介する仕組みなのでショートカ
ットから起動したかどうかは基本的には fragment の有無だけで判
定出来ます
• fragment ありでアクセスした場合は誰がアクセスしたのかを Application
Server に通知する仕組みがあります
• 通知が来たらアイテムプレゼント、、、みたいな使い方です
13

アーキテクトの役割 – システムをどう使って貰うか
 常日頃から情報は仕入れましょう
⁃ 人から聞いてひらめく事もあります
 初めて見た仕組みがどう動いているか自分で実現出来ると確信出来る程
度に考えましょう
⁃ 自分は動作確認のために簡単なコードを書きました
 新しい概念を提供する場合はそれを使いやすくさせる仕組みを提供して
いきましょう
⁃ 今回はインセンティブを付与しやすい仕組みを追加
⁃ また他にも実は楽しく見せる為のネタを幾つか仕込んでいました
 どう使って貰うかを設定する事は KPI 指標としても使えます
⁃ 要するにこう使って貰おうという意図が当たったのか外れたのか
14

アーキテクトの時間軸
 ちょっと変な絵ですが自分はこんなイメージを持っています
⁃ 突然やって来た要件をその場限りで解決する繰り返しとは大きく異
なる頭の使い方をしないとアーキテクトにはなれないと思います
15
現在過去未来
課題意識・
知識・経験
疑問
R&D
実現力
予測
ビジョン

時間・目線をずらす事が大事
 前のページのように時間軸の視点をずらすのも重要です
 また当然システム全容に対してマクロ・ミクロに視点を移し替えてそれ
ぞれ良く理解し構想も出来るようにすべきです
 常日頃からそういった疑問や課題を持ち、実際に試す事
 また試すだけでなく活かすような工夫をする
 こういった事がアーキテクトの役割であり、技術選択の基準だと思いま
す。より詳細には前回のスライドも読んでみて下さい。
 ご清聴ありがとうございました
16

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

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

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

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

More from Toru Yamaguchi

More from Toru Yamaguchi (19)

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