Ionicを使用している

プロダクト事例集

Ionic Meetup #11 Tokyo

@scrpgil

自己紹介

榊原宏祐 @scrpgil

 

  • 組み込みエンジニアだったがIonic使い始めてWeb系にジョブチェンジ
     
  • 株式会社キネカでエンタメマッチングアプリpatoの開発
     
  • 趣味も仕事もIonicよく使う

今日話すこと

  • Ionicを使ってるプロダクト事例を紹介
     

  • プロダクトの探し方を紹介
     

  • Ionic使ってるアプリの特徴を紹介

 

登壇駆動でIonicの

ケーススタディを

読みたかった

 

プロダクト開発の

参考になると幸いです

プロダクト事例集

シートにまとめるのは前もやった

Webサイトにしました

URL

プロダクトを分類

海外勢のIonicアプリ

・Ionic v1時代からの見慣れたアプリ

・公式ブログに選定理由とか情報多数

・Untappd
 ビールのSNS

・Sworkit

 筋トレアプリ

・JustWatch

 動画配信サービスの検索

・Pacifica
 瞑想アプリ

 

海外勢のIonicアプリ(new)

・最近Ionic Resourceでよく見る政府系や社内利用アプリ

・Ionic Enterprise Supportのユーザーで事例が手に入りやすい?

・MRAeasy
 モーシャリス共和国の納税アプリ

 

・数十億ドル規模のゲーム会社の

 社内向けデバッグアプリ

 

・他Airbus、NHSなどなど...

日本勢のIonicアプリ

・Ionic Meetupではお馴染みのアプリ多数

・日本のアプリの流行かSNS、メディアアプリが多いかも?

・tipsys
 女友達を作るSNS

・TechFeed

 テック系ニュースアプリ

・ゲーマガ

 ゲームアプリ

個人開発者 

・4万ダウンロードのアプリもある。

・Go Ranger

 ポケモンGoのサポートアプリ

・ホウビンゴ
 ビンゴ型タスク管理アプリ

・イイコトイウネエ

 名言シェアアプリ

・アイテマス

 日程調整アプリ

アプリじゃない系

・公式サイトとかだけどIonic使ってる

おすすめアプリ紹介

Sworkit

  • ワークアウトビデオアプリ
  • MAU250万人

  • ダウンロード数10000万/月

とにかくUIが綺麗

マルチプラットフォームで

Ionic4対応済み

実装の参考におすすめ

少数精鋭の開発チーム

・元々はRyan Hanna氏が一人で開発

 

・現在は全員で6人チーム

・コア開発者は3名

選定理由

  • RyanHanna氏がWeb系技術に詳しかったのでCordova使いたい
     
  • 時間とお金を節約したい
     
  • デザインとカスタマイズ性を重視

Ionicを使ってよかったこと

  • 1つのコードベースでiOS、Android両方を開発でき、開発期間を半分に短縮できた
     
  • およそ年間20万ドルの短縮になった

Untappd

 

  • ビール共有・発見SNSアプリ
  • IonicチームのMike Hartingtonがファン&ユーザー
  • バーコードで自分の飲んだビールの記録ができるのが便利

・バーコードでビールの検索&レビュー

・過去飲んだビールのログ

・気に入ったビールを提供している店を検索できる

・似たビールを探せる

かなり実用性高いアプリ

ビール好きにおすすめ

Ionic選定理由

最初Cordovaで開発⇦スパゲッティ化

シンプルなUIであるIonicを採用

特にModalが素晴らしかったらしい

GoRanger

概要

  • ポケモンGoのコンパニオンアプリGo RangerをIonicで作成
  • 2週間で作っていきなり4万ダウンロード
  • 作者はIonicチームの人
  • DAUは約9000人(2018年8月時点)

Matt Kremer

リリースまでの2週間

1日目: Firebase Hostingにベータ版(PWA)をデプロイ

    Redditにベータ版を投稿

9日目: フィードバックを元に改善&ユーザーテストを実施

13日目: iOS、Androidアプリをリリース

14日目: Redditにアプリを投稿

16日目: 全世界で4万回以上ダウンロード

17日目: ストアの評価は4.9

最初のユーザーの見つけ方

アプリ成功の重要な要素はアクティブなユーザーベースを見つけること。GoRangerを使用したいと思っている他のトレーナーを見つける方法は次の通り

 

1. アクティブなコミュニティを見つける  

2. そのコミュニティの仲間になる

3. コミュニティのフィードバックでベータ版を改善する

4. リリース!

5. 改善を繰り返す

1. アクティブなコミュニティを見つける

ポケモンGoはコミュニティを見つけるのが非常に簡単

 

Redditにたくさんのコミュニティができている。ポケモンGoは最大のコミュニティであり、約100万人のメンバーがいて、そのうちの5000人以上がいつでもアクティブになっています。

2. そのコミュニティの一員になる

すぐにコミュニティに商品を売り込むのは悪い考え。自分が痛みを感じるならばコミュニティも関係があるはず。

 

これを行う最も簡単な方法は、自分の問題を解決するアプリケーションを構築することです。

 

あなたが目標の人口統計の一部であるとき、あなたは痛みにもっと簡単に関連付けることができます。

3. コミュニティと一緒に改善する

自分のアプリのアイデアは素晴らしいと感じられますが、

しかし、できるだけ早くコミュニティに共感を得てもらう必要があります。

そのために、コミュニティに対して質問をしましょう

What do you look up frequently?

 

私は、ここでコミュニティが感じている問題にGoRangerがうってつけであることを確認できました。

 

その後、FirebaseでWeb版バージョンを公開して本番リリースまえに痛みの解決策として間違いないことを確認しました。

4. リリース!

なぜIonicか?

迅速に立ち上げ、成功への道を繰り返すなら車輪の再発明に時間を費やすべきではありません。

 

より早くなりたい場所に移動するためにはすでに経験しているフレームワークを利用するべきです

 

IonicのUI & UXはGoRangerに必要な物をすべて提供していた。そして、GoRangerのUIは非常に滑らかであるとコメントを得ています。

痛みへの集中が成功の要因

アプリの成功に最も重要な側面はユーザーの痛みを解決すること。

 

ポケモンGoは1ヶ月に3時間の「コミュニティデー」がまさにそう。私はイベントの存在を知ったらサンダルのままその場所に走らなければいけません(まさに痛み)

 

GoRangerの最初の機能は、進行中のイベントと予定されているイベントの両方を日付とカウントダウンに変換してリスト化した

仕事はここで終わらない

リリースは最もエキサイティングな体験の一つです。

 

しかし、実際の仕事は痛みを解決し続けることです。

世界中のポケモントレーナーはより良い体験をまっています。

Keep Solving more pain, better!

Ionicアプリの探し方

Ionic Blog&Resource

  • Built with Ionicで検索
  • Ionic ResourceのCaseStudyを読む

Slackの #product

Ionic界隈のTwitterアカウント

@ionicframework
Ionic公式

@getcapacitor
Capacitor公式

 

@stenciljs
StencilJS公式

@maxlynch
IonicのCEO

@rdlabo
IonicJapanUG

フォローするとIonic使ってるプロダクトは大体追える

 

@ionic_japan
IonicJP公式

Ionicの特徴

Pull To Refresh

指を離さなくても自動的にリフレッシュが走る

・ゲーマガ、Meily、Smatch、Untappd、tipsysなどなど

Alert

  • RadioButton付きのAlert(Dialog)はiOS標準で用意されていない
  • Androidにはある
  • Smatch、Meilyなどなど

Ionicを使ってる

プロダクト増やそう

We're Hiring!

Twitterで @scrpgil でお声かけいただければ!

Ionicを使用している プロダクト事例集

By scrpgil

Ionicを使用している プロダクト事例集

  • 1,371