Railsアプリの作り方【実践編】音声が鳴るシンプルなWebアプリを作ってみよう！

🔰この記事のゴール

本記事では、Railsを使って「ボタンを押すと音声が鳴る」シンプルなWebアプリを作成していきます。
以下のような方におすすめです

• Railsを使ったアプリ開発を体験してみたい方
  
  
• データベースを使わずにアプリを作ってみたい方
  
  
• 初めてアプリを公開してみたい方

完成イメージはこちら：testapp完成状態
※無料プランでホスティングしているため、起動に2分ほどかかることがあります。

🧱事前準備

以下の環境が整っていることを前提としています：

• Ruby on Rails（バージョン7系）
  
  
• Node.js / Yarn（WebpackerではなくImportmapを使用）
  
  
• VS Code またはお好みのエディタ
  
  
• GitHubアカウント
  
  
• Render.comアカウント

まだ環境構築が終わっていない方は、以下の記事を参考にしてください：
👉 Railsアプリの作り方【前編】環境構築からRailsウェルカムページまで

✅ アプリケーションの作成

ターミナルを開き下記を実行

rails new testapp --skip-active-record

cd testapp

bundle install

rails restart

rails s

localhost:3000にアクセスする

下記の状態になっていれば成功です

🖥️testappをGitの管理下におく

ターミナルで以下のコマンド実行

git init

git add .

git commit -m "環境構築完了"

git branch -m main

📄README.mdを編集する

README.mdファイルを編集する
(ファイルツリーの一番下にあります)

以下参考画像

# testapp

## サービス概要

タップすると音が出るアプリです。

## ユーザー層

プログラミング初学者

## サービスコンセプト

- これからプログラミングを学ぶ方にアプリを作ったという体験を届けたい
- 初学者向けに難しい技術は使用せず基本の技術のみで実装します

## 実装を予定している機能

- ボタンを押すと音声でディスられる
- X(旧Twitter)共有機能

## 使用予定技術

- HTML
- CSS
- Ruby on Rails

## 画面遷移図

画面遷移しないので作成しません

## ER図

データベースを使用しないため作成しません

git commit -m "README.mdを更新"

git add .

🏢アプリの骨組みを作成する

コントローラー、ビュー、ルーティングを設定する

ターミナルで下記を実行する

rails g controller home index

root "home#index"

ブラウザでlocalhost:3000にアクセス

ターミナルで下記コマンドを実行

rails s

ブラウザでlocalhost:3000にアクセスしリロード

下記のように表示されていればOK

ターミナルをもう一つ開く

右上の ＋ ボタンよりターミナルをもう一つ開きます

git add .

git commit -m "初期設定完了"

🔧アプリに機能を実装する

本番環境で音声を再生するための設定

config.public_file_server.enabled = true

config.assets.compile = true

Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'audios')

JavaScriptを読込めるように設定する

app/javascript/application.jsに下記を追記

import "sound_controller"

config/importmap.rbに下記を追記

pin "sound_controller", to: "sound_controller.js"

音声ファイルと画像ファイルを用意する

app/assets/audiosディレクトリを作成する

app/assetsのところで右クリックする

新しいフォルダーを選択

audiosと入力

app/assets/audiosディレクトリにmeal.mp3を設置する

app/assets/imagesにchild.jpgを設置する

機能実装・HTML・CSS

app/views/home/index.html.erbを下記の状態にする

<div class="container">
  <h1>testapp</h1>
  <%= image_tag 'child.jpg', alt: 'child画像', class: 'my-image' %>
  <%= link_to '再生', '#', id: 'play-meal', class: 'play-sound' %>
</div>

app/assets/stylesheets/application.cssを下記の状態にする

.container {
  margin-bottom: 30px; /*.containerの下に30pxのマージンを作る*/
  text-align: center; /*中央揃え*/
  }

.my-image {
display: block;/*マージンを適用させるため*/
margin: 30px auto; /*縦のマージンを30px、横のマージンを自動調整*/
width: 50%; /*親要素(.containerの横幅の50%に指定)*/
}

.play-sound {

background-color: #FF85CB;  /* 明るいピンク色 */
color: white;               /* 文字色は白 */
border-radius: 20px;        /* 角を丸くする */
padding: 10px 20px;         /* パディングを調整 */
font-size: 16px;            /* フォントサイズ */
font-family: 'Arial', sans-serif; /* フォントファミリー */
margin-top: 30px;
display: inline-block; /*inlineではmargin-topの調整ができないためinline-blockを指定*/
text-decoration: none; /*はなげ出てるよの下線を消す*/
}

.play-sound:hover {
  transform: scale(1.1);      /* ホバー時に少し大きくする */
}

機能実装・コントローラー

app/javascript/sound_controller.js.erbを作成し下記の状態にする

// AudioController クラスの定義
class AudioController {
  constructor(filePath) {
    this.audio = new Audio(filePath);
  }

  play() {
    this.audio.play();
  }

  stop() {
    this.audio.pause();
    this.audio.currentTime = 0;
  }

  isPlaying() {
    return !this.audio.paused && this.audio.currentTime > 0;
  }

  toggle() {
    if (this.isPlaying()) {
      this.stop();
    } else {
      this.play();
    }
  }
}

// DOMが読み込まれたら実行
document.addEventListener('DOMContentLoaded', function() {
  const audioController = new AudioController('/assets/meal.mp3');

  const playButton = document.getElementById('play-meal');
  if (playButton) {
    playButton.addEventListener('click', function(event) {
      event.preventDefault();
      audioController.toggle();
    });
  }
});

動作確認

再生ボタンを押して音声がなるか確認

git add .

git push origin main

🌏GitHubとの連携から初回デプロイ

GitHubからデプロイするまでの手順をまとめてありますので参考にしてください。

GihHubと連携する

参考記事との違い

以下に上記4点の詳細を載せておきます。

git commit -m "音声再生・停止機能を実装"

set -o errexit

bundle install
bundle exec rails assets:precompile
bundle exec rails assets:clean

RAILS_ENV=production bin/rails assets:precompile

参考資料と違うところ④

今回はデータベースを使用しないため

Environment Variables（環境変数）を設定する

のところで

DATABASE_URLの項目は作成せず画像のように3つの環境変数のみにしてください。