vscode の docker 内のvue アプリケーションに localhost:8080 でアクセスできない
発生した問題
npm run dev で立ち上げた vue アプリケーションにアクセスできない。
前提条件
- vscode の devcontainer で立てたdocker 環境を使用
- vue 開発環境の各バージョンは以下の通り。
# vue --version @vue/cli 4.3.1 # npm --version 6.13.4
発生手順
- 以下のコマンドで vue + webpack のテンプレを作成
vue init webpack test
1. 以下のコマンドで環境を立ち上げる
npm run dev
問題
host 側の windows PC 側から google chrome で http://localhost:8080 にアクセスしてもページが表示されない
解決策
以下のように host IPを変更する。 ./config/index.js
host: '0.0.0.0', // can be overwritten by process.env.HOST
問題考察
docker コンテナでexpose しているポートフォワーディング元が 127.0.0.1:8080 になっている。 (docker コマンドで立てた場合、0.0.0.0:8080 となっている) これにより、127.0.0.1以外のIPからの要求はdockerコンテナ内で拾えないのではないか、と思う。
[追記 2020/04/13]
予想通り、vscode のdevcontainerの設定がまずかったみたい。
.devcontainer.json
//"appPort": [8080] "forwardPorts": [8080]
windows 10 Home に WSL2 を導入してDocker を使えるようにしたの巻
やりたいこと
Windows 10 Home に Docker を導入すること。
やりたいことを阻害する(していた)もの
Windows 10 Home では Hyper-Vを使えない → Hyper-V を使えなければDockerが動かない！！！(と思っていた)
実現方式
以下の記事のように、WSL 2 により、Hyper-Vを介さずにDockerを利用できるようになる Docker Desktop for WSL 2 なるもの を開発しているらしい。 よって、 Docker Desktop for WSL 2 を導入すれば Windows 10 Home でも Docker を利用できそう！
https://www.docker.com/blog/docker-desktop-for-windows-home-is-here/
実現手順
以下のページに書いてある通りです。
https://www.docker.com/blog/5-things-docker-desktop-wsl2-tech-preview/
良きかな。
Alexa day 2019
2019/04/06 に神戸で開催された alexa day 2019 に参加してきたので、 拝聴したセッションのメモと感想を記載いたします。
Alexa skill 最新アップデート
スマホとalexa 対応周辺デバイスがBTでつながるようになる。 以下のような構成が可能になるみたい。
www -|wifi|- スマホ -|BT|- 周辺デバイス
echo input スピーカーがスマートスピーカーとなる https://www.amazon.co.jp/Staging-Product-Not-Retail-Sale/dp/B07CH6FQJ7
windows 10 app もある 現状、ハンズフリー対応はNECだけ https://www.microsoft.com/en-us/p/alexa/9n12z3cctcnz?activetab=pivot%3Aoverviewtab
alexa app
echo show が出てきたことにより、 アニメーションやゲームAPPがトレンドになっている
やっぱりAPPのパイオニアはゲームみたい
ボードゲームとalexa スキルを連携させる事例がある →ゲームホストをalexa APP とするのは良いアイデア かるたとか、百人一首などに使えるかも
ヘッドホンなどに搭載されたことで、 位置情報を活用したAPPが出てくることを期待する
車を活用したAPPとか良いかも →車を運転しながらでもできることがあると思う
Automotive Property →APPが車で動作しているかどうかチェックできる
Alexa skill Blueprints
スキルを簡単に作れるサービス https://blueprints.amazon.com/
- カスタムQ&A azure の QnA をVUIに対応させたみたいな感じ。 SKILL呼び出し名がいらない。 →これ使ってヌルポを改良したい
開発者情報
発話プロファイラ 対話モデル(台本)をここにかける。
(例) A「コーヒーをください」 B「砂糖はいりますか？」 A「はい」
インテントチェーン 発話モデルを流用できる
動的エンティティ 表現の揺れを動的に追加できる。 →再ビルドの必要なし 人に合わせた表現を追加できる
交通情報系スキルを事例にみる
ACTORが発話してからAlexaからの応答に間があるのを改善したい。
→lambda が遅いのが原因 →lambda が遅いのは、lambda 利用可能コンテナがない場合にコンテナを新規作成して 利用するため(コールドスタート)
lambda の生成フロー
- ENI生成
- こんてなせいせい
- デプロイパッケージのロード
- デプロイパッケージの展開
- ランタイム起動
- メソッド実行
1～5がコールドスタート
lambda を使うのをやめた
実行時間の差
- | lambda | https ---|---|--- コールドスタート | 3080 | 2090 ウォームスタート| 2000 | 2000
注意点
審査の際、リクエスト要件があるので、 リクエスト要件を満たすようにhttpリクエスト周りを実装する必要あり1
マルチデバイス対応の話
alexa がどこで使われるからないため対応したい。 →alexa のユースケースが変わりつつある →スマホで使用したり →siriみたいな感じで使われる想定？
ユーザスロット数の制限
登録可能スロット数：5万件 全国のバス停：23万件
→足りない！
どうしたか
アカウントリンクしたユーザ情報からお気に入りのバス停を登録してもらい、alexa スキルが呼び出された場合に、お気に入りのバス停情報を 取得するようにする。 userIDとDeviceID からお気に入り情報を抜き出して返す
お気に入り情報がない場合は、お気に入り候補を取得する。
お気に入り候補：自社サーバ
お気に入り情報：DynamoDB
課題
ユーザから情報を取捨選択させるのには、VUIは不向き？
市役所前というバス停はたくさんあるので、ユーザに選ばせるのは、ユーザにストレスを与える
→ユーザにストレスをかけるAPPは使用されない。
echo spot を使用している場合は、画面を用いて 選択式とするのもよいかも。 ただ、VUIではどうしようもない？ →ユーザの位置情報から、周辺の 2、3の例を挙げてみるのもよいかも。
あとは、何県にあるかをユーザに質問してみるとか？？
スマートスピーカーで提供する料理体験
まずはVUIについての一般的な話
長所
短所
- 音声(口頭)のみでコミュニケーションするのって難しいよね 人間同士も何か見ながら会話するし
- シナリオの設計次第では、従来の外部インターフェースを利用したほうが早い
そもそも音声データは処理に時間がかかるからもっさりする
1度忘れられると再度使用されるケースは稀。 →今のAPPはパッシブ型が主流。 アクティブ型にできないか、と思った。
クックパッドがやっていること
インプットされた食材から、提案する副菜を提案する機能に特化 →ユーザ - サービス間のインタラクションを大幅に削減 スマホでやるより早い
ユーザに依存する設定をアカウントリンクで対応するのが良いかも →従来の初期セットアップに当たる作業 まあ、ないに越したことはないが、、
登録する単語が多いと、誤認識が多くなる 「大根」と「鯛とコーン」をご認識してしまう！！
→ユースケースの優先度を考慮し、鯛とコーンを単語から削除
→検出が難しい。。。alexa とひたすら話すしかない 誤ご認識に対する品質の確保が課題 → 類似する発音を自動生成した単語の組み合わせパターンから検出するツールとかあれば便利かも →需要あり？
開発スタイル
- alexa ごっこをしてフィードバック →ユーザとalexa 役の人で人通りやってみる
今後
- デモをやっている https://oicy.cookpad.com/
IoTデバイス
スマホ依存を問題視。 電車とか乗ると、みんなスマホいじってるもんね。
VUIの未来
- 声の抑揚まで認識できれば可能性が広がる
システム構成
映像に「車」や「都会」などのタグを追加し、 ユーザからのクエリに引っかかった映像を映す →タグ付けが膨大で大変。
マッチしなかったクエリを監視して、優先度に応じて対応 →「ウユニ塩湖」が「ゆみこ」とご認識されるため、「ゆみこ」と発話されたら、「ウユニ塩湖」を映すなど
UI/UXデザイン
サードパーティ製のAPPはあまり使用されない →再使用されない問題が絡んでそう
サードパーティ製のスキルを使って解剖
JR東
- 発言例を提示するのが良い
食べログ
- ワンショット呼び出し可能で起動が手っ取り早い
- ユーザの目的を手っ取り早くできるようにしたい
yahoo天気予報
- alexa がしゃべる速度を変えられる(SSML)
- 無音状態のときに数回くらい聞き直すしてもよいのではないか
VUI設計の極意
初回と2回目以降の発言内容は変更する 初回は説明ったらしく。 ２回目以降はシンプルに
VUI開発は難しい。 一から作るのが難しい。。。
- 他のAPPのVUIデザインを分析、分解、取り入れるて作ってみる
スマートホームスキル
スマートホームデバイスを使うには
使用するAWSサービス
- AWS Cognito
- AWS IoT core)
- amazon DynamoDB キーバリューのDB。ユーザ情報を管理する
- Amazon IoT Gateway フロントURLを提供してくれるので、サービスをサーバレスにできる
使用するサービスから見るスマートデバイスを使うには
- cognito にユーザ登録
- cognito で認証→IoT core にデバイス情報を投げる
IoT core が デバイス情報を DynamoDBに登録
スマートホームスキルはlambda でしか動かない
- デバイス登録と同様に、発話操作の際もIoT Gatewayを通る
組込みデバイス側
- 通常の組込み開発と難度は変わらない
- AWSからサンプルコードが提供されているので、 サンプルソースを改変しながらの開発
- RTOSにIoTデバイス割込みが入る →タスク設計が必要 →ハイパバイザでAWS依存部を分離したいと思った
- デバイス登録を簡易化するために、組込みデバイス側で httpサーバを立てているらしい
- AWS IoT core shadow ってのが必要らしい。 dev.classmethod.jp
- delta を検知して、device sim 側で状態を変化させている
課題
- セキュリティの障壁高いので、セキュリティ(ネットワーク絡み)に対する知見が薄い組込み プログラマはやりたがらない →ここにビジネスチャンスあり？
-
lambda をウォームスタート起動オンリーにするようなサービスがほしいところ↩
mattermost で新規アカウント
mattermost で Get team Invite Link で メンバを招待すると、 以下のエラー画面が表示される。
All team communication in one place, searchable and accessible anywhere
システムコンソールで以下の設定をしてしまうと、上記のようなエラー画面が発生する。
よく見ると、上記設定を false とするのは、 AD/LDAP を使用したい場合のみだった。。。 設定の名前だけで判断してしまった。 設定の説明はよく読みましょう。
トラペジウム
長年アイドルに憧れる女子が集めた仲間とアイドルを目指すという内容。
以下、ネタバレ含む。
話の展開としては、あらすじに書いてある通り、序盤は仲間を集める話。
序盤は比較的丁寧に話が展開されるが、連載期間の関係か、次第に話がとびとびになっていく。 また、物語上の出来事に、「これはありえないだろ」というものが目立つ。 というか、ある種誇張した表現だろうか。(ハリウッドザコシショウのような。。。)
一番印象に残ったのは、やはり終盤のメンバが散り散りになる場面。 話の展開の雑さは感じたものの、物語の趣旨を堪能できた。
アイドルは、万人が憧れる職業。しかし、簡単な仕事ではない。 苦しいこともある。通常の職業と同様に、乗り越えなければならない壁がある。 生半可な理由でアイドルになったとしても、続かないし、楽しくない。 アイドルにも苦労があり、日々、理想のアイドルに向かって精進しているということが伝わってきた。 そして、せっかく自由に職業につける世の中なのだから、成り行きではなく、 自分の意志で好きな職業を見つけてほしいというメッセージも感じた。 これに関して考えてみると、思い切って飛び出してみて、 職業に触れる機会、職業について考えてみる機会を得ることが大事なのかなと思った。 飛びだすことができれば、今の世の中は情報があふれているので、自分に合う職業に出会えるのではないか、と思う。 縁次第であるが。。
というわけで、やりたくて飛び込んだ業界だったけど、 よいことだけではないんだよ、という、現代アイドルの葛藤を感じた。 やっぱ、世の中甘い職業とかないよな。。。
wordpressでアップロードする画像をAWS S3 に保存する
画像を上げ始め、EC2の容量が気になりました。そこで、画像などの容量を食うファイルはAWS S3に保存するようにしました。
手順
wordpressプラグインの導入
以下のプラグインをインストールし、有効化します
- Offload Media
- Amazon Web Service
AWS AMIで AWS S3 へのフルアクセス権限を作成
「図1. アクセス権限作成」 に作成したアクセス権限を示す。AmazonS3FullAccessをアクセス権限として付与している。アクセスIDと秘密アクセス鍵をメモしておく。
Offload Media の設定
wordpress の管理画面の左メニューバーから、 「AWS」→「Offload Media」 を押下し、Offload Mediaの設定画面に入る。すると、wp-config.php への設定を求められるので、AWS AMIで作成したアクセスキーを wp-config.php へ設定する。詳細は、先ほどインストールしたwordpress のプラグイン Offload Media のページを参考にする。
define( 'AS3CF_SETTINGS', serialize( array(
'provider' => 'aws',
'access-key-id' => '************************',
'secret-access-key' => '************************************************',
) ) );
next を押下し、AWS S3バケットの設定画面に遷移する。その後、「Create new bucket」を押下し、AWS S3を作成する。
以下のように、設定したバケットが表示される。
その後、念のため、AWS S3 コンソールで、wp-content/upload が追加されていることを確認します。
うん、できています。
やったことの総括
- wordpress のプラグイン「Amazon Web Service」と「Offload Media Lite」を有効とする
- AWS AMIでAWS S3へのフルアクセス権限のアクセスキーを取得する。
- 2で作成したアクセスキーをwp-config.php のなるべく先頭に挿入する
- wordpress 上で Offload Media の設定画面で、バケットを作成し、バケットを設定する
