参考までに、スクリプトを掲載します。拡張子「.jsx」で保存し、"C:\Program Files\Adobe\Adobe Photoshop CS3\プリセット\スクリプト"あたりに入れると使えます。

• ※ 本スクリプトを使用して何らかの問題が生じた場合も、責任は負いかねますのでご了承ください。

テキストエクスポート スクリプト例

• ダウンロード

/* テキストエクスポート.jsx
 * Skyward Design JavaScript Library for Photoshop
 * PSDファイル内のテキストレイヤーの内容を、テキストファイルに書き出します。
 * 
 * Version 1.0.2
 * Copyright (C) 2010 Hideki Abe
 */
(function(activeDocument) {
    // オプション設定
    var options = {
        // 改行
        linefeed : String.fromCharCode(13),
        
        // セパレート文字列
        separator : "------------------------------------------------------",
        
        // 出力レイヤー接頭語
        // Version 1.0.2では未使用
        targetname : "w_"
    };
    
    function main() {
        var fileName = File.saveDialog("保存するファイル名を入れてください");
        if(fileName) {
            // ファイルを作成し、テキストレイヤー書き出し処理へ
            var file = new File(fileName);
            var openFlag = file.open("w");
            if(openFlag) {
                // ファイル情報生成
                var date = new Date();
                var fileInfo = activeDocument.name + options.linefeed + "Generated: " + date + 
                               options.linefeed + options.linefeed + options.linefeed + 
                               "********** Output Start **********" + options.linefeed + options.linefeed;
                file.write(fileInfo);
                
                // レイヤー出力
                _scanLayer(file, activeDocument);
                file.close();
                alert("書き出しが完了しました。");
            } else {
                alert("ファイルが開けませんでした。");
            }
        } else {
            alert("処理を中止します。");
        }
    }
    
    // レイヤースキャン・書き出し
    function _scanLayer(file, target, layerpath) {
        // Layersオブジェクト取得
        var targetLayers = target.layers;
        var nLayer = targetLayers.length;
        var path = layerpath || "root";
        
        for(var i = 0; i < nLayer; i++) {
            if(targetLayers[i].typename === "LayerSet") {
                // レイヤーセットの場合
                // レイヤーセット情報を出力後再帰処理
                var tmpPath = path + " > " + targetLayers[i].name;
                var text = options.separator + options.linefeed + 
                           "Layerset: " + targetLayers[i].name + options.linefeed + 
                           "  Path: " + tmpPath + options.linefeed + 
                           options.separator + options.linefeed;
                file.write(text);
                _scanLayer(file, targetLayers[i], tmpPath);
            } else if(targetLayers[i].kind === LayerKind.TEXT) {
                // テキストレイヤーの場合
                var text = targetLayers[i].textItem.contents;
                file.write(text + options.linefeed + options.linefeed);
            }
        }
        
        file.write(options.linefeed);
    }
    
    // Dispatch
    main();
    
})(activeDocument);

これは、select要素が「Windowed Elements」として扱われるため、常に「Windowless Elements」よりも上部に描画される、つまりプルダウンメニューの上にselect要素が重なって表示されてしまうというIE6の仕様に対処するためのようです。

参考

INFO: How the Z-index Attribute Works for HTML Elements

ちなみに、select要素を消すのではなく、select要素の上に表示させたい要素の背後にiframeを入れる対処法もあるようです。

参考

YUI Library Examples

Shimalogに写真を掲載する際、撮影場所をGoogleマップで示すために緯度・経度を入力しているのですが、毎回他のサイトで緯度・経度を調べてコピーしてくるのがとても手間でした。

そこで、「Web creators 2009年2月号」を参考にし、Movable Typeの記事投稿画面をカスタマイズ。Google Mapsを表示し、マーカーで指定した撮影場所の緯度・経度を、カスタムフィールドに自動入力するようにしました。

カスタマイズは、MTのブログ記事編集画面のテンプレートにGoogle Maps APIと地図をロードする処理などを記述するだけで完了します。

当サイトの場合、Shimalogで示すポイントは全て沖縄県内なので、デフォルトで沖縄県全域がGoogle Mapsで表示されるように設定したこと。同じウインドウ内でスピーディーに地図を操作でき、なおかつ値が自動で入るのは大変快適です。

管理画面のカスタマイズ方法

MTのブログ記事編集画面のテンプレートである/mt/tmpl/cms/edit_entry.tmplを、/mt/alt-tmpl/cms/内にコピーします。そして、変数js_include（<mt:setvarblock name="js_include" append="1">のように書かれている部分）内に、Google Maps API、地図を表示するスクリプト（下記にサンプルを掲載）をロードするように記述します。

Googleマップを表示させ、緯度・経度を自動入力するスクリプト

JavaScriptはまだまだ勉強中ですが...。

window.onload = function(){
    //Googleマップを表示する要素を作成
    var elem = document.createElement('div');
    elem.setAttribute('id', 'mapArea');
    
    //カスタムフィールドを表示する要素内に作成要素を追加
    document.getElementById('customfield_longitude-field').appendChild(elem);
    
    //マップのロード
    gmapLoad();
}

function gmapLoad(){
  if (GBrowserIsCompatible()){
    var zoom;
    var center;
    var entryLat = document.getElementById('customfield_latitude').value;
    var entryLng = document.getElementById('customfield_longitude').value;
    
    //Googleマップの準備
    var map = new GMap2(document.getElementById('mapArea'));
    map.addControl(new GLargeMapControl());  
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();
    
    if(entryLat == '' && entryLng == ''){
    //緯度・経度が未入力の場合は、既定の地点を中央にセット
      center = new GLatLng(25.383735, 125.958252);
      zoom = 7;
    } else {
    //緯度・経度が入力済みの場合は、その地点を中央にセット
      center = new GLatLng(entryLat, entryLng);
      zoom = 15;
    }
    map.setCenter(center, zoom);
    
    //マーカーをセット
    var markerArrow = new GIcon();
    markerArrow.image = "http://maps.google.com/intl/ja_jp/mapfiles/arrow.png";
    markerArrow.shadow = "http://maps.google.com/intl/ja_jp/mapfiles/arrowshadow.png";
    markerArrow.size = new GSize(39, 34);
    markerArrow.shadowSize = new GSize(39, 34);
    markerArrow.iconAnchor = new GPoint(12, 34);
    var marker = new GMarker(center, {draggable:true, icon:markerArrow, bouncy:false});
    map.addOverlay(marker);
    
    //マーカーをドラッグ＆ドロップした際に、
    //カスタムフィールドに緯度・経度を入力するイベントをセット
    GEvent.addListener(marker, "dragend", function(){
      var point = marker.getLatLng();
      document.getElementById('customfield_latitude').value = point.lat();
      document.getElementById('customfield_longitude').value = point.lng();
      map.setCenter(point);
    });
  }
}

記事で扱っている場所を分かりやすく示すため、個別記事ページでもGoogle Mapsを表示するようにしました。地図を見るためにわざわざGoogle Mapsに移動しなければならないのは面倒ですよね。

個別記事ページで指定された緯度・経度をマップの中心にし、一定のズームレベルでGoogle Mapsを表示するJavaScriptの関数（mapLoadと命名）を新たに作成しました。

mt-search.cgiを用いて関連する記事を表示

個別記事ページに表示させるようにした地図をさらに活用するため、表示している記事に関連する記事（地理的に近い記事）を同じ地図内でマッピングし、関連する記事に容易にアクセスできるようにしました。

関連する記事は、「タグ」を用いてmt-search.cgiで抽出しています。/（MTインストールディレクトリ）/search_templates/内に、検索結果をXMLとして出力するテンプレートを作成し、mt-config.cgiで代替テンプレートとして登録しました。そして、JavaScript内でmt-search.cgiを呼び出す際、引数で登録した代替テンプレートを使用するように指定します。

MTのシステムテンプレート内にある「検索結果」テンプレートをカスタマイズするのではなく、代替テンプレートとしたことにより、通常のキーワード検索も併用することが可能です。

• サンプル記事
• 検索結果ページのカスタマイズ（シックス・アパート）

• ※ Web Designing 2009年1月号に掲載された事例を応用して作成しました。
• ※ Shimalogでは、現在キーワード検索は提供していません。

地域の切り替え機能を追加

従来よりGoogle Mapsを表示していたShimalogトップページですが、沖縄県全体を表示するようズームレベルを設定していたため、海の中にポツンとアイコンが立っているようで、地図として分かりにくい状況でした。

そのため、ガイドブック等と同じように沖縄県を3ブロック（本島周辺・八重山・宮古）に分け、アクセス時は沖縄本島周辺を地図の中央にセットするようにしました。そして、ユーザーの希望に応じて表示地域を変更（マップの中心を移動し、ズームレベルを変更）できるよう、moveCenter関数を新たに作成しました。

またファーストビューにGoogle Mapsが入るよう、コンテンツ掲載順の入れ替えを行いました。

• サンプル

まとめ

Web Designing等に掲載された事例を研究し自分なりに応用すると、より使いやすいコンテンツを作ることが出来ると感じました。また、Movable Typeは工夫次第で新しいものが生み出せる可能性を持っていることが分かります。今後も小さな改良や実験を行っていきたいと思っています。

前書きに「いきなり読むのではなく、まず“見て”ください」とあったので、パラパラとめくって見ていったのですが、美しい写真やスクリーンショット、解説用の図版が多数掲載されており、思わず「おぉっ」と驚きました。また、テキストの配置やサイズ、間の取り方が良く、大変見やすい印象を受けました。

本格的に読むのはこれからですが、見出しを見ただけでも興味のある項目が多数並んでおり、あっという間に読み終えてしまいそうです。この本を通してまた新しい発見をし、「これからのWeb」を創っていく一人になれたらと思います。