ホームページを表示する(その1)

1

 ホームページを表示するという単純なiOSアプリをつくります。MacのXCodeで作るので、XCodeをインストールしていない人はインストールお願いします。Windowsの方はごめんなさい…

プロジェクトを作る

とりあえずプロジェクトを立ち上げます。Create a new Xcode projectをクリックします。

スナップショット 2012 10 14 22 14 3

Applicationを選択し、Single View Applicationを選び、Nextを押します。

スナップショット 2012 10 14 22 15 2

  1. 好きなプロジェクト名をつけてください(ここではShowWeb)。そして、好きに名前を記入しましょう。
  2. Universalにして、Use Automatic Reference Countingにチェックし
  3. Nextを選択します。

スナップショット 2012 10 14 22 18

保存したい場所に保存しましょう。

画面の作成

 では、Web表示用の画面を作成します。左のメニューからViewController_iPhone.xibを選択して、TextFieldを設置します。

スナップショット 2012 10 14 22 24

同様にして、ToolbarとBarButtonItemとWebViewを以下のように設置します。

スナップショット 2012 10 14 22 29

このままでは汚いので整理していきます。

  1. TextFieldを端に合わせます。
  2. PlaceHolderを「URLを入力してください」にします。すると、なにも入力されていない場合は「URLを入力してください」とうっすら書かれます。
  3. Clear Buttonを「Is Always Visible」にします。すると、TextFieldをクリアする場合のボタンがTextFieldに現れます。実行してみて、TextFieldを入力してみればわかります。
  4. Correctionを「No」、Keyboardを「URL」、Return Keyを「Done」にします。これらは入力する際のキーボード設定です。

スナップショット 2012 10 14 22 37 2

あと、iPhoneの画面を変えた際に、TextFieldのサイズも幅にあわせて変えたいので、以下のようにAutoSizingを設定します。

スナップショット 2012 10 14 23 01

もし②のような画面がなかったら、以下のようにUseAutoLayoutのチェックをはずしましょう。

スナップショット 2012 10 14 23 03

続いて、WebViewを整理します。WebViewが画面いっぱいになるようにしましょう。そして、

①WebViewの欄をすべてチェックして、

スナップショット 2012 10 14 23 06

②AutoSizingさせましょう

スナップショット 2012 10 14 23 07

 最後にツールーバーのボタンの設定です。左から、「戻る」「次へ」「中断」「読込」というTitleにして、Enabledのチェックを外しましょう。

スナップショット 2012 10 14 23 10

これで画面をが完成です。

スナップショット 2012 10 14 23 13

横にすれば、次のようになります。

スナップショット 2012 10 14 23 16

とりあえずこれで画面をつくることができました。次回からプログラムを組んでいきます。

著者:安井 真人(やすい まさと)