進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

DreamHouse アプリケーションのインストールと Heroku ボタンの作成

学習の目的

このプロジェクトでは、次のことを行います。

  • GitHub リポジトリの DreamHouse アプリケーションを使用して新しい Heroku アプリケーションを作成する。
  • Salesforce 組織のオブジェクトを Heroku アプリケーションに対応付けるために Heroku Connect を設定する。
  • DreamHouse アプリケーションをリリースする Heroku ボタンを作成する。
  • DreamHouse アプリケーションを使用して継続的インテグレーションをサポートするための Heroku パイプラインを作成する。
  • Heroku Flow を使用して新しい機能を作成し、レビューアプリケーションを使ってテストして、パイプラインに転送する。

では始めましょう。

はじめに

DreamHouse Realty では、デスクトップユーザとモバイルユーザ向けの新しい UI の作成を検討しています。さらに、Salesforce の不動産物件データにもこの新しい Web アプリケーションを使用したいと考えています。その一方で、開発から完成までのプロセスに時間やコストがかかり、顧客に影響が及ぶのではないかと懸念しています。では、Heroku を利用して同社を支援する方法を見ていきましょう。

Trailhead Playground の起動とパッケージのインストール

まずは Trailhead Playground を開いてパッケージをインストールするところから始めましょう。最初に、このページの一番下までスクロールして、[Launch (起動)] をクリックします。組織に [Install a Package (パッケージのインストール)] というタブが表示されている場合は、以下の手順に従います。 

表示されていない場合は、アプリケーションランチャー をクリックしてアプリケーションランチャーを起動してから、[Playground Starter] をクリックして手順に従います。Playground Starter が表示されない場合は、こちらのパッケージのインストールリンクをクリックして、Trailhead ヘルプの「Trailhead の Challenge を完了するためのパッケージやアプリケーションのインストール」を参照してください。

  1. [Install a Package (パッケージのインストール)] タブをクリックします。
  2. 項目に「04tB00000009UeX」を貼り付けます。
  3. [Install (インストール)] をクリックします。
  4. [Install for All Users (すべてのユーザのインストール)] を選択して [Install (インストール)] をクリックします。
  5. サードパーティアクセスの承認を求めるポップアップで、[Yes, grant access to these third-party websites (はい、これらのサードパーティ Web サイトにアクセスを許可します)] を選択して [Continue (続行)] をクリックします。

パッケージのインストールが終了すると、確認ページが表示され、Playground に関連付けられているアドレスにメールが届きます。

  1. インストールが完了したら、[Done (完了)] をクリックします。
  2. アプリケーションランチャー (アプリケーションランチャー) から、DreamHouse アプリケーションを見つけて開きます。
  3. [Data Import (データインポート)] をクリックして、[Initialize Sample Data (サンプルデータの初期化)] をクリックします。画面サイズによっては、[Data Import (データインポート)] タブがタブメニューの [More (その他)] の下にある場合があります。
  4. [Properties (物件)] タブをクリックして、インポートされた物件を参照します。

GitHub の DreamHouse アプリケーションのフォーク (複製) を作成する

  1. GitHub の既存のアカウントにサインインする場合は、https://github.com/login にアクセスします。ユーザ名とパスワードを入力して、[Sign In (サインイン)] をクリックします。
  2. GitHub の新規アカウントにサインアップする場合は、https://github.com/join にアクセスします。ユーザ名を作成して、メールを入力し、パスワードを入力します。[Create an account (アカウントを作成)] をクリックします。画面の指示に従います。
  3. GitHub の DreamHouse アプリケーションリポジトリ (https://bit.ly/2NHDtW2) に移動します。
  4. 右上の [Fork (フォーク)] をクリックします。フォークされたリポジトリ intro-to-heroku のあるアカウントにリダイレクトされます。

フォーク操作により、DreamHouse アプリケーションのベースコードがコピーされ、自身のレポジトリが作成されます。これで作業を開始できます。

app.json ファイルを編集する

Heroku ボタンを作成するためには、ルートディレクトリに有効な app.json ファイルが必要です。app.json ファイルは Web アプリケーションを説明するものです。Heroku でアプリケーションを実行するために必要な環境変数、アドオン、その他の情報が宣言されます。このファイルのスキーマに必須項目はありませんが、名前、説明、ロゴを設定することを推奨します。こうした情報があれば、ユーザがコンテキストを把握したり、アプリケーションを特定したりしやすくなります。

  1. Intro-to-heroku レポジトリで、app.json をクリックし、鉛筆アイコン をクリックして編集します。
    GitHub の app.json ファイルの場所が強調表示されています。
  2. 7 行目の引用符の間に、GitHub の各自の DreamHouse リポジトリのユーザ名 (https://github.com/YOUR_USERNAME/intro-to-heroku) を挿入します。
  3. ページの一番下までスクロールします。[Update app.json (app.json を更新)] テキストボックスに、「Added GitHub Repo URL」(GitHub リポジトリ URL を追加) と入力します。
  4. デフォルトの選択状態のままで [Commit changes (変更をコミット)] をクリックします。

app.json ファイルをテストする

  1. ボタンを使ってアプリケーションがリリースされるかどうかを調べるために、app.json ファイルをテストする必要があります。次の URL をコピーします: https://heroku.com/deploy?template=https://github.com/YOUR_USERNAME/intro-to-heroku
  2. この URL を別のブラウザタブに貼り付け、プレースホルダテキスト (YOUR USERNAME) を GitHub のユーザ名に置き換えます。<enter> キーを押します。
  3. Heroku のサインアップ画面が表示されます。まだアカウントがない場合は、新しいアカウントを作成し、画面の指示に従います。Heroku アカウントがある場合は、右上の [Log In (ログイン)] ボタンをクリックします。
  4. ログインすると、[Create New App (新規アプリケーションを作成)] ページが読み込まれます。[Create New App (新規アプリケーションを作成)] ページが読み込まれている場合は、app.json ファイルを正しく設定したことになります。リリースボタンのリンクを使用すると、Heroku ボタンをクリックするだけで、DreamHouse アプリケーションを作成してリリースできます。
    空白の [Heroku Create New App Form (Heroku 新規アプリケーション作成フォーム)] のスクリーンショット
  5. このブラウザタブを閉じます。

Heroku ボタンは、Heroku の特定のリリース場所へのリンクです。Heroku ボタンをクリックすると、コードをリリースする意図があることと、そのコードの場所をプラットフォームが認識します。そして、このボタンをクリックした時点でリリースが実行されます。各コードレポジトリには、Heroku の特定のアドオンや、設定メタデータを定義する必要があるかどうかなど、Heroku の追加情報が含まれます。

Heroku ボタンを README に追加する

正しい URL を設定していることを確認したら、Heroku ボタンを README に追加して、変更をコミットします。

  1. GitHub で、[Code (コード)] タブをクリックし、README.md ファイルを選択します。鉛筆アイコン をクリックして、このファイルを編集します。
    GitHub の README ファイルの場所が強調表示されています。
  2. README.md の末尾に、コメントアウトされたアンカー (<a>) タグがあります。最初と最後のコメントを削除します。次のようなコードになります。
    <a href="https://heroku.com/deploy"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy"></a>
  3. このコードによって、Heroku ボタンが作成され、GitHub README の末尾に追加されます。
  4. ページの一番下までスクロールします。[Update README.md (README.md を更新)] テキストボックスに、「Added the Heroku Deployment Button」(Heroku リリースを追加) と入力します。
  5. デフォルトの選択状態のままで [Commit changes (変更をコミット)] をクリックします。

GitHub の README からリリースリンクをテストする

  1. GitHub の DreamHouse レポジトリにある [Code (コード)] タブをクリックして、ページの一番下までスクロールします。
  2. DreamHouse README の新しい [Deploy to Heroku (Heroku にリリース)] ボタンをクリックします。GitHub の DreamHouse コードに基づいて新しいアプリケーションを作成するために、Heroku Web サイトにリダイレクトされます。intro-to-heroku README.md ファイルのスクリーンショット。[Deploy to Heroku (Heroku にリリース)] ボタンが表示されています。
  3. アプリケーション名を空白のままにすると、Heroku でアプリケーションの名前が指定されます。アプリケーション名に、「dhprod-UNIQUE_ID.」と入力します。この UNIQUE_ID を一意の ID に置き換えます。
  4. [Deploy App (アプリケーションをリリース)] をクリックします。Heroku ではアプリケーションのリリースに 3 分ほど時間がかかります。
  5. アプリケーションのビルドが完了したら、[View (表示)] をクリックして、アプリケーションが読み込まれていることを確認します。
    Heroku のビルドの完成ビューが表示されています。
    作成したこのアプリケーションは後ほど使用します。 
  6. このタブを閉じます。