技術 - PWAの記事一覧
Progressive Web Maps - オフラインでも使えるPWAの地図アプリ
PWA（Progressive Web Apps）が広まることで、スマートフォンアプリとWebアプリの垣根がなくなってきています。タスク管理や電卓のような簡易的なアプリケーションはもちろん、IDEのような大型なWebアプリケーションもPWA対応してきています。今回紹介するProgressive Web Mapsは地図ア...
CostBox - PWA対応のシンプルな支出管理
お金を管理する際の基本は、支出を把握することです。節約しているつもりではあっても、記録しないと意味がありません。記録することで可視化し、状態を把握できます。その次に改善するフェーズがあります。今回紹介するCostBoxは支出を記録するのに特化したアプリケーションになります。## CostBoxの使い方メイン画面です。!
PWA install - PWAインストール体験を向上させる
PWA（Progressive Web Apps）ではWebアプリケーションをローカルアプリのようにインストールできます。しかし、ユーザとしてはインストールするメリットが見えないとインストールしてくれないでしょう。そこで使ってみたいのがPWA installです。ユーザがインストールしたくなるように促せるウィザードライ...
Ocula - PWA製のお天気アプリ
天気はごくごく基本的な情報になります。スマートフォン、スマートウォッチなどにおいても天気アプリは必ず入っているものです。今日の天気、明日の天気は誰しもが気になるものでしょう。OculaはPWA（Progressive Web Apps）で作られた天気アプリになります。PWAを学ぶ上でも役立ちそうです。## Oculaの...
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなけれ...
ForrestJS - ReactでSSR対応のPWAを開発
PWAはオフラインでも動作することが求められるので、クライアントサイドで表示内容を制御します。その結果、サーバサイドレンダリングは弱い傾向にあります。最近ではGoogleのクローラーがPWAでも動作するようになっていますが、サーバサイドレンダリングが不要な訳ではありません。そこで注目したいのがサーバサイドレンダリングを...
DeckDeckGo - リモートコントロールもできるPWAのHTMLスライド
HTMLによるスライドは人気があります。Webブラウザだけで再生できるのでプラットフォームに依りませんし、最近ではPresentation APIもGoogle Chromeに搭載され、発表者ノートも使えるようになっています。今回はPWAとして作られたスライドアプリ、DeckDeckGoを紹介します。## DeckDe...
Kanban Board PWA - PWAのカンバンシステム
カンバンはタスクだけに限らず、情報をステータスに沿って管理するのに役立ちます。多くの場合、そのデータをサーバサイドに保存しますが、ちょっとしたものであればクライアントでも問題ないでしょう。今回紹介するKanban Board PWAはカンバンシステムをPWAにした、そんなソフトウェアです。## Kanban Board...
Sol Journal - シンプルなジャーナルアプリ
日記を書いていますか。ブログで代行もできますが、日記は誰かに公開するものではなく、個人的なものです。秘密の内容を書くこともできれば、単に徒然なるままに書き連ねることもできます。記録しておくことで、後で振り替えれるようになります。今回紹介するSol JournalはWebベースの日記帳（ジャーナルアプリ）です。PWAにも...
a2hs.js - iOSでもAdd to Home Screen
PWAに注目が集まっていますが、Androidに比べてiOSの対応は今なお微妙です。アプリケーションのようにインストールできるのですが、その手順も分かりづらく、インストールを促すバナーも出せません。これではiOS向けにはなかなか普及しないでしょう。それを若干でも改善できるのがa2hs.jsです。iOS向けにユーザビリテ...
bento-starter - PWAを学ぶ、実装するのに参考にしたいスターターキット
PWA（Progressive Web Apps）というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのに...
PWABuilder - PWAを開発する際のお供に
PWA（Progressive Web Apps）に注目が集まっています。ネイティブアプリにしかできないことはたくさんありますが、Webアプリケーションでも十分という領域はどんどん増えています。そんな中、iOSも対応範囲を増やしており、実用レベルになってきています。PWAを作っている方はPWABuilderを使ってどれ...
PWA Starter Kit - PWAを学ぶためのテンプレート
PWA（Progressive Web Apps）というキーワードがトレンドになっています。しかしPWAは特定の技術を指すのではなく、Webでの体験をよりネイティブ並に向上させるという概念でしかありません。そのため何から取り組んだら良いかが分かりづらいです。そこで勉強のベースに使ってみたいのがPWA Starter K...
PWA Update Available - Service Workerの更新通知
PWAを適用することで、WebアプリケーションでネイティブアプリのようなUI/UXを実現できます。その一つとしてService Workerが挙げられます。Service Workerはクライアントサイドにキャッシュされ、アクセス時に差分があると更新される仕組みです。しかし、更新はされるのですが、その場では適用されませ...
Squoosh - 高性能な画像圧縮Webアプリケーション
デジカメやスマートフォンのカメラが性能向上するのに合わせて画像のサイズがどんどん大きくなっています。その結果、バックアップや写真の表示でネットワーク帯域を消費することになってしまいます。これは今後どんどん問題が大きくなっていくでしょう。Appleでは新しい画像フォーマットHEICを作りました。対してGoogleはSqu...
Qiita-Trend-PWA - QiitaトレンドをPWA化
PWA（Progressive Web App）というキーワードに注目が集まっています。Webアプリケーションのパフォーマンスを向上させたり、スマートフォンアプリで実装されているような機能を実現するための仕組みです。今回はそんなPWAの例としてQiita-Trend-PWAを紹介します。名前の通り、Qiitaのトレンド...
Book Management PWA Onsen UI Vue
新しい技術を習得したいと思ったら、実際に手を動かして何かを作ってみるのがオススメです。手を動かした経験は誰にも奪われず、自分の知識になります。また、手を動かすことで問題点やハマりどころも理解でき、実際に利用する際に応用できます。今回はPWA（Progressive Web App）を体感するためのアプリケーション、Bo...
PWACompat - PWAに対応しない古いブラウザでもWeb App Manifestに対応させる
PWAの一要素としてWeb App Manifestがあります。JSONファイルを用意しておくことで、Webアプリをローカルアプリケーションかのように保存できます。この時、アイコンやスプラッシュスクリーンも大事な要素です。古いブラウザでは対応していないPWAについて、PWACompatが対応させてくれます。## PWA...
next-editor - WebブラウザベースのGitエディタ
開発者にとって、Gitの存在は欠かせなくなっています。開発に限らず、操作の履歴をとっておきたいと思うことはよくあります。そうした時にGitを使うことで手軽にバックアップを取ったり、GitHubと連携させることもできるようになります。今回紹介するnext-editorはWebブラウザ上で動作するGitブラウザ/エディタで...
Annict Mimi - PWAなAnnictコメントビューワー
PWA（Progressive Web App）というキーワードが流行です。特定の技術を指すわけではなく、スマートフォンとWebのあり方のベストプラクティスという位置づけです。そのため若干分かりづらく、理解するためには自分で実際に手を動かすのが良いようです。今回はそんなPWAをAnnicと連携させたAnnict Mim...