るぴブロ

備忘録とかです(*'ω'*)

de:code 2019 参加してきました!! - Day 2 -

続編です。

Day 1はこちらです

rupic.hatenablog.com

 

2日目は前日のお尻の痛みとの戦いです。
むしろもう麻痺してしまって何も感じない程ですが… 

張り切っていきましょう!!

 

注意:出来るだけまとめはしましたが…

   書きたい事がうまくまとめれてないので長いです。

 

1時間前に会場に着いたのですが、既にかなりの行列で先頭が見えませんw

f:id:rupic:20190604004231j:plain

DT07:.NET とクラウド ネイティブ ~ 本格化するクラウド移行とそのアーキテクチャ (前編)

www.microsoft.co

Microsoft グローバルブラックベルト チャックさんこと井上 章さんのセッションです!
もちろん最前に陣取って拝聴させて頂きます。

セッションは前後半に別れており前半は.NET5のロードマップと現存するアプリケーションの今後の展開の紹介です。

 

Buildで紹介された”.NET5”のロードマップ
2年に一度メジャーアップデートして行くみたい

 .NET Roadmap fig5

マルチプラットフォーム開発

  • WindowsLinuxmacOSiOSAndroid、tvOS、watchOS、WebAssemblyとあらゆるプラットフォームをターゲットに開発出来る

.NET Core 3.0 Preview 5

  • WPFでデザイナ使える様になった
  • みんな大好きintellicodeがXAMLエディタでも使える
  • 自己完結型で配布可能:配置モードで自己完結選択
  • Win10 APIの利用

Blazor

  • Browser + Razor
  • OSSのSPAフレームワークC#をブラウザ上で実行可能
  • C#Javascriptにトランスパイルしている訳ではなくて、”.dll”をブラウザに読み込みILを解釈し実行しているらしい
  • サイズが大きくなりがちなので初回実行は重たい

Client-side-Blazor

  • dllファイルがブラウザに落ちてくる
  • 作り方によってはオフライン実行が可能に!

Server-side-Blazor

  • dllファイル落ちてこない
  • SignalRでサーバーサイド側とバイナリ通信
  • Visual Studioデバッグ可能
  • こちらが先にGAされるみたい
  • ページがコンポーネント化されているので簡単呼び出し

gRPC

Service Worker

  • バックグラウンドで動作するイベント駆動型Javascript実行環境
  • プッシュ通知
  • オフラインキャッシュ

C#フルスタックでの開発が可能

frontend

 Blazor

backend

 .NET Core

serverside

 gRPC

 Service Worker

.NET 5 これから

f:id:rupic:20190605001637p:plain

  • ランタイム、ベースクラスが統一される
  • .NETCore Xamarin は Monoベースなので共通化
  • ASP.NET Forms → Blazor
  • WC → gRPC for WCF server and remoting
  • WF → Open source core workflow for WIndows workflow

.NET Frameworkどうなるの? 

  • .NET Framework4.8が最終メジャーアップデート
    以降はOSのライフサイクルに従う
  • だからと言って無理に既存のアプリケーションをリプレイスするべきではない
  • 新規開発→.NET Core で作ることが好ましい

DT08:.NET とクラウド ネイティブ ~ 本格化するクラウド移行とそのアーキテクチャ (後編)

www.microsoft.com

続いて DT07のセッションの後編です。一度外に出されて再入場ですw

後半はCloud Native、マイクロサービス、DevOps、クラウドプラットフォームへのマイグレーションのお話です。

冒頭に、大量のリクエストに自社のサーバーを心配する上司と、何事もなかったかの様に椅子に座っているエンジニアという2002年に放送されていたMicrosoftのテレビCMからスタートです!(動画みつからなかったーw

 

AzureはIaaS〜PaaSまでをサポート

Cloud Native

  • クラウドの様なダイナミックでモダンな環境においてコンテナ、サービスメッシュ、マイクロサービス、宣言的、API、自動化の様な技術やアーキテクチャを使って回復性、管理力、監視・問題監視能力があり、変化に強い、疎結合されたシステムを実現する

f:id:rupic:20190606010722p:plain

Web App for Containers

  •  Dockerコンテナの実行基盤として最適化されたPaaSプラットフォーム
     ※シングルコンテナである事

Microservices

  • トラディショナル N-Tire、モノリシック
  • マイクロサービス アプローチ
    ビジネスドメイン毎に分けるのも階層毎に分けるのもあり
    DBはクラウド上のマネージドな環境に置くことが大事
    →サーバーレス

AKS

  • Azure Dev Spaces
    開発時に独自環境を準備することなく自分専用のネームスペースにデプロイ〜デバッグするインナーループを作成

ダイレクトコミュニケーションの課題

  • 認証
    フロントにAPI gatewayを置いてそこからAPIへ接続
    単一エンドポイントを通して処理できる
    認証周りのトークンも1つでいい

.NET マイクロアーキテクチャリファレンス

docs.microsoft.com

github.com

Migration

  •  アプリのモダナいズとクラウドネイティブ
  1. とりあえずPaaSにする(アーキテクチャは変えない)
  2.  サーバーレス、マイクロサービス

.NET Framework → WebApp

.NET Core → LinuxContinar

 

勉強の為に購入しました!!

f:id:rupic:20190606012621p:plain

TOYOTA×HoloLens体験ブース

こちら出張報告用ミッションです。

写真撮られてたらしく、口あけっぱでとても残念な顔してますねw

f:id:rupic:20190601131801p:plain

コンテンツは全部で4つ

f:id:rupic:20190601132933j:plain

プリウスを利用して体験出来るみたいです。

f:id:rupic:20190601134322j:plain

※一番見たかったDinamics 365 Guides使った作業手順指示は今回は時間の関係上、見せれないとの事w

コンテンツ

  • MR×AI 作業チェック
    HoloLensを使って撮影したエンジンルームの写真をCognitiveServicesを使って作業チェックを実施。オイルキャップ等の閉め忘れを視覚的に表示する。
  • Energy Flow 機能説明
    お客様に対してハイブリッド車のメインバッテリ〜Frモーター〜タイヤまでのエネルギーの伝達状態を視覚的にお伝えする為にとの事。確かに回生ブレーキとか言われても何言ってんのってなりますもんねw
  • Wire Harness 配線図
    これはサービス担当者がドアの配線図を修理書を見ずに把握する為のもの。
    ドアの開閉にイメージが追従しないので、条件付きなのが残念ポイントw
  • DInamics 365 Guides 作業手順
    例えばサービスでドアをバラしたいと思った時に、通常であれば修理書を見ながらドアを決められた順番通りに取り外して行くのだが、次に行うべき動作を視覚的に表示してくれる素敵機能。たまに面が裏返ってしまいイメージがドアの裏に行ってしまう事もあるみたい。

製造業におけるMRがもたらす効果は計り知れないものがあると思います。

現在はサービスにのみ特化されているみたいですが、設備保全、製品の組立/検査等活用できるシーンは無限大ですね。

ちなみに簡単なコンテンツはUnityを使って内製、それ以外は外注してるみたいです。

AI91:ノン コーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services × LINE メッセージで自動スケジュール登録

www.microsoft.com

Miicrosoft MVP オルターブース 松本さんのオープンシアターでのセッション。
到着した時には既にオープンシアターは超満員でした!!


ちなみに松本さんは初日の基調講演でもMicrosoft MVP パーソナルスポンサーとしてスクリーンに登場されてましたね!

f:id:rupic:20190605013231j:plain

Logic Appsを使ってLINEからテキストor音声でGoogleカレンダーに予定を登録するチャットボットの作り方のお話。

これだけで即戦力間違いなしのアプリケーションですが、ここは流石の松本さん!
なんとコードを一切書かずに作成しますとの事!!!

利用するサービス

  •  LINE Messaging API
  • Azure Logic Apps
  • Cognitive Services
    Speech Services
    LUIS

内容はスライド見てもらう方が間違いなく伝わるので割愛しますが、
要件の定義からアプリケーション実装までをしっかりと体系立てて丁寧に説明されており、しかもデザイナーさんだけあって資料がめっちゃ”見やすい”、”わかりやすい”!!

資料の作り方や話し方、全てにおいて超リスペクトです!!

 

会場の様子

f:id:rupic:20190605222123j:plain 

www.slideshare.net

Blog

zuvuyalink.net

 

Microsoft Flow、Logic Apps、Power BI、Power Apps、こういったサービスをうまく活用する事で、欲しいものが欲しい時に時間をかけずに誰でもすぐ作れる んです。

しっかり内容を把握して適切に使いこなす事で、

  • 間違いなく組織の仕事の仕方が変わります。
  • 間違いなく生産性が上がります。
  • 間違いなくやるべき事に(やりたい事)に時間を使える様になります。

このブログを見てくれている方がどれくらいいるかはわかりませんが、見て頂いて気になった方は是非お試しくださいm(_ _)m

 

nocode-jp.connpass.com

 

DT04:「ここでしか聞けないマイクロサービス on AKS 導入のなま苦労話 by オイシックス・ラ・大地」

www.microsoft.com

 こちらは、オイシックス・ラ・大地株式会社長尾さんとマイクロソフト クラウドデベロッパー・アドボケイト寺田さんのセッションです。

約1年前にHackfestを実施し、自社サービスをマイクロサービス化した経験から成功体験、失敗体験、失敗体験、組織づくりの重要性など、これから同じ様な経験をされる方に対し少しでも参考になる様にとお話いただきました。

creators.oisix.co.jp

成功体験

なぜマイクロサービスに?
  • 2000年〜システムがツギハギで作成されていて限界を感じていた
  • モノリシック、開発の積み重ねがもたらしたもの…
    ・開発/ローンチスピード
    ・品質担保
    ・スケール困難
     → NginX+JSPOracle
  • 5Days Hackfest
    ・サービスを切り出し短期間でのスキル習得ができた
  • K8s Hackerson
    だいたい3日で使えるようになる!
MSA化してよかった点
  • 開発
    ・サービスのサイズが小さくなるため、開発テストが容易に
    ・中途エンジニアの方のプロジェクト参加の速度
    ・巨大なモノリスのアプリケーションでバグが発生した時に対象箇所を修正した事で起こる影響範囲
  • 運用
    ・スケールアウトが楽になったマニフェスト書くだけ
     ※スケールアップが必要なところにK8sは向かない
      →適材適所がある!なんでもAKSはだめ
    ・App作りが変わった スケール前提で作成される
    ・ログ管理が楽になった スプリングブートで標準出力に履くだけで集中管理できる
    バッチ処理を切り出した事で処理時間が半分に!!

苦労した点

  • 開発
    ・既存モノリスと並行管理
     AppのみAKS、DBはそのまま
      →検証機関が終わればクラウド
     週一でプロジェクトの進捗管
  • 学習コスト
    APIマネジメント等マイクロサービスに必要なサービスにかける時間
  • インフラを意識した開発
  • 何が正解かわからない
    →正解はない!!
     システム構成、人、データの性質によって違う
     他社の成功事例をそのまま自社で動かすことはしない
  • 運用
    ・スプリングブートで標準出力したログを3rdパーティー製のログツール障害
    ・サーキットブレイカー、分散トレーシングIstioの学習コスト
    ・各サービスの適切なクラスタ配置
     →上限100ノードだが、せっかくAPPレベルでマイクロサービス化しても一つのクラスタに突っ込むとモノリスと同じ
  • K8sの更新はめちゃくちゃ早い!!!!
    20-30ノードくらいのミニサービスで壊れてもいいシステム作りの方が運用が楽
    デザインoaフェーラー
  • AKSのバージョンアップでの不具合
    ノードが追加できなくなり、クラスタの作り直し
  • 構成変更による風具合
    攻勢変更するとノードが作成できない

直近の課題

  • オンプレOracleとの連携
    ・オラクルDB呪縛
    ・キャッシュとキューで対応
    ・オンプレ版AKSに期待・・・
     Azure Stack お高いw
  • マイクロサービスのアーキテクチャパターンはたくさんある

実際にやってみて理想と現実の乖離は?

  • 理想
    Polyglot Language!!
  • 現実
    メンバーがJavaerのみなので・・・
    将来的には多言語対応していきたい
  • 1ノードあたり30はしんどい。
    AZコマンドでポッド数増やすとIPが枯渇したw
  • 日本語のサイトでは情報の信頼性が低い
    質の良い新鮮な情報を取得したい場合は、本家の英語サイトを見よう

なぜ乗り越えられた?

  • モノリスの開発に比べると格段に楽
  • トラブルが起きることを事前に想定していた
  • 開発、運用のメリットが大きい
    自動テスト
    複数サービスを集約してデプロイしていたがサービス単位でデプロイできる

これから

  • さらにマイクロサービス化を推進
  • AKS西日本リージョンへ分散
  • マルチクラウド化も視野に

組織的なところ ※マネージャーの観点から

  • 組織づくりの重要性
    エンジニアが足りない
     →優秀なエンジニアは宝と感じた
  • いい人材を採用するために
    エンジニアが楽しめる環境
     →技術選定
  • コミュニティ、イベントの開催、イベント登壇
    自社アピール
  • 新規でこられた方がどうやってキャッチアップする?
    開発環境/テンプレートの準備
    チーム開発を主流化
    モブプロを採用
     情報をキャッチアップする際に最適
     属人化を防ぐことができる
  • 社内ハックフェスト
  • 社内勉強会

やる前後の違い

  • ブランチ戦略の整備
    GitHubフローをベース
  • CI/CDの整備
  • APP品質管理チームの設定

これからの方へアドバイス

  • MSA/K8sが唯一の解ではない
    適材適所
  • いきなり始めない
    有識者に話を聞こう
  • 一気にやらない
    切り出しやすい箇所から始める
  • k8sインフラの運用は専任が必要
    マネージドのサービスを利用
     

www.slideshare.net

Blog

creators.oisix.co.jp

www.oisixradaichi.co.jp

実際にMSA化を体験されたオイシックスさんの生々しいお話が聞けて本当に参考になりました!!…今後自社で間違いなく同じ道を歩むと思うので。

今回、MSA化という難所を乗り越える為にマイクロソフトやオルターブースという他社の力を借り乗り越えた事で、結果サービスとしての質の向上やチームの信頼関係、技術力の向上ができたという事が財産になると思います。

すごく心に響いた熱いセッションでした!!

MW02:Azure Serverless を活用したリアルタイム Web のすべて

www.microsoft.com

 こちらはMicrosoft MVPのしばやんこと芝村達郎さんとMicrosoft GBBチャックさんのセッション!

しばやん×チャックペアのやり取りがなんかほっこりします。

  • 基調講演のServerlessからService Fabric消えてるけどまだあります
  • Serverlessにはコンテナを高速、簡単に実行するACIが重要
  • 昔はページ遷移するだけの単純なWebアプリケーションで良かったが、今はUXの観点からWebフレームワークを使ったSPAが主流
     Vue.jsが最近熱い
  • 他のユーザーの行動がリロードなしでリアルタイムで反映される
    Pull型→Push型への転換
  • UXを改善するにはリアルタイムWebを利用するのがベストプラクティス
     リアルタイムのインタラクションが重要
  • リアルタイムなWebアプリを実現するには?
     イベントドリブンで効率的に

     gRCP/Websocketを利用してPush型に
     Azure Serverlessを利用して簡単スケーラビリティ

  • Azure Serverlessを活用
    スケーラビリティを考慮した設計に
  • イベントドリブンなAzure Serverless
    EventGrid:フィルタリングやルーティング、リトライを実行(Hub、GW的な役割)
    CosmosDB:ChangeFeedを利用する事でアトミックで順序が保たれたキューに
    AzureFunctions:Premium利用でイベント単位でのスケーリングができるように
    KEDA:K8s上でイベントドリブン+オートスケーリング、Kafka/Queue
  • リアルタイムWebの実装
    何か一つのサービスに時間をかけすぎてサービス本体がおろそかになるくらいならフルマネージドを導入するべき
    AzureMonitor、ApplicationInsightは必須
    イベント処理はステートレスで設計する
    どうしてもステートフルな処理が必要であれば、DurableFunctions 

speakerdeck.com

Blog

blog.shibayan.jp

自身の業務でコーディングしている時に何度もしばやん雑記に助けられています。

今回のセッションでしばやんさんが仕切りに発言されていた通り、リアルタイムWebの実装はUXの向上に直結していると思うので是非とも押さえておきたいと思います!!

休憩…

この時間帯だし、お昼食べ損ねた事もありミスド食べながら休憩してると色々な方に

話しかけて頂きましたm(_ _)m

本当にありがたい…( ;  ; )

オルターブースの加藤さんとde:code 2019オリジナルフォトブースで記念に一枚パシャり!!

f:id:rupic:20190531182847j:plain

マインクラフトを使った学習 

EXPOでマインクラフトを使った教育についてお話を伺ってきました。

というのも我が家の長男が現在小学校1年生でして、通っている小学校では2年生から簡単なプログラミング教育が始まるとの事。

 

小学校でどの程度の教育が行われるのかはまだ謎ですが、せっかくNintendo Swichで毎日と言って良いほどマインクラフトをやっているのもあるので、PC版のマイクラに切り替えてPCの使い方も覚えさせてみるのも…と考えています。

 

価格はサブスクリプションではなく、3,000円でユーザーライセンスを購入するのみ!

しかもマインクラフトの中でピタゴラスイッチ的なプログラミングと化学まで習う事が出来るとか即買いですね!!

まぁ、無理にやらせても続かないし楽しくないだろうから興味を持っているマインクラフトをやってるうちに気がついたらPC使える様になってたーってのが狙いですw

 


教育版マインクラフト化学アップデート1

MW51C# ドキドキ・ライブコーディング対決 @ de:code - ONLY C#!! Blazor Web 開発バトル -

www.microsoft.com

de:code 2019最後です!!

 

Microsoft MVP for Developer Technologiesの小島さん、鈴木さん、室星さん。

そして、元MVPの石井さんの4名でのセッションです。

 

石井さんが司会+お題を出題、残る3人がコーディングをして競い合うといもの。

会場は始まる前からゆるりとした雰囲気で何やら面白い事が始まりそう…と思っていたらw

f:id:rupic:20190606013223p:plain

いきなりのハードルの高さwwwww

こういう時ってテンパってるってのもあるし、見られながらってのもありさらにテンパって積みますよね。

挑戦者の画面を見ていると地道にif文作っている方もいれば、CultureInfo を使ってた方も!!こういう時に適切なクラス呼び位出せる人ってすごいなと思いますw

 

次のお題は全員で”7並べ”対決をしようとの事で、予め作成して来たアルゴリズムの説明と、Blazorの説明バトルが…

 

ルール

C#のみ+パスは3回まで、チートしたらBAN

 

石井さん:正攻法で勝つ

小島さん:MLを使い確率にかける

鈴木さん:パスの回数を書き換えて無限パス+あとは地道に勝つ

室星さん:DOMを書き換える

 

チートチェッカーを乗り越え鈴木さんの勝ち!!

 

小島さんの資料見つけましたw

www.slideshare.net

 togetter.com

皆さんの掛け合いがとても面白いセッションでした!

ふくてんでもいつかやってみたいですね^^

de:codeの2日間を通して

  • これでもかってくらい情報を頭に叩き込んだ2日間でした
    技術情報は勿論の事、セッションをされている方の話し方や立ち振る舞い、資料の見せ方に至るまで全てが勉強になりました。
    がっつり真似させて貰おうと思います(
  • 本当に色々な方とお話出来て良かった
    今年でde:codeは4回目の参戦ですが、来るたびに色々な方と知り合えたり、以前繋がった方に声をかけたりかけて頂いたり…本当ーーーに有難いです><。…
  • 今回、EXPOでオープンシアターでのセッションやハンズオンで活躍されていた方達を拝見させて頂き、本当にカッコイイと思いました。
    自身もFukuoka.NET(ふくてん)のオーガナイザーをさせて頂いてはいるものの、こんなに活躍出来ているか?アウトプット出来ているか?と自問自答しながら反省した点もあり、今後しっかりとアウトプットしていこう!と思いました。
  • 2日間本当に楽しめました!!
    本当にイイ刺激頂きました!!
    皆様、ありがとうございましたm(_ _)m

Twitter de:code Day 2 まとめ

togetter.com

 

めっちゃ長々と書いてしまいましたが、最後まで読んで頂きましてありがとうございましたm(_ _)m

 

明日はオルターブースさんのde:code振り返り会が開催されます!

楽しみ😃

alterbooth.connpass.com

de:code 2019 参加してきました!! - Day 1 -

ついにこの時期が来ましたね!

Microsoft主催のデベロッパー向けカンファレンスであるde:code 2019に5月29日(水)〜5月30日(木)の2日間参加してきましたので、のんびりですが参加セッションの内容を…

www.microsoft.com

 

会場は毎年恒例のザ・プリンスパークタワー東京です。
いつかここにホテルとりたいですねw

f:id:rupic:20190531173031p:plain

フロアマップはこんな感じでEXPOエリアの周りにセッションルームが配置されており、2日間をかけてフロアの中をウロウロしまくるわけです

f:id:rupic:20190531173129j:plain

セッションは以下の10トラックで構成されていて、なんと188セッションの中から、それぞれ自分の属性にあったセッションを選択して受講する様な感じとなっています。

  • AI
  • Client and Mixed Reality
  • Cloud
  • Data Platform
  • Developer Tools
  • IoT
  • Mobile and Web
  • Productivity
  • Security
  • Special

www.microsoft.com

KN01:基調講演

www.microsoft.com

基調講演は最前列にダッシュして左フロントサイドに陣取りました。

f:id:rupic:20190602153301j:plain

 

基調講演は動画もアップされているので細かいところは見て貰った方が早いかと…


【de:code 2019】基調講演


全ての企業、全ての人々、そしてより多くのモノがインテリジェントエッジ、インテリジェントクラウドで繋がる時代、マイクロソフトは「膨大なデータを、意味のある形にしていくことが重要になる。これを進めることで世界と日本でデジタル トランスフォーメーションが進んでいく」と発表。

 

そしてその中心はITテクノロジーではなく ”人” だという事を強く感じた。

 

Microsoft Azure、Microsoft Dynamics 365、Power Platform、Microsoft 365という素晴らしいサービスが発表される中、それを使う人達がどんなサービスをどういった場面に適用するべきかしっかりと考える必要があると思うので、自社内で少しでもその手伝いが出来る様、努めていきたいと思う。

 

news.microsoft.com

 

CM01:ここまで進化した!HoloLens2の全貌を徹底解説

www.microsoft.com

日本で一番HoloLensに詳しいMixed Reality Marketing プロダクトマネージャー上田さんのセッションです!

HoloLens v1の登場から2年半、MRがもたらす今後の展開とHoloLens 2 のUpdate情報を細かく説明していただきました。

v1からの機能Update

 快適性の向上

  • 快適性 x3

  • バッテリーが後頭部へ移動し重心を調整
  • フィットシステムの変更
    誰がつけてもフィット
    帽子をかぶるように装着できる
  • フリップアップバイザーの実装
  • 軽量化と剛性を兼ね揃えたカーボンファイバーを採用

没入感の向上 

  • 視野角 x2
  • 1度あたり47ピクセル(業界標準)
  • デジタル解像度を落とす事なく実現
  • 16:9 → 4:3に変更
  • MEMSレーザースキャニングディスプレイ
    54000/secで処理
    しかもハード重量を増やす事なく実装
  • より人間の脳が理解するような空間マッピング
  • アイトラッキング
  • 虹彩認証でWindowsHello
  • 上部に3つ、下部に2つのマイク
    よりノイズが大きい場所での利用を考えてビームフォーミングを実装
  • 空間オーディオ

価値創造時間の短縮

  • ハンドトラッキング
    従来のエアタップ、ブルームのみ→両手10本指を認識する様に
    これによりオブジェクトに触れる感覚を実現
     つまむ、掴む、握る、
     Bounding Boxを移動させる、回転させる、サイズを変える
     スマートメニュー、タッチ、スクロール、キーボード、メニュー
     ※ちなみに遠くの物を操作する時はビームみたいなのでる
  • Azure Remote Rendering を使った高品質3Dコンテンツのレンダリング
  • IoH:Internet of Hologram
  • XR10:ヘルメットにHoloLensを合体

mixedreality.trimble.com

 

紙 → PC → スマホと移り変わり、現実世界全てがスクリーンとなるMRの復旧で、2Dを超え3Dへ…HoloLoens 2 を含めMRデバイスは次世コンピューティングプラットフォームになり得るのか?

今後のコンシューマー向けコンテンツやハードの進化が楽しみですね!

 

HoloLens 2

www.microsoft.com

 

AI01:"Everyday AI" 時代の人工知能使いこなし ~ Azure Cognitive Services を効果的に利用するための基礎知識

www.microsoft.com

Day 1で一番楽しみにしていた、クラウド&ソリューション事業本部 テクニカルエバンジェリスト大森さんのCognitiveServicesについてのセッションです!

BuildでのUpdate情報を重点的に解説頂きました。

Buildでアップデートが紹介されたサービス

  • Visionカテゴリ
    Ink Recognizer (New)
    Form Recognizer (New)
  • Decisionカテゴリ (New)
    Anomaly Detector (New)
    Personalizer (New)
  • Speechカテゴリ
    Speech Services:Speech-to-Text (Update)
  • Languageカテゴリ
    LUIS (Update)
  • QnA Maker (Update)

Decisionカテゴリ (New)

  •  データアナリストのアシスタントとして進化
  • データさえあれば直ぐに始められる

 - Anomaly Detector (New)

  • 時系列データの異常検知
    教師なし、単変量解析(多変量はまだ未実装)
    予測値推定、外れ値抽出
  • 適切なモデルを自動選択して推論してくれる
  • ノイズを除去し予測値を算出
  • 異常判定の調整はAnomaly Rate とSensibilityで実施
  • Anomalyはboolで返ってくる
  • Power BIと連携でマジ無敵

 - Personalizer (New)

  • 強化学習を使ったパーソナライズ
  • コンテキストに対するあアクションをレコメンデーション
    おすすめの推定
  • 結果に対する反応を登録⇆登録させて精度の向上
    フィードバックループ
  • ユーザーの属性やコンディションから次のアクションを推定
  • データは最低でも50万件くらいは欲しいところ

 Form Recognizer (New)

  • レシートなどのJPG、PNG、PDFからフォームを認識
    Key - Value、テーブルデータを抽出
  • フォームを予め学習させておくことが可能
  • 現在は英語対応のみ 

Ink Recognizer (New)

  • ペンの入力から描画された文字や図形を認識
    OCRではなく、入力されたストロークをデジタル座標として取込み
  • 使い所かなり有り
    会員登録など紙に書いた情報をPCに入力などの手間が省ける

 

f:id:rupic:20190602221713p:plain

 

Cognitive Servicesがもたらす価値は、より簡単に、よりお手軽にAIを使ったサービスを導入し、人的リソーセスを大幅に減らすことが出来る事だと思います。

企業で一番大切な事は、既にあるサービスを必死に作成する事ではなく、既にあるサービスや技術を組み合わせ、いかに早く価値あるものを提供出来るかだと思います。

Intelligent Kiosk

Cognitive Servicesを体験できるデモアプリ

Intelligent Kiosk を入手 - Microsoft Store ja-JP

Git Hub

https://github.com/Microsoft/Cognitive-Samples-IntelligentKiosk 

Blog

クラウドクラウドコンピューティングMicrosoft Azure にまつわる話題を取り上げ

blogs.msdn.microsoft.com 

DT07:IoT Technologyの過去、現在、未来〜事例を交えてご紹介

www.microsoft.com

 いちを僕の所属しているチームは品質管理部門のIoT推進をしている事も有り、IoTの今を知る為に、デベロッパーオーディエンスプロダクトマーケティングマネージャ太田さんのセッションを聞いてきました。

太田さん、密かにTwitterのフォロアーを増やしたいらしく冒頭でアナウンスです!

twitter.com

  • ただモノをインターネットにつなぐだけがIoTじゃない
    繋いだモノの情報を共有し他の情報とマージする事で見えてくるインサイトを、製品や実作業にフィードバックする事がIoT
  • 考え方はドキュメントを電子化するのと同様で機器の内部情報をデジタル化
  • セキュリティは重要。ドキュメント同様用意されている
  • Azure Sphereブラックボックスの提供ではない。OSSでの提供
  • 案件は一気にデジタル化しない事
    一気にやると…検証Pocで大量の接続台数、データ量に対応したスケーラブルなインフラ環境を考えると絶対破綻するのでやるだけお金の無駄w
    重要なのは、どこをどう自動化していくのか?
     継続的デプロイ:Azure DevOps
     証明書、トークン、公開鍵は自動化
  • IoT向けの参照アーキテクチャは一通り目を通す事!

過去〜未来

2010年

  • sensor  & location pratform Azure Cloud

2012年

  • .NET Gadgeteer AzureCloudService

  • GR  Sakura Azure MobileService

  • Event Hub

2014年

  • IoT Hub

2015年

  •  Internet of Your Things!!
    〜IoTの民主化
    この時期はIoYTと言われてた
    これをきっかけに〜◯◯の民主化〜がMS内で流行ったらしい

2016年

  • Device Provisioning Service

2018年

  • Microsoft will invest $5 Billion  in IoT. Here's why.
    MSとしてIoTソリューションにもっと力を入れていくと提言
  • IoT Edge

事例

トヨタ自動織機

スマートファクトリー


お客様の変化と未来を素早く捉えSalesforceと物流の未来を創造

 

青葉電子株式会社

クラウドIoT基盤を活用した海洋観測テレメトリシステム

61.206.118.118

最新動向

  • Azure IoT Edge
    k8s対応
    Linux ARM64対応
    Windows IoTx64対応
    ネットワーク断線時の振る舞い
    DevOps
    Azure IoT Central
     →注目:フルマネージドIoT、SaaS
  • Azure Security Center for IoT
    IoTデバイスも含めたソリューション全体の保護
    ASC for IoT Architecture
  • Windows IoT
    ロボットリアルタイムOS系との連携
    WindowsCE動かせる
    バイスが繋がった際に自動で認識→デプロイしてくれる
  • IoT Digital Twins
    設計図等の静的情報と現在の建物の動的情報をつなぎシュミレーションを実施
    今後、デジタルツインを利用したレビューはマストになる可能性が高い


    thyssenkrupp lays the foundation for intelligent buildings

 

冒頭にもあった通り、ただモノをインターネットに繋いでみましたwってのが現状の状態になってしまっているところがあるので、自社ではどうやって繋いだデータを有効に別のデータと繋いでしっかりとフィードバックする仕組みを考えていかないといけないなと思います。

なんとなくIoTしたいとか、流行ってるからIoTしろなんて事はなしにして欲しいものです。

をPower BI ハンズオン

久し振りにお会いした中村さんに勧められ、Power BIのハンズオンをさせて頂きました!

f:id:rupic:20190531183548p:plain

Power BIデスクトップを使ってWikipediaからデータを取得し可視化するというもの

  1. WikipeddiaからUEFAチャンピオンリーグの優勝国データを取得
  2. データを使い易い形に整理
  3. レポーティング(MAP、スライサー、円グラフ)
  4. タイトルを付けてあっという間に完成 

 

本当に簡単にレポートを作成出来るいいツールだと思うんですが、しっかりデータというものの本質を捉えてどういう風に可視化させるといいか、自分が何が見たいのか(解析したい情報は人それぞれだと思うので)考えて利用するべきだと思います。

ちなみに、うちの会社みたいにバカ高い利用料払って使えもしないBIツール入れるよりはよっぽど実用的だと思いますけどねw

 

ハンズオン資料が公開されていますので是非利用してみてください 。
※めっちゃ丁寧に作られているので書いている通りに操作すれば出来上がります

www.slideshare.net

 

PowerPlatform Touch&Try でのハンズオン会場で行われていたMicrosoft Flowを使ったハンズオンの資料も載せておきますm(_ _)m
こちらもものすごく丁寧に手順が書かれていますので是非お試しください!

www.slideshare.net

www.slideshare.net

www.slideshare.net

www.slideshare.net

アフターパーティー 

恒例のアフターパーティです。
相変わらず会場は人!、人!!、人!!!って感じで、会場内で誰かを探そうと思うとリアルウォーリーを探せになってしまいます。

色々な方とお話ししながら飲んでいると…

 

なんとモニターにはケイスケ•ホンダが登場です!!
じゅんいちダビッドソンではなく、「出身地はアース」「プロフェッショナルとは…ケイスケ•ホンダ」のケイスケ•ホンダさんの登場です!!!

f:id:rupic:20190601142209j:plain

まぁ、飲んでたのもあってあまり話聞いてないですw

アフターパーティーといえば最後にある抽選会ですね!

今年こそはHoloLens当ててやろうと意気込んでみたんですが…

f:id:rupic:20190601143824j:plain

これ当たりました!!!!
めっちゃAmazon Echoみたいなの当たったー

…………………実物はこれでした。

f:id:rupic:20190601144006j:plain

ちっさw 

 

Twitter de:code 2019 Day 1まとめ

togetter.com

 

Day 2 へ続きます…

 

rupic.hatenablog.com

 

Fukuoka.NET #13 もくもく会

こんにちは!

 

昨日はFukuoka.NET(ふくてん)もくもく会をオルターブースさんに会議室をお借りして実施しました!

fukuten.connpass.com

 

 

なんとオルターブースの加藤さんにをBuildローカルイベントのノベルティを頂きました!!ありがとうございますm(_ _)m

f:id:rupic:20190518115819j:plain

kumaazu.connpass.com

 

今回は2019/5/6-8にシアトルで行われた、Microsoftの技術者向けカンファレンスである『Microsoft Build 2019』の内容についてもくもくしましょうというもので、モニターにBuildの基調講演を流しつつゆるりと行いました。

 


Microsoft Build 2019 Vision Keynote 日本語同時通訳版

 

関連記事

www.microsoft.com

tech-lab.sios.jp

blog.azure.moe

 

会場の様子

今回は6名の参加で、初めてふくてんに来た方が2名いらっしゃいました(*'ω'*)

適度に会話もしつつそれぞれもくもくされてます!

 

f:id:rupic:20190518114451j:plain

 

ちなみに、僕はCognitive Servicesに新たに追加された『Decision』カテゴリーの『Anomaly Detector(Preview)』と『Personalizer(Preview)』についてもくもく。

 

どこかでお話できる様、資料としてまとめとこう。

 

次回はde:codeの振り返り会を6月に企画できればいいなぁ

 

 

Visual Studio 2019 Launch Event in Fukuoka

こんばんはm(_ _)m

私用で纏めるのが遅くなりましたが、先日よりアナウンスをしていましたVisual Studio 2019 Launch Event in Fukuokaが開催されました!!

f:id:rupic:20190419235218p:plain

Create by Rupic♡

 

f:id:rupic:20190415215933p:plain

本編はこちら

visualstudio.microsoft.com

 

オープニングの前に…

今回イベントを行うにあたってマイクロソフト九州支店さんのご好意で場所をお借りしたのですが、先日改装したばかりでかなりオシャレな内装になってました。

内装のコンセプトは九州の雄大な自然をイメージしたとの事で、どこか暖かみのある空間で落ち着きますね😊

f:id:rupic:20190415225249j:plainf:id:rupic:20190415225254j:plain

f:id:rupic:20190415225259j:plainf:id:rupic:20190415225306j:plain

f:id:rupic:20190415225310j:plainf:id:rupic:20190415225314j:plain

 

参加者の皆さんが来る前にノベルティをいい感じに並べてみますw
いい感じのテーブルに並べてみると、いい感じに見えますね(

f:id:rupic:20190415230342j:plain

以前はモニター接続用の端子はVGAしかなかったのですが、HDMI、Type-C、miniDisprayportに増えてました。これは便利ですね!※でもマイク付いてません

MLBお兄さんこと松村さんも入念に機材をチェック…

f:id:rupic:20190415230356j:plainf:id:rupic:20190415230347j:plain

そりゃぁ、こうなります。
本人の意気込みが見てとれますね!!

f:id:rupic:20190415230351j:plain

オープニング

今回、日曜開催にも関わらずconnpassで募集して2週間くらいでほぼ満席の状態!!
皆さんのVisual Studioに対する関心が高さが伺えますね。

f:id:rupic:20190415231344j:plain

セッション①

Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル

www.slideshare.net

 

チャックさんこと、日本マイクロソフトの井上章さんのセッションです!

f:id:rupic:20190415234006j:plainf:id:rupic:20190416000250j:plain

まずはVisual Studio.NET Frameworkのバージョンアップのお話
これを見ていつも思うのが、うちの会社で今だにVB6案件があるので切なくなります。

f:id:rupic:20190416000438j:plain

そしてVisual Studio 2019の話題に移っていきます
ちなみに写真はVS2019とVS2019Previewのロゴですね。
今はPreviewを別インストール出来るので事前検証等する際に検証用環境を準備する必要がありません!

f:id:rupic:20190416002129j:plain

Visual Studio 2019はUI周りの変更だけでなく、2017に比べて動作速度の向上や使用メモリ容量がちょびっとだけ少いみたい

f:id:rupic:20190416002502j:plain

AIがコーディングを支援するIntelliCodeVisual Studio 2019 のLaunch Eventで発表されたLive ShareのGAです
この機能、どちらも会社でめっちゃ重宝しています。

IntelliCodeはIntelliSenseにAIを用いてGitHubからスター100以上のソースを学習して、
現在入力したコードから次に入力するであろうコードを推測して優先的に表示してくれます。

また、IntelliCodeは自身のソースコードを学習して俺設定のIntelliSenseを作成してくれるのも良いですね!

LiveShareについては、Visual Studio2019、Visual Studio2017(拡張機能)、VSCode(Extension)でOSを問わずライブコーディングが出来ちゃいます。

※設定を変更する事で最大30名まで同時接続出来るらしい|Д`;)))

うちの会社では打ち合わせで離れた場所に行くことが多いので、チームメンバーとLiveShareでコードレビューしたりしてます。

f:id:rupic:20190416002835j:plainf:id:rupic:20190416002908j:plain

そしてOSSのFrameworkである.NET Core 3.0(Preview)のお話

f:id:rupic:20190416010128j:plain

.NET のCore×WPFデモと本番環境で動作しているアプリケーションを停止させることなくデバッグを可能にするスナップショットデバッガーのデモ


チャックさんのセッションは本当にいつ聞いてもわかり易くて、話に引き込まれるような素敵なセッションです。来月のde:codeでもおそらくチャックさんのセッションあると思うので最前列で拝聴します(´・ω・`)

f:id:rupic:20190416010856j:plain

セッション②

Azure*VisualStudioで簡単アプリを作ってみよう

www.slideshare.net

 

続いては、おだしょーさんこと日本マイクロソフト小田祥平さんのセッションです!

f:id:rupic:20190419231911j:plainf:id:rupic:20190419231836j:plain

このイラスト、元カノさんが描いてくれたらしく非常に可愛い!!!!
小田さんとは今回初めてお会いしたのですが、本当に親しみやすい方でした☺️

f:id:rupic:20190419232621j:plain

前日までの激務をこなして、まさかのほぼ徹夜での登壇!(◎_◎;)

MSのDocumentすぐ古くなる問題(激しく同意)に立ち向かいながら、Azure×Visualstudio2019で簡単なToDoリストをMobileAppで作成しつつ、要所要所で面白ネタをぶっ込みつつ和やかに進みます。

f:id:rupic:20190419233156j:plain

これやってみて思ったんですが、本当に簡単に作成出来るんですよね!!

モバイル向けのアプリ開発って会社では全くしないので食わず嫌い的


なイメージだったんですが、こんなに簡単に作成出来るのであれば案件として採用してみたいと思いました。

f:id:rupic:20190419234635j:plain

f:id:rupic:20190419233635p:plainf:id:rupic:20190419233836p:plain

Microsoft Azureには何種類のサービス数があるかご存知ですか?。(´Д`)♪

Azureのサービス数…普段あまり意識しないで使用していたんですが、何と270サービスもあるらしい!!!!

そう!!そんなにサービスあったらキャッチアップ出来へんよーwって事で…

Microsoft Learnの紹介です!!

f:id:rupic:20190419234722j:plain

今回のハンズオンでも利用したMicrosoft Learnですが、本当に便利です。

通常Azureのサービスを利用しようと思うと、2,2500円分のクレジットがついてくるんですが、それを使い切ってしまうとお金がかかりますよね。

しかし、Microsoft Learnではサンドボックス上でAzureのサービスをハンズオン形式で無料で利用出来るし、しかも丁寧に解説までついているので本当にMicrosoftさん太っ腹です!!

 

f:id:rupic:20190420000034j:plain

 

最後は来月開催されるde:codeのご紹介であっという間に終了です。

本当に楽しいセッション、ありがとうございましたm(_ _)m

f:id:rupic:20190419235448j:plain

セッション③

イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方

www.slideshare.net


 最後のセッションはふくてんのオーガナイザーである、オルターブース松村優大さん!

f:id:rupic:20190420000141j:plainf:id:rupic:20190420000212j:plain

ご本人曰く、今回一番伝えたかった事は…

PHPカンファレンス福岡が6月29日に開催されます!!!!との事。

f:id:rupic:20190420094325j:plain

phpcon.fukuoka.jp

本当にマルチに活動されていて尊敬しますm(_ _)m

内容は、Alternative Architecture DOJOでもお話されていた自社のアーキテクチャのお話と、アーキテクチャをどう学んで行くのか、テストの重要性など、非常にGeekな内容になっていたと思います。

f:id:rupic:20190420095057j:plain

休憩

上野さんと私ですw

カメラ片手にコソコソ動き回りつつ雑務全般をこなしていきます。(役に立ってるかは不明ですが。。。w

f:id:rupic:20190420095951j:plainf:id:rupic:20190420100020j:plain

ハンズオン

今回は出来るだけ参加したみなさんにVisual Studio2019を触ってもらいたくてハンズオンを実施する事にしました!

内容は

  • ASP.NET Coreを使用してAPIを構築
  • 作成したAPIをAzure App Serviceにデプロイ

上記をせっかくなのでVS2019、VS2019 forMac、VSCodeを使ってやってみようというもの。

f:id:rupic:20190420101842j:plain

docs.microsoft.com

docs.microsoft.com

VIsual Studio 2019ではApp Serviceから発行プロファイルをダウンロード→発行からインポートでいいのですが、Visual Studio 2019 for Macでは出来ないんです…|Д`;)))

色々試して見た結果、大人しくGitデプロイで行く事に!!

Git Push出来ない方は以下確認です。

注意 GitのURLに含まれる $ は %24 に置き換えてください。(URLエンコード

f:id:rupic:20190420102128j:plain

なんだかんだトラブルはありつつも、みなさん隣の方達と相談しつつのんびり出来たのではないでしょうか?

ライトニングトーク(LT)

LTしてくださった方は総勢7名!!!!

皆さん思い思いの熱い想いを語ってくれてました😀

 

上野さんは時代に合わせた技術をどうチームの中でシェアしていくかというもの
ジャパニーズトラディショナルカンパニー感は共感です(T T)

f:id:rupic:20190420102909j:plainf:id:rupic:20190420102706j:plain

 

そして上野さんと同じ会社の後輩の橋本さんはWPFでバージョンアップを促すアプリを作成してみた話。おそらく今日一の盛り上がりを見せてましたねw

www.slideshare.net

f:id:rupic:20190420103207j:plainf:id:rupic:20190420103224j:plain

 

次は、パイセンこと山田さんのRubyKaigiの宣伝です。

RubyKaigiは1500名くらい参加者いるのにスタッフ30名くらいで回してるって裏話も聞けました|Д`;)))スゴイ

f:id:rupic:20190420103741j:plainf:id:rupic:20190420103811j:plain

 

再度登場のおだしょーさん!!!

DevRelを通して自身が感じる事、コミュニティやアウトプットする文化の重要性を語っていただきました。

www.slideshare.net

ちなみにQRコードは1回目と変えてます!!

f:id:rupic:20190420104214j:plainf:id:rupic:20190420104259j:plain

 

伊藤さんのクラウドネイティブデイズの宣伝です!!
ちなみにチャックさん、おだショーさんはこちらに参加の為、来福されてました。

めっちゃ行きたかったのに当日から出張でした( ;  ; )

f:id:rupic:20190420104551j:plainf:id:rupic:20190420104620j:plain

 

次はジョニーさんのFiddlerのすヽめです!

www.slideshare.net

f:id:rupic:20190420105137j:plainf:id:rupic:20190420105200j:plain

 

最後はMicrosoft MVPである加藤さんのVisual Studio for MACのアップデートの話。

流石フルスタックエンジニアの加藤パイセン、ぱねーっす!!!!

f:id:rupic:20190420105523j:plainf:id:rupic:20190420105610j:plain

まとめ

長々と書いてきましたが、会場の雰囲気など少しは伝わったでしょうか?

 

日曜開催という中、県外からの参加の方など、本当に大勢の皆さまにご参加頂いて大変嬉しく思いましたし、自分自身楽しく色々なものを勉強させていただきました。

本当にありがとうございました!!!!

Visual Studio for MAC 2019 GA

こんばんは。

久しぶりのアップです。

 

昨日Visual Studio 2019のLaunchイベントで以下がGAされました。

visualstudio.microsoft.com

 

今回GAされるかと思っていた、IntellicodeとC# 8.0はPreviewのままでしたね。

きっと2019年後半くらいに.NET Core 3.0と一緒にGAされるのかもしれません…わかりませんがw

 

 

さて、今回はMacBookProに入っているVisual Studio 2017 for MACをアンインストールして…

 

…ってどうやってアンインストールするのっ!?

 

まだMACがよくわかってない初心者なのでggってみると公式に書いてましたw

スクリプト叩いてアンインストールするんですね。

docs.microsoft.com

 

サクッとアンインストールしてダウンロードしましょう!

 

visualstudio.microsoft.com

f:id:rupic:20190403231421p:plain

ダウンロードした.dmgファイルをダブルクリックするといつものアレが出てきますので続けてアイコンをダブルクリックしましょう。

f:id:rupic:20190403231647p:plain

途中こんなやつやパスワード入力を求められる事があるので指示に従って進めていきます。

f:id:rupic:20190403231804p:plain

続いて何をインストールするか聞かれますので用途にあったものをインストールしましょう。

f:id:rupic:20190403231913p:plainf:id:rupic:20190403231920p:plain

ダウンロードしながらインストールが進んでいきます。

f:id:rupic:20190403232200p:plain

おおw早い!!

Visual Studio 2017をインストールした時はめっちゃ時間がかかったイメージがありましたので、今回のインストールは随分早くなったと感動しました。

f:id:rupic:20190403232217p:plain

だがしかしです。

ここからがめっちゃ長かったーw

f:id:rupic:20190403232233p:plain

という事で…インストールも終わり(白目

スタートアップ画面です。驚きの白さです。。

オサレでかっこいいですね!!

f:id:rupic:20190403232655p:plain

プロジェクトを作成してみます!

.NETCoreは2.2まで選択可能です。

f:id:rupic:20190403232701p:plainf:id:rupic:20190403232709p:plain

相変わらずシンプルですねー。

普段WindowsVisual Studioを使っていて、テーマも濃紺にしているのでなおさらシンプルに見えてしまいます。

f:id:rupic:20190403233117p:plain

 

今回のVisual Studio for MACでの改善点

docs.microsoft.com

 

毎日会社ではWindows版を使っていることもあり、まだあまり慣れないですが、慣れるために暫くこちらで遊んでみることにします。

来週の福岡で開催されるLaunchイベントでこれ持って行ってみようかしらw

スプレッドシートをWebアプリから参照する 

こんばんは。
何回かにわけて投稿してきたGoogle Form備忘録ですが、ようやく最終回です。

実現したい事

  • Google Formで時間帯予約フォームを作成
  • 予約データをスプレッドシートと連携
  • 各時間帯には上限があり残席数を知らせたい(予約できなくする等の制限は不要)
  • 登録時にユーザーIDを入力してもらい予約のキャンセル/変更ができる
  • スプレッドシートのデータを検索し現在の登録状況を検索/表示する事ができる
  • ユーザーはスマホWebブラウザからのアクセスのみ(ガラケは無視でおk)
  • 尚、ユーザーはGoogleアカウントでログインしない事とする(震

 

最後の機能はGoogle Formに登録した回答内容をどうにかして確認する術を探すというものですw

基本的にこちらもGoogleアカウントでログインしていただければ簡単に確認する事ができますのでこんな面倒な方法は不要かと思いまが、色々失敗してスプレッドシートをWebアプリケーションから呼び出す仕様になったので、そこはは別の用途で使えそうですね。

はじめは…

スプレッドシートにデータを保存しているので、単純に確認用のスプレッドシートを準備してユーザーの方にIDを入力→GASで必要事項を表示するといった仕様でした。

 

f:id:rupic:20190307235617p:plain

とりあえずこんな感じのTHEエクセルチックなシートを準備して、ユーザーIDを入力し図形描画で作った検索ボタン(GASを割付)をクリックしたらスプレッドシートの中身を検索というものを作成してみました。

なんとなくGASの使い方にも慣れ10分くらいで完成し、動作確認もバッチリです😊

www.atmarkit.co.jp

 

しかし…

上記で作成したスプレッドシートを公開してユーザーの方にページにアクセスしてもらうという算段でしたが、Googleアカウントでログインしない時点でスプレッドシートは読み取り専用となり、ユーザーには何やら検索できそうな画面を見るだけという謎仕様のものが見えるのみとなってしまいましたwwwwww

 

スプレッドシートをWebアプリから参照する 

もうダメかと思ってネットサーフィンしてたらこんな記事を見つけました。

qiita.com

 

どうやらスプレッドシートをDBの様に見立てて、Webアプリから参照する事ができる様です。

developers.google.com

 

公式によるとWebアプリとして公開するには以下の条件を満たしている必要があるらしいです。

  • doGet() または doPost() 関数を実装する
  • HTML service HtmlOutput オブジェクト または Content service TextOutput オブジェクト を返す

作ってみよう

とりあえず、gsファイルとHTML、javascriptを書きます。

index.gs

function getData(userid,week) {
  
  const fw_id = "***スプレッドシートのIDを入力***";
  const sw_id = "***スプレッドシートのIDを入力***";
  
  var spreadsheet;
  if(week === '1'){
    spreadsheet = SpreadsheetApp.openById(fw_id);
  } else {
    spreadsheet = SpreadsheetApp.openById(sw_id);
  }  
  
  var sheet = spreadsheet.getActiveSheet();
  
  const inventory = sheet.getDataRange().getValues()
  .filter(function(row){return row[1] === userid})
  .map(function(e){
    const columns = [0,1,2,3,4,5,6,7,8,9,10,11],row = [];
    for(var i = 0; i < columns.length; i++) row.push(e[columns[i]]);
    return row;
    
  });
  
  if(inventory.length === 0){
    return inventory;
  }
  
  return inventory[inventory.length -1];
}

function doGet(e) {
  var data = getData(e.parameter.name,e.parameter.id);
  return ContentService.createTextOutput(JSON.stringify(data, null, 2))
  .setMimeType(ContentService.MimeType.JSON);
}

index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>バス予約確認</title>
        <link rel="icon" href="img/fav.png" type="image/x-icon">
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- main css -->
        <link href="css/style.css" rel="stylesheet">      
    
        <!-- modernizr -->
        <script src="js/modernizr.js"></script>           

    </head>
    <body>        
        <div class="container main-container">
            <div class="header">
                <a class="h2" href="#" onclick="location.reload();">バス予約確認</a>
            </div>
            <br>            
            <div class="row col-md-12">
                <div class="input-contact col-md-4" style="width: 200px">
                    <input type="text" id="jcode" placeholder="ユーザーIDを入力">
                    <br>
                    <div class="btn-group" data-toggle="buttons" style="margin-top: 10px">
                        <label class="btn btn-default active">
                            <input name="week" type="radio" autocomplete="off" checked> 1週目
                        </label>
                        <label class="btn btn-default">
                            <input name="week" type="radio" autocomplete="off"> 2週目
                        </label>
                    </div>                    
                </div>
            </div>
            <div class="row col-lg-12">
                <div>
                        <input type="submit" id="search" class="btn btn-box" value="検索">
                </div>                
            </div>            
            <div class="row col-md-12">
                <div id="fw" class="col-md-6 values">
                    <h2>1週目</h2>
                    <table class="table table-borderd table-striped">
                        <th></th>
                        <th>行き</th>
                        <th>帰り</th>
                        <tr>
                            <th>3月4日(月)</th>
                            <td id="fw_go_mon"></td>
                            <td id="fw_rtn_mon"></td>
                        </tr>
                        <tr>
                            <th>3月5日(火)</th>
                            <td id="fw_go_tue"></td>
                            <td id="fw_rtn_tue"></td>
                        </tr>
                        <tr>
                            <th>3月6日(水)</th>
                            <td id="fw_go_wed"></td>
                            <td id="fw_rtn_wed"></td>
                        </tr>
                        <tr>
                            <th>3月7日(木)</th>
                            <td id="fw_go_thu"></td>
                            <td id="fw_rtn_thu"></td>
                        </tr>
                        <tr>
                            <th>3月8日(金)</th>
                            <td id="fw_go_fri"></td>
                            <td id="fw_rtn_fri"></td>
                        </tr>
                    </table>
                </div>
                <div id="sw" class="col-md-6">
                    <h2>2週目</h2>
                    <table class="table table-borderd table-striped">
                        <th></th>
                        <th>行き</th>
                        <th>帰り</th>
                        <tr>
                            <th>3月11日(月)</th>
                            <td id="sw_go_mon"></td>
                            <td id="sw_rtn_mon"></td>
                        </tr>
                        <tr>
                            <th>3月12日(火)</th>
                            <td id="sw_go_tue"></td>
                            <td id="sw_rtn_tue"></td>
                        </tr>
                        <tr>
                            <th>3月13日(水)</th>
                            <td id="sw_go_wed"></td>
                            <td id="sw_rtn_wed"></td>
                        </tr>
                        <tr>
                            <th>3月14日(木)</th>
                            <td id="sw_go_thu"></td>
                            <td id="sw_rtn_thu"></td>
                        </tr>
                        <tr>
                            <th>3月15日(金)</th>
                            <td id="sw_go_fri"></td>
                            <td id="sw_rtn_fri"></td>
                        </tr>
                    </table>
                </div>
            </div>

        </div>
        <footer>
            <div class="container-fluid">
                <p class="copyright">© Rupic</p>
            </div>
        </footer>

        <!-- jQuery -->
        <script src="js/jquery-2.1.1.js"></script>
        <!--  plugins -->
        <script src="js/bootstrap.min.js"></script>
        <script src="js/sheet.js"></script>
    </body>
</html>

seet.js

$(function(){
    $("#fw").css("display", "none");
    $("#sw").css("display", "none");

    $('#search').click(function(){
        var jcode = $('#jcode').val();
        var week = 0;
        $("#fw").css("display", "none");
        $("#sw").css("display", "none");

        if($('input[name=week]:eq(0)').prop('checked')){
          $("#fw").toggle();
          week = 1;
        }else{
          $("#sw").toggle();
          week = 2;
        };

        var url = 'https://script.google.com/macros/s/AKfycbyolai-14OF6N_jWKCnykga3WpVcCX06LYvRBn23W1gjkyYDFU/exec?name='+jcode+"&id="+week;

        $.ajax({ // json読み込み開始
            type: 'GET',
            url: url,
            dataType: 'json'
          })
          .then(
            function(json) { // jsonの読み込みに成功した時
              if(week===1){
                $('#fw_go_mon').text(json[2]);
                $('#fw_go_tue').text(json[3]);
                $('#fw_go_wed').text(json[4]);
                $('#fw_go_thu').text(json[5]);
                $('#fw_go_fri').text(json[6]);
                $('#fw_rtn_mon').text(json[7]);
                $('#fw_rtn_tue').text(json[8]);
                $('#fw_rtn_wed').text(json[9]);
                $('#fw_rtn_thu').text(json[10]);
                $('#fw_rtn_fri').text(json[11]);
              }else{
                $('#sw_go_mon').text(json[2]);
                $('#sw_go_tue').text(json[3]);
                $('#sw_go_wed').text(json[4]);
                $('#sw_go_thu').text(json[5]);
                $('#sw_go_fri').text(json[6]);
                $('#sw_rtn_mon').text(json[7]);
                $('#sw_rtn_tue').text(json[8]);
                $('#sw_rtn_wed').text(json[9]);
                $('#sw_rtn_thu').text(json[10]);
                $('#sw_rtn_fri').text(json[11]);
              }
            },
            function() { //jsonの読み込みに失敗した時
              alert('予期せぬ不具合が発生しました');
            }
           );
    });
});

 

適当にWebサーバーにデプロイして接続してみます。

f:id:rupic:20190309012921p:plain

まとめ

  • 急ぎで作成したので雑で申し訳ないです
  • 簡単にWebアプリから呼び出し可能なのでサクッと作りたい時に重宝しそう?
  • UIは自分の好きな感じで作成できるので融通が効きますね

 

今回のGoogle Formシリーズはこれにて終了ですが、また機会があれば、色々触ってみようかと思いますm(_ _)m

Google Formでログインなしで登録時に重複を削除する

こんばんは。

昨日の続きです!

実現したい事

  • Google Formで時間帯予約フォームを作成

  • 予約データをスプレッドシートと連携

  • 各時間帯には上限があり残席数を知らせたい(予約できなくする等の制限は不要)

  • 登録時にユーザーIDを入力してもらい予約のキャンセル/変更ができる

  • スプレッドシートのデータを検索し現在の登録状況を検索/表示する事ができる

  • ユーザーはスマホWebブラウザからのアクセスのみ(ガラケは無視でおk)

  • 尚、ユーザーはGoogleアカウントでログインしない事とする(震

 

はじめに・・・

正直今回は苦肉の策と言いますか、ユーザー次第的なところが強いので、あまりオススメできません。(泣

一度登録した内容を編集したい場合や、回答の重複を避けたい場合はGoogleアカウントでログインして頂く事を強くオススメします。

hep.eiz.jp

 

どうしよう・・・

今回、要件にユーザーの方にはGoogleアカウントでログインしないとあったので、どうしたものか考えに考えた結果、ユーザの方には予め決められたユーザーIDを入力してもらい、GASを使ってGoogle Formのリクエスト送信時に同じIDが過去に登録されていた場合は古いIDのレコードを削除するといったものにしました。

Google Formはスプレッドシートと連携必須

 

懸念事項

スプレッド上のレコードを削除する為、Google Formの回答とスプレッドシートのレコードがアンマッチになる

ユーザーIDを少しでも間違えて入力したら積む

 

とりあえず実装してみる

function myFunction() {

  var id = '***ここにスプレッドシートのIDを入力***';
  var answer_sheetname = '回答';
  var cansel_sheetname = 'キャンセル';
  
  //シートの読み込み
  var spsheet = SpreadsheetApp.openById(id)
  var answer_sheet = spsheet.getSheetByName(answer_sheetname);
  var cansel_sheet = spsheet.getSheetByName(cansel_sheetname);  
  //最終行の取得
  var answer_lastrow = answer_sheet.getLastRow();
  var cansel_lastrow = cansel_sheet.getLastRow()+1;
//直前に入力したレコードよりユーザーIDを取得 var userid = answer_sheet.getRange("B"+answer_lastrow).getValue(); //対象useridの行を取得 var rowPosition = findRow(answer_sheet,userid,2); //最終行と一致する場合は重複なしとみなす if(rowPosition === answer_lastrow){ return; } //取得した回答データをキャンセルシートに貼り付け answer_sheet.getRange('A'+rowPosition+':L'+rowPosition).copyTo(cansel_sheet.getRange('A'+cansel_lastrow+':L'+cansel_lastrow)); //元データを行ごと削除 answer_sheet.deleteRow(rowPosition); } function findRow(sheet,val,col){ var dat = sheet.getDataRange().getValues(); for(var i=1;i<dat.length;i++){ if(dat[i][col-1] === val){ return i+1; } } return 0; }

 

こんな感じです。

データを削除しようと思ったのですが、後から削除したデータはどんなものだったのか?と言うのを確認できる様にキャンセルシートを用意し、レコードを移動するイメージで作成してみました。

苦しい感じですが、以下の様な処理を行なっています。

  1. 自身のスプレッドシートから回答シートとキャンセルシートを取得
  2. 直前に入力したレコードよりユーザーIDを取得
  3. findRow関数で対象のユーザーIDを含むレコードが存在するかチェック
  4. 対象レコードが存在した場合、キャンセルシートにレコードをコピペ
  5. 回答シートよりコピペしたレコードを削除

2の直前に入力したレコードよりユーザーIDを取得したところで、複数ユーザーが同時にフォームに入力した場合はどうなるのか同僚にお願いして何度かテストしましたが、40回ほど実験して100%自身の入力したレコードだったので大丈夫かと怪しい処理を書いてますwww

 

まとめ

  • 今回の方法は絶対にオススメしません
  • 重複を削除したい場合はGoogleアカウントでログインしましょう

 

まぁ結果はともあれ、良く頑張った!!と思うwwww

 

Google Formでリクエスト送信時Formの表示を変更する

こんばんは。

前回に引き続きGoogle Formでやった案件のメモを残しておきます。

rupic.hatenablog.com 

実現したい事

  • Google Formで時間帯予約フォームを作成

  • 予約データをスプレッドシートと連携

  • 各時間帯には上限があり残席数を知らせたい(予約できなくする等の制限は不要)

  • 登録時にユーザーIDを入力してもらい予約のキャンセル/変更ができる

  • スプレッドシートのデータを検索し現在の登録状況を検索/表示する事ができる

  • ユーザーはスマホWebブラウザからのアクセスのみ(ガラケは無視でおk)

  • 尚、ユーザーはGoogleアカウントでログインしない事とする(震

 

各時間帯毎の予約件数をフォームに表示する

 そもそもそんな事が出来るのか謎なままネットサーフィンしていたら、非常に分かりやすいブログを発見しました。

 

どうやらGoogleではGoogleが提供するGoogle Formやカレンダー、スプレッドシート等のサービス上で動作するスクリプトを使ってアプリの機能を拡張したり連携したり出来るらしいデス。便利ですねw

developers.google.com

 

スクリプトを書いていきましょう

Google Formデザイナー画面右上のメニューより「スクリプトエディター」を選択します。

f:id:rupic:20190303233556p:plain

 

こんな感じでJavaScriptで書きましょう。

今回は前回の記事でスプレッドシートに回答結果を同期させているので、スプレッドシートよりデータを取得する事にしました。(実はちょっとした事情があってw

フォームの説明の箇所に取得したデータを表示するには以下でOKみたい。

 var form = FormApp.getActiveForm();

 form.setDescription(joinStr);

 

本当はセクション毎に表示したかったのですが、どうやってもセクション毎の説明を取得する方法がわからなくて致し方なく全てTopに表示です。

function endFormCheck_Ontheway(){
  var description = [];
  var weeks = CreateWeeks(1);
  var target = CreateTarget(1);
      
  description.push('■■■■■■行き便の空席状況■■■■■■\n');
  description.push('\n')
  
  description.push.apply(description,CreateDescription(weeks,target));

  return description;
}

function endFormCheck_Onthewayback(){
  var description = [];
  var weeks = CreateWeeks(2);
  var target = CreateTarget(2);
    
  description.push('■■■■■■帰り便の空席状況■■■■■■\n');
  description.push('\n')
  
  description.push.apply(description,CreateDescription(weeks,target));

  return description;
}
function CreateTarget(mode){  
  if(mode === 1){
    return ["5時","6時"];
  }else{
    return ["17時","18時"];
  }
}

function CreateDescription(weeks,target){
  var LIMIT_COUNT = 50;
  
  var id = '***ここはスプレッドシートのシートIDを入力しましょう***';
  var sheetname = '回答';
  
  //シートの読み込み
  var spsheet = SpreadsheetApp.openById(id)
  var sheet = spsheet.getSheetByName(sheetname);

  var description = [];
  
  for(var i = 0; i < weeks.length; i++){
    const list = sheet.getDataRange().getValues();
   
    description.push("・" + weeks[i][1]+'の予約状況\n')
    for(var j = 0; j < target.length; j++){
      description.push(GetSeatCount(list,i,weeks,target[j],LIMIT_COUNT));
    }
    description.push('\n')
  }
  return description;
}

function GetSeatCount(dat,count,weeks,target,LIMIT_COUNT){
  const tmp = dat.filter(function(item){return item[weeks[count][0]] === target});
  var seat = LIMIT_COUNT-tmp.length;
  return '  ' + target + ' → 残り' + seat + '席です\n';
}

function CreateWeeks(mode){
  if(mode === 1){
    return [[2,"3月4日"],[3,"3月5日"],[4,"3月6日"]];
  }else{
    return [[5,"3月4日"],[6,"3月5日"],[7,"3月6日"]];
  }
}

function GetReserveToSetFormDescription(){
  var description = [];
  
  description.push('注意:人数オーバーの場合は各自責任にて交通手段を確保下さい。\n');
  description.push('\n')
  
  //行き便
  description.push.apply(description,endFormCheck_Ontheway());
  //帰り便
  description.push.apply(description,endFormCheck_Onthewayback());
  
  //配列を合体
  var joinStr = description.join("");
  //フォームに値をセット
  var form = FormApp.getActiveForm();
  form.setDescription(joinStr);  
}

 

トリガーの設定

スクリプトを書いたら、保存アイコンと再生アイコンの間にある時計っぽいアイコンをクリックしてスクリプトをどのタイミングで動作させるかの設定をします。

f:id:rupic:20190304003338p:plain

 

新規スクリプトをクリックすると以下の画面が出てきますので設定していきます。

  1. 実行したい関数名を選択
  2. イベントソースを選択
  3. イベントの種類を選択
  4. 必要があればエラー通知を設定

f:id:rupic:20190304003628p:plain

ちなみにイベントソースは○時間毎や○月○日に実行など、バッチ的な動作も可能みたいですね。

こんな感じで作成したトリガーの一覧が表示されます。

f:id:rupic:20190304003626p:plain




結果はこんな感じ。

f:id:rupic:20190304002822p:plain

 

まとめ

 

次回はいつになるか分かりませんが、残りのタスクもメモしていきます。

年度末と言うこともあり最近は無駄に忙しいwwww

 

はじめてのGoogle Form ①

こんばんは。

毎年恒例の魔の3月を前にして既に瀕死状態の僕です。

 

google formで時間帯予約をするフォームを作成し、自身のIDで登録した結果を後日検索し内容を表示したいということを作成する機会があったので、いつかまたやる(?)時のメモとして残しておきます。

※時間の関係上、数回に分けて投稿します

 

実現したい事

  • Google Formで時間帯予約フォームを作成

  • 予約データをスプレッドシートと連携

  • 各時間帯には上限があり残席数を知らせたい(予約できなくする等の制限は不要)

  • 登録時にユーザーIDを入力してもらい予約のキャンセル/変更ができる

  • スプレッドシートのデータを検索し現在の登録状況を検索/表示する事ができる

  • ユーザーはスマホWebブラウザからのアクセスのみ(ガラケは無視でおk)

  • 尚、ユーザーはGoogleアカウントでログインしない事とする(震

 

Google Form

Googleドライブ上で動作するアンケートや小テスト等、アイデア次第で様々な用途に利用でき、しかも無料で利用する事ができる便利なサービスです。

f:id:rupic:20190225233327p:plain

Google Formで時間帯予約フォームを作成

まずはGoogle Formで予約フォームを作成してみましょう。

f:id:rupic:20190225234842p:plain

 作成の方法は非常に簡単です!

フォームの右側にある”+”ボタンをクリックすると様々な入力フォームを挿入する事が出来マウスでドラッグアンドドロップする事で配置の変更も可能となっています。

コントロール

  • 記述式:フリー入力欄を配置。バリデートの設定可
  • 段落:改行可能なフリー入力欄を配置。バリデートの設定可
  • ラジオボタン:複数選択肢の中より1つ選択する事の出来るコントロールを配置
  • チェックボックス:複数選択肢の中より複数選択する事の出来るコントロールを配置
  • プルダウン:予め用意された選択肢より一つ選択する事の出来るドロップダウン形式のコントロールを配置
  • ファイルのアップロード先:Googleドライブにアップロードする為のコントロールを配置。アップできるファイル形式、ファイル数、サイズ等指定可。Googleアカウントへのログイン必要
  • 均等目盛:1~10までの任意の幅での段階評価を配置
  • 選択式(グリッド):2次元のラジオボタンを配置。各行/各列での選択制限可
  • チェックボックス(グリッド):2次元のチェックボックスを配置。各行/各列での選択制限可
  • 日付:カレンダーより日付を選択可能なコントロールを配置
  • 時刻:時刻を入力可能なコントロールを配置

基本的にすべての要素に必須選択/入力の設定が可能

それぞれタイトルや説明を追加可能

用途に合ったものをポチポチ追加していけばOK

セクション

ラジオボタン等で選択した項目によって回答を分岐したい時にセクションを利用する事が出来ます。また、質問が多い時などセクションを分ける事でページングする事が可能となります。

f:id:rupic:20190226001259p:plain

写真・動画を追加可能

コントロールを追加する際に”写真を追加”または”動画を追加”ボタンをクリックする事で、フォームに写真や動画を追加することが可能となります。

間違い探しや、動画の感想的な何かを実装出来そうですね!

デザインを変更f:id:rupic:20190226001642p:plain

f:id:rupic:20190226001954p:plain

画面右上にあるパレットをクリックするとフォームのテーマカラーやフォント、ヘッダー部に表示する画像等の変更が可能となります。

見た目にこだわるあなたにピッタリな機能ですね(

予約データをスプレッドシートと連携

f:id:rupic:20190226002218p:plain

フォーム作成画面の回答タブをクリックすると、回答の一覧を見る事が出来ます。Google Formの回答はデフォルトではGoogleドライブ内に保存されるのですが、右上にあるスプレッドシートアイコンをクリックする事で、回答をGoogleスプレッドシートに転送する事が出来るようになります。

Googleスプレッドシートと連携しても回答は別々に保存されますのでGoogleスプレッドシートまたはGoogle Formの回答を個別に消してもお互いに影響を受けません。

f:id:rupic:20190226002652p:plain

スプレッドシートにデータ出力する事で、Excelライクにデータ分析したり、ごにょごにょする事が出来るので便利かもしれませんね。

まとめ

  •  Google Formはとにかく簡単にユーザー対話型のフォームを作成可能
  • 直観的に作成可能なのでTipsとか不要なくらい誰でもできる
  • 質問に応じて様々なコントロールが容易されている
  • デザインも変えれてシャレオツな感じにできる
  • Googleスプレッドシートとの連携でデータ分析も捗るかも?

 

こちらの記事が丁寧で分かりやすいです。

boxil.jp

IoT入門!Azure IoT Hub&sakura.io(さくらアイオー)体験ハンズオン@福岡に参加してきました

こんばんは。

飲みすぎて気がついたらウエストでうどん食べてましたw僕です。

 

本日はさくらインターネットさんで開催された”IoT入門!Azure IoT Hub&sakura.io(さくらアイオー)体験ハンズオン@福岡”に参加してきました!!

algyan.connpass.com

 

こちらはIoT ALGYAN(あるじゃん)さん主催のイベントで、セキュアで安価に使えるIoTプラットフォームである、Sakura.ioがAzure IoT HubとEvent Hubに正式対応したらしく、クラウドサービスも電子基板も両方使えるというなんとも面白そうな内容となっています。

*sakura.io(さくらアイオー)とは?

さくらインターネットが開発/提供している、モノゴトの情報をネットワークとやり取りする為に必要な全てを提供するIoTプラットフォームです。利用者のデバイスに組み込み、LTE閉域網経由で安全にやりとりするための「モジュール」、データの保存や外部のクラウドやアプリケーションサービスとの連携を提供する「プラットフォーム」を一体型で統合的に提供しています。

https://sakura.io/

 

今年から僕の職場での担当領域がIoT推進という謎の領域になった事もあり、気になって行ってきた次第です。

 

席には既に今回ハンズオンで使用する電子基板とハンズオンの内容が書かれた資料が置かれてました。

資料が親切!!!

f:id:rupic:20190217011905j:plain

 

オープニング

ゆるーく始まりました。 

f:id:rupic:20190217011912j:plain f:id:rupic:20190217011917j:plain

今回、何と言っても資料が丁寧で分かりやすい!!

参加者の内、僕を含めて8割くらいが初心者の中、そこまで詰まる事もなく順調でした。

 

Azure側の設定

Azure IoT HubでEdge側のデータを取得してStream AnalyticsでデータをBlobストレージに流し込むというハンズオンだったので、それぞれのリソースを作成し、必要な設定を実施。

この辺りは予習していた事もあり、難なく設定完了😄

 

speakerdeck.com

 

Edge側の設定

 

まずはArduino Unoに予め組み付けられたSakura.ioを取り出します。

ラズパイもそうでしたが、ずっしりとしていてなんか良い(

f:id:rupic:20190217011924j:plain f:id:rupic:20190217011927j:plain

Arduinoにセンサー類を簡単に取り付けする為にGroveベースシールドを合体!!

これをつける事で、LEDや温度センサーをワンタッチで取り付け可能になるそうです。

 

f:id:rupic:20190217011932j:plain f:id:rupic:20190217011936j:plain

指定されたコネクタにLED*3個と温度センサーを取り付け、ArduinoをUSBでPCと接続すると…LEDが光った!!!

デフォルトでそうなるプログラムが組まれているらしいですw

 

ここからは、ArduinoIDEから実際にプログラムをEdgeデバイスに書き込みます。

とは言っても予めコードはGitHubに準備されていたのでコピペでOKw

sakura.io用のFrameworkも準備されてて、本当に素人でも簡単に処理を実装する事ができるようになっているとの事。

 

ちなみに、プログラム言語で言うとこの”Hello World”をこちらの界隈では”エルチカ”と言うらしい。※LEDをチカチカさせてみる事

f:id:rupic:20190217014240p:plain

動作確認

ここは写真撮り忘れたんですww

まずは、ArduinoIDEからEdge側から送信されているデータを確認

f:id:rupic:20190217015318p:plain

こう言う機器の動作確認は目に見えて動いているのがわかるので、なんか嬉しくなりますね。

次にSakura.ioのポータル上で予め設定したWeb Soketにニアリアルタイムに表示されるう情報を確認。

ArduinoIDEの情報と並べて見ていても、ほぼリアルタイムでJSONデータが来ているのが分かります。

f:id:rupic:20190217015306p:plain

 

最後に、Stream AnalyticsのJobを再生してBlob内にデータが蓄積されている事を確認します。

データを良く見ると、Sakura.ioポータルに表示されている情報とAzureStrageの情報が違う事が分かります。

f:id:rupic:20190217015311p:plain

Sakura.ioで取得して送っている情報に追加情報を付け加えて保存しているからなのです。

f:id:rupic:20190217020119p:plain

 

まとめ

ここまでで今回のハンズオンは終わりだったのですが、データを確認するのに、Azure Data Exprolerを使用すると簡単に内容をチェックする事も可能ですね。あとPower BIを使ってグラフィカルにデータを表示してあげる事も良いですね!

正直、こう言う電子工作系は苦手意識が強すぎて、今まで触ってこなかったのだけど、こんなに簡単に設定〜センサー組み付け〜データのやりとりが実現出来るとは思いませんでした。

 

少しづつだけどこれから勉強していこう😊 

 

ラズパイ買ってみた😋

こんにちは。

月曜のお昼からこんなのんびり作業できるなんて良いですね😂

 

というのも、先週金曜からインフルにかかってしまって会社の規定で”インフルと診断された日から5日かつ解熱してから2日は出勤不可”という決まりがありまして、会社から治るまで来んなよwと言われてます。自身の年休使ってですけどねw

rupic.hatenablog.com

 

という訳で、せっかく年休溶かしてまで休めるならと何か有意義な事に時間を使いたいと思い、前々から気になっていた”Raspberry Pi model B+”をAmazonでポチりました。 

 まさかのタイムセールで昨日まで9,900円だったのに8,490円になってますね😿

 

到着〜開封の儀

さて、昨日注文したばかりなのに、流石Amazonさん。

もう届きましたよ。

f:id:rupic:20190204115142j:plain

早速開封していきましょう😆

 

f:id:rupic:20190204124554p:plain

キットの中身はこんな感じ!

  • Raspberry Pi3本体
  • 本体ケース
  • 日本語の取説
  • Micro SDHC(SanDisk32G)
  • SDアダプター(Type-C)
  • HDMIケーブル
  • 電源ケーブル(ON/OFFスイッチつき)

僕の様な初心者には優しい全部付きでの提供となっています。

f:id:rupic:20190204115217j:plain

ケースは3分割になるタイプ

f:id:rupic:20190204115213j:plain

ラズパイ本体はなんかずっしりとした重量があって思ってたよりもしっかりと出来てる気がします。

なんかそれっぽくなってきた気がしますね(開けただけだけどw

組み立て

では、組み立てていきましょう😎

PCを自作したりは良くやるのですが、どうしても電子工作的なやつはトラウマがありまして…

前に会社にあった誰が作ったかわからない自作基盤が故障した時に、良く分からないけどマイクロチップ?的なやつを抜き差しして爆発させた事があったり…ハンダ付けしてたらうっかり別の回路とくっ付けて煙が出てきたり…(

 

まぁ過去の話をしてても仕方ないので、とにかく慎重にくっ付けていきましょう!

f:id:rupic:20190204174457j:plain

基盤をケースの一番下の台座部に取り付けます。

この時、真上から押し込むと壊れますので、爪の下に基盤を潜り込ませる様にしましょう。(はじめ無理やりやって壊れそうになりました

f:id:rupic:20190204174504j:plain f:id:rupic:20190204174508j:plain

次にヒートシンクと何やらラズパイのマークの入ったエンブレムの様な物がありますね。ヒートシンクは裏が両面テープになっているのでCPUに貼り付けましょう。

f:id:rupic:20190204174512j:plain

まぁこんな感じですね。

ヒートシンクを取り付けたら後はケースを上から取り付けましょう。

f:id:rupic:20190204174516j:plain

取り付けが少し硬くて壊れないかとヒヤヒヤしながら慎重にはめていきます。

それぞれのコネクタにアクセスしやすい様にケースに各部位の名前が書いていてとても親切ですね😀

後は上蓋を付けて完成です!!

f:id:rupic:20190204174520j:plain

はい、余りましたよ。部品がw

っていうか何の部品なんだろうとggって見たらどうやらCPUの裏っ側に黒いチップ的なやつがあってそこに貼り付けるのが正解そう。(本当のところは分からないけど

f:id:rupic:20190204174529j:plain

こんな感じw

完成

まぁパーツも少ないし楽勝でしたね(震

 

f:id:rupic:20190204174541j:plain

MicroUSBは給電、画面出力用のHDMI、オーディオ用のピンジャック

f:id:rupic:20190204174536j:plain

有線LAN、USB*4ポート!!

f:id:rupic:20190204174545j:plain

MicroUSBスロット 

セットアップ

今回はスターターキットで購入の為、OSはすでにSDカードの中に入ってましたw

本来なら以下のサイトからOSを取得してSDに格納してあげないといけないですね。

www.raspberrypi.org

 

とりあえず電源をONにしてみるとOSを選択出来る画面に。

f:id:rupic:20190204194551j:plain

中にはWindows10 IoT Coreが入ってますね!!

UWP実行に特化した組み込みコンピューター向けのOSです。

docs.microsoft.com

 

今回は推奨表示のある”Raspbian”というOSをいれてみます。

f:id:rupic:20190204194547j:plain

インストールの時間が死ぬほど長いwwww

体調が本調子ではないのでうっかり昼寝しちゃいましたよw

f:id:rupic:20190204194555j:plain

起きてから画面を見てみるとWelcome状態でしたm(_ _)m

とりあえずWiFiロケールの設定をした後にリブートしてあげると普通のデスクトップPCの出来上がりです!!!

f:id:rupic:20190204194600j:plain

まとめ

 Raspberry Piを初めて触ってみましたが本当に簡単に組立→セットアップまでできるので、小学生くらいのお子さんとなら一緒に作ってみる事も可能だと思います。(今度、うちの息子にも買ってあげよう)

他にも色々な工作キットやセンサーキットも売ってるみたいなので気になりどころですね!!

 

明日は、ラズパイを使って出来る事を調べてエッジデバイスとしてラズパイを使ってみようかと思います。

 

インフルはじめました

昨日からめっちゃしんどいと思って熱計ったら39.9度。

時期も時期だしもしかしてと思い病院に行ったら、インフルエンザA型と診断されました(´•ω•̥`)

 

病院の先生にタミフルにするか、ゾフルーザにするか聞かれ、迷わずゾフルーザを選択!

1日でしっかり熱は下がったものの身体中が痛い😣

 

念の為、家族に伝染らないように別の部屋に隔離されてたのですが…

時すでに遅し。

嫁、長女、次女は既にインフルエンザにww

この時期は本当に気をつけないと自分だけでなく周りにも迷惑掛けてしまうので申し訳ない感じですね(><)

 

とりあえず会社は治るまで来るなって感じだしのんびり休養です。

皆様お気をつけて…

 

f:id:rupic:20190203004208j:image