freoはじめて物語(6) プラグインを使ってみよう
- Post date：2014/07/01
- Category：freoはじめて物語
第5回まででfreoに最初から備わっている機能をつかって記事を投稿したり、画像をアップロードすることができました。今回はfreoの機能を拡張できる「プラグイン」の設置の仕方について、実際の設置例を元にご紹介します。
- プラグインってなに？
- プラグイン実装のパターンを覚えよう
- 管理ページにログインしておこう
- ファイルをアップロードしよう
- セットアップしよう
- テンプレートを編集しよう
- 設定を変更しよう
- 動作を確認しよう
プラグインってなに？
「プラグイン」とは一般的には、とあるプログラムに対して最初から備わっている機能以外に後付で新しい機能を付与できる小規模なプログラムのことをいいます。freoにおいても同様で、プラグインをインストールすることで標準機能に含まれていない機能を付与できたり、freoの使い道を広げてくれるものです。
freo用プラグインは公式サイトをはじめ、さまざまな方が開発・公開されています。プラグインで紹介されているプラグインや配布サイトから気に入った、必要なプラグインを探して見ましょう。
プラグイン実装のパターンを覚えよう
プラグインはひとつひとつの機能が異なるため、インストールの仕方もひとつひとつが異なります。基本的には各配布サイトで解説されていますが、大別すると以下のパターンに分かれます。
- プラグインファイルをサーバにアップロードする
- アップロード後にセットアップを実行してパーミッションを変更する
- テンプレート/CSS/Javascriptに必要な記述を追加する
- 管理画面から設定を変更する
1番を必須として、2～4番は各プラグインごとに要/不要がわかれますが、一通り覚えておけば応用がきくのでこの記事ではすべての作業をご紹介します。
ただし、これにあてはまらないケースも稀にあるため最終的には各解説サイトをよくよくご確認ください。
管理ページにログインしておこう
プラグインのインストールする前に、あらかじめfreoの管理ページにログインしておきましょう。
プラグインの設置時には頻繁に管理画面を開くことになりますし、後述する「セットアップ」はログインしておかないと実行ができません。作業を始める前にログインしておくと以降の作業がスムーズに進みます。
アップロードしよう
今回は例としてfreo公式で配布している拍手送信プラグインを設置してみます。
こちらのプラグインは各ページに「拍手」と書かれたボタンを設置し、クリックすると簡易フォームからメッセージを送ることができるプラグインです。送信された内容やクリック数は管理画面から確認でき、メールフォームより気軽なメッセージ送信ツールとして便利なプラグインです。
では早速インストールに移りましょう。
拍手送信プラグインページからボタンをクリックして必要なファイルをダウンロードします。
ZIPファイルがダウンロードされるのでこれを解凍します。
（「解凍ってなに？」という方は、ダウンロードしたファイルを解凍する | PHP Laboを参考にどうぞ）
解凍したフォルダの中身です。お察しの通り、テンプレートを変更したときのファイル同様、プラグインもまたfreoのフォルダ構成にあわせてあらかじめ整理された状態で配布されていることがあります。特にfreo公式で配布されているプラグインはほぼすべてに適用されているため、このままローカルにおいてあるだろうfreo本体のフォルダにコピーペーストで上書きが完了します。
ローカルファイルに上書きできたら、今度はFTPソフトを使って上書きした3つのフォルダをサーバに上書きしましてアップロードは完了です。
セットアップしよう
ファイルをサーバにアップしたら次にセットアップを行います。この工程はプラグインによっては不要なこともあるので、詳しくは各プラグインの解説ページをご確認ください。
拍手送信プラグインは2種類のセットアップが必要です。拍手送信プラグインの解説ページを参考にしつつ進めていきます。
まずは「http://～/index.php/setup」にアクセスします。前述しましたがこのページは管理画面にログインしておかないと開けないので、必ず作業の前にはログインしてから開きましょう。
特に入力する項目もないので「入力する」ボタンをクリックします。
「セットアップが完了しました。」と表示されたら成功です。
ここで「ご利用のサーバーは、PHPから直接パーミッションを設定することができない環境のようです。」と表示された場合は、ブラウザからはこのセットアップ作業を実行できません。その場合はFTPソフトを立ち上げ、解説ページを参考に必要なファイルのパーミッションを変更すればOKです。
では次に「http://～/index.php/clap/setup」にアクセスします。
こちらも特に必要な作業はありません。順当に「セットアップを実行する」ボタンをクリックし、緑文字で「拍手送信プラグインのセットアップが完了しました。」と表示されたら成功です。
以上でセットアップは完了しました。次の工程に進みます。
テンプレートを編集しよう
ファイルのセットアップが完了したら今度はテンプレートを編集して、拍手の送信ボタンを設置します。この工程はプラグインによっては不要なこともあるので、詳しくは各プラグインの解説ページをご確認ください。
まずはボタンをどこに設置するのか考えてみます。
さしあたり解説ページでも紹介されているようにサイドバーの最上部に設置することにしましょう。
まずはテンプレートファイルについての説明します。ページのレイアウトや文字や画像をどこに配置するかといった指示を記したファイルは、すべて「templates」フォルダにまとめられているので、ローカルでこのフォルダを開きましょう。
次にサイドバーの中身を書いた「utility.html」ファイルをテキストエディタで開きます。
ここでワンポイント。テキストエディタでHTMLファイルを開くというと、Windows付属の「メモ帳」などを使っている方も多いと思いますが、freo関連のファイルはすべてメモ帳では対応していない「UTF-8」という形式で保存されているため、メモ帳を使ってfreo関連の編集するのは避けましょう。UTF-8に対応している代表的なテキストエディタとしては「EmEditor Free」、「サクラエディタ」あたりをおすすめします。
ではテキストエディタで「utility.html」を開きます。
HTMLソースを開いた画面です。HTMLタグ以外の見慣れない記述が目に付きますが、今回はその解説は置いときまして、拍手送信プラグインに必要なタグだけ記入します。
今回はサイドバーに最初から設置されているカレンダーの上部に送信ボタンを設置したいので、上図の赤線部分にソースを記入します。
解説ページに記載されているHTMLを「<div class="utility"> ～ </div>」で囲んでコピーペーストします。
ソースを追加し終えたらUTF-8で保存し、編集した「utility.html」をサーバにアップします。
ページを開いてボタンが思った位置に掲載されていたら成功です。
設定を変更しよう
必要に応じて設定管理からプラグインの詳細を設定します。この工程はプラグインによっては不要なこともあるので、詳しくは各プラグインの解説ページをご確認ください。
管理画面を開き左から「設定管理」をクリック、表示された一覧から「拍手送信」をクリックします。
ここでワンポイント。この「拍手送信」のリンクはセットアップが完了したあとに表示されるため、この工程は必ずファイルアップとセットアップを終えてから行ってください。
拍手送信プラグインの設定画面が表示されます。連続送信回数や、お礼画面の出し方など、必要な設定を記入して、最後に「設定する」をクリックして完了です。
緑文字で「拍手送信を編集しました。」と表示されたら成功です。
動作を確認しよう
では最後にプラグインが実際に動作しているのか試してみましょう。プラグインによって正しい動作は異なりますが、実際に想定どおりに動いているのかどうかを確認しておくのは大事な工程です。
今回の拍手送信プラグインの場合は、
- 送信側の「ボタンをクリックするとメッセージフォームが表示されてテキストを送信できる」という動作。
- 受信側の「管理画面からボタンがクリックされた回数と、送信されたテキストを確認できる」という動作。
以上を確認します。
ではまず送信側の操作として入力ボタンをクリックします。
メッセージフォームが表示されたら適当な言葉を入力しましょう。
緑文字で「以下のメッセージが送信されました。」と表示されたら完了です。また最大送信数を設定している場合、ここで「もっと送る」を規定回数までクリックすると「一度に送信できる拍手は○回までです。」と表示されます。
送信側の動作は確認できました。次に受信側の動作確認に移ります。
プラグインのセットアップが完了していると、管理画面の左側に「拍手送信」というリンクが増えています。まずはこれをクリック。
拍手送信プラグインの管理画面が表示されました。その日の何時に何回送信ボタンをクリックされ、どんなメッセージが表示されたのかが確認できます。「表示対象」をクリックすると日付をさかのぼって確認できます。
日付を問わず送信されたメッセージのみ確認したい場合は「メッセージを管理する」をクリックします。
過去に送信されたメッセージの一覧を確認できます。
以上で動作確認完了です！ 正常に動作していましたでしょうか。どうしても上手くいかない場合は作業工程をさかのぼり、不備がなかったか確認してみましょう。
どうしても解決できないときは、freo公式のトラブルシューティングやサポートの記事を確認するとよいでしょう。
終わりに
今回で「freoはじめて物語」はいったん最終回です。自分がfreoにはじめて触れるときに欲しかった情報をまとめたくて始めた連載でしたがいかがでしたでしょうか。誰かのお役に立てたら幸いです。
また解説したい事柄が増えたり、freoのアップデートなどで仕様の変更があるなどすればひょっこり連載を続けているかもしれません。その際はまたよろしくお願いします。
もし使い方を解説して欲しいことのリクエストなどありましたらTwitterやメールフォームなどからいただければ記事にするかもしれませんのでお気軽にどうぞ。