service-tag コラム|トライベック
HUMAN INSIGHT CX
エクスペリエンスマネジメント/リサーチソリューション
コンサルティング
クリエイティブ・UX
制作・オペレーション
テクノロジー
データドリブン
マーケティング
メディア/
広告代理事業
サービスについて
オピニオン
トライベック広報
会社概要
社長メッセージ
経営理念
社名・ロゴの由来
トライベック・ニューノーマル
役員紹介
地図・アクセス

COLUMN

コラム

M・Mが執筆した記事一覧

プロダクション
2021年8月16日

コーダー職勉強会 on Teamsを行っています

トライベックには複数のユニットがありますが、 私の所属しているユニットでは週に一度、他ユニット合同でコーダー職が集まり オンラインにてLT(Lightning Talks)のような勉強会をしています。 元々は会議室で行われていましたが、「トライベック・ニューノーマル」にて、 在宅勤務がメインとなり、今はリモートでの開催となっています。 勉強会のテーマはフリー。 過去には、作業工数を見積もり方法や、大人数での運用方法、 表記ゆれ・機種依存文字の対応などの業務フローについてや、 HEX8桁の変換方法やfont-feature-settingsなどのCSSのきめ細やかな設定方法、 JavaScriptのバグ改修や既存機能の改修方法について等の実務技術ノウハウなどのお話がありました。 その他、困りごとの相談や意見交換もできます。 普段は同じコーダー職でも協業の機会が少ないため、いろいろなことを共有いただけることは、 今まで、自分では気づけなかったことに気づけるようになったり、 制作技法をアップデートできたり、同じ個所で躓くことを未然に防げたりと、 大変貴重な機会で勉強になります。 先日のプレゼンテーション内容 先日は、今まで気になりつつも触れたことのなかった、Google chromeのエクステンションにつきまして、 発表いたしましたので、その時のスライドを掲載させていただきます。 スライド ※ページをスライドしてご覧ください。 プレゼンテーションを終えて コーダー職をしているとあまり人前でプレゼンテーション行う機会がなく、少し緊張しつつもプレゼンテーションできました。 聞いてくださった方からは、「開発者機能を使えば、リリースしなくてもエクステンションを利用でき、 これならば内輪での利用に便利そう。」「過去に作成した便利なツールも、エクステンションに移行し利用できそう」 など、感想、共感をいただくことができました。 ...

プロダクション
2020年12月14日

Headless Chrome + ImageMagickで画面キャプチャをまとめてPDF化する

はじめに Webシステムやサイトなどの作成や修正時には、Webページのスクリーンショットを、PDFにまとめることが多々あります。 1ページ、2ページなら良いのですが、ページ数が増えれば増えるほど、なかなか時間がかかります。 そこで今回は、Webページのスクリーンショットの取得から、PDFへまとめる作業を、 自動化できるツールを作成してみました。 利用したもの ・Headless Chrome → バックグラウンドで動作する、GUI画面を持たないChrome。コマンドラインから利用します。 今回は自動化を行うため、ブラウザをコマンドで操作するために利用しました。 ・Node.js → JavaScript実行環境の1つ。今回はHeadless Chromeを操作するために利用しました。 ・ImageMagick → コマンドにて画像を操作するソフトウェア。今回は取得したPNGデータをPDFにまとめるために利用しました。 Node.jsのライブラリ・モジュール ・Puppeteer →Headless Chromeの操作に利用しました。 ・fs →Node.jsにてファイルを扱うためのモジュール。Node.jsに標準で備えられています。 今回は別ファイルにURLリストを作成し、読み込ませるために利用しました。 ・readline →Node.jsにてファイルを1行ずつ読み込むためのモジュール。Node.jsに標準で備えられています。 今回はURLリストから、URLを一行ずつ取得するために利用しました。 環境 ・Windows 10 ・Node.js v12.14.1 ・ImageMagick 7.0.9 全体の流れ スクリーンショットを取得したいURLリストを作成。 Node.jsから、URLリストを読み込み。Headless Chromeより、スクリーンショットを取得、保存。 取得したスクリーンショットをImageMagickにてPDFにまとめる。 ディレクトリ構成 ├─getScreenShot.js → Node.jsの処理記述ファイル ├─makePDF.bat   → 全体の処理記述バッチ ├─png       → 取得したスクリーンショットを保存するディレクトリ └─url.txt      → 取得したいスクリーンショットのURLを記載したリスト コード getScreenShot.js const puppeteer = require('puppeteer'); let fs = require('fs'); let readline = require('readline'); // URLリストに記載した順番にPDFのスクリーンショットが並ぶよう、番号を振る。 let count = 1; // URLリストよりURLの読込 let stream = fs.createReadStream('./url.txt', 'utf8'); let reader = readline.createInterface({ input: stream }); reader.on('line', (data) => { asyncCall(data, count); count++; }); async function asyncCall(url, count) { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); // Basic認証の設定 // await page.authenticate({ username: 'ID', password: 'PassWord' }); // 画面サイズの設定今回は1290×800に設定 await page.setViewport({ width: 1290, height: 800 }); // 取得したURLへ遷移 await page.goto(url); // 画面表示待ち await page.waitForNavigation({ waitUntil: ['load', 'networkidle2'] }) .catch(e => console.log('timeout exceed. proceed to next operation')); // フルサイズのスクリーンショットを取得 await page.screenshot({ path: './png/' + count + '.png', fullPage: true }); console.log('save screenshot: ' + url); // ブラウザタスクの終了 await browser.close(); }; *Basic認証がかかったテストページなどの場合は、Basic認証の記述を追記 makePDF.bat node getScreenShot.js cd png rem 余白ができることがあるため、トリミング magick mogrify *.png -trim *.png magick *.png output.pdf url.txt https://www.tribeck.jp/ https://www.tribeck.jp/column/tribeck/topics/20201110/ https://www.tribeck.jp/column/tribeck/topics/20201007/index.html アウトプット pngディレクトリ内容 output.pdf内容 まとめ 以上で、必要なURLのリストがあれば、ワンクリックで資料を作成することができました。 補足ですが、Puppeteerでは画面操作なども行えますので、 ログインが必要なサイトでも、カスタマイズすると、キャプチャが取得できるようになりますよ。 また、今回は簡単に作業できるようURLをリストにまとめる形にしてみましたが、 場合によってはメモリーリークなどで落ちてしまうので、そのあたりも適宜カスタマイズすると使いやすくなるかと思います。...

お問い合わせ

Web戦略策定からサイト構築、オペレーションまで、最適なワンストップのソリューションを提供します。
お気軽にお問い合わせください。

関連コンテンツ