外部サービス連携とは

codocと導入先サイト間で機能連携ができる、外部サービス連携ついて説明します。

これは何?

codocを利用しているサービス・クリエイターと、コンテンツ購入者にとって最適化された管理画面やコンテンツ管理方法を提供する機能です。 クリエイターがこれを有効にした場合、購入者の管理画面において購入・購読画面において当該クリエイターの商品のみ表示されるようになったり、管理画面や購入メールに利用されるロゴをクリエイターのものに変更するといったことが可能です。 また、クリエイターのサイト内でcodocのログイン状態を表示するウィジェットやcodoc管理画面に存在する購入・購読画面の機能もサービス連携時にウィジェット化され利用することができます。

どのようなケースで使うか?

  • 購入者が利用するcodoc管理画面のデザインを替えたい
    • 管理画面や決済画面のロゴや、色味をカスタマイズできます
  • サイト内でcodocのログインボタンを設置したい
    • codocにログインするためのボタンを設置できます
  • サイト内で購入履歴閲覧やサブスクの管理を行いたい
    • codoc管理画面内にある機能をサイト内で提供可能です

どうやって使うか?

アカウント設定画面よりこの機能を有効にできます。有効にした後はプロフィール設定画面に移動し許可URLを必ず指定してください。許可URLは設置先のURLとなります。個別のページではなく、TOPページにあたるものをご指定ください。この設定がおこなわれないと機能動作がしないためご注意願います。

アカウント設定画面
アカウント設定画面
プロフィール設定画面

以上でベースとなる設定は完了です。

購入者向け管理画面のデザイン

デザイン変更はプロフィール画面より実施してください。ロゴについては推奨となるサイズにてアップロードをおこなうだけです。管理画面CSSにはテーマ色を選べるようになっており、カスタム選択時においては各所の色指定をカラーピッカーにて指定可能です。

カスタマイズされた購入者向け管理画面

サービス連携ウィジェットの設置

サイト内にログインボタンや、購入履歴の表示機能を導入するには外部サービス連携時に利用できる専用ウィジェットの貼付けをおこなうだけで完了します。ウィジェットは管理画面内のウィジェット→サービス連携から取得できます。

ただし、これらのウィジェットはcodocのスクリプトタグを改変しないと利用できない仕様となっています。

  1. cms.js のスクリプトファイル名を cms-connect.js に変更
  2. data-connect-code=”サービス連携コード”を追加(サービス連携コードはアカウント画面で取得できます。)

となります。

<script src=”https://codoc.jp/js/cms.js”>

変更後

<script src=”https://codoc.jp/js/cms-connect.js” data-connect-code=”サービス連携コード”>

変更後

これらは手動で変更することでも問題ありませんが、codoc管理画面内のウィジェット→サービス連携画面で表示されるJavascriptタグをコピーし、従来あったものと置き換えることでも可能です。

WordPressプラグインをご利用の場合はスクリプトタグの変更は行わず、WP管理画面の設定→codocより、クリエイター情報の更新をするをクリックし、変更を保存してください。以下のように、「外部サービス連携済」と表示されれば完了です。

更新前
更新後

上記の設定が完了したあとは外部連携のウィジェットをサイト内の適切な位置に貼り付けます。

ログインウィジェット

購入ウィジェット

ログイン中の場合、購入履歴が表示されます

サブスクリプションウィジェット

ログイン中の場合、契約中の月額・年額サブスクリプションが表示されます。

codoc→サイトへの遷移時に変更点があります

初回(ログイン・購入時含む)と、2回目からの遷移時において以下のような確認が入るようになります。

初回
二回目以降

途中から有効にできるか?

運用中であっても、有効にできますし、無効にもすることも可能です。ただし、以前より購入しているユーザーについては一律で有効になることはありません。再度コンテンツ購入や、アクセスがあった段階で初回の連携確認が済んだ段階で機能が有効になります。

まとめ

外部サービス連携について説明をおこないました。上述のとおり、サイトのデザインをcodoc側へある程度反映することや、サイト内にて購入履歴を表示できるようなります。ユーザーは通常の販売方法と比較し、より違和感なくコンテンツを購入・管理できることができると思います。

外部コンテンツ(HTML)とは

記事編集画面で利用できる外部コンテンツ(HTML)について説明します。

まず、外部コンテンツについてですが、「ペイウォール外にあるコンテンツへ認証を引き継ぐ」ための機能です。2021年6月現在はHTMLとMatterportの2種類の外部コンテンツがサポートされています。

これは何?

この機能を使うと、ページ全体や特定箇所に対しペイウォールでの認証を利用したコンテンツ保護が行えます。認証をおこないたいHTML内で外部コンテンツ(HTML)のタグを貼り付けてください。

いつ使うか?

運営するサイト内にて特定ページを有料化したい場合にご利用いただけます。codocのペイウォールではJavascript等の動作やサイトレイアウトに支障が出る、コンテンツの管理をサイト内にとどめたい場合等の課題に対応できます。

どうやって使うか?

外部コンテンツは記事の新規投稿時には登録できないため、いったん下書きにした後、編集画面より以下の作業をおこなってください。

  1. 有料化したいHTMLを用意します。
  2. 記事の価格を指定します。単体ではなくサブスク販売にする場合は適宜サブスクリプションを指定します。
  3. 外部コンテンツの登録をおこないます。コンテンツタイプはHTMLとし、適宜ラベルを指定し、HTMLに適当な文字列をいれて登録(URLとHTMLについては後述します)。
  4. 一覧に指定したラベル名で表示されるので登録した外部コンテンツ(HTML)のタグを取得します。
  5. 取得したタグを有料化したいHTMLに貼り付けます。

タグのコピーボタンから以下のようなタグがコピーバッファーにはいるので適宜作成したHTMLに貼り付けてください。

<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>

test.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>
<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 とし、authorize.htmlにはcodocの記事のタグを組み込んで設置します。購入前に外部コンテンツで保護されたHTMLページにアクセスするとauthorize.htmlに遷移します。外部コンテンツ(HTML)を利用する場合、codocアカウントは必須となるため、data-show-pay-without-account-button=”0″を貼付けタグの属性に追加し、「アカウント登録しないで購入」ボタンを非表示としています。モーダルでは購入ページをカスタマイズが十分におこなえないため、より詳細に購入についての説明をしたい場合などはリダイレクトを利用することをお勧めします。

まとめ

今回は外部コンテンツ(HTML)について説明をしました。codocの有料記事情報をもとにペイウォールの外にあるコンテンツに対しての認証が可能になることがおわかりいただけたと思います。この機能を利用することによりcodocのCMSに依存しないでコンテンツ運用できることも場合によってはメリットとなるのではないでしょうか。サイト内でのコンテンツ販売時において本機能をご検討いただければ幸いです。