Freo Template Gallery

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

プラグイン解説::Tumblr on freo

プラグイン解説の第3回では、freoにtumblrに投稿した記事の新着情報を掲載できるプラグイン「Tumblr on freo」を取り上げます。

  1. どんなことができるのか
  2. ファイルを用意しよう
  3. テンプレートを編集しよう
  4. APIの準備をしよう
  5. 設置してみよう
  6. 実際に使ってみよう
  7. うまく動かないときの対処法
  8. カスタマイズしてみよう

どんなことができるのか

ブログサービス「Tumblr」に投稿した新着記事や画像を、新着順にfreo上に掲載できるプラグインです。

利用シーンとしては、たとえば投稿が手軽で共有・拡散機能のあるTumblrをメインギャラリーとして、freo上では創作活動の告知を掲載するといったサブブログとして運営することができます。

すでにTumblrで長らく記事投稿している場合でも、「いままではTumblrを使っていたけれど、機能面で物足りないのでCMSでウェブサイトを作りたい」というときにでも、すでに投稿済みの記事を再投稿する手間もなく移行することができます。

ファイルを用意しよう

Tumblr on freoのページからプラグインファイルをダウンロードしましょう。

なおこのプラグインはfreo公式外で配布されているプラグインです。第三者提供によるプラグインはfreo公式およびないとさんとは別人が制作・配布しています。そのプラグインに対して問い合わせがある場合、freo公式ではなく各プラグイン制作者あてに問い合わせましょう。

011.png

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

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

テンプレートを編集します。今回は第2回と同じくトップページに掲載してみましょう。もちろん他のテンプレートページに掲載すれば、他のページにも掲載できます。

  • templates>internals>default>default.html

上記ファイルをテキストエディタで開きます。

031.png

{include file='header.html'}
<div id="content">
※ここにソースを追加する※
<!--{if $freo.config.view.information and !$smarty.get.category}-->
<div id="information">

プラグイン用のソースを貼り付けます。先ほどの位置に下記ソースをコピーペーストしましょう。

<!--{if $smarty.request.freo.mode == 'default'}-->
    <!--{if $tumblronfreo|smarty:nodefaults}-->
    <h3>{$tumblronfreo.info.response.blog.title}</h3>
    <div class="content">
        <p>{$tumblronfreo.info.response.blog.description}</p>
        <p class="gallery">
        <!--{foreach from=$tumblronfreo.post.response.posts|smarty:nodefaults item='tof'}-->
        <a href="{$tof.post_url}">
            <!--{if $tof.photos.0.alt_sizes.0.url}--><img src="{$tof.photos.0.alt_sizes.5.url}" alt="{$tof.id}" width="{$tof.photos.0.alt_sizes.5.width}" height="{$tof.photos.0.alt_sizes.5.height}" />
            <!--{else}-->{$tof.date|date_format:'%Y/%m/%d'} {$tof.title}
            <!--{/if}-->
        </a>
        <!--{/foreach}-->
        </p>
        <p><a href="http://{$freo.config.plugin.tumblr_on_freo.domain}/">すべて表示する</a></p>
        </div>
    <!--{/if}-->
<!--{/if}-->

032.PNG

以上でテンプレートの編集は完了です。次はTumblrのダッシュボードからAPIKeyを取得します。

使用上の注意

今回のテンプレート編集は「画像」「文章」タイプに特化した内容になっています。それ以外の投稿形式は表示されない場合があります。

APIの準備をしよう

Tumblrの記事を外部から参照できるようになる「APIKey」を取得します。

Tumblrにログインした状態で「Applications」を開きます。

ダッシュボード（記事投稿画面）から上記ページに移動したい場合は、下記の順番で遷移してください。

ダッシュボード上部の歯車の形をした設定アイコンをクリックします。

021.png

画面右側に表示されたメニューから「アプリ」をクリックします。

022.png

アプリ一覧が表示されます。参考画面ではすでに先に登録しているアプリがあるのでいくつか表示されてますが、まったく連携していない場合はなにも表示されません。

ページ下部の「アプリの開発に興味はありませんか？」と書かれているテキスト内から「登録」をクリックします。

023.png

緑色のボタンで大きく表示された「アプリを登録する」をクリックします。

024.png

必要な設定を入力します。

025.png

  1. 登録アプリの名前を入力します。わかりやすくするためのものなのでなんでもOKです。ここではプラグイン名の「Tumblr on Freo」といれました
  2. 最初からTumblr登録時のメールアドレスが入されています。
  3. 設置するページのURLを記入します。freoを置いたURLを記入しましょう。

以上を記入したら「Save changes」をクリックします。

アプリが登録されました。スクリーンショットではモザイクで隠していますが、「OAuth Consumer Key」に書かれている英数字がAPIKeyです。

026.png

無事発行されたAPIKeyをコピーし、保存しておきましょう。次はファイルのアップロードとセットアップです。

設置してみよう

まずサーバにファイルをアップする前に、あらかじめ管理ページにログインしておきます。これを忘れると以降のセットアップ作業が出来なくなるので忘れずログインします。

次に、FTPソフトを使って解凍したフォルダと先ほど編集したファイルをアップロードします。

アップロードが完了したら「http://設置したfreoのURL/index.php/setup」にアクセスすると、以下のようなページが表示されます。特に作業もないのでおもむろに「セットアップする」ボタンをクリックします。

setup01.png

以下の画面がでてきたらセットアップ成功です。

setup02.png

もしこの画面で「ご利用のサーバーは、PHPから直接パーミッションを設定することができない環境のようです。」と表示される場合は、FTPソフトを使って下記ファイルのパーミッションを変更します。

configs/plugins/tumblr_on_freo.ini
606 に設定
files/plugins/tumblr_on_freo.log
606 に設定

実際に使ってみよう

セットアップが完了したら、次は管理画面から設定を行います。

管理ページにログインします。左側から「設定管理」をクリックし、表示されたページの「Tumblr on Freo」をクリックします。

041.png

次に表示された設定画面で詳細を記入していきます。

042.png

  1. 表示するTumblrのURLを入力します。ただし「http://」と最後の「/」ははずして下さい。
  2. さきほど発行したAPIKeyを入力します。
  3. 取得したデータを保持する時間を決めます。最小で600秒（10分）です。
  4. 表示件数をいれます。最大20件です。
  5. Tumblrの7つある投稿形式を指定します。指定しない場合は「指定なし」のままにしておきます。

5番を特定形式に限定すると、freo上に掲載できる記事を指定できます。たとえばTumblrでイラストを画像形式で投稿し、感想や日記を文章形式で投稿していた場合、ここで「画像」と指定するとfreo上には画像記事のみ掲載できます。freo上には特定記事のみ掲載したい場合、ここで形式を限定しておくといいでしょう。

なおこのプラグインはリブログして掲載された記事も拾います。

最後に「設定する」をクリックして完了です。

051.png

トップページを開き、Tumblrの記事が表示されていたら設置成功です。

つまづきやすい点

エラーが出て記事が表示できない

  • 設定画面のTumblrのアドレスに「http://」と最後の「/」をつけていませんか？
  • 設定画面のAPIKeyを間違えていませんか？
  • キャッシュファイル（files/plugins/tumblr_on_freo.log）のパーミッションは適切に変更されていますか？
  • Tumblrに1件以上記事を投稿していますか？

なおTumblr自体が不調で接続できない場合は、しばらく時間を置いてから確認しましょう。

もし即座にキャッシュ破棄したい場合は、「files/plugins/tumblr_on_freo.log」を開いて中身を空にし、サーバ上の同ファイルを上書きするとキャッシュ削除になります。

カスタマイズしてみよう

TumblrのAPIでは20件までのという制限はありますが、ほぼすべての記事内容を取得できます。

かなり内容が多いため元記事内の「よく使うかもしれないもの」をご確認ください。

紹介されているパラメーターを{}で囲み、テンプレート内の<!--{foreach from=$tumblronfreo.post.response.posts|smarty:nodefaults item='tof'}-->～<!--{/foreach}-->内に記入すると表示することが出来ますので、デザインに懲りたい場合はいろいろ試してみるとよいでしょう。

なお前述のソースを良く見ると一箇所だけ「http://{$freo.config.plugin.tumblr_on_freo.domain}/」と記入された箇所がありますが、こちらはAPIから取得したデータではなく、freoの管理ページから設定した「TumblrのURL」を読み込んでいます。

Tumblrが不調でAPIから情報を取得できないときでもTumblr本体への導線の確保できるので、テンプレート上でURLを表示させたい場合はこちらのパラメーターを使用するといいでしょう。ただしパラメーターには「http://」がないため、HTML上で付与してください。

予告

前回と今回で同人活動や創作活動をする人にも近年普及しつつあるPixiv、Tumblrとfreoを連携させるプラグインを紹介しました。

これらをうまくつかえばSNSとfreoに作品掲載するために同じコンテンツを二度投稿するという手間を省けたり、SNSでは足りない情報をfreoで補足できたりと、お互いの利点を補いより広いウェブ活動ができるプラグインだと思います。

次回では、同じく近年ではもはやウェブ上の活動では活用必須ともいえるTwitterに関連したプラグインをご紹介します。

テンプレートを探す

人気のテンプレート

更新通知