月別アーカイブ: 2016年1月

C++によるベクトルと行列の計算クラス

大学の研究で運動機構のシミュレーションをしていた時に作った、ベクトルや行列の計算をするクラスを紹介します。GitHubにあるのでダウンロードしてみて下さい。
https://github.com/shoarai/arith

使い方

ベクトルの計算

ベクトルを含んだ計算を演算子のオーバーロードを使って実現することで、数式のようにスッキリと書けます。例では3次元ベクトルを計算していますが、z成分の値を0にすれば2次元ベクトルの計算も問題なくできます。

#include "arith/src/arith.h"
using namespace arith;
int main()
{
    // 初期化
    Vector vecA;              // x=0, y=0,  z=0
    Vector vecB(1, 10, 100);  // x=1, y=10, z=100
    // 要素の設定
    vecA.set(1, 2, 3);
    // 要素の取得
    double x = vecA.getx();
    double y = vecA.gety();
    double z = vecA.getz();
    Vector vecC;
    // ベクトル同士の加減算
    vecC  = vecA + vecB;
    vecC += vecA;
    vecC  = vecA - vecB;
    vecC -= vecA;
    int val = 10;
    // ベクトルとスカラの乗除算
    vecC  = vecA * val;
    vecC *= val;
    vecC  = vecA / val;
    vecC /= val;
    // 外積
    vecC = vecA * vecB;
    // 内積
    double inner = vecA % vecB;
    // ノルム
    double norm = vecA.norm();
    // 正規化
    vecC = vecA.normalize();
    return 0;
}

行列の計算

次は行列の計算!

#include "arith/src/arith.h"
using namespace arith;
int main
{
    // 初期化
    Matrix matA(3, 2);    // 3行2列行列
    Matrix matB(3, 2);    // 3行2列行列
    // 要素の設定
    matA(0, 1) = 10;
    matB(2, 1) = 20;
    // 要素の取得
    double a01 = matA(0, 1);
    double b21 = matB(2, 1);
    // 行列同士の加減算
    Matrix matC = matA + matB;
    matC += matA;
    matC  = matA - matB;
    matC -= matB;
    Matrix matD(2, 3);
    // 行列同士の乗算
    Matrix matE = matD * matA;
    int val = 10;
    // 行列とスカラの乗除算
    matA  = matB * val;
    matA *= val;
    matA  = matB / val;
    matA /= val;
    // 転置行列
    matA = matD.transpose();
    return 0;
}

正方行列の計算

次は行列の中でも、行と列の数が同じ正方行列の計算です。正方行列にのみ定義されている値を計算できます。

#include "arith/src/arith.h"
using namespace arith;
int main
{
    // 初期化
    SquareMatrix smatA(3);    // 3行3列の正方行列
    Matrix matA(2, 2);
    // 正方行列への型変換
    SquareMatrix smatB = matA;
    // 行列式
    double det = smatA.det();
    // 逆行列
    if (det != 0) {
        SquareMatrix smatC = smatA.invrs(det);
    }
    return 0;
}

IonicによるAndroidアプリ作成の最低限

このページでは、UIフレームワークのIonicを使ったアプリの作成について紹介します。

Ionicのインストール

Ionicとその依存モジュールであるcordovaをインストールします。

$ npm install -g cordova ionic

アプリの新規作成

アプリ名はIonicAppとします。テンプレートは作りたいアプリに近いものを選ぶと楽です。

$ ionic start IonicApp blank

Ionicのテンプレート一覧

実装

実装は作りたいアプリに応じてご自由に!!笑

デバッグ&実行

アプリ内のHTMLやJavascriptなどをPCでデバッグしたい場合、以下のコマンドを実行します。ファイルを更新すると自動でブラウザが更新されるのでとっても便利です。

$ ionic serve

モバイル機器でアプリを実行したい場合、対応するプラットフォームを追加します。iPhoneやiPadで実行したい場合、「android」ではなく「ios」となります。

$ ionic platform add android

追加したプラットフォームを実行します。

$ ionic run android

また、上記PCでの実行と同様に、HTMLやJavascriptを更新した時に、再ビルドなしで実行するためには、以下のコマンドを実行します。「-l」はlivereloadの意味です。このコマンドで実行した場合、HTMLなどのソースはモバイル機器にダウンロードされるのではなく、PCがWebサーバーとなってモバイル機器からアクセスされるようになります。

$ ionic run android -l

アイコンの作成

Ionicのアプリアイコンのファイルはresourcesフォルダ内にあります。icon.pngはホーム画面に表示されるアプリのアイコン画像であり、splash.pngはアプリ起動時に表示されるスプラッシュ画像です。これらのファイルをそれぞれ上書きしてから下記コマンドを実行すると、各プラットフォーム用のアイコンサイズに変換してくれます。

$ ionic resources

APK作成

作ったアプリをAndroidアプリとしてGoogle Playに公開するために、APKファイルを作成します。手順はPhoneGapアプリの公開用APKを作るをご覧ください。

多言語化

アプリが日本語で公開できるレベルになったら、ぜひ英語でも公開しましょう。一度仕組みを作ってしまえば簡単に多言語化できます。
まず多言語化を行うangular-translateと多言語ファイルを外部ファイルとして読み込むangular-translate-loader-static-filesをダウンロードします。

$ ionic add angular-translate
$ ionic add angular-translate-loader-static-files

これらのモジュールをHTMLから読み込みます。

<!-- www/index.html -->
<!DOCTYPE html>
  ...
  <script src="lib/angular-translate/angular-translate.min.js"></script>
  <script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
  ...
</html>

アプリのAngularJSモジュールとして追加します。

// www/js/app.js
angular.module('starter', [
 ... , 'pascalprecht.translate'
])
...

多言語ファイルの読み込み設定と言語の適用を行います。言語の適用はOSに設定された言語を使用し、もしその言語用のファイルがなければ変数defaultLangに入れた言語が適用されます。多言語ファイルはjs/langフォルダ内の言語コード.json(例:ja.json)を使用します。これで多言語化の準備は完了です。対応する言語を増やしたいときは、その言語の用語ファイルを追加するだけです。

// www/js/app.js
...
.config(function($translateProvider) {
  $translateProvider.useStaticFilesLoader({
    prefix: 'js/lang/',
    suffix: '.json'
  });
  var defaultLang = 'en';
  var getLang = function() {
    try {
      return (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0, 2)
    } catch (e) {
      return defaultLang;
    }
  }
  $translateProvider.preferredLanguage(getLang());
  $translateProvider.fallbackLanguage(defaultLang);
})

実際に多言語化するためには、下記のような用語ファイルをlangフォルダに作ります。各メッセージにIDを振ります。

www/js/lang/ja.json
{
  "START": "はじめる",
  "GAMEOVER": "Game Over",
  "RESTART": "もう一度",
  "": ""
}
www/js/lang/en.json
{
 "START": "Start",
 "GAMEOVER": "Game Over",
 "RESTART": "Restart",
 "": ""
}

HTMLからこれらの用語を使うには、translate属性を追加してメッセージIDを指定します。

<!-- www/index.html -->
...
   <button class="button button-assertive" translate>START</button>
...

Javascriptから使うにはtranslateサービスを使います。

// controller.js
app.controller('Ctrl', ['$scope', '$translate', function($scope, $translate) {
  $scope.start = $translate('START');
}]);

終わりに

アプリ作成のために必要最低限のことを突っ走って書いてきましたが、他に必要だと思ったら適宜追記します。
僕自身はIonicを使って2つのアプリを作りました。動作の確認のためなど試しに触って見てください。
ぽりごんのアプリアイコン           Compositionのアプリアイコン