CMS | デジタルアーカイブシステムの技術ブログ

ContentfulでPublishボタンが押せない原因と解決方法 — ロケール設定の落とし穴

はじめに Contentfulで多言語サイトを構築中、運用担当者から「新規ページを作成してもPublishボタンがアクティブにならない」という報告を受けました。既存ページの更新は問題なくできるのに、新規作成だけができないという状況です。本記事では、原因の特定プロセスと解決方法を紹介します。環境 Contentful（ヘッドレスCMS）ロケール: 日本語（ja、デフォルト）+ 英語（en） Next.js + Contentful Delivery API でフロントエンドを構築症状新規にPageエントリーを作成し、必要な情報をすべて入力しても Publishボタンがグレーアウトしてクリックできない既存ページの更新（タイトルや本文の変更）は問題なくPublishできる Draft保存は正常に動作する原因の切り分け 1. コンテンツタイプのバリデーションを確認まず、pageコンテンツタイプのフィールド定義を確認しました。 title: Symbol, required: true, localized: true slug: Symbol, required: true, localized: false body: RichText, required: false, localized: true bodyMarkdown: Text, required: false, localized: true titleとslugが必須ですが、どちらも入力済み。slugのバリデーション（^[a-z0-9]+(?:-[a-z0-9]+)*$）にも違反していませんでした。 2. ユーザー権限を確認 Management APIでスペースメンバーシップを確認しました。 curl -s -H "Authorization: Bearer $TOKEN" \ "https://api.contentful.com/spaces/$SPACE_ID/space_memberships" 報告者はAdmin権限を持っており、権限の問題ではありませんでした。 3. APIから直接Publishを試行 — 原因特定 UIでは原因がわからなかったため、Management APIから直接Publishを試みました。これが決め手になりました。 curl -s -X PUT \ -H "Authorization: Bearer $TOKEN" \ -H "X-Contentful-Version: 13" \ "https://api.contentful.com/spaces/$SPACE_ID/environments/master/entries/$ENTRY_ID/published" レスポンス: ...

2026年3月17日 · 2 分 · Nakamura

StrapiのData transferを試す

概要 Strapiにおいて、ローカル環境のデータを公開環境に反映させる機会があり、以下のData transferを使ってみました。 https://docs.strapi.io/dev-docs/data-management/transfer 手順公開環境側公開環境側で、Transfer Tokensを発行します。ローカル環境公開サイトをhttps://strapi.example.org、tokenをxxxとします。この時、以下のコマンドにより、ローカル環境のデータを公開環境に反映することができました。 strapi transfer --to https://strapi.example.org/admin --to-token xxx 既存のデータが上書きされるため、その点はご注意ください。 ? The transfer will delete existing data from the remote Strapi! Are you sure you want to proceed? Yes Starting transfer... ✔ entities: 71 transfered (size: 73.6 KB) (elapsed: 1680 ms) ✔ links: 54 transfered (size: 10.3 KB) (elapsed: 687 ms) ... まとめ Strapiの利用にあたり、参考になりましたら幸いです。

2024年6月12日 · 1 分 · Nakamura

Nuxt 3とDecap CMSを試す

概要 Nuxt 3とDecap CMSを試してみましたので、その備忘録です。 https://decapcms.org/ Nuxt3プロジェクトの用意既存のサイトにDecap CMSを追加する以下を参考にしました。 https://decapcms.org/docs/add-to-your-site/ まず、nuxt/contentモジュールを含む、Nuxt3のプロジェクトを用意します。ソースコードの例はこちらです。 https://github.com/nakamura196/nuxt3-decapcms 以下の2つのファイルを作成しました。 # when using the default proxy server port local_backend: true # This line should *not* be indented publish_mode: editorial_workflow backend: name: git-gateway branch: main # Branch to update (optional; defaults to master) media_folder: public/img public_folder: /img collections: - name: 'blog' label: 'Blog' folder: 'content/blog' format: 'frontmatter' create: true slug: '{{year}}-{{month}}-{{day}}-{{slug}}' fields: - { label: 'Title', name: 'title', widget: 'string' } - { label: 'Publish Date', name: 'date', widget: 'datetime' } - { label: 'Description', name: 'description', widget: 'string' } - { label: 'Body', name: 'body', widget: 'markdown' } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title>  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script> </head> <body>  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script> </body> </html> そして、GitHubにpushしました。 ...

2023年11月30日 · 更新: 2023年11月30日 · 1 分 · Nakamura

Google スプレッドシートの更新をGitHubに通知する

概要 Google Apps Scriptを用いて、Googleスプレッドシートが更新された際、GitHubに通知を送る方法を調べました。合わせて、StrapiやContentfulからGitHubに通知を送る方法も調べたので、備忘録として記録します。 Google Apps Script 以下のようなスクリプトを用意することで、スプレッドシートの更新をGitHubに通知できました。 const token = "ghp_xxx" const owner = "yyy" const repo = "zzz" const event_type = "aaa" function postSheetChange() { const headers = { "Accept": "application/vnd.github+json", "Authorization": `Bearer ${token}`, "Content-Type": "application/json" } var payload = JSON.stringify({ event_type }); var requestOptions = { method: 'POST', headers, payload, }; UrlFetchApp.fetch(`https://api.github.com/repos/${owner}/${repo}/dispatches`, requestOptions) } トリガーの設定方法などは以下の記事が参考になりました。 https://businesschatmaster.com/slack/spreadsheet-change-notification なお、Googleスプレッドシートの更新の都度、GitHubへの通知が行くので、GitHub Actionsのほうで、以下のようなconcurrencyを設定しておくほうがよさそうです。または、トリガーを特定のセル（列）が更新された時だけ、などにすることも考えられます。 name: Build Test concurrency: cancel-in-progress: true on: repository_dispatch: types: - update_content jobs: build: runs-on: ubuntu-latest steps: - name: checkout uses: actions/checkout@v3 ... Strapi Strapiのwebhookでは、bodyをカスタマイズできないため、以下のようなプロキシサーバを立てる必要があるようです。 ...

2023年4月27日 · 更新: 2023年4月27日 · 1 分 · Nakamura

StrapiにGraphQLを追加する

概要以下の記事で、StrapiをAmazon Lightsail上に立ち上げました。今回は、GraphQLを追加して、使用してみます。 GraphQLプラグインのインストール以下を実行しました。backendなどのパスは適宜読み替えてください。 cd /opt/bitnami/apache2/htdocs/backend yarn add @strapi/plugin-graphql そして、アプリを起動します。 yarn develop そして、/graphqlにアクセスすると、以下のような画面が表示されます。今回、servicesというコンテンツタイプを作成し、titleというフィールドを作成済みでした。なので、以下のようなクエリを発行することで、その一覧やメタデータを取得できました。 # Write your query or mutation here query getServices { services { data { id attributes { title createdAt updatedAt } } } } 以下が結果です。 { "data": { "services": { "data": [ { "id": "1", "attributes": { "title": "Cultural Japan", "createdAt": "2023-04-10T21:59:08.768Z", "updatedAt": "2023-04-10T21:59:12.752Z" } } ] } } } まとめ次は、Next.jsなどとの連携を試してみたいと思います。

2023年4月12日 · 更新: 2023年4月12日 · 1 分 · Nakamura

Omeka ClassicをHeadless CMSとして使用してみる。

概要 Omeka SおよびOmeka Classicは、デジタルアーカイブ構築および人文（情報）学研究において、とても便利なツールです。 https://omeka.org/ REST APIを標準搭載し、モジュールおよびプラグインの追加などによる高い拡張性を持ちます。またIIIF関連ツール、翻刻支援ツール、時空間情報を取り扱うツールなど、さまざまな既存資産を利用することができます。一方、サイトの見た目を変更するテーマ開発などについては、PHPおよびOmekaに対する知識が求められ、比較的難易度が高いと（個人的に）感じています。この点について、昨今はバックエンドとフロンドエンドを分離したHeadless CMSという使い方も普及しつつあります。そこでOmeka ClassicをHeadless CMSとして使用し、Nuxt 3を用いたフロントエンド開発を試みました。Omekaの活用方法の一例として参考になれば幸いです。 Omeka Classicの準備 APIの有効化以下を参考に、APIの有効化を行います。 https://omeka.org/classic/docs/Admin/Settings/API_Settings/ Access-Control-Allow-Originヘッダーの追加 .htaccessファイルにAccess-Control-Allow-Originヘッダーを追加します。 Header set Access-Control-Allow-Origin "*" # 追加 # Omeka .htaccess: Apache configuration file # This file is required for Omeka to function correctly. # --------------- # # Error Reporting # ... Omeka ClassicのAPI 以下のページにAPIがまとめられています。 https://omeka.readthedocs.io/en/latest/Reference/api/index.html 例えば、以下のようなURLから、アイテムに対する簡易な検索が可能です。（Omeka Classicでは詳細な検索ができないようです。本格的な利用にあたっては、Omeka Sを使用する必要がありそうです。） https://omeka.aws.ldas.jp/api/items?search=被フロントエンドの開発今回は勉強を兼ねて、Nuxt 3とVuetify 3を使ってみました。2022-07-08時点において、アプリの完成度は大変低いが、Omeka ClassicをHeadless CMSとして利用し得ることを確認できました。 https://omekac.netlify.app/ まとめ Omeka（SおよびClassic）を用いたシステム開発における一例として、参考になりましたら幸いです。 ...

2022年7月8日 · 更新: 2022年7月8日 · 1 分 · Nakamura