2016.07.29

[レポート／LINE DM #15] 「LINE 占い」のiOS開発環境や体制、「クリエイターズ着せかえ」を支える技術やJavaScriptの使い方についてお話ししました

今年5月のJRJP博多ビル移転後、初めての「LINE Developer Meetup in Fukuoka」を開催！15回目となる今回は過去最大級の動員となりました。

その様子をLINE Fukuokaでエンジニアを務める新田がお届けします。

▼LINE Developer Meetup in Fukuoka #15　のセッション一覧

今回のセッションでは、当社エンジニア3名が実際に担当プロダクト開発で使っている技術や社内ツールなどを中心にお話しました。

1．LINE 占い iOSアプリ開発の現状

スピーカー：竹下（taketin）

2．クリエイターズ着せかえを支える技術

スピーカー：上野

3．JavaScript All The Things!

スピーカー：Jo ël Billaud

1．LINE 占い iOSアプリ開発の現状

竹下（taketin）が登壇して、LINE 占いのアプリ開発の現状について紹介しました。

LINEファミリーアプリの中でも歴史の長いLINE 占いのiOS版アプリについての開発環境や、LINE 占いの開発体制の全体像がみえる内容でした。

長期運用してきたiOSアプリではレガシーなObjective-CをどうやってモダンなSwiftに書き換えていくかという共通の悩みがあると思います。

今回の発表では、Swift化のための実践的なテクニックやツールチェインの話はもちろん、書き換えるコストを割けない部分についてObjective-CのNullability,Lightweight Genericsなどの言語機能を使って日々どうやってレガシーコードと闘いながら機能追加をしているかという点が興味深かったです。

またiOS開発をサポートするLINE内製のビルドツールや配布ツールの紹介もあり、普段iOSに関わっていない私にとっても発見がありました。

※スライドはこちら

2．クリエイターズ着せかえを支える技術

続いて上野が登壇して、LINE Creators Marketで最近リリースしたばかりの「クリエイターズ着せかえ」のサービス開発時のトラブルシューティングに関する紹介をしました。

LINE Creators MarketはPerl + MySQL構成の一般的なWebアプリケーションですが、サービスの特性上、認証・決済・スタンプ販売など様々な機能の実現のためにLINEの他サービスとの連携が欠かせません。

LINE Creators Market では、そういったいわゆるmicroservice構成で好まれるThriftを用いています。今回の開発ではIDLの定義型や特定の仮引数名で動かないなど、枯れている印象のThriftでも珍しいハマリどころがあったようです。その問題に対してgithub上のライブラリに対してPull Requestを送って修正しており、OSSとしてまっとうなアプローチで解決していました。

また、スタンプといえば画像処理が重要です。PNGで期待した色に変換されないという不具合がありましたが、こちらもガンマ値補正を施すことで問題解決を行っていました。

LINE Creators Marketはリリース後ずっと活発に新機能を追加しているサービスですが、こういったニッチな不具合対応を正しいアプローチで修正することが開発スピードの維持につながっているなと考えさせられました。

※スライドはこちら

3．JavaScript All The Things!

最後はJo ël が登壇して、同じく LINE Creators MarketにおけるJavaScriptの使い方について紹介しました。

「クリエイターズ着せかえ」のプレビュー機能にフォーカスした内容となっていて、タイトル通りにあらゆるところでJavaScriptを活用していました。

クリエイターズ着せかえでは、着せかえのプレビュー専用のデザインを複数用意しています。当初は新しいデザインが出来るたびにデザイナーからもらったPSDファイルを元にHTMLにマークアップし、JavaScriptを書くという手作業を検討していました。トータルの工数は6週間かかる想定でした。

この温かみのある作業をPSDファイルのプロパティ名に幾つかのルールを作り、PSDファイルをパースできるnodeのpsdライブラリを利用したスクリプトを書くことで、デザイン作業のみの2週間に短縮したそうです。3倍ものコスト削減効果ももちろんですが、私はPSDをパースするライブラリがnpmにあることにまず驚きました。

続いて、プレビュー機能のレンダリング部分ではHTML Canvasを用いていて、画像ローディングを並列化するためにPromiseを使っていました。LINE Creators MarketのフロントエンドはES2015で書かれており、スライドのコード例も全編Promiseとアロー関数の組み合わせによる関数型のエレガントなコードだったのが印象的でした。

※スライドはこちら

懇親会は引き続きカフェでおこないました。今回はセッション数が多く多様な内容であったため特定の分野に限らず様々な分野のエンジニアさんにご参加いただけました。既に自分たちでサービスを提供されている方も多くリラックスした雰囲気の中で活発な意見交換が行われていました。