• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ by Proglus(プログラス)

プログラミング学習初心者のための情報メディア

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for ツールの使い方

ツールの使い方

VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法

2020-12-10 By プログラミング入門ナビ編集部

この記事では、VirtualBoxのネットワーク環境をNATとホストオンリーアダプターを用いて構築する方法を紹介します。

よくあるVirtualBoxネットワーク設定の例として、ブリッジアダプターを使ったものがありますが、外部ネットワーク、仮想マシン、ホストOSの全ての通信が可能になってしまいセキュリティ的によろしくありません。

そこで、NATとホストオンリーアダプターを設定することで、

  • 仮想マシンから外部ネットワークに接続できる
  • 外部ネットワークからは仮想マシンに接続できない
  • ホストOSからゲストOSへの接続ができる

というセキュリティ的に安全なネットワーク環境が構築することができます。

では、構築手順を説明していきます。

実行確認環境

NATとホストオンリーアダプターを用いたネットワーク設定に関して、macOS、Windowsともに動作確認を行っております。

仮想マシンOS(今回はCentOS7を使用)は既にインストールされている前提としています。

実行環境は以下となっております。

  • ホストOS: macOS(Catalina 10.15.4)、Windows 10(バージョン 1909)

  • VirtualBox:6.1.4

  • 仮想マシンOS: CentOS7.8.2003

※VirtualBoxのバージョン、OS毎にUIが異なる可能性があります。

VirtualBoxの設定

VirtualBoxの設定を行います。

アダプタの作成

まずは、ホストオンリーアダプター用のアダプターを作成します。

VirtualBoxを起動し、ツールの横にある横線3つのボタンを選択してください。

プルダウンメニューが表示されるので、以下のように「ネットワーク」を選択します。

以下のような画面が表示されるので、「作成」ボタンをクリックしてアダプターを追加します。

追加したアダプターを選択(ダブルクリック)して、IPv4アドレスを設定します。

デフォルトで以下のように「アダプターを手動で設定」が選択されており、自動的にIPv4アドレスが設定されているはずです。選択されていなければ「アダプターを手動で設定」を選択しましょう。

設定されているIPv4は後ほど、CentOSの設定で使用するのでメモしておきましょう。

※アドレスはそれぞれの環境で違います。

これでVirtualBoxの設定は完了です。

仮想マシンの設定

次に仮想マシンの設定をします。

NATの設定

まず、設定の対象となる仮想マシンを選択し、「設定」ボタンをクリックします。

すると以下のような設定画面が出てくるので、「ネットワーク」をクリックします。

WindowsだとmacOSのUIと表示が異なることがありますが、同じように「ネットワーク」をクリックしてください。

以下のように「アダプター1」がデフォルトで割り当てが「NAT」になっていればOKです。

「NAT」になっていなければ、プルダウンから選択して変更してください。

ホストオンリーアダプターの設定

次にホストオンリーアダプターの設定を行います。

「アダプター2」を選択し、「ネットワークアダプターを有効化」にチェックを入れます。

※アダプター2が非活性で選択できない場合は、起動している仮想マシンを停止してください。仮想マシンのウィンドウの×ボタンを押して、「power off the machine」を選択後「ok」ボタンを押すことで停止できます。

「ネットワークアダプターを有効化」にチェックを入れた後、設定が変更できるようになるので割り当てをクリックして「ホストオンリーアダプター」を選択してください。

「名前」のアダプターは先ほど作成したアダプター名にしてください。

設定できたら「ok」ボタンを押して、ホストオンリーアダプターの設定は完了です。

CentOSの設定

最後にCentOSの設定を行います。

ネットワークマネージャー起動

まずは、設定したい仮想マシンを選択して起動してください。対象仮想マシンをダブルクリックすると起動できます。

その後、設定したユーザIDとパスワードを入力してログインします。

次にネットワークマネージャーを開くために以下のコマンドを入力してください。

nmtui

すると以下のようなネットワークマネージャが開くので、「Edit a connection」を選択してEnterキーを押します。

enp0s3の設定

まずはenp0s3の設定を行います。

以下のような画面が表示されるので、「enp0s3」を選択してEnterキーを押します。

※選択は十字キーで行います。

IPv6の「Automatic」を選択してEnterキーを押します。その後、プルダウンが表示されるので、「Ignore」を選択してください。

また、「Automatically connect」にチェックを入れてください。

※チェックはSpaceキーで入れることができます。

設定が完了したら「OK」を選択肢、Enterキーで完了させてください。

enp0s8の設定

「OK」選択後にEnterキーを押すと先ほどの選択画面に戻ります。

次は「■ ■ ■ ■ 1」という文字列を選択してEnterキーを押してください。

※「■ ■ ■ ■ 1」という文字列は文字化けしていなければ、「enp0s8」となっているようです。

まずは、名前を変更しましょう。

「Profile name」を選択後、「■ ■ ■ ■ 1」を「enp0s8」に変更しましょう。

次にIPv4の「Automatic」を「Manual」に変更します。

「Manual」に変更後、「Show」を選択してEnterキーを押します。

以下のように詳細が表示されます。

「Addresses」を選択し、Enterを押してIPアドレスを入力しましょう。

入力するIPアドレスは、アダプターの作成でメモしたIPアドレスを使用します。入力するIPアドレスはホストOSのIPv4を下限、ネットマスクを上限の範囲として適当に決めます。

今回はメモしたIPアドレスを以下のように変更して入力します。

メモしたIPアドレス:192.168.xxx.1

↓

入力するIPアドレス:192.168.xxx.2

※xxxは個人の環境によって変わります。

IPアドレスの入力が終わったら、enp0s3の設定と同様にIPv6を「Ignore」に変更、「Automatically connect」にチェックを入れます。

設定後、「OK」を選択しEnterを押します。

選択画面に戻ったら今度は「Back」を選択し、Enterキーを押します。

ネットワークマネージャー終了

「Quit」を選択、Enterキーを押してネットワークマネージャーを終了します。

設定の反映

設定を反映させるために以下のコマンドを入力してください。

systemctl restart NetworkManager 
systemctl restart network

以下のようにエラーが表示されなければOKです。

動作確認

ネットワーク設定が上手くいっているかどうか確認します。

外部ネットワークへの接続

まず、仮想マシンから外部のネットワークに接続できるかどうか確認します。

pingコマンドを使ってGoogleに接続できるか確認してみましょう。

ping google.com

以下のように応答が返ってきていれば外部ネットワークに接続できています。

ホストOSからゲストOSへの接続ができる

ホストOSからssh接続で確認してみましょう。

左側がホストOSのターミナル、右側が仮想マシンのCentOSのターミナルです。

macOSの方はターミナル、Windowsの方はコマンドプロンプト、PowerShellなどで実行してみてください。

以下のsshコマンドでホストOSから仮想マシンに接続します。

ssh root@192.168.56.2

※root(ユーザID)、192.168.56.2(IPアドレス)などは個人の環境に合わせて変更してください。IPアドレスは仮想マシン上で画像のように「ip addr」と入力するとenp0s8のinetから確認することができます。

左の画像のように仮想マシンにログインできたら接続できています。

これでNATとホストオンリーアダプターを使ったネットワーク環境が構築できています。

お疲れ様でした!

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: ツールの使い方

APIって何?使い方やメリットを初心者にもわかりやすく解説!

2020-11-30 By プログラミング入門ナビ編集部

アプリ設計

はじめに

アプリ設計

API(読み:エーピーアイ)という言葉を聞いたことがあるでしょうか。

簡単にいえば、ソフトウェアの機能の一部を外部のソフトウェアから使用できるようにする仕組みのことです。

これだけ聞いてもピンと来ない方もいらっしゃるでしょう。

この記事では、APIとは何なのか?どう役立つものなのか?を初心者にもわかりやすく説明します。

また、有名なAPIについても紹介しますので、実際に使ってみる際の参考になれば幸いです。

まずは体験:APIを使ってみよう

APIについて理解するには、まずは実際にAPIを使ってみるのが早いです。

MacOSを使っている方はターミナル、Windowsを使っている方はコマンドプロンプトを開いて下記のように打ち込んでみてください。

$ curl "http://zipcloud.ibsnet.co.jp/api/search?zipcode=1000014"

ここで登場したcurlは、サーバとのデータのやりとりをするためのコマンドで、APIを使う時に使用されることが多いです。

今回の例ではWebサーバ(http://zipcloud.ibsnet.co.jp)とのデータやりとりをするために使用していると考えてください。

このコマンドを実行すると下記のような実行結果が得られます。

{
	"message": null,
	"results": [
		{
			"address1": "東京都",
			"address2": "千代田区",
			"address3": "永田町",
			"kana1": "トウキョウト",
			"kana2": "チヨダク",
			"kana3": "ナガタチョウ",
			"prefcode": "13",
			"zipcode": "1000014"
		}
	],
	"status": 200
}

何やら住所が出てきましたね。

実は先ほどのcurlコマンドを実行した際にアクセスしたWebサーバはzipcloudという郵便番号データ配信サービスです。

zipcloudのサービスURL(http://zipcloud.ibsnet.co.jp)に続く部分「/api/search?zipcode=1000014」では、「郵便番号100-0014の住所データが欲しい」とリクエストしています。

その結果「東京都千代田区永田町」の住所が返されたというわけですね。

外部からのリクエストを受けてzipcloudが保有している住所データベースを検索し、該当住所を返すというこの機能がまさにAPIなのです。

APIとは?

APIのイメージ

改めてAPIとは何なのか説明していきます。

API(Application Programming Interface)は、広い意味ではある機能をソフトウェア同士で共有するための仕組みです。

よく界隈で耳にする「APIを公開する」や「APIを叩く」といった文脈では、その中でも特に「Web API」のことを指します。

Web APIとは、APIの中でもWebサービスから提供されているもののことです。

冒頭の例でもzipcloudというサービスのWeb APIを使って住所情報を取得しましたね。先ほどはコマンドで手動で取得しましたが、通常は自分のWebサービスで二次利用するために活用します。

例えば自分のWebサービスでユーザーに住所入力をしてもらう時、郵便番号だけを入れたら住所を自動で補完入力してくれるような機能は、このWeb APIを使えばできますね。

このように、とあるソフトウェア(自分のWebサービス)から別のソフトウェア(今回の例ではzipcloud)の機能を利用するための仕組みがAPIです。

APIのメリット

メリットを説明する女性

APIを使うメリットについてみていきましょう。以下は主にWeb APIのことについて説明していきます。

提供する側

まず、APIを提供する側のメリットについてです。大抵のAPIは無料で提供されていることが多く、蓄えられたデータへのアクセスも許可するため、一見メリットがないように見えるかもしれません。

しかし、便利なAPIを公開しそれを使うWebサービスが増えれば増えるほどユーザーの目に触れる機会も増え、ついてはそれが自社サービスへの導線を拡大し、シェアを獲得することにつながります。

また、多くのWebサービスに使われるほど自社開発機能との組み合わせで新しい使い方が発見されたり、それがビジネス提携のきっかけになるなど、ビジネスチャンスを広げる機会としても有効です。

開発した機能を自社だけで独占するのではなく、多くの人に向けて公開し、さらなる便利な使い方を模索していくという考え方はまさにオープンイノベーションを体現しているといえます。

使用する側

次にAPIを使用する側のメリットですが、こちらは想像に難くないでしょう。

他社ですでに開発された便利な機能や、蓄えられたデータを二次利用できるためより新しいサービスを効率よく開発することができます。

ユーザー側の視点からも便利な場合が多いです。例えば別のサイトでユーザーが登録したアカウント情報をAPIによりそのまま活用して自社サイトでのログインに使用してもらう場合、ユーザーは面倒な会員登録をせずに済みます。

また、アカウント情報は重要な個人情報です。自社のセキュリティレベルで管理するよりもより大きなサイトで信頼性の高いシステムを活用して管理した方が、より高いセキュリティレベルを保つことができます。

有名なAPI

より具体的に理解するため、様々なサイトで多く活用されている著名なAPIについて見ていきましょう。

Google Map

よく、レストランや美容院を探すWebサイト等で所在地を見ようとするとGoogle Mapが表示されることはありませんか?

これは、そのサイトでGoogle Map APIを使用しているためです。

このように、GoogleはWebサイトでGoogle Mapの地図やストリートビューを表示できるAPIを公開しています。

Amazon Pay

ネットでお買い物をするときいざ支払いの場面になると、通常はそのサイトで初めて購入する場合はアカウント作成から始まります。その中で支払い方法や配送先住所を登録しますよね。

しかし、サイトによってはここでアカウントを作成する以外にも「Amazon Payで支払い」のオプションが提示されることがあります。

これを選択すると、ユーザーがAmazonで登録している配送先や支払い方法をそのまま使用できるため、面倒なアカウント作成をせずに済みます。

このように、ユーザーの利便性を重視してAmazonが提供するAmazon Pay APIを活用しているサイトも多いです。

Facebook

Facebookはユーザーのログイン情報を提供するAPIを公開しています。

例えば、とあるWebサイトを利用するにはユーザー登録が必要だったとしましょう。

少し気になるコンテンツがあってそれを見たいだけだったのに、登録が面倒だからといって離脱してしまうユーザーは多いです。

そんな時、FacebookログインAPIを使えば、そのサイトでのユーザー登録の代わりにすでに保有しているFacebookアカウントでログインしてもらうことができます。

まとめ

Webプログラミングする女性

APIについて、その用途やメリットを紹介しました。

自分のWebサービスならではの部分はもちろん自力での開発にこだわるべきですが、公開されているAPIで活用できそうなものはどんどん取り入れて効率よく開発しましょう。

また、自分でAPIを作って公開するのもおすすめです。実際に作ってみることでAPIに関する理解を深められるのはもちろん、いろんな人が使ってくれることで新しい使い道が見つかったり、ユーザーを自分のWebサービスへ誘導できることがあります。

まずはこの記事で取り上げたAPIを使って理解を深めてみると良いでしょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: API

Herokuとは?初心者にもわかりやすく解説!

2020-11-30 By プログラミング入門ナビ編集部

パソコンを持った男性

はじめに

パソコンを持った男性

開発したWebサービスを公開してみたいけれど、サーバーを準備したり、環境構築をしたりするのは手間がかかるし面倒だな…と思ったことはありませんか?

そんな時は話題のHerokuを使ってみましょう。

この記事では簡単にWebアプリを公開できるHerokuについて紹介します。

Herokuは個人使用ならば無料で使用できるので、この記事で説明する使用方法を参考にぜひ使ってみてください。

Herokuとは?

Herokuのトップページ

上記はHeroku(読み方:ヘロク)のトップページです。一体何ができるものなのでしょうか?

PaaSの一種

HerokuはPaaS(Platform as a Service)の一種で、Webアプリケーションをホスティングするためのクラウドサービスです。

ここで、AWS(Amazon Cloud Service)が提供するEC2等はIaaS(Infrastructure as a Service)と呼ばれているけど、どう違うの?と思われたかもしれません。

IaaSではネットワーク・ハードウェア(マシン本体)・OSまでをセットにして提供するのに対し、PaaSではそれらに加えてミドルウェアまでを提供します。

ミドルウェアとは簡単にいうとアプリケーションを動かすために必要なソフトウェアのことで、Web開発ではサーバーソフトウェアやデータベースソフトウェアのことと考えてください。

Herokuには必要なミドルウェアがあらかじめインストールされているので、アプリケーションを送り込む(デプロイ)するだけで簡単にWebサービスが公開できるというわけです。

対応言語や選べる構成が多数

2007年にアメリカでHeroku社が創業した時はRuby on Railsのアプリケーションに特化したホスティングサービスでしたが、現在ではJava、Node.js、Python、PHP等といった様々なプログラミング言語をサポートしています。

また、下記のようにホスティングしたいWebアプリケーションの規模や目的に応じて様々な構成が用意されているのも特長です。

Herokuの構成

このように、言語や構成を目的に合わせて選べるため汎用性の高いPaaSとしてHerokuは近年人気を集めています。

Herokuのおすすめポイント

ここからはHerokuを使うメリットについて説明します。

アプリ開発に集中できる

これはHerokuに限ったことではありませんが、まず何といっても面倒なサーバーの立ち上げや環境構築が必要ないため、Webサービスを提供するにあたって肝であるアプリ開発に集中できることがメリットです。

立ち上げの時間やコストを低減できるということももちろんメリットですが、運用についても同じことがいえます。

サーバーやミドルウェアを自分で全て準備すると、古くなってきたときや重大なセキュリティ問題が発生するたびに対応が必要ですが、Herokuを使っていれば常に最新のアップデートを行ってくれるため、安心して開発に集中することができるのです。

スケールアウト(処理能力の拡張)が容易

Webサービスの公開直後はそこまでアクセス数も多くないため、小さな構成でローンチすることも多いでしょう。

しかし、軌道に乗ってくるとユーザーも増えアクセス数が膨大になっていきます。

そんな場合に小さな構成のままだとサイトがダウンしてしまうこともあり得るため、通常はユーザー数の増加に伴いサーバーを増やす「スケールアウト」という作業が必要です。

Herokuではこのスケールアウトが簡単な操作でできる仕組みになっています。

便利なアドオン機能

Webアプリの運用では、デプロイをシンプル化したり、毎日決まった時間に特定のタスクを実行したりといった作業が必要になります。

また、サイトへ訪れるユーザー向けにアカウント登録をしてもらいサービスを提供するならば、メール配信をしたり、モノやサービスを提供するならば決済を行うための仕組み等が必要です。

こういった機能を自分で開発するのもいいのですが、Herokuにはこれらの機能を実現する150種類以上のアドオンがあり、後付けで追加して利用することができます。

Webサイトに必要とされる汎用的な機能を楽に追加できるのはとても便利ですね。

Herokuの使用方法

Herokuを使うにはどうすれば良いのでしょうか。

公式サイトで無料の新規登録をすればすぐに使い始めることができます。

登録後の詳しい使い方については、下記講座でアプリ開発後の手順として紹介していますので、気になった方はぜひ受講してみてください。

Ruby on Rails 入門(Proglus)

まとめ

パソコンの前でいいねポーズ

近年注目を集めるPaaSであるHerokuの特長やメリットについて紹介しました。

環境構築や運用に時間を取られていては肝心のアプリ開発に集中できないため、このように便利なサービスをどんどん活用してステップアップしていきましょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: Heroku, PaaS

VSCodeのプラグインBracket Pair Colorizerを導入して括弧を見やすく!HTMLに適用する方法も解説!

2020-11-05 By プログラミング入門ナビ編集部

微笑むエンジニア

はじめに

微笑むエンジニア
Image of unshaven smiling programmer man showing thumb up while working with computers in office

プログラミングをしていると、とにかく括弧がたくさん出てきませんか?

入れ子になっていたりすると、括弧がさらに増えて何が何だかわからなくなる…

誰でも一度は経験したことがあるのではないでしょうか。

この記事では、そんな悩みを解決するためのおすすめの方法を解説します。

括弧が見やすくなるとバグも格段に減らせるので、打ち間違いが多発してなかなか効率が上がらないという方にもおすすめです。

Visual Studio Codeとは

今回ご紹介するのはVisual Studio Codeというエディタ向けの方法です(VSCodeと略称でも記載されます)。

このエディタは本サイトでもイチオシしていて、ほぼ全てのプログラミング言語に対応し、使い勝手も良いため近年人気が急上昇しています。

使ったことの無い方もこの機会にぜひ使用してみてください。下記から入手できます。

Download Visual Studio Code 

Bracket Pair Colorizerとは

VSCodeで使用できる便利なプラグイン(後付け便利機能)がBracket Pair Colorizerです。

(プラグインはExtensionとも呼ばれます。)

これを使うとソースコードが下記のようになります。

括弧の始まりと終わりを同じ色にして、またその括弧に挟まれた部分を色付きの棒でつないでくれるのでど、こからどこまでが一括りなのかとても見やすくなりますね。

プラグインの使用イメージ

詳しい説明を読みたい方は下記の公式ページをご覧ください。

Bracket Pair Colorizer(Microsoft Visual Studio Market Place)

インストール方法

VSCodeを開いたら画面左側下のアイコン(ブロックのようなマーク)をクリックして検索画面を開き「bracket」で検索してください(下図参照)。

おそらく一番上に「Bracket Pair Colorizer」が出てくるので右下の「Install」ボタンをクリックします。

検索画面

ほんの数秒でインストールは完了です。試しにJavaScript等のソースコードを見てみてください。

先ほどの画面例のように括弧が色付けされていれば成功です。

HTMLへの適用方法

初期設定では色付けされる括弧は「()」「[]」「{}」の3種類だけなので、JavaScriptやRubyなどは見やすくなりますが、HTMLには変化がありません。

せっかくですので、HTMLのタグも見やすくしてみましょう。

適用前

例えばこんなHTMLのソースコードがあったとします。

プラグイン適用前

VSCodeのデフォルト機能により、正しくインデントができていれば縦棒で対応する開始タグ・終了タグが繋がれているためある程度は見やすいですね。

しかし括弧(<>)が全て同じ色なので、書いている途中にはわかりづらく、間違えてインデントしてしまうことがありそうです。

設定方法

Bracket Pair Colorizerの設定からHTMLにも対応できるようにカスタマイズできます。

MacOSの場合

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

上に出てくる検索窓で「bracketpair」と検索するといくつかの候補が出てくるので、下図のように「Bracket Pair Colorizer: Consecutive Pair Colors」の項目を探して下線が引かれている「Edit in settings.json」をクリックしてください。

設定検索画面

「settings.json」はプラグインの設定項目が記載されたファイルです。これに手を加えることで細かいカスタマイズができます。

下図赤枠の部分を追記しましょう。

settings.jsonのイメージ

コピー&ペースト用に下記コードも書いておきます。

["<", "</"],
["<", "/>"],

Command+Sキーでファイルを保存してください。保存できたらファイルを閉じても構いません。

Windowsの場合

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

以降は上記「MacOSの場合」と同様です。

最後は、Ctrl+Sキーでファイルを保存してください。

適用後

早速、先ほどのHTMLファイルを見てみましょう。

タグの始まりと終わりが同色で表示され、別のタグだと黄色・ピンク・水色で色が使い分けられているのでかなり見やすくなりましたね。

また、カーソルを当てたところ(下図25行目〜32行目、section要素の部分)には開始タグから終了タグに挟まれた中身の部分が縦棒で繋がれているので、範囲がとても見やすいです。

プラグイン適用後

まとめ

女性の横顔
Photo of smiling cute woman using laptop and studying with exercise book while sitting in cozy cafe

VSCodeで括弧の対応が見やすくなるBracket Pair Colorizerについて、導入方法とHTMLへの対応方法を解説しました。

コードが見やすくなると些細なミスが減りますし、気分も上がりますよね。

簡単に導入できるので、ぜひやってみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: Bracket Pair Colorizer, HTML, vscode, プラグイン

AWS Cloud9のプレビューが上手く表示されない時の対処法

2020-10-22 By プログラミング入門ナビ編集部

困っている男性

この記事では、AWS Cloud9のプレビューが上手く表示されない時の対処法について説明します。

この記事は、オンライン講座「Ruby on Rails 5入門 -Rubyプログラミングの基礎から学べる-」「ウェブ開発入門完全攻略コース – プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

AWS Cloud9とは

・クラウドコンピューティングサービスのAWSで利用できるサービスの一つです。
・クラウド上のサーバー資源を利用して、ブラウザ上の統合開発環境(IDE)でWebアプリケーションを開発することができます。
・Cloud9を起動すると、AWSのEC2インスタンスに接続され、開発を進めることができます。

AWS Cloud9のプレビュー機能について

AWS Cloud9では、作成したアプリケーションをブラウザ上でプレビューすることができます。

ここではRuby on Railsで開発を行う場合を例に説明します。

以下はプロジェクトディレクトリ内でrails sコマンドを実行した時の様子です。

まず画面上部のナビゲーションから「Preview」ボタンをクリックし、さらに「Preview Running Application」をクリックします。

新しいペインが右側に現れるので、その右上にある「Browser」というボタンのすぐ右にあるマークをクリックします。

すると、以下のようにブラウザの別タブでプレビューが表示されます。

上記のように表示されれば、正しくプレビューが出来ている状況です。

AWS Cloud9のプレビューが上手く表示されない場合

場合によっては、「Oops」という表示が出現し、うまくアプリケーションのプレビューが出来ない場合があります。

ここでは、対処法についてまとめます。

「No application seems to be running here!」と表示される場合

これは、何らかの理由でアプリケーションが終了している時に発生します。

サーバーの起動コマンドを再度実行し、サーバーが起動状態にあることを確認してください。

「VFS connection does not exist」と表示される場合

これは、アプリケーションのサーバが起動していても、何らかの理由でプレビュー画面との接続が確立できていない場合に発生します。

以下の点について確認してください。

Webサーバーの再起動

Ctrlキー+Cキーでサーバーを立ち上げているコマンドを強制終了し、再度実行してみてください。

使用ブラウザの確認

AWS Cloud9は複数のブラウザでの動作をサポートしていますが、SafariやFirefoxを用いると正常に動作しないことがユーザーによって報告されています。

予期せぬエラーの原因となるので、もし他のブラウザをお使いの方は、Google Chromeに切り替えて開発を進めてください。

EC2インスタンスの再起動

以下の手順でEC2インスタンスの再起動を試してみてください。

まずAWSでEC2のコンソールに移動します。

Cloud9を起動している場合、「running」という状態のインスタンスがあるはずです。

左のボタンから該当インスタンスを選択し、「アクション」ボタンをクリックします。

「インスタンスの状態」から「再起動」に進んでクリックし、インスタンスの再起動を行います。

OSのバージョン

OSのバージョンが古いとCloud9と接続できない場合があります。

OSのアップデートを行って、症状が改善するかご確認ください。

Cookie設定

Cookieが無効になっている場合に、Oopsと表示されてしまう場合があります。

もし無効なら、ブラウザのCookie設定を有効にしてみてください。

広告ブロッカーやセキュリティソフト使用の有無

広告ブロッカーやセキュリティソフトを使用している場合は、Cloud9との接続を阻害してしまう場合があります。これらを一度無効にして、再度Cloud9インスタンスの作成〜Rails の起動まで行ってみてください。

症状が改善しない場合…

もし上記の点を確認して症状が改善しない場合は、何らかのソフトウェアやOSの設定がプレビューの表示を妨げている可能性があります。

お手数ですが、OSのセーフモードでの起動や新しいログインユーザーでのログイン、または別のPCで再度AWSへログインを行ってみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: AWS Cloud9, Ruby on Rails

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Interim pages omitted …
  • Go to page 18
  • Go to Next Page »

Primary Sidebar

Proglus(プログラス)

Twitter

Follow @programmingnavi Tweets by programmingnavi

最近の投稿

  • 【05/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • AWSのパブリックIPv4アドレス有料化について 2024/2より
  • 【CSS】Google Fontsの利用方法について解説します!新UIに対応2023年11月更新
  • 【SQL】XAMPPのMySQLがXAMPPがポートの競合で起動できない問題について解決方法を解説します!
  • 【Colab】–NOMAL– と表示されて、ショートカットキー(ctrl+c)でコピーができない場合の解決方法を解説します!

カテゴリー

  • AIの使い方
  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

AI AWS AWS Cloud9 Cloud9 CodeWing CSS Emmet GCP Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench node.js Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy Visual Studio Code Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習

アーカイブ

  • 2025年5月
  • 2024年1月
  • 2023年11月
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年5月
  • 2023年4月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2025 · programmingnavi.com ・About・プライバシーポリシー