경위

본래는 LINEBot&Clova Advent Calendar 2018을 위해서 쓸 생각이었습니다만, 기일을 지나 버려, 예정하고 있던 곳에는 다른 분이 대리로 기사를 투고해 주셨습니다
그러나, 드디어 시간이 걸렸기 때문에 검증 결과를 올려 두기로 했습니다.

LIFF란?

LINE의 토크 내에서 WEB 페이지를 표시하는 기능입니다.
2018년 6월부터 사용할 수 있게 되었습니다.

LIFF - 개요

WebAssembly란?

어셈블리 언어를 WEB 브라우저에서 실행하기 위한 기술입니다.
C/C++ 언어 등으로 기재된 소스를 컴파일하고 JavaScript로 호출할 수 있습니다.

WebAssembly 란 무엇입니까?

검증

WebAssembly는 IE등 일부의 WEB 브라우저에서는 이용할 수 없으면 이 일입니다만,
LIFF에서 제대로 어떻게 할까요?

준비

내 환경이 Windows 10이므로 Windows에서 환경을 정돈하기 위해 필요한 것을 설치해 갑니다.

Visual Studio Community 2015 with Update 3
Visual Studio Community 2017의 최신 버전에서는 컴파일할 수 없으므로 여기 에서 Visual Studio Community 2015 with Update 3을 설치해야 합니다.

CMake 3.13.2

Python 2.7.13

Emscripten 설치

WebAssembly 컴파일러로 주요 Emscripten을 사용합니다.

# チェックアウト
git clone https://github.com/juj/emsdk.git
cd emsdk

# インストール
emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit

# アクティベート
emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit

# 環境構築
emsdk_env.bat

샘플 코드 컴파일

hello.c

#include <stdio.h>

int main(int argc, char ** argv) {
  printf("Hello World\n");
}

# Emscriptenデコンパイル

emcc hello.c -s WASM=1 -o hello.html

LIFF로 설정

출력된 hello.html, hello.wasm, hello.js를 웹 서버에 올려 LIFF로 설정합니다.

실제로 설정한 것이 이쪽입니다.
line://app/1610391881-Gmop24gK


그리고 이쪽이 LINE에서 확인했을 때의 화면입니다.


제대로 Hello World로 표시되었습니다.
위는 Android 기기에서 얻은 스크린 샷이지만 iPhone에서도 표시되는 것을 확인하고 있습니다.

참고

C/C++에서 WebAssembly로 컴파일