tag:crieit.net,2005:https://crieit.net/tags/SPA/feed Crieitでタグ「SPA」に投稿された最近の記事 2021-04-30T00:02:35+09:00 https://crieit.net/tags/SPA/feed tag:crieit.net,2005:PublicArticle/17032 2021-04-30T00:02:35+09:00 2021-04-30T00:02:35+09:00 https://crieit.net/posts/SPA-PWA <h1 id="SPA（Single Page Application）"><a href="#SPA%EF%BC%88Single+Page+Application%EF%BC%89">SPA（Single Page Application）</a></h1> <ul> <li>単一ページによるWebアプリケーション。</li> <li>返された結果をクライアント側でリアルタイムにレンダリングできるようになった。</li> <li>瞬時に画面を書き換えることができる。（いいね！ボタンとか）</li> <li>画面遷移はDOM操作。</li> <li>ページのリフレッシュは不要。</li> <li>リッチなエクスペリエンス。</li> <li>クライアントとサーバーのロジックを分けて、保守性を上げることができる。（分業）</li> </ul> <h1 id="PWA（Progressive Web Apps）"><a href="#PWA%EF%BC%88Progressive+Web+Apps%EF%BC%89">PWA（Progressive Web Apps）</a></h1> <ul> <li>ネイティブアプリのようなUXを提供するWebアプリの概念。</li> <li>デバイスに合わせた機能提供がWebコンテンツ自体で行われている。</li> </ul> <hr /> <h5 id="～これまでのWebになかった機能～"><a href="#%EF%BD%9E%E3%81%93%E3%82%8C%E3%81%BE%E3%81%A7%E3%81%AEWeb%E3%81%AB%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E6%A9%9F%E8%83%BD%EF%BD%9E">～これまでのWebになかった機能～</a></h5> <p><strong>Service Worker</strong><br /> * オフラインサポート（Cache API）<br /> * プッシュ通知（Push API）<br /> * バックグラウンド処理（Background API）</p> <p><strong>Web Application Manifest</strong><br /> * アイコンの追加</p> <hr /> <h5 id="～PWAのメリット～"><a href="#%EF%BD%9EPWA%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%EF%BD%9E">～PWAのメリット～</a></h5> <ul> <li>ブラウザUIなしで起動できてオフラインでも使える。</li> <li>アプリを公開するためにストアに提出する必要がない。</li> <li>プラットフォームごとに修正する必要がない。</li> <li>インストールしなくても使える。</li> <li>サーバー側から通知をプッシュできる。（タイムセールの開始など）</li> <li>オフラインでの使用が可能なため、ネットワークの状態に左右されないように作れる。</li> <li>低機能なブラウザやPWA非サポートのデバイスにもサービスを提供できる。</li> <li>ユーザの強い権限で動作しない。</li> <li>HTTPS接続でしか動作しないのでサーバーとのやり取りを安全に行える。</li> <li>ハイパーリンクがあればサービスに接続できる。<br /> *各メリットを状況に合わせて取捨選択できる。</li> </ul> <hr /> <h5 id="Service Worker"><a href="#Service+Worker">Service Worker</a></h5> <p>（バックグラウンドで動作するプログラミング可能なネットワークプロキシ）<br /> * PWAを実現する上で中心となる機能。<br /> * Webページのネットワークリクエスト全てをインターセプトできる。<br /> * キャッシュ<br /> * リクエストのハンドリング<br /> * Push<br /> * バックグラウンド同期</p> <hr /> <h5 id="Web Application Manifest"><a href="#Web+Application+Manifest">Web Application Manifest</a></h5> <p>（ホーム画面のアイコンやアプリ起動時のウィンドウの状態を指定）<br /> * ホーム画面に追加するアイコン、スプラッシュ、背景色、ウィンドウスタイルを定義するもの。</p> <h1 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h1> <ul> <li>SPAは物理的なページ遷移を行わずWebクライアント上で画面が描画されるものでリアクティブな動作が可能。</li> <li>PWAはWebクライアントの機能に合わせて、Webアプリにネイティブアプリライクな機能を実装したものでデバイスへのインストールやPush通知が可能。</li> </ul> しんじ。 tag:crieit.net,2005:PublicArticle/15488 2019-10-17T19:20:16+09:00 2019-10-17T19:20:16+09:00 https://crieit.net/posts/Nuxt-js-SPA-Firebase-Web <p>SPAはとてもすてきだけど、Hostingにアップロードしてもすぐに更新されない。。<br /> たとえば、メンテナンス画面に変更しても、キャッシュが残っててメンテナンスモードにならないとか。。</p> <p>この<a target="_blank" rel="nofollow noopener" href="https://qiita.com/okkuyama/items/484fdd868b17d8c960a9#%E3%83%AA%E3%83%93%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%82%92%E5%90%AB%E3%82%93%E3%81%A0%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%82%92%E8%87%AA%E5%8B%95%E5%8C%96%E3%81%99%E3%82%8B">記事</a>をみると、Reactで強制的にリビジョンアップする方法が載っていたので、<br /> Nuxt.jsでもできないかやってみたときの備忘録。</p> <h2 id="ざっくりとした流れ"><a href="#%E3%81%96%E3%81%A3%E3%81%8F%E3%82%8A%E3%81%A8%E3%81%97%E3%81%9F%E6%B5%81%E3%82%8C">ざっくりとした流れ</a></h2> <p>流れとしては、こんな感じ。</p> <ol> <li>staticディレクトリにJSONファイルでバージョン番号を用意</li> <li>環境変数にリビジョン番号を保持するように設定</li> <li>JSONファイルと環境変数のバージョン番号が異なっていたら、強制リロードする</li> </ol> <p>用意するJSONファイルはこんな感じ</p> <pre><code class="json">{"version":1} </code></pre> <h2 id="やりかた"><a href="#%E3%82%84%E3%82%8A%E3%81%8B%E3%81%9F">やりかた</a></h2> <p>バージョンチェックするタイミングや更新の契機はいろいろあるけど、<br /> ページ遷移時にチェックするよう、middlewareで対応。</p> <p><a target="_blank" rel="nofollow noopener" href="https://qiita.com/okkuyama/items/484fdd868b17d8c960a9#%E3%83%AA%E3%83%93%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%82%92%E5%90%AB%E3%82%93%E3%81%A0%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%82%92%E8%87%AA%E5%8B%95%E5%8C%96%E3%81%99%E3%82%8B">参考記事</a>)にあるような、ダイアログを出すパターンもある。</p> <h3 id="バージョンをチェックするmiddlewareを用意"><a href="#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%99%E3%82%8Bmiddleware%E3%82%92%E7%94%A8%E6%84%8F">バージョンをチェックするmiddlewareを用意</a></h3> <p><code>middleware/checkUpdate.ts</code>として、バージョンをチェックするミドルウェアを追加する。</p> <pre><code class="typescript">import axios from "axios"; export default async function() { try { // revision.jsonファイルから最新のバージョンを取得 const res = await axios.get("/version.json"); const data = res.data; const latestVersion = data.version; // 環境変数から現在のバージョンを取得 const curVersion = !!process.env.VERSION ? Number(process.env.VERSION) : 0; // 最新バージョンよりも古かったら、強制的にリロードする if (curVersion < latestVersion) location.reload(true); } catch(error) { console.error(error); // エラーのときはなにもしない } } </code></pre> <p><code>location.reload(true)</code>を使うとキャッシュを無視して、強制的にリロードするらしい<br /> ・参考: <a target="_blank" rel="nofollow noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/reload">Location.reload() - Web APIs | MDN</a></p> <h3 id="nuxt.config.tsの設定"><a href="#nuxt.config.ts%E3%81%AE%E8%A8%AD%E5%AE%9A">nuxt.config.tsの設定</a></h3> <p>middlewareを使うようにするのとあわせて、</p> <ol> <li>環境変数(<code>VERSION</code>)の設定したり、</li> <li>JSONファイル(<code>version.json</code>)を生成する</li> </ol> <pre><code class="typescript">import fs from "fs"; import NuxtConfiguration from "@nuxt/config"; // バージョン番号を設定 const VERSION = 1; // revision.jsonをstatic配下に生成 fs.writeFileSync("static/version.json", JSON.stringify({ version: VERSION })); const config: NuxtConfiguration = { env: { VERSION: VERSION // 環境変数にバージョンを設定 }, router: { middleware: ["checkUpdate"] // バージョンチェックのmiddlewareを設定 } } </code></pre> <h3>firebase.jsonで<code>version.json</code>をキャッシュしないように</h3> <p>そのままだと、<code>version.json</code>自体もキャッシュされてしまうので、<br /> あまり意味がない感じになる。。</p> <p>なので、firebase.jsonでversion.jsonをキャッシュしないように設定</p> <pre><code class="json">{ "hosting": { "public": "public", "ignore": ["firebase.json", "**/node_modules/**", "**/README.md"], "headers": [ { "source": "/version.json", "headers": [ { "key": "Cache-Control", "value": "private, no-store, no-cache, must-revalidate" } ] } ] }, } </code></pre> <p>以上!!</p> <h2 id="こんなのつくってます!!"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E3%81%AE%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%21%21">こんなのつくってます!!</a></h2> <p>積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！<br /> <a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読ハウマッチ</a>は、Nuxt.js+Firebaseで開発してます!</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="200"/></p> <p>もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ</p> <p>要望・感想・アドバイスなどあれば、<br /> 公式アカウント(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/MemoryLoverz">@MemoryLoverz</a>)や開発者(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka">@kira_puka</a>)まで♪</p> <h1 id="参考にしたサイトさま"><a href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88%E3%81%95%E3%81%BE">参考にしたサイトさま</a></h1> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://codeday.me/jp/qa/20190305/329882.html">javascript – シングルページアプリケーション（SPA）ページを強制的に更新する方法 - コードログ</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/okkuyama/items/484fdd868b17d8c960a9#%E3%83%AA%E3%83%93%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%82%92%E5%90%AB%E3%82%93%E3%81%A0%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%82%92%E8%87%AA%E5%8B%95%E5%8C%96%E3%81%99%E3%82%8B">【React.js】SPAでのリビジョンアップ対策 - Qiita</a></li> </ul> きらぷか@積読ハウマッチ/SSSAPIなど tag:crieit.net,2005:PublicArticle/14594 2018-11-06T09:50:13+09:00 2018-12-22T16:44:20+09:00 https://crieit.net/posts/Netlify-404 <p>先日「<a target="_blank" rel="nofollow noopener" href="https://nyaaan.haramishio.xyz">Nyaaan</a>」というWebサービスをリリースしました。<br /> このWebサービスは「Nuxt.js」で作られており、「Netlify」でWebホスティングしています。</p> <p>Twitterでシェアして楽しんでもらうことを前提としたWebサービスですので、TwitterCardの画像は広くリーチするのには大切なものです。<br /> しかし以下のような詳細画面など、ルートパス(index.htmlにあたるページ)以外は<strong>404</strong>にってしまう現象になり、<br /> 実際URLにアクセスするとちゃんと画面は見れるけど、TwitterではTwitterCardが表示されないという現象が起こりました。</p> <p>その原因と解決方法を記載します。</p> <h2 id="原因"><a href="#%E5%8E%9F%E5%9B%A0">原因</a></h2> <p>通常SPAサイトを作る場合、ルートパス以外でアクセスされた場合はindex.htmlにリダイレクトをする処理を書くと思います。<br /> 自分は404ページを用意して、Nuxt.jsの設定で「ページが存在しない場合、404を表示する」という設定を<strong>先に</strong>やっていました。</p> <pre><code># SPA フォールバック module.exports = { generate: { fallback: true, // '404.html' を使用したい場合 fallback: 'my-fallback/file.html' // ホスティングサービスで特定のロケーションを指定する必要がある場合 } } </code></pre> <p><a href="">https://ja.nuxtjs.org/guide/routing/</a></p> <p>この対応を先にやったことにより、ルーティングはちゃんと行われるけど<strong>404</strong>になってしまう現象になりました。</p> <h2 id="解決方法"><a href="#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95">解決方法</a></h2> <p>解決方法は、<strong>Netlify用のリダイレクト設定を入れてあげること</strong>です。</p> <blockquote> <p>HISTORY PUSHSTATE AND SINGLE PAGE APPS 参照<br /> <a href="">https://www.netlify.com/docs/redirects/#rewrites-and-proxying</a></p> </blockquote> <p>/static/_redirects に以下の内容を記載。</p> <pre><code>/* /index.html 200 </code></pre> <p>これでルートパス以外はindex.htmlにHTTPステータス200でリダイレクトされます。<br /> fallbackの設定を入れているならパスが見つからない場合、404.htmlに遷移します。</p> Morix💪😼✨