Heroku Button Galleryに公開されているアプリ「Employee Directory」を動かしてみました。説明を見るとIonicとNode.jsを使って開発したアプリとのことです。自分のHeroku環境へのデプロイはHerokuボタンで簡単に実行できます。
実際に動作させてみたところ、こんなページを表示できました。
Topページ
検索処理の実行
詳細ページ
アプリの詳細についてはGitHubのREADME.mdで確認できました。
GitHubのページヘはHeroku Button GalleryのTopページでアプリ名をクリックすることで遷移できます。
コードの編集を試してみる
どんなアプリか確認できたところで、コードの編集を試してみたいと思います。手順についてはアプリのページにあるCodeタグに記載があります。
ターミナルを起動して作業フォルダ内に移動したら以下の手順で進めます。
① 「$ heroku login」コマンドでログイン
② 「heroku git:clone -a "appName"」コマンドでコード一式をローカルにダウンロード
正常に実行後、作業フォルダの中にコード一式が作成されていることを確認できます。
③ 「cd 」コマンドで作成したアプリのフォルダ内へ移動
コミット等のコマンドを実行するためにcdコマンドで移動しておきます。
④ コードを編集
今回は確認しやすいところで、Backボタンのラベルを変更してみようと思います。
後ろに"★"を追加してみました。
⑤ 変更内容をコミット
「git add .」コマンドと「git commit -am」コマンドで変更内容をコミットします。
正しく実行できたと思います。コミットが成功したらいよいよHerokuにデプロイします。
⑥ 「git push heroku master」コマンドでHerokuにデプロイ
これで無事にデプロイが完了しました。自分のHeroku環境で変更箇所が反映されているか確認してみます。
変更結果がバッチリ反映されていました。
ローカルにダウンロード → コードの変更 → Herokuにデプロイするところまで簡単に実行することができます。
実際に動作するアプリを自分の環境に用意することができるので、コードを編集と動作確認が簡単に行えます。勉強するときにすごく便利な感じでした。
ちなみに今回使わせてもらったアプリ「Employee Directory」ですがどんな人が公開してくれているのかなとGitHubを覗いてみると...Salesforce.comの人が公開してくれていました。