MOBILE APPLICATION2015年 GMOペパボ新卒エンジニア研修 モバイルアプリ研修イントロダクション

Webサービスを、より使いやすく、拡充させるためのモバイルアプリ開発の知識の習得

モバイルアプリ研修

Web開発

モバイルアプリ Webオペレーション

月 火 水 木 金

10:00 - 11:00 読書会

11:00 - 17:00 基礎研修 （昼休憩も自分たちで管理できるので省略）

17:00 - 18:00 キャリア・キーノート

キャリア・キーノート

18:00 - 19:00 夕会（リフレク＆シェアリング・次回アクション・日報）

時間割 (8/17～9/25)

モバイルアプリ研修

アジェンダ1. モバイルアプリ研修について

2. 研修のゴール

3. 研修のチーム

4. 研修の進め方

モバイルアプリ研修についてこの研修の位置付け

ペパボにとって、モバイルアプリは「挑戦」

モバイルアプリ研修について

• Web開発・Webオペレーションは、ペパボにとっての「強み」*

• モバイルアプリは強みにしていこうとする「挑戦」**

* ペパボにとってこの二分野のノウハウ蓄積は多い** ペパボの新卒エンジニア研修としても初めての挑戦

ペパボを支えるために、必要不可欠であることに代わりはない

モバイルアプリ研修について

• スタートラインの差こそあれ、ペパボを支える大切な技術の1つ

• どの分野でも価値を創造し、相談できるひとになってほしいです

この研修の位置づけ

モバイルアプリ研修について

• Web開発・Webオペレーションという「強み」に対し、モバイルアプリは「挑戦」

•モバイルアプリ分野でもバーンと価値を創造し、相談できるひとになってほしい

研修のゴール2ステップで駆け上がる

研修のゴール

1st stage

Rails をバックエンドとしたモバイルアプリの開発

研修のゴール (1st stage)

native app

Android と iOS

Rails をバックエンドとしたモバイルアプリの開発

研修のゴール (1st stage)

バックエンドは、Web開発研修でつくったRailsアプリ

Rails をバックエンドとしたモバイルアプリの開発

研修のゴール (1st stage)

インフラは、Webオペレーション研修で構築したサーバ

これまで作り上げてきたものを土台に、モバイルアプリを開発する

研修のゴール (1st stage)

Web開発

モバイルアプリ Webオペレーション

モバイルアプリで何ができればよいのか

研修のゴール (1st stage)

そのサービスができること*

* おかわり課題で実装した機能は例外

CIの導入

研修のゴール (1st stage)

Rails をバックエンドとしたモバイルアプリの開発

研修のゴール (1st stage)

• Web開発研修、Webオペレーション研修が土台

• Railsアプリ (Web) でできることをモバイルアプリでも

• CIの導入

研修のゴール 2nd stage

1つ以上の「ユーザ体験」* をつくる

研修のゴール (2nd stage)

1st stageで開発したモバイルアプリを土台にして、何もないところから作り上げる

* ユーザ体験という課題案は柴田さん (@hsbt) からいただきました

研修のチームソフトウェア開発に挑む2組のチーム

すずぴーHPせつやく

あらみそHPにんてんどう

みんなが持っている携帯電話を基準にしました

チームiO

SA

ndroid

すだっちHPねこ

じょうHPまどり

かすみんHPふれんちとーすと

こじこじHPえなじーどりんく

シャッフルはしないつもりです🙅

チーム

• Webオペレーション研修では、毎週シャッフルを行い、人が動いても大丈夫なオペレーションを実践しました

• が、モバイルアプリ研修では、言語から異なるため、シャッフルは予定していません

研修の進め方実践ソフトウェア開発

キーワード

研修の進め方

• ペーパープロトタイプ

• 遷移図

• 配布 (DeplayGate)

• ユーザテスト

• リーンキャンバス

• インセプションデッキ

• レビュー

• 見積りと計画

研修の進め方ペーパープロトタイプ、遷移図

「人と向き合うプロトタイピング」

ペーパープロトタイプ、遷移図

http://www.slideshare.net/yutawariishi/ss-47974238

ユーザのため、チームのため

ペーパープロトタイプ

• つくるものは、ユーザにとって良いものか？

• つくるものを、チームが共有できているか？

• 実装に入る前に、まずは描いてみましょう

Prott *

ペーパープロトタイプ

• プロトタイピングツールとしてProttとPrott noteを使いましょう

• 無料アカウントだと若干制限はありますが、研修ではそこまで問題は無いと思います

* https://prottapp.com

Prott for Browser

ペーパープロトタイプ

サンプル私と @kurotaky でやってみました

Cacooやマインドマップツールなどを利用して、「流れ」を整理する

遷移図

• 必要な要素は全て洗い出せたか

• 画面から画面への流れに違和感は無いか

• みんなで眺められる図をつくりましょう

サンプルhttp://www.shibafoo.com/ の場合

ペーパープロトタイプ、遷移図

研修の進め方

• ProttとPrott noteをつかったペーパープロトタイプ

• Cacooなどによる遷移図

• つくるもののイメージ、流れを共有する

研修の進め方配布、ユーザテスト

DeployGate* を使ったアプリケーション配布

配布

👎開発マシンにUSB接続して、都度都度インストール

👍ワイヤレスにだれでもインストール

• まずは、「インストール出来る」「起動できる」アプリを作る（スプリント・ゼロの意識）

* https://deploygate.com/

定期的な成果報告、状況の共有

ユーザテスト

• 毎週のキープアップで成果報告・デモ

• 互いのチームは、互いのプロダクトのユーザになりきる

• 見て、聞いて、触ってみた感想を適切にフィードバック

配布、ユーザテスト

研修の進め方

• DeployGateを使ったアプリケーションの配布

• 互いのチームに触ってもらうユーザテスト

• 進捗確認や情報共有のキープアップ（毎週）

研修の進め方リーンキャンバス、インセプションデッキ、レビュー

2nd stageから

導入のタイミング

• 1st stageの内容は、いわばモバイルアプリへの移植

• リーンキャンバスやインセプションデッキといったプラクティスを有効活用しにくい

https://github.com/demi168/Lean-Canvas-prototype-PDF

リーンキャンバス

こちらのリーンキャンバスはビジネスモデルキャンバス (http://businessmodelgeneration.com) とオライリー「Running Lean」を改変したもので、クリエイティブ・コモンズ 表示―継承 3.0 非移植 ライセンスの元に提供されています。

研修では一部のみ利用

インセプションデッキ

★プロジェクトの名前★我々はなぜここにいるのか★エレベーターピッチ• パッケージデザイン

• やらないことリスト

• プロジェクトコミュニティ

• 技術的な解決策の概要

• 夜も眠れなくなる問題は何だろう？

• 俺たちの“Aチーム”

• 期間を見極める

• トレードオフ・スライダー

• 初回のリリースに必要なもの

実際に取り組む前に、社内での使用例を見ましょう

リーンキャンバス、インセプションデッキの作り方

• 8月下旬～9月上旬あたりに説明会を予定

• 必要性と重要性を理解、納得してもらった上で取り組めるよう準備しています🙇

「ユーザ体験」をえらい人に見てもらいましょう

レビュー

• プロダクトオーナとまではいきませんが、チームが作ろうとしているものを見てくれる人がいます

• キープアップのタイミングで、アプリやリーンキャンバス、インセプションデッキをレビューしてもらいましょう

柴田さん @hsbt

みんなが提案するもの、つくるものをビシバシ評価してほしいです。

得意です。

リーンキャンバス、インセプションデッキ、レビュー

研修の進め方

• 2nd stageで、リーンキャンバスとインセプションデッキ（一部）を作る

• 柴田さんのレビュー

研修の進め方見積りと計画

これまでと同様に、しかし難易度は大幅アップ

見積りと計画

• 今までは課題が提供されていましたが、今回は「課題」から考えてもらいます

• 「やること」そのものを決めるところからスタートです

speakerdeck.com/kenchan/web-dev-training-introduction

まとめ

モバイルアプリ研修について：バーンと挑戦していこう🔥

研修のゴール：最高のユーザ体験をよろしく💝

研修のチーム：三人寄れば文殊の知恵 🍎

研修の進め方：プチスクラム 🏈