CSSフレームワークの「Bulma: Free, open source, and modern CSS framework based on Flexbox」のcolumnsクラスの挙動がおかしい、というお話です。 Columns responsivenessは、Flexboxをベースとしたレスポンシブなレイアウトを簡単に定義できます。ところが、以下のシンプルなコードをみてください。 <html> <body> <div class="columns is-desktop"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> </div> </body> </html> 何の変哲もない、チュートリアルに出てきそうなカラムレイアウトです。一見、何の問題もなさそうに見えます。しかし、本コードには以下の問題があります。
静的サイトの悩みの種、サイト内検索をNetlify Functions＋Hugoで実装してみました。ポイントは、以下の通りです。 クライアントであるブラウザにとって負荷の低い実装方法とする 記事の更新の都度、インデックス等の更新にかかる運用が発生しないようにする（自動的に行う） Hugoの機能、ある程度の月間PVに耐えられるものとする インクリメンタルサーチは実装しない（Netlify Functionsの無料範囲内での実装を目指す） 有名どころでは、Lunr: A bit like Solr, but much smaller and not as brightやModern site search for companies of all sizes | Algoliaがあり、Search for your Hugo Website | Hugoでも紹介されています。今回は、同ページでも紹介されていますが、What is Fuse.js? | Fuse.jsを使った実装方法をご紹介します。（気付いたら、Hugoのページが充実している）
🔁 2026年リフレッシュ Hugo 0.140+ / KaTeX v0.16+ でも基本的な組み込み方法は変わりません。ただし Hugo 0.126 以降は Goldmark の Passthrough 拡張（[params.markup.goldmark.passthrough]）を有効にすると、Markdown パーサが $...$ / $$...$$ を無加工でそのまま出力してくれるため、エスケープ処理がシンプルになります。KaTeX アセットは npm install katex でなく CDN（cdn.jsdelivr.net/npm/katex@0.16）を使うのが2026年の定番です。
🔁 2026年リライト版 この記事は2020年5月に公開した「Google ChromeとDeepLの併用による英語記事サーフィンのおすすめ」を、Apple Intelligence（2024年）、Safari 組み込み翻訳（iOS 14+）、LLM 系翻訳（Claude / ChatGPT / Gemini）の登場を踏まえて全面書き換えしたものです。
PythonのパッケージをPyPIからインストールする際に用いるpipコマンドで、よくある警告を抑止する方法です。 例えば、現在アクティブな環境にインストールされているパッケージ一覧を表示した際にも表示されます。pip listを実行してみます。 Package Version ---------- ------- pip 19.2.3 setuptools 41.2.0 WARNING: You are using pip version 19.2.3, however version 20.1 is available. You should consider upgrading via the 'pip install --upgrade pip' command. 文字通り「新しいバージョンのpipがあるからアップデートしなさい」という警告です。果たして「警告」にするレベルのものかどうかという疑問が残りますが、これまでアップデートしない理由も特にないため毎回アップデートしていました。しかし、この警告を表示させない方法があるようです。
🔁 2026年リライト版 この記事は2020年5月に公開した「Python:3.xコンテナでMeCab + IPADIC + NEologdをシステム辞書として使用するためのDockerfile」を、mecab-ipadic-NEologd の更新停止（2020年9月）、fugashi（MeCab の公式 Python バインディング）、Sudachi などの現行選択肢を踏まえて全面書き換えしたものです。
VS Codeで、Rubyで書かれたプログラムをデバッグする方法です。単一のRubyファイルをデバッグするためのものであり、RSpec、およびRuby on Railsなどのフレームワークを用いたプログラムは対象外です。 rbenvによる環境構築 環境の確認です。Macで確認していますが、Windows 10でも同様です。今回は、Rubyのバージョン管理マネージャであるrbenvを使用します。本記事執筆時点で最新版である2.7.1を使用して確認します。
VS CodeでPython - Visual Studio Marketplaceの拡張機能を使用すると、Pythonで記述されたプログラムのデバッグや、Jupyter Notebook環境をVS Codeで実行できて大変重宝します。たまに、このJupyter Notebookが、以下のエラーにより起動しなくなったことがあったため、その対処法をメモしておきます。
🔁 2026年リライト版 この記事は2020年4月に公開した「NetlifyのDeploy結果をDiscordへ通知する」を、Netlify の現行管理UI（2025年版）と Discord のウェブフック URL 形式に合わせて全面書き換えしたものです。 2020年からの主な変化点 Netlify UI が刷新。「Deploy notifications」の場所が Site configuration → Build & deploy → Deploy notifications に整理された Discord Webhook URL に /slack サフィックスを付ける方法 は今も健在（Slack 互換ペイロードの解釈） Netlify の Slack / Discord / Webhook 通知タイプ がドロップダウンから直接選べるように Pull Request Deploy Preview / Branch Deploy の通知が細かく分けられるようになった Netlify 以外のホスティング（Vercel / Cloudflare Pages）でも同様の手順が使える 手順 1. Discord でウェブフックを作成 通知したいチャンネル → 歯車 → 連携サービス → ウェブフック → 新しいウェブフック ウェブフックURL をコピー https://discord.com/api/webhooks/<id>/<token> 2. URL 末尾に /slack を付与 Netlify の Slack integration は Slack 形式のペイロード を送信します。Discord はこの Slack 互換ペイロードを URL サフィックス /slack で受け取れます。
🔁 2026年リライト版 この記事は2020年4月に公開した「Netlify CMS + HugoでPage Bundles（コンテントと画像を同じ場所に配置）に対応する」を、2026年時点の Decap CMS（2023年の Netlify CMS フォーク / リネーム）前提で書き換えたものです。 2026年の状況 — Netlify CMS は Decap CMS にフォークされた Netlify CMS は、2023年2月に元運営元 Netlify の開発撤退にともない、コミュニティで Decap CMS としてフォーク・改名されました。パッケージ名も netlify-cms から decap-cms へ移行しています。