Overview
このガイドでは、Sinatra を Webフレームワークとして使用する Mongoid Webアプリケーションを作成する方法を学ぶことができます。Sinatra は、 Rubyで Web アプリケーションを作成するためのドメイン固有言語（DSL）です。Sinatra アプリケーションはセットアップが簡単で、他のフレームワークよりも高速なリクエスト処理を提供できます。
このチュートリアルのアプリケーションは、次のレイヤーで構成されています。
データベースレイヤー: MongoDB は、データのストレージと検索を提供します。
アプリケーションレイヤー: Sinatra は、 HTTPリクエスト、ルーティング、およびロジックプロセシングを取り扱います。
プレゼンテーションレイヤー: 埋め込みRubyテンプレートは、ウェブ ページ上のレストラン データをレンダリングします。
MongoDB をMongoid と Sinatra で使用する理由
MongoDB をMongoid および Sinatra と統合することで、Mongoid の ODM（Object-Document Mapper、オブジェクト ドキュメント マッパー）を使用して、MongoDB の 柔軟なドキュメントモデルを操作できます。Mongoid は Rails の ActiveRecord ORM の軽量な代替手段を提供しており、MongoDB のスキーマの柔軟性を活用できると同時に、Sinatra の最小限のアプローチを使用して、データのモデル化方法と表示方法を簡単に制御できます。
クイック スタート チュートリアル
このチュートリアルでは、 Rubyと Sinatra を使用して Webアプリケーションをビルドする方法を説明します。アプリケーションはサンプルレストラン データにアクセスし、データをクエリし、その結果をローカルでホストされているサイトに表示します。このチュートリアルには、 MongoDB AtlasでホストされているMongoDBクラスターに接続し、データベースのデータにアクセスして表示する手順も含まれています。
プロジェクトを設定する
このセクションの手順に従って、プロジェクトの依存関係のインストール、Atlas クラスターの作成、およびアプリケーション構造の設定を行います。
MongoDB Atlas クラスターを作成します。
MongoDB Atlas は、 MongoDB配置をホストするフルマネージドクラウドデータベースサービスです。 MongoDBデプロイがない場合は、 MongoDBを使い始める チュートリアルを完了することで、 MongoDBクラスターを無料で作成できます。 MongoDBを使い始めるsample_restaurants チュートリアルでは、このチュートリアルで使用される データベースなどのサンプルデータセットをクラスターにロードする方法も説明します。
MongoDBクラスターに接続するには、接続 URI を使用する必要があります。接続文字列を検索する方法については、MongoDBを使い始めるチュートリアルの接続文字列の追加セクションを参照してください。
重要
接続stringを安全な場所に保存します。
接続文字列でターゲットデータベースを指定します。
Atlas クラスターに接続する場合は、操作するデータベースを接続文字列のデフォルトデータベースとして指定する必要があります。ホスト名の後の接続オプションの前にデータベース名を接続文字列に追加する必要があります。
次の例では、サンプル接続文字列で sample_restaurants ターゲットデータベースを指定しています。
mongodb+srv://user0:pass123@mongo0.example.com/sample_restaurants?retryWrites=true&w=majority
サンプル接続文字列には、mongo0.example.com ホスト名の後、および retryWrites 接続オプションと w 接続オプションの前にデータベースが含まれます。
バックエンドの設定
プロジェクト構造と依存関係を設定したら、このセクションの手順に従ってMongoDBに接続し、データモデルを設定します。
MongoDB接続を構成します。
my-sinatra-appディレクトリに、config サブディレクトリを作成します。次に、このサブディレクトリに mongoid.yml というファイルを作成します。
次のコードをmongoid.ymlファイルに貼り付けます。
development: clients: default: uri: <connection string>
<connection string> プレースホルダーを、前の手順で保存した接続 URI に置き換えます。URI に sample_restaurantsデータベース名が含まれていることを確認します。
データモデルを作成します。
app.rbファイルに次のコードを追加して、Restaurant というモデルを作成します。
class Restaurant include Mongoid::Document field :name, type: String field :cuisine, type: String field :borough, type: String end
Restaurant モデルは、sample_restaurantsデータベース内の restaurantsコレクションを表します。レストラン データを保存するための name、cuisine、borough フィールドを定義します。
カスタム ルートを追加します。
app.rbファイルには、レストラン データを表示するための次のルートを追加します。
get '/' do @restaurants = Restaurant.all erb :index end get '/browse' do @restaurants = Restaurant .where(name: /Moon/i).and(borough: "Queens") erb :browse end
/ ルートにはすべてのレストランが表示されますが、/browse ルートでは、大文字と小文字を区別しない一致を使用して、名前に "Moon" が含まれるクイーンズのレストランのクエリをルートします。
フロントエンドの設定
データレイヤーを設定したら、このセクションの手順に従ってユーザー インターフェースのテンプレートを作成します。
メインのレイアウト テンプレートを作成します。
my-sinatra-appディレクトリに、views というサブディレクトリを作成します。
次に、views サブディレクトリに layout.erb というファイルを作成し、次のコードを貼り付けます。
<!DOCTYPE html> <html> <head> <title>Restaurant Directory</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #a8d5ba; } .header { text-align: center; margin-bottom: 30px; } .nav { text-align: center; margin-bottom: 20px; } .nav a { text-decoration: none; color: #6a9bd2; margin: 0 10px; font-size: 16px; } .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; } .restaurant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .restaurant-card { background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #ddd; } .restaurant-card h3 { margin-top: 0; color: #333; } .cuisine-tag { background: #4a9d5f; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; display: inline-block; } </style> </head> <body> <div class="header"> <h1>Restaurant Directory</h1> </div> <div class="nav"> <a href="/">All Restaurants</a> <a href="/browse">Browse Filtered Restaurants</a> </div> <div class="container"> <%= yield %> </div> </body> </html>
このファイルは、埋め込みRuby （ERB）のテンプレートです。これらのテンプレートには、動的 HTML コンテンツの生成に使用される埋め込みRubyコードを含む HTML が含まれています。
レストラン リスト ビューを作成します。
views サブディレクトリで、index.erb というファイルを作成し、次のコードを貼り付けます。
<h2>All Restaurants</h2> <p>Total restaurants: <%= @restaurants.count %></p> <div class="restaurant-grid"> <% @restaurants.each do |restaurant| %> <div class="restaurant-card"> <h3><%= restaurant.name %></h3> <p><strong>Borough:</strong> <%= restaurant.borough %></p> <span class="cuisine-tag"><%= restaurant.cuisine %></span> </div> <% end %> </div>
このビューファイルには、すべてのレストランがアプリケーションユーザーインターフェイスにグリッド メニューで表示されます。
フィルタリングされたビューを作成します。
views サブディレクトリで、browse.erb というファイルを作成し、次のコードを貼り付けます。
<h2>Browse Restaurants</h2> <p>Restaurants in Queens with "Moon" in the name</p> <h3>Filtered Results</h3> <div class="restaurant-grid"> <% @restaurants.each do |restaurant| %> <div class="restaurant-card"> <h3><%= restaurant.name %></h3> <p><strong>Borough:</strong> <%= restaurant.borough %></p> <span class="cuisine-tag"><%= restaurant.cuisine %></span> </div> <% end %> </div>
このビューファイルには、カスタム browse ルートのレストランが表示されます。これにより、名前に "Moon" が含まれるクイーンズのレストランがフィルタリングされます。
アプリケーションの実行
最後に、このセクションの手順に従って、ブラウザインターフェイスを使用してウェブアプリケーションを実行し、レストランのデータを調べます。
Sinatraアプリケーション を起動します。
プロジェクトディレクトリに移動し、次のコマンドを実行してください。
bundle exec ruby app.rb
このコマンドは、Sinatra のデフォルトポートであるポート 4567 でウェブサーバーを起動します。成功した場合、コマンド出力は次の例のようになります。
[2024-10-01 12:36:49] INFO WEBrick 1.8.2 [2024-10-01 12:36:49] INFO ruby 3.2.5 (2024-07-26) [arm64-darwin23] == Sinatra (v4.0.0) has taken the stage on 4567 for development with backup from WEBrick [2024-10-01 12:36:49] INFO WEBrick::HTTPServer#start: pid=79176 port=4567
Webアプリケーションを開きます。
ウェブ ブラウザで http://localhost:4567 を開きます。最初のランディング ページには、 sample_restaurants.restaurantsコレクション内のすべてのレストランが、データベースに出現する順序で表示されます。
次に、Browse Filtered Restaurants リンクをクリックして、名前に "Moon" が含まれるクイーンズのレストランを表示します。
Sinatra クイック スタート チュートリアルが完了しました。これらの手順を完了すると、 MongoDBの配置に接続し、サンプルレストラン データに対してクエリを実行し、ローカルでホストされているウェブ インターフェースに結果を表示するRubyと Sinatra Webアプリケーションが作成されます。
追加リソース
Ruby、Sinatra、Mongoid、およびMongoDBの詳細については、次のリソースを表示します。