iPhoneなどのスマートフォンの普及により、携帯電話でWebページを利用できるようのなっている。 著者もiPhoneユーザーであるため、iPhoneに搭載されてるWebブラウザである「Safari」アプリケーションで、Webページを観覧することがある。
この章では、iPhoneの仕様とiPhoneアプリケーション、基本的なiPhone GUI、iPhoneに搭載されている「Safari」アプリケーションについて述べる。
iPhoneとはiPod と携帯電話、３Gインターネット通信デバイスを融合させたApple社製のスマートフォンである。最初のモデルは2007年1月に発表され、最新モデルのiPhone 4は2010年6月に発売された。日本では2008年7月11日にiPhone3Gが発売され、公式のキャリアはソフトバンクモバイル社である。 主な特徴としては、物理キーボードやスタイラスも必要なく、指で直接画面上のアイコンやキーボード、ボタン等に触れるマルチタッチスクリーン方式を採用している。さらに、iPhoneの機能やコンテンツはアプリケーションで提供され、iTunes StoreやApp Storeからダウンロードして使用することができる。他にも3軸加速度センサーや近接センサー、輝度センサー、GPSなどを搭載している。 またiOS 4.0以降ではマルチタスキングが実装された。
iPhoneは、QWERTY配列物理キーボードやスタイラスなどは必要なく、指で画面上を直接タッチして操作するマルチタッチスクリーン方式を採用している。操作法は、タップ（軽く叩く）、フリック（弾く）、ピンチイン、アウト（つまむ、広げる）などの操作により直感的な操作が可能である（図２）。文字入力は画面上に描画されたソフトウェアキーボードを用いられ、アプリケーションや使用シーンによって最適なボタン配置のキーボードを使用することができる。
さらに、iPhoneは電話であるためマイクが搭載されている。これは、通話以外にもアプリケーションのに使われたり、ユーザーが声でiPhoneを操作できる音声コントロールという機能に使われている。音声コントロールは、自分の声でiPhoneを操作して曲を再生や電話をかけることができる。
さらに、iPhoneは電話であるためマイクが搭載されている。これは、通話以外にもアプリケーションのに使われたり、ユーザーが声でiPhoneを操作できる音声コントロールという機能に使われている。音声コントロールは、自分の声でiPhoneを操作して曲を再生や電話をかけることができる。
iPhoneは様々な機能やコンテンツをアプリケーションとしてユーザーに提供する。iPhoneアプリケーションはiTunesやAppStoreからワンタップでダウンロードして簡単に利用することでき、AppStoreに提供されいるアプリケーション数は、2011年1月の時点で30万を超えている。カテゴリは「メディカル」「ブック」「ビジネス」「教育」「ファイナンス」「エンターテイメント」「ゲーム」「健康＆フィットネス」「仕事効率化」「写真」「スポーツ」「ソーシャルネットワーキング」「天気」「ナビゲーション」「ニュース」「ミュージック」「ユーティリティ」「ライフスタイル」「旅行」「レファレンス」などで、ユーザーは、仕事や娯楽、生活などの様々なシーンに適した多くのアプリケーションを利用することができる。 iPhoneアプリケーションは、ホーム画面に配置されているアプリケーションアイコンをタップすることで起動する。起動すると、アプリケーションの画面が表示され、アプリケーションを使用することができる。iOSベースのデバイス上で目にするアプリケーション画面が一度に1つである。iPhoneアプリケーションには、必要なだけ多くの異なる画面を含めることができるが、ユーザはそれらの画面を順にアクセスして見ることはできても同時に見ることはできない。
また、最前面に表示できるのは一度に1つのアプリケーションだけである。ユーザがあるアプリケーションから別のアプリケーションに切り替える場合、前のアプリケーションは終了され、そのユーザインターフェイスも表示されなくなる。4.0より前のiPhone OSでは、終了するアプリケー ションはすぐにメモリから削除されていた。iOS 4.0以降では、終了するアプリケーションはバックグラウンドに移行され、実行を継続することも、しないこともできる。この機能は、 マルチタスキングと呼ばれ、再起動されるか終了されるまで、アプリケーションをバックグラウンドに残しておくことができる。ほとんどのアプリケーションは、バックグラウンドに移行すると一時停止状態になる。ユーザーが一時停止されているアプリケーションを再起動する場合、ユーザインターフェイスを再ロードすることなく、終了した時点からの実行の再開を簡単に行うことができる。アプリケーションによっては、ユーザがフォアグラウンドで別のアプリケーションを実行している間、バックグラウンドでの実行を継続しなければならない場合がある。例えば、ユーザは、別のアプリケーションでカレンダーを確認したり電子メールを利用したりする間も、オーディオ再生アプリケーションに再生を継続することを求めるなど。
iPhoneアプリケーションには、生産性型、ユーティリティ型、没入型の3つのアプリケーションスタイルがあり、アプリケーションの使用する動機や目的、ユーザーにどうのような体験させるかによってアプリケーションスタイルを分類することができる。つまり、使用シーンによってプリケーションスタイルを使い分ける必要がある。以下で各アプリケーションスタイルについて説明する。
生産性型アプリケーションは、詳細情報の整理および処理に基づいた作業を可能にするアプリケーションである。ユーザーはある作業を達成するために生産性型アプリケーションを使用する。生産性型アプリケーションの例としては、iPhoneに標準でインストールされいる「メール（mail）」や「写真（Photos）」、「メモ（Notes）」などがある。例えば、「メール（Mail）」では、メールの作成や削除、整理、送受信などメールを使用する上に必要な作業を行う事ができる。
生産性型アプリケーションはユーザを妨げない効率的な方法が好まれる。そのためユーザ体験の焦点をタスクに当て、ユーザは必要とするものをすばやく見つけ、必要なアクションを簡単に実行し、その作業を完了させ、次の作業に進むことができるように設計されている。 また、多くの場合、生産性型アプリケーションはユーザデータを階層的に整理する。この方法では、ユーザは、必要な詳細レベルに達するまで徐々により具体的な選択を行うことで情報を見つけることが可能である。
通常、生産性型アプリケーションでのユーザ対話モデルは、次から構成される。
生産性型アプリケーションは、複数のViewを使用する傾向強く、通常、1つのViewで1つの階層レベルを表示する。ユーザインターフェイスは、単純かつ整理されていて、標準的なViewおよびコントロールから構成されている場合が多い。
ユーティリティ型アプリケーションは、最低限のユーザ入力を必要とする単純なタスクを実行する。ユーザは、ユーティリティ型アプリケーションを開いて、情報の要約を参照したり、限られた数のオブジェクトに対して簡単なタスクを実行する。「 天気( Weather)」は 簡単に目を通せる要約情報として焦点を絞った情報を表示するため、ユーティリティ型アプリケー ションの好例である。「天気( Weather)」アプリケーションを開くと、すぐに設定済みの場所の天気情報を表示される。図８に「天気( Weather)」の画面を示す。
「天気（Weather）」はユーティリティ型アプリケーションの一例
ユーザがユーティリティ型アプリケーションを使用するのは、何かの状態をチェックしたり、何かを調べたりすることが目的であるため、関心がある情報がどこにあるかをすばやく簡単に特定できることを望まれるため、ユーティリティ型 アプリケーションのユーザインターフェイスは、多くの場合、単純かつ標準的なViewおよびコントロールで構成されいる。ユーティリティ型アプリケーションは、情報をフラットな項目リストに整理する傾向がある。つまり、ユーザは通常、情報の階層をドリルダウンする必要がない。また、通常、ユーティリティ 型アプリケーションのそれぞれのViewには、同じまとまりのデータおよび同じ詳細レベルのデータが表示されますが、それぞれの情報源は異なることも可能である。このようにすることで、ユーザは1つのユーティリティ型アプリケーションを開き、複数の対象を同じように取り扱って表示することができる。ユーティリティ型アプリケーションによっては、開いているビューの数を表示することもある。つまり、ユーザはビューを次々に選択することでビューを順番に移動できる。図９に、このタイプのデータ整理の一例を示す。
ユーティリティ型アプリケーションのユーザ対話モデルは、非常に単純で、ユーザはアプリケーションを開いて、情報の概要に目を通し、必要に応じてその情報の設定やソースを変更する。ユーティリティ型アプリケーションでは、設定や情報ソースの頻繁な変更をサポートする必要があるかもしれないため、多くの場合、そのようなオプションの小さなセットをメインビューの背面に用意している。ユーザーは、メインビューの右下にある「Info」ボタンをタップすると、背面が表示され、調整を行ったら、ユーザは「完了(Done)」ボタンをタップして、メイン ビューの前面に戻る。ユーティリティ型アプリケーションでは、メインビューの背面にあるオプションはアプリケーションの機能の一部であり、ユーザが1回アクセスしたら再度アクセスすることはほとんどない環境設定のような設定のグループではないため、ユーティリティ 型アプリケーションは、「設定(Settings)」アプリケーションでアプリケーション固有の設定を提供 するべきではない。図10に、「天気(Weather)」アプリケーションのメインビューの背面に 用意されている設定オプションを示す。
没入型アプリケーションは、ゲームなどのフルスクリーンのビジュアル性に富んだ環境を提供する。ここでは、コンテンツおよびそのコンテンツを扱う際のユーザ体験に焦点が当てられる。ゲームで遊んだり、メディアを駆使したコンテンツを閲覧したり、単純なタスクを実行したりするなど何をするかにかかわらず、ユーザは多くの場合、楽しむために没入型アプリケーションを使用する。 没入型の手法を採用するのに適しているのは、独特の環境を提供し、テキストベースの情報を大量に表示することはせず、ユーザが注意を向けてくれることに対する見返りを提供するようなタスクである。例えば、ゲームの定義には適合しませんが、水準器の使用体験を再現するようなアプリケーションは、グラフィックスが豊かなフルスクリーンの環境によく合う。ゲームと同様に、このようなアプリケーションにおいてユーザが注目するのは、視覚的なコンテンツとその体験であり、体験の背後にあるデータではない。図11に、実際の体験を再現し、単純なタスクを可能にする没入型アプリケーションの一例を示す。
没入型アプリケーションは、アプリケーションの世界に入り込むという感覚を強めるカスタムユーザーインターフェイスと置き換えることで、デバイスのユーザインターフェイスの大部分を隠す傾向がある。ユーザは、探求と発見を没入型アプリケーションの体験の一部と想定しているため、標準以外のコントロールを使用することが適切である場合が多い。没入型アプリケーションは大量のデータを対象とする場合がありますが、ユーザがそれらを順番に閲覧したりドリルダウンしたりできるように整理して公開することは通常なく、その代わりに、没入型アプリケーションでは、ゲームのプレイ、ストーリー、体験の文脈に沿って情報を提供する。また同じ理由から、没入型アプリケーションでは多くの場合、ユーティリティ型アプリケーションや生産性型アプリケーションで使用される標準的なデータ駆動型の方法ではなく、環境を補完するカスタムナビゲーションによる方法を提供する。没入型アプリケーションのユーザ対話モデルは、アプリケーションが提供する体験によって決定する。ゲームでは、アプリケーション固有の設定を「設定(Settings)」で提供する必要がある可能性は低いですが、その他のタイプの没入型アプリケーションでは必要となる場合があり、また、没入型アプリケーションでは、メインViewの背面に設定オプションを用意する場合もある。
iPhoneはマルチタッチスクリーン方式であるため、ユーザーは画面上に描画されたアイコンやボタンまたはジェスチャを使ってアプリケーションの操作を行う。この項目ではiPhoneアプリケーションに使われているユーザーインターフェース要素の外観、動作について述べる。
この項目では、アプリケーション画面に使われる特別に定義された外観と動作を持つ、ステータスバー、Navigation Bar、Tab Bar、Tool Barの４種類のViewを簡単に説明する。図12にアプリケーション画面のこれらの３つのViewを示す。このアプリケーションでToolBarを使用した場合、ToolBarはTabBarの代わりに表示される。
ステータスバーは、技術的に言えばアプリケーションwindowには属さない固有のViewである。携帯電話の電波の強さ、現在のネットワーク接続、バッテリー残量など、デバイスに関する重要な情報をユーザに示す。図13にステータスバーの例を示す。
Navigation Barはアプリケーション画面の上の端、ステータスバーのすぐ下に表示され、通常、現在のビューのタイトルを表示し、アプリケーションの個々のビューの間を行き来することとViewの項目を管理する操作を提供している。
Navigation Barは図15に示すように、現在のビューのタイトルだけをビューの幅の中央に表示し、生産型アプリケーションの最初のビューでは、ユーザがまだ別の場所に移動していないため最初のビューのタイトルだけが表示される。
ユーザが別のビューに移動するとすぐに、Navigation Barはそのタイトルを新しい場所のタイトルに変更され、 前の場所のタイトルを示すラベルの付いた戻るボタンが提供される。 例として、「一般(General)」設定の「日付と時刻(Date and Time)」の設定におけるNavigationBarを図16に示す。
戻るボタンのほかにNavigation Barにはタイトルの右にボタンを保表示することも可能である。ア プリケーションが階層の移動をサポートせず、戻るボタンを表示する必要がない場合は、代わりにViewのコンテンツを管理するボタン(「編集(Edit)」ボタンなど)を、タイトルの左に表示するも可能である。図17にこの例を示す。
また、デバイスの向きを縦向きから横向きに変更すると、Navigation Barの高さも自動的に変更される。横向きの場合は、Navigation Barが薄くなり、画面のコンテンツの表示スペースが広くなる。
ToolBarは、現在のコンテキストにおいてユーザが実行できるいくつかのアクションアプリケーションに提供される。Toolbarは画面の下端に表示され、現在のViewのオブジェクトに関連するアクションを実行するボタンが表示される。例を図17に示す。
ユーザがメールでメッセージを表示すると、アプリケーションは新規メールの着信確認および新規メッセージの作成を行うための項目のほかに、メッセージの削除、返信、移動 を行うための項目を含むToolbarを提供している。このようにして、ユーザはメッセージビューのコン テキストにとどまりながら、電子メールを管理するために必要なコマンドにアクセスが可能である。
Tab Barは、アプリケーションにおいて同じデータを異なる切り口で見せたり、アプリケーション全体としての機能に関連する各種機能を提供したりする場よく使用され、アプリケーションの異なるモード間(View間)の切り替えを可能する。TabBarが画面の下端に表示される。 例えば、iPhoneのiPodアプリではTab Barを使用して、「Podcast (Podcasts)」、「アーティスト (Artists)」、「ビデオ(Videos)」、および「プレイリスト(Playlists)」など、メディアコレクションのどの部分に焦点を当てるかを選択可能である。一方、「時計(Clock)」アプリケーションでは、Tab Barを使用して、ユーザはアプリケーションの4つの機能、すなわち「世界時計(World Clock)」、「アラーム (Alarm)」、「ストップウォッチ(Stopwatch)」、および「タイマー( Timer)」にアクセスできます。図18に、Tab Barのタブを選択することで「時計(Clock)」のビューがどのように切り替わるかを示す。また、個々の「時計(Clock)」モードにおいて、Viewを切り替えてもTab Barが表示されたままになり、選択されたタブの背景が明るくなりタブの画像がハイライトされる。これによりユーザは、現在どのモードなのかを簡単に確認でき、現在のモードに関係なくすべての時計モードにアクセスが可能である。
Tab Barに含まれるタブの数が５つ以下の場合は、図19に示すように、すべてのタブTab Barに均等な間隔で表示される。
アプリケーションのTab Barに含まれるタブの数が５つを超える場合、そのうち４つをTab Barに表示され、「その他(More)」タブが追加される。ユーザが「その他(More)」タブをタップすると、図20に示すように、別の画面に追加のタブのリストが表示される。
「その他(More)」画面には「編集(Edit)」ボタンが含まれており、ユーザはこれを利用して、最もよく使用するタブを表示するようにTab Barを設定することが可能である。図21は「iPod」アプリケー ションの「その他(More)」画面の「編集(Edit)」ボタンをタップした後に表示される「配置変更 (Configure)」画面を示している。
Alert、Action Sheet、およびモーダルビューは、ユーザに注意を呼びかける場合や、アプリケーショ ンが追加の選択肢や機能をユーザに提示する必要がある場合に表示するビューのタイプである。これらのViewについて解説する。例を図22に示す。
Alert(警告)は、アプリケーション(またはデバイス)の使用に影響する重要な情報をユーザに提供する。Alertは、通常、予期せず受信する。これは、一般的に警告が、ユーザのアクションを必要とする可能性がある問題の発生または現在の状況の変化をユーザに伝えるからである。 Alertは、アプリケーション画面の中央にポップアップしそのViewの手前に浮かんで、ユーザに重要な情報を非常に目立つ方法で提示する。Alertの外観が独立しているように見えることで、警告の表示がアプリケーションまたはデバイスの何らかの変化によるものであり、必ずしもユーザが最近行ったアクションの結果ではないという事実が強調される。Alertは状況を説明するテキストとAlertを消すためのボタンが表示される。 またAlertを使用して、危険な可能性のある結果を受け入れまたは拒否する機会をに提供することも可能である。この場合、警告に2つのボタンを表示され、1つは警告を閉じてアク ションを実行するボタン、もう1つはアクションを実行せずに警告を閉じるボタンとなる。多くの場合、アクションを実行せずに警告を閉じるボタンには、「キャンセル(Cancel)」というラベルを使用される。
Action Sheetは、ユーザがアプリケーションのツールバーのボタンをタップして開始したタスクに関連付けられている選択肢の集合を表示する。次にAction Sheetが適した例を示す。
■タスクを完了できる方法の選択肢を提示する。例）「写真(Photos)」ではユーザは個々の写真を表示しているときに「送信(Send)」ボタンをタップできます。Action Sheetが表示され、写真に送信先と使用先として５つの選択肢が(送信をキャンセルする「キャンセル(Cancel)」ボタンのほ かに)ユーザに提示される。
ユーザインターフェイスの特定の場所に選択肢を置いておかなくても、Action Sheetを使用すれば現在のタスクのコンテキストに合った一連の選択肢を提示できる。
■危険な可能性のあるタスクを完了する前に、確認を求める。例）「メール(Mail)」の設定 にもよりますが、ユーザが「メール(Mail)」のToolbarの「ごみ箱(Trash)」ボタンをタップするとAction Sheetが表示され、削除またはキャンセルを開始できる。
このような状況でAction Sheetを表示すると、ユーザが行おうとしている手順の危険な影響を ユーザに確実に認識させ、選択肢をいくつか提示できる。ユーザは意図せずにコントロールをタップしてしまうこともあるため、このタイプのコミュニケーションはiPhone OSベースのデバイスでは特に重要である。 Action Sheetは常にアプリケーション画面の一番下から現れ、そのビューの手前に浮いている。ただし、警告とは異なり、Action Sheetの側端は画面の側面に固着している。また、Action Sheetには、タスクの完了方法をユーザが選ぶことができるボタンがいくつか含まれる。ユーザがボタンをタップすると、Action Sheetは消える。Action Sheetでは、ユーザにアクションの選択肢を提示する必要があるため、Action Sheetは必ず複数のボタンを備えてる。
Table View、およびWeb Viewは、iPhoneアプリケーションにおけるさまざまな用途に役立つ多目的のViewである。この項目ではその２つのViewについて説明する。
Table Viewは複数の行からなる単一カラムのリストにデータを表示する。行は、セクションまたはグループに分けることもでき、各行は、テキスト、画像、およびコントロールの組み合せて表示することもできる。行数または行のグループの場合、ユーザはフリック(はじく)またはドラッグして、情報をスクロールする。図25に、異なるスタイルのTable Viewでリストを表示するさまざまな方法を示す。
Table Viewは、大量の情報および少量の情報の両方を編成するために使われる。多数のユーザ項目を処理する傾向にある生産性型アプリケーションで最も役に立ち、ユーティリティ型アプリケーションでも小規模なTable Viewを使用するが可能である。 Table Viewは、ユーザが情報の中を移動したり情報を操作したりすることを可能にする組み込みの要素を提供する。さらに、リストの各セクションまたはグループの上下、およびリスト全体の上下に説明テキストなどのヘッダおよびフッタ情報の表示や、ユーザが一貫性のある方法でリスト項目の追加、削除、順序の並べ替えなどのリストの編集も可能である。また、TableViewは複数のリスト項目の選択および操作も可能で、これ を利用して、一度に複数の項目を削除するなど、の一括操作が可能である。 テーブルでは、ユーザがリスト項目を選択すると、その項目を含む行が一時的にハイライトされ、その選択が受け付けられたことを示すフィードバックが返され、その後、すぐにアクションが発 生する。つまり、新しいViewが表示されるか、または項目が選択されたり有効にされたりした ことを示すチェックマークが行に表示される。
Table Viewは複数の行からなる単一カラムのリストにデータを表示する。行は、セクションまたはグループに分けることもでき、各行は、テキスト、画像、およびコントロールの組み合せて表示することもできる。行数または行のグループの場合、ユーザはフリック(はじく)またはドラッグして、情報をスクロールする。図25に、異なるスタイルのTable Viewでリストを表示するさまざまな方法を示す。
Table Viewは、大量の情報および少量の情報の両方を編成するために使われる。多数のユーザ項目を処理する傾向にある生産性型アプリケーションで最も役に立ち、ユーティリティ型アプリケーションでも小規模なTable Viewを使用するが可能である。 Table Viewは、ユーザが情報の中を移動したり情報を操作したりすることを可能にする組み込みの要素を提供する。さらに、リストの各セクションまたはグループの上下、およびリスト全体の上下に説明テキストなどのヘッダおよびフッタ情報の表示や、ユーザが一貫性のある方法でリスト項目の追加、削除、順序の並べ替えなどのリストの編集も可能である。また、TableViewは複数のリスト項目の選択および操作も可能で、これ を利用して、一度に複数の項目を削除するなど、の一括操作が可能である。 テーブルでは、ユーザがリスト項目を選択すると、その項目を含む行が一時的にハイライトされ、その選択が受け付けられたことを示すフィードバックが返され、その後、すぐにアクションが発 生する。つまり、新しいViewが表示されるか、または項目が選択されたり有効にされたりした ことを示すチェックマークが行に表示される。
Table Viewの2つのスタイルがある。 一つ目のスタイルはプレーン(UITableViewStylePlain)である。このTable Viewスタイルは、画面の側端から側端まで広がる行を表示します。行の背景は白色、行はラベル付きセクションに分けることが可能で、Table View はViewの右端に沿って垂直に表示されるインデックスを任意で表示できる。図26にiPodアプリケーションのプレーンテーブル(ヘッダ、フッタ、インデックスがない)のリストを示す。
二つ目のスタイルは、グループ化(UITableViewStyleGrouped)である。このTable Viewスタイルは、画面の側端から内側に少し下がった位置に行のグループを表示する。グループ化されたTable Viewは任意の数のグループを含むことができ、各グループは任意の数の行を含むことができる。各グループの先頭にはヘッダテキストを付けることができ、フッタテキストを後に付けることができる。 図27に、各グループに1つの行が含まれる、グループ化されたテーブルのリストを示す。
Table CellとはTableViewで表示される一つ一つの行である。iPhone OS 3.0以降には、4つの定義済みのTable Cellスタイルが含まれており、プレーンテーブルとグループ化テーブルの両方のテーブル行に対して提供される。 iOSでは、デフォルト、 サブタイトル、 value 1 value 2の4つの標準Table Cellスタイルが提供されている。
■デフォルトTable Cellスタイル(UITableViewCellStyleDefault)は、任意の画像が左に配置され、左揃えの黒のテキストラベルが続いて配置される。
テキストラベルの外観は、項目名またはタイトルを表し、左揃えであることで簡単にリストに目を通すことができる。したがって、デフォルトスタイルは、区別のために補足情報を必要としないような項目のリストの表示に使われる。
■サブタイトルTable Cellスタイル(UITableViewCellStyleSubtitle)は、任意の画像が左に配置され、1行の左揃えのテキストラベルと、その行の下に左揃えの詳細テキストラベルが配置される。テキストラベルは黒で、詳細テキストラベルはより小さい、グレイのフォントで表示される。
テキストラベルの目立つ外観は項目名またはタイトルを表していることを示し、詳細テキストラベルの淡い外観は項目に関連する補足情報が含まれていることを示す。テキストラベルが左揃えであることで簡単にリストに目を通すことができ、ユーザは、テキストラベルで名前が付けられている項目の区別に詳細テキストラベルの追加情報を利用できる。
■value 1 Table Cellスタイル(UITableViewCellStyleValue1)は、左揃えの黒のテキストラベルが 表示され、同じ行に右揃えの詳細テキストラベルがより小さい、青のフォントで表示されます。 画像はこのスタイルでは適切ではありません。
テキストラベルの外観は項目名またはタイトルを表していることを示し、詳細テキストラベルの外観は項目に密接に関連する重要な情報が含まれていることを示す。 テキストラベルの左揃えとフォントは、ユーザがリストに目を通して必要な項目を探すことができ、詳細テキストラベルの右揃えの表示は、関連情報ユーザに提供する。
■value 2 Table Cellスタイル(UITableViewCellStyleValue2)は、右揃えの小さな青のフォントで テキストラベルが表示され、同じ行に左揃えの詳細テキストラベルがより大きな、黒のフォン トで表示されます。画像はこのスタイルでは適切ではありません。
テキストラベルの右揃え、制限された幅、フォントは、より目立つ左揃えの詳細テキストラベルの重要情報に対する、見出しとして機能している。 このレイアウトでは、ラベルは、各行の同じ位置で互いに向き合うように配置される。
Web Viewは、アプリケーション画面に豊かなHTMLのコンテンツを表示できる領域である。例えば、「メール(Mail)」はWeb Viewを使用して、メッセージの内容を表示します。これは、プレーンテキストのほかに要素が含まれている場合があるからです。図31にこの例を示します。
Web Viewは、Webコンテンツの表示のほかに、開いているWebページの間の移動も提供する。
この項目では、アプリケーションの任意のViewで使用できるコントロールについて説明する。角丸短冊ボタン、SegmentedControlについて述べる。
角丸矩形のボタンは、アクションを実行するためにViewで使用できる多用途のボタンである。例えば、図32に示すように、特定の個人の「連絡先(Contacts)」Viewの一番下にある「SMS/MMS (Text Message)」ボタンおよび「よく使う項目に追加(Add to Favorites)」ボタンは角丸矩形のボタンである。
Segmented Controlは、直線形のセグメントセットである。それぞれのセグメントは、異なるビューを表示できるボタンとして機能し、ユーザがSegmented Controlのセグメントをタップすると、瞬間的なアクションまたは目に見えるアニメーションが発生してViewを切り替える。例を図33に示す。ユーザがSegmented Controlを使用して、電子メールのプロトコルを選択すると、「設定(Settings)」は異なる情報を表示する。
iPhoneでWebページを表示するときは「Safari」アプリケーションを使う（以下Safariアプリ）。Safari アプリはiPhoneに標準で搭載されている携帯専用のWebブラウザである。この項目では、iPhoneに標準搭載されているWebブラウザである「Safari」アプリについて述べる。 まず、Safari アプリでWebページを表示するには、アプリ上部にあるアドレスバーにアドレスをいれるか、検索バーを使う、もしくはブックマークから表示したいWebページを選択する。
iPhoneを横向きにすると、Webページもそれに合わせて表示される。縦でWebページを見たときより、テキストの表示幅が広り、文字も大きくなるため、若干見やすくなる。
Safari アプリのToolBarには戻るボタン、進むボタン、アクションシートを開くボタン、ブックマーク、表示可能な別のWebページの選択ページがある。アクションシートには、表示されているWebページに対して実行可能なタスクを表示する。実行可能なタスクは、ブックマークの追加、現在開いているWebページをホームに設定する、表示しているWebページのへのリンクをメールで送信する、Webページを印刷するの４つである。
safariはサイト閲覧時に見たい箇所をダブルタップすることで、その箇所を拡大してくれる。また、2本の指を使って見たい箇所を中心にして指を広げることで拡大できる。下記の写真は拡大した図37に示す。
複数のページを開いている際には画面右下のアイコンをタップすることで、下の画像のような状態になり、各ページを左右にフリックして行き来することができる。ToolBar左下の「New Page」をタップすると新しい空白ページが追加される。ページを閉じたい場合はページ左上の「×」をタップする。このページは８枚まで追加できる。
画像を長押しすることで写真フォルダにその写真を保存することができる。また、リンクも同様なのですが、普通にタップすると同じページで開き、長押しすると新規ページで開くオプションから新しいページで開くことができる。
iPhoneは、Javascriptエンジンを内蔵しAjaxアプリケーションを利用可能である。RSSやSVC、タブブラウズにも対応している。しかし、javaアプレットおよびFlashには対応していない。
この章では、本研究の目的、WWWブラウザとiPhoneの違い、既存のWebページをSafariアプリで利用するときの問題、既存WebページのiPhoneアプリ化の利点を具体的に述べ、最後に既存WebページをiPhoneアプリ化する開発手法について例に沿って明らかにしていく。
本研究では、既存をWebページをiPhoneアプリ化する開発手法について研究した。 iPhoneでWebページの情報を利用するときは、iPhoneに標準で搭載されているWebブラウザであるSafariアプリを使用する。既存のWebページの多くは、デスクトップやラップトップパソコンで使われるWWWブラウザに最適化されている。そのため、Safariアプリでは、iPhoneとSafariアプリの仕様から、Webページの情報を十分に活用できないことがある。そこで、既存のWebページをiPhoneアプリに移植することを考える。既存WebページをiPhoneアプリかすることで、Webページの活用できる情報を増やすことができる。しかし、一つ一つのWebページをアプリ化していくのは労力と時間が非常に掛かり、効率的でない。そこで本研究では、既存をWebページをiPhoneアプリ化する開発手法を明らかにする。
この項目では、WWWブラウザとiPhoneの仕様の違いについて述べる。iPhoneアプリ化するにあたりWWWブラウザとiPhoneの違いを考慮する必要がある。はじめに、WWWブラウザの特徴から述べ、次にWWWブラウザとiPhoneの異なる点について述べる。
この項目では、WWWブラウザの基本的な特徴について述べる。 WWWブラウザの表示領域の大きさは、ディスプレイの大きさで決まる。また、PC画面上で複数のウィンドウを同時に表示するマルチウインドウである。さらに、近年ではタブを用いて一つのウィンドウ内で複数のWebページを切り替えて表示することができる。 次に、ユーザーインターフェースは、主にマウスなどのポインティングデバイスとキーボード操作によってを行われる。ユーザーは画面上に描画されたボタンや項目をほとんどクリックするだけでネットサーフすることができる。そのような操作を可能にしているのが、WWWブラウザ上に実装されている戻るボタンや、進むボタン、ホームボタン、ブックマーク、右クリックやそれに伴うプルダウンメニューなどである。これによりユーザーはほとんどマウスをクリックするだけでほとんどの操作を行うことができる。 また、WWWブラウザにはJavascriptなどのスクリプトエンジンなどを搭載している。プラグインなどの仕組みによってブラウザを拡張することができる。例えば、JavaプラグインやAdobe Flashなどがあり、それらを利用することにより、動画やアプリケーションなどをWebページ上に組み込むことができる。
この項目では、WWWブラウザとiPhoneの違いについて述べる。 まず、iPhoneの表示領域の大きさは3.5インチで、WWWブラウザと比べると非常に小さい。 次に、ユーザーがiPhone上で目にするアプリケーション画面は一度に一つであるため、表示できるウィンドウはマルチウィンドウではない。 続いて、ユーザーインターフェースは、WWWブラウザがマウスを使用するのに対して、iPhoneのユーザーインターフェースは、マルチタッチスクリーンであるため、指で画面を直接触って操作するマルチタッチ方式である。操作法は、タップ（軽く叩く）、フリック（弾く）、ピンチイン、アウト（縮小、拡大）などの操作により直感的な操作が可能である。また、指を使って操作することの利点は、指はいつでも使うことができ、さまざまな動きが可能であること、マウスなどの外部入力デバイスなどでは得られない、デバイスに対するじかの接触感とつながりを感じることがである。しかし、指は、そのサイズや形状、指の持ち主の器用さにかかわらず、マウスポインタよりもかなり大きいということが短所である。そのため、その面積より小さい領域を正確にタップすることは難しい。対して、マウスポイントは、ディスプレイ画面に対して、正確にクリックしたい場所をクリックできる。 次に、文字入力は、WWWブラウザが、キーボードを使用するのに対して、iPhoneは画面上に描画されたソフトウェアキーボードを用いられ、アプリケーションや使用シーンによって最適なボタン配置のキーボードを使用することができる。また、マイクが搭載されているため、音声認識を利用して文字入力することもできる。例えば、「Google Mobile App」アプリケーションでは、ユーザーはインターネットで検索したい単語や文章を話すと、その音声を認識して、それをインターネット検索して、結果を出力する。
この項目では、WebページをSafariアプリで観覧したときに起こる問題点について述べる。 まず、ユーザーがWebページの構造を把握しにく点があげられる。既存Webページは、WWWブラウザに最適化されている。Safariアプリでは、既存Webページを表示する場合、Webページ全体を画面内に収めて表示するため、Webページ全体が縮小されてページ全体を把握しにくい。全体が把握しにくいと、ユーザーは目的のコンテンツに到達しにくくなる。 次に、操作ミスが起こりやすくなることも考えられる。Webページのリンクをタップしたり、スクロールしたり、拡大するといった操作はWebページが表示されてるViewを上を触る必要がある。その場合、カテゴリメニューのようなリンクが密集した部分のでは、指が複数のリンクを一度にタップしてしまい、目的以外のリンクをタップしてしまうことが起こる。また、スクロール時にリンクをタップしてしまうなどの操作ミスをしてしまいやすい。 さらに、iPhoneはFlashコンテンツが利用できないことが挙げられる。既存のWebページはFlashを用いたものが非常に多い。しかし、iPhoneはFlash非対応であるため、Webページに組み込まれた動画などのFlashを用いたコンテンツは利用出来ない。また、ページ全体にFlashが使われているようなページはほとんど見ることができない。
この項目では、前述の問題点を踏まえた、既存WebページをiPhoneアプリ化する利点を述べる。 既存WebページをiPhoneアプリ化することで、WebページのコンテンツをiPhoneに最適化して表示することができる。たとえば、既存のWebページはパソコン向けにWWWブラウザに最適化されているので、Safariアプリで表示するとWebページ全体把握しづらかったり、文字が小さく表示されるため拡大しなければならなかったりする。WebページをiPhoneアプリ化することで、Webページ全体を把握しやすく表示して目的のコンテンツを利用しやすくしたり、文字フォントも読みやすい大きさではじめから表示できる。また、iPhoneアプリで使われるボタンなどのユーザーインターフェースは、指で操作しやすい大きさにすることが推奨されているため、誤操作を起こしにくくなる。また、ユーザーはiPhoneのユーザーインターフェースを使うことに慣れていると考えられるため、アプリの使い方を理解しやすい。 図42にWebページをiPhoneアプリ化した例を示す。
例 モスバーガー
また、iPhoneにはGPSや音声認識、加速度センサーが搭載されているため、それらの情報をアプリケーションで利用できる。モスバーガーアプリでは、一度のタップで、GPS情報から現在地から最寄りのモスバーガーを検索することができる。
また、アプリ内に動画を組み込むことができる。Webページに組み込まれている動画は多くがFlashであり、iPhoneでは見ることができない。しかし、再生可能な形式の動画ファイルをアプリ内に組み込むことで、Webページで動画を見るように、アプリケーション内で動画を再生することができる。Safariアプリでは、モスバーガーの公式ページのCM動画を再生できないが、モスバーガーアプリでは、動画を再生することができる。
この項目では、Webページの構造をiPhoneアプリ化する手法を例に沿って解説する。例には東京電機大学入試netを用いる。
この項目では、東京電機大学入試netの構造についてのiPhoneアプリ化手法について述べる。図46に東京電機大学入試neのトップページを示す。トップページには、Flash、ニュース、ナﾋﾞゲーションがある。また、東京電機大学入試netのナビゲーションは、グローバルメニューである。グローバルメニューとは全てのページにあるリンクメニューである。そのため、サイト内のどのページからでも、ナビゲーションのページには自由に行き来できる。東京電機大学入試netでは、TOP、TDUの特徴、大学・大学院、入試情報、進路・就職、キャンパスライフ、受験生イベントのリンクがグローバルメニューである。グローバルメニューの構造図に図47に示す。
この項目ではHomeViewを使った開発手法について述べる。HomeViewとは、各コンテンツViewへ移動するだけのボタンをおいただけのである。アプリケーションが起動すると一番最初にHomeView表示される。各コンテンツ名のボタンをタップすると、各Viewに移動する。移動した各Viewには、HomeViewに戻るボタンを設置し、コンテンツViewを切り替えるときは必ず一度HomeViewに戻るようにする。HomeViewの構成はViewにアトム画像を配置し、その上に角丸短冊ボタンをグローバルメニュー名で名前を付けて縦に並べ配置した。ボタンをタップされると目的のViewが生成され、移動する。
この構造は、グローバルメニューの構造を再現出来ていない。グローバルメニューはすべてのページからグローバルメニューのページにアクセスできなければならない。上記の構造では、Viewを切り替えたいときは、必ずHomeViewに戻らなければならない。 HomeViewの利点は、自由なデザインで作成できるため、グローバルメニューの個数をきにする必要がない。Webサイトトップページのflashがあると華やかなように、起動時のViewを綺麗に見せたり、インパクトに見せたりすることがきる。
この項目ではHomeViewを使った開発手法について述べる。HomeViewとは、各コンテンツViewへ移動するだけのボタンをおいただけのである。アプリケーションが起動すると一番最初にHomeView表示される。各コンテンツ名のボタンをタップすると、各Viewに移動する。移動した各Viewには、HomeViewに戻るボタンを設置し、コンテンツViewを切り替えるときは必ず一度HomeViewに戻るようにする。HomeViewの構成はViewにアトム画像を配置し、その上に角丸短冊ボタンをグローバルメニュー名で名前を付けて縦に並べ配置した。ボタンをタップされると目的のViewが生成され、移動する。
この構造は、グローバルメニューの構造を再現出来ていない。グローバルメニューはすべてのページからグローバルメニューのページにアクセスできなければならない。上記の構造では、Viewを切り替えたいときは、必ずHomeViewに戻らなければならない。 HomeViewの利点は、自由なデザインで作成できるため、グローバルメニューの個数をきにする必要がない。Webサイトトップページのflashがあると華やかなように、起動時のViewを綺麗に見せたり、インパクトに見せたりすることがきる。
この項目では、TabBarを使った開発手法を解説する。 もう一つの方法は、表示画面下部TabBarを常に表示させておくを使う方法である。TabBarとは、アプリケーションにおいて同じデータを異なる切り口で見せたり、アプリケーション全体としての機能に関連する各種機能を提供したりする場合によく使用され、アプリケーションの異なるモード間(View間)の切り替えを可能する。TabBarを用いてグローバルメニューのView切り替えおこなうことで、すべてのViewにTabBarが表示されるため、いつでもグローバルメニューのViewへ切り替えることができる。TabBarを用いれば、グローバルメニューのようなWeb構造のWebページを再現することができる。
このように、TabBarを用いれば、多くのWebサイトで採用されているグローバルメニューのような構造を再現することができる。しかし、常に表示して置くことができるタブの数は最大5つとなっているため、東京電機大学入試netのグローバルメニューすべてを常表示しておくこはできない。
図50に大学・大学院ページのページを示す。「大学・大学院」のページの右側には、各学部の紹介ページへリンクが貼られている。また、このリンク先のページすべてにこのメニューが表示されている。さらに、図50のコンテンツには各学部に含まれる学科が把握できるようになっていおり、クリックすると各学部の紹介ページに移動する（青枠）。このようなWebページの構造の開発手法について述べる。
この項目では、階層になっているWebページの構造の開発手法について述べる。 このページでは、TableViewのグループ表示を用いてViewを作成した。 Table Viewは複数の行からなる単一カラムのリストにデータを表示し、グループ化すると、画面の側端から内側に少し下がった位置に行のグループを表示する。グループ化されたTable Viewは任意の数のグループを含むことができ、各グループは任意の数の行を含むことができる。各グループの先頭にはヘッダテキストを付けることができ、フッタテキストを後に付けることができる。 実際には、TableViewのヘッダー部分に、学部名を表示し、グループ内にその学部の学科の名称を記述した。こうすることで、一つのViewで学部に含まれる学科を把握することができる。 そして、グループ内のリストをタップすると、その学部の紹介ページを表示するようになっている。 紹介ページについては、次の項目の知識情報ページで説明する。 図51に、作成したViewを示す。
ここでは知識情報を提供するページをiPhoneアプリケーションに実装方法を説明する
図52に「TDUの特徴」のページを示す。
このページはTDUの特徴を5つの項目で紹介しており、スクロールすることですべての情報を見ることができる。ニュースページはほぼ文字のページであった。しかしこのページは画像などを使い綺麗なレイアウトで表示されいる。そのためこのページと同じようなレイアウトで表示させた。また、このViewではページにある必要のない情報は取り去りTDUの特徴の内容だけを抽出し表示した。 具体的にはURLからWebページからデータを取り込み、解析・ソースコード生成し、WebViewで表示している。Webページと同様に画像やテキストを表示し、上下にスクロールすることでページ全体を見ることができる。このような手法は、情報の更新が少なく、Webページのレイアウトをそのまま使いたいときに有効であると考えられる。 図53に作成したTDUの特徴のViewを示す。
この項目では、RSS情報をiPhoneアプリに実装する方法を解説する。
この項ではRSSの実装について説明する。 RSSとはWebサイトの見出しや要約などのメタデータを構造化して記述するXMLベースのフォーマットである。主にサイトの更新情報を公開するのに使われている。RSSで記述された文書にはWebサイトの各ページのタイトル、アドレス、見出し、要約、更新時刻などを記述することができる。RSS文書を用いることで、多数のWebサイトの更新情報を統一的な方法で効率的に把握することができる。次ページにRSS情報の例を示す。赤枠で囲まれている部分が一つの記事になっており、一つのRSS情報に複数の記事情報が含まれている。この情報を分析し、情報を活用する。
RSSの例
このニュース情報は、RSSで配信されている。RSS情報を取得し、iPhoneで実装する方法を示す。
図54から、更新情報はタイトルと更新日が一覧で表示されている。そしてタイトルをクリックすると記事内容ページに移動する。そのため、まずRSS情報から、タイトルや、情報ページのURLなどの必要な情報を抽出しておく。その記事情報を記事タイトル一覧で表示し、タイトルを表示された項目をタップすると記事詳細Viewに移動するように実装する。iPhoneアプリで一覧表示を表現するために、TableViewを使った。
また、情報の種類は「入試センターニュース！」と「TDUトピック」の２つである。図では一つのページに二つの情報が表示されている。しかし、iPhoneは画面サイズが小さくため、一つのViewで二つの情報を表示させると見づらくなってしまう。そのため、情報の種類別に表示を切り替える方法が必要となる本研究で実装した方法は、TableViewに読み込ませる情報を切り替える方法である。画面下部にセグメントコントロールを設置し、ボタンを押すとTableViewが読み込むRSS情報を切り替えるように実装した。
この項目ではRSSから取得したニュース情報を表示したViewについて説明する。
図57にTDU入試netの「入試センターニュース」のニュース内容ページを示す。ニュース一覧からニュースタイトルをクリックするとニュース内容ページに移動する。このようにニュースを選択するとニュース内容が表示されたViewへ移動するような実装を行う。
図58にニュース一覧Viewとニュース内容のViewを示す。ニュース一覧が表示されたTableViewのニュースタイトルのセルををタップすると、ニュースの内容を表示したViewが表示される。ニュース内容ViewはRSS情報から抽出したニュース内容ページへのURLへアクセスしWebViewで表示する。
また、ニュース内容のViewにもセグメントコントロール用い、「次の記事」「前の記事」を実装した。「次の記事」をタップすると表示されているニュースの次のニュース、（ニュース一覧Viewでいうと一つ下のニュース）の内容を表示し、「前の記事」をタップすると前のニュース（ ニュース一覧Viewでいうと一つ上のニュース）を表示する。このようにすることによってユーザーはViewを一つ戻らずにニュース内容のView間を移動することができるようになる。
この項目では、既存WebページのiPhoneアプリ化における開発手法をまとめる。
トップページをiPhoneアプリ化する方法として、HomeViewを作成する方法を提案した。 HomeViewはアプリケーションを起動時に初めに表示し、トップページのような働きをする。Viewと呼ばれる画面に背景画像を配置し、Flashと対応づけた。そしてその画面上に角丸ボタンを用いてナビゲーションのリンクリスト縦に並べて配置した。各ボタンを個々のViewに関連付け、ボタンをタップすることで関連付けられたViewに移動する。このようにすることでトップページのFlashとナビゲーションを実装することができる。 また、グローバルメニューをTabBarを用いて実装した。TabBarは下端に常に表示される。TabBarのタブボタンにナビゲーションのリンク先の各Viewを関連付けることで、ユーザーはどのViewでもViewのの切り替えが可能になる。よってTabBarを用いることでグローバルメニューのようにどのViewにからでもViewの切り替えが可能にすることができる。
ニュースはRSS配信されていることが多いのでRSS情報を用いて実装する。RSS情報から、ニュースのタイトルやなどの情報を分析・抽出する。抽出した情報をTableViewを用いることで、ニュース記事をリスト表示することができる。そして、リストの行ととニュースの詳細関連付け、タップすると記事詳細Viewに移動させる。 また、ニュースのRSSフィードが複数の場合、SegmentedControlを用いることで、表示するRSSフィードを1タップで切り替えることができる。ニュース詳細ページにおいてはSegmentedControlによってニュースを前後に切り替えることができる。
サブメニューを実装するにはTableViewを用いる。TableViewでサブメニューのリンクをリスト表示する。TableViewの行をタップするとサブメニューのリンク先のViewに移動するようにする。また、TableViewのGroupスタイルを用いることで、サブメニューの下位のリンクも一度に表示することができる。サブメニューをTableViewのヘッダに表示し、行にサブメニューの下位のリンク先のViewのタイトル表示とリンク先のViewを関連付ける。この手法を用いることでサブメニューやその下位のメニュー、リンクを一覧で表示することができる。
Webページのコンテンツの部の情報をレイアウト崩さずにiPhoneで表示する。その場合、WebページをそのままiPhoneで表示したのでは、Webページが最適化れていないので、必要な情報だけを抽出して表示する。WebページからHTMLデータを取得し、必要なコンテンツ情報だけを抽出し、新たにHTMLを作成し、WebViewで表示する。このようにすることで、WebページのコンテンツだけをiPhoneで最適化して表示することができる。
この章では、本研究で作成したアプリケーションの是非を述べる。
作成したHomeViewは、背景にTDUの画像を配置し、TDU入試netのナビゲーションを角丸ボタンを用いて、縦にリンクリストを表示したことで、Webページのトップらしい画面にすることができた。Webページのナビゲーションは、横にリンクリストな並べているため、iPhoneではリンクリストをすべて表示すると文字が小さくなってしまい見づらい。拡大すると限られたリンクしか表示することが出来ず、横にスクロール必要がある。HomeViewは、リンクボタンを見やすい文字サイズで縦にならべて配置しているため、すべてのリンクを一度に見ることが出来る。これにより、拡大やスクロールの必要がなく、一度にリンクリストを見ることができる。よってこの手法はトップページを実装する方法として有効である。 しかし、HomeViewからリンクリスト中のViewを移動してから別のViewに移動する場合、一度HomeViewに戻り、他のリンクボタンをタップ必要がある。そのため、階層が深いViewほど、Viewに移動する必要がある場合、手順が多くなってしまう。
TabBarを用いてグローバルメニューのようにどのViewにおいてもView切り替えを行えるようにした。HomeViewでは、リンクリスト中のViewを移動してから別のViewに移動する場合、一度HomeViewに戻り、他のリンクボタンをタップ必要があった。TabBarは、アプリケーション中のどのViewにも一貫して表示されるため、どのViewからでもリンクリストのViewへの移動が1タップで可能になった。現在表示されているViewは関連付けられたタブボタンがハイライトされるので、ユーザーは自分の見ているViewを確認できる。 しかし、TabBarのタブボタンは最大で５つまでしか常時表示しておくことができず、ナビゲーションが6つ以上ある場合は、別Viewに表示しきれないリンクを表示される。そのため、すべてのナビゲーションのリンクを表示することはできない。 また、常に下端に表示されるので、Viewの領域を狭めてしまう欠点もある。
ニュースのViewは、TableViewとNavigationBar、SegmentedControlを用いて実装した。Webページでは、ニュースのタイトルが縦一覧で表示され、２つのニュースが縦に並べられて表示されている。 TableViewを用いることで、ニュースタイトルを適当な文字の大きさでリスト表示することできた。記事はスクロールすることですべて見ることができた。 また、ニュースが2つあるが、Webページのように2つ縦にならべるように、ニュース別の２つのTableViewを縦に並べて表示してまうと、2つ目のニュースにたどり付きにくくなってしまう。そこで、SegmentedControlを用い、セグメントごとにTableViewに表示させるニュースのデータを切り替えるように実装した。このようにすることで1タップで表示するニュースのViewを切り替えることができるため、ユーザーは少ない操作で目的のニュースをみることできる。これはニュースもフィードの数が2つ以上でも可能である。セグメントを増やすことで、切り替えられるデータの数を増やすことできる。しかし、セグメントをの数と表示する文字が増えると、セグメントの大きさが小さくなる。そのため、セグメントが指で押せる大きさまでが限度である。それを超えてしまう場合は、TableViewでフィードのリストを作りそこからニュース記事の一覧に移動するように実装することで、多数のRSSフィードを少ない手順で切り替えることができる。 ニュース詳細を表示したViewは、記事タイトルの行をタップすることで移動することができる。Webページでは記事の詳細からまた記事一覧にもどるときブラウザの戻るボタンを使う。ニュース詳細のViewから記事タイトル一覧のViewにもどる操作はNavigationBarを用いて実装した。NavigationBarを用いることで、移動先のViewに前のViewに戻るボタンが表示される。これによりView間の行き来が可能にすることができた。 また、次々に記事を見たい場合、記事タイトルに戻って行を選択する操作を繰り返すの効率的ではない。そこで、先のSegmentedControlを用いて、”次の記事”、”前の記事”セグメントを作成し、1タップで表示するデータを切り替えられるよにした。このようにしたことにより、ユーザーが一つViewを戻って次の記事を選択する操作を省くことができた。
TDUの特徴の情報をレイアウト崩さずにiPhoneで表示した。WebページからHTMLデータを取得し、必要なコンテンツ情報だけを抽出し、新たにHTMLを作成し、WebViewで表示する。作成したViewは、Webページのヘッダ部や、ナビゲーション、サブメニューなど情報を削除され、TDU特徴の情報のみを表示することができた。レイアウトをあまり崩さず、文字の大きさも適当な大きさに表示することができた。 しかし、画像を最適化して表示することが出来なかった。iPhoneの画面と画像の比があわず、そのまま表示すると、画面外に画像が飛び出してしまう。また、画像を画面内に収めてて表示すると、小さくなりすぎていしまい画像に表示されている文字が読めなくなってしまう。このため、画像を取り込み、リサイズを行う必要があった。
学部・学科Viewは、TableViewGroupスタイルを用いて実装した。Webページでは、学部とそれに属する学科が一目でわかるページがある。TableViewGroupスタイルのヘッダに学部名、行に学科名を表示することで、Webページのように、学部とそれに属する学科を一目で把握することができるようにすることができた。 ここで、学科の行をタップすることで、学部に属する学科の紹介Viewに移動するが、このViewは一つのViewで学部に属するすべての学科を紹介している。そのため、TableViewのグループ内のどの行をタップしても同じ学部紹介Viewに移動してしまい、目的の学科の紹介が見つかるまでスクロールしなければならない。Webページの場合は、1ページで紹介しているが、学科のリンクをクリックすると、その学科の紹介している部分までページが移動し表示される。そのため、各学科ごとに紹介Viewを作成し表示する必要があったと考えられる。
本研究では、既存WebページのiPhoneアプリ化の開発手法について述べた。 実際に「TDU入試net」のWebサイトをiPhoneアプリ化し、次のような手法を得た。
本研究の実装例で用いたWebページの構造は、標準的なWebページの構造といえる。よってこの手法は標準的なWebサイトで有効である。 しかし、本研究でiPhoneアプリ化が可能なのは、標準的なWebページの構造の場合のみである。そこで、今後は特徴的なこ構造をもつWebページにも対応した開発手法を研究していきたい。