2016年4月26日火曜日

ionic2でunderscorejsを使用する

ionic2でTypeSciprtで開発している場合、underscorejs[lodash]をただ使おうとすると、
Cannot find name '_'　
と出ると思います。

事前準備

事前にtypingsを入れておく必要があります。
npm install -g typings

underscorejsをいれる

npm install underscore --save

underscorejsの型定義ファイル作成

typings install underscore --ambient --save

typings/browser/ambient/underscore/index.d.tsが作成されます

tsconfig.json設定

filesへmain.d.tsを追加
"files": [
"typings/main.d.ts"
],

undescorejs使用

使用したいファイルで読み込みます。

import * as _ from 'underscore';

上記だと全ての関数が読み込まれますが

import "" from 'underscore';
のようにして個別にも読み込めるようです。

2016年4月25日月曜日

ionic2 searchbarでエンター押下時に検索

<ion-searchbar [(ngModel)]="searchQuery" (input)="searchItem($event)"></ion-searchbar>

上記の場合はキーを押下時にsearchItemが呼ばれます。既にあるリストをフィルタする場合などは良いのですが、サーバーに呼び出しを行いたい場合は頻繁に負荷をかけることになるのでエンターを押した場合のみ呼び出したい場合もあると思います。

inputではなくsearchイベントを使うことで解決できます。(ドキュメントには未記載)

<ion-searchbar [(ngModel)]="searchQuery" (search)="searchProduct($event)" ></ion-searchbar>

input,searchイベント共に呼ばれる関数内でモデルとしてバインドされているsearchQueryを使用してはいけないようです。関数が呼ばれた時点ではまだ値の同期が終わっていない場合がありました。
したがって以下のように関数に渡しているeventから値を取得する必要があります。

inputの場合
searchItem = function(event){
//eventがsearchbarなので
var query = event["value"];
}

searchの場合
searchItem = function(event){
//eventはEventオブジェクトなので
var query = event["target"]["value"];
}

2016年4月24日日曜日

ionic2 ページ遷移でパラメータを渡す

リストページ-詳細ページのページ構成などでパラメータ(idなど)を渡す方法です。

リストページ側
pushの第２引数で渡します。ページを差し込む他のメソッドでも引数の順番は違えど渡せます。

this.nav.push(DetailPage,{itemId:item.id});

詳細ページ側
NavParamsを使って取り出します。

import{NavController,NavParams} from 'ionic-angular';

constructor(navParams: NavParams) {
this.itemId = navParams.get('itemId');
}

2016年4月23日土曜日

ionic2を始める

ionic2をnpmでインストール

npm install -g ionic@beta

cordovaをインストール(入っていない場合)

npm install -g cordova

ionic2プロジェクトを作成

(TypeScript使用)
ionic start ionic-sample --v2 --ts
(JavaScript使用)
ionic start ionic-sample --v2

ionic2のサンプルなどはTypeScriptで記載されているので type scriptを使用したほうが良いかと思います。

サーバーを起動

cd ionic-sample

ionic serve

ブラウザが立ち上がります。liveloadが有効になっているのでコードを変更すると自動的コンテンツが変わります。liveloadをoffにする場合は ionic serve --nolivereload でサーバを起動します。

ターゲットデバイス追加

作成したいアプリのデバイスを追加します。このあたりのコマンドはcordovaがionicに置き換わっただけです。

ionic platform add android --save

ionic platform add ios --save

デバイスで実行

ionic run android --device

ionic run ios --device

ionic2の感想

動作速度
ionic2になりAndroid,iOSそれぞれのネイティブの見た目に近づきました。Angular2となりパフォーマンスも向上されたはず(?)です。

しかしながら、心なしか旧バージョンより動作が遅いような気がしてしました。

開発
ionic2のAPIは分かりやすくリファレンスを参照して必要なコンポーネントを使うだけなので学習コストは低くかったです。
むしろAngular2とTypescriptに慣れるのに４、５時間かかりました。TypeScriptを使用使っていくべきかどうかはもう少し使ってみて判断したいと思いました。

まだまだionic2もangular2もベータ版なので今後の動きに注目して参りたいです。

2016年4月20日水曜日

developer.microsoft.comの不具合対処

Windowsアプリを公開する上で必ずアクセスすることになるMicrosoftの開発者サイトdeveloper.microsoft.com　は残念ながらChromeなどのブラウザでアクセスすると私の環境では不具合が頻発します。いくつか対応策が見えてまいりましたので記載しておきたいと思います。

developer.microsoft.comページは機能していません

上記の場合はCookieを削除するのが手っ取り早く治ります。

Service Unavailable - Zero size object

ログインすると下記のようなサーバーエラーが出る場合、microsoftのcookieを削除し、ログイン画面でログインする前に・・・をクリックしてsign outを行ってからアクセスすると入れる場合があります。

アプリの紹介画像がアップロードできない場合

一見アップロードされたように見えますが、保存ボタンを押しても実は保存されていません。文章などは保存されているので見落とす場合があるので注意が必要です。
時間を置いてアップロードするか他のブラウザを使用するとアップロードできます。

2016年4月14日木曜日

Cordova Windows 4.3.2はストアアプリビルドで不具合

StartPage周りで不具合の多いCordova Windowsですが、ver4.3.2はストアアプリ向けのビルドを行うまではいいのですが、いざMicrosoftに申請するとコンテンツが表示されないとリジェクトされてしまいました。
普段は見ない認定キットの認定中の画面を見ていると確かに画面が表示されていません。(ただし認定は全て合格する)
レジュームに問題はありますがまだ4.3.0を使い続けるのが良さそうです。

2016年4月5日火曜日

CordovaでOAuthを利用する(GoogleID利用編)

ng-cordova-oauthを使ってCordovaアプリでOAuthを利用してみます。このライブラリはAndroid,iOS,Windowsへ対応しています。

Googleアカウントでログインしてみます。

bowerやリポジトリからダウンロードするなどしてファイルを読み込みます。
<script src="lib/ng-cordova-oauth/ng-cordova-oauth.min.js"></script>