GPSのトラックデータを地図に描画してサイトに埋め込む方法

Webサイトやブログに Google Map を埋め込む方法
 
ロードバイクに、GPS機能を持つサイクルコンピューターを取り付けて走行すると、走行したコース経路がトラックデータ(軌跡)として記録される。このデータを地図(Google Map )上に表示し、サイトに埋め込む方法をまとめた。

コース地図をWebサイトに表示する方法を変更する

Google Adsense 審査対策
自転車で走行したのサイクリングコースを、
『GPSログ』から Google Map で
Webサイト に掲載する方法 。
 

今迄、自転車で走行したコースの地図を、『GPSログ』の .gpxファイル から HTML に変換して Webサイトに埋め込み、Google Map で見れるようにしてきた。
一つは、 Google Map で描画したものをキャプチャーし、画像として貼り付けてコース概要がわかるようにしたものと、もう一つは、地図そのものを埋め込み Google Map で詳細が見れるようにしたものの二つを掲載してきた。

 ~サンプルの掲載はスクリーンショットになるので省略~

wadachi012

nginxで、PCとスマホによって【サイトを振り分ける】方法

Raspberry Pi + nginx = Webサーバー
nginx で 【機器によってリダイレクト】 を試みる。
 

スマホ等、モバイル機器からアクセスがあった場合のみ、サブディレクトリーに構築したモバイルフレンドリーなブログサイトに自動的に接続するようにしてみた。尚、PCからのアクセスは、どちらのサイトにも自由にアクセスできることを前提とした。

nginxredirect010

nginxのリダイレクト設定で、スマホをサブディレクトリーに自動で誘導する。

Contact Form 7 のメールを Gmail の SMTP サーバーを使って送信

WordPress
外部のSMTPサーバを利用してメールを送信する方法
『WP Mail SMTP』プラグインのインストール
 
『Contact Form 7』を導入し、メールで問い合わせを受け取るようにしたのは良いが、Raspberry Pi で構築したブログサーバーにはメール環境がないため、メールが送信できない。そこで、 『WP Mail SMTP』と言うプラグインで、外部サーバー(Gmail の SMTP サーバー )を使って送信が出来るようにした。

1つのWebサーバー を 2つのドメイン で Dynamic DNS を運用

Raspberry Pi + nginx = Webサーバー
1つのWebサーバー を 2つのドメイン で運用
2つのドメイン で Dynamic DNS を運用
 
 
dynamicdns011
 
 
上記の2つのドメイン、
 ①.MyDNSで取得したドメイン → arakan60.mydns.jp
 ②.ムームーで取得したドメイン → arakan60.com
を、MyDNSのDynamic DNS で運用する方法を以下にまとめた。
 

問い合わせを受け付けるためのメールフォームの作成

WordPress
Google アドセンスの審査
『問い合わせフォームの設置』
 

Googleアドセンスの審査にパスするポイントの一つとして、『問い合わせフォームの設置』と言うのがあったので、『Contact Form 7』と言う ”問い合わせフォームのプラグイン” を導入し、メールでの受付を可能とした。

サイドバーにプロフィール(自己紹介)を表示させる方法

WordPress
Google アドセンス
『サイトの運営者情報の記載』
 

Googleアドセンスの審査にパスするポイントの一つとして、『サイトの運営者情報の記載』と言うのがあったので、サイドバーに ”プロフィール(自己紹介)” 欄を掲載することにした。

All in One SEO Pack の設定方法 と OGP の設定要領

WordPress プラグイン
All in One SEO Pack の設定方法

OGP(オープン・グラフ・プロトコル)の設定要領
 

「All In One SEO Pack」は、”SEO対策には必須のプラグイン” ということで導入した。又、このプラグインで「Open Graph Protocol(オープン・グラフ・プロトコル)」に関する設定も可能だったので、OGP対応もこのプラグインに任せた。
以下、これらの設定に関するログ。