HerokuとTextasticでNode.jsをiPhone開発

f:id:ninna2:20170409132859p:plain:w360

iPhoneアプリ開発するわけではなく、iPhoneだけでプログラミングは可能かを試してみています。HTML/CSS/JavaScriptは、エディタアプリを使えば比較的容易に出来そうな兆しが見えたので、今回はNode.jsにチャレンジして見ました。

基本はJavaScriptなので、コードの記載にはTextasticというエディタを用いて、Node.jsの実行には、Herokuを使う方針で環境整備を試みてみました。

Heroku とは

Heroku(ヘロクと読みます)とは、PaaS環境 です。要はアプリケーションを実行する環境を提供してくれるサービスの1つです。PaaSの詳細とか利点については、ネット上に色々書かれていますのでググってみてください。

www.heroku.com

Herokuは、Ruby,Java,Python,PHP,Node.jsなど の言語に対応しており、一定の無料枠があり、1ヶ月 550 dyno hours (クレジットカード登録で1000に増えるみたい)と書いてありました。今回は、Node.js(サーバサイドJavaScript)を使用していきたいと思います。

index.js

サンプルといえば、HelloWorldですね。とりあえず動くものならなんでもよいので、HelloWorldを作っていきましょう。Textasticを起動して、今回開発用のディレクトリを用意してください。その上で、index.jsという空ファイルを作成します。

Expressを使います。Expressは、Node.jsでのフレームワークです。余計な処理をフレームワークで処理してくれますし積極的に使用していきましょう。

Expressを使用するための記述を書きます。

var express = require('express');
var app = express();

ポート番号の記述を変更する必要があるみたいなので、書き換えます。

app.set('port', (process.env.PORT || 5000));

ルートディレクトリ(‘/’)にアクセスした時の処理を記載します。ログとレスポンスに"HelloWorld"と出力して、HTTPステータス200を返しています。

app.get('/', function(request, response) {
  console.log("Hello World!!");
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World!!\n');
});

listen関数でサーバ待ち受け開始するコードを加えます。アプリケーション開始時にログ出すようにしています。

app.listen(app.get('port'), function() {
  console.log('HellowWorld app is running on port', app.get('port'));
});

全体像は下記のようになります。これで多分いけるはず〜

var express = require('express');
var app = express();

app.set('port', (process.env.PORT || 5000));

app.get('/', function(request, response) {
  console.log("Hello World!!");
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World!!\n');
});

app.listen(app.get('port'), function() {
  console.log('HellowWorld app is running on port', app.get('port'));
});

Procfile

アプリケーションを起動するための起動コマンドが必要なようなので、用意します。拡張子がないファイルです。

web: node index.js

package.json

iPhoneだとnpmコマンドが使えないので、package.jsonも自作です。この辺りはやはり不便です。iPhoneでnpmコマンドが使えるようにならないと開発するのは厳しいです。とりあえず、今回は自作していきます。書く内容は大体決まってくるので、テンプレート作ってしまえば2回目以降は楽になるのかもしれませんね。

{
  "name": "node-helloworld",
  "version": "0.0.1",
  "description": "helloworld Node.js app using Express 4",
  "engines": {
    "node": "6.9.4",
    "npm": "2.1.x"
  },
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "4.13.3"
  }
}

herokuでアプリケーションの作成

herokuのアカウント作成を行って、アプリケーションを作成します。アカウント登録は、herokuのページから指示に従って作るだけなので、それほど難しくありません。説明は省略します。アカウントができたら、早速アプリケーションを作成しましょう。

Create new app から新規作成します。

f:id:ninna2:20170409004928p:plain:w360

アプリケーションの名前は、指定してもしなくてもどちらでもオッケーです。Create Appボタン でアプリケーションの作成は完了です。

Dropboxと連携させる

git連携でソースコードを送り込みたいのですが、iPhoneだけだとgithubを扱いにくいので、Heroku Dropbox Syncを用いてアプリケーションを送り込みデプロイを行う方法でやってみたいと思います。。まず作成したアプリケーションとDropboxの連携を行います。中央辺りにDropbox連携のアイコンがあるので、選択します。そうすると、Dropboxとの連携許可画面になるので許可します。

f:id:ninna2:20170409004932p:plain:w360

Dropbox側にディレクトリが作成されるので、そのディレクトリが連携用のディレクトリになります。そこに、先ほど作成したindex.jsなどをコピーします。コピーは、textastic で簡単に行えます。Textasticでindex.jsなどが格納されているディレクトリを開き、左下辺りの 地球儀マーク を選択します。そうすると、左右に分割されたウィンドウが出ますので、そこからDropboxにファイルをアップロードできます。

f:id:ninna2:20170409004935p:plain:w360