Edhita Archive

第8回からかなり時間が空いてしまいましたが、
今までの連載での成果をアップルに申請し、
本日、無事リリースされました。
Edhita: Open source text editor for iPad.

今回のリリースに合わせ、HTTPによるダウンロードと、
FTP通信機能を追加しました。

HTTPはNSURLConnectionを普通につかっただけ、
FTPはAppleのSimpleFTPSampleそのままなので、
コードの解説は割愛します。
※ リクエストがあれば解説しますので遠慮無くどうぞ。

ソースはいつもどおり、GitHubのダウンロードからどうぞ。
Downloads for tnantoka's Edhita - GitHub

フィードバックお待ちしております。

第8回の今回は、編集中のファイルを
内蔵Webブラウザで表示＆メール送信してみます。

当初予定していた目次からどんどん離れていきますが、
まぁいいでしょう。

今回の内容は非常に簡単なのでサクっといきます。

[参考]

基本的には、参考文献（第1回参照）だけで十分でしたが、
1点だけ、Stack Overflowにお世話になりました。
UISegmentedControlをToolbarに入れる時は、UIBarButtonItemでWrapしないといけないんですね…。

[素材]

引き続き、Soft * Accessory様の素材をお借りしています。

1. Webブラウザ

まずは内蔵ブラウザでのプレビュー機能。
UISegmentedControlでSource/Browserを選択して切り替えます。

というわけでやることは、DetailViewControllerのinitでボタンを追加して、
ブラウザを開くメソッドを作るだけです。

		// SegmentedControlの作成
		UISegmentedControl *segment = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"Source", @"Browser", nil]];
		segment.segmentedControlStyle = UISegmentedControlStyleBar;
		segment.selectedSegmentIndex = 0;
		[segment addTarget:self action:@selector(segmentDidPush:) forControlEvents:UIControlEventValueChanged];

		// Toolbarに入れる為にUIBarButtonでWrap
		UIBarButtonItem *segmentButton = [[UIBarButtonItem alloc] initWithCustomView:segment];
		
		// Toolbarに設定
		NSArray *items = [NSArray arrayWithObjects:flexible, undoButton, redoButton, fixed, leftButton, rightButton, flexible, segmentButton, nil];
		[toolbar setItems:items];
		
		
// SegmentedControlが変化した時に呼ばれる		
- (void)segmentDidPush:(UISegmentedControl *)sender {
	
	// 0ならソース
	if (0 == sender.selectedSegmentIndex) {
		webView_.hidden = YES;
	}
	// 1ならブラウザ
	else if (1 == sender.selectedSegmentIndex) {
				
		[self saveContents];
		[self changeUrl];
		
		webView_.hidden = NO;
	}
	
}


// WebViewでファイルを開く
- (void)changeUrl {

	webViewReloaded = NO;
	
	[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
	
	// <meta charset="UTF-8" />しないと文字化けする
	NSURL *url = [NSURL fileURLWithPath:path_];
	NSURLRequest *req = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringLocalAndRemoteCacheData timeoutInterval:60];
	[webView_ loadRequest:req];

}

これだけでWebViewでローカルファイルを開けます。簡単ですね。
（UIWebViewDelegateを実装して、読み込み完了後にIndicatorを非表示にしてますが、割愛します。）

2. メール送信

次はメール送信、こちらはWebViewでの表示以上に簡単です。
MessageUIフレームワークをimportして、MFMailComposeViewControllerにメール処理をしてもらうだけです。

// DetailVIewController.h

#import <MessageUI/MessageUI.h>

@interface DetailViewController : UIViewController <UIPopoverControllerDelegate, UISplitViewControllerDelegate, UIWebViewDelegate, MFMailComposeViewControllerDelegate> {

// DetailVIewController.m

		// メールボタン追加
		UIBarButtonItem *mailButton  = [[UIBarButtonItem alloc] initWithTitle:@"Mail" style:UIBarButtonItemStyleBordered target:self action:@selector(mailDidPush)];

		NSArray *items = [NSArray arrayWithObjects:flexible, undoButton, redoButton, fixed, leftButton, rightButton, flexible, segmentButton, fixed, mailButton, nil];
		[toolbar setItems:items];

// メールボタンから呼ばれる
- (void)mailDidPush {
	
	if ([MFMailComposeViewController canSendMail]) {
		MFMailComposeViewController *mailViewController = [[MFMailComposeViewController alloc] init];

		// delegateじゃなくmailComposeDelegate
		// delegateにするとUINavigationViewControllerDelegateを実装してないって怒られる
		mailViewController.mailComposeDelegate = self;

		// 本文＆添付
		NSData *data = [NSData dataWithContentsOfFile:path_];
		[mailViewController setSubject:[path_ lastPathComponent]];
		[mailViewController setMessageBody:textView_.text isHTML:NO];
		// とりあえず全部plain textとして扱っちゃう
		[mailViewController addAttachmentData:data mimeType:@"text/plain" fileName:[path_ lastPathComponent]];
		
		[self presentModalViewController:mailViewController animated:YES];
	}
}

//  処理が終わったら非表示にする
- (void)mailComposeController:(MFMailComposeViewController*)controller didFinishWithResult:(MFMailComposeResult)result error:(NSError*)error {
	[controller dismissModalViewControllerAnimated:YES];
}

[完成]

いい感じです。

[まとめ]

いかがだったでしょうか？
だいぶ見栄えもよくなってきたのでは、と自画自賛しています。

まだ細かいバグが残ってるので、
その辺りを調整してリリース申請してみようかと思います。

それでは、次回もご期待下さい。

[コード]

今回のコードは「Edhita8.zip」に入っています。
GitHubのdownloadページからダウンロードして下さい。

Downloads for tnantoka's Edhita - GitHub

第7回。

今回は無料アプリの宿命（？）である
お金の問題を解決してくれるかもしれない広告についてです。

まぁお金が欲しければ有料化すればいい話なのですが、
そんな勇気もない僕のような開発者には強い味方ですね。

それでは始めます。

なお、AppleのiAdはまだ日本では表示されないので、
GoogleのAdMobを使います。

参考

• 広告AdMobをiPhoneアプリに表示する方法 - コードで一言。
• 広告AdMobを表示させる方法: iPhoneアプリ開発備忘録
• iPhone アプリに AdMob をくっ付けてみる - Debian GNU/Linux 3.1 on PowerMac G4

参考文献は第1回参照。

素材

引き続き、Soft * Accessory様の素材をお借りしています。

1. AdMob登録

まずはAdMobに登録しないと始まりません。

AdMobのサイトにアクセスし、
今すぐスタートから新規登録を行ないます。

ちなみに必要な情報は以下のとおり。
僕はオプションの電話・会社以外ちゃんと入力しました。

• 名
• 姓
• 電話（オプション）
• 会社（オプション）
• 住所
• 国
• 市区町村
• 州
• 郵便番号
• 言語

必要な情報を入力し「submit」すると、「AdMobアカウントの登録」メールが来ます。
その中のリンクをクリックすると「お客様のアカウントが有効になりました」画面が表示され、
登録は完了です。

2. AdMob SDKへの取得

次にAdMobのSDKをダウンロードします。

ログインするか、ログイン後画面右上のメールアドレスをクリックして、
アカウント画面に行きます。

「サイト及びアプリケーション」内の「サイト/アプリケーションの追加」を
クリックすると、サイト情報の入力画面になります。
「iPadアプリケーション」を選択し、必要な情報を入力します。
※ アプリURLは入力しなくても大丈夫です。

次に進むと「サイト コードを取得」画面が出てくるので、
「AdMob iPad/iPhone SDKをダウンロード」からSDK（admob_iphone_sdk_20100818.tar.gz）を、
「SDK の説明書をPDF 文書でダウンロードしてください。」からPDF（AdMob_iPad_SDK_Instructions.pdf）を
ダウンロードします。

3. プロジェクトへの導入

ダウンロードしたSDKをプロジェクトに組み込みます。
PDFファイルに沿ってやればOKですが、英語なので一応流れを書いておきます。

Step1

SDK内の以下のファイルをAdMobフォルダごと、
プロジェクト直下にコピーします。

• AdMob/
  • AdMobDelegateProtocol.h
  • AdMobView.h
  • libAdMob.a

Step2

「Frameworksを右クリック→追加→既存のフレームワーク」から、
以下を追加します。

• AudioToolbox
• CoreGraphics
• MediaPlayer
• MessageUI
• QuartzCore

Step3

SDK内のTouchJSONフォルダをまるごとプロジェクト直下にコピーします。

Step4

publisher IDはSDK内に記載されているので問題なしです。

Step5(iPad)

実装です。次節で説明します。

4. 広告表示

やっとコーディングです。
お金がからむと前作業が長いですね^^

ここもPDF内のStep5に従うだけですが、量もそんなに多く無いので、
今回コードに加えた変更を全部載せておきます。

といっても、
「admob_iphone_sdk/sample_projects/AdMobSampleAdsiPad/Classes」内の
「EarthquakeListViewController.h, m」にPublisher ID含め全部書いてあるので、
コピーするだけなんですが。

AdMobDelegate

AdMobからのdelegateを受けるクラスを実装します。
今回はRootViewControllerにその機能を持たせています。

// RootViewController.h

#import "AdMobDelegateProtocol.h"
#import "AdMobView.h"

@interface RootViewController : UITableViewController <AdMobDelegate> {

// RootViewController.m

#pragma mark -
#pragma mark AdMobDelegate methods

- (NSString *)publisherIdForAd:(AdMobView *)adView {
    return @"publisher ID"; // this should be prefilled; if not, get it from www.admob.com
}

- (UIViewController *)currentViewControllerForAd:(AdMobView *)adView {
    // Return the top level view controller if possible. In this case, it is
    // the split view controller
    return self.splitViewController;
//    return self.navigationController.parentViewController;
}

- (void)willPresentFullScreenModalFromAd:(AdMobView *)adView {
    // IMPORTANT!!! IMPORTANT!!!
    // If we are about to get a full screen modal and we have a popover controller, dimiss it.
    // Otherwise, you may see the popover on top of the landing page.
    if (detailViewController.popoverController && detailViewController.popoverController.popoverVisible) {
        [detailViewController.popoverController dismissPopoverAnimated:YES];
    }
}

- (NSArray *)testDevices {
	return [NSArray arrayWithObjects: ADMOB_SIMULATOR_ID, nil];
}

プライベート指定解除

delegate内から使うDetailViewControllerのプロパティがプライペート化されちゃってるので、それを解除します。

// DetailViewController.h

@property (nonatomic, retain) UIPopoverController *popoverController;

// DetailViewController.m

@interface DetailViewController ()
//プライベートメソッドの解除（AdMobから使うので）
//@property (nonatomic, retain) UIPopoverController *popoverController;
- (void)configureView;
@end

AdMobViewの追加

最後に広告Viewを表示します。
今回はTableViewのFooterに表示するので、
RootViewControllerのinitWithPath内で行います。

        AdMobView *adMobView = [AdMobView requestAdOfSize:ADMOB_SIZE_320x270 withDelegate:self];
//        AdMobView *adMobView = [AdMobView requestAdOfSize:ADMOB_SIZE_320x48 withDelegate:self];
        self.tableView.tableFooterView = adMobView;

[完成]

広告とはいえ、画像が入ると見た目が良くなっていいですね。

[まとめ]

AdMobは現状審査もないらしく、
非常に簡単な印象を受けました。

あとはどれくらいのお小遣いになるかですが、
もうちょっとでEdhitaをリリースしてみる予定なので、
そこで試してみようと思います。

それでは。

[コード]

今回のコードは「Edhita7.zip」に入っています。
GitHubのdownloadページからダウンロードして下さい。

Downloads for tnantoka's Edhita - GitHub

おまけと謝罪

今までgitのリポジトリにほとんどのファイルがコミットできていませんでした。
（git add .等をしていなかったので、新規ファイルが管理されていなかったのです。）

たまたま毎回ダウンロード用のファイルを用意していなので、少しは救われましたが、
試行錯誤の痕跡がなくなってしまってかなりショックです。

リポジトリをチェックアウトされた方々にもご迷惑をお掛けしました。

凹んでてもしょうがないので気を取り直して頑張ります。

第6回です。
奇跡的にまだ飽きてません。
この勢いで電子書籍を出せるまで頑張りたいと思います。

今回はキーボードの上部にAccessoryViewを表示させて、
そこから記号やタブを入力できるようにします。

また、ついでにツールバーのボタンからカーソルを左右に移動できるようにします。

参考

今回も参考書籍（第1回参照）とAppleのドキュメントのみです。

素材

引き続き、Soft * Accessory様の素材をお借りしています。

1. AccessoryViewの作成

まず、AccessoryViewを作成します。

と言っても、UIViewを継承したEdhitaAccessoryViewを作成し、
その上に記号入力用のUIButtonを配置するだけ。

特別なことは必要ありません。

// EdhitaAccessoryView.m

- (id)initWithTextView:(UITextView *)textView {
	if (self = [super init]) {
		
		textView_ = textView;

		NSInteger padding = 8;
		NSInteger margin = 8;
		NSInteger size = 46;
		
		self.frame = CGRectMake(0, 0, 768, size + padding * 2);
		self.backgroundColor = [UIColor lightGrayColor];
		
		// あんまりボタンを表示すると小さくせざるをえないので、使用頻度が高そうで入力しづらいやつを
		NSArray *titles = [NSArray arrayWithObjects: @"{", @"}" ,@"<", @">", @"[", @"]", @"+", @"*", @"=", @"_", @"#", @"|", @"\\", nil];		
		
		UIButton *button;
		
		// 記号
		NSInteger i = 0;
		for (NSString *title in titles) {

			button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
			button.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
			button.frame = CGRectMake((size + margin) * i + padding, padding, size, size);
			[button setTitle:title forState:UIControlStateNormal];
			[button addTarget:self action:@selector(insertDidPush:) forControlEvents:UIControlEventTouchUpInside];
			button.titleLabel.font = [UIFont systemFontOfSize: 20];
			[self addSubview:button];
			i++;
		}

		// タブ
		button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
		button.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
		button.frame = CGRectMake(self.frame.size.width - size - padding, padding, size, size);
		[button setTitle:@"\\t" forState:UIControlStateNormal];
		[button addTarget:self action:@selector(tabDidPush) forControlEvents:UIControlEventTouchUpInside];
		[self addSubview:button];

	}
	return self;
}

2. AccessoryViewの表示

先程作ったViewをTextViewのAccessoryViewとして設定します。

方法は、DetailViewControllerのinit内で、
textView_のinputAccessoryViewにインスタンスを代入するだけ。

これでAccessoryViewが表示されるようになります。
簡単ですね！

		if ([settings objectForKey:@"accessoryView"] == NULL || [settings boolForKey:@"accessoryView"]) {
			EdhitaAccessoryView *accessoryView = [[EdhitaAccessoryView alloc] initWithTextView:textView_];
			textView_.inputAccessoryView = accessoryView;
		}

人によってはAccessoryViewが邪魔だという人もいると思うので、
Settingsに項目を追加してON/OFFできるようにしています。
上のif文はONに設定されているか（デフォルトON）を判別しています。

		<dict>
			<key>Type</key>
			<string>PSGroupSpecifier</string>
			<key>Title</key>
			<string>Input</string>
		</dict>
		<dict>
			<key>Type</key>
			<string>PSToggleSwitchSpecifier</string>
			<key>Title</key>
			<string>Accessory View</string>
			<key>Key</key>
			<string>accessoryView</string>
			<key>DefaultValue</key>
			<true/>
		</dict>

3. 記号入力処理

AccessoryViewのボタンから記号を入力できるようにします。

やることは簡単で、ボタンがタップされたら、TextViewのselectedRangeを取得して、
ボタンのtitleLabel.text（タブの場合は\t）で置換します。
また、undoできるようにundoManagerに反対の処理（backspace）を仕込んでいます。
※ 見ての通り、view内に処理をがっつり書いちゃってます。
　MVC的にアウトだと思うんですが、
　この為に新たにControllerを作るのもどうかと思うし、
　これ以上DetailControllerを肥大化させてくないし…ということで一旦こういう実装にしています。
　今後勉強していく中で綺麗なアーキテクチャがわかったら直します。

// EdhitaAccessoryView.m

- (void)insertDidPush:(UIButton *)button {
	[self insertString:button.titleLabel.text];
}

- (void)tabDidPush {
	[self insertString:@"\t"];
}

- (void)insertString:(NSString *)string {

	NSMutableString *text = [textView_.text mutableCopy];

	NSRange range = textView_.selectedRange;
	[text replaceCharactersInRange:range withString:string];

	// カーソルが最後に行っちゃうので選択しなおす
	textView_.text = text;
	textView_.selectedRange = NSMakeRange(range.location + 1, range.length);

	// undo登録
	[[textView_ undoManager] registerUndoWithTarget:self selector:@selector(backSpace:) object:string];
}

- (void)backSpace:(NSString *)string {
	
	NSMutableString *text = [textView_.text mutableCopy];

	// 手前にカーソルを戻して空文字で1文字分置換
	NSRange range = textView_.selectedRange;
	textView_.selectedRange = NSMakeRange(range.location - 1, 1);
	[text replaceCharactersInRange:textView_.selectedRange withString:@""];
	textView_.text = text;
	
	textView_.selectedRange = NSMakeRange(range.location - 1, 0);

	// redo登録
	[[textView_ undoManager] registerUndoWithTarget:self selector:@selector(insertString:) object:string];
}

4. カーソル移動

最後にカーソルキーによるキャレットの移動です。

本当はAccessoryViewのボタンでやりたかったんですが、
どうしてもPortraitの時に幅が足りなくなるので、
ツールバーでやってます。

処理としては、selectedRangeのlocationを±1して設定しなおしているだけです。
上下移動は文字数とか考慮しなきゃいけないので保留です。

- (void)leftDidPush {
	NSRange range = textView_.selectedRange;
	textView_.selectedRange = NSMakeRange(range.location - 1, range.length);
	[[textView_ undoManager] registerUndoWithTarget:self selector:@selector(rightDidPush) object:nil];
}

- (void)rightDidPush {
	NSRange range = textView_.selectedRange;
	textView_.selectedRange = NSMakeRange(range.location + 1, range.length);
	[[textView_ undoManager] registerUndoWithTarget:self selector:@selector(leftDidPush) object:nil];
}

[完成]

できました！

[まとめ]

いかがだったでしょうか。

だいぶTextEditorらしくなってきましたが、
肝心のSyntax Highlightingが後回しのまま…。

まだ検討もついてませんが、
そろそろやるしかないですねぇ。

[コード]

今回のコードは「Edhita6.zip」に入っています。
GitHubのdownloadページからダウンロードして下さい。

Downloads for tnantoka's Edhita - GitHub

続けざまに第5回。
簡単そうな課題が残ってたを思い出したので。

参考

今回は、参考サイトはありません。
参考書籍は第1回をご参照下さい。

素材

引き続き、Soft * Accessory様の素材をお借りしています。

1. Undo/Redoボタンの追加

まずはボタンの追加です。
といっても既に新規ファイル・フォルダでやったのと同じ手順です。
今回は、DetailViewControllerのinitに実装します。

		// targetとactionをnilにしたら勝手にundo,redoしてくれるっぽいけど保証されるかわからんのでやめとく
		UIBarButtonItem *undoButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemUndo target:self action:@selector(undoDidPush)];
		UIBarButtonItem *redoButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRedo target:self action:@selector(redoDidPush)];
		NSArray *items = [NSArray arrayWithObjects:undoButton, redoButton, nil];
		[toolbar setItems:items];

2. Undo/Redo機能の実装

NSUndoManagerを使って行ないます。
こいつはUIResponderのundoManagerプロパティから取得できます。
TextViewもUIResponderのsubclassの為、もちろんこのプロパティを持っています。
今回はTextViewから取得したundoMangerに対して、undo/redoメソッドを呼び出しています。

- (void)undoDidPush {
	[[textView_ undoManager] undo];
}

- (void)redoDidPush {
	[[textView_ undoManager] redo];	
}

[1.]のコメントにも書きましたが、
実はUIBarButtonSystemItemUndo・Redoのボタンを作るとき、
selfとactionをnilにしておけば勝手にやってくれるようです。
※ ドキュメントに記載が見当たらなかったので使うのは止めてます。

[完成]

できました！

[まとめ]

これでおしまいです。
そんなに苦労しないだろうと思ってましたが、
予想を上回る簡単さでした。

[コード]

今回のコードは「Edhita5.zip」に入っています。
GitHubのdownloadページからダウンロードして下さい。

Downloads for tnantoka's Edhita - GitHub