Corredor

ウェブ、プログラミングの勉強メモ。

ngx-onsenui を使って Angular6 + OnsenUI + Cordova なプロジェクトを立ち上げてみる

HTML・CSS・JavaScript でスマホ向けアプリを作成することを「ハイブリッドアプリ」と呼ぶが、そんなハイブリッドアプリで Android や iOS のネイティブっぽい UI を実現してくれる、OnsenUI というフレームワークがある。

Monaca」を展開する、「アシアル株式会社」という日本の企業が作っている、国産のフレームワークなので、ドキュメント群も日本語が存在し、大変分かりやすい。

OnsenUI 本体はピュアな CSS として利用できる他、ngx-onsenui というパッケージを利用すると、Angular アプリに最適化された各種コンポーネントが利用できる。

今回は Angular6 系のアプリをベースに、ngx-onsenui を使って OnsenUI を組み込み、それを Cordova でビルドして iOS アプリ化してみようと思う。

環境情報

検証した OS は MacOS High Sierra。Angular CLI v6.1.5 を利用してアプリの雛形を作ろうと思うので、Node.js・npm は予め用意しておこう。

$ node -v
v10.7.0

$ npm -v
6.1.0

$ ng -v
Angular CLI: 6.1.5
Node: 10.7.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.5
@angular-devkit/core         0.7.5
@angular-devkit/schematics   0.7.5
@schematics/angular          0.7.5
@schematics/update           0.7.5
rxjs                         6.2.2
typescript                   2.9.2

最後に iOS シミュレータを利用して Angular + OnsenUI + Cordova 製アプリを動作させたいので、Xcode や iOS シミュレータは予めインストールしておくこと。

Angular アプリの作成

まずは Angular CLI でアプリの雛形を作る。

$ ng new ng-cordova-onsen --routing --style=scss
$ cd ng-cordova-onsen

ngx-onsenui のインストール

次に、onsenui 本体と、それを Angular にバインディングする ngx-onsenui をインストールする。

$ npm install -S onsenui ngx-onsenui

インストール後、AppModule にて OnsenModule をインポートし、CUSTOM_ELEMENTS_SCHEMA を設定する。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { OnsenModule } from 'ngx-onsenui';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    OnsenModule,  // ← 追加
    AppRoutingModule
  ],
  providers: [
  ],
  bootstrap: [
    AppComponent
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA  // ← 追加
  ]
})
export class AppModule { }

最後に、styles.scss にて OnsenUI のスタイルシートファイルをインポートする。

// ./src/styles.scss
@import '../node_modules/onsenui/css/onsenui.css';
@import '../node_modules/onsenui/css/onsen-css-components.css';

OnsenUI コンポーネントを使ってみる

ココまでで OnsenUI のインストールは完了したので、試しに ons-button コンポーネントを使ってみよう。

app.component.html に以下のように記述し、$ npm start でブラウザを起動すると、青地に白文字で「Click!」と書かれたボタンが配置されているはずだ。

<ons-button>Click!</ons-button>

クリック時のイベントを設定するなら、<ons-button (click)="doSomething()"> のように記述し、TypeScript ファイルの方に doSomething() メソッドを実装すれば良い。

スマホアプリ風の UI を実現する

今回は OnsenUI をお試しで使うだけなので、ホントにガワだけ実装してみる。app.component.html を次のように作り変えよう。

<ons-page>
  <!-- 上部ツールバー -->
  <ons-toolbar>
    <div class="left">
      <ons-back-button>Back</ons-back-button>
    </div>
    <div class="center">Title</div>
    <div class="right">
      <ons-toolbar-button>
        <ons-icon icon="ion-navicon"></ons-icon>
      </ons-toolbar-button>
    </div>
  </ons-toolbar>
  
  <!-- 下部タブバー -->
  <ons-tabbar>
    <div class="tabbar">
      <ons-tab label="Home" icon="ion-home" active></ons-tab>
      <ons-tab label="Favorites" icon="ion-ios-browsers"></ons-tab>
      <ons-tab label="Settings" icon="ion-ios-search"></ons-tab>
    </div>
  </ons-tabbar>
  
  <!-- 背景色レイヤ -->
  <div class="background"></div>
  
  <!-- コンテンツ -->
  <div class="content">
    <!-- 通常はルータで子ページを表示する -->
    <router-outlet></router-outlet>
    
    <!-- 今回は試しにボタンだけベタで実装した -->
    <p style="text-align: center;">
      <ons-button>Click Me!</ons-button>
    </p>
  </div>
</ons-page>

こんな風に作り、Chrome ブラウザの「レスポンシブデザインモード」などで見てみると、次のように表示される。

f:id:neos21:20180828212013p:plain

かなりスマホネイティブっぽい見た目になったが、全て CSS で実装されている。素晴らしい!

Cordova アプリ化する

最後は、Cordova を使って iOS アプリとしてビルドして、iOS シミュレータで動かしてみよう。

Cordova のグローバルインストール

Cordova 本体はグローバルインストールする必要がある。現時点では cordova@8.0.0 が最新版なので、次のようにインストールする。

$ npm install -g cordova

雛形ファイルのマージ

次に、Cordova アプリの雛形ファイルを手に入れるため、コレまで作業していた ng-cordova-onsen ディレクトリとは別のところに、同名で Cordova アプリを立ち上げてみる。

# 別の一時作業用ディレクトリを作ってそこに移動する
$ mkdir temp-cordova && cd $_

# Cordova プロジェクトを作る
$ cordova create ng-cordova-onsen com.example ng-cordova-onsen
Creating a new cordova project.

こうして生成された ng-cordova-onsen/ ディレクトリ配下から、hooks/res/config.xml をコピーして、先程まで作業していた Angular プロジェクトの方にコピーする。

そしたら、Angular プロジェクト側の ng-cordova-onsen/src/index.html と、Cordova プロジェクト側の ng-cordova-onsen/www/index.html を開く。Cordova プロジェクト側の index.html に記載されているコードの一部を、Angular プロジェクト側に移植する。次のような src/index.html に仕上げる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>NgCordovaOnsen</title>
    <base href="./">
    <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 *; img-src 'self' data: content:;">
    <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="icon" type="image/x-icon" href="favicon.ico">
    <script src="cordova.js"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

いくつかの meta 要素と、cordova.js を読み込むよう変更を入れている。

ココまでできたら、cordova create コマンドで生成したプロジェクトの方は用済み。削除して良い。

Angular プロジェクトの加工

続いて、Angular プロジェクト直下の angular.json を編集する。

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/ng-cordova-onsen",

↑ コレが編集前の抜粋。この outputPath を、www に変更する。

"outputPath": "www",

コレで、npm run build 実行時に成果物ファイルが www/ ディレクトリに出力されるようになる。.gitignore/www も追加しておこう。www ディレクトリはとりあえず存在させておかないと cordova コマンドが動作してくれないので、初回のみは ./www/.gitkeep を作成し、このファイルだけコミットしておくと良いだろう。

次に以下のコマンドを実行し、./platforms/./plugins/ ディレクトリを生成させ、package.json に Cordova 関連のパッケージを追記させる。

$ cordova platform add ios

最後に、package.jsonbuild:ios コマンドを追加しよう。

  "scripts": {
    "build:ios": "ng build --base-href . && cordova emulate ios --target=\"iPhone-SE, 11.4\"",
    // 以下略…

ココで記述した cordova emulate コマンドのターゲットは、次のコマンドで確認できる。

$ cordova emulate ios --list

このコマンドで、そのマシンにインストールされている iOS シミュレータのデバイスとバージョンが分かるので、それを指定する。

package.json 全体としては次のようになるはずだ。

{
  "name": "ng-cordova-onsen",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ios": "ng build --base-href . && cordova emulate ios --target=\"iPhone-SE, 11.4\"",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "cordova-ios": "4.5.5",
    "cordova-plugin-whitelist": "1.3.3",
    "core-js": "^2.5.4",
    "ngx-onsenui": "4.2.2",
    "onsenui": "2.10.4",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.5",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {}
    },
    "platforms": [
      "ios"
    ]
  }
}

iOS シミュレータで起動する

実際に $ npm run build:ios コマンドを実行してみると、Angular ビルド後、./www/ ディレクトリに生成された成果物ファイルを使用して Cordova ビルドが行われ、その後 iPhoseSE のシミュレータが起動する。

f:id:neos21:20180828212010p:plain

実際に iOS 上で動作させると、ホントにネイティブアプリみたいだ。素晴らしい!!

以上

OnsenUI 本体は単純なカスタムエレメントと CSS のフレームワークだし、ngx-onsenui もシンプルな Angular コンポーネントなので、自然に使えるようになるだろう。

これで今までよりネイティブに近い UI を実現できるようになったので、ガシガシ使っていこうと思う。

Monacaで学ぶはじめてのプログラミング ?モバイルアプリ入門編?

Monacaで学ぶはじめてのプログラミング ?モバイルアプリ入門編?

Bash で利用可能なコマンド一覧を出力する compgen コマンド

以前、Bash で利用可能なコマンドを一覧表示するため、環境変数 PATH の中身を ls するようなスクリプトを紹介した。

今回さらに調べてみると、compgen というコマンドで利用可能なコマンドを一覧表示できることが分かったので紹介する。

コマンド 見られるモノ
compgen -a エイリアス (alias と同様)
compgen -b 組み込みコマンド (ビルトイン)
compgen -c 外部コマンド
compgen -d カレントディレクトリのディレクトリ (ls -l | grep ^d 相当)
compgen -e 環境変数
compgen -f カレントディレクトリのファイル (ls -a 相当)
compgen -k 予約語
compgen -v 変数
compgen -A function 関数

ということで、エイリアス・組み込みコマンド・外部コマンド・キーワード・関数あたりが「全部見たいヤツ」になるかと思うので、

$ compgen -A function -abck

を覚えておくと良さそう。

compgen って何のためのコマンドなの?というと、補完候補 (Completion) のリストを生成 (Generate ≒ 出力) するためのコマンドみたい。

仕事に使えるLinuxシェルスクリプト~bashで作る実用サンプル41

仕事に使えるLinuxシェルスクリプト~bashで作る実用サンプル41

デルアンバサダープログラムに選ばれました!Dell XPS 13 2-in-1 開封の儀

以前、Murga の方で PC 関連のアンバサダープログラムを紹介した。

neos21.hatenablog.jp

その中の「デルアンバサダープログラム」にこの度当選して、Dell XPS 13 2-in-1 をお借りできることになった。

f:id:neos21:20181007201015j:plain

↑ 届いた箱。

今回はこの開封の儀をお送りする。


f:id:neos21:20181007201013j:plain

↑ アンバサダープログラムのお決まりごとの他、製品のこだわりを紹介する冊子だが、お借りしたマシンのスペック表を見てみると…

f:id:neos21:20181007201009j:plain

↑ 「Core i7-7Y54」というのは、誤りではないだろうか…?Core i7 なら、恐らく「Core i7-7Y75」が正かと思われる。

f:id:neos21:20181007201921p:plain

↑ 公式サイト上もこの表記。「54」なのは、お隣の「Core i5」の方のことかと。

ただの誤植とは思うが、どんなプロセッサが載っているのかは改めて確認するとしよう。


f:id:neos21:20181007201006j:plain

↑ 先に本体以外の周辺機器を開けてみた。専用タッチペンと、USB-C → USB-A の変換ケーブル。あと電源ケーブルかと思うのだが、USB-C 端子から AC 電源に繋がっていて、コンセントの端子はどこ…?

f:id:neos21:20181007201003j:plain

↑ と思ったら、AC 電源からコンセントまでは、さらに太い電源ケーブルを繋ぐスタイルになっていた。コレは持ち運びすることを考えるとちょっと携帯性が損なわれるなぁ…。

f:id:neos21:20180902200459j:plain

↑ 以前 El Mylar の方で 12インチ MacBook 2017 を購入した時に貼った画像だが、上から Asus ZenBook3、12インチ MacBook、13インチ MacBookPro の AC 電源ケーブル。いずれも AC アダプタをマシンと一緒に持ち運ぶことを考えて、コンパクトに作られている。

コレと比べると、Dell の場合、AC アダプタまでは良かったのだが、そこからコンセント端子に繋がるケーブルが、デスクトップパソコンの電源ケーブルみたいで、太くて取り回しが悪い。2-in-1 スタイルではあるが、外への持ち運びはあまり考えていない、ということなのだろうか?


f:id:neos21:20181007201056j:plain

↑ とりあえず開封の儀に戻る。箱がいちいち高級感漂う。所有欲満たされる… (← 借り物です)。

f:id:neos21:20181007201053j:plain

↑ オープン!おおぉ…!

f:id:neos21:20181007201050j:plain

↑ 床に置いてみた。掴んでみたが、結構軽い。カタログスペックでは約 1.24kg とのことで、これなら全然持ち運べる。

f:id:neos21:20181007201047j:plain

↑ 開いて起動してみたところ。コレはなかなか楽しみである!


まだ届いたばかりなので、これから実際に使い倒してみて、この XPS 13 2-in-1 の良さを確かめてみたい。