OmniAICreator/Qiita-1.07M huggingface dataset:
.gitignoreに指定した対象はコミットできないのか？

`git add .` で追加しても追加されない。
`git add` した場合には追加できなとメッセージが表示される。

```
% git add sample.html
The following paths are ignored by one of your .gitignore files:
sample.html
Use -f if you really want to add them.
```

ただし `-f` オプションを使うと追加できるようだ。
.gitignoreに指定したファイルを-f(--force)で追加するのは、追加してはいけないと設定しているのに、でも強制的に追加します！みたいな感じなので、かなりの割合でやらないほうが良いです。

`git rm` は可能で、特に警告も出ません。
追加してはいけない設定にしたファイルを消すのは特に不自然ではなからでしょうね。

```
% git rm sample2.html
```
Square API と Sandbox Seller Dashboard の開発環境を手に入れる

# 背景

Square POS と API で実現できることをエンジニアが検証するために、開発環境を手に入れる手順をご紹介します。

# Square Application 作成

Square API を利用するために Square Application を作成します。

必要なことは [Get Started with Square APIs, SDKs, and Plugins](https://developer.squareup.com/docs/get-started) に全て書いてあります。

## Get Started with Square APIs, SDKs, and Plugins

### Step 1: Create a Square account

まず、Square アカウントが無いと何もできません。

https://squareup.com/signup/jp?lang_code=ja からアカウント作成しましょう。

### Step 2: Create a new application

https://developer.squareup.com/apps から Square アプリを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4798/b04d745d-f040-2f60-a089-baf04d703f17.png)

### Step 3: Get to know the application settings pages

作成した Application ページから `Sandbox Access Token` をゲットできます。

### Step 4: Understand the different application credentials

色んなクレデンシャルがあることを確認しつつ、

https://developer.squareup.com/docs/build-basics/access-tokens#application-credential-types

今回は `Sandbox access token` を使って、検証を進めました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4798/b20fba2b-22ea-d6e6-d45c-d387eb38944f.png)

### Step 5: Try it out

商品一覧 list-catalog を curl で取得する例は以下のとおりです。

- https://developer.squareup.com/reference/square/catalog-api/list-catalog


```
SQUARE_ACCESS_TOKEN=XXX

curl https://connect.squareupsandbox.com/v2/catalog/list \
  -H 'Square-Version: 2020-08-26' \
  -H "Authorization: Bearer ${SQUARE_ACCESS_TOKEN}" \
  -H 'Content-Type: application/json' \
```

ここでのポイントは API のドメインが Sandbox では `connect.squareupsandbox.com` な点です。

> The Square Sandbox environment domain: connect.squareupsandbox.com for all REST and SDK calls.
>
> via: https://developer.squareup.com/docs/testing/sandbox


# Square Sandbox Seller Dashboard

https://developer.squareup.com/apps ページの `Sandbox Test Accounts` エリアの `Default Test Account` から `Open` ボタンをクリックすると Sandbox Seller Dashboard ページが開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4798/2447d1e4-680c-1b6f-c8e2-aa1765eff159.png)

Square API の検証では Sandbox Seller Dashboard で登録したデータを利用するのが Production を汚さなくて済みそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4798/cb4cec41-2a63-a4ad-4b0f-c5f2d3b18e33.png)

以上、Square API と Sandbox Seller Dashboard で技術検証をしていきたい、現場からお送りしました。
Error: Command PhaseScriptExecution failed with a nonzero exit code の対処方法

Carthage でライブラリをインストールしたり、アップデートしたりした後に、Branch をチャックアウトするとためにこのような Error が発生することがあります。このような場合は、Finder の情報を持つ拡張属性をし、Clean しビルドし直すと正常にビルドが成功するようになります。

### 解決方法

下記のコマンドを使ってプロジェクトルート以下の Finder 情報を持つ拡張属性を削除し、Xcode でクリーンを実行してからビルドすれば直ります。

```
sudo xattr -rc .
```
Setterが多少役立った話


あるプロジェクトの保守で
私が全く知らない箇所の不具合を修正しなければならなかった。
ある変数の値がどこかで不正になっていることは分かったが、
ソースコードが極めて難解であり、変数も複数の箇所でいじくりまわされ、これもう分かんねえな状態だった。

そんな中、下記のようなsetterが定義されていたので、`this.hoge = hoge;`の箇所に
条件付きブレークポイントを付けたところ、スタックトレースから問題の箇所が分かった。

```Java

private String hoge = "";

public void setHoge(hoge) {
    this.hoge = hoge;
}

```

冗長でsetter/getterは嫌いだったが、昔のプログラマは私と同じような方法で不具合を修正していたのかなと思うと感慨深かった。（小並感）
PHPのソースコードからクラス図を自動生成

#PHUMLでPHPのクラス図を画像で作成する
PHPSTORMにはクラス図を作成してくれる機能がついているそうですがお家環境にはPHPSTORM入っていないのでクラス図を自動生成してくれるツールを探していてphumlというツールを発見しました。
環境はUbuntu18.04LTSです。

##インストール
https://github.com/jakobwesthoff/phuml
からダウンロードして適当な場所に展開しましょう。
僕は~/.localにphumlとして展開しました。
これで実行できるようになりました。

```
$php ~/.local/phuml/src/app/phuml
phUML Version 0.2 (Jakob Westhoff <jakob@php.net>)
Usage: phuml [-h|-l] [OPTIONS] <DIRECTORY> <PROCESSOR> [PROCESSOR OPTIONS] ... <OUTFILE>

Commands:
    -h      Display this help text
    -l      List all available processors

Options: 
    -r      Scan given directorie recursively

Example:
    phuml -r ./ -graphviz -createAssociations false -neato out.png

    This example will scan the current directory recursively for php files.
    Send them to the "dot" processor which will process them with the option
    "createAssociations" set to false. After that it will be send to the neato
    processor and saved to the file out.png

```
僕は毎度入力するのしんどいのでシンボリックリンク貼っときました。

```
sudo ln -si ~/.local/phuml/src/app/phuml /usr/local/bin
```
あとは解析したいディレクトリに移動してサンプルにもある用に

```
phuml -r ./ -graphviz -createAssociations false -neato out.png
```
を実行して上げればOKです。
試しにlaravelのエコシステムの一つpassportのsrcディレクトリ内で実行してみました。

![passport_src.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242123/3bc7e40f-9bfd-2e2b-e146-bdb809ceb533.png)

ちゃんと表示できました！
macOS Catalinaで"dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib"が出た

# やったこと
- ターミナルで`php -v`を叩く

# エラーがでた
```
dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
(以下省略)
```

そんなはずはない、パスは通っている

が、`source ~/.bash_profile`を叩くとちゃんと動く

↓

```
PHP 7.3.22 (cli) (built: Sep  3 2020 21:17:58) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.22, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.22, Copyright (c) 1999-2018, by Zend Technologies
```

# 結論
macOS Catalinaのデフォルトのシェルは`bash`ではなく`zsh`のため、
毎回`source ~/.bash_profile`を叩かなければいけなくなる。
.bash_profileに記載のパスをコピーして
`.zprofile`にコピーすると解決する


以上
int型カラム登録で大文字の場合でも半角数字にしたい時

今回はオリジナルアプリを作っている際数字で登録するところをうっかり大文字数字で記入しても勝手に半角数字にしちゃうメソッドを作ったのでまとめたいと思います。





投稿の際に使用するテーブルはこんな感じです。

```
mysql> show columns from sakes;
+-------------+--------------+------+-----+---------+----------------+
| Field       | Type         | Null | Key | Default | Extra          |
+-------------+--------------+------+-----+---------+----------------+
| id          | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| name        | varchar(255) | NO   |     | NULL    |                |
| rice_rate   | varchar(255) | NO   |     | NULL    |                |
| sake_degree | varchar(255) | NO   |     | NULL    |                |
| type_id     | int(11)      | NO   |     | NULL    |                |
| degree      | int(11)      | NO   |     | NULL    |                |
| company     | varchar(255) | NO   |     | NULL    |                |
| rice        | varchar(255) | YES  |     | NULL    |                |
| user_id     | bigint(20)   | NO   | MUL | NULL    |                |
| created_at  | datetime(6)  | NO   |     | NULL    |                |
| updated_at  | datetime(6)  | NO   |     | NULL    |                |
+-------------+--------------+------+-----+---------+----------------+
11 rows in set (0.01 sec)

```


この中にdegree(アルコール度数)の部分を投稿の際i　int型にするためにモデルにメソッドを作ります。



```ruby:sake.rb

def degree=(value)
    value.tr!('０-９', '0-9') if value.is_a?(String)
    super(value)
  end
```

まず最初のdegree=(value)はメソッドの定義で何か代入しているように見えるがdefree= と言うメソッドに仮引数(value)が設定されている形となる。 

まず大文字でも胃が入力された時はstringになるので**is_a?メソッド**が真の場合処理が行われます。

**trメソッド**の公式リファレンスを見てみると、、

pattern 文字列に含まれる文字を検索し、それを replace 文字列の対応する文字に置き換えます。

例はこんな感じです。


```
p "foo".tr("f", "X")      # => "Xoo"
p "foo".tr('a-z', 'A-Z')  # => "FOO"
p "FOO".tr('A-Z', 'a-z')  # => "foo"

# シーザー暗号の復号
p "ORYV".tr("A-Z", "D-ZA-C") # => "RUBY"

# 全角英数字といくつかの記号の半角化
email = "ｒｕｂｙ−ｌａｎｇ＠ｅｘａｍｐｌｅ．ｃｏｍ"
p email.tr("０-９ａ-ｚＡ-Ｚ．＠−", "0-9a-zA-Z.@-")
# => "ruby-lang@example.com"


```

ざっくり言うと第一引数の内容を第二引数に変更するといった感じです。

なのでtrメソッドで内容を変更しています。
これで変わると思ったがエラー。。。


super(value)の記述を付け加えて無事できました。

今までなんとなくで触っていましたがカラムはメソッドとして使用できるということをわかっていませんでした。

最後の super(value)の親クラスは**ActiveRecord::Base**となります。


ここらへんのことはまだふわっとしているので次の記事でまとめたいと思います。
とあるサイトの4週目から記録

今日はポポロクロイスのBGMを聴きながら作業。
中学生のときに必死にやっていたゲームでゲームの中で1番好き。

仮想環境を構築して自宅で勉強しているが、なぜかsu - でrootユーザーなれなくなって色々探してたら　sudo -i でrootユーザーになれることが判明。
理由は覚えてないから受かったら調べよ。


シェル　正答率64％
間違えたところだけ復習
alias
登録されているエイリアスの表示

declare -f
定義されている独自のシェル関数の確認

unalias　変数名
登録されているエイリアスの削除

function 変数(){ls -変数　$1;}
bashの組み込みコマンドを使用し、関数の作成

/etc/bash.bashrc
Debian系ファイル

/etc/profile
全ユーザーのデフォルトに設定されている環境変数の変更。

set -o allexport
シェル変数を自動的に環境変数へ

~/.bashrc
対話型シェルを起動時に読み込まれるユーザー個別ファイル

\変数
登録したエイリアスを1時的に無効化する。

スクリプト　正答率84%

for INT in ///
in
 echo $INT
done
繰り返し処理

$$
シェルの特殊変数、現在のシェルのプロセス番号。

$?
シェルの特殊変数、直前に実行されたコマンドの終了ステータス。

$1
シェルの特殊変数、1番目の引数が設定される変数。

$0
シェルの特殊変数、実行したシェルスクリプト名が設定される変数。

TODAY=`date`
TODAY=$(date)
コマンド置換機能を使ってdateコマンドの結果をTODAY変数に格納。
【Unity】ボタンを押したらハート送りまくる機能を実装する【Particle System】

ボタンを1回押すと1つハートが出てきます。
#【やってること】#
・ボタンとParticle Systemを連携
・OnButtonDownを検知するたびにParticle SystemをPlay()

#【環境】#
・Mac OSX El Capitan
・Unity versiton:2018.3.0

#【結果】#
https://youtu.be/K2ZmyMT1PFo
#【作り方】#
最終的な配置イメージ
![スクリーンショット 2020-09-07 22.36.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704563/dadf47eb-bc92-d300-164c-84fcf2391117.png)

##①Particle Systemを作成する##
・Particle Systemをシーンに配置する
・Loopingのチェックを外す
・Start Speedの値を10にする
・PlayOnAwakeのチェックを外す
・EmissionのRate over Timeを0にする
・EmissionのBurstsを下図のように設定
　　※Burstsはパーティクルがどのタイミングでどれくらい出るかを設定できます。
　　今回は押した瞬間に1つ出てきて欲しいので、Time=0、Count=1です。
　![スクリーンショット 2020-09-07 22.01.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704563/6c352994-1f56-9dfa-aa0b-aa8f0a49cfbe.png)
・Limit Velocity over Lifetimeを下図のように設定
　　※SpeedとDampenの役割についてはこちらのサイトを参考にさせていただきました
　　　http://tsubakit1.hateblo.jp/entry/2017/05/03/211922
　![スクリーンショット 2020-09-07 22.04.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704563/076fd7c4-a497-af1c-01b5-4012ffb484e0.png)
・Color over Lifetimeを下図のように設定
　![スクリーンショット 2020-09-07 22.05.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704563/f6a787c8-817f-bdd5-9fba-d955d5eeea58.png)


##②Particle System用のMaterialを作る##
・このハートのPNG画像をアセットに追加、Texture TypeをSprite(2D and UI)に変更する
　※真っ白だから見えないけど↓ここにハートの画像があります。
　![Like.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704563/1955832f-1090-4c62-27d5-8117f70051b5.png)

・新しいMaterialを作成する
・ShaderをParticles/Standard Unitに変更する
・Render ModeをFadeにする
・ハートの画像をMaterialのAlbedoの□にドラッグ&ドロップする
・このMaterialをParticle SystemのRender内のMaterialに入れる

##③押したらハートが出るボタンを作る##
・Buttonをシーンに配置する
・FlashLike.csをアタッチする

```C#:FlashLike.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class FlashLike : MonoBehaviour
{
    public ParticleSystem likeEffect;
    // Start is called before the first frame update
    void Start()
    {
        likeEffect = likeEffect.GetComponent<ParticleSystem>();
    }

    public void PlayLikeEffect() {
        likeEffect.Play(); 
    }
}
```

・InspectorからFlashLikeコンポーネントのLikeEffectにParticle Ststemを代入する
・ButtonコンポーネントのOnClickからFlashLike,PlayLikeEffectを選択する
　![スクリーンショット 2020-09-07 22.21.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704563/e4bb7f03-c409-51ee-4a64-5b23d88e09f5.png)


以上！完成！
Limit Velocity over LifetimeやColor Over Lifetimeの値をいじって好きなハートの出し方を探ってみてください！
FastAPIについて ~エンドポイントエラーハンドリング~

# FastAPIエラーハンドリングサンプル

>FastAPI　version_0.61.1
>Documentation: https://fastapi.tiangolo.com
>Source Code: https://github.com/tiangolo/fastapi

FastAPIのエンドポイントは下記のように実装することで
エラーハンドリング可能になる。

```python:sample.py
from fastapi import routing
def handle_wrapper(func):
    def routing_wrapper(*args, **kwargs):
        routing_api = func(*args, **kwargs)
        async def api_handle(request: Request) -> Response:
            try:
                http_response = await routing_api(request)
            except Exception as ex:
                """ここに任意の例外処理を記述する"""
            return http_response
        return api_handle
    return routing_wrapper
routing.get_request_handler = handle_wrapper(routing.get_request_handler)
```


```
http_response = await routing_api(request)
```
このコードの７行目↑にてエンドポイントが呼び出されるため、
上記コードを応用してコールバック関数を定義することも可能となる。
PythonでPDFファイルを統合する

## はじめに
Pythonの基本文法を勉強するために、複数のPDFファイルを1つのPDFファイルに統合するプログラムを書きました。PDFファイルの結合・書き込みには[PyPDF2](https://pythonhosted.org/PyPDF2/)を使用しています。

## PyPDF2をインストール
pipを使用してPyPDF2をインストールします。

```
> pip install PyPDF2
```

## インポート
PDFファイルを統合するために`PdfFileMerger`を、フォルダ指定時にPDFファイルを自動的に見つけるために`os`, `glob`をインポートしておきます。

```python:merge.py(1)
from PyPDF2 import PdfFileMerger
import os
import glob
```

## 初期化
統合するための初期化を行います。

```python:merge.py(2)
def main():
    merger = PdfFileMerger()

    merge_files = []
```

## 統合するファイルの指定
### 指定終了処理
まずは、`m`と入力されるまで指定を続け、`m`が入力された場合にはファイルの指定を終了して次の処理に進むようにしておきます。変数iはファイルの数をカウントするためのものです。

```python:merge.py(3)
    i = 1
    while True:
        print("Merge file or Folder ", i, " (Type 'm' to merge.) -> ", sep='', end='')
        in_file = input()

        if in_file == 'm':
            break
```

### ファイルを指定
入力されたパスがファイル名であり、PDFファイルである場合にはマージするファイルリストに追加していきます。拡張子がPDFではない場合にはそれを伝えるメッセージを出力しています。

```python:merge.py(4)
        elif os.path.isfile(in_file):
            ext = os.path.splitext(in_file)
            if ext == '.pdf':
                merge_files.append(in_file)
                i += 1
            else:
                print("指定したファイルはPDFファイルではありません.")
```
ここではまず、`os.path.isfile()`によって引数がファイルであるかフォルダであるかを識別しています。次に、`os.path.splitext()`を使って拡張子を識別しています。  
指定したファイルがPDFファイルであった場合には、`append()`によってマージするファイルのリストに追加します。

### フォルダを指定
入力されたパスがフォルダ名だった場合には、そのディレクトリ下にあるpdfファイルを全てリストに追加し、追加したファイル名を出力しています。

```python:merge.py(5)
        else:
            for file in glob.glob(in_file + '*.pdf'):
                merge_files.append(file)
                print("Add " + file)
                i += 1
```
`glob.glob()`によって指定フォルダ内のPDFファイルをリスト化し、順にマージするリストに追加しています。

## 出力ファイルの指定
出力するPDFファイルの名前を指定します。指定した名前の拡張子が`.pdf`でない場合には最後に`.pdf`を付けてPDF形式にしています。

```python:merge.py(6)
    print("Generated file -> ", end='')
    out_file = input()
    ext = os.path.splitext(out_file)

    if ext != '.pdf':
        out_file = out_file + '.pdf'
```
ここでも`os.path.splitext()`を使って拡張子を調べています。

## ファイルを統合・出力
統合するファイルはmergerに一旦追加してから指定ファイルに書き込みます。

```python:merge.py(7)
    for file in merge_files:
        merger.append(file)
    
    merger.write(out_file)
    merger.close()
    print("File merge completed!!")
```
`append()`によってmergerに追加してから、`write()`によって指定出力先にPDFファイルを作成します。

## 最後に
コード全体はgithubからご確認ください → ( [PDF-Handler](https://github.com/nkue-yst/PDF-Handler) )
Pythonは初心者なので読みづらい部分があるかと思いますがご了承ください。
Firebase Cloud FunctionsでDebuggerを使う方法

調べてみて日本語の記事が全然出てこなかったので投稿します。
もしかしたらすでに大多数の人が知っているのかもしれないけど、念のため。

## 悩み

Firebase Cloud Functionsの開発やってるけどデバッグがやりにくい。
VSCodeのデバッグ方法はちょこちょこ出てくるが、IDEはJetBrains製のものをどうしても使いたい。

### 従来のデバッグ方法
```
firebase emulators:start
```

console.logを連発してとにかく１つずつ確認。苦痛。もうやりたくない。

### Debuggerを使ったデバッグ方法

結局、ただのNode.jsなんだから絶対にDebuggerが使えるはず。
いろいろ調べて以下の手順でやればできた。

`1. Firebase emulatorをinspectモードで起動する`

```
firebase emulators:start --inspect-functions
```

`2. デバッガーが立ち上がる`
Debugger listening on ...と表示される
![Screen Shot 2020-09-07 at 22.23.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82592/9f2942cd-bd53-bfcf-f29d-9e329ecbe3d4.png)

`3. Attachする`
Run/Debug ConfigurationsからAttach to Node.js/Chromeを選択して、画像のように設定する。
![Screen Shot 2020-09-07 at 22.26.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82592/a523d7b4-e9e8-0374-1feb-275d2a7ca852.png)

`4. Run!!!!`

## まとめ

ちょっとやりにくいなと思ってたFirebase Cloud Functionsの開発が最高に楽しいものになりました。
aws sts get-session-tokenの結果をexportするためのワンライナー

AWSやっているとよく出てくるこちらのSession TokenのExport。 `aws sts get-session-token` で取得すれば良いのですが毎度微妙に面倒でした。

```sh
export AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
export AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
export AWS_SESSION_TOKEN=AQoDYXdzEJr1K...o5OytwEXAMPLE=
```

Shellとかで実装されているのも見つけましたが、自分の好みでワンライナーにしました。


Qiitaの機能でコピーボタン押して使うと便利です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116068/b8e77d2b-f350-0863-5008-d753b5674ea6.png)


出力して、別のターミナルに貼り付けたい時は、出力してコピペ。

```sh
aws sts get-session-token --query 'Credentials | {A:AccessKeyId,B:SecretAccessKey,C:SessionToken}' --output yaml | awk  'NR==1{print "export AWS_ACCESS_KEY_ID="$2} NR==2{print "export AWS_SECRET_ACCESS_KEY="$2} NR==3{print "export AWS_SESSION_TOKEN="$2}'
```

自身のセッションで使う時にはevalすれば環境変数として読み込んでくれます。

```sh
eval $(aws sts get-session-token --query 'Credentials | {A:AccessKeyId,B:SecretAccessKey,C:SessionToken}' --output yaml | awk  'NR==1{print "export AWS_ACCESS_KEY_ID="$2} NR==2{print "export AWS_SECRET_ACCESS_KEY="$2} NR==3{print "export AWS_SESSION_TOKEN="$2}')
```

WSLなら最後に `clip.exe` を使ってクリップボードにCOPYしても便利です。

```sh
aws sts get-session-token --query 'Credentials | {A:AccessKeyId,B:SecretAccessKey,C:SessionToken}' --output yaml | awk  'NR==1{print "export AWS_ACCESS_KEY_ID="$2} NR==2{print "export AWS_SECRET_ACCESS_KEY="$2} NR==3{print "export AWS_SESSION_TOKEN="$2}' | clip.exe
```
【AWS SAA】スケールアウトとスケールアップの違い

#はじめに
AWS SAAの試験の中で高可用なアーキテクチャはどれか選ぶ問題がある。サーバの処理能力を向上させるアプローチとして、主に「スケールアウト」と「スケールアップ」があるが、その違いが曖昧であった為、本稿を通じて簡単にその違いについて整理したい。

##スケールアウト
スケールアウトは水平スケールとも呼ばれ、Auto Scalingのように数の増減でスケーリングすることだ。
例：EC2を１つ→3つに変更
![新人 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/48cdc6f3-96ec-12f3-4fd4-ef20ca923752.png)


##スケールアップ
垂直スケーリングとも呼ばれ、インスタンスそのものの性能を変更してスケーリングすること。(サーバそのものを増強すること。)
例：EC2インスタンスタイプをt2.micro→t2.largeに変更
![新人 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/8e5efd15-ffd4-6eef-9d94-ced100683c49.png)
※今回は比較しやすいように、EC2インスタンスタイプで例えたが、実際はデータベースなどでよく使われる手法とのこと。


参考
https://dev83.com/aws-autoscaling/
https://japan.zdnet.com/article/20234267/
Ultimate AWS Certified SysOps Administrator Associate 2020
Vue.js + FireBaseで作成した食事管理のポートフォリオ

# このポートフォリオを作成した背景
日々の食事を考える際に
これこの前食べたばっかりだよ〜、今日のご飯何にしようか？自炊？外食？といった
些細な迷いや悩みを解決する目的で開発しました。

## 使用技術
フロントエンド
Vue.js(VueRouter,Vuex,Vuetify,axios)

バックエンド
Firebase(Hosting,Authentication,CloudFirestore)



## 主な機能一覧
・会員登録、ログイン、ログアウト
・食事内容CRUD機能
・楽天レシピAPIからレシピを取得しピックアップを一覧表示、またキーワード検索
・飲食店検索（ぐるなびAPI）

## 使用方法
- 新規登録
ヘッダーの新規登録ボタンを押下してフォームにemailとpasswordを登録します。

- ログイン
既に新規登録が完了している場合はログインボタンを押下して登録したemailとpasswordを入力してログインします
ゲストログイン機能実装

### テスト用アカウント

GitHub: https://github.com/shiropt/recal.git

URL:     https://recal-f1a64.web.app

email: recal@test.ne.jp
password: testpass
ユーザーの管理はfirebaseのAuthenticationを使いました

1.最初にアクセスすると説明文が記載された画面が描画されます。
認証画面左側に新規登録とログインボタンを配置し、router-linkで選択したフォームを描画しています


![画面収録 2020-10-20 22.51.38.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626314/5f866f67-4e24-ec36-4d55-660bdc8584d0.gif)


2.新規登録すると同時にログインユーザーの情報をfirestoreに保存しています。

3.ログインするとヘッダーに各機能のボタン一覧、右側に登録したメニューが表示されます。
登録したメニューはVueライフサイクルのcreatedでfirebaseからログインしているユーザーとfirebaseに登録されているユーザーのidが一致したデータを取得しstoreに格納、stateから配列に格納し、v-forで一覧表示しています。

4.ログイン時のデフォルトではレシピを見るの画面が描画されます。
ヘッダーのボタン一覧はv-ifでユーザーがログインしていれば表示されるようにしています。
レシピを見る、外食する、ピックアップはそれぞれrouter-linkで遷移
記録するボタンとログアウトボタンはコンポーネントを作っています。



各ボタンの動き
![画面収録 2020-10-21 7.55.01.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626314/a7c05bed-4aef-1653-c848-4e1be8413a32.gif)


## 投稿、編集、削除
* 当日の投稿は1日1回(当日以外の日付はカレンダーを選択)

* 編集の場合はフォームに既存のデータを渡し、セットする

* 当日の削除するとまた投稿が出来るようになる

## レシピを見る
* 楽天レシピAPIから取得したピックアップメニュー4件を一覧表示
* 作り方を見るボタンから楽天レシピのメニュー詳細へ飛ぶ
* 検索フォームからキーワードを入力でインクリメンタルサーチで候補が表示される
* 検索候補は楽天レシピAPIから取得
* 検索候補クリックで外部サイト(楽天レシピの該当メニュー)へ飛ぶ

![名称未設定.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626314/4c6bc38a-4ccd-671e-1380-ed5bd26c7995.gif)

## 外食する
* 位置情報から近くのお店を表示
* 検索フォームはフリーワードとエリア検索が存在
* どちらかのフォームにも入力がない状態で検索ボタンを押すとエラーメッセージを表示
* 検索結果はぐるなびAPIから取得した飲食店情報を表示
* 予約するボタンクリックでぐるなびの店舗詳細ページへ飛ぶ(画面幅によってスマホ用とPC用のリンクを変えるよう実装)
![名称未設定２.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626314/de570517-7a54-2dae-5b05-104c5d025a69.gif)

## レスポンシブ対応
スマートフォンようにレスポンシブデザインも用意
ヘッダーのボタンはハンバーガーメニューで対応

## 開発して学んだ事
・APIの使い方、非同期処理
　  API導入なんて難しそう、無理！と抵抗があったのですが、youtubeを参考に実装してみると、実装出来て面白かった。
　※参考にした動画　https://www.youtube.com/watch?v=yxhNo1xTOlM
　同時に扱う非同期処理についても理解が深まった

・コンポーネント間のデータのやりとり、Vuex
　propsやemitを使う機会が多かったのでデータや関数の渡し方の理解が深まった
　Vuexを理解して使えるようになた。小規模なアプリなら不要かもしれませんが、Vuexにデータを保存したり、引っ張って来る事で実装が出来る事も多かった。

・firebaseの使い方
 　 認証、CRUD機能、デプロイといったバックエンドの実装がfirebaseを使って出来るようになった。
　覚えてしまえばかなり楽。

・ロジックを考える楽しさ
　この機能はどうやって実現しようか〜と悩んで悩んで実装に移すのは楽しかった

## 反省点
・Gitのコミットが途中から荒くなったこと。
　次回からの開発では実務でGitを使う事を見越してブランチを切り、プルリクも書くようにする

・コンポーネントをもっと細かい単位で作成した方がいい
　1ファイルのコードの記述量が多くなり、可読性が悪く、メンテナンスがしにくくなった

・storeの分割
　1つのstoreに全ての処理を記述した為、こちらも見にくい。

・何を実装したのかをコメントに残しておく
　後から見た際にこのメソッドは何をしていたっけ？という事がしばしばあったので、コメントは残しておいた方がいい

総括すると、チームを意識した開発が出来ていなかったことが反省点。
可読性やメンテナンスを意識して次回の開発に繋げる。

##　終わりに
最後までご覧いただきありがとうございました。

ソースコードに関しまして、ご指摘、ご意見などいただけると嬉しいです！
VisualStudio競プロ用設定

#概要
Visual Studioを普段使用しているため競プロでも使用したいがテスト用の入力データをいちいちコピペするのが面倒くさい。
 https://ideone.com/ のように既に入力用のボックスに書いておきプログラムを実行したら出力用のボックスに結果が表示されるやり方はないものかと思い設定を行った。

#行った設定

###1.プロジェクトを作成

まずは通常通り空のプロジェクトを作成する。
![2020-08-26 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259220/5b6a0cd1-1b5f-f69e-802e-234c6b322d86.png)

###2.cppファイルを作成
メインコード用のソースファイルを追加する。


###3.input, output用のテキストファイルを作成
プロジェクトフォルダ直下にinput.txtとoutput.txtを作成する。
プロジェクトフォルダの場所に飛ぶにはソリューションエクスプローラを右クリックして「エクスプローラでフォルダを開く」をクリックする。

###4.標準入力、標準出力設定を行う
「プロジェクト」⇒「(プロジェクト名)のプロパティ」⇒「構成プロパティ」⇒「デバッグ」⇒「コマンド引数」の右をクリックして
「< input.txt > output.txt」と記入する。
![2020-08-26 (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259220/ef1828d1-5211-0759-6e47-98392e0a7758.png)


あとは通常通りプログラムを書き、inputにテストデータを入れることで
outputに結果が出力されるようになる。
![2020-08-26 (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259220/e348fbe8-164c-ac10-48f6-0ba3e7587858.png)

たぶんこれが一番楽だと思います。
stdout is not a ttyに叱られる

完全に自分用の健忘録です

Git Bash(ver2.28)で実行しようとした際に、


```
$ node hogehuga.js 
stdout is not a tty
```


と叱られてしまった。悲しい。
原因はMinTTYのアレです。大体winptyを先頭につければ解決すると思ってたけど、今回は解決しなかった。
Gitを再インストールしてもダメ。

5分くらい悩んで、拡張子をつけたら動いた。

```
$ node.exe hogehuga.js
```

以下参考
https://github.com/mintty/mintty/wiki/Tips#inputoutput-interaction-with-alien-programs
Terraformを使ってCloudFunctionsのzip化とdeployを行う方法

CloudFunctionsをTerraform化する際にハマったのでメモ

## ハマったポイント
- deployする時のzip化をどうするか
- どうやって、ソースの更新があった時のみdeployされるようにするか


TerraformでCloudFunctionsをdeployする時に同じ名前のzipファイルだとdeployされないという[issue](https://github.com/hashicorp/terraform-provider-google/issues/1938)が上がっている


## 解消方法
- zip化
terraformの[archive_file](https://registry.terraform.io/providers/hashicorp/archive/latest/docs/data-sources/archive_file)を使うとzip化をterraformで出来る

- ソース更新の取得
ソース更新があった際にだけzipファイル名を変えればdeploy出来るので、zipファイル名にmd5をつけることで対応


## サンプルコード
以下の用なterraformのコードで対応出来た

``` terraform
# archive_fileを使うことでterraform plan時にzipファイルがローカルに作成される
data "archive_file" "function_archive" {
  type        = "zip"
  source_dir  = "path/to/src_dir" # main.pyやrequirement.txtが入ってるdir
  output_path = "path/to/output/functions.zip" # zipファイルの出力パス
}

# zipファイルをアップロードするためのbucket
resource "google_storage_bucket" "bucket" {
  name          = "my-bucket"
  location      = "US"
  storage_class = "STANDARD"
}

# google_storage_bucket_objectを使うことで、ローカルのzipファイルがGCSへアップロードされる
resource "google_storage_bucket_object" "packages" {
  name   = "packages/functions.${data.archive_file.function_archive.output_md5}.zip"
  bucket = google_storage_bucket.bucket.name
  source = data.archive_file.function_archive.output_path
}

resource "google_cloudfunctions_function" "function" {
  name                  = "my-function"
  description           = "terraform deploy test"
  runtime               = "python37"
  source_archive_bucket = google_storage_bucket.bucket.name
  source_archive_object = google_storage_bucket_object.packages.name
  trigger_http          = true
  available_memory_mb   = 128
  timeout               = 120
  entry_point           = "helloGET"
}
```

これで、ソースの更新があった時だけ、自動でzip化されてdeployされる
【Laravel】バッチ処理、Cronのタスクスケジュール実行まで

今日も張り切って備忘録。
バッチの理解を深める為、簡単な処理を実装してみた。

## 環境
PHP  7.3.8
Laravel  6.18.35

## バッチ処理を書く
Userテーブルに登録されているユーザー数を取得するバッチを作成する。
まずコマンドクラスを生成する。

```
php artisan make:command UserCount
```
コマンドを実行すると、ファイルがapp/Console/Commands/の直下に作成される。

```php:UserCountCommand.php
<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
//あとでログを出力する処理もいれるので
use Illuminate\Support\Facades\Log;
//操作するテーブルを読み込む
use App\User;

class UserCountCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */

    //コマンドの名前を設定
    protected $signature = 'user:count';

    /**
     * The console command description.
     *
     * @var string
     */
    //バッチの説明をここに書く
    protected $description = 'ユーザー数を取得';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
      //標準出力&ログに出力するメッセージのフォーマット
      $message = '[' . date('Y-m-d h:i:s') . ']UserCount:' . User::count();
      
      //INFOレベルでメッセージを出力
      $this->info( $message );
      //ログを書き出す処理はこちら
      Log::setDefaultDriver('batch');
      Log::info( $message );
    }
}
```

## これでバッチが完成
ターミナルでコマンドを実行

```
php artisan user:count
```
こんな感じで表示されればOK
![スクリーンショット 2020-09-07 21.52.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531606/19f3df1f-1228-02aa-be7e-3b735de159c1.png)

## バッチをCronで定時実行する
crontabにエントリーを記述する事で、エントリーの内容にそって定期的にバッチ処理を実行する事が出来ます。

参考：[Laravelのタスクスケジュール(cron)を使いこなす] (https://reffect.co.jp/laravel/laravel-task-schedule-cron)

というわけで、crontabをvimコマンドで編集します。

```
$crontab -e
```

以下の1行を追加するだけでOK

```
* * * * * php /path_to_your_project/artisan schedule:run 1>> /dev/null 2>&1
```

` $commands` に作成したバッチコマンドを追加するのと、`schedule`にバッチのスケジュールを記載する。

```php:app/Console/Kernel.php
class Kernel extends ConsoleKernel
{
    /**
     * The Artisan commands provided by your application.
     *
     * @var array
     */
    protected $commands = [
        \App\Console\Commands\UserCountCommand::class
    ];

    /**
     * Define the application's command schedule.
     *
     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
     * @return void
     */
    protected function schedule(Schedule $schedule)
    {
        // user:countコマンドを毎分実行する
        $schedule->command('user:count')->everyMinute();
    }
```

ログファイルを見てみると

![スクリーンショット 2020-09-07 22.07.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531606/76303a4b-bd77-9e24-5087-e1d08c30bd0e.png)
ちゃんと1分おきに実行されていますね！
Gitbucket、Githubでプルリクエストのテンプレートを設定する

GitBucketにプルリクエストを作成する際、
手動で確認事項を書き忘れたことが発生してしまいましたので、
プルリクエストのテンプレートを設定する方法を調査しました。
その設定メモを残ります。

## プルリクエストのテンプレート作成

前提条件として、Gitのリポジトリを用意しています。

作成方法は以下の二つがあります。

### 方法① 
リポジトリのルートディレクトリにテンプレートファイルを配置する
   
   ```
   例：pull_request_template.md
   
   ファイルの中：
   ## 概要
   このプルリクエストは、「どういう作業、変更を行う」を記載。

   ## テスト方法、確認した内容
   テストした内容や、確認した内容を記載。

   ## TODO
   このPull Requestに対して、後続で発生する積み残し作業などがある場合は記載。
   ```

これで、テンプレートを設定できました。
新しいプルリクエストを作成する際、上記のテンプレートが生成されると思います。

Githubの方は、[サンプル1](https://github.com/koyi2016/testForPullRequestTemplate)を用意しましたので、ご参考まで。


### 方法② 
リポジトリの特定のフォルダ配下に、テンプレートファイルを配置する

  ```
  GitBucketの場合、「.gitbucket」フォルダにコピー
  Githubの場合、「.github」フォルダにコピー
  ```

Githubの方は、[サンプル2](https://github.com/koyi2016/testForPullRequestTemplate2)を用意しましたので、ご参考まで。

どちらでもテンプレートを設定できますが、テンプレートファイルの探す優先順位として、
方法① > 方法②

Githubのドキュメントに設定の詳細があります。
https://docs.github.com/en/github/building-a-strong-community/creating-a-pull-request-template-for-your-repository
git push heroku masterする際のエラー解消方法

【概要】
----------------------------------------
<b>1.結論</b>

<b>2.どのようなエラーか</b>

<b>3.なぜエラーが起きるのか</b>

<b>4.どのように解決するのか</b>



1.結論
----------------------------------------
<b>githubの左上メニューでCompare to Blanchを押してmasterにmarge</b>する！
<br>

2.どのようなエラーか
----------------------------------------

```ruby:ターミナル
%  git push heroku master
To https://git.heroku.com/*****.git
 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'https://git.heroku.com/*****.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```
このようなエラーが出てしまいました。
ローカルレポジトリ（master)からherokuへのmasterにpushしようとした際に拒否されてしまったエラーです。
hintが書いてありますが全く解決できずで、調べてもなかなか解決には至りませんでした。

<br>

3.なぜエラーが起きるのか
----------------------------------------
masterとローカルレポジトリにあるブランチが反映されていない状態になっており食違いがあったことが原因でした。
<br>

4.どのように解決するのか
----------------------------------------
なのでgithubの左上メニューでCompare to Blanchを押してmasterにmargeしたところ、エラーは無事に解決しました。


❶github desktopを開きますとMacですと左上にメニューバーが出てきます。そこで"Branch"を押下します。
![スクリーンショット 2020-09-07 21.47.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686400/aa43c2eb-1b0d-3c09-9554-23628b3931e1.png)

❷そしてCompare to Blanchを押します。
![スクリーンショット 2020-09-07 21.48.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686400/41d31895-ff95-defb-05d0-e78d0f720951.png)

❸そしてgithub desktopの画面に戻ってhistoryを見ていきます。

❹”１（１以上になっている）⬇︎”になっていると思うのでそれをmasterに統合します。
![スクリーンショット 2020-09-07 21.48.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686400/26ee212f-c1db-a10a-232b-bf12587afd84.png)
写真では0⬇︎になっていますが、エラーが起きていた際は1⬇︎になっていました。その証拠に隣が１⬆︎になっています。
そうすることで再度、ターミナルで” git push heroku master”してあげるとうまく行きました。

そこで、いろいろと思い返しました。
Pay.jpでjavascriptに環境変数を記載して、herokuにpushする際にわざとプログラムを変更して読み込ませるようにしました。変更を加えた際に、ブランチを作ったような気がしました。やはり気のせいではなくブランチを作ってありました。


<br>
Vivado, XSDK > XSDKでmain()の最初にブレークできない > Package IPのFile Groupにおいてxciファイルを最後にしたのが失敗

```txt:動作環境
PYNQ-Z1
Windows 10 Pro v1909
Vivado v2019.1
Pmod VGA
```

### 症状

- FPGAプログラミング大全 Xilinx編 (小林 優様)の第9章 VGA描画を試行
    - Pmod VGAを使ってVGA出力
- bitstreamは生成されるが、XSDKのint main()の最初にブレークできない
- VGA描画も(当然)実行されない

### Block Design

(FIFO_OVERFLOW, FIFO_UNDERFLOWのブロックは実装していない）

![BlockDesign.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/712daa51-465a-7707-68dd-4a54b355b492.png)

### 症状の理由

Block Designに含まれるdisplay_0 IPの作成において失敗をしていたようだ。

具体的にはSynthesisとSimulation双方において`disp_fifo.xci`を追加していたのだが、xciファイルをFile Groupsの「最後」に配置している時に警告がでる(下記）。
警告が出たままBlock Designを作成して、bitstreamを作成すると、そのbitstreamを使ったXSDKを動かそうとした時にint main()の最初の行にすらブレークできない。

`
[IP_Flow 19-801] The last file in file group "Synthesis" should be an HDL file: "../../simDisplay1/ipDisplay1.srcs/sources_1/ip/disp_fifo/disp_fifo.xci".  During generation the IP Flow uses the last file to determine library and other information when generating the top wrapper file.  If possible, please make sure that non-HDL files are located earlier in the list of files for this file group.
`

![File Group警告.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/32baea31-0366-763c-2f9c-010877169dc9.png)

### 対処

xciファイルが最後にならないようにファイルの順番を変更する。

![File Group警告.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/a12c5ab8-8bd3-7335-1dc6-f0430e764400.png)


### VGA出力

VGA出力成功した。
23回のbitstream生成。。。

![IMG_1989.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/c65e3938-295d-2b7e-2496-e674a12ce5f2.jpeg)

さん、はい。
分かるかーーーボケーー（12時間ほど溶かした）。


### 関連

- [PYNQ > Pmod VGA > FPGAプログラミング大全 Xilinx編 > 「6-2 文字表示回路の設計とIP設計」をPYNQ-Z1で動かす時にはまったこと](https://qiita.com/7of9/items/64f9a44f7800043b5579)
【Nuxt.js】v-forの一意なマーキングを使って削除ボタンを作る

#v-forで出現したコンポーネントを削除するボタンを実装する

###まずは、それぞれの要素にマーキングし、削除ボタンも一意化する

```vue:template
<v-col cols="4" v-for="(feed, index) in feeds" :key="index">
  <v-card>
    <v-card-actions>
      <v-btn @click="deleteFeed(index)" icon>
```

###RailsAPIに、削除リクエストを送る

```vue:script
methods: {
    async deleteFeed (index) {
      await this.$axios.$delete(`/api/v1/feeds/${this.feeds[index].id}`)
    }
  }
```

index番号から特定した、配列feedsの要素idを用いてリクエストを送る

###data内の配列feedsの要素を削除する

```vue:script
  data () {
    return {
      feeds: [
        { id: 1, title: "東京中央銀行" },
        { id: 2, title: "東京セントラル証券" },
        { id: 3, title: "電脳雑伎集団" },
        { id: 4, title: "スパイラル株式会社" },
      ],
    }
  },
  methods: {
    async deleteFeed (index) {
      this.feeds.splice(index, 1)
    }
  }
```

配列番号indexを用いて、特定の配列feedsの要素を削除している。
[spliceメソッドについてはこちら](https://qiita.com/beanbeenzou/items/bd9ad11dec2b571947a3)

##最終的なソースコード

```vue:
<template>
<v-col cols="4" v-for="(feed, index) in feeds" :key="index">
  <v-card>
    <v-card-actions>
      <v-btn @click="deleteFeed(index)" icon>
        <v-icon>mdi-close</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</v-col>
</template>
```



```vue:
<script>
export default {
  data () {
    return {
      feeds: [
        { id: 1, title: "東京中央銀行" },
        { id: 2, title: "東京セントラル証券" },
        { id: 3, title: "電脳雑伎集団" },
        { id: 4, title: "スパイラル株式会社" },
      ],
    }
  },
  methods: {
    async deleteFeed (index) {
      console.log(`${index}:${this.feeds[index].id}`);
      const res7 = await this.$axios.$delete(`/api/v1/feeds/${this.feeds[index].id}`)
      this.feeds.splice(index, 1)
      return console.log(res7.status);
    }
  }
}
</script>
```






#おまけ　一意なマーキングを要素のidにする

```vue:
<v-col cols="4" v-for="feed in feeds" :key="feed.id">
  <v-card>
    <v-card-actions>
      <v-btn @click="deleteFeed(feed.id)" icon>
        <v-icon>mdi-close</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</v-col>
```

もう一つv-forのマーキングで、idキーで付与する場合もあるが、、、複雑で冗長化するだろう。。。
Beautifulsoupでtableをjsonで取得するもっともシンプルな方法


# 環境
beautifulsoup4==4.9.1

# やり方
    
```python3
output_json = {}
table = soup.find("table", class_="table_class foo bar")
rows = table.findAll("tr")

for row in rows:
    json[row.find("td").text.strip()] = row.find("th").text.strip()

print(output_json)
```

これだけ😄   
みなさんがやる時はtableの`class_`に取得したいテーブルのクラスを書くだけ


# 参考
https://qiita.com/gaborotta/items/328d01355cd3e12bd070
Kubernetes (k8s) 管理者用GUI Lens

## Lensとは
- [lensapp/lens](https://github.com/lensapp/lens)
- k8sで動作する全てのリソースをモニタリングしてくれるGUIアプリ
- Linux/Mac/Windowsで動作する

### こんな感じ（kindで作ったクラスタ見てます）
<img width="60%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192927/271b0b50-5cc1-41a5-cad6-f4b397921273.png">

<img width="60%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192927/ba573cd6-1b72-4e50-1027-d9e44c03c692.png">

## 助かりポイント
- リソース（Pod/Namespace/CRD/etc...）がなんかおかしい  
    - `kubectl describe`でイベントを確認する -> コマンド長い -> **Lens使う**
        - 全ての名前空間のアプリを一覧できる機能がありがたい -> （`k get po -A -o wide`以上の情報✨）
    - Podのログまで見たい時は，[k9s](https://github.com/derailed/k9s)を使ってます
- クラスタをいくつも管理してる場合（Dev/Stg/(Prd) + 別PJ ...）に，コンテキスト切り替え等管理が煩雑に -> **Lens使う**
    - Slackのワークスペースに参加するかのように，左タブにクラスタを追加しすぐに切り替え確認できる✨

## 以上です．快適なk8sライフをーーー！
【Git】別のブランチにpushしたいとき

## 【Git】別のブランチにpushしたいとき
* gitで、ローカルのブランチから別名のリモートブランチにPUSHしたいときのやり方

## 方法
```
git push origin <PUSHしたいローカルブランチ名>:<PUSH先リモートブランチ名>
```

## 解説
* もともとGitのpushの際の ``` git push origin <ブランチ名> ```は、``` git push origin <ブランチ名>:<ブランチ名>```の省略形であり、```<src>:<dst>```の関係性になっている
* 上記のようになっているので、srcの位置に送りたいブランチ、dstに送り先ブランチにしてあげると、別名のブランチにPUSHできる
PHP_UMLの--helpをgoogle翻訳で翻訳

オブジェクト指向の勉強をしたくなりました。PHPを普段使っているのですが、ツールがあまり見つからずPHPSTORMなら自動生成してくれるみたいだけど、お家の環境にはないのでググったところPHP_UMLというツールを発見。
しかし使い方がわからない＆英語わからないので翻訳することにしました。

##↓もっと便利なツールを見つけて記事にしました。
クラス図を作成するもっと便利なツールみつけて記事にしました。
https://qiita.com/tdera/items/1a0dc91d37a89c22d4ba
コチラのほうが参考になるかもです。。

----

これを使って既存フレームワークの解析をしていきたいです。

#PHP_UML
結構古いツールみたいです。。でもちゃんと動いてくれればOK。
https://pear.php.net/package/PHP_UML

##-o directory
出力ディレクトリパス、またはファイル名（提供されない場合、XMIコードは画面に印刷）

##-f format, --format=format
出力フォーマット： "xmi"（デフォルト）、「html」、「htmlnew」、「php」
html / htmlnew / phpの場合、必要に応じて独自のXMIファイルを提供し、次のように渡しますargument to phpuml

##-x XMI version
生成するXMIバージョン（1または2）

##-n name
生成されたUMLモデルの名前

##-e encoding
出力文字エンコーディング

##--no-deployment-view
配置ビューの生成を無効にする

##--no-component-view
コンポーネントビューの生成を無効にする

##--no-dollar                              
変数のドル記号を削除します

##--no-docblocks
docblockの解析を無効にする（`@package`、`@param` ...）

##--show-internal
`@internal`でマークされた要素を含める
                                        
##--only-api
`@api`でマークされた要素のみを含める
                                           
##-i pattern, --ignore=pattern
無視するパターン/パス名(example: .svn)

##-m pattern, --match=pattern
一致するパターン (default is: *.php)

##-l errorLevel, --error-level=errorLevel
エラー報告レベルを設定します（0サイレントモード、PHPエラーの場合は1、例外、すべてのエラーの場合は2、警告）

##--pure-object                            
PHP_UMLが必要な場合は、このスイッチを使用します非オブジェクト指向のすべてを無視するコード

##-h, --help
このヘルプメッセージを表示して終了

##-v, --version
プログラムのバージョンを表示して終了する

#引数
`input`
解析するPHPファイルまたはディレクトリ（例：D：/ htdocs /）スペースを使用して、さまざまなエントリを区切ります。デフォルトでは、PHP_UMLは現在のディレクトリを解析します。

`例1 phpuml D:/htdocs/`
PHP_UMLは、D：/ htdocs /を再帰的に解析し、XMIコードを表示します。

`例2 phpuml /var/www/test -o /tmp -x 1 -n Foo -m *.php6 -i .svn`
PHP_UMLは/ var / www / testを再帰的に解析し、php6のみを保持します
ファイル、およびsvnフォルダーを除外します。 UMLモデルの名前は「Foo」、およびバージョン1で生成されたXMIファイルは、次の場所に保存されます「/tmp/Foo.xmi」
         

...なんかちょっと変だな。

なんか画像にしてだしてくれるツール別に見つけたのでそっち使ってみます。
https://github.com/jakobwesthoff/phuml
過去の電力使用量取得 四国電力編

# はじめに

電力使用量予測のセミナーをしていて、各電力会社の公表されている過去の使用電力量の形式がまちまちなので取得するのが難しいというご意見を聞いていました。
そこで、それぞれの電力会社別にデータの取得方法をまとめてみます。

ちなみに、対象とする電力会社は、北海道電力、東北電力、東京電力、北陸電力、中部電力、関西電力、中国電力、四国電力、九州電力、沖縄電力で、今回は四国電力さんを扱ってみます。

注：大量のダウンロードを繰り返すとサーバに負担がかかるので、ダウンロードは一回だけにするか、対象期間を限定して行うよう心がけて下さい。

# 動作環境

GoogleさんのCoraboratoryという環境で動作させます。

[Colaboratory](https://colab.research.google.com/)

# Webサイト

以下のWebサイトからデータをダウンロードできそうです。

[四国電力送配電 でんき予報](https://www.yonden.co.jp/nw/denkiyoho/index.html)

# ダウンロード

```py:
for y in range(2016, 2020):
  url = "https://www.yonden.co.jp/nw/denkiyoho/csv/juyo_shikoku_{:04}.csv".format(y)
  print(url)
  !wget $url
```

# 読込と可視化


```py:
from glob import glob
import pandas as pd

files = glob("*.csv")
files.sort()

df_juyo = pd.DataFrame()

for f in files:
  print("\r", f, end="")
  df = pd.read_csv(f, skiprows=2, encoding="Shift_JIS")
  df_juyo = pd.concat([df_juyo, df])

df_juyo.index = pd.to_datetime(df_juyo["DATE"] + " " + df_juyo["TIME"])
df_juyo.pop("実績(万kW)").plot(figsize=(15,5))
```
![Unknown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114240/3a1663d5-1965-b636-460f-82e0b0fee660.png)


できた！

沖縄電力さんの上限が140万kWh、九州電力さんは1500万kWh、四国電力さんが500万kWh...次の電力会社さんが楽しみになります！

電気使用量を見ると、色々な気付きがありますね。
以上、現場からきむらがお伝えしました。

# 補足

記事を読んだ人から「時間がかかり過ぎるので、手っ取り早くデータが欲しい場合にはどうしたら良いか？」という質問があったので、ちょっとだけデータを販売してみることにしました。
データに興味があれば以下のURLをご覧下さい。

https://ticket.tsuku2.jp/eventsDetail.php?ecd=16260900020422
初投稿！！

#投稿していく記事について
何かインターネット上にアウトプットする練習がしたい。でも何をしたらよいかわからない。
ということで、いつもお世話になっているQiitaで投稿を始めることにしました。
書く記事としては今のところ主に下の二つくらいかなと考えています。
アウトプットに慣れて様々なジャンルの記事が書けるように頑張りたいと思います！！
#AtCoder記
何か新しいシステムやアプリを作ることができないか、日々考えながら生活していますが
どうもアイディアが浮かばない。浮かんだとしてもそれは二番煎じのものであったり、
既存システムの派生したものしか浮かんでこない、、。

「どうしたらよいものか、、」と思うことは多々ありますが、兎にも角にも新しいアイディアというものは斬新な考え方と柔軟な発想からできているなぁとよく思います。

僕自身、この二つのどちらかでも持ち合わせているとよいのですが、そうじゃないのが現実。
でも、考え方や発想というものは鍛えることができると思うのでここにその日記をつけていきたいと思います。（~~こういうように宣言しないと続かないのが事実~~）
温かい目で見守ってもらえるとありがたいです。
また、「この部分こういう考えのほうがスマートじゃん！」や「もっと改善できる」などの
アイディアがあればぜひぜひお願いいたします。

#システム・アプリ開発記
アイディアを浮かべるだけでなくアウトプットもしなければいけないと思うので、AtCoder記とは別で作成途中のシステムを記事に起こしていこうと思います。
正直、開発に関してはあんまり得意ではないのでこちらの更新は少々遅めになると思います。
最近はLINEを扱って何かできないかという記事を漁りながらシステムを作成中です。
皆さんが面白そうだけど、自分ではやる気にならないと思うようなことでもアイディアの一つとして教えていただければ幸いです！

#終わりに
普段、TwitterやInstagramのアカウントを持っているのに全く投稿しない僕としてはかなり珍しく文章を書いています。自分でもびっくりです。
この調子で他の記事も続けて出せるように時間を作って頑張ります。

ではまた次回、別の記事でお会いしましょう。
CentOS8にGolangをインストールする

##概要
Golang学習用備忘録です。
今回以下URLを参考にさせていただきました。

##VMwareにCentOS8を構築
以下に記載しておりますので、
よろしければ、ご覧ください。

[Windows10にVMwareで仮想サーバを構築し、Dockerを使ってみる](https://qiita.com/tomotomo3/items/78de27556ed3ac0b27a3)

##Golangインストール/動作確認

 - Goインストール

```bash:ターミナル

#Golangインストール
dnf install -y epel-release
dnf install -y golang

#Golangバージョン確認
go version

→「go version go1.13.4」と表示される
```

 - 動作確認(Goファイル作成）

```bash:ターミナル

#動作確認用Goファイル作成
vim hello.go

#以下を追記
package main

import "fmt"

func main(){
        fmt.Println("hello world")
}

#動作確認
go run hello.go

#以下のように表示されること
hello world
```

##まとめ

次回は、Goのチュートリアルについてまとめていきたいと思います。
【Unity】ニコニコ動画みたいなコメント弾幕機能を作る

入力したコメントが右から左へ流れていくアレを実装します。

#【環境】#
・Mac OSX El Capitan
・Unity versiton:2018.3.0

#【結果】#
https://youtu.be/yNzuOzIHNgU

#【作り方】#
最終的な配置イメージ
![スクリーンショット 2020-09-07 21.25.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704563/8eed6905-5722-1a6e-43e5-61e7d53124bd.png)



まずはInputFieldを作成します。
**InputFieldコンポーネントのLineTypeをMultiLineNewLineにします。
※SingleLineのままだと日本語入力ができないので注意！**
　こちらを参考にさせていただきました。
　http://chnr.hatenablog.com/entry/2015/03/06/011559

次にシーンにTextオブジェクトを作成します。
作成したTextオブジェクトの名前をTextPrefabに変更して下記スクリプトをアタッチします。

```c#:TextPrefab.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TextPrefab : MonoBehaviour
{
    private Vector2 startPos;
    private RectTransform rectTransform;
    public float speed;
    // Start is called before the first frame update
    void Start()
    {

        rectTransform = this.gameObject.GetComponent<RectTransform>();
        float height = Screen.height;
        float MaxHeight = height / 2;
        float MinHeight = -MaxHeight;
        float width = Screen.width;
        float textHeight = rectTransform.sizeDelta.y;
        float textWidth = rectTransform.sizeDelta.x;

        //最初の位置を画面右端にする
        startPos = new Vector2(width / 2 + textWidth/2, Random.Range(MinHeight + textHeight/2, MaxHeight + textHeight / 2));
        rectTransform.localPosition = startPos;
    }

    // Update is called once per frame
    void Update()
    {
        //speedに応じて画面右から左へ流れていく
        transform.Translate(-speed * Time.deltaTime, 0, 0);

        //画面外へ出た場合は自身を削除する
        if (transform.localPosition.x < -Screen.width / 2 - rectTransform.sizeDelta.x/2) {
            Destroy(this.gameObject);
        }
    }
}
```
**TextコンポーネントのRaycastTargetのチェックを外します。
※チェックがついたままだと、テキストがボタンの上を通過する際にボタンが押せなくなるので注意！**
シーン上のTextPrefabをプレハブ化し、シーンに残っている方は削除します。

そして、Buttonオブジェクトを作成し、下記のGenerateText.csをアタッチします。


```c#:GenerateText.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;


public class GenerateText : MonoBehaviour
{

    public GameObject textPrefab;
    private Text text;
    public InputField inputField;
    public float speed = 200;
    // Start is called before the first frame update
    void Start()
    {
        text = textPrefab.GetComponent<Text>();
        inputField = inputField.GetComponent<InputField>();
    }


    public void GenerateTextPrefab()//テキストプレハブのテキストにインプットフィールドのテキストを代入して生成し、スピードを設定する。
    {
        text.text = inputField.text;
        GameObject newTextObj = (GameObject)Instantiate(textPrefab, transform.parent);
        newTextObj.GetComponent<TextPrefab>().speed = speed;
      
    }
}
```

InspectorでTextPrefab,InputFieldを代入。
Speedは任意の値を入れてください。
（だいたい200以上がいい感じです）

ButtonコンポーネントのOnClick()の＋ボタンをクリックして新しい項を作成し、自身のButtonオブジェクトを入れます。
プルダウンからGenerateText/GenerateTextPrefabを選択します。
これでボタンを押すとTextPrefabが生成される機能が実装されました。

![スクリーンショット 2020-09-07 9.18.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704563/eda334b0-c0de-2a4c-16d6-f610c8a55ab8.png)

本家のディテールに合わせるなら、文字数に合わせて速度が変えるとよさそう。
あとは文字数に合わせてTextPrefabのサイズを変更するとベター。
実装したら追記します。
コピペで簡単！NLogをすぐに使えるようにしたい人へ

`NLog`はWindows界隈で有名なロガーライブラリです。それゆえに情報はたくさん出てくるのですが、とりあえず細かいことはおいておいてすぐに`NLog`を使いたい！という人向けに超ざっくりと導入手順をまとめました。

# インストール方法

NuGetパッケージの管理から`NLog.Config`をインストールします。

```
Install-Package NLog.Config
```

インストールが完了すると、`NLog.Config`というXMLファイルが自動生成されます。
自動生成されたものでとりあえず十分なのでこのまま使います。

# ラッパークラスを用意する

このままだとログ出力をするのに各クラスで`Logger`クラスのインスタンスを生成しなければならず手間なので、以下のようなラッパークラスを用意します。

```cs:LogUtil.cs
public static class LogUtil
{
    private static readonly Logger _logger = LogManager.GetCurrentClassLogger();

    public static void Trace(string message)
    {
        _logger.Trace(message);
    }

    public static void Info(string message)
    {
        _logger.Info(message);
    }

    public static void Debug(string message)
    {
        _logger.Debug(message);
    }

    public static void Warn(string message)
    {
        _logger.Warn(message);
    }

    public static void Error(string message)
    {
        _logger.Error(message);
    }
}
```

# 使い方

以下のように呼び出すだけです。

```cs
LogUtil.Debug("ログ出力");
```

# 参考URL

- [NLogでログを記録する - Qiita](https://qiita.com/hsagae/items/9f09e6ee204745fd2481)
- [C# NLog チュートリアル - Qiita](https://qiita.com/developpermanati/items/1de20d836070f42049cf)
PCNSE体験記（2020/9/7）

# はじめに
PCNSE（PCNSE: Palo Alto Networks Certified Network Security Engineer）に合格したため、参考までに合格までのプロセスについてこちらに簡単に記しておこうと思います。
　※Palo Altoについては日本語でのソースが少ないので、本記事が学習のとっかかりになればと思います。
いくつか資格のエントリーがある中でも、PCNSEはPalo Alto Firewallの設計/構築/実装/運用/トラブルシュートにまつわる包括的かつ実務的な理解を求められる、上位資格となります。
なお、学習期間は2か月程度となります。
　※もちろん張り付きで勉強していたわけではないです。

# 前提
## 対象読者
・メーカー問わずファイアウォール（NGFW）の概念を理解している、または運用や構築の経験がある方

## 留意事項
・試験形式や内容、申し込み方法等の情報は適宜公式のソースを確認されてください。
・本記事で紹介する外部リソース（特に、「４．過去問対策」で紹介する外部サイト）に関して、情報の信頼性については担保できかねます。参考までに留め、自己の責任の下で利用を検討されてください。

# 学習ステップ
## 概要
１．NGFWのおさらい
２．自習環境の構築
３．試験概要の把握
４．過去問対策

## ステップ
### １．NGFWのおさらい
私自身は、学習を始める前までに2年程度Paloの運用経験はありましたが、そもそものNGFWの背景や目的については日々の業務の中で意識しておりませんでした。（App-ID, User-ID, Content-IDなど）
実務で全て求められるかはさておいて、試験で問われる使用や機能に関する内容は多岐にわたりますので、まずは前提の概念理解を深められることを推奨します。

こちらでNGFWの特徴が簡単にまとめらておりますので紹介します。
[Next-Generation Firewalls For Dummies]
https://www.csuc.cat/sites/default/files/docs/ngfw_for_dummies_ebook.pdf

### ２．自習環境の構築
まったくPaloに触れてない方については、知識の定着が遅くなると思うので、一度Virtual Lab等の動かせる環境をネット上でみつけることをお勧めします。実装まではせずとも、ダッシュボードや各種設定がどこに位置しているかを押さえるだけでもイメージしやすいかと思います。


### ３．試験概要の把握
公式のStudy Guideが出ており、内容や出題の比重はもちろん例題についても詳細に書かれています。全て血眼になって覚える必要はないですが、試験対策としてはマストの教材になります。

[PALO ALTO NETWORKS PCNSE STUDY GUIDE]
https://www.paloaltonetworks.com/content/dam/pan/en_US/assets/pdf/datasheets/education/pcnse-study-guide.pdf

また、過去に試験対策に特化したイベントが催されており、資料や動画も下記のSlackより見ることができます。
[PCNSE Slack]
https://pcnse.slack.com/

### ４．過去問対策
EXAMTOPICS
https://www.examtopics.com/exams/palo-alto-networks/pcnse/

# 所感
資格取得全般に通じることかと思いますが、限りある時間の中でポイントのみ押さえて対策を進めることをお勧めします。PCNSEで問われる仕様や機能は広範囲ですが、実環境では実装されている設定はもちろん全てではないです。概要やおおまかな仕組みを理解したら、過去問対策の段階に移られることを推奨します。具体的な実装は資格を取得した後に実務で学べばいいと思うからです。
セッションハイジャック対策

#はじめに

最近、セキュリティの勉強をよくすることが多くなったのでそのことについて記事にして皆さんに分かりやすく教えることが出来たらと思い記事にさせて頂きます。今回は、セッションハイジャックについて説明させて頂きます。

#目次

1. セッションハイジャックとは
2. セッションハイジャック種類
3. セッションハイジャック対策
4. さいごに

# セッションハイジャックとは
まず、最初にWebはスタートレスに出来ているのでECサイトやログイン機能があるサイトでは、さっきこのサーバーに来た人物はAさんだと判断することが出来ません。そのために、考案されたのがセッションという機能です。(実際には、Cookieといった機能が最初に出来たのですが、セキュリティのことを考えてセッションが開発されました)AさんにはこのセッションID、BさんにはこのセッションIDと割り振ることで判断しています。

実際にPHPでセッションIDを見たい場合は、このように表示することで確認することが出来ます。

```php

<?php

session_start();
echo session_id(); // セッションIDが表示される

?>
```

セッションハイジャックとは、このセッションの情報を第三者が乗っ取りその人物になりきりサイトにログインをすることを言います。

#セッションハイジャックの種類
セッションハイジャックには主に3種類あります。

**セッションの推測**
**セッションの盗聴**
**セッションID固定攻撃**

まず、セッションの推測は第三者がセッションのIDを推測してユーザーが利用していたサイトにそのセッションIDを使用してアクセスすることを言います。

セッションの盗聴は、通信を傍受して盗むことです。また、XSSなどのサイバー攻撃を使用して第三者が作ったサイトに誘導してセッションIDを盗み出すことです。例えば、SNSのサイトでこのURLを押して下さいと第三者が作ったURLに誘導します。そのサイトにはXSSという脆弱性が仕込まれており知らないうちにそのSNSサイトのセッションIDが盗まれてしまうのです。

セッションID固定攻撃は、今までとは逆の発想です。第三者がユーザーに対してこのセッションIDを使用して下さいといったことを送りユーザーはそのセッションIDを使用してサイトにログインすると、第三者はそのセッションIDを使用してサイトにアクセスすることが出来るようになります。例えば、ユーザー宛にSNSのURLのパラメータとして`https://aaa@example.com?PHPSESSIONID=1111`といったSNSのURLを送りユーザーがこのURLのリンクを開くとセッションIDがこの値になってしまいます。そして、このセッションIDを使用するといったことです。

#セッションハイジャック対策
最初に、セッションIDをURLに含めないといったことがあります。
セッションをやり取るする時に、セッションIDをcookieに格納してやり取りする、hiddenに格納してやり取りする、URLに格納してやり取りするとあるのですが、最初の二つは利用していいのですがURLに格納してやり取りするのは、第三者に盗聴される可能性が高くなるります。

次に、セッションIDを推測されてしまう値に設定しないといったことがあります。Webアプリケーション開発ツールやフレームワークに実装されているセッション管理を利用するといいでしょう。

最後に、ログイン時に新しいセッションIDを生成するようにすることです。
PHPでそのやり方をするには、下記のやり方をします。

```php
session_start();
echo session_id();
session_regenerate_id; // 新しい、セッションIDを生成する
echo session_id(); // 上のセッションIDとは違うIDが生成されます
```

#さいごに
最近、よくプログラミングをする人が増えてきており沢山の人々が、サイトを作っていますがその際に速さを意識しすぎてセキュリティは後回しといった人が多い可能性があるので、セキュリティも気にしながらサイトを作ることを心がけましょう。

#参考文献

[セッションハイジャック- Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%8F%E3%82%A4%E3%82%B8%E3%83%A3%E3%83%83%E3%82%AF)
[セッションハイジャックとは？](https://siteguard.jp-secure.com/blog/what-is-session-hyjack)