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拡張をリリースしている方のツイートを拝見するとこのようなものも。近々システムが変わったりするのでしょうか?

セキュリティ、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対応を決めたことで、これから普及しそうですね。

PWAがどのように動作するかは、上記ツイートの動画を観て頂くとイメージしやすいかもしれません。

エンジニアの次のステップへの勉強法 – Qiita

エンジニアとして今学んだ方が良いこと。機械学習は仕組みを知るために学んでおいた方が良い気がしています。

帰ってきたGulp 4 – Qiita

タスクがただの関数になった素のNodeのスクリプトを書くのともう変わらないなど。
gulpを使用していなかった方も改めてチェックしても良いかもしれませんね。

2018年に見直した現代的なJavaScriptの記法を紹介するぜ – ICS MEDIA

「😀.length」が1ではなく2になるということが書かれていますが、似たような問題で、たとえば以下のように「😀.split」で分割しようとした時に絵文字は問題を引き起こします。

上記ツイートの画像は、1文字ずつ「!」または 「゛」を追加する例ですが、このままでは「😀」のような絵文字の処理がうまくいかず、文字化けしてしまいます。

そこで、この記事にあるようなスプレッド演算子「…」を使用すると、絵文字など length が1でないものも含めてうまく処理できます。

マーケティング

話題の「ads.txt」っていったい何? 広告主なら必ず知っておきたい広告不正の手口と基礎知識 | Web担当者Forum

広告を出稿されている方はチェックされた方が良さそうです。

その他

フェイスブック、リッチな3Dモデルの投稿が可能に | Mogura VR – 国内外のVR/AR/MR最新情報

Facebookに glTF 2.0 形式の3Dモデルを投稿できるようになりました。
glTF 2.0 とはリアルタイム3Dアセット配布の標準フォーマットで、下記ページなどに詳しく書かれています。

参考: クロノス・グループ、「glTF 2.0」を発表 – Press Release – Khronos Group

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