LINE Front-end Framework(LIFF)でアプリケーションを開発したい - 1日目

LIFFを選んだ目的

LINE Front-end Framework (LIFF)

趣味というかちょっと人から頼まれまして、簡単なスマートフォン用アプリを作ることになりました。
このとき、まず考えるのはいわゆる「スマホ アプリ」。Google PlayとかApp Storeでダウンロードするアレです。ただ、それだとiPhone用とAndroid用それぞれ開発しないといけないし、iPhone用は公開が面倒臭そう（ちゃんと調べてない）だし、開発環境の構築も大変そうだし、ということで却下。
次に考えたのはWebアプリケーション。ブラウザがあれば動くので、スマホだけじゃなくパソコンからも使えるし、一応開発経験もあるし、と思ったのですが、経験上かなり（デザインとか）ブラウザ依存となってしまうため、複数のブラウザでの動作確認がこれまた面倒、ということで却下。
LINEで何かできないかと思い、LINE Developersを漁っていたところ、「LINE Front-end Framework」（以下、LIFF）なるものを発見。どうやらLINE上で動作するアプリケーションが作れる模様。なんとなく面白そうだったので、ひとまずこれに乗っかってみることにしました。

※ご注意

筆者の本業は某業界向けERPパッケージの開発です。そのため日常的にシステム開発には携わっています（Javaはそこそこ）。ただし、担当分野が「業務アプリケーション」のため、「この業務をどうやってシステムで実現するか（プログラミングするか）」的なことは得意なのですが、サーバやネットワークなどのインフラや、開発言語・環境の選定・構築などの知識はほぼ皆無です（専門の部署の人が全部やってくれるので）。
「この人システム屋なのにこんなことも知らないんだな」と思う部分が多々あるかと思いますが、ご容赦ください。
余談ですが、昨年実家に帰省したとき、実家のWi-Fiへの接続の仕方が分からず、年老いた父に全部設定してもらい、呆れられたことがありました。
※以降の作業はすべてMacでやっています。

最初にやったこと

チャネルを作成する

LIFFスターターアプリを試してみる

LINE Developersのドキュメントに記載されている「チャネルを作成する」「LIFFスターターアプリを試してみる」の手順に沿って行動。https://{Heroku app name}.herokuapp.com/にアクセスし、以下の通り表示されるところまで確認しました。

ここでいくつか「自分が知らないこと」が出てきたので、この記事の中で徐々に勉強していくことにします。現時点では以下の通り。

・Herokuって初めて聞いた
・Node.jsは名前だけ知っているけど、詳しく知らない
・アプリケーション動かすにはどうすればいいの？
・開発環境はあるの？どうやって構築するの？

Herokuについて

クラウド・アプリケーション・プラットフォーム | Heroku

「LIFFスターターアプリを試してみる」の手順にそって進めていくと、デプロイ先として登場するHeroku。恥ずかしながら初めて耳にしました。
なんとなく「AWSとかAzureっぽいサービス？」という理解でとりあえず手順を先に進め、後で検索してみました。以下のサイトが非常に分かりやすかったです。

個人開発者向けサーバ環境の選び方まとめ（heroku,aws,firebaseなどなど） - Qiita

AWSのアカウントも持っていたのでHerokuでなくてもいいかなと思っていたのですが、参考にしたサイトにあった以下の記述

Herokuの魅力はインフラ周りのことを詳しく知らなくても動かせること。

により、Herokuを使うことに決めました（切実）。

スターターアプリを使えるようにする

line/line-liff-v2-starter

LIFFスターターアプリのREADMEに方法が記載されているので、その通りやってみます。

$ npm install
-bash: npm: command not found

さっそくここでつまずく。どうやら先にnode.jsが必要っぽいです。
以下のサイトから取得。

Node.js — Run JavaScript Everywhere

$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 50 packages from 37 contributors and audited 126 packages in 3.094s
found 0 vulnerabilities

うまくいったようです。先に進めます（問題なかった箇所の記載は割愛）。

無事、ブラウザとLINEの双方から上記の画面を表示させることができました。

Node.jsを学ぶ

スターターアプリをカスタマイズすれば独自のアプリが開発できそう、というのは分かったのですが、アプリが作られているであろう言語「Node.js」の知識がほぼ皆無だったため、テキスト（電子書籍）を購入しました。

Node.js超入門[第2版]

1日目はここまで！明日までにテキスト読みます。