明日の京都を歩く

京都を観て歩いた記録。GPSと写真でインスタ映えポイントもよく分かる、京都を観光する人のためのサイトです。

*

9.「ログつく郎」を起動

A.ログつく郎の準備
ここまで来てやっと「ログつく郎」を起動する子が出来ますが、ちょっとその前に環境の確認…。
この時点で使用する写真(メイン・フォトとサブ・フォト)を選び終えて、それぞれのファイルはパソコンの”D:\PhotoData\メイン・フォト”と”D:\PhotoData\サブ・フォト”に保存していると仮定します。
また、HP(ブログ等)で使用するサーバーはblog.sample.comで、その下の/data/photoに写真をアップロードする事とします。
では、実際に「ログつく郎」を開いてみましょう。

最初に「ログつく郎」を開いた時、上の方に「セキュリティの警告」が表示されますので、その右にある「コンテンツの有効化」をクリックしてください。これをクリックしなければ、実際の処理が出来ません。それが終わればまず、操作パネルシートの右側にある、各項目から説明してきます。
「ログつく郎」のダウンロードがまだの方は、こちらからダウンロードのページへ行けます。

コンテンツの有効化

コンテンツの有効化

 

B.操作パネルの設定項目について
画像保存サーバー
HPやブログのファイルをアップロードするサーバー名です。この図の例ではblog.sample.comがサーバー名です。注意していただきたいのが、これは画像を保存しているサーバーになります。利用しているブログとは別のサーバーに画像を保存している場合は、その別のサーバーの名前をここに入力します。

画像保存ディレクトリ
サーバー上で写真を保存しているフォルダの場所です。この図の例ではサーバー直下にdataというフォルダがあり、更にその下にphotoというフォルダがある事になります。(パソコンではメイン・フォトとサブ・フォトを分けて保管しなければなりませんが、サーバー上では分けずに同じフォルダで保管します)

例えばこのサーバーのディレクトリにIMG001.jpgとうファイルをアップロードした場合、ブラウザのアドレスに以下のように入力すれば写真が表示されます。
http://blog.sample.com/data/photo/IMG001.jpg
この例では青文字部分が画像保存サーバーで、赤文字部分が画像保存ディレクトリになります。

メイン・フォトのパス
メイン・フォトが保存されているパソコン内のフォルダの場所です。この図では”D:\PhotoData\メイン・フォト”にメインの写真を置いている事になります。

サブ・フォトのパス
サブ・フォトが設定されているパソコン内のフォルダの場所です。この図では”D:\PhotoData\サブ・フォト”にサブの写真を置いている事になります。

KMLファイル用タイトル
ここで設定した文字がGoogleMapでのKMLファイル用レイヤーの名前となります。最初はどのような名前にしたら良いか分からないと思いますので、ここではとりあえず記事の名前、例えば「○○から□□寺まで、紅葉を満喫するコース」といった名前にしておいてください。基本的に空白は不可ですがタイトルによってエラーになるような事はありません。

KML用説明文
KMLファイルの解説文ですが、現在のところはコメントとして入力するぐらいで、空白でもかまいません。

埋め込み用URL
サイトでGoogleMapを表示する際に使う項目です。ここは「10.GoogleMap」で設定しますので、最初は空白で構いません。

リンク用URL
これもサイトでGoogleMapを表示する際に使う項目です。ここも「10.GoogleMap」で設定しますので、最初は空白で構いません。

C.操作ボタンについて
GPSデータ取り込
メイン・フォトのファイルを読み込んで位置情報を抽出してシートに書き込みます。この時「メイン・フォトのパス」の設定が正しくないと、正常に読み込めません。この処理は一番最初に実行しておかなければなりません。

ファイル追加
メイン・フォトとサブ・フォトを関連付ける設定シート、「表示ファイル名」シートに各ファイル名を自動的に書き込みます。但し、どのように関連付けるのか、使用者の意図をコンピューターでは完全に理解できませんので、メイン・フォトとサブ・フォトのファイル名を順番に比較していき、メイン・フォトの名前よりもサブ・フォト(0個から7個までの指定可能)の名前の方が後にくるのであれば、全て直前のメイン・フォトに関連付けます。

ちょっと分かりにくいと思いますので、下記の様な例を見て下さい。
例えば次のようにメイン・フォトとサブ・フォトを選んだ場合…。
メイン・フォト IMG001、IMG006、IMG010、IMG013、IMG017
サブ・フォト  IMG002、IMG003、IMG005、IMG011、IMG012、IMG015、IMG018、IMG020、IMG025、IMG026、IMG030

このファイル追加処理を行う事で次のように設定されます。
IMG001IMG002、IMG003、IMG005
IMG006
IMG010IMG011、IMG012
IMG013IMG015
IMG017IMG018、IMG020、IMG025、IMG026、IMG030

例えばサブフォトIMG002、IMG003、IMG005はメイン・フォトIMG001よりも順番が後になりますので、IMG001に関連付けられます。IMG011、IMG012IMG001の後になりますが、IMG010により近いファイル名なのでこのIMG010に関連付けられます。
なお、この処理だけでは対応できない場合、例えばIMG020IMG013に関連付けたい場合は、次の2つの方法のどちらかで対応できます。

(1).ファイル追加処理の前にファイル名を変更する。
この方法では事前にIMG020IMG015aと変更しておけば、その後の処理で自動的にIMG013IMG015、IMG015aとなります。

(2).ファイル追加処理終了後、「表示ファイル名」シートの内容を手作業で書き換える。
これは「表示ファイル名」シートのセルの値を直接手入力で書き換えて、下記のようにします。
変更前
IMG013IMG015
IMG017IMG018、IMG020、IMG025、IMG026、IMG030
変更後
IMG013IMG015、IMG020
IMG017IMG018、IMG025、IMG026、IMG030

ここで注意ですが、この処理はパソコン内でファイル名を順番に並べてからそれぞれ比較して、関連付けを決めて行きます。ですのでファイル名が「駅で撮影.jpg、門前で撮影.jpg、本堂前で撮影.jpg」などの日本語であるとか、「Photo.jpg、Shashin01.jpg、Kyoto01」などのように、バラバラなファイル名である場合は順番に並べる事が出来ませんので、関連付けの処理が行えません。その場合は全て手作業で「ファイル名表示」シートに入力していく事になります。

入力フォーム表示
各写真に対するタイトル・ラベル・キャプション・案内文などを入力するフォームを表示します。詳細は下記の次項目を参照して下さい。

KMLファイル出力
GoogleMapでマーカーを表示させるための設定ファイルを出力します。

HTMLファイル出力
入力フォームで入力した内容をHTMLファイルの一部として出力します。

D.入力フォーム表示
ではさっそく入力フォームを開いて作業を開始します。
なお、入力フォームを使用する前に以下の項目を設定・実行しておいてください。
・操作パネルの右側の設定項目のうち、メイン・フォトのパスとサブ・フォトの設定が終わっている事。
・「GPSデータ取り込」ボタンをクリックして(確認メッセージが出たらOKをクリック)処理を実行ください。
・「ファイル追加」ボタンをクリックして(確認メッセージが出たらOKをクリック)処理を実行ください。
それらが完了した後「入力フォーム表示」ボタンをクリックし、入力フォームを開いて各項目を入力していきますが、その前に入力フォームの説明を行います。

入力フォーム

入力フォーム

 

行数・列数
一番上に「只今●行目●列目」として表示される項目です。これは「表示ファイル名」シート上のどの写真を表示しているかを示しています。1行目1列目はシート上では一番左上のファイルになります。(この行数・列数は直接変更する事は出来ません。矢印ボタンをクリックすれば自動的に変更されます。)
例えば「表示ファイル名」シート上に以下のようにファイル名が関連付けられている場合は…。
IMG001IMG002、IMG003、IMG005
IMG006
IMG010IMG011、IMG012
IMG013IMG015
IMG017IMG018、IMG020、IMG025、IMG026、IMG030
この例で言えばIMG001が1行目1列目となります。IMG002は1行目2列目という事になります。そしてIMG006は2行目1列目となります。

タイトル
これはサイトに表示される「タイトル」を書き込みます。詳しくは下の図を参照して下さい。

ラベル
これはサイトに表示される「ラベル」を書き込みます。詳しくは下の図を参照して下さい。
尚、このラベルを入力しないで矢印ボタンをクリックしたり、改行をすると、入力した内容は保存されません。必ずこのラベルを入力してください。
また、タイトル・ラベルとも各行につき1つとなります。ですので1行がIMG001IMG002、IMG003、IMG005の4枚の写真で構成される場合は、それらの写真に相応しいタイトル・ラベルを入力して下さい。

タイトルとラベルの使い分けについては特に制約はありません。私はタイトルについては場所を表すようにし、ラベルについては各写真共通の内容を入力しています。
例えば、〇〇寺を訪れた際の内容をメイン・フォト3つで説明するとした場合…。
メイン・フォト   サブ・フォト   タイトル    ラベル
———————————————————————————–
IMG001      省略        ○○寺1   ○○寺に到着
IMG006      省略        ○○寺2   山門を見上げる
IMG010      省略        ○○寺3   庭園散策

というような入力をしています。

Caption
これは各写真については簡単な説明です。写真1枚について1つのキャプションがあります。

Alt
HTMLで定められている属性の一つで、画像ファイルが表示されない場合に、Altで設定された文字が表示されます。なお、この欄を空欄にした場合、自動的にCaptionに入力した内容が反映されます。

Title
これもHTMLで定められている属性の一つで、吹き出しチップを表示させるものだそうです。上記の「タイトル」とは全く別物です。ややこしくてすみません。(^^; なお、この欄を空欄にした場合、自動的にAltで入力した内容が反映されます。Altが空白の場合はCaptionに入力した内容が反映されます。

案内
これは実際にサイトに表示される説明文です。文字数とかに制限はありませんが、あまり長くすると見栄えが悪くなります。

矢印ボタン
↑↓←→の各ボタンは、移動して別の写真を表示する際に使います。↑X10や↓X10のボタンは、10行単位で移動できます。

改行ボタン
次の行の1列目に移動できます。

終了ボタン
入力フォームを閉じます。

タイトル・ラベル・Caption・案内を入力すると、実際のサイトではこのように反映されます。(私のサイトの例なのでCSSを使用しています。一般公開している「ログつく郎」では、レイアウトにTableタグを使っていますので、見え方は異なります)

なお、これらボタンにはエクセルファイルを保存する機能は無いので、作業を終了する時は必ず保存して終わって下さいね!

E .ファイル出力
入力フォームで全ての行・列の全ての項目の入力が完了したら、フォームを終了してから「KMLファイル出力」ボタンをクリックしてKMLファイルの出力を行います。出力したファイルはGPSDATA.kmlというファイル名で出力され、保存されるフォルダは「ログつく郎」があるフォルダと同じです。
但し、「KMLファイル出力」ボタンをクリックするまでに、「操作パネル」シートにある項目「画像保存サーバー」・「画像保存ディレクトリ」・「KMLファイル用タイトル」、この3つの設定を終えてなければなりません。

【補足】
KMLファイル(GPSDATA.kml )は本来、UTF-8という文字コードで作成しなければなりませんが、現在はShift-JISで出力されます。なのでGoogleEarthでこのファイルを開くと文字化けします。(GoogleMapでは今のところ正常に表示されてますが…。)
したがってこのファイルを使う前に、メモ帳などのエディタなどで一度開いてUTF-8に変更する事をお勧めします。
具体的にはメモ帳で一旦開いて、「名前を付けて保存」を選びます。そしてファイル名はそのままで、その下の「文字コード」でUTF-8を選んで保存します。ただこれだけです…。

UTF-8に変換

UTF-8に変換

 

←戻る  ↑目次  次へ→

公開日:
最終更新日:2017/12/24