2016年の6月からGoogleMapsAPIのサービスが、APIキー必須になったため
無料とはいえ、地図を設置するＷEBサイトを登録することが必須になりました。
そこで、代わりというには少し毛色が違うかもしれませんが
ルート検索などの機能はついていないものの、登録なしで自由にさわられる地図表示の仕組みとして
JavaScriptライブラリLeaflet.jsを使い、国土地理院が無料で公開している地理院地図のタイルデータを表示するサンプルを紹介します。
See the Pen Leaflet.jsで国土地理院地図を表示 by webdev (@webdev-jp-net) on CodePen.0
以前、GitのSSH接続ができなくなったときの対応として
ssh秘密鍵id_rsaのパーミッションは600という記事を書いたのですが
それを以ってしても Permission denied (publickey). エラーが出続ける事態が。
ssh-addコマンドで、SSHエージェントに秘密鍵を登録すると、解消されました。
$ ssh-add -K ~/.ssh/【Github用の秘密鍵】
“MacOS 10.12 SierraにしてからGitでPermission denied (publickey).” の続きを読む
iOS Safari 8, 9, 10 では
overflow-scrolling: touch; を指定している要素の親に position: fixed; を指定している要素があると
要素を最後までスクロールしたあと、さらにスクロールしようとする操作をしたとき
…つまり、バウンスが発動しようとしてfixedで阻止された瞬間に
画面が数秒間フリーズする不具合があります。
いろいろ試しましたが、行き着いた回避策は2つ
いずれかでした。
“iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ” の続きを読む
執筆当時の2017年5月は、gulpはバージョン3.9.1でしたが
ベータ版のgulp4が公開されていたので、それをローカルインストールしてプロジェクトを作成してみました。
gulp4をローカルインストールすると、package.jsonの記述はこのようになります。
"gulp": "github:gulpjs/gulp#4.0",
ですが、このまま普通に gulp コマンドでdefaultのタスクを実行すると
ローカルインストールしたgulp4ではなく、グローバルインストールしてあるほうのgulpでタスクが実行されてしまいます。
Google Mapsやカーナビゲーションで有名なゼンリン地図が採用している日本測地系基準の緯度経度と
国土地理院地図が採用している最新の測地系である世界測地系を相互変換するスクリプトです。
See the Pen convert latlng by webdev (@webdev-jp-net) on CodePen.0
gulp4を使用しているプロジェクトをnpm installから展開し、gulpのdefaultタスクを実行しようとすると
このようなエラーがでました。
$ gulp
[xx:xx:24xx Using gulpfile /xxx/gulpfile.js
/Users/xxx/.nodebrew/node/v6.1.0/lib/node_modules/gulp/bin/gulp.js:129
gulpInst.start.apply(gulpInst, toRun);
^
TypeError: Cannot read property 'apply' of undefined
at /Users/xxx/.nodebrew/node/v6.1.0/lib/node_modules/gulp/bin/gulp.js:129:19
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Function.Module.runMain (module.js:577:11)
at startup (node.js:160:18)
at node.js:445:3
調べてみると、gulp4とgulp-cliのバージョンが噛み合わないと出るエラーだと判明。
$ gulp -v [XX:XX:XX] CLI version 3.9.1 [XX:XX:XX] Local version 4.0.0-alpha.2
とりあえず、gulp-cliのバージョンを上げてみました。
$ sudo npm install -g gulp-cli
$ gulp -v [xx:xx:xx] CLI version 1.3.0 [xx:xx:xx] Local version 4.0.0-alpha.2
これで解決。
gulpのタスクも実行できるようになりました。
$ gulp [xx:xx:xx] Using gulpfile /xx/gulpfile.js [xx:xx:xx] Starting 'default'...
HEX（#ff000などの１６進数カラーコード）をrgbに変換するJavaScriptです。
HEX指定の色を、半透明にしたくてrgbaコードがほしい時に使いました。
See the Pen HEX <--> RGB by webdev (@webdev-jp-net) on CodePen.0
HEXは、R2桁+G2桁+B２桁が集合した6桁なので
この手順でRGBに変換できます。
HEXからRGBの逆パターンです。
InternetExplorer 11から、F12開発者ツールが新しくなりました。
増えた機能もそこそこありますが、ブラウザウィンドウのサイズを指定する機能は
このアップデートでなくなってしまいました。
意外とプレゼンやマニュアルなどに役立つんですよね、この機能。
私は今回、レスポンシブデザインの説明に使うキャプチャ撮影で必要に迫られました。
ブレークポイントの説明で、サイズをアバウトにできないため、px決め打ちでサイズ変更できなくて一瞬焦りました。
調べてみると、
ツールをインストールする方法や、ショートカットを作成する方法が該当。
う…ちょっと面倒だな。
前置きはさておき、発想を転換すれば
F12開発ツールのみで手軽にウィンドウサイズを変えられ事に気づいたのでご紹介します。
極論から。
InternetExplorerではHTML5の<main>タグは使えません。
検索するとたくさん該当するのが
IEはデフォルトで<main>タグをinline要素として認識するから、CSSが意図したように適用できないという情報です。
そのため、このようなCSSを追加れば<main>も使えるようになると…
main {
display: block;
}
そうだと信じてたんです。
しかし、ある人のIEではこのスタイルすらも完全スルーされることが判明。
ガーン！
CSSのcontentでは文字を挿入することもできますが
「&(&)」「>(>)」などの特殊文字はコードのまま出力されてしまいます。
contentで特殊文字を使うときは、16進数の数値文字参照コードの& # x を、\や0に置き換え、セミコロンをとると指定できます。
「>」の参照はこうなります
16進数の数値参照 > の記号を置換します。
これをCSSのcontentに設定。
// > を挿入
.btn_next::after {
content: '\00003E';
}
See the Pen Enter entities in CSS’s content property by webdev (@webdev-jp-net) on CodePen.0