nebosのブックマーク / 2018年8月28日

Debugging Service Workers

プログレッシブウェブアプリ: オフラインコレクションでコンテンツを整理必要に応じて、コンテンツの保存と分類を行います。 1. ようこそこのラボでは、既存のウェブアプリケーションをオフラインで使用できるようにします。これは、プログレッシブウェブアプリワークショップの一連のコンパニオン Codelab の最初です。このシリーズにはさらに 7 つの Codelab があります。学習内容 Service Worker を手動で作成する既存のウェブアプリケーションに Service Worker を追加する Service Worker と Cache Storage API を使用してリソースをオフラインで使用できるようにする必要な予備知識簡易 HTML と JavaScript 必要なもの Service Worker をサポートするブラウザ 2. 準備まず、この Co

nebos 2018/08/28

PWA。作り方の詳しい解説。

リンク

PWAをもっと簡単に初めてみる - Qiita

はじめに PWAって知っていますか？（自分は最近知りました👱）では、実際に使ったことがある、あるいは触ってみたことがある方はどのくらいいらっしゃるでしょうか。色々なPWAの初学者用の記事を見たのですが、どれも丁寧に書かれていてとりあえず使ってみたい私にとっては難しいとかんじてしましまいました…😵 そんな自分のような方向けに、もっと簡単にPWAを初めてみようという主旨で書きました！今回は、自分が最近触っているvue.jsを利用して組み合わせてみました。 PWAとはそもそもPWAとはなんでしょうか？ PWA（Progressive Web Apps）はグーグルがモバイルユーザーのユーザー体験向上を目的とし、今までのWebアプリ（サービス）にWebとアプリの両方の利点を兼ね備えた仕組みのことです。 Googleが取り組むWebのアプリ化プロジェクト「PWA」とは？- WPJ この記事

nebos 2018/08/28

動くものを作ってみる。PWAはhttpsでないと動作しない！

リンク

ウェブサイトがアプリ化！PWAの特徴と対応サイト事例 - あなたのスイッチを押すブログ

ウェブサイトをネイティブアプリのような感覚で使える技術が注目を集めています。「PWA（プログレッシブウェブアプリ）」と呼ぶんですけど、使ったことありますか？このPWAに対応したサイトでは、ページを表示する速度が劇的に早かったり、アプリのようなヌルヌルっとした使い心地で利用できたりと、ユーザーにとってメリットが多いのです。 PWAとネイティブアプリの動作比較ムービーです。左がPWAで、右がネイティブアプリ。PWAの方は、インストールに掛かる時間も少なく、実際の使用感もネイティブアプリと遜色ないことがわかります。海外のサイトを始め、日本でも徐々に対応サイトが増えてきている昨今ですので、今後の発展が目覚ましい分野とも言えます。では実際にPWAに対応したサイトは、ユーザーにどう映るのか。どういうメリットがあるのか。体感していただきましょう。 PWA対応サイトの使い方 PWA対応サイトをiPh

nebos 2018/08/28

ウェブサイトをネイティブアプリのような感覚で使える技術

リンク

エラーメッセージはフォームのどこに表示するべきか

UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。フォームのどこにエラーメッセージを配置していますか？　ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。フォームの上か、フィールドのインラインかエラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？調査に

nebos 2018/08/28

“フィールドの右も下も、エラーメッセージの位置として最適”という、とある調査による結果

UX
UI

リンク

ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。｜榊原昌彦

ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。このツイートをしたところ、大きな反響をいただきまして、かるく解説記事を書いておきます。どういうサービスなの？オンラインでネットショッピングをつくることができる有名サービス「Shopify」のはじめたロゴ自動生成サービスです。13のビジネス分野、18のデザイン属性から自分にあったものを選択し、ロゴに入れる文字をタイプするだけでロゴを自動生成することができます。また、生成したロゴのフォント、色、アイコン、レイアウトの調整も可能ですので、自動生成といいながらほぼあなただけのロゴを自動生成することができます。使い方ログイン不要です。https://hatchful.shopify.com/ にアクセスして、右上の「GET STARTED」