経緯
本来はLINEBot&Clova Advent Calendar 2018のために書くつもりだったのですが、期日を過ぎてしまい、予定していたところには他の方が代理で記事を投稿してくださっていました
しかし、やっと時間が取れたので検証結果を載せておくことにしました。
LIFFとは
LINEのトーク内でWEBページを表示するための機能です。
2018年6月から使えるようになりました。
WebAssemblyとは
アセンブリ言語をWEBブラウザで実行するための技術です。
C/C++言語等で記載されたソースをコンパイルし、JavaScriptで呼び出すことができます。
検証
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をWEBサーバーにアップして、LIFFに設定します。
実際に設定したものがこちらです。
line://app/1610391881-Gmop24gK
そしてこちらがLINEで確認したときの画面です。
ちゃんとHello Worldと表示されました。
上記はAndroid端末で取得したスクリーンショットですが、iPhoneでも表示されることを確認しています。