Programming | WebとかIoTのブログ

cookieとかlocalstorageって何だっけ？どういうとき消えちゃう？

最近仕事で、よくフロントエンド側の実装に問題があり、それがユーザの不便につながらトラブルに遭遇しました。

問題が顕在化しなければ見過ごされていましたが、どうやらリロードすると永続化していないVuexのストアが消えることに気づいていなかったようです。で、関係者に話したところ、ストアってなに？っていうかlocalstorageとか使えばいいの？っていうかそれもよくわかんないんだけど、みたいな感じでした。

ということで、自分の理解も兼ねて整理することにしました。

フロントエンド側でデータを保持する方法

次のような方法があります（他にもあるかもしれません）

LocalStorage
SessionStorage
indexedDB（WebSQL）
Session Cookie
Persistent Cookie
JavaScript変数
Vuex・Redux等
Service Worker
Server Side Session

まとめ

結論次のとおりです。

技術要素	書き込み先	データの寿命	有効期限のバリエーション
JavaScript変数	クライアント: メモリ	タブを閉じたとき	–
LocalStorage	クライアント: ディスク	ユーザが削除するまで	その他 (基本的に期限なし、ただし手動で削除は可能)
SessionStorage	クライアント: ディスク	タブを閉じたとき	–
indexedDB	クライアント: ディスク	ユーザが削除するまで	その他 (基本的に期限なし、ただし手動で削除は可能)
WebSQL (※非推奨)	クライアント: ディスク	ユーザが削除するまで	その他 (基本的に期限なし、ただし手動で削除は可能)
Session Cookie	クライアント: ディスク	ブラウザを閉じたとき	セッションの有効期限
Persistent Cookie	クライアント: ディスク	有効期限が訪れたとき	指定の日時、または時間が経過したとき
Vuex・Redux等	クライアント: メモリ	タブを閉じたとき	–
Service Worker	クライアント: ディスク/メモリ	独自のライフサイクル	その他 (Service Workerの更新ポリシーや、キャッシュの期限に依存)
Server Side Session	サーバ: メモリ/ディスク	有効期限が訪れたとき	セッションの有効期限, あるいは指定の日時

なりたち

私はナラティブにすると覚えやすいと思ったので、一部想像も入るので注意ですが、エポックメイキングだと思ったことを独断と偏見で次のように語ってみます。

JavaScript変数

初めはきっと、全部、JavaScript変数を用いて必要なデータを保持していました。それはそうですよねたぶん。

Cookieの登場

JavaScript変数はメモリ領域に保存されるゆえに、ページ遷移やリロードによって消えてしまいます。これだと、例えば会員制のサイトにログインした場合に、ページ遷移の度に認証が必要になってしまいます。そこで、セッションという概念が登場します。

Session Cookieを利用して、一度認証したらタブを閉じるまで再認証することなくページ遷移する体験を提供できるようになります。そのうえで、Persistant Cookieを選択することで、タブを閉じてもユーザのお気に入りレシピなど、よく利用する情報を保存・参照し、手間を削減することができるようになります。

Sessionの登場

さて、Cookieによってパーソナルなデータが便利に扱えるようになりましたが、カバーしきれない不便なケースが出てきます。例えば、ECサイトにおける購買です。Aさんがカートに入れた商品をBさんがカートに入れて先に購入完了してしまった場合、Aさんは購入できないというがっかり体験が発生しうるのです。これを解決する方法として、セッションが登場します。セッションによってサーバサイドへユーザの情報を管理することで、Bさんがそもそもカートに入れられないようにして、Aさんのがっかり体験を防止することができます。その他にも、認証の有効期限をサーバサイドで管理することで、一貫性のある状態管理ができるようになります。そのように、一連のリクエスト/応答の流れを識別するための仕組みがSessionです。

LocalStorageとかの登場

ここまでで、ページを跨いでも必要な値を管理する方法が充実してきましたが、2009年代にもなるとPCの普及率は50%を余裕で超え、スマホが爆発的に普及し始める兆しが現れます。それと連動するように、Webでできること・求められることが拡大します。その中で、WebSQLやLocalStorageやindexedDBといったものが登場し、これまでCookieで行っていたような情報の管理方法がより拡張されました。

LocalStorage・SessionStorageによって、cookieよりも長い期間、より大きなサイズ（4KBを超えるサイズ）を扱えるようになり、例えばブラウザゲームのような大きなデータを頻繁に参照するようなユースケースに対応できるようになりました。

indexedDBの登場

また、WebSQLにより、構造化されたデータを扱うことができるようになったことで、JavaScriptによって一貫性のあるデータの取り扱いが容易になり、大規模なWebアプリ開発などがしやすくなりました。ただし、WebSQLはSQLiteをベースとした仕様であることもあり、Webにおける一般化に当たって様々な議論がなされた結果、最終的にindexedDBに取って代わられ非推奨となりました。

Service Workerの登場

その後、2015年になるとスマホ普及率は50%を突破し、スマホの携帯はメジャーなものとなりました。そうなってくると、あらゆる場所でWebコンテンツを参照したいニーズが生じてきます。例えば、電車での移動中にトンネルを通って瞬断されたとしても、コンテンツを使い続けられるようにしたいということになるのです。さらに、スマホとWebサーバはシームレスに連動し、サーバ側からの通知やオフラインでの動作やバックグラウンドでの動作といった機能のニーズも事業者が持ちます。この問題を解決するために、Service Workerが登場します。あ、ちなみにService Workerは2015年より少しから登場しています。

Service Workerはクライアント側からの要求と、サーバ側の応答の中間に位置し、ネットワークの状況に応じて適切な情報伝達を仲介します。これにより、あらゆるシーンでWebが利用できる、もしくはできないなりに最大限の機能をすることができるようになりました。

Vuex・Reduxの登場

ここまでで、ユーザがいつどんな場所からアクセスしても、混乱なく便利にWebサイトやWebアプリを利用することができる技術要素がそろってきました。ただ、どこまでいってもブラウザ上で動作するアプリという面では、ページ遷移などによるUXの悪さを逃れることはJavaScriptなしには難しいです。

そうなってくると、ほぼJavaScriptによってコンテンツの切り替え等を行うことを徹底することによって、ネイティブアプリ並みに軽快な動作ができるようなアプリを作成することが増えてきます。その用途に最適化されたアーキテクチャの一つにSPA等がありますが、SPA等による大規模なサービスの開発で利用されるのがVuex・Reduxなどの状態管理方法です。これらにより、大規模でも破綻しにくいようなコーディングができるようになり、ネイティブと比べて遜色ないようなパフォーマンスを発揮するアプリをブラウザ上から利用できるようになりました。

hirobel

8月 8, 2023

JavaScript, 勉強会

WordPress用のコーディング環境整備方法(with VSCode)
複数人での開発する上で、タブやブラケットなどのコーディングポリシーが曖昧だと、Pull Requestなどで差分をチェックする際に余計な差分が出てしまったり、それにより一貫性のないコードが増えていくという悪循環が生まれてしまうといった問題が発生してしまいます。

最近WordPressのオリジナルテーマを制作する案件で複数人での開発を行う機会を得たため、どのようなガバナンスの方法があるのかを話し合ってみることにしました。その内容を記事化します。

コード整備の方法

コードベースの一貫性を保つための仕組みを作成する方法として、一般的に次のような方法が挙げられます。

なお、上に位置するものはシステム化の度合いが高い方法であるという並び順になっています。
- Formatterの利用
  - 例：Prettier
- Linterの利用
  - 例：ESLint, JSLint, PyLint
- 静的コード解析ツールの利用
  - 例：SonarQube
- CI/CDツールの利用
  - 例：PR作成時に規定のルールに沿っているかチェックしてfeedbackする
- コードレビュー
  - GitHub、GitLab、Bitbucket
- ペアプログラミング
- ドキュメンテーション
  - 例：コーディングルールの策定
どれを使うべきなのか

色々な方法がある中で、どういう観点でどれを選択するのがよいのでしょうか。いくつかの問いや注目すべきポイントを挙げてみます。
- あなたのチームで重要なことは何でしょうか
  - Quality
  - Cost
  - Delivery
- 例えば、今回の我々のチームに当てはめると、予算は潤沢とまでは言えず、スピード感ある対応が求められます。となると、Costがかけられず、Deliveryを優先せざるを得ないならQualityは最小限というバランスを取るべきでしょう。なお、これは悪いことではないと筆者は考えます。「最小限」だけチームで定めましょう。
  - 空白とかのポリシーだけ定めて、あとはプルリクで解決とか、カットオーバー（納品・公開）できてから振り返るのでも全然いいのではないか？
    
    空白だけでも定めたほうがよいと思った理由は、差分が分かりづらくなること
気になること

どの方法を取るべきかの合意が取れたところで、一旦立ち止まって考えるべきことがあります。それは本当に実現性があるのでしょうか？
- FormatterやLinterは各メンバーのエディタ設定に依存するため、本来守るべき規約に沿っていないコードがコミットされうることの回避は難しい
  - CI/CDツールでLinterを利用してエラーを検出する、というのは良さそう
- Formatterが期待動作しないことで全体の進捗が犠牲になる場合がある
  - コードで管理することで防げるのでは？
WordPressにおける開発で注意すべき点は次の通り

大まかな方法が固まってきたところで、WordPressにフォーカスしたやり方を考えていきました。結論、WordPressのコーディング規約をベースにし、その上で納品先のコーディングルールに合わせてアジャストするべきでしょう。
- 納品先のコーディングルール
- WordPressの標準コーディングルール（CSS/HTML/JavaScript/PHP）
  - WordPress コーディング規約 – Japanese Team https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/
コーディングルール作成観点

WordPressにフォーカスするという合意は得られた上で、それでもチームでやりたいスタイルを追求すべきでしょう。というのも、別にWordPressコアのコードベースにコミットするわけではないのですから、チームがやりたい方法を多少取り入れても問題はないばかりか、モチベーションの維持に良い作用が期待できるでしょう。

今回はこのような点について話し合ってみました。
1. インデントスタイル：タブを使うか、スペースを使うか。また、何文字分のスペースをインデントに使用するか。
2. 命名規則：変数、関数、クラスなどの命名についてのルール。キャメルケース、スネークケースなど。
3. コードの長さ：一行の文字数や、一つの関数・メソッドあたりの行数、クラスあたりのメソッド数など。
4. コメント：コメントの書き方、また必要な場合と必要でない場合の区別。
5. コードの構造：クラスや関数の設計、モジュールの分割、パッケージ構造など。
6. エラーハンドリング：例外をどのように扱い、どのように報告するか。
7. テスト：単体テストや統合テストの範囲と方法。
8. ドキュメンテーション：関数やクラスの説明をどの程度詳しく書くか。
9. 使用言語の特性：特定の言語の特性をどの程度使用するか。たとえば、Pythonのリスト内包表記やJavaScriptの三項演算子など。
10. ユニットテストと統合テストの範囲：どの部分に対してユニットテストを書くべきか、どの部分に対して統合テストを書くべきか。
11. コードの再利用：コードを再利用するための最低限の要件。
12. データ構造とアルゴリズムの選択：特定の状況下でのデータ構造とアルゴリズムの選択。
13. ソースコードのレイアウト：ブレース（{}）の位置、空行の使用など。
ちなみに、我々のチームでは、意外と、タブじゃなくて空白スペースにしたい・・という意見が強くて驚きでした。これは一番意見が分かれたところです。

おすすめ

さて、色々とここまでで目線合わせがかなり進みました。

最後に、ディスカッションの中で興味深い話が出ましたのでリストアップしておきます。読者の参考になれば幸いです。
- CIでLinterを走らせる方法がある
  - actionsで、pushされた時に、npm commandsとかで、linterを実行する
- 言語ごとにコーディング規約、ツールの導入難易度が異なる
  - Goとかは容易、PHPは難あり
  - コーディング規約自体のゆらぎ
- WordPressのコーディングルールについて
  - 日本人向けには少し合わない部分もある
  - 非常に多くの人が関わる
- PHP Standards Recommendations – PHP-FIG https://www.php-fig.org/psr/
  - FIGというワーキンググループに参加している団体で認識合わせするためのものなので、PHPユーザ全体をメインターゲットにしている訳では無い
- WordPress公式テーマの利用
- WordPressの案件には是非コーディング規約を導入してください！ – Qiita https://qiita.com/yousan/items/35e64ba6492e9c459c12#composerでのphpcswpcsphp-compatibilityのインストール
- Airbnbのコーディング規約、理由とか実例が充実しててよい
  - Airbnb JavaScript スタイルガイド() { | javascript-style-guide https://mitsuruog.github.io/javascript-style-guide/
- コメントを書きましょう
- 名書「Readable Code」読みましょう
hirobel

7月 12, 2023

Programming, WordPress, 勉強会

シンプルなWebアプリを作ってみる(with JavaScript)

はじめに

JavaScriptを利用してAPIから値を取得し、画面へ反映する方法を共有するため、シンプルなWEBアプリを作ってみる会を行うこととした。

サーバを作る(with Node.js + express)

nodeの準備

$ npm init

nodeライブラリのインストール

$ npm install express body-parser cors

サーバのコード(app.js)を実装

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 4000; // ポート番号を4000に

app.use(express.json());
app.use(cors());

let items = [];

// Create
app.post('/items', (req, res) => {
  const { name, price, description } = req.body;
  const newItem = {
    id: Date.now(),
    name,
    price,
    description,
  };
  items.push(newItem);
  res.status(201).json(newItem);
});

// Read
app.get('/items', (req, res) => {
  res.json(items);
});

// Launch server
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

サーバの起動

$ node app.js

起動した結果、いかが表示されたので、期待通り実装できたことが確認できた

$ node app.js 
Server is running on port 4000

データを入れてみる

curl -X POST -H "Content-Type: application/json" -d '{"name": "Apple", "price": 100, "description": "apple"}' http://localhost:4000/items
curl -X POST -H "Content-Type: application/json" -d '{"name": "Banana", "price": 150, "description": "banana"}' http://localhost:4000/items
curl -X POST -H "Content-Type: application/json" -d '{"name": "Cherry", "price": 200, "description": "cherry"}' http://localhost:4000/items

データを見てみる

ブラウザでhttp://localhost:4000/itemsにアクセスしてみると、上記で登録した内容が表示される

WEBサイトを作る

下準備（nodeとwebサーバ起動用のモジュールをインストール）

$ cd front
$ npm init
$ npm install http-server

フロントエンドのコード(index.html)作成

「商品」と「個数」を入力したら、合計金額を表示する

商品の金額などの情報は、サーバから取得する

入力系
- プルダウン
  - 商品選択用
  - 個数選択用
- 実行ボタン
出力系
- div(結果入力用)
処理
- 初期化（前準備）
  - Itemクラスの作成
  - Items変数の作成
- fetchを使ってサーバから値を取得する★
  - fetchによるAPI呼び出し
- 商品選択用プルダウンの中身を作る
- 個数選択用プルダウンの中身を作る
- 実行ボタンの動作を作る
  - 「商品選択用」と「個数選択用」プルダウンから入力値を取得
  - 取得内容から商品の価格 x 個数を計算
  - 計算結果を画面へ表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 商品選択用プルダウン -->
  <select id="name"></select>

  <!-- 個数選択用プルダウン -->
  <select id="count"></select>

  <!-- 実行ボタン -->
  <input id="calculate" type="button" value="実行">

  <!-- 結果入れ -->
  <div id="result">(ここに結果が入ります)</div>

<script>
  // 初期化（前準備）
  class Item {
    constructor(name,price,description){
      this.name = name;
      this.price = price;
      this.description = description;
    }
  }
  let Items = [];

  // fetchを使ってサーバから値を取得する★
  fetch('http://localhost:4000/items')
    .then(response => response.json())
    .then(data => {
      // サーバから取得した値をItemsに入れる

      data.forEach(item => {
        Items.push(new Item(item.name, item.price, item.description));

        // 商品選択用プルダウンの中身を作る
        const option = document.createElement('option');
        option.textContent = item.name;
        option.value = item.name;
        document.getElementById('name').appendChild(option);
      })
    })


  // 個数選択用プルダウンの中身を作る
  for (let i = 1; i <= 100; i += 10) {
      const option = document.createElement('option');
      option.textContent = i;
      option.value = i;
      document.getElementById('count').appendChild(option);
  }

  // 実行ボタンの動作を作る
  document.getElementById('calculate').addEventListener('click', () => {
      const selectedItemName = document.getElementById('name').value;
      const selectedItem = Items.find(item => item.name === selectedItemName);
      const count = parseInt(document.getElementById('count').value, 10);
      const result = selectedItem.price * count;
      document.getElementById('result').textContent = `Total price: ${result}`;
  });

</script>

</body>
</html>

hirobel

4月 25, 2023

JavaScript, 勉強会

WordPressの勉強1/3
ゴール設定
- ゴール設定
  1. スタティック（静的）なWebサイトを構築できる
    HTMLの基本
    ページ遷移方法
    ホスティング方法
    CSS
    JavaScript
  2. スタティックなサイトをWordPress化できる
    環境作成
    wp-env
    テーマ作成
    最小限のテーマ
    index.php
    style.css
    テンプレート
    固定ページテンプレート
    投稿ページテンプレート
    ：
  3. ブロックエディタを利用して簡単にユーザが投稿を編集できるようにする
    ユーザ向け
    ダッシュボードからどうブロックエディタで編集するか
    開発者向け
    ブロックエディタのテンプレート構築方法
スタティック（静的）なWebサイトを構築する方法

HTMLの作成

最もミニマムなHTMLのコードは次の通り
```
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Document</title>
</head>
<body>
  Test.  
</body>
</html>
```
↑のコードを動かすと次の通り

タグと要素
- <body>タグ内に書いたものが画面に表示される
- <div>は開始タグである
- </div>を終了タグである
- <div>Text</div>テキストを開始タグと終了タグで囲んだものをHTML要素という
ブロック要素とインライン要素
- HTML要素にはブロック要素とインライン要素がある
- <div><p><h1>はブロック要素である
- <span><a>はインライン要素である
- ブロック要素とインライン要素を並べて書くとレイアウトに次のような差が生じる
ページ遷移

このような2つのページがあるとする

index.html, index2.htmlにaタグを次のように用意すると、ページ遷移できる
<!DOCTYPE html> <html lang="ja"> <head> <title>Document</title> </head> <body> <h1>Page1</h1> <div>block</div> <div>block3</div> <div>block4</div> <span>block5</span> <a href="index2.html">go to index2.html</a> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <title>Document</title> </head> <body> <h1>Page2</h1> <div>block</div> <div>block3</div> <div>block4</div> <span>block5</span> <a href="index.html">go to index.html</a> </body> </html>
動作イメージは次の通り

ホスティング
- <div><span><a>があれば、とりあえずサイト作れる
- 作ったサイトをインターネット上へ配置などしないと、アクセスできない
- 配置するには、サーバを借りるか、自分のマシンをインターネットに公開する必要になる
- 自分のマシンをインターネットに公開するのは危険なので、サーバを借りるのがよい
- 最も安価にサーバを借りるのであれば、レンタルサーバがオススメ
  - 従量課金制と月額課金制のサービスがある
- 例：さくらのレンタルサーバ | 高速・安定WordPressなら！無料2週間お試し https://rs.sakura.ad.jp/
CSS
- <style>タグを利用して表示スタイルを変更できる
- スタイル変更のためには、何を、どうするという2つを指定する必要がある。
- 何を→セレクタ
- どうする→プロパティ
```
<style>
  h1 {
    color: red;
  }
</style>
```
セレクタ
- 要素の指定方法
- 要素名で指定する場合：h1{}, div {}, span {}
- 要素のidで指定する場合：#title, #section1, #text1
- 要素のclassで指定する場合：.title, .section, .text
- その他：div > div > .text
失敗例

styleを当てたいところ以外にも当たってしまう

成功例

div > div > .textにすることで当てたい部分だけstyleを当てる

プロパティ
- いろいろある
- MDNをみるといい
- CSS リファレンス – CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/Reference
JavaScript
- JavaScriptはブラウザ上で動作できるプログラミング言語
- DOM操作によってWEBサイトの内容を動的に変更したり、クリックなどのイベントを発生させるのに使うことができる
- <script>タグを利用してJavaScriptのコードを実行できる
例えばこんな感じ

実行すると、「div > div > .text’」のセレクタに対応する要素が’hoge’になる

サンプルコードは以下（動作は全部同じ）
<script> let val = 'hoge'; alert(val); let elm = document.querySelector('div > div > .text'); elm.innerHTML = val; </script>
<script> function main() { let val = 'hoge'; alert(val); let elm = document.querySelector('div > div > .text'); elm.innerHTML = val; } main(); </script>
<script> const main = () => { let val = 'hoge'; alert(val); let elm = document.querySelector('div > div > .text'); elm.innerHTML = val; } main(); </script>
動作イメージは次の通り
hirobel

11月 1, 2022

JavaScript

②オーケーネットスーパー自動でカートに入れる

開発経緯

前回エクセルで開発したが、色々な場所からアクセスできなく不便なのでスプレッドシートでリストを作成するように仕様変更した。

スプレッドシートの認証はほかのブログを参考にしてほしい。
参考にしたURL↓
https://tanuhack.com/operate-spreadsheet/
https://tanuhack.com/library-gspread/

開発環境

MacBookPro14インチ
macOS 12.6
Python 3.10.6
gspread
selenium 4.4.3
googleスプレッドシート

概要

前回とほとんど変わりませんがエクセルをスプレッドシートに変更しました。
【自動】OKネットスーパーのWEBページを開いてログイン情報を記入する。
【手動】reCAPTHAは手動で操作する。
【自動】スプレッドシートで買い物リストを作成して、そのリストに従いOKネットスーパーで検索して一番目に出てきたものをカートに入れる。
【手動】カートに入った買い物するものを確認し、配送日を選んで決済へ!!!

ソースコード

oknet221031.py

# coding:utf-8
from multiprocessing.resource_sharer import stop
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.chrome import service as fs
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import Select
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.ui import WebDriverWait
from time import sleep
import os
import signal
import gspread
from google.oauth2.service_account import Credentials
import yaml

with open('config.yml', 'r') as yml:
    config = yaml.safe_load(yml)
    myid = config['myid']
    mypass = config['mypass']
    SPREADSHEET_KEY  = config['SPREADSHEET_KEY']
    CHROMEDRIVER = config['CHROMEDRIVER']

def is_int(s):
    try:
        int(s)
        return True
    except ValueError:
        return False


#スプレッドシート認証
scope = ['https://www.googleapis.com/auth/spreadsheets','https://www.googleapis.com/auth/drive']
credentials = Credentials.from_service_account_file("credentials.json", scopes=scope)
gc = gspread.authorize(credentials)

# スプレッドシート（ブック）を開いて前準備
ws = gc.open_by_key(SPREADSHEET_KEY).sheet1
product_arry = ws.col_values(5)
value_arry = ws.col_values(2)
product_dict=(dict(zip(product_arry,value_arry)))

# ブラウザを開く。
chrome_service = fs.Service(executable_path=CHROMEDRIVER)
driver = webdriver.Chrome(service=chrome_service)
wait = WebDriverWait(driver=driver, timeout=30)

# OKネットスーパーのlogin画面を開く
driver.get("https://ok-netsuper.com/login")
wait.until(EC.presence_of_all_elements_located)

# ログイン操作
mail = driver.find_element(By.ID, "username")
password = driver.find_element(By.ID, "password")
mail.send_keys(myid)
password.send_keys(mypass)
sleep(20)
# reCAPTHA認証を人が操作する時間待機


#　配送日時のページを開く
driver.get("https://ok-netsuper.com/delivery-timetable/delivery-timetable-select")
wait.until(EC.presence_of_all_elements_located)
# 配送日時選択
driver.find_element(By.XPATH,"/html/body/div[2]/div[1]/div[2]/div/form/table/tbody/tr[3]/td[2]").click()
driver.find_element(By.ID,"continue-shopping").click()
sleep(1)

# タブを開く
driver.execute_script("window.open();")
# 開いたタブをアクティブにする
driver.switch_to.window(driver.window_handles[1])
# okホーム開く
driver.get("https://ok-netsuper.com/")
wait.until(EC.presence_of_all_elements_located)


try:
    for  product_name in product_arry:
        value = product_dict[product_name]
        if is_int(value):
            # 商品を検索欄選択
            search_product = driver.find_element(By.CSS_SELECTOR, "input.header-bottom-search-input")
            # 検索欄をクリア
            search_product.clear()
            # 検索欄に商品名を記入
            search_product.send_keys(product_name)
            # ENTERを押す
            search_product.send_keys(Keys.ENTER)
            wait.until(EC.presence_of_all_elements_located)
            # print(product_name)
            # print(value)
            try:
                for j in range(int(value)):
                    # 検索結果の一番目を個数分カートに入れる
                    driver.find_elements(By.CSS_SELECTOR,".ok-button")[4].click()
                    sleep(1)
            except IndexError:
                    # none_link = none_link + " " + product_name
                    print(product_name)
finally:
    os.kill(driver.service.process.pid,signal.SIGTERM)

driver.close
driver.quit

config.yml

myid : YOUR ID
mypass : YOUR PASSWORD
SPREADSHEET_KEY : APIKEY
CHROMEDRIVER : ドライバーのpath

改良したところ

sleepで時間指定でwebページが読み込みを待っていたのを、全要素が読み込まれるのまで待つに変更した。
ここでは30秒でタイムアウトすると設定した。

wait = WebDriverWait(driver=driver, timeout=30)
wait.until(EC.presence_of_all_elements_located)

設定の値をyamlに書いて呼び出すようにしコードを公開しやすくした。

引っかかったところ

API制限に引っかかる
前回作成したプログラムと同様にスプレッドシートを一行一行処理していたらAPIの制限に引っかかってしまった。
APIを叩く回数を減らせば解決できると考え、商品名と個数を配列で一括で取得することで解決した。
配列で取得した商品名と個数を辞書形式に変換して、その辞書から商品名と付き合わせて個数を取得した。
データ型
スプレッドシートから取得した個数のデータ型がintじゃなった。スプレッドシートでは数字は数値になっていると思い込んでしまったため気づくまでに時間がかかった。
結局int()をやれば解決した。

現在の課題と今後の展望

検索結果が出なかった時に別シートに商品名を出力するように変更したい。
結果が2個以上でた際の処理を考える。
pythonを外出先からも起動できるよう考える。
reCAPTCHAのチェックが付いたら次の処理をできるようにしたい。

kuma

10月 30, 2022

python

①オーケーネットスーパー自動でカートに入れる

開発経緯

初めて記事を書きます。kumaです。
去年の11月からOKネットスーパーを利用しています。
徒歩やバイクで買い出ししていたので持って帰る容量を考えたり、買い出しの時間が減って嬉しく思っていました。
しかし、最近カートに入れる作業が毎回１時間かかるのが苦痛になってきたので勉強も兼ねて自動化することにした。

開発環境

MacBookPro14インチ
macOS 12.6
Python 3.10.6
openpyxl 3.0.10
selenium 4.4.3
EXCEL

概要

【自動】OKネットスーパーのWEBページを開いてログイン情報を記入する。
【手動】reCAPTHAは手動で操作する。
【自動】EXCELで買い物リストを作成して、そのリストに従いOKネットスーパーで検索して一番目に出てきたものをカートに入れる。
【手動】カートに入った買い物するものを確認し、配送日を選んで決済へ!!!

ソースコード

# coding:utf-8
# ok_net.py
from multiprocessing.resource_sharer import stop
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.chrome import service as fs
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import Select
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.ui import WebDriverWait
from time import sleep
import openpyxl
import os
import signal

# ログイン情報
#あなたのIDを入れてください。
myid = "yourID"
#あなたのPASSWORDを
mypass = "yourPASSWORD"

# エクセル設定
wb = openpyxl.load_workbook('./ok_list.xlsm')
ws = wb['Sheet1']
maxRow = ws.max_row
i = 0

# ブラウザを開く。
CHROMEDRIVER = "***************/chromedriver"
chrome_service = fs.Service(executable_path=CHROMEDRIVER)
driver = webdriver.Chrome(service=chrome_service)

# Googleの検索TOP画面を開く。
driver.get("https://ok-netsuper.com/login")

# ログイン操作
mail = driver.find_element(By.ID, "username")
password = driver.find_element(By.ID, "password")
mail.send_keys(myid)
password.send_keys(mypass)
# 認証と配送時間を人が操作する時間待機
# wait = WebDriverWait(driver, timeout=30)
# wait.until(EC.presence_of_element_located(By.NAME, "header-bottom-loginuser-schedule"))
sleep(20)
driver.get("https://ok-netsuper.com/delivery-timetable/delivery-timetable-select")
driver.find_element(By.XPATH,"/html/body/div[2]/div[1]/div[2]/div/form/table/tbody/tr[3]/td[2]").click()
driver.find_element(By.ID,"continue-shopping").click()
sleep(2)

# タブを開く
driver.execute_script("window.open();")
# 開いたタブをアクティブにする
driver.switch_to.window(driver.window_handles[1])
# okホーム開く
driver.get("https://ok-netsuper.com/")



try:
# ここからリストがなくなるまでloop
    for i in range(2,maxRow + 1):

        if ws.cell(row = i, column = 2).value is not None:
            # リストから商品名を取得
            product_name = ws.cell(row = i, column = 1).value
            # リストから個数を取得
            value = ws.cell(row = i, column = 2).value
            # 商品を検索欄選択
            search_product = driver.find_element(By.CSS_SELECTOR, "input.header-bottom-search-input")
            # 検索欄をクリア
            search_product.clear()
            # 検索欄に商品名を記入
            search_product.send_keys(product_name)
            # ENTERを押す
            search_product.send_keys(Keys.ENTER)
            sleep(1)
            try:
                for j in range(value):
                    driver.find_elements(By.CSS_SELECTOR,".ok-button")[4].click()
                    sleep(1)
            except IndexError:
                # none_link = none_link + " " + product_name
                print(product_name)
                # ws.cell(row = i, column = 3).value = "検索なし"
                # wb.save(wb)
finally:
    os.kill(driver.service.process.pid,signal.SIGTERM)

現在の課題と今後の展望

検索結果に出てこなかったときターミナルに商品名を表示しているがEXCELに表示したい。
検索結果に2商品以上出てきても、最初に出てきたものをカートに入れてしまうので2個以上検索結果が出た時の処理を考える。
商品をカートに入れるところはもう少しスマートにできそう。

少し使ってみて、アップデートしようと思う。

次回
http://13.231.35.57/2022/10/30/oknet2/

kuma

10月 3, 2022

python

【完結？】2時間でAlexaスキルを作ってみたけどできなかった話その６

はじめに

以前、これまで作成を進めてきた「面接練習」スキルをストアへ申請したところ、リジェクトされた
リジェクトされた理由が詳しくフィードバックされたため、対応を行なおうとしたが、「どのインテントにも該当しない場合には、StartIntentにマッチしてしまう」という問題が解消できないまま、一旦作業を中断していた
解消方法を有識者から伺ったので、対応を再開することにした

やってみたこと

有識者からのアドバイスを整理

現状の対話モデルの設定などを見てもらったところ、次の問題が発生しているとのことだった

AMAZON.FallbackIntentが定義されていないので、StartIntentに該当しない場合に、FallbackIntentHandlerに処理が渡らない状態になっていた。

また、上記とは別に、Amazon.NoIntentやAmazon.YesIntent等を活用すればもっとシンプルになるのではということだった。

やることをチームで相談

前述の内容を踏まえて、チームでこれをやることにした

Amazon.FallbackIntentを対話モデルに追加
Amazon.NoIntentを対話モデルに追加
Amazon.YesIntentを対話モデルに追加
EtcIntentは対話モデルから削除
コードエディタ上で、StartIntentHandlerのcanHandle内の条件式を「Amazon. YesIntent」もしくは「StartIntent」にマッチするかどうか、という条件に変更

なお、ここに至るまでにいくつか躓いた点があった。

StartIntentを対話モデルから削除すると、モデルをビルドした際に次のエラーが表示された。カスタムインテントは1つ以上必要であるとのことだった。そのため、StartIntentは残すことにした

Interaction Model does not include Custom Intents. Add a Custom Intent with at least one Sample Utterance to your Interaction Model.

ケアレスミスで、canHandleの条件で「Amazon.YesIntent」ではなく「YesIntent」としていたため、マッチせずに「IntentReflectorHandler」が実行されてしまう状態になっていた。

コードの修正

最終的に、細かい修正も含めて、前回の申請でいただいたフィードバック（その5を参照）にすべて対応し、以下のようなコードとして再申請した。

コード

/* *
 * This sample demonstrates handling intents from an Alexa skill using the Alexa Skills Kit SDK (v2).
 * Please visit https://alexa.design/cookbook for additional examples on implementing slots, dialog management,
 * session persistence, api calls, and more.
 * */
const Alexa = require('ask-sdk-core');

const LaunchRequestHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';
    },
    handle(handlerInput) {
        const speakOutput = 'これから面接練習をします。このスキルでは、質問をランダムに生成します。質問を返した時点でこのスキルは終了します。準備はよろしいですか？';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(speakOutput)
            .getResponse();
    }
};

const StartIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && ( Alexa.getIntentName(handlerInput.requestEnvelope) === 'StartIntent' || Alexa.getIntentName(handlerInput.requestEnvelope) === 'AMAZON.YesIntent');
    },
    handle(handlerInput) {
        // 質問リスト
        const array = [
            "志望理由は何ですか？",
            "あなたの強みはなんですか？",
            "あなたの弱みはなんですか？",
            "最近苦労したことはなんですか？",
            "最近楽しかったことはなんですか？",
            "今後やりたいことはなんですか？",
            "何か質問ありますか？ふふふ",
            "いまのあなたの課題はなんですか？",
            "どのようなリーダーシップの経験がありますか？",
            "仕事で大事にしていることはなんですか？",
        ]
        const after = "では、お答えください。さようなら。"
        const min = Math.ceil(0);
        const max = Math.floor(array.length - 1);
        let randomInt = Math.floor(Math.random() * (max - min) + min);

        const speakOutput = array[randomInt] + after;

        return handlerInput.responseBuilder
            .speak(speakOutput)
            //.reprompt('add a reprompt if you want to keep the session open for the user to respond')
            .getResponse();
    }
};

const NoIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && Alexa.getIntentName(handlerInput.requestEnvelope) === 'AMAZON.NoIntent';
    },
    handle(handlerInput) {
        const speakOutput = "面接練習を終了します";

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .getResponse();
    }
};


const HelpIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && Alexa.getIntentName(handlerInput.requestEnvelope) === 'AMAZON.HelpIntent';
    },
    handle(handlerInput) {
        const speakOutput = 'このスキルでは、質問をランダムに生成します。質問を返した時点でこのスキルは終了します。開始する場合には、「面接練習をはじめて」と言ってください';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(speakOutput)
            .getResponse();
    }
};

const CancelAndStopIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && (Alexa.getIntentName(handlerInput.requestEnvelope) === 'AMAZON.CancelIntent'
                || Alexa.getIntentName(handlerInput.requestEnvelope) === 'AMAZON.StopIntent');
    },
    handle(handlerInput) {
        const speakOutput = 'Goodbye!';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .getResponse();
    }
};
/* *
 * FallbackIntent triggers when a customer says something that doesn’t map to any intents in your skill
 * It must also be defined in the language model (if the locale supports it)
 * This handler can be safely added but will be ingnored in locales that do not support it yet 
 * */
const FallbackIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && Alexa.getIntentName(handlerInput.requestEnvelope) === 'AMAZON.FallbackIntent';
    },
    handle(handlerInput) {
        const speakOutput = 'すみません、おっしゃっていることが理解できませんでした。このスキルでは、質問をランダムに生成します。質問を返した時点でこのスキルは終了します。開始する場合には、「面接練習をはじめて」と言ってください';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(speakOutput)
            .getResponse();
    }
};
/* *
 * SessionEndedRequest notifies that a session was ended. This handler will be triggered when a currently open 
 * session is closed for one of the following reasons: 1) The user says "exit" or "quit". 2) The user does not 
 * respond or says something that does not match an intent defined in your voice model. 3) An error occurs 
 * */
const SessionEndedRequestHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'SessionEndedRequest';
    },
    handle(handlerInput) {
        console.log(`~~~~ Session ended: ${JSON.stringify(handlerInput.requestEnvelope)}`);
        // Any cleanup logic goes here.
        return handlerInput.responseBuilder.getResponse(); // notice we send an empty response
    }
};
/* *
 * The intent reflector is used for interaction model testing and debugging.
 * It will simply repeat the intent the user said. You can create custom handlers for your intents 
 * by defining them above, then also adding them to the request handler chain below 
 * */
const IntentReflectorHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest';
    },
    handle(handlerInput) {
        const intentName = Alexa.getIntentName(handlerInput.requestEnvelope);
        const speakOutput = `You just triggered ${intentName}`;

        return handlerInput.responseBuilder
            .speak(speakOutput)
            //.reprompt('add a reprompt if you want to keep the session open for the user to respond')
            .getResponse();
    }
};
/**
 * Generic error handling to capture any syntax or routing errors. If you receive an error
 * stating the request handler chain is not found, you have not implemented a handler for
 * the intent being invoked or included it in the skill builder below 
 * */
const ErrorHandler = {
    canHandle() {
        return true;
    },
    handle(handlerInput, error) {
        const speakOutput = 'Sorry, I had trouble doing what you asked. Please try again.';
        console.log(`~~~~ Error handled: ${JSON.stringify(error)}`);

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(speakOutput)
            .getResponse();
    }
};

/**
 * This handler acts as the entry point for your skill, routing all request and response
 * payloads to the handlers above. Make sure any new handlers or interceptors you've
 * defined are included below. The order matters - they're processed top to bottom 
 * */
exports.handler = Alexa.SkillBuilders.custom()
    .addRequestHandlers(
        LaunchRequestHandler,
        HelpIntentHandler,
        StartIntentHandler,
        NoIntentHandler,
        CancelAndStopIntentHandler,
        FallbackIntentHandler,
        SessionEndedRequestHandler,
        IntentReflectorHandler)
    .addErrorHandlers(
        ErrorHandler)
    .withCustomUserAgent('sample/hello-world/v1.2')
    .lambda();

最後に

これで申請が通るかどうか、待つ。

参考

特に無し。

というか、ドキュメントからうまく必要な情報を探せなかった。結構手探りで解決してた。

hirobel

1月 18, 2022

Alexa, Programming

2時間でAlexaスキルを作ってみたけどできなかった話

はじめに

Alexa道場で勉強を進め、基本的なスキルを作成する方法を学んだため、一度オリジナルスキルを作って復習＆知識の定着を図ってみることにした。

結論、2時間じゃ無理だったので、続きはまた今度やる。

やってみたこと

計画を立ててみた

何作るべきか考える(30分)
1. 自分が何欲しいか考えてみる(5分)
2. 自分以外に欲しい人がいそうか考えてみる(5分)
3. 似たようなモノで、市場で必要とされているものを調べてみる(10分)
4. 自分が作る方向性を決める(10分)
モックを作る
1. 設計する(30分)
2. 実装する(60分)

21:00 – 21:30　アイディア出しをしてみた

自分たちが欲しい物を色々と考えてみる。思いついたのは以下。

バーチャル面接官（加藤）
　→志望動機はなんですか？とか聞いてくる
　　→しゃべったことをテキスト化して、あとで回答が見れる
　→何秒間堪えられなかったか記録
　　→何秒空白があったか記録（くま）／（けん）

21:30 – 21:40　似たようなモノで、市場で必要とされているものを調べてみる

Googleで検索してみた
- Amazon.co.jp: 圧迫面接 : Alexaスキル https://www.amazon.co.jp/Ga9-%E5%9C%A7%E8%BF%AB%E9%9D%A2%E6%8E%A5/dp/B07BQHXLJF
- ベリーグッドは「Amazon Alexa」に対応する面接練習用の「面接シミュレーション」をリリース。 | 株式会社ベリーグッド https://www.verygoodinc.biz/archives/293
  　→今は存在しない？
その他、スキルストアで検索してみた。結果は次の通り

スキルストアには面接系のAlexaアプリはあまりなさそうだった。

なので、「圧迫面接」じゃない方向性で面接対策スキルを作るとよさそう、という話になった。

21:37 – 22:12　方向性の話し合いをしてみる

誰に向けて作るか話し合ってみた。結果は以下。

for　ユーザ
　→バイトの面接を控えている学生や、転職活動したい社会人の練習台になる
for　自分たち
　→Alexaの勉強になる
　→（儲からなくてもいい）

どんな質問がされるといいか調べながら話し合ってみた。結果は以下の記事にあるような方向性

面接対策まとめ｜よくある質問の回答例、準備～面接後のやりとり・流れ｜マイナビ転職 https://tenshoku.mynavi.jp/knowhow/mensetsu
　　→「面接でよくある質問の回答50例」の内容をAlexaに仕込んで見る
　　→とりあえず「自己紹介」と「志望理由」

22:12 – 22:45　設計

ユーザにどうなってもらうかを考えてみた。結果は以下。

想定ユーザ：けんとくんみたいなアルバイトの面接控えている、ガジェット好きな学生
ユーザの動き：
　　・（そもそもAlexaで面接したい、って思わせる何か）
　　　→Alexaで面接できるという認知をさせる？
　　・ユーザが面接の練習をAlexaでできないかな？と思う
　　・ユーザがAlexaストアで「面接」で検索する
　　　→Alexaストアに登録する必要あり
　　・ユーザがスキルの説明を見て、使いたいと思う
　　　→説明ちゃんと入れる必要あり
　　・ユーザがAlexaスキルをインストールする
　　・ユーザがAlexaでウェイクワードを発する
　　・Alexaが、ユーザは何をすればいいかを説明する
　　　→「これから面接練習をします。質問に回答してください。よろしいですか？」
　　・ユーザが「はい」と答える
　　・Alexaが最初の質問をする
　　・ユーザが最初の質問に答える
　　・Alexaが次の質問をする
　　・ユーザが次の質問に答える
　　〜ループ〜
　　・Alexaが最後の質問をする
　　・ユーザが最後の質問に答える
　　・Alexaが、すべての質問に回答し終わったことを伝える
　　・Alexaが、どこかで回答内容が確認できるようにする
　　　→例えば、テキスト化して、どこかに置いておく
　　・Alexaが、回答内容の確認方法をユーザに伝える

どんな実装作業が必要か考えてみた。結果は以下。

じゃあどんな機能とかが必要か
- ウェイクワードを設定する
  - スキル名、アイコン、とか・・
- インテントを作る
  - 「初めて」インテント
- コードエディタで編集する
  - 起動時に最初に呼ばれるリクエストハンドラを作る
    - ユーザは何をすればいいかを説明「これから面接練習をします。質問に回答してください。よろしいですか？」
  - 質問リクエストハンドラを作る
    - 質問を順番に行う
    - 回答内容を記録する
    - 最後の質問が終わったら、説明をする
      - どこかで回答内容が確認できるようにする

22:45 – 23:00 作り始めてみた

Developer Consoleで新しいスキルを作成

Alexa-hosted（Node.js）
スクラッチ

スキルの呼び出し名を設定

インテントを作成

StartIntentというインテントを作る

リクエストハンドラなどをコードエディタで実装（途中まで）

初めに呼ばれるリクエストハンドラと、StartIntentのハンドラを実装。

こんな感じ

/* *
 * This sample demonstrates handling intents from an Alexa skill using the Alexa Skills Kit SDK (v2).
 * Please visit https://alexa.design/cookbook for additional examples on implementing slots, dialog management,
 * session persistence, api calls, and more.
 * */
const Alexa = require('ask-sdk-core');

const LaunchRequestHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';
    },
    handle(handlerInput) {
        const speakOutput = 'これから面接練習をします。質問に回答してください。よろしいですか？';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(speakOutput)
            .getResponse();
    }
};

const StartIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && Alexa.getIntentName(handlerInput.requestEnvelope) === 'StartIntent';
    },
    handle(handlerInput) {
        // 流れ

　　　　// 1回目の場合（引数が空の場合）：
        　// 質問をする
        　// 回答をテキストで、どこかに記録する
        　// StartIntentHandlerをまた呼び出す（）
　　　　// 2回目の場合（引数が空でない場合）：
        　// 質問をする
        　// 回答をテキストで、どこかに記録する
        　// 最後の質問だったかどうかを判別する
        　　　　// 最後の質問だった場合
        　　　　   // 最後の処理をする
        　　　　// 最後の質問じゃなかった場合
        　          // StartIntentHandlerをまた呼び出す（次の質問を引数に入れる）

        const speakOutput = 'スタート';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            //.reprompt('add a reprompt if you want to keep the session open for the user to respond')
            .getResponse();
    }
};

const HelloWorldIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && Alexa.getIntentName(handlerInput.requestEnvelope) === 'HelloWorldIntent';
    },
    handle(handlerInput) {
        const speakOutput = 'Hello World!';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            //.reprompt('add a reprompt if you want to keep the session open for the user to respond')
            .getResponse();
    }
};

const HelpIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && Alexa.getIntentName(handlerInput.requestEnvelope) === 'AMAZON.HelpIntent';
    },
    handle(handlerInput) {
        const speakOutput = 'You can say hello to me! How can I help?';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(speakOutput)
            .getResponse();
    }
};

const CancelAndStopIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && (Alexa.getIntentName(handlerInput.requestEnvelope) === 'AMAZON.CancelIntent'
                || Alexa.getIntentName(handlerInput.requestEnvelope) === 'AMAZON.StopIntent');
    },
    handle(handlerInput) {
        const speakOutput = 'Goodbye!';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .getResponse();
    }
};
/* *
 * FallbackIntent triggers when a customer says something that doesn’t map to any intents in your skill
 * It must also be defined in the language model (if the locale supports it)
 * This handler can be safely added but will be ingnored in locales that do not support it yet 
 * */
const FallbackIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && Alexa.getIntentName(handlerInput.requestEnvelope) === 'AMAZON.FallbackIntent';
    },
    handle(handlerInput) {
        const speakOutput = 'Sorry, I don\'t know about that. Please try again.';

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(speakOutput)
            .getResponse();
    }
};
/* *
 * SessionEndedRequest notifies that a session was ended. This handler will be triggered when a currently open 
 * session is closed for one of the following reasons: 1) The user says "exit" or "quit". 2) The user does not 
 * respond or says something that does not match an intent defined in your voice model. 3) An error occurs 
 * */
const SessionEndedRequestHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'SessionEndedRequest';
    },
    handle(handlerInput) {
        console.log(`~~~~ Session ended: ${JSON.stringify(handlerInput.requestEnvelope)}`);
        // Any cleanup logic goes here.
        return handlerInput.responseBuilder.getResponse(); // notice we send an empty response
    }
};
/* *
 * The intent reflector is used for interaction model testing and debugging.
 * It will simply repeat the intent the user said. You can create custom handlers for your intents 
 * by defining them above, then also adding them to the request handler chain below 
 * */
const IntentReflectorHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest';
    },
    handle(handlerInput) {
        const intentName = Alexa.getIntentName(handlerInput.requestEnvelope);
        const speakOutput = `You just triggered ${intentName}`;

        return handlerInput.responseBuilder
            .speak(speakOutput)
            //.reprompt('add a reprompt if you want to keep the session open for the user to respond')
            .getResponse();
    }
};
/**
 * Generic error handling to capture any syntax or routing errors. If you receive an error
 * stating the request handler chain is not found, you have not implemented a handler for
 * the intent being invoked or included it in the skill builder below 
 * */
const ErrorHandler = {
    canHandle() {
        return true;
    },
    handle(handlerInput, error) {
        const speakOutput = 'Sorry, I had trouble doing what you asked. Please try again.';
        console.log(`~~~~ Error handled: ${JSON.stringify(error)}`);

        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(speakOutput)
            .getResponse();
    }
};

/**
 * This handler acts as the entry point for your skill, routing all request and response
 * payloads to the handlers above. Make sure any new handlers or interceptors you've
 * defined are included below. The order matters - they're processed top to bottom 
 * */
exports.handler = Alexa.SkillBuilders.custom()
    .addRequestHandlers(
        LaunchRequestHandler,
        StartIntentHandler,
        HelloWorldIntentHandler,
        HelpIntentHandler,
        CancelAndStopIntentHandler,
        FallbackIntentHandler,
        SessionEndedRequestHandler,
        IntentReflectorHandler)
    .addErrorHandlers(
        ErrorHandler)
    .withCustomUserAgent('sample/hello-world/v1.2')
    .lambda();

動かしてみる

テストしてみる。モックがとりあえず動いた。

最後に

方向性は決まったものの、スキルとして必要最低限の機能はまだまだ足りない。

とりあえず、次は固定の質問をして、回答内容をテキスト化して、どこかでユーザが参照できるようにする。

参考

面接対策まとめ｜よくある質問の回答例、準備～面接後のやりとり・流れ｜マイナビ転職 https://tenshoku.mynavi.jp/knowhow/mensetsu
Alexaの買い物リストとやることリストにアクセスする | Alexa Skills Kit
- https://developer.amazon.com/ja-JP/docs/alexa/custom-skills/access-the-alexa-shopping-and-to-do-lists.html

hirobel

11月 16, 2021

Alexa, Programming

[WIP]JavaScriptで操作を自動化する
はじめに

JavaScriptについて、初心者の方向けに基本的な機能の実装方法を試してみたのでご紹介します。

要素
- 変数
- DOMオブジェクト
- 配列
- 繰り返し
- 条件分岐
やってみたこと

普段繰り返し行っているブラウザの操作を自動化
hirobel

6月 15, 2021

JavaScript, Programming

フロントエンド側でデータを保持する方法

まとめ

なりたち

JavaScript変数

Cookieの登場

Sessionの登場

LocalStorageとかの登場

indexedDBの登場

Service Workerの登場

Vuex・Reduxの登場

コード整備の方法

どれを使うべきなのか

気になること

WordPressにおける開発で注意すべき点は次の通り

コーディングルール作成観点

おすすめ

はじめに

サーバを作る(with Node.js + express)

nodeの準備

nodeライブラリのインストール

サーバのコード(app.js)を実装

サーバの起動

データを入れてみる

データを見てみる

WEBサイトを作る

下準備（nodeとwebサーバ起動用のモジュールをインストール）

フロントエンドのコード(index.html)作成

ゴール設定

スタティック（静的）なWebサイトを構築する方法

HTMLの作成

タグと要素

ブロック要素とインライン要素

ページ遷移

ホスティング

CSS

セレクタ

失敗例

成功例

プロパティ

JavaScript

開発経緯

開発環境

概要

ソースコード

改良したところ

引っかかったところ

現在の課題と今後の展望

開発経緯

開発環境

概要

ソースコード

現在の課題と今後の展望

はじめに

やってみたこと

有識者からのアドバイスを整理

やることをチームで相談

コードの修正

コード

最後に

参考

はじめに

やってみたこと

計画を立ててみた

21:00 – 21:30 アイディア出しをしてみた

21:30 – 21:40 似たようなモノで、市場で必要とされているものを調べてみる

21:37 – 22:12 方向性の話し合いをしてみる

22:12 – 22:45 設計

22:45 – 23:00 作り始めてみた

Developer Consoleで新しいスキルを作成

スキルの呼び出し名を設定

インテントを作成

リクエストハンドラなどをコードエディタで実装（途中まで）

動かしてみる

最後に

参考

はじめに

やってみたこと

21:00 – 21:30　アイディア出しをしてみた

21:30 – 21:40　似たようなモノで、市場で必要とされているものを調べてみる

21:37 – 22:12　方向性の話し合いをしてみる

22:12 – 22:45　設計