Pro Wrestling Australia オーストラリアのプロレス団体。
Pro Wrestling Alliance アメリカのテキサスを拠点とするプロレス団体。
Lighthouseで計測したところ下記のような要修正項目が現れた。 該当する下記のページを読んでみると、maskableアイコンとはどうやらすべてのAndroidデバイスで美しく表示されるアイコンフォーマットらしい。 ちなみにマスキング可能なアイコンフォーマットに従わないPWAアイコンは白い背景が与えられるとのこと。 Manifest doesn't have a maskable icon PWAアプリにmaskable icon を追加する方法 まずは下記のMaskable.app EditorにアクセスしてMaskableアイコンを作成する。 Maskable.app Editor 上…
アソビュー Advent Calendar 2021の7日目です🎄 アソビューでフロントエンドエンジニアをしている野口です。 next-pwaを使ってNext.jsで作成した静的ファイルのオフライン対応と、リソースのアップデートのタイミングについて調べてみました。 next-pwa その名の通り、Next.jsで簡単にPWA対応が行えるライブラリです。他にもnext-offlineといったライブラリがあるようなのですが、Next.jsの公式のサンプルにも載っているのと、直近のアップデートもありメンテナンスされてそうなのでこちらを選んでみました。 ちなみに、作成したPWAのサイトをシェアするdi…
Android Chrome support.google.com iOS(日本語の公式ドキュメントは発見できず) Safari bamka.info Chrome サポート外 プログレッシブ ウェブアプリを利用する - iPhone と iPad - Google Chrome ヘルプ Windows Chrome support.google.com Edge docs.microsoft.com Try PWA (技術の泉シリーズ（NextPublishing）)作者:渋田 達也インプレスR&DAmazonプログレッシブウェブアプリ PWA開発入門 (NextPublishing)作者:…
カメラを使って写真を撮る Media Capture and Streams APIのMediaDevices.getUserMedia メソッドを使用すれば実現可能 (実装コードは誌面に記載あるが割愛) QRコードを読み込む Shape Detection APIという、ブラウザで顔・バーコード・テキストの検出が可能となるAPI 2021年10月時点では、Google Chromeと一部のブラウザしかまだ対応していない 使用するには、GoogleChromeのアドレスバーで「chrome://flags」と入力して表示される設定画面で、「Experimental Web Platform f…
誌面で紹介されていた利用ツール 詳細は写真などで紹介されているので割愛 VSCode VSCode拡張機能Live Server Chrome Webアプリをインストール可能にする インストール可能にする事で次の様な想定が必要 アドレスバーなどを表示しないネイティブアプリのようなUI アプリの切り替え画面でアプリとして認識(ex. Win + Tab, Alt +Tab) アプリのドロワーやアプリの管理への追加 実装方法がOS単位で異なる iOSの場合 HTMLのhead内に記述を行う事で対応可能 (コーディング内容は誌面に記載あるため割愛) なお、iOSでPWAをインストールできるのはSaf…
詳細は誌面に記載有るため、一部のみ要約して抜粋。 PWAの3つの柱 Capable 最新のAPIを使用してネイティブアプリのような機能を提供する事を指す。 例) ・カメラやマイクにアクセス ・画像加工 ・デバイス上に保存 今後提供されるAPI、WebAssemblyなどで、PWAはこれまで以上に機能向上が期待できる。 Reliable アプリの信頼性を指す。 ネットワークに関係なく、高速に動作するアプリケーションは信頼性が高いということである。 特に重要と言われているのが速度で、ページの読み込み速度だけでなく、スクロールやアニメーション、ボタンをクリックしたときの反応速度など、アプリケーション…
こんにちは。株式会社PHONE APPLIのくりきと申します。ウェブエンジニアをやっております。 本記事では、わたしの所属するチームが開発しているサービス、「PA THANKS」がPWA対応をしたときの話を書いていこうと思います。 PWAとは？ PWA（ Progressive Web Application ）とは、スマホでホーム画面にwebページのアイコンを追加することができ、アプリのようにブラウザでサイトが見れる仕組みのことです。 PWAのメリット スマホアプリっぽいものをかんたんに作ることができる 今回、PWAを導入することになった一番の理由がこちらです。 「もっとも短納期で」 「スマ…
こんにちは、インフラエンジニアの赤倉です。 今回は「ServiceWorker」のオフラインキャッシュを使ってWebページの読み込み高速化を実現してみたいとおもいます。 ServiceWorkerとは ServiceWorker とは、ブラウザが Web ページとは別にバックグラウンドで実行するJavaScript環境のことです。ページ内のコンテンツをブラウザ側にキャッシュしてオフライン状態でも利用することができます。 対応ブラウザ Chrome Edge Firefox Opera Safari また、ServiceWorkerの稼働条件としてWebページのHTTPS化が必須となっております…
とりあえず途中まで進んだので記録。 表題の通り既存のWebアプリにServiceWorkerを追加して、PWAっぽく使えるようにします。操作対象は最近いろいろいじっている、CastBackgroundです。今回はキャッシュ処理とmanifest.jsonの設定だけします。 github.com 実際どうやってるのかを見たい場合は、上記ソースコードを直接確認してください。manifest.jsonとsw.jsを見れば大抵わかると思います*1。 実際の手順 既存サイトにServiceWorkerを追加する場合、やるべきことは以下の通り (manifest.jsonを追加する) ServiceWor…
いつもの挨拶 どうもこんにちは。いつものゆりです。 タイトルが長すぎるけど、イイ感じの案が思いつかなった。許して。 前回のにっきが8月…今はもう9月下旬…あっという間すぎてつらいです。 yuli-nikki.hatenablog.jp でも、いいことはありまして。 渕上舞さんアーティスト3周年ツアーライブに全通できることになりました🥳 横浜、大阪、福岡、駆け抜けて行きますよー。 クレカ枠が死ぬ pic.twitter.com/ZcxemGD8aU — ゆり (@Y_li27) 2021年9月17日 www.lantis.jp それと、au の新しいプラン povo で 5G サービスがローンチ…
プーチン氏、細かい戦術決定か 「大佐以下のレベル」―英紙：時事ドットコム 体内のブドウ糖を電気に変える埋め込み式薄型電池 米MITなどが開発 THE TIME' の篠原さんの早朝グルメ中継コーナーは、朝から美味しいものを食べたい、早朝営業の店を探している人にとって超有り難い。 「ゆっくり茶番劇」騒動で「バズレシピ」を無関係の第三者の代理人として出願した弁理士が反応（自民公認で選挙出馬を目指し中） マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も 愛知県東部で工…
コロナ禍になって暫く経ったころ、本屋さんでノーコードと付いたタイトルの本を手に取ってみたことがあった。 プログラマでは無いしアラフィフになり中々頭に入らない。 ただ、スマホアプリの中で、自分だけのアプリ、持ってみたかった。 書籍では、PWAのアプリというらしいが、細かい事は気にしないし、詳しくは分からない。 ただ、過去の家族旅行の宿泊先をプロットして、自分のスマホで眺めたかった。 あちこち家族を連れて行った記録をデジタルでマップ化したかった。 クリックすると宿泊日が見えるといいな、金額とか感想もチョット書いたりして。 本に従ってやってみたが、全部うまくいっていない。 あれから週一回でもやってた…
今週のお題「ホーム画面」 スマートフォンのホーム画面を見せろということらしい。 自分では毎日使って見慣れているけれど、他の人がどんなふうに使っているかはわからない、スマホのホーム画面。どんな工夫やこだわりでアプリを配置しているか、ブログで共有してみませんか？ 今週は「ホーム画面」をテーマに、みなさんのエントリーを募集します。「アイコンの色で分けている」「1画面で完結させている」「このウィジェットが便利」など、あなたの「ホーム画面」にまつわる出来事を、はてなブログに書いて投稿してください！ ご応募をお待ちしております。 iPhoneも使っているけど、みんなそんなに大差ないんじゃないだろうか。そこ…
Blazor には 7 つの Blazor があります。 今回はその作り方 ～プロジェクト (ソリューション) の作り方～ です。 ■ プロジェクト (ソリューション) の作り方 no name dotnet command Visual Studio (Project Template) note article 1 Blazor Server dotnet new blazorserver Blazor Server アプリ article 2 Blazor WebAssembly dotnet new blazorwasm Blazor WebAssembly アプリ article 3…
森、道、市場が来月開催されるということで、今年も参加すべく準備を進めている。2019年は2人でサイクリング、2021年は4人でデイキャンプ、今年は6人でキャンプサイトと規模が増えてきている。非常に良い！さて、暑くなりそうな今年も何を着て行こう。 基本的に衣類は天然繊維を中心にしたものばかりで、あえて化繊を積極的に選ぶことはなかったんだけど、やっぱりフェスとかアウトドアになると座ったり歩き回ったりするわけで。泊まりがけの場合だと同じズボンを穿くので、結果的に膝が出まくるわシワが入りまくるわで、形が不細工になりがち。化繊のズボンって扱いが楽で良さそうだよな、と昨年あたりから始まった"PWA"のun…
つい最近まで、C# 開発者がブラウザー向けコードを記述したいとなった場合、JavaScript を使う必要がありました。しかし、Web 開発の世界は急速に変化していて、今や開発者はハイエンドの Web アプリ開発のために JavaScript に依存する必要はなくなりました。もしあなたがサーバーに接続せずに (アドオンやプラグインなしで) ブラウザーで .NET を実行することを考えたことがある場合、Blazor は WebAssembly と呼ばれるテクノロジーのおかげでそれを実現しています。 このブログでは、Blazor WebAssembly と、なぜそれが多くの話題を呼んでいるのかを詳…
お疲れ様です！ なかじまです！ ぼくはワードプレスでブログを書いています。 無料のテーマを使っていたんですが、デザインをもっとおしゃれにしたい！ そして、自分でCSSを書かなくてもよくしたい！ アクセスが遅いので、速くしたい！ なので、いろいろ有料テーマをいろいろ調べてみました。 １、THE THOR（ザ・トール） 集客・収益にこだわったWordPressテーマ「THE THOR（ザ・トール）」 価格：16,280円 THE THORのいいところ ・圧倒的にSEOに強くバツグンに検索上位に表示されやすい！ ・美しく・おしゃれで・洗練されたデザイナーズサイトがワンクリックで完成する ・モバイルペ…
GitHub - withastro/astro: Build fast websites, faster. 🚀🧑🚀✨ 読みはじめた時点でのコミットは`21926278ba664d8362694efe51943968dfcb4b26`で、バージョンでいうと`1.0.0-beta.9`です。（めちゃめちゃ頻繁に更新されるので、今はもう最新ではないはず）
Googleは毎年、検索エンジンに約500〜600の変更を加えています。 そして毎年、起業家、SEO、そして他のすべての人は、彼らが変化するものに追いつくためにスクランブルをかけなければなりません。 しかし時々、グーグルは私たちに彼らの手を見せてくれます。 そのような例の1つは、モバイルファーストのインデックス作成です。 2016年以来、Googleは、検索エンジンにモバイルファーストのインデックスを実装できるようにする方法を実験してきました。 彼らもそれについてあまり静かではありませんでした。 しかし、最近のアップデートで、長い待ち時間はついに終わりました。 Googleは、モバイルのベスト…
（原文：Jason Beres／翻訳：インフラジスティックス・ジャパン） この記事では、現在のモダンウェブ開発において注目されている Blazor と React の2つのフレームワークを比較します。読者様にとって、どちらを採用するのがよりご自身の状況に対して適切かを判断する材料になれば幸いです。(2022年4月最新情報に更新しました。)
（原文：Jason Beres／翻訳：インフラジスティックス・ジャパン） 最近まで、C＃開発者がフロントエンドのコーディングをする多くの場合、最も使われているプログラミング言語であるJavaScriptを使用していました。しかし、Web開発の世界は急速に変化しており、開発者はもはやハイエンドのWebアプリ開発のためにJavaScriptに依存する必要はありません。 BlazorはWebAssemblyと呼ばれるテクノロジーのおかげで、アドオンやプラグインを使用せずにブラウザー上で.NETを実行できます。 本記事では、現在のBlazorの状況、その機能、本番レベルで利用可能であるかなどを詳しく見…
本記事で行うこと モチベーション サマリ 作成物 自宅kubernetes環境 (rancher/rke2) 資産設計シミュレーションWebアプリ Slack Botで家電操作 家電操作Webアプリ(Flask Nature Remo) Slackもどき (Websocket勉強用) 家電操作Webアプリ v2 (Vue Nature Remo) 家電操作モバイル向けWebアプリ v3 (Vue Nature Remo PWA) ファイルアップローダー (fiber-file-uploader) Web時計 ランダム英語表示 (english-web-clock) container buil…
SPAを最速で作り始めたい！ 結果的にはこちらを作りました。 よければ使ってください。 react-template github.com セールスポイント 取り込んで2コマンドで動きます。 npm i npm run start typescript / eslint / prettier とオススメの作法を詰めておきました。 importパスのエイリアスがすでに設定してあります。 CSSも読めるようにしておきました。 キャッシュバスターも入れておきました。 なぜ作ったか？ 前回に続き、初学者向けの内容です。 ▼前回はこちら tak-taniguchi.hatenablog.com Reac…
修行といっても現職のBlack Inc.はもちろん日本法人のままだし、現地に転職するわけでもないし（できないし）、なんなら開発環境はものすごく劣化した。 給料は日本から普通に円で振り込まれるだけだし、極論「サンフランシスコに旅行しにきただけ」と言われたらそれまでである。 しかも高校2年から10年ほど住んでいた北新宿にも別れを告げ、住民票も埼玉の実家に移した。 日本で使ってたモニターやPCはほぼ全部売ったし、もちろん親にも反対された。 挙句の果てに私が10年住んでた家には15年分の家族全員のものが散乱しており、引っ越しにはフルで1ヶ月を要した。そして家も売却した。 おまけに渡米の1週間前くらいに…
paiza.hatenablog.com
qiita.com
eh-career.com
blog.agektmr.com
eh-career.com
www.publickey1.jp
speakerdeck.com
speakerdeck.com
inside.dmm.com
