Dropboxでお手軽にHerokuを使う gitなしでコードを反映させる

HerokuとDropboxを接続すると、ローカルファイルを修正するとHeroku上のコードも修正される。逆にHeroku上のファイルが修正されるとローカルファイルも更新される。

gitを使わずに済む。また、プログラマーがgitを使い、デザイナーがDropboxを使うというやり方もできる。

以下は私のブログ記事

[【名古屋：雨】そのときの天気情報を付けてツイートする](http://bit.ly/w160215)

![160205-heroku-iftttコミュニケーション図.png](https://qiita-image-store.s3.amazonaws.com/0/12939/c8a865e5-ae32-f988-ed54-c156a93a1e0a.png)

の抜粋で、特にHerokuとDropboxを接続して使う方法を説明します。

# Webサービスをアップロードする

以下のページ・・・

https://github.com/weed/Tenkeet

・・・の下の方に、このようなボタンがあるので、押します。

![herokubuttunimage.png](https://qiita-image-store.s3.amazonaws.com/0/12939/87b0d40e-f709-a8a0-ab20-5d64be20a409.png)

すると以下のような画面になります。

![herokubutton1.png](https://qiita-image-store.s3.amazonaws.com/0/12939/d87a89f2-18e5-1fc6-a7fc-072e68689797.png)

「App Name」「Runtime Selection」は何もしなくても良いです。

「Deploy for Free」をクリックします。すると私のつくったNode.jsアプリ「Tenkeet」が自動的にサーバーにインストールされ、必要なすべてのモジュールもインストールされます（5分くらい時間がかかります）。

![herokubutton2.png](https://qiita-image-store.s3.amazonaws.com/0/12939/3415d9a9-2e57-9d51-e4c7-0d097b35afe3.png)

## Webサービスが起動していることを確かめる

この時点でWebサービスは起動しています。試しにWebブラウザでアクセスしてみましょう。

まず「Manage App」をクリックします。

![herokubutton3.png](https://qiita-image-store.s3.amazonaws.com/0/12939/7b9077bc-f434-9417-2566-56de6166a692.png)

「Settings」をクリックします。

![herokubutton4.png](https://qiita-image-store.s3.amazonaws.com/0/12939/a5c78110-fa45-9ec8-74ac-6b210b95da25.png)

すると下の方に「Heroku Domain」という項目があります。

![herokubutton5.png](https://qiita-image-store.s3.amazonaws.com/0/12939/8960be64-6fe2-ed3c-de21-23b7542d2500.png)

そこに表示されているものは、サーバーのアドレスっぽいですよね。では、ブラウザのアドレス入力欄にそのアドレスを打ち込んで見てみましょう。

![herokubutton6.png](https://qiita-image-store.s3.amazonaws.com/0/12939/ccd2bcc5-02a8-a6e9-ba24-ec6dc626d69f.png)

すでにWebサービスが稼働していることがわかります。

# WebサービスとDropboxを接続する

しかし、このままではIFTTTでメッセージを受け取れません。

思い出して欲しいのですが、Makerチャンネルに接続したときに「秘密キー」を示されましたよね。この秘密キーを、今アップロードしたWebサービスに埋め込むと、このWebサービスからのメッセージでIFTTTのMakerチャンネルが動くようになります。

そのために、まずWebサービスとDropboxとを接続しましょう。

## WebサービスとDropboxを接続する

Herokuの画面の上の方にある「Deploy」をクリックします。

![dropbox1.png](https://qiita-image-store.s3.amazonaws.com/0/12939/6f5a8d9e-d290-23fd-6943-6d40daa93a99.png)

「Dropbox」をクリックします。

![dropbox2.png](https://qiita-image-store.s3.amazonaws.com/0/12939/64c44833-ac28-9d0e-34be-e57e3d06d539.png)

「Connect to Dropbox」をクリックします。

![dropbox3.png](https://qiita-image-store.s3.amazonaws.com/0/12939/ccf39849-4416-414e-f48c-b748ff1f552b.png)

「Herokuが・・・アクセスをリクエストしています」と表示されるので、「許可」します。

![dropbox4.png](https://qiita-image-store.s3.amazonaws.com/0/12939/55bc438d-e0a9-522f-60ac-40439166c719.png)

すると「Dropboxのこれこれのフォルダに接続されています」と表示されます。

![dropbox5.png](https://qiita-image-store.s3.amazonaws.com/0/12939/99a73af7-9a57-2b79-3d5f-ada757fe3e2a.png)

実際に見てみると、フォルダやファイルがダウンロードされています。

<img width="769" alt="dropbox6.png" src="https://qiita-image-store.s3.amazonaws.com/0/12939/6cbaedd8-0272-fcb2-afd5-0a2703a1ca7c.png">

## Webサービスに秘密キーを埋め込む

それでは、秘密キーを埋め込みましょう。先ほどのフォルダの中の「index.js」を適当なエディタで開きます。

<img width="770" alt="key2.png" src="https://qiita-image-store.s3.amazonaws.com/0/12939/9ea01d3d-3f18-8cb1-b6eb-3fbec9dffa98.png">

「IFTTTのセキュリティキー」と書かれた部分に、Makerチャンネルに接続したときにもらった「秘密キー」を貼り付けます。

<img width="730" alt="key1.png" src="https://qiita-image-store.s3.amazonaws.com/0/12939/771483eb-7d3a-1ec6-1eeb-c04abfe3e5ae.png">

保存して、先ほどのHerokuの画面に戻ります。そこで「Deploy」というボタンを押します。

![key3.png](https://qiita-image-store.s3.amazonaws.com/0/12939/ce161aca-c15f-d587-a474-bb8f65c44a64.png)

すると変更が反映されます。

![key4.png](https://qiita-image-store.s3.amazonaws.com/0/12939/d2cefa73-bc8a-c543-9aa3-6da85b09cfa1.png)

第2ステップが終わりました。お疲れさまです。あと一息です。

---
以上が抜粋です。気が向いたら元記事も見てみて下さい。何かの参考になれば幸いです。

[【名古屋：雨】そのときの天気情報を付けてツイートする](http://bit.ly/w160215)

ブログやってます http://weed.nagoya