iPadのSplitViewの作り方

こんにちは、@yoheiMuneです。
今日は、iPadアプリケーションではよく見る、SplitViewの作り方を学んだので、ブログに残しておきたいと思います♪(´ε｀ )

SplitViewとは何？

SplitViewとはiPad特有のViewの一つで、ひと画面で操作用のView（左）と表示用のView（右）を表示する事のできるViewです。以下のような画面ですね。

このSplitViewは、横向きの場合には上図のような表示になり、立て向きの場合には、操作用のViewは非表示になります。

SplitViewを作成して表示する

SplitViewを表示するには、以下2つの方法があります。

• アプリケーション作成時にSplitViewのアプリケーションを選んで作成する
• プログラムでSplitViewを作成する

上記2つの方法のうち、上側は特に難しくないので、下側のプログラムで作成する方法をこのブログでは記載したいと思います。

プログラムでSplitViewを作成するには、アプリケーションのUIApplicationのDelegate（通常、XCODEプロジェクト名 + AppDelegate）の以下のメソッドに、SplitViewを作成するコードを記述します。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

上記のメソッド内で、以下のようにするでSplitViewを作成することが出来ます。
１、UISplitViewControllerのインスタンスを作成する。初期化時に特に処理が必要ないため、initメソッドでインスタンスを作成する
２、SplitViewでは2つのViewを利用するため、それぞれViewのViewControllerを作成する
３、２で作成したViewContollerをSplitViewControllerに追加する。追加するViewControllerは必ず2つである必要がある。1つでも3つでもだめです
４、SplitViewのインスタンスをwindowのサブビューとする事で、画面に表示する

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

// １、SplitViewControllerのインスタンスを作成する	
UISplitViewController *spVc = [[UISplitViewController alloc] init];

// ２、SplitViewの左側タブ用のViewControllerを作成する
UITableViewController *vc1 = [[SplitLeftViewController alloc] initWithNibName:@"SplitLeftView" bundle:nil];
// ２、SplitView右側タブ用のViewControllerを作成する
UIViewController *vc2 = [[SplitDetailViewController alloc] initWithNibName:@"SplitDetailView" bundle:nil];


// ３、SplitViewControllerに左側用のViewController, 右側用のViewCotnrollerを設定する
spVc.viewControllers = [NSArray arrayWithObjects:vc1, vc2, nil];

// ４、画面に表示する
[self.window addSubview:spVc.view];
[self.window makeKeyAndVisible];

return YES;
}

SplitViewを作成する上で、注意するや考慮する点があります。

• SplitViewに登録する2つのViewControllerは、どちらも縦横向きに対応していないと、デバイスの向きが変わっても、SplitViewの向きは変わらないので注意！！
• SplitViewに登録する2つのViewのサイズは、表示する際に、自動調整されます。

最後に

今日は、SplitViewの表示まで学びました(*´∇｀*)次は、SplitViewの向きが変わった場合や、2つのViewの動作連係など、SplitViewの使い方をもっと学びたいなぁ。

最後に、以下は関連ページです。参考になれば幸いです。

• UIImageの画像を切り抜くには
• スクロールビューを使ってみた
• iPhoneアプリで広告を表示するには
• UIViewにタップした際のイベントを登録する
• CoreGraphics 線の太さ・色・形状を変える
• iPhoneのUISliderを使う方法
• UILabelをプログラミングで作成する

UIImageの画像を切り抜くには

こんにちは、@yoheiMuneです。
今日はiPhoneアプリケーション作成において、画像の一部を切り抜く方法を学んだので、ブログに残しておきたいと思います。
今日はライトなネタ♪(´ε｀ )

まずは、画像を読み込んで、UIImageオブジェクトを作る

UIImage *aImage = [UIImage imageNamed:@"doc.png"];

アプリケーションのルートフォルダに保存してある「doc.png」という画像ファイルを読み込んで、UIImageのオブジェクトを作成します。簡単簡単(*´∇｀*)

続いてCoreGraphicsフレームワークの画像であるCGImageRefを作成する

CGImageRef wholeImageRef = [aImage CGImage];

UIImageのオブジェクトの持つCGImageプロパティを取得します。ここも簡単。

そーしたら、画像を切り抜いて、切り抜き後のCGImageRefを取得する

float w = wholeImageRef.size.width;
float h = wholeImageRef.size.width;
CGRect rect = CGRectMake(w/4, h/4, w/2, h/2); // 真ん中部分を切り抜く
CGImageRef partImageRef = CGImageCreateWithImageInRect(wholeImageRef, rect);

ここでは、「CGImageCreateWithImageInRect」という関数がみそですね。

最後に、CGImageRefからUIImageRefに変換して、不要になったメモリを破棄する

UIImage *smallImage = [UIImage imageWithCGImage:partImageRef];

[aImage release];
CGImageRelease(wholeImageRef);
CGImageRelease(partImageRef);

最後に

画像の切り抜きは調べました。上記の関数にたどり着くまで、時間がかかったー（；￣ェ￣）でも出来て良かった。画像編集出来ると、楽しいですね。

以下は関連ページです。参考になれば幸いです。

• スクロールビューを使ってみた
• iPhoneアプリで広告を表示するには
• UIViewにタップした際のイベントを登録する
• CoreGraphics 線の太さ・色・形状を変える
• iPhoneのUISliderを使う方法
• UILabelをプログラミングで作成する
• iPhone Mapの地点を扱う3つの方法

スクロールビューを使ってみた

こんにちは、@yoheiMuneです。
今日はiPhoneアプリケーションにおいて、スクロールビューを使ったアプリ作成の方法を学んだので、ブログに残しておきたいと思います。

スクロールビューとは

スクロールビューとは、iPhoneの画面には収まりきらない内容（画像など）を表示する際に利用すると便利な、Viewの一つです。ドラッグして内容をスクロールしたり、ピンチジェスチャーで内容の拡大縮小を行うことが出来ます。

スクロールビューの構造

スクロールビューは、スクロールを実現するUIScrollViewと、表示する内容を保持したUIViewの2つで構成されます。表示する内容が複数ある場合には、UIScrollView1個と、表示内容複数個の構成もありです。
UIScrollViewのサイズはiPhoneの画面サイズ以内として、表示内容はUIScrollViewのサイズ以上とすることで、スクロールするビューを表現出来ます。以下がそのイメージ。

まずはUIScrollViewを追加する

UIScrollViewをInterface Builderかプログラムから作成します。今回は、Interface Builderから作成してみました。

この際に、ズーム可能な範囲を指定します。Zoom MinとZoom Maxです。
その他にも、スクロール可能方向や、減速速度の設定など色々と設定が可能です。UIScrollViewの設定内容は、UIScrollView Class Referenceを参照して下さい。
あっもちろん、Interface Builderで設定したUIScrollViewとUIViewControllerのviewまたは、定義した変数との関連付けを行って下さい。

続いてスクロールするコンテンツを設定する

スクロールするコンテンツをプログラムで追加します。以下は、UIViewControllerのviewDidLoadedメソッドで、Viewが読み込まれた時点で、表示するコンテンツを生成して、UIScrollViewに設定しています。

UIImage *aImage = [[UIImage imageNamed:@"sea001.jpg"] autorelease];
scrolledView1 = [[[UIImageView alloc] initWithImage:aImage] autorelease]; // scrolledView1 is a field var.
self.sView.contentSize = scrolledView1.frame.size;
[self.sView addSubview:scrolledView1]; // sView is UIScrollView's instance.

ここでは画像を読み込んで、UIImageViewのインスタンスを作成しています。
そして次に、UIScrollViewにスクロール範囲を指定する必要があるので、読み込んだUIImageViewのサイズをスクロール範囲として設定しています。
最後に、sViewという変数(UIScrollView)に、上で作成したUIImageViewを追加する事で、表示するコンテンツをUIScrollViewに設定しています。

さて起動

上記作業が終わったらもう動きますので、起動してみます。スクロールビュー上でドラッグする事で、コンテンツが動くはずです。

つづいてズーム対応

ピンチジェスチャーでズームを行うには、UIScrollViewのデリゲートを設定する必要があります。デリゲートの以下メソッドで、ズーム対象のコンテンツ（上記ではUIImageView）を指定します。

• (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

実装例は以下となります。
ヘッダーファイルでは、デリゲートを指定します。

#import <UIKit/UIKit.h>
@interface ScrollViewController : UIViewController 
  <UIScrollViewDelegate> {
  UIScrollView *sView;
  UIView *scrolledView1;
}
@end

実装ファイルでは、デリゲートのうち、必要なメソッドの振る舞いを記述します。

#pragma mark -
#pragma mark UIScrollViewDelegate implementation
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
  return scrolledView1;
}

ズーム対象のView （ここでは画像表示するView）を返します。

また、Interface Builderでは、設定しているUIScrollViewのデリゲートを設定します。これ忘れると、もちろん動かなーい(*´∇｀*)

さてさてもういっかい起動

起動してピンチジェスチャーをすると、なんとズーム出来るじゃ無いですか。拡大縮小範囲は、最初に設定したZoom Min / Maxです。

その他に、ScrollViewで設定する必要があるかもしれないこと

以下は、必要に応じて設定する必要があるかもです。その場合には、Scroll View Programming Guide for iOSを参照してみて下さい。

• 縦スクロールのみ / 横スクロールのみにしたい
• UIScrollView内で表示するコンテンツで、上下左右に余白を取りたい
• スクロール時に表示されるスライダー(indicator)のスクロール可能範囲を調整したい
• 拡大縮小率を指定したい
• 拡大縮小を禁止したい

最後に

スクロールビューは、狭いiPhone画面上をより広く使うことが出来る、魅力的なViewですね。活用したアプリを作れると、便利アプリが作れルカも知れません♪(´ε｀ )

以下は関連記事です。ご参考になれば幸いです。

• iPhoneアプリで広告を表示するには
• UIViewにタップした際のイベントを登録する
• CoreGraphics 線の太さ・色・形状を変える
• iPhoneのUISliderを使う方法
• UILabelをプログラミングで作成する
• iPhone Mapの地点を扱う3つの方法
• iPhone Mapを扱ってみよう

GIMP2の入門から脱初心者へ

こんにちは、@yoheiMuneです。
GIMP2を使い始めました。iPhoneアプリやWebアプリで利用する画像を作るために、GIMPを。はじめは使い方がチンプンカンプンでしたが、だんだんと使えるようになると楽しい(*´∇｀*)色々とカッコいいのが作れたらイイなぁ。
さて今回のブログは、自分がGIMPを使い始めて、色々な技？を学んだサイトや動画を紹介したいと思います。これだけでチンプンカンプン状態からは、かなり使えるようになりました。

GIMPの始め方

GIMPは以下のサイトからダウンロード出来ます。フリーですが、かなり高機能なアプリらしいです。まだそんなに使いこなせていませんが、凄いらしい(･o･)ゞ

http://www.gimp.org/

GIMPの入門

GIMPで最初によろめくポイントは、たくさんのツールがあるところ。各種ツールの説明は、以下サイトが分かりやすかったです。

http://gimphajime.web.fc2.com/

あと、レイヤーという考え方。最初はよくわかりませんでしたが、上記サイトで学ぶことが出来ました。
http://gimphajime.web.fc2.com/gimplayer1.html

色々作ってみたくなったら。GIMP脱初心者へ。

以下のサイトや動画で、GIMPの様々な使い方を学ぶことが出来ました。それぞれの作品作りの中で、学ぶ事が多かったです。選択する方法や陰をつける方法。幻想的な風景を作る方法など、どーやって作るんだろう？という疑問がたくさん解決出来ました。(((o(*ﾟ▽ﾟ*)o)))

オーラ系画像の作り方

http://freesquare.web.fc2.com/g_aura.htm

How to Make a Battery Icon in Gimp

これは凄い。選択範囲の仕方とかその他色々とか参考になりました。

CG背景講座［夜空講座］

幻想的っぽい背景の描き方

5分でわかるGIMPで描く幻想的なCG -Fantastic CG created by GIMP in 5 min-

東京幻想（雲の描き方）

Photoshop CS4 Tutorial: Create a Colorful Aurura Effect

Photoshopのチュートリアルですが、GIMPにも凄く参考になります。

東京幻想（木の描き方）

東京幻想（草の描き方）

GIMPでスライム作ってみた（5分）.ogv

最後に

GIMPやPhotoShopはサンプルが色々とあって、Webで簡単に学べるのがイイですね。自分でもドンドンと作れるようになれるよう、ガンバらねば(＾ｰ^)ノ

iPhoneアプリで広告を表示するには

こんにちは、@yoheiMuneです。
今日は、iPhoneアプリケーションで広告(iAD)を表示する方法を学んだので、ブログに書きたいと思います。

iPhoneで表示する広告とは

最近の無料アプリでよく見る広告。画面の上や下にちょっとした幅を取って、広告を表示する事が出来ます。iADというそうです。
例えば下の画面では、画面の下部分に広告を表示しています。今回はこの広告表示を行います。

広告は表示したりすることで、広告掲載した人が儲かる仕組みです。どれくらい儲かるかは、アプリ制作者次第(*´∇｀*)

まずはiADを使うためのユーザー登録

iADを使うには、iTunesConnectにユーザー登録する必要があります。その際に、iPhone Developer登録したアカウントでユーザー登録する事で、iADを使う準備が出来ます。以下サイトから、登録出来ます。

http://developer.apple.com/iAD/

次にiAD Frameworkの読み込み

広告を出したいアプリケーションを作成するXCODEプロジェクトに、iAD Frameworkを追加します。これしないと、コンパイル時に「そんなクラスないよ〜」ってエラーが発生します。あと、コンテンツアシストも使えないので、不便不便（；￣ェ￣）

続いてADBannerViewの作成とViewへの追加

ここから本題。広告を表示する為のADBannerViewを作成して、表示したいところに表示します。ADBannerViewはなんと、大きさは既に決まっているようです。iPhoneであれば、縦向き：横320pt, 縦50pt、横向き：横480pt, 縦32ptとのこと。この大きさで後はどこに表示するかを決めるだけですね。
ADBannerViewを作成するには、Interface Builderでもプログラムからでもどちらでも大丈夫そうです。今回は、プログラムから追加しました。

ADBannerView *adView = [[[ADBannerView alloc] initWithFrame:CGRectZero] autorelease];
adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifierPortrait;
[self.view addSubview:adView];

currentContentSizeIdentifierとは、ADBannerViewのサイズを指定しています。上記なら、縦向きの場合のサイズを指定しています。

ADBannerViewのデリゲート設定

ADBannerViewが広告を読み込んだり、エラーが発生したり、広告を全画面に表示したりする際に、呼び出されるデリゲートを設定します。現在使っているUIViewControllerでも良いですし、デリゲード専用のクラスを作成してもイイと思います。今回は、現在使っているUIViewControllerにデリゲートを設定しました。
（IAD_ViewController.h）

#import <UIKit/UIKit.h>
#import <iAd/iAd.h>
@interface IAD_ViewController : UIViewController 
	<ADBannerViewDelegate> {
}

（IAD_ViewController.m）

#import "IAD_ViewController.h"
@implementation IAD_ViewController
〜〜省略〜〜
#pragma mark -
#pragma mark ADBannerViewDelegate implementation
- (void)bannerViewDidLoadAd:(ADBannerView *)banner {
	NSLog(@"bannerViewDidLoadAd: is called.");
}
- (BOOL)bannerViewActionShouldBegin:(ADBannerView *)banner willLeaveApplication:(BOOL)willLeave {
	NSLog(@"bannerViewActionShouldBegin:willLeaveApplication: is called.");
}
- (void)bannerViewActionDidFinish:(ADBannerView *)banner {
	NSLog(@"bannerViewActionDidFinish: is called.");
}
- (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error {
	NSLog(@"bannerView:didFailToReceiveAdWithError: is called. ERROR: %@ %@", [error localizedDescription], [error userInfo]);	
}
@end

各デリゲートメソッドの説明

デリゲートメソッドは全部で４つあるようです。それぞれの使い方を記載します。

■- (void)bannerViewDidLoadAd:(ADBannerView *)banner
これは、広告のロードに成功した際に呼び出されるメソッドです。ここでは、ADBannerViewを非表示から表示に切り替えるなどの実装を行います。今回はログだしだけです。

■- (BOOL)bannerViewActionShouldBegin:(ADBannerView *)banner willLeaveApplication:(BOOL)willLeave
これは、ユーザーがADBannerViewをクリックした際に呼び出されます。戻り値のBOOL値で、広告を開くかどうかを指定することが出来ます。引数のwikkLeaveApplicationは、YESの場合には別のアプリケーションが立ち上がり、NOの場合には現在のアプリケーション内で後続処理が行われます。
このメソッド内では、現在のView上の処理を一時停止するなど、広告を全画面表示する前の準備を行います。

■- (void)bannerViewActionDidFinish:(ADBannerView *)banner
これは、全画面表示された広告の処理が終了した際に、呼び出されるメソッドです。このメソッドが呼び出された後に、別アプリケーション（Safariなど）に処理が移り現在のアプリケーションはバックグラウンドに移るかもしれません。または、ユーザーが広告表示をキャンセルして、現在のアプリケーションがアクティブになるかもしれません。
このメソッド内では、中断していた処理を再開するなどの対応が必要です。

■- (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error
このメソッドは、広告のロードに失敗した場合に呼び出されます。引数のerrorに、エラー情報が含まれています。エラーが発生したら表示を止めたいなど、エラー時の処理を記載します。
なお、広告のロードに失敗しても、その後も広告を読み込もうとします。その結果、広告表示が遅れながらも成功する事も多々あるようです。

参考

参考にしたのは、以下情報です。ありがとうございます。
iAD Programming Guide
ADBannerView Class Reference
ADBannerViewDelegate Protocol Reference

最後に

アプリでアフィリエイトが出来るのは、イイ選択肢ですね。でも広告無くても狭いiPhoneの画面を、広告で一部使うというのも微妙ですね。画面設計は、きっちりやって、広告を表示しても狭いと感じない画面を作成したいですね♪(´ε｀ )

以下は関連サイトです。ご参考になれば幸いです。

• UIViewにタップした際のイベントを登録する
• CoreGraphics 線の太さ・色・形状を変える
• iPhoneのUISliderを使う方法
• UILabelをプログラミングで作成する
• iPhone Mapの地点を扱う3つの方法
• iPhone Mapを扱ってみよう
• iPhone 経緯度から地名を取得する方法を実装してみた

UIViewにタップした際のイベントを登録する

こんにちは、@yoheiMuneです。
今日は、UIViewを拡張せずともタッチイベントを登録する方法を学んだので、ブログに残しておきたいと思います。

UIViewクラスのaddGestureRecognizer:メソッド

このメソッドでジェスチャーを追加することで、Viewをタップした際の動作を追加することが出来ます。以下のような手順で実装します。

UITapGestureRecognizerオブジェクトを作成

どのような動きをするかのジェスチャーオブジェクトを作成します。今回はTapジェスチャーを追加します。

UITapGestureRecognizer *tapGesture = [[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(colorPicker:)]autorelease];

initWithTargetには、タップした際に呼び出すメソッドを持つオブジェクトを、actionには、タップした際のメソッドを指すSelectorを指定します。

UIViewにジェスチャーを追加

上記で作成したジェスチャーをUIViewのaddGestureRecognizerメソッドで追加します。

[aView addGestureRecognizer:tapGesture];

たったこれだけで、簡単にUIViewにタップイベントを追加することが出来ます。簡単ラクチン♪(´ε｀ )

他にも

今回ブログに書いたタップジェスチャー以外にも、色々なジェスチャーを登録出来るようです。以下のが一覧です。

UITapGestureRecognizer	タップ時のイベント
UIPinchGestureRecognizer	ピンチ時のイベント
UIRotationGestureRecognizer	回転した時のイベント
UISwipeGestureRecognizer	スワイプした時のイベント
UIPanGestureRecognizer	パンした時のイベント
UILongPressGestureRecognizer	長押しした際のイベント

参考サイト

上記の内容の詳細は、以下をご確認下さい。
UIView Class Reference
UIGestureRecognizer Class Reference

最後に

UIViewは色々な機能を持っていて便利ですね。ありがたい。もっともっと色々な事を学べるといいなぁ(*´∇｀*)

以下は関連サイトです。ご参考になれば幸いです。

• CoreGraphics 線の太さ・色・形状を変える
• iPhoneのUISliderを使う方法
• UILabelをプログラミングで作成する
• iPhone Mapの地点を扱う3つの方法
• iPhone Mapを扱ってみよう
• iPhone 経緯度から地名を取得する方法を実装してみた
• iPhone 方角を取得するには！？

CoreGraphics 線の太さ・色・形状を変える

こんにちは、@yoheiMuneです。
今日は、CoreGraphicsで線を引く際に、色・太さ・形状を設定する方法をブログに記載したいと思います。

CoreGraphicsで線の色を変える

線の色を変えるには、以下のようなコードを記載します。

UIColor *color = [UIColor blueColor];
CGContextSetStrokeColorWithColor(context, [color CGColor]);

または、RGBαを指定する事でも、色を指定することが出来ます。

CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0);

CGContextSetRGBStrokeColorの引数に設定する内容は以下となります。

引数	内容
context	CoreGraphicsのcontext。作成方法は、こちらを参照ください
red	赤色指定。0.0〜1.0
green	青色指定。0.0〜1.0
blue	青色指定。0.0〜1.0
alpha	透明度指定。0.0〜1.0。1.0が不透明

参照：http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Reference/CGContext/Reference/reference.html%23//apple_ref/c/func/CGContextSetRGBStrokeColor
上記のコードはどちらも線を青色に設定するようにしています。Viewに表現した色を指定するにはUIColorを利用すると便利かもしれません。

線の太さを指定する

線の太さを指定するには、以下のようなコードを記載します。

CGContextSetLineWidth(context, 5.0);

うん、これは簡単。第2引数に線の太さを指定すればOKです。初期値は1。これだとちょっと線は細いので、太めに指定してあげるとユーザーには優しいかも。
参照：http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Reference/CGContext/Reference/reference.html%23//apple_ref/c/func/CGContextSetLineWidth

線の形状を指定

線の曲がり角でどのような形状にするかを指定出来ます。

CGContextSetLineCap(context, kCGLineCapRound);

第2引数のところに、線の形状を指定します。ここでは曲がり角は丸っとさせています。第2匹数に指定出来る値は以下があるようです。

kCGLineCapButt	角を角っとさせる。初期値。
kCGLineCapRound	角を丸っとさせる
kCGLineCapSquare	これは先端を角っと。kCGLineCapButtとの違いは実装してみて試してみて下さい。

参照：http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Reference/CGContext/Reference/reference.html%23//apple_ref/c/func/CGContextSetLineCap

最後に

CoreGraphicsは最初は、なんて難しいんだこんちくしょー（；￣ェ￣）、と思っていましたが、だんだんと自由に使えるようになると面白いですね。次もCoreGraphicsの何かを身につけよう♪(´ε｀ )

以下関連するページです。ご参考になれば幸いです。

• iPhoneのUISliderを使う方法
• UILabelをプログラミングで作成する
• iPhone Mapの地点を扱う3つの方法
• iPhone Mapを扱ってみよう
• iPhone 経緯度から地名を取得する方法を実装してみた
• iPhone 方角を取得するには！？
• iPhone 位置情報取得における４つの注意点（バッテリー）