はてなブックマーク

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.0Jest Runner v0.4.11Jest Runnerのインストール Visual Studio Codeで拡張機能のメニューを開きます。検索窓に「Jest Runner」と入力して検索し、Jest Runnerをインストールします。動作確認用のコード 次のコードで動作を確認します。 テスト対象のコード const uppercase = (str) => { if

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