メインコンテンツにスキップ

Articles APIを使った公開記事のフォーマットとエクスポート

Articles APIを使ってHelp Centerの記事を正しくフォーマットするために必要なすべての情報

対応者:Beth-Ann Sher

この記事では、Articles APIを使ってHelp Centerの記事をフォーマットおよびスタイル設定し、記事コンテンツをプログラム的にエクスポートする方法を説明します。Articles APIでは、bodyフィールドにHTMLを送信して記事を作成・更新できます。この記事では、サポートされているすべてのHTML要素、スタイルの付け方、除去または変換される内容を網羅しています。

記事を手動でフォーマットしたい場合は、代わりに記事エディター内で行うことができます。

注意:完全なAPIリファレンスガイドについては、開発者向けドキュメントをご覧ください。

注意:この記事はIntercom Articles API(application programming interface)と連携する開発者向けです。リクエストの認証にはAPIキーが必要です。認証の詳細はAPIリファレンスをご参照ください。

公開記事のフォーマット

本文のテキストはすべて段落(p)タグ内に配置してください:

<p>This is a paragraph</p>

段落内で改行を入れるには、改行(br)タグを使用してください:

<p>This paragraph<br>has a line break in it</p>

記事でサポートされている見出しレベルは2つ、H1とH2です:

API経由で送信されたその他の見出しタグ(H3〜H6)はH1およびH2に変換されます。この正規化は相対的です:本文に<h1>がない場合、Intercomはすべての見出しを繰り上げてトップレベルを<h1>にします。本文に<h1>が含まれている場合は、下位の見出しレベルは保持されます。

<h1>This is a heading</h1>
<h2>This is a sub-heading</h2>

注意:titlebodyフィールドは独立して扱われます。記事タイトルは自動的に<h1>としてレンダリングされますが、本文内の見出しの正規化には影響しません。<h2>以下の見出しレベルを保持するには、必ず本文内に<h1>を含めてください。

注意:Help CenterエディターではH3およびH4の見出しオプションが表示されますが、記事が保存またはAPI経由でアクセスされるとこれらはH1またはH2に正規化されます。記事内の見出しレベルが予期せず変わる場合、これは想定された動作です。API経由で送信されたコンテンツや翻訳サービスで処理されたコンテンツが正規化を引き起こします。

画像を追加するには、画像(img)タグを使用し、画像URLを“src”属性に指定してください:

画像は指定したソースからIntercomにアップロードされ、記事内にはIntercomのリンクが表示されます。対応ファイル形式はPNG、JPEG、SVG、GIFです。

重要:画像のソースは完全なURL(例:https://examply.io/image.jpeg)でなければならず、相対URL(例:/image.jpeg)は使用できません。また、ファイルは公開アクセス可能である必要があります。

<img src=”https://examply.io/image.jpeg”/>

プロのコツ:画像には“alt”属性で説明を付けることをおすすめします。これにより、スクリーンリーダーを使うお客様にとって記事のアクセシビリティが向上し、検索エンジン(SEO:検索エンジン最適化)がコンテンツを正確にインデックスできます。

<img src=”https://examply.io/image.jpg” alt=”Examply project page”/>

<a href=”https://examply.io”>This is a text link</a>

リンクをボタンとして表示するには、“intercom-h2b-button”クラスを追加してください:

<a href=”https://examply.io” class=”intercom-h2b-button”>This link is a button</a>

画像をリンクとして使う場合は、リンクタグで囲みます:

<a href=”https://examply.io”>
<img src=”https://examply.io/image_link.jpeg”/>
</a>

注意:“target”属性は不要です。記事内のすべてのリンクは新しいタブで開きます。

箇条書きリストと番号付きリストは、“unordered list(ul)”タグと“ordered list(ol)”タグで追加できます:

リスト内の各項目はリストアイテム(li)タグ内に配置してください。

箇条書き(unordered)リスト:

<ul>
<li>First bulleted list item</li>
<li>Second bulleted list item</li>
</ul>

番号付き(ordered)リスト:

<ol>
<li>First numbered list item</li>
<li>Second numbered list item</li>
</ol>

ヒント:入れ子リストの場合は、別のリストアイテム内に“ol”または“ul”タグを含めてください。

YouTube、Wistia、Vimeo、Loom、Vidyard、StreamIOの動画はiframe(インラインフレーム)タグで追加できます:

<iframe src=”https://www.youtube.com/embed/jqO8AQHj7Fw”></iframe>

注意:動画の“src”属性には直接の動画リンクではなく、embed用URLを使用してください。サポートされていないURLを送信するとAPIリクエストが失敗します。

コードはインラインまたは“pre”および“code”タグのコードブロックで追加できます。

コードブロック:

<pre><code>This is a code block, perfect for larger blocks of code</code></pre>

段落内のインラインコード:

<p>This paragraph contains some <code>inline code</code>.</p>

記事のスタイリング

太字には“b”または“strong”タグを使用してください:

<p>This paragraph contains <b>bold words here</b> and <strong>here</strong></p>

斜体には“i”または“em”タグを使用してください:

<p>This paragraph contains <i>italic words here</i> and <em>here</em></p>

注意:記事作成時、“strong”タグは“b”に、“em”タグは“i”に変換されます。

見出し、段落、画像、ボタンは中央揃えにできます

見出し、サブ見出し、段落

h1、h2、pタグに直接“intercom-align-center”クラスを追加してください:

<h1 class=”intercom-align-center”>This heading is centered</h1>
<h2 class=”intercom-align-center”>So is this subheading</h2>
<p class=”intercom-align-center”>This paragraph is also centered.</p>

画像とボタン

画像やボタンを中央揃えにするには、“intercom-align-center”クラスを適用した“div”タグで囲む必要があります:

画像:

<div class="intercom-align-center">  <img src=”https://examply.io/image.jpg”/></div>

ボタン:

<div class="intercom-align-center">
<a class="intercom-h2b-button" href="https://examply.io">Centered Button</a>
</div>

重要:これらは唯一サポートされる“div”タグです。その他の“div”タグは段落タグに変換されます。

テーブル

“table”タグには少なくとも1行(“tr”)と1セル(“td”)が必要です:

<table>
<tr>
<td>

</td>
</tr>
</table>

注意:

  • テーブルは他のテーブル内に入れ子にできません。

  • theadtfoottbodyタグを送信した場合、その内容は通常の行として扱われます。

区切り線(水平線):

<hr>

サポートされていないものは?

Divとspan

送信された“div”または“span”タグはすべて“p”タグに置き換えられます。

注意:これは、中央揃え用にサポートされている2つの特定のdivコンテナ(imgタグを囲むものと、intercom-h2b-buttonクラスを持つaタグを囲むもの)を除きます。これらは「見出し、段落、画像、ボタンは中央揃えにできます」セクションで説明されています。

フォームと入力

“form”、“input”、“textarea”タグとその内容は記事本文から削除されます。

スクリプト

カスタムCSSやJavascriptの使用はサポートされていません。“script”タグとその内容は記事から削除されます。これにより、記事内のボタンはonclickハンドラーを使えず、スタイル付きリンクとして表示されますが、クリック時にJavaScriptは実行されません。Messengerをボタンから開くには、Intercomがインストールされたアプリ内のページにリンクし、そこでJavaScript(例:Intercom('show'))でMessengerを起動してください。

その他の要素

この記事に記載されていないタグや属性(例:"width"や"height")はすべて段落タグに置き換えられます。これには“head”、“html”、“footer”、“meta”などが含まれます。


Help Center記事コンテンツのエクスポート

Articles APIを使って、Help Center記事のHTML本文、タイトル、メタデータ、ローカライズデータを含む完全なコンテンツをエクスポートできます。各記事はIDで個別に取得されます。認証にはAPIキーが必要です。

Intercom UIからの記事エクスポートはサポートされていません。記事コンテンツをプログラム的に取得するには、APIリファレンスドキュメントを使用してください。リファレンスには完全なレスポンススキーマ、利用可能なフィールド、認証要件が記載されています。

こちらの回答で解決しましたか?