LINE Engineering
Blog

  • AMP HTMLのComponentに自作機能追加する方法
    Shoyo Kyo 2018.06.20

    こんにちは! UIT室 フロントエンド開発1チームの姜 勝陽(kyo shoyo)です。
    今回はGoogleのオープンソースプロジェクト AMP Projectのお話です。AMP HTMLを使ったマークアップ作業の際に「自作のComponentを作りたい!」「自作の機能を入れたい!」と思った方は多いでしょう。 そのような方におすすめの記事となります。

    google AMP Component

    もっと見る

  • HTMLに近い感覚で自由なレイアウトが可能になった新しいメッセージタイプ「Flex Message」が追加!サンプルを交えてご紹介します
    Kazuki Nakajima 2018.06.12

     Flex Messageという新しいタイプのメッセージがMessaging APIに追加されました。これまでMessaging APIでは、シンプルなテキストの他にスタンプや画像といったメディアを表示することができるメッセージや、テンプレートという複数のボタンやURLを配置可能なメッセージタイプが利用可能でした。

    テンプレートはユーザーに複数の選択肢から回答を選んでもらうようなシチュエーションで特に有効でしたが、ボタンテンプレートでは配置できるボタンの数が4つまでだったり、タイトル、本文、ボタン、というようにレイアウトが画一的だったりという制約がありました。

    Flex Messageは極めて自由なレイアウトが可能なメッセージタイプで、その可能性はほぼ無限と言えます。一定の表示フレームがありつつも、HTMLに近い感覚でレイアウトをカスタマイズでき、各コンポーネントが美しく整頓されるような仕組みが提供されています。一例として、下図のようなメッセージを作成することが可能です。

    LINE BOT Messaging API

    もっと見る

  • Messaging APIの新機能LIFFの使い方を解説します。
    Sho Tachibana 2018.06.06

    LINEのMessaging API、LINE Login等のプラットフォーム全般の啓蒙活動を担当しています。

    こんにちは。LINEでLINE Messaging APIやLINEログイン等のプラットフォームの啓蒙活動を担当している立花です。

    本記事では、今回新たに実装されたLIFFの概要と、使い方を解説します。

    LIFFとは

    LIFFとは、LINE Front-end Frameworkの略で、LINEアプリ内で動作するウェブアプリのプラットフォームです。

    LIFFに登録したウェブアプリ(LIFFアプリ)をLINEアプリ内で起動すると、LINEのユーザーIDや、LIFF APIを利用するためのトークンをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにトークルームにメッセージを送信したりできます。

    LINE BOT Messaging API

    もっと見る

  • LINEのフロントエンド開発チームにおけるOSSへの貢献活動への取り組み「Let’s Contribute OSS!」
    kawasako 2018.05.11

    ウェブアナリティクスの開発を担当しています。

    こんにちは!Frontend Standardizationチームの川崎です。私の所属するStandardizationチームは、LINEのフロントエンド開発組織においてプロダクトに依らず横断的に必要となるツールの開発や、開発者の情報発信やコミュニケーションをより円滑にするための企画を行なっている部署です。今回は、私たちの業務の紹介も兼ねて、先日開催された社内ワークショップについてお話します。

    devweek workshop OSS frontend

    もっと見る

  • コード分割(Code Splitting)を簡単に実装できるgrow-loaderを作った話
    sunderls 2017.12.22

    はじめに

    こんにちは、LINEマンガJavaScript担当の@sunderlsです。

    これはLINE Advent Calendar 2017の22日目の記事です。今日は、webpackローダーのgrow-loaderを紹介します。

    LINE Engineering Blogの記事「LINEマンガ:Page Stackを使ってサクサクなページ遷移を実現できました」でご紹介しましたが、LINEマンガはWeb技術で実装されています。

    Webでネイティブアプリに近いユーザー体験を提供するため、いろいろ工夫しています。今回は、数ある工夫の中からコード分割の実装を紹介したいと思います。

    なぜコードを分割するのか

    LINEマンガでは、JavaScriptのソースコードをもともと1つのファイルにバンドルしていました。しかしサービスが成長するにつれて、ページ数が増え仕様も複雑になり、バンドル後のファイルサイズがどんどん大きくなってきました。将来を考えると1つにバンドルするのはやはり望ましくないと考え、コード分割の実装を始めました。

    grow-loader JavaScript AdventCalendar

    もっと見る