プラグイン解説::漫画表示プラグインを使ってみる
- Post date：2014/08/26
- Category：プラグイン解説
お久しぶりです。以前の連載でfreoの基本的な設置方法や使い方に触れたため、今回からはしばらくfreoの懐の深さを実感できる「プラグイン」の使い方に迫ってみたいと思います。
ひとつひとつのプラグインの設置方法や使い方に着目し、実際に使ってみるまでにつまづきやすいポイントなども解説します。また、他であまり解説されていないけれど、創作・同人系サイト運営に役立つプラグインにも着目していこうとおもっています。
第1回の今回は「漫画表示プラグイン」を取り上げます。
どんなことができるのか
こちらはPixivの漫画投稿機能に似たもので、複数の画像を順番にページめくりできるようになるプラグインです。このサイトでも各種テンプレートのスクリーンショット画像の閲覧に使っています。
連作漫画を掲載したい人には魅力的なプラグインですが、テンプレートの編集箇所が多く、設置につまづきやすいプラグインでもあります。ここでは設置済みのサンプルテンプレートの配布も行っていますので、ぜひプラグイン設置にチャレンジしてみてください。
ファイルを用意しよう
以前かいた「freoはじめて物語(6) プラグインを使ってみよう | Freoテンプレートギャラリー」でも解説しましたが、プラグインの設置はどんなプラグインでも一定のパターンがあります。
今回取り上げる漫画プラグインでは下記を行う必要があります。
- テンプレートを編集しよう
- ファイルをアップロードしよう
今回は、先にローカル環境でテンプレートを編集し、その後サーバにアップロードするという工程を踏んでいきます。細かいところがわからないときは前述の記事も参考にしていただけると幸いです。
ではまずは「漫画表示プラグイン」から最新版のプラグインをダウンロードしましょう。ページ中の青いボタンをクリックし、適当なフォルダに保存します。
保存したZIPファイルを解凍します（解凍の仕方を知りたい場合は、ダウンロードしたファイルを解凍する | PHP Laboを参考にどうぞ）
解凍したフォルダはあらかじめfreoの標準フォルダ構成と同じものになってますので、さしあたりローカルにおいてあるfreoフォルダ内にコピーペーストしましょう。
テンプレートを編集しよう
次にテンプレートの編集を行います。
- templates＞internals＞admin＞iframe_media.html
- js＞iframe.js
以上二つのファイルを「漫画表示プラグイン＞導入方法＞テンプレートの編集、JSファイルの編集」を参考に編集します。
ここではあらかじめ漫画プラグイン用に改造したファイルも用意しましたので、どうしてもわからない・設置できない場合は下記を使ってみてください。
編集済みファイルをダウンロードする（5KB。ZIPファイル）
ダウンロードしたZIPファイルを解凍し、中身のファイルを既存ファイルに上書きしてください。
標準エディタを使っている場合は「iframe.js」を使ってください。「iframe_markitup.js」は使わないので削除してOKです。
markItUpを使用している場合は「iframe_markitup.js」を「iframe.js」に名前を変えて上書きしてください。
以上の編集が終わったら、すべてのプラグイン用ファイルをサーバにアップロードしましょう。以上で設置完了です。
編集済みファイルの使用上の注意
freo本体 1.19.3、プラグイン1.5.1で動作確認しています。これ以下のバージョンでも問題はないと思いますがノーサポートです。
配布ファイルはfreo本体1.19.3に付属している当該ファイルに、漫画表示プラグイン用の改造を施しただけのものです。すでに別改造をしている場合は上書きされてしまいますので、その場合は手動で必要なソース部分をコピーペーストしてください。
実際に使ってみよう
設置が完了したら次は管理ページにログインして、実際に画像を投稿して見ましょう。
管理ページ左側の「メディア管理」を開きます。
「ディレクトリを作成する。」から「comics」というフォルダを作成します。
作成した「comics」フォルダを開きます。
画像を納めるフォルダをつくります。名前はなんでもOKです。
作成したフォルダに画像を投稿しましょう。画像の登録がわからないときは「freoはじめて物語(5) メディア機能を使いこなそう」を参考にしてみてください。
ここでワンポイント。
必ず冒頭（表紙）の画像名は「0.拡張子（0.jpg、0.gif、0.pngなど）」にしてください。漫画プラグインは「0.拡張子」が該当フォルダにあるときにだけ使用できます。
また並び順はファイル名で判断されますので、続く画像も「1、2、3、4……」としておくとわかりやすいです（10ページ以降は「10、11、12……」とするとちゃんと「9」の次に表示されます）
画像が投稿できたので次は記事を投稿します。エントリーもしくはページ機能を使って、普通に記事を投稿する準備を行います。
必要な入力項目を埋めたら、本文フォームの中で漫画を置きたいところにカーソルを移動させて起きます。その後はメディア投稿ボタンをクリックしてください。
先ほど作成した「comics」と整理用フォルダを開きます。
きちんとプラグインが設置されており、「0.拡張子（0.jpg、0.gif、0.pngなど）」が投稿されている場合、「これらの画像ファイルを漫画として挿入する。」というリンクが表示されます。おもむろにクリックしましょう。
クリックすると漫画挿入のための画面に繊維します。必要な項目を選択し、最後に「挿入する」をクリックしましょう。
ウィンドウが閉じ、本文フォームに「漫画」というリンクが設置されていたらOKです。
そのまま記事を投稿します。投稿画像を見たいときは、記事内に表示された「漫画」というリンクをクリックします。
標準では背景灰色の漫画掲載ページが表示されたら掲載成功です！
以上で設置は完了しました。上手く動かない！ というときは下記項目もご確認ください。
うまく動かないときの対処法
以下は設置でつまづきやすい点をまとめました。上手くいかないときはひとつひとつ確認してみてください。
「これらの画像ファイルを漫画として挿入する。」が出てこない
- プラグインに必要なファイルはすべてアップロードしましたか？
- 「iframe_media.html」を編集しましたか？
- 編集した「iframe_media.html」をアップロードしましたか？
- 「0.拡張子（0.jpg、0.gif、0.pngなど）」という画像ファイルはありますか？
「挿入する」をクリックしてもウィンドウが閉じず、本文フォームにリンクが表示されない。
- 「iframe.js」を編集しましたか？
- 編集した「iframe.js」をアップロードしましたか？
- 標準エディタをつかっているのに「markItUp!」用の編集をしていませんか？ また「markItUp!」をつかっているのに標準エディタ（tiny_mce）用の編集をしていませんか？
- 「iframe.js」内の「parent.$.fn.colorbox.close();」という一行を消していませんか？
以上でも改善しない、これ以外の症状が出ている場合は「サポート | freo.jp」を「漫画表示プラグイン」で検索してみると解決の糸口があるかもしれません。
カスタマイズしてみよう
プラグインは標準状態で手を加えることでより便利な使い方が出来ます。
公式サイト上でもいくつか紹介されていますが（漫画表示プラグイン＞機能解説）、それ以外のカスタマイズ例ををいくつかご紹介します。
ここからはある程度のHTML・Javascriptの知識が必要になります。改造後に失敗した場合にそなえて、必ずバックアップをとっておきましょう。
漫画閲覧ページを新規ウィンドウで開きたい
「iframe.js」内の以下部分を変更してください。
変更前
var content = '<a href="' + media_comic.path + parameter + '">漫画</a>';
変更後
var content = '<a href="' + media_comic.path + parameter + '" target="_blank">漫画</a>';
同様に「_self」「_top」なども指定できます。
リンク用テキストを変更する
「iframe.js」内の以下部分を適宜変更してください。
変更前
var content = '<a href="' + media_comic.path + parameter + '">漫画</a>';
変更後
var content = '<a href="' + media_comic.path + parameter + '">漫画を読む</a>';
また下記のように変更すると、HTMLタグやテキストを除いた純粋なURLだけが挿入されます。
var content = media_comic.path + parameter ;
テキストリンクではなく画像リンクにしたい
いったん「漫画」状態のテキストリンクで出力し、リンクタグ内にメディア機能で画像を挿入すると画像からのリンクに出来ます。
「添付ファイル」機能を使ってアップロードした画像にリンクをつけたい場合は、下記記事を参考にするとよいでしょう。
オプション選択の標準状態を変えたい
頻繁にプラグイン機能を使っていると、よく使うオプションも偏っていくと思います。しかし、毎回それらを変更するのも面倒ですよね。そこで、あらかじめオプション選択を使いやすい状態にセットしておいて更新の手間を省きましょう。
では、下記テンプレートを編集します。
- templates＞plugins＞media_comic＞admin.html
「漫画挿入フォーム」と書かれたソースの下に選択オプションフォームがあります。そこの各ラジオボタンから「checked="checked"」をよくつかう項目にカットアンドペーストしましょう。
編集が完了したらテンプレートファイルをアップロードし、元ファイルに上書きしたら作業完了です。漫画挿入画面を開き、好みの選択になっているか確認しましょう。
予告
個人的な話になりますが、筆者がfreoに最初に興味関心を抱いたのは実はこの漫画表示プラグインがあったからでした。
当時「漫画」というメディアに着目したブログツールやギャラリーツールは少なく、あったとしてもカスタマイズの難しいツールがほとんどだったようにおもいます。そんな中、このプラグインのシンプルさ、表示の軽快さに感激し、それからfreoを勉強し始めたという経緯があります。
freoが創作サイト運営を主としたCMSであるということが伝わってくるプラグインだと思います（もちろんいまとなってはそれ以外の用途にも便利なツールだとわかりました）
さて、次回からは現在のネット表現活動の主流ともいえる「SNS」とfreoを連携するプラグインに着目していきたいとおもいます。