はじめに
環境構築メモ。
環境構築
Cordova
公式に従ってインストール済。
プロジェクト作成
$ cordova create qiita_sample com.example.qiitaSample QiitaSample -d
$ cd qiita_sample
$ cordova platform add ios
Onsen UIの設定
下記を実行するとwww以下にbower_componentsというディレクトリができる。
$ cd www
$ bower install onsenui
index.htmlを修正。
index.html
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- Onsen UIのCSSを読み込み -->
<link rel="stylesheet" href="bower_components/OnsenUi/css/onsenui.css">
<link rel="stylesheet" href="bower_components/OnsenUi/css/onsen-css-components.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<!-- Onsen UIとAngularJSのjsを読み込み -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/OnsenUi/js/onsenui.min.js"></script>
<title>Hello World</title>
</head>
<body>
<ons-button>
<i class="fa fa-google-plus"></i> ログイン
</ons-button>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index.js
var app = angular.module('sampleApp', ['onsen']);
index.css
/* デフォルトの指定をすべて削除 */
エラーが出てないかの確認
以下を実行してからhttp://localhost:8000/ios/www/にアクセス。
$ cordova serve
コンソールにエラーが出てないことを確認。
