LINEミニアプリの開発に必要な開発言語は？自社開発か外注がおすすめかも解説
LINEミニアプリは、コミュニケーションツールとして用いられる「LINE」のプラットフォームで動作するアプリケーションです。LINEミニアプリを取り入れれば、オンラインショッピングや予約、ユーザーにとって有益な情報の配信など、さまざま機能を追加でき、マーケティングの新たなチャンスも生み出せます。
そんなLINEミニアプリを開発しようと考えた場合、どのような技術や開発言語が必要となってくるのでしょうか？そこで今回は、LINEミニアプリの開発手順と必要な技術・開発言語について解説します。また、LINEミニアプリと似ているLIFFアプリの開発に必要な技術・開発言語、さらに自社開発と外注のどちらがおすすめなのかもご紹介しているので、ぜひ最後までご覧ください。
LINEミニアプリの開発手順と必要な技術・開発言語
LINEミニアプリは以下の手順で開発が進められます。
- LINEミニアプリの設定・準備
- フロントエンド開発
- LINEミニアプリ固有の機能の実装
- 必要に応じてバックエンド開発
- API連携
- デザイン調整
- テスト・デプロイ
- 申請・運用
各工程で必要となってくる技術や開発言語は異なります。そこで、手順に沿って必要となる技術や開発言語を解説していきましょう。
1. LINEミニアプリの設定・準備
LINEミニアプリを開発するためには、LINE Developersコンソールを準備する必要があります。LINE DevelopersコンソールはLINEミニアプリの開発やテストを行う管理画面として機能するだけでなく、認証済みのミニアプリにするために認証審査へ提出するためのツールでもあります。
LINE Developersコンソールを使ってLINEミニアプリのチャネルを作成した場合、3つの内部チャネルがつくられます。
- 開発用：開発・テスト用のチャネル
- 審査用：LINEヤフー株式会社が審査に使用するチャネル
- 本番用：ユーザーに公開されるチャネル
LINEミニアプリの設定・準備に必要な技術・開発言語
LINEミニアプリの設定・準備で必要な技術・開発言語は特にありません。この段階ではまだコンソールに設定を登録し、開発環境の準備を行っているだけなので、特定の開発言語を習得していなくても設定作業が行えます。
コンソールには以下の情報を登録するので、事前に準備しておくとスムーズに設定を進められるでしょう。
- LINEミニアプリのアイコン
- LINEミニアプリ名（英語入力）
- プロバイダ名
- ミニアプリの説明（英語入力）
- プライバシーポリシーページのURL
2. フロントエンド開発
LINE Developersコンソールの設定・準備が完了したら、開発に移ります。まずはユーザーが直接操作したり、見たりするフロントエンドの開発です。フロントエンドの開発にはLINEが提供するフロントエンド開発フレームワーク「LIFF」を活用します。
すでにWebアプリを運用しており、LINEミニアプリにしたい場合はWebアプリ側でLIFF SDKを読み込み、LINEミニアプリへの最適化を図っていきます。なお、ユーザーが快適にアプリを利用できるように、パフォーマンスにも考慮すべきです。パフォーマンスの計測はGoogleの「Lighthouse」や「PageSpeed Insights」などのツールを活用しましょう。
フロントエンド開発に必要な技術・開発言語
フロントエンド開発で必要となってくるのは、HTML/CSSやJavaScriptです。HTML/CSSはアプリ画面のレイアウトやデザインを決める際に活用します。JavaScriptはLINEミニアプリの中で動的な処理を行いたい場合に使います。JavaScriptの代わりにTypeScriptを活用することも可能です。
LINEミニアプリでは複雑な機能を実装することも多いです。特にSPAを実装する際にはReactやVue.js、Svelteなどのフレームワークで開発すると良いでしょう。
3. LINEミニアプリ固有の機能の実装
フロントエンド開発が完了したら、LINEミニアプリ固有の機能を実装していきます。例えばLINEミニアプリのヘッダーには、現在開いているページを友だちに共有できるアクションボタンがあります。
アクションボタンはLINEですでに実装されており、デフォルトでも表示されています。しかし、ボタンの動作・メッセージの内容などを変更できません。代わりにカスタムアクションボタンを実装することで、メッセージの内容を変更でき、LINEミニアプリを友だちに共有してもらえるようになります。
他にも、認証済みのミニアプリのみ使える機能として、ユーザーのアクションに対する確認や応答に、ユーザーが知っておいた方が良い情報を通知する「サービスメッセージ」という機能や、ユーザーが使用する端末のホーム画面にミニアプリへのショートカットを追加できる機能などを実装することも可能です。
LINEミニアプリ固有の機能の実装に必要な技術・開発言語
固有機能の実装に必要な技術・開発言語は、動作を制御するためのJavaScriptまたはTypeScriptです。ミニアプリは基本的にWebブラウザ上で動作することになるため、動的な機能を実装する際にはJavaScriptが役立ちます。
また、LINE APIを活用してLINEとのやり取りを実現させることから、APIとの通信に関する知識・技術も必要です。API通信によってユーザープロファイル情報の取得やメッセージ送信、友だちリストの管理などもできるようになります。APIとの通信では、fetch API（ブラウザに標準実装されているWeb API）とaxios（HTTPリクエストの処理と非同期処理が簡単に行えるHTTPクライアントライブラリ）を活用します。
4. 必要に応じてバックエンド開発
LINEミニアプリでは必要に応じてバックエンド開発を行うこともあります。バックエンド開発はサーバーサイド領域での開発が中心となり、主にサーバー管理やデータ処理などを実施します。
LINEミニアプリの場合、例えば決済システムを導入する際にはバックエンド開発によって追加することが可能です。また、ユーザーがミニアプリにアクセスする際に使用するパーマネントリンクも作成できます。
バックエンド開発に必要な技術・開発言語
バックエンド開発にはさまざまな技術・開発言語が必要となってきます。まず、ブラウザ上で動作するJavaScriptをサーバーサイドでも動かせるようにするための環境として、Node.js（Express/NestJSなど）が必要です。Node.jsはLIFFスターターアプリを実行するのにも必要となります。
また、開発言語としてPython（Django/Flaskなど）やPHP（Larvelなど）、Goなども必要です。Pythonは機械学習やタスクの自動化など、AIベースのプロジェクトに活用されているバックエンド言語です。PHPはプラットフォームに依存せず、WebサーバーとMySQLなどのデータベースもサポートできます。Go言語は高速処理が必要な際に用いられることが多いです。
他にも、バックエンド開発に使用するデータベースとして、MySQLやPostgreSQL、FirebaseのFirestore（NoSQL）が用いられます。MySQLとPostgreSQLはどちらもリレーショナル型のデータベースで、無償で活用できます（MySQLは商用利用する場合は有償）。
5. API連携（LINEミニアプリの拡張）
LINEミニアプリの機能を拡張するためには、API連携が必須です。上記の固有機能でもご紹介した「カスタムアクションボタン」と「サービスメッセージ」もAPI連携が必要となります。
LINEミニアプリに提供されているAPIには、「LIFF API」と「サービスメッセージAPI」の2つがあります。LIFF APIはミニアプリ内で呼び出し、サービスメッセージAPIはサーバーから呼び出すことが可能です。LIFF APIはカスタムアクションボタンを実装する際に活用されます。
API連携に必要な技術・開発言語
API連携に必要な技術・開発言語は、主にバックエンド開発と同様で、PythonやPHP、Go言語などを用います。また、LINE APIを利用するためにはHTTP通信（REST API）に関する知識も必要です。
また、ミニアプリにOAuth認証を実装するためには、JSON Web Token（JWT）も使用することになります。OAuth認証とは、1つのプロバイダのリソースを別のサービスで安全に利用できるようにするプロトコルを指します。JSON Web Token（JWT）はクライアント・サーバー間で安全に情報を送信するためのトークンフォーマットで、認証に活用されています。
OAuth認証とJWTはいずれも認証・認可の標準になりますが、OAuth認証は外部のソーシャルログインやAPIアクセスに活用され、JWTはユーザーログインやAPI認証を行う際に用いられます。
6. デザイン調整
LINEミニアプリのデザイン調整として、アイコンを作成します。アイコンはチャネルの同意画面やホームタブ、メッセージなどあらゆる場所で活用されるものです。サイズは130×130pxに収め、ロゴのサイズは最小54×54px～最大90×90pxで、推奨サイズは76×76pxになります。
また、LINEミニアプリをノッチ（スマホ画面上部にあるくぼみが付いたディスプレイ）がある端末でもすべて表示できるようセーフエリアに収めたり、読み込み時のアイコンとしてスピナーを設置したりします。
デザイン調整に必要な技術・開発言語
LINEミニアプリのデザイン調整に必要な技術は、HTML/CSSです。HTMLは文章の構成・役割を示すためのマークアップ言語の1つであり、CSSはWebページのスタイルを指定する言語です。特にLINEミニアプリをセーフエリアに収める際にCSSが活用されます。
また、LINEミニアプリのアイコンを作成する際に画像編集ツールを活用します。画像編集ツールにもさまざまな種類がありますが、例えばFigmaやPhotoshopなどは多くのユーザーが画像編集に用いているツールになるため、アイコンを作成する際に役立つ知識がネット上でもチェックしやすいです。
7. テスト・デプロイ
LINEミニアプリの機能を実際に試してみたい方は、LINEヤフー株式会社が提供している「LINEミニアプリプレイグラウンド」を活用してみましょう。このミニアプリはLINEアプリがインストールされたスマホ端末でプレイグラウンドを開くと、一部機能を実際にお試しできるミニアプリとなっています。
LINEミニアプリプレイグラウンドを活用して、機能がどのように動作するのかを確認した上で、開発したアプリケーションをサーバー上に展開し、動かせるようにします。
テスト・デプロイに必要な技術・開発言語
テスト・デプロイに必要な技術として、以下が挙げられます。
- Jest / Mocha（テストフレームワーク）
- Docker / Kubernetes（サーバー環境）
- AWS / GCP / Firebase（ホスティング）
Jest / Mochaはテストフレームワークで、いずれもNode.js上で実行可能です。Docker / Kubernetesはコンテナを管理・運用する際に活用されるソフトウェアになりますが、Dockerはアプリケーションを各コンテナに分離することを目的としており、Kubernetesは各コンテナの管理に活用されます。
また、ホスティングサービスとしてAWS（Amazon Web Service）やGCP（Google Cloud Platform）、Firebaseなども用いられます。
8. 申請・運用
LINEミニアプリを開発できたとしても、未認証だと一部機能が制限された状態になります。すべての機能を使えるようにするためには、LINEヤフー株式会社による審査を受け、認証済みアプリにしなくてはなりません。
LINEミニアプリの審査に通過するためにも、LINEミニアプリのガイドラインやルールに沿って開発されているかを確認しておきましょう。また、LINEミニアプリポリシーを遵守しているかどうかも確認する必要があります。
審査が完了し、認証済みアプリとなったらいよいよ運用することになります。ミニアプリを運用する際に、LINE公式アカウントを活用してプロモーションをするのもおすすめです。
申請・運用に必要な技術・開発言語
申請・運用段階ではすでに開発が完了している状態になるため、必要な技術や開発言語などは不要です。ただし、LINE公式アカウントを活用してプロモーションを行う際に、LINEミニアプリを初めて開いたユーザーのチャネル同意画面で、LINE公式アカウントを友だち追加するためのオプションを表示するためには、LINE Developers コンソールを活用して設定する必要があります。
LIFFアプリの開発手順と必要な技術・開発言語
LIFFアプリは、LINEヤフー株式会社が提供しているWebアプリ用のプラットフォームです。LIFFアプリを活用すると、LINEのユーザーIDなどをLINEプラットフォームから取得できるようになり、ユーザー情報を利用した機能の提供や、ユーザーの代わりにメッセージなども送信できます。
ここではLIFFアプリの開発手順と必要な技術・開発言語について解説します。
1. 開発環境の構築
最初はLIFFアプリを開発するために、開発環境を構築します。LIFFアプリの開発環境を構築するためには、「Create LIFF App」を活用します。
Create LIFF Appとは、コマンド1つで開発環境を構築できるCLIツールです。Create LIFF Appからの質問に解答していくことで、用途に合った開発環境を生成できます。
開発環境の構築に必要な技術・開発言語
開発環境の構築に必要な開発言語は、JavaScriptまたはTypeScriptです。Create LIFF Appからの質問に答えていく中で使用する言語を選択できます。
また、Create LIFF Appの実行環境としてNode.jsに関する知識・技術も必要です。また、パッケージ管理にはYarnまたはnpmが活用されます。
アプリの開発環境については以下の記事でも解説していますので、参考にしてみてください。
2. フロントエンド開発
開発環境を構築できたら、次にフロントエンド開発に取りかかります。フロントエンド開発では以下の設定・処理を行います。
- LIFFアプリのタイトル設定
- LIFF SDKの組み込み
- LIFFアプリの初期化
- LIFF APIの呼び出し
- OGPタグの設定
LIFF SDKの組み込みについては後ほど詳しく解説しますが、LIFF SDKの組み込みとLIFFアプリの初期化によってLIFF APIを呼び出し、機能が使えるようになります。
フロントエンド開発に必要な技術・開発言語
フロントエンド開発に必要な開発言語には、HTML/CSS、JavaScriptまたはTypeScriptが必要です。HTMLはマークアップ言語の1つでタイトルの設定やCDNパスの指定などに用いられます。CSSは文書のスタイルを指定するための言語で、JavaScript・TypeScriptは動的な操作やロジックに必要です。
また、Create LIFF AppはフレームワークとしてReactやVue.js、Svelte、Next.js、Nuxt.jsなどを生成できます。これらのフレームワークは必要に応じて使い分けることも可能です。
3. LIFF SDKの組み込み
開発したWebアプリをLIFFアプリとしてそのまま使用することはできません。WebアプリにLIFF SDKを組み込むことによってLIFFアプリとして使えるようになります。
LIFFアプリにLIFF SDKを組み込む方法として、CDNパスを指定するか、npmパッケージを利用するかの2種類から選べます。CDNパスを指定する場合、目的に合ったCDNパスを指定する必要があります。npmパッケージを利用する際にはnpmを使ってLIFF SDKをインストールすることも可能です。
LIFF SDKの組み込みに必要な技術・開発言語
LIFF SDKに組み込む際に必要な開発言語として、JavaScriptまたはTypeScriptが必要です。JavaScriptとTypeScriptはLIFF SDKを操作するのに必要な言語となります。
JavaScript・TypeScriptは開発環境の構築やフロントエンド開発にも必要な言語となるため、LIFFアプリを開発するためには、JavaScript（TypeScript）が最低限必要な知識・技術と言えます。
4. 必要に応じてバックエンド開発
フロントエンド開発が完了し、LIFF SDKを組み込んだら必要に応じてバックエンド開発も行います。例えばLIFFアプリはユーザーがログイン処理を行うとユーザーのプロフィール情報を取得できますが、この処理を正しく行わないとなりすましなどの被害を受けやすくなる可能性もあるでしょう。
この状態を回避するためにも、IDトークンやAccessトークンをLIFFアプリからサーバーに送信することで、安全にプロフィール情報を取得できるようになります。
バックエンド開発に必要な技術・開発言語
バックエンド開発はフロントエンド開発とは異なり、専用のランタイムで実行されます。バックエンド開発ではさまざまな言語が用いられますが、JavaScriptのランタイムとしてNode.jsが必要です。
また、必要に応じてExpressなどのフレームワークも活用することから、目的に合わせて必要なフレームワークに関する知識・技術も習得しておくと良いでしょう。
5. デプロイと運用
LIFFアプリの開発が完了したら、テスト環境に移行して実際に稼働できるかどうかテストしていきます。デプロイするためには、LINE Developersコンソールを活用し、LINEログインのチャネルに追加することで、LINEや外部ブラウザで起動できるようになります。
チャネルを作成したら任意のサーバーにLIFFアプリをデプロイしましょう。なお、1つのチャネルに最大30件のLIFFアプリを追加することが可能です。デプロイも完了したら実際にアプリの運用に移行していきます。
デプロイと運用に必要な技術・開発言語
デプロイと運用時にはホスティングやサーバーレス機能を活用するために、AWSやGCP、Firabaseなどの知識が必要です。WebアプリのLIFFアプリをデプロイするのにホスティングサーバーを活用します。
Firebaseはホスティングに加えてプッシュ通知やアナリティクス分析などを利用できるほか、無料枠も設けられています。まずはスモールスタートで始めたい方にはFirebaseがおすすめです。
LINEミニアプリは自社開発すべきか、外注すべきか？
LINEミニアプリを自社開発にすべきか、それとも外注にすべきか悩んでいる方も多いでしょう。自社開発か外注かは、自社がLINEミニアプリをどのように運用していくのか、何を重視したいのかによって最適な方法が違ってきます。ここでは、自社開発と外注に依頼した場合のそれぞれのメリットを解説していきましょう。
長期的に内製化するなら自社開発
LINEミニアプリを自社開発するメリットは、アプリ開発のノウハウを社内に共有できるため、将来的に内製化も視野に入れている場合は、自社開発に取り組むのがおすすめです。また、自社開発だと社内プロジェクトで開発が進められるため、比較的スケジュールや仕様を柔軟に調整しやすいメリットもあります。
ただし、自社開発をするにはエンジニアやディレクターの存在が必要不可欠であり、まずは人材の育成または採用活動を行う必要があります。また、社内のエンジニアの技術にアプリの品質が依存しやすく、プロジェクトが思うように進まない可能性もあるでしょう。時間とお金をかけてでも長期的に内製化を目指したい場合は、自社開発でLINEミニアプリの開発に取り組んでみてください。
費用を抑えた、スピーディーな導入なら外注
LINEミニアプリの開発を外注先に依頼した場合、開発コストを抑えつつ、スピーディーに導入することが可能です。外注に依頼するとコストがかかるイメージもありますが、自社で一から開発チームをつくるよりコストは抑えられます。
また、専門的な知識と技術を持つ開発チームや個人に開発を依頼できるので、効率的な開発にもつながるでしょう。自社の担当者がアプリ開発に関する専門知識を持っていなくても、アプリを開発できるのは大きな強みです。
ただし、外注先によってはクオリティに差が見られたり、自社が考える理想的なアプリのイメージがうまく伝わらず、異なるアプリができたりする場合もあるので注意が必要です。
LINEミニアプリの開発なら「アイリッジ」におまかせ！
自社独自のLINEミニアプリを開発したいものの、どのように作成すればいいかわからないという方には、パッケージ商品の活用がおすすめです。アイリッジの「Kit-Curu」は、手軽に店舗集客を実現できるLINEミニアプリのパッケージ商品になります。主にスタンプやクーポン、友だち招待、会員管理などの機能をノーコード開発で追加できます。
お得なクーポン機能を追加できるだけでなく、キャンペーンを利用したことでどれだけのユーザーが来店したかをデータとして可視化し、リストを抽出して次のキャンペーンに活かすことも可能です。また、ミニアプリ画面を独自のデザインに変更することもできます。
ミニアプリの開発が初めての方も、弊社の担当者が最適な設定をご提案させていただくことも可能ですので、まずはお気軽にご相談ください。
まとめ：LINEミニアプリの開発に必要な技術を把握しよう！
今回は、LINEミニアプリの開発に必要な技術・開発言語について解説しました。LINEミニアプリの開発にはさまざまな技術・開発言語が必要です。開発を内製化しようと考えている方は、特にどのような技術・開発言語が必要となってくるのか理解しておくことが大切です。
必要な技術・開発言語が多すぎて習得するのに時間がかかってしまい、なかなかLINEミニアプリの開発に取り組めないという場合もあるかもしれません。そのようなときはぜひアイリッジのLINEミニアプリ開発に役立つパッケージ商品を活用してみてください。
