Microsoft de:code 2018に行ってきた
Microsoft de:code 2018の基調講演と聞いたセッションについて、自分の感想まとめです。ほぼTwitterを貼っただけです。
会場の雰囲気
基調講演のサテライト会場に着くと、ピアノジャックのおしゃれなBGMに乗ってループデモが流れていました。
基調講演以外の各セッションには入場制限があり、人気の枠には毎回長蛇の列ができていました。#decode18 会場(パーティではない)で流れてたBGM、なんか聞いた事あるなと思ってたけど、ピアノジャックだhttps://t.co/QuHkE0qMiz
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
良いセンス
#decode18 各セッション毎に参加証による入場制限あって、先着順で結構な満席が出てる。聞きたいセッションはちゃんと狙わないとまずいっぽい
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
公式アプリで事前の参加予定登録をもとに混雑情報表示まで出来ているのですが、実際の入場は早いもの順というのはちょっと微妙だなと思いました。 キーノートは本会場には全員入れないし、Day1のパーティ会場もかなり窮屈だし、結構大変でした。
de:codeみてると、正直AWS Summit Tokyoがいかにちゃんとしたイベントかを認めざるを得ない。参加費無料であのレベルなのは、ものすごい投資なんだなと。とてもAmazonらしい戦略だけど
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
基調講演「Transforming Intelligence」
日本マイクロソフト株式会社 執行役員 常務 デジタルトランスフォーメーション事業本部長 の伊藤 かつら氏の講演からスタート
#decode18 pic.twitter.com/JBywpxFojG
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
Microsoftの大きなプラットフォームとして「Microsoft Azure」と「Microsoft 365」の2つを挙げていました。もう散々言われている事ですが、そこにWindowsはありません。
そして「MicrosoftがAIをどう考えてるか?」という話から 『The Future Computed』日本語訳版の公開。
基本的に月初のBuildと重複する内容が多かったde:codeの中で、この日の日本独自の発表のひとつです。「The Future Computed」これか #decode18
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
AIの方向性と倫理、雇用の影響は--日本MS、書籍「Future Computed」日本語版を公開 - CNET Japan https://t.co/c9NYoAhoGE
Windows10の、公開されたばかりの新機能「Timeline」と、公開予定のアプリ「Your Phone」、公開予定の機能「Sets」を交えたデモ。Your Phoneは次のWindowsのメジャーアップデートで搭載予定とのこと。
Windows Timeline、Your Phoneの話。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
しれっとSetsも使ってるかな。 #decode18
今年のde:codeのテーマは『L♡VE to CODE』とのことで、登壇者の多くはこれがプリントされたTシャツを来ていました
L♡VE to CODE #decode18
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
そして Microsoft Corporation Azure Marketing Corporate Vice President Julia White氏にバトンタッチ。
IoTでボタンを押すとTweetを投稿するアプリ開発のデモ。
Bluetoothボタン→ IoT Hub→Functions→Logic App→Twitter投稿 を5分でつくるデモ #decode18
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
デバイス接続済だったりコード予め書いてあったりして本当に5分と言えるのかは疑問だけど、Logic Appにさえ繋げばほとんどコード書かずにアプリケーション作れるのが肝かな
Custom Visionでパイナップルを画像判別するデモ
Custom Visionをラズパイで動かしてパイナップルの画像認識をするデモ #decode18
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
これは、ラズパイ上で動くのが鍵なのかな。
クラウド上で動くだけでも十分すごいけど、その学習済みモデルをDockerfileにExportしてIoTデバイス上にデプロイして動く、という話のはず
PxCodeによるCosmosDBリージョン横断マルチマスターレプリケーションのデモ
Azure CosmosDBの、リージョン横断マルチマスターレプリケーションのデモ #decode18
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
多分buildでやってたのと同じ、USとJPで同時にお絵描きするアプリ。これほんと謎の技術
(デモアプリここから実際に触れるけど、なかなかデモみたいに描けないのは内緒)https://t.co/qkIkUKbKQB
続いて Microsoft Corporation Developer Division Corporate Vice President Julia Liuson氏へ。
Buildで最も気になった機能、Visual Studio Live Shareのデモ。
VisualStudio LiveShare、Windows上のVisualStudio CommunityEditionから、Mac上のVSCodeのNode.jsのコードを触るデモ #decode18
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
これもbuildと同じやつっぽいけど、細かい所よく分かってないので助かる
VS LiveShareのデモ #decode18
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
ShareServerすると、他人のlocalhostを自分のlocalhostのように操作できる。
ShareTerminalでは、ReadOnlyとRead and Write選べる。Write許可すると他人のTerminal操作できる。
うまく使えば最強だけど、やっぱ悪い使い方ばかり考えてしまうw
続いて、Visual Studio Mobile Centerから名称変更したはずの「App Center」のデモ
Visual Studio もば...AppCenterのデモ #decode18
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
Visual Studio App Center + GitHubでのCIのデモ #decode18https://t.co/zYLTi5WNgh
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
いまさら気づいたけど、この基調講演、ここまで登壇者がデモ含めて全員女性だ。
同時翻訳は男性もいるけど。
そしてMicrosoft Corporation Mixed Reality Studios General Manager Lorraine Bardeen氏へ
#decode18 Microsoft Graphの話。コレよく分かってないんだよな。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
開発会社にAdobeの名前が入っているんだけど、どういう事なのか。Adobe製品にWindows TimelineとかとIntegrationあり得るって事?もしそうなら結構大きいんじゃないの。どうなんだろ
Buildの配信を聞いていてよく分からなかった「first line worker」という単語
first line worker「前線に立つ人たち」と訳されてるっぽい #decode18 https://t.co/TpoT0GaK6n
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
最後は日本マイクロソフト株式会社 代表取締役 社長 平野 拓也氏が登場。
りんなについての発表がありました。これは日本独自のはずです。
#decode18 りんなの話。「共感モデルに移行」というのは、コレかな https://t.co/MA9Ne5SwTT
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
Women in Technology。 最後に登壇した平野社長を除いて、キーノートの登壇者はスピーカー・デモプレーヤー含めて全員が女性でした。
Women in Technology
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
キーノートの登壇者がここまで全員女性なのは、やはり意図的にやっていた。
そして平野社長「女装して出て来れば良かったな」w #decode18
マイクロソフトの、こういうの取り立てて主張する姿勢は正直あまり好きではないです。誰も何を言わなくても当たり前のように女性が活躍する社会であるべきだと思います。 でも実際、本当にスピーカーを全員女性で揃えることができる会社は限られていると思います。AI for Accessibilityもそうなんですが、ある意味、こういう役を買って出ていって社会を率先して変えていくのは、マイクロソフトらしいなと思います。
Keynote感想
de:codeの基調講演は、buildの日本語版になっていると思いました。
de:code 2018、キーノート基本的にbuildの翻訳版というべき内容だな。それはそれで面白いし、buildは英語でしか観てないので訳されてると新しい発見もあるけど、buildもde:codeも配信あるっぽいし、サテライト会場で見るくらいならわざわざ来なくてもいいかな。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
本会場にみんな入れれば良いんだけど
『Hit Reflesh』の米国本社の社内文化改革の話を読んで、この間の澤円氏の記事があって、そしてde:codeの基調講演のメインスピーカーがほとんど英語...となると、色々考えてしまう事がありました。
りんなとかはいるので、まだまだ日本も頑張って欲しいですけどね。
#decode18 聞けば聞くほどbuild行きたい気持ちが高まる
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
#decode18 まさに、こういう講演を聞きながらHoloLensでハッシュタグのタイムラインを視界に重ねたりしたい
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
あとBuildの基調講演には「私はタダのAzureエンジニアです~」みたいなノリで、立ち上がって背伸びをする時間みたいなのがありました。どうせならそこまでやって欲しかったなと。
#decode18 基調講演、ほぼBuildと同内容だけど、そこまでやるなら途中のストレッチタイムもやって欲しかったところ。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
3時間座りっぱなしはつらい
Day1: Web App for Containers 最新アップデート全部入り
Microsoft Corporation Azure App Service team Senior Software Engineer 河野 通宗 (Michimune Kohno)氏
「App Service」の一部である「Web App」の、Container対応である 「Web App for Containers」の紹介でした。
まず、既にできることとしてスケーリング、スロット(Blue Green DeployみたいなStageわけ?)、共有ストレージ等の共有がありました。
そして、5月のアップデートで追加された新機能としてマルチコンテナやApp Service Environment、EasyAuth、NodeJSリモートデバッグ、Windowsコンテナ(まだPrivatePreview)あたりを、デモを中心に解説されていきました。
#decode18 #AD37 WebApp for Containers EasyAuth、すでにDockerで動いてるWebアプリに対してAD認証を簡単に付与できる。認証されてなかった場合の動作とかを指定するだけ。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
特に、Docker ComposerのYAMLファイルを使ってマルチコンテナ構成を構築できるのは知らなかったので、気になります。
#decode18 #AD37 マルチコンテナ機能。yaml(docker-composeかな)アップロードするとコンテナ環境が立ち上がる。コンテナのひとつをWebContainerとして指定すると、それに内部nginxからhttpリクエストが振り分けられるようになる。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
起動順序に依存関係がある場合は注意
あった。マジでDocker ComposeでAzure Web Appマルチコンテナデプロイ行けるようになってたのか。知らなかったhttps://t.co/dM6VTRDL8d#decode18 #AD37 pic.twitter.com/c4MaElnIsi
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
あと、デモの途中でおすすめされていたChromeExtention
#decode18 #AD37 JSON Viewer Chrome Extentionが便利らしい。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
コレかな: JSONView https://t.co/Jp73z3SCK8
Day1: 次世代データベース サービス「Azure Cosmos DB」を使いこなそう ~ Azure Cosmos DB Deep Dive ~
日本マイクロソフト株式会社 パートナー事業本部 Azureテクノロジスト 佐藤 直生 (Neo)氏
「CosmosDB」は、かつてあったNoSQL型データベース「DocumentDB」の後継となる新しいDBです。たぶん。
#decode18 結局、Azure CosmosDBは分かったような、分からないような
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
Amaz●nで言うRDS AuroraとDynamoDBを合体させて魔改造したデータベースの化け物みたいななにか、のような認識
専門外セッションでレベル300(中級者向け)とあって、実際の内容はけっこう難しかったです。
#decode18 #DA19
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
CosmosDBのパーティショニングで使ってるって一瞬名前が挙がった"Consistent Hashing"、コレかなhttps://t.co/uYiB10XQ3F
あとでよむ。ぜんぜん追いつかない。
Azure CosmosDBのECサイトjetcomにおける事例 #decode18 #DA19
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
イベント ソーシング アーキテクチャで在庫管理システム。ブログはコレかな。あとでよむhttps://t.co/VaywEJON58
イベントソーシングについてはこの記事が詳しいかと。 postd.cc
CosmosDBはレイテンシに対するSLAがあるそうです。CosmosDBに限らず、AzureはSLAしっかりしている印象です。
CosmosDB、レイテンシのSLAがある。read 10msec, write 15msec。 #decode18 #DA19
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
AzureはSLAちゃんとしてるのが、他のクラウドサービスに対する強みだと思ってる
Day2: AI 活用の一歩を踏み出したい皆様に贈る Cognitive Services & Bot Framework はじめてみた物語
日本マイクロソフト株式会社 コマーシャルソフトウェアエンジニアリング本部 テクニカルエバンジェリスト 大森 彩子氏が進行役となって、AI関連技術の3つの導入事例を紹介していくセッションでした。
まずはシブヤクハックの事例。 hacklog.jp 「渋谷ダンジョン」と称されるほど複雑な渋谷駅において、車椅子でも出口に出られるようバリアフリー経路案内を作成。
目的地入力をBot化し、QnA Makerで、適切な出口を返す。実装自体は30分ぐらいとのことです。
#decode18 #AI03
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
BotFrameworkの事例。ChatBotに用語集を用意。
用語については、わざわざ質問しない事でもChatBotだと聞いてもらえる。
続いて日立製作所の事例。 新人6人の研修で、社内勤怠システムのChatBotを作った話でした。
#decode18 #AI03
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
新人研修で社内勤怠システムのChatBotを作った話。「勤怠の承認者を設定したい」みたいなのを理解して回答してくれるらしい。いいなあ
この事例も、まず「QnA Maker」で作ってみたものの精度が上がらなかったそうです。QnA Makerは手軽に構築できる半面、DBと検索が分かれていないので問題の切り分けがしにくいとのこと。
次に検討したのが「LUIS(自然言語処理)」+「AzureSearch」しかし、この構成はいろんなシステムのChatBotを作ろうとするとTooMatch。 最終的に「TextAnalyticsによるキーワード抽出」+「AzureSearch」。FAQを検索するにはコレで十分だったとのことで、採用。
回答候補は5つ出すよう割り切ったり、よくある質問Top5についてはAIを使わない、TextAnalyticsではエラーコードのような数字・アルファベットは判別できない事があるので別口で用意したりと、AIに頼る部分とそうでない部分を切り分けてうまく開発を進められている印象でした。
最後はダイキン工業株式会社ルームエアコンAI故障診断の事例
#decode18 #AI03
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
ダイキン工業株式会社ルームエアコンAI故障診断の事例 https://t.co/SwZmyPSek7
電話かけるよりWebで解決したいニーズが増えてきて、ChatBot作った。LUISで、たとえば「チカチカする」を「点滅」と理解して回答してくれたりする。Bot上でそのままシームレスに申込まで行けたり
LUISでユーザの自由入力を自然言語処理で解析していました。
たとえば「異音がする」という事象について「音がする場所→室内機or室外機」のように、音の場所や種類をEntityとして定義していったようです。3つの事例の中では最もAI開発っぽいと思います。
もともとコールセンターが受けていたようですが、電話よりもWebで対応したいというニーズに合わせてChatBotを開発したとのこと。 実際、他の施策とも併せて利用数が2倍になったとのことです。
Day2: 3大フレームワーク(Angular, React, Vue.js)比較によるエンタープライズ Web アプリケーション開発の最適化
アシラス株式会社佐川 夫美雄氏による、de:codeでは珍しい"Web"系のセッションでした。
#decode18 #AD16
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
「Web界隈でこんなこと話すとすごいマサカリが飛んでくるけど、de:codeなら話せる」w
Webアプリケーションを構成するのはHTML(Structure)、JavaScript(Behaviour)、CSS(Presentation)ですが、覚える事が多いとのこと。
たとえば「HTML」について。「Semantic Web」は必要かどうか?その重要性を説明できますか?
「CSS」は、闇。
そして「JavaScript」は...
Webエンジニアが少ないからってひどい言われようw#decode18 #AD16
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
「みなさん、JavaScript好きですか?」「いま手を挙げた人は変態です。だっておかしいですよ、オブジェクトにあとからメソッド好きに追加するとか」「ヤクザみたいな感じ」めちゃくちゃ言うwww
ここでデザインの話へ。 CSSの抱えるグローバルスコープという問題、それに対するWeb Componentsの考え方、Atomic Design、これらには共通点があります、というところで説明が終わります。
この辺の話は熱かったのですが、Atomic Designはよく知らないのでもうちょっと説明が欲しかったところではありました。
XDが登場したり、これからのフロントエンドデザイナーのあり方を語っていたり。 普段ほぼ常にデザイナーと一緒に仕事している私としては、結構共感する所の多いセッションでした。
不意打ち!XDさーんー!!#AdobeXD#decode18 pic.twitter.com/huKkSNcA9I
— Risa Yuguchi (@risay) 2018年5月23日
#decode18 #AD16 「ヒアリング、ワイヤーフレーム、デザインカンプ。要件定義書、シナリオテスト、機能テスト仕様書。デザイナーはここまでやらないと仕事なくなりますよ」
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
Web Components 4つの要素の説明。
- Costom Elements (Pieceに名前をつける)
- HTML Templates (Pieceの模様)
- HTML Imports (Pieceをパズルにはめる)
- Shadow DOM (Pirceであることを主張)
このうちShadow DOMが最も重要であるとして話は進んでいきます。
#decode18 #AD16 Semantic Webやろうとしても、W3Cが考えた名前付けなんてWebアプリケーション開発において足りない。そこでCustom Elementsで、独自の名前をつける。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
Templates定義して、Importして、Shadow DOMにする。
JSのフレームワーク選ぶなら、このWeb Components見てから比較したほうが良い
「BEM、SMACCS、OOCSS、そんなもの要らない。これ言うとWebの人には殺されるけど」「本当にやりたいのは、Shadow DOMでScoped CSSやりたい。Web ComponentsでShadow DOMが一番大事」#decode18 #AD16
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
ここでようやく「Angular」「React」「Vue.js」の比較に移ります。 Scoped CSSを実現するための最小手数のコードを紹介していました。 コードはGitHubにも上がっていました。
#decode18 #AD16
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
最後に出てたサンプルコードのGitHubhttps://t.co/NKp02gdOxL
このセッションすごい良かった。釣られたけど。
Swaggerを使うことで、フロントエンドエンジニアだけいればとりあえず動く物を作ることができること、そのためにもフロントエンドエンジニアがAzure(クラウド)を学ぶ必要がある、といって締められました。
「逆に、フロントエンドエンジニアはフロントだけやっていてもダメ」「フロントエンドエンジニアこそAzureをマスターせよ」#decode18 #AD16 https://t.co/7TwdZHbER1
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
自分がWebエンジニアなのもありますが、最も共感するところの多いセッションでした。ただ最初に「釣りです」と公言していたとおり、「3大フレームワーク比較」「エンタープライズ Web アプリケーション開発」といったタイトルにはまんまと釣られましたw
「3大フレームワーク(Angular, React, Vue.js)比較によるエンタープライズ Web アプリケーション開発の最適化」#decode18 #AD16 釣られたw
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
Day2: 進化する Web ~ Progressive Web Apps の実装と応用 ~
最後は日本マイクロソフト株式会社 パートナー事業本部 テクニカルエバンジェリスト 物江 修氏による、Progressive Web Apps(PWA)のセッション。
PWAについては、ちょうど自分もブログを書いてLTもしたばかりだったので、復習も兼ねて聞いていました。
Progressive Web Appsの「Progressive」について、HTML5が流行りだした頃によく言われた「プログレッシブ・エンハンスメント」と同じだと説明。 www.mdn.co.jp
この説明はとても頭に入りやすかったです。
#decode18 #AD09
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
PWAの"P"。アプリにおけるProgressive Enhancement。
低機能なブラウザーではWebページ、高機能なブラウザではアプリケーションが表示される。
#decode18 #AD09 ServiceWorkerをPWAのためでなく単純にキャッシュとして使ってスピードアップに使ってもいい。"Progressive"なので、古い環境には影響を及ぼさずに既存アプリに導入できる。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
WebのメリットとしてSLICE(Secure, Linkabke, Indexable, Composable, Ephemeral)を挙げ、それとアプリの良い所どりをしたPWAはFindable (発見性)、 インストール可能、プッシュ通知により再エンゲージ可能、ネットワーク非依存、プログレッシブ、レスポンシブ、安全、リンク可能といったメリットがあると語られました。
その後、PWAを実現する主要な技術のひとつであるService Workerについて説明がありました。この辺は自分の書いたブログにも重複する内容だったため割愛します。 s2terminal.hatenablog.com
最後にWindowsにおけるPWAの話に移ります。Bingによる自動クローリングでPWAがMicrosoftStoreに登録されるようになった、という話がありましたが、WindowsにおけるPWAは WinRT APIをコールできるため、できる事が広がるようです。
#decode18 #AD09
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
PWAをWindows Store Appにするとストア課金とか無制限データストレージとかいくつかメリットがあるけど、PWAからWinRT APIにアクセスできるようにもなる。if ( https://t.co/3zJS0Uld2r ) ... でWindowsのAPIが使えるかどうかを調べられる。
#decode18 #AD09
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
WindowsでPWAにすることで、顔認証とか、BluetoothLEとかが、Webから使えるようになる。https://t.co/obYtEDwbOC https://t.co/A8wbMjc0An
#decode18 #AD09 PWAの価値を高めるAPI、CSS3のGPUレンダリング設定とかある。ネイティブに負けないぬるぬる動くアプリを作れる。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月23日
Web検証ツールのsonarwhal(そなーほえーる)の紹介もありました。
ChromeでいうLighthousにあたる物です。実際に、私が作ったPWAも検証してみました。PWAの項目については一応Errorはありませんでした。
その他の雑記
パーティ会場のDJの女の人、すごい美人なんだけど、神妙な顔で微動だにせず淡々と回してるの見て、私の知っているDJ像とまるっきり違う
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
マイクロソフトのイベントだしSurfaceBook持って来たけど、やっぱり持ち運ぶには重い。
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
Chromebookにすれば良かった。
HZ750とかUH75/B3みたいなモバイルWindowsノート欲しくなる
しかしSNS上とか本の著者としてしか見たこと無いような人、私にとっては芸能人とか政治家と同格の人がその辺に普通にいて、普通にHoloLensかぶって歩いてたりしてて、さすがMicrosoft公式の有料の大規模イベントだなとは思った
— suzuki.sh(s2terminal) (@suzukiterminal) 2018年5月22日
言い忘れてたけど
— suzuki.sh(s2terminal) (@suzukiterminal) May 26, 2018
de:codeは「でぃーくぉー」
Azureは「あじょぁ」
VisualStudioは「びじょすたじゃー」と読むっぽい #decode18 #azurejp
まとめ
自分は有料のカンファレンスに参加するのは初めてだったのですが、非常に濃い内容で刺激になりました。
一方でライブ配信や資料公開(予告)もされていたりして会場に来なくてもある程度楽しめたのかなと思います。 どのセッションも早いもの順のため長蛇の列で待たされたり、満席で入場制限がかかったりライブ配信上映のサテライト会場に回されたり、運営については課題も無くはないと思いました。 会場の熱気を楽しみたい人向け、でしょうか。でもそうなると、結局アメリカまで行ってBuildに参加したい、という気持ちのほうが高まってきます。
あと、日本語セッションには自動英字字幕が付いていました。精度は微妙っぽいですが、英文が完全リアルタイムで画面上にうにょうにょ生成されていくのはテクノロジーっぽい感じがとてもしました。
会場の空調もIoTとAzureで自動制御されていました。
カフェラウンジの混雑状況も「どこに何人並んでいる」というのが公式アプリ上に表示されていました。スタンプラリーがあって、会場内に設置されたアイコンの写真を撮って集めていくのですが、判定には多分CustomVisionServiceを使っていると思います。
こういった運営の細かい所に最先端の技術を投入してくるのは、技術系セミナーならではという感じがしました。
参考
Microsoft Build 2018 Keynoteライブ視聴の所感まとめ
後にde:code2018と感想を比べたくなったので、自分のためにまとめます。
実際の発表内容などは、他のちゃんとまとまったブログを読んだほうが早いと思います
Microsoft Build 2018 Day 1 Keynotebuchizo.wordpress.com
Microsoft Build 2018 Day 2 Keynotebuchizo.wordpress.com
Day 1 Keynote
Microsoft Build2018のライブ見たいので、今から仮眠を取る
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
Build2018のライブ配信、HTML5とFlashとSilverlightぜんぶ対応してるのか。さすがだ。 https://t.co/oI587gcP0F
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
IoT
Azure IoT Edge OSS化か
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
ドローン飛ばして配管の異常をAIで見つけるデモやってるけど、これアレじゃん、オフィスハックでT社のサーバールームに飛んでたやつじゃん
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
Cortana
AlexaとCortana相互に呼び出すデモしてる。こういう分かりやすいセクションは英語の方が良い。
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
On stage at #MSBuild:
— Microsoft (@Microsoft) May 7, 2018
"Alexa, what do you think about Cortana?"
"I like Cortana. We both have experience with light rings, although hers is more of a #Halo." 😉
Microsoft Graph?の話になった。
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
分からんけど、しばらく英語で聞いてみるか。
HoloLens
HoloLens用の新しい2つのアプリ。
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
Microsoft Layoutは空間デザインのためのツール。Microsoft Remote Assistは......他のデバイスとの連携?
さっきよく分からなかったMicrosoft Remote Assist、デモ動画見逃してたけど、AR統合されたビデオチャットみたいな感じかな https://t.co/n0X9gogkW2
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
ググったらMSの公式が出てきたけど、日本語サイトでも訳されてない...https://t.co/ujnLbjh6G8
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
休憩
なんか休憩っぽいの入ったwストレッチして深呼吸しろって言われたので、する。 #MSBuild
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
Azure
スコット・ガズリー氏きた。Azureの話かな #MSBuild
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
さっきのAzureのムービーとか「I Love C#.」しか聞き取れなかったし
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
Visual Studio LiveShare
Visual Studio Live Shareingきた!! #MSBuild
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
マジなら、VisualStudioCodeさえ入れてもらえれば、共同編集するだけじゃなくてTerminal操作やデバッグまで手伝ってあげられるワケだ。
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
すげえ便利そうだけど、邪な使い方もすぐ想像できるぞw
Just heard @ #MSBuild: Announcing Visual Studio Live Share - Collaborate with other devs across all parts of your dev workflow no matter which editor or OS you use.
— Visual Studio (@VisualStudio) May 7, 2018
Read more: https://t.co/mB0uTUa3I4#VS2017 #VSLiveShare pic.twitter.com/YS3ow8uwn3
App Center GitHub Integration
Microsoft App CenterのGitHub統合の話。
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
App Centerって、React Native Code Pushとか含まれてるやつじゃなかったかな。
Azure CosmosDB
Azure AKSのGAはお預けかな。やっぱKubernetes触ったことないと言ってることが分からんな...
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
Azure CosmosDB、今まであまりピンときてなかったけど、お絵描きアプリのデモ強烈だな。マルチリージョン・マルチマスターだから、アメリカと日本とで同時の書き込みが即座に同期されるお絵描きアプリが作れる、って事で合ってるかな。
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
Day 1 Keynote 感想
そんなの発表あったのか。聞き逃してた。”Your Phone”を固有名詞だと思わずスルーしたかな。
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
格好つけて英語配信の方を聞いたりするからこういう事になる... https://t.co/LqChJVhaJS
基調講演でも派手な発表は無かったので、良くも悪くも話題が分散してる感じ
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
Microsoft Teamsに結構な力を入れてる印象あったな...
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
個人でも使えるようにならないかな
まとめ記事
Day 2 Keynote
家帰って即ぶっ倒れてたけど、起きた。Good Morning #MSBuild .https://t.co/8Eg6GzVzKM
— suzuki.sh(s2terminal) (@suzukiterminal) May 8, 2018
Windows 10
Windows 10 RS4 Timelineから、AndroidのMicrosoftLauncherの話。Enterprise版が出るらしい。何が違うのかな
— suzuki.sh(s2terminal) (@suzukiterminal) May 8, 2018
Timeline for Phone。iOSでもTimeline使えるようになるっぽい。
— suzuki.sh(s2terminal) (@suzukiterminal) May 8, 2018
それは、edge for iOS使えば行けるって話?それとも、別のアプリあるのかな。
今朝ニュースに出てた"Your Phone"アプリの話が始まった。スマホ上のメッセンジャーをPCでオペレーションするデモ。https://t.co/s8IKUumeml #MSBuild #decode18
— suzuki.sh(s2terminal) (@suzukiterminal) May 8, 2018
そしてWindows10 RS5 Sets機能の話
— suzuki.sh(s2terminal) (@suzukiterminal) May 8, 2018
Windows10 RS5 Sets、Excel・WordとかをWebブラウザのタブと同じようにまとめられる。閉じても、ブラウザのように、開いたときに復元できる。このSetsがTimelineと連携してる。
— suzuki.sh(s2terminal) (@suzukiterminal) May 8, 2018
たぶん、同じアカウントでログインしてたらデバイスをまたいで作業を復元できる、って言ってる。
— suzuki.sh(s2terminal) (@suzukiterminal) May 8, 2018
Outlook Payment。メールからボタン押すか何かするだけで決済ができる。決済にはMicrosoft Pay使うそうなので日本対応は無さそうだけど。
— suzuki.sh(s2terminal) (@suzukiterminal) May 8, 2018
でもなんかGoogleもメールのAMP対応するって言ってたし、メールをインタラクティブにする時代の流れなのかな? #MSBuild
おわり
Day2 Keynote終了とGoogle I/O Keynote開始が同時でした。
MSBuild組が基調講演終わったとたんシームレスにGoogle I/Oの実況始めてて、みんな元気だな。
— suzuki.sh(s2terminal) (@suzukiterminal) May 8, 2018
私はねる
あと、事前予測
予想
— suzuki.sh(s2terminal) (@suzukiterminal) May 7, 2018
本命: HoloLens2
対抗: Windows CoreOSの何か
大穴: Microsoft Band後継のスマートウォッチ
答え合わせ
メモ帳のLinux改行文字サポートwwwww??? #MSBuild
— suzuki.sh(s2terminal) (@suzukiterminal) May 8, 2018
誰が分かるかそんなもんw
VS Codeのエディタ部分をPWAにしてAzureにDeployして、モバイルで使う
普段は開発にもメモにもVS Codeを使っているのですが、VS CodeはChromebook等では使えません。そこでVS CodeのエディタエンジンであるMonaco Editorを、Azure Web Appsにデプロイして、PWAとして使ってみました。
PWAにすることで、ブラウザさえあればオフラインでも動作するようになり、エディタアプリのように利用できます。
Monaco Editor on Cloud
https://monaco-on-cloud.azurewebsites.net
実際に、この記事もこのエディタで書きました。
以下に、今回使ってみた技術を列挙します。なお本件はGlobal Azure Bootcamp 2018@TokyoでLTをしたのですが、思ったよりもAzure関係ない技術が多かったので、こうして改めてまとめてみました。
Visual Studio Code (VS Code)
- Microsoftが無償で提供している、最高のエディタ
- Electron製で、Webの技術で動いている
- Windows/Linux/Mac版がある
- ChromebookやiOS/Android版は無い
Monaco Editor
https://microsoft.github.io/monaco-editor/
- VSCodeのエディタエンジン部分。VS Codeとは独立したリポジトリになっている
- もともとVS CodeよりもMonaco Editorの方が歴史は古いはず
- 公式にはモバイルはサポート対象外だが、動くには動く
$ npm install monaco-editor –save
してHTMLを書くだけで、高機能なエディタがすぐに動く
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="node_modules/monaco-editor/min/vs/loader.js"></script> </head> <body> <div id="container"></div> <script> require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' }}); require(['vs/editor/editor.main'], function() { var editor = monaco.editor.create(document.getElementById('container'), { value: [ 'function x() {', '\tconsole.log("Hello world!");', '}' ].join('\n'), language: 'javascript' }); }); </script> </body> </html>
https://github.com/s2terminal/monaco-on-cloud/commit/ed4d045f1129b70cf98ea821ee167783313d4c10
Web Server for Chrome
- Chrome上で動作するWebサーバ。開発用に使用。
- 静的HTMLファイルを指定すると http://localhost:8887 等でアクセスできるようになる
- PWAを開発するならChromeを活用したほうが良いので、開発サーバもChromeで。
Azure Web Apps
- git pushするだけで静的なサイトを簡単にDeployできる。本番環境に使用。
- Web Appは.NETやPHP等のバックエンドWebアプリケーションも動作するが、今回は静的HTML。
$ git push azure
するときに$ npm install
も自動で実行してからDeployしてくれる
- HTTPSも付いてくる
Azure Cloud Shell
- Azure Web Appsのドキュメント内で「使ってみる」を押すとブラウザ画面下部から生えてくるシェル
- これを使うと、ドキュメントからWeb AppsをDeployできる
Service Worker
- PWAの構成要素。Webページとは別に裏側で動作するプログラム。
- ここでfetchイベントを使ってHTTPリクエストに割り込み、キャッシュがあればキャッシュから返すことで、Webページがオフラインでも動作するようにできる
self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { if (response) { return response; // キャッシュから返す } return fetch(event.request); // ネットワークにリクエストする }) ); });
https://github.com/s2terminal/monaco-on-cloud/commit/7b03a28bcb2b8d56e283c36597fe7cbfaf69818b
- しかし、このようにキャッシュの戦略を適当に書いていくことは推奨されないので、後述のWorkboxのようなライブラリを用いる
- 実際、全然キャッシュが消せなくなって困った
Workbox
- Service Workerによるキャッシュ機構を提供する、Google製のライブラリ
- 先程のキャッシュの記述も、このようにシンプルに書き変えることができる
importScripts('node_modules/workbox-sw/build/workbox-sw.js'); workbox.routing.registerRoute(new RegExp('/'), workbox.strategies.networkFirst());
https://github.com/s2terminal/monaco-on-cloud/commit/31b32dac2ae2441ccd066415c245ff58725f5bab
Web App Manifest
{ "short_name": "Monaco", "name": "Monaco Editor on Cloud", "theme_color": "#1e1e1e", "background_color": "#1e1e1e", "display": "minimal-ui", "icons": [{ "src": "images/logo.png", "type": "image/png", "sizes": "400x400" }], "start_url": "index.html" }
<?xml version="1.0" encoding="UTF-8" ?> <configuration> <system.webServer> <staticContent> <remove fileExtension=".json" /> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> </system.webServer> </configuration>
https://github.com/s2terminal/monaco-on-cloud/commit/b3bc1688eb0faed05c92de71948c862793aaa105
Lighthouse (Chrome Audits Tab)
- Chrome DevToolsのAuditsタブ等から使える、ウェブサイトの診断ツール
- Chromeに統合されているので、本番環境はもちろんlocalhostでも問題なく利用できる
- PWAの対応状況を点数化して、対応項目を列挙してくれる
CSSグリッドレイアウト
- twbs/bootstrapのようなフレームワーク無しに、CSSだけで簡単にグリッドシステムを実現できる記法
- 学習には https://cssgridgarden.com が分かりやすい
Office UI Fabric JS
https://dev.office.com/fabric-js/index.html
- Office365等に使われているCSSフレームワーク
- 個人的には、Fluent Design SystemのCSSフレームワークが欲しいけど...
- うまく使えばMicrosoft製品っぽいUIを実現できる
<button id="save" class="ms-Button ms-Button--primary"> <span class="ms-Button-label">Save</span> </button> <button id="load" class="ms-Button ms-Button--primary"> <span class="ms-Button-label">Load</span> </button>
LT発表資料
完成品
- GitHub
- Azure Web Apps
まとめ
Azure Web Apps を使うと、静的サイトを簡単にDeployすることができます。PWA として作成すれば、エディタのようにWebアプリをオフライン動作させることもできます。
参考
s2terminal.com を作った【GatsbyJS+Netlify】
ポートフォリオサイトと呼べるほど何かあるわけではないですが、エンジニアたるもの独自ドメイン持っておきたかったので作りました。
( 独自ドメインならば一応合唱音源の新着情報.comも持っていますが )
フロントエンド系
React+GatsbyJS+TypeScript+CSS Modulesで行きました。 せっかくなので今使いたい技術全部盛り。
詳細は: qiita.com
Netlify
ホスティングにはNetlifyを使いました。 GatsbyのデフォルトのREADMEにNetlifyデプロイボタンが付いていたので、それを適当にポチポチしていたらDeployできました。簡単です。良い時代になりました。
参考: www.netlify.com
特にGitHub pushによる自動デプロイが便利です。
Google Domains
ドメインは先日日本語対応したGoogle Domainsで購入しました。 NameServerをNetlifyに向けてやることで、Netlify上で独自ドメイン利用+SSL取得も自動でできました。
まとめ
これらの技術を使って、簡単なサイトを開発してDeployまでを手軽に行うことができました。 実際にはこの内容であれば静的HTMLでも良いレベルなので、その場合はさらに楽になると思います。
Mobile Act OSAKA #3に行ってきました
Mobile Act自体は名古屋在住時に行った事があるので、そういう意味では二度目の参加です。
私のアプリ開発スキルは、お仕事を除けばAzure Mobile AppsでiOSアプリを作ってみたかった程度な物で、あまり得意ではないです。 なのでSwift/KotlinとかよりもReact Nativeの話の方が親近感があったりしました。なおReactは学習コストの高さが壁みたいです。
「Google Homeのアプリ審査ではユーザーが何を返したら良いか分からない返答があるとrejectされる」とか、「Android公式のユーザー補助検証ツールがGoogle自身のウィジェットを指摘してくる」など、こういうLTメインの勉強会に行くと自分が持ち得ない観点から色々なインプットが得られるので楽しいです。
端末間近距離通信の話とか、私はWeb専門なのでそもそもオフラインで通信をしたいという発想からして無かったりしました。
懇親会
懇親会でMicrosoft Azureの画像認識の話題になったので、Cognitive Serviceによる画像タグ付けのデモしようとしたのですが、その場の寿司の写真を撮影したところでスマホのバッテリーが切れてしまい、デモできませんでした。
この写真の認識結果は #eaten 27.99% でした。Sushiとは判別されませんでした。コメントしづらい結果だったのでバッテリーが切れてよかったと思います。
普段はもう少し良い感じで判別してくれます↓
www.slideshare.net以上、楽しい会でした。フェンリル株式会社さん、ありがとうございました。