このページでは「ダイレクト課金サービス codoc についての紹介」および「codoc の投げ銭機能のワードプレスサイトへの導入方法の解説」をしていきたいと思います！
この codoc、すごくいいサービスで、これが流行ればウェブ上にもっと有益な記事が増えて更に欲しい情報が手軽に手に入る世の中になるのではないかと考えています。この辺りの理由等も含めて、codoc について紹介していきたいと思います。
ちなみに codoc は「コードク」と呼ぶらしいです。孤独ではない…。
Contents
codoc とは
では、まずは codoc がどんなサービスであるかについて解説していきます。
ここでは要点だけ解説していきますが、codoc の公式サイトで詳しく解説してありますので、不明点などありましたら下記リンク先の codoc の公式サイトをご参照いただければと思います。
記事へのダイレクト課金を実現するサービス
最初に少し触れたたように、codoc は記事へのダイレクト課金を実現するサービスです。
具体的には、大きく分けて下記の２つの機能を自身が製作しているウェブサイトで利用することができます。
- サポート
- 記事の販売
サポートはわかりやすくて、いわゆる「投げ銭」機能です。YouTube でいう「スパチャ」ですね。記事に下の図のようなボタンを設置することで、このボタンから投げ銭を受け付けるようにすることができます。
サポートに関しては、読者が価格を 100 円から 10000 円の間で自由に決定できるようになっています。
また記事の販売は、記事の一部に制限をかけ、課金した人しか閲覧できないようにする機能です。記事を読んでいて「ここからは有料記事になります」みたいなメッセージが表示されて以降の記事が読めなくなった経験をお持ちの方も多いと思います。codoc を利用することで、これを自身のブログで実現することができるようになります。
この記事の販売には、単体販売とサブスクリプション販売があるようです。
ちなみに私が現状利用しているのはサポートのみですので、ワードプレスでの codoc（サポート機能）の利用方法 では主にサポート機能を自身のウェブサイトで利用する方法について解説します。
スポンサーリンク
ワードプレスで製作したウェブサイトでも利用可能
この codoc は様々な形式のウェブサイトやブログで利用可能なサービスであり、ワードプレスで製作したウェブサイトでも利用可能です！
要は、ワードプレスのプラグインに codoc があって、それを利用することでダイレクト課金サービスを利用することができるようになります。
会員登録やプラグインの設定も必要ですが、それさえ行えば記事の最後に自動的にサポートボタンを設置したり、ウィジェットとして好きなエリアにサポートボタンを配置するようなことも可能です。
利用は無料だけど手数料等は必要
また、codoc の利用自体は無料です。
ただ、サポートや販売での売上金額の 15% は手数料として徴収されますし、貯まった収益を口座に振り込む際にも毎回 300 円かかります。
例えばサポートで 1000 円の支援が 10 回発生した際には、毎回のサポートで得られるあなたの収益は 850 円になります。そしてそれが 10 回発生したので計 8500 円があなたの合計収益ということになります。
また、収益が発生したからといって即座に口座振り込みが行われるわけではなく、口座に振り込みを行う際にも手続きが必要になります。そして、その手続きを行う際に手数料として 300 円がかかることになります。
ちなみに codoc pro というサービスもあって、こちらは利用料が有料になります。例えば記事の販売価格の上限を引き上げることができるなどのメリットもあるようです。
とりあえず私は通常の codoc を利用していますが、現状では不便を感じたことはないです。
流行ればもっと有益な記事がウェブ上に増える？！
大体 codoc のサービス内容はこんな感じになると思います。
この codoc の特にサポート機能はすごくいいサービスだと思うんですよね。もちろんブログ運営している方からすれば収益が増えるメリットがありますし、ブログ運営していない方にもメリットがあるのではないかと思います。
ブログ運営していない方にもメリットがあるのは、サポートのようなブログ運営者を支援するサービスが流行れば、もっとウェブ上に有益な情報が増えるようになるからです。
現状、ブログ運営における収益の柱の１つはアフィリエイトです。もちろんアフィリエイトは素晴らしい仕組みのサービスですし、このアフィリエイトがあるからこそ、商品やサービスの情報であったり、実際に使ってみた感想などをウェブ上からたくさん得られるようになっています。
ただその一方で、アフィリエイト広告を出していない商品の情報や、そもそもアフィリエイト広告に繋がらないような記事が少なくなる傾向もあると思います。
私も含め、やっぱりブログ運営するのであれば収益が欲しい人も多いですので、収益が期待できる「アフィリエイト広告を出している商品やサービス」の紹介記事を書きたいと思う人が多くなるのは、アフィリエイトが収益の柱である以上、ある程度しょうがないのかなぁと思います。
もちろん収益を気にせずブログを運営されて有益な情報を発信されている方もおられると思いますが…。
で、こういった状況を変えることできるのが、ダイレクト課金のサポートシステムだと思うんですよね。
このサポートシステムが収益の柱になれば、アフィリエイト収益への依存が減り、ブログ運営者はアフィリエイト収益につながるかどうかを気にせず記事を発信することができるようになります。
そうなることで、元々アフィリエイト収益に繋がりにくいようなジャンルや内容の記事も増えていくと思いますし、ブログ運営者が本当に伝えたい情報の記事のみを発信することもできるようになります。
こうなれば、ウェブ上から得られる情報の幅も広がりますし、商品を買わなくてもブログを読むだけで読者の課題を解決できるような記事も増えていくと思うんですよね。
もちろん、ブログ運営者はサポートしてもらえることでモチベーションも上がりますので、記事を読んで課題を解決してくれたブログの運営者をサポートボタンで支援することで、その運営者の記事が増え、他の新たな課題を解決できることに繋がる可能性もあります。
こんな感じで、サポート機能が流行れば、よりウェブ上に公開されている記事に有益なものが増え、それによりウェブの情報だけで課題が解決できることが増えるというメリットが読者も得られるのではないかと思います。
イメージとしては、下の図のような好循環が生まれると思うんですよね！
で、ネット情報の記事は消さない限り残り続けますので、自分たちだけでなく、子孫まで含めてメリットのある話なんじゃないかなぁと思います。
こういった理由から、私は codoc のようなブログのダイレクト課金、特に運営者をサポートする機能は流行って欲しいと考えていますし、ちょっとでも codoc の存在を知って欲しいと思い、この記事を発信することにしました。
codoc 以外にもブログのダイレクト課金サービスは存在しますので、codoc 以外でもそういったサービス全般が流行れば嬉しいですね！いろんなサービスが増えれば、価格競争が起きて手数料の値下げにもつながるかも…！
スポンサーリンク
ワードプレスでの codoc（サポート機能）の利用方法
大体 codoc がどんな機能であるかは理解していただけたでしょうか？
続いては、ワードプレスサイトに codoc を導入する手順について解説していきます！
codoc の会員登録を行う
まずは、codoc のサービスを利用するにあたって、codoc の会員登録を行う必要があります。
下記リンクから codoc のトップページに飛べますので、
画面右上にある 無料で始める ボタンをクリックします（画面中央付近にある Twitterで始める ボタンや Facebookで始める ボタンからでも会員登録できるはずですが私は未確認です）。
すると、下の図のような画面に遷移しますので、ここでニックネームやメールアドレスの情報登録等を行います。ブログ運営者の方であれば、下から二番目のボタンは クリエイターとして を選択すれば良いです。
必要な情報入力後、登録 ボタンをクリックすれば、登録したメールアドレスにメールが送信されてきます。そのメールにある メールアドレスを認証する ボタンをクリックすれば登録完了となるはずです（ちょっとうろ覚えですが…）。
以上で会員登録は完了です。
会員登録後に再度下記リンク先から codoc の公式サイトに行けば、自動的にログインされて自身の codoc 会員ページが表示され、そこで売上等の情報が確認できます（自動的にログインされない場合は、ログイン ボタンから手動でログインしてください）。
口座情報を設定する
会員ページからは口座情報を設定することができます。
会員ページの右上に表示されるニックネームをクリックして表示されるメニューから 口座情報 をクリックすれば、口座情報の設定を行うことができます。
得られた収益を自身の口座に振り込むために必要な設定になるので、早めに設定しておくことをオススメします（サポートボタンの設置は口座情報の設定が済んでいないくても可能です）。
スポンサーリンク
codoc のプラグインをインストールして有効化する
続いて、ワードプレスの管理者画面から codoc のプラグインのインストールを行います。
まずワードプレスのダッシュボードを開き、左側のメニューから プラグイン をクリックし、さらに 新規追加 をクリックします。
すると、プラグインの検索画面に移動しますので、画面上部の検索フォームに codoc と入力しましょう！これにより、検索結果として codoc のプラグインが表示されますので、今すぐインストール ボタンを押します。
インストールボタンを押すとインストールが開始されます。さらに、インストールが完了すれば 有効化 ボタンが表示されますので、そのボタンを押します。これで codoc のプラグインのインストール及び有効化は完了です。
プラグインと会員情報の紐付け
プラグインの有効化が完了すれば、次はインストールした codoc プラグインと codoc の会員情報の紐付けを行います。
おそらく先ほど 有効化 ボタンを押したことで、インストール済みプラグインの一覧画面に自動的に遷移していると思います。
もし遷移していなかった場合は、ダッシュボード左側の プラグイン をクリックしてください
また、これから行う紐付け設定は、ダッシュボード左側の 設定 → codoc からでも行うことが可能です
その中に先ほどインストールした codoc プラグインもあるはずなので、まずはそれを見つけます。見つけたら 設定 のリンクをクリックします。
そうすると、codoc プラグインをインストールした直後の場合、下の図のような画面が表示されます。
すでに codoc の会員登録が完了しているのであれば、まずは ログインして認証 ボタンを押します（もし、まだ会員登録が終わってないのであれば、登録して認証 を押して codoc の会員登録を行う必要があります）。
ログインして認証 ボタンを押した際に、まだ codoc へのログインが保持されている場合、下の図のような画面が表示されるはずです。グレーで塗りつぶしてある部分には codoc の会員登録時に登録したメールアドレスが表示されます。
認証する ボタンを押せば、下の図の「codoc 設定ページ」に遷移し、画面上部に codocの認証が完了しました と表示されるはずです。これで、codoc プラグインと codoc の会員情報の紐付けが完了です。
もし、ログインして認証 ボタンを押した際に下の図の画面が表示された場合は、codoc からログアウトされている状態になっていますので、登録したメールアドレスとパスワードを入力して ログイン ボタンを押してください。
そうすると、先ほど紹介した下の図の画面が表示されますので、同様に 認証する ボタンを押せば、codoc プラグインと codoc の会員情報の紐付けが完了します。
codoc プラグインと codoc の会員情報の紐付けが完了しましたので、以降、プラグインで設置したボタン等からダイレクト課金が発生した際には、紐付けした会員への売上として計上されることになります（あなたの売上になる）。
プラグインの設定
続いてプラグインの設定を行なっていきます。先ほど codoc プラグインと codoc の会員情報の紐付けが完了した際に「codoc 設定ページ」が表示されたと思います。
codoc プラグインの設定は、この「codoc 設定ページ」から行います。
codoc の設定ページはダッシュボード左側の 設定 → codoc から表示することが可能です
ざっと見ていただければ分かる通り、設定項目自体は結構多いです。が、設定不要な項目も多いです。
正直私も理解できていない設定が多いですが、私が理解している設定や変更している設定について紹介していきたいと思います。前述でも触れましたが、私が採用しているのはサポートボタン（投げ銭受付ボタン）のみですので、ここからはサポートボタンを設定するための手順に絞って解説させていただきます。
テーマ
codoc での課金受付はボタンから行われます。そのボタンの見た目を設定するのがテーマです。
私はデフォルト設定の 青 のままにしているので、サポートボタンは下の図のような見た目になります。
例えば 赤（四角） を設定した場合は、下の図のようにサポートボタンの見た目が変化します。
各種文言
各種文言を設定することで、”いいね” ボタンの有無や、ボタンに表示するテキスト、ボタンの上側に表示するテキスト等を設定することができます。
例えば下の図のように設定した場合、
サポートボタンは下の図のような見た目になります。
ただ、私が試した時は「いいね」ボタンを ON にしても表示されませんでした。サポートボタンだと出ないのかな？ちょっとこの点は謎です。
サポートの自動挿入
次の サポートボタンを自動挿入する で解説します。
その他
上記以外の設定に関しては、私は何も変更せずに使用しています。
HTML や属性を追加することで、より詳細な見た目の設定などが行えそうですが、とりあえずサポートボタンを追加するだけであれば上記の設定のみで問題ないと思います。
スポンサーリンク
サポートボタンを自動挿入する
続いて、サポートボタンの設置を行なっていきたいと思います。
今回は、サポートボタンを設置する方法として、下記の２つを紹介していきます。
- サポートボタンを自動で記事の冒頭 or 末尾に挿入する
- ウィジェットとして好きなエリアにサポートボタンを配置する
上記以外にも、投稿記事の編集画面で codoc ブロックを選択して挿入することで、記事内の好きな位置にサポートボタンを追加するようなこともできるようです（記事の販売の設定も可能）。
ですが、私が先ほど試した時に上手くボタンの表示ができなかったので、とりあえず現状は上記の２つの方法のみ紹介していきたいと思います（上手く表示できるようになったら記事を更新したいと思います）。
まず、サポートボタンを自動で記事に挿入する方法ですが、サポートボタンの自動挿入は先ほどプラグインの設定を行なった「codoc 設定ページ」の「サポートの自動挿入」の設定により行うことができます。
自動挿入
「自動挿入」の項目で する を選択すれば、全投稿記事に対してサポートボタンが自動挿入されるようになります（固定ページには挿入されないはず）。
表示位置
続いて「表示位置」の項目で、サポートボタンを自動挿入する位置を選択します。
冒頭 を選択した場合は、記事本文の最初にサポートボタンが追加されます。それに対し、末尾 を選択した場合は、記事本文の最後にサポートボタンが追加されます。
説明文
また、サポートボタンの上側に表示されるテキストを「説明文」により設定することができます。例えば説明文に 支援していただけると大変嬉しいです と入力しておけば、下の図のようにボタン上側のテキストが変化します。
「各種文言」の設定でもボタン上のテキストを設定することはできるのですが、試した感じだと、自動挿入で記事に挿入されたサポートボタンに関しては、この「サポートの自動挿入」の「説明文」に設定したテキストが表示されるようです。
対象カテゴリ名
もし、全ての投稿記事ではなく、特定のカテゴリの投稿の記事に対してのみサポートボタンの自動挿入を行いたいのであれば、「対象カテゴリ名」に挿入を行いたいカテゴリ名を設定します。
カテゴリのスラッグではなく、カテゴリ名を設定する必要がある点に注意してください。また、複数のカテゴリを設定する場合は、カテゴリ名と | の間にスペースを入れずに入力する必要があるようです。
例えばカテゴリ名が CSS・HTML・ブログ運営 であるカテゴリの投稿記事に対してのみサポートボタンを自動挿入したいのであれば、下記のように対象カテゴリ名欄に入力する必要があります（試した感じだと、大文字小文字も区別して判別されるようでした）。
CSS|HTML|ブログ運営
設定の反映
以上の設定を必要に応じて行い、最後に「codec 設定ページ」の一番下にある 変更を保存 ボタンを押せば、設定が反映され、設定した通りにサポートボタンが記事に挿入されているはずです。
サポートボタンをウィジェットとして追加する
続いてサポートボタンをウィジェットとして追加する方法について解説していきます。
自動で挿入する場合、記事の冒頭 or 記事の末尾にしかサポートボタンを配置できませんでしたが、ウィジェットとしてサポートボタンを用意することで、ウィジェットが配置可能ならエリアであればどこにでもサポートボタンを配置することができるようになります。
今回は「カスタム HTML」ウィジェットを利用し、サポートボタンを表現する HTML のコードを設定することで、サポートボタンのウィジェットを実現していきます。
ボタンの設定を行う
まず、記事に設置するサポートボタンの見た目等の設定を行います。
そのために、まずは codoc の会員ページに移動します。
下記リンク先の codoc のウェブサイトに飛べば、すでにログインされている方は自動的に会員ページが表示されるはずです。ログアウトしてしまっている方は、ログイン ボタンからログインして会員ページに移動してください。
会員ページに移動したら、ページの左側のメニューにある ウィジェット をクリックします。
すると、下の図のような画面に移動すると思いますので、次は デザイン のタブをクリックします。
すると、ボタンのデザインの設定画面が表示されます。設定できることは、プラグインの設定 とほとんど同じなので説明は省略しますが、サポートボタンのデザインを設定するために下記の３つは設定しておくと良いと思います。
テーマを選択：- ボタンの見た目（色や形）を設定
サポートボタンのテキスト：- ボタン内の表示テキストを設定
サポート説明のテキスト：- ボタンの上の表示テキストを設定
追加CSS を設定することで詳細に見た目を設定することもできるかもしれませんが、今回は説明は省略します。
最後にページ一番下の 保存 ボタンを押すことで、設定したデザインを保存することができます。
ボタンの HTML を取得する
続いてページの一番上に戻り、今度は サポート のタブをクリックします。
クリック後に表示される画面の下の方に移動すれば、サポートボタンのサンプルが表示されているはずです。これが、先ほど設定したデザインのボタンになります。
そのデザインで問題なければ、その上側にある 貼り付けタグを表示 ボタンを押します。
すると、下のような画面が表示されるはずなので、JS+要素 か 要素のみ のどちらかを選択します。今回はウィジェットとしてカスタム HTML を利用するので、要素のみ の方を選択したいと思います。
さらに選択後に クリップボードにコピー ボタンを押せば、選択した方のコードがクリップボードにコピーされます。
カスタム HTML ウィジェットを追加する
続いて、コピーしたコードを用いてウィジェットを作成していきます。
まずワードプレスのダッシュボードに戻り、画面左側の 外観 → ウィジェット からウィジェット設定画面を表示します。
続いて、サポートボタンを追加したいエリアを選び、クリックしてエリアを開きます。例えばサポートボタンをサイドバーに追加したいのであれば、サイドバー をクリックします。
クリックすれば、そのエリアに追加済みのウィジェットが表示されるはずです。その中の一番下にある + ボタンをクリックします（ウィジェットが１つも追加されていない場合、横長の + ボタンが表示されるはずです）。
すると、追加するウィジェットが選べるようになっていますので、検索フォームに HTML と入力します。そうすればカスタム HTML が検索結果として表示されるはずです。
取得した HTML をコピペする
その表示されたカスタム HTML をクリックすれば、次は HTML の入力画面が表示されますので、そこに先ほどコピーしたコードをペーストします。
さらに、必要に応じ、下の図のバーのボタン操作により、エリア内のウィジェットの位置の移動を行います。
ペーストとウィジェットの移動後、ウィジェット設定ページの右上にある 更新 ボタンを押せば、サポートボタンがウィジェットとして追加されたことになります。
自身のウェブサイトの記事を表示すれば、おそらくウィジェットを追加したエリアにサポートボタンが表示されているはずです。
自動挿入したサポートボタンのテキストも変わってしまう？
上記の手順でウィジェットでのサポートボタンの追加はできるのですが、どうも「ウィジェットでのサポートボタンの設置」と「自動挿入でのサポートボタンの設置」の両方を行うと、自動挿入したサポートボタンの方のテキストがウィジェット側で設定したテキストで上書きされてしまうようでした（別のテキストを設定したのに両方同じになってしまう）。
ちょっと理由は分からないのですが、もし同じ状況になった方がおられましたら、とりあえず現状は個別に設定できないと割り切って同じテキストでサポートボタンを利用するしかないかなぁと思います。
まとめ
このページでは、ダイレクト課金サービス codoc について紹介し、さらに、投げ銭を受け付ける「サポートボタン」をワードプレスで製作したウェブサイトに設置する方法・手順について解説しました！
ダイレクト課金サービスをブログに導入することで、ブログ運営者にとってもメリットがありますし、ウェブ上により有益な情報が増えることにつながると思いますので、是非とも流行って欲しいですね…！
割と詳しく説明したので記事としては長くなりましたが、やること自体は単純なので簡単にあなたのウェブサイトで codoc を導入することができると思います。
こういった良いサービスはどんどん流行って欲しいと思っていますので、気が向いたら是非あなたのサイトでも導入してみてください！
