OmniAICreator/Qiita-1.07M huggingface dataset:
Minikubeを使ってKubernetesに触れてみた

Minikubeを使ってKubernetesに触れてみたみたので、その備忘録を書いていきます。
Kubernetesはすでに有名で説明記事も多くあるので、説明に関しては省略させてください。

# Minikubeとは

Minikubeは小規模なKuberenetes環境をVM上に作成することのできるパッケージです。
Windows,Linux関係なく構築することが可能です。


# Minikubeの環境構築
今回はMacOSを利用します。

まずはkubectlをインストールします。
brewを使います。

```bash
brew install kubectl
```

続いてVM環境のために、VirtualBoxをインストールします。
下記からインストール可能です。
https://www.virtualbox.org/

ダウンロードしたらクリックしてインストールしてください。

続いてMinikubeをインストールします。

```bash
brew install minikube
```

これでMinikubeの環境が整いました。

# Minikube起動

Minikubeの起動は下記のコマンドで行います。

```bash

minikube start

#このコマンドで状態を見ることができます。
$  minikube status
host: Running
kubelet: Running
apiserver: Running
kubeconfig: Configured

#kubectlでクラスターの情報も取得できます。
$ kubectl cluster-info
Kubernetes master is running at https://192.168.64.2:8443
KubeDNS is running at https://192.168.64.2:8443/api/v1/namespaces/kube-system/services/kube-dns:dns/proxy

To further debug and diagnose cluster problems, use 'kubectl cluster-info dump'.
```

# podを使って複数コンテナを起動してみる

yamlで設定事項を書いていきます。

```yaml
apiVersion: v1
# Kubernetesが作成するObjectのタイプ
kind: Service
metadata:
    name: client-node-port
#サブタイプ
spec:
    type: NodePort
    ports:
        -   port: 3050
        #podのport
            targetPort: 3000
    selector:
        component: web
```


```yaml

apiVersion: v1
# Kubernetesが作成するObjectのタイプ
kind: Pod
metadata:
    name: client-pod
    labels:
        component: web
spec:
    containers:
        -   name: client
        #dockerhubにアップロードしてあるイメージ
            image:イメージ名
            ports:
                -   containerPort: 3000
 
```


これをもとに様々なKubrenetesにおけるオブジェクトが作成されます。

Podはユーザーが作成し、デプロイ可能なシンプルで最も最小のユニットです。単一のPodはクラスター上で稼働する単一のプロセスを表現します。Pod内では一つ以上のコンテナが起動します。
詳しくは下記をご覧ください。
https://kubernetes.io/ja/docs/concepts/workloads/pods/pod-overview/

Serviceはkube-proxyとPodの間を受け持つKubernetesクラスターのネットワーク部分に関わるオブジェクトです。今回はNodePortを用いります。

# kubectlに紐付ける

作成したConfigをkubernetesに紐づけるには、下記のコマンドを叩きます。

```bash
kubectl apply -f ファイル名

#確認はこちら
kubectl get services 
kubectl get pods
```

MinnikubeはVM上で起動しているため、ブラウザで開くためにはVMのIPアドレスを知る必要があります。IPアドレスは下記コマンド取得します。


```bash
minikube ip
```
ここで取得したIPアドレスとnodePortを入れたアドレスへアクセスするとブラウザに反映されます。
http://IPアドレス:nodePort/

以上になります。
【福田開発録】

# 福田開発録とは
記載途中


# ざっくり構成
### サーバー１
APIサーバ
画像解析：OpenCV
スクレイピング：①Webページへアクセスし、HTMLを取得：urllib　②取得したHTMLからデータを抽出：BeautifulSoup4

### サーバー２
アプリケーションサーバ（Apache + cakePHP）

### サーバー３
データベースサーバ（mongoDB+MySQL）
mongoDB：画像関連情報
MySQL：ユーザー管理


# 課題
画像ファイルはどのサーバーに置くべきか
【kustomizeで】「できる」って書いてあるのにできないときはバージョンを疑えって言われたでしょ！【ハマった】

カップラーメンができるまでの間に書きました。

# ある日の要約

1. kubernetesのマニフェストファイルをきれいにするため[kustomize](https://github.com/kubernetes-sigs/kustomize)を触っていた。
2. 「へー、kubectlコマンドに取り込まれてるんだ。バイナリ入れなくてもいいね」
3. 何回やってもなんかやっても `kubectl kustomize .` が通らないよ。。(N時間経過）
4. 試しに、GitHubから最新版を落として実験
    5. `$ curl --output - -L https://github.com/kubernetes-sigs/kustomize/releases/download/kustomize%2Fv3.5.3/kustomize_v3.5.3_linux_amd64.tar.gz | tar xzvf - -C /tmp `
6. あっさり`kustomize build .`が通って悲しい気持ちになる


# カップラーメンができるまでの間に調べた
EKSで使うkubectlはAmazon EKSが提供しているものを使う
cf. https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/install-kubectl.html
   
私が使っていたのはKubernetes 1.14に対応するバイナリ

```bash
$ kubectl version                                                                                                                                              
Client Version: version.Info{Major:"1", Minor:"16", GitVersion:"v1.16.0", GitCommit:"2bd9643cee5b3b3a5ecbd3af49d09018f0773c77", GitTreeState:"clean", BuildDate:"2019-09-19T13:57:45Z", GoVersion:"go1.12.9", Compiler:"gc", Platform:"darwin/amd64"}
Server Version: version.Info{Major:"1", Minor:"14+", GitVersion:"v1.14.9-eks-c0eccc", GitCommit:"c0eccca51d7500bb03b2f163dd8d534ffeb2f7a2", GitTreeState:"clean", BuildDate:"2019-12-22T23:14:11Z", GoVersion:"go1.12.12", Compiler:"gc", Platform:"linux/amd64"}
``` 

kustomizeは1.14より統合された。
cf. https://kubernetes.io/blog/2019/03/25/kubernetes-1-14-release-announcement/

一方でkustomizeはkustomizeで継続的に開発されている
cf. https://github.com/kubernetes-sigs/kustomize/releases

ドキュメントのもそれに従って更新されているので、古いビルドに基づくkustomizeでは動かなかった模様。

...

最新版で試しましょう。
転職日記6日目

こんにちは

東京のとある場所にお家を決めに行きました。

転職先が決まっていないと住んでいいかどうかの審査があることを初めて知りました。

いままで、社宅でレオパだったからなのかそういったことを全く知らず、

これも転職という舵を切ったからわかったことなので貴重な体験と思いました。

こうなるとできれば転職先は決めてから退職したほうがいいと思われるかもしれませんが、

自分に後悔はありません。

初期費用も30万ほどかかり、もう迷ってばかりいられないと改めて実感し、

とにかく見切り発車でポートフォリオを作り始めましたがこれが意外に進みがよく

詰まってもとりあえず作って後で治すという姿勢が大事みたいです。

youtuberのkentaさんも言っていましたが、わかってから始めたい病にならないよう

気を付けていたのですが、知らずにかかっていたみたいです。

今月中に必ずここでできたポートフォリオを公開できるように頑張ります。
Rails.application.credentials.xxxxx[:yyyy]が空になる時の対策

# Rails.application.credentials.xxxxx[:yyyy]
Credentialsもしっかり設定しているし、rails cコマンドではちゃんと読み込める
しかも共同開発してる他のメンバーでは読み込める
でも私のhttp://localhost:3000/ 環境では中身がないとエラーが出る

# 原因
はっきりわかってないけれど、恐らく権限の問題

# 対策
すでにあるmaster.keyを消して、同じ文字列で作り直す
競プロの基本事項確認~順列生成の方法~

[この記事](https://qiita.com/DaikiSuyama/items/ee09c6d3dea1f3f49246)で解説したAtCoder073のD問題においてn!(n<=8)通りの順列を生成してそのそれぞれについて操作を行うという問題がありました。順列生成はAtCoderで良く出ますが、書き方を忘れがちなのでここでまとめておきます。

#[1]Pythonの場合
itertoolsモジュールにあるpermutationsを用います。
ここでは0~3が入った配列についてその順序を並べ替えた順列を全て生成させて考えます。

```bash
>>> import itertools
>>> t=[i for i in range(4)]
>>> itertools.permutations(t)
<itertools.permutations object at 0x104dc0af0>
>>> list(itertools.permutations(t))
[(0, 1, 2, 3), (0, 1, 3, 2), (0, 2, 1, 3), (0, 2, 3, 1), (0, 3, 1, 2), (0, 3, 2, 1), (1, 0, 2, 3), (1, 0, 3, 2), (1, 2, 0, 3), (1, 2, 3, 0), (1, 3, 0, 2), (1, 3, 2, 0), (2, 0, 1, 3), (2, 0, 3, 1), (2, 1, 0, 3), (2, 1, 3, 0), (2, 3, 0, 1), (2, 3, 1, 0), (3, 0, 1, 2), (3, 0, 2, 1), (3, 1, 0, 2), (3, 1, 2, 0), (3, 2, 0, 1), (3, 2, 1, 0)]
>>> list(itertools.permutations(t,2))
[(3, 2), (3, 1), (3, 0), (2, 3), (2, 1), (2, 0), (1, 3), (1, 2), (1, 0), (0, 3), (0, 2), (0, 1)]
```

上記のようにイテラブルなオブジェクトである配列(permutationsの第一引数はイテラブルなオブジェクト)の順序を並べ替えて**タプルに格納した**順列の全通りが生成されているのが見てとれます。
また、permutationsの第二引数では$ _n P _r $の式におけるrを指定することができます(デフォルトではr=nで、ここではr=2より$ _n P _2 $が求まります。)。

#[2]C++の場合
algorithmライブラリにあるnext_permutationを使います。
ここでも0~3が入った配列についてその順序を並べ替えた順列を全て生成させて考えます。
Pythonでは順列を全て生成して考えていましたが、C++では昇順ソートしたものを初めの順列としてnext_permutation関数を適用することで**その次の順列**を生成するという方法をとります。そして、next_permutation関数を適用する順列が最後の順列(降順ソートしたもの)であった場合、初めの順列へと戻ります。また、このとき、next_permutation関数を適用する順列が最後の順列でない場合はfalseを最後の順列の場合はtrueを返すのでその返り値を利用してdo-while文を用いることで全ての順列に対してなんらかの操作をすることができます。
さらに、do-while文を用いる場合は最初の順列から始めないと全ての順列に対する操作ができませんが、順列が何通りあるかをあらかじめ計算しておけばその回数分だけnext_permutation関数を適用することで全ての順列に対してなんらかの操作をすることができます。


```c++
#include <iostream>
#include <algorithm>
#include <vector>
using namespace std;
int main() {
  int n=4;
  vector<int> v(n);
  //1刻みで格納できる関数、便利
  iota(v.begin(), v.end(), 0);
  do{
    //vは次の順列になる
    for(int i=0;i<n;i++){
          //なんらかの操作
    }
  }while(next_permutation(v.begin(),v.end()));
}
```

#[3]まとめ
PythonとC++それぞれの場合の順列生成について最後に重要な点をまとめておきます。

①Pythonの場合
**・itertoolsモジュールのpermutationsを使う
・全通りの順列をタプルで生成する(非破壊的)
・それぞれの順列にはfor文でアクセスする**

②C++の場合
**・algorithmライブラリのnext_permutationを使う
・次の順列に置き換える(破壊的)
・昇順ソートした順列から始めるときはdo_while文でアクセス
　それ以外の順列から始めるときは順列の数を計算してfor分でアクセス**
コマンドメモ（scp,cat,vi,ls)


フォルダ事コピーする場合は、オプション -r
ファイル単独ならいらない。

### SCPで踏み台からSSH先へフォルダ事コピー

scp -r /home/hoge(名前)/フォルダ1/フォルダ2/フォルダ3/フォルダ4/フォルダ5/* hoge@hoge-hoge-web-9999:/home/hoge(名前)/フォルダ1/フォルダ2/フォルダ3/フォルダ4/フォルダ5/


### SCPで踏み台からSSH先へフォルダ内を指定ファイルをコピー

scp /home/hoge(名前)/フォルダ1/フォルダ2/aaa.txt hoge@hoge-hoge-web-9999:/home/hoge(名前)/フォルダ1/フォルダ2/aaa.txt


参考URL
https://www.itc109.com/knowledge/communication/ssh-file-copy


**ファイル編集**
vi ファイル名

**ファイルの中身**
cat ファイル名


**隠しファイルを表示**
ls -a 

**パーミッション確認**
ls -l

**パーミッション付与**
chmod XXX ファイル名


実行権限：1(001)
書込権限：2(010)
読込権限：4(100)

所有者、所有グループ、その他、の順番
777(フルコントロール)
[Rails]serializeなcolumnのdefault値を空の配列にしたい。

# やりたいこと

```ruby:migration
class Users < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|
      t.integer  :id
      t.string   :hoges, null: false, default: []    # これ
    end
  end
end
```

でもこれじゃ

```
== 20200109052420 Users: migrating ============================
-- create_table(:search_histories)
rails aborted!
StandardError: An error has occurred, all later migrations canceled:

can't quote Array
/Users/lyrical_school/project/disappearing_planet/db/migrate/20200109052420_create_users.rb:3:in `change'
bin/rails:9:in `require'
bin/rails:9:in `<main>'
```

# 空配列を登録した時って何が保存されるんだっけ？
DB確認してみる。

`--- []`
が登録されてた。

# じゃあそれをdefaultに設定してみる。
```ruby:migration
class Users < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|
      t.integer  :id
      t.string   :hoges, null: false, default: '--- []'
    end
  end
end
```

# 完璧。
殴り書きだから後日ちゃんとまとめる。まとめないかも。
【ふくだ学習録】ゼロから作るDeepLearning part4【9日目】

# ふくだ学習録とは？
ふくだが学習したことの備忘録。
目に見える形で残すことによってやる気を出す個人的な作戦です。
他人に見せるように書いているわけではないので、すごく読みにくいです。

### 読了した本
[データベースエンジニア養成読本 [DBを自由自在に活用するための知識とノウハウ満載!]](https://www.amazon.co.jp/dp/4774158062/ref=cm_sw_r_tw_dp_U_x_FPphEbQFPPQRM )

# ゼロから作るDeepLearningを読んで

### ニューラルネットワークの学習
ニューラルネットワークの学習とは、データから重みパラメータの値を自動で決定すること。
つまりデータを大量に集めれば集めるほど、重みパラメータが正確になっていく。

### パーセプトロンの収束定理とは？
「パーセプトロンでは、線形分離可能な問題であれば、データから自動で学習することが可能」という定理。

福田的噛み砕きは、
複数階層を持っていないパーセプトロンでは、出力層にくる重み付き入力値は、全て一次関数の形を取っている。
線形可能な問題　＝　一次関数の和で表現できるもの　＝　パーセプトロンで表現できるもの
ということになるため、データから自動で学習することが可能。って感じで Q.E.D.(だと思ってる)

[単純パーセプトロンの収束定理と限界](http://starpentagon.net/analytics/simple_perceptron/)

### SIFT、SURF、HOGとは？

- **SIFT**
Scale-Invariant Feature Transform。特徴点検出・特徴量記述を行うアルゴリズム。

- **SURF**
Speeded-Up Robust Features。SIFTは比較的遅いアルゴリズム。それを高速化させるために考えられたアルゴリズム。

- **HOG**
Histograms of Oriented Gradientsは、局所領域 (セル) の画素値の勾配方向ヒストグラム化して特徴量としたもの。

（おそらく）SIFT、SURF、HOG、全て文脈次第でアルゴリズムのことを指しているのか特徴量を指しているのか変わってくる。
まずSIFTを理解するためには下記サイトを見るべし！

[画像処理の数式を見て石になった時のための、金の針](https://qiita.com/icoxfog417/items/adbbf445d357c924b8fc)

### SVM、KNNとは？

- **SVM**
データを分類するための境界線を決定する際に、境界線から一番近いサンプルデータまでのマージンの和が最大になる線を境界線とする手法。分類も回帰にも利用できる。
[サポートベクターマシーン(SVM)](https://qiita.com/ishizakiiii/items/f6909696c616fd6294ca#1-3%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%83%99%E3%82%AF%E3%82%BF%E3%83%BC%E3%83%9E%E3%82%B7%E3%83%BC%E3%83%B3svm)

- **KNNk（近傍法）**
自分から最も近い複数のデータのクラスの多数決で、分類する手法。
単純すぎて怠惰学習という異名を持つ。
[k近傍法 ( KNN )](https://qiita.com/ishizakiiii/items/f6909696c616fd6294ca#1-9k%E8%BF%91%E5%82%8D%E6%B3%95--knn-)

どちらもデータを分類分け（クラス分け）する際の手法。

### OpenCV
画像処理するためのライブラリ。
機械学習もできると書いてあるけど、テストデータ作成とか、学習モデル作成とかもできてしまうのか…？
今度、実際使ってみて、何ができて何ができないのか体験してみる。

[画像処理ライブラリ OpenCV で 出来ること・出来ないこと](https://www.slideshare.net/FukushimaNorishige/opencv-67214568)


### 過学習とは？
特定のデータセットだけに過度に対応して状態のことを指す。
過学習を避けることは、機械学習の重要な課題。

### よく使用される損失関数
2乗和誤差や交差エントロピー誤差などがよく使用される。


# 今日の一言
勉強しててわかった。
自分が勉強したいのって「機械学習のための関数作成」じゃなくて「特徴量エンジニアリングの手法」ってことに気づいた。

機械学習自体は、

- **パターン分析の理論をざっくり理解して、各特徴量に対してどのような分析を行えば良いのかを把握する。**
- **実際の分析作業などは、（精度が高そうな）外部ツールやライブラリを使用**

って感じで対応するのが、いちばんコスパ良さそう。
（ってか正しい推論モデル作れるようになる、ってのを目指すのは無理なんちゃうかな？）

**追記**
「正しいニューラル設計ができるようになろ！」って思ってたけど、それ自体が不要なんかも。
下記記事みたいに、ランダムにニューラルネットワーク作ってもらうようにした方が、性能あがるんかも。
（人のバイアスかからんくなるから、まぁ確かにそのほうが元々の思想近いし、精度も上がるならその方が良いかって感じではある）

[ランダムに接続されたニューラルネットワークが手動設計を上回る？](https://ai-scholar.tech/others/randam-ai-156/)
Laravleセットアップまでにハマったことメモ

Laravleのインストール、何回かやってますが必ずつまづきます…
つまづいたことなどを随時メモりたいと思います。

# 環境としては
CentOS７
Apache2.4
php７
あたりで...

dockerでも何回か作りましたがここでは触れません。

# phpの必要パッケージをyum install する際、php-xmlがインストールできないことがある
[参考](https://qiita.com/k00j/items/4eacefc5026c7b214cf2)

個別にインストールすれば入った。

```
yum install php-xml
```

# httpd.confでアクセス許可しなければならない
特にVirtualHostで複数ドメイン扱ってた場合はVirtualHostごとに記載が必要。

```bash:httpd.conf
<Directory "/home/laravel/src/">
    Require all granted
</Directory>
```

# パーミッション関係
[ここ](https://qiita.com/Todate/items/d0d5c38f62621711a79b)のやり方がよさげだった。


# gitからソース持ってきた場合、.envがない

```
cp .env.sample .env
```

## cp .env.sample .env しただけではダメ

```
 php artisan key:generate
```
限定公開クラスターのGKEノードにサクッとSSHする方法

# 限定公開クラスターとは

[公式ドキュメント](https://cloud.google.com/kubernetes-engine/docs/how-to/private-clusters)にもあるように、限定公開クラスター(Private cluster)は、KubernetesのワーカーノードにパブリックIPを割り当てずにGKEクラスターを作成できる機能です。

限定公開クラスターを使うことで外部公開される箇所が減りAttack surfaceを狭めることができるほか、Google Cloudの他の機能との連携を内部NW経由で行うことができるようになります。

# 限定公開クラスターの面倒なところ

たまにワーカーノードにSSHしたくなるのですが、限定公開クラスターではワーカーノードにPublic IPが割り当てられないので、@sonots氏の[こちらの記事](https://qiita.com/sonots/items/6e2a57af945cf0daedd4)のような対応が必要でした。

これもこれで便利なのですが、Podを展開しないといけないのは面倒です。

# Cloud IAPを使ったTCPトンネリング

[Cloud IAP](https://cloud.google.com/iap/)はGCPにおける認証認可の仕組みで、いわゆるGoogleログイン機能を使ってGoogle Cloud上に展開したアプリケーションへのアクセス制御を行ったり、VMへのログインなどを制御できる仕組みです。これは原理的にはProxyの役割を果たすので、**外の世界と中の世界を繋ぐ役割**も果たしています。

[Cloud IAPを使ったTCPトンネリング](https://cloud.google.com/iap/docs/using-tcp-forwarding)を使うと、Cloud IAPによって認証されたユーザーに対して任意の VPC内リソースのTCPポートをトンネルすることができます。これを応用し、プライベートIPを持つVMにSSHすることも可能です。

GKEのワーカーノードの実態はGCEなので、同様のことが実現できます。

まず↓ここでCloud IAPを有効化しておきます。
https://console.cloud.google.com/apis/library/iap.googleapis.com/

```bash
# プロジェクト名のセットをする
gcloud config set core/project プロジェクト名

# Cloud IAPのグローバルIPアドレス範囲からのSSHを許可するFWルール
gcloud compute firewall-rules create allow-iap-forwarding-ssh \
  --network=vpc-network \
  --allow=tcp:22 \
  --source-ranges=35.235.240.0/20

# 該当のノードに、Cloud IAPのトンネル経由でSSHする。Firewall ruleがある場合はフラグを指定しなくてもデフォルトでIAPを使ってくれるらしい
gcloud beta compute ssh --zone "該当ノードのゾーン" "GKEのワーカーノードのインスタンス名"
```

# できた

べんり
ゲーム2を作ってみた

タイトルは`yui2`となっています。 

![](https://syui.cf/img/game/logo2.png)

https://syui.cf/imgame2

まずロゴを作りました。数字の部分、最初はフォントを使おうと思ったんですが、めんどくさいですしね、でもしっくりこなかったので、自分で作る羽目になりました、2です。

今回もアイテムから背景、キャラクター、シナリオなどを設計しました。

例えば、モンスターボックスというアイテムが登場するのですが、以下のようなデザインから構成されています。なんとなく線を引いたり、消したり、塗りつぶしてみたり。

![](https://github.com/syui/mstdn.page/raw/master/img/mastodon/media_attachments/files/000/000/096/small/356b0cee23c9174e.png)

シナリオに関しては、最初のシリーズで謎だった部分の伏線がいくつか回収されていると思います。

イラストで描いている背景、アイテム、キャラクターは方向性がそれぞれに決まっているのでやりやすいです。

やらないこととやることを決めていて、やらないことはやりません。それは面白くないことだったり、めんどくさいことだったり、やたら時間がかかることだったり。

シナリオに関しては、やはり非公開で書いていた小説が原案になっています。シリーズ1では暗くなってしまうので、バッサリと切り捨てた部分を少し拾いました。

キャラクターに関しては、キョウスケ、ポンタ、オクトカットはゲームからの参加で、それによって原案キャラも若干影響を受けていると思います。

![](https://syui.cf/img/game/c_yui_tensi.png)

ここから少しキャラクターに関する話をします。

例えば、`yui`に出てくるキャラで私はどれに当てはまるのかってよく聞かれるんですが...うそですきかれたことありません！で、自分がどのキャラに当たるかと言うとそりゃもちろん、アイですよ！...という冗談は置いといて、私はおそらく、誰でもあって、誰でもないのだと思います。

私は以前、こんなコメントを見たことがあって、作者が自分のキャラのセリフにはっとさせられたという話に「作者は自分の思いをキャラAに語らせていて感動的」とコメントがついていました。

これですね、大半の人がコメントと同じような意見を持つと思うんですけど、私が思ったのはおそらくそうではないなと。

作者が作ったキャラでも、あいつらは勝手に動いて勝手にしゃべるので、特に作者がこうしゃべらせているみたいなことって少ないです。作者は単にキャラが勝手に喋ったそれをですね、メモしたり、記録したりですね、するだけですから、おそらく、本当に自分が作ったキャラのセリフにはっとさせられたんだろうなーって思ったんです。

一方で、そうは言っても作者が作ってんでしょと言われると、確かにそうで、それはやはり、どこかにあるからだと思うんです。

なので、私は、どのキャラでもないし、どのキャラでもあるなあと今の所はそう思ってたり。

話を変えて、次はモンスターの話です。

![](https://syui.cf/img/game/m_torimu.png)

(本作ではまだ未登場)

今回は、モンスターが登場しますが、モンスターを作るの結構大変でした。特に、アイテムの方向性でデザインするのか、キャラクターの方向性でデザインするのかで迷いました。なので、その中間をとって、基本は四角や三角の図形で構成するものの、やはり躍動的に表現する部分も可という方向で行くことにしました。各々の部品もシンプルにすることを心がけ、あまり複雑にしてしまうと、あとで描くの大変ですからね...。

あと、配色ですが、私は1キャラ、1フィールド、1アイテムにつき3,4色と決めているところがありますので、モンスターも同じ。それでも配色は、難しかったし、悩みます。ただ、鳥なら鳥、ネコならネコ、ドラゴンならドラゴンで、一番に思いつく色ってあるじゃないですか。私の場合、それを基本色にしました。

最後にキャラクター紹介ページを作りました。

https://syui.cf/gamechara/

これは、漫画とか読む人はわかると思うんですが、冒頭にありますよね。私は全く見ないんですけど、というかゲームも説明書すら読まなかったり...でも作る側からすると、やっぱり「わかりにくいかな、こいつ誰ってなったりしない、途中から入って大丈夫？」みたいなことをちょっとだけ気にします...うそ、すごく気にします。なので、作りました。

ゲーム作るのとか、面倒でしたけど、でも、面白かったですよ、楽しかった。

次はどんなお話にしましょうか。
[Rails] ActiveAdmin編集フォームをカスタマイズする！

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#編集できる項目をカスタマイズしたい
ActiveAdminで作成した管理画面で編集できる項目を指定して表示するのが今回の目的です！

[公式ドキュメントによると](https://activeadmin.info/5-forms.html/)
formの出力を調整するやり方が書いてありました。

```app/admin/users.rb
ActiveAdmin.register User do
 省略〜
  PERMIT_PARAMS = [:name, :email, :gender, :age] # 編集を許可するフィールドを定義
  permit_params PERMIT_PARAMS

  form do |f|
    f.semantic_errors # エラーメッセージ表示
    f.inputs do
      PERMIT_PARAMS.each {|attr| f.input attr} # 入力フィールドを表示
    end
    f.actions # submit/cancelボタンを表示
  end
end

```

これで完成！ActiveAdmin凄いですね！
gitlab-ciのscriptでfor文を使うとエラーになる時の対応方法

# gitlab-ciのscriptでfor文を使うとエラーになる時の対応方法

## はじめに

gitlab-ciのscriptで何の変哲もないfor文を書いたつもりが、エラーになってくっそハマったので、
同じ状況になっている人を救うためにも公開します。

## 環境

Amazon Linux 2

```shell

# gitlab-runner -v
Version:      11.6.0
Git revision: f100a208
Git branch:   11-6-stable
GO version:   go1.8.7
Built:        2018-12-22T11:56:10+0000
OS/Arch:      linux/amd64
```

## 問題となったスクリプト

一見、何も問題が内容に見える `script`。 `test.sh`みたいな感じでshファイルにしたら問題なく動く。

```yml:gitlab-ci.yml

variables:
  TARGET: "apple banana cherry"

test:
  stage: test
  script:
    - for target in ${TARGET} ; 
    - do
    - echo $target
    - done
  tags:
    - test
  only:
    - master

```

## エラー内容

しかし、scriptを実行すると以下のエラーが発生

```
bash: eval: line 111: syntax error near unexpected token `echo'
ERROR: Job failed: exit status 2
```

## 対応方法

`do`を改行しないで書くと問題なく動く

```yml:gitlab-ci.yml

variables:
  TARGET: "apple banana cherry"

test:
  stage: test
  script:
    - for target in ${TARGET} ; do # ←doを改行しない
    - echo $target
    - done
  tags:
    - test
  only:
    - master

```
【Rails】簡単にDatetimepickerを使う方法

# はじめに
個人的にオススメなDatetimepickerについて、紹介しようと思います。
導入がめちゃくちゃ簡単です。

# できあがり例
こんな感じで、日付と時間を選ぶと実装することができます。

<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/60e741db-0ce2-875d-4439-436bd7fdd06a.png">

個人的にこのdatetimepickerが優れていると感じる点は以下です。

* __はじめからカレンダーと時間が表示されていること__
* __ボタンをクリックする回数が2回で入力ができること__

他のdatetimepickerだと、日付をクリックしないと時間の欄が表示されないため作業量を一瞬で把握できません。
微妙な差ではありますが、ユーザーが少しでも楽な方を考えました。


# 使い方
まず、```GemFile```に以下の```gem```を記載して、```bundle install```をしてください。

```Ruby:GemFile
gem 'jquery-datetimepicker-rails'
```
```
$ bundle install
```

次に、```app/assets/stylesheets/application.css```に以下の１行を追加してください。

```css:app/assets/stylesheets/application.css
*= require jquery.datetimepicker
```


次に、```app/assets/javascripts/application.js```に以下の１行を追加してください。
（コメントはそのままで大丈夫です。）

```javascript:app/assets/javascripts/application.js
//= require jquery.datetimepicker
```


__下記の２行を追加することで、日本語対応のdatetimepickerを適用する準備が整いました。__
（私の環境では日本語対応になりませんでした。どなたか分かる方がいれば教えていただきたい。。）

application.js に 下記を書いていますが、各モデルのみに適用したい場合はcoffee scriptに書いても問題ありません。（ただし、その場合はcoffee scriptへの変換が必要。）

```javascript:app/assets/javascripts/application.js
// 日本語化対応用
$.datetimepicker.setLocale('ja');

// datetimepickerクラスにdatetimepickerを適用する。
$('.datetimepicker').datetimepicker();
```

今回は一例として、postモデルのpost_datetimeカラムにdatetimepickerを適用しています。
ポイントは、__class に datetimepicker をつけること__です。そうすることでその部分に適用されます。
slimに馴染みのない方、ごめんなさい。。

```slim:new.html.slim
= form_for @post do |f|
  = label :post, :post_datetime
  = f.text_field :post_datetime, value: "", class: "datetimepicker", autocomplete: "off"
// class に datetimepicker をつけるとその部分に適用される。
```

# まとめ
いかがでしょうか。導入は簡単でしたでしょうか。
不備などがあれば、申しつけください。

# 参考
* GitHub(jquery-datetimepicker-rails)
    * https://github.com/Envek/jquery-datetimepicker-rails

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
AutoCAD スクリプトファイルの使い方

## スクリプトファイルとは
- AutoCADの環境設定やコマンドを自動実行するための操作を記述したテキストファイル
- AutoCAD LT でも使用可能
- Windowsのメモ帳で作成可能

## スクリプトファイルの実行方法
- 起動時に呼び出し
- SCRIPT[スクリプト実行]コマンド
- SCRIPTCALL コマンド
- スクリプトファイルをAutoCADの作図領域に、ドラッグアンドドロップする

## スクリプトファイル作成方法
- テキストエディタを使って、コマンドラインに入力するコマンドを順番に記述する。
- 拡張子を .scr にして保存

## スクリプトファイル作成時の注意点
- スクリプトの空白は [Spacebar] キーを押す動作と同じになる
- スクリプトの改行は [Enter] キーを押す動作と同じになる
- 最後に [Enter] キーが必要なコマンドは、最後に空白を入れるか、改行する必要がある
- ダイアログ ボックスを表示するコマンドは実行できない。（但し、ほとんどのコマンドはプロンプトを表示する代替バージョンが用意されているので、そちらを使う）
- コメントは行の始めにセミコロン" ; " をつける。
- スクリプトは 1 つのコマンド グループとみなされるため、U[一回元に戻す]コマンドを 1 回入力するだけで元の状態に戻すことができる。

## 簡単な例
#####【例１】座標 20,30 から 座標 50,100 まで線分を作成する
```
LINE
20,30
50,100

;必ず最後の行は改行する
```

#####【例２】座標100,100を中心とした半径50の円を作成
```
CIRCLE
100,100
D
50

;必ず最後の行は改行する
```

#####【例３】新しい画層を作成する
```
-LAYER
M
テスト画層

;必ず最後の行は改行する
;日本語を読み込ませる場合は、文字コードを"Shift_JIS"にする 
```
C# & Unityで小型衛星姿勢制御ツールを作ってみた①

趣味で宇宙開発を行う団体「リーマンサット・プロジェクト（Ryman Sat Project=rsp.）」がお送りする新春アドベントカレンダーです。
9日目の記事です。インデックス記事はこちら。

こんにちは。超小型人工衛星「RSP-01」の姿勢制御を担当している よねやん（@ytakuro0926）です。

前々からUnityに興味があって、現状の姿勢制御のシミュレーションツールをUnityで実装して姿勢状態を3Dで表現したら色々と分かりやすくなるのではと思いました。
というのも、姿勢制御は最初とっつきにくいので汗
もちろん、ある程度理解している人に向けて定量的な解析にも使うので3Dと一緒にグラフも表示したいと思っています。

コンセプトとしては
####小型衛星開発をする学部生が使いやすく且つ実用的であること！
コンセプトにのっとっているため、大型の衛星に需要のある軌道計算やスラスター考慮はいったん拡張開発においておこうと思っています。
軌道計算は同じくリーマンサットのだいごさんにお願いしようかな。。。

当初現在考えていた機能はこんな感じです。

######ツール全般機能
　・CADデータを読み込ませて実際の衛星の見た目で3D表現する。
######衛星データ解析機能
　・衛星から落としてきたジャイロデータを読み込ませてUnityで姿勢を表現する。

######姿勢制御シミュレーション機能
　・衛星のパラメータを入れて姿勢制御のシミュレーションをする。
　・CADデータを読み込ませてユーザーの物理量の入力を省略する。


この記事を書く前からUnityをインストールしていじっていたのでインストール方法はスキップします。すみません。興味のある方はぐぐってください。私は本買って勉強しています。

さて、Unityの画面はこんな感じ。
<img width="648" alt="unity画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548343/c6623444-15ac-78a7-a889-f0c134b7a618.png">

Unityの画面でオブジェクト（画像でいうところの球体や立方体）を作成して、ここに色や物理演算のクラスを設定。
んでそれらのオブジェクトにC#で書いたソースコードを食わせて具体的な動きの指示を与えるらしい。

それで色々とみてみると、オブジェクトの中にカメラがあり、どうやら複数もカメラの設定ができそう。
これなら衛星を見つめるメインカメラと衛星搭載を模擬したサブカメラを同時に表示できそう。

オブジェクトの設定やコンパイルはある程度わかったのでUIの設定を勉強したら実装にうつっていこうかなと思ってます。

んで、軽くUIを勉強してみて、とりあえずデザインのプロトタイプだけさっくりと作成。
<img width="349" alt="プロト画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548343/a474a222-61dc-79ae-4322-ec86bb82dd0b.png">

イメージとしては右側にインプットの項目をおいて、メインに衛星を置いて、その下に定量的なグラフを表示しようかなと。
できたら上の方に衛星に搭載したカメラのビューをおけたらなと思ってみたり。

具体的な実装は次回投稿にしようと思います。

リーマンサット・プロジェクトは「普通の人が集まって宇宙開発しよう」を合言葉に活動をしている民間団体です。
他では経験できない「宇宙開発プロジェクト」に誰もが携わることができます。
興味を持たれた方は https://www.rymansat.com/join からお気軽にどうぞ。

次回は@OzoraKoboさんの「RSP-00「激レア」開発記 制作の軌跡」です。
SereneLinux(Ubuntu18.04 Desktop)でSoftwareRAID0

SereneLinuxをRAID0にインストールするという備忘録です。応用次第でRAID1とかもできると思います。
#SereneLinuxについて
日本人が開発しているubuntu18.04ベースのLinuxです。
[SereneLinuxのホームページ](https://serenelinux.com/)

#RAID0の構築
RAID0の構築について。今回は、mdadmで作ったRAID0をルートパーティションとして使用します。
### パーティションの作成
今回は128GBと120GBのSSD、２つでRAIDを構築します。
RAID0の場合、必要なパーティションは、下の３つです。**（RAID1の方は別途調べてください。）**

- EFIパーティション
- ブートパーティション
- RAID用パーティション

今回は128GBのSSDを、下のように分けます。

- EFIパーティション 128MiB
- ブートパーティション　700MiB
- RAID用 残り全部

120GBの方は全てRAID用パーティションとして使います。
今回はGpartedで作成しました。
### 注意

- EFIパーティションを作るときは、FAT32で作成して、フラグをboot,espに設定してください。
- ブートパーティションは、EXT4で作成してください。

### RAIDの作成
大抵のubuntuベースのLiveCDにはmdadmが入ってません。
そこでまず、mdadmをインストールします。

```
$ sudo apt update && sudo apt install mdadm
```
次にRAIDを構築します。

```
$ sudo mdadm -C /dev/md0 -l[RAIDのレベル] -n[デバイスの数] [RAID用パーティション1] [RAID用パーティション2]
```
RAID0の場合は、"-l"の後ろの数字を"0"にしてください。
2つのディスクでRAIDを構築する場合は、"-n"の後ろの数字をディスクの数にしてください。
"-n"の後ろにRAIDで使用するパーティションを指定してください。
今回は作成したRAID0をXFSでフォーマットしました。
ファイルシステムはお好みのを使用してください。（分からなかったら、EXT4が無難です。）
# インストール
インストーラを起動して指示に従ってインストールしてください。
終わったら、**"試用を続ける"を選択してください。**
# インストール後の設定
このまま再起動すると起動しないので、再起動する前にシステムをいじる必要があります。
chrootでシステムをいじるれるよう準備します。

```
$ sudo mount [作成したルートパーティション] /mnt
$ sudo mount [作成したブートパーティション] /mnt/boot
$ sudo mount [作成したEFIパーティション] /mnt/boot/efi
$ sudo mount -t proc none /mnt/proc
$ sudo mount --bind /dev /mnt/dev
$ sudo mount --bind /sys /mnt/sys
$ sudo mount --bind /run /mnt/run
```
chrootでシステムに入ります。

```
$ sudo chroot /mnt
```
 mdadmをインストールします。

```
# apt update && apt install mdadm
```
<details><summary>ここで、mdadmのインストールに失敗したら</summary><div>

```
$ sudo cp /etc/resolv.conf /mnt/etc
```
</div>chrootから出て、上のコマンドを実行すると成功するかもしれません。</details>

一旦、chrootから出て、/mnt/etc/mdadm/mdadm.confを編集します。

```
$ sudo mdadm -D --scan >> /mnt/etc/mdadm/mdadm.conf
```
再び、chrootに入って

```
$ sudo chroot /mnt
```
initramfsの更新とgrubのインストールを行います。

```
# update-initramfs -u && grub-install [EFIパーティション]
```
これで再起動して、起動すれば成功です。

# まとめ
~~正直、RAID0をルートパーティションとして使用する人いる?~~
Q:そもそもなんで、ubuntu serverとかFedoraとかArchとか使わないの?
A: 長いので、知りたい人だけ見てください。↓
<details><summary>なんでこんなことしようと思ったの？</summary>
**要約するとintelとNECのせい。**
自分の使っているノートパソコンにintelのwifiが乗っているのだが、これがNECのルーターと相性が最悪なのである。windowsのときはなぜか大丈夫だったのだが、Arch、Fedora、debianと試してみたのだが、**インターネットを使うとwifiが切れる。**これだけならまだ許容範囲。
しかし、**何故かルーターを再起動しないとルーターがインターネットに繋がらなくなる**という結構ヤバイ不具合を引き起こすのである。
（なぜかubuntuは大丈夫だったので今は、ubuntuベースのSereneLinuxを使ってます。)
（個人的にはカーネルが原因かなと思っている。）
Server版使えば?
まぁ、こういう話になるが、**新しいのも古いのもインストーラーがwifiを認識しない。**
なので、こういうことをすることになりました。みんなも気をつけよう相性問題。</details>
### SereneLinuxの感想

- **軽い**
- **SetupとかStartdashとかがLinux初心者には良いと思った。**

今まで、ubuntuとかzorinとかPop!_osとか色々つかってきましたが、gnomeじゃないので軽い。
zorin liteとかxubuntuとかのxfceデスクトップのディストロもありますが、zorin liteは目玉のzorin appearanceが使えないという不具合がありました。
（そもそも色が合わなかったでやめました。（ダーク+ブルーって見づらいね。））
スタイリッシュなxfceのディストロが増えたのは個人的には嬉しいです。（~~xubuntuはダサかったので論外~~）

# ただのわがまま
ubuntuにもFedoraみたいにデスクトップ版でもRAIDが簡単にできるといいなぁ
# 参考
http://blog.seishiono.net/entry/2014/05/03/223948
https://askubuntu.com/questions/469209/how-to-resolve-hostnames-in-chroot
https://wiki.archlinux.org/index.php/Chroot#Using_chroot
https://ankyo.blog.ss-blog.jp/2011-10-24
Spockでの条件付き判定

Spockでテストコードを書くとき、1つのメソッドに対してテストケースが複数ある場合、whereブロックを使ってまとめて書けるとスッキリして見やすくなる。

```groovy:before
def "StringUtils#split()"() {
	when:
	def result1 = StringUtils.split("a")

	then:
	result1.size() == 1

	when:
	def result2 = StringUtils.split("a b c")

	then:
	result2.size() == 3
}
```

```groovy:after
def "StringUtils#split()"() {
	when:
	def result = StringUtils.split(str)

	then:
	result.size() == size

	where:
	str     || size
	"a"     ||    1
	"a b c" ||    3
}
```

が、場合によってはwhereブロックでは表現できないケースもある。例えばメソッドの戻り値がnullの場合とそうでない場合とで判定を分けたい、とか。

if文とかで分岐させりゃいいのか？、と思ってやってみる。

```groovy
def "StringUtils#split()"() {
	when:
	def result = StringUtils.split(str)

	then:
	if (result != null) {
		result.size() == size
	}

	where:
	str     || size
	"a"     ||    1
	"a b c" ||    3
	null    || null
}
```

テストは成功するのでめでたしめでたし、と思いきや、whereブロックのsizeの値が正しくなくてもテストは成功してしまう。if文じゃなくてswitch文とかでも同じ。

```groovy
	where:
	str     || size
	"a"     ||   11
	"a b c" ||   33
	null    || null
```

危険！
このような場合は明示的に`assert`を使用することで正しく動作する。

```groovy
	then:
	if (result != null) {
		assert result.size() == size
	}
```

あるいは、三項演算子を使うという手も、なくはない。

```groovy
	then:
	result != null ? result.size() == size : true
```

これでも一応ちゃんと判定はしてくれる。
見やすいか見にくいかは、あなた次第。

なお、使用したSpockのバージョンは1.3。
Day7 コメント機能・いいね機能

今日は主にコメント機能といいね機能を実装することができた。
ロジックや学んだことは今日から「課題リスト」に記載することにしたので、ここでは感想等を書くことにしたい。

#コメント機能
コメント機能はuser_idを外部キーとするCommentsテーブルを作成してそれを利用したが、取り組む前にしっかりとそれができるかどうかをイメージしてテーブルを作ったりすることは非常に重要であると思った。
いきなり作って試すのではなくて、しっかりとイメージして土台を固めることによって、スムーズにできた気がする。

#いいね機能
Progateでいいねを学んだことを覚えていたので、Progateを見て実装した。
Progateで学習したときは正直、よくわからないことが多かったが、今日実装してみて初めて学んだ時と比べて大きく理解することができるようになっていた。

#これから
・なにか間違えたコードを書いたり、テーブルを作成したときの対処法（ロールバック？）等がいまいち不透明で、不安なままやっているので知っておきたい。
・デバックも今はコードを書いて、実際にページに変数を出力したりしてやっているが、Rails Tutorialでもデバッグの方法があったのと、他にも便利なデバックの方法があるらしいので取り入れたい。
・明日はとりあえずコメント機能に削除をつけることと、問合せページを完成させたい。
Railsチュートリアルでfakerがインストールできない場合の対処法

Railsチュートリアルの10章でgemに「 faker (= 1.7.3) 」を追加し、```bundle install```
しようとすると

```
Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "i18n":
  In snapshot (Gemfile.lock):
    i18n (= 1.8.2)

  In Gemfile:
    rails (= 5.1.6) was resolved to 5.1.6, which depends on
      activesupport (= 5.1.6) was resolved to 5.1.6, which depends on
        i18n (>= 0.7, < 2)

    faker (= 1.7.3) was resolved to 1.7.3, which depends on
      i18n (~> 0.5)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.
```
というエラーがでる。

解決のために```bundle update```したり、バージョンの指定を広くしたりしたが、インストールできなかった。

なので仕方なく

```Ruby:Gemfile
gem 'faker', '1.7.3'
```
から

```Ruby:Gemfile
gem 'faker'
```
にしてバージョンを指定しないことで、無事インストールができた。
（swift）画像のデータサイズを縮小する方法（UIImage）

#方法

`UIGraphicsImageRenderer`を使用することで、画像のデータサイズを変更することができます。

以下の`Extension`を使用することで、`resizedメソッド`が使えます。
(参考：　https://stackoverflow.com/questions/29137488/how-do-i-resize-the-uiimage-to-reduce-upload-image-size)

```swift:extension
extension UIImage {
    //データサイズを変更する
    func resized(withPercentage percentage: CGFloat) -> UIImage? {
        let canvas = CGSize(width: size.width * percentage, height: size.height * percentage)
        return UIGraphicsImageRenderer(size: canvas, format: imageRendererFormat).image {
            _ in draw(in: CGRect(origin: .zero, size: canvas))  
        }
    }
}
```

```swift:使用例
var usersImage = UIImage()
//ここでは、UIImagePickerControllerを使用しています。
let pickerImage = info[UIImagePickerController.InfoKey.originalImage] as? UIImage
        
//pickerで取得したUIImageのサイズを90％カットする。
let resizedImage = pickerImage?.resized(withPercentage: 0.1)

//usersImageに代入する
usersImage = resizedImage
```


#`UIGraphicsImageRenderer`とは？
>A graphics renderer for creating Core Graphics-backed images.
（和訳：　`Core Graphics`-backed画像を作成するためのグラフィックスレンダラー。）
(引用：　https://developer.apple.com/documentation/uikit/uigraphicsimagerenderer)

#####`Core Graphics`とは？
>`Quartz`テクノロジーのパワーを活用して、高忠実度の出力で軽量の2Dレンダリングを実行します。パスベースの描画、アンチエイリアスレンダリング、グラデーション、画像、カラーマネジメント、PDFドキュメントなどを処理します。
（引用：　https://developer.apple.com/documentation/coregraphics）

#####`Quartz`とは？
>ユーザーがスライドショーとCore Imageフィルターを使用して、画像を閲覧、編集、保存できるようにします。
（引用：　https://developer.apple.com/documentation/quartz）

###つまり？
`UIGraphicsImageRenderer`は、Core GraphicsフレームワークとQuartzフレームワークを使用して、画像（UIImage）の作成や編集を実行します。

#引用文献（スペシャルサンクス）
- https://stackoverflow.com/questions/29137488/how-do-i-resize-the-uiimage-to-reduce-upload-image-size
- https://developer.apple.com/documentation
言語一覧

#各アプリの種類に適した言語一覧
###web系
ブラウザで動くアプリ

- Java
- c#
-  PHP
-   Ruby
-   Python
-   VisualBasic.NET

###クライアント系(PC)
パソコンにインストールして使用するアプリ

####Windows
- C#
- VisualBasic.NET
- C++
- Delphi

####Mac

- Swift

###クライアント系(スマホ)
スマホにインストールするアプリ
####Andoroid
- Java

####iOS
- Swift

###組み込み系
- C言語 
- C++
- Java

#まとめ
一概には言えないのですがだいたいこんな感じ。 作っていたアプリをネイティブにしようと思ったので、ここにメモる。ご指摘などあればよろしくお願いします！
【CSS】左右中央寄せ（ブロック要素、インライン要素、インラインブロック要素）

## margin: 0 auto;
:sunny: ブロック要素を左右の中央寄せ（まんなか）にする
:sunny: 必ずwidthを指定する

<img width="1102" alt="スクリーンショット 2019-12-29 22.49.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/32b288ad-01a3-92a5-6772-03862c66dc97.png">

この赤いブロック要素をまんなかに表示したい。

```例.html
<p>左右のまんなか</p>
```

```例.css
p {
  background-color: red;
  color: white;
  width: 300px;
  margin: 0 auto;
}
```

CSSの一番下に margin: 0 auto; をコーディング。

Web
↓
<img width="1103" alt="スクリーンショット 2019-12-29 22.53.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/582b8d1f-fa05-ffe0-cd1c-0640e8cb0695.png">

左右のまんなかに表示されました！:smile:
注意事項としては**必ず width で幅を指定**しないとダメです。


## text-align: center
:sunny: インライン要素、インラインブロック要素を左右の中央寄せ（まんなか）にする

詳しくは [【CSS】text-align の text-align: center;](https://qiita.com/mikimikiman/items/4ab66bdcfe0c24a12345) をご参考ください

まとめると・・・

|ブロック要素|インライン要素|インラインブロック要素|
|---------|----------|----------------|
|margin: 0 auto;|text-align: center|text-align: center|

となります:laughing:
【CSS】text-align

## text-align
:sunny: ブロック要素のなかにある、インライン要素、インラインブロック要素の配置を指定できる

### text-align: left;
:sunny: 左寄せ

```例.html
    <div class="position">
      <span>ここだよ</span>
    </div>
```

```例.css
.position {
  width: 300px;
  height: 200px;
  background-color: orange;
  text-align: left;
}
```

Web
↓
<img width="312" alt="スクリーンショット 2020-01-17 3.24.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/74f7a563-c997-1674-fe64-8294d96c71b6.png">

文字が左寄せになっているのがわかるかと思います:laughing: 

### text-align: center;
:sunny: 中央揃え

```例.css
.position {
  width: 300px;
  height: 200px;
  background-color: orange;
  text-align: center;
}
```

Web
↓
<img width="315" alt="スクリーンショット 2020-01-17 3.25.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/00a734f1-3758-f97b-da79-91ab859d3ee5.png">

文字が中央揃えになっています:laughing: 

### text-align: right;
:sunny: 右寄せ

```例.css
.position {
  width: 300px;
  height: 200px;
  background-color: orange;
  text-align: right;
}
```

Web
↓
<img width="312" alt="スクリーンショット 2020-01-17 3.28.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/f1c09989-c356-39f5-7074-fd4fee54cbea.png">

右寄せになりました:laughing: 

## 注意事項
今回であれば text-align を

```例.css
span {
  text-align: right;
}
```

上記のように span にかけてしまいそうですが
span にかけてしまっても何も反応しません。
理由は一番最初に書いたとおり

**ブロック要素のなかにある、**インライン要素、インラインブロック要素の配置を指定できる

からです。
つまり今回で言えば 幅：300px のブロック要素のなかにある
インライン要素の span を右寄せしてね
っていう命令をすることで span は右寄せになります。

なので span に text-align: right; をかけてしまっても
え？え？右ってどこまで右に行けばいいの？？:fearful:
text-align: center; なんてかけようもんなら
右も左もわかんないのに中央なんてどこなのさ！:scream:
と span ちゃんが困ってしまって何も反応しません:sweat_smile:
【CSS】border-radius

# border-radius
:sunny: 角を丸める

角を丸めるとはなんじゃそりゃ？？:thinking: 
という感じですが、図をみてもらうと一目瞭然です:smile:

<img width="168" alt="スクリーンショット 2020-01-17 2.41.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/36842f1d-919f-2749-b28e-31655ab7819b.png">

図のように角が丸くなります:laughing: 

```例.html
    <div class="square">
      <p>四角でーす</p>
    </div>
    <div class="corners">
      <p>角丸でーす</p>
    </div>
```

```例.css
.square {
  width: 150px;
  height: 100px;
  background-color: orange;
  text-align: center;
}

.corners {
  width: 150px;
  height: 100px;
  background-color: orange;
  text-align: center;
  border-radius: 30px;
```

上記では border-radius: 30px; で指定しましたが
数字を 50px に指定すると・・・

<img width="163" alt="スクリーンショット 2020-01-17 2.48.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/02ce3ad7-3755-1f6c-825c-1b34921d097a.png">

30px に比べてさらに角が丸くなりました:laughing: 
・・・ということは今度は 10px にして数字を小さくすると

<img width="162" alt="スクリーンショット 2020-01-17 2.50.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/997b1644-1cd2-df0c-c0f2-f1b4a680dc7b.png">

さっきに比べて角張っちゃいました:sweat_smile: 
つまりは・・・

**数字が大きくなればなるほど角は丸くなる**ということがわかりました:smile:
DockerのKibana日本語化

AWS Workspaces (Amazon Linux2)
Elasticsearch 7.5.1
Kibana 7.5.1

# docker-compose.ymlの環境変数に書く方法

environmentに「- "I18N_LOCALE=ja-JP"」を書く

```docker-compose.yml
version: '3.7'
volumes:
  elastic:
    driver: 'local' 

services:
  elasticsearch:
    container_name: elasticsearch
    image: docker.elastic.co/elasticsearch/elasticsearch:7.5.1
    ports:
      - "9200:9200"
      - "9300:9300"
    environment:
      - "ES_JAVA_OPTS=-Xms128m -Xms128m"
      - "discovery.type=single-node"
    volumes:
      - elastic:/usr/share/elasticsearch/data

  kibana:
    container_name: kibana
    image: docker.elastic.co/kibana/kibana:7.5.1
    ports:
      - "5601:5601"
    depends_on:
      - elasticsearch
    environment:
      - "ELASTICSEARCH_URL=http://elasticsearch:9200"
      - "I18N_LOCALE=ja-JP"
```

# kibana.ymlに書く方法

kibana.ymlに「i18n.locale: ja-JP」を書く

```docker-compose.yml
version: '3.7'
volumes:
  elastic:
    driver: 'local' 

services:
  elasticsearch:
    container_name: elasticsearch
    image: docker.elastic.co/elasticsearch/elasticsearch:7.5.1
    ports:
      - "9200:9200"
      - "9300:9300"
    environment:
      - "ES_JAVA_OPTS=-Xms128m -Xms128m"
      - "discovery.type=single-node"
    volumes:
      - elastic:/usr/share/elasticsearch/data

  kibana:
    container_name: kibana
    image: docker.elastic.co/kibana/kibana:7.5.1
    ports:
      - "5601:5601"
    depends_on:
      - elasticsearch
    environment:
      - "ELASTICSEARCH_URL=http://elasticsearch:9200"
    volumes:
      - ./kibana.yml:/usr/share/kibana/config/kibana.yml
```

[Running Kibana on Docker](https://www.elastic.co/guide/en/kibana/current/docker.html)
[Configuring Kibana](https://www.elastic.co/guide/en/kibana/current/settings.html)

```kibana.yml
server.name: kibana
server.host: "0"
elasticsearch.hosts: [ "http://elasticsearch:9200" ]
xpack.monitoring.ui.container.elasticsearch.enabled: true
i18n.locale: ja-JP
```
WordPressプラグイン「Really Simple SSL」を使ってSSLをしたら管理画面に入れなくなって冷や汗かいた

眠れないのでQiita記事を作成します。最近業務でWordPressを触る機会が多いわけですが、SSL化時に原因不明の事故にあい管理画面に入れなくなるという恐怖を一瞬だけ感じたので、そのヒヤリ体験を共有したい半分、将来の自分のための備忘録として残したくて書きます。

#WordPressプラグイン「Really Simple SSL」の罠
ローカルで開発していたサイトをもともと使っていたWordPressサイトに移す作業を行い、もともとのサイトをSSL化するためプラグイン「Really Simple SSL」を導入。すると以下画像のような画面にリダイレクト。
「なんだ。入力しなきゃいけないのか」と情報入力するも権限がないと弾かれた。
![スクリーンショット 2020-01-17 2.04.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322356/de64eacb-f287-fce9-770d-469ccbf308de.png)

WordPressの良いところは先人の方が解決策を多分に残してくれていることが幸いし、結論からいうと解決しました。とりあえずhttpsをhttpに手動で変えて管理画面に入ることができる。その後、プラグインを停止または削除する必要があるそう。
その解決のステップは
1 wp-content/plugins/really-simple-sslのディレクトリ内にある、「force-deactivate.txt」の拡張子をphpに変更
2 「http://example.com/wp-content/plugins/really-simple-ssl/force-deactivate.php」
と入力してEnter押す。
*example.comは自サイトのドメイン名
*httpsではなくhttp
「Really Simple SSL is already deactivated!」と大きく書かれることが確認できればプラグインが無効になっていることなので成功。
3 「example.com/wp-admin」でいつものWordPress管理画面に入れれば成功。

#####congratulations:clap:
SVGでCSS完全に理解したを作る

# 一発ネタ
n番煎じ。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="ririli" data-slug-hash="OJPoZde" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="svg-css-perfect-understand">
  <span>See the Pen <a href="https://codepen.io/ririli/pen/OJPoZde">
  svg-css-perfect-understand</a> by ririli (<a href="https://codepen.io/ririli">@ririli</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# ついでにSVGで"HELLO"って書いてみる

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="ririli" data-slug-hash="WNbgyNr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="svg-hello">
  <span>See the Pen <a href="https://codepen.io/ririli/pen/WNbgyNr">
  svg-hello</a> by ririli (<a href="https://codepen.io/ririli">@ririli</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## ちょっとだけ解説
HELLOの文字はtextタグを使うのではなくpathタグを使って書いてます。
中身はちょっと読みたくない感じですね。

とはいえ少し知るだけでなんとなく何をしているかわかるようになります。

```
    M10,10 v60 v-30 h28 v-30 v60
```

実はこの一行が「H」を意味します。
同様に一行が一文字になるように改行してあります。（構文的には改行する必要なし）

「H」について詳しくみていきましょう。
なにやらアルファベットと数字の組み合わせがスペースで区切られていますね。
実はこれ、ペンをどのように動かすかを動かし方と座標の組み合わせで指示しています。
上の例だとペンに対して6回命令を出しているということですね。

もちろんアルファベットにはそれぞれ意味があります。
ここでxとyは引数にとっている数字の部分です。

|アルファベット|意味|
|---|---|
|Mx,y  | x,yの座標にペンを下ろす |
|vy    | 現在の座標から垂直方向にy分線を引く |
|hx    | 現在の座標から水平方向にx分線を引く |

※小文字と大文字では意味が違ったり、この他にたくさんのコマンドがあります。今回は出番がないので省略.
 詳しくは[こちら](https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Paths=)

さて、命令の意味がわかったところで「H」を描画している命令群を自然言語に置き換えてみましょう。

| 命令 | 自然言語 |
|---|---|
| M10,10 | x=10,y=10の場所にペンを下ろす | 
| v60    | x=10,y=10からy方向に60分線を引く |
| v-30   | x=10,y=70からy方向に-30分線を引く |
| h28    | x=10,y=40からx方向に28分線を引く |
| v-30   | x=38,y=40からy方向に-30分線を引く |
| v60    | x=38,y=10からy方向に60分線を引く |

どうでしょう、ペンの動きがイメージできましたか？
Hという文字を一筆で書こうとするとこんな感じでしょうか。

ここまでわかれば残りの「ELLO」も読み解けますね。

## 所感
今回は簡単のために垂直、水平方向へのコマンドしか使いませんでしたが、当然普通に文章や図形を描こうとすると曲線や斜めの線が立ちはだかります。
とはいえ、用意されているタグで表現仕切れない場合やIllustlatorなどでsvg画像を用意できない場合（そんなことあるかな...）にはpathタグで無理やりなんとかする道が残っているということは覚えておいてもいいかもしれないですね。
WordPressで画像認証表示されずログインできなくなった件

昨日突然、WordPressのログインページで、画像認証が表示されずログインできなくなりました。
ネット検索したところ、SiteGuard WP Pluginが原因と分かりました。
https://dara-blog.com/siteguard-wp-plugin-no-image

SSHでSFTP接続して、
/public_html/wp/wp-content/plugins/
まで移動しました。
そして、siteguardをフォルダごと削除しました。
これで、ログインできるようになりました。

でも、また問題発生です。
プラグインの更新が、できないのです。

『インストールに失敗しました: ダウンロードに失敗しました。 ファイルストリーミングの送り先となるディレクトリが存在しないか、書き込み不可になっています。』
と言うエラーが出ました。

色々検索したところ、フォルダのパーミッションを変えると直ると知りました。
それで、下記の記事を参考にしました。
https://php-java.com/archives/622

https://agohack.com/aws-bitnami-wpsetting/

https://wordpressdeec.jp/howto/howto-004/

最終的に、wp-contentの中のuploadsのパーミッションを775にしたら、直りました。

AWSのEC2でWordPressをインストールする際、Bitnamiを使ったときは、ディレクトリの権限やパーミッションの設定を気をつけた方が良いです。

そのため、自分でEC2にWordPressをインストールする手順を踏んだ方が、後々楽なような気がしてきました。

何事も、最初が肝心です。
【CSS】hover

# hover
:sunny: マウスのポインタを要素の上に置いたときに実行される
:sunny: CSSの書き方は セレクタ:hover とする

```例.html
    <p>ここにカーソルのせてね♪</p>
```

```例.css
p:hover {
  background-color: red;
}
```

このように設定して ここにカーソルのせてね♪ の文字の上にマウスのカーソルを乗せると・・・

↓
![ezgif.com-crop (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/656e4e5e-bd1a-acda-da3b-c3de3d8015bd.gif)

背景色が赤になりました:laughing:
【CSS】display(ブロック要素、インライン要素、インラインブロック要素)

## display:block;
:sunny: インライン要素をブロック要素に変更する

```例.html
    <span>インライン要素だよーん</span>
```

```例.css
span {
  background-color: red;
  width: 300px;
  height: 100px;
}
```

このように width: 300px; と height: 100px; というふうに幅と高さを指定した。
しかしWebでは・・・
↓
<img width="194" alt="スクリーンショット 2019-12-30 1.48.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/d62336cc-938e-441b-9816-a3930a54fe68.png">

このようにしか表示されない。
これはHTMLの ＜span＞ タグがインライン要素のため幅と高さを指定することができない。
ではどうすればいいのかというと、幅と高さを指定できるのはブロック要素なのでブロック要素にしてしまえばいい:smile:

CSSを下記のように追加して・・・

```例.css
span {
  background-color: red;
  width: 300px;
  height: 100px;
  display: block;
}
```

Web
↓
<img width="313" alt="スクリーンショット 2019-12-30 1.55.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/52f864a4-f869-c9d6-700f-0c22af081d0c.png">

はい、できた:smile:

## display:inline;
:sunny: ブロック要素をインライン要素に変更する

```例.html
<p>ブロック要素だよーん</p>
```

```例.css
p {
  background-color: red;
  width: 300px;
  height: 100px;
}
```

Web
↓
<img width="314" alt="スクリーンショット 2019-12-30 2.03.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/46d2441b-a518-d4fa-a000-f3afddb2952e.png">

＜p＞タグはブロック要素のため高さも幅も指定できます:smile:
これを下記のようにCSSに display:inline; を追加すると・・・

<img width="169" alt="スクリーンショット 2019-12-30 2.05.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/c6738ea8-677c-2167-c379-5fc4b4948a0b.png">

インライン要素になりました:smile:

## ブロック要素とインライン要素まとめ
以前、ブロックレベル要素とインライン要素についてまとめたのですが、意味をまとめただけだったので、ここで前回に追加してまとめてみます。

|   |ブロック要素|インライン要素|
|---|---------|-----------|
|幅（width）|○ 指定できる|✗ 指定できない|
|高さ（height）|○ 指定できる|✗ 指定できない|
|内側余白（padding）|○ 指定できる|△ 左右のみ指定できる|
|外側余白（margin）|○ 指定できる|△ 左右のみ指定できる|

# display:inline-block
:sunny: ブロック要素とインライン要素の特徴をあわせもつ（インラインブロック要素という）
:sunny: 幅と高さが指定できる
:sunny: 内側、外側ともに余白が設定できる
:sunny: 配置を横並びにできる


ブロック要素はというと
↓
<img width="127" alt="スクリーンショット 2020-01-16 23.57.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/74e4ccbb-b02c-9c16-2a2c-c98b506bd306.png">

このように縦並びとなる。

インライン要素はというと
↓
<img width="405" alt="スクリーンショット 2020-01-17 0.01.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/40d72223-f63c-8f2e-2ba7-effcdfb84878.png">

このように横並びとなる。
インラインブロック要素は横並びとなる。
もう一度インラインブロック要素を含めてまとめると

|   |ブロック要素|インライン要素|インラインブロック要素|
|---|---------|-----------|-----------|
|幅（width）|○ 指定できる|✗ 指定できない|○ 指定できる|
|高さ（height）|○ 指定できる|✗ 指定できない|○ 指定できる|
|内側余白（padding）|○ 指定できる|△ 左右のみ指定できる|○ 指定できる|
|外側余白（margin）|○ 指定できる|△ 左右のみ指定できる|○ 指定できる|
|配置|縦並び|横並び|横並び|

このようになります:laughing:
【CSS】文字の間隔

## letter-spacing
:sunny: 文字の間隔を指定

```例.html
    <p>あいうえお</p>
```

通常だとこのとおり
↓
<img width="90" alt="スクリーンショット 2019-12-30 0.41.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/f2c16366-3160-d757-5ad0-977e479ec3d7.png">

CSSを適用すると・・・

```例.css
p {
  letter-spacing: 20px;
}
```

<img width="178" alt="スクリーンショット 2019-12-30 0.43.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/40997692-a9ca-9e1c-ec27-a1fd427ec24d.png">

文字間隔が広がりました:smile:
【CSS】透明度

## opacity
:sunny: 要素を透明にする
:sunny: 透明度は0.0〜1.0の数値で指定。
:sunny: 0が完全に透明となり1が完全に不透明

透明度を設定しなかったら・・・

```例.html
    <div class="one">
      <p>透明度 1.0</p>
    </div>
    <div class="half">
      <p>透明度 0.5</p>
    </div>
    <div class="zero">
      <p>透明度 0</p>
    </div>
```

```例.css
p {
  font-size: 30px;
  background-color: red;
  width: 200px;
  height: 100px;
  float: left;
  margin-right: 10px;
}
```

<img width="635" alt="スクリーンショット 2019-12-30 0.05.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/94e0989d-31c4-6ed6-45d7-8a5916728a80.png">

もちろんこのとおり。
CSSを適用すると

```例.css
.one {
  opacity: 1.0;
}

.half {
  opacity: 0.5;
}

.zero {
  opacity: 0;
}
```

<img width="632" alt="スクリーンショット 2019-12-30 0.14.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/21f49360-5c8b-f96b-0a53-107a1d037b52.png">

このとおり:smile:
透明度0は全て透明になってしまうので、何も映らなくなりました:sweat_smile:
ゼロから始める Python 爆速環境構築（Mac）

- Python の環境構築は色々バリエーションがあって分かりづらいですが、今現在最も良いと感じている方法を提示します
- 具体的には `pyenv` + `Poetry`

## Pyenv

```
brew install pyenv
```

でインストール。

まず環境変数の設定をします。
パス `$HOME/.pyenv` として `PYENV_ROOT` を登録し、`$PYENV_ROOT/bin` を `PATH` に含め、シェル起動時に `pyenv init` させます。

例えば bash であれば

```bash 
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init -)"\nfi' >> ~/.bash_profile
exec "$SHELL"
```

となります。他のシェルの場合などは[ドキュメント](https://github.com/pyenv/pyenv)を確認してください。

準備が整ったので、お好みのバージョンの Python を入れましょう。

```
pyenv install 3.7.2
pyenv global 3.7.2
```

これで Python v3.7.2 が使えるようになりました。`python --version` と入力して `Python 3.7.2` と出力されることを確認しましょう。

## Poetry

[Poetry](https://github.com/python-poetry/poetry) は新進気鋭のパッケージ管理ツールです。
類似品として Pipenv がありますが、Pipenv に比べて断然速いのと、Pipenv は現在更新が滞ってしまっていることから、もし今から新しく Python を始めようという方であれば Poetry を使うべきです。

インストールは

```bash 
curl -sSL https://raw.githubusercontent.com/sdispater/poetry/master/get-poetry.py | python
```

で完了します。

一つだけやっておくべき設定があります。それは

```
poetry config virtualenvs.in-project true
```

です。これで、`.venv` ディレクトリをローカル（`pyproject.toml`と同じ階層）で作ってくれるようになるので、VSCode や IDE 等でディレクトリを開いた時に、自動で仮想環境を認識してくれるようになります。

では、試しに動かしてみましょう。サンプルディレクトリを用意します。

```bash
mkdir example
cd example
```

`poetry init` をすると、対話形式で `pyproject.toml` に書く内容を決めていきます。Node.js ユーザーであれば `npm init` などでお馴染みだと思います。

面白いのは、この時点で既に入れたい依存パッケージが決まっている場合は `Would you like to define your main dependencies interactively?` で `yes` と答えると順次モジュールを指定して入れていくことができる点です。
もちろん後で依存パッケージを入れることもできるのでご安心を。

対話が終了すると `pyproject.toml` が書き出されます。

それではプログラムを書いていきましょう。爆速つながりで、[阿部 寛のホームページ](http://abehiroshi.la.coocan.jp/)をスクレイピングしてみます。
まず、Python のスクレイピングではおなじみの `requests` を入れます。

```
poetry add requests
```

これで `requests` が入ると同時に、ディレクトリ内に `.venv` ディレクトリが新しく作られると思います。
ちなみにこの状態で VSCode でディレクトリを開くと左下に `Python 3.7.2 64-bit ('.venv': venv)` みたいな表示が出て、ローカルの仮想環境を認識してくれているのが分かります。

そうしたら、スクレイピングするプログラムを書きます。

```python:abe.py
import requests

r = requests.get("http://abehiroshi.la.coocan.jp/")
print(r.text)
```

動かしてみましょう。
VSCode は賢いので、VSCode 内でターミナルを開くとシェルが自動で仮想環境に入ってくれます。なので普通に

```
python abe.py
```

だけでOKです。

もし、VSCode 内ではなくコンソールなどでコマンドを打ちたいのであれば

```
poetry run python abe.py
```

または

```
poetry shell
python abe.py
```

となります。