[Xcode]iOSアプリ開発 チュートリアル:ストーリーボードの使い方(下)

MAC Book Ai(初代)をインストールする間に貯めていたブログ記事を書かせてもらいます。

こんにちは システム中村です。

ストーリーボードの使い方(下)ということで最後となります。

次は当初の予定通りカメラアプリの作り方を書く予定ではありますが、その前にGoogleMapのナビゲーションネタを書くかもしれません・・・・

 

さて話を戻し、

WEBページをアプリ内で表示するためにWebView機能を使います。

まずクラスファイルを作ります。

スクリーンショット 2013-09-05 11.09.40スクリーンショット 2013-09-05 11.12.03

IBOutletを準備しておきます。

スクリーンショット 2013-09-05 11.13.17

スクリーンショット 2013-09-05 11.13.35スクリーンショット 2013-09-05 11.13.54

IBOutlet接続でストーリーボード上で連携します。

あとは、WEBを表示するためのコードを書けば終わりです。

スクリーンショット 2013-09-05 11.22.29

(ここで初心者が戸惑う self delegate が出てきますが、それはまたそのうち)

スクリーンショット 2013-09-05 11.23.23

一通りこれでストーリーボードを使った開発は終わりです。

あとはこれをベースに機能をついかしていけばいろんなアプリが作れるはずです。

 

 

JavaScript でリッチなUIを作る場合の覚書(その1)

Webアプリケーションでネイティブアプリに近い操作感を実現したいとなると
Ajaxで取得したデータを使ってコンテンツを描画、さらにそれを操作というのはよくありますね。

例えばajaxでjsonを取得して、handlebars.jsなどを使って一覧を作成したんだけど
各行を jQuery.UI で draggable にしたいんだけど動かない、なんてときの覚書です。

 

Continue reading

[Xcode]iOSアプリ開発 チュートリアル:ストーリーボードの使い方(中)

Retinaディスプレイに慣れてしまったiPad2を見てると液晶が荒いな と日々開発を行いながら思っている中村です。

こんにちは

前回の続きで今回はストーリーボードにコードを埋め込んでいきます。

SBview

前回までで作ったストーリーボードです。

ではitem1側のUiTextView エリアにコードで文字列を表示させる流れですが、

まず適応するコードとなるファイルを新規追加します。ファイルを追加したい箇所でマウス右ボタンで

NewFileを選択し、Objetcitve-C classを選択します。

スクリーンショット 2013-09-05 10.44.31 スクリーンショット 2013-09-05 10.45.11

Nextをクリックしファイル名を確定させます。

スクリーンショット 2013-09-05 10.46.25

今回は標準の UIViewController を選択肢、class名に TopViewControllerとします。

スクリーンショット 2013-09-05 10.46.56

これでストーリーボードへ取り付けるコードの準備はできました。準備ができたので、TopViewController をストーリーボードへ関連づけます。

 

スクリーンショット 2013-09-05 10.50.07

コードを取り付ける箇所にマウスをあて全体が青色になる事を確認し、左メニューからclass(作ったファイル)を関連づけます。

これだけで完了です。

次はUITextViewの部品単位をひも付けます。h m両ファイルに書き込みします。

スクリーンショット 2013-09-05 10.55.29スクリーンショット 2013-09-05 11.06.58

IBOutletがひもづけるために必要なものです。ソースができたら、

今度はストーリーボードでIBOutletとUITextViewをひもづけます。

スクリーンショット 2013-09-05 11.03.10

これで完成です。ビルドをすると下の様な結果画面が出来ます。

スクリーンショット 2013-09-05 11.07.32

コード側でUITextViewの設定をかえるなどする事も可能です。

 

次の(下)は UIWebViewを使った WEB表示画面を作っていきます。