フロントエンドBlog
Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。
Storybookでモジュール一覧を作る
当社ではサイトを構築する前に、全体で共通して使うパーツ（当社では「モジュール」と呼んでいます）を洗い出し、モジュールだけを集めたモジュール一覧ページを作成することがあります。モジュール一覧には、各モジュールをどのようにマークアップするか、マークアップ時の注意点などを羅列します。一覧を作成しておくことで、複数人で作業した場合でも人によるマークアップのゆれを減らし、効率のよい開発ができます。
最近はReactやVue.jsをはじめとするフレームワークを使用するプロジェクトが増えてきており、モジュールと同じようにコンポーネント一覧を作ることがあります。モジュールはコンポーネントに似ていますが、コンポーネントはさまざまな状態（State）を持ち、状況によって見た目や機能が変わるという違いがあり、全ての状態を一覧するページを0から作るのは手間がかかります。そんなときにオススメなのが「Storybook」です。
clip-pathを使ってWebページの表現方法を増やそう！
突然ですが、皆さんCSS3を活用していますか？ 複雑なレイアウトを画像で済ませていませんか？
昔はfloatプロパティなどを活用して「あーじゃないこーじゃない」と作っていた複雑なデザインも、今やflexboxプロパティが多くのブラウザでサポートされたことによって、低労力＆少ないコードで再現することができるようになりました。
CSS3にはflexboxプロパティのほかにも、複雑なデザインやおしゃれなデザインを簡単に作れる便利なプロパティが沢山あります。
今回は、その中でも複雑なデザインを再現することができる「clip-path」プロパティをご紹介します。
clip-pathは要素を自由自在に切り抜くことができるプロパティです。
切り抜きといえばこれまでは「clip」プロパティもありましたが、こちらは現在非推奨となっており、clip-pathに置き換えられました。
※現在clip-pathは勧告候補であり、全てのブラウザで機能するものではありません。
詳しくはCan I use CSS clip-path propertyをご確認ください。
browerlist-ga を利用して開発対象のブラウザにより適した Browserslist を設定してみよう
Browserslist とは、 Autoprefixer や Babel などのツールにおいて、開発対象ブラウザを共有するためのライブラリです。
Browserslist は通常 Can I use のデータを元に、全世界のブラウザ利用状況の中から package.json などの設定ファイルに指定した記述に従って対象ブラウザを列挙します。
スマートデバイス用Webブラウザー向け開発コンソール「Eruda」
2018年5月現在、メジャーなデスクトップ用Webブラウザーには標準で開発コンソール（開発ツール）が付属しています。DOMインスペクター、コンソール、JavaScriptデバッガー、スタイルエディター、パフォーマンス測定、メモリービューアー、ネットワークモニター、ストレージ表示など、様々な機能が追加されており、今もなお各Webブラウザーベンダーによって開発が続けられています。
スマートデバイス用Webブラウザーにも同様の仕組みが存在しており、USBケーブルでコンピューターに接続することで、iOS Safari、Google Chrome、Firefox for Mobileはデスクトップ用Webブラウザーとほぼ同等の開発コンソールを利用することができます（リモートデバッグと呼ばれています）。
しかし、リモートデバッグには2つの欠点があります。1つ目は、ホストとなるコンピューターが必須であること（特にiOS Safariは、macOSマシンならびにMobile Safariと同一バージョンのデスクトップ版Safariが必須です）。2つ目は、iOS Safari、Google Chrome、Firefox for Mobile以外のスマートデバイス用Webブラウザー（特に、古いAndroidのWebViewを利用した、スマートデバイスメーカー独自のもの）ではリモートデバッグが利用できないことです。
そんなときに重宝するのが、これから紹介する「Eruda」というスマートデバイス用Webブラウザー向け開発コンソールです。昔利用されていた、「Firebug Lite」を高機能化したようなものだといえば、古くからWeb開発に従事されてきた方々にはわかりやすいと思います。
任意のスマートデバイス用Webブラウザーで、前述したEruda公式サイトを閲覧してみてください。「Trigger Error」ボタンがあるのでタップしてみると、デスクトップ用Webブラウザーに付属の開発コンソールのようなものが、スマートデバイスの画面下方に表示されます。
右下に薄く表示されている歯車アイコンをタップすると、コンソールの表示・非表示を切り替えることができます。
よく見てみると、DOMインスペクター (Elements)、ネットワークモニター (Network)、リソースビューアー (Resources)、ソースコードビューアー (Sources)、各種情報 (Info)、スニペット群 (Snippets)、設定 (Settings) といった項目があるのがわかります。
2018年5月現在、プラグイン（追加）機能としてFPS情報 (FPS)、実装機能チェック (FEATURES)、ベンチマーク (BENCHMARK)、位置情報 (GEOLOCATION)、各種タイミング測定 (TIMING)、メモリービューアー (MEMORY)、JavaScriptコード実行 (CODE)が用意されています。
Erudaのソースコードに付与されたソフトウェアライセンスはMIT Licenseであるため、プロジェクトへの組み込みも容易です。
JavaScriptブックマークレットにも対応しており、任意のページで簡単に開発コンソールを起動できる点もうれしいところです。
より詳細な利用方法は公式GitHubのREADME.mdに譲りますが、前述した機能だけでも非常に多様で、高機能であることがわかります。
Erudaは、開発環境に制限のある開発者の方々にぜひとも利用してみていただきたいツールの1つです。
Happy Hacking!
AMP for Emailに期待できる新たなメール戦略
2018年4月末に東京でAMP Roadshow Tokyo、5月上旬にアメリカのカリフォルニア州でGoogle I/O 2018が開催され、AMPの新機能や、新たな活用方法などが発表されました。
その中でも特に注目しているのが、2018年中にGmailでサポート開始予定のAMP for Emailです。
AMP for Emailでは、AMP HTMLでHTMLメールを実装することで、従来のHTMLメールでは実現できなかった、インタラクティブな機能やリアルタイムなコンテンツの表示が可能となります。
これまでEメールは、Webサイトへの誘導としてよく使用されてきましたが、AMP for Emailを使用することで、よりWebサイトに近いユーザー体験や、鮮度の高い情報を提供できるようになります。
AMP for Emailで実装可能になること
インタラクティブなコンテンツの実装
AMP for Emailでは、いくつかのコンポーネント（amp-carouselやamp-lightboxなど）が使用できるため、Eメール内にインタラクティブな機能（カルーセルやライトボックスなど）の実装が可能になります。
さらに、コンポーネントに状態を持たせたり、コンポーネント同士を連携させるamp-bindも実装予定のため、アイデア次第では独自性の高い機能も実装できるようになりそうです。
リアルタイムなコンテンツの表示
amp-listという、外部データを元にコンテンツを表示するコンポーネントがサポート予定のため、APIや静的なJSONファイルと連動した内容を表示させることが可能です。
たとえば、商品のセール情報をメールで配信した際、在庫状況をリアルタイムに表示させたり、キャンペーン開始までのカウントダウンを表示させたりと、様々な用途で活用できるようになります。
入力フォームの実装
AMP for Emailではamp-formもサポート予定のため、Eメールに入力フォームの実装が可能になります。予約フォームやアンケート機能などを実装することで、ユーザーがEメールからWebサイトへ遷移する手間を削減し、コンバージョン率の増加が期待できます。
AMP for Emailを試すには
AMP for Emailのマークアップは、いくつかのAMP独自要素や属性がAMP for Email専用の記述に変わりますが、マークアップのルールはAMP HTMLとほとんど同じです。そのため、AMPページを作成したことがある方であれば、低い学習コストでAMP for Emailを作成することができます。
AMP for Emailは、2018年5月時点において開発途中のため、一般での利用はできませんが、Bringing the power of AMP to emailから申請することで、Gmailでのプレビューが可能になります。
メール配信は行わず、とりあえずAMP for Emailのマークアップを知りたい場合は、AMP by Exampleでより手軽にプレビューを試すことができます。
作成したAMP for Emailの検証は、AMPページと同様に専用のバリデーターを使用します。2018年5月時点では、npm版とWebサービス版が対応しています。
まとめ
AMP for Emailの登場によって、EメールをWebサービスの一部のように扱えるため、従来のようにWebサイトへの誘導目的ではなく、コンバージョンに直接影響するようなコンテンツが配信可能になります。
AMP for EmailはAMP HTMLがベースとなっているため学習や実装にかかるコストが低く、Eメールのコンバージョン率の向上が期待できます。そのため、現在運用中または開発中のWebサービスなどで、AMP for Emailに向いていそうな機能を考えてみると、今までにはなかった効果的なアイデアが生まれてくるかもしれません。
2018年5月時点で、サポート予定のEメールクライアントがGmailだけである点がネックです。しかし、今後AMP for Emailに対応するEメールクライアントが他にも登場すれば、AMP for Emailが徐々に使われだし、ユーザーと運用者の両者にとって効率的なEメール配信ができるようになるのではないでしょうか。