Category Archives: Front-End

Introducing Flex Message, a new message type for LINE Messaging API

A new type of message has been added to the LINE Messaging API, Flex Message. We’ve been using a template-typed message in which you could place plain text, stickers, images, media types like videos, buttons and URLs. This type is quite useful for where the user had to select an option from available options, but there were restrictions such as the maximum number of buttons allowed, which is 4, for the button template, or the order in which you had to arrange the elements for a layout — title, content, and buttons.

What is Flex Message?

The Flex Message type frees you from the old restrictions and enables you to arrange layouts as desired. There is a display frame, but you can change the layout as you do with HTML code, and each component is neatly displayed. Here are a few of the layouts you can compose with Flex Message.

Adding an HTML Component on AMP

Hello, this is Kyo, a front-end engineer at LINE. I’d like to share my story on AMP Project, Google’s open source project. While you work on markup with AMP HTML, haven’t you ever felt an urge to make a component yourself, or to add a feature to it? I hope my post will give you a little push on your back if you are still hesitating.

V8 Hidden class

As a frontend engineer, I feel I still need to know more about the structure of JavaScript and web browsers, in order to provide quality UX to our users. Thankfully, we are given an access to peak through JavaScript’s thoughts, thanks to Google and Mozilla for making their engine code available to public, along with nicely prepared documentation. The availability of various means for tracing and profiling code surely helps too.

LIFF, our latest product for third party developers

What is LIFF?

LIFF is one of our latest products out for LINE Messaging API users. So, what is LIFF? LIFF stands for the LINE Front-end Framework, a web app platform that runs inside the LINE app. LIFF apps running on the LINE app can obtain LINE user ID or tokens needed to use the LIFF API. With the information obtained, LIFF apps can provide features using user information, such as sending messages on behalf of the user.

LINE Animation Sticker Checker on Web browser

Great to meet you all. This is ha1f from LINE Fukuoka, I develop iOS apps at LINE. Back when I was as a part timer at LINE, I was involved in making in-house tools for LINE. To share a little bit of my background, I was hired as a part timer with a confirmed offer to a full time position. Anyway, today, I’d like to show you a tool I developed during my time as a part timer, the Animation Sticker Checker.

What is APNG?

Before we get into the details of the tool, let’s discover what APNG is. APNG (Animated Portable Network Graphics) is a specification for animated image, consisting of images each numbered with a sequence number. LINE animation stickers use APNG. Unlike GIF, APNG supports full color, alpha channel and has a high compression rate. APNG is compatible with PNG, and is displayed as a still image for image viewers that do not support APNG. If you have the right tool, you can convert a sequence of PNG files into an APNG file.

apng

‘Let’s Contribute OSS!’ for LINE’s frontend engineers

Hi there you all, this is Kawasako from Frontend Standardization team in LINE. Our team is in charge of developing tools that are commonly required by the frontend development team, for developing products. Also we seek ways to boost information sharing and communication between developers. I’d like to take this opportunity to introduce our work and our recent workshop.

Floor map management system on web, with Leaflet

LINE Japan’s office relocated in April, 2017 to JR Shinjuku Miraina Tower to accommodate its growing number of staff. At the time of relocation, the IT support department introduced a number of new systems into the company. One of those is the LINE Floor Map system which I am going to share with you in this post.

Background story

Before we moved to Shinjuku, we used to manage our floor map with Microsoft Excel. Here is a part of the excel file. (We’ve erased names off from the screenshot.)

Easy code-splitting with grow-loader

Hi, I’m @sunderls from LINE MANGA team where I mostly write JavaScript. Did you know that you can read free Manga directly from LINE1)? Has anyone tried it? As we shared on our previous post, LINE MANGA: Smooth page transition with Page Stack, LINE MANGA is built with web technologies. Because it runs in within the LINE app, we have put in a great effort to create a smooth user experience, and as one of the means to accomplish our goal, we have chosen code-splitting. Today, I’d like to introduce the grow-loader, LINE’s open source project for code-splitting.

LINE MANGA: Smooth page transition with Page Stack

Hello, my name is @sunderls, and I am involved in LINE MANGA as a JavaScript developer.

Have you all noticed that you can now read manga on LINE?1) If this is a news to you, tap the more button (…) and then the LINE MANGA menu to take a ride through countless awesome manga available on LINE.

To let you in on a little secret, the screen you are seeing below is implemented with web-based technology. We think the smoothness of the screen transition is close to that of a native app. What do you think?

Why we use Kotlin in LINE Creators Studio

Before we begin

Hi everyone, I am Freddie Wang from LINE Fukuoka’s development team. I’m currently in charge of developing a new Android app called LINE Creators Studio. LINE Creators Studio is a sticker creation tool that lets anyone create his or her own stickers and sell them on LINE Store.

In this blog, I’d like to talk about Kotlin, the programming language which the LINE Creators Studio app is built on. I will explain why we chose Kotlin as our main language and introduce some of the Kotlin features we are using.

Note: LINE Creators Studio is currently available in Japan only. It will be released to other regions soon.

Advantages and key features of Kotlin

Why Kotlin?

At Google I/O 2017, Google announced that Kotlin is now officially supported in Android Studio 3.0. When we kicked off the development project for LINE Creators Studio at the end of 2016, we were tasked with the challenge of growing it into an MVP (Minimum Viable Product) project in a very short time. Although Kotlin 1.0 had been released quite some time ago, no one in our team had the experience of using Kotlin. We spent some time to conduct a survey on Kotlin before starting the development and eventually decided to use Kotlin because of the benefits it provides as described below.

100% interoperable with Java

The most appealing aspect of Kotlin is that you can mix Kotlin code and Java code in the same project and continue to use all existing Java libraries. Although we don’t have any legacy Java code in our project, we wanted to use some awesome libraries such as Dagger 2, Retrofit, and RxJava.

Concise syntax

Kotlin is designed for solving problems. One of its main goals is to write clean code more easily than Java. This is the first and foremost essential factor for us when developing Android applications.

Reduced dependencies

Kotlin has a compact runtime library which can replace some large Java libraries such as Guava. Using large libraries may not be a problem in server or desktop environments but it can be problematic in Android. Because the Android environment puts 65K methods limit on Android apps, we should avoid using large Java libraries. Kotlin’s stdlib library (version 1.1.3-2) has only 6306 methods, which means it has less impact than the Guava libraries in terms of the number of methods.

Compatible with old Android devices

Kotlin 1.0 is based on Java 6, which means it can support Android devices whose version is 2.3 or higher. This is another very important factor for Android developers.