Contentful のサンプルとメモ

Contentful 上で実際に RichText で入力し HTML として取得したときのサンプルと編集についてのメモ。

Contentful の RichText 編集画面

HTML 出力のサンプル

基本的には RichText の機能のみ利用しているが、以下の点では今回の環境に依存した表示となる。

  • スタイルは Docs Theme のものが適用される(Heading が 5 以降で Normal Text と同じスタイルになるのはこのため)

  • Docs Theme の目次用に rehype-slug で見出しに id を付与している

  • Asset 用の Custom Renderer を作成している

見出し

heading4

heading5
heading6

文字の装飾

ボールド

文字をボールドにする。

イタリック

文字をイタリックにする。

下線

文字に下線を付ける。

コード

文字をコードにする。

特殊な改行

以下、Shift + Enter で改行。 改行 1 改行 2 ここまで。

改行を連続して入力した場合は、空のパラグラフが挿入される。以下改行を連続。

ここまで。

連続した空白

空白を連続して入力した場合、単純に空白の連続となる。

ここから空白の連続 ここまで。

リンク

サイトへリンクを設定する。

リスト

o-list

  1. 項目 - A

  2. 項目 - B

    1. 項目 - B_A

    2. 項目 - B_B

  3. 項目 - C

list

  • 項目 - A

  • 項目 - B

    • 項目 - B_A

    • 項目 - B_B

  • 項目 - C

水平線

画像

曇っている河川敷

引用

引用されたテキスト 1。

引用されたテキスト 2。

RichText についてのメモ

主にコンテンツを編集するための機能について。なお、以下の内容は RichTextの出力を HTML として取得(変換)した場合で、その他の状況では異なることもある。

API レスポンスでの形式

RitchText はオブジェクト(AST)としてレスポンスに含まれる。

データは Contentful のライブラリーで HTML へ変換できるが、Content Delivery API(REST) と GraphQL API で扱いが異なる。

日本語入力

試した限りでは以下のようになる。

  • Windows - プリエディットが消えたり、確定できないことが多い

  • Linux + Fcixt + Mozc - プリエディットが消えたり、確定できないことが多い

  • Linux + Fcixt + SKK - 時々怪しいが概ね入力可能

同様の事例があまりヒットしないので PC 側の処理落ちの可能性もあるが、基本的に RichText での日本語入力は実用的でない。

日本語入力については問い合わせされた方の記事がありました。それによるとサービス側の不具合だそうです。

モバイル対応

レスポンシブ対応していないので画面の拡大と縮小で対応(操作性はきびしい)。

ただし RichText への入力はカーソル位置がズレたり保存ができないなどの問題がある(試したソフトキーボードは S-Shoin だけなので他のキーボードでは違う結果になる可能性もある)。

キーボードショートカット

基本的な文字装飾などが可能。Ctrl + S はセーブに割り当てされていない(オートセーブ機能がある)。

What are the keyboard shortcuts for the Rich Text editor?

コピー & ペースト

RichText 内ではテキストとともに画像などの埋め込みや書式もコピー＆ペーストできる。

外部のソースからのペーストもできるが、改行が含まれていたりパラグラフが閉じていると余分な改行を付加されるようなことがある。

また、No-Break Space (U+00A0)はそのままペーストされてしまうので、通常の空白と見分けがつかなくなる。

外部ソースからのペーストは、書式なしおよび改行なしの状態で行うことが安全だと思われる。

なお、外部ソースからのペーストが非推奨とされているかは不明。

Google Docs からは問題ないことになっている。

Rich Text field tips and tricks from the Contentful DevRel team

改行

改行の入力は基本的にパラグラフの区切りとなる。

Shift + Enter の入力は改行となる(<br>ではない)。

連続した空白

空白を連続して入力した場合、単純に空白の連続となる。

リンク

通常の Web(url)の他にキュメントやメディアへのリンクも UI 上では設定できるが、ライブラリー標準の変換ではリンクとして扱われない。Custom Renderer を作成する必要がある。

リンク元の文字列に画像を含めることはできない(設定すると画像が削除される)。画像へのリンクは CustomRenderer 等での対応が必要。

画像

バックエンドは Contentful 独自？

アップロードは Asset の UI か RichText の Embed ボタン(Asset のダイアログが表示される)から行う。ローカルのファイル以外にも Filestack の UI により Google Drive 等からもアップロード可能。

再アップロード(Asset 内のファイル入れ替え)後は、RichText に埋め込まれた画像も入れ替わる。

画像を img タグとして扱うには Custom Renderer を作成する必要がある。Alt の指定は Custom Renderer の作りによるが、通常は Media Library でファイル別に設定したメタ情報を用いる。

  • Media Library 上で指定する(画像ファイルに Alt がひもづく)

Media Library で画像を編集可能。

  • 画像の編集で Image API は利用されない

    • Media Library 内の元ファイルを上書きすることになる

  • Crop によるサイズ変更は部分的に切り出すことも可能

    • 位置合わせはマウスで操作できる

  • Custom Renderer で Image API を利用することにより元ファイルを残して表示時に変更することも可能

    • ただし、編集 UI は利用できない

画像のサイズを width height 属性へ設定するしないは Custom Renderer の作り方次第。

Media Library の UI 上から、画像を参照している Entry を確認できる(API でも可能)。

画像にもステージングが適用される。画像が DRAFT のときにドキュメント(Entry)を Publish すると警告が表示され、それでも Publish すると API での取得時にエラーとなる。

埋め込み

他のサービスを埋め込む UI は提供されていないが、埋め込み用の Model と対応する Custom Renderer を作成することで対応可能。

フルスクリーン

RichText の編集フィールドのみをブラウザー内に表示させることはできない。

このページをGitHubで編集する 更新日 Wed, Dec 29, 2021
概要 GraphCMS のサンプルとメモ