オープンソースのPaaSソフトウェア CloudFoundry の技術情報やイベント告知などを掲載します

2015-07-17

Markdown Previewer を Cloud Foundry で動かす

「Cloud Foundry 百日行」第32日目は,Markdown Previewerです。
最近はブラウザ上でMarkdownのプレビューを見ながら編集したりといったエディタアプリがたくさんあるようですが、今回のアプリは手元で作成したMarkdownFileをブラウザにドラッグするとプレビューとHTMLの出力が得ることが出来ます。

基本情報

手順の概要は以下の通りです。

  • 1) ソースコードの取得
  • 2) Cloud Foundry 環境へのプッシュ
  • 3) 動作確認

1. ソースコードの取得

$ git clone https://github.com/komiya-atsushi/markdown-previewer.git
$ cd markdown-previewer
$ ls
css  img  index.html  js  README.md  swf

アプリ作者の方が Node.js の環境やら Ruby の環境やらを整えたくないといったモチベーションで作られたそうなので Staticfile_buildpack のみで行けます。

2. Cloud Foundry 環境へのプッシュ

そのままではBuildpackの選択が出来ずにエラーになってしまうので Staticfile を作成します。

$ touch Staticfile

では cf push しましょう。

$ cf push mark -m 64m  
:
requested state: started  
instances: 1/1
usage: 64M x 1 instances
urls: mark.10.244.0.34.xip.io
last uploaded: Fri Jul 17 00:49:50 UTC 2015
stack: cflinuxfs2
buildpack: Static file
 
     state     since                    cpu    memory        disk      details   
#0   running   2015-07-17 09:49:58 AM   0.0%   5.1M of 64M   0 of 1G      

アプリが起動しました。

3. 動作確認

ブラウザからアプリにアクセスします。

アクセスしたら手元で作成したMarkdownFileを Drop your markdown file here に投げ込みます。
表示されました。

画面左に目次も自動作成されています。
では次に HTMLタブ を開いて見ましょう。

HTMLに変換されたソースが表示されます。
右上の CopyHTML ボタンをクリックするとクリップボードにソースがコピーされます。
問題なく動作していそうですね。

余談

この百日行を通して初めてMarkdownで文章を書くことになった為、なんとか簡単にプレビューを見れないかといろいろ探していて見つけたのがこのアプリです。いろんな機能を持ったアプリはあるのですが、プレビューを簡単に見れてHTML出力してくれて、そして何と言ってもブラウザ上でページを誤って移動していちからやり直しの危険性が無いのが気に入っています。

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