LINE Engineering
Blog

  • コード分割(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つにバンドルするのはやはり望ましくないと考え、コード分割の実装を始めました。

    AdventCalendar grow-loader JavaScript

    もっと見る

  • V8のHidden Classの話
    Masami Yonehara 2017.12.19

    フロントエンドエンジニアです。2年前に東京からIターンして福岡に来ました。

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

    JavaScriptの気持ちを知りたい

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

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

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

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

    AdventCalendar JavaScript

    もっと見る

  • React Starter KitにみるWebフロントエンドに求められる機能と実装
    Soichi Takamura 2017.12.10

    初めまして、IT戦略3チームでUIUXデザインと社内プロジェクトのTech Leadを担当している高村といいます。この記事では、React Starter Kitという汎用的なWebプロジェクトテンプレートの実装を参考にしながら、改めて、なぜWebフロントエンドは複雑なのか、その解決方法は何かを振り返ってみたいと思います。この記事をきっかけとして、実際に現場でツール選定を行うフロントエンド開発者の方だけでなく、普段「フロントエンドには時間をかけたくない」と思っているサーバサイド開発者やWebディレクターの方たちに、「だからフロントエンドの課題は収束しにくいんだな」「フロントエンドといっても範囲は広いから、目的やユースケースを絞ってツールを選定しよう」と感じていただければ幸いです。

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

    AdventCalendar

    もっと見る

  • UIにMetalが使えないかいろいろ試してみた話
    Masaki Haga 2017.12.09

    こんにちは、LINEマンガiOSクライアント担当のMasaki Haga(@hagmas)と申します。この記事はLINE Advent Calendar 2017の9日目の記事です。

    2014年になって初めて発表されたMetalですが、2017年になってさらに効率化、洗練され、VRのサポートも組み込まれたMetal2が発表されたり、Appleのさまざまなフレームワークの基幹部分にMetalが導入されていたりと、Metalへの注目がさらに高まりつつあります。そんなMetalに、みなさんは「Metalを触ってみたいけど、どこから、何から始めたらいいのかわからない」または「Metalに興味はあるんだけど、自分のアプリケーションにはいまいち関係なさそうだ」などと感じたことはないでしょうか。

    私が担当しているLINEマンガのようなWebアプリケーションのiOSクライアントでは、ほとんどの場合、ゲームのような複雑な3D描写も大きなデータを並列計算で処理していくような場面もないかと思われます。しかし、「ユーザーにWOWと言わせるようなアプリ体験ってなんだろう」と考えている時、Metalのパワフルな並列計算と柔軟なAPIを使うことによって、UIKitでは実現できないような複雑で魅力的な描写をShaderで作りだして既存のUIにうまく溶け込ませることができれば、より新鮮なユーザー体験が実現できるかもしれないと思いたち、いろいろ試してみました。

    ShaderでできることですのでOpenGLを使ってももちろん実現できますが、サンプルのプロジェクトなども複数掲載しておきましたので、それらを通してMetalのコーディングのしやすさや楽しさなど知ってもらえれば幸いです。

    Metal GPGPU iOS macOS tvOS AdventCalendar

    もっと見る

  • ブラウザでアニメーションスタンプ画像を深く読み込む
    ha1f 2017.12.08

    LINE Fukuokaで、普段はiOSアプリを開発しています。

    こんにちは、LINE Fukuokaのha1fです。この記事はLINE Advent Calendar 2017の8日目の記事です。

    現在はiOSアプリの開発を担当していますが、入社前に内定者アルバイトとして社内ツールの作成を担当していました。その時の業務の1つ、アニメーションスタンプチェッカーの作成について書きます。

    APNGとは

    apng

    APNG(Animated Portable Network Graphics)はアニメーション用の連番画像の形式で、LINEのアニメーションスタンプでも利用しています。

    GIFと比べると、フルカラーを使えたり、アルファチャンネルを持てたり、圧縮率が高かったりという利点があります。

    APNGはPNGと互換性があり、APNG非対応の環境でも、通常の静止画として表示されます。ツールを使って、連番のPNG画像などから作成できます。

    AdventCalendar APNG

    もっと見る