まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:google

業務やプライベートでウェブアプリを作る際に colorbox を使う機会が少なからずあります。jQuery に対応したモーダルダイアログの軽量プラグインで、メイン画面にオーバーラップするダイアログ画面を呼び出し、ダイアログを閉じるまではメイン画面が使えなくなります。HTML 的な言い方をすると、ボックス領域の表示/非表示を切り替えつつ、ここが表示されている間は他の要素にアクセスできなくさせたい場合などに便利です。

加えて、個人的によく Google MAPs API を使った地図アプリを作っています。他にも多くの地図 API はありますし、実際に使うこともありますが、ストリートビューなど他にはない機能もあって、マンホールマップを始め、多くのアプリで Google MAPs API を活用しています。

今回紹介するのはこの2つを組み合わせて使う方法、つまり colorbox のモーダルダイアログ内で Google MAPs の地図を表示する方法です。特に考慮することなく普通に(colorbox で表示する領域の中に Google MAPs の地図領域を定義しておくだけで)使えそうな気がしていたのですが、どうもこれらの初期化処理時における相性があまりよくないようで、ちょっとしたコツが必要だということがわかりました。

この「ちょっとしたコツ」の結論は
・colorbox のダイアログを表示して、
ダイアログの表示が完了した後で Google MAPs を初期化してダイアログ内に表示する
という順序で実現する必要がありそうでした。一般的には HTML ページの初期化時に Google MAPs を初期化することが多いと思うのですが、colorbox と組み合わせて使う場合は、その初期化タイミングをダイアログの表示後に(ダイアログの表示が完了したことを検知した上で動的に)行う必要がありそうでした。


以下は具体的な実現方法です。まず jQuery や colorbox、Google MAPs API の JavaScript や CSS を一通りロードします(Google MAPs API をロードする際に API KEY の取得と指定が必要です):
  :
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?key=(your api key)"></script>
<link href="/css/colorbox.css" rel="stylesheet"/>
<script src="/js/jquery.colorbox-min.js" type="text/javascript"></script>
  :

HTML 内に colorbox で表示するモーダルダイアログ部分(id="mapModal")を定義します。ここは初期状態では表示されていてはまずいので display:none のスタイル指定をしておきます。またモーダルダイアログ表示した際にこの id="map_canvas" のブロックの中で Google MAPs の地図を表示することになりますが、初期段階では何も定義しません:
  :
<div style="display:none">
  <div id="mapModal">
    <div id="map_canvas" style="width:100%; height:520px"></div>
  </div>
</div>
  :

ではこのブロックをモーダルダイアログ表示するための colorbox のアクションを作成します。以下の例では <span> で括られたエリア(id="span1")をクリックした時に colorbox のモーダルダイアログを 90% x 90% でインライン表示するようにしています。加えてこのモーダルダイアログが表示されきった直後に $('#map_canvas').modalMap() が実行されるように定義しています:
  :
<span href="#mapModal" id="span1">ここをクリック</span>

<script>
$(function(){
  $('#span1').colorbox({
    inline: true,
    transition: 'none',
    width: '90%',
    height: '90%',
    onComplete: function(){
      $('#map_canvas').modalMap();
    }
  });
});
</script>
  :

↑この時の <span> 要素に href 属性を付けて対象モーダルの id を指定するのが肝のようです。。

最後にこの modalMap() 関数を定義して、この中で動的に Google MAP を初期化して表示するまでのコードを記述します:
  :
<script>
$.fn.modalMap = function(){
  var latlng = new google.maps.LatLng( 35.690625, 139.699788 );
  var opt = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true
  };

  var map = new google.maps.Map( document.getElementById( 'map_canvas' ), opt );
  map.setCenter( latlng );

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
};
</script>
  :

これで <span> 部分をクリックすると colorbox のモーダルダイアログを出し、ダイアログ内で動的にGoogle MAP の地図を初期化&表示する、という一連のコードが完成です:
2019090801

  ↓

2019090802

(↑わかりにくいかもしれませんが、地図部分はモーダルダイアログ表示されています)



2018年にマンホールマップでもっとも人気のあったマンホール蓋をベスト10形式で紹介します。また今年新たに投稿された蓋の中で最も人気があった「新人賞」と、今年最も多くの蓋画像を投稿いただいた方「最多投稿賞」を紹介します。


集計のルールとしては 2018/01/01 から 2018/12/20 までの集計期間における、PC およびスマホのブラウザから単独ページとしてのアクセス数を集計しています。ページビューとしての集計なので、例えば同じページの画面をリロードした場合は1回とだけカウントされます。

なお、過去4回の結果はこちらを参照ください:


2018 最多投稿賞

今年マンホールマップに最も多くの画像を投稿いただいたユーザーに与えられる賞です。実は今年の(も)マンホールマップに有効に投稿された全画像の大半が昨年も激しく一位を争った minamu4545 様と 42ER03 様の2名のユーザーによって提供されたものでした。今年も感謝の限りでございます。 m(__)m

今年も昨年を上回るレベルでの激しい1位争いの結果、昨年惜しくも2位だった 42ER03 様が今年1年間で 355 枚もの蓋画像を投稿いただき1位となりました!2016 年の王座に一年ぶりに返り咲きました。「ほぼ1日1枚」でした、ありがとうございます。 

そして今年もハイレベルな一騎打ちを演出いただいた minamu4545 様、ありがとうございました。来年もお二人の争いになるのか、はたまた新星が現れるのか? 楽しみにしたいです。

ちなみに私自身は今年は4位でした。毎年少しずつ順位が下がっていたのですが、久しぶりに順位上昇でした。今年は出張が多かったからなあ・・・、しみじみ


2018 新人賞

今年マンホールマップに投稿された蓋の中で、もっともアクセス数の多かった蓋画像はこちらでした:

市区町村投稿者画像
千葉県流山市minamu4545



千葉県流山市「流山おおたかの森」駅にも象徴される TX(つくばエクスプレス)とオオタカ、そしてツツジがデザインされた新しいデザインの蓋です。私個人も大学時代に流山市に住んでいたのですが、当時は TX がまだ走ってなくて、流山の新しい風景がデザインされた蓋といえます。2018年1月にマンホールマップ投稿いただいたこの蓋写真が1年間を通じてもっとも多くのアクセス回数を記録する新人蓋となりました。minamu4545 さま、2年連続の新人賞おめでとうございます!


2018 総合ランキングベスト10

いよいよ 2018 年マンホールマップ年間アクセス数ランキングを発表する時がやってまいりました。総合ランキング1位となる MVM(Most Variable Manhole) の座はどの蓋に!?


まずは 10 ~ 4 位です。といいたい所ですが、僅差の11位の蓋をどうしても紹介したく、独断で今年はトップ11を紹介させていただきます。というわけで第11位!

順位昨年順位市区町村投稿者画像
11 - 静岡県静岡市morimo_t


↑マンホーラーの枠を超えて話題になった静岡県静岡市の「ちびまる子ちゃんマンホール」(morimo_t 様提供)。さくらももこ先生がこのマンホールのためにデザインし、残念ながらその設置の直前に亡くなられたことで設置の中止も検討されたというものです。今月からマンホールカードの配布も始まり、9月にデビュー(=設置)したとは思えないアクセス数が記録された一枚でした。改めて、謹んでさくらももこ先生のご冥福をお祈り申し上げると共に、素敵なマンホールデザインを残していただいたことに感謝申し上げます。


では改めてトップ10を。第9位が同数で2点あったので、第9位!

順位昨年順位市区町村投稿者画像
92北海道岩見沢市yanapong


↑同着の9位、1つ目は昨年2位の北海道岩見沢市(旧栗沢町)、yanapong 様提供の「リスのクリちゃん」マンホールでした。昨年まで3年連続トップ3という快挙を達成した超ロングセラー蓋です。今年9位になったことで、4年連続トップ10入りという、これも前例のない大記録を打ち立てました。


もう1つの第9位!

順位昨年順位市区町村投稿者画像
9 - 埼玉県坂戸市minamu4545


↑2つ目の同着9位は埼玉県坂戸市、minamu4545 様提供の「さかつるちゃん」マンホールでした。さかつるちゃんは坂戸鶴ヶ島水道企業団のマスコットキャラクターで「みんなのところにおいしい水を運ぶ水の天使」なのだそうです。このマンホールもマンホールカード化されています。


第8位!

順位昨年順位市区町村投稿者画像
8 - 神奈川県愛甲郡愛川町minamu4545


↑8位はこれも minamu4545 様投稿作品、神奈川県愛川町の、中津川、鮎、ツツジ、そしてカエデが描かれたデザイン蓋。デザイン的にもコントラストが美しい1枚です。なおこのマンホールもマンホールカード化されています。


そして6位も同着でした。1つ目の第6位!

順位昨年順位市区町村投稿者画像
6 - 静岡県熱海市minamu4545


なんとこれも minamu4545 様提供、静岡県熱海市の「金色夜叉」貫一・お宮の有名なシーンと、なぜかバックに上がる花火をまとめてデザインした一枚でした。今だとDV事案になる可能性もあるシーンですが、そんな時代背景的な要素も含めて表現されています。なおこれもマンホールカード化されています。マンホールカード勢、強いな・・・・


もう1つの第6位!


順位昨年順位市区町村投稿者画像
6 - 大阪府吹田市dotnsf


↑もう1つの6位は、、、ごめんなさい。僕の投稿作品でした。大阪市吹田市の吹田スタジアム近くに設置された suitable city マンホールの1つで、ここを本拠地とする GAMBA 大阪のマスコット「ガンバボーイ」と、吹田市のイメージキャラクター「すいたん」がデザインされています。これもマンホールカード対象です。

吹田市はこの蓋ともう2つの観光名所をテーマにしたデザインマンホール3種を今年公開しました。その中の1つがこれなのですが、実は結構探すのが難しい場所にありました。ネタバレありで詳しく知りたい方はこちらも参照ください:
吹田市のデザインマンホール3種を探索(ネタバレあり)


第5位!

順位昨年順位市区町村投稿者画像
5 - 静岡県沼津市minamu4545


↑5位は静岡県沼津市、富士山と愛鷹山をバックに松とハマユウが描かれたマンホールカード蓋です。なおこれも minamu4545 さんの提供作品です。この作品は 2018 年9月に提供いただいたもので、今回ランキング入りした蓋の中では比較的短期間で多くのアクセス数を稼いだことになります。



第4位!

順位昨年順位市区町村投稿者画像
4 - 東京都港区dotnsf


↑4位は、、、ごめんなさい。またも僕の投稿作品でした。2年前になぜか1位になった東京都港区の知り合いの家の近くで撮影したエバタインバート蓋。なぜここにアクセスが集まるのか、2年経っても全くわかりません。 (^^;


2018 年のアクセス数ランキング、ここまで minamu4545 様の提供のデザイン蓋が席巻しています。マンホールカードの広まりもあって、カラフルなデザイン蓋がマンホールマップでも人気を博している様子がわかりますね。


この流れはベスト3にも続くのか? ドキドキの第3位!

順位昨年順位市区町村投稿者画像
31静岡県静岡市minamu4545


↑3位は昨年1位と新人賞を同時受賞した minamu4545 様投稿の静岡県静岡市「かけつけ消防3部隊カワセミーズ」の消火栓蓋でした。2年連続のベスト3入り、つまり2年間に渡って人気が継続した蓋ということになります。

実はここまでの結果を見てもわかるのですが、今年のアクセスランキングは新人蓋(今年投稿された蓋)が上位を席巻しています。そんな人気の入れ替わりの激しい中でのこの結果は素晴らしいです。



第2位!

順位昨年順位市区町村投稿者画像
2 - 静岡県島田市minamu4545


↑2位は静岡県島田市の大井川蓮台越をテーマにデザインしたマンホールでした。この作品も minamu4545 様に提供いただいた作品です。

「箱根八里は馬でも越すが、越すに越されぬ大井川」とも詠まれた難所・大井川の川越えの様子が富士山を背景にしてデザインされています。ドリフやダチョウ倶楽部だとこの後の展開が容易に想像できますね(笑)。


では 2018 年マンホールマップ年間アクセス数ランキング・第1位となった MVM(Most Variable Manhole) は!?

 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓


順位昨年順位市区町村投稿者画像
1 - 千葉県流山市minamu4545


↑1位 MVM は新人賞にも輝いた minamu4545 様提供の千葉県流山市、「流山おおたかの森」マンホールでした。2年連続の新人賞&MVM 同時受賞となりました。おめでとうございます。




ここ数年はマンホールカードの影響もあって、新しいデザイン蓋の人気が高いようです。今年のランキングにもその結果が表れています。そしてそれ故に、長い期間人気を維持し続けるマンホールがいかに貴重で素晴らしいかを改めて考えさせられる結果になりました。



そして、今年のランキングで無視できないのは minamu4545 さんの存在です。投稿数ランキングでは惜しくも2位でしたが、新人賞とトップ10内の7つ、そしてトップ3の全てを独占する形になりました。もちろんここまでの独占率を記録したことは過去にもありません。 現在のマンホールマップ人気蓋の多くをプロデュースしていただいております。本当に頭が下がります。


最後に開発者&運用者としての自分から。今年はマンホールマップサーバーが例年になく不安定であったと自覚しています。実はこのブログエントリを書く直前の 2018/12/21 にもサーバーダウンがありました。色々な事情(その多くはコストですが)からパブリッククラウドではなく自宅サーバーで運用しております。OS が落ちなければリモートメンテナンスできる環境は整えてあるのですが、今年はそのリモートメンテができなくなるケースが何度かありました。サーバー機、といっても普通のノートPCですが、の老朽化からディスクメディアが壊れ、冷却ファンが壊れ、これまでもだましだまし使ってきましたが、今年はその影響をユーザーの皆さんにかけてしまうことが多かったと反省しています。年末に新しい機材へ入れ替えを行い、少し安定することを期待していますが、そろそろパブリッククラウドへの本格的な移行も検討する時期かもしれない、と思い始めていたりします。 

一方で、今回の「新しい機材への入れ替え」は比較的スムーズに進んだと自負しております。自分のように自宅ネットワークを構築してサービスを運用する想定での工夫をしてきたつもりですが、今回のトラブル対応の中でやっとその成果を見せることができました(苦笑)。この辺りについては実績もできたことだし、近い内にまたブログで紹介できればと思っています。



では、来年以降もマンホールマップを宜しくお願いします。



グーグルマップは今やナビ代わりにも使えて非常に便利です。

この「グーグルマップでナビをする」という機能を一発で起動する URL を調べてみました。前提条件として GPS 機能が有効になったスマホのブラウザで起動し、現在地から目的地までのナビゲーションを行う画面にジャンプさせたいものとします。結論としては意外と簡単でした。

以下、いくつかのパターンの URL リンクを作成したので、このページを実際にスマホのブラウザで参照した後にリンクをクリックすると実際にナビゲーションを開始することができるので試してみてください。


【原則フォーマット】
具体例を以下に紹介しますが、原則的には以下のフォーマットの URL となります:
https://www.google.co.jp/maps/dir/出発地(/経由地のリスト)/目的地

出発地や経由地、目的地は 緯度,経度 で表します。

例えば(私の職場オフィスがある)東京の銀座シックスの位置は北緯 35.6696206 度、東経 139.7618279 度なので、35.6696206,139.7618279 と表現します。


【直接指定】
現在地から銀座シックスへの道案内は以下の URL です(経由地を指定していません):
https://www.google.co.jp/maps/dir//35.6696206,139.7618279

銀座シックスから東京タワー(35.658886,139.745787)への道案内はこちらの URL です:
https://www.google.co.jp/maps/dir/35.6696206,139.7618279/35.658886,139.745787


【経由地指定】
現在地から東京タワー(35.658886,139.745787)を経由して銀座シックスへ向かう道案内は以下の URL です:
https://www.google.co.jp/maps/dir//35.658886,139.745787/35.6696206,139.7618279

現在地から秋葉原(35.697850,139.771179)と東京タワーを経由して銀座シックスへ向かう道案内は以下の URL です:
https://www.google.co.jp/maps/dir//35.697850,139.771179/35.658886,139.745787/35.6696206,139.7618279


 

2017年のマンホール界(?)は、マンホールサミットマンホールナイトといった、定番となったイベントだけでなく、各種メディアでの紹介やグッズの発売など、例年以上に盛り上がった・・・いや盛り下がった感があります(マンホールだけに)。

そんなマンホールの盛り下がりの様子をウェブマーケティング的に、具体的にはグーグルトレンドツイッターを使って1年間の経緯を調べてみました。なんとなく「グーグルトレンドの使い方」みたいな内容になっています(苦笑)が、まあ専門分野ではないということでご容赦ください:


まずは単純に「マンホール」が検索された回数の推移をグーグルトレンドで調べたみたらこんな感じでした:
2017122401


年末の山は 12/3 の週で、これはまさに「マツコの知らない世界」でマンホールが取り上げられたタイミングと一致しています。テレビメディアの影響の大きさを改めて感じますねー。

で、問題はその時をも上回る 4/30 週のトレンドスパイクです。このタイミングはマンホールサミットやマンホールナイトではないし、韓国ドラマ「マンホール」の放映にもまだ早い時期です。ではこのタイミングで「マンホール」が多く検索された理由は一体・・・

というわけで、この期間を更に詳しく調べてみました。5/3 にスパイクがあるのか・・・
2017122402


そして、この期間の関連キーワードを見ると「マンホール カード」となっていました:
2017122403


マンホールカードの発表や配布のタイミングではなかったはずなのですが、マンホールカードの検索回数が急上昇した日だったようです。「マンホール」と「マンホールカード」の検索トレンドを調べてもほぼ一致しているように見えます・・・:
2017122404


改めて5月3日周辺の「マンホール」または「マンホールカード」が検索された記録をツイッターなどで調べて(※)、、、やっと原因がわかりました! この日、フジテレビの「情報プレゼンター とくダネ!」で市川市のマンホールカードが配布された様子が特集された放送されたいたようです:
「情報プレゼンター とくダネ!」 2017年5月3日(水)放送内容


そしてその結果が上記の検索スパイク、となったようでした。朝の情報番組、恐るべし!


※ちなみに、ツイッターで期間を指定して検索するには、公式ページの検索ボックス内に
since:2017-04-30 until:2017-05-07 マンホールカード
のように指定して検索すると実現できます。ちなみに上記例は 2017-04-30 ~ 2017-05-06 内に「マンホールカード」がツイートされた様子を検索しています。since の日付は指定日を含み、until の日付は指定日を含まないようです。


とりあえず、こんな感じでグーグルトレンドツイッターの検索機能を使って簡単にキーワードの検索トレンドを調べることができます。年の瀬にちょっとしたウェブマーケティングの勉強も兼ねて、皆さんが興味ある物事や、出来事、イベントなどの1年間のトレンドとその背景を調べてみてはいかがでしょう?

根がケチなせいか、お金に関する理不尽な請求には泣き寝入りしないようにしています。4年ほど前に Google Wallet 経由で見に覚えのないスマホゲームのアプリ内課金が請求された時は(そもそも日本に窓口がなかったことも問題だと思ってましたが)英語でやりあいました。その時の経緯はこのブログでも紹介していました:
Google Wallet の不正利用?
Google Wallet の不正利用?(続き)
Google Wallet の不正利用?(続き2)
Google Wallet の不正利用?(続き3)
Google Wallet の不正利用?(続き4)
Google Wallet の不正利用?(解決編)

一応 Google の名誉のために言っておくと、この時の Google の対応はとても真摯で協力的でした。むしろその先のクレジット会社の対応がまったく非真摯的というか人の話を聞いていないかのような対応で解決が長引いてしまったという印象でした。


さて、先日お盆に実家に帰った時に団欒が凍り付くような事件がありました。自分が当事者ではないことと、現時点で相手の言いぶんをちゃんと聞いているわけではないので詳しく書くことは避けますが、高齢者である自分の家族の1人が大手携帯キャリアのスマホを契約した際に、明らかに不要な高額オプションを付帯契約させられていた、というものでした。

もともといわゆるガラケーを使っていたその家族がスマホに機種変更しました。ここまでは本人の意志でもあり問題ありません。ところが実際には以下の3回線を追加で(計4回線)契約させられていたのでした:
 ・(メインスマホとは別の、壊れた時の代替機として)スマホ1回線
 ・タブレット1回線
 ・「家に置くだけで家の中で無線LANが使える」ようにする******エアー1回線

ちなみにその家族は新しい回線を契約した認識はなく、「ぜんぶ付属品だと思った」とのこと。その結果の4回線契約です。本体の割賦支払いもあるので毎月の支払額はウン万円、という感じ。24回払いと36回払いが混在していて、全部キレイに解約するのがとても面倒、というあくどいやり方です。

詳しくは自分が明日、店頭を訪ねて先方の説明を聞いてくるつもりですが、それにしてもあまりにもおかしな理論です。まず「代替機」と説明された(らしい)2台目のスマホ。代替機なら回線契約は不要のはずだし、後述の無線LAN機器を契約したなら、代替機として使うまではそちらを使えばいいので、どう考えても回線契約は不要のはず。 また「タブレット」については本人は契約した認識すらありませんでした。思い出しながら書いているだけでイライラが再発しそうだ。。

そして「なんたらエアー」とかいう無線LAN機器、これは自分が家族の部屋に無線LANを設置しているのでそもそも不要なもので、どうもこれが自宅に存在していることを店員に伝えていたにも関わらず、言いくるめて契約させられた模様。なぜこれが要ると思ったのだろう・・・


自分がこの契約のことを知ったのは機種変更の契約から8日目でした。ちょうどクーリングオフができなくなるタイミング。でもこちらからは「これはクーリングオフとかいう問題ではなく、明らかに不要なものを買わせたのだから、再度説明した上でメインの1回線以外は違約金なしで契約を取り消すべき」という主張を伝えています。

詳しくは話しませんが、全く準備せずにいきなり乗り込むわけではありません。ある程度戦う準備はした上で明日店頭に突撃訪問してきます! 言いたいことは山ほどあるのですが、解決してからにしようと思っています。訪問の結果はまたいずれ。


前回は4年くらい前に、上記のような半年以上に渡る気の長い戦いをクレジット会社とやってきて不正請求分を取り戻しました。某携帯キャリアの○○○○○○、You are next!
usflag9sm



このページのトップヘ