【レポート】総数500タイトル以上のヒットアプリを生み出した企業在籍のエンジニアが語る！最新のアプリ開発事情！

2018年4月17日（火）19時30分より、「【【エンジニア向けビアバッシュLT！】総数500タイトル以上のヒットアプリを生み出した企業在籍のエンジニアが語る！最新のアプリ開発事情。技術をつまみに楽しい時間を過ごしませんか。」が開催されました。

「ボケて」「TVer」などダウンロード数1000万以上のプロダクトを数多く生み出している株式会社ブレイブソフト。今回は、そのブレイブソフトが初めて開催するイベントというともあり、多くの参加申し込みが集まりました。当日は、エンジニアを中心に120名以上の方が参加しました。

ビアバッシュ形式の本イベントは、ブレイブソフトの取締役である星達也さんのカンパイからリラックスした雰囲気でスタート！

当日の登壇者と内容は下記のとおりです。

「ビーコンを利用した位置連動サービスについて」
株式会社ブレイブソフト 藤本達男さん

「一週間でARゲームを作ってみた」
株式会社ブレイブソフト 水谷浩明さん

「LINE Clova WAVE & IFTTT」
株式会社ブレイブソフト　石﨑公久さん

「AIアプリ開発のはじめ方」
株式会社ブレイブソフト 洪小川さん

「UnitTestコードはいつ・誰が書くべきか？」
株式会社ブレイブソフト 猪飼綾さん

それでは内容を紹介します！

ビーコンを利用した位置連動サービスについて

まずは藤本さんの登壇です。

藤本達男（ふじもと・たつお）／株式会社ブレイブソフト イベントス事業部 チーフエンジニア。千葉県出身。高校卒業後、エンジニアとしてのキャリアをスタート。2007年にブレイブソフトへ入社、その後フリーランスを経て、再びブレイブソフトに参画。

イベント用アプリ「Eventos」を担当している藤本さんは、まず「Eventos」の中でどのようにビーコンを使っているのか、次の3つの機能を紹介します。

• 位置連動通知
  ビーコンの近くにきた際にプッシュで通知をする

• 屋内位置マッピング
  GPSが届かない広い会場内で、自分がどこにいるのか知らせる

• 行動分析
  どの時間に、どのくらいの数の人が、どの場所にいたのかヒートマップ的に把握する

続けて藤本さんはビーコンを使ったアプリを開発・提供した上で苦労した点を3つ共有します。

・電波が不安定

「ビーコンからの電波をアプリで受信する際、ビーコンが近くにあるはずなのに弱い電波しか受信しなかったりするんです。それにより、マッピングの位置がすぐに変わってしまったり、こちらの意図する距離でコミュニケーションができなかったりしたので、その調整にはかなり苦心しましたね。

また、同じ端末であるiPhone6同士でも、受信感するタイミングにかなり差がでることもありました」（藤本さん）

・機能間で競合する

「例えば『マッピング』と『メッセージ』などの複数の機能を同時に利用したい場合などに、ビーコンを検知してから動かす部分の実装に、別の機能のビーコンの情報が混ざってしまうことなどがありました。その結果、あるはずのデータがなかったりしてクラッシュすることもありました。

また、期待通りに機能しない場合、電波が目に見えないために何が原因なのか特定しづらいことも多くありましたね。ビーコンからの電波を受信するのは簡単なのですが、きちんと使うのは難しいと感じます」（藤本さん）

・物理的な大変さ

「システムとは全く関係がないのですが、広いイベント会場内に数百個単位でビーコンを設置するのはとても大変でした。設置する行為そのものだけでなく、動作確認にも苦労しましたね。

何度か経験を積むと大変なことがわかっているので、多くの人を準備できます。しかし、当初は3人くらいで会場へ行き、朝までかかってしまっていました」（藤本さん）

最後に藤本さんは「ビーコンの電波強度の設定によって検知距離の調整をするのではなく、アルミホイルで包むといい感じになる」などのtipsを話してLTを終了しました。

一週間でARゲームを作ってみた

2人目は水谷さんの登壇です。

水谷浩明（みずたに・ひろあき）／株式会社ブレイブソフト ドリーム事業部 チーフエンジニア。愛知県出身。ユーザー系SIerなどでの勤務を経て、2015年にブレイブソフトへ入社。

水谷さんはiOSアプリ「ARケチャマヨバトル」を開発した背景を説明します。

「『ARケチャマヨバトル』は、社内の『チャレンジ目標制度』から誕生したアプリです。これは、毎期の始めに社内で自由にチームを結成し、企画立案できる仕組みです。企画が社長プレゼンを通過すれば、実際に企画したアプリを業務として開発することができます。

私たち4人のチームはARゲームアプリを提案し、この企画が採用されました。そして、昨年11月末に千葉県の御宿で一週間合宿を行ったんです」（水谷さん）

続けて水谷さんは「ARケチャマヨバトル」の概要を紹介します。

・「ARケチャマヨバトル」の概要

ARで認識した平面をケチャップとマヨネーズで塗り合う陣取りバトルゲーム。AR技術により、現実世界にケチャップとマヨネーズを塗りたくることができる。

・ゲーム内の処理

1. BluetoothやWi-Fiで対戦相手を検索
2. 対戦相手が見つかったらARで平面を認識
3. お互いが認識した拡張空間上でケチャップとマヨを塗り合う対戦の開始
4. 勝敗判定

水谷さんは開発について自身が苦労した点について次に2点を挙げます。

・ケチャップやマヨネーズを“塗ってる感”

「まず前提として、ケチャップやマヨネーズを塗る平面は、『ARKit』から認識した座標情報を利用して薄い直方体を作っています。その平面に向かって、球体のオブジェクトとして作成したケチャマヨを発射するんですね。そして、球体と平面がぶつかった場所にケチャマヨの画像を表示しています。オブジェクト同士の当たり判定はデリゲートとして用意しています。

開発当初は、平面をタイル状に分割し、球体が当たったタイルにケチャマヨの画像を貼り付けていました。しかし、タイルが強調されすぎてしまい、これではリアルさが足りませんでした。

次に、平面をひとつの『View』と捉えて、当たった座標にケチャマヨを描画する方法を試しました。しかしながら、弾が当たる度にケチャマヨを描画する『ImageView』の合成処理が走るため、とても重くなってしまったんです。

最終的には、最初の案のように平面を分割し、その分割した基準のよりも大きなタイルをのせることでケチャマヨの画像同士が重なるように調整しました」（水谷さん）

・前方に発射

「『ARKit』では、初期化時に拡張空間上にxyz軸を構成します。ケチャマヨを発射したいのは画面奥のz軸方向なのですが、カメラの向きによっては意図しない方向に動いてしまうこともありました。調べてもあまり参考になる情報がなかったので、意外とむずかしかったですね。

このコードスニペットは私たちのブログにまとめています」（水谷さん）

最後に水谷さんは「3Dの知識がない私でも、『ARKit』を使うことでそれなりのものが作れたと思います。試行錯誤するフローが非常に大切です」とLTをまとめました。

LINE Clova WAVE & IFTTT

3人目は石﨑さんの登壇です。

石﨑公久（いしざき・きみひさ）／株式会社ブレイブソフト イベントス事業部 エンジニア。神奈川県出身。プログラマー、ウェブディレクターなどの経験を経て、2017年にブレイブソフトへ入社。

石﨑さんは、LINEが提供しているAIスピーカー「Clova WAVE」をCIに活用した取り組みを紹介。まず、石﨑さんは下記の手順を試します。

• 「GitLab」の「Integrations」から「WebHooks」を設定して、IFTTTに投げる
• 「IFTTT」から「Clova WAVE」に通知する

「具体的には、まず『IFTTT』に登録して、『Webhooks』の機能からURLを取得します。そして、『GitLab』の『Integrations』にそのURLを入力し、通知したいタイミングを選択します。

その後、再び『IFTTT』に戻って、『this』の部分を設定します。『New Applet』を作り、『Webhooks』を『this』とし、パラメーターを設定するわけです。

そして、『that』として『Clova WAVE』に通知する仕組みを選択します」（石﨑さん）

しかし、石﨑さんはこのデフォルトの方法では「『Clova WAVEに送るメッセージのうち、動的に指定できる部分が5種類しかない」と指摘します。そこで、この問題を解決するために『Office Flow』を導入します。

「動的に設定できるのが5種類では、幅が狭すぎますよね。そこで、『Office Flow』を間に挟むことにしたんです。

具体的には、『GitLab』の『Integrations』から『Webhoks』を設定して、一旦『Office Flow』で受け取ります。そして、『Office Flow』でメッセージを作成し、そのメッセージを『IFTTT』で受け取り、『Clova　WAVE』へ通知するという流れです。

ただ、『Office Flow』には『使いにくい』という難点もありました。『Webhooks』を契機にするためにどのように設定するのかが大変でしたね。

しかし、その設定さえできれば、受け取る『JSON Schema』を自由に設定できる幅広い機能性が『Office Flow』にはあります。『GitLab』が投げる『JSON』の実データを『Office Flow』で受け取るわけですが、『Office Flow』のウィンドウに貼り付けると、中身を勝手に解釈して『JSON Scheme』まで自動で作ってくれる機能もあるんです。

『Office Flow』から『IFTTT』に送るメッセージでは、変数に式を使ったり、条件分岐も利用できますので、かなり幅広い使い方ができるようになりました」（石﨑さん）

最後に石﨑さんは「『石﨑がマージリクエストにコメントを追加しました』など、具体的な通知が届くことで、チーム内で『見られている意識』が高まったように感じます。その結果、DevOpsが加速しました」とこの取り組みがもたらした効果を説明してLTを終了しました。