インストール

下記のファイルをダウンロード後、解凍ください。tar、zipファイル2種用意してあります。お好きな圧縮形式ファイルをお選びください。

AssetExif.tar

AssetExif.zip

解凍すると、AssetExifフォルダが生成されます。そのフォルダをpluginsフォルダの中にFTPソフトなどを使ってコピー移動ください。

フォルダ移動後、ダッシュボード→プラグイン設定画面にてAsset Exif設定画面が表示されているようでしたら、無事インストール成功です。

初期設定を済ませ、MTAssetExifタグを任意のテンプレート内に追加することでイメージファイルと一緒にExif情報を抽出表示できるようになります。

△ページ先頭へ

プラグイン画面初期設定

プラグイン画面での表示パターン・表示項目設定、テンプレートタグでの生成ファイルフォーマット設定と2種類の設定があります。

プラグイン画面での設定

ダッシュボード　プラグイン画面にて表示パターン・表示項目を自由に選ぶことができます。

ダッシュボード→プラグイン画面→AssetExif→設定

右画像: クリックで拡大表示

setting_description.png

プラグイン設定画面となります。

表示パターン設定：は[英語表示のみ]、[日本語表示のみ]、[英語/日本語表示]の3パターンから選べます。

モード選択：全項目表示か表示項目選択の2通りから選べます。

全項目表示は、こちらでフォトグラフに必要であると思われる項目をピックアップしていますが23項目もあり、すべて表示すると画面に表示しきれない場合があります。ユーザビリティを考慮するなら、適度な項目を選択することをお薦めします。

自由に項目できるモードを選ぶと下部分に項目選択画面が表示されます。表示させたい項目を自由にお選びください。（チェックボックスにチェックを付ける）

以上設定ができましたら[変更を保存]ボタンをクリックして設定内容を保存します。

何も設定しない状態（デフォルト）は、英語表示パターンで全項目表示となります。

△ページ先頭へ

テンプレートタグ設定（基本）

追加されるテンプレートタグは <$MTAssetExif$> となります。

基本的に<MTAssets>ブロックタグの中に<$MTAssetExif$> を追加するようにしてください。

属性を指定していないデフォルトでは、<li></li>で括られたExif情報が出力されます。（<ul> </ul> タグの追加をしてください。）

HTML出力 基本テンプレートタグ構成

<MTAssets type="image">  //イメージファイルなのでtype属性でimage指定
<ul>  //整形しやすいように任意でclass指定追加ください。
<$MTAssetExif$>
</ul>
</MTAssets>

上記のテンプレートタグで出力されるデータは、すべてのイメージファイルからExif情報を抽出しリストで表示されることになります。

XML出力 基本テンプレートタグ構成

<MTAssets type="image">  //イメージファイルなのでtype属性でimage指定
<$MTAssetExif type="xml"$>  //type属性でxml指定
</MTAssets>

上記のテンプレートタグで出力されるデータは、すべてのイメージファイルからExif情報を抽出し名前空間値のXML形式データが出力されることになります。

XMLにて出力する場合は、新規にインデックステンプレートを作成する必要があります。

JSON出力 基本テンプレートタグ構成

<MTAssets type="image">  //イメージファイルなのでtype属性でimage指定
<$MTAssetExif type="json"$> //type属性でjson指定
</MTAssets>

上記のテンプレートタグで出力されるデータは、すべてのイメージファイルからExif情報を抽出しJSON形式データが出力されることになります。

JSONにて出力する場合は、新規にインデックステンプレートを作成する必要があります。

△ページ先頭へ

サンプルテンプレートタグ（HTML）

HTMLで出力する際のテンプレートタグのサンプルです。

HTMLテンプレートタグ　例）

アップロードされたイメージファイルで最新10件表示（イメージheight100pxとExif情報を並べて表示。サムネイルをクリックするとheight400pxのイメージファイルを開く）

<MTAssets type="image" lastn="10">
<MTAssetsHeader><ul></MTAssetsHeader>
	<li>
		<div class="image">
		<a class="thumb" href="<$MTAssetThumbnailURL height="400"$>" title="<$MTAssetLabel$>">
		<img src="<$MTAssetThumbnailURL height="100"$>" alt="<$MTAssetLabel$>" /></a>
		</div>
		<div class="caption">
			<ul id="exiftag">
			<$MTAssetExif$>
			</ul>
		</div>
	</li>
<MTAssetsFooter></ul></MTAssetsFooter>
</MTAssets>

HTMLテンプレートタグ　例2）

アップロードされたイメージファイルで最新10件表示（イメージheight100pxとExif情報＋ファイル名＋ファイル説明＋最終アップロード日時を並べて表示。サムネイルをクリックするとheight400pxのイメージファイルを開く）

<MTAssets type="image" lastn="10">
<MTAssetsHeader><ul></MTAssetsHeader>
	<li>
		<div class="image">
		<a class="thumb" href="<$MTAssetThumbnailURL height="400"$>" title="<$MTAssetLabel$>">
		<img src="<$MTAssetThumbnailURL height="100"$>" alt="<$MTAssetLabel$>" /></a>
		</div>
		<div class="caption">
			<ul id="exiftag">
				<li class="title"><$MTAssetLabel$></li>
				<li class="description"><$MTAssetDescription$></li>
				<li class="date"><$MTAssetDateAdded format="%Y-%m-%dT%H:%M:%S" language="en"$></li>
				<$MTAssetExif$>
			</ul>
		</div>
	</li>
<MTAssetsFooter></ul></MTAssetsFooter>
</MTAssets>

asset タグを含むテンプレートタグ | テンプレートタグリファレンスをご覧になり、さまざまなAssetタグと併用することでオリジナルのウェブフォトギャラリーを作ることができます。

HTMLテンプレートタグ　ウィジット　例3）

基本表示を理解しやすいように、下記のサンプルタグを参考にMovable Typeデフォルトテンプレート[ウィジット-アイテム]に追加し表示ください。

<mt:If tag="AssetCount">
    <mt:Assets type="image" lastn="10">
        <mt:AssetsHeader>
<div class="widget-recent-assets widget">
    <h3 class="widget-header">アイテム</h3>
    <div class="widget-content">
        <ul>
        </mt:AssetsHeader>
        <li class="item">
			<div class="image">
			<a class="asset-image" href="<$mt:AssetURL$>"><img src="<$mt:AssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$mt:AssetLabel$>" title="<$mt:AssetLabel$>" /></a>
			</div>
			<div class="caption">
			<ul>
				<$MTAssetExif$>
			</ul>
			</div>
		</li>
        <mt:AssetsFooter>
        </ul>
    </div>
</div>
        </mt:AssetsFooter>
    </mt:Assets>
</mt:If>

イメージファイルとExif情報を一緒に表示させる場合、javascriptフレームワークなどを併用して動的Galleryページを作成した方がスマートです。（サムネイルイメージをクリックしてからExif情報などをキャプションとして表示させる）

サンプルGalleryをご覧ください。HighslideJSアーカイブ: MT4Plugins::WEB DESIGN BLOG

△ページ先頭へ

サンプルテンプレートタグ（XML）

XMLで出力する際のテンプレートタグサンプルとなります。

新規インデックステンプレートにてxmlファイルを作成する必要があります。

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<MTAssets lastn="15">
<item>
<title><$MTAssetLabel$></title>
<link><$MTAssetURL$></link>
<description><$MTAssetDescription$></description>
<pubdate><$MTAssetDateAdded format="%Y-%m-%dT%H:%M:%S" language="en"$></pubdate>
<guid><$MTAssetURL$></guid>
<media:creator><$MTAssetAddedBy$></media:creator>
<media:content url="<$MTAssetURL$>" type="image/<$MTAssetFileExt$>" />
<media:text type="html"><$MTAssetLink$></media:text>
<media:description><$MTAssetDescription$></media:description>
<media:thumbnail url="<$MTAssetThumbnailURL$>" />
<exiftag><$MTAssetExif type="xml"$></exiftag>
</item>
</MTAssets>

併せてこちらのMedia RSS Module - RSS 2.0 Module　Yahoo! Search並びにReference Guide - Picasa Web Albums Data API - Google Codeをご参考にRSS生成についても検討してみてください。

△ページ先頭へ

サンプルテンプレートタグ（JSON）

JSONで出力する際のテンプレートタグサンプルとなります。

新規インデックステンプレートにてjsonファイルを作成する必要があります。

インデックステンプレートで出力ファイル名****.jsonで生成。asset_json.json 

{
	"title": "My Photography",
	"link": "http://weblibrary.s224.xrea.com/mt4plugins/assetexif/",
	"description": "",
	"modified": "<$MTDate format="%Y-%m-%dT%H:%M:%S" language="en"$>,
	"generator": "<$MTBlogURL$>",
	"items":[
		<MTAssets type="image" lastn="30">{
			"id" : "<$MTAssetID$>",
			"title" : "<$MTAssetLabel$>",
			"description" : "<$MTAssetDescription$>",
			"url" : "<$MTAssetURL$>",
			"thumbnail" : "<$MTAssetThumbnailURL width="100"$>",
			"exifinfo" : <$MTAssetExif type="json"$>
		}<MTAssetsFooter><MTElse>,</MTElse></MTAssetsFooter>
                </MTAssets>
	]
}

HTMLヘッダーに以下のスクリプトを追加

<div id="assetimages"></div> の中にサムネイルイメージを表示させるスクリプト(参照：jQuery.getJson( url, data, callback ) - jQuery 1.3.2 日本語リファレンス）

8枚分のデータ読み込み。Exif情報は4項目となります。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("jquery", "1.3.2");
</script> 
<script type="text/javascript">
$(document).ready(function(){
	$.getJSON("http://weblibrary.s224.xrea.com/mt4plugins/asset_json.json", function(data){
		$.each(data.items, function(i,item){
			$("<img/>").attr("src", item.thumbnail).appendTo("#assetimages");
			var list = '<ul class="exif">';
			var Lens = item.exifinfo.Lens;
			var exptime = item.exifinfo.ExposureTime;
			var model = item.exifinfo.Model;
			var aperture = item.exifinfo.Aperture;
			list+= '<li>'+Lens+'</li><li>'+exptime+'</li><li>'+model+'</li><li>'+aperture+'</li>';
			list+= '</ul>';
			$("#assetimages").append(list); 
		if ( i == 8 ) return false;
		});
	});
}); 
</script>

<div id="assetimages"></div>を任意の場所に作成すればOKです。

△ページ先頭へ

メインページ | | サンプルテンプレート »

インストール設定

AssetExifダウンロードフリー

Asset Exif

download Free Update!09/04/25