ゼーメル要塞

tomehachi | 2015/03/15

2015/03/14 22時頃

あんなところに橋が！！

イカさんのレベル上げ！

ヴィクトリカさんが改名してイカさんになったそうで、何でももっと強そうな名前を！という想いを込めているそうです！
個人的には、ヴィクトリカさんという名前のほうが強そうなんですけどね！ｗ
イカさんが黒のレベル上げをしたいということでゼーメル要塞に突入することになりました！

ナイトぴか
竜騎士ひっつーさん（新加入）
黒魔道士イカさん
学者りったん

アーリマンの巣

いつも必死に戦闘していたのであんまり見る機会が無かったアーリマンの巣とも言えるバトルフィールド内ですが、
よくよく見ると、綺麗な泉がｗ何の脈絡もなく泉！ｗ
こういう細かい設定が FF のアートの醍醐味ですね！

眼下に見下ろす壊れた橋

デカいカエルさんがたくさんいる危険な崖。
次から次へと登ってくるカエルの処理で気づく間もなかったですが、ふと崖の下を見下ろすと、あんなところに壊れた橋が！
設定的にも、イシュガルドの要塞だったけど魔物に占領されてしまったこのダンジョン。
写真を見ると、イシュガルドの騎士が使っていたであろういろんなものがおいてあるんですね～。
そう思いながらダンジョンを探検していると、ストーリーを肌で感じることが出来ますね！

サスタシャ侵食洞

tomehachi | 2015/03/15

2015/03/14 15時頃

食べ物たくさん！

PT結成

たまに双剣士でのんびり遊んでいたのですが、ついにレベルが15に到達！
さっそくサスタシャ侵食洞にいけるようになったので ID行きたい病 が発症しました！

Dungeon Walkers のメンバーに声を掛け、4人の探検隊PTを結成しました！

戦士りったん
双剣士ぴか
詩人ぱのさん
白魔道士ノア氏

海賊の略奪品がいっぱい！

最後の戦場を前に、みんなで船着場を物色。
色んな食材がおいてありましたｗ

とうがらし、大豆、小麦粉の麻袋がたっくさん！
お酒のビンもいっぱいありましたねｗ
調理師が生唾ゴックンしそうな量でした！

エオルゼアで一番最初に挑むIDですが、最初からいっろいろ仕込んでますね！

船長さびしそう！

物色ついでに記念撮影！りったんの生脚に釘付けになっちゃダメよ！ｗ
写真の後ろのほうで海賊の船長さんがコリブリと一緒に待ちぼうけを喰ってますｗ

Dungeon Walkers 設立！

tomehachi | 2015/03/08

Pikaboo Millerです！
UNICORNサーバで遊んでいます！

LS "Dungeon Walkers" 設立！

予てより、SQUARE ENIX の Final Fantasy XIV で遊んできましたが、このたび、Dungeon Walkers (ダンジョン・ウォーカーズ) というリンクシェルを設立しました！

目的

アイテムレベル(IL) の向上やゲーム内のプレイヤーの成熟、により、「ダンジョン中のカットシーンスキップ」や「ダンジョンの攻略の予習」を、やんわりと強要されることが少なからず目立つようになりました。

コンテンツファインダーと呼ばれる、見知らぬ人とパーティを組んでダンジョンを攻略する仕組みにより、何度も通ったことのある成熟度の高いプレイヤーと、初めて挑むプレイヤーがマッチングされることが多々起きています。

成熟度の高いプレイヤーとしては、既に見知ったダンジョンに見えるので早く攻略を済ませたい。
初めて挑むプレイヤーとしては、じっくりダンジョンの内容を肌で感じたい。
この2者が同じダンジョンでPTを組むと意見の相違が生じる事は容易に想像がつきます。

ゲームの性質上、仕方の無いことですが、それによって悲しい想いをするプレイヤーが少なからず居ること、そして自分自身も気軽に自分のペースで楽しめる方法は無いものかと考え、同じ思いを持つプレイヤーを集めてこのように "Dungeon Walkers" というリンクシェルを設立しました。

成果

もっとじわじわ集まって来るものと思ってクラフターの素材をカバンに詰めてクラフトしながら待っていようと思っていましたが、そんな暇が無いほどの方が集まって下さいました。

プレイを始めたばかりの人
初心者ではないが「急ぐパーティ」に疲れた人
気軽にダンジョンの手伝いをしようと思ってくれた人

色んな人が来て下さっています。本当に感謝。
同じ空間を共有する仲間として楽しく遊んでいけたらいいなと思います！

記念撮影

お一人だけ、用事で来れませんでしたが、さっそく希望者がいたので集まった皆さんでダンジョンに行ってきました！

外郭攻略カストルム・メリディアヌム

普段、意識しなかったけど、カストルム・メリディアヌムがバリアに守られている様は、実に美しいことが判明！
いつもここダッシュで一気に大量の敵と戦闘ですからね～なかなか見る機会がないですよね！

最初のボス撃破直後、いつもならサッサカ通り過ぎてしまうのある広場。
ちょっと寄り道して絶景ポイント発見！

ちょっと色合いがおかしくなっちゃったｗ上の写真から下を見下ろすと、カットシーンでよく出てくる形状の飛行船（あの縦に長いやつ！）が墜落しているのが見えます！

タンクを爆破する場所の奥に巨大な、・・・なんだろうお風呂？ｗ青燐水を加工する機械が見えます！
熱そう！

最後は記念撮影して終了！

魔導城プラエトリウム

金属の塊でできた敵拠点です。序盤はどこを見渡しても、鉄！鉄！鉄！
ところが、魔導アーマーに搭乗するフェーズで最強の眺めを発見！ｗここも色がおかしく・・・ｗ

上の写真と同じ場所で下を見下ろすと、大きな戦艦のようなものが墜落している！
でけぇ！！

最後に記念撮影！ツコさん、コロさん姉妹が事件屋ポーズで笑っている顔がなんとも・・・ｗｗｗ

いきなりしょっぱなからこんなに楽しくて大丈夫か？？と思うぐらい新しい発見と、皆の個性を堪能しました！
長く色々楽しめるといいですね！皆さんこれからも宜しくお願いします！！

Seasar2でAjaxするオススメの方法

tomehachi | 2015/02/27

Dolteng で生成するような Seasar2 による Webアプリケーションに限らず、いわゆる Java による MVC 思想を採用した SAStruts や昔の Struts でも当てはまると思いますが、私なりの楽な方法をご紹介。
もちろん、動けばいいわけですので飽くまでご参考程度に。

jQuery + Ajax の一般的(?)な処理

色々なサイトを参考にしていますが、いわゆるどのサイトでも紹介されている方法をそのまま実践している人がけっこういらっしゃるような気がします。

飽くまで例ですが、例えば以下のような感じです。

$.ajax({
  type: "POST",
  dataType: "json",
  url: "/contextPath/application",
  success: function(json) {
    // ここに返されたjsonに対する処理する記述
    var html = "<table>";
    for(i=0; i<json.length; i++) {
      html
      +="<tr>"
      + "<td>" + json[i].id + "</td>"
      + "<td>" + json[i].name + "</td>"
      + "</tr>";
      $("#data").html(html);
    }
  },
});

$.ajax({

type: "POST",

dataType: "json",

url: "/contextPath/application",

success: function(json) {

// ここに返されたjsonに対する処理する記述

var html = "<table>";

for(i=0; i<json.length; i++) {

html

+="<tr>"

+ "<td>" + json[i].id + "</td>"

+ "<td>" + json[i].name + "</td>"

+ "</tr>";

$("#data").html(html);

}

});

Web クライアントから Ajax 通信で、返される構造化テキストを "JSON" として受け取り、それをうまいこと整形して HTML コードを生成。
たまに聞くのが、「JavaScript で HTML を生成するのが大変！」という声。

ただでさえ、スラスラと書けない HTML を、JavaScriptで生成するように書くのは割りと大変ですね。
私もこの方法だと、よく頭がゴチャゴチャになります。

MVC の性質を思い出す

でもよく考えてみると、MVC の View 部分をクライアントサイド(JavaScript)でゴリゴリ書くと、JSP のせっかくの得意技をかき消すことになってしまわないでしょうか？
そもそも JSP の役割が HTML コードを生成するというものなので、JSPにやらせませんか？というのがこの記事からの提案です。

飽くまで例ですが、私がやっている方法は以下のようになります。

Ajaxオススメのやりかた (Seasar2, SAStruts)

サーブレット

/** 表に表示するデータのリスト */
public List<TableData> tableDatas;

@Execute(validator=false)
public String application() {
    tableDatas = jdbcManager.from(TableData.class).getResultList();
    return "table-row.jsp";
}

/** 表に表示するデータのリスト */

public List<TableData> tableDatas;

@Execute(validator=false)

public String application() {

tableDatas = jdbcManager.from(TableData.class).getResultList();

return "table-row.jsp";

}

サーバサイドは、JSONを返さず、通常の方法でJSPへと処理を移します。
いわゆる普通のサーブレット処理です。

JSP

<table>
<c:forEach items="${tableDatas}" var="tableData">
<tr><td>${tableData.id}</td>
    <td>${tableData.name}</td></tr>
</c:forEach>
</table>

<table>

<c:forEach items="${tableDatas}" var="tableData">

<tr><td>${tableData.id}</td>

<td>${tableData.name}</td></tr>

</c:forEach>

</table>

JSPでは、生成したい table を生成するスクリプトレットを記述。昔から Java で Web アプリケーションを作って来た人なら、この書き方は手馴れたものですよね。

クライアントサイド(jQuery)

$.ajax({
  type: "POST",
  dataType: "text",
  url: "/contextPath/application",
  success: function(html) {
    // ここに返された text (html) に対する処理する記述
    $("#data").html(html);
  },
});

$.ajax({

type: "POST",

dataType: "text",

url: "/contextPath/application",

success: function(html) {

// ここに返された text (html) に対する処理する記述

$("#data").html(html);

});

JSPでHTMLが生成されて返ってくるようにしたので、JavaScript で複雑で煩わしい HTML 生成を記述する必要がありません。
上記の例だと、飽くまで例なので、まだ許容範囲ですが、複雑な HTML を生成する際にはバグの温床になる可能性があります。
JSP の最大の特技である HTML 生成と jQuery, Ajax を併用した楽な方法でした。

黒衣森北部森林

tomehachi | 2015/02/26

北部森林

黒衣森のグリダニアから行くことができる北部森林。
まだ、駆け出しの冒険者だったときに、チョコボのフンを運ばされたり、幻術士として森の浄化をして周った思い出があります。
ハーストミルという集落があり、そこで事件の解決とともに兄妹愛を垣間見る出来事もありました。

経験を積んでからは、奥地にある蛮族の集落いけるようになります。
この地に、ある晴れた日に訪れたらとても美しい景色があったので、1枚。

簡単にHTMLレイアウトが作れちゃう Bootstrap (2)

tomehachi | 2015/02/22

Bootstrap コード

私は、Bootstrap を使ったコードを書くときは、Bootstrap 公式にある Base Template に少し手を修正を加えたものをテンプレートとして使っています。

私が保管している Bootstrap テンプレートは以下のようになっています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ページタイトル</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/default.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- レイアウトを書く場所 -->

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>ページタイトル</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

ポイント

Bootstrap の Base Template には色々な配慮が最初から入っています。
いつも書き忘れたり、書き方を忘れたりするキャラセットも、IEの場合のレンダリングモード固定化、スマホで閲覧したときの挙動を定義した viewport も最初から設定してくれています。
他にもIE挙動への対策がされているので、何かと便利です。

3行目言語設定
lang="ja" にします。（扱う言語は日本語なので）
10行目カスタムスタイルシート
default.css 自分でCSSをカスタマイズしたいので、bootstrap css の次の行に最初から書いておきます。

と書いている場所に、いよいよ自分でデザインしたレイアウトを書き込んでいきます。

コーディング

前回記事で使用した例をここにも記載します。

レイアウト例

上の図のようなレイアウトを Bootstrap で書くと、以下のように書きます。

<div class="container">

    <!-- タイトル領域 -->
    <div class="row">
        <div class="col-md-12">
            タイトル領域
        </div>
    </div>

    <!-- メニューバー領域 -->
    <div class="row">
        <div class="col-md-12">
            メニューバー領域
        </div>
    </div>

    <!-- サイドバー領域, メインコンテンツ領域 -->
    <div class="row">
        <div class="col-md-3">
            サイドバー領域
        </div>
        <div class="col-md-9">
            メインコンテンツ領域
        </div>
    </div>

</div>

タイトル領域

</div>

メニューバー領域

</div>

サイドバー領域

</div>

メインコンテンツ領域

</div>

レイアウト要素に、div タグを使用していて、class オプションに Bootstrap。
全体を class="container" で囲っています。（1行目～ 27行目）
中に、class="row" という3つのかたまりがあります。
（3行目～ 8行目）
（10行目～ 15行目）
（17行目～ 25行目）
つまり、このレイアウトには「行要素」を３つ定義しているということです。
各 row の中には更に、class="col-md-XX" というオプションが指定されています。
XXは、12等分した列のうちの何個分の列をまとめるかを指定しています。
※ md って書いてあるところはどういう意味？と思われるかもしれませんが、次回以降で説明します。

成果物

最終的に、コードは以下のようになります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ページタイトル</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/default.css" rel="stylesheet">

        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

        <div class="container">

            <!-- タイトル領域 -->
            <div class="row">
                <div class="col-md-12">
                    タイトル領域
                </div>
            </div>

            <!-- メニューバー領域 -->
            <div class="row">
                <div class="col-md-12">
                    メニューバー領域
                </div>
            </div>

            <!-- サイドバー領域, メインコンテンツ領域 -->
            <div class="row">
                <div class="col-md-3">
                    サイドバー領域
                </div>
                <div class="col-md-9">
                    メインコンテンツ領域
                </div>
            </div>

        </div>

        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>ページタイトル</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

タイトル領域

</div>

メニューバー領域

</div>

サイドバー領域

</div>

メインコンテンツ領域

</div>

</body>

</html>

簡単にHTMLレイアウトが作れちゃう Bootstrap (1)

tomehachi | 2015/02/22

Bootstrapとは？

概要

HTML5, CSS3, JavaScript で作られた、いわゆるWebレイアウトを作るためのフレームワークです。
このフレームワークの優れている点は、

高度なレイアウトを即座に記述できる
特に深い知識が無くともマルチデバイス対応できる
(勝手にレスポンシブになる)

という点でしょうか。他にもまだまだ良さがありますが、実際にご自身で使って評価してみて下さい。
Bootstrap には、"row" (行) と "col" (列) でWebページ全体のレイアウトを設計するという概念があります。
下図のように、デザイン領域を横に12列に区切ってデザイン領域のレイアウトを設計します。

例えば、よくあるレイアウトとして下図のようなものを作りたい場合も、少ないコードで小難しいことを考えなくてもサササッと書きあがってしまうのです。

レイアウト例

基本要素

Bootstrap のレイアウトを具体的なコードで示す前に、もう少しだけ説明しておくことがあります。

container
レイアウトそのものの単位を Bootstrap では container と表現します。
row
container の中を、さらに "row" (行) という単位で切ります。
col
row の中を、 "col" (列) という単位で切ります。

上の図の、よくあるレイアウトを例にすると、以下のような表現となります。
container内に行を3つ定義し、
1行目・・・ 12列まとめて「タイトル領域」として定義
2行目・・・ 12列まとめて「メニューバー領域」として定義
3行目・・・ 3列を「サイドバー領域」, 9列を「メインコンテンツ領域」として定義

container {
  row {col-12: タイトル領域}
  row {col-12: メニューバー領域}
  row {
    col-3: サイドバー領域,
    col-9: メインコンテンツ領域    
  }
}

container {

row {col-12: タイトル領域}

row {col-12: メニューバー領域}

row {

col-3: サイドバー領域,

col-9: メインコンテンツ領域

}

という構造として考えます。
（※ 上記は考え方を表現したもので、実際のコードではありません。）

Bootstrap の入手

入手方法とコードを書く準備まで。

Bootstrap ダウンロードページ http://getbootstrap.com/ にアクセス
画面中央あたりにある [Download Bootstrap] をクリック
遷移先の画面にある [Download Bootstrap] をクリック
ダウンロード先を選んで保存
ダウンロードしたZIP形式ファイルを解凍

入手方法

作成されるフォルダ内に以下の3フォルダができます。
- css
- fonts
- js

スケルトンテンプレートを利用する

Bootstrap を入手したら、早速コードを書きます。
先ほどのダウンロードページの右側のサイドメニューに [Basic Template] というメニューがあるのでクリックします。
入手方法

次に、表示されたHTMLソースコードをコピーペーストして index.html を作成します。
これで、Bootstrap によるベースが完成です。
※ jquery は別途ダウンロードし、import先を変更することをお勧めします。
※ bootstrap.min.css, bootstrap.min.js のファイルパスも必要に応じて変更してください。

Android Studio でスマホアプリ開発！

tomehachi | 2015/02/15

Androidアプリを作るとき、これまではEclipseプラグインを使用して開発していました。
これまでは、公式にそうしなさいと言われていたこともあり、この方法がデファクトだったのですが、
このたび、Googleは "Android Studio" なるもののバージョン1をリリースし、こちらを公式に使用するよう
周知しているようですね。

今回は、私も試しに使ってみました。

Eclipseとは全く違うショートカットキーで、せっかく慣れていたキー操作がまた１から覚え直しになりそうです。

1度使ってみたところ、

エミュレータは相変わらず動作が重たい
画面構成はEclipseと似ている(ショートカットはぜんぜん違う)
クラス、メソッド、フィールドのリファクタリングに加え、xmlの定義要素もリファクタリングされる

という感じでした。

動作確認は、エミュレータではなく実際の端末を使うのがよさそうですね。

S2コンテナでバッチを書く

tomehachi | 2014/11/20

S2コンテナはバッチも書けるんです

え、なに、Seasar2 って Web のフレームワークなんじゃないの？
と思っていた私。

Eclipse の Dolteng プロジェクトの新規作成をして
迷わず Web アプリケーションを作成していた私。

ふと、Web アプリケーションと書かれたドロップダウンリストをそっとクリックしてみると
「スタンドアローン」という文字が。

そうなんです。
アプリケーションサーバが無くても単体で動作する Seasar2 による
単独のアプリケーションも作れるんです。

public class BatchApplication {
    /** メインメソッド */
    public static void main(String...args) {
        SingletonS2ContainerFactory.init();
        JdbcManager jdbc = SingletonS2Container.getComponent(JdbcManager.class);

        // JdbcManagerを使った select 文の発行
        List<UserAuth> userAuthList = jdbc.selectBySql(
            UserAuth.class, 
            "select * from user_auth"
        ).getResultSet();
    }
}

public class BatchApplication {

/** メインメソッド */

public static void main(String...args) {

SingletonS2ContainerFactory.init();

JdbcManager jdbc = SingletonS2Container.getComponent(JdbcManager.class);

// JdbcManagerを使った select 文の発行

List<UserAuth> userAuthList = jdbc.selectBySql(

UserAuth.class,

"select * from user_auth"

).getResultSet();

}

Webアプリケーションの場合、アプリケーションサーバを起動すると同時にDIの初期化が実行されますが
スタンドアローンアプリケーションの場合は 4行目のように、初期化処理を記述する必要があります。

これさえやっておけば、5行目にあるように SingletonS2Container.getComponent() で
自分でDIできます。

ちょっとした DB 操作をライトに実現したいよ、という方にはお勧めです。

JavaプログラムでHTTP通信！ Apache Fluentライブラリ

tomehachi | 2014/11/20

Apache Fluent

Apache Fluentというライブラリのことが書かれたブログが少なかったので
ここでご紹介します。

リンク: Apache Fluent

ここにあるライブラリを一通りクラスパスに登録し、
以下のようなコードを書くと以上、終了です。

public class HttpClient {
    public static void main(String...args) {
        // HTTP GET する
        String html = Response
            .Get(&quot;http://www.yahoo.co.jp/&quot;)
            .execute()
            .returnContent()
            .asString();

        // 標準出力
        System.out.println(html);
    }
}

public class HttpClient {

public static void main(String...args) {

// HTTP GET する

String html = Response

.Get("http://www.yahoo.co.jp/")

.execute()

.returnContent()

.asString();

// 標準出力

System.out.println(html);

}

※例外処理は省略しています。

クロール, スクレイピング

お目当てのWebサイトにアクセスし、レスポンスに返されたHTMLを解析しデータ化。
情報収集にとても役に立つんじゃないでしょうか。
RSS を読む処理なんかにもいいのではないでしょうか。

当然ですが、Response.Post() なんていうのもありますし、
HEADER要素も .(ドット) 区切りでポンポン追加していけば設定できます。

英語ですが以下のリンクを見るだけでおおよその使い方が分かると思います。
リンク: Apache Fluent サンプルコード集

最近の投稿

カテゴリー

最近の投稿

カテゴリー

あんなところに橋が！！

イカさんのレベル上げ！

アーリマンの巣

眼下に見下ろす壊れた橋

食べ物たくさん！

PT結成

海賊の略奪品がいっぱい！

船長さびしそう！

LS "Dungeon Walkers" 設立！

目的

成果

記念撮影

外郭攻略 カストルム・メリディアヌム

魔導城プラエトリウム

jQuery + Ajax の一般的(?)な処理

MVC の性質を思い出す

Ajaxオススメのやりかた (Seasar2, SAStruts)

サーブレット

JSP

クライアントサイド(jQuery)

北部森林

Bootstrap コード

ポイント

コーディング

成果物

Bootstrapとは？

概要

基本要素

Bootstrap の入手

スケルトンテンプレートを利用する

S2コンテナはバッチも書けるんです

Apache Fluent

クロール, スクレイピング

外郭攻略カストルム・メリディアヌム