【裏話付】LaravelJPCon2019公式アプリをVue+Onsen UI+Monacaで作った話

明けましておめでとうございます、江口です。

2019/02/16(Sat)にLaravelJPCon2019というイベントが開催されました。
conference2019.laravel.jp

公式アプリ

LaravelJPCon

LaravelJPCon

  • Asial Corporation
  • ユーティリティ
  • 無料

play.google.com

※公式Twitterはコチラ

セッションはLaravelネタに限らず、アプリケーションdeploy設計の話や、RDBMSに焦点を当てた話など、幅広くも奥深く、実践的な話が繰り広げられました！
また、別室ではLaravel相談会やUnitTestハンズオンも開催されており、初心者の方でも1からLaravelについて触れられる素晴らしい企画もありました。

委員長ytakeさんもブログ書いておりますので、全体の雰囲気はこちらに目を通して頂ければ伝わるかと！

blog.ytake.jp.net

なので、私からは以下の観点でLaravelJPCon2019についてブログにまとめてみようと思いました。

  • [裏話]初めてのコアスタッフ
  • 公式アプリができるまで
  • 無事にイベントを終えて...

[裏話]初めてのコアスタッフ

初めてのコアスタッフと書いてますが、実はイベントのスタッフ自体未経験です。。。
元々業務でもプライベートでもLaravelを使うことが多いのもあり、イベント運営側のことも知ってみたいと思うようになりました。
そこでLaravel系 or PHP系のイベントがないかTwitterで探していたところ、こんなツブヤキを見つけたのです。

f:id:eguchi_asial:20190217231142p:plain
コアスタッフ応募

「若干名?!急がねば!!!」。ソッコーでDM送って「スタッフ」になりました。
そのすぐ後にこれです...!!!

f:id:eguchi_asial:20190217231325p:plain
締め切り

無事に「スタッフ」となり、専用のSlackに招待され、軽く挨拶をしつつも、過去の会話なり今のやり取りを見て、何か違和感を感じました。

....あ、もしかしてこれ、想像してた「スタッフ」と違うのでは...???
チャンネルも「core」って書いてある。。。

そうなんです。私、焦りすぎて気づかなかったんですね。
本当は1day-staff的な気持ちで応募したら、「コアスタッフ」だったんですね！！
今改めて応募のTwitter見返したら「コアスタッフを若干名募集!!」って書いてありますね。。。
やっちゃいました。

でもいい機会だし、今抜ける方が迷惑なので、もう無心でやりきっちゃろ！と考えるようになりました。
Slackで流れを見る限り、自分が参加する前から、カンファレンス当日までの段取りやissuesもある程度固まっているようでした。

ではどこの馬の骨ともわからない自分が、イベント運営の勝手もわかっていない自分ができることは何だろう？？
指示待ちでSlackを眺めているだけで焦る時間がしばらく続く中、こんなメッセージがありました。

担当できる人がいたら嬉しいなシリーズ

  • カンファレンスアプリ開発担当

これじゃね？？
マルチプラットフォームなアプリを超短納期で作れる自信はある！！APIもアプリもワシやれます！

またも勢いでSlackで挙手し、「Monacaでアプリ作ればAndroidもiOSも作れますー!!」と提案したら、意外にあっさりアプリ担当に任命されたという、ありがたいお話な訳です。

これで自分もやっと役に立てる！

まあ、今になって思えば、本当に誰ですか？って感じの私をよく信用してアプリ作られせてくれたなとは思うんですよね。。
最初は怪しまれように会社名を出して名乗っていたとは言え、個人レベルでは信頼も何もないのですから。

コアスタッフの皆様の心の広さに感謝です。

ここまでがコアスタッフになるまでの裏話です。

カンファレンス当日は設営班としてお手伝いさせて頂きました。
緊張で夜眠れず、AM3:00に就寝し、AM5:30に起床し、支度を済ませて会場に向かいました。

f:id:eguchi_asial:20190218113038j:plain
早すぎて入れない...

到着が早すぎて会場に入れないという、完全に素人のソレです。
ちなみに1番乗りでした。

勉強になることの連続でした。。。。

公式アプリができるまで

公式アプリを作るに当たって、まず以下のことを行いました。

  • 情報収集
    • コンセプトは何だ？イメージは何色か？グランドデザインはあるのか？
  • よくあるカンファレンスアプリとはどのような機能でどんなUIなのか？
  • スケジュールは逆算してどれくらい？
  • iPhoneアプリ審査通るのだろうか？

スケジュールは2018年12月上旬に要件定義デザイン、中旬に開発着手し、2018年内までにはAPPLEに申請まで完了させることです。
これを本業の合間に作業するので中々タイトなものです。

まずは要件定義・デザイン。

いくつかカンファレンスアプリを研究しましたが、結構機能もUIもバラバラ。
概ねタイムテーブルとカンファレンスの概要、外部リンクが見れるといった感じ。

LaravelJPConに限っては、「赤い富士山とロゴ」は事前に頂いていたのでこれだけは譲れない！！

UIUXデザイナー出口のこだわりは以下のメモ。

【全体】
カンファレンスを見に来てくれた人にとって重要な情報ほど、画面の上部に来るようにしたこと。
（これは、カンファレンスアプリであり、あくまでもカンファレンスを見に来てくれた人を優先する）
主催者、スポンサー、登壇者情報はカンファレンスの内容に直結しないので、配置位置を下げるなど。

【タイムテーブル】
開始時間が同じなのに、会場となっている部屋が異なっている場合があるようなので、
開始時間ごとに区切ってわかりやすくしたこと。

【タイムテーブル詳細】
せっかく登壇していただいた登壇者自身のことをアピールできる場になればと思い、
アイコンを大きく入れたデザインにしたこと。

上記を踏まえ、あとはデザイナーが「イイ」と思ったデザインUIでお任せしつつ、
「アプリらしさ」を取り入れること、「このアプリがなぜ必要か」をAPPLEに説明しやすい形にするのがアプリ最短リリースへの道だろうと結論付けました。

デザイナーから手書きのラフをもらい...

f:id:eguchi_asial:20190218001758j:plain
ラフ画1枚目
f:id:eguchi_asial:20190218001824j:plain
ラフ画2枚目

色をつけて簡単な画面項目定義書を形にし、

f:id:eguchi_asial:20190218114112p:plain
画面項目定義
f:id:eguchi_asial:20190218114143p:plain
アイコンの定義
f:id:eguchi_asial:20190218114208p:plain
アイコン案

実行委員に共有し、イメージを伝えます。
イメージが伝わったら後はもう、物(アプリ)をとっとと作って逐一見てもらうだけです。

>逐一見てもらう
Monacaには「プロジェクト共有」という便利な機能があり、MonacaデバッガーにMonacaアカウントでログインしていれば、手元の端末でLaravelJPConの開発中アプリがいつでも動かせる訳です！！
この機能、本当に便利なのでチーム内でもクライアント様を挟んだプロトタイプ開発にでも使えてオススメです。
仕様確定のスピードが一気に上がります。

>iPhoneアプリ審査通るのだろうか？
ここ、結構悩みました。
ただのタイムテーブル確認ならWebサイトがあるし、「アプリの必要性とは？？」に悩みます。
そのため、結果的に以下の機能を設けることでカテゴリー「SNS」として審査に出すことにしました。

  1. セッションへの「いいね」機能でフィードバック
  2. ハッシュタグTwitter連携でいつでも呟ける
  3. PUSH通知でセッション開始10分前にアラームしてくれる

想像以上に早く審査が降りてくれたので、本当にホッとしました。。。
2と3はコアスタッフの方からの意見で実現しました。さすがカンファレンスジャンキー(?)です。欲しい機能を完璧に把握してました！！

3のPUSHはlocalプッシュです。目覚まし時計みたいなものです。

こちらが当日実際にPUSH通知を受信した画面です。

f:id:eguchi_asial:20190218121551p:plain
PUSH通知受信した様子

※ちゃんとPUSHくるかドキドキだったので、当日はガッツポーズで喜んでましたw

最後に、公式アプリがどんな技術でできているのか？当日聞かれることが多かったです。嬉しいです。
今回のアプリは以下のような感じです。

  • アプリ・フロント
    • Monaca
      • プロジェクト共有やリリース時に利用
    • Cordova8.1.2
    • cordova-android 7.1.1
    • cordova-ios 4.5.4
    • vue 2.5.16
    • vue-onsenui 2.6.1
      • 全体的なデザインコンポーネントと主にページ遷移のstack管理に利用
    • vuex 3.0.1
      • stack管理やその他状態保持に利用
  • API
    • Lumen v5.7.6
  • サーバサイド
    • AWS
f:id:eguchi_asial:20190218120032p:plain
インフラ構成図

フロントのソースコードが見たいという方も何名かいらっしゃったのでGithubのリンク載せておきます。
https://github.com/yueguchi/LaravelJPCon

※スピード重視で作ってます。ご了承くださいw

無事にイベントを終えて...

最高でした。
もっとコアスタッフ、1dayスタッフの方々と挨拶、情報交換したかったですが、当日はそんな余裕はなくw
まあ、主役は来場してくださったお客様とスピーカー様なので、また別のカンファレンスで機会があれば積極的に参加していこうと思いました。

  • コアスタッフの皆様
  • 1dayスタッフの皆様
  • アプリのデザインにご協力頂いたデザイナーの出口さん、鴨田さん
  • 来場者の皆様
  • スピーカーの皆様

本当にお疲れ様でした。ありがとうございました！
PHPやLaravelの知名度が高いのは、上記のような方々が牽引してきてくれたからこそ、日本語の情報量も多いのだと感じました。
知らぬ間にいつもお世話になっていたのですね。

また、「自分もカンファレンスに関わってみたいけど、、、」と少しでも思っているけど躊躇している方へ。
飛び込んでみてから考えましょうwなんとかなります！
飛び込めばあとはやるしかないだけですし、やらないよりやった方が得るものが多いのは明白です！

カンファレンスのアプリで相談ありましたら弊社にどうぞw
次回また何か機会があれば次はPWAで作ってみたいなーっと思っております！！

以上です。お付き合い頂きありがとうございました。