2015-07-02

wysiwygetize を Cloud Foundry で動かす

本日の第21回「Cloud Foundry 百日行」は wysiwygetize です。
ホームページにアクセスしていただければお分かりの通りこのアプリはテキストの入力エリアと「view source」、「full screnn」の選択肢があるだけです。
これで何が出来るかというとアプリ名からお気付きの方もいるかもしれませんがWYSIWYG(ウィジウィグ)エディタとして利用が出来ます。

ググってみるとWYSIWYGとは「What You See Is What You Get」の頭文字をあわせたもので、ディスプレイに表示される状態(文字サイズや色など)を確認が出来る技術みたいです。
例えばhtmlやdocなど書いた時、ブラウザでの表示や印刷のイメージが思っていたものと違うことがよくあると思います。そこを解消する為に最終的に表示される状態を確認しながら編集出来るツールがWYSIWYGエディタといわれるもののようですね。

また今回のエディタは最低限の機能に絞ることでアプリのサイズが他の同様のエディタと比べても小さいのでWEBアプリ向きといえますね。

基本情報

ソースコードの取得

$ git clone https://github.com/Spharian/wysiwygetize
$ cd wysiwygetize
$ ls
css  index.html  js  README.md

シンプル!わかりやすい!
見た目も操作も機能をシンプルにしてあるだけあって迷いどころがないですね。今回も staticfile-buildpack を使っていきましょう。

アプリのpush

手始めにアプリのルートディレクトリにStaticfileを作成します。

$ touch Staticfile

そしてデプロイする前に第16回と同じ失敗を踏まないように manifest.ymlenv を設定したものを作成しましょう。また外部のBuildpackを利用する場合は前回のようにリリースなどで変更が入る可能性があるので、下記のようにバージョンを含めて指定する方法も有効です。前回利用したバージョン v1.1.1 を指定します。

vi manifest.yml

applications:
- name: wysiwygetize
  buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git#v1.1.1
  env:
    CF_STACK: lucid64

ちなみに上記ではBuildpackのタグを指定していますが、branchやcommitを指定することも可能です。

よし、これで準備完了。デプロイしましょう。

$ cf push
Using manifest file /home/k-nagai/nagai-work/wysiwygetize/manifest.yml

Creating app wysiwygetize in org k-nagai / space work as k-nagai...
OK

Creating route wysiwygetize.10.244.0.34.xip.io...
OK

Binding wysiwygetize.10.244.0.34.xip.io to wysiwygetize...
OK

Uploading wysiwygetize...
Uploading app files from: /home/k-nagai/nagai-work/wysiwygetize
Uploading 102.6K, 8 files
Done uploading               
OK

Starting app wysiwygetize in org k-nagai / space work as k-nagai...
-----> Downloaded app package (40K)
Cloning into '/tmp/buildpacks/staticfile-buildpack'...
Note: checking out 'd00d45d43dcdb3bfa75b1445533c6fda5035ef3b'.
You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:
  git checkout -b new_branch_name
Submodule 'compile-extensions' (https://github.com/cloudfoundry-incubator/compile-extensions.git) registered for path 'compile-extensions'
Cloning into 'compile-extensions'...
Submodule path 'compile-extensions': checked out 'f752ecf4b27d2f31bb082dfe7a47c76fefc769d7'
-----> Using root folder
-----> Copying project files into public/
-----> Setting up nginx
-----> Uploading droplet (2.3M)

1 of 1 instances running

App started


OK

App wysiwygetize was started using this command `sh boot.sh`

Showing health and status for app wysiwygetize in org k-nagai / space work as k-nagai...
OK

requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: wysiwygetize.10.244.0.34.xip.io
last uploaded: Tue Jun 30 05:30:25 +0000 2015
stack: lucid64

     state     since                    cpu    memory         disk      details   
#0   running   2015-06-30 02:30:47 PM   0.0%   3.5M of 256M   0 of 1G 

デプロイ完了。

動作確認

URL wysiwygetize.10.244.0.34.xip.io にアクセスしてみます。

入力欄に試し書きをして・・・
書いた文字を反転選択するとメニューが出てきていろいろ試す。

できた。

ソースも確認。改行が無いから見にくいですが良しとして、

最後にフルスクリーンもOK。

確かに参考ページにあるとおりちょっとした確認や編集なら十分かも知れません。

今回使用したソフトウェア