サイト日記

◆リニューアルの残作業の処理
　前回の「一応」完了報告で残っていた作業の処理を進めた。
　そこそこの進展があった。
　以下、報告したい。

　◇Android OSユーザーの方には、古地図ナシのマップを利用していただく。
　　Android OSで古地図オーバーレイを表示できない理由は全く分からない。
　　ネットで検索しても、ヒットがない。

　　そこで、古地図を追加する前の「マップ」を残しておくことにした。
　　Android OSユーザーにはそれを利用していただくことにした。
　　ホーム画面に二つの「マップ」用ボタンを配置した。

　◇古地図の透明度を自由に変更できるようになった
　　マップに重ねた古地図の透明度を、随時、変更できるようになった。
　　スライダーを左右に動かして、「表示」ボタンをクリックすると透明度が変わる。
　　かなり透明にすると、下の現在地図が透けて見えるので、なかなかに楽しめる。

　◇古地図の画像の密度を縦横２倍に上げる
　　これから、ズーム・レベル「16」に合わせた画像ファイルを作成する。

　◇画面レイアウトを修正した
　　まずまずのレベルに修正できた。　　
■

投稿者: S.Musha 日時: 03:39 | パーマリンク

◆リニューアルが一応完了
　マップに新発田城の古地図をオーバーレイ表示しようと考えたのであった。。（1/10）
　中間報告（1/20）で述べた再挑戦構想とは、かなり異なる作業となった。
　それでも、目標は一応達成できた。（1/25）

　--・新発田城の城郭部分の古地図をGoogleマップにオーバーレイ表示できた
　--・マップ画面のボタンをクリックして表示/非表示を切替えられる

◆Android OSで動作しないので「一応」
　まだ「一応」の完成にとどまる。
　特に、　Android OSで、プログラムがうまく動かないのが痛い。
　リニューアル版の動作確認は以下の通り：

　--・Windows/Internet Explorer（Winパソコン）　OK
　--・Windows/Chrome　（Winパソコン）　OK
　--・iOS/Safari　（Apple iPad Air2、iPhone5）　OK
　--・Android/Chrome　（Android搭載のタクレット＆スマホ）　動作不可

　Androidで動作不可の結果は、かなり不可思議だ。
　--・Androidは、GoogleのOS
　--・Chromeは、Googleのブラウザ
　--・マップは、Googleのマップ

　おい、おい、Googleさんよ。どうなってんの？
　しばらくネットで情報を収集して検討するしかない。
　当面、旧版もアクセスできるようにしておこうか、と思う。

◆その他の「一応」について
　改修したい３項目：
　◇古地図の透明度を変更できるようにする
　　半透明の古地図画像を作ろうとしたがうまくいかなかった。
　　マップに重ねた古地図の透明度を変えようとしたが失敗。
　　透明（0）と不透明（1）の間の透明度（たとえば、0.3）が効くようにしてみい。

　◇古地図の画像ファイルの密度を上げる
　　画像ファイルは、マップのズーム・レベル「15」に合わせた。（予定は「16」だった）
　　ズーム・レベルを２倍の「16」にするとボケるので、ちょっとまずい感じだ。
　　ファイルの容量が４倍になるが、処理に問題なければ「16」に合わせようと思う。

　◇画面レイアウトの修正
　　レイアウトは、CSS3で設定している。
　　まだ不慣れなので、Windowsではいいのだが、iOS/Safariでは少々乱れる。
　　試行錯誤で修正する予定。

◆「新発田ガイドマップ」のバージョンアップ
　リニューアルが一応終わったので、次はバージョンアップ。
　新発田では、城下町の街路がほとんどそのまま残っている。
　その江戸期の街路を、Googleマップの街路に重ねて線を引いてみるとどうなるか。
　古地図の場合とは別のテクニックを使って試してみようと思う。
■

投稿者: S.Musha 日時: 17:07 | パーマリンク

◆「新発田マップ」のリニューアルを開始
　マップに新発田城の古地図をオーバーレイ表示したいと考えた。
　一応の作業構想はできていたので、一週間の予定で、スタートした。（1/10）
　結果は、１０日かけて、作業やり直しの状態となった。

　ただ、再挑戦の見通しはかなり明るい。
　試行錯誤を繰り返したお陰で、必要ななテクニックを取得できている。
　以下は、そのてん末。

◆古地図のお城部分の画像ファイルを作成
元にする古地図は、「新発田藩家中屋敷割図」（明治初年版）。
　これはきわめて明解な絵図なので、縮小画像にしても概ね読み取れる。
　城郭（本丸、二ノ丸、三ノ丸）部分の画像を作成した。

　城郭部分に限定したのは、以下の理由による：
　--・画像ファイルの容量を押さえる
　--・城郭部分は、現在のGoogleマップと良く一致しているので、重ね合せが容易
　--・城下町の部分は、縮尺も方位も不正確で、現在のマップとは重ねられない
　
　古地図画像をGoogleマップに重ねると、マップの移動、拡大・縮小に連動する。
　前回は、Googleマップのズームレベル＝14に合わせて、画像ファイルをさくせいした。
　ところが、見易いズームレベル＝15では、画像がボケて、16になると大ボケ。
　
　ズームレベルが一つ上がると縦横が各２倍になる。
　そこで今回は、ズームレベル＝16に合わせてファイルを作成することにした。
　画像の横縦は、800×800pixcelとなった。（前回は、190×190pixcel）

　画像をGoogleマップに正確に重ねる手順（今回）は以下の通り：
　--・Googleマップ（ズームレベル＝16）の表示画面をファイルに保存する
　--・Adebe Photoshop Element 11に読み込み、その上に古地図画像を読み込む
　--・古地図画像を半透明にして、重ね合わせを調整する
　--・本丸のお堀を基準にして、古地図画像を移動、回転、拡大・縮小する
　--・重ね合せがうまくできたら、画像から必要な部分を切り抜く
　--・回転で生じた周囲の余白部分を透明化する
　--・完成した画像をgifファイルとして保存する

◆古地図の画像ファイルをマップにのせる
　頼りにするのは、Googleのグラウンドオーバーレイ機能：
　--・半透明の古地図画像をのせると、下のGoogleマップが透けて見える
　--・画像は、マップの移動、拡大・縮小に連動する
　--・画面上に配置するボタンをクリックして、画像の表示・非表示を切替えられる

　この機能を利用する良いサンプルをwebで探すのに２日かかった。
　画像をマップに配置する北東端の緯度・経度を算出するJavascriptを書くのに４日間。
　画像をマップに表示するJavascriptを書くのに２日間。

　ついで、表示した古地図画像を非表示にしようと四苦八苦でギブアップまで２日間。
　ここは想定していたやり方ではダメで、他のやり方に替えることにした。
　結局、１０日間かけたが、公開できる成果は上がらなかった。
■

投稿者: S.Musha 日時: 00:01 | パーマリンク

◆ホームページ上にテキストの「ticker」を組込み
　電光ニュース的なメッセージ表示方法を変更し、組込んだ。
　これまでは、１文字ずつ右から左へ流すようにしていた。
　今回は、「ticker」という文字切り替え機能を利用した。

　Web上には利用用法のサンプルがいくつも公開されている。
　しかし、実際に使う肝心な部分は伏せられている。
　ようやく実用可能な内容の記事を見つけ、試行錯誤の末に、ホームページに組込んだ。
　
◆今後のホームページのリニューアル
　主要部分のリニューアルは完了したので、あとは随時対応していこうと思う。

　--・ホームページの看板ロゴ「ふるさと～くるくる紀行」の改修
　--・記事の見出し（タイトルと要約）の過去ログをポップアップ形式で表示
　--・モバイル表示（iPad Air2、Nexus7、iPhone5）の改善

（これから、「新発田マップ」に古地図を重ねて表示する機能を検討したい）
■

投稿者: S.Musha 日時: 23:50 | パーマリンク

◆ホームページを「HTML5」にバージョンアップ
　ホームページを「HTML5」で書き換えてた。
　基本のレイアウトは、概ね、従来のものを踏襲している。
　作業は大晦日から始め、正月三ヶ日を試行錯誤で過ごし、ほぼ完了した。

　--・テーブルでレイアウトしていたのを、スタイルシート（CSS3）に変更
　--・背景の画像を廃して、ウィンドウの右上隅に縮小表示するように変更
　--・Flashで作成したコンテンツを除去（ページ・ロゴと「ちあきなおみ～」）
　--・記事の見出し（タイトルと要約）のログを除去（ポップアップ形式で復活検討）

　--・電光ニュース的なメッセージ表示は、ただいま工事中

　新年から、切り替えてオープンできたので、まずは、初仕事を達成。
　今年は、やりたいこと、やるべきことが山積みである。
　いずれも完全に趣味の世界のことだが、一歩ずつ確実にこなしていくたい。
■

投稿者: S.Musha 日時: 18:42 | パーマリンク