ページ

2017年7月2日日曜日

HeadlessChrome

HeadlessChrome

↑こちらを参考に進めて見る。

:computer:環境構築


Chrome 59以上がインストールされている事
  • CLIコマンドのエイリアス
    alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
    alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"
    alias chromium="/Applications/Chromium.app/Contents/MacOS/Chromium"
    

:star: ヘッドレスChromeを使う


簡単なサンプル

  • DOM出力 --dump-dom
    sh
    $ chrome --headless --disable-gpu --dump-dom https://www.yahoo.co.jp/
    
  • PDF出力 --print-to-pdf
    sh
    $ chrome --headless --disable-gpu --print-to-pdf https://www.yahoo.co.jp/
    
  • スクリーンショット --screenshot
    sh
    $ chrome --headless --disable-gpu --screenshot https://www.yahoo.co.jp/
    
  • DevToolsを使う --remote-debugging-port=9222
    sh
    $ chrome --headless --disable-gpu --remote-debugging-port=9222 https://www.yahoo.co.jp/
    
    起動後http://localhost:9222を別ブラウザで見るとDevToolsが使える

image.png (1.2 MB):pencil: プログラムから利用する(Node.js)


Lighthouse の ChromeLauncher を使う
インストール
sh
$ yarn add chrome-launcher --dev
シンプルな実装
js
const chromeLauncher = require('chrome-launcher');

chromeLauncher.launch({
  startingUrl: 'https://google.com',
  chromeFlags: ['--headless', '--disable-gpu']
}).then(chrome => {
  console.log(`Chrome debugging port running on ${chrome.port}`);
});
起動
sh
$ node main.js

chrome-remote-interfaceを使う

chrome-remote-interface
DevToolsと同じような事ができるようにしてくれるAPI
インストール
sh
$ yarn add chrome-remote-interface --dev
キャプチャを撮るサンプル
js
const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const fs = require('fs');

chromeLauncher.launch({
  port: 9222,
  startingUrl: 'https://google.com',
  chromeFlags: ['--headless', '--disable-gpu']
}).then(chrome => {
  console.log(`Chrome debugging port running on ${chrome.port}`);

  CDP(async (client) => {
    const { Page } = client;
    try {
      await Page.enable();
      await Page.navigate({ url: 'https://www.chromestatus.com/features/' });
      await Page.loadEventFired();
      const { data } = await Page.captureScreenshot();
      console.log('Image saved');
      fs.writeFileSync('scrot.png', Buffer.from(data, 'base64'));
    } catch (err) {
      console.error(err);
    }
  }).on('error', (err) => {
    console.error(err);
  });
});
※node 7.6.0以上で動作:+1:

その他


asyncとかawaitとか使えるのはnode 7.6.0以上!

2017年7月1日土曜日

完全リモートワークで約半年働いてみて

完全リモートワークで約半年働いてみて

久しぶりのブログ更新です。
実は今年の2月に完全リモートワークの会社に転職してました。
ちょうど半年になるので感想をつらつら書いてみます。
※あくまで個人的な感想です。。

どんな会社?


  • 社員全員が完全リモートワーク
  • ソフトウェア作っている会社
  • 半年に一回実際に集まるオフ会がある
  • 勤務時間はある(9:20 - 18:00)

働いてみて


リモートワークでも全然問題なく作業できています。
最初に感じてた不安は何だったんだというくらい。。
常時ボイスチャットを繋いでいるので、困ったことがある時は
声かけて話したり、毎朝決まった時間に朝会もあるので
個人的にはみんなで働いてる感がありますw
ボイスチャット以外にも色々なツールを使ってます。
SlackやHangoutなどなど。
ボイスチャットだけだと伝わらない所はHangoutで画面共有しながら
説明したり、ペアプロ用のツールも使ったりしてます。

良いところ


  • 通勤が無い!
    まあリモートワークなんで当たり前ですが、PCとネットにつながる環境があれば
    すぐ仕事ができるので今まで通勤に掛かっていた時間を有効活用できます。
  • 全員リモートの良さ
    あとは社員全員リモートという所がよく、一部リモートとかだった場合
    情報格差が生まれたりしてたんだろうなあと感じました。
  • 家の中
    現在我が家にはまだ0歳の赤ちゃんがいるんですが、
    急に赤ちゃん具合悪くなったとかでもリモートならすぐ対応できるので
    そこらへんは嬉しいです。

悪いところ


悪い所が今の所無いんですが、
強いて言えば。。引きこもりになりがちですね。なので最近は毎日散歩に行くようにしてます。
引きこもりは心身共によくない ><

まとめ


ただ書きたい事を書いただけになってしまいましたが、
結果的にはリモートワークで良かったなと思います。
子供の顔見ながらプログラミングができるとは想像もしてませんでしたしw