H23IT研関西Z1活動報告会 20120514

(1)

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

Ｚ１チーム

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

～Ｈ２３年度活動報告～

Ｚ１チーム

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

～Ｈ２３年度活動報告～

(2)

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

2

Z1 Z1 _{イズム・・・} _{イズム・・・}

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

戦戦

当チームは

当チームは ^iSUC iSUC ポータルに対し、限 _{ポータルに対し、限}

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

(3)

Z1 チーム紹介

3

当チームはｉＳＵＣのＷｅｂサイトである「ｉＳＵＣポータル」に対し、

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

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

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

(4)

アジェンダ

4

1. はじめに

a. 活動背景

b. 活動目的と目標

２．活動内容

a. モバイルアプリの開発形態比較

b. 基本方針

c. システムデザイン

　　・実装イメージ

　　・要素技術

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

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

(5)

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

5

１．はじめに

a. 活動背景

b. 活動目的と目標

(6)

１－ a ．活動背景

6

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

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

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

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



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

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

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

発が可能

昨今のＩＴトレンド

は・・・

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

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

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

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

(7)

１－ｂ．活動目的と目標

7

H23H23 年度_年度^Z1Z1^{チームの目的}チームの目的 H23H23 年度_年度 Z1Z1 チームの目的_{チームの目的}

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

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

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

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

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

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

フォンでも

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

活動目標活動目標活動目標活動目標

(8)

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

8

２．活動内容

a. モバイルアプリの開発形態の比較

b. 基本方針

c. システムデザイン

　　・実装イメージ

　　・要素技術

(9)

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

２－ａ．モバイルアプリの開発形態の比較　～検討

～

9

ネイティブアプリ～

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

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

移植性移植性

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

高高

低

開発言語開発言語

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

ハイブリッド

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

開発方法開発方法

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

機能の活用

移植性移植性

iPhoneは Objective-C

Android は Java ^HTML、 JavaScript

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

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

HTML 、 JavaScript

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

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

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

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

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

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

開発ツール主な

iPhone は Mac OS 、 Xcode

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

(10)

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

２－ａ．モバイルアプリの開発形態の比較　～方式

～

10

ネイティブアプリ～

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

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

移植性移植性

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

高高

低

開発言語開発言語

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

ハイブリッド

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

開発方法開発方法

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

機能の活用

移植性移植性

iPhoneは Objective-C

Android は Java ^HTML、 JavaScript

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

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

HTML 、 JavaScript

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

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

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

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

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

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

開発ツール主な

iPhone は Mac OS 、 Xcode

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

採用

(11)

２－ｂ．活動方針①　～機能方針～

¹¹

現在のパソコン向け

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

現在のパソコン向け

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

具体的な実装機能具体的な実装機能具体的な実装機能具体的な実装機能

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

対応

・モバイル端末で見たい

・会場で見たい

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

・モバイル端末で見たい

・会場で見たい

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

• セッションアジェンダの閲覧機能

• _{お気に入り機能}

• レコメンド機能（おすすめセッション）

• _検索機能

(12)

２－ｂ．活動方針②　～開発方針～

¹²

開発環境として

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

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

•場所・端末を問わず利用できる環境

•必要な時にすぐ環境を準備可能

•モバイル端末からの検証環境

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

OS

ハードウェア

Eclipse

ｻｸﾗｴﾃﾞｨﾀ

Internet

(13)

jQuery Mobile

13

Windows

Node.js MySQL

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

iSUC _ポータル

採用アーキテクチャ採用アーキテクチャ採用アーキテクチャ採用アーキテクチャ

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

HTML5

HTML5 CSS3_CSS3 ^Java Script Java Script

jQuery Mobile Node.js IBM クラウド

モバイル向けユーザインターフェースの提供が可能

JavaScript ベースのサーバサイドスクリプトとして注目

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

(14)

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

•jQuery Mobile とは

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

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

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

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

14

ｊｊ Query MobileQuery Mobile ｊｊ Query MobileQuery Mobile

Internet リクエスト

レスポンス

サーバ Web_ブラウザ

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

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

(15)

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

～

15

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

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

 _{シングルスレッド}

 _{イベントループ}

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

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

非同期 I

／ O 他処

理

非同期

／I O

非同期 I

／ O

シングルスレッド

マルチスレッドマルチスレッド

I／ＯＩ／ＯＩ／Ｏ

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

Node.js Node.js

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

(16)

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

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

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

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

•_{従量課金制}

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

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

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

¹⁶

ＩＢＭＳｍａｒｔｅｒＣｌｏｕｄＥｎｔｅｒｐｒｉｓｅＩＢＭＳｍａｒｔｅｒＣｌｏｕｄＥｎｔｅｒｐｒｉｓｅ

利用イメージ利用イメージ利用イメージ利用イメージ

ＩＢＭデータセンター

（幕張）

仮想サーバ

Internet

・開発

(17)

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

¹⁷

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

② イメージ

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

④ マシンスペックを選択

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

量）

① インスタンスの追加

(18)

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

¹⁸

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

インスタンス名

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

パスワードを入力

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

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

(19)

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

¹⁹

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

⑨ ＩＰ入力

⑩ ログイン

仮想インスタンス利用開

始！

(20)

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

20

２．活動内容

　　ｄ .デモ

　　・開発アプリの紹介

(21)

2- ｄ．Ｄｅｍｏ

²¹

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

プリ

IBM SmarterCloud +

jQuery + MySQL + Node.js を利用

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

　（

^URL ： http://170.225.184.143/agenda_）

IBM SmarterCloud Enterprise IBM SmarterCloud Enterprise

WindowsServer2008 node.js MySQL

【環境イメージ】

jQuery Mobile

(22)

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

22

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

　　 a. ｊ Query

　　 b.Node.js

　　 c. クラウド開発をやってみて

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

　　 e. １１月の iSUC 大会に行く事が出来れ

ば・・・

(23)

3- ａ．ｊ Query Mobile

23

利点利点利点利点

パフォーマンスの改善については改善策あり。大掛かりなデザインの変更は困難。

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

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

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



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

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

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

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

考慮点考慮点考慮点考慮点

(24)

3- ｂ． Node.js

24

サーバサイドを JavaScript で作れるため、 _{学習コストが低く済む}

気軽に扱える。

※ ソースのビルド不要、実行モジュールも軽い

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

⇒ 今回はテキストエディタを使用しての開発実施。

　　（ Eclipse プラグインで開発する方法もありそうだが、未検証）非同期処理を考慮しないと、正しく動作しない

Web サーバに普通にある機能を自分で用意する必要がある。 ⇒ ログ出力やエラーハンドリングなど

(25)

3- ｃ．クラウド開発をやってみて

25

使いたいときに使え、低コストでの開発が可能ロケーションフリーによるアクセス

開発環境の統一が可能

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

パブリッククラウドの考慮点について意識する必要あり

⇒ネットワーク遅延

⇒セキュリティ対策

⇒コスト

(26)

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

26

開発のとっつきやすさは◎

　⇒今までにモバイル開発の経験がなくても、ある一定の品質で画面　　設計ができる。（ JqueryMobile や HTML5 などのおかげ）搭載する機能は取捨選択する必要あり

　⇒そもそもの画面サイズが小さいため、実現出来ることに限りがある

。　

実機での動作確認は必須

　⇒ＯＳやバージョンの違いによって画面描画に微妙な差異があるため

、　　シミュレータでの確認は限界がある。

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

対応

気づき気づき気づき気づき

クラウド環境

仮想サーバ

Interne t

・開発

・実機検証

(27)

27

ユーザ視点ユーザ視点ユーザ視点ユーザ視点

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

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

「 iOS ヒューマンインターフェースガイドライン」等を参考に UI の改善

システム視点システム視点システム視点システム視点

3- ｅ．ｉＳＵＣ大会に行くことが出来れば・・・

_iOS 端末を横に傾けた際の表示の最適化

⇒ jQuery Mobile のバージョンアップを検討

_{エラーハンドリング}

_PC 版セッションアジェンダとの連携

_{運用視点での評価}

(28)

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

28

　　

活動メンバー

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

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

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

•丸橋弘明　　 SCSK 株式会社

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

•柳井弘嗣　　株式会社 JIEC

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

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

　　

アドバイザー

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

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

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

　　　　　　　　　　　　^{（五十音順、敬称略）}

H23IT研関西Z1活動報告会 20120514

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

Ｚ１チーム

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

～Ｈ２３年度活動報告～

～Ｈ２３年度活動報告～

Ｚ１チーム

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

～Ｈ２３年度活動報告～

～Ｈ２３年度活動報告～

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

Z1 Z1 イズム・・・ イズム・・・

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

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

戦 戦

当チームは

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

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

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

Z1 チーム紹介

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

アジェンダ

1. はじめに

a. 活動背景

b. 活動目的と目標

２．活動内容

a. モバイルアプリの開発形態比較

b. 基本方針

c. システムデザイン

・実装イメージ

・要素技術

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

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

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

１．はじめに

a. 活動背景

b. 活動目的と目標

１－ a ．活動背景

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

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

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

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

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

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

発が可能

昨今のＩＴトレンド

は・・・

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

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

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

１－ｂ．活動目的と目標

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

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

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

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

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

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

フォンでも

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

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

２．活動内容

a. モバイルアプリの開発形態の比較

b. 基本方針

c. システムデザイン

・実装イメージ

・要素技術

２－ａ．モバイルアプリの開発形態の比較 ～検討

～

２－ａ．モバイルアプリの開発形態の比較 ～方式

～

採用

２－ｂ．活動方針① ～機能方針～

• セッションアジェンダの閲覧機能

• お気に入り機能

• レコメンド機能（おすすめセッション）

• 検索機能

２－ｂ．活動方針② ～開発方針～

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

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

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

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

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

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

Z1 Z1 _{イズム・・・} _{イズム・・・}

戦戦

当チームは ^iSUC iSUC ポータルに対し、限 _{ポータルに対し、限}

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

　　・実装イメージ

　　・要素技術

　　・実装イメージ

　　・要素技術

２－ａ．モバイルアプリの開発形態の比較　～検討

２－ａ．モバイルアプリの開発形態の比較　～方式

２－ｂ．活動方針①　～機能方針～

• _{お気に入り機能}

• _検索機能

２－ｂ．活動方針②　～開発方針～

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

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

　　ｄ .デモ

　　・開発アプリの紹介

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

　（

　　 a. ｊ Query

　　 b.Node.js

　　 c. クラウド開発をやってみて

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

　　 e. １１月の iSUC 大会に行く事が出来れ