Cordova + Materializeでマテリアルデザインのハイブリッドアプリを作る

#はじめに
プログラミング未経験でもスマホアプリを作ってみたい方、
スマホアプリを作って自慢してモテたい方(効果には個人差があります)、
Java嫌いの方、Android Studioの重さに開発を諦めた方向けの
ハイブリッドアプリの開発方法をゼロからご紹介致します。


##そもそもハイブリッドアプリって？
HTML + CSS + JavaScriptというWebサイトを作る感覚で開発するアプリです。
Webサイト感覚で作るのでBackboneやReactなどお好きなフレームワークと
組み合わせて作ることが出来ます。

##イメージ
今回作るアプリは以下のような感じになります。
ボタンを押してページ遷移するだけです。
おまけとして、サイドメニューとフローティングボタンもつけてあります。
単純ですが、これが出来れば大概のアプリは作れるのでは？

![screenShot1.png](https://qiita-image-store.s3.amazonaws.com/0/101869/4f055758-6b76-876d-9b6e-6d747f63dcd0.png)

#事前準備
さて、事前準備です。

##1.　Cordova導入(npmにてインストール)
Node.jsのインストール
http://nodejs.org/

npmでcordovaをインストール

```sh:command
npm install -g cordova 
```

##2.　Materializeダウンロード
こちらは公式サイトから頂きます。
ダウンロード:http://materializecss.com/getting-started.html

なお、MaterializeはjQueryを使用しているためそちらもダウンロードしておきます。
ダウンロード:https://jquery.com/download/

##3.　エミュレータの準備
Android公式の物を使っても良いのですが、重い + デバッグが面倒なので
Ripple Emulatorを使いましょう。
ちなみにchromeのプラグインは古いのでnpmでダウンロードしてくださいね。

```sh:command
npm install -g ripple-emulator
```

##4.　環境変数の設定
ANDROID_HOMEとPATHを設定します。
SDKをインストールしてない場合はここでダウンロードしましょう。
参考:http://matome.naver.jp/odai/2141480427409191001

##5.　アイコンの入手
デフォルトのままではアイコンが表示されず
非常に面白く無いのでアイコンを入手します。
以下からダウンロード後、
iconfont配下のMaterialIcons-Regular.eot、MaterialIcons-Regular.woff2、MaterialIcons-Regular.woff、MaterialIcons-Regular.ttf を入手しておいて下さい。
ダウンロード:https://github.com/google/material-design-icons


#開発
お疲れ様です。
さあ、必要なパーツも揃ったところで早速開発を始めましょう。

##プロジェクトの作成

```sh:command
cordova create MyApp
```

##フォルダ構成
今回は上記で以下のようなファイル構成でいきます。
基本的には上記で作ったプロジェクトにMaterializeを詰めるだけです。

```lang:tree
C:\hogehoge\MYAPP
│  config.xml
│
├─hooks
│      README.md
│
├─platforms
├─plugins
└─www
    │  index.html
    │  sub.html
    │
    ├─css
    │  │  index.css
    │  │
    │  └─libs
    │          materialize.min.css
    │
    ├─img
    │  └─icons
    │          MaterialIcons-Regular.eot
    │          MaterialIcons-Regular.ttf
    │          MaterialIcons-Regular.woff
    │          MaterialIcons-Regular.woff2
    │
    └─js
        │  index.js
        │
        └─libs
                jquery-2.1.4.min.js
                materialize.min.js
```

##HTML、JSの開発
Webサイト同様に作っていきます。
といっても、難しいことを考えたくないので、
Materializeの公式サイトに載っている使用例を貼り付けていくだけです。
JSは必要最低限のjQueryだけですね。
CSSはcordovaデフォルトの物とアイコン設定用に少し記載しています。
こんな感じになりました。

index.html

```html:HTML
<!DOCTYPE html>
<html>
    <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">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link type="text/css" rel="stylesheet" href="css/libs/materialize.min.css"  media="screen,projection"/>
        <title>Main</title>
    </head>
    <body>
        <div class="app">
            <!-- ヘッダー、サイドメニュー -->
            <nav>
                <div class="nav-wrapper">
                    <a href="#!" class="brand-logo">Main</a>
                    <a href="#!" data-activates="slide-out" class="button-collapse"><i class="left material-icons">view_headline</i></a>
                    <a href="#!"><i class="right material-icons">more_vert</i></a>
                    <a href="#!"><i class="right material-icons">view_module</i></a>
                </div>
                <ul id="slide-out" class="side-nav">
                    <li><a href="#!">First Sidebar Link</a></li>
                    <li><a href="#!">Second Sidebar Link</a></li>
                </ul>
            </nav>
            <!-- フローティングボタン -->
            <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
                <a class="btn-floating btn-large waves-effect waves-light red">
                    <i class="large material-icons">mode_edit</i>
                </a>
                <ul>
                    <li><a class="btn-floating red waves-effect waves-light"><i class="material-icons">insert_chart</i></a></li>
                    <li><a class="btn-floating yellow darken-1 waves-effect waves-light"><i class="material-icons">format_quote</i></a></li>
                    <li><a class="btn-floating green waves-effect waves-light"><i class="material-icons">publish</i></a></li>
                    <li><a class="btn-floating blue waves-effect waves-light"><i class="material-icons">attach_file</i></a></li>
                </ul>
            </div>
        </div>
        <div class="main">
            <!-- サブ画面遷移ボタン -->
            <a href="./sub.html" class="waves-effect waves-light btn">Go!!!!!!!</a>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/libs/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="js/libs/materialize.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>
```
sub.html

```html:HTML
<!DOCTYPE html>
<html>
    <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">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link type="text/css" rel="stylesheet" href="css/libs/materialize.min.css"  media="screen,projection"/>
        <title>Sub</title>
    </head>
    <body>
        <div class="app">
            <nav>
                <div class="nav-wrapper">
                    <a href="#!" class="brand-logo">Sub</a>
                    <a href="./index.html" ><i class="left material-icons">skip_previous</i></a>
                </div>
            </nav
        </div>
        <div class="main">
            <a href="./index.html" class="waves-effect waves-light btn">Back!!!!!</a>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/libs/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="js/libs/materialize.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>
```

```js:JavaScript
// Show sideNav
$('.button-collapse').sideNav('show');
// Hide sideNav
$('.button-collapse').sideNav('hide');
$('.button-collapse').sideNav({
    menuWidth: 240, // Default is 240
    edge: 'left', // Choose the horizontal origin
    closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
```

```css:CSS
/*Default Cordova*/
body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#E4E4E4;
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );
    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
    text-align: center;
}

/*Material Icons css*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../img/icons/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(../img/icons/MaterialIcons-Regular.woff2) format('woff2'),
       url(../img/icons/MaterialIcons-Regular.woff) format('woff'),
       url(../img/icons/MaterialIcons-Regular.ttf) format('truetype');
}
 
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
 
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
 
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
 
  /* Support for IE. */
  font-feature-settings: 'liga';
}

/*MyApp CSS*/
.main .btn{
    margin: 48px;
}
```

完成したら実行してみましょう。

```sh:command
cordova add platform android
```

```sh:command
ripple emulate
```
ちなみに実機で試したい方は

```sh:command
cordova run android
```
でOKです。

以上でアプリの完成です。
左上のボタンを押すとサイドメニューが登場、
右下のボタンを押すとフローティングボタンのサブボタンが登場しますよ。

お疲れ様でした！