スマートデバイスアプリケーションのためのアーキテクチャに関する研究—画面サイズへの適応可能性に関する考察—
2011SE291 山田晋平 2011SE305 矢野朱理
指導教員：野呂昌満

はじめに1

チャが提案されている．共通アーキテクチャは，複数のプラットフォームが混在する現状での開発支援を目的とし，スマートデバイスの多様化によって，多くの画面サイ様々な環境におけるアーキテクチャが説明可能である．共ズ・画面解像度が存在することで，ユーザインタフェース

通アーキテクチャと様々な環境のアーキテクチャとの対応において画面表示に関する問題が生じる．例えば，過度な関係から，アプリケーション間の変換を可能とし，クロススクロール・拡大を要するレイアウト，また，不適切な文プラットフォーム開発が可能となる．図１は提案されてい字や画像のサイズに関連するもの等が挙げられる．

る共通アーキテクチャである．

Web における上記の問題は，レスポンシブ Web デザイ
ン [1] アプリケーション開発で解決可能である．レスポン
シブ Web デザインは，異なる実行時環境に応じて，適切なビューを構築する技術である．
ネイティブアプリケーションにおいては，上記の問題に対応する技術は確立されていない．多様な画面サイズ・画面解像度において，適切なビュー構築を行わなければならない．開発環境ごとに，適切なビュー構築のための仕組みは異なり，アプリケーション開発コストが増加する．
本研究の目的は，ネイティブアプリケーションにおけるレスポンシブ Web デザインの実現方法の整理である．ここで整理とは，ネイティブアプリケーションにおいて，レ
図 1 共通アーキテクチャ

スポンシブ Web デザインの技術要素と等価となるライブラリを定義することである．結果として，画面サイズ・画面解像度に応じたビューの構築を支援する．
レスポンシブ Web アプリケーションの抽象化を行い，レ2.2

レスポンシブ Web デザイン

スポンシブネイティブアプリケーションを作成する．レス

レスポンシブ Web デザインとは，PC のディスプレイをポンシブ Web デザインと対応するネイティブアプリケー想定して作られている Web ページを，スマートデバイスションのライブラリを定義する．Web アプリケーションで適切に表示させるための技術である．

レスポンシブ Web デザインは，CSS(Cascading StyleSheet)の技術である．各種端末に合わせた外部表現を統一的に整理する．その際に，ユーザインタフェースを持つアプリケーションに有効な MVC アーキテクチャを用い CSS を複数持つことで保持する．レスポンシブ Web デザ，フルードグリッたい．本研究室で提案されている共通アーキテクチャは， インは，メディアクエリ（Media Query）ド（FluidGrid），フルードイメージ（FluidImage）の３
抽象度の高い MVC アーキテクチャであり，クロスプラッとネイティブアプリケーションをアーキテクチャレベルでトフォーム開発の支援する．共通アーキテクチャにおいつの技術で構成されている．て，Web アプリケーション，ネイティブアプリケーション

メディアクエリ（Media Query）の画面サイズへの適応可能性を考慮することにより，適切表示領域の幅をブレイクポイントと呼ばれる任意の値なビュー構築の支援を行い，開発コストの削減を目指す．

で決定し，その値になった時点で，適応する CSS を切

2

背景技術

2.1

共通アーキテクチャ

スマートデバイスアプリケーションの開発には，実行時環境ごとに開発環境が存在する．開発者は，様々な開発環り替える．画面サイズやデバイスの画面解像度など，様々な条件に合わせた CSS の変更が可能である．図２は，スマートフォンとタブレット，ＰＣにそれぞれの CSS を振り分けた場合の図である．
フルードグリッド（Fluid Grid）

境を理解することが必須である．しかし，これらの開発環

レイアウトの構成要素を，どのデバイスにおいても境を全て理解することは困難であり，コストがかかる．こ整えて表示することを可能とする．フルードグリッの問題を解決するために，本研究室では，共通アーキテク

ドは，グリッドデザインとリキッドレイアウトというているスマートデバイスには様々な画面サイズが存在しており，スマートフォンとタブレット端末の画面サイズは約2 倍以上にもなる．例を挙げると，iPhone5S の画面サイズは 4 インチであるが，iPad Air は 9.7 インチである．ス
マートフォンだけに注目したとしても，多くの画面サイズが存在している．また，各端末によって画面解像度が異なる．画面解像度とは，ディスプレイにおける画面の総画素数を表している．画面サイズが少ししか変わらない場合で
図 2 メディアクエリあっても，画面解像度が異なると，表示領域が異なり，文字サイズやアイコン，ボタン，画像の大きさが変化する．

２つの技術を掛け合わせたものである．グリッドデザ

画面サイズと画面解像度の違いによって，各端末においインでｐｘ固定でレイアウトをデザインし，それをリてビューが異なるという問題点が生じる．ある端末では適キッドレイアウトで画面に対する百分率指定に変換

切に表示されているビューだとしても，他の端末では，文する．異なる表示領域における柔軟な対応を可能とす

字やアイコン，ボタン，画像のサイズが適切でなく，過度る．図３は，グリッドデザインとリキッドレイアウトなスクロール量または拡大を要するレイアウトである可能をそれぞれ表した図である．

性がある．この問題を解決するための開発が必要となる．

共通アーキテクチャを使用したレスポンシブ
Web デザインの実現方法

4

Web とネイティブをアーキテクチャレベルで統一的に整理するために，本研究室で提案されている共通アーキテ
クチャを用いる．

4.1

Web アプリケーションと共通アーキテクチャの対応関係

図 3 フルードグリッド

Web アプリケーションの一般的なフレームワークとして，Ruby on Rails を対象とする．理由としては，他の Webアプリケーションフレームワークである，ASP.NET[2] やJava と比較しても，整理されており，より代表的であると考えるからである．以下，Ruby on Rails で実現した Web
アプリケーションと，共通アーキテクチャのコンポーネン
トとの対応関係について記述する．

フルードイメージ（Fluid Image）
画像サイズの縦横比を保ったまま，各端末の画面サイズに画像の大きさを対応させる技術である．図 4 は，スクロールを要する画面の表示に，フルードイメージ• DisplayImageConstructor：HTML– ファイル名：ビュー名.html.erb• Style：CSS（レスポンシブ Web デザイン適応）– ファイル名：ビュー名.css.scss

を適応させた際の図である．

図 5 は，Web アプリケーションと共通アーキテクチャとの対応関係を表している．

4.2

レスポンシブネイティブアプリケーションの実現
方法の定義と，ネイティブアプリケーションと共通アーキテクチャの対応関係

ネイティブアプリケーションの一般的なフレームワーク
図 4 フルードイメージとして，Android と iOS を対象とする．理由としては，スマートフォンの OS 売り上げシェアは Android と iOS で3

スマートデバイスアプリケーションのビューに関する問題点と解決策
本研究では，スマートデバイスアプリケーションにおけるビューに関する問題点を取り上げる．一般的に使用され9 割を占めているからである．以下、レスポンシブ Web
アプリケーションにおける，抽象化した技術要素を記述する．これに基づき，等価となるライブラリを定義する．

• メディアクエリ
画面サイズを認識し，レイアウトを選択

図 5 Ruby on Rails の共通アーキテクチャとの対応関係

図 6 Android の共通アーキテクチャとの対応関係• フルードグリッド– CGRect クラス：対象オブジェクトの位置とサイ

画面サイズによって構成要素の縦横幅の伸縮ズを管理• フルードイメージ• フルードイメージ

画像の大きさを画面サイズに適した大きさ（縦横比を– UIView クラスの，UIViewContentModeScaleAspectFit：縦横の比率を維持しつつ，画像全体を維持し，画面から見切れない）に伸縮

4.2.1

表示

Android

Android において，レスポンシブ Web デザインと対応

また，これらのライブラリが実装される iOS のコンポーネントは，以下のようになる．

するライブラリを定義する．

• UIApplicationDelegate• メディアクエリ

メディアクエリのレイアウト選択部分．また，外部– Display クラス：画面サイズを取得

表現．

• フルードグリッド• UIViewController，UIView– LinearLayout クラス：ビューを一列に配置– LayoutParams クラス：ビューの幅を調節• フルードイメージ– LayoutParams クラス：ビューの幅を調節– ImageView クラス：画像出力

メディアクエリで選択されるレイアウト．また，フルードグリッド，フルードイメージ．
図 7 は，iOS と共通アーキテクチャの対応関係を表している．

また，これらのライブラリが実装される Android のコンポーネントは，以下のようになる．

• Activity
メディアクエリのレイアウト選択部分．

• Layout.xml
メディアクエリで選択されるレイアウト．

• Style.xml
フルードグリッド，フルードイメージ，外部表現．
図 6 は，Android と共通アーキテクチャの対応関係を表している．

4.2.2

図 7 iOS の共通アーキテクチャとの対応関係

iOS

iOS において，レスポンシブ Web デザインと対応するライブラリを定義する．

• メディアクエリ– UIScreen クラス：画面サイズを取得• フルードグリッド

5

共通アーキテクチャの詳細化
前述の対応関係に基づき，共通アーキテクチャの詳細化を行う．詳細化については，共通アーキテクチャで定義されている Style，DisplayImageConstructor について行う．

5.1

Style

Style とは，見た目を定義している．図 8 は，Style で定義されているデータ構造と，それにおけるレスポンシブWeb デザインの適応部分を表している．

図 10 ネイティブアプリケーションにおける DisplayIm-ageConstructor の振る舞い

図 8 Style の詳細化

考察

6

レスポンシブネイティブアプリケーションの実現方法を• サイズ
サイズの表現方法には，百分率・ピクセルがある．レス
ポンシブ Web デザインのフルードグリッド・フルードイ
メージは，百分率に適応されると定義した．

• 配置
配置とは，表によって画面幅また，それにおける画面要素定義した．画面サイズ・画面解像度に応じたビュー構築を支援する．
共通アーキテクチャを用いて，Web アプリケーションとネイティブアプリケーションにおけるレスポンシブ Webデザインの実現方法を，統一的に整理した．よって，共通アーキテクチャにおいて画面サイズへの適応可能性が保ディアクエリにおける画面幅とそれに対するレイアウトの証されたと考える．共通アーキテクチャにおいて，Style・Display Image Constructor の詳細化を行った．
共通アーキテクチャにおいて，レスポンシブ Web デザ変更に適応すると定義した．

インの実現コンポーネントを明確化した．これより，開発がどの場所に配置されるかの情報を保持する．これはメ

5.2

DisplayImageConstructor

環境ごとの適切なビュー構築の実現方法が対応付けられ，アプリケーション開発コストが削減される．また，実現コ

DisplayImageConstructor は，DisplayImageContent・ ンポーネントを分けた事により，保守性・再利用性が向上
ViewContent・Style で定義されたインスタンスに基づき， したと考えられる．
レイアウトを生成する．本研究では，レスポンシブ Web
アプリケーションのサイズ・配置における生成時の振る舞いを定義した．
図 9 は，Web アプリケーションにおける DisplayImageConstructor の振る舞いについて表している．

おわりに

7

本研究では，ネイティブアプリケーションにおける，レスポンシブ Web デザインの実現方法の整理を行った．Webとネイティブ共に，共通アーキテクチャにおいて，レスポンシブ Web デザインとの対応コンポーネントと実現方法を定義し，統一的なビュー設計の基礎ができた．今後，共通アーキテクチャとの対応関係に基づき，自動化を完成させることが課題である．また，メディアクエリのビュー選択部分は，アスペクトとして抽出し，共通アーキテクチャの保守性を高めることが課題である．

参考文献[1] E. Harb, P. Kapellari, S. Luong, and N. Spot,sponsive Web Design, Dec. 2011.
図 9 Web アプリケーションにおける DisplayImageCon-structor の振る舞い

図 10 は，ネイティブアプリケーションにおける DisplayImageConstructor の振る舞いについて表している．

[2]

Re-

山 田 祥 寛 ，ASP.NET MVC 実 践 プ ロ グ ラ ミ ン グ.NET Framework による標準 Web 開発技法，株式会社秀和システム，2009 年 10 月 25 日.