2017年10月31日火曜日

jQuery : formのサブミット

jQueryでformのサブミットをすると、サブミット前に送信データの加工やバリデーションチェックといった処理を行える。

jQuery
$(function() {
     $('#btn').click(function() {
          // 色々な処理を行う。
          // ・・・
          // ・・・
          $('#form1').submit();  // サブミット
     });
});

HTML
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>hogehoge</title>
     </head>
     <body>
          <form id="form1">
               <input type="button" id="btn" value="ボタン" />
          </form>
     </body>
</html>

ボタンがクリックされたタイミングでサブミットを行うようにしている。
こうすると、サブミットを実行する前に処理を行うことができる。

2017年10月30日月曜日

Java : Mapの並び順

JavaにはMapにはHashMap、LinkedHashMap、TreeMapの3種類があるのだけれど、それぞれ役割が異なっているので場面によって使い分ける必要がある。

HashMap : 順番は保証されない
LinkedHashMap : putした順番が保障される
TreeMap : Keyの昇順の順番になる

MapにKey/Valueをputしたあとに、ループで処理したいといった要件があるときは、HashMapを使ってしまうと出力の順番が保障されないので困ってしまう。

Map<String, String> map = new HashMap<String, String>();
map.put("01", "北海道");
map.put("02", "青森県");
map.put("03", "岩手県");
map.put("04", "宮城県");
map.put("05", "秋田県");
map.put("06", "山形県");
map.put("07", "福島県");
map.put("08", "茨城県");
map.put("09", "栃木県");
map.put("10", "群馬県");
map.put("11", "埼玉県");
map.put("12", "千葉県");
map.put("13", "東京都");
map.put("14", "神奈川県");
map.put("15", "新潟県");
map.put("16", "富山県");
map.put("17", "石川県");
map.put("18", "福井県");
map.put("19", "山梨県");
map.put("20", "長野県");
map.put("21", "岐阜県");
map.put("22", "静岡県");
map.put("23", "愛知県");
map.put("24", "三重県");
map.put("25", "滋賀県");
map.put("26", "京都府");
map.put("27", "大阪府");
map.put("28", "兵庫県");
map.put("29", "奈良県");
map.put("30", "和歌山県");
map.put("31", "鳥取県");
map.put("32", "島根県");
map.put("33", "岡山県");
map.put("34", "広島県");
map.put("35", "山口県");
map.put("36", "徳島県");
map.put("37", "香川県");
map.put("38", "愛媛県");
map.put("39", "高知県");
map.put("40", "福岡県");
map.put("41", "佐賀県");
map.put("42", "長崎県");
map.put("43", "熊本県");
map.put("44", "大分県");
map.put("45", "宮崎県");
map.put("46", "鹿児島県");
map.put("47", "沖縄県");
for (Map.Entry<String, String> m : map.entrySet()) {
    System.out.println("KEY : " + m.getKey() + "    VALUE : " + m.getValue());
}

上記のプログラムの実行結果を見てみると、HashMapではバラバラな順番で出力されていることが分かる。
KEY : 22    VALUE : 静岡県
KEY : 44    VALUE : 大分県
KEY : 01    VALUE : 北海道
KEY : 23    VALUE : 愛知県
KEY : 45    VALUE : 宮崎県
KEY : 02    VALUE : 青森県
KEY : 24    VALUE : 三重県
KEY : 46    VALUE : 鹿児島県
KEY : 03    VALUE : 岩手県
KEY : 25    VALUE : 滋賀県
KEY : 47    VALUE : 沖縄県
KEY : 04    VALUE : 宮城県
KEY : 26    VALUE : 京都府
KEY : 05    VALUE : 秋田県
KEY : 27    VALUE : 大阪府
KEY : 06    VALUE : 山形県
KEY : 28    VALUE : 兵庫県
KEY : 07    VALUE : 福島県
KEY : 29    VALUE : 奈良県
KEY : 08    VALUE : 茨城県
KEY : 09    VALUE : 栃木県
KEY : 30    VALUE : 和歌山県
KEY : 31    VALUE : 鳥取県
KEY : 10    VALUE : 群馬県
KEY : 32    VALUE : 島根県
KEY : 11    VALUE : 埼玉県
KEY : 33    VALUE : 岡山県
KEY : 12    VALUE : 千葉県
KEY : 34    VALUE : 広島県
KEY : 13    VALUE : 東京都
KEY : 35    VALUE : 山口県
KEY : 14    VALUE : 神奈川県
KEY : 36    VALUE : 徳島県
KEY : 15    VALUE : 新潟県
KEY : 37    VALUE : 香川県
KEY : 16    VALUE : 富山県
KEY : 38    VALUE : 愛媛県
KEY : 17    VALUE : 石川県
KEY : 39    VALUE : 高知県
KEY : 18    VALUE : 福井県
KEY : 19    VALUE : 山梨県
KEY : 40    VALUE : 福岡県
KEY : 41    VALUE : 佐賀県
KEY : 20    VALUE : 長野県
KEY : 42    VALUE : 長崎県
KEY : 21    VALUE : 岐阜県
KEY : 43    VALUE : 熊本県

これがLinkedHashMapだと、putした順番に並ぶ。

Map<String, String> map = new LinkedHashMap<String, String>();
map.put("10", "群馬県");
map.put("11", "埼玉県");
map.put("12", "千葉県");
map.put("13", "東京都");
map.put("14", "神奈川県");
map.put("15", "新潟県");
map.put("16", "富山県");
map.put("17", "石川県");
map.put("18", "福井県");
map.put("19", "山梨県");
map.put("01", "北海道");
map.put("02", "青森県");
map.put("03", "岩手県");
map.put("04", "宮城県");
map.put("05", "秋田県");
map.put("06", "山形県");
map.put("07", "福島県");
map.put("08", "茨城県");
map.put("09", "栃木県");
map.put("40", "福岡県");
map.put("41", "佐賀県");
map.put("42", "長崎県");
map.put("43", "熊本県");
map.put("44", "大分県");
map.put("45", "宮崎県");
map.put("46", "鹿児島県");
map.put("47", "沖縄県");
map.put("20", "長野県");
map.put("21", "岐阜県");
map.put("22", "静岡県");
map.put("23", "愛知県");
map.put("24", "三重県");
map.put("25", "滋賀県");
map.put("26", "京都府");
map.put("27", "大阪府");
map.put("28", "兵庫県");
map.put("29", "奈良県");
map.put("30", "和歌山県");
map.put("31", "鳥取県");
map.put("32", "島根県");
map.put("33", "岡山県");
map.put("34", "広島県");
map.put("35", "山口県");
map.put("36", "徳島県");
map.put("37", "香川県");
map.put("38", "愛媛県");
map.put("39", "高知県");
for (Map.Entry<String, String> m : map.entrySet()) {
    System.out.println("KEY : " + m.getKey() + "    VALUE : " + m.getValue());
}


出力結果を確認すると、ちゃんとputした順番に並んでいる。
KEY : 10    VALUE : 群馬県
KEY : 11    VALUE : 埼玉県
KEY : 12    VALUE : 千葉県
KEY : 13    VALUE : 東京都
KEY : 14    VALUE : 神奈川県
KEY : 15    VALUE : 新潟県
KEY : 16    VALUE : 富山県
KEY : 17    VALUE : 石川県
KEY : 18    VALUE : 福井県
KEY : 19    VALUE : 山梨県
KEY : 01    VALUE : 北海道
KEY : 02    VALUE : 青森県
KEY : 03    VALUE : 岩手県
KEY : 04    VALUE : 宮城県
KEY : 05    VALUE : 秋田県
KEY : 06    VALUE : 山形県
KEY : 07    VALUE : 福島県
KEY : 08    VALUE : 茨城県
KEY : 09    VALUE : 栃木県
KEY : 40    VALUE : 福岡県
KEY : 41    VALUE : 佐賀県
KEY : 42    VALUE : 長崎県
KEY : 43    VALUE : 熊本県
KEY : 44    VALUE : 大分県
KEY : 45    VALUE : 宮崎県
KEY : 46    VALUE : 鹿児島県
KEY : 47    VALUE : 沖縄県
KEY : 20    VALUE : 長野県
KEY : 21    VALUE : 岐阜県
KEY : 22    VALUE : 静岡県
KEY : 23    VALUE : 愛知県
KEY : 24    VALUE : 三重県
KEY : 25    VALUE : 滋賀県
KEY : 26    VALUE : 京都府
KEY : 27    VALUE : 大阪府
KEY : 28    VALUE : 兵庫県
KEY : 29    VALUE : 奈良県
KEY : 30    VALUE : 和歌山県
KEY : 31    VALUE : 鳥取県
KEY : 32    VALUE : 島根県
KEY : 33    VALUE : 岡山県
KEY : 34    VALUE : 広島県
KEY : 35    VALUE : 山口県
KEY : 36    VALUE : 徳島県
KEY : 37    VALUE : 香川県
KEY : 38    VALUE : 愛媛県
KEY : 39    VALUE : 高知県

これをTreeMapに変えるとKEY順に並べ直してくれる。

Map<String, String> map = new TreeMap<String, String>();
map.put("10", "群馬県");
map.put("11", "埼玉県");
map.put("12", "千葉県");
map.put("13", "東京都");
map.put("14", "神奈川県");
map.put("15", "新潟県");
map.put("16", "富山県");
map.put("17", "石川県");
map.put("18", "福井県");
map.put("19", "山梨県");
map.put("01", "北海道");
map.put("02", "青森県");
map.put("03", "岩手県");
map.put("04", "宮城県");
map.put("05", "秋田県");
map.put("06", "山形県");
map.put("07", "福島県");
map.put("08", "茨城県");
map.put("09", "栃木県");
map.put("40", "福岡県");
map.put("41", "佐賀県");
map.put("42", "長崎県");
map.put("43", "熊本県");
map.put("44", "大分県");
map.put("45", "宮崎県");
map.put("46", "鹿児島県");
map.put("47", "沖縄県");
map.put("20", "長野県");
map.put("21", "岐阜県");
map.put("22", "静岡県");
map.put("23", "愛知県");
map.put("24", "三重県");
map.put("25", "滋賀県");
map.put("26", "京都府");
map.put("27", "大阪府");
map.put("28", "兵庫県");
map.put("29", "奈良県");
map.put("30", "和歌山県");
map.put("31", "鳥取県");
map.put("32", "島根県");
map.put("33", "岡山県");
map.put("34", "広島県");
map.put("35", "山口県");
map.put("36", "徳島県");
map.put("37", "香川県");
map.put("38", "愛媛県");
map.put("39", "高知県");
for (Map.Entry<String, String> m : map.entrySet()) {
    System.out.println("KEY : " + m.getKey() + "    VALUE : " + m.getValue());
}


出力結果を確認するとKEYの昇順に並んでいることが分かる。
KEY : 01    VALUE : 北海道
KEY : 02    VALUE : 青森県
KEY : 03    VALUE : 岩手県
KEY : 04    VALUE : 宮城県
KEY : 05    VALUE : 秋田県
KEY : 06    VALUE : 山形県
KEY : 07    VALUE : 福島県
KEY : 08    VALUE : 茨城県
KEY : 09    VALUE : 栃木県
KEY : 10    VALUE : 群馬県
KEY : 11    VALUE : 埼玉県
KEY : 12    VALUE : 千葉県
KEY : 13    VALUE : 東京都
KEY : 14    VALUE : 神奈川県
KEY : 15    VALUE : 新潟県
KEY : 16    VALUE : 富山県
KEY : 17    VALUE : 石川県
KEY : 18    VALUE : 福井県
KEY : 19    VALUE : 山梨県
KEY : 20    VALUE : 長野県
KEY : 21    VALUE : 岐阜県
KEY : 22    VALUE : 静岡県
KEY : 23    VALUE : 愛知県
KEY : 24    VALUE : 三重県
KEY : 25    VALUE : 滋賀県
KEY : 26    VALUE : 京都府
KEY : 27    VALUE : 大阪府
KEY : 28    VALUE : 兵庫県
KEY : 29    VALUE : 奈良県
KEY : 30    VALUE : 和歌山県
KEY : 31    VALUE : 鳥取県
KEY : 32    VALUE : 島根県
KEY : 33    VALUE : 岡山県
KEY : 34    VALUE : 広島県
KEY : 35    VALUE : 山口県
KEY : 36    VALUE : 徳島県
KEY : 37    VALUE : 香川県
KEY : 38    VALUE : 愛媛県
KEY : 39    VALUE : 高知県
KEY : 40    VALUE : 福岡県
KEY : 41    VALUE : 佐賀県
KEY : 42    VALUE : 長崎県
KEY : 43    VALUE : 熊本県
KEY : 44    VALUE : 大分県
KEY : 45    VALUE : 宮崎県
KEY : 46    VALUE : 鹿児島県
KEY : 47    VALUE : 沖縄県

2017年10月18日水曜日

Bootstrap 4.x におけるパンくずリスト

Bootstrap v4.0.0-betaにしたらパンくずリストがうまく表示できなくて困った。

HTML
<ol class="breadcrumb">
    <li><a href="#">アイテム1</a></li>
    <li><a href="#">アイテム2</a></li>
    <li class="active">アイテム3</li>
</ol>

Bootstrap 3.xではこれで良かったと思うのだけれど表示が下記のようになってしまい、これではパンくずリストとは言えない。


Bootstrap 4.xではパンくずリストの書き方が変わってしまったようなので修正する。

修正後HTML
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">アイテム1</a></li>
    <li class="breadcrumb-item"><a href="#">アイテム2</a></li>
    <li class="breadcrumb-item active">アイテム3</li>
</ol>

liタグのクラスに breadcrumb-item を指定することでパンくずリストになる。


ちなみにnavタグを利用してもパンくずリストを作れるようになっている。

navタグを利用した場合のHTML
<nav class="breadcrumb">
    <a class="breadcrumb-item" href="#">アイテム1</a>
    <a class="breadcrumb-item" href="#">アイテム2</a>
    <span class="breadcrumb-item active">アイテム3</span>
</nav>


2017年10月17日火曜日

jQuery : loadを使ってHTMLをパーツ読み込む

jQueryのloadを使うことで、パラメータに指定したHTMLを読み込んでDOMに挿入することが出来る。例えば、すべての画面で共通で利用するヘッダなどをパーツとして切り出しておき、それを読み込むといったことを行える。

HTML
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>hoge</title>

        <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="../js/load.js"></script>
    </head>
    <body>
        <!-- ここにHTMLが読み込まれる -->
        <div id="header"></div>
    </body>
</html>

loadで読み込まれるHTML
<div>
    hogehogehoge
</div>

load.js
$(function(){
    // HTMLをid=headerのところに挿入する
    $("#header").load("読み込みたいHTMLのパス(例: ../parts/header.html");
})


ローカルで試してみたら、実は動かなかった。loadはAjaxを使った処理になるようなのだが、Google Chromeはセキュリティの関係でローカルファイルへのAjax要求を許可していない。ということで、これをやるためだけにTomcatを起動して・・・など、色々と面倒なことをやってようやく動いた。HTML・CSS・javascriptでモックをお手軽に作ろうと思っただけなのに。

2017年10月16日月曜日

Bootstrap dropdown require Popper.js (https://popper.js.org)

Bootstrap v4.0 betaを使おうとしたら下記のようなエラーが出てしまった。

Bootstrap dropdown require Popper.js (https://popper.js.org)

ソース
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>hoge</title>

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

    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>


何やらよく分からないが、Popper.jsというのが必要ということらしい。popper.js自体はエラーに記載されているURLへ行けばダウンロードできる。
https://popper.js.org


このPopper.jsは何なのかというと、ツールチップ用のjsのらしい。日本語の情報があまりなかったが、下記のリンクを見つけた。
http://design-develop.net/web-design/popper.html

私は使ったことがないので具体的なところはよく分からないが、ツールチップの制御が簡単に行えて、しかもかゆいところに手が届くようなものになっているようだ。

ともあれ、popper.jsを読み込むように書き換えたらエラーは出なくなった。

修正後のソース
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>hoge</title>

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

    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/popper.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>


よくよく調べるとbootstrap v4.0への移行ガイドにpopper.jsに依存するとのことが書かれているのを見つけた。
http://cccabinet.jpn.org/bootstrap4/getting-started/introduction