こんにちは、Tosumaです。
今回はWeb開発関連の技術記事です。
- １｜前置き
- ２｜シミュレーターツール（ブラウザ標準）
- ３｜シミュレーターツール（拡張ツール／無償版）
- ４｜シミュレーターツール（拡張ツール／無償版）導入手順
- ５｜シミュレーターツール（拡張ツール／有償版）導入手順
- ６｜シミュレーターツール（拡張ツール／おまけ）
１｜前置き
Webアプリを開発する上で大変な事の１つがレスポンシブデザインです。
今どきはスマホファーストですので基本的にはスマホでのブラウジングを意識した作りが必要になっています。
ひと昔前はブラウザと言えば”IE”みたいな風潮であれこれ調整は必要なかったですが、今はデバイスの企画も様々、ブラウザも様々と縦横無尽なわけです。油断すると気が狂います。
そうした中、色んな端末を物理的に用意するわけにもいかないので、そこで使うのがシミュレーターツール。
２｜シミュレーターツール（ブラウザ標準）
パソコンのGoogleChrome、MicrosoftEdge、BraveなどのブラウザでF12キーを押すと開発者ツールが標準で搭載されています。
デバイスも色々と用意されていて、切替する事で該当デバイスでの実行結果の確認ができます。IPhoneやAndroidやらあれこれ試せて便利です。
３｜シミュレーターツール（拡張ツール／無償版）
基本的には前項の標準機能で確認できますし、仕事でも基本的にそれを使っています。
ただ、種類が限られているんですよね。IPhone1つ取ってもSEや5～8までしか用意されていないので、最新の機種などの確認ができないんです。
※フリーサイズでの確認は可能
趣味で作ってるサイトで「必殺技構成画像メーカー」という機能を公開してるんですが、オフ会で実際に使って頂いている所を見たらIPhone15で文字がやたら小さいのを目にして、「ちゃんと見ないとアカン...」と痛感しました。
そこでGoogleChromeの拡張ツールの「モバイルシミュレーター-レスポンシブテストツール」です。
こんな感じで表示確認できます、確認する流れは標準ツールと同じようなものです。
メニューから細かく確認したいデバイスの種類を選択する事が可能です、IPhoneもこれを書いている2024年1月時点だとIPhone15 Pro Maxまで選択可能。
４｜シミュレーターツール（拡張ツール／無償版）導入手順
導入する流れは以下です。
まずは モバイルシミュレーター-レスポンシブテストツール - Chrome ウェブストア へアクセス。
左上の「xxxに追加」を選択。
「拡張機能を追加」を選択。
追加が終わるとメッセージが表示されるので「×」を選択。
今後よく使うのでショートカットを設定します。
画面左上の拡張ツールのアイコンを選択。
「モバイルシミュレーター-レスポンシブ…」の右隣のクリップアイコンを選択。
画面の左上に追加されるので、以後はWebページを開いてこのアイコンを選択すると拡張ツールが適用されます。
これで導入は終わりです。
５｜シミュレーターツール（拡張ツール／有償版）導入手順
で、入れたものの肝心の最新の機種は実は使えません。
使う場合は有償のPRO版へのアップグレードが必要です。
広告部分かPROマークがついているデバイスを選択するとPRO版へのアップグレードの確認画面が表示されますので「購読します」を選択。
プランの選択画面が表示されるので「Billed annually」のチェックを外し、「Personal」の「購読」を選択。
※自分のみで短期間使う場合です、長期で利用する場合は「Billed annually」のチェックをつけると若干安くなります
登録するE-Mailとパスワードを入力して「参加する」を選択。
口座の種類は「個人的」を選択、フルネームを入力、国は「Japan」を選んだまま、「次」を選択。
決済情報を入力して「支払い \499」を選択。
完了画面がされます、「My account」を選択すると登録情報の確認が可能。
これでIPhone15での動作確認が可能です。
ついでに左側にあった広告も非表示になっていますね。
６｜シミュレーターツール（拡張ツール／おまけ）
需要あるんですかね。笑
ということで今回は【モバイルシミュレーター-レスポンシブテストツール】の紹介でした。
お読み頂き有難うございました。
※よければもう1本 関連記事をお読み頂けると幸いです
