AWSの話題を中心に、日々の業務やプログラミングの徒然を綴るエンジニアブログです。

HANDS LAB

HANDS LAB ENGINEERS BLOG

ハンズラボエンジニアブログ

FlaskのAjax通信でつまずいた話

Pocket

こんにちは2018年度新卒の清水です!
新人研修でHTML, CSS, JavaScriptを使いwebアプリを作っています。
私はフロントをあまり書いてこなかったので心機一転して学習しています。
ちなみに、学生のときサーバサイドをやってました(JavaとPythonはよく書いてました)。

やりたいこと

  • ブラウザをリフレッシュしてもデータが残るようにしたい
  • ローカルストレージはデータ構造が複雑になりそうなのでRDBでやりたい
  • サーバサイドを書きたい(できればPython)

 

方針

  • Ajax通信を使いロード時にデータを取得
  • RDBはMySQLを使用 理由:以前よく使っていた、SQL書きたい
  • サーバサイドはPythonのflaskを使用 理由:APIを作ったことがある

 

コード

Python

バージョンは3.6.5です
flaskをインストールします

MySQLからデータを取得するところは省きます

とりあえず curlコマンドでjsonが取得できるかテストします

ちゃんと取れました

HTML JavaScript

HTML

JavaScript

ボタンが押されたらajax通信をしてjsonを取得します
見た目はこのように

いざ実行

Chromeのデベロッパーツールを使用してテストを見ていきます
おや?エラーを吐きました

翻訳すると

なんだかよくわかりませんね

Access-Control-Allow-Origin + flask でググっていると以下のサイトを見つけました
Javascript – No ‘Access-Control-Allow-Origin’ header is present on the requested resource

どうやらPython3系以降は pip install flask-corsでflask-corsを使用して解決するそうです。
私はpip3 install flask-corsで入れました。

いざ実行(二度目)

解決していない…なぜだ

前記したサイトにはPython2系の解決法も記載されていたのでこちらもテスト

いざ実行(三度目の正直)

ついに成功!
なぜPython2系の解決法で成功したのかは不明

結局何が問題だったの?

  • Access-Control-Allow-Originがサーバ側で許可されないないのが問題だった
  • Access-Control-Allow-Origin', '*'を設定することにより、任意のドメインがサイト間でアクセスできるようになる

だんだん調べて行くとSame-Origin Policy(同一生成元ポリシー)やCORS(Cross-Origin Resource Sharing)制限などのネットワーク用語が出てきたので理解できるよう努力していきたいと思っています。

Pocket

技術書典4に参加しました

Pocket

こんにちは、無事新卒2年目になりました谷津です。

先日、#pj_publishというサークル名で4/22(日)は秋葉原UDXにて社内の有志で技術書典4に参加していました。私はFPGAのことについて執筆させてもらいました。実はAWS F1インスタンスを使った内容になっています。

お品書きはこんな感じでした。

非公式だけど、公式のTwitterもツイートしてくれています。宣伝ありがとうございます。

執筆環境について

特に今回は統一をしていたわけではありませんが
私は、markdownとprhプラグイン、VSCodeのvscode-markdown-pdfを用いて執筆しました。
次回は流行りのRe:VIEWプラグインを使ってみようかなと思っています。

結果

結果として50部ほど売れました。めでたい🎉
今回は合計6000人超えの来場だったそうですね。すごい。
手に取っていただいた皆さん、運営の皆さんありがとうございました。

改善点など

  • 内容のベクトルが全部違うのでオムニバス形式よりも個別にしたほうが良いかも
  • シフト制にしたほうがいい(思ったよりつらい)
  • 直前にどうしてもバタバタしてしまう
  • 次回は執筆者が増えそうなので方針を考える必要があるかも

…などなどたくさんの意見が出ました。カイゼンの余地ありですね💪

おわりに

また次回も出せたらいいね〜という話になりました。やっていき!

ハンズラボでは技術書典に興味のあるエンジニアを募集しています。

Pocket

【Alexa】非エンジニアにもできるスキル開発!Storyline続報!

Pocket

こんにちは、無事に新年度を迎えました松本です。

amazon echoシリーズ、一般販売が開始されましたね!
弊社でも、まだなかったecho plusを購入してみました!

開封の儀・・・!


わー、届いた


おぉ・・・なるほどplus、「dotとは一味違うぜ」と言いたげな顔をしている


plus、具体的にdotやecho無印と何が違うのかというと、最大の特徴としてはスマートホームハブ機能を備えている点があげられます。
dotやecho無印は、例えばPhilips HueのライトをAlexaでON/OFFするためにWifiからライト用の無線へ中継する「ブリッジ」が必要になるのですが、
plusはこのブリッジの機能が内臓されているので、追加でブリッジを購入しなくていいんです。


ちょっと後ろの配線が恥ずかしいですが・・・
自席に開発用に置いているechoたちが増えて、賑やかになってきました!
それぞれ形が違うので、集めるのがつい楽しくなってしまいますね。

Storylineがついに日本語スキルに対応!

さて、以前エンジニアブログでもご紹介させていただいた、プログラミング不要で、
直感的にスキル開発ができるStolylineが、URLから生まれ変わる大幅なアップデートを
2月に行っていました。

新URL:https://getstoryline.com/

そしてなんと日本語スキルに対応!

大変丁寧なHowTo記事がすでにあるので、Storylineを使ったカスタムスキルの作り方については
割愛させていただき、フラッシュニュースブリーフィングスキルの方を見てみたいと思います。

参考)Storylineを使ったカスタムスキルの作り方

簡単にAlexaスキルが作れると噂の「Storyline」でスキル開発~公開申請まで実際にやってみた
コーディングなしでサクッとAlexaスキルを作成できるサービス「Storyline」を試してみた

Storylineでフラッシュブリーフィングスキルを作ってみた


↑「New Skill」を押して


↑「New flash briefing」を選択


↑Amazon Developerに登録しているメールアドレスでサインイン
 今回は日本語スキルなのでAmazon.co.jpに紐付くアカウントであるか注意!


↑ここで「Japanese」をチェックするのを忘れずに!


↑「Add post」で今日のニュースを追加してみましょう!


↑入力項目はこんな感じ


↑「Post Type」にテキストと音声と映像がありますね。Spotがあれば映像も活躍するかも?


↑これで「Save」してみます


↑開発者コンソールを見るとちゃんとスキルが追加されてます!


↑デプロイされた内容。ジャンルが自動的にエンタメになるんですね


↑アイコンまで自動でセットされてます
 公開情報はセットされていないのでスキルをリリースする際には、
 そこだけ開発者コンソールで入力が必要です。
 公開情報入力画面へはStorylineの画面右上の「Publish」からもジャンプできます。

フラッシュブリーフィングスキルは公式で作っても簡単なのでStorylineだとどうなるのかな
と思ったんですが、RSSフィードを設定するのではなく、ニュースをここから直接Postでき、
まるでTwitterみたいにニュースを更新できて面白いかもしれないですね!

公式の仕様だけでなくStorylineのようなAlexa関連サービスも日々変わっていて
スピード感に目が回りそうですが、なんとかついていきたいと思います!

Pocket

東急ハンズのAlexaスキルに営業時間ご案内機能を追加しました

Pocket

こんにちは、Echoの招待がようやく届いた松本です。
周りの様子を見ていても徐々に招待メールが来るようになってきている印象ですね。
Echosimやテストシミュレーターもいいんだけど、やっぱり実機で動かす楽しさってあると思うので、早くみんなが手軽に購入できるようになるといいなと思ってます。

新機能リリース!

さて、ハンズラボで開発している東急ハンズのAlexaスキルですが、2月7日に新機能をリリースいたしました!
東急ハンズスキルを有効にしてAlexaに話しかけてみてください。

「アレクサ、ハンズで新宿店の営業時間を調べて」

どうでしょうか、きっと営業時間を答えてくれたと思います!
もちろん「新宿店」だけでなく、お近くの東急ハンズの営業時間も同じようにAlexaがご案内いたします。

東急ハンズの店舗一覧はこちら

営業時間の情報は各店舗のページから取得しています。

Alexaが音声でアナウンスするのは通常営業時間のみですが、営業時間に変更があった場合には
Alexaアプリから確認できる「ホームカード」に表示しますのでそちらも是非ご確認ください。

開発するにあたって

営業時間ご案内機能を開発するにあたり、会話フローを見直し、より自然に呼びかけられるようにサンプル発話の充実を目指しました。

良い会話フローとされる「シンプルな会話」を目指すには、Alexaのセリフをスリムに整える必要があります。
しかし、例えば今回使用している営業時間の変更情報のように、これまで管理してきた情報は、画面に表示することを前提にしたものであることが多く、それをどのように会話フローに組み込むのかは創意工夫が求められるポイントになると思われます。

営業時間ご案内機能の場合は、音声による情報は通常営業時間についてのみに絞り、それ以外はホームカード表示という視覚情報を補助として用いました。
画面付きのEcho Spot、Echo Showが今後登場することも考えるとホームカードは非常に有効な手段ではありますが、音声のみのアナウンスでどこまでスマートに情報伝達できるかも挑戦していきたいですね。

また、サンプル発話の登録について、Amazonは「1インテント当たりのサンプル発話数は30個以上を目安」としています。
「渋谷店まだやってる?」などの、キーワードとなる「営業時間」を含まない、より自然な発話にも対応できるよう、これまで以上に数を増やし、現時点で46個のサンプル発話を登録しました。
一部の表記揺れはAlexa側で吸収して処理してくれますが、日々進化途中ということもあり、処理してもらえるかどうかは一つ一つ試してみなければわからない状態です。

営業時間ご案内機能では、インテント呼び出し時のユーザーの発話に店舗名があってもなくても処理できるように、店舗名の指定がなければ、「どちらの店舗の営業時間を調べますか?」と確認するようになっています。
そこでサンプル発話に、例えば「<店舗名>の営業時間を調べて」と「店舗の営業時間を調べて」という発話にも対応できるように登録を行いました。

しかし実機で「店舗の営業時間を調べて」という発話をテストしたところ、何度呼びかけてもAlexaの認識では「テンポの営業時間を調べて」と変換され、存在しない「テンポ」という名前の店舗の営業時間を調べようとしてしまって、思った通りに動作しないことがわかりました。
現在はさらに「テンポの営業時間」というサンプル発話を登録することで「店舗」が「テンポ」と変換されても店舗名として認識しないように補正しています。

スキル内で実行しているLambda側で補正することも考えましたが、いずれAlexa側の進化で誤変換がなくなる可能性もあるので、今回は手軽にサンプル発話で補正しています。
どちらで補正するかはその都度考慮していく必要があるだろうと考えています。

2/14に自由な検索ワードを受け取れる機能が発表されたり、Alexaはまだまだ進化中!
ハンズラボもVUXとはどういうものなのか試行錯誤しながら一緒に進化していきたいと思います。

Pocket

ハンズラボの書籍購入補助制度について

Pocket

こんにちは、POSチームの人見です。
2月で晴れて入社1年になりました。
もうベテラン社員ですので、ハンズラボのことは何でも聞いてください。

 

ところで皆さん、本屋は好きですか??
私はアマゾンで本を探すことが多くなりましたが、
やっぱり本屋が好きなので、
外に出かけると必ず本屋に寄ってぶらぶらします。

 

本屋さんを歩いてると欲しい本がたくさん見つかるんですけど、
やっぱり気になるのはお値段。
特に技術書だと結構高いんですよね。
そんな悩めるあなたに、
ハンズラボの書籍購入補助制度を紹介したいと思います。

 

その名の通り、自由に本を買って良い制度です。
感想文や申請などは必要なく、制限もありません。
本屋で気になる本を見つけたら、すぐ買って読むことができます。

 

浮いたお金で

お気に入りのカフェに入って、
コーヒーの香りを楽しみながら、
買ったばかりの本をゆっくり読む

という最高に贅沢な時間を過ごすことができます。

 

そんな優雅な社員がいるかは置いといて、
ハンズラボの本棚を覗いてみました。

 

ぐちゃぐちゃに見えるのは今日たまたまです。

 

WEB+DB PRESSはもちろん購読しています。

他にも有名な技術書はだいたい揃ってると思います。

 

あとはこんな本も、、、

みんな大好きダーリンは外国人。

 

これは私が入社してすぐくらいにこっそり買いました。

 

気になる。。。
置かれた経緯とか考えるとある意味文学ですね。

 

ストレングスファインダーもありました。
Web上でテストを受けると、自分の5つの強みがわかるやつです。
ちなみに私は強い順から
戦略性、未来志向、最上志向、ポジティブ、達成欲
でした。
みんなでやるとめちゃくちゃ盛り上がるのでおすすめです。

 

 

 

えー、まだまだありますがまたの機会に。
ぜひ会社見学にいらしてください。

ということで、今回はハンズラボの社員は好きな本が買えて、
しかも優雅にカフェで読んでいたりしてるかもしれないという話でした。

 

最後に個人的に面白かった本を書いて終わろうかなと思います。

ビジネス系だと絶対外せないのはこれです。

ゼロ・トゥ・ワン 君はゼロから何を生み出せるか

本当に何回読んでもおもしろいです。

 

そしてグーグル

How Google Works (ハウ・グーグル・ワークス) ―私たちの働き方とマネジメント
ワーク・ルールズ!―君の生き方とリーダーシップを変える

ここまで突き詰めて会社について考えられるのはさすがグーグル。

 

 

もちろん我らがピクサーも

ピクサー流 創造するちから――小さな可能性から、大きな価値を生み出す方法

アメリカのピクサー本社に遊びに行きたい方はハンズラボに入社するのが近道です。

 

 

ものすごく良い話がたくさん載ってる本。

僕が電通を辞める日に絶対伝えたかった79の仕事の話

新卒研修これ一冊でいいんじゃないかな?だめかな??

 

 

小説だと

まず映画好きなハンズラボの人におすすめな本
キネマの神様

これもおすすめ、ピアニストの話です。
蜜蜂と遠雷

私クラシック音楽知らないんですけど、頭の中に音楽が流れてきました。

もっと恩田陸さんの不思議な世界観を味わいたいなら

麦の海に沈む果実 (講談社文庫)

 

あとは壮大な映画をみているような感覚になる本

ジェノサイド 上 (角川文庫)
ジェノサイド 下 (角川文庫)

少し重いシーンもあるので注意です。

 

ところ変わって歴史系だと

軍師の門 上
軍師の門 下

私ぜんぜん歴史詳しくないんですが最初から最後までおもしろかったです。
詳しい人はもっとおもしろいはず。

 

恋愛を学びたい若者へ

イニシエーション・ラブ (文春文庫)

恋に悩める若者よ、何も聞かずにただこれを読むのです。

 

マツコさんの本

デラックスじゃない (双葉文庫)

最初の数行だけでマツコさんの世界に引きこまれます。

 

コピーライトといえば

(ぶんこ版)糸井重里の萬流コピー塾 (文春文庫)

ゆるいようで、しっかりしてる。ものすごく勉強になる本。

 

 

今更ながら、これ無限に書けるやつだと気づいたので、この辺で。

なんの話でしたっけ?

ではでは読書ライフを楽しみましょ〜!

 

Pocket