次の10件>>2015年11月09日Googleマップのマイマップ、ズームと中心設定たとえばhttps://www.google.com/maps/d/u/0/view?mid=zDiDTdg1Co_c.kYdbnAV9Lfk4というマイマップ、このままだとすんごく大きく拡大されてしまう。マイマップ中のポイントがひとつだと超拡大、ポイントが複数だとすべてのポイントが表示されるように中心と拡大率が自動で設定されてしまう。これでは不便なときもある。これらについて、Googleはいまだ公式の解決方法を持っていない。それが出るまでの暫定処理。加えると、https://www.google.com/maps/d/u/0/view?mid=zDiDTdg1Co_c.kYdbnAV9Lfk4&z=15zの値は大きくなるほど詳細になる。中心の座標を得る方法その1マイマップではなく、ふつーのgoogleマップで中心としたい場所を検索で探す。ここでは例として「花やしき」を検索すると、url欄に「@35.7159291,139.7936164」がある。この「35.7159291」「139.7936164」がそれぞれ緯度経度。検索とかでは目的の場所を得られない場合もある。中心の座標を得る方法その2マイマップを作って得る。任意のマイマップを作って中心にしたいポイントを地図に追加。追加されポイントをクリックすると左下に緯度経度が表示されている。あるマイマップのポイントでも編集モードに入ればこれが表示される。得られた緯度経度をこれをさきほどのマイマップのurlにつなげてやる。&ll=<中心の緯度>,<中心の経度>やってみる。https://www.google.com/maps/d/u/0/view?mid=zDiDTdg1Co_c.kYdbnAV9Lfk4&z=15&ll=35.7159291,139.7936164できた。url中の「view?」を「embed?」にすれば埋め込み用urlになる。カレンダー埋め込み支援ツールgCalまとめ。【サイトのスマホ対応】inputのtypeinputの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ではすでに対応しているようで、少し意外だった。|2015年11月02日IFTTTについて前記事の件、うまくいかない。image」で作ると何も画像がないとエラーになって投稿自身をしてくれない。image」抜きのレシピの場合レシピ中に{{EntryImageUrl}}があっても無視されて画像を投稿してくれない。dlvr.itの場合は、画像の件はうまくいくが、本文が長くて納まりきらないと全カットする。seesaaの場合は、本文や画像を投稿するオプション自身がない。IFTTT→Buffer→Twitterを試してみる。(この投稿で)画像ありの場合。image」でレシピを作成すると、画像が何もないときにエラーになって、何も投稿してくれない。image」抜きのレシピを作って、あえて{{EntryImageUrl}}を入れてみるとうまくいくかしら。image」でレシピを作成すると、画像が何もないときにエラーになって、何も投稿してくれない。image」抜きのレシピを作って、あえて{{EntryImageUrl}}を入れてみるとうまくいくかしら。|【サイトのスマホ対応】target-densitydpi=device-dpiはやめとこうAndroid4.1の標準ブラウザとchromeで、どうも表示文字サイズなどにかなり違いが出てしまう。標準ブラウザだと文字が小さい。大きな画面を表示しているようだ。その両方でalert(window.innerWidth);とすると、違う数値を返してくる。My端末の横幅は480で標準ブラウザでは「479」を返してくるが、chromeは「328」!へえー。どうりで違う文字サイズ(見た目)になるはずだわね。試験すると↓こうなった。標準ブラウザとchromeでさほどの違いなく表示されるページはごまんとある。user-scalable=yes">だったが、このうち原因となっていたのは、target-densitydpi=device-dpiの部分だった。これを設定していると、標準ブラウザが480ベースを守ろうとする。chromeは守らない。この記述をはずしてやると上記スクリプトの返りは標準ブラウザ:320chrome:328となりかなーり近づく。文字サイズなどもほぼ同じサイズで表示されるようになった。大きなデザイン上の相違もなくなった。chromeはシェア率も高く、こちらの表示を妥協するわけにはいかなかったので標準ブラウザの動きをそれに近づけることができて、まずはよかった。「target-densitydpi=device-dpiはやめとこう」(唱和願います)ということにして生きていこう。【サイトのスマホ対応】youtube埋め込みに注意せよAndroid板chromeでは問題ないが、標準ブラウザで動作が停止してしまう現象。パートごとにコメントアウトしていくと、youtube埋め込みが原因だった。1ページ内にたかだか4つの埋め込みをしているだけだったが、それでは当方の端末では駄目だったようだ。http://blog.psocafe.com/view/2968こちらの助言にしたがって埋め込みを減らしてサムネイル画像に変更して解決。サムネイル画像は、youtubeから常にゲットできるんだねぇ。効かないことがあった。width="70">で原寸表示されてしまう。style="width:70">で正しくリサイズされた。|2015年10月27日noscript処理は必要なんだろうか。いまどき必要?さて?やる必要があるとなると、けっこう手間ですよね。|【サイトのスマホ対応】お役立ちリンクとメモサイトのスマホ対応を数年おくれくらいでしたので、お役立ちリンクとメモ。http://mattkersley.com/responsive/ここは、スクリーンサイズ別のサイトの見え方をシミュレートしてくれるところ。UserAgentは変わらないのでこれだけでスマホ対応というのはちょっと無理があるかもだけど、だだだっとウィンドウを並べてくれるので、わかりやすい。http://walking-elephant.blogspot.com/2012/04/user-agent.htmlこれは少し古めだが、超驚いたサイト。UserAgentを変更してスマホのシミュレートするのは、chromeやIEで拡張機能なしで簡単にできたんだね。ネットでも紹介されてないよね。アタリマエすぎるのかな。携帯(ガラケー)のシミュレートもできるのかな。chromeはエラーチェックなどもしてくれるみたいだけど、うーん、まだ使いこなせてない。開発者ツールではWindowsPhone以外のUserAgentは自力で入力する必要がある。UserAgent一覧はこちら。http://www.openspc2.org/userAgent/(3)cssの切り替えについてhttp://webdesignerwork.jp/web/responsivewebdesign/基本、上記を参照してやってみた。スクリーンサイズだけを根拠にした切り分け。641px(例)){...の使い方を勉強したってこと。上記のうち、タブレット判定(641px-768px)は要らない気もする。シミュレートしたり実機で見たりしてもPCと同一のコードで現状はいけてる。スクリーンサイズだけで対象をタブレット扱いすることも無理があるし。ほかにスマホ判定やタブレットが必要な場合はphpで。当方はスマホ判定だけしているので以下。javascriptでもできる。https://w3g.jp/blog/js_browser_sniffing2015こっちの方がいいかも。スクリーンサイズとは別にスマホ判定していいことって実際にはあんまりないような気も。そんなのPC環境でもあってさほど悪くないし、実際のところスマホかどうかの判定っていまやあんまり意味なくて、スクリーンサイズ判定で必要十分ではないかしら。user-scalable=yes">も必須。※viewportについてはこちらも一読を!当方は多数の項目を一覧表示させたインデックス画面から各項目の詳細情報を見せるとき、PCではインデックス画面内に表示してきたがスマホでは別ウィンドウを開くように仕様変更した。このように<a>タグの行き先自身を変えるようなときはCSSだけではできないので、スクリーンサイズなりスマホなりの判定で条件分岐してやる必要がある。/***/:auto;}としとけばおおむね解決だが、スマホモードでメニューを縦並びにすることになるとメニュータイトルに使ってる画像などが100%では幅不足になる。スマホ表示で縦並びにする画像は幅640pxで作っておいてwidth指定するのが吉。lightbox_plus利用のページでは上記のimgタグ一括の定義では問題が出た。lightboxの別窓がいつまで待っても開かなくなった。lightboxで開かせる画像ではこの定義をはずす必要がある。ガラケーのシミュレート今回の作業とは関わりないが、ガラケーのシミュレートならここが定番。サイトビューワhttp://emu.mobile.goo.ne.jp/emu/emu.phpdocomoが作っているスタンドアロンのアプリもあるが、それよりもいい。実は携帯用の関連サイトを検索する場合もこれを使っていたりする。次の10件>>プロフィール名前:シマウマブログやネット,コンピュータ関連の話題。残念なことに、ほとんどがテスト用の書き込みです。あれ?(12/06)カメラ確認(12/06)見えてきた?(12/06)あうー。(12/06)プレインテキストメッセージとは(12/06)画像がないとどうなる??(12/04)タグは使えない。2.0Seesaaブログ。