開発経験ゼロのなんちゃってマーケターが、親孝行のために、なんちゃって野菜注文システムをGoogleツールとLINEnotifyでたどたどしく構築する

初めての投稿です。
この記事は、開発未経験のマーケター（志望）が、隣のチームのエンジニアに憧れて、Qiitaがあれば初心者でもプログラミングできるんじゃないかという甘い考えのもとで作成しています。
皆さんの参考になる記事ではありませんし、かなり低レベルの内容です。
読んでいただけるのであれば、寛大な心で、初心者の初めてのプログラミングの様子をお楽しみいただければと思います。
間違いやミス、**こうするといいのに**、など是非ともご指摘いただければ幸いです。

# 自己紹介

私はエンジニアではありません。
エイチームブライズで、広告運用・マーケティング担当のマーケターです。<br>
自分自身、マーケターと自称するには及ばないレベルであることを重々承知しているのですが、今回はわかりやすさを重視して自称マーケターとさせていただきます。
今は広告運用から半歩退き、経営企画部に所属しながら、SaaSの導入計画を考えつつ、データ活用について想いを馳せる日々が１年ほど続いています。

好きなものは、１にエクセル、２によさこい。３、４がカフェラテ、５にシン・ゴジラです。
好きな関数でいえば、Index関数とMatch関数。
これを使いこなせる私すごいと思っていましたが、最近はスプレッドシートのQUERY関数に衝撃を受け、スプレッドシート信者になりつつある今日この頃です。

# この度の経緯

これまでQiitaでは、アドテクノロジーについて検索することが多く、GoodleAppScriptとスプレッドシートを駆使して広告運用の精度上げや効率化に苦心していました。
（とはいえ、ゼロイチは全くできず、コピペで試行錯誤するくらいしかしていません・・。）

でも、先輩（@rf_p）が、1日目の記事:[【Qiita投稿初心者向け】アドベントカレンダー2019のすゝめ](https://qiita.com/rf_p/items/97f45ba1f08e2f7b2965)で書いていた

>アウトプットすることで自身のスキルアップに繋がるので、技術力が低いうちだからこそアウトプットは重要です。まずは思い切って第一歩を踏み出すこと！これが何より大事です。

という文章に感銘を受け、プログラムに挑もう！と一念発起することにしました。

そして、もう一つ、大きな理由があります。
最近、私の父親がこんなことを言い出したのです。

> 「IT企業に勤めてるんやろ？
>　パパッと、野菜をネット販売できるような**サイト作ってくれん？**」

で、出た〜〜<br>
IT企業の社員全員エンジニア説〜〜〜！

## 発端は私の父親。

私の父親は、自動車メーカーに勤めながら兼業農家として、昔から米作り・野菜作りを嗜んでいました。
ですが２年前、長年のサラリーマン生活を卒業し、待ち望んだ専業農家生活へと突入したのです。

それからというもの、朝から畑仕事・田んぼ仕事をし、近所のスーパーに野菜を置いてもらって販売し、自分が育てたお米を食べて~~ニヤつく~~生活する毎日を送っています。<br>
そんな毎日を送る父は日焼けが酷く、真っ黒です。暗闇では歯や服が浮いているのかと思います。
もはや、フライパンなの？BBQ用の炭なの？父の腕なの？と間違う始末。
**松●シゲルさんもびっくりする黒さです。**
私が陸上部時代、日焼けしすぎて「エチオピア」というあだ名がついていたのは、遺伝のせいだったんですね。

そんなわけで便宜上、父を「シゲル」と称することにします。

さて、そんなシゲル氏の第二の人生の目標は、農業で生計を立てること。一攫千金です。
帰省するたびに、売上を立てるため「販売サイトを作ってくれ」「まだか」「まだなのか」と言われ続けているので、親孝行と自分の勉強を兼ねて、なんちゃってECシステムを作成できたらなあと思いました。

# 何をどう作るのか

作るものは、「ユーザーが野菜を注文したら、その注文を把握できて、発送して届けられる」一連の流れです。<br>
制限としては、
１：還暦間近の父でも使えること
２：無料で運用できること
３：メンテナンスや保持が、非エンジニアのわたしでも簡単に済むもの
以上の３点が守られていることが望ましいです。

尚、わたしが自由に扱える言語は、ありません。
それでも何か　~~黒い画面に向かって~~ 形あるものを作ってみたいんだよね・・・とこぼしたら、同僚の@fussy113が、初心者向けの本を渡してくれました。優しいです。

>なるほど・・・読める！！読めるぞ！！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/6c74cb14-cf45-67dd-484d-9980497f41fe.jpeg" width="500px">

これでわたしの武器は、
１：スラスラ読めるJavaScriptふりがなプログラミング
２：Qiita
の２本立てとなりました。

## とりあえず考えてみる

できるかどうかはわからないけれど、やってみよう精神で、とりあえず構想してみます。
><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/03b411a8-89ac-56e8-c0c0-7f712d5c0039.jpeg" width="500px">
>@fussy113から、犯罪計画を立てているみたいと言われました。

私はこの１年間、SaaSの導入計画を考える中で、
出力と入力と蓄積を意識したアーキテクチャを考えておく重要性を学びました。

だから、まずは整理です.
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/be63d3c4-2bbf-db53-baf9-699128dba2b8.png" width="500px">
よし！
わたしが日頃、入出力やカスタマイズに慣れている、
Googleフォーム、スプレッドシートを軸とすることにして、↓こんな感じの流れを作ろう！と考えました。
***
購入者がGoogleフォームで注文する
↓
スプレッドシートに注文データが送られる
↓
LINEに注文通知が飛ぶ
↓
シゲル氏がLINEで連絡先を確認して、注文された品を発送
↓
発送通知が購入者にメールで届く
↓
野菜やお米届く。幸せになる。
***

購入者が確認するものは、Googleフォームとメールのみ。
シゲル氏が確認するものはLINEだけが望ましいです。
日頃外で ~~日焼け~~ 農作業をしているので。

売上管理はスプレッドシートを、定期で見れるようにしたいです。
日別・週別・月別の売上も締め日ごとに、LINEに送られると良い。
<br><br><br>
・・・あっ、売上といえば　**支払いフロー**　がないやん。<br><br><br>
考え直しました。
*** 
購入者がGoogleフォームで注文＆**支払い**をする
↓
スプレッドシートに注文データが送られる
↓
LINEに注文通知が飛ぶ
↓
シゲル氏がLINEで、連絡先と**支払い**を確認して、注文された品を発送
↓
発送通知が購入者にメールで届く
↓
野菜やお米届く。幸せになる。
***

ウンウン、いい感じです。
今後の改善のために、購入後はアンケートや口コミをもらえるとより良いでしょう。
<br><br><br>・・・・。<br>
と、まあ
風呂敷をとりあえず目一杯広げましたが、忘れてはいけません。
わたしは**プログラミング初心者**。

支払いフローなどを最初から実装して、支払い事故が起きては元も子もありません。
最近、Googleを神と崇めるギークな先輩（@sho0211）から、新しいことに挑戦するには、プレトタイプの考え方が大事だと学びました。
※参考記事:[小さく失敗するということ、あるいはプレトタイピング(not プロトタイピング)のススメ](https://qiita.com/sho0211/items/2cff649de02af76867d5)


やりとりしやすい親類間で、金銭の受け取り機能なしで試してみて、
シゲル氏が使いこなせそうであれば、
理想の支払い込みフロー込みでWEBサイトを作ってあげようと思います。（上から目線）

そういえば、私は一人暮らしをしているのですが、最近、お米が切れてしまって困った覚えがあります。

こういう時、まあ、家族なので、**LINEでお願いすればいいだけ**なのですが
ちょうど良いので、今後のECサイト化を見据えて、簡単な仕組み化をしてみようと思います！

## 現時点での理想の状態

* 一人暮らしの私や遠方の親戚が、「野菜とお米が欲しいなー」と思った時に、還暦のシゲル氏に注文する事ができる状態

## 目指す仕組み
私がGoogleフォームで注文する
↓
スプレッドシートに注文データが送られる
↓
家族LINEに注文通知が飛ぶ
↓
シゲル氏がLINEで確認して、注文された品を発送
↓
家族LINEに発送通知が来る
↓
野菜やお米届く。私が幸せになる。

# いざ！実装！

## １：Googleフォームを作る

まずは、慣れ親しんだGoogleフォームで注文画面を作ります。
テンプレートに注文書というものがありました。これはいい。
一旦これにしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/0742c388-daaa-5217-06ac-e4414b956e7e.png)

調べてみると、Googleフォームで回答を送信した時に、LINEへ通知を送ることができるようです。
>私がGoogleフォームで注文する
>↓
>スプレッドシートに注文データが送られる
>↓
>家族LINEに注文通知が飛ぶ

ここは、こう修正されます。
>私がGoogleフォームで注文する
>↓
>スプレッドシートに注文履歴が蓄積され、家族LINEに注文通知が飛ぶ

### Googleフォームから回答があったらLINE＠へ通知を飛ばす

※参考記事:[Googleフォームの使い方②（通知編)](https://www.smilevision.co.jp/blog/tsukutte13/)
※Qiitaでは見つけられませんでした。。

なるほど。LINE NotifyとGAS(Google Apps Script)を使ってトークルームに通知する、という手法があるようです。

LINE notifyを開設しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/6013c0ee-d7e3-ff66-0eb8-e722ec5841fa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/93a74f77-e83a-4e61-331c-3ebd4ceb327e.png)

Googleフォームのスクリプトエディタに、参考記事を参照してコードを貼り付けました。
トリガーの設定を、参考記事を参照しながら、「送信時」に設定します。

・・・ここで問題が！
トリガーの設定時にエラーが出てしまい、ログインを求められるも、無効処理がかかってしまいました。
いそいそとGoogleサポートに問い合わせ。すぐにチャットで返信が来る。素晴らしい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/4dd6a0ba-b2f0-9fb6-4223-b8fe8269f11d.png)
が、問い合わせをしているうちに、気づいてしまいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/974b1d87-263d-3808-0872-dd3ba6adba5f.png)

あっこれ、**Gsuite**なんだ・・・（無知）


どうしてもこの設定したいと思ったので、Gsuiteにやむなく加入しました。
14日間は**無料体験**ができるそうです。
制限２の「無料で運用できること」がすでに破られましたが、**今は無料**ということで、目をつぶります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/dbaf32dd-b589-0886-e2b9-a8bdb6300bef.png" width="500px">

設定できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/9a4f8cc8-8ff2-6feb-51d5-465a05e33e69.png)

ウェブアプリケーションとして公開して、LINE notifyに連携しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/22fc7ab6-28b7-fb28-9794-c507118a37c5.png" width="800px">

はっ・・このままでは貼り付けのみで何も学びがないじゃないか！という事で、
scriptを見ながら、「Java script ふりがなプログラミング」を片手に、たどたどしく読んでいこうと思いました。

紫になっている箇所は予約語、なるほど。



・・・・・・letじゃなくて、varなんだ・・


・・・・・あっ、これ、ふりがなプログラミングはES2015に基づいて書かれているらしい。
このscriptはES5バージョン？？（大ショック）（心折れそう）（どうしよう）

本当は、書き換えを試みたほうが学びが多いのだと思いますが、
ここで心が折れるのは嫌なので、読み下しは後回しにしました。
妥協じゃ無いです。**方向転換**です。

まずは、動くかどうかが大事なので、Googleフォームで回答してみました。
すると、すぐにLINE通知が来ました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/6f02c805-2688-a1ef-ac72-e405d0edafd5.png" width="500px">

本当に通知が来ました！！！！すごい！！！！！！！（感動）

## ２：注文できるよう、メニューを設定する

注文できるようになったら、何を注文するかを設定しなければなりません。
入荷できる野菜やお米はシゲル氏の畑の出来高によるので、季節によっても、日によって、種類も量も変わってしまいます。
そこまで大規模の農家ではないのです。

楽天やAmazonのような、在庫の内容と数が注文時に連動する上手い方法を見出せない・・・。
仕方ない、そういう時は・・・オイシックス制を採用するしかない。
出来高によって融通のきく、**セット制** にすることにします。

ただ、セットパックを設定しても、適宜内容を変えられるようにしたい。
無いものを注文できてしまうのはNGです。
そこで、スプレッドシートに今用意できるパックやメニューを記入したら、1分後にGoogleフォームのプルダウンが変更するscriptを入れました。

参考記事:[GASを用いてGoogleフォームのプルダウン内容をスプレッドシートから動的に生成する](https://qiita.com/fuku_sato1/items/d1f3377850caceb6f95c)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/00b44366-6d96-f776-7f8f-0b26e32ba52a.png" width="800px">
↓トリガー設定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/a43c8737-dfdf-08aa-bb7d-70bec8cca0b9.png" width="500px">
↓シゲル氏が更新する箇所
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/1774f76a-f789-43bd-a8ec-9385f215ebb0.png" width="500px">
↓更新したら１分後に反映される
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/4a89a3d6-1097-14be-1b38-9d04e0ba80d0.png" width="500px">

は、反映された〜〜〜！
プログラミングってすごい〜〜！！！！！！！（感動）（２回目）

ですが、無念ながら、在庫の「数」の反映は諦めました。解決策の調べ方すら検討できなかったからです。
今の段階では、家族LINEで調整で行きます。

また、シゲル氏の入力はLINEに限定したかった。
LINEからスプレッドシートに反映させる方法を考えましたが、自分ではLINE botの構造がまだ理解できませんでした・・。

※　LINE bot、見よう見まねで作ってはみた
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224146/ecc3a447-48ab-159b-7260-9c3f557d22ca.png" width="500px">

師走の最中、私の初めてのプログラミング(？)は、ここまでで限界となりました。

# 出来た仕組み

シゲルがスプレッドシートで用意できるパックを記入する
↓
私がGoogleフォームで注文する
↓
スプレッドシートに注文履歴が蓄積され、家族LINEに注文通知が飛ぶ
↓　＜　※ここから無念の手作業　＞
シゲルさんがLINEで確認して、注文された品を発送
↓
家族LINEで報告する
↓
野菜やお米届く。私幸せ。

# 今後の展開

シゲル氏にやり方を展開するのは、年末年始の帰省を予定しているため、反応は追って記載します。
また、年末年始休みでこのなんちゃってシステムをよりグレードアップし、↓の理想のフローに向けて前進していくつもりです。

>購入者がGoogleフォームで注文＆支払いをする
>↓
>スプレッドシートに注文データが送られる
>↓
>LINEに注文通知が飛ぶ
>↓
>シゲル氏がLINEで、連絡先と支払いを確認して、注文された品を発送
>↓
>発送通知が購入者にメールで届く
>↓
>野菜やお米届く。幸せになる。

尚、今回、実装できなかったことが
１：LINEからラインナップと数を入力し、注文画面に反映させる
２：LINEで発送ステータス更新をし、メール通知が飛ぶ
３：支払いフローを組み込む
ことです。
この辺りを１つずつ地道に解決していく必要がありそうです。

同時に、自分は、まだJavascriptを読み下させていません。
そのため、LINE botの組み込みと、scriptのカスタマイズができないのです。

よって、親孝行を達成するため、当面の行動目標は

① JavaScriptを読めるようになる
→　具体的には、ES5バージョンをES2015に書き換えられるようになれば、読めると言えるんじゃないかと(勝手に)思っています。

② LINE botについて理解する
→　無限の可能性を秘めていそうです・・

以上の２点で設定します。

# 感想

今回、アドベントカレンダーというきっかけがなければ、
自分は一生プログラミングをやりたいと言いつつ、触れずに過ごしてしまったことでしょう。
また、Qiitaの記事（と本とGoogle検索）がなければ、プログラミングよくわかんない〜〜！と早々に離脱していたに違いありません。
ありがとうQiita・・・。

ほとんどコピー＆ペーストなので、出すのもお恥ずかしい記事なんですが、
人生における、小さいけど大きな挑戦をした記念として、寄稿します。
また、記事を書きながらプログラミングを学んでいき、徐々に自分の実務にも活かしていくつもりです。

# 最後に

いつも、私がこういうことをしたいけれど、解決策が思い浮かばない、という時に、エンジニア達が、こうするとどうか、ああするとどうか、と助けてくれます。
弊社には、「なぜできないかをうまく説明するのではなく、どうしたらできるのかを考える」という姿勢を大切にしているのですが、その姿勢を一番体現しているのが、エンジニアなのではないかと思うのです。
だから私も、どうしたらできるのか、の思考の幅を広げるべく、簡単なプログラミングから勉強していきたいと思っています。

# アドベントカレンダーの予告

さあ、いよいよクリスマスですね！
明日は弊社エンジニアの@oekazumaが「svelte」について書いてくれます^^

# 私の隣のチームで働きませんか？
![alt](https://brides.a-tm.co.jp/wp-content/uploads/2019/11/ATEAM_BRIDES.jpg)
[エイチーム](https://www.a-tm.co.jp/)は、インターネットを使った多様な技術を駆使し、幅広いビジネスの領域に挑戦し続ける**名古屋の総合IT企業**です。
そのグループ会社である**株式会社エイチームブライズ**では、一緒に働く仲間を募集しています！

- [ハナユメ サイト開発グループ](https://jobs.qiita.com/employers/brides-a-tm/development_teams/138)
- [HIMARI開発チーム](https://jobs.qiita.com/employers/brides-a-tm/development_teams/147)
- [技術開発部](https://jobs.qiita.com/employers/brides-a-tm/development_teams/148)

上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずは**チャットでざっくばらんに話**をしましょう。
技術的な話だけでなく、私たちが大切にしていることや、お任せしたいお仕事についてなどを詳しくお伝えいたします！

[Qiita Jobs](https://jobs.qiita.com/)よりメッセージお待ちしております！