LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Grow-some

超簡単な録音WEBAPPつくってみた

Posted at

はじめに

作成したファイルはほぼすべて公開しています。良ければ参考にしてください！
Githubソースコード

なぜこれを作ったか

　特にこの3点を考えています！

  1. 素早くプロトタイプを作る術を心得えたい！
    素早く作ることが難しい。作りたいものが一番簡単な状態になるところまで分解できることを意識して実装しました。
    「これがあればいいな」から「ちょっと作ってみたけどイマイチだな。」まで進む良さはこの目標を達成して経験しようと思います。

  2. プログラムが動くまで作る習慣をつけたい！
    作りかけで終わってしまったり、機能が複雑になりすぎて挫折するともったいないと思いました。
    一つ小さなプログラムが動いたところでver0.1を保存する。そのあと肉付けする。
    これをやっていけば確実に作った機能が残っていきます！やる気にもつながるはず

  3. プログラムの基礎知識を実践で習得したい！
    転職してエンジニアになったはいいものの、動くアプリを1から作ったこともなければ、設計したこともない状態でした。
    使ったツール・機能を発信することで、エンジニア書学者の同志が見たときにスルッと理解で切ると思いました。

前提条件

アプリ作成に作った環境は下記です

  • 開発環境

    • OS: Windows 11
    • 開発ツール: VScode,podman Desktop v1.14.2
    • 補助ツール: ChatGPT(GPT4o),Github Copilot

  • 本番環境(container)

    • サーバーOS: Ubuntu 22.04
    • デプロイ: Docker 20.10 以上
    • リバースプロキシ: Nginx

  • ブラウザ互換性

    • サポート対象: Chrome (v100以上)

どうやって作ったか

設計・設定が雑ですが、許してください。

設計図を思い浮かべる。(書く。)

今回は簡単なアプリなので、下記の様にします。

  • ユーザーがページにアクセスすると録音開始・停止のボタンが表示される
  • 録音開始すると、マイクの許可が求められる
  • マイクへのアクセスを許可すると、録音がスタートし、録音ファイルがサーバに保存される
  • 最後に録音停止すると録音が終わる
  • Chromeブラウザで動き、録音したい人と録音データがほしい人は別の人とする
  • 録音データの収集は今回作成しない

プログラムを書く。書いてもらう。

使った言語は３つです。html,javascript（笑）,python

裏方処理

  • 今回は簡単なWEB画面の裏側でプログラムを動かしたいかつ速く作りたいので、pythonで書きます。また、pythonではflaskライブラリを使います。詳しくはググってください。
  • pythonはサーバに起動したとき実行され、WEB画面を立ち上げます。また、保存のリクエストが来た時にファイルをサーバに保存します。

WEBアプリの実装には、htmlとjavascriptで最低限のWEBページを作ります。ほんと最低限です。

  • javascriptはWEBページのボタンコマンドに使われています。ボタンが押されると、裏で動いているpythonに保存のリクエストを行っています。
  • htmlはWEB画面を表示しています。これはプログラム言語ではないです。

コードはこの記事の一番上にGithubリンクがありますので、感覚をつかみたい方はご利用ください。

開発環境を作る。

普段のPC環境は、Windowsデスクトップ・ノート・Linuxが入ったRaspberry pieでした。
アプリを作るときに何が必要なのかわからなくなってしまうので環境を分けるために使っています。
podman desktopを使いました！再利用しやすい点で選択しています。

今回はContainer環境を使って実装しています。ここがメインコンテンツです。

1.GhatGPTにDockerファイルを出力させます。
  • ここではバージョンは特に見ないで「こんな構造でコマンドを使っているんだ。」というのを見ます。あと配置するフォルダ構成も聞いておくと分かりやすかった！読んでみるとこんな感じ
    • FROMでOSのイメージをダウンロードします。podmanハウスとします。
    • WORKDIRで作業するフォルダ(アプリのプロジェクトフォルダ)を指定します。podmanハウスに荷物を入れる引っ越しトラックをイメージしました。Dockerファイル(搬入手順書)も含めて全部入っているフォルダを選びました。
    • RUNでコマンドラインで実行するようなアプリのインストールコマンドを書いておきます。トラックからpodmanハウスに家具家電を入れる感じ。
    • COPYで作業するフォルダのファイルをコピーしていきます。これはpodmanハウスに自分の持ち物を入れるイメージです。大事なのは搬入する順番です。カーペットを引く前にテーブルを搬入してしまうと、カーペットを敷くのが出来ないですよね。もちろんいつ入れても良いものもあります。
    • ENVで環境変数を設定する。podmanハウスのコンセントに家具・家電のプラグを差し込む感じ。これで家具家電が使えます。
    • EXPOSEで使うポートを開けてあげる。podmanハウスのドアを開けるイメージ。これで外から人が入ってきて家の中で遊べる様になりました。
    • CMDで最初に実行しておきたいコマンド・プログラムを指定してあげる。pdmanハウスの電気のスイッチやテレビの電源をいれていつでも遊べる状態にするわけですね。

どうでしょうか、分かりやすかったでしょうか。

2.間違い探しをしてバージョンや、足りないコマンドを見つける。

　生成AIが出力したDockerファイルをざっくり見て、なんか古いな…なんて思ったら鋭い！古いところがあれば直しましょう。
　今回は古いコマンドのと足りないファイルが一つずつでした。足りないファイルは後で実施しているビルドで分かりました。

FROM　python3.10と指定していました。この時点で3.13が安定版でリリースされていたのでそれを使うことにしました。安定版を使うことは、アプリの互換性の面でも非常に重要ですね。

3.ビルドあるのみ！エラーを読む。

Podman Desktopでpodmanハウスを作ってみましょう。

まずDocker Desktopのイメージページから右上のbuildボタンを使って、イメージを作成します。
image-2.png

先ほど作成した設計書(Dockerファイル)を選択します。Container fileの項目で指定しましょう。
イメージ名を入力します。好きな名前でいいです。今回は一つの機能なので、本番リリースとせずver.0.1としました。
image-3.png

最後に一番下のbuildを押します。

ここから、設計書の通りpodmanハウスのイメージを作ってくれます。

大体１回ではうまくいかないです。エラー文を読んでいきましょう。

requirements.txtがないエラー発生！確かにCOPYって書いたのファイルを配置していませんでした。

でも作り方がわからない。ここで、VScode上のGitHub Copilotに聞いてみます！すると…
image.png

このコマンドを実行すれば解決するのか。勉強になりました。ちなみにどこから情報を参照していたのでしょうか。
image-1.png

pipのコマンド説明書から参考にしていたみたいです。こういった生成AIが参照していたサイトで検索するのも知識が広がりますね！

こうしてイメージが完成すると
Podman DesktopのLogにSuccessfully builtと出力されます！

Successfully built ***************
Successfully tagged round-table:0.01
4.podmanデスクトップでコンテナを起動する。

先ほど作ったpodmanハウスはイメージです。まだブレーカーが落ちています。

ではイメージを起動させましょう！作成したイメージファイルの行にある再生ボタンを押します。イメージを使って、コンテナという環境を起動させることができます。
image-5.png

これでコンテナが起動してアプリが動作します。

動作を確認する。

Chromeを開いて先ほど指定したpodmanハウスにアクセスしましょう！
image-7.png

表示されていますね！
image-8.png

何が障壁になったか

初めてコンテナを作った。うまくいかない。

　はじめはDockerファイルに何が書かれているかすら分からない状態でした。コンテナ環境のビルドの流れ、コマンドの内容を理解していくことでファイルをうまく作ることができました。

はじめてflaskで作った。フォルダ構成からわからない。

初歩的な仕様が分からず苦戦しました汗
エラーログを確認して、エラーの原因は何か特定することで解決できました。わからなければエラーログをそのままGPTにチャットすると答えてくれます！

次回以降の作成

次はこの録音アプリに機能を追加するところで記事にしようと思います！アプリの機能はGithubに追加していきますので興味があればご覧ください！

コメント、誤記・誤謬あれば教えてください！
最後まで読んでいただきありがとうございました！

参考文献

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?