明日はバレンタインデー。 わたしが小学生のときの話を一席。 * * * 掃除の時間に、女の子二人に話しかけられた。 「もうすぐバレンタインデーだよね。あの男の子のこと、好きなんでしょ？おうちにチョコ渡しに行ってみない？わたしたち、近くで応援してるからさ！」 わたしがあまりにも怪訝そうな顔をしたのだろう。もう一人が続けた。 「実はAちゃんもあの子のこと好きでさ、あの子の家まで行ってチョコ渡しに行こうって話になってて。あの子のこと好きなの知ってるのに、とろちゃんにだけこのこと黙ってるの、なんか変じゃん？だから一緒に渡しに行こうよ。」 「行かないなら、いますぐ大声でクラスのみんなにばらすよ？」 いまどきの小学生は駆け引きというか、交渉スキルもすごいんだなー、と。 なんなら脅迫までしてきた。 彼女たちにバレているということは、クラスに知れ渡るのも時間の問題だろう。 小学生の情報拡散力はすさまじい。まして恋愛沙汰となれば、うちの学年はやけに食いつきが良かった。 脅迫の件に関してはもはや恐れる必要などない。残念ながら、いずれバレる。 しかしまったくもって不要な情報を拡散されてしまった男の子はどう思うだろうか。 わたしが判断を誤ったばかりに今後数日間学年中……もっと悪いと学校中から好奇の視線にさらされるかもしれない。 残念ながら、わたしは小学生時代から陰キャコミュ障である。 相手のことはそっと好きでいたかったのだが、こうなってしまっては致し方ない。 脅しに屈するのは不本意だが、わたしは男の子の家にチョコを渡しに行くことに決めたのだった。 * * * あっという間に当日がやってきた。 すぐに下校して、母親にも手伝ってもらいながら用意したプレゼント用のチョコを手に持ち、話しかけてきた同級生に指定された待ち合わせ場所に向かった。 着いた頃には、ちょうどAちゃんが渡しているタイミングだった。 同級生二人は、携帯電話でその様子を撮影していた。 当時の携帯電話（いまで言うところのガラケー）というのは、現代のスマホとはスペックが雲泥の差であり、動画撮影など不可能である。 解像度のあまりよくない写真を数十枚も撮ると、もう容量がいっぱいになる。 シャッタースピードもまったく期待できないため、狙った一瞬を写真に収めるのは非常に難しかった。 この地域はそれほど都会ではないので、生徒の大半は携帯電話など持っておらず、所持している小学生は大変貴重であった。 ましてカメラ付きの携帯電話というのは機種代金が少し高額で、それを持っているだけで恵まれた環境にあるのだとわかった。 小学生がカメラ付き携帯電話を持っている場面に遭遇したことのないわたしにとっては、すべてが新鮮すぎた。 ゆえに目の前で何が起きているのか、よく理解できなかった。 一瞬Aちゃんがチョコを渡している場面の写真を見せてくれたが、携帯電話に焦点を合わせる前に、写真はわたしの視界から消えた。 二人があまりに興奮しすぎて跳ね回っているためである。 「あー！まじやばかったー！ じゃあ次はとろちゃんの番だね。がんばってね！」 わたしは男の子の家に向かった。 一本道にも関わらず、あまりに緊張して果てしなく遠く感じた。 いざ玄関を目の前にすると心が折れそうになったが、勢いでインターホンを押した。 どうせ撮影されるんだろうなと思い、同級生のいる方に目を向けると、ニヤニヤしながらこちらを見守っていた。 インターホン越しに男の子の声がして、すぐに玄関から男の子が出てきた。 なんて言って渡したのか、もはや記憶に残ってない。 手に持っていたチョコの入った袋を渡した。男の子は大人みたいな笑顔で受け取ってくれた。 わたしはすぐにその場をあとにした。 * * * 戻ると、同級生とAちゃんは携帯電話を覗き込んでいた。 わたしは緊張からの解放感でハイになっており、同級生たちに構わず勝手に感想を喋ろうとして、 すぐにやめた。 わたしも一緒になって、携帯電話を覗き込んだ。 「いやー、二回目だからいい写真が撮れた。送信、っと！」 送信される前の画面ははっきりと覚えている。 「番外編♡」というメッセージとともに、渡している瞬間のわたしの写真が添付されていた。 自分としては、慣れないイベントをよく乗り切った、と。 心の中は達成感でいっぱいだったのだ。 他人から見た現実は違った。 自分は「番外編」だった。 よく「自分の人生の主役は自分自身だ！」なんて熱く語っている人がいるが、あんなの大嘘つきだ。 だって目の前で「番外編」として、いままさに他人に紹介されようとしているのだから。 メールの宛先は同級生たちの親友である、隣のクラスの女の子だった。 （いま考えると、メールの宛先が「クラス全員」ではなかったのは本当に運がよかったと思う。） 思えば最初に誘われた時点からわたしは「番外編」だったじゃないか。 チョコレートを準備している最中に、舞い上がって勘違いしてしまったのだ。 同級生たちになにか話しかけられた気がしたが、なにも頭に入ってこなかったので適当な返事だけして、帰宅した。 * * * 数日間は、この黒歴史を完全に記憶から抹消したくて、憂鬱な日々が続いた。 誘ってきた同級生二人とは遭遇しないように過ごした。 しばらくするとこの日の出来事を本当に忘れてしまっていた。 いつもの小学校生活を送っていたある日。 男の子の妹から廊下で声をかけられた。 「ねえねえ。好きなキャラクターとかいる？」 彼女とはこれまで一言も会話をしたことはなかった。 一応わたしが先輩なので、まず挨拶とか。あと『ですます』ぐらいは付けて欲しかったなあ...、などとダサいことを考えつつ、 「え、あの、基本的にはあざらしが好きで、キャラクターで言うとしろたんか、あ、有名じゃないよね。じゃあSan-xから出てるまめゴマもすごく好きだよ。」 と陰キャ特有の早口で答えた。 彼女はなにも言わず、ニヤニヤしながらどこかに行ってしまった。 なんだか不思議なイベントが発生したな...と思い、Aちゃんに確認してみたところ、やはり男の子の妹に好きなものを聞かれたらしい。 バレンタインデーから丸一ヶ月後。 例の誘ってきた同級生二人から「授業が終わったらすぐに下校して、絶対に家で待機してるんだよ」と言われた。 しかたなく、言われたとおりに家で待機しているとインターホンが鳴った。 いつもは絶対に出るなとキツく言われているのだが、その時だけは母親からインターホンの受話器を取るように言われた。 玄関の扉を開けると、男の子が立っていた。 わたしが渡した小さなチョコより、二回りは大きいであろう紙袋を抱えて。 なにが起きているのかよくわからなかったが、 男の子からは一ヶ月前のチョコレートへの感謝の気持ちを伝えられた。 お礼を伝えて、わたしは家に戻った。 紙袋の中には、わたし一人では期限までに食べきれないほどのお菓子と、わたしの大好きなまめゴマグッズなど、素敵なものがぎっしり詰まっていた。 翌日、同級生とAちゃんにこの事を話した。 Aちゃん宅でも同様のイベントが発生したらしい。 「あの男の子のお母さん、こういうイベント大好きなんだよね！ いいねー！ホワイトデーってやつだよー、キャー！」と同級生は盛り上がっていた。 まさか男の子のお母様や妹さんまで巻き込んでしまうとは思っておらず、なんとも申し訳ない気持ちになった。 なんだか関係者一同から面白がられているだけのような気もして、ちょっとモヤモヤした。 でも素直にうれしかった。 15年以上経ったいまもこうして、一連の流れを覚えているのだから。 * * * 付き合うとか、振られたとか、そういったことはない。これで終わりである。 この話には読者の皆さんが期待するような（？）、恋愛マンガのような展開は存在しないのだ。 わたしが番外編なのであれば、やはりAちゃんが主役でハッピーエンドなのかとも考えたのだが、 小学生の行動や言動がすべて合理的だと捉えるのは誤りだろう。 だから、そのあと男の子とAちゃんがどうなったかは全く知らない。 男の子からは、わたしがSNSで結婚報告の投稿をしたときに、祝福のコメントをいただいた。 この記事はすぐさまネットの海に沈んでいくだろう。せいぜいネットのおまいらに「番外編で草」とか言われて引用されるのが関の山だ。 直接言われたわけでもない、他人のメッセージに添えられただけの一言をいまだに根に持ってブログに投稿するなんて、まったくもって善い行いではない。 そんなわたしだが、好きな人に思いを伝えようと行動する勇気を尊重したい。 最初は本意ではなかったとは言え、わたしはあの日に行動できてよかったと思っている。 バレンタインデーに頑張る人を、陰ながら全力で応援しています。

小学生時代のあるバレンタインデーの出来事です。

番外編の女

RSS(Rich Site Summary)とは、Webサイトの更新情報をユーザーに対して通知できるフォーマットです。 Wikipediaによると、1999年の"RSS0.9"がRSSの起源とのことなので、25年ほど前から存在する技術ということですね。*1 「RSSリーダー」と呼ばれる専用ソフトウェアや、RSS対応のブラウザで通知の受け取りが可能です。 いまや「通知」機能といえば、スマホアプリのプッシュ通知が馴染み深いですが、現在でもFeedly, InoreaderなどのRSSリーダーが情報通のビジネスパーソンを中心に根強い指示を集めている印象です。 本記事ではそんな古の技術であるRSSを、【令和最新版】Webアプリ開発フレームワークのNext.jsに搭載する方法をご紹介します。 具体的にはこんな感じでサムネイル画像を付けて配信します。スクショはInoreaderの様子です。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/677c9ab7d8914177a6228ddc34af12f5/85B3E431-0A83-4B2F-B2C8-69EB3172F399.jpeg" alt=""> Gatsbyの記事と同じ画像じゃないかって？ そうですよ。trogがGatsbyで搭載した機能のマイグレーションというやつです。 （なんのことかわからない方のための関連ページ： <a href="https://microayatron.com/gatsby-feed" target="_blank" rel="noopener noreferrer">【Gatsby】RSSフィードをサムネイル画像付きで配信する - trog</a> ） それではNext.jsアプリケーションでもRSS配信していきましょう！ <h2 id="h31d727ccda">準備</h2><h3 id="hdbf98b940f">前提条件</h3><ul><li>Next.jsアプリケーションが構築済み</li><li>RSS 2.0準拠</li></ul> 弊ブログtrogではCMSとしてmicroCMSを採用しており、この記事もmicroCMSから記事を投稿しています。 基本的にはNext.jsで構築されたアプリケーション全般で使用できるように説明します。 実装解説の最後に、microCMSから取得した情報のRSSファイルを作成するコードをご紹介します。 <h3 id="h7fd6208c36">使用パッケージ</h3><ul><li>RSS - <a href="https://www.npmjs.com/package/rss" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/rss</a></li><li>xmlbuilder2 - <a href="https://www.npmjs.com/package/xmlbuilder2" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/xmlbuilder2</a></li></ul> xmlbuilderのほうが人気がある(らしい)ですが、最新版のxmlbuilder2のほうが使いやすくなっておりオススメです。 <h2 id="h30aa79f147">xmlbuilder2のメソッド</h2>今回は、xmlbuilder2のXML生成メソッドのうち、<code>.ele()</code>, <code>.txt()</code>, <code>.up()</code>を使用します。 <h3 id="hab6e255591">.ele()</h3><code>.ele(name, attributes, text)</code>メソッドでは、新しいXML要素を作成できます。<ul><li><code>name</code>：新しい要素の名前です。</li><li><code>attributes</code>（オプション）：新しい要素の属性を定義するオブジェクトです。</li><li><code>text</code>（オプション）：新しい要素のテキスト内容です。</li></ul>例えば、以下のコードは<code>&lt;item isPermaLink="false"&gt;Hello&lt;/item&gt;</code>というXML要素を作成します。<pre><code>doc.ele('item', { isPermaLink: "false" }, 'Hello');</code></pre><h3 id="h67e0e575df">.txt()</h3><code>.txt()</code>メソッドは、XML要素の中に直接テキストを挿入できます。 例えば、以下のコードは<code>&lt;title&gt;</code>要素にHelloというテキストノードを追加します。<pre><code>doc.ele('title').txt('Hello');</code></pre> これにより、<code>&lt;title&gt;Hello&lt;/title&gt;</code>というXMLが生成できます。 <h3 id="h3eac8b5da9">.up()</h3><code>.up()</code>メソッドは、いまある要素の親要素に移動します。これは、ネストされた要素を作成するときに便利です。 例えば、以下のコードは<code>&lt;channel&gt;</code>要素の中に<code>&lt;title&gt;</code>要素を作成します。<pre><code>doc.ele('channel').ele('title',&nbsp;{},&nbsp;'Hello').up();</code></pre>このコードは、<code>&lt;channel&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/channel&gt;</code>というXMLを生成します。 <code>.up()</code>メソッドを呼び出すことで、<code>&lt;title&gt;</code>要素の親である<code>&lt;channel&gt;</code>要素に戻ります。 これにより、<code>&lt;channel&gt;</code>要素の中に、さらに子要素を追加できます。 <h2 id="h0d0955a620">基本のRSS情報</h2><code>scripts/generate-rss.mjs</code>という名前でファイルを作成します。 普通の*.jsファイルでも問題ないです。*2 RSS情報の核となる部分はこんな構成です。(イメージ)<pre><code>&lt;item&gt;
 &lt;title&gt;記事のタイトル&lt;/title&gt;
 &lt;link&gt;記事のURL&lt;/link&gt;
 &lt;pubDate&gt;記事の公開日&lt;/pubDate&gt;
 &lt;description&gt;記事の要約&lt;/description&gt;
 &lt;guid isPermaLink="false"&gt;記事のパス&lt;/guid&gt;
 &lt;media:content url="サムネイル画像のURL" width="1920" height="1080" media="image"/&gt;
&lt;/item&gt;</code></pre> <code>title</code>から<code>description</code>までは載せたい情報をそのまま記載してください。 <code>guid</code>は、記事を一意に識別するために必要な情報です。 タイトルにしてしまうと変更する可能性があるので、記事のURLを指定しています。 <code>guid</code>は任意の値を指定できるものの、URLが入ることが前提のようです。*3 <code>isPermaLink</code> 属性を<code>false</code>に指定しておくと、<code>guid</code>がURL(フルパス)ではないことをRSSのルールに則って示せるようです。 ...が、サイトによって<code>guid</code>に指定している値がバラバラだったり、そのタグ名だけでは「URLのフルパスを指定する」というルールがわかりづらく、周知されていない様子です。 URLは<code>link</code>で解釈してもらうことにしています。（trogでは<code>guid</code>はお飾りになっています） 核となる<code>&lt;item&gt;</code>の中についてはこのように実装しました。<pre><code> articles.forEach((article) =&gt; {
 feed.ele('item')
 .ele('title').txt(article.title).up()
 .ele('link').txt(`https://microayatron.com/${article.slug}`).up()
 .ele('pubDate').txt(article.publishedDate).up()
 .ele('description').txt(article.metaDescription).up()
 .ele('guid', { isPermaLink: "false" }).txt(`https://microayatron.com/${article.slug}`).up()
 .ele('media:content', {
 url: article.image?.url,
 width: 1920,
 height: 1080,
 media: 'image',
 }).up();
 });</code></pre> <code>articles</code>はmicroCMSから取得した、記事情報のかたまりです。<code>feed</code>はヘッダー定義の紹介時に説明します。 <h2 id="h6b5736a504">画像情報</h2>Media RSS タグ( <code>&lt;media:content&gt;</code> )には画像のURL、画像の高さ・幅、メディアの種類を指定します。<pre><code>.ele('media:content', {
 url: article.image?.url,
 width: 1920,
 height: 1080,
 media: 'image',
}).up();</code></pre> メディアの種類は今回の場合<code>image</code>と指定してください。 これらの項目を「属性」として指定する必要があるため、オブジェクトにまとめて突っ込みます。 これだけだと”Namespace prefix media on content is not defined.”のエラーが表示されます。 Media RSS タグを使用するために、RSSのヘッダー部分に <code>xmlns:media="http://search.yahoo.com/mrss/"</code>を定義する必要があります。 ヘッダー定義はこのようにしました。<pre><code> const feed = create({ version: '1.0', encoding: 'UTF-8' })
 .ele('rss', {
 'xmlns:dc': 'http://purl.org/dc/elements/1.1/',
 'xmlns:content': 'http://purl.org/rss/1.0/modules/content/',
 'xmlns:atom': 'http://www.w3.org/2005/Atom',
 'version': '2.0',
 'xmlns:media': 'http://search.yahoo.com/mrss/'
 })
 .ele('channel')
 .ele('title').txt('trog').up()
 .ele('link').txt('https://microayatron.com/').up()
 .ele('description').txt('RSS feed for microayatron.com').up();</code></pre>feedという変数を定義して、その中にどんどん項目を突っ込んでいます。 ヘッダーなど外枠の生成が終わったら、さきほど説明した<code>item</code>の中身を生成します。 RSSファイルを生成するとこうなります。<pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"&gt;
 &lt;channel&gt;
 &lt;title&gt;trog&lt;/title&gt;
 &lt;link&gt;https://microayatron.com/&lt;/link&gt;
 &lt;item&gt;(先述の記事情報1)&lt;/item&gt;
 &lt;item&gt;(記事情報2)&lt;/item&gt;
 &lt;item&gt;(記事情報3)&lt;/item&gt;
 ...
 &lt;/channel&gt;
&lt;/rss&gt;</code></pre> <h2 id="he4d8f1eca6">RSS生成</h2><h3 id="h922edff87b">実装</h3>配信用のRSS情報を記載した<code>rss.xml</code>を生成します。 具体的な生成場所は、<code>/public/feed/rss.xml</code>としています。 こうすることでRSS配信URLを、<code>https://hogehoge.com/feed/rss.xml</code>とすることができます。 実装のまとめとして、microCMSを採用している場合の<code>generate-rss.mjs</code>を載せておきます。<pre><code>import { createClient } from 'microcms-js-sdk';
import fs from 'fs';
import path from 'path';
import { create } from 'xmlbuilder2';

const filePath = path.resolve('public/feed/rss.xml');

// ディレクトリが存在するか確認、存在しない場合は作成する
const dir = path.dirname(filePath);
if (!fs.existsSync(dir)){
 fs.mkdirSync(dir, { recursive: true });
}


// ファイルが存在するか確認、存在しない場合は作成する
if (!fs.existsSync(filePath)) {
 fs.writeFileSync(filePath, '', 'utf8');
}


const client = createClient({
 serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN, 
 apiKey: process.env.MICROCMS_API_KEY, 
});


const generateRssFeed = async () =&gt; {
 try {
 // microCMSから記事を取得する
 const response = await client.getList({
 endpoint: 'blog', // 環境に合わせて変更してください
 queries: { limit: 100, orders: '-publishedDate' } // 公開日時が新しい順
 });

 const articles = response.contents || [];

 // フィードの作成
 const feed = create({ version: '1.0', encoding: 'UTF-8' })
 .ele('rss', {
 'xmlns:dc': 'http://purl.org/dc/elements/1.1/',
 'xmlns:content': 'http://purl.org/rss/1.0/modules/content/',
 'xmlns:atom': 'http://www.w3.org/2005/Atom',
 'version': '2.0',
 'xmlns:media': 'http://search.yahoo.com/mrss/'
 })
 .ele('channel')
 .ele('title').txt('trog').up()
 .ele('link').txt('https://microayatron.com/').up()
 .ele('description').txt('RSS feed for microayatron.com').up();


 // フィードに記事を追加する
 articles.forEach((article) =&gt; {
 feed.ele('item')
 .ele('title').txt(article.title).up()
 .ele('link').txt(`https://microayatron.com/${article.slug}`).up()
 .ele('pubDate').txt(article.publishedDate).up()
 .ele('description').txt(article.metaDescription).up()
 .ele('guid', { isPermaLink: "false" }).txt(`https://microayatron.com/${article.slug}`).up()
 .ele('media:content', {
 url: article.image?.url,
 width: 1920,
 height: 1080,
 media: 'image',
 }).up();
 });


 return feed.end({ prettyPrint: true });
 } catch (error) {
 console.error('Error fetching data from MicroCMS:', error);
 throw error;
 }
};

const generateAndSaveRssFeed = async () =&gt; {
 let rssFeed = await generateRssFeed();

 if (rssFeed) {
 fs.writeFileSync(filePath, rssFeed);
 console.log('RSS feed generated and saved.');
 }
};

generateAndSaveRssFeed();</code></pre> <h3 id="ha72acf6b59">RSSファイル生成の流れ</h3>trogではビルド時にRSSファイルを生成するように設定しています。 trogの記事が更新されるまでの流れを簡単にご説明すると... <ol><li>microCMSから[公開]ボタンを押して記事を公開</li><li>Webhookで接続されたNetlify(ホスティングサービス)で公開されたことを検知</li><li>microCMSから最新の情報を取得のうえ、Netlifyがtrogをビルド実行</li><li>公開用のページ(HTMLファイル)が生成される</li></ol> ということで、trogでは自動でサーバーに最新記事がアップロードされる仕組みにしてあります。 （設定すればちゃんと動くようにmicroCMSがあらかじめ用意してくれてるだけ） 先述の<code>generate-rss.mjs</code>の実装の中で、microCMSから最新記事を取得するようにしました。 ビルド時に<code>generate-rss.mjs</code>を実行することにより、RSS情報に自動で更新した記事が追加される...という流れにしていきます。 * * * それではRSS生成のトリガーとなる部分を実装していきます。 <code>next.config.js</code>に<code>child_process</code>モジュールを使用して、<code>scripts/generate-rss.mjs</code>スクリプトを同期的に実行するよう設定します。<pre><code>const { execSync } = require('child_process');

execSync('node scripts/generate-rss.mjs', { stdio: 'inherit' });</code></pre> <code>package.json</code>の<code>script</code>部分に、<code>generate-rss</code>コマンドを記載します。<pre><code>"scripts": {
&nbsp; &nbsp; "build": "node build.js &amp;&amp; next build",
&nbsp; &nbsp; "generate-rss": "node scripts/generate-rss.mjs"
&nbsp; },</code></pre> これでビルド時に<code>/public/feed</code>に<code>rss.xml</code>が生成されるようになります。 採用しているパッケージやツールに合わせて、お好みで変更してください。 <h2 id="h63ad3943f9">テスト</h2>正しく生成されているかどうか確認していきます。 まずは開発環境でさきほど定義した<code>npm run build</code>を実行したのちに、<code>next start</code>を実行します。 <code>http://localhost:3000/public/feed/rss.xml</code>にアクセスして、RSS情報が確認できれば成功です。 ここで<ul><li>生成されたRSS情報のヘッダー情報に<code>xmlns:media="http://search.yahoo.com/mrss/"</code>が含まれていること</li><li>各記事情報の中に<code>&lt;media:content&gt;</code>が含まれていること</li></ul>の２点を確認してください。 Chromeで確認する場合は、こんな感じのカラフルな画面になっているかもしれません。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/ed28fa0913a1484189e1519ee140e291/nexr-rss-1.png" alt=""> xmlとして誤りがある場合はエラーが表示されます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/c0cc89c3ebc24d7c8f0b7ebcae6916d7/nexr-rss-2.png" alt=""> よかったらデバッグの参考にしてください。 <h3 id="h9e9cceb515">RSSリーダーから確認(デプロイ後)</h3>アプリケーションを本番環境にデプロイすれば、Feedly, InoreaderなどのRSSリーダーから確認できます。 各RSSリーダーが、ブログから配信されたRSS情報を解釈して、わかりやすいUIに落とし込んでいます。 お好きなRSSリーダーから、本番環境の配信先URL(例: <code>https://hogehoge.com/feed/rss.xml</code>)を試しに購読して、確認してみてください。 <h2 id="h9be0c3393d">おわりに</h2>最近では分散型SNSがユーザーアカウントごとの投稿をRSSを配信しているようです。 それまでRSSを使ったことのなかった世代でも、MiskeyやマストドンなどでRSSに触れる機会が増えることになります。 ご自身のブログでもRSS配信機能を実装すれば、分散型SNSからRSSの存在を知った新参の情報通からのアクセスが期待できるようになるかもしれませんね。 「レターパックで現金送れ」はすべて詐欺です。*4 皆さまくれぐれもお気をつけください。 * * * 1: <a href="https://ja.wikipedia.org/wiki/RSS#:~:text=%E6%9C%80%E5%88%9D%E3%81%AERSS%E3%81%A7%E3%81%82%E3%82%8B,%E7%AD%96%E5%AE%9A%E3%81%97%E3%81%9F%E3%82%82%E3%81%AE%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82" target="_blank" rel="noopener noreferrer">https://ja.wikipedia.org/wiki/RSS#:~:text=%E6%9C%80%E5%88%9D%E3%81%AERSS%E3%81%A7%E3%81%82%E3%82%8B,%E7%AD%96%E5%AE%9A%E3%81%97%E3%81%9F%E3%82%82%E3%81%AE%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82</a> - RSS - Wikipedia 2: 仕事ではTypeScriptで開発していますが、trogはTypeScript化をサボっており、いまだにJavaScriptのままです。でもimportは書き慣れたECMAScriptを使いたいため、*.mjsを採用しました。 ちなみにtrogを構成するファイル群の中でmjsはここだけです。ただただ整備をサボっています。 *3: <a href="https://www.rssboard.org/rss-draft-1#element-channel-item-guid" target="_blank" rel="noopener noreferrer">https://www.rssboard.org/rss-draft-1#element-channel-item-guid</a> - RSS 2.0 Specification <a href="https://validator.w3.org/feed/docs/error/InvalidPermalink.html" target="_blank" rel="noopener noreferrer">https://validator.w3.org/feed/docs/error/InvalidPermalink.html</a> "guid must be a full URL, unless isPermaLink attribute is false" - &nbsp;Feed Validation Service <a href="https://support.google.com/feedburner/answer/79014?hl=ja" target="_blank" rel="noopener noreferrer">https://support.google.com/feedburner/answer/79014?hl=ja</a> 「フィード コンテンツの記事のリンクが機能しないのはなぜですか？」 - FeedBurner ヘルプ *4: <a href="https://dic.pixiv.net/a/%E3%83%AC%E3%82%BF%E3%83%BC%E3%83%91%E3%83%83%E3%82%AF%E3%81%A7%E7%8F%BE%E9%87%91%E9%80%81%E3%82%8C" target="_blank" rel="noopener noreferrer">https://dic.pixiv.net/a/%E3%83%AC%E3%82%BF%E3%83%BC%E3%83%91%E3%83%83%E3%82%AF%E3%81%A7%E7%8F%BE%E9%87%91%E9%80%81%E3%82%8C</a> - レターパックで現金送れ (れたーぱっくでげんきんおくれ)とは【ピクシブ百科事典】

Next.jsで作成したアプリにMedia RSS タグ( <media:content> )タグを設定のうえ、サムネイル画像の情報込みでRSS配信する方法をご紹介します。

【Next.js】RSSフィードをサムネイル画像付きで配信する

あけましておめでとうございます。 2024年は大変な災害からの幕開けとなりました。一刻も早い復興をお祈り申し上げます。 今後はどうか素敵なニュースで溢れる一年になりますように🙏<h3 id="hcf83e1357e"> </h3><h2 id="h9707d3a59a">概要</h2>管理人の近況報告と、今後の更新予定のお知らせです。 <h2 id="hbf3b167600">Q. 昨年8月以降の更新がなかったけど何してた？</h2>A. このブログの実装に費やしてました。RSSの復活と、Push通知機能の改修です。 <h3 id="he53912881b">RSS</h3>Gatsby版trogではGatsbyプラグインでRSSを実装していましたが、いまご覧いただいているNext.js版trog用には、改めてRSS機能を実装し直す必要がありました。 Next.js版trogリリース後、RSS関連ページは「お探しのページは見つかりませんでした」と表示するのみで、RSSが使用不可能であることは非常にわかりづらい状態でした。申し訳ありませんでした。 昨年12月にGatsby版trogと変わりなく、正常に使えるように実装しました。引き続きRSS配信をお楽しみください。 また今回実装した、Next.jsでRSSを画像付きで配信する方法について、記事にまとめる予定です。気長にお待ちください🙋‍♀️ <h3 id="hb258e4b797">Push通知（延期）</h3>現在のtrogは、わたしが任意のタイミングでFirebase Cloud Message(FCM)のコンソール画面から、通知を配信しています。 通知にはタイトル・説明文・画像(一部端末のみ)を表示しており、通知をクリックするとtrogトップベージに遷移します。 昨年12月からクリックで任意のページに遷移できるように改修していたのですが、納得のいく仕上がりにならず、本機能のリリース延期を決定しました...。 next-pwaっていうパッケージを使用して、Service Worker<s>の実装をサボって</s>の動作をお任せしていたんですが、 このパッケージ、数年更新されてないんですよ。 有志による更新が行われている <a href="https://www.npmjs.com/package/@ducanh2912/next-pwa" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/@ducanh2912/next-pwa</a> ←これを使うのが良さそうではあるんですが... プログラムから送信コマンドの実行ではなく「FCMコンソールから配信」したいし、 「クリック時に任意のページに遷移」したいし、 iPhoneでも任意のページに遷移するように... とかあれこれ実装していたところ、 正常な通知と、クリック時の遷移先情報を持たないオバケ通知が、同時に配信されるようになってしまいました... これはService Workerのお勉強をもう少しちゃんとしてから、パッケージに頼りきらず、必要な部分を自力で実装した方が良さそう...という判断から、なくなく延期した次第です。 FCMを用いたPush通知実装時のデバッグ方法など、たくさん知見が得られましたので、いくつかに分けて記事にしたいなとは考えています。 <h2 id="h9be0c3393d">おわりに</h2>PWA、いいのになあ。 ソフトウェアアプリケーションを作ろうと思うと、PCであればWindows・Mac・Linux向け、スマホであればiPhone・Android向けにそれぞれアプリを開発する必要があるわけですが、 PWAを採用すればWebサイトを実装するだけで、全端末でネイティブアプリケーションと同様に動かせるんですけどね... 「App Storeからアプリをダウンロードする」っていう操作はもう広く浸透しているのに、 Safariを開いて「ホーム画面に追加」は全然操作してもらえないらしいですね。 わたしには面倒くささの差がわからないんですが、なにが違うんですかね。 それとFCMがWeb Push通知向けの送信JSONと受信JSONオブジェクトを正確にドキュメントに残してくれればなあ。 散々漁ったけど想定した動作にならなくて、コンソールから確認したところ、 全然見たことないオブジェクトが返ってきて憤慨しました🗯️ Firebaseバージョンの違いとかあるのかもですが、それも全部ドキュメントに残してくれー。 これじゃ需要が発生しても、Web Push通知開発者の人口が増えないんだよ！ 頼むからPWAもっと普及してくれ！ えー、わたしは今日も元気に生存してます。 次回の記事の更新までどうか気長にお待ちください。 寒い日が続きますがお体に気をつけてお過ごしください。 * * * ※タイトルは邦ロックファン向け釣りタイトルであり、自己満です。本記事との関連は一切ありません。 ▲THE NOVEMBERS「最近あなたの暮らしはどう」▲ - Youtube <a href="https://www.youtube.com/watch?v=i_u0DgvYu2I" target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=i_u0DgvYu2I</a>

管理人の近況報告です。年始めから悲しいニュースが飛び込んできていますが、2024年がどうか素敵な一年になりますように。

最近あなたの暮らしはどう

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=""> （2024/2/3 追記）各端末ごとのプッシュ通知の受け取り方法について説明した記事を作成しました。 通知設定ページにリンクを載せております。お使いの端末に設定していただけますと管理人が喜びます。 trog通知設定ページ: <a href="https://microayatron.com/settings/notifications" target="_blank" rel="noopener noreferrer">https://microayatron.com/settings/notifications</a> <h2 id="h51b5e95cb1">通知受取手順</h2>PC、Androidも同様の手順になります。iPhoneを中心にかんたんに通知受け取りに必要な手順を説明していきます。 ブラウザで当サイト <a href="https://microayatron.com/" target="_blank" rel="noopener noreferrer">https://microayatron.com/</a> にアクセスしてください。 <s>iPhoneの場合は必ずSafariから追加してください。(ChromeブラウザからではPWA化しません。)</s> （2024/2/3 追記）Chromeアプリ115以降で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に変更した影響だと考えられます。 Service Workerは1バイト以上の変更があれば自動で更新するはずなのですが、うまく動作していない可能性があります。 不具合の発生しているtrogアプリはお手数ですが端末からアンインストール(削除)いただくようお願いします。 <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からのお知らせをプッシュ通知で受け取ろう！

trogをご覧いただきありがとうございます。 このページでは、Windows OSを搭載したパソコンを対象として、Chromeブラウザを使用して、trogからプッシュ通知を受け取るための設定について説明します。 Microsoft Edgeからの設定方法は......需要がありそうなら後日書きます。 <h2 id="hd11bc1050e">Chrome</h2><h3 id="h087d1ad6b0">通知を受け取る</h3>TOPページ(<a href="https://microayatron.com/" target="_blank" rel="noopener noreferrer">https://microayatron.com/</a>)から、[通知設定]を押して、通知設定ページ(<a style="background-color:#ffffff" href="https://microayatron.com/settings/notifications/" target="_blank" rel="noopener noreferrer">https://microayatron.com/settings/notifications/</a>)に移動してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/cbbacdddf57f4bba92c5cd923e3d06ce/image9.png" alt=""> [通知を許可する]ボタンを押してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/00b0db30f900442c8f98b5679158815c/image5.png" alt=""> Chromeから、通知許可確認ダイアログが出ます。[許可する]ボタンを押してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/a2f14d09df2f429ea3b1c707efc96456/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-31%20190641.png" alt=""> URLバー横にあるサイト情報アイコンが、一瞬許可になります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/caa0b09ada49433fa3c507c205d1c7cd/image.png" alt=""> しばらく待つと、trog通知設定ページの表示が変わります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/baa7235e6fc94e95bfab97f4a28a56ab/image3.png" alt=""> 表示が切り替わらない場合はブラウザのリロード（ページ再読み込み）を試してください。 「trogからのお知らせを通知する設定になっています」と表示された状態になっていれば、プッシュ通知の受け取りが可能です。 trogでは記事の更新や、お知らせがある場合に通知します。 個人ブログのため不定期となりますので、ご了承ください。 <h3 id="h85738d6e69">通知を拒否</h3>URLバー横のサイト情報アイコンから、「通知」のトグルスイッチをOFFにしてください。 設定変更後はブラウザをリロード（ページ再読み込み）してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/d9a09cfcb82e4179952c74b00e45d9aa/image.png" alt=""> もしかしたら通知関連設定がサイト情報メニューに表示されていないかもしれません。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/460723eab8dd4ca7a3a66ccb46d97d17/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-31%20190113.png" alt=""> その場合は、サイトの設定→権限→通知に進んでいただき、通知を「ブロック」を選択してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/c4c04a36b4b44ae9b27f1c67d8e52cd5/image.png" alt=""> ブラウザをリロード（ページ再読み込み）後、trogの通知設定ページ(<a href="https://microayatron.com/settings/notifications" target="_blank" rel="noopener noreferrer">https://microayatron.com/settings/notifications</a>)をご確認いただきますと、 「Push通知を拒否しました」という表示に変わります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/6e5b78c57faf42fbb0213fa58e9b9b1c/image2.png" alt=""> これでtrogからのお知らせが通知されない設定になります。 <h2 id="h6277852d18">Chrome Webアプリ(PWA)</h2>trogではProgressive Web App（PWA）をご提供しています。 スタートメニューやタスクバーに追加していただくことで、ワンクリックでtrogにアクセスできます。 ブラウザから開くよりもアクセスが簡単でおすすめです。 また、アプリを手動で更新する必要はありません。インターネットに接続された環境でtrogアプリを起動するだけで、最新のアップデートやコンテンツが自動的に反映されます。 PWA版trogからもプッシュ通知が受け取れますので、ご興味がありましたらインストールをお願いします。 （※通常PWAはオフラインでの閲覧が可能ですが、現在対応できておりません。アップデートまでしばらくお待ちください。） <h3 id="h430b0b811f">アプリのインストール（追加）</h3>URLバー横の、[trogをインストールします]アイコンを押してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/a7615b53cb6941e8a8e15ef8ef34c8c0/image.png" alt=""> 確認ダイアログが出ますので、[インストール]を選択してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/30ccdd70b9da461b96f67151dc2f35a8/image.png" alt=""> お使いのPCにtrogアプリがインストールされます。このアプリの設定は、Chromeからアクセスしたmicroayatron.comの設定と連携しております。 さきにChrome版trogで通知ONにしている場合、アプリ版trogも同じ設定になっています。 その場合は通知設定は不要となります。 また、インストール後にOSからの通知で「trogをタスクバーにピン留めしますか？」と確認されるかもしれません。お好みで設定をお願いします。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/7a2102d8db2d40669138d0367b1f7ca3/image.png" alt=""> <h3 id="h087d1ad6b0">通知を受け取る</h3>アプリのトップページから、[通知設定]を押して、通知設定ページ(<a style="background-color:#ffffff" href="https://microayatron.com/settings/notifications/" target="_blank" rel="noopener noreferrer">https://microayatron.com/settings/notifications/</a>)に移動してください。 [通知を許可する]を押してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/f474ed5de0e14bd2939baffbb72ba053/image.png" alt=""> しばらく待つと、trog通知設定ページの表示が変わります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/baa7235e6fc94e95bfab97f4a28a56ab/image3.png" alt=""> 表示が切り替わらない場合はブラウザのリロード（ページ再読み込み）を試してください。 「trogからのお知らせを通知する設定になっています」と表示された状態になっていれば、プッシュ通知の受け取りが可能です。 trogでは記事の更新や、お知らせがある場合に通知します。 個人ブログのため不定期となりますので、ご了承ください。 <h3 id="h85738d6e69">通知を拒否</h3>アプリ上部の縦三点リーダ―を押して「アプリ情報」へ進んでください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/cf6cd522f58a4603902be27ff6d51b05/image.png" alt=""> 「通知」のトグルスイッチをOFFにしてください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/102f5e312de64f55839268381c2d6ca1/image.png" alt=""> 設定変更後は[再読み込み]ボタンを押してください。もし表示されなければ左上の↻を押してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/f05708d8a18148938d0a9447afc4c1ed/image.png" alt=""> ブラウザをリロード（ページ再読み込み）後、trogの通知設定ページ(<a href="https://microayatron.com/settings/notifications" target="_blank" rel="noopener noreferrer">https://microayatron.com/settings/notifications</a>)をご確認いただきますと、「Push通知を拒否しました」という表示に変わります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/6e5b78c57faf42fbb0213fa58e9b9b1c/image2.png" alt=""> これでtrogからのお知らせが通知されない設定になります。 * * * アプリ情報の中に通知がない場合は、設定→通知に進んでいただき、通知のトグルスイッチをOFFにしてください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/843568dd340142b2a8a7e4b8f837eb78/image.png" alt=""> <h3 id="hfdb96a5d55">アプリのアンインストール（削除）</h3>アプリ上部の縦三点リーダ―を押して「『trog』をアンインストール」を押してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/cf6cd522f58a4603902be27ff6d51b05/image.png" alt=""> 「trog」を削除しますか？の確認ダイアログが表示されます。[削除]を選択してください。 Chromeブラウザに残っているアプリのデータも削除する場合は、「Chromeからもデータを削除する」を選択してください。 * * * （参考）PWA関連情報: プログレッシブ ウェブアプリを利用する - Google Chrome ヘルプ <a href="https://support.google.com/chrome/answer/9658361?hl=ja&amp;co=GENIE.Platform%3DDesktop&amp;oco=0#zippy=%2Cwindowsmaclinux-%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%81%8B%E3%82%89%E3%82%A2%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B" target="_blank" rel="noopener noreferrer">https://support.google.com/chrome/answer/9658361?hl=ja&amp;co=GENIE.Platform%3DDesktop&amp;oco=0#zippy=%2Cwindowsmaclinux-%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%81%8B%E3%82%89%E3%82%A2%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B</a> <h2 id="h9ba2b91d2c">通知が届かない</h2>trogでは記事の更新や、お知らせがある場合に通知しております。 個人ブログのため、記事の更新は不定期となります。数か月更新がない期間もあります。 あらかじめご了承ください。 また、より操作しやすいアプリを目指して、PWA・プッシュ通知機能アップデートのためにお勉強しております。 更新までしばらくお待ちください。 <h2 id="hb6a20c1006">通知が複数届く</h2>Chrome、Microsoft Edge、Firefoxで、それぞれに通知設定が独立しております。 （登録すればした分だけ、各ブラウザから通知が配信されます。） お使いのブラウザからtrog通知設定ページ(<a style="background-color:#ffffff" href="https://microayatron.com/settings/notifications/" target="_blank" rel="noopener noreferrer">https://microayatron.com/settings/notifications/</a>)に移動していただき、不要なブラウザからの通知はOFFにしていただくようお願いいたします。 また端末によっては不具合が発生している場合も考えられます。 アプリの場合は、お手数ですが一度アンインストールしていただき、再度インストールをお試しください。 （基本的にPWAというのは、Service Workerに1バイト以上の変更があれば、自動で更新されるのですが...。何事も絶対ということはないので。） ブラウザの場合は<ul><li>キャッシュクリア（［Shift］＋［F5］キー、もしくは［Ctrl］＋［Shift］＋［R］キー）</li><li>ブラウザバージョンの最新化</li></ul>をお試しください。 * * * ここまでお読みいただきありがとうございました。 今後も読者の皆さまに楽しんでいただける記事をご提供できるように継続して活動していきます。 応援していただけますと幸いです🙏

Windowsでtrog(このブログ)からの更新プッシュ通知を受け取る方法について説明しています。