iPhone X の Safari における Web コンテンツの表示 – ONO TAKEHIKO – Medium
2017/09/15 14:54:54
masuP
“viewport-fit=cover” , "constant(safe-area-inset-top)" ...
2017/09/15 14:59:56
field_combat
Webに関してはそれほど気にしなくてもいいのかな。背景色は不安だけど
2017/09/15 15:33:12
bottomzlife
けっきょく「なんで見栄張ってこんなクソみたいなデザインにしたんだ」に尽きる。IEがどーたら言ってたやつは自己中心的な理由で独自プロパティ大量に増やしたAppleに鉄槌を下すべき
2017/09/15 15:36:33
ysk_lucky-star
また独自拡張か
2017/09/15 15:42:50
Yagokoro
クソデザインの典型。
2017/09/15 15:43:22
web_designer
まだまだ情報収集中の段階なので何が正解か不明だけど、デザイナーとしては実機端末が手元にないと怖いなー。経験のない画面だから、頻繁の検証とか必要な気がする。
2017/09/15 16:19:18
primedesignworks
ガラケー時代とあまり変わらなくなってきた
2017/09/15 16:31:13
kvx
めんどくさ！！！
2017/09/15 16:54:08
kazunori-kimura
viewport-fit=coverとかconstant(safe-area-inset-xxx)とかがsafari以外のブラウザでどのように解釈されるかが問題だ。
2017/09/15 16:56:34
imaginaration
独自拡張やめてくれ。。
2017/09/15 16:59:04
otchy210
このパターン、これまでも何度も見て来たけど、結局シェアの暴力で対応せざるを得ない的なやつ。IE に既視感あるな。
2017/09/15 17:01:07
renos
viewport-fit=cover使わなければ…まぁ…いいのかな…？
2017/09/15 17:05:30
wakuworks
モバイル界の IE
2017/09/15 17:05:33
popup-desktop
viewport-fit=coverさえ使わなければ特に気にしなくて良いよって話かしら。
2017/09/15 17:11:23
Mist
読んだ。
2017/09/15 17:15:19
armond
ありがとう良記事！ デザイン非難してる人いるけど、もしiOS占有領域との間に１本線が入ってセパレートされていたら非難しないような問題ではないかと。iPhone X で見栄えよくしたい時は少し手間がいるけれど。
2017/09/15 17:19:33
puhitaku
画面に切り欠きを含むデザインは絶対に流行らないと踏んでいたがこれで確信した。確実に衰退する。
2017/09/15 17:23:07
yug1224
つらみ
2017/09/15 17:28:22
tomo_p
仕事を増やさないで頂きたい
2017/09/15 17:39:05
kamemoge
フロントエンドやアプリの開発をやってる人は考慮する必要ありそうなやーつ
2017/09/15 17:39:14
fatmonger
たかが端末1つのためになんでこんなことしなくちゃいかんのだ。
2017/09/15 17:44:58
zions
切り欠き以外にも、四隅の取り扱いがある。スペック上は2,436×1,125ピクセルの長方形だけど、実物は四隅が丸まってる。
2017/09/15 17:46:12
nasneg
iphoneもカオスってきたなぁ
2017/09/15 18:01:39
moonbeam44
すげームダ。
2017/09/15 18:03:21
k_gobo
余計なviewportの値増やさないでほしい。どうせそのうち消えるんだし。
2017/09/15 18:05:29
boobook
現代版IEじゃん
2017/09/15 18:08:55
rryu
形状の具体的なピクセル数を出さないのはフルスクリーンでも基本避けろってことなのだろうか。まあ、実測してがんばって活用してしまうところが出てくるとは思うが……
2017/09/15 18:11:07
wdr_s
わー、これ対応するのは辛い…クライアントのWeb担当者がiPhone Xだった日にゃ…
2017/09/15 18:16:29
take-it
知識としては知っておきたいけど、iPhone Xからの閲覧率も、コンバージョン率も3%ならんだろから、正直無視していい気がする。それなら他のことに工数かけた方がマシ。
2017/09/15 18:16:35
toaruR
『当然こんなことにはなりません』……よかったー(ノ∀`) え？あれ？
2017/09/15 18:21:58
monochrome_K2
ブコメの反応がいまいちだけどカメラ部の切り欠きのあるディスプレイはEssential Phoneを始め今後増える可能性があるので少なくとも独自仕様で終わることはないと思う
2017/09/15 18:28:21
fotus4
IEハックの再来感。Appleマジヘイト
2017/09/15 18:30:12
mmmpa
apple is 害
2017/09/15 18:32:06
miyazawataichi
新しいIE6が生まれてしまったのか
2017/09/15 18:33:34
zettaimuri
糞ダサすぎる・・・本当に残念だ
2017/09/15 18:34:33
onim
IEが云々言ってる人はIE対応したことないでしょ。IEはバージョン毎に特別対応しないと正常に表示すらされないんだよ。これは気に食わないなら対応しなくても問題は起きない
2017/09/15 18:35:15
hachiame
こんなの標準仕様でコーディングすればいいんじゃない？わざわざiPhone Xのためにviewportの値を変える必要はないと思う。
2017/09/15 18:38:44
clp5884
めんどい。みんな協力してよ
2017/09/15 18:40:20
mijyunon
iPhone Xのユーザー数が増えれば対応せざるを得ないだろうけど、どこまでこのデザインの後継機種が出続けるか‥
2017/09/15 18:45:28
hachi09
IEが死んでAppleに転生/憑依したのかな？ 葬式なんてやらなければよかった…成仏してくれ…
2017/09/15 18:47:30
t_massann
この機種のためだけに冗長なCSS拡張が生まれるのか・・・。ブコメにあるように昔のIEみたいだ
2017/09/15 19:00:15
guru_guru
対応しませんよ？（満面の笑顔）
2017/09/15 19:09:05
tzk2106
SafeAreaだけでみた場合、実質の画面サイズって何インチなんだろ？
2017/09/15 19:12:06
arapro
要するに「外側のセーフエリアにまで背景なり何なり表示したい場合はviewport-fit=cover付けて、余白をconstant(safe-area-inset-*)で確保」でOKか。とはいえ、ビジュアル的によっぽどこだわりたい時くらいかな？
2017/09/15 19:13:56
peperon_brain
evil.
2017/09/15 19:21:36
lyiase
IEみたいだとコメントしてる人がいるが、IEはそもそも標準的な動きをしなかったのだが。これは標準的な動きからは逸脱してないし、標準モードなら特に気にすることもない。あとそもそもviewportって標準化してない
2017/09/15 19:22:18
Futaro99
はぁ…
2017/09/15 19:26:09
kabochatori
iphonexのシェアどの程度になるかなあ…今後このディスプレイがスタンダードになるという宣言でもなけりゃ、まあ、スルーでいいよな…。
2017/09/15 19:29:26
bouzuya
うっ……
2017/09/15 19:50:37
ks1234_1234
さすがに標準のままだと上はとくに表示されないのか。別段あの形にフルサイズ表示する意味はなさそうだが，ブラウザゲームとかだとあるのかな。
2017/09/15 19:56:19
makoto1899
なぜ、予想？ Xcode 9 GM版を入れれば、エミュレータで確認できるのにー
2017/09/15 20:01:12
koyancya
仕事なんだったら、ほげーって言いながらやればいいだけだし、趣味だったら楽しめるんじゃないのこれ
2017/09/15 20:11:02
sazae657
Appleの拡張：先進的で洗練された人類史上最高の画期的拡張、MSの拡張：邪悪な拡張 by信者
2017/09/15 20:13:14
otihateten3510
どう考えてもフルスクリーンで上下黒（iPhone5初期であった）になるから、没入感減ると思うんだよね。アプリはあまり影響なさそうだが、ゲームが大変そうだなぁ。iPhone4sサイズとXサイズの縦横差がありすぎてなぁ。
2017/09/15 20:29:48
gigazori
iPhone横向きでブラウジングしてる人っているの？
2017/09/15 20:31:00
Falky
いや、つーか、みなさんスマホの横画面表示なんて表示保証して納品してるんですか？？？そんな案件一度も扱ったことないし、よっぽど特殊なケースじゃない限り、そんな作業に金払ってくれる客なんかいないでしょ…
2017/09/15 20:31:40
tokidokidj
俳優の小野武彦さんかと思ってびっくりした
2017/09/15 20:31:43
metamix
経験則だけど、IEの独自対応は悩まされてる人が多いので対策が見つかりやすいが、モバイルSafariの不具合は原因がさっぱり分からず消費する時間コストはこっちの方が全然多い
2017/09/15 20:59:35
wow64
もうめちゃめちゃだな...
2017/09/15 20:59:46
younari
強い奴の押し付けで割り食うの辛いよな。
2017/09/15 21:03:48
kh0705
びっくりするほど、話の内容が伝わっていない
2017/09/15 21:12:15
doodleon
「自分Xなんだけど、ちゃんと表示されてませんよー」て修正依頼がやってきます。
2017/09/15 21:25:51
opps_long
各アプリが上部の出っ張りを隠すように表示すればいいんじゃない？
2017/09/15 21:31:08
xevra
ば～～～っかじゃねえの！
2017/09/15 21:38:44
osnq
シェアの暴力っていうけど少数派なきがするけど...
2017/09/15 21:39:32
ayu118
viewport-fit=cover使わない→クライアント「iPhone X で上下に変な余白があります。ツメてください」って未来が見えるんだけど……気のせい？
2017/09/15 21:41:59
beerbeerkun
バカバカしいけどAppleだから完全無視ってわけにはいかず少なくとも仕様の確認は必要になんのよね
2017/09/15 21:43:20
ledsun
ふむ、動画をフルスクリーンで見たときに対応が中途半端なサイトだと、大事な部分（こんな端っこに？）が隠されてしまう可能性があるのか。
2017/09/15 22:02:43
roirrawedoc
考えれば考えるほど本当にクソみたいなデザインだ。カメラの出っぱりもそうなんだけど、哲学や美意識が欠けてると感じる。
2017/09/15 22:03:15
totoronoki
｢ディスプレイの一部が隠れてる｣と解釈するか、｢独自の領域をディスプレイ上部の左右に増やした｣と解釈するかで認識が違うな。
2017/09/15 22:04:29
ustam
アップルの禿げた人はマジ勘弁して…
2017/09/15 22:11:33
ylupin
iphone web デザイン
2017/09/15 22:14:25
june29
トリッキーなハードウェアの都合にソフトウェアが対応しなきゃいけないとしたら厳しい。対応せずに済む方の未来に進むといいな…。
2017/09/15 22:28:31
pochi-mk
この内容を凄く優しい口調で解説できる技術、この筆者すごい。
2017/09/15 22:41:32
yurikago12
せっかく新しいオモチャくれたのに消極的なエンジニア・デザイナー多いなぁ…
2017/09/15 22:43:14
tokage3
またメンドクサイことを
2017/09/15 22:45:21
braitom
“safe-area-inset”ってCSS要素が追加されてるのか。viewportにも“viewport-fit=cover”が追加されてる。
2017/09/15 22:52:30
tskk
メモ
2017/09/15 22:53:57
fun2drive
これに合わせてモバイルアンカー広告もデカくなるのかな 4インチ勢は絶滅の一途を辿るのみだな
2017/09/15 23:02:49
raitu
iphoneX向けcss独自拡張
2017/09/15 23:12:57
potekenpi
シミュレータで試してから書けばいいのに。
2017/09/15 23:17:42
kirifue
確かに「切り欠き」はしょーもないデザインだと思うが、わざわざ「viewport-fit=cover」なんて使わないし、そこまでこだわるなら最後まで責任持てよって話。 #iphonejp #開発
2017/09/15 23:18:51
blackdragon
面倒臭いと思えばフルスクリーンのモードを明示的に指定しなければ良いだけと読んだが…
2017/09/15 23:23:57
zyzy
アップルは悪い意味でジョブズっぽさ失ってないのが凄いと思う
2017/09/15 23:33:16
nishik-t
ブコメに横画面の品質保証しないweb屋がいるけど、別世界の人間かな？
2017/09/15 23:42:30
pudori186
なぜもうちょいが出来なかったんだろ。。。
2017/09/15 23:55:39
b4takashi
なるほど面倒
2017/09/15 23:59:21
tenkinkoguma
私はIT屋さんじゃないから全然わからない話だろうと思って本文は読まないけれど、はてなーの皆さんがあーだこーだ言ってるのを読んでて一体感があって良いなぁと思うわけです。皆さん、無理しないでくださいね
2017/09/16 00:03:01
suzunya
IEでMSにグチグチ言ってたマカーはごめんなさいしような
2017/09/16 00:03:29
deokisikun
良くも悪くも影響力あるなぁ…。ジョブスさんはどんな顔で下界を見ているのだろうか
2017/09/16 00:04:37
miyatakesan
エントリ自体は非常に有用だけど自分の管轄では無視一択かなぁ。
2017/09/16 00:05:37
fujitaweekend
俺は素人だから、スターついてるコメントもユニバーサルメルカトルなんじゃないかって思っちゃうんだよね！！！
2017/09/16 00:08:33
manaplus
今後はiPhone Xの欠けた部分をうまく活かすサイトやデザインも出てくると予報
2017/09/16 00:10:49
nezuku
アプリ側の可視描画領域が矩形でないこと、アプリが描画を担当する領域にOS側の制御要素が覆う部分がある(ホームバー)というのが、頭悩ませる要因だよなぁ
2017/09/16 00:13:44
nokkojiro
iPhone X の Safari における Web コンテンツの表示 iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど
2017/09/16 00:32:28
sesamitan
iPhone Xよどうか売れませんように…
2017/09/16 00:34:21
tettekete37564
ちょっと IE の様な腐臭が出てきたな
2017/09/16 00:39:56
yuki_furu
iPhone eXという名前の方がいいのでは。略称ie。
2017/09/16 00:52:17
kawa106
本文読んでないブコメ多くて辛い
2017/09/16 00:57:10
mobits
なんでこんなことしなきゃいけないって思うならしなきゃいいじゃん(いいじゃん)
2017/09/16 00:58:59
setlow
時計とかバッテリー残量の表示がなくなるデザイン個人的に嫌いだから切欠をキッカケに常に表示するようにして欲しい。
2017/09/16 01:08:55
gesukawa
良記事ありがとうございます。
2017/09/16 01:28:18
n314
実機でテストしてって言われた時のために買わなきゃならんのかね。
2017/09/16 01:33:15
tail_y
要するにゲームのことは一切考えられていない
2017/09/16 01:34:52
bookmarkmen
さよならApple。
2017/09/16 01:35:13
yes_you_can
こういう取ってつけた仕様じゃなく、本当の意味で長方形意外の形にもなれるブラウザになってたら超独自仕様でも評価した。
2017/09/16 01:36:03
mulumulu
いやーほんとデザイナー泣かせだよなぁこれは。
2017/09/16 01:38:53
blueeyedpenguin
また開発者にしわ寄せが…
2017/09/16 02:33:16
camellow
なんだ？cssのなんたらとかいうのが新しいアイホンのために増えたの？cssはアイホンのためでもAppleのためでもないよ。無視しなよ、くだらない。こんなのに付き合わされるデザイナーは惨めだ。
2017/09/16 02:46:14
wasarasan
良い機能ちゃんとあるのね
2017/09/16 03:39:48
circled
海外勢：「notchを利用して笑えるUI作ったwww」「こんな簡単にiPhone Xに対応出来る方法見つけた。」日本勢：「iPhone Xのデザインは糞。死ね、Apple！」ってのを見てると優秀な奴は海外にしかいない雰囲気、本気でヤバイ。
2017/09/16 04:44:09
sessha1
見栄えを重視した結果使い勝手が落ちが可能性があるってことか。
2017/09/16 05:29:32
algot
youtubeで全画面表示した時にあの出っ張りを意図したアニメーションとか出てくるだろうな
2017/09/16 05:29:33
Rinta
なるほどねー。さすがにAppleの技術者もバカではない。
2017/09/16 06:40:14
GOD_tomato
「切り欠き」を無くしてマージンを完全に無くすことは出来なかったのか。
2017/09/16 06:59:31
kibarashi9
こんな少数の変態ハード無視すればいいだけだろ。
2017/09/16 07:25:22
garage-kid
505
2017/09/16 07:32:10
hatehateyahoo
仕事が嫌いな保守的エンジニアが多いな。喜々として対応する人は稼げるだろうな。
2017/09/16 08:16:02
Dugong01
まぁ通常表示ならデフォの余白があるから既存サイトや動画への問題は解決されるとして、大手や一部のオサレサイトだとこういう対応が必要になってくるのか
2017/09/16 09:52:11
delphinus35
趣味でやるのは楽しい、仕事ではツライ。いつものことのようだ。自分は前者。
2017/09/16 10:32:01
kaz-coz
あとで読む
2017/09/16 11:39:21
cv63kittyhawk
記念モデルとかは実験的な技術かデザイン使われるフシがあるよな
2017/09/16 13:38:20
z1h4784
一応これで対応はできそうか。実機がしばらく手に入らなそうなんで、実機検証しろと言われても困るけど。
2017/09/16 13:49:29
tyru
つらそう。Touchbar といい最近 Apple なんでこういう所で色気出したがるのん…
2017/09/16 14:23:24
tsuki-rs
iPhoneXの為に余分な記述が増えるんだね。。
2017/09/16 14:47:29
gfx
大変そう。
2017/09/16 15:53:09
perl48
こういう風にソッコーで最先端を追いかける人がいてくれるおかげで、普及するころにはデファクトスタンダードな実装ができるんだろうなぁ。ありがたい。
2017/09/16 17:12:55
marmot1123
これ、Webサイト側が対応するの？さすがに筋が違うのでは？
2017/09/16 17:56:47
isseium
“safe-area-inset-*”
2017/09/16 17:57:21
yamadar
いやー、この機種のためだけに存在するCSSってどうなのよ。iPhoneはこのデザインのままずっと続けるの？
2017/09/16 20:41:53
mrkn
viewport-fit=cover を指定したい時だけ特殊な指定が必要なんだから、今まで通りで問題ないってことですよね？
2017/09/16 21:57:43
chemisteacher
ほんとデザイナー泣かせ・・・・
2017/09/16 22:05:45
asterisknautz
Web App的にはありがたい情報。
2017/09/16 23:29:07
mh615033891
#memo
2017/09/17 08:19:38
outroad
作る側がここまで気にするかは別として、今の状況に対応しようとかユーザーにとって良い体験をしてもらおうっていう気概がiPhoneXには感じられないな。
2017/09/17 09:50:33
hush_in
標準モードだけなら特に気にすることないだろうけどメモ
2017/09/17 13:21:46
walkingdwarf
どのように利用されて行くのか注目ですね。
2017/09/17 17:37:52
nana_07
こういう記事見るとX欲しくなってしまう
2017/09/17 23:32:22
Hamukoro
こんなハックまみれのCSSは美しくない。ジョブズが生きていたら(ry
2017/09/18 08:28:26
solidstatesociety
発注側のおっさんが上どうにかならんの？っていい出したらどうするかが課題
2017/09/19 10:40:43
tttttahiti
正直記述が増えるしデザイナーさんも面倒だと思うけど、プロダクトのリリース前から対応策を考えられてるのはまだよかったのかも……
2017/09/19 14:44:25
headless_pasta
実機が手に入ってから確認しつつ対応するか。
2017/09/20 13:34:17
jhoshina
めんどくせぇなおい