新規記事の投稿を行うことで、非表示にすることが可能です。
2024年04月02日
自動でブラウザを操作するプログラムを作成する方法!
皆さんはブラウザで繰り返し同じ操作をしていてめんどくさいなぁと思ったことはないですか?
実は自動で操作してくれるツールを自分で作ることができます!
私の場合は体育館の予約を自動で、しかも毎月スケジュールされた日にツールにやってもらうようにしています!
それ以降は予約に必要な作業は30分から0秒になりました!
しかも予約のし忘れも無くなりました!(これが地味に一番嬉しい)
今回は皆さんにもブラウザの操作を自動化するツールの作り方を教えたいと思います!
わかりやすくするために3つの記事に分けるので知りたい部分から始めてもOKです!
・ツールを作るためのセットアップ
今回はココ
・ツールの作成
・スケジュールに沿って実行する
ツールを作るためのセットアップ
1. ソフトウェアのインストール
2. プログラムを作成する環境の作成
3. ブラウザ操作のためのツールをインストール
ツールの作成に必要なソフトウェアはたったの2つです!
PCはWindowsとMacどちらでもOKです!
筆者のPCはMacになります。
Windowsの操作でつまずいたところがあればお調べするのでぜひコメントしてください!
1. Visual Studio Code
https://code.visualstudio.com/Download
![スクリーンショット 2024-04-02 19.38.42.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-022019.38.42-thumbnail2.png)
こちらのリンクから自分が使っているPCの種類の下にあるダウンロードボタンをクリックしてください。
ダウンロードが完了したら
Windowsの方: VSCodeSetup-~~~~~~.exeというファイルがダウンロードされるのでそれをダブルクリックしてください。セットアップの画面が表示されるので、最初の画面で「同意する」を選択して次へを押してください。それ以降の画面でも「次へ」を何回か押すと、最後に「インストール」というボタンになるのでクリックしてインストールします。
Macの方: zipファイルがダウンロードされるので、zipファイルをダブルクリックしてください。Visual Studio Code.appというファイルが使用するソフトになります。起動しやすいフォルダに移動させてもOKです。
2. Docker
https://www.docker.com/ja-jp/products/docker-desktop/
こちらのリンクから自分が使っているPCの種類のダウンロードボタンをクリックしてください。
![スクリーンショット 2024-04-02 19.23.42.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-022019.23.42-thumbnail2.png)
Windowsの方: Docker Desktop Installer.exeというファイルがダウンロードされるのでダブルクリックします。「このアプリがデバイスに変更を加えることを許可しますか」という画面が出たら「はい」をクリックしてください。
Macの方: docker.imgというファイルがダウンロードされるのでダブルクリックします。するとこのようなウィンドウが開くので左側のアイコンを右にドラッグ&ドロップしてください。
これで必要なソフトウェアのインストールは終了です!
お疲れ様です!
実はプログラムは単にソースコードを書くだけでは動作しません。
ソースコードを実行するために必要なものがあります(ランタイムと言ったりしますが、今回は詳しく書きません)
先ほどインストールしたDockerをダブルクリックして起動してください。
Macの方は「インターネットからダウンロードされたアプリケーションです。開いてもよろしいですか?」というメッセージが出るかもしれませんが、「開く」をクリックしてください。
その後、Visual Studio Codeを起動してください。
最初は英語の設定になっているので日本語化します。
左側に並んでいるアイコンの一番下のアイコンをクリックします。
これは拡張機能を管理するアイコンです。
検索窓に「日本語」と入力して出てきた一番上のものをクリックします。
「install」をクリックしてください。
![スクリーンショット 2024-04-02 20.37.01.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-022020.37.01-thumbnail2.png)
インストールが終わると右下に通知が出るので、「Change Language and Restart」をクリックします。
再度ウィンドウが開くので、また拡張機能のアイコンをクリックして「dev container」と入力します。
一番上に出てくると思うのでそれもインストールします。
![スクリーンショット 2024-04-02 20.40.45.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-022020.40.45-thumbnail2.png)
次にこちらのリンクからファイルをダウンロードしてダブルクリックで解凍してください。
解凍したファイルはどこに保存していても良いですが、場所を忘れてしまいそうな人はデスクトップが良いです。
VSCodeの上部の「ファイル」から「フォルダを開く」を選択して、先ほど解凍したフォルダを選択します。
![スクリーンショット 2024-04-02 20.43.24.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-022020.43.24-thumbnail2.png)
その後、左下の青いアイコンをクリックして「コンテナーで再度開く」を選択します。
この処理には少し時間がかかります。
![スクリーンショット 2024-04-03 21.32.54.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-032021.32.54-22a74-thumbnail2.png)
真ん中の「ポート」という文字の右に1が表示されていたら起動が完了しています。
お使いのブラウザに「http://localhost:6080/」と打ち込むと「noVNC」と表示されるので「connect」
をクリックしてpasswordに「vscode」と打ち込みます。
このパスワードは初期設定のものですが、localhostというページにはあなたしか接続できないのでパスワードが初期設定のものでも問題ありません。
その状態でVSCodeに戻り、上部の「ターミナル」から「新しいターミナル」を選択します。
下にターミナルが表示されるのでそこに
python main.py
と入力してエンターを押してください。
先ほどブラウザで「noVNC」が表示されていたページを見るとブラウザが立ち上がってWikipediaのページが表示されているのが確認できると思います!
そしてWikipediaの検索窓に文字が勝手に入力されて検索する動作が行われますが
これが自動化のプログラムによって操作されています!!!
今回はブラウザの操作を自動化するツールのセットアップまでを解説しました。
分からないところがあればぜひコメントで教えてください!
実は自動で操作してくれるツールを自分で作ることができます!
私の場合は体育館の予約を自動で、しかも毎月スケジュールされた日にツールにやってもらうようにしています!
それ以降は予約に必要な作業は30分から0秒になりました!
しかも予約のし忘れも無くなりました!(これが地味に一番嬉しい)
今回は皆さんにもブラウザの操作を自動化するツールの作り方を教えたいと思います!
わかりやすくするために3つの記事に分けるので知りたい部分から始めてもOKです!
・ツールを作るためのセットアップ
![指差し確認左](/_images_e/e/EFD8.gif)
・ツールの作成
・スケジュールに沿って実行する
ツールを作るためのセットアップ
1. ソフトウェアのインストール
2. プログラムを作成する環境の作成
3. ブラウザ操作のためのツールをインストール
ソフトのインストール
ツールの作成に必要なソフトウェアはたったの2つです!
PCはWindowsとMacどちらでもOKです!
筆者のPCはMacになります。
Windowsの操作でつまずいたところがあればお調べするのでぜひコメントしてください!
1. Visual Studio Code
https://code.visualstudio.com/Download
![スクリーンショット 2024-04-02 19.38.42.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-022019.38.42-thumbnail2.png)
こちらのリンクから自分が使っているPCの種類の下にあるダウンロードボタンをクリックしてください。
ダウンロードが完了したら
Windowsの方: VSCodeSetup-~~~~~~.exeというファイルがダウンロードされるのでそれをダブルクリックしてください。セットアップの画面が表示されるので、最初の画面で「同意する」を選択して次へを押してください。それ以降の画面でも「次へ」を何回か押すと、最後に「インストール」というボタンになるのでクリックしてインストールします。
Macの方: zipファイルがダウンロードされるので、zipファイルをダブルクリックしてください。Visual Studio Code.appというファイルが使用するソフトになります。起動しやすいフォルダに移動させてもOKです。
2. Docker
https://www.docker.com/ja-jp/products/docker-desktop/
こちらのリンクから自分が使っているPCの種類のダウンロードボタンをクリックしてください。
![スクリーンショット 2024-04-02 19.23.42.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-022019.23.42-thumbnail2.png)
Windowsの方: Docker Desktop Installer.exeというファイルがダウンロードされるのでダブルクリックします。「このアプリがデバイスに変更を加えることを許可しますか」という画面が出たら「はい」をクリックしてください。
Macの方: docker.imgというファイルがダウンロードされるのでダブルクリックします。するとこのようなウィンドウが開くので左側のアイコンを右にドラッグ&ドロップしてください。
これで必要なソフトウェアのインストールは終了です!
お疲れ様です!
プログラムを作成する環境の作成
実はプログラムは単にソースコードを書くだけでは動作しません。
ソースコードを実行するために必要なものがあります(ランタイムと言ったりしますが、今回は詳しく書きません)
先ほどインストールしたDockerをダブルクリックして起動してください。
Macの方は「インターネットからダウンロードされたアプリケーションです。開いてもよろしいですか?」というメッセージが出るかもしれませんが、「開く」をクリックしてください。
その後、Visual Studio Codeを起動してください。
最初は英語の設定になっているので日本語化します。
左側に並んでいるアイコンの一番下のアイコンをクリックします。
これは拡張機能を管理するアイコンです。
検索窓に「日本語」と入力して出てきた一番上のものをクリックします。
「install」をクリックしてください。
![スクリーンショット 2024-04-02 20.37.01.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-022020.37.01-thumbnail2.png)
インストールが終わると右下に通知が出るので、「Change Language and Restart」をクリックします。
再度ウィンドウが開くので、また拡張機能のアイコンをクリックして「dev container」と入力します。
一番上に出てくると思うのでそれもインストールします。
![スクリーンショット 2024-04-02 20.40.45.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-022020.40.45-thumbnail2.png)
次にこちらのリンクからファイルをダウンロードしてダブルクリックで解凍してください。
解凍したファイルはどこに保存していても良いですが、場所を忘れてしまいそうな人はデスクトップが良いです。
VSCodeの上部の「ファイル」から「フォルダを開く」を選択して、先ほど解凍したフォルダを選択します。
![スクリーンショット 2024-04-02 20.43.24.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-022020.43.24-thumbnail2.png)
その後、左下の青いアイコンをクリックして「コンテナーで再度開く」を選択します。
この処理には少し時間がかかります。
![スクリーンショット 2024-04-03 21.32.54.png](/yujufudan/file/E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202024-04-032021.32.54-22a74-thumbnail2.png)
真ん中の「ポート」という文字の右に1が表示されていたら起動が完了しています。
お使いのブラウザに「http://localhost:6080/」と打ち込むと「noVNC」と表示されるので「connect」
をクリックしてpasswordに「vscode」と打ち込みます。
このパスワードは初期設定のものですが、localhostというページにはあなたしか接続できないのでパスワードが初期設定のものでも問題ありません。
その状態でVSCodeに戻り、上部の「ターミナル」から「新しいターミナル」を選択します。
下にターミナルが表示されるのでそこに
python main.py
と入力してエンターを押してください。
先ほどブラウザで「noVNC」が表示されていたページを見るとブラウザが立ち上がってWikipediaのページが表示されているのが確認できると思います!
そしてWikipediaの検索窓に文字が勝手に入力されて検索する動作が行われますが
これが自動化のプログラムによって操作されています!!!
今回はブラウザの操作を自動化するツールのセットアップまでを解説しました。
分からないところがあればぜひコメントで教えてください!
【このカテゴリーの最新記事】
2024年04月01日
初めての競輪🚴
昨日Youtubeで見ていたこの動画がめっちゃ面白かったです!
さらばのチャンネルは今までも見ていましたが、4人のおじさんが冷静じゃなくなるというシチュエーションだけで腹を抱えて笑いましたwww
今まで公営ギャンブルは一切してこなかったですが、この動画で興味が湧いたので動画の中でもやっていた競輪に挑戦してみました。
使ったのはウィンチケットというアプリで、競輪やオートレースなどの公営競技のチケットをアプリ経由で買うことができるみたいです。
あとライブ映像の視聴もできるみたいです。
実際にチケットを買うまでにはこんな流れでした。
アプリのインストール
ウィンチケットをダウンロードします。アプリを起動して会員登録に進みました。
![Screenshot_20240401-185932.png](/yujufudan/file/Screenshot_20240401-185932-thumbnail2.png)
新規会員登録
アプリを起動し、会員登録をします。
今回、私は会員登録にgoogleアカウント連携を選びました。
その後は名前と生年月日の入力だけで会員登録が完了しました!
本人確認もありましたが確認は自動で行われ、わずか5秒で完了しました。
証明には運転免許証やマイナンバーカードを使用できます。
レースを選び、チケットの買い方を決める
好きなレースを選択します。開催予定のレースがトップに表示されていたのでとりあえずそれを選択しました
![Screenshot_20240401-190347.png](/yujufudan/file/Screenshot_20240401-190347-thumbnail2.png)
チケットの買い方は3連単や2連複などがありますが、オッズを見ながら選択するだけです。
![Screenshot_20240401-190359.png](/yujufudan/file/Screenshot_20240401-190359-thumbnail2.png)
レースを鑑賞
出走前になるとスマホに通知が来るので早めに買って結果を見忘れるということもなさそうです。
結果はハズレでした、ビギナーズラックはなかったです...
![Screenshot_20240401-195840.png](/yujufudan/file/Screenshot_20240401-195840-thumbnail2.png)
競輪のチケットを買うのは初めてでしたが、インストールから5分でチケットの購入まで出来ました!
今まで競馬などとは無縁だったので、お財布が寂しくならないように程々に遊んでみたいと思います😇
興味のある方はこちらからインストールしてみてください!🚴♂️![チェッカーフラグ(モータースポーツ)](/_images_e/e/EF92.gif)
https://www.winticket.jp/invitation?shared=true&ts=240314&variant=code&wtc_code=VSBER3ZA
さらばのチャンネルは今までも見ていましたが、4人のおじさんが冷静じゃなくなるというシチュエーションだけで腹を抱えて笑いましたwww
今まで公営ギャンブルは一切してこなかったですが、この動画で興味が湧いたので動画の中でもやっていた競輪に挑戦してみました。
使ったのはウィンチケットというアプリで、競輪やオートレースなどの公営競技のチケットをアプリ経由で買うことができるみたいです。
あとライブ映像の視聴もできるみたいです。
実際にチケットを買うまでにはこんな流れでした。
アプリのインストール
ウィンチケットをダウンロードします。アプリを起動して会員登録に進みました。
![Screenshot_20240401-185932.png](/yujufudan/file/Screenshot_20240401-185932-thumbnail2.png)
新規会員登録
アプリを起動し、会員登録をします。
今回、私は会員登録にgoogleアカウント連携を選びました。
その後は名前と生年月日の入力だけで会員登録が完了しました!
本人確認もありましたが確認は自動で行われ、わずか5秒で完了しました。
証明には運転免許証やマイナンバーカードを使用できます。
レースを選び、チケットの買い方を決める
好きなレースを選択します。開催予定のレースがトップに表示されていたのでとりあえずそれを選択しました
![Screenshot_20240401-190347.png](/yujufudan/file/Screenshot_20240401-190347-thumbnail2.png)
チケットの買い方は3連単や2連複などがありますが、オッズを見ながら選択するだけです。
![Screenshot_20240401-190359.png](/yujufudan/file/Screenshot_20240401-190359-thumbnail2.png)
レースを鑑賞
出走前になるとスマホに通知が来るので早めに買って結果を見忘れるということもなさそうです。
結果はハズレでした、ビギナーズラックはなかったです...
![Screenshot_20240401-195840.png](/yujufudan/file/Screenshot_20240401-195840-thumbnail2.png)
競輪のチケットを買うのは初めてでしたが、インストールから5分でチケットの購入まで出来ました!
今まで競馬などとは無縁だったので、お財布が寂しくならないように程々に遊んでみたいと思います😇
興味のある方はこちらからインストールしてみてください!🚴♂️
![チェッカーフラグ(モータースポーツ)](/_images_e/e/EF92.gif)
https://www.winticket.jp/invitation?shared=true&ts=240314&variant=code&wtc_code=VSBER3ZA