Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

ionic系において、Modal系ガジェットはinputの制御下におくと動かない

ionic系において、Modal系ガジェットはinputの制御下におくと動かない
公式が意図した挙動かは不明ですが……。

実際のところ

たとえば、以下のようなのがあっとします。

<ion-list>
<label class="item item-input item-stacked-label">
<input type="text" placeholder="2010/10/10" ng-model="something">
</label>
</ion-list>

ここで、日付選択のために以下のようにやると……起動しません。

<ion-list>
<label class="item item-input item-stacked-label">
<ionic-datepicker input-obj="something"></ionic-datepicker>
<a class="button button-block button-positive icon-left icon-calender" ng-click="openDatePicker()">日付選択</a>
<input type="text" placeholder="2010/10/10" ng-model="something">
</label>
</ion-list>

【読書メモ】[改訂第4版]SQLポケットリファレンス

読書メモ sql

[改訂第4版]SQLポケットリファレンス

[改訂第4版]SQLポケットリファレンス

SQLのポケットリファレンス第四版です。

SQLの歴史や文法にかるく触れつつ、関数や演算子といった内容の検索ができるようになっています。
扱っているプラットフォームはMySQL、PostgreSQL、SQLite、Oracleなど。

SQLは今まで必要に応じて検索して使ってる感じだったので、
これを機に一度全体を見てみようと思います。

【読書メモ】超画期的木工テクニック集

読書メモ

超画期的 木工テクニック集 ―電動工具に頼らずに熟練職人の技術を再現する―

超画期的 木工テクニック集 ―電動工具に頼らずに熟練職人の技術を再現する―

超画期的木工テクニック集……というタイトルの本です。
www.youtube.com

この動画のように、電動工具なしで垂直の削り出しや複雑な組接ぎをやる方法が紹介されています。
この本で使う基本的道具はノコギリと洋カンナ、特性ガイドの３点。
ダボなどを使う場合は金属ドリルなんかも要るようです。

集合住宅住まいで大きな物音を立てられない場合には特に有用そうです。

ionicでiosのヘッダーが妙に太ましい場合 

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }

    // make it fullscreen on IOS so it has the correct header size.
    ionic.Platform.fullScreen();
  });
})

参考もと

iOs header size is too large - ionic - Ionic

ionicでポップアップ選択画面を実現するionic-modal-select

ionic-modal-selectはionicでポップアップ選択画面を実装できるプラグインです。

動作例を見たい方はこちら。
codepen.io

実際のところ

モーダルから選択すると、その内容でボタンの文字が変わる例を考えます。

環境導入

$ bower install ionic-modal-select

index.htmlに以下を追記。

<script src="lib/ionic-modal-select/ionic-modal-select.js"></script>


制御側のロジックを入れます。
ウチの場合はcontrollerです。

var appControllers = angular.module('starter.controllers', [ ... , ... , 'ionic-modal-select']);

appControllers.controller('HogeCtrl', function ($scope, ... , ionic-modal-select) {
    //...

    //モーダル用
    $scope.someSetModel = "GOGO";
    $scope.selectableNames =  [
	{ name : "Mauro", role : "black hat"}, 
	{ name : "Silvia", role : "pineye"},
	{ name : "Merlino", role : "little canaglia"},
    ];
}

ターゲットのページにポップアップ用のボタンを入れときます。

	    <ion-item>
		<button class="button button-assertive" modal-select="" ng-model="someSetModel" options="selectableNames" option-property="name">
		    {{ someSetModel || &apos;Select it&apos;}}
		    <div class="option">
			<h2>{{option.name}}</h2>
			<p>{{option.role}}</p>
		    </div>
		</button>
	    </ion-item>

プロジェクトは募金式です

募金式なので、プロジェクトが成功したり宝くじが当たったりしたらお金を渡しましょう。

参考もと

Ionic Modal Select - Ionic Marketplace
Ionic modal select demo

ionic のsalesforceテンプレートが動かない場合

文章追記中

$ ionic start mock salesforce
$ cd mock/
$ ionic platform remove ios
$ ionic plugin rm com.salesforce
$ ionic platform add ios@4.2.0
$ ionic plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin#v4.3.1 --force

【必要な人向け】既存システムを導入する

ずっとforce-serverで開発してたけど、いざiosでやったら動かなかった……なんて場合は、以下のように対処します。

$ cp -fr {{YOUR_ORIGIN_APP_ROOT}}/www {{NEW_APP_ROOT}}

inAppBrowser Pluginを使ってionicで外部のページを表示する

inAppBrowser Pluginを使ってionicで外部のページを表示する方法です。

実際のところ

ionic v1の環境を想定します。
ngCordovaとcordova-plugin-inappbrowserが必要です。

$ bower install ngCordova
$ cordova plugin add cordova-plugin-inappbrowser

入ったngCordovaをwww/index.htmlで読み込み

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

ボタンは以下のような感じ。

<a class="button" ng-click="goPage()">ページを表示</a>

controllerでは"$cordovaInAppBrowser"経由で各種動作を行います。

var appControllers = angular.module('starter.controllers', [ "ngCordova", ...]);

appControllers.controller('HogeCtrl', function ($scope, ... , $cordovaInAppBrowser) {
    // ...

    //カレンダー表示
    $scope.goPage = function() {
	var options = {
	    location: 'yes',
	    clearcache: 'yes',
	    toolbar: 'yes',
	    closebuttoncaption: '閉じる'
	};
	var url = YOUR_LINK;
	
	$cordovaInAppBrowser.open(url, '_blank', options)
            .then(function(event) {
		// success
            })
            .catch(function(event) {
		// error
            });
    };

参考もと