
GitHub Actions Job Summaries で Jest のカバレッジレポートを表示する
May 11, 2022概要 2022年5月9日に GitHub Actions Job Summaries がリリースされました。 GitHub Actions Job Summaries は、GitHub Actions のワークフロー内で $GITHUB_STEP_SUMMARY…
HUGO の Code Block Render Hooks を使って、コードブロックにファイル名を表示する
March 13, 2022Markdown のコードブロックに記述したコードを、「foo.js」のようにファイル名をつけて表示できるようにします。 この記事では、v0.93.0 で追加された Code Block Render Hooks を使います。 Code Block Render Hooks…
Contentful + Next.js + Vercel でブログを作る
January 08, 2022概要 Next.js で Markdown ブログを作る では、記事を Markdown ファイルで作成したブログを作りました。 この記事では、ヘッドレス CMS である Contentful で記事を管理する Next.js 製のブログを作り、Vercel…
Next.js で Markdown ブログを作る
December 28, 2021概要 React ベースのフレームワークには、Gatsby.js と Next.js があります。 このブログは Gatsby.js で実装していますが、Next.js を勉強してみたかったので、Markdown ブログを作ってみることで Next.js…
散歩中に気になった場所の情報を Slack に投稿するショートカット
December 24, 2021概要 街なかを歩いていて気になる店が見つかったとき、手軽に店の名前や場所の情報をメモしたい。 今のご時世、Face ID で iPhone…
HUGO v0.90.0 で追加された images.Text でブログカードと OGP 画像を自動生成する
December 10, 2021概要 HUGO の v0.90.0 から images.Text を使って、画像と文字を合成した画像を生成できるようになりました。 images.Text…
Honkit で OGP を設定する
November 09, 2021概要 この記事では、Honkit で OGP を設定する方法を説明します。 Honkit は、Markdown から静的コンテンツを生成できる静的サイトジェネレーターです。 GitBook が Deprecated になったことを受け、GitBook を fork…
Java や Python の実行環境で Serverless Framework を利用するときにハマったこと
March 27, 2021Serverless Framework でにデプロイするとき、実行環境の言語(Java、Python)ごとにいくつかハマりポイントがあったので、メモしておきます。 環境 Node.js v12.20.1 Serverless Framework v2.30.2 Java…
Gatsby.js で作ったサイトで Amazon リンクを表示する
January 04, 2021このブログは Gatsby.js で作っていますが、リンクを埋め込みカードのように表示させたいことがあります。 普通の URL は iframely を使って表示させています。 Amazon の場合はあまりよい感じの表示にならない&アフィリエイトID…
鍋での炊飯をサポートする Alexa スキルを作った
January 04, 2021…
Node.js で Alfred Workflows を作る
August 23, 2020概要 Alfred は、Mac の多機能ランチャーアプリケーションです。 この記事では、Alfred の機能のひとつ、Alfred Workflows(以下、ワークフロー)を Node.js で作成する方法を説明します。 「alfy」というライブラリを利用すると、Node.js…
HUGO v0.74 で追加された JS Bundler を試す
July 20, 2020概要 HUGO の v0.74.0 にて、 ESBuild が組み込まれ、 HUGO 上で JavaScript/JSX や TypeScript/TSX のバンドルが行えるようになりました。 HUGO の公式ドキュメントにはまだ記載されてませんが、 Document JS…
Slack の Slash Commands で Interactive Messages を利用する
June 20, 2020概要 この記事では、Bot がユーザーにボタン付きメッセージを送信し、ユーザーからのボタンの入力に応じてアクションする Slash Commands の作り方を説明します。 Slash Commands…
Chrome Extensions を TypeScript で開発する
April 29, 2020概要 Chrome Extensions(以下、Chrome 拡張)をTypeScript で開発するための webpack の設定やファイル構成について記載しています。 この記事では、Chrome 拡張の作り方については説明しません。作成に必要なファイルや作成した Chrome…
Node-RED のノードを TypeScript で開発する
March 01, 2020概要 はじめてのノード開発 で紹介されている、受け取ったメッセージの文字列をすべて小文字に変換するノードをサンプルに、TypeScript で開発する方法について説明します。 npm に Node-RED の型定義 が公開されているので、これを利用します。 環境 Node.js…
Node-RED の WebSocket ノードを使って、WAN 側から Google Home を喋らせる
February 16, 2020Node-RED の WebSocket ノードを使って、WAN 側から Google Home を喋らせる方法です。
nock を使って HTTP レスポンスをモックする
January 12, 2020概要 Node.js で HTTP 通信を含むコードのテストを書きたい場合があります。 nock は、Node.js の http.request 関数を書き換えて、モックレスポンスを返すライブラリです。 この記事では、Jest + nock を使って HTTP…
Jest で書かれたテストコードを Visual Studio Code でデバッグする
January 01, 2020概要 Jest で書かれたテストコードを Visual Studio Code 上でデバッグする方法について説明します。 Jest のドキュメント には launch.json に設定を記述するとなっています。 ですが、VSCode の拡張「 Jest Runner…
HUGO と AWS Amplify Console で静的サイトを構築する
December 21, 2019AWS Amplify Console は、Web アプリケーションや静的サイトをホスティングできる Web サービスです。 リポジトリの変更をトリガーにして、React や Vue.js などの SPA や、HUGO や Gatsby…
GitHub Actions でFitbit アプリケーションの構文チェックとビルドチェックを行う
December 15, 2019概要 GitHub Actions を使って、Fibit アプリケーションの構文チェック( ESLint )とビルドチェックを行います。 環境 ESLint v6.7.2 @Fitbit/sdk-cli v1.7.1 前提として、ESLint…
Fitbit アプリケーションを TypeScript で開発する
December 14, 2019Fitbit で動くアプリケーションを TypeScript で開発できるようにします。 fitbit-sdk-types を使って、JavaScript で開発した既存のアプリケーションを TypeScript に移行します。 環境 Node.js v12.13.…
Netlify Functions を使って CORS 制限を回避する
November 16, 2019概要 webpack-dev-server は、webpack を用いた開発用サーバーを立てるためのモジュールです。 Netlify Functions は、Netlify の提供するアドオンのひとつで、 AWS Lambda を実行基盤にした FaaS(Function…
HUGO のテンプレートファイルの優先順位を理解する
October 27, 2019HUGO では、 content の下にある Markdown ファイルを、 テンプレートファイル を使用して HTML…
GitHub Actions + reviewdog で textlint を実行する
October 16, 2019この記事では、文章校正ツールである textlint のチェックでエラーになったときの結果を、GitHub の Pull Request へコメントする設定について説明します。 textlint は GitHub Actions を使って実行し、 reviewdog…
HUGO で独自 Shortcode を作る
October 15, 2019HUGO では、記事ファイルを軽量マークアップ言語である Markdown 形式で作成します。しかし、Markdown の表現力には限りがあるため、HTML に頼りたくなる場合があります。 とはいえ、何度も同じような HTML を記述するのは面倒& HTML…
HUGO のディレクトリ構成
October 04, 2019HUGO プロジェクトのディレクトリは、次のような構成になっています。 この記事では、HUGO プロジェクトのディレクトリの役割について説明します。 公式ドキュメントは、 Directory Structure を参照してください。 archetypes hugo new…
HUGO で静的サイトを構築する
September 30, 2019HUGO は、静的な Web サイトを構築する静的サイトジェネレータのひとつです。 静的サイトジェネレータは、Markdown などで書かれたファイルと静的なコンテンツのテンプレートをビルドして HTML を生成します。 HUGO は Golang…
Fitbit アプリケーションをコマンドラインで開発する
August 24, 2019これまで、Fitbit で動くアプリケーションやクロックフェイス(文字盤)の開発は、Web アプリケーションの Fitbit Studio で行っていました。 Web UI 上からしか Fitbit のアプリケーションを開発できないと思っていたのですが、Fitbit…
Visual Studio Code 拡張 VSNotes でメモをとる
May 28, 2019Visual Studio Code のメモ帳用拡張機能である VSNotes が便利です。 VSNotes を使うと便利になること 左メニューに常時「VS Notes…
スマートロックデバイスの SESAME を Fitbit Versa で操作する
May 17, 2019先日、CANDY HOUSE 製スマートロック SESAME mini(セサミ mini) を購入・設置しました。 スマートロックと呼ばれるデバイスは各社からいろいろと発売されていますが、SESAME を選んだのは、Webhook や API…
Node-RED から kintone のレコードを操作するノード(node-red-contrib-kintone)を作った
May 11, 2019Node-RED から kintone のレコードを操作するノード(非公式)を作成しました。 この記事では、 node-red-conrib-kintone (以降、kintone ノード)の追加方法と、利用例を説明します。 kintone ノード kintone…
Kibela API を Google Apps Script で実行する
April 23, 2019概要 Kibela Web API のベータ版 が公開されました。 Kibela Web API は GraphQL で提供されています。 この記事では、Kibela Web API の Google Apps Script での実行方法を説明します。なお、Google Apps…
clasp を使って Google Apps Script のスクリプトを作成する
April 23, 2019clasp は Google ドライブにある Google Apps Script プロジェクトを操作できる CLI ツールです。 clasp で Google Apps Script(以降、GAS)を扱うメリットは次のとおり。 ローカルでファイルを作成するので、Git…
macOS で pg gem を利用する
April 18, 2019macOS で pg gem を bundle すると、「pg_config がない」と失敗します。 この解決策について記述します。 環境 macOS 10.14.3 Ruby 2.6.2 Bundler version 2.0.1 PostgreSQL.app 1…
Rails 5.x で Bootswatch 4.x gem を利用する
March 23, 2019Rails アプリケーションを作るにあたり、手っ取り早く見た目をよい感じにするため、 Bootstrap を適用しました。 そのままでは Bootstrap 感があるので、Bootstrap に適用できるテーマ Bootswatch を利用します。 この記事では、Rails…
Visual Studio Code と textlint で文章を校正する
March 01, 2019textlint は、テキストを校正するためのコマンドラインツールです。 textlint では、文章をチェックする「ルール」を導入して、ルールに反した文章をチェックします。 類似のテキスト校正チェックツールに RedPen…
Redash と Google SpreadSheet を連携する
February 02, 2019Google SpreadSheet のデータを Redash で扱うための設定方法の手順です。 環境 Redash v5.0.2 手順 Redash と Google SpreadSheet を連携するには、SpreadSheet と Redash…