paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

20200204140738

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

VC投資先スタートアップ企業特集

どんなWebサイトもノーコードでPWA化を実現できる「Progressier」を試してみた!

f:id:paiza:20210609123121p:plain
どうも、まさとらん(@0310lan)です!

今回はあらゆるWebサイトを誰でも簡単にノーコードでPWAに変えることができるWebサービスをご紹介します。

一般的なサーバにホスティングされているサイトだけでなく、Wordpressで作成されたサイトからWebflowなどのサービスを利用して作られたサイトまで幅広く対応しているのが特徴です。

PWA対応にご興味ある方はぜひ参考にしてみてください!

Progressier

f:id:paiza:20210609123444j:plain

■「Progressier」の使い方

それでは、「Progressier」をどのように使えばいいのかを詳しく見ていきましょう!

まずはPWAに変換したいWebサイトを準備します。今回は、サンプルとしてNetlifyでホスティングしている以下のようなサイトを用意しました。

f:id:paiza:20210609123459j:plain

このサイトを試しにPWA対応していくことにしましょう。


「Progressier」のトップページにアクセスしたら、画面中央にある入力ボックスへPWAにしたいWebサイトのURLを貼り付けてください。

f:id:paiza:20210609123508j:plain


設定画面が表示されるので、好きなプロジェクト名を入力します。

f:id:paiza:20210609123516j:plain


次にWebサイトの種類を選択するのですが、今回の場合だと「Standard site」を選択します。

f:id:paiza:20210609123525j:plain

他にも「Webflow」「Wordpress」などで作られたWebサイトにも対応しているので、自分の環境に合った種類を選択してみてください。


最後にメールアドレスやパスワードを設定してユーザー登録を済ませておきましょう。

f:id:paiza:20210609123535j:plain


以下のようなダッシュボードが表示されたら準備は完了です!

f:id:paiza:20210609123754j:plain

あとはこのダッシュボードからWebサイトをPWAに変換したり、複数のサイトを設定・管理したりなどができるようになります。

■WebサイトをPWAにしてみよう!

さきほど表示されたダッシュボードには、いくつかタスクが用意されているのが分かります。これは上から順番に実施していくことで、Webサイトを簡単にPWA対応できるようになっているのです。

f:id:paiza:20210609123806j:plain


それぞれのタスクは決して難しいものではありません。

たとえば、1つ目のタスクはPWAに必要なロゴ画像をアップロードするだけです。

f:id:paiza:20210609124044j:plain


2つ目のタスクは、専用のコードをHTMLにコピペするという内容です。

f:id:paiza:20210609124144j:plain


コードをコピーしたら、対象サイトのHTMLを開いてheadタグ内に貼り付ければOKです。

f:id:paiza:20210609124159j:plain


3つ目のタスクは、PWAに欠かせないService Workerのスクリプトをダウンロードします。

f:id:paiza:20210609124208j:plain

ちなみに、初めてPWA対応する場合は①の設問で「No」を選択してから、②のリンクをクリックしてファイルをダウンロードします。


「progressier.js」というファイルが取得できるので、これを「index.html」と同じルートディレクトリに配置します。

イメージとしては以下のような感じになります。

f:id:paiza:20210609124414j:plain

これでWebサイトのPWA対応は完了です!

■PWA化したWebサイトを試してみよう!

WebサイトがPWAに対応できているかを試すのが4つ目のタスクになります。

f:id:paiza:20210609124427j:plain


それではWebサイトにアクセスしてみてください。

今回はChromeブラウザを利用しているのですが、アドレスバーの右端にインストールアイコンが表示されているのが分かります。

f:id:paiza:20210609124437j:plain


アイコンをクリックすると、「インストールしますか?」というポップアップが表示されるので「インストール」ボタンをクリックしてください。

f:id:paiza:20210609124541j:plain


すると、ブラウザとは別に単独でアプリのようにWebサイトが起動します。

f:id:paiza:20210609124622j:plain

またWiFiを切断してインターネットにつながっていない状態でも、しっかりとページが表示されていることも確認できます。


もちろんスマホからでも同様のことができます!

スマホのブラウザから同じサイトにアクセスして、オプションをタップしてみましょう。

f:id:paiza:20210609124634j:plain


「アプリをインストール」をタップします。

f:id:paiza:20210609124644j:plain


ポップアップが表示されるので「インストール」ボタンをタップします。

f:id:paiza:20210609124653j:plain


するとスマホのホーム画面にインストールされるので、アイコンをタップしてみましょう。

f:id:paiza:20210609124702j:plain


Webサイトがアプリのように全画面で表示されて起動します。

f:id:paiza:20210609124713j:plain

もちろんオフラインでも閲覧は可能です。

■「ツールボックス」について

「Progressier」はWebサイトを単純にPWA対応させるだけでなく、いくつか便利な機能を提供しているので合わせてご紹介しておきます。

もっとも特徴的なのはWebサイトの右下に配置されたツールボックスの存在です。これはタップ(クリック)するとポップアップが表示されます。

f:id:paiza:20210609124740j:plain

このポップアップから「インストール」や「通知」などの設定ができるようになっています。


ツールボックスはデフォルトで配置されるように設定されていますが、ダッシュボードから非表示にすることも可能です。

f:id:paiza:20210609124813j:plain

ただし、このツールボックスはカスタマイズしたり便利な機能を追加したりなどもできるようになっています。


たとえば、いくつかのチャットサービスと連携させることが可能で、試しに「Tawk.to」と連携してみましょう。

f:id:paiza:20210609125225j:plain

「Tawk.to」のアカウントを作成してこの連携ボタンをONにするだけです。


すると、「Progressier」のツールボックスと統合されてWebサイトにチャット機能を簡単に組み込めるようになるわけです。

f:id:paiza:20210609125235j:plain

また有料ですがプッシュ通知のアドオンを購入すれば、ダッシュボードから手軽に通知を送信できる機能なども提供されています。

このように「Progressier」を利用すれば、素早くPWA対応できるうえ便利な機能も簡単に組み込めるようになるのが大きな魅力と言えます。

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!

■まとめ

今回は、どんなWebサイトもノーコードでPWA対応させることができるサービスをご紹介しました。

「Progressier」はとてもシンプルなサービスなので、初めてPWA対応する方でも特に困ることなく作業できるように設計されています。また、上級者向けにAPIも提供されているのでより高度なカスタマイズも可能になっています。

基本的な機能はすべて無料なので、これからPWA対応する予定の方は本記事を参考にしながらぜひ試してみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング Copyright Paiza, Inc, All rights reserved.