アジャイル開発がなぜ良いインターフェースに繋がるのか

最近アジャイル開発とウォータフォール開発を交互に行き来しているので、双方を比較する場面が多くあるのですが、アジャイルの優先順位順にアプリケーションを開発していくというプロセスがインターフェース設計に良い影響を与えているのだなと感じています。


ウォータフォール開発では必要な機能をすべて洗い出してから開発するので、多くのアプリケーションのインターフェースはよく使用する機能やあまり使わない機能も一律で並んでメニュー化されている事が多いと感じます。


逆にアジャイル開発では必要なものから開発していくので、一番使用する機能が前面に出てきてあまり使わない機能は階層の深いところに配置されることが多いと感じます。


どちらの方がシステム的に使いやすいのかというとやはりよく使用する機能へたどり着くパスが短い方が圧倒的に使いやすくなります。


ウォータフォールでもユーザの優先順位を意識したインターフェースが作れなくは無いと思いますが、優先順位をユーザがよくわかっていない場合も多く推測するにも限界があるように感じています。その点、自然と優先順位を考慮したインターフェース設計になるアジャイル開発は使いやすいシステムを作る上で大きなアドバンテージがあると思います。

2013年を振り返って

今年は今までになくいろんなことにトライすることができ、また、大きな決断をする機会にも恵まれとても心に残る年でした。


やはりJava EE 7がリリースされて、Java関連の活動に積極的に参加出来た事がとても大きかったと思います。Oracle社主催のJava EEセミナーへのゲスト参加や、JJUG CCCでの登壇など、今までの聞く立場から伝える立場へと大きくステップアップすることが出来ました。


来年はまた新たなステージに上れるよう、いろんな事にチャレンジしていきたいと思います。

Bootstrap3を使ってJSFを始める

これはJava EE Advent Calendar 2013の22日目の記事です。


昨日は@megascusさんのJPA L2キャッシュに関する辛みでした。
明日は@nabedgeさんです。


本日は、私がJSFでサンプルアプリや実際アプリを作る下準備として作る。Bootstrapをベースとしたひな形の作成手順を紹介します。


JSFでアプリを作成する場合にまずどうやってプロジェクトを作るのかって結構悩みどころだと思います。PrimeFacesをベースにする人が多いと思いますが、私はPrimeFacesを使わずにBootstrapで基本の画面を構築する場合が多いです。JSFでBootstrapのモジュールをどこに配置してどのようなテンプレートを作るとアプリが作れるようになるのか基本的な画面を作成してみたいと思います。

前提条件

JavaNetBeansとGlassFsihをインストールしておきます。

プロジェクトを作成する

まずはプロジェクトを作成します。「Maven>Webアプリケーション」を選択するのがポイントです。

設定ファイルを作る

faces-config.xmlを作成する

JSFアプリなのでまずはJSFの設定ファイルであるfaces-config.xmlを作成します。新規ファイルで「JavaServer FacesJSF Faces構成」を選択するとWEB-INFフォルダ内にファイルが作成されます。JSF2.2の場合、設定するものはほとんど無いのですが、default-localeにjaだけ設定しておきます。

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="2.2"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">
    <application>
        <locale-config>
            <default-locale>ja</default-locale>
        </locale-config>
    </application>
</faces-config>
glassfish-web.xmlを作成する

次に今回アプリケーションサーバGlassFishを使用するのでglassfish-web.xmlを作成します。ファイルはfaces-config.xmlと同様WEB-INF内に配置します。GlassFishでのリクエストの文字化けを防ぐ為にdefault-charsetにUTF-8を設定しておきます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE glassfish-web-app PUBLIC "-//GlassFish.org//DTD GlassFish Application Server 3.1 Servlet 3.0//EN" "http://glassfish.org/dtds/glassfish-web-app_3_0-1.dtd">
<glassfish-web-app error-url="">
  <parameter-encoding default-charset="UTF-8" />
</glassfish-web-app>
web.xmlを確認する

NetBeansでfaces-config.xmlをウィザードで作成すると一緒にweb.xmlが作成されていると思います。特に設定はしませんが念のため中身だけ確認しておきます。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

Bootstrapのファイルを配置する

Bootstrap(とjQuery)をダウンロード

Bootstrapをダウンロードしてプロジェクトに配置します。
BootstrapではjQueryを使っているのでjQueryもダウンロードします。


jQuery
http://jquery.com/


BootStrap
http://getbootstrap.com/

ファイルを配置する

ファイルタブを選択し「プロジェクト名/src/main/webapp/resources」にJavaScript等のファイルを配置します。すべて配置すると以下のような感じになります。
f:id:den2sn:20131215105959p:plain

画面のテンプレートを作る

ヘッダなどは共通化したものを利用したいので、画面のテンプレートを作成します。テンプレートはWEB-INF/templatesフォルダに配置することにします。ファイル名は今回はtemplate.xhtmlとしますが任意でかまいません。template.xhtmlにはBootstrapを使用する為のヘッダの記載と画面のメニュー部分を記載します。(本来JSF2.2のネームスペースはxmlns.jcp.orgですがGlassFishのバグのためjava.sun.comにしてあります)

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <h:outputStylesheet name="bootstrap/css/bootstrap.min.css" />
        <h:outputScript name="jquery/jquery-1.10.2.min.js" />
        <h:outputScript name="bootstrap/js/bootstrap.min.js" />
        <title>Application</title>
    </h:head>
    <h:body>
        <div id="navbar" class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#{request.contextPath}/">Application</a>
                </div>
            </div>
        </div>
        <div class="container">
            <div id="menu" class="col-md-3">
                <ui:insert name="menu">
                    <ul class="nav nav-pills nav-stacked">
                        <li class="active">
                            <a href="#{request.contextPath}/">Example 1</a>
                        </li>
                        <li>
                            <a href="#{request.contextPath}/">Example 2</a>
                        </li>
                        <li>
                            <a href="#{request.contextPath}/">Example 3</a>
                        </li>
                    </ul>
                </ui:insert>
            </div>
            <div id="main" class="col-md-9">
                <ui:insert name="main"></ui:insert>
            </div>
        </div>
    </h:body>
</html>

アプリの画面を作る

最後に実際のコンテンツ画面を作成します。最初はトップページを作成したいのでwebapp直下にindex.xhtmlを作成します。コンテンツ画面では参照するテンプレートの指定とコンテンツ部分の内容を記載すればOKです。ちなみに最初から配置されているindex.htmlは削除しておきましょう。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <body>
        <ui:composition template="WEB-INF/templates/template.xhtml">
            <ui:define name="main">
                <h1>Main</h1>
                <p>Hello world!</p>
                <a class="btn btn-primary" href="#">Button</a>
            </ui:define>
        </ui:composition>
    </body>
</html>

出来上がり

プロジェクトを実行すると、無事このようなひな形画面が作成出来ました。
f:id:den2sn:20131215111213p:plain


つらつらと作成する手順を紹介しましたが、GitHubにひな形をアップしておいたのでコピペすればすぐアプリを作ってみる事ができると思います。


https://github.com/den2sn/jsf_bootstrap


あと、そもそもBootStrapがわからないんだけどって人はこの本を読めば良いよ。


はじめてのBootstrap (I・O BOOKS)

はじめてのBootstrap (I・O BOOKS)


では幸せなJSFライフを。

JavaでSass(SCSS)やLESSを使う

NetBean7.4ではJava 8対応など大きな機能追加がされていますが、
その中でSass(SCSS)やLESSへの正式対応が行われています。
これで念願のJava EEでSCSSが使えるようになりました。
CSS書くのめんどくさいですからね。で、試してみました。


まずはSassのコンパイル環境が必要です。
Macだと既にRubyの環境が入っているので


sudo gem install sass


でインストール出来ると思います。
WindowsだとRubyInstaller(http://www.rubyinstaller.org/)でRubyをインストールしてから上記コマンドでOKです。


準備が終わったらまずはNetBeansのオプションでsassのパスを指定します。
オプション>その他>CSSプロセッサ
でsassのパスを指定します。検索すると簡単に指定出来ます。


f:id:den2sn:20131130005848p:plain


NetBeansインストール前にsassをインストールしていると事前にパスを解決してくれてるみたいです。


次にWebアプリケーションプロジェクトを作成したら
Webページ/resourcesにscssフォルダを作成して新規ファイルを作成します。


f:id:den2sn:20131130011206p:plain


HTML5カテゴリーにSassファイルとLESSファイルが追加されているので
Sassファイルを選択。


f:id:den2sn:20131130010056p:plain


Sassのファイル名と一緒に初回はSassのコンパイル設定も表示されます。
保存時にSassファイルをコンパイルにチェックして、
ウォッチフォルダの入力に「/resources/scss」出力に「/resources/css」を指定します。


f:id:den2sn:20131130010142p:plain


するとscssフォルダにscssファイルが作成されると同時に
コンパイルされたcssファイルがcssフォルダに出力されます。


f:id:den2sn:20131130010203p:plain


scssではもちろん補完も効きますし、
ファイルを書いて保存してみると


f:id:den2sn:20131130010252p:plain


こんな感じでcssファイルにも自動的に反映されます。


f:id:den2sn:20131130010336p:plain


sassのデバック用の記述が追加されているので
追加したくない場合はツール>オプションのCSSプリプロセッサの設定で
「追加削除の生成」のチェックを外すと


f:id:den2sn:20131130010425p:plain


出力されなくなります。


f:id:den2sn:20131130010444p:plain


SCSS対応をフレームワークとかではなくてIDEで対応するところが、いかにもJava流ですね。

プログラマな自分がサイトのデザインする時の流れ

デザイナーの方がサイトをデザインする際はもちろんPhotoshop等を使用してサイトをデザインしていくと思いますが、プログラマ出身の私も最近はコンセプトデザインからフォトショに落としてサイトを作る場合が多いです。


プログラマってよくHTML書きつつ直接CSSとかでデザインしようとしがちで、私も以前はそのようにしていました。
しかし、そうやってデザインしたサイトはどうしてもHTMLの制限に縛られたデザインになる事が多く、なんとなくイマイチなサイトになりがちです。


今回は、以前作った26appというサイトをサンプルに簡単に私がサイトを作る際の流れを説明したいと思います。

まずはなんとなく手書き


最初はなんとなくなイメージを手書きで書く事が多いです。
サイト全体のイメージから書く事もありますし、画面遷移等から始める事もあります。
以下はまず、なんとなくのロゴイメージからサイトを作成してみたときのデッサンです。


f:id:den2sn:20100923102100j:plain


見てわかると思いますが、この時はふと思いついたデザインを子供用のお絵描きボードに書いちゃってます。
最初はこれくらい適当な感じでいくつかの絵を描いてその中から良さそうなものを選択しています。この時は3つくらい書いたかな。

ドローツールで部品化


手書きで書いたデッサンを元にまずはイラレ(またはInkscape)などのドロー系のソフトでパーツ化していきます。
基本部品はドロー系のツールを使って作っておくと後でサイトのデザインに合わせてサイズを自由に変更出来るので良いです。
フォトショとかで書いてしまうと拡大縮小があとで面倒です。
以下は、ロゴイメージからInkscapeを使ってベジュ化したものです。

f:id:den2sn:20131125003152p:plain


狐や犬はそれっぽい写真とかを参考に書いてみました。
グラデーションとか使うとなんとなくそれっぽくなりますね。
デザイナーではないので細かいクオリティはイマイチですがそれなりのものは練習次第で出来ると思います。

画像編集ツールでサイト全体をデザイン


次にフォトショ(またはGimp)などの画像編集ツールを使用してサイト全体のデザインを作成します。
以下はロゴを元にサイトのログイン画面をGimpで作成したものです。


f:id:den2sn:20131125003223p:plain


ガイドのラインをうまく使うのがポイントですね。作成したいサイトの幅をまず決めてガイドのラインを引きパーツを配置していきます。
足りないパーツはドローツールに戻って作成してコピペで貼付けるを繰り返します。
ボタンのオンオフ等のはレイヤーの表示、非表示で2パターン作ります。

ガイドに合わせて画像を切り取りHTML化する


あとは部品を画像として切り取ってサイト化していくだけです。
ここまでくるとあとは単純作業ですが、HTMLを意識していないのでどう切り取るかは結構試行錯誤するところです。


f:id:den2sn:20131125003922p:plain


HTMLから作成するとこういった繋がったようなデザインはなかなかやらないので
逆に言うとそれだけ独創性のあるサイトになりやすいと思います。


私が最近サイトを作成する時の流れを説明してみましたが、
なんとなくBootStrap使ってそれなりにオシャレなサイト作れるよみたいなところから
一歩踏み出したい時はこのようにデザインから入るステップも良いのではないかと思います。

JJUG CCC 2013 FallでJSFの話をしてきた

11月9日(土)に日本Javaユーザーグループ主催のクロスコミュニティカンファレンス 2013 Fall(JJUG CCC 2013 Fall)が開催されました。


今回も前回に引き続き、Call for Papersが実施されていたので、
JSFの内容で応募したら採用されたので登壇してきました。


思っていたよりも多くの方に来ていただき
JSFに少なからず興味を持ち始めてきた方も増えてきたんだなと思いました。
JSF普及活動の成果でしょうか。


登壇で使用したスライドです。


○スライドの補足
私が試した時はweb.xml記載しなくても動いた気がするんだけど
きしださんからやってみたら駄目だったといわれた。


idに「:」があるのでjQueryと相性悪いと書いたけど、キクタローさんが解決策書いてくれた。
http://kikutaro777.hatenablog.com/entry/2013/11/10/000606


JSFは用途を選べばかなり力を発揮するのですが、
昔のイメージが強くアンチユーザも多いので
その辺が払拭できたら良いなと思います。


以下、会場で頂いた質問への回答。


・JSF2.2で導入されたステートレスモードでパフォーマンスは改善するのか。


私が試した限りではステートレスモードのONとOFFで
ほとんどレスポンス速度は変わりませんでした。


JavaScriptゴリゴリ使いたいって人やステートフルが嫌いな人とかがいますがその場合JSFでどのように対応できますか


JavaScriptについては制限される部分もありますが、制限されない部分もあります。
JSFコンポーネントという仕組みがあるので
JavaScrip+JAX-RSで作ったゴリゴリ動的なコンポーネント
使う人はJavaScript知らなくても埋め込めば使えるみたいなこともできるので、
使い方次第ではおもしろいことができると思います。


ステートレスが好きな人への対応はなかなか難しくて(生理的に無理的なところがあり)
ステートレスモードはありますがそれにも限界があります。
JSFではステートフルだから劇的に作りやすいという部分もあってトレードオフだと思っています。
ステートレスで問題になるのは負荷分散があるからであって
複数サーバがある場合は問題になりますが、
サーバ1台しかないのにステートレスがっていうのはちょっと違うかなと思います。
昔は私もステートレス好きだったのでJSFの簡単さを知れば
心変わりすることもあるかもしれません。


JSFJavaScriptを使用していますか


実際JSFを使ってみるとわかりますが、ヘッダーでjsf.jsというファイルがロードされていてJSFで使用されるJavaScriptが記載されています。プレゼン資料でも触れていますが、一部仕様として提供されているJavaScriptのインターフェースもあるので、気になる方はソースなど読んでみると良いと思います。


だいぶJSF悪くないよというのも浸透してきたところだし、
そろそろJSF以外の話もしていこうかなと思います。