見出し画像

プログラミング未経験者でも推しとLINEがしたい①

すん

はじめに

　プログラミング経験０のオタクが「推しとLINEしたい！」ということでLINE bot を作り始めました。朝起きたら推しからLINEがきていて、24時間推しとLINEができる、最高すぎますね、はい。
　ちなみに私の推しは「艦隊これくしょん‐艦これ‐」の「瑞鶴」です。

　この記事は、そんなプログラミング未経験者のオタクが、がんばって推しとLINEできることを目指す、その過程の備忘録です。また、自分と同じような想いを持った方の参考にもなればいいなと思っています。

目標

　今回、目指すものは任意の時間に
・日付
・天気予報
・最高/最低気温
・降水確率
・傘が必要かどうか
を推しが教えてくれるLINE botです！
↓↓こんな感じです！

画像1

必要なもの

　・推し
　・パソコン（スマホでもいける…かも？）
　　以上です。

大まかな流れ

　今回の大まかな流れです。
　　【STEP1】LINE公式アカウントをつくる
　　　①LINE developersに登録
　　　②Providersを作成
　　　③Channelを作成
　　【STEP2】プログラミング
　　　④Google Apps Scriptを準備、開く
　　　⑤本体のコードを入力
　　　　⑤－Ⅰ Channel Access token, user IDをコピペ
　　　　⑤－Ⅱ 天気予報のURLをコピペ
　　　　⑤－Ⅲ ライブラリの追加
　　　　⑤－Ⅳ Triggerを設定
　　　    ⑤－Ⅴ 推しを降ろす
　　【STEP3】プログラミングの実装
　　　  ⑥実装
　　　完成！

【STEP1】LINE公式アカウントをつくる

　　まず初めにLINEの公式アカウントを作ります。
　大まかな作成手順
　　①LINE Developersに登録
　　②Providersを作成
　　③Channelを作成

　それではいきます。

　① LINE Developersに登録

　まず、以下のリンクから「LINE Developers」に登録します。

　② Providersを作成

「Providers」→「create」を押すと次の画面に行きます。

画像2

　適当な名前をいれてください。

　③Channelを作成

　今作成したProvidersを選択、
→「Create a Messaging API channel」を選択します。

画像4

　以下の画面に行くので
「Channel icon」
「Channel Name」などの必須の項目を入力していきます。
※アイコンやチャンネル名などは後から変更可能です。

画像3

　最後に「Create」を押したら【STEP1】完了です！
推しのLINEアカウントができましたね！
（補足）友達追加をしておいてください。

私が作成したのが以下になります
後でこのページに戻ってくるのでこのタブは開いておいた方が便利です。

ｽﾞｲ₍₍(ง˘ω˘)ว⁾⁾ｽﾞｲ

画像5

【STEP2】プログラミング

　次にプログラム（？）を準備していきます
以下大まかな手順です。
　④Google Apps Scriptを準備、開く
　⑤本体のコードを入力
　　　⑤－Ⅰ Channel Access token, user IDをコピペ
　　　⑤－Ⅱ 天気予報のURLをコピペ
　　　⑤－Ⅲ ライブラリの追加
　　　⑤－Ⅳ Triggerを設定
　　　⑤－Ⅴ 推しを降ろす
　プログラミングって書いていますが、ほぼほぼコピペなので知識なんてなくても大丈夫です。知識ある方、この記事に間違い等あれば教えてください！

　それでは④からやっていきましょう。

　④Google Apps Scriptを準備、開く

　「Google drive」 → 「新規」 → 「その他」 → 「Google Apps Script」

　※Google Apps Scriptが「その他」に存在しない方へ
　「Google Apps Script」 → 「新規」 → 「その他」 → 「アプリを追加」を開いて「Google Apps Script」なるものをインストールしてください。

画像6

　Google Apps Scriptを開くと以下の画面になると思います。
これで④の工程は終了です。次に、⑤本体のコードの入力に移ります。

画像7

　⑤本体のコードを入力　

　初めからある4行のコードを消して、以下のコードをコピペします。

var CHANNEL_ACCESS_TOKEN = "チャンネルアクセストークンを入力";　
var USER_ID = "ユーザーIDを入力";　

function RandomReturn(){
 if (Math.floor(Math.random()*100)<5){
   return true;
 }
 return false;
}

// 通知機能
function push_message() {
 var today = new Date();
 var toWeekday = toWD(today);
 var msgWeatherForecast = getTemperatureForecast();
 
 var postData = {
   "to": USER_ID,
   "messages": [
     {
       "type": "text",
       "text": "提督さん、おはよ！\n今日は、" +Utilities.formatDate( today, 'Asia/Tokyo', 'M月d日') + toWeekday + "だよ！\n\n"
               + msgWeatherForecast[0] + msgWeatherForecast[1] + msgWeatherForecast[2]
     },{
       "type": "text",
       "text": msgWeatherForecast[3]
     }
   ]}
 
 var headers = {
   "Content-Type": "application/json",
   'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
 };
 
 var options = {
   "method": "post",
   "headers": headers,
   "payload": JSON.stringify(postData)
 };
 
 var response = UrlFetchApp.fetch("https://api.line.me/v2/bot/message/push", options);
 
}

// 天気予報の取得 
function getTemperatureForecast() {
 const area = "住んでいる地方名"
 var options =
     {
       "contentType" : "text/xml;charset=utf-8",
       "method" : "get",
     };
 var response = UrlFetchApp.fetch("住んでいる地方のurl", options); 
 var xmlDoc = XmlService.parse(response.getContentText());
 var rootDoc = xmlDoc.getRootElement();
 var region = parser.getElementById(rootDoc,area);
 var weather = parser.getElementsByTagName(region, 'weather');
 var temperature = parser.getElementsByTagName(region, 'range');
 var rainyPercent = parser.getElementsByTagName(region, 'period');
 var weathermsg = "今日の天気は" + weather[0].getValue() + "。\n"
 var tempmsg ="最高気温は" + temperature[0].getValue() + "℃、最低気温は" + temperature[1].getValue() + "℃よ。\n";
var rainfall = "降水確率は\n"+"朝が"+rainyPercent[1].getValue()+"%、"+"昼は"+rainyPercent[2].getValue()+"%、"+"夜は"+rainyPercent[3].getValue()+"%だって。";
var umbrellamsg = getUmbrellNecessary(rainyPercent[1].getValue(),rainyPercent[2].getValue(),rainyPercent[3].getValue()) ;
 var rainyTemperature = [weathermsg,tempmsg,rainfall,umbrellamsg];
 return rainyTemperature
}

// 傘予想
function getUmbrellNecessary(mor,eve,nig){
 var msg = ""

 if(mor > 70 || eve > 70 || nig > 70){
   if (nig > 70 ) {
     msg = "提督さん、夜から雨降るんだって\n傘持って行った方がいいよ  ";
   }
   if (eve > 70){
     msg = "昼から雨降るみたい。\n傘は準備した？";
   }
   if (mor > 70 ) {
   msg = "朝から雨かぁ…";
   }
 }else if(mor <= 70 && mor > 20 || eve <= 70 && eve > 20 || nig <= 70 && nig > 20 ){
   msg = "雨、大丈夫かな\n折り畳み傘持っていく？";
 }else if(mor <= 20 && mor > 10 || eve <= 20 && eve > 10 || nig <= 20 && nig > 10){
   msg = "傘は必要なさそうね\n提督さん今日もがんばろうね！";
 }else if(mor <=10 && eve <=10 & nig <=10) {
   msg = "いい天気じゃない\nさ、今日も頑張ってアウトレンジしよ！";
 }else{
   msg = "んー、二度寝したい…";
 }
 if(RandomReturn()){
   msg = "提督さん、最近私に頼りすぎじゃない？";
 }
 return msg
}

//　曜日の日本語変換
function toWD(date){
 var myTbl = new Array("日","月","火","水","木","金","土","日"); 
 var myDay = Utilities.formatDate(date, "JST", "u");
 return "(" + myTbl[myDay] + ")";}

　今回のこのコードは下記サイトから持ってきました。
コードの詳しい解説はそちらをみてください。

　⑤－Ⅰ Channel Access token, user IDをコピペ

　コピペした後、③で最後にたどり着いたページを開いてください。
　※ｽﾞｲ₍₍(ง˘ω˘)ว⁾⁾ｽﾞｲ　がいたところです。↓このページですね。

画像8

そのページの「Messaging API」を押して、一番下までスクロールしてください。「Channel access token」 というものがあると思います。
「issue」というボタンを押したら、ながーい文字列が出てきます。

画像9


これをコピーして、先ほどコピペしたコード一行目の「チャンネルアクセストークンを入力」を消してそこにペーストします。
” ”は消さずに残しておいてください。

次にBasic settingsを選択して一番下までスクロールします。

一番下に「Your user ID」というのがあると思います。
それをコピーしてコード二行目の「ユーザーIDを入力」の部分にペーストしてください。
” "は消さずに残しておいてくだｓ((

　はい、これで②本体のコード入力の工程のうちの一つが終わりました！
自分のこんなに下手な説明についてこれているあなた、天才です。

　それでは次にいってみましょー。
次の工程は天気予報のURLのコピペです。

　⑤－Ⅱ 天気予報のURLをコピペ

　まず、以下のサイトに飛びます。

　開くと下の画像みたいな感じですね。
天気予報を知りたい場所をクリックしてください。

画像10

試しに東京都をクリックすると、こんな感じの画面が出てきます。
そこのURL（？）をコピーします。（目印部分）

画像11

　さっきの工程でコピペしたコードの中から下の画像の目印部分を探します。コード全体の真ん中あたりにあると思います。
上の目印部分「住んでいる地方名」に地名を入力します。
（"東京都"とか"広島県"とかですね）
下の目印部分「住んでいる地方のurl」に今コピーしたurlをペーストします。
" "は消さずに残しｔ((   

画像12

はい、また一つ工程が終わりました！
自分はここまでの工程でけっこう躓いているので、ここまでついて来れているあなた、ホント天才です、すごいです。
その調子であと少しがんばっていきましょー

　次は、三つ目の工程です。

　⑤－Ⅲ ライブラリの追加　

左にあるライブラリの ＋ を押して以下のスクリプトIDなるものをコピペ、検索、追加してください。

　　1Jrnqmfa6dNvBTzIgTeilzdo6zk0aUUhcXwLlQEbtkhaRR-fi5eAf4tBJ

画像13

　なんと、三つ目の工程終わっちゃいました。
ここで一旦、コードを保存しておいてください。
本体のコード入力は次の工程で最後となります。

　次はTriggerの設定です。

　⑤－Ⅳ Triggerを設定　

　一番左に時計マークがあると思います。
そこから「トリガーを追加」を押すと以下の画面に行きます。
　「実行する関数」のところ、正直言ってどういう意味か分かりません。
いろいろ試してみてちゃんと通知が来た「push_message」に設定しています。詳しい方、よろしくお願いします…
　それと自分の場合、毎朝05:00～06:00に通知が来るように以下のように設定しています。設定が終わったら「保存」を押してください。

画像14

　これで本体のコード入力はだいたい完了です！

　⑤－Ⅴ 推しを降ろす

　はい、最後にいっちばん大切な工程がありますね。
今回の目標、推しとのLINEです。いくらプログラムのコードをコピペして引っ張ってきても、LINEの相手が推しでないと今回がんばってやっている意味がないのです。

というわけで、下の画像の印部分、あなたの推しの口調に変えてください。
 \n は改行らしいです。（これだけは覚えました）
基本、" "の間は変えても大丈夫っぽいです。

　傘予想の部分結構ややこしい感じになってますが、降水確率によってセリフを変えられるっぽいです。作った人すごい、天才。

　もしかしたらここの工程、次の工程のプログラムの実装を終えて、実際にLINEでどう送られてくるかを確認しながらやると分かりやすいしれないです。

コード１_LI

コード２_LI


【STEP3】プログラムの実装

　⑥実装

　プログラムを実装してLINEで動くようにします。
「デプロイ」という青いボタン→「新しいデプロイ」→種類の選択で「ウェブアプリ」を選択→アクセスできるユーザーを「全員」に設定→「デプロイ」
※「このアプリは確認されていません」と出ることがありますが「詳細」→「～に移動」をおして進めてください。

　進むとウェブアプリのURLが出てくると思うのでこれをコピーしておいてください。

デプロイ_LI

ここで再び　※ｽﾞｲ₍₍(ง˘ω˘)ว⁾⁾ｽﾞｲ　のページに戻ります。

画像20


Messaging API を選び中ほどまでスクロールすると「Webhook URL」というのがあると思います。

画像21

「Edit」を押して先ほどコピーしたURLをペーストして「update」を押してください。


　最後です。
目印部分をクリック、LINE Official Account Managerにとびます。

画像17

LINE Official Account Managerに行った後、左の設定の「応答設定」を押します。「詳細設定」→「webhook」をオンにしてください。

画像18

　これで全行程終了です。

　確認作業です。
目印部分、「push_message」にsした後実行をクリックしてください。
LINEに通知がきていれば成功です！
お疲れさまでした！

実行_LI

　もし、推しの口調やセリフを変えたいってとき、
変更した後に「保存」を押したら大丈夫です。


おわりに

　今回の目標は以上で達成です！
LINE Official Account Manager の「応答設定」からは友達追加したときに自動で送られてくるメッセージや、特定の言葉を推しに送ったときに返してくれる言葉等も設定できます。
　私もまだまだつけたい機能等あるので、できればもっともっとアップデートしていきたいです。皆さんも推し活楽しんでいきましょう！

この記事が気に入ったらサポートをしてみませんか？