この記事はミツエーリンクス Advent Calendar 2020 - Adventarの25日目の記事です。

この記事ではComlinkを使って時間のかかる処理を手軽にWorkerへ移した体験を紹介します。

テキスト照合ツール

今回Workerに移した処理は、ミツエーリンクス社内でテキスト照合ツールと呼んでいるツールの一部です。テキスト照合ツールは、原稿のテキストと制作したページのテキストを入力すると2つの異なる部分（差分）をハイライト表示するWebページです。これはテキストの差分を計算するJavaScriptライブラリの1つ、jsdiff（3条項BSDライセンス）のサンプルをミツエーリンクス社内で調整したものです。

テキスト照合ツールは原稿のテキストを入力する欄、ページのテキストを入力する欄、比較結果を表示する欄の大きく3つで構成されています。原稿とページの入力欄にテキストを入力すると比較結果がリアルタイムに更新され、差分がハイライト表示されます。

さて、このテキスト照合ツールは社内の制作作業やチェック作業の効率を高めてくれましたが、1つ問題がありました。それは、テキストの組み合わせによっては差分の計算に時間がかかり、その間ページが操作できなくなる（メインスレッドがブロックされる）ことです。厳密に測定したわけではありませんが、テキストの片方は極端に短く、もう片方は極端に長いなどの特定条件で10秒以上操作できなくなっていました。

これは非常にストレスフルでしたので、差分の計算に時間がかかるのは仕方ないにしても、処理中であることは表示したいと考えました。

CSS Snapshot 2020が発行されました（参考日本語訳）。

この文書は各CSS仕様がどの程度安定しているのかを示すものであり、次の3つの分類がなされています。

この記事はミツエーリンクス Advent Calendar 2020 - Adventarの23日目の記事です。

当社では、技術品質、プロセス品質、サービス品質の3つの品質向上をビジョンとして挙げています。今回はその品質の中で、デザインの品質を向上させ管理するプロジェクトにおいて、各フェーズでチェックしている項目とその背景、またチェックリストの注意点についてご紹介いたします。

当社のサイト構築のフローでは、お客様に各ページのデザインカンプの承認をいただいてから、大まかに下記のフローでページを作成しています。

• 各ページデザイン承認→各ページHTML&CSS設計
• モジュールデザイン作成→モジュールHTML&CSS設計→ページの量産実装

こちらをUIデザイナーとUI開発者が各専門知識・スキルを活かし分業して対応していきます。当社でのUIデザイナーとUI開発者の職種の詳しい説明については、ぜひ当社CTOの木達が書いたコラム「UIデザイナーとUI開発者」をご覧いただければと思います。

そういったUIデザイナーとUI開発者の対応するフローのなかで、当社では下記のチェックリストを活用しています。

1. UIデザイナーからUI開発者に入稿するデザイン指示内容のチェックリスト
2. UI開発者のページ設計後のチェックリスト
3. ページ量産実装後の実装者のチェックリスト

今回は上記の3つセルフチェックリストご紹介します。

この記事はミツエーリンクス Advent Calendar 2020 - Adventarの21日目の記事です。

今回はCSSのお話です。

CSSをうまく使うことができると

• 必要だと思っていたJavaScriptが不要になる
• HTMLが簡潔に書ける

場合があります。

そのことから私は日々CSSを書きながら「まだ気がついていない使い方があるのではないか」とその可能性に魅力を感じています。

特に静的に実装するのであれば、万人が触れる機会が多いHTMLの編集しやすさは意識したいところですね。

ステップUIをお題として一般兄弟結合子（~）の実用例をご紹介します。

加えてaria-current属性の使い方も少しだけご紹介できればと思います。

例えば、以下のような見た目のステップUIをスタイリングする場合は

ステップUIのデザインカンプ

一般兄弟結合子を意識しないと、次のようにclass属性をたくさん付与するマークアップになりそうです...。

<div class="ui-step">
<ol>
<li aria-current="step"><em class="label">入力</em></li>
<li><span class="label">確認</span></li>
<li><span class="label">完了</span></li>
</ol>
<!-- /.ui-step --></div>


<div class="ui-step">
<ol>
<li class="is-done"><span class="label">入力</span></li>
<li aria-current="step"><em class="label">確認</em></li>
<li><span class="label">完了</span></li>
</ol>
<!-- /.ui-step --></div>


<div class="ui-step">
<ol>
<li class="is-done"><span class="label">入力</span></li>
<li class="is-done"><span class="label">確認</span></li>
<li aria-current="step"><em class="label">完了</em></li>
</ol>
<!-- /.ui-step --></div>

記事自体の見やすさも考慮してステップの数は最小限にしてあります。ステップの数が多いケースをご想像ください...。🤔

この記事はミツエーリンクス Advent Calendar 2020 - Adventarの18日目の記事です。

はじめに

Web Componentsは以前から注目されてきた技術ですが、一部ブラウザの対応状況が整っておらず、ポリフィルを利用しなければ実用的なレベルで使用できませんでした。

しかし、今年Microsoft EdgeがChromiumブラウザエンジンを採用したことでInternet Explorer 11（以下IE11）を除くすべてのモダンブラウザで、ポリフィルやフレームワークを利用せずにWeb Componentsが動作するようになりました。

また、これまでIE11での利用をサポートしていたWebサイトやWebサービスのサポート終了への動きが活発化しており、当社もIE11の動向に関するコラムを公開してきました。

• 2020年4月17日 「今、改めて考えるInternet Explorer 11対応のコスト」
• 2020年12月7日 「IEからEdgeへの転送を開始」

こういった状況からWeb Componentsは「いつか使えるようになる技術」ではなく「今すぐ使える技術」になったと言えます。

Web Componentsに期待すること

Webサイトの構築では規模が大きくなるほど下記のような問題が顕著になります。

• コンポーネントの数が多くなり、管理コストがかかる
• レイアウトやコンポーネントの構造・パターン・組み合わせが多く、ソースコードが複雑になる
• 複数人で開発する必要があるためマークアップの揺れが発生し、品質の維持が困難になる
• コーディングルールの周知やメンテナンスにかかるコストが高い

これまではこういった問題に対してCSSアーキテクチャ（FLOCSS、BEMなど）で仕組みを工夫したり、ライブラリやフレームワークを導入することで解決してきましたが、根本的な解決方法ではなかったり、依存するライブラリやフレームワークの仕様に振り回されることもありました。

今回は、新しい解決のアプローチとしてWebサイトの構築でWeb Componentsを導入するメリットや期待することを書いていきます。

この記事はミツエーリンクス Advent Calendar 2020 - Adventarの17日目の記事です。

皆さんはこんな経験ありませんか。

• デザイン上は美しい余白だったが、設計後想定よりも若干余白が大きくなってしまった。
• デザインテンプレートを作成したページは想定通りだったが、別ページでその他のモジュールと組み合わせた際に、想定されない余白が生じてしまった。

開発後に上記が発覚しデザインの調整を行おうとすると、影響範囲を考えながらモジュールの調整を行うような大工事になる事もあり、想定外の工数が発生してしまいます。このような場合、デザイン時に何かしらの想定不足が考えられますが、その1つにline-heightの考慮があげられると思います。

大型サイトの構築をする際に、このline-heightを考慮したデザインはデザインに起こしていないページを実装量産する上で、工数削減や品質を保つために重要なことと私は思います。さらに昨今ではline-height を1.8～2.0など、大きめに設定するデザインが増えているため、より一層注意が必要になります。

今回はこのline-height問題が起こらないように、Adobe XD（以下「XD」）のstack機能のちょっと変わった使い方で「line-heightを考慮したデザイン」を作る方法をご紹介しようと思います。

この記事はミツエーリンクス Advent Calendar 2020 - Adventarの16日目の記事です。

近年、新しいUIデザインツールが次々とリリースされ、シンプルな画面遷移やアニメーションならデザイナーでも簡単に作ることができるようになりました。これをきっかけに、動きをデザインすることに興味を持ったデザイナーは多いのではないでしょうか？そんなデザイナーの方々に「After Effectsで作るアイコンアニメーション」を紹介したいと思います。