【スマホでできる楽しいプログラミング入門】第1回 毎日決まった時間に、LINEから生活のアドバイスを貰おう!【プログラム解説編】

スマホでできる楽しいプログラミング入門

こんにちは、にゃむにゃむ（@nyamu_hack）です。今日はクリスマスなので、実家に帰ってワンちゃんを可愛がろうと思います🐶

今回は、大学で6年間、そしてプログラマーとして2年間仕事を行なっている私が、「スマホでできる楽しいプログラミング」を紹介します。

自分は情報系の大学に通っていたのですが、全くプログラミングが得意ではありませんでした。授業では同期たちが淡々と課題をこなしていく中、自分だけ居残りして課題を終わらせることも多かった、落ちこぼれ人間です。ではなぜそんな私がプログラマーとして働いているのか

シンプルにプログラミングが楽しいからです。自分には向いてない職業だと思いながらも、必死になって自分が作ったアプリが世の中で動いているのを見ると、表現できないような達成感と興奮を覚えます。

こんな気持ちをいろんな人に味わってほしい、そういう気持ちで今回記事にしました。

題名の通り、この記事ではパソコンを一切使用しません。スマホだけでプログラミングを体験することを目標にしています。

このシリーズの記事は、【雰囲気体感編】と【プログラム解説編】の2つに分けます。

【雰囲気体感編】では、プログラムを動かすまでの手順のみを教えます。これを真似すれば、誰でも実際に動くプログラムを作ることができます。プログラムの中身など、専門的なことは一切解説しません。

【プログラム解説編】では、実際に使用したプログラムの中身を解説します。出来るだけ優しく解説し、誰でも理解できる内容を目指します。

今回は【プログラム解説編】です。【雰囲気体感編】は、以下をご覧ください。ではいきましょう！

【スマホでできる楽しいプログラミング入門】第1回 毎日決まった時間に、LINEから生活のアドバイスを貰おう!【雰囲気体感編】
「スマホでできる楽しいプログラミング！LINEボットを作成して毎日アドバイスを受け取ろう。Google Apps Scriptを使用し、LINE Notifyを活用した手順を丁寧に解説。プログラミング初心者でも簡単に試せます。プログラミングの楽しさと達成感を味わい、自分だけのLINEボットを手に入れましょう！
nyamu-hack.com
2023.12.24

そもそもGoogle Apps Scriptって何？

  • この世の言語には、日本語や英語、中国語など、さまざまな種類がありますよね。同様に、プログラミング言語も、その中にはさまざまな種類があるわけです。その一つに、Google Apps Scriptがあります。この言語は、Googleが開発している言語で、特徴はなんといっても「ブラウザ上で動作する」ということ！（詳しい人が見たら見当違いのことを言っていますが、大目に見てください🙏）なので、スマホさえあればGoogle Apps Scriptでプログラミングができるわけです。

プログラムってどんなもので構成されているのよ？

プログラムはざっくり「変数」と「関数」で構成されてます。

変数というのは、xとか、yとか、そういうもの。何かしらの数値または文字列などが入った入れ物です。

x=3といえば、xという変数には3が入っています。x=”にゃむにゃむ”といえば、xには「にゃむにゃむ」という文字列が入っています。

これらの変数はx+yやx*yといったように、演算をすることが可能です。

x=3, y=2なら、 x+y=5ですよね、文字列同士の計算も同様で、x=”ほげ”, y=”ふが”なら、x+y=”ほげふが”になります。

関数とは、複数の演算を、ひとまとまりにまとめたものを言います。

数学でf(x) = 2xとか書いたりするやつです。これは、xという変数を受け取って、それを2倍する関数ということになりますよね。

Google Apps Scriptでは、この関数を

function f(x){
  return 2*x
}

のように書きます。すると、x=2;のとき、f(x)は4ということになります。

プログラムおさらい

前回使用したプログラムは以下となります。

const LINE_TOKEN = "";

// この関数が定期的に実行されている。
function myFunction() {
  const advice = getAdvice() // getAdvice関数を実行して、"You can do it!"みたいなアドバイスの文字列を取得し、advice変数に入れる。
  const translatedStr = LanguageApp.translate(advice, 'en', 'ja'); // advice変数に入ってる文字列は英語なので、LanguageApp.translate関数を使用して日本語に翻訳する。
  sendToLine(translatedStr) // LINEに、日本語に変換したアドバイスを送信する
}

// https://api.adviceslip.com/adviceから、アドバイスの文字列を取得する関数。
function getAdvice(){
  const response = UrlFetchApp.fetch("https://api.adviceslip.com/advice") // アドバイスを取得する処理
  const responseObj = JSON.parse(response.getContentText()) // ここは説明省略
  return responseObj.slip.advice // ここは説明省略
}

// LINEに、メッセージを送信する関数
function sendToLine(text){ // text変数を受けとって、それをLINEに送信する
  const options =
   {
     "method"  : "post",
     "payload" : "message=" + text,
     "headers" : {"Authorization" : "Bearer "+ LINE_TOKEN} // 一番上で設定したline notifyのトークンであるLINE_TOKENをここで設定してる
  }; // LINEにメッセージを送信するための設定。説明省略
   UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options); // messageを送信する処理
}

色々書きましたが、順を追って説明します。

このプログラムには、大まかに1つの変数（LINE_TOKEN）と3つの関数（myFunction, getAdvice, sendToLine）が宣言されています。1つずつ見ていきましょう

LINE_TOKEN変数

const LINE_TOKEN = "";

ここは変数ですね。シンプルにLINE_TOKENという変数を作成しています。ここは前回のブログでも書きましたが、line notifyで発行されたトークンを各自で入力してもらってました（const LINE_TOKEN = “hogehoge”みたいな感じで）。このLINE_TOKEN変数は、sendToLine関数で使用することになります。。

myFunction関数

これは、プログラムが実行されるときに呼び出される、大元の関数です。前回のブログで「実行」ボタンを押したり、定期実行の設定をしたと思いますが、そのとき、このmyFunction関数が実行されています。やっている処理は3つ。

  1. アドバイスを取得する（英語）
  2. 英語で書かれたアドバイスを日本語に翻訳する
  3. アドバイスをLINEに送信する
const advice = getAdvice() // getAdvice関数を実行して、"You can do it!"みたいなアドバイスの文字列を取得し、advice変数に入れる。
const translatedStr = LanguageApp.translate(advice, 'en', 'ja'); // advice変数に入ってる文字列は英語なので、LanguageApp.translate関数を使用して日本語に翻訳する。
sendToLine(translatedStr) // LINEに、日本語に変換したアドバイスを送信する

ここでも変数が出てきますが、advice変数やtranslatedStr変数は、関数で計算された計算結果が入っています。なので、advice変数には”You can do it!”みたいな文字が、translatedStr変数には”はい、でいます！”みたいな文字が入っています。

getAdviceとsendToLineは自分で作成した関数ですが、LanguageApp.translateに関しては自分では作成してないですよね。この関数はどこからきているのでしょうか？

実は、Google Apps Scriptでは、Googleさんが沢山の関数をあらかじめ作成してくれており、我々はそれを自由に使用することができるんです。どんな関数をGoogleさんが用意してくれているかというとその話は非常に長くなるので割愛しますが、興味のあるひとはこちらのリンクを見てみてください。多すぎて読みきれないと思います。自分も一部しか把握してません。

LanguageApp.translateもGoogleさんが用意してくれた関数の１つで、LanguageApp.translate(“Yes, I can.”, “en”, “ja”)と書くと、”Yes, I can.”を英語から日本語に翻訳した文字列を返してくれます。

getAdvice関数

この関数は、アドバイスの文字列を返してくれる関数です。3行のプログラムで構成されていますが、今回は最初の1行のみ解説します。

  const response = UrlFetchApp.fetch("https://api.adviceslip.com/advice") // アドバイスを取得する処理

UrlFetchApp.fetchという関数が出てきますが、こちらもGoogleさんがあらかじめ用意してくれている関数の１つです。

なにやらWebサイトのURLのようなものが見えますね。試しにhttps://api.adviceslip.com/adviceにブラウザからアクセスしてみましょうか。すると、以下のようなページが表示されたと思います。

{“slip”: { “id”: 189, “advice”: “Do not compare yourself with others.”}}

実は、これはWebサイトのURLと全く同じものです。普段みなさんはブラウザアプリでYoutubeを開くとき、https://youtube.com/にアクセスしますよね。この動作って、単純にhttps://youtube.com/からWebサイトを表示するためのデータを取得してきているだけなんですよね。

今回 UrlFetchApp.fetch(“https://api.adviceslip.com/advice”)という関数では、https://api.adviceslip.com/adviceにアクセスして、上記のようなデータを取得しているだけです。

普段我々がWebブラウザでやっている作業をプログラムで表現したらこうなるということですね。

sendToLine関数

  const options =
   {
     "method"  : "post",
     "payload" : "message=" + text,
     "headers" : {"Authorization" : "Bearer "+ LINE_TOKEN} // 一番上で設定したline notifyのトークンであるLINE_TOKENをここで設定してる
  }; // LINEにメッセージを送信するための設定。説明省略

何やら変な変数宣言が出てきましたねぇ。先ほど、変数とは「何かしらの数値または文字列などが入った入れ物」と言いましたが、それ以外にも入れることができます。代表的なのは、

{ “hoge”:”ほげ”, “fuga”: “ふが” }

のような、中括弧で囲われたものです。難しくないです。これは、単に一つの変数の中で、複数の変数を名前付きで管理できるようになっているだけです。

x = { “hoge”:”ほげ”, “fuga”: “ふが” } と書くと、「xの”hoge”は”ほげ”で、xの”fuga”は”ふが”です」というように、一つの変数の中に、”ほげ”も”ふが”もまとめられるようになったのです。

taro = "太郎"
hanako = "花子"

yamada = {
  taro: "太郎",
  hanako: "花子"
}

こんな感じのイメージですかね。苗字という1階層上の括りでまとめることができるよ！みたいな？

"payload" : "message=" + text,

これは、先ほども言った、文字列同士の計算ですね。例えばtext変数に”にゃむにゃむ”が入っていれば、”message=にゃむにゃむ”という文字列になるわけです。

UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);

ここでも先ほどのgetAdvice関数で出てきたUrlFetchApp.fetch関数が出てきましたね。しかし、先ほどとは違ってURLの他に、options変数も受け取っています。

例えば皆さんはyoutubeの動画に対してコメントを送信したりしますよね?

その時って、裏側でどんな処理が走っていると思いますか？

単純に、https://youtube.com/にコメントデータを送信しているだけなんですよ。それと同じです。

UrlFetchApp.fetch(“https://notify-api.line.me/api/notify”, options); と書くと、https://notify-api.line.me/api/notifyに対してoptionsの変数の中身のデータを送信することができます。これも普段我々がWebブラウザでやっている作業をプログラムで表現しただけですね。

まとめ

最後に、プログラム全体をもう一度眺めてみましょう。今度はコメントなしで掲載します。

const LINE_TOKEN = "";

function myFunction() {
  const advice = getAdvice()
  const translatedStr = LanguageApp.translate(advice, 'en', 'ja');
  Logger.log(`${advice}, ${translatedStr}`)
  sendToLine(translatedStr)
}

function getAdvice(){
  const response = UrlFetchApp.fetch("https://api.adviceslip.com/advice")
  const responseObj = JSON.parse(response.getContentText())
  return responseObj.slip.advice
}

function sendToLine(text){
  const options =
   {
     "method"  : "post",
     "payload" : "message=" + text,
     "headers" : {"Authorization" : "Bearer "+ LINE_TOKEN}
  };
   UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}

どうですか？なんとなくでもこのプログラムでやっていることの全体像が掴めたのではないでしょうか？

細かいところまで完全に理解する必要はないです。ただ、こうやってプログラムを理解できたことを「楽しい！！」と思ってもらえたら光栄です。以上、にゃむにゃむでした！

コメント

タイトルとURLをコピーしました