ios と android の両方で動くアプリを作る方法 ·...

iOS と

Android の両方で動く

アプリを作る方法＜クロスプラットフォーム開発＞

グループＢ

1

メンバー紹介

望月

憲志 [ワークノアート]

片岡

正文 [鈴与システムテクノロジー]

三浦

由姫子

[ティージェイエス]

黒木

宏明 [SBS情報システム]

グループＢ

iOSとAndroidの両方で動くアプリを作る方法 2

目次

１．経緯

２．調査方法

３．クロスプラットフォームについて

(1)

ＷＥＢアプリ

(2)

ＰｈｏｎｅＧａｐ

(3)

Ｔｉｔａｎｉｕｍ

Ｍｏｂｉｌｅ

４．考察

５．今後の課題

グループＢ


１．経緯

• スマートデバイス毎に専用の開発環境が必要

• 複数デバイスのアプリを開発する場合、開発環境・言語が異なる

ため、費用、期間など開発にかかるコストが倍増。

• １つのソースで複数デバイスのアプリを開発できる方法

⇒

クロスプラットフォーム開発クロスプラットフォーム開発

グループＢ


OS 開発環境開発言語

iOS Mac Xcode Objective-C

Android Mac/Windows Eclipse等 Java

WindosPhone Windows VisualStudio .NET

２．調査方法

• クロスプラットフォームの種類

＜ＷＥＢアプリ＞

ＨＴＭＬ

+ ＣＳＳ

+ Ｊａｖａｓｃｒｉｐｔ

…

（１）

＜非ＷＥＢアプリ＞

ＰｈｏｎｅＧａｐ

…

（２）


Ｍｏｂｉｌｅ

…

（３）

• 各クロスプラットフォーム上で、サンプルアプリを開発し、

ｉＯＳとＡｎｄｒｏｉｄ端末での動作検証を行う。

ｉＯＳ

…

ｉＰｈｏｎｅ５、ｉＰａｄ２

Ａｎｄｒｏｉｄ

…

東芝

Ｒｅｇｚａ

• 開発のしやすさ、実機での動作について調査する。

グループＢ


２．調査方法

• サンプルアプリ

「ひたすらめも」「ひたすらめも」仕様

(1) 指でなぞってメモを書くアプリ

(2) 線の太さや色を選択可能

(3) ページをめくってメモを

追加したり、削除が可能

(4) 書いたメモを保存、呼び出して

表示することが可能

(5) カメラで撮影した画像を背景と

して読み込む

グループＢ


３－１．ＷＥＢアプリ

グループＢ

iOSとAndroidの両方で動くアプリを作る方法

• 概要

ＨＴＭＬ、ＣＳＳ、Ｊａｖａｓｃｒｉｐｔで構成

ＨＴＭＬ

マークアップ言語。画面項目を規定

ＣＳＳ

文書の整形やレイアウトを構築

Ｊａｖａｓｃｒｉｐｔ

ボタンクリック等動的効果

• 各スマートデバイスのブラウザ上で動作。ＷＥＢサーバ上の

ファイルを参照するため、サーバに接続されていることが前提。

• 数多くの

Ｊａｖａｓｃｒｉｐｔライブラリが公開されている。

7

３－１．ＷＥＢアプリ

•• 「ひたすらめも」「ひたすらめも」実装

ＨＴＭＬ５

Ｃａｎｖａｓ機能により描画を実現。

• ライブラリを使用しコーディングを極力減らした。

• ＰＣのマウスイベントとスマートデバイスのタッチイベントの

両方を記述することで両方の環境で動作可能。

• スマートデバイス固有機能を実装できない。

グループＢ


３－２．Ｐｈｏｎｅｇａｐ

• 概要

Ａｄｅｂｅ社製オープンソース

開発環境

Ｅｃｌｉｐｓｅ／Ｘｃｏｄｅ

開発言語

ＨＴＭＬ＋ＣＳＳ＋Ｊａｖａｓｃｒｉｐｔ

• 対応デバイス

ｉＯＳ, Ａｎｄｒｏｉｄ、ＢｌａｃｋＢｅｒｒｙ等多数

• ＷＥＢアプリをそのまま組み込んでアプリ化することが可能。

グループＢ



• 開発画面

ＷＷＷ配下に

ソースを複写

グループＢ



•• 「ひたすらめも」「ひたすらめも」実装

ＷＥＢアプリで作成したものをＷＷＷ配下にコピーしビルドする

だけでアプリ化される。

• カメラ機能は

標準ＡＰＩ(Javascript)で追加コーディング。

• ＷｅｂＶｉｅｗのブラウザ機能によりアプリ化を実現。

• ＷＥＢアプリとＰｈｏｎｅＧａｐアプリにおいて、

描画、ボタン押下等のタッチイベントのレスポンス差は

ほとんど見られなかった。

グループＢ


３－３．Ｔｉｔａｎｉｕｍ

Ｍｏｂｉｌｅ

• 概要

Ａｐｐｃｅｌｅｒａｔｏｒ社製オープンソース

開発環境


Ｓｔｕｄｉｏ

開発言語

Ｊａｖａｓｃｒｉｐｔ

• 対応デバイス

ｉＯＳ,

Ａｎｄｒｏｉｄ, Ｂｌａｃｋｂｅｒｒｙ,

ＭｏｂｉｌｅＷｅｂ

• サンプルアプリ

ＫｉｔｃｈｅｎＳｉｎｋ

…

各種コントロール、機能検証用

ＡＢＣ’ｓＷｒｉｔｅｒ

…

お絵かきアプリ、追加モジュール

グループＢ



Ｍｏｂｉｌｅ

• 開発画面

コード入力補完

機能

グループＢ



Ｍｏｂｉｌｅ

•• 「ひたすらめも」「ひたすらめも」実装Ｊａｖａｓｃｒｉｐｔ

で

全ての機能と画面レイアウトを実装。

コード補完、リアルタイムエラー表示によりコーディングは比較的容易。

• 標準ＡＰＩに描画機能がないため、追加モジュール「Ｔｉ．Ｐａｉｎｔ」をプロジェクトに組み込んでビルド。

• 純正ＵＩを使用した場合、ｉＯＳとＡｎｄｒｏｉｄで表示が異なる。（デバイス毎の標準の規約に従う）

• 他のプラットフォームとレスポンスの差はなく、ｉＯＳとＡｎｄｒｏｉｄの差が同様に見受けられた。

グループＢ


４．考察

• 開発環境、アプリについて

グループＢ


開発環境開発アプリ

Web ライブラリが充実。Web標準化により開発要員の確

保は容易。

デバイス固有機能は実装不可。ＷＥＢサーバへの接続が必須。

PhoneGap 既存Web資産をコピーするだけ

でアプリ化可能。開発資産・要員を流用可能。

デバイス固有機能を実装可。

WebViewを経由するためレスポ

ンスが得られないケースがある。

Titanium Mobile 画面レイアウトもJavascriptで

実装。Web資産はそのまま使用

できない。

デバイス固有機能を実装可。標準API及び既存追加モジュール

に機能が無ければ、各デバイス

のネイティブ言語で自作が必要。

５．今後の課題

• ネイティブとクロスプラットフォームの比較

• それぞれの利点を生かした開発

⇒

ハイブリッド開発ハイブリッド開発

グループＢ


開発環境開発アプリ

ネイティブ各デバイスで必要な環境、スキ

ルが異なる。特にiOS開発言語

objective-Cの要員確保は難しい。

デバイスで可能な全てのことが

実装可能。レスポンスも問題無

し。

クロスプラットフォーム

HTML,CSS,Javascriptを中心と

した技術のため、要員確保が容

易。開発環境も整備されている。

APIの範囲で実装可能。

WebViewを使用した場合はレス

ポンスが得られないケースがあ

る。

ご清聴ありがとうございました。

グループＢ


ios と android の両方で動く アプリを作る方法 ·...

Documents

ios と android の両方で動くアプリを作る方法 ·...