backstage

合唱音源の新着情報の舞台裏

Microsoft de:code 2018に行ってきた

Microsoft de:code 2018の基調講演と聞いたセッションについて、自分の感想まとめです。ほぼTwitterを貼っただけです。

f:id:s2terminal:20180523212407j:plain

会場の雰囲気

基調講演のサテライト会場に着くと、ピアノジャックのおしゃれなBGMに乗ってループデモが流れていました。

基調講演以外の各セッションには入場制限があり、人気の枠には毎回長蛇の列ができていました。

公式アプリで事前の参加予定登録をもとに混雑情報表示まで出来ているのですが、実際の入場は早いもの順というのはちょっと微妙だなと思いました。 キーノートは本会場には全員入れないし、Day1のパーティ会場もかなり窮屈だし、結構大変でした。

基調講演「Transforming Intelligence」

日本マイクロソフト株式会社 執行役員 常務 デジタルトランスフォーメーション事業本部長 の伊藤 かつら氏の講演からスタート

Microsoftの大きなプラットフォームとして「Microsoft Azure」と「Microsoft 365」の2つを挙げていました。もう散々言われている事ですが、そこにWindowsはありません

そして「MicrosoftがAIをどう考えてるか?」という話から 『The Future Computed』日本語訳版の公開。

基本的に月初のBuildと重複する内容が多かったde:codeの中で、この日の日本独自の発表のひとつです。

Windows10の、公開されたばかりの新機能「Timeline」と、公開予定のアプリ「Your Phone」、公開予定の機能「Sets」を交えたデモ。Your Phoneは次のWindowsのメジャーアップデートで搭載予定とのこと。

今年のde:codeのテーマは『L♡VE to CODE』とのことで、登壇者の多くはこれがプリントされたTシャツを来ていました

そして Microsoft Corporation Azure Marketing Corporate Vice President Julia White氏にバトンタッチ。

IoTでボタンを押すとTweetを投稿するアプリ開発のデモ。

Custom Visionでパイナップルを画像判別するデモ

PxCodeによるCosmosDBリージョン横断マルチマスターレプリケーションのデモ

続いて Microsoft Corporation Developer Division Corporate Vice President Julia Liuson氏へ。

Buildで最も気になった機能、Visual Studio Live Shareのデモ。

続いて、Visual Studio Mobile Centerから名称変更したはずの「App Center」のデモ

そしてMicrosoft Corporation Mixed Reality Studios General Manager Lorraine Bardeen氏へ

Buildの配信を聞いていてよく分からなかった「first line worker」という単語

最後は日本マイクロソフト株式会社 代表取締役 社長 平野 拓也氏が登場。

りんなについての発表がありました。これは日本独自のはずです。

Women in Technology。 最後に登壇した平野社長を除いて、キーノートの登壇者はスピーカー・デモプレーヤー含めて全員が女性でした。

マイクロソフトの、こういうの取り立てて主張する姿勢は正直あまり好きではないです。誰も何を言わなくても当たり前のように女性が活躍する社会であるべきだと思います。 でも実際、本当にスピーカーを全員女性で揃えることができる会社は限られていると思います。AI for Accessibilityもそうなんですが、ある意味、こういう役を買って出ていって社会を率先して変えていくのは、マイクロソフトらしいなと思います。

f:id:s2terminal:20180523212437j:plain

Keynote感想

de:codeの基調講演は、buildの日本語版になっていると思いました。

『Hit Reflesh』の米国本社の社内文化改革の話を読んで、この間の澤円氏の記事があって、そしてde:codeの基調講演のメインスピーカーがほとんど英語...となると、色々考えてしまう事がありました。

japan.zdnet.com

logmi.jp

りんなとかはいるので、まだまだ日本も頑張って欲しいですけどね。

あとBuildの基調講演には「私はタダのAzureエンジニアです~」みたいなノリで、立ち上がって背伸びをする時間みたいなのがありました。どうせならそこまでやって欲しかったなと。

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」の紹介でした。

azure.microsoft.com

まず、既にできることとしてスケーリング、スロット(Blue Green DeployみたいなStageわけ?)、共有ストレージ等の共有がありました。

そして、5月のアップデートで追加された新機能としてマルチコンテナやApp Service Environment、EasyAuth、NodeJSリモートデバッグWindowsコンテナ(まだPrivatePreview)あたりを、デモを中心に解説されていきました。

特に、Docker ComposerのYAMLファイルを使ってマルチコンテナ構成を構築できるのは知らなかったので、気になります。

あと、デモの途中でおすすめされていたChromeExtention

Day1: 次世代データベース サービス「Azure Cosmos DB」を使いこなそう ~ Azure Cosmos DB Deep Dive ~

日本マイクロソフト株式会社 パートナー事業本部 Azureテクノロジスト 佐藤 直生 (Neo)

「CosmosDB」は、かつてあったNoSQL型データベース「DocumentDB」の後継となる新しいDBです。たぶん。

azure.microsoft.com

専門外セッションでレベル300(中級者向け)とあって、実際の内容はけっこう難しかったです。

イベントソーシングについてはこの記事が詳しいかと。 postd.cc

CosmosDBはレイテンシに対するSLAがあるそうです。CosmosDBに限らず、AzureはSLAしっかりしている印象です。

Day2: AI 活用の一歩を踏み出したい皆様に贈る Cognitive Services & Bot Framework はじめてみた物語

日本マイクロソフト株式会社 コマーシャルソフトウェアエンジニアリング本部 テクニカルエバンジェリスト 大森 彩子氏が進行役となって、AI関連技術の3つの導入事例を紹介していくセッションでした。

まずはシブヤクハックの事例。 hacklog.jp 「渋谷ダンジョン」と称されるほど複雑な渋谷駅において、車椅子でも出口に出られるようバリアフリー経路案内を作成。

目的地入力をBot化し、QnA Makerで、適切な出口を返す。実装自体は30分ぐらいとのことです。

azure.microsoft.com

続いて日立製作所の事例。 新人6人の研修で、社内勤怠システムのChatBotを作った話でした。

この事例も、まず「QnA Maker」で作ってみたものの精度が上がらなかったそうです。QnA Makerは手軽に構築できる半面、DBと検索が分かれていないので問題の切り分けがしにくいとのこと。

次に検討したのが「LUIS(自然言語処理)」+「AzureSearch」しかし、この構成はいろんなシステムのChatBotを作ろうとするとTooMatch。 最終的に「TextAnalyticsによるキーワード抽出」+「AzureSearch」。FAQを検索するにはコレで十分だったとのことで、採用。

azure.microsoft.com

回答候補は5つ出すよう割り切ったり、よくある質問Top5についてはAIを使わない、TextAnalyticsではエラーコードのような数字・アルファベットは判別できない事があるので別口で用意したりと、AIに頼る部分とそうでない部分を切り分けてうまく開発を進められている印象でした。

最後はダイキン工業株式会社ルームエアコンAI故障診断の事例

LUISでユーザの自由入力を自然言語処理で解析していました。

azure.microsoft.com

たとえば「異音がする」という事象について「音がする場所→室内機or室外機」のように、音の場所や種類をEntityとして定義していったようです。3つの事例の中では最もAI開発っぽいと思います。

もともとコールセンターが受けていたようですが、電話よりもWebで対応したいというニーズに合わせてChatBotを開発したとのこと。 実際、他の施策とも併せて利用数が2倍になったとのことです。

Day2: 3大フレームワーク(Angular, React, Vue.js)比較によるエンタープライズ Web アプリケーション開発の最適化

speakerdeck.com

アシラス株式会社佐川 夫美雄氏による、de:codeでは珍しい"Web"系のセッションでした。

Webアプリケーションを構成するのはHTML(Structure)、JavaScript(Behaviour)、CSS(Presentation)ですが、覚える事が多いとのこと。

たとえば「HTML」について。「Semantic Web」は必要かどうか?その重要性を説明できますか?

CSS」は、

そしてJavaScript」は...

Webエンジニアが少ないからってひどい言われようw

ここでデザインの話へ。 CSSの抱えるグローバルスコープという問題、それに対するWeb Componentsの考え方、Atomic Design、これらには共通点があります、というところで説明が終わります。

この辺の話は熱かったのですが、Atomic Designはよく知らないのでもうちょっと説明が欲しかったところではありました。

XDが登場したり、これからのフロントエンドデザイナーのあり方を語っていたり。 普段ほぼ常にデザイナーと一緒に仕事している私としては、結構共感する所の多いセッションでした。

Web Components 4つの要素の説明。

  • Costom Elements (Pieceに名前をつける)
  • HTML Templates (Pieceの模様)
  • HTML Imports (Pieceをパズルにはめる)
  • Shadow DOM (Pirceであることを主張)

このうちShadow DOMが最も重要であるとして話は進んでいきます。

ここでようやく「Angular」「React」「Vue.js」の比較に移ります。 Scoped CSSを実現するための最小手数のコードを紹介していました。 コードはGitHubにも上がっていました。

Swaggerを使うことで、フロントエンドエンジニアだけいればとりあえず動く物を作ることができること、そのためにもフロントエンドエンジニアがAzure(クラウド)を学ぶ必要がある、といって締められました。

自分がWebエンジニアなのもありますが、最も共感するところの多いセッションでした。ただ最初に「釣りです」と公言していたとおり、「3大フレームワーク比較」「エンタープライズ Web アプリケーション開発」といったタイトルにはまんまと釣られましたw

Day2: 進化する Web ~ Progressive Web Apps の実装と応用 ~

最後は日本マイクロソフト株式会社 パートナー事業本部 テクニカルエバンジェリスト 物江 修氏による、Progressive Web Apps(PWA)のセッション。

PWAについては、ちょうど自分もブログを書いてLTもしたばかりだったので、復習も兼ねて聞いていました。

Progressive Web Appsの「Progressive」について、HTML5が流行りだした頃によく言われた「プログレッシブ・エンハンスメント」と同じだと説明。 www.mdn.co.jp

この説明はとても頭に入りやすかったです。

WebのメリットとしてSLICE(Secure, Linkabke, Indexable, Composable, Ephemeral)を挙げ、それとアプリの良い所どりをしたPWAはFindable (発見性)、 インストール可能、プッシュ通知により再エンゲージ可能、ネットワーク非依存、プログレッシブ、レスポンシブ、安全、リンク可といったメリットがあると語られました。

その後、PWAを実現する主要な技術のひとつであるService Workerについて説明がありました。この辺は自分の書いたブログにも重複する内容だったため割愛します。 s2terminal.hatenablog.com

最後にWindowsにおけるPWAの話に移ります。Bingによる自動クローリングでPWAがMicrosoftStoreに登録されるようになった、という話がありましたが、WindowsにおけるPWAは WinRT APIをコールできるため、できる事が広がるようです。

Web検証ツールのsonarwhal(そなーほえーる)の紹介もありました。

sonarwhal.com

ChromeでいうLighthousにあたる物です。実際に、私が作ったPWAも検証してみました。PWAの項目については一応Errorはありませんでした。

その他の雑記

f:id:s2terminal:20180522192605j:plain

まとめ

f:id:s2terminal:20180523213240j:plain

自分は有料のカンファレンスに参加するのは初めてだったのですが、非常に濃い内容で刺激になりました。

一方でライブ配信や資料公開(予告)もされていたりして会場に来なくてもある程度楽しめたのかなと思います。 どのセッションも早いもの順のため長蛇の列で待たされたり、満席で入場制限がかかったりライブ配信上映のサテライト会場に回されたり、運営については課題も無くはないと思いました。 会場の熱気を楽しみたい人向け、でしょうか。でもそうなると、結局アメリカまで行ってBuildに参加したい、という気持ちのほうが高まってきます。

あと、日本語セッションには自動英字字幕が付いていました。精度は微妙っぽいですが、英文が完全リアルタイムで画面上にうにょうにょ生成されていくのはテクノロジーっぽい感じがとてもしました。

会場の空調もIoTとAzureで自動制御されていました。

f:id:s2terminal:20180522122002j:plain

カフェラウンジの混雑状況も「どこに何人並んでいる」というのが公式アプリ上に表示されていました。スタンプラリーがあって、会場内に設置されたアイコンの写真を撮って集めていくのですが、判定には多分CustomVisionServiceを使っていると思います。

azure.microsoft.com

こういった運営の細かい所に最先端の技術を投入してくるのは、技術系セミナーならではという感じがしました。

参考

s2terminal.hatenablog.com

Microsoft Build 2018 Keynoteライブ視聴の所感まとめ

www.microsoft.com

後にde:code2018と感想を比べたくなったので、自分のためにまとめます。

実際の発表内容などは、他のちゃんとまとまったブログを読んだほうが早いと思います

Microsoft Build 2018 Day 1 Keynotebuchizo.wordpress.com

Microsoft Build 2018 Day 2 Keynotebuchizo.wordpress.com

Day 1 Keynote

IoT

Cortana

HoloLens

休憩

Azure

Visual Studio LiveShare

App Center GitHub Integration

Azure CosmosDB

Day 1 Keynote 感想

まとめ記事

japan.cnet.com

www.publickey1.jp

Day 2 Keynote

Windows 10

おわり

Day2 Keynote終了とGoogle I/O Keynote開始が同時でした。

あと、事前予測

答え合わせ

誰が分かるかそんなもん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)

code.visualstudio.com

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.google.com

  • Chrome上で動作するWebサーバ。開発用に使用。
  • 静的HTMLファイルを指定すると http://localhost:8887 等でアクセスできるようになる
  • PWAを開発するならChromeを活用したほうが良いので、開発サーバもChromeで。

Azure Web Apps

docs.microsoft.com

  • git pushするだけで静的なサイトを簡単にDeployできる。本番環境に使用。
    • Web Appは.NETやPHP等のバックエンドWebアプリケーションも動作するが、今回は静的HTML。
    • $ git push azureするときに$ npm installも自動で実行してからDeployしてくれる
  • HTTPSも付いてくる
    • ポータル上で「カスタムドメイン」→「HTTPSのみ」で、HTTP→HTTPSへリダイレクトするようになる

Azure Cloud Shell

docs.microsoft.com

Launch Cloud Shell

  • Azure Web Appsのドキュメント内で「使ってみる」を押すとブラウザ画面下部から生えてくるシェル
  • これを使うと、ドキュメントからWeb AppsをDeployできる

Service Worker

developers.google.com

  • 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

developers.google.com

  • 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

developers.google.com

  • PWAにはWeb App Manifestと呼ばれるJSONファイルが必須
  • アプリ名やアイコン画像などを、ここで指定する
{
  "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"
}
  • Azure Web Appsの仕様で、web.configというXMLを作成して設定しないとJSONが配信できず403 Forbiddenとなる
<?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)

f:id:s2terminal:20180422012045p:plain

  • Chrome DevToolsのAuditsタブ等から使える、ウェブサイトの診断ツール
  • Chromeに統合されているので、本番環境はもちろんlocalhostでも問題なく利用できる
  • PWAの対応状況を点数化して、対応項目を列挙してくれる

CSSグリッドレイアウト

developer.mozilla.org

Office UI Fabric JS

https://dev.office.com/fabric-js/index.html

<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発表資料

完成品

f:id:s2terminal:20180422014044p:plain

まとめ

Azure Web Apps を使うと、静的サイトを簡単にDeployすることができます。PWA として作成すれば、エディタのようにWebアプリをオフライン動作させることもできます。

参考

Where is the mobile version of Code. There are too many times that I have to rdp into a PC to make a minor change because I dont have an editor on my mobile device... (Windows phone, iPad, iPhone, Android Phone) ??? Please provide a mobile version!!! · Issue #27553 · Microsoft/vscode

s2terminal.com を作った【GatsbyJS+Netlify】

f:id:s2terminal:20180304215940p:plain

https://www.s2terminal.com

ポートフォリオサイトと呼べるほど何かあるわけではないですが、エンジニアたるもの独自ドメイン持っておきたかったので作りました。

( 独自ドメインならば一応合唱音源の新着情報.comも持っていますが )

フロントエンド系

React+GatsbyJS+TypeScript+CSS Modulesで行きました。 せっかくなので今使いたい技術全部盛り。

詳細は: qiita.com

Netlify

www.netlify.com

ホスティングにはNetlifyを使いました。 GatsbyのデフォルトのREADMEにNetlifyデプロイボタンが付いていたので、それを適当にポチポチしていたらDeployできました。簡単です。良い時代になりました。

参考: www.netlify.com

特にGitHub pushによる自動デプロイが便利です。

Google Domains

domains.google

ドメインは先日日本語対応したGoogle Domainsで購入しました。 NameServerをNetlifyに向けてやることで、Netlify上で独自ドメイン利用+SSL取得も自動でできました。

まとめ

これらの技術を使って、簡単なサイトを開発してDeployまでを手軽に行うことができました。 実際にはこの内容であれば静的HTMLでも良いレベルなので、その場合はさらに楽になると思います。

Mobile Act OSAKA #3に行ってきました

mobileact.connpass.com

Mobile Act自体は名古屋在住時に行った事があるので、そういう意味では二度目の参加です。

私のアプリ開発スキルは、お仕事を除けばAzure Mobile AppsでiOSアプリを作ってみたかった程度な物で、あまり得意ではないです。 なのでSwift/KotlinとかよりもReact Nativeの話の方が親近感があったりしました。なおReactは学習コストの高さが壁みたいです。

Google Homeのアプリ審査ではユーザーが何を返したら良いか分からない返答があるとrejectされる」とか、「Android公式のユーザー補助検証ツールGoogle自身のウィジェットを指摘してくる」など、こういうLTメインの勉強会に行くと自分が持ち得ない観点から色々なインプットが得られるので楽しいです。

端末間近距離通信の話とか、私はWeb専門なのでそもそもオフラインで通信をしたいという発想からして無かったりしました。

懇親会

f:id:s2terminal:20180205212458j:plain:w320

懇親会でMicrosoft Azureの画像認識の話題になったので、Cognitive Serviceによる画像タグ付けのデモしようとしたのですが、その場の寿司の写真を撮影したところでスマホのバッテリーが切れてしまい、デモできませんでした。

この写真の認識結果は #eaten 27.99% でした。Sushiとは判別されませんでした。コメントしづらい結果だったのでバッテリーが切れてよかったと思います。

普段はもう少し良い感じで判別してくれます↓

www.slideshare.net

以上、楽しい会でした。フェンリル株式会社さん、ありがとうございました。