はじめに
はじめまして。
2024年3月よりプログラミングスクールRUNTEQに入学した、わーちゃんと申します。
スクールを2024年12月に卒業した今、改めて基本的な部分を振り返っています。
今回、振り返りの中で作ってみたいミニアプリのアイデアが思い浮かんだので作成してみました。
▶サービスURL：ビリーズブートスマイル
👆トップページから「ビリーズブートスマイル」をクリックすると、今回該当サービスのページへ遷移します。
▶Github：準備中
💪サービス概要と開発した理由👄
概要
- 自分の顔を見ながら笑顔のトレーニングができるサービスです。
- 自分の顔を見ることで、特に口回りの筋肉を意識してトレーニングすることが可能です👄
開発理由
- 就職活動初期、自分の表情がかたく、笑顔が全くないことを思い知る
- キャリア担当の方からも笑顔がないことを指摘される
- 「メラビアンの法則」にて、視覚情報の影響力の高さを知る
- 私自信、今まで出会った人で好印象だったのは、圧倒的に初対面が「笑顔」の人だった、という事を思い出す
- 自分のPCで、同じ画面上に手本と自分の画像がある状態で笑顔のトレーニングができればいいのでは？と考える
このような経緯から今回のサービスを開発するに至りました。
💪機能一覧👄
-
ヘッダー
- 固定ヘッダーの表示
- ロゴボタンのクリックでアクション実行（タイトルのロゴ・背景変化）
- 現在の日付と時刻を表示（Web Workersを使用）
-
フッター
- SNS共有ボタンの設置（Twitter共有）
-
インタラクティブ要素
- カウントボタン（指定時間からカウントダウンし、ゼロでアクション実行）
- モーダルウィンドウの表示（特定の操作時にポップアップが開く）
- 吹き出しメッセージ表示
-
カメラ機能
- デバイスカメラの映像を取得しリアルタイムで表示（Media APIを使用）
💪使用技術👄
| カテゴリ | 技術 | 説明 |
|---|---|---|
| 開発環境 | Glitch | Webアプリを開発・ホスティングできるオンラインプラットフォーム |
| コード管理 | GitHub | ソースコードのバージョン管理に使用 |
| フロントエンド | HTML | Webページの構造を定義 |
| CSS | Webページのデザインを担当 | |
| JavaScript | ページの動的な処理を記述 | |
| API | Web Worker API | バックグラウンドでの処理（日時更新） |
| Media Capture and Streams API |
getUserMedia を使用してカメラ映像を取得 |
|
タイマーAPI (setInterval / setTimeout) |
一定時間ごとに処理を実行 | |
| Web Audio API | 音声の録音・処理・再生を行う | |
| インフラ | Glitch Hosting | Glitch上でアプリをホスト |
| その他 | フォント (@import Google Fonts) |
特定のフォントを適用 |
Event Listener (addEventListener) |
ユーザー操作を検知 | |
DOM操作 (document.querySelector, innerText, etc.) |
ページ内の要素を取得・更新 |
💪頑張った点、こだわった点👄
- Javascriptの公式ドキュメントからAPIを選定
- Webカメラを使用
- タイトルロゴボタンをクリックすることで背景やタイトルが変化する実装
- 現在時刻の表示
- カウントダウンの音の再生とミュート機能
- フッターにXへのシェアボタン実装
- 10秒がわかりやすいよう、視覚情報に加え、音でもわかるようにした
💪最後に👄
今回、スクール卒業後に制作したサービスで、基本に振り返ったモノを開発できたのではないかと、感じています。
現在、様々なフレームワークがあります。
Javascript・HTML・CSSといった基本（土台）部分をしっかり理解することで、これらのフレームワークや言語のキャッチアップや理解度の向上が望めるのではないかと個人的に思っています。
スポーツで言えば、基本的な体力やフォームもできていないのに、いきなり、カットボールやスマッシュを攻略しに行くような事。
引き続き技術力向上に向け精進し、小さいモノでもいいから、面白い・役に立つようなサービスを作っていきたい。いきます！