イメージ画像をスマートに拡大表示できるjavascript HighslideJSをMT4.1で簡単につかえるようにするためのカスタマイズを紹介しています。HighslideJS対応コードが容易に生成できるようになります。
MT4.1にシステムバージョンアップして、最初に行ったカスタマイズが、Highslide JS - JavaScript thumbnail viewerのタグを自動で生成できるようにすることでした。ファイルアップロード・ポップアップウインドウ用のファイル生成するためのファイルを探すのに時間がかかりましたが、以前よりもスクリプトがわかりやすく書かれていたのですぐにカスタマイズできました。
今回は、Highslide JS用のコードをMT4.1のファイルアップロード＞ファイルオプション＞[アップロードしたファイルを使ってブログ記事を書く]にチェックをつけた時に、自動で生成されるようにするカスタマイズを紹介します（一応ここ2週間ほど使っていますが、問題なく使えていますので紹介記事としてエントリーアップ）。
※尚、このカスタマイズを行って正しく動作するためには、「WYSIWYGのフォーマット設定がなし」の状態でないと正しいコードが生成されません。 また、現状問題なく動作していますが、もしコードを改編してシステムがおかしくなるかもしれませんので、自己責任の元参考にして試してみてください（デフォルトファイルのバックアップを取っておくことをおススメします）。
MT4.1用HighslideJS生成カスタマイズ
今回のカスタマイズは、ファイルオプション画面ですべてにチェックが入っていないとコードが生成されません。画像参照ください。
- HighslideJSコードを生成
- 任意のサムネイル画像サイズを入力することにも対応
- 画像の位置指定も対応
- キャプション生成コード（イメージと同一id属性付与）対応
Image.pmファイルをカスタマイズ
今回カスタマイズを行うファイルは、libフォルダ＞MT＞Asset＞Image.pmファイルです。
libフォルダ＞MT＞Asset＞Image.pmファイル
ファイルポジションは、右イメージクリックして確認してください。クリックで拡大表示されます。
ファイルアップロード後のファイルオプションウインドウ表示でチェックボックスが表示されます。そのチェックに関連してコードを別々に生成するための設定がされているファイルだと思われます。
今回は、このImage.pmファイルの中の設定されているコードをカスタマイズします。
コード編集
301行目から309行目のコードをカスタマイズします。
まず、デフォルトのコードは以下の通り
このコードを以下のコードに書き換えます。
以上のコードを書き換えることで、highslideJS用のコードが生成されるようになります。
「WYSIWYGのフォーマット設定がなし」の状態でイメージファイル挿入でもちゃんとコードが自動生成され、挿入されますので意外と便利です。
簡単に編集コードについて説明
perlについては、全く知識がありませんが、今回編集したコードの周りを見て、わかったことなどを説明しておきます。
上記のコードの3行目から：
qについては、MTフォルダの中のAsset.pmの中で設定されているコードに置き換えられます（MTフォルダ＞Asset.pm 315行目）。form要素にアップロードされたイメージファイルのidが付加されコードが生成されます。そして、実際にページを生成してみると、form要素はspan要素に置き換えられます。
たぶんアップロードしたイメージとエントリーを関係づけるためのidを付与するformタグが生成されるとおもったら、こちらのエントリーで説明されていました。画像を挿入したときにformタグがつく理由 - The blog of H.Fujimoto
一緒に生成されるform要素は、削除しない方が賢明です。後々、掲載イメージのサムネイルと最新記事リストを一緒にすることを考えていたので編集しなくてよかったです。
各コードの中での%sについては、コードの下記に記述されている以下の内容に順に置き換えれれます。そのようにつくれていますので、それらの働きを知っておくといいかもしれません。
上記のコードの働きのパターンを知っておけば、イメージ画像表示で使えそうなスクリプトに対応したコード生成なんかの設定も簡単にできると思います。
要は、301行目の生成されるコードの内容とパターンをちょっといじくるだけで、アップロード後にブログ記事作成画面に生成されるコードの内容を書き換えることが可能であるということです。
ファイルオプション機能カスタマイズ希望案
今回のカスタマイズは、邪道みたいな感じです。正直なところブログ記事を書く上でWEB上で個人使用に限り自由に使える便利なスクリプトなどをMT4.1のブログ作成機能の中で簡単に使えるようになるともっと活用できるようになると思います。
「MTプラグインを作ってみよう」というネタも読んでみたものの、正直なかなか理解できません。
そこで今回のhighslideJS用のコード生成パターンをデフォルトのファイルオプション画面に連動した機能が追加されるようになるといいな〜と思って希望案をイメージにしておきます。
お時間がある方で興味があるようでしたら、作っていただけると幸いです。上記はチェックボックスのパターンですが、生成されるコードの前後に任意のコードで括れるように（任意のコードを入力できるように）なるともっといろんなスクリプトを使ってブログを演出できていろんなユーザーに使える機能になると思います。
MT3.3xでのhighslideJS用のコードを自動的に生成するカスタマイズ
MT3.3xでのhighslideJS用のコードを自動的に生成するカスタマイズは、こちらのHighslide JS用アトリビュート追加-Movable Type（ムーバルタイプ）埋め込み画像カスタマイズで紹介しています。ファイルアップロードからすぐにサムネイル画像の大きさの指定にも対応したコードを自動生成できるカスタマイズ方法です。
MT4.1アイテムをhighslide使用にする
アイテムウィジットコード表示
・クリックでコードが別ウインドウで表示
・ドラッグ部分にマウスをあて、ドラッグして移動も可能
・ウインドウのリサイズも左下隅で可能
部分にマウスをあて、ドラッグしてウインドウサイズを拡大縮小可能）MT4.1から新しく備わったアイテムウィジットをhighslide使用に改編するMTテンプレートタグです。キャプション部分にファイル名とイメージに関する説明なんかも入れてみています。
デフォルトのアイテムウィジットコードにhighslideJS表示のためのコードを追加し、キャプション部分にイメージファイル名を表示する<$MTAssetLabel$>、そして説明を表示する<$MTAssetDescription$>を追加しました。
←→（矢印）キーでアイテム画像がスライド表示できるようにリストの下にコントロール機能のコードも追加しています。一応、個々のエントリーでは正しく動作しないときがあります。
試してみてください。どれか画像をクリックして拡大された状態で→キーを押してみてください。そうするとそのページでhighslideJS対応コードで表示されているイメージがスライドで拡大表示されます。
これを使って、photolog専用のカテゴライズ専用ページを作り、→キーの使い方の説明を表示しておけば、ユーザーは、クリックすることなくイメージ画像をスライドでみることができます。
また、記事URLをhighslideJSのキャプション部分で表示できるようになるとさらに興味があれば、すぐに記事へ飛べることもできたりもします。
MTAsset周りのタグとMTEntriesのタグを使えば、イメージ画像のリスト表示（もしくは、テーブル表組みも可能）ができます。目下そちらを勉強中。
新しいMTで一番気になる機能なんですよねー。以前のシステムよりさまざまなアングルから提案（イメージ、アニメーション、動画、音声など）ができるようになった機能を使わない手はないです（今現在のニュースサイトもそうした情報提案の方法を追求しているように）。なんか上手く使えるパターンなんかも考えたりしています。
イメージサムネイル表示機能を活かすための参考エントリー
highslideJS紹介記事更新予告
このスクリプトを使うようになって、もう1年半が経ちます。結構多くの有名ブロガーの方にも好評のようですね。スクリプトもかなりバージョンアップされています。実装方法もパターン別に更新しなおした方がいいみたいですので、近々更新します。
今現在、MT4.1インデックステンプレート解析のエントリーを更新している作業中なんですが、コード表示もsyntaxhighlighter - Google CodeとHighslide JSを組み合わせて使い、本文とコードを一緒に追えるような感じで制作しています。自分では、結構使えるパターンじゃないかと思いつつHighslide JSでいろんなことを試しています。
コメントする