グローバルでビジネスを支える「LINE公式アカウント」　そこに関われるのがフロントエンド開発の醍醐味

LINE公式アカウントのフロントエンド開発

金昌熙氏（以下、金）：それでは続きまして、私から「LINE公式アカウントのフロントエンド開発」について紹介します。

まず自己紹介すると、金昌熙（Kim Changhee）と申します。フロントエンド開発センターUIT1室 副室長と、開発チームのマネージャーもやっています。前職の大手ポータル会社を経て、2018年にLINEに入社しました。今はLINE公式アカウントをはじめ、さまざまなサービスの開発を担当しています。

みなさん、LINE公式アカウントをご存知でしょうか？　初めて聞く方はあまりいないかもしれませんが、簡単に紹介すると、LINE公式アカウントは日常に溶け込みながらユーザーと企業・店舗との接点を創り出すプラットフォームです。お店の中で、こういうポスターとかをご覧になった方がいるかもしれません。

LINE@という名称のほうが馴染みのある方が多いと思いますが、簡単に言うとこのLINE@は、LINE公式アカウントの前身のようなものにあたります。2020年4月に「LINE公式アカウント」というサービスに完全移行・統合していて、今は名称もLINE公式アカウントに統一しています。その際に管理ツールなどのリニューアルも一緒にやりました。

そんなLINE公式アカウントなのですが、数字で見ると国内外合わせてアカウントの数は1,000万以上ということで、非常に大規模のサービスになっています。主要利用されている4ヶ国を中心に、グローバルに展開しています。業種別に見ると、日本での事例になりますが、美容サロンやレストランなど、街中のお店を中心に、幅広い業種で利用されています。

LINE公式アカウントのユーザー

ではこれを使うユーザーはお店なのか？これはB to Bのサービスなのかという疑問があるかもしれませんが、見方によってはB to Bとも、B to Cとも言えるかなと思います。

まずオンラインにあるWebサービスもLINE公式アカウントのユーザーになりますし、街中に事務所をかかえる一般企業もユーザーになります。そして意外かもしれませんが、個人でも実はLINE公式アカウントを作れて、誰もがユーザーになり得るという感じです。

さらに一般ユーザーが触れるような画面もいくつかあります。例えば、LINE公式アカウントのリストやクーポン、またショップカードなど、さまざまな一般ユーザー向けの画面も私たちが作っています。

つまりこんな感じです。お店は我々が提供した管理ツールでクーポンなどを配信し、LINE公式アカウントを運用していただいて、そこから出てきた恩恵を一般ユーザーが最終的に受けるという、B to BがB to Cにつながるような構造になっています。

ではいったいフロントエンドでは、このLINE公式アカウントの何を開発するのか。大きく分けて3つあります。後ほど詳しく紹介させてください。

LINE公式アカウントの管理ツール

開発体制ですが、日本だけでなく海外の開発拠点とも協業しています。Web版の管理ツールやアプリ、そして一般ユーザー向けの画面を、複数のチームがコラボレーションして開発をしています。

使っている技術はご覧のとおりですが、どちらかが100パーセントということはなく、新旧が調和しているような感じなんですが、フレームワークはVue.jsのみを使っています。そして特徴として、デザイナーが入ることがあまり多くなくて、koromoというBootstrapベースのCSSのフレームワークを主に使ってUIを作っています。

ではいったい何を開発するのか、ここから具体的に見ていきたいと思います。1つ目はLINE公式アカウントの管理ツールです。これはアカウントオーナーが使うツールです。主にPC向けのWeb版と、モバイル向けのアプリがあります。

管理ツールは、いわゆるCMSと呼ばれるものです。非常にたくさんの機能が入っていて、機能ごとにレポジトリが分かれている構造です。一部アクティブじゃないものもありますが、現在レポジトリは57個で構成されている、大規模アプリケーションになっています。そして初リリース以来、週1でリリースを続けているので、現在171リリースというタグが付いています。今日もリリースしたので、実は現時点では173（※発表時）になっています。

ツールは、先ほどちょっと画面が見えたと思いますが、こんな見た目をしています。見た感じでも、機能がたくさんあることがわかります。

例えば、お店からお客様にメッセージを配信する時は、このような画面から送っています。クーポンを送ったり、絵文字やLINEスタンプを送ることもできます。

中には、このようにノベルティなどを発注する機能もやっていて、ちょっとしたショッピングサイトみたいな機能も入っていたりします。

とりあえず、全部の機能を書けるだけ書きますが、これ以外にもたくさんの機能がありまして、今も新規機能が日々追加されていくような感じです。

LINE公式アカウントのモバイル向けアプリ

続いてモバイル向けのアプリです。これはアプリといっても実際はネイティブの側を持ったWebviewアプリになっています。中の主な実装はすべてWebです。Webアプリでありながらも、やはりネイティブの力を借りることができるので、プッシュ通知やLINEの無料通話をこのアプリで着信できたりする機能も入っています。基本のコードベースはWeb版とほとんど一緒で、いろいろなところを共有して開発しています。

開発のイメージですが、機能がけっこうたくさんあるので、ちょっと説明が簡単にできないかもしれませんが、機能のそれぞれが個別のレポジトリになっていて、それぞれのレポジトリで機能開発をしていきます。共通のディペンデンシーも、けっこう持っているという感じです。

機能開発が完了すると、機能ごとに個別のnpmパッケージが生成されます。これで大規模開発においても、お互いコンフリクトなどを最低限にしつつ、それぞれバージョニングができるので、ロールバックが簡単にできたりする利点もあるため、そのように管理しています。最後にbaseレポジトリというところで、1回すべてのパッケージをインポートして、それを1つにビルドして、リリースしています。

ここまで大規模のアプリの機能開発を日々行っているので、やはりふだんいろいろな開発者とコミュニケーションを綿密に取るというのが非常に大事になってきます。

LINE公式アカウントの消費者向けメディア

次に開発するのが、消費者向けのメディアです。これに該当するものが、1つ目はLINE公式アカウントリストになります。これはいろいろな街中のLINE公式アカウントをおすすめされたり、あとは街中で配られているクーポンなどが見れる機能になっています。

そしてショップカード。これも実際に使ったことがある方もいるかもしれないんですが、スタンプカード機能です。これはお店に、このようなQRコードを置いてもらって、お客さまにスタンプを集めてもらって、あとは溜まったら商品と交換できたりするような使い方をされているかと思います。これについては、自分が開発した機能が紙のポスターとして、リアル店舗に置かれるのがけっこう楽しい体験かなと思います。

あとはクーポン。これはお店側からメッセージで送られることが多いと思いますが、店員が操作する部分も含めて、抽選機能など、おもしろい機能がたくさんあって、たくさんのユーザーに使ってもらっていると思います。

そして最後は業務効率化の内部ツールですね。ちょっと具体的なイメージはありませんが、例えば企画者やQAの方々が簡単にテストできるようなChrome拡張を、自分たちの開発主導で自由に開発したりしています。

フロントエンド開発で挑んだ課題

それでは、LINE公式アカウントのフロントエンド開発で挑んだ課題を、いくつか事例を紹介したいと思います。1つの例は難易度のある機能開発ですね。これは1つの例なのですが、Webサイト上で画像を編集できる機能を、ちょっとOSSの力を借りてはいますが自前でUIを実装したり。

あと、これは最近リリースされたステップ配信という機能ですが、このようなフローチャートをHTMLとCSSのみで実現したりしています。

そして、最近LINEアプリに入っているImage Pickerを私たちの管理アプリで使えないか調査して、それを移植する作業をやっていました。これは、ネイティブ側の力を借りてWebviewといろいろ通信しなきゃいけないので、そのやり取りをフロントエンド開発者ができるように、Promiseを使ったAPIを設計して、各海外の開発拠点にも提供しています。

では今挑んでいる課題を紹介します。先ほど紹介したように、LINE公式アカウントは大規模アプリケーションです。フロントエンド技術は変化が激しいので、書いた当時にはわりと新しめだったものが、すぐに古くなったりするんですね。なので、わりと現在も9割のコードがちょっと古いんじゃないかなと思う状況になっています。

新規の機能は、なるべく新しいVue 3やTypeScriptといった新しめの技術を使っているんですが、やはりいきなり既存のコードをリプレイスすることがけっこうハードルが高い状況です。そして、アプリがどんどん大きくなっていくので、単純に今はビルドにメチャクチャ時間がかかっているんですね。

あとは、機能が増えると叩くAPIもすごく増えて、やはりアプリケーション全体の性能が低下する問題が起きています。なので、それらを日々やっている機能開発を止めることなく、最適なかたちで、最適化を進めていくことを目標にして、「持続可能な大規模アプリケーション」という表現を使いましたが、これを目指していきます。

あとこれはビジネスプラットフォームなので、やはりビジネス側のニーズに応えていくのも大事で、なので機能開発をなるべく止めずに、難易度が高い課題にも次々と挑戦していきたいと思います。

LINEフロントエンド開発の楽しいところ

ではこの仕事の楽しいところを紹介したいと思います。この仕事の魅力は、LINE公式アカウントは日本だけじゃなくて海外、台湾やタイなどでもすごく盛り上がっていて、けっこう日常のなかで支持されているサービスなので、こういったグローバルサービスに関われることが1つの魅力かなと思います。

当然海外と開発を一緒にやっているので、そこはしょっちゅうコミュニケーションができるのも私は良いところだと思います。かと言って、英語力がすごく求められたりということもなく、基本日本語だけでも業務が進められるような環境になっていますので、そこはご安心ください。

そしてB to Bのサービスと言いつつも、最終的にはそれがB to Cでエンドユーザーに届くということで、やはり自分たちが街中のお店などで実際に使ったりして、そのユーザー目線を持ってB to Bのサービスが作れるのも、非常に特殊な体験で、魅力なんじゃないかなと思います。

あとは、LINEの他プロジェクトとあまり変わらないかもしれませんが、企画者との距離がすごく近いんですね。なので、基本的には企画段階から一緒にディスカッションに参加して、いろいろ突っ込んだりして、差し戻して練り直してみたいなものを、企画者側から一方的に決めて渡されるのではなく、みんなで一緒に議論しながら作っていけるのが魅力なんじゃないかなと思います。

来てほしいフロントエンドのエンジニア

最後に、こういう方に来てほしいという部分です。まず私たちは、Vue.jsで開発をしているので、VueとReactのどちらかといったら、Vueが好きな方はすごく大歓迎です。そしてコミュニケーションスキルがけっこう求められる場面が多いので、やはりそれを苦手としないような方が向いているんじゃないかなと思います。

そして難しい問題のほうがテンションが上がる方、あとはユーザー目線で物事を見るのはフロントエンドエンジニアのわりと宿命というか課題だと思いますが、それに加えてビジネスを支えるプラットフォームとして、ビジネス目線でもこの施策がどのようにビジネスに影響が与えるかなど、ちゃんとビジネス目線で物事が見れるような方が向いているんじゃないかと思います。

そして、とにかく身近なサービスで誰もが知っているようなサービスに直接関わりたい方は、ぜひ話を聞きに来てください。お待ちしています。発表は以上になります。ありがとうございました。