2016年12月24日

隠居のスマホ:Windows PCとandoid スマホと接続するときの覚え書き

PCをWindows10 にバージョンアップし、スマホ(SO-04H) のOS も android 6.0.1 となったので、どうも接続がうまくいかないときが出てきた。特に、USB での有線接続に少々てこづったので、現状での接続方法を覚え書きとして記録しておきたい。
 現在、PCとスマホとのファイルのやり取りは、ときにより、次の4つの方法から選択している。

  ・USBケーブルで接続する。
  ・クラウド(Google drive) を介して、PC とスマホでファイルを共有する方法
  ・Bluetooth 接続をつかう。
  ・ネットワークHDD(NAS)を使って、WiFi 接続する。

USBケーブルで接続する方法

  1. USBケーブルで、PC(DELL XPS、Windows10 Home)とスマホ(Sony Xperia-X android 6.0.1)を接続する。このUSBケーブルが曲者で手近にあるものを適当にさしても、うまく接続できないことがある。充電・データ転送用マイクロUSBケーブルが正解である。
  2. android 6.0 の設定画面で<開発向けオプション>を表示させて、<USBデバッグ>をON にしておく。
  3. 接続すると、android 6.0.1 では、Xperia画面が下のように表示されるので、【ファイルの転送(MTP)】を選択する。

    device-2016-12-12-093801.png

  4. 接続した状態で、PC Windows10 のエクスプローラーを開くと、下の画面のように、Xperia X が表示され、その下には、PHONE CARD というXperia の外部ストレージと内部ストレージのフォルダーが見える。右ボックスは、外部ストレージに含まれるフォルダーである。

    usb03.JPG

  5. 後は、通常の<ファイルを別のフォルダーにコピーする(移動する)方法>と同じである。
  6. Sony のスマホ Xperia では、PC companion (最新では、Xperia companion )というソフトをPCにインストールが勧められるが、このソフトが無くてもスマホとのファイルのやり取りはできる。
  7. スマホをPCから取り外す時は、一般的な<ハードウェアを安全に取り外してメディアを取り出す>方法に従うことが勧められている。

 大量のファイルをやりとりする場合は、この方法が最も便利である。

クラウド(Google drive) を介して、PC とスマホでファイルを共有する方法。

  1. Google アカウントを取得する。大抵は、gmail アドレスがアカウント名である。
  2. PCにも、スマホにもGoogle drive をインストールする。インストールするときに、Google アカウントが必要である。登録すれば、15GBのフリーのストレージが使える。
  3. PC でも、スマホでも、見たいファイル(音楽、写真、PDFファイルなど)を、どちらからでも、自分が Google に登録したドライブ(ストレージ)にアップロードする。
  4. このようにしておけば、PC からでもスマホからでも Google ドライブにあずけているファイルにアクセスでき、実行することができる。
  5. スマホの Google drive には、スキャン機能があり、手書き文書などをスマホのカメラを使って写し、これをPDF 文書として Google ストレージにアップロードできる。
  6. クラウド コンピュータを利用するには、私の場合 X-plore というスマホアプリを利用している。方法については、<スマホのファイルを整理するソフト X-plore file manager>に詳しく記録している。


PC での Google drive の画面
クリックすると大きくなります
スマホXperia での Google drive の画面
クリックすると大きくなります
drive01.JPG device-2016-12-15-172320.png


 Google drive については、次のページに詳しい。
 https://tools.google.com/dlpage/drive/index.html?hl=ja#eula

 Google のストレージを Google アカウントを持つ人に特定のフォルダーを共有する許可を与えることによって、ファイルを転送できる。 

Bluetooth を使って、PC とスマホを接続する方法。

  1. PC(Windows10) とスマホ(Android 6.0.1)のペアリングをする。
    ペアリングを表示するスマホ(Android6.0)の画面
    (「設定」⇛「詳細設定」⇛「Bluetooth」)
    1CBM4W1 という機器がパソコンである。他の機器は、カーオーディオ、ワイアレス・イヤホン、オーディオである。
    ペアリングを表示するPC(Windows10)の画面
    (「設定」⇛「デバイス」⇛「Bluetooth」
    Xperia X Perfomance というのがスマホである。
    ;クリックすると大きな写真になります。 ;クリックすると大きな写真になります。
  2. スマホ(Android 6.0.1)から、PC(Windows10)に、ファイルを送信するときは、次のようにする。スマホでとった写真をPCに送る場合を例にしたい。まず、スマホ側の操作。
    PCに送信したい写真
    アルバムから
    共有アイコンをタップする
    すると色々な共有ツールが表示される
    Bluetooth アイコンをタップする
    するとペアリングしている機器が表示される
    1CBM4W1 がPC である
    ;クリックすると大きな写真になります。 ;クリックすると大きな写真になります。 ;クリックすると大きな写真になります。
  3. PC側の準備。スマホ側で送信先機器(この場合、PC:1CBM4W1)をタップする前に、PC の右下タスクバーにある Bluetooth アイコンsnp003.JPG(大抵の場合、インジケータに隠れている)を右くりっくする。表示されるポップアップ画面の<ファイルの受信>をクリックして、スマホ側で送信先機器(この場合、PC:1CBM4W1)をタップすると送信が始まる。
    タスクバーのBluetooth アイコンを右クリックする<ファイルの受信>をクリックした時の画面。
    クリックすると大きくなります。
    受信が成功した時の画面
    保存先のフォルダーは自由に選定できる。
    クリックすると大きくなります。
    ;クリックすると大きな写真になります。 ;クリックすると大きな写真になります。 ;クリックすると大きな写真になります。
  4. PC からスマホにファイルを送信する時は、次のようにする。音楽ファイルをPC からスマホに送信する場合を例に説明する。
  5. PC のエクスプローラーを開いて、転送するファイル(フォルダーの転送はできない)を選択し右クリックする。表示されるリストから、<送る>をクリックすると表示されるリストから<Bluetooth デバイス>をクリックするとペアリングされている機器が表示される。
    エクスプローラの画面
    snp007.JPG
  6. ペアリングされている機器(ここの場合、Xperia X)をクリックすると転送が始まるが、mp3ファイル一曲でも、重たくて転送に失敗する。圧縮して送れば、なんとか転送できるが、これでは使えない。PC からスマホへの転送は、上記のUSB 接続や Google drive のようなクラウドサービスを使うのがいいだろう。


ネットワークHDD(NAS)を使って、PC とスマホをWiFi 接続する。

 この記事を書くために、私が使用しているNAS Synology DS115j を再度見直していると、知らないことがいっぱい出てきた。それで、NAS については、ページを改めて記録することにしたい。
 現在は、上記で説明しているスマホのアプリ X-plore を使って、PC に外部HDD的に接続している NAS DS115j を家庭内 LAN から専らファイル受信のために使用している。

2016年11月13日

隠居のパソコン備忘録:Google Map で旅行地図を作成する

先日から、独自のルート地図を作るなどで Google Map をいろいろといじっていて分かったのだが、スマホアプリの山旅ロガーなどで記録したKMLファイルがなくてもルートを表現した旅行地図を作成をできることが分かった。
 当サイトのブログ Studio YAMAKO の執筆者は旅行した記録をこまめにアップロードされている。この旅行地図を、今までは Google Maps API という Javascript を使ったユティリティで作成して、Studio YAMAKO に、収載してもらっていた。。
 今回、郡上八幡や高山をバスツアーした記録を4回に分けてブログにアップロードされている。これを参照して旅行ルート地図を作成したので、手順を記録として残して置きたいと思う。

Google Map でルートつき旅行地図を作成する方法
  1. Google Map を起動する。
  2. 画面左上の検索窓左にあるメニューアイコンgmap02.JPGをクリックすると表示される「マイプレイス」をクリックすると表示される画面で、さらに「マイマップ」をクリックすると枠の下の方に地図を作成という青い文字が現れる。
  3. 地図を作成をクリックすると「無題の地図」と表示されたポップアップが表示される。
    gmap03.JPG

  4. ここで、ツールアイコン群から、ルート追加ボタンtour12.JPGをクリックし、左ボックスの下に表示される交通手段がになっていることを確認して、その下の枠に出発点から順次、マーカーを立てたい場所を入力する。すると、下のスクリーンショットのように、ルートが自動的にルートが表示される。
    tour11.JPG

  5. 地点を入力し終えると、下のようにルートが描画される。地点名は、例えば平湯温泉と入力すると何地点か候補を表示してくれるので、適切と思われる名前を選択すればよい。
    tour13.JPG

  6. この地図を左ボックスの右上にあるメニューボタンgmap16.JPGをクリックすると表示されるリストから、「KMLにエクスポート」を選択する。すると、下のようなボックスが表示されるので、セレクトボックスで<XXX地点からXXX地点へのルート>を選択し、<KMLファイルにエクスポートします・・・>にチェックを入れて、【ダウンロード】ボタンをクリックする。
    tour14.JPG

    KMLファイルに任意なファイル名をつけて、任意のフォルダーに保存する。

  7. 一旦、Google Map を閉じて、再度起動する。そして、上記 1. 2. まで実行する。

  8. ここで、左上ボックスの無題レイヤーの下のインポートをクリックする。すると、<インポートするファイルの選択>という画面が出るので、「アップロード」タグになっているのを確認して、【パソコンからファイルを選択】ボタンをクリックする。

  9. すると、ファイルを選択する画面となるので、先ほど保存した KML ファイルを読み込む。すると多分下のスクリーンショットのような縮尺の大きな地図が表示される。
    tour16.JPG

  10. 地図の縮尺の大きさは、右下のtour17.JPGボタンでも調整できるが、左ボックスの上部の「プレビュー」をクリックすると下のように適切な大きさで表示してくれる。
    tour15.JPG

  11. ここで、ボックス上部の「編集します」をクリックすると各マーカーを編集できるようになる。マーカーにカーソルを合わせクリックすると、下のスクリーンショットのように、マーカーの色やスタイル、リンク先のURL 表示、関連写真や動画の挿入などができるツールアイコンが表示される。
    tour19.JPG

  12. 用意されているマーカのスタイルは、例えば下の例のように、場所のジャンルだけでも数多くのスタイルの中からチョイスできる。
    tour18.JPG

  13. そのようにして、Google Map として機能する旅行地図を作成したものが以下の地図である。


2016年4月15日

隠居のパソコン備忘録:Google Picasa3 で作ったアルバムをウェブアルバムとしてアップロードする

先日高校同期のウオーキング・飲み仲間と、花見を目的に、阪神香櫨園から阪急西宮北口まで歩いて、北口の居酒屋で一杯した。
 平坦なところを歩くというので持って行った SONY α7Ⅱ で撮った写真を仲間にも見てもらおうと共有する方法を考えた。昨秋、別の集まりで和倉温泉・金沢に旅したときの写真をウェブアルバムとして共有したことを思い出し、今回もその方法で思ったが、どうしても思い出せない。かなり簡単な方法であったとは覚えているが、その方法に辿りつけない。痴呆は進行しているようだ。
 ネットでのサーチや自分のブログの記録にないかと探したがヒットしない。その時にやり取りしたメールを辿って行くと、どうやら Google Picasa3 でアルバムを作成し、ブログ用のレンタルサーバーにアップロードしたと分かった。分かってみれば、それほど難しい作業ではないが、たどり着くのに時間がかかったので、次回同じような作業をする場合に備えて、方法を備忘録として記録しておきたい。
 私は、基本的に写真の整理は、Google Picasa3 を使っているので、これを前提として記述する。
 Google Picasa3 の導入については、Googleの写真編集ソフトを参照ください。

 
  1. 新規にアルバムを作成するには、Picasa3 ツールバー「ファイル(F)」から{新規アルバム}を選択する。【アルバム プロパティ】画面が出てくるので、ここにアルバム名などを入力し、OK する。と新規アルバムが作成される。こ

    album-02.JPG
    album-03.JPG

    ここでは、新しいアルバムとして、上のように、「花の文化園:2016/4/6」を作成した例を示したい。 新しくアルバムが作成されると、Picasa3 の画面左カラムに、下のように新アルバム名が表示される。

    album-04.JPG

  2. アルバムに収載したい写真を Picasa3 から選択し、(サムネイルからでも、一枚ずつ表示しながらでも)右クリックすると次のような画面が出てくるので、作成してあるアルバムを選択すると該当するアルバムに写真が追加される。

    album-05.JPG

    追加した写真の枚数は、下のように、アルバム名の後の( )内に数字が表示されるとともに、写真のサムネイルが表示される。

    album-06.JPG

  3. このアルバムをウェブアルバムとして共有するには、アルバム名を右クリックすると出てくる画面で、「HTMLページとしてエクスポート」を選択する。

    album-07.JPG

    すると、エクスポートするURL ページの詳細を決める画面が出てくるので、アルバムに掲載される写真の大きさを指定したり、PCに保存するフォルダーや画面の体裁(選択肢はあまりないが)を選択して、エクスポートすると指定したフォルダーに保存される。

    album-08.JPG
    どのようなページになっているかの確認は、エクスポート保存したファイルをクリックすれば、ブラウザーに表示される。

  4. 後は、ウエブサーバーにアップロードするだけである。アップロードは、作成保存したフォルダーまるごとをサーバーに転送すればよい。
    私の場合、ウエブサーバーは、ブログ用にレンタルしている Xserver で、アップロード(FTP)は、FFFTP を使っている。

    album-10.JPG


 なお、この用例に使用したアルバムは下のURLで確認できます。内容は全くありません。
 http://n-shuhei.net/photo/花の文化園:201646/index.html
 写真を見てもらう人には、このURL (フォルダーの)をメールで送信すれば良い。メールで写真を送付するのが、一番簡便であるが、量に制限がある。この方法なら、かなりの量の写真も見てもらうことができる。
 なお、掲載した写真の中から、自分用に特定の写真をダウンロードしたい場合は、ページ上の該当写真を右クリックすると出る画面で、「名前をつけて画像を保存」を選択することで、パソコン内に取り込むことができる。

2015年2月 4日

隠居のスマホ備忘録:Google+ フォト Google+ おまかせビジュアル を使う


 私は、色々なカメラ(スマホの写真も含め)で撮った写真を、Picasa(現在v3.9.)で整理している。
 この Picasa3 と同じ Google が運営する Google+ とは、本人の意図とは別に(?)、連携している。Google+(グーグルプラス)とは、Googleが提供するソーシャルネットワーキングサイト(SNS)らしい。全く知らない間に、そのSNS の仲間になっていたらしい。
「Facebook(フェースブック)」と主要な機能はよく似ているらしいが、Googleが長年にわたり積み上げてきた情報の検索と管理を生かして、『情報の共有』が簡単にできることが大きな特徴となっているらしい。   Google+の機能については、"Picasa3"の使い方というサイトに、次のような説明があるので引用させてもらう。
【Google+(グーグルプラス)の主要機能】
  1. サークル
    「Facebook」では「友達」とひとくくりで呼ばれていますが、Google+(グーグルプラス)では、「友達」をさまざまなタイプで分類し、「会社関係」、「趣味の友達」、「家族」、「学校関係」など、ユーザーの人間関係をさまざまなグループに分け、そのコミュニティごとに情報が共有できるのが大きな特徴です。サークルの名前は自由に付けることができ、いくつでも作ることができます。

    サークル内の人とは、「Facebook」のようにリアルタイムにコミュニケーションをとったり、写真や動画のアップロードができ、「+1」や「共有ボタン」でシェアしたり、コメントを付けることもできます。

    そして、「Facebook」との大きな違いは、Google+(グーグルプラス)のアカウントを持っていない人でもGメールだけでサークル・リストに入れて情報を共有できることです。

  2. ハングアウト(ビデオチャットルーム) 「サークル」の人と気軽にビデオチャットできる機能です。ビデオチャットルームを使えば最大 9 人と顔を見て話すことができ、「Facebook」のビデオ電話よりも評価が高く、将来的にはユーザーが拡大しそうなサービスです。

  3. モバイル Google+(グーグルプラス)の「インスタントアップロード」を使えば、携帯やスマートフォンで撮影した写真や動画が自動的に Google+ の非公開アルバムにアップロードされます。
    Google+(グーグルプラス)の「メッセンジャー」を使えば、ひとつのグループチャットでまとめて複数の人と話しが出来るので、メールよりも連絡が簡単になります。
     


 もともと SNS とはあまり関わりのないIT生活をしているので、写真まで公開してコミュニケーションする勇気はないが、カメラから Picasa3 に写真をインポートするとGoogle+ に自動的にアップロードされる。
 私は、google ドライブを契約(100GB月1.99$) していて、 外付けHDD 的に使用させてもらっている。(先日、この外付けHDDが、ご臨終でえらい目にあった。)この google ドライブには、色々と苦労して集めた音楽ファイルを中心にアップロードしているが、Gmail で送受信した添付ファイルやメール メッセージも保存されている。
 メール関連のファイルは、保存容量としてカウントされるが、Google+ で保存される写真は、標準サイズ2,048×2,048ピクセル以下の写真(動画は15分以内)であればドライブの容量にカウントされない。

 この Google+ におまけみたいに付いているのが、おまかせビジュアルという機能である。Google+は、スマホとも連携している。私はスマホは、Android のSO-04E を使っているが、このスマホで記録的に撮った写真も、Google+に取り込まれる。
 前回のエントリーにUPしたモーション・ピクチャーは、このおまかせビジュアルで作っている。ただし、これはスマホで作る。PC では、googlechrome という Google のOS を搭載したPC でしかできない。
 おまかせビジュアルは、スマホでは iPhone の方が機能が多い。雪をふらせたりなどいろいろの修飾ができるらしいが、私の Android 4.2.2 SO-04E では、モーションミックスという機能しかない。
 ミックスというのは、Picasa3 でいうコラージュである。 選択した写真を、自動的に 一枚の写真に収めてくれる。例えば、次のような写真を合成してくれる。

おまかせビジュアル で作成したミックス写真
泉北ニュータウン鴨谷台で見つけたマンホール
manhole150129.jpg



 motion というのは、いわば簡易化した GIFアニメーションである。連写で撮った写真などを元にして、写真に動きをつけてくれる機能である。
 私は野鳥の写真を撮るときには、連写モードにしていることが多い。結果として、同じポイントで被写体が角度を変えたりしている。おまかせビジュアルは、そのような写真がGoogle+ にアップされると、自動的に motion.gif を作成する。自分で、写真を選択して作成することもできる。
 次にUPしているのは、そのようにして作成された motion.gif である。

おまかせビジュアル で作成したモーション写真
堺市野々井で撮ったカシラダカ
kasiradaka.gif



 スマホで作成したおまかせビジュアルをパソコンに送信する方法は、Google ドライブや Picasaアルバムに送るなど、いろいろな方法が用意されているが、私は Gmail で送っている。添付ファイルとして送られてくるので、これをダウンロードして、適切なフォルダーに収納しておけば、このようなときにも使える。

2015年1月30日

隠居の散策:大寒頃の泉北ニュータウン栂地区


 寒い寒いで外に出ないとメタボにはよくないと散策に出かけた。歩き出せば、結構面白い。 いつも老年組がゲートボール(最近は、グランドゴルフが主だが)をしている空き地で、ポコポコと何か変な音がする。近くに車の修理工場があるので、そこから出ている音かと思ったが、まだシャッターは閉まっている。音の原因をもう少し注意深く探ってみると、ハシボソガラスが空のペットボトルを咥えあげては、地面に叩きつけているのだ。
 野鳥の写真を撮るときには、ほとんどは連写モードにしている。連写した写真をもとに、スマホの google アプリ フォトで、モーション・ピクチャーにしてみた。方法については、別に記録しておきたいと思う。

ハシボソガラスの行動:Google+ motion.gif で作成 karasu.gif



大寒の候に観察した鳥たち:泉北ニュータウン

;クリックすると大きな写真になります。 セグロセキレイ 和田川(堺)
2015/1/29
寒い中でもセキレイ類は元気だ

FUJIFILM HS50
185.0mm (35mm換算:1036mm)
1/320s f5.6 ISO250
;クリックすると大きな写真になります。 スズメ 泉北1号線側道(堺)
2015/1/29
銀杏の木に群がる。いつも集団だ。

FUJIFILM HS50
148.0mm (35mm換算:828mm)
1/320s f8.0 ISO200
;クリックすると大きな写真になります。 アオサギ 和田川(堺)
2015/1/29
寒そうだ。

FUJIFILM HS50
88.7mm (35mm換算:497mm)
1/320s f8.0 ISO200
;クリックすると大きな写真になります。 イソヒヨドリ♂ 和田川(堺)
2015/1/29
今シーズンは割合多く見かける。

FUJIFILM HS50
185.0mm (35mm換算:1036mm)
1/320s f8.0 ISO200
;クリックすると大きな写真になります。 オカヨシガモ 鴨谷池(堺)
2015/1/29
他の個体で次列風切の白が目立っている。

FUJIFILM HS50
185.0mm (35mm換算:1036mm)
1/320s f8.0 ISO200
;クリックすると大きな写真になります。 オオバン 鴨谷池(堺)
2015/1/29
この池にもオオバンがいる。

FUJIFILM HS50
185.0mm (35mm換算:1036mm)
1/320s f5.6 ISO400
;クリックすると大きな写真になります。 メジロ 和田川(堺)
2015/1/29
川床の萱にやってくる。

FUJIFILM HS50
185.0mm (35mm換算:1036mm)
1/400s f7.1 ISO200
;クリックすると大きな写真になります。 キセキレイ 和田川(堺)
2015/1/29
このようなはきだめにやってくる。

FUJIFILM HS50
110.8mm (35mm換算:621mm)
1/400s f5.6 ISO400


萱に留まるアオジ:Google+ motion.gif で作成 aoji.gif



2015年1月24日

隠居のパソコン備忘録:Youtubeをページ内で再生させる(続)


 昨年10月に、【隠居のパソコン備忘録:Youtubeをページ内で再生させるYouTube Player API を試してみる】で、記録した方法で、その後何回かYoutube 動画をブログ内にUPしたが、挙動がおかしい。再生すべき動画がすり替わってしまうのだ。
 そこで、再度 "Youtubeをページ内で再生させる方法"をサーチしてみると、もっと簡単な方法があることが分かった。方法をすぐ忘れるので、記録しておきたい。

 Youtube にログインする。(Youtube への登録は、gmail アドレスでできる) ログインの画面は、いろいろと異なるようだが、画面の左上に次のようなアイコンが表示されるので、このボタンの右部分150123-05.JPGをクリックすると、そのアイコンの下にメニューボックスが現れる。メニューボックスの「マイチャネル」をクリックすると、右のような画面が現れる。

150123-03.JPG 150123-04.JPG


 上右図の上部の動画の管理をクリックすると、下のような画面となる。

150123-06.JPG

 ここで、ブログに掲載したい動画をクリックすると、動画が始まる。Pause ボタンで動画を停止し、共有をクリックすると、埋め込みコードが表示されるので、これをクリックし、ボックスに表示されるテキストを反転コピーして、ブログページ原稿に貼り込めばいい。

150123-09.JPG

 その下にある、もっと見る をクリックすると、下のようなチェックボックスが出てくるので、「動画が終わったら関連動画を表示する」のチェックを外しておくと、動画が終わった後に、あんまり関係のない動画クリップが表示されることはない。いちど、設定すれば、すべての公開動画に適用されるようだ。
 なお、その上のボックスで、画面の大きさも調整できる。

150123-10.JPG



 Youtube に登録した動画をブログ内に表示再生するには、このような方法の方が、スッキリとする。今年に入っての動画は、この方式に改めた。
 昨年10月にUPした下のような動画も、この方式に書き換えてみた。私が知るかぎりでは、昨年までこのようなサービスはなかったと思う。Google のサービスは、どんどん進化している。



2014年11月 7日

隠居のスマホ備忘録:山旅ロガーを使う。(3)測定結果を Google Map に表示する他の方法


 山旅ロガーで得られたトラッキング・データ KML ファイルをGoogle Map で表示する方法については、前回のエントリーで記録した。そのような作業をしているうちに、もっと簡単で便利な方法を Google が提供していることが分かった。今回は、その方法について記録しておきたいと思う。

 地図検索に使ってきた Google Map は、今年の2月くらいに新しくなっている。
 新しくなった Google Map では、オリジナルのカスタム マップを作成して共有することができる。この場合に、山旅ロガーで得られる KML ファイルを使うことができる。

 作成方法を、以下順を追って記録する。
  1. Google Map を起動する。Google のアカウントを持っていない場合には、新たに登録する。アカウントをひとつ持っておけば、Gmail(Web mail)、Google chrome(ブラウザ)、You Tube 、Google Map(地図検索)、Google ドライブ(クラウド型データ保存)などを利用できる。
    起動すると登録したアカウントの場所を中心とする地図が表示されるはずである。

    Google 地図検索画面
    new-map-01.JPG

  2. 画面左上の検索窓をクリックすると表示される「マイマップ」をクリックすると、作成ボタンが現れる。

    new-map-03.JPG

  3. 作成ボタンをクリックすると「無題の地図」と表示されたポップアップが表示される。
    new-map-06.JPG

  4. 上の画面で、インポートをクリックすると、下のようなKMLファイルを選択する画面となる。どのような形式のファイルか確認はしていないが、CSV ファイルでもOKのようだ。
    new-map-07.JPG

  5. 前回のエントリーで使った山旅ロガーで得た KMファイルをインポートすると、下のスクリーンショットのように表示された。
    new-map-08.JPG

  6. この画面で、例えば 15 のマーカーをクリックするとこの地点について編集できる画面となる。
    new-map-09.JPG

  7. この編集画面で、様々なことができる。編集ボタンをクリックするとマーカーをクリックした時に表示されるテキストやURL へのリンク、写真の表示などを指定できる。
    また、左枠内のマーカーにカーソルを合わせた時に表示されるnew-map-12.JPGボタンをクリックすると下の画面のように数多くのアイイコンを選択できるようになる。アイコンは、自分が作成したものでもOKのようだ。
    編集画面の上部にあるツールアイコンのライン描画new-map-13.JPGを使うと自由に線を引くことができる。
    また、地図の表題を変更するのもこの画面でできる。
    new-map-10.JPG

  8. 上の編集のためのツールを使って、下のような地図を作成することができる。
    new-map-11.JPG

  9. この画面の右上にある緑の「共有」ボタンをクリックするとメールやFacebookでこの地図を送信できたり、ブログなどで公開できたりする。
    右をクリックすると地図が表示される。駅への道地図 


 このGoogle Mapでオリジナルのカスタム マップを作成する方法を使えば、散策するときにスマホの山旅ロガーを起動し、行動を記録しておけば、ブログのエントリーに面白いかもしれない。いろいろと試してみたいと思う。

2014年9月30日

隠居のスマホ備忘録:アプリPCM録音したファイルをGoogleマイドライブに保存する

 
 毎年、9月の終わりの日曜日に和泉市の泉北高速鉄道いずみ中央駅近辺で、「和泉の国ジャズ・ストリート」というイベントがある。2005年から始まっているから、今年で15年目になる。2006年の第二回から、和泉市に住む友人と聞きに行っている。毎年、日曜日の午後くらいから会場を巡るのだが、今年は私が日曜に野暮用ができて、土曜日の前夜祭に合わせてもらった。前夜祭は、いずみ中央駅の構内のみで演奏される。

 このジャズ・ストリートでは、有料ライブは別として、写真撮影や録音はOKである。野鳥のさえずりを録音するために、朝の散策などで持ち歩いている今はなきSANYOの PCM recorder は持参しなかったが、スマホは持っていたのでPCM録音というアプリを使って、録音した。

 Xperia A(SO-04E) をPCにUSB 接続し保存したwavファイルを呼び出して、再生・編集しようと思った。ところが、PC のエクスプローラを開いて、Xperia と表示されるドライブを開いて、内部ストレージにある PCMRECORDER というホルダーを表示させてみると中身が空っぽである。SDカードに保存されたのかと覗いてみるとこちらも空っぽである。他の画像ファイルなどは、認識できる。
 スマホのアプリ PCM録音pro で再生を試みるとちゃんと音が鳴っている。bluetooth 接続にして、PC側で音を出してみても問題なく再生できる。保存したファイルはなくなっていない。

 ネットサーチで、いろいろと原因を探ったが、これといったページがヒットしない。困った。
PCM録音pro では、このファイルをメールに添付して送ることができるのだが、Gmail ではファイルの容量が25MBを越えるものは添付できないようで、うまくいかない。Evernote も容量が足りないので、容量の拡大を追加契約する必要がある。
docomoの提供するクラウドシステム データ保管ボックス では、PC からはアクセスできないようだ。

 再度、スマホの設定やアプリを見なおしていると、PCM録音 がフリー版も存在していることに気がついた。スマホで、その録音履歴を見るとPCM録音pro と同じファイルが表示される。フリー版は、pro版をインストールする前に使っていた。この辺が怪しいと思い、フリー版をアンインストールしスマホを再稼働してみると、PC のエクスプローラで、Xperia Aのフォルダー PCMRECORDER 配下に、録音・保存した4つの wav ファイルを認識できた。これで、すんなりとPC のフォルダーに移動することができるようになった。

 後で分かったことであるが、もっとスマートな方法があった。
スマホのPCM録音pro が提供している Google マイドライブを使う方法である。これは、Googleが提供しているクラウド・システムのひとつである。これを使うと、スマホで録音したファイルを Google の提供するクラウド・サーバーに保存し、PCで再生・編集できる。

Google マイドライブの使い方
録音履歴の表示;クリックすると大きな写真になります。 録音ファイルをタップすると;クリックすると大きな写真になります。 メール添付画面;クリックすると大きな写真になります。 ドライブ保存の指示;クリックすると大きな写真になります。
録音履歴の表示
PCM録音pro画面
録音ファイルをタップすると再生やファイル名の編集などが選択できるポップアップがでる。
PCM録音pro画面
ポップアップでメール添付をタップすると 多くのアイコンが表示される。
PCM録音pro画面
Google Drive アイコンをタップするとドライブ保存の指示をする画面が現れる。ファイル名など問題なければ、OKをタップすると、事前に設定しておいたGoogle のドライブに送信され保存される。


 Google ドライブを設定するには、Google アプリの ドライブを選定する。 Google アプリを表示するアイコンは、Google の何かのアプリ(例えば、Gmail など)の上部にあるアプリ・アイコンGoogleApl.JPGをクリックすると表示されるドライブ・アイコンDriveIcon.JPGをクリックするとGoogle ドライブの画面となる。画面の左メニューに、「ご使用のパソコン用のドライブをインストール」のカラムがあるので、指示されるままドライブをインストールすればよい。詳しくは、東京経済大学の学生向けのインストラクションが参考になる。

Google のアプリ アイコン
Google_app.JPG


 個人で Google ドライブを無料で使用できる容量は、15GB である。使用中の容量を確認するには、ウェブ上の Google ドライブにアクセスして左下にカーソルを合わせる。開いたウィンドウに使用容量が表示される。ポップアップ画面で確認できるように、Gmail で保存しているメールもストレージを占めている。
 ストレージは、有料で拡張できる。月 1.99$ で 100GB、 9.99$ で 1TB が使用できるようになる。このストレージは、Googleが管理・運営しているのだから、lost してしまうことはまずないだろう。大事なファイルをバックアップにも使えそうだ。外付けHDD を増やすよりずっといい方法だと思う。
早速、契約画面から、 100GB を契約した。Google に口座を持っておれば、契約は極めて簡単である。

Google マイドライブの使用状況
Google-drive.JPG

 スマホに保存したファイルが認識できなかったことから、思っていない副産物を得ることができた。

2014年9月20日

隠居のドライブ:若狭路を走る


 車が新しくなったことや、舞鶴若狭自動車道の小浜から敦賀までが、この7月に開通したこともあって、前から泊まってみたいと思っていた三方五湖の宿を求めた。しばらく家内と泊まりがけの旅行もしていない。

 ドライブするときには、できるだけ今まで走ったことのない道を走ってみたい。が、新しい道は覚束ないから、カーナビ頼りである。新しい道はどんどんできる。カーナビのデータベースは追い付いていないことが多い。ただ、最近つけたカーナビでは、マップオンデマンドというシステムがあり、新しい道の開通一週間後には、カーナビのHDDにダウンロードできる。
 今回も京都府・福井県の最新データをダウンロードしていった。その場合は、同時に全国の高速道路の最新情報もダウンロードされるから、今回走る予定の京都縦貫道や舞鶴若狭自動車道も新しいデータに更新されているはずである。
 このマップオンデマンドというシステムのおかげで、一度も道に迷うことはなかった。目的地は、スマホのアプリ NaviCon を使って設定した。 NaviCon では、全工程の設定もできるようだが、今回は行きたい場所をブックマークに登録しておいた。予定している行程は、その時の状況によってしばしば変更するからだ。一つの目的地から、次の行きたところを設定する場合は、前回設定していた目的地を消去し、新たな目的地をスマホ NaviCon のブックマークから選び、カーナビに送信するだけでいいから,そのほうが簡単である。

 最初の目的地を舞鶴港に設定し、通過地点に久我山JCTを指定すると、堺市南区の我が家からは、阪和自動車道⇒近畿自動車道⇒第二京阪道路⇒京滋バイパス⇒京都縦貫自動車道⇒舞鶴若狭自動車道⇒舞鶴東ICのコースをたどる。京都縦貫自動車道の丹波IC から京丹波わちIC の間は、まだ工事中であり一般道を40分ほど走らなければならない。京丹波わちICの手前の一般道にある道の駅・和(なごみ)には、地元産の農作物などいろいろのものが置いてあるが、高速道がつながれば車を駐める人は、ぐっと少なくなるだろう。

 自宅を6時40分ごろに出発し、途中2回小休憩をしたが、舞鶴港についたのは、9時20分ころだったので、2時間40分ほどで到着したことになる。
下図は、ドライブした場所を Google Maps API を使って、プロットしてみたものである。


 簡単に行けるのに、何かと有名な舞鶴港にはこの歳まで来たことはなかった。舞鶴港の前島埠頭には車を駐めるスペースがたくさんあり、多くの人たちが釣り竿を出していた。何を釣っているのかと聞いてみるとサビキ釣りでアジを釣り、それを餌にヒラメを狙っているが、あまり釣れないと言っていた。
 ここは、海上自衛隊の基地でもある。埠頭からは、接岸しているイージス艦2隻が見えた。近くの桟橋には、巨大な浮きブイが置いてある。戦艦が接岸するときに使うもののようだ。

 次の目的地を高浜城址城山公園に設定して、カーナビに言われるまま海岸沿いの一般道を走ると、40分ほどで到着した。
 城山公園には、無料の駐車場が5台ほどあり、シーズンオフの平日とあって駐めることができた。駐車場奥は、手入れの行き届いた芝生が海岸線に続いており、 WEB などで紹介されている明鏡洞(めいきょうどう)は、すぐそこにある。海水は透き通っており、さすが美しい日本海である。
 明鏡洞の横の小さな岬にある散策路をたどると綺麗な磯を見渡せる展望台もある。公園の反対側には、砂浜の海水浴場があり、水着姿の女性が犬を泳がせていた。

 次に目的地を設定したのは、小浜の道の駅「若狭おばま」である。若狭路にある小浜も、貫地谷しほり主演の朝ドラ「ちりとてちん」を見てから、一度行ってみたいと思っていた。だが、もう一つ行きたいと思われる場所はない。ただ、若狭蒔絵塗り箸を求めかったので、道の駅に行ってみることにした。この道の駅も新しいが、もう一つ購買意欲はわかなかった。

 昼時になったので、調べてあった三方五湖にあるうなぎ屋に車を走らせることにした。うなぎ屋は四軒調べてあったが、これはと思っていた「淡水」といううなぎ屋に行ってみると本日休業の看板。次に「徳右エ門」というところに行ってみると団体が入っていて、当分空きそうにないという。確かに、駐車場にはバスが駐まっている。そこからすぐにある丹後街道沿いにある「源与門」に行ってみると、30-40分待ちだがありつけそうであった。結局、うな重にありついたのは、1時半を過ぎていた。が、空腹には何よりものご馳走であった。

 地図を見ると今晩宿泊する若狭町営旅館「水月花」は、そんなに遠くない。時間は少し早いが、荷物だけも置こうと行ってみた。だが、チェックインは3時からということで、30分あまり時間がある。ホテルの近くに入り口があるレインボーラインは、翌日登ることにして、三方五湖の先に突き出ている岬の端、常神まで行ってみた。
 新人社員だった頃、会社の仲間と民宿に釣りと魚を食べに出かけたことのある「神子」というところを過ぎて海岸沿いの走ると20分ほどで岬の突端「常神」につく。確か大昔は、道はついていなかったと思う。静かな漁港である。港内にあるいけすには、アオサギとトビがのんびりと留まっていた。

 ホテルに引っ返し、車に積んできていたクーラの缶ビールで一息入れたあと、大浴場に向かった。浴場は小さいが、誰も入っていない浴場の大きなガラス戸のすぐ向こうは、水月湖が見渡せる。やっぱり、手足をゆったりと伸ばせる温泉はいい。
 その夜は、天気が良ければ十六夜の月が見られるはずである。夕食のアルコールでうとうとしていたが夜9時頃眼を覚ますと、湖に面したガラス戸の向こうに、十六夜の月が湖面を照らしているのが見える。慌てて、カメラを手にベランダに出て、雲で月が隠れるまでシャッターを何回か切った。このようなシーンをどのように撮るのかの知識がない。プログラム・オートで撮った写真は、いずれも露光不足である。Picasa でレタッチすると何とか感じの出る写真となった。
 翌明け方、土砂降りの雨となった。6時過ぎ朝風呂に行く頃には、雨は上がり静かな朝となった。朝食は、Morning Cruise という、船で水月湖を遊覧しながら朝食を摂るオプションを申し込んでいた。熟年ライダーのグループや老人会的団体の参加もあってテーブルは満席である。
 お弁当の食事を終えて、デッキに出てクルーズを楽しんでいると、湖上に虹がかかった。明け方の強い雨のせいかもしれない。今日、走る予定の三方五湖を見渡せる山上公園に登る有料道路は、レインボーラインという。この辺りには虹がよくかかるのだろう。虹を撮った経験もないので、プログラムオートで撮った写真は虹が薄い。レタッチするとなんとか色彩がでてきた。

 レインボーラインを登り切った山上公園の駐車場から、梅丈岳頂上には、リフトかケーブルカーで上る。頂上からは薄雲がかかってくっきりとは見えないが、若狭湾や三方五湖が見渡される。福井県出身の五木ひろしの「ふるさと」の歌碑があり、来る人来る人がボタンを押すので、「ふるさと」のメロディがずっとかかっていた。また、恋人の聖地ということで「誓の鍵」がいたるところにかかっていたりする。「かわらけ」投げでは、家内が「二人がぼけないように」と記した土の皿を投げていた。

 三方五湖に別れて、敦賀に向かう。行ってみたいのは、日本三大松原という「気比の松原」だ。梅丈岳の頂上からは、1時間足らずで到着する。今度は、この7月に開通したばかりの舞鶴若狭道を走った。ナビは駐車場に誘導してくれる。バスが数台駐っており、近くの海岸では体操ユニフォームの中学生が、アチラコチラで車座になってみんな同じ弁当を食べている。修学旅行だろうか。あるグループがトビに弁当をさらわれたのか、今度は残った弁当を餌におびき寄せて仕返しをしよとしているがなかなかうまく行かない。
 京都の鴨川岸での飲食は、トビに注意ということがよく知られているのだが。

 敦賀では、氣比神宮にも行ってみたかった。ここの駐車場がわからなかった。周りをぐるっと回って裏の門の方に回ると、駐車場の看板はなかったが車のご祈祷をするところにかなり大きな駐車場があった。もう少し大きな神社と思っていたが、そこそこの大きさだった。特段に見るものもなく、本殿にお参りしただけだった。交通安全の御札を求めた社務所でどこかお薦めの昼食の場所はないかと尋ねて、教えてもらった蕎麦屋に行ってみると定休日だった。
 NaviCon で敦賀でブックマークに登録していた「日本海さかな街」に行く途中に、そば・麺類の店を見つけ、そこで昼食を摂ることにした。いささかお腹が空いていた。
 食後、国道27号線沿いにある「日本海さかな街」に行って、ぶらぶらとたくさんの海産物を売る店を歩いてみたが、もひとつ購買意欲がわかず、早々に退散した。

 少し早かったが、ゆっくりと帰宅の途につくことにした。敦賀ICから北陸自動車道⇒名神高速⇒京滋バイパス⇒第二京阪道路⇒近畿自動車道⇒阪和自動車道と乗り継いで帰宅したのは、午後4時頃であった。トリップメーターを見ると、この2日間の走行距離は 516.6km で、リッターあたり 21.7km を示していた。運転できる間に、またどこかに出かけたいと思っている。

 

2014年7月11日

隠居のパソコン備忘録:スマホから送られた写真を Picasa に保存する一つの方法


 友人がスマホで撮った写真が送られたてきた。8枚ほどあるが、一枚づつ gmail 宛に送信されてきた。
 (Android のスマホでも複数枚を同時に送信することも出来るようだが。)

 送られて来た写真は、ひとつのフォルダーに収めたい。

ブラウザが Google chrome の場合
  1. 先ず、google chromr の右上にある設定マークchrome-01.JPGをクリックする。
  2. 出てくるセレクト・ボックスから、下の方の「設定」を選択する。
  3. 設定画面の一番下、詳細設定を表示 をクリックする。
  4. 下方に新たに出てくる画面で、「ダウンロードの項目」で、フォルダーを指定することができる。
  5. 保存するフォルダーの指定に自信があるなら、【ファイルごとに保存する場所を確認する】にチェックを入れる。
  6. このような設定をしておいて、受信したメールに表示されている写真の上に、カーソルを持って行くと表示される下向き矢印をクリックすると、指定したフォルダーにダウンロードされる。
  7. 【ファイルごとに保存する場所を確認する】をチェックした場合は、フォルダーを指定する画面が出るので、保存したいフォルダーを指定する。


ブラウザが Internet Explorer の場合
  1. 先ず、Internet Explorer の右上にある設定マークIE-01.JPGをクリックする。
  2. 出てくるセレクト・ボックスから、「ダウンロードの表示」を選択する。
  3. 下方に出てくる、オプション をクリックする。
  4. 新たに出てくる画面の、「既定のダウンロード・フォルダー」に、指定するフォルダーを入力する。右の「参照」ボタンをクリックすれば、エクスプローラからドライブ:フォルダーを指定できる。
  5. ファイルごとに保存する場所を指定することはできないようだ。


 これらの方法は、メールに添付された写真だけではなく、その他の添付ファイルや、ネットからダウンロードする様々なソフトや文書なども同じである。

 ダウンロードした写真を Picasa を使って編集することも多い。Picasa に取り込んでおけば、サイズの変更やトリミング・簡単なレタッチなどができるし、編集後の写真を送信する機能も持っている。
 スマホから送られて来た写真を保存したフォルダーを Picasa に反映するには、次の手順を踏めばよい。

保存したフォルダーを Picasa に表示する
  1. Picasa を立ち上げ、「ツール」⇒「フォルダマネージャー」をクリックする。
  2. すると、次のような画面がポップアップするので、Picasa に表示させたいフォルダーを選択して、picasa-2.JPG常時スキャン をクリックしておけばよい。
    folder-manager-1.JPG

 私の場合、外付けディスクをたくさんつけており、それぞれでパーティションを切っているので、ドライブ・レターが多いが、一般的にはドライブは、C: D: E: ぐらいだろう。
 ただ、写真用、音楽用、文書用というふうに外付けディスクをつないでおけば、整理がし易いのではないかと思っている。1TB が一万円くらいで極めてリーズナブルな世界になってきている。

2013年12月14日

隠居のパソコン備忘録: Google Map で緯度・経度を求める


 Google のソフトは、メール(gmail)でも、地図検索(google map) でも、カレンダー(スケジュール帳)でも、どんどん進化?している。だから、ちょっと前までできていたことが、突然できなくなったりする。

 このブログに掲載している私的な観光地図(例えば、【京都・滋賀・奈良私的観光地図】 )では、Google Maps API というアプリを使っている。このアプリも進化しているが、いまここでは触れない。
 このような地図を作るときには、ピンマークを建てる位置の経度・緯度(10進法での)が、必要である。今までは、Google の地図検索で探した地点の赤ピンマーク map-09.JPG の根元を右クリックするとセレクトボックスが出て、その中から、「この場所について」を選択すると検索地点入力ボックスに、10進法の緯度・経度が表示されるので、これを使っていた。

 だが、最新のGoogle 地図検索では、セレクトボックスは出てこないし、緯度・緯度を表示してくれる機能が見当たらない。困ったので、緯度・経度を表示するサービスはないかと検索してみると、【Googleマップで緯度・経度を求める (拡張版)】というサービスが見つかった。最新のGoogle 地図検索では、検索した時に、検索入力ボックスに検索地点の住所が表示されるので、上のサービスの検索入力ボックスに Copy&Paste すれば、その地点の緯度・緯度を10進法と60進法の両方で表示してくれる。

 ところが、この記事を書くために、再度最新の Google 地図検索を開いてみると、右下の方にあるヘルプアイコンmap-07.JPGをクリックすると「以前のマップに戻る」という項目が用意されていて、これを選択すると、Google 地図検索の前のバージョンになる機能が追加されていた。Google のアプリは基本的に無料であるから、自由気ままに変えているのかなと思ってしまう。

最新のGoogle 地図検索 画面
map-01.JPG

ヘルプアイコンをクリックすると
map-02.JPG

以前のGoogle 地図検索 画面
map-03.JPG

検索地点の赤ピンマークの根元をクリックする
map-04.JPG

「この場所について」を選択する
map-05.JPG

Googleマップで緯度・経度を求める (拡張版)
map-06.JPG


2013年5月16日

北九州ドライブ旅行私的観光地図(番号入りマークを表示する)


 いつものように、旅行で訪れた地点をマークで表示する旅行地図を Google Maps API V3 で作成した。前回、和歌山を旅行した時の【初春の南紀私的観光旅行地図】のソースを土台にした。
 ソースは、html と xml のファイルがセットである。html のソースに手を加える部分は、タイトル、地図の中心点・大きさの指示であるが、今回は表示する地点が、14箇所となったので、これらのマークを作成するコードの追加が必要(単純に、元の行の数字を変えるだけであるが)であった。ついでに、マークの色を、オレンジ色に変えた。
また、呼び込んでくる xml ファイル名を指定しなければならない。

 このような新しいマークを作るのは、ICANN というサイトが提供している【Google-Maps markers generator】というページが極めて有用である。
 画面の指示通り、ピン・マークの色を選び、中に表示する数字またはアルファベットを指示して、ダウンロードボタンをクリックすると指定したフォルダーに指示したマーカーの数だけのファイルがダウンロードされる。今回の場合は、例えば、norange_Marker_xx.png というファイルが作成されている。これをFFFTPでサーバーにアップロードして使えばよい。

 単純だか、時間がかかる作業は、訪問地点の経度・緯度、地点名、表示する写真などにリンクするhtml コードをリストする xml ファイルの作成である。
 これも、前回の xml ファイルの内容を変更し、地点数を増やすだけの作業である。入力する経度・緯度の表示は、Google Maps で地点を特定し、地点を右クリックすると現れるポッピアップの「この場所について」をクリックして表示される10進法の数字を使う。私の場合、写真の EXIF に経度・緯度が表示される(カメラにGPSユニットをつけている。)が、これは60進法で、10進法に変換する必要があるので、Google Maps で地点が特定できないときに使っている。

北九州ドライブ旅行地図
  クリックすると地図として機能します。
map_kyusyu.JPG


2012年9月22日

隠居のパソコン備忘録: Google Maps API JS V3 で、番号付きマーカーを表示する

 
 従来、右フレームの【晩秋の宍道湖私的観光地図】は、Google Maps API のV2版で作成したものを置いていた。V2 でかいた地図はまだ動くが、2010年5月に廃止されており、V3 へ移行することが奬められている。
 この地図では、必要性はあまりないが、マーカーに番号を表示させていた。新しく V3 で作りなおすときにも、学習も兼ねて番号を表示させたかった。

 ところが、番号入りマーカーを表示するサンプルコードが見つからない。V2 で作成したコードを V3 に置き換えることも試みたが、悲しいかな十分な知識がないし、一から勉強する意欲もないので、うまく行きそうにない。
 今までに成功した V3 のコードを眺めていると【Google Maps API JS V3 で、カテゴリー別に色違いマーカーを表示する】 で使ったコードを、わかる範囲でいじってみれば、なんとかなるのではないかと思われた。色違いのマーカーを、番号付きマーカーに置き換えるのである。この地図では、category 別に赤・青・黄色・緑などのマーカーにしているが、これを番号つきのマーカーに置き換えるのである。また、また、一つずつのマークを、一つのカテゴリーと考えるのである。
 このコードでは、マーカーを立てる地点の経度・緯度や吹きだしに表示するHTMLなどは、XML ファイルを読み込んでくることになっている。V2 で作成した地図では、HTMLの中に直接入力されていた。

 とりあえずうまく表示できるようなので、自分用の備忘録として、XML ファイルおよびHTML コードを記録しておきたい。よくわかった人から見れば、へんてこなコードとなっていると思うが、古希を超えるとほとんど羞恥心はなくなっている。

使用したXML ファイル。項目 category は num01, num02・・・のようになっている。
<?xml version="1.0" encoding="utf-8" ?> 
- <markers>
  <marker name="1:宍道湖温泉" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4820-1.JPG" title="宍道湖の夕焼け" rel="lightbox[sinjiko]">宍道湖の夕焼け</a><br/>   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4831.JPG" title="宍道湖の朝" rel="lightbox[sinjiko]">宍道湖の朝</a>" lng="133.053875" lat="35.469199" category="num01" /> 
  <marker name="2:米子水鳥公園" address="   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01539.JPG" title="コハクチョウ" rel="lightbox[sinjiko]" >コハクチョウ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01510.JPG" title="オナガガモ:♀を追いかける♂たち" rel="lightbox[sinjiko]" >オナガガモ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01529.JPG" title="マガンの群れ:沖の州" rel="lightbox[sinjiko]" >マガンの群れ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01591.JPG" title="キンクロハジロ?" rel="lightbox[sinjiko]" >キンクロハジロ</a>" lng="133.284674" lat="35.44333" category="num02" /> 
  <marker name="3:宍道湖グリーンパーク" address="   <a href="http://n-shuhei.net/atelier/video/digisco_1.wmv" target="_blank">コハクチョウ(video)</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01620.JPG" title="セグロセキレイ" rel="lightbox[sinjiko]" >セグロセキレイ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01632.JPG" title="トビ?" rel="lightbox[sinjiko]" >トビ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_birds/0911211.jpg" title="ジョウビダキ?" rel="lightbox[sinjiko]" >ジョウビダキ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4872.JPG" title="ゴビウスにある水槽" rel="lightbox[sinjiko]">ゴビウスにある水槽</a>" lng="132.866077" lat="35.444729" category="num03" /> 
  <marker name="4:出雲大社" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4886.JPG" title="出雲大社にて" rel="lightbox[sinjiko]">出雲大社にて</a>" lng="132.685919" lat="35.401434" category="num04" /> 
  <marker name="5:足立美術館" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4908.JPG" title="足立美術館の紅葉" rel="lightbox[drive]">足立美術館の紅葉</a><br/>   <a href="http://n-shuhei.net/atelier/photo_drive/Stitched_003.JPG" title="枯山水の庭:3枚の合成写真" rel="lightbox[drive]">枯山水の庭</a><br/>   <a href="http://n-shuhei.net/atelier/DSC_4932.JPG" title="足立美術館:絵画を観ているように" rel="lightbox[drive]">仏間から庭を望む</a>" lng="133.198242" lat="35.377854" category="num05" /> 
  <marker name="6:米子自動車道大山PA" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4720-1.JPG" title="雪化粧した大山:大山PAより" rel="lightbox[sinjiko]">大山の紅葉</a>" lng="133.419342" lat="35.386531" category="num06" /> 
  </markers>


 作成した地図作成の稚拙なHTMLコード(Google Maps API V3 のJavaScript を含む)は、右フレームに掲載している【晩秋の宍道湖私的観光地図】のソース・コードを見ていただければ、わかると思うが、参考までに下に記載し、少しのコメントを加えたいと思う。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 

<title>Google Maps Javascript API v3 Example: Marker Categories</title> 

<!-- jQuery lightbox2.51 -->
<script type="text/javascript" src="http://n-shuhei.net/atelier/Jquery2.51/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://n-shuhei.net/atelier/Jquery2.51/js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://n-shuhei.net/atelier/Jquery2.51/css/lightbox.css" media="screen" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://n-shuhei.net/atelier/maps/V3test/downloadxml.js"></script>
    <title>Google Maps</title>
<style type="text/css">
html, body { height: 100%; } 
</style>
    <script type="text/javascript">
    //<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
      var gmarkers = [];
      var gicons = [];
      var map = null;
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

gicons["01"] = new google.maps.MarkerImage("http://n-shuhei.net/Googlemaps/Markers/marker_01.png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.
  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.

  var iconImage = new google.maps.MarkerImage('http://n-shuhei.net/Googlemaps/Markers/marker_01.png',
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
  var iconShadow = new google.maps.MarkerImage('http://n-shuhei.net/atelier/maps/V3test/msmarker.shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(9, 34));
 
function getMarkerImage(iconNum) {
   if ((typeof(iconNum)=="undefined") || (iconNum==null)) { 
      iconNum = "01"; 
   }
   if (!gicons[iconNum]) {
      gicons[iconNum] = new google.maps.MarkerImage("http://n-shuhei.net/Googlemaps/Markers/marker_"+ iconNum +".png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 6,20.
      new google.maps.Point(9, 34));
   } 
   return gicons[iconNum];
}

function category2num(category) {
   var num = "01";       
   switch(category) {
     case "num01": num = "01";
                break;
     case "num02": num = "02";
                break;
     case "num03": num = "03";
                break;
     case "num04": num = "04";
                break;
     case "num05": num = "05";
                break;
     case "num06": num = "06";
                break;
     default:   num = "01";
                break;
   }

   return num;
}

      gicons["num01"] = getMarkerImage(category2num("num01"));
      gicons["num02"] = getMarkerImage(category2num("num02"));
      gicons["num03"] = getMarkerImage(category2num("num03"));
      gicons["num04"] = getMarkerImage(category2num("num04"));
      gicons["num05"] = getMarkerImage(category2num("num05"));
      gicons["num06"] = getMarkerImage(category2num("num06"));
      // A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        icon: gicons[category],
        shadow: iconShadow,
        map: map,
        title: name,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

        // === Store the category and name info as a marker properties ===
        marker.mycategory = category;                                 
        marker.myname = name;
        gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(true);
          }
        }

        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(false);
          }
        }

        // == clear the checkbox ==
        document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infowindow.close();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }

        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }

      // == rebuilds the sidebar to match the markers currently displayed ==
      function makeSidebar() {
        var html = "";
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].getVisible()) {
            html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a>' + ' ' ;
          }
        }

        document.getElementById("side_bar").innerHTML = html;
      }

  function initialize() {
    var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(35.430603,133.012136),   //松江
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_sinnjiko_num.xml", function(doc) {
  var xml = xmlParse(doc);
  var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var address = markers[i].getAttribute("address");
          var name = markers[i].getAttribute("name");
          var html = "<b>"+name+"<\/b><p>"+address;
          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
        }

        // == create the initial sidebar ==
        makeSidebar();
      });
    }

    //]]>
    </script>
  </head>

<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <!-- you can use tables or divs for the overall layout -->
    <table border=1 >
<tr><td align="center"style="width:1000px; background-color: #ffffe0;" ><br /><h2>晩秋の宍道湖私的観光地図</h2></td></tr>      
<tr><td>
           <div id="map" style="width: 1000px; height: 500px"></div>
        </td></tr><tr>
<td valign="top" style="width:1000px; background-color: #ffffe0; font-size: small;"> 
 上の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。下の該当番号をクリックすると該当番号マーカーに吹きだしが出てきます。その吹き出しにある青文字をクリックすると写真(一部 動画)がでてきます。</td></tr><tr>
        <td valign="top" style="width:1000px; background-color: #ffffe0; font-size: small;"> 
           <div id="side_bar"></div>
        </td>
      </tr>
    </table>


    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>

<br /><br />
<!-- Google AdSense -->
<script type="text/javascript"><!--
google_ad_client = "pub-8556873278052332";
/* AdSense foot ad */
google_ad_slot = "1589991765";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
  </body>
</html>


  • 番号付きマーカーは、dLINKbRING というサイトからダウンロードできる
  • 表示する地図を、ラベル付き航空写真とするには、mapTypeId: google.maps.MapTypeId.HYBRID とすればよい。通常は、HYBRID の部分が、ROADMAP となっている。
  • マーカーをクリックしてでる吹きだしの中に表示される写真リンクをクリックして出てくる写真を、同一画面の中央に表示するJavaScript ソフト lightbox は機能する。 jQuerylightbox2.51 を使った。


2012年8月26日

隠居のパソコン備忘録: Google Maps API JS V3 での地図でマーカー地点をズームイン・アウトする


 V3 にバージョンアップした Google Maps JS API で旅行地図などを作成することをいろいろとトライしている。
 当サイト内の Studio YAMAKO のオーナーは、お住まいの横浜近郊はもちろんのこと、海外をも含めて様々なところを旅行され、それぞれの地点での綺麗な写真をブログにUPされている。
 旅行先を一枚の地図で表示することは無理なので、海外旅行については、その都度旅行先の地図を作って表示させてもらっているが、国内旅行については、年度別に、一枚の日本地図にプロットしている。(例:2011年旅行地図) だが、これでは地図が大まかすぎて、訪問先地点毎に、コントロールを使って、ズームインと地図の移動をする必要がある。

 それで何か良いサンプルはないかと探ってみると、Google Maps API links に、V2 で作成されたMike Williams' tutorial の The Basics - Part 3: Loading the data from an XML file with added "Zoom To, Zoom In, Zoom Out links in infowindow V3 に書き換えたサンプルコードが見つかった。
 2011年旅行地図では、隠居のパソコン備忘録: Google Maps API JS V3 でXML ファイルを読み込むに記録したサンプルコードを使った。今回のコードは、そのコードに、Zoom in・out の機能を付け加えたものである。呼び込んでくる XML ファイルは、同じ形式である。サンプルコードには、XML ファイルに zoom というタグが組み込まれていたが、なしでも機能するようである。
 2012年の旅行地図では、このコードを使った。見た目は、2011年旅行地図と変わらないが、地点をクリックして出てくる吹きだし(infowindow)に、表示される Zoom to [+] [-] をクリックすると、その地点が地図の中心となる。 さらに、[+] をクリックしていくと、Zoom が一段ずつUPする。2011年旅行地図に比べれば、少し改良された。
 下は、そのコードである。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://xxxxxxxxxx/JSlibrary/downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; } 
</style>
<script type="text/javascript"> 
//<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 
     // global "map" variable
      var map = null;
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html, zoom) {
    var contentString = html;
    // add the zoom links
    contentString += '<br><a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom('+zoom+');">Zoom To</a>';
    contentString += ' - <a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+1);">[+]</a>';
    contentString += ' - <a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-1);">[-]</a>';

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_blue.png'),         
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    marker.MyZoom = zoom;
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
  // create the map
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(34.717876,137.851424),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });
      // Read the data from example.xml
      downloadUrl("http://xxxxxxxx/xxxxxxxxx/xxxx/V3_yamako_2012.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");
          var zoom = markers[i].getAttribute("zoom");
          if (!zoom) zoom = 15;
          // create the marker
          var marker = createMarker(point,label,html,zoom);
        }
        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
//    size: new google.maps.Size(150,100),
    maxWidth: 450
  });

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic3.htm 
//]]>

</script> 
  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <!-- you can use tables or divs for the overall layout --> 
     <table border="1"> 
<tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>Yamako 国内旅行地図:2012年
</big></strong><br /></font></td></tr>      
<tr> 
        <td> 
           <div id="map_canvas" style="width: 780px; height: 820px"></div> 
        </td> 
        <td width = 220 valign="top"  bgcolor="#ffffe0" style="text-decoration: underline; color: #000000; font-size: small;" >
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 


    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 

  </body> 
</html> 


2012年8月18日

隠居の旅行地図:真夏の山陰地方

 先のエントリー【隠居、真夏の山陰旅行を楽しむ】で、訪れた地点の地図を、Google Maps API V3 で作成してみた。
 訪問順に番号付きのマークを入れたいのだが、なかなかうまく行かない。ネットでいろいろと探ってみたが、ピッタリのサンプルが見あたらない。そのようなサーチの間に、標準のマーカー・アイコンを種々のアイコンに変える方法が分かったので、赤い押しピンを模したアイコンを採用してみた。このような種々のマーカー・アイコンは、Google から提供されていて、ダウンロードしなくても直接リンクすることで使えることも分かった。

 この地図は、加賀地方へ旅行した時とほぼ同じ形式であるが、各地点の経度・緯度、写真へのリンクなどは、外部ファイルとしての XML ファイルを呼び込む形式を取っている。

2012年7月29日

隠居のパソコン備忘録: Google Maps API V3 で Polyline を描く


 自作地図を作成するのに便利していた Google Maps API のバージョンが、 V2 から V3 に大幅に変更され、来年5月には V2 で作成した地図が動かなくなりそうだということは、隠居のパソコン備忘録:Google Maps API V3 で旅行地図を作成するで、記録した。

 Studio YAMAKO のオーナーが、この2~3年に海外旅行した時の地図には、旅程を表す Polyline を表示している。これも、V3 になると書き換えなければならない。V2 では、XML ファイルに訪れた地点の経度・緯度を書き込んでおくと Polyline を描いてくれる sample code があったが、V3 では、そのような sample code は、ヒットしなかった。
 【Google Maps JavaScript API V3の使い方】というサイトに、【ポリラインの表示】というぺーじがあり、polyline を描くための訪問地点の経度・緯度を Javascript に直接記入する方法が紹介されていた。このサンプル・コードを参考に、先日記録した【Google Maps API JS V3 でXML ファイルを読み込む】の Javascript コードに追加してみると上手く動くことが分かった。老人の備忘録として、「トルコ周遊8日間の旅」の地図のコードを記録としておきたい。下のコードの青字部分が Polyline 表示のために追加した部分である。
 訪問地点の経度・緯度は、V2 のときに使っていた XML ファイルの中からコピーしてきた。記述する部分は少ないので、XML ファイルにする必要性はあまりない。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://n-shuhei.net/JSlibrary/downloadxml.js"></script>

<style type="text/css">
html, body { height: 100%; } 
</style>

<script type="text/javascript"> 
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      // arrays to hold copies of the markers and html used by the side_bar 
     // because the function closure trick doesnt work there 

      var gmarkers = []; 

     // global "map" variable
      var map = null;

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);

    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
  // create the map
  var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(39.436193,29.86908),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data from hachi.xml
      downloadUrl("V3_maps_Turkey.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");

          // create the marker
          var marker = createMarker(point,label,html);
        }

      // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;

// Polyline 表示の追加 ここから     
    var drivePlan = [
      new google.maps.LatLng(40.010787, 26.279297),
      new google.maps.LatLng(39.317035, 26.703644),
      new google.maps.LatLng(37.947176, 27.342567),
      new google.maps.LatLng(37.914409, 29.120979),
      new google.maps.LatLng(37.882441, 32.485199),
      new google.maps.LatLng(38.376115, 34.002686),
      new google.maps.LatLng(38.533127, 34.433899),
      new google.maps.LatLng(38.627063, 34.720917),
      new google.maps.LatLng(38.772019, 35.490303),
      new google.maps.LatLng(41.013066, 28.975067),
      new google.maps.LatLng(40.010787, 26.279297)
    ];
    var drivePath = new google.maps.Polyline({
      path: drivePlan,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
      drivePath.setMap(map);
// ここまで 

      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
//    size:  new google.maps.Size(200,50)
  });

//]]>

</script> 
  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 

<table border="1"> <tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>「洞窟ホテルに泊まる!トルコハイライト周遊8日間」の旅</big></strong></font></td></tr>      
<tr><td> 
    <div id="map_canvas" style="width: 800px; height: 600px"></div> 
    </td> 
    <td width = 200 valign="top" bgcolor="#ffffcc" >
左の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。下の地名をクリックすると該当位置に吹き出しが出ます。吹き出しの中のリンクをクリックすると詳細地図あるいは関連投稿に飛びます。<br /><br />
    <div id="side_bar"style="text-decoration: underline; color: #000000; font-size: small;"></div> 
    </td></tr></table> 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 

  </body> 
</html> 


2012年7月21日

隠居のパソコン備忘録: Google Maps API JS V3 でXML ファイルを読み込む

 
 自作地図を作成するのに便利していた Google Maps API のバージョンが、 V2 から V3 に大幅に変更され、来年5月には V2 で作成した地図が動かなくなりそうだということは、隠居のパソコン備忘録:Google Maps API V3 で旅行地図を作成するで、記録した。

  V2 で作成した多くの地図では、外部ファイルである XML ファイルを読み込んでマーカを立てる地点やマーカをクリックすると出てくる吹きだしの中に、リンク先などの情報を表示していた。年間の旅行先などマーカが順次増える場合には、XML ファイルに経度・緯度や必要なリンクを書き足すだけでいいので便利をしていた。
 今まで V2 で作成してきた地図を V3 にバージョンアップして XML ファイルを読み込むためのサンプル・コードを探し回したが、適切なコードが見つからなかった。一から、作成する能力はからきしない。途方に暮れて、上のブログに記録した前回の方法で、XML ファイルを使わず直接 JavaScript に書き込むことも挑戦しかけたが途方も無い作業のようなのでやめて、今までの XML ファイルが使えそうなサンプル・コードで、再度粘ってみることにした。

 拝借したサンプル・コードは、上のブログに記録した前回の方法ときにも拝借した、【Using the Google Maps API v3】 というページにある【lLoading the data from an XML file translated to v3】のソース・コードである。
 V3 のGoogle Maps API にXML ファイルを読み込む方法は、多くの場合、前回に lightbox 2.51 の導入で紹介した JavaScript のライブラリー jQuery が使われている。拝借したサンプル・コードでは、jQuery ではなく、downloadxml.js というライブラリーが使われている。どうも、jQuery の方が本流らしいが、私にとっては、V3 で今までの XML ファイルが使えるサンプル・コードの方がありがたい。
 一週間以上かなりの時間を使って粘った甲斐があって、下のようなコードで XML が読み込めるようになった。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://n-shuhei.net/XXXXX/XXX/XXXXX/downloadxml.js"></script>

<style type="text/css">
html, body { height: 100%; } 
</style>

<script type="text/javascript"> 
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      // arrays to hold copies of the markers and html used by the side_bar 
     // because the function closure trick doesnt work there 

      var gmarkers = []; 

     // global "map" variable
      var map = null;

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);

    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
  // create the map
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(35.377556,134.534862),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data from hachi.xml
      downloadUrl("hachi.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");

          // create the marker
          var marker = createMarker(point,label,html);
        }

        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
//    size:  new google.maps.Size(200,50)
  });

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic3.htm 

//]]>

</script> 
  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 

    <!-- you can use tables or divs for the overall layout --> 
    <table border="1"> 
<tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>ハチ高原近辺私的観光地図</big></strong><br /></font></td></tr>      
<tr> 
        <td> 
           <div id="map_canvas" style="width: 800px; height: 600px"></div> 
        </td> 
        <td width = 200 valign="top"  bgcolor="#ffffe0" style="text-decoration: underline; color: #000000; font-size: small;" >
<!--<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">-->
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 

  </body> 
</html> 
サンプル地図

 試行錯誤は、拡張子の前につける . (ピリオド)が抜けていたり、ファイルのアップロード先を間違ったりなど実に単純なミスの連続であった。
 とくに、Geekなぺーじの【Google MAPS JavaScript APIでのデバッグ】にも書かれているように、日本語コードで最後までつまづいた。V2 のときには、Shift-JIS でも OK だったXML ファイルが、UTF-8 でないとエラーを起こすというより、全く読んでくれない。
 この試行錯誤のお陰で、Google Maps API について、少し理解が深まったが、JavaScript に十分な知識がない老人にはやっぱり難解な世界である。中断していた JavaScript の学習も再開せねばと思うが、なにしろやりたいことが多すぎる。
 来年5月までに、順次 V2 の地図を V3 にしていくつもりである。

2011年9月15日

Google Maps API で信州旅行地図(訪問地点写真つき)を作る

 このところは泊まりがけの旅行にいくたびに、Google Maps API で地図を作って残している。今回の旅行地図は、右メニューに【晩夏の信州私的観光地図】として記録した。

 このような地図を作るために、過去にさまざまなトライアルをしてきた。その時々で、幾つかの学習をしてきたことを以下のエントリーで記載している。
 また、Google Maps も、Picasa web Album との連携がとれるなど様々な改良が加えられてきている。これらの機能を活かすために、私はデジカメに撮影した地点の経度・緯度・高度情報が取り込めるように、GPS(Nikon GP-1) をつけている。さらに、最近使い始めたスマホ Xperia acro のカメラ機能にもGPS が付属している。例えば、このカメラで撮ったホテルの露天風呂の位置は、北緯36度41分24秒、東経137度51分30秒で、標高は737mである。
 これらの位置情報が得られないコンデジ(GPS 機能がついていないカメラ)などでは、Picasa のウェブアルバム機能を使えば、場所情報を簡単に付加することができ、撮影データが記録される写真の Exif に附加される。このあたりの方法については、下の2011年1月16日の【Google Maps: Picasa を使って野鳥出現地点をプロットする】に詳しく記録している。

 このような記録を残すことによって、旅の思い出を鮮明によみがえらせることができるのではないかと思う。

隠居の探鳥ウォーク:泉北ニュータウン栂地区で観察した水鳥をプロットしてみた
隠居のGoogle Maps: (続)Google Maps API を使って野鳥出現地点をカスタム・マーカーでプロットする
隠居のGoogle Maps: Picasa を使って野鳥出現地点をプロットする
隠居の探鳥ウォーク:堺市で撮影した秋の野鳥たち
隠居のパソコン備忘録:Google Maps と Picasa を使って位置情報を持つ写真を掲載する
隠居の写真整理:Picasa でGPS ユニットを使って撮影場所を記録する
隠居のGoogle利用:検索したGoogle マップをメール・ブログに貼り付ける
Google Maps API で旅行地図を作る:線画を描くなど
隠居のGoogle Maps:IE8 での不具合を回避する
Google Maps API で旅行地図を作る:番号付きマーカーを使う
隠居のパソコン備忘録:Google Maps API を使った地図ページでの文字化け対策
伊勢参り
泉北ニュータウン私的観光地図:Google Maps API Trial_5
改訂:早春の鹿児島:Google Maps API に litebox を使う
道東ドライブ:Google Maps API Traial_3
泉北近辺私的観光地図:Google Maps API Trial_2
泉北の紅葉:Google Maps API v2 Trial
Google Maps API の利用規約要約
キャプチャーで使う地図の著作権
泉北の紅葉:2006

2011年3月11日

隠居のパソコン備忘録:Google フォト スクリーンセーバーを設定する

 パソコンをしばらく使用していない間、画面を黒くしたり、簡単なアニメーションを表示するスクリーンセーバがある。表示されている文字などや画像がCRTディスプレイに焼きつくのを防止するためのものだが、最近はCRTディスプレイの性能向上や、仕様上焼きつきが発生しない液晶ディスプレイの登場などでその意味は薄れているらしい。私は、古くからのCRTディスプレイをまだつかっているので、10分間使用しないでいると画面が黒くなるように設定していた。

 最近になって、Windows の画面しか設定できないが、Google のPicasa に、【Google フォト スクリーンセーバー】というサービスが、ディスクトップの背景画像を選んでいるときにあることを知った。
 Picasa を使って、ディスクトップの背景画像を変更するには、Picasa のライブラリー表示モードでディスクトップ画面にしたい画像を選択して、メニューバー【作成】⇒【ディスクトップに設定】を選択すれば良い。

 同じように Picasa でフォト スクリーンセーバーを設定することが分かったので、手順を忘れないように記録しておきたい。
  1. メニューバーの【ツール】をクリックすると【スクリーンセーバーを設定】という項目がある。これをクリックすると、ディスクトップ画面で右クリックして【プロパティ】⇒【スクリーンセーバー】タブをクリックしたときと同じ画面となる。
  2. 出てくる画面の【スクリーンセーバー】セレクトボックスに、【Google フォト スクリーンセーバー】が選択されていることを確認して、右横の【設定】ボタンをクリックすると詳細な項目を設定する画面が現れる。
  3. 【写真の表示元】という項目には、【Picasa】【ウェブアルバム】【パソコン上の特定フォルダー】【公開サイトの写真】があり、いずれかを選択することができる。
    • 【Picasa】の項目は、Picasa でスクリーンセーバー・フォルダーに集めている写真を表示するときに使う。
    • 【ウェブアルバム】では、Picasa で作成しているウェブアルバムの写真を表示するときに使う。
    • 【パソコン上の特定フォルダー】では、指定したフォルダーにある写真を表示してくれる。私は、ブログに掲載する写真を集めたフォルダーがあるので、これを指定している。
    • 【公開サイトの写真】では、ネット上に公開されているサイトの写真を表示できるようだ。
  4. 同じポップアップ画面で、【視覚効果】と表示されたセレクトボックスでスライドショー的に出てくる写真の出し方を選ぶことができる。一つずつ試すことができるので、気に入った表示方法を選択すれば良い。また、その下にあるスライドバーで、表示間隔を0.1 秒から 9.6 秒までに設定することができる。
  5. Picasa で表示する写真に説明を加えておれば写真を表示するときに、【説明を表示】をチェックしておけば、説明が画面の下部に表示される。


モニターが液晶でも、このスクリーンセーバーを使えば好きな写真のスライドショーが出てくるので楽しいのでないかと思う。

 

2011年1月16日

隠居のGoogle Maps: Picasa を使って野鳥出現地点をプロットする


 最近、野鳥撮影はもっぱら NikonD90 と Σ120-400mm との組み合わせである。これに、GPS ユニットの Nikon GP-1 を付けている。これだと、カメラのアクセサリー・シューにつけて、アクセサリー・ターミナルとコード接続しておけば、撮った写真のEXIF(イグジフ:exchangeable image file format for digital still cameras)情報の一部として撮影時刻などと同じように経度・緯度・高度が記録される。つい最近までは、SONY の GPS を一緒に携帯し、GPS Image Tracker というソフトを使って、撮影位置情報を得てきたが、写真の整理に時間がかかり手間であった。
この情報を使って、【野鳥写真のサムネイル】からリンクする野鳥撮影地点プロット地図を作成したいとと思ってきた。なんでも記録することが、このごろの習い性となっている。

 方法については、右サイドフレームに載せている旅行地図作成に使っている Google Maps API の応用を何度かトライしてみたが、乏しい知識では満足いく結果は得られなかった。
 そこで、 昨年10月に掲載した、【隠居のパソコン備忘録:Google Maps と Picasa を使って位置情報を持つ写真を掲載する】の方法をもとに、位置情報を持たない写真に位置情報を付加するなどの新しいやり方も付け加えて、プロット地図を作ってみた。先のエントリーと重複する部分もあるが、改めて備忘録として残しておきたい。
 私の場合、今まで撮影した写真は Picasa に収納している。オリジナルの写真はほとんどNikon D90 の Fine L(4288x2848pixel) あるいはD70 Fine L(3008x2000pixel) で撮っているが、ブログに載せる写真は、800x530pixel に縮小して別フォルダに収納している。これらの写真を種別に整理したのが、【野鳥写真のサムネイル】である。
種別野鳥の撮影地点プロット地図を作成する方法を、以下、順をおって記録する。例として、野鳥サムネイルに掲載しているツグミの写真撮影地点地図の作成を取り上げる。

  1. プロット地図を作成するためには、これらの写真を集めておく方が後々便利なので、適切な場所に新しいフォルダーを作成(一般的な方法で,今回は、【tsugumi】というフォルダーを作成)し、収納する写真をこのフォルダーにエクスポートした。
  2. このようにして集めた写真をPicasa のライブラリー・サムネイル写真でみると、EXIF に経度・緯度が取り込まれている場合には、下のスクリーンショットのようにサムネイル写真にマーカーが表示される。ここで集めた写真は、GPS ユニットを使っていなかったときの写真も含まれるので、マーカーが表示されていない写真もある。

    birdsplot_01.JPG
  3. マーカーが表示されていない写真の撮影地点マークを貼り付けるには、Picasa の下段ツール・アイコンで【「場所」パネル表示/非表示】ボタンをクリックするとおなじみの Google Map の地図が出てくるので、Google Map の機能を使って拡大・縮小や移動を行い、写真を撮った地点が特定できる区域地図を表示させる。
     撮影地点を特定したい写真を選択し、地図の拡大(+)・縮小 (ー)マーク横の緑マーカーをクリックすると緑色の小さなマーカーが出てくるので、これをドラッグして目的とする地点でクリックすると、「写真をここに配置しますか?」とのポップアップ画面がでてくるので、OK とするとマークを立てることができる。

    birdsplot_04.JPG
  4. すべての写真にマークが立ったら、Picasa の【ツール】 ⇒【アップロード】⇒【Picasa ウエブアルバムにアップロード】と選択すると、アルバムのタイトルなどを指定する下のスクリーンショットのようなアップロード画面が現われる。例えば、この画面で、タイトルを "ツグミ" としてアップロードすると新しいウェブアルバムが作成される。これは、Picasa の画面右上にある【ウェブアルバム】タグをクリックして確認できる。(もし、アカウントのない場合は、アカウントを登録する必要がある)

    birdsplot_05.JPG
    birdsplot_06.JPG
  5. 【ウェブアルバム】の画面で、新しく作成したアルバムをクリックすると、アルバムにアップロードした写真のサムネイルが表示される。この画面の右フレームの下の方にある、【Google Earth で表示】をクリックすると、作成された KML ファイルを保存するかどうかの下のようなポップアップが開くので、適当な名前をつけて適切なフォルダーに保存する。
    Picasa_webalbum_5.JPG
  6. ここで、Picasa と Picasa ウェブアルバムを閉じて、新たに【 Google マップ】を開く。左上の【マイマップ】をクリックし、【新しい地図を作成】画面を開く。新しく作る地図のタイトルを入力し、【インポート】をクリックするとインポートするファイルを指定する画面がでるので、先程保存したKML ファイルを指定してアップロードすると下のような画面になる。
    この時、Internet Explorer では、
    "Bad request"
    "Your client has issued a malformed or illegal request"
    というエラーが出て、うまくいかないことがある。
    Google のブラウザー Google Chrome では問題なくアップロードするので、こちらを選んだほうが良い。やはり、Google ソフトは Google 同士の方がうまく動くようだ。
    birdsplot_07.JPG
  7. この画面では小さな写真が、その写真を撮った地点にマークになっているが、これでは分かりにくい。
    この小さな写真をいろいろなアイコンに置き換えることができる。
    基本アイコンにもいろいろと用意されているが、マイアイコンを設定することもできる。ネットでサーチするとフリーのアイコンがいろいろと提供されており、これらを追加して(私の場合、レンタルサーバーにアイコンの gif ファイルを転送しておいた)使用することができる。今回の地図では、ツグミのアイコンが見当たらなかったので、体型のにているムクドリのアイコンを使ってみた。
    方法は、編集モードで、ふき出しにでている小さな写真をクリックすることで、置き換えることができる。(Google Maps ヘルプを参照)

    GoogleMap_4.JPGbirdsplot_08.JPG
  8. また、ふき出しにでてくる HTML のコードをいじることで、表示を変えることができる。
    アイコンをクリックして出てくる表示のサムネイル写真をクリックするとより大きな写真がウェブアルバムに表示される。
    作業途中でも保存しておけば、再度マイマップから該当する地図を開けば、編集を再開することができる。birdsplot_09.JPG
  9. 今回の目的は、【野鳥写真のサムネイル】からリンクする野鳥撮影地点プロット地図を作成しリンクすることであるので、ページに貼り付ける HTML コードが必要である。
     このコードは、先程の Google Map の右上にある リンク ボタンをクリックすると貼り付けるコードが表示される。この時、埋め込み地図のカスタマイズとプレビューの表示が出るので、これをクリックすると下のようなカスタム画面が出るので、地図のサイズなどをカスタマイズすると、この画面の下の方に、HTMLコードが表示される。

    birdsplot_11.JPG
  10. このHTMLコードを多少編集して、このエントリーに貼り付けて表示させたのが、下のプロット地図である。
    このプロット地図は、Google Map そのものであるので、航空写真に変えたりすることができる。また、マーカー(小鳥のアイコン)をクリックすると、その地点で撮影した写真が表示される。下の地図で試して欲しい。

 この方法を使って、記録すべき情報を充実したいと思っている。



Nikon GPSユニット GP-1
Nikon GPSユニット GP-1
posted with amazlet at 11.01.08
ニコン (2008-11-28)
売り上げランキング: 4847


2010年10月12日

隠居の探鳥ウォーク:堺市で撮影した秋の野鳥たち


 10月の連休ころになって秋晴れの日が増え、近場に秋を探しに出かけた。ドック入りから帰ってきた望遠レンズの ΣAPO 120-400mm を NikonD90 につけて、GPS ユニットをベストのポケットに忍ばせた。主たる目的とする被写体は野鳥である。二十四節季の寒露となっても今年は暑さが残っているが、それでも少し涼しくなって、鳥の姿がチラホラと増えてきたようである。

 仁徳御陵となりの大仙公園には家内が急遽作った弁当持ちで、ハーベストの丘の花や野菜の直売所には家内が寄せ植えの花を買うというので付き合った。このお付き合いで、今まで写真に収めることのできなかったビンズイ・ヤマガラを初めて撮ることができた。この4日間にはその他に、ホオジロ・ヒヨドリ・セグロセキレイ・キセキレイ・マガモ(エクリプス)・カルガモ・カイツブリ・カワウ・コサギ・キジバト・アオサギ・モズ・シジュウカラ を記録に残すことができた。身近なところにも、結構鳥の姿は見られるのだ。
 NikonD90 では、ISO感度自動制御の設定ができる。この機能は、木立のなかでの小さな鳥を撮影するときなどには、威力を発揮してくれる。初めて撮ったヤマガラは、ISOが最高の3200 となっていた。

 前回のエントリーで記載した方法で、Google Map に撮影場所を野鳥のアイコンでプロットしてみた。野鳥のアイコンは、【Checking Mode】さんのものや、【鳥好きの部屋】さんのものを使わせてもらった。【鳥好きの部屋】さんのものは、そのまま使うと背景が白くなるので、FireWorks を使って透明にした。透明化の方法は、Adobe FireWorks のヘルプに詳しい。記録のために、リンクしておきたい。

 下の地図の野鳥アイコンをクリックすれば写真をみることができるが、もっと詳しくは写真を【Ctrl】キーを押しながらクリックすると別ウィンドウに表示される Web Album をご覧いただきたい。
カワセミなど撮った場所を教えたくない場合は、このような表示は問題だろうと思うが、今回の表示はありふれた場所のありふれた鳥なので、問題はないだろうと考えている。むしろ、記録のためにはおもしろいのではと思っている。


より大きな地図で(Google Map で) 堺市で撮影した秋の野鳥 を表示

2010年10月11日

隠居のパソコン備忘録:Google Maps と Picasa を使って位置情報を持つ写真を掲載する

 GSPユニット:GSP-CSK1 を手に入れたのをきっかけに、Picasa で撮影場所を記録することを試みてきた。
 撮影場所をマークした写真を表示する地図をブログに掲載するには、EveryTrail というサイトの【CREATE TRIP】の機能を使った。自分の写真情報が入ったtripという地図を作成し、これをアップロードしてきた。 結果としては、コマーシャル色の強い EveryTrail のサイトに自分の地図や写真を預かってもらうことになる。

 他に方法がないかとネットでググってみると、どうやら Google Earth を経由して、Google Map でブログに掲載できるような地図を作成できることが分かった。歳をとってすぐにやり方を忘れるので、備忘録として記録しておきたい。
  1. 写真に撮影地点の情報を取り込むのは、【隠居の写真整理:Picasa でGPS ユニットを使って撮影場所を記録する】で記載している 4.までの順序どおりである。
  2. 地図に掲載したい写真を選択して、Picasa の【ツール】 ⇒【アップロード】⇒【Picasa ウエブアルバムにアップロード】と選択すると、アルバムのタイトルなどを指定する下のスクリーンショットのようなアップロード画面が現われる。例えば、この画面で、タイトルを "Morning Walk at Oct. 8, 2010" としてアップロードすると新しいウェブアルバムが作成される。これは、Picasa の画面右上にある【ウェブアルバム】タグをクリックして確認できる。(もし、アカウントのない場合は、アカウントを登録する必要がある) Picasa_webalbum_1.JPG
  3. 【ウェブアルバム】の画面で、新しく作成したアルバムをクリックすると、アルバムにアップロードした写真のサムネイルが表示される。この画面の右フレームの下の方にある、【Google Earth で表示】をクリックすると、作成された KML ファイルを保存するかどうかの下のようなポップアップが開くので、適当な名前をつけて適切なフォルダーに保存する。Picasa_webalbum_5.JPG
  4. ここで、Picasa と Picasa ウェブアルバムを閉じて、新たに【 Google マップ】を開く。左上の【マイマップ】をクリックし、【新しい地図を作成】画面を開く。新しく作る地図のタイトルを入力し、【インポート】をクリックするとインポートするファイルを指定する画面がでるので、先程保存したKML ファイルを指定してアップロードすると下のような画面になる。
    この時、Internet Explorer では、
    "Bad request"
    "Your client has issued a malformed or illegal request"
    というエラーが出て、うまくいかないことがある。
    Google のブラウザー Google Chrome では問題なくアップロードするので、こちらを選んだほうが良い。やはり、Google ソフトは Google 同士の方がうまく動くようだ。GoogleMap_3.JPG
  5. この画面では小さな写真が、その写真を撮った地点にマークになっているが、これでは分かりにくい。
    この小さな写真をいろいろなアイコンに置き換えることができる。
    基本アイコンにもいろいろと用意されているが、マイアイコンを設定することもできる。ネットでサーチするとフリーのアイコンがいろいろと提供されており、これらを追加して使用することができる。野鳥の写真には、提供されているアイコンを使ってみた。
    方法は、編集モードで、ふき出しにでている小さな写真をクリックすることで、置き換えることができる。(Google Maps ヘルプを参照)

    GoogleMap_4.JPGGoogleMap_5.JPG
  6. また、ふき出しにでてくる HTML のコードをいじることで、表示を変えることができる。
    アイコンをクリックして出てくる表示のサムネイル写真をクリックするとより大きな写真がウェブアルバムに表示される。
    作業途中でも保存しておけば、再度マイマップから該当する地図を開けば、編集を再開することができる。GoogleMap_6.JPG
  7. 形を整えた地図は、地図の上に表示される【リンク】タグをクリックするとページに貼り付けることができる HTML コードが表れる。これを地図を表示させたいページに Copy&Paste すればよい。
    実際に下に HTML を貼りつけてみた。Google Map 作成で、Polyline も描くことができるので歩いた道も表示できるだろう。また、当然ながら Google Map の機能をもっているので拡大したり、航空写真モードで見ることもできる。
    サムネイル写真のクリックで別ウィンドウに表示されるウェブアルバムで編集することもできる。
    これらの機能をうまく使えば、旅行した時の写真整理などには有効であろう。


 ただ、この地図も、Google サイトで預かってもらうことになる。自分の有料のサーバーに負担をかけなくていいが、Google が個人の作品まですべて取り込もうとしているのではないかとの疑念もないことはない。


より大きな地図で Morning Walk at Oct. 8, 2010 を表示


2010年7月16日

隠居のGoogle利用:検索したGoogle マップをメール・ブログに貼り付ける

 先日同期(従って古希に近い歳の)の友人と食事をしたときに、ブログに Google Map を貼り付ける方法を聞かれた。彼はこの歳にしては、IT に理解があるほうだ。とっさに、Google Maps API の紹介をしたが、自分のサイトを持っていなければならないし、JavaScript の理解など敷居がいささか高い。

 ところが、簡単にできないものかとググってみると、それほど難しくなくできることが分かった。備忘録的に、使い方を記録しておこうと思う。この方法の一部を使えば、メールにも挿入することができる。
  1. Google マップー地図検索】を立ち上げて、目的とする地点を表示する。(例示として、私の住んでいる地区の堺市南区役所を取り上げた。)
    map_01.JPG

  2. この地図をメール送信するには、地図の右上にある【送信】ボタンをクリックする。すると下のスクリーンショットのようなポップアップ画面がでてくるので、送信する情報セレクト・ボックスで、この例の場合南区役所を選択し、送信先のアドレス、自分のアドレス(必須)、メッセージ欄に用件を挿入して、【送信】ボタンをクリックすると画像認証コードの入力が求められる。これを実施するとメールが送信される。 map_02.JPG map_03.JPG
     受信したメールは次のようなメッセージとなるので、長いURL部分をクリックすると最初に検索した地図が表示される。待ち合わせ場所などの連絡などに使えば便利そうである。
    map_04.JPG
  3. ブログに貼り付ける場合は、検索した地図の右上にある【リンク】をクリックする。するとブログに貼り付けるHTML コードが出てくる(下のボックス)ので、これを Copy&Paste で目的とするブログに貼り付ければよい。ただし、ブログによっては、HTMLタグを全面的に受け入れていないブログもあるので、その場合はブログには張り付けられない。
    私が試した範囲では、Yahoo Blog! では地図は表示されないが、ココログではOK であった。もちろん、私のブログが使っている Movable Type でもOKである。
    上のボックスに出ているURLをメールに貼り付けても、メールで送信できる。受信側は、同じような形で受け取ることになる。こちらの方が、画像認証をしなくていいのと、使い慣れたメール作成ページに張り付けられるので便利のように思う。
  4. ブログに張り付ける地図は、左サイドの案内(広告)部分はなくて、大きさはカストマイズできる。700x600ピクセルに拡大したものは、次のような感じである。(私のMovable Type でのブログ)
    張り付けられた地図は、Google Map を使うように、拡大・縮小ができたり、画面を移動できたりする。下の地図で試してみて欲しい。
    ただし、ふき出しの中に関連URLへのリンクを入れるとか、写真を表示するなどもう少し細かい作業は、やはり Google Maps API を使わなければできないようだ。


    大きな地図で見る

  5. マークやふき出しを表示させない方法は、【小粋空間】さんが提供してくれている。

    ただ、現在は改良されているのか、検索したときの状態のままをHTML 化してくれているようだ。



(追記:2010/7/23) 2010年7月23日現在:【送信】ボタンでのメール送信は 2. の画面がでてこないが、受信元にはURLで届いているようだ。画像認証がなくなっているので楽になっている。 3. の方法には、変化はない。

2010年6月24日

隠居のGoogle Maps API: データ用XML ファイルの編集

 友人や私が旅行に行ったところなどをプロットする地図を、Google Maps API を使って作成しブログに埋め込んでいる。
 作成する自分用の地図はいろいろとあるが、プロットする地点が少しずつ増えていく旅行地図--例えば、Studio YAMAKO 【国内旅行:2009】などでは、本体の Javascript はいじらずに、行った地点の経度・緯度などのデータを XML ファイルに追加して呼び込んでいる。

 ところがいつも使っているエディタの【秀丸】できちんと XML の文法に則ってファイルを作成しているはずなのに、Google Maps API が読み込んでくれない。原因を乏しい知識のなかでググって見たが、なかなか解決策が見当たらないまま1週間くらいが過ぎてしまった。ひょんなことから、完全な解決ではないが、原因がわかったので、この間に学習したことを備忘録として記録しておきたい。

 XML fileにエラーがある場合、Internet Explorer でこのファイルを開く(フォルダー⇒該当ファイルを右クリック⇒プログラムから開くで出るセレクトボックスから、Internet Explorer を指定する)と、次のようなメッセージがでて開けない。
Internet Explorer
XML_01.JPG
  Google Chromeでは、次のようなメッセージが出る。
Google Chrome
XML_02.JPG

ここで出てくるライン( line) とは、開始タグと終了タグで囲まれたテキストが行を表していると思われる。 それで推定すると、どうやら最後の行の外に、余計な何かが附加されているようである。

いつも使っているエディタの【秀丸】でXML fileを眺めつすがめつしてみたが、よくわからない。
【秀丸】XML_05.JPG
この表示の最後にある [EOF] は、End Of File のことであり、【秀丸】特有のものである。後で分かったことだが、この[EOF] が問題であった。

XML の文法が正しいかどうかは、W3CSchool のXML のセクションにある validator で確認できる。 この validator で【秀丸】で表示されるコードを確認すると no error と表示される。

XML file の中身は、Notepad でも確認できる。IE でエラーとなった XML file をNotepad で開いてみると、下のように【秀丸】の [EOF]部分が黒い四角形の文字となっている。Notepad で、この黒い四角形の文字を削除して保存して、IE で実行してみるとエラーは起こらない。
Notepad XML_07.JPG


 再度、"秀丸 EOF"でググってみると、【秀丸】への理解が十分でなかったことが判明した。【秀丸】の設定で、 [EOF] を保存しない、読み込むときに EOF制御文字を無視するとすると(【秀丸】で「その他」⇒「ファイルタイプ別の設定」⇒「保存の対象」「その他」「保存読み込み」で設定できる)、IE での展開でエラーは起こらなくなった。

 これらを調査するなかで、XML エディタとして【XML Notepad 2007】というユティリティがあることが分かった。今まで、XML file のエディタとしては便宜的に【秀丸】を使ってきたが、これが問題であった。まだ十分に理解出来ているとはいえないが、XML に特化した【XML Notepad 2007】を使うと下のスクリーンショットで分かるように非常に簡便となる。
 今後は、Google Maps API で使うXML file の作成は、このユティリティを使っていくつもりである。
【XML Notepad 2007】
XML_04.JPG

2010年1月18日

隠居のGoogle Maps:IE8 での不具合を回避する

 私のサイトを訪問してくれる人が使っているブラウザで最も多いのは、Internet Explorer 8(IE8) であり、私のパソコンにもIE8 をインストールしたことは、先日のエントリーで報告した。
そのときに気づかなかったが、Google Maps API を使って作った個人的な地図に置いた、地図を移動したり拡大・縮小するためのコントロール(例えば、GLargeMapControl )や通常の地図か航空写真かその合成かを選択するコントロール(例えば、GMapTypeControl)が機能していなくて、下のスクリーンショットのように表示されないことが分かった。
Maps_api_4.JPG
対処法についてネットサーチしてみると、IE8 と Google Maps API とは相性が悪いらしく、解決策が2つ示されていた。
  • (解決策1:DocType宣言の変更)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  • (解決策2:IE7互換モード用のMETAタグ挿入)
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 

 だが、この二つの解決策を試してみたが、一旦治ったように見えたものの最初だけですぐにコントロールが表示されなくなった。

 その他もいろいろと探ってみたが、送信者側ではどうやら方策はなさそうだった。何かヒントはないかと Google maps のページにいき「ヘルプ」を開いてみると、お薦め記事に、「Internet Explorer を使用すると問題が発生する」というのがあった。その記事を開くといくつかの項目のトップに、「キャッシュを消去する」とあり、これを実行すると、IE8 でも下のスクリーンショットのように、コントロールが表示され機能するようになった。
Maps_api_5.JPG
 訪問してくれる人に手数をかけることになるが、地図の表題に注意書きを入れることで、とりあえずの対処法とすることにした。
 これは、Google と Microsoft との間の問題ではあるが、早く解決されることを願っている。 

2010年1月14日

Google Maps API で旅行地図を作る:番号付きマーカーを使う

 昨年秋に、宍道湖をドライブしたときの旅行記はエントリーしたが、旅行地図を作ろうと思いながらできずにいた。
 最近新たな知識も取り入れて、宍道湖ドライブ地図を作製したので、備忘録として記録しておきたい。
 ツーリストがプロを使って作成していると思われる Google Maps API による地図には、数字や英字の入った Marker を格好良く使っている。私も使いたいと思っていたが、数字入りマーカーを作る方法がよく分からなかった。どこかに、できあいのものはないかと、"番号付きマーカー"というような言葉でネットサーチしていると、dLinkbRING というサイトを見つけた。そこで提供されている番号付きマーカーがもちろん使えるが、そのページに紹介されている、こんな便利なサイトにいくと自分の好きな色のマーカーに、数字あるいは英字を入れて作れるサービスが提供されていることが分かった。これで、次のような番号付きマーカーを作った。

         

 これらを地図上に表示させるには、AjaxTowerというサイトのGoogle Maps入門(Google Maps API)を参考にした。このサイトの「マーカーのアイコンを指定」の JavaScript コードを参考にして、以前に 「伊勢参り」 のエントリーで使った GoogleMaps API コードの JavaScript 部分に手を加えてみたのが、次のコードである。
<!-- 番号入りマーカーを表示する。-->
    <script type="text/javascript">
    //<![CDATA[

    var map;
    var marker1, marker2, marker3, marker4, marker5;

    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(35.430883,133.01199),10);
    map.setMapType(G_HYBRID_MAP);

    var markerIcon1 = new GIcon();
    markerIcon1.image = "http://n-shuhei.net/xxxxxxx/xxxxxx/marker1.png";
 //   markerIcon1.shadow = "./img/shadow.png";
    markerIcon1.iconSize = new GSize(35, 40);
 //   markerIcon1.shadowSize = new GSize(70, 56);
    markerIcon1.iconAnchor = new GPoint(18, 40);

    var markerIcon2 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker2.png");
    var markerIcon3 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker3.png");
    var markerIcon4 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker4.png");
    var markerIcon5 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker5.png");

    var opt1 = {icon:markerIcon1};
    var opt2 = {icon:markerIcon2};
    var opt3 = {icon:markerIcon3};
    var opt4 = {icon:markerIcon4};
    var opt5 = {icon:markerIcon5};

    marker1 = new GMarker(new GLatLng(35.469199,133.053875), opt1);
    marker2 = new GMarker(new GLatLng(35.44333,133.284674), opt2);
    marker3 = new GMarker(new GLatLng(35.444729,132.866077), opt3);
    marker4 = new GMarker(new GLatLng(35.401434,132.685919), opt4);
    marker5 = new GMarker(new GLatLng(35.377854,133.198242), opt5);
		
    var marker1_is_displayed = 0;
    var marker2_is_displayed = 0;
  var marker3_is_displayed = 0;
  var marker4_is_displayed = 0;
  var marker5_is_displayed = 0;

    function checkbox1clicked() {
      if (marker1_is_displayed == 0) {
        map.addOverlay(marker1);
        marker1_is_displayed = 1;
      } else {
        map.removeOverlay(marker1);
        marker1_is_displayed = 0;
      }
    }

    function checkbox2clicked() {
      if (marker2_is_displayed == 0) {
        map.addOverlay(marker2);
        marker2_is_displayed = 1;
      } else {
        map.removeOverlay(marker2);
        marker2_is_displayed = 0;
      }
    }
	
	function checkbox3clicked() {
      if (marker3_is_displayed == 0) {
        map.addOverlay(marker3);
        marker3_is_displayed = 1;
      } else {
        map.removeOverlay(marker3);
        marker3_is_displayed = 0;
      }
    }
	
	function checkbox4clicked() {
      if (marker4_is_displayed == 0) {
        map.addOverlay(marker4);
        marker4_is_displayed = 1;
      } else {
        map.removeOverlay(marker4);
        marker4_is_displayed = 0;
      }
    }

    function checkbox5clicked() {
      if (marker5_is_displayed == 0) {
        map.addOverlay(marker5);
        marker5_is_displayed = 1;
      } else {
        map.removeOverlay(marker5);
        marker5_is_displayed = 0;
      }
    }
   //]]>
    </script>


もともとのコードがどこかのページからいただいたコードだから、よく理解していない部分もあるが、なんとか上手く機能しているようである。 iconSize での数字を変えることで、番号付きマーカーの形が変わるようである。また、shadow もつけられる。
 このようにして「宍道湖私的観光地図」を作った。下は、その screenshot であるが、全体像は右メニューにボタンを置いたのでクリックしてみて欲しい。

なお、このGoogle Maps入門にある「マップタイプの選択」ページで示されている JavaScript, Google Maps API リファレンスのコードを参考に、初めに表示される画面を「地図+航空写真」(HYBRID) に設定した。
 Google Maps入門のサイトには、他にも少し学習すれば使えそうなインストラクションもあるので応用していきたいと思う。



2009年2月23日

隠居の写真整理:Picasa Web Album

 前回は Picasa の操作について記録したので、Picasa が導入されていることを前提に Picasa を使ってネット上に仲間へ写真を公開する操作について記録しておきたい。写真を公開するためには、Google のアカウントを作成しておく必要がある。
 
  • Google のアカウント作成は、Google のいろいろな画面ででてくるが、ここではホームページの下部にある「写真管理」をクリックする例で記録しておきたい。
  • クリックすると大きくなります
    1.  クリックすると出てくる Picasa ウェブアルバムの画面で、「アカウントを作成」ボタンをクリックする。
    2. するとアカウントを作成するために右のような必要な項目の入力画面がでてくるので、指示通りに入力する。
    3. 入力が求められるキャプチャーの英字は判別しにくいようだが、一字一字確認すれば大丈夫である。失敗しても、再度やり直せば新しいキャプチャーが表示される。
    4. アカウント作成が上手くいくと早速「Picasa ウェブアルバムの使用開始」の画面が表示される。


  • ウェブアルバムに写真をアップロードするのは、すこぶる簡単である。
  • クリックすると大きくなります
    1. 先ず Picasa を起動 する。
    2. 左のフォルダー表示から、共有したい写真のあるフォルダーを選択し、サムネイルを表示する。そのフォルダーにある写真をすべて掲載(アップロード)する場合は、フォルダー名を反転させて(選択して)、画面下のツールアイコンのアップロードをクリックすればよい。写真を選択してアップロードする場合は、サムネイルから写真を選択してアップロード・アイコンをクリックすればよい。
    3. すると「ウエブアルバムにアップロード」というポップアップ画面が出るので、右上の新規ボタンをクリックする。すると右のような画面に変わるので、適切なアルバム名と説明を入力する。
    4. クリックすると大きくなります
    5. 「アップロードするサイズ」は推奨の1600ピクセルでよいのではないかと思う。元の写真がこれより小さいサイズの写真であれば、そのサイズでアップロードされるようだ。
    6. 「このアルバムの可視性」では「非公開」を選んで、アップロードボタンをクリックするとアップロードが始まる。
    7. Picasa の画面の右上にある「ウェブアルバム」をクリックすると、先ほどアップロードした写真の1枚目が表示されたアルバムが現れる。
      このときのブラウザーは、Firefox となる。
    8. アルバムを Google サーバーにフリーで置けるのは、1GB までのようである。
    9. クリックすると大きくなります
    10. このアルバムの写真をクリックするとアルバムのサムネイルがでて、スライドショーなどで全ての写真を見ることができたり、「編集」ボタンを選択すると写真の並べ替えができたり、アルバムのカバー写真を変えたりできる。




    11. クリックすると大きくなりますalbum_18.jpg
    12. このアルバムを仲間に見てもらうときは、「共有」タブをクリックすると右のようなメールの送信フォームがでるので、送信先のメールやメッセージを付け加えて送信すればよい。メールを受け取った側(受信者)は、「アルバム表示」をクリックすると送信したときと同じ画面があらわれる。極めて便利にできている。
    13. この画面の右にある「このアルバムへのリンク」をクリックすると、下にURL を表示するボックスが現れるので、この中味をコピーして仲間へのメールに貼り付けて、メールを送信することもできる。


 Google が提供するソフトはフリーだし、ファイルも Google で預かってくれるので便利ではあるが、なんとなく Google に取り込まれているような気がしないでもない。

2007年1月 7日

Googleの進化:Web Mail GMAIL、マウスオーバー辞書

Google Maps APIなどを使わせてもらっているGoogleがどんどん進化している。紹介なしでは参加できないとあきらめていた Web Mail サービスのGMAILが、2006年8月23日から、紹介なしでアカウントが作れるようになっていたらしい。使用できるメールボックスの容量もどんどん増えるらしく、1月6日現在フリーで 2800MB まで使えるようになっている。私がこのブログなどに契約している有料のレンタルサーバーの容量が 500MB であるから、それと比べてもなんとも豪勢なサービスである。現在使っているメーラーの「Beckey!」には何の不満もないが、Web Mail のアドレスを一つ持っておくのもいいかなと早速登録してみた。ISP(eo光) のメールアドレス・レンタルサーバーでの独自ドメインメールアドレス・ケイタイのアドレスに加えて4つ目のアドレスになるが、転送設定をしておけば、インターネットにつながる環境ならどこでもメールが確認できる。Gmail の機能などについては、Gmail Maniacsに詳しい。Gmailでの過去メール表示は、受信と返信をセットで(スレッド的に)表示されるようになっている。これはなかなか便利である。
(2007/1/9:追記)  かって事務系の仕事をしていたころ、便利にしていたソフトがあった。Technocraftという会社の「Roboword」というソフトである。インターネットが広がり始めたころに、コンピュータ雑誌に紹介されており導入した。このソフト、英単語の上にカーソルを乗せると吹き出しがでて該当単語の英和辞書の内容が出る。凄いソフトが出てきたと IT の進歩に感激していた。英語の原文を読むときにずいぶん役にたった。それから約12年、IT がDog Year といわれる変革を続けている。「Roboword」そのものも随分進化を遂げているが、昔大枚をはたいたソフトが、Google のツールバーにマウスオーバー辞書という機能でついたのだ。ただし、どの程度の語彙をカバーしているのか分からないが、新しい単語などは辞書にないような気もするし、ブラウザー上の言葉にしか対応していない。しかし、最近インターネットで目にする中国語とかスペイン語などでも英語への辞書であるが対応している。このマウスオーバー辞書で、アクセス解析ツールの Artisan が職人という意味なのを初めて知った。
その他、もちろん本元の検索サービスもサイト内に取り込んでいる。どこまで進化するのか楽しみだ。ちょっと目が離せない。

2006年12月 1日

泉北から近い紅葉の名所:河内長野観心寺

 紅葉の綺麗な時期も桜の花と同じように短い。野暮用で過ごしている間に、情報を得ていた泉北近辺の紅葉の名所に行きそびれた。11月30日、牛滝の大威徳寺を再訪したついでに河内長野の観心寺に車を走らせた。やっぱり盛りは過ぎていたが、牛滝より赤味が多く残っていた。
 大威徳寺は現在は天台宗だが、近世以前は真言・天台兼学寺院だったそうだ。この観心寺も真言宗である。そういえば、どちらの寺院も境内の造りが高野山の寺院に似ている。楓が多く植えられているのは共通しているのかもしれない。また、観心寺は楠木正成が若いときに過ごしたようだ。観心寺の方が敷地は広く、駐車は無料だが拝観料を300円とられる。梅の時期にもう一度訪れたい。
kansinji_1.jpgkansinji_2.jpgkansinji_3.jpg





泉北近辺私的観光地図に掲載

2006年11月25日

泉北ニュータウン私的観光地図:Google Maps API Trial_5

 Google Maps API を使って、「泉北近辺私的観光地図」を編集し、右サイドメニューの「リンク」に置いてみた。自宅以外で場所を特定できる今までのエントリーにたどり着けるようにした。このようにすると、元のエントリーで表現している画像の表示に litebox が使えたり、MP3 Flash Player も動く。
 xml ファイルを再編集するだけで新たな地点とエントリーが追加できるので簡便になった。