簡単数分!Cloud9でクラウド上にWordPressテスト環境を作成する方法

先日、WindowsローカルにWordpressテスト環境作成する方法をまとめました。

Wordpressテーマカスタマイズ向けローカルテスト環境の作り方まとめ
Wordpressは、管理画面の「外観→テーマの編集」からテーマを手軽にカスタマイズできます。 この方法は、簡単にカス...

ローカルに、テスト環境作ると手軽にいろいろ試行錯誤することができて便利です。

ただ、ローカルだと基本的に現在使用しているパソコンからしか利用することができません。

ですので、自宅や仕事場などから同一条件用いてテストをするなんて場合は、PC間でローカルテスト環境を同期する必要があります。これはかなり面倒くさい作業です。

そんな時には、レンタルサーバー上にテスト環境作れば良いのかもしれませんが、サーバーはサーバーで、スペースとかセキュリティー対策とかいろいろと面倒くさいことがあります。

けれど、Cloud9というサービスを使えば、クラウド上にWordpressテスト環境がかなり手軽に作成できます。

というわけで、今回は「Cloud9でWordpress環境を作成する方法」について紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

Cloud9とは

Cloud9 - Your development environment, in the cloud

Cloud9は、プログラムの実行環境やデータベースをクラウド上に簡単に作ることができるサービスです。

クラウド上に作成した実行環境は、コードの編集から、実行(テスト)まで全てブラウザで行うことができます。

現在40のプログラム言語に対応(Node.js、PHP+Apache、Python、Django、Ruby on Rails、C++、Rubyなど)しており、メニューをいくつか選択するだけで非常に簡単にプログラム実行環境を用意することができます。しかも、無料で幾つもの動作環境を構築することもできます。

プログラムを始めるにあたって、何が一番面倒くさいって「プログラムが動く動作環境を自分のPC内に構築すること」だったりもします。Windowsなんかを使っていると、最初にここでつまずくなんて人も結構いるのではないかと思います。

Cloud9は、そういった「プログラム事始め」には、うってつけのサービスだと思います。

Cloud9については以前も紹介したことがあるのですが、インターフェースも変わりましたし、Firefoxでエディターが正常動作しない、なんてこともなくなりとても使いやすくなったので改めて紹介です。

Cloud9でWordpress環境を構築する主な手順

Cloud9でWordpressを利用するには、主に以下の手順が必要です。

  1. Cloud9に登録する
  2. ワークスペースを作成する
  3. WordPressの初期設定

ワークスペースの作成だけなら、5分~10分ぐらいで行える簡単な作業です。

Cloud9に登録する

Cloud9を利用するには、まずユーザー登録をする必要があります。

サイト上の「SIGN UP」ボタンを押してください。

クラウド9にサインアップ

ユーザーネーム、Eメールアドレス、パスワードを入力してフリーアカウントを作成してください。

Cloud9でサインアップ時の入力項目

登録作業が済んだら、Cloud9にログインしてください。

ワークスペースを作成する

Cloud9にログインをするとダッシュボード画面が表示されます。

新しいワークスペースを作成するには、「+ボタン(Create a new workspace)」をクリックしてください。

Cloud9のダッシュボード画面

すると、以下のような新しいワークスペースを作成する画面が表示されます。

新しいワークスペースを作成する画面

以下では、それぞれの入力項目について詳しく説明します。

ワークスペース名の設定

まずは、ワークスペースの基本情報に関する設定です。

ワークスペースに関する設定

それぞれの項目には、以下ののように記入します。

  • Owner:ワークスペースのオーナー(デフォルトで自分のユーザー名が入る)
  • Workspase name:ワークスペースの名前を設定します。(スペースや大文字などは利用できません)
  • Description:ワークスペースの説明。(任意)

公開・非公開の設定

次に、公開(Public)するか、非公開(Private)にするかの設定を行います。

公開・非公開設定

非公開にするには、Privateにチェックをつけます。

ただ、無料ユーザーの場合は、非公開(Private)なワークスペースは1つまでしか作ることができないので注意が必要です。

WordPressテスト環境を作る場合は、公開(Public)設定で十分かと思います。Wordpressの場合は、公開設定にして、後で設定時に「検索エンジンでインデックスをしない」にすれば、ほぼ非公開も同然になるかと思います。

ただし、完全に非公開になるわけではないので、絶対公開したくない情報を載せるときは、Privateを選択することをおすすめします。

テンプレートの選択

最後に、利用するテンプレートの選択を行います。

Choose a template項目からWordpressを選択してください。

Cloud9でテンプレートの選択

テンプレートの洗濯が終わったら、「Create workspace」ボタンを押してください。

ワークスペースの作成ボタン

すると、以下のようなワークプレイス作成中の画面が出るのでしばらく待ちます。

ワークプレイスの作成中

ワークプレイスの準備が終わったら、以下のようなワークスペースが表示されます。

Cloud9のWordpressワークスペース

このまま、コード編集に移ることもできますが、まずWordpressの設定をしてしまいます。

WordPressの初期設定

WordPressの初期設定をするために、実行環境を動作させる必要があります。

動作させるために、まず「Run Project」メニューをクリックしてください。

Wordpressを実行する

すると「Run Project」が「Stop」となり、コマンドパレットにいろいろな文字列が出終わって、「Started apache2」と出れば動作完了です。

Wordpressテスト環境を動作

実行環境が動作したのを確認して、Previewメニューから「Preview Running Application」メニューを選択します。

プレビューボタンを押してWordpress画面を開く

すると、以下のようにプレビュー画面がワークスペース内に表示されます。けれど、これでは、画面が狭いので、アドレスバー横にあるボタンをクリックして、新しいタブで開きます。

プレビュー画面が表示される

すると、以下のような言語選択画面が表示されるので、「日本語」を選択した後「続ける」ボタンを押してください。

日本語の環境を選択

すると、以下のような「Wordpressのようこそ画面」が表示されるので、「サイトのタイトル」、「ユーザー名」、「パスワード」、メールアドレスなどを入力して、「Wordpressをインストール」ボタン押してください。

Wordpressのようこそ画面

ワークスペース作成時に公開(Public)設定にしたけどテスト環境を検索エンジンにインデックスさせたくない場合は、プライバシー項目の「検索エンジンがこのサイトをインデックスすることを許可する」のチェックを外してください。
2016-01-29_12h31_03

インストールが完了すると、「成功しました!」と出るので「ログイン」ボタンを押してください。

WordPress › インストール

あとはお馴染みのWordpressログイン画面が表示されるので、先程設定したログイン情報を入力して「ログイン」ボタンを押してください。

Wordpressのログイン画面

ログインに成功すると、こちらもお馴染みのダッシュボードが表示されます。

ダッシュボード ‹ WordPressテスト環境 — WordPress

WordPressは必ずしも最新のものではないので、必要な場合はアップデートしてください。

もちろん、サイト表示を行えば、通常のWordpressサイトのように見ることができます。

WordPressテスト環境 Just another WordPress site

当然、テーマやプラグインをいろいろインストールして試すこともできます。

テーマの管理 ‹ WordPressテスト環境 — WordPress

Cloud9のワークスペースは使いやすい

Cloud9のワークスペースは、とても使いやすいです。

久しぶりにいろいろ使ってみて、思ったことをいくつか。

エディター機能が強化された

Cloud9のエディター

Cloud9のエディターは、見た目がSublime Textっぽくてかなり使いやすいです。

Wordpress開発向けSublime Text3環境の構築方法まとめ
先日、Wordpress編集向けにSublime Textの開発環境を新たに作ってみました。 というのも最近は、Wordpre...

文字の大きさや、タブのインデント幅なども手軽に変更することができます。

コード補完機能も優秀で、結構入力を補助してくれます。

Cloud9のコード補完

クライド9のPHPのコード補完

これは、下手なエディターよりも使いやすいかも。

以前の、Cloud9のエディターは、動作が不安定なところもありましたが、ちょっと使った限りでは、おかしな動作にも遭遇しませんでした。

ファイルのアップロードが簡単

例えば、Wordpressのテーマフォルダに、試したいテーマをアップロードするのも簡単です。

アップロードしたいフォルダに、直接ファイルやフォルダをドラッグ&ドロップするだけです。

アップロードしたいディレクトリに直接ファイルをドラッグ&ドロップする

たったこれだけで、アップロードが完了します。

ファイルのアップロードが完了する

これ、レンタルサーバー上のテスト環境と違って、FTPソフトとか立ち上げなくて良いので、かなり楽です。

まとめ

以上のように、Cloud9は、WEB上にテスト環境を作るのにとても適したサービスです。

「言語をちょっと勉強してみようか」と思ったときに、まず立ちはだかるのがプログラム環境の構築です。僕も、新しい言語を勉強してみようと思ってもこれが大変だと止めてしまうこともあります。Cloud9は、そういったしち面倒くさい環境構築を、すべて肩代わりしてくれます。

ちょっと使ってみて、以下のような難点はまだあります。

  • ときどきサーバーが重たくて遅い時がある
  • インターフェースが英語

無料で利用しているので、多少重たいのは仕方ないです。けれど、こういった難点を補って有り余る楽さが、Cloud9にはあると思います。

ほんと、以前よりもかなり使いやすくなりました。

サイト Cloud9

『簡単数分!Cloud9でクラウド上にWordPressテスト環境を作成する方法』へのコメント

  1. 名前:にゃんだん 投稿日:2016/01/30(土) 07:18:50 ID:4f19fd987

    アップロードがDorpboxみたいに簡単なのがいいですね。

  2. わいひら 名前:わいひら 投稿日:2016/01/30(土) 16:08:01 ID:fe934a13d

    以前は、アップロードするのに3操作ぐらい必要だったので、本当に楽になりました。
    かなり使いやすいです。