LoginSignup
3
3

More than 5 years have passed since last update.

[ionic入門] その1: プロジェクトを作って、localhost や ios simulator や herokuにあげてみる

Last updated at Posted at 2015-04-14

API Serverから、JSONを受け取って表示していくシステム、web, ios, androidなんだっていいから作りたかったので、ハイブリッド開発が出来るionicを使ってみました。

以下自分用作業メモです。

Screen Shot 2015-04-14 at 14.33.20.png

とりあえず、localhost, ios simulator, herokuでアプリを確認出来るところまでやっていみました。
簡単すぎたので、あんまり書くことありません。。。。
リンクとスクショを貼っていきます。

Condition

  • Yosemite

Install

read: http://ionicframework.com/getting-started/

$ npm install -g cordova ionic

Select Project Template

read: http://ionicframework.com/getting-started/

Screen Shot 2015-04-14 at 14.34.04.png

$ ionic start myApp sidemenu

run

ionic command

Screen Shot 2015-04-14 at 14.30.08.png

localhost

$ ionic serve

Screen Shot 2015-04-14 at 14.29.47.png

Screen Shot 2015-04-14 at 14.30.15.png

Screen Shot 2015-04-14 at 14.29.59.png

ios simulator

$ npm install -g ios-sim
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

Screen Shot 2015-04-14 at 15.02.30.png

heroku

read: http://blog.ionic.io/heroku-ionic/

Screen Shot 2015-04-14 at 14.40.40.png

Screen Shot 2015-04-14 at 14.21.11.png

package.json

"dependencies": {
    "express": "4.8.4", <--- add this line

web.js

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

app.use(express.static(__dirname + "/www"));
app.listen(process.env.PORT || 5000);

Procfile

web: node web.js

heroku dyno

$ heroku ps:scale web=1

deploy

$ git push heroku master

check

http://hogehoge.herokuapp.com

references

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3