サイト移転のお知らせ

しばらくブログお休みしていましたが、こちらに移転しました。よろしければこちらへどうぞ。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Macで簡易ローカルブラウザを作ろう(5) 〜WebViewでHtml表示〜

Macで簡易ローカルブラウザを作ろう(Macアプリ開発の基礎の基礎)シリーズ

の続きです。

内容を見れば既に書き溜めてある記事を小出しにしているのがバレバレですが(笑)、ま、いろいろ事情があるのでご勘弁を。
今回はようやく本格的にHTMLを表示させます。

6.WebViewでHTMLを表示する

Cocoaアプリのテンプレートでプロジェクトを作っただけの状態では、Windowが一枚あるだけのアプリになっています。HTMLを表示するためにWebViewというオブジェクトを使うため、まずはその準備です。

左側のナビゲータビューの最上位のプロジェクトを選択すると以下のような画面が表示されます。
20130616_cocoa12.jpg

ここで、左側のTARGETSのアプリ名を選択しBuild Phasesのタブを選択。Link Binary With LibrariesWebKit.frameworkを追加します。これも検索窓にWebKitと入力すればすぐに見つかります。
20130616_cocoa13.jpg

つぎに、WindowにWebViewを貼付けます。
手順は、左側のナビゲータービューでMainMenu.xibを選択して画面真ん中のエディタービューにWindowを表示させておきます。そして、画面右側のユーティリティービューの下側にあるObject LibraryからWeb Viewをドラッグ&ドロップするだけです。
Object Libraryには様々なオブジェクトが表示されていますが、下部の検索ボックスに"Web View"と入力すればすぐにWeb Viewを見つけられます。
20130616_cocoa14.jpg

そうすると、以下のようにWindow>Viewの中にWeb Viewが配置されたことが確認できます。
20130616_cocoa15.jpg

つづいてWebViewのサイズ調整。
今回はWindowいっぱいにWebViewを表示させたいので、貼付けたWeb Viewを選択し、上下左右をWindowの端までドラッグして引き延ばします。
20130616_cocoa16.jpg
※赤い矢印線がは説明のために画像を編集して追加したものです。

貼付けたWeb Viewを選択した状態で右側のユーティリティービューのSize Inspectorで位置、サイズに関する情報を確認、編集できますが、Constraintsの値が下図のようになっていればWebViewはWindowのサイズと同じになるはずです。
20130616_cocoa17.jpg

なお、上記のxibファイルに対する操作は、他言語化してEnglishとJapaneseの両方がある場合は同じ事を双方に対して実施しないといけないようです(本当はもっと効率的なやり方があるかもしれません・・・)

ここまででは、WebViewが配置されただけですのでWebViewには何も表示されません。WebViewの初期設定として、プロジェクトに取り込んだhtmlファイルを表示するようにしていきます。

オブジェクト指向の開発ではMVCの考え方はよく用いられますが、Xcodeを使った開発(というかAppleの方針?Objective Cの流儀?)でもMVCが徹底されていて、その仕組みとしてdeligateが用いられるようです。
※このあたりが他の言語での開発経験のある人からするとちょっと理解に時間を要するところかもしれませんね。私も勉強中です。
ざっくり言ってしまえば、deligateは誰かの「代理」をする責務を持っていて、Viewが受け取ったイベントに対する処理を、そのViewに対応するDeligateが代わって行うということでしょうか。シンプルに設計すればMVCのC(Contoller)がDeligateということになるかもしれません。

複数のViewからなるアプリであれば、View毎に(ViewControllerというような名前で)deligateクラスを作ってもいいのですが、今回は(簡略化のため)Viewが1つしかないことが前提なので、テンプレートに最初からあるAppDelegateに、Viewをコントロール責務を持たせたいと思います。

と、そのまえにこの2つの登場人物の関係を整理しておきます。
・WebViewから見れば、AppDelegateが処理を代わりにしてくれるdelegate。
・AppDelegeteから見れば、WebViewは処理を代わりにやってあげるIBOutlet。

と、ここで突然IBOutletという言葉を出しましたが、IBはInterface Builderの頭文字。では肝心なOutletとは「オブジェクトを識別するインスタンス変数」らしいです。また、このようにも記載されています。
「オブジェクトはアウトレットにメッセージを送信することにより、アプリケーション内のほかのオブジェクトとやり取りできます。アウトレットは、アプリケーション内の任意のオブジェクトを参照できます。」
詳細はこちらを参照
https://developer.apple.com/jp/documentation/Cocoa/Conceptual/ObjCTutorial/06Controller/chapter_6_section_2.html

つまりAppDelegateがWebViewにメッセージを送るためには、WebViewをIBOutletとして参照できるようにしておく必要があるということです。

それぞれの関係づけは実は簡単、ドラッグだけでできてしまします。
そのまえに、Xcodeのウィンドウレイアウトをちょっと調整。
20130616_cocoa18.jpg

上図はXcode右上あたりのキャプチャですが、まず、Viewの右側のトグルボタンをOFFにしてユーティリティビューを隠します。で、Editorの真ん中のボタンを押してAssistant Editorを表示させます。Assistant Editorとは簡単に言えば2画面エディタです。Assistant Editorの右側に表示させるソースコードは上図の下側の赤枠でかこったファイル名辺りをクリックすれば変更できます。
これで、Xcode画面左側のナビゲータビューでMainMenu.xibを選択してObjectsを表示しつつ、Assistant Editorによって別のソースコードも同時に表示できるようになります。

ではまず、AppDeligate.hにはすでにpropertyとしてwindowが登録されているので、その下にwebViewをIBOutletとして追加したいと思います。これも恒例のドラッグでできます。
※これも他言語化してEnglishとJapaneseの両方のxibファイルがある場合は同じ事を双方に対して実施しないといけないようです(本当はもっと効率的なやり方があるんでしょうねぇ・・・)
20130616_cocoa19.jpg
※上図の赤矢印はドラッグ操作を示すために編集追加したものです。

そうすると、以下のようなダイアログが表示されます。
20130616_cocoa20.jpg

NameはwebViewとしました。これがプロパティ名(変数名)になります。
TypeはWebViewのまま。
StorageもWeakのままです。StorageにはWeakかStrongかを選べますが、基本的にIBOutletはWeakが良いでしょう。実は、ARCの仕組みを採用するObjective Cでは、WeakとStrongの違いを理解しておくことがものすごく重要になります。これによって、オブジェクトが破棄されるタイミングが代わってきてしまいます。
ここでは説明は省略しますが、以下のサイトがとても勉強になります。
Natsu's note:[iOS5] ARC (Automatic Reference Counting) : Overview
http://blog.natsuapps.com/2011/11/ios5-arc-overview.html

そして、WebViewクラスを使うために、ヘッダをimportしておく必要もあります。すでに記載されているCocoa.hの下にでも追加しておきましょう。

#import
#import


続いてAppDelegate.mの編集です。
最初からアプリの起動が完了したときに呼ばれるapplicationDidFinishLaunchingというメソッドがあるので、このなかでwebViewにhtmlファイルを読み込ませる事にします。
コードはこんな感じです。

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
    NSString* path = [[NSBundlemainBundle] pathForResource:@"sample1" ofType:@"html" inDirectory:@"html"];
    [self.webView setMainFrameURL:path];
}

バンドルのhtmlというディレクトリの中から、sample1.htmlというリソースのパスを取得して、それをwebViewに設定しているだけです。

これで、ビルド&実行するとめでたくHTMLがウィンドウに表示されると思います。

またまた最後に書籍紹介。
正直言って個人的にはObjective Cという言語がいまいち好きになれません。C、C++、Javaはそれなりに扱える(つもり)ですが、同じC言語を起源とする言語なのにObjective Cは文法的に異彩を放っています。始めて見た時はどれがクラスなのか?オブジェクトなのか?メソッドの呼び出し方は?定義の仕方は?継承は?もうさっぱりでした。
そんな思いもあって、Objective Cをまずはさらっと理解したいと思って見つけた本です。

言語を詳細まで理解目的には適さないと思いますが、私のようにObjective Cへの取っ付きにくさを感じている方にはオススメです。
関連記事
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

サイト内検索
プロフィール

Author:imxs

Androidアプリ開発などを行っているimxsの開発者です。気になることを調べてメモって行きます。ほとんどの人にはどうでもいい内容でも、広い世の中一人くらいは同じ疑問を持った奇妙な人がいることを信じつつ。暖かい目で見守ってやってください。
imxsの開発者ブログは移転しました。よろしければこちらへどうぞ。

カテゴリ
最新記事
リンク
RSSリンクの表示
最新コメント
最新トラックバック
FC2カウンター
アクセスランキング
[ジャンルランキング]
携帯電話・PHS
162位
アクセスランキングを見る>>

[サブジャンルランキング]
Android(Google)
43位
アクセスランキングを見る>>
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。