仕事の備忘録

IT系技術とか、カスタマーサービスとか

UdemyでReactの勉強をしてる

前月よりReactの勉強継続中である。別の仕事も運用も家事もしながらで、なんといってもHTML5開発自体が初めてな状況、結構きつい。来月からの設計開発開始で既にAWSで構築するインフラ周りはむっちゃすごいエンジニア達がいて、すべてお願いして終わってしまったので顧客対応とか開発とか体張る覚悟まではしてみた。

ということでReact。採用理由は会社の諸事情で別システムとの連携を今後考慮する必要があり、そちらに移植を考えてのこと。別システムの方にレクチャーは受けられても自分が理解しないと開発はできない。レクチャーではReact本家のHandOnでの勉強を進められたが、英語の理解とReactの理解を一緒には無理な語学力の為、日本語での即戦力が欲しかった。そこで日本語のオンライン講習探してを買ってみた。まだ7割しか終わってないが結構役立っているので紹介をしておく。

買ったサービスはudemy。ゆーでみーと読む。世界展開しているサービスですが日本語版はベネッセが主管。

www.udemy.com

オンライン学習はほかにも色々あるが、React+Reduxまで扱っているコースがUdemyが充実していたのが理由。Progateとかドットインストールとか周りで評判よかったので使ってみたかったけど今回は断念。かつその時最大92%オフで、個人で買いやすかった。今見たらまだセール中な模様。下はReactで検索した結果のコース一覧。英語コースも一緒に出てくる。

f:id:testedquality:20180825230327p:plain

2本購入。1本はCodeSandboxという別サービスを使ってクライアントでのReact開発環境構築なしで勉強できるもの。ブラウザとネットがあれば講習を受けられるため、子供と一緒に漫画喫茶に行ってなど夏休み中助かった。またこちらはテキストですべての講習を公開していることもあり動画が見れない開発時などにも、勉強しやすかった。動画が禁止されているとかの人も大丈夫である。

www.udemy.com

もう一つはクライアント環境の作り方からすべて動画で提供。APIを使ったアプリケーションをシーケンス図などを使って業務的な観点での講習。クライアント環境の作り方を学べるのがありがたい。

www.udemy.com

勉強の成果は来週からのプロトタイプ作成からだ。週末で残りを終わらせて100%完了にしたいもんだ。全く何もできてないのだが自分を追い込むためにここに書いておく。

はてなブログhttps化完了。そして仕事で勉強すること

はてなのhttps化は無事に完了した。全3ブログをすべて実施。いまのところ5年前から行っている水産高校応援ブログでも苦情は来てないので何とかなっている模様。すでに25日よりChromeが予告通りの警告表示を開始しているため、間に合ってよかったと思っている。

internet.watch.impress.co.jp

さて、6月にボットを公開してから、仕事の勉強が大量に発生してLINE bot化に着手できてない。数年ぶりのフロントエンド&バックエンドの新規開発担当となったのだ。人手がないため優秀な方々がフルスタックな活躍をしているので、せめて足を引っ張らないように自分ができるところを広げるためには勉強しかない。

というと「偉いねー、私にはできない」と言われることがある。部署の方針で現業と平行、かつ家事のワンオペは続いているため残業は最低限となれば家や昼休みしか勉強する時間は取れないし、最新技術を常に見るべき仕事であるのでプライベートときっちり分けられるものでもないと考えるが、「私にはできない」というのは「あなたはおかしい」が割と含まれていることが多いのがつらい。

 

ということで現在Reactの勉強をオンラインとKindleで実施中。

reactjs.org

ReactはFacebook、Instagramが提供するJavaScript開発技術。フロントエンド開発向け。公式のチュートリアルがよいと別プロジェクトでReactを利用した会社の若者たちにいわれたものの、実際にやると概要が見えづらい(実は日本語訳があると先ほど知ったので後悔している)

React 0.13 日本語リファレンス | js STUDIO

本もあるのだがまだ全般発展中なので、若者曰く本通りに動かないことが多々ありストレスがたまるらしい。そこでKindleの電子書籍でアップデートがあるものを数冊購入して読んだ。しかしWindows版KindleをPCで開き、掲載ソースを動かすためコピーしようとしたら、コピー防止のためか不要な半角がソースコード全般に追加される極悪仕様でかえってストレスがたまることになった。

非常に悩んでいたところ、Twitter経由で90%オフの広告を出していたオンライン勉強サイトUdemyを数日前に知り、割引になっていて評判がよかったReactの有料セミナーを2つ買ってみた。オンラインドキュメントと動画とオンラインテキストの3種類。テキストがあれば動画をみなくてもよい親切設計で、会社でも勧めることができている。

www.udemy.com

セミナー7時間を想定しているようなので、終了したら評価を書きたいと思う。全部自腹で買ったし!

Web App Bot でSkype公開申請向けの修正を実施する その2

QnA Maker を使ったボットがSkypeからRejectされた。その修正対応の続きを書く。

testedquality-tech.hatenadiary.jp

先に結論からいうと正式にSkypeボットとして認証を得た状態で公開できた。以下の説明よりボットを見てもらったほうが早いかもしれない。単純に水産高校&商船専門高等学校を探すボットだ。インストール先は以下に掲載した。

botsuisangogo.hatenablog.jp

続きを読む

https化道半ば

Chromeがhttps以外のURLを警告出すように変更されることもあり、思い切ってはてなブログのhttps化を始めた。まずはこの技術ブログを実施。こちらはもともとhttpsをリンク先に極力選んでいたこともあり問題なさそうだ。

一方数年前から実施している水産高校ブログは、リンク先がhttpしかないものも多い。変更は当面難しいかもしれないがどこかで行う必要はあるだろう。

 

Web App Bot でSkype公開申請向けの修正を実施する その1

前回RejectされたSkype側からの指摘点修正を実施する。再度内容を確認。

f:id:testedquality:20180530220003p:plain

訳すとこのような意味と認識した。

  1. 非黒と非白の背景色を持つボットのアバターのイメージにすること。
  2. ユーザーが連絡先としてボットを追加すると、ボットは自動的にウェルカムメッセージを表示する必要があります。これにより、ユーザーエンゲージメントが向上し、ユーザーへ正しくガイドできます。
  3. 不明なコマンドの受信時にヘルプ画面を表示します。

1.はアイコンを全般色を変えるかデザインを変える必要がある。

2.についてはBot Framework の初期動作では返答しないので全く気付いてなかった点。これの修正を実施する。できればFrameworkを変えてほしい(pull request しろということだろうが)

3.はヘルプメッセージというか使い方の説明はしていたのだが、改めてヘルプページを作成する。

 

それぞれ対応を実施した。

1.は最近話題のおすすめデザインを提案するPowerPointを使ってみることに。元の

f:id:testedquality:20180602223817p:plain

 をアイコンに入る様にレイアウト変更ののち、パワポに貼ってみた。色々提案してくれたのから色味とかアイコンを使って以下のようなアイコンを作成。

f:id:testedquality:20180602224312p:plain

2.は1日難航。実はAzure Bot Service で提供される QnA Maker 向けテンプレートはそのまま利用するとユーザが何か入力するまで待機する仕様になっている。もともと詳しくソースを見ていなかったので、何をどうしたらよいものかわからないので、一日Bot Framework のSDKを見て対応策を考えることになった。ドキュメントの中で以下の記述をみつけて愚痴ったりした。

最終的に単純にActivityTypes.ConversationUpdateの値が取れたら挨拶用のテキストをセットして、メッセージを受け取ったように見せかけた。

f:id:testedquality:20180602225150p:plain

3.はヘルプページを作成。はてなブログデフォルトでは日付番号になるため、エイリアス名をわかりやすくした。まだ機能がほぼないので書くのが恥ずかしかった。

https://botsuisangogo.hatenablog.jp/entry/help

 

ここまで準備して最終的に1.のアイコンを登録して最終確認をしようとした。が、今日完成しなかった。

f:id:testedquality:20180602225408p:plain

ボットプロファイルのアイコンをSkypeのアイコンとして利用するため、先ほどのアイコンをアップロードしようとしたが、画面を閉じて戻ってくると元のアイコンに戻ってしまうのだ。どうやらアップロードがエラーになっている模様。

f:id:testedquality:20180602225854p:plain

理由が全く分からないので、対応しようがない・・・もう少し調べることが必要そうだ。再申請はもう少しかかるかもしれない。

ボットの公開申請をしてRejectされる

前回で自分で使うボットを作った。が、目的は公開でもあるため機能追加より先に安心して公開できるのを優先することにした。Skypeは100人以上利用する場合レビューを受けて公開の許可を得る必要がある。得ない場合、検索メニューから名称検索で出てこない状態となる。(今回名称表示しているので検索してもらうとわかる)

 ということで、よく分からないままAzureのチャネルメニューを確認すると「公開」というメニューがある。

f:id:testedquality:20180530213309p:plain

公開時の設定画面があるので一通り設定してみた。ちなみに後で後悔することになるのであるが「レビューガイドライン」のリンクをクリックせずに入力した。ここでプライバシーポリシー&使用条件についてのページが必要なため、はてなブログを一つ専用に作って対応することにした。メールアドレスも専用のアドレスを作って対応する。

個人情報に当たるものは取得しないし会話ログも取得しないが、ポリシーはきちんと提示する。今後デバッグ時に不明になった文言を取得するなども考えられるからだ。(画像で値が入ってない箇所もすべて値を入れた)

f:id:testedquality:20180530213417p:plain

f:id:testedquality:20180530213510p:plain

f:id:testedquality:20180530214408p:plain

最後のボタンをクリックすると、ボタンが上記のように「送信しました」に変更される。初めてのレビューだ。

そして翌日自分が舞い上がっていたことを気づいた。「レビューガイドライン」のリンクをみつけクリックしたら以下の文章がでてきた。ちなみに※以下は読んだ感想。 

https://github.com/Microsoft/skype-dev-bots/blob/master/certification/CHECKLIST.md

Number Requirement Notes
100 Bot Profile Information  
101 Bot Name and Publisher Name

Your bot needs to have a clear and descriptive Bot Name and Publisher Name. Do not suffix ‘Bot’ to your bot name unless it is unavoidable and use spacing. E.g.: FooBot should ideally be Foo, or if unavoidable, Foo Bot.

『Bot という名前を付けるな。つけるならブランク入れなさい。』といわれたのでいま名付けている『botsuisangogo』は『Bot Suisangogo』とかに変更しないとダメそう。

102 Privacy Policy and Terms of Use documents published online and referenced by the bot

Your bot must have links to a valid Privacy Policy and Terms of Use.

プライバシーポリシー&使用規約のはてなブログあり。

103 Bot avatar image with non-black and non-white background color

Your bot must have an avatar image. You must not use the standard bot framework avatar. You must not infringe any copyrighted images.

※ここでのアバターは、アイコンを指している?文字アイコン作成。カタカタだとダメか?<白ではなくクリームにした/span>

 

104 Bot description explains the purpose of the bot

Your bot must have a clear and comprehensive description to help users understand its purpose.

※目的は書いていて、県名高校名からしか検索できない点は記載済み

200 Bot Functionality  
201 Automatically display a Welcome message

When a user adds the bot as a contact, the bot must automatically display a welcome message. This increases user engagement and guides the user to success.

※挨拶を表示する。これ対応できてない。いまメッセージがなんらか送られない限りメッセージ送信しない。Bot Framework そのまま使ってたらダメだ。

202 Display a Help screen when receiving unknown commands

Whenever a user sends any message / command to the bot that the bot doesn’t understand, the bot must respond with a help message, providing usage guidance.

※わからない文字の場合には必ず使い方をメッセージとして返信しているのでここは大丈夫か。

 

203 Bot functionality works correctly

Your bot must function correctly. Bots with obvious broken functionality will be rejected and / or removed from the directory.

※正しく動いているはず。こう書かれると心配になる。

204 Bot must be fast

The bot must respond to user commands without extensive delays.

※遅延する要素はないけど、region が米国中部なのはバグ回避で全部同一 region じゃないと新規作成できなかったのだ。せめてアジア系で作成したかった。

205 Bot must be mobile-friendly

The bot must be designed in a way that enables users to be able to interact with it on a mobile device. For example, the bot should not send excessively long individual messages (instead it can send a sequence of several messages). To ensure the bot is mobile friendly, please test on a mobile device (Android or iOS) with the latest versions of Skype.

※これは大丈夫なはず。Andriodでテストは済ませた。

300 Compliance  
301 Your Bot Submission must PASS Azure Online Service Terms See Azure Online Service Terms
302 Your Bot Submission must PASS Microsoft Channel Publication Terms See Microsoft Channel Publication Terms

 

正直速攻修正したくなったが、レビューを受けている最中に変更されたらもっと失礼に当たるので恥ずかしい気持ちを堪え数日。見事に「拒否」の返答がAzure Portal に戻ってきた。(ちなみに申請中になると「InReview」となる)

f:id:testedquality:20180530220907p:plain

詳細メッセージが確認できるので反省していた点と一致するか確認。

f:id:testedquality:20180530220003p:plain

想定していたことと違うのは

  1. アイコンの白い背景への修正
  2. 不明な時にヘルプへのリンクが必要(ヘルプページを作成するか・・・)

あとポイントは先に挨拶する点。これはBot Framework のデフォルト仕様部分を変更しないとできない。ということできちんと仕様書を読めという反省で修正に入る。

de:code 2018 参加記録

2018/5/29追記  Women in Technology での登壇者名が誤っておりました。松本さん→大森彩子さんです!大変失礼いたしました! そして指摘していただいたhayashih さんありがとうございました!

 

de:code2018の参加記録を書く。昨年は申し込み記入中に満員になるという悲劇が起きたが今年は無事参観。このブログでは詳細に記載したいもののみ書いておく。

★基調講演

すでにWeb記事が多数出ているが、先月の米国MSで開催されたbuild 2018の内容を基にした3時間にわたるものだった。出来れば配信されているので見てほしい。

microsoft-japan-events.azurewebsites.net

以下が全体まとめとして詳しかったので紹介する。

sy0690.hateblo.jp

基調講演終わった最初の感想は「マイクロソフトの当たり前はレベルが高い」であった。単純にかっこよかった。女性をずらっと並べても別に特別でもない。例年通りの最高レベルのスムースな基調講演を見ることができた。つまりマイクロソフトにとって女性が仕事することは普通だということで、その普通がどれだけ多くの女性にとって難しいことかわかっているからこそ、非常に多くの人に思いが伝わったと思っている。このブログはその伝わっている一例だと思う。

hayashih.hateblo.jp

毎年マイクロソフト社のダイバーシティセッションであるWomen In Technology はランチ時間の開催を行っているが、今年は加えてオープン会場でのトーク形式でも開催された。2日目参加した際には千代田まどかさん大森彩子さんが登壇されていた。そこで聞いたところによると基調講演は1週間前にしか指名が来ないとのこと。さらに台本は数日前で当日深夜0:30からのリハーサルが普通に招集されたとのこと。皆さんタフでかっこいいのであった。

★セッション

今回はあまりセッションに参加できなかった。特にCognitive ServisesとかBot系は満室が多かった。皆業務適用を狙っている時期か?そこで個人的興味に切り替えて以下参加したセッションの感想を記載。

Windows Mixed Reality ヘッドセットを使ったビジネスアプリ開発

自宅でちょこちょこ自習しているので参加。ビジネス適用を積極的に行っている人たちが一定数いて数年後を見据えて手がけていることが分かった。

開発者におくる Power BI を使う時に考えるべきアーキテクチャ ~ データを溜めるのは誰だ? ~

Power BI の画面にアンケートから回答するとリアルタイムで表示されるデモで、会場全体が参加者となった。機能の使い分けについて表で解説などがあり、実利用しやすい資料だった。早く公開されたものが読みたい。できれば週末のこちらに参加がいいと思う。

 SQL Server 管理者におくる SQL Server on Linux Tips

最初に資料のQRコードを写真撮影するように案内があった。これで写真を途中でとる人はいなかったはず。Linux版 SQL Server は基本Windows 版と同じということを言われているが、それが本当であることの解説が最初にあり、そのうえで差分がどこかを説明してくれた。毎回この方のセッションはよくできてるなあと感動する。ただ思った以上に参加者が少なく驚いた。SQL Server に興味がある会社が減っている?弊社も新しいバージョンを使うパターンは少ないが。こんなに面白いDBなのになあと思ったが積極的に宣伝はしてもらいたい所存。

Mixed Reality フリートーク&QA ~なんでも聞いて、答えます~ [AC18 と同一内容]

http://hololab.co.jp/

実は今月UnityのイベントUniteにも少しだけ参加、トヨタ自動車さんのHoloLens事例セッションを聴講した(セッション内容非公開で資料なし)その際プレゼンターの室長さんが「自分からいろいろ試して部下にやらせたのです」というお話をされていた。

「VRやMRでカイゼン」、トヨタが活用事例を紹介 | 日経 xTECH(クロステック)

当日のデモも面白かった。でもプレゼンされてた室長自身でHoloLens使って企画して開発させているとの話が一番印象的でした。上が技術を理解して現場が必要なものを皆でつくる。ビジョン共有が完璧。

2018/05/17 12:27

ただこの記事にもそのセリフはなく資料もないため、私の勘違いかもと思いブログを書くのをやめていた。今回、セッションはフリートークで、かつ前日にかなりの「ガチ勢」と呼ばれる熱心な開発者が参加した反動らしく非常に人数が少なかった。回答者が6名で受講者もそれくらいだったおかげで、自分が数か月WinMR利用&開発での疑問などを質問することができて幸運だった。ちなみに上記トヨタの事例はやはり室長さんが自前でHoloLens買って、実際に部下や上層部に体験させて開発を進めたのだそうだ。業務で利用されている方は数年後を見越して、本格活用前に適用できるところから実施しているとのこと。そして日本は世界に負けないくらい事例も多く、かつ現場が必要として利用しているとの話がホロラボ中村さんから説明があった。皆さん導入には「実際に試してもらって納得させるしかない。そのためには自分で作るか依頼するか」と言われていたので、ここは、自分で開発して認めさせるしかいないとケツイした。

EXPO会場とHoloLens体験

HoloLens体験コーナーでは2つのアプリを体験できた。一つは

f:id:testedquality:20180522141559j:plain

船舶の自動航行システムでニュースになっていたJRCSさん。水産高校を応援している関係で船員さんのツイートを集めているのだが、特に内航船については人手不足&平均年齢60歳といわれる人手不足な業界である。それを陸から航行サポートすることで人手不足解消の一端を担うことを目標とされていた。もともと船内部の自動航行システムを提供している会社さんだ。その高い目標は、自動車の自動運転が見えてきている今、夢ではないと私も思った。本社は山口県は下関で開発の方々の目的がはっきりしており問題解決のためのHoloLens という点が明確だった。

もう一つは体験後に見学していたら親切だったハニカムラボさん。昨年秋にTech Summit でバーチャル洋服体験システムを提供されたが、今回はハニカAIちゃんの出展。こちら結構話題になっていた。

f:id:testedquality:20180523173146j:plain

なんといってもかわいい。このハニカAIちゃんはAIによるサポートを目的としているが、今回はお話をする設定だった。非常に動作が柔らかいのがよかった。あとストーリーがあるのだが、途中のギミックがとても大好きだったのでまた体験したいと思う。こちらはアミューズメント要素もある形であったがHoloLens であることを十二分に生かしてたと思う。

あと会場でPower BI画面が素敵だったのがEBILABさん。業務でかなりPowerBI 作りこんでますがデザインと見せ方が、タブレットで使いやすく作りこまれていて、かつ触って楽しいギミック。ちょっと衝撃だった。業務たくさんやってますが、データだけじゃだめだと本当に反省した。

全体感想

今回運営が例年より良かった。が、会場が多すぎ&参加希望時間が重複しすぎて泣きそうになってたし、人気セッションのあふれ具合が想定以上であきらめる場合も多かった。もう少しセッション数減らしてもらえるとありがたい。じゃないと部屋がこれ以上広げられないと思われる。でも休憩所&電源については満点。

f:id:testedquality:20180522155713j:plain

例年つらかったが今年は最高に良かった。こんな水の眺めを見ながらのぞき見を避けることが可能な机が多数。1Fのわかりづらい場所であったが良かった。それからアプリが毎年着実にバージョンアップされていて、今年初めてアプリだけで丸一日過ごせた。トラブルもなかったし満足している。

 ということで、本当に2日間勉強しっぱなしだったので、早くアウトプットせねば。実は今回参加企業からのデモを使ったサンプルソースコード提供も別途実施されており、それを動かすとボットが作れるものが出ていたりする。早速週末のボットづくりに生かそうと考えている。