2017-11-19

ionic state resetとrestoreの違い

それぞれのヘルプをみてみる

$ ionic --help
reset   ・・・ Clear out the platforms and plugins directories, and reinstall plugins and platforms
restore ・・・ Restore the platforms and plugins from package.json

reset はplatformディレクトリとpluginsディレクトリをクリアーとある。
ionic plugin add するとリポジトリからpluginsディレクトリにダウンロードしなおして、さらにplatform以下へプロジェクトを作り直す。

restoreの場合は、既存のpluginsディレクトリからpackage.jsonの内容を元にplatform以下へプロジェクトを作り直す。
pluginsディレクトリ自体もgit等で管理している場合はrestoreで。管理外の場合は、resetする必要があると覚えておけばとりあえず良いかな。

以上です

2017-11-18

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

cordova ionic javascript ハイブリッドアプリ

以前から気になっていた内容。
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

2017-11-17

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

ionic

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

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

2017-11-15

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

ionic cordova javascript

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();
    }
  });

これだけか。。以上です

2017-11-10

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

cordova javascript

今回は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すごい。以上です

2017-10-29

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

Go Echo

今回やりたかったことは以下。
・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(),
      })
    }
  })
}

以上です

2017-10-29

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

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

以上です