Cordova+Middleman+PureCSS.io+Chart.jsを使ったハイブリッドアプリケーション開発

#Cordova+Middleman+PureCSS.io+Chart.jsを使ったハイブリッドアプリケーション開発

#1 Cordovaをグローバルインストールします。

```bash
npm install -g cordova
```

#2 Cordova作業ディレクトリを作成します。
- CordovaはCordova独自のディレクトリ構造を維持し、Middlemanもそのようにします。
- **ポイントは、Middlemanの出力ディレクトリを、Cordovaのwwwディレクトリにする点**です。
- このようにすることで、Cordovaの上でMiddlemanを動かすことができます。

```bash
cordova create evnogui jp.soushi.evnogui 'EVNO'
cd evnogui

# cordova platforms add android
# cordova platforms add ios
# 上記コマンドで自動生成されるためgit管理はしない
echo '/platforms' >> .gitignore
echo '/plugins/android.json' >> .gitignore
echo '/plugins/ios.json' >> .gitignore

# Ignore bundler config.
echo '/.bundle' >> .gitignore

# Ignore bundler gems.
echo 'vendor/bundle' >> .gitignore

# Ignore all logfiles and tempfiles.
echo '/log/*.log' >> .gitignore
echo '/tmp' >> .gitignore

# Ignore other unneeded files.
echo 'doc/' >> .gitignore
echo '*.swp' >> .gitignore
echo '*~' >> .gitignore
echo '.project' >> .gitignore
echo '.DS_Store' >> .gitignore
echo '.idea' >> .gitignore
echo '.secret' >> .gitignore


echo '/www' >> .gitignore # www はmiddlemanが自動出力されるため想定なのでgit管理しない
rm -rf www

# nodebrewにディレクトリ毎のバージョン指定の機構があるわけではないが
#.node-versionファイルを出力することで
# ほかメンバーが以下のコマンドで同じバージョンを利用できるようになる
# nodebrew install `cat .node-version`
# nodebrew use `cat .node-version`
node -v > .node-version

# npmグローバルインストールなので、独自ファイルでcordovaのバージョンを共有
# 他のメンバーが以下のコマンドで同じバージョンを利用でいるようになる
# npm install -g cordove@`cat .cordova-version`
cordova -v >> .cordova-version
```

- `config.xml`ファイルを編集し、全画面表示時にステータスバーを非表示にします。画面の向きをportraitに固定します。[こちらを参照](https://cordova.apache.org/docs/en/latest/config_ref/index.html)

|設定キー|設定可能な値|設定項目|
|---|---|---|
|Fullscreen|true/false|全画面表示時の画面上部のステータスバーを非表示/表示|
|Orientation|default/portrait/landscape|インターフェイスから回転の向きの変更に応答/縦向き固定/横向き固定|

```xml
    <preference name="Fullscreen" value="true" />
    <preference name="Orientation" value="portrait" />
```

#3 Middleman作業ディレクトリを作成します。

- Middleman専用の作業ディレクトリを作成します。
- `config.rb`ファイルに、**build_dir**を設定することで、出力先を変更できます。
- この機能を用い、**Middlemanの出力先をCordovaの作業ディレクトリ内のwwwフォルダに設定します**

```bash
middleman init middleman --skip-bundle
```

- 選択肢は全てYを選んでください。その後、下記のコードも実行します。

```bash
cd middleman

bundle install --path=vendor/bundle
echo '/vendor/bundle' >> .gitignore

bundle install --binstubs
echo '/bin' >> .gitignore

# middman出力先をcordova用のディレクトリに指定
echo "set :build_dir, '../www'" >> config.rb

rbenv local `rbenv version` # rubyのバージョンを共有(※rbenv想定です)

# haml対応にする
rm source/index.html.erb
rm layouts/layout.erb
touch source/index.html.haml
touch layouts/layout.haml

# Normalize.cssを導入
curl -O http://yui.yahooapis.com/pure/0.6.0/base-min.css stylesheets/normalize

# カスタマイズ用の空のCSSとJSを作成
touch source/javascripts/io_core.js
touch source/stylesheets/pure_customize.css.scss
```

- 空の`layouts/layout.haml`が作成されているので、下記のコードを追記します。

```haml
!!!
%html
  %head
    %meta{:content => 'IE=edge', http:{:equiv => 'X-UA-Compatible'}}
    %meta{:charset => 'utf-8'}
    %meta{:content => 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no', :name => 'viewport'}

    -# Use title if it's in the page YAML frontmatter
    %title=current_page.data.title || "EVNO GUI"

    %link{:href => '//fonts.googleapis.com/css?family=Lato:300,400', :rel => 'stylesheet', :type => 'text/css'}

    -# スタイルシートをロード
    =stylesheet_link_tag :normalize
    =stylesheet_link_tag :pure_min
    
    -# PureCSS.ioのカスタマイズ用スタイルシート
    =stylesheet_link_tag :pure_customize

    -# Javascriptをロード
    =javascript_include_tag :Chart_min
    
    -# 通信部分のコアJavascript
    =javascript_include_tag :io_core

  %body{:class => "#{page_classes}"}
    =yield
```

#4 Middlemanをビルドします。

```bash
bundle exec middleman build
#      create  ../www/stylesheets/site.css
#      create  ../www/images/middleman-logo.svg
#      create  ../www/javascripts/all.js
#      create  ../www/index.html
#Project built successfully.
```

- `config.rb`に以下の行を追加し、**相対パスで記述**する設定に変更します。

```ruby
activate :relative_assets
```

#5 Middlemanサーバー(Sinatra)を起動します。

- http://localhost:4567 にアクセスします。

```bash
bundle exec middleman server
```

#6 実機でプロジェクトを実行します。

- 実機でプロジェクトを実行するには、cordova runコマンドに対象プラットフォームを指定して実行します。USBデバッグをONにしたAndroid端末と開発マシンをUSBケーブルで接続してから、cordova runコマンドを実行してください。

```bash
cordova platform add android
cordova build
cordova run android
```

- cordova runコマンドは、以下の3つのことを同時に行うコマンドです。

- wwwディレクトリ以下のファイルから、あるプラットフォーム用のプロジェクトを作成する
- 作成したプラットフォーム特有のプロジェクトをビルドする
- ビルドしたアプリを端末やエミュレータにインストールして実行する
- 成功すれば、Android端末にアプリがインストールされて実行されます。うまくいかない場合には、-dオプションを付けて詳細メッセージを表示しながらもう一度試してみましょう。

```bash
cordova run android -d
```

- iOSの場合、現在のCordova3.0.6ではcordovaコマンドによる実機へのアプリのインストールはサポートされていません。したがって、cordovaコマンドが生成したプロジェクトをXcodeで開いた上でプロジェクトを実行する必要があります。プロジェクトは、次のようにopenコマンドでplatoform/ios以下のCordova_Middleman.xcodeprojファイルを指定すると自動的にXcodeで開かれます。

```bash
cordova platform add ios
cordova build
open platforms/ios/EVNO.xcodeproj
```

---
ここまでで、Cordova+Middlemanの環境が整いました。
続いて、このプロジェクトにPureCSS.ioを適用します。
---

#7 PureCSS.ioを適用する
- [PureCSS.io](http://purecss.io/start/)からPureCSSをダウンロードします
- `pure-min.css`を`pure_min.css`にリネームします。
- `pure.css`及び`pure_min.css`を`<Middlemanプロジェクトルート>/source/stylesheets`フォルダに配置します。

- `layouts/layout.erb`ファイルの<head>タグに、以下の行を追記します。

```ruby
<%= stylesheet_link_tag :pure_min %>
```

- PureCSS.ioを使うので、Middleman標準のCSSを削除します。

```bash
rm -f source/stylesheets/_normalize.scss
rm -f source/stylesheets/site.css.scss
curl http://yui.yahooapis.com/pure/0.6.0/base-min.css -o source/stylesheets/normalize.css
```

---
ここまでで、Cordova+Middleman+PureCSS.ioの環境が整いました。
続いて、このプロジェクトにChart.jsを適用します。
---

#8 Chart.jsをダウンロード・配置

- [GitHubから、Chart.jsをダウンロード](https://github.com/nnnick/Chart.js)し、`Chart-min.js`を`Chart_min.js`にリネームした後、`javascripts`フォルダに配置します。
- `layouts/layout.erb`に、次の行を追加して、`Chart.js`を読み込みます。

- `layout.erb`

```ruby
<%= javascript_include_tag :Chart %>
```

#9 ステータスバーを非表示にする(iOS)

- `platforms/ios/***.xcodeproj`をXCodeで開きます。
- `MainViewController.m`に、以下の行を追記します。

```objc
- (BOOL)prefersStatusBarHidden
{
    return YES;
}
```

#10 Middlemanのビルドとデバッグ

- Middlemanのプロジェクトルートで下記を実行

```bash
bundle exec middleman build --clean --verbose;cd ..;cordova build ios;open platforms/ios/EVNO.xcodeproj;cd middleman;bundle exec middleman server
```

---
ここまでで、Cordova+Middleman+PureCSS.io+Chart.jsを実行する環境が整いました。
続いて、PureCSS.ioの色設定をカスタマイズして、オリジナルサイトを構築します。
---

#11 Middlemanでローカルフォントを使う
- `config.rb`に、下記のコードを追記します。
- ここでは、`RobotoCondensed-Regular.ttf`を追加する例を示します。

```ruby
set :fonts_dir,    'fonts'

#asset_hashを有効にしている場合、ファイル名がビルド毎に変わってしまうため、@font-faceの指定をアセットパイプラインに対応したfont-url()を使ったものに書き換えるか、asset_hashの対象から除外する必要があります。
configure :build do
  activate :asset_hash do |options|
    options.ignore = [/^fonts/]
  end
end
```

- CSSファイルを編集して、ローカルフォントを指定します。

```css
@font-face {
	font-family: 'MyFont';
	src: url(/location/of/font/myfont.ttf);
}

body {
	font-family: 'RobotoCondensed-Regular';
}
```

- `http://localhost:4567/__middleman/sitemap/`にアクセスして、フォントがインポートされたかどうかを確認します。

#12 iOSデバイスで、画面端に到達した場合の跳ね返し効果を無効にする

- `webViewDidFinishLoad`デリゲートメソッドに`theWebView.scrollView.bounces = false;`を追加します。

```swift
- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];
    
    theWebView.scrollView.bounces = false;

    return [super webViewDidFinishLoad:theWebView];
}
```