2015年11月09日

Googleマップのマイマップ、ズームと中心設定

たとえば
https://www.google.com/maps/d/u/0/view?mid=zDiDTdg1Co_c.kYdbnAV9Lfk4
というマイマップ、このままだとすんごく大きく拡大されてしまう。
マイマップ中のポイントがひとつだと超拡大、ポイントが複数だとすべてのポイントが表示されるように中心と拡大率が自動で設定されてしまう。これでは不便なときもある。
これらについて、Googleはいまだ公式の解決方法を持っていない。
それが出るまでの暫定処理。であって欲しい。

1) ズーム
&z=<ズーム値>
上記アドレスに &z=15 を加えると、
https://www.google.com/maps/d/u/0/view?mid=zDiDTdg1Co_c.kYdbnAV9Lfk4&z=15
zの値は大きくなるほど詳細になる。小さくなるほど広域。たとえば z=13だと
https://www.google.com/maps/d/u/0/view?mid=zDiDTdg1Co_c.kYdbnAV9Lfk4&z=13

2) 中心
中心の座標を得る方法その1
マイマップではなく、ふつーのgoogleマップで中心としたい場所を検索で探す。
ここでは例として「花やしき」を検索すると、
url欄に「@35.7159291,139.7936164」がある。
URL座標.jpg
この「35.7159291」「139.7936164」がそれぞれ緯度経度。
検索とかでは目的の場所を得られない場合もある。その場合は ↓ その2で。

中心の座標を得る方法その2
マイマップを作って得る。
https://www.google.co.jp/maps/d/u/0/ にアクセス。
マイマップwelcome.jpg
任意のマイマップを作って中心にしたいポイントを地図に追加。
add.jpg

追加されポイントをクリックすると左下に緯度経度が表示されている。
x_y.jpg
もちろん、すでにあるマイマップのポイントでも編集モードに入ればこれが表示される。

さて、得られた緯度経度をこれをさきほどのマイマップのurlにつなげてやる。
&ll=<中心の緯度>,<中心の経度>
やってみる。ここは&z=15で。
https://www.google.com/maps/d/u/0/view?mid=zDiDTdg1Co_c.kYdbnAV9Lfk4&z=15&ll=35.7159291,139.7936164

できた。
埋め込みも同じ要領。url中の「view?」を「embed?」にすれば埋め込み用urlになる。


posted by シマウマ at 12:57| Comment(0) | Google | このブログの読者になる | 更新情報をチェックする

2015年11月08日

【サイトのスマホ対応】inputのtype

inputのtype種類が増えてたことを知った。
かなり以前だがPCプログラミングで入力ボックスに入ったときにIME制御をしたいと考えて、追求したことがある。が、そのときは結局、OS、IMEのすべてをカバーできる汎用的な方法が見つけることができなかった。(WindowsAPIの挙動自身が適当だった。)
今回はスマホ対応している途上でやっぱりinputにフォーカスが入った時にIMEが日本語入力モードで起動するのがうんざりでなんとかしたいと考えたので調べた。わたしの使っているスマホ上で普段使っているIMEの挙動、ということが前提。
type="text"では日本語入力モードになる。
type="number"で数値入力モードになる。
type="email"で英文入力モードになる。
type="url"でも英文入力モードになる。
type="tel"で「電話番号入力モード」になる。
最後のtelで立ち上がる電話番号入力モードが微妙だと思った。
このモード、スマホでサイトを巡っていてもごくたまにしかお目にかからない。わたしの使っているIMEでは手操作でそのモードへどうやったら入れるのか、それ自身がわからない。つまり使い慣れてないモードで、これってどうなんだろう。別に数値入力モードでいいんじゃね?という感想。
こうしたinputのtype拡張はhtml5仕様だというのだが、最近のPC向けchromeやIEではすでに対応しているようで、少し意外だった。
posted by シマウマ at 13:28| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする

2015年11月02日

IFTTTについて

前記事の件、うまくいかない。
つまり、
IFTTTでRSS→twitter連携のレシピを作る場合、「with image」で作ると何も画像がないとエラーになって投稿自身をしてくれない。「with image」抜きのレシピの場合レシピ中に{{EntryImageUrl}}があっても無視されて画像を投稿してくれない。
うーん。
dlvr.itの場合は、画像の件はうまくいくが、本文が長くて納まりきらないと全カットする。
seesaaの場合は、本文や画像を投稿するオプション自身がない。

他に選択肢は? IFTTT→Buffer→Twitterを試してみる。(この投稿で)
画像ありの場合。(Add to Bufferで表示されるかしら)
41QIoohdKhL._SL500_AA300_.jpg


posted by シマウマ at 21:19| Comment(0) | テスト | このブログの読者になる | 更新情報をチェックする

IFTTT試験(2)

IFTTT、RSS更新をトリガーとして「with image」でレシピを作成すると、画像が何もないときにエラーになって、何も投稿してくれない。
これはまずいので、「with image」抜きのレシピを作って、あえて{{EntryImageUrl}}を入れてみるとうまくいくかしら。
41QIoohdKhL._SL500_AA300_.jpg
posted by シマウマ at 20:34| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする

IFTTTの試験

IFTTT、RSS更新をトリガーとして「with image」でレシピを作成すると、画像が何もないときにエラーになって、何も投稿してくれない。
これはまずいので、「with image」抜きのレシピを作って、あえて{{EntryImageUrl}}を入れてみるとうまくいくかしら。
41QIoohdKhL._SL500_AA300_.jpg
posted by シマウマ at 20:24| Comment(0) | テスト | このブログの読者になる | 更新情報をチェックする

【サイトのスマホ対応】target-densitydpi=device-dpiはやめとこう

Android4.1の標準ブラウザとchromeで、どうも表示文字サイズなどにかなり違いが出てしまう。
標準ブラウザだと文字が小さい。つまり大きな画面を表示しているようだ。
その両方で
alert(window.innerWidth);
とすると、違う数値を返してくる。
My端末の横幅は480で
標準ブラウザでは「479」を返してくるが、
chromeは「328」!
へえー。。。。
へえー。。。。。。。。。
どうりで違う文字サイズ(見た目)になるはずだわね。
あらためて試験すると↓こうなった。
20151101_095937.png 20151101_100011.png
こりゃたいへん。
だが、標準ブラウザとchromeでさほどの違いなく表示されるページはごまんとある。
ウチだけなんでなんで? とあちこちつついてみると、
viewportの設定に問題? 原因があった。
上記htmlのviewportは、
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes">
だったが、このうち原因となっていたのは、
target-densitydpi=device-dpi
の部分だった。これを設定していると、標準ブラウザが480ベースを守ろうとする。chromeは守らない
ということがわかった。この記述をはずしてやると上記スクリプトの返りは
標準ブラウザ:320
chrome:328
となりかなーり近づく。当然文字サイズなどもほぼ同じサイズで表示されるようになった。大きなデザイン上の相違もなくなった。
chromeはシェア率も高く、こちらの表示を妥協するわけにはいかなかったので標準ブラウザの動きをそれに近づけることができて、まずはよかった。。。かな。
でもそもそもはchrome(など)の挙動が変なんじゃないのか??
これ(target-densitydpi=device-dpi)を入れ知恵したやつ、あるいはchromeの挙動そのもの、なんかいろいろ納得いかない、いつもの奇妙な世の中だが、ここはいつもの忍耐、
「target-densitydpi=device-dpiはやめとこう」(唱和願います)
ということにして生きていこう。

≫続きを読む
posted by シマウマ at 12:04| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする

2015年10月30日

【サイトのスマホ対応】youtube埋め込みに注意せよ

Android板chromeでは問題ないが、標準ブラウザで動作が停止してしまう現象。
パートごとにコメントアウトしていくと、youtube埋め込みが原因だった。
1ページ内にたかだか4つの埋め込みをしているだけだったが、それでは当方の端末では駄目だったようだ。
http://blog.psocafe.com/view/2968
こちらの助言にしたがって埋め込みを減らしてサムネイル画像に変更して解決
サムネイル画像は、youtubeから常にゲットできるんだねぇ。
http://youtubethumbnailgenerator.blogspot.jp/

posted by シマウマ at 11:27| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする

2015年10月28日

IEで img タグの width が効かない

IEで<img>タグ内のの width が効かないことがあった。
<img src="…" width="70">
で原寸表示されてしまう。
<img src="…" style="width:70">
で正しくリサイズされた。
なんだろ。。。

ラベル:IE 覚え書き 忍耐
posted by シマウマ at 10:33| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする

2015年10月27日

noscript処理は必要なんだろうか。

いまどき必要?
さて?
やる必要があるとなると、けっこう手間ですよね。

ラベル:javascript 忍耐
posted by シマウマ at 23:31| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

【サイトのスマホ対応】お役立ちリンクとメモ

サイトのスマホ対応を数年おくれくらいでしたので、お役立ちリンクとメモ。

(1) http://mattkersley.com/responsive/
ここは、スクリーンサイズ別のサイトの見え方をシミュレートしてくれるところ。
すばらしい。
UserAgentは変わらないのでこれだけでスマホ対応というのはちょっと無理があるかもだけど、だだだっとウィンドウを並べてくれるので、わかりやすい。

(2) http://walking-elephant.blogspot.com/2012/04/user-agent.html
これは少し古めだが、超驚いたサイト。
UserAgentを変更してスマホのシミュレートするのは、chromeやIEで拡張機能なしで簡単にできたんだね。 全然知らなかった。あんまりネットでも紹介されてないよね。。。アタリマエすぎるのかな。
携帯(ガラケー)のシミュレートもできるのかな。やってみてない。
chromeはエラーチェックなどもしてくれるみたいだけど、うーん、まだ使いこなせてない。
IEのF12 開発者ツールではWindowsPhone以外のUserAgentは自力で入力する必要がある。
UserAgent一覧はこちら。
http://www.openspc2.org/userAgent/

(3)cssの切り替えについて
http://webdesignerwork.jp/web/responsivewebdesign/
基本、上記を参照してやってみた。スクリーンサイズだけを根拠にした切り分け。
要するに @media screen and (min-width: 641px(例)){…の使い方を勉強したってこと。
上記のうち、タブレット判定(641px-768px)は要らない気もする。シミュレートしたり実機で見たりしてもPCと同一のコードで現状はいけてる。スクリーンサイズだけで対象をタブレット扱いすることも無理があるし。
ほかにスマホ判定やタブレットが必要な場合はphpで。当方はスマホ判定だけしているので以下。
という感じ。
javascriptでもできる。
https://w3g.jp/blog/js_browser_sniffing2015
こっちの方がいいかも。

でも、スクリーンサイズとは別にスマホ判定していいことって実際にはあんまりないような気も。
スマホだけ <a href='tel:… を使う、くらいかなぁ。
そんなのPC環境でもあってさほど悪くないし、実際のところスマホかどうかの判定っていまやあんまり意味なくて、スクリーンサイズ判定で必要十分ではないかしら。

(4) CSS切り分け以外に必要なこと
body{ -webkit-text-size-adjust: 100%; }
は必須。
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">も必須。
viewportについてはこちらも一読を!
当方は多数の項目を一覧表示させたインデックス画面から各項目の詳細情報を見せるとき、PCではインデックス画面内に表示してきたがスマホでは別ウィンドウを開くように仕様変更した。
このように<a>タグの行き先自身を変えるようなときはCSSだけではできないので、スクリーンサイズなりスマホなりの判定で条件分岐してやる必要がある。

(5) 画像サイズ
上記参照(3)にあるようにcssで
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
としとけばおおむね解決だが、
  • スマホモードでメニューを縦並びにすることになるとメニュータイトルに使ってる画像などが100%では幅不足になる。スマホ表示で縦並びにする画像は幅640pxで作っておいてwidth指定するのが吉。
  • lightbox_plus利用のページでは上記のimgタグ一括の定義では問題が出た。lightboxの別窓がいつまで待っても開かなくなった。lightboxで開かせる画像ではこの定義をはずす必要がある。
(6) ガラケーのシミュレート
今回の作業とは関わりないが、ガラケーのシミュレートならここが定番。
Goo モバイル サイトビューワ
http://emu.mobile.goo.ne.jp/emu/emu.php
docomoが作っているスタンドアロンのアプリもあるが、それよりもいい。
実は携帯用の関連サイトを検索する場合もこれを使っていたりする。


posted by シマウマ at 00:04| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする