Googleが主導し、Steve Jobsが作ろうとした未来 #knowledgesharing
最近参画しているシリコンバレーのAppSocially社で定期的に#knowledgesharing という勉強会が始まりました。今日は、私が担当した回について共有します。
プレゼンで使用したアプリはこちら↓
PWAアプリを用いてプレゼンしました
今回は以前、私がPWA紹介用に作ったPWAアプリをテレビの巨大モニターにApple TV経由で出して行いました。操作は私のスマホから行うことでPWA内の画面をスライドしたりボタンをクリックしてアラートを表示させてプレゼンを進めました。
以前の私、天野のMediumの記事でも紹介しましたが、このプレゼンPWAを各参加者のスマホの中にもロードしてもらいました。
このやり方でパワポの資料をでっかい画面でスライドさせる紙芝居方式とは違い、参加者が自分のスマホの中でプレゼン資料をみれるためプレゼン中に前のスライドに戻ったり後でプレゼン資料を外部の人と共有することができるようになります。
参加者のスマホのブラウザから質疑応答を事前に受けておいてプレゼンの後に面白そうなものから答えれるようにしてもいいですね。
会場が大きすぎるとプロジェクターに書いてあるものが読めなかったりもしますが、スマホの画面にプレゼンを表示させてそれをスピーカーがスライドできるようにしても面白いですよね。Firebaseのpub/subとか使えば割と簡単に実装できます。
それでは、プレゼンの内容に移りたいと思います。
PWAとはどういう技術なのか？
お手持ちのスマホでhttps://pwa.22442244.comを開いて見て下さい。
PWA — Progressive Web AppはスマホのChromeやSafariブラウザ内でネイティブアプリの様な体験を可能にした技術の枠組みです。
PWAはネイティブの様な動きをするWebアプリ
これはGoogleが公開しているデモです。
PWAのメリット
PWAのメリットをいくつかリストアップしました。
#1 アプリ感覚
App Shellモデルに基づいて作られているため、アプリ感覚で操作できます。
#2 レスポンシブ
レスポンシブなHTMLを使って記述するので、タブレットやスマホなど画面サイズが変わってもレイアウトが崩れません。
#3 ネットワーク接続に依存しない
Service Workerを使うことで、オフラインやネットが不安定な状態でも動作します。
#4 再エンゲージメント可能
Android内で動作するPWAは一度ホームボタンに登録するとpush通知を送ることができます。
#5 アプリの様にホームに追加可能
ユーザーのホーム画面にアプリの様にアイコンを保存することができます。
#6 URLを使って簡単に共有でき、インストールの必要がありません。
URLのリンクを踏むだけでアプリがスタートします。友達同士でアプリのURLを送り合うとかが可能。
PWAはApp Storeを介さずに配信されるため様々な課題を解決できます。
PWAアプリ内ではボタンをクリックするとアラートで詳細が出てきます。
課題#1 App Storeの審査が厳しい
App Storeのアプリ審査には時間もかかり様々な理由でアプリが拒否されますが、審査がないので気軽にアプリを公開できます。
課題#2 App Storeに30%課金される
アプリの販売費用やアプリ内のバーチャルグッズ等の課金の際に30%課金されますが、それを課金されずに決済お行うことができます。Stripeなどで決済を行えば3%以下で決済を行うことができます。
課題#3 インストールの壁が高すぎる
PWAはURLをクリックするだけでスタートするため、インストールが必要ありません。App Store経由のアプリはインストールにステップが多く、あきらめてしまうユーザーも多いです。
この辺りの詳細は以前の天野の記事「ネイティブ vs PWAではなくて、悪いUX vs 良いUX」に書いていますので、是非参考にしてみてください。
Googleが強力にプッシュしてるから、iOSでは使えない？ いいえ、AndroidだけじゃなくiOSでも使えます！
PWAはスマホブラザーの中で動作するネイティブアプリの様な体験を可能にしたものです。
PWAを使うことでApp Storeを通さなくてもアプリを公開することができるようになります。
iOSではService Workerに未対応などPWAには完全に対応していませんが、iOS内のPWAのUI/UXが改善されることでコンバージョン率アップや直帰率が減るなどの様々なKPIが改善された報告がされています。
PWAはwebアプリとして動作するため、URLがあるだけでブラウザの中動作します。
実はこれは2007年1月にSteve JobsがiPhone発表時に話していたことなんです。詳細は天野が書いた「PWAは2007年1月に始まった」で詳細に紹介しています。
ネイティブアプリができた理由
2007年の1月にSteve JobsがiPhoneの発表をした時に彼はその場で「Safariブラウザのエンジンを使えばiPhoneに入っているアプリと全く同じ動作をするweb2.0とAJAXアプリを作ることができる」と言っていました。「電話したり、メールしたりGoogle Mapsを見たり全部webアプリ内でやればいい」「SDKなしで今日からiPhoneアプリの開発を始めましょう」とも言い切りました。
実は2007年のiPhone発表時点はJobsはApp Storeの設置に反対していたんです。全てのアプリを審査するApp Storeなんか作っても審査できるほどのリソースが無いと言うのが彼の言い分だったそうです。
でもその後Appleの経営陣などにApp Store設置のメリットを説得され、
初代iPhoneの発売から1年後の2008年の8月からApp Storeが開始されました。
日本ではこの時期と最初のiPhoneの発売が一緒だったため最初からApp Storeが入った状態でiPhoneが発売されましたが、アメリカではApp Storeの無いiPhoneが1年くらいあったのです。
PWAが最近現実的になってきた理由
- スマホとブラウザの機能があがってきた
2007年にiPhoneが登場した時はSafariブラウザもしょぼかったのでなかなかパソコンと同じ様にwebブラウザではいろいろできませんでした。
この10年でスマホの性能は劇的に上がり、その中で動くブラウザでもそれなりのスピードで動作するようになったため限られたスマホの性能を最大限に活用するようなネイティブアプリである必要がなくなったのです。 - 開発言語やサーバーの進化
スマホの性能向上も重要ですが、もっと重要なのはフロントエンドの開発言語の環境が良くなってきたことにあります。これまでアプリを作るにはiOSはSwift/ObjectiveC, AndroidはJavaなどと別々な言語で書く必要がありましたが、3年くらい前からiOSとAndroidのアプリを両方いっぺんに書けるハイブリッドアプリ開発フレームワークというのが出てきました。
天野が今メインで使っているIonicというJavascriptのアプリ開発フレームワークはwebviewという中間レイヤーを置くことでiOSとAndroidアプリでコードの共有を可能にしていますが、このwebviewレイヤーはChromeやSafariなどのモバイルブラウザ上でも動作します。
この仕組みを利用して一度コードを書けばiOS, Android, ブラウザ３つで動作するアプリを開発することが可能になりました。
この様な仕組みは10年前にはなかったためJobsが2007年にあの発言
をした時はまだ技術的にはできない部分も多かったのです。
やっぱりJobsは10年前に今の状況が見えていたのかな。
PWAの技術スタック
技術的な土壌は整ったといえるでしょう。こちらではPWAの実装に私が使っている技術スタックの詳細があります。
Ionic
Ionicはオープンソースのアプリ開発用のフレームワークです。
もともとはwebviewを使ってiOSとAndroid両方で動作するハイブリッドアプリの開発用のフレームワークとして使われていましたが2016年末あたりからPWAへの対応もはじまりました。
ネイティブアプリ内のwebviewの上でHTML5/CSSのコードを動かしているため、スマホ内のブラウザ上でも同じコードを動かす事ができ一度コーディングを行えばiOS, Android, browserこの３つに対してコンパイルを行うことができます。
Angular
AngularはGoogleが2007年にリリースしたwebアプリのためのフレームワークです。
IonicはAngularを使ってサーバーとの交信などを行います。
2017年の8月末にあったPolymer ConferenceでIonicチームがStencilというWeb Componentsを書き出せるコンパイラを発表しました。Web Componentsで書き出すためAngular以外のReactJSやVueなどを使ってIonicのアプリの開発になるとのことです。
Firebase
Googleが提供するwebアプリ開発に必要なサービスを全てクラウドで提供しているサービスです。
主な機能は以下の通り:
- Authentication 認証周りのライブラリ、SMS認証も使える
- Hosting PWAのJSファイルなどを保存しておける。Herokuみたいなもの
- Cloud Functions これまでサーバー内で動かしていたNodeJSの関数をクラウドで実行できる
- Database NoSQLのリアルタイムデータベース。もともとFirebaseはこれを作っていて2014年にGoogleに買収された
FirebaseのデータベースよりGraphQLの方が扱いやすいので最近はFirebaseのデータベースは使ってないです。
GraphQL
クラウド上で動作する次世代データベースエンジン。
一度スキーマを定義しておくとIonicなどクライント側からREST APIを呼ぶノリでDBの中のデータをRelationalに操作できます。
MySQLのテーブルを定義するとあと勝手にクライアント側からデータベースを操作するAPIが用意されるみたいなイメージ。
現在はGraph CoolというGraphQLをクラウドで運用できるサービスで使っている。
Algolia
爆速検索エンジン。検索項目を入力している途中で検索結果が返ってくる。
NoSQLとしてJSONデータベースにデータを突っ込んでおくと勝手にインデックスしてくれて爆速検索の対象になります。
今までカラム毎に用意していた細かい検索条件なども全部テキストで放り込んで検索すればなんでも早くなるはず。
プレゼンはここまで！
初回は以前から私がこちらで書いているProgressive Web Apps (PWA)に関してお話をしました。 AppSociallyではすでに社内でPWAの開発行っていることもあり、みなさんのPWAに関する知見は高かった事もあり、いろいろ突っ込んだ質問ももらい有意義な会になりました。
重要な点 まとめ
- PWAを使うことでインストール不要なアプリ体験をブラウザ内で実現可能です。
- PWAの開発はIonic/Angular, ReactJSなどのJavascriptのフレームワークを使って行う。
- PWAはApp Storeを介さずにアプリを公開することが可能なため、App Storeの審査やバーチャルグッズ対象の30%の課金をすっとばすことが可能です。
- Android内で動作するPWAはpush通知などネイティブの様な機能を使うことができますが、iOSでもPWAは動作してネイティブアプリの様なUXを提供でき各KPIが上がっている事例が報告されています。
引き続き #knowledgesharing を続けていきます！
ChatCenter iOでは、このような #knowledgesharing イベントを東京オフィスにて定期的に開催していきます。今後は、社外の皆さんもご招待して公開勉強会にしていきます。ご興味のある方は、AppSocially Product Managerの中山陽介まで、以下のChatCenter（こちらのリンクか下記のQRより）かEmail<hello@chatcenter.io>にてお問い合わせください。
東京オフィスについて
AppSocially株式会社では、東京都渋谷区千駄ヶ谷に東京オフィスを新設いたしました。米国カリフォルニア州サンフランシスコの本社同様、キッチンが充実し、シャワーも完備したオフィスです。フットボールゲームやピンポンも完備し、日々チームメート間で研鑽しております。東京オフィスでは、定期的に #drinkup を開催予定です。また、社内を生中継でつないでのエンジニアリング、デザイン、顧客開発、ユーザリサーチ等のスキルや経験を共有し合う勉強会 #knowldgesharing も今後一般公開予定ですので、参加にご興味のある方はChatCenter（こちらのリンクか下記のQRより）かEmail<hello@chatcenter.io>にてお問い合わせください。
AppSocially株式会社
〒151–0051 東京都渋谷区千駄ヶ谷1丁目9–1
代表取締役 高橋雄介
https://goo.gl/maps/fEDhYj5t1qR2
ChatCenter iOについて
参考までに、ChatCenter iOは、AppSocially Inc.の運営するビジネス・カスタマーコミュニケーションのためのプラットフォームです。デザイン(UX)とデータ(AI)のアプローチにより、コンバージョンやセールスに強い会話型のツールを、国内外の主に大手クライアント様にご利用頂いています。AppSocially Inc.は、500 Startupsのアクセラレータプログラムに参加したスタートアップであり、ChatCenter iOは初期の経験を活かしたピボットの成功により生まれました。2017年6月より東京都渋谷区千駄ヶ谷に新オフィスを設置し、サンフランシスコに拠点を置く本社と連携しながら事業を進めています。
絶賛採用中です！
AppSociallyでは、San FranciscoのHQおよび東京オフィスにおいて、PWAの考え方で弊社の既存製品を破壊的に革新してくれるプロダクトエキスパートを募集しています。経験、学歴、年齢等は問いません。上記のChatCenter（こちらのリンクか下記のQRより）、Email <hello@chatcenter.io>、もしくは、Wantedlyからお問い合わせください。
