DUOLABS
ポートフォリオ

プロスポーツリーグ公式アプリ

プロスポーツリーグがファンに試合日程・結果・選手情報・ニュース・試合映像を見せ、チケット予約と会場入場用のモバイルチケットまでアプリで扱えるようにした公式アプリの1.0・2.0の開発に参加しました。ウェブで作った画面がアプリ内で開くハイブリッド構造のため、ウェブでは問題なかったリンク移動・メディア表示・読み込みが、アプリ内では違う動きをすることがあります。ウェブ担当とアプリ担当が分かれていて、問題がどちらの持ち分かを見分けるところからが仕事でした。作業はウェブ画面とアプリ機能をつなぐ構造、ウェブ画面の特殊処理、両者の間のデータ受け渡しと機能呼び出しの整理にわたります。

Launch
2021
Client
韓国のプロスポーツ連盟
Type
メディア・コミュニティ

01 / 04

試合日程からチケットまで、ファンが何度も開く情報の配置

プロスポーツリーグの公式アプリは、試合日程・試合結果・選手情報・ニュース・チケットのように、ファンが繰り返し確認する情報をモバイル画面に収めます。試合の映像・写真もあわせて見せ、チケットは予約から会場入場に使うモバイルチケットまでアプリの中で完結します。読むためのコンテンツ画面と、予約のように何かをするための機能画面が一つのアプリに混在しているため、探す流れが複雑にならないよう画面単位で問題を調整しました。1.0と2.0の二つのバージョンにわたって、これらの画面の開発に参加しました。

試合日程からチケットまで、ファンが何度も開く情報の配置
02 / 04

ウェブで作った画面がアプリ内でアプリのように開く構造

ハイブリッドアプリは、ウェブで作った画面をアプリが包んで見せ、ウェブでは難しいことはアプリの機能を呼び出して処理します。ウェブ画面への進入、アプリ機能の呼び出し、外部リンクの処理、アプリ内の画面遷移が一つの流れでつながるよう構造を整理しました。ウェブで扱いにくい機能はアプリ側で補い、ユーザーが今見ている画面がウェブかアプリかを気にしなくて済むようにしました。

ウェブで作った画面がアプリ内でアプリのように開く構造
03 / 04

リンク・メディア・読み込みのタイミングをアプリ内で合わせ直したウェブ画面の処理

ウェブでは問題のなかったリンク移動、ファイル・メディアの表示、画面の読み込みタイミングが、アプリ内では違う動きをすることがあります。こうしたケースをアプリが包む側で一つずつ補い、ウェブ画面がアプリ内でも正しく動くようにしました。ウェブとアプリの間でデータをやり取りし機能を呼び出す流れも併せて整理し、ウェブ画面の状態の変化がアプリの流れとずれないよう合わせました。

リンク・メディア・読み込みのタイミングをアプリ内で合わせ直したウェブ画面の処理
04 / 04

問題がウェブの持ち分かアプリの持ち分かを先に見分けた協業の基準

公式アプリは、企画・ウェブ・アプリの各担当が分かれた状態で一緒に作りました。画面で問題が起きると、ウェブの実装で生じたものか、アプリが包む側で処理すべきものかを先に見分けてから、要件と修正範囲をすり合わせました。リモートで働くなかで意思疎通が食い違うこともありましたが、その過程でウェブ画面の読み込み、ウェブとアプリのつながり、ウェブとアプリの責任の境界を深く理解するようになりました。この理解は、その後ウェブベースの高度な機能をアプリに組み込む作業の土台になりました。

問題がウェブの持ち分かアプリの持ち分かを先に見分けた協業の基準

この仕事のポイント

01

ウェブ画面とアプリ機能が一つのアプリの中でつながるハイブリッド構造

02

リンク移動・メディア表示・読み込みのタイミングをアプリ内で合わせ直したウェブ画面の処理

03

ウェブとアプリの間のデータ受け渡し・機能呼び出しの取り決めを整理

インサイト

ブログをすべて見る