OmniAICreator/Qiita-1.07M huggingface dataset:
推しリポジトリをチェックするChrome拡張つくってみた


# Githubいろいろ

OSSが広まるについてGithubの色々な使い方が出てきたと思う

- 個人開発、自社開発のソース等を管理するリポジトリとして
- 開発に使うフレーワーク、ライブラリの参照先、コードのサンプルの探し

この元々の用途プラス、SNSやDeepLearningの論文とかの広がりで

- 友達や研究用リポジトリを追っかける。**言わば推しリポジトリ**

てな用途があるかなと思ってる。**新しいの出来たら一ファンとして即知りたいですよね！**

# つくってみたわ

<a href="https://github.com/yasutakatou/repop"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/yasutakatou/repop.png" width="460px"></a>

１．Chrome拡張なので[crxファイルをリリースページからダウンロード](https://github.com/yasutakatou/repop/releases)して開発モードからインストールします。

２．アイコンから起動させたら**リポジトリ名**を入力しましょう。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/829da543-1d4e-1710-5545-3e5b6f3fd1b1.png)

３．次にアイコンを押したときに差分があったら**アラートが出ます**

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/fe14a965-efcb-cecf-2936-5fa0ee33d8f3.png)

４．削除したいときは**[X]ボタン**でどうぞ

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/dd462cf8-3e30-7cfb-6583-daedf0b7ac69.png)

# あとがき

朝PC起動した時にさっと確認するとかお気軽に使えるように仕上げてみました。
最初はバックグラウンドで12時間毎にアクセスしてお知らせしてたんだけど、
そんなに頻繁に新規リポジトリ作らないよねーとピボットした。ｗ
Rails+Devise+omniauth facebookのログインでCSRF detectedエラーを解消する方法



#エラー内容
Facebookログインでcallbackされた後の挙動がうまくいかなくて、URLも hoge.com/login_=_ みたいな変な形式になってしまうエラーが発生しました。ログを確認すると以下のエラーを吐き出していました。

```
(facebook) Callback phase initiated.
(facebook) Callback phase initiated.
(facebook) Authentication failure! csrf_detected: OmniAuth::Strategies::OAuth2::CallbackError, csrf_detected | CSRF detected
```
###実行環境
* ruby 2.6.3
* Rails 6.0.3.2
* Devise 4.7.2
* omniauth 1.9.1
* Omniauth-facebook 6.0.0

#エラーの解消方法
config/initializers/devise.rb と config/initializers/omniauth.rb に**同じ内容を二重で記載していたので、片方を削除します**。以上です。

#原因

ネット上の投稿にはOmuniauthの設定をdevise.rbに書く方法と、別途omniauth.rbを作成してそこに設定を書く方法の2種類が上がっています（以下に参考URLを添付）。

どうやら色々な方の記事を参考にするうちに誤って2箇所に記載してしまった様です。

参考：
[DeviseとOmniauthでtwitter,facebook ログイン機能]('https://qiita.com/sakakinn/items/321e6b49c92b9f02f83f')
※devise.rbに直接記載する方法で説明されている記事
[[Rails]SNSアカウントログイン機能の実装かつ既存userモデルと衝突しない方法]('https://qiita.com/julia817/items/7908c01984a291b74966')
※omniauth.rbを別途作成する方法で説明されている記事

devise.rbの場合は、270行目くらいにOmniAuthの設定を書くところがあります。

```config/initializers/devise.rb
  # ==> OmniAuth
  # Add a new OmniAuth provider. Check the wiki for more information on setting
  # up on your models and hooks.
  # config.omniauth :github, 'APP_ID', 'APP_SECRET', scope: 'user,public_repo'
  config.omniauth :facebook, ENV['FACEBOOK_APP_ID'],ENV['FACEBOOK_SECRET_KEY']
```
omniauth.rbは自動では作成されない（はず）なので、自ら `touch config/omniauth.rb`する必要があります。 ただし、initializers以下にomniauth.rbを作成したら特にrequireなどをしなくても自動で読みに行ってくれるみたいです。

```config/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
provider :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_SECRET_KEY']
end
```
どちらのファイルも書いてあることは同じなので、片方を削除して再度実行してみてください。どなたかのお役に立てたならば幸いです。
LINUX:テンキーのないノートで、矢印キーを、2,4,6,8に対応させる方法

皆様おはようございます。
エミュレータで、PC-8801やPC-9801などのゲームをする時、方向キーのキーマップがテンキーの２，４，６，８にあてがわれていた場合、テンキーのないノートパソコンなどで、ゲームをする時困ります。そこで、今回は、xmodmapを使って、ノートパソコンの矢印キーをテンキーの２，４，６，８に対応させる方法をご紹介致します。


```xnp2m.sh

#!/bin/bash
(cd ~xnp2; xmodmap xmodemapm; xnp2; xmodmap xmodemapn ) &
```

ここでは、ディレクトリ~/xnp2にPC-9801エミュレータxnp2が入っているとします。

以下のキーマップをコピーして、~/xnp2にxmodemapm,xmodemapnとして入れてください。

```xmodemapm
!xmodemapm  (xmodmap modified)
keycode 111 = KP_8 KP_8 KP_8 KP_8
keycode 113 = KP_4 KP_4 KP_4 KP_4
keycode 114 = KP_6 KP_6 KP_6 KP_6
keycode 116 = KP_2 KP_2 KP_2 KP_2
```

```xmodemapn
!xmodemapn (xmodmap normal)
keycode 111 = Up NoSymbol Up
keycode 113 = Left NoSymbol Left
keycode 114 = Right NoSymbol Right
keycode 116 = Down NoSymbol Down
```

そして、xnp2m.shに実行権を付け実行するとエミュレータが起動します。
エミュレータが実行されている間は、マシンのキーボードマップが変わったままですが、エミュレータを終了すると、自動的にキーマップが元へ戻ります。

これで、某たいにゃん氏のmicroinvなどが動きます。
WSH(Windows Script Host)

##フルパスからファイル名を取得する



```javascript
//ファイルシステムオブジェクトを生成する
var fs = Wscript.CreateObject("Scripting.FileSystemObject");
//フルパスからファイル名を取得
var fileName = fs.GetFileName("C:\\△△△\\〇〇〇\\×××××\\sample.txt");
//fileName = sample.txt
```
------------------------------------
Let's Encrypt の証明書を削除する方法

Let's Encrypt の証明書を削除する方法

証明書の確認方法

```bash
sudo certbot certificates
```

次のような方法でも確認が出来ます。

```bash
sudo ls /etc/letsencrypt/live/
```

証明書の削除

```bash
sudo certbot revoke --cert-name=test.example.com
```

削除後
>/etc/apache2/sites-available にある設定ファイルを編集または、削除します。
>設定ファイルを削除した場合は、
>/etc/apache2/sites-enabled　にあるシンボリックリンクも削除します。

設定の確認

```bash
sudo apache2ctl configtest
```

Apache2 の再起動

```bash
sudo systemctl restart apache2
```

次のバージョンで確認しました。

```text
$ certbot --version
certbot 0.40.0

$ sudo apache2ctl -v
Server version: Apache/2.4.41 (Ubuntu)
Server built:   2020-08-12T19:46:17
```

## 期限切れの証明書を削除する方法

sudo certbot certificates で次のようになった時

```text
Found the following certs:
  Certificate Name: www.example.com-0002
```

次のコマンドで削除ができます。

```bash
sudo certbot delete --cert-name www.example.com-0002
```
[javascript]javascriptとは

#javascriptとは
JavaScriptは、HTML／CSSでは実現できない「動きの変化」を設定できます。
HTML／CSSで作成したWebサイトは、ブラウザ表示中に色を変えたり文字を編集したりすることはできません。コードで指定した通りの色や文字で、表示されます。
例えば、「いいね」機能です。SNSでよくある機能ですが、ハートマークを押すと、赤色に変わりますよね。これは、HTML/CSSではできません。javascriptの機能になります。

JavaScriptの記述方法は、次の2種類あります。

・ファイル内に記述する
・専用のファイル（拡張子.js）にJavaScriptのみ記述する

順番に見ていきます。

###ファイル内に記述する
HTMLファイル内に、scriptタグを使って、直接JavaScriptを記述します。

```index.html
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script>
      alert('Hello World');
    </script>
  </body>
</html>
```

scriptタグ内に記述されているalert('Hello World'); は、引数の文字列をアラートウィンドウに表示するという関数です。
今回はHello Worldという文字列が入っているため、アラートウィンドウにHello Worldと表示されています。

実際のブラウザはこうなります。
![js_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681053/ccaf1fee-86ce-9de9-fc8e-30b2eb2d922e.png)


###専用のファイル（拡張子.js）にJavaScriptのみ記述する
ブラウザに表示される内容はhtmlファイルに記述したときと同じですが、htmlファイルにjavascriptを記述してしまうと、コードの記述量が増えるにつれて、htmlと混在し、メンテナンスが行いにくくなります。そのため、htmlファイルとjsファイルを切り分けて、記述するのが効果的です。

```index.html
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="app.js"></script>
  </body>
</html>
```

```app.js
alert('Hello World');
```

こちらも実際のブラウザを確認してみます。
表示画面は先ほどと同様です。
![js_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681053/ccaf1fee-86ce-9de9-fc8e-30b2eb2d922e.png)
CKEditor4のcustomConfigで躓いた

# CKEditorのconfigがどうやっても反映されなくて泣いていた．

公式に沿って，
**head**タグで

```
<script src="asset('ckeditor/ckeditor.js')"></script>
```

を読み込んでbodyの最後で，

```
<script type="text/javascript">
  CKEDITOR.replace('profile');
</script>
```

こうやれば，id="profile"がCKEditorに置き換わった．

でだ，

設定変えたくて，デフォルトのconfig.jsとは別に同じ階層に作った，**config2.js**を読み込もうとしたのさ．
こんな感じで公式に沿った．

```
<script type="text/javascript">
  CKEDITOR.replace('profile',{ customConfig: '/ckeditor/ckeditor2.js' });
</script>
```

## 反映されない．

## ２時間は悩んだ．

CSSで無理やり消したりもした．

## 結果

これで解決できた．


```
<script type="text/javascript">
  CKEDITOR.config.customConfig = '/ckeditor/adminconfig.js';
  CKEDITOR.replace('profile');
</script>
```

先にcustomConfigを置き換えてから．replaceだった．

睡眠時間返してほしい．
ParticleがSceneViewだけに表示されてGameViewには表示されない時の解決方法

# 何が起きたか
AssetStoreで購入したParticleがURPに対応していなかった為変換を行った所
SceneViewではParticleが表示されるが、GameViewでは表示されない。
SceneViewとGameViewを同時に表示している場合は、両方に正しく表示される。

SceneView
![scene_view.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/abbb1c19-3847-589c-abe4-88cf45aac131.gif)
GameView
![game_view.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/80090470-b2b4-2fee-b85d-c52921280797.gif)

# 解決方法
UniversalRenderPiplineAssetのDepthTextureにチェックを入れる。
必要があれば他のQualityのURPAssetにも設定しておく。
![スクリーンショット_2020-08-22_11_08_26.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/120b49fa-25f9-7ab0-f517-42e2226211ee.jpeg)

DepthTextureにチェックを入れた後のGameView
![game_view_fix.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/1ad292c2-633a-7f27-4df0-47503bbef84f.gif)

# 参照
　https://answers.unity.com/questions/1358918/particle-system-not-showing-up-in-game-view-showin.html
windowsに直接画像などを描画する方法

この記事はwindows10にインストールしたvs2019と.NET Framework 4.7.2を使用しています。
完成形
![yaa.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543742/de252f55-d305-78b7-cf82-fcf1135ccf73.png)
てな感じです
こんなこともできます。![nikoko.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543742/e7fb4d18-fa5d-d8dd-7e5d-58387a362eae.png)

画像は大体さっき同じサイズにしたいなら
100px x 100px
ぐらいのを準備してください。


```csharp:Program.cs
using System;
using System.Drawing;
using System.Runtime.InteropServices;


namespace ConsoleApp1
{
    class Program
    {
        [DllImport("User32.dll")]
        static extern IntPtr GetDC(IntPtr hwnd);
        [DllImport("User32.dll")]
        static extern void ReleaseDC(IntPtr hwnd, IntPtr dc);
        static void Main(string[] args)
        {
            Random rnd = new Random();    //乱数インスタンス化
            IntPtr desktopDC = GetDC(IntPtr.Zero);
            using (Graphics g = Graphics.FromHdc(desktopDC))
            {
                //描画先とするImageオブジェクトを作成する
                Bitmap canvas = new Bitmap("画像のパス");
                while (true)
                {

                    //ImageオブジェクトのGraphicsオブジェクトを作成する
                    g.DrawImage(canvas, rnd.Next(0, 1920), rnd.Next(0, 1000));
                }
            }
        }
    }
}
```
curlコマンドとは？

#curlコマンドとは？何ができるのか？
手軽に、通信の中身を表示するコマンドです。
通信とは、http通信のことでインターネットを使い、webサイトを見るときに行われている通信です。
webサイトを見ているときは、以下のように、クライアントのPCとサーバーでの情報のやりとりが行われています。
クライアント側からはhttpリクエストが送られ、サーバー側からはhttpレスポンスが返ってきます。
![スクリーンショット 2020-08-22 11.02.14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663834/b1fd142f-9163-eda0-9407-39dc27e7f1e3.jpeg)

curlはこのhttpリクエストをサーバーに送り、返ってきたhttpレスポンスを表示するコマンドということです！

#curlコマンドを試してみる

```curl http://www.google.com/```
とコマンドを打つと、、
![スクリーンショット 2020-08-22 11.14.43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663834/239f4ced-eace-3f92-88de-88d211d30ac5.jpeg)
こんな感じで、googleのhtmlが表示されました。
##参考記事
https://qiita.com/yasuhiroki/items/a569d3371a66e365316f
https://itsakura.com/network-http-get-post
【Ruby】配列の中に配列（2次元配列）

プログラミング学習中で、これはメモしたいと思ったものを、自分用に分かりやすく残しておきます。

## 2次元配列とは

２次元配列というのはこういう状態のものをいいます。

```ruby
drink_price = ["milk_tea", [100, 120, 150]], ["royal_milk_tea", [200, 220, 250]], ["tapioca_milk_tea", [300, 320, 350]]
```

配列の中に要素として配列が格納された形、
ここでいうと、drink_priceという配列があって、その中に３つ

- "milk_tea", [100, 120, 150]
- "royal_milk_tea", [200, 220, 250]
- "tapioca_milk_tea", [300, 320, 350]

の要素が入っており、それぞれにも配列が格納されている状態のものです。

## 2次元配列の要素の取り出し方

ここで試しに、

```ruby
puts drink_price[0]
```

と打ちますと、

```ruby
milk_tea
100
120
150
```

と出力されます。
そして、[1]または[2]と添字を変えて打ち込んだ場合も、似たような結果になります。


ここで、"milk_tea"の値のみを出力したい時はこのように入力します。

```
puts drink_price[0][0]
```

これで、出力結果は以下になりました。

```
milk_tea
```

では次に、
配列の中の配列の中の要素のみを取り出したい場合についてです。

350を出力したい場合は、このように記述します。

```
puts drink_price[2][1][2]
```

これで出力結果は以下になりました。

```
350
```

順番に見ていきますと、
`drink_price[2]`の要素が`"tapioca_milk_tea", [300, 320, 350]`
→`"tapioca_milk_tea"`の添字は`[0]`
→`[300, 320, 350]`の添字は`[1]`

`drink_price[2][1]`の要素が`[300, 320, 350]`
→`300`の添字は`[0]`
→`320`の添字は`[1]`
→`350`の添字は`[2]`

よって、`drink_price[2][1][2]`の要素が`350`
という流れになります。

## まとめ
配列の中に配列が入っている状態のことを2次元配列という。
2次元配列の要素を取り出す時は、取り出したい添字を理解して、横に並べて記述する。
例　`array[1][0][2]`
Linux備忘録

# Linuxコマンド備忘録

## 文字抜き出し
```linux.file
# cat linux.file
1
2
AAA
3
4
BBB
5
6
7
8
AAA
9
BBB
10
```

```linux.cmd
# sed -ne '/AAA/,/BBB/p'
AAA
3
4
BBB
AAA
9
BBB
```

## ライブラリからrpm検索
```linux.cmd
# yum whatprovides (ライブラリ名)
```

## コマンドからrpm検索
```linux.cmd
# rpm -qf /usr/bin/dig
```

## awkの動作メモ

```file:hoge
a b c
1 2 3
q w e
```

```awk.sh
#!/bin/bash

DATE=`date`

cat hoge | awk -v HIDUKE="${DATE}" '
    BEGIN{
        print HIDUKE
        startRow = 1
    }
    {
        for(i = startRow; i <= NF; i++){
            printf $i
            if(i != NF){
                printf ","
            }
        }
        # 改行をする
        printf "\n"
    }
    {
        if(NR == 2){
            print NR
         }
    }
    END{
        print "owariyo"
    }
'
```

```awk.sh(result)
2020年  8月 30日 日曜日 01:05:04 JST
a,b,c
1,2,3
2
q,w,e
owariyo
```

## 後ろから〇文字以外を表示
```linux.sh
# cat hoge.txt
aa-bb-cc-v1
aa-bb-cc-v1-v1
aa-bb-cc--v1
#

# rev hoge.txt | cut -d'-' -f 2- | rev
aa-bb-cc
aa-bb-cc-v1
aa-bb-cc-
#
```

## シェルで経過時間を時：分：秒で表示
```linux.sh
echo "$(date -d "$(date -d @"${SECOND}" %T) 9 hours ago" +%T)"
```
NewsAPIを使い簡単にニュースサイトを作る

[前回の記事](https://qiita.com/UTOG/items/d33ba3a98dcb3e82a8fe)で予告したとおり今回はNewsAPIというものを使いニュースを取得して表示までします。

###プチ宣伝
誰でも簡単にオリジナルニュースが作れる[素人ニュース](https://amateur-news.herokuapp.com/)というものを作りました。今回作るニュース一覧もあります。どんな風に動くか気になる方もみてください。[前回の記事](https://qiita.com/UTOG/items/d33ba3a98dcb3e82a8fe)で紹介しています。

##完成図
![newsapi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/f5ab43f5-8925-2ff9-5c15-9622d2bed437.png)

##APIを取得する

まず[NewsAPIのサイト](https://newsapi.org/)に行って「Get API Key」ボタンを押してください。

![newsapi2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/ce864180-ba20-2b2a-b8aa-753dcd5fc8ed.png)

初めての方は新規登録画面が表示されるのでちゃちゃっと登録してください。登録が終わったらマイページが表示されるはずです。

![newsapi3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/e10fc246-ae64-1267-20bc-057c3dbfdc2e.png)

API keyのところに書いてあるのがあなたのAPIです。このページは何度でも「Get API Key」ボタンをおせば行けるのでまだコピーする必要はありません。
そしてこれでNewsAPI側の設定は終わりです。あとはrailsです。

##rails

コントローラーは普通に作ってください。今回はnews controllerという名前でやります。
モデルは必要ありません。

```ruby:news_controller.rb
class NewsController < ApplicationController
    def index
    end


    def data
      uri = URI.parse('http://newsapi.org/v2/top-headlines?country=jp&apiKey=さっき取得したAPI')
      json = Net::HTTP.get(uri)
      moments = JSON.parse(json)
      @data = moments['articles'].to_json
    end
end
```

今回は日本のニュースだけを取得します。本当は経済のニュースだけとか海外の英語のニュースとかも取得できます。URLを変更して色々仕分けるのも面白いと思います。
ここからは表示です。

```erb:index.html.erb
<p>ニュース</p>
<hr>
<div id="result">no information...</div>
<script>
var f = function(){
	$.ajax({
		type: 'GET',
		url: '/news/data'
	});
};
f();
</script>
```

ここでindexページにいったら'/news/data'に飛んで自動的にニュースを表示するようにします。

```js:data.js.erb
var data = <%== @data %>;
var result = '<div class="datas">'
data.forEach(function(e){
	var div = '<div class="data">'
	if (e.urlToImage != null) {
	result += '<img src="' + e.urlToImage +'" class="image_data">';
	}
	result += '<a href="' + e.url +'" class="yahoo_link" target="_blank">' + e.title + '</a><br>';
	result += '<p class="time_data">' + e.publishedAt + '</p><hr class="clear">';
    div += '</div>'
});
result += '</div>'
$('#result').html(result);
```

dataはdata.html.erbではなくdata.js.erbです。かなり間違えやすいポイントなので注意してください。
簡単に説明すると１行目で@dataをjsで使えるようdataという変数に変えています。
２行目はデザインで３行目で繰り返し処理をしています。railsでいうeachです。
４行目もデザインで５－７行目は画像の処理です。５行目のif文は画像がない場合は画像を表示しないようにしています。６行目で表示してます。
８はタイトル、９行目で作成日時を表示してます。

あとはルーティングだけです！

```ruby:routes.rb
get "news/data"
get "news/index"
```

これで完成です。お疲れさまでした！！！

うまく行かなかったときはコメント下さい。
そして途中で言ったとおりNewsAPIはURLを変更して細かくニュースを仕分けることが出来ます。[NewsAPIのサイト](https://newsapi.org/)の上方、Get startedをおせばそのへんの細かいやりかたが書いてあるはずです。
例えばアメリカのニュースは

```
https://newsapi.org/v2/top-headlines?country=us&apiKey=自分のAPI
```

このURLをnews controllerのdataアクションのURI.parseのとこにいれればいいわけです。簡単ですね。

##まとめ
とにかく一つ言えることは
誰でも簡単にオリジナルニュースが作れる[素人ニュース](https://amateur-news.herokuapp.com/)というものを作りました。お願いします。（最後まで宣伝ごめんなさい）
pryでrails+dockerのデバックをする

# この記事の目的

- rails
- docker

でpryを使ったデバックをするまでをまとめる

# dockerの設定

```docker-compose.yml
services:
  web:
    stdin_open: true
    tty: true
```

- stdin_open・・・コンテナの標準入力をオープンしたままにする
- tty・・・コンテナに疑似TTYを割り当てる

# gem

```Gemfile
group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'pry-rails'
  gem 'pry-byebug'
  gem 'pry-doc'
end
```

# 実際にByebugを使う場合

dockerを立ち上げ、

```
docker ps
```

でwebのidを調べる。

```
docker attach <container name or ID>
```

byebugを走らせたいところに

```
binding.pry
```

# 参考文献

https://logicoffee.hatenablog.com/entry/2018/06/27/094027
Batch server is now Fargated (バッチサーバーをFargate化しました)

I have Fargated the batch server in our product. So this is the translation now I'm planning to give an presentation. (This is a memo for my presentation)

日本語スライドはこちら: https://qiita.com/e99h2121/items/cd0dea16b946869e1846

## What's great about it?
You won't have to keep a batch server running 24/365.

The relationship between jobs will be limited, so there will be no more job jams.
It's a big step for our cloud-friendly product.

We estimate that it will save the company **** per year.

## Here is the history of our product batch job 

### Ver.5x
The world only had clients and database servers. Nightly batch was kicked out of the C++ service.

### Ver.6x
In the early 2000's, it was structured in three tiers via the application server. The queue management service lives in the AP Server. When the queue starts to get jammed, the screen system and the screen management system are also jammed....

### Ver.7x
In the 2010's, the queue management service was separated from the application server, and the ability to maintain it independently was huge. It's a big deal to be able to maintain it independently.

### Ver.8x
And batch server is now fargated...


## Reference 

[Fargateでバッチサーバを作る(Creating a Batch Server with Fargate)](https://qiita.com/fnaoto/items/d6523786daa128ddfe60)

[Fargateでサーバレスバッチ基盤を構築した話(The story of building a serverless batch infrastructure with Fargate)](https://engineer.crowdworks.jp/entry/2020/07/20/180014)


### Other
Technical notes on the way to Fargate (written by Yamada)

- [WindowsローカルのAWS SDKでJavaプログラムを動かすまで(How to run a Java program on a Windows local AWS SDK)](https://qiita.com/e99h2121/items/7b153c12f61470ffdf48)
- [AWS SDK for Java 1.11.x と 2.x を共存させる(AWS SDK for Java 1.11.x and 2.x coexisting)](https://qiita.com/e99h2121/items/2dd857fc5bc20796d691)
- [AWS SDK で出会った例外(Exceptions encountered in the AWS SDK)](https://qiita.com/e99h2121/items/21cd273ac3b880e6b6ab)

Briefly speaking the most difficult point was to resolve the dependency disaster of our jar ...

## Usage (Internal use)
You can use the features by including the word "Fargate" in the batch server code. If you login with yamada_n9/yamada_n9, you can start all jobs with Fargate :smiley_cat: 

## Next 
I try to run an interface job in Fargate!

That's all for my internal memo.
isset

#isset の使い方

・変数が宣言されていること、そして NULL とは異なることを検査する.

##基本的な使い方
こんな感じでisset(検査したいパラメータ)をいれる。

```php
if (isset($var)) {
    echo "This var is set so I will print.";
}
```

##チェックできること
・変数がセットされているか否か
・複数値が入力されている場合、全て変数がセットされていないとFALSEが返される。
WebGL向けにビルドしたらHDRが機能していない時の解決方法

# 何が起きたか
URPのテンプレートからプロジェクトを作成し、
ShaderGraphでHDRカラーを使用したMaterialをアタッチしたオブジェクトが、
WebGLでビルドした時HDRが反映されていなかった。
NoiseやVoronoiなどの他のノードは機能している。

# 原因
WebGLのQualityはデフォルトでMediumになっていて、
EditorはデフォルトでHighになっている。
MediumにはHDRにチェックが入っていない。

# 解決方法
使用するQualityにアタッチされているUnivarsalRenderingPiplineAssetのHDRにチェックを入れる。
![スクリーンショット_2020-08-19_13_33_22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/77fbb251-a6f5-137c-dd22-ef5ddd5c5ea9.jpeg)

もしくは
WebGLもQualityがHighでビルドされるようにする。
![スクリーンショット_2020-08-19_8_37_24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/4013464e-bcc3-bda9-678c-633e97dafcb1.jpeg)

# 言い訳
HDRはデフォルトでONでいいと思います...
【備忘】Docker Toolbox for Windows インストール時のエラーについて

# 概要
Docker Toolboxで環境構築をした際、Docker Quickstart Terminal起動時にエラーになったので
回避策をメモしておきます。（※解決したのかようわからんので回避策としています）

# 環境
- Windows10 Home 64bit

# 出てきたエラー
```
Error setting up host only network on machine start: The host-only adapter we just created is not visible. This is a well known VirtualBox bug. You might want to uninstall it and reinstall at least version 5.0.12 that is is supposed to fix this issue
Looks like something went wrong in step ´Checking status on default´... Press any key to continue...
```
「This is a well known VirtualBox bug.」とあるので、VirtualBoxが原因ぽいです。

# エラー回避策
Virtual Boxを最新バージョンにするために、再インストールしました。

# 終わりに
Docker for Windowsを使いたいので会社の余ったPCを貸してもらおうと思います。
python+anacondaにdjangoをインストールしてサーバー起動まで 

初投稿＆Markdown記述も初なので読みにくいことご了承ください。
OSはMacですが、Windowsでもそんな変わらないかと思います。

前提：python+anaconda環境設定済みであること。

仮想環境を作成。ここでは「pyW」と言う名前で作成。

```
conda create -n pyW python = 3.6 anaconda
```

アクティベートします。

```
conda activate pyW
```


djangoをインストールします。

```
conda install -c anaconda django
```

サーバー環境を配置するフォルダを準備します。
ここではデスクトップに「WEB」と言う名前で準備し、その階層に移動します。

```
cd web/
```

サーバー環境を作成します。
ここでは「djangoproj」と言う名前で作成します。

```
django-admin startproject djangoproj
```

作成できたらフォルダが作成されるのでその階層に移動。

```
cd djangoproj/
```

サーバー起動します。

```
python manage.py runserver
```

ブラウザで　http://127.0.0.1:8000/ 叩いて表示されればOK。
【初学者でもできる】Aframeを使って3DWebARを作る方法d

#ソースコード全体
https://github.com/i-am-ethan/aframe_tutorial_first-commit
#いつ書いたか
2020年8月22日

#書いた目的
WebARの業界を盛り上げたい

#最低限これはできて欲しい
・VSCodeをインストールしている
・index.htmlを用意できる

#導入手順
##（１）aframe公式ページからコードをコピペ
aframe公式サイトからダウンロードする。
https://aframe.io/docs/1.0.0/introduction/#what-is-a-frame
![スクリーンショット 2020-08-22 9.39.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/fa89c9e2-6289-480e-4102-6bce67512499.png)



##（２）初期コード
下のコードを記述して
Live Serverで出力してみてください。

```html:index.html
<!doctype html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <title>eheeeee</title>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
```

すると、こんなかんじで3D映像が出力されます
![スクリーンショット 2020-08-22 9.41.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/86ac5e26-a568-5197-b6cb-b3e3da1ae123.png)


##（３）コードの解説

```html:index.html
<!doctype html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <title>eheeeee</title>
  </head>
//bodyタグから上は通常通りなので解説なし
  <body>
//a-sceneタグ：その名の通りsceneです。
//a-frameでオブジェクトを作成するときは基本的に全てsceneの中に記述します。
    <a-scene>
//a-box：box(cube)をつくりpositionや向き、色を指定します
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
//a-sphere:球
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
//a-cylinder:円柱
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
//a-plane:平面（地面に使うことが多い）
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
//a-sky:背景
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
```

##（4）その他
上記のコードのプロパティをいじることで色や方向、サイズなどを変更することが可能です。

ただ、これだけではつまらないと思うので時間があったら他に記事を書きます。
rails tutorial 第4章

#はじめに

独学で[rails tutorial](https://railstutorial.jp/)を進めていく過程を投稿していきます。

進めていく上でわからなかった単語、詰まったエラーなどに触れています。

個人の学習のアウトプットなので間違いなどあればご指摘ください。

初めての投稿なので読みにくいところも多々あるかと思いますがご容赦ください。


#第4章 Rails風味のRuby
##4.2.3 メソッドの定義

演習3
palindrome_tester("racecar")に対してnil?メソッドを呼び出し、戻り値がnilであるかどうかを確認してみてください（つまりnil?を呼び出した結果がtrueであることを確認してください）。このメソッドチェーンは、nil?メソッドがリスト 4.10の戻り値を受け取り、その結果を返しているという意味になります。([rails tutorial](https://railstutorial.jp/)第4章より引用)

演習の通り動作確認はできました。しかし、一つ疑問が生まれました。

Q..何で文字列が返っているのに戻り値はnilなんだろう

```
#palindrome_testerメソッド
def palindrome_tester(s)
  if s == s.reverse
    puts "It's a palindrome!"
  else
    puts "It's not a palindrome."
  end
end
```
設定したpalindrome_testerは文字列を返すメソッドのはず、、、

A..putsの戻り値はnilだから。
putsの戻り値はnilなのでpalindrome_tester("racecar")に対してnil?メソッドを呼び出すとtureが返ってくる。
(表示された文字列はあくまでputsの副作用であり戻り値ではない)←ここが理解できていなかったようです。すっきりしました。

##4.3.2 ブロック

演習4
リスト 4.12の「?」の部分を、それぞれ適切なメソッドに置き換えてみてください。ヒント:split、shuffle、joinメソッドを組み合わせると、メソッドに渡された文字列（引数）をシャッフルさせることができます。

```
#リスト 4.12: 文字列をシャッフルするメソッド 
>> def string_shuffle(s)
>>   s.?('').?.?
>> end
>> string_shuffle("foobar")
=> "oobfra"
```
([rails tutorial](https://railstutorial.jp/)第4章より引用)

答えは

```
def string_shuffle(s)
  s.split('').shuffle.join
end
```
でした。
ここでまた疑問が生まれました。

Q..s.split('')って?

A..splitメソッドは引数に('')(空白の文字列)を指定する事で一文字ごとに分割した配列を返す。
参考https://rakuda3desu.net/rakudas-rails-tutorial4-3/

そういうことだったんですね。

##4.3.3 ハッシュとシンボル

演習1
キーが'one'、'two'、'three'となっていて、それぞれの値が'uno'、'dos'、'tres'となっているハッシュを作ってみてください。その後、ハッシュの各要素をみて、それぞれのキーと値を"'#{key}'のスペイン語は'#{value}'"といった形で出力してみてください。
([rails tutorial](https://railstutorial.jp/)第4章より引用)

問題発生!!
出力する際↓のように日本語が文字化けしてしまう。

```
"one\x{E381}\xAE\x{E382}\xB9\x{E383}\x{9AE3}\x{82A4}\x{E383}\xB3\x{E8AA}\x{9EE3}\x{81AF}uno"
"two\x{E381}\xAE\x{E382}\xB9\x{E383}\x{9AE3}\x{82A4}\x{E383}\xB3\x{E8AA}\x{9EE3}\x{81AF}dos"
"three\x{E381}\xAE\x{E382}\xB9\x{E383}\x{9AE3}\x{82A4}\x{E383}\xB3\x{E8AA}\x{9EE3}\x{81AF}tres"
```

解決のために試したこと

一度コンソールを終了して

```
chcp 65001
```
コマンドで文字コードをutf-8にした

結果
全角文字を入力しようとするとコマンドプロンプトが落ちる、、、

それから色々と調べ、以下の記事を参考にし、無理やり表示させることは出来るが、windowsとの相性が良くないということを確認しました。
https://qiita.com/jnchito/items/08b5be458134073c60e3 (下に記載されているコラム)
https://teratail.com/questions/198313

最終的に
演習の課題であるハッシュの作り方とeachメソッドを使った出力の仕方は理解できたので次に進むことにしました。

##4.4.5 ユーザークラス
余談です。

rails tutorialではアプリケーションのルートディレクトリにexample_user.rbファイルを作成とありました。

格好よくtouchコマンドでファイルを作成しようとしたところ

```
'touch' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```
また出ました、、、笑

コマンドプロンプトで同様の動きをするコマンドが

```
type nul > ファイル名
```
とのことでしたのでそちらのコマンドで実行しました。
linuxコマンドが使えないの不便ですね、、、

#終わりに
第4章はrubyの理解も深まり面白い内容でした。

、、、、、、ターミナル変えた方がいいのかな、、、、笑
【Laravel】transactionメソッド

##はじめに
データを登録や更新処理する時にトランザクションを用いていますか。
トランザクション処理を入れていない場合、データの登録や更新処理に失敗した場合も成功した一部分だけ処理されて期待に反した処理が行われることがあります。

簡単に言うと銀行のATMに1万円預けるといったことをする時、「ATMに1万円を入れる」と「機械が1万円を読み込んで記帳する」といった処理があると思います。
「ATMに1万円を入れる」の処理は成功「機械が1万円を読み込んで記帳する」は失敗した場合その1万円はどこかに消えてしまいますね。
そうならないために、ここからここまでが一連の登録や更新処理であると言うのを示すのに用いるのが`transaction（トランザクション）`です。


【Laravelのトランザクション】
クロージャーの中の処理で例外が発生すると自動でロールバックされクロージャーの中で返した値がtransactionメソッドの返り値にできる

##transactionメソッドを実装する

Laravelでトランザクション処理を行う方法は２つあります。
`①DBファザードのtransactionメソッドを利用する`
`②手動のトランザクション（DBファザードのbeginTransaction, rollBack, commit を利用する）`

基本は①DBファザードのtransactionメソッドを利用するで問題ないですが、トランザクションを手動で開始しロールバックとコミットをコントロールしたい場合は、DBファサードのbeginTransactionメソッドを使います。

###DBファザードのtransactionメソッドを利用した実装

DBファザードのtransactionメソッドにクロージャーを渡し、その中でDBの更新処理を行います。

```php
DB::transaction(function () {
    // 更新処理
});
```

```php
<?php

namespace App\Http\Controllers;

use App\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class UserController extends Controller
{
    public function update (Request $request)
    {
        $user = User::find($request->id);

        return DB::transaction(function () use ($user, $request) {
            $user->fill($request->all();)->save();

        return $user;
    });
}
```


###手動のトランザクション（DBファザードのbeginTransaction, rollBack, commit を利用する）

try,catchを用いて更新処理を行います。

```php
<?php

namespace App\Http\Controllers;

use App\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class UserController extends Controller
{
    public function update (Request $request)
    {
        $user = User::find($request->id);
        
        DB::beginTransaction();
        try {
            $user->fill($request->all();)->save();
            DB::commit();
        } catch (\Exception $e) {
            DB::rollback();
        }
        return $user;
}
```

##おわりに
いかがでしたでしょうか。
データを扱う際には期待通りに動いているか慎重に確認しながら実装しましょう。
emacs で Win10 ロック画面画像を自動コピー

Windows10 のロック画面でランダムに出る自然画壁紙を自動的にコピーしておく関数です。
コピー先に無いものだけをコピーします。
init.el 等で日に一度程度実行するといいでしょう。
自分は終了フックで実行しています。

# init.el 等でのセットアップ例

[ここ](https://gist.github.com/s-fubuki/03d68b427838cf1b9ed28d982e16f2aa)からソースを取ってきて `load-path` の通った処に置き `require` します。
`wallpaper-spot` 等変更したい変数を再設定します。

## 終了フックに設定する場合
```init.el
(require 'wallpaper-copy)
(setq wallpaper-spot "~/img/landscape/")
(add-hook 'kill-emacs-hook #'(lambda () (wallpaper-copy))) 
```

## フックを汚さないで単純にその場で実行
```init.el
(require 'wallpaper-copy)
(setq wallpaper-spot "~/img/landscape/")
(wallpaper-copy)
```

# コピー対象の選び方
件の画像の元ファイルは変な長ったらしいハッシュ値のようなファイル名が適当につけられていて、内容に関わらず名前がかぶったりする場合もあるようなので、同じものかどうかは実体で比較しています。

サイズが同じなら先頭 256 バイトを比較して同一かどうか区別しています。
完全比較ではないですが jpeg なので違う画像ならこれでたまたま一致してしまうことはないと思うので、 コピー先にはまだ無い画像として拡張子をつけてコピーします。 (元ファイルには拡張子がない)

# カスタマイズ変数

## wallpaper-assets
コピー元ディレクトリ。
多分みんな同じなので通常は再設定しなくても大丈夫です。

## wallpaper-spot
コピー先ディレクトリ。
デフォルトは `~/spot/` ですが無ければ自動的に make-directory されます。

## wallpaper-bin-cmp-length
バイナリ比較サイズです。 バイト単位指定でデフォルトは 256 です。
これも特に変更しないでも大丈夫だと思います。

## wallpaper-dup-suffix
実体は違うがコピー先に既にある名前の場合、ファイル名ノードの最後にこの文字列をつけて別の名前にしてコピーします。
デフォルトは `_` で

> "foo.jpg" -> "foo_.jpg"
> "foo_.jpg" -> "foo__.jpg"

等となります。
paddingとmarginの違い

paddingとmarginを最初に見たとき、
どう区別して書けばよいかわかりづらかったので
備忘録的にメモ書きする。

paddingとmarginは枠線(border)があるときに区別すべき。
枠のないテキストの余白を作る場合は、どちらかを0にする。
例えば、marginを0にし、paddingのみで調整する。

inputやtextarea要素では、枠を表示することが多いので、
要素の周りの余白はmarginで調整する。
DockerでGhost

前回：[DockerでPostgreSQLとOwnCloud](https://qiita.com/F_clef/items/6d988c188e4ecbfc42cd)
これはそろそろDockerを使えるようになりたい筆者の試行錯誤の軌跡です。

# GhostブログをDockerコンテナへ移行
前回はPostgreSQLとOwnCloudをDockerコンテナに移行しました。
![Untitled(8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227222/38bdcb2f-3f8d-6e20-2775-9ba2f912f74e.png)

今回は、VMサーバー群のアプリケーションのうち、GhostブログをDockerコンテナに移行します。
![Untitled(9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227222/6d33a039-3e11-5747-6bfc-755129480888.png)

# コンテナの構成
docker-compose.ymlは以下のようにしました。

```yaml:docker-compose.yml抜粋
    blog:
        image: ghost:latest
        restart: always
        environment:
            url: https://<ブログのURL>
            mail__transport: SMTP
            mail__options__host: smtp.zoho.com
            mail__options__port: 465
            mail__options__secureConnection: 'true'
            mail__options__auth__user: <アカウントID(メールアドレス)>
            mail__options__auth__pass: <パスワード>
            mail__from: <配信メールの送信元アドレス>
        volumes:
            - /home/fclef/docker/server/blog/content:/var/lib/ghost/content
```

[Ghost公式のイメージ](https://hub.docker.com/_/ghost)があったのでそれを活用しました。

設定ファイルの設定値変更は環境変数を渡すだけです。
ZOHOで自ドメインメールを運用しているので、ZOHOのSMTPサーバー情報を設定しました。

記事等は、管理画面からエクスポート/インポートできますが、
コンテナで記事を永続化するには`/var/lib/ghost/content`をバインドする必要があったので、
VMで運用していたときの`cotent/`をコピーして来てバインドしました。
問題なく内容が引き継がれています。

# リバースプロキシ
ghostイメージでは、`http://localhost:2368`でブログを配信します。
ソケット化してコンテナ内にnginxを組み込んで配信してもよかったのですが、面倒だったのでそのままにしています。
リバースプロキシサーバの設定は普通です。

```conf:ブログ.conf抜粋
    location / {
    	include /etc/nginx/params/proxy_params;
        proxy_pass http://blog:2368;
    }
```

今回の要は環境変数での設定値上書きでした。
PostgreSQLでもありましたが、こっちの方が複雑でできることが多そうです。
ただ順番にコンテナ化してるだけですが、いい感じにケーススタディできてる気がします。

次回：[EmbyをDockerで運用する](https://qiita.com/F_clef/items/8563fbcc8da3edc9c81c)
ひとりストーリーポイントのすゝめ

# 背景
- ~~[newsdict.io](https://github.com/newsdict/newsdict.io)~~->[slidict.io](https://slidict.io)をプライベートの時間を使って作っている
- SaaSにできればいいと思っているけど、基本楽しいからやっている

# 今までやっていたこと
- タスクをチケット化 (時間はかなり有限なのでどこまで進捗したかを図るたまには有用だった)

## なぜそれ以外はやらなかったのか
- 楽しさに重点を置きたかったから

# 課題
８時間労働者になって子供もできたので、自分のやりたい【タスクがいつ終わるかわからない】

# ストーリーポイントを導入してみた

![newsdict.jpストーリーポイント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21903/106a9e5c-49c3-1b39-977f-e49793f9ba1a.png)

# ストーリーポイントって何？


# 解決できたこと
- 1週間にどれだけ自分がやれるかがわかって、目標がいつ頃達成できそうか目算することができた。
- issue化したタスクがほんとはもっと分解できることに気づいた。
- このタスクやらなくても当初のやりたいことが達成されていることに気づいた。（やっている最中にほかのやりたいことに着手してしまう）

# 解決できてないこと
- 大きな目標に対してのマイルストーンを描く
- 企画・仕様検討する際のポイントは大きくなりがちでポイントにしてしまうとタスク的で楽しくない・・・感じがする・・

# 結論

僕にとってストーリーポイントとは自分がどの程度ストレッチできるか、特定期間でどの程度タスクを消化できるには有用だが、やりたいことを考えたり想像したりするのに使うことはできない。

という結論になりました。

# 参考資料
http://poohsunny.hatenablog.com/entry/2017/12/18/235235
※ ストーリーポイントを称賛する記事を見るより称賛してない記事を見たほうがメリットデメリットの理解には役立ちます
https://qiita.com/keitakn/items/c30b7071ebfbf4b1b3e0
※ きれいにまとまってます
rails tutorial 第3章

#はじめに

独学で[rails tutorial](https://railstutorial.jp/)を進めていく過程を投稿していきます。

進めていく上でわからなかった単語、詰まったエラーなどに触れています。

個人の学習のアウトプットなので間違いなどあればご指摘ください。

初めての投稿なので読みにくいところも多々あるかと思いますがご容赦ください。


#第3章 ほぼ静的なページの作成

##3.2.1 静的なページの生成

git push -u origin static-pages
Q..上のuフラグの意味は? 

A..以下の記事が参考になりました。
https://www.it-swarm.dev/ja/git/git-push-u-origin-master%E3%81%A7u%E3%83%95%E3%83%A9%E3%82%B0%E3%81%AF%E4%BD%95%E3%82%92%E6%84%8F%E5%91%B3%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F/1041998972/

つまりはgit push やgit pullをする際のリモートブランチをuフラグで設定、以降のpull や push で引数を設定しなくて済むようにしているのだと思います。

#3.3.1 最初のテスト
問題発生!!
rails tutorialでは


```
#リスト3.15
$ rails db:migrate     # システムによっては必要
$ rails test
2 tests, 2 assertions, 0 failures, 0 errors, 0 skips
```

テストスイートは期待どおり成功する。
とありましたが実際には

```
Error:
StaticPagesControllerTest#test_should_get_help:
ActionView::Template::Error: Permission denied @ rb_file_s_rename - (C:/environment/sample_app/tmp/cache/assets/sprockets/v4.0.0/XH/XHkgOJfID2QJgLszY19fBcF6t69Q2FkOAdTCNfBmzRI.cache.85331700.26812.864170, C:/environment/sample_app/tmp/cache/assets/sprockets/v4.0.0/XH/XHkgOJfID2QJgLszY19fBcF6t69Q2FkOAdTCNfBmzRI.cache)
    app/views/layouts/application.html.erb:8
    test/controllers/static_pages_controller_test.rb:10:in `block in <class:StaticPagesControllerTest>'
```
とtest_should_get_helpにおいてエラーが発生しました
これを解決するため以下の記事を参考にしました
https://qiita.com/yasumichi/items/ccf1f7f57b6627034226

記事にあるよう

```
> rails tmp:cache:clear
> rails assets:precompile
```
のコマンドを実行したら解決しました。

#3.4 少しだけ動的なページ
問題発生!!
rails tutorialでは学習のため、一時的に以下のようにファイル名を変更してくださいとの指示があります。

```
$ mv app/views/layouts/application.html.erb layout_file
```
ですがコマンドプロンプトで上のコマンドを実行すると

```
'mv' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

と表示されました。
原因を調べたところWindowsのコマンドプロンプトではmvコマンドがサポートされていないよう、、、

続けて調べてみると、どうやらコマンドプロンプトではmvコマンドの代わりにmoveコマンドで同じ処理を実行してくれるようでしたので

早速実行してみたところ

```
C:\environment\sample_app>move app/views/layouts/application.html.erb layout_file
指定されたパスが見つかりません。
```
パスが見つからない、、、
それならばとlayoutsディレクトリに移動してからmoveコマンドを実行してみましたところ

```
C:\environment\sample_app\app\views\layouts>move application.html.erb layout_file
        1 個のファイルを移動しました。
```

ようやく解決出来ました。
(application.html.erbファイルの名前を変えたかっただけのようなのでエディタでカーソルを合わせて右クリックしてrenameでも大丈夫そうですね)
#終わりに
今回の章では思わぬところでエラーに遭遇し、びっくりしました。
慌てずしっかりと解決できたことが少し自信になりました。
しかし、これからもwindows特有のエラーと戦っていくことになるとはこの時は思いもよらず、、、
Notarize 申請時に、"Hardened Runtime is not enabled." エラーが出たら？（cliアプリ組み込み時）

# タイトルのエラーで「ハマった」と思ったら

　Appleに自作アプリの`Notarize`を取得するため、`Archive`をアップロードしようとすると、"Hardened Runtime is not enabled."というエラーが出て次のステップに進めない場合があります。
　このエラーは、申請するアプリにコマンドラインアプリケーションを組み込んでいるときに起きやすいです。

　コマンドラインアプリケーションが、`Xcode project`で作成されるものであれば`Target`の`Project Settings`で、`Entitlement`を編集・追記してあげれば酔いのですが、外部からダウンロードしてきてビルドは`configure`, `make`で作られるアプリケーションだと`Entitlement`を付加してのビルドは難しいです。

　この記事は上記問題に遭遇してしまった際の対処法の説明になります。

## `(sudo )make install`の前に

　`make install`出来ると言うことは、`install`するべきバイナリーは作られているはずなので、ここで一端通常のステップから脇道に逸れます。

### インストールされるバイナリーを探す

　この方法でビルドできると言うことは、どんな名前のコマンドが作られるか知っている方だという前提の元で話を進めますが、ビルド中のディレクトリで

```bash
find . -name "コマンドラインアプリケーション名"
```

と、ファイル検索を行い、目的の`cli`アプリを探します。

### バイナリーが見つかったら

　あとは、`codesign`で署名してあげれば良いだけです。`--options runtime`パラメーターがミソっぽいです。具体的には

```bash
codesign --force --deep-verify --verbose --sign "Developer ID Application: 
証明書の自分の名前 (チームID)" コマンドラインアプリケーションファイル名
```

`""`で括られた`Developer ID Application: `以降の部分は`Keychain Access`の`自分の証明書(My Certificates)`の中の`Developer ID Application: (以下略)`を選んで、上に表示される証明書の1行目をドラッグで選択した後、コピー＆ペーストで書き間違いが起きないように気をつけましょう。
繰り返し行うのであれば、`alias`に登録しておくのも良いかもしれません。

### `(sudo )make install`を続行

　これで、`Hardened Runtime`が許可されたコマンドラインアプリケーションがインストールされるので、直接プロジェクトに追加するなり、`Build Phase`で`Shell Script`でコピーを行うスクリプトを書くなりして自分のアプリケーションにコマンドラインアプリを組み込んでください。

## `Archive`を`Notarize`申請する

 上記を終えたコマンドラインアプリは`Hardened Runtime`が許可されたアプリになっているので、今度はエラーが起きずに`Upload`プロセスまで滞りなく行われるはずです。

## 終わりまで読んでくださり

 ありがとうございました。この記事が皆様の`Macアプリ`開発の一助となる事を願います。
「Goプログラミング実践入門」サンプル実行エラー解消方法

Go初学者です。
[「Goプログラミング実践入門」](https://www.amazon.co.jp/Go%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80-%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%A7%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89Web%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E3%82%8B-impress-top-gear/dp/4295000965)に載っているサンプルプログラムを実行しようとした時に発生したエラーと、その解決方法です。

# 環境
- macOS Catalina 10.15.6
- Go 1.15

# 事象

```
$ go install first_webapp
package first_webapp is not in GOROOT (/usr/local/go/src/first_webapp)
```

# 解決方法

次のコマンドを実行してから、上記のコマンドを再実行。

```
$ go mod init first_webapp
go: creating new go.mod: module first_webapp
```

Goのバージョンアップにより、「Go Modules」というものが使われるようになったためのようです。
詳しくは次の記事などを参照してください。
[「Go Modules」](https://qiita.com/propella/items/e49bccc88f3cc2407745)
Negascoutとは

# 対象読者
アルファベータ法を知っている。
ググったがネガスカウト法がいまいち理解出来ない。

# 前提
あらかじめWikipediaの[Negascout](https://ja.wikipedia.org/wiki/Negascout)のページを見てください。

# 要するにこういうこと

![ネガスカウト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/46e9bbbd-4f55-fc53-cd4a-92ce57bee356.png)

# 参考にしたサイト
- [Negascout（Wikipedia）](https://ja.wikipedia.org/wiki/Negascout)
- [ネガマックス法とネガスカウト法](http://www.nct9.ne.jp/m_hiroi/light/pyalgo25.html)
.gitignoreが認識されなかったのはUTF-16のせいみたい

### .gitignoreが認識されない！
Laravelで作ったアプリをデプロイ作業中、.gitignoreが認識されない事態が起きた。
半日以上もがいたので、それをここに記しておく。

### 原因と対処
原因は、.gitignoreがUTF-16で作られていたからの様子。
UTF-8に直したら、.gitignoreが反映された。

### なぜ、このような事態に陥ったか。
.gitignoreファイルをプロジェクト毎に適切に作成してくれる、スクリプト__gibo__というものを知って、実行してみた。以下の記事を参考にした。
- [Qiita - 【入門】Windowsでgiboを用いるための環境構築とgiboの使い方](https://qiita.com/rebi/items/d7fddf16035fab3e123f)
- [Qiita - 気付いたら.gitignoreはgiboで自動生成する時代になっていた
](https://qiita.com/tmknom/items/c4bcebe17d25381fa45d)

giboが使えるようになって、以下のコマンドを実行。
`$ gibo dump Composer Laravel >> .gitignore`

このとき、VS code上で起動したpower shellで実行した。
.gitignoreをみると、なぜか文字化けしていた。
文字コードをきちんと理解していなかった僕は、.gitignoreを削除して、もういちど、上記コマンドを実行した。

すると、今度は文字化けなく作成された。

その後、git管理を進めようとしたのだが、.gitignoreで管理されないはずのファイルが管理が続けられている。
.gitignoreが認識されていない。

Gitコマンドをpower shellで使えるようにしているのが良くなかったのかと思ったが、そうでもなかった。
（※Gitコマンドをpower shellで使えるようにするために、git bashのbinを通して使っている。）

### .gitignoreの文字コードがUTF-16となった理由
power shellでgiboを使って.gitignoreを作るとUTF-16で作られる。
なお、もとから.gitignoreがある場合はUTF-8のままだが、文字化けして表示されていた。

### 対応策
1. UTF-16で作られた.gitignoreの文字コードをUTF-8に戻す。
2. power shellでgiboを使わない。giboを使うときはgit bashなどを使う。

### 今回の教訓
__文字コードを適切に設定することは重要である__
コンストラクター関数とインスタンス　初心者による初心者向けの説明


# コンスタラクター関数とは
コンストラクター関数は、新しくオブジェクトを作成するための雛形となる関数のこと。

### 雛形をつくります
コンストラクター関数を定義します。
慣例的にコンストラクター関数名は他の関数名と見分けがつきやすいように、一文字目を大文字とします。
 
例えば、名前、HP、攻撃力、必殺技を持つキャラクターを複数生成したい! 
そんなとき、まず雛形となるコンストラクター関数を定義していきます。

```js
function Caracter(name, hp, atk, skills) {
	this.name = name;
	this.hp = hp;
	this.atk = atk;
	this.skill = skills;
}
```
雛形ができたら次はインスタンス化（雛形から実物・実体を製造）します。
# インスタンス化とは
new演算子をつけてコンスタラクター関数を実行し新たなオブジェクトを作成することをインスタンス化といいます。
作成されたオブジェクトをインスタンス（実物・実体）と表現します。

### 作成した雛形をもとにキャラクターを生成します
さきほど定義したコンストラクター関数をnew演算子を頭につけて実行し、インスタンスを作成してみます。

```js
const harryd = new Caracter('ハリード', 850, 40, '黄龍剣');
const boston = new Caracter('ボストン', 800, 50, 'タイガーブレイク');
```

### 強そうなキャラクターが作成されました

```js
console.log(harryd);
//log >>> Caracter {name: "ハリード", hp: 850, atk: 40, skill: "黄龍剣"}
console.log(boston);
//log >>> Caracter {name: "ボストン", hp: 800, atk: 50, skill: "タイガーブレイク"}
```
強そうですね。  
>私はハリードが大好きで、銀の手装備による通常攻撃＋黄龍剣をかすみ黄龍剣！とか命名して楽しくやっていました。
ロマンシングなゲームでしたね。

また、複数の必殺技を持たせたい場合はskillsを別のオブジェクトで管理させて、変数名で指定してあげることもできます。

```js
const skills = {
	oneHandSword: [
		'黄龍剣',
		'デミルーンエコー',
		'分身剣'
	],
	taijutsu: [
		'タイガーブレイク',
		'錬気拳',
		'龍神烈火拳'
	]
}

const harryd = new Caracter('ハリード', 250, 100, [skills.oneHandSord]);
//log >>> Caracter {name: "ハリード", hp: 250, atk: 100, skill: Array(1)}
//Arrayの中身 >>> ["黄龍剣", "デミルーンエコー", "分身剣"]

const boston = new Caracter('ボストン', 350, 120, [skills.taijutsu]);
//log >>> Caracter {name: "ボストン", hp: 350, atk: 120, skill: Array(1)}
//Arrayの中身 >>> ["タイガーブレイク", "錬気拳", "龍神烈火拳"]
```
### プロトタイプを参照する
newで作成されたインスタンスは大元の設計である雛形を参照している状態ですので、雛形（コンストラクター関数の定義）内のデータを変えるとすべて変更されます。  
例えば、キャラクター名を’さん’付けで呼ばせたかった〜(;_;)
と後からなった場合...

```js
function Caracter(name, hp, atk, skills) {
	this.name = name + 'さん';
	this.hp = hp;
	this.atk = atk;
	this.skill = skills;
}

const harryd = new Caracter('ハリード', 250, 100, [skills.oneHandSord]);
// log >>> Caracter {name: "ハリードさん", hp: 250, atk: 100, skill: Array(1)}

const boston = new Caracter('ボストン', 350, 120, [skills.taijutsu]);
//log >>> Caracter {name: "ボストンさん", hp: 350, atk: 120, skill: Array(1)}

```

キャラクター１体ずつさん付けにする必要はなく、大元の雛形に変更を加えることで作成したインスタンスすべてに反映されます。  

conslole.logで中身をみていくと __ proto __ というプロパティがみつかりますが、これが大元を参照していますよーってことみたいですね。  
ここの理解度はまだ低めで上手いこと言語化できません(;_;)
なんとなく掴んでいる程度だとおそらくこんなもんです。
**javaScriptのオブジェクトはprototypeで繋がっているんだよ！という概念を持つことが重要だと思います！**

## まとめ
- コンストラクター関数はオブジェクトを生成する為の関数
- this＋プロパティ名を記述し、引数からプロパティを設定する
- new演算子をつかってインスタンス化を行う
- 作成されたオブジェクトをインスタンスと呼ぶ
- prototypeを参照する

**コード全体**

```js
function Caracter(name, hp, atk, skills) {
	this.name = name + 'さん';
	this.hp = hp;
	this.atk = atk;
	this.skill = skills;
}

const skills = {
	oneHandSword: [
		'黄龍剣',
		'デミルーンエコー',
		'分身剣'
	],
	taijutsu: [
		'タイガーブレイク',
		'錬気拳',
		'龍神烈火拳'
	]
}

const harryd = new Caracter('ハリード', 250, 100, [skills.oneHandSword]);
const boston = new Caracter('ボストン', 350, 120, [skills.taijutsu]);

console.log(harryd);
console.log(boston);
```
Proxmox  Backup Server 1

## sources.list

* /etc/apt/sources.list.d/pbs-enterprise.list
    * [公式](https://pbs.proxmox.com/docs/package-repositories.html)

```diff:
- deb https://enterprise.proxmox.com/debian/pbs buster pbs-enterprise
+ deb http://download.proxmox.com/debian/pbs buster pbs-no-subscription
```


## backupについて

* suspendの場合、2回目以降は1分かからず完了する。
* stopの場合は通常のバックアップの時間かかる。
* バックアップを途中で緊急停止しても、次回はその途中から差分で行われるっぽい。

## 参考

* https://pbs.proxmox.com/docs/

## Proxmox  Backup Server (PBS) のインストール

* ISOからインストール [download](http://download.proxmox.com/iso/)
* 接続先は https://PBS-ipaddress:8007

## 追加設定

* ノートパソコンのフタを閉じだらサスペンドされるのを回避
    * /etc/systemd/logind.conf に追記

```go:/etc/systemd/logind.conf
HandleLidSwitch=ignore
```

* ssh しフィンガープリント値をひかえておく。

```sh
# proxmox-backup-manager cert info |grep Fingerprint
Fingerprint (sha256): xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx
```

### データストアの作成

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/5be07442-db98-fd78-82ac-871974771c1a.png)

```sh
# 作成
proxmox-backup-manager datastore create store1 /backup/store1
proxmox-backup-manager datastore create store2 /backup/store2

# 削除
proxmox-backup-manager datastore remove store1
```

### ユーザーの作成

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/64acf0b0-dd11-a923-bb7b-6987cb0257db.png)

### Access Control

* `/datastore`だけの指定だと、全てのデータストアが対象となり便利。
* /datastore/`データストア名` の形式で指定。[参考](https://pbs.proxmox.com/docs/administration-guide.html?highlight=user%20permission#access-control)
    * `root@pam`を指定すると作成できないので、作成したユーザーを選択すること
    * `DatastoreAdmin`をしていすること。`DatastoreBackup`だとBackup Jobが失敗した。

![aaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/ce25d250-6f72-23b3-d03b-6ac79ef39cd4.png)


## Proxmox VE (PVE)にストレージ追加

* https://PVE-ipaddress:8006 にアクセス
    * Storage - Add - Proxmox Backup Server 

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/18dc33ea-7b11-5c9d-d5f6-b19d06dafe3b.png)

### PVEでバックアップを実行

PVEでバックアップを実行するとPBSのdatastoreに表示される

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/b711f642-7353-07ae-7c37-df39b0cc3f2c.png)


## Garbage Collection

* Garbage Collectionをしないと空き容量がどんどん減っていくので、月一くらいで実施するように設定しておく。
styled-components＋propsでよりよく使う

#styled-componentsをうまく使う
今回はReactでよく使われるstyled-componentsの使い方を紹介していきます。
既知の物も多くあるかと思いますが、勉強し始めの方に役立てばと思います。
よろしくお願いします。

##propsで値を受け取って共通化する
よく使うボタンやSVGアイコンなどは共通化しておくと便利ですが、そこで使える物です。

```react:index.js
import react from 'react';
import styled from 'styled-components';

const MainBox = props => {

 const Box = styled.div`
  width: ${props.width}px;
  height: ${props.height}px;
  background-color: ＃３３３;
　border: solid 1px #0F0;
 `;

...

}
```

```react:App.js
import MainBox from '...'

...
//importして使用できます。
//指定したプロパティに入ります。
//文字列か数値か気をつけましょう。
<MainBox width="100" height="100" >

...
```

例があまりよろしくないかもしれませんが、開発している際に今後また使いそうな物はこのように
使う場所によってサイズを変えるが、根本の部分は変更できないようにできるので
特にSVGアイコンで使えると思います。自分もアイコンがここではこの大きさなど
使うページで変更をできるので非常に便利で、管理もしやすくなると思います。

##propsに値がない時は初期値を適応ように
上記で説明したことで共通化するには十分であると思いますが、
作っていくと色々やりたいことも増える物ですよね。
そこで需要が少ない物かもしれませんが記載していきます。
表題通り初期値を設定しましょう。

```react:index.js
import react from 'react';
import styled from 'styled-components';

const MainBox = props => {

 const Box = styled.div`
  position: ${props.position || 'absolute'};
  width: ${props.width || 500}px;
  height: ${props.height || 500}px;
  background-color: ＃３３３;
　border: solid 1px #0F0;
 `;

...

}
```

```react:App.js
import MainBox from '...'

...
//importして使用できます。
//指定したプロパティに入ります。
//指定しないと初期値が適応される。
<MainBox potision="fixed" >

...
```

このように`||`で繋ぐことで初期値を設定できます。
使う側で意図的にプロパティを与えないことで初期値が入るため、基本的には`１００px`だけど
ここではなんかズレてしまうから`９８px`にしたい
のような細かい設定ができるので良いかと思います。
初期値で場合はプロパティを記載しなければいいので、使わないのにまた書くの？？
のような面倒な作業も減らすことができますね。

---

クラスコンポーネントでも扱うことができるので、そちらがいい場合はそちらでも可能です。
必要がな場合以外はクラスコンポーネントは避けると良いでしょう。
Hooksなどもありますのでね！
自分も色々勉強しないといけないなと思っております。

##最後に
すごい記事を書けるわけでもないですが、この記事や内容が
誰かの作品や製品のコードの質向上に役立てば嬉しいです。

閲覧ありがとうございました。
はてなブログでjQueryプラグインを使う方法（2020年版）

# はじめに

ああ、わかってる。みなまで言うな。
2020年にもなってなんでお前はjQueryとか言ってるのだってことでしょ。
ぼくだって別にすき好んで話題にしたかったわけじゃないんですよ。
だってほら、流行の最先端をキャッチアップしてるイケてるフロントエンドエンジニアみたいに見られたいじゃないですか、やっぱり。
それに、はてなブログってのもなんかちょっと……。いまどきはnoteですよね。noteムーじゃなくてnoteコムでしょ。ぼくだって知ってますよそのくらい。
でもね、でもね、人には事情ってものがあったりなかったりするんですよ。
だから、まあ、ちょっと落ち着いて話を聞いてみてはくれませんか。
そのね、事情って言うのがさ、むかーしむかし、そうまだjQueryが最先端でかっこよくてプラグインもいっぱい出ちゃったりなんかしちゃったりして、そういうのを使ってブログを書いてたわけなんですよ。
でね、でね。そのブログが今見られなくなっちゃったりなんかしちゃったりして。
やっぱり、ほら、昔に書いたどんなささいなものでも、当時の空気感を味わうためにインターネットのアーカイブとして残しておいた方がいいんじゃないかな、なんてそんな風に思ったり思わなかったりしたわけですよ。わかりました？わかりませんよね。いいんです、理解されなくても、自分のためにやることですから。

# プラグインが普通に使えない理由

はてなブログでは、そのままでもjQueryを読み込んでいます。
ただ、読み込みタイミングが曲者で、記事を表示し終わった後で読み込まれます。
そのため、記事の先頭でプラグインを読み込もうとしてもjQuery本体がないので読み込めません。
それならばと、記事の先頭ではjQueryを自前で読み込んで続いてプラグインを読み込んで適用しても、後から読み込まれるjQueryで上書きされるためプラグインは適用されていない状態になってしまいます。

# 解決方法

* 記事中またはヘッダでjQueryとプラグインを読み込む
* jQueryを示す\\$変数を\$2変数などに渡してキープしておく
* 記事中のJavaScriptでは\$2変数を使用する

![hate1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22455/34dd86bf-4d23-73ec-5d68-07dad95ea7ad.png)

![hate2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22455/0462ce1c-ba99-4f38-d07e-dce6b7fafd05.png)

これで、10年前のブログも未来に残せますね。
【chat-app・アプリ作成】

◆本日は制作中のアプリの☆〜ChatAppのチャットルーム管理機能を実装〜☆◆

・yeah！！！夜中でおかしなテンションだ！
転職の時に人事の人が見てたら、将来オレごめん。
でも言わせて！
なんですかあのエラーは！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
エラーで２時間悩んでいました。
※私が通うプログラミングスクールtech-campでは15分悩んだらメンターに相談するというルールがありますが、私は深夜学習で今まで1回しか相談できず。。。。。。。。

でもさ、ググったり、Qiitaでエラー文探したら結構解決できるよね。
それにしても今回は挫折しましたが、カリキュラムは完了しました。
・userのルーティング、コントローラー、モデル、ビュー完了だす。
初めて聞くメソッドばかりだったのに問題が10問以上制作しながらいきなりくるから、スパルタン、、、
でも身になる〜〜〜〜
でもきついwww
・あっそういえば機能徹夜で終わらせたフロント実装の写真載せておきます。
（自己満）
![スクリーンショット 2020-08-21 5.28.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684338/05f02fd5-b640-dc8d-2829-aaaba6b7ea03.png)




◆さてブログらしく書きますか。
・そもそもアウトプット用にブログをいくつか書くようにと指定があったのでQiitaを書き始めたのだが、学習中の身でエンジニアらしい記事は全く書けない、、、、、
クラウドサービスのココナラのブログも最近だと毎日更新している。
理由は、ライティングのお仕事をしたいからなんだ。
！！！！！！
エンジニアにならないの！？ってなるかもしれませんが、そもそもの私の目標はフリーランスで活動するエンジニアなのです。なので今のうちからフリーランスに必要なノウハウをクラウドサービスで経験中でございます。


▼そんな活動をしていたらなんと1日でライティングのお仕事獲得！！！
やったね♪
私もともとグルメサイトの飲食様のページ編集代行していたので、WEBサービス上でバリバリライティング経験ありました。www

◆今後の方針
ライティングをしつつ、ブログ運営。
ライターがブログやってないと’だめ’とお叱りを受けたので後日開設いたします。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
そうなるとーーーーー私はブログ３つ更新ですな♪

・最後にエンジニアらしい記事はまだかけませんが、インプットしつつまずは学習していて感じたこと、私の人となりなどを出せていけたらと思います。
・すみませんQiita、アウトプット（ぐち）とブログ運営の練習にしてしまっていますが引き続き書いていきますのでよろしくお願いします。
。おやすみなさい。
WSL に python インストール をする

#How to install python3 in WSL 

apt 

```
sudo apt update
sudo apt upgrade
```
install python

```
sudo apt-get install python3 python3-pip -y
sudo pip3 install pip -U
```
install modules

```
sudo pip install --upgtade pip

sudo pip3 install matplotlib
sudo pip3 install numpy
sudo pip3 install scipy
sudo pip3 install pandas
```
Open CV intall

```
sudo pip install opencv-python
sudo pip install opencv-contrib-python
```