2018年1月の、これだけは押さえておきたいWeb関連の動き

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。

Webデザイン

ワイヤーフレームの作り方のコツ|制作時や評価時に意識すべきこと | Pinto!

ワイヤーフレームはデザインの下書きではない というのはなるほどと思いました。
ワイヤーフレームは情報設計のためのものですが、いつの間にかデザインカンプの下書きにしてしまっている方が多いかもしれませんね。

次期macOSでの32-bitアプリサポート終了に伴い、Adobe CSなど動かなくなる可能性があるアプリをチェックする方法。 | AAPL Ch.

さすがに仕事で Adobe CS6 以下を使用している企業はもうないだろうと思いますが、今度こそ裏技を使用してもCS6以下は起動しなくなりそうです。
CS6を動かすためにOSをアップデートしない、というのは大変危険な選択なので、CCを契約するか他社製品に乗り換えるべきでしょう。

Photoshopの新機能「被写体を選択」がどれほど凄いのか、ぱくたそのフリー素材で検証してみた | ぱくたそ公式ブログ

最新の Photoshop CC 2018 は写真の中からメインの被写体と思われるもの(ピントが合っている、大きく写っている人物など)を1クリックで選択できる機能がつきました。
私も試してみたところ、ピントが合っているシンプルな形状であればうまくいくことが多かったです。

次世代のロゴデザインに欠かせない!レスポンシブロゴの基本|ferret [フェレット]

数年前に、デバイスに応じてシンプルになるレスポンシブアイコンという考え方がありましたが広まりませんでした。ロゴの場合はまた話は別なのですかね?

IPA、あらゆる人名の文字化けがない「IPAmj明朝フォント」 ~約6万漢字を国際標準文字コードに対応 – PC Watch

IPAmj明朝フォント | 文字情報基盤整備事業 によると、企業/個人、商用・非商用を問わずご利用いただくことができます とのこと。

コーディング

メモ:両HTMLにおけるmain要素の説明、ついに一定の収束の気配か。 – 水底の血

文書のmain要素の数に制限はないが、ウェブ開発者は単一の要素にこだわることを勧める ということで、やはりmainは1つにしておいた方が良さそうですね。

これから開発されるFirefoxの新規機能は、HTTPSにしか対応しない。新規のCSSプロパティなども対象 - Publickey

WebをHTTPSにしたいというのは理解できるのですが、一部HTTPが残っているWebサイトで「Firefoxのみ、一部のページ(HTTP)が新しいCSSプロパティに対応しているため崩れる」といった問題が起きた時に面倒そうだなと感じます。

HTMLコーディングの人気のスタイルは? アンケート結果から分析するイマドキのウェブ制作事情 – ICS MEDIA

Webサイトの大枠レイアウトが、とうとう float より Flexbox を使う方の方が多くなっていますね。

CSS Gridでレイアウトやフレームワークの考え方・作り方が変わる | Rriver

Bootstrapなどで採用されているグリッド・システムが必要なくなる というのは良いですね。
class名を “col-4” のような書き方をしなくて済むのも良さそうです。

CSS Gridとアクセシビリティについて気になっていたこと | Rriver

HTMLソースはセマンティックスに則って論理的な順番で記述して、CSS Gridは視覚的な順番の変更にのみ使いましょう ということが仕様に書かれているそうです。

HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ | コリス

コメントで指摘されていますが、この記事に書かれていることのほかに「divがdt, dd以外にもdlの子要素として使えるようになった、dt, ddの中でしか使えなかったdfn要素が、liの中でも使えるようになった」などの変更もあるようです。

SVGでリアルな湯気を作ってみる | Tips Note by TAM

メインビジュアルが物足りない時などに使えそうですね。

SNS

Facebook、企業やブランドより友達の投稿をさらに優先するアルゴリズム変更 – ITmedia NEWS

Facebookページオーナーにはつらいですね。FB社は ページオーナーに対し、コメントが多く付けられる傾向にある「ライブ動画」を投稿するよう奨励 しているそうです。

Google・SEO

Google ウェブマスター向け公式ブログ: ページの読み込み速度をモバイル検索のランキング要素に使用します

ユーザーに本当に遅い体験を提供しているようなページについてのみ影響 とある通り、速ければ速いほど上位になるという話ではなく、ページの表示速度が極端に遅い場合に順位に影響することがあるようです。

Google、ユーザーを尾け回す広告のミュート機能強化――「リマインダー広告」の表示停止が可能に | TechCrunch Japan

不思議に思う方もいらっしゃるかもしれませんが ユーザーがすでに興味を持っていないプロダクトならいくら「リマインダー広告」を表示しても効果がない。これは結局Googleのビジネスに良い結果をもたらさない。 という理由が大きそうですね。

Google AMPに関する公開書簡

Googleの検索における独占的な地位を背景にコンテンツをGoogleの中に入れざるを得ない状況は避けるべき というのは私もそう思います。
このブログがAMP対応しないのはその理由と、「シェアしようとした時にURLがGoogleのものになってしまうのが嫌だ」という方が多いためです。

Google CloudがプリエンプティブなGPUをローンチ、料金は50%安 | TechCrunch Japan

タイトルだけ見て「機械学習やディープラーニングに良さそう」と思っていたら フォールトトレラントな機械学習など、バッチで処理される計算集約的なワークロードに適している とのことで、やはりそちらの用途向けなのですね。

Apple

Safari による User-Agent 固定化と Web における Feature Detection | blog.jxck.io

SafariがUA文字列を固定に。追跡広告防止のためのようです。

iOS 11の採用率65%に留まる 史上最低のペースへ | ソフトアンテナブログ

iOSは最新のOSにほとんどのユーザーがすぐにアップデートしてくれることが開発者にとって大きなメリットでしたが、iOS 11は残念ながらそうはなっていないようです。

劣化したバッテリーを搭載したiPhoneの速度抑制機能の報道によって採用率が低くなっているのではないか とのこと。

「有料ガチャ確率」明記を義務付け 「App Store審査ガイドライン」日本語版 – ITmedia NEWS

最近は多くのソーシャルゲームで確率表記されていますね。

セキュリティ

「WPA3」2018年後半より利用可能に、WPA2を拡張するWi-Fiセキュリティ機能 – INTERNET Watch

2018年後半にも利用可能になる見込み だそうです。

Adobe、Flash Playerの脆弱性に対処 悪用されれば情報流出の恐れ – ITmedia エンタープライズ

1月9日のアップデートで修正されているそうです。

CNN.co.jp : ウィンドウズPC、CPUの脆弱性対応で動作速度に影響

Windows 10に関してはユーザーが気づくことはほとんどなさそうな一方、Windows 7や8は 大部分のユーザーが、動作速度が遅くなったことに気付くだろう とのこと。

Googleが発見した「CPUの脆弱性」とは何なのか。ゲーマーに捧ぐ「正しく恐れる」その方法まとめ – 4Gamer.net

昨年末から「Spectre」(スペクター)や「Meltdown」(メルトダウン)という脆弱性が大きな話題になりましたね。
関連記事もたくさんあります。

パッチを当てるとAWSなどのクラウドサーバおよびWindows 7と8はCPU性能低下の影響を受けやすく、WindowsやmacOSではパッチを当てると一部の環境(macOSの場合はESETがインストールされている環境)でOSが起動できなくなるなどの問題も発生しました。現在はESETのアップデート版がリリースされています。

その他

「USB 3.2」で何が変わる? 知っておきたい2018年のPC注目技術 (1/3) – ITmedia PC USER

従来の2倍、最大20Gbps と、さらに速くなるのですね。

米ホワイトハウスがCMSとしてWordPressを採用。Drupalから変更 - Publickey

さまざまな憶測を呼びましたが、単に新しい担当者が使えるCMSがWordPressだったという事情のようです。

test.comやaaa.comをテストデータに使うのはやめましょうという話

メール送信スクリプトでたまにこういうの使ってる方がいてびっくりすることがあります。そういうときは example.com を使用しましょう。

フェイスブック、仮想通貨の広告を全面禁止へ ICOも対象、全世界で (写真=AP) :日本経済新聞

仮想通貨を推奨する全ての広告が対象になるとみられる とのことで、子会社のInstagramも同様とのこと。

ECMAScript 2015以降のJavaScriptの’this’を理解する | Web Scratch

やはりJavaScriptの ‘this’ は難解ですね…

If you like this article click the Facebook “Like” button to share it with your friends!