posts on Nantoka PRESS

Hugo のコードの色付けを CSS クラスにする（highlight.js をやめた）

Wed, 28 Oct 2026 07:00:00 +0900

JavaScript はいらなかった

旧サイトのテーマでは highlight.js を読み込んで、ブラウザ側でコードに色を付けていました。作り直すにあたって調べたところ、Hugo には Chroma というハイライターが入っていて、ビルドのときに色付けまで済ませてくれます。 JavaScript を読み込む必要がなくなるので、こちらに乗り換えました。

Cloudflare Workers の PBKDF2 は本番だけ反復 100,000 回まで

Wed, 28 Oct 2026 00:00:00 +0900

テストは全部通っていたのに

個人で作っている Web サービスの API を Cloudflare Workers に載せています。本番にデプロイして最初のアカウントを作ろうとしたところ、サインアップが 500 エラーになりました。ログに出ていたのはこれです:

古い PHP のコードを 8.3 に上げたら落ちたところまとめ

Wed, 28 Oct 2026 00:00:00 +0900

警告がエラーになった

PHP 7.4 で動いていた古い WordPress のサイトを、PHP 8.3 に上げる作業をしました。自作のテーマや、WordPress の外に置いてある PHP のフォームなど、年季の入ったコードがたくさんあります。

Hugo のテンプレート構成が変わっていた（0.146〜）

Tue, 27 Oct 2026 00:00:00 +0900

久しぶりに Hugo のテーマを書いたら

このサイトを Hugo 0.168 で作り直し、テーマも外部のものを使わず自分で書くことにしました。昔の記憶のまま layouts/_default/ や layouts/partials/ を作ろうとしたのですが、今の Hugo ではディレクトリ構成がすっきり変わっていました。 Hugo 0.146 で入った新しいテンプレートの仕組みのお話です。

DockerでNuxtJSの開発環境を作成しました

Sun, 01 Nov 2020 00:00:00 +0900

NuxtJS とは

NuxtJS(なくすとじぇぃえす)はウェブアプリケーションを構築するためのVueフレームワークです。
ウェブアプリ開発で必要となる多くの機能が予め用意されています。
今回は、Dockerを使って開発環境を作成しました。

ES6のアロー関数を簡単解説

Thu, 01 Oct 2020 00:00:00 +0900

アロー関数とは

アロー関数はES6(ECMA Script 2015)で導入された、関数リテラルを短く書くことができる構文です。
書き方の違いだけかと思いきや、挙動の違いもあるので要注意です。

form_for ヘルパーから form_with ヘルパーへの変更

Wed, 06 May 2020 00:00:00 +0900

Rails 5.1 で追加された form_with というヘルパーがあります。
従来の、form_for form_tag に換わる新機能です。
form_for form_tag は将来廃止されるらしいので今のうちに備えておきましょう。

AWS CLI のプロファイルをディレクトリごとに自動で切り替えたい

Fri, 22 Nov 2019 00:00:00 +0900

AWS のアカウントが増えてきた

AWS CLI を利用する際、アカウントがひとつなら何も考えないでよいのですが、顧客のアカウントで操作する場合や複数のプロジェクトで異なるアカウントを使わなければ行けない場合など、 AWSの普及に伴って複数のアカウントを使い分ける必要が出てきました。そんな時に使える設定方法と切り替え自動化のお話です。

Elastic Beanstalk で Rails 環境を作ってみた

Fri, 22 Nov 2019 00:00:00 +0900

Elastic Beanstalk 始めました

AWS に Elastic Beanstalk というウェブアプリのインフラを程よくセットアップしてくれるサービスがあります。お手軽だと聞いていたのですが、動くまで意外に苦労したので備忘録を残しておこうと思います。

reCAPTCHAのバッヂ(プライバシー、利用規約のマーク)を消す方法

Fri, 15 Nov 2019 00:00:00 +0900

reCAPTCHAがバッヂを強制的に出す問題

botなどのアクセスをガードしてくれるGoogleの"reCAPTCHA"サービスは便利・簡単・無料ですが、自動で表示されるバッヂが他のデザインと干渉する場合があります。そこで、バッヂを消す(隠す)方法を紹介します。

JavaScriptで"history.back" を使うとフォームの入力値がすべてクリアされてしまう現象を修正した話

Tue, 05 Nov 2019 00:00:00 +0900

入力値が消える問題

入力 > 確認 > 送信のよくあるフローのフォームを作成し、確認画面でJavaScriptのhistory.backを使って履歴を戻ったところ、入力したデータがすべて消えてしまう現象に出くわしました。

RSpecで失敗即終了したい時

Sat, 05 Oct 2019 00:00:00 +0900

痛恨!テスト失敗してた

RSpecでテストを実行した際、大量に失敗するのにテスト完了まで待つのはつらいです。そんな時に便利なオプションがRSpecにはあります。

Fail Fast

最初の失敗があった時点でテストの実行が止まります。同じような失敗が大量に出ているspecの修正などに便利です。

HugoでGoogle Analyticsを設置する

Wed, 02 Oct 2019 00:00:00 +0900

Google Analytics を設置したい

ブログやウェブサイトを作ったら、まずGoogle Analyticsを設置するという方は多いでしょう。当ブログはHugoで作成していますが、Google Analyticsの設定を行ったのでその方法の紹介です。

Hugo+Netlifyで運用する簡単WEBサイト構築方法

Sat, 28 Sep 2019 00:00:00 +0900

Hugoとは?

This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme.

We’ll start with creating a new site with a very basic template. Then we’ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.