yfp5521’s blog

株式会社ビズオーシャンにてエンジニアとして修行中。筋トレも修行中。

jsでdatepickerのクラスを認識しないときの対処法

JSを触り始めて、jQueryのdatepickerで少しハマったので対処法をメモ。


【状況】
フォームのinputタグに対して、入力値をリセットするボタンを実装した。
しかし、リセットを行おうとしたが日付が入ったinputタグがリセットされなかった。


【原因】
JSでのクラス名の指定に間違いがあった。


【解決策】
クラス名だけでは指定できず、「クラス名 hasDatepicker」とすればOK。

   
以下はコードを抜粋。



HTMLで以下のinputタグを作成した。

<input id="datepicker" class="input_date" type="text" name="var_date" value="{{var_date|default:''}}" placeholder="">

input type="date"でもよかったが、ブラウザによって偏りがあることやJQueryのdatepickerの方がデザインも選べたのでそちらを利用。
そのため今回はinput type="text"とした。




以下はJSの記述。
リセットボタンが押された際にclearElementのfunctionが実行される。
クラス名が当てはまった場合に、日付を現在日付に初期化するコード。

・間違いのパターン

function clearElement(element) {
    switch(element.type) {
        case "text":
            element.value = "";
            if (element.className == "input_date") {
              $('.input_date').datepicker();
              $('.input_date').datepicker('setDate', new Date());
            }
            return;
    }
}  

if文の条件にクラス名であるinput_dateのみを記述していたため、if文の中に入らなかった。

element.className == "input_date"



・解決したパターン

function clearElement(element) {
    switch(element.type) {
        case "text":
            element.value = "";
            if (element.className == "input_date hasDatepicker") {
              $('.input_date').datepicker();
              $('.input_date').datepicker('setDate', new Date());
            }
            return;
    }
}  


if文のクラス名に"input_date hasDatepicker"と記述。これで入ることができた。

element.className == "input_date hasDatepicker"



【発見方法】
if文の前にdebbuger;を記述して、chromeデベロッパーツールを使ってデバッグした。
if文の条件に入った際にclassNameの値をチェックしたら”input_date hasDatepicker”と書いてあったため発見できた。


JS、jQueryはまだ初心者の中の初心者なので、まずはデベロッパーツールでデバッグすることに慣れていきたい。

RaspberryPi2 を使ってbluetoothオーディオレシーバーを作る

ラズパイ2でbluetoothレシーバーを作った。
Youtubeの再生は重いので、bluetoohレシーバーとして活用することにした。

 
<参考にした記事>
blog.bnikka.com
d.hatena.ne.jp

<用意したもの>

Raspberry Pi 2 Model B +(rasbianインストール済み)
f:id:yfp5521:20170929184131j:plain:w400

②Blutoothレシーバー(BUFFALO社製)
f:id:yfp5521:20170929184135j:plain:w400

③ラズパイ用ボタン、配線
f:id:yfp5521:20170929184139j:plain:w400
 
<作り方>

①必要なソフトをインストール(pulseaudio, bluez, )

$ sudo apt-get install bluez pulseaudio-module-bluetooth python-gobject python-gobject-2

 

②pulseaudioを再起動する

$ sudo pulseaudio -k
$ sudo pulseaudio -D

 

*今後、ラズパイをrebootした場合はpulseaudioの起動コマンドを実行してみると良い。bluetoothが繋がっても音が出ないときはpulseaudioが起動していない可能性がある。

$ sudo pulsesudio -D

または

$ sudo service pulseaudio start

 

 

②Piユーザーをlpグループに追加。(これによってBluetoothデーモンにアクセスできるようになる)

$ sudo usermod -a -G lp pi

 


Bluetoothの設定

$ sudo vi /etc/bluetooth/main.conf
$ sudo vi /etc/bluetooth/


[General]に以下を追記する(参考にした記事ではSocketも書いてあるが、Source,Sink,Mediaの3つで再生することができた。pulseaudioと同様に接続ができない場合は,Enable=Source,Sink,Media,Socketと書いて試してみると良い)

[General]
Enable=Source,Sink,Media


④サンプリングの設定

$ sudo vi /etc/pulse/daemon.conf
; resample-method = speex-float-3

 resample-method = trivial

 


⑤接続を実行するファイルを作成
(bluetoothctlを起動→ペアリング→接続までを行うconnect.shを作成する)

$ vi /home/pi/connect.sh 

一般的なラズパイのペアリングでは、接続相手のMACアドレスが必要になる。
しかし今回は、ラズパイをボタン1つで操作したいため、MACアドレスの入力が不要なスクリプトを作成する。

<参考>
raspberrypi.stackexchange.com

#!/usr/bin/expect

set timeout 60
set prompt "#"
spawn sudo bluetoothctl -a NoInputNoOutput

expect -re $prompt
send "power on\r"

expect -re $prompt
send "discoverable on\r"

expect -re $prompt
send "pairable on\r"

expect -re $prompt
send "agent on\r"

expect -re $prompt
send "agent NoInputNoOutput\r"

expect -re $prompt
send "default-agent\r"

# sleep 5

expect {
    "(yes/no)?" {send "yes\r"
                 exp_continue
                }
    "(yes/no)?" {send "yes\r"
                 exp_continue
                }
    "(yes/no)?" {send "yes\r"
                 exp_continue


⑥ボタンが押されたらconnect.shが実行されるpythonを作成

$ vi /home/pi/button_check.py
import RPi.GPIO as GPIO
from time import sleep
import os
from datetime import datetime
import os.path
 GPIO.setmode(GPIO.BCM)
button_pin = 21 #GPIO 21 = #40


def onSwitch():
    print('Button pressed')

    result = os.system('sudo service bluetooth restart && /home/pi/connect.sh')

    if result == 0:
        print('Python is running...')
    sleep(3)


def main():
    GPIO.setup(button_pin,GPIO.IN, pull_up_down =GPIO.PUD_UP)

    try:
        while True:
            channel = GPIO.wait_for_edge(button_pin, GPIO.RISING, timeout=5000)
            if channel is None:
                print('Please push the button if you want to pair.')
            else:
                onSwitch()
                sleep(1)

    except KeyboardInterrupt:
        print(KeyboardInterrupt)

    GPIO.cleanup()

if __name__ == '__main__':
    main()


⑦ボタンをラズパイに接続
今回はGPIO21(39)とGND(40)に接続した。他の箇所に接続した場合はbutton_check.pyのGPIO番号を変える。



<参考>
www.atmarkit.co.jp



⑧再起動

$ sudo reboot


⑨ボタンを押して、接続


*****************
ボタンを押してからラズパイを検出できるようになるまで40秒程度のタイムラグが発生することがあった。何回か試しているとすぐに接続できる場合もあったが、最終的には接続できたのでコマンドに問題はなさそう。
(ボタンを押してから60秒経過した場合はラズパイのペアリングモードが切れるので、再度押す必要あり)

また今回のやり方では、接続端末側で「ペアリングの設定解除」をしてしまうとラズパイ側にペアリング設定が残ってしまい、今後の接続がうまくいかなくなる。その場合は以下のコマンドを打って、ラズパイのペアリング設定を削除する。(Doneがでなくなるまで行う)

$ bt-device --remove `bt-device  --list | awk 'match($0, /\(([A-F0-9:]+)\)/){print substr($0, RSTART+1, RLENGTH-2)}'`

Google Cloud Platform

Google Cloud Platformとは?

Googleクラウド上で提供するサービスの総称。

主にインフラ面をクラウド化することで、物理的なサーバー構成を考慮せずにサービスを使うことができる。

 

Google Compute Engine

時間あたりの課金で仮想マシンをレンタルすることができるサービス 

 

・コマンド

 

・replicas→podの数(kc delete pod タグ名でもpodは消えるが、replicasの数を変えないと消えない)

環境変数→deployにセットする

・ノード→同じゾーンで作る

クラスタ→同じリージョンで作る

・kubernetes

qiita.com

gitのコマンド

<2回目以降の流れ>

git add . (addしたいディレクトリ上で)

git status (確認)

git commit -m "○回目のコミット"

git push origin master

Linux講座

Linuxの利点

・不必要なソフトが入っていないため、動作が軽い

オープンソースであるため無償

 

RedHat系 CentOS

Debian系 Ubuntu

 

SSH→SecureShell リモート接続の暗号化(TeraTermで使用)

SSL→SecureShellLayer プロトコルに乗せる仕組み

 

環境変数

ログインしたときに環境変数がリロードされる(同じユーザーでもログインしたときのリロードは違うので、環境変数は別)

 

./etc/bashrc 全ユーザーの環境変数が書いてある

.bashrc 1つのユーザーで管理する環境変数(セッションが違っても、ユーザー名が同じなら反映される)

echo $環境変数名 環境変数の内容を呼び出す

 

・プロキシサーバー→webに出る際に通るサーバ(社内のアクセス管理に使える)

 

.curlrc  curlを行ったときに読み込まれるコマンド

 

・プロセス→実行処理の最小単位

 

正規表現の試し方

python3を起動して試すことができる
# python3
>>> import re
>>> m = re.compile("help")
>>> print(m.match("help"))
<_sre.SRE_Match object; span=(0, 4), match='help'> ←合っていた場合
>>> print(m.match("hel"))
None ←間違っていた場合

エラー時の対応

・ログを書いて、出力する

import logging

logger = logging.getLogger(__name__)

logger.info("source_language: {}".format(source_language))

型の出力
logger.info("翻訳後:{}, 型:{}".format(translation, type(translation)))

・エラーを見て、ソースコードをたどる
google.cloud.translateでエラーが起こっているのなら、Goolgleで「google.cloud.translate python github」で検索して、引数や変数の型を確認する
(Pythonでは第一引数のselfは自身のメソッドを示すので無視)