Freo Template Gallery

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

プラグイン解説::pixivイラスト表示プラグイン

第2回は、創作SNS「pixiv」に投稿した作品をfreo上にリスト表示できる「pixivイラスト表示プラグイン」を取り上げます。

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

どんなことができるのか

このプラグインを使うと、freoを使って作成したページ上に創作SNS「pixiv」に投稿したイラスト・漫画のリストを掲載できるようになります。

たとえば作品はPIXIVにアップし、freoのエントリー機能を使って活動履歴や近況報告を行い、ギャラリーページにはプラグインを使ってPIXIVの個別ページに遷移できる作品リストを掲載する、という使い方もできるでしょう。個人サイトとSNSのどちらにも作品投稿する必要がなくなり、使い方によっては非常に効率的なサイト運営ができるようになるでしょう。

使用上の注意

このプラグインはPIXIVのAPIを利用したプラグインですが、APIの仕様変更により使用不能になる可能性があります。

万一表示されなくなっても問題ないように、テンプレートを設置する際は直接Pixiv内ユーザーページに直接遷移できるリンクを置くとよいでしょう。

ファイルを用意しよう

まずは「pixivイラスト表示プラグイン」からプラグインファイルをダウンロードしてきましょう。

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

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

今回はこれまでと順序を変えて、先に完成デザインをお見せします。

041.png

freoのトップページにPixivに投稿した作品リストが表示しています。画像をクリックするとPixiv内の作品ページに移動し、「すべて表示する」はプロフィールページに移動します。

ではテンプレートを編集します。

  • templates>internals>default>default.html

今回はトップページに掲載しますが、もちろん応用すれば他ページにも掲載できます。

テキストエディタでテンプレートを開きます。ソース上では赤い線を引いたあたりが今回の設置箇所です。

01.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 $plugin_pixiv_illusts|smarty:nodefaults}-->
    <div class="utility">
        <h3>pixivイラスト</h3>
        <div class="content">
            <p class="gallery">
                <!--{foreach from=$plugin_pixiv_illusts|smarty:nodefaults item='plugin_pixiv_illust'}-->
                <a href="http://www.pixiv.net/member_illust.php?mode=medium&illust_id={$plugin_pixiv_illust.illust_id}"><img src="{$plugin_pixiv_illust.file_small}" alt="{$plugin_pixiv_illust.title}" title="{$plugin_pixiv_illust.title}" width="128" height="128" /></a>
                <!--{/foreach}-->
            </p>
            <p><a href="http://www.pixiv.net/member.php?id={$freo.config.plugin.pixiv_illust.user_id}">すべて表示する</a></p>
        </div>
    </div>
    <!--{/if}-->
<!--{/if}-->

ソースを先ほどの位置にコピーペーストしてファイルを保存します。

012.PNG

以上でテンプレートの編集は完了です。次はサーバへアップロードとセットアップ作業です。

応用編

今回はトップページに表示するためにソースをアレンジしているため、他ページにそのまま転用すると不具合が起きる場合があります。

もし別ページにも掲載したい場合は「<!--{if $smarty.request.freo.mode == 'default'}-->」~「<!--{/if}-->(一番最後のひとつのみ)」をはずしてください。

設置してみよう

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

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

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

021.png

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

022.png

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

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

実際に使ってみよう

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

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

031.png

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

032.png

  1. 自分のPixivプロフィールページのURLを確認し、末尾の数字を記入します(http://www.pixiv.net/member.php?id=○○○ ←この部分)
  2. 取得したデータを保持する時間を決めます。最小で600秒(10分)です。
  3. 表示件数をいれます。最大50件です。

このプラグインは画像を表示する際にPixivにリクエストを送っているため、キャッシュを保持する時間を短くするとそのたび読み込みが発生します。かといって保持する時間をあまり長くするとPixiv側を更新してもなかなかfreo上に反映されないということも生じます。頻繁にPixivを更新する人は短く、それほど更新しない人は長めに設定しておくと安心です。

すべて記入したら「設定する」をクリックします。

033.png

緑の文字で「~を編集しました」と表示されたら完了です。

freoのトップページを開きましょう。下記のような見た目になっていたら設置成功です。

041.png

うまく動かないときの対処法

テンプレートを挿入した位置に「表示するデータが見つかりません」と表示される。

  • ユーザーの登録番号は間違えていませんか?
  • Pixiv内に一点以上投稿はしていますか?
  • キャッシュファイル(files/plugins/pixiv_illust.log)のパーミッションは適切に変更されていますか?
  • Pixiv自体が不調である場合があります。しばらく時間を置いて様子を見ましょう。

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

カスタマイズしてみよう

今回はサムネイル画像とALTにタイトルを記入しただけですが、他のデータも取得できます。

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

こちらのパラメーターは2014年8月現在のものです。今後変更される場合がありますのであらかじめご留意ください。

$plugin_pixiv_illust.illust_id
イラストID(個別ページのURL末尾の数字)
$plugin_pixiv_illust.id
投稿者のユーザーID
$plugin_pixiv_illust.type
イラストの拡張子
$plugin_pixiv_illust.title
イラストのタイトル
$plugin_pixiv_illust.user
投稿者のユーザー名
$plugin_pixiv_illust.file_small
128px×128pxの画像
$plugin_pixiv_illust.file_big
横幅480pxの画像
$plugin_pixiv_illust.datetime
投稿日時
$plugin_pixiv_illust.tags
キーワードタグ
$plugin_pixiv_illust.tools
使用ソフトウェア
$plugin_pixiv_illust.rate
評価回数
$plugin_pixiv_illust.score
総合店
$plugin_pixiv_illust.view
閲覧回数
$plugin_pixiv_illust.caption
説明文

なお前述のソースを良く見ると一箇所だけ「$freo.config.plugin.pixiv_illust.user_id」と記入された箇所がありますが、こちらはPixivから取得したデータではなく、freoの管理ページから設定した「ユーザーの登録番号」を読み込んでいます。

画像リストを表示できないときでもPixivのユーザーページに誘導することで導線の確保できますので、テンプレート上でユーザーIDを表示させたい場合はこちらのパラメーターを使用するといいでしょう。

予告

次回は、ここ数年で同人系・創作系サイトでも徐々に普及しつつある「Tumblr」とfreoを連携させるプラグインをご紹介します。

手前味噌ではありますがこちらは筆者が作成したプラグインです。freo公式配布のプラグインとはやや使い勝手が異なる点もあると思いますが、お付き合いいただけたら幸いです。

次の更新は9月2日(火)ごろを予定しています。

テンプレートを探す

人気のテンプレート

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

更新通知