並び順

ブックマーク数

期間指定

  • から
  • まで

41 - 80 件 / 248件

新着順 人気順

pwaの検索結果41 - 80 件 / 248件

  • Jamstackで失敗した3つのこと - PWA Night Conference 2021

    JamstackでWebサイトやWebアプリケーションが作られることも増えてきました。このセッションでは、まずJamstackとはなにか、特徴とそのメリットをあらためて確認します。その上で「自社メディアCodeGridをJamstackで作った際に、失敗した3つのこと」を紹介しながら、Jamstackを採用する際のコツを伝えます。

      Jamstackで失敗した3つのこと - PWA Night Conference 2021
    • とある個人開発 PWA の SEO 奮戦記

      Mangarel というコミック新刊情報アプリを PWA で出したんですが、そのままではびっくりするくらい Google に登録されず、いろいろ苦労した話です。PWA というより SPA 特有の話が多いかも。 https://mangarel.com/

        とある個人開発 PWA の SEO 奮戦記
      • Service Workerとは、それを使ってできること / what-is-service-worker

        Kanazawa.js Remote Meetup #06の資料です。 https://kanazawajs.connpass.com/event/188109/

          Service Workerとは、それを使ってできること / what-is-service-worker
        • SPA/PWA時代のWebデザインのお作法 / Stateful Web Design

          DIST.31 「DIST 6周年記念イベント」

            SPA/PWA時代のWebデザインのお作法 / Stateful Web Design
          • web.dev live 2020 を聴講した - from scratch

            今年はコロナの影響でいろんなイベントがオンラインになったり、中止になったりしてますが、 web.dev live 2020 が7月初頭にやっていたので、聴講してきました。 web.dev その中でも面白かったものについていくつか紹介します。 Day 1 ほぼ Core Web Vitals についての話でした。 以下のトークが面白かったです。 What's new in speed tooling Optimize for Core Web Vitals Core Web Vitals についてはもう既にたくさん資料があると思いますが、一応解説しておきます。 Core Web Vitals 初期表示の新しい指標です。去年くらいからずっと Chrome Dev Summit とかでは言われていて、既にLighthouse をはじめとして、色々なツールでサポートされています。Largest C

              web.dev live 2020 を聴講した - from scratch
            • PWAゲームを開発しネイティブアプリ化までした中での課題と対策

              RedMica 2.3 (2023-05) 新機能ハイライト およびRedmineの2023年5月までの半年間の主要な開発成果

                PWAゲームを開発しネイティブアプリ化までした中での課題と対策
              • ネイティブアプリ風Webアプリ「PWA」を実現する3つの技術 | さくらのナレッジ

                数年前からGoogleは「Progressive Web Apps」(PWA)という技術を提唱してその普及を推進している。PWAはネイティブアプリケーションのように動作するWebアプリケーションであり、オフラインでも動作し、プッシュ通知などの機能も利用できる。本記事ではこのPWAの中核となる技術の解説と、PWAに対応したWebアプリケーションを作成するための流れを紹介する。 「Progressive Web Apps」(PWA)とは 一昔前は「ネットサービス」といえばPCのWebブラウザからアクセスして利用するものがほとんどだった。しかし、スマートフォンが普及した昨今では多くのサービスがスマートフォン向けの対応を行っている。今ではPCからのアクセスよりもスマートフォンからのアクセスのほうが多いサービスは珍しくなく、スマートフォン向けの専用アプリを用意しているサービスも多い。 とはいえ、ネイ

                  ネイティブアプリ風Webアプリ「PWA」を実現する3つの技術 | さくらのナレッジ
                • Service Workerがもつ圧倒的な力。SEO担当者は変化に適応が必要 | Moz - SEOとインバウンドマーケティングの実践情報

                  PWA、SPA、Service Workerとは?(前編で解説)SPAを可能にするApp Shellアーキテクチャ(中編で解説)Service Workerがもつ圧倒的な力まとめ3. Service Workerがもつ圧倒的な力最初にはっきりさせておきたいことがある。それは、ここまでで解説してきた「SPA」と、ここから取り上げる「Service Worker(サービス・ワーカー)」は、互いに排他的なものではないということだ。 つまりこの2つは共存するものだということだ。どちらもPWAと呼ばれるものの基盤となっているが、SPAではないPWAをつくることも可能だし、従来の静的なウェブサイト(クライアントサイドでレンダリングする処理がないサイト)にService Workerを統合することもできる(近い将来、そのようなサイトが増える僕は思っている)。 さらに、Service Workerはウェブ

                    Service Workerがもつ圧倒的な力。SEO担当者は変化に適応が必要 | Moz - SEOとインバウンドマーケティングの実践情報
                  • ServiceWorkerの落とし穴8選 - Repro Tech Blog

                    はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが(?)、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ(JavaScript)の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ

                      ServiceWorkerの落とし穴8選 - Repro Tech Blog
                    • Appleの新セキュリティ機能が「ウェブの中央集権化を進める」「Appleはウェブのがんだ」とネットで大激論、その理由とは?

                      Appleは2020年3月24日(火)にウェブブラウザ「Safari」のアップデートを実施し、セキュリティ機能のひとつである「Intelligent Tracking Prevention(ITP)を強化しましたが、ITPに追加された「ウェブサイトが書き込んだデータを、そのウェブサイトが7日間操作されなかった場合はすべて消去する」機能が、ウェブの中央集権化を進めるとしてネット上で議論が巻き起こっています。 Private client-side-only PWAs are hard, but now Apple made them impossible. https://andregarzia.com/2020/03/private-client-side-only-pwas-are-hard-but-now-apple-made-them-impossible.html Private

                        Appleの新セキュリティ機能が「ウェブの中央集権化を進める」「Appleはウェブのがんだ」とネットで大激論、その理由とは?
                      • 最高のUXを目指して、1人月でWebアプリを開発した話

                        関心が高まりつつあるPWAについての技術・情報交換の場である「PWA Night」。Vol.14の今回はUI/UXがテーマです。「YouTubeをみんなでワイワイ見るためのサービスDJ7の話」というテーマで登壇したのは、Imagawa Takaya氏。1人月で開発したYouTubeの同期再生アプリ「DJ7」について、短期間での開発工程の工夫などを語りました。 ユーザーが各機能にアクセスしやすくするためのデザイン Imagawa Takaya氏:3週目に行ったことはこちらになります。今までは機能の実装がメインだったのに対して、この週からはデザインをやりました。先ほどのプロトタイプでもお見せしたとおり、DJ7ではロジックの実装とデザインの工程を明確に分けました。これはデザインしたあとで機能を増やしたくなってしまい、手戻りが発生してしまうのが嫌なためです。 この週に意識したのは、実装した機能をU

                          最高のUXを目指して、1人月でWebアプリを開発した話
                        • Service WorkerとWasmを組み合わせてサーバー処理をブラウザーでリアルに再現する

                          今回の話はWasmというよりもService Workerの話がメインになりますが、WasmとService Workerを組み合わせることで、ブラウザー上でサーバー処理をリアルに再現することができるので、このタイトルにしています。 まずは動画をご覧ください。 見ていただくと分かるように、ブラウザー上でPHPのコードを書くとその実行結果が右側に表示されています。 特に面白い点が、お問い合わせフォームのPOST後の処理までもブラウザー上だけで実行できているという点です。 これはWasmとService Workerを組み合わせて実現しています。 大体以下のようなプロセスで実現しています。 Wasmはブラウザー側でも実行可能ですが、あえてService Worker上で実行しているのは、URLへのリクエストに対してそのリクエストにインターセプト(介入)することで、POST後の処理などもブラウザ

                            Service WorkerとWasmを組み合わせてサーバー処理をブラウザーでリアルに再現する
                          • ScrapboxでのServiceWorkerとCacheの活用 - daiiz

                            PWA Night vol.6での発表資料です。 photo by kanata.icon こんにちは daiizですdaiiz.icon https://twitter.com/daizplus 京都から来ました Notaという会社でScrapboxを作っています Scrapbox Wikiみたいなノートアプリ 複数人での同時編集できる 文中リンクで繋げて思考する フルJavaScript実装のSingle Page Application サーバーサイド Node.js (Express, Socket.IO) クライアントサイド React /shokai/Scrapboxの開発 - React & Websocketで作るリアルタイムWiki by shokai.icon 2018/11 ServiceWorkerを用いたキャッシング戦略 ~Wikiアプリケーションを例に~ dai

                              ScrapboxでのServiceWorkerとCacheの活用 - daiiz
                            • SEO担当者向け PWA・SPA・Service Worker 超入門。もう「JavaScript苦手」なんて言ってられない | Moz - SEOとインバウンドマーケティングの実践情報

                                SEO担当者向け PWA・SPA・Service Worker 超入門。もう「JavaScript苦手」なんて言ってられない | Moz - SEOとインバウンドマーケティングの実践情報
                              • PWAはネイティブアプリに今のままでは勝てない? PWAが解決すべき3つの大きな課題

                                [レベル: 上級] 多くのサイトが PWA に対応するようになってきました。 しかし、PWA がネイティブアプリの完全な置き換えになるには克服しなければならない問題がまだ残されているように思えます。 Stefan Dorresteijn 氏が dev.to で、PWA が現状で抱えている大きな問題を 3 つ指摘しました。 どんな問題なのかを、追加情報を交えてこの記事で完結にまとめます。 Apple の PWA サポート状況 Android の Chrome では、ネイティブアプリに引けを取らないほどに PWA の機能が充実してきました。 これに対し、iOS の Safari は PWA のほとんどの機能をサポートできていません。 こちらは、Google の Thomas Steiner 氏が作成した、PWA のサポート状況を検出するツールを使って iOS 版 Safari をチェックした状

                                  PWAはネイティブアプリに今のままでは勝てない? PWAが解決すべき3つの大きな課題
                                • Making of “Kindolphin” | 麦 Baku

                                  group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and

                                    Making of “Kindolphin” | 麦 Baku
                                  • bento-starter - PWAを学ぶ、実装するのに参考にしたいスターターキット MOONGIFT

                                    PWA(Progressive Web Apps)というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。 そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのにぴったりなスターターキットです。 bento-starterの使い方 こちらがそのテンプレートです。 マニフェストファイル、Service Workerもちゃんとインストールされます。 Lighthouseを使った評価はほぼパーフェクトです。 PWAの要素となるCACHE APIの利用はもちろん、アプリマニフェストやアクセシビリティもきちんと提供されています。このbento-starterをベースにしたり、ここから学べることは多数あるでしょう。Service Workerの

                                      bento-starter - PWAを学ぶ、実装するのに参考にしたいスターターキット MOONGIFT
                                    • Engadget | Technology News & Reviews

                                      Pick up the 9th-gen iPad with two years of AppleCare+ for only $298

                                        Engadget | Technology News & Reviews
                                      • Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話 - Qiita

                                        Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話Vue.jsWebサービスバーコード個人開発Nuxt Nuxt.jsで開発しているWebサービスにバーコードリーダ機能をつけようとしたら、 いろいろハマったので、そのときの備忘録。 利用したのはQuaggaJS。簡単に使えて便利(´ω`) はまったポイントは、以下の4点... 1. httpsじゃないとカメラを取得できない 2. QuaggaJSで表示されてないHTML要素を指定するとエラー 3. size/width/heightを指定してもいい感じにならない 4. iOSのPWAではカメラにアクセスできない いろいろハマったけど、QuaggaJS自体がすごく良いので、サクッとできた♪ 作ったのはこんな感じ バーコードリーダ、できてきた♪ いい感じな気がする(´ω`) pic.t

                                          Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話 - Qiita
                                        • 【PWA】YouTubeをみんなでワイワイ見るためのサービス、DJ7をローンチしました! - Qiita

                                          みなさんこんにちは! 今回はYouTubeの動画を複数人で同時視聴できるサービスを作りましたので紹介したいと思います。 ブラウザを開くだけで、友達や恋人と同じ動画を見ることができます! 複数人で同じ動画を見て、あーでもないこーでもないと意見を交わすのはめちゃめちゃ楽しいです。 これはぜひ皆さんにも体験してもらいたいです! YouTube同時再生サービス DJ7 https://dj7.io 初回のアクセスは音がならないように設定してありますのでご安心ください。 できること 同期再生 サービスの要です。複数のデバイス間で再生の状態が同期され、離れている場所でも同じタイミングで同じ動画を視聴できます。 右下をクリックすると動画を画面に大きく表示します。これによって複数人で同じ動画を見ることができます😋 シークバー共有 DJ7ではシークバーの状態もユーザ間で共有されます。これはYouTube

                                            【PWA】YouTubeをみんなでワイワイ見るためのサービス、DJ7をローンチしました! - Qiita
                                          • ウェブ上でネイティブアプリ並の機能を実現するPWAで利用できる機能をまとめてテストできるサイト「What PWA Can Do Today」

                                            プログレッシブウェブアプリ(PWA)は、ウェブ上でネイティブアプリと同様の使い勝手を実現するための仕組みで、2015年に概念が提唱されて以来、徐々に機能が増加しています。「What PWA Can Do Today」は、PWAで利用できるさまざまな機能について実際に試せるサイトです。 What PWA Can Do Today https://whatpwacando.today/ サイトにアクセスするとこんな感じ。最初に「Install to home screen」をクリックし、サイトをアプリとしてインストールします。 確認画面が表示されるので「インストール」をクリック。 デスクトップにアプリが追加されました。初回は自動で起動しますが、次回以降はこのアイコンをダブルクリックして起動します。 アプリを起動すると、さまざまな機能をテストできる画面が表示されました。「Media captur

                                              ウェブ上でネイティブアプリ並の機能を実現するPWAで利用できる機能をまとめてテストできるサイト「What PWA Can Do Today」
                                            • NotionでPWAアプリの開発を実現するノーコードツール「NotionApps」の使い方! - paiza times

                                              今回はNotionのデータベースを活用して、PWAにも対応したWebアプリ開発ができるノーコードツールをご紹介します! このサービスはNotionデータベースの情報を取得したり、更新・追加などがアプリ側から簡単にできるのがポイントです。ノーコードでさまざまなロジックも構築でき、自分がイメージしたアプリを素早くカタチにできます。 面倒なサーバーの準備も不要なため、誰でも簡単にアプリを開発して公開できます。ご興味ある方はぜひ参考にしてください。 【 NotionApps 】 「NotionApps」の使い方! まずはサイトの上部にある【Create your app】ボタンをクリックして、無料のユーザー登録を済ませておきましょう。 メールアドレスとパスワードを入力したら【Sign up】ボタンをクリックします。 以下のようなダッシュボード画面が表示されたら準備完了です! 「NotionApps

                                                NotionでPWAアプリの開発を実現するノーコードツール「NotionApps」の使い方! - paiza times
                                              • Personal Tech Blog | hidekazu-konishi.com

                                                Here I plan to share my technical knowledge and experience, as well as my interests in the subject. Please note that this tech blog is a space for sharing my personal views and ideas, and it does not represent the opinions of any company or organization I am affiliated with. The main purpose of this blog is to deepen my own technical skills and knowledge, to create an archive where I can record an

                                                  Personal Tech Blog | hidekazu-konishi.com
                                                • 「サルでもわかるGit入門」がPWAに対応しました | 株式会社ヌーラボ(Nulab inc.)

                                                  サルでもわかるGit入門はサル先生のGit入門に改名しました。 サルでもわかるGit入門がPWAに対応しました。 iOSやAndroidのスマートフォンのホーム画面にサルでもわかるGit入門を追加することでネイティブアプリのように起動し、ブラウザよりも高速に閲覧することが可能になります。 こんにちは。 ヌーラボのマーケティング課所属のレオです。 私はヌーラボが運営するサイトやCacooの開発をサポートしたりとヌーラボ内を横断しているフロントエンドエンジニアです。 今回はレガシーな構成からNuxt.jsにリプレイスしたサルでもわかるGit入門を今更ながらPWAに対応させたので、かんたんにご紹介します。 そもそもPWAとは PWAとはProgressive Web Apps(プログレッシブウェブアプリ)の略です。 通常のWebサイト / Webアプリはブラウザ上で動作しますが、PWAはブラウザ

                                                    「サルでもわかるGit入門」がPWAに対応しました | 株式会社ヌーラボ(Nulab inc.)
                                                  • GYAO!TOPページパフォーマンス改善 (PWA Night 2021)

                                                    PWA Night 2021で発表したセッションです。 https://conf2021.pwanight.jp/speaker/hamada/ 今回は、GYAO!トップページのWEBパフォーマンスの改善をケーススタディとして、PWAに必須なパフォーマンス改善の具体例を見ていきます。大規模な構成変更と、その成果として得られたスケーラビリティ、ページの表示速度の向上についてをお話しします。

                                                      GYAO!TOPページパフォーマンス改善 (PWA Night 2021)
                                                    • 「SEO」と「SPA/PWAによるUX向上」を両立させるハイブリッドレンダリングの基礎知識と実現手法 | Moz - SEOとインバウンドマーケティングの実践情報

                                                      前編を読んで最新ウェブ技術の入り口に立ったら、次はUXやパフォーマンスを実現するSPAの基本と、SEOのためのハイブリッドレンダリングの基本を理解しよう。 ここでは、ユーザーにとって快適なSPAを実現しながら、検索エンジンがコンテンツをクロール・インデックスできるようにするための基本的な知識として、 ディープURLインデックスサーバーサイドレンダリングハイブリッドレンダリングアイソモーフィックアプリプリレンダリングJSフレームワークによる完璧なハイブリッドレンダリング/静的サイトジェネレータといった具体的な手法を理解していこう。 URLが一意であるか、それがSEOのポイントしかし冒頭で述べたように、クライアントサイドのJavaScriptへの依存度が高い状況は、SEOにとって問題だ。 歴史的に見ると、このような問題の多くは、次のようなギャップに起因する。 検索エンジンのクローラーは、コンテ

                                                        「SEO」と「SPA/PWAによるUX向上」を両立させるハイブリッドレンダリングの基礎知識と実現手法 | Moz - SEOとインバウンドマーケティングの実践情報
                                                      • PWAゲームを開発しネイティブアプリ化までした中での課題と対策 - builderscon tokyo 2019

                                                        Abstract 本セッションでは、PWAゲームを開発し1年以上運用してきた経験から アセット配信 マスターデータの配信や管理 アニメーションや動画を使ったリッチな表現 一部ユーザーからのチート行為への対策 といったゲーム開発を行う上で必要となる諸機能が、ブラウザというフィルタを通すことで 「ディスクキャッシュ容量が限られる中でいかに通信量を減らして」アセット配信するか 「ブラウザのストレージ容量が5MB,10MBと制限される中での」マスターデータの配信や管理 「通信量を抑えなければならない中での」アニメーションや動画を使った表現 「DeveloperConsoleから簡単に通信情報やソースコードが見れる中での」チート行為対策 と変貌することへのとりうるアプローチの考察や実際に行った対策について、 クライアント・サーバー両方の立場から説明していきます。 ( 説明の中には、Goやcgoを使っ

                                                          PWAゲームを開発しネイティブアプリ化までした中での課題と対策 - builderscon tokyo 2019
                                                        • PWAとクラウドゲーミングの現状そしてPWAとOOParts

                                                          「PWA Night Conference 2021」にて発表した資料になります https://conf2021.pwanight.jp/ タイトル:PWAとクラウドゲーミングの現状そしてPWAとOOParts Pitch: https://app.pitch.com/app/public/player/75d8b9b3-b9a2-4cce-a132-aba3dc112ffd OOParts: https://oo.parts

                                                            PWAとクラウドゲーミングの現状そしてPWAとOOParts
                                                          • ノーコード! Glideで飲食店検索アプリを爆速で作ってみた - Qiita

                                                            流行りのノーコードツールのGlideでアプリを作ってみたのでその所感を書きます。 🍱作ったもの テイクアウトを提供している地元飲食店の検索アプリです。 店名・住所・メニューでの検索やマップ表示などが出来ます。 製作時間は8時間程(8割の時間は情報元サイトからのデータ取得・整形)。 Takeout-Hitachinaka · 店舗一覧 機能 - 店名・メニュー・地名などでの検索機能 - 詳細情報の表示 - マップ情報の表示、マップ画面での現在位置取得 - コメント機能 - お問い合わせフォーム 🔧なぜ作った? 地元の商工会議所が提供しているテイクアウト飲食店のまとめページが、かなり味のあるデザインで気になったのがきっかけです。 せっかくの良いキャンペーンが上手く伝わらず勿体ないなと思いました。 新型ウイルスに負けないぞ! テイクアウト&デリバリー応援キャンペーンサイト 特に以下点が気にな

                                                              ノーコード! Glideで飲食店検索アプリを爆速で作ってみた - Qiita
                                                            • Progressive Web Appsの振り返りとこれから | gihyo.jp

                                                              Progressive Web Apps(以下、PWA)は2018年ごろからホーム画面へのインストール機能やキャッシュ戦略等の技術視点でエンジニアの間で話題に挙がるようになりました。現在ではWebパフォーマンス、ユーザビリティ向上、PoC(実証実験)といったビジネス視点でも注目されており、多くのWeb実装にPWAが取り入れられています。 今回の記事では、国内のPWAの動向を振り返り、改めてPWA開発のスタンダードとこれからのPWAについてまとめます。 日本国内でのPWAの動向 2015年にPWAという名称が生まれ、Google Chromeを始めとした各ブラウザが順次PWAに対応していきます。2018年にiOSのSafariがService Workerに対応したことををきっかけに国内でもPWAが注目され始めました。筆者もその頃からPWAに興味を持ち、2019年2月に立ち上がったTechコ

                                                                Progressive Web Appsの振り返りとこれから | gihyo.jp
                                                              • アプリと同等のUXをウェブでも提供する、PWA最新事情 from #ChromeDevSummit 2019

                                                                [レベル: 上級] この記事では、Chrome Dev Summit 2019 の PWA 関連セッションのハイライトをレポートします。 僕はデベロッパーではないので技術的な部分、特にコーディングについては言及しません。 テクニカルな内容は記事最後で紹介する動画でご確認ください。 では、PWA の最新事情を一緒に見ていきましょう! ウェブプラットフォームとしての PWA 新興国のような通信環境が整っていない国々でもウェブを利用しやすくする。 スマートフォンや PC などあらゆるデバイスでウェブにアクセスできるようにする。 ネイティブアプリと同等な機能をウェブアプリでも提供することが重要。 airbnb 事例 airbnb はネイティブアプリから PWA サイトでのサービス提供に移行した。 その結果、初回訪問ユーザーの 65 % はウェブ経由になった。 成果: パフォーマンス(読み込み速度)

                                                                  アプリと同等のUXをウェブでも提供する、PWA最新事情 from #ChromeDevSummit 2019
                                                                • Webサイトやブログを高速化、PWA対応!静的サイトジェネレーターの導入方法を詳しく解説した入門書

                                                                  これからのWebサイトに求められる要件「高速化」「メタデータ」「PWA」などに対応するための一つの答えが、静的サイトジェネレーターだと思います。Reactベースの静的サイトジェネレーター「GatsbyJS」で、Webサイトやブログを構築する手順を詳しく解説した入門書を紹介します。 ReactやJavaScriptに自信が無くても、非常に分かりやすい解説なので、必要となる制作知識を身につけることができます。 本書は、6/1発売です! 著者はWeb制作系の解説書で分かりやすさで評判のエビスコム様。初心者の人でもサンプルサイトを制作しながら、ステップ・バイ・ステップで静的サイトジェネレーターの構築を学ぶことができます。

                                                                    Webサイトやブログを高速化、PWA対応!静的サイトジェネレーターの導入方法を詳しく解説した入門書
                                                                  • PWAをNativeAppだと錯覚させる

                                                                    こんにちは、@kaa_a_zuです。PWAという単語を聞いて、皆さんは何を想像しますか?A2HS、オフライン利用、プッシュ通知など様々な機能があるかと思います。今回は、あまり知られていないけど、WebAppを確実にNativeAppに近付ける機能についてご紹介をします。また、この記事は 2021年のPWA(Progressive Web App)のアドベントカレンダー 19日目の内容になります。 私が想定している読者は、全てのWeb開発に関わる方々です。中でも「既にPWAサービスを展開している」「既存のPWAを今すぐにNativeAppに近づけたい」という開発者に届けることができたら嬉しいです。 目次 PWA と ProjectFugu について マニフェストファイルの基礎 さらにNativeAppに近付ける マニフェストファイル(2021年末版) 1. PWA と ProjectFugu

                                                                      PWAをNativeAppだと錯覚させる
                                                                    • Webでできる体験を考える会 / On the possibilities of PWA experience

                                                                      self-hosted runnerと actions/cache の噛み合わせが悪かった件 #githubactionsmeetup

                                                                        Webでできる体験を考える会 / On the possibilities of PWA experience
                                                                      • メルカリレンズβ WebAssembly × AIのプロダクト開発 | メルカリエンジニアリング

                                                                        この記事は、Mercari Advent Calendar 2021 の22日目の記事です。 こんにちは、メルカリ EdgeAIチームの@tkatoです。私たちのチームでは、クライアントサイドでの機械学習応用について、アルゴリズム開発からプロダクション開発までを担当しています。 12月16日に、メルカリレンズβという新しいプロダクトが公開されました。この記事では、メルカリレンズβを開発するにあたり、Webブラウザ向けに機械学習を用いたUIを開発した経験から得た知見を紹介したいと思います。 メルカリレンズβは、スマホのカメラで商品をかざすだけでメルカリでの取引相場や類似商品などの情報を表示するWebアプリです。いくらで買えるか知りたいときや、出品する値段で迷ったときに、メルカリを使ったことのないお客様でも気軽に使えるアプリを目指しています。 技術的には、機械学習を利用した直感的なUIをクライ

                                                                          メルカリレンズβ WebAssembly × AIのプロダクト開発 | メルカリエンジニアリング
                                                                        • 各種WebAPIの簡単な使い方と、組み合わせで実現する新たな体験・可能性を考える

                                                                          2020年2月1日、「PWA Night CONFERENCE 2020」が開催されました。Web体験を進化させる、新しいWeb開発コンセプト「PWA」をテーマに、Web開発に携わるエンジニアたちが集まった本イベント。プレゼンテーション「Webでできる体験を考える会」に登壇したLINE株式会社の折原レオナルド賢氏は、既存のWebAPIを用いてできることや実現できるユーザー体験について、自身の経験や今回の発表に際して行った検証結果を用いて紹介しました。講演資料はこちら Webでできる体験を考える 折原レオナルド賢氏:それでは「Webでできる体験を考える会」ということで始めたいと思います。去年の今頃、こんな記事を書かせていただきました。 もしかしたらこれによって今回呼んでもらったのかなと思いますので、この話の内容も含めていろいろ「Web APIってどういうもの?」という発表をしていきたいと

                                                                            各種WebAPIの簡単な使い方と、組み合わせで実現する新たな体験・可能性を考える
                                                                          • PWAに取り組む前に知っておきたい SPAとSEO

                                                                            監視とオブザーバビリティ 〜 悩む前に確認しておくべきこと / 20230926-ssmjp-monitoring-and-observability

                                                                              PWAに取り組む前に知っておきたい SPAとSEO
                                                                            • 「接待どうぶつ将棋AI」が爆誕!おもてなし接待AIを作る物語。 - Qiita

                                                                              はじめに AIが将棋のプロ棋士より強くなってから久しい。 一方で羽生善治先生は、 「接待将棋のようなことはAIには難しい」と喝破している。 では実際に接待AIを作ろうとすると、どのような点が難しく、 どこまでのレベルの「接待」なら出来るのだろうか? 本稿は、「接待将棋」という難問に挑んだ開発日誌的な記録として、 得られた接待AIの考え方にいたるまでの物語である。 参考: 人工知能に「接待将棋」はできない──羽生善治と石山洸が語る将棋とAIの進化 先に完成品を記載(実際に遊べるURL) 結論から述べると、あるシンプルな実装方針で、 自身ではある程度納得出来る実装を得ることが出来た。 以下がその結果(接待AI)と実際に遊べるアプリだ。 PC/スマホどちらでも対応。 「将棋」は難しすぎるため「どうぶつしょうぎ」で作った。 「どうぶつしょうぎ」は、そのユーザを考えると、 実は地球上で最も「接待」が

                                                                                「接待どうぶつ将棋AI」が爆誕!おもてなし接待AIを作る物語。 - Qiita
                                                                              • mozaic.fm v3 リリースと Podcast の PWA 化 | blog.jxck.io

                                                                                Intro mozaic.fm をリニューアルし v3 としてリリースした。 今回の更新は以下のような変更/修正を実施している。 PWA 化 before install prompt Background Fetch Periodic Background Sync Content Index API Badging API Player UI の刷新 Pure Webcomponents Media Session API WAI-ARIA Portal Preview Screen Wake Lock Security CSP v3 (not Report-Only) Cross Origin Resource Policy Cross Origin Opener Policy Cross Origin Embedder Policy Expect-CT NEL Referrer P

                                                                                  mozaic.fm v3 リリースと Podcast の PWA 化 | blog.jxck.io
                                                                                • 一休.comにService Worker(Workbox)を導入しました - 一休.com Developers Blog

                                                                                  こんにちは。宿泊事業本部の宇都宮です。 この記事は、一休.com Advent Calendar 2019の2日目の記事です。 今日は、一休.com( https://www.ikyu.com )にService Worker + Workboxを導入した件について書きます。 Service Workerとは Service Workerはブラウザのバックグラウンドで動作するJavaScriptで、PWA(Progressive Web Apps)の基盤技術です。 Service Worker の紹介 https://developers.google.com/web/fundamentals/primers/service-workers?hl=ja はじめてのプログレッシブウェブアプリ https://developers.google.com/web/fundamentals/cod

                                                                                    一休.comにService Worker(Workbox)を導入しました - 一休.com Developers Blog