trogはWordpressを卒業してから、お問い合わせフォームにあたるページを作成するのをサボっており、約5年ほどお問い合わせフォームを廃止していました。 その間、連絡手段として利用していたのはTwitterのDM機能です。 我々、アラサーぼっち陰キャどものサードプレイスとして長年親しまれてきたTwitterですが、 最近は動作が不安定だったり、度重なる仕様変更により、安寧の地ではなくなりつつあります。 そこで今回はNetlify Formsを使用して、Gatsbyで作ったWebサイトにお問い合わせページを作成していきます。 <h2 id="h7d356566a0">Netlify Formsとは</h2>Netlify Formsとは、ホスティングサービスNetlifyが提供している機能の一つで、Webフォームを簡単に設置できるサービスのことです。 クライアント側への実装のみで、設定完了という触れ込みです。 またNetlifyの管理ページから届いたお問い合わせを管理できます。月100件まで無料のようです。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/8a9668f8d15c48a38da79566c3f75f99/IMG_0353.jpeg" alt=""> 標準機能としてスパムフィルター(Akismet)が搭載されているので安心です。 レイバンのサングラスのスパムメールなんかも、きっと駆除できるでしょう… <h2 id="hdbf98b940f">前提条件</h2><ul><li>対象アプリケーションをNetlifyからホスティング(配信)している</li><li>GatsbyでWebアプリケーションが作成されている</li><li>Netlifyアカウント作成されている</li><li>お問い合わせフォームのデザインができている</li></ul><h2 id="hb03a1ed78f">お問い合わせフォームページの作成</h2>簡易的ですがこんな感じで作成します。<pre><code>import React from 'react';

const ContactForm = () =&gt; {
&nbsp; return (
&nbsp; &nbsp; &lt;form 
 name="contact"
&nbsp; &nbsp; &nbsp;method="POST"
&nbsp; &nbsp; &nbsp;action="/thankyou/" data-netlify="true"&gt;
&nbsp; &nbsp; &nbsp; &lt;input type="hidden" name="form-name" value="contact" /&gt;
&nbsp; &nbsp; &nbsp; &lt;label htmlFor="name"&gt;名前&lt;/label&gt;
&nbsp; &nbsp; &nbsp; &lt;input type="text" id="name" name="name" required /&gt;
&nbsp; &nbsp; &nbsp; &lt;label htmlFor="email"&gt;メールアドレス&lt;/label&gt;
&nbsp; &nbsp; &nbsp; &lt;input type="email" id="email" name="email" required /&gt;
&nbsp; &nbsp; &nbsp; &lt;label htmlFor="message"&gt;メッセージ&lt;/label&gt;
&nbsp; &nbsp; &nbsp; &lt;textarea id="message" name="message" required&gt;&lt;/textarea&gt;
&nbsp; &nbsp; &nbsp; &lt;button type="submit"&gt;送信&lt;/button&gt;
&nbsp; &nbsp; &lt;/form&gt;
&nbsp; );
};

export default ContactForm;</code></pre> <code>data-netlify="true"</code>がNetlifyと連携する宣言ですね。<code>netlify</code>だけでも実装できます。 Netlify Forms管理画面では、<code>form</code>要素の<code>name</code>属性に指定した名前でフォームを判別します。サイト内で複数のフォームがある場合、重複しないように設定してください。 <code>action</code>で送信成功時に遷移する送信完了ページを指定できます。 SSGは<code>&lt;input type="hidden" name="form-name" value="contact" /&gt;</code>の部分も忘れないように実装してください。 ビルド時に一部情報が削除されてしまう都合で上記がないと正しくフォームが動作しないようです。(参照: <a href="https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/" target="_blank" rel="noopener noreferrer">How to Integrate Netlify’s Form Handling in a React App</a>) ここで示したのはGatsbyで使っていたコードですが、Next.jsもほぼ同じ実装で動いてます。 あとは適当にCSSを追加してデザインしてください。 <h2 id="h67ae63605d">Netlify Formsの設定</h2>つづいてNetlify側の設定をしていきます。 Netlifyダッシュボードにログインし、フォームを設定したいプロジェクトを選択します。 ナビゲーションメニューから「Forms」を選択します。 「Configuration and usage」に移動し、「Form detection」から「Enable form detection」をクリックすると設定完了です。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/47f63117c3d341f68208efc092ce8af6/image.png" alt=""> オプションとして、すぐ上にある「Form notifications」から管理者への通知方法を選べます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/4b4d147c570e4f03a7a0db2ebd90754d/image.png" alt=""> <h2 id="h7758ea360f">フォームのデプロイ</h2>実装内容をいつもどおりNetlifyにデプロイしてください。 Githubで連携している方は、mainブランチにプルリクエストをMerge、もしくはソースをPushするだけです。 ビルドが成功するとNetlifyがフォームを検出してくれます。 先ほど実装した「contact」フォームがActive Formsとして表示されるようになりました。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/57bba739cf034d049f15796c4c87628e/image.png" alt=""> ご自身の実装したWebサイトからもテストでお問い合わせしてみてください。 <h2 id="h03e7af0d39">参考リンク</h2><a href="https://www.netlify.com/products/forms/" target="_blank" rel="noopener noreferrer">Netlify Forms - Netlify</a> <a href="https://docs.netlify.com/forms/setup/#html-forms" target="_blank" rel="noopener noreferrer">Forms setup | Netlify Docs</a> <a href="https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/" target="_blank" rel="noopener noreferrer">How to Integrate Netlify’s Form Handling in a React App</a> * * * 青い鳥を追い出してしまった、元Twitter。 経営者が変わってから仕様変更の嵐で。 最初はサービスが健全になっていくんだと安心していたのですが…。 いまはもう、バグなのか仕様なのか理解できません。 一部アカウントでは収益化も始まったようですが、わたしのアカウントはそういったこととは無縁です。 運営の状況次第で振り回されるサービスは苦手で。どうにもビッグウェーブを乗りこなせない体質です。 Google広告も一時期貼っていたのですが、苦労してデザインしたサイトにはなんだかしっくりこなくて剥がしてしまいました。 Buy me a coffeeのようなブログパーツとして貼れる投げ銭サービスは、まだやったことないのでちょっと興味があります。 とにもかくにも自由気ままに個人ブログに生息する予定であります。

それまで連絡手段にしていたTwitterのDMが仕様変更になったのでNetlify Formsでお問い合わせフォームを作成していきます。

もうTwitterには頼れないからNetlify Formsでお問い合わせフォーム作る【Gatsby】

trog、4度目のリニューアルのご報告です。 今回の目玉はPWA(Progressive web apps)によるWeb Push通知への対応です。 Web Push通知とは、許可した端末に対してブラウザを通じてメッセージを送信する仕組みです。 ユーザーがサイトにアクセスしていないときでも、新着情報や重要な通知を送信できます。 ユーザーからの許可していない場合には、通知は送信しません。 今回のバージョンアップにより、皆様のお手持ちのiPhone、Androidスマホ、PC等の端末に向けて、trogの更新通知をお届けできるようになりました。 App StoreやGoogleストアからインストールするアプリと同じようなプッシュ通知が、trogから配信されるイメージです。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/42827703c2194e478d3929bfcf572a21/IMG_0323.jpeg" alt=""> <h2 id="h51b5e95cb1">通知受取手順</h2>PC、Androidも同様の手順になります。iPhoneを中心に通知受け取りに必要な手順を説明していきます。 ブラウザで当サイト <a href="https://microayatron.com/" target="_blank" rel="noopener noreferrer">https://microayatron.com/</a> にアクセスしてください。 iPhoneの場合は必ずSafariから追加してください。(ChromeブラウザからではPWA化しません。) 共有ボタンからホーム画面に、PWA版trogを追加してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/efa12e53e11e488dac06766d8721994c/IMG_0316.jpg" alt=""> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/8c34fa82b27d40e2af0682341cbc2548/IMG_0317.jpg" alt=""> ホーム画面に追加にしたPWA版trogのTOP画面右上の「通知設定」から通知設定画面へお進みいただき、「通知を許可する」ボタンを押してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/2d0f8fb36d7f49e997051cb988b4c1c7/IMG_0304.png" alt=""> 通知設定画面の「通知を許可する」ボタンを押すことで、OSの通知確認ダイアログが表示されます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/bfc94c8870e548e19f7c4413cd0c1159/IMG_0305.png" alt=""> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/401bdeecb96c4a239d000541bef71200/IMG_0308.png" alt=""> 通知を許可していただくと、以下のような表示になります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/0a88430dda4e4a89b89fb53b903a812e/IMG_0309.png" alt=""> これで設定は完了です。 Windows PCとiPhoneは手元にある端末で通知受け取りできたので、たぶん大丈夫です。 Androidだけは、わたしが端末を持ち合わせていないので、テストできていないです。 Androidユーザーの皆さんごめんなさい…。 <h2 id="habd7ffab81">通知OFF手順</h2>あとから通知を切りたくなった場合は、端末の設定アプリから、アプリケーションの「通知」→trogへ進み、 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/2653d0131cc34d87b631171136c2912a/IMG_0318.jpg" alt=""> 「通知を許可」をOFFにしてください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/4a1b3dc919c24fb2b014c6a7ce834652/IMG_0312.png" alt=""> PWA版 trogを端末から削除していただくことでも通知をOFFにできます。 <h2 id="haf075eec17">旧PWA版trogを端末に追加された読者様</h2>旧版PWAは画面が真っ白になるかと思います。 フレームワークをGatsbyからNext.jsに変更したことによる影響だと思います お手数ですが端末から削除をお願いします。 <h2 id="hc34493df5a">リニューアル経緯</h2>先述のとおり、今回はフレームワークをGatsbyからNext.jsに変更しました。 GatsbyからFirebase Cloud Messageを使用してWeb Push通知が実装できないか、試行錯誤していたのですが<s>エラーが頻発して心が折れました</s>技術力が足りなかったみたいです。 Gatsbyから無理に移行したのでソースコードが汚いままです… これからNext.jsを勉強しつつ、リファクタリングしていきます。 * * * 読者の皆様、今後ともtrogをよろしくお願いします。

GatsbyからNext.jsに変更、Web Push通知を実装しました。iPhoneなどApple製品にも対応しています。（たぶん）

【iOSも通知受取可能】trogからのお知らせをプッシュ通知で受け取ろう！

歳を重ねるにつれ、時間が惜しいと感じることが増えた。 日中はプログラマとして働き、帰宅後は家電をフル稼働させてなんとか主婦業を終わらせ、一人の時間を確保したら大学生としてほどほどにレポートに取り組む。 どれも全力を出すと潰れるのはわかりきっているので、それなりにやっている。 しかしさすがに「時間が足りない」と思うことが増えてきた。 外へ夕飯を食べに出かけた。 待ち時間にスマホを弄っていたのだが、どうにも隣のテーブルの会話が気になってしまった。十分な声量であったから、容易に内容を聞き取ることができてしまった。 女性の友人どうしで近況報告を交わしていた。話題はそのうちの一人の婚約者への愚痴で持ち切りとなり、いっこうに止まる気配を見せない。 そうこうしているうちに、注文した料理が運ばれてきた。 わたしは食事を始めた。 相変わらず隣のテーブルの会話は弾んでいる。 彼氏彼女のうちは個々人の付き合いだったが、いざ結婚となれば家と家の結びつきと捉えるご家庭なのだろう。わりと面倒な状況だ。 マッチングアプリで知り合ったらしいが、数万課金したらプロ仲人のおばさんが出てきて全部解決してくれるオプションはないのだろうか。 聞いてるだけで心が削られていく思いだ。イヤホンを家に忘れてきたことを後悔した。 * * * わたしという人間は、「友人に近況を報告する」というのがどうも苦手らしい。報告したくなればそうするし、でも基本的には近況を教えたくないみたいなのだ。 女が複数人集まれば、会話は弾んでいるはずなのに殺伐とした女子会が開催されることもしばしばある。 インスタ映え個室居酒屋は、マウント合戦が繰り広げられる戦場へと変貌を遂げるのだ。 夏休み、忘年会などの節目に女子会は開催される。 酒・料理・デザートは毎回必要となる。 加えて誕生日のメンバーがいればパーティとなる。 プレゼントは徐々にインフレしていき、デパコスを渡すのが常識となってしまった。 毎度の合戦には多額の軍資金が必要なのだ。 単身と家族がいる世帯では生活費の使い方は多少異なる。 当時、自分のために使うお金はかなり切り詰めていた。 コロナ禍に突入した。わたしの職場では複数人での会食はできるだけ避けるよう言われた。 これは都合良く休戦になるだろうと踏んでいた。 が、他メンバーはとくに制限がなかったらしい。 誠に自分勝手なことだとは思ったが、思い切ってメンバーにLINEを送った。 『女子会への参加はしばらくお休みするね。毎回の支出が経済的に辛いのと、みんなの職場とうちの職場とでは飲み会への制限が違うみたいで。職場で肩身が狭くなるのは辛いし。ごめんね。』 すぐに返事があった。 『わかる！！！』 あまりにストレートな返事に、呆気にとられてしまった。 とても共感できる、という意味なんだろう。きっと。 でもいま欲しいのはその返事じゃないんだよなぁ…… 指先はいつまでも空を切り続ける。 欲しい回答、満足のいく回答が得られなかったとき、会話を続ける気力が湧かない。 わたしは以前よりもこだわりが強くなったと感じる。 仮に先述の隣のテーブルのような、婚約者とのいざこざについて友人から相談されたとしても、受け止める余裕がいまのわたしにはない。 友人と一瞬で繋がれる世界というのもなかなかしんどいものである。 * * * 現代は一生のうちでは楽しみきれないほどの娯楽に溢れている。 時間への価値観は変化し続けている。 あらかじめ「楽しい」が約束された時間かどうか、ファスト映画で確認してから映画館に行く人が現れるほどに。 最近の10代は友人と行きたいカフェを見つけたときにTiktokリンクを共有するらしい。 なんにせよ事前の情報収集というのは、タイムパフォーマンス向上を目指す情報社会ならではの人生サバイバル術として多くの人が取り入れていることだろう。 そんな時代に逆行しているが、「楽しい」が保証されていないにも関わらず、久しぶりにクラブイベントに行った。 出会いの場としてのクラブにいっさい用はない。そういう類のものとは別の場所にある、音楽好きたちがひっそりと集まる巣窟が存在する。 それはわたしも同様で、ただ良い音楽が聴きたいだけだ。 しかし夜中はとてもじゃないけど起きてられないし、スピーカーから流れる大きな音が苦手で、普段は足を運ぼうとも思わない。 夫がライブやDJ出演で呼ばれていたとしても、いってらっしゃい私は寝るから、の姿勢を貫いている。 今回は、昼間のイベントで景色もいいので奥さんも一緒にどうですか、と夫の友人から誘われたので聴きに行くことにした。 新婚のときは夫の友人に挨拶するのがこのうえなく憂鬱だった。 知り合いのいないコミュニティに放り込まれて疲れるだけだ。 最近では初めましての人が減ってきたおかげで、わたしを「奥さん」ではなく「わたし」だと認識してくれる人が増えてきた。 遠くで古いレゲエが鳴り響く中、海を一望できる場所でみんなと夕日が沈んでいくのを眺めた。 これまで存在しなかった青春の一コマを、いい歳した大人がやり直しているようだ。 なんだか笑ってしまった。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/426359ced4554f80a07c6afc5ac7e772/IMG_9729.jpeg" alt=""> あれこれ悩んでいたことのすべてがバカバカしくなるほどに、楽しい時間はあっという間に過ぎていった。 * * * 何に価値を見出すのかは一人ひとり違う。 一人の時間を最優先した結果、友人と疎遠になるという選択もまた尊重されるべきである。 まさか友人がいない理由を正当化することになるとは。 ずいぶんと贅沢な人間になってしまったものだ。 * * * 参考: 「ファスト映画を見て衝撃を受けた」　著作権を知らず“映画愛”の表現を間違えた元投稿者 - ITmedia NEWS <a href="https://www.itmedia.co.jp/news/articles/2208/01/news177.html" target="_blank" rel="noopener noreferrer">https://www.itmedia.co.jp/news/articles/2208/01/news177.html</a>

友人関係について。価値観の変化と、このままいくと将来ひとりぼっちになりそうな不安をしたためました。

なんもわかんなくて草

普段はWebアプリ(Angular)の開発業務に携わっているのですが、 世間話として振られる「お仕事なにされてるんですか？」の返事に毎回悩んでいます。 「プログラマやってます。Webアプリケーション作ってるんです。」 と答えると、たまに 「あー、アプリ作ってるんですね！LINEとかTwitterみたいなやつですよね！」 と言われてしまう... いや、間違ってない。 でもきっと想像しているのはスマートフォン向けアプリケーションですよね？ 「アプリをApp StoreやGoogle Playからインストールする」という行為は、もはやスマホユーザーの常識となりました。 これまでのWebアプリケーションはどうだったかというと <ul><li>SafariやChromeなどのブラウザを起動</li><li>アプリのページにアクセス</li><li>ようやく接続できたもののスマホアプリより反応が遅くて…</li><li>頻繁にリロードが必要…</li></ul> 想像しただけでも面倒で操作が複雑です。 これではすぐに飽きて、触る気が失せてしまう… 「アプリ」と銘打っているのに、スマホアプリと比べると操作感が劣っているように感じてしまいます。 そんなWebアプリの常識を一変させるのが、PWA（プログレッシブウェブアプリ）です。 <h2 id="hc4fc4a6bbf">PWAとは</h2>Webブラウザ上で動作するアプリケーションです。 SafariやChromeの使用できる端末ならなんでもアプリをインストールできるというわけです。 開発者はアプリストア(App store or Google Play)で審査を待ったり、手数料を支払わなくとも、開発したアプリをすぐにユーザーに提供できます。 開発者が好きなタイミングでアプリを自動更新できるので、ユーザーにアップデートを要求する必要もありません。 Webアプリの起動はかんたんです。 スマホのホーム画面やPCのスタートページから、追加したアプリアイコンを押すだけ。 ブラウザのアドレスバーなどの余計なものは表示されず、アプリの景観を邪魔するものが一切無くなります。 オフラインでも利用可能なので、ネットワーク接続の弱い場所でも便利です。 サービスワーカー(Service Workers)がウェブサイトの情報を適切にキャッシュしていくので、Webブラウザからの閲覧よりロード時間の短縮が可能。いわゆる多くの人が想像する「アプリ」同様、ぬるぬる動きます✨ <h2 id="hfd38bd9957">GatsbyにおけるPWA実装</h2>お使いのGatsby環境に以下のプラグインを入れましょう。<ul><li><a style="background-color:#ffffff" href="https://www.gatsbyjs.com/plugins/gatsby-plugin-manifest/" target="_blank" rel="noopener noreferrer">gatsby-plugin-manifest</a></li><li><a style="background-color:#ffffff" href="https://www.gatsbyjs.com/plugins/gatsby-plugin-offline/" target="_blank" rel="noopener noreferrer">gatsby-plugin-offline</a></li></ul> Gatsbyではマニフェストファイルの生成(<a href="https://www.gatsbyjs.com/plugins/gatsby-plugin-manifest/" target="_blank" rel="noopener noreferrer">gatsby-plugin-manifest</a>)、Service Workerを実装するプラグイン(<a href="https://www.gatsbyjs.com/plugins/gatsby-plugin-offline/" target="_blank" rel="noopener noreferrer">gatsby-plugin-offline</a>)が提供されているのですが、そのままではiPhoneでPWAとして起動できなかったため、設定を追加します。 <h3 id="h4db8b4c375">gatsby-config.ts</h3><pre><code>const plugins = [
 // その他のプラグイン群…
 {
 resolve: `gatsby-plugin-manifest`,
 options: {
 name: `app name`,
 short_name: `app name`,
 start_url: `/?utm_source=pwa&amp;utm_medium=pwa&amp;utm_campaign=pwa`,
 background_color: `#FFF`,
 theme_color: `#000`,
 display: `standalone`,
 icon: `src/assets/icon.png`
 }
 }
];


if (process.env.NODE_ENV !== 'development') {
 plugins.push({
 resolve: `gatsby-plugin-offline`,
 options: {
 workboxConfig: {
 runtimeCaching: [
 {
 urlPattern: /(\.js$|\.css$|static\/)/,
 handler: `NetworkFirst`
 },
 {
 urlPattern: /^https?:.*\/page-data\/.*\.json/,
 handler: `NetworkFirst`
 },
 {
 urlPattern: /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
 handler: `StaleWhileRevalidate`
 },
 {
 urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/,
 handler: `StaleWhileRevalidate`
 }
 ]
 }
 }
 });
}

module.exports = {
 siteMetadata:{
 // (関係ないので省略)
 },
 plugins
};</code></pre> gatsby-plugin-offlineの定義は、必ずgatsby-plugin-manifestの後に書いてください。 gatsby-plugin-manifestの定義はどこでもいいです。 <h3 id="h0504cdd841">gatsby-browser.ts</h3><pre><code>exports.onServiceWorkerUpdateReady = () =&gt; {
&nbsp; const shouldReload = window.confirm(
&nbsp; &nbsp; '本サイトはバージョンアップしました。最新版を表示するために再読み込みしますか？'
&nbsp; );
&nbsp; if (shouldReload) {
&nbsp; &nbsp; window.location.href = window.location.href.replace(/#.*$/, '');
&nbsp; }
};
exports.onRouteUpdate = async () =&gt; {
&nbsp; if (!navigator) {
&nbsp; &nbsp; console.log('Navigatorが定義されていないため、サービスワーカーの登録をスキップしています。');
&nbsp; &nbsp; return;
&nbsp; }
&nbsp; if (!navigator.serviceWorker) {
&nbsp; &nbsp; console.log('Service Workerがサポートされていないため、登録をスキップしています。');
&nbsp; &nbsp; return;
&nbsp; }
&nbsp; try {
&nbsp; &nbsp; const registration = await navigator.serviceWorker.register('/sw.js');
&nbsp; &nbsp; await registration.update();
&nbsp; } catch (error) {
&nbsp; &nbsp; console.error('サービスワーカーの登録に失敗しました。');
&nbsp; }
};</code></pre> サイトの更新準備ができたらユーザーに確認のアラートを出しています。 結構頻繁に表示されるので削ってもいいかもしれません。 <h2 id="h1998156127">実装完了</h2>当ブログもようやくiPhoneからPWAで閲覧できるようになりました。 共有ボタンを押して… <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/dd82da44f64346679900049c5d8bb404/iPhone_PWA2.jpg" alt=""> ホーム画面に追加してみてください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/60348ac2460c42f5bfdc8850099b7625/iPhone_PWA3.jpg" alt=""> ホーム画面のアプリ「trog」から起動できます🙌 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/2db17e28dbd642ffabca7bdf20f55c88/iPhone_PWA.jpg" alt=""> あたりまえですが、iPadでも動きました。(iPad mini 6) <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/0d2ed7a7bd68456db9822e7c1b542c4e/iPad_PWA.png" alt=""> 次はもっとWebアプリらしいサイトでやってみたいですね。 * * * 参考: <a href="https://sevic.dev/notes/gatsby-blog-pwa/" target="_blank" rel="noopener noreferrer">Gatsby blog as PWA (Progressive Web App) | Željko Šević | Node.js Developer</a> <a href="https://developer.mozilla.org/ja/docs/Web/Progressivewebapps/Offline_Service_workers" target="_blank" rel="noopener noreferrer">サービスワーカーで PWA をオフラインで動作させる - プログレッシブウェブアプリ (PWA) | MDN</a>

PWAの人権(?)がいよいよiOSでも認められてきたので、GatsbyのPWAもiOSで使用できるように設定していきます。

【Gatsby】iPhone向けPWA実装で優勝していく

久しぶりに自動テストフレームワークCypressについて取り上げます。 「Cypressって何者なんじゃ？」(*1)という方向けに、こちらの<s>偏見にまみれた</s>記事で紹介しています。 よろしければご覧ください。 <a href="https://microayatron.com/setting-up-cypress-environment/" target="_blank" rel="noopener noreferrer">Cypressしか勝たん！～テスト担当者ファーストなE2Eテストツール～ | trog</a> <h3 id="h9707d3a59a">概要</h3>これまでのCypressにはひとつのテストでドメインの異なるページへの遷移に関してのテストが不可能という制限がありました。(*2) この『仕様』のおかげで、シングルサインオン(Single Sign-On)認証を採用しているWebアプリケーションでは、なんらかの回避策が必要でした。 そんなCypressですが、2022年12月にv12.0.0がリリース。 <code>cy.origin()</code>を使用することで、異なるドメインへの遷移を含むアプリケーションでも制限がなくテスト実装が可能になりました。 いままではできなかった（回避策も面倒だった）のですが、 Auth0、Google、Cognito(AWS)、OktaなどのSSO認証を採用したWebアプリケーションのテストで、GUIによるログイン操作を行い、そのままテスト対象のアプリケーションに戻ってテストできるようになりました…！ <h3 id="h0ef859a5d4">環境構築</h3>手っ取り早くCypressを試すには、やはり<a href="https://github.com/cypress-io/cypress-realworld-app" target="_blank" rel="noopener noreferrer">Real World App</a>が楽です。 Real World Appは、Cypressテストのデモが見られる、React製の決済アプリケーションです。 ソースのREADME.mdを読めばかんたんに環境が構築できます。 ただし、Node.jsのバージョンが新しすぎると動きません。v16系で動かすことをおすすめします。 以下に認証プロバイダごとの設定方法が記載されています。 <a href="https://github.com/cypress-io/cypress-realworld-app#3rd-party-authentication-providers" target="_blank" rel="noopener noreferrer">https://github.com/cypress-io/cypress-realworld-app#3rd-party-authentication-providers</a> 今回はAuth0について動作を確認しますので、併せてこちらも参照して設定を進めます。 Auth0アカウントも用意しましょう。 <a href="https://docs.cypress.io/guides/end-to-end-testing/auth0-authentication#Auth0-Application-Setup" target="_blank" rel="noopener noreferrer">Auth0 Authentication | Cypress Documentation</a> Auth0などのテスト向けに.envを編集した場合、他のテストはすべて失敗するようになっています。 仕様ですのでご注意ください。 <h3 id="he08cd0f5d4">試してみる</h3>無事、構築が完了しました。 README.mdの手順どおり、Real World AppとCypressアプリケーションを起動します。 こいつはGUIからテストを選択できる優れものです。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/5e07968bf4434d8c829db513fd7d35ad/cypress_auth0_1.png" alt=""> <code>cypress\tests\ui-auth-providers</code>に各SSO認証のテストがあります。 <code>auth0.spec.ts</code>を選択すると、すぐにテストが始まります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/4686bfe47dc942a6926dffee4d6b0425/cypress_auth0_2.png" alt=""> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/4d4e9f5fbcc747c7bd3da231d714b067/cypress_auth0_3.png.jpg" alt=""> Auth0でIDとパスワードを入力後、アプリケーションに遷移するテストが成功しています。 <blockquote>【補足】デフォルトパスワードに含まれている“$”がエスケープできないのか、パスワードのテストに失敗しています。応急処置ですが、<code>auth.spec.ts</code>の<code>cy.loginToAuth0()</code>を呼び出している部分にパスワードを直書きすると正常にテストできます。</blockquote> ログイン処理を実現しているコードを確認します。 <code>cypress\support\auth-provider-commands\auth0.ts</code> で<code>loginToAuth0</code>コマンドを定義しています。<pre><code>cy.session(
&nbsp; args,
&nbsp; () =&gt; {
&nbsp; &nbsp; // App landing page redirects to Auth0.
&nbsp; &nbsp; cy.visit("/");


&nbsp; &nbsp; // Login on Auth0.
&nbsp; &nbsp; cy.origin(Cypress.env("auth0_domain"), { args }, ({ username, password }) =&gt; {
&nbsp; &nbsp; &nbsp; cy.get("input#username").type(username);
&nbsp; &nbsp; &nbsp; cy.get("input#password").type(password);
&nbsp; &nbsp; &nbsp; cy.contains("button[value=default]", "Continue").click();
&nbsp; &nbsp; });


&nbsp; &nbsp; // Ensure Auth0 has redirected us back to the RWA.
&nbsp; &nbsp; cy.url().should("equal", "http://localhost:3000/");
&nbsp; },
&nbsp; {
&nbsp; &nbsp; validate: () =&gt; {
&nbsp; &nbsp; &nbsp; // Validate presence of access token in localStorage.
&nbsp; &nbsp; &nbsp; cy.wrap(localStorage).invoke("getItem", "authAccessToken").should("exist");
&nbsp; &nbsp; },
&nbsp; }
);</code></pre> <code>cy.origin()</code>でAuth0のGUI操作を指示しています。 <code>cy.origin()</code>の中では、テスト対象(<code>baseUrl</code>)と異なるドメインのページに対して、通常のテストを書くときと変わりなくコマンドを書けるようですね。 Auth0のログイン処理が終わると、<code>baseUrl</code>で指定したReal World Appに遷移できること、 またローカルストレージにアクセストークンが存在することを確認しています。 * * * Auth0アカウントへの操作は簡単でした。サイプレス用にポートを開けたり、セキュリティを脆弱にするような設定もありませんでした。 これなら認証のテストもCypressに任せられそうです。 ますます進化したCypressこそが大優勝テストフレームワークですなｗｗｗ (*3) Cypress以外ありえないｗｗｗ * * * 1: <a href="https://dic.pixiv.net/a/%E3%83%8A%E3%83%B3%E3%82%B8%E3%83%A3%E3%83%A2" target="_blank" rel="noopener noreferrer">ナンジャモ (なんじゃも)とは【ピクシブ百科事典】</a> 2: <a href="https://docs.cypress.io/guides/guides/web-security#Same-superdomain-per-test" target="_blank" rel="noopener noreferrer">Web Security | Cypress Documentation</a> 3: <a href="https://dic.nicovideo.jp/a/%E3%83%AD%E3%82%B8%E3%82%AB%E3%83%AB%E8%AA%9E%E6%B3%95" target="_blank" rel="noopener noreferrer">ロジカル語法とは (ロジカルゴホウとは) [単語記事] - ニコニコ大百科</a>

cy.origin()は2022年12月リリースのv12からCypressに正式実装された、異なるドメイン間のテストを可能にするコマンドです。これまでテスト実装に制限のあったSSO認証のあるアプリを例に紹介します。

【Cypress】cy.origin()でSSO認証を自動テストする

私は去年から通信の大学生をしている。 今月は大学生となって初めてキャンパスに足を踏み入れ、講義を受けに行った。 会社が休みとなる土日を利用して通う「スクーリング」というやつだ。 キャンパスは東京都内にある。週末は新幹線に乗って移動し、土曜の講義を受け、大学近くで一泊。日曜の講義を受けたら新幹線に乗って帰宅する。この生活が３週間続いた。 これまでの人生において、関東圏にはこれっぽっちも縁がなかった。 先生の講義は、テレビで聞くより１.５倍は速い標準語で進む。グループワークもイントネーションの違いから、稀に聞き取れない部分があった。 おまけに関東圏の地理がわからない。 授業では一般常識として進んでいき、田舎者としては非常に困ってしまう。 東京は日本の中心だから「みんな東京のことを知っていて当たり前」という感覚だろう。愛知県内の他市民から見た名古屋市民にもそういう風潮はある。特別なことではない。 しかし慣れていないと、なんとも複雑な気持ちになる。 雰囲気のよさそうな喫茶店にふらりと入った。ブラックコーヒーが１杯700円。私はとくに疑問も抱かず注文した。 程なくしてやってきた店員さんは、コーヒーと伝票だけを置いて奥へ去ってしまった。いつもなら付いてくるはずのトーストとゆで卵は、わたしの元に運ばれてこなかった。 入る店を間違えてしまったのか？これが都会の洗礼というやつなのか！？ ショックを受けつつ、すすったコーヒーはとても美味しかった。 また通りがかった時にはリピートしたい。 * * * なにげなくYoutubeを見ていた。 なんと『へき地には基本的人権がない』のだと言う。 これは1970年代に書かれた本から抜粋されていた。当時京都府北部にあった70〜80の集落が集団離村ののち廃村になったそうなのだが、その背景や住民の思いなどが記されているらしい。(*1) 政策による農作物の輸入が推し進められ、減反政策が始まったことで農業での収入確保が困難になった。子供が高校に通うにあたり村を離れ下宿しなければならないのだが、それにかかる費用が家計を圧迫してしまう。豪雪地帯ゆえ冬になると集落の男性が街へ出稼ぎに行ってしまい、集落に残されるのは老人と母子だけになる。 こういったことが背景となり、村人たちは集団で村を離れるに至ったようだ。 住民であった学生たちの寄せた手記の中には、「（これまで住んできた）この集落が便利になればいいのに」「そうしたら引っ越しなんか考えなくていいのに」など、村を離れがたい思いを綴ったものばかりであった。 * * * 人生において取れる選択肢の数というのは様々な要因が絡む。生まれ育った家庭環境、経済状況、住んできた土地、学校など。まだまだ他にも挙げられるだろう。 生活拠点にしている「地域」というのは、その選択肢に想像していたより遥かに大きな影響を与えていたんだと、今回身をもって感じた。 いまの生活に不満があるわけではない。 少し前に名古屋市民をやめて郊外に引っ越した。 水も美味しいし、空気も澄んでいる。畑や田んぼもわりと近いので、ときどき田舎特有の匂いがする。 欲しいものはネット通販ですぐに届く。すぐに欲しい場合は名古屋まで出ればいい。在宅勤務がとても快適になった。 講義の合間にグループワークで一緒になったAさんと雑談していた。 仕事終わりにキャンパスの図書館に赴き、通学課程の若い学生さんに混ざって勉強時間を確保しているらしい。 わたしは通勤時間が長い。おまけに乗り換え回数も多い。 Aさんとは違い、この時間にできることは暗記ぐらいだ。 一方、Aさんはキャンパスで集中して勉強ができる。机もノートもパソコンも使える。レポートに必要な文献を手に入れることもできる。キャンパスの近くに住んでいる学生はかなり有利だ。 Aさんに「東京に引っ越す気はないの？」と聞かれた。 名古屋から来た(*2)こと以外には自分自身のことをなにも話していなかったので、当然の疑問ではある。 しかしせっかく無期契約で雇ってもらえた仕事も、名古屋で働く夫も捨てるわけにはいかない。住み慣れて愛着のあるこの土地から離れるなんてありえないことだ。 前述の学生の手記のとおりだ。 大学がこっちに来てくれさえすれば、なにも問題はないのだ。 * * * 欧米への留学を経験した人から、たびたび似たような話を耳にする。 外国人というのはやはり「外国」の方であって、「異種」なのだと。 日本から遠く離れた異国の地というのは、他の誰でもない「個」を尊重する文化らしい。 裏を返せば「わたし」はどういう人間なのかを主張し続けないと、存在を認めてもらえないような気分になるのだと言う。 帰国した日本では、見ただけで勝手に属性を決めてもらえる。自分にとって居心地いいことだと、離れてみて初めてわかったと言っていた。 たまに「日本はぬるま湯」と聞くのだが、そういう部分なのかもしれない。わたしは海外に出たことがない。いまのところそういった寂しい気持ちを理解することはできそうにない。 なんたって、たった６日間東京へ出ただけでこんなにもギャーギャー喚いているのだから。 * * * 1: <a href="https://youtu.be/mtwBYN6nkNc" target="_blank" rel="noopener noreferrer">https://youtu.be/mtwBYN6nkNc</a> 【廃村探訪】京丹後廃村 - 過疎の嵐のただ中で暮らした人々と1人の教師の記録&nbsp;- historica とてもおもしろいのでぜひ見てほしい。 2: 尾張地方の人間は「他県民にもわかりやすいだろう」という謎の配慮のもと、出身地を『名古屋』と言うことが多い。厳密には名古屋市内の住民のみに許された特権だが、自分が嘘をついていると感じることはない。

大学のスクーリングに出席するため東京へ。地方民と東京23区に住む人とでは価値観が全く違いました。