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

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

デザイン

フリーランスWebデザイナーの「仕事とくらし」10年のこれまでとこれから // Speaker Deck

spicagraph さんのスライドは、毎回イラストが豊富でわかりやすいですね。
「自分に合った勉強法を探す」「にんじんを探す」のは大切ですね。

Adobe MAX Japan 2016 ビデオアーカイブ

Adobe MAX のセッションの一部が動画で観れるようになっています。

ボタンデザインの歴史と進化から学ぶベストプラクティス | UX MILK

Webページやアプリにおけるボタンデザインの変遷がまとめられています。

デザイナーが馬鹿げたタダ働きにNOと言うべきことが分かる動画| 広告制作・広告デザイン事務所 AMIX

スペックワークを平たく言えば、「気に入ったらお金を払うよ (気に入らなければ払わない)」という類のクライアントからの要求です。

昨年公開された動画ですが、なぜか今月話題になっていました。
英語の動画ですが、記事に日本語訳が書かれています。

建築や飲食だと、いかにスペックワークがおかしいかがわかりやすいですね。

Mac・iPhone・Safari

macOS Sierraへアップグレードする前の注意点まとめ。 | AAPL Ch.

Gatekeeper が強化され、いわゆる野良アプリが開けなくなりました。
これを元に戻すためにターミナルでコマンドを入力することを推奨している記事が多く見られますが、それは危険な行為です。

ターミナルで設定を変更するのではなく、信頼できるアプリケーションのみ Finder でアプリーションアイコンを右クリックして「開く」を選択することで、これまで通りアプリケーションを開けるようになります。
こうすることで、怪しいアプリケーションをうっかり起動してしまうことをある程度防ぐことができます。

次期「Safari 10.0」で新しく追加される機能まとめ – GIGAZINE

IndexedDBのサポート、Shadow DOMバージョン1規格に準拠、ES6、ピクチャ・イン・ピクチャ(再生中の動画を分離して別ウィンドウで表示)など。

Webコーディングスクール 体験レッスン受付中

コーディング

Webkit を念頭に作成されたサイトで起きるブラウザ互換性問題に対する Firefox の対応 | Mozilla Japan ブログ

例えば、CSS3 を使用するときに「-webkit-」接頭辞付きのプロパティだけを表記して「-moz-」接頭辞や接頭辞なしのプロパティを記述しないWebページが増えてきたため、Firefox も一部の「-webkit-」接頭辞に対応するようです。

そういえば、末期の Opera も似たようなことをやってましたね…

gulp:とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル | NxWorld

分かりやすくまとまっています。

レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 – ICS MEDIA

<img srcset=””> や <picture> を使ったレスポンシブイメージの解説です。
Retina ディスプレイの対応にも使えますが、私は Retina 対応そろそろ必須だと思っています。

Autoprefixerの対象ブラウザって、どうやって選べばいいの? – Rriver

Google Analytics を使用して、自分のサイトのユーザーの○%以上のブラウザに対応するなど、なるほどと思いました。

CSSの単位(em, rem)を使った、これから取り入れていきたい実装テクニックのまとめ | コリス

「縦と横の比率を維持したボタン」など。

スマートフォン対応

FlexboxでAndroid 4未対応のボックス折り返し(flex-wrap)を実現する方法 – Qiita

Flexboxレイアウトを強制的に適用するflexibility()メソッドを使用して、Android 4系でも flex-wrap を実現する方法。

SNS

Twitter、ツイートの140字制限に画像、動画、投票、引用ツイートを含まぬ仕様変更 – ITmedia ニュース

公式クライアントなどで、URLや画像を140文字に含まないように変更があったそうです。

アカウント一斉凍結を受けて、Twitter とのつきあい方を考え直すことにしました – 頭ん中

Twitter で運用していた bot アカウントが一斉に凍結されたそうです。
どうやら、アカウント毎に判断されたのではなくAPIキー単位でまとめてブロックされたように見えます。

自動化ルールと成功事例 | Twitterヘルプセンター には「アカウントの自動処理がTwitterルールに違反した場合(スパム投稿をリツイートしたり、同じリンクを繰り返し投稿したりするなど)、アカウントが凍結されることもあります」と書いてあります。

10代女性の7割以上がTwitterアカウントを複数保有、7アカウント以上も8.3%、コロプラ調査 -INTERNET Watch

以前から10代の女性は複数の Twitter アカウントを所有している方が多いという統計でていたので、やはりという感じです。

アクセシビリティ

WordCamp Tokyo 2016 「WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜」 // Speaker Deck

アクセシビリティ対応のテーマというのもあるのですね。

pa11y のレポートを日本語で表示したかったので HTML_CodeSniffer の日本語版作った | WWW WATCH

ちょっと準備が手間かかりそうですが、日本語でアクセシビリティに関するレポートが見れるのは良いですね。

アクセス解析

Google Analyticsの本気。AIによる無料アドバイス機能『Analytics Assistant』の衝撃 – BITA デジマラボ

今のところスマートフォンアプリで英語のみですが、人工知能がわかりやすいアドバイスをしてくれます。

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index