tyoshikawa1106のブログ

- Force.com Developer Blog -

Heroku Button Galleryに公開されているアプリ「Employee Directory」を動かしてみました

f:id:tyoshikawa1106:20140925223116p:plain

Heroku Button Galleryに公開されているアプリ「Employee Directory」を動かしてみました。説明を見るとIonicとNode.jsを使って開発したアプリとのことです。自分のHeroku環境へのデプロイはHerokuボタンで簡単に実行できます。


実際に動作させてみたところ、こんなページを表示できました。

Topページ

f:id:tyoshikawa1106:20140925223956p:plain:w300

検索処理の実行

f:id:tyoshikawa1106:20140925224059p:plain:w300

詳細ページ

f:id:tyoshikawa1106:20140925224131p:plain:w300


アプリの詳細についてはGitHubのREADME.mdで確認できました。

f:id:tyoshikawa1106:20140925225330p:plain

ccoenraets/directory-ionic-nodejs · GitHub


GitHubのページヘはHeroku Button GalleryのTopページでアプリ名をクリックすることで遷移できます。

f:id:tyoshikawa1106:20140925225435p:plain:w300

コードの編集を試してみる

どんなアプリか確認できたところで、コードの編集を試してみたいと思います。手順についてはアプリのページにあるCodeタグに記載があります。

f:id:tyoshikawa1106:20140925235233p:plain


ターミナルを起動して作業フォルダ内に移動したら以下の手順で進めます。

① 「$ heroku login」コマンドでログイン

f:id:tyoshikawa1106:20140925231257p:plain

② 「heroku git:clone -a "appName"」コマンドでコード一式をローカルにダウンロード

f:id:tyoshikawa1106:20140925232117p:plain


正常に実行後、作業フォルダの中にコード一式が作成されていることを確認できます。

f:id:tyoshikawa1106:20140925232352p:plain

③ 「cd 」コマンドで作成したアプリのフォルダ内へ移動

コミット等のコマンドを実行するためにcdコマンドで移動しておきます。

f:id:tyoshikawa1106:20140925232643p:plain

④ コードを編集

今回は確認しやすいところで、Backボタンのラベルを変更してみようと思います。
後ろに"★"を追加してみました。

f:id:tyoshikawa1106:20140925233454p:plain

⑤ 変更内容をコミット

「git add .」コマンドと「git commit -am」コマンドで変更内容をコミットします。

f:id:tyoshikawa1106:20140925234019p:plain

正しく実行できたと思います。コミットが成功したらいよいよHerokuにデプロイします。

⑥ 「git push heroku master」コマンドでHerokuにデプロイ

f:id:tyoshikawa1106:20140925234336p:plain


これで無事にデプロイが完了しました。自分のHeroku環境で変更箇所が反映されているか確認してみます。

f:id:tyoshikawa1106:20140925234653p:plain


変更結果がバッチリ反映されていました。


ローカルにダウンロード → コードの変更 → Herokuにデプロイするところまで簡単に実行することができます。


実際に動作するアプリを自分の環境に用意することができるので、コードを編集と動作確認が簡単に行えます。勉強するときにすごく便利な感じでした。


ちなみに今回使わせてもらったアプリ「Employee Directory」ですがどんな人が公開してくれているのかなとGitHubを覗いてみると...Salesforce.comの人が公開してくれていました。

f:id:tyoshikawa1106:20140926003110p:plain