Puppeteer でデバイスを指定する方法と、指定できるデバイス名の一覧

ソフトウェア開発

Puppeteer とは

Puppeteer は、Chrome を Node から操作できるライブラリです。要はブラウザ操作の自動化ライブラリです。

github.com

Puppeteer でデバイスを指定する

Puppeteer では動作をエミュレートするデバイスを指定することができます。指定方法は簡単で、devices でデバイスをセットして、emulate メソッド でそれを呼び出して用いるだけです。公式ドキュメント には以下のように書いてあります。

const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);

  await page.goto('https://www.google.com');
  // other actions...
  await browser.close();
});

const iPhone = puppeteer.devices['iPhone 6']; の部分で iPhone 6 をデバイスとして指定しています。

そして await page.emulate(iPhone); のところでそのデバイスを使用するように呼び出しています。

公式ドキュメント内で言及があるように、v1.14.0以前では require('puppeteer/DeviceDescriptors') という記述がなされています。これは非推奨の書き方になります（問題なく動きますが）。

指定できるデバイス名の一覧

上記の通りにデバイス名を指定していますが、デバイス名として記述している iPhone 6 というワードは完全なるハードコーディングです。となると、指定できるデバイス名の一覧がほしくなると思います。

公式ドキュメントにあるように、lib/DeviceDescriptors.js がデバイスを区別しているコードです。コードを読むと分かるように、端末ごとの幅や高さをエイリアスとして設定しています*1。

DeviceDescriptors.js をカレントディレクトリにもってきて grep をかけると、デバイス名の一覧が以下のように取得できます。

$ cat DeviceDescriptors.js | grep name:
    name: "Blackberry PlayBook",
    name: "Blackberry PlayBook landscape",
    name: "BlackBerry Z30",
    name: "BlackBerry Z30 landscape",
    name: "Galaxy Note 3",
    name: "Galaxy Note 3 landscape",
    name: "Galaxy Note II",
    name: "Galaxy Note II landscape",
    name: "Galaxy S III",
    name: "Galaxy S III landscape",
    name: "Galaxy S5",
    name: "Galaxy S5 landscape",
    name: "iPad",
    name: "iPad landscape",
    name: "iPad Mini",
    name: "iPad Mini landscape",
    name: "iPad Pro",
    name: "iPad Pro landscape",
    name: "iPhone 4",
    name: "iPhone 4 landscape",
    name: "iPhone 5",
    name: "iPhone 5 landscape",
    name: "iPhone 6",
    name: "iPhone 6 landscape",
    name: "iPhone 6 Plus",
    name: "iPhone 6 Plus landscape",
    name: "iPhone 7",
    name: "iPhone 7 landscape",
    name: "iPhone 7 Plus",
    name: "iPhone 7 Plus landscape",
    name: "iPhone 8",
    name: "iPhone 8 landscape",
    name: "iPhone 8 Plus",
    name: "iPhone 8 Plus landscape",
    name: "iPhone SE",
    name: "iPhone SE landscape",
    name: "iPhone X",
    name: "iPhone X landscape",
    name: "iPhone XR",
    name: "iPhone XR landscape",
    name: "JioPhone 2",
    name: "JioPhone 2 landscape",
    name: "Kindle Fire HDX",
    name: "Kindle Fire HDX landscape",
    name: "LG Optimus L70",
    name: "LG Optimus L70 landscape",
    name: "Microsoft Lumia 550",
    name: "Microsoft Lumia 950",
    name: "Microsoft Lumia 950 landscape",
    name: "Nexus 10",
    name: "Nexus 10 landscape",
    name: "Nexus 4",
    name: "Nexus 4 landscape",
    name: "Nexus 5",
    name: "Nexus 5 landscape",
    name: "Nexus 5X",
    name: "Nexus 5X landscape",
    name: "Nexus 6",
    name: "Nexus 6 landscape",
    name: "Nexus 6P",
    name: "Nexus 6P landscape",
    name: "Nexus 7",
    name: "Nexus 7 landscape",
    name: "Nokia Lumia 520",
    name: "Nokia Lumia 520 landscape",
    name: "Nokia N9",
    name: "Nokia N9 landscape",
    name: "Pixel 2",
    name: "Pixel 2 landscape",
    name: "Pixel 2 XL",
    name: "Pixel 2 XL landscape",

これではコード上で扱いにくいので、配列指定したバージョンも置いておきます。

const deviceNames = [
  'Blackberry PlayBook',
  'Blackberry PlayBook landscape',
  'BlackBerry Z30',
  'BlackBerry Z30 landscape',
  'Galaxy Note 3',
  'Galaxy Note 3 landscape',
  'Galaxy Note II',
  'Galaxy Note II landscape',
  'Galaxy S III',
  'Galaxy S III landscape',
  'Galaxy S5',
  'Galaxy S5 landscape',
  'iPad',
  'iPad landscape',
  'iPad Mini',
  'iPad Mini landscape',
  'iPad Pro',
  'iPad Pro landscape',
  'iPhone 4',
  'iPhone 4 landscape',
  'iPhone 5',
  'iPhone 5 landscape',
  'iPhone 6',
  'iPhone 6 landscape',
  'iPhone 6 Plus',
  'iPhone 6 Plus landscape',
  'iPhone 7',
  'iPhone 7 landscape',
  'iPhone 7 Plus',
  'iPhone 7 Plus landscape',
  'iPhone 8',
  'iPhone 8 landscape',
  'iPhone 8 Plus',
  'iPhone 8 Plus landscape',
  'iPhone SE',
  'iPhone SE landscape',
  'iPhone X',
  'iPhone X landscape',
  'iPhone XR',
  'iPhone XR landscape',
  'JioPhone 2',
  'JioPhone 2 landscape',
  'Kindle Fire HDX',
  'Kindle Fire HDX landscape',
  'LG Optimus L70',
  'LG Optimus L70 landscape',
  'Microsoft Lumia 550',
  'Microsoft Lumia 950',
  'Microsoft Lumia 950 landscape',
  'Nexus 10',
  'Nexus 10 landscape',
  'Nexus 4',
  'Nexus 4 landscape',
  'Nexus 5',
  'Nexus 5 landscape',
  'Nexus 5X',
  'Nexus 5X landscape',
  'Nexus 6',
  'Nexus 6 landscape',
  'Nexus 6P',
  'Nexus 6P landscape',
  'Nexus 7',
  'Nexus 7 landscape',
  'Nokia Lumia 520',
  'Nokia Lumia 520 landscape',
  'Nokia N9',
  'Nokia N9 landscape',
  'Pixel 2',
  'Pixel 2 landscape',
  'Pixel 2 XL',
  'Pixel 2 XL landscape',
];

*1:なので、同じ内容を個別にちまちま設定すれば同義になります

Powered by はてなブログ