vte.cxを利用するためにはまず専用のサイトでアカウント登録します。
その後、vtecxblankプロジェクトをgitを使用しcloneします。
vtecxblankプロジェクトにはHTMLの雛形など、すぐ にアプリを開発できるように必要最小限のコンテンツが含まれています。
まずは開発環境を整え、HTMLをサーバに表示するまでの手順を以下に記します。
アカウント登録する
公式サイトにアクセスする
公式サイト： https://admin.1.vte.cx/index.html
ここでアカウント登録を行ってください。
新規登録を行う
右上の「新規登録」に移動します。
メールアドレスとパスワードを入力し、「私はロボットではありません」をチェックします。
「利用規約に同意して新規登録」をクリックすると仮登録が完了します。
すると入力したメールアドレスにメールが送信されます。
メールを開き、本文に記載されているリンクをクリックすると本登録完了です。
サービスを作成する
アカウント登録を行ったら、次に自分のサービスを作成します。
ユーザ自身が作成するWebアプリケーション(Webサービス)のことをサービスと呼んでいます。
トップページに「あなたのドメインでサービスを作成」と表示してある下にドメインを入力する領域があります。
ここにお好きなドメイン名を入力してください。それが自分のサービスになります。
入力を行ったら「無料でサービス開始」ボタンを押し、サービスを作成します。
作成したサービスのURLを確認する
サービスの作成が成功したら、ユーザトップ画面が表示されます。
ユーザトップ： https://admin.1.vte.cx/user_top.html#service_list
※ページを表示するためにはログインする必要があります。
サービス一覧に作成したサービスのURLと管理画面へ移動するボタンが表示されます。
また、ここでサービスの初期化と削除が行えます。
サービスの初期化： 設定情報は維持されますが、その他のデータが全て削除されます。つまり、サービスができた初期状態に戻ります。
サービスの削除： 作成したサービスを完全に削除します。URLも無くなります。
開発環境を整える
1. 必要なツールやモジュールを確認する
以下のモジュールが必要になります。
- Git
- Node.js
- gulp.js
（三つのモジュールについての詳細は割愛します。）
2. Gitをインストールする
モジュールをインストールする手段として、Gitをインストールし、コマンドラインで行うことをお勧めしています。
まずはGitがインストールされているか確認します。
以下のコマンドを実行してください。
git --version
バージョン情報が表示されれば、既にインストールされています。
《インストールされてない場合》
Macの場合
以下からインストールを行ってください
http://sourceforge.net/projects/git-osx-installer/
Windowsの場合
以下からインストールを行ってください
http://msysgit.github.com/
3. Gitの初期設定を行う
これからの手順でgitのプロジェクトをインストールします。
まずはそのプロジェクトをインストールする場所を確保します。
以下のコマンドを実行し、初期設定を行ってください。
cd ＜プロジェクトを作成するディレクトリ＞
git init
以上でGitの初期設定は完了です。
4. Node.jsをインストールする
まずは、Node.jsがインストールされているか確認します。
以下のコマンドを実行してください。
node -v
《 インストールされていなかった場合 》
以下のサイトからダウンロードしてください。
公式サイト： http://nodejs.org/
《 古いバージョンがインストールされていた場合 》
以下のコマンドを順に実行し、最新に更新してください。
npm cache clean -f
npm install -g n
n stable
node -v
※管理者権限で行ってください。
5. gulp.jsをインストールする
以下のコマンドを実行し、インストールしてください。
npm install -g gulp
vtecxblankプロジェクトを入手する
vtecxblankプロジェクトにはHTMLの雛形など、すぐ にアプリを開発できるように必要最小限のコンテンツが含まれています。
gitコマンドでプロジェクトをcloneする
環境が整いましたので、以下のコマンドを実行し、プロジェクトをcloneしてください。
git clone https://github.com/reflexworks/vtecxblank.git
アプリに必要なフレームワーク等をダウンロードします
先ほどcloneしたプロジェクトに移動してください。
cd vtecxblank/
以下のコマンドを実行し、インストールしてください。
npm install
ダウンロードが完了したら、node_modulesフォルダが生成され、その中にjQuery等がダウンロードされています。
gulpの初期設定を行う
以下のコマンドを実行し、初期設定を行ってください。
gulp
このコマンドを実行することでapp配下にnode_modulesのシンボリックリンクが作られます。
gulpの初期設定は以上です。
サーバにデプロイしてHTMLを表示する
cloneしたプロジェクトには、サンプルHTMLが同梱されています。今回はそのHTMLを使って画面を作成し、サーバーに実際にデプロイしてみましょう。
今回はその方法とデプロイしたHTMLをサーバーで参照する方法について説明します。
1. HTMLを作成する
appフォルダの配下に適当なHTMLを作成します。
まずは簡単なHello Worldを作成してみましょう。
ファイル名は「hello_world.html」とします。
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<title>Hello World<title>
</head>
<body>
Hello World
</body>
</html>
2. アクセストークンを準備する
デプロイするためにはアクセストークンが必要になります。
アクセストークンの取得方法は以下になります。
管理画面に移動する
自分のサービスを作成したら、ユーザトップ画面に自分が作成したサービス一覧が表示されます。（ページを表示するためにはログインが必要です。）
ユーザトップ： https://admin.1.vte.cx/user_top.html#service_list
この画面から各サービスの「管理」ボタンを押すことで、そのサービスの管理画面にアクセスすることができます。
まだサービスを作っていない場合は、同ページの「新しいページを作成する」からサービスを作成してください。
基本情報からアクセストークンをコピー&ペーストする。
管理画面の基本情報にアクセストークンが表示されています。それをコピー&ペーストしてください。
3. デプロイを実行する
コマンドプロンプトを開き、アクセストークンを以下のコマンドに貼り付けて実行します。
gulp deploy -h https://{自分のサービスドメイン}.1.vte.cx -k {アクセストークン}
4. 編集したHTMLにアクセスする
https://{自分のサービスドメイン}.1.vte.cx/hellow_world.html にアクセスする。
表示できたら成功です。
これでブラウザにHello Worldを表示できました。
次回はローカル環境での開発方法について取り上げたいと思います。