ionic(cordova) config.xmlを環境(development、production)毎に分ける

以前から気になっていた内容。
ionic か corodova の標準の機能でありそうだけどドキュメント眺めたり検索してもよくわからない。みんな必要な機能な気がするがどうやるのが正しいのだろうか。

解決したかったこととしては以下
・アプリのBundle Identifierやアプリ名を本番用と開発用とで分けたい
・cordovaプラグインでインストールの際にAPIキー等の指定が必要なものをどうするか

今回は前者の話で、それを解決するにはconfig.xmlを環境毎に切り替えられるようにする必要がある。
ionic prepare や ionic build すると各platform以下へconfig.xmlを元にプロジェクトを作成するので、これらが行われる前にconfig.xmlを書き換えることにした。

今回はenvironmentディレクトリを作成して、その配下に以下を用意する。
config.xml.tpl : config.xmlのひながた
config.dev.json : development環境の設定
config.pro.json : production環境の設定

environment/config.xml.tpl

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="${BUNDLE_ID}" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  ・・・

environment/config.dev.json

{
  "BUNDLE_ID": "com.example.dev"
}

environment/config.pro.json

{
  "BUNDLE_ID": "com.example.pro"
}

ionic1ではgulpが使われているので、gulpfile.jsを編集。
また、ひながたをjsonファイルの値で置換するときに、es6-template-strings というモジュールを使ったのでインストールしておく。

$ npm install --save es6-template-strings

gulpfile.js

var fs = require('fs');
var compile = require('es6-template-strings/compile');
var resolveToString = require('es6-template-strings/resolve-to-string');

// config.xml                                                                                                                                                                                                      
var templateData = fs.readFileSync('./environment/config.xml.tpl', 'utf8');
var configFile = process.env.ENV == 'PRODUCTION' ? 'config.pro.json' : 'config.dev.json';
var configPath =  './environment/' + configFile;
var configData = fs.readFileSync(configPath, 'utf8');
var config = JSON.parse(configData);
var compiled = compile(templateData);
var content = resolveToString(compiled, config);
fs.writeFileSync('./config.xml', content);

build または prepareを行う

## 今回は環境変数でdevelopmentかproductionかをわたす
$ export ENV=PRODUCTION
$ ionic prepare

iOSの場合は、xcodeからプロジェクトを開くと、Bundle Identifierが環境毎に書き換わることが確認できた。以上です。

参考URL
https://stackoverflow.com/questions/37816035/using-environment-variables-parameterizing-config-xml

【ionic】ion-list ion-itemをタップしたときのhighlightの無効化

正しいやり方わからないけど、これでできたので自分用にいったんメモしておく

.item.activated.item-complex > .item-content {
  border-color: #FFF;
  background-color: #FFF;
}

【ionic】ionicPopup.promptの入力フォームがキーボードで隠れないようにする

app.js

angular.module('starter', ['ionic'])
.run(function($ionicPlatform, $localStorage, ParentService) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

      // ★ここがデフォルトでtrueなのでfalseに!
      // cordova.plugins.Keyboard.disableScroll(true);
      cordova.plugins.Keyboard.disableScroll(false);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });

これだけか。。以上です

緯度経度の2点間の距離、角度と座標 - GoogleMap

今回はapache cordovaのGoogleMapのプラグインの話だけど、GoogleMapのAPIならきっと同じように取得できると思われる。計算方法とか調べていたが実際にGoogleMapに表示してみるとけっこうずれたりしてうまくいかなかった。で、プラグインのドキュメント見てたらやりたいことがそのまま機能としてありました。。

GitHub - mapsplugin/cordova-plugin-googlemaps: Google Maps plugin for Cordova
GoogleMapの表示の方法は、READMEみればなんとなくわかるので書かない。

2点間の距離
var spherical = plugin.google.maps.geometry.spherical;

var start = { lat: xxx.xxx, lng: xxx.xxx }
var end =   { lat: xxx.xxx, lng: xxx.xxx }

var distance = spherical.computeDistanceBetween(start, end);
2点間の角度
var spherical = plugin.google.maps.geometry.spherical;

var start = { lat: xxx.xxx, lng: xxx.xxx }
var end =   { lat: xxx.xxx, lng: xxx.xxx }

var direction = spherical.computeHeading(start, end);
2点間上の任意の座標
var spherical = plugin.google.maps.geometry.spherical;

var start = { lat: xxx.xxx, lng: xxx.xxx }
var end =   { lat: xxx.xxx, lng: xxx.xxx }

var direction = spherical.computeHeading(start, end);
var distance = xxx;

nextLatLng = spherical.computeOffset(start, distance, direction);

GoogleMapすごい。以上です

【Go】Echo JsonにTemplateから生成したHTMLを埋め込んで返す

今回やりたかったことは以下。
・HTMLのテンプレートを変数等に定義しておく。
・テンプレートを元に動的な部分をHTMLに埋め込む。
・生成したHTMLをJSONにいれてレスポンスとして返す。

package main

import(
  "net/http"

  "github.com/labstack/echo"
)

// ViewData
type ViewData struct {
  Title string `json:"id"`
  Contents string `json:"html"`
}

// レスポンスを表す構造体を定義
type JsonFormat struct {
  Id int `json:"id"`
  Html string `json:"name"`
}

func main() {

  e := echo.New()
  e.GET("/", func(c echo.Context) error {

    var buffer bytes.Buffer
    var html = "<div><h1>{{.Title}}</h1><p>{{.Contents}}</p></div>"
    var t = template.Must(template.New("html").Parse(html))

    if err := t.Execute(&buffer, data); err != nil {
      return echo.NewHTTPError(http.StatusInternalServerError, "Server Error")
    } else {
      return c.JSON(http.StatusOK, Advertise {
        Id: 1,
        Html: buffer.String(),
      })
    }
  })
}

以上です

【redis】データのセットと取得するコマンド

Redisで扱えるデータ型いくつかあるようだけど今回扱うのはString型で単純にKeyとValueをセットできるようにコマンドメモしておく。
配列とかハッシュ型もあるけど、自分の用途だったらjsonを保存してアプリ側でデータをゴニョゴニョするかも。

1つセット

$ set key value

複数セット

$ mset key value key2 value2

1つ取得

$ get key

複数取得

$ mget key key2

全てのキーの一覧

$ keys *

マッチするキーの一覧

$ keys aaa*

削除

$ del key

以上です

glideでlogrusのインストールエラー対応

glideでgorm入れようとしたら突然logrusのエラーが。。。

[ERROR]	Update failed for github.com/Sirupsen/logrus: The Remote does not match the VCS endpoint
[ERROR]	Could not update packages: The Remote does not match the VCS endpoint

意味わからんけど以下対応したら入った

$ rm -rf vendor
$ rm -rf ~/.glide
$ rm glide.lock

glide.yaml

github.com/sirupsen/logrus を
github.com/Sirupsen/logrus に変更

で、以下を実行

$ glide get github.com/jinzhu/gorm

以上です