『PS4ProNEWS アプリ化(PWA)実装のお知らせ』インストールなしで高速表示が可能になりました!アプリ化の方法を解説するので必ずお読みください!!

その他
スポンサーリンク

『PS4ProNEWS アプリ化(PWA)実装のお知らせ』

いつもPS4ProNEWSを見てくださりありがとうございます。

先日、”アプリ化検討中”の記事でお知らせしましたが、賛否ありの様々な意見を伺うことがました。ありがとうございます。不安要素は概ね回避できるものばかりだったので、アプリ化の実装に踏み切りました。

それではアプリ化(性格には Progressive Web Apps(プログレッシブ ウェブ アプリ:通称PWA)について知らない方も居ると思うので一から説明していきます。

 

プログレッシブ ウェブアプリとは

1:通常のWebページと同じように回覧が可能。

Progressive Web Apps(PWA)とは簡単に説明するとネイティブアプリのような機能を実装できる仕組みでブラウザに関係なく、すべてのユーザーが利用できる。

これはGoogleが2015年に発表した技術で、Web業界に新たな可能性を生み出すとも言われています。ユーザーはApp Storeやgoogleプレイストアからインストールする必要はなく、ChromeやFirefoxなどのブラウザで通常のWebページと同じようにアクセスするだけで、ページの高速表示が可能です。

また、HTTPS 経由で配信されるため、コンテンツの改ざんを防ぎ第三者によるデータの盗聴など危険性を回避し安全に回覧が可能になります。

 

2:オフラインでも利用できる。

オフラインでも、 ネットワーク環境が良くない場所でも動作が可能です。

最初の読み込みは高速で行われ、読み込み後すぐにキャッシュ されます。それ以降、毎回の読み込みは行われず、必要なコンテンツのみが取得されます。

ユーザー インターフェース とインフラストラクチャはすべて、Service Worker によりローカルにキャッシュされる ので、以降の読み込み時には全てを読み込まなくても必要なデータだけを取得すればよい ことになります。

 

3:プッシュ通知で更新情報がすぐに分かる。

TwitterやFacebookを利用していないユーザーでも更新情報がすぐに確認が可能になる。
※プッシュ通知を登録するしないは自分で選べます

 

4:インストール不要、「ホームに追加」するだけで恩恵を受けられる。

ユーザーはApp Storeやgoogleプレイストアからインストールする必要はなく、アイコンをホーム画面に追加するだけで、以後そこから回覧することでインストールされたアプリのように、ページの高速表示などの機能をすぐに利用できます。

 

ホームにアイコンを追加する方法(例:iPhoneの場合)

① PS4ProNEWSを開いた状態で画面下中央の『ダウンロードマーク』をタップ

② 画面右下の『ホーム画面に追加』をタップ

 

③画面右上の『追加』をタップ

 

④ホーム画面に『PS4ProNEWS』のアイコンが追加されます。
以後、ここから回覧すると高速表示が可能になります。

 

Android スマホの Chrome の場合

僕はandroidを持ってないので確認はできませんが、Web版PS4ProNEWSにアクセスすると自動的に『ホーム画面に追加』が表示されると思います。
追加」をタップすると、サイトがアプリ化されてアプリ一覧に表示されます。

 

PCでもアプリ化が可能。

① Chrome デベロッパーツール(『F12」又は「右クリックで検証」)を開き、「Application」から「Add to homescreen」をクリック。

②右上の『』をクリック

③『PS4ProNEWSをインストール』をクリック

④デスクトップに『PS4ProNEWS』のアイコンが追加されアプリ化されます。

 

5:ネイティブアプリのように全画面表示が可能に

アプリ化されたサイトはURL表示が削除され全画面表示が可能になり見やすくなります。

PS4ProNEWS

PS4ProNEWS

 

PWAのデメリット(iOSのSafariは現時点で一部機能が利用できない。)

iPhoneではプッシュ通知が利用できない。

現時点ではまだ未対応

iPhoneでは「オフラインでの動作」が不完全

ただしネットを繋いだ状態であれば体感表示速度を向上させる効果があるため無駄ではない

iPhoneではPWAを実装すると「エッジスワイプで戻る」が効かなくなる。

androidには「戻る」ボタンがあるので問題ないですが、iPhoneには「戻る」ボタンがない。
(※気付いている人もいると思いますがPS4ProNEWSでは画面右下に戻るボタンやコメント欄へ飛ぶ機能を自前で追加しました。ただ、UI的にどうかな…と思っているので時間があれば改善したいと思ってます。)

 

 

対応ブラウザ(2018年11月時点)

Chrome(Android版): ◯ PWA対応可能。
Chrome(デスクトップ版): ◯ PWA対応可能。
Chrome(iOS版): ✕ 対応不可。

Firefox(Android版): △ 一部の機能を除いてPWA対応可能。
Firefox(デスクトップ版): △ 一部の機能を除いてPWA対応可能。
Firefox(iOS版): ✕ 対応不可。

Safari :✕ 対応不可。
Internet Explorer: ✕ IEでは対応不可。
Edge: △ 次のメジャーバージョンで一部の機能が利用可能。
※なお、2018年3月にSafariも対応が発表されており今後全機能対応されると思われます。

ストアを通さなくて良いというのは、かなり大きなメリットですが、Apple的には面白くないのでは?と思うのでなにかしら規制やルールなど出てくる可能性はあると思います。

Progressive Web App vs. Native App(比較動画)

Progressive Web App vs. Native App

 

以上でアプリ化の手順は完了です。文字にすると面倒くさそうですが、作業時間は20~30秒もあれば出来ます。分からないことがあればコメント欄にて受け付けます。
たったこれだけの作業で高速化できるならやるしかないでしょう!!ただiPhoneユーザーはまだ完全に恩恵を受けられないのが残念です・・・。Safariも一応対応を発表しているので今後に期待しましょう。
あと、アプリ化が嫌な方は今まで通りWeb版でもアクセスは可能なのでご心配なく。ホーム画面に追加さえしなければ、ブックマークやお気に入りから今まで通りアクセス可能です。
それと個人的なデメリットですが、アンテナサイトからの回覧がほぼ絶望的になる可能性が高いことです。少し専門的な話になりますが、アンテナサイトとはアクセストレードすることで成り立っているのですが、PWA化(https化含む)することでリファラ(アクセス元のデータ)が確認(一部は確認できる)できなくなるのでアクセストレードが成り立たなくなります。つまりアクセスを送ってもリファラが確認できないので登録されているアンテナサイトから切られる可能性が高い。(※https化にした時点でアンテナサイトからの流入は激減してます)まとめサイトはアンテナサイトがないと生きていけないと言われているので個人的ここがネックです・・・。アクセストレードに関してはアンテナ管理人さんと直接交渉してみようかと思ってますがどうなることやら・・・。

 

◆PS4ProNEWS 新着記事◆

【ゴッドイーター3】約3分にわたる『ストーリートレーラー』が公開!!発売日に向けて小林くるみ氏描き下ろしのカウントダウンイラストもお披露目!!
【朗報】PS4「キムタクが如く」ファミ通レビューで高評価!!神ゲー判定来ちゃったわーwwww【ジャッジアイズ】
ワイ「あれ?このラスボス正しいこと言ってない?」作中の正義マン「お前は間違ってるンゴ!」
PS5は互換ありにするべきか、互換無しにするべきか会議
今日の23時放送のモンハンワールドスペシャル何が発表されるか予想しようぜwwww
キングダム ハーツIII - PS4
スクウェア・エニックス
¥ 7,801(2018/11/30 23:43時点)

コメント

  1. ここ見始めてから1年ぐらい立って初めてコメントしますけど、ここの管理人さん本当にすごいと思いました。
    正直こんな面倒でデメリットありそうな作業をするのはやはりすごいと思いますし、大変な労力だと思います。
    これからも見続けるんで頑張ってください。

    • この方針が吉と出るか凶と出るか分かりませんが、やらないで後悔するより、やって後悔した方が良いを選ぶ性格なもんで(笑) 元々この業界に飛び込んだのも同じような感じでした。下手したら首吊ってもおかしくなかったけど(;・∀・)
      これからもよろしくお願いいたします。

  2. お疲れさまでした
    試しにアプリ化してみました
    これからも運営を頑張ってください

    • ありがとうございます。誤字脱字多いですが温かく指摘してくださいm(__)m

  3. iPhoneでも充分早いやん!戻るが使いにくいがまぁええ感じや

  4. ワイhabit民、手探り

  5. PC、chromeアプリ化してみた
    アイコンが独立して邪魔くさい思ったが想像以上に早くてこれなら全然ありだわwwwwww

  6. アプリ化ありがとうございます。自分は賛成派だったので、早速アプリ化しました。

    今後とも閲覧させて頂くので、更新頑張って下さい。

  7. 軽くて良い感じです。
    私はAndroidを使っているのですが、アプリで開くと設定でOFFにしていても、画面の自動回転が作動してしまいます。
    ちょっと寝っ転がって見つらいです。

    • ユーザビリティ的に画面の向きを強制的に固定化するのはあまりよくないので、下記の動画を試していただけますでしょうか

      https://youtu.be/VPuET6aQQMo

  8. ためしに使わせてもらったら早いし軽いしで快適ですな。

    ゲーム関連の情報源としてこちらのブログを重宝しているのでこれからもがんばっていただきたいです。

  9. コメント6です
    コメントしたときは縦画面固定で表示されていましたが、さっき開いたら画面が自動回転するようになりました。ちなみにAndroidで縦画面固定にしているのですが、何か解決方法はありますか?

  10. やってみました!

  11. アプリで大分見やすく軽くなったねぇ
    前は見るのもコメントするのも重かったからこれは快適。

    どういう技術かよく解ってないけど凄いね。

  12. Android Chromeで入れてみました。
    右上の黒丸3つのところの
    「ホーム画面に追加」から入れられました。
    これからもよろしくです。

  13. アプリ化をしてみたけれど、高速化のメリットを無視できるくらい広告が表示されまくるのでadblockをはじめとした広告除去を行っている人にはつらいかもしらん。同じ内容の広告が1記事に4連続で表示された上、画面の5割以上占有するのは流石にメリットに見合わない(広告の収益性云々じゃなく、記事の閲覧快適度の問題で。広告で稼ぎになるなら邪魔にならない範囲でどんどんやって欲しいくらい)
    この部分を改善できるのであればアプリでの利用を再開するかなぁ……。

  14. 重さ軽さよりも広告が画面を占有する率が高いなら見送りですね

  15. andoroidでアプリ試してみました。firefoxでadblockですが、広告は表示されずブロック出来ています。フィルターは豆腐フィルターを使用しています。
    速さは少し速くなった気がします。wifiが安定しないためオフラインでも見られるのは助かります。
    アプリにして良かったです(^_^)

  16. iPadでアプリ化したところ、高速化した実感は得られてない。
    あと戻るが使えないのがやはりストレスかな。
    Androidスマホでも試してみるつもり

  17. タブを切り替える度に初期画面に戻されるのは何とかならないでしょうか?

  18. タブを切り替える度に初期画面に戻る仕様は変えられないのでしょうか?

  19. タブを切り替える度に初期画面に戻る仕様は何とかならないのでしょうか?
    見てる途中だったりすると不便です

  20. フロントエンドエンジニアですか?
    PWAいいっすよね

  21. Android(Xperia XZ1) Firefox(uBlock origin)で以前と同様に閲覧出来ています
    ただし速度は変わっていない印象です
    もともと速度に不満は無かったので問題ないですが

    • 速度に関しては現在 不具合が出ている影響だと思います。ただPWAに寄る不具合なのかサーバーによる影響なのかまだ特定ができていないので何とも言えない状況です。
      正常に表示されるまで今しばらくお待ちください。

  22. かなり長期的だな

  23. PCですが、トップページすら重すぎて表示されないことが多いですね。
    そしてレンタルサーバーのページに移動することも。

  24. PCですが、トップページすら重すぎて表示されないことが多いですね。
    Error 524が出ます。

  25. Error 524が出ます。

  26. お気に入りのサイトは同じフォルダに入れて開くときは全部一度に開くためブラウザのブックマークの方が個人的には便利なためアプリではなくブックマークから開くと最近重くて接続出来ない事があります。
    あと、過去記事は削除?されたのでしょうか?過去記事も見当たりません。
    このサイト好きだったのですが残念です。修正、改善はされるのでしょうか?
    よろしくお願いします。

  27. トップページは軽くなり、トップページから見れる記事も問題なく見れます。
    しかし、一番下に過去にさかのぼるリンクがなく、
    右側にある月別アーカイブなどから過去記事に飛ぼうとすると、ずっと読み込んで見れない状況ですね。

    • ご連絡ありがとうございます。
      不具合は複数ある様でいくつかは改善し軽くなったのですが特定のページが開かない、本来表示されるハズのページが表示されないなどの不具合はまだ続いてる状態です。
      サーバー会社にも連絡し修正中ですので、もうしばらくお待ちください。

  28. Error establishing a database connectionってでますね(´・ω・`)

  29. やっと復活した?

  30. 開かないのが直って、さくさく見られます。良かったです(^_^)

  31. 記事の更新はまだ出来ないのかな?

  32. ご無沙汰しております
    長期間更新が止まり申し訳ありません。
    11/18以降の記事が表示されない謎の現象ですが、現状報告としては、僕の力では今回のエラーを改善出来なかったのでサーバー会社及びWP専門の修理業者に原因の特定と修正をお願いしていました。
    しかし、両業者共に原因を特定する事ができませんでした。

    そこで最終手段としてwpを初期化(最インストール)し設定等を一から構築することにしました。(過去記事は引き継ぎます)

    今から作業に入るので一時的に表示されますがご了承下さい
    これで完全復活するとは断言できませんが、上手く行けば2~3日以内には通常運営できるかもしれません

  33. 復旧頑張ってください~、楽しみに待ってます!

  34. ご無沙汰しております。
    先日から発生していた不具合が遂に解消しました!
    ただし、あらゆる設定を初期化したために一から再設定する作業が残っているため、もう少し時間が掛かりそうです。今しばらくお待ちください。m(__)m

  35. 不具合解消おめでとうございます。
    完全復旧まで、まだかかると思いますが、陰ながら応援しています。

  36. 頑張れ頑張れ諦めんな!!

  37. お、復旧の目途が立ちそうかな。再開を待ってるよ。

  38. 普通に開ける!管理人さん頑張って

  39. 復活おめでとう!
    と、言いたいところだが、エスコン7以降の記事が表示されない状態なってます。
    たまにアサクリの記事まで表示されるけどホームに戻るとエスコン7の記事まで表示になります。

  40. こちらの更新はまだ時間かかるのかなー?

NGワード、連投、性的、暴力的、差別的な単語、個人を誹謗中傷するコメントは自動で弾かれ承認待ちとなります。
スパム対策のため、「http」や英語、漢字、カタカナのみの場合も自動で弾かれます。
他人とコメント投稿のタイミングが被ると稀にコメントが弾かれる場合があります、しばらく待ってからコメントしてください。
タイトルとURLをコピーしました