AndroidアプリとiOSアプリのレイアウトの作り方、画面遷移の違い

このブログをご覧の皆様、はじめまして

運命浄化！
というワードにピンと来た人は私と良い会話が出来ると思いますｗ

さて、この記事のテーマ分類はAndroidですが、
本日はAndroidとiOSのアプリのレイアウトの作り方や画面遷移の違いについて軽くお話が出来ればな、と思います

アプリで表示される画面、AndroidではActivity、iOSではViewと呼ばれるものに、
ボタンやらテキストやらを配置してアプリを創る事が出来ます。
そして、それらを遷移するための仕組みがAndroidではIntent、iOSではmodalとかpushとかが存在しています。

Androidでアプリを創る際、殆どの人はeclipseを使うことになりますが、
そこでGUIを利用してレイアウトを組み立てることが出来ます。

一方、iOSではStoryBoardを利用することになります。
どちらもGUIでレイアウトを組み立てられますが、ソースコードに手を加える手間が少し違うと思っています。

Androidでは大まかな配置をGUIで置いて、後でxmlを操作する場合が殆どです
ですが、xmlの書式は理路整然とされていると思うので、どの値をいじればいいのかはわかりやすいと思ってます

対するiOSではStoryBoardを利用する場合そこで全ての作業を行うことになります
コードが表に出てくることは殆ど無いと言っていいでしょう
XCordの扱い方に慣れる必要はありますが、コードを勉強せずとも細かなレイアウトが出来るはずです

続いて、同じ画面内で動的なレイアウトをする場合について少し考えてみました
レイアウトの静的な部分は以上の方法で作れますが、動的な部分はどうしてもコーディングの要素が出てきます
Androidの方ではコードでレイアウトを書き換えることが容易に行えると思っています
一方、iOSのStoryBoardではコードに関する部分が表側に出てこないので少し難しいかもしれません

最後に、画面の遷移についてお話をしましょう
Androidでは、Intentという仕組みを利用しています
Activityという駅の間をIntentという電車が走って画面を遷移しているというイメージを持って良いと思います
これはGUIで扱うことは出来ず、コーディングを行うことになります

一方、iOSのStoryBoardでは右ドラッグ一つで画面遷移を創る事が出来てしまいます
このお手軽さは強みと言えるでしょう

しかし、値の受け渡しをするとなると少しお話が違ってきます
AndroidではIntentという電車に値という荷物を遷移前の画面で積んで、遷移後の画面で積み荷を降ろすイメージです
数行付け加えるだけで比較的簡単に出来ると思います

また、遷移後の画面を閉じた際に遷移前の画面に値を渡す際も、
遷移前にIntentに往復運転の指示を出しておいて値を受け取る準備をし、
遷移後の画面が閉じるときに値という荷物を積んで遷移前に戻った時に積み荷を降ろせばOKです

一方のiOSでは、遷移後に値を渡す際にsegueという仕組みを使います
segueというトラックに積み荷をして飛ばすイメージですが、
値の受け渡しがない画面遷移よりはAndroidより手間の差が大きいと思います

さらに遷移後を閉じたときに遷移前に値を受け渡すにはdelegateという仕組みが必要です
遷移前にあらかじめ値を受け取るメソッドを用意しておき、
遷移後が閉じる前に処理を遷移前に委譲して受け渡してから閉じる、ということを行っています
この手間はAndroidよりもはるかに大きいと作って感じました


以上、AndroidアプリとiOSアプリのレイアウトの作り方と画面遷移の違いについて、
個人の意見を多分に含みながら書いてみました
コードでゴリゴリ書くぜ！という人はそれで素晴らしいと思います
が、触れたばかりの人の扱いやすさについて書いてみました

それではまた　運命浄化！

無線LAN「IEEE802.11」とは～ ④

今回は、「IEEE802.11n」について書きます。
/*------------------------------------------------------------------*/

IEEE802.11nとは、2009年9月策定にされた無線LAN規格です。
2.4GHzと5GHzの周波数帯域を用いて最大伝送速度500～600Mbps、スループットで100Mbps
での伝送が可能です。
IEEE802.11a、IEEE802.11b、IEEE802.11gなどと互換性があります。

IEEE802.11nは、IEEE802.11a、IEEE802.11gと同帯域幅を使用する規格でありながら、
従来とは異なる技術を導入することで、伝送効率は4倍程度高まります。

その異なる技術というのが「チャネルボンディング」と「MIMO」です。

●「チャネルボンディング」とは
無線LANの隣り合った2つのチャンネルを束ねて通信する技術です。
1チャンネル分の20MHz幅で通信するところを2チャンネル分の40MHzで通信することで、
伝送速度を2倍以上になります。
　・20MHz幅では伝送速度は最大140Mbps程だが・・・
　　　→チャンネルボンディングにて40MHz幅で通信すると最大300Mbps程になる。

●「MIMO」（multi-input，multi-output）とは
複数のアンテナを使用してデータを同時伝送することにより無線通信を高速化させる技術です。
送信と受信のどちらも複数のアンテナを用意し、同じタイミング、同じ周波数で一度に送信します。

しかし、IEEE802.11n規格に準じた製品だとしても、製品によっては通信速度が異なります。
製品によって通信速度が異なるのは、以下のような理由があります。
　①使用する周波数帯域（20MHzなのか40MHzなのか）が異なっている。
　②チャンネルボンディングに対応している製品ではない
　③アンテナ数が異なる

そのほかに通信速度を上げるには、
　①無線LAN端末/アクセスポイントの暗号化をAESする。(WEP、TKIP等は通信速度低下)
　②5GHz帯を使用するようにして、チャネルボンディングを行うようにする。
などがあるようです。

@e.

Objective-Cのdelegateをblocksで書く

Objective-C（Cocoa、UIKit）の組み込みクラスでは、delegateというパターンが多用されています。
これは、イベントのコールバックメソッドを呼び出し元のクラスに記述し、呼び出し先のフィールドに呼び出し元クラスへの参照を登録するというものです。
（オブジェクト指向でいう「委譲」と構造的には同じものを指していますが、ここではイベントのコールバックに限ったものとしておきます。）

例えばUIActionSheetやUIAlertViewのボタンクリックのコールバック、UITableViewのセル選択時のコールバックなどは、delegateを用います。
また、遷移先の画面で行った何らかの操作を、遷移元に反映させる場合にも使えます。

しかし、例えば一つの画面で複数のUIAlertViewを出し、それぞれボタンクリック時に違う処理を行いたい場合、コールバックメソッド内でtagによる条件分岐などを行う必要が生じ、コードが煩雑になり、処理の流れが見えにくくなります。
そこで、iOS4.0からはblocksと呼ばれる関数オブジェクトがサポートされていますので、これを使ってシンプルにUIAlertViewのコールバックを記述する方法を紹介します。

ここでは、以下のように使えるUIAlertViewのサブクラス、MyAlertViewを作ります。

・・・・・・
MyAlertView* alert=[[MyAlertView alloc]
                        initWithTitle:@"title"
                        message:@"message"
                        delegate:nil
                        cancelButtonTitle:@"cancel"
                        otherButtonTitles:@"ok", nil];

alert.didClick=^(NSInteger buttonIndex){
        //some processes
    };

[alert show];
・・・・・・

今回は押されたボタンのインデックスのみ受け取ることにしますが、もしTextInputつきの場合もサポートし、入力された内容も使いたい場合、ブロックの引数を変更する必要があります。

MyAlertView.hは例えば以下のようになるでしょう。

#import <Foundation/Foundation.h>

@interface MyAlertView : UIAlertView

@property (copy) void (^didClick)(NSInteger);

@end

ブロックリテラルはスタックに領域が確保されるので、呼び出し元で上記exampleのようにブロックを渡しても、そのメソッドが終了したらブロックリテラルも消えてしまいます。
したがって、コールバックのためのblocks propertyを宣言する場合、copy属性を指定する必要があります。

MyAlertView.mでは、UIAlertViewのdismissWithClickedButtonIndexをオーバーライドして、ボタンクリック時のコールバックを実行します。

#import "MyAlertView.h"

@implementation MyAlertView

- (void)dismissWithClickedButtonIndex:(NSInteger)buttonIndex animated:(BOOL)animated
{
    if(self.didClick){
        self.didClick(buttonIndex);
    }
    [super dismissWithClickedButtonIndex:buttonIndex animated:animated];
}

@end

これで、blocksでコールバックを処理するMyAlertViewができました。

ただし、呼び出し側が以下のような構造のときは注意が必要です。

ブロックリテラル内でインスタンス変数にアクセスすると、それをメンバーに持つオブジェクトのretainCountがインクリメントされるという性質があります。
従って、MyClass -> myAlert -> ブロック -> MyClass というリテインサイクルが発生し、メモリリークの原因となります。
こういった場合、Xcodeはちゃんと警告を出してくれますが、blocksを使う際は保持について特に気をつける必要があります。
このケースでは、従来通りdelegateを使えば解決できます。

このように、blocksを使うとよりシンプルにコールバックを記述できます。
同じ方法でUIActionSheetやUIViewController同士の値の受け渡しも行えますので、ぜひ活用してみてください。

jQueryの繰り返し処理

jQueryの繰り返し処理について書きます。
以下のhtmlのdiv要素に繰り返し処理で要素を追加します。

<div id="divId"></div>

var list = [ 'aaa', 'bbb', 'ccc' ];
var $div = $('divId');
$.each(list, function(i, value) {
    $div.append('<input type="text" id="textId' + i + '" value="' + value +'">';
});

配列ではなくjQueryオブジェクトの場合、以下のように記載することもできます。
また、コールバック関数の引数は省略でき、valueの変わりにthisを使用できます。

var list = [ 'aaa', 'bbb', 'ccc' ];
var $div = $('divId');
var i = 0;
$list.each(function() {
    $div.append('<input type="text" id="textId' + i + '" value="' + this +'">';
    i++;
});

いずれの場合もhtmlは以下のようになります。

<div>
    <input type="text" id="textId0" value="aaa">
    <input type="text" id="textId1" value="bbb">
    <input type="text" id="textId2" value="ccc">
</div>

iphone キーボードに立体感のあるボタンを追加する

UITextField、UITextViewのキーボードにボタンを追加する方法です。
更に、ボタンにグラデーションをかけます。
ボタン画像を作るのは面倒くさい、かといって背景色の単色だと味気ないと思った時に。

まずはボタン追加の方法から。
UITextField、UITextViewのinputAccessoryViewプロパティでViewを代入し、ボタンを配置します。

UIView view = [[[UIView alloc] initWithFrame:CGRectMake(0,0,320,30)] autorelease];
view.backgroundColor = [UIColor blackColor];
//作成したボタンを追加[view addSubview:button];
//UITextFieldに代入
textField.inputAccessoryView = view;

こうすることでキーボードの上にボタンが配置されます。

次はグラデーションボタンの作成。
今回はUIbuttonを継承したGradientButtonクラスを作成し、drawRectメソッドを使います。

- (void)drawRect:(CGRect)rect {
    //コンテキスト取得
    CGContextRef c = UIGraphicsGetCurrentContext();
    CGFloat width = self.bounds.size.width;
    CGFloat height = self.bounds.size.height;
    //カラースペースの管理構造体
    CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
　　//グラフィック状態を保存
    CGContextSaveGState(c);
    //色の割合0～1の数値
    CGFloat locations[2] = {0.0, 1.0};
    //色数
    size_t num = 2;
    グラデーションの構造体
    CGGradientRef gradient;
    CGFloat components[8] = {0.9, 0.9, 0.9, 1.0, 0.412, 0.412, 0.412, 1.0};
    //CGGradientCreateWithColorComponents(CGColorSpaceRef,rgb色の配列,色の割合,色数)
    gradient = CGGradientCreateWithColorComponents(space, components, locations, num);
    
    CGPoint startPoint = CGPointMake(width/2, 0.0);
    CGPoint endPoint = CGPointMake(width/2, height);
　　//2点を直線的に描画
    //CGContextDrawLinearGradient(CGContextRef,CGGrandientRef,開始位置,終了位置,
    CGContextDrawLinearGradient(c, gradient, startPoint, endPoint, 0);
    //保存した状態に戻す
    CGContextRestoreGState(c);

    [super drawRect:rect];

あとはGradientButtonをメインで呼び出せば完成です。
また、setHighlightedメソッドで押した時の色にもグラデーションをかけれます。

それでは今回はこれにて。| 壁 |д･)

ちなみにinputAccessoryViewをinputViewにすると追加したボタンのみが表示されるので、独自のキーボードも作れます。