Webサイトのスクリーンショットを自動で保存してみました

はじめに

いろいろな Web サイトのデザインや機能の変更が気になります。

ただ,いろんな Web サイトを定期的に訪れてウォッチするのは面倒くさいし,ページ構成を覚えておかないと, あれ?こんな機能あったっけ?と機能が追加されたのか,はたまたウォッチ漏れだったのかよくわからなくなってしまいます。

そこで,自動でいろいろな Web サイトのスクリーンショットを撮影できたらいいな!と思い試してみました。

やってみた

使ったもの

プログラム

Puppeteer のサンプルコードに,スクリーンショットを撮るプログラムがあります。今回はこちらをベースに,複数の Web サイトのスクリーンショットを撮れるようにしてみました。

'use strict';

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');

const urls = [
  'http://www.yahoo.co.jp',
  'https://www.rakuten.co.jp/'
];

(async() => {

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(devices['iPhone 6']);
  let fname = null;
  for(let url of urls){
    console.log(url);
    fname = url.replace(/\//g, '_').replace(/:/g,'');
    await page.goto(url);
    await page.screenshot({path: `${fname}.png`, fullPage: true});
  }
  await browser.close();

})();

作ったプログラムをなくしてしまうことが多いので,GitHubに上げました。

github.com

動かしてみました

$ git clone https://github.com/9bo9bo/pageCapture
$ cd pageCapture
$ npm install 
$ node index.js

f:id:u9bo:20171203211346p:plain

おわりに

複数の Web サイトのスクリーンショットを取得するプログラムをつくってみました。cron などに登録しておけば,特に意識しなくともスクリーンショットが蓄積されていって素敵です。

今後のタスクとして,取得したスクリーンショット同士の画像差分を取って,サイトの変更点を示せるようにすることが挙げられそうです。

PHP の設定が不明な時に叩いたコマンドたち

Homestead で導入された UbuntuPHP の設定がわからない時に叩いたコマンドなど。

はじめに

phpunit が失敗する。

$ phpunit --colors=always --coverage-html 
PHPUnit 5.7.23 by Sebastian Bergmann and contributors.

Error:         No code coverage driver is available

環境

Homestead v6.5.0

PHP のバージョン

$ php --version
PHP 7.0.24-1+ubuntu16.04.1+deb.sury.org+1 (cli) (built: Sep 28 2017 16:20:59) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2017 Zend Technologies
    with Zend OPcache v7.0.24-1+ubuntu16.04.1+deb.sury.org+1, Copyright (c) 1999-2017, by Zend Technologies
    with Xdebug v2.5.5, Copyright (c) 2002-2017, by Derick Rethans
    with blackfire v1.18.0~linux-x64-non_zts70, https://blackfire.io, by SensioLabs

PHP の場所

$ which php
/usr/bin/php

複数のバージョンが入っていそうだったので本当にそれか確認

$ ls -al /usr/bin | grep php
lrwxrwxrwx  1 root   root          21 Oct 16 12:39 php -> /etc/alternatives/php
-rwxr-xr-x  1 root   root     4488224 Sep 28 19:33 php5.6
-rwxr-xr-x  1 root   root     4434992 Sep 28 17:01 php7.0
-rwxr-xr-x  1 root   root     4571168 Sep 29 17:48 php7.1
-rwxr-xr-x  1 root   root     4859104 Sep 28 17:19 php7.2

/etc/alternatives の先にいるらしい。

$ ls -al /etc/alternatives | grep php
lrwxrwxrwx   1 root root    15 Nov 26 13:36 php -> /usr/bin/php7.0

やっと/usr/bin/php7.0が参照されていることがわかった。

alternatives で参照される PHP を切り替える

ググってみると、alternativesという仕組みを使うと、複数のバージョン(PHPとかRuby)を切り替えて使えるそうな。

で、phpコマンドで呼ばれるPHPを切り替えるには、次のコマンドを実行する。

$ sudo update-alternatives --config php
There are 4 choices for the alternative php (providing /usr/bin/php).

  Selection    Path             Priority   Status
------------------------------------------------------------
  0            /usr/bin/php7.2   72        auto mode
  1            /usr/bin/php5.6   56        manual mode
* 2            /usr/bin/php7.0   70        manual mode
  3            /usr/bin/php7.1   71        manual mode
  4            /usr/bin/php7.2   72        manual mode

Press <enter> to keep the current choice[*], or type selection number:

よしなに選択。執筆時点(2017/11/26)では Homestead で指定される PHP は 7.1 だった。 たまたま 7.0 で動かしたかったので、ここで切り替えた(上記結果は切り替えた後)。

php.ini の場所

$ php --ini
Configuration File (php.ini) Path: /etc/php/7.0/cli
Loaded Configuration File:         /etc/php/7.0/cli/php.ini
Scan for additional .ini files in: /etc/php/7.0/cli/conf.d
Additional .ini files parsed:      /etc/php/7.0/cli/conf.d/10-mysqlnd.ini,
/etc/php/7.0/cli/conf.d/10-opcache.ini,
/etc/php/7.0/cli/conf.d/10-pdo.ini,
/etc/php/7.0/cli/conf.d/15-xml.ini,
/etc/php/7.0/cli/conf.d/20-bcmath.ini,
/etc/php/7.0/cli/conf.d/20-calendar.ini,
/etc/php/7.0/cli/conf.d/20-ctype.ini,
/etc/php/7.0/cli/conf.d/20-curl.ini,
/etc/php/7.0/cli/conf.d/20-dom.ini,
/etc/php/7.0/cli/conf.d/20-exif.ini,
/etc/php/7.0/cli/conf.d/20-fileinfo.ini,
/etc/php/7.0/cli/conf.d/20-ftp.ini,
/etc/php/7.0/cli/conf.d/20-gd.ini,
/etc/php/7.0/cli/conf.d/20-gettext.ini,
/etc/php/7.0/cli/conf.d/20-iconv.ini,
/etc/php/7.0/cli/conf.d/20-igbinary.ini,
/etc/php/7.0/cli/conf.d/20-imap.ini,
/etc/php/7.0/cli/conf.d/20-intl.ini,
/etc/php/7.0/cli/conf.d/20-json.ini,
/etc/php/7.0/cli/conf.d/20-mbstring.ini,
/etc/php/7.0/cli/conf.d/20-msgpack.ini,
/etc/php/7.0/cli/conf.d/20-mysqli.ini,
/etc/php/7.0/cli/conf.d/20-pdo_mysql.ini,
/etc/php/7.0/cli/conf.d/20-pdo_pgsql.ini,
/etc/php/7.0/cli/conf.d/20-pdo_sqlite.ini,
/etc/php/7.0/cli/conf.d/20-pgsql.ini,
/etc/php/7.0/cli/conf.d/20-phar.ini,
/etc/php/7.0/cli/conf.d/20-posix.ini,
/etc/php/7.0/cli/conf.d/20-readline.ini,
/etc/php/7.0/cli/conf.d/20-shmop.ini,
/etc/php/7.0/cli/conf.d/20-simplexml.ini,
/etc/php/7.0/cli/conf.d/20-soap.ini,
/etc/php/7.0/cli/conf.d/20-sockets.ini,
/etc/php/7.0/cli/conf.d/20-sqlite3.ini,
/etc/php/7.0/cli/conf.d/20-sysvmsg.ini,
/etc/php/7.0/cli/conf.d/20-sysvsem.ini,
/etc/php/7.0/cli/conf.d/20-sysvshm.ini,
/etc/php/7.0/cli/conf.d/20-tokenizer.ini,
/etc/php/7.0/cli/conf.d/20-wddx.ini,
/etc/php/7.0/cli/conf.d/20-xdebug.ini,
/etc/php/7.0/cli/conf.d/20-xmlreader.ini,
/etc/php/7.0/cli/conf.d/20-xmlwriter.ini,
/etc/php/7.0/cli/conf.d/20-xsl.ini,
/etc/php/7.0/cli/conf.d/20-zip.ini,
/etc/php/7.0/cli/conf.d/25-memcached.ini,
/etc/php/7.0/cli/conf.d/90-blackfire.ini

xdebug を使いたい

上の php --inixdebug.ini が呼ばれていなくてどうやら使えなかったのだけど、fpmにはいたので、 コピーしてきた(正しいかどうかはよくわからないけど・・・)

sudo cp /etc/php/7.0/fpm/conf.d/20-xdebug.ini /etc/php/7.0/cli/conf.d/20-xdebug.ini

おわりに

無事に phpunit が実行できた。

Windows に SSH 接続してみました

はじめに

手元の mac から CUIWindows に接続したいな〜と思ったので試してみました。

実現方法は,次の二つがあるようです。

前者の方法は,Windows 版の OpenSSH はあまりメンテナンスされていないような気がして,これまで乗り気ではありませんでした。 最近では,microsoft 製の OpenSSHが提供されているようです。

後者について,PowerShellオープンソースとして提供されています。 mac でも Linux でも使えるようになりました:)

今回は,クライアントの mac に手を加えたくなかったので,前者の方法を試してみました。

作業内容

実施環境

  • Windows 10.0.14393 [64 bit]
  • chocolatey 0.10.8

手順

Win32 OpenSSH のインストール

chocolatey をインストールしていない場合は,先に導入しておきます。

マニュアルを参考に,作業を進めていきましょう。

Win32 OpenSSH Automated Install and Upgrade using Chocolatey · PowerShell/Win32-OpenSSH Wiki · GitHub

今回は,SSH クライアントと sshd サーバをインストールするので,以下のコマンドを実行します。

choco install win32-openssh -params '"/SSHServerFeature /KeyBasedAuthenticationFeature"' -confirm

インストール中に22番ポートの開放も行われます。インストールが完了したらおしまい!

mac から SSH 接続

インストールが完了したら接続してみましょう。接続先は環境に合わせて読み替えてください。

$ ssh administrator@192.168.40.10
administrator@192.168.40.10's password: 

Microsoft Windows [Version 10.0.14393]                                                                                          
(c) 2016 Microsoft Corporation. All rights reserved.                                                                            

administrator@WINPC C:\Users\Administrator>                                                                           

WindowsSSH 接続できました!

接続先はコマンドプロンプトの世界なので,PowerShell が使いたくなったら切り替えましょう。

administrator@WINPC C:\Users\Administrator>powershell                                                                 
Windows PowerShell                                                                                                              
Copyright (C) 2016 Microsoft Corporation. All rights reserved.                                                                  

PS C:\Users\Administrator>     

PowerShell が起動しました!

あとは,いつも通りに作業を進めましょう。

実際の接続例

f:id:u9bo:20170909221435p:plain

なかなかに強烈です。

その他

Win32 OpenSSH のアップグレード

choco upgrade win32-openssh -params '"/SSHServerFeature"' -confirm

Win32 OpenSSH のアンインストール

choco uninstall win32-openssh -params '"/SSHServerFeature"' -confirm

おわりに

terminal から WindowsSSH 接続することを目的に,Widdows に sshd サーバをインストールし,接続しました。 使い慣れた macPowerShell スクリプトの開発ができるようになりルンルンです。

普段は,リモートデスクトップ接続(RDP)で良いけれど,回線が遅い場合でコマンドだけ叩きたい!なんてときにも役立ちそうです。

今回はパスワード認証での接続でしたが,今後は公開鍵で接続できるように設定してみようと思います。

気になっていたあのツールを試しました。

最近気になっていたあのツールを試してみました。

SendGrid

クラウド型のメール配信サービス。
無料プランに登録したまま全く使っていなかった SendGrid を Postfix に設定してみました。 ドキュメントに沿って進めていくとあっさり完了します。どちらかといえば、Postfix の設定の方が手間取りました。

管理画面から到達率と開封率が確認できます。URL トラッキングはまだ試していません。ちなみに手元のGmail宛に送ってみたら、開封する前に開封済になっていました。詳しくは確認していませんがフィルタリングとかでしょうか?? あとはWebAPIでの送信も試したいところです。

Postfixでメール送信 - ドキュメント | SendGrid

Datadog

クラウド型のモニタリングサービス。
リソースの利用状況を管理画面から確認できます。
こちらもサーバにエージェントをインストールしたらあっさり完了しました。
Step-by-step Installation に自分の API キーが挿入された形でコマンドが載っているのは地味に嬉しいですね。コピペで動きます。

無料プランなのでアラート通知はないのですが、サーバにログインせずともリソース状況が確認できるのはよいですね。(当然といえば当然なのですが)グローバルIPを付与していないサーバでも利用できました。

WindowsmacOS でも利用可能なので、ワークステーションなどに導入してもよいですね。
かつて5台ほどのPCを束ねたPCクラスタを使っていたことがあったので、このときに知っていたらどれだけ幸せになれたことかと思います。当時はいちいちログインして確認してました。

docs.datadoghq.com

fluentd

ログ収集管理ツール。
複数のサーバ、サービスのログ収集で効果を発揮するそうな(まだ試してません)。
導入については、カーネルの設定変更に躊躇してしまいましたが、ソフトウェア本体はレポジトリ経由であっさり終わりました。

docs.fluentd.org

社会人2年目エンジニアが1年目に心がけたこと。

記憶が曖昧になってしまいそうなので、忘れぬうちにメモ書きとして残しておきます。

いまは社会人2年目のWebエンジニア。サーバサイドエンジニアのつもりなのだけれどフロントも書くし(だが苦手)、インフラも気になる生活をしています。

Web系の開発初めてで学生時代はC++Javaぐらいしか書けなかった自分が、社会人1年目の時に教えられたことを書いてみました。


フレームワークのドキュメントを参照する

入社後の3ヶ月の新人研修を終えて、アサインされたのは Laravel へのリプレイスプロジェクトでした。 Laravel の基礎は社内勉強会で身につけていたものの、本格的な開発は未経験でした。

プロジェクトに配属されて、一番はじめに言われたことは「Laravelの公式ドキュメントを読みなさい」でした。 英語で書かれたこちらのドキュメントです。

laravel.com

ぐぐると日本語の情報がたくさん出てくるのですけど、それを読んでたら「そのページって、うちの開発で使ってるLaravelのバージョンとは限らないし、そもそも誤った情報の可能性あるよね」と叱られました。1

というわけで、実装に困ったら公式ドキュメントの該当部分を参照する習慣をつけました。ドキュメントは体系的に書かれているので、とりあえず通勤中に他の項目も読んでみることにしました。そしたら、普段の開発であまり使わないMVC以外の部分、例えば middleware の役割や Collection の機能、Custom Validation の実装などを知ることができました。開発で必要なライブラリは既に実装されていたのですが、足りないものは実装してみようかなと思うようになりました。

フレームワークの実装を確認する

次に言われたことは「わからない処理があったらまずはプログラムの定義元を確認してね。もちろんLaravelの部分もね。」でした。

ここで、壁にぶつかりました。テキストエディタだと定義元に飛べないときがあるぞ、、!と。 テキストエディタでもアドインを入れたら大丈夫だと思うのですが、自分の場合はIDEに乗り換えました。PhpStormをインストールしました。

諸々設定をして、定義を確認しながら実装を進めるようになりました。定義元の実装を確認してみると、自分がこれから実装しようとしている内容が既に他で実現されていることが多々ありました。余談ですが、PHP7だと戻り値も含め型宣言ができてガチガチに書けるのが好きです。

Laravelの実装も確認する習慣もついたのですが、読み進めるとドキュメントに載っていない機能が実装されていることに気がつきました。結構あります。はい。最近は「これ実装されてるんじゃないかなー」と探すと大抵実装されています。

コードレビューする

そんなこんなで開発を進めていくと、ある日メンションのついたプルリクエスト(プルリク)が飛んでくるようになりました。

チームは自分以外ベテランのエンジニアだったのでコードレビューするなんて恐れ多い(というか指摘するところない・・・)と思っていると、どうも“一年目”のコードレビューの目的は「他でどんな開発が行われているか」「他の人の実装方法から学ぶ」「わからないところは質問する・調べる」ことなのだと理解しました。

自分の初めてのプルリクは100件ぐらいコメントがつくぐらいのとんちんかんな実装でした。ですが、他の人のプルリクに目を通していると、スマートな実装方法を知れたり、変数や関数のイケてる命名などを学べました。そんな過程を経て、プルリクで「修正してね」系のコメントは減っていき、逆に実装方針についての議論のコメントは増えていきました。

そして、気がついたらAssigneeに指定され、自分がコードレビューをするようになっていました。


他にも大切なことは多々あるのですが、技術面で特に心がけたのはこの3つでした。総じてコードを読む習慣はとても役に立っていて、不具合が発覚した際になぜその不具合が起きたのか、他で同じ不具合を防ぐためにはどうすべきか、他に発生しうる箇所はないのか考える癖がつきました。

そんなこんなで2年目を迎えています。

これから

開発環境が整っている会社だとアプリケーションやツール、インフラは当たり前のように動き、ブラックボックスとして使えてしまいます。ですが、それらはどれも誰かが作った・整備したものです。デプロイツールのコードからミドルウェアのパラメータ、運用ツールなど会社の中にはその道のプロが用意したものが沢山溢れています。最近はその構築の話やチューニングの話を伺ったり自分の環境で試してみたりして、知見を増やしているところです。

次に書くのは3年目でしょうか。2年目の夏休みに書いてみました。以上です。


  1. 正確には全く読んでいけないというわけではなく、一次情報を確認してね。という意図が含まれています。

Windows 環境へ PHP 実行環境をお手軽に構築する

chocolatey を使ってお手軽に PHP + composer 環境を構築する話です。

chocolatey のインストール

コマンドプロンプトを管理者権限で起動します。

f:id:u9bo:20170516001144p:plain

以下のコマンドを実行します。

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

PHP のインストール

choco install -y php

なお、バージョンを指定する場合は、

choco install -y php --version 7.0.19

のようにします。

依存解決で、Windows の hotfix を適用した場合は、OS の再起動が必要になることがあるので、その場合は再起動します。

composer のインストール

choco install -y composer

インストール後の確認

おそらくパスが反映されていないのでコマンドプロンプトを新しく開く。このとき管理者権限で起動する必要はありません。

以下のコマンドでインストールできていることを確認します。

php

php --version

composer

composer --version

f:id:u9bo:20170516001141p:plain

インストールできました。

windows10 だともっとお手軽に導入できるので、そちらについてはまた今度。

pepper に ssh 接続してみました

自分でも何を言っているのかわかりませんが。

$ ssh nao@pepper
Password: 
pepper [0] ~ $ uname -a
Linux pepper 4.0.4-rt1-aldebaran-rt #1 SMP PREEMPT RT Mon Oct 3 19:22:50 Local time zone must be set i686 Intel(R) Atom(TM) CPU E3845 @ 1.91GHz GenuineIntel GNU/Linux
pepper [0] ~ $ free
             total       used       free     shared    buffers     cached
Mem:       4049716    1445008    2604708      93824      49020     511360
-/+ buffers/cache:     884628    3165088
Swap:            0          0          0
pepper [0] ~ $ 

CPU は Atom E3845(Bay Trail)で、主記憶 4GBのようです。