iPhoneからAzure Web Apps上にNode.jsとMySQLを構築する
Azure App ServiceにiPhoneからDropbox経由でデプロイ
Developers Summit 2017(2日目) 参加レポート
この画像はHoloLensのセッションで遠くから撮った写真です。
というわけで、2日目の参加です。昨日とは違って1日丸々参加できたので、セッションの感想を残しておこうと思います。色々なセッションを聞いていると、まだまだ自分自身遅れているなと思う次第です。刺激を受けたので、また日々頑張っていこうと思います。何事もまずはやってみる。ダメだったらその時に考えるぐらいの気持ちで行かないと、今の世の中はダメなんだなと全体を通して感じました。
スライドは後日SlideShareにアップロードされるようです。
続きを読むDevelopers Summit 2017(1日目) 参加レポート
本日、Developers Summit 2017の1日目にちょこっと参加してきました。時間の関係で、3セッションしか参加できなかったですが、参加したセッションの簡単な内容と自分なりの感想を書いておきます。明日は長く居られる予定です。
続きを読むHerokuとTextasticでNode.jsをiPhone開発
iPhoneアプリ開発するわけではなく、iPhoneだけでプログラミングは可能かを試してみています。HTML/CSS/JavaScriptは、エディタアプリを使えば比較的容易に出来そうな兆しが見えたので、今回はNode.jsにチャレンジして見ました。
基本はJavaScriptなので、コードの記載にはTextasticというエディタを用いて、Node.jsの実行には、Herokuを使う方針で環境整備を試みてみました。
Heroku とは
Heroku(ヘロクと読みます)とは、PaaS環境 です。要はアプリケーションを実行する環境を提供してくれるサービスの1つです。PaaSの詳細とか利点については、ネット上に色々書かれていますのでググってみてください。
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 から新規作成します。
アプリケーションの名前は、指定してもしなくてもどちらでもオッケーです。Create Appボタン でアプリケーションの作成は完了です。
Dropboxと連携させる
git連携でソースコードを送り込みたいのですが、iPhoneだけだとgithubを扱いにくいので、Heroku Dropbox Syncを用いてアプリケーションを送り込みデプロイを行う方法でやってみたいと思います。。まず作成したアプリケーションとDropboxの連携を行います。中央辺りにDropbox連携のアイコンがあるので、選択します。そうすると、Dropboxとの連携許可画面になるので許可します。
Dropbox側にディレクトリが作成されるので、そのディレクトリが連携用のディレクトリになります。そこに、先ほど作成したindex.jsなどをコピーします。コピーは、textastic で簡単に行えます。Textasticでindex.jsなどが格納されているディレクトリを開き、左下辺りの 地球儀マーク を選択します。そうすると、左右に分割されたウィンドウが出ますので、そこからDropboxにファイルをアップロードできます。
herokuへデプロイ
Dropboxにファイルを入れたら、herokuのウェブ画面からデプロイします。デプロイボタンを押せば、Dropboxからのファイルを取って来て、ビルドしてデプロイを行ってくれます。全て正常に通れば、アプリケーションが動いている状態です。
もしエラーになった際はエラーログが出ているはずですので、それを手掛かりに直します。今回はエラーは出ないと思います。
動いているかどうかの確認
デプロイまでできたら、うごいているかどうかの確認をします。viewボタンを押せばブラウザからアプリケーションにアクセスします。HelloWorld!! 出ればと動いてますね〜
一応、ログも確認しておきます。herokuのかんりがめんから、View logs で確認できます。
結構面倒な部分もありましたが、iPhoneを用いて、TextasticでNode.jsのコードを書き、Dropbox連携でherokuにデプロイすることが出来ました。簡単なアプリケーションにぐらいであれば開発できるかもしれませんね。githubと連携する方法を考えればさらに発展しそうです。
少し駆け足でやってみましたが、みなさんの役に立てば幸いです。
