Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Making of WordCamp Official App.pdf
Search
つぼち
November 02, 2019
Technology
0
520
Making of WordCamp Official App.pdf
2019.11.02で開催されたWordCampTokyo2019の資料です。
つぼち
November 02, 2019
Tweet
Share
More Decks by つぼち
See All by つぼち
WordPressでポートフォリオサイトを作った話
tsubochi
0
440
Other Decks in Technology
See All in Technology
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
君も受託系GISエンジニアにならないか
sudataka
2
370
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
RSNA2024振り返り
nanachi
0
500
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
BBQ
matthewcrist
86
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Being A Developer After 40
akosma
89
590k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Documentation Writing (for coders)
carmenintech
67
4.6k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Adopting Sorbet at Scale
ufuk
74
9.2k
Transcript
None
自己紹介(進藤 龍之介さん) Androidアプリ開発のコミュニティ、日本Androidの会で理事を務め つつ、その中でWebのトピックスを扱うWeb Working Groupを主催。
自己紹介(壺井仁美さん) EC系のデザインを得意とし、いろんな会社でウェブデザイナー・ ウェブディレクター・UIデザイナーとして働き、現在は、メディア関 係の会社で、グラフィックデザイン〜WEBデザインまで幅広く活動 しています。去年、ロックわぷー作りました。
Introduction
Agenda 今回作ったアプリの概要 アプリ化するということ アプリとWordPress、周辺システムの構成と連携 開発環境の選定 WordPressのデータの扱い デザイン
さっそく今回のアプリの説明
WordCamp公式アプリ WordPress (REST)ベースでのアプリ開発・React Nativeアプリの開発を支援してくれるサービスの EXPOの規約に乗り、FigmaでのアプリUIデザイン を行いました。
アプリとWeb
Web ブラウザがあれば見られる 更新が容易 URLでのリンク、シェア PWAの普及によりかなりアプリに近い機能も実装可能に
アプリ 自由度 ハードウェアとの親和性 パフォーマンス アイコン プッシュ通知 オフライン
Webはここまで進んでるけど スマートフォン使用時間に占める Web の使用時間は 15%(アプリ85%)
アプリに実装したいもの セッションリスト、お気に入りチェック 入場チケットの発行 各種情報へのリンク
REJECT!!
開発基盤の選定
WordCampなので Web技術に詳しい人が多い →メンテナンスの容易さを考慮すると、開発言語はjsがいい →Webライクなデザイン実装が可能 マルチプラットフォーム →Android/iOSどちらも同じコードで開発管理したい →ハード依存のコンテンツが無い
マルチプラットフォーム開発環境 単一開発言語で複数のプラットフォーム(iOS, Androidなど)に対応するアプ リが開発できる。javascript系が優勢。 React Native, Flutterなどいろいろな開発ツールがある。 実装機能の自由度 開発の手軽さ Web
PWA マルチプラットフォー ム ネイティブ
EXPO Facebookが開発したReact-nativeベースのネイティブアプリ開発環境 https://expo.io/ javascript 多くのReactライブラリが利用可能 →使えないものもあるので要注意 サーバーでビルドしてくれるので、開発環境構築が容易 →MacがなくてもiOSアプリが作れる
EXPOの制約 そのまま使えば各プラットフォームのレギュレーションに準拠している →提供されているテンプレートをあまりいじらない プラットフォームごとのネイティブライブラリを持てない React-native用のライブラリでも使えないものもある アプリのサイズが大きくなってしまう(特にiOS)
DEMO
バックエンドとしてのWordPress
REST API WordPressの記事などを「データ」として扱う jsonで取り出したデータを加工 /wp-json/wp/v2/〜 例)WordCamp Tokyoのセッションデータ https://2019.tokyo.wordcamp.org/wp-json/wp/v2/sessions/
加工して「データ」化 REST APIの記事データはHTMLそのまま →タグ除去、エスケープ文字の復元 不要なデータの削除 ソート 複数に分かれた情報の結合 →セッション、講演者、会場など
チケット認証の紐付け WordCampのチケット:camptix https://github.com/automattic/camptix WordCampサイトの制約で直接の連携は困難 CSVエクスポート可能 →CSVでFirebaseにデータ移設 ログインしてメールアカウント認証
構成 App Web チケットデータ連携 認証 REST API
作ったもの アプリ Firebase ログイン Cloud Firestore(データ) Functions(アカウント連携) 認証用Web チケットインポート用スクリプト
アプリのUIデザイン
FigmaでのアプリUIデザイン WordPress のデザインチームが使っているのが、Figmaなので、そちらを使用いたしまし た。アニメーションを行う部分では、XDも使用し、アイコンについては、フォントオーサムを 使用し、エンジニアに伝わりやすいように、コーディングしやすいようにできるように心がけ ました。 また、全体的に、EXPOの規約にのっとっていてあまりテンプレートをカスタマイズできない ので、サイトのトンマナに合わせることを重点的に心がけ、ユーザーにもわかりやすいよう に心がけました。特に気を付けたのは、色を気を付けました。サイトのまま使うと、原色が 強くなってしまい、見えにくくなったりするので。。
アイコン アプリスプラッシュ アプリトップ
DEMO - 実物を見てみましょう
質問タイム