サイトアイコン ぽずかふぇ＠台湾

PWAウェブアプリ簡単作成サービス Glide で台湾語単語アプリを作ってみた

げん

PWAウェブアプリを簡単に使えるウェブサービス Glide を使って簡単な台湾語単語アプリを作ったので、ここにまとめておきます。





PWAとは

まずPWAとは何かについて。

PWAは “Progressive Web Application” の略で、ウェブブラウザで使用されるウェブサービスをスマホ向けに従来のネイティブアプリのようなUIUXで見せる手法で、スマホアプリとブラウザで使うウェブアプリの良いとこ取りをしたウェブアプリケーションを指します。

PWAでできること

スマートフォンで自社サービスをユーザーに使わせようと思ったら、2019年末現在であればiOSであればSwiftを使ってiOS用のアプリを開発したり、Android向けであればKotlinやJavaでアプリを開発しなければいけない。

そうすると、iOSやAndroidの基盤となるOSのアップデートに対応したアプリの更新を行ったり、バグ修正や機能追加でAppleやGoogleに毎回申請したり(アプリ公開や更新はAndroidは自分側でかなりコントロールできるが、iOSだとAppleが手綱を握る感じ)、そもそもウェブに加えてスマホ向けの2つのプラットフォーム(iOS、Android)で開発を進めなければいけないので手間も時間もコストもかかる。エンジニアも倍雇わないといけなかったりするし、アプリ上での支払いはAppleやGoogleに数%支払わなければいけない。

React Nativeを使ってiOSとAndroid向けのアプリを一度に開発することもできるが、アプリ公開や更新の手間は毎回あるし、ウェブ版とも異なるので2つのプラットフォームでのテストも必要である。

そう考えるとウェブアプリがモバイルアプリも兼ねていると凄く効率的なのは誰でもわかる話しで、PWAが主流のサービス開発手法になりスマホ用アプリもブラウザで完結できるようになれば今までの開発速度や開発者人数などは劇的に変わってくるだろう。

数年前にFacebookがスマホでの利用もブラウザを中心としたものにしようとして失敗したが、今度はPWAの流れで多くの企業のモバイルネイティブアプリがブラウザを使用したウェブアプリになっていくかもしれない。時間はかかるだろうけど。

もちろん今までのウェブアプリをスマホアプリっぽく挙動するようにするために、オフラインでも使用できるようにしたり、簡単にホーム画面に追加できるようにしたり、スマホに通知を送れるようにしたり、通信内容をセキュアにしたり、完全にモバイルレスポンシブにしたりと色々対応しなければいけないことはたくさんある。

PWAについての詳細はMDN Web Docsで確認できます。

プログレッシブウェブアプリ (PWA) | MDN
プログレッシブウェブアプリ (Progressive web apps, PWA) は、ウェブプラットフォーム技術を使用して構築されたアプリですが、プラットフォーム専用のアプリのような使い勝手を提供します。
developer.mozilla.org

Glideとは

Glideは最近バズワードになっている “NoCode” (ノーコード) の流れを組むウェブサービスで、ブラウザ上のドラッグ・アンド・ドロップ、部品の選択、Google Spreadsheet内のデータの用意だけでスマホブラウザでの利用に最適化されたウェブアプリを作成することができる。

このGlideで作成したウェブサービスをPWAのウェブアプリということができる。無料版と有料版があり、それぞれ使える機能や制限が異なってくる。

今の所Glideを使って作成できるアプリは、

などなど。

Google Spreadsheetに表示させたいデータ(テキスト、画像、音声、URLなど)を格納して、ブラウザ上でどのように表示させするかを簡易設計できるアプリケーションであればどんなものでも作成できる。

ただし、現状ユーザーとのインタラクションが必要なアプリケーションは複雑なものは作成できない。

Glideのリンクはこちら：https://www.glideapps.com/

Glide 無料版

Glideの無料版では以下が利用可能。アプリのドメイン名はGlideのサブドメインを使用することになる。(~~~.glideapp.io)

以上を利用することができる。これだけでも色々な用途が考えられる。

Glide Pro 有料版でできること

有料版のProは年払い契約をすると一か月分の金額は19ドル、月ごとの支払い契約にすると29ドルになる。

使える機能は以下でアプリごとの支払いが必要。

Proの上位プランにBusiness版があり年払い契約で一ヶ月の金額は199ドル、月ごとの支払い契約にすると499ドル。

使える機能はPro版とあまり変わらないが、GlideのメールサポートやGlideエキスパートとされる人物とアプリのプランニングのサポートを受けられるみたい。

Glideを使って作成したアプリ

今回作成したアプリはこちら。

台語単語アプリ：https://twlang.glideapp.io
(音声ファイル保管場所を時々変える可能性があるので、運が悪いと確認時に音声が再生されない場合があるかもしれません)

妻が録音してくれた台湾語の音声を単語やフレーズごとにリストしただけのものです。スマホブラウザだと音声が再生されないので、デスクトップブラウザで上のリンクをクリックをしてみてください。

アプリの作成方法

アプリ作成方法はいたって簡単。

  1. Google Spreadsheetにアプリ内で表示させたいデータを入れておく
  2. Glideでアカウント作成後、使用するGoogle Spreadsheetを指定
  3. アプリのおおまかなレイアウトを決めて、画像や音声やボタンやコメント機能や地図などを配置していく
  4. Share appボタンを押して、このアプリのサブドメイン部分を決めて公開する

これだけで基本的なウェブアプリを作成して世界に公開することができちゃいます。

音声再生ボタンの付け方

iOSの各種ブラウザをiPhone2端末で試してみたが、音声ボタンにエラーが発生しiPhone上では再生ができなかったので要確認。お問い合わせしたらまた追記します。

今回作成したような音声再生をする機能を付けるには以下のステップが必要になる。

  1. 自分で音声ファイルを準備する。ファイルの拡張子はmp3にしておく。(マックの.movでは機能しなかった)
  2. 音声ファイルを自分のサーバーにアップロードし、そのURLを取得 (自分の場合は、自分のドメイン名 gegegegensan.com を使ってサブドメインを作成し、サーバーインスタンスに紐づけ、”taiwanese”フォルダを作成し、その中に音声ファイルをアップロードした。URLは”サブドメイン.gegegegensan.com/taiwanese/音声ファイル.mp3″のようになる)
  3. 音声ファイルのURLをGoogle Spreadsheetに貼り付け。ファイルは100以上と大量にあるので、Spreadsheet内でCONCATENATEを使用して文字列操作をしてGoogle Spreadsheet上でファイル名を作成し該当カラムに貼り付け

これだけです。

Glideを使うメリット

有料版を試していないのでログイン機能の設置など高度な機能は使えていないが、会員制サロン向けアプリや単語学習アプリ、旅行ガイド、イベントで2-3日のみ必要な情報やサインアップが必要なアプリなど、主にクローズドで目的ありきのツールとしてスマホで使うアプリが必要というときに一番力を発揮すると思う。

WixやJimdo、ペライチなどウェブサイトを直感的にコーディング必要なく作るサービスは今も人気で新しいサービスが次々に出てくる。Wixは”AI”的な機能でほぼ自動で目的のウェブサイトを作成してくれるので、もはやウェブサイト内のパーツの配置も必要ない。

Glideも同じでウェブアプリのテンプレートがあり、これからもテンプレートが増えていき、どんな目的でどんなレイアウトのアプリが作成されるかのデータが蓄積されていくので、目的とGoogle Spreadsheet内のデータを入力すると作成作業すら必要なくウェブアプリが作成できるだろう。というか現時点でもほぼ作成作業が必要なく完成されたウェブアプリを作れる。

なので、

などなど利点はたくさんある。

Glideを使うデメリット

デメリットを挙げるとすると、

 

これは簡易ウェブサイトを作成するときに「Wixを使うか、ブログプラットフォームを使うか、WordPressを使うか」問題と同じで、プラットフォーム依存するか、ソースコード含め自分でほぼ全てある程度手綱を握りたいか、にもよる。

 

ここでのデメリットは技術習熟度が高い人にとってのデメリットであって、アプリ作成について全く手も足も出なかった人にとってみればデメリットではないかもしれない。

これはその人の目的や用途、技術習熟度等にもよるので、どちらが絶対良いとは一概には言えない。

自分としては、ビジネスとして使うのであればGlideは自分の事業の柱として使うのではなく、本事業やマーケティングをサポートするツールとして使う、という感じかな。IT関係のビジネスではない、レストランとかイベントとかコミュニティ運営とかの事業があり、そのために補助としてウェブアプリを使うイメージ。

 

以前「中文学習とAndroid フラッシュカードアプリの作り方」でも書いたように自分で一からアプリを作るのも手段の一つ。このフラッシュカードアプリは数時間で作成したのだが、1週間本気で勉強すればGlideで実現可能な機能は自分で実装できるようになるはず。(そうすると、この投稿の上に書いたようなOSごとの開発やテスト等が必要になってくるけど)

 

追記：
PWAということで、未完成ですが自分でコードを書いてウェブアプリを作ってみました。(使用技術：Vue, Nuxt, TypeScript, Firebase)

自分の今の目的と合致する場合は使ってみてください。Glideおすすめです。

 

※ 2021/01/08 追記

Angular と Ionic を使って同じようなPWAアプリを作り始めました。

実際にコーディングしていて自分で自由に機能を付け加えられるので結局ノーコードに頼るより自分である程度プログラミング、コーディングをできるようになって作ったほうが都合がよいです。

<< Facebook ページ いいねお願いします >>

<< ホームに戻る

 





モバイルバージョンを終了