百日行」第83日目は、プレビュを見ながらHTML/JS/CSSを編集できるWebデザイン用エディタBracketsです。IDEほどの機能はありませんが、コードヒントが出たり構文エラー時にアラートが出たりと、シンプルですが使いやすいエディタだと思います。Bracketsは、nodejs-buildpackを使ってCF上で動かすことも出来ますが、ソースへの修正が多少必要であることと、Brackets自体がHTML/JS/CSSで出来たアプリであるため、今回はシンプルにstaticfile-buildpackで起動してみました。公式サイトhttp://brackets.io/ソースコードhttps://github.com/humphd/brackets参考Bracketsの機能紹介、使い方解説デプロイ準備から動作確認までの手順は以下の通りです。ソースの取得Bracketsのソースを、GitHubから取得します。cloneして下さい。ビルド準備まずは作業環境にnpmとgruntをインストールします。先に、npmコマンドをインストールします。nodejs次に、npmコマンドを使ってgruntコマンドをインストールします。アプリのビルドREADMEに従って、npmコマンドとgruntコマンドを使ってアプリをビルドします。errors.ビルドが完了し、作成されたdistディレクトリに以下のようなファイルが出来ていれば成功です。デプロイ準備アプリのビルドが完了したら、デプロイに必要な設定ファイルを作成していきます。staticfile_buildpack用の設定です。staticfile_buildpackのREADMEを確認すると、アプリのルートフォルダを指定したい場合、Staticfileファイルで定義することができるようです。本アプリは、ビルドで作成されたdistがルートフォルダとなるため、以下のように指定します。dist次に、デプロイ用のマニフェストを作成します。staticfile_buildpackマニフェストは、buildpack:指定のみです。Buildpackのstaticfile_buildpackを使うので、URLではなくBuildpack名を指定します。buildpacksコマンドで確認することができます。binary_buildpack-cached-v1.0.0.zip上記までの設定で、ひとまずアプリのデプロイは成功します。Bracketsのトップページファイルはhosted.htmlという名前であるため、払いだされたアプリのURLへアクセスすると以下のようなページが表示され、直接アクセスできません。そのため、staticfile_buildpackが起動するNginxの設定を変更することで、hosted.htmlがトップページとして表示されるようにしていきます。staticfile_buildpackのREADMEを確認すると、ルートフォルダにnginx.confを置いておくと、そちらの設定が優先されるようです。そこで、staticfile-buildpackのリポジトリで管理しているnginx.confをGitHubから取得しdistフォルダに置き、indexの設定にhosted.htmlを追加します。}}これで、デプロイ準備は完了です。1G無事、デプロイは成功しました。動作確認ブラウザから払いだされたアプリのURLへアクセスすると、無事トップページであるhosted.htmlの画面が表示されました。デフォルトでいくつかのファイルがすでに作成されています。試しに、CSSファイルのstyle.cssを修正して、設定したスタイルをindex.htmlへ反映してみましょう。ここでは、font-size:を追加し、color:を変更してみます。お使いになるとすぐに分かると思いますが、キーを入力するとコードヒントが即座にでます。color:の定義を変更してみると、色のサンプルも合わせて表示されます。次に、index.htmlに修正したCSSファイルを指定します。href属性にファイル名を指定の際、候補のファイル一覧が表示されるので便利です。入力し終わると、画面右のサンプル表示部分の文字が、CSSで設定したスタイルに変更されたことが確認できます。ここで、わざと誤った文法を入力してみると、警告の意味で行番号のバックが赤く表示されるのが分かります。次に、index.htmlにイメージを挿入してみましょう。今回は百日行第78日目で紹介しましたEtherDrawで描かれた名作を挿入してみます。イメージファイルのアップロードは、画面左に表示されるファイル一覧にドラック&ドロップするだけで完了です。index.htmlにimgタグでアップロードしたイメージのファイル名を指定すると、画面右のサンプル表示部分に反映されます。ファイルの作成・削除やディレクトリの作成などは、画面左のファイル一覧上で右クリックすることで行えます。