Pythonプログラミング入門として、人気バラエティ番組『相席食堂』のちょっと待てボタンを簡易的に作成・解説してみます。
完成イメージは次の通りで、画像をマウスでクリックするとボタンが赤くなり、効果音として「ちょっと待て」という音声を再生します。
初心者の方には難しそうに見えるかもしれませんが、ひとつひとつの要素はとても単純です。
今回のたった11行のプログラムを理解するだけで、下記のプログラミングスキルの基礎要素を身につけることができます。
- データの入れ物『変数』の使い方
- 条件によって処理を判断させる『if文』の使い方
- 処理をまとめて呼び出す『関数』の使い方
- 画像処理で使われる『OpenCV』で画像を表示する方法
- 『playsound』で音声を再生する方法
- マウス操作に応じた処理方法
作業時間としては20分程度です。(環境設定除く)
環境について
今回の解説は、PCにPython3、OpenCV、playsoundをインストールした環境で行います。
すべてあわせても15分程度で簡単に用意できます。
まだインストールしていない場合は、以下の記事を参考にしてください。
また、Pythonの開発環境として、Visual Studio Code(VS Code)をおすすめしています。
インストール方法と、簡単なPythonのプログラミング方法も解説していますのであわせて参考にしてください。
ちなみに上記はすべて無料で利用できます。
Windowsの場合
Pythonをまだインストールしていない方はこちらから

OpenCVをまだインストールしていない方はこちらから

playsoundをまだインストールしていない方はこちらから

Visual Studio Codeをまだインストールしていない方はこちらから

Ubuntu(Linux)の場合
UbuntuはあらかじめPythonがインストールされています。
Windows上にUbuntuをインストールしたいという方は次の記事で解説しています。

OpenCVをまだインストールしていない方はこちらから

playsoundをまだインストールしていない方はこちらから

Visual Studio Codeをまだインストールしていない方はこちらから

Raspberry Pi OSの場合
Raspberry Pi OSはあらかじめPythonがインストールされています。
Raspberry Piの概要やOSのインストール方法についても解説しています。
必要な方は参考にしてください。

OpenCVをまだインストールしていない方はこちらから

playsoundをまだインストールしていない方はこちらから

Visual Studio Codeをまだインストールしていない方はこちらから

素材の準備
画像
まずは表示する画像を用意します。
次の2つの画像をダウンロードしてください。
ちなみにこの画像は『Blender(ブレンダー)』で作成しました。
Blenderは無料で使用できる3DCGを作成するための統合環境です。
今回のプログラムでBlenderはとくに関係ありませんが、気になる方は次の記事でインストール方法を解説しています。

効果音
つづいて効果音「ちょっと待て」を用意します。
ご自身の「ちょっと待て」の音声を録音できる方は、ご自身の声の音源をmp3形式で用意してください。
手っ取り早く音源が欲しい方は、フリー音源サイト『効果音ラボ』さんにちょうどいい音声があったので、ご紹介します。
声素材の日常セリフとして「ちょっと待って」の音声があるので、[DL]ボタンを押してダウンロードしてください。
ダウンロードしたファイル名は『「ちょっと待って」.mp3』となっていますが、今回作成するプログラムではカギかっこ「」がファイル名に含まれるとエラーになりますので、次のように名前を変更して下さい。
ファイル名変更
『○○○.png』のようなファイル末尾の文字(拡張子)が表示されない場合はこちらを参考にしてください。

以上で素材の準備は完了です。
\わからないことは現役のエンジニアに無料相談してみよう/
プログラミング
それではPythonのプログラムを作成します。
今回のプログラムのファイル名は『aiseki.py』としました。
プログラムファイルと同じ階層に用意した画像と音声ファイルを保存してください。
VS Codeを使う場合は、画面左側のエクスプローラに素材ファイルをドラッグアンドドロップして追加することもできます。
つづいて『aiseki.py』のプログラムを次のように入力してください。
解説は後述しますので、ここでは何もわからなくても大丈夫です。
import cv2
from playsound import playsound
button_blue = cv2.imread("button_blue.jpg")
button_red = cv2.imread("button_red.jpg")
def mate(event, x, y, flags, param):
if event == cv2.EVENT_LBUTTONDOWN:
cv2.imshow("aiseki", button_red)
playsound("ちょっと待って.mp3")
cv2.imshow("aiseki", button_blue)
cv2.setMouseCallback("aiseki", mate)
cv2.waitKey(0)
これでプログラムは完成です。
ひとまず実行してみましょう。
VS Codeを使っている場合は画面右上の実行ボタン▷から実行できます。
次のような画面が表示されたら、画面をクリックしてみましょう。
画像が切り替わったら成功です。
キーボードのいずれかのキーを押すと画面は閉じます。
上手くいかない場合は、インストール漏れやプログラムにミスがないかよく見直してみましょう。
VS Codeを使っている方で、importの行に次のような警告が表示された場合は、実行できません。
次の記事を参考に設定を変更してください。

解説
ここからはプログラムの解説をします。
全体の処理の流れとしては次のようになります。
- 使用する2種類の画像の読み込み
- ボタン(青)の画像をウィンドウに表示
- ウィンドウ内をクリックされるまで待機
- クリックされたらウィンドウの画像をボタン(赤)に差し替え、効果音を再生
- キーボードが押されたら終了
要素ごとにひとつずつ解説していきます。
画像の表示
まずは画像の表示に関する箇所から解説します。
import cv2
今回、画像の表示にOpenCV(cv2)のライブラリを使用します。
ライブラリとは、プログラムの作成に便利な機能をまとめたファイルのことです。
ここでは画像ファイルを扱う準備としてOpenCV(cv2)をインポートしています。
OpenCVで画像を扱う場合は、必ずこの一行を入れると覚えておけば大丈夫です。
順番は前後しますが、つづいてはこちらの2行について解説します。
button_blue = cv2.imread("button_blue.jpg")
button_red = cv2.imread("button_red.jpg")
ここではOpenCV(cv2)の[imread]という機能を使って、画像ファイルを読み込んでいます。
このようにOpenCV(cv2)の機能を使いたいときに『cv2.(使いたい機能)』のように記述します。
imread(“ ”)の中にファイル名を記述することで、画像ファイルを読み込むことができます。
読み込んだ画像は[button_blue]、[button_red]と名付けたデータの入れ物にそれぞれ保存しています。
Pythonをはじめとする多くのプログラミング言語で『 = (イコール)』は、『=』の右側のものを『=』の左側に代入する際に使用します。
このようなデータの入れ物を変数と呼びます。
変数については次の記事で詳しく解説しています。

つづいては、こちらの行を解説します。
cv2.imshow("aiseki", button_blue)
ここでは、さきほど画像を読み込んだ変数[button_blue]を表示しています。
画像を表示するには、OpenCV(cv2)の[imshow]という機能を使います。
[imshow]は次のように使用します。
cv2.imshow( ウィンドウの名前 , 画像 )
今回はウィンドウの名前に”aiseki”と入力したので、次のように表示されたはずです。
画像の表示に関する解説は以上です。
OpenCVを使った画像の表示については、次の記事でも解説しています。

\わからないことは現役のエンジニアに無料相談してみよう/
音声の再生
つづいては音声ファイルの再生に関する箇所を解説します。
まずはこちらの行です。
from playsound import playsound
今回、音源の再生にplaysoundという機能の集まりの中の、同名のplaysoundという音声を再生する機能を使用します。
次のような書式で記述します。
from (playsoundという機能の集まり) import (の中のplaysoundという機能)
プログラミング初心者のうちは理解が難しいかもしれませんので、playsoundを使う際は最初にこの一行を記述すると覚えていただければ構いません。
続いての行です。
playsound("ちょっと待って.mp3")
ここで実際にplaysoundという音声ファイルを再生する機能を使います。
“ ”の中に再生したい音声ファイル名を記述します。
音声の再生に関する解説は以上です。
playsoundを使った音声の再生については、次の記事でも解説しています。

\わからないことは現役のエンジニアに無料相談してみよう/
マウス操作に応じる
つづいてマウスが操作されたかどうかを拾う処理について解説します。
マウス操作を取得する機能についてはOpenCV(cv2)に用意されています。
次の行が該当の箇所です。
cv2.setMouseCallback("aiseki", mate)
setMouseCallbackは次のように使用します。
cv2.setMouseCallback( 対象のウィンドウ , マウス操作された時の処理 )
『対象のウィンドウ』は、今回画像を表示するときに用意した”aiseki”というウィンドウを指定しています。
『マウスを操作した時の処理』は、[mate]と入力していますが、このmateという処理を記述しているのが次の箇所です。
def mate(event, x, y, flags, param):
if event == cv2.EVENT_LBUTTONDOWN:
cv2.imshow("aiseki", button_red)
playsound("ちょっと待って.mp3")
つまり”aiseki”ウィンドウの中で、マウスで何らかの操作をされた時、これらの処理が実行されます。
順に解説します。
まずはこちらの行です。
def mate(event, x, y, flags, param):
ここでは、いくつかの処理をまとめて呼び出すことができる『関数』と呼ばれるものを作成しています。
関数は次のように記述します。
def 関数名( ):
関数内で行う処理
『関数名』は自由につけることができます。
今回は[mate]としました。
関数名の後の( )の中は引数(ひきすう)と呼ばれ、関数にデータを渡すときに使用します。
『関数内で行う処理』は、関数名を入力した次の行から、字下げの空白(インデント)の後に入力します。
関数の詳しい使い方については、次の記事で解説しています。

今回の引数はマウス操作を拾うための特別な使い方として、(event, x, y, flags, param)のように記述しています。
OpenCVでマウス操作を拾うときの定型文として覚えていただければ構いません。
それぞれの意味は次の通りです。
event | マウス操作(イベント)の種類 |
x , y | マウス操作(イベント)の発生時のカーソルの座標 |
flags | マウス操作(イベント)の発生時の動作(押されたキーボード等) |
param | その他の設定 |
今回この中で使用するのは[event]のみです。
eventでマウス操作の種類を判別することができます。
次の箇所で、マウスの左ボタンが押されたことを判断しています。
if event == cv2.EVENT_LBUTTONDOWN:
この行の意味としては、『マウス操作(イベント)は、左ボタンが押されたことか?』となります。
ここでは条件によって処理を切替える『if文』と呼ばれるものを使用しています。
if文は次のように使用します。
if 条件:
条件に当てはまる場合に行う処理
今回は『マウス操作(イベント)は、左ボタンが押されたことか?』という条件式として、
event == cv2.EVENT_LBUTTONDOWN
と記述しています。
このようにif文では『A == B』と書いたとき、『==』は『AとBが等しい』という意味で使われます。
if文の詳しい使い方については、次の記事で解説しています。

ちなみにマウス操作(イベント)の種類には次のようなものがあります。
EVENT_MOUSEMOVE | マウスが移動した |
EVENT_LBUTTONDOWN | マウスの左ボタンが押された |
EVENT_LBUTTONUP | マウスの左ボタンが離された |
EVENT_LBUTTONDBCLK | マウスの左ボタンがダブルクリックされた |
EVENT_RBUTTONDOWN | マウスの右ボタンが押された |
EVENT_RBUTTONUP | マウスの右ボタンが離された |
EVENT_RBUTTONDBCLK | マウスの右ボタンがダブルクリックされた |
EVENT_MBUTTONDOWN | マウスのホイールボタンが押された |
EVENT_MBUTTONUP | マウスのホイールボタンが離された |
EVENT_MBUTTONDBCLK | マウスのホイールボタンがダブルクリックされた |
そして、EVENT_LBUTTONDOWNの『マウスの左ボタンが押された』の条件に当てはまった時に実行される処理が、次の2行です。
cv2.imshow("aiseki", button_red)
playsound("ちょっと待って.mp3")
『画像の表示』の項目で解説したように、cv2.imshowでは画像を表示します。
ここではすでに用意していた”aiseki”ウィンドウの画像をbutton_redの画像に差し替えています。
そして『音の再生』の項目で解説したようにplaysoundで効果音[ちょっと待って.mp3]を再生します。
\わからないことは現役のエンジニアに無料相談してみよう/
キーボードが押されたら終了
最後に、次の行でキーボードが押されるまで待機します。
cv2.waitKey(0)
[waitKey]はキーボードが押されるまで待機する機能です。
この記述をしないと、プログラムが終了してしまうので、[imshow]で表示した画像が一瞬しか表示されません。
[waitKey(0)]の( )の中には待機する時間をミリ秒単位で指定できます。
試しに『cv2.waitKey(5000)』のように変更して実行してみましょう。
画像が5000ミリ秒(5秒)表示されたあと、ウィンドウが閉じます。
[waitKey(0)]のように0を指定した場合は0秒待機するという意味ではなく、無限に待ち続けるという意味になります。
以上で解説は終了です。
まとめ
Pythonプログラミング入門として、人気バラエティ番組『相席食堂』のちょっと待てボタンを簡易的に作成・解説してみました。
改めてまとめると今回ご紹介したプログラミングスキルの基礎要素は次の通りです。
- データの入れ物『変数』の使い方
- 条件によって処理を判断させる『if文』の使い方
- 処理をまとめて呼び出す『関数』の使い方
- 画像処理で使われる『OpenCV』で画像を表示する方法
- 『playsound』で音声を再生する方法
- マウス操作に応じた処理方法
これらを一度にすべて理解する必要はありません。
使っているうちに「こんなものか」と慣れてくるかと思います。
プログラミングは、最低限の知識でかまわないのでわからないなりにとりあえず作ってみて、その過程で出てきたよくわからない理論や仕組みは後追いで調べていきましょう。
今回のプログラムでも改善点や完全に解説できていない点は多々あります。
ご自身でそれを見つけて調査・対処するだけでもプログラミングスキルは格段に上達するでしょう。
たとえば、マウス左右のボタンで処理を変えてみたり、マウスのクリックした位置によって処理を変えてみるのはいかがでしょうか?
いろいろと自分なりに改良して遊んでみてください。
また、今回学んだことがあればプログラム内にコメントとして残しておくようにしましょう
次回見たときにスムーズにプログラミングを再開できるはずです。
コメントの書き方については次の記事で紹介しています。

この記事が役に立ったら是非シェアをお願いします。泣いて喜びます。
なにか作ってみる
次の記事ではPythonを使って初心者向けに画像認識AIを作成・解説しています。

「AIを学びたいけど、どの解説も理論ばかりでよくわからん」
という方に向けて、理論は最小限にまずはご自身のPCにプログラミング環境を用意し、実際にAIプログラミングを体験することで最初のステップ踏んでみようという記事です。
Tensorflowの学習済みのモデルであるInceptionV3を活用することで、初心者でも簡単にAI画像認識を体験することができます。
AI技術に興味がある方はぜひ参考にしてください。
Pythonの魅力
Pythonは世界的にも人気の高いプログラミング言語のひとつです。
汎用性が高く、データ分析やWebアプリの開発等、幅広い分野で使用されているほか、日本の市場で今後も拡大することが予想されるAI(機械学習、ディープラーニング)技術との親和性も高く、Pythonを扱えるエンジニアの需要は伸びていくことが予想されます。
そのため開発言語として採用する企業も増えています。
市場動向調査では、Pythonエンジニアの求人倍率は約53倍と非常に高く、慢性的に人材が不足している状況です。
参考: レバテック『2021年12月のITエンジニア・クリエイター正社員転職/フリーランス市場動向』
また、プログラミング言語別の年収調査ではPythonは3位と高い水準にあり、中央値で575万円、最大提示年収で1,499万円と、日本人の年収の中央値397万円を大きく上回りました。
参考: BIZREACH『プログラミング言語別年収中央値を発表、求人検索エンジン「スタンバイ」調べ』
参考: 時事ドットコム『【2022年最新】日本の「平均年収」「年収中央値」を調査』
このように、Pythonは将来性の高いプログラミング言語と言えるでしょう。
就職、転職、副業を目指す上で、身につけておきたいスキルです。
Pythonの学習難易度は他のプログラミング言語と比べると比較的低いとされています。
独学で習得することも可能ですが、近年はオンラインスクールを利用して短期間で集中して実務レベルまで習熟させるという方も増えています。
プログラミングのオンラインスクールを活用する場合は、現役のエンジニアが講師となるスクールが優位でしょう。開発現場で通用する質の高い実務ノウハウを学ぶことができます。
また、オンラインスクールであれば全国どこからでも受講できるため、わざわざ都会へ出たり交通費をかけることなく、ライフスタイルに合わせて効率的にスキルを身につけることができることが魅力です。
ITエンジニアとして働き高い収入を得るための先行投資として、オンラインスクールは一つの選択肢となり得るでしょう。
無料体験できるオンラインスクールもあるため、独学でも習得できそうか、短期集中で学んだ方がいいのか、ご自身の力量を見極めてみるのもいいのではないでしょうか。

こちらの記事ではオンラインスクールを受講する価値はあるのかについて解説しています。あわせてどうぞ

コメント