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

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

Webデザイン

デザイナーの秘密道具@spicagraph

デザイン、キャッチコピー、アピールポイントなどの話です。イラスト入りで分かりやすいですね。

Adobe XDで快適！と感じたこと6つ – aicocco’s PhotoLog – g.o.a.t

ワイヤーとカンプ、プロトタイプを1つのファイルでできるようになったというのは良いですね。

iOS 11 iPhone GUI | Facebook Design

FacebookによるiPhone iOS11 UI素材。PSD、Sketch等。

コーディング

CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス

IE11を除くモダンブラウザで使用できるCSSの変数機能について。
変数名の前につけるのが $ ではなく — とか、使用する時に var() で囲むというのがなかなか慣れなさそうですね…

CSS Paint APIでJavaScriptからCSS用のグラフィックを動的に生成する

CSS Paint APIなんて出ていたのですね。今までcanvas要素で背景を動かしたりしていましたが、それに取って代わるのでしょうか？

Bootstrap 4が全然盛り上がってないから試した → 思ったより良かった – Qiita

そういえば、1月に正式リリースされたのにあまり話題になっていませんね…
Flexboxに対応したことで row > col-3, col-3, col-6みたいなdiv構造作らんでも良い感じに整列できるとのこと。

Google

AMP対応ニュース記事に掲載する画像のサイズ要件をGoogleが変更、横幅を696pxから1200pxへ | 海外SEO情報ブログ

タイトルの通り変更され、今までよりも大きなサイズの画像でないと、AMP カルーセルに表示されなくなる可能性があります。とのこと。

「Chrome」の迷惑広告ブロック、2月15日に開始 – CNET Japan

Google、Chromeブラウザでの劣悪広告ブロック開始、仕組みを説明 – ITmedia NEWS

今のところ、この機能で広告がブロックされたページを見たことがないのですが、ページを開くと自動的に音声付きで再生される動画広告などがブロックされているようです。
しかしYouTubeの動画広告は今まで通り再生されるようで、ブロックされる広告の基準に納得できない方も多いのでは？と思っています。

Chrome拡張機能に「不正なソフト」が急増している──安易なインストールに「データ漏洩」の危機｜WIRED.jp

ユーザー数の多いChrome拡張がいつの間にか怪しい企業に売却されるなどして、アップデートでマルウェア入りに…という話を最近よく聞くようになりました。
Google Play（Androidアプリストア）は最近はGoogle Playプロテクトという機能でマルウェアなどの監視をしていますが、Chrome拡張もそのようなものが必要だと思っています。

Chrome storeの管理画面、警告とか出まくってて「サービス終了3ヶ月まえ」って雰囲気が強い

— Local Proxy (@kyo_ago) 2018年3月1日

Chrome拡張をリリースしている方のツイートを拝見するとこのようなものも。近々システムが変わったりするのでしょうか？

セキュリティ、HTTPS

【重要】WordPress手動更新のお願い | さくらインターネット

WordPress 4.9.3のバグで自動アップデートできなくなっています。
まだアップデートされていない場合、至急手動アップデートをしてください。

今なぜHTTPS化なのか？インターネットの信頼性のために、技術者が知っておきたいTLSの歴史と技術背景 – エンジニアHub｜若手Webエンジニアのキャリアを考える！

わかりやすくて詳しいと話題になっていた記事です。

そのSSL/TLS証明書は大丈夫？　Google Chromeからhttpsサイトとして信頼してもらえなくなる場合も!? – INTERNET Watch

Chrome CanaryやFirefox Nightlyなどでは、既にシマンテックの証明書が利用できなくなっているようですね。
これらのブラウザーでは既に見れなくなっているサイトも結構あるようですが、大丈夫でしょうか…

Mozilla、アプリキャッシュへのHTTPアクセスを遮断～「Firefox 62」から正式導入へ – 窓の杜

HTTP接続には、“なりすまし”の可能性が排除できないためとのこと。
Firefoxは、HTTP接続の場合一部の機能を削除したり、今後の新機能追加をしないということを予告していました。

「Adobe Flash Player」にゼロデイ脆弱性〜Adobe、修正版を5日にリリースへ – 窓の杜

本脆弱性を悪用したWindowsユーザーに対する標的型攻撃も確認されているとのこと。

CSSをハックしてパスワードを盗み取るキーロガーが登場 – GIGAZINE

CSSだけでキーロガーを作る（※追記あり） – R42日記

一瞬、Webブラウザーの脆弱性かと思ったのですがReactが入っているページで実行可能とのことで、Reactの実装の問題な気がします。

2018年のパスワードハッシュ – Qiita

PHPのpassword_hash()は良さそうですし、そもそもログイン機能はソーシャルログインで良いよね、という話のようです。

Apple

Appleは年1回のOSアップデート・スケジュールを見直し、macOS 10.14/iOS 12からの今後2年間をOSの不具合の修正と一部の新機能に集中するもよう。 | AAPL Ch.

最近のApple製品（特にmacOS、iOS）の品質には大きな問題があり、たとえばパスワードなしでrootログインできる、［パスワードのヒント］ボタンを押すとパスワードそのものが表示されるなど多くの問題があり、私もHigh SierraやiOS 11へのアップデートを懸念していましたが、ようやく方針転換するようです。

Appleはすべてのアプリに「iPhone Xディスプレイのサポート」を義務づける – GIGAZINE

いつか来るかもとは思っていましたが… iPhone Xの後継製品出すつもりがあるということですかね？

プログラミング

AppleもiOS/macOSをProgressive Web Apps（PWA）対応へ。次のSafari 11.1でService Workerなど実装－ Publickey

マイクロソフト、Progressive Web Apps（PWA）をWindows 10のデスクトップで実行可能に。Windows 10はWindows、Linux、PWA対応のプラットフォームへ－ Publickey

PWAとはWeb技術で開発され、通常のWebアプリとしてだけでなくオフライン実行可能でネイティブアプリのように振る舞うことができるものです。Apple、MicrosoftがPWA対応を決めたことで、これから普及しそうですね。

Just for kicks, here is @davatron5000‘s @godaytrip as a #PWA on a preview build of Windows 10! 🚀(inspired by: https://t.co/Flm63mmu6K) pic.twitter.com/t2Kr5MlTOX

— Kirupa 🍊 (@kirupa) 2018年2月1日