favyメンバーが好きを仕事にする日々を発信するfavicon

favy公式ブログ favicon(ファビコン)

最新のWeb/アプリ開発のトレンドを、わかりやすく解説&実際に遊んでみる

2019/03/28 開発ブログ

はじめまして!favyエンジニアインターンの大橋です。
現在favyは絶賛エンジニアを募集中のため、オウンドメディア『favicon』を通して、エンジニアチームの雰囲気や業務内容などを定期的に発信していくこととなりました。この記事は、その第4回目となります。

大橋 啓介(Ohashi Keisuke)
山梨県出身。サッカーと筋トレと海外ドラマとプログラミングに精を出すエンジニア兼大学生。早稲田大学情報理工学部に在学する傍ら、2018年8月より、エンジニアインターンとしてfavyにジョイン。バックエンドとフロントエンドを幅広く開発を行っている。GitHub

先日、社内でトレンド技術の勉強会が開かれ、普段触れない分野への知見を深めることができる有意義な時間となりました。
個人的には、まだまだエンジニアとして先を行く先輩方との超えられない知識の壁を痛感したので、これから精進したいです!

では本題にうつります。

勉強会のテーマは、Web/iOS/Androidアプリ開発についてでした。
ちょうどその内容が、エンジニアもエンジニアではない方にも楽しみながら理解してもらえる内容だと感じ、わかりやすく解説&実践したいなと思い、今回オウンドメディアfaviconの開発ブログとして残そうと思った次第です。

というわけで今回は、Webアプリ、iOSアプリ、Androidアプリの架け橋となる技術について解説していきます!

今回解説する項目は、下記です。

  • ネイティブアプリ/PWA/ハイブリッドアプリとは
  • PWA/ハイブリッドアプリが革命を起こした!?
  • 各アプリ開発方式のPros&Cons
  • 実際に遊んでみよう!

ネイティブアプリ/PWA/ハイブリッドアプリとは

本記事の最重要キーワードの登場です。ネイティブアプリ、PWA、ハイブリッドアプリ、この3つについてまず解説します。

ネイティブアプリiOSやAndroidで動く、ストアからのダウンロードが必要なアプリ
PWAWebアプリをそのままスマホアプリとして使えるようにしたもの
ハイブリッドアプリダウンロードは不要で、Web View上で動くアプリ。PWAとは微妙に違う

ハイブリッドアプリは、Webアプリをそのままネイティブアプリとして扱えるようにしたものです。つまり、PWAとハイブリッドアプリは、同じWebでの技術を使っているのですが、あくまでPWAはWebアプリであり、ハイブリッドアプリはネイティブアプリであるということです。

ややこしくてわからないという場合は、アプリにはスマホアプリとWebアプリがあって、ネイティブアプリとはスマホなどで使えるものPWA、ハイブリッドアプリはあくまでWebアプリなんだけど、見た目や動きはスマホアプリと似ている、という理解でOKです。

今ネイティブアプリ/PWA/ハイブリッドアプリの違いをくどく説明しているのは、各々の違いが分からないとPWA/ハイブリッドアプリの強み・弱みが理解しにくいからです。

従来のアプリ開発(ネイティブアプリ開発)では、Web, iOS, Androidと、それぞれに対応した3パターンのコードを書いていました。(今もスタンダードではありますが)

アプリが同じでも、Web、iOS、Androidに対応させるために、別々のコードを書かなければいけないのは、エンジニアが十分にいない会社にとってはツライものがあります。

エンジニア不足の会社は、3パターンもコードを書くのはツラい…!

PWA/ハイブリッドアプリが革命を起こした!?

ところが、ここ数年の間で広まったPWA/ハイブリッドアプリという概念はこの既存のアプリ開発を変えました。

PWAとハイブリッドアプリでは、Web用に作ったアプリをそのままiOS, Androidアプリとして配信することができます。

単純に考えて、今までの3分の1のコード量で仕事を終えることができるんです!

エンジニアは、同じ作業の繰り返しを減らしたいと考える生き物
Web、iOS、Androidと、書くコードは違っていても、根底のロジックは変わりません。それなら、わざわざ3回分コードを書くんじゃなくて、1回で済ませればいいじゃん!

アプリ開発に革命を!

各アプリ開発方式のPros&Cons

PWA、ハイブリッドアプリは、そんなエンジニアの心の声を代弁してくれるかのような存在でした。

PWA/ハイブリッドアプリを使うと、従来のコードの3分の1のコード量で仕事が完結する、と書きました。ここで、

PWA最高!
ハイブリッドアプリ最強!

と、喜びたくなるんですが、どんな技術にもデメリットがあります。

一旦、今まで出てきた用語を整理します。

現在(2019-03-26)では、アプリ開発に3つの選択肢があります

  • PWA
  • ハイブリッドアプリ
  • ネイティブアプリ

各アプリ開発のPros&Cons(長所と短所)をまとめました。

長所短所
PWAWebで開発したものをそのままアプリ化できる(コード量が激減)iOSでは、まだPUSH通知が対応していない
ハイブリッドアプリWeb、スマホの両方で機能するアプリが作れるまだ年齢が浅い技術なので、情報が散見しており、これが正解!のようなものが見受けられない
ネイティブアプリ各プラットフォームごとに挙動を変えることができるので、徹底的に調整が可能(UXを突き詰められる)
Web, iOS, Androidごとに丸ごとコードを書かないといけない

こうなります。

説明はここまでです。これからは、冒頭で紹介したネイティブアプリ、PWA, ハイブリッドアプリのうち、ハイブリッドアプリについて実戦形式で触れてみることにより理解を深めていきます!

遊んでみよう!

00)必要な道具

  • スマホ(iOS, Androidどちらでも構いません)
  • Mac

01)以下をスマホでインストール

iOS

PreviewPlaygroundの両方をインストールしてください!

Android

PreviewPlaygroundの両方インストールしてください!

Mac

https://play.nativescript.orgにアクセスしましょう。
アクセス後に選択画面が表示された場合は、Vue.jsを選択しましょう。

※なぜNativeScriptを使うのか?
VueやAngularを使ってる会社だとNativeScriptを使うことでハイブリッドアプリを作ることができます。ハイブリッドアプリを作る上ではCordovaやReactNativeというフレームワークを用いるのが主流ではあるのですが、今回は言語の関係上NativeScriptを用いています。

02)パソコン側の設定

パソコンの画面の右上側に、Previewというボタンがあります。そのボタンをクリックするとQRコードが現れるので、先程スマホにダウンロードしたPlaygroundというアプリのQRリーダー機能を利用して読み取りましょう

右上の青いボタンです、もしくは、真ん中上辺りのQR codeでも大丈夫です。

03)スマホとパソコンをリンクさせる

QRコードを読み取ることができたら、先程ダウンロードしたPreviewというアプリの方に画面が遷移します。

こんな感じの画面になるはずです。

これで、パソコン上のコードとスマホの画面がリンクされました。
パソコン上でコードをいじり、画面中央上部のSAVEボタンを押すと、スマホに変更内容が反映されます。

04)テキストを変えてみる

テキストを変更してみましょう。


テキスト変更後のイメージ

05)少し高度なことをやってみる

さまざまな機能を追加できます。

画面左側のComponentsというところ、ここに、スライダーやボタン、カレンダーや加速度計など、遊べそうな道具がいくつもあります。

ドロップ&ドラッグだけで完結するのでコードを書く必要はありません。<StackLayout></StackLayout>の間に入れてあげましょう。

ちょっと遊んでみました。

時刻を取得
スライダー

06)様々な機能を組み合わせてみる

機能を組み合わせることで、ちょっとしたアプリを作ることもできます。試しに自分で勉強して何かを作ってみてもいいですし、以下のサンプルコードをそのまま貼り付けてみると、ハイブリッドアプリのすごさが体感できます。

以下はサンプルコードとデモ画面です。


コード入力時のサンプル画面

最後に

普段はWebアプリの開発の方に関わっているため、ネイティブアプリ/PWA/ハイブリッドアプリの勉強会は未知のものだらけで、知的好奇心が存分に満たされました。

最近ではReact Nativeというフレームワークがあり、これを使うとiOSとAndroidアプリを1つのコードで作れたりもします。アプリ開発の手法は日々進化しており、一エンジニアとしては最新技術に遅れることなくキャッチアップしていきたいです。

今回紹介したPlaygroundを使えば、コードを手で書かなくても、直感的に操作することで多種多様な機能を追加できるので、エンジニアも、そうではない方も、この機会にぜひ一度触れてみてほしいです!

そんなfavyでは、エンジニアを絶賛募集中です。favyエンジニアチームに興味を持ってくださった方、話を聞いてみたい方、一度会社に遊びに来てみませんか?

-開発ブログ
-,

favicon関連記事

favyエンジニアチームにジョインして驚いていること

はじめまして。favyエンジニアの立野です。現在favyは絶賛エンジニアを募集中のため、オウンドメディア『favicon』を通して、エンジニアチームの雰囲気や業務内容などを定期的に発信していくこととな …

「RubyKaigi2019」に参加してきました

現在favyは絶賛エンジニアを募集中のため、オウンドメディア『favicon』を通して、エンジニアチームの雰囲気や業務内容などを不定期連載中です。この記事は、その第5回目となります。 なんやかんやRu …

この機能が全部無料!?favyページの「予約管理機能」のデザインがリニューアルし、新機能も追加されました

飲食店のホームページを無料で驚くほど簡単に作成できるツール『favyページ』の予約管理機能のデザインがリニューアルし、使いやすさが大幅UPしました。 実はデザインだけでなく、幾つか機能が追加されていま …

Rails + Cloudinaryで画像を最適化しよう!

はじめまして!favyエンジニアインターンの石倉です。現在favyは絶賛エンジニアを募集中のため、オウンドメディア『favicon』を通して、エンジニアチームの雰囲気や業務内容などを定期的に発信してい …

favyページ

【2018/7/23〜】favyページにアクセスすると、ログイン画面に自動で移動するようになります

【favyページに関する重要なお知らせ】 いつもfavyページをご利用いただき誠にありがとうございます。 2018/7/23(予定)から、favyページの登録方法の仕様変更に伴い、favyページ(ht …