はてなブックマーク

Next.js で Markdown ブログを作るでは、記事をMarkdownファイルで作成したブログを作りました。 この記事では、ヘッドレスCMSであるContentfulで記事を管理するNext.js製のブログを作り、Vercelでホスティングする方法を説明します。 Contentfulとは Contentfulは、ヘッドレスCMSとよばれるAPIベースなCMSです。 ヘッドレスCMSなので、Wordpressなどの一般的なCMSのようにフロントエンドの部分がありません。 そのため、Next.jsやGatsbyのようなクライアント側をレンダリングするフレームワークと組み合わせて使います。 Contentfulでは、データの置き場（サイト）となるSpaceの中で、記事データ（Entity）を管理します。 記事データは、Content Modelと呼ばれる、タイトル、本文、日付などどんな項

Visual Studio Code のメモ帳用拡張機能である VSNotes が便利です。 VSNotes を使うと便利になること左メニューに常時「VS Notes」のアイコンが表示され、メモへすぐにアクセスできる。タグを打つことができ、タグ検索ができる。ファイル名の付け方ルールを設定できる。VSCode Snipet を使うと、テンプレートを利用してファイルを作成できる。必要なものVisual Studio Code初期設定VSNotes のインストールVisual Studio Code で拡張機能のメニューを開きます。検索窓に「VSNotes」と検索して、VSNotes をインストールします。メモの保存先の設定Shift + Ctr(Command) + P でコマンドパレットを開き、「vsnotes run」と入力します。「VSNotes: Run setup」が補完されるので、

概要Alfred は、Mac の多機能ランチャーアプリケーションです。 この記事では、Alfred の機能のひとつ、Alfred Workflows（以下、ワークフロー）を Node.js で作成する方法を説明します。 「alfy」というライブラリを利用すると、Node.js でワークフローをカンタンに作成できます。 環境Alfred 4（Powerpack）Node.js 10ワークフローのしくみワークフロー（要 Powerpack）は、Alfred に割り当てたトリガーや検索ボックスのインプットをもとに、情報を加工し出力します。 たとえば筆者が作成した alfred-kibela-workflow では、次のことを行っています。 ユーザーより、「ワークフローのトリガーワード」＋「キーワード」が入力される入力されたキーワードで、Kibela というサービスのノートを検索するため、API

Jestで書かれたテストコードをVisual Studio Code上でデバッグする方法について説明します。 Jest のドキュメントにはlaunch.jsonに設定を記述するとなっています。 ですが、VSCodeの拡張「Jest Runner」を入れるだけで、以下ができます。 シナリオ単位でのテストを実行する breakpointを設定してデバッグする 動作を確認した環境 Visual Studio Code v1.41.0 Jest Runner v0.4.11 Jest Runnerのインストール Visual Studio Codeで拡張機能のメニューを開きます。 検索窓に「Jest Runner」と入力して検索し、Jest Runnerをインストールします。 動作確認用のコード 次のコードで動作を確認します。 テスト対象のコード const uppercase = (str) =

概要この記事では、文章校正ツールである textlint のチェックでエラーになったときの結果を、GitHub の Pull Request へコメントする設定について説明します。 textlint は GitHub Actions を使って実行し、reviewdog を使って Pull Request へコメントします。 reviewdog は GitHub Actions で使える Docker ベースの Public reviewdog actions を公開していますが、textlint 用の actions はないので、ワークフローの定義ファイルを自作します。