ガレコレ
Garage Collection
トップページ


 すべて
次回は、5月23日(木)@ガレコレ店舗です。

◆火曜日:ガレコレ店舗
◆木曜日:ガレコレ店舗
◆土曜日:加領郷小学校体育館

練習時間は、19時~20時半です。

2019年05月
=日= =月= =火= =水= =木= =金= =土= 
##  ##  ##  01  02画 03  04や
05  06  07画 08  09画 10  11学
12  13  14画 15  16画 17  18学
19  20  21画 22  23画 24  25学
26  27  28画 29  30画 31

画:ガレコレ店舗
学:加領郷小学校体育館
や:休み

※公開練習の予定は、このブログでご確認下さい。


ご興味のある方は、お寄り下さい。
合気道流派、格闘技経験を問いません。
見学や体験は無料、お気軽にどうぞ。

http://neconote.jp/index.php?page=7#line1
 
 iPhoneの最新モデルXS・XS Max・XRは、現地時間2018年9月12日に発表されました。トドロは、出遅れましたが2019年4月に、iPhone 5cからiPhone XS Maxに乗り換えて、早1ヶ月が経ちました。プログラミングのお仕事の備忘録として、解像度などをまとめておきます。

 Webページでは、ポイント(論理的な画面サイズ)を意識して、作成すればOK。

-- iPhoneのポイントのまとめ --
414x896: XS Max, XR
414x736: 8 Plus, 7 Plus, 6s Plus, 6 Plus
375x667: XS, X, 8, 7, 6s, 6
320x568: SE, 5s, 5c, 5
320x480: 4S, 4, 3GS, 3G

 つまり、子猫の手において、HTMLを記述すれば、下記のようになります。なお、解説に不要な記述は省いていますのであしからず、

<select style="width:48px; font-size:12pt;">
<option>600 [max-width]</option>
<option>480</option>
<option>414 [iPhone XS Max, XR, 8 Plus, 7 Plus, 6s Plus, 6 Plus]</option>
<option>375 [iPhone XS, X, 8, 7, 6s, 6]</option>
<option>360 [Android etc.]</option>
<option>320 [iPhone SE, 5s, 5c, 5, 4S, 4, 3GS, 3G]</option>
</select>
--

--
(サイズ)
iPhone名
 デバイス / Retina / ポイント / アスペクト比
==========
(6.5inch)
XS Max
 1242x2688 / 3 / 414x896 / 約2:1
----------
(6.1inch)
XR
 828x1792 / 2 / 414x896 / 2:1
----------
(5.8inch)
XS 
X
 1125x2436 / 3 / 375x667 / 2:1
----------
(5.5inch)
8 Plus
7 Plus
6s Plus
6 Plus
 1080x1920 / 3 / 414x736 / 16:9
 ※これらの機種のみ特殊で、論理的な画面サイズは1242x2208で、物理的サイズ(デバイス)と異なります。これが、iPhone 8 Plusに機種変更しなかった最大の理由です。
----------
(4.7inch)

7
6s
6
 750x1334 / 2 / 375x667 / 16:9
----------
(4inch)
SE 
5s
5c
5
 640x1136 / 2 / 320x568 / 16:9
----------
(3.5inch)
4S 
4
 640x960 / 2 / 320x480 / 3:2
----------
(3.5inch)
3GS
3G
 320x480 / 1 / 320x480 / 3:2
--


P.S. 最新機種iPhone Xシリーズの選択肢は3つ。ストレージは各3種類。

--
[XS MAX]
ストレージ: 64, 256, 512GB
メモリ: 4 GB
6.5 inch
77.4 x 157.5 x 7.7 mm
208 g
バッテリー: 3174 mAh?

[XR]
ストレージ: 64, 128, 256 GB
メモリ: 3 GB
6.1 inch
75.7 x 150.9 x 8.3 mm
194 g
バッテリー: 2942mAh?

[XS]
ストレージ: 64, 256, 512 GB
メモリ: 4 GB
5.8 inch
70.9 x 143.6 x 7.7 mm
177 g
バッテリー: 2658mAh?


参考

[8 Plus]
ストレージ: 64, 256 GB
メモリ: 3 GB
5.5 inch
78.1 x 158.4 x 7.5 mm
202 g

[8]
ストレージ: 64, 256 GB
メモリ: 2 GB
4.7 inch
67.3 x 138.4 x 7.3 mm
148 g

[7]
ストレージ: 32, 128, 256 GB
メモリ: 2 GB
4.7 inch
67.1 x 138.3 x 7.1 mm
138 g

[6s]
ストレージ: 16, 64, 128 GB
メモリ: 2 GB
4.7 inch
67.1 x 138.3 x 7.1 mm
143 g

[6]
ストレージ: 16, 64, 128 GB
メモリ: 1 GB
4.7 inch
67.0 x 138.1 x 6.9 mm
129 g

[SE]
ストレージ: 16, 64 GB → 32, 128 GB
メモリ: 2 GB
4 inch
58.6 x 123.8 x 7.6 mm
113 g

[5s]
ストレージ: 16, 32, 64 GB
メモリ: 1 GB
4 inch
58.6 x 123.8 x 7.6 mm
112 g

[5c]
ストレージ: 8, 16, 32 GB
メモリ: 1 GB
4 inch
59.2 x 124.4 x 8.97 mm
132 g
--

 トドロは、今回は最大スペック(ストレージは256GB)を希望していたので、迷わずXS Maxを購入しました。

 XS Maxの廉価版がXRです。機能はXSシリーズより劣りますが、Retinaが2なので、現状では逆にぼやけないという利点もあるかもしれません。本体の色のバリエーションもたくさんあります。しかし、iPhone 5sとiPhone 5cの関係を感じさせる仕様なので、将来的にiOSのバージョンアップで切り捨てられる可能性があります。短期間で、機種変更されていく方には、かなりお勧めです。

 なるべく小さい方がいい方は、5.8inch&177gのXSで決まりです。まあ、8の148gも魅力的です。113gのSEは、2018年9月13日にiPhone XS、XS Max、XRの発表とともにアップルストアでの販売を終了しましたが、2019年1月21日にアメリカで新品を再販して、大幅値下げの理由かすぐに完売しました。重さが軽いiPhoneも望まれているんですよね。

 あとは、お金次第で、ストレージをたくさん積みたいところです。
 
 ブラウザのズーム機能は、ショートカットでは[Ctrl]+[-]縮小/[Ctrl]+[0]100%/[Ctrl]+[+]拡大で、画面の拡大縮小を行う機能で、多くの方が110%、125%、150%に拡大して観られています。

 スマホでは、スマホ用画面を用意するので問題無いのですが、パソコンでは、ズーム100%で設計した画面は、それ以外のズーム率ではレイアウトが狂ってしまいます。

 悲しいかな、HTML5、CSS3、JavaScriptでは、未だブラウザのズーム(画面拡大率)を制御できません。インターネット検索しても解決策を発見できませんが、トドロ@ガレコレは、諦めません。自称ホームページ・マスターの名に懸けて。


 window.devicePixelRatioは、現在のディスプレイにおけるCSS解像度と物理解像度の比を返します。現パソコンは、CSS解像度=物理解像度であり、ズーム100%で1、ズーム150%で1.5となります。読み取り専用なので、設定はできません。このプロパティで、ズームが操作できれば、どれだけ楽かしれません。

 しかし、オブジェクトのfontSize、width等を、window.devicePixelRatioで割ってあげると、疑似的にオブジェクトはズーム100%で表示した状態に保てます。

-- 
<script>

$ratio = window.devicePixelRatio;

// フォントサイズ
document.body.style.fontSize = 12/$ratio+"pt";

// イメージ幅
$length = document.images.length;
for($i=0; $i < $length; $i++){
  $obj = document.images[$i];
  $obj.style.width = "";  // 現styleを消して、classのstyleにリセット。
  $w = parseFloat(window.getComputedStyle($obj).width);
  $obj.style.width = $w/$ratio+"px";
}

</script>
--

 文字列を数値に変換するなど計算値において、parseInt()整数ではなく、parseFloat()浮動小数点数を利用します。parseInt()整数では、ずれが生じます。

 問題は、オブジェクトにmargin、border、paddingの設定がしてあると、これらすべてに対しても、同様な操作が必要ということです。結構面倒ですね。

 子猫の手を、この方式で改修を進めています。アイコンや項目名はズーム100%のままにして、入力フィールドはズームに合わせて表示します。ズーム150%まで対応します。ズーム175%以上では、デバイス幅1366pxで表示しきれないためです。アラート表示して、ズーム150%以下で表示するように促します。


P.S. 自分自身も老眼が進み、現バージョンの子猫の手では、ズーム150%で作業しています。次期バージョンで、ズーム150%に対応したのは、自分の為でもあります。


P.S.2 変数名の1文字目に$は要らないとのご指摘ありがとうございます。承知しておりますが、下記の理由で変数に$を付けております。

(1) 変数が一目瞭然。
(2) 命名法則を気にしなくてよい。
・半角文字
・英数字[a~z A~Z 0~9]、アンダースコア[_]、ドル記号[$]を使用。
・1文字目には数字は使用不可。
・予約語ではない。

 ちなみに、関数名の1文字目には_を使用しています。変数名と同様な理由です。

function _name(){}

 プログラムを始めたての若いプログラマーの方々には、変数の先頭に$を付けるのに違和感があると思います。昔やPHPでは、変数の先頭に$を付けるルールがあり、トドロはこれが身に沁みついているので、$無し変数では、こんがらがってようできません。ガレコレのプログラミングを参考にされる場合、各自に都合の良い変数名および関数名に変更してみて下さい。これからも、よろしくお願いします。
 
19:00~20:40/岩瀬、新徳、Cuさん、デルコさん
 

お問い合わせ


by Network Communication Note