LINE内で使うアプリ開発のために、LIFFを試す（スターターキットを立ち上げてみる）

2024年3月14日

コーダーのオッコです。

新規プロジェクトとして、LIFFを使った開発が始まりました。

今回LIFFを初めて利用するので、メモがてらまずはスターターキットの立ち上げ方法を記載しておこうと思います。

gitを取ってきてローカルの環境構築をする

まずは公式ドキュメントからスターターキットのgitをクローンします。

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

ターミナルやコマンドラインからgit cloneしてもいいですし、私はsourcetreeユーザーなのでGUIからクローンしました。

また、知らなかったのですが純粋なJavaScriptのことをvanilla JavaScriptと呼称するらしいですね。

次にyarnを使ってローカルでページを開きます。

私はyarnがインストールされておらずエラーになったので、npmでインストールしました。

npm install --global yarn

Macなら

$ curl -o--L https://yarnpkg.com/install.sh | bash

curlコマンドで行けるようです。

yarn dev で出たエラー

次にyarn devを試したところ、以下エラーが出ました。

エラー①

yarn run v1.22.21
warning package.json: No license field
error Command “dev” not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

確認ポイント①：ちゃんとpackage.jsonがある場所でコマンドを実行しているか？

　→yarnを実行するディレクトリが正しいか確認しましょう。ディレクトリは

\line-liff-v2-starter\src\vanilla

配下です。（vanillaか、もしくはnextjsかnuxtjs） ※\line-liff-v2-starter 直下ではないので注意です。

確認ポイント②：package.jsonに”dev”が定義されているか？

　→devの定義が抜けていたら、追記しましょう。（LIFFスターターアプリに限っては抜けていることはないですが）

エラー②

Failed to load ./.env.
[webpack-dev-server] “hot: true” automatically applies HMR plugin, you don’t have to add it manually to your webpack configuration.
9% setup compilation DefinePlugin[webpack-cli] Error: error:0308010C:digital envelope routines::unsupported
at ~~~~~（省略）

こちらはどうやら、Node.jsのバージョンアップにより出てしまうエラーのようです。

devの中身に以下のように「NODE_OPTIONS=’–openssl-legacy-provider’」を追記します。（node.jsのバージョンを暫定的に下げる処置です）

“dev”: “NODE_OPTIONS=’–openssl-legacy-provider’ cross-env NODE_ENV=development webpack-dev-server –progress”,

※ちなみに、書く場所を間違えると

[webpack-cli] ‘NODE_OPTIONS=–openssl-legacy-provider’ is an invalid value for the –progress option. Only ‘profile’ is allowed.

こんなエラーが出たりします。オプション値扱いされてしまうんですね。（いい回避方法を私が知らないだけかもしれない）

これらのエラーを乗り越えると晴れてローカルでサイトに繋がるようになります。