H23IT研関西Z1活動報告会 20120427

(1)

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

Ｚ１チーム

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

～Ｈ２３年度活動報告会～

Ｚ１チーム

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

～Ｈ２３年度活動報告会～

(2)

Z1 チームイントロダクション

2

Z1 _{イズム、、、}

それは、限りないテクノロジーへの挑

戦

当チームは ^iSuc ポータルに対し、限り

ない情熱を注ぎ続ける集団である！

(3)

Z1 チーム紹介

3

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

ポータル」に対し、

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

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

す！

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

(4)

アジェンダ

4

1. はじめに

a. 活動背景

b. 活動目的と実績

２．活動内容

a. モバイル開発をする上で調べた事

b. 基本方針

c. システムデザイン

　　・実装イメージ

　　・要素技術

d. デモ　開発アプリの紹介

３．振り返りと課題（まとめ）

(5)

関西 IBM ユーザ研究会 IT 研究会 H23Z1 チーム

5

１．はじめに

a. 活動背景

b. 活動目的

(6)

１－ｂ．活動背景

6

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

スマートフォン市場の急成長に伴い、モバイル向けのプロダ

クト開発、サービス開発を第１に考えた、いわゆる「モバイ

ルファースト」が注目されています。

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

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

・モバイル特有の機能を利用することで斬新なサービス開

発が可能

昨今のＩＴトレンド

は・・・

② ② ．「クラウド」によるシステム開発の時代へ．「クラウド」によるシステム開発の時代へ

「使いたいときに、使いたい分だけ、すぐに使える」といっ

たメリットを持つクラウド環境でのシステム開発／サービス

提供が注目されています。

(7)

１－ｃ．活動目的と目標

7

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

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

「モバイルファースト」や「クラウド開発」といっ

たＩＴ業界における重要なトピックに注目し、最終

的にはメンバー全員がＩＳＵＣポータル開発を通じ

て、学習したスキルを習得・実践できるようになる

2012 年の iSUC 仙台大会をターゲットに、

「 ISUC ポータルのセッションアジェンダをスマート

フォンでも

利用できる」サービスを提供する。

活動目標活動目標

(8)

関西 IBM ユーザ研究会 IT 研究会 H23Z1 チーム

8

２．活動内容

a. モバイル開発を進めるうえで調べた事

b. 基本方針

c. システムデザイン

　　・実装イメージ

　　・要素技術

(9)

　　モバイル特有機能の活用

２－ａ．モバイル開発をする上で調べた事（まとめ

）

9

ネイティブアプリ～

ネイティブアプリ～ ^Web Web アプリまで形態は大きくアプリまで形態は大きく 3 ₃ 種類 _種類

ネイティブアプリ～

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

移植性移植性

ネイティブ

アプリケーション

ネイティブ

アプリケーション

高

低

開発言語開発言語

ハイブリッド

アプリケーション

ハイブリッド

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

開発方法開発方法

モバイル特有

機能の活用

モバイル特有

機能の活用

移植性移植性

iPhoneは Objective-C

Android は Java ^HTML、 JavaScript

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

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

HTML 、 JavaScript

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

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

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

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

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

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

開発ツール主な

iPhone は Mac OS 、 Xcode

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

(10)

ｾｯｼｮﾝｱｼﾞｪﾝﾀﾞミドルウェア

OS

ハードウェア

２－ｂ．活動方針

¹⁰

現在のパソコン向け

現在のパソコン向け ^iSUC iSUC セッションアジェンダをモバイル向けに再構築セッションアジェンダをモバイル向けに再構築

現在のパソコン向け

現在のパソコン向け iSUC iSUC セッションアジェンダをモバイル向けに再構築セッションアジェンダをモバイル向けに再構築

開発環境として

開発環境として IBM SmarterCloud Enterprise IBM SmarterCloud Enterprise を利用 _を利用

開発環境として

開発環境として IBM SmarterCloud Enterprise IBM SmarterCloud Enterprise を利用 _を利用

スマートフォン対応スマートフォン

対応

・モバイル端末で見たい

・会場で見たい

・その他便利な機能がほしい

・モバイル端末で見たい

・会場で見たい

・その他便利な機能がほしい

・すぐに開発・テストを始めた

い・いつでも場所を問わず利用で

きる　開発環境・テスト環境がほし

い

・すぐに開発・テストを始めた

い・いつでも場所を問わず利用で

きる　開発環境・テスト環境がほし

い

Eclipse

ｻｸﾗｴﾃﾞｨﾀ

(11)

jQuery Mobile

11

Windows

Node.js MySQL

２－ｃ．システムデザイン

iSUC _ポータル

採用アーキテクチャー

アーキテクチャの選定理由・メリット

HTML5

HTML5 CSS3_CSS3 ^Java Script Java Script

jQuery Mobile

Node.js

IBM クラウド

簡単にモバイル向けの UI を構築できる

HTML と JavaScript だけで開発できるため、学習コストが低くて済む

すぐに開発に着手できる／スマートフォン上でもすぐにテストできる

IBM SmarterCloud Enterprise

(12)

２－ｃ．要素技術紹介① -フロント開発技術

• jQuery Mobile とは

– モバイルアプリケーションの外観や動作を実現する

JavaScript ライブラリ

– 開発者はマークアップのみで、ユーザインターフェースを構築できる

•HTML5の新しいタグへの対応（ section 、 header 、 footer など）

•CSS3の Transform 機能を用いた画面遷移やダイアログ表示

12

ｊｊ Query Mobile Query Mobile

Internet リクエスト

レスポンス

サーバ Web_ブラウザ

カスタム属性が指定された要素を取り出し、

マークアップ、 CSS クラス、イベントハンドラを追加する

(13)

２－ｃ．要素技術紹介② -サーバサイド開発技術

¹³

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

ン）上で動作。）

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

る。



_{シングルスレッド}



_{イベントループ}

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



_{非同期 I ／ O} _{マルチスレッド}

非同期 I

／ O 他処

理

非同期

／I O

非同期 I

／ O

シングルスレッド

マルチスレッド

I／Ｏ

Ｉ／Ｏ

メモリ

　　^の消費が少なく、大量のアクセスに強い

Node.js

Javaアプリケーションの一例

(14)

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

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

– _Windows 、 Linux の技術サポート契約の締結も可能

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

• _{従量課金制}

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

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

２－ｃ．要素技術紹介③ -インフラ技術

¹⁴

ＩＢＭＳｍａｒｔ er Ｃｌｏｕｄ Enterprise

今回の利用方法

ＩＢＭデータセンター

（幕張）

Internet

・開発

○メリット

　　 - 必要な時だけ利用

　　 - 場所、端末を選ばない

　　 - モバイル端末で検証可

能　　 - 他メンバーへの公開可

○メリット

　　 - 必要な時だけ利用

　　 - 場所、端末を選ばない

　　 - モバイル端末で検証可

能　　 - 他メンバーへの公開可

(15)

２－ｃ．要素技術紹介④ -インフラ技術

¹⁵

仮想インスタンス作成イメージ

仮想インスタンス作成イメージ ① ①

仮想インスタンス作成イメージ

仮想インスタンス作成イメージ ① ①

② イメージ

選択を ^{③ インスタンス}_名

④ マシンスペックを選択

リ、 CPU 、（メモディスク容

量）

① インスタンスの追加

(16)

２－ｃ．要素技術紹介⑤ -インフラ技術

¹⁶

仮想インスタンス作成イメージ

仮想インスタンス作成イメージ ② ②

仮想インスタンス作成イメージ

仮想インスタンス作成イメージ ② ②

インスタンス名

⑤ 仮想 OS へログイン ID 、の

パスワードを入力

⑥ 確認画面 ^{⑦ 利用確認}

⑧ インスタンス自動生成の

(17)

２－ｃ．要素技術紹介⑥ -インフラ技術

¹⁷

仮想インスタンスへのログインイメージ

⑨ ＩＰ入力

⑩ ログイン

仮想インスタンス利用開

始！

(18)

関西 IBM ユーザ研究会 IT 研究会 H23Z1 チーム

18

２．活動内容

　　ｄ .デモ

　　・開発アプリの紹介

(19)

2- ｄ．Ｄｅｍｏ

¹⁹

・ iSUC セッションアジェンダのモバイル版Ｗｅｂア

プリ

IBM Smart Business Cloud +

jQuery + MySQL + Node.js を利用

　スマートフォンをお持ちの方は　⇒

　（ ^URL ： http://170.225.xxx.xx/agenda _）

IBM SmarterCloud Enterprise

WindowsServer2008

node.js MySQL

【環境イメー

ジ】

jQuery

Mobile

(20)

関西 IBM ユーザ研究会 IT 研究会 H23Z1 チーム

20

３．振り返りと課題（まとめ）

　　 a. ｊ Query

　　 b.Node.js

　　 c. クラウドを利用した開発

　　 d. モバイル開発をやってみて

　　 e. １０月の iSUC 大会に向けて

(21)

3- ａ． jQuery

21

jQuery Mobile



モバイル開発の経験がなくても、短期間で高

品質・



高機能な画面設計を実現できる。



ページ初期表示時やページ遷移において、



パフォーマンスに問題がある。

パフォーマンスの改善については改善策あり。

大掛かりなデザインの変更は困難。

ＣＳＳに関する知識が必要となる。



見た目のバリエーションが少なく、 jQuery

Mobile を



使用した他のサイトと、デザインが似通ってし

まう。

(22)

3- ｂ． Node.js

22

Ｎｏｄｅ．ｊｓ

( _{良かった事）}

1. サーバサイドを JavaScript で作れるため、学習コスト

が低く済む

2. _{気軽いに扱える。}

( 考慮点 )

3.Java に比べて統合開発環境が整っていない

→ テキストエディタを使用した

⇒ 今後評価します。

4. 非同期処理を考慮しないと、正しく動作しない

5.Web サーバに普通にある機能が自分で用意する

(23)

3- ｃ．ＩＢＭクラウド

23

ＩＢＭクラウド



モバイル開発の経験がなくても、ある一定の

品質で　画面設計ができる



画面遷移部分で、パフォーマンスに問題が

あった



_→



他のサイトと類似した画面になってしまう



_→

( 良かった事）

1. 使いたい時に使え、気軽にアクセス可能、低コスト

2. ロケーションフリー

3. 開発環境の統一が可能

4. 開発環境のメンテナンスが容易

( 考慮点 )

1. パブリッククラウドであるゆえの考慮点

　・ネットワーク遅延

　・セキュリティ

(24)

3- ｄ．モバイル開発をやってみて

24

モバイル開発をやってみて



モバイル開発の経験がなくても、ある一定の

品質で　画面設計ができる



画面遷移部分で、パフォーマンスに問題が

あった



_→



他のサイトと類似した画面になってしまう



_→

・画面サイズが小さい

・ Android,iOS の差異

・開発方式（ネイティブ～ Web 開発か？）

・やっぱり実機での検証は必須

⇒ _{画面の描画、}

⇒パフォーマンス検証のやりかたをどうするか？

(25)

3- ｅ．ｉＳＵＣ大会にむけて

25

iSUC iSUC 大会にむけて _{大会にむけて}

（ユーザ視点）

・ユーザフレンドリーな Web サイトの開発

⇒ 会場での利用を意識した機能改善、

・ iOS ヒューマンインターフェースガイドライン等を参考

に UI の改善

（システム視点）

・ iOS の場合、端末を横にすると表示がおかしい

⇒ jQuery のバージョンアップ？

・エラーハンドリング

・ＰＣサイトとの連携

・運用視点での評価について、今回できていない。

⇒今後評価する。

(26)

９．まとめ（利用した技術要素の考慮ポイント）

26

jQuery Mobile

Node.js



モバイル開発の経験がなくても、ある一定の

品質で　画面設計ができる



画面遷移部分で、パフォーマンスに問題が

あった



_→



他のサイトと類似した画面になってしまう



_→



サーバサイドを JavaScript で作れるため、

学習コスト



_{が低く済む}



_Java に比べて統合開発環境が整っていない



→ テキストエディタを使用した

非同期処理を考慮しないと、正しく動作しな

(27)

H23 年度メンバー

27

H23IT研関西Z1活動報告会 20120427

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

Ｚ１チーム

Ｚ１チーム iSUC iSUC ポータル開発 ポータル開発

～Ｈ２３年度活動報告会～

～Ｈ２３年度活動報告会～

Ｚ１チーム

Ｚ１チーム iSUC iSUC ポータル開発 ポータル開発

～Ｈ２３年度活動報告会～

～Ｈ２３年度活動報告会～

Z1 チームイントロダクション

Z1 イズム、、、

それは、限りないテクノロジーへの挑

戦

当チームは iSuc ポータルに対し、限り

ない情熱を注ぎ続ける集団である！

Z1 チーム紹介

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

ポータル」に対し、

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

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

す！

平成 平成 23 23 年度 年度 関西研Ｚ１チーム 関西研Ｚ１チーム

アジェンダ

1. はじめに

a. 活動背景

b. 活動目的と実績

２．活動内容

a. モバイル開発をする上で調べた事

b. 基本方針

c. システムデザイン

・実装イメージ

・要素技術

d. デモ 開発アプリの紹介

３．振り返りと課題（まとめ）

関西 IBM ユーザ研究会 IT 研究会 H23Z1 チーム

１．はじめに

a. 活動背景

b. 活動目的

１－ｂ．活動背景

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

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

スマートフォン市場の急成長に伴い、モバイル向けのプロダ

クト開発、サービス開発を第１に考えた、いわゆる「モバイ

ルファースト」が注目されています。

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

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

・モバイル特有の機能を利用することで斬新なサービス開

発が可能

昨今のＩＴトレンド

は・・・

② ② ．「クラウド」によるシステム開発の時代へ ．「クラウド」によるシステム開発の時代へ

② ② ．「クラウド」によるシステム開発の時代へ ．「クラウド」によるシステム開発の時代へ

「使いたいときに、使いたい分だけ、すぐに使える」といっ

たメリットを持つクラウド環境でのシステム開発／サービス

提供が注目されています。

１－ｃ．活動目的と目標

H23 H23 年度 年度 Z1 Z1 チームの目的 チームの目的

H23 H23 年度 年度 Z1 Z1 チームの目的 チームの目的

「モバイルファースト」や「クラウド開発」といっ

たＩＴ業界における重要なトピックに注目し、最終

的にはメンバー全員がＩＳＵＣポータル開発を通じ

て、学習したスキルを習得・実践できるようになる

2012 年の iSUC 仙台大会をターゲットに、

「 ISUC ポータルのセッションアジェンダをスマート

フォンでも

利用できる」サービスを提供する。

活動目標 活動目標

活動目標 活動目標

関西 IBM ユーザ研究会 IT 研究会 H23Z1 チーム

２．活動内容

a. モバイル開発を進めるうえで調べた事

b. 基本方針

c. システムデザイン

・実装イメージ

・要素技術

モバイル特有機能の活用

モバイル特有機能の活用

２－ａ．モバイル開発をする上で調べた事（まとめ

）

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

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

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

Z1 _{イズム、、、}

当チームは ^iSuc ポータルに対し、限り

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

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

　　・実装イメージ

　　・要素技術

d. デモ　開発アプリの紹介

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

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

② ② ．「クラウド」によるシステム開発の時代へ．「クラウド」によるシステム開発の時代へ

② ② ．「クラウド」によるシステム開発の時代へ．「クラウド」によるシステム開発の時代へ

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

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

活動目標活動目標

活動目標活動目標

　　・実装イメージ

　　・要素技術

　　モバイル特有機能の活用

　　モバイル特有機能の活用

ネイティブアプリ～ ^Web Web アプリまで形態は大きくアプリまで形態は大きく 3 ₃ 種類 _種類

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

移植性移植性

開発言語開発言語

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

開発方法開発方法

移植性移植性

開発ツール主な

開発ツール主な

現在のパソコン向け ^iSUC iSUC セッションアジェンダをモバイル向けに再構築セッションアジェンダをモバイル向けに再構築

現在のパソコン向け iSUC iSUC セッションアジェンダをモバイル向けに再構築セッションアジェンダをモバイル向けに再構築

開発環境として IBM SmarterCloud Enterprise IBM SmarterCloud Enterprise を利用 _を利用

開発環境として IBM SmarterCloud Enterprise IBM SmarterCloud Enterprise を利用 _を利用

い・いつでも場所を問わず利用で

きる　開発環境・テスト環境がほし

い・いつでも場所を問わず利用で

きる　開発環境・テスト環境がほし

iSUC _ポータル

２－ｃ．要素技術紹介① -フロント開発技術