常連

注目の的

社会貢献

質問力

自己紹介

いつもお世話になっております。

動的に追加した要素にaddEventListnerを設定する方法がわからないのです。
調べてもJqueryでの方法は多く出てくるのですが、生のJavascriptでは出てこないので質問させていただきました。

試しにコードを作成してみたのですが、動的に生成された要素elm_2が存在しないためaddEventListner propertyがNullですと返ってくるのかと推察しました。

jqueryの$(document).on('click','hoge',function)のように動的に生成された要素にイベントを設定したいということになります。
よろしくお願いいたします。

```HTML
<body>

<button id="btn_1">btn</button>

      <script type="text/javascript">
      function adding() {
      var elm_add = document.createElement('button');
      elm_add.id = "hoge";
      elm_add.textContent='btn added';
      var objBody = document.getElementsByTagName("body").item(0);
      objBody.appendChild(elm_add);
      }
      var elm = document.getElementById("btn_1");
      elm.addEventListener("click", adding, false);

      </script>

      <script type="text/javascript">

      function warnings (){
        alert('it works! congraturations!!')
      }


      var elm_2 = document.getElementById("hoge");
      elm_2.addEventListener("click", warnings, false);
     //Uncaught TypeError: Cannot read property 'addEventListener' of null
      </script>
</body>
```

動的に追加した要素にaddEventListnerを設定する方法

###前提・実現したいこと
動的に追加したdiv要素の読み込み完了イベントを取得し、処理を追加したい

###発生している問題・エラーメッセージ

```
動的に要素を追加し、その追加の読み込みが終わったタイミングでalertを発信したい。
しかし動的に追加した要素の読み込み直後のタイミングでは要素の追加がなされておらず、
functionが呼ばれた後になって初めて追加した要素が有効になる。
追加した要素の読み込み完了タイミングのイベントが欲しいが、
該当の要素はdivであり、loadイベントが発生しないため、代替の手段が知りたい。
```


###該当のソースコード
```html
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<a href="javascript:;" onclick="lockScreen()">二度押し防止</a>
<script type="text/javascript">
    function lockScreen() {
        var container = $(document.createElement('div'))
        $('body').append(container);        
        container.attr('class','divhide')
        container.attr('id', 'forhide')
        container.css("z-index", "999")
        container.css("position", "absolute")
        container.css("top", "0px")
        container.css("left", "0px")
        container.css("right", "0px")
        container.css("bottom", "0px")
        container.css("background-color", "gray")
        container.css("opacity", "0.8");
        alert("このタイミングですでに暗転済みであってほしい");
    }
</script>
```

###試したこと
containerのloadイベントを取得しようとするも、divにはonイベントはないとのこと。
refreshやreloadのようなイベントを探したが見つからず。
上記functionはlockScreenとalertを別functionに設定しても同じ結果となってしまう。


###補足情報(言語/FW/ツール等のバージョンなど)
chrome,mac,jquery1.7,html5,css3

動的に追加したdiv要素のonloadを取得、またはその代替手段が知りたい

### 前提・実現したいこと

cssでborderを外すとレイアウトがずれてしまいます。
borderの太さ以上に大きくずれるため、自分では解決できず質問しました。
単純なボックスモデルの問題ではないような気がしています。
borderの有無が本質的な問題ではないかもしれません。

なぜレイアウトのずれが発生しているのか、
コードをどのように変更すれば解決するか教えていただければ幸いです。


### 発生している問題・エラーメッセージ

レイアウトがずれる。
エラーメッセージはなし。

① #q-wrappern (問題なし)
![q-wrapper](2d663dd5b43ba1e96be4cbe993ab5d7e.png)

② .q (borderあり)
![q_withborder](48fbb045ffcf3479f7a7bdf40ff68ceb.png)

③ .q-container (borderあり)
![q-container_withborder](dc7499a271316bd0161fbadc57e34f39.png)

④ .q (borderなし)
![q_withoutborder](eb51b030317f9ac6b568d0a3aa6095b4.png)

⑤ .q-container (borderなし)
![q-container_withoutborder](ee4fc8d4520bd2fbd0e2ac118c6ca549.png)

borderを外した状態で、②③のようなレイアウトになるのが理想です。


### 該当のソースコード

```html
<div id="q-wrapper">
  <div class="q" id="q1">
    <div class="q-container">
      <h2>Q1. 質問</h2>
      <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
      <span class="fas fa-chevron-down scroll"></span>
    </div>
  </div>
</div>
```

```css
#q-wrapper {
  position: absolute;
  top: 100vh;
  width: 80vw;
  height: 1000vh;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 1rem;
  margin: 5vh 10vw 10vh 10vw;
}

.q {
  position: relative;
  top: 0;
  width: 80vw;
  height: 100vh;
  /* border: solid;  <===  問題のborder */
}

#q1 {
  height: 95vh;
}

.q-container {
  position: relative;
  width: 70vw;
  height: 90vh;
  /* border: solid red;  <===  問題のborder */
  margin: 5vh 5vw;
}

#q1 .q-container {
  height: 95vh;
}

.q-container h2 {
  font-size: 2rem;
  text-align: left;
}

.q-container h2::after {
  content: '';
  display: block;
  width: 70vw;
  height: 2px;
  background: linear-gradient(to right, #bf7fff, #ff7fbf, #ffbf7f);
  -webkit-background-clip: block;
  -webkit-block-fill-color: transparent;

}

.q-container ul {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: absolute;
  top: 0;
  width: 70vw;
  height: 90vh;
  justify-content: space-evenly;
  -ms-align-items: center;
  align-items: center;
  font-size: 1.2rem;
}

```


### 試したこと

borderを使用して、レイアウトがずれていることを確認しました。
必ずしもborderが原因になっている訳ではないと考えています。

解決策を探したところ、borderの幅の分、レイアウトがずれる現象はありましたが、
このように大きくずれる現象は見つけられませんでした。


### 補足情報（FW/ツールのバージョンなど）

atomでコードを書いています。
ブラウザはChromeです。
PCはSurface Proを使用しています。

cssでborderを外すとレイアウトがずれる。

vue.jsにてfacebookのchat機能のような物を作っております。
その中で「スクロールを常に一番したにする」実装で
https://jsfiddle.net/my54bhwn
を参考にして
```
var container = this.$el.querySelector(".chat-log");
container.scrollTop = container.scrollHeight;
```
といたしました。
しかしこの参考にしたURLもそうなのですが、スクロールの一番下まで行くわけでなく若干上になります。これを一番下までもっていくためにはどうするのか、また何か違う解決方法(paddingの設定など？？)分かる方がいれば教えていただけますでしょうか。
よろしくお願いいたします。

javascript(vue.js) にてスクロールを一番下にもっていきたい

### 前提・実現したいこと

Vue.jsでの実装方法についてご相談になります。

複数並んでいるチェックボックスに対してv-modelで各チェックボックスに同じ配列を渡せばその配列に対してチェックのオンオフにより配列を動的に作り上げる仕様になっているかと思います。

下記のソースコードの例で言えば「array」という配列がそれに該当するのですが、array以外にもarray2という配列も連動して動的に値を変えたいと思っています。

ただ、v-modelに指定できるのは一つのdataのみという認識です。2つの配列dataを動的に値を変更させることは可能なのでしょうか。v-modelを使う方法以外にも何か効率の良いやり方等をご存知の方がいらっしゃいましたらご教授いただけると幸いです。

### 該当のソースコード

```Vue.js
    <div id="app-120">
        <input value="2" type="checkbox" id="checkbox" v-model="array">
        <input value="3" type="checkbox" id="checkbox" v-model="array">
        <input value="4" type="checkbox" id="checkbox" v-model="array">
    </div>
    <script>
        var app120 = new Vue({
            el: '#app-120',
            data: { array:[],
                    array2:[]★この配列も合わせて動的に変更させたい
                  }
        })
    </script>
```

Vue.jsで複数の配列dataをv-modelで動的に値を変える方法

お世話になっております。

データのコンバートを行っておりまして
データの元には、税抜価格しかもっておりません。

SQLで計算すると、ずれてしまうことがあります。
どのように税込み価格を出せばずれないでしょうか。


```SQL
select trunc(税抜*1.08) from 商品マスタ
--税抜：3240円　税込3499円　1円ズレ
```

税抜から税込価格を出すSQL

### 前提・実現したいこと
実現したいことは「vue.js」「vuex」構成にて、「Axios」でデータを取得後に「storeのstate」に取得データを格納後、componentへ取得データを表示したいです。
下記ソースにて実行したのですが、画面上にはなにも表示されません。
画面描写と情報の取得と格納の順番が前後してうまく表示できてない様に思えるのですが、対応方法などアドバイス頂ければと考えております。

### 試したこと
問題がAPI側にあったり、「store」の定義にないか確認する為にデータ取得後に「console.log」で「store」の「state」情報を確認しましたが、API上から取得されたデータが表示されるのでstore格納までは行えている様に思えます。

### store定義
```JavaScript
const store = new Vuex.Store({
  state: {
    detail: '初期化'
  },
  mutations: {
    setDetail(state, payload) {
      state.detail = payload
    }
  },
  actions: {
    getDetail({dispatch}) {
        return axios.get('http://localhost:8000/api/detaile/',{})
    },
  },
  getters: {
    detail(state) { return state.detail }
  }
})
```

### component(XXXX.vue)定義
```JavaScript
<template>
<div>{{detail}}</div>
</template>

<script>
export default {
  name: 'listcard',
  props: ['post'],
  data () {
    return {
      msg:{}
  },
  computed: {
    detail() {
      this.$store.dispatch('getDetail').then((res)=>{
        this.$store.commit('setDetail', res.data )
        var detail = this.$store.state.detail
        // データが格納され、「store」の「state」に格納されているか確認
        console.log(detail)
        return detail;
      });
    }
  }
}
</script>

```

vue.js,vuexでaxiosでデータを取得後に画面描写できない

jsonでタイトルと本文と画像URLのlistを取得して、アイテムのリストを生成します。
生成後のliをクリックしたらそのliにclass `active` を付与したいのですが、jqueryとか使わずVue.jsでシンプルに出来ないものかなと。

```javascript
var jsonurl = 'list.json';
var xhr = new XMLHttpRequest();
xhr.open('GET', jsonurl);
xhr.send();
xhr.onload = function (e) {
    if (xhr.readyState === 4 && xhr.status === 200) {
    var json = JSON.parse(xhr.responseText);
    var vue = new Vue({
        el: '#itme',
        data: {
            jsonDatas: json
       }
    });
  }
};
```

```HTML
<ul id="itme">
    <li v-for="jsonData in jsonDatas">
        <img src="{{jsonData.imgUrl}}">
        <div>
            <h3 v-text="jsonData.title"></h3>
            <p v-if="jsonData.body" v-text="jsonData.body"></p>
        </div>
    </li>
</ul>
```

Vue.jsでクリックしたDOMにclassを追加/削除したい

標題通りです。

scriptタグ内ではexport deault内に処理の記述を書いていますが（export deault内で設定した変数の値によってtemplateにおいて該当する変数にも設定が反映されたり）、export deaultはメイン処理と同じ認識でいいんでしょうか？
(vue内で勝手にimportして勝手にいい感じにtemplateの変数に設定してくれている…？)

vue.jsのvueファイル内に記述する[export deault]って何ですか？

いつも本当に助かっています。
テーブルの設計についてご意見をお聞かせください。

仕事でデータロガーのシステムというものを実装しました。
そのシステムは外部の機械から何らかのデータを受けとり、保存していくだけの単純なものですが、受け取るデータ構造を可変としています。

---

例：
- 機械Ａは 気温、湿度、気圧
- 機械Ｂは 電圧、電流
- これらのデータが各機械から１０秒毎に（23℃, 30%, 1000hPa というように）送信されるので受信し保存する。


条件：
- 機械毎のデータ定義を画面から設定する。
(何カラムあり、どのカラムが何のデータで、型は何で、有効桁数が何桁で、単位は何か、等）
- 各カラムのデータ型は真偽値、整数値、小数値、文字列がある。
- 機械Ａも機械Ｂも数千台程度接続されている。今後機械Ｃも追加される
- データを元に各機械毎のグラフを描画したり全体で集計したりする。閾値判定も行う。
- データ蓄積後、定義の変更はある程度許容する。（列の追加や単位の変更など）

---

これらを実現するためのテーブル構造の案として、下段に記載した幾つかの案などがあるかと思います。
実はもうこのシステムは「案１」で開発が終了し、問題なく稼働しています。
上記は例ですが、実際に数億レコードのデータが蓄積されています。
ただ、設計実装が私一人で周りに頼れる人もなく、設計に不安があるため、皆様のご意見をお聞かせください。

**質問１．情報が少なくて恐縮ですが、「案１」を採用したのは正解だと思いますか？
質問２．現実的な案として下段以外のものはありますか？
質問３．下段の案の中で、上記条件に対して「ありえない」と考えるものはありますか？
質問４．一般的にこういったもののデザインパターンはありますか？
質問５．他、経験談や参考情報などありましたらご教示ください。**


実際に問題なく稼働しているのだからいいじゃん、という部分もあるかと思いますが、後学のためよろしくお願いいたします。
※できるだけ広くご意見を頂きたいので少し長めに質問をオープンしておくかもしれません。

CentOS7.2, MariaDB10.0, Java8

---

### 案

**１．ID, 機械ID, キー(VARCHAR), 値(VARCHAR), 日時 のカラムを持つテーブルを用意する。**
  ※一旦値をVARCHARで保存し(小数値1.23ならそのままテキストで)、読み出し時に各定義の型に合わせて解釈します。
  ※１カラム（例えば気温）だけで１レコード消費します。
  ※閾値判定時、VARCHARカラムに対して平気で 「値 > 1.23」 のようなことをやります。
  ※１回の送信データを示す集計基準は機械IDと日時です。
  ※この案を採用しました。


**２．「定義ごとに柔軟にテーブルを作る」システムを作る。**
  ※プログラムが CREATE TABLE 文を発行します。
  ※なんだか気持ち悪いという理由と、システムが複雑化しそうという理由で却下しました。
  ※データ量は最も少なくなり運用も楽そうなため、今はこちらの方がよかったかも、と思っています。


**３．ID, 機械ID, c1, c2, c3, c4..., 日時 のようにカラムを予めたくさん用意し、カラムとデータの対応テーブルを別途用意する。**
  ※ダサく感じたので却下しました。なしではなかったなと思っています。


**４．ID, 機械ID, データ(VARCHAR), 日時のカラムを用意し、データにXML, JSON, ハッシュオブジェクトシリアライズなどで保存する。**
  ※集計と運用が厳しくなるかと思い却下しました。


**５．RDBを用いない。**
  ※RDB以外を知らないことと、集計が厳しくなると思い、却下しました。

可変データ構造をRDBに保存する方法について

## やりたいこと

下記ページを参考に、ログインフォームで
パスワード入力の際に目のアイコンを押すと、パスワード表示・非表示の切り替えができる欄を
【パスワード・パスワード確認用】の計２つ作成したいです。
https://kishiken.com/jq/input-password-toggle/
![イメージ説明](ad474831084b6ff8a7336157f61a413b.png)

## 困っていること
パスワード１つの場合はできたのですが、確認入力用の２つ目の同様のパスワード欄を作成した際に
２つ目のパスワード表示・非表示が切り替わりません。

## 試したこと
class名やidに変更をして該当のJavaScript部分を２回記述するなどしましたが
うまくいきませんでした。
変更したのは、下記の中のclass３箇所です。
.js-password-toggle
.js-password
.js-password-label

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>テスト</title>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </head>
  <body>

    <form>
      <div class="box">
        <p>Password</p>
        <div class="box-pass">
          <input class="js-password" type="password" value="" id="pass-login" name="pass-login" maxlength="10" placeholder="99999" required="required">
          <input class="js-password-toggle button__input" id="password--eye" type="checkbox" name="password01">
          <label class="js-password-label button__label" for="password--eye"><i class="fas fa-eye"></i></label>
        </div>
      </div>
      <div class="box">
        <p>Password(確認)</p>
        <div class="box-pass">
          <input class="js-password" type="password" value="" id="pass-login-kakunin" name="pass-login-kakunin" maxlength="10" placeholder="99999" required="required">
          <input class="js-password-toggle button__input" id="kakunin--eye" type="checkbox" name="password02">
          <label class="js-password-label button__label" for="kakunin--eye"><i class="fas fa-eye"></i></label>
        </div>
      </div>
    </form>
    <style type="text/css">
      .box {
        display: flex;
        align-items: center;
      }
      p {
        padding-right: 20px;
      }
      .box-pass {
        width: 200px;
        position: relative;
      }
      .box-pass input {
        width: 200px;
        height: 30px;
      }
      input.button__input {
        display: none;
      }
      .button__label {
        position: absolute;
        right: 10px;
        top: 5px;
      }
    </style>
    <footer>
    </footer>
    <script>
      const passwordToggle = document.querySelector('.js-password-toggle');
      passwordToggle.addEventListener('change', function () {
        const password = document.querySelector('.js-password'),
              passwordLabel = document.querySelector('.js-password-label');
        if (password.type === 'password') {
          password.type = 'text';
          passwordLabel.innerHTML = '<i class="fas fa-eye-slash"></i>';
        } else {
          password.type = 'password';
          passwordLabel.innerHTML = '<i class="fas fa-eye"></i>';
        }
        password.focus();
      });
    </script>
  </body>
</html>
```

ご教示いただけますと幸いです。

目のアイコンでパスワード入力の表示・非表示を切り替えたい。

シェルスクリプトでexpect関数を使用して、コマンドの実行後の自動入力をしたいと考えています。

x nn というコマンドを入力すると、以下の文章が出てきますので、2と自動入力するためにスクリプトを作成してみました。

以下、コマンドを実行した際の文章
specify nn-bondlength factor: (usually=2) [and optionally dlimit, dstmax (about
  1.d-5, 20)]

以下、作成したスクリプト
```ここに言語を入力
#!/bin/sh

command_nn="x nn"
answer_nn=2

### x nn
expect -c "
set timeout 5
spawn ${command_nn}
expect \"20)]\"
send \"${answer_nn}\n\"
"

```
このスクリプトを実行した際、2と自動入力されず、タイムアウトしてしまいます。

色々なサイトを見て解決を試みてみたのですが、どれもうまくいかず、自分の力ではどうにもできません。

ぜひ、お知恵を貸していただけますと幸いです。

シェルスクリプトでexpect関数を使用した自動入力について

モバイルで用いるためのWebアプリケーションを作成しています。
そのとき、タイル状に並べたマス目をなぞっていくと色が変わり、選択したこととなる、といったようなUIを作成したいです。
より具体的には、例えば一月分のカレンダーをマス目で表わし、それに対してガントチャートの帯を引くように、連続的に選択した日付を選びたいというものです。（タイルのひとつひとつをクリックもしくはタップしていくのではなく、なぞることで複数の連続した日付が選択されたこととなる状態。）
色の変わったところは選択された日付として、Ajaxを用いてサーバのDBに登録していく予定です。
どのようなところを調べていけば良いのかのヒントをお願いしたいです。

タイル状もしくはグリッド状のマス目をなぞると、色や属性が変わるようなUIを備えたWebアプリケーション

以下のコードを記述し、sessionを常に保持したいですが、
```
HttpSession session = request.getSession();
session.setMaxInactiveInterval(-1);
```

上記をローカルmac/tomcat7で実装していますが、
１日たった後でmacを再起動しましたが、

コード中で、session.setAttribute("key", key);

したkeyが

session.getAttribute("key");

で取得できなくなります。


この原因は、tomcat セッションはデフォルトは、メモリに保持しているので、
macを再起動してしまう、または、tomcatを再起動してしまうと、
メモリから消えてしまい、セッションも消えてしまうになりますでしょうか。


また、セッションを切れなくするには、以下のようにファイルに保存する形で
よいでしょうか。

http://qiita.com/shintaness/items/73d176c0a4f369608898#2-2

何卒教えて頂ければ幸いです。


--追記--
context.xmlにある以下にて
```
    
    
```
「Tomcat停止時にセッション状態をファイルに保存して、起動時に読み込んでセッションを永続化するようになってます」

という動作をするとのことなので、

少なくとも、tomcat起動、再起動では、セッション情報は消えないになりますかね。

だとしますと、私がmacを再起動したときに、
tomcatの停止しないまましたので、強制終了になり、セッションが保存されないままとなったため、
セッションがきえてしまったという現象になった？でしょうか。

java1.8&tomcat7のセッション有効期限について setMaxInactiveInterval

centos6.4にapacheをインストールしています。

いつから問題が生じたのかの分からないのですが、cssファイルがブラウザにて更新が反映されない状況です。

グーグルクロームのデベロッパーツールで確認したところ、ステータスコードは200番でした。
CSSファイル自体は読み込めているみたいなのですが、更新しても反映されません。
キャッシュを削除しても同様です。

おそらくapacheの設定に問題があるのではと思うのですが、どこをいじればいいのか今ひとつ検討がつきません。

回答お願いいたします。

cssファイルが更新されない　（centos apache）

正規表現についての知識があまりないので質問させていただきます。
javascriptの正規表現について調べるとよくでる+$,*$の違いはなんでしょうか？

あと、^ , $は行はじめと行末という認識であっていますか？

正規表現 + * 違い

ページ全体のaタグのhref属性（URL）を書き換えたくJQUERYをつかって以下のコードをループ中で実行すると
$(this).attr('href').replace('/moji','/');

Uncaught TypeError: Cannot read property 'replace' of undefined

がでる箇所があります。

どうも
%e4とかURLエンコードされた文字が入っているとでるようですが何か解りますか？

javascriptの.replaceについて

お世話になります。
独学でC#.netでアプリを作っています。

今までは「Windowsフォームアプリ」でしか作ったことはありませんが、「WPFアプリケーション」の形式でも開発してみたくなりました。
軽くネットで調べているうちに、「WPFアプリケーション」では"MVVM"パターンで作成している例が多く見受けられました。

そこで、参考書として、
 ・デザイン面（WPF）
 ・開発手法面（MVVMパターンでの開発手法。）
が中心に載っている参考書を探しています。

ネットでWPFに関する書籍を調べ、中身を見に本屋を数店舗回りましたが、どこも扱っていなかったため、ここでの質問に至りました。

[経験]
仕事でJava4年ほど。
C#は独学で半年くらいです。

値段は特に制限はありませんが、一般的な参考書の範囲内（\3000～\5000程度？）だと助かります。
よろしくお願いいたします。

WPF、MVVMに関するオススメの参考書を探しています。

Linux環境でTomcatを動かしているのですが、
ヒープサイズのチューニングを行おうと考えております。

下記設定を行いたいのですが、設定すべき箇所はtomcat.confでよろしいのでしょうか。
また設定変更前後でこれらの設定が反映されていることを確認する方法はありますでしょうか。

JAVA_OPTS='-Xmx512M -Xms512M -XX:PermSize=128m -XX:MaxPermSize=128m'
CATALINA_OPTS='-server -Xmx1024M -Xms1024M -XX:PermSize=256m -XX:MaxPermSize=256m'

ちなみにTomcatはyumコマンドでインストールしており、バージョンは7.0.33です。

ヒープサイズの設定変更の確認

tomcatにおけるコンテキストパスについて質問させてください。
tomcatをインストールすると、デフォルトで以下のwebアプリケーションがデプロイされているようです。

tomcatインストールディレクトリ/webapps/
├── docs
├── examples
├── host-manager
├── manager
└── ROOT

この中でコンテキストパスが"/"でhttpアクセスできるのは（http://IPアドレス:8080/）、ROOTアプリケーションであり、例えば、examplesアプリケーションへは、コンテキストパス"/expamples"（http://IPアドレス:8080/examples/）でアクセスできるようです。これらのコンテキストパスは、どこで設定されているものなのでしょうか。server.xmlには、"Context"タグは存在しないようですし、"tomcatインストールディレクトリ/conf/Catalina"は空でした。

どなたかご存知の方、ご教授頂けないでしょうか。何か勘違いしている点があれば、合わせてご指摘頂けると嬉しいです。

▪️OS
Red Hat Enterprise Linux Server release 7.3

▪️Tomcatバージョン
8.5