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フィードをサムネイル画像付きで配信する

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(このブログ)からの更新プッシュ通知を受け取る方法について説明しています。

Windowsでtrogからプッシュ通知を受け取る方法

trogをご覧いただきありがとうございます。 このページでは、Apple製OS「macOS」を搭載したパソコンを対象として、trogからプッシュ通知を受け取るための設定について説明します。 iPhone, iPadをお使いの方は別のページをご用意しておりますので、そちらのページをご覧ください。 Macはお使いのブラウザによって設定方法が変わります。 ChromeとSafariで大きく異なりますので、章を分けて解説します。 ご自身の環境に合わせて設定をお願いいたします。 <h2 id="hf51db285b6">Safari</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=""> Safariから、こんな感じの通知許可確認ダイアログが出ますので、[許可]ボタンを押してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/c8793fee35994575b22ad6ce0a8a1673/image6.png" alt=""> しばらく待つと、Safariのtrog通知設定ページの表示が変わります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/baa7235e6fc94e95bfab97f4a28a56ab/image3.png" alt=""> 表示が切り替わらない場合はブラウザのリロード（ページ再読み込み）を試してください。 「trogからのお知らせを通知する設定になっています」と表示された状態になっていれば、プッシュ通知の受け取りが可能です。 trogでは記事の更新や、お知らせがある場合に通知します。 個人ブログのため不定期となりますので、ご了承ください。 <h3 id="h395107c998">通知を拒否する</h3>macOSのメニューバー（画面最上部）から、[Safari]→[設定]を選択してください。 Safariの設定画面が表示されます。 上部タブを[Webサイト]に切り替えていただき、左のサイドバーから[通知]を選択してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/95dc58ec4f204655a578c5bee35b0264/image4.png" alt=""> microayatron.com(trog)からの通知が「許可」になっているかと思います。 プルダウンを選択して「拒否」に変更してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/0c598e878a0641688030a63bf4c51764/image.png" alt=""> Safariでtrogの通知設定ページを開いている場合、「拒否」に設定後しばらく待つと「Push通知を拒否しました」という表示に変わります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/6e5b78c57faf42fbb0213fa58e9b9b1c/image2.png" alt=""> 表示が切り替わらない場合はブラウザのリロード（ページ再読み込み）を試してください。 これでtrogからのお知らせが通知されない設定になります。 <h3 id="h071f1b2660">通知確認ダイアログが表示されない</h3>[通知を許可する]ボタンを押しても、Safariから通知許可確認ダイアログが表示されない場合があります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/c8793fee35994575b22ad6ce0a8a1673/image6.png" alt=""> macOSのメニューバー（画面最上部）から、[Safari]→[設定]を選択してください。 Safariの設定画面が表示されます。 上部タブを[Webサイト]に切り替えていただき、左のサイドバーから[通知]を選択してください。<img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/95dc58ec4f204655a578c5bee35b0264/image4.png" alt=""> 「通知の送信許可要求をWebサイトに許可」にチェックが入っていることを確認してください。 <h3 id="hec0b97f9a3">Webアプリ</h3>macOS Sonoma以降で、SafariからWebサイトをアプリケーションとしてDockに追加できるようになったようです。 管理人はまだSonomaに更新できていないので、ご希望の方は以下のページを参照してインストールをお願いします。 Mac で Safari Web アプリを使う - Apple サポート (日本) <a href="https://support.apple.com/ja-jp/104996" target="_blank" rel="noopener noreferrer">https://support.apple.com/ja-jp/104996</a> 通知のカスタマイズはこちらを参考にしてください。 MacのSafariでWebサイト通知をカスタマイズする - Apple サポート (日本) <a href="https://support.apple.com/ja-jp/guide/safari/sfri40734/mac" target="_blank" rel="noopener noreferrer">https://support.apple.com/ja-jp/guide/safari/sfri40734/mac</a> Chrome経由でWebアプリをMacにインストールする方法もございます。 ご希望の方は、この後のChromeの章をご確認ください。 <h2 id="hd11bc1050e">Chrome</h2>（※説明がWindows版Chromeのものになっています。だいたい似ていると思うのでよければ参考になさってください。近日中に修正する予定です、ご容赦ください。） <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）をご提供しています。Dockに追加していただくことで、ワンクリックで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アプリがインストールされます。 Safari経由で追加したアプリとは違い、このアプリの設定は、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>Safari、Safari経由で登録したWebアプリ、Chromeでそれぞれに通知設定が独立しております。 （登録すればした分だけ、各ブラウザ、アプリから通知が配信されます。） お使いのブラウザから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>キャッシュクリア（［Ctrl］＋［Shift］＋［R］キー）</li><li>ブラウザバージョンの最新化</li></ul>をお試しください。 * * * ここまでお読みいただきありがとうございました。 今後も読者の皆さまに楽しんでいただける記事をご提供できるように継続して活動していきます。 応援していただけますと幸いです🙏

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

Macでtrogからプッシュ通知を受け取る方法

trogをご覧いただきありがとうございます。 このページでは、iPhoneもしくはiPadを対象として、trogからプッシュ通知を受け取るための設定について説明します。 説明の都合上、対象端末はすべて"iPhone"と記載します。 iPadも同様ですのでご了承ください。 この記事を書いている2024年2月時点で、iPhoneでWebサイトからプッシュ通知を受け取る方法は一つだけです。<ol><li>SafariもしくはChrome経由でWebサイトを「ホーム画面に追加」</li><li>アプリがiPhoneのホーム画面に追加される</li><li>そのアプリを起動して、アプリからの通知を許可する</li></ol>これによりiPhoneでもWebサイトからプッシュ通知を受け取ることが可能になります。 （※iPhone向けプッシュ通知機能を実装したWebサイトのみ可能です。） trogではプッシュ通知配信に対応したProgressive Web App（PWA）をご提供しています。ホーム画面に追加していただくことで、ワンクリックでtrogにアクセスできるアプリです。 ブラウザから開くよりもアクセスが簡単でおすすめです。 具体的にはApp Storeからインストールしたアプリと同じようなプッシュ通知が、trogから配信されます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/42827703c2194e478d3929bfcf572a21/IMG_0323.jpeg" alt=""> アプリを手動で更新する必要はありません。インターネットに接続された環境でtrogアプリを起動するだけで、最新のアップデートやコンテンツが自動的に反映されます。 （※通常PWAはオフラインでの閲覧が可能ですが、現在対応できておりません。アップデートまでしばらくお待ちください。） * * * iOSの制約上、以下の方法ではプッシュ通知をサポートしておりません。<ul><li>Chromeブラウザ</li><li>Safariブラウザ</li></ul>PC版ブラウザとは挙動が異なります。あらかじめご容赦いただきますようお願いいたします。 <h2 id="ha0b03d0b75">対応バージョン</h2><ul><li>iOS 16.4以上</li><li>iPadOS 16.4 以上</li><li>Google Chrome アプリバージョン115以上</li></ul> （参考）iPhoneのSafariでWebサイトをブックマークに登録する - Apple サポート (日本) <a href="https://support.apple.com/ja-jp/guide/iphone/iph42ab2f3a7/17.0/ios/17.0#iph4f9a47bbc" target="_blank" rel="noopener noreferrer">https://support.apple.com/ja-jp/guide/iphone/iph42ab2f3a7/17.0/ios/17.0#iph4f9a47bbc</a> iPhoneの通知の設定を変更する - Apple サポート (日本) <a href="https://support.apple.com/ja-jp/guide/iphone/iph7c3d96bab/16.0/ios/16.0" target="_blank" rel="noopener noreferrer">https://support.apple.com/ja-jp/guide/iphone/iph7c3d96bab/16.0/ios/16.0</a> プログレッシブ ウェブアプリを利用する - Google Chrome ヘルプ <a style="background-color:#ffffff" 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="h430b0b811f">アプリのインストール（追加）</h2>本記事ではSafariを例に進めますが、Chromeからのアプリインストールも同様の手順となります。 Safari、またはChromeアプリから(<a href="https://microayatron.com/" target="_blank" rel="noopener noreferrer">https://microayatron.com/</a>)にアクセスしていただき、ブラウザの共有ボタンから、「ホーム画面に追加」を押してください。 <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=""> ブックマークをホーム画面に追加するような入力画面が表示されます。お好きな名前で登録してください。 ここで決めた名前がそのままアプリ名になります。 iPhoneの設定アプリからインストールしたPWAの管理が可能になることから、とくにこだわりがなければ「trog」のままにされるのをおすすめします。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/a843728f3ded4a11bec041c3d2fd21e7/IMG_0991.jpg" alt=""> <h2 id="h087d1ad6b0"> 通知を受け取る</h2>ホーム画面に追加にした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=""> 通知を許可していただくと、「trogからのお知らせを通知する設定になっています」と表示されます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/0a88430dda4e4a89b89fb53b903a812e/IMG_0309.png" alt=""> これでプッシュ通知の受け取りが可能な状態となります。 trogでは記事の更新や、お知らせがある場合に通知します。 個人ブログのため不定期となりますので、ご了承ください。 <h2 id="h395107c998">通知を拒否する</h2>iPhoneの「設定」アプリから、trogアプリの設定詳細ページに進んでください。 設定アプリの検索バーに「trog」と入力していただくことで候補に表示されます。また設定アプリをひたすらスクロールしていただき「trog」を見つけていただく方法でもOKです。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/2653d0131cc34d87b631171136c2912a/IMG_0318.jpg" alt=""> 「通知を許可」のトグルスイッチをオフにしてください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/4a1b3dc919c24fb2b014c6a7ce834652/IMG_0312.png" alt=""> これでtrogからのお知らせが通知されない設定になります。 trogアプリをiPhoneからアンインストール(削除)していただくことでも通知をオフにできます。 <h2 id="hfdb96a5d55">アプリのアンインストール（削除）</h2>こちらはApp Storeからインストールしたアプリや、ホーム画面に追加したブックマークを削除する操作と同様です。 ホーム画面でtrogアプリを長押しして、表示されたメニューから「ブックマークを削除する」を押して削除してください。 （参考）アプリをiPhoneから削除する - Apple サポート (日本) <a href="https://support.apple.com/ja-jp/guide/iphone/iph248b543ca/ios" target="_blank" rel="noopener noreferrer">https://support.apple.com/ja-jp/guide/iphone/iph248b543ca/ios</a> <h2 id="h9ba2b91d2c">通知が届かない</h2>trogでは記事の更新や、お知らせがある場合に通知しております。 個人ブログのため、記事の更新は不定期となります。数か月更新がない期間もあります。 あらかじめご了承ください。 また、より操作しやすいアプリを目指して、PWA・プッシュ通知機能アップデートのためにお勉強しております🦭📖 trogのアップデートまでしばらくお待ちください。 <h2 id="hb6a20c1006">通知が複数届く</h2>App Store経由でインストールしたアプリとは異なり、ブックマークのような感覚でアプリを追加いただけることから、PWAは複数個をホーム画面に追加することが可能です。 Safari、Chormeから一回ずつインストールした場合も、それぞれが独立したアプリとして振る舞います。 お手数ですが不要なtrogアプリは削除いただくようお願いいたします。 iPhoneの設定アプリからも、インストールしたPWAの管理が可能です。 trogアプリの通知設定をご確認いただくようお願いいたします。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/4a1b3dc919c24fb2b014c6a7ce834652/IMG_0312.png" alt=""> また、端末によっては不具合が発生している場合も考えられます。 可能であれば、iOSを最新バージョンに更新していただくようお願いいたします。 併せて、以下のページをご覧いただきながら、システム設定のSafariの設定からキャッシュとCookieの削除をお試しください。 "iPhone、iPad、iPod touch で Safari から閲覧履歴、キャッシュ、Cookie を消去する - Apple サポート (日本)" <a href="https://support.apple.com/ja-jp/105082" target="_blank" rel="noopener noreferrer">https://support.apple.com/ja-jp/105082</a> 再度trogアプリを起動した際に、自動で最新情報を取得します。 * * * ここまでお読みいただきありがとうございました。 今後も読者の皆さまに楽しんでいただける記事をご提供できるように継続して活動していきます。 応援していただけますと幸いです🙏

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

iPhone/iPadでtrogからプッシュ通知を受け取る方法

普段は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認証を自動テストする

Notion APIを使用した『Notion DB(バグなし)Any% RTA』、始めていきます。 RTAとは、リアルタイムアタック（Real Time Attack）の略です。 ゲームスタートからクリアまでの実時間（時計で計測した現実の所要時間）の短さを競います。 (引用元: <a href="https://dic.nicovideo.jp/a/rta" target="_blank" rel="noopener noreferrer">https://dic.nicovideo.jp/a/rta</a>) 手順をご紹介していきましょう。 <h2 id="h31d727ccda">準備</h2>使用するものは二つ。<ul><li>Notion</li><li>cURLコマンドを実行できるアプリケーション（POSTMAN、<s>コマンドプロンプト、PowerShell、</s>ターミナル、シェル、コンソール…）</li></ul> （2023/2/28 追記）Linux or Mac OSでの実行がおすすめです。Windowsの場合は注意点が多いので、POSTMANの使用をおすすめします。 WSLでもOKです。慣れている方はお好みの環境でどうぞ。 Notionアカウントの作成は、Notion アプリもしくは<a href="https://www.notion.so/" target="_blank" rel="noopener noreferrer">https://www.notion.so/</a>からどうぞ。 それではタイムアタックを始めます。タイマースタートです⏱ <h2 id="haf76937623">レギュレーション</h2><h3 id="hff2e17967f">データベースIDの取得</h3>まずは自分のアカウントにログインして、データベースを作成します。 例えばこんな感じで。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/a0e65d84c20f4bbdbe2c432f2265160f/image.png" alt=""> ビューのオプション（三点リーダ）から「ビューのリンクをコピー」してどこかに保管しておいてください。 このリンクは<code>https://www.notion.so/hogehogehoge?v=hugahugahuga</code>という形式になります。 "?v="より前の<code>hogehogehoge</code>をビューのIDとして使用します。 必ずデータベースに対して管理者権限のあるアカウントでログインしてください。 個人のアカウントで普通にデータベースを新規作成すれば、とくに問題は起こらないと思います。 <h3 id="h9783701adc">インテグレーションの作成</h3>Notionにはインテグレーション（コネクト）というものがあります。 <blockquote>お気に入りのツールをNotionにつなげる&nbsp;</blockquote> と<a href="https://www.notion.so/ja-jp/integrations" target="_blank" rel="noopener noreferrer">公式ページ</a>では説明されており、Github、Slack、Dropboxなどのインテグレーションが公式から提供されています。 VSCodeやChromeブラウザの拡張機能、npmのパッケージのようなものでしょうか？ そんなインテグレーションですが、Notion APIを使用するには、自分専用のインテグレーションを作成する必要があります。 ブラウザからポチポチと設定していくだけですので、作り方は非常に簡単です。 Notionにログインして、インテグレーション管理ページにアクセスします。 <a href="https://www.notion.so/my-integrations" target="_blank" rel="noopener noreferrer">https://www.notion.so/my-integrations</a> 「新しいインテグレーションを作成する」を押して、新規インテグレーション作成画面に進んでください。 基本情報を入力する画面が表示されますので、名前を入力します。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/8e28737b6d464e4d9832b0abd854500c/B9FF1C6B-1A18-4E8B-BD63-43AEE24A9ED6.png" alt=""> 「関連ワークスペース」は紐づけたいデータベースのあるワークスペースを選択してください。 「コンテンツの権限」は「コンテンツを読み取る」に必ずチェックを付けておいてください。他の項目はなんでもいいです。 すべて設定したら、「送信」を押してください。 シークレットトークンが発行されます。 こいつはBearer tokenに設定する値です。「secret_」も含めて文字列をコピーしておいてください。 <h3 id="h16374f7be1">APIを叩く</h3>ターミナルなどで以下のコマンドを実行してください。 <code>Notion-Version</code>の値は最新のバージョンを指定してください。 （参照: <a href="https://developers.notion.com/reference/changes-by-version" target="_blank" rel="noopener noreferrer">Changes by version - Notion API</a> ） <pre><code>curl --location --request GET 'https://api.notion.com/v1/databases/(ビューのID)' \
--header 'Notion-Version: 2021-08-16' \
--header 'Authorization: Bearer (シークレットトークン)'</code></pre> こんなレスポンスが返ってきたら成功です。データベースの値がJSON形式で取得できました。 <pre><code>{
&nbsp; &nbsp; "object": "database",
&nbsp; &nbsp; "id": "xxxxx",
&nbsp; &nbsp; "cover": null,
&nbsp; &nbsp; "icon": null,
&nbsp; &nbsp; "created_time": "2022-09-02TxxxxxZ",
&nbsp; &nbsp; "created_by": {
&nbsp; &nbsp; &nbsp; &nbsp; "object": "user",
&nbsp; &nbsp; &nbsp; &nbsp; "id": "xxxxx"
&nbsp; &nbsp; },
&nbsp; &nbsp; "last_edited_by": {
&nbsp; &nbsp; &nbsp; &nbsp; "object": "user",
&nbsp; &nbsp; &nbsp; &nbsp; "id": "xxxxx"
&nbsp; &nbsp; },
&nbsp; &nbsp; "last_edited_time": "2022-09-03TxxxxxZ",
&nbsp; &nbsp; "title": [
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "type": "text",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "text": {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "content": "しろたんとおともだち",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": null
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "annotations": {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "bold": false,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "italic": false,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "strikethrough": false,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "underline": false,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "code": false,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "default"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "plain_text": "しろたんとおともだち",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "href": null
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; ],
&nbsp; &nbsp; "description": [],
&nbsp; &nbsp; "is_inline": true,
&nbsp; &nbsp; "properties": {
&nbsp; &nbsp; &nbsp; &nbsp; "どうぶつ": {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": "xxxxx",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "どうぶつ",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "type": "select",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "select": {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "options": [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": "xxxxx",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "あざらし",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "default"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": "xxxxx",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "らっこいぬ",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "yellow"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": "xxxxx",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "アコヤ貝",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "blue"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": "xxxxx",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "ペンギン",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "gray"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; "なまえ": {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": "title",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "なまえ",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "type": "title",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "title": {}
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; },
&nbsp; &nbsp; "parent": {
&nbsp; &nbsp; &nbsp; &nbsp; "type": "page_id",
&nbsp; &nbsp; &nbsp; &nbsp; "page_id": "xxxxx"
&nbsp; &nbsp; },
&nbsp; &nbsp; "url": "https://www.notion.so/xxxxx",
&nbsp; &nbsp; "archived": false
}</code></pre> 無事にデータを取得できました。 ここでタイマーストップです⏱ 記録は21分13秒でした。慣れればもっとタイムが縮まりそうです。 レギュレーションにも改善の余地があるかもしれません（?） <h2 id="hf95c894a78">完走した感想</h2>公式は「入門」と書いていますが、初心者向けの記事としては少しハードルが高く感じました。ExcelやスプレッドシートからNotion DBにたどり着く方、結構いるのでは...？ Notionデータベースだと嬉しい場面って、わざわざRDBやMongo DBを建てるまでもない、実験的な作業だと思うので。NotionのGUIからデータベースの作成・更新・削除を実施→API経由で取得できるので、非常に便利なサンドボックスだと思います。 GETやらPOSTなどのHTTPメソッドについて知りたい方はMozillaの記事もご参照ください。 <a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Methods" target="_blank" rel="noopener noreferrer">HTTP リクエストメソッド - HTTP | MDN</a> * * * お気に入りのゲームでRTAをやってみたい方は、以下のサイトがおすすめです。 <a href="https://sites.google.com/view/rta-tool/preparation" target="_blank" rel="noopener noreferrer">RTAのガイド - RTAに取り掛かる前に</a> すでに、そのゲームの先駆者たちによる「学会」が設立されているかも知れません。ぜひ検索してみてください。 Notion推しのそこのあなた！同担大歓迎です！Notion DB学会でまたお会いしましょう！！！

Notion APIをお手軽に試してみます。あらかじめ自分で作成しておいたNotion DBの値を取得していきます。

【Notion API】最短で取得するNotionデータベース【RTA】

Notionとは、ドキュメント作成やタスク管理のできるアプリケーションです。現在は日本語に対応しています。 またNotionで作成した文章の共有が可能です。（無料プランは最大5人まで）<a href="https://www.notion.so/ja-jp/pricing" target="_blank" rel="noopener noreferrer">https://www.notion.so/ja-jp/pricing</a> 共有ページへのコメントの追加も可能です。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/fefb25e71dc04c7f85e601f265ba50b4/image3.png" alt=""> Notionには「テンプレート」が用意されています。公式が提供しているものや、Web上に公開されているものがあります。(<a href="https://www.notion.so/ja-jp/templates" target="_blank" rel="noopener noreferrer">https://www.notion.so/ja-jp/templates</a>) このギャラリーを眺めるだけでも、非常に自由度の高いツールであることがわかります。 そんなNotionの機能の中から、「データベース」について紹介します。 <h2 id="h94a80e3053">Step1. Webページの保存</h2>手軽にNotionのデータベース機能を活用できるのがWeb Clipperだと思います。 PCではGoogle Chrome拡張機能、スマホならNotionアプリから使用できます。 Webページを保存してみます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/49558cc7263c4f31baab06e120ecb40c/image4.png" alt=""> NotionがWebページ保存用のデータベースを新しく作ってくれます。 記事のタイトルもWebページから自動的に取得。Notionページのタイトルになります。 ここまではEvernoteやPocketと変わりなさそうですが、Notionデータベースのすごいところはここからです！ <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/a310fcaa61ea4840bbd5ea0e87d585a4/image2.png" alt=""> 保存したページ一覧をテーブルビューで表示した状態です。わかりやすいです。 タグ付けておけば、フィルターで絞り込んで表示できます。 また検索バー(🔍)にキーワードを入力して保存したページの検索もできます。これなら大量にWebページを保存しても、すぐに探し出せます。 （参考）Web Clipper - Notion（英語） <a href="https://www.notion.so/Web-Clipper-ba54b19ecaeb466b8070b9e683c5fce1" target="_blank" rel="noopener noreferrer">https://www.notion.so/Web-Clipper-ba54b19ecaeb466b8070b9e683c5fce1</a> <h2 id="hae79b0a041">Step2. オリジナルのデータベースを作る</h2>Webページ保存だけではありません。自分専用にカスタマイズした「表」の作成が可能です。 プログラマの皆さまにはわりとおなじみの「リレーショナルデータベース」(RDB)というやつです。あれが一瞬で作成できます。 試しに大学の履修計画データベースを作ってみたところ、非常にすっきり整理できて感動しました。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/13c6059bbe5f40f49e7dc5acda97e676/image.png" alt=""> ステータスごとにビューを切り替えて管理すれば、進捗が一目瞭然です。 <s>予定ばかりでちっとも履修していないことが一目見てわかるでしょう。</s> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/d90c8941d17042c9bbd0ea7a457d35d3/5225F2CF-BD53-4505-A802-D082C17AD4F9.jpeg" alt=""> テーブルビューだけでなく、カレンダーや、上の画像のようなタイムライン形式にも変更できます。日付を入力しておけば予定表として活用できます。 ここまでNotionを持ち上げておいてあれなんですが、テーブルの骨格作成や初期データ入力は、Excelもしくはスプレッドシートを使うのがおすすめです。 Notionが使いにくい……というより、カンマ区切りのデータをよしなに分散してセルに配置してくれる、表計算ソフトの神機能が優秀すぎます。 （この機能のおかげでわたしは定時に帰れるのです！） 他にもNotionには「<a href="https://extns.notion.site/Formula-308efd2ae1f34a7ebe3335ca2e66bcae" target="_blank" rel="noopener noreferrer">Formura</a>」というExcelにおける関数のような機能が用意されています。 データベースどうしの結合も可能です。エンジニアの皆さまは「JOIN句」が使用できると思っていただければ。 発展的な内容ですので、興味のある方は&nbsp;<a href="https://www.notion.so/ja-jp/help/relations-and-rollups" target="_blank" rel="noopener noreferrer">リレーションとロールアップ - Notion</a>&nbsp;をご覧ください。 唯一不便な点が、一度設定した「タイトル」列の移動ができないことです。RDBで言うところのプライマリーキー(主キー)の変更ができないということです。 Excelからデータを貼り付けてデータベースを作成する場合、タイトル列はNotionが自動的に決めます。 テキストが入ってる列が優先的に選ばれるようで。何度か試しましたが、ただの連番はタイトル列には選んでもらえませんでした🥺 データベース作成時には慎重にタイトル列を選定してください。 * * * 具体的な操作方法についてまったく触れておらず恐縮ですが、直観で操作できるUIになっており、大変わかりやすいと思います。 設定などの各種画面も日本語対応しているので、エンジニアだけでなく、多くの人にとって使いやすいツールに仕上がっています。 アカウント登録すれば無料ですぐに使えます。<a href="https://notion.so" target="_blank" rel="noopener noreferrer">https://notion.so</a> Notion沼にてお待ちしております。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/eff3dc79890f4c76b207f0ad0f7975b8/84CDDB36-869E-411F-A8A1-15E58931C207.jpeg" alt="">

試しに使ってみたのですが、一瞬でNotion沼にハマりました。データベース機能について紹介します。

【Notion】データベースが便利すぎて完全に沼。

Appleは2022年6月7日（日本時間）に開発者向けイベントであるWWDC22（世界開発会議）を開催しました。 iOS 16、macOS Venturaなど2022年登場の次期OSを発表。注目の新デバイス情報としてはM2チップを搭載するMacBook Airと13インチMacBook Proを発表しました。 多くのユーザーが待ち望んでいたような、華やかな発表はほんの一部。 WWDCは開発者向けイベントですので、次期OSから実装可能になるさまざまな「新機能」についても発表されています。 その新機能の一つである「SafariのWebプッシュ通知」対応についてご紹介します。 <h2 id="hff061f3c05">Webプッシュ通知とは</h2>スマートフォンのアプリから届くプッシュ通知と同じように、Webサイトからブラウザ経由でプッシュ通知を送る機能です。 2022年現在、AndroidスマホとWindowsPCがWebプッシュ通知に対応しています。 Webプッシュ通知は、Webサイトをスマホアプリな感覚で扱える、PWA(Progressive Web Apps)機能の一つです。 <h2 id="ha9a46605d6">Appleの発表</h2>AndroidやWindowsPCだけでなく、MacやiPhone、iPadなどのApple製品においてもWebプッシュ通知機能追加が望まれていました。 今回ついに公式から具体的なスケジュールが発表されました。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/1711ad7f72a7457ba1e711ed38f7f8d5/D6E8F0EA-6FAA-44D6-AD0F-B85408C37807.jpeg" alt=""> まずは今秋リリース予定のmacOS Venturaから、SafariでWebプッシュ通知機能を解禁するようです。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/66e904e6040748889e5a08cc4f1e3723/03E7288F-1251-4E8C-B888-1CFF66881473.jpeg" alt=""> そして、来年にはiOSとiPadOSにWebプッシュ通知を搭載する予定だそうです。 * * * 動画の中にはデモ実演パートがありました。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/e9eb8dfaecd5437296c68974de352344/C44E0531-B5B4-45B8-BCEF-9D52A9605F86.jpeg" alt=""> Webサイトを開くと確認画面が表示されます。ユーザーが「許可」を押すことで通知が届くようになります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/f55410f1f84144d29dc27cbcb17f4e63/47B7AD9B-2463-454C-8B22-D2CF5E5C422C.jpeg" alt=""> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/8ad8227810ac4a5495135ab8f323e42c/A8BE0BAE-11F5-4C1C-9A6E-7A931EEFEC28.jpeg" alt=""> 設定画面もしくはSafariの設定から、通知許可設定を変更することも可能です。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/4049b9d0a5874d38be4eff7485d5c3f4/03397542-A4DA-46A0-A8FA-3B950DCBAD4B.jpeg" alt=""> Mac用のアプリと同様、右上に通知が表示されます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/efec19ab4f9340d0966b20d526c35baa/AD3CA77A-99C8-402E-AAE3-FCBF4FCD002A.jpeg" alt=""> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/47461d59e94346d2844872a630cc418a/8F456CEA-0302-4533-B76D-3F76DD4C6C75.jpeg" alt=""> 通知をクリックすることで新しいウィンドウが開き、ブログ記事ページが表示されます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/6a67c3d19a8b48cbaf97e8e745027974/35759D91-B9D6-4083-BFCC-F0AF16D26B35.jpeg" alt=""> Webプッシュ通知の実装に、Appleの開発者用アカウントは必須ではありません。 <blockquote>We'll show you how you can remotely send notifications to people through the web standards-based combination of Push API, Notifications API, and Service Workers.&nbsp;</blockquote>(<a href="https://developer.apple.com/videos/play/wwdc2022/10098/" target="_blank" rel="noopener noreferrer">https://developer.apple.com/videos/play/wwdc2022/10098/</a>) サーバからの通知を受け取るPushAPI、ユーザに対して通知を送るNotificationAPI、Webページを離れた後もブラウザからスクリプトを実行できるようにするService Workerを使用して実装します。 他ブラウザと同様に、Webの標準的な技術の組み合わせで実装できることをアピールしています。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/673c8633cf42408a81588a6c9d82c8ab/73E16CB8-D2F4-4057-9183-373E017BFEB9.jpeg" alt=""> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/8c71e7649f0e40a1a217090d43489dc2/B08E0439-FBB6-4E45-A89F-8F1E5D94F3E1.jpeg" alt=""> VAPIDキーを使用して暗号化通信をします。Appleへの特別な登録をしなくとも実装できるよう、配慮されているようです。 ……というか少し前までFirebaseでアカウント登録しなきゃいけなかったらしく。 これがAppleさんにとって癪だったがゆえにWebプッシュ通知対応が遅くなったのでは？と考察しています。(*1)<h2 id="h7e7ca44811"> ユーザー体験が変わる</h2>Google製パフォーマンス測定ツールのLighthouseでは、対象のWebサイトがPWA対応しているかどうかも評価項目の一つとなっています。Chromeブラウザでのユーザー体験を重視しているからこその対応だと思います。 日本のスマホユーザーのうち４割がiPhoneを持っているそうです。(*2) これまでWebサイトからユーザーに通知する方法としてはRSS配信やメルマガぐらいしかなく、どちらもユーザーに複雑な操作を要求するものでした。 Webプッシュ通知であれば、サイトを訪問したユーザーに「通知を許可する」ボタンを押してもらうだけです。 Apple製品のWebプッシュ通知機能解禁により、これまで以上に多くのユーザーに対して通知することが可能になります。 Webサイト・Webアプリケーションの需要が一気に高まるきっかけになるかもしれません。 今回取り上げた内容は、このページの動画を翻訳したものです。詳細は動画をご覧ください。 Meet Web Push for Safari - WWDC22 - Videos - Apple Developer <a href="https://developer.apple.com/videos/play/wwdc2022/10098/" target="_blank" rel="noopener noreferrer">https://developer.apple.com/videos/play/wwdc2022/10098/</a> * * * 1：Web Pushのサーバ認証VAPIDを試してみる (旧題: GCMの登録が不要になったChromeのWeb Pushを試してみる) <a href="https://qiita.com/tomoyukilabs/items/9346eb44b5a48b294762" target="_blank" rel="noopener noreferrer">https://qiita.com/tomoyukilabs/items/9346eb44b5a48b294762</a> 2：日本のiPhoneシェアは44.1％、Androidと7％差の接戦 - MMD研究所調べ | マイナビニュース <a href="https://news.mynavi.jp/article/20220513-2344809/" target="_blank" rel="noopener noreferrer">https://news.mynavi.jp/article/20220513-2344809/</a>

WWDC22にてiPhone・iPad・MacなどApple製品のWebプッシュ通知機能についての発表がありました。いままでApple製品が対応していなかったこの機能について、Appleエンジニアが解説する動画を翻訳して紹介します。

【iOS】2023年にはWebプッシュ通知可能に

Gatsby製サイトでも、画像を付けてRSS配信ができました。 こんな感じです。文字だけより映えます✨ <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/677c9ab7d8914177a6228ddc34af12f5/85B3E431-0A83-4B2F-B2C8-69EB3172F399.jpeg" alt=""> 検索しても意外と出てこなくて苦労したので、表示したい画像のURLをRSSフィードに入れて配信する方法を紹介します。 <h2 id="h70f27366ff">RSSとは</h2><blockquote>RSS フィードは、ブログやオンライン マガジンなど、お気に入りの Web サイトの最新情報を常に入手できる簡単な方法です。 サイトが RSS フィードを提供していれば、投稿があると通知が届き、投稿の概要または投稿全文を読むことができます。</blockquote><a href="https://support.microsoft.com/ja-jp/office/rss-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%81%A8%E3%81%AF-e8aaebc3-a0a7-40cd-9e10-88f9c1e74b97#:~:text=RSS%20%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%81%AF%E3%80%81%E3%83%96%E3%83%AD%E3%82%B0%E3%82%84,%E8%AA%AD%E3%82%80%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" target="_blank" rel="noopener noreferrer">RSS フィードとは - Microsoft Support</a> 「2000年代に流行した古い技術」という印象が拭いきれませんが、まだまだ現役です！ むしろ情報に溢れた現代だからこそ、RSSリーダーのフィルター機能などを使ってニュースの取捨選択ができて重宝する、なんて意見もあります。 実装コストとRSSから流入するユーザー数を考えると、報われない苦労に感じるかもしれません。 しかしブログ記事を更新するたびに認知してくれる『質の良い読者様』を獲得できる可能性が格段に上がりますよ！ ……上がると信じています🥺 <a href="https://microayatron.com/feed/rss.xml" target="_blank" rel="noopener noreferrer">https://microayatron.com/feed/rss.xml</a> を登録していってね！！！！！ <h2 id="h6ae33e7349">設定</h2> 以下の環境を前提に進めていきます。<ul><li><a href="https://www.npmjs.com/package/gatsby" target="_blank" rel="noopener noreferrer">Gatsby</a> 4.1.0</li><li><a href="https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-default" target="_blank" rel="noopener noreferrer">gatsby-starter-default</a>&nbsp;</li><li>CMS: microCMS</li></ul> まずは<a href="https://www.gatsbyjs.com/plugins/gatsby-plugin-feed/" target="_blank" rel="noopener noreferrer">gatsby-plugin-feed</a>というパッケージをインストールします。Gatsby製サイト用のRSSフィード作成パッケージです。 <pre><code>yarn add gatsby-plugin-feed</code></pre> 記事が増えた場合にも<code>gatsby build</code>することにより、自動でrss.xmlに追記してくれます。 <h3 id="h551aebb0cf">gatsby-config.js</h3>gatsby-plugin-feedを使用するため、gatsby-config.jsの編集をします。 残念ながら公式コピペだけでは、画像付きでのRSSフィード配信が実現できません。 まずはソースの全容です。 てっとり早く動かしたい方は、以下をコピペのうえご自身のサイトに合わせて書き換えてください。 <pre><code>module.exports = {
&nbsp;siteMetadata: {
&nbsp;&nbsp;title: `trog`,
&nbsp;&nbsp;description: `アラサープログラマの雑記ブログ。ときどき、ハンドメイド。ぬいぐるみと過ごすふわふわな毎日。`,
&nbsp;&nbsp;siteUrl: `https://microayatron.com/`,
plugins: [
{
&nbsp;&nbsp;&nbsp;resolve: `gatsby-plugin-feed`,
&nbsp;&nbsp;&nbsp;options: {
&nbsp;&nbsp;&nbsp;&nbsp;query: `
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;site {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;siteMetadata {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;siteUrl
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;site_url: siteUrl
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;`,
&nbsp;&nbsp;&nbsp;&nbsp;setup: (options) =&gt; ({ ...options, custom_namespaces: { media: "http://search.yahoo.com/mrss/", }, }),
&nbsp;&nbsp;&nbsp;&nbsp;feeds: [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;serialize: ({ query: { site, allMicrocmsBlog } }) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return allMicrocmsBlog.edges.map(({ node }) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title: node.title,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description: node.metaDescription,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;date: node.publishedDate,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: site.siteMetadata.siteUrl + '/' + node.slug,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;guid: 
site.siteMetadata.siteUrl + '/' + node.slug,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;custom_elements: [{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"media:content": {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_attr:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: node.image?.url,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 1920,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 1080,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media: "image"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;query: `
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allMicrocmsBlog(sort: {fields: publishedDate, order: DESC}) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edges {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;node {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;publishedDate
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;metaDescription
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slug
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output: "/feed/rss.xml",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title: "trog",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;feed_url: "https://microayatron.com/feed/rss.xml",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;site_url: "https://microayatron.com/",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;},
&nbsp;]
}</code></pre> この設定により、以下の項目がrss.xmlに設定できます。 <ul><li>タイトル</li><li>投稿日時</li><li>説明(meta description)</li><li>記事のURL</li><li>guid</li><li>投稿日時</li><li>サムネイル画像のURL</li></ul> siteMetaDataで指定した内容と、microCMSから取得したデータを、RSSフィードの値に使用します。 RSSリーダーに全文が表示したい場合は、公式ページに書いてあるとおり、<code>custum_element</code>の<code>content:encoded</code>にContentfulやmicroCMSから取得した記事全文を値として指定してください。 <h3 id="h9b8a3a7de9">guid</h3>guid (globally unique identifier)は記事を一意に識別する文字列です。 <pre><code>guid: site.siteMetadata.siteUrl + '/' + node.slug,</code></pre> <h3 id="h7d8a2f24ff">サムネイル画像URL</h3><code>&lt;media:content&gt;</code>タグに、サムネイル画像のURLを指定します。こうすることで、たいていのRSSリーダー上で記事とあわせて画像が表示されるようになります。 <code>&lt;media:content&gt;</code>は<code>custom_elements</code>の中に定義します。必須項目はurlのみです、お好みでカスタマイズしてください。 <pre><code>custom_elements: [{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"media:content": {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_attr:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: node.image?.url,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 1920,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 1080,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media: "image"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}],</code></pre> しかしこれだけではエラーが出てrss.xmlが正しく生成できません。 <pre><code>error on line 1 at column 〇〇〇: Namespace prefix media on content is not defined</code></pre> このエラーにあるとおり、Media RSSタグを使用するため名前空間の指定が必要です。rssタグの中で定義するこれです。 <pre><code>&lt;rss xmlns:media="http://search.yahoo.com/mrss/"&gt;&lt;/rss&gt;</code></pre> gatsby-plugin-feedでは<code>custom_namespaces</code>を使って、Media RSSタグを定義します。 <pre><code>plugins: [
{
&nbsp;&nbsp;&nbsp;resolve: `gatsby-plugin-feed`,
&nbsp;&nbsp;&nbsp;options: {
&nbsp;&nbsp;&nbsp;&nbsp;query: `（中略）`,
setup: (options) =&gt; ({ ...options, custom_namespaces: { media: "http://search.yahoo.com/mrss/", }, }),
&nbsp;&nbsp;&nbsp;&nbsp;feeds: […</code></pre> <h2 id="h2e2ed4581f">生成物</h2>出力されるrss.xmlはこんな感じです。 <pre><code>&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" xmlns:media="http://search.yahoo.com/mrss/" version="2.0"&gt;
&nbsp; &lt;channel&gt;
&nbsp; &nbsp; &lt;title&gt;&lt;![CDATA[ trog ]]&gt;&lt;/title&gt;
&nbsp; &nbsp; &lt;description&gt;&lt;![CDATA[ trog ]]&gt;&lt;/description&gt;
&nbsp; &nbsp; &lt;link&gt;https://microayatron.com/&lt;/link&gt;
&nbsp; &nbsp; &lt;generator&gt;GatsbyJS&lt;/generator&gt;
&nbsp; &nbsp; &lt;lastBuildDate&gt;Thu, 02 Jun 2022 03:05:34 GMT&lt;/lastBuildDate&gt;
&nbsp; &nbsp; &lt;atom:link href="https://microayatron.com/feed/rss.xml" rel="self" type="application/rss+xml" /&gt;
&nbsp; &nbsp; &lt;item&gt;
&nbsp; &nbsp; &nbsp; &lt;title&gt;&lt;![CDATA[ RSS配信を再開しました ]]&gt;&lt;/title&gt;
&nbsp; &nbsp; &nbsp; &lt;description&gt;&lt;![CDATA[ RSS配信を半年ぶりに再開しました。お好きなRSSリーダーにぜひ登録を。 ]]&gt;&lt;/description&gt;
&nbsp; &nbsp; &nbsp; &lt;link&gt;https://microayatron.com/feed&lt;/link&gt;
&nbsp; &nbsp; &nbsp; &lt;guid isPermaLink="false"&gt;https://microayatron.com/feed&lt;/guid&gt;
&nbsp; &nbsp; &nbsp; &lt;pubDate&gt;Thu, 02 Jun 2022 03:00:00 GMT&lt;/pubDate&gt;
&nbsp; &nbsp; &nbsp; &lt;media:content url="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/cc3e0c92fe8a47ef81d349ad902b58e7/67F1ED08-6A12-4C55-AA2B-9AC4D23ABEB3.png" width="1920" height="1080" media="image" /&gt;
&nbsp; &nbsp; &lt;/item&gt;
&nbsp; &lt;/channel&gt;
&lt;/rss&gt;</code></pre>outputに指定した場所にrss.xmlが出力されます。設定が完了したら<code>gatsby build</code>→<code>gatsby serve</code>(<code>gatsby develop</code>)で確認してみてください。 * * * 文字だけの更新通知より、画像の付いた情報のほうが、興味持って押したくなるはずです。 お気に入りの画像とともに素敵なRSSライフを！！！ * * * 参考リンク: <a href="https://dev.to/harrison_codes/how-to-add-custom-fields-to-your-gatsby-rss-feed-3pp6 " target="_blank" rel="noopener noreferrer">How Add Custom Fields to Your Gatsby RSS Feed - DEV Community</a> <a href="https://github.com/gatsbyjs/gatsby/issues/10308" target="_blank" rel="noopener noreferrer">gatsby-plugin-feed ignores custom_namespaces · Issue #10308 · gatsbyjs/gatsby · GitHub&nbsp;</a> <a href="https://support.google.com/news/publisher-center/answer/9545420?hl=ja" target="_blank" rel="noopener noreferrer">フィードに関する技術的な要件 - パブリッシャー センター ヘルプ</a>

gatsby-plugin-feedでRSS機能を実装しました。残念ながら公式のソースをコピペしても理想の形にならず。サムネイル画像の情報込みでRSS配信する方法を紹介します。

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

日頃からtrogを見てくださっている優しい読者の皆さま、いつもありがとうございます。このたびRSSフィードを自動生成する対応をしました。半年ぶりです。 Twitterでブログ更新をお知らせしておりますが、ろくにブログ投稿もせず、くだらないことしかつぶやいていないのが実情です。 ブログ更新通知といえば、古き良きRSSでしょう！ 前回まではGatsby Starterに内蔵されていたRSSをわけもわからず垂れ流しておりましたが、今回はRSS2.0に対応した、完璧で幸福なtrogであります👏（*1） 実装には苦労しました…。貴重なお時間をいただき恐縮ですが、優しい読者の皆さまにおかれましては、この機会にぜひRSSリーダーへの登録をお願いします。 <h2 id="ha2d818cbef">RSSフィードのURL</h2>URLはこちら。<blockquote><a href="https://microayatron.com/feed/rss.xml" target="_blank" rel="noopener noreferrer">https://microayatron.com/feed/rss.xml</a></blockquote> 「/feed/rss.xml」に変更しました。もともと配信していた/rss.xmlとはアドレスが異なります。 すでにご登録いただいていた読者様は、あらためて上記アドレスでのご登録をお願いいたします。 <h2 id="h70f27366ff">RSSとは</h2><blockquote>RSS フィードは、ブログやオンライン マガジンなど、お気に入りの Web サイトの最新情報を常に入手できる簡単な方法です。 サイトが RSS フィードを提供していれば、投稿があると通知が届き、投稿の概要または投稿全文を読むことができます。</blockquote><a href="https://support.microsoft.com/ja-jp/office/rss-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%81%A8%E3%81%AF-e8aaebc3-a0a7-40cd-9e10-88f9c1e74b97#:~:text=RSS%20%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%81%AF%E3%80%81%E3%83%96%E3%83%AD%E3%82%B0%E3%82%84,%E8%AA%AD%E3%82%80%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82 ">RSS フィードとは - Microsoft Support</a> 2000年頃から使われている、Webサイトのための通知規格です。(*2) XMLファイルを出力します。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/98ce55538e7f44e5ac9fb3d57f8a59c8/04200BD3-BC1B-4557-9FDE-DE50EE748816.jpeg" alt=""> こんなやつです。 人間には読みづらいですが、解析担当の「RSSリーダー」というものが存在します。サイトが更新されたときには通知してくれます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/677c9ab7d8914177a6228ddc34af12f5/85B3E431-0A83-4B2F-B2C8-69EB3172F399.jpeg" alt=""> こちらはInoreaderの画面。 設定すればプッシュ通知でお知らせもしてくれます。 RSSリーダーは、最近のSNSとは使い勝手が違います。 Q. フォローしたら管理人に通知される？ わたしに通知はきません。 もちろん、フォローしてくれた人のメールアドレス情報もわかりません。アカウントの特定も無理ですし、『あしあと』機能もありません。 RSS登録 / 解除はお気軽にどうぞ！ Q. 『1 Subscribes』って表示されてるけど、これはなに？ FeedlyやInoreaderなど、RSSリーダーアプリ内で登録者数の集計をしているのだと思います。 アプリ内での情報ですので、この数字はすべてのユーザーが閲覧可能です。 前述のとおり、すべての登録者数はわたしにも把握できません。 あ、それとですね、その登録者数１人というのはおそらくわたしです。フォローボタンを押して、ぜひ『2 Subscribes』にしていってください() Q. 記事にコメントはできないの？ できません。「更新お知らせ機能」がRSSの役割です。 コメントができないのは、わたしのブログの『仕様』です。お問い合わせはTwitterにお願いします。<blockquote class="twitter-tweet">株式会社ねむみ 代表取締役のとろです (ง˘ω˘)ว&mdash; とろ (@microayatron) <a href="https://twitter.com/microayatron/status/1506780760434679812?ref_src=twsrc%5Etfw">March 23, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <h2 id="he8cc7a2b7d">RSSリーダー</h2><h3 id="hb235eef9ab">Feedly</h3><img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/5ac9f8bb43724c248d005cd7c4a7581d/D1514951-FD9C-476A-ABFE-999A577DDA40.jpeg" alt=""> <a href="https://feedly.com/" target="_blank" rel="noopener noreferrer">https://feedly.com/</a> 代表格はやはりFeedlyです。登録ボタンを見たことはある人が多いんじゃないでしょうか？ブラウザ・スマホアプリが提供されています。 なんとこのFeedly、いったんRSSをキャッシュしたら、過去の記事に関して変更や削除を行っても一切反映しないという開発者泣かせの<s>鬼畜</s>仕様です。 おかげさまでRSSフィードのアドレスを変えることになりました( ◜ᴗ◝) リーダーとしては大変便利なアプリです。 <h3 id="hf625b46f47">Inoreader</h3><img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/dd1450b6aed540af86864312caf478b2/CD5DF500-4D8A-49CF-8E44-724AFC30B049.png" alt=""> <a href="https://inoreader.com/" target="_blank" rel="noopener noreferrer">https://inoreader.com/</a> こちらも大人気のRSSリーダーサービスです。 Feedlyよりも巡回間隔が早いようで、わたしの環境では記事をアップロードしてから一時間弱で更新通知がきました。 また日本語に対応しているのも魅力です。 ブラウザ・スマホアプリともに提供されていますので、Feedlyと比較してお好きな方を使ってください。 <h3 id="hf5c9a730d8">メーラー</h3>Outlookからサイトの更新通知を確認することもできます。Thunderbirdも対応しているようです。昔はこっちが主流だったのでは…？ <a href="https://support.microsoft.com/ja-jp/office/rss-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%82%92%E8%B3%BC%E8%AA%AD%E3%81%99%E3%82%8B-73c6e717-7815-4594-98e5-81fa369e951c" target="_blank" rel="noopener noreferrer">RSS フィードを購読する</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer"> - Microsoft Support</a> <h2 id="hc4f9f108a0">おすすめRSS登録サイト</h2>ちょうどいい記事がありました。 <a href="https://tbshiki.com/newssitetop5/" target="_blank" rel="noopener noreferrer">【登録ボタン付き】おすすめ情報サイトランキングトップ5！ – つぶ式</a> ニュース、まとめサイト、ライフハック、個人ブログなど…世の中にRSSを提供しているWebサイトはたくさんあります。まだオワコンとは言わせません🥺 お気に入りの個人ブログを登録するもよし、タイトルだけざっと眺めて気になるニュースを読むもよし。 trogと併せて登録して、よきRSSライフをお過ごしください。 *** 2023/12/13 追記 2023年夏ごろから半年ほどRSSが使えない状態でしたが、いまご覧いただいているNext.js版trogでもRSS配信を再開しました。 RSS登録していた方、申し訳ありませんでした。今後ともtrogをよろしくお願いいたします。 * * * 1: <a href="https://dic.pixiv.net/a/%E3%83%91%E3%83%A9%E3%83%8E%E3%82%A4%E3%82%A2" target="_blank" rel="noopener noreferrer">パラノイア (ぱらのいあ)とは【ピクシブ百科事典】</a> 2: <a href="https://ja.wikipedia.org/wiki/RSS" target="_blank" rel="noopener noreferrer">RSS - Wikipedia</a>

RSS配信を半年ぶりに再開しました。お好きなRSSリーダーにぜひ登録を。

RSS配信を再開しました

trogリニューアルから一ヶ月。大学の課題がようやく終わり、久しぶりにNetlifyを開くと、上部にこんなメッセージが。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/b23406f9a6ea469290bc837758612fd8/0D408C94-D536-4459-941E-43B36DBC364D.jpeg" alt=""> <blockquote>あなたの Netlify ダッシュボードは未払いのために制限されています。あなたのチーム(microayatronのチーム)に有効なクレジットカードを提供してください。さもなければ、あなたのサイトは8日後に停止されます。</blockquote> 画面をいくら更新しても消えません。 PCからアクセスしても、自分のサイト管理ページには入れず、なにをしても強制的に支払い画面に飛ばされてしまいます。 <h2 id="hadb1c41dc8">Netlifyとは</h2>Netlifyは静的ウェブサイトのためのホスティングサービスです。 React・Angular・当ブログで使用しているGatsbyなど、特定のフレームワーク製のWebサイトをNetlifyの中でビルドし、できあがったコンテンツを効率的かつスピーディに配信します。 一般的なレンタルサーバーだと、年間5000円ほどの費用がかかりますが、Netlifyは基本的に無料で使用できます。 ただし、無料枠の範囲を超えると追加料金の発生する項目が存在します。 <ul><li>ビルド時間: 一ヶ月間で300分を超過</li><li>データ転送量(*1): 一ヶ月間で100GBを超過</li></ul> …など。（※2021年時点12月時点 Starter Planの場合） 他の項目については以下のURLから、Full Feature Listをご覧ください。<a href="https://www.netlify.com/pricing/" target="_blank" rel="noopener noreferrer">https://www.netlify.com/pricing/</a> HugoやGatsbyJSなどの静的サイトジェネレーター製ブログを運用するなど、個人で使用するかぎりは、請求されることのない項目かと思います。 自分のチームの無料枠使用状況は、ログイン後のteamviewから確認できます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/626694624f1043e79d6674c8eca998ef/B9834B84-C0E8-4A48-8A25-CECC98534C45.jpeg" alt=""> さらに詳細を知りたい場合は、Builling - General（チーム名称右の「Starter」を押すと遷移可能）のSite add-ons with feesをAll site add-onsに切り替えると確認できます。 <h2 id="hd48981e6bb">請求内容</h2>わたしのアカウントへの請求額は7ドルでした。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/959a387908c74d3dbeac66463e1b6181/BD9F9A98-3A4D-4996-A6EB-DBDA9D04A453.jpeg" alt=""> 各種サービスとNetlifyとのWebhookをONにした状態でリニューアル作業をしたことで、一ヶ月間のビルド時間無料枠である300分を超過していたようです。 リニューアルに手間取り、Webhookを設定したmasterブランチに何度もpushしたこと、そしてmicroCMSとNetlifyのWebhookを繋げたまま作業していたことが災いして、ビルド時間が爆増しました。 microCMSのWebhookはトリガーの詳細な設定が可能なので、必要なときにだけビルドするようにします。そもそものビルド回数が減れば、ビルド時間も消費しませんからね。<a href="https://document.microcms.io/manual/webhook-setting#hf76e1d0d3f" target="_blank" rel="noopener noreferrer">https://document.microcms.io/manual/webhook-setting#hf76e1d0d3</a> この7ドルを支払うことで、追加のビルド時間500分が付与されるようです。 メール(*2)でもお知らせが届いていました。 50%消費時、90%消費時、無料枠300分を使い果たしたとき、翌月になったのに支払い手段を登録していない場合にも。 残念なことにゴミ箱に直葬されており、通知には気づきませんでした（笑） 『ビルド時間超過して7ドル支払った』というブログ記事をいくつか見かけたので、一番請求される可能性の高い項目なんだと。以前は500分の無料枠があったはずですが、300分に縮小されたのも影響がありそうです。 <h2 id="hd7f252d37f">他サービスとの比較</h2><h3 id="h2a6a824b44">無料枠</h3><a href="https://pages.cloudflare.com/#pricing" target="_blank" rel="noopener noreferrer">Cloudflare</a>のFreeプランではビルド時間無料枠が500分用意されています。データ転送量はなんと無制限。PV数がどんなに増えても安心です。 <a href="https://vercel.com/pricing" target="_blank" rel="noopener noreferrer">Vercel</a>では個人的な趣味の利用であれば、Hobby プランが使えます。以下の公式記事がVercelさんの太っ腹具合を表しています。 <blockquote>予期せぬ課金との決別 トラフィック量に応じてプロジェクトが自動的に拡張されることは、手動で介入するよりもはるかに優れています。しかし、その後に予想外の請求が発生しないことは非常に重要です。そこで、すべての新プランでは、帯域幅、ビルド、サーバーレス関数の実行が無制限になりました。（<a href="unsafe:Simpler Pricing">Simpler Pricing</a>より引用）</blockquote> Hobbyプランを商用利用することはできません。<a href="https://vercel.com/docs/concepts/limits/fair-use-policy" target="_blank" rel="noopener noreferrer">Fair Use Policy</a>を熟読のうえ、ご利用ください。 <h3 id="h059c8f4d0e">拠点</h3>Cloudflareは東京・大阪(3)、Vercelは東京にサーバーがあるようです。(4) 日本からのアクセスが多いサイトなら、表示速度に関わるため、国内に拠点のあるサービスを選んだほうがよいでしょう。 Netlifyは東京のサーバーが存在するようですが、それが使えるのは、申し込みに運営へのお問い合わせが必要なEnterprise Planのみだそうです。(*5) 今後もビルド時間でヘマをする可能性が十分にあるので、Fair Use Policyに則りVercelにするか。ビルド時間500分・東京と大阪のサーバー拠点が魅力のCloudflareに乗り換えるか。…とりあえず面倒なので先送りにします() 今月は買い物やふるさと納税で出費がかさんだので、微妙に生活に支障が出る程度の課金となりました💸 * * * *1:&nbsp;Bandwidthの翻訳に困り果てた。以下のURLのやりとりから、Bandwidthは配信した量、Webサイト訪問者へ通信した量なんだと推測。&nbsp;<a href="https://answers.netlify.com/t/what-does-actually-count-in-bandwidth/28605" target="_blank" rel="noopener noreferrer">https://answers.netlify.com/t/what-does-actually-count-in-bandwidth/28605</a>&nbsp; *2: 使用状況に関する通知はいつ届くのですか？<a href="https://docs.netlify.com/accounts-and-billing/billing-faq/#when-will-i-receive-notifications-about-my-usage" target="_blank" rel="noopener noreferrer">https://docs.netlify.com/accounts-and-billing/billing-faq/#when-will-i-receive-notifications-about-my-usage</a> *3:&nbsp;<a href="https://www.cloudflare.com/ja-jp/network/" target="_blank" rel="noopener noreferrer">https://www.cloudflare.com/ja-jp/network/</a>&nbsp;日本語用ページが用意されていて優秀👏 *4:&nbsp;<a href="https://vercel.com/docs/concepts/edge-network/regions#routing" target="_blank" rel="noopener noreferrer">https://vercel.com/docs/concepts/edge-network/regions#routing</a>&nbsp; *5:&nbsp;<a href="https://answers.netlify.com/t/is-there-a-list-of-where-netlifys-cdn-pops-are-located/855" target="_blank" rel="noopener noreferrer">https://answers.netlify.com/t/is-there-a-list-of-where-netlifys-cdn-pops-are-located/855</a> <a href="https://answers.netlify.com/t/cdn-adn-nodes-where-do-we-have-gaps/969/8High-Performance" target="_blank" rel="noopener noreferrer">https://answers.netlify.com/t/cdn-adn-nodes-where-do-we-have-gaps/969/8High-Performance</a> 東京のサーバーが使用できるプランの説明が見当たらないけど、やりとりを見るかぎり、重課金してね、ってことなんだと。

危うくWebサイトの公開を止められるところでした。Netlifyから請求がきたら素直に支払いましょう。

【微課金】Netlifyから請求がきた

<a href="https://microayatron.com/2018/01/21/shiny_nit_cap1/" target="_blank" rel="noopener noreferrer">以前宿題として提出した光るニット帽</a>について、友人に話したところ「そういえばステージ裏からコンセントで電気を引っ張ってきて、車用のLEDテープをスカートの裾に貼って踊る猛者がいた。」と。 意外と光るだけでも需要があることに驚きました。 ステージ衣装で使用することを想定した「裾が光るスカート」を作成してみることに。 LEDが一つ→複数になるだけだからすぐに作れるだろう、と安易に考えていたのですが大爆死しました。<h2 id="h950d3adc64"> LilyPadとは</h2><blockquote>LilyPad ArduinoはArduinoシリーズの一種で、服や帽子やバッグなどの布地に縫い付けて使うことを目的としています。配線には、導電糸（電気を通す糸）を使います。パッドとの接続はハンダ付けではなく、導電糸をしばりつけることによって行います。</blockquote><a href="https://www.switch-science.com/catalog/2654/" target="_blank" rel="noopener noreferrer">LilyPad Arduino 328 - スイッチサイエンス</a><h2 id="ha31bd80de1"> 要件</h2><ul><li>バッテリー駆動で光る。</li><li>バッテリーはUSB給電･充電ができる。</li><li>スカートの重さは常識的な範囲におさまる。（重すぎてずり下がるのはだめ）</li><li>発光色･発光パターンを変更できる。</li></ul>理論上、LilyPadを採用すれば問題なさそうです。 バッテリーはArduinoシリーズでおなじみのリチウム電池を使います。 Neo Pixelテープも取り寄せたんですが、はんだ付け技術が皆無だったのでやめました。取り外して洗濯できないし。 <h2 id="h1a1bea36ec">用意するもの</h2><ul><li>ペチコート</li><li>LilyPad</li><li>LilyPad フルカラーLED</li><li>導電糸（<a href="https://www.switch-science.com/catalog/911/" target="_blank" rel="noopener noreferrer">スイッチサイエンス 極細タイプ</a>）</li><li>リチウム電池（<a href="https://www.switch-science.com/catalog/3166/" target="_blank" rel="noopener noreferrer">リチウムイオンポリマー電池110mAh - スイッチサイエンス</a>）</li><li>裁縫道具</li><li>人形用スナップボタン（石崎プレス 500番 8ミリ）</li></ul> ほかの導電糸も試したのですが圧倒的に縫いやすいので、スイッチサイエンスの9mのものを愛用しています。<h2 id="he3c5be96ff"> 作成手順</h2><ol><li>LilyPadのピンおよびLEDのピンすべてに、ボタン付けの要領でスナップボタン(凹)を括り付ける。</li><li>スカートに回路を書く。</li><li>回路を手縫いする。</li><li>布側のLilyPadおよびLEDのピン設置箇所すべてにスナップボタン(凸)を縫い付ける。</li></ol> もちろん直接基板を縫い付けて作ることもできます。 ただしスカートが洗濯できなくなることと、基板の使い回しを考え、スナップボタン取り付けを採用しました。 土台側（今回はスカート）に凸を付けた方が楽です。逆にしたところ基板をスカートから取り外す時に苦労しました。<h2 id="h57d3da36fb"> できあがったもの</h2>フルカラーLEDなのに青と緑が光っとらんのよ〜！（cv.千鳥 ノブ） <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/16d2cb7cfb2f4b43990fd2ae00cf3fea/CA37D83E-E3FB-4800-857C-B7599A60E211.jpeg" alt=""> フルカラーLEDなのでR・G・Bすべてのポートに電力が供給されれば白く光るのですが、接触が悪いようです。 （ナイトモード撮影のせいなのか一部縫い目が消失してるように見えますが、ちゃんと接続してますよ。） Arduinoシリーズのマイコンですので発光パターンのプログラムを書き込みたいところですが、この状態ではおもしろくありません。 ちなみに友人に話してからここまで2年かかりました。（モチベ低。） <h2 id="hcce61e5382">ミシン購入</h2>すでに何度も縫い直しているため、スカート生地に傷みが目立ってきました。 もう一本、作り直すことにします。 前回のスカートはすべて手縫いしたため、相当な時間がかかってしまいました。 そこで、通常のミシン糸で導電糸を覆い、手縫いした導電糸を保護・固定することにします。 <h2 id="hccdf545d13">回路</h2>＋と－が交差する場所はなるべく減らします。 ペチコートの形を崩さないこと、また平置きしたときに表裏のLED配線が接触しないよう少しずらすなど、諸々配慮して回路を考えます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/90687ffd13434512b80eefecaa2ad1dd/4D8F55E9-1696-4318-B457-C7007B0957B9.jpeg" alt=""> 手縫いのときに直列に組んだ結果、全体的にLEDが暗くなってしまった（気がする）反省を踏まえ、LilyPad本体から並列に電気を取ります。 （もっといい回路があったら優しく教えてください。）<h2 id="hb405617601"> 仮組み</h2>縫製作業に入る前に基板どうしを製作予定の回路と同様にワニ口クリップで繋いで、問題なく発光するか確認します。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/797552e24dcb4950aad21ba542bd139d/29C7B78E-2D52-4A5A-B502-5453717B8F59.jpeg" alt=""> 問題なさそうです🙆‍♀️✨ スカートにチャコペンで回路を下書きします。 縫製完了まで時間がかかるので、長期間消えないタイプのチャコペン推奨です。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/b65ca425615247bcb0961410517db977/2E3379F7-742A-463B-8F41-FA74C67433DD.jpeg" alt=""> 点の部分にスナップボタン凸を縫い付けます。 線の部分すべてに２本取りで導電糸を手縫い。交差する部分は片方の導電糸をスカートの裏から通すようにして、回路を組みました。 こんな作業をLED合計8個分実施。画像は表の回路で、まだ裏面があります。 そのあと上からミシン糸で保護していきます。縫い目模様は山型ギザギザを選択。Sparkfunの動画やサイトでも推奨されている方法です。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/bf03da3e14f8445088c17f8b4dd50b4c/F9F99A34-E0E3-4C7A-8C9F-8E2231C14719.jpeg" alt=""> <h2 id="h58b99338b1">できあがったもの（再チャレンジ）</h2>主婦であり、社会人大学生であるものの、なんとか時間を捻出して、苦節5ヶ月。 幾度もミシンをぶっ壊し、メーカーへ修理にも出し、なんとか作り上げた集大成がこちら。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/8ae0b8e7b61042e4a0ca79077e9592e0/2C565660-313D-4B3F-B52C-5FECA0A93634.jpeg" alt=""> あ、あのLilyPadさん！ まだ色制御してないんですが！ 上からミシン糸で保護したので、前回とは違い、スカートが動いただけで他の色の糸が接触することはありません。最終的な重さは75g。 導電糸は8m×2個と少しを消費しました。 多少ゴツゴツしますが、普通のペチコート（スカート）と着用感は変わりません。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/628d392ed4144e5fae66ed535dbb802e/20516CA3-0456-4E7D-B44E-12257CBB0B6A.jpeg" alt=""> 白い綿のスカートの下に今回作った光るスカートを入れてみます。写真で見ると映えます👏 肉眼で見るともう少し光量が落ちます。悲しい。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/13775df2dfff42ce84f7465fb2680d50/0B1BB114-D766-4F1A-AD0E-E3E3DDE44B85.jpeg" alt=""> <h2 id="h37438b9010">ソース</h2>念のためにソースコードを貼っておきます。 <a href="https://learn.sparkfun.com/tutorials/lilypad-tri-color-led-hookup-guide/all" target="_blank" rel="noopener noreferrer">LilyPad公式</a>は古いフルカラーLED準拠のソースコードになっています。 RGBポート(+)とグランドのポート(-)の形の新しいフルカラーLEDで動かすと、想定とは違う動作になりますのでご注意ください。 <pre><code>// Create integer variables for our LED pins:
int RGB_RED = 11;
int RGB_GREEN = 10;
int RGB_BLUE = 9;

void setup() {
 // put your setup code here, to run once:
}

void loop() {
 // put your main code here, to run repeatedly:

 analogWrite(RGB_BLUE,255);
 analogWrite(RGB_GREEN,255);
 analogWrite(RGB_RED,255);
 delay(50);

 analogWrite(RGB_BLUE,0);
 analogWrite(RGB_GREEN,0);
 analogWrite(RGB_RED,0);
 delay(50);

}</code></pre> <h2 id="h6e312b3deb">課題</h2>やはり接触が悪すぎます。 8つすべてにフルカラーLEDを採用したので、R・G・Bのピンすべてに255を割り当てれば全力で白色に光るはずなんです。 しかしスカートを平置きした状態ではあまり光らず、吊るした状態でようやく先ほどの画像のように気まぐれに光ります。 基板とフルカラーLEDをワニ口クリップで直接つなぐとキレイに白く光りましたので、基板の問題ではなさそう。すべて導通確認しましたが、問題なし。途中で導電糸が切れているわけではなさそうです。 この作品はこれとして、後学のためにも他のLilyPad作品の動画を見てきましたが、選択する布地がまずかったかなと。 着用感を優先してペチコートを選択しましたが、他の方は綿のTシャツやフェルトに縫っているようです。 「テロテロ素材の布地(?)選択しないのは常識www」ってことですかね？？？ 布と糸の研究までしたうえで、本番を作らなきゃいけなかった気がします。 素人が思いつきで作ってしまったので。不確定要素の多い電子工作は難しいです。あー、モヤモヤする。 あとは布をきっちり刺繍用の型枠にはめて導電糸を縫い付けていました。作業効率がかなり低下しますが、それも大事だったのかも。 <h2 id="ha6ea5d955e">ウェアラブルデバイスの可能性</h2>LilyPadシリーズには光・温度・加速度など様々なセンサー基板が存在します。 LilyPad本体も4000円くらい、センサーは数百円程度です。専門の業者でなくても、製作できる材料が揃う時代になりました。 基板の取り扱い方やマイコンへの書き込み方法はたいてい公式サイトに載っており、わりと手軽にアイディアを実現できちゃうというわけです。 普通のハンドメイド作品と違うのは、量産が厳しいことです。こいつらはプロトタイプ向けであり、基板のお値段が高すぎます。 あとは洗濯することを考慮した基板（スナップボタンやマジックテープが付いてるとか）や導電糸が出てくると、多くの人にもっと手軽に作ってもらえる存在になると思います。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/0130643ac0614cc38c2378a5e20ae87f/F97101E5-50CD-4ADD-9E3A-5D4CBE7A69BD.gif" alt="">

総重量75g、フルカラーLED8個搭載のウェアラブルデバイス(?)を製作しました。

【エモみが深い】LilyPadで光るスカート作ってみた

<h2 id="hcb9dacb773">結論</h2>これ一択。 <a href="https://www.switch-science.com/catalog/911/" target="_blank" rel="noopener noreferrer">導電糸ボビン - スイッチサイエンス</a> なぜこの導電糸がよいのか詳しく説明していきます。 <h2 id="h392ce1c2fc">導電糸とは</h2>電気を流せる糸です。 スマホのさわれる手袋の指部分に刺繍されているアレです。 銅箔を巻き付けた繊維を撚って糸にしたものや、黒鉛などの金属粉をふんだんにまぶすことで導電性を実現したものなどさまざまです。 <h2 id="h6e631257b6">評価ポイント</h2>わたしが手縫いしやすいと感じた導電糸の特徴は以下のとおりです。 <h3 id="h0311a59e1b">柔らかい</h3>電気は通してほしいですが、銅線のような硬さは不要です。指で曲げたときに針金のように「しなる」のではなく、「たゆむ」ような糸が扱いやすくて好みです。<h3 id="h3949005698"> 布にひっかかる</h3>縫い合わせるからには、糸の繊維と布の繊維が絡んでひっかかってほしいのです。 ポリエステルなどのつるつるとした素材の場合は特に顕著で、縫った糸がするすると抜けてしまうものは電子工作に不向きです。<h3 id="hf75e0f8033"> 切れない</h3>玉止めした時に糸にかなりの力がかかります。電気を通すことができたとしても、糸としての耐久力がなくては縫い糸としての役割を果たせません。 * * * ここからは実際にわたしが購入して使った製品のレビューをします。<h2 id="h5b7c5f5de7"> PDA工房 導電糸 太め</h2>PDA工房 導電糸(太め/自作用パーツ) 5m <a href="https://item.rakuten.co.jp/pda/120pda60001440/" target="_blank" rel="noopener noreferrer">https://item.rakuten.co.jp/pda/120pda60001440/</a> 評価：★☆☆☆☆ これは相当縫いづらかったです。 まず硬い。手で触った感触はほぼ銅線です。 硬くて糸の表面がツルツルしているおかげで、縫っていくうちに気づけば玉結びがほどけていました。 硬いから耐久力があるのかと思いきや、玉止め時に切れました。いくらやっても切れる。確率は100%です。 スマホ対応手袋にするだけだったらいいんでしょうか？ とにかくこれで電子工作は無理です。 細めの導電糸も販売されていましたが、そこそこの太さがないと手縫いしづらいのと、耐久力に不安があったため太めを購入しました。 細めで二本取りして縫うことも検討しましたが...。もはや論外です。 <h2 id="h62ad188291">スイッチサイエンス 導電糸ボビン 12m</h2><a href="https://www.sparkfun.com/products/13814" target="_blank" rel="noopener noreferrer">https://www.sparkfun.com/products/13814</a> 日本国内での販売サイト <a href="https://www.switch-science.com/catalog/2718/" target="_blank" rel="noopener noreferrer">https://www.switch-science.com/catalog/2718/</a> 評価：★★☆☆☆ これもわりと硬いです。かなり固く結んでおかないと、玉結びも玉止めも自然にほどけます。 ただし先ほどと違い、強く引っ張ってもめったに糸が切れません。 （たまに切れて絶望します。） 電気を通して、最低限糸としての役目を果たしてくれます。<h2 id="h4254aa89bf"> スイッチサイエンス 導電糸ボビン 極細タイプ</h2><a href="https://www.sparkfun.com/products/10867" target="_blank" rel="noopener noreferrer">https://www.sparkfun.com/products/10867</a> 日本国内での販売サイト <a href="https://www.switch-science.com/catalog/911/" target="_blank" rel="noopener noreferrer">https://www.switch-science.com/catalog/911/</a> 評価：★★★★★ いままで紹介してきた製品と違い、ほぼ普通の糸と変わらない柔らかさです。 繊維の毛羽立ちが目立ちますが、それだけ布への引っかかり具合はばっちりだということです。 ポリエステル100%の布を縫ってもするっと抜けてしまうことがありません。 玉結び･玉止めも糸どうしがしっかりひっかって残ってくれます。 触ると、手に鉄臭さが残るのがデメリットです。 縫うときのストレスは感じないので文句なしの★5です。 すでに２個（18m相当）を使い果たしました。 <h2 id="h97ef1afad5">おまけ ミシンで縫う</h2>回路があまりに大きくなり手縫いは辛いので、ミシンに頼ってしまおうかと。 最後に紹介した極細タイプを上糸、下糸ともにミシンにセットして縫おうとしたところ、布送り機構にガン絡まりました。 （ミシンを分解して苦労して取り除きました。） 上糸のみ導電糸、下糸は普通の糸で再スタート。なんとか縫えたものの上糸だけ突っ張った仕上がりに。薄い生地だし余計に。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/62d98a2d34dd4d7c8eba5cfdd7616565/68F28B23-942F-4B88-904D-6DC56CCF9AB3.jpeg" alt=""> 糸の太さが全然違うのでいやな予感はしていましたが…。 これ、ミシンにセットしてはいけない太さの糸では？ 洋裁好きな人にこの記事見つかったらたぶん怒られる。 極細タイプって書いてあるけどミシン糸ほど細くないし、冷静に考えるとこれは手縫い糸の太さ。 導電糸がミシン用のボビンに巻かれて販売されてるからといって、ミシンにセットしていいわけではないんですね。 手持ちの太めの導電糸をミシンで仕上げたい場合、「導電糸を普通のミシン糸で覆う」のが正解のようです。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/bf03da3e14f8445088c17f8b4dd50b4c/F9F99A34-E0E3-4C7A-8C9F-8E2231C14719.jpeg" alt=""> * * * <a href="https://store.shopping.yahoo.co.jp/handcraft/fjx-smartx-50-1000.html" target="_blank" rel="noopener noreferrer">https://store.shopping.yahoo.co.jp/handcraft/fjx-smartx-50-1000.html</a> ここにミシンに入れてもいい導電糸が販売されていました。欲しい。 しかし1kmも必要ありません！ 小分けにして販売してもらえませんか！？

LilyPadでの電子工作にてかなりお世話になっている導電糸の推しポイントを解説します。

【電子工作】手縫いにおすすめの導電糸

担当業務のひとつにSeleniumの自動テストコードの保守があります。 この仕事、全わたしのヘイトを集めています👎 <ul><li>サーバーからの応答時間がちょっと遅いだけでテストを実行しない。</li><li>待ち時間をめたくそ延長させても、しばらく経ってテスト実行したらさらに待ち時間を追加しないと失敗する。</li><li>要素が目の前にあるのに「見つかりませんでした〜(´&gt;ω∂`)」</li><li>該当のソースコードを見つけたあと、切り分けて実行してみないと何が起きているか全くわからないため、原因の特定までに時間がかかる。</li></ul> Seleniumは15年以上前にテスト用に開発されたツールが原型となっていますが(*1)、そもそもブラウザの操作を自動化するものです。 最近ではサーバーの応答を待機して自動で次のコマンドを実行するなど、さらに自動テストに特化したテストフレームワークが登場しています。 以下は代表例です。<ul><li><a style="color:#036fe3" href="https://www.cypress.io/" target="_blank" rel="noopener noreferrer">Cypress</a></li><li><a style="color:#036fe3" href="https://github.com/GoogleChrome/puppeteer" target="_blank" rel="noopener noreferrer">Puppeteer</a>（パペティア）</li><li><a style="color:#036fe3" href="https://devexpress.github.io/testcafe/" target="_blank" rel="noopener noreferrer">TestCafe</a> など…</li></ul> この中でも特にわたしが推したいと思った、Cypressについて本記事で説明していきます。 <h2 id="ha32723984a">Cypressとは</h2>自動テストに特化したテストツールの一つです。モダンなUIが特徴で、テストエンジニアのための便利な機能が豊富に揃っています。 <blockquote>Cypressは、現代のウェブのために構築された次世代のフロントエンドテストツールです。最新のアプリケーションをテストする際に開発者やQAエンジニアが直面する主な問題点を解決します。</blockquote>(<a style="color:#036fe3" href="https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell" target="_blank" rel="noopener noreferrer">https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell</a>) <blockquote>なぜサイプレスという名前なのか？私たちは、テストは常に合格すべきもの、言い換えれば常に緑であるべきだと考えています。サイプレスは常緑樹です。だから、サイプレス！</blockquote>(<a style="color:#036fe3" href="https://docs.cypress.io/faq/questions/company-faq.html#Why-the-name-Cypress" target="_blank" rel="noopener noreferrer">Why the name Cypress?</a>) …結局なにがヒノキなのかは理解できませんでした。 続いてCypressの特徴を紹介します。 <h2 id="h5db40f356e">テスト環境の構築が簡単</h2><img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/f213a52df0274e42a1e60f9304291514/B42740B0-F8B4-4C12-B6DC-C1C8C9F72245.png" alt=""> Seleniumを利用したテストフレームワークの場合、 <ul><li>まずはSelenium本体のインストール。</li><li>テスト環境は？Mocha？Jasmine？Jest？Karma？</li><li>アサーションライブラリはChai？Jest？Jasmine？Unexpected？</li><li>レポート出力は？Mocha？Istanbul？</li><li>ブラウザを動かす環境はProtractor？Nightwatch？</li><li>それとあの機能も使いたいから、ライブラリを追加しなきゃ…</li></ul> といった具合にテスト環境の構築完了までハードルがわりと高いです。 Cypressならなんと<code>npm i cypress</code>だけですべてインストールできてしまいます。テスト担当者はテストコードの作成に集中するだけです。 (<a style="color:#036fe3" href="https://www.cypress.io/how-it-works/" target="_blank" rel="noopener noreferrer">End to End Testing Framework | Cypress Documentation</a>) <h2 id="h92d9a3d18a">エラー箇所を動画で保存</h2>エラー箇所と原因の特定が圧倒的に楽になります。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/9207ed3833de4a69a53c05535135f77d/EAA749C6-64D4-4DD9-83AA-0E42D7D6D74E.jpeg" alt=""> 画像は<code>npm run cypress:open</code>でデバッグ中の様子です。 ブラウザの右半分で実行中のアプリケーションを表示、左半分はコマンドログになっておりテストコードで命令した内容が実際にどうなったかを動画で確認できます。 clickなど該当する命令の行をホバーすれば、右半分でテスト中の様子が動画が再生されます。 HTTPメソッド（GETやPOSTなど）の実行結果であるステータスコードも表示されますので、エラー発生原因の調査に非常に役立ちます。 <h2 id="h18dff53c8b">ネットワーク層を監視</h2>ネットワークから返却されたステータスコードを参照して、次の命令の実行に移ります。 テスト作成者がサーバーからの応答時間を考慮してわざわざテストコードに書く必要はありません。 <h2 id="hb5350b21e7">デバッグ支援機能が充実</h2>わたしがテストを担当しているSeleniumを利用したプロジェクトでは、エラー原因の特定が困難を極めます。 怪しい箇所以外をすべてコメントアウトし、テストを走らせて、エラー原因を特定。 さらにその修正のデバッグも、該当箇所以外すべてをコメントアウトしてテストを走らせることで確認しています。 Cypressならそんな面倒な作業は不要です。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/fa7c64e1497a47f783c32f7c12d39952/3E2F3C40-F484-470B-8580-29092AF5764D.jpeg" alt=""> <code>npm run cypress:open</code>でデバッグ支援用アプリケーションが起動します。 このアプリのデバッグ対象のファイル名を押せば、そのテストファイル内のテストを実行します。 ソース内に<code>only</code>と書いておけば、指定したテストだけを実行します。 ソースコードを保存するたびにCypressに内蔵されたテストランナーが自動的にデバッグ中のテストコードを実行します。 gulpを入れたプロジェクトのような感覚でテストコードの作成ができるので、モダンな気分が味わえます。 <h2 id="hb70351caee">さまざまなブラウザに対応</h2>Cypress4.0以降、対応ブラウザが多くなりました。<ul><li>Chrome</li><li>Chromium</li><li>Firefox</li><li>Edge</li><li>Electron</li></ul> など。これだけあればたいていのアプリケーションで困ることはなさそうです。(<a style="color:#036fe3" href="https://docs.cypress.io/guides/guides/launching-browsers.html" target="_blank" rel="noopener noreferrer">Launching Browser | Cypress Documentation</a>) <h2 id="ha61fa42913">CI連携</h2><img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/a42d270781d24f89b6238825eb734ca5/8E6EAC34-3528-4F12-B057-19641A4F1B50.png" alt=""> テスト環境とCypress Dashboardを連携すれば、テストレポートをマイページからGUIで確認できます。 毎月it()500個分までは無料アカウントでテストが実行できます。 （デバッグは含まず、<code>cypress run --record</code>指定して実行したものが課金対象。） <a style="color:#036fe3" href="https://docs.cypress.io/guides/guides/test-retries.html#Will-retried-tests-be-counted-as-more-than-one-test-recording-in-my-billing" target="_blank" rel="noopener noreferrer">Test Retries | Cypress Document</a> さらにCypress DashboardとGithub Actionsを連携すれば、アプリケーションのリリース時など指定したタイミングでテストを実施できます。 Github Actionsは有料ですが、Githubの無料アカウントで 2000分 / 月（約32時間）の無料枠があります。(<a style="color:#036fe3" href="https://docs.github.com/ja/free-pro-team@latest/github/setting-up-and-managing-billing-and-payments-on-github/about-billing-for-github-actions" target="_blank" rel="noopener noreferrer">GitHub Actionsの支払いについて</a>) <h2 id="h745f0c0960">Slackへの通知も可能</h2><img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/3602bc220da641169e936e1e018275b2/26185606-F295-4875-A257-759081709E06.png" alt=""> テスト結果をSlackのテスト用チャンネルへ通知することもできます。 ヘッドレスですべてのテストを実行。Slackでテスト完了が通知されたら好きなタイミングで結果を確認するだけ、という環境が実現できます。 (<a style="color:#036fe3" href="https://docs.cypress.io/guides/dashboard/slack-integration.html#Install-the-Cypress-Slack-app" target="_blank" rel="noopener noreferrer">Slack Integration | Cypress Documentagtion</a>) <h2 id="h29e74aacbe">レポート出力</h2><code>cypress run</code>で実行したテストは、テスト実行環境に「video」というフォルダが自動で作成され、mp4で保存されます。 失敗した箇所はスクリーンショットも保存されます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/6332cf975ff14c5e8fe53ddd2b0dbd04/C025E207-362E-4E05-8EEA-80641EA7503F.png" alt=""> お客さんにテスト結果として、HTMLやJSON形式などのファイルを提出したい場合もあるかと思います。 Cypressにもともと入っているMochaと組み合わせて、mochawesomeなどのパッケージをインストールすれば、任意の形式のレポートを用意できます。 (<a style="color:#036fe3" href="https://docs.cypress.io/guides/tooling/reporters.html#Command-line-4" target="_blank" rel="noopener noreferrer">Reporters | Cypress Documentation</a>) <h2 id="h4451c68f20">トレードオフ</h2>他のテストにはできて、Cypressだと実現が難しいものはデメリット...ではなくトレードオフとしてまとめられています。いくつか紹介します。 (<a style="color:#036fe3" href="https://docs.cypress.io/guides/references/trade-offs.html#Multiple-browsers-open-at-the-same-time" target="_blank" rel="noopener noreferrer">公式から紹介されているトレードオフ</a>) <h3 id="h7d0e3eac22">複数タブ</h3>複数のタブのテストは仕様としてサポートしていません。 (<a style="color:#036fe3" href="https://docs.cypress.io/guides/references/trade-offs.html#Multiple-tabs" target="_blank" rel="noopener noreferrer">Trade-offs(Multiple-tabs) | Cypress Documentation</a>) たとえばリンクを押すと別のタブが開くもの(<code>&lt;a href="hoge"&gt;&lt;/a&gt;</code>)のテストは少し工夫が必要です。 いくつものテストコード案が公式からレシピとして紹介されています。→ <a style="color:#036fe3" href="https://docs.cypress.io/examples/examples/recipes.html#Testing-the-DOM" target="_blank" rel="noopener noreferrer">Recipes | Cypress Documentation</a> <h3 id="hf8f55a9fbc">同一生成元のみ</h3>同じテストの中で、<a style="color:#036fe3" href="https://apple.com/" target="_blank" rel="noopener noreferrer">https://apple.com</a> へ接続した後に<a style="color:#036fe3" href="https://google.com/" target="_blank" rel="noopener noreferrer">https://google.com</a> に接続してテストすることは仕様上できません。 1番目のテストで<a style="color:#036fe3" href="https://apple.com/" target="_blank" rel="noopener noreferrer">https://apple.com</a> 、2番目のテスト（別のit{ }）で<a style="color:#036fe3" href="https://google.com/" target="_blank" rel="noopener noreferrer">https://google.com</a> のテストを用意してください。 (<a style="color:#036fe3" href="https://docs.cypress.io/guides/references/trade-offs.html#Same-origin" target="_blank" rel="noopener noreferrer">Trade-offs(Same-origin) | Cypress Documentation</a>) <h2 id="hbf42ee83e5">Cypress採用事例</h2>Seleniumを利用したテストツールからCypressへ移行したというプロジェクトがいくつか存在します。 以下の記事はProtractor（Angular公式で紹介されているSelenium系テストツール）からCypressに移行した事例です。 <a style="color:#036fe3" href="https://user-first.ikyu.co.jp/entry/2019/04/23/090000" target="_blank" rel="noopener noreferrer">E2EテストをSelenium Webdriver からCypress.io に移行した話 - 一休.com Developers Blog</a> <a style="color:#036fe3" href="https://www.akariinc.com/ja/blog/development/introduction-cypress" target="_blank" rel="noopener noreferrer">次世代e2eテストツールCypress | Development | Blog | Akari, Inc.</a> <a style="color:#036fe3" href="https://www.cypress.io/blog/2018/03/20/angular-cypress-love/" target="_blank" rel="noopener noreferrer">Angular + Cypress = Love | （Cypress公式）</a> <h2 id="ha214098e44">まとめ</h2>公式のドキュメントが非常に充実しているのがCypressの強みです。コピペして自分の環境の設定に書き換えればすぐに動いてしまうものばかりでした。 動画であとからエラー箇所を確認できる点や、テスト対象要素をハイライトするなど、実際にデバッグ作業時間が短縮されてありがたい機能ばかりです。 とにかくテスト担当者思いのE2Eテストツールですし、今後のアップデートもそうなっていくことを期待しています。推ししか勝たん！！！ * * * *1: <a style="color:#036fe3" href="https://www.selenium.dev/history/" target="_blank" rel="noopener noreferrer">Selenium History</a>（2021/8/5 加筆修正）

次世代E2EテストツールCypressの魅力をまとめました。とにかくテスト担当者に優しいツールです。

Cypressしか勝たん！～テスト担当者ファーストなE2Eテストツール～

<h2 id="ha09d336012">症状</h2><ul><li>MacからApp Storeでサインインをしてもなにもアクションが起こらない。アカウント名が表示されない。</li><li>アプリをインストールしようとしても｢操作が完了できませんでした。（com.apple.commerce.clientエラー500）｣のポップアップが表示される。</li></ul> わざと間違ったパスワードを入力すると、上記の症状とは違い、エラーメッセージが表示されます。 パスワードは正しそうです。 <h2 id="hb3bccdd080">試したこと</h2><ul><li>再起動</li></ul>→状況は変わらず。<ul><li>証明書のキャッシュをリセット</li></ul>→/var/db/crls/にcrlcache2.dbがあったので、削除したものの変わらず。<ul><li>キーチェーンアクセスから証明書の削除</li></ul>→異常のある証明書がない。 <h2 id="hc4c05c18f9">解決策</h2>システム環境設定→iCloudへ進んでサインアウトしてください。 完了したら再度iCloudの画面からサインインしてください。 App Storeからサインインすると同じ現象が起きるため、必ずiCloudからサインインしてください。 * * * 環境: Mac mini 2018 Mojave 10.14 参考URL:&nbsp;<a href="https://discussionsjapan.apple.com/thread/250134972" target="_blank" rel="noopener noreferrer">https://discussionsjapan.apple.com/thread/250134972</a>

MacでApp Storeへサインインしているはずなのにアプリをインストールできないときの解決方法を紹介します。

正しいパスワードを入力しているのにApp Storeにサインインできない【Mac】

ドロップダウン<code>&lt;select&gt;</code>の選択肢<code>&lt;option&gt;</code>をクリックさせたいことって、まあまああるじゃないですか。 要素の最初と最後はこんな感じで用意されているんですよ。 <pre><code> var firstElem = elems.first();
 var lastElem = elems.last();</code></pre> 公式でも紹介されています。 <a href="https://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.first" target="_blank" rel="noopener noreferrer">https://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.first</a> <a href="https://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.last" target="_blank" rel="noopener noreferrer">https://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.last</a> これ以外の任意の選択肢、２番目や３番目の要素は<code>.get</code>で取得するとクリックさせることができました。 <pre><code> let allOptions = $$('select option');
 allOptions.get(1).click(); //2ばんめの選択肢をclick</code></pre> * * * 参考: <a href="https://stackoverflow.com/questions /31648203/selecting-second-anchor-element-within-lists-using-protractor" target="_blank" rel="noopener noreferrer">https://stackoverflow.com/questions /31648203/selecting-second-anchor-element-within-lists-using-protractor</a>

Protractorでドロップダウンの2番目以降の要素をクリックする方法を紹介します。

【Protractor】要素の2番目や3番目をクリックする

2019年10月20日。買ったばかりのMac miniですが、MojaveからCatarinaへのアップデート通知がきた。 新しいOSには新しい体験が詰まっているに違いない。早速アップデートすることに。 アップデートボタンを押して、一時間経っても画面が暗いまま。 それどころかよく見たら電源ランプも消えている。 電源ボタンを何度押しても電源ランプがつかない。ファンの音もしない。 きっと悪い夢だろう。おやすみなさい。 ( ˘ω˘ ) ｽﾔｧ… <h2 id="h85a9ff4774">サポートに電話</h2><h3 id="hb34c119155">一回目</h3>翌日の夜。あわてて帰宅して、Appleサポートの電話番号を調べてそこにかけた。 40分ほど経った後、ようやく繋がった。 Appleがまだ公式発表していなかったらしいのだが 「CatalinaにアップデートするとMac mini2018にHDMI信号が送信されないバグが確認されています、アップデートをお待ちください。」 私の症状とは少し違ったが、いまできることは何も無いと言われた。 しかたなくアップデートを待つことに。 あわせて「アップデートが配信され次第、わたくしから優先的に連絡いたします」とも言われた。 <h2 id="hce823e34ef">二回目</h2>2019年12月14日。二ヶ月が経過した。 うちのMac miniはあいかわらず電源が入らないまま。 3日くらいで治るかと思っていたから、さすがに痺れを切らしてサポートに電話。 前回のお兄さんから内線番号をもらっていたので手順通りかけたところ 「入力された番号が確認できませんでした」 機械音声がひたすら流れた。 男に捨てられた時のような、なんとも言えない気持ちになった🥺 <code>Apple サポート 内線</code>でGoogle検索してみる。 Appleほどの素晴らしい企業でもカスタマーサポートの対応への不満は出るようで。 とにかく、前の担当オペレーターには容易に繋がらないというのはよくあることらしい。 * * * 今回の文鎮化はわたしの過失ではない。イライラする。もう40分も待ちたくない。 Appleサポートアプリをインストールして、指定時間にかけてもらうようにすると、早くオペレーターと電話ができるらしい。 iPhoneユーザーなのでApple サポートのアプリをインストール。 サポートタブを押すと、現在同じAppleIDでログインしている端末を確認することができる。 相談対象の端末、あてはまる症状、かけ直してほしい日時（当日も可能）をUIに従って選択するだけで準備完了。あとは待つだけ。 予約時間の5分後には着信。前回の電話終了後に発行された受付番号を伝えると非常にスムーズだった。 約40分ほどの通話で、手元のmac mini（14万の文鎮）は宅配業者により自宅で集荷、工場で修理、自宅へ配達されることが決定した。 <h2 id="h550fb3ba0b">修理後</h2>12月17日。 mac miniが戻ってきた。 Appleのロゴ入りクリアファイルには修理内容を報告する一枚の厚紙が入っていた。 「症状を確認しましたので、基盤を交換いたしました。」 ここまでメールや電話などスマートな方法をとってきたAppleから、紙で修理報告された。 当然、mac miniに入ってたデータは基盤交換されたから無くなるよね。 よい子はTimeMachineでバックアップを取っておこう。 AppleにはAppleの効率的な仕事のやりかたがあるから、そのシステムにうまく乗っからないと器用にAppleを使えないことを理解した。 Appleサポートと早く話したい時は、かけ直してもらおう。

ただアップデートしただけなのに電源が入らなくなりました。mac修理の流れを紹介します。

Mac mini 2018のCatalinaアップデートに失敗しました

テキストボックスに文字が入力されていない場合、すぐ下に「値が入力されていません」のエラーメッセージを表示する機能を作ります。 Angularが用意した機能として、データバインディングというものがあります。 <iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fintelligent-clarke-ok1vfp%3Ffontsize%3D14%26hidenavigation%3D1%26initialpath%3D%252Fdata-binding%26module%3D%252Fsrc%252Fapp%252Fdate-binding%252Fdata-binding.component.ts%26theme%3Dlight%26editorsize%3D50&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fintelligent-clarke-ok1vfp%3Ffontsize%3D14%26hidenavigation%3D1%26initialpath%3D%252Fdata-binding%26module%3D%252Fsrc%252Fapp%252Fdate-binding%252Fdata-binding.component.ts%26theme%3Dlight%26editorsize%3D50&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fok1vfp%2Fscreenshot.png&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> TypeScriptセクション（以下、ts）で定義した変数を、テンプレート側(html)で参照できる機能です。 今回はデータバインディングではなく、テンプレート参照変数を使います。 <h2 id="h2846d672de">テンプレート参照変数</h2>Angularで作成したプロジェクトでは、HTMLセクションのことを「テンプレート」と呼びます。 AngularのHTMLテンプレートはAngularが用意した特別な構文を使用することで、条件分岐(if)・ループ(for)・変数定義などが実装できます。 これにより、アプリケーションのHTML表現を拡張できるというわけです。 今回取り上げるテンプレート参照変数は、すべてテンプレートの中で完結します。 テンプレート構文の中で変数を定義、変数に値を格納、変数の値を参照できるのです。 テンプレート参照変数はテンプレート内の要素に<code>#変数名</code>を定義することで使用できます。 <iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fintelligent-clarke-ok1vfp%3Ffontsize%3D14%26hidenavigation%3D1%26initialpath%3D%252Ftemplate-reference-variables%26module%3D%252Fsrc%252Fapp%252Ftemplate-reference-variables%252Ftemplate-reference-variables.component.ts%26theme%3Dlight%26editorsize%3D50&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fintelligent-clarke-ok1vfp%3Ffontsize%3D14%26hidenavigation%3D1%26initialpath%3D%252Ftemplate-reference-variables%26module%3D%252Fsrc%252Fapp%252Ftemplate-reference-variables%252Ftemplate-reference-variables.component.ts%26theme%3Dlight%26editorsize%3D50&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fok1vfp%2Fscreenshot.png&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> これを踏まえて、テキストボックスが空の場合にエラーメッセージを表示させる実装をします。 <iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fintelligent-clarke-ok1vfp%3Ffontsize%3D14%26hidenavigation%3D1%26initialpath%3D%252Frequired-text-box%26module%3D%252Fsrc%252Fapp%252Frequired-text-box%252Frequired-text-box.component.ts%26theme%3Dlight%26editorsize%3D50&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fintelligent-clarke-ok1vfp%3Ffontsize%3D14%26hidenavigation%3D1%26initialpath%3D%252Frequired-text-box%26module%3D%252Fsrc%252Fapp%252Frequired-text-box%252Frequired-text-box.component.ts%26theme%3Dlight%26editorsize%3D50&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fok1vfp%2Fscreenshot.png&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> Angular公式の<a href="https://angular.jp/guide/template-reference-variables#angular%E3%81%8C%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E5%A4%89%E6%95%B0%E3%81%AB%E5%80%A4%E3%82%92%E5%89%B2%E3%82%8A%E5%BD%93%E3%81%A6%E3%82%8B%E6%96%B9%E6%B3%95-" target="_blank" rel="noopener noreferrer">Angularがテンプレート変数に値を割り当てる方法</a>に以下の説明があります。 <blockquote>変数が#var="ngModel"のように右側に名前を指定すると、変数は要素において一致するexportAs名をもつディレクティブやコンポーネントを参照します。</blockquote> これを利用して、<code>#var1="ngModel"</code>で定義と、テンプレート参照変数への<code>ngModel</code>の割り当てを行います。 また<code>ngIf="var1.errors?.['required']</code>で参照しています。 テキストボックス(<code>&lt;input type="text"&gt;</code>)を必須項目<code>required</code>にしておきます。 <pre><code>&nbsp;&lt;div *ngIf="var1.errors?.['required']"&gt;</code></pre> ここでテキストボックスのエラーを検知します。この<code>*ngIf</code>の条件が満たされれば、エラーメッセージを表示する仕組みです。 このように<code>&lt;input&gt;</code>要素の値を表示したい場合にはテンプレート参照変数を、ts側で値を加工する場合はデータバインディングを使用するなど、状況に応じて使い分けています。 <h2 id="h7094d7adcd">注意</h2>テンプレート参照変数は読み取り専用です。 <code>[(ngModel)]="var"</code>とすることはできません テンプレート参照変数の命名ですが、"-"を使うと<blockquote>Template parse errors: "-" is not allowed in reference names</blockquote>こんな感じで怒られました。ハイフンは使用できないようです。 "_"(アンダーバー)は使えました。 また<code>&lt;input&gt;</code>要素で<code>ngModel</code>を使う場合は、<code>FormsModule</code>のインポートが必要となります。忘れずapp.module.tsに記載してください。 <pre><code>// app.modile.ts
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";

@NgModule({
 declarations: [
 AppComponent,
 ],
 imports: [BrowserModule, FormsModule],
 providers: [],
 bootstrap: [AppComponent]
})
 export class AppModule {} </code></pre> <h2 id="h9be0c3393d">おわりに</h2> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/1e6551fd0d0a46529b4dabd0c48a0783/0C78C89E-A53D-4EDF-A77A-3475B1CCA990.jpeg" alt=""> いつもこの本にお世話になってるんですが、慣れない言葉の連続で頭に入ってきません🐑💤💭 Angular公式はきっと賢い人が作ったのでしょう。それっぽい検索ワードで調べたのにわたしにもわかる解説が出てきませんでした。 素人は『 <a href="https://angular.jp/guide/forms" target="_blank" rel="noopener noreferrer">テンプレート駆動フォーム</a> 』なんて専門用語わからないです。公式さんにはもっと初心者に優しくなってほしいものです。 * * * 参考: &nbsp;<a href="https://angular.jp/guide/template-syntax" target="_blank" rel="noopener noreferrer">Angular 日本語ドキュメンテーション - テンプレート構文</a>&nbsp; <a href="https://angular.jp/guide/forms" target="_blank" rel="noopener noreferrer">Angular 日本語ドキュメンテーション - Building a template-driven</a>&nbsp; <a href="https://angular.jp/guide/template-reference-variables" target="_blank" rel="noopener noreferrer">Angular 日本語ドキュメンテーション - テンプレート変数</a>&nbsp;

テンプレート(html)だけで表示/非表示の切り替えを実現できて便利です。よく使いそうなのでまとておきます。

【Angular】テキストボックスが空の場合にエラーメッセージを表示する

<h2 id="h64891b528e">対象読者</h2><ul><li>静的サイトジェネレーター製サイトの管理者</li><li>かつGoogle Adsenseで広告を貼り付けている方</li></ul> GatsbyJSはもちろん、Jekyll,Hugo,Hexoなどを使われている方も当てはまるのでは...?<h2 id="hea7606c3a9"> 事象</h2>ある日Google Adsenseにアクセスすると、このようなエラーが。 <blockquote>要注意 - 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。</blockquote> ads.txtというファイルを作成して、ルート直下に設置することを求められているようです。 テキストに記載する内容は「<a href="https://support.google.com/adsense/answer/7532444?hl=ja" target="_blank" rel="noopener noreferrer">ads.txt に関するガイド - Google AdSense ヘルプ</a>」を参照してください。 <blockquote>ads.txt を使用すれば、購入者が偽の広告枠を判別できるため、サイト運営者様としても偽の広告枠に収益が流れるのを阻止し、その分収益を増やすことができるというメリットがあります。</blockquote> ルート直下にファイルが置けるのは、サイト管理者だけですからね。 Wordpressとかファイル保管庫に直置きすればいいサイトはすぐに作業に取りかかれそうです。 しかしビルドして生成されたhtmlを表示している静的サイトジェネレーター製サイトでは、ads.txtをどこに置いたらいいんでしょう？ 記事を投稿してURLをads.txtにしてみました。当然ですがエラーは解消されませんでした😓 <h2 id="h141087ae17">解決法</h2>staticフォルダにads.txtを置いてください。 gatsby-starter-gcnを使っている方はsrcと同じ階層にstaticフォルダがあると思います。 よく考えたらlogoファイルを設置した時に、URLを入れたらlogo~.pngにアクセス出来たことに気付いたのに。 どうしていままでそこにads.txtを置こうと思わなかったのか。 ここまで費やした時間が悔やまれます......😇<h2 id="ha214098e44"> まとめ</h2>Google Adsenseからメールがきてこのエラーに気づきました。 エンジニアなのでサイト製作に没頭しがちですが、定期的にGoogle Search ConsoleやGoogle Analyticsなんかのアクセス解析ツールを巡回することも、サイトのメンテナンス業務として大切ですね。

｢収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。｣のエラーの解決方法を紹介します。

GatsbyJS製サイトにads.txtを設置する方法

このページはGatsbyJSのStarterを使ってサイトを作っている方に向けた記事です。 該当Starterはgatsby-starter-gcnです。 <a href="https://www.gatsbyjs.org/starters/ryanwiemer/gatsby-starter-gcn/" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/starters/ryanwiemer/gatsby-starter-gcn/</a> <h2 id="h5210acff2f">エラー内容</h2>久しぶりにnpm installしたらローカルリポジトリのエラーが消えなくなり、<code>gatsby build</code>しても更新できなくなってしまった。手元のリポジトリを削除して<code>git clone</code>で再びローカルリポジトリを作成した次第。 <blockquote>error We encountered an error while trying to load your site's gatsby-config. Please fix the error and try again.Error: Contentful space ID and access token need to be provided.</blockquote>内容のあるスペースIDとアクセストークンを提供する必要があります。 内容のある......(ﾟДﾟ)ﾊｧ? <h3 id="ha14e6f0885">作者からのアドバイス</h3>作者もREADME.mdの最後で記載していますが、githubに上げるファイルに直接SpaceIDやManagement APIの値を書くことは絶対にしてはいけません。 作者は記載しなくともサイトが作れるように設計してくださっています。 リモートリポジトリを公開設定にしている方は特に気を付けてください。 <h2 id="h141087ae17">解決法</h2>みなさんのgit cloneしたリポジトリの中にREADME.mdってあるじゃないですか。 がっつりここに解決法が書いてあります。 すぐにREADME.mdにたどり着けない方はオリジナルのリポジトリをご覧ください。 <a href="https://github.com/ryanwiemer/gatsby-starter-gcn" target="_blank" rel="noopener noreferrer">https://github.com/ryanwiemer/gatsby-starter-gcn</a> 参照する箇所はGet Started → Setup Contentfulです。 まずは以下のコマンドを実行してください。<pre><code>npm run setup</code></pre> コマンドを実行すると説明文が出てきます。 案内のとおり、Contentfulにログインして app.contentful.com -&gt; Space Settings -&gt; API keys に進んでください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/a4b9d086af054974a45f9aaf62c288bd/905DBD1D-7F3C-44CD-AEC7-65EFF7BA00E6.jpeg" alt=""> コマンドで入力を求められるとおり、SpaceID・Delivery API・Preview APIを入力します。 問題は次に入力を求められるManagement APIのありか。 この名前にピンときて、メモした場所を思い出せる方はぜひそちらの値を入力して下さい。 私はメモをどこに置いたか忘れました🐘 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/411f7498a0b040039a8dde4f39270bb9/55DB6AE1-0659-448B-B48E-CC22747D47B8.jpeg" alt=""> 先ほどのSpaceIDとかの載っている画面からひとつ戻ると"Content Manegement Tokens"のタブが出てきます。 そこに以前設定したManegement APIがありますがいくらクリックしても見られないんですよね(´・ω・`) 新しく作成しましょう。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/33a7bb29b50247878ffabce5951ca595/13D21232-A218-4902-AC05-5845D5C0A7DB.png" alt=""> このAPIを入力すればあとは待つだけ。 処理に少し時間がかかりますが、終わればローカルリポジトリの構築は完了です。 * * * そもそも英語が読めないのに苦労して構築したんだから、Starter構築記事を書いとけばよかったんですよ🗯 あまりに道のりが長そうで書く気力が起きなかったのがこのエラーに再び苦しむことになった原因です、はい。

README.mdをちゃんと読めば気づけたミスです。英語の読解力が乏しすぎる私のためのメモです。

"Contentful space ID and access token need to be provided."というエラーに遭遇したら

<h2 id="ha09d336012">症状</h2><pre><code>objs.forEach(obj =&gt; {
 /* 処理 */
} );</code></pre> こう書いて実行したところ… <blockquote>Error: Uncaught TypeError: objs.forEach is not a function</blockquote> 怒られました。 <h2 id="had0b1b94af">解決方法</h2>配列風オブジェクトでforEachが使いたい場合、このように記載するようです。 <pre><code>Array.prototype.forEach.call(objs =&gt; {
 /* 処理 */
} );</code></pre> 配列風オブジェクトとはこんなやつ。 なんでこんなオブジェクト扱ったのかは、いまとなっては不明です。 <pre><code>{
 0: Apple,
 1: Banana,
 2: chocolate,
 length: 3,
};</code></pre> <h2 id="hc5f82df7f7">for...of が使える</h2>for...of文でも同じことができます。 <pre><code>for(let obj of objs) {
 /* 処理 */
}</code></pre> <ul><li>関数を書かなくていい</li><li>break,continue,returnが使える</li></ul> というメリットがあります。 forEach以外のループも検討してみてください。 * * * 参考記事: <a href="https://stackoverflow.com/questions/35969974/foreach-is-not-a-function-error-with-javascript-array/35970020" target="_blank" rel="noopener noreferrer">forEach is not a function error with JavaScript array - Stack Overflow</a>

forEachを使おうとしたらエラーで先に進めなくなってしまいました。forEachだけにこだわらず、他の方法でループを実装するのもよさそうです。

【JavaScript】forEach is not a functionというエラーが出力されたら

Amazon Web Service から『もうすぐ12ヶ月間の無料枠が終了する』とメールがきました。 <blockquote>Dear AWS Customer, Our records indicate that the Free Tier for account xxxxxxxxxxx will expire on July 31, 2019. The AWS Free Tier includes offers that expire 12 months following sign up, and others that never expire. </blockquote> 突然英語のメールがきたのでビビって読む気にならず、そっ閉じしてしまいました。 これは放っておくと料金を請求されてしまいます。 公式サイトに手順は載っていますがいつもどおりテキストのみです。パッと見てよくわからん… <a href="https://aws.amazon.com/jp/premiumsupport/knowledge-center/close-aws-account/" target="_blank" rel="noopener noreferrer">AWS アカウントを閉鎖する　- 【AWS 公式】</a><h2 id="h31d727ccda"> 準備</h2>必要なワークスペースはGitにあげるなどして残しておきましょう。 rootユーザーはもちろんiamユーザー、組織のメンバーアカウントも確認しましょう。 いつもとは違うリージョンを使っているかもしれません。慎重に確認してください。 <h2 id="hd3a4e59430">各ユーザーアカウントの削除</h2>先に、iamユーザーなどのrootユーザー以外のアカウントを削除する必要があります。 rootユーザーでログインした後、Identity and Access Managementへ移動します。 Topの検索バーからiamと検索すると出てきます。 左側のメニューからユーザーを選択します。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/86655544affd4fafad227ebbd4164631/2339F1EF-D6D3-4835-AC32-50E3299E06BA.png" alt=""> ユーザーを全て選択して削除してください。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/52c13ececa824e60bc8c713beff117a0/2120B121-A62C-4486-8396-FB0E290CC1DD.png" alt=""> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/dbdae671a3204b189f96f5ad592df6fe/7AD61FC3-EFC5-47A7-9B68-6346C59EACA9.png" alt=""> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/c8117fad892f497eaa56448636fbee0f/568C90D6-1453-4524-B23A-5B2B5DD427FE.png" alt=""> 自分のユーザーIDが右上に表示されています。 クリックするとメニューが出てくるので、マイアカウントを選択します。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/10950815e7ed47088a87b8cc16cc987e/F773C4BA-6CF7-4D57-912C-C5484FFDCF50.png" alt=""> 出てきた画面を一番下までスクロールすると、赤い「アカウントの解約」ボタンが表示されます。 チェックボックスにチェックを全て入れた上で、アカウントの解約ボタンを押します。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/de2b7ce7e32846869def410861d292eb/DBDDF231-681B-49AD-B185-02DD1BF68D0D.png" alt=""> 念押しのポップアップも、アカウントの解約ボタンをぽちっと。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/bc1e4d7c78d64756ac3fdfa6ed20c7d6/7233CA51-CA9E-4847-8CD6-76E31B3D02F0.png" alt=""> 「アカウントは解約されました」のトーストが表示されれば解約完了です。 これで料金が請求される心配はありません。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/49fc6851b36c467381c2c28d864ba5ef/C96EFD7C-1D01-4EFE-A66E-C232E9DCA002.png" alt=""> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/081b271acb8b406997fe1d6eec74b49d/D28F8123-4F56-466C-930C-1D0837016304.png" alt=""> 公式がスクショ付きで解説してくれたらもっと楽に作業できたのになー。 * * * たぶんAWSつよつよエンジニアの皆さんは、無料期間が終わっても同じアカウントを使い続け、きちんと料金をお支払いしていると見た！ 5月にAngularの勉強しすぎて400円くらい払ったから、Amazonさんそれで許して(｀；ω；´)ﾌﾞﾜｯ

AWS運営から英語でメールがきました。どうやらこのメールを放置すると正規の料金を取られる模様。画像付きで解説します。

【AWSを無料で使いたいなら】AWS無料期間が終了する前にアカウントを解約しよう

AWS Cloud9ワークスペースで作業に入る前にバージョン管理の設定を行います。 <h2 id="h31d727ccda">準備</h2>Cloud9にワークスペースを作っておきます。 中にすでに何かのプロジェクトがあっても構いません。 GitHubアカウントも作成しておいてください。 <h2 id="h8221109fb9">ローカルリポジトリの作成</h2>Gitを使ってバージョン管理をはじめるために、ローカルリポジトリの作成と初期化を行います。 ローカルとは言うものの当然PC上ではなくワークスペース内のお話です。 <code>cd ~ </code>でルートディレクトリ（左側のツリー上で最も上に表示されているフォルダ）に移動します。 <pre><code>git init</code></pre> 作成できたら<code>$master</code>と表示されます。 「いまgit上ではmasterという名前のブランチにいますよ」という意味です。 <h2 id="h88876ec3b5">リポジトリ</h2>リポジトリ(レポジトリ Repository)とは、ファイルやディレクトリの状態を記録する場所です。 後述するコマンドでファイルの内容やフォルダ構成、変更された箇所などが自動的に保存されます。 保存されたこれらの情報は履歴として残り、あとから確認することができます。 <h2 id="h1f3d68794e">ブランチ</h2>Gitは履歴を枝分かれさせて記録することができます。 例えば複数人で開発をしている際、追加している機能ごとにバージョン管理できたら便利だと思いませんか？ ブランチを切っていればそれが可能です。 難しい概念につい身構えてしまいますが、実は既にブランチを作っています。masterブランチです。 Gitのリポジトリを作成すると自動で作られます。 主たるブランチですので、本番環境のソースコードが割り当てられることが多いです。 2020年10月以降に新規作成したリポジトリのデフォルトブランチは、mainという名前になります。 <h2 id="h83e4cf5c5c">コミット対象になるファイルを確認</h2>ルートディレクトリの中でGit管理対象になるファイルを確認します。 <pre><code>git status</code></pre> すると下記のように表示されます。 <pre><code>On branch master

No commits yet

Untracked files:
 (use "git add &lt;file&gt;..." to include in what will be committed)

 README.md
 ……

nothing added to commit but untracked files present (use "git add" to track)</code></pre> すでに他のプロジェクトが入っているワークスペースでは<code>Untracked files:</code>のあとにズラッとファイル名が並びます。 <h2 id="h18eb814e0f">ローカルリポジトリにファイルを追加</h2><pre><code>git add .</code></pre> addコマンドのあとに<code>.</code>を指定するとルートディレクトリ以下のフォルダ・ファイル全て、つまりワークスペース上のファイル全てがGit管理下におかれます。 アスタリスク(*)でも行けますが、慣例に習いこちらを使います。 <pre><code>git add README.md</code></pre> ファイル名を指定することで特定のファイルのみをGit管理下におくことも可能です。 <h2 id="h40b3ebdd53">ローカルリポジトリをコミットする</h2>ここで<code>git status</code>でローカルリポジトリの状況を確認します。<pre><code>No commits yet

(中略)
 new file: README.md</code></pre> まだコミットされていませんよ、と言われています。 ローカルリポジトリに正式にファイルを登録します。 <pre><code>git commit -m "はじめてのコミット"</code></pre> <code>git commit</code>だけでもコミットできるのですが、あとでコミット履歴を見返した時、一行一行履歴を開いてコードを一つ一つ見ないと何を修正したのかわからなくなります…。 それを避けるため<code>-m</code>オプションと続けてコメント内容を書くことでわかりやすくしています。 コミットが成功したところで<code>git status</code>で確認します。<pre><code>nothing to commit, working tree clean</code></pre> ローカルリポジトリの中にコミット対象のファイルはありません。 先ほどのコミット以後変更されたファイルはありませんよと教えてもらえます。 <h2 id="hbf48464ab1">GitHubリポジトリを作成</h2>Cloud9ワークスペースのファイル管理からはいったん離れ、GitHubアカウント上にリポジトリを作ります。 Webブラウザに移動してGitHubアカウントにアクセスします。 右上の+ボタンを押して｢New repository｣を選びます。 必須項目はRepository nameのみです。 必要であればリポジトリを公開するか(Public)、非公開にするか(Private)を選択して、Create Repositoryを押します。 GitHubの無料アカウントではプライベートリポジトリが無制限に作れるようになりました。 またプライベートリポジトリのアクセス人数も無制限になりましたので、用途に合わせて好きな方を選択してください。 リポジトリを作成すると[HTTPS | SSH]トグルボタンの右にURLが表示されています。 このURLはCloud9で必要ですので右端のコピーボタンを押してクリップボードにコピーしておきます。 もちろん、あとから該当リポジトリページにアクセスして確認することもできます。 <h2 id="h883a882451">ローカルリポジトリにリモートリポジトリを登録</h2>ローカルリポジトリはCloud9側で作ったリポジトリ、リモートリポジトリはGitHubアカウント上に作ったリポジトリです。 ローカルリポジトリにおいて、リモートリポジトリを｢origin｣という名前で登録します。 <pre><code>git remote add origin 先ほどのURL</code></pre> 「先ほどのURL」と書いてある箇所にGitHubでコピーしたURLを貼り付けます。 originは慣例です。好きな名前を付けていいですが、多くのGit解説本や記事にはoriginで書いてあると思います。最初のうちはoriginを採用するのがおすすめです。 <h2 id="hd9372eade9">ローカルリポジトリからリモートリポジトリへソースをプッシュ</h2><s>カタカナばっかじゃん、ルー大柴かよ。&nbsp;</s>いよいよローカルリポジトリでコミットしたファイルをリモートリポジトリへアップロードします。 <pre><code>git push アップロード先のリモートリポジトリ名 ローカルブランチ名</code></pre> 例えばこんな感じで。 <pre><code>git push origin master</code></pre> Gitは上流リポジトリ（この場合GitHub上のリモートリポジトリ）のうち指定がなければ同名のブランチにプッシュするようです。 もし同名ブランチがなければ勝手にリモートリポジトリに作成されます。 pushコマンドにリモートブランチを指定するオプションをつけることもできます。 <pre><code>git push リモートリポジトリ名 ローカルブランチ名:リモートブランチ名</code></pre> Cloud9でワークスペースを作って実験するだけならあまり出番はないのかなと思います。 Angularの勉強をされる方は<a href="https://microayatron.com/create-angular-project-on-cloud9/" target="_blank" rel="noopener noreferrer">Cloud9上にAngular環境を構築する方法</a>を載せているのでぜひご覧ください😊

AWS Cloud9のワークスペースでソースコードをGitHub管理するための初期設定について解説します。

Cloud9ワークスペースをGitHubでバージョン管理しよう

Angularを仕事で触ることになりました。 Webだと最近はLaravel(PHP)やGatsbyJS(ReactJS)と楽しく戯れていましたが、いよいよノータッチだったAngularを勉強せねばならなくなりました。 <h2 id="h55f39cbc34">ワークスペースを作る</h2>デフォルト設定のままワークスペースを立てます。 基本的にはボタンをぽちぽち押していけば立てられますが、<a href="https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/tutorial.html" target="_blank" rel="noopener noreferrer">AWS Cloud9 の IDE チュートリアル - AWS Cloud9</a>に詳しく記載されています。不安な方は参照してください。 <h2 id="h0bc1b14a1d">Angularの設定</h2>Cloud9はワークスペースを立てた段階でnodeもnpmも入っています。 不安な方は<code>node -v</code>と<code>npm -v</code>コマンドを入力してみてください、バージョンが出力されれば成功です。 <h3 id="h3761834859">Angular CLI</h3>Angular CLIとは、Angularアプリのプロジェクト生成や実行などが行える公式のコマンドラインツールです。 <code>ng</code>から始まるコマンドはこのAngular CLIが入った環境で機能するコマンドです。 Angularだから「an」とかじゃないんですね。 グローバルにインストールしてください。 <pre><code>npm install -g @angular/cli</code></pre> はい、できました。この記事終わりです。 <s>まとめ</s> <blockquote>? Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at <a href="https://policies.google.com/privacy?" target="_blank" rel="noopener noreferrer">https://policies.google.com/privacy?</a> For more details and how to change this setting, see <a href="http://angular.io/analytics" target="_blank" rel="noopener noreferrer">http://angular.io/analytics</a>. (y/N)</blockquote> 統計情報を提供するか聞かれます。お好みで選択してください。 <h3 id="h324c52f8b9">Angularプロジェクトの作成</h3>Angular CLIがあればgit cloneできなくても大丈夫！すぐにビルドできる状態の新規プロジェクトをコマンド一つで作成してくれます。<pre><code>ng new sample</code></pre>作成できたら<pre><code>cd sample</code></pre>でプロジェクトの中に移動します。<h3 id="h44f8a9e35d"> Angularプロジェクトのビルド</h3>今はただのフォルダ群ですが、何も変更を加えなくてもビルドが可能です。 <pre><code>ng serve --host 0.0.0.0 --port 8080 --disableHostCheck</code></pre> ローカルにAngular環境を作る時には<code>ng serve</code>だけでいいのですが、Cloud9はホスト名やポートの設定が必要なようです。 <code>--public 自身のホスト名.c9users.io</code>をつけるのが良さそうですが長すぎて試してすらいません。 package. jsonでコマンドを登録しておくと<code>npm start</code>だけで動くようになって非常に便利です。 <h3 id="hcfc4572c77">(エラー)Git CloneしたプロジェクトがCloud9上でビルドできない</h3>公式のプロジェクトはもちろん、他のCloud9ワークスペースのプロジェクトをGit cloneしてきてもダメでした。 今回このエラーを解決する時間がもったいなかったので必要なファイルをコピペしてAngularの勉強に励みました。 ちょっと不便だなぁ… このエラーで苦労するくらいなら、Angular公式ページでソースコードの解説でおなじみの<a href="https://stackblitz.com/edit/angular" target="_blank" rel="noopener noreferrer">StackBlitz</a>や、<a href="https://codesandbox.io/s/angular-angular" target="_blank" rel="noopener noreferrer">CodeSandbox</a>を使うのがおすすめです。 * * * Angular環境を整えたワークスペースがサクサク作れるのですぐに開発の勉強に入れました。 <a href="https://microayatron.com/cloud9-git/" target="_blank" rel="noopener noreferrer">Cloud9ワークスペースにGit環境を導入する方法</a>を紹介していますのでこちらもぜひご覧ください。

手軽にAngularの動作確認ができる環境を構築するべく、AWS Cloud9のワークスペースへの設定方法を説明します。

Angular環境をAWS Cloud9にサクッと構築

プログラマになって３年。 ３年も経ったのに理想のキャリアからは程遠く。せめてモダンなWebフレームワークでブログをリニューアルしたいなー、と考えていました。 <h2 id="hb7bbd45224">改善したい点</h2>ここまで２年ほどWordPressブログを運営してきました。その中で感じた煩わしい点です。 <h3 id="h2fdbdb2c43">ハッキングが怖い</h3>一番はこれにつきます。 先日、知り合いのWordpressサイトがクラッキングされました。 自分のブログも壊される可能性があるとわかり、それ以来戦々恐々としています。 閲覧数の少ない弱小ブログではありますが、自分なりに苦労して作ったサイトなので。 Wordpressを卒業したらハッキングされないわけではありませんが、リスクは減らせます。 WordPressは世界中で使われている便利なCMSだからこそ、セキュリティホールが見つかれば攻撃されやすいことを実感しました。 <h3 id="h5e9a1557a8">サイトの読み込み速度</h3>ページを表示するまでの時間が長すぎました。わたしもイライラしました。 欲しい情報があるのに待たされるぐらいなら、他のサイトに行きますよね…。 半年ほど前からGoogle Page Insightsの成績がだんだん悪くなっていることにも気がつきました。 もちろんWordPressを最適化して爆速にしてる方もいらっしゃるのは存じ上げております。 しかしWordpressではプラグインやテーマの干渉に振り回されてやりたい機能の実現に時間がかかった経験から、そこまでWordPressを極める気力がおきませんでした。 実際GatsbyJSでブログを自分の手で作り直してみて、Webへの理解が深まりました。 <h2 id="hd5f7b11ee1">GatsbyJS</h2><s>新田真剣佑くんと柳楽優弥くんがCMに出演している…</s> <a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">GatsbyJS</a>はReactで作られた静的サイトジェネレータです。 他の静的サイトジェネレータ同様ビルドコマンドでhtmlページが生成できるのですが、npmやGatsby Pluginと組み合わせることで様々な機能が使えます。 当ブログでは動的にAdsense広告を取得して表示しています。 ...とはいえ、すべて自分で作ったわけもなく。 <a href="https://www.gatsbyjs.org/starters/ryanwiemer/gatsby-starter-gcn/" target="_blank" rel="noopener noreferrer">こちら</a>のStarterをgit cloneして当ブログ用にカスタマイズしました。StarterはWordpressのテーマと同じような機能です。 今回クローンしたStarterを使用するには後述のNetlifyとContentfulが必要でした。 便利な技術は英語を読み解いた先にある…( ´ ཫ ` ) <h3 id="hadb1c41dc8">Netlifyとは</h3>サーバー周りの役割を一手に引き受ける、気が利くホスティングサービスです。 GitにあるGatsbyのファイルが更新されると、記事とGatsbyのソースからHTMLページを生成（ビルド）・サーバーへ反映（デプロイ）して、また次の更新がくるまで待機します（ホスティング）。 新規サイトの立ち上げからドメインの設定まで、ボタンをポチポチ押していくだけでスムーズに進むので非常に助かりました。 <h3 id="h45fe81aded">Contentfulとは</h3>CMS担当です。WordPressで言えばエディタ部分です。 今回クローンしたStarterでは記事の文章や写真はデータベースやGitではなく、このContentfulに登録します。 Contentful上で記事をPublish(公開)すると更新通知がNetlifyに送られます。 それに気づいたNetlifyがビルド・デプロイすることでサイトに反映されます。 Gatsby側でContentfulの更新された記事を取得し、再度NetlifyにHTMLページを生成してもらうために更新通知をしています。（更新通知の正体について知りたい方は<a href="https://www.netlify.com/docs/webhooks/" target="_blank" rel="noopener noreferrer">こちら</a>を参照ください。） WordPress時代はいろいろなプラグインを入れてやっと使いやすいエディタにしていました。 しかしそんなもの必要ないほど最初から全てが揃っています。 一番の強みはこれを採用するだけで記事をMarkdown形式でサクサク書けるようになったことでしょうか？ ……とか言ってたらWordPressにGutenberg（グーテンベルク）が実装されました。 Contentfulも十分便利ではありますが、無理してContentfulで書かなくても、好きなMarkdownエディタでいつでも記事を書くことが可能になりました٩( 'ω' )و <h2 id="h9eee297422">移行後の読み込み速度を計測</h2><img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/e0b362fade07452c98319f59a270863c/D6722554-DB03-4804-826B-1BF7956580A4.png" alt=""> WordPress時代はだいたいこんな感じの点数。 ｢苦労して作ったブログなのに…」と凹んでいました。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/e577fcb7c61849f3b629303b07c32131/0FA3E724-2AD3-4231-9744-1C7D7FE8FF34.png" alt=""> 移行後はご覧の通り。PWAもしっかり点灯しています。 Performance爆速ブログの完成でございます✧*｡ 黄色の項目もありますね。伸びしろですねぇ。 <h2 id="h25d0e20685">おまけ</h2>ここにたくさんのGatsbyJS製サイトが紹介されています。 <a href="https://www.gatsbyjs.org/showcase" target="_blank" rel="noopener noreferrer">https://www.gatsbyjs.org/showcase/</a> かっこいいサイトばかりで圧倒されてしまう... リニューアルしたtrogですが、読者の皆さまにとって使いやすくなるよう、少しずつ改良していきます～！

GatsbyJS(React)で作り直したご報告です。Google Speed Insightsの結果が良くなってうれしいかぎりです。

trogはWordpressを卒業しました

ウイルスバスターをインストールしたパソコンでGoogle検索をすると、サイトの安全性が色でわかるようになっています。緑色なら安全、グレーなら未評価、赤は危険なサイト、など。 他のセキュリティソフトも同様かと思います。 ポンコツプログラマが作ったサイトはどのページもグレーの「未評価」で表示されています。 たいして一番上の検索結果に表示されている、Google Search ConsoleはGoogleさんが製作した素晴らしいサイトですので、ウイルスバスターのWeb安全性評価が緑色の「安全」になっています。 もしこの緑色がGoogleの宣伝ではなく、自分の欲しい情報が載っているサイトだったら、わたしならまずは安全性の保障されたサイトを押しますね。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/7e3b0c369b114ae19508331a74e441b3/99B4CB32-2BD3-4DF2-BC6F-A452BBABBB07.jpeg" alt=""> SSL化もしたことですし、トレンドマイクロ社さんに、当サイトは安全であると認めてもらおうと思います。 <h2 id="h812634ef52">Trend Micro Site Safety Centerへアクセスする</h2>まずはトレンドマイクロのWebサイト内にあるWebサイト安全性を評価してもらえるページにアクセスします。 <a href="https://global.sitesafety.trendmicro.com/?cc=jp" target="_blank" rel="noopener noreferrer">Trend Micro Site Safety Center</a> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/6503bb16b8a447ad9c099cfcbb9e52bf/5CCEF33B-9308-4BC4-A2EE-01CE7D601DF3.jpeg" alt=""> 「トレンドマイクロによるWebサイトの安全性の評価」の下にURLを入力できるバーがあります。 そこに再評価してほしいサイトのURLを入力します。 「microayatron.com」のように入力すると「http://microayatron.com」とSSL化されていない時代のURLが表示されました。 SSL化対応しているサイトは「<a href="https://microayatron.com" target="_blank" rel="noopener noreferrer">https://microayatron.com</a>」とスキームも入力した方が良いかと思います。 入力して「今すぐ確認」を押下すると次の画面へ進みます。 <h2 id="h48ec46b82b">サイト情報の入力</h2>再評価を依頼したいサイトの詳細情報を入力します。 「今すぐ確認」を押すと現在のサイトの状況が表示されます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/cbe70fbceb3940049e92c0a5a48c4bb9/49E629AA-A710-4E2B-86A4-0418A3BB7333.jpeg" alt=""><h3 id="h22ecf37292"> 安全性評価を選択</h3>ラジオボタンで選択できるようになっており、「現在の安全性の評価で正しい」のか自身のサイトは「安全」なのか、はたまた「危険」かどうかを問われます。 このページは個人で作ったサイトが安全だと申請する役割だけでなく、危険なサイトをトレンドマイクロに通報する役割もあるということですね。 自分のサイトが安全であると思えば｢安全｣のラジオボタンを選択します。 <h3 id="h23bf6a2feb">Webサイトのカテゴリを選択</h3>該当サイトがどのようなカテゴリに分類されるか選択します。選択できるカテゴリは一つだけです。 私は｢ライフスタイル｣内の｢個人のWebサイト｣を選択しました。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/bb910f6921ba4c90ac2f6c60b7287432/A7B867C7-06D6-4A09-B2CE-50D90FC22ADF.jpeg" alt=""> 最後に情報を入力している人間がWebサイトの所有者であるかと、トレンドマイクロ製品を使用しているかを問われます。 私はWebサイトの所有者ですのでチェックを入れました。 <h3 id="hc77cdfc59f">シリアル番号を入力する</h3>またウイルスバスターユーザーでもありますのでシリアル番号を入力しておきました。 ウイルスバスタークラウドをお使いの方はウィンドウズボタンから「ウイルスバスタークラウド」を選択してください。 下の写真のようなホーム画面の右下に「シリアル番号の確認」というリンクが表示されます。リンクを押すとシリアル番号が表示されます。 コピーはできませんので画面を見ながら一文字ずつ入力します。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/8de11538e9744d959ad77c32177c54f1/ED936978-A7F6-43EE-95FF-572F13ED6B81.jpeg" alt=""><h3 id="h80732b12f1"> Webサイトの説明を入力</h3>どのようなWebサイトなのか概要を説明できるような文章を入力します。 説明入力欄の下のメールアドレスと「ロボットではありません」にチェックを入れたら「Ok」を押して完了です。 (どうしてkだけ小文字なんだろう？) 処理が完了すると自動でメールが届きます。 48時間以内にメールに記載されたリンクにアクセスします。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/1d1a311926c6446a89f9200ac52817a3/B5D23693-E63A-4B68-81BF-F1120FA3391C.jpeg" alt=""> あとは再評価結果を待つだけです。 <h2 id="h13e1a3ac21">審査完了</h2>当サイトは無事トレンドマイクロ社さんに再評価していただけました。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/cd8ce353fd4144f48ac08746af882f91/2D706DEC-2DE7-472E-89D4-34961EA3D09F.jpeg" alt=""> 12/31の22:30頃に手続きをして、1/4のお昼に「安全」という評価になっていることを確認しました。 その間はずっと未評価のままでした。 年末年始のお休みは再評価を実施していないということですかね？通常営業中はもう少し早く評価してもらえると思います。 とはいえ焦らず、万全の対策をして気長に待ちましょう。

自分の管理するサイトが、ウィルスバスターによるWebサイト安全性評価で「未評価」になっている場合に、運営会社に再評価してもらう方法をご紹介します。

トレンドマイクロ社に自分のWebサイトは「安全」と認めてもらう方法

Rinkerの設定のために、是が非でもAmazon アソシエイトに参加したかったのです。 どうして通らないのかわからなくてしんどかった…。 私と同じ思いをする人が一人でも減るように、書き残しておきます。 <h2 id="h012f1ef641">私の申請履歴</h2>Google Adsenceは一発で審査に通過したので、正直余裕だろうと何も対策せず臨みました。 お察しのとおり、翌日の午前に承認できない旨を伝えるメールが届きました。 ひょっとしたらAmazonアソシエイトヘルプの<a href="https://affiliate.amazon.co.jp/help/topic/t21" target="_blank" rel="noopener noreferrer">プログラム参加申請をお断りするサイト例</a>にある「Webサイトが未完成」として判定されたのかもしれないと考えました。 しばらく記事を更新していなかったので一本記事を書いて、再度申請。 しかし30分も経たないうちにお断りメールが届きました。 あまりにも素早いレスポンスであったため、何か一瞬で見てわかるダメな部分があるはずだと考えました。 ただどうにもわからず悔しくて、しばらく審査通過した方のブログを読んでいました。 <h2 id="h496b2e3363">思い当たる点</h2>当然ながら写真は著作権フリーのものを使っています。 サイト説明もきちんと書きました。 ドメインやSNSアカウント名にAmazonのご機嫌を損ねるものは使っていません。 そういえば、購入したアカウントじゃないと審査通過しないって書いてあったような...... 実在する人物だと証明できなきゃいけないのかな？ 実際に荷物を届けたことのある住所を入力しているはず.....あっ。 そういえば、コンビニを既定の住所に登録しているような。 <h2 id="h401ca4a06a">アカウントを確認</h2>いつも購入に使っているAmazonアカウントへ急いでアクセス。 やはり。常にコンビニに荷物を取りに行っていたことが裏目に出ました。 購入用アカウントの既定の住所をコンビニから自宅に直して再度申請。 翌日、審査通過を知らせるメールが届きました。 <h2 id="ha214098e44">まとめ</h2>参加申請をお断りするサイト例の「身元情報が不十分である場合」に該当していたようです。 審査が通らずかなり落ち込んでいたのもあって、入力する情報ばかりに気を取られて購入用のAmazonアカウントの情報まで気がまわっていませんでした。 参考になれば幸いです。

著作権に違反した写真も使っていない。サイトの説明もしっかり書いた。確認にもちょっと疲れてきましたよね、息抜きに読んでいきませんか？

Amazon アソシエイトの審査に落ち続けた話

webサイトを開いた時に表示される｢404」や｢503｣など数字の意味について解説します。

<h2 id="hbfc51a7c5b">HTTPステータスコードとは</h2><blockquote>HTTPステータスコードは、<a href="https://ja.m.wikipedia.org/wiki/Hypertext_Transfer_Protocol" target="_blank" rel="noopener noreferrer nofollow">HTTP</a>において<a href="https://ja.m.wikipedia.org/wiki/Web%E3%82%B5%E3%83%BC%E3%83%90" target="_blank" rel="noopener noreferrer nofollow">Webサーバ</a>からのレスポンスの意味を表現する3桁の数字からなるコードである。 (引用元:<a href="https://ja.m.wikipedia.org/wiki/HTTP%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89" target="_blank" rel="noopener noreferrer nofollow">httpステータスコード - Wiki</a>)</blockquote>3桁の数字の意味について代表的なものを紹介します。<table><tbody><tr><th colspan="1" rowspan="1">ステータスコード</th><th colspan="1" rowspan="1">意味</th></tr><tr><td colspan="1" rowspan="1">200</td><td colspan="1" rowspan="1">リクエスト成功 OK ブラウザで正しく閲覧できている状態です。</td></tr><tr><td colspan="1" rowspan="1">301</td><td colspan="1" rowspan="1">恒久的に移動しました Moved Permanently サイトが移転していたり、URLが変更されているときに表示されます。</td></tr><tr><td colspan="1" rowspan="1">400</td><td colspan="1" rowspan="1">不正なリクエスト Bad Request 端末側のエラーです。誤ったURLを入力した時に見かけるケースが多いです。</td></tr><tr><td colspan="1" rowspan="1">401</td><td colspan="1" rowspan="1">認証エラー Unauthorized サイトの閲覧にIDとパスワードの入力が求められ、正しく入力きなかった場合に表示されます。</td></tr><tr><td colspan="1" rowspan="1">403</td><td colspan="1" rowspan="1">禁止されている Forbitten アクセス権が付与されていないページにアクセスした時に表示されます。社外の端末から会社のイントラネットへアクセスしようとすると403で拒否されます。VPN接続を検討しましょう。</td></tr><tr><td colspan="1" rowspan="1">404</td><td colspan="1" rowspan="1">未検出 Not Found 端末側がサーバーに接続できたものの、サーバーがページを見つけられなかった場合に表示されます。該当アドレスからページが削除された場合にも表示されます。</td></tr><tr><td colspan="1" rowspan="1">500</td><td colspan="1" rowspan="1">サーバー内部エラー Internal Server Error サーバー内部にエラーが発生した場合に返されます。サイトのソースコードに文法エラーが存在したり、運営者の設定に誤りがある場合に表示されます。</td></tr><tr><td colspan="1" rowspan="1">503</td><td colspan="1" rowspan="1">サービス利用不可 Server Unavailable サービスが一時的に過負荷やメンテナンスで使用不可能な場合に表示されます。</td></tr></tbody></table>閲覧したいWebサイトに他の数字が表されていた場合には<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Status" target="_blank" rel="noopener noreferrer nofollow">HTTPレスポンスステータスコード - MDN</a>から数字の意味を確認してください。<h2 id="hf17ab59cc0">HTTPステータスの確認方法</h2>ここからはWebサイトを管理するエンジニア向けの説明です。各ブラウザからネットワーク通信時のステータスコードを確認する方法を紹介します。<h3 id="h261a0696ec">Google chromeの場合</h3><ol><li>確認したいWebサイトを開きます。</li><li>開発者モードを開きます、F12を押します。</li><li>Networkタブを押します。</li><li>F5(MacはCommand+r)で更新します。</li></ol><figure><img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/4291fa008f1e4cb99e8293ac1f614086/093E5C4D-FC1A-426B-A530-FA5B7B6453E5.png" alt="" width="2160" height="1440"></figure><h3 id="haee5a5ddfa">Microsoft Edgeの場合</h3><ol><li>確認したいWebサイトを開きます。</li><li>F12を押して開発者モードを開きます。</li><li>ネットワークを選択(隠れている場合は▼を押して「ネットワーク」を選択)</li><li>Ctrl+r(Command+r)で更新</li></ol><figure><img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/034a87cf7ccf490a80fdfb1e45339bf4/E25970F8-EAB5-4B90-BA9D-EB59F783D74C.png" alt="" width="2160" height="1440"></figure><h3 id="h4a3c710085">Firefoxの場合</h3><ol><li>確認したいWebサイトを開きます。</li><li>F12を押して開発者モードを開きます。</li><li>ネットワークを選択(隠れている場合は&gt;&gt;を押して「ネットワーク」を選択)</li><li>ステータスコードが表示されていなければCtrl+r(Command+r)で更新</li></ol><figure><img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/3d2fc0236ed74a8e93392b5ba631801b/5FAEB64C-7653-4178-9A88-0E7DBB4823B1.png" alt="" width="1920" height="1080"></figure>

HTTPステータスコードの確認方法

我が家にMac miniがやってきました！ 受け取った際の段ボールはずっしりと重たかったです。品名には「パーソナルコンピューター」と書かれていました。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/84ffb84e9cf643548a4942d22d567176/57B7A788-4300-4FCD-87E1-9D1AEE113138.jpeg" alt=""> 夫の乾電池式Apple純正キーボードとトラックパッドを拝借して、早速初期設定を進めます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/0dbba4a7fd494a5e9679611dcebc6ef5/818D16DF-7AED-4681-AC17-8A57A880F4DD.jpeg" alt=""> ところがキーボードの電源を入れているのに、一向にMac miniとキーボードの繋がる気配がありません。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/461ae3396c734b25afc530f9986de243/A96F3AB1-18EB-4CE1-9714-46D58C4679EC.jpeg" alt=""> <a href="https://support.apple.com/ja-jp/HT201178" target="_blank" rel="noopener noreferrer">Apple製のワイヤレスのマウス、キーボード、トラックパッドを設定する - Apple（日本）</a> 『旧モデルの Apple 製のワイヤレスデバイスを設定する方法』に対象キーボードの繋ぎ方は載っていますが、初期設定画面については触れられていません。 都合良くWindowsの有線キーボードがあればまだ救いようがあるのですが、Mac bookから移行した場合などは持っていない場合もありますからね。 原因がわからなくて困っていたのですが、よく考えればこのキーボードは夫のMac bookとペアリングされています。 いったんペアリングを解除します。 やはり前使っていた機器がなくとも再ペアリングできる方法が用意されていました。さすがに多くのMacユーザーが困りますからね。 <h2 id="h7b05de0f6f">ペアリング解除方法</h2><ol><li>LEDランプが点滅するまで電源ボタンを長押しして電源を入れる</li><li>LEDランプが点滅している間に再度電源ボタンを長押しして電源OFF</li><li>再度長押しで電源ON</li></ol> ２の点滅時間は意外と短いです、これが成功すると前の機器とのペアリングが解除されます。 ３を終えたところでMac miniが反応してキーボードとの連携のために数字を入力するよう要求してきました。 快適なMac生活が送れそうです。 * * * 参考:&nbsp;<a href="http://d.hatena.ne.jp/ayokoyama/touch/20140326/p1" target="_blank" rel="noopener noreferrer">Apple Wireless Keyboardは苦労する</a>

Mac mini(2018)と旧式Apple wireless keyboardを接続できない場合の対処法を解説します。

【Mac mini】初期設定時に純正キーボードがうまく接続できない

Google Analyticsに「ヒットが発生していません。」というエラーが表示されました。 <h2 id="hd8526827fa">そもそもヒットとは？</h2><blockquote>ヒット : 最終的にデータとして Google アナリティクスに送信される操作を指します。</blockquote><a href="https://support.google.com/analytics/answer/6086082?hl=ja" target="_blank" rel="noopener noreferrer">ヒット - アナリティクス ヘルプ</a> 「Googleにはあなたのブログの訪問者数情報が届いてませんよー」ということらしいです。 私の場合、突然このエラーが出てきたわけではありません。Googleアナリティクスを始めた時からずっと出ていました。 Search ConsoleやJetpackによると、こんな弱小ブログにも閲覧してくださる方が一定数いると表示されるのですが、Google Analyticsはなぜかずっとゼロ。 同じGoogle製のSearch Consoleでユーザー数が確認できるのに、Google Analyticsに出ないのはさすがにおかしいと思い、ちゃんと調べることにしました。 <h2 id="h8fd717a2ae">プロパティ追加</h2>「ヒットがありません」のエラーはアナリティクスの設定が完了していないことが原因でした。 Search Consoleのプロパティ設定は済ませた前提で進めていきます。 まだ設定していない場合は<a style="color:#036fe3" href="https://support.google.com/webmasters/answer/34592?hl=ja" target="_blank" rel="noopener noreferrer">ウェブサイトプロパティを追加する</a>を参照してください。 まずはアナリティクスの<a style="color:#036fe3" href="https://www.google.com/analytics/web/?hl=ja" target="_blank" rel="noopener noreferrer">トップページ</a>から設定ページへ <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/a80129933f5444beaeed960c9f242bff/4748D71A-CBFA-44B1-8056-4E82F54FC0AC.jpeg" alt=""> サイトの名称の横に「プロパティを追加」とあるのでそこを押したら <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/197395dfba674cf3a653a95933d2ea89/C9E148B2-1159-48DA-87CD-32462A0FF9B9.png" alt=""> 指示通りに情報を入力していきます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/b2ab3d41ca544202ac9dadf2ebeaa8ea/67CBE49C-7929-41A1-961B-209FEB59829C.png" alt=""> プロパティを追加するとグローバルサイトタグが案内されるので、それをアクセス解析を行いたい全てのページのヘッダタグ内(<code>~</code>の間)に埋め込めば完了です。 プロパティ追加後閉じてしまった場合でも、トラッキング情報→トラッキングコードから確認できます。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/3c559c8509d24d499c3f59f3199cf8f1/F742CFD8-5200-469E-B25D-49EB8BCD329E.png" alt=""> Wordpressでサイトを運用している方は、プラグインを使ってグローバルタグを埋め込むことをオススメします。 どれでも構いませんが、私が使ったのは<a style="color:#036fe3" href="https://ja.wordpress.org/plugins/insert-headers-and-footers/" target="_blank" rel="noopener noreferrer">Insert Headers and Footers</a> です。 Scripts in Headerに先ほどのグローバルサイトタグをコピペするだけで完了です。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/40cff3ac49e342188be0dc1ff58d233c/BEE04E0A-04BE-4E05-BCBD-6C3FD8EB643C.png" alt=""> <h2 id="h590e38366c">確認</h2>天下のGoogle先生は確認用のツールも用意しています。 <a style="color:#036fe3" href="https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=ja&amp;gclid=CjwKCAjw7IbaBRBqEiwA6AyZgjGVojxLR2JEgcJQc8YvLb9ttuWZ7RGKRaXUO-I14rGy1ZIa2J8uvhoC5qQQAvD_BwE" target="_blank" rel="noopener noreferrer">Googleタグアシスタント</a>で確認しましょう。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/ebf2800acbea4f338220b98fb0b9d50c/5E823CDB-3DBA-4036-97EA-39B9BC2E92D8.png" alt=""> 上記chromeの拡張機能を追加したらグローバルサイトタグを埋め込んだサイトを開いて、拡張タグバーにあるGoogleタグアシスタントボタンを押します。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/0c8ba91df73b4ed49d08c85eb1b1bf42/527C6F6D-A80E-4603-833C-B16402DE77E7.png" alt=""> 緑タグくんになったら成功です。 赤タグくんがいる場合はヘッダタグがうまく書けていないため、もう一度設定を確認する必要があります。 (参考:<a style="color:#036fe3" href="https://support.google.com/analytics/answer/6277313" target="_blank" rel="noopener noreferrer">Using Tag Assistant Recordings - Analytics Help</a>) より詳細なレポートを出してくれる機能もあって便利なツールらしいです。 ここまできたら別端末でサイトにアクセスしたままGoogleアナリティクスを確認して、アクティブユーザーがいたら設定完了！ これでようやくユーザー訪問数の多い時間や、よく閲覧される端末形態（スマホなのかPCなのか）も把握できるようになりました😊

Google Analyticsで見慣れないエラーを発見。解決方法とGoogle Tag Assistantでの確認方法をご紹介します。

Google Analyticsで「ヒットがありません」と表示される時の対処法

AIの勉強をしたいと思っていた私の耳にこんなニュースが飛び込んできました。 <blockquote>『ヘルシンキ大学は、オンラインで<a style="color:#121212" href="https://www.elementsofai.com/" target="_blank" rel="noopener noreferrer">人工知能（AI)の無料学習コース</a>を一般公開しました。 (中略) 国外の人でもコース修了によりLinkedIn（ビジネス特化型SNS）で使える証明書が取得できます。』</blockquote><a href="https://www.huffingtonpost.jp/engadget-japan/ai-online-lecture_a_23440318/" target="_blank" rel="noopener noreferrer">「AI」をタダで学べるオンライン講座、フィンランドの大学が一般公開 | ハフポスト WORLD</a> 元クソゲーマーのわたしはすぐさま食いつきました。称号みたいで楽しそうではないか…！<h2 id="h3cb1bfc7bf"> 誰でも受講できる？</h2>わたしのスペックを紹介しておきます。 <ul><li>最終学歴高卒(偏差値は並の学校)</li><li>高2数学模試の偏差値が29</li><li>とてつもなく簡単な英語だけは理解できる。</li></ul> 数学の成績がひどすぎて高校卒業も危なかったわたしですが、一週間でAIコースを修了。二週間後には修了認定の証明書が発行されました。 英語の講義はハードルが高く感じたのですが、押さえるべき要点が簡潔にまとまっていました。やさしい英語で説明されていたのもよかったです。 根気さえあれば、わりと誰でも受けられるのではないかと思います。 <h2 id="h2f61bc3fda">算数のフォロー</h2>どんなレベルの学生にも対応できるよう、講義中で分数の四則演算を解説するサイトも紹介されています。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/1bb052c9dca148c4b85cbabdabe3514b/39356E31-A408-463A-83C5-66DDF4D1B2F6.png" alt=""> わたしはこのサイトのおかげで分数の四則演算ができるようになりました！ （ゆとり世代でも分数の四則演算はできます。わたしだけです。） この講義を乗り切るには、多くの小テストを乗り越える必要があります。 小テストの大部分は選択式になっており、まじめに講義を読み解けば正解の選択肢は絞られます。 計算問題もかなりの比率を占めますが、電卓があれば余裕で乗り切れます。 <h2 id="h31599f6815">英語対策</h2>いくら簡単でも英語の文脈を正しく理解できる程度の能力を持ち合わせていないと厳しいです。 もちろん私は持ち合わせていません。 そんな私になんと第1章の最後でレポートの課題が課せられました。 非常に短くて構わないものの、章の終わりには毎回自分の意見を記載する必要があります。 いったいどうしたものか…。 ドラ〇もん『Google翻訳アプリ～』 そうだ…その手があった…！ 手持ちのAndroidにGoogle翻訳アプリをインストールすれば、ブラウザの英語を勝手に（ちょっと不自然な）日本語で表示してくれました。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/fbc28ab5d56a4e5a850084502d288c35/8A0E163B-D639-4EAC-B032-445FD618A456.png" alt=""> <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/771bedeb5712479a99f9bafa44944ec4/E5A2FE98-556D-4ADC-9EE2-BE5448348D2E.png" alt=""> おまけにEvernoteに書いた日本語のレポートも該当部分をコピーするだけで英語に翻訳してくれます。 ありがとう！まさに文明の利器だ！ おかげで第6章に待ち構えるレポート地獄も難なくクリアできました。 自分のレポートを提出すると他の生徒のレポートを2本ほど評価する機会が与えられます。 その中でアラビア語のレポートも見かけたので日本語でも提出はできるのだと思いますが、他の生徒から評価される機会が少なくなる可能性が高いです。 この講義を受けてる人で日本語話者がいったい何人いるんだよ、って話ですね。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/d3eebf84679b4d5bb28eb406844eb1ba/01539C81-4402-4031-8824-56B6126EF8AA.png" alt=""> いくら努力の根気のある人間でもモチベーションを保つのは一苦労です。 挿し絵として登場するロボのイラストがかわいいんです。わたしはこいつのおかげでモチベ爆上がりでした。 * * * 興味を持たれた方は下記リンクから講義を受けられます。 尤度比・ベイズ統計も初心者にわかりやすく解説されていますよ。 ぜひ挑戦してみてください！ <a href="https://www.elementsofai.com/" target="_blank" rel="noopener noreferrer">https://www.elementsofai.com/</a><h2 id="hd46810edfe"> 修了後のフォロー(2018.11.8追記)</h2>2018年8月下旬、"Dear Elements of AI graduate"という書き出しでReactorからメールが届きました。 どうやら卒業式への招待状の様子。 場所はもちろん、フィンランド。 とても行けない距離だから放置しました。 後日「英語もフィンランド語もわからないから行けるわけないじゃん。」と友人に話すと、 「私を連れていけ。」と言われました。 友人とはぐれることを考えたら恐ろしい......😱 そして今日"Elements of AI now in Finnish"というタイトルのメールが届きました。 英語では受講が難しかった、地元フィンランドの方にも受けられるよう整備されたようですね。 そのメールの中には“The follow-up course is coming in 2019”とありました。 もっとAIの深い世界が勉強できる、とのこと。 そのためにPythonが必要になるから今のうちなら勉強しておくのに良い時期、と提案されています。 <blockquote>地元の大学またはオンラインでプログラミングコースを受講することをお勧めします。オンラインなら<a href="https://www.codecademy.com/learn/learn-python" target="_blank" rel="noopener noreferrer">Codecademy’s Python course for beginners</a>が適しています。</blockquote> と書かれていました。 Python習得は気が重いですがヘルシンキ大学の面白い授業に期待して、頑張ろうかな。

ヘルシンキ大学とReatkorが共同で製作した無料のAI(人工知能)のオンラインコースの内容や修了後の出来事についてまとめました。

英語の読めない私がヘルシンキ大学のElements of Artificialコースを修了するまで

社内研修２日目。講義の終わりにとんでもない宿題が出た。 「なんでもいいから作ってきて」 『なんでも』ってなにすればいいんだ...？ 夕飯みたいなノリで言うなよ。いや、夕飯のオーダーでもキレるわ。 私は悩み続けた。 こんなんテキトーに終わらそ… そう思っていた矢先にこんな記事を見つけた。 <a href="https://codezine.jp/article/detail/10520" target="_blank" rel="noopener noreferrer">半田付け不要？！縫い付けて使うArduinoで激iLLな音で光るニット帽作ってみた！</a> Arduinoの名前は聞いていたものの、いったいどんなものかも知らない 。しかし裁縫ならわたしにもできそうだ。 <h2 id="hc02fb202a3">部品の注文</h2>何を揃えたらいいかわからないが、上記記事と<a href="https://lilypad.pen.jp/" target="_blank" rel="noopener noreferrer">LilyPad研究会さん</a>の作品で使われている部品を参考に取り寄せてみた。<ul><li><a href="https://www.switch-science.com/catalog/1962/" target="_blank" rel="noopener noreferrer">LilyPad Ardino USB</a></li><li><a href="https://www.switch-science.com/catalog/87/" target="_blank" rel="noopener noreferrer">LilyPad フルカラーLED</a></li><li><a href="https://www.switch-science.com/catalog/90/" target="_blank" rel="noopener noreferrer">LilyPad押しボタンスイッチ</a></li><li><a href="https://www.switch-science.com/catalog/227/" target="_blank" rel="noopener noreferrer">LilyPadスライドスイッチ</a></li><li><a href="https://www.switch-science.com/catalog/911/" target="_blank" rel="noopener noreferrer">導電糸ボビン</a></li><li><a href="https://www.switch-science.com/catalog/3118/" target="_blank" rel="noopener noreferrer">リチウムイオンポリマー電池(400mAh)</a></li><li><a href="https://www.switch-science.com/catalog/2820/" target="_blank" rel="noopener noreferrer">ミニリチウムイオン電池充電器</a></li><li>ニット帽</li></ul>届いたので一つ一つを見てみる。まずはフリマアプリで安かった、こちら。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/12810fa023044877a515c9c5597ae78f/8BCF0B31-3F55-450A-AD42-9AE0D1911224.jpeg" alt=""> stussy…stus…???? 本物のロゴは<a href="https://stussy.jp/" target="_blank" rel="noopener noreferrer">こちら</a>で確認いただくことにして。 この帽子、縫製が汚すぎる。 …………。 悔しい！余計な刺繍は要らん！取ってしまえ！！ <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/a2052fc85d7848daa5108241562a64df/775D4BE1-6455-4823-9D21-0FE3B07491BD.jpeg" alt=""> 以降の部品は本物。 よく見たらLilyPad USBの中に「電源ONOFF用のスライドスイッチ」と「リチウムイオン充電器」の役割は備わっているではありませんか。 無駄な買い物をしたと凹んでいたのだが、製作過程で部品に余裕があることは精神的な余裕に繋がる。 またこのミニリチウムイオン電池充電器、充電が満タンだとFULLの緑色のランプが付くようになっている。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/19b922c2919e46c686673554363b3762/9453CC73-670B-43A0-8371-A704C69BFBF0.jpeg" alt=""> これなら一目でわかる。 必要な部品を仮付けして動作確認。 ショート防止のため回路は慎重に考える。 今回は＋と－が交差する場所をひとまとまりにした。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/d36b0da99aa84b369e02f04aa8688a8c/FD81866E-90D7-4260-9F5E-21287611FC0A.jpeg" alt=""> テストプログラムを書き込んで、無事光ることを確認。 <pre><code>#define RED 9 //赤LED PIN番号
#define BLUE 10 //青LED PIN番号
#define GREEN 11 //緑LED PIN番号
#define RED_TIME 5 //赤LED 周期
#define BLUE_TIME 6 //青LED 周期
#define GREEN_TIME 7 //緑LED 周期

int red = 0, blue = 0, green = 0;
int flg_red = 0, flg_blue = 0, flg_green = 0;
// 初期化
void setup() {

 // LEDのピンを出力に
 pinMode(RED, OUTPUT);
 pinMode(BLUE, OUTPUT);
 pinMode(GREEN, OUTPUT);
}

// メインループ
void loop() {

 if (flg_red == 0) {
 red = red + RED_TIME;
 if (red &gt;= 250) {
 flg_red = 1;
 }
 }
 else {
 red = red - RED_TIME;
 if (red &lt;= 0) {
 flg_red = 0;
 }
 }
 analogWrite(RED, red);
delay(50);

 if (flg_blue == 0) {
 blue = blue + BLUE_TIME;
 if (blue &gt;= 200) {
 flg_blue = 1;
 blue=200;
 }
 }
 else {
 blue = blue - BLUE_TIME;
 if (blue &lt;= 0) {
 flg_blue = 0;
 blue=0;
 }
 }
 analogWrite(BLUE, blue);
delay(30);

 if (flg_green == 0) {
 green = green + GREEN_TIME;
 if (green &gt;= 200) {
 flg_green = 1;
 green=200;
 }
 }
 else {
 green = green - GREEN_TIME;
 if (green &lt;= 0) {
 flg_green = 0;
 green=0;
 }
 }
 analogWrite(GREEN, green);
delay(20);
}</code></pre><h2 id="h0b06f3c983"> 本番作業へ</h2>もったいないけど全ての導電糸を外して本番へ移行する。 時差で届いたのはハイジオット社製スナップボタン。人形の洋服に縫い抜けるのが本来の用途だ。 通常のスナップボタンは直径8~13mm。これでは大きすぎてLilyPad USBのポートどうしがぶつかってしまう恐れがある。 取り寄せたスナップボタンは直径5mm。これなら心配は要らない。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/e03fdce2a31748b7b8821ba16a662426/73C14D42-D415-4FAF-BD68-64CB1B81317D.jpeg" alt=""> さあこいつらをハンダ付け…… <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/470eda68cd88482d8cf9dba5ede8fb3b/676969D3-5AE2-4FDC-9FDC-A135EC61FC7C.jpeg" alt=""> できなかった。小さすぎた…。 シャツのボタンをつける要領で、ポートひとつひとつに導電糸で固定していく。 お？意外といい仕上がり？ <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/a5e181242fe64294b2c0178fa8d1bf52/69A857CA-92A4-4F61-88F0-22BB994CDCD5.jpeg" alt=""> ニット帽本体に、スナップボタン(凸)を取り付けてから、チャコペンで書いた回路図に沿って縫い付ける。 ショートしないように＋とマイナスの回路が交差する箇所は注意して縫う。 部品を取り付けられるか確認して縫製完了。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/95aee9992e7645899c12b45320a0526c/12CE98AB-3194-4840-B866-27F41046BC24.jpeg" alt=""> 下地となる布（ニット）の伸縮性が高いものであれば、スナップボタンの位置が多少ずれてもどうにかなる（笑） <h1 id="hebb74cdd80">制御プログラムを実装</h1>Arduino開発環境の構築は簡単。 <a href="https://www.arduino.cc/en/Main/Software" target="_blank" rel="noopener noreferrer">Ardiono公式サイト</a>からファイルをダウンロードしてウィンドウの指示通りインストールを行う。 今回私はLilyPad Arduino USBを使っているので ”ツール”タブ→ボード→LilyPad Arduino USBを選択すれば設定完了。ソースをマイコンに書き込めるようになる。 一応、研修前日に絶望しながら3時間で書いたクソコードを晒しておく。 動くには動くけど正しく動作しない。 <pre><code>/*** Shiny nit cap 光るニット帽 ***/
/*** Date : 2017.12.3 ～ 2017.12.18 ***/

/*Definition of port ポートの定義*/
#define RED 11 //赤LED ポート red led port
#define BLUE 10 //青LED ポート blue led port
#define GREEN 9 //緑LED ポート green led port
#define SW 3 //スライドスイッチ ポート Slide switch port

#define PERIODSTART 0 //1周期の始まり

#define ON 0
#define OFF 1
#define PATTERNNUM 2 //光るパターンの数

/*Declaration function 関数の宣言 (setupとloopはArduinoデフォルトの関数 "setup" and "loop" are Arduino default functions.)*/
void pattern(int);
int intensity(int,int);
void analogwrite_led(int,int);

/*Declaration variable 変数の宣言*/
typedef struct {
short red;
short blue;
short green;
}tLed;

tLed ledintensity = {0,0,0};

/*以下の構造体の要素はそろえる The elements of the following structure are aligned.*/
/*Definition of period width 周期の幅の定義 何ステップずつ光を強くするかもしくは弱くするか How many steps should the light be made stronger or weaker?*/
tLed ledperiodwidth[PATTERNNUM] = {{5,5,5},
 {5,6,7}};
/*Definition of delay time DUTY比調整*/
tLed leddelaytime[PATTERNNUM] = {{50,50,50},
 {50,30,20}};
/*Definition of period end 何カウントしたら光を強くするかもしくは弱くするか How many counts will you make the light stronger or weaker?*/
tLed ledperiodend[PATTERNNUM] = {{50,50,50},
 {250,200,200}};

// 初期化
void setup() {
// put your setup code here, to run once:
pinMode(GREEN, "OUTPUT");
pinMode(BLUE , "OUTPUT");
pinMode(RED , "OUTPUT");
pinMode(SW , "INPUT");

/*initialize 初期化*/
digitalWrite(GREEN, OFF);
digitalWrite(BLUE , OFF);
digitalWrite(RED , OFF);
digitalWrite(SW , OFF);
}

void loop() {
// put your main code here, to run repeatedly:
static int index = 0;
static int swflg = ON;

if(digitalRead(SW) != swflg){
 swflg = ~swflg;
 index = (index&gt;PATTERNNUM - 1)?index=0:index+=1;
 pattern(index);
}
}

void pattern(int index){
/*LED RED 赤*/
ledintensity.red = intensity(ledperiodwidth[index].red,ledperiodend[index].red);
analogwrite_led(ledintensity.red,leddelaytime[index].red,RED);
/*LED RED 青*/
ledintensity.blue = intensity(ledperiodwidth[index].blue,ledperiodend[index].blue);
analogwrite_led(ledintensity.blue,leddelaytime[index].blue,BLUE);
/*LED RED 緑*/
ledintensity.green = intensity(ledperiodwidth[index].green,ledperiodend[index].green);
analogwrite_led(ledintensity.green,leddelaytime[index].green,GREEN);
}

/*Adjust the strength to shine 光る強さを調整*/
int intensity(int periodwidth,int periodend){
static int intensity = 0; //light intensity 光の強さ
static int foldedflag = 0; //折り返しフラグ

if(intensity &gt;= periodend){
 foldedflag = ON;
}else if(intensity &lt;= PERIODSTART){
 foldedflag = OFF;
}

if (foldedflag == OFF) {
 intensity = intensity + periodwidth;
}else if(foldedflag == ON){
 intensity = intensity - periodwidth;
}

return intensity;
}

/*A function that glows based on a value determined by another function 他の関数で決定した値を基に光らせる関数*/
void analogwrite_led(int intensity,int delaytime,int ledport){
analogWrite(ledport, intensity);
delay(delaytime);
}</code></pre> * * * <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/47646bd73f044a74b3acc39a026a094d/8B00525C-9861-4666-BB23-F5AEF1D6E298.gif" alt=""> スイッチ切替でイルミネーションパターン変更する実装が間に合わなかったのが課題。 どのみち接触が極端に悪くなってしまったから、縫い直して再挑戦する。 その時にクソコードも修正する…、たぶん。

ニット帽に導電糸を縫い付けてLilyPad(Arduino)とLEDを繋ぐ回路を作って光らせてみました。スナップボタンを外せば洗濯可能です。

【LilyPad】光るニット帽を作ってみた

おうちに<a href="https://raspberry-pi.ksyic.com/main/index/pdp.id/195/pdp.open/195" target="_blank" rel="noopener noreferrer">Raspberry Pi3 Model B+</a>がやってきたから、まずはその可愛さの自慢から始めようかと思っていたんだけど、そんな流暢なこと言ってられなかった。（管理人はRaspbianを入れました。） どうしてもどうしてもどうしても<a href="http://www.ioplaza.jp/knowledge/no22/index.html" target="_blank" rel="noopener noreferrer">NAS</a>が欲しいけど高すぎる…… 「そこにRaspberry Piがあるじゃろ？自作するのじゃ……！」 安易に考えたのが甘かった。今後もRaspberry Piと良好な関係を築くためにも、私がハマったポイントを整理してみむとす。 * * * 満たすべき要件は以下の通り。 <ul><li>Raspberry Pi上にWindows機と共有できるファイルサーバーを作る</li><li>Raspberry Piは自宅に設置して外に持ち歩かない、外出先からもアクセスできるようにする</li><li>いちいちPCを開くのは面倒、iPhoneからも見たい</li><li>1TBの外付けHDDがあるからそれと繋いで大容量にしたい</li></ul> 欲張りすぎた……。実務経験1年の底辺プログラマにできるのか……？ <h2 id="h7888e01b4a">共有ファイルサーバーを作ろう</h2>先に外出先からのアクセスについて要件を満たす。 自宅のルーターにRaspberryPiを有線で繋ぎ、VPNサーバーを立ててアクセスできるようにする。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/d67a828bddd34a0ea770cb5413d9d38d/AF9F8405-0748-4613-A4DD-3AB38D81824D.jpeg" alt=""> <a href="http://xn--u9j0md1592aqmt715c.net/raspberry-pi2-vpnserver-part1/" target="_blank" rel="noopener noreferrer">俺の技術メモ - Raspberry Pi 2 Model B で L2TP/IPSec VPNサーバを構築してみた</a> このサイトのその1からその3までの記事を隅々まで読んで、設定を完了させることができた。 次に取り掛かったのが「Raspberry Pi上にWindows機と共有できるファイルサーバーを作る」こと。 Raspberry PiにSamba入れたら動く……、わけじゃなかった。 <h3 id="h54fd029945">ハマったポイント1: パッケージのインストール</h3>以下のパッケージのインストールが不足していた。<ul><li>samba</li><li>samba-common</li><li>samba-common-bin</li></ul> Wheezyについての他の記事を参考にしていたこともあって、Jessieは”samba-comomn-bin”がないとWindowsに共有できないことに気付くのに時間がかかってしまった。 またsamba-ad-dcと入力してStatusを確認したりするところを<a href="https://itunes.apple.com/jp/artist/ac-dc/id5040714" target="_blank" rel="noopener noreferrer">acdc</a>と打っていた。これでは何もできない、残念。 <h3 id="hbb7aadc4e7">ハマったポイント2:Raspberry Pi側のTCPポート445を開放していなかった</h3>底辺プログラマだからあんまりよくわかってないけどファイル共有ができるようになるらしい。 参考:<a href="https://server-setting.info/centos/samba-file-share.html" target="_blank" rel="noopener noreferrer">レンタルサーバー・自宅サーバー設定・構築のヒント - Sambaを使ってファイル共有してみる</a> iptablesを弄って開けたのはいいけど再起動すると設定が消えてしまう。 iptables-persistentをインストールしたけどsaveコマンドがどうしても動いてくれなかった… 参考: <a href="http://kassyjp.ninja-web.net/ras/jessie/iptables.html" target="_blank" rel="noopener noreferrer">2.iptables（ファイアウォール）のセットアップ - RaspberryPiで各種サーバー作り！ - ある阪大生の物置小屋)</a> <h3 id="h4824bbe990">ハマったポイント3:特に設定しない場合、ログインしているWindowsユーザーの資格情報が送信されてしまう</h3>そもそもsambaにユーザー登録が必要だともわからなかった。 「samba　ユーザー登録」と検索すれば方法はいくらでもでてくるのでそちらをご参照ください。 （どんどんバージョンアップして新しい方法になるだろうし） 参考:<a href="https://it-studio.jp/windows10_readynas/" target="_blank" rel="noopener noreferrer">0x80070035エラー Windows10でReadyNASにアクセス出来ない場合の対処法</a> <h2 id="h81611a8848">iPhoneからファイルを閲覧する</h2>さて、次の要件を満たす。 「いちいちPCを開くのは面倒、iPhoneからも見たい」 つまりポートを開放しなくてはならない。 管理人はBuffaloルーター×iPhoneユーザーだっったため、かなりスムーズに設定できた。 参考:<a href="http://usicolog.nomaki.jp/engineering/raspberryPi/raspberryPi_VPN.html" target="_blank" rel="noopener noreferrer">うしこlog - VPNでiPhoneからラズパイに接続する</a> iPhoneにインストールしてファイル共有アプリとして使っているのはこちら↓ <a href="https://appsto.re/jp/CSKAE.i" target="_blank" rel="noopener noreferrer">Skyjos Co., Ltd.「FileExplorer - File Manager for Computer and NAS」</a> <h2 id="h8bdf231250">外付けHDDをマウントする</h2>さて最後の要件。 「1TBの外付けHDDがあるからそれと繋いで大容量にしたい」 Raspberry PiにHDDを刺して、マウントの設定をすることで実現できた。 参考:<a href="http://xn--u9j0md1592aqmt715c.net/raspberry-pi-samba/" target="_blank" rel="noopener noreferrer">俺の技術メモ - Raspberry Pi 2 Model Bでファイルサーバを構築してみた</a> これでようやく管理人もNASデビューを果たすことができた、めでたしめでたし。 <img src="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/2e931ffe10ae4a63b0656c4d6498016b/5AFBB6B9-5EF8-416C-B3F9-7C434C55FCF7.png" alt=""> <h2 id="hbc54543ba0">後日談(2018.10.27追記)</h2>この記事から約一年間、自宅から実家のHDDへアクセスできるのでとても便利に使っていた。 しかし年が明けた1月のある日、突然接続できなくなってしまった。 状況から考えると、ラズパイに刺さっているSDを24時間フル稼働させて共有ファイルサーバーを実現させていたため、SDが劣化してしまったようだ。 置いていた環境が普通の家の、普通に温度変化の激しい場所だったので、もっと温度変化の少ない場所に置いてあげればよかったのだと反省した。 やってることは24時間フル稼働するサーバーと同じなのだから。サーバー管理と同じぐらい、丁寧に扱うべきだったのだ。 ポンコツプログラマが必死で設定したSDは昨日供養してきた。 <blockquote class="twitter-tweet">去年の春、必死にラズパイNASを作ってそれから半年ほどiPhoneから実家にあるHDDにアクセスできて便利だった。それが突然ラズパイが起動しなくなって。さっきふと目に止まったからSD入れたら動いたけど撮影直後シャットダウンすらできなくなった。さっき大事に供養(フォーマット)した。お疲れ様、SD🍵 <a href="https://t.co/o5vEULXYHx">pic.twitter.com/o5vEULXYHx</a>&mdash; とろ (@microayatron) <a href="https://twitter.com/microayatron/status/1055800643292618752?ref_src=twsrc%5Etfw">October 26, 2018</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 今回の一件で、ラズパイ用のSDを含む記憶装置全般は消耗品であるということを理解した。いやー、勉強になった。

外出先でiPhoneからHDDへアクセスするべく、NASを完成させるまでの経緯をまとめました。NAS稼働後の後日談も載せてます。