Vue 忘備録 見ないこと!

属性にマスタッシュ{{}} は使えない

間違った書き方

<div id="app">
    <input type="text" v-bind:value="{{message}}">
</div>

正しい書き方

<div id="app">
    <input type="text" v-bind:value="message">
</div>

style属性やclass属性にはbindできる

inputタグの中は、属性を表す。そのため属性の場合はマスタッシュ {{ 変数名}} は利用できない

v-show

指定した条件式だけ

Xserver WPForms からメール送付 WordPress

問題:WEBサイトのお問い合わせフォームから、Gmailのメールが送られてこなくなった。

そこでXserverのメールを利用することにする

下記ページの指示通りメールアカウントを追加

www.xserver.ne.jp

作成した、XserverのメールアドレスでWordPressのデフォルトのメールアカウントを変更

f:id:happy_teeth_ago:20200421122315p:plain

プラグインのインストール

SMTPサーバーで送るためのプラグイン

f:id:happy_teeth_ago:20200421122932p:plain 通知メールを使う場合、SMTPサーバー設定を行うことが良いです。
でないと、迷惑メールに入ったり、メールが届かなかったりします。
Xserverの SMTPサーバーを利用します。

SMTPサーバーとは?

Simple Mail Transfer Protocol(シンプル・メール・トランスファー・プロトコルの略です。
インターネットで電子メールを 送信・転送 するために用いられるプロトコルで、現在もっとも普及しているSMTPに対応するメールサーバーのことです。
メールの受信ではないので注意。
ちなみにメールの受取は POP「Post Office Protocol(ポスト・オフィス・プロトコル)の略です。

あとは公式サイトに従い入力

www.xserver.ne.jp

f:id:happy_teeth_ago:20200421150033p:plain

f:id:happy_teeth_ago:20200421150756p:plain

無事設定が済んだら、Email Testからメールを送ってみよう

どこにでも送信できます。 f:id:happy_teeth_ago:20200421151505p:plain

こんなメールが送られてきたら成功!

めでたし めでたし f:id:happy_teeth_ago:20200421151344p:plain

Docker Django3.0 環境構築

目的:Dockerを使って,Djangoの環境構築をしたい

作業手順

1-requirements.txtを作る

2-Dockerfileを作る

3-docker-compose.ymlを作る

4-コンテナを起動してstartproject, startappする

5-docker-compose up でローカルサーバーを起動する

1-requirements.txtを作成する

requirements.txtとは?

まずPip(ピップ)とはPythonのパッケージ(ライブラリ)を管理するパッケージ
Python インストール時に自動でインストールされる。
通常このようにしてパッケージをインストールする。

python3 pip install Pillow(画像を扱うパッケージ)

のようにライブラリをインストールする。 ところがちょっとしたアプリ開発でも10-20くらいのパッケージを利用する。

そこでrequirements.txt に記載して一括インストールする。 公式サイトはこちら

pip.pypa.io

この場合はこのようにコマンドをうつ

python3 pip install -r requirements.txt
(-r オプションは再帰的なの意味)

pip freeze で現在のパッケージを出力できる 基本これを requirements.txt に記載しておけばよい

$ pip freeze

asn1crypto==0.24.0
astroid==1.6.6
awscli==1.18.3
backports.functools-lru-cache==1.6.1
botocore==1.15.3
CodeIntel==0.9.3
colorama==0.4.3
configparser==4.0.2
cryptography==2.1.4
docutils==0.15.2
enum34==1.1.6
futures==3.3.0
idna==2.6
ikpdb==1.2.3
Inflector==2.0.12
ipaddress==1.0.17
isort==4.3.21
jedi==0.11.1
jmespath==0.9.4
keyring==10.6.0
keyrings.alt==3.0
lazy-object-proxy==1.4.3
mccabe==0.6.1
parso==0.1.1
pbr==5.4.4
pyasn1==0.4.8
pycrypto==2.6.1
pygobject==3.26.1
pylint==1.9.5
pylint-django==0.8.0

しかしここにはDjangoが含まれていない。理由を調査する

Django install 公式サイト

docs.djangoproject.com

ここにはこのような記載がある。

install pip 
最も簡単なのは、スタンドアロンのpipインストーラーを使用することです。 ディストリビューションにすでにpipがインストールされている場合、古くなっている場合は更新する必要があるかもしれません。 古くなっている場合は、インストールが機能しないのでわかります。

virtualenvとvirtualenvwrapperを見てください。 これらのツールは、システム全体にパッケージをインストールするよりも実用的な分離されたPython環境を提供します。 また、管理者権限なしでパッケージをインストールすることもできます。 貢献するチュートリアルでは、virtualenvを作成する方法について説明します。 仮想環境を作成してアクティブ化したら、次のコマンドを入力します。

つまり仮想環境に入れたほうが良いことがわかる。 自分のPCに入れてしまうと、通常使うときもその影響を受ける。 必ずvirtualenvとvirtualenvwrapperなどの,仮想環境に入れること。

ポイント Pythonの仮想環境構築には3つある。

pyenv Pythonがデフォルトで搭載している仮想環境

virtualenv 仮想環境を構築する

virtualenvwrapper 文字通りvirtualenvの拡張セット 

拡張機能には、仮想環境を作成および削除したり、開発ワークフローを管理したりするためのラッパーが含まれているため、依存関係に競合を生じさせることなく、一度に複数のプロジェクトで作業することが容易になります。 公式サイト

virtualenvwrapper.readthedocs.io

このように環境をつくる

//まずpipでvirtualenvwrapperをインストールする
$ pip install virtualenvwrapper
...

//パスを通す
$ export WORKON_HOME=~/Envs

//作業ディレクトリを作成
$ mkdir -p $WORKON_HOME

//仮想環境を起動
$ source /usr/local/bin/virtualenvwrapper.sh

//env1という仮想環境を構築する
$ mkvirtualenv env1
Installing
setuptools..........................................
....................................................
....................................................
...............................done.
virtualenvwrapper.user_scripts Creating /Users/dhellmann/Envs/env1/bin/predeactivate
virtualenvwrapper.user_scripts Creating /Users/dhellmann/Envs/env1/bin/postdeactivate
virtualenvwrapper.user_scripts Creating /Users/dhellmann/Envs/env1/bin/preactivate
virtualenvwrapper.user_scripts Creating /Users/dhellmann/Envs/env1/bin/postactivate  New python executable in env1/bin/python
(env1)$ ls $WORKON_HOME
env1 hook.log

これで、仮想環境を構築してDjango がインストールできる

//仮想環境を構築すると(env1)と環境がカッコで表示される
//Djangoの公式サイトにはpython のモジュールとしてインストールすることが勧められている
(env1)$ python -m pip install Django


Downloading/unpacking django
  Downloading Django-1.1.1.tar.gz (5.6Mb): 5.6Mb downloaded
  Running setup.py egg_info for package django
Installing collected packages: django
  Running setup.py install for django
    changing mode of build/scripts-2.6/django-admin.py from 644 to 755
    changing mode of /Users/dhellmann/Envs/env1/bin/django-admin.py to 755
Successfully installed django

Django公式サイト

docs.djangoproject.com

2-以上を踏まえてDockerfileを作成する

公式サイト

ここからdjangoをpullしてくる hub.docker.com ここには記載方法があります。解説します。

# Docker Hubにあるpythonイメージをベースにする
#下記参照
FROM python:3.6-alpine3.10

RUN apt-get update \
    && apt-get install -y --no-install-recommends \
        postgresql-client \
    && rm -rf /var/lib/apt/lists/*

WORKDIR /usr/src/app
COPY requirements.txt ./
RUN pip install -r requirements.txt
COPY . .

EXPOSE 8000
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

参照:Python: Docker ここでpython3.6に決定 ローカルPCとそろえたい

hub.docker.com

今日は、ここまで、

WordPress 検索フォームの実装

検索フォームの実装についてまとめます。

このコードを変更します。

  <form class="header_search">
      <input type="text" placeholder="キーワードを入力">
      <i class="fas fa-search"></i>
  </form>

ポイントは3つ

formタグのaction属性へhomeへのURLを設定

formタグのmethodにはgetを指定

name属性には s を利用する

このパラメーター s が送信されて、DBの検索に利用される
こんな感じになる

 <form action="<?php echo home_url( '/' ); ?>" method="get" class="header_search">
 
//ポイント     
       <input type="text" name="s" value="<?php echo the_search_query( ); ?>" placeholder="キーワードを入力">
       <i class="fas fa-search"></i>
 </form>

検索結果に投稿だけを(固定ページ等を除外して)表示したければ、name属性を変更する

<input type="hidden" value="post" name="post_type" id="post_type" />

公式サイト

wpdocs.osdn.jp

Python スクレイピング 環境構築 jupyter notebook

Dockerを利用することに決める

環境が汚れすぎるため

公式サイト このとおりやれば、ほぼ問題ない。 説明もしていきます。 hub.docker.com

$ docker pull continuumio/anaconda3

68ced04f60ab: Pull complete 
57047f2400d7: Pull complete 
8b26dd278326: Pull complete 
Digest: sha256:6502693fd278ba962af34c756ed9a9f0c3b6236a62f1e1fecb41f60c3f536d3c
Status: Downloaded newer image for continuumio/anaconda3:latest
docker.io/continuumio/anaconda3:latest

imageがダウンロードされる

docker run

入力モードになる

$ docker run -i -t continuumio/anaconda3 /bin/bash

(base) root@45524bf19980:/# 

しかしエラー

A connection to the notebook server could not be established. The notebook will continue trying to reconnect. Check your network connection or notebook server configuration.

f:id:happy_teeth_ago:20200411142909p:plain

サーバーログをみると

 from typing import AsyncGenerator, Callable, Iterable, TypeVar, Union
ImportError: cannot import name 'AsyncGenerator'

3.6.0では、このリポジトリで維持されている最新バージョンではなく、3.6.0にバンドルされていたタイピングのバージョンを取得します。 私はチェックしていませんが、AsyncGeneratorを最初に見逃して、3.6シリーズの後半に追加したと思います。 2つの考えられる回避策:3.6の新しいバージョンにアップグレードするTYPE_CHECKINGの場合に使用:import AsyncGeneratorと入力

github.com

もう一度docker runして、バージョン確認 3.7

$ docker run -i -t continuumio/anaconda3 /bin/bash

(base) root@1e4fbf8af2f3:/# python --version
//--------
Python 3.7.6

osは3.6のpythonが入っているため、dockerが動いていることが確認できる。

pipの公式サイトより

pypi.org

https://pypi.org/project/asyncgenerator/

pipがないと言われるので

condaにpipをインストール

(base) root@1e4fbf8af2f3:/# conda install pip
Collecting package metadata (current_repodata.json): done
Solving environment: done

で再度挑戦

注意 :anacondaにインストールするにはactivateしておかないと行けない

qiita.com

言われたとおりにする。

conda info -e
# conda environments:
#
base                  *  /opt/conda

$ source /opt/conda/bin/activate
(base) root@1e4fbf8af2f3:/# find / -name "activate" 
/opt/conda/bin/activate
/opt/conda/lib/python3.7/site-packages/conda/shell/bin/activate
/opt/conda/lib/python3.7/venv/scripts/common/activate
/opt/conda/pkgs/conda-4.8.3-py37_0/bin/activate
/opt/conda/pkgs/conda-4.8.3-py37_0/lib/python3.7/site-packages/conda/shell/bin/activate

setuptoolsが必要かも? 入っていた??

(base) root@1e4fbf8af2f3:/# conda install setuptools
Collecting package metadata (current_repodata.json): done
Solving environment: done

# All requested packages already installed.

ここで解決

docker run に--allow-root オプションが必要

$ docker run -it -p 8888:8888 continuumio/anaconda3 /bin/bash -c "/opt/conda/bin/conda install jupyter -y --quiet && mkdir /opt/notebooks && /opt/conda/bin/jupyter notebook --notebook-dir=/opt/notebooks --ip='*' --port=8888 --no-browser --allow-root"

medium.com

seleniumがないと言われる

f:id:happy_teeth_ago:20200411155439p:plain

dockerの起動 conda でselenium をインストール

$ docker run -i -t continuumio/anaconda3 /bin/bash
(base) root@8055dca3acb7:/# conda install selenium
Collecting package metadata (current_repodata.json): done
Solving environment: done

## Package Plan ##

  environment location: /opt/conda

  added / updated specs:
    - selenium


The following packages will be downloaded:

    package                    |            build
    ---------------------------|-----------------
    conda-4.8.3                |           py37_0         2.8 MB
    selenium-3.141.0           |   py37h7b6447c_0         807 KB
    ------------------------------------------------------------
                                           Total:         3.6 MB

The following NEW packages will be INSTALLED:

  selenium           pkgs/main/linux-64::selenium-3.141.0-py37h7b6447c_0

The following packages will be UPDATED:

  conda                                        4.8.2-py37_0 --> 4.8.3-py37_0


Proceed ([y]/n)? y


Downloading and Extracting Packages
selenium-3.141.0     | 807 KB    | ################################################################## | 100% 
conda-4.8.3          | 2.8 MB    | ################################################################## | 100% 
Preparing transaction: done
Verifying transaction: done
Executing transaction: done
(base) root@8055dca3acb7:/# 

AWS Invalid value '******' for instanceId. Instance does not have a volume attached at root (/dev/sda1)

原因:ボリュームの設定時に適切にDeviseが設定されていないときに発生するエラー

ボリュームとは?

簡単にいうとメモリのことです。
AWSのサーバーはスケールアウトできます。
つまり、メモリの増設ができるのです。 素晴らしい。
このボリューム(メモリ)を増やすときに、一度インスタンスから取り外す必要があります。
それをボリュームの デタッチ と言います。 デタッチした後に、 アタッチ します。(メモリの取り付け)
それからインスタンスの起動します。
そのときに出たのが次のエラー
f:id:happy_teeth_ago:20200404223617p:plain

dev/sda1 

につけなさいと出ていますね。 指示通りに、ボリュームのアタッチ時に設定します。

f:id:happy_teeth_ago:20200404223824p:plain

そうすると、インスタンスは正常に起動します。

注意 ボリュームのアタッチ(メモリの取り付け)、デタッチ(メモリの取り外し)は、必ず、インスタンスを停止した状態で行います。

ここは、通常のPCと同じですね。

めでたし、めでたし

JavaScript forEachの解説

このページのforEachがわからないから説明してほしいと質問された。 【JavaScript入門】連想配列(Dictionary)の取得/追加/ソートまとめ | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト

さらに、第2引数へ連想配列を指定していることから、ループ処理内の「this」が連想配列「arr」と同じになります。そのため、「this[value]」と記述することで連想配列の「値」を取得できるというわけですね。」

質問

上記の文の、「第2引数へ連想配列を指定している」というのが、この文の上にある配列の式のどの部分に当たるのかイマイチわかりません。

var arr = { apple: "400yen", banana: "300yen", cake: "600yen" };
 
Object.keys(arr).forEach( function(value) {
 
    console.log( value + ':' + this[value] );
 
}, arr)

ここでObject.keys(arr)は連想配列のkeyで新しい配列を作る。

その内容は、この様になる。 f:id:happy_teeth_ago:20200329204456p:plain

ただのkeyだけの配列になってしまった。 ここからだけど、

逆に質問 forEachメソッドの引数はいくつあるか?

答えは2つである。

第2引数に arrを渡している。

ここが ポイント

//console.log(value)は当然、いまのキーだけの配列の値。

//this[value]はもとの連想配列 arrのvalueが取得できる。

  console.log( value + ':' + this[value] );

以上。 めでたし、めでたし