はじめに

はじめまして、SHIFT ITソリューション部の深尾です。

私は直近、Internet Explorer（以下、IE）からEdgeへのマイグレーション案件に参画し、日々奮闘してきました。
このブログではこのマイグレーションで苦労したところを中心に投稿していきたいと考えています。

背景

私が参画していた案件はほとんどオープン系のシステムです。
そのため、IEの利用を前提としたシステムに携わることが多く、社内のデフォルトブラウザはIEの企業様が多い印象でした。
そんな中、Microsoft社が2021年5月19日にIEのサポートを2022年6月16日（日本時間）に終了するとの発表があり、
日本企業には影響が大きい発表だったと個人的には思っています。

このIE廃止を受け、スクラッチ開発されたオープン系システムは、
費用対効果の観点からEdgeのIEモードで対応するとなったシステムが多いと感じています。
ですが、Edge IEモードも2029年には終了を予定されています。
終了まであと6年なので、個人的には早めのマイグレーションが必要だと考えています。

そんな経歴の私からのEdge IEモードからEdgeへのマイグレーションで苦労した点や対応について投稿します。
同じような立場の方も多くいらっしゃると思い、この投稿がご参考になれば幸いです。
なお、WEB系のエンジニアであれば、クロスブラウザ対応で良くご存知な内容かもしれませんが、ご容赦ください。

以下の内容について投稿を予定していますが、一度の投稿で書くことは難しいので、今回は「画面崩れ」について投稿します。

投稿予定のテーマ

• 画面崩れ

• モーダル

• クリップボード処理

• フォーカス処理

• ブラウザ判定処理

IEからEdgeへのマイグレーションの道～その１～

画面崩れ（size属性）について

業務画面では業務効率の観点から一つの画面に沢山の入力欄があり、その入力欄はinputタグのtextタイプであることがほとんどだと思います。
そのinputタグの長さをsize属性で指定するシステムが今回のマイグレーションの対象となります。

• 非互換概要
  今回取り上げる非互換はIEとEdgeでは、同じsize属性の長さでも、解釈が異なるというものです。
  例えば、size属性10で指定したinputタグの長さはIEでは90px相当の長さですが、 Edgeでは99px相当の長さになります。

inputタグの実装例

    <input type="text" size="10" value="１２３４５６７"
    <input type="text" style="width: 90px;" value="１２３４５６７"
    <input type="text" style="width: 99px;" value="１２３４５６７"

上段のinputタグの長さ指定をsize属性で指定し、下段二つはinputタグの長さ指定をpx指定したHTMLファイルをそれぞれのブラウザで、
確認したのが下記のキャプチャになります。

Edge IEモード

Edge ネイティブ

上記キャプチャの通り、size属性10長さが、IEでは90px相当の長さで、 Edgeでは99px相当の長さであることがわかるかと思います。

• 対応方針
  inputタグの長さ指定をsize属性からpx指定に変更します。

• 問題
  画面数が多い業務システムの場合、inputタグの長さ指定を一カ所ずつ対応するのは非効率で、工数もかかります。

• 問題への対応
  対応１で対応出来ない画面崩れは対応2の要領で対応を行いました。

  • 対応１
    inputタグの長さの指定をsize属性からpx指定に上書きする変換用CSSを作成し、それを各種画面のCSSにimportする対応をしました。

  • 対応２
    HTMLの実装によっては、inputタグのsize属性による長さ指定が上手く有効になっていない場合があります。そのため「対応１」後もinputタグの長さで画面崩れが残ります。このケースについては、一括対応が出来ないので、画面に合わせた長さに修正しました。このときsize属性ではなくpxで長さ指定し、各画面を目検で現在画面と同じ長さである事を確認しました。

変換用CSS作成について

事前にsize属性からpx指定のマトリックス表を作成し、それを変換用CSSに実装しました。 なお、マトリックス作成を行った時に、size属性の値とpx値の間で明確な相関を見つける事ができませんでした。 恐らく無いと考えています。そこで、size属性の各長さ毎に目検で対応するpxの長さを確認しました。

実装例
　コンバートCSS（Size→px）

	input[size="3"] {							
	    width:28.1px;							
	}								
	input[size="4"] {							
	  width: 33.65px							
	}

　各画面のデフォルトCSSなどに、上記のコンバートCSSをインポート

	@import url("./cnv_size.css")

CSSのimportを利用する機会は少ないと思いますが、
各画面にCSSのリンクを追記するより工数が少ないため、この方法を取りました。

終わりに

CSSでIEで表現されるsize属性を維持するための方法を投稿しました。
実際にはこれだけの対応で、Edge化後の画面崩れは対応出来ないので、
次回も引継ぎ画面崩れに関する内容を投稿したいと考えています。

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/