１．お名前comのリニューアル概要 ２．テクノロジーとクリエイティブ ３．炎上の様子 ＆ 対応 ４．まとめ

1. 1
2017年7月11日 ＠GMO Yours
GMOインターネット 稲守 貴久
お名前.comリニューアルの舞台裏（炎上編）
すべての人にインターネット
http://www.gmo.jp

2. 2
１．お名前comのリニューアル概要
２．テクノロジーとクリエイティブ
① Angular JS – モダンなフロント実装
② WebSocket - 通信を保持させ最適な通信提供
③ SSO - 各種サービス連携
④ HCD – 誰のためのデザイン
３．炎上の様子 ＆ 対応
① 超巨大構造物をフル改修するインパクト
② 炎上と祭りは今も昔も江戸の華
４．まとめ
アジェンダ

5. 5
・日本初の公式レジストラーとして1999年にサービス開始
- 同年開始：ユーロ(通貨)、i-mode、ADSL、Bluetooth
・国内最大のドメイン登録サービス
- ドメイン国内シェア 90%（※2017年3末現在、GMO全体）
- 登録実績1500万件突破
・ドメインの他、サーバー、クラウド（SaaS）など展開
- 提供するサービスは20種類以上。
・東京を表す .tokyo 好評受付中！！！[PR]
お名前.comとは

6. 6
・日本初の公式レジストラーとして1999年にサービス開始
- 同年開始：ユーロ(通貨)、i-mode、ADSL、Bluetooth
・国内最大のドメイン登録サービス
- ドメイン国内シェア 90%（※2017年3末現在、GMO全体）
- 登録実績1500万件突破
・ドメインの他、サーバー、クラウド（SaaS）など展開
- 提供するサービスは20種類以上。
・東京を表す .tokyo 好評受付中！！！[PR]
お名前.comとは
日本のインターネットを支える
基幹サービスのひとつ

7. 7
・日本初の公式レジストラーとして1999年にサービス開始
- 同年開始：ユーロ(通貨)、i-mode、ADSL、Bluetooth
・国内最大のドメイン登録サービス
- ドメイン国内シェア 90%（※2017年3末現在、GMO全体）
- 登録実績1500万件突破
・ドメインの他、サーバー、クラウド（SaaS）など展開
- 提供するサービスは20種類以上。
・東京を表す .tokyo 好評受付中！！！[PR]
お名前.comとは
日本のインターネットを支える
基幹サービスのひとつ
抱える課題も
たくさんあります

8. 8
たくさんのサービス群

9. 9
たくさんのサービス群
豊富なサービス
それに反比例して
膨らむ影響範囲の拡大

10. 10
お名前.com リニューアル前

11. 11
お名前.com リニューアル前
旧態依然の
ユーザーインターフェース

13. いくつも分かれたログイン画面

14. 14
渋谷駅前

15. 15
まるで古くて大きな渋谷駅のよう
・迷路と揶揄される通路
・増改築による整合性のズレ
お名前.com リニューアルの背景

16. 16
https://www.shibuyabunka.com/
渋谷駅 工事計画

17. コントロールパネル統合プロジェクト
2015年 始動！

18. 脳内BGM

19. 19
銀座線 移設工事 第一弾（2016年11月）
開発イメージ

20. リニューアル前

22. 2017年6月に初版リリース！

23. バラバラだった機能を統合
インターフェース刷新による操作性向上
各サービスとの連携強化

24. 24
アジェンダ
１．お名前comのリニューアル概要
２．テクノロジーとクリエイティブ
① Angular JS - モダンなフロント実装
② WebSocket - 通信を保持させ最適な通信提供
③ SSO – 各種サービス連携
④ HCD – 誰のためのデザイン
３．炎上の様子 ＆ 対応
① 超巨大構造物をフル改修するインパクト
② 炎上と祭りは今も昔も江戸の華
４．まとめ

25. 25
テクノロジーとクリエイティブ

26. 26
テクノロジーとクリエイティブ：AngularJS

27. 27
AngularJS
いわゆるモダンなjavascriptフレームワーク
- Googleが主導して開発
- React, backbone.js, jQuery, Aurelia が類似
SPAで強力なWeb表現 ※SPA=Single Page Application
- 高速なページ遷移
- プッシュ通知などアプリのような豊かな表現力
メリット・デメリット
- MVCやテスト、データ結合が容易
- 技術者に高い難易度を求める

28. 28
テクノロジーとクリエイティブ：WebSockets

29. 29
WebSocket
伝統的なhttpと違い、通信を保持できる
- Webアプリ上で双方向通信を実現する
- 高速な応答を実現
- チャットの他、次ページを先読みなども可能
メリット・デメリット
- httpでは出来ないインタラクティブな表現
- サーバーリソースを多く使う可能性がある

30. 30
テクノロジーとクリエイティブ：SSO

31. 31
SSO（シングルサインオン）
ユーザー認証をスマートに
- １度の認証で複数必要だった認証を不要にする
- １つのIDで様々なお名前comサービスを使える
メリット・デメリット
- 利用者の利便性が向上
- セキュリティなど、高い技術要件
ドメイン
サーバー
etc
ドメイン
etc
♥…
シームレスな遷移
サーバー
SSO

32. 32
テクノロジーとクリエイティブ：HCD

33. 33
HCD（Human Centered Design）
誰のためのデザインをするのか
- 人間を中心にした設計思想 モノ中心から脱却
- 国際基準 ISO9241-210で定義されている
目的はユーザー体験の向上
- ペルソナ/プロトタイピング/ユーザーテスト
- 改善プロセスの反復
メリット・デメリット
- 操作性や使い心地が向上
- 人間工学やユーザビリティの知識が求められる

34. 34
アジェンダ
１．お名前comのリニューアル概要
２．テクノロジーとクリエイティブ
① Angular JS - モダンなフロント実装
② WebSocket - 通信を保持させ最適な通信提供
③ SSO - 各種サービス連携
④ HCD – 誰のためのデザイン
３．炎上の様子 ＆ 対応
① 超巨大構造物をフル改修するインパクト
② 炎上と祭りは今も昔も江戸の華
４．まとめ

35. 35
巨大構造物をフル改修するインパクト

36. 巨大構造物をフル改修するインパクト
国内シェアNo1のネットインフラ
画面機能数： ◯00 ヶ所
社内関係者： ◯00 人
開発期間 ： 30 ヶ月

37. 巨大構造物をフル改修するインパクト
複雑な要件：技術、海外、法律
技術的負債：機能減らさずモダンに
新しい挑戦：技術と価値を社会提供

38. 38
非常に可燃性が高い

39. 39
事例
炎上の話

40. 40
事例①
ログイン機能が動かず
リリースできない問題
炎上の話

41. 41
リリース２週間前、ログインできない！
事例①ログインのバグ

42. 42
サーバー群
事例①ログインのバグ
全台への反映が出来ていなかった
（比較的、初歩ミス）
反映失敗
反映成功

43. 43
炎上の話
事例②
検証項目が数万件で期限まで
に終わらない問題

44. 44
事例②検証項目が多くて終わらない
大量の機能 ⇛ 大量の検証
ざっくり半年くらい掛かりそう

45. 45
事例②検証項目が多くて終わらない
検証要員メンバーの大量追加
ありがたいですね（小並感）

46. 46
事例③
マネージャーおじさんたち
ケンカ勃発問題
炎上の話

47. 47
事例③マネージャーおじさんたちのケンカ
猫好きおじさん
Ｙ マネージャー
マッチョおじさん
I マネージャー
システム本部のキーパーソンである二名

48. 48
事例③マネージャーおじさんたちのケンカ
開発における作業分担や責任区分
影響範囲などなど、白熱した議論

49. 49
事例③マネージャーおじさんたちのケンカ
仲良くしてもらいました
（詳しいことは深追いしないでね。約束だよ♡）

50. 50
炎上と祭りは江戸の華
その他、様々な仕組みを自動化し
巨大構造物をリプロダクト
調査と計画：JIRA, Kibana(BI)
改善と継続：Git, Jenkins, ChatOps

51. 51
TeamGeek

52. 52
TeamGeek
HRT

53. 53
TeamGeek
Humility
Respect
Trust
謙虚
尊敬
信頼

54. 54
製品開発成功の可否は
自分たち次第

55. 55
まとめ

56. 56
まとめ
１．リニューアルの背景をお伝えしました。
２．導入されている技術やデザイン手技法に
ついてお伝えしました。
３．製品を届けるフローについてお伝えしま
した。
４．情報通信技術における製品開発の醍醐味
を少しでも伝われば嬉しいです。

57. 57
ご清聴ありがとうございました！
Thank you very much for listening!
すべての人にインターネット
http://www.gmo.jp