tag:crieit.net,2005:https://crieit.net/tags/LINEBot/feed 「LINEBot」の記事 - Crieit Crieitでタグ「LINEBot」に投稿された最近の記事 2022-04-09T22:40:57+09:00 https://crieit.net/tags/LINEBot/feed tag:crieit.net,2005:PublicArticle/18161 2022-04-09T22:40:57+09:00 2022-04-09T22:40:57+09:00 https://crieit.net/posts/metnal 気分が落ち込んだ時に、自動で周囲の人に通知するアプリを作りました <p>こんにちは!</p> <p>「<a target="_blank" rel="nofollow noopener" href="https://metnal.stock-stu.com/">metnal</a>」というアプリを作りましたので、ご紹介させてください。</p> <h2 id="metnalとは"><a href="#metnal%E3%81%A8%E3%81%AF">metnalとは</a></h2> <p>metnelは、「気分が落ち込んだ時に、自動で家族や友人、パートナーなどに通知することで、周囲の人の助けを受けることをサポートする」アプリです。</p> <p>特徴として、<br /> 1. 手軽に始められるように、LINEでのみログイン可能。メールアドレスやパスワードでアカウントを管理すると、アカウントを紛失したり、ログインが面倒になったりすることで、離脱してしまうリスクがあります(多くの人がアカウントを紛失した経験があると思います笑)。<br /> 2. 機能は非常にシンプル。その時の気分をつけるだけで、独自のスコアリングに基づき、自動で気分のスコアが表示されます。<br /> 3. 周囲の人に、気分のスコアを共有できます。また周囲の人が登録することで、スコアが極端に低くなった時(気分が落ち込んだ時)にLINEのbotを通じて自動で通知されます。</p> <p>となっております。<br /> このアプリが十分に機能した場合、周囲の人の落ち込みを即座に発見できることが期待されます。</p> <h3 id="利用方法"><a href="#%E5%88%A9%E7%94%A8%E6%96%B9%E6%B3%95">利用方法</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://stock-stu.com/introduce_metnal/#howtouse">こちら</a>をご覧ください!</p> <h3 id="利用技術等"><a href="#%E5%88%A9%E7%94%A8%E6%8A%80%E8%A1%93%E7%AD%89">利用技術等</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://qiita.com/StStu/items/11dabe66a2f92665d551#使用技術等">qiita</a>にまとめてみました。<br /> 一読して頂ければ幸いです!</p> nyonyataro tag:crieit.net,2005:PublicArticle/15738 2020-02-27T23:28:56+09:00 2020-03-06T23:45:06+09:00 https://crieit.net/posts/GAS-LINE-messaging-API GAS & LINE messaging APIの学習便利帳 <h2 id="はじめに"><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">はじめに</a></h2> <p>ノンプログラマの僕がGAS(Google Apps Script)とLINE messaging APIを活用したツールを制作するにあたり、全くよくわからない状態から何となくそれらしいものが作れるようになるまでに学習した、主な教材とブログをまとめておきます。<br /> これからGASを習得したい! LINE botを制作したい! という方の情報収集の参考にしてもらえたら嬉しいです。</p> <h2 id="(1)GASの習得のために"><a href="#%EF%BC%88%EF%BC%91%EF%BC%89GAS%E3%81%AE%E7%BF%92%E5%BE%97%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AB">(1)GASの習得のために</a></h2> <h3 id="Udemy教材"><a href="#Udemy%E6%95%99%E6%9D%90">Udemy教材</a></h3> <p>●<a target="_blank" rel="nofollow noopener" href="https://www.udemy.com/course/gas_for_operational_efficiency/">ビジネスパーソンに贈る業務効率化大全 〜Google Apps Scriptによる業務の自動化〜 | Udemy</a></p> <p>もはやGAS入門の決定版と言いたい。実際に業務効率化にすぐに活用できるスクリプトを書きながら、GASの基本から段階を追って体系的に習得できます。<br /> とても解説がわかりやすいし、一通りの必要な操作(Googleカレンダー、Googleフォーム、Googleメール、LINEやSlackへの通知、スプレッドシート・ドキュメントの扱いなど)を実戦形式で学べます。<br /> 最後は駆け足ながらGASでのWebスクレイピングの講座もあるので、これを足がかりにもっと深く学びたくなりました。</p> <h3 id="ブログ"><a href="#%E3%83%96%E3%83%AD%E3%82%B0">ブログ</a></h3> <p>●<a target="_blank" rel="nofollow noopener" href="https://tonari-it.com/">いつも隣にITのお仕事 | 毎日の業務が楽チンに!</a></p> <p>書籍「詳解!GoogleAppsScript完全入門」の著者さま。こちらも基本から解説してくれていて文章がとてもわかりやすく、コードだけでなくプログラミング共通の基本の考え方に通じる学びがあります。<br /> 作業をしていると「GAS + やりたいこと」「Javascript + やりたいこと」で検索して解決することが多いのですが、その際によくヒットしてきます。<br /> GASのPropaty Serciceで秘匿情報を隠すという考え方と実際のやり方はこちらで学びました。この初心者向けGASのシリーズで体系的にGASを学ぶことができるのも面白そうです。<br /> ちなみに僕は次にこちらに連載されている「Gmailの添付ファイルをGoogleドライブに自動保存する」というツールの作成に挑戦してみようと思っています。</p> <p>→ <a target="_blank" rel="nofollow noopener" href="https://tonari-it.com/gas-property-store/">【初心者向けGAS】プロパティストアの概要とスクリプトプロパティの編集方法</a><br /> → <a target="_blank" rel="nofollow noopener" href="https://tonari-it.com/gas-gmail-attachment-drive/">Google Apps ScriptでGmailの添付ファイルをGoogleドライブに保存する</a></p> <h2 id="(2)GASでLINE messaging APIを操作するために"><a href="#%EF%BC%88%EF%BC%92%EF%BC%89GAS%E3%81%A7LINE+messaging+API%E3%82%92%E6%93%8D%E4%BD%9C%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB">(2)GASでLINE messaging APIを操作するために</a></h2> <h3 id="Udemy教材"><a href="#Udemy%E6%95%99%E6%9D%90">Udemy教材</a></h3> <p>●<a target="_blank" rel="nofollow noopener" href="https://www.udemy.com/course/line-bot-x/">はじめてのLINEBOTの作り方 秘書ボットを作ろう | Udemy</a></p> <p>こちらはGASでLINE botを制作するプロセスを学べる講座。<br /> コードの解説ももちろんありますが、それよりも初めてLINE botを作る際にサンプルコードを活用して「動くものを作って流れを体感する」という部分でとても勉強になりました。<br /> 基本の「おうむ返しボット」(ユーザーがLINEで投稿したメッセージをそのまま返答する)からスタートして、Googleカレンダーと連携して予定を追加したり毎日決まった時間に予定をLINEに通知してくれる「秘書ボット」を作成するという講座。作成したボットはそのまま自分でも活用しています。</p> <p>僕はLINE bot制作にあたってこの講座を一番最初に学んだのですが、それによりLINE messaging APIの動きを体感することができました。<br /> 細かいコード部分はこの講座だけだと理解が難しいのですが、作りたいものを作っていく過程で改めてこのサンプルコード読み解いていくという作業を行いました。<br /> GASのCache Serviceというものを利用してLINE botの処理を分岐する方法はこの講座で知ることができました。</p> <h3 id="ブログ"><a href="#%E3%83%96%E3%83%AD%E3%82%B0">ブログ</a></h3> <p>●<a target="_blank" rel="nofollow noopener" href="https://arukayies.com/">30歳からの「くら」のブログ</a></p> <p>LINE messaging APIをGASのコードに落とし込むための書き方をだいぶ参考にしました。<br /> 特に「日時選択アクション」「クイックリプライ」「テンプレートメッセージ」などを使うためのシンプルなコードが紹介されているので、公式ドキュメントだけだとどうGASで書いたら良いかわからなかったものも実際にコードに落とし込むことができます。</p> <p>●<a target="_blank" rel="nofollow noopener" href="https://note.com/_hasekatsu">HASEKATSU|note</a></p> <p>GAS + LINE botに特化して数年にわたり独学を続けてきた血と涙と汗の結晶を感じます!<br /> これまでに学んできた大量のコードを公開&販売しつつ、noteの記事では惜しみなく実際のコードと積み上げてきた情報を出して解説しています。フレームワーク的なものも自作していてやばい。これからも楽しみです。</p> <p>今回何よりも僕が助かったのが、リッチメニューをLINE公式アカウントからではなくLINE messaging APIを使ってGASのスクリプトで実装するやり方です。これは他にほとんど情報がなく、大いに頼ることになりました。<br /> またCoconaraでのサービス提供の実績もあり、実践的に色々試行錯誤している姿勢を僕も学んでトライしていきたいと思います。</p> <p>→ <a target="_blank" rel="nofollow noopener" href="https://note.com/_hasekatsu/n/n83afa5ffee56">Postmanでリッチメニューを設定する方法【LINE Messaging API×GAS】|HASEKATSU|note</a><br /> → <a target="_blank" rel="nofollow noopener" href="https://note.com/_hasekatsu/n/n37fc2985aa0d?creator_urlname=_hasekatsu">GASでLINE Messaging APIのリッチメニューオブジェクトをGoogleスライドから作成する【実戦GoogleAppsScriptプログラミング講座~天空闘技場~】|HASEKATSU|note</a><br /> → <a target="_blank" rel="nofollow noopener" href="https://note.com/_hasekatsu/n/n66277fe34638?creator_urlname=_hasekatsu">GASでLINE Messaging APIのリッチメニュー画像を反映させる【実戦GoogleAppsScriptプログラミング講座~天空闘技場~】|HASEKATSU|note</a></p> <h2 id="おわりに"><a href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">おわりに</a></h2> <p>以上です。<br /> 入門(何も知らない段階)〜初級(基礎を理解する段階)〜中級(実際に制作する段階)に到るまで、これらの教材とブログ記事で学べばかなりいいところまで行けると思います。<br /> 自分がこれまで学ばせていただいた感謝の意も込めて。ありがとううう(そしてこれからもよろしくお願いします)</p> Massa tag:crieit.net,2005:PublicArticle/15697 2020-01-24T17:37:21+09:00 2020-01-24T18:25:11+09:00 https://crieit.net/posts/GAS-LINE 【GAS】家族で使えるゴミ出しリマインダ LINEチャットボットを作った <h2 id="はじめに"><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">はじめに</a></h2> <p>日常のゴミ出しって難題ですよね。</p> <p>「今日燃えるゴミの日なのに、ゴミ出し忘れた!!」<br /> 「プラごみ出し忘れて今日で1ヶ月…また2週間後まで出せない…」</p> <p>いや、できるのが普通当たり前のことなのかもしれないのですが、自分のような日常生活に支障をきたす程度の面倒くさがり+曜日感覚のない人間にとっては、ゴミを定期的に出すというのはかなりのハードルです。<br /> 一人暮らしの時にはアパートの入り口は基本ゴミの山。<br /> 結婚してからも自分の力でゴミ出しができた試しがなく妻には頭が上がらない。</p> <p>男女問わずこんな<del>ダメ人間</del>多忙なビジネスパーソンが多いと僕は信じています…。</p> <p>ともあれ、そんなやっかいなゴミ出し問題を解決するために、家族や夫婦で活用できるアプリを制作しました。</p> <p><em>「ゴミ出し日の前日にリマインドしてくれるLINEチャットボット」</em></p> <p>一人暮らしで活用してもよし、旦那さんが奥さんのために率先してゴミ出ししてもよし、夫婦で共有してもよし、子供にゴミ出しを意識づけさせるために使ってもよし。</p> <h2 id="使用した技術"><a href="#%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E6%8A%80%E8%A1%93">使用した技術</a></h2> <ul> <li>GAS(Google Apps Script)</li> <li>LINE Messanger API</li> </ul> <h2 id="1.チャットボット詳細"><a href="#%EF%BC%91%EF%BC%8E%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%9C%E3%83%83%E3%83%88%E8%A9%B3%E7%B4%B0">1.チャットボット詳細</a></h2> <p>改めて、このチャットボットで出来ることはとてもシンプルで、このLINE botアカウントと友達になっておくことで<br /> 「ゴミ出し日の前日夜9時にリマインダが送られてくる」<br /> というものです。ただそれだけ。</p> <p>曜日によって送る情報を変えることができるので、自分の地域のゴミ収集曜日を入れておくことでそれに応じてリマインドしてくれます。</p> <p><em>↓いろいろ通知してくれるLINE bot 「にゃんこ通信」</em><br /> <a href="https://crieit.now.sh/upload_images/971c1a50bdb9a973c3b0ebc0cde519595e2aab1a5c401.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/971c1a50bdb9a973c3b0ebc0cde519595e2aab1a5c401.png?mw=700" alt="Screenshot_20200117-181309.png" /></a></p> <p><em>↓こんな感じに勝手にチャットが飛んできてお知らせしてくれます。うんこうんこ</em><br /> <a href="https://crieit.now.sh/upload_images/bbea6d5ef62c776c07a3c530541a9e015e2aab36dfdda.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/bbea6d5ef62c776c07a3c530541a9e015e2aab36dfdda.png?mw=700" alt="Screenshot_20200117-181124.png" /></a></p> <h2 id="3.色々な情報をグローバルで定義しておく"><a href="#%EF%BC%93%EF%BC%8E%E8%89%B2%E3%80%85%E3%81%AA%E6%83%85%E5%A0%B1%E3%82%92%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%81%A7%E5%AE%9A%E7%BE%A9%E3%81%97%E3%81%A6%E3%81%8A%E3%81%8F">3.色々な情報をグローバルで定義しておく</a></h2> <p>Line Developersのチャンネル作成やプッシュメッセージの登録などが必要ですが、<br /> 今回はコードのみ紹介。</p> <pre><code>//チャンネル情報・ラインユーザー情報の取得 var CHANNEL_ACCESS_TOKEN = 'ここにアクセストークンを入力'; var USER_ID_M = 'ここにラインユーザーIDを入力'; var USER_ID_L = 'ここにラインユーザーIDを入力'; </code></pre> <p>まず、チャンネルアクセストークンと、リマインダメッセージを送りたいラインのユーザーIDを変数に入れます。</p> <p>これらはプログラム中で変更することがないので定数constに入れたいなあと思うのですが、どうやらconstはグローバルでは定義できないようです(<a target="_blank" rel="nofollow noopener" href="https://teratail.com/questions/226375">参考リンク1</a>)<br /> (定数は関数内でプライベートでのみ定義)<br /> 頭に書いておきたいので変数varで定義しておきます。</p> <p>チャンネルアクセストークンと自身のLINEユーザーIDについては、LINE Developersのチャンネル情報で見れるので、それを利用します。</p> <p>ちょっと手間がかかるのが複数人でこのbotを共有する場合。<br /> 僕の場合は妻とbotを共有したいので、メッセージの送り先として妻のLINEユーザーID(ラインで友達検索に使うラインIDとは別物です)を設定しなければなりません。</p> <p>ところが、調べているとこれが簡単に取得できないことが発覚。<br /> 一旦置いておいて次項で。</p> <pre><code>//ユーザー入力項目 var weekday = ["日", "月", "火", "水", "木", "金", "土"]; var garbageCalendar = { "日":"", "月":"燃やすゴミ", "火":"", "水":"資源ゴミ", "木":"燃やすゴミ", "金":"", "土":"" }; </code></pre> <p>次にユーザー入力項目ですが、<br /> このgarbageCalendar変数に、オフジェクトでゴミ収集の曜日とゴミの種類を入れておきます。<br /> 地域のゴミ収集カレンダーから持って来ましょう。</p> <h2 id="3.他人のラインユーザーIDの取得"><a href="#%EF%BC%93%EF%BC%8E%E4%BB%96%E4%BA%BA%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BCID%E3%81%AE%E5%8F%96%E5%BE%97">3.他人のラインユーザーIDの取得</a></h2> <p>これには<a target="_blank" rel="nofollow noopener" href="https://www.pre-practice.net/2018/11/line-botuserid-groupid-roomid.html">参考サイト1</a>をそのまま活用させてもらいました。</p> <p>取得したユーザーIDをグローバル変数に入れておきます。</p> <h2 id="4.リマインダのメイン処理"><a href="#%EF%BC%94%EF%BC%8E%E3%83%AA%E3%83%9E%E3%82%A4%E3%83%B3%E3%83%80%E3%81%AE%E3%83%A1%E3%82%A4%E3%83%B3%E5%87%A6%E7%90%86">4.リマインダのメイン処理</a></h2> <p>次に、リマインダのメッセージなどを記述して送信するための<code>garbageReminder()</code>関数というものを作ります。</p> <pre><code>//リマインダのメイン処理 function garbageReminder() { //翌日の日時を取得 var date = new Date(); date.setDate(date.getDate() + 1); //翌日の曜日を取得して、ゴミの種類を取得 var dayNum = date.getDay(); var day = weekday[dayNum]; var garbageType = garbageCalendar[day]; //明日がゴミ収集日にリマインドメッセージを送信 var message = "【ゴミ出し通信】\n"; if(garbageType != ""){ message += " 明日は${day}曜日、「${garbageType}」の日です。\n出すゴミをチェックしよう!".replace('${day}',day).replace('${garbageType}',garbageType); sendToLine(message); }else{ }; } </code></pre> <p>前半では、今日の日付から曜日を取得してわちゃわちゃして翌日のゴミの種類を判別してます。</p> <p><code>new Date()</code>でまず今日の日付情報を取得できるので、その変数に<code>date.setDate(date.getDate() + 1);</code>とすることで、翌日の日付情報を取得しています。<br /> その取得した日付情報<code>date</code>に<code>getDay()</code>メソッドを使うことで曜日を取り出すことができます。曜日は数字になっているので注意。<br /> 曜日からゴミの種別を取ってくるときは、グローバルで定義しておいた配列とオブジェクトを使用します。</p> <p>後半は、メッセージを送信する処理になります。<br /> 翌日がゴミ出し曜日の場合にのみ、変数<code>message</code>に曜日やゴミの種別が入った文字列が入ります。<br /> 変数を文字列として送るときは<code>replase</code>メソッドを活用。<br /> また改行を入れたいときは<code>\n</code>(記号はバックスラッシュ)を使います。</p> <p>最後に<code>sendToLine(message)</code>という関数(次項に記述)を利用して、先ほどの変数<br /> <code>message</code>の値をラインに送信しています。</p> <h2 id="5.ラインに送信する処理"><a href="#%EF%BC%95%EF%BC%8E%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AB%E9%80%81%E4%BF%A1%E3%81%99%E3%82%8B%E5%87%A6%E7%90%86">5.ラインに送信する処理</a></h2> <p>前項の最後の、実際にラインに送信するための色々な情報を記述する<br /> <code>sendToLine()</code>関数を作ります。</p> <pre><code>//ラインに送信する処理 function sendToLine(message){ //色々なパラメータを設定 var url = 'https://api.line.me/v2/bot/message/multicast'; var headers = { 'Content-Type':'application/json; charset=UTF-8', 'Authorization':'Bearer ' + CHANNEL_ACCESS_TOKEN }; var data={ "to":[USER_ID1, USER_ID2], "messages":[{ "type":"text", "text":message }] }; var options = { 'method':'post', 'headers':headers, 'payload':JSON.stringify(data) }; //LINE messanger APIを叩く UrlFetchApp.fetch(url, options); } </code></pre> <p>最後の<code>UrlFetchApp.fetch(url, options);</code>がGASでAPIを叩く命令となります。<br /> かっこの中は「どこへ、どの情報を送る」というイメージです。</p> <p>そのために必要なものをその前に変数に入れて記述しています。<br /> 詳しくはLINE Developersの公式ドキュメント(<a target="_blank" rel="nofollow noopener" href="https://developers.line.biz/ja/reference/messaging-api/#send-push-message">Messaging APIリファレンス</a>)を参照。</p> <p><code>var url</code>にはHTTPリクエストを送るURLを記述します。<br /> このurlの末尾を<code>multicast</code>としていることで、送り先を複数に設定しています。<br /> この実際に送るのが<code>var data</code>の<code>to</code>に配列で複数設定しているユーザーIDになっています。</p> <p>例えばこのbotを自分だけが使用できれば良いという場合は、<br /> HTTPリクエストを送るurlの末尾を<code>push</code>にして、<code>var data</code>の<code>to</code>には自分のユーザーIDだけを指定しておけば良いですね。</p> <p>詳しい説明は省いてしまいますが、このようにLINEのmessaging APIを叩くための諸々のパラメータを<code>url</code>,<code>headers</code>,<code>data</code>, <code>options</code>に入れているわけです。</p> <p>ここまでできたら、トリガーを登録することでリマインド機能が完成です!</p> <h2 id="課題"><a href="#%E8%AA%B2%E9%A1%8C">課題</a></h2> <ul> <li>LINEのユーザーIDを調べる方法をコピペで実施しているので、コードを自分の頭で書いて理解してみようと思います。</li> <li>というか、そもそもLINEユーザーIDをいちいち入れなくてもいい可能性はないか…?</li> </ul> <h2 id="おわりに"><a href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">おわりに</a></h2> <p>普段使っているラインを入り口にして色々できないかなーと考えるようになって<br /> 日常生活で欲しかったちょっとしたものを実際に作ってみた次第です。</p> <p>これに夫婦で使いたい機能をちょっとずつ付け足していきたいと思っていて、<br /> 家計の金銭管理とか、買い物リストとか、直接ラインでやりとりするのは少し手間だったり精神的負担があったり…というようなほんと些細なことをツールで出来るようにしたいなーと思っています。</p> <p>いずれリッチメニューなんかも作れるようになりたいですね。</p> <p>夫婦中がちょっとだけアップするアプリを目指します。笑</p> <h2 id="参考にしたサイト"><a href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88">参考にしたサイト</a></h2> <ul> <li>参考1<br /> <a target="_blank" rel="nofollow noopener" href="https://teratail.com/questions/226375">Google Apps Script - Google Apps Scriptでグローバルな定数を定義できない|teratail</a></li> <li>参考2<br /> <a target="_blank" rel="nofollow noopener" href="https://www.pre-practice.net/2018/11/line-botuserid-groupid-roomid.html">Google Apps Script試行錯誤Blog: LINE BOTでuserId, groupId, roomIdを取得したい</a></li> <li>LINE Developers公式ドキュメント(プッシュメッセージ)<br /> <a target="_blank" rel="nofollow noopener" href="https://developers.line.biz/ja/reference/messaging-api/#send-push-message">Messaging APIリファレンス</a></li> </ul> <h2 id="MEMO"><a href="#MEMO">MEMO</a></h2> <p>Githubに全体のコードをあげています。<br /> 書き方はあまりスマートでない部分もあるかと思うので、その点はお手柔らかに。</p> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/Massasquash/LINEbot-for-life/blob/master/push.gs">LINEbot-for-life/push.gs at master · Massasquash/LINEbot-for-life · GitHub</a></p> <p>また、LINE botのアイコンの画像はこちらのものを使用させていただいてます。感謝。<br /> <a target="_blank" rel="nofollow noopener" href="https://www.sozailab.jp/sozai/detail/14638/">勉強猫 | 無料イラスト素材|素材ラボ</a></p> Massa tag:crieit.net,2005:PublicArticle/14587 2018-10-27T08:17:30+09:00 2018-10-31T11:32:04+09:00 https://crieit.net/posts/AI-LINE-BOT 画像認識AIを使ったLINE BOTの作り方 <p><img width="418" alt="AIメーカー-LINEBOT-チュートリアルタイトル.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/8b69f70a-e8e4-8457-b611-962a55d3b18f.png"></p> <hr /> <p>こんにちは、2z(Twitter: <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01">@2zn01</a> )です。</p> <p>先日、AIメーカーのAPIを公開しましたので、今回はそのAPIを活用してLINE BOTを作ってみました!</p> <p>■今注目のAIアプリを簡単に作れる、「AIメーカー」のAPIを公開しました!<br /> <a target="_blank" rel="nofollow noopener" href="https://qiita.com/2zn01/items/c324c7f4d42e0b335bed">https://qiita.com/2zn01/items/c324c7f4d42e0b335bed</a></p> <p>自分だけで作ってても面白くないので、APIを使って誰でも作れるようにチュートリアルとしてまとめておきたいと思います。</p> <h2 id="作ったもの"><a href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE">作ったもの</a></h2> <p>あくまで一例ですが、以下のLINE BOTを作ってみました。</p> <p><strong>「スケベ診断」</strong></p> <ul> <li>LINEに画像をアップすると、アップされた画像からどんなスケベかを判定します。</li> </ul> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【お知らせ】AIメーカーのAPIを活用した、LINE BOT「スケベ診断」を作りました!アップされた画像からどんなスケベかを判定します。以下のURLから友達追加できます!<a target="_blank" rel="nofollow noopener" href="https://t.co/Oo8JCH1FYX">https://t.co/Oo8JCH1FYX</a>こんな感じで、画像認識AIを使ったLINE BOTを簡単に作れるチュートリアルを書こうと思っています! <a target="_blank" rel="nofollow noopener" href="https://t.co/oqUcCBRyy6">pic.twitter.com/oqUcCBRyy6</a></p>— 2z@AIメーカー開発者 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1048848021868359681?ref_src=twsrc%5Etfw">2018年10月7日</a></blockquote> <h2 id="システム概要"><a href="#%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A6%82%E8%A6%81">システム概要</a></h2> <ul> <li>LINE Messaging API</li> <li>Google Apps Script</li> <li>AIメーカー API</li> </ul> <p><img width="483" alt="AIメーカー-LINEBOT-システム概要図.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/d62cec8c-a078-2de3-135b-8e91ff99cb2f.png"></p> <p>以下の流れで処理が行われます。</p> <ol> <li>LINEに画像がアップされたらwebhookによりGoogle Apps Scriptのプログラムが呼び出される</li> <li>Messaging APIで画像を取得してAIメーカーのAPIへ送信する</li> <li>AIメーカーのAPIから診断結果を受け取り、Messaging APIで結果を返す</li> </ol> <h2 id="作り方"><a href="#%E4%BD%9C%E3%82%8A%E6%96%B9">作り方</a></h2> <h3 id="1.AIメーカーで画像認識AIを作る"><a href="#%EF%BC%91%EF%BC%8EAI%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC%E3%81%A7%E7%94%BB%E5%83%8F%E8%AA%8D%E8%AD%98AI%E3%82%92%E4%BD%9C%E3%82%8B">1.AIメーカーで画像認識AIを作る</a></h3> <p>まずはLINE BOTで画像診断させたいネタを考え、AIメーカーで画像認識AIを作ってみてください。<br /> (Twitterのアカウントが必要になります)</p> <p>■AIメーカー<br /> <a target="_blank" rel="nofollow noopener" href="https://aimaker.io/">https://aimaker.io/</a></p> <p>作成後、作成したモデルのIDとAPIキーをメモしておいてください。<br /> スケベ診断の場合は以下のURLの「APIを使う!」の欄で確認することができます。<br /> <a target="_blank" rel="nofollow noopener" href="https://aimaker.io/app/image-classification/id/2438">https://aimaker.io/app/image-classification/id/2438</a></p> <p>なお、AIを作成せずとも、既に他の人が作成されたAIを使うこともできます。<br /> 以下のみんなのAIから探してみてください。<br /> <a target="_blank" rel="nofollow noopener" href="https://aimaker.io/app/search/">https://aimaker.io/app/search/</a></p> <h3 id="2.Google Apps Scriptの設定"><a href="#%EF%BC%92%EF%BC%8EGoogle+Apps+Script%E3%81%AE%E8%A8%AD%E5%AE%9A">2.Google Apps Scriptの設定</a></h3> <p>LINEとAIメーカーの仲介役プログラムとなるGoogle Apps Scriptの設定を行います。</p> <p>1.以下のURLからGoogle Driveを開きましょう。<br /> (Googleアカウントがない場合は、作成してください)<br /> <a target="_blank" rel="nofollow noopener" href="https://drive.google.com/">https://drive.google.com/</a></p> <p>2.左上の「新規」ボタンよりGoogleスプレットシートを開いてください。</p> <p>3.メニューバーの「ツール」 -> 「スクリプトエディタ」を選択します。</p> <p>これでGoogle Apps Scriptのエディタが開いたと思います。</p> <p>一旦、この状態で公開してしまいます。</p> <p>4.メニューバーの「公開」 -> 「ウェブアプリケーションとして導入」を選択し、<br /> プロジェクト名を入力して、以下の設定で公開します。</p> <ul> <li>次のユーザーとしてアプリケーションを実行:自分</li> <li>アプリケーションにアクセスできるユーザー:全員(匿名ユーザーを含む)</li> </ul> <p>ここで現在のウェブ アプリケーションの URLに表示されたURLをコピーして控えておきます。</p> <h3 id="3.Googleドキュメントの作成"><a href="#%EF%BC%93%EF%BC%8EGoogle%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90">3.Googleドキュメントの作成</a></h3> <p>デバッグログの出力用にGoogleドキュメントを作成します。</p> <p>1.以下のURLからGoogle Driveを開きましょう。<br /> <a target="_blank" rel="nofollow noopener" href="https://drive.google.com/">https://drive.google.com/</a></p> <p>2.左上の「新規」ボタンよりGoogleドキュメントを開いてください。</p> <p>3.作成されたドキュメントに任意の名前をつけて保存します。</p> <p>GoogleドキュメントのURLの中から「{ドキュメントID}」の部分をメモしておいてください。<br /> <a target="_blank" rel="nofollow noopener" href="https://docs.google.com/document/d/{ドキュメントID}/edit">https://docs.google.com/document/d/{ドキュメントID}/edit</a></p> <h3 id="4.LINE Developerの設定"><a href="#%EF%BC%94%EF%BC%8ELINE+Developer%E3%81%AE%E8%A8%AD%E5%AE%9A">4.LINE Developerの設定</a></h3> <h4 id="・LINE Developerへ開発者登録し、プロバイダーを登録する"><a href="#%E3%83%BBLINE+Developer%E3%81%B8%E9%96%8B%E7%99%BA%E8%80%85%E7%99%BB%E9%8C%B2%E3%81%97%E3%80%81%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%83%BC%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B">・LINE Developerへ開発者登録し、プロバイダーを登録する</a></h4> <p>まずはLINE Developerへアクセスしましょう!<br /> <a target="_blank" rel="nofollow noopener" href="https://developers.line.me/ja/">https://developers.line.me/ja/</a></p> <p>以下の公式ドキュメントに従って手順1~3まで登録しましょう。<br /> <a target="_blank" rel="nofollow noopener" href="https://developers.line.me/ja/docs/messaging-api/getting-started/">https://developers.line.me/ja/docs/messaging-api/getting-started/</a></p> <h4 id="・チャネルを作成する"><a href="#%E3%83%BB%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">・チャネルを作成する</a></h4> <ol> <li>作成したプロバイダーへアクセス</li> <li>「新規チャネル作成」をクリック</li> <li>「Messaging API」を選択</li> <li>以下の事項を入力し、チャネルを作成する <ul> <li>アプリアイコン画像</li> <li>アプリ名</li> <li>アプリ説明</li> <li>プラン(※フリーを選択)</li> <li>大業種、小業種</li> <li>メールアドレス</li> </ul></li> </ol> <p>作成したチャネルの「チャネル基本設定」で以下の設定をします。</p> <h5 id="・メッセージ送受信設定"><a href="#%E3%83%BB%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E9%80%81%E5%8F%97%E4%BF%A1%E8%A8%AD%E5%AE%9A">・メッセージ送受信設定</a></h5> <ul> <li>アクセストークン(ロングターム):発行する(発行されたアクセストークンはメモしておいてください)</li> <li>Webhook送信:「利用する」へ変更</li> <li>Webhook URL:Google Apps Scriptの設定でメモしたURLを指定</li> </ul> <h5 id="・LINE@機能の利用"><a href="#%E3%83%BBLINE%40%E6%A9%9F%E8%83%BD%E3%81%AE%E5%88%A9%E7%94%A8">・LINE@機能の利用</a></h5> <ul> <li>自動応答メッセージ:「利用しない」へ変更</li> <li>友だち追加時あいさつ:任意のメッセージを設定ください。</li> </ul> <p>以上でLINE側の設定は完了です。</p> <h3 id="5.Google Apps Scriptのソースコード"><a href="#%EF%BC%95%EF%BC%8EGoogle+Apps+Script%E3%81%AE%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89">5.Google Apps Scriptのソースコード</a></h3> <p>ソースコード上部の「\$~~~\$」の箇所はこれまでの説明の中でメモして頂いた値へ書き換えた上でご利用ください。</p> <pre><code>var AIMAKER_MODEL_ID = $AIメーカーで作成したモデルのIDを指定してください$; var AIMAKER_API_KEY = "$AIメーカーのAPIキーを指定してください$"; var LINE_ACCESS_TOKEN = "$LINE Developerで発行されたアクセストークンを指定してください$"; var GOOGLE_DOCS_ID = "$GoogleドキュメントのドキュメントIDを指定してください$"; var doc = DocumentApp.openById(GOOGLE_DOCS_ID); function doPost(e){ Logger.log("Post request."); try { var json = JSON.parse(e.postData.contents); var token= json.events[0].replyToken; var url = 'https://api.line.me/v2/bot/message/'+ json.events[0].message.id +'/content/'; var image = getImage(url); var base64 = Utilities.base64Encode(image.getContent()); var message = getResult(base64); if (message == '') { message = "識別できませんでした。"; } sendLineMessage(message, token); } catch (e) { Logger.log("ERROR: %s", e) message = "処理に失敗しました。" sendLineMessage(message, token); doc.getBody().appendParagraph(Logger.getLog()); } doc.getBody().appendParagraph(Logger.getLog()); } function getImage(url){ return UrlFetchApp.fetch(url, { 'headers': { 'Content-Type': 'application/json; charset=UTF-8', 'Authorization': 'Bearer ' + LINE_ACCESS_TOKEN, }, 'method': 'GET' }); } function getResult(base64){ var result = ''; var url = 'https://aimaker.io/image/classification/api'; var payload = { "id": AIMAKER_MODEL_ID, "apikey": AIMAKER_API_KEY, "base64": base64 }; var response = UrlFetchApp.fetch(url, { method: 'POST', payload: payload, muteHttpExceptions: true }); response = response.getContentText(); Logger.log(response); var json = JSON.parse(response); var labels = sortLabel(json.labels); if (labels[0].label && labels[0].score){ result = 'この画像の診断結果は、「' + labels[0].label + ': ' + (Math.round(labels[0].score * 10000) / 100) + "%」です!\n\n"; } for (var i in labels) { if (labels[i].label && labels[i].score) { result = result + labels[i].label + ': ' + (Math.round(labels[i].score * 10000) / 100) + "%\n"; } } return result; } function sortLabel(labels){ labels.sort(function(a,b){ if (a.score > b.score) return -1; if (a.score < b.score) return 1; return 0; }); return labels; } function sendLineMessage(message,token){ var url = "https://api.line.me/v2/bot/message/reply"; return UrlFetchApp.fetch(url, { 'headers': { 'Content-Type': 'application/json; charset=UTF-8', 'Authorization': 'Bearer ' + LINE_ACCESS_TOKEN, }, 'method': 'POST', 'payload': JSON.stringify({ 'replyToken': token, 'messages': [ { "type": "text", "text": message } ], }) }); } </code></pre> <h2 id="最後に"><a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a></h2> <p>手順を参考に画像認識AIを使ったLINE BOTをぜひ作ってみてください。</p> <p>この記事はあくまでもテンプレートと思って頂き、画像認識AIのネタを変えたり、診断結果をカスタマイズしてみたり、などをしてみるともっと面白いものができるかと思います。</p> <p>AIメーカーに少しでも興味をもって頂けましたら、ぜひフォローやいいね、リツイートで応援お願いします!</p> <ul> <li>Twitter: <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01">@2zn01</a></li> <li>note: <a target="_blank" rel="nofollow noopener" href="https://note.mu/2zn01">@2zn01</a></li> </ul> <p><strong>・文字起こし</strong></p> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">みんな~!「AIメーカー」で文字起こし機能をリリースしたよー!以下の方法で簡単に文字起こしを試せるので、ぜひ使ってみて~!!📺YouTubeから文字起こし🔗画像、音声、動画から文字起こし🎙️録音で文字起こしAIをうまく使って少しでも面倒な作業から解放だぁ~!<a target="_blank" rel="nofollow noopener" href="https://t.co/qo13Wo6Yli">https://t.co/qo13Wo6Yli</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/gsRigVROnK">pic.twitter.com/gsRigVROnK</a></p>— 2z@みんなのAI「AIメーカー」開発中 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1030652280914173953?ref_src=twsrc%5Etfw">2018年8月18日</a></blockquote> <p><strong>・画像認識</strong></p> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を開発しました!①AIに覚えさせたいタグを入力②タグから自動で画像データを収集③AIがデータから学習の3ステップで誰でも簡単にAIを作れます!動画では手相占いのAIに挑戦!みんなもAIを作って遊んでみてね!<a target="_blank" rel="nofollow noopener" href="https://t.co/66DFU7GRZ2">https://t.co/66DFU7GRZ2</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/ie1LmioyA1">pic.twitter.com/ie1LmioyA1</a></p>— 2z@AIメーカー (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1019741210217365504?ref_src=twsrc%5Etfw">2018年7月19日</a></blockquote> 2z@AIメーカー