SwiftによるiOSアプリ開発基本講座

スプリットビューを使う

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
iPad用のMaster-Detail型のアプリを作成し、スプリットビューの基本的な構成を解説します。
講師:
07:18

字幕

このレッスンでは、 iPad 用のMaster-Detail 型のアプリを作成してSplit View の基本的な構成を解説します。それではまずこのWelcome to Xcode の画面から、Create a new Xcode projectこちらをクリックするか「File」メニューから「New」→「Project...」と選択して新しいプロジェクトを作成しましょう。iOS の Application の中にMaster-Detail Application というテンプレートがありますので、こちらを選択して「Next」ボタンを押します。そして ProductName のところにMasterDetailDemoと入力して、Organization Name のところには自分の名前を、そして Organization Identifer のところにはmytest と入力しておいてください。Language には Swift を選択します。そして Devices には iPad を選択します。最後の Use CoreData というところのチェックボックスは外しておきましょう。それでは Next ボタンを押します。 デスクトップの上にこのプロジェクトを作成します。それではこうして作成したiPad 用のアプリを一度実行しておきたいと思います。左上のこの実行ボタンを押してシュミレーター上で実行します。ただこうして実行するとですね、あの iPad Air というのは実はもの凄い画面サイズを持っていますので、このようにちょっと表示しきれなくなってしまいます。ですので この iOS シミュレーターの「Window」メニューのところから「Scale」を選択して、100%、75% いろんなスケールが選択できるようになっていますので、50% にまずしてみます。これでも全体を表示しきれていないのでさらに下げましょう。25% までげましょうか。さすがにちょっと潰れているので、もう 1 個上げます。ここまでだったら表示できるかな。このようにシミュレーターの上で立ち上がりました。で、 Maser-Detail 型のアプリケーションというのは横型になっていることが多いのでまずは横型にしてアプリケーションの動作を確認したいと思います。Cmd キーと左矢印か右矢印かどっちかを押しますとその方向に iPadが傾けられたということがシミュレートされます。 そして今このように表示されました。ちょっと Master のところがですね、Table View かなり汚い表示になっていますけど33% なんで汚くなります。お許しください。そしてこの Master に対して新しいデータを追加していくと、日付のデータがこのようにどんどん追加されてそのデータをクリックすることによって Detail がこの View Controller にそのデータが読み込まれて、新しいデータが表示されるとこのようになっています。そしてこのデータが表示された状態でもう一度Cmd + 右矢印を押してですね、このように縦型に戻してやると、左側の Master の選択できる部分が消えます。逆に言うとこの Detail 側のView Controller を広く使って広くデータを表示できるようになったわけですが、Master 側の選択項目が消えてしまったらちょっと問題があるということでもう一度 Master を表示したいわけですね。で、そのときにはこの左上にMaster を表示するためのボタンがありますのでこの青いボタンを一度クリックすることでMaster が表示されます。で、またもし Master が選択後にいらなくなったらDetail の方をクリックすれば元に戻る とこういうふうな仕組みになっています。 それでは Xcode に戻って、この Master-Detail 型のアプリケーションの構成がどのようになっているかということを確認していきましょう。シミュレーターの実行を終了しておきます。それではまずデザインを見ていきたいと思いますので、Main.storyboard のファイルを選択しましょう。この iPad 用の Master-Detail 型のアプリケーションはかなり View Controller の数が多いので、この Editor領域のどこでも構いません。白くなっている所を右クリックして 「Zoom to 50%」、これ位のサイズを選択してこれもこうやってズームをしておきます。そして全体が見えるようにしましょう。そうするとこの Master-Detail 型のアプリケーションは一番先頭にある SplitView Controller から処理が始まっていることが分かります。そしてその下に、Navigation Controller が右側にひとつ、こちらにひとつ、それから下側にもNavigation Controller がもうひとつあることが分かります。Master-Detail 型のアプリケーションは実はこのように、このこちらがですね左側に表示されているMaster 側の Navigation Controller、そしてこの下の方にあるのが右側に表示されている Split View のDetail 側の View Controllerということで、このように 2 つのNavigation Controller が協調する形で用意されています。 そしてさらにこの左側のNavigation Controller にはTable View が用意されていて、この Table View のセルがクリックされたときにはこちらにセグウェイがありますね。このセグウェイを使って右側のDetail 側の Navigation Controller に左側の選択が変わったよとということが伝えられますので、そのデータを元にして、この Navigation Controller はさらに Detail 側の View Controller に再表示をしてくださいということを依頼する、そのような構成になっています。それでは MasterViewController.swiftのファイルも見ておきましょう。この MasterViewContoroller というのは、基本的に iPhone アプリを作ってiPhone 用のこのMaster-Detail アプリを作ったときとかなり同じような構成になっているんですが、一つ大きく違うところとしてはこの viewDitLoad の最後で行っている2行の処理、これがかなり決定的に違うところになります。ここではまず 自分を含んでいるsplitViewContrller に対してviewControllers という配列を取得します。 その配列の 2 番目を取得してくださいというふうにお願いすることによって、自分が 1 番目、そして detailViewController が2 番目ということで、自分が今からコミュニケーションしようとしているdetailViewController をここで予め取得しておくという処理が、ここの 2 行のプログラムによって書かれています。これが追加されているのが、iPhone 版のこの Master-Detail のアプリとiPad 版の Master-Detail のアプリの大きな違いになります。但し他の処理に関しては、基本的に従来の iPhone アプリのこの insertNewObject とかですねこういうメソッドを使いながら新しいデータを追加していくというところの処理は、全く iPhone アプリの場合と同じやり方で処理されていきますので、Navigation Controller が2 つあるということにだけ注意すれば、iPhone アプリと同じ感覚でiPad アプリの開発を行っていただいていいかと思います。このレッスンでは、 iPad 用のMaster-Detail 型のアプリを作成してSplit View の基本的な構成を解説しました。

SwiftによるiOSアプリ開発基本講座

このコースではiPhoneやiPadのアプリを作ってみたい方に向けて、簡単なiOSアプリを作りながらSwiftを使ったXcodeでの開発手順をひとつずつ丁寧に解説していきます。各レッスンではiOSのフレームワークの機能を確認しながら、アウトレットやアクション、MVCモデルやDelegateといったアプリ開発に必要な知識を説明します。

5時間10分 (53 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年10月15日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。