第5回 独自ドメインの設定方法
みなさんこんちには！チームリアルカレッジの岩田史門です！ Bubbleでの開発楽しんでいますか？ 今回は、Bubbleで名言SNS「SHarK!!!」の簡易版を作ってみる（初級者向け）の第5回となります。 書籍名言SNSサービス「SHarK!!!」はこちらになります☟
先日、「 4：レスポンシブデザイン対応」について書かせて頂きました。
今回は、独自ドメインの設定方法について解説します！
なお、スタート時の状況はこちらになります。第4回終了時の状況と大きな差はありませんが、 エディターを公開しておきますので、念の為ご確認ください。
1. 事前確認
今回の内容は、独自ドメインの取得や Bubble 有料版への加入にお金がかかるため、事前にご確認いただいたうえで読み進めてください。 また、有料版にせずこの記事を読み進めていくだけでも、ドメインの取り方や紐づけ方の知識をつけることができるため、ぜひ最後まで読んでみてくださいね！
2. ドメインの取得
それでは独自ドメインの取得方法について説明していきます。 今回は「お名前ドットコム」という独自ドメインを購入できるサイトから取得していきます。 サイトはこちらになります☟
2.1 ドメインの決定・検索
上のリンクからサイトに入ると以下の写真のようなページに飛びます。 ここでドメインの決定と検索を行います。
このページ中央の「取得希望の文字列を入力」と書かれた検索欄に取得したいドメインの文字列を入力しましょう。 次に末尾の文字列を選び変更しましょう。 今回はSHarK!!!のクローンサイトなので「sharkclone1122.com」とします。 以下の写真のような状態になっていれば正解です。
上の写真のようになっていることが確認出来たら、検索欄右側の検索ボタンを押しましょう。 すると下の写真のような画面に移動します。
2.2 ドメイン確認・サーバー選択
ここでは購入する「ドメイン確認」と「サーバー確認」の２つを行います。 まず「ドメイン確認」から説明します。
上の写真のように「ご希望のドメイン」の欄が購入するドメイン、今回は「sharkclone1122」になっていることを確認しましょう。 次に、ドメインの末尾が「.com」の欄に写真のようにチェックが入っていることを確認しましょう。 （※ほかの欄にチェックが入っていると一緒に購入されてしまうため気をつけましょう） これらが確認出来たら画面を下にスクロールさせましょう。
すると下の写真のような画面が出てきます。 こちらは「サーバー選択」の画面です。
自分でブログを立ち上げるときやサイトを立ち上げるときは、レンタルサーバーを借りることが多いので選択しますが、今回は「Bubble」のサーバー上にある sharkclone のアプリに独自ドメインを取得するため、上の写真のように「利用しない」を選択し、欄にチェックを入れましょう。
これで「ドメイン確認」と「サーバー選択」が完了しました。
2.3 料金確認
先ほど確認が済んだので、料金の確認に移りましょう。 下の写真のように、画面右側に「選択した商品」という欄があると思います。 この欄の内容が「全１件」、「sharkclone1122」になっていることを確認し、「料金確認へ進む」のボタンをクリックしましょう。
すると下の写真のようなページに移動します。
ここでもういちど購入するドメインに間違いがないか確認しましょう。 （※ドメインの料金は日にちや時間によって変化するため多少金額が異なる場合があります。） 確認し問題がなければ「次へ」のボタンをクリックしましょう。
2.4 支払い方法確認・購入手続き
前のチャプターで「次へ」ボタンを押すと下の写真のような画面に移動したと思います。
ここでは最後にクレジットカード情報を入力し、支払い方法の確認と購入手続きをします。 入力欄に必要な情報を入力し画面右側の「申し込む」ボタンを押しましょう。
すると読み込みが始まり、申し込み確認画面が表示され手続きが完了します。 それと同時にお名前ドットコムから確認のメールが届きます。このメールには登録情報など重要な内容が書かれているので大切に保管するようにしましょう。
以上でドメインの取得が完了しました！
3. Bubbleへの紐づけ
ここからは取得したドメインを Bubble に紐づけていきます。そのために Bubble のプランを有料プランにする手順などもあるので、有料版を考えている方は是非参考にしてみてください！
3.1 Bubble の有料プランについて
今回独自ドメインを設定するにあたり、Bubble を有料版に変更する必要があるため Bubble の有料版についても軽く触れて、紹介していきます。 下の写真を見てください。Bubble には四つのプランがあり、こちらの写真は Bubble の４つのプランの比較を行っています。
もともとは、無料の「Hobby」というプランで「Custom domain & SSL」という所にチェックがありません。独自ドメインを設定するにはこの項目にチェックが付いている必要があるため、今回は「Personal」プランに変更します。ちなみに他２つの「Professional」と「Production」はチーム開発や企業が使う場合に主に使われるので、個人開発である今回は「Personal」プランで十分といえます。
3.2 Bubble の Personal Plan への変更
それでは早速プランの変更を行っていきます。 まずは Bubble の「settings」タブを開いてください。そしてその中の「App plan」タブをクリックしてください。 すると下の写真のような画面が表示されると思います。
現在「Change to different plan」の項目が「Hobby」になっていると思いますが、ここを「Personal」に変更しましょう。すると下の写真のように「Personal」プランで可能になる事が一覧で表示されます。
画面をさらに下にスクロールすると、下の写真のように「Plan price」（プランの値段）と「Confirm change」というボタンが見えてきます。プランの値段は１か月単位で購入する場合と１年単位で購入するので選択できます。今回は1か月単位で購入してみましょう。「Plan Price」の部分を1か月で選択し、「Confirm Change」のボタンをクリックしましょう。
これで「Personal」プランへの変更が完了しました。
3.3 ドメインの紐づけ
プランの変更も完了したので、最後に Bubble に先ほど取得した独自ドメインを紐づけていきましょう。 Bubble の「settings」タブを開き「Domain/email」タブを開いてください。 すると下の写真のような画面が出てきます。
写真の赤い線で示した「Domain name」の部分に取得したドメインを入力し、「Change app domain」ボタンをクリックしましょう。
説明が表示され、DNS の設定指示が表示されます。
3.4 DNS の設定（2021/5/21 追記）
最後に DNS で上で表示されている設定を行えば OK です。 A レコードを 4つほど設定するように指示が出ていると思いますので、追加しましょう。
各 DNS によって設定方法は違うと思いますが、弊社で使っている お名前.com と Google Domains の画面を載せておきます。ご参考まで。
お名前.com
Google Domains
3.5 Bubble 側の IPアドレスの変更（2023/8/30 追記）
DNS の設定ですが、Bubble (CloudFlare)側の IP が変わったようです。
（旧） 104.19.240.93、104.19.241.93
（新） 104.16.36.105、104.16.42.105、104.19.240.93、104.19.241.93
※104.16.36.105、104.16.42.105 が追加になりました。
今後、独自ドメインを設定される方はご注意ください。
まとめ
これで独自ドメインの設定が完了しました！
「Preview」ボタンを押してドメインが反映されていたら成功です。
ドメインがインターネットに適用されるまでに少し時間がかかるので、反映されていなければ時間を空けて確認してみてください。 （※長くても24時間ほどで反映されます。）
おつかれさまでした！
次回
次回でこのシリーズは最終回となります。 最後は Bubble の SEO対策 についての解説となる予定です。
