Making of WordCamp Official App.pdf

by つぼち

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

自己紹介（進藤龍之介さん） Androidアプリ開発のコミュニティ、日本Androidの会で理事を務めつつ、その中でWebのトピックスを扱うWeb Working Groupを主催。

Slide 3

Slide 3 text

自己紹介（壺井仁美さん） EC系のデザインを得意とし、いろんな会社でウェブデザイナー・ウェブディレクター・UIデザイナーとして働き、現在は、メディア関係の会社で、グラフィックデザイン〜WEBデザインまで幅広く活動しています。去年、ロックわぷー作りました。

Slide 4

Slide 4 text

Introduction

Slide 5

Slide 5 text

Agenda 今回作ったアプリの概要アプリ化するということアプリとWordPress、周辺システムの構成と連携開発環境の選定 WordPressのデータの扱いデザイン

Slide 6

Slide 6 text

さっそく今回のアプリの説明

Slide 7

Slide 7 text

WordCamp公式アプリ WordPress （REST）ベースでのアプリ開発・React Nativeアプリの開発を支援してくれるサービスの EXPOの規約に乗り、FigmaでのアプリUIデザインを行いました。

Slide 8

Slide 8 text

アプリとWeb

Slide 9

Slide 9 text

Web ブラウザがあれば見られる更新が容易 URLでのリンク、シェア PWAの普及によりかなりアプリに近い機能も実装可能に

Slide 10

Slide 10 text

アプリ自由度ハードウェアとの親和性パフォーマンスアイコンプッシュ通知オフライン

Slide 11

Slide 11 text

Webはここまで進んでるけどスマートフォン使用時間に占める Web の使用時間は 15%（アプリ85%）

Slide 12

Slide 12 text

アプリに実装したいものセッションリスト、お気に入りチェック入場チケットの発行各種情報へのリンク

Slide 13

Slide 13 text

REJECT!!

Slide 14

Slide 14 text

開発基盤の選定

Slide 15

Slide 15 text

WordCampなので Web技術に詳しい人が多い　→メンテナンスの容易さを考慮すると、開発言語はjsがいい　→Webライクなデザイン実装が可能マルチプラットフォーム　→Android/iOSどちらも同じコードで開発管理したい　→ハード依存のコンテンツが無い

Slide 16

Slide 16 text

マルチプラットフォーム開発環境単一開発言語で複数のプラットフォーム（iOS, Androidなど）に対応するアプリが開発できる。javascript系が優勢。 React Native, Flutterなどいろいろな開発ツールがある。実装機能の自由度開発の手軽さ Web PWA マルチプラットフォームネイティブ

Slide 17

Slide 17 text

EXPO Facebookが開発したReact-nativeベースのネイティブアプリ開発環境　https://expo.io/ javascript 多くのReactライブラリが利用可能　→使えないものもあるので要注意サーバーでビルドしてくれるので、開発環境構築が容易　→MacがなくてもiOSアプリが作れる

Slide 18

Slide 18 text

EXPOの制約そのまま使えば各プラットフォームのレギュレーションに準拠している　→提供されているテンプレートをあまりいじらないプラットフォームごとのネイティブライブラリを持てない React-native用のライブラリでも使えないものもあるアプリのサイズが大きくなってしまう（特にiOS）

Slide 19

Slide 19 text

DEMO

Slide 20

Slide 20 text

バックエンドとしてのWordPress

Slide 21

Slide 21 text

REST API WordPressの記事などを「データ」として扱う jsonで取り出したデータを加工 /wp-json/wp/v2/〜例）WordCamp Tokyoのセッションデータ https://2019.tokyo.wordcamp.org/wp-json/wp/v2/sessions/

Slide 22

Slide 22 text

加工して「データ」化 REST APIの記事データはHTMLそのまま　→タグ除去、エスケープ文字の復元不要なデータの削除ソート複数に分かれた情報の結合　→セッション、講演者、会場など

Slide 23

Slide 23 text

チケット認証の紐付け WordCampのチケット：camptix https://github.com/automattic/camptix WordCampサイトの制約で直接の連携は困難 CSVエクスポート可能　→CSVでFirebaseにデータ移設ログインしてメールアカウント認証

Slide 24

Slide 24 text

構成 App Web チケットデータ連携認証 REST API

Slide 25

Slide 25 text

作ったものアプリ Firebase 　ログイン　Cloud Firestore（データ）　Functions（アカウント連携）認証用Web チケットインポート用スクリプト

Slide 26

Slide 26 text

アプリのUIデザイン

Slide 27

Slide 27 text

FigmaでのアプリUIデザイン WordPress のデザインチームが使っているのが、Figmaなので、そちらを使用いたしました。アニメーションを行う部分では、XDも使用し、アイコンについては、フォントオーサムを使用し、エンジニアに伝わりやすいように、コーディングしやすいようにできるように心がけました。  また、全体的に、EXPOの規約にのっとっていてあまりテンプレートをカスタマイズできないので、サイトのトンマナに合わせることを重点的に心がけ、ユーザーにもわかりやすいように心がけました。特に気を付けたのは、色を気を付けました。サイトのまま使うと、原色が強くなってしまい、見えにくくなったりするので。。 