H23IT研関西Z1中間報告会 20111121

関西ＩＢＭユーザ研究会 ＩＴ研究会 Ｈ２３Ｚ１チーム

Ｚ１チーム

Ｚ１チーム ^iSUC iSUC ポータル開発 _{ポータル開発}

～Ｈ２３年度中間報告会～

～Ｈ２３年度中間報告会～

Ｚ１チーム

Ｚ１チーム ^iSUC iSUC ポータル開発 _{ポータル開発}

～Ｈ２３年度中間報告会～

～Ｈ２３年度中間報告会～

アジェンダ 2

1. チーム紹介

2. _事前調査

3. _{システムデザイン検討}

4. 今後の活動計画

１ .チーム紹介 3

1. チーム紹介

 _{iSUC 開発チームと７年史}

 _{H23 年度メンバーの紹介}

 _{活動背景と目的}

iSUC 開発チームと 7 年史 4

当チームはｉＳＵＣのＷｅｂサイトである「ｉＳＵＣ

ポータル」に対し、

新しいテクノロジーを投入し、

　機能の改善・高度化にチャレンジし続けて いま

す！

平成 平成 ²³ 23 ^年度 年度 ^{関西研Ｚ１チーム} 関西研Ｚ１チーム

H23 年度メンバーの紹介 5

• _{活動メンバー}

• 小池 岳春 　　 株式会社ブレーンスタッフコンサルタンツ

• 塩見 登志和　　マツ六株式会社

• 藤原 匠子 　　 コベルコシステム株式会社

• 丸橋 弘明 　　 SCSK 株式会社

• 水内 一九昌 オルタネート

• 柳井 弘嗣 　　 株式会社 JIEC

• 吉田 圭佑 　 　スミセイ情報システム株式会社

• 和田 夏帆 　　 スミセイ情報システム株式会社

• _{アドバイザー}

• 幸田 健 　　　　 コベルコシステム株式会社

• 田村 晋一 　　 日本アイ・ビー・エム株式会社

• 師井 学 　 日本アイ・ビー・エム株式会社

活動背景と目的 6

「 「 デスクトップファースト デスクトップファースト 」から「モバイルファースト」の時代へ 」から「モバイルファースト」の時代へ

「 「 デスクトップファースト デスクトップファースト 」から「モバイルファースト」の時代へ 」から「モバイルファースト」の時代へ

H23 H23 年度 _年度 Z1 Z1 チームの目的 _{チームの目的}

H23 H23 年度 _年度 ^Z1 Z1 ^{チームの目的} チームの目的

スマートフォン市場の急成長に伴い、モバイル向けプロダクト開発、サービス開発を第１

に考えてからデスクトップ向けに開発を行う手法が注目されています。



モバイルファーストによる開発で期待される効果

•

成長するモバイル市場をターゲットにできる

•

本当に重要なコンテンツ /機能にフォーカスできる

•

モバイル特有の機能を利用する事で斬新なサービス開発が可能

⇒Google 、 FaceBook などで、モバイルファーストの考え方が採用され始めています。



モバイル向けアプリケーションを実際に開発し、重要となる項目を整理



簡単でかつ短期間でのアプリケーション開発を実現する為の要素技術の評価



₂₀₁₂ 年の iSUC 仙台大会をターゲットにサービスを提供

iSUC ポータル開発チームでは、下記ポイントに焦点を当てて活動を進めてい

ます。

２．事前調査 7

2. 事前調査



スマートフォン開発の現状

•

ネイティブアプリケーション

•

ハイブリッドアプリケーション



_{クラウド開発について}



_{要素技術の基礎学習}

•

_HTML5 が実現する新しいアプリケーション

•

_NoSQL

•

_Node.js

•

_Monaca

•

IBM Smart Business Cloud

　　モバイル特有機能の活用

　　モバイル特有機能の活用

スマートフォン開発の現状 ⁸

ネイティブアプリケーション～

ネイティブアプリケーション～ Web Web アプリケーションまで形態は大きく アプリケーションまで形態は大きく 3 ₃ 種類 _種類

ネイティブアプリケーション～

ネイティブアプリケーション～ Web Web アプリケーションまで形態は大きく アプリケーションまで形態は大きく 3 3 種類 種類

移植性 移植性

ネイティブ

アプリケーション

ネイティブ

アプリケーション

高

高

低

低

開発言語開発言語

ハイブリッド

アプリケーション

ハイブリッド

アプリケーション アプリケーション _{アプリケーション} ^{ウェブ ウェブ}

開発方法開発方法

モバイル特有 機能の活用 モバイル特有

機能の活用

移植性移植性

iPhoneは Objective-C

Androidは Java ^HTML、 JavaScript

スマートフォン向けネイティブ

アプリケーションとして開発ＵＩはＷｅｂ技術で開発し、機能 はサードパーティの API を利用

HTML、 JavaScript

スマートフォン向けウェブ アプリケーションとして開発

全ての機能が利用可能 スマートフォンの種類によって

サポート機能が異なる ^利用不可

ＯＳ、バージョンによって

モジュールの修正が発生 対応するスマートフォンに

よってモジュールの修正が発生 （画面サイズの変更程度）^{基本的に不要}

開発ツール主な

開発ツール主な ^iPhoneは Mac OS 、 Xcode

Androidは Eclipse Ｔｉｔａｎｉｍｕ　Ｍｏｂｉｌｅ^{ＰｈｏｎｅＧａｐ Ｅｃｌｉｐｓｅなど}

( 巷でも大流行？ Android 開発 )

・文化祭で使用しするアプリを作成したり、女子高生にも流行中

・老若男女問わずセミナーが大人気

・ Android キャラ T やグッズがマニアの間で密かにブーム (※ 開発に関係ないですが．．． ) ( 開発環境 )

１． JAVA SDK のインストール ２． Android SDK のインストール ３． Eclipse のインストール

４． ADT プラグインのインストール ( アンドロイド開発用プラグイン ) 　　 Android SDK の設定、等

(Sampleアプリの動作確認と解析 )

( 感想 )

・フリーで有力なツールもそろっていて、ネットに情報もたくさんあるので開発自体取っつき易い、後全てオープンソースでフリー

・早いバージョンアップを意識して、ターゲットを定める必要があるので煩雑

・画面の大きさ等、機種によって微妙に異なる場合もある。全てカバーするのは不可能

・ストレス無しに開発にするには最低でも 2GB 以上のスペックの PC が必要

・最近 iPhone を買った私には開発していくモチベーション維持が難しい

ネイティブアプリケーション 9

Android

Android ネイティブ開発 _{ネイティブ開発}

Android

Android _{ネイティブ開発 ネイティブ開発}

Google Iosched Sample 色々疲れました．．．

ネィティブアプリ開発の悩み

ネイティブアプリ開発の悩み

ネイティブアプリ開発の悩み

ネイティブアプリ開発の悩み

ネイティブアプリ開発の悩み

アプリ配布有料

アプリ配布有料

アプリ配布有料

アプリ配布有料

アプリ審査あり

アプリ審査あり

アプリ審査あり

アプリ審査あり

度重なるバージョンアップ

度重なるバージョンアップ

度重なるバージョンアップ

度重なるバージョンアップ

いったい何機種出ているの

いったい何機種出ているの

か？ か？

いったい何機種出ているの

いったい何機種出ているの

か？ か？

Objective-C

Objective-C _{知らん 　知らん}

わ わ

Objective-C

Objective-C 　知らん _知らん

わ わ

Mac Mac が必要 _が必要

Mac Mac _{が必要 が必要}

10

ハイブリッドアプリケーション

PhoneGap

PhoneGap

PhoneGap

PhoneGap

11

クラウド開発について

短期間での開発はクラウド環境を利用する事が最適

短期間での開発はクラウド環境を利用する事が最適

短期間での開発はクラウド環境を利用する事が最適

短期間での開発はクラウド環境を利用する事が最適

12



短時間の設定登録作業でリソースが利用可能



必要な時に必要なリソースを低価格で利用可能



インターネットを通じてリソースにアクセスできる為、作業場所の制限なし

クラウドは大きく３種類に分類

クラウドは大きく３種類に分類

クラウドは大きく３種類に分類

クラウドは大きく３種類に分類

Ｉａａｓ

（

ＰａｓＳ

（

ＳａａＳ

（

特徴

サービス事例

仮想マシンとして

OSやネットワークを提供 ^{アプリケーションの}実行環境を提供

ミドルウェアやアプリケーションの

保守が必要 ミドルウェアの保守不要 アプリケーション保守が必要

アプリケーションや サービスを提供

ミドル・アプリ保守不要 カスタマイスは難しい

ＡｍａｚｏｎＥＣ２

ＩＢＭ クラウド Ｇｏｏｇｌｅ ＡｐｐＥｎｇｉｎｅ

Ｗｉｎｄｏｗｓ Ａｚｕｒｅ Ｇｏｏｇｌｅ Ａｐｐｓ Ｅｖａｒｎｏｔｅ、ＤｒｏｐＢｏｘ

　　柔軟性とコスト

高 ^低

要素技術の基礎学習 ¹³

AmazonEC2

IBM Smart Business

Cloud

Monaca

Ｇｏｏｇｌｅ Ａｐｐ

Ｅｎｇｉｎｅ

Ｗｉｎｄｏｗ

Ａｚｕｒｅ ｓ

Dropbox

Ｅｖａｒｎｏｔｅ

mobiApp

Objective-C

PhoneGap

Ｔｉｔａｎｉｍｕ

Ｍｏｂｉｌｅ

XCode

ＡＤＴプラグイン

ＨＴＭＬ５

NoSQL

jQuery fro

Mobile

Dojo Mobile

Node.js

Rational Team

Concert

Jax-RS

モバイルアプリの

開発に必要な要素技術

クラウドサービス

サーバサイド技術

iosched

ネイティブアプリ ハイブリッドアプリ ウェブアプリ

ＣＳＳ３

Ajax

ＪａｖａＳｃｒ

ｉｐｔ

Ｉ aaS PaaS サーバサイド Saas

技術

アプリケーションを実装する為の要素技術の基礎学習

アプリケーションを実装する為の要素技術の基礎学習

HTML5 が実現する新しいアプリケーション

• _{HTML5 とは}

– _{HTML4.01 の次期バージョン}

– バージョンアップの目的　① 機能拡張 ② プラットフォームの安定化

14

 ネットワークが途切れても利用可能

 プラグインなしで動画・音声の再生が可能

 リアルタイム性の高いアプリケーション

 操作しやすいユーザインタフェース （カレンダー、カラーピッカーなど）

 ネットワーク接続が前提

 多くのプラグインが必要

 複雑な JavaScript 実装

 シンプルな入力フォーム

- オフラインアプリケーション（ Application Caches ）

- バックグラウンド処理（ Web Workers ）

- サーバとの双方向通信（ Web Sockets ）

- クライアントでのデータ保存（ Web Storage 、 Web SQL Database ）

- ローカルファイルの読み込み（ File API ）

- _{位置情報の取得}（ Geolocation ）

HTML4 までは…

　クラウド 　クラウド

スマートフォン

NoSQL

NoSQL とは…



_SQL を使用しない、非関係モデルのデータストアの総称。



大規模データに対する操作、スケーラビリティ、可用性、速度の面で優れており、

スキーマレス等の特徴がある。



反面、トランザクションや一貫性を犠牲にしていたり、 JOIN の概念がない等、機能面で

劣り、用途も限定的（汎用性が低い）である。 は

分類 プロダクト 主な用途

KVS Memcached,TokyoTyrant _{RDB とのキャッシュ等}

に

ﾄﾞｷｭﾒﾝﾄ指向

DB

MongoDB,CouchDB _{Web コンテンツの管理}

等に

列指向 DB Cassandra,HBase _{OLTP 用途等に}

用途等を鑑み、 ﾄﾞｷｭﾒﾝﾄ指向 DB に着目

MongoDB の実装を検討 ?

　　　　　　　 と　　　　　　 を比較…



機能… DBMS としての機能は MongoDB 。

　　　　　　以外の部分では、 Web サーバ内蔵、 Android

　　　　　　 CouchDB にも面白い機能がある。 対応等



パフォーマンス… CRUD 全般において MongoDB 優勢。

NoSQL

NoSQL NoSQL

NoSQL

15

Node.js ¹⁶

Node.js とは…

サーバサイドにおける JavaScript 実行環境。（ V8 （ Google 謹製の JavaScript エンジン）上で動

以下の特徴を持ち、 「大量のアクセス」を「簡単かつ高速」に処理することを目指している。 作。）



_{シングルスレッド}



_{イベントループ}

⇒イベントが発生するまでループを回り続け、イベントがあれば処理する。



_{非同期 I ／ O}

非同 期 I

／ O 他処

理

I/O処理の完了を受 け必要な処理を実行。

I/O処理が非同期 で行われている間、 他の処理を実行。 Req

Res

上記特徴が故に、以下のような問題点も指摘されてい

る。

① シングルスレッド、イベントループ

　　 処理に時間がかかると他の処理をすべてブロックしてしまう可能 性がある。

　　 マルチコア、分散環境にそぐわない。 　　　　⇒

② _{非同期 I ／ O}

Monaca 　 ～ Android/iOS アプリの開発プラットフォーム～ 17

Ｍｏｎａｃａとは・・・

アシアル社提供の Web ブラウザ上でアプリケーションを作成できる

サービス

Android/iOS 問わず、マルチなアプリ開発環境を提供

IBM Smart Business Cloud

特徴 特徴

• HaaS (IaaS) 型のパブリッククラウドサービス

– 仮想のサーバー（ハードウェア）を提供

– OS （ Windows , Red Hat, SUSE) が選択可

※ OS のサポート契約締結可

– _IBM 主要ミドルウェアが同梱されているイメージ選択可

• _{従量課金制}

– 初期費用不要で OS が稼動している時間だけ課金される。

– CPU スペック・メモリ容量で金額が変わる（最小構成で１時間 10 円～）

• _その他

– 法人向けのサービスの為、個人での利用不可

– 2011 年 4 月より幕張センターオープン

今年度のユーザ研究会では、特別に無償での評価利用が可能！

今年度のユーザ研究会では、特別に無償での評価利用が可能！

18

Rational Team Concert （チーム開発プラット 19

フォーム）

『インストール不要！すぐ試せる Jazz.net

サーバー環境（サンドボックス）で RTC V3 を試す』

『インストール不要！すぐ試せる Jazz.net

サーバー環境（サンドボックス）で RTC V3 を試す』

IBM Smart Business Cloud

IBM Smart Business Cloud クラウド上でのシステム開発 IBM Smart Business Cloud

IBM Smart Business Cloud クラウド上でのシステム開発

クライアント

クライアント Client for Eclipse IDE Client for Eclipse IDE クライアント

クライアント Client for Eclipse IDE Client for Eclipse IDE

•クラウド上でのシステム開発

　（開発環境のクライアントインストールなし！）

管理作業（構成管理、変更管理、作業管理など）

ソースコードなど成果物管理、障害管理、メンバーに依頼する作 業管理

PC からクラウド上のリモートデスクトップ

に接続、 クライアント　 Client for Eclipse IDE を使用

Demo ²⁰

• _{デモのご紹介}

　　　 -IBM Smart Business Cloud

　　　　　 + NoSQL + Node.js を利用したアプリイ

メージ　　　　　　　

IBM Smart Business Clo

ud

IBM Smart Business Clo

ud

WindowsServer2008

MongoDB

Node.js

【環境イメージ】

スマートフォンをお持ちの方はアクセス

スマートフォンをお持ちの方はアクセス

３．システムデザイン検討 21

3. システムデザイン検討



_{開発手法の選定}



システムイメージと開発スコープ

開発手法の選定 ²²

コンセプト

コンセプト



短期間、低コストでの開発＋メンバーの保有スキルに依存しない開発

選定①

モバイル開発形

態

ネイティブ型

ネイティブ型 ハイブリッド型 ハイブリッド型 ウェブアプリ型 ウェブアプリ型

選定②

要素技術

Java Java HTML5 HTML5 NoSQL

Objective-C Node.js _Node.js RDB _RDB

選定③

クラウド開発形

態

SaaS SaaS

( ( 該当なし） _{該当なし）}

ＰａａＳ ＰａａＳ

（ （ Monaca) Monaca)

ＩａａＳ ＩａａＳ

( ( ＩＢＭクラウ ＩＢＭクラウ

ド） ド）

（選定マッ

プ）

開発手法選定結果 ²³

コンセプト

コンセプト



短期間、低コストでの開発＋メンバーの保有スキルに依存しない開発

選定①

モバイル開発形

態

ネイティブ型

ネイティブ型 ハイブリッド型 ハイブリッド型 ウェブアプリ型 ウェブアプリ型

選定②

要素技術

Java Java HTML5 HTML5 NoSQL

Objective-C Node.js _Node.js RDB _RDB

選定③

クラウド開発形

態

SaaS SaaS

( ( 該当なし） _{該当なし）}

ＰａａＳ ＰａａＳ

（ （ Monaca) Monaca)

ＩａａＳ ＩａａＳ

( ( ＩＢＭクラウ ＩＢＭクラウ

ド） ド）

（選定マッ

プ） 開発負荷が

高く、利用者

のターゲット

が狭くなる為

、見送り

IBM クラウド

で代替

スキルレンジを

狭くする為見送

り

検討中検討中



ハイブリッド型 or ウェブアプリ型を選定し、全てのユーザをターゲットにする

。



モバイル開発に必要なスキルは、 HTML5 と JavaScript のみに絞込み（学習負荷

低減）

システムイメージと開発スコープ ²⁴

HTML5+CSS

JavaScript +

jQuery for +

Mobile

Node.js RDB

JavaScript のみで

コンテンツの動的生成及び

ビジネスロジックの作成を行

う。

JavaScript のみで

コンテンツの動的生成及び

ビジネスロジックの作成を行

う。

IBM Smart Business Cloud



_{搭載コンテンツの検討}



スマートフォン上のユーザインターフェースの検討及び実装



ビジネスロジックの実装



_iSUC 既存のデータベース連携部分の仕様検討及び実装

開発スコープ

開発スコープ

システムイメージ

システムイメージ

開発イメージ ²⁵

WindowsServer2008

RDB

Node.js

IBM Smart

IBM Smart

Business Cloud

Business Cloud

共有テストサー

バ

（常時起動）

WindowsServer2008

RDB

Node.js Eclipse

個人用開発サーバ

（利用時のみ起動）

WindowsServer2008

RDB

Node.js Eclipse

開発 単体テスト

開発 単体テスト

開発モジュール

移行

結合テスト

ページ 削除予定

４．今後の活動計画 26

4. 今後の活動計画

４．今後の活動計画 27

▲中間報告 _{▲活動報告会} ▲iSUC

・基本知識習得

・アーキテクチャ選定 -スマートフォン -HTML5

-iosched -Node.js -NoSQL

-Team Concert -IBM Cloud

・基本知識習得

・アーキテクチャ選定 -スマートフォン -HTML5

-iosched -Node.js -NoSQL

-Team Concert

-IBM Cloud ^{開発クラウド}_{準備・構築}^{開発クラウド}_{準備・構築}

システムデザイン検討 システムデザイン検討

比較評価システム検証 比較評価システム検証

12 _{月 １月 ２月 ３月 ４月 ５月 ６月 ～} 10 _月

アプリ搭載 検証 アプリ搭載 検証

11 _月

本番クラウド環境構築 本番クラウド環境構築

サ ー ビ ス オ ー プン

ストーン マイル

ケーション アプリ

クラウド 環境

月

フェーズⅠ　学習 フェーズⅠ　学習

サイト開発・検証

スマートフォン向けアプリ開発 サイト開発・検証

スマートフォン向けアプリ開発 フェーズⅡ　実践

フェーズⅡ　実践 ^{フェーズⅢ　評価}フェーズⅢ　評価

•iSUC 仙台大会でのサービスオープンをターゲットに１月よりアプリケーション開発着手予定

• 開発チームは、スマートフォン向け開発とＰＣサイト開発の２チームに分割予定

• アプリケーションに盛り込む機能については、随時考案し搭載していく。（機能、操作性）

図 ²⁸

ＩＴ研究会初

ｉＳＵＣポータル開発 !^{ｉＳＵＣポータル} 進化し始める !

•Javaでの新規開発

•MVCモデル ^•_{（ページ遷移なし、}^機能改善 ドラッグ＆ドロップで

•_{セッション予約）}

•Ajax技術利用

ｉＳＵＣポータル 開花宣言 !!

•_{新機能提供}

（Mashup:SyzWalkerSyzWalker）

•_{さりげなく}Ajax

•_{マウスで簡単操作} スケジューラ

ｉＳＵＣポータル 更なる進化へ !!

•_{新機能提供}

（ﾊﾟｰｿﾅﾙ Navi など）

•UX向上への追求

•_{次世代フレーム} ワークへの挑戦

ｉＳＵＣポータル 斬新な変化へ !!

•_{新技術への挑戦}

‐ Restful開発

‐クラウドの活用

2005 2006 2007 2008 2009

J2EE JSP Servlet Java Bean

Ajax

Prototype.js Struts

XML

Ajax Mashup JSF Seasar

Struts2 JSON JPA Mashup Spring2.0 Ajax iBATIS Seasar

WebSphere sMash Dojo JSON RESTful groovy Amazon EC2

全国研（東京・大阪） 全国研（北陸・大阪） 関西研（大阪） 関西研（大阪） 関西研（大阪）

ｉＳＵＣポータル 雲の向こう側へ !!

•_{クラウドは大前提}

•クラウド技術利用 - 分散処理 - 検索エンジン

2010

Hadoop

WebSphere eXtream -Scale

Apache Solr Amazon EC2

関西研（大阪） 関西研（大阪）

²⁰¹²

ｉＳＵＣポータル

？？？

HTML5 IBMクラウド