Chomado's Blog
You Are Reading

[マイクロソフト公式イベント #decode18 基調講演で2000人の前で登壇した] Visual Studio App Center のデモ内容まとめ #AD08

0
Menu

千代田まどか (ちょまど) のブログ『ちょまど帳』

Menu
Home プログラミングDevOps[マイクロソフト公式イベント #decode18 基調講演で2000人の前で登壇した] Visual Studio App Center のデモ内容まとめ #AD08
DevOps

[マイクロソフト公式イベント #decode18 基調講演で2000人の前で登壇した] Visual Studio App Center のデモ内容まとめ #AD08

updated on [マイクロソフト公式イベント #decode18 基調講演で2000人の前で登壇した] Visual Studio App Center のデモ内容まとめ #AD08 への1件のコメント0
このエントリーをはてなブックマークに追加

2018/5/22(火)-23(水)の２日間、日本のマイクロソフト公式大型技術カンファレンス「de:code 2018(デコード)」がありました。
公式サイト：microsoft.com/ja-jp/events/decode/2018/
そこで私はキーノート登壇などしました。2000人以上のイベントの基調講演です。そしてライブストリーミング配信ではリアルタイムで4000人もの方が見ていたらしいです。つまり6000人の前で登壇したことに！がんばったー！
そのキーノートでやった Visual Studio App Center の GitHub インテグレーションのデモの手順などをここに記しておきたいと思います

↓ 私は一番左！

私の出番

私の出番一覧です！

＃ 日付 時間 出番 観客 コメント
1 Day1(火) 09:30 -12:30 キーノート 2000人 1回目の出番
2 Day1(火) 09:30 -12:30 キーノート 2000人 2回目の出番(メイン)
3 Day1(火) 14:20 -15:10 App Center のセッション登壇 300人 キーノートのほぼすぐ後だ
4 Day2(水) 15:20 -16:10 展示会場内 Women in Tech のブース ？人 スイーツと紅茶が出るらしい。神か。男性も来てね

という出番があります

皆様に感謝

これ前日のツイート。
ずっと練習がうまく行かなかったんですけど、ツイッターで「頑張って！」と皆さまに励まされ、それを見たら勇気が出てきて、リハーサル、うまくいきました。
本当に私は皆さまに支えられています。ありがとうございます・・・！

皆さまの反応

キーノート会場の皆様のツイート

私が基調講演で登壇したとき、色んな方々が反応してくださって嬉しい！

たくさん！

私は滑舌が悪すぎて、日本語より英語のほうがまだマトモに聞き取れるらしい

ライブストリーミング配信

当日は4000人以上が配信をリアルタイムで見ていたらしいです！すごい！

Lara と2人の Cosmos DB デモのツイート

↓デモ概要

私は英語で喋ったんだけど、ライブストリーミング配信では男性の声で日本語吹き替えされてたらしいｗ
私から渋い男性の声が出てる様子を想像したらちょっとおもしろかったｗ

この Cosmos DB のデモの時も皆さま反応してくださってありがとうございました！

私の個別セッション


microsoft.com/ja-jp/events/decode/2018/sessions.aspx#AD08

Women in Tech の私の担当時

キーノートでのデモ

というわけで、私は、キーノートで、モバイルアプリ開発/運用に便利なサービス「Visual Studio App Center」のデモを行いました。
誰でもその手順を再現できるように、そのデモの手順や要点などを、ここに全て記録しておきます。

主要メッセージ

私のデモでの要点を３つにまとめました。

  1. 「Visual Studio App Center」は、モバイルアプリ開発/運用に便利なサービスが詰まっている。
    • （本当はモバイルアプリだけじゃなく Windows 10 (UWP)アプリや macOS アプリ(preview)もあるんだけど、今回デモした実機テストなどの機能はモバイルアプリのみのものなので、以下「モバイルアプリ開発」と限定して書きます）
  2. 「Visual Studio App Center」は、Xamarin だけでなく、
    • Swift/Objective-C (iOS)
    • Java (Android)
    • React Native (iOS/Android)
    • Xamarin (iOS/Android)
      もサポートしている。(実はこれらに加え更に Cordova (iOS/Android)もあるけど、これはまだ preview)
  3. Build 2018 で新発表された、App Center の GitHub Integration を使って、アプリ開発からリリースまでを爆速で行おう！

デモ手順

導入

「さて、私のデモ時間は、5分間です」
「この５分間で、私は、

アプリ開発/運用支援サービスの Visual Studio App Center の GitHub インテグレーションを有効化し、
GitHub レポジトリに Pull Request が来たら
その変更でビルドが壊れないことを自動で確認できるようにし、
また、実機での自動UIテストの様子をお見せし、
最後にアプリを App Store へリリースする方法を、お見せ致します」

1. GitHub レポジトリの説明 → App Center for GitHub インストール

1つ目のタブ。

「これは、GitHub に置いてある、Smart Hotel というデモアプリのリポジトリです」

[マウスをアプリスクショの上に動かす]

「これは Swift で書かれた iOSアプリです。ちなみに、App Center は Swift 以外にも、Objective-C, Xamarin, React Native, Java も対応しているので、私がこれからするデモは、それらでも同じように動きます」

[Pull Requests をクリック]

「開発チームは develop ブランチにて新機能を実装したので、今回、この master ブランチにそれを取り入れる pull request を送っています」

[PR詳細をクリック]

[マウスカーソルをCIのところに移動]

「Pull Request が来たら GitHub は継続的インテグレーションの設定の有無を確認して、設定されていない場合は GitHub マーケットプレイスへのリンクを出してくれます。」

[“are available” をクリック]

[マウスカーソルを App Center ぐるぐる]

「モバイルアプリ開発のCI対応アプリの中に、App Center がありますね。」

[App Center クリック]

「App Center で自動ビルドの設定をするため、この GitHub アプリをインストールします。」

[下までスクロール]

「無料版があるので、無料版を使います。皆さまはここの『Install it for free』を押せば良いです。ただ、私は既にサブスクリプション済なので、アクティベーションは上から行きます」

[“grant this app access to your GitHub account” をクリック]

「ぽちっ」

「そして、App Center が GitHub の私のリポジトリにアクセスできるよう、許可します」

「そして App Center の画面に来ました。Smart Hotel のリポジトリを選びます」

「そして全部
　『これ iOS アプリで言語は Swift だわ』
と自動的に検知されるので、私は何も手動で入れる必要はありません。
そのまま続けます」

「App Centerはビルド設定も全部自動検知するので、
私はただこの『Save & Build』を押すだけです。」

「さあ、ビルドが始まります。」

「この裏では、Azureが、
• 最新のツールを備えた新しい仮想マシンをプロビジョニングし、
• リポジトリをプルし、
• ビルドを実行し、
• 完了すると仮想マシンを安全に削除する
ということをしています。」
「ではSmartHotelアプリに戻りましょう」

GitHub に戻り、Pull Request のページで Checks API を見せる

[App Center の画面から、GitHub の PRページに戻る]

「私のビルドはもう走っていますね」

[running ラベルにマウスカーソルを載せる]

「このアプリのビルドは２，３分かかります。」
「そしてそれが終わると、App Center は GitHub にステータスのレポートを返します」

「そしてPull Requestのチェックのところが全部緑になりましたね」

[“Show all checks” をクリック]

「また、Pull Request を Merge したりテスターにビルドを配布する前に、
自動テストを走らせて、何のリグレッションも起きていなことを確認したいですよね。
新機能を追加したら既存のものが壊れたということが無いように。

そこで、App Centerは、自動テストの機能を提供しています」

iOS アプリの自動 UI テスト

[App Center の デモアプリ iOS プロジェクトの自動UIテストのページを開く]

「様々な OS や言語設定の、数千もの実機デバイスを、リモートで動くテスト機として提供しております。エミュレータではなく、実機です。
自分の作ったアプリやUIテストが、iPhone 実機でどのように動いているかが確認できます」
「そしてもちろん、最初に申し上げたとおり、
App Center では、iOS アプリだけでなく、Android アプリもサポートしています」

Android アプリの自動 UI テスト

[App Center の デモアプリ Android プロジェクトの自動UIテストのページを開く]

「こちらが Android版です。私のアプリがAndroid機ではどう動くのかを確認できます」

[縮小ボタンをクリックして Android 実機を沢山見せる]

「一回のテストで 100 種類以上の実機で動作確認させることができます」

[Pause]

「ところで、いくつかのテストで「失敗」していることがわかりますね。
　何の機種で何の操作で失敗しているのでしょうか?」

[失敗している端末をクリック]

「ということでよく見てみると、この機種で、
　ホームスクリーンへの移動に失敗していることがわかります」

[ログを見せる]

「テストログやデバイスログもそのまま見られるので、デバッグに約立ちます」

[Pause]

「さて、PRごとに自動ビルドが走り、 ユーザの操作ベースの自動UIテストが実機で走ったことを確認しました。
そして次は、App Store へのサブミットですね」
「過去、我々はこれを手動でやっていました。何度も何度も。
　でも継続的デリバリーを実現するため、GitHub と App Center を使って、これらの手順を自動化します」

5. Buildを見せる。master ブランチを App Store へのデプロイブランチに設定する

[Web ブラウザの 5つ目のタブに切り替え]

「そのために、masterブランチでビルド成功したビルドを自動的に App Store に提出するように、設定します」

「そのためにやることは、簡単で、Distribute buildsを有効にして、
提出先を「テスター」から「Production」に変更するだけです」

[Production App Store を選択]

(これでPCでの操作は終わり！壇上から離れて少し歩きながら話す)

「Visual Studio App Center で、あらゆる手順を自動化することにより、アプリ開発者のみなさまの生産効率がもっと上がることでしょう。」
「ちなみに、App Centerには、これらの他にも、ユーザ分析やクラッシュレポート、Push通知などの機能もあります。
ぜひ、今日、始めましょう」

（元気な声で、お辞儀）

「ありがとうございました！」

おまけ

女子との絡み・・！

このエントリーをはてなブックマークに追加

Madoka Chomado (ちょまど)

千代田まどかです。よく「ちょまど」と呼ばれます。Microsoft 社員。文系出身プログラマ兼マンガ家です。

You may also like...

(1) Comment

  1. 匿名 says:
    Posted on
    返信

    ｲｲｿﾞｰｶﾜｲｲｿﾞｰ

匿名 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です