PWA URLのアドレスバーの横にインストールボタン 初期コンセプトを公開

URLを表示するアドレスバーの横にPWAのインストールボタン

PWA(プログレッシブウェブアプリ)って何?という方はまだまだ多いと思います。今までPWAというのはWebサイト管理者やアプリ開発者といった造る側の話題という印象でした。それが変わりそうです。というのも今後はURLを表示するアドレスバーの横にPWAのインストールボタンを設置するといったコンセプトが公表されました。こちらのChromeのブログでも発表されています。

今までPWAをインストールするには手動でホーム画面に追加するか下から出てくるバナーをタップしてのインストールでした。スマートフォンでサイトを見ていて下からこういったバナーが出たことがある方はいらっしゃるのではないでしょうか。

PWAのインストール用のバナーの画像

このバナーの次の段階が発表されました。Chrome68からのようです。Beta版をスマートフォンに入れて試しました。下の画像のように縦幅が低くなるようです。画面の一番下にこれが表示されます。

Chrome68からのPWAのホーム画面に追加のバナーの説明画像

最初のミニバナーをタップすると次にこの画面が表示されます。2段階のステップになります。

Chrome68からのPWAのホーム画面に追加のバナーの画像2.

 

そしてさらに先、今後このインストール用のバナーがどうなるのかというと、最終的な目標としてはURLを表示するアドレスバーの横にインストールボタンを設置するといったコンセプトがあるようです。下は初期コンセプトの画像です。

PWAのインストールボタンがURLのアドレスバーの横にある画像

あくまでもコンセプトではありますが、仮にこのような形までできあがったとすると、一般ユーザーの方々もボタンを押してみて『なにこれ??』ってやってみると思います。だんだん普及して一般的になるのかなと思います。もうPWAも造る側の話題ではなく一般的なものになるのかなと。
今回の発表でPWAに関してこのように進めていく構想があるんだなということがわかりますね。

ところでアプリのストアってどうなるのでしょうね??ここからインストールできるんだよとなれば、ストアの内容に変化がおきそうな気もしますし…TwitterやGoogleマップもPWAに対応しています。どうなるのでしょうね??

マテリアルデザインを参考にホームページをリニューアルしました

マテリアルデザイン

Webデザインのトレンドともいえるマテリアルデザインを参考にPCREPAIRのホームページを新しくしてみました。マテリアルデザインって何?ってところから調べなおして取り入れられる要素としてグラデーションカラーとレイヤーを取り入れて、作ってみました。文字が浮き出ているというか、文字の後ろに画像があるように見えていたらうれしいです。画像だけでなくサイト全体が立体的に見えるように後述させて頂くフローティングアクションボタンの設置も検討したのですが、今のところはつけていません。

マテリアルデザインを参考にグラデーションカラーとレイヤーという要素を取り入れた画像1

マテリアルデザインを参考にグラデーションカラーとレイヤーという要素を取り入れた画像25

マテリアルデザインって何だろう?ということの前に、Webデザインの経緯から入ります。ひと昔前はFlashを使った動画がドーンとでてくるサイトが多かったですね。7年くらい前までですかね?5年くらい前にはほぼ見なくなっていたんですけど。デザインとしてはすごく綺麗でカッコよかったです。こういうサイト作りたいな。作れたらいいなと見ていました。ただ、その頃からスマートフォンがどんどん普及していました。Flashで動画がドーンとでてくるページは、容量が大きくてスマートフォンだと読み込むまでに時間がかかってしまうんですね。その頃まだ3Gのスマートフォンもたくさんありましたし(2012年から4Gが始まりました)、サイトを開くと下のテキストだけ先に読み込んで動画の部分だけクルクルしているというサイトを度々見た記憶があります。

そんなこともあり、セキュリティのこともあり、だんだんとFlashが使われなくなっていきました。

そうすると今度、画像のみのフラット(平面的)で動きのないサイトがたくさん増えました。それが今ですね。

そこにGoogleが推奨し始めたのがマテリアルデザインですね。マテリアルデザインは配色や影やアニメーションを組み合わせて、立体的に魅せインタラクティブな動き表現したデザインですね。インタラクティブというのは双方的ということで、一方的にアニメーションが動作するのではなく、見ている方の操作に合わせて動きが起きるというものです。例として、ボタンをタップしたら他のボタンがいくつも展開するというのがあります。

そんなことを考えながら、こういった要素を取り入れられるだけ取り入れてみました。
記事の初めに書かせて頂いたフローティングアクションボタンの設置も考えました。下の画像がフローティングアクションボタンです。

フローティングアクションボタンの画像

このフローティングアクションボタンを設置することにより、画像だけでなくサイト全体が立体的に見えるなと思い実装しようか考えたのですが、スマホで見た時に邪魔にならないかな・・・とか考えて今のところつけていません。アプリに求めているものとWebサイトに求めているものってまた違うだろうなとか、自分のサイトにフローティングアクションボタンはあった方がいいのかどうかなどを考えて、今のところはつけていません。今後また検討してみます。

⇓今回、マテリアルデザインの参考にしたサイトはこちらです

ユーザビリティに配慮したカラー設計のマテリアルデザインが最近のトレンド?

PWAでホーム画面に追加 Webサイトをアプリとしてインストール

WebサイトをPWAでアプリ化

新しい技術でPWAというものがあります。プログレッシブウェブアプリの略称です。アプリをストアからインストールするのではなくWebサイトをそのままアプリ化させたような技術です。
PCREPAIRはPWAの技術を使いホームページとこのブログをAndroidとiPhoneの両方のスマートフォンにWebアプリとしてインストールできるようにさせて頂いております。
パソコンは普段使えている時は便利ですが、不具合を起こしたときはとても困ります。いざというときに備えてインストールして頂けると幸いです。

Androidの場合

インストール方法の説明をさせて頂きます。
Google Chromeでホームページまたはこのブログを開いて頂き、右上の設定からホーム画面に追加をタップして頂きます。

PWAのサイトをAndroidからホーム画面に追加する方法の説明画像

アプリを追加するか確認の画面がでますので決定でお願い致します。

PWAのWebサイトをAndroidからホーム画面に追加する方法の説明画像2

するとホーム画面にショートカットができるのではなくWebサイトがアプリとしてインストールされます。
Androidの設定からアプリ一覧を開くとPCREPAIRのWebサイトがアプリとしてインストールされているのが確認できます。 “PWAでホーム画面に追加 Webサイトをアプリとしてインストール” の続きを読む

Microsoft edgeがPWA(ServiceWorker)に対応

Microsoft edgeのPWA(ServiceWorker)対応

Webサイトとアプリを融合させるような技術のPWAが話題です。PWAというのはプログレッシブウェブアプリの略称で、大元にServiceWokerという技術が使われています。(ServiceWokerとPWAを分けて説明していきます。)
ServiceWokerはGoogleが先行していてChromeのみ対応しておりましたが、4月にありましたWindows10のApril Update 2018によりMicrosoft edgeもServiceWokerに対応しました。

今回はその確認です。ServiceWokerを組み込んでいるPCREPAIRのホームページとこのブログを使って確認します。

Microsoft edgeがPWA(ServiceWoker)に対応している様子の画像

Microsoft edgeを開いて右上から開発者ツールを開き、デバッカーのタブを開くとServiceWokersと出ております。中を確認するとServiceWokerが登録されていてアクティブな状態であることがわかります。

Microsoft edgeがPWA(ServiceWoker)に対応している様子の画像2

次にキャッシュの確認です。ServiceWokerを使ってオフライン対応させているので、ホームページとブログを開くと同時に、バックグラウンドでキャッシュの設定が処理されるようにしております。開いていないページのキャッシュが組み込まれるので該当するページを開いたときにものすごい速さでページを開いてくれます。(キャッシュから開くのでとても速いです。)

今回、Microsoft edgeのServiceWoker対応を確認しましたが、Google Chrome用に設定したServiceWorkerと中のコードは変えていません。Google Chromeに使用していたServiceWorkerをMicrosoft edgeが受けれいてくれたという感覚です。 “Microsoft edgeがPWA(ServiceWorker)に対応” の続きを読む

PWAでホームページをオフライン対応させました

PWAでオフライン対応

PWA(プログレッシブウェブアプリ)が今後普及するのではないか?と話題です。Windows10のMicrosoftストアからPWAが配信できるという話題や、Safariも対応するのではないかといった話題を見かけます。先駆けてPCREPAIRのホームページをPWAでオフライン対応させました。
GoogleChromeのデベロッパーツールからCache Storageを確認するとその中にあらかじめ設定したページが保存されています。
Consoleもエラーなしです。

PWAでオフライン対応させた後のデベロッパーツールの画像

こうすることにより地域別ページをCache Storageから開いてくれるのでとても速くなりました。(初めのページを開いた時点で、他の地域のページをすべてキャッシュしてくれるようにしてあります。)
さらに、オフラインでもページが表示されます。Networkタブからofflineにチェックをいれてページを更新しても表示されます。

パソコンが壊れた時にサイトが開けない時ってよくあるんですよね。インターネットが接続できなくなってしまった時です。そのような場合でもオフライン対応しておけばサイトが開けるので今後活用できるかなと考えました。

Androidのスマートフォンをお持ちであればGoogle ChromeでPCREPAIRのホームページ開いて頂き、設定からホーム画面に追加して頂くことでアプリのような見ためでサイトを閲覧できます。こちらも一度入れて頂ければ、wi-fiやキャリアの電波がないところでも開けるようになっております。
iPhoneのSafariもPWAに対応してほしいなと考えております。

チラシの誤字について 訂正とお詫び

チラシに誤字がありました

PCREPAIRはチラシやホームページやこのブログ、またはTwitterやFacebookページ・LINE・YouTube・Instagramなどの各種SNSを通じて、千葉県全域の方々を対象にお知らせを配信させて頂いたり、サービスの内容を配信させて頂いたり、実際にサービスをご利用頂いたりしております。そのような方々に様々な形で支えて頂くことでPCREPAIRは成り立っていると考えております。
皆様誠にありがとうございます。

この度チラシの誤字が見つかりました。チラシをご覧頂いた方から直接お伝え頂き、ようやくそこで気づきました。
誤字の内容は

✖危機→〇機器

です。1枚目が誤字があるチラシです。2枚目に修正させて頂きました。

誤字があったチラシの画像

誤字を修正したチラシの画像

誤字は2文字で、内容としても誤字とお分かり頂けるかもしれません。そのような2文字の誤字ではございますが、今回のこのチラシは四街道市、佐倉市、千葉市稲毛区、千葉市若葉区、千葉市花見川区、八千代市八千代台駅周辺といった広い範囲の地域の皆様に配布させて頂いてきましたので、地域全体での間違えの大きさを考えると、お一人お一人にご迷惑をおかけしてしまった分が積み重なっていて大きくなっていると考えております。誠に申し訳ございません。

現在修正したチラシの印刷にとりかかっております。恐縮ではございますが、今後はそのチラシを配布させて頂こうと考えております。さらに今後は写真を変えたり裏面を再度作り直してみたりしようと考えております。

最後に、このブログでのお伝えになってしまっているということについてお詫び申し上げます。
今回の誤字に限らず至らない点が多数あると考えております。今後ともご指導ご鞭撻のほど宜しくお願い致します。