Google mapを静止画としてウェブページに埋め込む Google Static Maps API

一つのウェブページに複数のGoogleマップを設置したい場合、
どうしても表示の重さが気になります。
あと現在のGooglemapはIE7、IE8などの古いブラウザには対応していないので
そのような古いブラウザでもGooglemapを表示したい場合にも役立つ?

Google Static Maps APIを使えば、
Googleマップを画像として生成してくれるので、高速、軽量で表示できます。
※ウェブ、Andoroid、iOSとそれぞれに無料で使える制限あり。
ウェブページの場合、
「マップのロードが 90 日間連続して 1 日 25,000 回を超過するまで無料」

くわしくはこちらで
https://developers.google.com/maps/documentation/static-maps/?hl=ja

APIキーの取得から

1)Googleアカウントを取得し、Google Developers Consoleにアクセス
https://console.developers.google.com

2)プロジェクトを作成

ホーム My Project_8

3)GoogleAPIを利用する

ホーム demo1602_7
4)Google Static Maps APIをクリック

Google Maps APIの中にGoogle Static Maps APIがあります。初期状態では隠れてるので、「その他」をクリックすると表示されます。

API ライブラリ demo1602_6
6)APIを有効にする

APIを有効にするをクリック
Google Static Maps API demo1602_5
7) 認証情報にすすむ(API KEYを作成)

「認証情報に進む」をクリック

Google Static Maps API demo1602_4

APIを呼び出す場所は「ウェブブラウザ(javascript)」を選びました。
「必要な認証情報:をクリック

認証情報ウィザード demo1602_3

8) APIキーを生成

名前の「ブラウザキー1」は特に変更しなくてもよいのかな。
APIキーを作成するをクリック

 

認証情報ウィザード demo1602_2

APIキーが生成されます。これをコピー

認証情報ウィザード demo1602

Google Static Maps APIを使う

基本のURL

parametersの部分に必要なパラメータを付加していきます

1)center (※必須)

地図の中心を座標やキーワードで指定する
キーワードはURLエンコードする
markers,path,visibleを別途指定している場合は省略可。

2)size (※必須)

生成する画像のサイズ[横width]x[縦height]で指定

幅300ピクセル、高さ240ピクセルの画像にしたい場合は
300×240

3)sensor(※必須)

GPS情報を取得してする場合はtrue,そうでない場合はfalse

sensor=true,
sensor=false

4)key(※必須)

取得したAPIキー

5)zoom

縮尺値(1~22)

6)markers

マーカーを表示

7)maptype

地図の種類を指定
・roadmap(通常の地図:デフォルト)
・satellite(航空写真図)
・ hybrid(roadmapとsatelliteの組み合わせ)
・terrain(地形図)

8)format

画像形式を指定できます
・png(デフォルト)
・GIF
・JPG

9)language

地図上のラベルの言語を指定できます。

英語の場合はen
日本語の場合はja

10) path

地図に線を引きます

11)visible

ちょっとよくわからず

Google Developersより

visible (optional) specifies one or more locations that should remain visible on the map, though no markers or other indicators will be displayed. Use this parameter to ensure that certain features or map locations are shown on the Google Static Maps API.

12)region

これも使いどころがよくわからず

Google Developersより

region (optional) defines the appropriate borders to display, based on geo-political sensitivities. Accepts a region code specified as a two-character ccTLD (‘top-level domain’) value.

例)ジブリ美術館

Google Chromeをカスタマイズして起動する覚書

Google Chrome(Windows)を設定を変えて起動したいとき

ショートカットのリンクにパラメータみたなものを付加します

SnapCrab_chromeexe - ショートカットのプロパティ_2016-1-26_12-9-55_No-00

 

設定前の状態

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”

Google Chromeを常にシークレットモードで起動する

–incognito を追記

追記後

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –incognito

GoogleChromeの設定を変えて起動(複数起動)

–user-data-dir=”c:¥任意の名前”

追記後

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –user-data-dir=”c:¥任意の名前”

Google Chromeのキャッシュの場所を変更する

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –disk-cache-dir=”D:\Google\Cache”

DドライブのGoogleフォルダ内のCacheフォルダに変更する

–(ハイフン二つ)の前には半角スペースあり

パラメータがいっぱいついてるURLのリダイレクト?

redirect1.php&no=数字

みたいなURLを

redirect2.php&no=数字

へリダイレクトする

 

 

recirect1.php&k=&c=(数字)&no=(数字)&uno=(数字)&nam=(エンコードされた日本語)

recirect2.php&k=&c=(数字)&no=(数字)&uno=(数字)&nam=(エンコードされた日本語)

 

\d+ は1文字以上の数字

[!-~]+ は1文字以上の半角文字

※+をつけると1文字以上の繰り返し

 

こちらのサイトを参考にさせていただきました

正規表現チェッカー ver3.0
http://okumocchi.jp/php/re.php

 

正規表現は難しいです・・・

スマホ・PCを判別してリダイレクトするまとめ

PC用ページとスマホ用ページが別々に存在する場合、
ユーザーエージェントで振り分けるのが一般的です。

方法は.htaccess , javascript , php といくつかあります。

.htaccess で自動的に振り分ける方法
一番よく使います。

こちらがとても参考に

AllAboutPC版とスマートフォン版サイトを自動振り分けする方法
http://allabout.co.jp/gm/gc/386483/3/

4行目のRewriteCond %{QUERY_STRING} !mode=pcは

というパラメーターが付与されていないときだけリダイレクトする
付与されている場合はリダイレクトしない

 

★スマホ用ページからPC用ページにリダイレクトする場合

使う機会はあまりないと思うが、検索結果でスマホ専用ページが、PC用のページより上位に来ちゃったからスマホページにアクセスしたらPCページに飛ばしたいときなど

その場合、3行目

に。

Javascript でスマホとPCを振り分ける

indexOf()メソッドは、指定したキーワードの発見位置を返す。
発見できなければ「-1」を返すので、0より上であればキーワードが発見できたことになります。

navigator.userAgentでユーザーエージェントを取得し値が「iPhone」だった場合

iPhoneだったときの処理

iPhoneじゃなかったときの処理

PHPによるスマホ、PCの振り分け

 

パラメータ付URLの振り分け

これが
パラメータ付きURLを、パラメータ付きURLへリ
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14108068759

参考にさせてもらったサイト
ユーザーエージェントによってPCとスマートフォン(iPhone / Android)を振り分ける方法いろいろ(PHP / JavaScript / .htaccess等)
http://html5-css3.jp/smartphone/pc-iphone-android-php-javascript-htaccess.html

.htaccessでPCサイトとスマートフォンサイト切り替え
http://www.kaasan.info/archives/1409

JavaScript とかによるブラウザ判定方法のまとめ
http://etc9.hatenablog.com/entry/20110927/1317140891

スマートフォン(iPhone/Android)のページ内振り分け
http://rfs.jp/sb/javascript/js_lab/smartphone_user-agent.html

一定時間おきにボックスを表示させるjQuery

何秒、何分おきにボックス(iframeでもよい)を表示させるjQuery。
動画サイトとかで、動画の中央に表示される広告みたいなのをイメージ。
一定時間でボックスを表示させるjQuery

こちらを参考にさせていただきました。

さくっと簡単!jQueryでコンテンツをオーバーレイ表示させる方法
http://liginc.co.jp/web/js/jquery/39777

【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。
http://on-ze.com/archives/341

HTML

CSS

.boxサイズ W718px、H438px、
#modalwin  W300px H250px
#modalwin,#closeのz-indexは必要かどうかは不明。

jQuery

この場合は、10秒間隔でボックス#modalwinを表示させています。

jQueryの読み込みも忘れずに

こっちでもいい

 

gulpでエラー Error: The `libsass` binding was not found

また同じことがあった時のために記録しておきます。

gulp でbuild しようとしたらエラーが出ました(Windows7使用中)

上記メッセージにもありますが、この現象はnode.jsのバージョンが変わった時に起こるみたいです。

node-sass をリビルドしてとあります。

これでOKです

 

 

jquery スクロールするとニュルっと出てくるこのページのトップへリンク

後でコピペする用に。

 

html

だいたい bodyにid=”top”つけてます。

<div class=”pagetop”>~</div>は </body>タグ直前あたりに

SCSS

CSS

 

jQuery

 

 

node.js のインストール nodebrewで OSX Yosemite

OSX Yosemite でnode.js をインストールした覚え書き。

nodebrew はmac用バージョン管理ツール

nodebrewをインストールする

こちらを参考にターミナルにコピペ

node.js 入れるなら nodebrew が超簡単
http://tacamy.hatenablog.com/entry/2013/02/10/141434

環境設定ファイルにパスを通す

nodebrewがインストールされたか確認する

node.js をインストールする

nodebrewでインストールできるバージョンを確認する

バージョンを指定してインストール
今回はv0.12.8をインストール

インストールしたバージョンの一覧を確認

どのバージョンのnode.jsを使うか指定

無事インストールできました!

Adobe Creative Cloudのインストール・アップデートでエラー U44M1I210

Adobe CCでインストール時のエラー対処について。
環境はOSX Yosemiteです。

スクリーンショット 2015-11-16 0.15.32

CreatveCloud Installerをダウンロードしてから、通常通りインストールしますが、なぜかインストールが41%とかでそのまま進まない。

キャンセルして再度インストールしようとしても同じ現象。

アドビサイトからインストールするといいみたいなことを聞いたのでその手を使ってみたら、インストールはできたけれど、エラーが。

ダウンロードしたファイルを抽出できません U44M1I210

スクリーンショット 2015-11-10 9.29.15

アップデートしなくても、特に問題ないのでそのままでもよかったんですがなんか気持ち悪いので一度すべてアンインストールして、

以下のページを参考にAdobeCreativeCloudCleanerTool.dmgをダウンロードして実行しました。

Creative Cloud Cleaner Tool を使用してインストールに関する問題を解決する
https://helpx.adobe.com/jp/creative-cloud/kb/cc-cleaner-tool-installation-problems.html

それで再度、インストールしてみたけれど、同じエラーが。

さらにググってみると、セーフモードでインストールするといいよという記事を見つけました。

OSXをセーフモードで起動するのは、Shiftを押しながら、電源オンするだけ。

セーフモードで起動後、インストール実行したところ、エラーなしでいけました!

ひとまずこれでスッキリ。

 

ちなみにインストールした各アプリをアンインストールするには、

アプリーケーションフォルダ内の各アプリにuninstallerがあります。

スクリーンショット 2015-11-14 9.12.59

OSX Yosemite にSass,Compassのインストールとエラー対処

長年愛用してきたmacbookpro(2008 early)に別れを告げるべく、ついに新型MJLT2J/Aを購入しました。
appleサイトでは、15.4インチ 2.5GHzは、282,800円(税別) 2015年10月20日現在。
Applecare protectionを付けたら、税込35万近くなります–;

この辺に円安の影響がでてるんでしょうか。痛いですね~
これを購入しようかと思いましたが、結局秋葉原のWinkさんで購入しました。

APPLE Mac ノート
MacBook Pro Retinaディスプレイ 2500/15.4 MJLT2J/A MJLT2J/A
https://www.winkdigital.com/item/index.jsp?pid=156292&stid=1

ヤマトの3年間延長保証もつけてみました。
過去に壊れた経験があるので。
そのときはヨドバシの延長保証で10万近くのものカバーしてもらいました。
アップル製品iphone以外は延長保証は3年までしかつけられないようです。
ここは残念だけど

昨日、無事商品が届き、現在セットアップ中^^

OSの起動の速さにびっくりしてます。
多分、電源押してから、1分かかってないんじゃないかと。
今までのmacbookproも愛着がありますが、新しいモデルってスゴイですね。

で、いろいろアプリをインストールしたりしていて、sass,compassをインストールするところでちょっとつまづき。

osxには、rubyはすでにインストールされていますので
一応、updateを。

環境によってはsudoつけないとパーミッションエラーになります。

Sassをインストール

バージョン確認

 

続いて同様に

すると、

 

のようなエラーメッセージが。
調べると、Command Line Developer Toolsをインストールする必要があるみたいでした。

すでにXcodeをインストールしていたので、Xcodeを起動し
Open Developer Tool->More Developer Tools

xcode

するとAppleDeveloperサイトのDownloads for Apple Developerページが開くので(要AppleIDログイン)
Command Line Toolsをインストール

command line toolインストール

スクリーンショット 2015-10-21 7.13.30

 

こちらのサイトを参考にさせていただきました

http://koukitips.net/mac_terminal_sass_compass/

MavericksでCommand Line Tools for Xcodeをインストールする
http://qiita.com/3yatsu/items/47470091277d46f3fde2