Category Archives: Front-End

Kotlin Fest 2018 協賛&主催レポート

はじめまして。Developer Relations Team の藤原(@satorufujiwara)です。

8/25(土) に東京コンファレンスセンター品川にて開催されたKotlin Fest 2018に、LINEは「ことりスポンサー」として協賛しました。 また、「日本Kotlinユーザグループ」に所属する個人として、本イベントを主催しました。
スポンサーと主催、両方の視点からイベントの様子をレポートいたします。

グローバル社内イベント―PaaS Day 2018―フォトレポート

世界12カ国に約6,000人の仲間が働くLINE。

その「エンジニア」と聞いて、思い浮かべるのはどんなイメージでしょうか?一口にLINEのエンジニアといっても、そこには多様な「エンジニア」がいます。

この記事は、LINEが展開する全サービスの開発者と、ひいてはLINEという企業そのものを基盤から下支えしているエンジニア達が登場したイベント―PaaS Day―の開催報告です。

BFFに取り組む開発者たちが語る「UIT#3 The “Backends for Frontends” sharing」

こんにちは! UIT室 フロントエンド開発1チームの姜 勝陽(kyo shoyo)です。

2018年6月7日にLINE株式会社で開催されたフロントエンドエンジニアのイベント「UIT#3 The “Backends for Frontends” sharing」にスタッフとして参加してきました。
今回は、UITのMeetupイベントの紹介と参加レポートを皆様にお届けします。

AMP HTMLのComponentに自作機能追加する方法

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

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

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

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

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

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

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

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

LIFFとは

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

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

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

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

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

はじめに

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

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

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

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

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

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

V8のHidden Classの話

この記事はLINE Advent Calendar 2017の19日目の記事です。

JavaScriptの気持ちを知りたい

こんにちは、LINE FukuokaのフロントエンドエンジニアのYoneharaです。

そろそろクリスマスですね。フロントエンドエンジニアのみなさん、苦しんでいますか?私は苦しんでいます。2017年も暮れようというのに、いまだにブラウザやJavaScriptの気持ちが分からず、ユーザーに思うような快適なUXが提供できないことがあるからです。

JavaScriptの気持ち。ただ幸いなことに、我々はかなりの程度、それを分析的に知ることができます。GoogleやMozillaが自身のJavaScriptエンジンのコードを公開し、随所でそのアーキテクチャを解説してくれており、また豊富なトレーシング・プロファイリングの手段が用意されているからです。

今回の記事では、みなさんおなじみのChromeに採用されているV8というJavaScriptエンジンの、Hidden Classという最適化のための1つの仕組みをのぞいてみたいと思います。