退職します

1月31日をもちまして約14年勤めたアイエックス・ナレッジを退職することとなりました。


現職では、良き仕事、良き上司、良きチームメンバに恵まれ、とてもよい社会生活を過ごすことができました。とても感謝しています。


SI業務ではさまざまなお客さんと触れ合う機会がありますが、使用技術もさまざまで、楽な仕事からハードな仕事まで多種多様です。
その中で、私は入社当初から今まで多くの時間をJavaフレームワーク開発に従事し、主にJavaEEを主軸とした先進的な開発に多く携わることができました。
とても良い環境に身を置かせて頂いたと思っています。


退職は初めての経験で、期待もあり不安もあります。今回の退職は会社に対して不満があったというわけではなく、自分がスキルアップしたいという思いからの決断です。


来月から新しい会社でスタートします。今のスキルを生かしつつ、これから得られる新しいスキルを吸収し、さらなる高みを目指したいと思います。

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

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


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


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


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


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

2014年

あけましておめでとうございます。今年もよろしくお願い致します。


新年最初の目標は年末年始で太った分ダイエットに励みます。


あと今年は、IT技術習得はやや控えめにして、その分置き去りにしていた英語を頑張りたいと思います。

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使ってそれなりにオシャレなサイト作れるよみたいなところから
一歩踏み出したい時はこのようにデザインから入るステップも良いのではないかと思います。