高度ICT演習・函館スイーツプロジェクトのWeb班の話

はじめに

この記事は FUN part2 Advent Calendar 2019 3日目の記事です。

3日目だけ空いていたので書くことにしました。

今日のメイン記事はkmdkukの テック系Podcastのススメ です。

さて、本記事の内容を要約すると、Webアプリ開発に興味がある人は函館スイーツプロジェクトで一緒にやりましょう!というお話です。

僕は現在M1で、函館スイーツのWeb班で活動しています。

高度ICT演習とは

公立はこだて未来大学で月曜の4・5限に活動している開発演習です。

学部1年生から修士2年生までの希望者が集ってチームで色々なプロダクトを開発しています。

2019年のプロジェクトは以下5つのプロジェクトがあります。

  • 函館スイーツ
  • はこだてマップ+
  • Fintech
  • お魚日和
  • クラウド

函館スイーツプロジェクト

みなさん「函館スイーツ」って聞いたことありますか?

実は函館市にはおいしいお菓子屋さんがたくさんあるのですが、観光客や函館市民にあまり認知されていません。

函館スイーツプロジェクトでは、「函館スイーツ」をITの力で広めて、函館市を活性化させる取り組みを函館市と函館スイーツ協議会と連携して行っています。

函館スイーツでやっていること

函館スイーツでは、「あまはこ」というモバイル向けアプリを開発しています。

トップ画面ではスイーツを一覧で見ることができたり、売っているお店を確認できたりします。画像は開発中のWeb版の画面です。PWAという技術を使って、ネイティブアプリライクに「インストール」して使うこともできます。

Image from Gyazo

プロジェクト全体では、iOS, Android, Web (PWA) の3プラットフォームで開発しています。

なぜWebで作るのか

1. 早くリリースして、多くの人に使ってもらいたい

iOS版あまはこは2018年12月にApp Storeへリリース申請を出したのですが、マーケティング要素が強いかつユーザインタラクティブな機能がないという理由でリジェクトされてしまいました。Apple、許せませんね。そのため、現在は学部生が主体となって、新機能を開発しています。

Webの話に戻りますが、Web班ではあまはこ本体ではなく、スイーツデータを管理する裏方のアプリを作っていました。

しかし、函館スイーツプロジェクトは設立3年目という背景があり、スイーツ協議会の方もとりあえずリリースしたいねという思いが強まってきていたので、ちょうど夏休みが終わる今年の9月の終わりごろからWeb版のあまはこも本格的に作ろうと思い、開発をはじめました。

Webであれば、リリースの申請をする必要がなく、デプロイすれば全プラットフォームで使うことができます。

2. 使ってもらう敷居を下げる

みなさん、外出先のお店などでアプリの広告を見たときや、店員さんに進められたときにその場でアプリをインストールしますか?

僕はあまり気が乗らない派で、めんどくさいですし、通信量を気にする人も多いかと思います。

Webアプリだと、例えばQRコードを置いておけばインストールせずに見ることができるので、あまはこがどんなアプリかだけでも知ってもらう機会が幾分か上がるのではないかと考えています。

3. ネイティブアプリに誘導したい

じゃあネイティブいらないじゃんと思うかもしれませんが、ヌルヌル動くUXなど、ネイティブの良さもあります。

PWAではネイティブアプリのインストールバナーを出して誘導することもできます。

まずはPWAで見てもらって、もっと使ってほしいユーザにはネイティブアプリをインストールして使ってほしいなという策略があります。

Web班のメンバー

現在は @wakeupsloth (僕) と @kazuma_0129 の二人でWeb版あまはこを開発しています。

函館スイーツ全体だと30人くらいはいるのですが、現状Webはあまり人気がない状態で寂しいです。

しかも@kazuma_0129 は来年の3月に卒業してしまうので、春からは僕一人になってしまいますね。😇  

どうやっているのか

GitHubのIssueからやりたいタスクを選んで進めています。

10月ごろは二人でずっとペアプロして知識を共有しながら進めていました。

現在はわからないところが出てきたらペアプロしています。メンバーが増えたらモブプロもアリですね。

こんなことやってます

割とモダンな環境で、僕を含めて勉強しながら楽しく開発してます。

興味とやる気があれば、たいしたことは教えられないですが僕のこれまで学んだ技術をペアプロなりモブプロで教えながら一緒にやっていきたいなと思ってます。

使っている技術
  • Progressive Web Apps (PWA)
  • React
  • TypeScript
  • Redux
  • Ionic5
開発中のアプリ

このリンクから確認できます。

モバイル用のビューを先に作っているので、ブラウザの「検証」タブからスマホの画面で見てみてください。

開発中のレポジトリ

ここで開発してます。気になった方は覗いてみてください。

github.com

おわりに

この記事を読んで、PWA作りたい!!面白そう!!やWebの開発経験を積みたいと思った方は @wakeupsloth に連絡するか、月曜4・5限に495教室に話を聞きに来てみてください。