記事編集画面で利用できる外部コンテンツ（HTML）について説明します。
まず、外部コンテンツについてですが、「ペイウォール外にあるコンテンツへ認証を引き継ぐ」ための機能です。2021年６月現在はHTMLとMatterportの２種類の外部コンテンツがサポートされています。
これは何？
この機能を使うと、ページ全体や特定箇所に対しペイウォールでの認証を利用したコンテンツ保護が行えます。認証をおこないたいHTML内で外部コンテンツ(HTML)のタグを貼り付けてください。
いつ使うか？
運営するサイト内にて特定ページを有料化したい場合にご利用いただけます。codocのペイウォールではJavascript等の動作やサイトレイアウトに支障が出る、コンテンツの管理をサイト内にとどめたい場合等の課題に対応できます。
どうやって使うか？
外部コンテンツは記事の新規投稿時には登録できないため、いったん下書きにした後、編集画面より以下の作業をおこなってください。
- 有料化したいHTMLを用意します。
- 記事の価格を指定します。単体ではなくサブスク販売にする場合は適宜サブスクリプションを指定します。
- 外部コンテンツの登録をおこないます。コンテンツタイプはHTMLとし、適宜ラベルを指定し、HTMLに適当な文字列をいれて登録（URLとHTMLについては後述します）。
- 一覧に指定したラベル名で表示されるので登録した外部コンテンツ（HTML）のタグを取得します。
- 取得したタグを有料化したいHTMLに貼り付けます。
タグのコピーボタンから以下のようなタグがコピーバッファーにはいるので適宜作成したHTMLに貼り付けてください。
<html>
test.html
<head>
<title>サンプル</title>
<!– codocのスクリプトタグ –>
<script src=”https://codoc.jp/js/cms.js” data-usercode=”” charset=”UTF-8″ defer”>
</head>
<body>
<div>hello world!</div>
<!– 外部コンテンツのタグ –>
<div id=”codoc-element-記事コード” class=”codoc-elements” data-auth-mode=”modal” data-auth-redirect-url=”” data-external-content-code=”外部コンテンツ毎にランダムな文字列”>
</body>
</html>
上記のように外部コンテンツ（HTML）タグを含んだHTMLを作成し、アクセスすると以下のようにペイウォールの購入フォームがモーダルで表示されます。このタグを貼らない場合はモーダルは表示される「hello world!」という出力がおこなわれます。アクセスしたユーザーはコンテンツの購入を行わないと本来表示される内容が閲覧できない仕組みが実現できます。
外部コンテンツ（HTML）によって保護されるコンテンツ内容について注意することがあります。張付け先のHTMLの内容についてユーザーインターフェース上、閲覧をすることは困難ですが、ブラウザのソース閲覧機能などをつかった場合、ペイウォールを介さないで内容が把握できてしまいます。このため、確実に保護したいコンテンツについては外部コンテンツで指定できるHTML、もしくはURL内に配置するようにします。上記、購入後のスクリーンショットでは「認証成功時に出るテキスト」という内容が表示されています。これは管理画面で指定した内容で、外部コンテンツのタグの位置に置き換わって表示される仕様となっています。当然ながらこの部分は動的に出力されるもののため、ブラウザのソース閲覧では確認できないものとなります。外部コンテンツ（HTML）の設定画面ではタグと置き換わるコンテンツの指定方法として前述で利用した「HTML」の他に「URL」があります。
上記の設定をおこなうと、購入時にURIで指定されたHTMLファイルを取得し、タグがその内容と置き換わります。上記の場合は相対パス指定となるため、設置するHTMLとおなじディレクトリ上に「test.content.html」というファイル名でHTMLを設置してください。ファイルの内容を「test.content.html 内に記述したテキスト」とし、有料化したいページ上で認証をおこなうと以下のように表示されます。
認証前は別ページに遷移させる
外部コンテンツ（HTML）では購入前にページへアクセスした場合、別ページに遷移させることも可能です。
貼付けタグの取得時にモーダルではなく、「リダイレクト」でタグを取得します。モーダルと違うのは“data-auth-mode”属性が”redirect”と指定されるだけですのでご自身で属性を変更いただくことでも問題はありません。また、手動で指定する属性がもうひとつあります。“data-auth-redirect-url” に遷移先のURLを指定してください。遷移先のページではコンテンツを購入するためのペイウォールが必要なことから、記事一覧で取得できる当該記事のcodocタグを取得し貼付けをおこないます。
<div id=”codoc-element-記事毎にランダムな文字列” class=”codoc-elements” data-auth-mode=”redirect” data-auth-redirect-url=”authorize.html” data-external-content-code=”外部コンテンツ毎にランダムな文字列”>
<html>
authorize.html
<head>
<title>サンプル</title>
<!– codocのスクリプトタグ –>
<script src=”https://codoc.jp/js/cms.js” data-usercode=”” charset=”UTF-8″ defer”>
</head>
<body>
<div>コンテンツを閲覧するには購入をお願いします。</div>
<!– codocの記事タグ –>
<div id=”codoc-entry-記事ごとにランダムな文字列” class=”codoc-entries” data-show-pay-without-account-button=”0″>この続きはcodocで購読</div></body>
</html>
上記は遷移先を authorize.html とし、authorize.htmlにはcodocの記事のタグを組み込んで設置します。購入前に外部コンテンツで保護されたHTMLページにアクセスするとauthorize.htmlに遷移します。外部コンテンツ（HTML）を利用する場合、codocアカウントは必須となるため、data-show-pay-without-account-button=”0″を貼付けタグの属性に追加し、「アカウント登録しないで購入」ボタンを非表示としています。モーダルでは購入ページをカスタマイズが十分におこなえないため、より詳細に購入についての説明をしたい場合などはリダイレクトを利用することをお勧めします。
まとめ
今回は外部コンテンツ（HTML）について説明をしました。codocの有料記事情報をもとにペイウォールの外にあるコンテンツに対しての認証が可能になることがおわかりいただけたと思います。この機能を利用することによりcodocのCMSに依存しないでコンテンツ運用できることも場合によってはメリットとなるのではないでしょうか。サイト内でのコンテンツ販売時において本機能をご検討いただければ幸いです。