【コラム】

プログラミング未経験者のための「iPhoneアプリの作り方」

5 iPhoneとiPadの違い

 
  • >
  • >>

5/5

Popoverを使ったiPadアプリ作成に挑戦

iPhoneとiPadの多くの機能は第1回で説明したiOSで動作するため、共通のものだが、iPad専用の機能も存在する。今回はその中のひとつ、popover segueを使ったアプリ作成に挑戦してみよう。

メイン画面の作成

まず、前回と同様にプロジェクトを作成する。テンプレートは「Single View Application」を選択する。

次に、プロジェクトファイルの名前を決める。ここでは仮に、Project Nameを「Sample_popover」とし、Organization NameとCompany Identifierは「STS」と入力しよう(名前は自由に決められる)。入力が終わったら、「Next」をクリックする。続いて、ファイルの保存場所を指定し、「Create」をクリックする。

続いて、popoverを表示する元となるNavigationバーを設置する。今回はiPadアプリを作るため、MainStoryboard_iPad.storyboardを表示し、メニューバーのEditorにて、Embed Inの「Navigation Controller」を選択する。

Navigation Controllerの追加

加えて、Navigationバーのタイトルを付ける。インスペクタペインの「Attributes inspector」にてTitleに「Top」を入力する(名前は自由に決められる)。

Navigationバーのタイトル設定

さらに、NavigationバーからPopoverを呼び出すためのボタンを配置する。ライブラリペインのBar Button Itemをドラッグで配置する。

Bar Button Itemの追加

加えて、Navigationバーのタイトルを付ける。インスペクタペインの「Attributes inspector」にてTitleに「Push」を入力する(名前は自由に決められる)。

Bar Button Itemのタイトル追加

Popover表示用画面の作成

続いて、Popover表示用画面を作成する。今回遷移先画面はリスト表示用のTableViewを使う。

まず、ライブラリペインのTableView Controllerをドラッグで配置する。

TableView Controllerの追加

次にインスペクタペインの「Attributes inspector」にてPopoverで表示する画面サイズを設定する。

Popover画面のサイズ設定

最後に、popover segueを作成する。Bar Button Itemを選択し、Controlキーを押しながらさきほど作成した画面にドラッグする。

画面遷移の追加

ドラッグすると、Selection Segueが表示されるので、popoverを選択する。

popover segueの設定

アプリの実行

さあ、これでプログラムが完成した。今回はiPhoneではなく、左上がiPadシミュレーターとなっていることを確認し、三角ボタンを押して、プログラムを実行しよう。

iPadシミュレーターの実行

iPadシミュレーターにて作成したiPadアプリ画面が表示される。Pushボタンを押して、Popover画面が表示されたら成功だ。

iPadアプリ実行画面

iPhone、iPadの違いとテンプレート

最後に、iPhoneとiPadの違いについて説明しよう。iPadではiPhoneと同等の機能の他に、画面サイズの大きさを生かした2画面構成を表示する機能が用意されている。

この機能については、プロジェクトを作成する際に選択するテンプレートを例にすると理解しやすい。テンプレートはユニバーサルアプリとなっている。ユニバーサルアプリとはiPad、iPhone両方で動作するアプリだ。それでは、iPhoneとiPadで動作の違う2つのテンプレートを紹介しよう。

Master-Detail Application

リストとその詳細を表示するアプリケーションだ。iPhoneではリストを選択すると、詳細を表示するのに対して、iPadではSplitビューと呼ばれるリストと詳細の両方を表示する画面となる。

テンプレート:Master-Detail Application

Utility Application

メイン画面と設定画面を表示するアプリだ。iPhoneは「info」を押すと全画面表示されるのに対して、iPadは今回紹介したアプリと同様にPopoverを使った画面となる。

テンプレート:Utility Applictaion

今回作成したアプリは仕組みの理解のため、1つ1つステップがわかるよう説明したが、このようなテンプレートを使うことで、はじめからある程度用意された状態で開発スタートすることが可能だ。

本連載では、プログラミング未経験者を対象に、主に画面操作でのアプリ作成方法を紹介した。これでアプリ作成の大まかな流れを理解できたのではないだろうか? 今回の内容を元に、プログラミングを加えていけば、高度なアプリ開発も可能だ。 これを機会にぜひ、プログラミング言語も勉強し、自分の思い通りのアプリを作成して欲しい。

執筆者紹介

福島 賢治(FUKUSHIMA Kenji)


株式会社システムサポート 大阪支店 ビジネス推進課所属。コンシューマ向けゲーム会社を経て、現職。組み込み開発、Web開発やインフラ構築などに携わり、iOS系では自社アプリ「猫と学ぶ旅行英語 Lite(e-messe kanazawa 2011優良企画案賞)」の企画・開発にも携わる。

現在は、自社アプリ「マッププランニング」の開発を担当。また、iPadアプリ作成をテーマとした高校生向け教材も作成し、2012年関西大学高等部2013年岸和田高校へ提供した

  • >
  • >>

5/5

インデックス

連載目次
第5回 iPhoneとiPadの違い
第4回 複数画面のアプリを作る(2) - Segueで実装する
第3回 複数画面のアプリを作る(1) - Segueを理解する
第2回 簡単なプログラムを作る - storyboardの便利な使い方
第1回 iPhoneアプリの仕組みを学ぶ
関連キーワード


関連製品をチェック

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

スタンディングしたまま仕事も! 最大50cmまで高さ調節できるパソコン台
[17:48 8/29] パソコン
上海問屋、キャリーバッグ型でキュートなiPhoneケース
[17:47 8/29] スマホとデジタル家電
LINE、PCやタブレットからも新規登録が可能に
[17:46 8/29] スマホとデジタル家電
佐川やヤマトなど、東京メトロを活用した物流実証実験
[17:45 8/29] 企業IT
超人的聴覚の殺人犯から逃げられるのか…息もつかせぬホラーが1位 - 北米週末興収
[17:33 8/29] エンタメ

求人情報