社会人最初の作業でスクショを頑張った話

Transcript

1. 社会人最初の作業で スクショの自動化を頑張った話 株式会社ラクーンホールディングス 橋村 将希
2. 自己紹介 ⧫ 名前 - 橋村 将希 ⧫ 所属 - 株式会社ラクーンホールディングス - フルスタックエンジニア - ECサイトの開発 ⧫ 趣味 - ボードゲーム、猫、飯の量をミスる
3. 新卒での最初の仕事を覚えていますか？
4. 研修終わり(2019年9月) 今日から業務で緊張するな～ 今日から業務だけど、要件定義が大変なやつと開 発が大変なやつどっちがいい？ 🤔🤔🤔🤔🤔🤔🤔🤔🤔 じゃあ要件定義で...
5. 要件の大変なやつ 要件 ・いろいろなURLにアクセスしてスクリーンショットを撮って欲しい。 ・幅や高さには指定する大きさがある ・利用するブラウザは頻繁にアップデートが入る ・どんな技術を利用するかは任せた！ じゃあ使う技術はNodeがいいなぁ... でもスクリーンショットってどうやったら自動で取れるんだろう ...
6. chromeを使えば簡単に取れる
7. chromeを使えば簡単に取れる！ chrome.exe --remote-debugging-port=◦◦◦◦ chromeをリモートデバッグオプションを使って起動する 外部ツール
8. chromeを使えば簡単に取れる！ 起動したchromeで適当なURLを開き、 別のタブでlocalhost:◦◦◦◦/jsonにアクセスする
9. chromeを使えば簡単に取れる！ { "description": "", "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/pag e/167882B7BDD1DA32621F4C0F26B4D924", "id": "167882B7BDD1DA32621F4C0F26B4D924", "title": "株式会社ラクーンホールディングス ", "type": "page", "url": "https://www.raccoon.ne.jp/", "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/167882B7BDD1DA326 21F4C0F26B4D924" } 該当のタブを操作するために提供されているWebSocket接続のURL これを利用してWebSocketクライアントから接続する
10. chromeを使えば簡単に取れる！ 接続を通じてCDP(chrome devtools protocol)形式のメッセージを送信することで、 そのページに対して操作を行う CDP(chrome devtools protocol) Google ChromeやChromiumベースのブラウザとその他の Chromiumベースのアプリケーションとの間で、デ バッグや自動テスト、その他のタスクを行うための通信プロトコル 例: スクリーンショットを撮るメソッド Page.captureScreenshot 例: ページを遷移するメソッド Page.navigate 例: ディスプレイのサイズを変更する Emulation.setDeviceMetricsOverride
11. 実際に見てみよう！
13. 結構大変？
14. これ一つで解決！！
15. なぜ？ 2018年6月に開発が終了しているため、 更新が見込めない WebDriverを利用しているため、 CDPよりも自由度が低そうだと判断 (4からはCDPを利用できる)
16. ブラウザ起動 タブ作成 URL スクリーンショット Promise URL毎 URLのリスト
17. 思い出 ・会社のシステムの理解もあまりなかったので、要件定義からリリースまで3か月くらいかかった ・レビュー・QAでの指摘数は100を超えていた ・時間はかかったが、会社の人との関係やサービスへの理解が深まった ・大きな作業だったが、リリース後も障害も起きず評価された ・今もまだシステムの更新が行われています ・Nodeのアップデート編 ・クジラに乗せてくれ編 ・TypeScriptにしていなかった まだTypeScriptをあまり使って おらず、入れることにビビっていた TypeScriptは？ なんでTypeScript にしなかったの？ なんでJS？
18. 新卒最初の作業でチャレンジさせてくれたチームに感謝
19. ご清聴ありがとうございました