• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン

> Entry

PWAでプッシュ通知を実装してみる(1)準備と解説

PWAでプッシュ通知を実装するのが大変だったので書いておきます。

目標はこんな感じ。

  • freoをPWA化する
  • プッシュ通知の購読をサイトから簡単に行えるようにする
  • プッシュ通知の送信は手動で行うものとする(サイトの更新のお知らせとか簡単なものしかしないので)

色々やって結果がこれ。

  • サイトをWindows・Android・iOSにインストールできるようになった
  • 一度キャッシュした画面ならサイトをオフラインでも閲覧できるようになった
  • サイトの表示が軽くなった
  • サイト上にプッシュ通知の購読状況が表示されるようになった
  • サイト上でプッシュ通知の購読開始・購読停止ができるようになった
  • フォアグラウンドのGoogleChrome、Firefoxを利用している複数人に対して一度にプッシュ通知を送信・受信できるようになった
  • フォアグラウンド・バックグラウンドのAndroid(Chrome)を利用している複数人に対して一度にプッシュ通知を送信・受信できるようになった

「色々」の部分が長いので頑張って書いていきます。

PWAでプッシュ通知を実装する前に

まずは前提知識から。

PWAとは

PWAとは Progressive Web Apps の略です。
Googleが推進しているウェブをアプリみたいに利用できる機能のことです。

  • サイトがSSL化されていることが絶対条件
  • オフラインでも動作する
  • プッシュ通知を受信できる
  • サイトをアプリのようにインストールできる
  • 指定したファイルをキャッシュできるので読み込みが早い

ので、ファンの多いサイトや読み物系サイト、CMSを利用していて動作が重いサイトなんかは割といいかもしれないと思い、実装してみることにしました。
ちなみにGoogleは動作が軽いサイトを評価する傾向があるので、SEO的な意味でもメリットはあるのかもしれません。知らんけど。

参考URL
PWA化するにはどうすればいい?

既存サイトをPWA化するのは簡単です。

  • アイコン用の画像を設置する
  • manifest.jsonを設置する
  • service workerを設置する

以上。簡単でしょ?
というのがGoogleの言い分です。んなわけねーだろって思いました。

ちなみにWordpressではPWA化するためのプラグイン(PWA for Wordpress)があるようです。
このサイトはWordpressではないですし、プッシュ通知が最終目標だったので頑張って自作することにしました。

PWA化するためのmanifest.jsonとservice worker.jsの書き方はぐぐるといっぱいありますが、私は下記の記事を参考にしました。
詳細に書いてくださっているので助かりました。

参考URL
プッシュ通知について

プッシュ通知って最近いろんなサイトでやってますよね。
PCだと画面の右下にポコンと出てくるやつです。

あれを実装するにはいろんなサービスがありますが、サービスを使わなくても自分でできるようになりましたよっていうのがPWAのいいところらしいです。
プッシュ通知を受信できる環境を作るにはPWA化だけでOKですが、実際にプッシュ通知を送信・受信するには、PWA化だけでは不十分でした。
自分でできると言いながら今回はGoogleのfirebaseを利用しているので完全自力ではないんですけど、とにかくfirebaseを利用してプッシュ通知の受信・送信ができるようになりました。

ちなみに、今回の方法では、ブラウザでプッシュ通知を受け取る許可をするのと、実際にプッシュ通知を購読するのは別の設定です。
どちらも個別に設定が必要ですが、どちらかが欠けるとプッシュ通知は受け取れません。
プッシュ通知を購読するには、

  1. ブラウザでプッシュ通知を受け取る設定をする
  2. プッシュ通知を購読する

の2点が必要です。
ブラウザ側でプッシュ通知を受け取る設定をしていても、購読しないとプッシュ通知は受け取れません。
PWAとプッシュ通知配信サービスの併用でfirebaseまわりのめんどくさい部分はクリアできそうな気もしますが、まあ勉強のために色々やってみようってことで。

参考URL
firebaseについて

firebaseは、Googleのサービスです。
サイトやアプリをちょっと便利にするのに必要な機能、例えば

  • SNSアカウントでのログイン
  • プッシュ通知の送受信
  • リアルタイムデータベース

などを利用できるようになります。しかも無料で。
容量・転送量に応じて有料プランもありますが個人サイトなら無料で十分だと思います。

firebase側で様々なスクリプトを用意してくれているので、Googleアカウントでログインしてプロジェクトを作成すれば、誰でも利用可能です。
今回は、PWA化したWEBサイトでプッシュ通知を受信・送信するのに、firebaseのCloud MessagingとCloud Firestoreを使用しました。

参考URL
node.jsについて

node.jsとは、サーバー側で動くjavascriptのプラットフォームです。

firebaseを利用してプッシュ通知を送信したりするには、サーバー側(アプリ側)での作業が必要です。
今回はアプリ側の作業をWindowsのコマンドプロンプトで行います。
この時に必要なのがnode.jsです。
node.jsを使わずに他のものを利用しても構わないですが今回はnode.jsにしました。

参考URL
このサイトでプッシュ通知を実装するために今回やったこと

上にもさらっと方法を書いてますが、もうちょっと詳しく書いておきます。

  • サイトをPWA化した(manifest.jsonとserviceworkerの作成)
  • Firebaseにプロジェクトを作成した
  • Firebase Cloud Messagingでプッシュ通知を受信できるようにした
  • プッシュ通知を購読するか購読しないかをサイト上で選択・設定できるようにした
  • 購読状況はサイト上で確認できるようにした
  • 購読開始時に発行されたトークンと購読状況をFirebase Cloud Firestoreに登録するようにした
  • 購読停止時に購読状況を更新するようにした
  • node.jsを使ってコマンドプロンプトからプッシュ通知を送信できるようにした
  • プッシュ通知発信時に購読停止中のトークンをFirebase Cloud Firestoreから取得してトピックから削除するようにした
  • プッシュ通知発進時に購読中のトークンをFirebase Cloud Firestoreから取得してトピックに登録するようにした
  • プッシュ通知はトピック宛に発信するようにした

ただプッシュ通知実装するだけでめっちゃ大変ですやんGoogleの公式ドキュメント意味わかんないしとか思ったんですけどなんとかできたので努力って大事。
これを全部解説していくとあまりに長くなるので分割します。

続きを読む

ページトラックバック数表示プラグイン

freoのページに通知されたトラックバック数を[freo/index.php/page]にアクセスした時に表示されるページ一覧で表示するプラグインです。

特徴

  • [freo/index.php/page]にアクセスした時(ページを検索した時など)に表示されるページ一覧でトラックバック数を表示できます。

ダウンロード

display_page_trackback_count_3287_1_0_0.zip

導入方法

  1. 上記ファイルをDLして解凍する。
  2. [freo]フォルダの中身freo設置フォルダにアップロード。
  3. [freo/templates/internals/page/default.html]の220行目と221行目の間などに下記のソースを記入する。
    <ul class="information">
        <li>トラックバック数:{$plugin_page_trackback_counts[$page.id]}</li>
    </ul>
    
  4. [freo/templates/internals/page/default.html]ファイルをアップロード。

更新履歴

2018/07/09  プラグイン公開・配布開始

続きを読む

ページコメント数表示プラグイン

freoのページに投稿されたコメント数を[freo/index.php/page]にアクセスした時に表示されるページ一覧で表示するプラグインです。

特徴

  • [freo/index.php/page]にアクセスした時(ページを検索した時など)に表示されるページ一覧でコメント数を表示できます。

ダウンロード

display_page_comment_count_3287_1_0_0.zip

導入方法

  1. 上記ファイルをDLして解凍する。
  2. [freo]フォルダの中身freo設置フォルダにアップロード。
  3. [freo/templates/internals/page/default.html]の220行目と221行目の間などに下記のソースを記入する。
    <ul class="information">
        <li>コメント数:{$plugin_page_comment_counts[$page.id]}</li>
    </ul>
    
  4. [freo/templates/internals/page/default.html]ファイルをアップロード。

更新履歴

2018/07/09  プラグイン公開・配布開始

続きを読む

アルバム漫画表示プラグイン

アルバムプラグインで登録した記事を漫画として表示できるプラグインです。
freo公式の漫画表示プラグインのような表示をアルバムプラグインでもできるようにしました。

サンプル

当サイトのアルバムで使用しています。

特徴

表示方法
  • アルバムプラグインで漫画として表示したい記事を登録後、[freo/index.php/album_comic/アルバムID]にアクセスすると画像を漫画状に表示できます。
  • レスポンシブデザインに対応しています。(スマホからアクセス時はリンクURLに関わらず1ページずつ表示します。)
画像のルール補足
  • 表紙が必要な場合、画像のファイル名は、0 からの連番にしてください。(2ページずつ表示させた場合、0 は表紙に、最後は裏表紙になります。)
  • 表紙が不要な場合、画像のファイル名は、1 からの連番にしてください。(2ページずつ表示させた場合、最初から2ページずつ表示されます。)
  • 連番で画像を作成する場合、[01.jpg]や[001.jpg]のように桁数は合わせないようにしてください。
  • 画像の種類は、gif・jpeg・png に対応しています。
  • 画像のサイズは任意ですが、漫画ごとにすべて統一してください。また、大きすぎると表示が遅くなりますし、そもそも画面に入りません。
オプション

漫画を表示する際、URLに特定のパラメーターを付加することで、表示方法をカスタマイズすることができます。(管理画面で漫画を挿入する際に付加されますが、自分で調整することも可能です。)

columns=1
1ページずつ表示します。
direction=ltr
左→右の順で表示します。(2ページずつ表示する場合に有効)
devide=on
ページを分割して表示します。
end=on
終了ページを表示します。
navigation=off
ナビゲーションを非表示にします。

パラメーターは & で連結して、複数指定することができます。例えば ?columns=1&devide=on&direction=ltr のように指定することができます。

終了ページについて

上記オプションで[end=on]を設定した時表示される終了ページは、アルバム記事の本文・コメントが表示されます。

ダウンロード

album_comic_32877_1_0_0.zip

導入方法

  1. アルバムプラグインをDLして実装する。
  2. 上記ファイルをDLして解凍する。
  3. [freo]フォルダに[css][js][libs][templates]フォルダをアップロードする。
  4. [freo/index.php/album_comic/アルバムID]にアクセスして正常にアルバムが漫画表示されるか確認してください。

アルバム一覧表示時にリンクを漫画表示用のリンクに変える方法

[freo/templates/plugins/album/default.html]を編集して、アルバム一覧表示時の記事へのリンクを漫画表示用のリンクに変更します。
たとえば、[freo/templates/plugins/album/default.html]の29行目

<h3><a href="{$freo.core.http_file}/album/view/{$plugin_album.id}">{$plugin_album.datetime|date_format:'%Y/%m/%d'}<!--{if $plugin_album.title}-->{$plugin_album.title}<!--{/if}--></a><!--{if $freo.user.authority == 'root' or $freo.user.authority == 'author'}--><a href="{$freo.core.http_file}/album/admin_form?id={$plugin_album.id}"><img src="{$freo.core.http_url}images/icons/edit.png" alt="編集" title="編集" width="16" height="16" /></a><!--{/if}--></h3>

<h3><a href="{$freo.core.http_file}/album_comic/{$plugin_album.id}">{$plugin_album.datetime|date_format:'%Y/%m/%d'}<!--{if $plugin_album.title}-->{$plugin_album.title}<!--{/if}--></a><!--{if $freo.user.authority == 'root' or $freo.user.authority == 'author'}--><a href="{$freo.core.http_file}/album/admin_form?id={$plugin_album.id}"><img src="{$freo.core.http_url}images/icons/edit.png" alt="編集" title="編集" width="16" height="16" /></a><!--{/if}--></h3>

のように変更します。

カテゴリーID[comic]の記事のみリンク先を変更する

[freo/templates/plugins/album/default.html]の29行目を

<!--{if $plugin_album.category_id == 'comic'}-->
    <h3><a href="{$freo.core.http_file}/album_comic/{$plugin_album.id}">{$plugin_album.title}</a></h3>
<!--{else}-->
    <h3><a href="{$freo.core.http_file}/album/view/{$plugin_album.id}">{$plugin_album.title}</a></h3>
<!--{/if}-->

のように変更します。

更新履歴

2018/05/05 配布開始

 

続きを読む

freoでサイト全体を管理するレスポンシブテンプレート基本セット

freoでサイト全体を管理する場合のテンプレート(レスポンシブ対応)です。

はじめに

テンプレートについて

このテンプレートは、多機能CMSツールfreoの非公式テンプレートです。
当サイトは、このテンプレートを使用することによって発生した不利益・損害等には一切責任を負わないものとします。

テンプレートのカスタマイズについて

テンプレート・スタイルシートの内容はご自由に編集して下さい。
テンプレートの利用・編集について許可を得る必要はありません。

特徴

  • レスポンシブデザインで作成しています。大画面表示・タブレットサイズ表示・スマートフォン表示を切り替えています。
  • スマートフォン以下のサイズで閲覧した際、jQuery[meanmenu]を利用してメインメニューを表示します。

サンプル

https://32877.xii.jp/responsive/index.php

ダウンロード

32877_templates_responsive_basic_1_0_0.zip

導入方法

  1. 公式からfreoをダウンロードし、設置してください。
  2. ご自分のfreoにアクセスし、正常に動いているかどうか確認してください。
  3. 以下のプラグインをダウンロードし、導入してください。
        freo/パンくずリスト表示プラグイン
  4. 必要に応じて、下記のプラグインをダウンロードし、導入してください。
        freo/メール送信プラグイン
        freo/メッセージ登録プラグイン
        freo/拍手送信プラグイン
        32877/ニュースプラグイン
        32877/新着ニュースプラグイン
        32877/バナー付きリンクプラグイン
  5. 本テンプレートをDLし、解凍してください。
  6. [css][js][templates]フォルダを[freo]フォルダにアスキーモードでアップロードしてください。
  7. 更新されない場合は公式のトラブルシューティング「テンプレートを編集しても反映されない」を参照してください。

更新履歴

  2017.10.01  配布開始。

続きを読む

拍手アーカイブ表示プラグイン

拍手を管理画面で月別に表示するプラグインです。
freo公式サイトで配布されてている拍手送信プラグインで送信された拍手を管理画面で月別に表示します。

ダウンロード

導入方法

  1. 上記ファイルをDLして解凍する。
  2. [freo]設置フォルダに[freo]フォルダをアップロードする。
  3. [freo/templates/plugins/clap/admin.html]の20行目あたりに
        <ul>
            <li><a href="{$freo.core.http_file}/clap_archive/admin?day={$smarty.now|date_format:"%Y%m"}">月別拍手管理表示</a></li>
        </ul>
        <select onchange="location.href=this.options[this.selectedIndex].value">
            <option>年月を選択</option>
            <!--{foreach from=$plugin_clap_archives|smarty:nodefaults item='plugin_clap_archive'}-->
            <option value="{$freo.core.http_file}/clap_archive/admin?date={$plugin_clap_archive.year}{$plugin_clap_archive.month}">{$plugin_clap_archive.year}年{$plugin_clap_archive.month}月({$plugin_clap_archive.count})</option>
            <!--{/foreach}-->
        </select>
    
    を挿入する。
  4. [freo/index.php/clap_archive/admin]にアクセスすると、送信された拍手が月別に表示される。
    ※[freo/index.php/clap_archive/admin?day=YYYYMM]で任意の月の拍手を月別表示できる。

更新履歴

2017/08/27
配布開始

続きを読む

ページ本文文字数カウントプラグイン

freoのページの本文(HTML・PHPタグ除去済)の文字数をカウント(半角・全角を1文字としてカウント)するプラグインです。

特徴

  • ページ本文(HTML・PHPタグ除去済)の文字数をカウント(半角・全角を1文字としてカウント)する。
  • 任意のページの本文カウントや、子ページ表示プラグイン・親ページ表示プラグインとの併用によって応用可能。

ダウンロード

導入方法

  1. 上記ファイルをDLして解凍する。
  2. [libs]フォルダをアップロード
  3. [freo/internals/page/default.html]のページ本文文字数を表示したい箇所に下記のように記載する。
    {$plugin_page_textcount[$page.id]}
  4. default.html[freo/templates/internals/page]フォルダにアップロード。

応用方法

このプラグインでは、ページ本文の文字数をカウントしたいページIDを変数内の指定箇所に記載すれば、いろんなページの本文文字数をカウントできます。

任意のページの場合

任意のページの本文文字数をカウントして表示するには、テンプレートに下記のように記載してください。

{$plugin_page_textcount.ページID}
親ページの場合

表示しているページの親ページの本文文字数をカウントして表示するには、テンプレートに下記のように記載してください。

{$plugin_page_textcount[$page.pid]}
子ページの場合

表示しているページの子ページの本文文字数をカウントして表示するには、テンプレートに下記のように記載してください。

        <!--{if $plugin_page_childs|smarty:nodefaults}-->
            <h4>目次</h4>
            <ul>
                <!--{foreach from=$plugin_page_childs|smarty:nodefaults item='plugin_page_child'}-->
                <li><a href="{$freo.core.http_file}/page/{$plugin_page_child.id}">{$plugin_page_child.title}</a>(文字数:{$plugin_page_textcount[$plugin_page_child.id]})</li>
                <!--{/foreach}-->
            </ul>
        <!--{/if}-->

更新履歴

2017/07/12
プラグイン公開・配布開始
2017/09/01
制限されたページの本文文字数を取得できるようにプラグインを改善。
config.page_textcount.php
display.page_textcount.php
上記ファイルをアップロードしてください。

続きを読む

限定抽出されたエントリーの情報を一覧で表示する方法

エントリー限定抽出プラグインは、特定のカテゴリーのエントリーを指定件数分表示するプラグインです。
デフォルト画面・エントリー画面・カテゴリー画面・エントリー個別(VIEW)表示画面で利用できます。

上記画面で限定抽出されたエントリーを一覧で表示する方法及び変数は以下のとおりです。

限定抽出されたエントリーを一覧表示する

デフォルト画面(freo/index.php画面)のテンプレートは、[freo/templates/internals/default/default.html]です。
エントリー画面・カテゴリー画面には、独自のテンプレートがない場合(freoをダウンロードして解凍しただけのデフォルトの状態の場合)、[freo/templates/internals/default/default.html]が利用されます。

エントリー画面・カテゴリー画面用に独自のテンプレートを用意した場合、
エントリー画面(freo/index.php/entry画面)のテンプレートは、[freo/templates/internals/entry/default.html]です。
カテゴリー画面(freo/index.php/category/カテゴリーID画面)のテンプレートは、[freo/templates/internals/category/default.html]です。

限定抽出されたエントリーを一覧表示するには、プラグイン解説ページにあるように、

<div class="utility">
    <h3>特定カテゴリーエントリー一覧</h3>
    <div class="content">
        <ul>
        <!--{foreach from=$plugin_entry_pickups|smarty:nodefaults item='plugin_entry_pickup'}-->
            <li><a href="{$freo.core.http_file}/view/{if $plugin_entry_pickup.code}{$plugin_entry_pickup.code}{else}{$plugin_entry_pickup.id}{/if}">{$plugin_entry_pickup.title}</a></li>
        <!--{foreachelse}-->
            <li>まだ記事はありません。</li>
        <!--{/foreach}-->
        </ul>
    </div>
</div>

のようにしてください。
これは、

<div class="utility">
    <h3>特定カテゴリーエントリー一覧</h3>
    <div class="content">
        <ul>
        <!--{$plugin_entry_pickups配列を'plugin_entry_pickup'として繰り返して表示するここから}-->
            <li><a href="{$freo設置URL}/view/{もしエントリーコードがあればここから}{$エントリーコード}{そうじゃなければ}{$エントリーID}{もしエントリーコードがあればここまで}">{$エントリータイトル}</a></li>
        <!--{$plugin_entry_pickups配列が空であれば}-->
            <li>まだ記事はありません。</li>
        <!--{$plugin_entry_pickups配列を'plugin_entry_pickup'として繰り返して表示するここまで}-->
        </ul>
    </div>
</div>

という意味です。
上記のように、限定抽出されたエントリー一覧として、エントリーのタイトルに各エントリーへのリンクを貼って表示しています。

限定抽出されたエントリーの情報を取得する方法

$plugin_entry_pickupsテーブルの情報をforeachする。

限定抽出されたエントリーの情報は、「$plugin_entry_pickups」という配列に格納されています。
「$plugin_entry_pickups」配列の情報を表示したいときは、foreachしなければなりません。

とにかく、限定抽出されたエントリーの情報を一覧表示したいなら、下記の通りにしなければならないってことです。

<!--{foreach from=$plugin_entry_pickups|smarty:nodefaults item='plugin_entry_pickup'}-->

限定抽出されたエントリーの情報を表示したい部分

<!--{/foreach}-->

上記のように、限定抽出されたエントリーの情報の内一覧表示したい内容は、<!--{foreach from=$plugin_entry_pickups|smarty:nodefaults ~中略}-->と<!--{/foreach}-->で挟みます。
foreachの中に入れないで変数だけ書いても、エントリーの情報は表示されませんので注意して下さい。

エントリーの基本的な情報を表示するための変数
変数
{$plugin_entry_pickup.id} エントリーID
{$plugin_entry_pickup.user_id} エントリーの投稿者ユーザーID
{$plugin_entry_pickup.created} エントリーの投稿日時
{$plugin_entry_pickup.modified} エントリーの更新日時
{$plugin_entry_pickup.approved} エントリーの承認状況(yesまたはno)
{$plugin_entry_pickup.restriction} エントリーの閲覧制限(userまたはgroupまたはpasswordまたは無し)
{$plugin_entry_pickup.password} エントリーのパスワード
{$plugin_entry_pickup.title} エントリーのタイトル
{$plugin_entry_pickup.status} エントリーの状態(publishまたはprivateまたはfuture)
{$plugin_entry_pickup.display} エントリーの表示(pub;ishまたはprivate)
{$plugin_entry_pickup.comment} エントリーのコメントの受付(openまたはclosedまたはviewまたはuser)
{$plugin_entry_pickup.trackback} エントリーのトラックバックの受付(openまたはclosedまたはview)
{$plugin_entry_pickup.title} エントリーのタイトル
{$plugin_entry_pickup.tag} エントリーのタグ
{$plugin_entry_pickup.datetime} エントリーの日付
{$plugin_entry_pickup.close} エントリーの公開終了日時
{$plugin_entry_pickup.file} エントリーファイルのファイル名
{$plugin_entry_pickup.image} エントリーイメージのファイル名
{$plugin_entry_pickup.memo} エントリーファイルの説明
{$plugin_entry_pickup.text} エントリー本文
限定抽出されたエントリーの添付ファイルの情報を表示する
エントリーファイルの情報を表示する

エントリーファイルの情報は$plugin_entry_pickup_files[$plugin_entry_pickup.id]配列に格納されています。

変数
{$plugin_entry_pickup.file} エントリーファイルのファイル名
{$plugin_entry_pickup_files[$plugin_entry_pickup.id].height} エントリーファイルの高さ
{$plugin_entry_pickupfiles[$plugin_entry_pickup.id].width} エントリーファイルの横幅
{$plugin_entry_pickup_files[$plugin_entry_pickup.id].size} エントリーファイルのサイズ
{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$plugin_entry_pickup.id}/{$plugin_entry_pickup.file} エントリーファイルのURL
エントリーファイルのサムネイルの情報を表示する

エントリーファイルのサムネイルの情報は$plugin_entry_pickup_thumbnails[$plugin_entry_pickup.id]配列に格納されています。

変数
{$plugin_entry_pickup.file} エントリーファイルのサムネイルのファイル名
{$plugin_entry_pickup_thumbnails[$plugin_entry_pickup.id].height} エントリーファイルの高さ
{$plugin_entry_pickup_thumbnails[$plugin_entry_pickup.id].width} エントリーファイルの横幅
{$plugin_entry_pickup_thumbnails[$plugin_entry_pickup.id].size} エントリーファイルのサイズ
{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_thumbnails/{$plugin_entry_pickup.id}/{$plugin_entry_pickup.file} エントリーファイルのURL
エントリーイメージの情報を表示する

エントリーイメージの情報は$plugin_entry_pickup_images[$plugin_entry_pickup.id]配列に格納されています。

変数
{$plugin_entry_pickup.image} エントリーイメージのファイル名
{$plugin_entry_pickup_images[$entry.id].height} エントリーイメージの高さ
{$plugin_entry_pickup_images[$entry.id].width} エントリーイメージの横幅
{$plugin_entry_pickup_images[$entry.id].size} エントリーイメージのサイズ
{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$plugin_entry_pickup.id}/{$plugin_entry_pickup.image} エントリーイメージのURL

限定抽出されたエントリーのタグの情報を表示する

限定抽出されたエントリーのタグは、「$plugin_entry_pickup_tags[$plugin_entry_pickup.id]」という配列に格納されています。
$plugin_entry_pickup_tags[$plugin_entry_pickup.id]に格納されているタグを表示するには、foreachしなければなりません。

<!--{foreach from=$plugin_entry_pickup_tags[$plugin_entry_pickup.id]|smarty:nodefaults item='plugin_entry_pickup_tag' name='loop'}--><a href="{$freo.core.http_file}/entry?tag={$plugin_entry_pickup_tag|smarty:nodefaults|escape:'url'}">{$plugin_entry_pickup_tag}</a><!--{if !$smarty.foreach.loop.last}-->,&nbsp;<!--{/if}--><!--{/foreach}-->

限定抽出されたエントリーのカテゴリーの情報を表示する

限定抽出されたエントリーのカテゴリーについての情報は、$plugin_entry_pickup_associates[$plugin_entry_pickup.id].category」という配列に格納されています。
$plugin_entry_pickup_associates[$plugin_entry_pickup.id].categoryに格納されているカテゴリーを表示するには、foreachしなければなりません。

<!--{foreach from=$plugin_entry_pickup_associates[$plugin_entry_pickup.id].category|smarty:nodefaults key='plugin_entry_pickup_category' item='plugin_entry_pickup_category' name='loop'}--><a href="{$freo.core.http_file}/category/{$plugin_entry_pickup_category}">{$freo.refer.categories[$plugin_entry_pickup_category].name}</a><!--{if !$smarty.foreach.loop.last}-->,&nbsp;<!--{/if}--><!--{/foreach}-->

上記~

変数
{$plugin_entry_pickup_category} 限定抽出されたエントリーに紐付けられているカテゴリーID
{$freo.refer.categories[$plugin_entry_pickup_category].name} 限定抽出されたエントリーに紐付けられているカテゴリーIDのカテゴリー名

限定抽出されたエントリーのオプションを表示する

オプションの表示方法には、二種類あります。
一括で表示するか、個別に表示するかです。

上記をふまえて、ページのオプションを取得するときに使用する変数は以下のとおりです。

変数
オプションを一括で表示する場合
{$plugin_entry_pickup_associates[$plugin_entry_pickup.id].option.[$option.id]} エントリーのオプションIDが[$option.id]のオプションに登録されている内容
オプションを個別に表示する場合
{$plugin_entry_pickup_associates[$plugin_entry_pickup.id].option.取得したいオプションID}
※「取得したいオプションID」部分にはオプションIDを代入してください。
例)取得したいオプションIDが「test1」の場合は{$plugin_entry_pickup_associates[$plugin_entry_pickup.id].option.test1}
エントリーのオプションIDが「取得したいオプションID」のオプションに登録されている内容

説明すると、

{$plugin_entry_pickup_associates[$plugin_entry_pickup.id].option.[$option.id]}

こんな感じです。
つまり、

{$エントリーIDのエントリーのオプションのテーブルを指定して.オプションが.[$どのIDのオプションなのかを指定する]}

こういうことです。

オプションを個別に表示する場合は、[$option.id]部分に、[取得したいオプションID]を書き込みます

たとえば、オプションID「test1」のオプションを取得したいなら、

{$plugin_entry_pickup_associates[$plugin_entry_pickup.id].option.test1}

のようになります。

オプションを一括で表示する場合は、[$option.id]部分を取得するために、オプション格納テーブルの情報を取得する必要があります。

オプション格納テーブルには、そのfreoに登録されているオプションのID、名前などが格納されています。
詳細は、freo公式サイトの機能解説→本体のテーブル構成→オプション格納テーブルのページをご覧下さい。

オプション格納テーブルの情報を取得するには、foreachを使います。
つまり、

<!--{foreach from=$freo.refer.options|smarty:nodefaults item='option'}-->

オプションの情報を表示する部分

<!--{/foreach}-->

このようにします。

よって、ページのオプションを取得する場合は、

   <!--{foreach from=$freo.refer.options|smarty:nodefaults item='option'}-->

       {$plugin_entry_pickup_associates[$plugin_entry_pickup.id].option.[$option.id]}
   <!--{/foreach}-->

 このようになります。

オプションを個別で表示するときのテンプレート編集例はfreo公式サイトの各機能の解説から「オプションを個別に表示する」を参考にしてください。

続きを読む

スライドショーをバナー付きリンクプラグインで管理する方法

サイトに表示するスライドショーなどをバナー付きリンクプラグインで利用する場合の利用例です。

単純に画像を表示したいだけなら、メディア一括表示プラグインを利用してスライドショーを作成しても良いのですが、スライドショーに

  • 画像にリンクを貼りたい
  • 画像にタイトル(ファイル名以外の文字列)をつけたい
  • 画像のキャプションとしてテキスト文章を表示したい

などの場合には、画像の登録・引用・タイトルや本文の登録のできるバナー付きリンクプラグインを活用した方が良いと思います。

スライドショーを設置する

スライドショーの設置は下記を参考にしてください。
32877:【html】画像をスライドショーで表示するjQuery

今回は、上記記事内FlexSliderを利用するものとします。
解説はonze:【jQuery】超万能スライダー FlexSlider の使い方をマスターする。を参考にしてください。

バナー付きリンクプラグインを実装する

当サイトからバナー付きリンクプラグインをDLして実装してください。

バナー付きリンクプラグインに登録した情報は、バナー付きリンク画面・デフォルト画面・エントリー画面・カテゴリー画面・エントリー個別表示(view)画面・ページ画面で表示することができます。
その他の画面にスライドショーを設置したい場合は、[freo/libs/plugins/config.link.php]のdisplay設定を変更してください。

参考リンク:freo「プラグインを色々なページに表示する

スライドショー用のテンプレートを作成する

エディタで新しいページを開き、「imageslide.html」として保存します。文字コードは「UTF-8」、改行コードは「CR+LF」で作成してください。保存場所は[freo/templates/plugins/link]フォルダがいいでしょう。

このテンプレート内にスライドショー用のコードを書き込み、スライドショーを設置したい部分のテンプレート(例えばデフォルト画面に設置したいなら[freo/templates/internals/default/default.html])でincludeするといいでしょう。
smartyのinclude機能についての説明はコチラを御覧ください。

imageslide.htmlの内容は、スライドショーのHTML部分の記述を参考に作成します。
FlexSliderでは、下記のようなHTMLソースが必要です。

<div class="flexslider">
<ul class="slides">
<li><a href="http://"><img src="slider1.jpg" /></a><p class="flex-caption">ここはキャプションです</p></li>
<li><a href="http://"><img src="slider2.jpg" /></a><p class="flex-caption">ここはキャプションです</p></li>
</ul>
</div>

バナー付きリンクプラグインに登録した情報で、上記ソースを作成してみます。

<div class="flexslider">
    <ul class="slides">
        <!--{foreach from=$plugin_links|smarty:nodefaults item='plugin_link'}-->
            <li><!--{if $plugin_link.url}--><a href="{$plugin_link.url}"><!--{/if}--><!--{if $plugin_link_files[$plugin_link.id].file}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/link_files/{$plugin_link.id}/{$plugin_link_files[$plugin_link.id].file}" alt="{$plugin_link.title}" /><!--{elseif $plugin_link.imageurl}--><img src="{$plugin_link.imageurl}" alt="{$plugin_link.title}" /><!--{else}-->{$plugin_link.title}<!--{/if}--><!--{if $plugin_link.url}--></a><!--{/if}--><!--{if $plugin_link.text}--><p class="flex-caption">{$plugin_link.text}</p><!--{/if}--></li>
        <!--{/foreach}-->
    </ul>
</div>

以上のようにすればOKです。
内容は、下記の通りです。

<div class="flexslider">
    <ul class="slides">
        <!--{$plugin_links配列を'plugin_link'として繰り返し表示するここから}-->
            <li><!--{もしリンクURLがあればここから}--><a href="{$リンクURL}"><!--{もしリンクURLがあればここまで}--><!--{もしリンクファイル(バナー)が登録されていればここから}--><img src="{$freo設置URL}{$ファイル・ディレクトリ名}plugins/link_files/{$リンク記事ID}/{$リンクファイル(バナー)のファイル名}" alt="{$リンク記事タイトル}" /><!--{もしバナーURLが登録されていたら}--><img src="{$バナーURL}" alt="{$リンク記事タイトル}" /><!--{そうじゃなければ}-->{$リンク記事タイトル}<!--{もしリンクファイル(バナー)が登録されていればここまで}--><!--{もしリンクURLがあればここから}--></a><!--{もしリンクURLがあればここまで}--><!--{もしリンク記事本文があればここから}--><p class="flex-caption">{$リンク記事本文}</p><!--{もしリンク記事本文があればここまで}--></li>
        <!--{$plugin_links配列を'plugin_link'として繰り返し表示するここまで}-->
    </ul>
</div>

スライドショーに利用するリンクをカテゴリーで限定する

テンプレートを編集してスライドショーに利用するリンクをカテゴリーで限定する

上記解説した方法だと、バナー付きリンクプラグインに登録した全てのリンク記事がスライドショーになってしまいますが、例えば、カテゴリーID「slideshow」のカテゴリーが選択されているリンク記事のみをスライドショーにしたい場合は、下記のようにすればOKです。

<div class="flexslider">
    <ul class="slides">
        <!--{foreach from=$plugin_links|smarty:nodefaults item='plugin_link'}-->
            <!--{if $plugin_link.category_id == 'slideshow'}-->
                <li><!--{if $plugin_link.url}--><a href="{$plugin_link.url}"><!--{/if}--><!--{if $plugin_link_files[$plugin_link.id].file}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/link_files/{$plugin_link.id}/{$plugin_link_files[$plugin_link.id].file}" alt="{$plugin_link.title}" /><!--{elseif $plugin_link.imageurl}--><img src="{$plugin_link.imageurl}" alt="{$plugin_link.title}" /><!--{else}-->{$plugin_link.title}<!--{/if}--><!--{if $plugin_link.url}--></a><!--{/if}--><!--{if $plugin_link.text}--><p class="flex-caption">{$plugin_link.text}</p><!--{/if}--></li>
            <!--{/if}-->
        <!--{/foreach}-->
    </ul>
</div>

 内容は下記の通りです。

<div class="flexslider">
    <ul class="slides">
        <!--{$plugin_links配列を'plugin_link'として繰り返し表示するここから}-->
            <!--{もしリンク記事のカテゴリーIDが'slideshow'であればここから}-->
                <li>~中略~</li>
            <!--{もしリンク記事のカテゴリーIDが'slideshow'であればここまで}-->
        <!--{$plugin_links配列を'plugin_link'として繰り返し表示するここまで}-->
    </ul>
</div>

以上のように、 カテゴリーIDを限定するための条件式を追加しています。

ただし、この場合、[管理画面→設定管理→プラグインの設定→バナー付きリンク→エントリー・ページ・TOP画面等その他画面での1ページの表示件数]で設定された件数よりも多いリンク記事が登録されていた時、2ページ目以降に登録されたリンク記事は表示されません
[管理画面→設定管理→プラグインの設定→バナー付きリンク→エントリー・ページ・TOP画面等その他画面での1ページの表示件数]を総リンク登録件数よりも多く設定すれば、全てのバナー付きリンク記事から限定したカテゴリーのリンク記事のみを表示することができますが、

  • バナー付きリンクプラグインに多くのリンク記事を登録している場合
  • [管理画面→設定管理→プラグインの設定→バナー付きリンク→エントリー・ページ・TOP画面等その他画面での1ページの表示件数]を総リンク登録件数よりも多くすることが出来ない場合

は、総リンク数に関係なく限定したカテゴリーの新着リンクを表示してくれる新着リンクプラグインを利用するとよいでしょう。

新着リンクプラグインを利用してスライドショーに利用するリンクをカテゴリーで限定する

新着リンクプラグインは、直近に登録したリンク記事から、新着リンクとして表示すると設定した件数分のリンクを表示するプラグインです。
総リンク記事からカテゴリーを限定して抽出することもできます。

新着リンクプラグインをスライドショーとは別の用途で既に利用している場合は、同じプラグインを複数設置する方法を参考にプラグインを複製して利用してください。

新着リンクプラグインに登録した情報は、バナー付きリンク画面・デフォルト画面・エントリー画面・カテゴリー画面・エントリー個別表示(view)画面・ページ画面で表示することができます。
その他の画面にスライドショーを設置したい場合は、[freo/libs/plugins/config.link_recently.php]のdisplay設定を変更してください。

新着リンクをプラグインを実装後、[管理画面→設定管理→プラグインの設定→新着リンクプラグイン]で限定するカテゴリーIDを設定してください。
その後、imageslide.htmlを下記のように編集してください。

<div class="flexslider">
    <ul class="slides">
        <!--{foreach from=$plugin_link_recentries|smarty:nodefaults item='plugin_link_recently'}-->
            <li><!--{if $plugin_link_recently.url}--><a href="{$plugin_link_recently.url}"><!--{/if}--><!--{if $plugin_link_recently_files[$plugin_link_recently.id].file}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/link_files/{$plugin_link_recently.id}/{$plugin_link_recently_files[$plugin_link_recently.id].file}" alt="{$plugin_link_recently.title}" /><!--{elseif $plugin_link.imageurl}--><img src="{$plugin_link.imageurl}" alt="{$plugin_link.title}" /><!--{else}-->{$plugin_link_recently.title}<!--{/if}--><!--{if $plugin_link_recently.url}--></a><!--{/if}--><!--{if $plugin_link_recently.text}--><p class="flex-caption">{$plugin_link_recently.text}</p><!--{/if}--></li>
        <!--{/foreach}-->
    </ul>
</div>

上記は、「スライドショー用のテンプレートを作成する」で解説したソースを新着リンクプラグイン用に変更したものです。
以上のようにすると、新着リンクプラグインを利用してスライドショーに利用するリンクをカテゴリーで限定することができます。

続きを読む

エントリーページ移動

ユーティリティ

Twitter

記事検索

ページ上部へ