東京03グッズ画像

やっぱり東京03は最高

こんにちは。 東京03をこよなく愛する筆者です。😄

本当に今回のライブも素晴らしかったです。 このショートコントや、誰にでもわかりやすい一発芸のようなスタイルではなく、ず〜っとロングコントのスタイルを貫き通して、単独ライブも21回⭐️本当に素晴らしですよね!

さて、今回はjqueryのライブラリである、w2uiを活用して、DBから東京03メンバーの情報を取得し、それを動的に表示していくという簡単なデモを作成してみました。

テーブルを用意

まずはテーブルを作成するために、次のようなmigartionを用意。

class Fix < ActiveRecord::Migration[5.2]
  def change
    create_table:members do |t|
        t.string :member_no, :null => false, :limit => 10  , comment: "メンバー番号"
        t.string :member_name, :limit => 30  , comment: "メンバー名"
        t.string :member_kana_name, :limit => 50  , comment: "メンバーカナ名"
        t.decimal :seinen_ymd, scale:0, precision:8  , comment: "生年月日"
        t.string :birth_place,comment:'出身地'
        t.string :blad_type,comment:'血液型',limit:10
        t.decimal :height,scale:0,precision:4,comment:'身長'
        t.decimal :wight,scale:0,precision:4,comment:'体重' 
        t.string :syumi,comment:'趣味'
        t.string :tokugi,comment:'特技'
        t.string :biko1,limit:200,comment:'備考1' 
        t.string :biko2,limit:200,comment:'備考2' 
        t.string :biko3,limit:200,comment:'備考3' 
        t.timestamps
    end
  end
end

お次はデータ投入用のseedを用意します。

Member.create!([
  {member_no: "1", member_name: "飯塚 悟志", member_kana_name: "いいづか さとし", seinen_ymd: 19730527, birth_place: "千葉県", blad_type: "O", height: 170, wight: 60, syumi: "多分コント作り", tokugi: "多分死ぬまでコント作り", biko1: "「お前にそんな大事なものがあるのかよ!」", biko2: "「蓄積!」", biko3: "「超ウルトラ純情学園!」"},
  {member_no: "2", member_name: "豊本 明長", member_kana_name: "とよもと あきなが", seinen_ymd: 19750606, birth_place: "愛知県", blad_type: "A", height: 175, wight: 65, syumi: "音楽", tokugi: "プロレス観戦", biko1: "飯塚・角田「まさに順風満帆。なのに、浮気バレるかねー!」", biko2: "「ラインの流出されるかね!」", biko3: "「お尻舐めたげる(迫真)」"},
  {member_no: "3", member_name: "角田 晃広", member_kana_name: "かくた あきひろ", seinen_ymd: 19731213, birth_place: "東京都", blad_type: "A", height: 172, wight: 62, syumi: "弾き語り", tokugi: "卓球", biko1: "「これがもてない男の女の落とし方じゃい!」", biko2: "「一体何歩俺に譲らせる気ですか!?既に300歩ですよ!」", biko3: "「もらわなかったよ〜母さぁん!立派な人だね〜母さぁん!」"}
])

js,コントローラーなどの準備

次の通り、ファイルを用意・修正していきます。 今回はrailsでjqueryを使える前提で記載しております。w2uiの公式ページからjsとcssをダウンロードし、アセット配下にでも置き、利用できるようにしておく必要があります

まずはルーターから

#routes.rb
resources:test do
    collection do
      get 'member'
    end
  end

お次は、コントローラーを用意し、memberアクションにgetリクエストが来たら、メンバー情報をjsonで返すようにしておきます。

def member
    members = Member.first(3)
    list = []
    members.each do |m|
      list << {
        recid:m.id,
        member_no:m.member_no,
        member_name:m.member_name,
        member_kana_name:m.member_kana_name,
        seinen_ymd:m.seinen_ymd,
        birth_place:m.birth_place,
        blad_type:m.blad_type,
        height:m.height,
        wight:m.wight,
        syumi:m.syumi,
        tokugi:m.tokugi,
        biko1:m.biko1,
        biko2:m.biko2,
        biko3:m.biko3,
      }
    end
    #w2uiグリッドに渡したい情報はrecordsというキーでバリューを渡す
    render json:{records:list}
  end

そして、w2uiグリッド等を表示するためのviewを用意します。

<%= javascript_pack_tag 'test.js' %>
<div class="col-12">
    <h3>メンバー管理</h3>
    <!-- w2ui(画面上側) -->
    <div class="col-12  table-zone">
      <!-- w2uiのグリッド(データテーブル)を表示させたい要素のidはjs側と名前を合わせておくこと -->
      <div id="grid_member" class="w2ui-reset w2ui-grid" style="width: 100%; height: 200px;"></div>
    </div>
</div>
<div class="col-12">
    <h3>メンバー詳細</h3>
    <%= form_with model:@member,url:member_test_index_path do |f| %>
  <div class="row">
    <div class="col-8">
        <div class="div-table">
            <div class="th w6">メンバー氏名</div>
            <div class="td">
                <%= f.text_field :member_name,class:"form-control",disabled:true %>
            </div>
        </div>
        <div class="div-table">
            <div class="th w6">カナ氏名</div>
            <div class="td">
                <%= f.text_field :member_kana_name,class:"form-control",disabled:true %>
            </div>
        </div>
        <div class="div-table">
            <div class="th w6">名言1</div>
            <div class="td">
                <%= f.text_area :biko1,class:"form-control",disabled:true %>
            </div>
        </div>
        <div class="div-table">
            <div class="th w6">名言2</div>
            <div class="td">
                <%= f.text_area :biko2,class:"form-control",disabled:true %>
            </div>
        </div>
        <div class="div-table">
            <div class="th w6">名言3</div>
            <div class="td">
                <%= f.text_area :biko3,class:"form-control",disabled:true %>
            </div>
        </div>
    </div>
    <% end %>
    <div class="col-4">
        <img src="/03/IMG_8369.JPG" class="img-fluid" alt="東京03" id="member-img">
    </div>
  </div>
</div>

そして最後にjsファイルを用意し、w2uiのグリッド(データテーブル)を宣言し、データの取得先を先ほど用意したルートにgetリクエストを送信するように設定しておきます。

$(function() {
    //Grid初期表示
    $('#grid_member').w2grid({
        name: 'grid_member',
        limit:3,
        //グリッド表示データ取得先
        url: {
            get : '/test/member.json'
        },
        recordHeight : 50,    
        error:function(){alert("メンバーデータの取得に失敗しました。");return false;},
        method: 'GET',
        //表示するカラム情報(コントローラーから帰ってくるハッシュのキー名と一致しなければ値を受け取れません)
        //hidden:trueとしておくことで表示はされないが値は持っているので、利用しやすくなります。
        columns: [
          { field: 'id', caption: 'メンバー番号', size: '50px',hidden:true },
          { field: 'member_no', caption: '番号', size: '50px' },
          { field: 'member_name', caption: '氏名', size: '200px' },
          { field: 'member_kana_name',caption:'カナ名',hidden: true},
          { field: 'seinen_ymd',caption:'生年月日',hidden:true,size:"50px"},
          { field: 'birth_place',caption:'出身地',size: '100px'},
          { field: 'blad_type',caption:'血液型',size: '60px'},
          { field: 'height', caption: '身長',size:'60px' },
          { field: 'wight', caption:'体重',size:'70px'},
          { field: 'biko1', caption:'名言1',size:'500px'},
          { field: 'biko2', caption:'名言2',size:'400px'},
          { field: 'biko3', caption:'名言3',size:'200px',hidden:true},
          { field: 'created_at', hideen:true},
          { field: 'updated_at', hideen:true},
        ],
        //グリッドを操作したときのイベント
      onSelect: function(e) {
        record = w2ui.grid_member.get(e.recid);
        $('#member_member_name').val(record.member_name);
        $('#member_member_kana_name').val(record.member_kana_name);
        $('#member_biko1').val(record.biko1);
        $('#member_biko2').val(record.biko2);
        $('#member_biko3').val(record.biko3);
        //memberによって表示する画像を変える
        switch (record.recid){
            case 1:
                $('#member-img').attr('src','/03/IMG_4687.jpg');
                break;
            case 2:
                $('#member-img').attr('src','/03/IMG_3490.jpg');
                break;
            case 3:
                $('#member-img').attr('src','/03/IMG_5655.jpg');
                break;
        }
       },
    });
})

とここまで記載することで、このようなイメージになります。 デモページイメージ

と、この状態でw2uiグリッド(データテーブル)の列を選択すると・・・ デモページイメージ デモページイメージ デモページイメージ

このように、テキストボックス等の値と、ついでにイメージ画像も変わるようにしています。

まとめ

  • 東京03が最高なのは言うまでもない
  • w2uigridは、一々tableタグを作成しなくてもそれっぽい表を作ってくれる
    • デザイン等もcssである程度は簡単に変えられる
    • カラムクリック時のイベントを備えており、データの編集や削除もDBにリクエストを送れる
    • grid 以外にもtab等の便利機能が備わっているため、今度tabのデモもやるかも
    • jqueryは不便なところもあるけど、ライブラリが充実しまくってるのは大きな利点