2018年6月23日(土)
ごめん・なはり線 時刻表 その５ #警察・交通

　見出し固定版において、デバイスの種類によって、レイアウトを変更しやすいように、レイアウトに関わる数値をすべてJavaScript内で処理するようにしました。

　なお、パソコンで拡大縮小表示した場合、スクロールバーの太さが変化しないことから、レイアウトが崩れます。Microsoft Edgeは、変化してくれるので、レイアウトが保っています。

　上記のバグに対応する下準備として、今回の修正を行いました。ほとんど変化が分からないと思いますが、見た目や説明も少しずつ改善していってます。
http://neconote.jp/gonasen/

2018年6月21日(木)
[JavaScript] window.devicePixelRatio #HTML5&CSS3&JavaScript

　ブラウザの倍率を割り出すのに、ついこの間まで苦労していました。devicePixelRatioが、すべてのブラウザで利用できるようになっています。これは、朗報です。

　パソコンでは、ブラウザにおける拡大率に相当します。スマホでは、拡大表示していても不変で、機器のピクセル数／表示ポイント数です。タブレットは、おそらく、スマホと同じでしょう。つまり、devicePixelRatioの意味合いが、デバイスにより異なります。実装には、スマホ＆タブレット／パソコン分岐処理が必要です。

　パソコンにおいて詳しく見てみると、関連しているinnerWidthとouterWidthの挙動が、ブラウザによって異なっています。

--
パソコン機器の解像度1366x768
ブラウザを最大化したときの挙動

windiow.outerWidth（不変）
─
Edge IE11 Chrome Firefox Opera
1382 1382 1366   1382    1366

　何故、Edge, IE11, Firefoxでは1382x784になるのかは不明。

windiow.innerWidth
─
     Edge IE11 Chrome Firefox Opera
0.50:2732（すべて）
0.75:1821 1821 1821      -    1821
1.00:1366（すべて）
1.25:1093 1093  1093     -    1093
1.50: 911（すべて）
1.75: 781  781   780     -     780
2.00: 683（すべて）

　1.75倍のとき、780.57を小数点以下四捨五入すれば781ですが、何故、Chrome, Operaでは780になるのかは不明。
--

　つまり、1ピクセルもずれないようにするには、innerWidthを使う必要があります。

※下記は、あとで追記します。

screen.width
screen.height

screen.availWidth
screen.availHeight

document.documentElement.clientWidth
document.documentElement.clientHeight


P.S. ちなみに、iPhone5c(iOS10)では window.innerWidthは不変で正確に出ますが、window.outerWidthは不変で0です。

2018年6月21日(木)
パソコンのACアダプター #■パソコン・通信

　NECノートパソコンが電源すら入らなくなったとのこと。

　パソコンの基盤？バッテリー？ACアダプター？が考えられます。

　ガレコレのお客様でNECノートパソコンをお持ちの方々に連絡してみますが、いずれもACアダプターADP-75RB Aと型番が異なり、19V-3.95Aではありません。おそらく、CPUの差で、ACアダプターが微妙に異なるんですね。

　パソコン側のコネクターは、将来USBに統一するとして、直流変換器の部分も統一できないのかなあ？商品化したらバカ売れしますよね。


P.S. 昔、自分のHPノートパソコンのACアダプターを購入した際に、型番が同じなのにパソコン側のコネクターが異なっていることがありました。電話すると、販売側もそのことを認識しているらしく、輸入品でコネクター間違いでは返品できないと言い張るので、２個目を売りつけられました。悪質な業者なので、二度と利用しません。当時、Amazonがあったらなあ。


P.S.2 NEC Directでは、バカ高いよね。何か検索も古臭いし、全くダメなサイト。Amazonで1,650円で購入しました。もっと安いサイトもったけど、Prime会員なので、送料無料で翌日届くしね。
http://nec-lavie.jp/shop/peripheral/01/20002/index.html

2018年6月20日(水)
竜巻、紙一重 #◎気象・災害

　写真は翌日21日朝に撮影。

　9:55頃、羽根スーパーの前の道を、竜巻が通った。

　台風以上の土砂降りで、スーパーが開店する9:30まで待機して、前の自動ドアから商品を運び入れた。店を出たのが9:45。ついでにお買い物していたら、車がやられていたかも。

　羽根スーパーは、奇跡的に被害なし。写真の左側の屋根にブルーシートしている家が、スーパーに魚を捌きに来ているおばちゃんの家。室戸市からは何も出ないそうな。

　撮影の後ろの自動車工場のスレート屋根は、叩きつけられたように、虫食い状に穴が開いた。

　危険と分かっていても、配達は無しにはならない。今回の配達は、今までで一番最悪。いつかは死ぬな。
https://www.google.co.jp/amp/s/topics.smt.docomo.ne.jp/amp/article/rescuenow/nation/rescuenow-00000006890136

2018年6月20日(水)
デバイス分岐 #HTML5&CSS3&JavaScript

　Webページを作成するときに、デバイス分岐を熟知しておきたいものです。

　スマホとタブレットとパソコンを区別してみましょう。

--
$ua = navigator.userAgent;
$ua = $ua.toLowerCase();

if( $ua.indexOf("Windows Phone")!=-1 ){
  // Windows Phone
}else if( $ua.indexOf("iphone")!=-1 ){
  // iPhone  
}else if( $ua.indexOf("ipad")!=-1 ){
  // iPad  
}else if( $ua.indexOf("android")!=-1 ){
  if( $ua.indexOf("mobile")!=-1 ){
    // Android スマホ
  }else{
    // Android タブレット
  }    
}else{
  // パソコン
}
--

　日本では、スマホのほとんどがiPhoneとAndroidですが、Windows Phoneも0ではありません。実際に、我が奈半利町にWindows Phoneを利用されている方がおられてビックリしたのはついこの前のことでした。でも、Windows Phoneは、すぐフリーズして使い物にならないことが分かりました。

　Windows Phoneのエージェントにはすべてのキーワードが含まれているので、筆頭に分岐を施します。相変わらず、Microsoftの嫌らしい戦術ですが、致し方ありません。

　次いで、メインであるiOSとAndroidを分岐していきます。mobileが含まれているのは、iPhone、iPad、Androidスマホです。Andriodタブレットには、含まれていません。

　残ったのはパソコンとなります。Windows、Macintosh、Linuxで分岐してから、ブラウザ分岐するのもいいでしょう。

　なお、スマホとタブレットのブラウザは、iOS(iPhone、iPad)ではSafari、AndroidではGoogle Chromeが標準ですが、他のブラウザを利用されている少数派の方もおられます。必要に応じて、ブラウザ分岐しましょう。