dari88's diary

これから趣味にするプログラミング/PHP/javascript/kohana/CMS/web design/

電子国土WebシステムVer.4のテスト4：　ヤマレコの地形図のページに電子国土ポータルのHOMEを表示してみた

　ヤマレコダウンローダーで取得した山行記録の地形図ページを電子国土WebシステムVer.3からVer.4対応に書き換える補助ツールを作ってみました。

　ヤマレコのページ切り替え用のタブを画面上部に表示する必要があり、地形図エリアを33px下に下げる必要があります。これが非常に難航しました。変更点は次の点です。

・map_style.top = 0 + 33 + "px";　と変更して全体を33px下げる。

・マウスの位置を監視している部分について2行書き換える。
　　button_y1 = 10 + 33;
　　button_y2 = 10 + 32 + 33;

・印刷用のページを表示する機能はprintmap.jsに書いてあるのでfunction arrange_print()をページのスクリプト部に書いて再定義する。

・このfunction arrange_print()について書き換えて、33px下げる。
　　header_style.top = 0 + 33 + "px";
　　map_style.top = 50 + 33 + "px";

・12月7日 訂正：
　上記の方法だと印刷時に33px分だけ上部に余白が生じるので、印刷ページではヤマレコのページ切り替え用のタブを表示しない仕様に変更した。

 

　なにせ長大なコードなのでどこで何をしているのか調べるのに非常に時間がかかりました。まあ分かってみれば簡単なことなのですが。

 

デモサイト

　ここを見てください。

 

 

 

電子国土WebシステムVer.4のテスト3：　電子国土ポータルのHOMEに gpx と kml のルートをオーバーレイしてみた

　オーバーレイの正しい書き方が判明したところで、電子国土ポータルのHOMEにある電子国土WebシステムVer.4のフルスペックのページにオーバーレイを重ねて再現してみました。このページを読解すると大変勉強になると思います。

 

サンプルサイト

　こちらにアップしました。電子国土ポータルのHOMEが完璧に再現されていると思います。

 

サンプルコード

　長すぎて掲載できませんので、サンプルサイトのページのソースを見てください。

 

電子国土WebシステムVer.4のテスト2：　国土地理院の背景地図に gpx と kml のルートをオーバーレイする正しい方法

　その後、Ver.4 の javascript を調べていたら、オーバーレイの正しい書き方が判明しました。clickMenu.js で kml のオーバーレイを作っており、次のように書いています。

var kmlLayer1 = new OpenLayers.Layer.Vector("LonLatLine", {
styleMap: myLineStyles,
projection: projection4326 // KMLは緯度経度
});
map.addLayer(kmlLayer1);

 　おや？　projection が projection4326 ですね。map インスタンス作るときは projection900913 だったのに・・・。ここが落とし穴でした。projection と displayProjection の仕組みを理解していないのが問題のようです。

 

サンプルサイト

　正しい書き方によるテスト２をアップしました。

 

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>デフォルトデータセット(地図)を表示する</title>
        <script type="text/javascript" src="http://portal.cyberjapan.jp/sys/OpenLayers-2.11/OpenLayers.js" charset="UTF-8"></script>    
        <script type="text/javascript" src="http://portal.cyberjapan.jp/sys/v4/webtis/webtis_v4.js" charset="UTF-8"></script>
        <link rel="stylesheet" href="http://portal.cyberjapan.jp/sys/v4/css/webtis.css" type="text/css">
            <script type="text/javascript">
                var map = null;
                var initCX = 140.424731;
                var initCY = 36.711636;
                var initZoomLv = 15;
                var projection900913 = new OpenLayers.Projection("EPSG:900913");
                var projection4326 = new OpenLayers.Projection("EPSG:4326");

                function init() {
                    var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
                    var restrictedExtent = maxExtent.clone();
                    var maxResolution = 156543.0339;
                    var options = {
                        controls: [
                            new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 100}}),
                            new OpenLayers.Control.PanZoomBar(),
                            new OpenLayers.Control.KeyboardDefaults(),
                            new OpenLayers.Control.Attribution()
                        ],
                        projection: projection900913,
                        displayProjection: projection4326,
                        units: "m",
                        maxResolution: maxResolution,
                        maxExtent: maxExtent,
                        restrictedExtent: restrictedExtent
                    };

                    map = new OpenLayers.Map('map', options);

                    map.addControl(new OpenLayers.Control.ScaleLine({maxWidth: 150, bottomOutUnits: "", bottomInUnits: "", geodesic: true}));

                    webtisMap = new webtis.Layer.BaseMap("webtismap");
                    map.addLayer(webtisMap);

                    var kmlLayer = new OpenLayers.Layer.Vector("KML Layer", {
                        strategies: [new OpenLayers.Strategy.Fixed()],
                        protocol: new OpenLayers.Protocol.HTTP({
                            url: "track.kml",
                            format: new OpenLayers.Format.KML({
                                extractStyles: true,
                                extractAttributes: true,
                                maxDepth: 2
                            })
                        }),
                        projection: projection4326
                    });
                    map.addLayer(kmlLayer);

                    var gpxLayer = new OpenLayers.Layer.Vector("GPX Data", {
                        protocol: new OpenLayers.Protocol.HTTP({
                            url: "track-373349.gpx",
                            format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
                        }),
                        strategies: [new OpenLayers.Strategy.Fixed()],
                        style: {fillColor: "darkred", strokeColor: "red", strokeWidth: 4, strokeOpacity: 0.5, pointRadius: 5},
                        projection: projection4326
                    });
                    map.addLayer(gpxLayer);

                    map.setCenter(new OpenLayers.LonLat(initCX, initCY).transform(projection4326, projection900913), initZoomLv);

                    document.getElementById('map').oncontextmenu = function(e) {
                        e = e ? e : window.event;
                        if (e.preventDefault) {
                            e.preventDefault(); // For non-IE browsers.
                        } else {
                            return false; // For IE browsers.
                        }
                    }
                }

            </script>
    </head>
    <body onload="init();">
        <div id="map" name="map" style="width:1000px;height:800px;"></div>
    </body>
</html>

 

電子国土WebシステムVer.4のテスト1：　国土地理院の背景地図に gpx と kml のルートをオーバーレイする方法

※ この記事のやり方は推奨できないことが判明しました。正しい書き方は次の記事を見てください。　13/12/03 追記

 

　電子国土WebシステムVer.4は現在試験公開中ですが、なかなか正式公開されませんね。ヤマレコダウンローダーの開発にてVer.3では背景地図に赤線を引かせることができず、くやしいのでVer.4とOpenLayersの検討をしています。

　まずはVer.4のサンプル集から「デフォルトデータセット(地図)を表示する」をたたき台にしてgpxやkmlのレイヤーをオーバーレイしてみました。結論から言うと試験公開中の電子国土WebシステムVer.4は何かが変です。単純なオーバーレイが出来ない！

 

問題点と対策

　上記の例題や、電子国土ポータルのHOMEのjavascriptを見るとOpenLayers APIのMapクラスからインスタンス'map'を作成する段階で真球メルカトル投影("EPSG:900913")と等経緯度投影("EPSG:4326")を定義していますが、この段階で定義すると何をどうしてもgpxやkmlをオーバーレイできません。試験公開中の”webtis_v4.js”に問題があるとしか思えません。対策としては背景地図のレイヤーを作る段階で定義します。

 

サンプルサイト

　今回の電子国土WebシステムVer.4のテスト1をサイトにアップしておきましたので、見てください。赤線がgpxで青線がこれを間引きしたkmlのオーバーレイです。実際に奥久慈男体山南ルートを歩いてきて採取したgpsデータを元にしています。オーバーレイの配置はピタリと合っています。

 

サンプルコード

　以下が今回のテストコードです。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://portal.cyberjapan.jp/sys/OpenLayers-2.11/OpenLayers.js" charset="UTF-8"></script> 
        <script type="text/javascript" src="http://portal.cyberjapan.jp/sys/v4/webtis/webtis_v4.js" charset="UTF-8"></script>
        <link rel="stylesheet" href="http://portal.cyberjapan.jp/sys/v4/css/webtis.css" type="text/css">
        <script type="text/javascript">
            function init() {

                var initCX = 140.424731;
                var initCY = 36.711636;
                var initZoomLv = 15;
                var projection900913 = new OpenLayers.Projection("EPSG:900913");
                var projection4326 = new OpenLayers.Projection("EPSG:4326");
                var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
                var restrictedExtent = maxExtent.clone();
                var maxResolution = 156543.0339;
                var options = {
                    controls: [
                        new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 100}}),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.KeyboardDefaults(),
                        new OpenLayers.Control.Attribution()
                    ],
//                    projection: projection900913,
//                    displayProjection: projection4326,
                    units: "m",
                    maxResolution: maxResolution,
                    maxExtent: maxExtent,
                    restrictedExtent: restrictedExtent
                };

                var map = new OpenLayers.Map('canvas', options);

                var webtisMap = new webtis.Layer.BaseMap("webtismap",
                        {
                            projection: projection900913,
                            displayProjection: projection4326
                        });


                var kmlLayer = new OpenLayers.Layer.Vector("KML Layer", {
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "track.kml",
                        format: new OpenLayers.Format.KML({
                            extractStyles: true,
                            extractAttributes: true,
                            maxDepth: 2
                        })
                    })
                });


                var gpxLayer = new OpenLayers.Layer.Vector("GPX Data", {
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "track-373349.gpx",
                        format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
                    }),
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    style: {fillColor: "darkred", strokeColor: "red", strokeWidth: 2, strokeOpacity: 0.5, pointRadius: 5},
                });


                map.addLayer(webtisMap);
                map.addLayer(kmlLayer);
                map.addLayer(gpxLayer);

                map.setCenter(new OpenLayers.LonLat(initCX, initCY).transform(projection4326, projection900913), initZoomLv);

            }
        </script>
        <style type="text/css">

        </style>
    </head>
    <body onload="init();">
        <div id="canvas" style="width:1000px; height:800px">
        </div>
        <p>電子国土WebシステムVer.4のテスト1</p>
    </body>
</html>

 

Linux/Mac 上の Ruby 1.8.7 環境でプログラムの実行ファイルを作る方法

　Ruby 1.9.3 でプログラムを作っていましたが、Linux/Mac用の実行ファイルを作る方法が現在見当たりません。仕方がないので、VM上にCentOSをもう一つ入れて、Ruby 1.8.7 を導入して、プログラムの修正が必要な部分に手を入れて、実行ファイルを作りました。

　Linux/Mac 用には rubyscript2exe というプログラムを使いますが、gemがインストールするものや、一般に配布されているものは can't modify frozen string というエラーメッセージを出してしまいます。

　必死に探した結果、Ruby 1.8.7 で動く修正版を発見しました。James Cowlishaw さんがGitHubに上げています。ここからzipファイルをダウンロードします。プログラムはRubyのスクリプトで rubyscript2exe.rb です。

　実行方法は、

> ruby rubyscript2exe.rb test.rb

だけで終りです。

 

Ruby 1.9.3 でプログラムの実行ファイル.exeを作る方法

　日本語を含む Ruby プログラムの実行ファイルを作る方法に辿り着いたので、メモです。

 

　Ruby 1.93 の場合、今のところWindows用の実行ファイルを作ってくれる OCRA を使うしかない模様。残念ながらLinux/Macで実行ファイルを作る方法にはたどり着きません。（Ruby 1.8.7 でLinux/Mac用の実行ファイルを作る方法にはたどり着きました。次の日記に書いてます。）

 

手順

実行環境： Ruby Installer Ruby 1.9.3-p448 による構成。

> gem install ocra

> ocra test.rb

　これだけ。但し、大きな盲点があります。プログラムのソースファイルのエンコードはBOM付きUTF-8にすること。

 

 

 

ヤマレコの山行記録を一括ダウンロードしてバックアップする　ヤマレコダウンローダー exe版

　ヤマレコの山行記録を一括ダウンロードしてバックアップするヤマレコダウンローダーexe版のダウンロードページです。

 

Windows版の使い方

・プログラムをダウンロードします。
　　YamarecoDownloader.exe  V1.8.6 　2014/02/15

・ヤマレコの記録を保存するファオルダーを決めて、そこにこのプログラムを移動します。

・ヤマレコのユーザー番号を調べてください。これはユーザーIDではありません。
　マイページの山行記録を開きます。ブラウザの上部にURLが表示されているはずです。URLが http://www.yamareco.com/modules/yamareco/userinfo-12345-data.html であれば、ユーザー番号は12345です。

・YamarekoDownloader.exe を実行します。案内が出るので、最初は単にEnterキーを押します。次にユーザー番号を聞かれますので、数値を入力してください。（番号が4桁の人は4桁で入力します。）

・プログラムが終了したら、フォルダーに作成された index12345.html みたいな名前のファイルを開いてください。

 

Mac/Linux版の使い方

 ・プログラムをダウンロードします。プログラム名は後で楽なように yd と短縮形にしました。
　　yd  V1.8.6　2014/02/15

・ヤマレコの記録を保存するファオルダーを決めて、そこにこのプログラムを移動します。

・プログラムをクリックして情報あるいはプロパティを開いて、アクセス権の所でプログラムとして実行できるようにします。Macの場合はFinderからやるのかな？

・ターミナルまたは端末を開きます。Macの場合はFinderを開いて、アプリケーションの中のユーティリティーを開いて、ターミナルを開きます。

・ターミナルは最初はホームディレクトリに位置していますので、次のコマンドで記録を保存するファオルダーに移動します。

>  cd ./フォルダ名（例えば ./yamareko とか ./abcd/yamareco とか）

・次のコマンドでプログラムを実行します。

>  ./yd

・この先の使い方はWindows版と同じです。

・備考：アクセス権の設定はターミナルの中でも実行できます。記録を保存するファオルダーに移動した後で、次のコマンドを実行します。

>  chmod 777 yd

 

＜注意事項等＞

・2014年1月8日にヤマレコのデザインが一新されました。旧版を使い続けると表示がおかしくなりますので、新版を使ってください。この際、旧バックアップは恒久保存版にして、新しいフォルダーにバックアップを取ることをお勧めします。

・プログラムはログインしません。従って、一般公開されていない山行記録があるとこれを取得できません。全て一般公開してから実行してください。

・ヤマレコのサイト側で仕様変更が行われると山行記録の再現性が悪化する可能性があります。

・ユーザーが投稿した内容は確実にフォルダーに保管されます。
　　記事本文
　　写真の原画とサムネイル
　　GPXデータ
　　添付ファイル

・サイト側が提供している機能面の再現は不完全です。ブラウザで開くだけでは標高グラフが表示されませんが、PCに簡易サーバーを立てて山行記録にアクセスすればちゃんと標高グラフも表示されます。

・山行記録の量によりますが、光回線で100件あたり1時間くらいはかかると思います。

・取得済の山行記録は再取得しません。取得済みの記録を修正した場合は特定の山行記録のみを取得する機能を利用してください。

・ブラウザによってマップ等の見え方が違います。firefoxだとYahooマップ上にルートの赤線も表示されます。chromeだと赤線が表示されません。IEだと、Yahooマップすら表示されません。

・簡易サーバーを導入してサーバー経由でアクセスするとどのブラウザでも全部OKになります。簡易サーバーとしては 04WebServer をオススメします。

・山友への再配布はご自由になさってください。

 

＜備考＞

　表示している記号の意味は以下のとおりです。

*　今回ファイルを取得した
x　サーバーにファイルが無い
.　既にファイルを取得済み
_　時間待ち

 

＜履歴＞

V1.8.6：2014/02/15　ヤマレコの仕様変更対応
・コメントのプロフ写真の小型化に対応した
・広告の仕様変更に対応した
・js,cssのリンク形式変更に対応した
・未取得のパーツがあったので対策した

V1.8.5：2014/01/17　ヤマレコの仕様変更対応
・js,cssを圧縮形式で送る仕様になったので解凍処理を追加した

V1.8.4：2014/01/09　ヤマレコのデザイン変更に対応した

V1.8.3：2013/12/20　マイマップの追加等
　・マイマップを追加し、インデックスページにリンクした
　・グーグル広告の仕様変更に対処した
　・山行記録を二回取りに行く場合があるので修正した

V1.8.2：2013/12/15　サーバーがこけている時の対処等
　・ヤマレコのサーバーが不調の場合やメンテ中の場合に対処した
　・ファイルのアイコンを緑のYdアイコンに入れ替えた
　・proxi.txt のエンコード対応に関して改善した

V1.8.1：2013/12/14　こまめな改善
　・Mac/Linux版にproxyサーバー対応機能を追加した
　・過剰アクセスにならないよう適度な時間待ちを設定した
　・ルート登録がない場合はマップページを取りに行かない
　・スクリプト類を毎回取りに行くのはやめた
　・.jpegという拡張子のファイルを取りに行くようにした

V1.8：2013/12/07　画面表示の改善等
　・画面表示意味が分かりにくい点などを改善した
　・Windows版にproxyサーバー対応機能を追加した
　・NowLoadingというアイコンが目障りなので消した

V1.7：2013/11/30　ヤマレコダウンローダーexe版の初版

 

proxyサーバー対応

　ヤマレコダウンローダーはproxyサーバーに対応しています。プログラムと同じフォルダーに proxy.txt という名前のテキストファイルを作り、次の内容を記入して下さい。

＜ヤマレコダウンローダー用プロキシ設定ファイル＞
'=' の前後にスペースを入れてはいけません

proxy_use=1                       プロキシを使う場合は 1 
proxy=http://example.proxy.co.jp:8080   プロキシのホスト名:ポート番号
userid=                           ユーザーID（認証が必要なら）
password=                         パスワード（認証が必要なら）

 

地形図ページを電子国土WebシステムVer.4対応にする補助ツール

　ヤマレコダウンローダーで取得した山行記録の地図ページを電子国土WebシステムVer.3からVer.4対応に書き換えるツールです。

 

使い方

・プログラムをダウンロードします。
　　Windows版　map2v4.exe　V1.5　2014/01/19
　　Mac/Linux版　map2v4　　 V1.5　2014/01/19

・あとの使い方はヤマレコダウンローダーと同じです。ユーザー番号を入力すると全記録を一気に書き換えます。

 

注意点

・国土地理院の電子国土WebシステムVer.4が10月30日に地理院地図と名称を改めて正式公開しています。近い将来ヤマレコの地形図ページも地理院地図に対応するものと思われますが、この時点で本ソフトでの書き換えは実行されなくなります。

・ヤマレコダウンローダーでallモードを実行すると元のVer.3対応に戻ります。

 

＜履歴＞

V1.5：2014/01/19　国土地理院の仕様変更に対応した
　・色別標高図の仕様変更に対応した
　・補助ツール（V1.3以降）を適用済みの記録は当該部分を修正する仕様にした

V1.4：2014/01/10　ヤマレコのデザイン変更に対応した
　・メニュータブを廃止した
　・スケールバーを追加した

V1.3：2013/12/10　Googleマップの追加等
　・Googleの各種地図を追加した
　・色別標高図のオーバーレイ機能を追加した

V1.2：2013/12/10　画面表示の改善
　・画面表示意味が分かりにくい点などを改善した
　・山行記録の数が膨大な場合にコケる可能性がある点を修正した

V1.1：2013/12/07　印刷ページの改善
　・印刷時の上部余白が大きいので、印刷ページではヤマレコのタブを出さない仕様に変更した。
　※ Ver.4に変更済の地形図ページに反映させるには、ヤマレコダウンローダーで１回 all モードを実行してから補助ツールを実行して下さい。

V1.0：2013/12/05　初版公開

 

ソースコード

・下記URLからダウンロードして下さい。

　https://mega.co.nz/#F!Dooi1Kbb!Jl_puAvAPqWWUIEWnqK_vQ