Freo Template Gallery

CMS「freo」のテンプレートを画像つきで紹介しています。初心者にわかりやすい設置方法や創作サイト運営に役立つ情報を紹介しています。

プラグイン解説::Twitterフォロワー限定公開プラグイン

今回は、同人・創作活動をする人にも広く普及しているソーシャルサービス「Twitter」とfreoを連携させる「Twitterフレンド限定公開プラグイン」「Twitterフォロワー限定公開プラグイン」をご紹介します。

  1. どんなことができるのか
  2. ファイルを用意しよう
  3. テンプレートを編集しよう
  4. 設置してみよう
  5. 実際に使ってみよう

どんなことができるのか

まず前提として、freoはじめて物語(7) ユーザー管理機能を使いこなそうでも紹介しましたが、freoにはログインしたユーザーにだけ記事を投稿したり、閲覧できるようになる「ユーザー管理機能」があります。

通常このユーザー管理機能は設置したfreoごとにアカウント・パスワード・メールアドレスを登録することでログインできるようになりますが、今回のプラグインは特定のTwitterアカウントをフォローしていれば、前述の登録工程を通さずにゲストユーザー相当の閲覧権限をもたせることができるプラグインです。

二つのプラグインの違いをまとめるとこうなります。

  • 「フォロワー限定」は指定アカウントを自分のアカウントからフォローしていればログインできるようになる。
  • 「フレンド限定」は指定アカウントと自分のアカウントが互いにフォローしていればログインできるようになる。

たとえば企画やイベント主催などの専用Twitterアカウントを用意しておきそのフォロワーだけ閲覧できるプレゼントページを用意したり、フレンド限定プラグインを使えばお互いに相互フォローしている相手にだけ閲覧できる秘密のページを公開できるなど、同人・創作サイトなどでも活用する機会は多くあると思います。

閲覧者としてもサイトごとにアカウントやパスワードを覚えておくのはなにかと大変なものですが、普段使っているTwitterアカウントにログインしていればいちいちアカウントやパスワードを覚えておかなくてもログインできるようになる簡便さが得られます。

せひ、いろいろな機会で使ってみてくださいね。

では早速、解説に移りましょう。

ファイルを用意しよう

まずは下記ページから必要なファイルをダウンロードしてきましょう

ZIPファイルを解凍し、出力されたファイルをローカルにおいてあるfreoフォルダにコピーペーストで上書きします。

テンプレートを編集しよう

ではテンプレートファイルを編集します。今回は少々範囲が広く、4ページ分編集する必要があります。

201.PNG

202.PNG

203.PNG

  1. templates/internals/default/default.html
  2. templates/internals/file/error.html
  3. templates/internals/page/default.html
  4. templates/internals/view/default.html

以上4つです。

基本的に「{include file='plugins/twitter_followers/twitter_followers.html'}(フォロワー限定)」「{include file='plugins/twitter_friends/twitter_friends.html'}(フレンド限定)」という記述を指定の場所に追加していきます。下記ソースの位置にどんどん追加していきましょう。

templates/internals/default/default.html

<!--{if $entry_associates[$entry.id].option}-->
<dl>
    <!--{foreach from=$freo.refer.options|smarty:nodefaults item='option'}-->
    <!--{if $entry_associates[$entry.id].option[$option.id] != ''}-->
    <dt>{$option.name}</dt>
        <dd><!--{if $option.type == 'file'}--><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_options/{$entry.id}/{$option.id}/{$entry_associates[$entry.id].option[$option.id]}">{$entry_associates[$entry.id].option[$option.id]}</a><!--{else}-->{$entry_associates[$entry.id].option[$option.id]|nl2br}<!--{/if}--></dd>
    <!--{/if}-->
    <!--{/foreach}-->
</dl>
<!--{/if}-->

{include file='plugins/twitter_followers/twitter_followers.html'}
{include file='plugins/twitter_friends/twitter_friends.html'}

</div>

templates/internals/file/error.html

{include file='header.html'}
    <h2>エラー</h2>
    <p class="attention">{$message}</p>

    {include file='plugins/twitter_followers/twitter_followers.html'}
    {include file='plugins/twitter_friends/twitter_friends.html'}

{include file='footer.html'}

templates/internals/page/default.html

<!--{if $page_associate.option}-->
<dl>
    <!--{foreach from=$freo.refer.options|smarty:nodefaults item='option'}-->
    <!--{if $page_associate.option[$option.id] != ''}-->
    <dt>{$option.name}</dt>
        <dd><!--{if $option.type == 'file'}--><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_options/{$page.id}/{$option.id}/{$page_associate.option[$option.id]}">{$page_associate.option[$option.id]}</a><!--{else}-->{$page_associate.option[$option.id]|nl2br}<!--{/if}--></dd>
    <!--{/if}-->
    <!--{/foreach}-->
</dl>
<!--{/if}-->
{include file='plugins/twitter_followers/twitter_followers.html'}
{include file='plugins/twitter_friends/twitter_friends.html'}

<!--{if $plugin_page_childs|smarty:nodefaults}-->

templates/internals/view/default.html

<!--{if $entry_associate.option}-->
<dl>
    <!--{foreach from=$freo.refer.options|smarty:nodefaults item='option'}-->
    <!--{if $entry_associate.option[$option.id] != ''}-->
    <dt>{$option.name}</dt>
        <dd><!--{if $option.type == 'file'}--><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_options/{$entry.id}/{$option.id}/{$entry_associate.option[$option.id]}">{$entry_associate.option[$option.id]}</a><!--{else}-->{$entry_associate.option[$option.id]|nl2br}<!--{/if}--></dd>
    <!--{/if}-->
    <!--{/foreach}-->
</dl>
<!--{/if}-->

{include file='plugins/twitter_followers/twitter_followers.html'}
{include file='plugins/twitter_friends/twitter_friends.html'}

</div>
<ul class="link">

編集が終わったら保存してテンプレートの編集は完了です。

設置してみよう

編集したテンプレートとファイルをアップロードします。

次に管理ページにログインし、「http://~/index.php/setup」にアクセスしてセットアップを行います。

101.png

102.png

以上でセットアップは完了です。次に管理画面の設定に移ります。

管理画面の「設定管理」から「Twitterフォロワー限定公開」もしくは「Twitterフレンド限定公開」をクリックします。

301.png

302.png

「スクリーンネーム」には半角英数字でフォロー対象のTwitterアカウント名を記入します。

「対象グループ」にはfreoのユーザー管理で使用するグループ名を半角英数字で記入します。

以上を記入したら「設定する」をクリックして設定完了です。

実際に使ってみよう

まず必要な用意として大まかに言うと、ユーザーグループの作成、閲覧制限をかけた記事の作成、閲覧者であるユーザーにはTwitter認証の3つがあります。ひとつひとつ説明していきます。

  1. ユーザーグループを作る
  2. 閲覧制限をかけた記事を作る
  3. 閲覧者にTwitter認証してもらう

ユーザーグループを作る

ユーザー管理と閲覧制限の基本的な知識については、「freoはじめて物語(7) ユーザー管理機能を使いこなそう」でも紹介していますので参考にどうぞ。

では今回のプラグインではユーザー管理機能の「グループ管理」を主に使用します。

まずは管理画面の「グループ管理」を開き、表示されたページの「グループを登録する」をクリックします。

401.png

次に設置した際に設定した「対象グループ」と同じグループIDを作成します。

402.png

  1. 前述の「対象グループ」と同じ英数字を記入してください。
  2. 作成するグループの名前です。管理しやすい名前をつけてください。
  3. 何に使っているグループかといった補足情報を書き込んでください。

すべて記入したら「登録する」を押して作成完了です。

閲覧制限をかけた記事を作る

次に閲覧制限を書けた記事を作成します。

ユーザー管理機能を使って記事の閲覧制限を行うを参考に、エントリーもしくはページの閲覧制限機能を利用できる状態にしてください。

エントリーもしくはページ記事の投稿画面を開くと、最下部に閲覧制限フォームが出ています。

その中から「グループで制限」を選択すると先ほど作成したグループが表示されるので、任意のグループにチェックを入れてください(複数選択可)

420.png

記事本文など必要事項を記入し、最後に「登録する」で完了です。

なお閲覧制限を書けた記事を、権限のあるユーザー(管理者・投稿者・グループに所属しているゲストユーザー)がみると下記のように注釈が表示されます(テンプレートごとに見た目は変わります)

421.png

一方、閲覧権限のないユーザーが開こうとすると標準では制限のある記事は一切一覧などに表示されません。

422.jpg

制限記事をユーザー間でのみ閲覧できるようにしたいときにはこれで問題ありませんが、今回のTwitter認証プラグインとは基本的に「非ログインユーザーがfreo上でログインしないまま記事を読めるようにする」機能なので、非ログイン状態で完全に当該記事が見えなくなってしまうのはちょっと不便です。

そこで、次に閲覧制限はかかっているけど一覧には表示されるようにfreo本体の設定を変更します。運用方法によっては不要な場合もありますので、自分がどういった形でプラグインを使いたいか考慮したうえで以下を設定してください。

管理画面を開いて設定管理>表示設定をクリックし、一番下に表示されている「制限された記事の表示」を「一覧に表示する」に変更します。

423a.png

設定変更後に権限のない状態でページを開くと添付画像のような画面で表示されます。

424.png

以上で準備完了です。

閲覧者にTwitter認証してもらう

いよいよ閲覧者の人にTwitter認証してもらいましょう。ここでは閲覧者側からみた登録するまでの工程を紹介します。

非ログイン状態でTwitter認証グループに設定した記事の個別ページを開くと以下のような説明が出ます(今回はフォロワー限定プラグインを使います。フレンド限定プラグインでは文言が多少変わります)

410.png

指定アカウントをフォローしていることを前提に、フォローした状態のTwitterアカウントにログインします。

411.png

ログインとフォローがすんでいる場合は下記のような表示が出ます。

412.png

内容を確認し、問題なければ「連携アプリを認証」をクリックします。

Twitterにログインしたまま先ほどの閲覧できなかった記事を開くと、注釈つきで記事を閲覧することが出来ます。

413.png

なお、freoとの連携をなくしたい場合は各アカウントの「設定」から「アプリ連携」を開き、さきほど認証画面で出てきたアイコンとの連携を取り消してください。

予告

いかがでしたでしょうか。過去に紹介した記事の中でも比較的複雑なプラグインでしたが、一度設置すれば通常の閲覧制限と同じ感覚でSNS認証を行えるため、とても応用の幅広いプラグインだと思います。

次回はTwitter認証プラグインのカスタマイズ方法をご紹介します。

テンプレートを探す

人気のテンプレート

  1. freoテンプレート No.007
  2. freoテンプレート No.008
  3. freoの管理用テンプレート
  4. swallow
  5. Basic

更新通知