ページ

2014年7月20日日曜日

AWSの勉強開始

やっとこさAWSの勉強を開始するようにと思い
とりあえず本を探したらおあつらえ向きの


7/16日発売でAWSのエバンジェリストが書かれている本だったので即買い
AWSの基本的なアカウントの作り方、サーバの構築に必要な内容がまとまっていたので
これから始める人向けの本です。

≪CHAPTER 1≫システム構築をインフラから始めるには
≪CHAPTER 2≫ネットワークを構築する
≪CHAPTER 3≫サーバーを構築する
≪CHAPTER 4≫Web サーバーソフトをインストールする
≪CHAPTER 5≫ HTTP の動きを確認する
≪CHAPTER 6≫プライベートサブネットを構築する
≪CHAPTER 7≫ NAT サーバーを構築する
≪CHAPTER 8≫DB を用いたブログシステムの構築
≪CHAPTER 9≫TCP/IP による通信の仕組みを理解する
≪Appendix A≫パケットキャプチャで通信をのぞいてみる
≪Appendix B≫ネットワークの管理・運用とトラブルシューティング

これらの構成でなっているのですがネットワークを構築する部分に
IPのセグメント分けがありこちらがためになります。

よくわるWordpressのインストール等もあるのでAWSをこれからの人にオススメです

2014年7月13日日曜日

TitaniumでNow Loadingを使ったHTTPClientを実装

スマホアプリを作成する際によくある話ですが
Web通信部分(Ti.Network.createHTTPClient)を利用すると
非同期通信で画面の制御が面倒なことがあるので
これを回避する1つの方法No Loading...を実装してみました。

利用するのは、ActivityIndicatorと呼ばれるのものでこれを利用しバックグラウンドでは
Web通信を画面では、Now Loadingを表示します。

index.js
=========
function doClick(e) {
    var loading = Alloy.createController('loading',{
    handler : function(client, e){
    Ti.API.info("Received text: " + client.responseText);
         alert('success');
    }
    });
    loading.getView().open();
}
$.index.open();
=========

index.tss
=========
".container": {
backgroundColor:"white"
},
"Label": {
top: 30,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000"
}
=========

index.xml
=========
<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Hello, World</Label>
    </Window>
</Alloy>
=========


loading.js
=========
var args = arguments[0] || {};
function showIndicator(e){
    $.activityIndicator.show();
}
var url = "http://www.google.co.jp/";
var client = Ti.Network.createHTTPClient({
onload : function(e) {
    args.handler(this, e);
    $.loading.close();
    $.activityIndicator.hide();
},
onerror : function(e) {
    Ti.API.debug(e.error);
    alert('error');
    $.loading.close();
            $.activityIndicator.hide();
        },
    timeout : 5000
});
client.open("GET", url);
client.send();
=========

loading.tss
=========
".container" : {
    backgroundColor: '#999',
    opacity: 0.6,
    height:Ti.UI.FILL,
    width:Ti.UI.FILL
}
=========

loading.xml
=========
<Alloy>
    <Window class="container" onOpen="showIndicator">
        <ActivityIndicator id="activityIndicator" message="Loading..."/>
    </Window>
</Alloy>
=========

ソースはこのようになっています。
loading自体はモジュールみたいな形で利用します。
順番としては
loadingをopen->load画面を表示->HTTPリクエスト->onload処理->画面を閉じる
が流れです。

意外と簡単にでき応用も利くのでおためあれ

gitに今回作った内容を公開いたしました。
https://github.com/genyasan/ti/tree/master/loading

2014年7月6日日曜日

CentOS 6.5にgit 1.9インストール手順

今更ながらgitを行うとおもいCentOS 6.5に2014/07/06現在最新のgit 1.9.0をインストールする手順です.
使い方は追々・・・
yumで一発で終わるかと思ったらなかったのでソースから最新版をビルド

su -
$ yum install -y zlib-devel perl-devel gettext gcc curl-devel
$ wget https://git-core.googlecode.com/files/git-1.9.0.tar.gz
$ tar xfvz git-1.9.0.tar.gz
$ cd git-1.9.0
$ ./configure
$ make
$ make install
$ git --version
git version 1.9.0
$ cd ..
$ rm -rf git-1.9.0
$ rm git-1.9.0.tar.gz 

手順はシンプルなので後は使いこなすだけ
そこそこ性能がないとmakeは数分かかりました。

Titanium画面遷移のしかた

Tiを利用した画面遷移の基礎的なものを作成してみました。
TiのWindowを利用すると画面遷移が行え親から子を作るようなイメージになります。
イメージをまとめるため簡素なものを作成してみました。

ちょこっとメモをかねて作成




index index2 index3
xml
<Alloy>
  <Window class="container">
    <Label text="index2を開く" onClick="openIndex2">
  </Window>

</Alloy>
<Alloy>
  <Window class="container">
    <Label text="index2を閉じる" onClick="closeIndex2" />
    <Label text="index3を開く" onClick="openIndex3" />
  </Window>

</Alloy>
<Alloy>
  <Window class="container">
    <Label id="param1" top="30" />
    <Label text="argsをチェックする"  top="30" onClick="argsCheck" />
    <Label text="index3を閉じる" onClick="closeIndex3" />
    <Label text="index2と3を閉じる" onClick="closeIndex2and3" />
  </Window>

</Alloy>
tss
".container" : {
  backgroundColor:'#0ff',
  top: 30,
  layout: 'vertical',
}
".container" : {
  backgroundColor:'#f00',
  top: 30,
  layout: 'vertical',
}
".container" : {
  backgroundColor:'#ff0',
  top: 30,
  layout: 'vertical',
}
js
function openIndex2() {
  var index2 = Alloy.createController('index2').getView();
  index2.open();
}

$.index.open();
var args = arguments[0] || {};

function closeIndex2() {
  $.index2.close();
}

function openIndex3() {
  var index3 = Alloy.createController('index3',{window : $.index2, text : "index2の中身を入れることができる."}).getView(); 
  index3.open();
}
var args = arguments[0] || {};

function argsCheck() {
  alert("このメソッドでもargsを参照できる:" + args.text)
}
function closeIndex3() {
  $.index3.close();
}
function closeIndex2and3() {
  $.index3.close();
  args.window.close();
}

// 引数を受け取る.
$.param1.text = args.text;


少し書き方を横着しましたgitとかに上げれればよいのですが現在勉強中。

こちらのソースを実行すると画像のようになるのですが、indexはそのままindex2をopenしているだけです。
Alloyから生成するためには「Alloy.createController」こちらを利用します。
さらに注意点としてopenするときはviewである必要があるので「getView()」メソッドが必要です。

index2のところで、自分をcloseする際には「$.index2.close();」と非常にシンプルになります。
ここはおまじないでよい気がしてきました。

openIndex3の点が面白いと思えるところです。
Alloy.createControllerをする際に引数を渡すことができます。
この引数がindex3のargsに格納され利用できるのですが。

index3内の「$.param1.text = args.text;」これは理解が行いやすいのですが。
あえてalertとcloseIndex2and3をつけた部分です。

clickイベントを実行した際にもargsが生成した際に利用したインスタンスが利用可能な点です。
これにより、alertで前のwindowであるindex2のデータを見ることができます。

closeIndex2and3についても、自信と、index2を同時にcloseすることができるのです。
基本的な点かもしれないですが意外と知らないなと思いフムフムなっとく

現状ものを作るよりも、知る方が多いので苦労します。

2014年7月2日水曜日

Titanium Sqlite対応

TitaniumでDB(sqlite)対応方法です。

Alloyを用いるとmodelと呼ばれる仕組みがあるので、楽にできます.


まずはプロジェクトから右クリックで「New」→「Alloy Model」を選択。


続いて、実際のテーブルにあたるスキーマーを定義そうすると下のような「models」ディレクトリにファイルが出来上がる


とりあえずこれでDBを利用できる状態になる。
exports.definition = {
 config: {
  columns: {
      "name": "text",
      "kana": "text"
  },
  adapter: {
   type: "sql",
   collection_name: "test",
   idAttribute: "name"
  }
 },
 extendModel: function(Model) {
  _.extend(Model.prototype, {
   // extended functions and properties go here
  });

  return Model;
 },
 extendCollection: function(Collection) {
  _.extend(Collection.prototype, {
   // extended functions and properties go here
  });

  return Collection;
 }
};
1行だけ基本のソースから追加しています「idAttribute: "name"」この部分ですが
この行を加えるとPKになるようになっています。
どうやら初期状態では、columnsで定義された項目意外に「id」と呼ばれるPKが自動付与されるみたいです。
外部連携をする場合はPKがあらかじめ決まっている可能性が高いので「idAttribute」は覚えておいた方がよいです。
また、バリデータもこちらに記載できます。 簡単なバリデータであればよいのですが
複雑なものをどのように書くかわかりきっていないのでとりあえず今は放置

とりあえず、Insert,SELECT,DELETE,UPDATEを行います。

INSERT
var testModel = Alloy.createModel("test");
testModel.set({"name" : "弦也", "kana" : "ゲンヤ"});
if (testModel.isValid()) {
   testModel.save();
} else {
   alert("登録に失敗しました.");
}
これで登録ができます。
isValidはバリデーションなので初期ではただtrueが返却されるだけです。

少し応用しJSONのデータを組み合わせます。
var xhr1 = Ti.Network.createHTTPClient({
    onload: function() {
        var json = JSON.parse(this.responseText);
 var count = 0;
 for (var i in json) {
  count++;
  var testModel = Alloy.createModel("test");
  testModel.set(json[i]);
  testModel.save();
 }
    }
});
xhr1.open("GET", "http://localhost/test.json");
xhr1.send();
こういった感じが実用例かと思います。

SELECT
var testModel = Alloy.createCollection("test");
testModel.fetch();
testModel.map(function(test){
    Ti.API.info("name:" + test.get("name") + " kana:" + test.get("kana"));
});
INSERTと異なり、「Alloy.createCollection」を利用している点が注意です。
fetchでデータを取得していますがこれはすべて取得になります。
当然条件を指定したいので次のように記述
var testModel = Alloy.createCollection("test");
testModel.fetch(query : { statement: 'SELECT * FROM test WHERE name = ?', params: ['弦也'] }});
testModel.map(function(test){
    Ti.API.info("name:" + test.get("name") + " kana:" + test.get("kana"));
});
PDOなどでよく見る形式になりました。
このfetchはいろいろな形式で記載できそうなのですがまだ模索中とりあえずこれで対応できるのでよしとしています。

DELETE
var testModel = Alloy.createCollection('test');
testModel.fetch(query : { statement: 'SELECT * FROM test WHERE name = ?', params: ['弦也'] }});
while(testModel.length > 0) testModel.at(0).destroy();
少し面倒だがこのような書き方が一般的みたいです。
while文を利用するのが一番行数が少ない書き方みたいですが
その他何種類かあるのでそちらも随時試してまとめ中。

UPDATE
var testModel = Alloy.createModel("test");
testModel.set({"name" : "弦也", "kana" : "ゲンヤ"});
if (testModel.isValid()) {
   testModel.save();
} else {
   alert("更新に失敗しました.");
}
どうやら、INSERT OR UPDATEと呼ばれることを内部処理されているらしく、PKが合えば更新する使用みたいです。
これが「idAttribute」を利用している理由です。
自動で割り当てられたIDも便利ですがこれでは都合が悪いときがあるので臨機応変に対応です。
UPDATEについては、まだ調べきれていないので自信がないですがこれで動くと思います。

以上AlloyでModelsを利用するです。
もう少し応用編も今後作ってみたいと思います。