Fujitsu Standard Toolossforum.jp/jossfiles/JOSSPF-2015-3-3.pdf2015/03/03 ·...

FUJITSU CONFIDENTIAL

ＯＳＳ活用と、プロジェクトの進め方のご紹介

浪江町タブレットを利用したきずな再生・強化事業への取り組み

Copyright 2015 FUJITSU SOFTWARE TECHNOLOGIES LTD


プロフィール

Copyright 2015 FUJITSU SOFTWARE TECHNOLOGIES LTD 1

阪口学富士通ソフトウェアテクノロジーズ株式会社

浪江町タブレットアプリの開発リーダーです！

最近はHTML5を利用したフロントエンドのアプリ開発が多いです

2012年 2013年 2014年

2012/2 iPad向けのHTML5アプリ開発を開始

2012/7 Android対応。

PhoneGap,RequireJSを導入

2014/4 iPhone対応 Bowerを導入

Bower

RequireJS

FUJITSU CONFIDENTIAL 2

浪江町タブレットアプリご紹介



なみえタブレットアプリ紹介


なみえ新聞

浪江町

復興支援員ブログ

なみえ写真投稿 Facebook API

YouTube API

RSS

Webスクレイピング

浪江町民を、タブレットを通じてつなげます

http://ameblo.jp/namiefukkousien/




クライアントアプリアーキテクチャ

4 Copyright 2015 Fujitsu Software Technologies Limited

ハイブリッドアプリ

Android + Cordova + HTML5

Single-page Application（SPA）

バックエンド

HTTP Request

Applicaton Data

- 単一のHTMLのみをもつ - DOM要素の操作でページを切り替える

レスポンスが軽快

HTML5による表現力豊かなUIを実現

デバイスのネイティブ機能が利用可能

スライドショー

ギャラリー画像


バックエンドはオープンソースBaaS

5

バックエンド

クライアント (Android)


CloudFormation

CloudFormationとAnsibleを使用してプロビジョニングを自動化

- Rest API - OData - OAuth2

OData / OAuth2.0 / WebDAV 認証/ユーザー管理/CRUD

アクセス制御/検索/共通ロジック …

サーバ側を汎用API化クライアント側はアプリ開発に集中


利用OSS


浪江タブレットアプリは、将来OSSとして公開する予定です！そのため、フレームワーク、ライブラリは、全てＯＳＳを利用しています。一部を紹介します！


浪江タブレットアプリで利用している主なOSS

7

MVCフレームワーク


「HTML5 + ハイブリッド」「Single-page Application（SPA）」を実現するためのOSSを利用

テンプレートエンジン

Lo-Dash UIフレームワーク

Foundation 5

ハイブリッド化

Cordova モジュール分割

RequireJS


アプリ基盤にBackbone-Boilerplateを利用


https://github.com/backbone-boilerplate/backbone-boilerplate

Backbone.jsを利用するアプリのテンプレート

アプリのプロジェクト構成のひな形

Backboneアプリを利用したサンプルアプリを含む

ビルドツールや、開発中に利用できるツールも提供

フォルダ構成や、Backboneに関連するＯＳＳの組み合わせの一例を知ることができる

・Boilerplateを利用することで、先人の知恵を得ることができる

・早く開発を立ち上げられる







CI環境

9 Copyright 2015 FUJITSU SOFTWARE TECHNOLOGIES LTD

単体テスト

カバレッジ測定

テストフレームワーク

アサーションライブラリ

テストランナー

istanbul

ドキュメント JsDoc3

静的解析 JsHint

継続的インテグレーションの各タスクでもOSSを利用

Boilerplateのビルドサンプルを利用

EC2


どのOSSを選定すべき？


HTML5 関連のOSSは進化のスピードが速すぎる！

Foundation 5

弊社のエンジニアが慣れているOSSを採用

常に新しい技術に関心をもたなければならない

エンジニアの意識を向上する仕組みが必要

今どき、こっちなんじゃないの・・・？


OSSの品質は？


品質問題にはほとんど遭遇しない

問題があっても、他のOSSで代替して回避

backbone-boilerplate/ grunt-bbb-server

gruntjs/ grunt-contrib-connect

jockmac22/ foundation_calendar_date_time_picker

bevacqua/rome

HTML5のライブラリは非常に多いため、代替しやすい

バグがあっても、Javascriptであればソース修正して即適用できる

一部のhtmlを正しく読み込んでくれない！

スタイルをカスタマイズしにくい！

Grunt serverタスクが・・

カレンダーライブラリが・・


プロジェクト進め方の紹介


浪江タブレットアプリは、スクラムを用いたアジャイル開発を実践しています。


朝会 / 夕会リモートミーティング (Skype) ペアプログラミングリーダーレビュープロダクトオーナーレビュー

フィードバック

前スプリントレビューふりかえりスプリント計画

追加機能を記述優先順位付け

2週間のスプリントを複数回繰り返し

成果物の公開町民への説明会

スプリント計画開発リリース

プロダクトバックログ

スプリント (2週間)

・・・スプリントｎスプリント０（立ち上げ）

スプリント１スプリント２スプリント３スプリント４


開発プロセス

FUJITSU CONFIDENTIAL 14 Copyright 2015 Fujitsu Software Technologies Limited

Eyes, JAPAN

・リーダ・開発メンバ

新横浜静岡

・リーダ・デザイナ・開発メンバ

富士通/FST

・サブリーダ・開発メンバ

福島会津若松

福島二本松

浪江町役場様

・プロダクトオーナー

・新横浜⇒会津若松 3時間30分程度・新横浜⇒二本松 2時間30分程度・会津若松⇒二本松車で１時間程度

気軽に会って打ち合わせとかできない・・

遠隔地での開発

課題

• 朝会・夕会

• 場の共有

• 情報の共有

• コミュニケーションツール

FUJITSU CONFIDENTIAL 15 Copyright 2015 FUJITSU SOFTWARE TECHNOLOGIES LTD

Skype通話での朝会/夕会

Eyes, JAPAN(福島会津若松)と FST(新横浜)でSkype朝会・夕会


Skypeでの常時接続


Eyes, JAPAN(福島会津若松)と FST(新横浜)で常時接続


バーンダウン

スクラムボード


アトラシアン JIRA Agile

コミュニケーションツール

FUJITSU CONFIDENTIAL 18 Copyright 2015 Fujitsu Software Technologies Limited

チャットツールとしてslackを利用

コミュニケーションツール


アナログも活用


チームで共有すべき情報は、壁やホワイトボードを活用


朝会 / 夕会リモートミーティング (Skype) ペアプログラミングリーダーレビュープロダクトオーナーレビュー

フィードバック

前スプリントレビューふりかえりスプリント計画

追加機能を記述優先順位付け

2週間のスプリントを複数回繰り返し

成果物の公開町民への説明会

スプリント計画開発リリース

プロダクトバックログ

スプリント (2週間)

・・・スプリントｎスプリント０（立ち上げ）

スプリント１スプリント２スプリント３スプリント４


全員でやるべきところ

これは全員が集まってやってます

FUJITSU CONFIDENTIAL 21 Copyright 2015 FUJITSU SOFTWARE TECHNOLOGIES LTD

スケジュール確認タスク洗い出し、工数見積もり

方式設計作業内容の合意

全員が集まって計画を立てる

スプリント計画


ふりかえり


浪江町役場様、開発、デザインチーム合同でふりかえり

FUJITSU CONFIDENTIAL Copyright 2015 FUJITSU SOFTWARE TECHNOLOGIES LTD. 23

参考）2014/12/24 スプリント6計画 •開催日時

2014/12/24 •場所

浪江町二本松事務所 •参加者

浪江町役場）吉永、小俣 CodeforJapan) Eyes, JAPAN) 行田、北澤、八幡 FST) 阪口、増田、滝田、黒澤、伊藤、藤田 FJ）山口、近藤（記）

予定実績作業内容

10:30 - 11:00 10:30 - 10:45 Eyes, JAPAN スプリントレビュー

スプリント5レビュー (デザイン)

11:00 - 11:30 10:45 - 11:35 FST スプリントレビュー

スプリント5 レビュー (開発)

11:30 - 11:40 11:35 - 11:45 ふりかえり前回のTry確認

11:40 - 12:20 11:47 - 12:27 ふりかえり

浪江町役場

FST

Eyes,JAPAN

12:20 - 12:35 12:27 - 12:45 ふりかえり発表

13:40 - 14:40 13:45 - 15:35 スプリント6 要件確認

14:40 - 17:10 15:35 - 19:00 タスクあげ、工数見積もり

17:10 - 17:30 19:00 - 19:40 スプリント6 作業内容確認・合意

https://codefornamie.atlassian.net/wiki/pages/viewpage.action?pageId=6193638















今回のプロジェクトを通して

苦労しているところ

遠隔での開発だと、やはり、お互いの状況がすぐに伝わらない時がある

•逼迫感というか、空気感が伝わらない

•ただ、当初思っていたよりもうまくやれている

高齢者にも使いやすいUIの模索

•ユーザーテストのたびに、UIを作り直し。すでに3回、UIを変更してます

•どうやったら、機能があることに気づいてもらえるか

•アプリケーションを起動するまでの導線をどうするか

楽しいところ、いいところ

役場の方とも一緒に取り組めている

Eyes, JAPANの若いエンジニアに刺激をうけている

•新しいことに興味を持っていて、OSSも詳しい！

Copyright 2015 Fujitsu Software Technologies Limited 25


最後に


これまでのSI案件は、開発完了したらそれで終わりでした。

でも、今回は違います。

浪江町タブレットアプリは、オープンソースとして公開されます。

個人として、このアプリケーションに貢献することができるのです。

このような取り組みが、今後のSI開発を変えると考えています。

浪江町二本松役場から撮影

Fujitsu Standard Toolossforum.jp/jossfiles/JOSSPF-2015-3-3.pdf2015/03/03 ·...

Documents

Transcript of Fujitsu Standard Toolossforum.jp/jossfiles/JOSSPF-2015-3-3.pdf2015/03/03 ·...