Smart Communication Design Company
ホーム > ナレッジ > Blog > フロントエンドBlog

フロントエンドBlog

Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

自分でできるWebページのアクセシビリティチェック

UI開発者 宇賀

※ 2017年03月24日 20:48ごろ修正しています。本日時点で、WHATWGはHTML Validatorを提供していませんでした。

インターネット上に公開されているWebページはあらゆるユーザーの目に触れるものです。どうせなら、誰にとっても便利で使いやすく、不自由なく閲覧できるものにしたいですよね。

Webサイトの品質を保つために検品作業は欠かせないものですが、皆さんが業務や趣味で制作した成果物は普段どのような方法やツールで検品をなさっていますか?

たとえば、W3CやWHATWGが提供しているHTML Validatorを用いてマークアップの文法違反を見つけることや、Google Chrome、Mozilla Firefox、Microsoft Edgeといった異なるブラウザで作ったページを確認してレイアウトの崩れがないかを確認したりなどが思い当たるかと思います。

JavaScriptで機能を開発したのであれば、さまざまなブラウザで同一の挙動であるかどうかを確認するのはもちろん、不正な値を渡した場合の挙動などもテストをするでしょう。

目で見て手で動かして、といった画面上のレンダリングや挙動についての検品はいろいろとすぐに思い浮かぶと思います。

しかしながら「自身の成果物をアクセシビリティの観点から検品を行う」となるとすぐには思い浮かばないのではないでしょうか。

そこで今回は、手軽に実施できるアクセシビリティ検品のポイントを少しだけ紹介したいと思います。

全文を読む

MJMLでレスポンシブ Eメール デザインを作ってみる

UI開発者 郡司

MJMLとはレスポンシブ Eメール デザインを作成するためのフレームワークです。MJMLという独自のマークアップ言語で記述し、コンパイルするとHTMLファイルが出力されます。

1stリリースから約1年が経過しましたが、SitePointのFront-end Tools: My Favorite Finds of 2016という記事で存在を知り興味を持ったので実際に使用してみました。

今回使用するにあたって、HTMLメールを作成・編集できるデスクトップアプリケーションのMJML Appを使用しています。

ミツエーリンクス ニュースで作ってみる

MJMLはコンポーネントベースで作成することができ、ドキュメント上には解説と一緒にサンプルもあります。今回はこちらを見ながら、縮小版ミツエーリンクス ニュース Vol.178をざっくりとですがMJMLで作ってみました。

今回はさらにThe Biggest Email Marketing Trends in 2017 Will Be...から2017年のトレンドとしてインタラクティブなHTMLメールの需要が上がると予想しているとのことなので、MJMLで用意されているカルーセルを新規で追加しています。

テーブルレイアウトで作成しないのでコードの見通しがよく、実際にコンパイルされたHTMLを送信してみるとデザインの再現度が高く、HTMLをみるだけでも大変勉強になります。

MJMLでは1つの要素でもコンパイルされたHTML上は複数の要素で構成されているため既存のデザインを再現するのは難しく、本物のミツエーリンクス ニュースと同じデザインにするのは困難でした。

MJML Appをダウンロードして以下のソースコードを貼り付けると今回作成したHTMLメールを見ることができます。

<mjml><mj-head><mj-title>ミツエーリンクス ニュース Vol.178</mj-title><mj-attributes><mj-all /><mj-text font-size="16" font-family="'\30D2\30E9\30AE\30CE\89D2\30B4\20Pro\20W3', 'Hiragino Kaku Gothic Pro','\30E1\30A4\30EA\30AA', Meiryo,'Helvetica', 'Arial', sans-serif" /></mj-attributes></mj-head><mj-body><mj-container><mj-section><mj-column><mj-text color="#216aad" align="right" font-size="14"><a href="https://www.mitsue.co.jp/knowledge/mailnews/178.html" style="text-decoration: none; color: inherit;"> メールをブラウザで見る</a></mj-text></mj-column></mj-section><mj-section border-bottom="#e6e6e6 1px dotted"><mj-column width="20%"><mj-image src="https://www.mitsue.co.jp/cmn/img/mailnews/logo.gif" /></mj-column><mj-column width="80%"><mj-text color="#000000" padding-bottom="0" font-size="18">- 2017.02.15 -</mj-text><mj-text font-size="25" color="#000000" line-height="25px">ミツエーリンクス ニュース Vol.178</mj-text></mj-column></mj-section><mj-section><mj-column><mj-text color="#333333" font-size="18">ミツエーリンクスから最新のWeb業界動向や当社サービスの情報をお届けします。</mj-text></mj-column></mj-section><mj-section background-color="#f2f2f2" padding-bottom="0"><mj-column><mj-text padding-bottom="0">Index</mj-text></mj-column></mj-section><mj-section background-color="#f2f2f2" padding-bottom="0"><mj-group><mj-column width="10%" vertical-align="middle"><mj-button background-color="#666666" color="#ffffff" inner-padding="10px" padding-bottom="0" border-radius="0">1</mj-button></mj-column><mj-column width="90%" vertical-align="middle"><mj-text padding-bottom="0">コラム:運用ファーストでいきましょう(第15回)</mj-text></mj-column></mj-group></mj-section><mj-section background-color="#f2f2f2"><mj-group><mj-column width="10%" vertical-align="middle"><mj-button background-color="#666666" color="#ffffff" padding-bottom="0" inner-padding="10px" border-radius="0">2</mj-button></mj-column><mj-column width="90%" vertical-align="middle" padding-bottom="0"><mj-text>サービス閲覧ランキング TOP 10(2017.1.1~1.31)</mj-text></mj-column></mj-group></mj-section><mj-section><mj-column><mj-spacer height="10px" /><mj-column></mj-section><mj-section><mj-column><mj-carousel tb-hover-border-color="#216aad"><mj-carousel-image src="https://www.mitsue.co.jp/img/index/kv/default.jpg" /><mj-carousel-image src="https://www.mitsue.co.jp/img/index/kv/why.jpg" /><mj-carousel-image src="https://www.mitsue.co.jp/img/index/kv/how.jpg" /></mj-carousel></mj-column></mj-section><mj-section padding-bottom="0"><mj-group><mj-column width="10%" vertical-align="middle"><mj-button background-color="#666666" color="#ffffff" padding-bottom="0" inner-padding="10px" border-radius="0">1</mj-button></mj-column><mj-column width="90%" vertical-align="middle" padding-bottom="0"><mj-text>コラム:運用ファーストでいきましょう(第15回)</mj-text></mj-column></mj-group></mj-section><mj-section padding-top="0" padding-bottom="0"><mj-column><mj-image src="https://www.mitsue.co.jp/cmn/img/mailnews/bg_hdg_03.gif" /></mj-column></mj-section><mj-section><mj-column><mj-text>Webサイトの運用業務と並行して、Webデザインに関する最新の技術やトレンドについて情報収集したり学習することは、何かと動きが速いと言われるこの業界だけに、Web担当者の皆様はハードルがやや高いとお感じではないでしょうか。</mj-text></mj-column></mj-section><mj-section><mj-column><mj-button background-color="#fff" color="#0a77c4" padding-bottom="0" inner-padding="5px" border-radius="0" border="1px solid #0a77c4" font-weight="bold" font-size="18" align="left" font-family="'\30D2\30E9\30AE\30CE\89D2\30B4\20Pro\20W6', 'Hiragino Kaku Gothic Pro'">コラム</mj-button><mj-text font-size="18" font-weight="bold">日本発の民間月面探査チーム「HAKUTO」への協賛について</mj-text></mj-column></mj-section><mj-section background-color="#f4f4f4" background-url="https://www.mitsue.co.jp/cmn/img/mailnews/bg_dot_01.gif" border-radius="4px"><mj-column width="30%" vertical-align="middle"><mj-image width="103" src="https://www.mitsue.co.jp/cmn/img/people/kidachi.jpg" /></mj-column><mj-column width="70%" vertical-align="middle"><mj-text>2017年1月27日<br />取締役社長<br />木達 一仁</mj-text></mj-column></mj-section><mj-section><mj-column><mj-button href="https://www.mitsue.co.jp/column/backnum/20170127.html" font-size="18" background-color="#f2f2f2" color="#0a77c4" width="100%" inner-padding="20px" font-family="'\30D2\30E9\30AE\30CE\89D2\30B4\20Pro\20W6', 'Hiragino Kaku Gothic Pro'">コラムを読む</mj-button></mj-column></mj-section></mj-container></mj-body></mjml>

簡単ではありますが以下に、頻繁に使用した要素について記載します。以下の要素に独自の記法でスタイルを当てることでデザインを適用します。

コンパイルされたHTMLファイルをブラウザで表示すると以下のようになります。

気になるカルーセルの対応状況

個人調査の元ではありますが、カルーセルの対応状況は以下になります。崩れを起こしている環境ですが個人的見解となっていますので実際にカルーセルを使用する際はどの程度の崩れを許容とするか協議が必要です。

注意点

CSSのサポート状況にバラツキが大きく、閲覧環境によって表示が異なるHTMLメールを作成するにあたって対応環境の策定は重要な部分となります。

MJMLでは使用するコンポーネントに付与するスタイルによって対応環境が確認できますので、デザイナーと一緒に確認しつつ進めるのが得策と言えます。

また、コンパイルしたHTMLファイルをそのまま配信するのは、要件によっては難しいかもしれません。

まとめ

MJMLは以下の特徴を掲げています。

Flexible Boxが使えるようになっている昨今、テーブルレイアウトのようなある意味で特別な知識をもって実装する必要がないので、HTML、CSSが使えるデザイナーであれば、MJMLの特徴を十分に発揮してレスポンシブ Eメール デザインを作成できると考えます。

Mozilla Firefox Nightly 54にECMAScript 2016-2017が実装

UI開発者 渡邉

2017年2月22日、ECMAScript 2016+ in Firefoxで、Mozilla Firefox Nightly(バージョン54相当)にECMAScript 2016仕様および2017ドラフト仕様が実装されたことが発表されました。

これはWebKit r211141(2017年1月25日)に次ぐ早さでの実装です。

他ブラウザ(JavaScriptエンジン)の実装状況は、Kangax ECMAScript 2016+ compatibility tableから参照することができます。

ECMAScript 2016および2017ドラフトは、比較的小規模な変更が追加されるにとどまっています。そのため、比較的実装がしやすく、この早さでの実装完了に至ったと思われます。

V8(Google Chromeが使用するJavaScriptエンジン)とChakra(IEおよびEdgeが使用するJavaScriptエンジン)もこの流れに追従し、頑張って実装していってもらいたいものです。

PWA(Progressive Web Apps)の現状とその開発方法

UI開発者 泉口

PWAとは

PWA(Progressive Web Apps)とは、ネイティブアプリ的な挙動をするWebサイトのことで、例えるならWebサイトとネイティブアプリを足して2で割ったような物と考えてもらえば解りやすいと思います。2015年に開催されたChrome Dev Summitや、2016年5月に開催されたGoogle I/O 2016において大々的に提唱され、実例や測定結果から2017年現在も注目を集めています。

個人的にはハイブリッドアプリの代名詞的な位置にあるApache Cordova(PhoneGap)のような印象があるPWAですが、後述の通りアプリとしての開発・公開の敷居は低く、仕様を理解していればエディタとGoogle Chromeだけで、特別なツールを使うことなく開発することができます。

PWAの利点

では、WebサイトをPWA化することに、どのようなメリットがあるのでしょうか?Google Developersによる、はじめてのプログレッシブ ウェブアプリでは次の特徴を挙げています。

  • 段階的
  • レスポンシブ
  • ネットワーク接続に依存しない
  • アプリ感覚
  • 常に最新
  • 安全
  • 発見しやすい
  • 再エンゲージメント可能
  • インストール可能
  • リンク可能

この中でも、ネットワークに依存せず、オフライン環境でも機能すること、アプリ感覚のユーザーエクスペリエンスを提供できること、再エンゲージメント・通知可能なことが、Webサイトと最も異なる点と言えます。

測定と実例

Google Developersによる、Measuring the Real-world Performance Impact of Service Workersでは、Google I/O 2016におけるスケジュールのプッシュ通知テストにおいて、58.9%が通知を許可したと記載しています。また、Google DevelopersにおけるCase Studiesにおいては、Suumoのプッシュ通知の実例が記載されています。このケーススタディ上の結果としては、75%のロード時間の短縮、及びプッシュ通知から31%のオープンレートと記載されています。

測定結果が示す通り、モバイルデバイスからのアクセスが利用者の半数以上を占めるWebサイトも多くなる中で、この仕組みは利用者のアクセスをより加速する転機になる可能性を秘めています。

また、App StoreやGoogle Playへ登録する必要なく、ブラウザからの登録でホームスクリーンに追加することができるインストールのアプローチは、Android用Chrome 57 Betaにて実装され、PWAの普及が目前に迫っている事を示しています。これは、例えば店舗サービスに使用する割引などをPWAで実装し、ホームスクリーンに追加・表示することで、店舗割引が受けられるシステムや、商品の発売日に通知を行うECサイトなどが現実的になりつつあると言うことです。

開発とそのテスト

実際の開発では以下の条件を満たす必要性があります。

しかしテストレベルの段階であればPCのブラウザでも試すことは可能です。次の項目ではいくつかの例を記載します。

Web Server for Chromeを使用する

Web Server for Chromeを使用し、Google Chrome上でサーバーを立ち上げ、PWA開発ディレクトリを指定します。この方法はHTTPS環境が無くてもPWAを開発することができるため、突発的なテストに向いています。

Google Chrome デベロッパーツールから「Add to homescreen」を押下すると、PWAとしてショートカットを登録します。

登録後にショートカットを起動すると、ブラウザのアドレスバーや設定アイコンが取り除かれた状態でPWAが起動します。Webサイトだけに留まらず「よく使うことのあるツール」などをPWAとして登録し、デスクトップから起動するなどの使い道も考えられます。

Polymer CLIを使った方法

Web Componentsで有名なPolymerでもPWAをテスト、開発する事が可能です。インストールからサーバー立ち上げまでを数行のコマンドでテストすることができるため、最も簡単に本格的なPWAを試すことができる方法の一つと言えます。次のコードはPolymer CLIを使って、ECサイトを立ち上げるまでのコマンドです。たったこれだけで、驚くことにECサイトに最低限必要なカートや登録画面など、一括して生成してくれます。

npm install -g bower
npm install -g polymer-cli
polymer init
> shop - The "Shop" Progressive Web App demo
polymer serve --open

フレームワークを使用した開発方法では、他にもAngularを使ったAngular Mobile Toolkitや、Reactベースの開発方法を記載したProgressive Web Apps With Reactなども参考になります。

Androidエミュレータを使った方法

開発と言うよりはインストールのテストになりますが、実機を持っていない場合でも、BlueStacksなどのAndroidエミュレータを用いることでPWAのインストール(ホーム画面への追加)をテストすることができます。例えば端末の設定からPWAの通知を切ってみたり、ブラウザからインストール済のPWAへのリンク遷移が発生した場合、PWAが起動するなどの挙動を実際に確認することができます。エミュレータの挙動が実機と異なる場合を考慮すると、実機に優る物は無いので、この方法を推奨する訳ではありません。

PWAの問題点

2月現在、残念なことにSafari、Microsoft EdgeにおいてService Workerが実装されていないため、PWAは全てのプラットホームで機能する状態ではありません。しかし、Microsoft Edge Dev BlogにおけるThe Progress of Web AppsではService Workerが開発中であることを示しています。そのため、Safari、Microsoft Edgeでの実装も時間の問題と言えるでしょう。

Safari v10.1 の新機能と仕様

UI開発者 宇賀

2017年1月25日、Appleが開発しているSafariの最新バージョンとなる「Safari v10.1」に搭載される新機能と仕様が公開されました。

What's New in Safari

ECMAScript 2016およびECMAScript 2017が実装される点や、XMLHttpRequestの新しい通信手段として存在しているFetch APIが実装されることなどが話題となっています。

HTMLについても、a要素がdownload属性をサポートするようになり、ファイルをダウンロードするためのリンクということを明示できるようになりました。download属性は値を持たせなくても機能しますが、値を持たせることで指定した値をファイル名としてファイルをダウンロードさせることができます。

<a href="dummy" download="hoge">ダウンロード</a>

それから、CSSでも以前から話題となっていたdisplayプロパティの1つ、gridがサポートされます。ChromeやFirefoxでもデフォルトのままでは動作しないのが現状ですが、CSS Grid Layout Moduleを用いることができるようになれば今まで以上に柔軟なレイアウトを実現できます。tableやflex、floatプロパティ、ちょっと違った角度からだとCSS Shapesなど、たびたび注目されるレイアウト関連のプロパティだけに、Safari10.1がGrid Layoutを正式実装することでその他のベンダーの今後の動きにも影響がありそうです。

アクセシビリティについては、Media Queryでprefers-reduced-motionという値がサポートされました。これにより、端末の設定で視差効果を減らす設定にしているユーザー向けのCSSを記述することが可能になりました。

ユーザーが閲覧する環境の変化は、Webサイトやアプリを制作する開発者にとっても重要なことです。もちろん新たな仕様が実装されてきているのはSafariだけではないため、各ベンダーの実装状況を今後も追いかけていきたいと考えています。

※ ブラウザの設定を変更することで動作させることができます