AWS Amplify の ServiceWorker で Web Push 対応を実装してみる - クライアント編 - Qiita
Web Push、送りたいことありますよね。 この記事は Web Push 通知を使うアプリを AWS Amplify で作ってみる話です。 特にクライアント側を AWS Amplify でどう実装するかを見てみます。 当初サーバー側もあわせて書こうとしたのですが、分量が多くなりそうだったので今回は一旦クライアント編として、サーバー編はまた Amplify の API カテゴリを絡めたものを後日書きます（たぶん）。 Web Push やりたいときにやらなきゃいけないこと Web Push を運用しようとすると、けっこう色々やることがあります。 Push を受け取るクライアント側 Service Worker の実装 購読状態管理、Service Worker 登録等を行うフロントアプリケーションの実装 購読処理時に払い出されるエンドポイントをサーバーサイドに送信 Push を送るサーバー側
How to deal with planned site downtime
accessibility 10 advanced 195 AMP 13 Android 2 API 7 apps 7 autocomplete 2 beginner 173 CAPTCHA 1 Chrome 2 cms 1 crawling and indexing 158 encryption 3 events 51 feedback and communication 83 forums 5 general tips 90 geotargeting 1 Google Assistant 3 Google I/O 3 Google Images 3 Google News 2 hacked sites 12 hangout 2 hreflang 3 https 5 images 12 intermediate 205 interstitials 1 javascript 8 job s
日本の美術館サイトはどうすればもっと良くなるか｜shosira
美術手帖の橋爪さん（直接の面識はないと思う）が、こんな投稿をされていたので、少し筆を取ってみることにした。 【緩募】 アートに興味のあるウェブディレクターやウェブデザイナーの方々、「日本の美術館サイトはどうすればもっと良くなるか」っていう話しません？（そして記事にしたい） — 橋爪勇介｜美術手帖 (@hashizume_y) January 18, 2020 今の美術館を取り巻く状況と、ウェブ業界を取り巻く状況を重ね合わせて考えるとスマートな解決策がすぐには見いだせないのだが、ウェブ制作者サイドの人間として簡単に思うことを取りまとめてみたい。 もはや、何ができていないかよりも、なぜできないのかを論じるべき時期にきているインターネットが一般化して20年以上が経ち、2000年代初頭のように、インターネットってなに？という人はもはや駆逐されつつある。学芸員も司書も手許にはiPhoneがある。美術
Web Developer Roadmap 2020 が公開されたので解説する - Qiita
Web Developer Roadmap 2020 が 1月4日 に公開されました。 Web Developer Roadmapとは たくさん覚えることがあって、何から勉強していいか分からない人向けに 「この技術をこの順番に学習していくと良いよ」 みたいなことを纏めてくれているサイトです。 結論 細かい比較や解説はいずれ誰かがやってくれると思うので 簡潔に知りたいひと向けに解説すると Web Developer Roadmap に則ると、2020年は React Next.js TypeScript そして Web Components を学習するのが良いんじゃないかなと思います。 理由 前年と比較すると追加された項目は Web Components Web Security Knowladge ぐらいで、 その他は、元々ロードマップに含まれていたが、非推奨になったものが多かった印象です
いいからBlazorをさわるんだ - Qiita
はじめに Blazorのプロジェクトの作り方やPWA(プログレッシブWebアプリケーション)化について、今年の秋辺りにいろいろやっていたのでまとめます。 この記事はC#+WPFチューニング戦記 の最近の一部記事から多少情報を刷新したものです。 皆さんにBlazorをおすすめしている理由 ブラウザのプラグイン等を一切使わないSPA(シングルページアプリケーション)のメリットをそのままに、JavaScriptを1行も書かずにC#+HTMLでブラウザアプリケーションが作れるというのは、非常に良いと思いました。 PWA化するとC#のアプリケーションでありながら、C#のための.NET Framework/.NET Coreやアプリケーション自体のインストールすら不要です(PWA化するときは1行だけJavaScriptを書きますが、コピペです)。 Blazorの紹介 BlazorとはMicrosoft
CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点
iPhoneやAndroidでもダークテーマが採用され、ダークモードに対応するWebサイトやスマホアプリが増えてきました。 ほんの数行のCSSのみでダークモードに対応する方法と注意点を紹介します。 Dark mode in a website with CSS by Tom Brow 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのみで対応するWebサイトのダークモード ダークテーマでお勧めのテキストと背景のカラー ダークテーマではカラーの彩度は下げる ダークモードについてさらなる情報 CSSのみで対応するWebサイトのダークモード まずは、私のサイトhttps://tombrow.com/を見てみてください、ダークモードとライトモードがあります。表示されるモードはデバイスの設定に従います。 https://tombro
Tips Note by TAM ｜ TAM のテクニカルチームがお届けする WEB技術ブログ！
コーディングスタイルに一貫性をもたせことは重要であると広く認識されています。 プロジェクト全体でEnumの使用を禁止する 関数内でのthisを禁止する インデントにはスペースを使う セミコロンは必要でない場合省略する 上…
rust.tokyo のまとめ・感想 - mizchi's blog
このブログを書いてる経緯 rust.tokyo 楽しみ！絶対行く！といってたのに申込みを忘れたところ、じゃあスタッフとしてブログを書けという話になったので、ブロガー枠？らしく感想を書きます。とはいえ書けるのは見たやつだけです。 https://rust.tokyo/sessions# 前提 自分は低レベルプログラミングは詳しくないです。年に3日ぐらい思い出したように Rust 勉強することがある。 wasm 周りのエコシステムはずっと追ってる。 会場の雰囲気 組み込み勢とブロックチェーン勢が多そうな気配を感じた。 Visualization of mechanical CAD drawings using WebAssembly and WebGL Aki / CADDi (発表資料見つからず) 概要 Computer aided design (CAD) models used in m
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 PWAをテーマにしたコミュニティ「PWA Night」を運営する菅家大地さんが、既存のWebアプリをPWA化する簡単な実装方法を解説します。 はじめまして、菅家（@kan_dai）といいます。普段は株式会社TAMという会社でフロントエンドをメインに、クライアントのWebサイト制作やWebサービスの開発をしています。PWA（Progressive Web Apps）をテーマにしたコミュニティ「PWA Night」の運営もしています。 さて、2018年ごろからPWAという言葉を聞く機会が多くなってきました。2019年現在、毎月コンスタントにPWAに関する仕事の相談を受けるようになっており、PWAへの関心の高まりを感じます。日本経済新聞やスマートフォン版Yahoo! Japanといった有名サービスでの
強烈なインパクト: オーストラリアのポップカルチャー サイト GOAT を AMP 化した理由
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
いま知っておきたいLinux─WebアプリがOSのプロセスとしてどのように見えるか？ を運用に生かす｜ハイクラス転職・求人情報サイト AMBI（アンビ）
いま知っておきたいLinux─WebアプリがOSのプロセスとしてどのように見えるか？ を運用に生かす Webアプリを動かして負荷をかけると、OSのプロセスという観点ではどのように見えるのでしょう？ それを通して運用やトラブルシューティングではどういったことが分かるのでしょう？ Linuxカーネルの開発者でもある武内覚（sat）さんによる解説です。 こんにちは、sat（@satoru_takeuchi）と申します。 コンピュータが誕生してから現在まで、最終的にエンドユーザが意識するアプリケーション開発はどんどん楽になっています。先人たちのたゆまぬ努力の結果、アプリ開発者はOSや、そのさらに下にあるハードウェアのことをほとんど意識することなく開発ができるようになりました。 しかし、「作ったアプリが、OSレベルでどのように動いているか？」が今一つピンと来なくて、モヤモヤしていないでしょうか。それ
A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update)
By Jacek Schae Also available in: Turkish — thanks to @erdenizZz, Portugues — thanks to @felipefialho For the third time, we are comparing Front-End frameworks by using the Real World example apps. RealWorld example app gives us: RealWorld App Something more than a “todo”. Usually “todos” don’t convey enough knowledge and perspective to actually build real applications. Standardized A project that
2019年9月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Figma XD→Figmaに変えた理由とその運営方法やメリットについて｜駒ヶ嶺 亮一｜note 今月はXDやSketchからFigmaへの乗り換えの記事が多かった気がします。 共有用と開発用のURLを生成・更新する必要がなく、共有用のURLは即自に共有できる というのはXDと比較したメリットですね。 デザインツール「Figma」を5名のデザインチームに導入して半年経った振り返りとビジネスメリットについて｜rinoside｜note こちらはSketchからFigmaへの乗り換え。Sketchだと周辺ツールの月額費用がかかりますが、それが込みになっているのは大きそうですね。 Figma FAQ 、 よ
【図解】グーグルのリンク評価20の原則【2019年版】（前編#1～#10） | Moz - SEOとインバウンドマーケティングの実践情報
22年前、グーグルの創業者らがPageRank（ペイジランク）を発明し、それ以降のウェブが変わった。既存のランキングアルゴリズムと比べてPageRankが大きく違っていたのは、次の点だ： ウェブ上のリンクを票と見なす。最初の段階では、票はすべて平等だ。 得票数が多いページほど重要度が増す（そして、より上位に表示される）。 重要なページほど票の重要度が増す。 しかしグーグルは、そこで止まらなかった。さらに、 アンカーテキストトピックモデリングコンテンツ分析トラスト（信頼）シグナルユーザーエンゲージメントなど、検索結果をよりいっそう改善する要素を取り入れたのだ。 リンクはもはや平等ではない。いや、平等とはほど遠い。 ランド・フィッシュキンがこの記事のオリジナルバージョンを公開したのは、2010年だ。はっきり言って、それはSEOの世界を震撼させた。ここでは、彼のオリジナル記事から非常に多くの部分
Webサイトをダークモードに対応させよう
2020年10月16日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ ↑私が10年以上利用している会計ソフト！ とにかく夜間見えづらい！ 私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわ
スプレッドシートをWeb開発の万能ツールに変えるおすすめサービス厳選まとめ！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Googleが提供しているスプレッドシートを表計算ではなく、Web開発の即戦力になる万能ツールへと変えてしまうサービスを厳選してご紹介しようと思います。 スプレッドシートのデータを活用して、Webコンテンツを作成したりデータベースとして活用するなどさまざまな開発手法に応用できるので、ご興味ある方はぜひ参考にしてみてください！ ■スプレッドシートのデータを即座にAPIで提供する！ 【 SwiftSheet 】 SwiftSheetはExcelやスプレッドシートなどで管理しているデータを、即座にRESTful APIとしてホスティングしてくれるのが大きな特徴です。 CSVで保存したファイルをアップロードするだけという簡単な操作のため、ユーザー登録や課金などは一切不要です。 たとえば、お店のリストをスプレッドシートで管理しているとします。 こ
WWDC19 速報レポート最終 5 日目Safari と WebKit の進化、iPadOS、Sign in with Apple ほかFrontend Engineer の視点＋総括編 - DeNA Design
WWDC19 速報レポート最終 5 日目 Safari と WebKit の進化、iPadOS、Sign in with Apple ほか Frontend Engineer の視点＋総括編#WWDC 意外に面白いというかキャッチアップすることがあるなと思った Frontend Engineer（Web Developer）編をお届けします。元々 WWDC はウェブフロントエンドやサーバーサイド・インフラ周りのセッションはあまりなく、やはり iOS/macOS Developer か UI Designer 向けのイベントと言えますが、フロントエンドエンジニアにシェアしたい内容もかなりありました。 そして本文末では総括＜ Engineer Manager 編＞を簡単に行いました。 〇〇の視点になって考えてみた WWDC の速報レポートシリーズ 5 日目は＜ Frontend Enginee
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Packaging BoF
Azure web app is good
竹取物語