オレブラウザを作る 01

良くありがちな、でもネットと繋がるアプリを書くための重要なWebKitを使ってアプリを書く。しかもAppleScriptで。AppleScriptでもまぁまぁそれなりの物が作れるからね。



まずプロジェクトを作成。テンプレートはCocoa-AppleScript Applicationを選択して名前をMy Web Browserとする。保存先は適当に。







最初はプロジェクトの設定。Xcodeはこんな感じになっているはず。レイアウトは違って見えるかもしれない。同じようにする為にはXcode画面右上のボタンを図と同じようにすればOK。



WebKitを使う為にフレームワークを追加する。Summaryタブの中央にあるLinked frameworks and Librariesで+ボタンをクリックして「webkit」と入力。WebKit.frameworkを選択してAdd。こんな感じで追加する。





プロジェクトの設定は以上。次は画面デザイン。

プロジェクトナビゲーターからMainMenu.xibを選ぶ。デスクトップのような画面になる。ここでウィンドウやメニューのデザインが出来る。



編集画面とプロジェクトナビゲーターの間にツールバーのようなものがある。ここかなり重要。ここに並んでいる物はこのアプリで扱うオブジェクト。コード以外でもオブジェクトを定義できるのがXcodeによる開発の特徴的なところ。



このツールバーにあるウィンドウアイコンをクリックすると編集画面にウィンドウが表示される。これは実際にこのアプリで使われるウィンドウ。こいつにボタンとかを貼付けていく。





まずこの状態で一回アプリを起動させてみるか。XcodeのRunボタンを押せばコンパイル&実行となる。アプリが起動すると中身のないウィンドウが表示される。



これ実際にアプリ。デバッグモードで動いているやつ。これは通常のアプリと同じように終了させることが出来るし、XcodeのStopボタンでも終了できる。終了させて編集作業再開。

んじゃ早速ウェブ機能を実装しよう。Xcode画面右下のObject LibraryからWebViewってやつをドラッグしてウィンドウにドロップ。このWebViewがウェブコンテンツの描画とかをするオブジェクト。





WebViewのレイアウトはウィンドウ一杯に広げる。これまたマウスのD&Dとかで直感的にレイアウトできるから特に説明は要らないはず。



もう少しウェブブラウザっぽくしようか。ツールバー機能を付けよう。これもObject LibraryからウィンドウのどこでもいいのでD&D。そうすれば自動的に配置されそれっぽいウィンドウになる。





ツールバーには取りあえず戻るボタンと進むボタンとロケーションバーの三つを用意しようか。今はこれだけで。

ツールバー部分をダブルクリック。するとよくあるツールバーカスタムのダイアログが出てくる。ここでアイコンを追加したり並べ替えたりする。普通のアプリをカスタマイズするのと同じようにアプリのデザインができる。いいね！



まずデフォルトで並んでるアイコンを全て取っ払う。ツールバーカスタマイズのようにD&Dでどっか適当なとこに移動させれば消えてなくなる。全部消してスッキリ。



んで次は戻るボタンと進むボタンを追加。Object LibraryからImage Toolbar itemをD&Dで配置。最初はAllowed Toolbar Itemsってとこに配置。二つ配置ね。





アイコンの名前がToolbar Itemになっているから名前をBackとForwardに変更。変更操作もFinderでファイル名を変更するような操作で出来る。

名前を変更できたら今度はアイコンを適当なのに変える。まずBackから。Backのアイコンが選択された状態でXcode画面右にあるサイドバーをAttributes Inspectorにする。こんな感じで。



Image Nameを選ぶ。Back用にはNSGoLeftTemplateがいい。でもちょっとダサいアイコン。これは後でなんとかする。ForwardはNSGoRightTemplateで。



アイコンがそれっぽいのに出来た。これを実際にツールバーのボタンとして使うから配置する。Default Toolbar ItemsにD&D。こんな感じに。



それっぽいものになってきた。次はロケーションバーを用意。ロケーションバーはText Fieldってオブジェクトを使う。これもObject LibraryからBack/Forwadボタンみたいに配置して名前をつける。名前はLocationにする。





このText Fieldのサイズを変更する。ウィンドウサイズの変化についていけるようにめい一杯広がるようにね。これも簡単。

Locationテキストフィールドを選択した状態で右のサイドバーをAttributes InspectorからSize Inspectorに変更。MaximumのWidthの値を20000に変更。大きすぎるように思えるけど大丈夫。ちゃんと縮むから。これでテキストフィールドの設定は終わり。





設定が終わったらDefault Toolbar ItemsにD&D。ブラウザっぽくなってきた。ここで一回アプリを動かしてみる。Runボタンを押してBuild&Run!



ウィンドウサイズを変更してもちゃんとテキストフィールドも伸び縮み。いい感じ。ウィンドウの確認できたのでアプリを終了。

画面編集の続き。これまだ実際に戻ることも進むこともできないしウェブの表示も出来ない。それを出来るようにしようか。

まず最初はウェブを表示できるように、ロケーションにアドレスを入力してそのサイトを開くようにしよう。っていってもコードは書かない。これまたマウス操作で出来てしまう。

ツールバーの編集画面を一回閉じる。Doneを押せば閉じる。閉じたらウィンドウの編集操作をし易いように大きさを少し広げてみる。広げる操作も当然アプリと同じような操作で出来る。直感的でいいね。

広げたらまたツールバーの編集画面を開く。あ、閉じなくても良かったかも。まあいいや。兎に角開く。開くにはツールバーの領域の適当なとこでダブルクリック。

開いたらLocationテキストフィールドでマウスの右ボタンでドラッグ。上のテキストフィールドね。ドラッグしてちょっと移動すると線の描画みたいな感じになる。こんな風に。左じゃなくて右クリックのドラッグだから注意。



線をウェブ表示領域、つまりさっき配置したWebViewのとこ、そこでドロップ。



そうするとこんなメニューが出てくる。この中にあるtakeStringURLFromを選ぶ。



takeStringURLFromを選んだら設定は終了。一応確認の為にテキストフィールドを一回右クリックしてメニューを表示させる。するとtakeStringURLFromとWebViewが関連づいているのが確認できる。



設定はこれだけ。実はこれだけでWebViewはLocationに入力されたアドレスのサイトを表示できる。実際に動かしてAppleのサイトを開いてみればわかる。何もしなくてもビデオの表示まで出来るから。



今度はBack/Forward機能。Locationと同じ操作でそれぞれgoBackとgoForwardと関連づけ。これもその操作で完了。ボタンがちゃんと戻る・進むボタンとして機能する。ここまでコードコーディングなし。これがXcode開発スタイル。

他にもリロードとかフォントサイズ変更とかボタンと機能を関連づけ出来るからその辺りはお好みで。

これで終われば楽なんだけど、さすがにそうはいかず。コンテンツ表示に足りない機能がいくつもあったりするしページを移動してもロケーションバーの内容が変わらなかったりする。その辺りはさすがにコーディングする必要が。

今日はここまで。次はページ移動でロケーションバーの内容を書き換え出来るようにしてみる。