本日の第29回「Cloud Foundry 百日行」は Editr です。
これは、Web のデモページをブラウザ上で作りながらリアルタイムで確認できるアプリになっています。
基本情報
-
公式サイト
http://lab.idered.pl/editr/
ソースコードの取得と確認
$ git clone https://github.com/Idered/Editr.js.git
$ cd Editr.js/
$ ls
editr README.md test
README のインストール手順の最初に、”Copy editr folder to root of your website.” とありますが、今回は Cloud Foundry へデプロイするので、 editr/ フォルダ自体に入ってそこで確認したい html を作成し、そこからアプリを push します。
$ cd editr/
$ ls
editr.css editr.js items libs parsers
index.html の作成
アプリと一緒に配布されているサンプルファイルを使い、 README を参考に、 index.html を作成します。
まずはサンプルファイルの test/projects/index.html を editr/ にコピーして持ってきます。
$ pwd
/home/ueno/Editr.js/editr
$ cp -p ../test/projects/index.html .
$ cp -p index.html index.html.org
$ cat index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body></body>
</html>
この index.html を編集します。
$ vi index.html
$ cat index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Editr</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="editr.css">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ace.js"></script>
<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ext-emmet.js"></script>
<script src="libs/ext.emmet.js"></script>
<script src="editr.js"></script>
<script src="libs/parser.coffeescript.js"></script>
<script src="libs/parser.less.js"></script>
<div class="editr"></div>
<script>
$('.editr').each(function() {
new Editr({
el: this,
});
});
</script>
</body>
</html>
$ diff index.html.org index.html
4c4
< <title></title>
---
> <title>Editr</title>
6a7,8
>
> <link rel="stylesheet" href="editr.css">
8c10,28
< <body></body>
---
> <body>
> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
> <script src="//cdn.jsdelivr.net/ace/1.1.01/min/ace.js"></script>
> <script src="//cdn.jsdelivr.net/ace/1.1.01/min/ext-emmet.js"></script>
> <script src="libs/ext.emmet.js"></script>
> <script src="editr.js"></script>
> <script src="libs/parser.coffeescript.js"></script>
> <script src="libs/parser.less.js"></script>
>
> <div class="editr"></div>
>
> <script>
> $('.editr').each(function() {
> new Editr({
> el: this,
> });
> });
> </script>
> </body>
アプリの push
今回のアプリは HTML, JavaScript を主として構成されていますが、一部、PHP のファイルも存在しています。
それに対し、今回使用している bosh-lite 環境には、php-buildpack が入っていますので、特定の buildpack の指定はせずにそのまま push します。
$ cf push editr
Creating app editr in org ueno / space test1 as ueno...
:
requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: editr.10.244.0.34.xip.io
last uploaded: Thu Jul 9 10:15:49 UTC 2015
stack: cflinuxfs2
buildpack: PHP
state since cpu memory disk details
#0 running 2015-07-09 07:16:07 PM 0.0% 27.9M of 256M 0 of 1G
デプロイ成功し、アプリが起動しました。
buildpack: PHP から、php-buildpack が使用されたことがわかりますね。
動作確認
http://editr.10.244.0.34.xip.io にアクセス。
HTML のサンプルとして、アプリについているサンプルファイルを使ってみましょう。
test/projects/flat-ui/switch.html の中身を HTML の画面にコピペします。
続いて、 test/projects/flat-ui/switch.css の中身も CSS の画面にコピペ。
そして、Result 画面を出すと、
switch.html と switch.css が解釈されて、画面表示されました。
push 時にファイルを読み込む方法の確認
このアプリは複数のファイルをあらかじめ読み込ませ、その中から選択表示できるので、今度はそれを確認していきます。
まずはサンプルファイルが入ったフォルダ test/projects/flat-ui を持ってきます。
$ pwd
/home/ueno/Editr.js/editr
$ cp -pr ../test/projects/flat-ui .
$ ls flat-ui
main.less normalize.css radio.css radio.html script.coffee switch.css switch.html
この中から、先ほど使った、 switch.html , switch.css と共に、 radio.html と radio.css の計4つのファイルを読み込ませるため、サンプルファイル test/index.html を参考に、上記で作った index.html を編集します。
$ pwd
/home/ueno/Editr.js/editr
$ cp -p index.html index.html.1
$ vi index.html
$ cat index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Editr</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="editr.css">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ace.js"></script>
<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ext-emmet.js"></script>
<script src="libs/ext.emmet.js"></script>
<script src="editr.js"></script>
<script src="libs/parser.coffeescript.js"></script>
<script src="libs/parser.less.js"></script>
<div class="editr" data-files-html="switch.html;radio.html" data-files-css="main.less;switch.css;radio.css"></div>
<script>
$('.editr').each(function() {
new Editr({
el: this,
path: 'flat-ui',
view: 'vertical',
gistProxyURL: 'libs/proxy.gist.php',
callback: function(editr) {}
});
});
</script>
</body>
</html>
$ diff index.html.1 index.html
19c19
< <div class="editr"></div>
---
> <div class="editr" data-files-html="switch.html;radio.html" data-files-css="main.less;switch.css;radio.css"></div>
24a25,28
> path: 'flat-ui',
> view: 'vertical',
> gistProxyURL: 'libs/proxy.gist.php',
> callback: function(editr) {}
ファイルの編集が終わったので、アプリを push します。
$ cf push editr2
Creating app editr2 in org ueno / space test1 as ueno...
:
requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: editr2.10.244.0.34.xip.io
last uploaded: Thu Jul 9 10:31:35 UTC 2015
stack: cflinuxfs2
buildpack: PHP
state since cpu memory disk details
#0 running 2015-07-09 07:31:50 PM 1.7% 23.6M of 256M 0 of 1G
デプロイ成功してアプリが起動したので、アクセスします。
switch.html と switch.css が解釈されて、画面出力されています。
Result, HTML, CSS の各タグをクリックすると、読み込んだファイルが選択できるようになっています。
Result のタグから、 radio.html に切り替えてみると、その内容に画面が切り替わりました。
まとめ
今回は、デプロイ自体は簡単に出来た割には、そのアプリは、ブラウザ上で、HTML/JavaScript/CSSを作成、編集、組み合わせて、そのまま実行可能、という便利なものでした。
Webサーバ上のコンテンツを直接編集、なんて使い方もできるかもしれません。もちろんセキュリティと認証の課題をクリアする必要はありますが。
今回使用したソフトウェア
- cf-release (v211)
https://github.com/cloudfoundry/cf-release/tree/v211
( https://github.com/cloudfoundry/cf-release/tree/2121dc6405e0f036efa4dba963f7f49b07e76ffa ) - bosh-lite
https://github.com/cloudfoundry/bosh-lite/tree/0ccf6f54b1d11087b8356509832db80ec821eada - CF CLI (v6.11.2-2a26d55-2015-04-27T21:11:49+00:00)
https://github.com/cloudfoundry/cli/releases/tag/v6.11.2 - Editr
https://github.com/Idered/Editr.js/tree/21238885142ef116f6e0c4f574ed1b1c8fedba73
