nove-b

GithubActionを使用してエックスサーバーにデプロイする

nove-b

FTPでファイルをアップロードするのが面倒くさい

今まで多くの人がそうであるように、

サイト作成
Githubに最新バージョンをプッシュ
FileZillaをしようしてサーバーにデプロイ
修正
Githubに最新バージョンをプッシュ
FileZillaをしようしてサーバーにデプロイ

というフローを踏んでサイトを運用してきた。

が、これが面倒でしかたない。

どうせGithubにあげたものをデプロイするのであれば、プッシュと同時にデプロイができればいいのに…！

レンタルサーバーでもできるのか？

Firebase Hosting、Netlify ...、などを使えばできることは知っている。

しかしレンタルサーバーでもできるのか？

正直レンタルサーバーは上記サーバーに比べて劣るイメージがある。

エックスサーバーで簡単にできた

まずはエックスサーバー万歳三唱🙌🙌🙌

本サイトはエックスサーバーを作っているのだが、エックスサーバーならGithub Actionと連携できることを知った。

これで今までのフローとストレスと労力が半減された。

さらには常に最新バージョンがデプロイされるという先祖返りの危機もなくなった。

最後にエックスサーバー万歳三唱🙌🙌🙌

[sc name="exserver_all_unlimited" ][/sc]

どうやって実現するのか

すごく簡単なので、特に考えすぎずに実行してほしい。

エックスサーバー側の設定

特にないけれど、エックスサーバーのサーバーパネルで

ftpサーバのホスト
ftpサーバのアカウント名
ftpサーバのパスワード

を確認してメモをしておく。

参考：FTPソフトの設定 | レンタルサーバーならエックスサーバー

Github側の設定

対象リポジトリのSettings > Secrets に下記情報を入力する。

FTP_PASSWORD → ftpサーバのホスト

FTP_SERVER → ftpサーバのアカウント名

FTP_USERNAME → ftpサーバのパスワード

deploy.ymlの作成

対象リポジトリ直下に.github/workflows/ディレクトリを作成し、その下にdeploy.ymlファイルを設置する。

そこに下記情報を入力すれば完了。

on:
push:
branches:
- main
name: Deploy
jobs:
FTP-Deploy-Action:
name: FTP-Deploy-Action
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@main
- name: FTP-Deploy-Action
uses: SamKirkland/FTP-Deploy-Action@2.0.0
env:
FTP_SERVER: ${{ secrets.FTP_SERVER }}
FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
LOCAL_DIR: ./
REMOTE_DIR: /デプロイ対象のサイト/public_html/

あとはmainブランチにプッシュする、ただそれだけでサイト運営が嘘のように楽になる。

ぜひ、試してみてはどうでしょうか。

エックスサーバーができるので、当然他のレンタルサーバーでもできるのかもしれないが、上記方法はエックスサーバーでの方法になるので、悪しからず。

JavaScriptを使用してWordpressの投稿に目次を挿入する

nove-b

記事に目次をつけよう

目次があれば、結末まですぐに飛ぶことができる。

時間に追われる現代人にはなくてはならない機能である。

そこで本サイトに目次を導入した。

プラグインは使いたくないよう

個人的にプラグインには頼りたくない。

理由はシンプルで楽しくないからである。

どうせ作るなら自分自身の力で作成したい。

なので今回も自作した。

目次を挿入するための考え方

やりたいことはページが開かれた時に記事に目次を挿入する。

で、対象はh2タグとh3タグとする。

つまり、記事内にh2タグとh3タグがあるかを判定し、あればそれに対応する目次を挿入する。

実現コードはこちら

// 目次を生成
let secondIdCount = 1
let ThirdIdCount = 1
const headingSecond = document.querySelector('.article-detail')?.querySelectorAll('h2')
const headingThird = document.querySelector('.article-detail')?.querySelectorAll('h3')
if (headingSecond !== undefined || headingThird !== undefined) {

    headingSecond.forEach(el => {
        el.id = `tocSecond-${secondIdCount}`
        secondIdCount++
    });
    headingThird.forEach(el => {
        el.id = `tocThird-${ThirdIdCount}`
        ThirdIdCount++
    });

    const target = document.querySelectorAll(`[id^='toc']`)

    const insertTarget = document.querySelector('.article-table-of-contents-insert')
    if (target.length === 0) {
        document.querySelector('.article-table-of-contents').style.display = 'none'
    } else {
        target.forEach((el) => {
            if (el.nodeName === 'H2') {
                insertTarget.insertAdjacentHTML('beforeend', `<p class="second" onclick="smoothScroll('${el.id}')">${el.innerText}</p>`)
            } else {
                insertTarget.insertAdjacentHTML('beforeend', `<p class="third" onclick="smoothScroll('${el.id}')">${el.innerText}</p>`)
            }
        });
    }
}

// スムーススクール
const smoothScroll = (el) => {
    const box = document.querySelector('.content')
    const scrollY = box.scrollTop
    const target = document.getElementById(el).getBoundingClientRect().top
    const headerHight = document.getElementById('header').clientHeight
    box.scrollTo({
        top: target - headerHight + scrollY,
        behavior: 'smooth'
    })
}

前提として記事内に、

<div class="article-table-of-contents">
  <p class="title">目次</p>
  <div class="article-table-of-contents-insert">


  </div>
</div>

という要素を書いておく必要がある。

実現コードを書き下してみる

事前に必要な情報を定義する

// 目次を生成
let secondIdCount = 1
let ThirdIdCount = 1
const headingSecond = document.querySelector('.article-detail')?.querySelectorAll('h2')
const headingThird = document.querySelector('.article-detail')?.querySelectorAll('h3')

まずは諸々定義する。

IDに連番を振るので、基準の数字。

記事内にある、h2タグとh3タグ。

連番IDを付与する

headingSecond.forEach(el => {
    el.id = `tocSecond-${secondIdCount}`
    secondIdCount++
});
headingThird.forEach(el => {
    el.id = `tocThird-${ThirdIdCount}`
    ThirdIdCount++
});

const target = document.querySelectorAll(`[id^='toc']`)

事前に定義した情報をもとにh2タグh3タグに連番IDを振る。

IDを振った要素を取得する。

対象を目次に挿入していく

const insertTarget = document.querySelector('.article-table-of-contents-insert')
if (target.length === 0) {
    document.querySelector('.article-table-of-contents').style.display = 'none'
} else {
    target.forEach((el) => {
        if (el.nodeName === 'H2') {
            insertTarget.insertAdjacentHTML('beforeend', `<p class="second" onclick="smoothScroll('${el.id}')">${el.innerText}</p>`)
        } else {
            insertTarget.insertAdjacentHTML('beforeend', `<p class="third" onclick="smoothScroll('${el.id}')">${el.innerText}</p>`)
        }
    });
}

まず、挿入する要素を取得する。

次に先ほど取得したtagertが、H2であればh2に紐づくHTMLを。

H3であればh3に紐づくHTMLをどんどん挿入していく。

クリック時に対象要素にスクールする

// スムーススクール
const smoothScroll = (el) => {
    const box = document.querySelector('.content')
    const scrollY = box.scrollTop
    const target = document.getElementById(el).getBoundingClientRect().top
    const headerHight = document.getElementById('header').clientHeight
    box.scrollTo({
        top: target - headerHight + scrollY,
        behavior: 'smooth'
    })
}

上記はヘッダーの高さを取得しているので、そこは適宜変更してほしい。

技術を書く技術がない

うーん。

色々書いたが、うまく伝えられない。

考え方さえわかれば難しくないと思うので、挑戦してみてほしい。

わからなければコメントを残してもらえれば個人的に解説をするので、どんどんコメントしてください。

Wordpressのタグをチェックボックスに変更して管理を楽にする

nove-b

Wordpressのタグがひっちゃかめっちゃかになった過去

かつて、タグに翻弄されていたことがある。

カテゴリはチェックボックスで過去に設定したカテゴリを投稿画面で見ることができるのだが、タグはなぜかそれができない。

例えば、「HTML」と過去に投稿したことがあったのだが、次に書くときは「html」と書いてしまうかもしれない。

その時点で2つは別になってしまうのである。

そこでタグもチェックボックスにしようと思いついた。

タグをチェックボックスにする実現コードはこちら

//タグをチェックボックス表示に
function re_register_post_tag_taxonomy()
{
  global $wp_rewrite;
  $rewrite = array(
    'slug' => get_option('tag_base') ? get_option('tag_base') : 'tag',
    'with_front' => !get_option('tag_base') || $wp_rewrite->using_index_permalinks(),
    'ep_mask' => EP_TAGS,
  );


  $labels = array(
    'name' => _x('Tags', 'taxonomy general name'),
    'singular_name' => _x('Tag', 'taxonomy singular name'),
    'search_items' => __('Search Tags'),
    'popular_items' => __('Popular Tags'),
    'all_items' => __('All Tags'),
    'parent_item' => null,
    'parent_item_colon' => null,
    'edit_item' => __('Edit Tag'),
    'view_item' => __('View Tag'),
    'update_item' => __('Update Tag'),
    'add_new_item' => __('Add New Tag'),
    'new_item_name' => __('New Tag Name'),
    'separate_items_with_commas' => __('Separate tags with commas'),
    'add_or_remove_items' => __('Add or remove tags'),
    'choose_from_most_used' => __('Choose from the most used tags'),
    'not_found' => __('No tags found.')
  );


  register_taxonomy('post_tag', 'post', array(
    'hierarchical' => true,
    'query_var' => 'tag',
    'rewrite' => $rewrite,
    'public' => true,
    'show_ui' => true,
    'show_admin_column' => true,
    '_builtin' => true,
    'labels' => $labels
  ));
}
add_action('init', 're_register_post_tag_taxonomy', 1);

これが全コード。

これをfunction.php に書けばタグがチェックボックスになり、管理が簡単になる。

何が面倒って、アイキャッチ画像を設定するほど面倒なことはない

nove-b

ブログ更新ってめんどくさい

ブログ更新は面倒くさい。

そんなこと分かり切っている。

なかでも面倒なことの1つにアイキャッチ画像の選定がある。

面倒なことを楽にできるのがエンジニアの特権だ。

ということでアイキャッチ画像を簡単に作れるようにした。

作成されるアイキャッチ画像

本ツールを作成できるアイキャッチ画像はこんな感じ。

「本ツールを作成できるアイキャッチ画像」の部分を簡単に変更できる。

作成するうえでの考え方

JavaScriptのCanvasに背景画像を描画する
その上にCanvas で文字を書く

作成したコード

<div id="creatEyeCatch">
    <div class="input">
      <input type="text" id="input" placeholder="記事タイトルを記入する">
    </div>
    <canvas class="canvas" id="canvas--background" width="788px" height="486px"></canvas>
    <div class="operation">
      <button id="deleteTitle">タイトルを削除</button>
    </div>
  </div>

<script>
  // var
  const deleteTitle = document.getElementById('deleteTitle')


  // 背景CANVASの作成
  const canvasGround = document.getElementById('canvas--background')
  const ctxGround = canvasGround.getContext('2d')
  const nove = new Image();
  nove.src = '画像のパス';
  ctxGround.drawImage(nove, 0, 0, canvasGround.width, canvasGround.height);


  // 入力されたタイトルを描画する関数
  const drawFont = (el) => {
    ctxGround.font = '32px Noto Sans JP';
    ctxGround.fillStyle = '#000000';
    const x = (canvasGround.width - ctxGround.measureText(el).width) / 2
    const y = (canvasGround.height + 32 / 2) / 2 + 40
    ctxGround.fillText(el, x, y, 708);
  }


  // テキストが入力確定で出力
  const input = document.getElementById('input')
  input.addEventListener('change', () => {
    drawFont(input.value)
    clearCanvas()
    window.setTimeout(() => {
      drawFont(input.value)
    }, 500)
  })


  // テキストの削除
  deleteTitle.addEventListener('click', () => {
    clearCanvas()
    input.value = ''
  })


  const clearCanvas = () => {
    ctxGround.clearRect(0, 0, canvasGround.width, canvasGround.height);
    nove.src = '画像のパス';
    ctxGround.drawImage(nove, 0, 0, canvasGround.width, canvasGround.height);


  }
  // タイトルの文字量をチェック
  input.addEventListener('input', () => {
    if (input.value.length > 21) {
      alert('今はまだ、タイトルは20文字以内にしてください。')
    }
  })
</script>

基本的にコメントアウトを残したので、それ通りに作れば特に難しい点もないと思う。

投稿画面にリンクを張る

最後に作成したツールに飛ぶためのリンクを投稿画面に貼る。

add_action('admin_footer-post-new.php', 'add_custom_text');
add_action('admin_footer-post.php', 'add_custom_text');
function add_custom_text()
{
?>
  <script>
    const selectEyeCatch = document.getElementById('postimagediv')
    selectEyeCatch.insertAdjacentHTML('afterend', '<p class="creatEyeCatch"><a href="URL" target="_blank" rel="noopener noreferrer">nove のアイキャッチを生成する</a></p>');
  </script>
<?php
}

これですこしブログ更新を楽にできる。

わからない部分はコメントに残してもらえれば解説します。

アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した

nove-b

アドセンスに申し込む

記事も10記事たまったので、いったんダメ元でアドセンスに申し込もうと思い立った。

過去に1年間続いたブログではそれなりにアドセンスからの収入があった。

当時は本の感想ブログで、本なんて売れないし、アフェリエイトよりも効率良くアドセンスは収入があったので、なんとしても入れたい。

サブドメインが使用できません

で、よし、いざ、と腰を上げると、なんとサブドメインが使用できないとのこと。

本サイトは何を隠そうサブドメインなので、腰を上げた瞬間に座り込んだ。

ブログはサブドメインと言った自分の計画性のなさにうんざりする。

が、なんとしてもアドセンスやりたい。

そこで実現のために２つの方法を考えた。

アドセンスをサブドメインで申請する２つの方法

ルートドメインで新規構築

１つはルートドメインでサイトを構築する。

現状はロゴが真ん中にあるだけのサイトになっている。

アドセンスの審査は厳しいので、それだと落ちるに違いない。

落ちないようにするために、それなりのサイトを作成する必要がある。

当然、自身の労力もかかれば、時間もかかるので、この方法は現実的じゃない。

301リダイレクト

２つ目はルートドメインからサブドメインに301リダイレクトをする方法。

301リダイレクトとは「サーバー側の永続的なリダイレクト」のことで、Google曰く、

検索エンジンの結果に表示されるページの URL を変更する必要がある場合は、可能な限りサーバー側の永続的なリダイレクトを使用することをおすすめします。これは、Google 検索とユーザーを確実に正しいページに導くための最善の方法です。ステータスコード 301 と 308 は、ページが別の場所に完全に移転したことを意味します。

とのこと。

つまり、Googleはリダイレクト先を見てくれるようになる。

これの方が簡単かつシンプルなので、こちらの方法を採用することにした。

301リダイレクトを使用しサブドメインでアドセンス申請

301リダイレクトは .htaccess をいじる必要がある。

でも本ブログで使用しているエックスサーバーでなら管理画面で簡単にできるので、そちらを使用することにした。

リダイレクトが繰り返し行われました

作業は簡単でサーバーパネル > サイト転送設定 > ドメインを選択 > リダイレクト設定追加 > リダイレクト先を追加するだけなのだが、実行すると、

********でリダイレクトが繰り返し行われました。

というエラーがでた。

なぜ、という思いで調べてみるとサイト転送設定（リダイレクト設定） | レンタルサーバーならエックスサーバーに答えが書かれていた。

指定のURLへリダイレクト設定が可能です。

※サブドメインを含む、同一ドメインのURLにはリダイレクト設定はできません。同一ドメイン内でリダイレクト設定を行う場合は、.htaccessファイルで設定してください。

なるほど、エックスサーバーは本当に親切でありがたい。

どうせなら設定できるようにしてくれるともっとありがたいのだが、現状で相当親切にしてもらているのでそんなことは言えません。

とても親切なので、広告リンクを貼ってあげる。

[sc name="exserver_all_unlimited" ][/sc]

.htaccessをエックスサーバーの管理画面で編集する

話を元に戻して――、ということで .htaccessをいじることに。

ただこれもFTPとか使うことなくエックスサーバーなら簡単にできる。

サーバーパネル > .htaccess編集 > ドメインを選択 > .htaccess編集で下記コードを記入し保存。

RewriteEngine On
RewriteRule (.*) 遷移先のURL [R=301,L]

これでやっとアドセンスに申請することができた。

広告プレビューを見ると無事に本サイトのトップ画面が表示されているので、めでたし、めでたし。

後は、祈る。ただ祈る。

あとは祈るだけ、愛は祈りだ、僕は祈る、なんて「好き好き大好き超愛してる。」の舞城王太郎じゃないけど私は祈る。

Googleへの愛は誰よりもある。

ピクセルだって使ってる。

Googleさん、そういうことなので、どうぞよろしく。

クラシックエディタでリンク挿入ボタンがうまく機能していなかったので、原因を調査した

nove-b

クラシックエディタのリンク挿入ボタンがうまく機能していない

公開から少し経ち、ブログを投稿する機会が増えるにつれ、気が付き始めたことがある。クラシックエディタのリンク挿入機能がうまく機能していないという点が、その１つ。

調べてみるとクラシックエディタがうまく機能しなくなるバグはよくあることらしい。

プラグインが原因？

調査結果によると多くはプラグインを起因とするものらしく、特定のプラグインを無効化すれば直ったという声をよく見た。

しかし、こういう事態に備えて、プラグインを最小限に抑えている。とは言え入れていないわけではないので、ひとつひとつ無効化してテストしてみた。

Classic Editor 無効化したが効果が見られず。というより、そもそもこのプラグインを無効化したら意味がない。
Highlighting Code Block エンジニアの味方。ブログでコードを簡単に見せることができるプラグイン。無効化したが効果が見られず。
XML Sitemaps 動的にサイトマップを作成してくれるプラグイン。無効化したが効果が見られず。

結果、原因はプラグインではない。

functions.phpにいけない記述があるのかしら。

ということで、functions.phpをまるっと削除してみたところ、正常に稼働した。

細分化してエラーの原因を探すと、どうやらビジュアルエディターにcssを当てる記述が悪さをしているとのこと。

書かれたソースがこちら。

// 投稿ページにスタイルを充てる
function wpdocs_theme_add_editor_styles()
{
add_editor_style('パス');
}
add_action('admin_init', 'wpdocs_theme_add_editor_styles');

もしやエディタを読み込む関数が非推奨になったのかしらなんて思い、

add_editor_style('パス');

シンプルに記述方法を変えてみたが、変わらず正常に稼働しない。

ついに、原因解明

まさかと思いつつ、ということで読み込んでいるcssの内容をまるっと削除すると、正常に稼働。

そこでトライ＆エラーと消しては確認を繰り返すとついに発見。

原因はaタグに指定された「display: contents ;」...!

確かシンプルにリンクにアイコンをつけたくて記述した箇所だが、現状はもう使用してない不要な箇所。

自身が使うエディタのみだから削除を忘れていた。

そして原因はまさかのCSSだった。

無駄な記述は自身の首を絞める

今回の教訓として心に刻むことにした。

せっかくなので、

display: contents ; 理解を深める
表示のスタイルとエディターのスタイルを一元管理する

上記２つを課題として自らに課すことにした。

【解決】助けて‼「検出 - インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの😱

nove-b

Googleのクローラーが来ない

ブログを始めたのが 2021年11月23日で現在（2021年12月6日）24個のURLを持つサイトになった。

友人とふたりで特に縛りなく、楽しく更新しているので、割といいペースで記事投稿ができるいると思うのだが、アクセスが伸びない。

原因はわかりきっている。

Googleのクローラーが来てくれないのである。

「検出 - インデックス未登録」

サーチコンソールで確認すると「検出 - インデックス未登録」のURLが24件、ずらっと並んでいる。

つまり、すべてのURLが「検出 - インデックス未登録」とのことらしい。

さて、「検出 - インデックス未登録」とはいったいなんなのか。

答えは、クローラーがサイトマップ(sitemap.xmlやfeedなど)やリンクを通してページの存在を把握しているが、インデックスはまだしていないというステータスのこと。

前述したが、クロール待ちとのこと。

「クロール済み-インデックス未登録」とは似て非なる

同じような状況で「クロール済み-インデックス未登録」という状態もある。

こちらも似たようなステータスだが、実は全く異なるステータスで、クローラーが内容を見た上で「インデックスしない」と判断された状態のことをいう。

「価値なし」という烙印を押されたページのことである。

このことを知り、少しほっとしたが、とはいえ、クロールが来ないのは困る。

誰かに読まれたく、ブログを書いているのである。

小説家になれない私たちはネット世界の片隅でこそこそとブログを書くしか、表現の場がないのである。

ちなみに本ブログを共有しているふたみくんはいまだに小説家を夢見ているらしい……、

小説新人賞に応募するまでの道のり　～新人賞の選び方～

実をいえば私もまだ夢を見ているが、そのことは別記事で語ることにする。

話をもとに戻して続ける。

Googlebotがストライキ中だ！

調べてみると、どうやらこの状況（検出 - インデックス未登録）良く見られるようで、一説によると2021年5月のアップデートで何らかの事象が起きたのではないか、とのこと。

5月から情報が出回り始め、11月には多くのサイトでその影響を受けることになったらしい。

https://twitter.com/Seolyzer_io/status/1460255741860847633

訳： Googlebotがストライキ中だ！ Googlebotは11月11日午後6時以降、多くの大規模サイトでクロール活動を大幅に縮小している。これは議論が必要だ！

なんて、ツイートが出回るほど。

さらに、Googleのジュン・ミューラー氏もこの現象を認め、現在調査をしているとのこと。

ブログによっては、

クロールは17日遅くから戻りつつあるよう

と書いてあったが、定かではない。

現にこのブログにはまだ来ない。

つまり、現状世界的なクローラー不足だと思われる。

私たちはただ待つしかない。待つしかない。

12月10日現在（謎が深まる）

変わらず、「検出 - インデックス未登録」のまま。

唯一の変更は記事数が増えたので対象URLが27件になったことだけで、当然追加されたURLだって「検出 - インデックス未登録」になってしまっている。

徐々にindexされ始めているというが、ストライキ中に登録した記事は再クロール対象外だろうが。

あるいは公開後、間もないのでクロールの優先順位が低いのか。

この現象に気が付き、今日まで、毎日のようにリクエストしてきたが、意味がないようだ。

初手サブドメインに問題があった？

サーチコンソールだが、サブドメインでの細かいデータを見たかったので、URL プレフィックスで登録した。

その後、ドメインプロパティでも同様に登録した。

で、ドメインプロパティの方を見るとどうやらクローラーが訪れてきているようである。

本サイトはトップドメインも「https://media.nove-web.com」にサーバーリダイレクトしているので、そこに来ているのであればクローラーは認識しているってこと？

リダイレクトするからいいやと思ってindex.htmlに何も書かなかったせいか、

重複しています。ユーザーにより、正規ページとして選択されていません

というエラーが出ていた。

そこで、リダイレクトもとにcanonicalをしていして再送信してみることにした。

さて、結果はどうなることか。

引き続き調査する。

12月11日現在（調査中）

色々と考えてみた。

整理していくと、

サブドメインでサーチコンソールに登録
ドメインプロパティでサーチコンソールに登録
ドメインプロパティにはクローラーが訪問した？
トップドメインをサブドメインにサーバーリダイレクト
以降トップドメインにもクローラーがこない

つまり、サブドメインの本サイトに問題があるのかもしれない。

というわけで、色々調査。

本サイトで怪しい部分と言えば人気記事のコード。

bing webmaster tool が最強にわかりやすい

そこで、bing のウェブマスターツールに登録してみた。

これがなかなか優秀で、非常にわかりやすい。

実際に調査した結果は、

Meta Description タグがありません
画像がない場合の Alt 属性
Meta robots タグに制限付きのロボットディレクティブが含まれています
タイトルが長すぎます
Meta Description が長すぎるか短すぎます

という警告とエラーがあった。

Meta Description タグがありません

これはURL一覧を見た感じ、タグページとかのことを言っているので優先度は低い。

まあ、いずれ潰すかくらいの感覚でいい気がする。

画像がない場合の Alt 属性

これはアイキャッチ画像にalt 属性を入れていないことが問題のよう。

これはすぐに直せるので、修正をすることにする。

Meta robots タグに制限付きのロボットディレクティブが含まれています

これは非常に怪しい。

が、URLを見た感じ、こちらもタグページに適用されている。

これは正しい挙動である。

これが正解だったらシンプルで嬉しかったのに。

タイトルが長すぎます

これもまあ、そこまで気にすることないと思われる。

Meta Description が長すぎるか短すぎます

こちらも同様で、特に気にすることないと思われる。

分かりやすく解説してくれたが、どうにも問題の核のような箇所は見つからない。

今できる修正は？

つまり今できることは

人気記事一覧のコードからbot除外の記述を削除（bing でインデックスされていることを考えると原因じゃない気もするが...）
アイキャッチ画像にalt属性を入れる。

くらいだろうか。

とりあえずそれで様子を見ることにする。

12月12日現在（インデックスされる！）

起きて、サーチコンソールを見ると昨日までとは全く違う結果に、「検出 - インデックス未登録」が０件になっているのである。

もしや、クローラーが来てくれた？

ただそれであれば有効も１件以上になっているはずなのだが、なぜか０で、謎が深まる。

で、実際にはどうなのだろうか。

まだ検索最適化できていないので、検索にヒットするワードはないと思われる。

そこで「ウェブ制作を手掛ける"nove"のオウンドメディアになります。特にこだわりなく、有益なものから無益なことまで、徒然なるままに書いていきます。」という本サイトのキャチコピーで検索してみた。

結果を見る

結果は無事にトップに検索されている👍

これでやっと土俵に立てる。

あとは記事を検索される記事を書いていくだけである。

結果、何が良かったのか？何だったのか？

まず、何だったかについてだが、これはクローラーの減少である。

で何が良かったのかだが、これは特に何も良くなかった。

というより何もしてないし、何もする必要がなかったのではないかと思われる。

つまり、世界的なクローラー減少により、本サイトはなかなかインデックスされなかったが、時間が経つにつれ、徐々にクローラーが訪れるようになってくれたというだけである。

まあ、いうなれば記事を更新しているのが良かったのかもしれない。

サイトが特別なエラーを吐いていないのであれば、クローラーは必ずやってくるので、焦らず待つのが一番ということに落ち着いてみる。

サブドメインでアドセンスに申請したので、実況中継する。

nove-b

おっかなびっくりアドセンス申請

アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した

先日お伝えした通り、本ブログもアドセンスに申請を出した。

アドセンスの申請はなかなかハードルが高く、落ちるか、受かるかわからない。

そこで、どのような状況で審査に出し、どういった経緯で、どういう結果になったか記しておく。

申し込んだときの状況は？

実際に申し込み時の状況を記載しておく。

サイト開設：2021年11/23（土）

申請日：2021年12/04（土）

申請時の記事数：11記事

アドセンスに受かる必須条件

ちなみにアドセンス申請条件として下記が言われている。

独自ドメインの利用が必須
総記事数は最低でも10本以上
１記事あたりの文字数は、1000文字以上
1日に100PV程度が必要

実際は定かじゃないが、多くの記事で言及されているので、あながち間違いじゃないと思われる。

本ブログの条件通過具合

本ブログの状況を上記条件と照らし合わせてみる。

独自ドメインの利用が必須 → ok（エックスサーバーの無料キャンペーンで取得済）
総記事数は最低でも10本以上 → ok（11記事）
１記事あたりの文字数は、1000文字以上 → ？（9/11で1000文字越え、平均：1649文字）
1日に100PV程度が必要 → ok（平均：122.5pv）

軒並み基準は超えていると思われる。

１点、文字数で超えていない記事もあるが平均で見ると余裕で超えている。

さらに記事に関しては最大3682文字の記事まである。

JavaScriptを使用してWordPressの投稿に目次を挿入する

ただ上記はコードも含まれているので、純粋な文字量で言えば、

転職で失敗しないために気を付けるポイントまとめ

上記記事が2321文字で最多、かつ実体験を通しての記事なので、それなりにユーザーのニーズに合っているだろう。

とはいえ不安は拭えない

ということで、基準はクリアしているのだが、不安な点もある。

心配なのがGoogleのクローラーがまだ本ブログに未訪問なこと。
サイト開設から時間があまりたっていないこと。
本ブログがサブドメインで運用されていること。

の３点があげられる。

上記の悩みは他記事でも書かせていただいた。

助けて‼「検出 – インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの😱

アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した

さあ、果たして合格するか、否か。

随時更新していく所存である。

12月11日（土曜日）１週間経過

音沙汰がない。

どうしたことだろうか。

登録時のメールには、

チェックが完了すると、アカウント有効化の状況を記載したメールが届きます。通常、審査は数日で終了しますが、2 週間ほどかかる場合もあります。

と書いてある。

つまり、数日で終わらない場合、何らかの問題がある可能性がある？

まだインデックスも来ないし、それが影響しているのだろうか？

助けて‼「検出 – インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの😱

12月12日無事にインデックスされたので、上記記事にその過程を付け加えた。

つまり、以降の経過はインデックスは関係ないと思われる。

12月18日（土曜日）2週間経過

何の反応もない。

インデックスだって、それなりにされてきた。

が、連絡がこない。

流石におかしいということで、お問い合わせフォームから連絡をしてみた。

AdSense 審査状況確認フォーム

こんなフォームがあるなんて知らなかった。

AdSense の審査の返答が 1 週間以上来ない場合や、非承認の理由が現状と異なる場合は、大変お手数ですが以下のフォームよりご報告ください。

とのこと。

もう２週間もきていません。

このフォームもっと早く知りたかった。

待て、続報を！

12月19日（日曜日）結果が届く

さてフォームに送信したからか、翌日返信がきた。

結果は不合格!!

審査結果はサイトが未完成とのこと。

とはいえ、記事は20記事以上ある。

じゃ何が悪いのか。

考えみた結果、インデックスされている記事がすくないんじゃないか、という結論に至った。

先日インデックスされたといったが、まだ除外されている記事の方がおおい。

詳しく言うと有効が５つで、除外が23。

つまりGoogleが検知している記事が５つしかないということなのかもしれない。

ということで、有効記事を増やしていく。

有効記事が20を超えた時に再申請する次第である。

12月30日（木曜日）結果が届く

結果は不合格。

実は13記事で、いけるだろうと送っていた。

落ちた理由は、

コンテンツの有用性が低い
作成中である。
アラート、ナビゲーションなど、行動が目的で使用されている。

最後の、

アラート、ナビゲーションなど、行動が目的で使用されている。

はわからないけど、やっぱり記事数だろうか。

あるいはコンタクトページがGoogleサービスを使用しているせい？

Googleフォームはだめなのかしら。

そこをはっきりさせるために、もう少しサイトのPVが伸びるのを記事数を増やしてから再トライする。

2022年10月13日（木曜日）合格🎉

申請してから10か月。

たまに、審査リクエストをしたりしなかったり、で遂に合格しました。

まあ、記事数も当然増えているが、正直インデックスされている記事数はそこまで増えてない。

つまりこのブログは質が悪い......、まあ自分で言うことでもないけれど。

じゃあ、なぜ審査が通ったのか🤔?

考えられるのはひとつ。

アドセンスに合格するのはPV数に違いない

というのも10日くらい前、他に持っているブログを閉鎖するのでこちらのブログにリダイレクトした。

そちらのブログのPV数は月600ある。

まあ、プロブロガーには遠く及ばないが、２年間更新がないと思えば十分な気がする。

で、そのブログからリダイレクトしてしばらくしたら合格した、さてどういうことか。

ドメインパワー？

いや、でもSEO的には上がっている気がしない。

念のために調べてみたところ、100点中8.4点、うん、ドメインパワーは関係ない。

であれば、PV数としか思えない。

リダイレクトする前は１日３PVとかだったが、リダイレクトをしてからは30くらいに増えている。

つまりそういうこと、アドセンス合格にはPV数がカギになる。

react でプロジェクトを作成する

nove-b

react をインストールする

参考：Create React App

npx create-react-app my-app-name

上記のコマンドで react が自動でインストールされる。

※そんなことしないと思うが、「my-app-name」を「react」にすると怒られ、インストールできないので注意。私は何も考えずにそうして、無事に怒られた。

cd my-app-name

次にインストールしたディレクトリに移動する。

npm start

で、ローカルホスト（http://localhost:3000/）が開かれる。

これだけで、reactのアプリが起動する。

起動だけを考えるとvue より楽かもしれない、vueはいろいろと選択する必要があるので。

まずはソースを覗き見る

この時点で表示されているのは App.js のようで、

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Edit <code>src/App.js</code> and save to reload.</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >Learn React</a>
      </header>
    </div>
  );
}

export default App;

該当ソースがこんな感じで、Javascriptを使用してhtmlを吐き出している？

正直、ぱっと見だとvue のtemplate構文のほうが見やすい気がする。

まあ、少しづつ、慣れていく。

フォルダをツリー構成で綺麗に表示したい。vsCodeでtree コマンドがなくても表示できる

nove-b

treeコマンド

treeコマンドとは、フォルダ構成とかを綺麗に表示してくれるもの。

実際に吐き出されるソースの見本は下記記事を参照。

インストールしたreact のファイルを検分する

使い方は簡単で、コマンドを開き、

cd 表示したいフォルダ
tree

で、きれいに表示される。

ちなみに、ファイル名まで表示したい場合は、

tree /f

で、実行する。

bash: tree: command not found

Windowsのコマンドなので（？）、vsCode 上で実行すると

bash: tree: command not found

というエラーができる。

そういう時はコマンドに行けばいいのだが、どうしてもvsCodeでやりたい時は下記コマンドで実行可能となる。

pwd;find . | sort | sed '1d;s/^\.//;s/\/\([^/]*\)$/|--\1/;s/\/[^/|]*/| /g'

参考：Windowsファイルツリー構造の表示とテキスト保存

参考：tree コマンドが無い環境で tree コマンドを実現

インストールしたreact のファイルを検分する

nove-b

前回にreactの環境構築をしたので、今回はインストールしたファイルを細かく見ていくことにする。

react app のファイル構成

最初にインストールした時点で存在しているフォルダは下記一覧。

|--node_modules
| |--(抜粋)
|--public
| |--favicon.ico
| |--index.html
| |--logo192.png
| |--logo512.png
| |--manifest.json
| |--robots.txt
|--README.md
|--src
| |--App.css
| |--App.js
| |--App.test.js
| |--index.css
| |--index.js
| |--logo.svg
| |--reportWebVitals.js
| |--setupTests.js
|--.gitignore
|--package.json
|--README.md
|--yarn.lock

node_modulesの中身は多すぎるので、抜粋した。

どうやらこの中でも必要じゃないファイルがいくつかあるらしいので、残しておくべきファイルを整理する。

必要フォルダ構成

|--node_modules // 必要
| |--(抜粋)
|--public
| |--favicon.ico
| |--index.html // 必要
| |--logo192.png
| |--logo512.png
| |--manifest.json
| |--robots.txt
|--README.md
|--src
| |--App.css // 必要
| |--App.js // 必要
| |--App.test.js
| |--index.css
| |--index.js // 必要
| |--logo.svg
| |--reportWebVitals.js
| |--setupTests.js
|--.gitignore // 必要
|--package.json // 必要
|--README.md // 必要
|--yarn.lock // 必要

必要なフォルダ構成は上記の通り。

それ以外は削除してフォルダ構成をクリーニングする。

すると当然依存ファイルがなくなるので、下記エラーが吐き出される。

./src/logo.svg
Error: ENOENT: no such file or directory, open 'C:\Users\kyoryu\Desktop\react-app\src\logo.svg'

なので、依存関係をすべて解決すれば、再び、表示される。

私は下記、参考書を参考に勉強したので、そこに詳しい依存関係解決後のコードがある。

はじめてつくるreact アプリ

キンドルアンリミテッドで無料なので、自身で依存関係を解決できないのであれば、参考にしてください。

[sc name="kindleunlimited_234x60" ][/sc]

削除したものはなに？

はじめてつくるreact アプリに従ってクリーニングした。

さて、ここで気になるのは削除した依存関係と不要とされた記述はなんなのか、ということである。

気にならないのであればそれでいいが、それもそれで今後が怖いので、一応調べておく。

いじったのは App.js と index.js の２つ。

App.jsに関しては、読み込んでいるreact のメインビジュアルを変更を削除しただけなので、特に問題はない。

気になるのは index.js の方。

削除したのは、

// import './index.css';
// import reportWebVitals from './reportWebVitals';
// <React.StrictMode>
// </React.StrictMode >
// reportWebVitals();

の５行で、１つ目はcss なので問題がない。

それ以外である。

残りの４つは２つに分けることができる。

reportWebVitals

まずは１つ目の「reportWebVitals」。

こちらはimport で読み込み、関数を実行している？

どうやらこれは「WebVitals計測ライブラリ」というものらしい。

reactの公式でも解説されている。

使い方とかは下記が詳しいのでメモ。

CreateReactAppにWebVitals計測ライブラリが入ったので試してみた

確かに必要はなさそうなので、最小限のアプリとかを作る場合は削除しても問題なさそうだが、まあ、試しに使ってもいいので、あえて削除する必要もないくらいの感覚。

React.StrictMode

最後が<React.StrictMode>という開始タグと</React.StrictMode >という閉じタグ。

こちらも公式にあったので、参照。

StrictMode はアプリケーションの潜在的な問題点を洗い出すためのツールです。Fragment と同様に、StrictMode は目に見える UI を描画しません。StrictMode の子孫要素に対しては、付加的な検査および警告が動くようになります。

現状のコードを見ると、

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
document.getElementById('root')
);

となっているので、アプリ全体の問題点を洗い出してくれるようになる。

つまり、これはあったほうがいいのか？

しかも本番環境には影響を与えないとのこと。

strict モード

うーん、こちらは残したほうが良さそうなので、残しておく。

次はやっとこさ、ソースをいじっていく。

react を適当に触って確かめてみる。

nove-b

前回、reactのファイルを検分したので、今回は、適当に触ってみる。

それじゃ、適当に触ってみる

App.js編

まず、前回インストール時の時から依存ファイルをクリーニングした。

結果、非常にわかりやすくなった。

ざっと見た感じ、HTML部分の特別な違いは、class が classNameになること...くらい？

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>HTML部分の特別な違いは、class が classNameになること...くらいかしら</p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >Learn React</a>
      </header>
    </div>
  );
}

export default App;

上記コードで保存すると、

のように表示される。

ここまでは特別に難しくない。

App.css 編

次に、App.js の先頭に書かれている、

import './App.css';

を見ていく。

こちらも特別難しいことはない。

普通にcssを読みこんでいるだけなので、

color: white; → color: red;

にすればテストの色が変更される、

この画像通りに。

特別難しいことはないが、

@media (prefers-reduced-motion: no-preference)  {}
font-size: calc(10px + 2vmin);

とか個人的に知らない使い方があったので、勉強になる気がする。

てか、人のコードを見るのは勉強になる。

参考：意外と知らない？メディアクエリを使ってみよう。

参考：【CSS】vw、vh、vmin、vmaxとは？基本的な使い方

index.js 編

最後に、前述した App.js を読み込んでいる index.js 、こいつが少しわからなかった。

こちらはクリーニングした状態で下記のようになっている。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

さて、これはなんなのだろうか。

vue を良く触るので、vueで考えてみると、App.vue（？）あるいは、views 内ファイルのどれか（？）

調べたところ、どうやらindex.js は、

Reactアプリを実行する際、一番最初に呼び出されるファイル

らしいので、App.vue に近いのだろうか。

んー、わからないので、次で新規でページを作ってみて、index.jsの動きを確認してみる。

javascriptでimportするときに { 中括弧 } をつける時とつかない時があって釈然としない

nove-b

defaultの有無

export default で書き出した値は、中括弧なしでimport できる。

export で書き出した値は、中括弧ありでimport する。

そしてさらに少しややこしくなるが、export で書き出した値は { xxx as yyy } とすることで任意の変数名に変えることができる。

とのこと。

参考：ES2015のモジュール機能(import/export)

実際に動かしてみた

上記の参考とまんまだが、実際に動かしてみた。

export default "uchida hyakken";
export const firstNaMe = "hyakken";
export const lastName = "uchida";

import name, { firstNaMe, lastName } from "./export";

console.log("name", name); // name uchida hyakken
console.log("firstNaMe", firstNaMe); // firstNaMe hyakken
console.log("lastName", lastName); // lastName uchida

下に小さくあるconsole ボタンを押して見ていただければ成功していることが確認できる。

うん、動かすことで理解が深まった。

export / import を使いこなすことで、ファイル管理を楽にしていこう。

エンジニアの成長のためには単語のコピペをやめたほうがいいんじゃないかという思い付き

nove-b

コピペは決して悪じゃない

エンジニアはとにかくコピペをするべきである、って新卒で入ったウェブ制作会社で言われたのは、もう6年も前。

少しややこしい言い方をしたが、ロジックも含めてコピペをするわけじゃなくて、単語とかをコピペしろ、っていう意味で言われた。

確かに、デバック中にスペルの抜けで動いてないことを知った時、エンジニアは皆、般若のような顔になる。

つまりとても理にかなっている。

理にかなっているので、実践してきた。

例えば、event 時に実行する関数は、

対象の要素.addEventListener(種類, function() {
// 処理を記述
}, false);

というコードをクリップボードに保存して使う。

これならスペルミスも生まれないし、時短にもなる。

が、がしかし、である。

かっこいいエンジニアになりたい

最近、まあ、6年近くウェブに携わってきたので、後輩に教えることが多くなってきた。

「わかりません」と呼ばれ、後輩の机に移動する。

「あー、これね、こんなの簡単よ」ってどや顔し、いざパソコンと向き合った時、わかる、わかるのだが、スペルがわからない。

「ごめんだけど、アドイベントリスナーってググってくれない？」

「え、あどいべんとりすなー？」って後輩に聞き返される。

なんて、恥ずかしい思いはしたくない。

そう思うならコピペを辞めるのも手じゃなかろうか。

私はコピペを辞めました。

以来、だれのパソコンでもすらすらと日本語を書くように、というと言い過ぎだが、コードを書けるようになった。

前述したが、コピペは全く悪じゃない。

コピペエンジニアと言われている人たちがいるが、あれはロジックを理解せずに使っているエンジニアで、スペルミスを防ぐためにコピペをしているのはコピペエンジニアではない。

ただ後輩の前でかっこつけたいのであれば、なるべく手を動かし書くべきだと思う。

結果、たまに般若のような顔を後輩に見られることになるかもしれないが。

react.jsが急に、突然インストールできなくなった

nove-b

以前、reactをインストールする方法を書いたが、今日（2021年12月22日）急にインストールができなくなった。

react でプロジェクトを作成する

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

というエラーが出てくる。

なにうえ、と調べるといくつかヒットした。

キャッシュを消せとか、色々出てきたので、検索して試してみるといいと思われる、が。

私にはどの方法もうまくいかなかった。

で、結局うまくいったのは...下記の通り。

これが正解...？

npx clear-npx-cache

C:\Users\{name}\AppData\Roaming\npm-cache 削除

npm init

npx create-react-app myapp

これが正解なのだろうか。

情報をさらに調べてみる。

特定のページでコメント投稿欄が非表示になっていたので、原因を調査してみた。

nove-b

コメント投稿機能が表示されない

ブロガー朝のルーティン

朝起きてから自身の予約投稿した投稿が、無事に公開されているか確認する。

そんなブロガーであり、目覚めの悪い私が驚き飛び起きたのには訳がある。

コメント投稿欄が非公開になっていたからである。

11月、機能追加したコメント投稿機能がうまく動作していなかったのかしら、と他ページを見てみたところ、どうやら問題なく表示されている。

どうしてこのページだけ、投稿機能が動作しないのか。

長いバグ修正の旅に

長い長い、そして結論はいたってシンプルであったバグ修正の旅に出る。

まずは同じ現象が起きているページを探してみる。

結果、2ページが該当した。

該当したのは下記ページ（現在は正常に動作中なので、コメントください）。

アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した

nove月次報告書（2021年11月）-初月の収益を公開-

この２つにはいくつかの共通点があった。

ひとつは、カテゴリが「メディア」であるということ。

ひとつは、今月機能追加で採用したショートコード管理プラグインが動作しているということ。

そこでふたつの共通点を順に調査していくことに。

カテゴリが関係しているのか

まず、カテゴリについて実験してみる。

他の記事をメディアカテゴリに移管する→投稿機能は無事に動作している。

該当記事を他のカテゴリに移管する→投稿機能は変わらず表示されない。

つまり、カテゴリは今回のバグに関係ない。

プラグインが関係しているのか

次にショートコード管理プラグインを疑ってみる。

この時点で私は相当このプラグインを疑っていた。

だからプラグインなんて採用するものじゃない、なんて悪態すらついていた。

そんな心境でデバックを開始する。

まずはプラグインを無効にしてみる→該当ページの投稿機能は変わらず表示されない。

他の記事に上記プラグインを使用してショートコードを挿入する→投稿機能は無事に動作している。

該当ページにあるショートコードの記述を削除してみる→投稿機能は変わらず表示されない。

つまり、プラグインは問題ない。

そもそも評価4.1かつ多くの人が使用しているプラグインを疑うくらいなら自身の作成したテーマを疑うべきである。

というわけで、自作テーマを見返したが、どうにも原因となる部分は見つからない。

解決編

そこでいろいろ調べていると、

ダッシュボード > 投稿と移動し、該当する投稿の「クイック編集」で「コメントを許可」にチェックを入れてみてください。

という記述を見つけた。

まさか、と思い上記手順で確認してみたところ、どうしてか知らないが、チェックが外れている。

唖然としつつ、チェックをいれ、再度ページを見ると、無事にコメント機能が動いていた。

また、つまらぬことに時間を割いてしまった、なんて内心解決にほっとしている気持ちを隠しつつ、ハードボイルドに言ってみたりする。

共通点ある、なんてどっかの私立探偵のみたいなセリフは何も生み出さなかった。

サーチコンソールより優秀な「Bing Webmaster Tools」を使ってブログで検索上位を目指してみる

nove-b

上位を目指してみるなんて言ってみたが、現状（12月11日）本サイトをGoogleに認識されていない。

助けて‼「検出 – インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの😱

色々、調査中である（12月12日にインデックスされ解決した）。

で、調査中において、MicrosoftのBing Webmaster Toolsが非常に便利だったので、ぜひとも後世に残しておきたい。

Bing Webmaster Toolsとは？

Bing Webmaster Tools

Bing Webmaster Toolsアカウントを使用すると、検索最適化計画（SEO）を非常に簡単に開始できます。ウェブマスターツール内では、SEOセクションの下に、バックリンクの調査、キーワードの調査、サイトや個々のURLのSEOエラーの分析などのタスクに役立つツールのリストが表示されます。 SEOレポートは、アカウントで確認したドメインで隔週で自動的に実行されます。したがって、月に約2回、SEOで対処する必要のある項目に関する提案を含む最新のレポートが表示されます。

つまりbingの検索エンジンで上位に来るように色々調査できるというもの。

つまりつまり、サーチコンソールのbing版というもの。

登録方法は割愛中

登録方法とかは別に難しいこともないので割愛する。

１つアドバイスとすればサーチコンソールを先に登録したほうがいい。

なぜかというと、Bing Webmaster Toolsはサーチコンソールのデータを引き継ぐことができるのである。

つまり、サーチコンソールに登録しておけばBing Webmaster Toolsに登録するのが楽になる。

で、何が優秀なのか

話を戻すことにして、優秀な機能の１つとしてサイトスキャン機能がある。

これはサイトのエラーや警告を通知してくれるのである。

seo > サイトスキャン > 新しいスキャンを開始

で、調査が始まる。

後はメールで通知してくれるので、待つだけである。

結果は非常にわかりやすい。

Meta Description タグがありません
画像がない場合の Alt 属性
Meta robots タグに制限付きのロボットディレクティブが含まれています
タイトルが長すぎます
Meta Description が長すぎるか短すぎます

こんなに具体的に教えてくれるので、修正もしやすい。

サーチコンソールとは違ってわかりやすい

サーチコンソールだとこうはいかない。

サーチコンソールは漠然としたことしか教えてくれない。

「検出 - インデックス未登録」みたいな感じで、どうしてそうなったのかを教えてくれないのである。

それに比べて「Bing Webmaster Tools」は丁寧なこと、この上ない。

もちろん、この丁寧に教えてくれるエラーを解消したところで、「検出 - インデックス未登録」が直るわけではないのだが、人間全くわからないよりはすこしでも分かっている方が、落ち着くのである。

そういう意味でも「Bing Webmaster Tools」は技術だけでなく、心にもいいツールであると言える。

カスタムフィールドで改行が適用されないので、無理やり改行できるようにした。

nove-b

本記事はリード文をカスタムフィールドで書いている。

が、カスタムフィールドないでいくら改行しても改行が記事に反映されないので、調査、修正してみた。

まず、そもそものコードは

<?php
  $item_lead = get_post_meta($post->ID, 'item_lead', true);
  echo $item_lead;
?>

という形で吐き出していた。

が、これだとcssは当たるが、改行が反映されない。

どうやらこれは調べてみると仕様っぽい。

コードによる解決方法が見つからなかったので、すこし無理やりだが、改行を判定し、pタグで囲むようにした。

実際のコードは、

$values = explode("\n", get_post_meta($post->ID, 'item_lead', true));
  foreach ($values as $value) {
    echo "<p>" . $value . "</p>\n";
  }
?>

という形に修正した。

やっとこととしては、まずexplode()で取得した文字列を改行コードで分割する。

分割した値を回し、pタグで囲っていく。

ただそれだけ。

少し無理やりかもしれないが、改行が反映されるようになった。

n の倍数で数値を丸める

nove-b

特定の倍数に数値をまとめたい。

なにをいっているのだろうと思われたかもしれないので、実例をどうぞ。

実例

ユーザーが数値を入れるインプットエリアがあるとする。

ユーザーは任意の数字を入れることができる。

その結果を10の倍数にまとめたい。

つまり、24とユーザーが記入した場合は「20」が期待値になる。

ということがやりたい。

実装方法

じゃ、どうするのか。

まずは実装済みのものをどうぞ↓（うまくコンパイルできない時があるので、下の更新ボタンをクリックしてください）

inputエリアに数字を入れていくと、5で10、14で10、15で20になっていることが確認できる。

つまり24と入力すれば「20」が表示される、期待値通り。

特定の倍数に数値をまとめるコード

const changeNumber = () => {
  const unit = 10;
  const el = Math.round(num.value);
  result.value = Math.round(el / unit) * unit;
};

inputエリアのvalueが更新された時、

まずはvalueを丸める。

つまり、2は0、5は10になる。

その値を最初に定義した値（丸めたい倍数）で計算する。

実際に24が入力された時、

24を丸めて20にする。

その値を10で割って10でかける。

20 / 10 * 10 = 20

結果20になる。

なんかこうやってみるともっと簡単な方法がある？

まあ、期待値は取り出せたので、良しとする。

理系の人、ぜひ教えてください。

エンジニアのバイブル「リーダブルコード」をKindle Paperwhiteで読む

nove-b

Good Bye 紙の本、そして紙の本しか出さない作家さん

読書は専らKindle Paperwhiteで読む。

「ひと昔前は本は紙でしょう、電子書籍？　いやいや風情も雰囲気もない。」

なんて思っていたが、Kindle Paperwhiteを買ったらもう、紙に戻れなくなった。

リンク

結果的に電子書籍を出していない作家は、私の中で読む術を失った。

なにを思って電子書籍版を出さないのかわからないが、出さないことで少なくとも私のような人種からのリーチを失っていると作家には知ってほしいし、読みたいので電子書籍版を出して欲しい。

とは言え、ただただ、電子書籍版を出せばいいというわけでもない。

Kindle Paperwhiteで読みたいのである。

で、やっとタイトルに繋がるのと同時に少し脱線する。

エンジニアのバイブルリーダーブルコード

リーダブルコードという本を知っているだろうか。

リンク

エンジニアであれば一度は聞いたことがあるかもしれない。

それはそうで、なにせエンジニアのバイブルと言われているくらいである。

美しいコードを見ると感動する。優れたコードは見た瞬間に何をしているかが伝わってくる。そういうコードは使うのが楽しいし、自分のコードもそうあるべきだと思わせてくれる。本書の目的は、君のコードを良くすることだ」

初版は2012年6月23日でもう10年前の発行である。

であるのだが、今でも根強い人気を誇っている。

私もずっと読もうと思っていたが、なんとなく先延ばしにしてきた。

そこで、このゴールデンウイークに重い腰を上げて読んで見ようと思い立った。

kindle版がない......?

がしかし、リーダブルコードは電子書籍版が存在するのが、kindle版が存在しないという稀有な例。

そこでリーダブルコードをKindle Paperwhiteで読む方法を調べてみた。

エンジニア味方オライリーの本をKindle Paperwhiteで読む

公式オンラインショップで検索

まずはオライリー公式ホームページでリーダブルコードを検索する。

O'Reilly Japan - リーダブルコード

公式オンラインショップで購入

次に、Ebook Storeで電子版を購入:価格2,112円をカートに入れ購入手続きに進む。

その後、購入に際してPayPalのアカウントが必要になるので手順に従いアカウント登録をする必要がある。

こういうのが面倒でkindleストアで一元管理しているのに......

登録購入ができると、オライリーの本棚に購入した本（今回であればリーダブルコード）が表示される。

O'Reilly Japan Ebook Store - 購入済みの商品

インストール＆kindleにインポート

購入した本が表示されていることを確認できたら、ePubをインストールする。

で、調べた情報によると、ePub版はkindleで対応できないとのこと。

kindleで対応しているのはmobiファイルということで、ePubをmobiに変換する必要がある。

今回はオンラインツールを使用し、mobiファイルに変更をした。

できないようであればPDFファイルでも問題ないので、購入した本のPDF版をインストールする。

やっとKindle Paperwhiteの出番である。

まずはパソコンとKindle Paperwhiteを接続する。

接続が完了するとkindleのフォルダが表示されると思うので、D:\documentsにインストールしたmobiファイル or PDFファイルを置く。

その際、mobiファイルは書籍情報が含まれているので、自動でタイトル補完をしてくれるがPDF版の場合は、ファイル名をタイトルにしたほうがわかりやすい。

これでKindle Paperwhiteで読書する準備が完了した。

実読

さて、実読。

ということで今回はmobi版とPDF版の両方をインストールした。

mobi vs PDF

PDF版は書籍のレイアウトをそのままに読めるので、特に違和感なく読むことができる。

それに対しmobi版は本として再レイアウトしてくれるので、すこし崩れのようなものを感じる。

が、本として読むことできるので、フォントサイズに調整等に対応できる。

Kindle Paperwhiteは画面サイズが大きいというわけではないので、mobi版の方が読みやすいかもしれない。

それじゃ、リーダーブルコードを読み、良いコードライフ＆いい読書ライフを。

エックスサーバーで作ったサブドメインをGoogle Hostingに適用する

nove-b

エックスサーバーは非常に便利で50個のサブドメインを作成することができる。

これは私みたいに飽き性でいろいろなものを作っては放置するタイプには非常に重宝する機能である。

エックスサーバーが気になるのであれば下記リンクをどうぞ。

[sc name="exserver_all_unlimited" ][/sc]

さてそしてまた、この機能を使用する機会がきた。

今回はエックスサーバーのサブドメインをGoogle Hostingに適用するというケースを行ったので、備忘録としてここに書いておく。

サブドメインの取得の仕方は省力する。

が、反映になかなか時間がかかるのが、エックスサーバーの玉に瑕。

firebase Consoleに行く

Firebase console

作成したドメインを入力する

まずはfirebase ConsoleのHostingに移動し、カスタムドメインを追加ボタンをクリックする。

するとドメイン名の入力を求められるので、エックスサーバーで作成したサブドメインを記入する。

※「angular.nove-web.com を既存のウェブサイトにリダイレクトする」をチェック。

リダイレクト先にはエックスサーバーで作成したサブドメインを記入する。

次へをクリック。

所有権の確認

エックスサーバーのDNSレコード設定に進み、対象ドメインを選択する。

次に「DNSレコード追加」タブに移動する。

記入欄が現れるので、下記のように記入していく。

ホスト名：作成したドメイン

種別：TXTを選択

内容：Firebaseコンソール画面でコピーしたTXTレコードの値

追加が完了したら、firebase Consoleに戻り、所有権を証明ボタンをクリックする。

ここで失敗した。

ドメイン ********.com の所有権を証明できませんでした。設定をお確かめいただき、もう一度お試しください。

とのエラーが表示された。

解決方法がわからずに、途方に暮れていたので、初心に戻りGoogle Workspace 管理者ヘルプに行くと、

最初に試すことに48 時間待機すると書かれていたので、待機することにした。

ちなみに下記サイトでDNSレコードがしっかり適用されているか確認することができる。

Google Admin Toolbox Dig

全然うまくいかずに、色々DNSレコードをいじっていたら、途端に通った。

何をしたか、わからない。

実行（ドメインとの紐づけ）

何をしたかはわかないが、うまくいったようで、セットアップ画面が表示された。

またレコードを追加する必要がある。

下記のように追加すれば問題ない。

ホスト名：作成したドメイン

種別：Firebaseコンソール画面で表示されたレコードタイプ（私の場合はA）

内容：Firebaseコンソール画面でコピーしたTXTレコードの値

追加が完了した後に、終了ボタンをクリックする。

この時点でカスタムドメインの追加はうまくいったが、ステータスが設定が必要ですと表示されている。

最後に

設定を完了するために、最後にもうひとつ。

サブドメインの場合は、すでにあるDNSレコードと干渉する場合がある。

本サイトでは「*.nove-web.com」のようなレコードが既に存在していた。

これは見ての通り、すべてのサブドメインを対象にしているので、削除する必要がある。

ただ、本サイトのように新規で追加する以外にサブドメインを使っている場合は、そのサブドメインのレコードを新規に作成する必要がある。

後は接続が完了するまで待つ、ひたすら待ちましょう。

公開ができればそのサイトにアクセスができる。

今回追加したのは下記サイト。

https://angular.nove-web.com/home

コスパ最強のWeb アプリ

今回はfirebase hosting で公開したのはAngularを勉強のために立ち上げたブログサイト。

firebaseとエックスサーバーのドメインを使うことで、結果的に運営費用は0円。

無料枠の大きいfirebaseとサブドメインが50個まで無料で作れるエックスサーバーには感謝しかない。

エックスサーバーの詳細は下記をご覧ください。

[sc name="exserver_all_unlimited" ][/sc]

Angularをバージョン指定でインストールする方法は？

nove-b

Angularを業務で使用することがあり、かつバージョンが12指定とのことだった。

ちなみに現在のAngularのバージョンは13なので、普通にインストールすると13がインストールされる。

そこで12を指定し、インストールする方法を調べてみた。

Angular12をインストールする

バージョン指定でインストールする方法は別段他の言語と変わりなく、ただただ末尾に指定バージョンを記載するだけでOK。

$ npm install -g @angular/cli@12.0.0

つまりこんな感じすれば12がインストールされる。

バージョンを確認する

きっと問題ないけど、念のためにバージョンを確認する。


$ ng v

   _           _         ____ _   ___
  / \  _ __  __ _ _  _| | __ _ _ __   / ___| |  |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|  | |  | |  | |
 / ___ \| | | | (_| | |_| | | (_| | |   | |___| |___ | |
 /_/  \_\_| |_|\__, |\__,_|_|\__,_|_|    \____|_____|___|
        |___/


Angular CLI: 12.0.0
Node: 14.17.5
Package Manager: npm 6.14.14
OS: win32 x64

Angular:
...

Package           Version
------------------------------------------------------
@angular-devkit/architect  0.1200.0 (cli-only)
@angular-devkit/core     12.0.0 (cli-only)
@angular-devkit/schematics  12.0.0 (cli-only)
@schematics/angular     12.0.0 (cli-only)

問題なく12がインストールできている。

Angularとセットで使うことが多いmaterial UI をインストールする

nove-b

独断と偏見で言わせてもらうと、Angularはそれだけだと使いこなすことができない。

AngularはAngular側が用意してくれているモジュールをインストールして活用することで、簡単にWeb アプリを作成できるようになる。

が、そのモジュールなしで使いこなすことは難しい。

その筆頭がmaterial UIである。

material UIとは？

material UIはこちら。

要はよく使うパーツを用意されたモジュールをインストールするだけで使えるようになるというもの。

大変便利なのだが、決められたパーツなのでカスタマイズが絶妙に面倒くさいというデメリットもある。

とは言え、面倒な処理はやってくれるので、非常に重宝する。

いざ、インストール

それでは実際にインストールしてみる。

$ ng add @angular/material

上記コマンドを実行後、インストールが進行し、いくつか質問されるので、下記のように回答する。

ℹ Using package manager: npm
✔ Found compatible package version: @angular/material@12.2.13.
✔ Package information loaded.

The package @angular/material@12.2.13 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? No
? Set up browser animations for Angular Material? Yes

これで無事にインストールが完了した。

質問に関しては、

用意されたパレットテーマ、カスタムテーマどちらを使用しますか？
タイポグラフィにグローバルなCSSを当てますか？
Angular Material のアニメーション機能を使用しますか？

という3つの質問。

少しでもカスタマイズしやすくするために、上記回答にした。

Angular Material UI でカスタムカラーを設定する。

nove-b

Angular Material UIのカラーパレットがどうにもパッとしない。

ということで、カスタムカラーを使用することにした。

カスタムカラーを使用するためにはインストールの段階でカスタムカラーを使用するよ、という宣言が必要だがその方法は前回書いたので、参考にしてほしい。

さて、さっそくカスタムカラーを設定していく。

手順としてさらっていくと、自作のパレットを作成し、それを適用するというそれだけのこと。

なので、まずは自作のパレットを作成する。

src/assets/_palette.scssを作成し、そこにカラーを書いていく。

例えばこんな感じに。


$custom-primary: (
  50: #e8f5ff,
  100: #c5e5ff,
  200: #9fd4ff,
  300: #78c2ff,
  400: #5bb5ff,
  500: #3ea8ff,
  600: #38a0ff,
  700: #3097ff,
  800: #288dff,
  900: #1b7dff,
  A100: #ffffff,
  A200: #ffffff,
  A400: #cce0ff,
  A700: #b3d1ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000,
  ),
);

次に、このパレットを読み込む必要があるので、src/styles.scssに移動する。

で、まずはカスタムパレットを使用すると宣言する。

@use "./assets/palette" as palette;

あ、ちなみに今回はPrimaryカラーだけをカスタムした、遅ればせながら言っておく。

そのため、Primaryカラーにカスタムパレットを適用させる。

$custom-primary: mat.define-palette(palette.$custom-primary);
$custom-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
$custom-warn: mat.define-palette(mat.$red-palette);

accent、warnはMaterial UIが用意しているカラーを使用している。

最後にテーマ全体を宣言しておしまい。


$custom-theme: mat.define-light-theme(
  (
    color: (
      primary: $custom-primary,
      accent: $custom-accent,
      warn: $custom-warn,
    ),
  )
);

@include mat.all-component-themes($custom-theme);

たぶん、Material UIで作成されたカラーテーマをそのまま使うのは無理があるので、こんな感じでカスタムテーマを作るとずいぶん楽になる。

参考までにこの作業のGithubをどうぞ。

Angularでwebアプリを作成する時「コンポーネントのベストプラクティス」

nove-b

Layout

header や footer 等全てのページで使われるパーツ

ng g component layouts/componentName

Pages

ページごとのコンテンツを表示するページ

ng g component pages/componentName

Parts

layout や page で使われるカードなどの UI パーツ

ng g component parts/componentName

テストをするためには必要だが、無駄なファイルを増やさないために

ng generate component componentName --skip-tests

でspecファイルを作らずに済む。

コンポーネントを呼び出したい

<app-componentName></app-componentName>

で、コンポーネントを呼び込む。

今更ながら、即時関数がとでも便利でかっこいい

nove-b

いや、本当に今更なんだけれど、JavaScriptの復習をしていて、「即時関数」の便利さ、スマートさに気が付いた。

即時関数を使ってみた

今まで初回実行 & 使い回す場合は

const consoleHello = () => {
    console.log("hello")
}
consoleHello()

のように、書いていた。

が、即時関数を使えば、

const consoleHello = (() => {
    console.log("hello")
})()

のように書くことができる。

つまりこれで初回実行 & 関数としての使い回しが可能なのである。

なんで、いままで使ってこなかったのか。

使い回せない

と思ったけど、使い回せなかった。

まあ、即時って言ってるし...

つまりこういう使い方じゃない。

使い回すことはできなかったけど、中に関数を書くことはできた。

const consoleHello = (() => {
    console.log("hello")
    return {
        consoleGoodbye: () => {
            console.log('goodbye')
        }
    }
})()

こんな感じで関数を書いて、


<button onclick="consoleHello.consoleGoodbye()">JavaScriptを実行する</button>

で、実行できる。

うーん、なるほど。

つまりタイトルでスマートとか書いたけど、思っていたスマート差はなかった...気がする。

foreachの中で非同期が終わったら僕の肩を叩いてください

nove-b

まずはAPIで色々配列を取得しました。

そのuuidを使って取得したいAPIがあるので、foreachで回してデータを加工しようと思ったがうまくいきませんでした。

という事象にひどく悩まされた。

例えば、こんなコードを実行してみた。


const array = [1, 2, 3, 4, 5]
array.forEach(el => {
    window.setTimeout(() => {
        console.log(el)
    }, 1000)
});
console.log('forEach完了')

// forEach完了
// 1
// 2
// 3
// 4
// 5

上記のコードを実行すると、コメントアウトのようになる。

いや、違う違う、4が出た後に「forEach完了」が欲しい。

じゃあ、どうするか？

のように実行することでコメントアウトのように、つまり臨んだ結果になった。


const array_2 = [1, 2, 3, 4, 5]
var Promises = []

array_2.forEach(el => {
    Promises.push(
        new Promise((resolve) => {
            window.setTimeout(() => {
                console.log(el)
                resolve()
            }, 1000)
        })
    )
});

console.log('forEach完了！')

Promise.all(Promises)
    .then(() => {
        console.log('forEach(中の非同期処理も含めて)完了！')
    })

// 1
// 2
// 3
// 4
// 5
// forEach(中の非同期処理も含めて)完了！

react native でアプリを作る環境構築をやってみるよ⚡

nove-b

まずは、Node.js LTSをインストールする必要がある。

私はnode管理ツールにvoltaを使用しているので、

$ volta install node
success: installed and set node@16.16.0 (with npm@8.11.0) as default

↑を実行する。

Expo CLI のインストールする

npm install --global expo-cli

正常にインストールできたかは、

expo whoami

↑を実行する。

結果、

bash: expo: command not found

できていない...。

ログを辿る限り↓が怪しい。

Please ensure you have correct permissions to the Volta directory.

翻訳すると

Volta ディレクトリに対する正しい権限があることを確認してください。

とのこと...、なるほど🤔?

調べてみるとそそもそもvoltaを使う際は開発者モードを有効にする必要があるとのこと。

会社のPCはvoltaを入れる前に有効にしていたので気が付かなかった。

ということで有効にしたうえで再挑戦。

npm install --global expo-cli

やって、

expo whoami

やると

Not logged in, run expo login to authenticate

無事にインストールできた👍

公式ドキュメントを見ると

インストールが成功すると、まだ Expo アカウントにログインしていないため、「ログインしていません」というメッセージが表示されます。開始するのにアカウントは必要なく、プロジェクトをさらに進めることができます。

と書いてるので、今回は特にログインしない。

ログインするメリットはあるのだろうか...いったん気にしない。

ここまでが環境構築かしら。

次はサンプルアプリを作ってみる。

react native でサンプルアプリを立ち上げる🔭

nove-b

前回は環境構築したので、今回のゴールは簡単なアプリっぽいものを立ち上げるまでとする⚔️

sampleProjectという名前のサンプルプロジェクトを作成するために下記コマンドを叩く。

と、沢山の選択肢が示される。

$ expo init sampleProject
? Choose a template: » - Use arrow-keys. Return to submit.
----- Managed workflow ----- // Expo のサポート下で開発できる（簡単）
blank a minimal app as clean as an empty canvas // １番シンプルな状態で
blank (TypeScript) same as blank but with TypeScript configuration // １ページからスタート
> tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript // 複数の画面遷移ができる状態に
----- Bare workflow ----- // Expo なしでの開発に近く、カスタマイズ性は上がる（難しい）
minimal bare and minimal, just the essentials to get you started

今回は勉強なので、１番しっかりしてそうな「複数の画面遷移ができる状態に」を選択。

結果↓

$ expo init sampleProject
√ Choose a template: » tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
✔ Downloaded template.
📦 Using npm to install packages.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd sampleProject
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web

で、立ち上げてみる。

$ npm start
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> sampleproject@1.0.0 start
> expo start

Starting project at C:\Users\〇〇\Desktop\reactnative\sampleProject
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀▄█▀ █ ▄█ ▄▄▄▄▄ █
█ █ █ █▄ ▄███ █ █ █ █
█ █▄▄▄█ █ ▀█▀█ ▀ ██ █▄▄▄█ █
█▄▄▄▄▄▄▄█ ▀▄█ █ █▄█▄▄▄▄▄▄▄█
█ ▄█▄▀█▄ ██ ▀█▄▀▄▄▀ ▄▀▄▄▀█
█▄▄██▄▀▄ █▄▄██ ▄█▄▄▀ ▀▀█▄▄█
██▀ ▄▀█▄█▄█▀▀ ▄ █▀█ ▄█ ██▀█
█▄▀▄▀▄█▄ ▀▀▀█ ▀██ ▄▄ ▀▀██▄█
█▄▄▄██▄▄▄ ▄▄█▀▄ ▄▄▄ █ ▄ █
█ ▄▄▄▄▄ █▄ ▀▀██▄ █▄█ ▀▄ █
█ █ █ █▀ ▀▀▄ ▄▄ █▀█▄█
█ █▄▄▄█ █▀ █ █ █▄ ▄█▄█
█▄▄▄▄▄▄▄█▄█▄▄▄█▄█▄███▄▄█▄▄█

› Metro waiting on exp://192.168.3.9:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
Started Metro Bundler

↑のQRコードをスマホのExpoアプリでスキャンする。

すると、勝手に長いビルドが走り、

Android Bundling complete 43425ms
Android Running app on SH-M19

↑のようにスマホアプリが立ち上がる⚡

試しに、

<Text style={styles.title}>Tab One</Text>

↓に変換すると

<Text style={styles.title}>Hello android App</Text>

無事に文字が変更された。

簡単にアプリを立ち上げることができた💪

Google AdSense（アドセンス）で得たお金でGoogle広告を打ってみた

nove-b

アドセンスが支払い上限を超えた

遂に、アドセンスが支払い上限を超えた！

過去にやっていたブログが、実はまだウェブ世界の片隅で息をしている。

息をしていると言ってもあっぷあっぷで今にも溺れかけている。

それもそのはずで最終更新日が2020年8月15日である。

つまり2年近く制作者である私に放置されていた、だけでなく、存在を忘れていた。

クレジットカードにあるサーバー費を見て存在を思い出した次第で、なんなら使ってないのにお金を払っているといことにむかついたくらいである。

だってそうでしょう。

サーバーを借りたのが、2020年2月15日なので、今日まで計34,100の出費。

怒りとともに久しぶりに訪れたサイトはアドセンスの自動広告に埋もれている。

これはもしやと思い、アドセンスの管理画面に行くとなんと支払い上限を超えている。

単純な私はさっきまでの怒り、そして今まで払った金額を忘れ、8,000円という金額に小躍りした。

アフェリエイトの収入はあったが、アドセンスの収入は初めてである。

万歳三唱し、このお金を何に使うか考えた。

投資する

実はいま、ウェブアプリを作り運営している。

ユーザーは30人いるが、思った以上に伸びない。

思った以上にというより、全く伸びない。

自身が使いたいウェブアプリなのでなんとか、モチベーションを維持しているが、やっぱり多くの人に使って欲しい。

そこで、そのウェブアプリに投資することにした。

Google AdSenseで稼いだお金でGoogle広告を出すというGoogleの手駒になった私は、7,900円という少額の広告を出すことにした。

こんな少額でも

毎月 70～170 回の広告クリック数が見込めます

とのこと。

まあ、随分と差があるが...、まあやってみる。

経過

申請後すぐに、１時間くらいで審査がおり、無事広告が表示され始めたらしい。

携帯のアプリで見れるのが便利でよろしい。

3日間経過

インプレッションが1.16万回で、クリックが20回、

期待したほどじゃないけど、普段オーガニックサーチで人が来ないことを考えると嬉しい限り。

Googleからの最適化案で「画像追加」という案が出てきたので、横長と正方形の画像追加した。

ついでに広告の目的という感じで、広告で来たユーザーがどのくらい確率で指定した目的ページに到着したかを測れるので計測することに。

一応、目的のページはサービスの詳細ページに。

そして現時点で、ユーザー登録してくれたのは0人😭

検索ワードを考える

アプリでの検索が多いと思い、検索ワードにアプリを入れたが、たぶんアプリというワードで来た人はコンバージョンに結びつかない。

ということで、アプリを除外ワードにした。

さて現時点で、ユーザー登録してくれたのは0人😭

アカウントが強制停止されました

というメールが来て、驚愕する。

で、ダッシュボードに行くと確かに配信が停止されている。

どうやら重要なポリシーに違反しているとかなんとか。

良くわからないので、問い合わせてしてみる。

そのあと、支払いが滞っていることを知る。

クレジットを登録しているので、自動支払いだとばっかり思っていたのだが、どうやら支払いをする必要があるらしい。

ということで、支払いを済ませ、配信再開を待つ。

配信が再開された

支払いが滞りなく完了したことで、配信が再開された！

さて現時点で、ユーザー登録してくれたのは0人😭

投資結果

結果発表！

表示期間：9月26日～10月17日（21日間）

費用：5204円

クリック数：271

インプレッション数：9.52万

平均クリック単価：19円

―――――――――――――――――

単価が思った以上に安く、低金額なのに多くのひとが来てくれた。

が、結局ユーザー登録は０。

つまり、そもそも需要がない？

そういうことなのかしら。

そう考えると市場調査にも使えそうな気がする。

今回みたいにユーザー数、投稿数増やすのであれば、ココナラで投稿者募るほうが効率いいかもしれない。

大量のスパムコメントが来るようになったのでreCAPTCHAで対応する

nove-b

正直少しうれしい気持ちもある。

スパムコメントを貰ってうれしいだなんてどうかしてるぜ、って思うかもしれないけど、だれにも見られないよりはよっぽどましである、なんて思ってしまうのである。

がしかし、通知メールがたくさん来るのは許しがたいということで、reCAPTCHAを導入することにした。

その前に、実際のスパムコメントはこんな感じという風にお披露目しよう。

スパムコメントに荒らされたブログ記事

該当する記事がこちら↓

拝啓「葉桜の季節に君を想うということ」を読んでない人に告ぐ。この本はどんでん返しがある。

うーん、どういう理由でコメントしているのだろうか。

なんらかのスパムに違いないのだが、Good Siteと言われるとやっぱり少しうれしい、が排除していく。

reCAPTHA設定方法

ログイン＆登録

まずはreCAPTCHAにログインをして、サイトを登録する。

さほど難しい手順じゃないので省略。

ちなみにreCAPTHAのサイトはこちら↓

reCAPTHA

プラグインで実装

次にプラグインを使用する。

プラグインを使うのは制作者の恥だなんて思っている時期があったが、車輪の再開発する方がよっぽどダサいことに気が付いた。

とはいえ、兼ね合いもあるのでほどほどに。

今回はインストール数の多い「Invisible reCaptcha for WordPress」を使用することにした。

Invisible reCaptcha 設定を開き、「サイトキー」「シークレットキー」を入力。

保存をクリックした後、wordpressタブに移り、保護したい箇所をクリックする。

更新して右下にreCAPTHAアイコンが表示されていれば問題ない。

少し寂しいがこれでスパムコメントとおさらばすることができた、と思われる。

もし以降もスパムコメントが来るのであれば、報告、更新する。

エクセルのシート名を全件取得した

nove-b

How To Excelのシート名全件取得?

簡単だったので、書くことがない。

方法だけ書く。

ALT+F11

CTRL+Gキーを押して下部に「イミディエイト」ウィンドウを表示する

For Each i In ThisWorkbook.Sheets: debug.print i.name : next i

上記コマンドをコピペ。

はい、以上。

変更したファイルを最短でPushするGitコマンド

nove-b

最短プッシュ

git add .

でステージングにあげる。

git commit -m “コミットテキスト”

でコミットをする。

git push

で現在のブランチにPushできる。

毎回調べるのが面倒なのでVueのベースプロジェクトを作成する

nove-b

特にタイトル以上に説明することもないので、進めていく。

Viteを使用しVueをインストールする

下記コマンドでVite（ヴィート）を使用しVueをインストールすることができる。

$ npm create vite@latest
Need to install the following packages:
  create-vite@3.1.0
Ok to proceed? (y)
√ Project name: ... VueProjectBase
√ Package name: ... vue-project-base
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in C:\Users\username\Desktop\vite\VueProjectBase...

Done. Now run:

  cd VueProjectBase
  npm install
  npm run dev

今回はVueプロジェクなので、frameworkはVueを指定し、もう考えることなくTypeScriptを指定する。

で、上記のように指示に従いlocal serverを立ち上げることができればVueのインストールは完了。

nodeのバージョンを指定する

nodeのバージョン管理ツールにVolta使用しているので、Node エンジンの固定をする。

volta pin node
volta pin npm

上記を実行するとpackage.jsonに、

 "volta": {
"node": "16.18.0",
"npm": "8.19.2"
}

と記入され、Volta の設定が記述されたpackage.jsonをチームで共有することで、全員の Node や npm、Yarn のバージョンを揃えることができる。

Tailwind.cssを導入する

もうクラス名を考えたくないので、基本的にtailwindを使用している。

ということで本プロジェクトにデフォルトで入れる。

インストール方法は公式（Install Tailwind CSS with Vite）に従う。

Install Tailwind

下記コマンドを順に実行する。

やっていることは、tailwindのインストールと設定ファイルの作成。

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Configure your template paths

続いて、パスを構成する。

tailwind.config.cjsを、

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

上記のように修正。

Add the Tailwind directives to your CSS

最後に、./src/style.cssにtailwindを追加する。

@tailwind base;
@tailwind components;
@tailwind utilities;

これでtailwindが有効になった。

SVGをコンポーネント化する

SVGの取り扱いについても面倒なので、ライブラリに頼る。

いままではvue-svg-spriteを使っていたのだが、設定が面倒くさい＆今回はViteでプロジェクトを作成したので、vite-svg-loaderを入れる。

まあ、vue-svg-spriteはいろいろ設定できて便利だったけど、正直そこまでSVG使わないので。

install vite-svg-loader

npm install vite-svg-loader -D

上記のコマンドでインストールする。

続いて、設定していく。

vite.config.tsに

import svgLoader from 'vite-svg-loader'

上記をインポートし、pluginsの箇所に、

svgLoader()

を追加する。

結果的に、下記のようになっていれば問題ない。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from 'vite-svg-loader'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), svgLoader()]
})

これで設定は完了なので、あとは使用していく。

3つの使用方法

URL、文字列、コンポーネント、それぞれ３つの方法でインポートすることができる。

試しにやってみる。

下記のようにインポートして、

import iconUrl from "./assets/vue.svg?url";
import iconRow from "./assets/vue.svg?raw";
import IconComponent from "./assets/vue.svg?component";

下記のように使用する。

  <img :src="iconUrl" class="logo vue" alt="Vue logo" />
  <div v-html="iconRow"></div>
  <IconComponent />

デフォルトはコンポーネントなので、パラメーターが明示されていない時はコンポーネントで使用となる。

使用するのはこれくらいかしら。

コードのフォーマット系は別にまとめる。

作成したプロジェクトはこちら。

vue3のシンタックスシュガーについて調べてみた。

nove-b

ちなみに糖衣構文とは、プログラミング言語において、読み書きのしやすさのために導入される書き方とのことらしい。

Vue３のシンタックスシュガー

Viteで環境構築するとデフォルトで下記のような糖衣構文が使われている。

<script setup lang="ts">

どうやらVue3.2から使用できるようになったとのこと。

こちらを使えばreact Likeな書き方ができるっぽいので調べてみた。

まずVeturを無効に

まずvsCodeの拡張機能の話から入り申し訳ないが、Veturは糖衣構文に対応していないとのこと。

なのでVolarを使う必要がある。

これは公式もアナウンスしている。

setup関数がいらない

この構文を使えばsetup関数をわざわざ書く必要がない。

export default defineComponent({})

をする必要もなければ、

return {}

をする必要もないので、とんでもなくシンプルに書けるようになった。

というより、よりjavascriptに戻ってきた感がある。

Propsを使いたい

Propsはscript内で、

defineProps<Props>();

で使用できるようになる。

デフォルト値を定義するには、

withDefaults(defineProps<Props>(), {
  propsVal: "",
});

上記のように。

emitを使いたい

<script setup lang="ts">
type Emits {
  (e: "input", value: string): void;
  (e: "uppublished:value", value: string): void;
}


defineEmits<Emits>();


const handleInput = ({ target }: { target: HTMLInputElement }) => {
  emit("input", target.value);
  emit("uppublished:value", target.value);
};
</script>

上記のように使えばできる。

ライフサイクルはどうなったの？

従来通りに使い方で問題ない。

この記事はhttps://zenn.dev/watataku/articles/271d00d844c554の自分用メモなので、詳しくはhttps://zenn.dev/watataku/articles/271d00d844c554を参照してください。

Vue3のベースプロジェクトのコードを統一する

nove-b

ESLintを導入する

npm i -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

touch .eslintrc.yml

で設定ファイルを作成する。

作成した設定ファイルに、

env:
browser: true
es2021: true
extends:
- 'plugin:vue/vue3-recommended'
- 'eslint:recommended'
- '@vue/typescript/recommended'
parserOptions:
ecmaVersion: 12
plugins:
- vue
- '@typescript-eslint'
rules: {}

を記入する。

package.jsonに

"scripts": {
...
"lint": "eslint --fix src/*.{ts,vue} && eslint --fix src/**/*.{ts,vue}",
},

上記Scriptを追加する。

npm run lint

上記コマンドで無事にScriptが実行されるかを確認する。

環境構築時に作成されるvite-env.d.tsがESLintで引っかかるので、

touch .eslintignore

でESLlint除外設定ファイルを作成し、

vite-env.d.ts

と記入する。

Prettierを導入

npm i -D prettier @vue/eslint-config-prettier

で必要パッケージのインストールをする。

touch .prettierrc.yml

で、設定ファイルを作成し、設定を記入する。

設定の意味はこちらを参考に。

今回は下記を採用した。

printWidth: 80
tabWidth: 2
singleQuote: true
semi: false

最後にScriptを追加する。

"scripts": {
...
"format": "prettier -w src/*.{ts,vue} && prettier -w src/**/*.{ts,vue}",
}

Scriptを実行し動けば問題ない。

同時に実行する

ふたつそれぞれ実行するのは面倒なので、

"scripts": {
...
"fix": "npm run format && npm run lint"
}

上記を追記し、一気にふたつ動かすことができる。

無事に動いていれば成功。

Vue3のベースプロジェクトを作成したので、仕上げにhuskyを導入する

nove-b

コードフォーマット系のプラグインは以前の記事で入れたので、コマンドを実行すれば、コードが統一化される。

だがしかし、コマンドを実行することを忘れることがあるだろう。人間だもの。

ということでhuskyを導入し、コミット時にコマンドを走らせるようにする。

huskyとは

公式サイトのGoogle翻訳によると、

Husky はコミットなどを改善します 🐶 ワン!

コミットまたはプッシュするときに、コミットメッセージのリント、テストの実行、コードのリントなどに使用できます。Husky はすべての Git フックをサポートしています。

とのこと、ワン！

つまりgitに対する処理をフックとして何らかの処理を行うことができる。

今回はコード整形の処理を行っていく。

huskyをインストールする

基本的に公式を見れば問題ない。

てかそもそも公式を見れば大抵のことは問題ない。

npx husky-init && npm install

で、公式によると↑を実行すれば基本的にOKとのこと。

上記を実行するとrootに下記ファイルが作成される。

.husky\pre-commit

中身を見てみると

#!/usr/bin/env sh . "$(dirname -, "$0")/_/husky.sh"

npm test

と書かれているのでnpm testの箇所を自身の実行したいコマンドに変更する。

で、コミット時に実行したいコマンドが実行されていればそれで問題なく完了。

Local by FlywheelでID・PASSWORDを忘れてログインできなくなった時にすること

nove-b

Local by Flywheelにログインできなくなった

久々にテーマを更新しようとした時、Local by Flywheelで作った仮想Wordpress環境にログインできなくなった。

IDとPASSWORDの両方を思い出せない。

そこで解決方法を調べてみた。

再ログイン方法

Local by Flywheelではデフォルトで「dev-email@flywheel.local」というアドレスがあてがわれている。

そこでそれを使ってパスワードを再発行すればいい。

具体的な手順は

Local by FlywheelのADMINボタンからログイン画面行く。

ログイン画面にある「パスワードをお忘れですか ?」をクリックし、遷移先のユーザー名またはメールアドレスエリアに「dev-email@flywheel.local」を入力する。

Local by Flywheelに戻りTOOLSタブをクリックし「OPEN MAILHOG」でmainhogにアクセスする。

するとそこにメールが来ているので、あとはPassWordを変更するだけ。

ちなみにそこにIDも書かれているので、次からはIDでログインできるようになる。

Wordpressでブログ投稿が楽になる！アイキャッチ画像が動的に作成できるようにしてみた。

nove-b

アイキャッチ画像が面倒くさい

Wordpressでブログを投稿していると面倒なことがある。

それはアイキャッチ画像の設定である。

画像探すのも面倒だし、それなりの質が担保されていないとサイト全体がチープに見える。

だからこのブログでは統一感を出せるように、同じデザインの画像の上にテキストを載せるようにした。

で、アイキャッチ画像を作成するようページを作成した。

......、ことは以前ブログで書いた。

何が面倒って、アイキャッチ画像を設定するほど面倒なことはない

効率化したと書いたが、それすら面倒になった。

なってしまったのである。

そこで、タイトルを書いたらそれがそのままアイキャッチ画像になる。

そんな仕組みを作ってみた。

それがこれである。

さて、次はこれをプラグイン化してみようかと思っている。

Wordpressの公式プラグイン申請をしたら修正点が書かれたレビューメールがきた

nove-b

Incorrect Stable Tag

Readme で、「安定したタグ」が、メインのプラグインファイルに示されているプラグインのバージョンと一致しません。

とのこと。

Stable tag（安定したタグ）

そもそもこの項目を理解していなので調べてみると、どうやら作ったプラグインのバージョンらしい。

つまり最初は「1.0.0」とかになるのかしら。

自分の書いたReadmeを見ると「trunk」と書かれている。

trunkとはいったいなんなんだろうか、なぜ「trunk」とかいたのか自身に問いたい。

が、過去の自分に問うことなんてできやしないので、調べてみると、「trunk」とはSubversionで使用されるmainブランチのようなものらしい。

ちなみにSubversionはGitみたいなものらしい。

WordpressのプラグインはSubversionで管理するので、安定タグは「trunk」に合わせる必要がある。

みたいなことを湾曲理解し、「trunk」と書いたものだと思われる。

というわけで「trunk」は当然間違いで「1.0.0」に修正した。

Generic function/class/define/namespace names（一般的な関数/クラス/定義/名前空間名）

すべてのプラグインには、一意の関数名、名前空間、定義、およびクラス名が必要です。これにより、プラグインが他のプラグインやテーマと競合するのを防ぎます。プラグインを更新して、より一意で明確な名前を使用する必要があります。

そもそもフロントエンドエンジニアなのでPHPのことよくわからないっていう逃げは使えるだろうか。

いや、WordPressはフロントエンドエンジニアの主戦場だろ、なんて言われるかもしれない。

言われるかもしれないがわからないものはわからない。

この文章の意味がわからない。

ので、例によって調べてみた。

よくよく読んで見るとPHPは関係ないっぽい。

つまり、命名の際にPrefixをつけて他のプラグインとぶつからないようにしてくださいってことが言いたいのかしら。

ということで、Globalに近い変数名、関数名にPrefixを付与した。

動作確認

はい、修正点すべて直しました。

はい、ただその修正のおかげで動かなくなりました。

なんてことがないように再度動きの確認をする。

問題がないことを確認したので、GithubのURLとともに返信し、これでOK。

Subversion (SVN) を使用し承認されたWordpressプラグインをリリースしてみる

nove-b

ここではWordpressを中心に、Subversion (SVN) の話をするということを先に断っておく。

またWordpressのプラグインを承認されると届くメールにリンク集が張られているので、そちらを参照するといい気がする。

ちなみにそちらは下のリンクになる。

WordPress プラグインディレクトリで Subversion を使用する: https://developer.wordpress.org/plugins/wordpress-org/how-to-use-subversion/

この記事ではあくまでも上の断片情報となるので、ご注意を。

Subversion (SVN)とは

SVN (Subversion) は、Git に似たバージョン管理システムで、Wordpressのプラグインのリリースリポジトリになる。

つまり、下記のようになる。

SVN とプラグインディレクトリはリリースリポジトリです。Git とは異なり、パフォーマンスが低下する可能性があるため、すべての小さな変更をコミットしないでください。完成した変更のみを SVN リポジトリにプッシュしてください。

ちなみに読み方はサブバージョンとまま。

まずは使ってみる（習うより慣れろ）

まずはフォルダを作成する。

Subversion (SVN)はリリースブランチということなので、Gitと同じ場所に作らず、新規でフォルダを作成してみた。

svn on URL

URLはWordpressのプラグイン承認メールに記載されている。

上記コマンド実行でエラーが出た。

というのもSubversion (SVN)をインストールしてないからである。

Subversion (SVN)をインストール

ということでまずはSubversion (SVN)をインストールする必要がある。

https://subversion.apache.org/

上記サイトに行き、Binary Packages（https://subversion.apache.org/packages.html）をクリックする。

Find packages for your operating system:

↑で任意のシステムを選択する。

Windowsマシンを使っているのでWindowsを選択する。

いくつかクライアントの種類があるので、１つを選択する必要がある。

Subversionクライアントの比較：https://en.wikipedia.org/wiki/Comparison_of_Subversion_clients

調べてみるとどうもTortoiseSVN が有名そうなので、これにした。

TortoiseSVNを選択し、「 TortoiseSVN 1.14.5 - 64-bit」と「日本語パッケージ」をインストールした。

たぶんこれでインストールが完了した。

チェックアウトする

インストールが完了していれば、該当フォルダ（今回で言えば新規で作成したフォルダ）で右クリックをすると、TortoiseSVNというメニューが出るはずなのでサブメニューのチェックアウトを選択する。出てこない場合はその他のオプションを押すと出てくるかもしれない。

チェックアウトを選択するとURLを選択するポップアップ的なやつが出てくるので、wordpressから送られてきたURLを入力しチェックアウトする。

チェックアウトが成功すると、チェックアウトで指定したフォルダに、

/assets/
/tags/
/trunk/

上記ディレクトリが作成される。

SVN フォルダー

assetsフォルダは、スクリーンショット、ヘッダー画像、およびプラグインアイコンが存在する場所。

tagsフォルダはプラグインの/tagsバージョンを置く場所とのこと（いまいち不明なので要調査）。

trunkフォルダはプラグインコードが存在する場所。

つまりtrunkフォルダにプラグインのコードを送らしい。

ただ、メインのプラグインファイルをトランクのサブフォルダーに入れないでくださいとのことなので、そこは注意が必要。

チェックインする

trunkフォルダに作成したプラグインの中身を入れる。

その際、先ほどの注意の通りサブフォルダは作成せずにPHPファイルをそのまま入れる。

で、turnkフォルダを右クリック、TortoiseSVNメニューを開きcommitを選択。

するとCommit画面が開くので、commit文言を入れ、commitしたいフィルを選択する。

最後に、okボタンをクリックする。

するとwordpressのユーザー名、パスワードを求められるので、wordpress.orgに設定したそれらを記入する。

問題がなく完了すれば、SVN URLに行けばファイルがアップロードされていることを確認できる。

プラグインを作成しWordPress（ワードプレス）に申請する方法を申請しつつまとめてみた

nove-b

まず大前提としてWordpressの初心者である。

いや、初心者は言い過ぎだろうか、いや、そんなことない、初心者である。

自作テーマはいくつも作ってきたが、それをWordpressの公式テーマとして申請したこともなければ、プラグインの申請をしたこともない。

全て野良で行ってきた。

つまり、Wordpressに関してまったくの初心者であると言っても過言ではない。

そんな私が一からWordpressのプラグインを公式配布するまでの手順を調べてみたので、ここに残しておく。

大前提だが、プラグインは作っておく必要がある

言うまでもないと思うのだが、念には念を入れ言っておくと、プラグインは作った状態で以降進んでいく。

いやプラグインの作り方がわからないのだが、というのであればそれはまた別の記事にするので見てほしい。

ただ記事にしない可能性もあるので、気長に待つよりは他の人の作成方法を見たほうが得策かもしれない。

さて、つまりこの段階でプラグインが完成しているという前提で次の話にいく。

WordPress.orgのアカウントを作成する

これはプラグインの申請に必須なアカウントになるので、まず最初にやっておくことにする。

WordPress.org ログイン｜ WordPress.org 日本語

作成は上記リンクからできる。

何回か通信が遮断されてストレスを感じたけど、特に難しいことなくアカウントを作成できた。

しかしまったく管理するアカウントが増えて仕方ない。

が必要なのであればそれは仕方ない。

申請用にreadme.txtを準備する

アカウントができたら次に進む。

「readme.txt」に書かれた内容が、公式サイト個別プラグインのページや管理ページからのインストール画面に表示されるらしい。

申請に必須かどうかわからないけど、とりあえず埋めることのできる箇所は埋めてみた。

書き方に関しては「Plugin Readme Generator」なるものがあったので、そちらを利用した。

でき上がったのが、

=== Create Eye Catch For Classic ===
Contributors: nove2b
Tags: eyecatch,ogp

You can read the title of the entered blog article and automatically generate a featured image.

こんな感じ。

まあ、これじゃインストールされないだろうけれど、とりあえず今できる最低限の情報は入力した。

後は無事に申請が通った後に拡張していくことにする。

ちなみに英語はできないので、Google翻訳のお世話になった。

Readme Validatorにかけ、readme.txtのバリデーションをする

Readme Validator

上記公式のバリデーションに書けることで「readme.txt」の記入漏れ、記載ミスを見つけることができる。

早速、バリデーションをすると、警告が表示された。

曰く、

Tested up to フィールドを入力してください。 Stable tag フィールドがありません。ヒント: /trunk/ を安定版として扱う場合は Stable tag: trunk と入力してください。

とのこと。

つまりテストしたWordpressのバージョン、そして作成したプラグインのバージョンが漏れているとのこと。

上記をもとに修正し、ついでに注意の指示に従いいくつか追記した。

そのうえで再検証。

=== Create Eye Catch For Classic ===
Contributors: nove2b
Tags: eyecatch,ogp
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 7.41
Stable tag: trunk

You can read the title of the entered blog article and automatically generate a featured image.

下記、数点の注意が出るだけになった。

== Frequently Asked Questions == セクションが見つかりません == Changelog == セクションが見つかりません == Upgrade Notice == セクションが見つかりません == Screenshots == セクションが見つかりません寄付リンクは見つかりませんでした

ここら辺はまだ潰せそうにないので、現時点では無視をする。

ちなみにこの記述の仕方だと、「Stable tag: trunk」の箇所が間違えている。

そのあたりはレビューメールがきたという記事に記載した。

WordPressの公式プラグイン申請をしたら修正点が書かれたレビューメールがきた

申請してみる

やっとここで申請することができる。

この時点で満足のいくプラグインにしておく必要が当然ある。

満足が行くプラグインであれば、Add your Plugin｜ WordPress.org 日本語かたプラグインを申請する。

対象のデータをZip化し、アップロードするだけで申請は完了。

なんて簡単と思ったらエラーが出た。

エラー: ライセンスが定義されていません。

プラグインでライセンスが宣言されていません。GPLv2 (またはそれ以降) 互換のライセンスを選び、readme.txt を更新してください。

どうやらライセンスは必須らしい。

ライセンスを追加してして再申請をした結果、

Thank you for uploading...

という文言が表示されていれば申請できているらしい。

数分後に、

[WordPress プラグインディレクトリ] プラグイン申請の成功

というメールが届き、無事に申請が完了した。

審査結果はメールで届くとのこと。

ちなみに申請時には「現在30件のプラグインがレビュー待ち中です。」とのことだったので、ただただ待つ。

WordPress Plugin Directory] Review in Progress:Plugin Name

申請した次の日には上記タイトルのメールがきた。

本文曰く、

There are issues with your plugin code preventing it from being approved immediately. We have pended your submission in order to help you correct all issues so that it may be approved and published.

つまり、

プラグインコードに問題があり、すぐに承認されません。すべての問題を修正して承認および公開できるようにするため、送信を保留しました。

とのこと。

全て英文だし、何が何やらといった具合だが、しっかり読むと、直すべきところを書いてくれている。

すごい親切、いたせりつくせり。

書かれていた修正点は別の記事にした。

WordPressの公式プラグイン申請をしたら修正点が書かれたレビューメールがきた

で、これらの修正点に対応したうえで、再度審査して欲しいという旨をGoogle翻訳を駆使し返信した。

そしてまた返事を待つことに。

Your review has been successfully completed.

待つこと3日で、審査に通ったメールが届いた。

曰く、

レビューは正常に完了しました。 SVN リポジトリへのアクセス方法の詳細は、24 時間以内に、プラグインを送信したアドレスに電子メールで送信されます。

とのこと。

また、

レビューが成功しても、プラグインにすべてのセキュリティ問題やガイドライン違反がないことを保証するものではないことに注意してください。私たちは、あなたと同じように人間です。人間は間違いを犯します。

つまり、自分のコードには自分で責任を持てということらしい。

まあ、それは間違いない。

ただ、SVN リポジトリへのアクセス方法の詳細のメールが届かない。

24時間以内ということなのでもうしばらく待つ。

[WordPress Plugin Directory] PluginName has been approved!

待つこと12時間、上記タイトルのメールが届いた。

これでやっと、承認ということらしい。

アカウントへのアクセスが有効になったら、任意の SVN クライアントを使用してコードをアップロードできます。 SVN (またはプラグインディレクトリ) を初めて使用する場合は、このメールのすべてのリンクを確認してください。

ということなので、要はSubversion (SVN)のリポジトリが用意されたので、そちらを使ってアップロードしてねということ。

ちなみにこのSubversion (SVN) は申請時に初めて知って、これが原因で審査に引っかかったことは別記事にした。

WordPressの公式プラグイン申請をしたら修正点が書かれたレビューメールがきた

またこれにコミットする方法を調べないといけない。

Subversion を使用しプラグインをアップロードする

こちらは長くなるので別記事にまとめた。

Subversion (SVN) を使用し承認されたWordPressプラグインをリリースしてみる

そこまで悩むこともなかったけど、Subversion (SVN) のインストールが一番面倒だったかもしれない。

作成したプラグイン「Create Eye Catch For Classic」

作成したプラグインはこちら。

Create Eye Catch For Classic

こんな感じのアイキャッチ画像をタイトルを入れるだけで自動で作成してくれるプラグイン。

もしよかったら使ってみてください。

プラグインを作成した感想

今後のことを考え、WordPressの記事をGitで管理しGithubに一元管理することにした

nove-b

なぜGit管理をするのか

過去にいくつものブログをCloseさせ、その記事データは残ってない。なんでエクスポートしなかったんだろうという思いがたまに頭をもたげる。そしてまた新しいブログをOpenし、Closeする時、エクスポートせずにサーバーを解約してしまうのである。

エクスポートすればいいとわかっているのだが、ブログをCloseさせる時はもうブログなんてやることないと思っている。そう思っているので、エクスポートせずに解約する。そしてまた懲りずにブログを始め、後悔するということを繰り返してきた。

そこで記事をGitで管理しGithubに一元管理しようと思った。

Gitで管理しGithubにあげるメリット

メリットはいくつもある。

マークダウンで書ける
どこでも書ける
気に入っているエディタで書ける
まるで仕事しているかのように会社でこっそりブログを書ける

特に最後のメリットはでかい。というのもこのブログは主に技術を扱っている。そして新しい技術を得るのは主に仕事中のことである。家に帰って書こうとしても忘れるし、該当のコードがわからなかったりする。だからこそ、学んだ瞬間に会社で書けるというメリットはでかい。

そういうわけで、記事を資産化していく。

Gitブランチで作業中に他ブランチをmergeしたくなったけど、現在の作業をまだmergeしたくない時の対処方法はstashする

nove-b

状況

修正中に、どうしても取り込みたいブランチがあったけど、まだCommitはしたくない。

対応方法

stash→merge→apply

git stash save で一時的に保存する

git stash save

上記だと何ためにstashするのかわからなくなるのでコメントを付けることが推奨される。

git stash save "任意のメッセージ"

実行すると、変更履歴から消えるが、新規作成したファイルは削除されないので、変更履歴に残り続ける。
なお、残り続けているファイルは退避できていないということなので、安易に消さないようにした方がいい。

※stashは未追跡のファイルを退避してくれない。未追跡のファイルも含めたいときは-uオプションを付ける必要がある。

git stash list で保存できているか確認する

git stash list
// => 「stash@{番号}」: On 「ブランチ名」: 「メッセージ」

上記のように表示できていれば問題ない。

作業を行う

ここで本来やりたかったことに着手する。
今回であれば取り込みたいブランチをマージする。

git stash apply で保存データを復旧する

git stash apply 復旧したいstash名

名前を省略すると、一番最新のstashを復旧されるので、最新のものを復旧する際は名前なしで問題ない。

復旧できたことが確認できればOK。

git stash drop で保存データを削除する

 git stash drop

わからなくならないように適宜、削除する。

Angularでコンポーネントを再レンダリングする

nove-b

コンポーネントを再レンダリングさせたい

色々な状況が複雑に絡み合っていた。ある処理を行ったあと、初期表示に戻したいという要件があり、それじゃあということで、表示用にデータを作り直したりと色々手を尽くしたが、前述したように色々な状況が複雑に絡み合っていせいで、どうにもできなかった。

そこで、いっそコンポーネントをまるっと再レンダリングしちゃえ、ということにした。

で、それを実現するのが下記コード。

constructor(private router: Router) {}
~
this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this.router.navigate(['Your actualComponent']);
});

行われていることは、１度RefreshComponentというページに飛び、Your actualComponentに戻ってくるという処理。ただユーザーはそれに気が付かない。つまりハック的な対処方法なので、使うのは自己責任で。

Javascriptで任意の値を持つn個の配列を作成する

nove-b

ネットで見つけた方法は

どうやら下記コードで目的は達成できるらしい。

 new Array(10).fill(0).map(() => 0)
 // => [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

いったい、どうしてこうなるのか。

何が行われているのか？

new Array()

かっこの中に入れたLength分の配列を作成する。

つまりnew Array(10)であれば10個の値を含む配列を作成してくれる。

ちなみに値はundefinedになる

[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

fill()

fill() メソッドは、開始位置（既定値は 0）から終了位置（既定値は array.length）までのすべての要素を、静的な値に変更した配列を返します。

つまり先ほど作った10個のundefinedを持つ配列のundefinedを0に変更してくれるということ？

console.log(new Array(10).fill(0))
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

ということらしい。

この時点でタイトル（n個の任意の値を持つ配列を作成する）という目的は達成されている。

いったいmap()は何をしているのか？

map()

このコードでいえばmap()は配列の個数分取り出して0を入れるという、まったく生産性のない動きをしている。

つまり本タイトルという目的を達成するためであれば、不要以外の何物でもない。

n個の任意の値を持つ配列を作成する方法

ということで結論は、

console.log(new Array(10).fill(0))
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

に落ち着いた。

map()が必要な場合は？

ちなみにmap()が必要な時は、必要とする値がオブジェクトの時らしい。

javascript fillでオブジェクトの配列を作成した際の注意点

上に詳しく説明されているけど、どうやら指定した個数分参照渡しされているということ。つまり、3つの配列を作り、その2番目のkeyを変更しようとしたところ、すべてのkeyが変更される結果になる。

const v = new Array(3).fill({hello: 'Hello', world:'World'})
v[2].hello = 'goodbye'
console.log(v)
// [
//     {
//         "hello": "goodbye",
//         "world": "World"
//     },
//     {
//         "hello": "goodbye",
//         "world": "World"
//     },
//     {
//         "hello": "goodbye",
//         "world": "World"
//     }
// ]

そのため、mapで入れなおす必要がある。

念のためシンプルな個数分の配列で行ったけど、問題なかった。

const v = new Array(10).fill(0)
v[2] = 2
console.log(v)
// (10) [0, 0, 2, 0, 0, 0, 0, 0, 0, 0]

オブジェクトの時だけことは起こるらしい。

Dockerに座学でざっくり入門してみる

nove-b

※この記事を書いているのはフロントエンドを専門にしているので、バックエンド側の「いろは」は何も知りません。
フロント専がDockerとはいったいと頭を抱えつつ、ざっくり入門する記事になります。

Dockerに入門、重い腰を上げる理由

実はというほどでもないが、nestJsもコマンド１つでローカルホストを立ち上げることができるし、公式ドキュメントもローカルホストで書かれている。つまりあえてDockerに入門する必要もないのだが、開発の参考にする記事を調べると、ことごとくDockerで作業しているし、どうやらデプロイもDockerのファイルを使って行っているようである。であれば、こちらも開発環境を合わせた方が開発がよっぽど楽になるので、この機会に入門しちゃうことにした。

なぜDockerを使うのか

と聞くと、「環境を揃えたい」という回答が良く聞こえてくるが、いまいちピンと来てない。そもそもフロントエンドであればPackage.jsonで環境を揃えられるんじゃないのと言いたくなる。けどそれを言うと無知と思われるのも嫌なので、調べてみることにした。

NodeとOSを揃えられる

Nodeのバージョンを共有できる

調べてみると、Nodeのバージョンアップを揃えられるというのが強みらしい。
これは確かに納得できる。
今までのプロジェクトでもNodeのバージョンが揃ってなくて苦労したことは良くある。Package.jsonの方で依存ライブラリを管理してもその大本であるNodeのバージョンが管理されていなければ意味がない。まあ、Voltaを使ってPackage.jsonにNodeのバージョンをピン止めすれば同じと思ったけど、そもそも皆が皆NodeのパッケージマネージャにVoltaを使っているわけじゃないので、そううまくはいかない。ただそれで言うとDockerもそうなので、納得できるけどこのメリットを享受するためにDockerを入れようとは正直思わない。

Volta - The Hassle-Free JavaScript Tool Manager

OSを揃えられる

どうやらイメージという設定ファイルでOSを指定できるらしい。
つまり今までOSごとに環境構築で苦労することがあったが、それがなくなるらしい。というのもDockerを使うことで、使っているOSに環境構築するというわけではなく、Docker上のコンテナに環境を構築するので、OSに依存しなくなるということらしい。

実際に使うことでメリットを享受するしかない

なんか色々な記事を見てみたが、メリットと感じるのは上に上げた２つだけだった。導入手順を考えるとあえて使う気にもならないが、社会的にDockerを使おう的な風潮を感じるので、今回の個人開発で導入してみて、所感を述べようと思う。使わずに批判するのは一番よくないって誰かが言っていた気がするし。あとざっと調べてみた感じ、

デプロイが簡単にできる？
環境をそのまま渡すことができるので、譲渡しやすい？

みたいなメリットがあるのかなと感じた。とりあえず、物は試しで手を動かして入門してみる。

windows11にDockerをインストールする

nove-b

Windows 11 HomeにDockerをインストールする

先人の知恵を借り、やってみる。

WSL2/Linuxをインストールする

Dockerを起動させるにはLinux OSが必要になる。そこで「Windows Subsystem for Linux」、通称WSLをインストールする必要がある。

Linux 用 Windows サブシステムを使用すると、開発者は、従来の仮想マシンまたはデュアルブートセットアップのオーバーヘッドなしで、ほとんどのコマンドラインツール、ユーティリティ、アプリケーションを含む GNU/Linux 環境を変更せずそのまま Windows 上で直接実行できます。

ということでインストールしてみる。powerShellを管理者モードで開き、Cドライブ直下で下記コマンドを実行する。

wsl --install
インストール中: 仮想マシン プラットフォーム
仮想マシン プラットフォーム はインストールされました。
インストール中: Linux 用 Windows サブシステム
Linux 用 Windows サブシステム はインストールされました。
インストール中: Ubuntu
Ubuntu はインストールされました。
要求された操作は正常に終了しました。変更を有効にするには、システムを再起動する必要があります。

無事にインストールできたっぽいので指示に従い再起動する。再起動するとUbuntu の初期設定（ユーザ名とパスワードの設定）が始まるので、ユーザー名とパスワードを設定する。

Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: nove-b
New password:
Retype new password:
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 22.04.1 LTS (GNU/Linux 5.15.79.1-microsoft-standard-WSL2 x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

This message is shown once a day. To disable it please create the
/home/nove-b/.hushlogin file.
nove-b@DESKTOP-GCVP4M3:~$

これでWSLのインストールは完了。

\\wsl.localhost\Ubuntu

上記パスでUbuntuフォルダにアクセスできる。

Docker Desktop for Windowsをインストールする

Dockerの公式サイトに行き、Download Docker Desktopをクリックし、Docker Desktop for Windowsをインストールする。

インストール完了後、インストーラーをクリックしインストールをすすめる。ショートカットを作るか聞かれるので、好きなほうを選択しokをクリックする。

これでインストール完了。

DockerでnextJsとnestJsの環境構築をする

nove-b

NextJsとNestJsをDockerで立ち上げる

あくまでもDockerのハンズオンなので別に何でもいいのだが、どうせならということで、次に考えている構成でやってみることにした。

ちなみに【環境構築】NestJS+Next.js+TypeScript+Dockerの環境構築ハンズオンに倣うようにすすめていくので、こちらの記事を参考にした方がいいかもしれない。

docker-compose.ymlファイルを作成する

プロジェクトのルートでdocker-compose.ymlファイルを作成する。そのために下記コマンドを実行する。

touch docker-compose.yml

実行後、docker-compose.ymlという名前の空ファイルができていることを確認することができる。

このファイルにDockerの設定を書いていく。

version: "3.7"

services:
  backend:
    build:
      context: .
      dockerfile: ./docker/backend/Dockerfile
    tty: true
    volumes:
      - type: bind
        source: ./backend
        target: /api
    ports:
      , "3000:3000"

設定内容は把握できていないが、これでバックエンドのdocker-compose.ymlが作成できたらしい。

まずはバックエンドのみで起動するためフロントエンドの設定は書かない。

バックエンドの設定

それではバックエンド、つまりNestJs側の設定をすすめていく。

Dockerファイルの作成

設定ファイルに書いた

dockerfile: ./docker/backend/Dockerfile

で指示したディレクトリを作成する。

mkdir docker
cd docker
mkdir backend

作成したディレクトリにDockerfileを作成する。

cd backend
touch Dockerfile

作成が完了したら以下の内容を記述する。

FROM node:16.18.0
WORKDIR /api
CMD ["npm", "run", "start"]

ちなみにnodeのバージョンは参考にした記事の通りではなく、なんとなく現在他案件で使用しているバージョンにしてみた。

↓のちに下記に変更した（よくわからないけど）。

FROM node:16-alpine3.16

これでDocker側の設定は完了。

NestJsをインストールする

次にNestJsをインストールする。

cd ../..

プロジェクトのルートに戻り、nest newを実行※１する。

nest new
? What name would you like to use for the new project? backend
? Which package manager would you ❤️  to use? npm

上記のように2つ聞かれるので、1つ目はbackend、2つ目は任意のpackage managerを選択する。

Thanks for installing Nest 🙏

が表示されればインストール完了。

※1 @nestjs/cliをインストールしたことない人、つまり初めての人はnest new の前に下記コマンドを実行する。

npm i -g @nestjs/cli

バックエンドを起動する

まずはDockerを起動する。

docker compose up -d

色々処理が走り終わった後にhttp://localhost:3000/にアクセスできれば起動が成功している。

フロントエンドの作成

次にフロントエンドの作成をするので、いったんDockerは落としておく。

docker compose down

Dockerファイルの作成

cd docker
mkdir frontend
cd frontend
touch Dockerfile

上記コマンドで作成したDockerfileに以下を追記する

FROM node:16.18.0
EXPOSE 3333
WORKDIR /app

RUN apk update && \
    apk upgrade

CMD ["npm", "run", "dev"]

docker-compose.ymlファイルに追記

バックエンドの環境構築の際に書いたdocker-compose.ymlにフロントエンドの設定を追記する。

version: "3.7"

services:
  backend:
    build:
      context: .
      dockerfile: ./docker/backend/Dockerfile
    tty: true
    volumes:
      - type: bind
        source: ./backend
        target: /api
    ports:
      , "3000:3000"

  // 以下、追記箇所
  frontend:
    build:
      context: .
      dockerfile: ./docker/frontend/Dockerfile
    tty: true
    volumes:
      - type: bind
        source: ./frontend
        target: /app
    ports:
      , "3333:3333"

NextJsをインストールする

プロジェクトのルートに戻りNextJsをインストールする。

$ npx create-next-app@latest --typescript
Need to install the following packages:
  create-next-app@13.1.2
Ok to proceed? (y) y
√ What is your project named? ... frontend
√ Would you like to use ESLint with this project? ... No / Yes
√ Would you like to use `src/` directory with this project? ... No / Yes
√ Would you like to use experimental `app/` directory with this project? ... No / Yes

なんか今まで聞かれたことない質問をされたが（Next13のせいか）、今回の肝となるのはProject Nameでfrontendと答えればいい。

...全部Yesにするべきだったかもしれない。が、今回は気にすることないのでそのまま進める。

次にNextのpackage.jsonのポートを3333に変更する。

"scripts": {
    "dev": "next -p 3333",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
}

サーバーを起動する

docker compose up -d

コケたので調べたら

// 以下、追記箇所

が原因だったので、削除で再実行。

またエラーが出たので、調査すると

RUN apk update && \
    apk upgrade

どうやらフロントのDockerfileでエラーが出ていたので、上記該当行削除して再実行したら無事にDockerが起動した。

ちなみに

RUN apk update && apk upgrade --no-cache

でも動作した。ただこのコマンド何をしているかはわからない。

http://localhost:3333/にアクセスするとブラウザでも動いていることが確認できた。

とりあえずスタートラインに立てた。

立って気づいたけど、ホットリロードが効かない。これはまた別で調査する。今回はともかくDockerで基本的な環境構築まで。

Dockerで立ち上げたNextJs・NestJsのプロジェクトでホットリロードを可能にする

nove-b

Dockerで環境構築したファイルを変更してもブラウザで表示が変更されない

そもそも作成した環境は下記記事の通り。

DockerでnextJsとnestJsの環境構築をする

で、色々検証してみた結果、Dockerを止め、再度立ち上げれば更新されているということが分かった。原因が分かった、これで一件落着とはならない。何でも不便すぎる。

そこでホットリロードが効くように調査してみた。

結論（いったん諦める）

フロントエンドに限り、ブラウザを更新すれば、表示が更新されることは確認できた。

フロントエンド（NextJs）

フロントエンド（NextJs）側の設定は、docker-compose.ymlに下記変更を加えたらホットリロードが効くようになった。

  frontend:
    build:
      context: .
      dockerfile: ./docker/frontend/Dockerfile
    tty: true
    volumes:
      - type: bind
        source: ./frontend
        target: /app
    + environment:
    +  - WATCHPACK_POLLING=true
    ports:
      , "3333:3333"

...ただめちゃくちゃ重い。

何回かやっていると、なんかうまくいかなくなったので、 上記の追加分を削除し、下記で対応した。

next.config.jsに下記を追加。

  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    }
    return config
  },

これで同じく重いけど、リロードに対応した。

ホットリロードにも対応しているようだけど、Dockerが重すぎてわからない。

バックエンド（NestJs）

NestJsを色々調べてもよくわかなかったので、Dockerについて調べると、下記記事を見つけた。

Dockerを使っていてhot reload系が効かなかったとき

この１つ目「wsl上にファイルを置いていない」が該当したので、確認してみることにした。

が、これがなかなか厄介で大変な気がする。

もっと簡単そうなのが、

env CHOKIDAR_USEPOLLING=true

をDockerfileに記述する。

あるいは、

environment:
  - CHOKIDAR_USEPOLLING=true

をdocker-compose.ymlに追記するというもの。

なんか採用しなかったけど、frontendでも同じようなことをしている。

とりあえずdocker-compose.ymlで試してみることにした。

が、反応しない。

仕方ないので、Dockerfileにもやってみる。

こちらも反応しない。

つまり、「wsl上にファイルを置く」必要があるのか。

いったん保留にする。

DockerプロジェクトをWSL上に置き、ホットリロード問題解決を試みる

nove-b

Dockerで立ち上げたサーバーが遅すぎる。

「はい、サーバーが立ち上がるまで、5分かかりました」

なんていう先生の声が脳内でリフレインする。

docker compose up -d

コマンドを打った後の話である。

何が言いたいかというと、Dockerで立ち上げたサーバーが以上に重い。

立ち上げ後、ブラウザが表示されるまで5分以上かかり、更新をクリック後、更新がかかるまで5分以上かかる。

これじゃ、なかなか作業が進まない。

それに前述、前回書いたようにホットリロードがかからないし、そもそも遅すぎてホットリロードが正常に機能しているかがわからない。

どう解決するか

じゃあ、どうするべきか。

うまくいくかはわからないが、これもまた前回の記事で書いたように、「wsl上にファイルを置く」ということで少なくともホットリロードは解決するかもしれない。

またDockerもWSL上で動かしているので、開発環境のスピードも上がるかもしれない。

というのも下記のような内容のコメントを見つけた。

特殊な理由がない限り、複数のオペレーティングシステム間でファイルを操作しないことをお勧めします。 Linux コマンドライン (Ubuntu、OpenSUSE など) で作業している場合、最速のパフォーマンス速度を実現するには、ファイルを WSL ファイルシステムに格納します。 Microsoft公式 - OS ファイルシステム間でのパフォーマンスということでやってみる。

ファイルを WSL ファイルシステムに格納する

まずはUbuntuを開く。そうするとターミナルが開くので

pwd

コマンドで自身がどこにいるかを確認する。たぶん/home/UserNameにいる。

次にそこにプロジェクトフォルダを作成する。

mkdir projectName

作成したプロジェクトに移動し、

cd projectName

VsCodeを開く。

code .

そこでプロジェクトを作成する。今回は「DockerでnextJsとnestJsの環境構築をする」で作成したものと同じものを作成した。

次に拡張機能WSLを取ると、リモート接続してくれる。

そこでDockerを起動すれば上手く行くと思うが、起動後すぐに落ちる。

The command 'docker' could not be found in this WSL 2 distro.
We recommend to activate the WSL integration in Docker Desktop settings.

というエラー出ていること確認した。

エラー文通りに実行する。

Docker Desktop >Resources >WSL integrationでUbuntuをonにする。

これによりDockerコマンドは使えるようになったが、まだ起動しない。

よくわからないのでdocker compose upを実行（-d）を取って実行すると、エラーログなようなものが出てきた。

$ docker compose up
[+] Running 2/0
 ⠿ Container nextnestdockerbase-frontend-1  Created                                                                                         0.0s
 ⠿ Container nextnestdockerbase-backend-1   Created                                                                                         0.0s
Attaching to nextnestdockerbase-backend-1, nextnestdockerbase-frontend-1
nextnestdockerbase-backend-1   |
nextnestdockerbase-backend-1   | > backend@0.0.1 start:dev
nextnestdockerbase-backend-1   | > nest start --watch
nextnestdockerbase-backend-1   |
nextnestdockerbase-backend-1   | sh: 1: nest: Permission denied
nextnestdockerbase-frontend-1  |
nextnestdockerbase-frontend-1  | > frontend@0.1.0 dev
nextnestdockerbase-frontend-1  | > next -p 3333
nextnestdockerbase-frontend-1  |
nextnestdockerbase-frontend-1  | sh: 1: next: Permission denied
nextnestdockerbase-backend-1 exited with code 126
nextnestdockerbase-frontend-1 exited with code 126

ちなみに-dは

コンテナはバックグランドで起動し、そのまま実行し続けます。

とのことらしい。

......解決できない。環境構築の時間をかけすぎるのも問題なので、ここでいったんDockerと仲違いすることにした。

買った時の値段以上の価値を発揮しているもの(ambie、Kindle、gram、Palmo、STANLEY、アルト)

nove-b

個人的にコスパ最強のものたち

買った時の値段以上の価値を発揮しているものをまとめみた。
たぶん来世でも購入する気がする。

ambie sound earcuffs （アンビーサウンドイヤカフ） AM-TW01

イヤーカフ型のワイヤレスイヤホンで外音取り込みに特化している。
０歳児の育児中や、車の運転、散歩の時に重宝している。
着せ替えも可能で様々な色のカバーが出ている。
が、完全ワイヤレスが出た時の限定カラーを買えたのが自慢なので、着せ替えするつもりはない。

あと仕事中も常に装着し、音楽を聞いている。
呼びかけられれもすぐに気がつくので、なんの問題もない。

外音取り込み特化ということで、うるさい場所だと音量をあげないと聞こえなくなるのがデメリットだが、そこはトレードオフと割り切っている。

つけていることに違和感がなさ過ぎて、音楽聞きつつお風呂に入ったのはご愛敬。

買うべき理由

耳の中が息苦しくない
耳に悪くなさそうに気がしている
会話しながらも音楽を聞ける
散歩中に後ろから迫る車に気が付くことができる
着せ替え可能なのでその日の気分でイヤホンの色を替えられる

改善点

音漏れの不安が付きまとう
充電がケースなしで10時間は持ってほしい（現状実働、4時間～6時間）
マルチペアリングに対応してほしい

ambie sound earcuffs （アンビーサウンドイヤカフ） AM-TW01

Kindle Paperwhite

電子書籍の代表格。
正直、紙の本には戻れないし、紙の本しか出さない作家の本は読めなくなってしまった。
やっぱり紙は場所を取る。
家の本棚も蒐集癖を誘うシリーズや全集、過去に買った紙の本限定の作家を除き、ブックオフに売ってしまった。

そして紙の本しか出さない作家に対し、キンドルリクエストを送りまくってる。

最近は全集もKindleで買ってる。

あと何よりキンドルアンリミテッドが便利すぎる。
月額980円で対象の本を読み放題。
だいたい月に15冊の文庫本を読むので、980 - 15 * 500 で6520円お得に。

まあ時期によるのだが、大抵は初回2か月99円、あるいは初月に限り無料なので、試しに入会し、その2か月で読みまくるのもありだと思う。

買うべき理由

本を複数冊持ち歩く必要がない
どこでもいつでも本を買い、読み始めることが可能
部屋が片付く

改善点

読めない本がある
漫画とか雑誌は読みにくい
アマゾンアカウントが失われたらデータが消える

Kindle Paperwhite

LG ノートパソコン gram 999g/14インチ

軽いし、かっこいいノートパソコン。
4年間、ほぼ毎日使っている。
このパソコンで沢山のwebサービスを作り、ブログを作り、仕事をした。

ただこれは他のパソコンでも別に良かった気がしているので、次もこのパソコンを買うかと言うと正直微妙。ただ1キロを切るパソコンの持ち運びの体験は初めてだったので、4年前に衝撃を受けた。

あと当時CMの水島ヒロがかっこよかった。

今は軽いパソコンはたくさんあるので、積極的におすすめはしない。ただ間違いはないと思われる。

そういうことなので「買うべき理由」、「改善点」省略する。

LG ノートパソコン gram 999g/14インチ

Palmo for Kindle Paperwhite

これはKindle Paperwhiteの保護カバー。
保護カバーと言っているが写真を見てわかるように、角だけが保護されている。
なので包み込むような安心感はないが、なにより持ちやすい。

ゴムの中に指を入れることで、片手で安心して本を読める。

色々試した結果、これより良いカバーはないという結論に至った。

買うべき理由

軽い
持ちやすい
これより良いカバーが存在しない

改善点

-使用することで十分ペイできるが、見た目のわりに少々値段が高い

Palmo for Kindle Paperwhite

STANLEY(スタンレー) 真空スリムクエンチャー

ストロー付きのタンブラー。
家でアイスコーヒーを入れ会社で愛用している。

保冷性に優れ、帰宅時にも氷が解けていない。

通勤時の車でも飲むのでストロー付きというのが本当にありがたい。

ストローがストロー穴とほぼ同じ大きさなので倒してもこぼれない。
PC使用時も安心してコーヒーが飲める優れもの。

買うべき理由

保冷性、保温性に優れている
冷たい飲み物は付属のストローで飲める
蓋つきなので零れない

改善点

出先で冷たい物を飲み終えた後、温かいものを入れた時にストローの取扱いに困る
ストローを洗うのが面倒に感じる

STANLEY(スタンレー) 真空スリムクエンチャー

アルト

SUZUKIの軽自動車、アルト。
これも別におすすめはしないけど、個人的にコスパの高い買い物だった。

通勤時、公共交通機関を使うと1時間30分かかるが、車だと45分くらいでつく。
で、会社が駐車場を用意してくれるというので、それじゃあ、車を買おうということになった。

通勤用なので安いものでいいけど、中古は詳しくないので避けたい。ということで新古車で探すことに。そこでであったのが50万のアルト。もちろん乗り出しはもっと費用がかかったけど、70万に届かないくらいで購入できた。

ナビもオーディオもなしで、カメラだけつけた。

ナビはGoogle mapでいいしオーディオだってambieでいい。

もう1年経つけど時短、ストレスとかを踏まえるとQOLが爆上がりした。

JavaScriptで文字列falseをBoolean型に変更しようとして沼に落ちた

nove-b

文字列をBoolean型に変換するとtrueになる

console.log(Boolean('false'))
// true

特に何も考えず上記コードを書きデバック時にはまった。

他の型は上記のような書き方でうまく変換できるので、原因解明に時間がかかった。

Boolean()を調べてみると、

注意: 文字列への型強制や数値への型強制などの他の型の変換とは異なり、論理値への型強制はオブジェクトからプリミティブに変換しようとするわけではありません。

どうやらこのようなことらしい。

じゃあ、いったいどうすればいいのか。

文字列falseをBoolean型にする方法

console.log(JSON.parse(('false').toLowerCase()))

上記コードでうまく変換できた。

windows11にMySQLをインストールする

nove-b

Windows11にMySqlをインストールする

まずは存在確認をする

mysql --version

上記コマンドでバージョンが出るようであれば、すでにインストール済みなので、この記事は必要ない。バージョンが出ないようであれば下記の手順でインストールする。

インストール

MySqlのダウンロードページに行き、Windows (x86, 32-bit)をインストールする。なぜか２つあるので、容量の大きい方にした。ダウンローボタンをクリックするとページ遷移するので、そのページでインストールする。

インストールの設定

インストーラーを起動すると、設定が始まるので、進めていく。 Progateを参考（以降すべて参考する）に設定した。ちょくちょく違う箇所があったけど、そこれらへんは流れに任せた。

環境変数の設定

環境変数を設定し、コマンドプロンプトからMySQLコマンドを使えるようにする。環境変数に設定されているMySqlの設定を、

C:\Program Files\MySQL\MySQL Shell 8.0\bin
↓
C:\Program Files\MySQL\MySQL Server 5.7\bin

に変更する。

完了後、管理者モードのコマンドで、

mysql --version

を実行し、バージョンが出れば、インストール完了。

動作確認

最後に念のため動作確認をしておく。

C:\Windows\System32>net start mysql57
MySQL57 サービスを開始します.
MySQL57 サービスは正常に開始されました。

C:\Windows\System32>mysql --user=root --password
Enter password: ********
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 2
Server version: 5.7.41-log MySQL Community Server (GPL)

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

上記の通り、ログインも可能に。

ログアウト

mysql> exit;
Bye

Byeは可愛い。

停止

C:\Windows\System32>net stop mysql57
MySQL57 サービスを停止中です.
MySQL57 サービスは正常に停止されました。

これで一通り試せた。

windows11に入れたMySQLをGUI(HeidiSQL)で確認する

nove-b

GUIとは？

GUIとは、グラフィカルユーザインターフェース(Graphical User Interface)の略語。コンピュータへ出す命令や指示等を、ユーザが画面上で視覚的に捉えて行動を指定できるもので、それまで主流であった命令文を入力して実行する方式(CUI)に比べ、直感的に操作できるのが特長。

参考：GUIとは - 意味の解説｜ITトレンドのIT用語集

つまり本来コマンドとかで操作することを、ツールで体現できるようにしたもの。

HeidiSQLを使用する

色々調べると、Navicat for MySQL、MySQL Workbenchとかがあるらしい。Navicat for MySQLは有料で、MySQL WorkbenchはMySQL Installerの中に付随しているツールらしい。

今回使用するHeidiSQLはオープンソースのデータベース管理ソフトで、MySQLだけでなくMicrosoft SQL Serverにも対応しているらしい。

特別優れているという感じじゃないけど、聞いたことがあるのでこのツールを使用することにした。

インストール

インストールはHeidiSQLをクリックすることで開始される。

ちなみにMicrosoft Storeでもインストールできるっぽかった。

Microsoft Storeでインストールする方がいいのかもしれないけれど、そこら辺の違いがわからないので、別で調査したい。

Windows11に入れたMySQLを接続する

ここからが本題で、Windows11に入れたMySQLをHeidiSQLで見れるようにしていく。

新規ボタンをクリックする
セッション名を任意の名前にする（今回はWindows11 MySQLにしてみた）
ホスト名／IP: 127.0.0.1
ユーザー: root
パスワード: インストールしたMySQLのパスワード
net start mysql57でMySQLをスタート
「接続」でHeidiSQLでデータベースを確認できた。

個人開発で読んだ瞬間の感想を投稿するウェブアプリを開発して約1.5年経過した現在の数字と思い

nove-b

現状

個人開発で一儲けしてやろうという人もいると思うが、現実はこんなものである。

ユーザー数：37人
過去１か月のアクティブユーザー：1人（自分）
過去28日間の訪問ユーザー：37人
過去28日間の検索クリック：2回
過去28日間の検索表示数：60回

この通り、だいたい１日に１人来てくれれば御の字。

そもそもどんなサイトなのよ？

「いやいや、そもそもサイトのコンセプトが悪いんじゃない」のと言いたい気持ちはわかる。

What is Flash Book ⚡

コンセプトは上記の通りなので、ぜひサイトに訪れて確認してほしい。

それだけで...、１ユーザーが訪問してくれるだけで、本サービスには大きな１歩である。

自分が使いたいサービスを作った

このコンセプトを見てどう思うかはわからないが、少なくとも自分には需要があった。

本の感想を書くのは面倒だけど、書きたいことはある。

読みながら考えたこと、思ったことをシェアしたいという欲求が常々あった。

自分の欲求に応えるように作ったので1年半も本サービスが続いている。

やっぱり自分が１ユーザーになれるというのは強い。

過去に作ったサービスはことごとく消えていった

というのも、このサービス以前にいくつかのサービスを作ったが、それらはすぐに手放した。

なぜってアクティブユーザーが０だったから。

誰も使ってくれないし、自分自身も別に利用する必要がない。

当然、そんなサービス不要ということで、さよならした。

自分が使わないと、使い勝手もわからないし、修正のしようもない。

さよならしたいくつかのサービスが教えてくれたことは「制作者がサービスの１ユーザーであれ」という教訓１つ。

サービスを広めるためにやったこと

Twitterで告知
- これはそれなりに効果があって何人か登録までしてくれたが、留まってはくれなかった
ココナラでのコンテンツ作成
- あまりにも自分だけが呟いているとさすがにと思ったので、ココナラで使用してくれる人を募った。コンテンツは増えたがそれだけだった
Google広告
- 8000 円だけGoogle広告を打ってみたPV数は飛躍的に伸びたが、ユーザーは増えなかった
読書メータでの布教
- 現在進行形で進めている
- 同様のテーマを取り扱っているだけあってそれなりに人が来てくれている
- 今後も続けていきたい

１年半近く続けてきて思うこと

個人開発でバズるなんてよっぽどのことない限り難しく、基本的に赤字の垂れ流しになる。
だからこそ自分自身の為になるサービスを作るべきで、自分の役に立つならそれでいいや、というマインドじゃないと続けられない。

とは言え、どこかで見切りをつける必要もある。

自分で作ったサービスって誰からも愛されていなくとも、可愛くて仕方ないので、ずるずる続けちゃいそうな気がしている。

Windows11に入れたMySQLとNest.Jsを接続し、テーブルを作成する

nove-b

MySQLにデータベースを作成する

まず、Windows11にいれたMySQLにデータベースを作成する。

net start mysql57

mySQLを立ち上げ、

mysql --user=root --password

でログインする。

次に、下記クエリでデータベースを作成する。

CREATE DATABASE dbName;

を実行する。

Query OK, 1 row affected (0.01 sec)

と出ればデータベースが作成できている。

念のため、

SHOW databases;

上記クエリで確認すればデータベースを一覧で確認できる。

NestJsから接続する

TypeORMをインストールする

SQL および NoSQL データベースと統合するために、Nest は@nestjs/typeormパッケージを提供します。Nest がTypeORMを使用するのは、それが TypeScript で利用できる最も成熟したオブジェクトリレーショナルマッパー (ORM) だからです。TypeScript で記述されているため、Nest フレームワークとうまく統合されます。

ちなみにTypeORMとはnode.jsで実行される、TypeScriptで作ったObject Relational Mapperライブラリのこと。

ちなみにちなみに、Object Relational Mapperライブラリとは、データベースとオブジェクト指向プログラミング言語の間の非互換なデータを変換するプログラミング技法のことらしい。

つまり、いい感じに変換してくれるやつという浅い理解で進めていく。

npm install --save @nestjs/typeorm typeorm mysql2

Appモジュール読み込む

インストールができたら、app.module.tsにTypeOrmModuleをインポートする。

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: 'password',
      database: 'dbName',
      entities: [],
      synchronize: true,
    }),
  ],
})
export class AppModule {}

Entityを作成する

テーブルを作るためにEntityを作成していく。

touch test.entity.ts

でEntityファイルをsrc/に作成し、下記コードを記入する。

import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class Test {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  firstName: string;

  @Column()
  lastName: string;

  @Column({ default: true })
  isActive: boolean;
}

Appモジュールに知らせる

作成したEntityファイルをapp.module.tsに読み込み、共有する。

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { Test } from './test.entity';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: 'password',
      database: 'dbName',
      entities: [Test],
      synchronize: true,
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }

上記でセーブすると、データベースにテーブルが作成できていることを確認できる。

案外簡単に接続ができた。次はCRUD操作をしていく予定。

NestJsにおけるMigrationと「synchronize: true」を調べてみた

nove-b

synchronize: true とは

公式ドキュメントを呼んでいる際は読み飛ばしたが、下記のようなことが書かれていた。

Setting synchronize: true shouldn't be used in production - otherwise you can lose production data.

翻訳すると「設定synchronize: trueは本番環境では使用しないでください。そうしないと、本番データが失われる可能性があります。」とのこと。読み飛ばすにはあまりにも恐ろしい項目な気もするが、当時に自分は気にも留めなかった。

これがマイグレーション作業と深く結びついている。

synchronize: true

この設定は、アプリケーションをデプロイしたときにDBのテーブルがEntityから自動的に生成されるというもの。そのため前回の記事のように、Entityを作成しセーブすることで自動的にテーブルが作成された。

どうやらすごく便利な設定だと思うようだが、危険もある。

Entityの状態がDBに同期されるため一見便利にみえますが、Entityのカラムを消したときにDBのカラムも消えてしまうため、誤ってPasswordのカラムを消してしまうなどのリスクがあります。

確かに誤って、コードを削除し、保存したらすべてのデータが消えるというのは非常に恐ろしい。

そこで本番に上げる前にsynchronize: falseにし、マイグレーションファイルを元に手動でDBの状態を更新するようにしていく必要がある。

Migrationとは

マイグレーションの正体は普通のJSファイルで、SQLを使用してデータベースのスキーマを更新したり、既存のデータベースに変更を加えるというものです。

つまり、同期的な変更ではなく、こちらでコマンドを行うことで、データベースを変更してくれる。

いざ、本番で操作するよりは、開発の時点でテスト的に触っておいた方が良さそうなので、どこかでテストする。その際、詳細な操作方法を追記する。

git pullした時に、「error invalid path」というエラーが出たので解決する

nove-b

error: invalid path

タイトルに書いたが、

error: invalid path

git pull したところ上記エラーがでた。

調査しつつメモに残そうと本記事のタイトルでマークダウンファイルを作成しようとしたところ、エラーがでた。つまりたぶん、それが原因だと思われる。ちなみにエラーの内容は、:をファイル名に使うことはできないとのこと。

でまあ、たぶん上記の通りなんだろうけれど、いちおう調べてみた結果「ファイル名にWindowsのファイルシステムで使えない文字]が含まれているのが原因」とその通り。

解決方法

シンプルな解決方法はブラウザでGithubにアクセスし、名前を変更する。

または、Gitの設定を変更する。

git config --global core.protectNTFS false

ファイル名に禁則文字を含むリポジトリを Clone できない（true）という設定をfalseにすることで、エラーははかなくなる。

ただ結局Cloneしたことでファイル名が変更されたので、ファイル名を変更する必要があった。

NestJsとMySQLでCRUD操作を行ってみた

nove-b

前回の修正と準備

前回testというEntityを作ったけど、わかりにくくなるのでsampleに変更した。

モジュールの作成

npx nest g module sample

まず上記コマンドを使用し、モジュールを作る。なぜモジュール化するかを調べると散らかるので、また別の機会に。

公式ドキュメントに

対応するモジュールディレクトリ内のドメインの近くに作成することをお勧めします。

と記載されているので、sample.entity.tsを作成したサンプルモジュール内に移行する。

必要なファイルを作成する

 npx nest g controller sample --no-spec
 npx nest g service sample --no-spec

controllerとserviceを作成する。

controllerはルーティングを指定し、serviceは処理の記述を書くファイルという認識。

最後に、DBと疎通操作するためのRepositoryを作成する。なぜか作成するコマンドが用意されていないようなので、自作する。

cd src/sample
touch sample.repository.ts

各ファイルを作成する

sample.repository.ts

リポジトリはEntityManagerと同じですが、その操作は具象エンティティに限定されます。EntityManagerを介してリポジトリにアクセスすることができます。

上記を読んでもなんのことかわからない。

import { Injectable } from '@nestjs/common';
import { Sample } from 'src/sample/sample.entity';
import { Repository } from 'typeorm';
import { InjectRepository } from '@nestjs/typeorm';

@Injectable()
export class SampleRepository extends Repository<Sample> {
  constructor(@InjectRepository(Sample) repository: Repository<Sample>) {
    super(repository.target, repository.manager, repository.queryRunner);
  }
}

sample.controller.ts

これは先述した通り、ルーティングを指定するもの。

import { Controller, Delete, Get, Param, Patch, Post } from '@nestjs/common';
import { Sample } from './sample.entity';
import { SampleService } from './sample.service';

@Controller('sample')
export class SampleController {
  constructor(private readonly sService: SampleService) {}

  @Post()
  create() {
    return this.sService.createSample();
  }

  @Get()
  async findAll(): Promise<Sample[]> {
    return await this.sService.findAll();
  }

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.sService.findOne(+id);
  }

  @Patch(':id')
  update(@Param('id') id: string) {
    return this.sService.update(+id);
  }

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.sService.remove(+id);
  }
}

sample.service.ts

これは先述した通り、処理を指定するもの。

import { Injectable, NotFoundException } from '@nestjs/common';
import { DeleteResult } from 'typeorm';
import { Sample } from './sample.entity';
import { SampleRepository } from './sample.repository';

@Injectable()
export class SampleService {
  constructor(private readonly sampleRepository: SampleRepository) {}

  // データ固定で新規作成
  public async createSample(): Promise<Sample> {
    return await this.sampleRepository.save({
      firstName: 'first',
      lastName: 'last',
      isActive: true,
    });
  }

  // 全件取得
  async findAll() {
    return await this.sampleRepository.find();
  }

  // id指定でデータ取得
  async findOne(id: number) {
    const sample = await this.sampleRepository.findOneBy({ id });
    if (!sample) {
      throw new NotFoundException(
        `${id}に一致するデータが見つかりませんでした。`,
      );
    }
    return sample;
  }

  // データ固定で更新
  async update(id: number): Promise<Sample> {
    const updated = await this.sampleRepository.update(id, {
      firstName: 'firstUpdate',
    });

    const updatedPost = await this.sampleRepository.findOneBy({ id });
    if (updatedPost) {
      return updatedPost;
    }

    throw new NotFoundException(
      `${id}に一致するデータが見つかりませんでした。`,
    );
  }

  // データ削除
  async remove(id: number): Promise<DeleteResult> {
    const response = await this.sampleRepository.delete(id);

    if (!response.affected) {
      throw new NotFoundException(
        `${id} に一致するデータが見つかりませんでした`,
      );
    }

    return response;
  }
}

sample.module.tsにまとめる

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { SampleController } from './sample.controller';
import { SampleRepository } from './sample.repository';
import { SampleService } from './sample.service';
import { Sample } from './sample.entity';

@Module({
  imports: [TypeOrmModule.forFeature([Sample])],
  exports: [TypeOrmModule],
  controllers: [SampleController],
  providers: [SampleService, SampleRepository],
})
export class SampleModule {}

これで諸々処理は完了した。

C:Create

$ curl -X POST localhost:3000/sample
{"firstName":"first","lastName":"last","isActive":true,"id"
:2}

R:Read

全件取得

http://localhost:3000/sample/1

上記にアクセスすると、下記が取得できる。

[{"id":1,"firstName":"firstUpdate","lastName":"last","isActive":true},{"id":3,"firstName":"first","lastName":"last","isActive":true}]

Id指定で取得

http://localhost:3000/sample/1

上記にアクセスすると、下記が取得できる。

{"id":1,"firstName":"firstUpdate","lastName":"last","isActive":true}

U:Update

$ curl -X PATCH localhost:3000/sample/1
{"id":1,"firstName":"firstUpdate","lastName":"last","isActi
ve":true}

D:Delete

$ curl -X DELETE localhost:3000/sample/2
{"raw":[],"affected":1}

これでCRUD処理はできた。ただ現状、すべてこちらで用意したデータを保存しているので、次はそこを触ってみる。

複雑な文字列パターンをマッチさせる必要がある場合はIF分ではなく正規表現を使うべきだとChat GPTが言ってた

nove-b

従来

考えてみたと書いたが、そもそも従来の書き方だとどうしても汚く見えてしまうので、これを機に綺麗にしようという次第である。

で、その従来の書き方といえば、


/* 文豪がランダムで抽出される */
const targetArray = ['三島由紀夫','太宰治','夏目漱石','芥川龍之介','宮沢賢治']
const randamIndex =  Math.floor( Math.random() * targetArray.length );
const target = targetArray[randamIndex]

/* 文豪が芥川か太宰ならture */
const matchCondition = (target) => {
    return target === '芥川龍之介' || target === '太宰治'
}

console.log(target, matchCondition(target))

こんな感じ。
条件が少なければ別にいいけど、条件が多い場合はtarget === 'hoge'を沢山繋いでいく必要がある。

これをもっと綺麗にしたい。

正規表現を使いましょう

const condition = /\芥川龍之介|太宰治\b/
console.log(target, condition.test(target))

これで、わざわざtarget === 'hoge'でつなぐことなく/\芥川龍之介|太宰治\b/に文豪名を増やしていくだけで済むようになった。

Chat GPTは？

考えたコードが本当に正しいか、シンプルか、美しいかの判定ができないので、流行のChat GPTにも考えてもらった。

三島由紀夫、太宰治、夏目漱石、芥川龍之介、宮沢賢治の中の1つがランダムに抽出されるデータがあり、抽出されたデータが芥川龍之介か太宰治ならtrueを返すコードをJavascriptで書いて

こんにちは！下記がそのコードになります：

const writers = ['三島由紀夫', '太宰治', '夏目漱石', '芥川龍之介', '宮沢賢治'];
const selectedWriter = writers[Math.floor(Math.random() * writers.length)];

if (selectedWriter === '芥川龍之介' || selectedWriter === '太宰治') {
  console.log(true);
} else {
  console.log(false);
}
このコードでは、有名な作家のリスト writers が定義されています。次に、このリストからランダムに1つの作家が選択されます。最後に、選択された作家が芥川龍之介か太宰治か判定され、その結果に応じてTrueまたはFalseが出力されます。

従来のコードが返ってきた。
しかも文字から作家ってことまで理解してる...。

じゃあ、正規表現についても聞いてみた。

const writers = ['三島由紀夫', '太宰治', '夏目漱石', '芥川龍之介', '宮沢賢治'];
const selectedWriter = writers[Math.floor(Math.random() * writers.length)];
const condition = /芥川龍之介|太宰治/;

console.log(selectedWriter, condition.test(selectedWriter));

書き方が少し違う。

const condition = /\芥川龍之介|太宰治\b/
↓ Chat GPT
const condition = /芥川龍之介|太宰治/;

Chat GPTの書き方だと、

const writers = ['三島由紀夫', '太宰治', '夏目漱石', '芥川龍之介', '宮沢賢治'];
const selectedWriter = '芥川龍之介は歯車を書いた'
const condition = /芥川龍之介|太宰治/;

console.log(selectedWriter, condition.test(selectedWriter));

これでもtrueが返ってくる。ここら辺は質問の仕方によるのかしら。人間が言葉で質問している限り、Chat GPTが必ずしも正解を返すとは限らないので、注意するべきだと肝に銘じた。

最後にChat GPTにIF分を使うべきか正規表現を使うべきか質問してみた。

これはアプリケーションによって異なりますが、通常は正規表現を使用するべきか、If文を使用するべきかは、比較的短い文字列を比較する場合はIf文を、複雑な文字列パターンをマッチさせる必要がある場合は正規表現を使用する方が良いです。 If文は単純で直感的で、判定処理の流れがわかりやすいです。正規表現は複雑な文字列パターンを扱うことができるため、文字列比較の機能を強化することができます。つまり、文字列を比較するのに十分なIf文であれば、正規表現を使用する必要はありませんが、複雑な文字列パターンを扱う必要がある場合は、正規表現が有用です。

とのこと。
これは思っていた通りで安心した。

さっき肝に銘じたばかりなのにChat GPTと意見が一致して安心しているあたり、なんだかなといった具合。

AI、あな恐ろし。

NestJSでDTO(データ転送用オブジェクト)を使用しCRUD操作を行ってみる

nove-b

検証ライブラリーをインストール

npm install class-validator --save

これは、見出しの通りPOST時に検証してくるライブラリー。

デコレータおよび非デコレータベースの検証の使用を許可します。内部的には、validator.jsを使用して検証を実行します。Class-validator は、ブラウザと node.js プラットフォームの両方で動作します。

ちなみにバージョンは"class-validator": "^0.14.0"←の通り。

データ転送オブジェクトを作成する

データ転送オブジェクト (DTO)とは

アプリケーションで受信するデータ用に適切なデータ構造を作成、検証しやすくするもの。 DTO を使うことで、リクエスト本文から抽出されるオブジェクトの形状を指定でき、検証の組み込みが容易になるとのこと。

ちなみにDTOは英語名(Data Transfer Object)と日本語読みの略が一致した稀有な例。

DTO をセットアップする

src/sample/dtoにcreate-sample.dto.tsを作成する。ファイルの内容は下記の通り。

import { IsBoolean, IsString } from 'class-validator';

export class CreateSampleDTO {
    @IsString()
    firstName: string;

    @IsString()
    lastName: string;

    @IsBoolean()
    isActive: boolean;
}

上記でフィールドのデータ型が stringorboolean型であるかを確認している。

それぞれのファイルにDTOを読み込む

ファイルのインポートは割愛する。

sample.controller.ts

  create() {
    return this.sService.createSample();
  }

↓に変更する。

  create(@Body() createSampleDTO: CreateSampleDTO): Promise<Sample> {
    return this.sService.createSample(createSampleDTO);
  }

sample.service.ts

  public async createSample(): Promise<Sample> {
    return await this.sampleRepository.save({
      firstName: 'first',
      lastName: 'last',
      isActive: true,
    });
  }

↓に変更する。

  async createSample(createSampleDTO: CreateSampleDTO): Promise<Sample> {
    return await this.sampleRepository.save({
      firstName: createSampleDTO.firstName,
      lastName: createSampleDTO.lastName,
      isActive: createSampleDTO.isActive,
    });
  }

実際にポストしてみる

$ curl -d '{"firstName":"taro", "lastName":"yamada", "isActive":true}' -H "Content-Type: application/json" -X POST http://localhost:3000/sample{"firstName":"taro","lastName":"yamada","isActive":true,"id":11}

データの作成ができていることを確認できた。

ちなみに

$ curl -d '{"firstName":"taro", "lastName":"yamada", "isActive":"string"}' -H "Content-Type: application/json" -X POST http://localhost:3000/sample{"firstName":"taro","lastName":"yamada","isActive":false,"id":12}

Boolean指定のisActiveをstringで送ったらfalseで登録された。

ついでにstring指定の箇所にnumberを送ったらそのままnumberで登録された。

つまりclass-validatorが動いてない。

これは別で調査する。

NestJSとclass-validatorでPOST時に検証をする

nove-b

class-validatorをインストールした

前回はclass-validatorをインストールしDTOと接続した。

が、結果は前回の記事に書いた通りだった。

なので、バリデートを効くようにしたい。

main.tsにバリデートを読み込む

import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(new ValidationPipe());
  await app.listen(3000);
}
bootstrap();

つまりバリデートするという指示が漏れていた。

ただこれだとclass-transformerが足りないと怒られる。

class-transformerをインストールする

npm i --save class-transformer

これで怒られなくなった。

間違った情報をPOSTする

$ curl -d '{"firstName":1111, "lastName":"yamada", "isActive":"string"}' -H "Content-Type: application/json" -X POST http://localhost:3000/sample

{"statusCode":400,"message":["firstName must be a string","
isActive must be a boolean value"],"error":"Bad Request"}

よし、怒られたのでオッケー。

拡張機能で管理していたSCSSをnode.jsで管理するように変更する

nove-b

package.jsonのひな型を作成する

npm init

色々効かれるが基本的にEnterを押しておけば問題ない。押し続けているとpackage.jsonが作成されている。

sassをインストール

npm i -D sass

上記コマンドでsassをインストールする。

今回は下記バージョンがインストールされた。

"sass": "^1.58.0"

Gitでソースコードを管理している場合は、.gitignoreファイルを作成しnode_modules/と記入するのが吉。

Scriptを登録する

ちなみに今回は

/assets/scss/style.scss
↓
/assets/css/style.css

のように変換したい。

先ほど作成したpackage.jsonにScriptを登録する。

  "scripts": {
    "watch:sass": "sass --no-source-map --watch assets/scss/:assets/css/"
  },

登録後、Scriptを実行する。

$ npm run watch:sass

> media-nove@1.0.0 watch:sass
> sass --no-source-map --watch assets/scss/:assets/css/

Compiled assets\scss\style.scss to assets\css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.

以降、scssを変更するたびに、コンパイルされる。

たぶん、拡張機能のコンパイルと展開のされ方が違うので、実際にページを見て崩れがないかを確認したほうがいい。

拡張機能について

拡張機能は便利だけど、開発環境の共有ができないので、依存しすぎるのは良くないなあ、と思い直した。

VSCodeの拡張機能「Draw.io Integration」でER図を作成する

nove-b

そもそもER図とは？

ER図とは「データベース設計における代表的な設計図のこと」らしい。そして「作成したER図がそのまま物理データベース上に変換できることから、データベース設計手法におけるデファクトスタンダード」とのこと。

つまりたぶん、ER図を書くという技術は必要不可欠っぽい。

データモデル

ER図はシステムの上流工程の中で段階的に設計するらしく、各工程で作成するER図の状態のことを「データモデル」というらしい。

概念モデル

要件定義工程で作成するデータモデル。
最初にシステム全体における「もの」や「できごと」をエンティティ、リレーションシップとして洗い出し、概要を表したもの。

論理モデル

基本設計工程で作成するデータモデル
特定のデータベースに依存しないレベルで具体化した状態を表したもの。

物理モデル

詳細設計工程で作成するデータモデル
Oracle Database等の特定の物理データベース向けに論理モデルの変換をする。
例えばデータ型を追加したり、物理データベースに即したアルファベットに変換する。
ER図の最終形態がこの物理モデル。

と色々書いたけどほとんどER図とは？書き方やテクニックをわかりやすく解説を参考にしたので、こっちを参考にした方がよっぽど良い。

どう書くか

で、ここからが本題になる。じゃER図は何を使って書くべきなのか。

参考までに会社のバックエンド担当に聞くと「A5:SQL Mk-2」を使っているとのこと。

なるほど、それを使うかと思ったけど、自宅のパソコンはパフォーマンスが良くないので、出来れば開くソフトを少なくしたい。

ということで、どうせ開いている「VS code」で書ける拡張機能を探してみた。

Draw.io Integration

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
Mentioned in the official diagrams.net blog.

↑が本家の説明文。

詳細はVSCodeでDraw.ioが使えるようになったらしい！に詳しい。

そこから引用すると、

Draw.ioとはdraw.ioにアクセスするだけで、フローチャートやネットワーク図、ER図といった豊富なテンプレートを使用して簡単にお絵かきをすることができるサービスになります。
Draw.ioで作成した図はPNGやJPEGなどの画像形式だけでなく、 SVGやXMLといった豊富な拡張子でエクスポートすることが可能です。

このサービスがVS codeで使えるようになったらしい。

.dioファイルを作成する

拡張子を.dioに設定したファイルを作成することで利用が開始される。

ちなみに、 .drawio.pngとかdrawio.svgでファイルを生成すると、importやexportの必要なくそのまま画像として利用できたり、編集することが可能らしい。

ファイルを作った瞬間、編集画面が表示されたすごい。

あとはdiagrams.net(draw.io)でER図を描く方法　※画像つき解説とかの通り、draw.ioでER図各サイトを参考にすれば問題ない。

Githubでリポジトリ用のプルリクエストテンプレートを作成する

nove-b

プルリク時の記述を共通化する

プルリク時に各々違うフォーマットで書かれるとレビューする人が大変なので、テンプレートを使用し共通化を図ることにした。基本的にリポジトリ用のプルリクエストテンプレートの作成を参考にすれば間違いないが、ここでは最もシンプルな方法を共有する。

共通用テンプレートの作成

cd project-root

まずはプロジェクトのルートに移動する。

mkdir .github

次に.githubフォルダを作成する。

touch PULL_REQUEST_TEMPLATE.md

でPULL_REQUEST_TEMPLATE.mdという空のファイルを作成する。

そこでにテンプレート内容を書けばok。

どんなテンプレにすればいいか

正直プルリクの運用は迷うことばかりなので、プルリクのレビューを効率的に進めるためにルールを作ってみた話を参考にした。

テンプレート内容

上記リンクから内容を拝借する。

## チケットもしくは概要

<!--
close #XX

or

ログイン機能の実装
-->

## やったこと

<!--
- Hoge コンポーネントに props を追加
- Fuga コンポーネントを実装
-->

## 特に見て欲しいところ

<!--
- 新しいライブラリを追加したが、他に妥当な物があるか
- テストケースがこれで十分かどうか
-->

## 動作確認手順

<!--
1. ログインフォーム(/login)にアクセス
1. メアドとパスワードを入力してログインを実行する
1. ログインが成功してユーザー一覧ページにリダイレクトされること
-->

## TODO（できればIssueを立ててリンクを貼りましょう）

<!--
- [ ] バリデーション
- [ ] エラーメッセージ
-->

## その他情報

<!--
参考にした記事
-->

## レビューコメント

レビュー時は prefix（テキストでも絵文字でもOK） を付けて、どのレベル感のコメントか明示してください

- ⚠️ must:  必ず直すべき
- 💭 imo:  自分の考えは〜
- 🐾 nits: 細かい指摘
- ❓ ask:  質問/確認
- 🖊️ memo: メモ書き

## マージについて

マージするのはレビュワーでもPRを開いた人でもどちらでもOKです！
Approveはするけどコメントを残すね→開いた人が修正するかどうか判断し、そのままor修正後にマージ
完璧なPRだ！→レビュワーがそのままマージ

参考：プルリクのレビューを効率的に進めるためにルールを作ってみた話

NestJSでMySQLと接続するモジュールを外部化し環境変数にする

nove-b

環境変数化とDB接続のモジュール化

綺麗にって漠然と書いたが、

環境変数化
DB接続のモジュール作成

を行っていく。

DB接続のモジュール作成

まずは外部モジュール化する。

nest g mo database

で、データ接続用のモジュールを作成する。

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
    imports: [
        TypeOrmModule.forRootAsync({
                useFactory: () => ({
                type: 'mysql',
                host: 'localhost',
                port: 3306,
                username: 'username',
                password: 'password',
                database: 'database-name',
                entities: [],
                synchronize: true,
            }),
        }),
    ],
})
export class DatabaseModule { }

次に、app.module.tsの方を編集する。

@Module({
  imports: [
    DatabaseModule,
  ],

設定をべたでimportしていたので、それを外部モジュールに変換する。

これで外部化は完了。

環境変数化

次に環境変数化していく。

npm install @nestjs/config

で、環境変数から読み込むためのパッケージをインストールする。

バージョンは "@nestjs/config": "^2.3.1"だった。

.envファイルをルートに作成し、そこに環境変数を作成する。

DATABASE_USER=test
DATABASE_PASSWORD=test

DatabaseModuleの読み込みを環境変数に変更する。

@Module({
  imports: [
    TypeOrmModule.forRootAsync({
      imports: [
        ConfigModule.forRoot({
          envFilePath: [".env"],
        }),
      ],
      useFactory: () => ({
        type: 'mysql',
        host: process.env.DATABASE_HOST,
        port: Number(process.env.DATABASE_PORT),
        username: process.env.DATABASE_USER,
        password: process.env.DATABASE_PASSWORD,
        database: process.env.DATABASE_NAME,
        entities: [Sample],
        synchronize: true,
      }),
    }),
  ],
})

これでいままで通りデータが取得できていれば問題ない。

NestJSでOpenAPIツール「swagger」を生成する

nove-b

依存関係をインストールする

npm install --save @nestjs/swagger

main.tsを編集する

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Swaggerの記述
  const config = new DocumentBuilder()
    .setTitle('Cats example')
    .setDescription('The cats API description')
    .setVersion('1.0')
    .addTag('cats')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);

  await app.listen(3000);
}
bootstrap();

後は上の記述を編集し、http://localhost:3000/api/を開けば作成されている。

非常に楽なので活用していきたい。

APIをグルーピングする

これだとcatsというタグができるがその中は空になり、すべてがdefaultにグルーピングされる。

任意のグルーピングを作りたい時は、hoge.controller.tsを下記のように変更する。

import { Controller } from '@nestjs/common';
import { ApiTags } from '@nestjs/swagger';

@Controller('hoge')
@ApiTags('hoge')
export class HogeController {
  constructor(private readonly sService: HogeService) {}

これで意図した形になる。

AngularでObjectを返すカスタムPipeを作ったがValueへのアクセス方法がわかなかったので調べてみた

nove-b

Objectを返すPipe

template側で展開するとこんな感じのやつ。

value | customPipe |json

{hoge:'hoge', fugo:'fugo', piyo.'piyo'}

参照方法は簡単

(value | customPipe).hoge
// hoge

で参照できる、ただこれだけ。

WardPressの管理をGit Flowで管理していたが、VSCodeの拡張機能「WordPress Post」を使うことで世界が変わった。

nove-b

WordPressの記事管理に頭を悩ませてきた。

で、行きついた先が、今後のことを考え、WordPressの記事をGitで管理しGithubに一元管理することにしただったのだが、色々運用を決めていくとどうにも面倒で仕方なくなってきた。

Githubでの運用方法

書きたい題材が見つかった時にIssueをたてる
Issueからブランチをきり、記事を作成する
プルリクを作成する
記事をWordPressにコピペ
公開
プルリクを承認する

という手順を自らに課したせいで、更新が億劫で仕方なかった。

そんなときに救世主であるWordPress PostというVSCodeの拡張機能にであった。

WordPress Postとは？

この Visual Studio Code 拡張機能は、WordPress に記事を投稿するアクションを提供します。これは、人々が Visual Studio Code を使用して Markdown で WordPress 記事を作成するのに役立ちます。

簡単に言うと、VSCodeで記事を書き、WordPressの管理画面を開くことなく、公開まで持っていける。

という最強の拡張機能！

使い方は作者のブログに詳しい。

これにより先ほどの手順が驚くほど簡略化された。

WordPress Postを使った公開手順

記事を下書き設定で書く
WardPressからカテゴリ・タグ・アイキャッチ画像を選択
公開

WardPressからカテゴリ・タグ・アイキャッチ画像を選択

は個人的に独自の手法を使っているのでまあ仕方ない。

管理画面に行かなくてはいけないものの、相当簡略化された。

さらに当然Git管理も問題ない。

来世でも使うと思われるVisual Studio Codeの拡張機能をまとめてみた間違いなく、こちらの記事に更新をかけ、追加するべき拡張機能である。

だがしかし、過去にこれで管理してないファイルはどのように対処する必要があるのか...?

たぶん、過去のは二元管理になるかしら。

とは言え、この拡張機能が素晴らしいことは間違いない。

ER図におけるリレーションのカーディナリティが覚えられなかったのでまとめてみる

nove-b

ER図の種類

そもそも知らなかったがER図には複数の書き方があるらしく、有名なのは「IE記法」と「IDEF1X記法」というものらしい。ふたつの記法は似ているがカーディナリティの違いがあるとか。

IDEF1X記法はリレーションを「●」などで表現することが特徴でIE方より細かい表現ができるが、その分直観さが失われるらしい。複雑なのは避けたいので、今回はIE記法で進めていく。

そもそもIE記法しかないと思っていた......。

カーディナリティの種類

記号	意味
○	0
l	1
鳥の足（3つ股の線）	2以上

主にこんな感じの記号を駆使していく。

実際にやってみる

内田百閒という好きな作家でER図を作っていく。

ちなみにおすすめは、下記３作品。

１対１の関係

これはまあ、シンプルに内田百閒とその詳細を表すときが該当する。例えば内田百閒という漢字とその読み方を表すと下記のようなER図になる。

内田百閒という作家名は「うちだひゃっけん」という読み方しかないので、１対１の関係になる。

１対多の関係

良く使われる表現だが、曖昧な状況を表している。

「1対多という関係は決まっているが、それ以上は決まっていない」という、データベース設計の初期段階の時に使う。
設計が進むにつれ、「1対0以上の関係」「1対1以上の関係」のように具体化してく必要がある。

例えば内田百閒とその作品はこれに該当する。

内田百閒はたぶん複数の著作を持っているので、１対多の関係になる。

1対0以上の関係

それじゃあ、１対多の関係を具体化していく。

１対多とはいえ、１に紐づくものが０の場合も存在する場合は、1対0以上の関係になる。

過去に遡り、百間がまだ著作を出版していなかった時、下記のようなER図で表現できる。

もしかすると百間は著作を出版することなく人生を終える可能性もあるので、0を許容する必要がある。そういう場合は1対0以上の関係になる。

1対1以上の関係

とはいえ、百間は最高の作品を複数残した。

そのため、少なくとも1件以上は彼に紐づけることができる。

つまり、1対1以上の関係の関係になり、下記のように表現することができる。

なんとなくこれがいまいち理解できてない気がする。
そして内田百閒だけだとこれは表現できない気がするので、「作家」と「出版社」というリレーションにする。

作家は0以上の出版社から本を出版することができ、出版社から出版する人が0人以上いる。
うん、そういうこと。

たぶんここら辺を理解できれば問題ないと思われる。
あとは結局数をこなしていけば、必然的に覚えれる。

NestJSのエラーレスポンスをカスタマイズする

nove-b

NestJSを用いAPI作成をしているのだが、Responseを共通化したいと思ったので、実装してみた。

Responseの定石

とは言えそもそもResponseの形をどのようにするのがいいのかわからなかったので調べた結果、omniti-labs/jsendが参考になりそうだった。これを参考に以下のような型で返すことにした。

export interface Response {
  status: 'success' | 'error';
  data: any;
  message: string[] | null;
}

ValidationPipeを使用する場合、エラーレスポンスの形式はBadRequestExceptionがデフォルト

たぶんドキュメントにある通り（Documentation | NestJS - A progressive Node.js framework）なので、ほとんどの場合ValidationPipeを使用することになる。そうするとエラーレスポンスの形式はBadRequestExceptionがデフォルトになるので、以下のように返ってくる。

{
  "statusCode": 400,
  "message": "Bad Request Exception",
  "error": "Bad Request"
}

これは意図した形ではないのでカスタマイズする必要がある。

http-exception.filter.tsを作成する

カスタマイズするにはそれ用のException filtersを用意する必要がある。 Exception filtersとは、

Nestには例外処理レイヤーが組み込まれており、アプリケーション全体で処理されない例外をすべて処理する責任を負っています。アプリケーションのコードで処理できない例外は、このレイヤーでキャッチされ、適切なユーザーフレンドリーな応答が自動的に送信されます。

というものらしい。

とにかく例外フィルターは、NestJSアプリケーションが例外をキャッチした場合に呼び出されるらしい。

実装は簡単

まずはhttp-exception.filter.tsを作成する。

import {
  ExceptionFilter,
  Catch,
  ArgumentsHost,
  HttpException,
} from '@nestjs/common';
import { Response } from 'express';

@Catch(HttpException)
export class HttpExceptionFilter implements ExceptionFilter {
  catch(exception: HttpException, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse<Response>();
    const status = exception.getStatus();

    response.status(status).json({
      status: 'error',
      data: null,
      message: (exception.getResponse() as any).message || [
        '何らかのエラーが発生しました。',
      ],
    });
  }
}

それをmain.tsで読み込むだけで、

  　app.useGlobalPipes(new ValidationPipe());
＋  app.useGlobalFilters(new HttpExceptionFilter());

エラーレスポンスが期待した形になって返却されるようになった。

余談

これを実装するときに脳死でChatGPTに質問したところ、いくら質問してもうまく実装できず、ドキュメントを見たら即解決した。馬鹿と鋏は使いようということで。

JavaScriptの配列で重複したものを削除し、ユニークな配列を作成する

nove-b

配列から重複したものを削除する

const numberArray = [0, 1, 1, 2, 3, 4, 4, 5];

const set = new Set(numberArray);
const newNumberArray = [...set];
console.log(newNumberArray)

// [0, 1, 2, 3, 4, 5]

ただこれだけ。
これだけだと物足りないので説明をすると、

上記のコードは、配列numberArrayから重複を除いた値を取得し、新しい配列newNumberArrayに格納しています。具体的には、配列numberArrayをSetオブジェクトに変換し、Setオブジェクトのユニークな値を持つ新しい配列を作成しています。
スプレッド演算子(...)を使用して、Setオブジェクトを配列に変換していることに注目してください。これにより、新しい配列newNumberArrayが作成され、それにはnumberArrayのユニークな値が含まれます。
最後に、console.logを使用してnewNumberArrayをコンソールに出力しています。

ってChat GPTが説明してくれました。

次世代フロントエンドツールViteを用いて、React+TypeScript+Tailwindcssの環境を開発する

nove-b

Vite（読み方はヴィート）とは？

次世代フロントエンドツール
最先端をいく開発環境を構築しましょうと謳うように下記のような特徴を持つ。

瞬時にスタートするサーバ
超高速な HMR
豊富な機能
最適化されたビルド
ユニバーサルなプラグイン
完全に型定義がされている API

これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。そのスピードに驚くこと、間違いない。

React & TypeScrpt の環境構築

$ npm create vite@latest MyApp -- --template react-ts

というコマンドを叩くだけで、

Need to install the following packages:
  create-vite@4.2.0
Ok to proceed? (y) y
√ Package name: ... MyApp

Scaffolding project in C:\Project\MyApp...

Done. Now run:

  cd MyApp
  npm install
  npm run dev

環境が構築される。この時点でもうReactの開発環境が構築されている。

Tailwindを導入する

reactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

上記コマンドでTailwindのインストールと設定ファイルを作成する。

設定ファイルに追記

tailwind.config.jsを下記に変更する。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwindのcssを読み込む

index.cssに下記を追記する。

@tailwind base;
@tailwind components;
@tailwind utilities;

これで当初の目標としていた開発環境は構築できた。
後はお好みでソースフォーマット系のプラグインを入れるのも良し。
開発に取り掛かるのも良し。

参考

https://github.com/vitejs/vite/tree/main/packages/create-vite
https://tailwindcss.com/docs/guides/vite

JavaScriptで2つの配列を比較し、一致したものを取り出す方法コード

nove-b

なんかよくやるのに、良く忘れるのでメモしておく

2つの配列を比較し一致したものを取り出したい。

特に難しいことはないのでまるっとコードを記載する。

const a:string[] =['a', 'b', 'c', 'd']
const b:string[] =['d', 'e', 'f', 'g']

// 期待値
// const c = string[] = ['d']

const c = a.filter(a =>b.includes(a))
console.log(c)

これでcは期待値になる。

どっちをFilterするのか

さて、いつもよくわからなくなるのは、どっちを回すべきなのかということ。

例えば今回は両者ともにLengthが4つだからいいけれど、例えば5と10だとどうなるのか。

実際にやってみる

const a: string[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const b: string[] = ['b', 'd', 'f', 'h', 'i', 'xx']

const c = a.filter(a => b.includes(a))
console.log(c)

と

const a: string[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const b: string[] = ['b', 'd', 'f', 'h', 'i', 'xx']

const c = b.filter(b => a.includes(b))
console.log(c)

で試してみたところ、結果は同じになった。

それぞれ、

1つ目のコードではaの要素のうち、配列bにも含まれている要素を取り出した。

2つ目のコードではbの要素のうち、配列aにも含まれている要素を取り出した。

どちらの方法を選択しても結果は変わらないが、コードの意図を明確にするために、xの要素のうち、配列xxにも含まれている要素を取り出したというのをコードで表現する必要がある。

JavaScriptでUnary plus (+)を使いかっこよくNumber型に変換する

nove-b

他人のコードを盗み見ていた時+'0'なるコードを発見しなんだろうと調べてみた。

職人の技は目で盗め

ってよく昔気質な職業で聞かれる言葉だけど、有名で最先端の技術がオープンソースで誰でも見れる状態であるプログラミングにも言えるんじゃないかと思っている。

暇さえあれば、Githubで他人のコードを読んでますってかっこいいので言ってみたいけど、噓になるので言えない。

ただ仕事中はできる限り、時間が空いた時にコードをを読むようにしている。

特に自分に関係のないプルリクなんかも追いかけるようにしている。

そこで+'0'なるコードを発見した。

ぱっと見、計算をしているようだと思ったけど、どうやら違いそうなので調べてみた。

単項プラス (+) / Unary plus (+)

簡単に言うとNumberに変換してくれるもの。

つまり+'0'はNumber(0)と同様の扱い。

ただNumber()関数の方がぱっと見でわかりやすいので、あえて単項演算子を使うメリットはないかもしれない。

letの仕様に関する知識を問うJavaScriptの問題

nove-b

先日、とあるSNSを見ていたら、JavaScriptの問題が出されていた。

さて、ここで問題

let a = 10

if(true) {
    let a = 20
    console.log(a, 'inside')
}
console.log(a, 'outside')

// Q. What is the output of thie below code?
// 1. 20, 'inside' and 20, 'output
// 2. 20, 'inside' and 10, 'output
// 3. 10, 'inside' and 10, 'output
// 4. 10, 'inside' and 20, 'output

このコードを実行した結果、どのような結果が求められるでしょう。

予想

面白そうなので実行する前に推測してみる。まず、If文がtrueなので当然のようにIfの中身が実行される。ここでLetの仕様の話になるのだが、Letは関数内でスコープされるので、先頭で定義されたLetとIf文の中のLetは違うものだということになる。

結果、If文の中のaは20となり、outsideのaはどこからも影響を受けずに10のままになる。

つまり2が正解になると予想される。

結果

[LOG]: 20,  "inside"
[LOG]: 10,  "outside"

正しいと証明された。

たぶん予想の仮説も正しいが、念のためChat Gptに聞いてみる。

このコードの出力は、以下のようになります：

20, 'inside' and 10, 'output
理由は次のとおりです：

最初の行で、変数 a に値 10 を代入します。

次に、if 文の中に入りますが、条件式は true なので、ブロック内のコードが実行されます。

ブロック内で、変数 a に値 20 を代入します。これは新しいスコープ内で宣言されたローカル変数です。

console.log(a, 'inside') を実行すると、20, 'inside' が出力されます。

if 文のブロックを抜けると、元のスコープに戻ります。

console.log(a, 'outside') を実行すると、10, 'outside' が出力されます。これは、最初に宣言されたグローバル変数 a の値が表示されています。

したがって、最終的な出力は 20, 'inside' と 10, 'outside' になります。

うん、同じことを言っているので一安心した。

Var or Const

Var

ちなみにVarで定義すると、aが毎回上書きされるので、

[LOG]: 20,  "inside"
[LOG]: 20,  "outside"

になる。

Const

ConstもLetと同様の結果になる。

NestJsで作成したプロジェクトをAWSのLambdaにあげて動かすまでの作業ログを残しておく

nove-b

個人開発プロジェクトのバックエンドをNestJSで作成した。公開したいので、awsのLambdaに乗せて動かしてみることにした。

初めてのaws、いつかの自分のために記録として一挙手一投足のログを残しておくことにする。

前提

$ node -v
v18.16.0

"@nestjs/cli": "^9.0.0",

バージョンは上記の通り。

で、Dockerの設定ファイルを諸々作ったが、使っていないので、ない前提でいく。

さて、それでは進めていく。

AWSアカウントの作成

AWSの公式ウェブサイトでアカウントを作成する必要がある。

ルートユーザーの E メールアドレス
AWS アカウント名

で新規アカウント作成ができる。

その後、認証コードを経て、

パスワード
連絡先情報(英語で書けって言われたのでchatGPTに住所教えて英語にしてもらった...個人情報)
請求情報
本人確認
サポートプランを選択→無料のベーシックを選択

AWS アカウント作成の流れを参考にすればいけるけど、意外と時間画かかったし、アカウント作成時にクレジットカードを登録することはいい気がしない。

とりあえず、これでアカウント作成が完了した。

必要なパッケージのインストール

ここからはNestJS-サーバーレスの公式を参考にしていく。

説明のために、Nest (@nestjs/platform-express完全に機能する HTTP ルーター全体を使用して起動) をサーバーレスフレームワーク (この場合は AWS Lambda をターゲットとしています) と統合します。

公式もawsで説明してくれているので、ありがたい。

$ npm i @vendia/serverless-express aws-lambda
$ npm i -D @types/aws-lambda serverless-offline

まずは上記の通り、必要なパッケージをインストールする。

    "@vendia/serverless-express": "^4.10.4",
    "aws-lambda": "^1.0.7",

    "@types/aws-lambda": "^8.10.119",
    "serverless-offline": "^12.0.4",

上記のようなバージョンがインストールされた。

次に、serverless.ymlファイルを作成する。

service: serverless-example

plugins:
  - serverless-offline

provider:
  name: aws
  runtime: nodejs14.x

functions:
  main:
    handler: dist/main.handler
    events:
      - http:
          method: ANY
          path: /
      - http:
          method: ANY
          path: '{proxy+}'

とりあえず公式をコピペしたやつ。

service: serverless-example
↓
service: backend

という風にpackage.jsonに合わせた。

node.jsのバージョンも揃えたほうがいいのかもだけど、いったんこのままで進める。

次にmain.tsを編集する。

import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { AppModule } from './app.module';
import { HttpExceptionFilter } from './shared/filter/http-exception.filter';
import serverlessExpress from '@vendia/serverless-express';
import { Callback, Context, Handler } from 'aws-lambda';

let server: Handler;


async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.init();

  // Swaggerの記述とかバリデーションの記述

  （...略）

  const expressApp = app.getHttpAdapter().getInstance();
  return serverlessExpress({ app: expressApp });
}
bootstrap();


export const handler: Handler = async (
  event: any,
  context: Context,
  callback: Callback,
) => {
  server = server ?? (await bootstrap());
  return server(event, context, callback);
};

のように変更した。

最後にtsconfig.jsonのesModuleInteropを有効にする。

{
  "compilerOptions": {
    ...
    "esModuleInterop": true
  }
}

で、下記コマンドを打つと

 npm run build

アプリケーションが実行されたら、ブラウザを開いてhttp://localhost:3000/dev/ANY_ROUTE に移動します。

ということなので、やってみる。

が、「このサイトにアクセスできません」になる。

そもそもサーバーを立ち上げてないので動くわけがない。

じゃあどうするのか。

いらいらググると、

$ npx serverless offline

というコマンドを叩く必要がありそう。てかドキュメントにも書いてあった。

そういうことなので実行してみる。

Need to install the following packages:
  serverless@3.32.2
Ok to proceed? (y)

なんか出たけど、y。

入っていないパッケージを参照するよ、ということらしい。

Server ready: http://localhost:3000 🚀


ANY /dev/api/v1/users/name (λ: main)
× [504] - Lambda timeout.


ANY /dev (λ: main)
× [504] - Lambda timeout.


ANY /dev/api (λ: main)
× [504] - Lambda timeout.

なんかタイムアウトしてるけど、動いているっぽい。

タイムアウトの原因をデータベースとの接続と考え、データベースを介さない、ただ文字列を返却するだけのエンドポイントを作成し、テストする。

変わらず、タイムアウトした。

仕方ないので、main.tsをまるっとドキュメントのコピペにした。

これで動けばmain.tsに問題がある。

動かない。

次にserverless.ymlのservice: serverless-exampleを戻したら、データベースを介さないやつは動いた。

そしてまた何回か繰り返すとタイムアウトした。

再度起動しなおしたら、データベースの値を取得出来た。

そういうわけで、main.tsをもとに戻してみる。

タイムアウトした。

main.tsの原因を探る。

import { NestFactory } from '@nestjs/core';
import serverlessExpress from '@vendia/serverless-express';
import { ValidationPipe } from '@nestjs/common';
import { Callback, Context, Handler } from 'aws-lambda';
import { AppModule } from './app.module';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { HttpExceptionFilter } from './shared/filter/http-exception.filter';

let server: Handler;


async function bootstrap(): Promise<Handler> {
  const app = await NestFactory.create(AppModule);
  await app.init();


  // Swaggerの記述とかバリデーションの記述

  （...略）

  const expressApp = app.getHttpAdapter().getInstance();
  return serverlessExpress({ app: expressApp });
}


export const handler: Handler = async (
  event: any,
  context: Context,
  callback: Callback,
) => {
  server = server ?? (await bootstrap());
  return server(event, context, callback);
};

これにしたら動いた。

bootstrap();

の実行場所が問題だったっぽい。

というわけでservice: serverless-exampleをservice: backendに戻した。

これでサーバーレスのテストをローカルでできた。

追記:2023年6月30日

ローカルでテストする際に、timeoutが頻発するので調べたところ、

プロバイダーの下にタイムアウトを追加します。ラムダのタイムアウトの最大値は 900 秒です。実行時間に応じて 30 秒などに設定し、何が起こるかを確認してください。

という記事を見つけた。

実際に

provider:
  name: aws
  runtime: nodejs18.x
  timeout: 30

にしたところ、タイムアウトしなくなった。

AWSにデプロイ

次にawsにデプロイする必要があると思っている。

その為に何をすればいいのか調べて実行していく。

もしかして、コンソールに入り関数を作成し、zipファイルをアップロードすればいいだけ？

そんな気がするのでそれでやってみる。

Lambdaの関数作成

AWS Lambda ダッシュボードの関数を作成をクリックする。

一から作成を選択し、関数名を決める。

次に、関数の記述に使用する言語を選択します。ということでNode.js 14.xを選択した。理由してはローカルでサーバレスのテストをした時のランタイムにNode.js 14.xを使用したので。

よく考えたら18で作ってるんだけど、今回は気にしないことにする。

（※このログを書いた後にNode.js 18.xにした。）

アーキテクチャっていうのは

x86_64
arm64

のふたつがあってよくわからないので、x86_64を選択した。

一応調べてみると下記に詳しい。

https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/foundation-arch.html

どうやら値段が違うようで、arm64の方が安そうな気がする。

ということで、arm64を選択することにした。

（※このログを書いた後にx86_64にした。）

で、関数の作成を終了する。

Zip のアップロード

作成後遷移したページでコードタブをクリックし、npm run buildで作成されたdistフォルダをzip化し、アップロードする。

API Gatewayの構築

次に API Gatewayのダッシュボードにいき、HTTP APIの構築を行う。

統合で先ほど作成した関数を選択する。API名は特に決まりないよう。

次にルート設定でリソースパスを/{proxy+}に変更する。

最後に「ステージを設定」は変更せず、そのまま作成をする。

どうやら次に権限の設定があるらしい。

API Gateway コンソールで、先ほど作成した API の詳細ページを開く。左のタブから、「統合」を選択し、ルートの統合の詳細を見る。

アクセス許可を呼び出すのポリシーステートメント例の、source-arn内の文字列をコピーしておく。

またLambdaに戻り、設定→アクセス権限、リソースベースポリシー内のアクセス権限を追加をクリック。

AWSのサービスを選択し、下の画像のように入力して保存します。ソースARNに先ほどの文字列を追加。

アクションはlambda:InvokeFunctionを選択する。

URLにアクセスするが、{"message":"Internal Server Error"}になる。謎が深い。

serverless.ymlにならい、dist/main.handlerにハンドラを変更したが変わらない。

検索するとHTTP API Lambda 統合に関する問題のトラブルシューティングのページにたどり着いたので、見ていく。

最近気が付いたけど、結局公式見るのが一番早い。

急がば回れ、誰が考えたか知らないけど、先人の知恵ほど偉大なものはない。

内部サーバーエラーのトラブルシューティングを行うには、ログ形式に $context.integrationErrorMessage ログ記録変数を追加し、HTTP API のログを表示します。これを達成するには、次の操作を行います。

という操作をするらしいけど、何言ってるのか全くわからない。

とりあえず、下記公式の通り進める。

CloudWatch コンソール (https://console.aws.amazon.com/cloudwatch/) を開きます。

[ロググループ] を選択します。

[ロググループの作成] を選択します。

ロググループ名を入力し、[作成] を選択します。

ロググループの Amazon リソースネーム (ARN) を書き留めます。ARN 形式は、arn:aws:logs:region: account-id:log-group:log-group-name です。HTTP API のアクセスのログ記録を有効にするには、ロググループ ARN が必要です。

やろうと思ったけど、既にグループがあったので、「ロググループの Amazon リソースネーム (ARN) を書き留めます。」だけやった。

次に下記の公式通りの手順を行う。

https://console.aws.amazon.com/apigateway で API Gateway コンソールにサインインします。

HTTP API を選択します。

[モニタリング] で、[ログ記録] を選択します。

API のステージを選択します。

[編集] を選択し、アクセスログを有効にします。

[Log destination] (ログの送信先) で、前のステップで作成したロググループの ARN を入力します。

[ログの形式] で、[CLF] を選択します。

ログ形式の末尾に $context.integrationErrorMessage を追加します。

[保存] を選択します。

Network Failureでできない（※ 今思えば、タイムアウトしていた？）。謎が深い。

諦めて、ロググループにあった既存のグループのログを見てみると、@nestjs/coreモジュールを見つけることができない的なことが書いてある。

それをchat GPTに聞くとnode_modulesもアップロードしろという返答が返ってきたので試してみる。

重すぎてあげられない。

s３を使えとのこと。

そういうことであればと思うのだが、お金発生しているのか不安になる。

調べるとAWS 無料利用枠があるっぽいので行ってみる。

アップロードしたs3のデータをLambdaにアップロードする。

リレージョンが異なるので無理っぽい ??

よくよく見ると、Lambdaのリレージョンシドニーでやってた。

東京に作り直す。

東京に作り直したけど、s3のファイルサイズが大きすぎると怒られた。

たぶん、node_modulesにdevDependenciesも含まれているからなので、Dependencies のみのパッケージをインストールするnpm install --productionコマンドでnode_modulesを作成する。

ついでにzipファイルにpackage.jsonとpackage.look.jsonも入れてみる(結果的に正しかった)。

でも無理で、色々試した結果、distフォルダがダメだということに気が付いた。

つまり、

package.json
node_modules
main.ts etc

という構成にしなければならないことに気が付いた。

かつ、bcryptが使用できないいっぽいのでbcryptjsを使用するこにした。

で、あげたら今度はタイムアウトになった。すこしづつ進んでいるが、まだできない。

基本設定でタイムアウトを30秒にした。

次に秘密鍵のエラーが出た。 JWTの秘密鍵をenvで管理しているのだからそりゃそうだ。

環境変数を設定すると、ログからエラーが消えたが、{"message":"Service Unavailable"}という結果になる。

新しい。

ログを見るとUnable to connect to the databaseということなのでデータベースに接続てきていないらしい。

ローカルのMySQLに接続できないだろし、これを機にRDSの構築をすることにした。

RDSの作成

Amazon RDS コンソールの [データベースページ] を開いて、[データベースの作成] を選択します。
[標準作成] オプションを選択したままにし、[エンジンのオプション] で [MySQL] を選択します。
[テンプレート] で、[無料利用枠] を選択します。
[設定] で、[DB インスタンス識別子] に ****** を入力します。
以下を実行して、ユーザー名とパスワードを設定します。
[認証情報の設定] では、[マスターユーザー名] の設定を admin のままにします。
[マスターパスワード] には、データベースにアクセスするためのパスワードを入力して確認します。
次の操作を実行して、データベース名を指定します。
残りのデフォルトオプションはすべて選択したままにして、[追加設定] ペインまで下にスクロールします。
このペインを展開し、[最初のデータベース名] として ****** を入力します。
残りのデフォルトオプションはすべて選択したままにして、[データベースの作成] を選択します。

やり方は公式に詳しかったのでそのようにした。

同時にLambdaの環境変数を編集した。

DATABASE_HOST:*****.rds.amazonaws.com(RDSのエンドポイント)
DATABASE_NAME	******
DATABASE_PASSWORD	******
DATABASE_PORT	3306  ← よくわからないけどローカルで設定していた数字のまま
DATABASE_USER	******

でエンドポイントを叩いたが、

{"message":"Service Unavailable"}

うまくいかない。

色々と調べてみると、IMAロールとVPCの設定が必要とのこと。

https://qiita.com/kobayashi_0226/items/d8f97c652873d80b1367

上記記事を見つつ、ぽちぽちやっているとできた。

{"status":"success","data":{"newComment":[]},"message":null}

ただ、どうも接続できないエンドポイントがある。

調べてみるとNestJSのsynchronizeオプションをTrueにしたままだったのが原因っぽい。

次は踏み台サーバーを作成し、RDSの中身を見てみる。

JavaScriptにおけるcount++と++countの違いについて調べてみた

nove-b

なんとなく怪しいので、count++と++countについて調べてメモしておく。

実行してみる

const pre = () => {
    let count = 0
    console.log(++count, 'pre')
}

const post = () => {
    let count = 0
    console.log(count++, 'post')
}

pre() // [LOG]: 1,  "pre"
post() // [LOG]: 0,  "post"

前置インクリメント演算子

pre()の方はcountの値が1増えてから更新された値が返されるので、1が出力される。

後置インクリメント演算子

post()の方はcount の現在の値を返し、その後に1を加算するので、0が出力される。

それぞれ適宜場合を見て使用する必要がある。

AWSのRDSに接続したいけど踏み台サーバーでうまく接続できなかったので、RDSをパブリックサブネットに置きHeidiSQLで接続を試みる

nove-b

awsのRDSにEC2を踏み台サーバーとしてアクセスしようとしたけど、うまくいかなかったので、RDSを一時的にパブリックサブネットにしたうえでアクセスしてみる。 aws知識0だがパブリックサブネットに変更するのは問題がありそうな気がするけど、テスト環境なのでやってみる。

パブリックアクセスを有効にする

RDS > データベース > 該当DB名に行き、変更ボタンをクリックする。

接続の追加設定を選択し、パブリックアクセス可能にチェックを入れるて保存する。

セキュリティグループの変更

ポート3306の解放

接続とセキュリティ > VPC セキュリティグループをクリックする。

インバウンドルール > インバウンドのルールを編集をクリックする。

タイプでMYSQL/Auroraを選択する。

ソースでMyIPを選択すると今使用しているパソコンのIPアドレスでの接続に制限できる。

接続してみる

接続できない。

セキュリティグループを追加してみる

全部公開できそうなセキュリティグループを作成し、そちらを適用させる。

インバウンドグループ

IP バージョン	タイプ	プロトコル	ポート範囲	ソース
IPv4	すべてのトラフィック	すべて	すべて	0.0.0.0/0

アウトバウンドルール

IP バージョン	タイプ	プロトコル	ポート範囲	送信先
IPv4	すべてのトラフィック	すべて	すべて	0.0.0.0/0

接続してみる

これでクライアントツールでRDSにアクセスすることができた。

これでとりあえずテーブルの中身を見たいという課題は解決できた。

次は踏み台サーバーを設置し、正規の流れでアクセスできるようにしたい。

LambdaにのせたNestJSでapp.enableCors();を指定しているのにCORSエラーがでたので解消するまでを記録した

nove-b

POSTメソッドを叩いたらエラーが出た

NestJSで作成したAPIをLambdaに乗せ、API Gatewayでエンドポイントを作成した。

フロントエンドはNextJSで作成し、Vercelにデプロイした。

で、無事画面表示とGetが成功し、得たいデータが表示された。

ただPOST APIを叩いた時

Access to fetch at 'https://xxxxxx.amazonaws.com/api/v1/login' from origin 'https://xxxxxxx.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

というエラーがでた。

CORSは有効にしている

上のエラーを読む限り、CORSに関するエラーということがわかる。

ただNestJSの方でCORSは有効にしている。

該当のソースは下記の通り。

  const app = await NestFactory.create(AppModule);
  await app.init();

  app.useGlobalPipes(new ValidationPipe());
  app.useGlobalFilters(new HttpExceptionFilter());

  // CORSの有効化
  app.enableCors();

  const expressApp = app.getHttpAdapter().getInstance();
  return serverlessExpress({ app: expressApp });

Getはできているし、CORSもきっと有効に出来ているに違いない。

じゃあ、なんでPOSTはできないの？

沼に落ちた。

解決方法

ちなみに同じ状況に陥った人のために先に解決方法を載せておくと、下記のようにawait app.init();の位置が肝だった。

const app = await NestFactory.create(AppModule);
app.enableCors()
app.useGlobalPipes(new ValidationPipe());
app.useGlobalFilters(new HttpExceptionFilter());
await app.init();
const expressApp = app.getHttpAdapter().getInstance();
return serverlessExpress({ app: expressApp });

理由はいまいちわからないので、ここには記載しない。

ここに至るまでの道のり（読むかは自己判断で）

上記の通りで解決するので後はただの蛇足。

ただ自分がどのように解決に至ったかをログとして残しておく。

見る価値があるかはわからない。

API GatewayでCORSを設定する

AWSのほうでも同様にCORSを設定する必要があるのか？　という思いで設定した。

API Gateway > CORSで設定にいき、下記の通り設定した。

Access-Control-Allow-Origin	*
Access-Control-Allow-Headers	content-type,authorization
Access-Control-Allow-Methods	GET,POST,PUT,DELETE,OPTIONS

がエラーが変わらないので、ReactからCognitoで認証認可されたAPI Gatewayを呼び出すを参考に下記の通り変更した。

Access-Control-Allow-Origin	https://vote-for-name.vercel.app
Access-Control-Allow-Headers	content-type,authorization
Access-Control-Allow-Methods	*
Access-Control-Max-Age	-1秒
Access-Control-Allow-Credentials	true

に変更したが意味がなかった。

※ てかNestJSでCORSを設定しなくてもここで設定できる？（未確認）それならソースビルドしなくていいので負担が減りそう。いつか試してみたい。

##　NestJS側でCORS有効化の書き方を変更してみる

  const app = await NestFactory.create(AppModule);
  await app.init();

  app.useGlobalPipes(new ValidationPipe());
  app.useGlobalFilters(new HttpExceptionFilter());

 app.use((req: any, res: any, next: any) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,  Authorization');
    res.header('Access-Control-Allow-Methods', '*');
    next();
  });

  const expressApp = app.getHttpAdapter().getInstance();
  return serverlessExpress({ app: expressApp });

にしたみたけど変わらず、エラーが出続ける。

そもそも

 app.use((req: any, res: any, next: any) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,  Authorization');
    res.header('Access-Control-Allow-Methods', '*');
    next();
  });

これを追加した時点で、

 app.enableCors()

を削除してるけど、これも必要なんじゃないかということで復活してみる。

が、変わらず無理のまま。

エラーでpreflightがどうこう言っているので、

if ('OPTIONS' == req.method) {
    res.send(204);
}
else {
    next();
}

CORS "It does not have HTTP ok status."上記を追加してみた。

ができない。

同様に、上記サイトを参考にapp.options('*', cors())を追加し見たが、そんな型存在しないともっと前の段階で怒られた。

Githubで他の人のソースを探る

どうやら順番が違うことに気が付いて無事解決。

諦めずに取り組んで良かった。

エックスサーバーで借りたドメインのサブドメイン使用し、Vercelにカスタムドメインを設定する

nove-b

過去にドメイン関係のトラブルに見舞われたことがある。

ドメイン関係のトラブルはクリティカルなので非常にそわそわする。

そんな時エックスサーバーのサポートが手厚く、以来、レンタルサーバー・ドメインはエックスサーバーにお世話になっている。

そのため、今回新たに作成したWebサービスもエックスドメインで借りたドメインのサブドメインに紐づけることにした。

サーバーはVercelに浮気した。

エックスサーバーでサブドメインを作成する

前述したとおり、エックスサーバーは非常にサポートが充実している。

なので、サブドメインの作成を改めてここに書く必要なんてない。

公式が最も正しく、詳しい。

サブドメイン設定を参考にサブドメインを作成する。

Vercelに紐づける

大前提としてVercelにプロジェクトが既にあるという体で進めていく。

Vercel管理画面

SettingsタブをクリックしProject Settingsページに遷移する。

サイドナビのDomainsをクリックし、inputに作成したサブドメインを入力しAddボタンをクリックする。

https://は不要なので注意。

Invalid Configurationという警告がでるが、Vercelに認識はしてもらった。

エックスサーバー管理画面

DNSレコード設定をクリックしDNSレコード一覧から対象ドメインを選択し変更ボタンをクリックする。

ここでDNSレコードが設定できるので、下記のように設定する。

項目	値
ホスト名	[サブドメイン名]
種別	CNAME
内容	cname.vercel-dns.com
優先度

上記設定を追加し、しばらく待つ。

Vercelサービスに割り当てられるドメイン

サービスを作成すると独自に、割り当てられるドメインがある。

service-name.vercel.app

のようなやつ。

独自ドメインを設定した暁には、このドメインをリダイレクトするのがいいと思われる。

先ほど設定したドメインの下にこのドメインがあると思うので、Editボタンをクリックすると、Redirect toというセレクトボックスがある。

そこに先ほど設定したドメインが表示されると思うので、選択し、Saveすればリダイレクトが完了する。

もしこの設定を行わないとGoogleのクローラーはどのように判断するのだろうか。

コピーサイトと間違われることもありそうなので、リダイレクトはしたほうがいい。

ただサブドメインを使用する場合は、友人に共有したいけどメインドメインがばれるのが嫌という人も多いだろう。

その場合はシェア用に取っておくのも有りかもしれない。

Vercel管理画面にて、Valid Configuration・Assigned to main

5分くらいでValid Configurationが上記のような表記に変更された。

実際に設定したドメインを訪れると作成したサービスにアクセスすることができた。

キャッシュを消さないと見れないかもしれないので注意が必要。

ColとRow、そして行と列は縦横一体どっちを向いているのかを完全に理解した。

nove-b

Row（行）

横方向を表す。つまり、テーブルや行列などで、水平方向に並んでいる要素の集まり。

Col（列）

縦方向を表す。つまり、テーブルや行列などで、垂直方向に並んでいる要素の集まり。

疑問

要素の集まりというのが肝な気がする。それを考えると色々しっくりきた。どうしっくりきたかの言語化はできない。

ので、以前の疑問を解消する形で言語化に近づけてみる。

4列シート

夜行バスの４列シートは横並びに４つシートが並んでいるという意味なので、４行シートではないのかという疑問が浮かんだ。

ただ１番前から見た時、垂直方向に並んでいる要素の集まりが４つある、つまり４列になる。

rowSpan

これはHTMLのTableに関する属性で垂直方向のセルを結合する。いや垂直方向に結合するならColSpanではという疑問が浮かんだが、横並びの集まりを垂直方向に結合するのでRowSpanで正しい。

覚え方

ぱっと思い浮かばないので、

Row Gyo Yoko 🤙

というラップっぽく覚えることにした。

CORSでクロスオリジンの設定をする際に、なんでドメインを絞り込む必要があるのか浅く理解した

nove-b

本記事は不確かな情報が多く含まれる可能性がある

本職はフロントエンドエンジニアで、基本的に取得した情報に色をつけ表示させることで会社内での居場所を維持してきた。

ただ最近個人開発でバックエンドに触れることが増えセキュリティにも興味が出てきた。

ただ、まだまだ浅い理解しかない。

何が言いたいかというと、この記事は不確かな情報を含んでいる可能性があるということ。

浅く理解したくなったきっかけ

最近、個人開発ということでNestJSでAPIを作成した、

作成したAPIをLambdaに乗せ、カスタムドメインを設定せずに使用している。

そのため、CORSのクロスオリジンを指定する必要があった。

NestJSは一行ですべてのドメインに対しCORSを許可することができる。

開発環境ではそれでいいが、本番で運営するにあたり、許可するドメインを指定する必要がありそうだということを調べて知った。

しかし、なぜ？という疑問が生じた。

いくら絞ったところでcurlコマンドで叩けるので別に絞る必要がないのでは？

という疑問を解決するために調べてみた。

CORSを指定しないことで考えられるセキュリティリスク

クロスサイトリクエストフォージェリ（CSRF）攻撃

CSRFは悪意のある攻撃サイトにユーザーが訪問した際、意図しないリクエストがCSRFの脆弱性のあるウェブアプリケーションに投げられ、設定の変更や、強制投稿が行われるということ。

CSRF(Cross-Site Request Forgery)攻撃について

このサイトが非常に参考になった。

CORSで防げる

このサイトにあげられている下記のようなポイントのうち、

対象のWebサイトのユーザが、正規の手順でログイン済であることを前提とする

対象のWebサイトが、設計上意図しない更新操作を受け付けてしまうことで攻撃が成立する

「対象のWebサイトが、設計上意図しない更新操作を受け付けてしまうことで攻撃が成立する」をCORSの設定で防ぐことができる。

悪意のあるサイトのドメインがCORSで許可されていなければ、いくらリクエストが飛ばされたところで問題ない。

そのため、CORSのドメインは信頼されたドメインに絞り込む必要がある。

そういうこと。

無料枠のよくわからないawsの無料枠について真剣に調べてみた

nove-b

個人開発でawsデビューをしたが、料金不安なので調べてみることにした。正直開発したサービスがawsの何のサービスを使用しているかわからないので請求書ダッシュボードからあげだしてみた。

請求書ダッシュボードにあるデータ

AWSの概要アクティブなサービスの合計数：８アクティブな AWS リージョンの合計数：５

アクティブなサービスの合計数が何かというのを調べるために、aws の請求 > 請求に行き、サービス別料金を見ると一覧で見れる。

アクティブなサービス

今回は下記を使用しているらしい。

API Gateway
CloudWatch
Data Transfer
Elastic Compute Cloud
Key Management Service
Lambda
Relational Database Service
Simple Storage Service

ぱっと見、知らないサービスもあったが、いったん寝かせておく。

アクティブな AWS リージョン

次にアクティブな aws リージョンの合計数について調べてみる。

調べた感じ利用できるリレージョンとのこと、つまり使用しているリレージョンではない。

つまり気にしなくていい。

awsの無料枠

AWSの無料枠は注意が必要。というのも3パターンの無料枠がある。

無料トライアル
- 指定期間利用できる無料枠
12 か月間無料
- AWS に最初にサインアップした日から 12 か月間無料で使用できるプラン
無料枠
- 有効期限はなく、AWS のすべてのお客様が利用可能

つまり上の２つは期限が過ぎれば支払いが発生する可能性がある。

また最後の１つも枠を超えれば、支払いが発生する可能性がある。

ただこちらは枠さえ守れば永久的に無料で使用することができる。

AWS 無料利用枠を参照することで無料枠を調査することができる。

これを用い、使用したサービスの無料枠を中心に見ていきたい。

今回使用したawsのサービスがどういう無料枠の形態を取っているか

API Gatewayは12か月無料で以降は課金される。
CloudWatchは無期限無料で10 のカスタムメトリクスおよびアラームが無料とのこと
- カスタムメトリックスはユーザーが独自に定義し、収集、監視できるメトリックデータのこと
- アラームとは特定の条件が満たされた場合にユーザーに通知を送信するための仕組み
Data Transferは記述がない。
- 使っているかもわからない
Elastic Compute Cloud（EC2）は12か月無料で以降は課金される。
Key Management Serviceは無期限無料で20,000/月の無料リクエスト枠がある
Lambdaは無期限無料で100 万/月の無料リクエスト枠がある
Relational Database Serviceは12か月無料で以降は課金される。
Simple Storage Service（S3）は12か月無料で以降は課金される。

うーん、どうなんだろう

正直、釈然としない。

実際12か月経ち、どれくらい課金されるのか、やってみないとわからない部分が大きすぎる。

aws、勉強のために触れてみたけど、正直定額制の方が精神的にいい。

ちょっと代替案探してみる。

それまで請求ダッシュボードを定期的に見に行かなくちゃ。

フロントエンド専のエンジニアが見よう見まねでawsのLambdaを用いて個人開発をした

nove-b

誰も興味ないサイトの紹介をする意義

仕事では主にAngular、Vue、Reactを使っているフロントエンドしかできない30歳が、インフラ～すべてに手を出してみた。

作成したはいいけど、12か月後、awsの無料枠終了を見据え、運用する気はない。

そこで、ひとつ記事にでも残しておこうという思いで筆を取ることにした。

作成したサービス

Vote For Name-難読エンジニアワードの読み方を投票で決めよう

簡単なアンケートサイト。

アイデアに関しては、悲しいかな、特筆すべき点はない。

エンジニアリングするうえで、読み方がよくわからない言葉が良くあるので、それを投票で決めようといった魂胆。

競合とかは特に調べていない。

使用した技術

インフラ
- aws Lambda
- aws RDB
- aws API GateWay
- Vercel
バックエンド
- NestJS
- TypeORM
フロントエンド
- NextJS

インフラ

インフラは初めて、awsに手を出してみた。

永久無料枠がない従量課金制は初めてなので、請求に不安を感じる。

柔軟にスケールできていいのだろうけれど、スケールアップしないので、定額の方がうれしい。

まあ、いい勉強にはなった。

バックエンド

バックエンドにはNestJSを採用した。

理由は、フロントと言語を統一することで効率化を図れるという点と、学習コストが低そうだった点。

Angularに似ている言語ということで、普段Angularを業務利用している身としては、非常に手っ取り早く、概要をつかむことができた。

言語としての不満はなく、今後も使っていきたいと思ったが、いかんせん日本語の情報が少なく苦労した。

NestJSのエラーレスポンスをカスタマイズする NestJsで作成したプロジェクトをAWSのLambdaにあげて動かすまでの作業ログを残しておく LambdaにのせたNestJSでapp.enableCors();を指定しているのにCORSエラーがでたので解消するまでを記録した

フロント

迷うことなく、NextJSにした。

現在、個人開発をするとなったら、一択の選択肢かなと感じている。

ただ今回、Next13のAppDirにちょっと戸惑う点もあった。

SSRの書き方とかが簡略してていいと思う反面、サーバーコンポーネントとかの概念がいまだにつかみ切れていない。

それでも、引き続きNextJSを採用し続けると思われる。

フロントのサーバーはVercelにアップしたNextJS使うのであれば、第一の選択肢だろうし、実際そうなった。

エックスサーバーで借りたドメインのサブドメイン使用し、Vercelにカスタムドメインを設定する

このサービスの今後

awsの無料枠を終えた後も続けるメリットはないので、運用していく気はない。

ただせっかく勉強のために作ったので、無料枠を終えるまでは暇を見つけて、issueを解決していきたいと考えている。

isuue

動けばいいやという思いもありつくったので、細かい箇所を理解しつつ、ブラッシュアップしていきたい。

初回アクセス時Vercelがサーバーレス関数の発火をまたずにタイムアウトする。
CORSの設定をちゃんやる
LambdaとGithubの連携をする
JWT認証をCSRF認証に変更してみる
マイグレーションの設定をちゃんとやる

とか🤔🤔

JavaScriptで１行足すだけで、以降の処理を５秒間待つことができる

nove-b

domの操作をしていると、

「あれ、動かない、domの生成がまだ行われていない？　試しに５秒待った後に実行してみよう」

みたいなことが良くある。

その都度、下記のように実行してきた。

window.setTimeout(() => {
    operation()
}, 5000)

という風に、setTimeoutの中に該当する関数を入れていく。

ただこれだと、入れるべき関数がたくさんあると面倒くさい。

そこで以降すべて５秒後に実行されるというワンライナーを覚えることにした。

それ以降の行はすべて５秒後に実行されますよっと

await new Promise((resolve) => setTimeout(resolve, 5000));

ただこれだけのこと。

ただこれだとasyncをつけたメソッドを用意する必要があるけれど。

React NativeでHello World（環境構築～サンプルアプリ立ち上げまで）

nove-b

過去にReact Nativeの環境構築はしたことがあるが (react native でアプリを作る環境構築をやってみるよ⚡)、それから随分と経つので、再度0からやってみる。

Expo Goの利用

モバイル開発が初めての場合はExpo Goの仕様が推奨されているので、それにならうことにする。必要なのは、最新バージョンのNode.jsとスマホまたはエミュレータ。

React Native CLI という環境もあるが、Xcode またはAndroid Studioになるとのこと。また初めてであれば環境構築に1時間を要することになる。

ということで、迷うことなくExpo Goを採用した。

開発サーバーの起動まではとてもシンプルで下記コマンドを実行する。

npx create-expo-app AwesomeProject

cd AwesomeProject
npx expo start

既存ディレクトリへの展開

ただ今回はリポジトリ作成済みでディレクトリが存在していたので、

npx create-expo-app $(pwd)

上記コマンドで現ディレクトリにAppを展開した。

そのうえで開発環境PCとエミュレータスマホを同一のWi-Fiに接続し、

npx expo start

上記コマンドで開発サーバーを立ち上げた。

エミュレータスマホでApp.jsに書かれた、Open up App.js to start working on your app!が表示されれば、立ち上げが成功している。

Hello World !

次に、

<Text>Open up App.js to start working on your app!</Text>

を

<Text>Hello World!</Text>

に変更すれば、当然、Hello World!が表示される。

これでReact Nativeでスマホを開発するスタート地点に立った。

隙間時間に英語の勉強ができるようにネイティブキャンプ（Native Camp）を始めました

nove-b

英語を話す必要性を感じた瞬間

英語が喋れるようになりたいと思ったことは何度もあるが、必要性を感じたことはなかった。

だって翻訳機がこんなにも発達した世の中なのだから。

わざわざ英語を覚えることに、脳のメモリを使わなくてもって思っていた。

英語学習のきっかけ

それがなぜ、英語を話せる必要性を感じたかというと、話はこの記事を書いている今から数日だけ遡る。

その日は仕事中に次に個人開発するアプリのことを考えていた。アプリの技術に何を採用するかということで頭を悩ませていた。やりたい言語はたくさんある。しかし時間は有限である。ということで行き着いた結論は、自分の好きな企業、サービスが採用している技術を採用しようということになった。

そういうわけで好きな企業の採用サイトを横断していると多くの企業で英語を採用基準にしているではないですか。

なんということでしょう。中には公用語に英語を採用している企業もある。

つまり好きな企業に行くには英語が必須である。ということに気がついてしまった。

英語学習の方法を検討

そういうわけで英語の勉強を始めようと思いたった。

じゃ、どう勉強するか。思いついたのは、

Udemy
YouTuber
Podcast

とかだが、性格上座学とか受動的な勉強は向いていない。

それにそういういった勉強はすでに義務教育9年間、さらに高校、大学で行っており、いま喋れていない現実がある。

うん、やっぱり能動的に学習する必要がある。

多分英語で会話をするのが一番の近道に違いない。サラリーマン金太郎もそれで英語とサウジアラビア語を覚えていた。

ということで、外国人と話ができる環境を探すことにした。最初に思いつくのは英会話だけど、仕事と双子の似非育児をしている身としては、そんな時間は取れない。

じゃあ、そもそもいつ時間が取れるかというと、まあ、1番は車の中、つまり通勤中である。

そこで勉強できるのがベストに違いない。ということで色々調べると、オンライン英会話というのがあるらしい。それを使えば車の中の暇な時間を勉強の時間に充てられるんじゃないかということで、さらに調べてみると、NativeCampというオンライン英会話が良さそうだった。

NativeCampの選択理由

複数あるうちで NativeCamp がいいと思ったのは、24時間即時レッスン可能で、回数無制限という点である。

通勤は、特に帰りは何時になるかわからないので予約せずに即時レッスンができるというのは理想的だった。

まあ、それ以上に、7日間無料で、有料登録すれば Amazon ギフトカードが貰えるというのも大きな後押しになったけど。

そういうことで、NativeCamp 始めました。

とりあえず７日間の無料体験でどこまでできるかやってみる。

React NativeにTypeScriptを導入する

nove-b

TypeScript 関係をインストールする。

npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

上記コマンドでTypeScriptの依存パッケージをインストールする。

完了するとPackage.jsonが

  "devDependencies": {
    "@babel/core": "^7.20.0"
  },

から

  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.4",
    "@types/react": "^18.2.21",
    "@types/react-test-renderer": "^18.0.1",
    "typescript": "^5.2.2"
  },

に更新される。

tsconfig.jsonを作成する

Appのルートにtsconfig.jsonを作成し、

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

を記述する。

Tsxファイルの作成と動作確認

最後にJavascriptファイルを*.tsxに変換する。

You should leave the ./index.js entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.

と公式に書かれていたが、そもそもindex.jsを見つけることができなかったからドキュメントが古い？

App.tsxに型のない関数を書くとtsエラーが出たので、うまく機能していると思われる。

また無事にAppを開けたので、動作も問題ない。

ちなみに、

npx create-expo-app --template

を使えば初期のApp作成時にTypeScriptを導入できるので、こっちでやるべきだった。

参考Using TypeScript

ネイティブキャンプ（Native Camp）の無料期間を終え、初めて自身の英語力に対し明るい未来をみた

nove-b

前回の記事で書いたように、隙間時間で英語の勉強をしたいということで、オンライン英会話のネイティブキャンプ（Native Camp）を始めてみた。

始めたきっかけ

その無料期間が終わったので、無料期間を終え思うことを書いておく。そもそもなぜ、オンライン英会話を始めたいと思ったのか。数あるオンライン英会話サービスからネイティブキャンプを選んだのかというのはざっくり前記事に書いたのだが、一応本記事にもまとめておく。

なぜ、英会話を始めようと思ったのか？

転職の気になる企業の公用語が英語だった
職場で海外のデザイナーとやり取りしている人がかっこいい
プログラミングのドキュメントなどの資源は英語での情報が多い
子どもができ、海外旅行とか行く際に少しでも危険を避けたい（過去にハワイでかもられた経験有）

なぜオンライン英会話を始めようと思ったのか？

双子似非育児中のため、決まって確保できる時間がない
通勤時の車で英語でフリートークするのが最も効率的だと思ったから

なぜ、ネイティブキャンプを選んだのか？

時間を指定しない即時レッスンが可能だった
レッスン回数無制限だった
無料お試し期間が7日間ついていた
初回登録でAmazonギフト券5000円分がもらえた

特に、時間指定なしの即時レッスン、回数無制限はネイティブキャンプのみだったので、正直迷うことなく、ネイティブキャンプに決めた。

無料期間終了後の感想

そして無料期間を終えた今、思うことを書いていく。

そもそも車の中で英語でフリートークして楽しくめきめき英語力向上という前提が著しく間違えていた。初回だしお手並み拝見で最初のレッスンを受けてみたが、何を言っているかわからない。相手は当然英語しか話さないので、何とか食らいつく。これまで習ってきた英語で何とか聞き取り、何とかついていく。それだけで精一杯なのである。

こんなんじゃフリートークなんて夢のまた夢である。想像していたレッスン方法ではないけど、英語しか話せない相手に食い下がりつつ、レッスンを受けるというのもそれはそれで英語力の向上が見込める気がする。というのも複数回レッスンを受けているとなんとなく会話が通じるようになってきたのである。これはきっと続けていれば、30年間無理だった英語がマスターできるかもしれないという光が少し見えた無料期間だった。

そういうわけでポジティブな感情を抱き、無料期間を終えた。当然、本会員登録もした。

無料期間終了後の情報まとめ

ネイティブキャンプの情報をまとめてみる。

ポジティブなところ

先生が英語しか話さない（甘えることができない環境に身を置ける）
音声のみでOK
キャラクター先生がいる（パンダのFanFan先生最高、緊張せずに会話できる）
時間に縛られない即時レッスン（実力的に車の中は無理だけど、子どもたちが寝た深夜にレッスン可能）

ネガティブなところ

今のところ見つけられていない

今回の無料期間で5回のレッスンを受けた。7日間で5回だったので、思ったより受けられていない。ただこれは時期的な問題で、来週引っ越しを控えており、荷造りに時間を取られているのである。間違いなく、始めるタイミングを間違えた。そこだけは後悔しているが、ネガティブキャンプに出会えたことは幸運だった。時間のない人には特におすすめできる。次は一か月後の感想を書く、その時はもしかすると英語で記事を書いているかもしれないし、書いていないかもしれない。、

TypeScriptのIndex Signatureでプロパティに制限をかけたかったので、今更ながらよくよく調べてみた

nove-b

Index Signatureを使用することでプロパティの型を指定することができる。

例えば、

interface BodyType {
    [key: number]: {
        min: number,
        max: number
    }
}

const body:BodyType =
    {
        String: {
            min: 0,
            max: 230
        },
        1: {
            min:0,
            max:300
        }
    }


console.log(body.String.min)}
]

上記のようにnumber型という風に明示的に宣言することで、Stringという文字列をkeyに指定したことでエラーを吐かせることが可能である。

type '{ hello: { min: number; max: number; }; 1: { min: number; max: number; }; }' is not assignable to type 'BodyType'.
  Object literal may only specify known properties, and 'hello' does not exist in type 'BodyType'.

逆にIndex Signatureを文字列という風に明示的に宣言することで、1というKeyがエラーを吐きそうだが、

This is because when indexing with a number, JavaScript will actually convert that to a string before indexing into an object

という風に文字列にしてからアクセスするので問題ないということで、エラーは出ない。

Index Signatureでは特定の文字列を持つプロパティのみを制約することはできない

じゃあ、keyが特定の文字列のみの場合はどうすればいいか？

interface BodyType {
    [key in 'a' | 'b']: {
        min: number,
        max: number
    }
}

上記の記述すると、

A computed property name in an interface must refer to an expression whose type is a literal type or a 'unique symbol' type.

というエラーが出る。

エラーが出たコードを実現しようとすると

interface Content {
    min: number,
    max: number
}
interface BodyType {
    a: Content,
    b: Content
}

という風に記載することで解決できる。

そもそもIndex Signatureの定義が

Sometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values.

という風に型のプロパティ名を事前にすべて把握していない場合に使用する物なので、そもそも実現しようとしていることが間違え。

間違えだけれど、ちなみに、Typeを使用することで、上記のような書き方で実現することができる。

type BodyType = {
    [key in 'a' | 'b' | 'c']: {
        min: number,
        max: number
    }
}

InterfaceとTypeの違いは別で調べたい。

React NativeでTailwind CSSを使用したいので、nativewindを導入した

nove-b

React NativeでTailwind CSSを使用したいということで調べてみると下記２つが該当した。

tailwind-rnとnativewindの比較

スターはtailwind-rnが上回っているけど、活動の多さではnativewindが上回っているようなので、nativewindを採用した。

nativewindの導入

ドキュメントも丁寧なのでなぞって行っていく。

npm i nativewind
npm i --dev tailwindcss

上記コマンドで該当パッケージをインストールする。

npx tailwindcss init

次に上記コマンドでtailwind.config.jsを作成し、下記のように記載する。

// tailwind.config.js

module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

<custom directory>は自身のディレクトリに編集する。

次にbabel.config.jsを下記のように編集していく。

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
+   plugins: ["nativewind/babel"],
  };
};

以上とのことなので、起動してみる。無事に開発環境は動いている。

次にnativewindの記述を反映することができるか確認してみる。

    <View style={styles.container}>
      <Text>Hello World!</Text>
      <StatusBar style="auto" />
    </View>

を

    <View className="flex-1 items-center justify-center bg-white">
      <Text>Hello World!</Text>
      <StatusBar style="auto" />
    </View>

に変換した。結果大量のエラーが出現した。

No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.ts(2769)

エラーの解消

エラーを解消していく。

そもそもnativewindをexpoで使用するサンプルがGithubに用意されていたので、それを見つつ解消していく。

まず最初に変更したtailwind.config.jsを

content: ["./App.tsx"],

に変更する。

次に、babel.config.jsはそのまま。

で、ここまでで不足しているっぽいファイルを追加していく。

まずは、styles.cssをルートに追加する。内容は

@tailwind base;
@tailwind components;
@tailwind utilities;

あとnativewind.d.tsという型ファイル。

中身は

/// <reference types="nativewind/types" />

これにの追加によりclassNameの型エラーが解消された。

最後にapp.tsxにimport "./styles.css";という感じで追加したstyle.cssをインポートする。

で、実行すると

error: App.tsx: ~\App.tsx: Use process(css).then(cb) to work with async plugins

というエラーが出た。 https://github.com/marklawlor/nativewind/issues/556 も上がっている。

過去issueで解決済だったので、それを参照し tailwindのバージョンを"^3.3.2”に変更したところ、

error: App.tsx: ~\App.tsx: Use process(css).then(cb) to work with async plugins

このエラーは消えた。

次に、下記エラーと遭遇する。

Unable to resolve "./styles.css" from "App.tsx"

このエラーはApp.tsxのimport "./styles.css";を削除したら消えた。

動作確認

最後に起動したところ、無事にnativewindの記述が反映されていることを確認できた。

React Nativeにコードフォーマッター（ESLint・Prettierを導入する）

nove-b

インストール ESLint

まずはESLintを導入する

npm install --save-dev eslint

React Nativeには基本的に入っているという情報があったが、検索しても引っかからなかったので、上記コマンドでインストールした。

+     "eslint": "^8.49.0",

package.jsonを確認し、追加されたことを確認した。

Setting ESLint

次にESLintの設定をしていく。

npx eslint --init

上記コマンドで設定をスタートする。

You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.6
Ok to proceed? (y) y

まず、なんか追加でインストールしろと言われたのでインストールする。

その後、設定が始まる。

? How would you like to use ESLint? (Use arrow keys) // ESLintをどのように利用しますか？
  To check syntax only // 構文のみをチェック
  To check syntax and find problems // 構文をチェックし問題を見つける
> To check syntax, find problems, and enforce code style // 構文をチェックし問題を見つけ、コードスタイルを強制します

文法をチェックするだけではなく、自動で修正までを行ってもらうことにした。

? What type of modules does your project use? ... // プロジェクトでどの種類のモジュールを使用しますか？
> JavaScript modules (import/export) // JavaScriptモジュール (import/export)
  CommonJS (require/exports) // CommonJS (require/exports)
  None of these // どちらでもない

React Nativeでは主にimport/exportを使うのでJavaScript modules (import/export)を選択して次に進める。

? Which framework does your project use? ...
> React
  Vue.js
  None of these

React NativeはReactを基盤にするのでReactを選択する

? Does your project use TypeScript? » No / Yes

使用するのでYesを選択する。

 Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
    Browser
√ Node

React NativeはNodeベースなのでNodeを選択する

? How would you like to define a style for your project? ... // プロジェクトのスタイルをどのように定義しますか？
  Use a popular style guide // 人気のあるスタイルガイドを使用
> Answer questions about your style // スタイルについて質問に答える

どのスタイルガイドを使うのか選択するか、勝手に決められるのも怖いので自身で選択するにした。

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

ESLintの設定ファイルをどのように持つか。JavaScriptにした。

? What style of indentation do you use? ...
> Tabs
  Spaces

インデントをどう持つかはタブにした。

※ のちにスペースに変更する（いつもスペースなのに間違えた。）

? What quotes do you use for strings? ...
  Double
> Single

シングルクォーテーションかダブルクォーテーションかの選択、シングルにした。


? What line endings do you use? ...
>  Unix
 Windows

改行（行末の処理）の方法を選ぶもの、Unixを選ぶのが標準っぽいのでそれにならった。

 Do you require semicolons? » No / Yes

セミコロンの有無について、いつもつけないので、Noにした。

@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes

設定を終えると、必要なパッケージを提案してくれたので、Yesでそれを受け入れる、

? Which package manager do you want to use? ...
> npm
  yarn
  pnpm

パッケージマネージャーを聞かれるので、使用しているマネージャーを選択する。

これで設定は完了した。

実行していく

次にpackage.jsonにスクリプトを登録する。

    "lint": "eslint .",

npm run lintで実行すると

   1:44  error  Extra semicolon                                    semi
   2:42  error  Extra semicolon                                    semi
   7:1   error  Expected indentation of 1 tab but found 2 spaces   indent
   8:1   error  Expected indentation of 2 tabs but found 4 spaces  indent
   8:5   error  'React' must be in scope when using JSX            react/react-in-jsx-scope
   9:1   error  Expected indentation of 3 tabs but found 6 spaces  indent
   9:7   error  'React' must be in scope when using JSX            react/react-in-jsx-scope
  10:1   error  Expected indentation of 3 tabs but found 6 spaces  indent
  10:7   error  'React' must be in scope when using JSX            react/react-in-jsx-scope
  11:1   error  Expected indentation of 2 tabs but found 4 spaces  indent
  12:1   error  Expected indentation of 1 tab but found 2 spaces   indent
  12:4   error  Extra semicolon                                    semi

無事にソースに対してLintが働いていることが分かった。

スクリプトに--fixオプションをつけることで、

  "lint": "eslint . --fix"

修正まで行ってくれ、エラーが3件まで減った。

   8:3  error  'React' must be in scope when using JSX  react/react-in-jsx-scope
   9:4  error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  10:4  error  'React' must be in scope when using JSX  react/react-in-jsx-scope

ちなみにエラーは上記の通り。

こちらは.eslintrc.jsのrulesに下記設定を追加することで回避できる。

	'react/jsx-uses-react': 'off',
	'react/react-in-jsx-scope': 'off',

これで無事にエラーがゼロ件になった。

アプリが無事に立ち上げることも確認できたのでESLintの導入は成功した。

インストール Prettier

次にPrettierをインストールする。

npm install --save-dev prettier eslint-plugin-prettier

ルートに.prettierrc.jsを作成し、下記内容を記載する。

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
};

ESLintへPrettierを設定する

.eslintrc.jsに下記のように反映する

	'plugins': [
		'@typescript-eslint',
		'react',
		+ 'prettier'
	],

rulesに 'prettier/prettier': 'error',を追加する。

最後にスクリプトを登録する。

    "format": "prettier --check ."

実行していく

実行すると

[warn] .eslintrc.js
[warn] app.json
[warn] App.tsx
[warn] babel.config.js
[warn] globals.d.ts
[warn] prettierrc.js
[warn] styles.css
[warn] tailwind.config.js
[warn] tsconfig.json
[warn] Code style issues found in 9 files. Run Prettier to fix.

という結果に。

修正まで行ってくれるようにする。

    "format": "prettier --write ."

上記行うと修正まで行ってくれたけれど、そのあとにESLintを実行すると膨大なWarningが出るようになってしまった。

ESLintでセミコロン消してるのにPrettierでつけてたりしていて、見る感じ競合している。

prettierrc.jsに.が必要なことを忘れていた。後はESLintの設定と競合しないように設定を変えていけばできた。

WindowsにGoをインストールしてHello Worldしてみる

nove-b

インストール Go

Download and installのページに行き、環境に適したものをインストールする。

インストールするとシステムが立ち上げるので、手順に沿って進めていく。

Finish後、Goがインストールされていることを確認する。

コマンドを開き、go versionを叩くとgo version go1.21.1 windows/amd64と表示された。

これでインストールされていることを確認できた。

Hello World

次にHelloWordを表示させる。

まずは任意の場所に適当なフォルダを作成する。

 mkdir HelloWorldGo
 cd  HelloWorldGo

モジュールを作成する

次に、

go mod init example/hello

上記コマンドでモジュールの作成を行うのだが、

'go' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

というエラーが出た。

Pathを調べてみるとしっかりと通っている。ということで再起動をする。

再起動で、

go mod init example/hello
go: creating new go.mod: module example/hello

無事に叩けるようになった。

上記コマンドで作成されたのは、go.modというファイルで、

module example/hello

go 1.21.1

という記載がある。

調べてみるとこれは、依存関係のバージョン管理をするものらしい。つまり、スクリプトを記述しないJavaScriptのpackage.jsonみたいなものらしい。

疑問点が解消されたので、次に行く。

Mainパッケージの作成

hello.goファイルを作成し、

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

をと記述する。

 go run .

上記コマンドを叩けば、

Hello, World!

Goエンジニアのスタートラインに立てた。

外部パッケージの呼び出し

外部パッケージのコードを呼び出してみる。

まずはhttps://pkg.go.dev/でパッケージを検索する。今回はチュートリアルに沿って、https://pkg.go.dev/rsc.io/quote/v4というパッケージを使用することにする。

次にhello.goの内容を変更する。

package main

import "fmt"

import "rsc.io/quote"

func main() {
    fmt.Println(quote.Go())
}

"rsc.io/quote"をimportして"rsc.io/quote"のパッケージを使用するできるようにした。

次にルートにgo.sumファイルを作成する。

このファイルではgo.modで定義したプロジェクトのモジュール構成と依存関係のバージョン管理に使用するらしい。

次にgo mod tidyコマンドを実行する。

このコマンドは

実際に使われていない依存関係を削除
importした依存関係をインストール
つまり、プロジェクトの依存関係を最新化できる

上記の通りの動きをする。

>go mod tidy
go: finding module for package rsc.io/quote
go: found rsc.io/quote in rsc.io/quote v1.5.2

実行すると上記のように依存関係がインストールされた。

最後に実行してみる。

 go run .
Don't communicate by sharing memory, share memory by communicating.

という風によくわからない文章が出力された。

Githubを見ると、そういう風に返すようにできているので、正しく動いている。

Go Lang でモジュールを作成し、それをMainパッケージで使用する

nove-b

呼び出したいモジュールを作成する

まずは利用するgreetingsモジュールを作成する。

go mod init example.com/greetings

上記を実行する。

go: creating new go.mod: module example.com/greetings

というメッセ―ジとともに、go.modが作成される。

ちなみにコマンドに記入した`example.com‘はドメイン名ではGo ツールによってモジュールをダウンロードできるパスになるっぽいらしいけれど、よくわからない。

次にgreetings.goというファイルを作成し、

package greetings

import "fmt"

// Hello returns a greeting for the named person.
func Hello(name string) string {
    // Return a greeting that embeds the name in a message.
    message := fmt.Sprintf("Hi, %v. Welcome!", name)
    return message
}

上記のように記入する。

これでパッケージは作成できた。

mainのパッケージを作成する

次にこれを呼び出していく。

先ほど作成したgreetingsモジュールが格納されているフォルダと同階層にhelloフォルダを作成する

<home>/
 |-- greetings/
 |-- hello/

今までの通りモジュールを作成する。

go mod init hello

ドメインは必須じゃないということだったので、省略してみたが、無事に作成することができた。

次に、hello.goにコードを記載していく。

package main

import (
    "fmt"

    "example.com/greetings"
)

func main() {
    // Get a greeting message and print it.
    message := greetings.Hello("Gladys")
    fmt.Println(message)
}

このコードではｍainパッケージを宣言している。Goではアプリケーションとして実行されるコードはmainパッケージ内に存在する必要があるらしい。

以下、Chat-GPTのよると

Go言語における main パッケージは、実行可能なプログラムを定義する特別なパッケージです。

具体的には以下の特徴があります：

エントリーポイント:
- main パッケージ内の func main() が、プログラムのエントリーポイント（起動点）となります。この関数が最初に呼び出されます。
実行可能ファイルの生成:
- main パッケージを含むプログラムは、go build コマンドを使って実行可能なバイナリファイルにコンパイルできます。
単独実行可能ファイル:
- main パッケージを持つプログラムは、単体で実行可能なプログラムとして使われます。
必要なパッケージのインポート:
- main パッケージは他のパッケージをインポートできます。これによって、他のパッケージの機能を利用することができます。
mainパッケージ以外のパッケージには必要ない要素:
- main パッケージ以外のパッケージは、エントリーポイントとなる func main() を持つ必要はありません。

例えば、以下は main パッケージの例です：

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

このプログラムは main パッケージであり、func main() 関数が定義されています。このプログラムは fmt パッケージをインポートし、コンソールに "Hello, World!" と出力します。

main パッケージを持つプログラムは、通常、Go言語で実行可能なプログラムとしてビルドされます。

関数の方ではexample.com/greetingsのHello関数を呼び出し、使用している。

そのうえで、go mod tidyでモジュールを最新化する。

実際の運用ではリポジトリからモジュールを公開しimportして使用するのだが、greetingsモジュールをまだ公開していないためexample.com/greetingsをローカルで見つかられるように調整する必要がある。

調整するためには下記のコマンドを叩く必要がある。

go mod edit -replace example.com/greetings=../greetings

このコマンドでモジュールパスをローカルパスにリダイレクトするようにhelloモジュールが編集される。

次にgo mod tidyでモジュールを最新化する。

VSCodeでエラーが出ているけれど、実行すると

go run .
Hi, Gladys. Welcome!

無事に動いていることが確認できた。

WordPress.orgに登録したプラグインをGitHub Actionを使用しGitHub上で管理する

nove-b

WordPressのバージョン管理はSubversion で行われるのだが、なかなか慣れずに更新が億劫になってきたので、Githubで更新できるようにしてみた。

Github Actionを使用する

10up.comがWordPress.orgのプラグインリポジトリにデプロイするGitHub Actionsを公開してくれているので、それを活用させていただく。

Github リポジトリを作成する

ディレクトリ構成

まずはいつも通りGithubのリポジトリを作成する。

本当にいつも通りで問題ないけれど、WordPressのスラッグのとリポジトリ名を揃えた方が後々ほんの少しだけ楽になる。

ディレクトリ構成は下記のようにする。

.
├── .wordpress-org
│   ├── banner-772x250.png
│   ├── icon-128x128.png
│   └── screenshot-1.png
├── README.md
├── plugin-sample.php
└── readme.txt

.wordpress-orgにSVNリポジトリのassetsフォルダの中身をコピーする。

Github Action を作成する

リポジトリのActionsへ行き、New workflow → set up a workflow yourselfでYAMLファイルの作成画面に行く。

ファイル名はわかりやすい名前（ex:wordpress-plugin-deploy）を指定する。

次にaction-wordpress-plugin-deployページにあるExample Workflow Filesの内容をコピペする。

name: Deploy to WordPress.org
on:
  push:
    tags:
    , "*"
jobs:
  tag:
    name: New tag
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
    - name: Build # Remove or modify this step as needed
      run: |
        npm install
        npm run build
    - name: WordPress Plugin Deploy
      uses: 10up/action-wordpress-plugin-deploy@stable
      env:
        SVN_PASSWORD: ${{ secrets.SVN_PASSWORD }}
        SVN_USERNAME: ${{ secrets.SVN_USERNAME }}
        SLUG: my-super-cool-plugin # optional, remove if GitHub repo name matches SVN slug, including capitalization

Githubのブランチがmainの場合はactions/checkout@masterをactions/checkout@mainにする（曖昧）
特にnpmを使用していない場合は、下記記述を削除する。

    - name: Build # Remove or modify this step as needed
     run: |
       npm install
       npm run build

スラッグとリポジトリ名と同一であればSLUG: my-super-cool-plugin # optional, remove if GitHub repo name matches SVN slug, including capitalizationは不要なので削除する。

完了後、Commitする。

リポジトリ名/.github/workflows/ 配下に先程のファイルが作成されていれば、問題なくこの手順は完了。

SVNのログイン情報を登録

下記の手順で該当ページまで遷移する。

Settings → Secrets and variables → Actions

遷移後、New repository secretをクリックし、SVN_USERNAMEとSVN_PASSWORDの登録をする。

それぞれWordPress.orgログイン情報と同じだった。

デプロイしてみる

開発環境で下記コマンドを実行する。

git tag 0.0.1
git push origin 0.0.1

タグが発行されるたびにGithub Actionsが発火し、WordPress.orgのプラグインリポジトリにデプロイしてくれる。

これでWordPressのプラグインを同一管理できるようになった。

● 参考

GitHub ActionsでWordPressのプラグインをGitHubのリポジトリからWordPress.orgのプラグインリポジトリにデプロイする。

TypeScriptで定義済みの型からプロパティを取り出し新しい型を作る方法

nove-b

過去に定義した型から新しい型を生成する

TypeScriptで型を定義したのち、その中の一部を使いたくなる時がある。

例えば、Personという型を定義した時、

export interface Person {
  age: number
  sex: 'man' | 'woman'
  bloodType: 'A' | 'B' | 'O' | 'AB'
}

bloodTypeという型を使用したいという時がある。

そういう時は、

export type BloodType = Person['bloodType']

上記のように書くことで型を取り出すことができる。

最初から最小で作るの吉？

export interface Age {
  age: number;
}

export type Sex = 'man' | 'woman';

export type BloodType = 'A' | 'B' | 'O' | 'AB';

export interface Person {
  age: Age;
  sex: Sex;
  bloodType: BloodType;
}

そもそも上記のように最小で作っておいた方がいい？

ただ使わないものも多いので、取り出す方が労力が少なく済みそうな気がする。

React NativeでBottom Tabs Navigatorを使用しタブナビゲーションを実装する

nove-b

スマホアプリでよく見るボトムメニューをReact Nativeで導入するには、Bottom Tabs Navigatorというパッケージをインストールする必要がある。

ちなみにナビゲーションには他にもStack Navigatorというものもあり、こちらは一覧画面から詳細画面への遷移等に用いられるらしい。

詳細は↓に引用した。

StackNavigator

StackNavigatorは主にはアプリにおける「一覧画面」と「詳細画面」のような関係性がある画面間の遷移の用いられます。特徴として画面が手前に積み重なっていくような挙動をし、iOSの右スワイプ(画面の左端を掴んで右にスワイプ)やAndroidの戻るボタンで1つ前の画面に戻ることができます。

【RN】StackとBottomTabNavigatorを組み合わせたサンプル

BottomTabNavigator

アプリにおいて機能がいくつかのカテゴリに分かれている場合にBottomTabNavigatorは用いられます。TwitterやFacebookやInstagramなど、多機能なアプリは大概このBottomTabNavigatorで画面制御を行っています。

【RN】StackとBottomTabNavigatorを組み合わせたサンプル

実践していく

まずは移動するページが欲しいので、

mkdir src
mkdir src/screens
touch src/screens/Sample.tsx

適当に作成する。

Sample.tsxは

import React from "react";
import { ScrollView, View, Text } from "react-native";
const Sample = () => {
    return (
        <ScrollView>
            <View>
                <Text>Sample</Text>
            </View>
        </ScrollView>
    )
}

export default Sample;

こんな感じになる。

ちなみに、divに相当するものがViewコンポーネントで、pタグに相当するのがTextコンポーネント。そしてScrollViewはコンテンツをスクロールできるようにするもの。

作成したページをApp.tsxで読み込む。

import Sample from './src/screens/Sample'

export default function App() {
  return (
    <Sample />
  )
}

同様にSample2とかを作成する。

ただこの時点でApp.tsxに読み込むのは。SampleかSample2のどちらか一方でいい。

必要なパッケージをインストールする

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/bottom-tabs

上記インストール後にApp.tsxを下記のように変更する。

import { NavigationContainer } from '@react-navigation/native'
import Sample from './src/screens/Sample'
import Sample2 from './src/screens/Sample2';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default function App() {
  return (

    <Tab.Navigator>
      <Tab.Screen
      name="Sample"
      component={Sample}
      />
      <Tab.Screen
      name="Sample2"
      component={Sample2}
      />
    </Tab.Navigator>

  )
}

これでタブは完成した。

実機で確認することでページ遷移していることを確認できる。

カスタマイズの例

アイコンの付与

タブにアイコンを付与するには、

import { iconType } from "@expo/vector-icons";でアイコンをインストールし、

<Tab.Screen
  name="FromGift"
  component={FromGift}
  options={{
    title: "Give",
    tabBarIcon: ({ color, size }) => (
      <SimpleLineIcons name="present" color={color} size={size} />
    ),
  }}
/>

Tabにオプションを追加する。

スタイルの変更

キーワード	内容
headerStyle	ヘッダーのスタイルを記述する部分
headerTintColor	ヘッダーのタイトルの色
headerTitleStyle	ヘッダータイトルのスタイルを記述する部分
tabBarStyle	下方のタブのスタイルを記述する部分
tabBarInactiveTintColor	タブバーアイコンの色
tabBarActiveTintColor	タブバーのアクティブ（表示されている方）の色

</body> </html>

<Tab.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: "#666",
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold",
      },
      tabBarStyle: {
        backgroundColor: "#666",
      },
      tabBarInactiveTintColor: "#ffffff88",
      tabBarActiveTintColor: "#fff",
    }}
>

こんな感じでスタイルも変更できる。

React NativeでStackNavigatorを使用し一覧から詳細への遷移を実装する

nove-b

過去にBottom Tabs Navigatorを作成したので、今回は、Stack Navigatorを導入する。

実装に期待する動きは、

タブ移動が可能
タブ移動後に詳細ページへの遷移が可能

上記の通りなので、Bottom Tabs NavigatorとStack Navigatorを併用する必要がある。

その前提で進めていく。

必要なパッケージをインストールする

npm install @react-navigation/stack
npm install react-native-gesture-handler

インストール後、必要なファイルを作成する。

実装していく

mkdir src
mkdir src/stack
touch src/screens/SampleStackScreen.tsx

SampleStackScreen.tsxは下記の通りになる。

import React from 'react'
import Sample from '../screens/Sample'
import { createStackNavigator } from '@react-navigation/stack'
import SampleDetail from '../screens/SampleDetail'
const Stack = createStackNavigator()

const SampleStackScreen = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Sample" component={Sample} />
      <Stack.Screen name="SampleDetail" component={SampleDetail} />
    </Stack.Navigator>
  )
}

export default SampleStackScreen

上記は、SampleとSampleDetailへの遷移について書かれている。

次にこれをタブナビゲーションに適応させる。

App.tsxに

<Tab.Screen
  name="SampleStackScreen"
  component={SampleStackScreen}
  options={{
    title: 'Sample',
    tabBarIcon: ({ color, size }) => (
      <SimpleLineIcons name="present" color={color} size={size} />
    ),
  }}
/>

のように記載する。

これでタブ移動でSampleStackScreenが開けるようになった。

そしてここには一覧ページと詳細ページへの遷移が記述されているので、まず、Sampleが開く。

Sampleは、

import { NavigationProp, ParamListBase } from '@react-navigation/native'
import React from 'react'
import { ScrollView, View, Text, FlatList, Button } from 'react-native'

const data = [
  { id: '1', text: 'アイテム 1' },
  { id: '2', text: 'アイテム 2' },
  { id: '3', text: 'アイテム 3' },
  { id: '4', text: 'アイテム 4' },
  { id: '5', text: 'アイテム 5' },
  { id: '6', text: 'アイテム 6' },
  { id: '7', text: 'アイテム 7' },
  { id: '8', text: 'アイテム 8' },
  { id: '9', text: 'アイテム 9' },
  { id: '10', text: 'アイテム 10' },
  { id: '11', text: 'アイテム 11' },
  { id: '12', text: 'アイテム 12' },
  { id: '13', text: 'アイテム 13' },
  { id: '14', text: 'アイテム 14' },
  { id: '15', text: 'アイテム 15' },
  { id: '16', text: 'アイテム 16' },
  { id: '17', text: 'アイテム 17' },
  { id: '18', text: 'アイテム 18' },
  { id: '19', text: 'アイテム 19' },
  { id: '20', text: 'アイテム 20' },
]

interface SampleProps {
  navigation: NavigationProp<ParamListBase> // 必要に応じて正確な型を指定する
}

const Sample: React.FC<SampleProps> = ({ navigation }) => {
  return (
    <ScrollView className="p-5">
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View >
            <Text>コンテンツ {item.id}</Text>
            <Button
              title="詳細へ"
              onPress={() =>
                navigation.navigate('SampleDetail', { id: item.id })
              }
            />
          </View>
        )}
      />
    </ScrollView>
  )
}

export default Sample

こんな感じにする。

そうすると、20件のカードが表示される。

そこにボタンがあり、ボタンをプレスすることでSampleDetailに遷移する。

SampleDetailは下記のように記載することで、

import { RouteProp, useRoute } from '@react-navigation/native'
import React from 'react'
import { ScrollView, View, Text } from 'react-native'

type ParamList = {
  YourScreenName: { id: number } // ここでidの型を指定する
}

type RouteParams = RouteProp<ParamList, 'YourScreenName'>

const SampletDetail = () => {
  const route = useRoute()
  const id = route.params?.id
  return (


    詳細 { id }


)
}

export default SampletDetail

遷移後のページでidが表示されるようになった。

ブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能

nove-b

ステルスアフェリエイト広告の規制強化

よくわからないけど、ステルスマーケティングは景品表示法違反ということで、令和5年10月1日から規制されることになるらしい。

ということでPR表記がないアフェリエイト広告（多くの場合PR表記なんてない）も規制の対象になるとのこと。

なので、今後ステレスアフェリエイト広告は撲滅するかもしれないけれど、ニュースに疎いのでそんなことは知らなかった。

知らなかったうえで、アフェリエイト広告に嫌気がさしたので、ブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能を作ってみた。

アフェリエイト広告に嫌気がさし、Chrome拡張機能開発

アフェリエイト広告を自身もブログでやっていたことがあるので、何も知らずに騙されることはないが、やっていたので、どれがアフェリエイト広告なのか判断がつく。

分かってしまうが結果、世の中アフェリエイト広告だらけという現実に嫌気がさしてきた。

また見分けがつくとは言え、マウスオーバーしないと判断ができない。

なので地雷原を歩くように最新の注意をはらってきた。

まあ、別にアフェリエイト広告を踏んだところでどうでもいいんだけど、なんとなく気になる。

そういった経緯で前述したようにブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能を作った。

アフェリエイトリンクを赤枠で囲む拡張機能

ブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能

使用すると、

のようにアフェリエイトリンクが赤枠で囲まれ、リンク文字列の前に💰マークが付く。

これで一目でアフェリエイトリンクが判断でき、快適なブラウザ生活を送れるようになった。

アクセストークン等を使用せず、お手軽にMastodonのタイムラインをWebページに読み込むことできる仕組みを作成した

nove-b

Hello Mastodon

TwitterよりMastodonの方がよっぽど居心地がいい。

ということでMastodonにより生息するようになったのだが、フォローしたい人もいないければ、フォローしてくれる人もいない。

というのも分散型ということで、Mastodonは検索が弱く、フォローしたい人をうまく探し出せないようだった。

そのため、エンジニアと相互関係になりたいのだが、そもそもフォローしたい人をいまだに見つけ出せずにいる。

ということで、このブログに埋め込むことで、このブログにたどり着いてくれた人（たぶんエンジニア）にフォローをしてもらおうと思い立った。

そこでこのブログにMastodonのタイムラインを埋め込んだ。

手軽にMastodonのタイムラインを埋め込める！

そしてどうせならだれでも使えるようにしようということで、公開することにした。

mastodon-timeline

アクセストークン等を使用せず、お手軽にMastodonのタイムラインをWebページに読み込むことができますので、ぜひ使ってみてください。

そしてFediverseで繋がりましょう。

コンパイルを含む、ワードプレスのテーマをLocal（旧Local by Flywheel）で作成する場合にシンボリックリンクを使うようになった

nove-b

WordPressのテーマをどう管理するか

Local（旧Local by Flywheel）を使用してワードプレスのテーマを作成する時、フォルダ構成とかをどうすればいいのかいつも悩んでいた。

作成したテーマをGithubで管理する場合は、Local（旧Local by Flywheel）のフォルダ構成の中にテーマフォルダを作成し、その中をGit管理し、node_modulesもそこで管理していた。

ただ本当にそれでいいのかしら。

テーマの中にnode_modulesがある場合はワードプレスにアップロードする時はnode_modulesは削除したりして運用していたが、面倒くさい。

そんな時に、いまさらながらと思われるかもだが、シンボリックリンクを知った。

シンボリックを使用してみる

シンボリックリンクを作成すれば、

.
├── .git
├── node_modules
├── package.json
├── src
└── theme-name
    ├── assets
    ├── index.php
    └── ...etc

上記のようなディレクト構成にし、開発ディレクトリのsrcにあるSassとtsのようなコンパイルが必要なものを theme-nameにビルドすることで、theme-nameに不要なものを格納せずに済む。

そのうえで、theme-nameをLocal（旧Local by Flywheel）のwp-content/themes/theme-nameとリンクさせれば、良い。

コマンドプロンプトを管理者で開き、下記コマンドを実行する。

mklink /D "C:\Users\USER_NAME\Local Sites\SITE_NAME\app\public\wp-content\themes_link" "C:\Users\USER_NAME\デスクトップ\SITE_NAME\wp\wp-content\themes/theme-name"

上記はシンボリックを作成するコマンドで

mklink /D <シンボリックリンクのパス> <リンク先のパス>

となる。

nth-childとnth-of-typeの違いを理解する

nove-b

nth-child

親要素内のすべての子要素に対して適用され、その中から条件に一致する要素が選択される。そのため要素の種類に関係なく、すべての子要素が考慮される。

nth-of-type

親要素内の特定の要素タイプ（タグ名）に対して適用され、その中から条件に一致する要素が選択される。そのため要素の種類に基づいて選択がされる。

具体例

例えば以下のコードがあった時、

<div class="example">
  <div>Item 1</div>
  <p>Item 2</p>
  <div>Item 3</div>
  <p>Item 4</p>
  <div>Item 5</div>
</div>

nth-child

.example div:nth-child(3) {
  color: red;
}

この場合、.example内の直下のdiv要素の中から、3番目の要素（"Item 3"）が赤くなる。

nth-of-type

.example div:nth-of-type(3) {
  color: blue;
}

この場合、.example内の直下のdiv要素の中から、同じ種類の要素の中で3番目の要素（"Item 5"）が青くなる。

VS Codeの拡張機能「Ascii Tree Generator」を使用しツリーファイル構造をサクッと作成する

nove-b

VS Code の拡張機能「Ascii Tree Generator」

インストール

ディレクトリ構造など面倒なツリーを#タグを使って簡単に書けるようにしてれる拡張機能。

Githubのドキュメントに詳しい説明がある。

使用方法

# public
# dist
## index.d.ts
## index.js
# src
## index.ts

↑ のように作成し選択、Ctrl+Shift+Pでコマンドを開き、Pre-Formatted Tree Stringを選択する。

.
├── public
├── dist
│   ├── index.d.ts
│   └── index.js
└── src
  └── index.ts

そうすると上記のように展開される。

Go LangでWebAPIを作成するために、まずはDockerでMySQLを構築する

nove-b

普段フロントエンドをメインとしているので、バックエンドの環境構築に疎い。今まではFirebaseを使用することが多く、前回はじめてNestJSで本格的にバックエンドの構築をした。とは言えNestJSはJavascriptである。

Windows11に入れたMySQLとNest.Jsを接続し、テーブルを作成する

難しかったけど、新しいことに挑戦した感じがしなかった。しかもその時、とにかく早く実装したかったので、MySQLをWindowsにインストールしたうえでテストしていた。

実際の案件ではそんなことありえないので、しっかりDockerで環境を構築し、言語はGo Langを採用することにした。

まずはDockerでMySQLを構築する

docker-compose.yaml を作成する

version: '3'
services:
  mysql:
    image: mysql:latest
    container_name: my-mysql-container
    environment:
      MYSQL_ROOT_PASSWORD: your_root_password
      MYSQL_DATABASE: your_database_name
      MYSQL_USER: your_username
      MYSQL_PASSWORD: your_password
    ports:
      , "3306:3306"
    volumes:
      - ./data:/var/lib/mysql

で、docker-compose up -dを実行する。

error during connect: this error may indicate that the docker daemon is not running: Get "http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.24/containers/json?all=1&filters=%7B%22label%22%3A%7B%22com.docker.compose.project%3Dproject-backend%22%3Atrue%7D%7D": open //./pipe/docker_engine: The system cannot find the file specified.

というエラーが出た。

よく分からないけど、Dockerが起動していないことが原因のようなので、Start-Service dockerコマンドを入力しろとGPTに教えてもらったが、

'Start-Service' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

というエラーが出た。

Dockerを立ち上げる

そういえばDocker Desktopなるものを過去に使ったことがあるのを思い出したので、

Docker Desktopを立ち上げて再度挑戦してみる。

$ docker-compose up -d
[+] Running 11/11
 - mysql Pulled                                                    52.7s
   - 8e0176adc18c Pull complete                                     14.4s
   - 2d2c52718f65 Pull complete                                     14.7s
   - d88d03ce139b Pull complete                                     14.9s
   - 4a7d7f11aa1e Pull complete                                     15.5s
   - ce5949193e4c Pull complete                                     15.7s
   - f7f024dfb329 Pull complete                                     15.8s
   - 5fc3c840facc Pull complete                                     27.9s
   - 509068e49488 Pull complete                                     28.1s
   - cbc847bab598 Pull complete                                     45.2s
   - 942bef62a146 Pull complete                                     45.6s
[+] Running 2/2
 - Network project-backend_default  Created            0.4s
 - Container my-mysql-container                   Started            8.7s

いけた、っぽい。

HeidiSQLで接続してみる。

ネットワークの種類: MySQL（必要に応じてSSHトンネリング）
ホスト名/IP: 127.0.0.1（これはローカルマシンのIPアドレスです）
ユーザー: Docker Composeファイルで指定したMySQLユーザー（この場合、your_username）
パスワード: Docker Composeファイルで指定したMySQLパスワード（この場合、your_password）
ポート: 3306（これはデフォルトのMySQLポート）
データベース: Docker Composeファイルで指定したMySQLデータベース（この場合、your_database_name）

上記手順で接続することができた。

Go LangでWebAPIを作成するために、GolangでMySQLに接続する

nove-b

HeidiSQLでSQLを実行する

次に、Go LangでWebAPIを作成するために、まずはDockerでMySQLを構築するで作ったMySQLにデータベースを作成する。HeidiSQLから作成しようとするが、

SQL 0A80E90FC (1044): Access denied for user 'your_username'@'%' to database 'project'uery

という権限エラーが出るようになった。

version: '3'
services:
  mysql:
    image: mysql:latest
    container_name: project
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: project
      MYSQL_USER: username
      MYSQL_PASSWORD: password
    ports:
      , "3306:3306"
    volumes:
      - ./data:/var/lib/mysql

に変更したらできた。ちょっと理由はわからない。

で、projectというデータベースでSQLを実行する。

CREATE TABLE sample (
  id INT AUTO_INCREMENT PRIMARY KEY,
  firstName VARCHAR(255),
  lastName VARCHAR(255),
  isActive BOOLEAN DEFAULT TRUE
);

これでSampleのテーブルを作成することが出来た。

GoLangでテーブルを作成する

次にGORMをインストールする。

go get -u gorm.io/gorm
go get -u gorm.io/driver/sqlite

を実行すると、

require (
	github.com/jinzhu/inflection v1.0.0 // indirect
	github.com/jinzhu/now v1.1.5 // indirect
	github.com/mattn/go-sqlite3 v1.14.18 // indirect
	gorm.io/driver/sqlite v1.5.4 // indirect
	gorm.io/gorm v1.25.5 // indirect
)

更新された。

上のふたつは謎だけど、それっぽいのは入ってきた。

よく考えたらMySQLを使用するので、

go get -u gorm.io/driver/mysql

だった。

ちなみに不要パッケージの削除方法はわからなかった。(要調査)

main.goに下記をコピペ。


package main

import (
	"gorm.io/driver/mysql"
	"gorm.io/gorm"
)

type User struct {
	// gorm.Modelをつけると、idとCreatedAtとUpdatedAtとDeletedAtが作られる
	gorm.Model

	Name     string
	Age      int
	IsActive bool
}

func main() {
	// dbを作成します
	db := dbInit()

	// dbをmigrateします
	db.AutoMigrate(&User{})
}

func dbInit() *gorm.DB {
	dsn := "root:password@tcp(127.0.0.1:3306)/project?charset=utf8mb4&parseTime=true"
	db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		panic("failed to connect database")
	}
	return db
}

これで実行すると

$ go run src/main.go

2023/11/28 17:51:13 C:/01_myPROJECT/project-Backend/src/main.go:22 SLOW SQL >= 200ms
[282.042ms] [rows:0] CREATE TABLE `users` (`id` bigint unsigned AUTO_INCREMENT,`created_at` datetime(3) NULL,`updated_at` datetime(3) NULL,`deleted_at` datetime(                    (3) NULL,`name` longtext,`age` bigint,`is_active` boolean,PRIMARY KEY (`id`),INDEX `idx_users_deleted_at` (`deleted_at`))

作成したDBにusersテーブルが作成された。

これで接続が確認できた。

Go LangでWebAPIを作成するために、Golangでサーバーを立ち上げる

nove-b

net/httpでサーバーを立ち上げる

DBと接続することはできたので、次はエンドポイント作成のためサーバーを立ち上げる。

サーバーを構築する組み込みのパッケージが用意されているので、そちらを使用する。

net/http

インストールの仕方がないとか思っていたけど、組み込み、つまり標準装備なので特にインストールは必要なく、importすれば使用可能だった。

で、

package main

import (
  "fmt"
  "log"
  "net/http"
)

func homePage(w http.ResponseWriter, r *http.Request){
  fmt.Fprintf(w, "Welcome to the HomePage!")
  fmt.Println("Endpoint Hit: homePage")
}

func handleRequests() {
  http.HandleFunc("/", homePage)
  log.Fatal(http.ListenAndServe(":8081", nil))
}

func main() {
    handleRequests()
}

上記をmain.goに記載したうえで、$ go run src/main.goを実行する。

http://localhost:8081/

に訪れると、

Welcome to the HomePage!

が表示されている。これでサーバー立ち上げの確認ができた。

Go LangでWebAPIを作成するために、GolangでエンドポイントにアクセスしDBからデータを取得する

nove-b

でDBと接続することはできたし、サーバーを立ち上げることに成功した。

User情報を取得するAPIを作成する

次は、特定のエンドポイントにアクセスした際に、DBからデータを取得する。

具体的にはhttp://localhost:8081/usrsにアクセスした際にusersテーブルのデータを取得できるようにしたい。

エンドポイントを作成する

まずはhttp://localhost:8081/usrsのエンドポイントを作成する。

func sample(w http.ResponseWriter, r *http.Request) {
	fmt.Fprintf(w, "Welcome to the sample!")
	fmt.Println("Endpoint Hit: sample")
}

func handleRequests() {
	http.HandleFunc("/sample", sample)
	log.Fatal(http.ListenAndServe(":8081", nil))
}

handleRequestsをmain関数の中で実行すればhttp://localhost:8081/usrsにアクセスした際に

Welcome to the sample

と表示されるようになった。

ちになみに、

	fmt.Fprintf(w, "Welcome to the sample!")

上記のwが謎で調べてみたところ、

w を使用して Write メソッドを呼び出すことで、HTTPレスポンスの本文をクライアントに送信することができます。fmt.Fprintf(w, "Welcome to the sample!") は、fmt.Fprintf 関数を使用してフォーマットされた文字列を w.Write を介してクライアントに送信しています。

とのことだった。

いまいち理解しかねるけれど、なんとなく必要なことは分かった。

DBのデータをフェッチする

次にhttp://localhost:8081/usrsにアクセスした際にDBの値を返すようにしてみる。

まずはDBに接続する関数を作成する。これは前回も作成した。

func dbInit() *gorm.DB {
	dsn := "root:password@tcp(127.0.0.1:3306)/project?charset=utf8mb4&parseTime=true"
	db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		panic("failed to connect database")
	}
	return db
}

次に、DBからFetchする関数を作成する。


var users []User

func fetchUsers(w http.ResponseWriter, r *http.Request) {
	db := dbInit()

	db.Find(&users)
	fmt.Println(users)
	profJson, _ := json.Marshal(users)
	fmt.Fprintf(w, string(profJson))
}

最後にエンドポイントにアクセスした際にfetchUsersを実行するように設定する。

func handleRequests() {
	http.HandleFunc("/users", fetchUsers)
	log.Fatal(http.ListenAndServe(":8081", nil))
}

func main() {
	handleRequests()
}

これでhttp://localhost:8081/usersにアクセスすると、

[{"ID":1,"CreatedAt":"2023-01-01T12:00:00Z","UpdatedAt":"2023-01-01T12:30:00Z","DeletedAt":null,"Name":"John Doe","Age":25,"IsActive":true},{"ID":2,"CreatedAt":"2023-01-02T09:15:00Z","UpdatedAt":"2023-01-02T10:00:00Z","DeletedAt":null,"Name":"Jane Smith","Age":30,"IsActive":false}]

が取得できた。

全体像はこんな感じ。

全体のコード

package main

import (
	"encoding/json"
	"fmt"
	"log"
	"net/http"

	"gorm.io/driver/mysql"
	"gorm.io/gorm"
)

type User struct {
	// gorm.Modelをつけると、idとCreatedAtとUpdatedAtとDeletedAtが作られる
	gorm.Model

	Name     string
	Age      int
	IsActive bool
}

var users []User

func handleRequests() {
	http.HandleFunc("/users", fetchUsers)
	log.Fatal(http.ListenAndServe(":8081", nil))
}

func main() {
	handleRequests()
}

func dbInit() *gorm.DB {
	dsn := "root:password@tcp(127.0.0.1:3306)/project?charset=utf8mb4&parseTime=true"
	db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		panic("failed to connect database")
	}
	return db
}

func fetchUsers(w http.ResponseWriter, r *http.Request) {
	db := dbInit()

	db.Find(&users)
	fmt.Println(users)
	profJson, _ := json.Marshal(users)
	fmt.Fprintf(w, string(profJson))
}

全体のコード（リファクタリング版）

ここまでをリファクタリングしてみる。

package main

import (
	"encoding/json"
	"fmt"
	"log"
	"net/http"
	"os"

	"github.com/joho/godotenv"
	"gorm.io/driver/mysql"
	"gorm.io/gorm"
)

type User struct {
	// gorm.Modelをつけると、idとCreatedAtとUpdatedAtとDeletedAtが作られる
	gorm.Model

	Name     string
	Age      int
	IsActive bool
}

var db *gorm.DB

func init() {
	err := godotenv.Load() // 追加
	if err != nil {
		log.Fatal("Error loading .env file")
	}
	db = initDB()
}

func initDB() *gorm.DB {
	dsn := os.Getenv("DB_CONNECTION_STRING")
	if dsn == "" {
		log.Fatal("DB_CONNECTION_STRING 環境変数が設定されていません")
	}

	db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		log.Fatalf("データベースへの接続に失敗しました: %v", err)
	}

	return db
}

func handleRequests() {
	http.HandleFunc("/users", fetchUsers)
	log.Fatal(http.ListenAndServe(":8081", nil))
}

func main() {
	handleRequests()
}

func fetchUsers(w http.ResponseWriter, r *http.Request) {
	var users []User
	db.Find(&users)

	profJSON, err := json.Marshal(users)
	if err != nil {
		http.Error(w, "ユーザーデータのマーシャリングに失敗しました", http.StatusInternalServerError)
		return
	}

	fmt.Fprintf(w, string(profJSON))
}

.envを使用するために、

go get github.com/joho/godotenv

を実行する必要がある。

Go LangでWebAPIを作成するために、GolangでDBのデータを取得するmainファイルをそれぞれの責務に分割する

nove-b

Go LangでWebAPIを作成するために、GolangでエンドポイントにアクセスしDBからデータを取得するでデータ取得の処理は確認できた。

リファクタリング

次に現状、main.goにすべての記述をしていたが、それぞれ簡単に責務ごとにフォルダを分けることにした。

分け方は、下記の通り。

db フォルダ:

データベース関連の処理: db フォルダは主にデータベースとのやり取りに関するコードを含みます。
データベースの初期化: db.go ファイルではデータベースの初期化と接続に関するコードがあります。
モデルの定義: データベースのテーブルに対応するモデルを定義します（例: db.Model）。

// db/db.go
package db

import (
	"fmt"
	"os"

	"gorm.io/driver/mysql"
	"gorm.io/gorm"
)

var DB *gorm.DB

type Model struct {
	gorm.Model
}

func InitDB() {
	dsn := os.Getenv("DB_CONNECTION_STRING")
	if dsn == "" {
		fmt.Println("DB_CONNECTION_STRING 環境変数が設定されていません")
		os.Exit(1)
	}

	var err error
	DB, err = gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		fmt.Printf("データベースへの接続に失敗しました: %v\n", err)
		os.Exit(1)
	}

	fmt.Println("データベースに接続しました")
}

handlers フォルダ:

HTTP ハンドラとリクエスト処理: handlers フォルダは主に HTTP リクエストを処理し、それに対するレスポンスを生成するコードを含みます。
ルーティング: リクエストのルーティングやエンドポイントの定義が handlers.go にあります。
特定の機能の処理: 例えば、user_handler.go ではユーザー関連の処理が定義されています。

// handlers/handlers.go
package handlers

import (
	"project-Backend/src/db"
	"encoding/json"
	"fmt"
	"log"
	"net/http"
)

type User struct {
	db.Model // ここで埋め込みを行う

	Name     string
	Age      int
	IsActive bool
}

func HandleRequests() {
	http.HandleFunc("/users", FetchUsers)
	log.Fatal(http.ListenAndServe(":8081", nil))
}

func FetchUsers(w http.ResponseWriter, r *http.Request) {
	db := db.DB

	var users []User
	db.Find(&users)

	profJSON, err := json.Marshal(users)
	if err != nil {
		http.Error(w, "ユーザーデータのマーシャリングに失敗しました", http.StatusInternalServerError)
		return
	}

	fmt.Fprintf(w, string(profJSON))
}

main.go:

プログラムのエントリーポイントである main.go には、アプリケーションの起動や初期化といった主要な機能

// main.go
package main

import (
	"log"

	"project-Backend/src/db"
	"project-Backend/src/handlers"

	"github.com/joho/godotenv"
)

func init() {
	err := godotenv.Load()
	if err != nil {
		log.Fatal("Error loading .env file")
	}

	db.InitDB()
}

func main() {
	handlers.HandleRequests()
}

これで分かりやすくなった。

handlers フォルダを詳細に

FetchUsersもついでに分けることにする。

// handlers/user_handler.go
package handlers

import (
	"project-Backend/src/db"
	"encoding/json"
	"fmt"
	"net/http"
)

type User struct {
	db.Model

	Name     string
	Age      int
	IsActive bool
}

func FetchUsers(w http.ResponseWriter, r *http.Request) {
	db := db.DB

	var users []User
	db.Find(&users)

	profJSON, err := json.Marshal(users)
	if err != nil {
		http.Error(w, "ユーザーデータのマーシャリングに失敗しました", http.StatusInternalServerError)
		return
	}

	fmt.Fprintf(w, string(profJSON))
}

// handlers/handlers.go
package handlers

import (
	"log"
	"net/http"
)

func HandleRequests() {
	http.HandleFunc("/users", FetchUsers)
	log.Fatal(http.ListenAndServe(":8081", nil))
}

これでそれぞれ管理しやすくなった。

情報収集のためにRSSを作成した。

nove-b

作ったもの

📰💬✨｜購読している記事とか、好きなサイトとか。

気になるURLをosmosfeed.yamlにまとめて、購読するRSS Feed。

情報過多で、時間がない中、常々欲しいと思っていたが、しっくりくるアプリがなく、自分で作ることにした。

書いているブログが個人を象徴するポートフォリオになるように、購読している記事も個人を象徴する気がする。

購読している記事をプロフィールに掲載するサービスもおもしろいかもしれない。

さて、作り方だけれど、

osmosfeed

osmosfeedを使えば簡単にできた。

仕組みとしてはGithub Actionで購読しているサイトの新着記事を自動で取得してくれるというもの。

作り方

Readmeに書いてある通りに進めていけば基本的に問題ない。

Github Actionでエラーが出たけど、こちらのリポジトリが参照しているGithub Actionのコアのリポジトリを参照にしたところ解決した。

build error aftermodified osmosfeed.yaml when Deploy to Github pages: Permission to <xxxx/xxx>.git denied to github-actions[bot]

Closeしていたけど、一応解決方法をコメントしておいた。

Go Langで新規登録と退会のWebAPIを作成したので、やったことをまとめてみる。

nove-b

いたるまで

ディレクトリ構成

.
├── db
├── db.go
├── handlers
│   ├── auth
│   │   ├── delete_user_handler.go
│   │   └── create_user_handler.go
│   └── handlers.go
├── models
│   └── user_model.go
└── main.go

上記のように作成した。

簡単に説明すると、

db/db.go

データベースとの接続が行われる。

handlers/handlers.go

HTTP リクエストに対する処理を管理している。

handlers/auth/handlers.go

ユーザー作成・削除に対する処理を作成している。

handlers/models/user_model.go

ユーザーに関する構造体を定義している。データーベースモデル。

処理を追いかける

---
// main.go
---

package main

import (
	"log"

	"GiveAndTakeCollection-Backend/src/db"
	"GiveAndTakeCollection-Backend/src/handlers"
	"GiveAndTakeCollection-Backend/src/models"

	"github.com/joho/godotenv"
)

func init() {
	err := godotenv.Load()
	if err != nil {
		log.Fatal("Error loading .env file")
	}

	db.InitDB()
	db.DB.AutoMigrate(&models.User{})
}

func main() {
	handlers.HandleRequests()
}

データーベースと接続する

プログラム初期化時に init 関数が実行

まずプログラム初期化時にinit関数が実行される。

これはGolangの特殊仕様。

godotenv.Load()でgodotenvライブラリを使用し、.envを読み込む。

エラーが出た際はerrにエラーオブジェクトをセットする。

if err != nilは Go 言語においてエラー処理を行う際の一般的な書き方。

envが読み込めなかった場合、log.Fatal("Error loading .env file")が実行される。

実行されることで、メッセージをログに記録し、それからプログラムを即座に終了する。

log.Fatal()は致命的なエラーが発生した場合に使われるログ出力関数らしい。

db.InitDB()が実行される

問題がなければdb.InitDB()が実行される。

こちらはインポートされた"GiveAndTakeCollection-Backend/src/db"のInitDB関数が呼ばれる。

---
// db/db.go
---
package db

import (
	"fmt"
	"os"

	"gorm.io/driver/mysql"
	"gorm.io/gorm"
)

var DB *gorm.DB


// 不要？
type Model struct {
	gorm.Model
}

func InitDB() {
	dsn := os.Getenv("DB_CONNECTION_STRING")
	if dsn == "" {
		fmt.Println("DB_CONNECTION_STRING 環境変数が設定されていません")
		os.Exit(1)
	}

	var err error
	DB, err = gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		fmt.Printf("データベースへの接続に失敗しました: %v\n", err)
		os.Exit(1)
	}

	fmt.Println("データベースに接続しました")
}

先頭でpackage dbと定義しているため、db.InitDB()で呼び出すことができる。

このファイルではまず、gorm.DB型のポインタ変数DBを宣言している。これはGormのデータベース接続を表す変数。

ちなみに、ポインタ変数というのは「変数のメモリアドレスを格納するための特別な型の変数」ということらしい。

変数にはデータそのものが格納されますが、ポインタ変数にはメモリアドレスが格納されます。

とのこと。

ちなみにGoでは下記のように宣言する。

var x int  // 通常の変数
var ptr *int  // int型のポインタ変数

詳細な使い方は調べる必要がある。

あとvar DB *gorm.DBパッケージレベルで行う方がいいらしい。

var DB *gorm.DB の宣言が initDB 関数の中で行われる場合、その変数はローカル変数として initDB 関数のスコープ内にのみ存在します。この場合、他の関数やファイルから DB 変数にアクセスすることができなくなります。

一般的に、データベース接続などのリソースはアプリケーション全体で共有されることが多いため、var DB *gorm.DB の宣言は関数の外、パッケージレベルで行われることがあります。これにより、他の関数やファイルから DB 変数にアクセスでき、アプリケーション内で一貫性のあるデータベース接続が確保されます。

話を戻して次に、db.InitDB()の処理を追いかける。

	dsn := os.Getenv("DB_CONNECTION_STRING")
	if dsn == "" {
		fmt.Println("DB_CONNECTION_STRING 環境変数が設定されていません")
		os.Exit(1)
	}

dsnという変数に、os.Getenv("DB_CONNECTION_STRING")で取得した環境変数を格納する。

os.Getenvの戻り値の型はstringなので、もし環境変数が空文字であれば、エラーメッセージを標準出力し、プログラムを終了する。

ちなみに引数は下記の通り。

os.Exit(0): プログラムの正常な終了を示します。<br> os.Exit(1): プログラムがエラーで終了したことを示します。

一般的には非ゼロの終了コードはエラーを示す慣習とされています。

環境変数が適切に設定されていた場合は下記コードが実行される。

	var err error
	DB, err = gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		fmt.Printf("データベースへの接続に失敗しました: %v\n", err)
		os.Exit(1)
	}

	fmt.Println("データベースに接続しました")

ここでは、まずエラー変数を定義し、Gormを使用してMySQLデータベースに接続する。

成功するとDBに接続が設定され、失敗するとエラーがエラー変数に格納される。

if err != nil { ... }でエラーチェックが実行され、エラーの場合はエラーメッセージを標準出力し、プログラムを終了する。

問題がなければ、データベースに接続しましたが標準出力に表示される。

ここまでで、データベースの接続が完了し、次にmain関数が呼ばれる。

HTTP リクエストを処理するためのルーティングとサーバーの起動

main 関数が実行される

func main() {
	handlers.HandleRequests()
}

main関数では上記の通り、handlers パッケージが呼ばれている。

// handlers/handlers.go
package handlers

import (
	"GiveAndTakeCollection-Backend/src/handlers/auth"
	"log"
	"net/http"
)

func HandleRequests() {
	http.HandleFunc("/auth/new", auth.CreateUser)
	http.HandleFunc("/auth/delete", auth.DeleteUser)
	log.Fatal(http.ListenAndServe(":8081", nil))
}

HandleRequests関数は、HTTP リクエストを処理するためのルーティングとサーバーの起動を行っている。

これにより、/auth/newへのリクエストはauth.CreateUser関数で処理され、/auth/deleteへのリクエストはauth.DeleteUser関数で処理されるようになる。

auth.CreateUser が呼ばれた時

auth.CreateUserは下記のようなコード構成になっている。

package auth

import (
	"GiveAndTakeCollection-Backend/src/db"
	"GiveAndTakeCollection-Backend/src/models"
	"encoding/json"
	"fmt"
	"net/http"

	"golang.org/x/crypto/bcrypt"
)

func CreateUser(w http.ResponseWriter, r *http.Request) {
	db := db.DB
	tx := db.Begin() // トランザクションを開始

	// リクエストからデータを取得
	var userData models.User
	err := json.NewDecoder(r.Body).Decode(&userData)
	if err != nil {
		fmt.Println("JSONデコードエラー:", err)
		http.Error(w, "リクエストデータの解析に失敗しました", http.StatusBadRequest)
		return
	}

	hashedPassword, err := bcrypt.GenerateFromPassword([]byte(userData.Password), bcrypt.DefaultCost)

	if err != nil {
		fmt.Printf("パスワードのハッシュ化に失敗しました: %s", err)
		http.Error(w, "パスワードのハッシュ化に失敗しました", http.StatusInternalServerError)
		return
	}

	userData.Password = string(hashedPassword)

	// データベースに新しいユーザーを作成
	err = db.Create(&userData).Error
	if err != nil {
		fmt.Println("データベースエラー:", err)
		tx.Rollback()
		http.Error(w, "ユーザーの作成に失敗しました", http.StatusInternalServerError)
		return
	}

	// トランザクションをコミットして確定
	tx.Commit()

	// レスポンスを返す
	w.WriteHeader(http.StatusCreated)
	fmt.Fprintf(w, "ユーザーが作成されました")
}

CreateUser関数を追いかけると、まずdb := db.DBで db パッケージで定義したデータベース接続を取得する（var DB *gorm.DBパッケージレベルで行っていたのはこのような場合のため）。

次にtx := db.Begin()でトランザクションを開始する。

トランザクションというのは、一貫性のないデータを作らないための処理のこと。

var userData models.User
	err := json.NewDecoder(r.Body).Decode(&userData)
	if err != nil {
		fmt.Println("JSONデコードエラー:", err)
		http.Error(w, "リクエストデータの解析に失敗しました", http.StatusBadRequest)
		return
	}

次のブロックはまず、userDataという変数を作成する。 models.Userは型指定。

err := json.NewDecoder(r.Body).Decode(&userData)では、json.NewDecoder(r.Body)で HTTP リクエストのボディを読み込むためのデコーダー（変換機）を作成し、.Decode(&userData)でデコーダーを使ってボディの内容をuserDataという変数に変換（デコード）する。この操作は、JSON 形式のデータを Go の構造体（models.User）に変換する役割を果たしている。

もしエラーが出た際はエラーメッセージを標準出力し、HTTP レスポンスを生成してクライアントにエラーメッセージを返し、処理を終了させている。

エラーがない場合は、この時点でユーザーの登録したいデータ（HTTP リクエストのボディ）がuserDataに格納されている。

その次にuserDataのパスワード（ユーザーの入力したパスワード）をハッシュ化する処理が行われる。

hashedPassword, err := bcrypt.GenerateFromPassword([]byte(userData.Password), bcrypt.DefaultCost)

if err != nil {
	fmt.Printf("パスワードのハッシュ化に失敗しました: %s", err)
	http.Error(w, "パスワードのハッシュ化に失敗しました", http.StatusInternalServerError)
	return
}

// データベースに新しいユーザーを作成
userData.Password = string(hashedPassword)

これはbcryptのGoパッケージを使用している。

問題なく、ハッシュ化が行われれば、データベースにユーザーを作成する。

	err = db.Create(&userData).Error
	if err != nil {
		fmt.Println("データベースエラー:", err)
		tx.Rollback()
		http.Error(w, "ユーザーの作成に失敗しました", http.StatusInternalServerError)
		return
	}

	// トランザクションをコミットして確定
	tx.Commit()

	// レスポンスを返す
	w.WriteHeader(http.StatusCreated)
	fmt.Fprintf(w, "ユーザーが作成されました")

err = db.Create(&userData).Errorでデータベースに新規データを作成する。

その際エラーが出たらerrオブジェクトに代入する。

エラーがなければトランザクションをコミットし確定。

成功のレスポンスを返し、ユーザー作成が完了した。

ユーザー作成が出来たので、退会処理も同様に作成する。

auth.DeleteUser が呼ばれた時

package auth

import (
	"GiveAndTakeCollection-Backend/src/db"
	"GiveAndTakeCollection-Backend/src/models"
	"encoding/json"
	"fmt"
	"log"
	"net/http"
	"time"

	"gorm.io/gorm"
)

func DeleteUser(w http.ResponseWriter, r *http.Request) {
	db := db.DB
	tx := db.Begin() // トランザクションを開始

	// requestPayloadという構造体を作成する
	var requestPayload struct {
		// この構造体には UserID という名前のフィールドがあり、JSONのキーが user_id と対応している
		UserID uint `json:"user_id"`
	}
	// HTTPリクエストのボディをrequestPayloadにデコードする。結果、{"user_id": 123}のようになる。
	err := json.NewDecoder(r.Body).Decode(&requestPayload)
	if err != nil {
		log.Printf("JSONデコードエラー: %v", err)
		http.Error(w, "リクエストデータの解析に失敗しました", http.StatusBadRequest)
		return
	}

	var user models.User
	// `db.First` メソッドを使用して、データベースから最初に見つかったユーザーレコードを取得
	// &user は、ユーザーデータを取得するための構造体へのポインタ、データベースから取得した情報がこの構造体に格納される
	if err := db.First(&user, requestPayload.UserID).Error; err != nil {
		log.Printf("ユーザーが見つかりません: %v", err)
		tx.Rollback()
		http.Error(w, "指定されたユーザーが見つかりません", http.StatusNotFound)
		return
	}

	// deleted_at フィールドに現在の日時をセット
	user.DeletedAt = gorm.DeletedAt{Time: time.Now()}

	// データベースを更新
	if err := db.Delete(&user).Error; err != nil {
		log.Printf("データベースエラー: %v", err)
		tx.Rollback()
		http.Error(w, "ユーザーの退会に失敗しました", http.StatusInternalServerError)
		return
	}

	// トランザクションをコミットして確定
	if err := tx.Commit().Error; err != nil {
		log.Printf("トランザクションのコミットエラー: %v", err)
		http.Error(w, "ユーザーの退会に失敗しました", http.StatusInternalServerError)
		return
	}

	// ログを使って重要なイベントを残す
	log.Printf("ユーザーが退会しました。ユーザーID: %d", requestPayload.UserID)

	// レスポンスを返す
	w.WriteHeader(http.StatusOK)
	fmt.Fprintf(w, "ユーザーが退会しました")
}

これで退会処理もできた。

Go Langで新規登録のWebAPIを作成したので、認証周りをJWTで作成する。

nove-b

期待するもの

新規登録のAPIを作成したので、次はログイン機能を作成したい。

ログインは、メールアドレスとパスワードを送り一致したら、tokenを取得する。

で、tokenを使って認証付きのAPIを叩けるようになりたい。

tokenにはjwtを使用する。

jwtってなに？

これはどこかで調べてまとめる（気が向いた時）。

JWT認証を作成する

パッケージのインストール

github.com/dgrijalva/jwt-goパッケージの情報が多かったので、それに従うことにする。長い物には巻かれるべきで間違いない。

go get github.com/dgrijalva/jwt-go

パッケージをインストールする。

Tokenを生成する

まずjwt.goというファイルを作成する。

今回はauthフォルダの中に作成した。

それでは書いていく。

まずは、jwtを生成するためのシークレットキーを作成する。

var jwtKey = []byte("your_secret_key")

ここでは任意の文字列（今回は"your_secret_key"）をバイト列に変換し、jwtKeyに代入している。

バイト列というのがピンとこないので、

fmt.Printlnで書き出しみると、[121 111 117 114 95 115 101 99 114 101 116 95 107 101 121]となった。なんとなく理解した。

このようにして文字列をバイト列に変換することは、多くの場面でデータの操作や処理に利用されます。JWTの署名などのセキュリティ関連の操作では、シークレットキーをバイト列として扱うことが一般的です。

とのことでした。

次に、JWTのクレームを表す構造体であるClaimsを定義する。

これは任意のJSONデータっていう意味っぽい。

type Claims struct {
	Name string `json:"name"`
	jwt.StandardClaims
}

今回はnameを含めることにする。

と思ったけど、ユニークで必要がありそうなので、ユーザーIDにした。

下記のように変更する。

type Claims struct {
	UserID uint `json:"user_id"`
	jwt.StandardClaims
}

次に、Tokenを作成する関数を作成する。

コードの詳細はコメントアウトに書いた。

func generateToken(userId uint) (string, error) {

	// トークンの有効期限を設定(この場合は15分)
	expirationTime := time.Now().Add(15 * time.Minute)

	// トークンのClaimsを構築
	claims := &Claims{
		UserID: userId, // ユーザーIDをトークンに含める
		StandardClaims: jwt.StandardClaims{
			ExpiresAt: expirationTime.Unix(), // トークンの有効期限を設定
		},
	}

	// 新しいJWTトークンを作成
	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)

	// トークンを署名して文字列に変換
	tokenString, err := token.SignedString(jwtKey)
	if err != nil {
		return "", err
	}

	// : JWTトークンを文字列として表現したもの&エラーが発生しなかったことを示すための値を返却する
	return tokenString, nil
}

これでTokenを作成することができた。

ログイン時にこのTokenを返却することにする。

Tokenを認証する

次に認証を行う関数を作成する。

func Authenticate(next http.HandlerFunc) http.HandlerFunc {
	return func(w http.ResponseWriter, r *http.Request) {
		// Authorizationヘッダーからトークン文字列を取得します。
		tokenString := r.Header.Get("Authorization")

		// トークンが存在しない場合は、Unauthorizedエラーを返して処理を中断します。
		if tokenString == "" {
			http.Error(w, "Unauthorized", http.StatusUnauthorized)
			return
		}

		// トークン文字列から"Bearer "を削除します。
		tokenString = strings.Replace(tokenString, "Bearer ", "", 1)

		// JWTトークンをパースし、クレーム（Claims）を含むトークンオブジェクトを取得します。
		token, err := jwt.ParseWithClaims(tokenString, &Claims{}, func(token *jwt.Token) (interface{}, error) {
			return jwtKey, nil
		})

		// トークンのパースに失敗した場合は、Unauthorizedエラーを返して処理を中断します。
		if err != nil {
			http.Error(w, "Unauthorized", http.StatusUnauthorized)
			return
		}

		// トークンのクレームを取得し、有効であるかを検証します。
		claims, ok := token.Claims.(*Claims)
		if !ok || !token.Valid {
			http.Error(w, "Unauthorized", http.StatusUnauthorized)
			return
		}

		// 認証されたユーザーの情報をログに出力します。
		fmt.Printf("Authenticated user: %s\n", strconv.Itoa(int(claims.UserID)))

		// 次のハンドラ関数を呼び出します。
		next(w, r)
	}
}

ちなみにこの関数の関数名が大文字始まりなのは下記の通り。

Go言語では、関数や変数が大文字で始まる場合には他のパッケージから参照可能（エクスポート可能）となりますが、小文字で始まる場合には同じパッケージ内からのみアクセス可能となります。

で、このコントローラーを下記のように噛ませる。

	http.HandleFunc("/users", auth.Authenticate(FetchUsers))

これで認証が必要になった。

実際に叩くときは

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo4LCJleHAiOjE3MDMwODUxNzR9.bOJ6jYFLr3BneqtEhQdFb9b2y3lAubm3MpqXbzVQzQY

こんな感じでヘッダーを持たせる必要がある。

これでJWT認証ができるようになった。

Go Langで作成したログイン認証のjwtのアクセストークンが切れた時にどうするか

nove-b

アクセストークンの有効期限は短く

ログイン認証を作るうえで、アクセストークンの有効期限は短い方がいい、という情報を得た。

アクセストークンが盗まれた時に、備えてのことらしい。

例えば15分とか、って例で書かれていた。

そうすると15分ごとにログインをし直させなければならない。

それはユーザビリティ的にどうなのだろうか。という疑問が生まれた。

それを解決するのがリフレッシュトークンらしい。

アクセストークンとリフレッシュトークン

リフレッシュトークンはアクセストークンを再発行するために必要になる。

例えば、ログインをしアクセストークンを取得する。

15分後、アクセストークンが切れた場合はリフレッシュトークンを使用し、アクセストークンを再発行する。

その際、リフレッシュトークンも最新化する。

これで15分ごとにユーザーがログインし直すという苦痛から解放することができる。

アクセストークンは危険で、リフレッシュトークンは安全なの？

アクセストークンもリフレッシュトークンも一緒に得ることができ、同じように保存をしておく必要がある。

それなのにどうしてアクセストークンは危険で、リフレッシュトークンは安全なのだろうか。

ってずっと疑問だったけど、社内の博士に聞き解決した。

確率の問題

アクセストークン、リフレッシュトークンが盗まれるのは通信中である。

通信にアクセストークンを持たせて、15分間、何回通信をするだろうか。

それに比べてリフレッシュトークンはアクセストークンが失われた時にしか使用されないので、リフレッシュトークンに比べて安全だと言える。

ということ。

Go Langで作成したAPIをSwagger UIで表示する

nove-b

タイトルにあるようにSwaggerで作成したいのであれば、yamlを作成すればいい。

だけど、そんなことをするのは面倒くさい。

というのもNestJsではデコレーターを追加するだけで自動でSwagger UIを作成してくれた。

そこでGoでも同様な手順で実現できるライブラリを探してみた。

swaggo/swag

swaggo/swagを使えばできそうだったので試してみた。

インストール

go install github.com/swaggo/swag/cmd/swag@latest

アノテーションを作成する

main.goにアノテーションを追加する。

// @title sample api
// @version 1.0
// @description this is sample apigw

// @host localhost:18080
// @BasePath /api/v1

// @tag.name accounts
// @tag.description about accounts request
func main() {
	handlers.HandleRequests()
}

記入後にswag initを実行する。

.
├── docs.go
├── swagger.json
└── swagger.yaml

すると上記ファイルたちが生成される。

UIで確認する

これがいまいちわかなかったので、https://editor.swagger.io/に生成されたyamlファイルをコピペして見る方法にしているけど、localhost:18080/api/v1で見られるんだと思われる。

...見れないので、要調査。

⚠️ 違った。 localhost:18080/api/v1 上のURLはBaseURLだった。

まあ、問題ないので、いったん上記方法で行く。

追記：2023.12.30 Swagger ViewerVSCodeの拡張機能があった。

個別APIのアノテーションを作成する

// GetAccount
// @summary アカウントの情報を返します
// @description user_idを元にアカウント情報を返します
// @tags accounts
// @produce json
// @success 200
// @failure 401
// @router /accounts [get]
func FetchUserById(w http.ResponseWriter, r *http.Request) {
  ...

こんな感じで、アノテーションを追加すればいける。

詳細はhttps://github.com/swaggo/swag?tab=readme-ov-file#declarative-comments-formatに詳しい。

大枠はこれくらい。

後は最適化していくだけ。

Hello New Blog

nove-b

最近鳴りを潜めていたブログをリニューアルしたいという欲望が、新年早々むくむく頭をあげてきたので、欲望のままにリニューアルすることにした。

今までのブログ歴

初めてブログを立ち上げた時は、WordPressの無料テーマを使った。確かあれは新卒で入社したWebサイト制作会社を退職した時で、コードを書くことに飢えていた。そこでブログを立ち上げ、「実験だ」と、無料テーマをカスタマイズしては楽しんでいた。

それから1年後くらいにWordPressの自作テーマを作りたくなり、リニューアルした。リニューアルした後も色々新規ページを作って楽しんだりしていた。記事のメインは技術についてで、それなりに見てくれる人も多く、有難いことに副業の依頼もいただけたりした。

徐々にWordPressに慣れてくると、次にWordPress以外のプラットフォームでブログを作りたいという欲求がむくむくと頭を上げ始めた。

そこで当時話題になっていたmicroCMSとNetlifyとNuxt2で静的ブログを作成した。これもまたいい経験であった。転職活動の時にいいポートフォリオになってくれたし、それなりの知見を得ることができた。

そのあと、またWordPressに戻り2度ほどテーマを作成し、拡張機能 (Create Eye Catch For Classic) も作成した。

そして今に至るのである。

書いた記事は資産になるはずだがどこかに消えた

ということで今まで、5回ブログをリニューアルしている。テーマだけを変えればいいのだが、そのたびサーバーを変えているので、記事の記録はすべて引き継がれていない。これは自分が悪いのだが、エクスポートするのもそれなりに面倒くさいことはわかってほしい。

そんな面倒なことはしたくないが、きっと今後もブログはリニューアルし続けるに違いない。そのたびに今までのように記事が失われるのは避けたいということで、Githubで記事を管理することにした。Githubで記事を管理し、それをWordPressにポストする。これが最適解に思えたのだが、運用してみるとこれが何とも面倒くさい。

特に編集するときが面倒くさい。

まずGithubで変更し、そのあと修正をWordPressの投稿画面でチェックする。問題がなければ公開する。なんとも面倒で仕方ない。

Githubでcommitするたびに記事が公開されればいいのに、という思いになり、静的サイトジェネレータを使うことにした。

ヘッドレスCMSでもいいのだが、すべてのソースコードがGithubに集約されているので、管理画面をこれ以上増やしたくない。

そういうことでこのブログを立ち上げることにした。

ブログリニューアルした

っていうのも6回目となる。

どうせまたリニューアルするけど、記事はそのまま資産にできる。

Install Nuxt3 | ERR! @parcel watcher

nove-b

環境

windws11
node => v20.11.0
npm => 10.4.0
nuxt => 3.10.1

install

公式の手順に従っていく。

Installation · Get Started with Nuxt

npx nuxi@latest init <project-name>
❯ Which package manager would you like to use?
● npm
○ pnpm
○ yarn
○ bun

上記を実行すると、エラーが発生した。

npm ERR! gyp ERR! cwd C:~\node_modules@parcel\watcher

npm WARN cleanup Failed to remove some directories [
npm WARN cleanup   [
npm WARN cleanup     'C:\\project\\project-name\\node_modules',
npm WARN cleanup     [Error: EPERM: operation not permitted, scandir 'C:\project\project-name\node_modules\resolve\test\resolver\multirepo\packages\package-a'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'scandir',
npm WARN cleanup       path: 'C:\\project\\project-name\\node_modules\\resolve\\test\\resolver\\multirepo\\packages\\package-a'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\\project\\project-name\\node_modules\\@vercel',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\project\project-name\node_modules\@vercel\nft\node_modules\@rollup\pluginutils\dist'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\project\\project-name\\node_modules\\@vercel\\nft\\node_modules\\@rollup\\pluginutils\\dist'
npm WARN cleanup     }
npm WARN cleanup   ]
npm WARN cleanup ]
npm ERR! code 1
npm ERR! path C:\project\project-name\node_modules\@parcel\watcher
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@10.0.1
npm ERR! gyp info using node@20.11.0 | win32 | x64
npm ERR! gyp info find Python using Python version 3.9.6 found at "C:\Users\username\AppData\Local\Programs\Python\Python39\python.exe"
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp ERR! find VS not looking for VS2015 as it is only supported up to Node.js 18
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack at VisualStudioFinder.fail (C:\project\project-name\node_modules\node-gyp\lib\find-visualstudio.js:113:11)
npm ERR! gyp ERR! stack at VisualStudioFinder.findVisualStudio (C:\project\project-name\node_modules\node-gyp\lib\find-visualstudio.js:69:17)
npm ERR! gyp ERR! stack at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
npm ERR! gyp ERR! stack at async createBuildDir (C:\project\project-name\node_modules\node-gyp\lib\configure.js:69:26)
npm ERR! gyp ERR! stack at async run (C:\project\project-name\node_modules\node-gyp\bin\node-gyp.js:81:18)
npm ERR! gyp ERR! System Windows_NT 10.0.22621
npm ERR! gyp ERR! command "C:\\Users\\username\\AppData\\Local\\Volta\\tools\\image\\node\\20.11.0\\node.exe" "C:\\project\\project-name\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd C:\project\project-name\node_modules\@parcel\watcher
npm ERR! gyp ERR! node -v v20.11.0
npm ERR! gyp ERR! node-gyp -v v10.0.1
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in: C:\Users\username\AppData\Local\npm-cache\_logs\2024-02-13T10_14_47_279Z-debug-0.log

 ERROR  Error: Command failed with exit code 1: npm install

エラーを見てみると@parcel\watcher あたりが怪しい気がする。

@parcel/watcherはどうやらファイルの監視を行うnpmパッケージらしい。オプションで設定ができるようにNuxt3に標準装備されているっぽい。

Set an alternative watcher that will be used as the watching service for Nuxt. Nuxt uses chokidar-granular by default, which will ignore top-level directories (like node_modules and .git) that are excluded from watching. You can set this instead to parcel to use @parcel/watcher, which may improve performance in large projects or on Windows platforms. You can also set this to chokidar to watch all files in your source directory.

https://nuxt.com/docs/guide/going-further/experimental-features#watcher

Nuxt のウォッチングサービスとして使用される代替のウォッチャーを設定します。Nuxt はデフォルトで chokidar-granular を使用しており、ウォッチから除外されたトップレベルのディレクトリ（node_modules や .git など）を無視します。代わりに @parcel/watcher を使用するようにこれを設定することができます。これにより、大規模なプロジェクトや Windows プラットフォームでのパフォーマンスが向上する場合があります。また、ソースディレクトリ内のすべてのファイルをウォッチするようにこれを chokidar に設定することもできます。

この時点で何も気にせずにnpm installをしていたら問題なく起動していたかもしれないけど、試してないのでわからない。

「エラーが出た、気になる」ということで検索してみると、

running into errors installing Nuxt3 Inint nuxt 3 project fails with npm package

同様のエラーに遭遇しているひとも結構いるっぽい。

解決方法

大本営のリポジトリでも、Unable to install with command failed sh -c node-gyp rebuildのようにissue標記されているが、Nuxtの問題じゃないと言われている。で、その上の過程Unable to install with command failed sh -c node-gyp rebuildでもプルリクが出されている。

で、色々たらい回しされ、Unable to install with command failed sh -c node-gyp rebuildで、

If you add the following to package.json then do a clean install does it work?

"overrides": { "@parcel/watcher": "2.1.0" },

という希望が示されていたので、実行してみた。

$ npm i

> postinstall
> nuxt prepare

✔ Types generated in .nuxt                                                                                                                                                                                                                                19:37:24

added 732 packages, and audited 734 packages in 3m

120 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

インストールも成功し、

npm run dev -- -o

で無事にサーバーも起動した。

なんとなく気分の良くないインストール体験だった。

React主義だけど、より一層React主義になった。開発体験で挽回してくれることに期待している。

Hugo(ヒューゴ)でブログを立ち上げるまでにやったこと

nove-b

Hugoでこのブログを立ち上げたので、HugoのインストールからGithub Pageで公開するまで。

環境

windws11

Hugo

そもそもHugoのことをよく知らずに技術選定をしてしまったので、ここでしっかり調べておくことにする。

HugoはGoで記述された静的サイトジェネレータで 「ウェブサイトを構築するための世界最速のフレームワーク」 らしい。

The world’s fastest framework for building websites | Hugo

静的サイトジェネレータ

静的サイトジェネレーターとは、生（未加工）データとテンプレート群を基に、完全に静的なHTML Webサイトを生成するツールのことです。静的サイトジェネレーターは、基本的に個々のHTMLページをコーディングする作業を自動化し、それらのページをユーザーがすぐに使えるようにします。これらのHTMLページは事前作成されたものであるため、ユーザーはブラウザで即座に読み込むことができます。

静的サイトジェネレーターとは？

上記の通り、事前にHTMLを生成するのでパフォーマンスがいいのがメリットのひとつ。

Hugoのインストール

公式サイトに詳しい。 WindowsなのでWindowsのインストール方法通りに行った。

パッケージ管理システムのChocolatey、ScoopとWingetを使うインストール方法が提供されていた。他にも2つインストール方法が記載されている。比較表があるのでわかりやすい。

パッケージ管理システム

ちなみにパッケージ管理システムとは、

コンピュータのプログラムを一貫した方法でインストールやアンインストール、ライブラリなどの依存関係を解決する流れをツールによって管理を自動化するシステム

のこと。

npmとかComposerとかも言語のパッケージ管理ツールにあたる。

Chocolateyが有名っぽいけど、インストール方法がぱっと見わからなかったので、Scoopを使用することにした。

調べるとMacではHomebrew一択っぽい。Windowsではwingetが公式っぽく、インストールも必要なく使えて便利そうだった。

インストール情報をエクスポートすることもできるので、パソコンの買い替え時とかにも重宝できそうだった。

Windowsのパッケージマネージャー「winget」を使ってみた

今思えばwingetにすれば良かったと思うけど、Scoopを選択したので、それで進めていく。

Scoopでインストールする

scoop install hugo-extended

上記コマンドを使用すれば、hugoの拡張版をインストールすることができる。

'hugo-extended' (0.122.0) was installed successfully!

Hugoでサイトを構築する

Hugoでサイトを構築するのは簡単で、下記コマンドを叩くだけでいい。

hugo new site site-name

上記を実行した後に、

hugo -D serve

で、サイトを確認することができる。

テーマを選んで適応する

Hugoは沢山のテーマが提供されている。Wordpressに通ずるものがある。

Hugo Themes

今回は一番上にあったPaperModを採用することにした。

hugo-PaperMod

テーマを導入する

git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

サブモジュールって？

外部の git リポジトリを、自分の git リポジトリのサブディレクトリとして登録し、特定の commit を参照する仕組み

どういうこと🤔?

とりあえず、上記コマンドでthemesの中にPaperModがインストールされた。

最後にhugo.yamlに

theme: PaperMod

を追加すればテーマが適用される。

できたサイトが🦥 nove-bでリポジトリがこちら。

2024年2月に読んだ本まとめ

nove-b

読む本をほとんどKindle Unlimitedにしてからというもの読んだ本の記憶が残らないようになったしまった。

そのため簡単にまとめておくことにした。

廃遊園地の殺人 (斜線堂有紀)

プレオープン中に起きた銃乱射事件のため閉園に追い込まれたテーマパーク・イリュジオンランド。廃墟コレクターの資産家・十嶋庵(としまいおり)はかつての夢の国を二十年ぶりに解き放つ。狭き門をくぐり抜け、廃遊園地へと招かれた廃墟マニアのコンビニ店員・眞上永太郎(まがみえいたろう)を待っていたのは、『このイリュジオンランドは、宝を見つけたものに譲る』という十嶋からの伝言だった。それぞれに因縁を抱えた招待客たちは宝探しをはじめるが、翌朝串刺しになった血まみれの着ぐるみが見つかる。止まらない殺人、見つからない犯人、最後に真実を見つけ出すのは……

廃遊園地の殺人

なんか名前を聞いたことがある作家だと思ったらキネマ探偵カレイドミステリーの作家さんだった。

テンポが良いミステリで、それなりに先も気になり、楽しく読めた。

水曜日のダウンタウンのトナッピーを思い出した。

1984 (ジョージ・オーウェル)

1984年、世界は〈オセアニア〉〈ユーラシア〉〈イースタシア〉という3つの国に分割統治されていた。オセアニアは、ビッグ・ブラザー率いる一党独裁制。市中に「ビッグ・ブラザーは見ている」と書かれたポスターが張られ、国民はテレスクリーンと呼ばれる装置で24時間監視されていた。党員のウィンストン・スミスは、この絶対的統治に疑念を抱き、体制の転覆をもくろむ〈ブラザー連合〉に興味を持ちはじめていた。一方、美しい党員ジュリアと親密になり、隠れ家でひそかに逢瀬を重ねるようになる。つかの間、自由と生きる喜びを噛みしめるふたり。しかし、そこには、冷酷で絶望的な罠がしかけられていたのだった――。

1984

読んだことある。

ところどころ覚えている。でも結末とかストーリを全く覚えてなかった。

たぶん、設定が強すぎる。

読了はしていないので、3月に持ち越すことにする。

WingetでWindowsにアプリをインストールする

nove-b

環境

windws11
winget => v1.6.3482

パッケージマネージャーを使用する

この前、Hugoをインストールする際にパッケージマネージャーであるScoopを使用した。

Chocolateyが有名っぽいけど、インストール方法がぱっと見わからなかったので、Scoopを使用することにした。調べるとMacではHomebrew一択っぽい。Windowsではwingetが公式っぽく、インストールも必要なく使えて便利そうだった。 Hugo(ヒューゴ)でブログを立ち上げるまでにやったこと

その際に、パッケージマネージャー（Winget）の便利さを初めて知った。

なんとインストールしたソフトウェアの情報をjsonにして出力することができるらしい。

だけでなく、インポートをすることで記載されたツールをインストールすることができるらしい。

つまりこれを管理しておけば、パソコンを変えた時にソフトウェアの引継ぎができるとのこと。

今更だけど、そろそろパソコンを買い替えたと思ったので、少しでも引き継げるように使用してみることにした。

Elkをインストールする

ちょうどマストドンのWindowsクライアントが欲しかったので、Elkをインストールすることにした。

Wingetのバージョン確認

WingetはWindowsに標準でインストールされているので、

winget -v
v1.6.3482

特に何もせずともバージョンを確認できる。

インストールしたいソフトウェアを検索

 winget search "Elk"

 名前         ID                  バージョン 一致              ソース
---------------------------------------------------------------------
TagIt CO Elk 9PCGNR99HGKQ        Unknown                      msstore
Elk          Elk.Elk             0.4.0                        winget
LDCad        RolandMelkert.LDCad 1.6d2                        winget
Obsidian     Obsidian.Obsidian   1.5.3      Tag: zettelkasten winget

インストールする

winget install Elk.Elk
見つかりました Elk [Elk.Elk] バージョン 0.4.0
このアプリケーションは所有者からライセンス供与されます。
Microsoft はサードパーティのパッケージに対して責任を負わず、ライセンスも付与しません。
ダウンロード中 https://github.com/elk-zone/elk-native/releases/download/elk-native-v0.4.0/Elk_0.4.0_windows_x86_64.msi
  ██████████████████████████████  7.31 MB / 7.31 MB
インストーラーハッシュが正常に検証されました
パッケージのインストールを開始しています..
インストーラーハッシュが正常に検証されました
インストールが完了しました

IDを使用してインストールする。

ここから結構時間がかかったのは自身のパソコンの性能か、通信環境か、結構な時間がかかった。

アップグレードする

winget upgrade

で、現在のバージョンと、利用可能なバージョンが表示される。

winget upgrade --all

上記のコマンドですべてのソフトウェアをアップグレードできる。

インストール情報をエクスポートする

winget export --output C:{path}

#2024-02-18 09:24:38：追記

エクスポートされなくて、色々試行錯誤した結果、ファイル名を指定していないことに気が付いた。

正しくは、下記で無事にjsonが作成された。

winget export --output C:{path}\{file-name}.json

これで、インストールした情報をエクスポートできる。

作成されたjsonを見ると、wingetを通してインストールした以外のソフトも含まれていた。

よく分からないけれど、勝手にやってくれるらしい。

エクスポート情報をインポートする

winget import --import-file C:{path}

これを実行すると、インストールされていないソフトウェアは自動的にインストールされらしい。また既にインストールされていてもバージョンが古い場合はアップグレードされるらしい。

ただ、試していないのでわからない。

設定ファイルをGithubに

WingetでエクスポートしたjsonをGithubに置いておけば、いろんな環境で情報を共有できるし、パソコンの買い替えも不便がなくなるかもしれない。

この前聞いていいなあと思っていた盆栽とはこれのことだったのか。

AngularでAPIリクエスト前後の処理を共通化する

nove-b

環境

node => v16.13.2
angular => 15.0.4

AngularでリクエストヘッダーにAuthorizationを共通して持たせたい

とかレスポンスのStatusCodeを見て共通処理を書くと言ったAPIリクエスト前後の処理をどこで実装するのがいいのか調べてみた。

HttpInterceptor

どうやらドンピシャっぽいのがこれで、ドキュメントによると

Intercepts and handles an HttpRequest or HttpResponse.

つまり、リクエストとレスポンスそれぞれに処理をできますよということ。まさに探していた機能に間違いない。

使ってみる

リクエストに対して処理をする

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
} from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor() {}
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    const newReq = req.clone({
      headers: req.headers.set("Authorization", "Bearer " + "token"),
    });
    // cloneされてヘッダーを付与したリクエストを次の処理に引き渡す
    return next.handle(newReq);
  }
}

これでリクエストヘッダーにBearer tokenというAuthorizationが付与されたうえでリクエストが投げられる。

レスポンスに対して処理をする

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
} from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, catchError } from "rxjs";
import { MatDialog } from "@angular/material/dialog";

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(public dialog: MatDialog) {}
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    const req = request.clone();
    return next.handle(req).pipe(
      catchError((res) => {
        if (400 <= res.status && res.status < 500) {
          console.log("400以上500未満のエラーが発生しました。");
        }

        return next.handle(req).pipe();
      }),
    );
  }
}

これでレスポンスのstatusが400以上500未満の場合に限りconsoleが発火するようになった。これを使用すれば各statusに対する共通の処理を書くことができる。

app.module.ts にプロバイダー登録

それぞれ処理を書いたらapp.module.tsのprovidersに登録する。

  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
  ],

これで無事に求めている動きをするようになった。

JavascriptのConsoleはGoLangでどう表現するのか

nove-b

Golangの出力方法がたくさんある

いつもJavascriptをメインで使用している。Javascriptで最も使用するのはConsoleオブジェクトに間違いない。

console

デバックの際には本当にお世話になっている。なかでもconsole.tableには本当に感謝している。いつもありがとう。

もうConsoleがなくては生きていけない体になってしまったので、Golangでも同様に出力しようとしたら、何やら書き方がたくさんあって困惑した。

Golangで出力する

fmt.Printf()

第一引数に書式指定文字列を受け取り、第二引数以降に渡した値をフォーマットして出力

fmt.Printf({書式指定}, {値})

fmt.Println()

値を標準の書式で出力。 fmt.Printf(%v, {値})と同じになる。

fmt.Println({値})

調べたらこれくらいしかなかった。じゃあなんで混乱したかというとコードを書いていてlog.Printf()というのが出てきたせいである。

log.Printf() / log.PrintIn()

パッケージログは、単純なログパッケージを実装します。これは、出力をフォーマットするためのメソッドを備えたタイプLoggerを定義します

つまりどういうことかよくわからないので、実装してみる。

fmt と log の違いを実装してみる。

func main() {
	fmt.Println("Hello, fmt")
	log.Println("Hello, log")
}
// Hello, fmt
// 2024/03/07 22:25:23 Hello, log

logの方は日時のデータが付与された。

使い方はよくわかないけど、ひとまず整理はできたので良しとする。

Golangのnet/httpでホットリロードの恩恵を受けたい

nove-b

ホットリロードが欲しい

普段メインでreactとかAngularを使用しているので、標準でホットリロードが搭載されていることが当然になっていた。

しかしGoのnet/httpにはない。これが本当に開発体験に悪影響を及ぼしている。

ということで、何とかできないか調べてみた。

Goのバージョン

go => 1.21.4

DevContainerを使ってみる

Go net/httpサーバーのホットリロードにAirを使ってみた

Devcontainerに airをインストールして、DevContainer上で実行する。

色々調べた結果上記が１番楽そうだったので、やってみる。

やり方は上記の記事を引用する。

リポジトリ直下に .devcontainer フォルダ作成

.devcontainerフォルダ内に下記内容のdevcontainer.json を作成。
{
	"name": "Go",
	"image": "mcr.microsoft.com/devcontainers/go:0-1-bullseye",
	"features": {
		"ghcr.io/devcontainers/features/docker-outside-of-docker:1": {
			"moby": true,
			"installDockerBuildx": true,
			"version": "latest",
			"dockerDashComposeVersion": "v2"
		}
	},
	"postCreateCommand": "go install github.com/cosmtrek/air@latest"
}
保存し、プロジェクトを再度開き直す

DevContainerを開くかどうかVSCodeに確認されるので、DevContainerとして開き直す

インストール完了後プロンプト上で air と打って Airを立ち上げる

順序通りやったところ、

DevContainerを開くかどうかVSCodeに確認されるので、DevContainerとして開き直す

の箇所で、

[+] Building 903.3s (2/3)
 => [internal] load build definition from Dockerfile.extended              0.3s
 => => transferring dockerfile: 2.76kB                                     0.1s
 => [internal] load .dockerignore                                          0.3s
 => => transferring context: 2B                                            0.0s
 => resolve image config for docker.io/docker/dockerfile:1.4             902.4s

上記のようにとんでもなく時間がかかった結果諦めた。

これはWindowsとDocker問題🤔?

WSLで再トライ

ということでWSL上に移して実行してみる。

Windows上で実行するよりは早いけど、それでもめちゃくちゃ時間がかかった。

で、実行してみたところ

go.mod:3: invalid go version 'v1.21.4': must match format 1.23

というエラーが出たので、バージョンをgo 1.21.4からgo 1.21に変更し再度挑戦してみる。

building...
no Go files in /workspaces/ProjectName
failed to build, error: exit status 1
running...
/bin/sh: 1: /workspaces/ProjectName/tmp/main: not found

ホットリロードは確認できたけど...

次に上記エラーが出たので、main.goを/srcからrootに移動した結果、ホットリロードが動いていることが確認できた。

ただデーターベースに接続できなくなったし、やっぱり/srcの下に開発ファイルを置きたい。

ここで時間使うのももったいないので、いったん諦める。戦略的撤退。

ホットリロードが動くことは確認できたので、とりあえず満足した。

いつかまた挑戦する。

VSCodeのドットファイルをGithubで管理し常に最新を共有する

nove-b

パソコンがもっさりしている。どうやら買い替えの時期が近いらしい。

そもそもキーボードもふたつのキーが機能していない。

そういうわけで環境を色々整理し始めた。

WingetでWindowsにアプリをインストールする

上の記事もそういう理由。

今回はVSCodeの環境をdotfilesで管理できるようにする。

dotfilesとは

dotfilesとは下記のこと。

dotfilesとは、ホームディレクトリに置いてあるドット(.)から始まる設定ファイル (.bashrcとか)を管理しているリポジトリのことである。シェルやエディタの設定からアプリケーションの設定まで幅広いものが置かれている。

引用：ようこそdotfilesの世界へ - Qiita

つまりこれを使用すれば、どのパソコンでも一瞬で同一の環境を作成することができる。

会社のパソコンと自宅のパソコンの設定だって一緒にできる。

VSCodeでやってみる

そういうわけで、もっともよく使用するVSCodeでやってみることにした。

管理するのは２つ。

拡張機能
環境設定

拡張機能

拡張機能は

code --list-extensions > extensions

でインストールした拡張機能の一覧を、

  C:\Users\name\.vscode\extensions

に一覧で書き出すことができる。

環境設定

環境設定は、

C:\Users\name\AppData\Roaming\Code\User
> keybindings.json
> settings.json

に存在している。

この3つをGit管理するようにする。

https://qiita.com/miiina016/items/018331b36ecf57ed8973

GitBashが日本語を受け付けなかったので対応させた

nove-b

会社のPCでGit Bashに日本語を打つと何も表示されない。

そのため、毎回毎回export LC_ALL=ja_JP.utf8と記入していた。

面倒なので起動時に日本語を受け付けるようにしたい。

.bash_profileを変更する

user/username/.bash_profileにexport LC_ALL=ja_JP.utf8を追記すると実現できる。

2024年3月の月報

nove-b

前回（3月）は読んだ本をまとめたけどそれ以外にも記憶しておいたほうがいいと思ったので、書いておくことにする。

3月に読んだ本

プログラミング経験者がGo言語を本格的に勉強する前に読むための本 (天田士郎)

本書はタイトルの通り「Go言語を本格的に勉強する前に最低限抑えておくべき知識」をまとめた物です。何らかのプログラミング言語の経験者を想定しているため、未経験者や初心者の方はご注意ください。

プログラミング経験者がGo言語を本格的に勉強する前に読むための本

いま作成しているアプリのバックエンドでGolangに挑戦している。

Chat-GPTを最大限に活用している。そのせいか、なんとなく学びきれてない感を拭い去れない。

そこで体系的に学ぼうと手に取った。

文法的のまとめのような本なので、体系的には学べなかった。

次はハンズオン的な本を読もうと思った。

1984 (ジョージ・オーウェル)

1984年、世界は〈オセアニア〉〈ユーラシア〉〈イースタシア〉という3つの国に分割統治されていた。オセアニアは、ビッグ・ブラザー率いる一党独裁制。市中に「ビッグ・ブラザーは見ている」と書かれたポスターが張られ、国民はテレスクリーンと呼ばれる装置で24時間監視されていた。党員のウィンストン・スミスは、この絶対的統治に疑念を抱き、体制の転覆をもくろむ〈ブラザー連合〉に興味を持ちはじめていた。一方、美しい党員ジュリアと親密になり、隠れ家でひそかに逢瀬を重ねるようになる。つかの間、自由と生きる喜びを噛みしめるふたり。しかし、そこには、冷酷で絶望的な罠がしかけられていたのだった――。

1984

まだ読んでいる。

なんとなくページが進まない。

面白くないわけじゃないんだけど、読み気が進まない。

そして絶対に読んだことがある。

プライベートとか仕事とか

子育て

双子が1歳半になった。

より人間らしくなってきて、ぐんぐん可愛くなってきている。

同時に意思も強くなってきて、こちらの思い通りにならないことも増えてきた。

滑り台が好きで、公園に行くと喜ぶ。

最近は子どもの動画を編集するのにはまっている。

Google Photo のハイライト動画という機能で簡単に作れるので、お出かけした時はその日の動画を1分くらいにまとめている。

スマホがほしい

格安スマホ使っているのだが、そういう訳で画質に不満が募り始めたので、スマホの買い替えを検討している。

Google Pixelに出戻りをするか、あと折りたたみスマホも気になっている。

PCのほうがほしい

ただそれよりもPCの買い替えが急務である。

Ctrlキーがなくなって早１年、ずっと使ってきたが、Altキーも外れそうである。

あと最近Dockerとか起動するともっさりしている。

次は、Surface 10にする予定。どうやら6月に出るっぽいので、それまで我慢することにする。

目標達成率

もっさりしたPCで作っているアプリは進捗が芳しくない。

Goの知識がなさすぎで思うように進まない。

NestJSとかで作成しておけばよかったと思うけど、それだと成長が止まってしまうので、ここでしっかりGoをマスターしたい所存。

アプリ作成は今年の目標の1つである。数ある目標の中でも最優先タスクなので、6月くらいまでに達成したい。

理想は

ネイティブアプリをリリースする(6月)
基本情報技術者資格を取る(8月)
OSS活動にコントリビューとする(10月)
Mastodonのサーバーを立ち上げる(12月)

とか。できるかしら。

まあ、地道に頑張る。

仕事がまあ忙しい

進捗が芳しくないのは仕事に時間を取られているという原因もある。

今はAngular、Vue、NestJsの案件がメインである。

その中でも多くの比重を占めているのがNestJsの案件。

実装者として参画しているんだけど、プロマネ的なこともしている。

他人のコードの質を担保するのが本当に難しい。

自分のコードは仕様に沿うように書いているので問題ないんだけど、他人のコードのレビューをするときはその人の考えたことを想像しつつ、コードを読み解く必要がある。

難しいけど、まあ糧にはなるよね。

っていうそんな感じで4月になっていた。

Github ActionでGithubに草が生え続けていた

nove-b

草が生い茂っている

自分自身のGithubプロフィールページは、たぶんだけれどそんなに多く訪れるものじゃない。個人で作ったプロジェクトの整理をしようと思い立ち、久々に訪れると、コミット履歴が青々と生い茂っていた。

もちろん、勤勉に勉強しているつもりだが、毎日コミットできるほどに勤勉ではない。

特に子どもが生まれてからパソコンを開けない日が増えた。

いかに子どもたちの体力を消費させるかという基準で公園の選定と、保育園について調べる時間で、夜の自由時間は消える。

そのため、最近は週の半分コミットできれば上出来といった具合なのだが、先述した通り、コミット履歴は青々と生い茂っている。

Githubの草を生やすことを目標にしている人種もいる

どうやらGithubの草を生やすことに執着している人もいるらしい。毎日草を生やしたいので、コミットするなんていう人が。

理由としてはモチベーションアップとか、転職に役立つとか書いてあるけれど、Githubの草が転職に役立つような企業なのであれば、それは少し怪しい。

毎日勉強しているという風に捉えてくれるのかもしれないけど、草が生えているから勉強しているわけではない。

その一例が私のコミット履歴である。

毎日やっていないけど、草が生い茂っている。

決して毎日草を生やしたいなんていう目的で草を生やしているわけではない。

この草は気が付いていたら生えていた雑草の様なものなので、引き抜きたいけれど、引き抜く方法がわからなので、もう生えてこないよう、除草剤をまくことにした。

原因はGithub Action

草が生えるには、

リポジトリのデフォルトブランチへのコミット
イシューを開く
プルリクエストを提案する

上記の条件がある。

確かに作業を行っていない日だろうと、思いついた時にissueを開くことはあったけど、決して毎日じゃない。そして毎日作業していないので、コミットもしていなければ、プルリクの提出もしていない。

それじゃ、何が原因なのか。

調べてみると毎日１コミットが、feedというリポジトリに行われていた。

feedというリポジトリは自作のRSSリーダーで毎日Github Actionを使用し、記事を最新化している。

読みたい記事たち

間違いなく、これである。

ここに仕込んだGithub Actionが毎日定期実行され、記事を最新化してくれ、その副産物として草まで生やしてくれていた。

今回は草が生えているだけでよかったのだが、何かしら課金の絡んだ処理とかであった場合、恐ろしい。

使わない定期実行はしっかり処理しようという教訓を得たのと、草を生やして転職に役立てたいという需要があるのであれば、そういうGithub Actionを作っても面白いかもしれない？という謎のアイデアが生まれた。

2024年4月の月報

nove-b

4月に読んだ本

1984 (ジョージ・オーウェル)

1984年、世界は〈オセアニア〉〈ユーラシア〉〈イースタシア〉という3つの国に分割統治されていた。オセアニアは、ビッグ・ブラザー率いる一党独裁制。市中に「ビッグ・ブラザーは見ている」と書かれたポスターが張られ、国民はテレスクリーンと呼ばれる装置で24時間監視されていた。党員のウィンストン・スミスは、この絶対的統治に疑念を抱き、体制の転覆をもくろむ〈ブラザー連合〉に興味を持ちはじめていた。一方、美しい党員ジュリアと親密になり、隠れ家でひそかに逢瀬を重ねるようになる。つかの間、自由と生きる喜びを噛みしめるふたり。しかし、そこには、冷酷で絶望的な罠がしかけられていたのだった――。

1984

やっと読み終えた。

最後まで読んでもなんとなく読んだことあるなあ、くらいの感覚だった。

つまり当時もそこまで思うところなかったんだろうなあ。

当時としては画期的な設定だったのかもしれないけれど、今はよくあるだろうし、あまりにも理屈っぽい。

僕の好きな人が、よく眠れますように (角川文庫)

僕が通う理科系大学のゼミに、北海道から院生の女の子が入ってきた。徐々に距離の近づく僕らには、しかし決して恋が許されない理由があった……『100回泣くこと』を超えた、あまりにせつない恋の物語。

僕の好きな人が、よく眠れますように (角川文庫)

再読、忘れちゃいけないんだけど、これ不倫のおはなし。

小市民シリーズ

どうやら冬季限定（冬期限定ボンボンショコラ事件〈小市民〉シリーズ (創元推理文庫)）が出るらしいということで、一気に読み返し中。

調べると番外編（巴里マカロンの謎〈小市民〉シリーズ (創元推理文庫)）も出ていたらしい。

久しぶりに読むけど、やっぱり面白い。

ページをめくる手が止まらないので、どんどん口座からお金が引き落とされる。

プライベートとか仕事とか

土日は基本的に公園に

土日は基本的に外に行かないともたない。

子どもたちの無尽蔵の体力と戦い抜くには家はあまりにも狭すぎる。

ということで土日は決まって公園に行くのだが、人が多いと「抱っこ抱っこ」でこちらの体力が主に削られる。

まあ、普段座ってばかりだから、歩くことは良いことなんだけど、他の子がぐんぐん歩いているのを見ると、少し羨ましい。

とはいえ、いずれ抱っこすらさせてくれなくなるのだろうから、文句を言わずに抱っこしようと思う。

たぶんきっと、子どもが親にくっついてくれる時期はあまりにも短い。

個人開発

やっとバックエンドの開発が終了した。

いや、アプリ側と並走するので、終了したというより一段落したといったぐあい。

現にアプリ側から叩き、CORSエラーでつまった。

CORSってブラウザ間の問題じゃないの？

よくわからいけどexpoで実行しているからかしら。

そういったことを調べて、まとめて、理解して進みたいんだけど、それ以上に早く完成させたい。

あまりにも時間がない。

でもきっとしっかり調べてまとめた方が将来的にはためになるんだろう。

木こりのジレンマ的な？

調べてアウトプットしよう、5月の目標は5記事くらいは書きたい。

ちなみに4月は1記事、うーん。記事書くことがすべてじゃないけど、もう少し書いていきたい。

APIのメソッドPUTとPATCHは何が違うのか調べてみた

nove-b

PUTとPATCHの違いをあまり気にしてこなかった

基本的にフロントエンドなので、仕様書に書かれているメソッドでAPIと通信してきた。

ただ今回、自身が作る側に回り、PUTとPATCHの違いがいまいちピンとこなかったので、調べてみた。

結論

PUTはリソースの完全な置き換えで、PATCHはリソースの一部分のみを更新する場合とのこと。

例えば、

{
  "name": "John Doe",
  "age": 30,
  "email": "john@example.com"
}

というデータがあり、31歳に変更する場合を考えてみる。

PUTの場合

PUT /users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "John Doe",
  "age": 31,
  "email": "john@example.com"
}

といった感じに変更した年齢以外もまるっと送る必要がある。

PATCHの場合

対してPATCHの場合は、

PATCH /users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "age": 31
}

となる。

どっちを使うべきか

まあ、この感じだと一部だけを更新したい場合はPATCHを使用するべきなんだと思うけど、その場合はフォームの一部だけが変更されたという監視が必要になるので、それなりの工数がかかる。そのためPUTでいいかなといった結論になりました。

Goで作成したローカルサーバーにReact NativeからアクセスしようとしたらTypeError: Network request failedになった

nove-b

API作成が一段落した

Goの勉強でAPIを作成してきたが、やっと一段落した。

そこでアプリ側から叩こうとした結果、エラーが出たので原因を理由を調査してみた。

Goで立ち上げたサーバ

http://localhost:8081/api/v1/endpoint

のローカルIPアドレス

http://172.19.176.1:8081/api/v1/endpoint

にReact Nativeで作成したアプリからアクセスしてみる。

ネットワークリクエストが失敗しました

結果、

TypeError: Network request failed

というエラーが出力された。

ファイアーウォールが関係している？

【react-native】シュミレータでAPIアクセスを行う際にnetwork errorの記事を参照するに、CORSかしらって思ったけど、アプリでCORSはちょっと違う気がする。

アプリにドメイン存在しないので、どのドメインを許可すればいいのっていうことになる。

で、色々調査していると、ファイアーウォールが関係している気がしてきた。

Windows向けプログラムに搭載されているファイアウォール（パーソナルファイアウォール）機能は、ネットワークプリンターや他のコンピューターとの通信を遮断する場合があります。その場合は、該当する通信を許可するルールを作成することで、通信ができるようになります。

https://eset-support.canon-its.jp/faq/show/235?site_domain=default

ポートを開放すればいける感じかもしれないけど、せっかくだしサーバーにあげてみることにした。

どうせいずれあげる必要があるしね。

ZennのスクラップのようにGithub Issueに作業のログとかを残すようにした

nove-b

作業中に新しい知識とか詰まった箇所、エラーの記録を取りたいと思うことがある。今まではブログにずらずら書いていたけれど、結果、まとまりのない文章ができあがり、何にも活用することができないという状況が生まれていた。

ZennのScrapsを活用する？

そこでZennを活用することを考えメリットデメリットを考えてみた。

メリット

公開することができるので、自身のブランディングに活用できる
コメント機能で他人の知見をシェアしてもらうことができる
結果的にほかの人のScrapsを見るようになり知見が広まる
他人の助けになることもある

デメリット

公開されるので、ソースコードにぼかしを入れる必要がある
ScrapsはGitで管理ができない

こうやって見るとメリットのほうが多いけど、デメリットが許容できなかった。ただこれが許容できないとなると、コンテンツの公開がされるサービスは使用できない。

GithubのIssue💡

そこで思いついたのがGithubのIssueだった。

そもそもScrapsもIssueを参考にしているだろうし、機能的には問題ない。

しかもこのブログもGithubで管理されており、同リポジトリ内に作成すれば検索も強い。

そういうことでGithubで管理することにした。

プライベートリポジトリに

公開はしたくなかったので、リポジトリをプライベートに変更した。

そのためGithub Pagesが使えなくなったので、ホスティング先をnetlifyに変更した。

移行はHost on Netlifyの通りやれば難なく完了できる。

https://blog.nove-b.dev/

URLが少しダサくなったけど、カスタムドメインを適用するほどじゃないかなといった感じなので、このままいくことにした。

これで少しでもレベルアップできるといい。

☆カスタムドメインに対応した Cloudflare Registrarでドメインを登録し、Netlifyのサーバーにサブドメインを当てる

Cloud RunでGoを動かしたい

nove-b

Gormを使用し、APIを作成した。前回はAWSとNestJsだったので、今回はGCPを使用してみることにした。

Cloud Run

今回はCloud Runを使用することにした。

そもそもCloud Runとは、

フロントエンドサービスやバックエンドサービス、バッチジョブの実行、ウェブサイトやアプリケーションのデプロイ、処理ワークロードのキューへの追加を行います。インフラストラクチャを管理する必要はありません。

毎月 200 万リクエストは無料です。

Amazon ECSとAWS App Runnerと比較されることが多いらしい。

Amazon ECSとApp RunnerとCloud runの比較

特筆すべきは無料枠があることな気がする。

デプロイ

そんなCloud Runにデプロイしていく。

クイックスタート: Cloud Run に Go サービスをデプロイする

公式が丁寧なのでこれに沿っていく。

ちなみに前提は下記の通りになる。

Goで既にAPIを作成している
フレームワークは未使用
Goのバージョンはgo 1.21.4
ローカルでサーバーを立ち上げる時はnet/httpを使用した。

アカウント作成

まずはアカウントを作成する必要がある。

アカウントを作成する

作成後、プロジェクトセレクタページで、Google Cloud プロジェクトを作成する。

プロジェクト名を作成するだけで作成が完了する。

次に課金が有効になっていることを確認する必要がある。

課金が有効になっているか確認する

課金が有効になっていない場合は、

「このプロジェクトには請求先アカウントがありません」

というポップアップが表示されるらしい。

Google Cloud CLI をインストール

ここで問題がないようであれば、Google Cloud CLI をインストールする。

以下、Windowsでの方法になる。

参考；インストール手順

Google Cloud CLI インストーラをダウンロード。

インストール後は画面の指示に従い、進めていく。

全部、Next☞でやったけど問題なさそうだった。

インストールが完了するとログインを求められ、

これで gcloud CLI での認証が完了しました。

問題なければ上記のページに飛ばされる。

同時にターミナルウィンドウが開いて gcloud init コマンドが実行される。

 gcloud config set project PROJECT_ID

で、Cloud Run サービスのデフォルトプロジェクトを設定するけど、なんで設定したかはまだわからない。

デプロイで連携する

次に既存のアプリを連携させる。

ソースコードディレクトリで、次のコマンドを使用してソースからデプロイします。
gcloud run deploy

とのことだったので、実行した結果、

$ gcloud run deploy
bash: gcloud: command not found

エラーになったので再起動して実装してみる。

$ gcloud run deploy
/c/Users/username/AppData/Local/Google/Cloud SDK/google-cloud-sdk/bin/gcloud: line 203: /c/Users/username/AppData/Local/Microsoft/WindowsApps/python3: Permission denied
/c/Users/username/AppData/Local/Google/Cloud SDK/google-cloud-sdk/bin/gcloud: line 203: /c/Users/username/AppData/Local/Microsoft/WindowsApps/python3: Permission denied

というエラーがでた。

VSCodeのGitbashで起こるエラーっぽいので、コマンドプロンプトで実行したところうまく通った。

このあと何回かデプロイを試したが何回もエラーで落ちる。

エラーとの戦い（データベースへの接続に失敗しました）

Googleが用意したサンプルコードだとデプロイが成功するのに自身のアプリはデプロイできない。

仕方ないので、コメントアウトをしつつ、デプロイを試していく。

すると

データベースへの接続に失敗しました: dial tcp 127.0.0.1:3306: connect: connection refused"
exit(1)

ここで落ちていることが判明した。

つまりデーターベースに接続できていない。

ちょっと原因不明点が多すぎて原因究明できなかったので、また同じことが起きた時は原因まで調査するようにする。

Cloud SQLに接続するようにする

ローカルのDBに接続できないのであれば、いずれ使用する予定だったCluod SQLであれば接続できるのでは？

という風に思い、GormでCloud SQLに接続するを行った。

無事にデプロイ

で、上記完了後に再デプロイした結果、無事にデプロイできました。

GormでCloud SQLに接続する

nove-b

Cloud RunにGoで作成したAPIをデプロイしようと思ったところ、うまくいかなかった。

調査してみたところ、データーベースに接続できずに落ちているっぽいとのこと。

ちょっとなんでかわからないけど（今思い返せば、Docker起動していた？という不安がある）、ローカルのDBに接続できないので、いずれ接続する予定だったので、Cloud SQLに接続し、それでCloud Runにデプロイしてみようという風に思い立った。

Cloud SQLに登録する

Cloud Run から Cloud SQL for MySQL に接続するがある。

公式があるので、こちらを参考にする。

なお、今回サーバーはローカル（net/http）で起動することにする。

インスタンスを作成する

Google Cloud コンソールで Cloud SQL の [インスタンス] (https://console.cloud.google.com/sql?hl=ja&_ga=2.145632700.968950133.1716041931-758618644.1700836939)ページに移動する。
インスタンスを作成をクリック。
[MySQL を選択] をクリック。

インスタンスを作成するには、まず Compute Engine API を有効にする必要があります。

という警告が出るので、APIを有効にする。

インスタンスID、パスワード、を登録。

My SQLのバージョンを８にし、Cloud SQL のエディションはEnterpriseにする。

プリセットをいったん開発環境にして、リレージョンを東京、ゾーンをシングルに設定する。

構成オプションを開き、とりあえず一番小さい1 vCPU、3.75 GBを選択してみる。

で、インスタンスを作成する。

構成オプションはとりあえず、最小で不満があればあげていく方法で問題ないらしい。

DBの作成

インスタンスのデータベースにいき、データーベースの作成をクリックする。

今回インスタンスの作成をし、データーベースの作成をしていなかったので、エラーが出続け、悩まされた。

接続を試みる

まず接続をしてみたところ、

$ go run main.go
2024/05/26 00:41:05 cloudsqlconn.NewDialer: failed to create default credentials: google: could not find default credentials. See https://cloud.google.com/docs/authentication/external/set-up-adc for more information
exit status 1

というエラーが出た。

どうやら認証情報が見つかりませんとのこと。

対象のディレクトリでgcloud auth application-default loginを実行し、ログインを完了させた。

ソースコードは公式を参考に下記のように。

package db

import (
	"context"
	"database/sql"
	"fmt"
	"log"
	"net"
	"os"

	"cloud.google.com/go/cloudsqlconn"
	"github.com/go-sql-driver/mysql"
	gmysql "gorm.io/driver/mysql"
	"gorm.io/gorm"
)

var DB *gorm.DB

type Model struct {
	gorm.Model
}

func mustGetenv(k string) string {
	v := os.Getenv(k)
	if v == "" {
		log.Fatalf("Fatal Error in connect_connector.go: %s environment variable not set.", k)
	}
	return v
}

func InitDB() {

	var (
		dbUser                 = mustGetenv("DB_USER")                  // e.g. 'my-db-user'
		dbPwd                  = mustGetenv("DB_PASS")                  // e.g. 'my-db-password'
		dbName                 = mustGetenv("DB_NAME")                  // e.g. 'my-database'
		instanceConnectionName = mustGetenv("INSTANCE_CONNECTION_NAME") // e.g. 'project:region:instance'
		usePrivate             = os.Getenv("PRIVATE_IP")
	)
	d, err := cloudsqlconn.NewDialer(context.Background())
	if err != nil {
		fmt.Errorf("cloudsqlconn.NewDialer: %w", err)
		return
	}
	var opts []cloudsqlconn.DialOption
	if usePrivate != "" {
		opts = append(opts, cloudsqlconn.WithPrivateIP())
	}
	mysql.RegisterDialContext("cloudsqlconn",
		func(ctx context.Context, addr string) (net.Conn, error) {
			return d.Dial(ctx, instanceConnectionName, opts...)
		})

	dbURI := fmt.Sprintf("%s:%s@cloudsqlconn(localhost:3306)/%s?parseTime=true",
		dbUser, dbPwd, dbName)

	sqlDB, err := sql.Open("mysql", dbURI)
	if err != nil {
		log.Fatalf("sql.Open: %v", err)
	}

	// Open a connection to the database using the gorm package
	DB, err = gorm.Open(gmysql.New(gmysql.Config{
		Conn: sqlDB,
	}), &gorm.Config{})

	if err != nil {
		log.Fatalf("gorm.Open: %v", err)
	}

	fmt.Println("データベースに接続しました")
}

これで実行したところ、

データベースに接続しました
2024/05/28 00:26:14 defaulting to port 8080
2024/05/28 00:26:14 listening on port 8080

無事に接続できた。

課金具合が予想を超えている

Cloud SQLの課金体系がいまいち理解できていない。

ただコンソールを見る限り、想像を超える課金が行われている。

使用していない時はインスタンスを停止してその場を凌ぐけど、しっかりと理解をしたい。

2024年5月の月報

nove-b

5月に読んだ本

春夏秋冬、小市民シリーズが遂に完結した。ただ最後、続きに希望が見えた気もするので、期待したい。そういえば、古典部シリーズも完結まで読んでないんだよなあ。昔読んでいたシリーズもので完結まで読み切ってないやつ、それなりにありそうな感じがする。

でぃすぺるは、まあ、悪くなかった。あり得ない気もするけど、フィクションだしそれくらいいいよね、って感じ。ところどころ、本当に怖くなったりもした。アンリミテッドだし、おすすめ。

君は医者になれないはThe メディアワークスって言った感想。良くも悪くもキャラ文庫。

さて、今後は月5冊まで本を買っていいことにしよう。それ以上はアンリミテッドにする。さすがにアンリミテッドだけで生きていくには、楽しみがなさすぎる。アンリミテッドなんて2冊読めば元取れるし、月7冊は確実に読むしね。

絶賛読んでいる本。

Goの基本的な文法を素早く理解したい人向けの本

最近は時間がなくて本を読む時間もない。別にそれが悪いことではないんだけど、趣味が失われるような恐れはある。

読書の時間を確保して、数少ない趣味を確保する必要がある。

旅行に行った

今月はゴールデンウイークを外し、旅行に行った。

安全を期しディズニー前泊をしたことはあるけど、観光旅行は初。

車にディスプレイを設置し、双子が絶対にぐずらない環境を作り、熱海に向かった。

子どもたちには退屈だろうけど、まずは伊豆山神社に行き旅の安全を祈願し、その足で熱海駅に。

お土産を買いパン屋でお昼ごはん。

熱海の駅前商店街はいつみてもいい。あの廃れた感じが妙に旅情を誘う。

次に親水公園で砂遊び。

水気を含む砂を頭にかけて、頭がざらざらになっていた。

最後に今宮神社に行き、この神社には梟が住み着いているという謎の情報を得た。

そして今回のメインとも言えるリゾナーレ熱海に到着。

星野リゾートは好きじゃないって言ってたけど、子連れにリゾナーレ熱海は最高だった。

まず周りも子連れなので、負い目を感じる必要がない。お互い様だよね、て勝手に考え少し安心する。

そして何より、アクティビティが豊富だった。

プール、砂場、ボールプール、滑り台、そしてツリーハウス。

退屈することなく、ぐっすり眠りについてくれた。

ちなみにビュッフェは想像以上に大変だったけど、ふたりが食べれるものがあって良かった。

子どもたちが寝静まった後、大浴場に。

半露天で熱海の夜景を見つつ浸かるお湯は、とろけるほどリラックスできた。

2日目はシャボテン公園でカピバラを見て、帰路に着く。

シャボテン公園はもういいかしら。

次はもう少し大きくなっているだろうし、グランパル公園に行くかな。

そんなこんなで楽しい旅行だった。

目標完遂が黄色信号

てな感じでゴールデンウイークもあり、イベントもありで、目標としている6月リリースの個人開発が黄色信号に。

なんとかして遅れを取り戻さないといけないんだけど、朝起きれないし、夜は眠い。

5時に起きて、開発やる。

って寝る前は思っているのに朝起きれない。

どうしたものか、どうしたもこうしたもやらなくちゃいけないんだけど。

Expoのバージョンがシミュレーション用のスマホアプリとずれたのでアップグレードする

nove-b

2年前からreact nativeでアプリを作成している。が、いろいろ（他のアプリ作ったり、仕事が忙しくなったり）あり放置気味で、重い腰を上げるかと「完成」を今年の目標に入れた。

GoでApi作成し、結合しようかと思ったところスマホのExpoアプリで開発中のアプリが開けなくなっていた。

原因はExpoのバージョンがずれていたこと。

スマホのアプリのアップデートを自動にしているので、どうやら開発側とずれてしまっていたらしい。

スマホアプリのバージョンを落としてもいいのだけれど、開発側のアップデートをすることにした。

Expo SDK のアップグレード

まんま上記の通り実行すれば問題ない。

npm install expo@latest
npx expo install --fix

これで無事に開発を続行することができるようになった。

Fabric.jsをAngularで最短で動かしてみる

nove-b

環境

Angular: 15
Fabric.js: 5.3.0

Fabric.jsとは？

http://fabricjs.com/

Canvas内に画像やテキストを配置したりすることのできるライブラリ。

配置した要素の「移動」、「リサイズ」、「回転」など非常に自由度高く操作することができる。

お絵描きアプリとかを作ることができる。

色々なデモ

インストール

$ npm i fabric

betaでバージョン6が公開されており、5から6で破壊的な変更があるっぽい。

つまり5を入れておくと、いずれ大規模な修正が必要になる可能性がある。

けど、解説とかは5の方が多いし、6がまだbetaということで5を入れることにした。

🧐 Breaking changes for fabric 6.0

次に定義ファイルも必要になったので"npm i @types/fabric": "^5.3.7",でインストールした。

実装

template

<canvas width="300" height="300" #canvasEl> </canvas>

まずテンプレート側でcanvas>を作成する。

component

次に、

 @ViewChild('canvasEl') canvasEl: ElementRef | undefined;

コンポーネント側でcanvasを取得し、

ngAfterViewInit() {
  if(this.canvasEl) {
    const canvas = new fabric.Canvas(this.canvasEl.nativeElement);
    const rect = new fabric.Rect({
      top: 100,
      left: 100,
      width: 60,
      height: 70,
      fill: 'red',
    });
    canvas.add(rect);
  } else {
    throw new Error('Canvasの取得に失敗しました。')
  }
}

fabricを呼び出す。

これで画面表示まで行けた。

ちなみに画面全体にcanvasを広げたい場合は、

canvas.setDimensions({width:number, height:number});

で実現できる。

〇追記

interactjsをAngularで最短で動かしてみる

domを動かしたかったというのがあるので、Fabric.jsではなくinteractを採用した。

WordPressから記事をHugoに大体移植した

nove-b

意外と見られていた旧ブログ

ブログをHugoにリニューアルし、WordPressの方はずっと放置していた。

先日ふっと思い立ちこのブログにもアナリティクスを導入した。その時ちらっと見たWordPressのアナリティクスの数字は自分の想像を遥かに絶するものだった。

さすがにこれはもったいないと、お引越しをすることにした。

幸いWordPressブログなのだが、記事はGitで管理していた（使わなかった...）。

これ幸い、引っ越しを始める。

記事一覧の取得

まずは記事一覧の取得を行っていく。

WordPressの拡張機能であるExport All URLsを使い、URLを出力した。

Post ID	Title	URL	Categories	Tags	Published Date
42	GithubActionを使用してエックスサーバーにデプロイする	https://media.nove-web.com/42/	Github	Github, Github Action, Wordpress, エックスサーバー, 効率化	2021/11/28 16:24

こんな感じの一覧が出力された。

次に出力したタイトルをパスパラメータ―に変換していく。

これが本当にしんどいけど、Chat GPTが全部やってくれました。

記事ファイルをxmlに変換する

WordPressの管理画面からxml形式にエクスポートをする。

エクスポートしたファイルをxml-to-markdownというフォルダに格納し、npx wordpress-export-to-markdownを実行する。

? Path to WordPress export file? name.WordPress.2024-06-07.xml
? Path to output folder? output
? Create year folders? No
? Create month folders? No
? Create a folder for each post? No
? Prefix post folders/files with date? No
? Save images attached to posts? Yes
? Save images scraped from post body content? Yes
? Include custom post types and pages? No

こんな感じに設定すると今までの記事がマークダウン形式に変換される。

このパッケージを作ってくれた人には感謝しかない。

地道に作業していく。

まずはファイル名を先ほど、GPTが作成してくれたパスパラメータ―に変換していく。

これは力作業、時間を浪費するだけの作業。

次にマークダウンの形式をHugoに合わせていく（そのままでも平気だった🤔?）

最後に、最初に作ったエクセルを有効活用し、.htaccessを作成していく。

<VirtualHost *:80>
    # 環境変数の設定
    SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
    SetEnvIf Request_URI ".*" Ngx_Cache_AllCacheMode

    # 301リダイレクトの追加
    Redirect 301 /42/ https://blog.nove-b.dev/posts/new-name
</VirtualHost>

これでお引越しが完了した。

リアルタイムも常時、人がいるようになったので、これで完了した。

React Nativeでセキュアな環境にTokenを保存する

nove-b

要はブラウザ委のストレージのような機能をアプリでどう再現するかを調べてみた。

iOSでは KeyChain、Androidでは KeyStoreという安全に重要情報を保存できる場所が用意されているらしい。

Expo Cliではreact-native-keychainが使えない。

で、React Nativeではreact-native-keychainというプラグインで実現できるらしいが、Expo Cliでは使えないらしい。これは落とし穴だった。結構な時間を溶かした。

expo-secure-storeを使用しよう

公式サイト

npx expo install expo-secure-store

でインストールする。

app.jsonに下記を追加する。

{
  "expo": {
    "plugins": [
      [
        "expo-secure-store",
        {
          "faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data."
        }
      ]
    ]
  }
}

実装

ログインボタンを押したときにアクセストークンを保存する。

<Button
  title="Log in"
  onPress={async () => {
    try {
      // ログイン処理
      // トークンを保存してメイン画面に遷移
      await SecureStore.setItemAsync("accessToken", "userToken");
      navigation.navigate("Main");
    } catch (error) {
      console.error("SecureStore error: ", error);
    }
  }}
/>

遷移先のページでチェックする。

  async function getValueFor(key:string) {
    let result = await SecureStore.getItemAsync(key);
    if (result) {
      console.log("🔐 Here's your value 🔐 \n" + result);
    } else {
      console.log('No values stored under that key.');
    }
  }
  useEffect(() => {
    (async() => {
      await getValueFor('accessToken')
    })()
  }, []);

削除はSecureStore.deleteItemAsync(key, options)で実装できる。

Go & Cloud Run & Cloud SQLでWebAPIを作成したけど、公開する前に諦めた

nove-b

Cloud RunとCloud SQLの料金が予想を上回った

Goの勉強をしたく、WebAPIを作成することにした。特別難しいこともないただのREST API。

せっかくなのでアプリを作成しようということで、側はreact nativeで作成した。

で、結合しているうちに料金が結構請求されていることに気が付いた。

Cloud SQLが大体20日で4000円くらい。

しかもここら辺はよくわからないのだが、インスタンスを停止しているにもかかわらず、料金が発生している気がする。

調査して理解する必要がありそうなので、いつかまとめる。

今は幸い無料期間でクレジットを消費しているだけだが、無料期間終了後は確実に払うことができない。

つまり、現実できじゃない。

ここは仕様検討で気が付くべきだった。

ここまでやったこと

Cloud Run & Cloud SQLでどうこうするのはいったん諦める。

でもいつか使うかもしれなので、やったことをまとめておく。

これしかなかった。

基本的にドキュメントが整備されているので、その通り実行すれば結果を得ることができた。

ただ、料金体系が理解できていなので、そこらへんは整理したい。

AWSも理解できていなので、こちらも理解したい。

fly.io

個人開発だとよく聞くし、ここを使ってみようと思っている。

そのためには料金体系とかしっかり調べる必要がありそうだけど。

Plan Pricing· Fly

料金表見る限り月額5ドルとのこと。

無料プランはなくなったぽい、まあこのご時世だしこんなものか。

本当はGoでの実績を作りたかったけど、firebaseで作成するか。

クライアントツールからCloud SQLのDBに接続したい

nove-b

Cloud SQLにデータベースを作成したのでクライアントツールで確認したくなった。

今回はHeidiSQLで接続していく。

Cloud SQL Admin APIを有効にする

1.2 接続設定を確認し、外部からの接続が許可されていることを確認します。これには、Cloud SQL Admin APIを有効にし、インスタンスのファイアウォール設定で必要なIPアドレスからの接続を許可する必要があります

参照元が不明だけど、Cloud SQL Admin APIを有効にする必要がある。

有効にする方法はCloud SQL API を使用するにある通り。

Google Cloud Platform Console で、プロジェクトを選択します。

API Manager コンポーネントで、[Google Cloud SQL API] をクリックします。

Google Cloud SQL API コンポーネントで、[API を有効にする] を選択します。

Google Cloud SQL API コンポーネントと Google Cloud SQL コンポーネントは違うことに注意してください。後者のコンポーネントは、Google Cloud Platform Console と Cloud SDK でインスタンスを管理するために有効にする必要があります。

Cloud SQLインスタンスへの接続を許可する

Google Cloud Consoleにログイン。
ナビゲーションメニュー（左上の三本線）をクリックし、「SQL」を選択。
接続したいCloud SQLインスタンスを選択。
「接続」タブを選択。
「公開IP」を設定。この設定がない場合は「公開IPの追加」ボタンをクリック。
「ネットワーク」のセクションにある「承認済みネットワーク」までスクロール。
「ネットワークの追加」ボタンをクリック。
ネットワーク：接続を許可したいIPアドレスまたはIPレンジを入力。例えば、自分のPCのIPアドレスを許可する場合は、「203.0.113.0/32」のように入力（/32は単一のIPアドレスを意味する）。
説明：任意の説明を入力（例：「自宅PC」）。
「完了」ボタンをクリック。
「保存」ボタンをクリックして設定を保存。

これで、指定したIPアドレスからCloud SQLインスタンスへの接続が許可された。

ちなみにIPアドレスは検索すればすぐにわかる。

HeidiSQLに必要情報を記載する

下記のように記載すれば接続できた。

ネットワークタイプ: MySQL (TCP/IP)
ホスト名/IP: パブリック IP アドレス
ユーザー名: Cloud SQLのユーザー名
パスワード: Cloud SQLのパスワード
ポート: 3306

interactjsをAngularで最短で動かしてみる

nove-b

環境

Angular: 15
interactjs: 1.10.27

interactjsとは？

https://github.com/taye/interact.js

JavaScriptでドラッグ＆ドロップ、リサイズ、マルチタッチジェスチャー（慣性とスナッピング機能付き）を実装できるライブラリ。

色々なデモ

インストール

npm install interactjs
npm install --save-dev @interactjs/types

でインストール。

実装

template

<div class="draggable">Draggable Element</div>

まずテンプレート側でdivを作成する。

component

次に、

 @ViewChild('canvasEl') canvasEl: ElementRef | undefined;

コンポーネント側でcanvasを取得し、

  ngAfterViewInit() {
    const position = { x: 0, y: 0 }
    interact('.draggable').draggable({
      listeners: {
        start (event) {
          console.log(event.type, event.target)
        },
        move (event) {
          position.x += event.dx
          position.y += event.dy

          event.target.style.transform =
            `translate(${position.x}px, ${position.y}px)`
        },
      }
    })
  }

interactを呼び出す。

これで画面表示まで行けた。

後は自由にカスタマイズしていける。

カスタマイズ

要素を自由にカスタマイズしたかったので、translateではなくabsoluteにした
複数要素に対応
ドラッグやリサイズはハンドルを使用する

とかいろいろ、やりたいことは結構実現できるカスタマイズ性の高いライブラリーだった。

Fabric.jsをAngularで最短で動かしてみる

domを動かしたかったというのがあるので、Fabric.jsではなくinteractを採用した。

Cloudflare Registrarでドメインを登録し、Netlifyのサーバーにサブドメインを当てる

nove-b

最適なドメイン管理プラットフォームを探して

今までいくつかのドメイン管理プラットフォームを利用してきた。

エックスドメイン
お名前ドットコム
Google domains

エックスドメインは特に不満がない。

Google domainsはよかったけど、サービス終了したので今後は使えない。

で、問題はお名前ドットコム。

ここ１年、メインのドメインを取得したんだけど、毎日のように膨大なメールが送られてくる。

設定でオフにできるかもだけれど、そもそもこんなにメールを送ってくるのはどうなのだろうかということで乗り換えることにした。

せっかくだし自身のドメインを新しくしようと思う。

今までnove-web.comというドメインだったけど、nove-bというドメインにしたい。

そしてトップドメインは開発者らしくdevにしたいということで、まずはなんら不満がないエックスドメインで探したが、どうやらdevドメインを扱っていないということ。

Cloudflare Registrarでドメインを登録する

じゃあ、どこで購入しようと調べてみるとCloudflare Registrarの評判が良さげだった。

料金も、同様にdevドメインを扱っているお名前ドットコムと比べると

	登録	更新
お名前ドットコム	2,178円	2,178円
Cloudflare Registrar	$10.18（1,603.63 円）	$10.18（1,603.63 円）

Cloudflare Registrarの安い。

どうやら卸売価格で提供されているのが強みらしい。

登録料と更新料は卸売価格で提供ドメイン名の登録市場は、初回のドメイン名購入時には大幅割引価格を提供するものの、じょじょに追加料金を加算し、更新料も膨れ上がるような企業で占められています。

Cloudflare Registrarの場合、お客様に請求するのは弊社が支払うドメイン登録料のみで、その他の料金はかかりません。値上げや想定外の料金は生じません。 Cloudflareのニ要素認証、マルチユーザーサポート、セキュリティ重視のカスタマーサポートチームといったセキュリティ機能でドメインの安全を確保し、安心してお使いいただけます。

ありがたい。

そういうわけで登録していくけど、特に難しいことはなかったので省略する。

Netlifyにで動くブログにサブドメインを当てる

Cloudflare Registrarでの作業

次にNetlifyにアップしているこのブログにサブドメインを当てていく。

DNS > Records > DNS management for nove-b.dev > Add Record の順にページを移動し、

タイプ	名前	コンテンツ	プロキシステータス	TTL
CNAME	blog	nove-b.netlify.app	DNS のみ	自動

のように登録した。

これで、blog.for nove-b.devをnove-b.netlify.appと紐づけ完了した。

プロキシステータスをDNS のみにすることでNetlifyのSSL証明書が正常に機能するようになるらしい。

Netlifyでの作業

次にNetlifyの管理画面にいき、Domain management > Add a domainボタンをクリックする。

で、先ほど作成したドメインを追加する。

最後にVerify DNS configurationをクリックすることで、SSL証明書が有効になり、無事にブログが表示されるようになった。

そもそもDNSとは？

いまさらながら、DNSについて調べてみた。

Domain Name Systemの略で、インターネット上でドメイン名とIPアドレスを結びつけるためのシステム。

上でも設定したタイプはそのレコードがどのような情報を表しているかを示しているらしい。

下記は代表的なもの一覧。

A (Address) レコード: ドメイン名に関連付けられたIPアドレスを示す。
CNAME (Canonical Name) レコード: 他のドメイン名の別名を指定する。
MX (Mail Exchange) レコード: メールサーバーのホスト名を指定し、そのドメインがメールを受け取る際のルーティングを定義する。
NS (Name Server) レコード: ドメインのネームサーバーを指定し、ドメインに関連するDNS情報を提供するサーバーを指示する。
TXT (Text) レコード: 任意のテキストデータを格納し、主にドメイン認証やSPFレコードなどの用途に使用される。

今回はすでにNetlifyが指定したドメインの別名を指定するという意味でCNAMEを使ったっぽい。

Domain Name Systemという略と知り、急に親近感がわいてきた。

それにしてもやっぱり独自ドメインはいい。

やっと自分のブログになった気がする。

HugoのPaperModにGA4を導入する

nove-b

WordPressから記事をHugoに大体移植したで書いた通り、旧ブロブのアナリティクスをみると想像以上にアクセスがきていたので、このブログにリダイレクトするようにした。

そのうえで、このブログでもPVを確認できるよう、GA4を導入した。

まずはhugo.yamlに下記を追加する。

services:
  googleAnalytics:
    id: G-**********

次に/layouts/_internal/google_analytics.htmlを作成してテンプレートを追加する。

{{- with site.Config.Services.GoogleAnalytics.ID }} {{- if hugo.IsProduction }}
{{- $ga4 := resources.GetRemote
"https://cdn.jsdelivr.net/npm/@minimal-analytics/ga4/dist/index.js" }} {{-
$track := resources.Get "js/track.js" }} {{- $opts := dict "params" (dict
"trackingId" . ) }} {{- $track = $track | js.Build $opts -}} {{- $stats := slice
$track $ga4 | resources.Concat "js/analytics.js" | minify | fingerprint }}
<script
  src="{{ $stats.RelPermalink }}"
  integrity="{{ $stats.Data.Integrity }}"
></script>
{{- end }} {{- end -}}

最後にassets/js/track.jsを作成し、

import params from "@params";

window.minimalAnalytics = {
  trackingId: params.trackingId,
  autoTrack: true, // <-- init tracking
  defineGlobal: true,
};

という風に記述する。

たったこれだけでトラッキングできるようになる。

あとはGA4にリアルタイムで無事に集計できているか確認出来れば問題ない。

JavaScriptのnew Set() って何?? Arrayと何が異なるのか

nove-b

new Set()ってなに？

先日ChatGPTでコード生成したところ、new Set()というオブジェクトが登場した。

そういえば使ったことあると思い調べてみると、JavaScriptの配列で重複したものを削除し、ユニークな配列を作成するで使っていた。どうやら配列を削除するのに使っていたよう。

実際に調べてみると、

Set オブジェクトは値のコレクションです。 Set に重複する値は格納出来ません。Set 内の値はコレクション内で一意になります。

とのこと。

簡単に言うと「要素の重複を許可しない配列のこと」だと思う。

じゃあ、配列と何が違うのか。

配列と何が違うのか

配列との違いは、

重複を許さない
インデックスでアクセスできない
あとは追加とか削除とかのメソッドが異なる
高次関数（map, filter, reduce）を使用できない

という点。

重複を許さない

const setValue = new Set([1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]);
console.log(setValue);
// [LOG]: Set (6) {1, 2, 3, 4, 5, 6}

このように重複した値はなかったことになる。

インデックスでアクセスできない

const setValue = new Set([1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]);
console.log(setValue[0]);
// Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Set<number>'.
// Property '0' does not exist on type 'Set<number>'.

こんな感じでエラーがでる。

追加とか削除とかのメソッドが異なる

const setValue = new Set([1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]);

// 追加
setValue.add(7);

// 削除
setValue.delete(1);

console.log(setValue);
// [LOG]: Set (6) {2, 3, 4, 5, 6, 7}

こんな感じ。

高次関数（map, filter, reduce）を使用できない

これはそのままの意味なので使えないというだけ。

メリットは？

聞く限り重複を削除するときにしか使い道が見つからない。

そこでメリットを調べてみた。

要素が含まれているかどうかを効率的に確認できるメソッド has があり、これは配列の includes メソッドよりも高速に動作する

とかなんとか要は配列よりも効率的であることが多いらしい。

つまりパフォーマンスを上げる時はSetを使うべきっぽい。

ChatGPT曰く、

Set は、挿入や削除、存在確認の操作が平均的に O(1) の時間複雑度で行えます。これに対し、配列の操作は要素数に依存するため、最悪の場合 O(n) の複雑度となります。

...うーん、難しい。

includesとhasで考えると、includesは配列内の全要素を順にチェックして指定した値を探すのに対し、hasはキーと値のペアを効率的に格納および検索するためのデータ構造であるはハッシュテーブルのように動作するため、要素の存在確認が早いとのこと。

なるほど。

nextjsで開発中にモックサーバーを立ち上げたいのでnext-swagger-docと@stoplight/prism-cliを比較してみた

nove-b

フロントエンドを開発するときにバックエンドサーバ―の用意ができていない時がよくある。

今までは側だけ作って待機していたが、せっかくなのでモックサーバーを立ち上げ、バックエンドができ次第、URLの向きを変え、完成！という風に出来ればと思いモックサーバーの立ち上げを調べてみた。

json-server

まずはjson-serverを使おうと思ったけど、同じエンドポイントでGet、Postが分けられなさそうということで不採用にした。けど、よくよく落ち着いて調べてみるとできるかもしれない。

いつか機をみて使ってみたい。

が、今回は上記の通り不採用した。

app/api

次に、そもそもnextjsにはAPIを作る機能があるじゃないかと思いだし、それを活用することにした。

ついでにAPI仕様書も作れればなおいいということで調べてみると、next-swagger-docというものがあった。

これでAPIを作成し、しかもSwaggerを作成できると舞い上がり実装してみた。

実装

npm i next-swagger-doc
npm i  swagger-ui-react

まずはインストールする。

ちなみにバージョンは下記の通り。

"next": "14.2.3",
"next-swagger-doc": "^0.4.0",
"react": "^18",
"swagger-ui-react": "^5.17.14"

lib/swagger.tsに下記をコピペする。

import { createSwaggerSpec } from "next-swagger-doc";

export const getApiDocs = async () => {
  const spec = createSwaggerSpec({
    apiFolder: "app/api", // define api folder under app folder
    definition: {
      openapi: "3.0.0",
      info: {
        title: "Next Swagger API Example",
        version: "1.0",
      },
      components: {
        securitySchemes: {
          BearerAuth: {
            type: "http",
            scheme: "bearer",
            bearerFormat: "JWT",
          },
        },
      },
      security: [],
    },
  });
  return spec;
};

※以降先頭行がファイル名になっている。

app/api-doc/react-swagger.tsx

'use client';

import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

type Props = {
  spec: Record<string, any>,
};

function ReactSwagger({ spec }: Props) {
  return <SwaggerUI spec={spec} />;
}

export default ReactSwagger;

app / api - doc / page.tsx;

import { getApiDocs } from "@/lib/swagger";
import ReactSwagger from "./react-swagger";

export default async function IndexPage() {
  const spec = await getApiDocs();
  return (
    <section className="container">
      <ReactSwagger spec={spec} />
    </section>
  );
}

app/api/hello/route.ts

/**
 * @swagger
 * /api/hello:
 *   get:
 *     description: Returns the hello world
 *     responses:
 *       200:
 *         description: Hello World!
 */
export async function GET(_request: Request) {
  // Do whatever you want
  return new Response('Hello World!', {
    status: 200,
  });
}

これで完成したけど、これもじっと考えてみると、普通にAPI作っているのと何ら変わらないのではないか。

ということに気が付いた。

この労力を使うのではバックエンドサーバー作ったほうがよっぽど早い気がする。

ということで不採用にした。

@stoplight/prism-cliを使うことにした。

結果的に、@stoplight/prism-cliを使うことにした。

これは作成されたSwaggerからモックサーバーを立ち上げてくれるというもの。

どうせAPI仕様書を作ってからバックエンドサーバーを作るので、それをSwaggerで作るという風にすればいい。

そうすればバックエンドを作る前にその仕様書からモックサーバーを立ち上げることができるので、業務ストップがなくなる。

使い方は、

npm install @stoplight/prism-cli

でインストールし、package.jsonに起動の記述を作成する。

"swaggerMock": "prism mock sample.yml"

これで、ルートにsample.ymlを作成するれば、それがモックサーバーとして起動される。

Hugo(Pagermod)で記事にGitのコミット履歴から最終更新日を付与する

nove-b

レベルが低かろうと技術ブログという矜持を持つ

最終更新日を付与したい。

というのも技術ブログにおいて更新日はとても大きな意味を持つ。

ちゃんと更新されている記事であれば、たとえ公開日が古かろうと問題ない。

ということで、このブログにも更新日を付与することにした。

HogoのテーマであるPagermodのカスタマイズ

当然、サブモジュールとしてインストールしたファイルをカスタマイズすると、本家の更新時に上書きされる。

これはみんな大好きwordpressと同様。

wordpressで子テーマを作るのと同様に、Hugoではサイト名\layouts\partials\というフォルダを用意して、そこにカスタマイズしたいファイルを持ってくる。

更新日を付与する

今回であれば、post_meta.htmlに投稿日の記述等があったので、このファイルをカスタマイズする。

そのため\layouts\partials\post_meta.htmlを作成し、

{{- if not .Date.IsZero -}} {{- $scratch.Add "meta" (slice (printf "<span
  title="%s"
  >%s</span
>" (.Date) (.Date | time.Format (default "January 2, 2006"
site.Params.DateFormat)))) }} {{- end }}

という元記述を

{{- if not .Date.IsZero -}}
{{- $scratch.Add "meta" (slice "投稿日" (.Date.Format (default "2006-01-02" .Site.Params.DateFormat)) "更新日" (.Lastmod.Format (default "2006-01-02"))) }}
{{- end }}

に変更した。ついでに日本語にした。

最後にhugo.yamlにenableGitInfo: trueを付与する。

この設定はbuild時に読み込まれるので、ローカルで開発している場合は一度サーバーを止め、再度buildしなおせば更新日が付与されていることが確認できる。

実際に付与されている例 ↓

nextjsで開発中にモックサーバーを立ち上げたいのでnext-swagger-docと@stoplight/prism-cliを比較してみた

ネイティブアプリ作成を諦め、まずはウェブ版をリリースに注力することにした

nove-b

ネイティブアプリを諦めた

さかのぼることはるか昔、まだ子どもが妻のおなかにいる頃。

要は1年9か月前にネイティブアプリの作成を思いついた。

それから幾星霜、まだネイティブアプリは完成していないし、モチベーションはすっかり下火になっている。

技術スタックを欲張った

理由はバックエンドにある。

というより、技術スタックを欲張ったことにある。

というのも今までは慣れた言語に1つ新しい言語を取り入れることで個人開発をしてきた。

Nuxt + firestore
Next + firestore
Next + Nest + aws

といった具合に行ってきたのだが、今回は「React Native + Go + GCP」というすべて初めての言語で臨むことにした。

わからないストレスをずっと感じつつプログラミングを進めていった結果、すべてそれなりの形にすることに成功した。

GCPにかかる料金で心が折れた

じゃあ、結合しようという時点で、GCPにかかる料金を知り仰天し、心が折れた。

Go & Cloud Run & Cloud SQLでWebAPIを作成したけど、公開する前に諦めた

GCPは無理だと知った時、もうモチベーションを保つことができなくなった。

すらすら書けないストレス

コードを書く時に、すらすら書ける言語と調べつつ書く言語だと心理的ストレスが全然違う。

今は全ての言語が初めてで調べつつ書いているので、辛い。

すらすらコードを書きとりあえず、モチベーションを上げ、最終的にネイティブアプリを完成させたい。

ただでは起きない

という理由があり、すらすら書けるWeb版の作成に着手しようと思い立った。

ただそれだけだとつまらないので、今回はテストコードも書いてみうと思う。

テストコードの勉強をしたいと思っていたのでちょうどいい。

そして、最終的にネィティブアプリを作成するので、その時の労力を減らすためにここでAPIを作成しちゃおうと思う。

決してただでは起きないように頑張る。

やること

じゃあ何をするのか。

Nextでフロントエンドを実装する
バックエンドはSupabaseを使ってみる。
app/apiでSupabaseをAPIにラップする
テストコードをしっかり実装してみる

という風にしようと思う。

それでPWAにしようかなあ。

その後ネイティブアプリ化するっていう目標。

Windows間のアプリ移行が簡単だった

nove-b

会社のPCを新しくしてもらった。

本当はSurfaceが良かったのだが、贅沢は言えない。

それにSurfaceだけど、チップがArmベースに移行したということで、ちょっと口コミが良くない。

個人で買うつもりだったけど、すこし迷いが生じている。

ともかく会社のPCが新しくなった。

で、そうすると移行作業が生じるのだが、非常に楽になっていた。

今回、とにかく移行したいのはWindowsにインストールしたアプリとvscodeの拡張機能の2つ。

Windowsにインストールしたアプリを以降

wingetを使用したら、何とも簡単に移行できた。

WingetでWindowsにアプリをインストールする

これのインストール情報をエクスポートするを実行すれば何の問題もなく移行できる。

vscodeの移行

こちらはプロファイルを使用する。

vscode右下の歯車アイコンをクリックし、プロファイル（規定）をクリック、最後にプロファイルをエクスポートを選択し、エクスポートする。

次にそれをインポートすれば、移行が完了する。

新しいPCを迎え入れるストレスが減った。

tailwindで定義した色をimportして使用する

nove-b

tailwindのconfigで定義したprimaryの色とかをtailwindのクラス以外で使用したい。

import type { Config } from "tailwindcss";

export const customColors = {
primary: "#2563eb",
secondary: "#4b5563",
danger: "#cd2626",
success: "#16a34a",
warning: "#f59e0b",
};

const config: Config = {
theme: {
  extend: {
    colors: customColors,
  },
},
plugins: [],
};
export default config;

みたいにすればいい。

【2024年6月】読書できず、目標も完遂できず、ウィルス性腸炎が猛威を振るう

nove-b

6月に読んだ本

時をかけるゆとり (文春文庫)

朝井リョウの正欲がすごいらしいと聞き、タイミングよくアンリミテッドになっていたので、時をかけるゆとり (文春文庫)を再読した。うーん、朝井リョウの小説は好きだけど、随筆は微妙かもしれない。文章もそれっぽく書いているけど、書ききれていないというかなんというか。空回りしているというかなんというか。エピソードは面白いんだけど。

今月はこれ1冊のみだった。

なんかダイヤのAをずっと読んでた気がする。

ブログの改造

だいたいこれで落ち着いたかしら。

後はしっかりアウトプットしていく。

今年の目標が今年の進行速度に敗れる

6月目標のネイティブアプリ作成。Cloud SQLへの接続まで完了はしたのでバックエンドの環境は整ったんだけど、テストしているとどんどんどんどん、課金されていく。多分これは本番運用に耐えられない。ということでマネードクターストップがかかった。GoでAPI作るっていう目的は達したので、まあ、良くやったといっていい気がする。

ただリリースしない個人開発は何も成し遂げていないので、まずは最短でリリースを目指すために、nextとsupabaseに構成を変更する。

そのうえで、ネイティブアプリを作ることする。

ネイティブアプリ作成を諦め、まずはウェブ版をリリースに注力することにした

10月まで仕事が繁忙期を迎える

7,8,9と案件が山場を迎えるので、仕事にコミットしようと考えている。

個人開発も勉強になるけど、仕事だって勉強になる。

ということでウェブ版も少しお休みにして、今から3か月だけ仕事人間になる。

基本情報技術者試験を10月に受けるという宣言

個人開発はお休みするけど、隙間時間で勉強はできるので、基本情報技術者試験の勉強をすることにする。

どのくらいで受かるかわからないけど、この3か月、時間の隙間で勉強していく。

そして10月に必ず、試験を受ける。

8月になったら申し込む（今すぐに申込できないところが決意の弱さを表している...）。

ロタウィルスが猛威を振るった

プライベートでは双子と妻が同時にロタウイルスの餌食になった。

結果、何もできないポンコツがひとりぴんぴんしていた。

何もできないので、ただ1週間会社を休み、おろおろしていた。

ご飯くらい作れないとこの先どうしようないということをひどく痛感した。

できることだけをやって家事している気になるなんて滑稽でしかない。

時期を見て妻に師事しようと思う。

保活って話で聞くより、壮絶かもしれない

来年の4月から双子が保育園に通うことになる。

きっと。

きっとというのも保育園に入れるのが壮絶難しい。

来年の4月からなのにもう見学が始まっているし、入れそうなところに見学行くとうーんとなる。

行きたいと思っているところは、そもそも空きがないし、数枠あっても双子がその数枠を占められるのかっていうのが不安視される。

しかも驚くべきことに双子には加点がない。

保育園落ちた日本死ね!!!、約10年前で他人事だったけど、自分事になってきた。

というより10年間、対策はないのかしら。

まあ、選ばなければ入れるし、そう考えるとそんなものか。

ただ自分の子どものことなるとみんな熱くなるのは仕方ない。

とりあえず、8月の「おかあさんといっしょスペシャルステージ」に当選したので、それを楽しみに8月まで保活する。

とはいっても自分は見学に行くだけなんだけど、妻が色々動いてくれて頭が上がらない。

Surface Pro

買った。遂に。7月に届くので所感はその時。

nextjsのプロジェクトでclass-variance-authorityを採用した

nove-b

レビューは勉強になる

最近案件が立て込んでいるのは6月のまとめに書いたんだけど、結果いくつかのプロジェクトで実装ではなく、ただのレビューアーと化している。

実装がしたいって今まで強く思っていた。

実装が実力を伸ばす唯一の手段だと思っていたけど、レビューも真剣にやればすごい勉強になることに気が付いた。

というのもレビューするには、まずコードをしっかり読まなければならないし、知らないプラグインとの出会いがあり、それを調べることで相当勉強になる。

で、今回出会ったのが、class-variance-authorityというプラグイン。

class-variance-authorityとは??

簡単に言うとvariantsを定義して条件分岐をわかりやすくするもの。

公式にあるbuttonコンポーネントの例がわかりやすい。

import React from "react";
import { cva, type VariantProps } from "class-variance-authority";

const button = cva("button", {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof button> {}

export const Button: React.FC<ButtonProps> = ({
  className,
  intent,
  size,
  ...props
}) => <button className={button({ intent, size, className })} {...props} />;

https://github.com/joe-bell/cva/blob/main/examples/react-with-tailwindcss/src/components/button/button.tsx

今まで自分が実装したときはjsxのほうに条件をいろいろ書いてコードが読みにくくなっていたけど、これならコードが整理されてわかりやすい。

懸念点があった

懸念点はprettierが効くのか、そしてvscodeの拡張機能が正常に動くかという点だった。

でもそれも公式でしっかり解消されていた。

prettier

tailwindのフォーマットが行われるようprettier-plugin-tailwindcssというプラグインを入れている。

prettier-plugin-tailwindcss

で、これがvariantsに書くと効かないことが分かった。

https://github.com/tailwindlabs/tailwindcss/discussions/7558#discussioncomment-7345390

ここで議論されており、解決されていた。

この通り行った結果、うまく動いた。

Tailwind CSS IntelliSense

これは自動でtailwindの補完、つまり予測を出してくれるvscodeの拡張機能。

これを効くようにするには、

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

という風に設定すればいい。で、再起動をする。

うん、勉強になった。

tailwind-mergeというプラグインはなぜ入れるのか

nove-b

Tailwind CSS を使う時に一緒に入れたいライブラリが参考になった。

px-4とpy-6というクラスを持つコンポーネントにp-10というクラスを渡した場合、CSS カスケードにより、p-10というスタイルは無視される。

CSS カスケードというのは、

異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズム

のこと。

で、今回は詳細度でp-10は無視される。

ただコンポーネントで上書きしようとしたスタイルが無視されるのは困る。

そこで必要となるのが、tailwind-merge。

tailwind-mergeはコンフリクトした Tailwind CSSのクラス名を取り除きつつ結合するライブラリで、上記では後から指定されたp-10により、px-4とpy-6というクラスが結果からとりの結果から取り除かれる。

結果、意図した挙動をするコンポーネントができあがる。

Surface(第11世代)を実際に買うまで悩んだこと

nove-b

Surfaceに片思い

遡ること、2年前前の2022年。Surfaceが欲しく家電量販店に通った。欲しくて欲しくてどうしよもなかったのだが懸念点がいくつかあり、決め手に欠けた。

例えば、Surfaceを象徴するキックスタンドとタブレットモード。

キックスタンドは狭い机で操作しにくいとか、膝上で操作できないとかいろいろな口コミが、購入を留まらせた。

またタブレットモードもそうで、そもそもタブレットとして使うには重すぎるし、winndowsのタブレットモードは使いにくいと思うって言われており、もっともだと思った。

そして購入に至らなかった最大の理由は、使用していたgramが十分に役割を果たしていてくれていた点。まだバリバリの現役だった。

それから2年の月日が経ち、gramの動きがもっさりとし、たまに動かなくなるよになった。なにより、キーボードのいくつかのキーが紛失していた。

買い替え時が訪れた

パソコンの買い替え時が訪れた。

2年の月日が経とうが、ずっとSurfaceが欲しかった。

これは買わなきゃ後悔するということで購入を決意した。決意したのだが、値段を見ると決意は簡単に揺らいだ。

最低20万7680円でタイプカバーをつけると23万くらいになる。

うーん、高い。ということでさらに3か月悩むことになった。

名乗りを上げる候補者たち

その間に富士通のFMV LOOXも候補にあがってきた。

すこしスペックは落ちるけど、最低限は担保しているように思える。

ただ、FMV LOOXはバッテリー35Wh（surfaceは48Wh）なので見送ることにした。

持ち運ぶ前提なのでバッテリーは重視したい。

それに、FMV LOOXは画面の縦横比が16対9なのもマイナスポイントになった。コーディングをするので縦長のほうが好ましく、この点もSurfaceが勝っている。

唯一、本体の重さが599gというのは非常に魅力的だった。

次のバージョンに期待しつつ見送る。

コスパのASUSが台頭する

なんて迷っているとASUSがProArt PZ13 HT5306というSurfaceと同じようなセパレート型のパソコンを出すことが発表された。

コスパに定評のあるASUSだしバッテリー容量も70whとずば抜けている。

期待しかないのだが、稼働中のgramがそれまで待てないほど消耗しきっているので、タイミングが合わなかったということで泣く泣く見送った。けど、次回以降の候補になるので、注視したい。

surfaceの懸念点 vs 思い

色々見送ったけど、そもそもSurfaceの懸念点がなくなったわけじゃなく、なんなら11世代はチップがARMになるとのことで、懸念点が増える一方だった。

でも2年間欲しかったという気持ちを尊重して購入にいたった。

結果

買ってみると予想以上に良かった。

何よりパソコン感がない。

今までパソコンを持ち歩くとき、すこし後ろめたさがあった。

パソコン持ち歩くってなにごと？みたいに思われやしないかと不安だったけど、Surfaceなら持ち歩いていても何も違和感ない。

裸で持ち歩いているけど、タブレット持ち歩いているのと何ら変わらない。

それにパソコンを開く抵抗も減った。

持ち歩くとき同様、パソコンは開くときもそれなりに心理的ハードルがある。話しつつ調べごとをする時に、パソコンを開くのは少し大仰な気がするけど、Surfaceならすっと開ける。何ならたぶんスタイリッシュに開くことができる（願望）。

心配したキーボードの操作性も特に問題ない。なにより、gramのようにキーがなくなっても交換できるという利点がある。

いい買い物をした。今のところ不満点はなく、購入してよかったと思える。

【2024年7月】読書できず、仕事に追われている

nove-b

7月に読んだ本

ない、何も読めなかった。

正直時間を作り出そうと思えばできた気がするけど、なんとなく手に取れなかった。

読まないといけないものではないけど、心のゆとりがなくなっている１つの指標ではあるので、すこし考えなおしたい。

どんだけ軽い本でもいいので、8月は1冊は読みたい。

趣味を失うことは恐ろしい。

Surfaceを購入した

Surface(第11世代)を実際に買うまで悩んだこと

悩みに悩んだけど、買ってよかったと思っている。

この記事で触れたProArth PZ13 HT5306はまだ販売していないよう。

待たなくてよかった。

1ヶ月近く使ったけど、満足している。

ただまだ家でしか使ってないので、小さいテーブルで発生するキックスタンドの問題には直面していない。

9月まで仕事が繁忙期を迎える

なかなか忙しい。

８月９月と家族の誕生日、そして保活とイベントが盛りだくさんなのだが、そこらへんが疎かになっているので、家庭に危機感を持たないといけない。

うまくバランスをとるか、ここは一気に仕事にけりをつけるか悩みどこだけど、今回の案件的にバランスが取れるような感じではないので、少しでも早く終わらせられるように全力で取り組む。

案件的には学びもあり、楽しくはある。

ただやっぱり家で仕事するのはどうなんだろう。

自分は楽しいからいいけど、家族的にはそんなことないだろうし、理想は家に仕事を持ち込まないことだと思う。

少し遅く帰ってもいいけど、家族が起きている時間は家族を優先するべきだよね。

早く起きてやるとか。すこし考え直さないといけない。

目標を変えるというのは悪手でしかない

という風に、最近はずっと忙しいのだが、不思議なことに忙しいとやりたいことがたくさん生まれる。

たとえば今年の目標の１つであるマストドンのサーバーを無性に立ち上げたくなったりとか。

でも10月に基本情報をとるって決めているので、まずはそこからクリアしたい。

勉強できていなので、クリアできるかわからないけど、１つづつ消化していくのが一番いい。

8月から10月までの生き方

ということで、この記事を書いているのがすでに10日で8月の1/3を終えているのだが、

家族が起きている時間は仕事をしない(家のことが終わり次第ok)
10月の基本情報に向け、勉強する

これが10月までの生き方でマストドンのサーバーは基本情報が終わり次第着手していく。

【2024年8月、9月】とにかく仕事に追われる

nove-b

デスマーチから帰還する

気がついたら10月になっていた。

ここ最近、納期に追われて更新すらできなかった。

8月から始まったデスマーチは9月中の納品を目指し壮絶を極めた。

反省点が多い

何故デスマーチになったのか、後述するように会社都合でもあるのだが、自身の反省も多くある。

useSWR をラップしてCURDに対応させたこと
form内のvalue定義をミスったこと
コンポーネントを共通化しすぎたこと
共通処理をうまくまとめられなかったこと
プルリクのマージレベルを下げたこと

あげだすときりがない。これにスケジュールの反省点もある。

これは重要なので今度まとめる。

裁量労働制という奴隷制度と文化祭前の高揚感

壮絶を極めたので、毎日帰宅は日をまたぎ、土日もほぼ出勤した。

しかしいくら仕事をこなしても裁量労働制なので残業が出るわけでもない。

しかもこの納期、会社の決算前に売り上げを上げたいという、こちら提示の納期なので、なぜか自分の会社に首を絞めれるという摩訶不思議な案件だった。

積る不満はいくつもあるが、案件としてはとても楽しかった。

立ち上げたサーバーに入り操作することも、バックエンドの人といろいろ最適解を探りつつ、勉強しつつ進めていくのがとても楽しかった。

色々なことを犠牲にしたが、その分成長できたし、わいわい楽しくできたと感じている。

脱落者がいないのもいい結果だった。

仕事は家庭を犠牲にする

さて、色々なことを犠牲にしたと書いたが、特に犠牲になったは家族である。

日をまたいで帰る日は既にみんな就寝し、寝顔を見ることしかできない。

普段、家事を沢山しているわけではないが、この間ほぼなにも手伝えずで、妻がワンオペで乗り越えてくれた。

忙しく帰れないせいで妻が飲み会に行けなかったり、しかもすっかりそのことを忘れていたりと散々迷惑をかけた。

申し訳ないし、感謝してもしきれない。

その分給料とか還元されるものがないので、やっぱり少し納得いかない気もする。

みんな1歳歳をとった

家族の誕生日が8月末と9月初めに集中している。

さすがに誕生日に、とくに双子の誕生日に仕事に行っているわけにはいけないと、メンバーには申し訳ないが、家族写真撮影とアンパンマンミュージアムに行った。

カレーパンマン好きは遺伝する

双子のうち娘のほうがなぜかカレーパンマン好きで「かれー」とよく言っている。

あるいはカレーが好きなだけかもしれないけれど、どうやら世間的にカレーパンマンが好きな人は少数派らしく、妻に自分もカレーパンマン好きだったことを言うと驚いていた。

そんなことまで遺伝するものなのか、と。

そんなカレーパンマンに抱きしめれられてご満悦の娘と、いつもの姿からは想像できない素早さで動く息子を見ていると、やっぱりたくさん家に帰って、長い間子供たちを見ていたいと思うようになる。もちろんその分大変なことも多いのだけれど。

案件が終わった今、少しでもいろんなところに行き、たくさん思い出を作りたいと改めて思った。

今年はあと、昭和記念公園に行って、箱根に旅行に行きたい。

あと、おかあさんといっしょのファミリーコンサートのリセールにも当選したいし、ディズニーランドの予約もせねばならん。

来年からは妻の育休が明け、好きに遊びに行けなくなるに違いないので、それまでに存分に家族で楽しみたい。

ーー、のはやまやまなのだが、保活も仕事同様に壮絶を極め、いろいろ時間を浪費している。

保活について

まず、うちは双子なので当然、２人分の枠が必要になる。

だがしかし、多くの保育園は１～２人という募集要項で、運よく2人だとしても双子で埋めていいものかという疑問が残る。

いや入れるのなら入るのだが、それが不利に働かないかと不安になる。

考えられることを国はしてくれているんだろうけれど、保活壮絶すぎるでしょう。

文句を言っても仕方ない。引き続き頑張る。

8月９月に読んだ本

毎月まとめている読んだ本だが、そんな通りなので、全然本が読めなかった。

8月と9月で1冊。しかもそれがあまり面白くなかった。

かなりや荘浪漫廃園の鳥たち (PHP文芸文庫)

ログによると

なんか、序章って感じ。何も始まってない、シリーズぽいけど、もう読まなくていいかな

っていう感想だったらしい。

10月は本を読む。

今のままだとキンドルアンリミテッドに入っている意味がないし、なによりずっと大好きだった趣味を失いたくない。

Mastodonのクライアントアプリ

Trunksというアプリを見つけ、使い始めた。

これが良いのだけれど、唯一の欠点が絵文字リアクションに対応していない。

なので、絵文字リアクションに対応したクライアントアプリを作りたい。

そしてそもそも自分のサーバーを建てたい。

まずは自分のサーバーを建てようと思う。

これは必ず今年中に実現する。と宣言してみる。

マストドンでおひとり様サーバーを立ち上げた

nove-b

おひとり様サーバーに憧れる

2023年の11月。

つまりおおよそ1年前からMastodonを使用してきた。

ハロー・ワールドという本を読み、オープンソースのSNSという響きに憧れ開始した。

そのレベルの解像度なので何も考えずに有名で汎用的なhttps://fedibird.com/にお邪魔させてもらってきた。

それから1年経ち、なんだかんだ呟いたりしているうちに、自分のサーバーを持ちたくなった。

サーバーの立ち上げに興味を持つ

いままでいくつかサービスを公開してきた。

vercel
firebase
aws
cloud run

上記のようなサービスを使ってきたが、vercel、firebaseはgithubにデプロイするだけでサイトが公開されるし、awsとcloud runはコピペするだけでなんとか乗り切ってきた。

つまりサーバー何もわからない、エンジニアなのに。

これじゃいけないということで、vpsを借りて好き勝手出来る環境を作ってみようと思い立ち、それならMastodonを運用するのがいいじゃないかと天啓をひらめいた。

思い立ったが吉日、vpsを借りて立ち上げてみた。

MastodonをエックスサーバーVPSで立ち上げる

そもそも必要な要件がわからない

vpsを選ぶうえでいくつか候補があったけど、過去のブログでレンタルサーバーとしてお世話になったエックスサーバーを使うことにした。

前述したとおり、サーバー何もわからないので、「メモリ」「vCPU」「NVMe SSD」とかどのくらいを選べば適正に運用できるかがわからない。

調べてもよくわからないので、運用しつつ見定めていくことにした。

ということでとりあえず最小の2GBプランにしてみる。

2GBプランは

メモリ 2GB
vCPU 3コア
NVMe SSD 50GB

それぞれ簡単に調べてみた感じ、

メモリ（RAM）
役割: サーバーが一時的にデータを保存する場所です。たくさんの人が同時にWebサイトにアクセスしてもスムーズに動くようにします。
メリット: メモリが多いと、Webサイトが速くなり、同時に多くのアクセスを処理できます。
2. vCPU（仮想CPU）
役割: サーバーの頭脳で、リクエストを処理したり、ページを作ったりする仕事をします。
メリット: vCPUが多いと、Webサイトの処理が速くなり、アクセスが増えても遅くなりにくくなります。
3. NVMe SSD
役割: サーバーのデータ（ファイルや画像など）を保存する場所で、データの読み書きが速いです。
メリット: NVMe SSDが多いと、Webページの表示が速くなり、データベースも素早く動作します。

とのこと。

うーん、メモリとCPUの違いがよくわからない、いつか誰かに教えてもらいたい。

ドメインを用意しておく

よくわからないけどvpsは契約したので、次はドメインを作成する。

このブログもサブドメインで運用しているので、同じようにサブドメインを作成し運用することにした。

Cloudflare Registrarでサブドメインを作成する。

ドメインのページに行き、DNS 管理で

タイプ	名前	コンテンツ	プロキシステータス	TTL
A	social	VPS情報のIPアドレス	DNSのみ	自動

のように登録する。

ちなみにプロキシステータスが何かよくわかないけど、のブログはDNSのみに設定されていたので合わせた。

プロキシ済みにすると

この動作により、Cloudflare はアプリケーションへのすべてのリクエストを最適化、キャッシュ、保護できるだけでなく、オリジンサーバーをDDoS 攻撃から保護できます ↗。

とのことらしく、どうしてDNS のみにしたんだろうと過去のブログを検索するとNetlifyは

プロキシステータスをDNS のみにすることでNetlifyのSSL証明書が正常に機能するようになるらしい。

という経緯があったらしい。忘れていた。

後日これを書いている時、これを機にMastodonのほうをプロキシ済みにしよう安全だし、と思い変更したらサイトが落ちた。

つまりDNSのみじゃないといけないらしい。

そんなこんなでドメインの作成までが完了した。

Mastodonをインストールしていく

基本的に、公式が丁寧すぎるので従っていけば問題なく表示できる。

Mastodonアプリイメージを利用する

ただ初心者過ぎていくつか詰まったのでそこだけまとめておく。

公式の方法でサーバーに接続できないのでvsCodeを使用した

VPS管理画面のコンソールかTera Termを使ってサーバーに接続しファイルの編集とかを行う必要があるのだが、慣れてなさすぎてファイルの編集が難しいということでvsCodeから接続することにした。

Remote - SSHという拡張機能を使い接続する。

リモートエクスプローラーを開き歯車からC:\Users\{username}\.ssh\configを開き、

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host サーバー名
  HostName IPアドレス
  User root
  Port 22  # SSHポート番号 (通常22)
IdentityFile ダウンロードしたSSH Keyのパス

のように記述すればリモート接続できるようになった。

これでvsCodeでコードの編集とかをできるようになる。

結果的に便利になった気がするので良かった。

GmailのSMTPが使えなくなっていた

2024年9月30日よりGmailのSMTPサーバー（smtp.google.com）でパスワードを利用した認証が利用できなくなる

とのこと。

パスワードを利用した認証っていうのがよくわからないけど、うまくいかなかったので今回はメールを使用しないことにした。

どんな不便が発生するかわからないけど、おひとり様サーバーなのでいらないはず。

Adminっていうユーザー名にしてしまった。

管理者を作りますかという質問に脳死で答えていたら、

https://social.nove-b.dev/@admin

というユーザー名にしてしまった。

別にいいんだけれどダサいので変更したい。

root@x {ipアドレス}:/# su - mastodon
mastodon@x {ipアドレス}:~$ cd ~/live
mastodon@x {ipアドレス}:~/live$ RAILS_ENV=production bundle exec rails console
user = Account.find_by(username: 'admin')
user.username = '新しいユーザー名'  # または他の許可された形式
user.save!
mastodon@x {ipアドレス}:~/live$ exit
root@x {ipアドレス}:/# sudo systemctl restart mastodon-*

上記で無事変更できた。

おひとり様サーバーデビュー

運用していく、楽しみもあるけど、不安も多い。

ともかくデビューには成功した。

@nove_b@social.nove-b.dev

もしかするとサーバーが崩壊してすぐにいなくなるかもしれないですが、もしよろしければフォローしてください。

マストドンのfaviconを変更する

nove-b

せっかくのおひとり様サーバーなので好き勝手実験したいということでまずはfaviconを変更することにした。

エックスサーバーVPSのMastodonアプリイメージを使用したので、どこにmastodon本体があるかわからなかったが、色々検索した結果、/home/mastodon/live/に存在することが分かった。

Remote - SSHを使用し、対象のディレクトリに移動後、faviconを置き換え、sudo systemctl restart mastodon-*を実行。

確認するけど、変更されていない。

ソースを見るとfaviconは変更されているけど、

<link href='/favicon.ico' rel='icon' type='image/x-icon'>
<link href='/packs/media/icons/favicon-16x16-c58fdef40ced38d582d5b8eed9d15c5a.png' rel='icon' sizes='16x16' type='image/png'>
<link href='/packs/media/icons/favicon-32x32-249409a6d9f300112c51af514d863112.png' rel='icon' sizes='32x32' type='image/png'>
<link href='/packs/media/icons/favicon-48x48-c1197e9664ee6476d2715a1c4293bf61.png' rel='icon' sizes='48x48' type='image/png'>
<link href='/packs/media/icons/apple-touch-icon-57x57-c9dca808280860c51d0357f6a3350f4d.png' rel='apple-touch-icon' sizes='57x57'>
<link href='/packs/media/icons/apple-touch-icon-60x60-bb247db195d9ee9d8c687b2b048508d9.png' rel='apple-touch-icon' sizes='60x60'>
<link href='/packs/media/icons/apple-touch-icon-72x72-799d90b81f5b28cea7355a0c0b356381.png' rel='apple-touch-icon' sizes='72x72'>
<link href='/packs/media/icons/apple-touch-icon-76x76-015d73d770413d121873193153ae4ab5.png' rel='apple-touch-icon' sizes='76x76'>
<link href='/packs/media/icons/apple-touch-icon-114x114-211e68807b8d15707666a8d326d338b1.png' rel='apple-touch-icon' sizes='114x114'>
<link href='/packs/media/icons/apple-touch-icon-120x120-4c4e647d758bf1b2f47a53e2165a01d2.png' rel='apple-touch-icon' sizes='120x120'>
<link href='/packs/media/icons/apple-touch-icon-144x144-ff3110f7772743bdd0c1c47fb7b2d4e0.png' rel='apple-touch-icon' sizes='144x144'>
<link href='/packs/media/icons/apple-touch-icon-152x152-b12cbb1baaf4a6111d0efd391fd829c9.png' rel='apple-touch-icon' sizes='152x152'>
<link href='/packs/media/icons/apple-touch-icon-167x167-6f21a68f6a05a8b5cf25b1729e553728.png' rel='apple-touch-icon' sizes='167x167'>
<link href='/packs/media/icons/apple-touch-icon-180x180-a75559a0af48064c1b7c71b81f3bf7c6.png' rel='apple-touch-icon' sizes='180x180'>
<link href='/packs/media/icons/apple-touch-icon-1024x1024-db6849588b44f525363c37b65ef0ac66.png' rel='apple-touch-icon' sizes='1024x1024'>

favicon.ico以外にも複数の画像を読み込んでいるらしいことが分かった。

仕方がないので全ファイル分作成し、同様の画像名にし、置換。

sudo systemctl restart mastodon-*を実行し無事にfaviconが反映されていることを確認した。

Mastodonをアップデートするたびに更新されるので、意味ない気がする。

変更した後に気が付いたけど、まあいいや。

appearance-noneってなにか真剣に調べてみた

nove-b

appearance-noneはOS レベルのスタイル制御するもの

ウェブフォームのスタイル設定はOSレベルで設定されている。

そのため、コントロールの見た目のカスタマイズの問題の一部となっていた。

appearance-noneは適用したコントロールがシステムレベルのスタイルを使用することを可能な限り止め、 CSS を使用して自分でスタイルを構築できるようにするプロパティ。

フォームへの高度なスタイル設定ほぼこれに書いてあること、そのまま。

CSSの上書きと何が違うのか

appearance-noneではボタンやフォーム要素のデフォルトスタイルを即座に取り除き、開発者がカスタマイズするベースを作ることができる。上書きだと個別に上書きするのは手間がかかかるので、その点便利なプロパティとのこと。

なんとなく使っていたので、はじめてその有用性に気が付いた。

ポエム木こりのジレンマ

最近というか今更というか、木こりのジレンマなる寓話を思い出した。

ある日、森で一生懸命に木を切っている木こりがいました。彼は朝から晩まで休むことなく木を切っており、疲れ果てています。それでも、木を切るのにとても時間がかかっているため、彼はさらに焦っていました。

そこへ通りがかった旅人が木こりに話しかけました。

「あなたの斧はとても鈍くなっているようですね。少し休んで、斧を研いだ方がいいですよ。」

木こりはその言葉にイライラして答えました。

「そんな時間はない！見ての通り、木を切らなければならないんだ！斧を研ぐ暇なんてないんだ！」

旅人は木こりにもう一度諭しました。

「でも、斧が鋭くなれば、木をもっと早く、もっと簡単に切れるはずですよ。少し休んで斧を研いだ方が、結果的に仕事が早く終わるでしょう。」

木こりは依然として目の前の仕事に集中しすぎて、斧を研ぐことの重要性に気づかず、疲れ果てたまま非効率に仕事を続けました。

この寓話は、効率的に物事を進めるためには、短期的な忙しさに囚われず、道具や方法を改善する時間を取ることの重要性を説いている。

そしてこれの話がとても心に響いた。

プログラミング中、忙しい時は特にその場しのぎの解決策に飛びつき、特に考えることなく実装する。

結果的にその案件は完遂するけど、身につくものをいくつか取りこぼしている。

なのでこれからは、気になったことはどんどん調べ、ここに備忘録として残していく。

TypeScriptで一回unknwonに変換するのはどういう意味があるのか

nove-b

as unknown as ?

as soon asは「できるだけ早く」で、中学生の時、喉が擦り切れるほどむやみに連呼していた記憶がある。

おかげさまで、この意味を30歳超えても忘れていない。

だが、as unknown asは知らなかった。

そもそもunknownってなに？

unknownは型が分からないときに使用するらしい。

つまりそれってanyではと思うし、間違っていない。

その両方ともどのような値も代入することができる。

const any1: any = null;
const any2: any = undefined;
const any3: any = true;
const any4: any = 0.8;
const any5: any = "Comment allez-vous";
const any6: any = {
  x: 0,
  y: 1,
  name: "origin",
};
const unknown1: unknown = null;
const unknown2: unknown = undefined;
const unknown3: unknown = true;
const unknown4: unknown = 0.8;
const unknown5: unknown = "Comment allez-vous";
const unknown6: unknown = {
  x: 0,
  y: 1,
  name: "origin",
};

サバイバルTypeScriptからの引用。

違いは型チェックをするしないかという点らしい。

つまりanyを使用するとはコンパイル時には気が付けないのに対し、unknown型は一貫してTypeScriptがプロパティ、メソッドへのアクセスを行わせない。結果的にコンパイルを実行することができず、意図しないランタイム時のエラーを防止することができる。

例えば、下記コードでは'unknownValue' is of type 'unknown'.というエラーが出る。

let unknownValue: unknown = {
  x: 0,
};
unknownValue.x = "hello";

anyよりも厳格な型らしいので、unknownを使ったほうが良いのだろうか。

unknownは理解した、ではas unknown asはなに

ちなみにこの構文(as ○○ as)のことを型アサーションっていうらしい。

TypeScriptには、型推論を上書きする機能があります。その機能を型アサーション (type assertion)と言います。

TypeScriptコンパイラーはコードをヒントに型を推論してくれます。その型推論は非常に知的ですが、場合によってはコンパイラーよりもプログラマーがより正確な型を知っている場合があります。そのような場合は、型アサーションを用いるとコンパイラーに型を伝えることができます。型アサーションはコンパイラに「私を信じて！私のほうが型に詳しいから」と伝えるようなものです。

ただ、型アサーションを使用してもコンパイルエラーが出るときがある。

例えば、

const num = 123;
const str: string = num as string;

これは

Conversion of type 'number' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.(2352)

というエラーが出る。

これはnumber型をstring型にするのは間違いです。お互いの型に共通する部分が少なすぎるからですというエラーらしい。

TypeScriptは無茶な上書きはできないように設計されているのだが、それでも自分の書いた型アサーションが正しいという場合は

const num = 123;
const str: string = num as unknown as string;

このように一度unknown型を経由することエラーを出さずに型推論を上書きすることができる。

サバイバルTypeScriptの警告

最後に参考にしたサバイバルTypeScriptに教訓が載っていたのでそのまま載せておく。

大いなる力には大いなる責任が伴う

型アサーションには、コンパイラーの型推論を上書きする強力さがあります。そのため、プログラマーは型アサーションによってバグを産まないように十分注意する必要があります。型に関することはできるだけ、コンパイラーの型推論に頼ったほうが安全なので、型アサーションは、やむを得ない場合にのみ使うべきです。

型アサーションを使う必要が出てきたら、それよりも先に、型ガードやユーザー定義型ガードで解決できないか検討してみるとよいでしょう。

TypeScriptで出てきたRecordってなに

nove-b

ChatGPTにコードを書いてもらっていると知らない書き方と出会うことができ、勉強になる。

ChatGPTに書いてもらうことは悪いことばかりじゃないと最近は思うようにしている。

ちょっと前までは反骨心から使ってなかったけど、そう思うようになってからはどんどん活用している。

ただChatGPTを使って学習したことを活用する機会はChatGPTに奪われているけど。

Recordってなに

そんなChatGPTが提案してきたコードにRecordという型があったので、どういう型なのか調べてみた。

Record<Keys, Type>はプロパティのキーがKeysであり、プロパティの値がTypeであるオブジェクトの型を作るユーティリティ型です。

とのこと。

例えば、キーがstringで値がnumberのインデックス型を定義するには、

type StringNumber = Record<string, number>;
const value: StringNumber = { a: 1, b: 2, c: 3 };

キーがfirstName、middleName、familyNameで、値が文字列になるオブジェクトの型を定義するには、

type Person = Record<"firstName" | "middleName" | "lastName", string>;
const person: Person = {
  firstName: "Robert",
  middleName: "Cecil",
  lastName: "Martin",
};

こんな感じで使用することができる。

ただ、2つ目の例のようにKeyが確定している型に関しては

interface Person {
  firstName: string;
  middleName: string;
  lastName: string;
}

と何が違うのか。

結果的には同じ構造

上記だと同様の型定義になる。

ただinterface のほうが拡張性が高く、Recordのほうが簡潔に書けるけど、具体的なプロパティ名や構造を明示しにくいとのこと。

じゃあ、Recordはいつ使うのか。

Recordの使い道

Record は多くのキーが同じ型を持つ場合、簡潔に型を定義する時

type WeeklySchedule = Record<"Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday", string>;

動的なキーの集合に対して一律の型を定義したい時

type ApiResponse<T> = Record<string, T>;

こんな感じで動的なキーの型付けや簡潔なオブジェクト型定義が必要なときに使えるらしい。

【2024年10月】人間的生活を取り戻した

nove-b

10月に読んだ本

失恋覚悟のラウンドアバウト

15日にデスマーチから帰還し、読書を再開した。

なんか馬鹿馬鹿しい本が読みたいと手に取った本で、期待通りに馬鹿馬鹿しかった。

今の自分にはちょうどいい。

ブログを再開

忙しさにかまけて、というより更新したくても更新できなかったこのブログを、再活性化している。

10月15日から更新を再開し、結構活動的に書いてきた。

というのもやっぱりアウトプットするべきだと再認識した。

アウトプットするということではなく、アウトプットするために調べることが重要で、appearance-noneってなにか真剣に調べてみたでも書いたけど、木こりのジレンマの寓話のように、一見遠回りに思えてもそれが後に生きてくることが、勉強においては多分にある気がする。

そういうわけで精力的にブログを書いていきたい。

ひっそりと終わるブログ

そんな中、ワードプレスで作成したブログがサーバーの更新日を迎える。

2年間くらいお世話になったけど、記事の管理をGitHubにしたいがためにさよならしたブログで、更新はしないため一生のお別れになる。

記事効率化のためにワードプレスのプラグインを作成したりとなかなか楽しい経験だった。

create-eye-catch-for-classic

初！公開したプラグインに要望が届く

そういえば、そんなプラグインにissueが上がっていた。

公開しているプラグインにissueが上がるのは初めてなのでテンションが上がるけど、やらないとという焦燥感がある。

できるかわからなし、もうサイトも閉じ、プラグイン更新する熱量もないけどせっかくなので対応してあげたい。

使ってもらえているのはシンプルにうれしい。

マストドンのサーバーを立ち上げる

忙しい仕事から抜け出し、ぽっと自分時間ができたので、いの一番にマストドンのサーバーを立ち上げた。

マストドンでおひとり様サーバーを立ち上げた

レンタルサーバーを借りることはよくあったけど、vpsを借りたのは初めてでまだ何もわかっていない。

ただフルスタックになるにはこの領域の理解も深めなくてはいけないので、いっぱい試行錯誤してみる。

実験的な場にしたい。

ただSNSとして使うのであれば、お金を払いSNSをしているというわけのわからない状況になるので頑張る。

今年の目標１つクリア

マストドンのサーバーを立ち上げたことで今年の目標を1つクリアしたことになる。

[ ] ネイティブアプリをリリースする
[ ] 基本情報技術者資格を取る
[ ] OSS活動にコントリビューとする
[x] Mastodonのサーバーを立ち上げる

最後まで達成できそうもないので、次はネイティブアプリリースにする。

ちょうどいいので、マストドンのクライアントをリリースしたい。

今年中はきついと思うけど、リリースまでもっていきたい。

やることが多い

目標クリアにささげられる時間もあんまりない。

子どもができて、仕事が増えて、明らかに自分に使える時間が減った。

つまり今後はどうやって時間の濃度を高めていくかにかかっている。

とは言え、自身の集中力の低さはわかっている。

どうすればいいのか、やっぱりポモドーロとかテクニックを取り入れる必要があるのかしら。

11月はとりあえずポモドーロを実行してみるか、そうしよう。

ポモドーロのルール

せっかくのなのでここに明確にしておく。

1クールを25分
- 1クールで終わらせる量をあらかじめ定めてクールに入る
- 終わっていようと終ってなかろうと25分でクールは切る
- クール中に他の事、連絡も含めほかのやることは禁止
- やることが終わったらクール完了
- クール完了後は飲み物を飲む（なんとなく）
- 5分間の休憩は何をしてもいいけど、5分を決して超えないようにする
何ポモドーロしたかは記録しておく。

ちょっとこれで11月は試してみる。

どこにポモドーロした回数を記録しておくかは別で考える必要がある。

アプリがあるならそれを活用するのもいいかもしれない。

11月の月報にはいい知らせを載せられるようにしたい。

コロナにかかった

そういえば、コロナにかかった。

家族全員で39度出して寝込んだ。

とは言え、特別辛いわけでもなく1日で完治した。

ちょうど土日を挟んだので、みんなで21時に寝て、8時に起きて、13時～16時まで昼寝するという何ともいい生活を送らせてもらった。

ただ、いろいろな予定がキャンセルになったり、やっぱり感染症なんてかかるものじゃない。

2年前にコロナになり、2年ぶりの風邪がコロナだった。

風邪ひかないことが取り柄なのにコロナだけは防ぎきれないらしい、つまりコロナはやばい。

Happy Halloween 👻

GitHubもハロウィーン仕様だった。

そういうわけで、Happy Halloween 👻！

JavascriptでEnumをより保守性高く使う方法

nove-b

例えば


enum Example {
  緑茶
  麦茶
  紅茶
  珈琲
}

というEnumを使って比較をする時に、

if(key === +Example.緑茶)

という比較を書くか

if(Example[key] === "緑茶")

という風に書くかどっちがいいのかがわからなかったので調べてみた。

if(key ===Example.緑茶)のほうが保守性が高い

理由としては、まずExample.緑茶という風に書くことで型推論が効きタイポが起きにくくなる。

Example[key] === "緑茶"と書くときは型推論が効かないので、青茶って書いても何も教えてれない。

if (Example[key] === "青茶") {
}

こう書いてもエラーが出ない。

これ以外にメリットがありそうだったけど、これが最大のメリットな気がする。

そういうことでEnumを直接比較したほうが良い。

Mastodonのおひとり様サーバーにおける連合タイムライン

nove-b

連合がない

おひとり様サーバーを立ち上げたのは過去に書いたのだが、フォロワーを探すために連合を見に行った。

当時（といっても１か月もいかないくらい前）連合とはmastodonに投稿されるすべての呟きが忙しく流れるところという認識だった。というのもかつていたサーバーの連合は絶え間なく呟きが投稿されていたからである。

しかしどうしたものか、自サーバーの連合はタイムラインと大差ない。

うまくサーバーが立ち上げれていないのか、はたまたそういうものなのか。

そもそも前にいたサーバーの連合も日本語だらけで海外の投稿がなかった気がする。

つまり連合は「mastodonに投稿されるすべての呟き」じゃない......？

連合は同一サーバーに所属する人のコミュニティが反映される

ドキュメントを探っていたところ、下記情報に遭遇した。

公開タイムラインに流れるコンテンツの閲覧

興味のありそうなコンテンツを発見できるように、Mastodonはすべての公開投稿を見る手段を提供しています。とはいっても、全部のサーバー間で包括的にステータスが共有されているわけではないため、すべての公開投稿を見る方法はありません。連合タイムラインを閲覧すると、あなたのいるサーバーが認識しているすべての公開投稿を表示できます。サーバーが投稿を認識する方法はさまざまですが、その大部分は、同じサーバー上にいる他のユーザーがフォローしている人々の投稿でしょう。

簡単に言うと、

同じサーバーのユーザーがフォローしている他のサーバーのユーザー
同じサーバーのユーザーがブーストをした相手ユーザーによる投稿

が連合には表示されるらしい。

そのため、自分しかいないサーバーであるおひとり様サーバーの場合、連合はタイムラインと同じ情報になる。

だから以前のサーバーにも日本語投稿が多かったのかと腑に落ちた。

nextjsのLinkコンポーネントは事前にプリフェッチしているらしい

nove-b

新規開発中のWebアプリケーションで、一覧ページのネットワークタブを何気なく確認したら、画面に表示されているリストの各詳細ページがすべてリクエストされていることに気付き、驚いた。

「実装ミスかしら」とぞっと総毛だって実装を見直してみるが、特段へんてこな記述は見つけられない。

ただnext/linkをmapで回しているだけである。

だいたいこういうときはnextのお節介が原因のことが多い。

そういうわけで、next/linkを調べてみると案の定prefetchというオプションがあり、デフォルトがtrueとなっていた。

ビューポート内にある <Link /> はすべてプリロードされます (初期状態やスクロール中)。prefetch={false} を渡すことでプリフェッチは無効になります。prefetch が false に設定されている場合でも、ホバー時にはプリフェッチが行われます。静的生成を使用しているページでは、ページ遷移を高速化するためにデータと一緒に JSON ファイルがプリロードされます。プリフェッチは本番環境での> み有効です。

とのこと。

基本的に気にしなくてもいい気がするけど、サーバーに負荷をかけるのでfalseにしても問題ない気がする。

prefetch が false に設定されている場合でも、ホバー時にはプリフェッチが行われます

とあるのでfalseにしたところで、そこまでページ遷移のユーザー体験を損なわないと思われる。

nextは本当にお節介で裏側で色々なことをしてくれる。しっかり理解しないと思わぬ副作用を生むことがあるのでドキュメントを読むことを心掛けたい。

良質な記事を書くという目的意識のためにOFUSEを導入する

nove-b

ブログにOFUSEを導入することにした。

OFUSEとは簡単に言うと投げ銭サービスで、クリエーターとかが簡単に寄付を受け付けることができるプラットフォームのこと。

公式に下記のような説明がある。

OFUSEは、「ファンの応援でクリエイターの創作活動を支えたい」という想いから生まれたファンレターサービスです。あらゆるクリエイターが、Web上での創作活動や情報発信を通じて継続的に価値を生み出してゆける仕組みをつくり、ファンとクリエイターをつなぎます。

現在、中心的な機能である「支援付きレター」（1文字2円のファンレター）に加え、投稿への「支援付きコメント」（1文字2円のコメント）や月額で支援できる「メンバーシップ」をご利用いただけ、応援金額の90%をクリエイターの皆様へお届けしております。

他にも有名なサービスでBuy Me a Coffeeがある。こちらはよくGithubとかで見る。個人的には投げ銭というばこっちのサイトが頭に浮かぶし、なんとなくかっこいい。

けど、今回はOFUSEを導入することにした。

なぜ投げ銭サービスを導入するのか

そもそもなぜ投げ銭サービスを導入するのかだけど、大前提としてこのブログで儲けようなんて微塵も思っていないし、儲けられるなんて思っていない。

儲けたいのであれば過去に月１万とかを生んでくれた商品レビューブログを復活させるし、アドセンスを表示しまくる。

けどこのサイトはそういうサイトじゃない。あくまでも自分のアウトプット用、あるいは記録用で、後で見返せばいいなくらいのスタンスで更新している。

そうしないと更新が続かないと思って、そういうスタンスをとってきた。

けど最近は少しづつ読まれることも意識するようにしたいと思うようになってきた。

それが本質ではないけど、どうせ書くのであれば誰かが読んでいい記事だと唸るような記事が書ければいい。そのために時間を費やすことはないけれど、結果的にそうなれば幸せである。

とは言え、唸る記事がもし書けたところで投げ銭してくれる人なんでいないと思うし、自分有益な記事を読み感謝こそすれど投げ銭なんてしたことがない。

あくまでもこれは投げ銭サービスのリンクを張っているぞという自分への戒めである。投げ銭のリンク張っているんだから少しくらいいい記事書くように意識しようぜ、といったところ。

ただ何度も言うけど、このブログは自分のためのアウトプットで記事更新が億劫にならないレベルで書いていくつもり。

かけれる保険は掛けておく。

なんでOFUSEにしたのか

前述したように同様のサービスであるBuy Me a Coffeeの方が洒落ていてかっこいい。

ただ自分が寄付する側だった時に、海外サービスを使用するのは少し抵抗がある。安全性とか信頼性とかではなく、通貨の単位が異なることに不安を感じる。

あと使えるクレジットカードのサービスとかもなんか制限がありそうな気がする。すごい偏見なんだけど。

それに海外の人が読むことなんてあり得ないので、それなら国産サービスにしたほうニーズに合っている。

まあ、そういうわけで投げ銭サービスを取り入れてみた。これが少しでも記事更新、質向上になればと考えている。

Github Actionでprettierを実行したい

nove-b

フォーマットを書けるのが面倒くさい。

このブログはマークダウンで書かれていて、コミットする前に必ずprettier --writeを実行しようと心に誓ったけど、まったくというほど実行されずにきた。そしてたまに思いだしたように実行し、毎回あげだされる差分に驚いてきた。

エンジニアとして対策しないのかという話だけれど、以前対策を試みGithub Actionを登録したけれどうまく動かず、そもそも最悪フォーマットしなくても問題ないので時間かけるのもどうだろうかとissueに登録して寝かせていた。

Closeされずにずっと残り続けるissueは心を蝕む......、なんてことはないけれど少し気持ち悪い。

そこで時間をかけてもいいので、解決することを最優先課題にしてみた。

そういうわけで色々なサイトを巡回し調べた結果、

name: Format Markdown
on:
  push:
    branches:
      - main

permissions:
  contents: write

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - name: Check out the repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18"

      - name: Install Prettier
        run: npm install -g prettier

      - name: Format Markdown files
        run: prettier --write "**/*.md"

      - name: Push changes
        run: |
          git config --global user.name "github-actions[bot]"
          git config --global user.email "github-actions[bot]@users.noreply.github.com"
          git stash  # 現在の変更を一時保存
          git pull origin main  # リモートの変更を取得
          git stash pop  # 保存した変更を復元
          git add .  # 変更をステージング
          git commit -m "Format markdown files" || echo "No changes to commit"
          git push origin main

で実現できた。

やっていることは以下の通りで、シンプル。

ワークフローのトリガー設定:
- mainブランチにプッシュされたときにこのワークフローが実行されます。
リポジトリのチェックアウト:
- actions/checkout@v3アクションを使ってリポジトリの全体（過去の履歴も含む）を取得します。
Node.jsのセットアップ:
- actions/setup-node@v3アクションを使い、Node.jsのバージョン18をインストールします。
Prettierのインストール:
- npm install -g prettierを使って、Markdownフォーマット用のツールであるPrettierをグローバルにインストールします。
Markdownファイルのフォーマット:
- prettier --write "**/*.md"コマンドで、リポジトリ内のすべてのMarkdownファイル（*.md）をフォーマットします。
変更のプッシュ:
- 以下の手順でフォーマットした変更をリモートのmainブランチにプッシュします：
  - git stashで現在の変更を一時的に保存。
  - git pull origin mainでリモートの最新変更を取得。
  - git stash popで保存した変更を再適用。
  - git add .で変更をステージング。
  - git commitで変更をコミット（変更がない場合はスキップ）。
  - git push origin mainで変更をリモートにプッシュ。

過去の試行錯誤を見るに、Tokenとかを生成したりしているし、参考サイトにはTokenを生成している記事も多かった。

ただ、

GitHub Actionsでは、GITHUB_TOKENがデフォルトで自動的に適用される。このトークンはGitHubによって自動的に生成され、ワークフローのすべてのジョブで利用可能になっている。

とのこと。

Githubの方でアップデートがされたのか、そのおかげかしら？

過去の自分が何に躓いていたのかはわからないけれど、うまくいってよかった。

[!NOTE] > Hugoブログで最終更新日がすべて同じになっていたのを修正したで更新した。

next startで実行される環境変数をそれぞれ違うファイルから呼び出したい

nove-b

nextjsでタグマネージャーを導入する際に、本番環境、検証環境、開発環境といった環境ごとにコンテナのIDを指定することにした。

ただnextjsでは用意されたenvと適応コマンドがすでに割りついているっぽい。

環境ファイル	役割
.env.local	next dev
.env.development	next dev
.env.production	next build/next start

参考：Next.jsで環境ファイル(env)別ビルドを行う参考：Add support for custom environments

今回は、同じnext startで3つの環境を作成したいけど、前述の通りそれだと.env.productionしか呼び出すことができない。

そこでenv-cmdを使用する。

#Using custom env file path To use a custom env filename or path, pass the flag. This is a major breaking change from prior versions < 9.0.0-f

とあるように、アプリをビルド/実行するときに特定の.envファイルを選択することができるパッケージ。

.env.prod
.env.stag
.env.local

と3つのEnvを用意し下記のようなScriptを作成すれば、それぞれのScriptごとに対応するEnvを読みに行ってくれる。

    "prod": "env-cmd -f .env.prod next build && next start",
    "stag": "env-cmd -f .env.stag next build && next start",
    "local": "env-cmd -f .env.local next build && next start",

【2024年11月】2024年の目標はきっと無理

nove-b

11月に読んだ本

読書はそれなにできた気がする。

読んだ本は下記の通り。

新装版タイム・リープ〈上〉　あしたはきのう (メディアワークス文庫)
新装版タイム・リープ〈下〉　あしたはきのう (メディアワークス文庫)
- タイムリープものの金字塔らしく、新装版が出るのも納得できた。
オカシナ記念病院 (角川文庫)
- 現代医療をブラックユーモアで切った作品。主張しなく、最後も意外な終わり方でよかった。
聖なる怠け者の冒険 (朝日文庫)
- 再読、ほとんど忘れてた。主人公がほとんどぐうたらしている稀有な小説。
君が夏を走らせる（新潮文庫）
- これは泣く。子どもできてから子ども可愛くて仕方ない。
ある男
- 絶賛読んでいる途中で面白い。

キンドルアンリミテッドが980円なので相当得していることになる。サブスクって損することが多い気がするけどアンリミテッドは有効活用できている。最近読みたいと思える本がアンリミテッドになってくれて嬉しい。

保活Done！

さて、ついに保活が終了した。入れるか入れないかはさておき、とりあえず申し込みはした。申し込み後に申し込み状況を電話で教えてくれる制度があり、活用してみた結果、2人(たぶん)の募集に対して4人の応募があったらしい。うちは双子なので厳しい戦いになる。さらに、聞いた日の消印有効なのでさらに増えている可能性もある。

落ちたらたぶん、第2希望はさらに厳しそうだったので、第3志望の幼稚園になる。

そうするとお金がきつい。幼稚園は高い。教材費とかなんとか色々とかさむ。

とは言えもうできることはないので待つしかない。悶々と1月中旬まで待ち続ける。

資料とかいろいろ読み込み、保育課に何度も電話してくれた妻には感謝しかない。

秋の終わりに

そんな事をしているうちに秋が終わった。葉が色づいて、車が凍るようになった。今年の秋は一瞬だった。意識しないと秋に気が付かないくらい暖かく、急に寒くなった。

せっかくなので紅葉が綺麗な昭和記念公園に行った。子どもの成長は凄まじく、ボールを蹴って遊んでたし、ふわふわドームでジャンプをしていた。自分はどんどん衰えているのに、子どもはどんどん成長していく。その事実がうれしくもあり、少し怖い。

冬の訪れ

冬の訪れとともにクリスマスがやってくる。昨年、てんやわんやして買ったクリスマスツリーを出した。毎年少しづつオーナメントを買っていく。昨年寒そうだったツリーもだいぶ賑やかになった。今年は子どもたちが喧嘩しながら飾り付けをしてくれた。何度も言うようだけど、子どもの成長はすごい。昨年買いそびれた念願のツリートップを飾り付け、あとはクリスマスを待つのみになった。

クリスマスが来ると正月がくる。そうすると当然、今年が終わり来年になる。それは避けられない事実でどんなに首を振っても強制的に来年になる。

散々な結果に終わりそうな2024年の目標

さて、じゃ今年の目標はどうだったというと、4件たてた目標のうち現時点で1件しか達成できていない。はたして、取り組みが悪いのか、あるいは目標の立て方が悪いのか。

そんななか、残り3つのうち1つであるネイティブアプリをリリースする、という目標に遅ればせながら着手した。

mastodonのクライアントをreact nativeで作成することにする。作りたいものはすでに頭の中にあるので、あとはそれを形にしていく作業になる。

ただ形にする時間があまりにも少ない。時間が全く足りない。みんなが勉強したり、何かを作っている事実に焦りを感じる。

そこで、朝早起きをして勉強をすることにした。ただ冬の早起きは誰もが知るように辛い。実際11月は起きれない日が続いたし、何回か遅刻しかけた。そんな中、sleep as androidというアプリにであった。

これが自分ニーズとぴったりとハマった。

目覚ましアプリに求めていたのは

スマートウォッチのバイブが活用できる
スマホ自体は音が鳴らない
起きれるまで止まらない

そしてこれのニーズに答えてくれたのがsleep as android。

これの設定でCAPTCHAをQRコードにして、スヌーズをオフにすると、朝起きてスマホでQRコードを読み取るまでスマートウォッチが振動し続ける。

QRコードを洗面室の鏡の裏に貼り付けたので、寝室を出なくちゃいけなく、そのまま顔を洗い、目覚めるといった非人間的行動を強制される。

最初は3問の計算問題を解かないと止まらない四則演算にしていたが、計算を終え満足して二度寝することが多発したので、プライドを捨ててQRコードにした。結果、起きれるようになった。

たぶん、これが続けば朝活できるようになり、少しは時間を使えるようになる気がする。

そこで少しでも開発できればいいなって明るい12月を思い描いている。

2024年12月時点でのReact Native開発環境の構築手順

nove-b

毎回React Nativeの環境構築に苦労するので、2024年現時点でしっくりした環境構築の方法を残しておく。

立ち上げるアプリの環境

    "expo": "~52.0.11",
    "react-native": "0.76.3",
    "eslint": "^8.57.0",
    "eslint-config-expo": "~8.0.1",

Expoでアプリを立ち上げる

npx create-expo-app@latest

でプロジェクトを作成すると、

Creating an Expo project using the default template.

To choose from all available templates pass in the --template arg:
  $ npx create-expo-app --template

To choose from all available examples pass in the --example arg:
  $ npx create-expo-app --example

√ What is your app named? ... my-app
✔ Downloaded and extracted project files.

のようにデフォルトで作成される。

しばらくすると

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd my-app
- npm run android
- npm run ios # you need to use macOS to build the iOS project - use the Expo app if you need to do iOS development without a Mac
- npm run web

インストールが完了し、buildコマンドが表示される。

npm run startを実行して、ExpoアプリでQRコードを読み込めば、アプリが表示される。

Tailwind React Native Classnamesを導入する

react nativeのスタイリングに勉強コストをかけたくないので、Tailwindのように直感的に書けるクラスを採用する。

以前は、NativeWindを使っていたのだけれど、環境構築に手間がかかるので、今回はtwrnc(Tailwind React Native Classnames)を使うことにした。

まず、npm install twrncでインストールし、

import tw from 'twrnc';

...
<Text style={tw`text-md text-red-500`}>Hello Tailwind React Native Classnames</Text>

これだけでスタイリングをすることができた。

あとはTailwind CSS IntelliSenseでうまく補完できれば最高なので調べてみる。

issueとdiscussionが上がっていた。

これの通り、まずはsetting.jsonのtailwindCSS.experimentalに

    "tw`([^`]*)",
    ["tw.style\\(([^)]*)\\)", "'([^']*)'"],

を追加し、tailwind.config.jsを作成する。中身は下記のように空で問題ない。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

で、再起動で予測変換が効くようになった。

コードフォーマットを導入する

Eslint、Prettierを導入したい。

前回はnpmでインストールしたが、いろいろ調べてみるとコードの貢献方法にあるようにPrettierが標準っぽく書かれている。

私たちは、JavaScript コードのフォーマットに Prettier を使用しています。これにより、Prettier のエディター統合を通じて、または手動でを実行して、フォーマットの問題を自動的に修正できるため、時間と労力を節約できますyarn run prettier。また、コード内に存在する可能性のあるスタイルの問題を検出するために、リンターも使用します。を実行して、コードスタイルのステータスを確認できますyarn run lint。

実際package.jsonを見るとscriptにlintとあるので、まずは実行してみた。


...

√ No ESLint config found. Install and configure ESLint in this project? ... yes
ESLint is required to lint your project. Installing eslint@^8.57.0, eslint-config-expo@~8.0.1

› Installing 2 other packages using npm
› Using ~8.0.1 instead of ~8.0.1 for eslint-config-expo because this version was explicitly provided. Packages excluded from dependency validation should be listed in expo.install.exclude in package.json. Learn more: https://docs.expo.dev/more/expo-cli/#configuring-dependency-validation
> npm install
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 157 packages, and audited 1362 packages in 12s

190 packages are looking for funding
  run `npm fund` for details

5 low severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
✔ Installed eslint@^8.57.0, eslint-config-expo@~8.0.1

ESlint has been configured 🎉

> npx eslint .

そうするとESLintをプロジェクトに追加されるかを聞かれ、続行すると

        "eslint": "^8.57.0",
        "eslint-config-expo": "~8.0.1",

がインストールされた。

ただこれだとPrettierがインストールされてない。つまりPrettierは標準じゃない？

よくわからないけど、Prettierもインストールする。

~~手順は公式のUse ESLint and Prettierを参考にした。~~

<summary>公式を参考にした方法（できなかった）</summary>

npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier

次に、eslintrc.js を修正する。

module.exports = {
  extends: ['expo', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

でnpm run lintを実行すると、


C:\dev\lazylink\hooks\useColorScheme.web.ts
   1:37  error  Replace `'react'` with `"react"`                prettier/prettier
   2:52  error  Replace `'react-native'` with `"react-native"`  prettier/prettier
  20:10  error  Replace `'light'` with `"light"`                prettier/prettier

C:\dev\lazylink\hooks\useThemeColor.ts
   6:24  error  Replace `'@/constants/Colors'` with `"@/constants/Colors"`          prettier/prettier
   7:32  error  Replace `'@/hooks/useColorScheme'` with `"@/hooks/useColorScheme"`  prettier/prettier
  11:66  error  Insert `,`                                                          prettier/prettier
  13:37  error  Replace `'light'` with `"light"`                                    prettier/prettier

C:\dev\lazylink\scripts\reset-project.js
  77:182  error  Insert `,`  prettier/prettier

C:\dev\lazylink\tailwind.config.js
  1:44  error  Delete `␍`  prettier/prettier
  2:19  error  Delete `␍`  prettier/prettier
  3:15  error  Delete `␍`  prettier/prettier
  4:11  error  Delete `␍`  prettier/prettier
  5:16  error  Delete `␍`  prettier/prettier
  6:5   error  Delete `␍`  prettier/prettier
  7:15  error  Delete `␍`  prettier/prettier
  8:3   error  Insert `⏎`  prettier/prettier

✖ 196 problems (196 errors, 0 warnings)
  196 errors and 0 warnings potentially fixable with the `--fix` option.

のように大量のerror がでてきた。

npm run lint --fix

で潰せると思ったけど、潰れない。試しにnpx prettier --write .でやるとうまく整形できた。

</details>

<br/>

結局下記の方法にした。

"lint": "expo lint && npx prettier --write ."という風にScriptを編集した。

無事にESLintとprettierが動いているのを確認した。

Expoアプリの+not-found.tsxファイルの正体と「+」の意味

nove-b

Expoでreact nativeのアプリを作成する時、インストール時のディレクトリ構成で+not-found.tsxとかいう謎のファイルがあった。たぶんというか確実に404ページではあるんだろうけれど、+が付いている。

Expoアプリのファイルにある「+」の意味

Not found routesのように公式には、

Expo Router は、404 のルートを処理するために使用される特別なファイル +not-found.tsxを提供します。このルートファイルは、ネストされたレベルからのすべての一致しないルートと一致します。

一致しないルートとは、アプリのルーティング構成で定義されていないURLやパスにユーザーがアクセスした場合、そのアクセスに対応するページが見つからない状態のことを言うらしい。

つまり+は404ページのためにあるようなものと言っても過言じゃない？

過言かもしれないけれど、今はその理解で満足することにする。

React NativeでMastodon認証を実装した

nove-b

Mastodonnのクラインアント用ネイティブアプリをReact NativeとExpoで作成している。

バージョンは下記の通り。

    "expo": "~52.0.11",
    "react-native": "0.76.3",

実装自体はできたんだけれど、正直いろいろと理解が足りていないので、整理してみる。

インストールしたPackage

"expo-auth-session": "^6.0.1",
"expo-secure-store": "^14.0.0"

expo-auth-session

ブラウザベースの認証を処理するための API

最初は認証時にWebViewを開いて認証に成功したらリダイレクトURIを用いてアプリ画面に戻すという仕組みを実装しようとしたんだけれど、そもそもリダイレクトURIがわからない。Expoの開発用URLを指定してみたけど、

java.io.IOException: Remote update request not successful

という謎のエラーが出てアプリ側に戻らない。

そしてタスク管理でアプリに戻ると認証が成功しているという謎の現象が発生した。

色々悩んでいたけどexpo-auth-session を使用したらリダイレクトURIの作成をいい感じにやってくれた。

Expo AuthSessionにはexpo-crypto と一緒にインストールする必要があるって書いてあったけど、インストールしていない。今のところ問題はないので気にしないでおく。

expo-secure-store

Expo SecureStore

Expo用のローカルストレージ。

// 保存
await SecureStore.setItemAsync("key", value);

// 参照
await SecureStore.getItemAsync("key");

// 削除
await SecureStore.deleteItemAsync("kye");

で、一通りの作業ができる。

認証に用いたMastodon API

${instanceUrl}/api/v1/apps
- クライアントアプリケーションを登録
${instanceUrl}/oauth/authorize?
- OAuth トークンを生成および管理
${instanceUrl}/oauth/token
- API 呼び出し中に使用するアクセストークンを取得

認証までのフロー

アプリケーションを登録

クライアントアプリケーションを登録APIを叩く。

Bodyにclient_name、redirect_uris、scopes、websiteが必要になる。

client_nameはアプリ名を指定し、redirect_urisはexpo-auth-sessionを使用し作成する。

redirect_uris: AuthSession.makeRedirectUri({
  native: "{APPNAME}://redirect",
}),

scopesは権限を指定し、websiteはアプリのウェブサイトをインプットする。

成功すると、

{
  "id": "563419",
  "name": "Test Application",
  "website": "https://app.example",
  "scopes": ["read", "write", "push"],
  "redirect_uri": "urn:ietf:wg:oauth:2.0:oob",
  "redirect_uris": ["urn:ietf:wg:oauth:2.0:oob"],
  "client_id": "TWhM-tNSuncnqN7DBJmoyeLnk6K3iJJ71KKXxgL1hPM",
  "client_secret": "ZEaFUFmF0umgBX1qKJDjaU99Q31lDkOU8NutzTOoliw"
}

が取得できる。

client_id、client_secretは後ほど使用する。関数をまたいで使用するので、expo-secure-storeに保存した。

認証画面を開く

取得したclient_idを用い、認証URLを作成しブラウザで開く。

その際、expo-web-browserを使用した。Expo WebBrowserだけどインストールした記憶がないので、たぶん標準で入っていた。

react-native-webviewとは異なり、ネイティブなブラウザモーダルを使用するらしい。

使い分けの参考は下記の通り。

要素	expo-web-browser	react-native-webview
利用シーン	外部リンクを簡単に開く場合	ウェブページをアプリの一部として組み込む場合
操作性	操作不可	DOM操作やイベントリスニングが可能
UIの統合性	外部ブラウザ風のUI（独立性あり）	アプリ内に統合されたUI
インストールの必要性	不要（Expoに標準搭載）	必要（個別にインストール）
パフォーマンス	高速（ネイティブブラウザ）	やや劣る可能性あり

で、expo-web-browserには認証フローのメソッドがある。

const result = await WebBrowser.openAuthSessionAsync(
  authUrl, // 認証を開始するURL
  redirectUri, // 認証後にリダイレクトされるURL
);

上記メソッドを実行すると下記フローが走る。

認証プロバイダーとのやり取り:<br> authUrlに指定したプロバイダー（例: GoogleやTwitter）に接続し、ユーザーが認証情報を入力できる画面を表示。
リダイレクトハンドリング:<br> 認証が成功すると、プロバイダーはredirectUriにリダイレクト。<br> アプリはそのリダイレクトURLを受け取り、アクセストークンや認証コードを抽出して利用。
ネイティブモーダルの使用:<br>WebBrowser.openAuthSessionAsyncは、ネイティブの認証モーダル（Safari View ControllerやChrome Custom Tabs）を使用するため、認証が安全かつシームレスに行える。

アクセストークンの取得

認証が完了したら、認証結果に含まれるcodeを用い、アクセストークンを取得する。その際、先ほど保存したclient_id、client_secretをBodyに含める。成功後したら認証が成功したということなので、取得したアクセストークンをexpo-secure-storeに保存して、アクセストークンを持っている人用のページにリダイレクトする。

ルートに関係ないディレクトがルートに紐づく問題

app以下にmodelという型フォルダを作成したら、

"./model/App.ts" is missing the required default export. Ensure a React component is exported as default.

というエラーが吐き出された。どうやらReact nativeはファイル構造に基づいてルートを自動生成するらしい。

しかしこれはルート判定してほしくない。除外判定の仕方がわからなかったので、appと同階層にsrcを作成しそこに格納した。

これが正しいかはわからない。

ExpoとReact Nativeで作成したアプリのAPKを作成する

nove-b

作成中のマストドンクライアントアプリの1つの機能が完成したので実機で活用したいという思いが生まれ、apkを作成することにした。

最初のビルドを作成するを参考にして進めていき、無事にapkを作成することに成功した。

EAS CLIをインストール

ドキュメントが充実しているので、問題なくできるだろうと踏んでいたのだが、最初で壁にぶつかった。

npm install -g eas-cli

というコマンドでEAS CLIをインストールするのだが、なぜうまくインストールされない。

なんかVoltaの権限でうまく入らなかったので、

"C:\\Program Files\\Volta\\npm.exe" install -g eas-cli

を管理者権限で実行したら成功した。

C:\Windows\System32>eas --version
eas-cli/14.2.0 win32-x64 node-v20.15.0

npm install -g eas-cli

npm install -g eas-cliではシステムのPATHにあるデフォルトのnpmを使うけど、"C:\\Program Files\\Volta\\npm.exe" install -g eas-cliはVoltaで管理しているnpmを使用するという違いがあるらしい。

ログインする

PS C:\dev\appname> eas login
Log in to EAS with email or username (exit and run eas login --help to see other login options)
√ Email or username ... email
√ Password ... ********
Logged in

プロジェクトを構成する

AS Build 用に Android または iOS プロジェクトを構成するためにコマンドを実行する。

PS C:\dev\appname> eas build:configure
EAS project not configured.
√ Would you like to automatically create an EAS project for @username/appname? ... yes
✔ Created @username/appname: https://expo.dev/accounts/username/projects/appname on Expo
✔ Linked local project to EAS project xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
💡 The following process will configure your iOS and/or Android project to be compatible with EAS Build. These changes only apply to your local project files and you can safely revert them at any time.

√ Which platforms would you like to configure for EAS Build? » All

√ Generated eas.json. Learn more: https://docs.expo.dev/build-reference/eas-json/

🎉 Your project is ready to build.

- Run eas build when you are ready to create your first build.
- Once the build is completed, run eas submit to upload the app to app stores.
- Learn more about other capabilities of EAS Build: https://docs.expo.dev/build/introduction

Android エミュレーターとデバイス用の APK をビルドする

APK を作成するためのプロファイルの設定

eas.jsonを下記のように変更する。

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "preview4": {
      "distribution": "internal"
    },
    "production": {}
  }
}

そのうえで下記コマンドを実行する。

PS C:\dev\appname> eas build -p android --profile preview
We detected that you are building for the "internal" distribution. Resolving the environment for environment variables used during the build to "preview". Set the "environment" field in the build profile if you want to specify the environment manually.
No environment variables with visibility "Plain text" and "Sensitive" found for the "preview" environment on EAS servers.

📝  Android application id Learn more: https://expo.fyi/android-package
√ What would you like your Android application id to be? ... com.username.appname
No remote versions are configured for this project, versionCode will be initialized based on the value from the local project.
✔ Initialized versionCode with 1.
✔ Using remote Android credentials (Expo server)
√ Generate a new Android Keystore? ... yes
Detected that you do not have keytool installed locally.
✔ Generating keystore in the cloud...
✔ Created keystore

Compressing project files and uploading to EAS Build. Learn more: https://expo.fyi/eas-build-archive
✔ Compressed project files 1s (7.7 MB)
✔ Uploaded to EAS 1s
⌛️ Computing the project fingerprint is taking longer than expected...
⏩ To skip this step, set the environment variable: EAS_SKIP_AUTO_FINGERPRINT=1
✔ Computed project fingerprint

Build details: https://expo.dev/accounts/username/projects/appname/builds/xxxxxxxxxxxxxxxxxxxxx

Waiting for build to complete. You can press Ctrl+C to exit.
✔ Build finished

QRコードが表示される


🤖 Open this link on your Android devices (or scan the QR code) to install the app:
https://expo.dev/accounts/username/projects/appname/builds/xxxxxxxxxxxxxxxxxxxxx

iOSシミュレーター用のビルド

APK を作成するためのプロファイルの設定

eas.jsonを下記のように変更する。

{
  "build": {
    "preview": {
      "ios": {
        "simulator": true
      }
    },
    "production": {}
  }
}

そのうえで下記コマンドを実行する。

 eas build -p ios --profile preview
We detected that you are building for the "internal" distribution. Resolving the environment for environment variables used during the build to "preview". Set the "environment" field in the build profile if you want to specify the environment manually.
No environment variables with visibility "Plain text" and "Sensitive" found for the "preview" environment on EAS servers.

📝  iOS Bundle Identifier Learn more: https://expo.fyi/bundle-identifier
√ What would you like your iOS bundle identifier to be? ... com.username.appname
No remote versions are configured for this project, buildNumber will be initialized based on the value from the local project.
✔ Initialized buildNumber with 1.

Compressing project files and uploading to EAS Build. Learn more: https://expo.fyi/eas-build-archive
✔ Compressed project files 1s (7.7 MB)
✔ Uploaded to EAS 1s
✔ Computed project fingerprint

Build details: https://expo.dev/accounts/username/projects/appname/builds/xxxxxxxxxxxxxxx

Waiting for build to complete. You can press Ctrl+C to exit.
✔ Build finished

QRコードが表示される

🍏 Open this link on your iOS devices (or scan the QR code) to install the app:
https://expo.dev/accounts/username/projects/appname/builds/xxxxxxxxxxxxxxx

iOSはシミュレーターようなので実機での確認はできなかった。

【2024年12月】2024年が終わりを迎える

nove-b

12月に読んだ本

読んだ本は下記の通り。

四畳半タイムマシンブルース【電子特典付き】四畳半シリーズ (角川文庫)
- 久々に四畳半のシリーズ読んだらやっぱり楽しかった。大学生時代しか楽しめない本だと思っていたけど、まだまだ現役だった。
- 夜空に泳ぐチョコレートグラミー（新潮文庫）
  - デビュー作なの？筆力と言い、構成と言い、化け物すぎる。久々に衝撃の読者体験だった👏👏
- 八月の御所グラウンド (文春e-book)
  - 面白かった。大学生×歴史で読みたい万城目学が一気に読めた。
- 六人の嘘つきな大学生 (角川文庫)
  - 思っていたより散りばめられてた。それにしても何者といい就活は物語を生む。
- キネマの神様 (文春文庫)
  - 再読だけど、感動した。

箱根に行く

2歳 2ヶ月。今年2度目の旅行は妻の両親を連れ箱根に行った。冬晴れで気温も丁度よく、快適な旅行日和だった。彫刻の森を散歩し、ガラスの森美術館でクリスマス気分を味わった。双子の片方（重い方）は「ばあばばあば」と抱っこせがみ、ずっと抱っこで歩く姿を見て大変辛そうだなと思った。

宿は「はなをり」にした。口コミがとてもよく、ランキングにも登場するので結構期待したんだけど、そんなに良くなかった。子どもと旅行に行くのであれば、迷わず星野リゾートにするのが一番いい。個人的に好きではないけど、子供連れという条件が付けば間違いない。

2日目はロープウェイに乗って、箱根元宮に行き、海賊船に乗って箱根神社に行った。最近乗り物に興味出てきたので、たくさん乗せてあげようという魂胆だったが、初見で謎すぎたのか、そこまで反応を示さなかった。双子の片方（重い方）は「ばあばばあば」と抱っこせがみ、ずっと抱っこで歩く姿を見て大変辛そうだなと思った（2日連続）。特に2日目は階段が多く、本当に......。

良く喋る

ばあばばあばと言うように2歳の誕生日を迎え、急に喋りだすようになった。家に帰れば「おかーり」と言ってくれるし、ほどほどに会話が成り立つようになった。そうなると急に可愛さが増す。ずっと一緒にいるわけじゃないのでわからないことも多いけど、喋れるようになって泣いて怒ることが減った気がする。たぶん、ずっと表現ができずに泣いていたのか、泣くことだけが唯一の表現方法だったのか。

夜も布団でよく寝てくれるようになった。絵本を2冊読み、「げんこつ山」と「きんらきらぽん」を歌ったら寝るという謎のルーティンができた。泣いて抱っことかなく、あまりにすんなり寝てくれるので、自分も思わず寝落ちしてしまうことが増えた。

2回目のクリスマス

今年のクリスマスは平日だったので、前の日曜日におこなった。おこなったといっても自分は何もできない。料理もできなければ、ケーキも作れないので、ただただ申し訳ない気持ちでおいしくいただいた。子どもたちもおいしそうにケーキをを頬ばり幸せな気持ちになった。

最近は親の真似で写真を撮りたがり、スマホを奪おうとするので、プレゼントはキッズカメラにした。子どもの撮った写真を見ることができるので、1つの思い出になる気がする。

結局ポッドキャストに戻ってきた

ずっと仕事中とか運転中にポッドキャストを聞いてきたんだけど、一部ポッドキャストに配信していない動画等があり、youtubeを見るようになった。youtubeは広告だらけなので、有料版に登録した。お金払っているのでyoutubeをたくさん見ないといけないという貧乏魂が燃え、すべてのコンテンツをyoutubeで見るようになり、他のコンテンツを見なくなった。

ただなんとなくポッドキャストの方がコンテンツの質がいい気がする。そこで結局ポッドキャストに戻ってきた。来年はオーディブルとか試してみようかと思っている。

引き続きマストドンのクライアントを作成している

先月、作ろうと決意したマストドンのクライアントアプリを作っている。着手できる時間が限られているので、全然進まないけど、止まってはいない。ネイティブアプリ作成の概念がよくわからず苦労することもあるけど、書いているコードがReact Nativeなのでそこまで苦痛じゃない。リリースがいつになるか見当もつかないほどのんびりペースだけど、熱量は変わらずあるので悪い状況じゃない。ただリリースまでたどり着かないと最悪なのでまずは最低限でリリースしたいと思っている。

今年が終わる

また今年が終わる。何も成し遂げていないけど、歳を重ねる。何もないけど2024年もまとめようと思っている。

2024年まとめも書こうと思っているので、少し適当になったけど、なんとか書ききった。

2024年を振り返ってみる

nove-b

年が明けた、2024 + 1

去年に引き続き、また年が明けた。そして去年に引き続き、ジャニーズのカウントダウンは開催されなかった。すると当然のように毎年祝っていた堂本光一の誕生日を意識することなく、新年を迎えることになった。

ちょっとしたことで世界はガラッと変わる。テレビから何人かの有名人が消え、M1の審査員もガラッと変わった。

変わらないものはないなんて言うけど、時間の進み具合は多分変わっていない。去年も今年も同じくらいの時が経ち、年が明ける。そしてたぶん来年も同じくらいの時が経てば、年が明ける。

それでもどうしてか、歳を取るにつれ、１年が短くなっている。小学生の時は５分休みでドッチボールができるくらいだったのに、いまは５分じゃ何もできない。１分の密度が明らかに変わってしまった。天才じゃないので１分１秒を大切にしていかなくちゃいけないのに、１分１秒をドブに捨ててきたことに気がついた。

年が明け、そのことに気が付いたのであれば、今年もまた年を重ねた意味があったのかもしれない。

桃鉄と年末

年末から年始にかけて、恒例のようになった桃鉄大会が妻と繰り広げられている。テレビも見たいというので、昔使っていたテレビを引っ張りだし、桃鉄用に使っている。つまりリビングに２台のテレビがある。どう考えたっておかしな状況であるんだけれど、年末年始はそれを許してくれる高揚感がある。桃鉄は毎年100年で行うんだけれど、完走したことがない。2024～2025年、今年こそは完走したいものである。

正解は１年後に。

2024年を振り返る

さて、そういうわけで今年を振り返ることにする。なんて、書き出して思ったけど、驚くべきことに、今年のことをなんにも覚えていない。

仕方がないので、書いたブログを読み直した。

GOでブログをリプレースして以降、毎月の振り返りを書いているので３月スタートになっていた。

月ごとの振り返り

1月と2月はそういうわけで記録がない故に記憶もない。……、本当に何も覚えていない。

2024年3月の月報 2024年4月の月報

3月と4月はネイティブアプリ作成していたらしい。今年の目標に掲げていたので、それを達成できるように頑張っていたらしい。ただこれは達成できなかったので、結果的に無駄な頑張りだった。

2024年5月の月報

5月は熱海旅行に行った。観光旅行は初めてだったので不安と期待があったけど、楽しかった。星野リゾートリゾナーレは子連れに良いという教訓を得た。

【2024年6月】読書できず、目標も完遂できず、ウィルス性腸炎が猛威を振るう

6月は自分を除く皆がロタウイルスに感染した。子どもは本当にいろいろ病気になる。まあ、そうやって強くなっていくので仕方ないけれど、保育園入園後が恐ろしい。保活もこの月から本格的に開始した。

【2024年7月】読書できず、仕事に追われている

7月からは仕事が忙しくなった。反省点も多く、勉強になった案件だった。ただ何より楽しかった。なんでこんなに仕事してるんだって思うこともあったけど、要件的にも楽しい案件だった。このときは9月には終わると思ってたけど、10月まで仕事漬けになった。

そんな中でSurfaceを購入してた。割高だとは思うけど、なかなかいい買い物をしたと思っている。ただフラグシップモデルを買うともう後戻りできないんだよなあ。次はジェネリックを賢く買いたい。

【2024年8月、9月】とにかく仕事に追われる

9月は双子と妻の誕生日があった。アンパンマンミュージアムに行くことができた。カレーカレーとはしゃぐ子どもは可愛かった。

【2024年10月】人間的生活を取り戻した

10月は仕事が終わり、自分の時間を作れるようになったのでMastodonのサーバーを立ち上げた。今年の目標の1つだったので、少し肩の荷がおりた。

【2024年11月】2024年の目標はきっと無理

11月は無事に保活も完了した。結果を待ちなので完了してはいないんだけど、やれることはやったので、あとは待つことしかできない。

【2024年12月】2024年が終わりを迎える

12月は本格的にアプリを作り始めた。いろいろ悩んだけど、react nativeを採用して、本当に少しづつ進めている。あと箱根旅行に行った。結果今年は2回旅行に行けた。来年は妻の育休が終わるので、それまでに色々遊びに行きたい。

今年買って良かったもの

恒例なのでまとめておく。

意外と少なかった。ただ買った商品も少ないので、当たり率は高かったと思ってる。

特にコスパ最強だったのはイヤホン。今までイヤーカフ型のambieを使っていた。イヤーカフ型の先駆けだし、首掛けワイヤレス×1個、フルワイヤレス×2個とお世話になったけど、QCY Crossky C30のほうが圧倒的にコスパが良い。料金は3分の1で、ambieより音質がいい。そういうわけで、今後はQCY Crossky C30を選ばないわけにはいかなくなった。イヤフォン業界にイヤーカフ型のながら聞きという、風穴を開けてくれたambieには感謝してもしきれない。ありがとう、ambie。ということで乗り換えた。

フラグシップモデルということで言えば、サーフェスも購入した。満足できる買い物だったけど、やっぱりコスパ悪い気がする。せっかくWindowsOSで多くの種類から選ぶことができるので、他の企業も追いつけ追い越せで、セパレート型のパソコンジャンルで切磋琢磨して、どんどんコスパの良いパソコンを出して欲しいと願ってやまない。

今年の目標と来年の目標

まず年始に考えた目標は、ほとんど達成できなかった。ずっと時間がないって言ってたけど、そういう問題じゃない気もしている。

そもそも達成できると考えて目標を立てているのだろかということ立ち返って考えてみると、決してそんなことないことに気がつく。

今年たてた目標はできればやりたいという願望にしか過ぎない。

そこで来年は目標を一つに絞ることにする。で、達成できたら次の目標を立てる。そのうえで来年は大小限らず5つの目標を達成できるようにする。

まず記念すべき1つ目はアプリをリリースする。目標は4月まで。

達成できるように頑張る。

さて、よろしく2025年、ありがとう、2024年。

React Nativeで無限スクロールのタイムラインを作成した

nove-b

Mastodonのクライアントアプリを作るうえで最もコアな機能であるタイムラインを作成した。無限スクロールを実装するためにいろいろと調べたりしたのでまとめておく。

FlatListが優秀

FlatList

完全なクロスプラットフォーム。
オプションの水平モード。
設定可能なビューアビリティコールバック。
ヘッダーのサポート。
フッターのサポート。
セパレーターのサポート。
引っ張って更新します。
スクロールの読み込み。
ScrollToIndex のサポート。
複数列のサポート。

という多くの機能をサポートしているリストコンポーネント。

今回はタイムラインの無限スクロールを実現したいということで、

リストを引っ張り更新
リストのそこについたら再フェッチ

上記２つが実現できればいい。

そしてその２つはFlatListに標準搭載されている。

リストを引っ張り更新

onRefresh というPropsが用意されている。

このイベントで最新情報を取得し、useStateを更新すればいい。

リストのそこについたら再フェッチで無限スクロール

onEndReachedという Propsが用意されている。

このイベントで最新情報を取得し、useStateを更新すればいい。

その際スクロールのタイミングで重複のデータがsetされることがあった。重複チェックをすることで解決した。

またonEndReachedThresholdというPropsを使った。

onEndReachedThreshold: 0 ~ 1の間の数値でどのくらいの距離でonEndReachedを呼び出すかを決められます。0が一番近くで、1が一番遠いです。

という記事を参照したのだけれど、公式のPropsには明記されていなかった。

機能しているかを確認する必要がある。

##その他、実装した機能

ボトムメニューのタブクリックでFlatListのトップにスクロールする

const flatListRef = useRef<FlatList<Interface>>(null);

レンダリング時にドムを取得しておき、タブクリックで書きイベントを発火させる。

if (flatListRef.current) {
  flatListRef.current.scrollToOffset({ animated: true, offset: 0 });
}

スクロールバーを非表示にする

showsVerticalScrollIndicatorというPropsをfalseにする。

まだ実装していないけど試したい機能

List~~~Componentを活用する

ListEmptyComponent
ListFooterComponent
ListHeaderComponent

特にListFooterComponentは無限スクロール時の読み込みに使えそうなのでUI改善で使っていきたい。

たぶんこれくらい。

使ったPropsは以下の通り。

        ref={flatListRef}
        data={timeline}
        keyExtractor={(item) => item.id}
        onEndReached={onEndReached}
        onEndReachedThreshold={1}
        onRefresh={onRefresh}
        refreshing={refreshing}
        extraData={timeline}
        showsVerticalScrollIndicator={false}
        renderItem={({ item, index }) => {}

useStateの型、Dispatch> についてとジェネリック型

nove-b

useStateの型

useStateの状態管理関数をPropsで渡すとき、受け取る側は

Dispatch<SetStateAction<T>>;

という方で受け取ることになる。

ジェネリクスのメリットがいまいち

関係ないけどずっと気になっていた「ジェネリクスのメリットがいまいちピンとこない件」について、ついでに調べてみることにした。

例えば、

// 文字列を入力し、文字列を出力する関数
const returnText = (input: string): string => {
  return input;
};

// 数値を入力し、数値を出力する関数
const returnNumber = (input: number): number => {
  return input;
};

console.log(returnText("hello world"), "returnText");
console.log(returnNumber(0), "returnNumber");

という関数が存在した時、

const returnTextOrNumber = (input: string | number): string | number => {
  return input;
};

console.log(returnTextOrNumber("hello world"), "returnTextOrNumber");
console.log(returnTextOrNumber(0), "returnTextOrNumber");

こんな感じにまとめたくなる。

これをジェネリック型にすると、

const returnTextOrNumberGeneric = <T extends string | number>(input: T): T => {
  return input;
};

こんな感じになる。

型ガードが必要

同じように感じるけど、returnTextOrNumberの場合は、

const a: string | number = returnTextOrNumber("hello world");
const b: string | number = returnTextOrNumber(0);

console.log(a.length);
// Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'

console.log(b + 1);
// Operator '+' cannot be applied to types 'string | number' and 'number'.

stringとnumberのどちらが返ってくる確定していないので、コンパイルエラーが出る。

実行するためには

if (typeof a === "string") {
  console.log(a.length);
}
if (typeof b === "number") {
  console.log(b + 1);
}

のように型ガードする必要がある。

コンパイラーをだませる

const b: string | number = returnTextOrNumber(0) as string;
console.log(b.length);

bは0なのでlengthが存在しないが、as stringで強制的に文字列とコンパイラーと認識させられる。

これはコード的負の遺産になる。

ジェネリック型は堅牢でコード量が少ない

対照的にジェネリック型であるreturnTextOrNumberGeneric の場合は、

const a = returnTextOrNumberGeneric<string>("hello world");
const b = returnTextOrNumberGeneric<number>(0);

console.log(a.length);
console.log(b + 1);

関数実行時に入出力共に型を指定し確定できるので、コンパイルエラーがでない。

また

const b = returnTextOrNumberGeneric<number>(0) as string;
// Conversion of type 'number' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this // was intentional, convert the expression to 'unknown' first.(2352)

強制的に異なる方でコンパイラーを納得させようとしても不可能になり、堅牢制が向上した。

実際に整理してみるとジェネリック型の恩恵がよくわかった。

React Nativeで動的にナビゲーションヘッダー文言を設定する方法

nove-b

実現コード

const navigation = useNavigation();
useLayoutEffect(() => {
  if (response && navigation) {
    navigation.setOptions({
      title: `${response}`,
    });
  }
}, [navigation, response]);

useLayoutEffectって？

実装していて、useLayoutEffectっていうhooksが聞き覚えなさ過ぎて、react native専用のhooksだと思っていたけど、調べるとreactが用意しているhooksらしい。

useLayoutEffect

useLayoutEffect は useEffect の一種ですが、ブラウザが画面を再描画する前に実行されます。

とのことで、さらに、

useLayoutEffect はパフォーマンスを低下させる可能性があります。可能な限り useEffect を使用することを推奨します。

とのことだった。できる限り使わないでほしいとのことなので知らなくても無理はなかったかもしれない。

今回は、useLayoutEffectを使用することで、タイトルが描画される前に処理が実行されるため、新しいタイトルが即座に反映されるようになっている。

ただこのコードだと、responseが取得されるまでは元のタイトルが表示されるので、responseがfalseの時の条件を付与する必要があるということにいまさら気が付いた。

AngularプロジェクトでPlaywrightを導入しTypeScriptで自動E2Eテストを実行する

nove-b

E2E（イーツーイー）

英語の「End-to-End（エンドツーエンド）」の略で、「端から端まで」を意味する。 E2Eテストはユーザーの視点からアプリケーション全体の動作を確認し、機能の一貫性と信頼性を保証する手法すること。

E2Eテストの自動化

自動化するツールはいくつかあり、それぞれメリットデメリットがあるっぽい。下記は [ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress）とChatGPTの情報を混ぜ合わせた、メリットデメリット表。

項目	Playwright	Puppeteer	Cypress	Selenium
サポートブラウザ	Chromium, Chrome, Edge, Firefox, Webkit (Safari)	Chrome, Firefox	Chrome, Edge, Firefox, Electron	Chrome, Edge, Firefox, Safari, IE
テストツールの有無	✅	🟡 (Jest を使えば可能)	✅	🟡 (外部ライブラリが必要)
複数タブ / ウィンドウ	✅	✅	🛑	✅
Shadow DOM	✅	🟡 (aria または pierce セレクタを使えば可能)	✅	🟡 (限定的なサポート)
ブラウザ拡張	✅	✅	🟡	🟡 (一部サポート)
要素の特定	🟡	✅	🟡	✅
要素の自動待機	✅	🟡	✅	🛑 (手動で記述が必要)
スクリーンショット	✅	✅	✅	✅
動画	✅	🛑	✅	🛑
実行速度	✅	✅	✅	🟡 (ブラウザ依存でやや遅い)

これだけ見るとPlaywrightが有望な気がする。気になるのは要素の特定なので調べてみた結果、PuppeteerとCypressはjQuery、javascriptでの記述で取得できるけど、Playwrightは独特な記法になるということだったので、特段問題なさそうだった。

Playwrightをインストールする

npm install -D @playwright/test

長いプロジェクトでnodeのバージョンがv16.13.2だったので、

m WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@playwright/test@1.49.1',
npm WARN EBADENGINE   required: { node: '>=18' },
npm WARN EBADENGINE   current: { node: 'v16.13.2', npm: '8.1.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'playwright@1.49.1',
npm WARN EBADENGINE   required: { node: '>=18' },
npm WARN EBADENGINE   current: { node: 'v16.13.2', npm: '8.1.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'playwright-core@1.49.1',
npm WARN EBADENGINE   required: { node: '>=18' },
npm WARN EBADENGINE   current: { node: 'v16.13.2', npm: '8.1.2' }
npm WARN EBADENGINE }

しっかり怒られた。

これを機にnodeのバージョンを上げることにする。

$ node -v
v22.13.0

色々な依存関係を解消しつつ、最新LTSまで上げた。

node_modulesを最新化し、

npx playwright install

Playwrightを初期化する。大量のエラーが吐き出され、TLS/SSL 証明書の検証に失敗した。

export NODE_TLS_REJECT_UNAUTHORIZED=0
npx playwright install

を実行する。

NODE_TLS_REJECT_UNAUTHORIZEDは、Node.jsが HTTPS通信を行う際に使用する環境変数で、0にすると、サーバー証明書の有効性が検証されなくなる。

Chromium、Firefox、Webkit、FFMPEGがインストール完了した。

Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.

という警告が出ていたので、

export NODE_TLS_REJECT_UNAUTHORIZED=1

でサーバー証明書を再度有効にした。

Playwrightのテストファイルを実行まで

テストファイルの作成

tests/にテストファイルを作成する。

import { test, expect } from '@playwright/test';

test('ホームページが正しく表示されることを確認する', async ({ page }) => {
  // アプリケーションのURL
  await page.goto('http://localhost:4200');

  // タイトルが表示されていることを確認
  await expect(page).toHaveTitle(/Angular App/);

  // テキストが表示されているか確認
  const header = page.locator('h1');
  await expect(header).toHaveText('Welcome to Angular App!');
});

トライする

上記をnpx playwright testで実行したところ、

ReferenceError: describe is not defined

   at src\app\template\sheet\sheet.component.spec.ts:5

  3 | import { SheetComponent } from './sheet.component';
  4 |
> 5 | describe('SheetComponent', () => {
    | ^
  6 |   let component: SheetComponent;
  7 |   let fixture: ComponentFixture<SheetComponent>;
  8 |
    at Object.<anonymous> (C:\dev\path\sheet.component.spec.ts:5:1)

というエラーが大量にでた。どうやら、標準のユニットテストと混合しているらしい。

エラーと格闘し成功まで

tests/以下に置いていることが影響している気がしたので、tests/e2e以下にファイルを置いて再実行したところ、何も変わらない。

色々調べてみた感じ、playwright.config.tsが不足しているようだったので、

import { PlaywrightTestConfig } from '@playwright/test';

// PlaywrightTestConfig型で設定オブジェクトを定義
// この型定義により、設定オブジェクトの構造が保証され、TypeScriptの補完機能が利用可能
const config: PlaywrightTestConfig = {
  // テストファイルが配置されているディレクトリを指定
  // ./tests 以下のすべての .spec.ts ファイルがテスト対象となる
  testDir: './tests/e2e',

  // テストのタイムアウト時間を30秒（30000ミリ秒）に設定
  // 1つのテストケースがこの時間を超えると、タイムアウトエラーが発生
  timeout: 30000,

  // テスト失敗時の再試行回数を2回に設定
  // テストが失敗した場合、最大2回まで再実行される
  retries: 2,

  // テスト実行時の共通設定
  use: {
    // テスト実行時のベースURLを設定
    // page.goto('/path')とした場合、http://localhost:4200/path にアクセスする
    baseURL: 'http://localhost:4200',

    // トレース（実行ログ）の設定
    // 'on-first-retry': 最初の再試行時にのみトレースを記録
    // トレースには実行時のスクリーンショットやネットワークリクエストなどが含まれる
    trace: 'on-first-retry',

    // スクリーンショットの設定
    // 'only-on-failure': テストが失敗した場合のみスクリーンショットを保存
    screenshot: 'only-on-failure',
  },

  // テストを実行するブラウザプロジェクトの設定
  // 複数のブラウザでテストを実行することで、クロスブラウザテストが可能
  projects: [
    {
      // Chromeブラウザでのテスト設定
      name: 'Chrome',
      use: {
        // Chromiumベースのブラウザを使用
        // Chromium は Chrome の開発版で、テスト自動化に適している
        browserName: 'chromium',
      },
    },
    {
      // Firefoxブラウザでのテスト設定
      name: 'Firefox',
      use: {
        browserName: 'firefox',
      },
    },
    {
      // Safariブラウザでのテスト設定
      // WebKitはSafariのエンジンを使用
      name: 'Safari',
      use: {
        browserName: 'webkit',
      },
    },
  ],
  // レポートを作成する
  reporter: [
    ['html', { open: 'always' }],
    ['json', { outputFile: 'test-results/results.json' }],
  ],
};

// 設定オブジェクトをエクスポート
// この設定は npx playwright test コマンド実行時に自動的に読み込まれる
export default config;

ルートに追加したところ、テストを通すことができた。そしてレポートのHTMLが作成されるので、結果を見ることができる。

Playwrightで実装で調べたことをとりあえずメモした（動画撮影、APIレスポンス、SignalR）

nove-b

AngularプロジェクトでPlaywrightを導入しTypeScriptで自動E2Eテストを実行するで詰まったことを調べてみた雑記帳のようなもの。

テストケースを動画で撮影し、ダウンロードする

テストした結果を動画で残して起きたかったので、撮影しダウンロードする方法を調べてみた。

test('テストケースを動画で撮影し、ダウンロードする', async ({ browser }) => {

  // ブラウザ名を取得（小文字に変換）
  const browserName = browser.browserType().name();

 // テスト名（スペースをアンダースコアに変換）
  const testName = 'test_name';

  // 動画保存用のディレクトリパスを生成
  const videoDir = path.join('videos', `${browserName}_${testName}_${今日の日付取得関数}`);

  // コンテキストを作成する際にビデオ録画を設定
  const context = await browser.newContext({
    recordVideo: {
      dir: videoDir, // 録画ファイルを保存するディレクトリ
      size: { width: 1280, height: 720 } // ビデオサイズを設定（オプション）
    }

    // ここで必要なテストを実行する


   // テスト終了時にコンテキストをクローズ（これによりビデオ録画も終了）
  await context.close();
});

複数のテストファイルを順次実行する

デフォルトではPlaywrightは並列実行するらしいので、直列実行するためのコマンドを叩くようにする。

npx playwright test --workers=1

そのうえで、テストファイルがアルファベット順で実行される仕様らしいので、

1_test_login
2_test_acoount_change

認証情報を保持する

順次実行したいのも、ログインしたうえで処理を実行したいからであり、そのためにテストファイルをまたぎ認証情報を保持しておく必要がある。

ログイン処理実行後に認証情報を保存する処理を行い、

test('ログインページが正しく動いている確認テスト', async ({ browser }) => {

    ...テスト実施

    // 認証情報を保存
    const storageStatePath = path.resolve('./storageState.json');
    await page.context().storageState({ path: storageStatePath });
});

認証情報を使用したいファイルで

test.use({
  storageState: path.resolve("./storageState.json"), // 保存した認証情報を使用
});

test("認証情報を使うテスト", async ({ page }) => {});

上記のように使用する。

APIのレスポンスを使用する

// API レスポンスを待つ
const [response] = await Promise.all([
  page.waitForResponse(
    (response) =>
      response.url().includes("/api/endpoint") && response.status() === 200,
  ),
]);

// レスポンスの内容を取得
const responseData = await response.json();

特別変わった書き方ではない。

ちなみに中の値にアクセスする前に、

expect(response.value).not.toBeUndefined();

上記のようにUndefinedチェックをすることができる。

SignalRのテストをする

// ページにアクセス
await page.goto("http://localhost:4200/#/dummy");

// SignalRライブラリを動的にロード
await page.evaluate(async () => {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src =
      "https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.0/signalr.min.js";
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
});

// SignalRライブラリがグローバルに利用可能か確認
await page.waitForFunction(() => "signalR" in window);

// SignalR接続の開始
const signalRConnection = await page.evaluate(async () => {
  try {
    const connection = new window.signalR.HubConnectionBuilder()
      .withUrl("http://xxx.xx.xxx.xxx:xxxx/SignalR", {
        skipNegotiation: true,
        transport: window.signalR.HttpTransportType.WebSockets,
      })
      .withAutomaticReconnect([0, 1000, 5000])
      .build();

    let connectionState: string | null = null;

    // 再接続処理
    connection.onreconnecting((error) => {
      connectionState = "reconnecting";
      console.log("再接続中:", error?.message || "No error message");
    });

    // 再接続成功時
    connection.onreconnected((connectionId) => {
      connectionState = "reconnected";
      console.log("再接続成功。ID:", connectionId);
    });

    // 接続終了時
    connection.onclose((error) => {
      connectionState = "closed";
      console.log("接続終了:", error?.message || "No error message");
    });

    // 接続の開始
    console.log("SignalR接続開始...");
    await connection.start();
    connectionState = "connected";
    console.log("SignalR接続完了。ID:", connection.connectionId);

    connection.on("Message", async (response) => {
      console.log("ResidentProgramDataAdded メッセージを受信:", response);

      // SignalRで受信したデータについてのテストをする
      console.log(response);
      expect(response === "xxx").toBe(true);

      // テストクリア
      expect(true).toBe(true);
    });

    return {
      success: true,
      connectionId: connection.connectionId,
      state: connectionState,
    };
  } catch (err: any) {
    console.error("SignalR接続エラー:", err);
    return {
      success: false,
      error: err.message,
      state: "setup_failed",
    };
  }
});
console.log("SignalR接続結果:", signalRConnection);

if (!signalRConnection.success) {
  console.error("接続失敗:", signalRConnection.error);
  throw new Error(`SignalR接続失敗: ${signalRConnection.error}`);
}

expect(signalRConnection.success).toBe(true);

どうやってSignalRと接続すればいいかわからなかった。 CDNで接続すればうまくいったので、正解かわからないけどそのように実装した。

これも認証のようにグローバルに受信できるようにしたいけど、いまは接続確認するまで。

無料の翻訳API、みんなの自動翻訳を使ってみた

nove-b

マストドンのクライアントアプリに翻訳機能を追加するため、「みんなの自動翻訳」というAPIを見つけたので試してみた。

最初に実装結果

<br />ただ書いた通り翻訳の精度がどれほどのものかは英語が読めないのでわからない。

今更だけどせっかくなので、ほかの翻訳サイトで試してみようと思い、threadsのwhitehouseのアカウントに行ったら削除されていた。トランプ政権要職であるイーロンの商売敵だし、仕方ないとは言え、驚くべき仕事の速さ。

最後の投稿だけ残っていたのでそれで試してみる。

原文は下記の通り。

President Joe Biden, Vice President Kamala Harris, First Lady Jill Biden, and Second Gentleman Douglas Emhoff gather on the North Portico of the White House for the final time.

みんなの自動翻訳は

ジョー・バイデン大統領、カマラ・ハリス副大統領、ジル・トレーシー・ジェイコブズ大統領夫人、ダグラス・エンホフ第二紳士が、最後にホワイトハウスの北ポルティコに集まります。

DeepLは

ジョー・バイデン大統領、カマラ・ハリス副大統領、ジル・バイデン大統領夫人、ダグラス・エムホフ副大統領夫人がホワイトハウスの北ポルティコに集合。

Google翻訳は

ジョー・バイデン大統領、カマラ・ハリス副大統領、ジル・バイデン大統領夫人、ダグラス・エムホフ二等紳士が最後にホワイトハウスの北柱廊玄関に集まる。

ChatGPTは

ジョー・バイデン大統領、カマラ・ハリス副大統領、ジル・バイデン大統領夫人、ダグラス・エムホフセカンドジェントルマンが、ホワイトハウスの北ポルチコで最後の時間を共に過ごしました。

こうやってみるとChatGPTが圧倒的に良い翻訳だと思うけど、みんなの自動翻訳も意図は伝わるので問題はない。

みんなの自動翻訳とは？

自動翻訳をみんなで育てるサイトみんなの自動翻訳＠TexTra®

話題のニューラル機械翻訳(NMT)、最新の自動翻訳研究に基づく、「高精度自動翻訳エンジン」とのこと。

つまり、テキストの翻訳を行う際に、従来のルールベースや統計的機械翻訳（SMT）と異なり、ニューラルネットワークを使って文脈や意味を考慮した高精度な翻訳を実現できるということらしい。

提供元は国立研究開発法人情報通信研究機構先進的音声翻訳研究開発推進センターで公式サイトに行くと翻訳アプリとかもリリースしていた。全く知らなかったけど、国の研究でこんなことをしていたのかと驚いた。

特徴

一般的なWeb翻訳と同様、誰でも簡単にお使いいただけます。
日本語・英語・中国語・韓国語の４言語を中心に多言語に対応。
ブログ・レシピ・エッセイ・新聞などの一般的な文章はもちろん、特許・論文・マニュアルなどの
専門分野の長文翻訳も得意です。
面倒なインストールは不要︕ 翻訳エディタのご利用が可能です。
翻訳をサポートする便利なツールが満載︕
- MS Word、Excel、PowerPoint上のテキストを自動翻訳するアドイン。
- Firefox、Thunderbird、Chrome上での自動翻訳、辞書引きのアドイン。
- Trados上での翻訳、辞書引き機能を提供するアドイン。
- TexTra Clipboard︓クリップボードにコピーしたテキストを翻訳するアプリ。
自動翻訳、辞書引き、用語検索、類似文検索の機能をWeb APIとして公開しています。

引用元

使用する上での注意点

アプリ作成する上で気になることを調べてみた。

商用利用は禁止
1日500回までのアクセス

上記を考えると本番運用は難しそうに感じる。参考にDeepL API Freeは1ヶ月あたり50万文字まで無料とのこと。

ちなみに参考のDeepL API Freeとコスパで比較すると、マストドンの最大文字数500で計算で

1日500回までのアクセスの場合、1ヶ月で15,000回のリクエストが可能。
1ヶ月あたり50万文字の制限の場合、1ヶ月で1,000回のリクエストが可能。

なので「みんなの自動翻訳」のほうがコスパはいい。

DeepL API Freeは商用利用可能なので本番で運用するならこちらにする必要があるけど。

使い方

みんなの自動翻訳APIは認証が必要になる。

なのでサーバー側で叩いく必要がある。丁寧にサンプルコード（PHP、Node.js、Python3、Java、C#、VB）があったので、それを参考にする。

サーバーを用意するのは面倒だったのでNextのapp/apiでnodejsを実行し、エンドポイントを作成した。

/app/api/translate/route.tsを用意してそこに書く。

import { NextResponse } from "next/server";

export async function POST(req: Request) {
  try {
    const body = await req.json();
    if (!body || !body.text) {
      return NextResponse.json(
        { error: "Text is required for translation" },
        { status: 400 },
      );
    }

    const { text } = body;
    const url = "https://mt-auto-minhon-mlt.ucri.jgn-x.jp";
    const key = "xxxxxxxxxxxxxxxxxx";
    const secret = "xxxxxxxxxxxxxxxxxx";
    const name = "xxxxxxxxxxxxxxxxxx";
    const api_name = "mt";
    const api_param = "generalNT_en_ja";

    let access_token = null;

    // アクセストークン取得
    const tokenResponse = await fetch(`${url}/oauth2/token.php`, {
      method: "POST",
      body: new URLSearchParams({
        grant_type: "client_credentials",
        client_id: key,
        client_secret: secret,
      }),
    });

    if (!tokenResponse.ok) {
      throw new Error("Failed to fetch access token");
    }

    const tokenData = await tokenResponse.json();
    access_token = tokenData.access_token;

    if (!access_token) {
      return NextResponse.json(
        { error: "Access token not found" },
        { status: 400 },
      );
    }

    // APIリクエストの形式を修正
    const apiResponse = await fetch(`${url}/api/`, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: new URLSearchParams({
        access_token: access_token,
        key: key, // API Key
        api_name: api_name,
        api_param: api_param,
        name: name, // ログインID
        type: "json", // レスポンスタイプ
        text: text, // 翻訳テキスト
      }),
    });

    if (!apiResponse.ok) {
      throw new Error("API request failed");
    }

    const apiData = await apiResponse.json();

    const response = NextResponse.json(apiData);
    response.headers.set("Access-Control-Allow-Origin", "*");
    response.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    response.headers.set(
      "Access-Control-Allow-Headers",
      "Content-Type, Authorization",
    );
    return response;
  } catch (error: unknown) {
    // エラーがオブジェクトかどうかをチェック
    if (error instanceof Error) {
      const response = NextResponse.json(
        { error: `Error: ${error.message}` },
        { status: 500 },
      );
      response.headers.set("Access-Control-Allow-Origin", "*");
      return response;
    } else {
      const response = NextResponse.json(
        { error: "Unknown error occurred" },
        { status: 500 },
      );
      response.headers.set("Access-Control-Allow-Origin", "*");
      return response;
    }
  }
}

// OPTIONS メソッド対応
export async function OPTIONS() {
  const response = new NextResponse(null, { status: 204 });
  response.headers.set("Access-Control-Allow-Origin", "*");
  response.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  response.headers.set(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization",
  );
  return response;
}

特筆すべきこともないので、これでbuildしてbodyを持たせたうえでエンドポイントを叩けば期待する翻訳テキストが返却される。

言語の判定とか多言語用のAPIがどれかわからなかったので、それを使えばマストドンのStatusをみて多言語対応もできそうな感じだった。

Amazon Cognitoについて調べてみた

nove-b

業務で使用する可能性があるので、簡単に概念的な部分を調べてみた。

Amazon CognitoにはAWSが提供するユーザー認証サービス

cognitoはコグニートと読み、AWSが提供するユーザー認証サービスのこと。

多様な認証サービス

同様のサービスにFirebase AuthenticationとかAuth0がある。

ちなみにAWSの代表的なものだけでも

AWS Identity and Access Management (IAM)
AWS Directory Service
AWS Single Sign-On (以下、SSO)
Amazon Cognito

など多くのサービスがある。

それぞに向き不向きがあるとのことで、生成AI（嘘が含まれている可能性がある）にユースケース等をまとめてもらった。

項目	AWS SSO	Amazon Cognito	AWS IAM	AWS Directory Service
目的	組織内のユーザーに対する認証・認可を一元管理する	一般ユーザーに対する認証・認可を提供	AWSリソースへのアクセスを制御する	マネージド型のActive Directoryサービスを提供し、AWSとADの連携を可能にする
主な対象	組織内の従業員や社内システム利用者	不特定多数の一般ユーザー	AWSアカウントのIAMユーザー、ロール、サービス	Active Directoryを使用している企業
主要機能	- 複数のAWSアカウントへのSSO<br>- Active Directoryとの連携<br>- 外部アプリケーション（例: Office 365）へのSSO<br>- AWS Organizationsとの統合	- ユーザープール（ユーザー認証）<br>- IDプール（認可とAWSリソースへのアクセス権限付与）<br>- Cognito Sync（データのデバイス間共有）	- ユーザー、グループ、ロールによるアクセス管理<br>- AWSリソースのポリシーベースのアクセス制御<br>- MFAのサポート	- Microsoft Active Directory (AD) の管理<br>- AWSリソースとADの統合<br>- ドメインコントローラーの提供
AWS Organizationsとの連携	マスターアカウントでAWS SSOを有効にすることで、複数アカウントの統合管理が可能	不可	ポリシーを使用してマルチアカウント環境を管理可能	不可
Active Directory連携	AWS Managed Microsoft ADやAzure ADなどの外部ディレクトリサービスと統合可能	不可	AWS Managed Microsoft ADを使用したアクセス管理が可能	Active Directoryそのものの管理が可能
認証対象の規模	組織内ユーザー向け（数百〜数千の規模）	不特定多数（デフォルトで最大20,000,000ユーザー）	AWSアカウントに関連するIAMユーザーとロール	組織内のActive Directoryユーザー
トークンの種類	不適用（SSOによる直接ログイン）	- IDトークン（認証）<br>- 一時クレデンシャル（認可）	一時クレデンシャル（STSトークン）	不適用
主なユースケース	- 複数AWSアカウントへの一元的アクセス<br>- AWS上のファイルシステム（例: Amazon FSx）へのアクセス<br>- Office 365などの外部アプリケーションへのSSO	- サーバーレスアプリケーションの認証（例: API Gateway）<br>- 認証不要なアプリケーションのAWSリソースアクセス<br>- ソーシャルログイン（Facebook, Google, Appleなど）	- AWSリソースへのアクセス制御<br>- リソースレベルのポリシー適用<br>- セキュリティの詳細な管理	- AWSと社内Active Directoryの統合<br>- ADベースの認証でAWSリソースにアクセス<br>- Windowsファイルシステムの管理
特徴的な機能	- シングルサインオンの利便性とセキュリティ向上<br>- AWSコンソールにログインせずにアプリケーション利用可能	- ユーザー登録機能（セルフサービス）<br>- ゲストユーザーへの限定的なアクセス権付与<br>- 複数デバイス間でのデータ同期	- ポリシーベースで細かいアクセス制御が可能<br>- AWS CLIやSDKでの柔軟な認証管理	- ADサービスのマネージド運用<br>- AWSリソースとの完全統合

Amazon Cognitoと他サービスの違い

対象ユーザーが一般ユーザー向け
ソーシャルログインとの連携
ユーザープールとIDプールの役割分担

Cognitoは認証（ユーザープール）と認可（IDプール）を明確に分けている
ユーザープール: アプリケーションのユーザーを認証し、IDトークンを発行。
IDプール: 認証済みのユーザーやゲストにAWSリソースのアクセス権を付与するための一時クレデンシャルを発行。

大規模ユーザー向け設計
デバイス間のデータ同期
認証を必要としないアクセスのサポート
エンドユーザー向けのUIカスタマイズ

Amazon Cognitoは、外部ユーザー認証を中心に、ソーシャルログインや大規模ユーザー管理、デバイス間のデータ同期など、アプリケーションの開発者にとって必要な機能を幅広くサポートしている。

ちなみに認証とは、その人が誰であるかを判別すること。認可とは、その人が何を許可されているかを判別すること。

参考になりそうなサイトとかをまとめてみた

https://aws.amazon.com/jp/cognito/
https://d1.awsstatic.com/webinars/jp/pdf/services/20200630_AWS_BlackBelt_Amazon%20Cognito.pdf
https://dev.classmethod.jp/articles/krsk-amazon-cognito-20250120/
https://techblog.insightedge.jp/entry/cognito-auth
https://dev.classmethod.jp/articles/get-started-with-amazon-cognito-now-1/
https://zenn.dev/toccasystems/articles/aws-cognito-trial

React NativeのFlatListで要素がデバイスの高さ分存在しないときに、onEndReachedが発火する問題を解決する

nove-b

React Nativeで無限スクロールのタイムラインを作成したんだけど、対象のコンテンツがデバイスの高さ以上になるコンテンツ数を持っていないときに、発生する必要のない無限スクロールイベントが無限で発生する事象が起きたので対処法を実装した。

まずはデバイスの高さを取得する。

const screenHeight = Dimensions.get("window").height;

次にFlatListののコンテンツサイズ変更時にsetContentHeightを利用し、リストの高さを更新する

  const [contentHeight, setContentHeight] = useState(0);

...(中略)

     onContentSizeChange={(width, height) => {
     setContentHeight(height);
  }}

で、リストの高さがデバイスの高さより大きければ、スクロール可能（onEndReachedが発火してもいい）ので

  const hasMoreContent = contentHeight > screenHeight;

...(中略)
    onEndReached={hasMoreContent ? onEndReached : null}
  }}

という風に実装できる。

【2025年1月】ディズニーランドと星野リゾート1955と猛禽類のそらジロー

nove-b

1月に読んだ本

毎年のごとく1月はイベントが多く、本が読めない。

もしも徳川家康が総理大臣になったらは無料だからという理由で、なにも期待せずに手に取ったところ、とても面白かった。

良いか。仕事と思うな。祭りと思え。祭りならば気も浮き立ち、頭も回る。役目を思わば、気は重くなる。祭りを今からやるのじゃ！歌え！舞え！狂え！今から祭りを始めようぞ！

「それはわしの仕事ではにゃー。それをやるのは三成じゃ」

フィクションなんだけど、天下を取る人はやっぱりすごいと思わされた。

電球交換士の憂鬱は相変わらずの吉田篤弘でほっとした。

2冊読めば元が取れるKindle Unlimitedで読書しているので今月も得した。

1月が終わる

ついこの間、年が明けたというのに、もう1月が終わろうとしている。1月はイベントが比較的多いので、特に時間が過ぎるのがはやい。

1日、2日はお互いの実家に帰省した。妻の実家にはプラレールが所狭しに広がっており、楽しそうに遊んでいた。

3日、大山詣りに行く予定が、子どもに蕁麻疹が出て次の日に延期する。それ以降、たまに2人とも蕁麻疹が出るようになった。全身に広がるわけじゃないんだけど、ぽつりぽつりとまばらにでる。蕁麻疹なのか？皮膚科にもらった塗り薬を塗れば直るんだけど、すこし心配ではある。

大山はきつかった。2歳のくせに外では抱っこをねだるので、ずっと抱っこで登る羽目になった。想定内ではあったんだけど辛かった。正月の不摂生がここで一気に解消された。

5日には高校の友達と新年会をした。久々の東京でちょっと怖かったけど、ロマンスカーは快適でいい気分転換になった。しかしみんな離れ離れになったので集まるのが面倒くさい。

友達の1人が22日連続忘年会＆新年会って言ってて、まだ高校生から卒業してなかった。広告代理店の宿命なのかもしれないけど、自由に楽しそうに生きていて少し羨ましかった。たぶん、自分には向かないけど。

桃鉄は50年を突破した

年末年始恒例で3が日を超えると自然とやらなくなる桃鉄大会だけど、今年は絶賛継続中で遂に50年を突破した。毎日、子どもの寝かしつけ、家事が完了後の開催なので12時から始まるのでずっと寝不足気味ではあるんだけど、楽しいのでまあいいことにする。1日2年できるかどうかなので、2月中には終わると思っている。

希望する保育園に受かった

運よく、希望する保育園に受かった。3/5だったので、運良くと言っていい気がする。公立なので例年2枠なんだけど、今年は退園する子がいるのか3枠あったらしく、双子をなんとかねじ込めた。日本の悪口を言わずに済みそうで良かった。

抽選中も妻が第一希望の保育園の園庭開放に連れて行ってくれていたんだけど、「保育園決まるといいですね」という思わせぶりな声をかけてもらっていたらしい。果たして先生たちは知っていたのかどうかすごい気になる。

ディズニーランドに行く

去年は前泊で、今年は後泊にした。というのも前泊だと、遊んでいる間も帰る時間が気になって仕方ないし、前泊中もホテルで次の日のことを考えてそわそわする。

そういうわけで後泊にしたけど、これが正解だった。

当日5時に起きて、準備して、子どもたちを起こさないように着替えさせようとしたら普通に起きた。寝かせたままチャイルドシートに乗せる計画はここで破綻する。

ただ宿泊するホテルに着くまで泣かずに車に乗ってくれていたので助かった。

8:10に宿泊する星野リゾート 1955 東京ベイに到着。ランドに車を停めてもいいけど、1955の方が安いので、1955に停めた。

そのままシャトルバスでランドに向かう。全員座れるくらいの混雑具合だったので、双子用ベビーカーも邪魔にならなかった。

1955は基本的にいいホテルだったけど、遠いのがマイナスポイント。結局20分くらいかかった。

ついてすぐに、プライマリティパスを取って、シンデレラ城のショーと美女と野獣に課金した。待ち時間が耐えられないので、課金できるものは課金する覚悟で行ったので、後悔はしていない。

結果的に、

ウェスタンリバー鉄道
ジャングルクルーズ：ワイルドライフ・エクスペディション
イッツ・ア・スモール・ワールド
美女と野獣 “魔法のものがたり”
プーさんのハニーハント
ミッキーのフィルハーマジック
ミニーの家
ミニーのスタイルスタジオ
イッツ・ア・スウィーツ・フル・タイム
Reach for the Stars

と結構満喫した。

帰りのバスは激混みで、双子用ベビーカーは邪魔だったはずなので、申し訳ない。しかも抱っこで寝ちゃったので、荷物とベビーカーと力の抜けた子どもで、その日一番つらかった。車窓から花火が見えたけど、誰も見ていなかった。みんな疲れた顔をしていて、夢の国から出てきたことを実感した。

そんな状況だったので、1955のQRコードチェックインは本当に助かった。双子はそのまま寝ちゃったので、状況を整理して、すぐに寝た。なぜかすごい夜泣きしてつらかった。

次の日、ホテルからの景色がオーシャンビューであることに気が付いた。何のためのオーシャンビューなのかわからないけど、朝日を堪能した。

1955は奇麗だし、星野リゾート安定の土足禁止だし、安いし、控えめに言っていいホテルだった。

朝、せっかくなのでということでレストランでバイキングを食べて、セカンドルームでゆっくりして、チェックアウトした。

そらジローと対面する

妻の育休が終わるまでにそらジローに会いたいねという話をしていた。というより、木原さんのお天気コーナーに子どもと出たいという話をしていた。

そこで行くことにした。

その日お天気コーナーがあることを確認し、1955を出て汐留に向かう。ここで誤算が生じる。双子の１人が車でお昼寝しなかった。

そのため、お天気コーナー中ずっとぐずっているという醜態を晒した。

もういいね、疲れたといいながら家に帰ることになった。

そらジローは大きかった。たぶんあれは、猛禽類に違いない。

個人開発は順調に自分用にできあがっている

まだリリースしていないけど、毎日45分だけ個人開発の時間を取れるように頑張っている。15分だけとかの方が多いけど、少しでも進めるように頑張っている。そういうわけで進む具合はよくないけど、停滞はしていない。

そして自分が使う分には問題レベルまで出来上がている。

そろそろリリースしたい。

エックスサーバーVPSのMastodonイメージを使用したソロインスタンスに新規ユーザーを追加した

nove-b

エックスサーバーVPSのMastodonイメージを使用したソロインスタンスを使用して、Mastodonを運用している。

3か月ほど運用してみて、ローカルタイムラインが機能していなということに気が付いた。

趣味サーバーであれば、ローカルタイムラインには趣味が合う投稿で溢れているのだろうけれど、ソロインスタンスは自身の投稿しかない。

そこでもう１つアカウントを追加し、その子にBotとして働いてもらうことにした。

色々試行錯誤してサーバーに不要なものをたくさんインストールしてしまったので、今後のことを考え、うまくいった方法をまとめておく。

色々調べて実行したけど、うまくいかないことも多く、エックスサーバーVPSのMastodonイメージが特殊なのかもしれないと考えているけど、言い訳かもしれない。

コンソールからユーザーを追加する

# Accountモデルの新しいインスタンスを作成し、データベースに保存する
# 'rss_feed' というユーザー名と 'rss feed' という表示名を持つアカウントを作成
account = Account.create(
  username: 'rss_feed',     # ユーザー名を 'rss_feed' に設定
  display_name: 'rss feed'  # 表示名を 'rss feed' に設定
)

# Userモデルの新しいインスタンスを作成（まだデータベースには保存しない）
user = User.new(
  email: 'example@mail.com',         # ユーザーのメールアドレス
  password: 'password',              # パスワード（仮のもの）
  password_confirmation: 'password', # パスワード確認（同じ値を指定）
  account: account                   # 先ほど作成した Account インスタンスを紐付け
)

# 招待IDを設定（最初の招待データを使用）
# Mastodonのユーザー登録では招待制を使用することがあるため、招待コードを紐付ける
user.invite_id = Invite.first.id

# ユーザーを承認済みに設定（管理者の承認が必要な場合に手動で承認を行う）
user.approved = true

# 利用規約に同意したことを示すフラグを設定
user.agreement = true

# ユーザーのメールアドレス確認を完了したことを示す
user.confirmed_at = Time.now

# メール確認をスキップ（通常は確認メールを送るが、この処理では省略）
user.skip_confirmation!

# ユーザーをデータベースに保存（バリデーションを強制的に通す）
user.save!

理解してないのでChat GPTにコメントアウトを書いてもらった。

試行錯誤したので、本当にこの通りだったか曖昧だけど、だいたいこんな感じだった。

PM2を使ってMastodonのBotを作成した

nove-b

前回に引き続き、ソロインスタンスのローカルタイムラインをRSS Feedとして活用したいという思いで、今回は追加したアカウンをBotとして機能するようにした。

Botをどこで動かすのか

Mastodonを触るうえでディレクトリ構成に悩む。今回もどこで動かすか迷ったうえ、/home/mastodon/以下に作成することにした。

投稿する仕組みを作成する

import axios from "axios";
import Parser from "rss-parser";
import dotenv from "dotenv";
import fs from "fs";

dotenv.config();

const parser = new Parser();
const MASTODON_API_URL = "https://instanceURL/api/v1/statuses";
const ACCESS_TOKEN = process.env.MASTODON_ACCESS_TOKEN;

const rssUrls = ["https://blog.nove-b.dev/index.xml"];

const POSTED_URLS_FILE = "posted_urls.json";

// 投稿済みURLを読み込む
function loadPostedUrls(): Set<string> {
  try {
    if (!fs.existsSync(POSTED_URLS_FILE)) {
      console.log(
        `File ${POSTED_URLS_FILE} does not exist. Creating a new one.`,
      );
      fs.writeFileSync(POSTED_URLS_FILE, JSON.stringify([], null, 2), "utf8");
      console.log(`${POSTED_URLS_FILE} successfully created.`);
    }
    const data = fs.readFileSync(POSTED_URLS_FILE, "utf8");
    return new Set(JSON.parse(data));
  } catch (error) {
    console.error("Error loading posted URLs:", error);
    return new Set();
  }
}

// 投稿済みURLを保存する
function savePostedUrls(postedUrls: Set<string>) {
  try {
    fs.writeFileSync(
      POSTED_URLS_FILE,
      JSON.stringify([...postedUrls], null, 2),
      "utf8",
    );
    console.log(`Updated ${POSTED_URLS_FILE}`);
  } catch (error) {
    console.error("Error saving posted URLs:", error);
  }
}

async function fetchAndPost() {
  try {
    const postedUrls = loadPostedUrls();

    for (const url of rssUrls) {
      const feed = await parser.parseURL(encodeURI(url));
      if (feed.items.length === 0) {
        console.log(`No items found in RSS feed: ${url}`);
        continue;
      }

      let hasNewPost = false;

      for (const post of feed.items) {
        if (!post.link || postedUrls.has(post.link)) {
          continue;
        }

        const status = `🎉 ${post.title} 🎉\n🔗 ${post.link}`;
        try {
          const response = await axios.post(
            MASTODON_API_URL,
            { status, visibility: "public" },
            {
              headers: {
                Authorization: `Bearer ${ACCESS_TOKEN}`,
                "Content-Type": "application/json",
              },
            },
          );
          console.log(`Successfully posted: ${post.title}`, response.data);
        } catch (error: any) {
          console.error(
            "Error posting to Mastodon:",
            error.response?.data || error.message,
          );
        }
        postedUrls.add(post.link);
        hasNewPost = true;
      }

      if (hasNewPost) {
        savePostedUrls(postedUrls);
      }
    }
  } catch (error) {
    console.error("Error fetching or posting RSS:", error);
  }
}

// 定期実行（30分ごと）
setInterval(fetchAndPost, 30 * 60 * 1000);

// 初回実行
fetchAndPost();

npx tscでビルドして、node dist/index.jsで実行で投稿されることを確認した。

PM2で永続化し、Botとして機能させる

PM2とは？

PM2 は、アプリケーションを 24 時間 365 日オンラインで管理および維持するのに役立つデーモンプロセスマネージャーです。 https://pm2.keymetrics.io/

これで常時、jsを動かしてBot化することができた。

// pm2のインストール
npm install -g pm2
// pm2でBotを起動
pm2 start {path}/index.js --env MASTODON_ACCESS_TOKEN={access_token}
// pm2で起動したBotを自動起動設定
pm2 startup
pm2 save

pm2 listで起動しているか確認することもできる。

┌────┬─────────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name                │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├────┼─────────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 1  │ rss-mastodon-bot    │ default     │ 1.0.0   │ fork    │ 141470   │ 69s    │ 0    │ online    │ 0%       │ 60.7mb   │ root     │ disabled │

ちなみに削除は、pm2 delete rss-mastodon-botで実行できる。

Chat GPTにお世話になりすぎている

今回もまたChat GPTにいろいろ聞いた。理解しきれていないので、カスタマイズしつつ理解を深めていきたい。

Mastodonのソロインスタンスでローカルタイムラインを情報収集で活用する

nove-b

ソロインスタンスはタイムラインを有効活用できない

Mastodonには3つのタイムラインがある。

連合タイムライン
ローカルライムライン
ホームタイムライン

それぞれ下記のような特徴があるのだけれど、

連合タイムライン

自分がログインしているサーバーと、連合しているサーバーの、公開範囲が「公開」の投稿が全て流れるタイムライン

ローカルタイムライン

自分がログインしているサーバーの、公開範囲が「公開」の投稿

が流れるタイムラインのこと

ホームタイムライン

自分の投稿とフォローしているユーザーの投稿、フォローしているハッシュタグの付いた投稿、それからフォローしているユーザーがブーストした投稿

が流れるタイムラインのこと

参考:Mastodonのタイムラインいろいろ【Fedibird】

ソロインスタンスだと少し趣が異なる。

ソロインスタンスの場合ホームタイムラインしか機能しない

ソロインスタンスの場合は、

連合タイムラインとホームタイムラインは同じ情報になる。

詳細はMastodonのおひとり様サーバーにおける連合タイムラインで過去に調べた通り。

で、ローカルタイムラインはソロインスタンスなので、当然自分の投稿のみになる。

つまりアカウントページ等で見える投稿一覧と変わらない。

結果、ソロインスタンスだとホームタイムラインしか機能しない。

それがどうにももったいないと感じたので活用できないかと調べてみたところ、RSS Feedとして活用しているインスタンスを発見した。

ローカルタイムラインをRSS Feedにするということ

確かにそうすることで、ローカルタイムラインは興味のあるRSSと自身の投稿になり、有用なタイムラインになる。

さらにそれ用のツールもあるらしかった。

マストドンを共有フィードリーダーにするbot「Monesi」

ただ更新がされていないようだったので、今回は自前で実装した。

結果的に大満足で、

今はタイムラインより、ローカルタイムラインに訪れる機会のほうが増えた。

ローカルタイムライン

後は投稿のカスタマイズ、RSSのURLリストを外部ファイル化する、PM2を辞めるっていうのが課題。

引き続き、改善していく。

WordpressをDockerで起動する

nove-b

個人開発が完了し、やることがなくなったので記事公開時に自動でアイキャッチ画像をアップロードしたい #1 このIssueの解決を試みることにした。

そこで開発環境にアクセスしようとしたけど、パソコンを変えたのでLocal - Local WordPress development made simpleをインストールしなくちゃいけないことに気が付いた。

ただ何となく、本当になんとなく気が進まなかったのでDockerで環境構築することにした。

DockerでWorspressを起動する

クィックスタート: Compose と WordPress

しっかりとドキュメントが整備されていたので、それ通りやるだけ。

まずはdocker-compose.yml ファイルを生成する。

services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
volumes:
  db_data:

で、docker-compose up -dで実行する。

すると下記内容のエラーが出た。

/c/dev/wordpress
$ docker-compose up -d
time="2025-02-10T07:49:35+09:00" level=warning msg="C:\\dev\\wordpress\\docker-compose.yml: the attribute `version` is obsolete, it will be ignoed, please remove it to avoid potential confusion"
[+] Running 0/2
 - db Pulling                                                                                                                                                                                            3.1s
 - wordpress Pulling                                                                                                                                                                                     3.1s
no matching manifest for linux/arm64/v8 in the manifest list entries

エラーの内容としては

使用している Docker イメージに linux/arm64/v8 の対応がないためです。

とのことらしい。

 - image: mysql:5.7
 +  image: mysql:8.0

mysql:5.7 は arm64 へのサポートが十分ではないということなので、mysql:8.0を試してみる。

$ docker-compose up -d
time="2025-02-10T07:52:13+09:00" level=warning msg="C:\\dev\\wordpress\\docker-compose.yml: the attribute `version` is obsolete, it will be ignored, please remove it to avoid potential confusion"
[+] Running 35/2
 ✔ wordpress Pulled                                                                                                                                                                                     43.4s
 ✔ db Pulled                                                                                                                                                                                            69.3s
[+] Running 4/4
 ✔ Network wordpress_default        Created                                                                                                                                                              0.1s
 ✔ Volume "wordpress_db_data"       Created                                                                                                                                                              0.0s
 ✔ Container wordpress-db-1         Started                                                                                                                                                              0.5s
 ✔ Container wordpress-wordpress-1  Started

無事に通った。

http://localhost:8000に行けば開ける。

そろそろ着手する。

(2025/2/15)

docker-compose.ymlにversionの記載はいらないと指摘をもらったので修正した。

どうやらdocker-compose.ymlも非推奨らしい。

そのdocker-compose.yaml、正しいですか？

Hugoブログで最終更新日がすべて同じになっていたのを修正した

nove-b

最終更新日が１分前

記事を更新したのでブログを訪れ適当に記事を読んでいると、すべての最終更新時間が同じことに気が付いた。

どうやら記事のmetaデータにlastmodを入れると最終更新日が更新されるらしいけど、毎回そんなことをしたくない。

Gitを使用する

そこで調べているとGitの情報で取れるらしいという知識を得た。

hugo.tomlで下記設定にする。

enableGitInfo = true [frontmatter] lastmod = ["lastmod", ":git", ":fileModTime",
":default"]

でビルドしたけど、すべての記事が最終更新１分前で変わらず。

色々調査し、ビルド時にオプション付けるといけるらしいということで実行したけど、最終更新１分前で変わらず。

Gitの情報を見てみる

さすがにおかしいので、昔の.mdのコミット履歴を調べたら1分前だった。

なんでそなことになったのか潰していくと、どうやらGithub Actionでコードフォーマットをしているのだが、それが問題っぽいということに行き当たった。

実際にGithub Actionを消したら無事に、最終更新日がばらけてくれた。

Github Actionを修正する

Github Actionでprettierを実行したいで作成したAction Flowを修正する。

前Action Flowでは全ファイルに対しフォーマットをかけていたので変更されたファイルのみをフォーマットするように修正した。

新バージョン（上）:

CHANGED_FILES=$(git diff --name-only ${{ github.event.before }} ${{ github.sha }} -- '*.md')
if [[ -n "$CHANGED_FILES" ]]; then
  echo "$CHANGED_FILES" | xargs prettier --write
else
  echo "No Markdown files changed. Skipping formatting."
fi

旧バージョン（下）:

prettier --write "**/*.md"

そのほかにも修正してスリム化した。

name: Format Markdown
on:
  push:
    branches:
      - main

permissions:
  contents: write

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - name: Check out the repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18"

      - name: Install Prettier
        run: |
          npm install -g prettier

      - name: Create .prettierrc
        run: |
          echo '{"overrides": [{"files": "*.md", "options": {"proseWrap": "always"}}]}' > .prettierrc

      - name: Format only changed Markdown files
        run: |
          CHANGED_FILES=$(git diff --name-only ${{ github.event.before }} ${{ github.sha }} -- '*.md')
          if [[ -n "$CHANGED_FILES" ]]; then
            echo "$CHANGED_FILES" | xargs prettier --write
          else
            echo "No Markdown files changed. Skipping formatting."
          fi

      - name: Commit changes
        run: |
          git config --global user.name "github-actions[bot]"
          git config --global user.email "github-actions[bot]@users.noreply.github.com"
          git add .
          git diff --cached --quiet || (git commit -m "Format markdown files" && git push origin main)

結果、うまくいった。

Hugoのテーマ「Github Style Plus」のローカル検索をFuse.jsで最適化した。

nove-b

github-stylingというテーマに変更した

このブログはgithub-styleからCloneされたgithub-style-plusをforkしてカスタマイズしたgithub-stylingというテーマを使用している。

名前の通りデザインをGithubに寄せたブログテーマで絶大な人気はなさそうだし、Githubのデザイン変更に追従するのは辛そうだし、オプションも少なそうだっだけど、個人でカスタマイズしてくのであれば問題なそうだったので採用してみた。

結果、個人的に使い慣れた、見慣れたデザインになったのでまあ良かったと思っている。

テーマ変更時にディレクトの変更を余儀なくされ、netlifyのリダイレクト設定が必要になったりと面倒ではあったが、躓くことなくテーマ変更できた。

とはいえ、それなりに時間を食うので、このテーマとは長く付き合いたいと思っている。

ただ前述したようにいくらかカスタマイズしなくちゃいけない部分があり、中でも致命的だったのがローカル検索の遅さだった。

ローカル検索に1分かかる

個人的にGithubの最大使いやすさは検索性能の高さだと思っている。

コード検索とか本当に重宝している。

それに比べてこのテーマの検索は遅すぎた。

ブログは過去のナレッジが詰まっているので頻繁に検索したい、けどそのたびに1分かかるのは辛い。

ということで改善することにした。

実際の改善前が下記動画で、実際には1分20秒かかっている。

ネットワークタブをみると全ファイルを見に行っていることがわかった。

github-style-plusのローカル検索を解読する

実際に全ファイルを見に行っているのが下記のソースになる

fetch(
  `${host.indexOf("localhost") > -1 ? "http://" : "https://"}${host}/index.xml`,
)
  .then((resp) => resp.text())
  .then(async (res) => {
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(res, "text/xml");
    const linkResult = xmlDoc.getElementsByTagName("link");
    const titleResult = xmlDoc.getElementsByTagName("title");
    const arr = [];

    const matched = [];
    await (async function searchLink() {
      for (let i = 0; i < linkResult.length; i++) {
        await fetch(linkResult[i].textContent).then((resp) =>
          resp.text().then((res) => {
            const pureText = stripHtml(res);
            if (pureText.indexOf(keyword) >= 0) {
              matched.push(i);
            }
          }),
        );
      }
    })();
  });

まず、自身のindex.xmlを取得し全URLの件数を取得する。

その件数でforを回し、全URLのコンテンツを取り出しキーワードが含まれているかをチェックしている。

で含まれていたらmatchedに格納し、matchedを使用しDomを生成している。

いま200記事あるので、それを全部見に行くとなると、それはそれなりに時間がかかるに決まっている。

改善する

改善後は下記のようになった。

検索の高速化を調べているとFuse.jsがヒットした。

Powerful, lightweight fuzzy-search library, with zero dependencies.

下記のように実装しなおした。

<script src="https://cdn.jsdelivr.net/npm/fuse.js@7.1.0"></script>

まずはFuse.jsを読み込む。

const fetchIndex = async () => {
  const response = await fetch(
    `${host.indexOf("localhost") > -1 ? "http://" : "https://"}${host}/index.xml`,
  );
  const xmlText = await response.text();
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xmlText, "text/xml");
  const items = Array.from(xmlDoc.getElementsByTagName("item"));

  searchIndex = items.map((item) => ({
    title: item.getElementsByTagName("title")[0].textContent,
    link: item.getElementsByTagName("link")[0].textContent,
    content: item.getElementsByTagName("description")[0]?.textContent || "",
  }));

  fuse = new Fuse(searchIndex, {
    keys: ["title", "content"],
    threshold: 0.3,
  });
};

次にfuseを定義する。

これで特定のキーワードをtitleとcontentから検索できるようになる。やっていることは改善前と変わらずに、index.xmlからtitleとlinkとdescriptionを取得している。

thresholdはあいまい検索の閾値らしい。

オプションは他にもあった。

で、下記コードのように検索ワードをsearchに渡せば、

const results = fuse.search(query).map((res) => res.item);

fetchIndexで返した

title
link
content

が取得できるので、それでDomを生成すればいい。

この方法なら初回にindex.xmlを取得するだけで検索が実装できる。

これでブログを頻繁に検索できるようになり、自身のナレッジに手軽にアクセスできるようになった。

全コードはこちら

そもそも改善前もdescriptionを使えばfetchする必要がなかったかもしれない。

あるいはもしかするとこの方法だとtagが取得できないので、あえて全URLのHTMLを見に行っていたのかもしれない。

Google CloudでNode.jsを起動する

nove-b

Node.jsをできる限り安く動かしたいという思いでクラウドサービスを探していたところ、Google Cloudで特定の条件であれば無料利用できそうということを知ったので、サーバーの立ち上げからNode.jsの実行までを行った。

Google Cloudの無料枠

コンピューティングエンジンの無料枠は下記の通り。

e2-micro 以下の米国リージョンのいずれかで、毎月 1 つの非プリエンプティブVM インスタンス:

オレゴン：us-west1

アイオワ州:us-central1

サウスカロライナ州:us-east1

30 GB/月の標準永続ディスク

北米からすべての地域（中国とオーストラリアを除く）への毎月1GBの送信データ転送

詳細はここ。

コンピューティングエンジン

そもそもコンピューティングエンジンがなんなのかというと、公式には下記のように書かれている。

Compute Engine は、Google のインフラストラクチャ上で仮想マシンを作成して実行できる、コンピューティングおよびホスティングサービスです。

みんな大好きAWSでいうところのES2と同じ。

Google Cloudのコンピューティングエンジンでインスタンスを立ち上げる

Google Cloudにログインし、サイドメニューからCompute Engineを選択する。

VM インスタンスを選択し、インスタンスの作成をする。

で、前述した無料枠の条件に適するように選択する。

次にネットワーキングタブでファイアウォールの

[x] HTTP トラフィックを許可する
[x] HTTPS トラフィックを許可する

にチェックを入れる。

ここにチェックを入れずに作成したせいで接続ができずに苦労した。

これでインスタンスの立ち上げが完了。

~~この方法で立ち上げて2日間経つけど請求が来ていないので無料枠での運用は問題がなさそうだった。~~

なんか請求発生している気がするので、しっかり確認する必要がありそう。

ブラウザからアクセスできるようにする

VM インスタンスのSSHをクリックすればブラウザ上でコンソールが起動するので、そこでコマンドを実行していく。

nginxをインストール

nginxをインストールして起動する。

sudo apt install nginx -y
sudo service nginx start

これでインスタンスの外部 IPに訪問すれば下記のような画面が表示される。

Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working. Further configuration is required.

For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.

Thank you for using nginx.

nodeアプリを立ち上げる

Gitをインストール

Git上のNode.jsアプリを動かしたいのでまずはGitをインストールする。

sudo apt update
sudo apt install git -y

Advanced Package Toolを最新にし、Gitをインストール。

次にNode.jsをインストールしたいんだけど、パッケージツールにVoltaを使用しているので先にVoltaをインストールする。

curl https://get.volta.sh | bash

Voltaはpackage.jsonに記載しているNode.jsを自動でインストールしてくれるので、結果的にNode.jsのインストールは完了したことになる。

最後にGit上のNode.jsアプリをCloneする。

Node.jsを起動する

次に、Nginxをリバースプロキシとして設定し、HTTPリクエストをNode.jsアプリ（ポート3000）に転送する設定をする。

/etc/nginx/sites-available/defaultを下記に変更する。

server {
    # サーバーがリッスンするポートを指定（HTTPの標準ポート80）
    listen 80;

    # サーバーのホスト名やIPアドレスを指定
    # ここでは「外部IP」へのリクエストを処理する
    server_name 外部IP;

    # ルートパス（"/"）へのリクエストを処理
    location / {
        # リクエストをリバースプロキシし、ポート3000で動作するローカルのNode.jsアプリに転送
        proxy_pass http://localhost:3000; # Node.js アプリが動作しているポート

        # クライアントの "Host" ヘッダーをそのままバックエンド（Node.js）に渡す
        proxy_set_header Host $host;

        # クライアントの実際のIPアドレスを "X-Real-IP" ヘッダーとしてバックエンドに渡す
        proxy_set_header X-Real-IP $remote_addr;

        # クライアントの元のIPアドレスを "X-Forwarded-For" ヘッダーとしてバックエンドに渡す
        # プロキシを経由した場合でも、すべての経由したIPアドレスがリストされる
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # クライアントがHTTPかHTTPSのどちらでアクセスしたかをバックエンドに伝える
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

理解が追い付かなかったとのでChat GPTにコメントアウトを書いてもらった。

よくわからないけど、/にアクセスが来た時、http://localhost:3000に転送してくれるらしい。

そういうわけなので、Nginxを再起動して設定を適用しNode.jsを起動したら、アプリが表示された。

独自ドメインとLet's Encrypt の無料SSL証明書を取得する

独自ドメインの取得と設定は省略する。

sudo apt install certbot python3-certbot-nginx -y

上記は下記のプラグインをインストールする。

certbot → Let's Encrypt の無料SSL証明書を取得・更新するためのツール。 python3-certbot-nginx → CertbotがNginxと統合できるようにするプラグイン。

次にLet's Encrypt の無料SSL証明書を取得する。

sudo certbot --nginx -d example.com

最後に、自動更新を設定する。

sudo certbot renew --dry-run

Nginx の設定で HTTP から HTTPS へリダイレクト

sudo nano /etc/nginx/sites-available/defaultで

server {
    listen 80;  # HTTPリクエストを受け付けるポート
    server_name {domain};  # この設定が適用されるドメイン名

    # HTTPアクセスをHTTPSにリダイレクト
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;  # HTTPSリクエストを受け付けるポート
    server_name {domain};  # この設定が適用されるドメイン名

    # Let's Encryptで取得したSSL証明書のパスを指定
    ssl_certificate /etc/letsencrypt/live/{domain}/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/{domain}/privkey.pem;

    # サポートするTLSのバージョンを指定（TLS1.2およびTLS1.3のみを許可）
    ssl_protocols TLSv1.2 TLSv1.3;

    # 安全な暗号スイートを指定（脆弱なアルゴリズムを排除）
    ssl_ciphers HIGH:!aNULL:!MD5;

    # ドキュメントルート（公開ディレクトリ）の設定
    root /var/www/html;

    # デフォルトのインデックスファイルを指定
    index index.html index.htm index.nginx-debian.html;

    # ルートパス（/）へのリクエストを処理
    location / {
        # リクエストされたURIが存在する場合はそのファイルを提供
        # ディレクトリとして存在する場合はそのディレクトリを開く
        # どちらにも該当しない場合は404エラーを返す
        try_files $uri $uri/ =404;
    }

    # /search-items へのリクエストをNode.jsアプリ（ポート3000）に転送
    location /search-items {
        proxy_pass http://127.0.0.1:3000;  # ローカルのNode.jsアプリへリクエストを転送

        # クライアントのホスト情報を転送
        proxy_set_header Host $host;

        # クライアントのIPアドレスを転送
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # クライアントのプロトコル情報（http/https）を転送
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

のように修正してsudo systemctl restart nginxで再起動する。

これも理解しきれていないので、コメントアウトを書いもらった。

Node.jsを常時起動したい

PM2を使ってMastodonのBotを作成したでPM2を使いアプリケーションの永続化をしたところ、systemd のほうが良いと思うと言われたので、今回はsystemdを使ってみた。

まずはサービスファイルを作成する。

sudo nano /etc/systemd/system/node.service

[Unit]
# サービスの説明（任意）
Description=My Node.js App
# このサービスはネットワークが起動した後に起動する
After=network.target

[Service]
# Node.js の実行ファイル（Volta 経由）を使用してアプリを起動
ExecStart=/home/{username}/.volta/bin/node /home/{path}/app.js
# 作業ディレクトリを指定（相対パス解決のため）
WorkingDirectory=/home/{path}
# アプリが異常終了した場合でも自動で再起動
Restart=always
# 実行するユーザーを指定（セキュリティ上、root ではなく専用ユーザーを使う）
User={username}
# 環境変数 NODE_ENV を production に設定
Environment=NODE_ENV=production
# 環境変数を .env ファイルから読み込む
EnvironmentFile=/home/{path}/.env
# 標準出力を syslog に記録
StandardOutput=syslog
# 標準エラー出力も syslog に記録
StandardError=syslog
# syslog に記録する際の識別子（ログ確認時に `node-app` で検索可能）
SyslogIdentifier=node-app

[Install]
# `systemctl enable node-app` で OS 起動時に自動起動させるためのターゲット
WantedBy=multi-user.target

systemctl コマンド一覧

コマンド	役割
`sudo systemctl daemon-reload`	systemd の設定を再読み込み
`sudo systemctl enable node`	OS 起動時に node を自動起動する
`sudo systemctl disable node`	OS 起動時の自動起動を無効にする
`sudo systemctl start node`	node を今すぐ起動
`sudo systemctl stop node`	node を今すぐ停止
`sudo systemctl restart node`	node を再起動
`sudo systemctl reload node`	設定を変更してプロセスを再読込
`sudo systemctl status node`	node の現在の状態を確認
`sudo systemctl list-units --type=service`	起動中のサービス一覧を表示
`sudo systemctl list-unit-files --type=service`	すべてのサービス一覧を表示
`sudo systemctl is-active node`	node が動作中か確認
`sudo systemctl is-enabled node`	node の自動起動設定を確認
`sudo systemctl kill node`	node のプロセスを強制終了
`sudo journalctl -u node --no-pager`	node のログを確認

上記のようなコマンドがあるので、サービスを登録して起動する。

sudo systemctl daemon-reload
sudo systemctl enable node
sudo systemctl start node

Kindle Unlimitedの検索が使いにくいので、好きな作家の対象本を一覧表示するサービスを作った

nove-b

Kindle Unlimitedの検索が使いにくい！

Kindle Unlimitedは、読書好きにとって最高のサブスクリプションサービスのひとつです。

毎月7～8冊ほど読むため、利用することで月に¥2,500～¥3,000ほどお得になっています。しかし、便利な一方で、検索のしにくさが大きな課題でした。

Googleのサジェストに「Kindle Unlimited 検索しにくい」と出るくらいなので、同じ不満を持つ人は多いはずです。

特に、Kindle Unlimitedの対象本だけを簡単に検索するのが難しく、フィルターをかけたり、余計な操作が必要になったりと手間がかかります。

そんな中、Qiitaで「kindle unlimited検索を作ってみた」という記事を発見しました。

これは非常に便利なツールで、今まで読んだQiita記事の中で一番役に立ったと言っても過言ではありません。しかし、使い続けるうちに「自分は特定の作家の本しか検索していない」ということに気が付きました。

好きな作家のKindle Unlimited対象本を簡単に探したい

自分が本当に欲しいのは、特定の作家のKindle Unlimited対象本を簡単に一覧表示できるサービスでした。

Amazonの検索URLをブックマークする方法もありますが、それでは使い勝手が悪い。

「エンジニアなら、ないものは作ろう！」 ということで、思い立って開発しました。

Kindle Unlimited対象本検索ツールを開発！

📚【無料で読める】好きな作家の本を検索！Kindle Unlimited対応作品一覧

このサービスでは、

好きな作家のKindle Unlimited対象本を簡単に検索
シンプルで直感的なUI
すぐに使える無料ツール

を提供しています。

Kindle Unlimitedの検索が使いにくいと感じている方は、ぜひ試してみてください！

まとめ

Kindle Unlimitedの検索が不便と感じている方のために、好きな作家の対象本を簡単に検索できるツールを作成しました。

📌 今すぐ試す！

このツールが、あなたの読書ライフをより快適にする助けになれば幸いです！

星新一賞の最終候補にAIの小説が選ばれたらしい

上までの文章はすべてChat GPTに書いてもらった。

下書きしてそれをSEOの観点で書き直してもらった。

別に自分の文章が好きなわけじゃないけど、自分の文体じゃない。

AIの発展はうれしいけど、小説から文章の個性が消えるのは少し寂しくもある。

誰かに似た文章はかけるけど、オリジナルな文章を年齢とともに更新していけるのは人間だけな気がする。

知らんけど。

「AIが書いたSF小説としては史上最高レベルかも」執筆のほぼ全てをAIに任せて星新一賞の最終候補に残った作品が話題に

【2025年2月】土日お出かけ月間のなか個人開発もけっこう楽しめた

nove-b

2月に読んだ本

2月も読めなった。

というより今読んでいる朝井リョウの本が、なんとなく重たくって読書が進まない。

そういえば冬になってから、ずっと鬼平犯科帳が読みたいんだけど、過去に持っていたことを考えるとお金出して買いたくない。

Kindle Unlimitedの対象になってくれないかしら。

BOOX GoColor7が気になる

Kindleを購入してまるっと5年経つけど、Kindle Unlimitedでしか、ほぼほぼ本を読まなくなってきた。

5年経ったのでさすがにKindleのレスポンスが遅くなってきた。

そろそろ新しいのを買わなくちゃいけないんだけど、最近のKindleは27,980円するらしい。

27,980円の読書しかできない端末ってどうなうんだろう。

今使っているスマホも5000円で買ったというのに、それより高い読書しかできない端末ってあんまりしっくりこない。

そんなか、BOOX GoColor7というのを見つけた。

Kindle Paperwhite と比較すると、2万円の差額でカラーに対応しているし、Android OSが入っているらしい。

3GBでスムーズに動くのかという疑問もあるけど、検討する価値はありそうということで、電気屋に行った時は探してみることにする。

項目	BOOX GoColor7	Kindle Paperwhite
画面サイズ	7インチ	7インチ
画面タイプ	Kaleido 3 (カラーE Ink)	モノクロE Ink (300ppi)
フロントライト	○ (調光・色温調整あり)	○ (調光・色温調整あり)
解像度	1264×1680 (カラー: 150ppi, モノクロ: 300ppi)	1236×1648 (300ppi)
OS	Android 11	Kindle専用OS
アプリインストール	○ (Google Play対応)	× (Kindleストアのみ)
ストレージ容量	32GB	16GB / 32GB
RAM	3GB	非公開
防水性能	×	○ (IPX8)
バッテリー持ち	数週間 (使用状況による)	数週間 (使用状況による)
重量	約195g	約205g
接続端子	USB-C	USB-C
ワイヤレス通信	Wi-Fi / Bluetooth	Wi-Fi / Bluetooth (シグニチャーエディション)
価格	約50,000円前後	約27,980円～32,980円
特徴	カラー表示対応、Androidアプリ利用可	Kindleストア最適化、防水性能あり

4月から保育園が始まる

ただ今、そんなものを探している場合じゃない。

というのも4月から保育園が始まるので、今のうちにお出かけしておこうとなった。

そういうわけで2月は

鎌倉
吾妻山
ソラトス

に行った。

鎌倉は子どもだけでなく、親も楽しめるので良い。静かな喫茶店で大泣きしたのは焦ったけど、江ノ電を楽しそうに見ててよかった。

吾妻山はなぜか歩いてくれたので、楽だった。長い滑り台で喜んでいたので良かった。

最近、すごいしゃべるようになったし、鉄棒にぶら下がれるようになった。

ゆる言語学ラジオで子どもの言語習得について話していたけど、本当にすごい。

3月も土日は休まずお出かけしたい。

とりあえずPLAY! PARK ERIC CARLEにいく。

ただ保育園の買い物ものいかないといけないので、引き続き土日は忙しそうだ。

2月の個人開発

そういうわけで個人開発は専ら平日の深夜に行っている。

Mastodonのインスタンスにボットを追加した

こんな感じでローカルタイムラインに興味あるRSSフィードが流れるようになった。

ブログのテーマを変更した

Hugoのテーマ「Github Style Plus」のローカル検索をFuse.jsで最適化した。

ついでにプルリクも出しておいた。

ただ受つけていないのか、スルーされている。

いい修正だと思ったんだけど。

キンドルアンリミテッドの検索サービスを作った

なかなか有用なサイトだと思うので、使ってほしい。

少しづつ検索上位に来るように施策してみるかと考えている。

そう簡単にいかないだろうけれど。

📚【無料で読める】好きな作家の本を検索！Kindle Unlimited対応作品一覧

Windowsのキーボードで英字入力、日本語入力の切り替えをシンプルにする

nove-b

最近、英語入力、日本語入力でよく間違える。

なんでだろうと原因を考えてみたけど、現在どっちの入力モードかわからないことがいけない気がする。

そこで明示的に切り替えられるようにした。

「あ」（「A」の可能性もある）を右クリックでIMEオプションを開く
設定
キーとタッチレスのカスタマイズ
キーの割り当てをオンに
無変換キー IME-on
変換キー IME-off

という風に設定すれば、

無変換キー押下で日本語入力に。

変換キー押下で英語入力という風に明示的に変更することができるようになった。

Macは標準でこの設定だった気がする、さすがMac。

React Router v7で作成したウェブアプリをPWA(インストールに対応のみ)にする

nove-b

⚠️追記：vite-plugin-pwaはとReact Router v7で正常に機能しません

...

React Router v7でウェブアプリを作成した。

Kindle Unlimitedの検索が使いにくいので、好きな作家の対象本を一覧表示するサービスを作った

これを少しずつ改良しているんだけど、サイトに訪問するのが面倒なのでPWAにすることにした。

環境

PWAにしたアプリの環境は下記の通り。

{
  "react-router": "^7.1.5",
  "react": "^19.0.0",
  "vite": "^5.4.11",
}
"volta": {
  "node": "23.8.0",
  "npm": "10.9.2"
}

PWAにする

vite-plugin-pwaをインストールする。

npm install -D vite-plugin-pwa

vite.config.tsのpluginsにvite-plugin-pwaを追加する。


  plugins: [
    ...
    VitePWA({
      registerType: "autoUpdate", // サービスワーカーを自動的に更新する設定
      manifest: {
        name: "アプリ名",
        short_name: "短縮名",
        description: "アプリの説明",
        theme_color: "#ffffff",
        background_color: "#ffffff",
        display: "standalone",
        orientation: "portrait",
        start_url: "/",
        icons: [
          {
            src: "/icons/icon-192x192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "/icons/icon-512x512.png",
            sizes: "512x512",
            type: "image/png",
          },
        ],
        screenshots: [
          {
            src: "screenshots/screenshot1.png",
            sizes: "640x480",
            type: "image/png"
          },
          {
            src: "screenshots/screenshot2.png",
            sizes: "640x480",
            type: "image/png"
          }
        ]
      },
    }),
  ],

上記の記述でビルド時にmanifest.webmanifestが生成されるのでそれをapp/root.tsxで読み込む。

で、必要となる下記を作成する。

public/icons/icon-192x192.png
public/icons/icon-512x512.png
public/screenshots/screenshot1.png
public/screenshots/screenshot2.png

テストする

PWAは開発環境でテストできないので、npm run buildでビルドしたデータを起動して確認する。で、無事にインストールできることを確認した。

PWAのすべては享受できていないけど、インストールするのが目的なので達成した。

vite-plugin-pwaはとReact Router v7で正常に機能しません

今回pwa化する過程で

 { rel: "manifest", href: "/manifest.webmanifest" }

をroot.tsxに追加している。

vite-plugin-pwaが正常に機能していればそこも自動でやってくれる。

オフラインのキャッシュも動いていないし、ただmanifest.webmanifestを自動で作ってくれるという機能しか使えてない。

実際にissueもあった。

Feature Request: Vite PWA Support for React Router 7

VS Codeをコマンドから開くときに既存ウィンドウで開くようにする

nove-b

bashで特定のディレクトに行き、

code .

上記コマンドでVS Codeを開くことができる。

いつもこの方法で開いていたのだが、毎回毎回新しいウィンドウで開くのが鬱陶しかったので、既存ウィンドウで開くコマンドを調べてみた。

code . -r

上記で既存ウィンドウで開けるらしい。

ちなみに既存、新しいウィンドウで開くかは設定によるらしい。

もし新しいウィンドウで開きたいときは、

code . -n

上記コマンドを実行する。

レスポンス429の時に成功するまでリクエストをし続ける

nove-b

運用こそ正義

ありがたいことに運用中のサービスを使ってくれる人が、本当にぼちぼちだが増えたきた......、気がする。

https://kindle-unlimited-search.nove-b.dev/

ただまだいくつか問題点があり、今回はその１つ「ステータスコードがしっかり定義されていない」という問題を解決した。

現状のサービスだと

該当する作家が見つからない
クエリで送ったページが範囲外
amazon側のリクエスト不可で応答できない

という起こりえるエラーをすべて400のサーバーエラーでフロント側に返していた。

これだと、フロント側でユーザーに対して異なるメッセージを提供することができず、全く親切じゃない。

しかもフロントは400が返ってくる前でリクエストをし続けるという、こちらも全く親切じゃない実装をしていた。

ステータスコードを定義した

そこで、該当する作家が見つからない時は404を、ページが範囲害外の時は416を、そしてリクエスト制限の時は429を返すようにした。

そしてフロントではその値で処理を分けることにした。

404の時は「検索した作家の作品が見つかりませんでした。」というスナックバーを出し、416の時はつまり、すべてのページを確認したということなので「作品（最大100件）の取得が完了しました。」というスナックバーを出し、429の時は再度リクエスト制する（5回まで挑戦する）という仕様に書き換えた。

リクエストを再試行する

429のように再度リクエストするコードをプラグインなしで初めて書いてみたので備忘録してまとめておく。

初めて知ったんだけど、指数バックオフという手法を取ることにした。

指数バックオフとは

リトライ（再試行）する間隔を指数関数的に増加させる手法

とのことらしい。

つまり初回のリトライに失敗したら1秒後に再試行、2回目失敗したら2秒後に再試行、3回目失敗したら4秒後...といった具合に増加していく。

これに加えて今回は5回までリトライして接続できなかった時は処理を中断させることにした。

const fetchAPI = async () => {
  setState("wait");
  let page = 1;
  let retryCount = 0;
  const maxRetryCount = 5; // 最大リトライ回数

  while (true) {
    // page が 10 を超えた場合はループを終了
    if (page > 10) {
      setState("end");
      console.log("成功");
      break;
    }

    try {
      const response = await fetch(`${endpoint}$`);

      if (response.ok) {
        console.log("データ取得に成功しました。");
        page++; // 次のページへ
        retryCount = 0; // リトライ回数をリセット
        await new Promise((resolve) => setTimeout(resolve, 1000)); // 1秒待機
      } else if (response.status === 429 && retryCount < maxRetryCount) {
        // 429 Too Many Requests が返された場合、リトライ
        const delay = Math.pow(2, retryCount) * 1000; // 指数バックオフ
        console.log(
          `リクエストが多すぎます。${delay / 1000}秒後にリトライします。`,
        );
        await new Promise((resolve) => setTimeout(resolve, delay));
        retryCount++;
      } else {
        // その他のエラーの場合、エラーログを出力してループを終了
        console.error(
          `エラーが発生しました。ステータスコード: ${response.status}`,
        );
        setState("end");
        toast.error("失敗");
        break;
      }
    } catch (error) {
      console.error("失敗:", error);
      setState("end");
      break;
    }
  }
};

まず最大10ページまでページが10以下かどうかの判定をする。

ページが10より大きい時はその時点で処理を終了する。

10以下の場合はapiを叩き、成功したら、1秒待ちページに1を足してループ処理の先頭に戻る。

429が返ってきた時、指数バックオフの値を定義し、定義した時間待ち、リトライカウントに1を足し、ループ処理の先頭に戻る。

この時点でページに1を足さないので、また同じページの再リクエストができる。

GA4にイベントを送り、レポートで確認する

nove-b

みんなの好きな作家が気になる

ここ最近、ずっとアップデートを続けているKindle Unlimited検索サイトのイベントを収集することにした。

このサイトは好きな作家を登録したうえで使用するんだけど、そのイベント、つまりどの作家が登録されたかを取得できるようにした。

理由としては将来的に作家ランキングとかを実装できればと考えたからと、個人的にみんながどんな作家を好んでいるかを知りたかったから。

イベントを送る

実装方法としては特別難しいことはない。

function 作家登録処理(作家名: string) {
  ... 作家を登録する処理
  if (window.gtag) {
    window.gtag('event', 'registration_author', {
      event_value: 作家名,
    });
  }
}

これだけで実装は完了。

確認方法としてはリアルタイムで、registration_authorというイベントを確認し、そこのevent_valueに値が取れていれば問題ない。

これだけだとレポートで一覧の確認ができないので、見れるようにカスタムディメンションに登録をする。

カスタムディメンションに登録

管理 => カスタム定義 => カスタムディメンションを作成を選択する。

ディメンション名を任意で設定し、範囲をイベント、イベントパラメータをevent_valueにする。

で、数日たてばデータが反映され、レポートでイベントパラメーターの値一覧を見れるようになる。

値一覧を見る

ホーム > イベントで該当のイベントを選択する。

そうすると登録したイベントのカスタムディメンション値一覧を取得することができる。

上記はとある日の登録された作家一覧。

まだユーザーが少ない。ここが拡充していくことを祈っている。

【2025年3月】４月から変わる環境に備える

nove-b

3月に読んだ本

朝井リョウは重かった。正直、デビュー当時は絶対認めないぞって思ったこともあったけど、とんでもない思い違いだった。逆立ちしても勝てない。

万城目学は良くわからなかった。期待していた分、残念だった。

好きな小説家のKindleUnlimitedを簡単に検索できるサービスを作成した

Kindle Unlimitedの検索が使いにくいので、好きな作家の対象本を一覧表示するサービスを作った

Kindle Unlimited 対応作品検索｜作家別無料読み放題リスト

もうずいぶん長いこと本はKindle Unlimited対象本だけを読んでいる。

世間的に見ても活用しているほうだと思うし、相当感謝しているんだけど、検索のしにくさは辟易していた。

そういうわけで自分のしたい検索ができるサービスを作成した。

技術的には

React Router v7
Tailwindcss
Express
Cloud Platform

で特別難しいことはしていない。

個人開発は無料で行うべきっていう思想から反しているので、どこまで続けられるかわからないけど、できる限り開発を続けていきたいと考えている。

ブログのテーマを戻した

2月にブログのテーマを変更したんだけど、すぐに戻した。

Hugoのテーマ「Github Style Plus」のローカル検索をFuse.jsで最適化した。

ブログのテーマにこだわり始めるのは良くない兆候で、ブログの本質はコンテンツということを忘れちゃいけない。

ただ気になるのは仕方ないので、ここいらで自作にテーマに取り組もうかと考えている。

HugoにするかHexoにするかで悩むけど、たぶんHugoにする。

急ぎはしないし時間もないので、ちょっとづつ作っていこうかと考えている。

3月はお出かけする

３月はお出かけするっていう目標を２月に掲げた。

というのも４月から妻の職場復帰、子どもたちの保育園入園がある。

そうすると今までのように平日休んで空いている公園で遊ぶこともできないし、土日は妻、子どもの体力回復に捧げられるかもしれない。

そういうわけで色々行くことにした。

PLAY! PARK ERIC CARLE
河津桜
ボーネルンド
多摩動物公園
やまと公園
こどもの国

雨も降らなかったので土日全部足遊びに出かけたかもしれない。

バス乗りたいとか電車乗りたいっていう要望にも応えられたし良かった。

それにしてもPLAY! PARK ERIC CARLEは微妙だった。

それに比べてやまと公園は常に小田急線が見える公園ということで子どもは大興奮だった。

なんで男の子は電車が好きなのだろうか。

自分の小さい頃は興味なかったらしいので、遺伝とかではなく、人類というもっと大きい遺伝子に組み込まれているのだろうか。

4月に向けて

４月から生活がガラッと変わるのは間違いない。

7時30分には保育園に送る必要がある。

だいたい起きて家を出るのに２時間かかるので、４月からは5時30分に起きて、大人の準備を終わらせ、６時には子どもたちを起こしたい。

そのために睡眠時間を確保するために20時には子どもたちを寝かしつけたい。

という４月からの生活に向け、３月末から実践を始めたけど、全くうまくいかない。

まず20時までにすべての事柄を終わらすは無理だし、もっと遊びたいとぐずるし、朝は起きないしで全く思い通りにいかない。

しかも夜泣きはするし、寝かしつけても泣いて起きて大声で呼ばれて、仕方なく添い寝してたら一緒に寝ちゃうしで、家事も終わらない。

それに加えて保育園の準備が多すぎる。

服にスタンプ押すのも面倒くさいし、買い物も沢山あるし、なるほど保育園を迎えるのも大変だと実感した。

ただ、苦には感じない。

少し大人になれたのかもしれない、31歳の年にやっと。

保育園に行くのは少し寂しくもある。

それにしてもどんどん大きくなる。驚くほどの成長スピードで瞬きしてたらもったいないくらい。

nextjs のproduction環境でだけconsoleを出力しないようにする

nove-b

結論

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Error: "next start" does not work with "output: export" configuration. Use "npx serve@latest out" instead.
  // output: "export",
  reactStrictMode: false,
  compiler: {
    removeConsole: process.env.NODE_ENV === "production",
  },
};

export default nextConfig;

上記コードでnextjsのproduction ビルド時にconsoleが出力されなくなる。にした。

デバッグしないと進めない

コードを見て何が起きいるのかわかるくらいの玄人であれば問題ないんだけど、そんな技術力はなく、consoleを出しまくり、どこで何がどうなっているのかを確認しないと進めない。

そんな具合なのでコンソール画面には大量のログが溢れる。

当然そんな状況じゃ、デプロイできないので、いちいちconsoleを消すのは面倒だし、そのまま開発環境ではconsoleを使いたい。

なので、デプロイ時だけ消したい。

本番環境でだけconsoleを消したい

nextjsでは設定でデプロイ時だけconsoleを出力しない方法があるので実行した。

てかたぶん、ほとんどのフレームワークにはあると思うんだけど。

next.config.jsで下記設定をする。

module.exports = {
  compiler: {
    removeConsole: process.env.NODE_ENV === "production",
  },
};

NODE_ENVを自身で定義する必要があると思ったけど、

公式を参照すると、

The greater React ecosystem treats NODE_ENV as a convention, only permitting three (3) values:

production: When your application```` is built with next build development: When your application is run with next dev test: When your application is being tested (e.g. jest)

のように事前に定義されているっぽい。

これでどんどんconsoleを出力できる。

VSCodeで新規ファイルを常にマークダウンで開く

nove-b

VSCodeで新規ファルを開く時、常にマークダウンで開きたいと常々思ってきた。

setting.jsonで下記のように書けば常にマークダウンで開くようになる。

"files.defaultLanguage": "markdown"

Githubでリリースの設定方法とリリースの必要性について

nove-b

２年前に１度だけGithubでリリース作成したことがあったけど、久しぶりすぎて忘れていたので改めてまとめることにした。

ブランチにタグをつける

リリースのベストプラクティスが良くわからなかったので調べてみたところ、小さいサイトではmainブランチにタグをつけて管理すればいいということだったので、今回はそうすることにした。

そういうわけでまずはタグをつける。

mainブランチに移動し、

git tag -a v0.0.0 -m "Initial release"
git push origin v0.0.0

タグをつけてタグをプッシュする。

Githubから設定する

後はGithubのリポジトリに行き、リリースぺージから作成したタグを選び、リリースするだけで完了。

リリースを作成する必要があるのか

mainブランチが常に最新で、タグ付けした時点でのコードをCloneできないのであればリリース管理する必要あるのかと疑問に感じた。

調べてみると、リリースは瞬間のスナップショットで再現性を求めるものらしい。

さらにタグを指定してサブモジュールに追加することもできるっぽい。

# 1. クローンしてタグをチェックアウト
git clone https://github.com/user/other-repo.git
cd other-repo
git checkout tags/v1.0.0

# 2. 必要なコミットにいる状態で、上位リポジトリに追加
cd ..
git submodule add ./other-repo path/to/submodule

であればタグ付け、リリースは必要かもしれない。

いずれGithub Actionでタグ付けしたらリリースが作れるようにしたい。

リリースしたのは

Hugo-PassageというHugoのテーマ。

【2025年4月】春は軽やかに、でもずっしり重たくのしかかってきた

nove-b

春が2階から落ちてきた。^1

落ちてきたので、受け止めようと手を伸ばしたら、あまりの重さに尻もちをついて立ち上がれなくなった。

人生は伊坂幸太郎の小説のように美しく幕を開け、順当に収束へ向かうとは限らない。

そう思い知ることになった４月だった。

そんな怒涛のスタートを切った４月だけど意外と小説を読むことができた。

4月に読んだ本

Kindle Singleが２冊なのでページ数的にはそこまで読めていないかもしれない。今月は大当たりはなかった印象だけど、外れもなかった。

そういえば前月気になっていたBOOX GoColor7なら電子図書館の本が読める？

そろそろ買い換えたいんだけど、防水じゃないのが気になる。

今更ながら音が聞こえる

保育園入園で完全に生活の主軸が子どもに移った音がした。

大人はどこかで人生を子どもに譲るタイミングが来ると思うんだけど、その１つのタイミングが今なのかもしれない。

ただそうは思いつつ、春一番に吹かれても自分の人生にへばりついている自分がいる。

ここら辺で何者にもなれない人たちは後続のためにすべてを捧げる生き方を選択する必要があるのかもしれないけど、そんなにすっぱり自分の人生を諦めることはできない。

非常に悩ましい問題が目の前にある。

育児エンジニアの記事が多いのもそういうことなんだろう。

現実にスケジュールなんて存在しない

今まではころころした子どもの相手さえしていればよかった。

子どもたちに予定はないので、まあ遊んでいればよかった。

ただ保育園が始まるとそうは行かない。朝6時に起こすので、20時には布団に行かせたい。

しかしご飯は食べないし、まだ遊ぶって怒るし、歯磨きしないしで、なかなか思い通りにいかない。

それでも何とか寝かしつけるともう自分の体力が0になっている。

とは言え、一瞬一瞬がかけがえのない時間であるのも確かなんだけど。

受け取ったバトンが想像より重かった

「パパ仕事行かないで」と泣いている子どもを見た時、本当に仕事を辞めようかと思った。

慣らし保育から3週間経とうとしている。今は連れて行くとそのまま砂場に直行する。

子供の成長はあまりにも早い。

子どもが可愛いのは当然なんだけど、育てるのは本当に大変で、最近は育児卒業した人に対して尊敬の念を抱くようになった。よくぞ、この大海原を泳ぎ切った。どうやって泳ぎ切った？荒波だらけだったでしょう。と問いただしたいくらいに。

自分の仕事が一番辛いと思う奴にはならない^2

って言ったのは斉藤和義が伊坂幸太郎か、一体どっちか先なのかわからない。

これは本当にそうなんだけど、それでも大変な分類に属しているんじゃないかとふと思うときがある。

でもきっとそんなことなく、現に妻の方がよっぽど大変そうで、自分なんて中途半端に仕事して、中途半端に家の手伝いしているくらいだと思う。どちらかに全振りできるほど、能力もないのが問題で、そう考えたらやっぱり。後続のためにすべてを捧げる生き方を選択をするべきなんだろうと思うけど、うーん、悩ましい。

せめて仕事の方を早々に切り上げて、子どもが起きているうちに帰えれるようになればいいのかなと思っている。

愛着を持てるかということ

そういう意味で仕事について考える。

会社に、会社で作ったものに、真摯に向き合っている人は本当にすごいと思う。

会社で評価されるより、個人的にはやっぱりGithubでStarがつく方が、個人開発したプラグインがブログで紹介される方がよっぽど嬉しい。

会社に属する仕事でもなく、ジョブ型の仕事でもなく、プロダクトに属する仕事がしたい。

って最近思っている。

そのプロダクトに全振りしたい。

個人開発について

自身のプロダクトでは、2つリリースした。

1つがKindle Unlimited 対応作品検索｜作家別無料読み放題リストで、作家を登録し、簡単にKindle Unlimitedの作品を検索できるサイト。

これは個人的に欲しかったので作成した。

運営費が発生しているので、どこかでCloseする予定だけど、Googole Cloudでインスタンスを立てて構築するっていう経験ができたので良かった。

2つ目はhugo-PassageでHugoのテーマ。

ブログの構築で悩みたくないのでHugoにしたんだけど結局構築してしまった。

まあ、自分の好きな形態にできたので良かった。

リリースとか導入手順とか丁寧に書けたのはいい経験だった。

オープンソースなのでプルリクとか出してもらえると大変うれしい。

Starが欲しいので布教したいけど、どうやって布教すればいいのか全く分からない。

ーーー

またちょっと仕事が立て込んできたので、先にそっちを片付けて、次に作りたいものに着手する。

次に作りたいものは決まっているので、引き続き励んでいくのだが、何のために励んでいるかわからない。

自分の環境でだけ、特定のフォルダをGitの管理化から除外する

nove-b

結論

.git/info/exclude

でフォルダ、ファイルを指定することでGit 管理から除外できる。

切り替え時のメモリ不足

個人の頭のスペックが著しく低いので、マルチタスクには向いていない。

仕事でもその影響をひどく受ける。

例えば1つの課題をやりつつ、もう1つの課題をこなさなくちゃいけない時。

ブランチを変更後に、

このブランチでは何をしていたのか
どこまで進んでいるのか
どのような方針で進めていたのか

を思い出すことで時間を浪費する。とても効率が悪いし、燃費が悪い。

aiが言うに

どうすれば解決できるかChat GPTに相談してみたところ

めっちゃ共感します、その「タスク切り替えのもたつき」問題。これは実際に **「タスクスイッチングコスト」**とか「コンテキストスイッチ」って呼ばれていて、脳の仕組み的にもちゃんと負荷がかかってるんですよね。

て、すごいフランクに教えてくれた。

そういえばなんか最近AIがフランクになってきている気がする。

そろそろ人間の機嫌を取るフェーズに入ったのかもしれない。シンギュラリティは近く、そもそも仕事が奪われてタスクの切り替えで悩むこともなくなるかもしれないけど、まだ目の前に仕事はあるっぽいので、対策を聞き、改善を試みることにした。

タスクを切り替える前に、今の状態・次やることを書き出すと、戻った時に再起動がめっちゃ早くなります。

どうやらこれがめっちゃ有効らしい。


【作業名】◯◯のバグ修正
【今やってたこと】
- APIのレスポンス確認中
- 400エラー出てるが原因不明

【次にやること】
- console.log 追加してリクエスト確認
- header と token を見直す

こんな感じで書いておくと戻ってきたときに、すぐに作業に集中できるらしい。

切り替えメモをどこに書くか

早速実践してみることにしたけど、どこにメモするかで悩むことになった。

Google KeepとかNotionとかSlackでもいいんだけど、基本的にVsCodeにいるのでVsCodeで完結したい。

Git管理から外したい

ただ、VsCodeで作業しているディレクトリは大半Git管理されている。

つまり自身のメモをそこに置くとGitの管理下になる。なんとか避けたいけど、プロジェクト全体のgitignoreに書くのも気に食わないし、他の人に影響を与える可能性がある。

つまり自分の環境でだけGitの管理から外したい。

解決した

調べてみると、.gitの中の設定をいじればできるらしい。

.git/info/exclude

で特定のフォルダを指定するとそのフォルダは自身の変更履歴に上がってこなくなる。

当然、フォルダ名はプロジェクトで使わないようなフォルダ名にするのが無難なので、適当なprefixでもつけて命名するようにする。

これでタスク切り替えのもたつき問題は解決できると思ったけど、まだ絶賛もたついている。

【2025年5月】現状を妥協したい

nove-b

なんか色々書きたいこと考えたり、NoteBookLLMで作成してみたり、考えすぎて面倒になったので簡潔に書いていくことにした。

5月に読んだ本

ヒトコブラクダ層戦争（上） (幻冬舎文庫)
ヒトコブラクダ層戦争（下） (幻冬舎文庫)
読楽 2025年1月号
- 檻の中のワルキューレ（伽村あきら）
小説推理2025年1月号
- 海よりも底に深く沈む（射線堂有紀）
- 僕らが夕闇を埋めた場所（松樹凛）

ヒトコブラクダ層戦争は久々にページをめくる手が止まらない小説だった。

月刊文芸誌を読むことにした。kindle Unlimitedから当たり小説を選び取るのが難しい。文芸誌を読むことで選択というストレスなく多くの作家に触れられるようにしたい。

ただ連載小説に手は出せないので短編とちょうど連載スタートした小説だけを読むことにする。

大藪春彦文学賞の檻の中のワルキューレは面白かった。

海よりも底に深く沈むは連載小説らしい引きがあり、次に期待が持てる。

僕らが夕闇を埋めた場所は普通だった。

五大文芸誌も読みたいけど、電子図書館にもなかった。そもそも電子化しているほうがマイノリティらしい。

今月は漫画も結構読んだ。

ワールドトリガー
忘却バッテリー
スパイファミリー
怪獣8号

5月に行った場所

プラレール博
湘南モノレール
公園

電車に目がない双子の片方のために電車をよく見に行った。

土日のどちらかは遠出し、どちらかは近場で少し休ませるようにしている。

最近は感情も言葉も豊で見ていて本当に楽しい。

一緒に公園で楽しめるようになってきた。

保育園に行き始めたことで他人への遠慮がなくなってきた。

他の子がいても気にせず突っ込むようになり、危なっかしい。

１つのAIに全振りしない

最近生成AIの進歩が凄まじい。

Geminiの拡張機能でほぼほぼコードを書かずにいろいろなことが実現できる。

すごい、楽しい、って思うけど、AIを使って何かできるのは天才たちだけで、凡人にできるのはAI側が用意しているAPIを叩くだけの仕事になっている気がする。

個人的にはそういうわけで、AIに関しては深入りしない方がいい気がしている。

もちろん最新のキャッチアップ、流行りに手を出すべきだけど、何かに全振りするのは時期尚早じゃないかと思う。

AIは使うけど、その時々で最善の選択をする必要がありそう。

やりたいことと仕事

やりたいことが多すぎるけど、仕事のせいで手が回らない。

仕事はつまらないけど、仕事じゃないと得られない知見もある。

なんでこんな面倒な実装方法を取らなくちゃいけないんだ、個人開発ならそんなことしない。

っていうことも要件的には実装する必要がある。

それはそれで知見を得れるのでまあいいんだけど。

でもやりたいことではない。

そういうわけで、少しずつ仕事から足抜けしていく必要がある気がしている。

【2025年6月】今年も半分終わったらしい

nove-b

6月に読んだ本

不時着する流星たち)

良書の基準は書きたいと思わせる本だ

となんかの本の後書きで誰かが書いていた。

そういう意味で小川洋子の作品は個人的にすべて良書で個人的に外れたことがない。

そしてこの本も例に漏れずだった。

今月はまさかの1冊しか読めなかった。

仕事が忙しいとかじゃなくて、お風呂をシャワーにしたのが最大の原因で、6月の猛暑で読書時間を失った。

本を読めなくなるのは寂しいので能動的に時間を作っていきたい。

6月に行った場所

ディズニーランド
公園
イケア
水遊びを解禁した

ディズニーランド

ここ最近、ディズニーランドに行っても同じ乗り物しか乗らない。

2歳児が乗れる乗り物は限られていて、さらに知恵と想像力がついたせいで、色々なものに怯えるようになった。

美女と野獣の野獣咆哮シーンでは泣き声を轟かせ、周りの人の注目を浴びていた。

乗るものは同じだけど、今回は日帰りで、自分の親を伴って行くことにした。

日帰りは意外と問題なく、別に泊まる必要ないんじゃという気付きを得た。

自分の親がいるとなんとなく気づまりなのは30歳、男性、思春期真っただ中なのかもしれない。

まあ、親も子どもも楽しそうにしていたので良かった。

公園

子どもにとっては天国なのかもしれないけど、暑すぎて本当に死と隣り合わせだと思う。

自分が子どものころってこんなに暑かったかって思いだそうとするけど、暑かった気もするし、そうでもなかった気もする。

多分当時は暑い寒いとかより、楽しいという本能で生きていたんだと思われる。

ウォーターテーブル解禁

もうどうしようもないくらいに暑いので、

ウォーターテーブルを解禁した。

これなら日陰で行えるし、ついでに庭に水もあげれるし、子どもも楽しいで、何とか乗り越えられそう。

とは言え、ウォーターテーブルじゃ満足することなくなる気がするので、そろそろプールの目星をつける必要がある。

イケア

会社都合で完全在宅になった。

しかし家で仕事する環境なんてないので、椅子と机を買うことが急務ということでイケアにいった。

イケアのフードコートの朝ごはんは100円らしく、それを目がけていったら椅子取り合戦が繰り広げられており、当然敗北したので、ここでもまた椅子机難民になった。

何とか席につく頃には子どもたちはお腹がすき愚図り、自分たちは疲れ果てで這う這うの体だった。

もう行かないと誓ったけど、そういえばこの誓い前回もたてた気がすると思い出した。

何とか在宅用の椅子と机を買い、事なきを得た。

会社都合の在宅

会社が7月1日から10月31日まで完全在宅に移行した。

そもそも完全在宅なら別に都内の企業でも良かったようなという思いもあるけど、いったん蓋をする。

個人的に在宅は苦手で、やっぱり家を出たい気持ちがある。

個人的にお金を出してコアワーキングスペースまで行こうかと思ったけど実現してない。

でも状況によってはそれもありかもしれないと思っている。

てかやっぱり、そもそも完全在宅なら別に都内の企業でも良かったようなと思わざるえない。

スキルアップしたい

ただこっちが都内でよかったんじゃと言っても、誰も自分を受け入れてくれないとそもそも意味がない。

よく考えたら自分の技術力に自信があるわけでもないし、裏付けする資格もない。

ぜんぜん転職を考えているわけじゃないけど、セーフティーネットは必要だ、ということで競プロを始めようと思って１か月経った。

コンテストが毎週土曜日21時とか寝かしつけで参加できない。

競プロに参加せずにコーディングスキルをあげるためにはどうすればいいんだろうと考えつつ趣味に逃げてしまう。

コントリビューター

最近、趣味の個人開発で作りたいものが枯渇した。

ただプログラミングはしたいということで、既に作成されているものに手を出すスタイルにした。

個人開発で願わくば一攫千金とか思っていたけど、そもそも無理なので、純粋にプログラミングすることにした。

そういうわけでコントリビュートして楽しむことにした。

今月は１つしか出せなかったけど、週1くらいでは出していきたい。

でもやっぱり個人開発は楽しいので作りたいものができ次第、再開する。

なんか最近月まとめも適当になってきた。

7月はしっかり書くようにする。

OnPushとChangeDetectorRefでAngularのパフォーマンスを向上したい

nove-b

AngularのOnPush戦略

Angularのパフォーマンスを向上するために

changeDetection: ChangeDetectionStrategy.OnPush,

を導入した。

これにより入力プロパティが変更された場合、またはコンポーネント自身やその子コンポーネントがイベントを発火した場合にのみ、変更検知するようになる。

そもそもAngularのデフォルト変更検知は

ブラウザイベント
タイマーイベント
HTTPリクエストの完了
Promiseの解決/拒否

でブラウザイベントが発生するとすべてのコンポーネントが変更検知の対象になるらしい。

つまり非常にコストが高い。

そのためOnPush戦略が重要になる。

ちなみにベストプラクティスは

デフォルトではOnPushを適用せず、パフォーマンスが問題になったり、上記で挙げた「OnPushを検討すべきコンポーネント」の特性に合致したりする場合に限定して導入を検討する

とのことだった。

で、導入した場合、データが非同期で更新された場合や、参照が変更されないオブジェクトのプロパティが更新された場合など、Angularが自動的に変更を検知できないケースが発生する。

そこで明示的に変更を検知するためにChangeDetectorRefを使用する。

ChangeDetectorRefはコンポーネントの変更検知器への参照を提供する

開発者が変更検知のタイミングを細かく制御できるようにするChangeDetectorRefは4つのメソッドを持つ。

markForCheck

次回の変更検知サイクルでチェックする必要があることをマークするメソッド。 markForCheck()を呼び出すだけではすぐに変更検知は実行されず、次の変更検知サイクル時に検知の対象となる。

「次のチェックで、忘れずにこのコンポーネントも見てね！」いつ使う？コンポーネントの中のデータが非同期（例：setTimeoutやHTTPリクエストの結果など）で変わったけど、そのデータの「箱」（参照）自体は変わっていないとき。Angularは箱の中身が変わっただけでは、デフォルトで気付いてくれません。

detectChanges

直ちに変更検知サイクルを強制的に実行する。頻繁な呼び出しはパフォーマンスに影響を与える可能性がある。

「今すぐ！このコンポーネントをチェックして見た目を更新して！」いつ使う？コンポーネントの中のデータが非同期（例：setTimeoutやHTTPリクエストの結果など）で変わったけど、そのデータの「箱」（参照）自体は変わっていないとき。Angularは箱の中身が変わっただけでは、デフォルトで気付いてくれません。

detach()

現在のコンポーネントを変更検知ツリーから切り離す。そのコンポーネントとその子孫コンポーネントは、明示的にreattach()されるまで、以降の変更検知サイクルではチェックされなくなる。コンポーネントがめったに変更されない場合とかに使える。

「このコンポーネント、しばらくお休みさせて！」いつ使う？ Angularが通常検知しないような場所（例：ngZone.runOutsideAngular()の中）でデータが更新されたり、特定のタイミングでどうしても画面をすぐに更新したいとき。

reattach()

detach()で切り離されたコンポーネントを変更検知ツリーに再アタッチする。再び通常の変更検知サイクルに含まれるようになる。

「お休み終わり！またチェックしてね！」いつ使う？ほとんどデータが変わることがない、または特定の条件が満たされない限り、画面を更新する必要がないコンポーネントがある場合。大量のコンポーネントがある中で、一部を休ませて全体の負担を減らしたいときに役立ちます。

うーん、２年間くらい触ってて初めてしっかり理解を試みた。

npxは永続的なインストールは行わないが、実行のために一時的なダウンロード（実質的なインストール）は行う

nove-b

npxはパッケージをインストールせずに実行できるという認識だったので、

Need to install the following packages:
  xxxxxxxxxxxxxxxxxx
Ok to proceed? (y) y

という文言見て今さら不思議に思ったのでどういうものかと調べてみることにした。

厳密に言えば一時的にインストール（ダウンロード）される

パッケージをインストールせずに実行できる

というのはnpxでよくある説明でこれをそのまま受け取っていたけど、どうやら思っていたのとちょっと違った文脈だった。

node_modules ディレクトリに恒久的に追加されるわけではない

通常のnpm iのようにpackage.jsonに依存関係として追加されたり、グローバルに利用可能なコマンドとしてシステムに登録されたりするわけではないらしい。

実行後に自動的にクリーンアップされる、あるいはキャッシュされる

npxがダウンロードしたパッケージは、コマンドの実行が完了すると通常は自動的に削除されるか、次回以降の高速な実行のためにキャッシュされ、ディスク容量を占有し続けたり、手動でアンインストールする必要がない。

つまり、npxは永続的なインストールは行わないが、実行のために一時的なダウンロード（実質的なインストール）は行うとのことだった。

Goでターミナルに表示するCLIを作成する

nove-b

個人開発するものがないと【2025年6月】今年も半分終わったらしいで書いたけど、さっそく作りたいものができたので着手することにした。

作りたいのはCLIツールでnpx xxxxというコマンドで自分のプロフィールが表示されるエンジニアの名刺みたいなもの。

過去に流行ったらしいけど、知らなかった。

この前聞いたpodcastでやっている人がいると聞き自分も作りたくなった。

TypeScriptで開発するのが楽そうだけど、せっかくなのでgoで作ることにした。

GoでターミナルにHello World

過去にgoでapiとか作ったことあるけど、もう何も覚えていなかったのでほぼ最初からスタートした。

go mod initでモジュール管理をする

まずは

go mod init github.com/xxxxxxxxxx

でモジュール管理を開始する。

nodeのpackage.jsonのようなもの。package.jsonにあるscriptのような機能を持っていない。

ちなみに、github.com/xxxxxxxxxxの部分は存在しないリポジトリでもいいらしく、myprojectのような名前でもいいらしい。

ただ、最終的に公開する予定がある場合は、実際に公開するリポジトリのパスに合わせておくのがベストプラクティスとのことだった。

buildファイルの実行でターミナルに特定の文字列を表示する

次に

package main

import "fmt"

func main() {
	fmt.Println("Hello, World!")
}

というmain.goを作成する。

`` bash o build -o hello-world main.go


最後に上記のようにビルドすると`hello-world`というファイルが同階層にアウトプットされる。

``` bash
./hello-world

で、ターミナルにHello Worldと表示される。

【2025年7月】浮世離れしたいけど、そんな勇気はない

nove-b

7月に読んだ本

7月はまた本を1冊しか読めなかった。

キッチン常夜灯 (角川文庫)

「花束みたいな恋をした」で主人公の男がすぐに役立つビジネス・自己啓発書を読むばかりでカルチャーへの興味を失っていく姿が描かれていて、浮き世離れした姿に惹かれる自分は、そうはなりたくないいと思うんだけれど、徐々にそっち側に引っ張られているようで恐ろしい。

実際、Audibleが無料とのことで契約して、何冊かビジネス書を聞いてみたりした。

まあ、Audibleは自分には合わず、何も頭に入ってこなかったという落ちになるんだけれど、ついに自分もビジネス書を読んでしまうのかと何とも言えない気持ちになった。

そういうわけで浮き世離れした男代表の明智小五郎と出会うために、江戸川乱歩全集を再読することにした。

夏に乱歩は妙に合う。

色々と考え悩んでいた電子書籍専用端末だけれど、スマホで良くないかと思うようになってきた。

スマホと電子書籍専用端末の2台持ちなんて意味わからないし、電子図書館も電波がなくちゃ読めないらしく、電子書籍専用端末で読むにはテザリングをする必要がある。

それならスマホで良いという結論になった。

ただいまだにスマホを寝る前にやると眠れなくなるという言い伝えを信じているので、少し試してみることにする。本当に寝つきが悪くなるようであれば、電子書籍専用端末の購入を検討する。

何かを選択する時にお金で悩みたくない

買えるなら買いたいんだけど、迷わず購入できるほどの金銭的余裕があるわけじゃない。

子どもが毎日成長するので、子どもが小学生になった時の話まで出てくるようになった。

学校帰りに家に誰がいてあげたい。

そうするとどちらかの年収を倍にする必要がある。

今の会社で、というより4年間同一企業に勤めて年収を倍にする方法なんて存在しない気がする。

そうなると転職するしかないんだけど、別に転職するほど今の会社に不満があるわけじゃない。

ただ最近いろいろ他の方から連絡が来たりするので、知らない企業の話し聞くくらいならと思い、気になっている企業に書類を送ったら、普通にお祈りされた。

新卒以来、初めて書類落ちした。

俺が弱い事を、とうの昔に知っている。

最近自分が弱くないと思い込んでいる節があったので、自分の現在地点を知るという意味ではとても良かったと思うようにする。

地頭で敵わないのであれば努力するしかない。そして努力の方向を間違わないようにしたい。

努力というわけじゃないけどOSSに貢献することが性に合っている

努力というよりかは趣味としてOSSにコントリビュートするのが自分に合っている気がする。

今までは個人開発1択だったんだけど、個人開発だと0から自分のコードを書くだけなので、コードリーティングとかをすることがない。別にそれでもいいんだけれど、別の人の書いたコードを読むのが意外と面白いことに気がついた。

あと常に課題があるのも問題を解いているようで面白い。個人開発にしろ、OSSコントリビュートにしろ、それぞれできることが異なるのでいい塩梅でやっていきたい。

今精力的に取り組んでいるのはelkへのコントリビュート。

基本的にissueに対してプルリクを送るんだけど、Lintの警告が気になったのでプルリク投げたらすでに解決済みだった。

forkしたmainを最新化していなかったのが原因なので、常にmainを最新にすることを心掛けるようにする。

git fetch upstream
git merge upstream/main

競プロとかやりたいんだけど、今はまだそこまで手が回らない。

余裕がないことを家族、子どものせいにしない

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">だから親は人間的魅力に欠ける人が多いんだわ。毎日仕事して家帰って育児してると何もアイデアが浮かばねーわ。ただタスクに忙殺されてる。思考の余暇が無いしハングリー精神もない。故に新しいことを取り入れる余裕もない。結果無キャになる。子育ては確実に俺から男性的魅力を奪ってる。よくない。</p>— トーマス＠ガジェマガ (@gadgetKaeru) <a href="https://twitter.com/gadgetKaeru/status/1948027352618815601?ref_src=twsrc%5Etfw">July 23, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

最近見たXの投稿で割と共感した。

ただ余裕がないのは自分次第な気がするので、家族、子どものせいじゃない気がする。

結婚したのにそれを感じさせないくらい楽しんでいる人だっているわけだし。

それになんだって子どもはかわいい、たぶんいまが１番可愛い。

この時間、時期に子どもより自分を優先するのはきっと後悔する、そうは思っても自分を諦めきれないのは4月にも書いたんだけれど。

【2025年4月】春は軽やかに、でもずっしり重たくのしかかってきた

大宮鉄道博物館に行く

なんで子どもは電車が好きなのだろうか。

全く共感できないけど、子どもが好きならばということで行ってみた。

2時間かかったし、車中で子どもが吐くしで、大変だったけど、それなりに楽しんでくれたようだった。

新幹線テラスは何分毎に新幹線が目の前を通り、普通に見ものだった。

スジャータのカチカチアイスも食べれたし満足だった。

もう少し大きくなったらまた行ってもいいかもしれない。

軽井沢に2泊3日の旅行にいく

色々あったけど、タイムラインとコメントだけ残しておく。

1日目

上里サービスエリア
- 子どもが吐くのが怖いので顔色を見つつ、すべてのSAをピックアップしていた。
- 車で寝てくれたので、寝ている間に結構距離を稼げた。
軽井沢ショッピングプラザ
- フードコートでご飯を食べた
軽井沢コモングラウンズ
- アイスを食べた
- 蔦屋が運営しているらしい
BEB5軽井沢 by 星野リゾート
- 子連れに星野リゾートは間違いない
- 寝るだけならちょうどいい

2日目

01BAKERY
- お昼ごはん買うために訪問したけど買わなかった。
Mel
- お昼ごはん買うために訪問した。
- 駐車場で待ち。
- 妻と義母に任せた
おもちゃ王国
- 遊園地デビュー
- 電車を運転するやつに3回乗った
- 回転木馬をリタイヤ
- リベンジの時ずっと抱きついててかわいかった。
- ゴーカートデビューもした
- プラレール館に2時間くらいいた。
つるや
- ローカルのスーパーらしい
- 寝ている子どもと駐車場で待っていた
- みんなが大量の買いもの袋を持って帰ってきた
TsuruTonTan UDON NOODLE Brasserie 軽井沢
- おしゃれなうどん屋さん

3日目

とんぼの湯
- 温泉、良かった。
- 夜も行けばよかったけど、子どもがいると...
熊野皇大神社
- 長野と群馬の県境にある神社らしい
- 御朱印発祥の地とのこと
- こどものトイレに付き合っていたら迷子になった
- みんなもう車に戻っていた
軽井沢発地市庭
- 時間余ったのでよった
帰宅
- 渋滞にはまり3時間50分かかった

しっかり疲れたけど、満足した。

【2025年8月】夏休みと転職を諦め、いったん添い遂げる決意を固める

nove-b

8月に読んだ本

今月は2冊しか読めなった。

大学生の時は20冊読んでいたので、その10分の1しか読めてない。

多く読めばいいって言うものじゃないけれど、なんとなく悲しい気持ちにはなる。

博士の長靴は電子図書館で読んだ。

毎日再ログインしなければいけないとか、通信が必要になるとか気になる点はいくつかあったけど、何より小説が30冊しかないので個人的には使い物にならないというのが、使ってみた感想。

図書館にはもう少し頑張ってもらいたい。

キンドルアンリミテッドを退会した

キンドルアンリミテッドにしてから読み切れない本が増えた。

たぶん無料なのでとりあえず読んでみようという考えで本を選ぶことが増えたからだと思う。

本屋に行き楽しそうな本を見て読みたいなあ、でもキンドルアンリミテッドにないからなあ、ってなるのはあまりにも貧乏人過ぎるので、本くらいは買うようにする。

9月からは好きな本を好きなだけ読むようにする。

8月3日はトイレ記念日

双子の片割れ（女）の方がトイレデビューした。

女の子の方が成長が早いというがその通りですんなりトイレにいけるようになった。

片割れ（男）のほうはまだまだかかりそうだけど、気長に待つことにする。

おかあさんといっしょの2025年6月の月歌「ゆめみるゆっくりさん」を聞き、妻が片割れ（男）のことを歌っているみたいと言っていてその通りだと思った。

夏休みと昼休み

妻が学校の先生のため、夏休みがある。

そのため子どもたちが家にいる。

在宅の昼休みは水遊びに捧げたり、仕事以上の重労働だった。

妻と2人でお昼食べ行ったり、家族で夜食べに行ったりできていいことも多かった。

まあ、仕事はいつでもできるけど、子育てできる期間は短いので、いまをしっかり楽しむしかない。

本当に子育ては一瞬で、この前まで新生児だったのに、いまはもう3歳になりかけている。

七五三の前撮り

3歳になるということはもう少しで七五三ということで前撮りに行った。

男女双子なのでどうしようかと考えた結果、3歳と6歳にすることにした、たぶん。

途中で着物を脱いで逃走したり、泣きわめいたりして、めちゃくちゃ大変だったけど、プロの写真を見たら可愛すぎてびっくりした。

親バカじゃなくて本当に天使だったのでびっくりした。

マイメロにはまる

3歳になると恐ろしいことに色々な遊び場が有料になる。

サンリオもその1つで2歳までは無料なので、なんとかして誕生日前までに行くぞ、と予定を捻じ込んだ。

片割れ（男）のほうは、男の子らしく電車が好きだけど、片割れ（女）のほうは好きじゃない電車に付き合っている感が拭えなかった。

ずっと可哀そうだと思っていたけどピンとくるものがないらしく、新幹線にはまろうと努力している感じさえした。

しかし、サンリオに行き、帰ってきたときにはマイメロの大ファンになっていた。

以来、マイメロちゃんを見つけるたびに興奮するようになった。

当日は2つしかない乗り物を制覇し、キティちゃんとポムポムプリンと写真を撮った。

楽しかったらしく、また行きたいらしいけど、次からはお金がかかるので、ちょっと考える。

おかあさんといっしょスペシャルステージにいく

夏休みの最後のイベントで「おかあさんといっしょスペシャルステージ」行った。

さいたまスーパーアリーナから新幹線が見えて、大興奮だった。

去年も来たのに全く気がつかなかった。

視点で相当見え方が変わると再認識した。

ステージは年齢的なものか、今年のほうが楽しんでいるようだった。

手を振ったり、一緒に踊ったり、成長が垣間見えた。

途中で疲れて寝ちゃったけど、楽しんでいるようで良かった。

次は11月のファミコンと3歳児のみが申し込める観覧に全力で応募する。

来年もまだ卒業しないでくれると親としてはありがたい。

来年もまだおかあさんといっしょが好きで、みんなで行けることを願っている。

国宝を見た

時間を作り、妻と国宝を見に行った。

これがとんでもなく面白く、やっぱり多くの人が良いというものは間違いなくいいものであると再認識した。

何がいいかは書けないので、書かない。

スラムダンク以来の映画で久しぶりに1時間以上のコンテンツを見た気がする。

ショートコンテンツに慣れすぎているので、3時間みれるか不安だったけど、あっという間だった。

3時間をあっという間と感じさせる作品力に圧倒された。

転職活動の終結

7月に書類落ちしたことは書いたけど、8月にはずっと行きたかった、憧れていた企業に応募した。

書類は通り、面接をした結果、1週間経っても返信がこないので多分落ちたのだと諦めることにする。

面接では技術的な話もできたし、最近の話題を話すこともでき楽しかった。

今の会社ではそういう話ができないので、やっぱり技術的に強い会社は知識豊富な人が多いなと感じた。

とは言え、落ちたものは仕方ないのでいったん諦めて、今の会社と添い遂げる決意を持つように頑張ってみる。

別に今の会社に不満があるわけじゃないので、これ以上就活を進める気もない。

次のステージに行きたかったけど、行けなかったのは自分のブランド不足、技術力不足なので、もっと努力するしかない。

自分のステージを改めて知ることができたので、ここからスタートする。

いずれまた受けなおしたいと思っているし、受けると思う。

React Router v7でConsoleを削除するメモ

nove-b

React Router v7で謎のConsoleが出続ける

React Router v7で開発していると下記コンソールが常に出ていた。

Production Buildすれば消えると思っていたので気にしなかったけど、そんなことなかったので初めて意識した。

💿 Hey developer 👋. You can provide a way better UX than this when your app is loading JS modules and/or running `clientLoader` functions. Check out https://reactrouter.com/start/framework/route-module#hydratefallback for more information.

訳すると、

こんにちは、デベロッパーの方へ。

お使いのアプリがJSモジュールを読み込んだり、clientLoader関数を実行したりする際、これよりもずっと優れたUX（ユーザー体験）を提供できます。詳細については、https://reactrouter.com/start/framework/route-module#hydratefallback をご覧ください。

とのこと。

つまりもっといい開発できますよ、ということ。

公式を見に行くと、

On initial page load, the route component renders only after the client loader is finished. If exported, a HydrateFallback can render immediately in place of the route component.

HydrateFallbackをエクスポートすると、初回レンダリング時、クライントローダーが完了するまで、HydrateFallbackでエクスポートしたコンポーネントを表示してくれるとのこと。

追加して、

ずっと優れたUX（ユーザー体験）を提供でき

るようになった。

WindowsでDockerを用いPixelfedをビルドする

nove-b

Pixelfed is 何？

オープンソースのInstagramで、Mastodonとか同様に分散型のアーキテクチャを使用している。

つまりFediverseの一部で、

Instagramの「より魅力的な（そして倫理的な）代替手段」

と言われていたりいなかったり。

Buildまでに結構手こずったのでやり方をメモしておく

結構というより、挫折しようかと思うほど手こずった。前提としてフロントエンドをメインとしているのでDockerの知識が乏しいというのが多分にある。

Dockerに慣れている人であれば、こんなもの朝飯前かもしれない。

Documentはこちら

Pixelfed Docs

Envの作成

まず戸惑ったのが、Envがたくさんあることで

.env.docker
.env.example
.env.testing

どれを使えばいいのかわからなかった。

いろいろ調べた結果env.dockerを使うっぽいことが判明した。

この時点でDocsに書いてあることと少し違うので、これが正しいのかわからない。

By default Pixelfed comes with a .env.example file for production deployments, and a .env.testing file for debug deployments. You'll need to rename or copy one of these files to .env regardless of which environment you're working on.

とはいえ、動いたのがenv.dockerを使う方法なので、この方法で進めていく。

cp env.docker .env

上記コマンドで、env.dockerを.envにコピーする。

次に下記値を任意の値に変更する。

APP_NAME="PixelfedExample"
APP_DOMAIN="pixelfed.example.com"
ENFORCE_EMAIL_VERIFICATION="false"
INSTANCE_CONTACT_EMAIL="メールアドレス"
DB_PASSWORD="パスワード"

ちなみにAPP_DOMAINをlocalhostとかにしようとしたけれど、バリデーションがあるしく、特定の形式のドメイン名にしか設定ができなかった。

APP_DOMAINの設定により、pixelfed.example.comでサービスを開けるようになる。

たぶんその設定はdocker\nginx\root\docker\templates\etc\nginx\conf.d\default.confに記述されている。

server {
    listen 80 default_server;

    server_name {{ getenv "APP_DOMAIN" }};

これだけだと自身の指定したドメインとIPアドレスの紐づけが完了されていないので、hostsファイルを修正して紐づけを行っていく。

C:\Windows\System32\drivers\etc\hosts

を開き、末尾に

127.0.0.1 pixelfed.example.com

と追記する。

Dockerを立ち上げる

docker compose up -d

コマンドでDockerを起動する。

上手くいかないときは、

docker compose logs --follow

でログを確認して修正していく。

今回は認証キーがログに記載されていたいので、

docker compose exec web php artisan passport:keys

でKeyを作成する。

そしてDockerの問題がなくなるまで根気強く付き合っていく。

アカウントを作成する

Dockerの問題がすべて解決したら、アカウントを作成する。

docker compose exec -u www-data web php artisan user:create
Creating a new user...

 Name:
 > name_id

 Username:
 > username

 Email:
 > email

 Password:
 >

 Confirm Password:
 >

 Make this user an admin? (yes/no) [no]:
 > yes

 Manually verify email address? (yes/no) [no]:
 > yes

 Are you sure you want to create this user? (yes/no) [no]:
 > yes

Created new user!

これで一通り設定完了したので、pixelfed.example.comにアクセスすると、トップページが表示させる。

証明書 (nginx.crt) と秘密鍵 (nginx.key) を作成する

最後にhttpsで接続できるように、証明書を作成する。

mkdir -p docker/nginx/ssl && openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout docker/nginx/ssl/nginx.key -out docker/nginx/ssl/nginx.crt -subj "//C=JP/ST=Tokyo/L=Tokyo/O=Dev/CN=pixelfed.example.com"

で、下記2ファイルが作成される。

pixelfed\docker\nginx\ssl\nginx.crt
pixelfed\docker\nginx\ssl\nginx.key

無事Https接続ができるようになった。

ホットリロードが効かない

意気揚々とカスタマイズしようとして、ソース触っても画面が更新されない。

なんなら、

docker compose down
docker compose up -d

でも更新されず。

docker compose up --build -d

で更新されることが確認できた。

新たな問題なので解決に向けて調査していく（マウントの問題？）けど、ひとまずビルドできたのでOKとする。

追記

docker compose up --build -d

でbladeが更新される。

npm run development
docker compose up --build -d

でvueが適用される。

......、これが正しい運用方法なのかもしれない。

【2025年9月】やっと公園に行ける気温になった

nove-b

9月に読んだ本

今月も2冊しか読めなった。

Kindleデバイスが古くなった＆キンドルアンリミテッドを退会したという理由で紙の本に切り替えた。

久々の紙の本は思ったより軽くて、読みやすかった。

読みやすさで言えばKindleなんて比じゃないレベルで読みやすい。

ただ出先に何回か本を忘れ手持無沙汰になったので、Kindleは良かったと思うこともあった。

つまり一長一短ってこと。

今は紙の本にした。ただ明日はわからない。

図書館は最強という再発見

9月読んだ本は適当に書店で買った。そうすると当然紙の本が家にある。

本のデメリットは場所を取ることで、いままでの引っ越しでも何回もつらい思いをした。

今は家に内田百閒の全集を残し本を置かないようにしている。

そういうわけで、すぐに売りたいんだけど売る場所が家の近くにない。

そこで図書館に頼ることにした。幸いなことに歩いて行ける場所に図書館がある。

久々に、たぶん大学生依頼の予約をした。

ただなかなか来ないので、１冊普通に買っちゃった。

9月13日はトイレ記念日(再)

双子の片割れ（男）の方がトイレデビューした。

トイレデビューした日に外のトイレでもトイレデビューした。

度胸がある。

双子の片割れ（女）の方は家でのトイレは完璧だけど、外のトイレは怖がってギャン泣きする。

お出かけすると、トイレにいる時間のほうが長いかもしれない。

まだまだ先は長そうだけど、とりあえず２人ともデビューできた、お疲れさま。

おかあさんといっしょ

ファミリーコンサートに応募して落ちた。

初応募で4列目が当たったのは奇跡だったのかもしれない。

まあ、仕方がないので諦める。

それとは別に3歳の1年間番組の観覧に応募ができる。

毎月25日までに頑張って応募し続ける。

とりあえず9月は応募した。

キックバイクにはまる

祖父母からもらったキックバイクに乗り始め、いい感じに興味を持ってくれたよう。

公園に行っては乗り回している。

双子用ベビーカー、テント、キックバイク２つと大荷物で大変だけれど、公園に長い間いれるようになったので行く甲斐ができた。

今までは他の子がたくさんいるともう帰ると言っていたけど、保育園のおかげが、成長か、まだ帰りたくないと言うようになった。

せっかく行っているので、そっちのほうが嬉しい。

転職活動の終結と再開

ずっと憧れていた企業に落ちたことは8月に書いた。

で、そういうわけならばと転職活動を辞めたんだけれど、実際にいろいろな企業の方と話すにつれ、楽しそうなプロダクトをたくさん見つけた。

ただ転職試験となると、自分自身の実力不足が露呈するかもしれない。

まあ、それも含めて自分の現在地を知るいい経験になりそうなので、面白そうなプロジェクトにはぶつかっていくことにした。

鍵っ子にしたくない

というのも今後のことを考える。

鍵っ子が悪いわけじゃないけど、子どもが帰ってきたときに誰かが家にいてあげたい。

そのためには一馬力に近い状態を目指す必要があり、年収を上げる必要がある。

書いてて気が付いたけど、

【2025年7月】浮世離れしたいけど、そんな勇気はない

過去に同じことを書いていた。

まあ、そういうわけで少し恥ずかしい思いをするかもだけど当たって砕けていく。

Pixelfedと格闘する日々

WindowsでDockerを用いPixelfedをビルドする

分散型のインスタことPixelfedを触っている。

もともとReact Nativeのプロジェクトということで見つけたけど、WindowsのARMはAndroid Studioをインストールできないとのことで諦め、Web版を触って楽しむことにした。

何とかしてビルドまで持ってきたけど、全然全体像が見えずに困っている。

別に無理してやる必要もないんだけど、ここまで来たらしっかり理解したいと思い、くらいついている。

飽きるまで、挫折するまで頑張ってみる。

理解することの重要性

上記動画を見ていかに理解することが大切かを思い知った。

結末を急ぎ、なあなあにするしてしまうことが多いので、意識的に行っていくようにする。

木こりのジレンマと同じで、しっかり理解してから進むことが結局近道なんだと思われる。

Pixelfedのビルドにしてもそうで、まずはソースコード理解をしたうえで、進めていきたい。

Hugoのテーマを変更したらnetlifyのビルドが失敗するようになった

nove-b

HugoのテーマをPaperModに戻した

Hugoのテーマをまた変更した。

コントリビュートとリリースとブログを一元管理したいということで自作のテーマを作成したけど、コントリビュートを自動で収集したくなったので、atinux/my-pull-requestsを使用することにした。

できたものはこれ、GithubのAPIから持ってくるのでこちらで運用する必要がない。

そういうわけで、hugo-Passageにあるコントリビュートカテゴリが必要なくなっため、ブログはブログだけを管理するように変更し、そのためにテーマを最初のhugo-PaperModに戻した。

Hugoのビルドは脆い

で、戻してnetlifyでビルドしたところ、失敗した。

テーマを変えるとビルド失敗するのはよくあること？なのでnetlify上で定義しているHugoのバージョンを見直してみたりしたけど、一向にビルドが通らない。

原因はバージョンではなくビルドイメージ

他の原因かとエラーを探ると、

hugo: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.33' not found (required by hugo)
hugo: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found (required by hugo)
hugo: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.34' not found (required by hugo)
hugo: /lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4.29' not found (required by hugo)

というログが残されていた。

Netlify のビルド環境にインストールされている GLIBC（Linux の標準ライブラリ）のバージョンが、あなたが使っている Hugo のバイナリが要求するバージョンより古いのが原因です。

とのことらしい。

確かにビルドイメージをUbuntu Focal 20.04からUbuntu Noble 24.04 (default)に変更したところビルドが成功した。

腑に落ちない

ただそうするといままで成功していた意味が分からない。

腑に落ちないけれどChatGPTによると、

Netlify はビルド高速化のために、以前使った Hugo の実行ファイルをキャッシュしておく仕組みがあります。

とのこと。

つまり今までは最初に成功したときにHugoを使い続けていたのかもしれないとのこと。

それがいつのものかわからないし、どのバージョンかもわからない。

1:59:22 AM: Failed to fetch cache, continuing with build

ただ確かにログを見ると以前の Hugo バイナリキャッシュが使えなかったと書かれていた。

なので、解決策としてはビルドイメージをUbuntu Noble 24.04 (default)を変更するという着地になった。

ちょっと釈然としないので、もしわかりやすく説明できる人がいたら教えてください。

次テーマを変えようって思い立った時は、Hugoを辞めると思う。

とりあえずデプロイしたらキャッシュに惑わされたのでNuxtのユニバーサルレンダリングについて調べてみた

nove-b

SSGでデプロイされていると勘違いしていた

https://contributions.nove-b.dev/をNetlifyにデプロイしている。

Clone元はhttps://github.com/atinux/my-pull-requestsで、envを変更するだけで自分ようになるので、ソースコードを読まずにnuxi buildでデプロイした。

最近は静的ジェネレータをメインに触っていたせいか、SSGでデプロイされると思い込んでいたので、プルリクを出すたびにデプロイしなくちゃいけなく、デプロイの定期実行をどうしようと思い悩んでいた。

先日プルリクを出したあとに見に行くと、最新のプルリクが反映されており、勝手にデプロイが走ったのかと混乱した。

デプロイ履歴を見に行くとデプロイ履歴は更新されていない。

SSGじゃないんじゃと思い返して、試しにプルリクを出し、観察しに行くとプルリクが更新されておらず、さらに混乱する。

しばらく経ち再訪すると更新されていて大混乱したので、しっかりコードを見に行くことにした。

コードリーディングしていく

CSR or SSR api fetch

fetchしている部分を見に行くと、

const { data: contributions } =
  (await useFetch) < Contributions > "/api/contributions";

特に特別なことをしていない。

ちなみにuseFetchとは、

このコンポーザブルは、との便利なラッパーを提供します。URL とフェッチオプションに基づいてキーを自動的に生成し、サーバールートに基づいてリクエスト URL の型ヒントを提供し、API レスポンスタイプを推測します。

とのことだった。

調べてみると特定のレスポンスにおけるKeyだけを取得できるpickという機能とかssrとcsrを切り替えるserverとかあって便利そうだった。

パラメーター一覧

ちなみに全体でssrとcsrを切り替える方法は、nuxt.config.tsで

export default defineNuxtConfig({
  ssr: false,
  ...

のように設定すると実現できるようだった。

つまり特別なことはしてないので、Nuxtのデフォルトのレンダリングをしていると思われる。

Nuxtのレンダリングモード

Nuxtのドキュメントを見に行くとデフォルトはユニバーサルレンダリングというレンダリング方法らしい。

ユニバーサルレンダリングについて調べてみると、

また、ページが事前に生成されている場合は、キャッシュから完全にレンダリングされたHTMLページを返すこともあります。クライアントサイドレンダリングとは異なり、ユーザーはアプリケーションの初期コンテンツ全体を即座に取得できます。

とのこと。

そうすると、

SSGじゃないんじゃと思い返して、試しにプルリクを出し、観察しに行くとプルリクが更新されておらず、さらに混乱する。しばらく経ち再訪すると更新されていて大混乱したうえで、しっかりコードを見に行くことにした。

ここで即座に反映されなかったことが腹落ちした。

それでこのキャッシュに関してはisrのことを言っているっぽい。

調べてみるとnuxt.config.tsに

  $production: {
    routeRules: {
      '/': { isr: 60 * 5 },
      '/api/contributions': { isr: 60 * 5 },
      '/feed.xml': { isr: 60 * 5 },
    },
  },

という記述があった。

一度生成されると5分間 (60秒 * 5) キャッシュされてssrで生成された静的ページが表示されるようになる。

という仕組みになっていた。

便利なリポジトリは活用しつつ、勉強の一助にもしたいと思った今日この頃でした。

【2025年10月】イベントが盛りだくさんだった

nove-b

10月に読んだ本

図書館本を本格的に読み始めた。

文庫本だけじゃないので持ち運びがつらいときもあるけど、無料で人気作が読める図書館って便利すぎる。

この世の中でえもっとも有益な公共サービスかもしれない。

10月は4冊読んだ。

中でも綿矢りさが圧倒的だった。

最年少芥川賞受賞時からずっと天才のまま。

盛りだくさんの10月

ハロウィンツリーを出した

過去に買ったクリスマスツリーだけど、あまりにも使う頻度が少なすぎたので、ハロウィンツリーなるものにして活用することにした。

ハロウィンに全くなじみないし、どういうイベントかも知らないけど可愛いので良しとする。

幸せを掴みに行く

見ると幸せになれるというドクターイエロー。

引退したということが話題になって久しいが、どうやら引退したのは特定の機体の話であり、一部のドクターイエローはまだ現役らしい。

JR東海のドクターイエロー（T4編成）は、老朽化のため2025年1月に検測走行を終了し、引退しました。JR西日本のドクターイエロー（T5編成）も2027年頃に引退予定です。今後は、営業車両に搭載される検測機能によって後継される予定です

しかもしっかり調べてみるとどうやら走る日時の予測が出ており、それなりに正しそうだった。

それじゃ、会いに行こうということで小田原駅に見に行った。

わざわざ見に行くなんていう物好きいないと思ったら子どもずれの家族がわんさかいて、みんな子どものために頑張っているなって思うと少し幸せになれた。

今度は駅ではなく、走っているドクターイエローを見に行く計画を立てている。

引退までに、子どもがはまっている間にもう何回かは見にいきたい。

七五三のお祝い

3歳なので七五三のお祝いをした。

あいにくの雨だったけど、子どもたちの期限がよかったので良しとする。

男女双子の七五三は何歳の時にやるのか、世の中の男女双子の親に聞いてみたい。

前日に椅子から落ちて時間外の緊急外来に駆け込んだら、ただの怪我ですって言われたのはいい思い出。

アンパンマンミュージアムにも行った

イベント多すぎて記憶が薄れているけど、アンパンマンミュージアムにも行った。

アンパンマンとバイキングに抱きついて楽しそうにしていた。

ハロウィン仕様だったので来年はクリスマスに行きたい。

転職のこと

いったん転職活動はストップすることにした。

転職活動することで、ある程度自分の現在地が分かった気がする。

自信喪失することもあったけど、思っている金額以上のオファーをもらえることもあった。

個人的な話でいうとスキルアップが転職の目的なので、転職することで本当にスキルアップできるかということが重要で、逆に言えば転職しなくてもスキルアップができるのであればそれでもいいと思っている。

いまいちよくわかなくなってきたので、もう少し整理することにする。

OSS活動

スキルアップの話につながるけど、個人開発でオレオレコードを書くより、他人のコードを読んで勉強したいということで積極的にOSSに貢献していこうと思い立った。

今月の貢献は、

https://github.com/atinux/my-pull-requests/pull/20

https://github.com/vscode-reborn-ai/vscode-reborn-ai/pull/176

https://github.com/dargmuesli/nuxt-cookie-control/pull/300

https://github.com/react-chatbotify/react-chatbotify/pull/362

上記4点で、週1件は貢献したいと思っているので、まあそれなりの成績に落ち着いた。

これは引き続き続けていきたい。

ローカルのvite-plugin-pwaを、手元のReact Router v7プロジェクトで直接利用する方法

nove-b

React Router v7でvite-plugin-pwaで使えないという情報をもらった。

確認したところ確かに使えないことが確認できたので、React Router v7で作成したウェブアプリをPWA(インストールに対応のみ)にするに急いで「(インストールに対応のみ)」という文言を追加した。

どうやらインストールのみ対応であれば問題はなさそうだった。

せっかくなのでなぜうまく使いないのか確かめてみようと思い立った。

npmでインストールしても色々試せないので、ローカルに置いたvite-plugin-pwaで試してみることにした。

該当するissueは、こちら。

Feature Request: Vite PWA Support for React Router 7 #809

pnpmのワークスペース(workspace) 機能を使うのが最も簡単

ってgeminiが言っていたので、それを手掛かりにする。

そもそもpnpmのワークスペースとは、

pnpmのワークスペースは、複数のパッケージ（プロジェクト）を単一のリポジトリで管理するための機能です。これは、一般的に「モノレポ（Monorepo）」と呼ばれる開発スタイルを実現するのに役立ちます

で、これもgeminiが言っていた。

vite-pwa-pluginは複数のフレームワークに対応しているのが特徴で、そのすべてのプロジェクトpnpmのワークスペースを用い1つのリポジトリで管理しているとのことらしい。

モノレポってフロントとバックエンドを１つのリポジトリで管理するためのものって決めつけていたので、こういう使い方もできるのかと驚いた。

本題に戻しpnpm-workspace.yamlというファイルを見に行くと、

packages:
  - docs/
  - examples/*
onlyBuiltDependencies:
  - sharp

と書かれている。

で、examplesを見に行くと、

examples\vue-router
examples\react-router
examples\solid-router

とか対応しているプロジェクトがあるのでここに各プロジェクトを作成すればいいっぽい。

プロジェクトを作成してみる

npx create-react-router@latest react-router-v7

↓新しくgitを初期化するか聞かれるけど、すでにgit管理されたプロジェクトの中にいるのでNoを選択する。

Initialize a new git repository?
         No

↓npmを使うか聞かれるけどvite-plugin-pwaはpnpmを使用しているのでNoを選択する。

Install dependencies with npm?
         No

これでインストールが完了した。

examples以下にプロジェクトが作成されていることを確認できる。

examples\react-router-v7

vite-plugin-pwaをインストールし、自分自身を見るように修正する

ここでいう自分自身はcloneしたvite-plugin-pwaのこと。

まずは作成したプロジェクトにvite-plugin-pwaをインストールする。

pnpm add vite-plugin-pwa -D

インストールすると最新のvite-plugin-pwaがインストールされるので、自分自身を見るようにする。

  "devDependencies": {
    "vite-plugin-pwa": "^1.1.0",
  }

↓ 修正

  "devDependencies": {
    "vite-plugin-pwa": "workspace:*",
  }

vite-plugin-pwaのルートディレクトリに戻り

pnpm install

で依存関係を修正する。

vite-plugin-pwa": "workspace:*", と指定することで、examples/react-router-v7 プロジェクトは、npmで公開されているバージョンの vite-plugin-pwaをインストールする代わりに、ローカルのルートディレクトリにあるvite-plugin-pwaのソースコードを直接参照するようになる。

ルートディレクトリにある`vite-plugin-pwa`のソースコードが参照されているか確認する

import { VitePWA } from "../../src";

export default defineConfig({
  plugins: [
    tailwindcss(),
    reactRouter(),
    tsconfigPaths(),
    VitePWA({
      registerType: "autoUpdate",
    }),
  ],
});

まずはvite-plugin-pwaを呼び出し、

pnpm --filter react-router-v7 dev

でreact-router-v7のアプリを起動する。

src\index.ts下記のように修正し、

export function VitePWA(userOptions: Partial<VitePWAOptions> = {}): Plugin[] {
  // eslint-disable-next-line no-console
  console.log('LOCAL vite-plugin-pwa 読み込まれていますか?!');

まずはプラグインのビルドを実行し、

pnpm build

Exampleアプリを起動する。

 pnpm --filter react-router-v7 dev

> react-router-v7@ dev C:\Users\username\dev\vite-plugin-pwa\examples\react-router-v7
> react-router dev

LOCAL vite-plugin-pwa 読み込まれていますか?!

追記したログが出ていることが確認できたので目的は達成できた。

サーバーが起動しない

コンソールが出ているところまでは確認できたけど、開発サーバーが立ち上がらない。

React Router v7で使えないことは聞いているけど、VitePWA()を追加しただけでは落ちないはず。

つまり別の問題が起きているっぽい。

~~エラーをgeminiに読んでもらうとreact-router-domとreact-routerのバージョンの不整合が原因だったらしい。~~

"react-router": "^7.9.2"では "react-router-dom": "^7.9.2"を使用する必要があるけれど、指定がなかったのでpnpmがワークスペース内の別の場所で使われている古いバージョンが参照されていた。

~~なので、明示的に"react-router-dom": "^7.9.2"を追加し解決できた。~~

~~svelte-kitのエラーが出ているけど、今回は問題ないので、ひとまずこれでスタートラインに立てた。~~

⚠️ vite.config.tsのtsconfigPaths()の引数がなかったことが原因だった。

tsconfigPaths({ projects: ['./tsconfig.json'] }で解決した。

あとはいろいろ触ってどこまで使えて、どこで使えなくなるかを試していきたい。

【2025年11月】たぶん今が一番かわいい

nove-b

11月に読んだ本

今月は７冊と結構読めた。

寒くなって湯船に浸かるようになり、読書時間が増えたことが読書量につながった。

これだけ読んで無料って図書館が優秀すぎる。

予約と返却期間を考えるのは面倒くさいけれど、(700 * 7)円、得しているのはでかい。

あとキンドルアンリミッド縛りを辞めたのも読書量が増えた要因かもしれない。

不要なものをハードオフに売った

青春の思い出ギター、もうずいぶん触ってないし、誇り被っていたので思い切って売ることにした。

ついでに他の不用品もいくつか売りに出した。

結果、8万円になった。

できる限り物を持たないようにしたいので、内田百閒の全集も売ろうとしたけどそれは止められた。

別に読んだしいらないんだけど、もう少し置いておけば値上がりするかもしれないので、もう少し大切にしまっておく。

とりあえず、グッドバイ、青春。

青春の管理下にあるぼくだった明日を平気で殺しまくった

木下龍也の短歌を残しておく。

あと青春といえば、最近のradの新曲が刺さった。

久しぶりにradに戻ってきた。

秩父に旅行にいく

ムーミンバレーパーク
- 唐揚げすごい勢いで食べてた
- にょろにょろアイスすごい勢いで食べてた
- 15時に出る予定が18時までいてしまった
- 謎の怪物がいた
秩父
- ホテルのサイトに書いてある住所が間違いで迷子になる
- 貸し切りの家のような感じで奇麗でよかった
- 夜ごはん「ちんばた」に行くと大行列で1時間近く待った
- 寝かしつけとともに寝落ちした
- 朝起きて露天風呂だけ満喫した
- 秩父神社に行く
- 長瀞に行く
- SLパレオエクスプレスに乗る
- 子どもがいなければ経験しなかった経験ができて世界が広がった

やっぱり旅行は楽しいので、また行きたい。

ただ子連れの旅行は準備も大変だし、当日も大変で、歩かないので、次の日腕が筋肉痛になったり、時間のミスが許されなかったりと結構気を遣う。

まあそれでも次はどこ行こうって考えている。

とりあえずディズニー行かないと。

その他

クリスマスツリーをだした。

京王レールランドにも行った。

多摩動物公園とかハグハグとか併設しているので、退屈しない。

京王レールランドだけで言うとコスパもいい。

双子の男の子趣味が明確なのでそっちに寄せた場所に行っちゃうけど、他の男女双子はどうしているのだろうか。

最近の考えることの１つ。

多分今が１番かわいい

最近は遊べるようになって本当にかわいい。

寝る前に帰りたいと思うし、そもそも仕事なんてしてる場合じゃないと思う。

朝も保育園に送らずにそのまま一緒にいたいと思う。

ただ一緒にいると仕事なんて比じゃないレベルで疲れるんだけど...。

最近はパズルとかくれんぼを家でしている。

鬼役してると抱っこしてと言って鬼の服の中に隠れようとするの、最高に馬鹿でかわいい。

パズルに関しては、3歳で80ピースを１人でやってるので、たぶん天才だと思う。

片方は32ピース苦戦しているけど。

マストドンをアップデートした

もともとサービスが提供しているイメージを使用していたので、結構手こずった。

バックアップ
削除
Gitから最新のマストドンをクローン
バックアップから必要になるデータを移管
必要なサービスを諸々アップデート
無事に4.14から5.0にできた

<blockquote class="mastodon-embed" data-embed-url="https://social.nove-b.dev/@nove_b/115503697290682618/embed" style="background: #FCF8FF; border-radius: 8px; border: 1px solid #C9C4DA; margin: 0; max-width: 540px; min-width: 270px; overflow: hidden; padding: 0;"> <a href="https://social.nove-b.dev/@nove_b/115503697290682618" target="_blank" style="align-items: center; color: #1C1A25; display: flex; flex-direction: column; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif; font-size: 14px; justify-content: center; letter-spacing: 0.25px; line-height: 20px; padding: 24px; text-decoration: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 79 75"><path d="M63 45.3v-20c0-4.1-1-7.3-3.2-9.7-2.1-2.4-5-3.7-8.5-3.7-4.1 0-7.2 1.6-9.3 4.7l-2 3.3-2-3.3c-2-3.1-5.1-4.7-9.2-4.7-3.5 0-6.4 1.3-8.6 3.7-2.1 2.4-3.1 5.6-3.1 9.7v20h8V25.9c0-4.1 1.7-6.2 5.2-6.2 3.8 0 5.8 2.5 5.8 7.4V37.7H44V27.1c0-4.9 1.9-7.4 5.8-7.4 3.5 0 5.2 2.1 5.2 6.2V45.3h8ZM74.7 16.6c.6 6 .1 15.7.1 17.3 0 .5-.1 4.8-.1 5.3-.7 11.5-8 16-15.6 17.5-.1 0-.2 0-.3 0-4.9 1-10 1.2-14.9 1.4-1.2 0-2.4 0-3.6 0-4.8 0-9.7-.6-14.4-1.7-.1 0-.1 0-.1 0s-.1 0-.1 0 0 .1 0 .1 0 0 0 0c.1 1.6.4 3.1 1 4.5.6 1.7 2.9 5.7 11.4 5.7 5 0 9.9-.6 14.8-1.7 0 0 0 0 0 0 .1 0 .1 0 .1 0 0 .1 0 .1 0 .1.1 0 .1 0 .1.1v5.6s0 .1-.1.1c0 0 0 0 0 .1-1.6 1.1-3.7 1.7-5.6 2.3-.8.3-1.6.5-2.4.7-7.5 1.7-15.4 1.3-22.7-1.2-6.8-2.4-13.8-8.2-15.5-15.2-.9-3.8-1.6-7.6-1.9-11.5-.6-5.8-.6-11.7-.8-17.5C3.9 24.5 4 20 4.9 16 6.7 7.9 14.1 2.2 22.3 1c1.4-.2 4.1-1 16.5-1h.1C51.4 0 56.7.8 58.1 1c8.4 1.2 15.5 7.5 16.6 15.6Z" fill="currentColor"/></svg> <div style="color: #787588; margin-top: 16px;">Post by @nove_b@social.nove-b.dev</div> <div style="font-weight: 500;">View on Mastodon</div> </a> </blockquote> <script data-allowed-prefixes="https://social.nove-b.dev/" async src="https://social.nove-b.dev/embed.js"></script>

他サーバーのアカウント画像とかが取れないバグがまだ残っているので、どこかで時間を取って直したい。

たぶん、/etc/nginx/sites-available/mastodonをがっつり書き得たことが悪さしている。

引用機能を使えるようになったとのことでアップデートしたけど、メインで使っているElkがまだ対応してないのでそもそも使えなった。

貢献してもいいんだけど、ここら辺はコアメンバーがやるのか？よく運用方法がわからない。

FitBitの睡眠レポートを作成した

毎日、睡眠のログ取っているんだけど、いまいち活用方法ないのでAIにレポート化してもらい毎朝投げてもらうことにした。

数字で見るよりわかりやすくなったけどアドバイスが、カフェインを控えましょうの一辺倒で何の意味もない。

プロントが悪いんだろうけど、調整するモチベーションまではない。

fitbit-sleep-report、プルリクお待ちしております。

<blockquote class="mastodon-embed" data-embed-url="https://social.nove-b.dev/@nove_b/115545653662035156/embed" style="background: #FCF8FF; border-radius: 8px; border: 1px solid #C9C4DA; margin: 0; max-width: 540px; min-width: 270px; overflow: hidden; padding: 0;"> <a href="https://social.nove-b.dev/@nove_b/115545653662035156" target="_blank" style="align-items: center; color: #1C1A25; display: flex; flex-direction: column; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif; font-size: 14px; justify-content: center; letter-spacing: 0.25px; line-height: 20px; padding: 24px; text-decoration: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 79 75"><path d="M63 45.3v-20c0-4.1-1-7.3-3.2-9.7-2.1-2.4-5-3.7-8.5-3.7-4.1 0-7.2 1.6-9.3 4.7l-2 3.3-2-3.3c-2-3.1-5.1-4.7-9.2-4.7-3.5 0-6.4 1.3-8.6 3.7-2.1 2.4-3.1 5.6-3.1 9.7v20h8V25.9c0-4.1 1.7-6.2 5.2-6.2 3.8 0 5.8 2.5 5.8 7.4V37.7H44V27.1c0-4.9 1.9-7.4 5.8-7.4 3.5 0 5.2 2.1 5.2 6.2V45.3h8ZM74.7 16.6c.6 6 .1 15.7.1 17.3 0 .5-.1 4.8-.1 5.3-.7 11.5-8 16-15.6 17.5-.1 0-.2 0-.3 0-4.9 1-10 1.2-14.9 1.4-1.2 0-2.4 0-3.6 0-4.8 0-9.7-.6-14.4-1.7-.1 0-.1 0-.1 0s-.1 0-.1 0 0 .1 0 .1 0 0 0 0c.1 1.6.4 3.1 1 4.5.6 1.7 2.9 5.7 11.4 5.7 5 0 9.9-.6 14.8-1.7 0 0 0 0 0 0 .1 0 .1 0 .1 0 0 .1 0 .1 0 .1.1 0 .1 0 .1.1v5.6s0 .1-.1.1c0 0 0 0 0 .1-1.6 1.1-3.7 1.7-5.6 2.3-.8.3-1.6.5-2.4.7-7.5 1.7-15.4 1.3-22.7-1.2-6.8-2.4-13.8-8.2-15.5-15.2-.9-3.8-1.6-7.6-1.9-11.5-.6-5.8-.6-11.7-.8-17.5C3.9 24.5 4 20 4.9 16 6.7 7.9 14.1 2.2 22.3 1c1.4-.2 4.1-1 16.5-1h.1C51.4 0 56.7.8 58.1 1c8.4 1.2 15.5 7.5 16.6 15.6Z" fill="currentColor"/></svg> <div style="color: #787588; margin-top: 16px;">Post by @nove_b@social.nove-b.dev</div> <div style="font-weight: 500;">View on Mastodon</div> </a> </blockquote> <script data-allowed-prefixes="https://social.nove-b.dev/" async src="https://social.nove-b.dev/embed.js"></script>

vite-pwa-plugin 読んでる

React Router v7を最近よく使うんだけど、vite-pwa-pluginと競合するっぽく、なんでそんなことになるのかコード読んでみているけど、なにもわからない。

ただ書き方のお作法とか学ぶことは多い。

リリースに名前が載るのがうれしい

Releases v0.17.0

Elkのリリースに名前が載った。

だからどうといったことはないんだけど、なんとなくうれしい。

何かあれば引き続き貢献していきたい。

フリーランスって魅力的なのかしら

最近、仕事中に周りを見てるといろいろ考える。

そもそも最近転職の話があった時に結構考えたんだけど、前提として仕事をしたくないという思いが心の奥底にある。

役職がついて周りが帰属意識高い人で囲まれるようになったので、より意識の違いを感じる。

そういえば自己評価する機会があったけど、どの項目にもチェックできなかった。

絶対評価らしいけど、周りに自分より会社に真摯に向き合っている人見ると、なんとなく気後れする。

この根底にあるものはどう払しょくすればいいのか。

案件にのめりこむのは好きだし、ずっと面白い案件に関わりたい。

ただ会社関係のことに関わりたくない。

その点、フリーランスって意外と魅力的なのか？意外と親和性あるのか？

ただ税金関係とかは当然したくない。

まったく生きにくい世の中だ。

生前は無名であった鶏がからあげクンとして蘇る

こんな短歌作れるくらいの才能が欲しかった。

vite pwa pluginでreact router v7がpwaにできない理由を調べてみた

nove-b

過去にreact router v7がvite-pwa-pluginでpwa化できないと言うことを言ってきた。

実際のIssueはFeature Request: Vite PWA Support for React Router 7 #809←こちら。

問題の現象

まず起きている事象としては、

manifestの作成はできているけど、
index.htmlにスクリプトの挿入がされない

pwaの機能が使えないとかそう言う次元ではなく、そもそもvite-pwa-pluginをそのまま使おうとするとpwaにすらならない。

manifestは生成されているのでroot.tsxに

 { rel: "manifest", href: "/manifest.webmanifest" }

を追加すればpwa化はできるが、vite-pwa-pluginの使い方ではない。

実際にコードを動かしてデバックする方法はこちら

原因の調査

まずはなんでindex.htmlでmanifestが読み込まれないかを実際にコードを読んで理解を試みた。

export function VitePWA(userOptions: Partial<VitePWAOptions> = {}): Plugin[] {
  const ctx = createContext(userOptions);
  const api = createAPI(ctx);
  return [
    MainPlugin(ctx, api),
    InfoPlugin(ctx, api),
    BuildPlugin(ctx),
    DevPlugin(ctx),
    AssetsPlugin(ctx),
  ];
}

これがvite-pw-pluginを構成する関数群。

で、コードを読んでいくと開発環境の場合は、DevPlugin(ctx),でscriptを挿入記述らしきものを見つけた。

transformIndexHtml内でtransformIndexHtmlHandlerが呼び出される
transformIndexHtmlHandler内のhtml = injectServiceWorker(html, options, true)が実行される。
headにmanifestが登録される仕組み

つまりこれが発火していない。

結論

つまりどうしようもない気がする。

vite-pwa-pluginの修正を待つのではなく、react-router側の話なのかもしれない。

Angularのライブラリを作成し、GitHub Packagesで共通化、複数のAngularプロジェクトで使用する

nove-b

はじめに

Angularで複数のプロジェクトを作成している。基本的なデザインシステムがあるのでそれを各プロジェクトで使用したいのだが、プロジェクトごとで二元管理をしたくないので、submoduleを使用していたんだけど、運用が面倒なのでGitHub Packagesに移行することにした。

Angularでライブラリを作成しGitHub Packageで公開するメモを書いておく。

Angularライブラリとは

まずそもそそもAngularのLibraryとは、

Angularライブラリは、コンポーネント、サービス、ディレクティブなどの再利用可能なコードをまとめたパッケージです。これらは単独で実行することはできず、Angularアプリケーションにインポートして使用されます。

とのこと。

GitHub Packagesとは

そしてGitHub Packagesとは

GitHub Packagesは、コンテナやその他の依存関係を含むソフトウェアパッケージをホストおよび管理するためのプラットフォームです。ソースコード管理とパッケージ管理を同じGitHub上で一元化できる点が大きな特徴です。

とのこと。

GitHub Packagesの利用シーン

GitHub Packagesの利用シーンとしては、

組織内でのみ共有したい非公開のライブラリやコンポーネントを、npmやDocker Hubのような外部サービスではなく、GitHub内で安全にホストしたい場合。

ちなみにnpmパッケージも非公開で公開できるらしい。

ただ有料らしいので、制限付きとはいえ無料で非公開設定ができるという点では、GitHub Packagesの方が有用そうだった。

GitHub Packagesの制限

制限は

ストレージ容量:500 MB
データ転送量:1 GB/月 (月間)

とのこと。

利用枠的にUIコンポーネントを共有する分にはなんの問題もない気がする。

Angularライブラリの作成

まずはAngularのUIライブラリーを作成する。

user@nameMacBook-Air filename % ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 19.2.19
Node: 22.7.0
Package Manager: npm 10.8.2
OS: darwin arm64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1902.19 (cli-only)
@angular-devkit/core         19.2.19 (cli-only)
@angular-devkit/schematics   19.2.19 (cli-only)
@schematics/angular          19.2.19 (cli-only)

バージョンとか前提はこんな感じだった。

プロジェクトの作成

ng new angular-ui-component --no-create-application

このコマンドでアプリケーション自体を作成せずにAngularの箱を作成する。

ライブラリの生成

ng generate library ui-library --prefix=ui

次にライブラリを作成する。

--prefix=ui

を書くことでui-buttonのように接頭辞をつけることができる。

このコマンドを実行することで、projects/ui-libraryフォルダができる。

このsrc/lib以下にコンポーネントを作成していく。

コンポーネントの作成

例えばButtonコンポーネントを作成するのであれば、

ng g component button
CREATE projects/ui-library/src/button/button.component.css (0 bytes)
CREATE projects/ui-library/src/button/button.component.html (21 bytes)
CREATE projects/ui-library/src/button/button.component.spec.ts (592 bytes)
CREATE projects/ui-library/src/button/button.component.ts (213 bytes)

でコンポーネントを作成する。

public-api.tsへの登録

作成できたら外部に公開する要素の定義をするために、public-api.tsに登録する。

export * from "./lib/button/button.component";

GitHub Packagesへの公開準備

これでライブラリの準備はできたので次にGitHub Packagesを使用する準備をする。

package.jsonの修正

projects/ui-library/package.jsonを修正する。

{
  "name": "@nove-b/angular-ui-component",
  "version": "0.0.1",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  },
}

パッケージ名にGithubのアカウント名を入れるようにする。

Personal Access Tokenの発行

次にPersonal Access Token (Classic)を発行する。

この時に、スコープ選択で write:packages (パッケージのアップロード用) と read:packages (ダウンロード用) にチェックを入れて生成する。

.npmrcの設定

Tokenの発行ができたら公開をするために、.npmrcをルートに作成する。

秘匿情報を入れるのに.ignoreする。

npm login --scope=@nove-b/angular-ui-component --registry=https://npm.pkg.github.com
# Username: nove-b
# Password: ghp_xxxxxxxxxx(Personal Access Token (Classic))

ライブラリのビルドと公開

これで公開の準備が整ったので、ライブラリをビルドする。

ライブラリのビルド

angular-ui-component % ng build ui-library

これでbuildファイルができるので、公開する。

ライブラリの公開

cd dist/ui-library
npm publish

なぜかうまくいかなかったのでコマンドから試みる。

user@NamenoMacBook-Air ui-library % npm login --scope=@nove-b --registry=https://npm.pkg.github.com
npm notice Log in on https://npm.pkg.github.com/
Username: nove-b
Password: Personal Access Token (Classic)

Logged in to scope @nove-b on https://npm.pkg.github.com/.
user@NamenoMacBook-Air ui-library %

これでログインできたので公開する。

npm publish

...

npm notice Publishing to https://npm.pkg.github.com/ with tag latest and default access
+ @nove-b/angular-ui-component@0.0.1

無事に公開できた。

angular-ui-component

ライブラリの使用

次にこれを使用してみる。

まずはまたAngularのアプリケーションを作成するけど、そこら辺は割愛する。

で、立ち上げた。

これにさっきのライブラリを呼び出すようにする。

使用するアプリケーションでの.npmrcの設定

まずはルートに.npmrc を作成する。

@nove-b:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=ghp_xxxxxxxxxx(Personal Access Token (Classic))

ライブラリのインストール

次にインストールする。

npm install @nove-b/angular-ui-component@0.0.1

コンポーネントのインポートと使用

インストールが完了したら使用するコンポーネントファイルにインポートする。

import { ButtonComponent } from '@nove-b/angular-ui-component';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, ButtonComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

<div style="margin-top: 20px; margin-bottom: 20px;">
  <ui-button [label]="'UI コンポーネントボタン'"></ui-button>
</div>

これ画面で確認できた。

まとめ・考察

組織の場合はTokenとかどういう運用になるんだろう。今は個人でやっているので、個人のTokenを使っているけれど、みたいな疑問もあるけれど、社内システムのUIコンポーネントとかを作成しておき、cssを上書きできるようにしておけばすごい汎用性高そうだ。

まあ、社内システムにAngularを使うかというと微妙なところなので、せめてvue、reactでAngularライブラリのような仕組みがあればいいかもしれない。

あるいはvanilla jsにするかというところか。

せめてvue、reactでAngularライブラリのような仕組みがあればいいかもしれない。

組み込みではないっぽい。組み合わせできるっぽいので今度挑戦してみたい。

2025年を振り返ってみる

nove-b

また年が変わった。<br /> 毎年変わらず、恒例の1年振り返りをすることにする。

家のこと

保育園のルーティン

家庭では、保育園の通園が始まり、時間のサイクルがまた変わった。<br /> 5時半に起き、自分の準備をし、子どもを起こし、準備をさせて保育園に連れていく。<br /> 泣いている姿に後ろ髪引かれつつ保育園を後にし、残っている家事を終えたら会社に向かう。

っていうルーティンができた。

結構辛かったけど、流石に慣れてきた。

たぶん子どもたちも慣れてきたおかげで少しづつ楽になってきた。

いつかこちらを見ずに保育園に走っていくことを考えると、いま離れる時に泣いてくれるのも貴重なのかもしれない。

自分に時間が、余裕がなくなると、その貴重な時間を無駄にしちゃうので、<br /> 子どもがいるときは無駄にしないで向き合いたいなあって思っている。

お出かけ

子どもたちの好きが増えて色々なところに行くことが楽しくなってきた。

印象に残っているものは、

ディズニーランドと星野リゾート
- <blockquote class="mastodon-embed" data-embed-url="https://social.nove-b.dev/@nove_b/113860713877036686/embed" style="background: #FCF8FF; border-radius: 8px; border: 1px solid #C9C4DA; margin: 0; max-width: 540px; min-width: 270px; overflow: hidden; padding: 0;"> <a href="https://social.nove-b.dev/@nove_b/113860713877036686" target="_blank" style="align-items: center; color: #1C1A25; display: flex; flex-direction: column; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif; font-size: 14px; justify-content: center; letter-spacing: 0.25px; line-height: 20px; padding: 24px; text-decoration: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 79 75"><path d="M63 45.3v-20c0-4.1-1-7.3-3.2-9.7-2.1-2.4-5-3.7-8.5-3.7-4.1 0-7.2 1.6-9.3 4.7l-2 3.3-2-3.3c-2-3.1-5.1-4.7-9.2-4.7-3.5 0-6.4 1.3-8.6 3.7-2.1 2.4-3.1 5.6-3.1 9.7v20h8V25.9c0-4.1 1.7-6.2 5.2-6.2 3.8 0 5.8 2.5 5.8 7.4V37.7H44V27.1c0-4.9 1.9-7.4 5.8-7.4 3.5 0 5.2 2.1 5.2 6.2V45.3h8ZM74.7 16.6c.6 6 .1 15.7.1 17.3 0 .5-.1 4.8-.1 5.3-.7 11.5-8 16-15.6 17.5-.1 0-.2 0-.3 0-4.9 1-10 1.2-14.9 1.4-1.2 0-2.4 0-3.6 0-4.8 0-9.7-.6-14.4-1.7-.1 0-.1 0-.1 0s-.1 0-.1 0 0 .1 0 .1 0 0 0 0c.1 1.6.4 3.1 1 4.5.6 1.7 2.9 5.7 11.4 5.7 5 0 9.9-.6 14.8-1.7 0 0 0 0 0 0 .1 0 .1 0 .1 0 0 .1 0 .1 0 .1.1 0 .1 0 .1.1v5.6s0 .1-.1.1c0 0 0 0 0 .1-1.6 1.1-3.7 1.7-5.6 2.3-.8.3-1.6.5-2.4.7-7.5 1.7-15.4 1.3-22.7-1.2-6.8-2.4-13.8-8.2-15.5-15.2-.9-3.8-1.6-7.6-1.9-11.5-.6-5.8-.6-11.7-.8-17.5C3.9 24.5 4 20 4.9 16 6.7 7.9 14.1 2.2 22.3 1c1.4-.2 4.1-1 16.5-1h.1C51.4 0 56.7.8 58.1 1c8.4 1.2 15.5 7.5 16.6 15.6Z" fill="currentColor"/></svg> <div style="color: #787588; margin-top: 16px;">Post by @nove_b@social.nove-b.dev</div> <div style="font-weight: 500;">View on Mastodon</div> </a> </blockquote> <script data-allowed-prefixes="https://social.nove-b.dev/" async src="https://social.nove-b.dev/embed.js"></script>
プラレール博
ディズニーランドに日帰り
大宮鉄道博物館
- <blockquote class="mastodon-embed" data-embed-url="https://social.nove-b.dev/@nove_b/114922563075319673/embed" style="background: #FCF8FF; border-radius: 8px; border: 1px solid #C9C4DA; margin: 0; max-width: 540px; min-width: 270px; overflow: hidden; padding: 0;"> <a href="https://social.nove-b.dev/@nove_b/114922563075319673" target="_blank" style="align-items: center; color: #1C1A25; display: flex; flex-direction: column; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif; font-size: 14px; justify-content: center; letter-spacing: 0.25px; line-height: 20px; padding: 24px; text-decoration: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 79 75"><path d="M63 45.3v-20c0-4.1-1-7.3-3.2-9.7-2.1-2.4-5-3.7-8.5-3.7-4.1 0-7.2 1.6-9.3 4.7l-2 3.3-2-3.3c-2-3.1-5.1-4.7-9.2-4.7-3.5 0-6.4 1.3-8.6 3.7-2.1 2.4-3.1 5.6-3.1 9.7v20h8V25.9c0-4.1 1.7-6.2 5.2-6.2 3.8 0 5.8 2.5 5.8 7.4V37.7H44V27.1c0-4.9 1.9-7.4 5.8-7.4 3.5 0 5.2 2.1 5.2 6.2V45.3h8ZM74.7 16.6c.6 6 .1 15.7.1 17.3 0 .5-.1 4.8-.1 5.3-.7 11.5-8 16-15.6 17.5-.1 0-.2 0-.3 0-4.9 1-10 1.2-14.9 1.4-1.2 0-2.4 0-3.6 0-4.8 0-9.7-.6-14.4-1.7-.1 0-.1 0-.1 0s-.1 0-.1 0 0 .1 0 .1 0 0 0 0c.1 1.6.4 3.1 1 4.5.6 1.7 2.9 5.7 11.4 5.7 5 0 9.9-.6 14.8-1.7 0 0 0 0 0 0 .1 0 .1 0 .1 0 0 .1 0 .1 0 .1.1 0 .1 0 .1.1v5.6s0 .1-.1.1c0 0 0 0 0 .1-1.6 1.1-3.7 1.7-5.6 2.3-.8.3-1.6.5-2.4.7-7.5 1.7-15.4 1.3-22.7-1.2-6.8-2.4-13.8-8.2-15.5-15.2-.9-3.8-1.6-7.6-1.9-11.5-.6-5.8-.6-11.7-.8-17.5C3.9 24.5 4 20 4.9 16 6.7 7.9 14.1 2.2 22.3 1c1.4-.2 4.1-1 16.5-1h.1C51.4 0 56.7.8 58.1 1c8.4 1.2 15.5 7.5 16.6 15.6Z" fill="currentColor"/></svg> <div style="color: #787588; margin-top: 16px;">Post by @nove_b@social.nove-b.dev</div> <div style="font-weight: 500;">View on Mastodon</div> </a> </blockquote> <script data-allowed-prefixes="https://social.nove-b.dev/" async src="https://social.nove-b.dev/embed.js"></script>
軽井沢に2泊3日
- <blockquote class="mastodon-embed" data-embed-url="https://social.nove-b.dev/@nove_b/114953815061236363/embed" style="background: #FCF8FF; border-radius: 8px; border: 1px solid #C9C4DA; margin: 0; max-width: 540px; min-width: 270px; overflow: hidden; padding: 0;"> <a href="https://social.nove-b.dev/@nove_b/114953815061236363" target="_blank" style="align-items: center; color: #1C1A25; display: flex; flex-direction: column; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif; font-size: 14px; justify-content: center; letter-spacing: 0.25px; line-height: 20px; padding: 24px; text-decoration: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 79 75"><path d="M63 45.3v-20c0-4.1-1-7.3-3.2-9.7-2.1-2.4-5-3.7-8.5-3.7-4.1 0-7.2 1.6-9.3 4.7l-2 3.3-2-3.3c-2-3.1-5.1-4.7-9.2-4.7-3.5 0-6.4 1.3-8.6 3.7-2.1 2.4-3.1 5.6-3.1 9.7v20h8V25.9c0-4.1 1.7-6.2 5.2-6.2 3.8 0 5.8 2.5 5.8 7.4V37.7H44V27.1c0-4.9 1.9-7.4 5.8-7.4 3.5 0 5.2 2.1 5.2 6.2V45.3h8ZM74.7 16.6c.6 6 .1 15.7.1 17.3 0 .5-.1 4.8-.1 5.3-.7 11.5-8 16-15.6 17.5-.1 0-.2 0-.3 0-4.9 1-10 1.2-14.9 1.4-1.2 0-2.4 0-3.6 0-4.8 0-9.7-.6-14.4-1.7-.1 0-.1 0-.1 0s-.1 0-.1 0 0 .1 0 .1 0 0 0 0c.1 1.6.4 3.1 1 4.5.6 1.7 2.9 5.7 11.4 5.7 5 0 9.9-.6 14.8-1.7 0 0 0 0 0 0 .1 0 .1 0 .1 0 0 .1 0 .1 0 .1.1 0 .1 0 .1.1v5.6s0 .1-.1.1c0 0 0 0 0 .1-1.6 1.1-3.7 1.7-5.6 2.3-.8.3-1.6.5-2.4.7-7.5 1.7-15.4 1.3-22.7-1.2-6.8-2.4-13.8-8.2-15.5-15.2-.9-3.8-1.6-7.6-1.9-11.5-.6-5.8-.6-11.7-.8-17.5C3.9 24.5 4 20 4.9 16 6.7 7.9 14.1 2.2 22.3 1c1.4-.2 4.1-1 16.5-1h.1C51.4 0 56.7.8 58.1 1c8.4 1.2 15.5 7.5 16.6 15.6Z" fill="currentColor"/></svg> <div style="color: #787588; margin-top: 16px;">Post by @nove_b@social.nove-b.dev</div> <div style="font-weight: 500;">View on Mastodon</div> </a> </blockquote> <script data-allowed-prefixes="https://social.nove-b.dev/" async src="https://social.nove-b.dev/embed.js"></script>
サンリオピューロランド
おかあさんといっしょスペシャルステージ
七五三
- <blockquote class="mastodon-embed" data-embed-url="https://social.nove-b.dev/@nove_b/115037347955081967/embed" style="background: #FCF8FF; border-radius: 8px; border: 1px solid #C9C4DA; margin: 0; max-width: 540px; min-width: 270px; overflow: hidden; padding: 0;"> <a href="https://social.nove-b.dev/@nove_b/115037347955081967" target="_blank" style="align-items: center; color: #1C1A25; display: flex; flex-direction: column; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif; font-size: 14px; justify-content: center; letter-spacing: 0.25px; line-height: 20px; padding: 24px; text-decoration: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 79 75"><path d="M63 45.3v-20c0-4.1-1-7.3-3.2-9.7-2.1-2.4-5-3.7-8.5-3.7-4.1 0-7.2 1.6-9.3 4.7l-2 3.3-2-3.3c-2-3.1-5.1-4.7-9.2-4.7-3.5 0-6.4 1.3-8.6 3.7-2.1 2.4-3.1 5.6-3.1 9.7v20h8V25.9c0-4.1 1.7-6.2 5.2-6.2 3.8 0 5.8 2.5 5.8 7.4V37.7H44V27.1c0-4.9 1.9-7.4 5.8-7.4 3.5 0 5.2 2.1 5.2 6.2V45.3h8ZM74.7 16.6c.6 6 .1 15.7.1 17.3 0 .5-.1 4.8-.1 5.3-.7 11.5-8 16-15.6 17.5-.1 0-.2 0-.3 0-4.9 1-10 1.2-14.9 1.4-1.2 0-2.4 0-3.6 0-4.8 0-9.7-.6-14.4-1.7-.1 0-.1 0-.1 0s-.1 0-.1 0 0 .1 0 .1 0 0 0 0c.1 1.6.4 3.1 1 4.5.6 1.7 2.9 5.7 11.4 5.7 5 0 9.9-.6 14.8-1.7 0 0 0 0 0 0 .1 0 .1 0 .1 0 0 .1 0 .1 0 .1.1 0 .1 0 .1.1v5.6s0 .1-.1.1c0 0 0 0 0 .1-1.6 1.1-3.7 1.7-5.6 2.3-.8.3-1.6.5-2.4.7-7.5 1.7-15.4 1.3-22.7-1.2-6.8-2.4-13.8-8.2-15.5-15.2-.9-3.8-1.6-7.6-1.9-11.5-.6-5.8-.6-11.7-.8-17.5C3.9 24.5 4 20 4.9 16 6.7 7.9 14.1 2.2 22.3 1c1.4-.2 4.1-1 16.5-1h.1C51.4 0 56.7.8 58.1 1c8.4 1.2 15.5 7.5 16.6 15.6Z" fill="currentColor"/></svg> <div style="color: #787588; margin-top: 16px;">Post by @nove_b@social.nove-b.dev</div> <div style="font-weight: 500;">View on Mastodon</div> </a> </blockquote> <script data-allowed-prefixes="https://social.nove-b.dev/" async src="https://social.nove-b.dev/embed.js"></script>
アンパンマンミュージック
秩父に1泊2日
- <blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:2atly2y5kfyjcj5zap6pv4wd/app.bsky.feed.post/3m6chgh2tgw2k" data-bluesky-cid="bafyreifpwgegvy4zzyov24v5qw6jiyhnujitxnnbsv2e4zbmsgx72urnzm" data-bluesky-embed-color-mode="dark"><p lang="">子どもが生まれて旅行の世界も広がった。<br><br><a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3m6chgh2tgw2k?ref_src=embed">[image or embed]</a></p>— nove-b (<a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd?ref_src=embed">@nove-b.dev</a>) <a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3m6chgh2tgw2k?ref_src=embed">2025年11月23日 22:51</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

七五三

そうだった、七五三をやった。

男女双子なのでいつやるかという話があったが、とりあえず３歳はやることにした。

前撮りは散々で被布を脱ぎ捨て脱走しカメラマンを困らせたが、そこは流石のプロのカメラマンで上手に撮ってくれた。

保育園入園で完全に生活の主軸が子どもに移った音がした。大人はどこかで人生を子どもに譲るタイミングが来ると思うんだけど、その１つのタイミングが今なのかもしれない。ただそうは思いつつ、春一番に吹かれても自分の人生にへばりついている自分がいる。^1

子ども中心の生活

って今年は悩むこともあったけど、いまはもう子ども中心でいいやって思うようになった。

無条件に子どもは優遇されるべきだし、中心にいるべきだって、自分を諦めるほどに可愛くて仕方ない。

今年もこれから一緒に平和で健康で可愛くいてほしいと祈る。

愛は祈りだ。僕は祈る。僕の好きな人たちに皆そろって幸せになってほしい。それぞれの願いを叶えてほしい。温かい場所で、あるいは涼しい場所で、とにかく心地よい場所で、それぞれの好きな人たちに囲まれて楽しく暮らしてほしい。最大の幸福が空から皆に降り注ぐといい。^2

仕事のこと

子どもたちの健やかな成長を願うには、仕事を切り離すことができない。

転職活動のきっかけ

妻とよく話すのは小学校に入った時、子どもが家に帰ってた時に誰かが家にいてあげたい。

そのためにはどちらかが仕事を辞める、あるいは量を減らす必要がある。

で、たとえば１馬力で生きていくとなると結構稼がなくてはいけないのに対し、今はその水準に達していない。

そのことを考え、今年はぬるっと転職活動をしてみた。

転職活動の結果

結果、2/4で落ち着いた。

２社のうち、１社（A社）はこちらの提示した無謀な給料をそのままオファーしてくれ、もう１社（B社）はそこから50万ダウンでオファーをくれた。

思ったより上手くいって自信がついた一方で働き方を考えるきっかけになった。

働き方の考え方

どちらもリモート可能だったが、週2日は出社が推奨され、どちらかと言えば出社してほしい匂いを感じた。

個人的には出社することはやぶさかではないというより、そっちの方がパフォーマンスが上がると思っていたので、気にしていなかったけど、内定を保留し考えている時、たまたま電車で都内に出たがあまりにも辛かった。

電車も辛いし、歩けば人に当たる人の多さも辛い。

遊びに行ったけど帰る時にはぐったりして、これは働くどころの話じゃないというふうに思い直した。

そう考えると、フルリモートがよく、ただわがままだけど、家では集中できないので自分で指定した場所で仕事ができる環境がベストという風に落ち着いた。

そしてこれは譲れない条件かもしれない。

今年もゆるりと転職活動は続けるけど、そこをブレないように進めていこうと思った。

そういうわけでまだまだ現在の職場でお世話になる。

現在の職場と今後の展望

ただプロフェッショナルになるには、環境も整えないといけない。

今の職場でプロフェッショナルになれるかというとそれは違う。

人が少なく、いろんな仕事に触れる環境ではあるけど、レベルの高い仕事にチャレンジできるわけでもなければ、もちろん尊敬できる人はいるけど、かといってものすごく強いエンジニアがいるわけでない。

なので一流に触れられるかと言えば、全く触れられない。

今年はそこを改善していこうと思っている。

具体的には去年始めたoss活動に引き続き取り組み、自身のブランディングをしっかりと固めていきたい。

時間ないのは事実だけど、言い訳にせず上手くやっていきたい。

時間とか、若さとか、体力を使わずに、上手く余裕を持って一流に近づきたい。

まとめ

2025〜2026に向けまとめると、

子どもとの時間をしっかり取りたい
フルリモートの仕事という軸を持ちゆるく転職活動する
引き続きossに力を入れていく

【2025年12月】12月は一瞬で過ぎ去る

nove-b

12月に読んだ本

7冊だった。なんか社会人になり、起承転結がはっきりしていない本を読めなくなった気がする。空想の中でくらい、奇想天外な展開を求めているのかもしれない。

いい距離間の友達が主人公の本が多かった。

現実でも年末ということで食事に誘われることが多く、なんか色々考えた。友達は大切にした方がいいって考えながら断った。

ウィルス性じゃない胃腸炎

双子の片方がウィルス性じゃない胃腸炎になった。ウィルス性じゃない胃腸炎ってストレスとか疲れからくるらしく、1年の疲れが出たのかもしれない。保育園に頑張って通って偉かった。

しかし登園時いつになったら泣かなくなるんだろう。

泣く癖に帰りは帰りたがらないらしい。

ドクターイエロー

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:2atly2y5kfyjcj5zap6pv4wd/app.bsky.feed.post/3m7elwsmtok2k" data-bluesky-cid="bafyreiah3ec5ccnnygirn47ela6teygsev5pm6yyhpx6ctaczeh2o2ar3y" data-bluesky-embed-color-mode="dark"><p lang="">ドクターイエロー見に行ってきた。石拾ってるほうが楽しそうだった。<br><br><a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3m7elwsmtok2k?ref_src=embed">[image or embed]</a></p>— nove-b (<a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd?ref_src=embed">@nove-b.dev</a>) <a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3m7elwsmtok2k?ref_src=embed">2025年12月7日 12:42</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

2回目のドクターイエローを見に行った。前回は小田原駅に入ってくるのを見たので、次は走っているのを見せたいと思い、近くで見られる場所を探して見に行った。たぶん、子どもたちはドクターイエローがそろそろ見納めで見れることが珍しいということを知らない。それでも機会は与えたいと思うあたり、自分でもしっかり親をやっていると思う。

年末は

公園
鎌倉
公園
公園

で、終わる。

公園に行かない時間は、追い込みの大掃除、そして夜は妻と桃鉄に興じる。

仕事がないと本当に平和な日々を送れる。

旅行に行きたい

1月にはディズニーに行く予定を立ててる。

で、その次は大井川鉄道を見に行こうかって話している。

子どもの興味が変わるたびに旅行先がどんどん出てきて、わりと充実している。

Macにした

armのサーフェスでandroid studioが使えないという事実を知り、Macを買うかって思っていたところ、会社のMacに空きがでたので所有権を得ることができた。Macのキーボード打ちにくいけど、わりかし満足している。環境構築が楽になったので、それだけで満足。

操作性というかOSレベルでWindowsとそれほど変わった気はしない。

ちなみにサーフェスのほうがかっこいいと思っている。

vite-pwa-pluginのコードを読んでいた

一部実装でうまくいかない箇所があったので、コードを読んで原因を追究していた。解決はできなさそうだったけど、原因の理解はできた。AIによって0～１が楽になり、個人開発に魅力がなくなってきて、複雑で大規模なコードのバグを修正する方がやりがいを感じるようになってきた。

12月はこれくらい、いつも早く終わる。

【2025年01月】PixelfedへのPRと、Astroで作るレビューサイトと遊園地

nove-b

1月に読んだ本

読んだ本は埋め込んでいるhttps://books.nove-b.dev/にまとめている。

今月は上田岳弘に出会えたことが大きかった。

こんなに面白い作家を知らなかったとは。

今年の目標は破れたり

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:2atly2y5kfyjcj5zap6pv4wd/app.bsky.feed.post/3mbdoajt2rc22" data-bluesky-cid="bafyreibrhw5jzdmrcxllqaieiakr32qeudsaqfzicsan47rek6gnukaqme" data-bluesky-embed-color-mode="system"><p lang="ja">✨️2026年の目標

・毎日、日報を書く・毎週、ossに触れる・毎月、3記事書く・シール帳をやり遂げる</p>— nove-b (<a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd?ref_src=embed">@nove-b.dev</a>) <a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3mbdoajt2rc22?ref_src=embed">2026年1月1日 14:41</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

年の初めに自らに課した目標だけど早々に達成できないことが判明した。

毎日日記を書くとかとんでもないし、OSSに触れることはできるけど、自分のClosedなプロジェクトにも触れたいと言うことで諦めた。

記事も個人開発をしている間はそっちを優先しちゃって疎かになるしで、色々とできない理由を挙げることはできる。

唯一シール帳は、はなんとかなるかもしれない。

とはいえ、なんとかなったところで何もないのだけれど。

初詣

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:2atly2y5kfyjcj5zap6pv4wd/app.bsky.feed.post/3mbivclespo2u" data-bluesky-cid="bafyreifojnhuxhigrf3odifpaouomuolbkijhmivmpq37qpoeh4xoqxjuu" data-bluesky-embed-color-mode="system"><p lang="">初詣、ルーメソ🍜<br><br><a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3mbivclespo2u?ref_src=embed">[image or embed]</a></p>— nove-b (<a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd?ref_src=embed">@nove-b.dev</a>) <a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3mbivclespo2u?ref_src=embed">2026年1月3日 16:31</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

今年も大山に行った。

一昨年、去年と抱っこだったので、恐る恐る行ったのだが、今年は片方が全部歩いてれた。

階段階段と楽しそうに歩いていたのでよかった。

来年は両方歩いてほしい。

些細なことで成長を実感する。

子供たちと初めてのディズニーシー

子どもができディズニーランドには3回行ったけど、シーには初めて行った。

シーは少し年齢が高めの乗り物が多いと言うことで敬遠していたが、行ってみるとそんなことなかった。

事前にトイストーリーとラプンツェルを見せてから行ったからか、結構楽しんでくれたようだった。

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:2atly2y5kfyjcj5zap6pv4wd/app.bsky.feed.post/3mcmzanenf22p" data-bluesky-cid="bafyreieg6gokodpsjo4zurxvxjal5ohyhlvwpbt35ahksp73xvtob574w4" data-bluesky-embed-color-mode="system"><p lang="ja">夢の国から帰って現実やってた。<br><br><a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3mcmzanenf22p?ref_src=embed">[image or embed]</a></p>— nove-b (<a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd?ref_src=embed">@nove-b.dev</a>) <a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3mcmzanenf22p?ref_src=embed">2026年1月18日 1:18</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

アナ雪に乗れなかったのことが唯一の後悔。

6時に家出たんだけど、もっと早く家を出なくちゃいけないのかもしれない。

よみうりランドにいった

イルミネーションを見にいくかと言うことでアフターパスでよみうりランドに行った。

子どもたちの上着を忘れるといったハプニングも多くあったけど、楽しそうに乗り物に乗っていてよかった。

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:2atly2y5kfyjcj5zap6pv4wd/app.bsky.feed.post/3mdr44bx72k2q" data-bluesky-cid="bafyreigmmiislk26kmgo4ys4zn6kudkisdkbojzptd35admjkmdhrwicaq" data-bluesky-embed-color-mode="system"><p lang="ja">ポケモンあった。<br><br><a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3mdr44bx72k2q?ref_src=embed">[image or embed]</a></p>— nove-b (<a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd?ref_src=embed">@nove-b.dev</a>) <a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3mdr44bx72k2q?ref_src=embed">2026年2月1日 9:45</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

３歳児が楽しそうに乗っていたやつ。

https://www.yomiuriland.com/attraction/spindrive/
https://www.yomiuriland.com/attraction/gurugurudrive/
https://www.yomiuriland.com/attraction/merry/
https://www.yomiuriland.com/attraction/seachicken-go/
https://www.yomiuriland.com/attraction/sweetscup/

また行きたいと行っていたので次は暖かい日に。

家に帰り子どもが寝ていると寂しい

それ以外にも土日は毎日公園に行った。

家の近くのふわふわドームデビューを果たし、とても楽しそうだった。

仕事が遅なり、家に帰ると子どもが寝ていて悲しくなる。

逆に間に合うとうるさいけど、楽しい。

いい感じに自分の中で子どもが中心になっている。

Pixelfedにプルリクを出した

最近よく使っていたPixelfedにプルリクを出した。

feat(embed): add color theme support

ダークモードで埋め込みをしたかったので、選択できるようにしたんだけマージされない。

なんかプルリクたまっているようだった。

作者はvue + Laravelからnuxtへのリニューアルを考えているようだし、その影響かもしれない。

個人的に早く埋め込み改善してほしいのでレビューしてほしいのだけど、OSSのメンテナーは多忙だし気長に待つしかない。

Astroで読んだ本を管理するサイトを作成した

https://books.nove-b.dev/

いままで読書メータとかreadsを使ってきたけど、サービス終了した時のことを考えると自分でデータを持っていたと言う思いを持ち自作した。

これはもっとブラッシュアップしたらリリース記事を書きたいし、テンプレートを公開したい。

【2026年2月】個人開発したらプチバズりした

nove-b

2月に読んだ本

読まず嫌いだった池井戸潤を読み、あまりの面白さに完徹するかと思った。

食わず嫌い、読まず嫌いは良くない。

その勢いでハヤブサ消防団を借りたので、それを読むのも楽しみにしている。

本の感想を静的にホストすることを辞めた

先月Astroで自作した「読んだ本を管理するサイト」の更新があまりにも面倒だったのでやめた。

元々、自分のコンテンツなのでGitHubで静的に管理しようという思いで作ったんだけど、本の感想を書くためにvscodeを開き、buildするという工程があまりにも面倒くさすぎたので、前のシンプルなまとめ方に戻すことにした。

https://books.nove-b.dev/、グッドバイ👋。

使いたい人がいればPublicにしようかと考えている。

雪が降る

冬季オリンピックが開催され、首都圏で珍しく雪が積もった。

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:2atly2y5kfyjcj5zap6pv4wd/app.bsky.feed.post/3medilik43k2h" data-bluesky-cid="bafyreiecq2cyiqu4cf6cekr45vzjadxj7jep3mqm3a5wioxbqwzmxmwx6a" data-bluesky-embed-color-mode="system"><p lang="ja">⛄️<br><br><a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3medilik43k2h?ref_src=embed">[image or embed]</a></p>— nove-b (<a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd?ref_src=embed">@nove-b.dev</a>) <a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3medilik43k2h?ref_src=embed">2026年2月8日 17:16</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

子どもたちにとっては初めての雪で、長靴も手袋も持っていなかったので、非常に寒そうに遊んでいた。

「寒い、寒い」言いつつ楽しそうで微笑ましかった。

そこいらで雪だるま作りが行われており、次の日たくさんの雪だるまがこっちを見ていた。

冬季オリンピックと風邪

4年前の北京五輪、小林陵侑が大ジャンプをした時、寒気に襲われていた。

まさかと思い検査したところ、当時猛威を震っていたコロナに罹っていることがわかった。

それから4年経ち、パリ五輪で世界が盛り上がる中、また寒気に襲われていた。

熱を測ると39.2分あり、検査の結果インフルエンザが確定した。

子どもに、妻にうつさないように完全隔離されたけど、妻にうつしてしまい、家庭活動がストップした。

子どもがいると風邪の代償がでかすぎる。

その後、大人2人は治ったけど、子どもたちの調子が上がらない。

微熱が続くけど、一通りの検査だと全て陰性で花粉かしらという結論に至った。

心配だけど様子を見るしかない。

遊びの予定が悉くキャンセルに

そんなわけで遊びに行く予定がことごとくキャンセルになった。

たまに遊びに行くと自分の花粉も辛く、何もかもやる気が出ない。

外には出れないけど、体力お化けを相手しないといけない、さてどうすればいいのか。

おかあさんといっしょ

あと子ども関係でいうと「おかあさんといっしょ」のあずきお姉さんが引退するらしい。

子どもの成長と一緒に見てきたあずきお姉さん、最後のファミコンはなんとか当選するといいのだけど。

Zedエディタに移行しvscodeに戻る

2月も1月に続き個人開発をした。

会社ではcursorを使っており、個人でも使っていたんだけど、アカウントの変更があまりにも面倒くさかったので、話題のZedエディタに移行してみた。

で、従量課金なく使えるGithub copilotに登録し、Zedエディタと接続して使っていたんだけど、vscodeで良くない？と思い、結局vscodeに戻ってきた。

AT protocolで本の感想を書くサイトを作った

で、Github copilotをふんだんに使い個人開発をした。

結果、少しバズった。

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:2atly2y5kfyjcj5zap6pv4wd/app.bsky.feed.post/3mfwh4nozxc2e" data-bluesky-cid="bafyreidmkdadagvzf4w6kn64r6hipv5wuyyv5nwzfstg2k22jadk7w7dtm" data-bluesky-embed-color-mode="system"><p lang="ja">BlueSkyのアカウントでログインでき、読んだ本の感想を積み上げるサイト作ってみた。

library-sky.com library-sky.com/user/nove-b....</p>— nove-b (<a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd?ref_src=embed">@nove-b.dev</a>) <a href="https://bsky.app/profile/did:plc:2atly2y5kfyjcj5zap6pv4wd/post/3mfwh4nozxc2e?ref_src=embed">2026年2月28日 23:35</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

大バズりではないけど、個人的にこんなにバズったので初めてで少し怖くなった。

作ったものは、読書感想投稿サイトで、blueskyのフィードを用い、他ユーザーの投稿を見ることができ、自身の投稿はサイトにまとめられるというもの。

AT protocolを活用しようという思いで作ったのだけど、AT protocolの理解が浅いので本当に正しい使い方ができているのかが怪しい。

ただ、blueskyのカントリーマネージャーもコメントしてくれたのでたぶん間違っていない、と信じたい。

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:ry4imxuyyuy24rwptucka2a3/app.bsky.feed.post/3mfxjxs7u2k2o" data-bluesky-cid="bafyreid5kdojh33cvnrsbz2ntrejox6yhooogpwutiyadsrdkw3n6zmwii" data-bluesky-embed-color-mode="system"><p lang="ja">フィードで感想がまとまっているの、いいですね。 bsky.app/profile/did:...

ATプロトコルベースの、エンタメ全般のレビューを書ける（+読める）Popfeed Social @popfeed.social というアプリも入れて試してみてますが、アプリを開いて感想を目にするのはレビューを書くときだけになりがち。<br><br><a href="https://bsky.app/profile/did:plc:ry4imxuyyuy24rwptucka2a3/post/3mfxjxs7u2k2o?ref_src=embed">[image or embed]</a></p>— Naoko Takano / 高野直子 (<a href="https://bsky.app/profile/did:plc:ry4imxuyyuy24rwptucka2a3?ref_src=embed">@naoko.cc</a>) <a href="https://bsky.app/profile/did:plc:ry4imxuyyuy24rwptucka2a3/post/3mfxjxs7u2k2o?ref_src=embed">2026年3月1日 9:59</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

ソースをオープンにしているので、気になる箇所はプルリク等をお待ちしています。

https://github.com/nove-b/library-sky

結構使ってくれる人がいるので、しっかり運用していきたい。

そしてATプロトコルをしっかり調べて記事にでもまとめたい。

nove-b

GithubActionを使用してエックスサーバーにデプロイする

FTPでファイルをアップロードするのが面倒くさい

レンタルサーバーでもできるのか？

エックスサーバーで簡単にできた

どうやって実現するのか

エックスサーバー側の設定

Github側の設定

deploy.ymlの作成

JavaScriptを使用してWordpressの投稿に目次を挿入する

記事に目次をつけよう

プラグインは使いたくないよう

目次を挿入するための考え方

実現コードはこちら

実現コードを書き下してみる

事前に必要な情報を定義する

連番IDを付与する

対象を目次に挿入していく

クリック時に対象要素にスクールする

技術を書く技術がない

Wordpressのタグをチェックボックスに変更して管理を楽にする

Wordpressのタグがひっちゃかめっちゃかになった過去

タグをチェックボックスにする実現コードはこちら

何が面倒って、アイキャッチ画像を設定するほど面倒なことはない

ブログ更新ってめんどくさい

作成されるアイキャッチ画像

作成するうえでの考え方

作成したコード

投稿画面にリンクを張る

アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した

アドセンスに申し込む

サブドメインが使用できません

アドセンスをサブドメインで申請する２つの方法

ルートドメインで新規構築

301リダイレクト

301リダイレクトを使用しサブドメインでアドセンス申請

リダイレクトが繰り返し行われました

.htaccessをエックスサーバーの管理画面で編集する

後は、祈る。ただ祈る。

クラシックエディタでリンク挿入ボタンがうまく機能していなかったので、原因を調査した

クラシックエディタのリンク挿入ボタンがうまく機能していない

プラグインが原因？

ついに、原因解明

無駄な記述は自身の首を絞める

【解決】助けて‼「検出 - インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの😱

Googleのクローラーが来ない

「検出 - インデックス未登録」

「クロール済み-インデックス未登録」とは似て非なる

Googlebotがストライキ中だ！

12月10日 現在（謎が深まる）

初手サブドメインに問題があった？

12月11日現在（調査中）

bing webmaster tool が最強にわかりやすい

今できる修正は？

12月12日現在（インデックスされる！）

結果、何が良かったのか？ 何だったのか？

サブドメインでアドセンスに申請したので、実況中継する。

おっかなびっくりアドセンス申請

申し込んだときの状況は？

アドセンスに受かる必須条件

本ブログの条件通過具合

とはいえ不安は拭えない

12月11日（土曜日）１週間経過

12月18日（土曜日）2週間経過

12月19日（日曜日）結果が届く

12月30日（木曜日）結果が届く

2022年10月13日（木曜日）合格🎉

アドセンスに合格するのはPV数に違いない

react でプロジェクトを作成する

react をインストールする

まずはソースを覗き見る

フォルダをツリー構成で綺麗に表示したい。vsCodeでtree コマンドがなくても表示できる

treeコマンド

bash: tree: command not found

インストールしたreact のファイルを検分する

react app のファイル構成

必要フォルダ構成

削除したものはなに？

reportWebVitals

React.StrictMode

12月10日現在（謎が深まる）

結果、何が良かったのか？何だったのか？

エンジニアのバイブルリーダーブルコード

エンジニア味方オライリーの本をKindle Paperwhiteで読む