Mechanical Echelon

色々とやったことを書いていく

Dialogflowのチュートリアルでチャットボットを作ってみる Part.4

前回はGoogle Cloud SDKのインストールと設定をしました。
今回はgcloudで関数のコンパイルをしていきます。

1.Deploy the function

・デスクトップ上のGoogle Cloud SDK Shellと書かれているアイコンを実行します。[画面1]
ディレクトリをmy_weatherに移動します。[画面2]
・コンソールに以下を打ち込みます。
gcloud beta functions deploy my_weather --stage-bucket [BUCKET_NAME] --trigger-httpf:id:den_noh:20180514000942j:plain

[BUCKET_NAME]の部分には次のものを記入
・以下のリンクをクリック
Google Cloud Platform
・移動先のページでリソースをクリック[画面3]
・移動先のmy-weather***.comの文字列を[BUCKET_NAME]の部分に記入します[画面4]
・記入した後Enter[画面5]
・成功すると以下のような画面が表示されます。[画面6]
・urlの部分はこのあと使うことになります。



f:id:den_noh:20180513115330j:plain
[画面1]

f:id:den_noh:20180513130755j:plain
[画面2]

f:id:den_noh:20180514000028j:plain
[画面3]

f:id:den_noh:20180514000059j:plain
[画面4]

f:id:den_noh:20180514002258j:plain
[画面5]

f:id:den_noh:20180514002820j:plain
[画面6]

2.DialogflowでWebhookを有効にする

・Dialogflowのページを開き、左側のバーからFulfillmentを選択します。[画面7]
・Fulfillmentのページに移動したら、Webhook を有効にします。[画面8]
・Webhookを有効にするとURLを入力する欄が現れるので、先ほどの1.Deploy the functionで取得したURLをここに入力します。[画面9]
・SAVEボタンを押下します[画面10]

f:id:den_noh:20180514235524j:plain
[画面7]

f:id:den_noh:20180515000135j:plain
[画面8]

f:id:den_noh:20180515001623j:plain
[画面9]

f:id:den_noh:20180515001444j:plain
[画面10]

3.IntentのページでFulfillmentを有効にする

・左側のバーからIntentのページへ移動し、weatherを選択します。
・ページのしたの方にあるFulfillmentを展開し、ENABLE FULFILLMENTを押下します。[画面11]
・Enable webhook call for this intentを押下し有効にします[画面12]
・最後にSAVEボタンを押下します[画面13]

f:id:den_noh:20180515003350j:plain
[画面11]

f:id:den_noh:20180515003904j:plain
[画面12]

f:id:den_noh:20180515004644j:plain
[画面13]

4.Tryしてみる

・右側のバーにあるTry it outに「weather」を入力しEnter
・DEFAULT RESPONSEの部分に「This is a sample response from your webhook!」と表示されるのを確認します。[画面14]

f:id:den_noh:20180516000939j:plain
[画面14]

次回で最後です。

Dialogflowのチュートリアルでチャットボットを作ってみる Part.3

今回からPart.4 Part.5にかけて実際にAPIコールを使用して関連する天気を返すようにするためにFulfillmentを追加していきます。

この記事の内容はDialogflowの
Basic Fulfillment and Conversation Setup
に書かれています。

Part.2では、自分で入力した応答を返答する基本的なエージェントを作成しました。
今回からは、例えば「今日の東京の天気は?」と聞かれたら、
今日の東京の実際の天気を応答として返せるようになることを目標とします。

ユーザーが要求している実際の情報を提供するには、サービスの展開とAPIの呼び出しが必要なフルフィルメントを設定する必要があります。
今回は自身のPC上の環境構築、Google Cloud Projectの設定、Google Cloud SDKのインストールを行います。

1.自身のPC上で環境構築を行う

Fulfillmentを追加するために、環境構築を行っていきます。

・自分のローカルシステム上にディレクトリを作成します。今回はC:\Dialogflow\my_weatherというディレクトリを作成します。
・作成したディレクトリにindex.jsファイルを作成します。[画面1]
・作成後以下のコードをindex.jsに記入します。[画面2]

exports.my_weather = function my_weather (request, response) {
  response.json({ fulfillmentText: 'This is a sample response from your webhook!' });
};

f:id:den_noh:20180509000617j:plain
[画面1]

f:id:den_noh:20180509000848j:plain
[画面2]

2. Google Cloud Projectの設定

引き続きFulfillmentを追加するための、環境構築を行います。
ここではQuickstart: Using the gcloud Command-Line Toolの1-5の手順の説明をしていきます。

・Cloud Platform Console プロジェクトを作成します。以下からプロジェクトページに移動します。
console.cloud.google.com

・(多分)アカウントの選択画面が現れるので、Dialogflowにログインしているのと同じアカウントでログインします。
・プロジェクトページに移動したら、「無料トライアルを試す」*1をクリックします。(無料トライアル試さなくてもできるかも・・。)[画面3]
利用規約に同意し「同意して続行」をクリックします。[画面4]
・名前、住所、電話番号、クレジットカード番号等情報を入力し終えると、Google Cloud Platformのスタートガイドに移ることを確認します。[画面5]

2.1. プロジェクトの課金を有効にする。*2

2.1.1. 新しい請求先アカウントの作成を行う

参考:Create, Modify, or Close Your Billing Account  |  Cloud Billing Documentation  |  Google Cloud
Google Cloud Platform Console に移動します。
・Console の左側のメニューを開き、[お支払い] を選択します。[画面6]
・お支払いの画面で請求先アカウントがない方は組織を選択という部分があるので、そこを変えると出てくるかもしれないです。[画面7]
請求先のアカウントがある方は、プロジェクトの課金を有効にするへ進んでください。
・請求先アカウントを追加ボタンをクリックします。[画面8]
・請求先アカウントの名前を入力し、続行します。(組織欄はそのままにしました)[画面9]
・国、通貨を確認し確認ボタンをクリックします。[画面10]
・お支払いプロファイルを確認し、「送信して課金を有効にする」をクリックします。



f:id:den_noh:20180509002338j:plain
[画面3]

f:id:den_noh:20180509005742j:plain
[画面4]

f:id:den_noh:20180509005806j:plain
[画面5]

f:id:den_noh:20180509124046j:plain
[画面7]

f:id:den_noh:20180509120812j:plain
[画像6]

f:id:den_noh:20180509121406j:plain
[画面8]

f:id:den_noh:20180509121948j:plain
[画面9]

f:id:den_noh:20180509122349j:plain
[画面10]

2.1.2. プロジェクトの課金を有効にする

Google Cloud Platform Console に移動します。
・Console の左側のメニューを開き、[お支払い] を選択します。
・お支払い画面に移動後、マイプロジェクトをクリックします[画面11]
・my_weatherの操作の部分をクリックし、請求先アカウントを変更をクリックします。[画面12]
・「アカウントを設定」をクリックします。[画面13]
・請求先アカウントが設定されていることを確認します[画面14]
以上でプロジェクト課金の有効化は終了です。

f:id:den_noh:20180509135404j:plain
[画面11]

f:id:den_noh:20180509135437j:plain
[画面12]

f:id:den_noh:20180509135506j:plain
[画面13]

f:id:den_noh:20180509135857j:plain
[画面14]

2.2. Cloud Functions API を有効にする。

・以下のページを開きます。
console.cloud.google.com

・プロジェクトを作成をクリックし、my_weatherを選択します。[画面15]
・続行をクリックします。[画面16]
・Cloud Function APIが有効化されました。と表示されたのを確認し続行をクリックします。[画面17]
以上でCloud Functions API の有効化は完了です。

f:id:den_noh:20180511002746j:plain
[画面15]

f:id:den_noh:20180511002746j:plain
[画面16]

f:id:den_noh:20180511003319j:plain
[画面17]

3. Google Cloud SDK のインストール

Cloud SDK のインストーラをダウンロードします。インストーラには Google Inc. による署名が付いています。
Google Cloud SDKインストーラ

インストーラをダウンロードしたら実行します。
・すべてデフォルトでインストール。
f:id:den_noh:20180513000352j:plain
f:id:den_noh:20180513000401j:plain
f:id:den_noh:20180513000417j:plain
f:id:den_noh:20180513000418j:plain
f:id:den_noh:20180513000422j:plain
f:id:den_noh:20180513000427j:plain
20分ぐらい待つ
f:id:den_noh:20180513002720j:plain
・インストールが完了したら、次のオプションを受け入れます。
→Start Cloud SDK Shell
→gcloud init を実行する
f:id:den_noh:20180513002919j:plain

・これにより、ターミナル ウィンドウが開いて gcloud init コマンドが実行されます。
・ [1] Re-initialize this configuration [default] with new settingsを選択(1をコンソールに入力してEnter)[画面18]
・ [2] Log in with a new accountを選択[画面19]
・アカウントの選択画面になるのでDialogflowを作成してるアカウントを選択→許可
・作成しているプロジェクト名を選択(僕の場合1)[画面20]
・そのまま、gcloud コンポーネントの更新とインストール[画面21]
→gcloud components update && gcloud components install beta
とコンソールに入力してEnter(途中Dou you want to continue(Y/n)?と聞かれるのでY)[画面22]
15分ぐらい待機
・Update done!と表示されたらEnter押して完了[画面23]

以上でGoogle Cloud SDK のインストールと初期化は終了です。

f:id:den_noh:20180513004102j:plain
[画面18]

f:id:den_noh:20180513004244j:plain
[画面19]

f:id:den_noh:20180513004659j:plain
[画面20]

f:id:den_noh:20180513030629j:plain
[画面21]

f:id:den_noh:20180513030739j:plain
[画面23]

f:id:den_noh:20180513030748j:plain
[画面24]


今回は、自身のPC上の環境構築、Google Cloud Projectの設定、Google Cloud SDKのインストールをおこないました。
Fulfillmentを追加までにはさらに、次回以降の設定も行っていく必要があります。
次回はgcloudで関数のコンパイルをしていきます。


*1:無料トライアルについて

*2:無料トライアルについてを参照。無料トライアルで料金が発生することはありますか?の部分に、先ほど設定した300 ドル分のクレジットが適用される。使用額に応じて課金され、無料トライアルを試してる場合、300 ドル分のクレジットを使い切った時点でアカウントが一時停止されるため、勝手に有料に切り替わるということはない的なことが書いてある

Dialogflowのチュートリアルでチャットボットを作ってみる Part.2

Part.1ではDialogflowへのSign Upを行いました。

den-noh.hatenablog.com


今回から実際に天気を教えてくれるチャットボットのエージェントを作成していきます。


今回のブログの内容は、Dialogflowの
Building Your First Agent
に書かれているものです。

1.Agentを作成する。

・「Create Agent」をクリックします

・Agent nameに「my_weather」を記入、DEFAULT LANGUAGE で「English-en」*1、DEFAULT TIME ZONEで「Asia/Tokyo」を選択します[画面2]

・選択したらCREATEボタンを押します。

f:id:den_noh:20180503002430j:plain
[画面1]


f:id:den_noh:20180503005115j:plain
画面2


2.Intentを追加する。

次にIntentを作成します。

・左側の「Intents」をクリックし、「CREATE INTENT」をクリックまたは、Intentsの横のプラスボタンをクリックします。[画面3]

・作成したら、「Intent name」に任意の名前を入力し(今回はweather)、ADD TRAINING PHRASESをクリックします。 [画面4]

・Training Phrasesに以下の文章を追加します。[画面5]
「What is the weather like」
「What is the weather supposed to be」
Weather forecast
「What is the weather today」
「Weather for tomorrow」
Weather forecast in San Francisco tomorrow」
最後の3つの例では、"today","tomorrow"が同じ色で強調されていることが分かります。
また、"San Francisco"が別の色で強調されていることがわかります。

・追加したらSAVEボタンを押します。

f:id:den_noh:20180504004718j:plain
[画面3]


f:id:den_noh:20180504005430j:plain
[画面4]


f:id:den_noh:20180504010513j:plain
[画面5]

3.Try it nowに入力して返答を確かめる。

ここまでで一度、会話ができるか試してみます。

・右上にあるTry it nowに"How's the weather in Denver tomorrow"と入力しEnterキーを押します。[画面6]

・会話の応答は得られないですが、以下の情報がそれぞれの欄に返ってきていることを確認します。[画面7]
Response・・・エージェントにはまだ応答が設定されていないため"Not Available"が返されます。
Intent・・・weatherのインテントが要求に対してヒットした?(和訳がよくわからなかったです)
date and geo-city・・・質問文から読み取られた日付と地方都市の値がここに表示されています。今回の場合(日付は明日の日付、地方都市の名前はDenverとなっているはず)

f:id:den_noh:20180506014123j:plain
[画面6]


f:id:den_noh:20180506015347j:plain
[画面7]


4.Responsesの追加

次にResponsesに応答を追加し、エージェントが"Not Available"のような沈黙に陥らないようにします。

・ページを移動している場合は「Intents」から「weather」を選択し編集のページに移動し、「Response」の「ADD RESPONSE」をクリックします。[画面8]

・「Training Phrases」に入力したのと同じ方法で、以下の文章を「Response」の"Enter a text response"に追加します。[画面9]
「Sorry I don't know the weather」
「I'm not sure about the weather on $date」
「I don't know the weather for $date in $geo-city but I hope it's nice!」
$dateはリクエストの日付、$geo-cityは都市を挿入します。
エージェントが応答すると、収集されたパラメータ値が考慮され、収集された値を含む応答が使用されます。
たとえば、要求に日付のみが含まれている場合、2番目の応答を使用します。

・完了したら「SAVE」ボタンをクリックします。

f:id:den_noh:20180506204130j:plain
[画面8]


f:id:den_noh:20180506205815j:plain
[画面9]


5.もう一度Try it nowに入力して返答を確かめる。

Responsesに応答を追加した段階で、もう一度会話ができるか試してみます。

・再び右上にあるTry it nowに"How's the weather in Denver tomorrow"と入力しEnterキーを押します。[画面10]
Response・・・Responseに入力されたものから適切な応答を示します。
Intent・・・weatherのインテントが要求に対してヒットした?(和訳がよくわからなかったです)
date and geo-city・・・今回も質問文から読み取られた日付と地方都市の値がここに表示されています。今回の場合(日付は明日の日付、地方都市の名前はDenverとなっているはず)

・今回は先ほどResponsesで設定した回答が返ってくることが確認できます。

f:id:den_noh:20180506210732j:plain
[画面10]

以上で、Dialogflowでの簡単なエージェントを作成は終了です。
しかしまだまだ、自分で決めた応答しか返ってきません。

Part.3以降では、例えば「今日の東京の天気は?」と聞かれたら、
今日の東京の実際の天気を応答として返すようになることを目標として手を加えていきます。

*1:日本語も選択できますが、今回チュートリアルにあわせて作ってみたので英語を選択しています。

Dialogflowのチュートリアルでチャットボットを作ってみる Part.1

はじめに

最近チャットボットという言葉ををよく聞きます。
チャットボットとは、AppleのSiriやMicrosoftのりんなみたいに
人間同士の会話のように、テキストや音声に対して自動応答を返してくれるような技術とのこと。

チャットボットを作成するためのツールはいろいろな企業から提供されているみたいですが、今回はGoogleのDialogflowを使用していきます。

 

1.DialogfowにSign Upしてみる。

dialogflow.com

・上のDialogflowのページの「SIGN UP FOR FREE」をクリックします。[画面1]

・「Sign in with Google」をクリックします。[画面2]

・アカウント選択画面でアカウントを選択します。

・Dialogflow が Google アカウントへのアクセスをリクエストしていますと出てくるので許可します。

・Please review your account settingsの画面が出てくるので、「Country or territory」で「Japan」を選択、「Term of Service」にチェックを入れ、「ACCEPT」をクリックします。[画面3]

・Welcome to Dialogflow!のダイアログ画面が出てきます。[画面4]


f:id:den_noh:20180503000208j:plain
[画面1]


f:id:den_noh:20180503002331j:plain
[画面2]


f:id:den_noh:20180503002405j:plain
[画面3]


f:id:den_noh:20180503002430j:plain
[画面4]


以上で、DialogflowへのSign Upは終了です。
Part2ではAgentを作成していきます。

【C#】 ZXingを使ってWindowsフォームにQRコードを生成する

ZXingでQRコードを表示しようとしたけど、結構苦戦したので書いておこうと思います。

言語はC#、開発環境はVisual Studio 2017です。

1.ZXing.NETを利用するための準備をする。

ZXing.NETをダウンロード?インストール?この辺の正しい言葉がわからないけど、使えるようにします。
Visual Studioでソリューションを開いた後
[ツール]→[NuGetパッケージマネージャー]→[ソリューションのNuGetパッケージの管理]→[参照]
ここで、検索の部分に「ZXing」と入れて検索
[ZXing.Net選択]→[プロジェクトにチェックを入れインストール]
ソリューションエクスプローラーの参照の中にzxingが追加されていれば成功です。


2.Form1.cs[デザイン]の変更

QRコードを表示させるために以下の操作をします。
ツールボックスから[PictureBox]を選択
f:id:den_noh:20180324020843p:plain

[PictureBox]をフォーム上に配置
f:id:den_noh:20180324021107p:plain

3.コードを書く

先頭に以下のコードを追加

using ZXing;

フォームロードイベントに以下のコードを記入する。

 private void Form1_Load(object sender, EventArgs e)
        {
            BarcodeWriter qrcode = new BarcodeWriter
            {
                // 出力するコードの形式をQRコードに選択
                Format = BarcodeFormat.QR_CODE,
                Options = new ZXing.QrCode.QrCodeEncodingOptions
                {
                    // QRコードの信頼性
                    ErrorCorrection = ZXing.QrCode.Internal.ErrorCorrectionLevel.M,
                    // 日本語を表示したい場合シフトJISを指定
                    //CharacterSet = "Shift_JIS",
                    // デフォルト
                    CharacterSet = "ISO-8859-1",
                    // QRコードのサイズ決定
                    Height = 160,
                    Width = 160,
                    // QRコード周囲の余白の大きさ
                    Margin = 4
                }
            };
            // PictureBoxの中心に画像を表示するように設定
            pictureBox1.SizeMode = PictureBoxSizeMode.CenterImage;
            // QRコードを出力
            pictureBox1.Image = qrcode.Write("http://den-noh.hatenablog.com/");
        }

4.実際の表示

f:id:den_noh:20180324031747p:plain



 

エイトメロディーズ

今更だけど、MOTHERのEightMelodiesって曲めちゃくちゃいいね。

www.nicovideo.jp

 

MOTHERはやったことないんだけど、曲はとても好き。

優しい感じの曲でとてもいい。

 

 

いろいろと辛いことがあって、こういう優しい曲がすごく涙腺に来る。

辛くてしょうがないけど、まぁそういう時もあるし時間が経てばきっと大丈夫っていう気持ちになる。

 

本心としては、早く忘れ去りたいけど。

絵を描こう。

生きて生きて自分の好きな世界を描いて描いて、死んだらそれで終わり。

それだけ。きっと僕にでもできる。

イラスト練習 アニメ模写

イラスト練習 アニメ模写 1h00m

 

カットごとに尺の長さだとか、枚数、使いまわす部分を考えてから作るべきなのかなと思った。

白黒で一気につくろうと思っていたけど、使い回さないと同じような絵も枚数分色を塗ることになってしまう。

アニメ作りのテンプレみたいな物をしっかり探して読もうと思う。

 

 

f:id:den_noh:20180222233125j:plain

 

追記

タツノコプロ フルデジタル作画のワークフロー(TVPaint)

タツノコプロ | フルデジタル作画で作品作りを行ったワークフローを無償公開します!

実際の制作現場のワークフローなので参考になるかも。まだ読んでない。