YANO's digital garage

Copyright ©YANO All rights reserved. https://www.bravotouring.com/~yano/

Last-modified: 2024-04-17 (水)


[一語一絵/IT系]

Googleマップ on MTOS / 2009-04-26 (日)

Google Maps on MTOS
Googleマップも出来た

先日入手したMTOS活用テクニックに教えを請うて、[External]『轍 Wadachi』版の[External]Google マップ表示の実装完了。

まずはひな形からプラグインの/usr/lib/cgi-bin/mt/plugins/EntryGmap/EntryGmap.plを作成。ポイントは'gmap_track','gmap_marker','gmap_markerlist'と3つのフィールドを作成する事。一部を抜粋するとこんな感じ。

sub init_registry {
    my $plugin = shift;
    $plugin->registry({
        object_types => {
            'entry' => {
                'gmap_track' => 'text',
                'gmap_marker' => 'text',
                'gmap_markerlist' => 'text',
            },
        },
        tags => {
            function => {
                EntryGmapTrack => \&entry_gmap_track,
                EntryGmapMarker => \&entry_gmap_marker,
                EntryGmapMarkerlist => \&entry_gmap_markerlist,
            },
        },
        callbacks => {
            'cms_pre_save.entry' => {
                priority => 9,
                code => \&save_entry_field,
            },
        }
   });
}

sub save_entry_field {
    my ($eh, $app, $entry, $orig_entry) = @_;

    $entry->gmap_track($app->param('gmap_track') || '');
    $entry->gmap_marker($app->param('gmap_marker') || '');
    $entry->gmap_markerlist($app->param('gmap_markerlist') || '');
    1;

};
その後、「ダッシュボード」にログインする事で/usr/lib/cgi-bin/mt/plugins配下のプラグイン「EntryGmap」が読み込まれ、データベース・テーブルに'gmap_track'以下のフィールドとそれらのメソッドが追加される。

続いて/usr/lib/cgi-bin/mt/alt-tmpl/cms/edit_entry.tmplに以下のパッチを適用。

*** edit_entry.tmpl.orig        2009-02-19 09:36:02.000000000 +0900
--- edit_entry.tmpl     2009-04-21 16:16:56.000000000 +0900
***************
*** 1151,1156 ****
--- 1151,1175 ----
                  </div>
              </mtapp:setting>

+               <mtapp:setting
+                   id="gmap_track"
+                   label="Track data"
+                   label_class="top-label">
+                   <textarea name="gmap_track" id="gmap_track" class="full-width" cols="" rows="5" mt:watch-change="1"><$mt:var name="gmap_track" escape="html"$></textarea>
+               </mtapp:setting>
+               <mtapp:setting
+                   id="gmap_marker"
+                   label="Marker"
+                   label_class="top-label">
+                   <textarea name="gmap_marker" id="gmap_marker" class="full-width" cols="" rows="5" mt:watch-change="1"><$mt:var name="gmap_marker" escape="html"$></textarea>
+               </mtapp:setting>
+               <mtapp:setting
+                   id="gmap_markerlist"
+                   label="Marker List"
+                   label_class="top-label">
+                   <textarea name="gmap_markerlist" id="gmap_markerlist" class="full-width" cols="" rows="5" mt:watch-change="1"><$mt:var name="gmap_markerlist" escape="html"$></textarea>
+               </mtapp:setting>
          </mt:if>
          </mt:if>
これで「トラック情報」「マーカー情報」「マーカーリスト」がブログ記事として編集できるようになる。

ここからは出力側。スクリプト本体は「ダッシュボード」で「デザイン」→「テンプレート」→「HTMLヘッダー」の最後に追加。基本的には[External]『轍 Wadachi』の吐き出したスクリプトをコピペし、データ部分を別途参照するようにするだけなので内容は省略。 表示処理の実装は「デザイン」→「テンプレート」→「ブログ記事」で<div class="asset-content entry-content">と<mt:If tag="EntryBody">の間に以下の内容を挿入。

                                <div class="asset-content entry-content">
<mt:IfNonEmpty tag="EntryGmapTrack">
<table class="Wadachi" style="width: 480px;" align="right">
<tr>
    <td>
    <!-- Google Maps表示部 -->
        <div id="gmap" class="WadachiMaps"><p>Come on Google Map</p></div>
    </td>
    <!-- マーカーリスト表示部 -->
    <td valign="top" align="left">
        <div class="markerlist_header">マーカーリスト</div>
        <ol class="markerlist">
<$mt:EntryGmapMarkerList>
        </ol>
    </td>
</tr>
<tr>
    <td colspan=2>
    <!-- 著作権表示:削除禁止ここから -->
    <div class="copyright" align="right"><a href="http://wadachi.cyclekikou.net/" target="_blank">Powered by 轍-Wadachi</a></div>
    <!-- 著作権表示:削除禁止ここまで -->
    </td>
</tr>
</table>
</mt:IfNonEmpty>
<mt:If tag="EntryBody">
最後に
<body id="<$mt:BlogTemplateSetID$>" class="mt-entry-archive <$mt:Var name="page_layout"$>" onload="load()" onunload="GUnload()">
のように<body>タグの最後でload/unloadイベントのエントリポイントを忘れないように。

もう一つ忘れがちなのがCSS。[External]『轍 Wadachi』の吐き出した部分を/var/www/mt-static/gmap.cssに書き出し、「テンプレート」→「スタイルシート」に

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/mt-static/themes-base/blog.css);
@import url(/mt-static/themes/cityscape-portland/screen.css);
@import url(/mt-static/gmap.css);
/* end StyleCatcher imports */
な感じでimportさせればOK。

というわけでブログ記事への[External]Google マップ航跡表示実装はできた。バッチリ。

続いて、その記事をエクスポートしてみたのだが、追加した新しいフィールドは出力されず。エクスポートできないって事はインポートもできないんじゃん。SQL文で無理矢理放り込むしかないのかにゃぁ…?[External]『ウェブページ』インポート/エクスポートできない問題はまだ残ったままだし、なかなか会心の一撃、とはいきませんなぁ。

【参照】
●MovableType.jp http://www.movabletype.jp/
ウェブサイトを管理する『ブログ』と『ウェブページ』の使い分け
●サイクル紀行 - 自転車ツーリングを楽しむサイト http://www.cyclekikou.net/
Google Maps/Earth活用ツール『轍 Wadachi』