Qrunchのスクリーンショットを書き出すだけ

公開日:2019-05-12
最終更新:2019-05-12

はじめに

Dart言語を用いてWebページのスクリーンショットを書き出すだけの中身です。

※ これはDartのバージョン2.3.0の内容です。

$ dart --version  
Dart VM version: 2.3.0 (Fri May 3 10:32:31 2019 +0200) on "macos_x64"  

Dartをインストール

Dart言語の環境がない人はインストールします。

Get the Dart SDK | Dart

$ brew tap dart-lang/dart  
$ brew install dart  

dart にはもれなく pub が付いてきます。

Node.jsのyarnみたいな、Pythonのpipみたいなものです。

Packages | Dart

プロジェクトをつくる

気分でstagehandを紹介したいのでstagehandをインストールします。

stagehandは雛形を生成する為のものでグローバルにインストールしてCLIとして使います。

Get started: command-line and server apps | Dart

グローバルにインストールするというのは、プロジェクトに関係なくどこでも使用できるようになるということです。

$ pub global activate stagehand  

おそらくは$ yarn global addみたいなものです。

プロジェクトのディレクトリをつくります。

$ mkdir hello-puppeteer  

ここではconsole-fullというテンプレートで初期化します。

$ cd hello-puppeteer  
$ stagehand console-full  

これ以外のテンプレートが気になる人は以下を実行してください。実際にはflutter-web-previewweb-angularなどがあります。

$ stagehand -h  

みんなのPuppeteerをインストールする

pubspeck.yamlでパッケージを追加します。

pub.dev > puppeteer 1.5.0 > Installing

dependenciesのコメントアウトを消して最後にpuppeteer: ^1.5.0の一行を追加します。
コピペしたい人はこんな感じになります。

name: hello_puppeteer  
description: A sample command-line application.  
# version: 1.0.0  
# homepage: https://www.example.com  
# author: reiwa <[email protected]>  

environment:  
  sdk: '>=2.2.0 <3.0.0'  

dependencies:  
#  path: ^1.4.1  
  puppeteer: ^1.5.0  

dev_dependencies:  
  pedantic: ^1.0.0  
  test: ^1.0.0  

ターミナルでpubコマンドを実行してパッケージをインストールします。

$ pub install  

これで必要なパッケージが揃いました。

スクリーンショットを書き出す

lib/get_screenshot.dart というファイルをつくります。
定義する関数getScreenshotはURLをスクリーンショットを返すFutureに変換します。

親切にもコメントを追加してみました。

import 'dart:typed_data';  
import 'package:puppeteer/puppeteer.dart';  

Future<Uint8List> getScreenshot(String url) async {  
  // ブラウザを作る  
  final Browser browser = await puppeteer.launch();  

  // ページを作る  
  final Page page = await browser.newPage();  

  // URLのページを開く  
  await page.goto(  
    url,  
    wait: Until.networkIdle,  
  );  

  // スクリーンショットをつくる  
  final Uint8List screenshot = await page.screenshot();  

  // ブラウザを閉じる  
  await browser.close();  

  // スクリーンショットを返す  
  return screenshot;  
}  

次にbin/main.dartを修正します。先ほど定義したget_screenshotを使用します。

await File('screenshot.png').writeAsBytes(screenshot)の箇所では、ファイルを書き出しています。

import 'dart:io';  
import 'dart:typed_data';  
import 'package:hello_puppeteer/get_screenshot.dart';  

Future<void> main(List<String> arguments) async {  
  // 定数URLを定義する  
  const String url = 'https://qrunch.net/?date=month';  

  // スクリーンショットを取得する  
  final Uint8List screenshot = await getScreenshot(url);  

  // スクリーンショットを書き出す  
  await File('screenshot.png').writeAsBytes(screenshot);  
}  

以下のコマンドで実行してください。$ dart bin/main のように拡張子を省略することはできません。

$ dart bin/main.dart  

スクリーンショットが書き出されます。

リポジトリ

reiwa/hello_puppeteer

さいごに

「qrunch.net」と「qrunch.io」の関係性がよく分からない。

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
コンビニでバイトしてます。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする