読者です 読者をやめる 読者になる 読者になる

Misoca開発合宿報告

Misoca開発チームのmzpです。

先日、伊東の山喜旅館で開発合宿を行ないました。 今日はそこでどういうことをやったかについて紹介したいと思います。

f:id:mzp:20151218113454p:plain

目標

合宿では複数のグループに分かれて、それぞれ違うテーマに取り組みました。

我々のグループは「Misocaの請求書で絵文字を使える」をテーマにしました。 より具体的に言うと「請求書で🍣を使える」を目標としました。

この成果は先日リリースされたので、請求書作成サービス「Misoca(ミソカ)」では絵文字が使えるようにになっています。

やったこと

出発前日

合宿期間を有効に使うために、出発の前日に作業分担をしました。 主に「PDFで絵文字を扱えるようにする作業」と「DBに絵文字を保存できるようにする作業」の2つに分割して、それぞれ個別に取り組むことにしました。

f:id:mzp:20151217115621p:plain

1日目

移動

オフィスに集合して、荷物を詰めこんで合宿先に向いました。 移動中は、作業の進め方などについて相談していたが、特に進捗はありません。

f:id:mzp:20151105085923j:plain f:id:mzp:20151217115900p:plain

昼食

沼津についたあたりでお昼になったので、沼津漁港で寿司を食べました。 このあと🍣を表示させる作業をすることを考えると象徴的な昼食だったと思います。

生しらすや桜エビは水揚げしてすぐに食べる必要があるので、沼津などの漁港が近くある場所でしか食べることができないようです。

f:id:mzp:20151105142333j:plain f:id:mzp:20151105141615j:plain

宿到着

宿に到着したあとは、会議室に移動してTODOを整理しました。 このあとは、各人で個別に調査・作業を進めていきました。

f:id:mzp:20151217120239p:plain

MySQLの設定変更(sunflat)

MySQLに絵文字を保存できるようにするために、設定を変更し utf8mb4 を扱えるようにしました。 また、既存のテーブルのデータの変換も行ないました。

特に問題なくできたので、Netflixでマッドマックス2などを見て過しました。

サロゲートペア調査(merotan)

MisocaではPDF生成にwkhtmltopdfを用いているので、これで絵文字を扱える方法を調べていきました。

ためしに絵文字をに通してみると、以下のようによく分からない文字に変換されてしまいます。

f:id:mzp:20151217120616p:plain

どうしようかなーと考えてると、ただのよく分からない文字ではなく何か書いてあることに気がつきました。 拡大してみると、なんと SURROGATES と書かれています。

f:id:mzp:20151217120712p:plain

そこで、サロゲートペアを正しく扱えるようにすれば絵文字が表示できるという仮説を立てて調査していくことにしました。

ためしに、合字を扱える設定し変更してみたところ、以下のようになりました。

f:id:mzp:20151217120805p:plain

Aを半分にした奴は消えましたが、絵文字も表示されませんでした。

初日はこのあたりで疲れたので寝ました。

PDF生成エンジンの調査(mzp)

「きっと生成エンジンがうまくフォントを見つけれないのが原因だろう」と考えたので自分でビルドして、いろいろ調べてみることにしました。

が、ビルドするためにはQtが必要なので、まずはQtのビルドを始めました。が、終わる気配がなかったので、温泉に入って早めに寝ました。

2日目

NotoSansのインストール(mzp)

早めに寝たので、早めに目覚めました。Qtのビルドは失敗していました。

そももそ絵文字に対応したフォントいれてないことを思いだしたのでGoogle Noto Fontsをインストールした上で、PDFを生成してみました。 絵文字が普通にでてびっくりしました。

f:id:mzp:20151217121746p:plain

最初から、これやればQtのビルドは必要なかったなー、とぼうぜんとしていました。

方針相談

全員が起きてきたあたりで、状況を共有しました。「とりあえず絵文字はでてるし、これでよくね?」「もうあとは温泉に入ってすごそうぜ」みたいな話をしてた気がします。

が、せっかくなので「カラー絵文字を表示する」に目標を再設定しました。

f:id:mzp:20151217122007j:plain

カラー絵文字調査

調査したところ、カラー絵文字のフォーマットはまだ1個に定まってるわけではなく、各環境で扱いが異なっていることが分かりました。

www.slideshare.net

ふたたび「無理じゃね?」「これでよくね?」「もうあとは温泉に入ってすごそうぜ」みたいな話をしました。

絵文字ライブラリの選定

ぐっとこらえて、カラー絵文字を対応する方法を探ることにしましました。 まずは、絵文字フォントを選ぶ必要があったので、 寿司の絵文字を比較して心を落ち着かせるを眺めながら、相談しました。

結論として、Rubyのライブラリがあるemojione を使うことにしました。

絵文字の組込み(mzp, merotan)

使う絵文字フォントが決まったので、Misocaに組込むための作業をガーっと書いていきました。

途中、宿の付近の観光に行ったり温泉に入ったりしましたが、それ以外は基本的にコードを書いていました。

f:id:mzp:20151217122539j:plain

バリデーションの修正(sunflat)

Webフォームで絵文字をはじくバリデーションをかけていたので、そのバリデーションを修正していきました。

近所に昔の温泉旅館が観光スポットになっていたので、そこの喫茶スペースでコードを書いていました。歴史ある建物の中で、川のせせらぎの音を聞きつつ、あんみつを食べながらコードを書くのは、なかなか良かったです。

f:id:mzp:20151217123119p:plain

3日目

Pull request作成

前日までの作業でだいたい形になったので、Pull requestを作成しました。 テンションがあがっていたので、ふんだんに絵文字を用いて説明を書きました。

f:id:mzp:20151217123217p:plain

成果発表

最後に会議室にあつまって成果を発表しました。「単位に🍣が使えるようになったんですよ!!」といった自慢をしていた気がします。

雑感

  • 27インチのモニタを2枚持ち込んだけど、特に使わなかった。
  • レッドブルを持ち込んだけど、レッドブルタワーを作るのを忘れてた。
  • 近所の商店街に「神様をダウンロード」という看板がでてて、すごくおもしろかった。
  • 近所の商店街で椿の絞りカスを買ったら「どの家庭にもある温泉のお湯に溶かして使ってくれ。ぬるま湯でもよい」と説明されて、文化の違いを感じた。

f:id:mzp:20151106120620j:plain