iPhoneアプリ 世界時計　”Plam+Piece”をリリースしました！

“Palm+Piece”は、iPhoneの回転方向に合わせて、
「東京」「上海」「ロンドン」「ニューヨーク」と、
時刻とデザインが変化する、世界時計です。

また、画面をタップすると、国花が舞い散ります。

詳細はこちら

↓　ダウンロードはこちらから

1. シミュレーターを起動する

パス結構深いです。
「Macintosh HD」→「Developer」→「Platforms」→
「iPhoneSimulator.platform」→「Developer」→「Applications」
→ iPhone Simulator

2. シミュレーターの種類

3種類、シミュレーターが入っています。
・「iPhone」320×480　アスペクト比3:2（3G/GS）※実機は、163ppi
・「iPad」1024×768 　アスペクト比4:3 ※実機は、132ppi
・「iPhone4」960×640　アスペクト比3:2　※実機は、326ppi

3. iPhone4 Safariを起動してみる。

iPhone最適化されたページも、
テキストやレイアウトは高精細モードに対応してますね。
ただ、画像やアイコンは荒くなりますね。

ホームスクリーンのアイコン

iPhone用の52pxと、恐らくiPhone4用に最適化された
高精細モードのアイコンとでは、画質に差が出ますね。

これは、Retinaディスプレイ3.5inch,
iPhone3Gモデルのディスプレイの4倍に当たる326 ppiで
見るとどうなるか、実機で見てみたいですね。

1. 動的にステータスバーを消す、色を変更させる

- (void)viewDidLoad
{
	// スーパー・クラスのメソッドを呼び出す
	[super viewDidLoad];

	//ステータスバー off
	[[UIApplication sharedApplication] setStatusBarHidden:YES];

2. ローディング画面時の、ステータスバーを消す

しかし、上記のやり方だと、起動時にはステータスバーがデフォルトのままなので、全画面で変更したい場合、info.plistを編集しておきます。

XCode の/Resourceフォルダ info.plist を開き、
Information Property List キーの中に UIStatusBarStyle キーを作成する。
(Information Property List 行を control+クリック で Add Row を選択し、キー名を入力)
例）値をUIStatusBarStyleBlackOpaque =起動時からステータスバーの色が黒くなる。

2-1. ステータスバーを消したい場合

2-2. 色や透明度を変更したい場合

key: UIStatusBarStyleのValueの設定内容

下記サイトを参考にさせて頂いて、iPhoneアプリの実機テストのログ。

iPhone実機へのアプリインストールまでの道のり
http://tryout-lab.com/2009/08/26/290.html

1. iPhone Developer Programに加入する
2. CSR作成
3. CSRをiPhone Developers Programで登録し、証明書を取得する
4. デバイス登録する
5. AppIDを登録する
6. Provisioning Profilesを作成する
7. Provisioning ProfilesをXCodeに登録する
8. XCodeでのアプリケーションへの設定
9. iPhone SDKを3.0.1対応にする(今は大丈夫なようです。）
10. 実機で起動

• iPhone開発ガイド – デバイスの管理http://developer.apple.com/jp/iphone/library/documentation/Xcode/Conceptual/iphone_development/128-Managing_Devices/devices.html

1. iPhoneでのキャプチャ取得方法

上記の図のように、「スリープボタン」＋「ホームボタン（□）」を同時に押します。写真を撮る時の音と白い画面がし、写真フォルダに格納されます。

2. Macでの写真の同期方法

USBケーブルで,iPhoneを接続して、Macで「iPhoto」を起動します。左メニューに、iPhoneが表示されているので、選択し、画像を読み込みます。

3.読み込んだ画像

フォルダ「ピクチャ」-「iPhoto Library」に画像が読み込まれています。解像度は、270 × 360ピクセルと、少し大きめです

iPhone Stencil

スマートフォン設計用に、ステンシルを探してたら、リアルステンシルに行き当たりました。簡単に言うと、iPhone UI用の定規。価格は1,980円。

米Design Commission社がデザインワークのために製作したiPhoneステンシル。
iPhoneアプリケーションのさまざまな企画やプロトタイプアイディア、
U画面遷移や画面デザインのUI設計のペーパーモック作成などに役立ちますね！

よし、これは明日、経費で買ってもらうぞ！・・・落ちるわけないですね！

昨年、Googleが7億5千万ドルでM&AしたAdMob社ですが、
Androidのインプレッション数は、2倍になったそうです(2009/01/15)
http://jp.techcrunch.com/tag/admob/

iPhoneアプリだけでなく、webにも対応してるとのことなので、
IDEA*IDEAさんの記事を参考にさせて頂きながら、
Webサイトに入れてみました。

AdMobに、登録します。

AdMobサイトに行き、
「今すぐスタート」ボタンを押します。

登録情報を入力します。

登録メールに、認証メールが送信されるので、メールを開いて、URLをクリックし、登録を完了させます。

サイトを追加する

「サイト及びアプリケーション」ー「サイト/アプリケーションの追加」を選択します。

「サイトまたはアプリケーション タイプの選択」から「iPhone用サイト」を選択します。

広告を貼るサイトの情報を入力します。広告の色なども選択できます。

次に進むと、広告のJSコードが表示されます。

広告コードのサンプル

<script type="text/javascript">
var admob_vars = {
 pubid: '*******', // publisher id
 bgcolor: '333333', // background color (hex)
 text: 'eeeeee', // font-color (hex)
 test: true// test mode, set to false if non-test mode
};
</script>
<script type="text/javascript" src="http://mm.admob.com/static/iphone/iadmob.js"></script>

注意）

 test: false// test mode, set to false if non-test mode

デフォルトだと、「test:true」になっていて、テストモードで課金されなくなっているので、「test:false」に変更します。

iPhoneサイトの、広告を挿入したい場所に、広告コードを埋めます.

wptouch/themes/default/header.phpに広告コード埋めます。

次の例は、タイトルヘッダーと、Searchの間に、広告を入れた時の例です。
特に、どこに埋めても良いようなので、入れたい位置にいれてください。

	</div>
</div>
<!-- AdMob -->
<div class="admob-area">
<script type="text/javascript">
var admob_vars = {
 pubid: 'xxxxxxxxxxx', // publisher id
 bgcolor: '333333', // background color (hex)
 text: 'eeeeee', // font-color (hex)
 test: false // test mode, set to false if non-test mode
};
</script>
<script type="text/javascript" src="http://mm.admob.com/static/iphone/iadmob.js"></script>
</div>
<!-- /AdMob -->
<div id="drop-fade">
	<?php if (bnc_is_search_enabled()) { ?>
    	<a id="searchopen" class="top" href="#" onclick="bnc_jquery_search_toggle(); return false;"><?php _e( 'Search', 'wptouch' ); ?></a>
	<?php } ?>

ついでに、style.cssも加えました。

/* for AdMob */
admob-area {
        width: 100%;
	height: 48px;
	display:block;
}
/* end for AdMob */

そして、ついでに、解析コードを、footer.phpに加えます。
PHPの場合、なぜか、最後の「?>」が抜けていて、そのまま貼ると
エラーになるので要注意。

自分は、GoogleAnalyticsも使用しているので、その解析コードも挿入しました。

さて、これでAdMob広告の挿入は完了です！
iPhoneから接続して確認してみてください。

※wptouchプラグインをアップグレードすると、/themesファイル内も
　上書きされてしまうので、バックアップは取っておいた方が良いです。

UiKitフレームワークに含まれている、UINavigationControllerを使用した、
ナビゲーションUIについての私的メモです。InterfaceBuilderなどでの設定の説明は省いてます。

UINavigationControllerクラス

NSObject
　　　|
　　　+–UIResponder
　　　　　　|
　　　　　　+–UIViewController
　　　　　　　　　|
　　　　　　　　　+–UINavigationController

1. UINavigationControllerクラスとは

オブジェクトの階層の外観を管理する、ナビゲーションバーのための特殊なコントローラ。アプリケーションに提供されたビューコントローラを使用して、ナビゲーションバーの設定やビューを描画することが可能。各ビューコントローラは、ナビゲーションバーのナビゲーションアイテムを持っています。

2. UINavigationCotrollerのナビゲーションでの働き

• UINavigationControllerオブジェクトは複数のUIViewCotrollerオブジェクトを保持していて、そのオブジェクトの画面遷移を管理。
• UINavigationControllerオブジェクトが保持しているUIViewオブジェクトと、ナビゲーションを合成したものを表示。
• そのUIViewオブジェクトを、Windowオブジェクトの子ビューとすることで、ナビゲーションバーを含む画面が表示される。

実装サンプル

NavigationSampleAppDelegateクラスに、UINavigationControllerのメンバ変数と、プロパティ宣言を追記。

//NavigationSampleAppDelegate.h
@interface NavigationSampleAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    UINavigationController *navigationController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navigationController;

@end

NavigationSampleAppDelegate.mに、実装ディレクティブを追加。
UINavigationControllerのビューをウインドウに追加して、deallocメソッドにも追記。

//  NavigationSampleAppDelegate.m

#import "NavigationSampleAppDelegate.h"

@implementation NavigationSampleAppDelegate

@synthesize window;
@synthesize navigationController;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
	[window addSubview:[navigationController view]];
    [window makeKeyAndVisible];
}

- (void)dealloc {
    [navigationController release];
    [window release];
    [super dealloc];
}

これで、画面遷移を制御するコントローラーの下地の追加が完了しました。

InterfaceBuilderで、MainWindow.xibのUINavigationControllerを編集

InterfaceBuilder上で、NavigationControllerで制御したいコントローラーを、Libraryから選択して、xibを編集し、ビルドすると、下記の例ようになります。

次回は、スタートページと、遷移先ページ、遷移イベントの実装などについて、メモして行きたいと思います！

【関連記事】

iPhoneアプリ開発の環境構築

• iPhone SDKを、SnowLeopardに入れる
• iPhone SDK ドキュメントの入手

iPhoneアプリ HelloWorld

• iPhoneアプリ HelloWorld その１
• iPhoneアプリ HelloWorld　その２ ViewController
• iPhoneアプリ HelloWorld その３　ViewControllerの実装

Clickボタンをタップすると、「Hello, World!」と、表示されるイベントを実装していきます。

1. 初期状態で、ラベルの「Hello, World!」を非表示にします

「HelloWorldViewController.h」をクリックして、ソースを表示します。

下記のように、messageメンバ変数を記述します。

//
//  HelloWorldViewController.h
//  HelloWorld
//
//  Created by あらびき林檎 on 10/01/07.
//  Copyright 2010 Splitchin  All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController {
	IBOutlet UILabel *messsage;
}

@end

保存したら、「HelloWorldViewController.m」を開きます。

「viewDidLoad」メソッドが、下記のようにコメントアウトされています。

/*
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
}
*/
*/

コメントアウトを外して、下記のように処理を追記します

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
	[messsage setHidden:YES];
}

これで、XIBファイルを読み込んだ後の、追加処理の記述をしました。

次に、messageメンバ変数と、XIBファイルをリンクさせます。

「HelloWorldeView.xib」をクリックして、ウインドを開いたら、
　File’s Owneから、Lableまで、Ctrlを押しながら、ドラッグします。
　Outletの「message」を選択します。

これで、HelloWorldViewControllerクラスのmessageメンバ変数と、
XIBファイルの、Labelのテキスト「Hello, World!」がリンクしました。

2. イベントハンドラの実装

「Click」ボタンをタップしたときの、イベント処理を実装します。

「HelloWorldViewController.h」を選択して、ソースを表示します。
そして、以下のように、IBActionを記述します。

//
//  HelloWorldViewController.h
//  HelloWorld
//
//  Created by あらびき林檎 on 10/01/07.
//  Copyright 2010 Splitchin  All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController {
	IBOutlet UILabel *messsage;
}

-(IBAction)actionButtonTapped:(id)sender;

@end

次に、「HelloWorldViewController.m」を選択して、ソースを表示します。

以下のように、IBActionで、messageを表示するように設定します。

- (void)dealloc {
    [super dealloc];
}

- (IBAction)actionButtonTapped:(id)sender{
	[messsage setHidden:NO];
}

@end

「HelloWorldView.xib」を開いて、ボタンとイベントハンドラをリンクさせます。

「View」を開いて、「Rounded Rect Button」（Clickボタンを実装したUIパーツ）から、
Ctrlを押しながら、File’s Ownerにドラッグして、Eventsから「actionButtonTapped」
を選択します。

ビルドして実行

保存したら、「ビルドして実行」します。

「Click」ボタンを押すと、「Hello, World!」と表示される、
　　iPhoneアプリが完成しました！

【関連記事】

iPhoneアプリ開発の環境構築

• iPhone SDKを、SnowLeopardに入れる
• iPhone SDK ドキュメントの入手

iPhoneアプリ HelloWorld

• iPhoneアプリ HelloWorld その１

　　

• iPhoneアプリ HelloWorld　その２ ViewController

1. 新規プロジェクトの作成

Xcodeを起動して、「ファイル」ー「新規プロジェクトの作成」を選択します。

新規プロジェクトのテンプレートを選びます。

左カラムから、「iPhone OS」 – 「Application」を選択します。

ここでは、テンプレート「Window-Based」を選択します。

テンプレートの種類

新規プロジェクト名に、「HelloWorld」と入力します。

XCodeに、新規プロジェクト、「HelloWorld」が作成されます。

画面を作成する。

まずは、ViewパートであるUIから作成してみます。

リソースの追加をします。

[Resources]フォルダを右クリックして、「追加」→「新規ファイル作成」

「View XIB」を選択します

ひとまず、「HelloWorldView」というファイル名で作成します。

「HelloWorldView.xib」というリソースファイルが作成されているのを確認します。

「HelloWorldView.xib」をクリックして、UIを編集します。

「InterfaceBuilder」と呼ばれる、Viewパートを編集するツールが起動します。

「Tool」から「Library」を選択します。

「Library」ウインドゥが表示されます。

「Library」から、「Round Rect Buttonスニペットを選択し、ドラッグ＆ドロップします。縦横の大きさや、配置は調整できます。

Round Rect Buttonをダブルクリックし、「Click」と文字を入力します。

同じように、Libraryから、「Lable」を選んで、ドラッグ＆ドロップし、ダブルクリックして、「Hello, World!」と入力します。

属性を設定します。

メニューバーから、「Tools」→「Inspector」を選択します。
左上のスライダーのようなアイコン、「View Attribute」を選択します。

ここで、フォントやカラーなど属性値を設定できます。

長くなってしまったので、次回は、View Controllerを追加して、実際の処理を追加していきます！

【関連記事】

• iPhone SDKを、SnowLeopardに入れる
• iPhone SDK ドキュメントの入手