OmniAICreator/Qiita-1.07M huggingface dataset:
postgreSQLでCドライブ容量が圧迫した場合の対処法

postgreSQLの学習をしていて、デフォルトでpostgreが入っているCドライブの容量がいっぱいになってきてしまいました。

大量のレコードを今後も入れる必要があったので、新たにD
ドライブにテーブルスペースを作成し、容量をこれ以上増やさないようにしていきます。

### 前提
Windows10
postgreSQL 11
postgreSQLはCドライブで展開されている。
空き容量としてDドライブがある。

### データベースへの接続

データベースに接続（postgresのデータベースに接続）

※おそらく、デフォルトでpostgresになっている。

```sql
postgres-# \c postgres
データベース"postgres"にユーザ"postgres"として接続しました。
postgres-#
```

### テーブルスペースの作成

SQLshell(psql)を起動し、コマンドを入力。

```sql
postgres=# CREATE TABLESPACE test_data LOCATION 'D:\test_data';
CREATE TABLESPACE
postgres=#
```

LOCATIONの後に、テーブルスペースを保存する場所を記入する。保存場所は、前もってユーザー様に許可をもらった上でディレクトリを作成しておかなければならない。

作成したテーブルスペースの確認は下記コマンド。

```sql
postgres=# \db
                テーブル空間一覧
       名前        |   所有者    |     場所
-------------------+-------------+--------------
 pg_default        | postgres    |
 pg_global         | postgres    |
 test_data           | postgres    | D:/test_data/
(3 行)
```

★権限を設定できませんでした:Permission denied とエラーが出てしまったら、ディレクトリの場所を変える。D:直下なら、おそらく大丈夫。ディレクトリの場所が入力間違いしてないか確認。CとD間違えがち。

★同じディレクトリで既にテーブルスペースが使用されているとエラーになってしまう。
★pg_で始まるテーブルスペース名はつけることができない。



####　テーブルを作成する

スキーマを指定せずにテーブルを作成すると、デフォルトでpublicスキーマ内にテーブルが作成される。
↓現在のスキーマが確認できる。

```sql
postgres=# select current_schema;
 current_schema
----------------
 public
(1 行)
```

### テーブルを作成する。**テーブルスペースと紐づかせる為の記述もする。**

```
 CREATE TABLE テーブル名(カラム、データ型) TABLESPACE テーブルスペース名;
```


以下、例。

```sql
CREATE TABLE testtable (
  red bigint not null,
  blue varchar(10000) not null,
  yellow varchar(10000) not null,
  green varchar(10000) not null,
  pink numeric not null,
  orange integer not null,
  black varchar(10000) not null)
  TABLESPACE test_data;
```

これで、今後testtableにレコードをロードしていく時にはCドライブではなくてDドライブにあるテーブルスペース側にロードされていく。




参考：https://goodbyegangster.hatenablog.com/entry/2019/05/01/011747
Laravel + Inertia + Vueで簡単にAPI実装する

# はじめに
2021年明けましておめでとうございます！
2020年は色々あり、コロナに翻弄された年でした。
この逆境に立ち向かい、社会に貢献されているすべての皆様に敬意を表させて頂きます。
恐らく2021年も、変わらずな環境下であると思われますが…皆様同様に私も負けじと頑張ります。

さて…PHPerの皆様、Laravel8をガンガンお使いでしょうか？
Laravel8では、Laravel JetstreamというUIライブラリが用意されており、簡単にアプリケーションを作ることができるようになりましたね。
このJetstreamは、以前から似たようなものがありましたが、より簡単に作ることができるようになりました。
CSSをBootstarpからTailwind CSS に変更しており、より柔軟にCSSを使いUIを作ることができます。
さらに、実装においては、Livewireを用いてBladeを利用するか、Inertia.jsを用いてVueを利用するかを選択することができます。
Laravel8を触ってから、Inertiaを初めて知ったのですが、非常に理にかなった思想で便利だったので、そのInertiaについて書こうと思います。

# Inertiaとは？
Inertiaは、「Modern Monolith（モダン　モノリス）」という事を謳っています。
マイクロサービスが広まる中、モノリシックは時代錯誤な気がしますよね。
フロントエンド + バックエンドの構成では、APIを設計し実装し、フロントではそれを呼び出して描写する…これを書くAPI毎に毎回書くわけで、よく考えればこれは冗長ではないでしょうか？
Inertiaはその「毎回書くこと」をライブラリで吸収して、実装を簡単にするためのライブラリです。
API設計は必要ありません、APIの呼び出しも必要ありません。
変数やルーティングは、バックエンドの実装をもとにフロントエンドの変数のアサインやルーティングを作成してくれます。
フロントエンド + バックエンドの構成でありながら、サーバーサイドテンプレートを扱うように（モノリシックであるかのように）、　実装が可能です。
なので、ModernでありながらMonolithなもの、というわけです。

![inertia_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187496/6d4d3fba-518e-cdcb-c8b6-08304d24ef7c.png)

![inertia_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187496/ad65e3c9-9f26-2244-0b06-d975bd582e5c.png)

# 実装サンプル

#### routes/web.php

```php
<?php

use Illuminate\Support\Facades\Route;

// 通常のroutingです。
Route::resource('/user','App\Http\Controllers\UserController');

```

#### UserController.php

```php
<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;

class UserController extends Controller
{
    public function index()
    {
        // Inertia::renderを呼び出す事で、どのコンポーネントに対して
        // どの変数をセットするかをここできめ、vueにも反映させることができます。
        return Inertia::render(
            'User/Index',
            ['users' => User::all()]
        );
    }
    
    // show
    // create
    // store
    // edit
    // update
    // destroy
}

```

#### resources/js/Pages/User/index.vue

```vuejs

<template>
  <layout title="Users">
    <div v-for="user in users" :key="user.id">
      <inertia-link :href="`/users/${user.id}`">
        {{ user.name }}
      </inertia-link>
      <div>{{ user.email }}</div>
    </div>
  </layout>
</template>

<script>
import Layout from '../Shared/Layout'

export default {
  components: {
    Layout,
  },
  /* Controllerで指定した変数をpropsで受け取るため、同じ変数名を指定します。
    IFはInertiaにおまかせです。
  */
  props: {
    users: Array,
  },
}
</script>
```

vue側でのルーティングは、Vue Routerを使わずに、Inertia側で受け持ちます。
その為、this.$route.params等は使えず、laravel側からパラメータは受け渡すことになります。
* vueを触っていると使えるのが当たり前だと思っており、使えず若干ハマりました…。

# まとめ
実装サンプルのように、APIのレスポンス時も、フロントで受け取る側もいつもの記述は必要がないことがわかります。
実はコンポーネントの設計もある程度もInertiaの設計に引っ張られる為、構成が整っていいかもしれません。
デメリットとしては、ブラックボックス化してしまう事くらいでしょうか。
ただフレームワーク自体もある程度ブラックボックス化しているわけで、それと同じようなものだと考えれば、気にならないくらいのレベルです。
メリットとしては、「バックエンドテンプレートと似たような感じでVueを使える」「APIやりとりのコードが極端に減る」等です。

是非、モダンモノリスなライブラリ「Inertia」を使って見てください。

それでは今年も頑張りましょう！
【Rails奮闘記/Railsチュートリアル編】Herokuコマンドのまとめ

## はじめに
あけましておめでとうございます。
今日から2021年になりました。
本年度もよろしくお願いします。
今回はRailsチュートリアルのHerokuコマンドについて自分で学習したことを簡単にまとめました。
ここではHerokuのアカウントの新規アカウントの作成とHerokuをインストールについては省略します。

## Herokuコマンド
Herokuがインストールされてるかどうかを確認したいとき

```
$ heroku --version
```

Herokuを開かずにログインしたいとき

```
$ heroku login --interactive
```

Herokuに新しいアプリケーションを作成したいとき

```
$ heroku create
```

Gitを使ってHerokuにリポジトリをプッシュ

```
$ git push heroku master
```

アプリケーションの名前を変更したいとき

```
$ heroku rename （アプリの名前）
```

本番環境のログを取得したいとき

```
$ heroku logs
```

イベントが発生するたびに自動表示（Ctrl+Cで終了）

```
$ heroku logs --tail 
```


## 終わりに
今回はHerokuコマンドについて簡単に復習としてまとめました。
開発環境ばかりに集中して本番環境に手が回らないという人が多いのではないでしょうか？
実際、私も開発現場に入るまでは開発ばかりに気を取られてしまうことが多かったです。
本番環境にも目が行き届く余裕が欲しいと思う2021年になりそうです。
【Android / Kotlin】フォーム（EditText）入力の際、背景タップで表示キーボードを閉じる

#はじめに
Androidアプリ開発（Kotlin）で学んだ内容を備忘録として残します！

# どのような機能か？
##### 場面

- フォーム（EditText）にフォーカスが当たっている
- 入力用キーボードが表示されている

##### 動作
上記の状態で背景画面をタップするとキーボードを閉じる


というもの

# 実装
#### Activity

```MainActivity.kt

// ~ 省略 ~

// Viewがタッチされる時に処理が走るメソッド
override fun onTouchEvent(event: MotionEvent?): Boolean {
    // InputMethodManager をキャストしながら取得
    val inputMethodManager: InputMethodManager = 
        getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager

    // エルビス演算子でViewを取得できなければ return false
    // focusViewには入力しようとしているのEditTextが取得されるはず
    val focusView = currentFocus ?: return false
        
    // このメソッドでキーボードを閉じる
    inputMethodManager.hideSoftInputFromWindow(
        focusView.windowToken,
        InputMethodManager.HIDE_NOT_ALWAYS
    )

    return false
}
```

これだけ。

##### ちなみに 
キーボードを閉じるメソッドは``InputMethodManagerクラス``ではこのように定義されている。

```InputMethodManager.java
public boolean hideSoftInputFromWindow(IBinder windowToken, int flags) {
    return hideSoftInputFromWindow(windowToken, flags, null);
}
````

## 共通化したらこんな形になりそう（おまけ）
#### 共通化ファイル
objectで定義

```KeyboardUtils.kt
object KeyboardUtils {
    fun hideKeyboard(focusView: View) {
        val inputMethodManager: InputMethodManager =
            focusView.context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        inputMethodManager.hideSoftInputFromWindow(
            focusView.windowToken,
            InputMethodManager.HIDE_NOT_ALWAYS
        )
    }
}
```

#### Activity
Activityで呼ぶ

```MainActivity.kt
// ~ 省略 ~

override fun onTouchEvent(event: MotionEvent?): Boolean {
    val focusView = currentFocus ?: return false
    KeyboardUtils.hideKeyboard(focusView)

    return false
}
```




## 補足
``Activity``に実装していれば、関連する``Fragment``でも同様に動作するため``Fragment``には実装の必要なし

# スペシャルサンクス（参考にさせていただいた資料）
- https://developer.android.com/reference/android/view/inputmethod/InputMethodManager
- http://blog.lciel.jp/blog/2013/12/03/android-touch-event/

# 最後に
簡単な短い記事でしたが、誤り、ご指摘などあればコメントいただければ幸いです！

ありがとうございました！！
plotlyで3次元表示

今年の年賀状の中心のなる図では、海洋予測モデルの流速を3次元地形と一緒に表示した。
![2021nenga2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77672/ce1e8b85-8975-4211-c43c-0d55d3b7ccd4.gif)





[plotly]
(https://plotly.com/python/)で作成した。Jupyterlab上でぐりぐり動かすこともできる。
![8e4cfffd10104cc389c5bd302683c667.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77672/99e8e040-7e2b-e521-ab40-c40781d78702.gif)

データを読み込む所は省略して、図を描く部分のコードは以下の通り。
go.Surfaceが3次元的に地形を描くところで、xがx軸、yがy軸、地形のデータがzに入っている。Ctopoは彩色のためのカラースケール。
go.Coneが流速のベクトルを3次元コーンで表現した部分。(xv,yv,zv)に3次元座標、(uv,vv,wv)に3次元ベクトルデータが入っている。
layoutでは図のアスペクト比を変えたり、座標軸を表示させなくしたりしている。

```python
import plotly.graph_objects as go


Ctopo = [[0, 'rgb(0, 0, 70)'],[0.2, 'rgb(0,90,150)'], 
          [0.4, 'rgb(150,180,230)'], [0.5, 'rgb(210,230,250)'],
          [0.50001, 'rgb(0,120,0)'], [0.57, 'rgb(220,180,130)'], 
          [0.65, 'rgb(120,100,0)'], [0.75, 'rgb(80,70,0)'], 
          [0.9, 'rgb(200,200,200)'], [1.0, 'rgb(255,255,255)']]

fig = go.Figure(data=[go.Surface(z=z, x=x, y=y,showscale=False,colorscale=Ctopo,cmin=-3000,cmax=3000),
                      go.Cone(x=xv,y=yv,z=zv,u=uv,v=vv,w=wv,sizemode="absolute",sizeref=0.05,colorscale="turbo",opacity=0.5,cmin=0,cmax=1.5,showscale=False)])


noaxis=dict(showbackground=False,
            showgrid=False,
            showline=False,
            showticklabels=False,
            ticks='',
            title='',
            zeroline=False)


fig.update_layout( 
    width=1500, height=500,
    margin=dict(l=0, r=0, b=0, t=0),
    scene_aspectmode='manual',
    scene_aspectratio=dict(x=2, y=1, z=0.7),
    scene = dict(
        xaxis = noaxis,
        yaxis = noaxis,
        zaxis = noaxis)
    )
fig.show()
```
複数サイトをまとめて自動で表示する方法

下記内容をメモ帳にペーストして名前をweb.vbsで保存する。
web.vbsをダブルクリックすると複数サイトが表示されます。

```
Option Explicit

Dim owsh
Dim ret
Dim strUrl(10)
Dim intCnt

Set owsh = CreateObject("WScript.Shell")

strUrl(0) = "https://www.ameba.jp/home"
strUrl(1) = "https://www.facebook.com/"
strUrl(2) = "https://twitter.com/home"
strUrl(3) = ""
strUrl(4) = ""
strUrl(5) = ""
strUrl(6) = ""
strUrl(7) = ""
strUrl(8) = ""
strUrl(9) = ""
strUrl(10) = ""

For intCnt = 0 To UBound(strUrl) Step 1
   If strUrl(intCnt) <> "" Then
      ret = owsh.Run("chrome"+" " + strUrl(intCnt), 1, False)
   End If
Next

Set owsh = Nothing
```
macOS Big Sur にアップグレードした後にpyenv installできなくなった際の私の場合の解決方法



##やろうとしたこと&遭遇したエラー

1. macでpyenvで複数バージョンインストール&バージョン切り替えできる環境が機能していた (python 3.6 3.8系列)
2. macOS Big Sur にアップグレードした
3. 3.6 3.8系列の別バージョンを```pyenv install```でインストールしようとすると以下のようなエラーでインストールが完了しなくなった

```shell
BUILD FAILED ...
...
Last 10 log lines:
./Modules/posixmodule.c:8210:15: error: implicit declaration of function 'sendfile' is invalid in C99 [-Werror,-Wimplicit-function-declaration]
        ret = sendfile(in, out, offset, &sbytes, &sf, flags);
...
```

この件多くの方が遭遇していたようで、[pyenvのGitHub issue](https://github.com/pyenv/pyenv/issues/1737)で解決策が議論されていました。このページを参照しつつ私の環境で解決できた際のオペレーションをメモします。


##環境

- macOS Big Sur 11.1
- Big Sur アップグレード前にXcodeインストール済み
- pyenv 1.2.21 (python 3.6 3.8系列利用中)
- シェルはzsh

##解決したオペレーション

#####xcodeのツールを再インストール

```shell
sudo rm -rf /Library/Developer/CommandLineTools
xcode-select --install
```

#####brewで2パッケージをreinstall

```shell
brew reinstall zlib bzip2
```

#####~/.zshrcに以下を追加

```shell
export PATH="$HOME/.pyenv/bin:$PATH"
export PATH="/usr/local/bin:$PATH"

eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"
export LDFLAGS="-L/usr/local/opt/zlib/lib -L/usr/local/opt/bzip2/lib"
export CPPFLAGS="-I/usr/local/opt/zlib/include -I/usr/local/opt/bzip2/include"
```

追加した変更を有効にするために、ターミナルを開き直しました。
この時点で、自分の環境ではバージョン3.8系列は```pyenv install```でインストールできるようになっていました。

#####バージョン3.6系列のインストール
これで3.6系列も入るか?と```pyenv install 3.6.12```とやってみましたが、最初のエラーが出てしまいました。そこで[参照ページ](https://github.com/pyenv/pyenv/issues/1737)に従って以下コマンド(1行です)を打つとバージョン3.6.0のインストールに成功しました。

```shell
CFLAGS="-I$(brew --prefix openssl)/include -I$(brew --prefix bzip2)/include -I$(brew --prefix readline)/include -I$(xcrun --show-sdk-path)/usr/include" LDFLAGS="-L$(brew --prefix openssl)/lib -L$(brew --prefix readline)/lib -L$(brew --prefix zlib)/lib -L$(brew --prefix bzip2)/lib" pyenv install --patch 3.6.0 < <(curl -sSL https://github.com/python/cpython/commit/8ea6353.patch\?full_index\=1)
```

続いてバージョン番号のみを変えて以下コマンドを打つとバージョン3.6.12のインストールにも成功しました。

```shell
CFLAGS="-I$(brew --prefix openssl)/include -I$(brew --prefix bzip2)/include -I$(brew --prefix readline)/include -I$(xcrun --show-sdk-path)/usr/include" LDFLAGS="-L$(brew --prefix openssl)/lib -L$(brew --prefix readline)/lib -L$(brew --prefix zlib)/lib -L$(brew --prefix bzip2)/lib" pyenv install --patch 3.6.12 < <(curl -sSL https://github.com/python/cpython/commit/8ea6353.patch\?full_index\=1)
```

##参照文献

https://github.com/pyenv/pyenv/issues/1737
rubyで住所文字列から最寄駅までの距離を取得してみた

rubyで住所から最寄駅の情報を取得できる様にしてみました。


## やったことざっくり
1. Yahoo APIで住所からを緯度経度を取得
2. Heart Rails APIで緯度経度から最寄駅情報を取得

##　実行環境
1. ruby2.7.2
2. mac catalina
3. 実行日時 2021/01/01


## 1. Yahoo APIで住所からを緯度経度を取得
### 1.1 yahoo app ID 取得
ここで取得する
https://e.developer.yahoo.co.jp/dashboard/

### 1.2 リクエストする
・リクエストする住所をurl様にエンコード
・open-uriでリクエストする
レスポンスはこんな感じ
![スクリーンショット 2021-01-01 14.58.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139714/ff290021-3dd6-256b-d380-da937bc32841.png)


### 1.3 レスポンスから緯度経度をスクレイピング
REXMLを使って取得します。
coordinatesタグに格納されてます。

## 2. Heart Rails APIで緯度経度から最寄駅情報を取得
### 2.1 1.で取得した緯度経度でリクエストする
urlはこちら

```
http://express.heartrails.com/api/xml?method=getStations&x=#{lon}&y=#{lat}"
```

返ってくるレスポンスはこんな感じ  (近い順に複数返ってきてます:eyes:)
![スクリーンショット 2021-01-01 14.59.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139714/4f5ccc29-3065-6000-482a-68f503f3028d.png)


### 2.2 返ってきた最寄駅情報をスクレイピングする
上記の様にstationタグに駅情報が入っています。
複数の駅情報が含まれるので最初のstationタグを指定します。

## 完成したコード
コードはこんな感じになります。

```ruby

require 'open-uri'
require 'uri'
require "rexml/document"

## 1. request Yahoo API

### 1.1
YAHOO_APP_ID = '[Yahoo app_id]'

### 1.2
ADDRESS ='東京都千代田区千代田１番１号'
p ADDRESS
query = URI.encode_www_form(query: ADDRESS) ## エンコーディング

request_url = "https://map.yahooapis.jp/geocode/V1/geoCoder?appid=#{YAHOO_APP_ID}&#{query}"

### 1.3 
res = OpenURI.open_uri(request_url)

doc = REXML::Document.new(res.read)
coordinates = doc.elements['YDF/Feature/Geometry/Coordinates'].text
lon,lat = coordinates.split(',')

p "経度 = #{lon} , 緯度 = #{lat}"

## 2. Heart Rails API

### 2.1 1.で取得した緯度経度でリクエストする
heart_rails_request_url = "http://express.heartrails.com/api/xml?method=getStations&x=#{lon}&y=#{lat}"


### 2.2 返ってきた最寄駅情報をスクレイピングする
res = OpenURI.open_uri(heart_rails_request_url)
doc = REXML::Document.new(res.read)

station = doc.elements['response/station[1]']
name = station.elements['name'].text
line = station.elements['line'].text
distance = station.elements['distance'].text
p name
p line
p distance
```
### 実行結果

皇居(東京都千代田区千代田１番１号)で最寄駅をリクエストしてみた結果。

```ruby

"経度 = 139.75381447 , 緯度 = 35.68382285"
"桜田門"
"東京メトロ有楽町線"
"740m"
```
HerokuにDockerのコンテナをpushするときに出たエラー「no basic auth credentials」の解決策

## 問題
HerokuにDockerのコンテナをコマンド「`heroku container:push web`」にてpushしようとすると、下記エラーが発生する。

```
no basic auth credentials
 !    Error: docker push exited with Error: 1
```

## 解決策
下記コマンドにてherokuにログインする。

```
heroku container:login
```

## 参考
1. [stackoverflow：『Deploy docker images to heroku』](https://stackoverflow.com/questions/61959667/deploy-docker-images-to-heroku)
GitHubへpushする際、RPC failed; curl 55 SSL_write() returned SYSCALL, errno = 32　エラーが発生　（完全備忘録）

Githubへpushしようとした際に、

```
RPC failed; curl 55 SSL_write() returned SYSCALL, errno = 32
fatal: the remote end hung up unexpectedly
```
初めてのエラーで何が起きているのか分からず、とりあえず何が起きているのか知るためにググる。。

## エラーの意味
一度に多数かつ大容量のファイルをpushしようとするとデータの受け手側でチャンクが発生し、メモリが足りないことから発生している。

自分の場合はここの時点で、かなりの違和感...
・　今回発生したタスクでは、gemの追加も、大容量のファイルを扱う実装はしていない。
・　ブランチを分け、細かくコミットしてpushする事を意識していた

..なぜ？？（とりあえず、解決方法を探す）

## 行ったこと①
「http.postBuffer」の設定を変更する。　（gitのhttp通信制限を増やしてみる）

```
$ git config --global http.postBuffer 524288000
```
結果：　→　ダメ

更に倍にしてみる..


```
$ git config --global http.postBuffer 1048576000
```
結果：　→　ダメ


## 行ったこと②
一度にpushせずに、コミットID毎に分けてpushしてみる。

```
$ git push <remotename> <commit SHA>:refs/heads/<new remote branch name>
```
結果：　→　ダメ


##### 詰まり始めてきたので、現状を整理する。。
コミット数も少なく実装内容は大容量データではないのにpushできない。

どこかのタイミングでホームディレクトリでgit init を実行してしまった..とか？....汗
とりあえず、以下を実行してみる。

```
$ pwd
$ ls -a ~/.git
```

```
結果：
$ ls -a ~/.git
.               HEAD            description     info            refs
..              config          hooks           objects
```

・・・（汗）

今回のエラー原因は、`git init`を浅い階層で実行してしまったことが原因。
それによって、おおよそ全てのファイルが Gitの管理下になってしまったことで，容量が大きすぎてプッシュできない（というよりプッシュしてはいけない）状態になっていた。

原因が分かったので、
浅い階層に作成してしまったGitローカルリポジトリがあることが、確認できたので次の２つの流れで作業する。

①　現状のGitの管理下を確認
②　浅い階層に作成してしまったGitローカルリポジトリを削除していく


##### 【ここで確認しないといけないこと】
最新のGitHubのリポジトリを確認して、アプリ以外のファイルが入っているかどうかを確認する

アプリ以外のファイルが入っている　　→　GitHubのリポジトリごと一旦削除しなければならない

アプリ以外のファイルが入っていない　→　ホームディレクトリのローカルリポジトリを削除する（GitHubのリポジトリは削除しなくていい）

```
$ rm -rf ~/.git　　（Gitローカルリポジトリを削除）
```

##### 【ルートディレクトリやデスクトップの方も確認しておく】

```
$ ls -a /.git
$ ls -a ~/Desktop/.git
```
もし、ファイルが表示されるなら以下も実行する

```
$ rm -rf /.git
$ rm -rf ~/Desktop/.git
```

##### 【何が起きていたか】
ホームディレクトリでgit init を実行した形跡があるということは，普段使用しているほぼ全てのファイルがGitの管理下に入っていたことになる。
つまり，その状況でプッシュに成功していた場合はリポジトリにアプリ以外の内容が入っている可能性がある。



##### 【コミットの差分を確認】

```
$ git diff HEAD~ HEAD
```

##### 【ローカルとGitHubのコミット履歴の違いを確認】
```
$ git log --oneline -5
$ git fetch
$ git log --oneline -5 origin/現在のブランチ名 (今回は　"master")
```

次に、

##### 【変更のあったファイルを確認】

下記コマンドで変更のあったファイルを確認できる。
（大量にファイルが表示されたり、アプリのファイル以外が含まれていた場合は，不要なコミットを削除する必要がある）

```
$ git diff --stat HEAD~ HEAD
$ git diff --stat HEAD~~ HEAD~
```

##### 【個別のコミットを確認する場合】

```
$ git diff --stat コミットID HEAD
```

##### 問題がありそうな差分がなさそうであれば、「浅い階層に作成してしまったGitローカルリポジトリを削除」
```
$ rm -rf /.git
$ rm -rf /Users/.git
$ rm -rf ~.git
$ rm -rf ~/Desktop/.git
$ git fetch
$ git rebase origin/master

# コンフリクトが起きた場合、次は実行しない
$ git diff --stat origin/master HEAD
```

ここまでやって、pushすると...


pushできました！！ ^^


`git init`は意外と危険なコマンド。
必ずカレントディレクトリを確認してから実行するようにします！（汗）

失敗からも学んでいかないとです..　^^;

アドバイス頂けた、エンジニアの方には感謝します！
ありがとうございました！


## 参考サイト
[Git公式ドキュメント](https://git-scm.com/docs)
https://core-tech.jp/blog/article582/
https://bufferings.hatenablog.com/entry/2018/05/22/075014
https://stackoverflow.com/questions/6842687/the-remote-end-hung-up-unexpectedly-while-git-cloning
C# Blazor 書初め

# C# Blazor 書初め

正月ってことで書初め。自分メモとして履歴残します。

## やったこと

https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/build-a-blazor-app?view=aspnetcore-5.0

これをやって要点をまとめました。コピペで10分で確認できるようにまとめてあります。

## 入れたもの

フォントは最近お試しで使い始めているもの。ゼロ0とオーOが違うなどのPG向き。

- VSCodeUserSetup-x64-1.52.1
- dotnet-sdk-3.1.404-win-x64
- JetBrainsMono-2.221

## TL;DR

こまけぇこたぁいいんだ。これだけやれば理解できた気になれる。

### プロジェクト生成

- cd /c/git
- dotnet new blazorserver -o TodoList
- cd TodoList

### アプリ起動

watch でファイル変更時にリコンパイルかかる。

https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/dotnet-watch?view=aspnetcore-5.0

- dotnet watch run

### page追加

- dotnet new razorcomponent -n Todo -o Pages

Pages/Todo.razor

```C#
@page "/todo"

<h3>Todo</h3>

@code {

}
```

@page "/todo" を書くことでURLが解釈される。書かないと

Sorry, there's nothing at this address.

が出てページなしエラーとなる。
ルーティングを各ページに書くのね・・・メモメモ。

https://docs.microsoft.com/ja-jp/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-5.0

### menu追加

Shared/NavMenu.razor

```C#
<li class="nav-item px-3">
    <NavLink class="nav-link" href="todo">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
    </NavLink>
</li>
```

ここまで書けば、メニュークリックで新しい表示が出来ます。

### 処理追加

プロジェクト (TodoList フォルダー) のルートに TodoItem.cs ファイルを追加します。

TodoItem.cs

```C#
public class TodoItem
{
    public string Title { get; set; }
    public bool IsDone { get; set; }
}
```

razor側にもコード追加

Pages/Todo.razor

```C#
@page "/todo"

<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

```

え、インポート文とかいらないの？F12で参照ジャンプできるんですけど、なにこれすごい（語彙力

## 残課題

仕事用の検証としてはまだまだ確認できていない事があるのでメモ。

- Material Design な UI コンポーネントライブラリ（MatBlazor）を使ってみる  
https://www.matblazor.com/
- APIの非同期通信と、通信中のグルグル表示
- IndexedDBでローカル保存
- サーバーサイドレンダリングとクライアントSPAの違い、メリデメ比較

## まとめ

Reactで普通だと思ってたことが、若干「竹槍」に感じるくらいに楽にコード書ける（かもしれない。まだ検証不足）  

ReactはCordovaでネイティブアプリ作れるメリットがあるので、住み分けするならBlazorをWeb用で高速開発、Cordovaでスマホアプリか。  

xamarin? おや、誰かきたようだ
Next.js × FastAPIでメディア共有サイトを作る #1 (紹介編)

#  はじめに
もともとJavaのエンジニアであるもののpythonとjs系のフレームワークも触った方が良いなと思ったので自分で定期的に進めるためにブログにしていこうと思いました。
せっかくなのでOSSで見てもらって意見をもらったり、実際にソースが育つようなことがあればよいなとも思っています。
ソースコードは[こちら](https://github.com/KiharaTakahiro/share-media)

## 構成
フロントはNext.jsで作成してバックエンドはFastAPIで作成を予定しています。
永続化はRDBで行おうと思っており、DBとの疎通はバックエンドからしか行わないようにしようと考えています。
![概要.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524088/1f445c16-b653-07f6-b676-90cc3d0010cf.png)

# 作ろうと思っているもの
端的に言えば動画や画像や小説などの様々な創作物を共有するためのサイトを作ろうと思っています。
ユーザ登録を行って必ず登録されたユーザでなければ閲覧も投稿も行えないようなサイトでOSS化すると面白くなるのではないかと考えました。

今後は実際のコーディングについて書いていければと思います。
【Vue.js】Vuexで双方向バインディング（v-modelを使いたい！）

# はじめに
Vuexでv-modelを使いたいなぁ、ブラウザバックしたときに入力値が保持されるといいなぁ、と思ったときに実装した内容を残しておきます。

ここでは検索フォームを例に取り上げますが、フォーム入力全般に応用できると思います。

# 環境
vue @2.6.12
vue-router @3.4.9
vuex @3.6.0


# 双方向算出プロパティを使う
## store.js に関連の処理を書く
まずは、store.js（またはそれに準ずる処理が書かれている場所）に以下のような処理を用意します。ここでは、`keyword` というstateを例に取り上げます。

```store.js
export default new Vuex.Store({
  state: { // 1
    keyword: ''
  },
  getters: { // 2
    keyword: state => state.keyword
  },
  mutations: { // 3
    setKeyword: function(state, keyword) {
      state.keyword = keyword
    },
  },
  actions: { // 4
    getKeyword: function({ commit }, keyword) {
      commit('setKeyword', keyword)
    },
  }
})
```

### それぞれの役割
1) Vuexのstoreにv-modelで扱いたいstateを用意する。
2. gettersでstate.keywordの値を取得できるようにする。
3. mutationsでstateの値を書き換えられるようにする。
4. actionsでmutationsを呼び出せるようにする。

2）gettersはもとの値を書き換えることがありません。ここでは読み取り専用であることを明示するために、あえてgettersを介し`this.$store.getters.keyword` で値を参照できるようにしています。もちろん `this.$store.state.keyword` としてstateから値を参照することもできます。

3）stateの値を変更する処理です。stateの値を変えるときはmutationsを介して変更するようにします。stateを変更する処理が他のコンポーネントに書かれていると管理が煩雑になるためです。

4）さらに3のmutationsをcommitするための処理を書いています。他のコンポーネントからは、このactionsをdispatchすることで処理を行います。もちろんmutationsを直接commitしても問題ありません。

書き方はさまざまありますので、プロジェクト全体のルールに従うのが良いでしょう。

## computedをgetとsetに分ける

次に実際に使用したいコンポーネントに移ります。
ここでは、inputタグのv-modelに `keyword` を用意しました。

```search.vue
<input type="text" v-model="keyword">
```

次にcomputedに記述していきます。getとsetに分けて次のように書くことで、読み取りと書き込みの両方を実現できます。

```js

  computed: {
    keyword: {
      get() {
        return this.$store.getters.keyword
      },
      set(value) {
        this.$store.dispatch("getKeyword", value);
      }
    }
  }
```

getはstoreから値を読み取る処理、setは値が変更されたときに実行する処理です。setの引数に、イベントが起こったときの値が入ります。
さきほど、actionsに設定した `getKeyword` を呼び出して、引数にvalueを渡すことでstateの値を書き換える処理を行っています。

以上で、Vuexでも、v-modelを扱えるようになります。

# さいごに
本稿で取り上げたのは、Vuex公式で[フォームの扱い](https://vuex.vuejs.org/ja/guide/forms.html)の項目で説明されている内容に基づきます。公式で丁寧に説明がなされているものの該当箇所のみでは全体像がわからないため、関連するコードを記事としてまるっとまとめておきたいと思いました。
UIAlertControllerのTextField変更をPublisherで監視

UIAlertControllerのテキストフィールド監視は、調べるとDelegateやNotificationなどのいくつかの方法での解決方法が出てきますが、この実装はCombineフレームワークのPublisherを利用したものです。

# 実装
実装は簡単です。ViewControllerの宣言部でCombineフレームワークのimportを宣言し、プライベート変数としてcancellablesを初期化します。

```swift
import Combine

class ViewController : UIViewController {
    
    private var cancellables: Set<AnyCancellable> = .init()
    (...)
}

```

そしてAlertControllerの利用部分で以下のバインディングを宣言します。

```swift
alertController.addTextField { [weak self] (textField) in
    guard let self = self else { return }
    textField.placeholder = "placeholder"
    textField.text = "initialText"

    NotificationCenter.default.publisher(for: UITextField.textDidChangeNotification, object: textField)
        .receive(on: DispatchQueue.main)
        .compactMap({ $0.object as? UITextField })
        .map({ $0.text?.isEmpty ?? true })
        .sink(receiveValue: { isEmpty in
            saveAction.isEnabled = !isEmpty // たとえば保存ボタンのenable切り替えなど
        })
        .store(in: &self.cancellables)
}

```
GitHub取り消し

**ファイルの変更を取り消す**

```
git checkout -- 'ファイル名'
git checkout -- 'ディレクトリ名'
#全部取り消す
git checkout -- .

git restore 'ファイル名'
```
--はブランチ名とファイル名が被った時の為

git chekout はステージとワークツリーの状態を比較し
ステージの状態をワークツリーに反映させている。
ステージから戻してきている感じ。

****
**ステージ追加した後ファイルノ変更を元に戻したい**

```
git reset HEAD 'ファイル名'
git reset HEAD 'ディレクトリ名'
git reset HEAD .

git restore --staged 'ファイル名'
```
ステージの変更が取り消されるだけで
レポジトリーから戻している感じ。
ワークツリーのファイルは変わらない。

*****
**直前のコミットを修正する**
・コミットのし忘れ
・コミットメッセージの修正
一度リモートレポジトリにプッシュしたら絶対に修正してはいけない。

```
git commit --amend
```
BASHで簡単にPATHを追加する関数

BashでPATHに実行ディレクトリを追加する処理を.profile(.bash_profile)や.bashrcに追加するときに便利なshell関数をメモしておきます。.profile(.bash_profile)とかに追加して使ってもらえれば幸いです。

### 仕様
- 指定されたディレクトリが存在し、
- すでにPATHに含まれていないとき、
- PATHの（前|後ろ)に指定ディレクトリを追加してexportする。

ちゃんとPATHにふくまれてないかチェックするので.bashrcにこれらの関数でPATHを追加しても安心。（チェックしてないで.bashrcに書いてしまうとbashを入れ子で起動するたびにPATHに追加されてしまう）

``` addpath.sh
# 指定されたディレクトリをPATHの前に追加(pre)
addpathp () {
    [ ! -d $1 ] || [ -z "${PATH##*$1*}" ] || export PATH=$1:$PATH
}
# 指定されたディレクトリをPATHのあとに追加(after)
addpatha () {
    [ ! -d $1 ] || [ -z "${PATH##*$1*}" ] || export PATH=$PATH:$1
}

# 例
addpathp ~/.local/bin  # .local/binが存在し、すでにPATHに存在しないなら、それをPATHに追加
addpatha ~/.cargo/bin
addpatha ~/go/bin
addpatha /usr/local/go/bin
addpathp ~/bin
```

# 解説

こういったPATH追加関数は過去に何度も再発明されていますが、超短いので邪魔にならないのが自慢です。

あとの説明は蛇足ぎみですが書いておきます。なんにも考えないでコピーして使えばよいですｗ

## テクニカルな解説

Bashの関数については「[Shellの基本を学ぶ（7）関数](https://qiita.com/TsuyoshiUshio@github/items/88614cbf91fba35d2490)」に解説があります。

### ``[ ! -d $1 ] ||``
ディレクトリが存在しないとき、[test](https://shellscript.sunone.me/if_and_test.html)( [ )コマンドはTRUEになるので、||以降のコマンドを実行しません。こういう [...] || ...  ,  [...] && ... というif文を使わないパターンはshell scriptでは定石ですね。

### ``[ -z "${PATH##*$1*}"]``
変数置換については「[bashの変数内文字列置換まとめ](https://qiita.com/aosho235/items/c36568830a8d47288284)」とかググってみてください。このケースでは指定したディレクトリがPATH変数の中に存在する場合、空文字列となり全体はTRUEになり||以降を実行しません。存在しないとき||以降を実行します。

### 残り
PATHを加工して前につける関数をaddpathp、後ろにつける関数をaddpathaとして定義しているだけです。
Apache 2.4のhttpd.confを考えてみた

当記事ではApache HTTP Server v2.4.46におけるhttpd.confの設定内容について考えてみた思考過程をまとめています。

以前、httpd.confの最小構成を追求しましたが、今回は設定を少しずつ増やしていきながら「Apach HTTP Serverを動かすときに必要な設定は何だろう？」「各設定には、どのような意味があるのだろう？」ということを考えていきます。検証環境はWindows 10 Home 64bit版です。

[Apache 2.4におけるhttpd.confの最小構成 - Qiita](https://qiita.com/AGadget/items/0b0c3d69ef53cf6652ea)

**※2021/01/06: 現在、掲載中の設定ではES modules機能を利用できない可能性がありますので、利用できるようになるかもしれない設定方法を記載した記事へのリンクを記事末尾に追加しました。**





## 1. 絶対必要なディレクティブ

まずは以前の記事で検証した最小構成をもう一度見てみます。なお、パスはダブルクォートで囲むようにし、相対パスの先頭には`./`を付けるようもしました。これは私好みの記法であり、このように書く必要はありません。

```conf:httpd.conf
Listen 80
LoadModule authz_core_module "./modules/mod_authz_core.so"
```

改めて、やはりスッカラカンですね。ここまでディレクティブが省略されていると機能的に乏しい以前に、サーバーの基本的な挙動が暗黙的になるのでよろしくありません。

例えば、この設定の場合、サーバーのルートパスはhttpd.exeが配置されているドライブ直下のApache24というディレクトリが使われます。`ServerRoot "C:/Apache24"`と書いていないのに、そのような挙動になるのは使いにくいこと、このうえありません。

まずは暗黙的な部分を潰していき、httpd.confの内容からサーバーの挙動が分かるようにします。






## 2. 暗黙的な挙動を潰すためのディレクティブ

そんなわけで、いくつかのディレクティブを追加してみました。これらディレクティブを指定したおかげで、サーバーの挙動が明確になりました。

```conf:httpd.conf
DirectoryIndex "./index.html"
DocumentRoot "./htdocs"
ErrorLog "./logs/error.log"
LoadModule dir_module "./modules/mod_dir.so"
LogLevel warn
ServerName localhost:80
ServerRoot "C:/Apache HTTP Server v2.4.46"
```





## 3. 入れておきたいディレクティブ

さらに、いくつかのディレクティブも追加します。

```conf:httpd.conf
CustomLog "./logs/access.log" "%h %l %u %t \"%r\" %>s %b"
LoadModule log_config_module "./modules/mod_log_config.so"
```

mod_log_configで定義されているCustomLogディレクティブを使って、アクセスログを生成するようにします。





## 4. とりあえず設定しておくディレクティブ

さほど重要とは思いませんが、とりあえず次のようなディレクティブも設定しておきます。

```conf:httpd.conf
ServerAdmin agadget@example.com

<Directory "./">
    AllowOverride None
    Options None
    Require all denied
</Directory>

<Directory "./htdocs">
    Require all granted
</Directory>
```

追加した設定は大きく3つに分けられます。まず、ServerAdminディレクティブにサーバー管理者への連絡先を記述しました。また、1つ目の\<Directory>セクションでサーバー全体に、設定の上書き不許可・特殊機能の停止・アクセス拒否を設定しました。ただし、これではDocumentRootディレクティブで設定したディレクトリ内にもアクセスできなくなるので、2つ目の\<Directory>セクションで当該ディレクトリ内だけはアクセスできるようにしました。





## 5. 完成

以上より、httpd.confの実用的な最小構成は以下のようになると考えます。

```conf:httpd.conf
# ----------------------------------------------------------------
# 基本設定です。
# ----------------------------------------------------------------
CustomLog "./logs/access.log" "%h %l %u %t \"%r\" %>s %b"
DirectoryIndex "./index.html"
DocumentRoot "./htdocs"
ErrorLog "./logs/error.log"
Listen 80
LoadModule authz_core_module "./modules/mod_authz_core.so"
LoadModule dir_module "./modules/mod_dir.so"
LoadModule log_config_module "./modules/mod_log_config.so"
LogLevel warn
ServerAdmin agadget@example.com
ServerName localhost:80
ServerRoot "C:/Apache HTTP Server v2.4.46"

<Directory "./">
    AllowOverride None
    Options None
    Require all denied
</Directory>

<Directory "./htdocs">
    Require all granted
</Directory>
```





## 6. ES modules機能が使えないとき

以下記事を参照してください。

[ESモジュールが読み込めないときに試してみたいApache 2.4の設定 - Qiita](https://qiita.com/AGadget/items/6efeeac5351d800f316f)
UnitTestを書く上で注意すべきこと

※ 時折こぼけを挟んでおります:smile:。

# UnitTestを書く上で注意すべきこと

## 誰に向けた記事か
- プログラミングは基本的に行える(2~3年程の経験)
- まだアーキテクチャについては良く分かってない

つまり私

## モチベーション

- クリーンアーキテクチャ 238p から引用

> テスト容易性のための設計
  - システムと強く結合したテストは、システムに合わせて変化する必要がある。システムコンポーネントに対する小さな変更であっても、結合した多くのシステムが壊れたり、変更が必要になったりする。中略。共通のシステムコンポーネントを変更すると、何百や何千というテストが壊れる可能性がある。これは、脆弱なテストの問題（Fragile Tests Problem）と呼ばれている。
  - 脆弱なテストは、システムを硬直化させるという悪影響を及ぼす。システムを少し変更しただけで大量のテストが失敗するとなると、開発者は変更するのをためらうだろう。

なんてことだ。 UTを書けば良いシステムを作れているという信念に揺さぶりを掛けられてしまった。
新卒2年目の若輩者として 実装プラスUT = OK という図式で安心していたのに。

とはいえ`脆弱なテストの問題` は、自分がUTを書いたり、システムの部品をコーディングする経験を積む中で、感覚としてなんとなく気づいていた箇所を明確に取り上げられてて、とても爽快だったし面と向き合いたいと思い、ここに自分なりの考えを書くことにした。

## 注意すべき要素

### UTのお作法

理想: チームでポリシーを設ける
理由: 

私個人がUTを書くにあたって注意している項目を列挙したい

1. なるべくモックオブジェクトを用いる。
2. UTで担保すべきは 外部仕様としての振る舞い > 内部仕様としての振る舞い
3. DIを意識した実装。

1 について
下図でいう A のUTを書いている時はBをモックする。
![class.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172077/bc20fa78-70ac-38fa-5578-0adff5832c2d.png)
なぜならAのUTにおいてB及びCの振る舞いでテストが壊れてほしくないため。(インターフェースの変更は仕方ない)
デメリットは単純に手間が掛かること。Aの依存先が多ければ多いほどUTの工数が多くなる。
しかし、そこで悪魔の囁きに負けてしまうと、依存先の変更に引きずられて改修コストが大きくなってしまう。

2 について
UT = 内部仕様書 となるようなケース設定がベストだと考えている。
しかし、外部仕様としての振る舞い(正確に言うならユースケースと呼ぶべきか)はユーザーがシステムを利用するパターンな訳だから、ユースケース外は考慮しなくても良いと考える。(もちろん非機能要件は守らないといけない)


3 について
一番基本的な要素で重要すぎる要素では？
プログラマーの端くれだった(ピュアだった)頃の自分にまっさきに伝えられるならこれだろう。
シングルトンオブジェクトなんてシステム制約や非機能要件以外の理由では用いるべきではないよね。
しかしながらUTを書かなければ気づけなかった要素であり、アーキテクチャへの入り口となる箇所だと思っている。
簡単に言えば DI を正しく行えていれば、`テスタブル` だと言える。そう思いたい。

関連して気になるのは、関数型プログラミングのパラダイムだとこのパターンをどう表現しているんだろうか。

### 脆弱なテストの問題（Fragile Tests Problem）について

この問題に対して `テストAPI` を作成するのが良い解決策だとクリーンアーキテクチャでは述べられている。

こちらの記事に分かりやすいサンプルを見つけたのでぜひ見てほしい。
(
[AVOIDING FRAGILE TESTS WITH BETTER DESIGN](https://ordina-jworks.github.io/testing/2019/08/23/test-design.html#implementing-the-api)

要するに、プロダクトコードとテストコードの価値はイコールであること。
両者の保守性が低いとそれだけ機能の追加・修正のコストの重みが増す。

(お作法の 2 で述べた内容を普遍的なUTから切り離したのがテストAPIな気がする。)

### まとめ

- UTもプロダクト開発と同様に扱う必要がある
- テストAPIを設けるなどのテスト戦略を設定すること
- DI 大事だね


読んでくださった方、ありがとうございました。
誤りやツッコミありましたら遠慮せずお願いします。
【Ruby on Rails】 production.key を保存したのに credential が本番環境で動作しない

#課題
ローカルで動作していたcredentialがCapistranoで展開した本番環境で動作せず30分程詰まったのでメモ。

```ruby:ローカルコンソールの出力
irb(main):002:0> Rails.application.credentials.slack
=> {:token=>"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}
```

```ruby:本番コンソールの出力
irb(main):002:0> Rails.application.credentials.slack
=> nil
```

#結論
credential を操作する以下コマンドをdevでしか実行していなかったことが原因。

```bash:ローカルのCredential変更
$  EDITOR="vi" bin/rails credentials:edit 
```
この操作だけだと config/credentials/production.yml.enc が変更されないため、
config/credentials/production.key を反映させても意味が無い。

以下のとおり、本番のcredentialも変更してpushして解決。

```bash:本番のCredential変更
$  EDITOR="vi" bin/rails credentials:edit -e production
```

分かれば大した話では無いのですが、ローカルはdevの分だけ操作すると言う先入観からつい忘れていました。
credentialの動作をあまり理解していなかったことが露呈した恥ずかしい詰まりでした。
【Laravel】既定Userのmigrationにてエラーが出た場合にチェックする点

■前提
・Laravelでのプロジェクト作成が2回目以降であること
・databaseを作成済であること
・使っているdatabaseはmysqlであること

■概要
プロジェクト作成時に既定にあるUserテーブルに対してmigrationをかけた際に
エラーが２点発生した。
①既にuserテーブルが存在している(users already exists〜辺り)
![85b91b6a14ed0427e14cce1d64749c67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/928348/3ea9fce7-d33f-d026-d395-0c353f9d27a6.png)


②user_emailの設定にエラーがある(key was too long~の辺り)
![d345df1fb0cfb2338f674b46c25d5dea.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/928348/713ad16a-0b32-1a93-2113-5c17034c3d53.png)

■対策
上記エラーに対しての対策は以下の通り。
①.envにてDB_DATABASEを今回作成したbatabase名に修正する
※今回はtodoというデータベースを作成しました。
![af9345092081e0b3669017c43dffee5c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/928348/ecde0fe0-2ef9-c8d8-de45-af6a45209e38.png)


②database.php内のmysqlにて「charaset」/「collation」をutf8mb4からutf8に変更する。
![88d117fae68472d365e39ba759165c18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/928348/60980929-bf24-c1fa-fc48-736f747f8e38.png)
Julia: Plotsのsurface plotに行列の色をマップする

# Introduction
Juliaで3Dのサーフェスプロットをしていて，サーフェスの色を行列で指定する際に躓いた際の備忘録．
JuliaではPlotsを用いていますが，球を普通に3D surfaceでプロットすると，左図のようにzの値に応じて色のマッピングが行われます．本記事の目的は，これを右図のように，別の行列で指定できるようにすることです．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379298/646cd5eb-fa21-396f-7d6e-a27682e25ecc.png)

# 実行環境
- Windows 10 Pro
- Julia 1.5.3
- VS Code

# 参考サイト
同様の方法を探す質問が他のサイトでも行われていました．最終的には1つ目のリンクについた回答に答えがありました．Plotsを使わず，PyPlotを用いる場合は，3つ目のリンクに回答があります．
- [Plots.jl - Map surface color to matrix](https://stackoverflow.com/questions/44600878/plots-jl-map-surface-color-to-matrix)
- [Julia PyPlot: plot 3D surface with as face colors the norm of surface gradient](https://stackoverflow.com/questions/36925356/julia-pyplot-plot-3d-surface-with-as-face-colors-the-norm-of-surface-gradient)
- [gizmaa/Plot_Examples.md](https://gist.github.com/gizmaa/7214002#3d-surf-plot)

# ソースコード
こちらのサイト[（gizmaa/Plot_Examples.md）](https://gist.github.com/gizmaa/7214002#3d-surf-plot)を参考に，球体のコードと，表面にマッピングするランダムな値の入った行列を準備します．

```
using Plots
pyplot() # pyplotをバックエンドに指定

u = range(0.0,2pi,length=100);
v = range(0.0,pi,length=100);

lu = length(u);
lv = length(v);

x = zeros(lu,lv);
y = zeros(lu,lv);
z = zeros(lu,lv);

colors = zeros(lu,lv);

colortube = 0.001:0.001:1.0;

for uu=1:lu
for vv=1:lv
x[uu,vv]= cos(u[uu])*sin(v[vv]);
y[uu,vv]= sin(u[uu])*sin(v[vv]);
z[uu,vv]= cos(v[vv]);
end
end

for uu=1:lu
    for vv=1:lv
        colors[uu,vv]=rand(colortube);
    end
end
```

Plotsで行列をサーフェスプロットの色としてマッピングするには，キーワード`fill_z`に行列を指定するそうです．

```
# show results
plt = plot(x,y,z,
        fill_z=abs.(colors),
        st=:surface,
        colorbar_title="Color",
)
display(plt)
```

これで，上記右図のプロットが生成されます．この`fill_z`のキーワードを探すのに苦心しました．`facecolors`等，色々試していました．．．
キーワードを知らないときには，Plots.jlのソースコードを見るしかないのでしょうか．普段はDocumentationの整備されたMATLABのユーザーなので，他の言語での探し方がいまいちわかっていません．

Plotsを用いて作成したグラフは以下のコードを用いて，実行中のソースファイルと同名で保存しています．

```
# save
runningfilename = splitext(splitpath(@__FILE__)[end])[1]
savefig(plt,runningfilename)
```

# PyPlotの場合
上記[参考サイト](#参考サイト)の三番目にあるように，Pyplotの場合は以下のようにすればプロットできます．`colors`の形が，MATLABで私がよく使う形（メッシュグリッド的な指定）と違っていたりするので，私は使いません．

```
# reproduced from https://gist.github.com/gizmaa/7214002#3d-surf-plot
using PyPlot

#######
omit definition of u,v
#######

colors = zeros(lu,lv,3) ;

colortube = 0.001:0.001:1.0;

for uu=1:lu
for vv=1:lv
x[uu,vv]= cos(u[uu])*sin(v[vv]);
y[uu,vv]= sin(u[uu])*sin(v[vv]);
z[uu,vv]= cos(v[vv]);
end
end

for uu=1:lu
for vv=1:lv
for ii=1:3
colors[uu,vv,ii]=rand(colortube);
end
end
end

fig=surf(x,y,z,facecolors=colors);
gcf()
```
Pythonでn-gram

# n-gramの関数

```ngram.py
def Ngram( N , lst ):
  returnLst = []
  for i in range( len( lst ) - N + 1 ):
    returnLst.append( lst[ i : i + N ] )
  return returnLst
```


#実行例

```
lst = ['0', '1', '2', '3', '4', '5']
print(Ngram( 4, lst ))
#[['0', '1', '2', '3'], ['1', '2', '3', '4'], ['2', '3', '4', '5']]
```
無人戦闘機に必要なIT技術

日本経済新聞2021年1月1日1面「無人戦闘機35年に配備」
という記事があった。
https://www.nikkei.com/article/DGXZQODE241DB0U0A221C2000000

調べる。

＜解説＞有人機と無人機の協調技術について　令和2年版防衛白書
https://www.mod.go.jp/j/publication/wp/wp2020/html/nc005000.html

将来無人装備に関する研究開発ビジョン～航空無人機を中心に～（平成２８年８月）
https://www.mod.go.jp/atla/soubiseisaku/plan/vision.html

航空装備研究所
https://www.mod.go.jp/atla/kousouken.html

衆議院議員逢坂誠二君提出中国のものと推定される無人機による防空識別圏への侵入事案に関する質問に対する答弁書
http://www.shugiin.go.jp/internet/itdb_shitsumon.nsf/html/shitsumon/b196243.htm

#技術

### 個別操作


### 有人機が複数の無人機を同時に動かす(teaming)


### 無人機の編隊が自律して戦闘

#国際規則

Three Laws of Robotics in I, Robot Isaac Asimov
http://ekladata.com/-Byix64G_NtE0xI4A6PA1--o1Hc/Asimov-Isaac-I-Robot.pdf

AI倫理を考える その２～アシモフ作品と「ロボット工学の三原則」を題材に～
https://data.nifcloud.com/blog/ai_ethics_3laws_robotics/

＜この項は書きかけです。順次追記します。＞
【2021年元日版】ブロックチェーン、ReBoot《再元年》

# 今年は再びのブロックチェーン元年としたい

新年、明けましておめでとうございます。
元旦の本日は今年の抱負と言いますか、ブロックチェーンに対する**熱い想い**をぶつけてみたいと思います。

もう今更、ブロックチェーンとはナンであるか？については、ここでは述べません。ブロックチェーンといえども僕ら技術者にとっては数ある技術・サービスの中での選択肢の一つに過ぎません。
ですので、ここではブロックチェーンを**採用するメリット・デメリット**に絞って述べたいと思います。
またブロックチェーンの技術的な背景や基盤要素には**クラウド技術**がありますがこれについては今後、*気が向いたら*書きます。

# というわけで、ブロックチェーンのPros & Cons、メリ・デメ

## ブロックチェーンという"サービス"のメリット

ブロックチェーンには様々なプロダクトが出ておりますが、外側から見た"サービス"という点で見た場合、以下のような機能が(大抵)含まれています。

- ストレージ・データ永続化
- API・カスタムビジネスロジック・トランザクション(ただしスマートコントラクトの程度によりけり)
- 認証(ウォレット)

要はログイン機能とDBとサービスAPIがブロックチェーンだけで賄えてしまいます。
これに好きな**UIのレイヤーを実装すれば大抵のアプリケーションは構築できます**よ！
もう、ブロックチェーンを選ぶだけで認証やDBやWEBサービスについて悩む必要なし、UI層に好きな言語・技術とスマートコントラクトだけ勉強すればもうアプリケーションは構築できてしまいます。

インフラのネットワークや、SQLやモデル設計、APIの開発、ログイン機能ともオサラバ、**ファンタスティック!** でございます。

## ブロックチェーンという"サービス"のデメリット

ブロックチェーンの抱える圧倒デメリットは以下のものが思いつきますね。

- DBのアクセスが遅い。書き込み、読み込みともにRDBに比べられないほど極めて遅い。
- 検索はできない。検索は、できない。
- コンソーシアム・プライベート型のブロックチェーンはサーバの構築・維持管理が超高コスト。技術的にもお値段的にも
- パブリック型のブロックチェーンは、機密情報は絶対に入れちゃダメ。

大抵の場合、DBアクセスの遅さには面食らうと思います。ビットコインでも早くて5分とかです。RDBで数ミリ秒の世界を競っていると、ブロックチェーンに書き込むのはちょっとどうかしてる・・・という感覚です。
ただし、プライベート・コンソーシアム型のブロックチェーンであれば書き込み数百msオーダーのレベルにまで高速にはなります。RDBにアクセスするREST APIを叩いても大体、150ms~300msとかそのくらいはかかりますよね？これはブロックチェーンの選択次第かと思います。

そして、検索はできません。基本的に、検索はできません。ブロックチェーンは検索ができないのです。

とは言え、TwitterやFacebookなどのスタイルのアプリケーションは検索機能はメインではないですよね？
また個人的なポリシーですが、アプリケーションで**検索機能が必要になったらUXとして負け**であると考えています。UXデザインとデータモデリングでユーザーが見たい情報を見せられなければシステムの敗北です。
というわけで、どうしても高速なアクセスと強力な検索機能が必要な場合は、**Elasticsearch**にお願いします。(笑)

またインフラの構築・管理に関わる技術的なコストですが、これこそ技術者ならば超えていかなければならない壁だと思います。これはもう、コストとのご相談なので、がんばれ！としか言えません。

パブリックチェーンに機密情報入れられない点はもう、、、どうしようもないです。ネットワークに参加するノードみんなでデータ検証してデータのコピーを持ち合って耐障害性を高めているのがブロックチェーンなので、匿名とはいえ**情報は本質的にダダ漏れ**です。

# まとまらず。

新年の一発目に個人的な抱負も含めてブロックチェーンについて書いてみました。

ただ、様々なブロックチェーンのプロダクトでドキュメントが書かれていますが、まず英語のドキュメントです。その次の翻訳は何語の翻訳が多いと思いますか？
ほとんど **簡体字かハングル**ですよ。。。
ブロックチェーンの"技術者"として如何に日本人が少ないか、というのが感じられてしまいます。

日本人技術者もみんなでブロックチェーンを盛り上げてみないか？！

ということで、ブロックチェーン再元年、本年もよろしくお願いいたします。
renameコマンドでファイル名を親ディレクトリ名に一括リネームする

## やりたいこと
コードを書かずにMacのターミナルやUnixだけでこれを

```
/fuga/hoge/001.json
/fuga/hoge/002.json
```

こうrenameしたい

```
/fuga/hoge/hoge001.json
/fuga/hoge/hoge002.json
```

## こうやればできた

```
rename 's/(.*)\/(.*)\./$1\/$1$2./' */*
```

ファイル数が多い場合`Argument list too long when copying files` エラーになる場合があります。この場合以下のように一ファイルずつ処理するようにすれば解決します。

```
find . -type f -exec rename 's/(.*)\//$1\/$1_/' {} \;
```

## 補足
[参考URL1](https://askubuntu.com/questions/1003770/rename-files-to-match-parent-folder)
[参考URL2](https://askubuntu.com/questions/1081884/bash-usr-bin-rename-argument-list-too-long)
コマンドは hoge ディレクトリの一階層上(/fuga) で実行する必要があります。
Mac でまだ rename が入ってない方は `brew install rename` でインストールしておいてください。
いきなりファイル名を変更するのが抵抗ある場合、以下のようにプレビューもできます

```
rename -n 's/(.*)\/(.*)\./$1\/$1$2./' */*
```
GitHubにpushする/エイリアスの作成

リモートリポジトリに新規追加する

```
git remote add origin 'https://github.com/user/example.git
//origin というショートカットにリモートリポジトリのURLを割り付ける
```

リモートリポジトリに送信する

```
git push 'リモート名' 'ブランチ名'
git push origin master
git push -u origin master  //-uをつけると次回以降git push だけでpushできるようになる。
```

******
**エイリアスの作成**
よく使うコマンドにエイリアスを作成する

```
git config --global alias.cm commit
git config --global alias.st status
git config --global alias.br branch
git config --global alias.ch checkout
```
******
**バージョン管理したくないファイル**
1.パスワード等の秘密ファイル
2.チーム開発でバージョン管理する必要のないファイル
.gitignoreファイルに指定する

```
#コメント行
#除外ファイルの指定
index.html
#ルートディレクトリを指定
/root.html
```
除外ファイルのしてはできたが
ディレクトリ単位の指定はまだできていない
Lighthouse の使い方

SEO ツールの Lighthouse の使い方です。

インストール

次の環境にインストールしました。

```bash
$ node --version
v14.14.0
$ npm --version
6.14.8
```

```bash
sudo npm install -g lighthouse
```

使い方


```bash
npx lighthouse https://ekzemplaro.org/storytelling/ --view
```

![lighthouse_jan01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/2cf289dc-3f4e-12e4-97a3-b323dee361d4.png)
Pythonで学ぶアルゴリズム　第13弾：ハノイの塔

# #Pythonで学ぶアルゴリズム< ハノイの塔 >

##はじめに
基本的なアルゴリズムをPythonで実装し，アルゴリズムの理解を深める．
その第13弾としてハノイの塔を扱う．

#ハノイの塔
ハノイの塔はよく知られている．以下にそのルールを示す．
・端から端へ同じ形で移動させることで完成
・自分よりも小さなものの上に移動することはできない

#実装
ここでは，3本の軸間を移動し，扱うブロック数のみ入力することで，そのときの移動手順を示すプログラムを以下に示す．さらに可視化まで試みようとしたが，アルゴリズムを知るという意味での本質とは少しずれているため，試みた部分のみ示すこととする．

#####コード
```python:hanoi.py
"""
2020/12/31
@Yuya Shimizu

ハノイの塔
"""

#引数：ブロック数，移動元，移動先，経由
def hanoi(n, source, destination, via):
    if n > 1:
        hanoi(n-1, source, via, destination)  #再帰
        print(source + '->' + destination)
        hanoi(n-1, via, destination, source)  #再帰
    else:
        print(source + '->' + destination)

n = int(input('ハノイの段数 >> '))
hanoi(n, 'a', 'c', 'b')
```

#####出力
```
ハノイの段数 >> 3     #3と入力
a->c
a->b
c->b
a->c
b->a
b->c
a->c
```

#####コード
```python:hanoi_v.py
"""
2020/12/31
@Yuya Shimizu

ハノイの塔（可視化）
"""

def tower(n):
    result = ""
    for i in range(1,n+1):
        #偶数行
        if i %2 == 0:
            result += f"|  {' '*(n-i+1)}{'- '*(i//2)}{'- '*(i//2)}\t|  "
            result += f"{' '*(n-i+1)}{'- '*(i//2)}{'- '*(i//2)}\t|"
            result += f"  {' '*(n-i+1)}{'- '*(i//2)}{'- '*(i//2)}\t|  "

        #奇数行
        else:
            result += f"|  {' '*(n-i+1)}{'- '*(i//2)}- {'- '*(i//2)}\t|  "
            result += f"{' '*(n-i+1)}{'- '*(i//2)}- {'- '*(i//2)}\t|"
            result += f"  {' '*(n-i+1)}{'- '*(i//2)}- {'- '*(i//2)}\t|  "

        result += "\n"
    return result

#引数：ブロック数，移動元，移動先，経由
def hanoi(n, source, destination, via):
    if n > 1:
        hanoi(n-1, source, via, destination)  #再帰
        print(source + '->' + destination)
        hanoi(n-1, via, destination, source)  #再帰
    else:
        print(source + '->' + destination)

#n = int(input('ハノイの段数 >> '))
#hanoi(n, 'a', 'c', 'b')
print(tower(4))
```

#####出力
```
|     -    |     -    |     - 	 |  
|    - -   |    - -   |    - - 	 |  
|   - - -  |   - - -  |   - - -  |  
|  - - - - |  - - - - |  - - - - |  
```
とりあえず，すべて並べた図だけ作ってみた．また気が向いたらやってみようと思う．
なお，コメント欄にて@shiracamusにより，可視化のプログラムが紹介されている．

##感想
ハノイの塔を解くアルゴリズムを知った，この時にかかる処理時間が指数関数的に増加することを知った．可視化までできると思ったが，それなりに時間が必要だということに気づき，アルゴリズムを学ぶという観点では少しずれていると思い，また気が向いたときに可視化に試みようと思う．ほかの人の記事を参考にすると，どうやら可視化までするモジュールもpythonにはあるらしく，以下のような操作で可視化というか既存のハノイの塔のプログラムが扱えるようだ．

```
$ pip install k-peg-hanoi
$ hanoi 4 4
```
自作プログラムでの可視化についてはコメント欄にて@shiracamusにより紹介されている．

##参考文献
Pythonで始めるアルゴリズム入門　伝統的なアルゴリズムで学ぶ定石と計算量
　　　　　　　　　　　　　　　　　　　　　　　　 増井 敏克　著　　翔泳社
laravel MySQL tinyInteger型のカラムはchangeできない

# 目的

- マイグレーションファイルを用いてTinyInt型のカラム情報を変更しようとしたけどエラーが出たのでまとめる

# 情報

- 今回の事例はすでに作成されているTinyInt型カラムのコメントを変更しようとした。

# エラーまでの経緯

1. マイグレーションファイルのup側に下記のように記載してカラムのコメントを変更しようとした。

    ```php
    $table->tinyInteger('カラム名')->comment('変更後のコメント')->change();
    ```

1. 下記コマンドを実行してマイグレーションを実行した。

    ```terminal
    $ php artisan migrate
    ```

# エラー

- 下記のエラーが出力された。

    ```terminal
    Unknown column type "tinyinteger" requested. Any Doctrine type that you use has to be registered with \Doctrine\DBAL\Types\Type::addType(). You can get a list of all the known types with \Doctrine\DBAL\Types\Type::getTypesMap(). If this error occurs during database introspection then you might have forgotten to register all database types for a Doctrine Type. 
    Use AbstractPlatform#registerDoctrineTypeMapping() or have your custom types implement Type#getMappedDatabaseTypes(). If the type name is empty you might have a problem with the cache or forgot some mapping information.
    ```

# 原因

- 公式ドキュメントにこんな記載を発見した。[https://readouble.com/laravel/6.x/ja/migrations.html](https://readouble.com/laravel/6.x/ja/migrations.html)

    ```text
    Note: 以降のカラムタイプのみ変更可能です：bigInteger、binary、boolean、date、dateTime、dateTimeTz、decimal、integer、json、longText、mediumText、smallInteger、string、text、time、unsignedBigInteger、unsignedInteger and unsignedSmallInteger
    ```

- このドキュメントによるとTinyIntegerはchangeメソッドを用いた変更をする事ができない。

# 解決までの経緯

- 下記の方法を用いてTinyIntegerのカラムの内容を修正した。
    - [laravel tinyInteger型のカラムのコメントを変更](https://qiita.com/miriwo/items/86c7f86b1f85cd273d38)
shell script が bash で起動されたかどうか判定する方法

# shell script が bash で起動されたかどうか判定する方法

`sh ./check.sh` のように `sh` を使って起動されるのを検出してエラー終了させたい。

## スクリプト

check.sh

```
#!/bin/bash

if [ x$BASH_SOURCE = x"" ] ; then
    echo please run by $0 or bash $0 instead.
    exit 1
fi
echo OK: you are using bash.
```

## 実行例

```
$ sh ./check.sh 
please run by ./check.sh or bash ./check.sh instead.
```

```
$ ./check.sh 
OK: you are using bash.
```

```
$ bash ./check.sh 
OK: you are using bash.
```
【Heroku】デプロイ時　We're sorry, but something went wrong.解決方法

ローカル環境で構築して、Herokuにデプロイしたが、こんな画面がでてしまいました。
![スクリーンショット 2020-12-19 18.43.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693502/b6b7416a-28a6-3818-4ea1-aea0757aad93.png)
`We're sorry, but something went wrong.`

#原因
開発環境(deveropment)はMySQLとしていたが、Herokuの標準データベースはPostgreSQLだが、MySQLのままだった。
#対処方法
gemに下記を追記して、本番環境ではpostgreSQLを適用する。

```gemfile
group :production do
  gem 'pg', '>= 0.18', '< 2.0'
end
```
※`group :production do`で本番環境のみの適用となります。

bundle installしますが、開発環境のみで本番環境では不要なので、`--without production`をつけます。

```terminal
$ bundle install --without production
```

次にdatabase.ymlを編集します。
デフォルトではこのようになっていると思います。

```database.yml
production:
  <<: *default
  database: <app_name>_production
  username: <app_name>
  password: <%= ENV['<app_name>_DATABASE_PASSWORD'] %>
```

これをこのように書き換えます。

```database.yml
production:
  adapter: postgresql
  encoding: unicode
  pool: 5
  database: <app_name>_production
  username: <app_name>
  password: <%= ENV['<app_name>_DATABASE_PASSWORD'] %>
```
あとは、```heroku push```して、忘れずに```heroku run rails db:migrate```すればOKです！