1. はじめに(イントロダクション)
-
テーマの概要を説明
- この記事は、ジーズアカデミーアドベントカレンダー2024の12月9日のあみさんの記事からのバトンを引き継いだ12月10日のアドカレ記事になります
- 2024年アドカレ(技術編と無差別階級編)
- この記事は、ジーズアカデミーアドベントカレンダー2024の12月9日のあみさんの記事からのバトンを引き継いだ12月10日のアドカレ記事になります
- 時代の変遷に伴って使うことが激減してしまった自作のプロダクトがそっとしかばねになっていたことを偲び、最後に光を当てて供養してあげるために書いている記事になります
- 当時はまだChatGPTなどの生成AIはなく、分からないながらも調べながら書いたコードで作ったプロダクトになります
今年の春頃は毎月記事を書く様に心がけて書いていたのですが、夏頃からサボってしまい久しぶりの投稿になります。
記事ってほんと書かなくなっちゃうと書けなくなるから怖いですよねー。
3年前にもジーズのアドベントカレンダーをnoteに書いていました。興味がある方はこちらもご一読いただけると嬉しい限りです
-
想定する読者層や前提知識
pythonに興味ある方はなにかしらもゲットできる知識があるやもしれません。
特段のプログラミングの知識がなくてもpythonを使うとそういうこともできるのねー、ということは伝わるかなと思う記事になっています。
下記のキーワードが気になった方は是非読み切っていただいて、いいねを押して!!!(切実)
#python
#自動化
#selenium
#webdriver
#xampp
#git
2. プロダクト誕生の背景と動機(なぜこのプロダクトを作ったのか?)
ちょっと前提からお話ししておきましょう。
このプロダクトが生まれた背景
現在のわたしはジーズアカデミーでお仕事をしています。
「セカイを変えるGEEKになろう」
を合言葉にして、テクノロジー起業家を養成する学校です。
そんなジーズアカデミーでは、LABコースとDEVコースという2つの社会人の方向けのコースがありました。
(※現在、2025年4月開講予定クラスではLABコースはCLOSEとなり、DEVコースがレギュラーコースとなっております。パワーアップしたDEVコースに関心がある方は下記URLの説明会からご応募ください)
そんなジーズアカデミーでの私の役割はCSになります。
CSはカスタマーサクセスのことになります。(以下、CS)
CSとは??という方はこちらの記事を参照ください。
CSのお仕事は受講生が入学式の日からいかに自分入学前に目指していた姿に近づけるか、むしろその理想を超えて想像をもしていなかったところにまで辿り着けるかを考えて寄り添い伴走することです。
いくつかある業務にクラス運営があり、その中に毎週の課題をチェックするというものがあります。
ジーズアカデミーでは毎週ミニアプリを作成する課題に取り組んでいただき、合格する必要があります。
その課題もベースとなるお題を出しますが、毎週のアウトプットとなるプロダクトは人によって様々。受講生の創造性を最大限引き出すための仕組みとして、与えられたお題通りにやってこなくてもOK!!むしろそうしてきて!!! イイゾモットヤレ!!!というような気風の学校なんです。
色々と前置きを書きましたが、そんな学校で主にDEVコースの受講生をフォローアップさせていただいています。そんなDEVで毎週出る課題のチェックを一手に引き受けて課題をチェックしていた時期がありました(遠い目)
かくいう私も、ジーズアカデミーのLABコースの卒業生でして、2020年4月の東京のLAB9期生として通っていました。
そんなエンジニアのエの字くらいは心得ていた(つもりな)ので、毎週の皆さんの課題をチェックして合否判定をしていました。
そんな毎週の課題を2023年ごろですと、DEVコースは80人くらい在籍していました(※東京と札幌のクラスを合わせての人数)
そんな人数の課題を毎週、動作確認して不合格なら不合格のポイントをメモして、受講生に連絡して、、、という日々を送っていました。
現在通っているの受講生は課題のデプロイ(サービスリリース)が必須となっているのですが、以前はそうでない時期がありました。
なので、毎週の課題確認も一苦労。
フロントエンドのみで構成されている課題であれば、ブラウザで完結するためプロダクトの確認もそんなに時間がかかりません。
ただし、バックエンドの言語であるPHPで作られている課題ではそうはいきません。ジーズアカデミーではバックエンドの言語をPHPを採用しています。そんなPHPの課題が動く環境構築するところからスタートしなければいけません。
更にDBが関わるプロダクトともなると一大事です。
下記の手順を人数分繰り返す必要がありました。
- githubから課題のファイルをzipでダウンロード
- zipファイルを展開
- sqlファイルがあるか確認
- 受講生が作ったデータベースを私のPCのXAMPPで構築するために必要となります
- sqlファイルがない場合、受講生に鬼メンションしてすぐに提出してもらうか、自分で憶測してDB,テーブルを作ったりしていました
- 受講生が作ったデータベースを私のPCのXAMPPで構築するために必要となります
- XAMPPにsqlファイルを読み込ませてデータベースを構築
- ブラウザでlocalhostを起動して画面の確認
- 動作が問題なくできていればOK!!受講生のモチベーションが少しでも上がるようにと、課題のコメントを残したり
- 別の受講生とデータベース名が重複することがあるため、データベースをXAMPP上からドロップ(削除)
ということをしなければなりません。
これを受講生の人数分やると思うと、、、1日で終わるのでしょうか??
とかなーーーーり前置きが長くなってしまいましたが、この様な受講生と向き合うために必要な課題内容のチェック以外の重要でない環境構築と削除の工数を自動化したいと思って作ったプロダクトになります。
3. 主題(技術の説明)
やっと本題です。
改めてまとめます。
この記事で紹介しているプロダクトは下記のフローを自動化するためのものになります。
1. githubから課題をダウンロードする
2. データベースを構築する
3. 課題をチェックする
4. データベースを削除する
この課題を解決するためにプロダクトは2つに分けて作成しています。
- 受講生の課題をgithubからダウンロードするためのプロダクト
- データベース構築からブラウザでの動作チェック、データベース削除までを実行するプロダクト
としていました。
使用技術
技術選定としてはpythonを用いています。
下記のライブラリを使用しています。
- メイン
- GitPython
- selenium
- おまけ
- colored_traceback
- エラー内容がわかりやすくなるのでオススメです
- questionary
- ターミナルで対話形式に実行するため導入しています。とっても便利だったのでおすすめです
- colored_traceback
4. 実例
ここでは実行しているVisual Studio Codeの画面も交えて説明していきます。
4.1.1 環境を整えよう
まず、実行環境を仮想で構築します。pythonの実行環境をわたしはよくvenvを使うのでそちらで構築します。
venvとは
venvは手軽に仮想環境を作成・管理することができるツールです。
また、venvはPythonバージョン3.3以降の標準ライブラリとして提供されており、バージョン3.3以降のPythonをインストール済みの方はvenvを別途インストールすることなく利用可能です。
構築の際の手順はこちら
# venvをフォルダ名をvenvで指定して実行
python3 -m venv venv
# venvのフォルダ内のactivateコマンドで実行環境を指定
source venv/bin/activate
# activateできている場合、ターミナルで先頭に(venv)とつくのでそれを確認しましょう
# こちらは終了時に使うコマンド。使用が終わったらちゃんとdeactivateしましょう
deactivate
venv環境が構築できたら必要なライブラリをインストールします
# 実行に必要なライブラリをインストール
pip install jaconv datetime GitPython
# 開発に必要なライブラリをインストール
pip install questionary colored_traceback
このプロダクトの前提として、課題を集約しているjsonファイルがあることが前提となっています。
この頃はgoogle formを使用して課題の情報を収集していました。
スプレッドシートに溜まった毎週の課題を番号ごとにフィルタリングしてjsonファイルとしていました。
以下の様なフォーマットで受講生の課題情報をjson化していました
{
"タイムスタンプ": "2023-01-01T00:00:00.000Z",
"メールアドレス": "hogehoge@gmail.com",
"所属": "東京 DEV24",
"受講番号": 1,
"氏名": "ジーズ太郎",
"課題番号": "1 (JS1 - じゃんけんアプリ)",
"アプリタイトル": "おれの理想のじゃんけんアプリ",
"このアプリ、一言で言うとどんなアプリ?": "最強のじゃんけんアプリです",
"提出課題URL(GitHub URL)": "https://github.com/TatsuyaMaeta/js1-jojo-card-battle",
"README.md提出": "",
"(任意)課題のデプロイURL": "",
"(任意)備考": "",
"firebase Config(API Key)入力項目": ""
}
このフォーマットに則った課題ごとのjsonファイルをpythonで指定して処理をします。
4.2.1 githubの複数リポジトリの取得してみよう
課題のファイルを取得する際の手順は以下の手順で実行していました。
- 取得する課題のエリア(東京 or 札幌 or 全拠点)を指定
- ダウンロードする課題番号を指定
- 取得する課題番号ごとでまとまっているjsonファイルを指定
- この場合に、2で指定している課題番号と一致していない場合はダウンロードされない仕様になっています
ffmpegを用いてgifにしてみました。
(当時の受講生の個人情報に配慮して一部モザイク処理しています)
https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/b358f0a0-99ce-94f0-e409-7f28225b40ac.gif
※ うまく表示されない可能性があるのでURL貼っておきます
無事取得が完了した場合に何かのエラーが原因で取得できなかった人たちの一覧が表示されるようにしています。
これは個別に対応して課題のフォルダを確認しやすい様にしています。
そして最後は課題チェックをこれから実施する自分を鼓舞する様に
||||||||||||||||||||||||||||||||||||||||
|| ✨✨✨おめでとうございます✨✨✨ ||
|| 課題の取得が完了しました ✏️ ||
|| 課題チェック、頑張ってくださいね🔥 ||
|| BECOME A GEEK WITH THE POWER ||
|| TO CHANGE THE WORLD. ||
||||||||||||||||||||||||||||||||||||||||
と表示をしてGitHubリポジトリ取得完了を告げます。
4.3.1 データベースを自動で構築しよう
次に課題をチェックするための環境を構築します。
この時にXAMPPは自分で起動させましょう。笑
流石にアプリケーションの起動、XAMPPのMySQL、Apacheの起動までは当時はやりきれませんでした。
起動できたら、pythonでデータベースを構築していきます。
その際にターミナル上で実行内容を選べる様にしています。
まずはデータベースを構築するところかになるので1のデータベース作成を選択します。
すると、同ディレクトリ内で選択可能なディレクトリを選択できる様にしています。そこから構築したい課題を選択します。
この動画では受講番号21番の方にしました。
受講番号21の方のディレクトリに入った際に以下の内容をフィルタリングしています
- ディレクトリ内にファイルとフォルダが何があるのか?
- SQLファイルはあるのか?
- ある場合に、2つ以上のファイルがあるのか?
- ない場合はSQLファイルが入っていそうなディレクトリはあるのか?
この場合は1階層目にSQLファイルがありました。
そこからファイルのパスを取得して次の工程に入ります。
次はブラウザを起動させて操作し、データベースを作成します。
seleniumというライブラリを用いてブラウザを起動、SQLファイル内に記述されているデータベース名を取得してそこからデータベースを構築します。(動画内ではbookというデータベース名でした)
構築したデータベースに対し、sqlファイルに記載あるテーブル名や元から入力されていたテーブルの値をインポートしていきます。
無事設定ができてオールグリーンの戻り値が確認できましたね。
このプロダクトではそのまま提出してもらっている課題がチェックできる様にしています。
その課題のディレクトリまでをターミナルで操作して開いていきます
日本語の表記名は今回表示されない仕様にしておきました。
XAMPPで開いているフォルダを操作して課題をチェックします。
ブックマークアプリの登録をここでは実際にしています。
本のタイトルとURL、説明が無事登録できたので課題としては問題ないですね!!
これにて課題のチェックはOKです。
4.3.2 ブラウザで課題の動作確認してみよう
ここでの動画では4.2.1でデータの登録までできることを確認したので必要ないのですが、プロダクトの動作確認からでもできる様にしています。
万が一データベースからでなくプロダクトのチェックがしたい場合はここからでも同様のチェックが可能になっています。
4.3.3 使用済みデータベースを削除しよう
課題の内容の確認が終わったら使用済みのデータベースを削除しましょう。
その場合は、3)のデータベース削除を選択します。
そして削除したいデータベース名を選択するだけとなります。
XAMPP上には削除してしまっては困るデータベースまで表示されています。
それは削除しない様にブラックリストを作っており、そこに登録して選択されない様に設定をしています。
そして削除したいデータベースを選択した後は自動でドロップ(削除)するためのページへ移動し、モーダルのボタンも自動でクリックする様な操作にしています。
削除が完了した場合はターミナルに
==================================
finished to drop database. (no error)
==================================
Bye.
と表示されます。
これで以上です。
あとは受講生の課題に向き合うだけですね‼️
5. 応用・発展(深堀りポイント)
結構当時はこだわって作った自分用のプロダクトでした。
階層を潜って指定拡張子のファイルがないか探索し、なければディレクトリ一覧を取得して更に指定されたディレクトリを探索する様な回帰性を持たせたロジックにしていました。
加えて、すでに説明もしていますが、ターミナルで対話性を持たせて操作しやすいものを意識して作っていました。上下キーだけでフォルダが選べるのは当時は大変便利でした。
あと、これをチューターにも配布して使える様にしてはどうか?とデスクトップアプリ化にもチャレンジしていました。pythonファイルのデスクトップ化にはディレクトリパスの書き方がめちゃくちゃ難しくて手を焼いた記憶があります。(遠い目)
そんな思い出深いプロダクトもラーニングシステムが刷新され、課題のデプロイが必ず必要になり、チューターにもチェックいただくというシステムになるについれて不要となり、今日までむくろとなっていた次第です。
このアドカレによって陽が当たり供養できてよかったです。
6. まとめ
このプロダクトに興味ある人が何人かいれば、気が向けばgithubにてソースコードを公開しますのでお声がけいただければ幸いです。
7. あとがき(執筆の背景や感謝)
当時はまだChatGPTもなく、コードを書くにも時間がかかっていました。
ただ、時間がかかりながらも自分で動くものを作れるのは嬉しいものでした。
こんなミニプロダクトもこの記事を見ていただいた方の世界を変えるきっかけになれば幸いです。
(※2024年12月9日 17:00ごろから書き始めて、12月10日03:00に書き終えました。死闘です。作品とは母なる創造と父なる妥協から生まれた産物でしかないですわ)