すごく今風かつシンプルなCSSフレームワークを見つけたので紹介。どれくらいシンプルかって言うと、タイトルにもあるようにクラスなんかを全く使わず、ベースのHTMLタグの見た目やマージンなどを調整しているだけ。という感じ。
自分でCSS書くそのベースとして、すごく良いのではと思います。本サイトにあるように、normalize.cssと併用して使うといいっぽい。ゴテゴテしたCSSも便利な時は便利だけど、こういうのは非常に助かりますね～。
おしゃれですね。
このサイトの色味と似ているので、同じようなものが好きなのかも知れないですね。
本サイト：sakura
デモ：sakura demo
Ionic CLIは、コマンドラインから簡単にWebでの表示やプラットフォームの追加、ページの作成などを行えるツール。
バージョンが3になって書き方がちょっと変わった。なので、前回のことはじめ記事でも触れたけど再度まとめてみようと思う。
更新頻度についてはもはや触れないでいく。
最近Ionic2というものを使ってアプリを作ったりしている。最近は増えてきたとは言え、まだまだ歴史も浅く、日本語の文献も少なく試行錯誤してきたので、自分用に備忘録を残してみようと思う。このサイトの本来の使い方である。なお、Ionic2のバージョンは執筆時点で最新版の3.4を使用しているが、すべてが最新版ではないので細かな挙動の違いとかはあるかもしれない。参考程度に。
「Googleマップをサイトに表示する_Part1「基本とかマーカー画像とか」」
–
というわけでPart2。前回は目的の場所を中心に地図を表示し、マーカーを画像で表示したりした。
前回までの地図はこんな感じ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>Google Maps テスト｜SESERAGISEVEN</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="wrapper">
<div id="map"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="//maps.google.com/maps/api/js"></script>
<script>
$(function(){ // jQuery
var map;
var origin = new google.maps.LatLng( 33.590513, 130.421213 ); // 博多駅
map = new google.maps.Map( document.getElementById('map'), {
zoom: 18, // ズームレベル。大きいほどズームする
center: origin, // 地図の中心点
mapTypeId: google.maps.MapTypeId.ROADMAP, // 地図タイプ
scrollwheel: false, // マウスホイールでの拡大縮小を許可するか
scaleControl: true, // 縮尺を表示するか
});
new google.maps.Marker({
position: origin, // マーカーを立てる場所の緯度・経度
map: map, // マーカーを配置する地図オブジェクト
icon: 'img/marker_1.png', // 使用するアイコン画像のパス
title: '博多駅', // アイコンにオンマウスした時に表示される文字列
});
});
</script>
</body>
</html>
今回まずやりたいのは、上記の地図とストリートビューを連動させること。
仕組みは覚えてしまえば簡単。
サイトにGoogleマップを載せているところも今ではたくさんあるけど、そのやり方については結構高度な印象があって、Google公式ドキュメントを見てもブログサイトを見ても初心者には分かりづらかったので勉強してみた。それを備忘録として、自分なりに分かりやすく書いていこうと思う。備忘録って言葉を久しぶりに使った。このサイトのコンセプトなのにね。
なお、この記事はJavaScript、jQueryをある程度使える人を対象として書いていますが、コピペからちょっといじったりして使えたりすると思うので、好きにいじってみてください。
なにはともあれAPIを読み込む。これを読み込むだけでMapの機能が使える。ありがとうGoogle。
<script src="//maps.google.com/maps/api/js"></script>
この時、APIキーというものが必要になる。キーの取得やAPIの使用はすべて無料。勝手にAPI使わずに申請してねってことで取得しましょう。Googleのデータやリソースを全力で使わせてもらう感じになるので、キーはちゃんと取得しておく。でもこのサイトの説明が分かりやすいから丸投げする。
こうやって取得したキーをさっきのスクリプトに書き込む。
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></script>
ちょっと前まではキーの設定と一緒に「sensor」という設定が必要だったんだけど、今は必要ない。どうやら不要→必要→不要という流れらしい。ブレブレ。
これでGoogleMapsが使えるようになった。