創作サイト向けコンテンツ管理システム freo（フレオ）

このプラグインについて

メディア管理でアップロードしたファイル（複数枚の画像）を、漫画形式で表示できます。

広告

ダウンロード

以下のリンクからプラグインをダウンロードできます。（GitHubに遷移します。）

GitHubの緑ボタン「Code」内にある「Download ZIP」からすべてのプラグインをダウンロードできるので、解凍後に作成されるフォルダの中から media_comic フォルダを入手してください。

• GitHubからダウンロード

• 旧バージョンをダウンロード

導入方法

ファイルのアップロード

media_comic/ 内の css/ と js/ と libs/ と templates/ を、freo設置ディレクトリ内にアスキーモードで上書きアップロードします。

テンプレートの編集

templates/internals/admin/iframe_media.html の50行目あたりある

<table summary="メディア" id="media" class="tablesorter">
  <thead>
    <tr>

この直前に、以下のコードを追加します。

<!--{if $plugin_media_comic}-->
<ul>
  <li><a href="{$freo.core.http_file}/media_comic/admin?path={$freo.query.path}&type=iframe">これらの画像ファイルを漫画として挿入する。</a></li>
</ul>
<!--{/if}-->

JSファイルの編集

js/iframe.js の25行目あたりにある

//メディア挿入
$('a.insert').click(function() {
  ～略～
});

この直後に、以下のコードを追加します。

//漫画挿入
$('form#media_comic_insert').submit(function() {
  var media_comic = {
    path: $(this).find('input[name=\'plugin_media_comic[path]\']').val(),
    columns: $(this).find('input[name=\'plugin_media_comic[columns]\']:checked').val(),
    direction: $(this).find('input[name=\'plugin_media_comic[direction]\']:checked').val(),
    devide: $(this).find('input[name=\'plugin_media_comic[devide]\']:checked').val(),
    end: $(this).find('input[name=\'plugin_media_comic[end]\']:checked').val(),
    navigation: $(this).find('input[name=\'plugin_media_comic[navigation]\']:checked').val()
  }

  var parameters = [];

  if (media_comic.columns == '1') {
    parameters.push('columns=1');
  }
  if (media_comic.direction == 'ltr') {
    parameters.push('direction=ltr');
  }
  if (media_comic.devide == 'on') {
    parameters.push('devide=on');
  }
  if (media_comic.end == 'on') {
    parameters.push('end=on');
  }
  if (media_comic.navigation == 'off') {
    parameters.push('navigation=off');
  }

  var parameter = parameters.join('&');

  if (parameter) {
    parameter = '?' + parameter;
  }

  var content = '<a href="' + media_comic.path + parameter + '">漫画</a>';

  if (parent.tinymce.isIE) {
    parent.tinyMCE.activeEditor.focus();
    parent.tinyMCE.activeEditor.selection.moveToBookmark(parent.tinymce.EditorManager.activeEditor.windowManager.bookmark);
  }
  parent.tinyMCE.activeEditor.execCommand('mceInsertContent', false, content);
  parent.$.fn.colorbox.close();

  return false;
});

本文にmarkItUpを使用している場合、上のコードの最後の方にある

if (parent.tinymce.isIE) {
  parent.tinyMCE.activeEditor.focus();
  parent.tinyMCE.activeEditor.selection.moveToBookmark(parent.tinymce.EditorManager.activeEditor.windowManager.bookmark);
}
parent.tinyMCE.activeEditor.execCommand('mceInsertContent', false, content);

この部分は以下のように変更します。

parent.$.markItUp( { placeHolder: content } );

完了

以下の手順で漫画を表示することができます。

まずはメディア管理で、comics ディレクトリを作成します。（一番上の階層に作成します。）漫画用のデータはこの中にアップロードし、それ以外のデータはこの外にアップロードします。comics という名前以外を使いたい場合、機能解説を参考にしてください。

comics ディレクトリの中に漫画用のディレクトリを作成し、さらにその中に画像をアップロードします。

別の漫画をアップロードする場合、別途ディレクトリを作成してその中に画像をアップロードします。つまり、以下のような構成です。

メディア /
    |
    +-- comics /
           |
           |
           +-- xxx / 0.jpg
           |         1.jpg
           |         2.jpg
           |         3.jpg
           |         4.jpg
           |         5.jpg
           |
           +-- yyy / 1.jpg
                     2.jpg
                     3.jpg
                     4.jpg
                     5.jpg
                     6.jpg
                     7.jpg

漫画がたくさんある場合、comics ディレクトリ内に分類用のディレクトリを作成して管理しても大丈夫です。

メディア /
    |
    +-- comics /
           |
           |
           +-- original /
           |      |
           |      +-- xxx / 0.jpg
           |      |         1.jpg
           |      |         2.jpg
           |      |         3.jpg
           |      |         4.jpg
           |      |         5.jpg
           |      |
           |      +-- yyy / 1.jpg
           |                2.jpg
           |                3.jpg
           |                4.jpg
           |                5.jpg
           |                6.jpg
           |                7.jpg
           |
           +-- fanart /
                  |
                  +-- xxx / 0.jpg
                  |         1.jpg
                  |         2.jpg
                  |         3.jpg
                  |         4.jpg
                  |         5.jpg
                  |
                  +-- yyy / 0.jpg
                            1.jpg
                            2.jpg
                            3.jpg
                            4.jpg
                            5.jpg

記事を投稿する際、漫画が格納されているディレクトリを開くと「これらの画像ファイルを漫画として挿入する。」リンクが表示されます。

リンクをクリックすると、オプション設定が表示されます。必要に応じて設定し、挿入ボタンを押すと本文に漫画へのリンクが挿入されます。

オプションを変更したい場合、挿入されたHTMLを直接編集するか、再度挿入しなおします。

画像のルール補足

• 表紙が必要な場合、画像のファイル名は、0 からの連番にしてください。（2ページずつ表示させた場合、0 は表紙に、最後は裏表紙になります。）
• 表紙が不要な場合、画像のファイル名は、1 からの連番にしてください。（2ページずつ表示させた場合、最初から2ページずつ表示されます。）
• 画像の種類は、gif・jpeg・png に対応しています。
• 画像のサイズは任意ですが、漫画ごとにすべて統一してください。また、大きすぎると表示が遅くなりますし、そもそも画面に入りません。
• 先頭ページの画像にメディア管理で「ファイルの説明」を登録すると、漫画ページのtitleタグに使用されます。

機能解説

目次

• 漫画用データアップロード先の名前を変更する
• オプション
• 漫画表示ページのデザイン変更
• 漫画最終ページのデザイン変更

漫画用データアップロード先の名前を変更する

config.media_comic.php の以下の部分で、ディレクトリを変更できます。途中で名前を変更する場合、メディア管理画面からディレクトリ名も変更する必要があります。

//漫画格納ディレクトリ
define('FREO_PLUGIN_MEDIA_COMIC_DIR', 'comics/');

オプション

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

columns=1

1ページずつ表示します。

direction=ltr

左→右の順で表示します。（2ページずつ表示する場合に有効）

devide=on

ページを分割して表示します。

end=on

終了ページを表示します。

navigation=off

ナビゲーションを非表示にします。

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

漫画表示ページのデザイン変更

templates/plugins/media_comic/default.html が漫画表示ページのHTML、css/media_comic.css がCSSです。これらを編集すればデザインを変更できます。

漫画最終ページのデザイン変更

漫画の一番最後に専用ページが表示されますが、templates/plugins/media_comic/end.html がこのページのテンプレートです。これを編集すればデザインを変更できます。

削除方法

このプラグインは、以下の手順で削除できます。

ファイルの編集

JSファイル、テンプレートの編集内容を元に戻します。

ファイルの削除

以下のファイルを削除します。

• css/plugins/media_comic.css
• js/plugins/media_comic.js
• libs/freo/plugins/config.media_comic.php
• libs/freo/plugins/display.media_comic.php
• libs/freo/plugins/page.media_comic.php
• templates/plugins/media_comic/ （ディレクトリごと削除）

更新履歴

2013/04/14 Ver 1.5.1

• 指定されたデータが見つからない時、404エラーを返すように変更。

バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。

• 更新ファイル

2013/01/26 Ver 1.5.0

• 漫画の最後に専用ページを表示するかどうか、漫画挿入時に選択できるように改良。
• 漫画表示プログラムを全面的に書き直し。

バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。

• 更新ファイル

js/iframe.js に追加するコードにも変更があります。js/iframe.js は再度編集してください。

2013/01/21 Ver 1.4.0

• 漫画ページの最後に、専用ページが表示されるように変更。

バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。

• 更新ファイル

2012/12/11 Ver 1.3.0

• freo Ver 1.13.0 に合わせて、メディア管理での閲覧制限が反映されるように調整。

バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。

• 更新ファイル

2012/11/26 Ver 1.2.1

• ページ分割表示の際の、戻り先取得処理を改良。

バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。

• 更新ファイル

2012/11/26 Ver 1.2.0

• 先頭ページの画像に設定された「ファイルの説明」が、漫画ページのタイトルに反映されるように改良。
• ページ移動が正しく機能しないことがある不具合を修正。

バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。

• 更新ファイル

2012/11/06 Ver 1.1.2

• 外部CSSファイルと外部JSファイルの配置位置を変更。

バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。

• 更新ファイル

外部CSSファイルと外部JSファイルの配置位置を変更したのみなので、バージョンアップしなくても動作に支障はありません。ですが今後混乱しないように

• config.media_comic.php を上書きアップロード
• media_comic.css を css/ から css/plugins/ に移動
• media_comic.js を js/ から js/plugins/ に移動
• media_comic/default.html を上書きアップロード（media_comic.css と media_comic.js へのパスを調整したのみ）

とすることをお勧めします。

2012/10/24 Ver 1.1.1

• 画像が正しい順で表示されないことがある不具合を修正。

バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。

• 更新ファイル

2012/09/19 Ver 1.1.0

• 表紙なしの表示に対応できるように改良。

バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。

• 更新ファイル

2012/09/03 Ver 1.0.0

正式版を公開しました。

コンテンツ

• このプラグインについて
• ダウンロード
• 導入方法
• 機能解説
• 削除方法
• 更新履歴