Ken’s Tech Blog https://docs.microsoft.com/archive/blogs/kenakamu/feed.xml Mon, 08 Jan 2018 12:15:47 GMT ja hourly 1 リッチメニューで LINE ボットの UX を向上 https://docs.microsoft.com/archive/blogs/kenakamu/improve-ux-with-rich-menus-for-your-line-bot-ja Mon, 08 Jan 2018 21:15:47 GMT https://blogs.msdn.microsoft.com/kenakamu/?p=22795 こちらをご覧ください。これまで 1 つだけ設定できたリッチメニューが API 経由で操作できるようになっています。
  • 最大 10 のリッチメニューが作成可能。また各メニュー毎に 20 のエリアが設定可能。
  • 任意のリッチメニューを任意のユーザーに設定可能。
これにより、ユーザーの状態やキャンペーン期間中など動的にリッチメニューを差し替えることができるため面白いシナリオを実装出来そうです。 リッチメニューマネージャー まずリッチメニューを作る必要があり、API が公開されていますが、GUI で簡単にできるようにツールを作りました。 前提条件 Node.js: バージョン 8.7 で検証済 ブラウザ: Chrome で検証済 インストール 1. 以下コマンドでインストール 
npm install –g line-richmenus-manager
macOS の場合は必要に応じて sudo 実行。 
sudo npm install –g line-richmenus-manager
2. ツールがインストールできたら以下コマンドで実行。 
line-richmenus-manager –port:3000
ポート番号を省略した場合はポート 3000 で起動します。 3. Chrome で https://localhost:port にアクセス。 4. Channel Access Token を指定して OK をクリック。 image リッチメニューの作成 1. 画面上部の [+] アイコンをクリック。 2. Name と ChatBar Text を入力。 image 3. Choose File ボタンからファイルを選択。ファイルはサイズ 2500×1686 または 2500×843 ピクセルで、PNG か JPEG 形式が必須。 image 4. マウスで画像上に領域を指定。指定後に x/y/width/height を直接変更して微調整可能。 image 5. タイプと必要な値を入力して、Add Area をクリック。 image 6. 追加したエリアは番号から画面上のどこに紐づいているか確認可能。 image 7. 削除アイコンをクリックして削除が可能。または追加後も値を変更が可能。 8. 全てのエリアを追加したら、CREATE RICHMENU をクリック。 image 詳細を確認 メイン画面では全てのリッチメニューの一覧と詳細を確認できます。 1. 左のリッチメニュー一覧より詳細を確認したいメニューをクリック。一覧の更新は画面上部からリロードアイコンをクリック。 image 2. 右ペインに詳細が表示。 image 3. 削除したい場合、DELETE RICH MENU をクリック。 4. 任意のユーザーに対して紐づけおよび解除が可能。メニューをクリック後 UserID を入力して、OK をクリック。 image ユーザーに紐づいたリッチメニューを検索 あるユーザーに紐づいているリッチメニューを確認したい場合は検索ができます。 1. 画面上部の検索アイコンをクリック。 2. UserId を入力して Enter を押下。 image チャネルトークンの更新 トークンを更新する必要がある場合は、以下の手順で更新できます。 1. 画面上部の設定アイコンをクリック。 2. チャネルアクセストークンを入力して OK をクリック。 リッチメニューを作成してユーザーに紐づけたら、実機かシミュレーターで動作を確認してください。 シミュレーターで確認 シミュレーターの詳細はこちらの記事を確認してください。 リッチメニューのシミュレーション 1. シミュレーターを起動したら、リッチメニューアイコンをクリック。 image 2. リッチメニューが表示されたら、設定したエリアをクリックして動作を確認。 image 3. 以下はポストバックを設定した場合の動作。 image まとめ リッチメニューを使うと UX を大幅に向上できますので、是非使ってみてください。 中村 憲一郎]]> Improve UX with Rich Menus for your LINE Bot https://docs.microsoft.com/archive/blogs/kenakamu/improve-ux-with-rich-menus-for-your-line-bot Mon, 08 Jan 2018 00:55:39 GMT https://blogs.msdn.microsoft.com/kenakamu/?p=22785 here. Yes the feature was there from the first place, but now you can do the following.
  • Create up to 10 rich menus, with 20 actions for each menu.
  • Assign any rich menu to a user.
This is powerful and you can switch the menu depending on context such as if the user is new to the bot or if you have special offer during some period depending on user age, gender, etc. Rich Menus Manager First thing first. You need to create your own rich menus. API is available but you may prefer GUI to do it. There is a tool for you. Prerequisites The tools runs on Node.js and npm. so install them. And I recommend using Chrome browser as I only tested the tool against Chrome only. Install 1. Install the package with following command. 
npm install –g line-richmenus-manager
If you use macOS, then run the following command. 
sudo npm install –g line-richmenus-manager
2. Once the tool installed, run the following command to run it. 
line-richmenus-manager –port:3000
If you omit the port, it runs on 3000. Use sudo for macOS. 3. Open Chrome and access to https://localhost:port 4. Enter Channel Access Token and click OK. If you already have rich menus, it will list them. image Create Rich Menu You can easily create the rich menu. 1. Click [+] on top menu. 2. Enter Name and ChatBar Text. image 3. Click Choose File to select file. The file should be Size: 2500x1686 or 2500x843 pixels of PNG or JPEG. Once you select valid image, it will be loaded. image 4. Use mouse to draw rectangle on the image. You can redo as much as you want, or tweak the value in x/y/width/height directly to do pixel level adjustment. image 5. Select type and enter necessary data, then click “Add Area”. image 6. You can easily identify where the area mapped to the image by referring to the image. image 7. Use delete icon to delete the area if you want to re-add, or you can still change the values after you added the area. 8. Once you completed all the areas, click CREATE RICHMENU. image See the detail Once you created the rich menu, you can select a rich menu to see the detail. 1. Select newly added Rich Menu from the list. If you don’t see the list, then click recycle icon on the menu. image 2. You see the detail on the right pane. image 3. If you want to delete it, click DELETE RICH MENU. 4. You can LINK/UNLINK to the user from here, too. Click LINK or UNLINK button, then enter UserID. image Find a rich menu linked to a user If you want to know which rich menu current the user is linked to, you can search it. 1. Click Search icon on the top menu. 2. Enter UserId to look for and hit Enter. image Update the Channel Access Token In case you want to update the token, follow the steps below. 1. Click Gear icon on the top menu. 2. Enter Channel Access Token. Okay, that’s it! Now you can check if the rich menu actually linked to the user by using real device or simulator. Check the rich menu with LINE Simulator Install the simulator If you don’t know the tool yet, refer to this article for detail. Simulator the Rich Menu 1. Once you start the simulator, click Rich Menu icon. image 2. Then you see the rich menu. You can play with it as well. Click the area you assigned to. image 3. In this case, as I create area as postback, it does postback and text message. image Summery Rich Menu is a great differentiator to improve UX. Try them and please let me know what you have achieved with them! Ken]]> Quick POC with LINE bot simulator https://docs.microsoft.com/archive/blogs/kenakamu/quick-poc-with-line-bot-simulator Sun, 24 Dec 2017 20:59:17 GMT https://blogs.msdn.microsoft.com/kenakamu/?p=22515 here. So what’s the new feature? It’s POC feature. Proof of Concept feature This is more like mocking feature, that anyone can craft bot chat flow only from UI. The reason I implemented this is that I get tired of writing POC bot which simply shows what we can do to customer. Some people create mock demo by using screenshot and PowerPoint but I wanted to make this process easier. Feature details There are several thing you can do. Send messages as user/bot Easy to craft messages Remove or move chat item as you want Save and load the crafted chat so that you can import it to other environment Let’s look into them one by one. User the simulator To use it, please read the instruction here. Hope this makes your developer life easier. pocdemo Ken]]> Azure Bot サービスとLUIS が GA して変わったこと: その1 Azure Bot サービス https://docs.microsoft.com/archive/blogs/kenakamu/bot-service-and-luis-ga-whats-new Sat, 23 Dec 2017 00:40:32 GMT https://blogs.msdn.microsoft.com/kenakamu/?p=22506 Azure Bot サービス Azure ポータルから作成できる Bot のサービスは 3 種類になりました。 image
  • Web App Bot: Web App とボット用のチャネル登録を統合したサービス
  • Functions Bot: Azure ファンクションとチャネル登録を統合したサービス
  • Bot Channels Registration: 既にボット用 API がある場合に使う、チャネル登録サービス
Bot Channels Registration まずは全てに共通する Bot Channels Registration から見ていきます。これまでポータルでボット登録ができましたが、この機能でほぼ同じことが出来ます。 ウィザードにそって作成すると、以下のことをしてくれます。
  • Microsoft App Id の取得
  • Application Insights の構成 (選んだ場合)
  • ストレージの作成 (選んだ場合)
機能 作成された Bot Channels Registration を開くと以下のメニューが表示されます。 image 概要にはドキュメントとサンプルのリンクがあります。またタグまでの項目は他の Azure リソースと共通です。 以下に個人的に重要な順番でメニューを確認していきます。ほぼポータルであった機能です。 設定 設定ではこれまでポータルで登録できた、アイコンやメッセージングエンドポイントの指定等ができます。 チャネル Skype や Teams など複数のチャネル設定が行えます。尚、以前は Skype が既定で構成されていましたが、今回から WebChat のみ構成されています。 image Test in Web Chat 公開済のボットを Web チャットコントロールで検証できます。 分析 Application Insight を利用して収集したデータで、Bot の利用状況を確認できます。 Speech priming LUIS と連携する場合に設定します。 Bot Service の料金 利用するサービスのレベルを選択できます。S1 にすると SLA がついてくるので、正式サービスは是非こちらで。 image Web App Bot 次に Web App Bot です。機能としては上記の Bot Channels Registration に Web App がついてきますが、新規作成時に以下のことをやってくれます。
  • Web App の作成
  • メッセージングエンドポイントの設定
  • Microsoft App ID とパスワードの取得およびアプリケーション設定に値を設定
  • 選択した言語でのボットアプリテンプレートの作成
  • Application Insights の構成 (選んだ場合)
  • ストレージの作成 (選んだ場合)
また Bot Channel Registration のメニューに ビルドと App Service の設定が追加されます。 image image ビルド 以下の内容が選択できます。ここから自動生成されたコードをオンラインで直接編集することも、ソリューションとしてダウンロードもできます。ダウンロードしたソリューションは、Web App に対する公開設定も含まれているため、簡単に発行が行えます。 image オンラインエディターを使うと素早くコードの確認と変更が行えます。 image アプリケーション設定 Web App のアプリケーション設定部分だけ確認、変更が出来ます。Microsoft App パスワードもこちらから確認可能。 すべての App Service 設定 関連付いている Web App へのリンクとなっているため、ワンクリックで Web App に移動が可能です。 Functions Bot ほぼ Web App ボットと同じですが、Azure ファンクションが作成されます。それに伴いアプリケーション設定の値も Azure ファンクション用のものとなります。 ビルド ビルドも内容はほぼ同じですが、はじめのメニューが Azure Functions へのリンクとなっています。 image Bot Framework ポータル 最後に Bot Framework のポータル (https://dev.botframework.com/) ですが、以下のように変わりました。 既存のボット Migrate ボタンが表示され、ワンクリックで Azure サブスクリプションとの連携および移行が可能です。 image Migrate 画面では Azure サブスクリプションとリージョンを選択。 image 規約画面 image 完了画面 image 上記ボタンをクリックすると Azure ポータルに遷移します。個の手順で移行した場合、Bot Channels Registration を作成して手動でメッセージングエンドポイントを設定した状態となります。 新規ボット ボットを作成しようとすると、Azure ポータルに遷移します。 まとめ Bot サービスが複数あることで一瞬混乱しますが、内容を抑えるととても簡単にかつ迅速に使えることが分かります。是非新しい Bot サービスをお試しください。次回は Language Understanding サービスを見ていきます。 中村 憲一郎]]> Microsoft Bot Framework と LINE を連携して賢いボットを開発 https://docs.microsoft.com/archive/blogs/kenakamu/develop-intelligent-line-bot-with-microsoft-bot-framework-ja Fri, 15 Dec 2017 16:50:05 GMT https://blogs.msdn.microsoft.com/kenakamu/?p=22305 https://dev.botframework.com) を提供しています。主な機能としては
  • 一度書けば様々なプラットフォームに展開が可能。(skype, facebook, skype for business, slack, sms, email, など)
  • コンテキスト自動制御による、複雑な会話を実現するダイアログ機能
  • C#/Node.js SDK
  • Visual Studio 用テンプレートやエミュレーター
  • Microsoft コグニティブサービスとのシームレスな連携
個人的にはダイアログのサポートが最高です。もし一問一答ボット作るだけなら不要ですが、前回会話の内容を保持するなどスクラッチでダイアログ機能を作ることを考えると気が遠くなります。 では何が問題かというと、LINE を連携先として現時点でサポートしていないという点です。 解決策 Bot Framework では汎用的に使えるダイレクトラインという接続方法を提供しているため、こちらを使えばどんなプラットフォームとも連携が可能です。また既に C# でコネクタを開発済です。 対象者 既に Bot Framework でボット開発をしていて、 LINE にもつなげたい開発者 LINE ボット開発者で Bot Framework を使いたい開発者 前提
  • Microsoft Bot Framework bot アプリケーション。この記事では GitHub にあるサンプルを使います。
  • Visual Studio 2017
  • Azure サブスクリプション
  • LINE 開発者アカウントとボット登録
LINE 開発者アカウントとボットアカウントの登録は以前の記事をご覧ください。 セットアップ Bot Framework まず Bot Framework 側から設定します。ここではサンプルのサンドウィッチボットを使いました。 1. https://dev.botframework.com から登録済のボットを開き、“Channels” を確認。 image 2. “Direct Line” をクリック。 image 3. “Secret Keys” をコピーして、“Done” をクリック。 image Azure ストレージ コネクターとなるアプリでは Azure ストレージを使って情報をトラックしているため、以下の手順でストレージを用意。 1. Azure ポータルにログイン https://portal.azure.com 2. ストレージアカウントを作成、もしくは既にある場合はそちらも利用可能。 3. アクセスキーのメニューより接続文字列をコピー。 LINE ボット 1. LINE 開発者ポータルよりボットアカウントを選択。 2. チャネルシークレットとチャネルアクセストークンを取得。 コネクター 1. Visual Studio 2017 を開いてツール | 拡張機能と更新プログラムを選択。 image 2. オンラインを選択して、“LINE Bot C#” を検索してインストール。必要に応じて Visual Studio を再起動。 image 3. 新しいプロジェクトより “LineWithBotFrameworkApplication” テンプレートを選択してプロジェクトを作成。 image 4. web.config を開いてパラメーターを設定。 image 5. 必要に応じて NuGet のリストアやアップデートを実施。 6. プロジェクトを右クリックして、発行をクリック。 image 7. Azure などに公開してアドレスを確認。 8. LINE 開発者ポータルで Webhook URL を更新。“/api/linebot” を末尾につけ忘れないように。 image テスト 最後に動作確認です。 1. LINE クライアントから LINE 開発者ポータルにある QR コードを読み込んでボットを登録。 image 2. “hi” と送ってあとは期待通り動くか確認。 IMG_1922 動作原理 基本的に LINE プラットフォームからきたデータを Bot Framework が分かるデータに書き換えて送り、返信はその逆をしているだけです。いくつか制限がありうまくできない場合もありますが、そこは都度調整が必要です。 中村 憲一郎]]> ボット開発用 LINE クライアントシミュレーターで開発スピードを上げる https://docs.microsoft.com/archive/blogs/kenakamu/improve-line-bot-development-productivity-with-simulator-ja Thu, 14 Dec 2017 15:51:07 GMT https://blogs.msdn.microsoft.com/kenakamu/?p=22225 Windows や MacOS 用の LINE クライアント LINE アプリはモバイル版以外にもあるため、ボット開発ではそちらを使いますが、テンプレートのようなリッチな機能を試そうとすると、スマートフォンを使うように促されます。 image シミュレーター ではどうするか？ということでシミュレーターを作ってみました。これでより簡単にテストが可能です。 npm: https://www.npmjs.com/package/line-simulator GitHub: https://github.com/kenakamu/LINESimulator 試すには LINE のボットアプリが必要です。もし自前のアプリがない場合は、C# でよければ前回の記事をご覧ください。ここでは前回記事で作ったボットを使って説明します。尚、シミュレーター自体は開発言語に依存しません。 LINE ボットアプリ側の準備 シミュレーターを使うためには、LINE ボットアプリ側で少し準備が必要です。 1. run.cs ファイルを開く。 2. HttpTriggerFunction コンストラクタにある、LineMessagingClient のコンストラクタにシミュレーターのアドレスを第 2 引数として渡す。 image 3. 統合コンソールでアプリケーションルートに移動して、dotnet build を実行。 image 4. .\bin\Debug\netstandard2.0\ に移動して、func host start でファンクション起動。 image 5. 以下の画面が出たら起動完了。 image 6. F5 キーを押下して dotnet.exe にアタッチしデバッグを開始。 他の言語を利用している場合も基本同じような流れですが、詳細は GitHub の説明 を確認してください。 シミュレーターの利用 1. 以下のコマンドを実行してシミュレーターをインストールします。 
npm install -g line-simulator
2. 以下のコマンドを実行してシミュレーターを起動します。 
line-simulator
3. 以下のように接続画面が出るので、LINE 開発者ポータルより必要な情報を入力。Bot API Server Address にはボットアプリが待ち受けているローカルのアドレスを指定。ここでは https://localhost:7071/api/bot。最後に Connect をクリック。 image 4. 無事接続できるとシミュレーターの画面が出るので、チャットウィンドウよりメッセージを送信。 basic 5. 必要に応じてデバッグを実行。 その他の機能は GitHub の説明 を確認してください。 コンセプト ボット開発者の生産性を向上する事が最大の目的であるため、本当の LINE クライアントを完全には再現していません。また本来であれば面倒なフォローやアンフォロー、ビーコンの送信などが自由に行えます。最終的な動作確認は引き続き実機を使ってください。 まとめ 個人的には検証簡単になって幸せですが、グループの機能やリッチメニューなどまだまだ機能追加が必要です。興味がある方はコラボやフィードバックをお願いします。 中村 憲一郎]]> Azure ファンクションと C# によるクロスプラットフォーム LINE Bot 開発 https://docs.microsoft.com/archive/blogs/kenakamu/c-deline-bot-development-with-azure-function-for-cross-platform-ja Thu, 14 Dec 2017 14:29:12 GMT https://blogs.msdn.microsoft.com/kenakamu/?p=22145 前提条件 LINE のセットアップ 既に LINE ボットアプリ作ったことある場合はスキップしてください。 1. https://developers.line.me/ja/ で LINE 開発者アカウントを作成。 2. “Messaging API(ボット)をはじめる” をクリック。 image 3. 既にプロバイダーがあれば選択、無ければプラスアイコンをクリック。 image 4. プロバイダー作る場合は名前を入力して、[追加] をクリック。その後、次のページをクリック。 image 5. アプリアイコンや名前、説明を指定。名前に ”LINE" と入れると失敗する模様。 image 6. プランは“Developer Trial” を選択。業種は任意で選択し、メールアドレスを入力して ”確認” をクリック。 image 7. 利用規約に (自己責任で) 同意して、”作成” をクリック。 image 8. 画面が切り替わるので、“設定が完了していません” をクリックします。 image 9. 構成ページに移動するので、メッセージ送受信設定を確認。アクセストークンで ”再発行” をクリック。 image 10. “再発行” をクリック。0 時間後を選択すると失効しない。 image 11. “Webhook 送信” と “Bot のグループトーク参加” を有効に設定。 image 12. “LINE@機能の利用” で “自動応答メッセージ” と “友だち追加時のあいさつ” を利用しないに設定します。 image 13. 最後に一番下にある QR コードを LINE アプリケーションで読み取ってボットを追加します。 IMG_1955 まずはここまで。構成画面は開いておいてください。 Azure の準備 1. Azure ポータルにログイン https://portal.azure.com 2. 作成するリソースをまとめるため、リソースグループを作ります。メニューより ”リソースグループ” を選択。 image 3. ”追加” をクリック。 image 4. 名前とリージョンを選択して、作成。 image 5. 作成が完了したら、リストを更新して作成したリソースグループを選択。 6. ”追加” をクリックしてモジュールを追加。 image 7. “function” で検索して、 Function App を選択。右側にブレードが開くので、”作成” をクリック。 image 8. 必須項目を埋めて作成。またストレージも自動作成を選択。 image 9. 作成が完了したらリソースグループの画面から追加されたリソースを確認。 image Azure の準備はこれで一旦終了。画面は開いておいてください。 Azure Functions アプリのランタイムインストール Azure ファンクションのランタイムとツールをインストールします。 1. コマンドプロンプトかターミナルを開く。 2. 以下のコマンドを実行してツールをインストール。 
npm i -g azure-functions-core-tools@core
Mac の場合は sudo で実行。 
sudo npm i -g azure-functions-core-tools@core --unsafe-perm
3. func コマンドを実行してインストールできているか確認。 image Bot アプリケーションのコード Azure Function 用のテンプレートは yeoman を使って作成できます。まず yeoman とジェネレーターをインストールします。 1. コマンドプロンプトやターミナルで以下のコマンドを実行して yeoman をインストール npm i -g yeoman 2. 以下のコマンドで LINE ボット用のジェネレーターをインストール npm i -g generator-line-bot 3. フォルダを作成。作成したフォルダに移動。 4. 以下のコマンドで C# Azure ファンクションのプロジェクトを作成。 yo line-bot mybot –csharp 5. Channel Secret と Channel Access Token を聞かれるので、LINE 開発者ポータルより値をコピーして貼り付け。 ※通常このキーは大事なものですので、外部には公開しないでください。ここで表示したものはブログ公開時には既に変更済です。 image image image 6. mybot フォルダに移動して、code . でフォルダを Visual Studio Code で開く。 7. Azure ポータルに戻り、ストレージアカウントを開く。 image 8. ”アクセスキー” を選択。 image 9. ”接続文字列” のいずれかをコピー。 image 10. local.settings.json の“AzureWebJobsStorage” に値を張り付け。LINE の設定は自動で入っていることを確認。 image 11. “表示” メニューより “統合ターミナル” を起動。 image 12. ‘'dotnet restore” コマンドで依存関係をダウンロード。 image 13. “dotnet build” でコンパイルを実行。 image 14. 全てのロジックは LineBotApp.cs  にあるので必要に応じて編集。 ローカルでのテスト まずローカルで検証します。そのためには ngrok で LINE プラットフォームからのリクエストをローカルにフォワード出来るようにします。 1. コマンドプロンプトやターミナルを開いて、nrgok のインストールパスに移動。PATH を設定済みの場合はスキップ。 2. 以下のコマンドを実行してローカルポート 7071 を指定。ポート 7071 はファンクションアプリの既定ポート 
ngrok.exe http --host-header=localhost:7071 7071
3. 結果の画面で ngrok サーバーのアドレスを確認。以下の場合は “0677b5d8.ngrok.io” image 4. LINE 開発者ポータルに戻って ”Webhook URL" を更新 “/api/linebot” を最後につける。このアドレスでアプリが待ち受け。 image 5. 準備が整ったので、Visual Studio Code の統合ターミナルで /bin/Debug/netstandard2.0 に移動。 image 6. 以下のコマンドでアプリを実行。 
func host start
7. 結果として以下のように緑で待ち受けアドレスが出ていれば起動は完了。 image 8. コードにアタッチするため、F5 キーを押下。リストより dotnet.exe を選択。 image これで準備は完了です。 デバッグ実行 1. LINE アプリケーションより ”こんにちは” と送信。返信が来ることを確認。 IMG_1956 2. 次に任意の場所にブレークポイントを設定。ここでは run.cs の Run メソッドに設定。 image 3. LINE クライアントよりメッセージを送ってデバッグできることを確認。 image アプリケーションの発行 最後に開発したアプリケーションを Azure に公開します。 1. Visual Studio Code でデバッグツールバーより切断ボタンをクリック。 image 2. 統合コンソールよりファンクションアプリの実行画面を選択して、Ctrl+C を押下してファンクションアプリを停止。 image 3. 以下のコマンドを実行して Azure にログイン。 
func azure login
4. 指示に従ってログインを完了。 image 5. 指定された URL を開いてコードを張り付け、”続行” をクリック。 image 6. ログインが完了したら以下コマンドでアプリを発行。publish の後にはファンクションアプリの名前を指定。 
func azure functionapp publish lineserverlessbotja -i -y
7. 発行が完了したら Azure ポータルに移動して、ファンクションアプリを開く。 image 8. “アプリケーション設定” をクリック。 image 9. LINE のチャネルトークンなどの変数が存在することを確認。 image 10. 画面上部の ”概要” より “Function App の設定” を開き、”ランタイム バージョン” で “beta” を選択。これで v2 の機能が利用可能。 image 11. LINEBOT を左のペインから選択。 image 11. 右上にある “関数のURL の取得” をクリックして URL をコピー image 12. LINE 開発者ポータルより Webhook URL を更新。 image 公開はこれで完了です。LINE クライアントより動作を確認。 まとめ 少し手順が長くなりましたが上手くいったでしょうか？次回は LINE ボット開発に使えるシミュレーターについて紹介します。 中村 憲一郎]]> Improve LINE Bot development productivity with Visual Studio Code Extension https://docs.microsoft.com/archive/blogs/kenakamu/improve-line-bot-development-productivity-with-visual-studio-code-extension Tue, 05 Dec 2017 02:56:21 GMT https://blogs.msdn.microsoft.com/kenakamu/?p=21445 previous article, I explained about LINE simulator. In this article, I explain VSCode extension to improve LINE Bot development. LINE Bot Development Utilities This is the VSCode extension. See the link for detail explanation. Visual Studio Marketplace : https://marketplace.visualstudio.com/items?itemName=kenakamu.linebotutilities GitHub: https://github.com/kenakamu/LINEBotDeveloperUtil How to setup 1. Open Visual Studio Code. 2. Click Extension menu on the left. image 3. Search for “LINE Bot Development Utilities” and click “Install”. image 4. Once installed, click “Reload”. image 5. That’s all. How to use

JSON code snippets

  1. Open any .json file and start typing "text".
  2. Select snippet candidate for "LINE Text Message".
  3. You see the JSON object for Text Message will be auto generate. snipppet

JSON to UI converter

  1. Open any .json file, and select JSON object.
  2. Click preview icon on the right top.
  3. You see the parsed UI results. You can change the JSON data which update the UI realtime. ui1
  4. For nested JSON like buttons, you need to explicitly select JSON object from first '{' to last '}'. ui2

Supported Snippets.

  • Text Message
  • Sticker Message (Only Id)
  • Image Message
  • Video Message
  • Audio Message
  • Imagemap Message
  • Confirm Template message
  • Buttons Template message
  • Carousel Template message
  • Image Carousel Template message
  Please let me know if this helps. Ken]]> Develop intelligent LINE bot with Microsoft Bot Framework https://docs.microsoft.com/archive/blogs/kenakamu/develop-intelligent-line-bot-with-microsoft-bot-framework Mon, 04 Dec 2017 17:08:05 GMT https://blogs.msdn.microsoft.com/kenakamu/?p=21397 https://dev.botframework.com) for bot developers. The key features are:
  • Write once, publish to multiple chat platform (skype, facebook, skype for business, slack, sms, email, etc.)
  • Provide dialog support so that developers easily implement conversation flow without managing the conversation.
  • C#/Node.js SDK
  • IDE and simulator support
  • Native integration with Microsoft Cognitive services.
The best part, for me at least, is the dialog support. If the bot only does single Q and A, then it is not much different from search experience. But with dialog support, bot remembers previous conversations and use multiple input to execute business logic to achieve something greater. The issue? Microsoft Bot Framework do not support LINE platform atm. Solution Yes, there is a solution. Microsoft Bot Framework have channel called “Direct Line”, which let developer connect whatever they want. So only we need is a connector which uses it. We implement the connector by using C# and it is super easy to set up. Who want to use this? There are two types of audience for this solution.
  • You are bot developer using Microsoft Bot Framework who want to connect to LINE.
  • You are LINE bot developer who wants to utilize Microsoft Bot Framework
Prerequisites
  • Microsoft Bot Framework bot application. I assume you already have one anyway. If you don’t have it at the moment, you can grab samples from GitHub.
  • Visual Studio 2017
  • Azure Subscription
  • LINE developer account and one bot setup
For LINE developer account and bot setup, please refer to Setup LINE section of my previous article Setup Bot Framework Let’s start from Bot Framework side. I am using sample Pizza bot application for my test here. 1. Go to https://dev.botframework.com and select your registered bot and select “Channels”. image 2. Click “Direct Line” in “Add a channel”. image 3. Copy one of Secret Keys and click “Done”. image Azure Storage To track several items, we use Azure Storage. 1. Go to Azure Portal. https://portal.azure.com 2. Create a storage account. I created one in the same resource as my bot application lives. 3. Move to the storage account you created, and click “Access keys”. image 4. Copy one of the CONNECTION STRING.   LINE bot 1. Go to LINE Developer portal (https://developers.line.me) and select your LINE bot. 2. Copy Channel Secret. image 3. Issue and copy channel access token. image 4. Keep the window open as we will update webhook URL later. Connector Next, setup connector. 1. Open Visual Studio 2017, go to tools | Extensions and Updates. image 2. Search “LINE Bot C# Template from Online and install it. Restart the VS if necessary. image 3. From project, select “LineWithBotFrameworkApplication” template and create the project. image 4. Open web.config and fill parameters. image 5 For NuGet packages, update as you need. 6. Right click the project and click “Publish”. image 7. Publish to Azure Web Apps, and copy the URL. 8. Go back to LINE developer portal and update Webhook URL. Do not forget to add “/api/linebot” at the end. image Test the bot Everything up and running, so let’s test. 1. From your LINE client, add the bot by scanning QR code in LINE developer portal page. image 2. send “hi” and then follow it. Oh I just realized that I am not using pizza bot sample but using sandwich sample. Anyway it doesn’t matter much here. IMG_1922 How this works It’s very simple. The connector receives the message from LINE Platform, and redirect it to Bot Framework via direct line. Then it receives the results back from Bot Framework, then redirect to LINE Platform. It just changes the format in between. Anyway hope you enjoy hooking your Bot Framework application to LINE Smile Ken]]> Improve LINE Bot development productivity with Simulator https://docs.microsoft.com/archive/blogs/kenakamu/improve-line-bot-development-productivity-with-simulator Mon, 04 Dec 2017 01:06:36 GMT https://blogs.msdn.microsoft.com/kenakamu/?p=21175 LINE client on Windows and MacOS You may say there is a native LINE client for Windows or MacOS. Yes and no. The native app is good enough to test text message to bot, but when it comes to rich messages, such as buttons, it won’t work like this. image LINE client simulator for bot developer So what shall I do? screen mirroring is a good way to solve this, but to simplify the process, I created LINE client simulator for bot developers. GitHub: https://github.com/kenakamu/LINESimulator For how to use it, please read the README there. Concept The concept is to enable developer (me) to send text, file, location, sticker, system messages such as follow/unfollow or beacon to my bot application easily, and see the result like mobile device, including rich messages. To fully works as simulator, your bot application also needs to talk back to the simulator, so you have to pass the URL to your bot application. What’s next? It has basic features, which you can try to see by your own eyes. However we still need more improvement so that we can test all the features without using physical phone. Any additional benefit? Yes. As this is simply a web application, now it is easier to write UI test code by using any automation technologies. Demo Image basic Ken]]>