技術 - PWAの記事一覧
PixelCraft - Webベースのドット絵エディタ
どれだけグラフィックスが綺麗になっても今なお人気なのがドット絵です。1ピクセル1ピクセル、色を決めていくことでできあがっていく絵は決して滑らかな線ではないにも関わらず、とても魅力的です。そんなドット絵をWeb上で描けるソフトウェアがPixelCraftになります。## PixelCraftの使い方最初に大きさを決めます...
daily.dev - 多忙な開発者向けニュースサイト
ITの進歩は日進月歩であり、数日キャッチアップが遅れただけで新技術が台頭しているなんてこともあります。いつ何時世界が変わるか分かりませんが、忙しいエンジニアは情報収集している暇もないことでしょう。そこで使ってみたいのがdaily.devです。Google Chrome機能拡張ベースの変わったニュースアプリです。## d...
Ordinary Puzzles - モバイルとWebのどちらでも遊べるパズルゲーム
ちょっと疲れた時、息抜きにゲームはいかがでしょうか。アプリのようにわざわざインストールするのは面倒ですが、Webブラウザで遊べるものならば手軽です。気晴らしになりますし、頭の違う部分を使うことでリフレッシュ効果もあります。今回紹介するOrdinary Puzzlesはルールは簡単、誰でもすぐに遊べるパズルゲームです。#...
MoodTracker - 気分を記録して自分の状態を可視化しよう
自分で自分のことはよく分かっていると思いがちですが、意外と理解していなかったりします。体調はもちろんのこと、精神面においても正しく理解している人など殆どいないのではないでしょうか。知らず知らずのうちに疲れていたり、落ち込んでいたりするものです。今回紹介するMoodTrackerは自分の気分を記録して、状態の変化を監視す...
Simorgh - BBCで利用されているSPAテンプレート
最近はSaaSやIT系企業に限らずオープンソース・ソフトウェアを提供するようになっています。異なるマーケットから出てくるオープンソースは、これまでとは違う分野の方たちに届く可能性があります。オープンソース・ソフトウェアの可用性を広げるためにも大切なことです。今回紹介するのはイギリスの国営放送であるBBCからリリースされ...
Lofimusic.app - Lo-Fiミュージックを聴いてリラックス
新しい曲を高音質で聴くのもいいですが、レコードやラジオなど、それほど音質の高くない環境でゆったりとした曲を聴くのも悪くありません。結局のところ、音楽のよさは人それぞれ、TPOに応じて変わるということでしょう。今回紹介するLofimusic.appは、YouTubeのLo-Fi音楽をラジオ風に聴けるアプリケーションです。...
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はクライアントサイドにキャッシュされ、アクセス時に差分があると更新される仕組みです。しかし、更新はされるのですが、その場では適用されませ...