You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - Tokyo-Metro-Gov/covid19: 東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
『アメブロのAMPを終了します』
アメーバスタッフブログでも記載させていただいた通り、11/15より順次アメブロのAMP対応を終了させることになりました。 なぜAMPをやめるのか？2016年の3月にアメブロはAMP対応をスタートさせていました。 （当時のブログ記事はこちら） そこから5年以上AMPを採用し、モバイルの検索結果からはAMPキャッシュに飛ぶようになっていました。 Googleの検索結果からはGoogleのキャッシュに移動するわけで、当然体感速度としては良好なものであったと思います。 「それなのになぜやめるのか？」 ですが、基本的にはビジネス的な問題となります。 ウェブ界の状況、社会状況等々によっての総合的な判断ということになります。 検索結果がクリックされた際にGoogleのキャッシュが表示されるという点では、CDNのコスト削減等はあるのですが、それでもやはりトータルで考えたときに今回はAMPを終了させるという
こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon Helpfeel Advent Calendar 2022の5日目の記事です 昨日はHelpfeelエンジニアのyado.iconさんでした 採用面接中にチャーハン・ピラフ判定器とスタバ警察botで盛り上がる会社に入った | 株式会社Helpfeel ヨコハマハウスフラペチーノがエンジニア採用の役にたった？みたいで良かったです <a>タグの挙動を工夫する事で、Scrapboxからみたいなボタンをなくしました 更新ボタンの役割は2つ 更新がある事を教える 押すとアプリが更新される Scrapboxも昔こういうメニューがあった 今はもう無い では解説ですshokai.icon SPAのタブ永遠に開きっぱなし問題とは？ SPAとstaticなwebサイトの違い static
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といった有名サービスでの
kato @kuromitsu_ka なんでwebで済ませられる尚且つ頻繁にログインしなさそうなサービスまで、アプリにしたがるんだろうなぁ。チケットサービスとかさ。オフラインでの現地操作も特に無い様なやつとかさ。アプリは、webよかハードのリソース少ないとはいえ、開発もあるし運用もタダやないし。運営側にメリットあるんかな。 2023-10-04 00:44:17 kato @kuromitsu_ka 例えばさ、スーパーのアプリなんかスマホに必要なんか？イオングループみたいな大企業で、アプリ内に〇〇payやってない限りアプリやなくて良くない？チラシの通知も、LINEでいいじゃんか。やるにしてもPWAとか、webのショートカットをホーム画面に残す手順をサイトか店頭に掲示したらいいじゃんよ…。 2023-10-04 14:19:49
Angular と Firebase で月間 3.5億PV になった PWA の収益性改善とコストカット - Qiita
と、振り返ってみると毎年綺麗に 300% 成長でこれていますね。 （流石に来年はきついと思います＾＾； 今回は、そんな サービスを拡大する上で欠かせない収益の話 と 成長したからこそ表面化したコストの話 をまとめていきたいと思います。 収益の話 参照：https://jp.freepik.com PWA は稼げない 昨年の Advent Calendar にて、私はたいそう嘆いておりました（ＴДＴ） Web 側の広告は MPA（マルチページアプリ）を前提にしているものがほとんど Web 側では広告の表示を最適化できない（MPA 前提の規約上バックグラウンドで読み込んでおけない それに加えて、SPA のページ遷移が早すぎて広告が表示される前に通過してしまう アプリ側にはインタースティシャル広告やリワード広告といった単価の高い広告商材が豊富に存在する そういった要因から、PWA におけるページ
AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る- builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
こんにちは、JAWS-UG 浜松支部の松井です。 普段からモノリシックな環境やそれに準じる環境での Web アプリケーションの開発、保守に取り組んでいますが、継続的にサービスを運用していく上では様々な悩みが尽きません。 OS のバージョンアップ、セキュリティパッチはどうするか ? 言語やミドルウェアのバージョンはどうするか ? ステージング、本番等の環境のデプロイはどうするか ? コスト最適化はどうするか ? etc・・・ そこで、サーバーレスアーキテクチャを採用することにより、こう言ったホストマシンやネットワークの管理に起因する悩みを軽減することができます。 とはいえ、いきなりサーバーレスに着手するとしても、 本当にちゃんと動くのか ? 設計、構築が難しいのではないか ? コストはどのくらいかかるのか ? まずどこから手をつければ良いのか ? と言った疑問があると思います。 今回はそう言
ブラウザのタブやブックマークに表示される「Favicon(ファビコン)」は、ウェブサイトを印象づける重要な要素です。そんなファビコンを作成しウェブサイトに表示させる最新の方法について、フロントエンドエンジニアのAndrey Sitnik氏が解説しています。 How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs ファビコンは2000年代初頭に生まれたコンセプトで、インターネットに公開するウェブサイトはファビコンを備えているべきだとSitnik氏は主張。しかし、ウェブサイト
まもなくやってくる Vue.js 3
Amazon Aurora Serverless v2が意外と高かった話と、�AWS Database Migration Serviceの話
ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか
フロントエンドのデベロッパーが2021年に向けて何に注目すべきかを紹介します。 特に上級職や転職など、ステップアップを目指す人は要チェックです！ 10 Things Front-End Developers Should Learn in 2021 by Simon Holdorf 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フレームワーク 2. 静的サイトジェネレーター（SSG） 3. JAMstack 4. プログレッシブウェブアプリ（PWA） 5. GraphQL 6. コードエディタ/IDE 7. テスト環境 8. クリーンなコード 9. Git 10. ソフトスキル 終わりに はじめに 2021年は、フロントエンドの開発がテクノロジー業界で最もホットなトレンドの1つになることは間違いないでしょう。フ
これをどう作ったかの解説。 PWA まず、上のスクリーンショットのアイコンはSafariの「ホーム画面に追加」で作られたものである。タップするとフレームなしのブラウザが立ち上がって、xsystem4（ゲームエンジン）のWebAssembly版が起動する。xsystem4のWebAssembly移植についてはこちらの記事に書いた。 この種のWebアプリはプログレッシブウェブアプリ (PWA)と呼ばれる。最近さっくり廃止されかかったりして、いつまで使えるかは少し心配でもあるが…。 iOS / iPadOS SafariにおけるPWA SafariのPWA対応は他プラットフォームのChromium系ブラウザと大きく違っている点が一つあって、SafariとインストールされたPWAはストレージを共有しない。つまり、例えばSafariでログインしたユーザーがホーム画面にサイトをインストールしてそちらを
iOSDC Japan 2020 Day2 Proposal: https://fortee.jp/iosdc-japan-2020/proposal/d996c43a-834b-4bfe-b15a-67457725da02
マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ
マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ マイクロソフトは1月14日（日本時間1月15日未明）にオンラインインベント「.NET Conf Focus on Blazor」を開催、同社が開発中のWebアプリケーションフレームワーク「Blazor」の最新動向と今後について明らかにしました。 Blazorは、C#と.NET Coreを用いてWebアプリケーションの開発を可能にするフレームワークです。JavaScriptを用いず、C#によるプログラミングでSPA（Single Page Application）のWebアプリケーションを開発できるため、.NETの知識や経験をWebアプリケーションに活かせると同時に、Visual StudioなどC#に対応した豊富な開発ツールによる開発生産性の向上を期待できるとい
How to watch NASA's first Boeing Starliner crewed flight launch today (scrubbed)
Today marks the release of iOS and iPadOS 16.4 beta 1, and with it comes support for Web Push and other features for Home Screen web apps. Today also brings the first beta of Safari 16.4. It’s a huge release, packed with over 135 features in WebKit — including RegExp lookbehind assertions, Import Maps, OffscreenCanvas, Media Queries Range Syntax, @property, font-size-adjust, Declarative Shadow DOM
Appleは長年にわたり、ウェブサイトをiPhoneのホーム画面に追加することでウェブアプリとして使用できる「プログレッシブウェブアプリ」(PWA)と呼ばれる機能を導入していました。しかし、iOS 17.4のベータ版において、PWAのサポートが削除されていることが報告されています。 Did Apple just break Web Apps in iOS 17.4 Beta (EU)? - Open Web Advocacy https://open-web-advocacy.org/blog/did-apple-just-break-web-apps-in-ios17.4-beta-eu/ iOS 17.4 seems to remove web app support in the EU https://9to5mac.com/2024/02/08/ios-17-4-web-app-e
Electronライクな新フレームワーク「Gluon」登場。Chromium内蔵せずWebブラウザを利用、Node.jsだけでなくDenoとBunにも対応
デスクトップアプリケーションの開発を、JavaScriptなどのWebテクノロジーで可能にするフレームワークとして知られるのがElectronフレームワークです。 このElectronのようなフレームワークが新たに登場しました。「Gluon」です。 Electronがアプリケーション基盤としてNode.jsとChromiumをバンドルするのに対して、GluonはOSにインストールされているWebブラウザを用いるのが大きな特長です。 Google ChromeのようなChromiumベースのWebブラウザだけでなく、Firefoxにも対応作業が進められており、最新のバージョン0.11ではFirefoxでの安定度が向上しました。 Node.jsをバンドルする点はElectronと同じですが、Node.jsの代わりにDenoやBunを利用することにも実験的に対応しています。 Gluonは主にCh
フロントエンドエキスパートチームが選ぶ web.dev Live2020 オススメセッション - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームです。 フロントエンドエキスパートチームでは、フロントエンドに関する情報共有会を社内向けに行っています。 2017年から2020年までに10回開催しており、「Web ページのパフォーマンス」、「React の今とこれから」、「Google I/O セッションまとめ」などフロントエンドに関する情報を社内に共有してきました。 今回行ったのは、2020年6月30日から7月2日にかけて3日間オンラインで開催された web.dev Live2020 のセッションについての情報共有です。各セッションはYouTubeにて視聴できます。 今回は各チームメンバーが視聴したセッションの中から、それぞれ2つのセッションを選んで内容と感想を紹介します。 まだ web.dev Live2020 を見ていない方が興味を持つきっかけになれば幸いです。 BaHoのオススメ Ba
PWAの今とこれから、iOSでの対応状況 / PWA now and in the future, status of support on iOS
ネイティブアプリと同様の機能をウェブアプリに追加できる技術、それがProgressive Web Apps (PWA)です。iOSでも近年、徐々にPWAの機能が追加されています。これらの流れは、ユーザービリティに重きを置く昨今の潮流に即しているように感じます。 この発表では、PWAの現状とその可能性についてお話しします。 - PWAとは？ - PWAの歴史 - PWAを特徴づける機能（オフライン、ホーム画面に追加、プッシュ通知 、Progressive Enhancement） - iOSにおける対応状況 - PWAの成果事例 - PWAのこれから - PWA活用のフローチャート 弊社のAmbient Weavingのサイトはこちら https://ambientweaving.lab.zozo.jp/
はじめに 2023年3月末にiOS 16.4がリリースされたことで、ついにすべてのモダンブラウザユーザーに対してWeb Pushを送れるようになりました。 本記事は、筆者が個人開発しているWebサービスでWeb Push機能を実装したときに調べたことや行ったことをメモとして残すものです。Web Push機能の実装を検討されている方の参考になりましたら幸いです。 なお、筆者は外部サービスへの依存をなるべく減らしたかったため、FCMなどのプッシュ通知機能を提供してくれるものはなるべく使わずに実装したのですが、大変だったので基本的には素直にSaaS等を使った方がよいと思います。 注意事項として、筆者はバックエンドに専門性がありません。そのため、何か間違った記述があるかもしれません。特に暗号化周りは理解が甘い点があると思います。もし誤りを発見された場合は優しめに教えていただけると助かります。よろし
Nuxt.js × GAS Execution API で同人頒布会向け予約システムをごにょごにょする PWA を作る - Qiita
はじめに 「GASでQRコードを使った同人頒布会向け予約システムを作った話」の続きです。 半年ほど前、日本最大級のアナログゲーム頒布会である「ゲームマーケット2018春」で、上記の予約システムを実際に運用してみたところ、 （こちらからの声かけ後を含め）QRコードを提示してくれたのは6割弱 0.5割くらいの人がガラケーないしキャリアメールのため、QRコード自体を受信できていない という問題にぶち当たりました。 QR コードが提示されなかった場合、スマホの Google スプレッドシートアプリから予約番号 or 名前を検索していましたが、いまいち操作性がよろしくない1。 というわけで、いっそスプレッドシートを外部 API 化して、スマホアプリから予約情報の検索＆購入確定できるようにして、なんならアプリに QR コード読み取り機能も埋め込んじゃおう、というのが今回の趣旨です。 PWA (Prog
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン76.0.3809.87がリリースされました。Chrome 76のベータ版で確認されていた通り、デフォルトで全てのFlashをブロックするようになったほか、PWA関連機能が強化されています。 New in Chrome 76 | Web | Google Developers https://developers.google.com/web/updates/2019/07/nic76 New in Chrome 76: Better install experiences for PWAs, dark mode, and more! - YouTube ◆Flashがデフォルトでブロックされるように Chrome 75までは、ウェブページがFlashを利用しようとした際に下記のような確認ダイアログが出現してい
2024年2月の頭頃から、AppleがiOS 17.4のベータ版で「プログレッシブウェブアプリ(PWA)」のサポートを廃止していることが明らかになっています。AppleはPWAのサポート廃止について、欧州連合(EU)のデジタル市場法に準拠するためと説明していたのですが、多くの批判にさらされた末、サポート廃止を撤回すると発表するに至りました。 iOS 17.4 won't remove Home Screen web apps in the EU after all - 9to5Mac https://9to5mac.com/2024/03/01/apple-home-screen-web-apps-ios-17-eu/ iPhoneは長らくPWAをサポートしており、これによりモバイルアプリと同じようにウェブ上のアプリをホーム画面に追加して利用することができるようになっています。iOSでのP
Vue.jsで作ったゲームをインストール可能（PWA）にしてGitHub Pagesで公開してみた | DevelopersIO
<script nonce="xxxxx" id="initial-data" type="text/plain" data-json="${preloadedState}" ></script> このpreloadedStateはエスケープ処理が必要なので注意してください。 クライアント側の読み込み方 const initialData = JSON.parse( document.getElementById("initial-data")!.getAttribute("data-json")!, ); const { store } = configureStore(initialData); https://github.com/hiroppy/ssr-sample/blob/master/src/client/index.tsx#L21-L22 useEffect SSR では、
誰でもPWAやWebアプリを作り放題のNoCodeサービス「Adalo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単にPWAやWebアプリをビジュアルエディタで開発できるWebサービスをご紹介します！ 「Adalo」は、最近人気が高まっているプログラミング不要のNoCodeサービスの一種ですが、なかでも直感的に操作ができて理解しやすいシンプルな設計なのが特徴です。 これまでアプリ開発を諦めていた人やオリジナルアプリの開発に興味ある方はぜひ参考にしてみてください！ 【 Adalo 】 ■「Adalo」の使い方 それでは「Adalo」の基本的な使い方から見ていきましょう！ まずはサイトにアクセスして【SIGN UP】ボタンから無料のユーザー登録を済ませておきます。 メールアドレス・パスワード・ユーザー名を入力すれば完了です。 すると開発したい種類を聞かれるので、今回は「Native Mobile App」（スマホアプリ）を選択してみましょう。
マッチングアプリ強者を体験できる PWA 開発で、Web プッシュ通知を理解しよう - Qiita
どうも、親からもらったお年玉でマッチングアプリを始めるも、いいね 0 件のまま 3 ヶ月で退会した@sadnessOjisan です。 今日はタイトルの通り、マッチングアプリ強者を体験できる PWA を開発します。具体的には、いいね 通知がたくさん届くアプリを開発します。なおこのアプリは「通知止まらん www」を体験できるアプリを作ったの影響を深く受けました。ただし、これから作る push 通知体験アプリでは、通知の疑似体験ではなく本当に通知が届きます シンプルにプッシュを送るだけのコード: https://github.com/sadnessOjisan/simple-push マッチングアプリ っぽいUIがついたコード: https://github.com/sadnessOjisan/simple-push-ui 書いた動機 この記事では Firebase を使った web push
この記事は、文化祭実行委員会に所属する[1]現高校 3 年生 3 人で文化祭の入退場混雑管理システム「CAPPUCCINO」を 2 年間に渡り開発し、実際に運用した記録を残したものです。 ＊この記事は以下の 3 名による共同執筆です 著者・開発者: すばる (@su8ru / Twitter:@su8ru_) 高校３年生。普段は TypeScript に使われながらウェブフロントエンド技術で遊んでいます。 たけ (@takeno_hito / Twitter:@Takeno_hito) こうこうさんねんせい。コーディングよりはゲームのほうが好きです。上下二人に揉まれながらも一応リーダーをやってました。 ふわわあ (@fuwa2003 / Twitter:@ibuki2003) 高3。Vimmer。半言い出しっぺなのに後半コード書いてないとかで最近は肩身が狭い思いをしています。 1. CAP
PWA(Progressive Web Apps)対応サイトの作り方・実装方法まとめ・入門 － AWS上で学習したPWA導入例とLighthouse Report Viewerの使い方 - NRIネットコムBlog
小西秀和です。 現在、AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 概要編などAWSのサーバーレスな静的ウェブサイトホスティングをテーマにしたブログ記事を執筆しています。 今回もAWSは関係しますが、フロントエンドに近い話題で、最近動向が本格的になってきたと感じているPWA(Progressive Web Apps)について私が自主的に学習した内容を記事にしてみました。 私の場合はAmazon S3、Amazon CloudFront、AWS Certificate Manager、Amazon Route53を使用した静的ウェブサイトに最小限のコンテンツをデプロイしてPWAの実装について学習しました。 また、Lighthouse Report ViewerというPWAなどの品質テストができるツールを使用して、PWAの基準に合格し、Pe
Chrome(Canary) の Native File System API で ローカルファイルの読み書きをする - mizchi's blog
ContentsWeb Inspector ExtensionsContainer QueriesWeb Push for macOSSubgridFlexbox InspectorAccessibility ImprovementsAnimation ImprovementsOverscroll BehaviorShared WorkerAnd moreFeedback WebKit has had a big year, with over 162 new features and improvements shipping in WebKit browsers — including Safari 15.2, Safari 15.4, and Safari 15.5. Features from earlier this year include dialog element, la
JamstackでWebサイトやWebアプリケーションが作られることも増えてきました。このセッションでは、まずJamstackとはなにか、特徴とそのメリットをあらためて確認します。その上で「自社メディアCodeGridをJamstackで作った際に、失敗した3つのこと」を紹介しながら、Jamstackを採用する際のコツを伝えます。
Mangarel というコミック新刊情報アプリを PWA で出したんですが、そのままではびっくりするくらい Google に登録されず、いろいろ苦労した話です。PWA というより SPA 特有の話が多いかも。 https://mangarel.com/
Service Workerとは、それを使ってできること / what-is-service-worker
Kanazawa.js Remote Meetup #06の資料です。 https://kanazawajs.connpass.com/event/188109/
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SPAのタブ永遠に開きっぱなし問題」を更新ボタンを設置せず解決した - 橋本商会
なんで頻繁に使わなさそうなサービスまでアプリにしたがるの→思った以上に一般人はITリテラシーが高くない
最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる
2020年以降のプログラミング技術のトレンド予想 - Qiita
WebサイトをPWA（プログレッシブウェブアプリ）にする手順とその必要性
フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと
iPadに18禁ゲームをインストールする（ためのWebアプリを作る）
Webとネイティブアプリの付き合い方を改めて考える / Native apps and web
Engadget | Technology News & Reviews
Web Push for Web Apps on iOS and iPadOS
Web版「Visual Studio Code」がオフライン動作に対応 ～PWAとしてインストール可能に／指定サイズ以下のリポジトリコンテンツを自動DLして高度な検索・定義移動も利用できる
AppleがiOS 17.4のベータ版でPWAのサポートを削除していることが明らかに
https://www.geolonia.com/pressrelease/2022/05/17/pwamap.html
Mac で Safari Web アプリを使う - Apple サポート (日本)
iOS(16.4+)を含むブラウザでWeb Push機能を実装したメモ
ついにFlashが確認なしでブロックされるようになる「Google Chrome 76」安定版リリース
Appleが「iOS 17.4でのPWA廃止」を撤回すると発表
SPA + SSR + PWA の作り方とセキュリティについて - hiroppy's site
文化祭入退場・混雑管理システム "CAPPUCCINO" 開発・運用記
News from WWDC22: WebKit Features in Safari 16 Beta
PWA Night vol.57 ～認証・認可〜 にてパスキーの話をしました - r-weblife
Jamstackで失敗した3つのこと - PWA Night Conference 2021
とある個人開発 PWA の SEO 奮戦記
www.sunday-webry.com
taisy0.com
www.nobunaga-shinsei-wiki.com
lifehack2ch.livedoor.biz
mamagirl.jp
shueisha.online