![13
DOM要素の特定
● classで特定するのは非現実的
● XPathでボタンのテキストを検索
○ '//span[text()="今すぐ参加"]'
<div role="button" class="uArJ5e UQuaGc Y5sE8d uyXBBb xKiqt RDPZE"
jscontroller="VXdfxd" jsaction="click:cOuCgd; mousedown:UX7yZ;mouseup:lbsD7e;
mouseenter:tfO1Yc;mouseleave:JywGue;touchstart:p6p2H;touchmove:FwuNnf;
touchend:yfqBxc(preventMouseEvents=true|preventDefault=true);
touchcancel:JMtRjd;focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;" jsshadow
jsname="Qx7uuf" aria-disabled="true" tabindex="-1" >
<div class="Fvio9d MbhUzd" jsname="ksKsZd"></div>
<div class="e19J0b CeoRYc"></div>
<span jsslot class="l4V7wb Fxmcue">
<span class="NPEfkd RveJvd snByac">今すぐ参加</span>
</span>
</div>](https://image.slidesharecdn.com/raspberrypiandgooglemeet-210415045453/85/Raspberry-Pi-Google-Meet-13-320.jpg)
![16
コマンドの発行
● Google Meetのチャットでコマンドを書き込む
○ コマンド文字列を含むXPathで待機
■ '//div[text()="点灯" or text()="消灯"]'
○ 要素を見つけたら外部コマンドを実行するだけ](https://image.slidesharecdn.com/raspberrypiandgooglemeet-210415045453/85/Raspberry-Pi-Google-Meet-16-320.jpg)
More Related Content
What's hot (20)
More from KLab Inc. / Tech (20)
Recently uploaded (15)
Raspberry PiとGoogle Meetでお手軽ペットカメラ
- 1. Raspberry Piと Google Meetで お手軽ペットカメラ 牧内大輔 KLab TECH Meetup #7
- 2. 2 猫を飼い始めました ● 在宅勤務になり１年以上 ● 家にいる時間が増えた ● ペットを飼い始めた人も多いのでは？ ● 保護猫の里親になった ● 外出中猫たちが心配 ペットカメラが欲しい
- 3. 3 ペットカメラ ● 市販品を買ってくる ○ Panasonicのやつとか ○ ほかいろいろ ● Raspberry Piで自作する ○ UV4L、MJPG-Streamer ● カメラ自体が配信サーバになるタイプ ● 我が家にはグローバルIPアドレスが無い(建物全体がLANになっている物件) ○ 外から家の中のカメラにアクセスできない
- 4. 4 そうだ、Google Meet 使おう。 ● グローバルIPアドレス不要 ● スマホ?PC問わず閲覧できる ● 直接アクセスされないのでセキュア ● 無料で無制限に使える ○ 1通話あたり60分制限（2021年3月末までは24時間でした） ○ 通話数は無制限 ○ 実質24時間365日通話可能
- 5. 5 ペットカメラ完成
- 6. 6 ペットカメラ完成 ● Raspberry Pi 3B（たまたま転がっていた） ● USBウェブカメラ（たまたま転がっていた） ● 総額 0 円※！！！（※たまたま転がっていたものの費用を除く） ● GUI入りのRaspberry Pi OS ● VNC ● Chromiumブラウザ ● VNCで入ってChromiumでGoogleMeetに繋ぐだけ！！
- 7. 7 不満点 ● 見える範囲が狭い ● 夜間なにも見えない ● Meetの制限時間で強制終了 ● 家族の接続を毎回承認するのが面倒 ○ カレンダーに招待すればいいと後から知った
- 8. 8 不満点 ● 見える範囲が狭い ● 夜間なにも見えない ● Meetの制限時間で強制終了 ● 家族の接続を毎回承認するのが面倒 ○ カレンダーに招待すればいいと後から知った ハードの問題 ソフトの問題
- 9. 9 ハードの問題の対処 ● いい感じのカメラモジュールを購入 ○ 魚眼レンズ ○ 夜間モード自動切り替え ○ 赤外線LED付き ○ 2300円くらい ○ 同じ製品がAmazonから消えてしまった ■ 実質、このカメラとこのLEDのセット
- 10. 10 ハードの問題解消 ● 接続するだけでOK ● ほぼ部屋全体が見える ● 夜間も見える ● 工作中に猫に叩き落とされて破損 ● もう一度購入したら初期不良で返金 ○ IRフィルタが切り替わらない ○ お届けまで2週間 ● レンズ違いのものを購入しなおし ○ 翌日配送だがちょっと高い（3300円くらい） ○ レンズだけ交換
- 11. 11 ソフトの問題の対応 ● Meetの制限時間で強制終了 ● 家族の接続を毎回承認するのが面倒 ● Google Meetの自操作がしたい ○ つまりChromiumブラウザの自動操作 Puppeteer
- 12. 12 Puppeteerによる自動化 ● Googleへのログインをなんとかする ○ 自動操作でのログインが制限されている ○ ログイン済みのCookieを取り込めば良い ○ GoogleのサービスをPuppeteerで自動操作する方法 - ログイン編 ● ボタンを押す ○ DOM要素の出現を待ってclick() ■ await page.WaitForSelector(...) ■ await page.WaitForXPath(...)
- 13. 13 DOM要素の特定 ● classで特定するのは非現実的 ● XPathでボタンのテキストを検索 ○ '//span[text()="今すぐ参加"]' <div role="button" class="uArJ5e UQuaGc Y5sE8d uyXBBb xKiqt RDPZE" jscontroller="VXdfxd" jsaction="click:cOuCgd; mousedown:UX7yZ;mouseup:lbsD7e; mouseenter:tfO1Yc;mouseleave:JywGue;touchstart:p6p2H;touchmove:FwuNnf; touchend:yfqBxc(preventMouseEvents=true|preventDefault=true); touchcancel:JMtRjd;focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;" jsshadow jsname="Qx7uuf" aria-disabled="true" tabindex="-1" > <div class="Fvio9d MbhUzd" jsname="ksKsZd"></div> <div class="e19J0b CeoRYc"></div> <span jsslot class="l4V7wb Fxmcue"> <span class="NPEfkd RveJvd snByac">今すぐ参加</span> </span> </div>
- 14. 14 ソフトの問題解消 ● PuppeteerでGoogle Meetの操作を自動化 ○ 通話の開始 ■ 事前に作ったURLを使い回せる ■ 「今すぐ参加」ボタンを待って押すだけ ○ 参加の承諾?拒否 ■ 参加リクエストダイアログを待ってボタンを押すだけ ■ ホワイトリストで管理 ○ 時間切れ時に自動再開 ■ 時間切れメッセージを待ってreload()するだけ
- 15. 15 機能追加してみる ● 照明やエアコンも操作したい ○ 格安スマートリモコンの作り方 - Qiita ■ コマンドラインで操作できるようにしておく
- 16. 16 コマンドの発行 ● Google Meetのチャットでコマンドを書き込む ○ コマンド文字列を含むXPathで待機 ■ '//div[text()="点灯" or text()="消灯"]' ○ 要素を見つけたら外部コマンドを実行するだけ
- 17. 17 デモ
- 18. 18 まとめ ● Raspberry PiとGoogle Meetでペットカメラを作った ○ ネットワーク構成に影響されない ○ 外からのアクセスも簡単 ○ セキュリティも万全 ○ 拡張性も高い みなさんもぜひ作ってみてください
- 19. 19 KLabTechBook PDF無料頒布中 ● KLabTechBook Vol.7 ○ 初出：技術書典10 ■ 継続頒布中 ○ 今日話した内容も掲載 ○ KLabのブログにて既刊PDFも頒布中