はじめに
突然ですが、YouTubeを使って動画を見たことがあると思います。YouTubeで動画を見ようとすると、初めに広告が流れることがありますよね？？広告動画の右側に「～秒後にスキップできます」みたいなボタンが表示されて、「～秒後」に「広告をスキップ」というボタンに変わり、そのボタンを押すことで広告のスキップをすることが出来ます。
こうした広告をスキップするには、毎回数秒まってその後に「広告をスキップ」を押す必要があり、正直ちょっと面倒ですよね？
今回は、このYouTube広告を自動でスキップする、そんなアプリ開発を行っていきたいと思います。
このアプリ開発を通じて学べること
このアプリ開発を通じて学ぶことができる内容を紹介します。
| アプリの要件・仕様 | 学べること |
|---|---|
| 利用言語はPython | Pythonを使ったアプリ開発 |
| できるだけ、入門者にもわかるように解説 | Python自体のプログラミング |
| YouTubeの「広告をスキップ」を画像判断して自動でクリック | 画像認識を利用したアプリ開発 |
| 実際の利用状況を想定したアプリを開発 | 実践的なアプリ開発 |
| 可能な限り抽象化して実装する | 作成したアプリをいろいろいじって自分のしたいことができる |
また、筆者はアプリ開発を通じたプログラミング学習をお勧めしています。その内容については次の記事に書いていますので、ぜひご覧ください。
【入門】プログラミング初心者にこそアプリ開発をお勧めする理由3つ
アプリのイメージ
今回作成するアプリでは、SikuliX（シクリ）を利用します。
SikuliXとは2009年にMITにて開始されたオープンソース（一般に「無償で公開する開発手法」のこと）で、次のような特徴を持っています。
- 画像認識の機能を持ち、容易に画像認識を利用したプログラムを利用できる。
- 様々なプログラミング言語をサポートしている
- 例えば、Python 、Ruby 、JavaScript 、Javaなどをサポートしている
- 画像に含まれる文字列を認識する機能（OCR）を備えている
今回はこんなSikuliXをJavaで開発していこうと思います。
1991年に開発され、オープンソースとして運営されているプログラミング言語です。
Pythonは簡潔にかけて、たくさんのライブラリ（有志の人たちが作った便利機能のようなもの）があり、初心者の人向けのプログラミング言語です。
今回扱う対象のYouTubeについてもPythonを使って作られており、バリバリの現役の言語です！
今回作っていくアプリの流れのイメージはこんな感じです。
まずはSikuliXをインストールして、簡単な動作確認を行います。
Chromeを自動で立ち上げて、YouTubeまで自動で遷移するプログラムを作成します。
今回作成するアプリ開発で利用するPythonの基本的な文法について説明します。
ここでは、波のアニメーションを描画するアプリ開発を通じてPythonを楽しく学習します。
【アプリ開発】Pythonで波のアニメーションを作成しよう
今回のアプリ開発で利用する機能を中心にSikuliXの機能をいくつか紹介します。
SikuliXの機能を組み合わせて作りたいアプリを作ってみましょう。
SikuliXをインストールしよう
最新のSikuliXを次のサイトからダウンロードしましょう。
“Download the ready to use sikulixide-x.x.x …”を押してお使いのOSにあったファイルをダウンロードしてください。
ダウンロードしたファイル（.jarファイル）を開いてください。次のような画面が開かれると思います。
SikuliXにはバージョン8以降のJavaをインストールする必要があります。
Javaをインストールしていない場合は、次のサイトからインストールするようにしてください。
表示されたサイトの「無料Javaのダウンロード」を押してダウンロードするようにしてください。
はじめてのSikuliX
インストールが完了したら、さっそくSikuliXを動かしてみましょう。
本記事では、以下環境での動作を想定しています。想定外の動作をする場合は、環境の問題の可能性もあるので、必要に応じてコードなどを修正してください。
・OS: Windows10(64ビット版)
・SikuliX: 2.0.5(windows版)
・Chrome: 90.0.4430.212(64ビット版t画面)
今回は、ブラウザ（Chrome）を自動で立ち上げて、YouTubeに移動するプログラムを作成してみましょう。
準備
まずはデスクトップにChromeのショートカットを配置してください。
以下のサイトが参考になると思います。
次にSikuliXを使う場合、どうしても必要となってくるのがキャプチャ画像です。
今回は次の手順でYouTubeを開こうと思っています。
- デスクトップに配置されたChromeのアイコンをダブルクリックして開く。
- Chromeの全画面表示ボタンがある場合にはクリックしてフォーカスを合わせる。
- Chromeの検索バーがある場合にはクリックして、検索可能な状態にする。
- YouTubeのURLを入力する。
- Enterを押して、YouTubeに遷移する。
上記から次の3つの画像を利用することがわかります。
- Chromeのアイコン画像
- Chromeの全画面表示ボタンの画像（右上の×ボタンの左のボタン）
- Chromeの検索バー
SikuliXでは、画面上部の「スクリーンショットを撮る」を押すと、スクリーンショットをとったうえで、プログラムに画像が表示されます。
この機能を利用して画像をプログラムに組み込むようにしてださい。
実際にプログラムを書いてみよう
デスクトップに配置されたChromeのアイコンをダブルクリックして開く
まず、デスクトップに配置されたChromeのアイコンをダブルクリックして開いてみましょう。
SikuliXを開いて、次のコードを入力しましょう。
doubleClick();そして、「丸括弧（）」の中にChromeのアイコン画像（）を貼り付けてみましょう。
そして、「実行」を押すとデスクトップに配置したアイコンをダブルクリックすることを確認できると思います。
メソッド
この、doubleClickのように、何か機能を持ったもののことをメソッドと呼びます。
メソッドには名前があり、名前を指定することでその機能を使うことができます。
（今回はdoubleClickと書くことでダブルクリックする機能を呼び出しています。）
引数
doubleClickの後の丸括弧の中に書いたもののことをメソッドの引数と言います。
引数を渡すことでメソッドで具体的に実行したい内容を決定することごできます。
（今回はクリックしたい画像を渡すことで、クリックする対象を指定するようにしていました。）
Chromeの全画面表示ボタンがある場合にはクリックしてフォーカスを合わせる
次はChromeの全画面表示ボタンを押して、フォーカスをブラウザに合わせてみましょう。
ただし、はじめから全画面表示されている場合、このボタンを押すことができないので、その場合にはブラウザの枠内をクリックするようにします。
SikuliXに次のコードを入力しましょう。
if(exists()):
click();ここでは、新たに2つのメソッドを追加で使っています。
click();このメソッドは、先程のdoubleClickのクリックバージョンのメソッドですので、説明を割愛します。
exists();このメソッドは引数に渡した画像が存在する場合はtrue、存在しない場合はfalseを返します。
返り値
メソッドを呼び出して、メソッドから最終的に返される結果のことを返り値といいます。
メソッドは返り値を返すことで、メソッドを呼び出したもとのコードに結果を通知します、
今回は、画面上に引数で渡した画像が存在するかを返り値で通知するようにしていました。
そして、新たにここでは、if分岐を利用して、クリックする対象を分けています。
if分岐
極論を言うとプログラミング言語は、分岐と繰り返しで作られています。
その分岐を実現する方法のうちの1つがif分岐で、分岐する際に最もよく使う分岐の方法です。状況に応じて処理を分けたい時に使います。使い方は次の通りです。
if(条件1):
// 条件1を満たしたときの処理
elif(条件2):
// 条件2を満たしたときの処理
else:
// 条件1も条件2も満たさなかったときの処理条件式
あとは条件式の書き方がわかれば、自由に分岐して、プログラミングをすることができます。
条件式を書く際に必要になってくるのが、比較演算子です。
比較演算子とは、次のようなもののことを言います。
| 比較演算子 | 説明 |
|---|---|
| A == B | AとBが同じだとtrue、異なる場合false |
| A != B | AとBが異なるとtrue、同じの場合false |
| A < B | AがBより小さいとtrue、AがB以上の場合falseを返します。 |
| A <= B | AがB以下の場合true、AがBより大きいとfalseを返します。 |
| A > B | AがBより大きいとtrue、AがB以下の場合falseを返します。 |
| A >= B | AがB以上の場合true、AがBより小さいとfalseを返します。 |
以上の内容から次のコードで何が実現できるか、考えてみてください。
if(exists()):
click();わかりましたでしょうか？答えは、「画面を最大化するボタン」（）がある場合には、そのボタンをクリックする。ない場合には、クリックしない。というものです。
Chromeの検索バーがある場合にはクリックして検索可能な状態にする
そして同様の処理をChromeの検索バー（）に対しても行います。
なので、ここではこの処理をメソッドとして定義して繰り返し使えるようにしましょう。
次のコードを書いてみてください。
def clickIfExists(image):
if(exists(image)):
click(image);ここでは、clickIfExistsというメソッドを定義しています。
これまで使ってきたdoubleClick()やclick()などはすでに作られたメソッドでしたが、今回は新たなメソッドを作成しています。
メソッドを作成するには、次の内容が必要です。
- 名前（今回はclickIfExistsという名前にしています。）
- 引数（今回は引数imageを用意して、画像を渡してもらうようにしています。）
- 返り値（今回は返り値がありません。）
- 実際に行う処理（今回は、imageが存在する場合、クリックするようにしています）
このように重複処理をメソッド化することで、コードの重複を避けることができます。
Pythonでは次のように書くとメソッドの定義ができます。
def "メソッド名"("引数"):
"実際に行う処理"
return "返り値";そうして、このclickIfExists()の()の中に画像を渡せば、あればクリックして、なければクリックしないという処理が実現できるようになります。
ここまでのコードを記載すると次のようになります。
# メソッドを定義：画像が存在する場合にクリックする
def clickIfExists(image):
if(exists(image)):
click(image);
# まずはChromeを立ち上げる
doubleClick();
# ウィンドウをを最大化する
clickIfExists();
# 検索する箇所にフォーカスする
clickIfExists();
そして、SikulliXの「実行」ボタンを押してください。するとプログラムが動き出すはずです！
YouTubeにページを遷移する
ここまで来たらあとは簡単です。次のコードを入力してください。
# YouTubeのサイトURLを入力する
type("https://youtube.com");
# Enterキーを押す
type(Key.ENTER);type()を利用するとキーボード操作を自動で行うことができます。入力する内容を引数に渡すことで自動でその内容を入力してくれます。
また、特殊なキーボード操作（エンターキーやスペースなど）については、以下のようにKeyから呼び出すことで入力することができます。
| 特殊キーボード操作 | 呼び出し方 |
|---|---|
| コントロールキー | Key.CTRL |
| エンターキー | Key.ENTER |
| ALTキー | Key.ALT |
| Windowsキー | Key.WINDOWS |
| SPACEキー | Key.SPACE |
とまあ、こんな感じでたくさんあるので、詳しく知りたい方は次を参考にしてください。
おわりに
お疲れさまでした。どうでしょうか？
意外と簡単に画像認識のアプリって作れそうじゃないかな？と思われた方も多いんじゃないでしょうか？
今回作ったのは簡単なアプリですが、アイデアによってはいろいろなことができるアプリが作れるはずです。ぜひできたアプリをそのままにせず、いろいろいじって楽しくプログラミング学習をしていきましょう！
最後に参考として今回のアプリのコードを載せておきます。
# メソッドを定義：画像が存在する場合にクリックする
def clickIfExists(image):
if(exists(image)):
click(image);
# まずはChromeを立ち上げる
doubleClick();
# ウィンドウをを最大化する
clickIfExists();
# 検索する箇所にフォーカスする
clickIfExists();
# YouTubeのサイトURLを入力する
type("https://youtube.com");
# Enterキーを押す
type(Key.ENTER);