タイガー!タイガー!じれったいぞー!(SE編)

AS400, Java, JavaEE, JSF等の開発、習慣など。日々の気づきをまとめたブログ(備忘録)

【Bootstrap】navbar固定時にDataTablesのfixedHeaderを機能させる

突然ですが、既存アプリのメンテンナンスで、DataTablesのfixedHeaderを取り込もうとしてやってみたところ、機能しませんでした。

アプリ本体は、Bootstrap3を使用(少し古いですが)。

navbar-fixed-top でnavbarを固定している形です。

サンプルコード(変更前)

<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta http-equiv="Content-type" content="text/html; charset=utf-8">
       <title>Bootstrap3 - DataTables fixedHeader</title>
       <script src="https://code.jquery.com/jquery-3.5.1.js">
       <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
       <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js" type="text/javascript"></script>
       <script src="https://cdn.datatables.net/fixedheader/3.2.1/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
       <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap.min.css" rel="stylesheet">
       <link href="https://cdn.datatables.net/fixedheader/3.2.1/css/fixedHeader.bootstrap.min.css" rel="stylesheet">

       <script type="text/javascript" class="init">
           jQuery(function ($) {
               var table = $('#example').DataTable( {
                   lengthChange: false,
                   searching: false,
                   paging: false,
                   fixedHeader: true,
                   info: false
               } );
           } );
       </script>
   </head>

    <body style="padding-top:30px;">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="nav navbar-brand">Bootstrap3 dataTables Sample Navi</div>
        </nav>

        <div class="container">
            <div class="page-header">
                <h1>都道府県リスト</h1>
                <div>
                    <table id="example" class="table table-striped table-bordered">
                        <thead>
                            <tr><th>Code</th><th>都道府県名</th><th>県庁所在地</th></tr>
                        </thead>
                        <tbody>
                            <tr><td>1</td><td>北海道</td><td>札幌市</td></tr>
                            <tr><td>2</td><td>青森県</td><td>青森市</td></tr>
                            <tr><td>3</td><td>岩手県</td><td>盛岡市</td></tr>
                            <tr><td>4</td><td>宮城県</td><td>仙台市</td></tr>
                            <tr><td>5</td><td>秋田県</td><td>秋田市</td></tr>
                            <tr><td>6</td><td>山形県</td><td>山形市</td></tr>
                            <tr><td>7</td><td>福島県</td><td>福島市</td></tr>
                            <tr><td>8</td><td>茨城県</td><td>水戸市</td></tr>
                            <tr><td>9</td><td>栃木県</td><td>宇都宮市</td></tr>
                            <tr><td>10</td><td>群馬県</td><td>前橋市</td></tr>
                            <tr><td>11</td><td>埼玉県</td><td>さいたま市</td></tr>
                            <tr><td>12</td><td>千葉県</td><td>千葉市</td></tr>
                            <tr><td>13</td><td>東京都</td><td>新宿区</td></tr>
                            <tr><td>14</td><td>神奈川県</td><td>横浜市</td></tr>
                            <tr><td>15</td><td>新潟県</td><td>新潟市</td></tr>
                            <tr><td>16</td><td>富山県</td><td>富山市</td></tr>
                            <tr><td>17</td><td>石川県</td><td>金沢市</td></tr>
                            <tr><td>18</td><td>福井県</td><td>福井市</td></tr>
                            <tr><td>19</td><td>山梨県</td><td>甲府市</td></tr>
                            <tr><td>20</td><td>長野県</td><td>長野市</td></tr>
                            <tr><td>21</td><td>岐阜県</td><td>岐阜市</td></tr>
                            <tr><td>22</td><td>静岡県</td><td>静岡市</td></tr>
                            <tr><td>23</td><td>愛知県</td><td>名古屋市</td></tr>
                            <tr><td>24</td><td>三重県</td><td>津市</td></tr>
                            <tr><td>25</td><td>滋賀県</td><td>大津市</td></tr>
                            <tr><td>26</td><td>京都府</td><td>京都市</td></tr>
                            <tr><td>27</td><td>大阪府</td><td>大阪市</td></tr>
                            <tr><td>28</td><td>兵庫県</td><td>神戸市</td></tr>
                            <tr><td>29</td><td>奈良県</td><td>奈良市</td></tr>
                            <tr><td>30</td><td>和歌山県</td><td>和歌山市</td></tr>
                            <tr><td>31</td><td>鳥取県</td><td>鳥取市</td></tr>
                            <tr><td>32</td><td>島根県</td><td>松江市</td></tr>
                            <tr><td>33</td><td>岡山県</td><td>岡山市</td></tr>
                            <tr><td>34</td><td>広島県</td><td>広島市</td></tr>
                            <tr><td>35</td><td>山口県</td><td>山口市</td></tr>
                            <tr><td>36</td><td>徳島県</td><td>徳島市</td></tr>
                            <tr><td>37</td><td>香川県</td><td>高松市</td></tr>
                            <tr><td>38</td><td>愛媛県</td><td>松山市</td></tr>
                            <tr><td>39</td><td>高知県</td><td>高知市</td></tr>
                            <tr><td>40</td><td>福岡県</td><td>福岡市</td></tr>
                            <tr><td>41</td><td>佐賀県</td><td>佐賀市</td></tr>
                            <tr><td>42</td><td>長崎県</td><td>長崎市</td></tr>
                            <tr><td>43</td><td>熊本県</td><td>熊本市</td></tr>
                            <tr><td>44</td><td>大分県</td><td>大分市</td></tr>
                            <tr><td>45</td><td>宮崎県</td><td>宮崎市</td></tr>
                            <tr><td>46</td><td>鹿児島県</td><td>鹿児島市</td></tr>
                            <tr><td>47</td><td>沖縄県</td><td>那覇市</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>

動作結果(変更前)

navの後ろで、テーブルのヘッダ行が固定化されていました(開発ツールで確認)。

f:id:no14141:20220203164912j:plain


改善方法

navのクラスに、"fh-fixedHeader"を追加することで、

navの下にテーブルのヘッダ行が固定化されるようになりました。

<nav class="navbar navbar-inverse navbar-fixed-top fh-fixedHeader">
    <div class="nav navbar-brand">Bootstrap3 dataTables Sample Navi</div>
</nav>

動作結果(変更後)

f:id:no14141:20220203164920j:plain


まとめ

Bootstrapについて、そこまで詳しくなかったので、勉強になりました。

こうした小さなことであっても、誰かのお役に立てることを信じてアップしておきますね。

お気に入りの人生!

f:id:no14141:20220129170241j:plain

2021年8月15日から「わらしべ読書」という読書を毎日かかさず、実践しています。

毎日、忘れないために、ノートに「お気に入りの人生」「長期目標」「今月目標」を書いていくのですが、今年はじめに「お気に入りの人生」を刷新したので、こちらでご紹介いたします!

【私の お気に入りの人生】

一隅を照らす「魂」の名キャッチャーとして、

人の成長をサポートしながら、自らも高度成長している人生。

私がいることで、周囲の笑顔の総量が増えていく!

数年前にやった「Strengths Finder」では、学習欲、収集心、分析思考、目標志向、戦略性の5つの特性が強めでした。

とにかく学習する意欲は高いので、周囲の方々と共に学び、成長していくことが生きがいだと思っています。

そのためには、自分にも相手にも叱咤激励し、行動しながら苦しんだり、気づいて行動を改善・修正していく・・・。

いくつになっても、そんな人生が理想的です。

1つのことに徹底的に打ち込んでいくもよし!

毎年、新しいことにチャレンジするもよし!

1つの指針がカッチリ決まったことで、思考のブレが減ってきたように思います。

約1ヵ月、毎日1~3回書いているので、ようやく何も見ないでも書けるようになりました。

今週もOKでございまーーーす!!!

Bowerを試してみた

あるシステムを解析していたら、BowerとGruntが使われていることを知りました。
超簡単ではありますが、備忘録としてまとめておきます。

Bowerとは?

programming-world.net

Bower(バウアー)は、ウェブアプリケーションJavaScriptパッケージマネージャー(パッケージ管理システム)です。
Bowerをインストールすることで、React、Angular、jQueryなどのクライアントサイドで利用する JavaScriptパッケージのインストール補助やバージョン管理をしてくれます。

Bowerをインストール

  • npm環境が構築されている前提です。

npm install -g bower

> npm install -g bower
C:\Program Files (x86)\Nodist\bin\bower -> C:\Program Files (x86)\Nodist\bin\node_modules\bower\bin\bower
+ bower@1.8.13
added 1 package in 28.636s

> bower -v
1.8.13

初期化処理

プロジェクトのルート上で初期処理。

対話型で進めていくと、bower.json が作成されます。

bower init

> cd c:\bower_test

> bower init
? name bower_test
? description
? main file
? keywords
? authors tiger
? license MIT
? homepage
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No                                                                                                          

{                                                                                                                
  name: 'bower_test',                                                                                            
  authors: [                                                                                                     
    'tiger'                                                                             
  ],                                                                                                             
  description: '',                                                                                               
  main: '',                                                                                                      
  license: 'MIT',                                                                                                
  homepage: '',                                                                                                  
  ignore: [                                                                                                      
    '**/.*',                                                                                                     
    'node_modules',                                                                                              
    'bower_components',                                                                                          
    'test',                                                                                                      
    'tests'                                                                                                      
  ]                                                                                                              
}   

パッケージをインストール

qiita.com

上記サイトを参照にして、Modernizr, jQuery, normalize.css をインストールしてみました。

bower install modernizr jQuery normalize.css --save

> bower install modernizr jQuery normalize.css --save

bower normalize.css#^8.0.1      cached https://github.com/necolas/normalize.css.git#8.0.1
bower normalize.css#^8.0.1    validate 8.0.1 against https://github.com/necolas/normalize.css.git#^8.0.1
bower jQuery#^3.6.0             cached https://github.com/jquery/jquery.git#3.6.0
bower jQuery#^3.6.0           validate 3.6.0 against https://github.com/jquery/jquery.git#^3.6.0
bower modernizr#^3.11.8         cached https://github.com/Modernizr/Modernizr.git#3.11.8
bower modernizr#^3.11.8       validate 3.11.8 against https://github.com/Modernizr/Modernizr.git#^3.11.8
bower normalize.css#*           cached https://github.com/necolas/normalize.css.git#8.0.1
bower normalize.css#*         validate 8.0.1 against https://github.com/necolas/normalize.css.git#*
bower modernizr#*               cached https://github.com/Modernizr/Modernizr.git#3.11.8
bower modernizr#*             validate 3.11.8 against https://github.com/Modernizr/Modernizr.git#*
bower jQuery#*                  cached https://github.com/jquery/jquery.git#3.6.0
bower jQuery#*                validate 3.6.0 against https://github.com/jquery/jquery.git#*
bower normalize.css#^8.0.1     install normalize.css#8.0.1
bower modernizr#^3.11.8        install modernizr#3.11.8
bower jQuery#^3.6.0            install jQuery#3.6.0

normalize.css#8.0.1 bower_components\normalize.css

modernizr#3.11.8 bower_components\modernizr

jQuery#3.6.0 bower_components\jQuery

結果

bower_componentsフォルダが作成され、各ライブラリ、ファイルがその中に配備されました。

/bower_test
├──bower.json
└──/bower_components
    ├──/jQuery
    ├──/modernizr
    └──normalize.css

次に、bower.jsonファイルを確認してみます。

{
  "name": "bower_test",
  "authors": [
    "tiger"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "modernizr": "^3.11.8",
    "jQuery": "^3.6.0",
    "normalize.css": "^8.0.1"
  }
}

--save オプションありなので、dependencies(依存)に追記されています。

パッケージの利用

フォルダ構成を気にしなければ、下記の指定で参照可能です。

<script src="/bower_components/jQuery/dist/jquery.min.js"></script>

Gruntを併用すれば、レイアウトを変更ができるようです。

grunt-bower-taskというタスクが必要とのこと。

kyohei8.hatenablog.com

まとめ

JavaScriptの開発環境の変化が速すぎて、正直ついて行けていませんが、

こういった時代もあったということを認識して、次のスキルアップにつなげていきたいと思っています。

【Garmin Index S2】Wi-Fi接続が切れた場合の対処方法 Part2

f:id:no14141:20220113185204j:plain

Garminの体重計を使っていますが、以前として体重計のネットワーク接続が切れてしまう問題が継続しています。

切断される頻度は、数ヶ月前よりは減ってきているなぁと思ってはいたのですが、

2022年に入り、新年早々切断されました(ショック)。

2021/10/02に、完全に自分の備忘録用に解決手順として次の記事を掲載しました。

tigertaizo.hatenablog.com

今回、前回の手順より手数を減らすことができたので、改変しておきます。

非公開ネットワークでのWi-Fiの再接続方法

(1) Wi-Fiを公開ネットワークに設定

10月のときと同じです。

自宅のWi-Fiは非公開NWなので、まずは公開ネットワークへ設定変更します。

(2) 普通に体重を測る(手順変更箇所)

前回の時点では、ここで「Index S2を設定モードにする」手順を行っていたのですが、

新しい手順ではそれをスキップして、そのまま普通に体重計を使用します。

すると、ネットワークから切断されていた機器がしっかりWi-Fi接続できているではないですかぁ!!!

スマホGarminアプリで確認したところ、先程測定したフィジカル情報がきちんと送信されてきておりました。

(3) Wi-Fiを非公開ネットワークに再設定

機器がネットワークに再接続されたので、Wi-Fiの設定を元に戻します。

この操作を行っても、Index S2がネットワークから切断されることはありません。

(4) 各種機器をWi-Fiに再接続

こちらも前回同様です。

(3)のときに、iPhone7やiPhone SEWi-Fiから切断されてしまうことになり、機器ごとに再度、Wi-Fiに接続させる必要があります。

まとめ

いやー、ひとつ手順を減らせただけでも嬉しいですよ。

ま、ネットワークの切断が起きないことが一番なんですが、こればかりはソフトウェアの更新を待つしかありませんね。

毎日体重計に乗って、減量活動に励むとしますかぁ!!!

コーチングテキスト、レコーディング完了!

f:id:no14141:20220107215605j:plain

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

昨年末、コーチングの資格を無事に取得できました。

後は、コーチングを継続していけば、レベルアップはしていくと思うのですが、毎日、コーチングを忘れない「仕組み」が必要だと思っていて、テキストを朗読したものを毎日聴く習慣をやってきました。

しかしながら、このテキスト朗読音声が途中だったので、年始早々にレコーディングを再開しまして、ついにコンプリートできました!!!

セッションの掛け合いの部分は、前回に続き、息子の協力を得ての録音。

この毎日テキストを聴く習慣、ホント強力なんですよね。

「コーチとして、どう1日を過ごせたか?」

そう振り返る習慣にも役立っています。

今年は、自分の声を録音したものを使って、スキルアップにつなげていこうと思っています。

再生スピードは、もちろん2~3倍です!!

ゆっくり1回聴くよりも、同じ時間でも倍速で2回、3回と聴いたほうが記憶の定着化につながるはず。

今年はこの辺のノウハウも、もっとスムーズに構築できることを目指したいですね。

自声による耳学で、今年も楽しんで学んでいきましょう!!!

【Metabase】フィールドフィルターの使い方

ピンポイントネタで恐縮です。

BIツールの「Metabase」を使っていて、便利な機能があったのでご紹介しました。

ネイティブクエリを作成するときに使える「フィールドフィルター」になります。

フィールドフィルターとは?

百聞は一見に如かずということで、下記の画像をご覧ください。

f:id:no14141:20211229115139j:plain

このように、あるテーブルにある区分を区分名で検索することができるようになる選択オプションになります。

しかも、単一指定ではなく、複数指定型のオプションなんですよ! サイコー!!

フィールドフィルターの使い方

まずは、ネイティブクエリで下記のようなSQLを書いたとします。

SELECT *
  FROM purchases
 INNER JOIN buyingType ON buyingType.id = purchases.buyingType
 WHERE supplierCode = {{supplierCode}}
 [[AND {{buyingType}}]]

かなり端折っていますが、仕入テーブルに存在している仕入区分(buyingType)と仕入区分名用のテーブル(idとnameのみ)を結合した状態であれば、仕入区分名で仕入テーブルをフィルターできるようになります。

任意でフィルターしたい場合は、下記のように書きます。
[[]] は任意の意味。{{}} は抽出条件の変数名。

 [[AND {{buyingType}}]]

SQL文により、抽出条件の設定は次の通り。
区分IDでも検索するよりも、区分名で検索してもらった方が親切でしょう。

f:id:no14141:20211229115229j:plain

この設定で、フィールドフィルターが使えるようになりました!

注意:テーブルの権限設定が重要

最後にフィールドフィルターを使うにあたっての注意点です。

一般ユーザーさんに説明しようとしたところ、フィールドフィルターが機能しないではありませんか!!

この原因は、テーブルの権限設定が影響していました。

管理者メニューの権限から、テーブルの参照設定を行う必要がありました。

f:id:no14141:20211229115243j:plain

該当テーブルのデータアクセス権を制限なしにしたところ、一般ユーザーでも問題なく、フィールドフィルターの機能を使用することができました!

まとめ

新しいことをやると、やはりいろんな問題にぶち当たりますが、大抵、設定が間違っていたり、権限やセキュリティでブロックされたり、ほぼほぼ似たような問題だったりします。

いろんなサービス、アプリを実際にユーザー目線で使用することは、プラスしかありません。

年寄り発言になりますが、ホント便利な時代になりましたね!!

GCS認定コーチ!

f:id:no14141:20211224214140j:plain

本日、無事に「GCS認定コーチ」になれました! 

オッケー、オッケー!!!

嬉しいクリスマス・プレゼントとなりました!

ここまで、本当に長い道のりでした。

今の気持ちは、きっとすぐに忘れてしまいそうなので、ブログに記録しておこうと思います。

GCSを選択した理由

GCSの存在を知ったのは、確か今年の5月だったと思います。

ちなみにGCSとは、「銀座コーチングスクール」の略称です。

お仲間とClubhouseでお話しているうちに、コーチング・スクールのことを知りました(さらに、全国にはたくさんのスクールがあることも・・・)。

ちょうどその時期、「職場のチーム力をもっとアップさせたい」「親子関係を強固なものにしたい」という2つの課題を持っていたので、その手段として「コーチング」に活路を求めることをしました。

それまでの自分はどうしても「上から目線でモノを言う」悪い癖が抜けず、今回のチャレンジが、自分を変える「ラストチャンス」という思いでGCSの門を叩いたのです。

ちなみにGCSを選択した理由は、コスパの良さと同時期にコーチを目指す生徒さんが多いという2点。 共に学ぶ同期がいるということは、一緒に切磋琢磨しながら、成長できると思ったんですよね。

「やる!」と決めてからはあっという間でした。

6月26日に無料の体験セミナーに参加して、7月14日からAクラスの受講を開始。

7月中にAクラス、8月にBクラス、9月にCクラス、10月にDクラスと、1カ月1クラスのペースで学んでいきました。

Aクラスでは3名、B~Dクラスでは5名の同期の方々と素敵な出会いがありましたし、この4カ月は本当に刺激的な時間でした。

実践練習開始!

実践練習を開始したのが、8月下旬。 Facebookの練習相手募集のコミュニティで、練習相手を探していたのですが、自分が練習できる時間と合う方がなかなかいらっしゃらず、悶々としておりました。

となれば、自ら募集をかけるだけ。

f:id:no14141:20211224214520j:plain

5回分の練習相手の募集をかけましたら、あら不思議。16時間後にはすべてスケジュールが確定してしまったのです。

熱い! 熱すぎるぜ!! 仮免コーチの仲間たち!!!(俺もでしたが・・・)

そしてついにやってきました、初のセッション練習。
忘れもしません、9月2日でした(しかも妻の誕生日!)。

私のはじめての練習相手の方が、本当に親切な方で、ド下手な私のコーチをうまくリードしていただき、しかも自信が付くようなフィードバックをたくさんもらったことで、私自身の勇気がMAXになりました。

この初回の練習で勢いづき、下手なりに練習を継続していくことになります。

何度もスランプに

しかし、練習途中で、2~3回スランプに陥ってしまいました。。。

ラポールやプロセス設定は、それほど苦手ではなかったのですが、目標設定のところがどうしても相手の課題に引っ張られてしまうようになってしまったのです。

私の師が言うところの「クライアントさんと一緒に無くしたボールを探してしまう」状態でした。

スランプの時期は、セッションをするのも恐怖感が強くて、初回練習でMAXだった「勇気ポイント」は10~20くらいになるまで減っていましたね。

「どうやってスランプを乗り越えたか」ですって?

その方法は「相性のいい方と練習する」ことでした。

セッションで失った自信は、セッションで取り戻す!!!

とにかく場数をこなすということなんですね。それを身を持って学ぶことができました。

そして実技試験へ

実技試験は、12月11日(土)に決まりました。

2日前にはGCSを教えてくれた盟友と、1日前には初回で私の練習相手になってくれた方とセッション練習。

この2回の練習のおかげで、完全に吹っ切ることができました。
とことん、相手の「ありたい姿」を引き出すことに集中できたんですよね。

最終的に合計38回の練習でした。お相手いただいた25名の皆さん、本当に心から感謝しております。
同じ時期にコーチングを学べたこと、この出会いに感謝しかございません!

実技試験は、開始前の5分間はド緊張していましたが、アセッサーの方とのラポールが始まったら、まったくその緊張は溶けました。フロー状態に入れたのかもしれません。

実際のセッションは、前々日と前日のいいイメージがまだ脳裏にはっきりと残っていたので、自分としては、手応えを感じたセッションでしたね。

まとめ

そして、いよいよ本日が結果発表の日。

何時にメールが来るのかわからなかったので、朝からソワソワしてしまいましたが、お昼休み後にメールが届き、「合格」の二文字を見ることができました!

何度も繰り返しになりますが、多くの同期の仲間たちがいたからこそ、達成できたと思っています。

コーチングを通して、すでに自分の中で大きな変化が起きており、まずは相手の話を「傾聴」しようという習慣が身についてきているように感じています。

とはいえ、コミュニケーションを疎かにしてきた時間の方が圧倒的に長かったので、時間の経過と共に前に戻ってしまうことが心配です。

もう以前には戻らないために、とにかく学び続けるしかありません!

まずは、身近な家族、仕事仲間と良好な関係を続けていくこと。それに尽きるでしょう。半径5メートル以内の身近な人達と楽しく仲良く歩んでいこうと思います。

さらに、友人、コミュニティ仲間の皆さんと、どんどんとその輪を広げていきたいと思っています。
そのために、コーチングが自分自身の「下敷き」となっていることは間違いありません。

その「下敷き」を擦りまくって、静電気を起こしていきますw
(懐かしい想い出! 粗品風に言ってね)