ブログや技術書用にスクリーンショットを取るためのサイトを作ってみた

あらすじ

どうも、4/14の技術書典に出典することにした@scrpgilです。
現在、技術書を鋭意執筆中です。執筆は初めてなので苦労しながら楽しくやっていますが、ひとつだけ不満があります。それは技術書に載せるWebサイトの画像を用意するのが面倒だということです。

上はChrome DevToolsのスクリーンショット機能を使って作った画像になります。ご覧の通り枠線がないのでなんか不恰好ですよね。

こうならないために枠線つけたりなどの方法がありますが、個人的に一番綺麗だと思うのはMacのデフォルトのbox-shadowをつけてスクショを取る方法です。

どうですか？先ほどより綺麗じゃないですか？できれば常にこういうスクリーンショットを撮りたいと思います。

が、しかし、このスクショを取るためには白背景を用意したり不要なウィンドウを閉じたりしないといけません。これが意外と面倒です...。ああ、なんとかしたい...。

スクショを取るサイトを作ろう

というわけでChromeっぽい画面でスクショを取るためだけのサイトを作ってみました。

DEMO

制作時間はHerokuへのアップロード含めて小1時間ほどだったと思います。
ソースコードはこちら

他のサイトを読み込む

これはiframeでいけました。

<iframe src="<読み込みたいサイトのURL>"></iframe>

URL、縦幅＆横幅のバインド

StencilとIonicを使ってます。
ion-inputにEventListenerを貼ってます。

  async componentDidLoad() {
    const widthInput: any = this.el.querySelector("#width-input");
    widthInput.addEventListener("ionInput", async ev => {
      if (ev && ev.target && ev.target.value) {
        this.width = ev.target.value;
      }
    });
    const heightInput: any = this.el.querySelector("#height-input");
    heightInput.addEventListener("ionInput", async ev => {
      if (ev && ev.target && ev.target.value) {
        this.height = ev.target.value;
      }
    });
    const input: any = this.el.querySelector("#url-input");
    input.addEventListener("ionInput", async ev => {
      if (ev && ev.target && ev.target.value) {
        this.url = ev.target.value;
      }
    });
  }

Chromeっぽいタブバーを作る

「CSS Chrome like」でググったら最初の方に出てきました。
https://codepen.io/jcblw/pen/DxAJF

サイトとして公開する

今回、１番のハマりポイントでした。当初Netlifyで公開してんですが、それだとiframeでlocalhostを表示できない。
どうやら今日日MixContent対策が進んでおりhttpsのサイトからhttpのサイトはほぼ開けないようでした。
仕方なくhttpで公開しようとしたんですが、これまた今日日無料かつhttpで公開できるサービスはパッと見当たりませんでした（Firebase Hosting、Netlifyは共に強制SSL通信）。

結局、Herokuを使うことにしましたが普段Herokuを使っていなかったのでハマってしまいました。結局、以下の記事に助けられて公開をすることができました。先人の知恵に感謝...。
ionic frameworkで作ったアプリをherokuで公開する

まとめ

以上、Webサイトのスクショ用のサイトを作ってみたって記事でした。思ってたより簡単にできてしまったのでもっと早く作っていればよかったかな？と思っています。
ただ、僕は今回の技術書はすでに必要な画像を撮り終えているので使わないと思います。

最後になりますが自分が欲しいと思ったサイトも1時間後に作成することができるのでIonic、Stencilは本当に良いフレームワークだと思います。
興味がある方は是非ともマスターしましょう！それでは。

Ionic - Cross-Platform Mobile App Development
Stencil - The magical, reusable web component compiler