OmniAICreator/Qiita-1.07M huggingface dataset:
学習のアウトプット

覚えたことやったことをノートに今まで書いてましたがこれだけでは記憶に残らないのでQiitaでも書いていきます。
本当に簡単のことしか書きません。自分用に書いていきます。


「railsでホームページを作成するには」

rails generate contoller home top

これを実行すると２つのファイルが作られる。ファイルみたいなやつ。
１つは　top.html.erb
2つめ　home_controller

1つめのtop.html.erb　の説明
・これはviewに作られる
ここに文字,htmlを入れると反映される


追加するときはファイルをhomeに作る
○○　.html.erbみたいな感じ


２つ目のhome_controllerの説明
・これはcontrollerに作られる
controllerに　def top　と書かれている
これが無いとアクセスができない。

追加するときは　def ○○○


ちなみにルーティングに get "home/top" => "home#top"と書かれていないとエラーが起きる
get URL => コントローラ名　＃　アクション名


以上
[Django]未ログインユーザーをログインページにリダイレクトさせる方法

##環境
Python(3.6.2)
Django(2.1.7)

##実装方法
まず下記のモジュールを各アプリのview.pyにインポートします

```python:view.py
from django.contrib.auth.mixins import LoginRequiredMixin
```

ログインが必須となるページの表示に関わるクラスに下記のように記載します。

```python:view.py
class MypageView(LoginRequiredMixin, generic.ListView):
  template_name = 'index.html'

```
LoginRequiredMixinは必ず__第一引数に指定__してください。そうしないとログインページにリダイレクトされません。

settings.pyにログインしていない場合のリダイレクト先(ログインページ)を指定します。

```python:settings.py
LOGIN_URL = '/accounts/login/'
```

これで完了
LPF REV UP 2020に参加した

## 開催日程
* 2020年11月14日（土曜日）

## 場所
* オンライン

## 主催
* LINE Developers Community

## 申し込み
* https://revup.jp/

## 費用
* 無料

## LPF REV UP とは
* LPF REV UP 2020は普段LINEのAPIに関する勉強会や情報交換を行っている東京、関西、九州のコミュニティが合同で主催するカンファレンスです。

## セッション - サーバーレス環境でスピーディーに構築するLINE Platform アプリ

### LINE Platform アプリでのサーバーレスアーキテクチャの親和性
* LINEアプリの特徴より、LINE上で働くサービスは更新頻度が高い
* そのため、LINE Platform上で働かすアプリの特徴
    * 認証はLINE側で実施
    * ステートレスを求められがち
    * 非同期処理がしやすいAPI構成
    * UIはLINEアプリに依存しがち

### LINE Platform アプリでのサーバーレスアーキテクチャの使い所
* Webhookイベントの受け付け(Messaging API/ LINE Bot)
    * Webhook eventリクエストのレスポンスでなくてOK
    * 非同期処理でOK
* Webhookイベントのリクエスト受け付けと、リプライは同じリクエスト内ではなくて良い
    * Webhookリクエストへレスポンスは既返す
    * イベント処理はQueueで非同期での処理後に返す

### LIFFアプリ on SPA
* LIFFというのは、LINE Front-end Frameworkの略称
    * LIFFアプリは、HTMLやJavaScriptで構成されるウェブアプリ
* 開発事例（LPF REVUP 2020 page)
    * LIFF + Headless CMS + SSG
        * セッション情報などのコンテンツはmicroCMSへ事務局担当者が投稿
        * CDNであるNetlifyへ配信
        * 予約状況は、connpass APIで利用(Netlify Functionsでアクセス)
    * システム構成
        * Headless CMS -> microCMS
        * SSG -> Nuxt.js
        * CDN -> Netify Hosting
        * BFF -> Netlify functions
        * CD -> Netlify



## セッション - LINEミニアプリではじめる日本のOMO
### OMOって何か
* OMOは「Online Merges with Offline」の略称で、日本語で「オンラインとオフラインを併合する」という意味になる。もう少し具体的にいうと「ネット上とネット以外の店舗などの垣根を超えたマーケティング概念」と言われている
* 例としては、無店員さんのミニコンピ二のことである。以前はレージに支払い処理は、オンラインでやる

### なぜLINEがいいか
* LINEは生活インフラへ
    * 国内のMAUは8,400万人以上
    * DAU/MAU比率：86% (毎日利用している日本ユーザ）
* ネイティブ、Webの悩みを解決
    * インストールされない
    * 学習コスト
    * 通知が届かない
    * UI/UX
* LINEミニアプリ
    * ユーザ視点のメリット
        * ダウンロード不要、利用開始ハードルが低い、認証しやすい、LINE内に簡単共有、LINE Payなどサービスと連携
    * ビジネス視点のメリット
        * 8400万MAUのユーザ、一つのソースで全プレートフォーム、開発期間とコスト、LINEサービスと連携が簡単

### LINEを使った事例が何か
* Developers.IO CAFE
    * 使い方：LINEログイン -> 商品一覧 -> 支払い -> 注文完了 -> LINE通知 -> 現場に受け取る
* 振り返り
    * アクセス数は、WEBアクセスの数千倍
    * 登録時間は、30秒
    * リピーど率は、Native Appと比較して1.5~2倍
    * LINE Payで支払いやすい
OptunaでLightGBMのパラメータ調整

※Colabで動くことを確認しました．

#参考
https://tech.preferred.jp/ja/blog/hyperparameter-tuning-with-optuna-integration-lightgbm-tuner/

#Optunaのインストール
```
pip install optuna
```

#パラメータ探索

```
import optuna

def objective(trial):
    #x_train, y_train, x_test, y_testを準備

    dtrain = lgb.Dataset(x_train, label=y_train)
 
    param = {
        'objective': 'binary',
        'metric': 'binary_logloss',
        'lambda_l1': trial.suggest_loguniform('lambda_l1', 1e-8, 10.0),
        'lambda_l2': trial.suggest_loguniform('lambda_l2', 1e-8, 10.0),
        'num_leaves': trial.suggest_int('num_leaves', 2, 256),
        'feature_fraction': trial.suggest_uniform('feature_fraction', 0.4, 1.0),
        'bagging_fraction': trial.suggest_uniform('bagging_fraction', 0.4, 1.0),
        'bagging_freq': trial.suggest_int('bagging_freq', 1, 7),
        'min_child_samples': trial.suggest_int('min_child_samples', 5, 100),
    }
 
    gbm = lgb.train(param, dtrain)
    preds = gbm.predict(x_test)
    pred_labels = np.rint(preds)
    
    #pred_labelsとy_testで評価値を算出

    return precision #今回はprecisionでパラメータ探索
 
study = optuna.create_study(direction='maximize')
study.optimize(objective, n_trials=100)
 
print('Number of finished trials:', len(study.trials))
print('Best trial:', study.best_trial.params)
```
Python3でwordcloudを行うスクリプトファイル一式

#資源配置構成

```bash:Terminal
$ tree
├── const.py
└── word_cloud.py

1 directory, 2 files
```

##（ 定数定義スクリプト ）

####*stop_words*の語句リストは、以下を参考にさせていただきました。

・ [PythonでWordCloudを作成してみました](https://mmtomitomimm.blogspot.com/2018/12/word-cloud.html)

```Python3:const.py
fpath = "/Library/Fonts//ヒラギノ丸ゴ ProN W4.ttc"
stop_words = ['てる', 'いる', 'なる', 'れる','する', 'ある', 'こと', 'これ', 'さん', 'して', 'くれる', 'やる', 'くださる',
              'そう', 'せる', 'した', '思う', 'それ', 'ここ', 'ちゃん', 'くん', '', 'て', 'に', 'を', 'は', 'の', 'が',
              'た', 'し', 'で', 'ない', 'も', 'な', 'い', 'か', 'ので', 'よう', '']
```

##（ 本体スクリプト ）

wordcloudの解析対象に選んだテキスト文は、*Wikipedia*の「アフォガード」の項目から、一部の文章を抜粋しました。

＊ [Wikipedia アフォガート](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A9%E3%82%AC%E3%83%BC%E3%83%88)

なお、テキストは、カレントディレクトリにあるファイルから読み込むように改めもよい。

```Python3:const.py
#!python3
import const, MeCab
from wordcloud import WordCloud
import matplotlib.pyplot as plt

# 変数の初期定義
colour = "red"
mode = "summer"

# メソッド定義
def create_word_cloud(string_text):
	tagger = MeCab.Tagger ("-Owakati")
	words_string = tagger.parse (string_text)
	if type(words_string) == str:
		wordcloud = WordCloud(background_color=colour, colormap=mode,width=900, height=500, font_path=const.fpath, stopwords=set(const.stop_words)).generate(words_string)
		return wordcloud


def render_word_cloud(wordcloud):
    plt.figure(figsize=(5,5))
    plt.imshow(wordcloud)
    plt.axis("off")
    plt.savefig("word_cloud.png")


if __name__ == '__main__':
    text = """「affogato」はイタリア語で「溺れた（アイスクリーム）」の意である。かける飲み物はエスプレッソが最もポピュラーであるが、コーヒーや紅茶やリキューなどバリエーションが豊富で、かける飲み物によって『○○○アフォガート』と呼び名が変わる。日本では、バニラアイスクリームにエスプレッソコーヒーをかけたコーヒーアフォガート（イタリア語ではアッフォガート・アル・カッフェ affogato al caffè）がよく知られる。上述のイタリア語表記、またその発音から、『アフォガード』とするのは誤りである。"""
    wordcloud = create_word_cloud(text)
    render_word_cloud(wordcloud)
```

##（ 実行方法 ）

```bash:Terminal
$ ls
const.py word_cloud.py

$ tree
├── const.py
└── word_cloud.py
$
$ python3 word_cloud.py
$ls
__pycache__ const.py word_cloud.png word_cloud.py
$
```
####__*word_cloud.png*__

![スクリーンショット 2020-11-14 21.56.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/862466/50d31f10-4baa-07b9-04cb-ab4d156ac322.png)
ブラーをかけるンギョ on rust

```rust:main.rs
mod application;

use self::application::Application;

fn main() {
    let mut app = Application::new();
    app.run();
}
```

```rust:application.rs
use image::io::Reader as ImageReader;
use image::DynamicImage;

pub struct Application {
    source: String,
    destination: String,
    img: Option<DynamicImage>,
}

impl Application {
    pub fn new() -> Application {
        Application {
            source: String::new(),
            destination: String::new(),
            img: None, 
        }
    }

    pub fn run(&mut self) {
        self.parse_argument();
        self.load_img();
        self.process_img();
    }

    fn parse_argument(&mut self) {
        let args: Vec<String> = std::env::args().collect();
        if args.len() > 2 {
            self.source = args[1].clone();
            self.destination = args[2].clone();
        } else {
            println!("does not exist necessary argument");
            std::process::exit(0);
        }
    }

    fn load_img(&mut self) {
        if !self.is_exist_src() {
            println!("file does not exist.\nplease use path from what you are now");
            std::process::exit(0);
        }
        self.img = Some(ImageReader::open(&self.source).unwrap().decode().unwrap());
    }

    fn is_exist_src(&self) -> bool {
        let src = &(self.source);
        std::path::Path::new(src).exists()
    }

    fn process_img(&mut self) {
        let img = self.img.as_ref().unwrap();
        let img = img.blur(3.0);
        img.save(&self.destination);
    }
}
```
Unityのランダム値生成における注意点

#Unityのランダム値生成とは？
UnityではUnityEnginという名前空間の中にあるRandomクラスを標準で参照することができ、このクラス内の関数を使うことでランダム値を簡単に作成することができる。

###■ランダム生成のサンプル

```C#:GenerateRandom.cs
//0f〜1.0fのランダム値を返してくれる
Debug.Log(UnityEngine.Random.value);

//指定した範囲のランダム値を返してくれる(サンプルは0f〜100f)
Debug.Log(UnityEngine.Random.Range(0f,100f));
```
【実行結果】
上がRandom.value, 下がRandom.Rangeの結果。
![実行結果のスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239793/700791fc-39d4-7a1c-e140-81059bb682ca.png)


#ランダム値の生成における注意点

Randomクラスの関数を使いランダム値の生成ができた！と思っても注意点がある。
###■ランダム値は規則的
公式のサイトによると

「乱数生成は真にランダムでなく事前に決まった順番で番号を生成します」

つまり、このUnityEnginのランダム生成は、事前に決まった番号をあたかもランダム生成したように見せているだけなのだ。
どのようにしたら良いのだろうか。。

####シード値の初期化
UnityEnginのランダム値は**シード値**によって決まる。

「乱数の値の選択は シード と呼ばれる値で選択されます。」

つまりシード値とは、**ランダム値の元になる値**のことを指す。
規則的なランダム値を擬似的に不規則にするには、このシード値を任意の値に指定（シード値の初期化）してあげることで可能となる。
逆を言うと、同じシード値を指定することで同じ結果を再現することもできる。

シード値の指定はInitState関数で行うことができる。
Random.InitState("シード値")

以下、シード値の指定と同じシード値により結果を再現するサンプル


```C#:GenerateRandom.cs
//シード値を10に指定
UnityEngine.Random.InitState(10);

//ランダム値の生成・出力
for(int i = 0; i < 5; i++)
{
    Debug.Log(UnityEngine.Random.value);
}
```
・一回目
![スクリーンショット 2020-11-14 20.25.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239793/9a1ebd16-d2ee-dd95-151a-085d1e7a93c6.png)

・二回目
![スクリーンショット 2020-11-14 20.40.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239793/1f0a1d55-9010-1b31-8e86-20dc43a1f825.png)

全く同じ結果を出力した。
つまり、ランダム値を生成する前に同じシード値を指定してあげれば何度でも同じ結果が取得でき、このシード値に毎回違う任意の値を指定してあれば毎回違うランダム値を生成することができる。

####毎回違うシード値を指定
毎回違うシード値を指定するにはどのようにしたら良いのだろうか。
以下、一例のサンプル

```C#:GenerateRandom.cs
//現在時刻のミリ秒でシード値を初期化
UnityEngin.Random.InitState(DateTime.Now.Millisecond);
Debug.Log(UnityEngine.Random.value);
```

ランダム値を生成する前に現在時刻のミリ秒を指定してあげることで、そうそう同じシード値を指定することは無くなるため有効的である。


###■int型とfloat型とで戻り値の型・有効範囲が違う
ランダム値の生成には、前述の通りRandom.valueとRandom.Rangeがあるが、Random.Rangeにおいては範囲に指定する引数の型により、戻り値の型や有効となる範囲が変わる。

####戻り値の型の違い
Random.valueはfloat型の戻り値しか返さないのに対し、
Random.Rangeはfloat型とint型を指定することができ、指定する引数の型により**戻り値の型が変わる。**

```C#:GenerateRandom.cs
//float型で指定する
UnityEngin.Random.Range(0f,10.0f);//float型のランダム値を返す(例:0.7918238)
//int型で指定する
UnityEngin.Random.Range(0,10);//int型のランダム値を返す(例:2)
```

パターンによって使い分けを行えるため便利である。

####引数型による指定範囲の違い
引数の型を変えることで、戻り値の型が変わるが、指定する有効範囲も変わってしまうため注意が必要だ。
以下、指定する有効範囲の違いを説明したサンプル

```C#:GenerateRandom.cs
//float型で指定する
UnityEngin.Random.Range(0f,10.0f);//0以上10以下までのflaot型の値を返す
//int型で指定する
UnityEngin.Random.Range(0,10);//0以上10未満のint型の値を返す
```
float型の場合、サンプルでは0〜10までの値を返すが、
int型では0以上10未満、つまり0〜9までの値を返すため気をつける必要がある。
react-image-cropで画像のトリミング機能を実装する方法

react-image-cropを用いたトリミング機能を追加するところで躓いたので、自分へのメモとして書きました。
##state
```index.tsx
const [src, setSrc] = useState<any>(null);
const [crop, setCrop] = useState<Crop>({
    unit: "%",
    x: 0,
    y: 0,
    width: 50,
    height: 50,
    aspect: 1
});
const [imageRef, setImageRef] = useState<HTMLImageElement | null>(null);
```
##画像を読み込む関数
```index.tsx
const onSelectFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files !== null) {
        const reader = new FileReader();
        reader.addEventListener("load", () =>
            setSrc(reader.result);
        );
        reader.readAsDataURL(event.target.files[0]);
    }
};

const onImageLoaded = (image: HTMLImageElement) => 
    setImageRef(image);
};
```
##画像をトリミングする関数
```index.tsx
const onCropChange = (crop: Crop) => {
    setCrop(crop);
};

const onCropComplete = (crop: any) => {
    if(imageRef && crop.width && crop.height){
        const canvas = document.createElement("canvas")
        const scaleX = imageRef.naturalWidth / imageRef.width;
        const scaleY = imageRef.naturalHeight / imageRef.height;
        canvas.width = crop.width
        canvas.height = crop.height
        const ctx = canvas.getContext("2d")
        if (ctx !== null) {
            ctx.drawImage(
                imageRef,
                crop.x * scaleX,
                crop.y * scaleY,
                crop.width * scaleX,
                crop.height * scaleY,
                0,
                0,
                crop.width,
                crop.height
            )
        }
    }
};
```
##コンポーネント
```index.tsx
import React, {useState} from "react";
import ReactCrop, {Crop} from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";

export const CropModal: React.FC<Props> = props => {
    ...
    return (
        <div>
            <input type="file" accept="image/*" onChange={onSelectFile} />
            {src && (
                <ReactCrop
                    src={src}
                    crop={crop}
                    ruleOfThirds
                    onImageLoaded={onImageLoaded}
                    onComplete={onCropComplete}
                    onChange={onCropChange}
                />
            )}

        <div/>
    )
}
```
今回トリミングした画像データをサーバーにアップロードするには、canvasのデータをBlobデータに変換し、axiosを用いてDataFormとして送る。

[canvasの画像データをblobに変換し、axiosでpost.する方法](https://qiita.com/RyotoHachiya/items/9c4b8391d1f86565f186)
##参考にした記事
[react-image-crop - npm](https://www.npmjs.com/package/react-image-crop)
[react-image-crop dom CodeSandBox](https://codesandbox.io/s/react-image-crop-demo-s8xr4)
Salesforce 管理パッケージにおいてスタックトレースを扱いたかった。

親知らずを抜きました。CLBです。
今回は Salesforce の Apex Rest API 開発でメッセージを正しくできなかった失敗と、
どうすれば正しく表示できるのかを調べたけど、ダメそうだった記録です。

## ロギングの失敗:表示されないスタックトレース
業務では以下のようなシステムを作成していました。
1. フロントエンド(FE)が画面を表示
2. Salesforce に **パッケージ化** したApexロジックを配置(これがいわゆるバックエンド、BEになります。)
3. REST API で通信してロジックを実行。

![スクリーンショット 2020-11-14 20.03.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360434/2e6b9341-472b-c6ac-6349-9ebf23ecf1cf.png)

本当はちょっと違いがありますが、
どこにでもある一般的な Webアプリだと思っていただければ大丈夫です。

図に書いてある通り、例外エラーの時はスタックトレースが出るよう設定していました。
実際のコードとしては以下のような形で、

```apex
   @HttpPost
    global static String doPost() {
        String res;
        try {
            throw new TestException();
        } catch (Exception e) {
            res = e.getStackTraceString();
        }
        return res;
    }
```

このメソッドに対応するAPIをコールすると、

```

{
   "FOO.throwException: line 4, column 1 \n BAR.method: line 2, column 1"
}

```
のような形で表示される形です。
当然ながら開発者はパッケージ化していない状態で確認しているので、普通にスタックトレースを確認することができていました。
**がいざ実際にパッケージ化したものをみて見ると**

```
{
    "(名前空間)"
}
```

おおい！名前空間しか表示されていないやないかーい。

## 原因と解決の試み

https://help.salesforce.com/articleView?id=000319981&type=1&mode=1
に似たような内容が書いてあるのですが、
- 管理パッケージのデバッグログが有効になっている場合、完全なスタックトレースが結果に表示されます。
- スタックトレースの難読化や非表示はすべて、パートナーが独自実装の詳細を公開しないように保護するためのものです。
という仕様があるようです。
ただし、 `管理パッケージのデバッグログ` に関してはパッケージを作成した組織が
インストールした組織に対してログインして設定を行う場合のみに有効らしい(どなたか詳しい人がいたら教えてください。)

でどうしたか？というと、
以下catch句でエラーログを適当なオブジェクトに保存してあげれば、ええんでね？と思ったがコレも上手く行かず。

```apex
    @HttpPost
    global static String doPost() {
        String res;
        try {
            throw new TestException();
        } catch (Exception e) {

            // カスタムオブジェクトに保存する
            // これも上手く行かない
            Error_Log__c customObj = new Error_Log__c(
                StackTrace__c = e.getStackTraceString()
            );
            insert customObj;
        }

        return res;
    }
```

開発者コンソールからオブジェクトに保存した内容を見ると・・・

```
StackTrace__c : "(名前空間)"
```

ううむ・・・厄介だ。

## Sentry に送る？
https://github.com/jmather/SentryForSalesforce
非管理パッケージで発生した例外であれば、どうやら例外を保持できるらしいので
非管理パッケージに例外クラスをラップしておけばできるっぽいが、
ソースコードを一切合切公開しないと行けないので、それはそれで無理だよな・・・・

## 最後に
> 管理パッケージでトランザクションが開始された場合、情報を再発生させて登録ユーザに戻すのではなく、管理パッケージ内ですべての例外処理および解決策を実行する必要があります。
https://help.salesforce.com/articleView?id=000319981&type=1&mode=1

そんな事ができるなら苦労しないんだけどね・・・
まぁ我々にできる事と言えば、

```apex
try {
    throw new TestException();
} catch (Exception e) {
    return 'エラーです。value=' + val;
}
```

でしっかりとエラーログを書く事だけですね。
Rails 6でjQueryとBootstrapを使えるようにする(Rails 6)

Ruby on Railsでアプリケーションを作る際に,jQueryとBootstrapを使えるようにしたかったので手順をメモ。(Webpackerを使用。)

__1.yarnでjQuery、Bootstrap、popper.js(Bootstrapが使う)を導入。__ 

アプリケーションのディレクトリ配下で以下を実行。

```
yarn add jquery bootstrap popper.js
```

__2.webpackの設定__
app/config/webpackのenvironment.jsの記述を追加する。
(これによりimportやrequireなしで$やBootstrapのJavascriptが使えるようにする。)

```javascript:environment.js
const { environment } = require('@rails/webpacker');

//ここから
const webpack = require('webpack');

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: 'popper.js'
  })
);
//ここまで追加。

module.exports = environment
```

__3.BootstrapのJS,CSSをインポートする__
app/javascript/packsのapplication.jsでBootstrapのJSをimport。
app/javascript/stylesheetsにapplication.scssを作成し、BootstrapのCSSをimport。

```javascript:application.js
import 'bootstrap';
import '../stylesheets/application';
```

※Webpackerはビルドの際にapp/javascript/packsの中身だけを参照するため、
application.scssがビルドされるようにapplication.jsでインポートしておく。

```javascript:application.scss
@import '~bootstrap/scss/bootstrap';
```


__4.アプリケーション側からWebpackerがビルドしたJS,CSSを読み込ませる__
app/views/layouts/application.html.erbのhead内に以下2文を追記。

```erb:application.html.erb
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

```

これで完了。
【初心者向け】画像のボタンホバー時、背景が透けてしまう問題の解決法2つ

# どうも7noteです。透過時に背景が見えてしまう対策方法

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/notp-image/
golangのテストでDoAndReturnのところでCall with too many input argumentsエラーが出たときの対処法


```
m.EXPECT().SomeMethod(name string, number int).DoAndReturn(func() error {
  // 様々な処理
  return nil
})
```

これだと、`panic: reflect: Call with too many input arguments`エラーが出る

なので、以下のようにする

```
m.EXPECT().SomeMethod(name string, number int).DoAndReturn(func(name string, number int) error {
  // 様々な処理
  return nil
})
```

つまり、mockにしたいメソッド（SomeMethod）の引数とDoAndReturnの引数の関数の引数は一致させなければならない
Observer Pattern

<font color="#00f">複数のObserverが一つのオブジェクトの状態変化を監視する<br>監視されるクラスは複数のObserverインスタンスを保持し、Observerクラスのメソッドを使って状態変化を各Observerに通知する<br>Observerは監視対象のクラスオブジェクトを保持する</font>

[Design Pattarm MENU](https://qiita.com/old_cat/items/852d980bedb9100dd7e3)

以下のクラス構成で確認します

|クラス|説明|
|-----|----|
|Mediator.class|各Observerクラスが監視するオブジェクト<br>各ObserverクラスのインスタンスをListに格納<br>Listにインスタンスがadd()されたら、全ObserverにListのsizeを通知する|
|abstract<br>Observer.class|監視対象のMediatorインスタンスを保持する<br>Mediatorが利用するメソッドを実装|
|ob1.class～ob2.class|Observerを実装|
|user(Main.class)|動作確認|

＊user　他の開発者がこのパターンを利用する、という意味合いを含みます

```java:Mediator.class
class Mediator{
  List list = new ArrayList<Observer>();
  void add(Observer obsvr){
       list.add(obsvr);
       notifyTo(list.size());  // Listが更新されたらnotifyTo()を実行
  }
  void notifyTo(int size){
       Iterator it = list.iterator();
       while(it.hasNext()){
         Observer ob = (Observer) it.next();
         ob.update(size);      // Listに格納した各Observerクラスのupdate()を使って通知
       }
  }
}
```
```java:abstract_Oberver.class
abstract  class Observer{
     Mediator mediator = null;
     int      mediatorListSize = 0;
     Observer(Mediator med){this.mediator=med;}
     void update(int size){
          mediatorListSize=size;
          System.out.println(
             mediatorListSize+":"+mediator.list.size()
          );
      }
}
```
```java:ob1.class_ob2.class
class ob1 extends Observer{ob1(Mediator med){super(med);}}
class ob2 extends Observer{ob2(Mediator med){super(med);}}
```
```java:user(Main.class)
public static void main(String[] args){
  Mediator md = new Mediator();
  md.add(new ob1(md));
  md.add(new ob2(md));
}
```
Rでベイズ線形回帰


# 記事の目的
線形回帰のパラメータをベイズ推定します。
参考：[ベイズ推論による機械学習入門](https://www.amazon.co.jp/%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E3%83%99%E3%82%A4%E3%82%BA%E6%8E%A8%E8%AB%96%E3%81%AB%E3%82%88%E3%82%8B%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E5%85%A5%E9%96%80-KS%E6%83%85%E5%A0%B1%E7%A7%91%E5%AD%A6%E5%B0%82%E9%96%80%E6%9B%B8-%E9%A0%88%E5%B1%B1-%E6%95%A6%E5%BF%97/dp/4061538322)

# 目次
[0. モデルの説明](#0-モデルの説明)
[1. ライブラリ](#1-ライブラリ)
[2. 推定する分布](#2-推定する分布)
[3. 事前分布](#3-事前分布)
[4. 事後分布](#4-事後分布)
[5. 予測分布](#5-予測分布)

#0. モデルの説明
![IMG_0193.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/775500/51445b54-5fbe-a742-87b9-48343b707956.jpeg)


#1. ライブラリ
```R:
library(dplyr)
library(mvtnorm)
library(scatterplot3d)
set.seed(100)
```


#2. 推定する分布
y=w1*x1+w2*x2を考えます。x1は体重、x2は身長、yは月の食費と仮定します。ｗ1,w2を500,100とし、これを推定するのが目的です。
ここで、体重は平均50で分散10, 身長は平均170で分散10の正規分布を仮定しています。
体重は因果関係が逆な気もしますが、気にしないでください。（笑）

```R:
w <- c(500, 100)
lambda <- 0.01
X.true <- rmvnorm(1000, c(50, 170), diag(2)*100)
y.true <- rnorm(1000, w[1]*X.true[,1] + w[2]*X.true[,2], 1/sqrt(lambda))
scatterplot3d(X.true[,1], X.true[, 2], y.true/10000,
              xlab="体重", ylab="身長", zlab="食費(万)",
              xlim=c(10,80), ylim=c(120, 210))
```
>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/775500/204fac99-c5ab-57cd-bcc9-18217a867681.png)


#3. 事前分布
w1,w2の事前分布としてそれぞれ標準正規分布を仮定します。

```R:
m0 <- c(0, 0)
lambda0 <- diag(2)
w.pre <- rmvnorm(1000, m0, solve(lambda0))
plot(w.pre[,1], w.pre[,2],　xlab="体重の影響", ylab="身長の影響")
```
>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/775500/cd9686ce-9e72-2eb4-6a1b-c9289ba0d1ff.png)



#4. 事後分布
以下の図から、500, 100をうまく推定できていることが分かります。

```R:
X <- rmvnorm(100, c(50, 170), diag(2)*100)
y <- rnorm(100, w[1]*X[,1] + w[2]*X[,2], 1/sqrt(lambda))
sum.tmp <- 0
for(i in 1:nrow(X)){
  sum.tmp <- sum.tmp + X[i, ] %*% t(X[i, ])
}
lambda.post <- lambda*sum.tmp + solve(lambda0)
m.post <- solve(lambda.post) %*% (lambda*apply(y*X,2,sum) + lambda0%*%m0)
w.post <- rmvnorm(1000, m.post, solve(lambda.post))
plot(w.post[,1], w.post[,2],　xlab="体重の影響", ylab="身長の影響",
     xlim=c(400,600), ylim=c(50, 150), col="green")
```
>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/775500/2ca993a9-f6e0-4d1f-ae21-1044084a86ac.png)


#5. 予測分布
予測分布も、真の分布と似ていて、うまく推定できていることが分かります。

```R:
X.sample <- rmvnorm(1000, c(50, 170), diag(2)*100)
y.sample <- {}
for(i in 1:1000){
  u.post <- t(m.post) %*% X.sample[i, ]
  lambda.post.inv <- 1/lambda + t(X.sample[i, ]) %*% solve(lambda.post) %*% X.sample[i,]
  y.sample[i] <- rnorm(1, u.post, sqrt(lambda.post.inv))
}
scatterplot3d(X.sample[,1], X.sample[, 2], y.sample/10000,
              xlab="体重", ylab="身長", zlab="食費(万)",
              xlim=c(10,80), ylim=c(120, 210), color="blue")
```

>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/775500/c29b0ea5-9c80-0996-7a6a-9999f7e7c7fd.png)
http.Handle()とhttp.NewServeMux().Handle()について

以下のコードがあったとする。
どちらもやっていること同じじゃないか？と思い調査した結果。

```
http.Handle("/any/", anyHandler)
http.ListenAndServe(":8080", nil)

mux := http.NewServeMux()
mux.Handle("/any/", anyHandler)
http.ListenAndServe(":8080", mux)
```

## 結論
どちらも内部的にやっていることは基本的に同じでした。

## http.Handle()
URLパターンと対応するhandlerをDefaultServeMuxの中に登録している。

実装としては以下の形。

```
// Handle registers the handler for the given pattern
// in the DefaultServeMux.
// The documentation for ServeMux explains how patterns are matched.
func Handle(pattern string, handler Handler) { DefaultServeMux.Handle(pattern, handler) }
```

### DefaultServeMuxとは
`DefaultServeMux` はServeMuxのポインタ型が格納されている変数。

### では、ServeMuxとは
HTTPのマルチプレクサ。
実装としては以下のようになっている。

```
type ServeMux struct {
	mu    sync.RWMutex
	m     map[string]muxEntry
	es    []muxEntry // slice of entries sorted from longest to shortest.
	hosts bool       // whether any patterns contain hostnames
}
```

### http.Handle()の中心はDefaultServeMux.Handle(pattern, handler)
>URLパターンと対応するhandlerをDefaultServeMuxの中に登録している。

と記載したがそれはつまり、 `DefaultServeMux.Handle(pattern, handler)` の部分。
`ServeMux.m` にURLパターンと対応するハンドラを追加している。

実装としては以下。

```
// Handle registers the handler for the given pattern.
// If a handler already exists for pattern, Handle panics.
func (mux *ServeMux) Handle(pattern string, handler Handler) {
	mux.mu.Lock()
	defer mux.mu.Unlock()

	if pattern == "" {
		panic("http: invalid pattern")
	}
	if handler == nil {
		panic("http: nil handler")
	}
	if _, exist := mux.m[pattern]; exist {
		panic("http: multiple registrations for " + pattern)
	}

	if mux.m == nil {
		mux.m = make(map[string]muxEntry)
	}
	e := muxEntry{h: handler, pattern: pattern}
	mux.m[pattern] = e
	if pattern[len(pattern)-1] == '/' {
		mux.es = appendSorted(mux.es, e)
	}

	if pattern[0] != '/' {
		mux.hosts = true
	}
}
```

## http.NewServeMux().Handle()
URLパターンと対応するhandlerをServeMuxの中に登録している。
実装としては以下。

```
// Handle registers the handler for the given pattern.
// If a handler already exists for pattern, Handle panics.
func (mux *ServeMux) Handle(pattern string, handler Handler) {
	mux.mu.Lock()
	defer mux.mu.Unlock()

	if pattern == "" {
		panic("http: invalid pattern")
	}
	if handler == nil {
		panic("http: nil handler")
	}
	if _, exist := mux.m[pattern]; exist {
		panic("http: multiple registrations for " + pattern)
	}

	if mux.m == nil {
		mux.m = make(map[string]muxEntry)
	}
	e := muxEntry{h: handler, pattern: pattern}
	mux.m[pattern] = e
	if pattern[len(pattern)-1] == '/' {
		mux.es = appendSorted(mux.es, e)
	}

	if pattern[0] != '/' {
		mux.hosts = true
	}
}
```

`DefaultServeMux.Handle(pattern, handler)` と全く同じ処理ではないか。。
つまり、内部的に `http.Handle()` と同じ処理をしている。


## 改めて結論
冒頭のコードでは全く同じ処理ができる。
ただ、 `http.NewServeMux().Handle()` は自分でServeMuxを作成するので
その中の値を独自に変更したい場合などに用いられるのかもしれない。

## 参考文献
- [Package http](https://golang.org/pkg/net/http/)
FirefoxでQiitaの記事を書いたらエラーが止まらず記事の削除もできない件

まあ約1万1千行、テキストファイル770kbと言うビッグデータも真っ青のサイズというのがまずかったとは思います。
しかしながら、それを削除しようとしても編集しようとしてもうまく動きません。
Firefoxは最初「ウェブページがブラウザの動作を遅くしています」をバンバン出し続けて編集も削除もできない。
編集を押しても効かない。
手動でURLを打ち込んでも跳ね返される（始めてみた）。
という感じでした。
そこでFirefoxをリフレッシュしましたが、やはりエラーが起きるため、次にaboutconfigから非表示にしました。
すると、
警告：応答のないスクリプト
このページのスクリプトは処理に時間がかかっているか応答しなくなっています。
スクリプト https://cdn.quita.com/assets/p...f46 いか数字とアルファベット.min.js:4005502539

4005502539は登場するごとに変わるようです。
また、発現の頻度は体感的に「遅くしています」メッセージと類似しており、おそらくこれが原因のようです。
これがアドイン、ブラウザ、Windows10の問題なのか、Qiitaの問題なのかがわかりません。
同様の現象が起きた方はいらっしゃいますでしょうか。
Windows10 のデスクトップをmac風にするために

mac osのデスクトップいいよね...
https://blog.munieru.jp/entry/2018/10/31/225700
ここら辺に書いてあることをやったうえで以下では更にやったことを備忘録として残しておく．

#1時間で背景を移り変わるようにする
wallpaper engineをsteamでインストールし，ワークショップからそれっぽいのを落としてくる．


例えばこういうのがありました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412188/46e8f72e-3b22-a0ea-545a-645836febc3d.png)

#2スタートアイコンを🍎にする
openshellをインストールする

https://github.com/Open-Shell/Open-Shell-Menu/releases/download/v4.4.160/OpenShellSetup_4_4_160.exe

インストールされたSetting open-shell Menuでカスタムからアイコンを選択する．
start menu styleタブのreplace start buttonからできる．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412188/8ea62e32-1fb2-8782-517a-c9513b2e0e3a.png)


アイコンは自前で作ってもいいけどjpegを三つ結合したものを用意しないといけないので面倒．フォーラムによさげなのがあったので拝借した．
http://www.classicshell.net/forum/viewtopic.php?f=18&t=3086
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412188/639650d5-e620-1844-e58f-85e4bda890dd.png)

最終形はこんな感じになった．機能性を残しつつmacOSを再現できた．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412188/eb7bae0b-4f26-e579-c113-086ba572fe64.png)
VeeValidateのalpha_dashとかがeslintに叱られるとき

Vue使う人にはおなじみ[VeeValidate](https://logaretm.github.io/vee-validate/)とeslintの話。

# 環境

- Vue 2.6.12
- VeeValidate 3.4.5
- TypeScript 4.0.5

# 問題

VeeValidateで用意されているルールのリストが[ここ](https://logaretm.github.io/vee-validate/guide/rules.html#rules)にありますが、例えば`alpha_dash`とかを使おうとするとeslintに叱られることがあります。

```
 ERROR  Failed to compile with 1 errors8:06:23 PM

 error  in ./src/components/Foo.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/app/src/components/Foo.vue
  111:40  error  Identifier 'alpha_dash' is not in camel case  @typescript-eslint/camelcase
  111:40  error  Identifier 'alpha_dash' is not in camel case  @typescript-eslint/camelcase

 ✖ 2 problems (2 errors, 0 warnings)
```

使っている`.eslintrc.js`は`vue/cli`で生成したそのまま。

```js:.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}
```

# 対策

VeeValidateがsnake caseで`export`してるんだから仕方ないだろとは思いつつ、このためにeslintのルールを緩めたり例外を設けるという対処はすべきではないので、以下のように`as`でエイリアス付けて回避しました。

```
import { alpha_dash as alphaDash } from 'vee-validate/dist/rules';

extend('alpha_dash', alphaDash);
```

これであれば`ValidationProvider`には`alpha_dash`で書けます。

```vue
<ValidationProvider name="foo" rules="alpha_dash" v-slot="{ errors, valid }">
```
cmd.exeでワンライナー

# 初めに
WindowsもPowerShellが非常に使い勝手がよくなりLinuxやMacのようにコマンドラインでも様々なことができるようになりました。しかし今度は、従来使っていたbatファイルのコマンドを忘れてしまうことがあります。。そこでサンプル集の覚書きを書いておきます。

## サンプルコード

### ディレクトリにあるファイルの一覧を出力する
``` bat
dir /b /o:e >list.txt
```
`>`はテキストで出力するための記号。

### 日付を6桁でリネームする
``` bat
ren hoge.csv %date:~2,2%%date:~5,2%%date:~8,2%_result.csv
```
日付を環境変数から取得して加工するのがポイント。

### CSVファイルをどんどん下に結合していく
``` bat
copy /b %~dp0\*.csv %~dp0\result.csv
```
`%~dp0`はカレントディレクトリを示す。絶対に覚えなければいけないスニペット。

### CSVから指定の列だけ取り出す
``` bat
for /f "tokens=1,3 delims=," %%i in (hoge.csv) do echo %%i,%%j >> result.csv
```
CSVのサイズに制限がありますが、上の例だと1列目と3列目を取り出す。

### テキストファイルの名簿を元にフォルダを生成する
``` bat
pushed %~dp0
for /f %%i in (namelist.txt) do mkdir %%i
exit
```
これはバッチファイルで実行してください。`pushed`の使い方が重要です。

## その他に覚えておくといいこと
ワンライナーではないですが、バッチファイルを書くときに覚えておくといいことがあります。

* `@echo off`をバッチファイルの冒頭に書くことで無駄な出力を止めることができる。
* 文の初めに`rem`をつけるとその文はコメント行扱い。

### ユーザ入力を変数に格納する
```
set /P NAME="テキスト文"
```
`NAME`という変数に入れることにユーザの入力した内容を格納することができます。変数を使うときには%NAME%のように`%`で囲む必要があります。
【PHP】PHPファイルにbootstrapを導入する

# install

composer を用いてインストール
https://getbootstrap.jp/docs/4.5/getting-started/download/


```
アプリのルートディレクトリに移動

composer require twbs/bootstrap:4.5.0
```
vendor/twbs/bootstrap が作成される。

# bootstrap.cssとbootstrap.min.cssの違い。

bootstrap.min.cssは、圧縮されているため容量がコンパクト。ただし、それゆえ中身が見にくいので、
開発環境ではbootstrap.cssを用いた方が良い。

#bootstrap.cssを読み込む

```html
#読み込みファイルのheadに記載

<link rel ="stylesheet" href="vendor/twbs/bootstrap/dist/css/bootstrap.css">
```

#Sassを用いる場合

Bootstrapをカスタマイズする際に、cssに手を加えていく。その際にSassを用いることにより、複雑な処理やソースの見通しをよくしたりすることができる。

Sassを読み込む際は、cssにコンパイルしてからhtmlで読み込む。

##機能

ネスト：

```style.css
nav ul{
  color:red;
}
nav li {
  color:blue;
}
```

```style.scss
nav{
  nl {
    color:red;
  }
  li {
    color:blue;
  }
```

変数：

```style.css
body{
  color:red;
  }
```

```style.scss
$primary-color:red;

body{
  color:$primary-color;
  }
```

親クラスの指定：

```style.css
a{
  color:red;
 }
a:hover{
  color:blue;
}
```

```style.scss
a{
  color:red;
  &:hover{
    color:blue;
  }
}  
```
#カスタマイズ手順

##1 Sassをインストール

Sassは公式でcomposerに対応していない。今回は　github上に公開されている**scssphp**というライブラリを用いる。

https://scssphp.github.io/scssphp/

```composer.json
//composer.jsonのrequireに追記する。

{
    "require": {
        "scssphp/scssphp": "^1.3"
    }
}
```

```
composer update
```

vende　r/scssphp/scssphpが生成される。

##2 Scss読み込む

Sassを使用するファイルでScssを読み込む。

```sytle.scss
@import "vendor/twbs/bootstrap/scss/bootstrap";
```

読み込んだファイルをcssにコンパイルする。

```ターミナル.
vendor/scssphp/scssphp/bin/pscss < sylesheets/scss/style.scss > stylesheet/css/style.css

# vendor/scssphp/scssphp/bin/pscss　で　sylesheets/scss/style.scssをコンパイルし、
その結果をstylesheet/css/style.cssに書き込んでいる。

# 変更がある度にコンパイルする。
```

##3 作成したcssファイルをhtmlから読み込む

```html
<head>
...
  <link rel ="stylesheet" href="stylesheet/css/style.css">
</head>
```

<br>

```

2〜3のイメージ

cssを使用する場合

【html】　→　　→　→　→　→　→　→　→　読み込み　→　→　→　→　→　→　→　→ 　　【bootstrap.css】

scssを使用する場合

【html】　→　読み込み　→　【css】  ←　コンパイル　←　【scss】 →　読み込み　→　【bootstrap.css】
　　　　　　　　　　　　　　　　　　　　　　　　　　 ↑  
　　　　　　　　　　　　　　　　　　　　　　　　ここをカスタマイズ
```

##4　変数を定義する。

```sytle.scss

$main-color: red;

@import 'vender/twbs/bootstrap/scss/bootstrap';

body{
  letter-spacing: 0.5em;
}

#変数は@import より上に書くことでデフォルト値が設定される。
bodyなどの定義されているものは、下に書く。下方にあるものほど、最終的に適用されるため。
```

修正後、コンパイルを実行。

変更をブラウザで確認するには**スーパーリロード**を行う。
ブラウザのキャッシュを無視し、強制的にWebサーバーからファイルをダウンロードする方法。

```
mac:
cmd + shift + R

windows:
shift + F5
```
時間がなかったので次回の記事から、プログラミングのアウトプットするよ！

初めまして！
eightbiteと申します！
絵を描くのが趣味です！

# 記事を投稿するよ
<p> 9月よりテックキャンプエンジニア転職に通っていたのですが、中々記事を出す時間がなく、今回初めて投稿したいと思います。</p>

# 次回からアウトプット
<p>次回から今までに習った内容＋αで今後つまずいた部分をアウトプットしていきたいと思います。</p>

よろしくお願い致します！
flex-basis,grow ,shrinkについて

flex-growは兄弟要素の中で大きくなる割合を示している。
1 2 3 4 5 6
とあり、すべての数字にflex-growに１といれたら、合計６セクションになって大きくなっていく。
一方　3　にだけ、felx-grow:2といれたら、合計セクションは７になり、３だけほかの要素の2倍の大きさになる。
すべての要素にflex-grow 3　といれて、５にだけ、９といれたら、５だけほかの要素の3倍おおきくなっていく。

一方で、flex-shrinkは
1 2 3 4 5 6とあり、
すべての要素にflex-shrink　1と入力したら、親要素が小さくなったら、同じスピードで縮んでいく。
３　だけflex-shrinkを３にしたら3倍の速さで親要素に合わして縮んでいく。

flex-basisは基本幅です。
【HTML】tableタグのメリットとデメリット

#プログラミング勉強日記
2020年11月14日
いつもはtableタグを何気なく使ってたけど、デメリットもあることを知り改めてtableタグの使い方をまとめる。

#tableタグとは
　tableタグは名前の通りテーブル(表)を作成するタグ。表の基本的な構造は、`<table></table>`内に`<tr></tr>`で表の1行を定義して、さらにその中に`<td></td>`でセルを定義する。
　テーブルの各セルには見出しを定義するヘッダセルと、データを定義するデータセルがあり、ヘッダセル内のテキストは一般的なブラウザでは太文字でセンタリングされて表示される。

```html:HTML
<table border=1>
	<tr>
		<th>スポーツ</th>
		<th>種類</th>
		<th>考案者</th>
	</tr>
	<tr>
		<td>バスケ</td>
		<td>球技</td>
		<td>ネイスミスによって考案されたスポーツ</td>
	</tr>
</table>
```
実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/20bec9d6-c018-6e51-b0dd-4b66c98c2670.png)

#メリット
　テキストなどの一塊になっている要素を段組レイアウトにする場合にはいくつか方法があり、tableタグを用いる方法は以前のWebサイトでよく使われていた。
　そのメリットは、<b>CSSに記述することなく横並びの段組にできることである</b>。細かい記述方法を気にすることなくHTMLファイルに記述するだけで段組を実現できる。また、CSSを使用してvertical-alignプロパティを使用したい場合にはtableタグを用いて実現する。vertical-alignプロパティはインライン要素とテーブルセルのみに使用することで、フォント調整ができるようになる。

#デメリット
　<b>修正がしにくいことである</b>。複数人でメンテナンスをする場合に日にちが経過してからコードを見直したときに、マークアップとしてのHTMLの記述と視覚的なスタイル調整としてのCSSが混在した書き方なので、見にくくなってしまう。
　また、新しく段組として追加のカラムを記述したい場合にtableの中に余計な要素などを加えたり、table全てを書き直したり必要が出る場合があり複雑になってしまう。

#参考文献
[テーブル（表）を作成する](http://www.htmq.com/html/table.shtml)
[HTMLでtableタグを使わないで段組レイアウトする方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/29901)
LaravelでサクッとAPIサーバーを立てる

## 初めに

最近、React/Redux開発をするようになり、勉強のためにAPIサーバーを立てたいと思い、Laravelでさくっと、簡単なAPIサーバー立てようというのが、本記事の主旨となります。

## 対象者
ReactやVueを勉強していて、自分でAPI作成して学習したい方
取り敢えず、LaravelでAPIをさくっと作る流れが知りたい方

## Laravel 新規プロジェクトを作成する


まず、新規でLaravelプロジェクトを作成しましょう。

```terminal:laravelをインストール
composer create-project "laravel/laravel=6.*" laravelapi
```

## ModelとMigrationファイルを作成

ここでは、良くあるArticleモデルのケースで作成していきます。

因みにここでは、Modelsディレクトリを切って作成しています。
同じように進めたい場合は、以下記事を参考にしてみて下さい。
[[Laravel 6] Modelsディレクトリを作る](https://qiita.com/10mi8o/items/6329d3d4e2f5b6dd26d5)

(因みに８系からModelsディレクトリはデフォルトで作成されます。)

`title`と`body`カラムを追加します。

```php:ArticleModelを作成する
php artisan make:model Models/Article -m
```

```php
public function up()
{
    Schema::create('articles', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('title');
        $table->text('body');
        $table->timestamps();
    });
}
```

以下、コマンドでDBに反映しましょう。

```terminal
php artisan migrate
```


## ArticleControllerを作成する

```
php artisan make:controller Api/ArticlesController -r
```

アクションを定義します。

```php:ArticlesController.php
public function index()
{
    $articles = Article::all();
    return $articles;
}

public function store(Request $request)
{
    $article = new Article;
    $article->title = $request->title;
    $article->body = $request->body;
    $article->save();
}

public function show($id)
{
    $article = Article::find($id);
    return $article;
}

public function update(Request $request, $id)
{
    $article = Article::find($id);
    $article->title = $request->title;
    $article->body = $request->body;
    $article->save();
}

public function destroy($id)
{
    $article = Article::find($id);
    $article->delete();
}

```

## ルーティングを設定する

APIのルーティングは、`api.php`に記述します。

```php:api.php
Route::group(['middleware' => ['api']], function(){
    Route::resource('articles', 'Api\ArticlesController', ['except' => ['create', 'edit']]);
});
```

## テストデータを作成
最後にテストデータを追加しましょう。

```terminal
php artisan make:seeder ArticlesTableSeeder
```

```php:ArticlesTableSeeder.php
public function run()
{
    DB::table('articles') -> insert([
        [
            'title' => 'React',
            'body' => 'hoge...'
        ],
        [
            'title' => 'Redux',
            'body' => 'fuga...'
        ],
    ]);
}
```

```php:DatabaseSeeder.php
public function run()
{
     $this->call(ArticlesTableSeeder::class);
}
```

```terminal
php artisan db:seed
```

以上でAPI実装の一通りの作業は完了です。

##終わりに
簡素なものですが、この流れで、APIを作ることができます。
動作確認はPostmanなどで確認してみましょう。

次はこれを利用して、ReactからこのAPIを叩いてみます。
[CORSを理解しながら、ReactからLaravelのAPIサーバーを叩く](https://qiita.com/10mi8o/items/2221134f9001d8d107d6)
Import Error: libffi.so.6: cannot open shared object file: No such file or directory

# TL;DR
ファイル`libffi.so.6`がimportできなかったことにより、Jupyter notebookの起動に失敗したときの解決法です。私の環境では`pyenv`でpythonのversion管理を行っていたので、同様の管理をしている方向けです。

## Error
```
% jupyter notebook
Import Error: libffi.so.6: cannot open shared object file: No such file or directory
```

## 解決法
こちら[^1]より、

```
% pyenv version
i.j.k(set by $HOME/.pyenv/versions/i.j.k)
% pyenv install i.j.k
Installed Python-i.j.k to $HOME/.pyenv/versions/i.j.k
```
と使用していたversionのPythonをインストールし直せば良いです。これで起動できるようになっている筈です。

[^1]: [Pipenv install fails with "cannot open shared object libffi.so.6" #4194](https://github.com/pypa/pipenv/issues/4194#issuecomment-614775683)
electron自動アップデート失敗 コードサイニング証明書

##発生した事象
Windows用のExeをElectronでリリースしサービス開始から1年近くが過ぎたある日のこと。
コードサイニング証明書の期限切れが近づいているので、新たに取得した証明書でビルドを行うことに。
初めての証明書変更だったが、electron-builderでビルドしelectron-updaterを使用しているので、なんとなくうまくやってくれると思っていた。。。

###「自動更新ができないんだけど・・・」
新しい証明書でビルドした際はエラーがなく、ローカル端末でパッケージをインストールし実行できることを確認。
ステージングでの検証を通過しいよいよ本番。(後から振り返れば、ステージングを通過していることがおかしいのだが、検証方法に問題があった)
リリース直後、担当から呼ばれてかけられた言葉がそれだった

###そもそもコードサイニング証明書とは
コードサイニング証明書はソフトウェアが改ざんされず作成元で生成されたものを保証する。
大まかに以下のようになっている
1.コード、暗号化されたハッシュ値（デジタル署名）、コードサイニング証明書を使ってパッケージを作成
2.コードサイニング証明書の有効性の確認
3.コードサイニング証明書に含まれる公開鍵の取得
4.暗号化されたハッシュ値（デジタル署名）を公開鍵で復号し証明書に含まれているハッシュ値を取得比較
ハッシュ値が一致すれば改ざんによる不正がないパッケージであることが証明される

###証明書の期限切れとはどういうこと
私自身勘違いしていたが、例えば、証明書の期限が2020年12月31日までだとする。
2021年1月10日に上記期限で作成されたパッケージはインストールできないのか？
そうではない。
証明書を使うパッケージ作成時に証明書の期限チェックを行うので、ビルド時に期限内であればよい。
どうやらSSL証明書と混同していたようだ(;'∀')

###今回の事象の原因究明
話を今回の事象に戻そう。
自動更新ができないためエラーログを見たところ、electron-updaterのチェックでパッケージが異なると判定されていた。
実は今回、Aの発行者からBの発行者に変更していて、Aの発行者では半角英数字の発行先にしていたが、Bの発行者に変更した際日本語の発行先を設定した。
これが影響して発行者のチェックではじかれたのが原因だ。
通常発行者が変更することは少ないが、カナ登録の発行先がある場合は同様のことが発生するため、electron-updaterのチェック仕様についてまとめた。

###electron-updaterの更新チェック処理の概要
1.インストール済みのパッケージ起動
2.ダウンロード先に配置されたパッケージのバージョンをチェック
3.インストールより新しいバージョンがあれば、ローカルのtempフォルダ内に最新版をダウンロードして証明書チェック
4.証明書チェックOKであれば、tempフォルダにダウンロードしたパッケージをインストール
　チェックエラーであれば、tempフォアるだを削除しインストールエラーとする

###証明書チェックについて
electron-updaterのverifySignature内で実行される。
以下のpowershellのコマンド「Get-AuthenticodeSignature」にて取得したSignerCertificate.Subjectをbase64ででコードし、urf8に変換する。
execFile("powershell.exe", ["-NoProfile", "-NonInteractive", "-InputFormat", "None", "-Command", `Get-AuthenticodeSignature '${tempUpdateFile}' | ConvertTo-Json -Compress | ForEach-Object { [Convert]::ToBase64String([System.Text.Encoding]::UTF8.GetBytes($_)) }`], {
      timeout: 20 * 1000
    }, (error, pro, stderr) => {
####実はこの処理に問題があった
verifySignatureの以下の処理を実行し、取得した文字列とインストール済みのパッケージのpublishNameを文字列比較し署名が正しいかを判定している。
        const data = parseOut(Buffer.from(stdout, "base64").toString("utf-8"))
その際、カナ文字の変換では正しく変換されず、発行先が異なると判定され証明書チェックエラーとなっていた。
ホントにそれでいいのか。。。

##結論
すでにリリース済みで、インストールされたものを回収できないため、今のelectron-updaterでチェックを通すために、発行先を半角英数字で登録した証明書を使うことにした。
今回Electronを使ってみてパッケージ作成の選択肢の一つになると思った。
パッケージの自動更新やコードサイニングなどについては改善点があるとも感じている。
RailsのAPIモードをCookie(session)認証に対応させる

onecareer内のアプリ（Vue.js + RailsのAPIモード）の認証方式をtoken認証からsession(cookie)に変更した時の変更点をまとめる

## これを始めた理由


**既存のWebアプリからシームレスにログインさせる要件が発生したため**

- 普通のwebアプリで実装された画面でログインしたユーザーを、SPAで作られた画面にシームレスにログインさせるには
  - OAuthサーバーを作るか
  - Cookie(Session)の認証を利用する必要がある。
  
 今回は納期優先でsession認証に変更

## Cookie認証に必要だったもの

###　サーバー側
#### config/application.rb

```ruby
    # Only loads a smaller set of middleware suitable for API only apps.
    # Middleware like session, flash, cookies can be added back manually.
    # Skip views, helpers and assets when generating a new resource.
    config.api_only = false # <- false を true に変更
```

session storeをcookieにする場合は `config.api_only = true` にした上で必要なmiddle wearを読み込む方法で実現出来たが、それはそれで

- Deviseと相性が悪い。
  - Deviseを使うとsessionに多くの情報が乗るのでCookieには入り切らない。
- 既存のWebアプリがsession storeをredisにしているのでそれを利用したい。

上記の制約により、api_onlyをfalseにする方にした。
（api_only=trueかつ deviseを利用する方法で良い方法があれば教えて下さい :bow:）

#### application_controller.rb (APIの基底のcontroller)

```ruby
class ApplicationController < ActionController::API
  include ActionController::Cookies #<- これを追加
```

ActionController::API を継承して作る場合はこの設定も必要だった。

### クライアント側
#### axios(ajaxライブラリ)

```javascript
  axios.create({
    withCredentials: true,
    //...
  })
```

axios違うドメインCookieを送る機能だが、これ有効しないとsession cookieが使えなかった。
Javascript基礎知識＃2

##はじめに
この記事は私の脱コピペを目指すために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

##目次
・実行するための基本構文
・文字を出力してみる
・計算してみる
・変数とは
・var let constの違い

##何かを実行させたいと気の基本構文

```javascript

console.log('Hello World');
//consoleは 'Hello World'を logしなさい。
//console にあたる部分をオブジェクト
//'Hello World'にあたる部分をパラメータ
//.log()にあたる部分をメゾットという
```


##文字を出力してみる
まずテキストエディタにファイルを準備して、
こんな感じに記述↓

```javascript:main.js
console.log('Hello World');
```

```javascript:console
Hello World

```
この時、
「''」（シングルクォーテーション or ダブルクォーテーション）と
「;」(セミコロン)が大切！！

##計算してみる

```javascript:main.js
console.log(3 + 3); //足し算
console.log(3 - 3); //引き算
console.log(3 * 3); //掛け算
console.log(3 / 3); //割り算
console.log(3 % 3); //余り出る計算

```


```javascript:console
6
0
9
1
0

```
number型は''（シングルクォーテーション）がいらない！！
型についての説明は長くなってしまうのでいつか記事にしたいと思います。
今は「Javascript　データ型」などで調べてみてください。

##変数(Variable)とは

#####変数とは値を格納（代入）する箱のようなものです。

もしくは、あだ名みたいなものとの認識ではじめはよいと思います。

変数を使いこなせると、すごく長い文章を省略して使えます。
例）

```javascript
function changeColor(newColor) {
  var elem = document.getElementById('para');
  elem.style.color = newColor;
}
```
この場合 document.getElementById('para'); を elem という変数（箱）に代入してます。
そしてその下の行で elem が document.getElementById('para'); の代わりに使われてます。　



変数名（箱の名前）には好きな名前をつけることができますが、いくつか条件があります。

**・基本的に名詞（product, user_name など）**
**・予約値を使わない（if, else, switch など）**
**・大文字と小文字を区別する**
**・初めの文字は数字以外にする**

##var let const の違い
結論から書くと保守性を考慮したうえで
**・原則varは使うべきではない**
**・変数宣言は基本的に const で**
**・変数への再代入が必要な場合に限り let を使う**


```javascript
var //再宣言・再代入可
let //再宣言不可・再代入可
const //再宣言・再代入不可

```

詳しくはこちらを参考にしました。（[text]https://qiita.com/masarufuruya/items/096e51c3e4c36c86ae27）
テンプレート: Docker コンテナで Ruby / Rails の開発環境を構築する (Mac版)

手軽に Ruby / Rails の開発環境を構築したいなら Docker が最適です。
ここでは、ホストOSとしてMac OSを使用しています。
[(Ubuntuホストの場合はこちらを参照してください)](http://qiita.com/TYD/items/d35090fd7205006b3c88)

Dockerコンテナでは、ベースOSをUbuntu 20.04とし、Rails アプリケーションを実行するために必要なライブラリやRuby本体をインストールしていきます。
Railsアプリケーション本体はホストOS上のローカルディレクトリから参照できるようにします。
これはRailsアプリケーションの実行環境をDockerコンテナが担い、エディタによるRailsアプリケーションの編集やソースコード管理をホストOS上で実現するためのものです。

以下のようなメリットがあります。

1.ホストOS上にRubyやRailsを直接インストールする必要がない
2.必要に応じて異なるバージョンのRubyやRailsを別々のコンテナで実行させることも可能
3.RailsソースコードはホストOS上の好みのエディタで編集できる
4.Gitの管理対象をホストOS上のソースコードに限定できる
5.(以下のDockerfile.devもGitの管理対象とすべき)

##コンテナの構築と起動

あらかじめDockerサービスをホストOS上にインストールしておいてください。

まずは、任意のディレクトリに以下のファイルを配置します。

```Dockerfile.dev
# Docker による Ruby / Rails 開発環境の構築
#
# 任意バージョンの Ruby を Ubuntu ベースのコンテナ上にインストールする
# また、node.js をインストールする
# Rails アプリケーションは、コンテナ内ではなく、ホストOSのローカルディレクトリに生成する

From ubuntu:20.04

ENV DEBIAN_FRONTEND=noninteractive

# Ubuntu にインストールされているソフトウェアを最新にする
RUN apt-get update -y
RUN apt-get upgrade -y

# Ruby のビルドに必要なパッケージを apt-get 経由でインストールする
RUN apt-get install -y build-essential
RUN apt-get install -y libssl-dev libreadline-dev zlib1g-dev
RUN apt-get install -y git wget 

# sqlite3 を利用する場合に必要なライブラリ
RUN apt-get install libsqlite3-dev

# MySQL or MariaDB を利用する場合に必要なライブラリ
RUN apt-get install -y libmysqlclient-dev

# その他の便利ツール
RUN apt-get install -y nano

# ruby-build を使って任意の Ruby バージョンをインストールする
RUN git clone --depth=1 https://github.com/rbenv/ruby-build
RUN PREFIX=/usr/local ./ruby-build/install.sh
RUN rm -rf ruby-build
RUN ruby-build 2.7.2 /usr/local

# node.js, npmをインストール
RUN apt-get install -y nodejs npm
# n packageをインストール
RUN npm install n -g
# n packageを使ってnodeをインストール
RUN n stable
# 最初に入れた古いnode.js, npmを削除
RUN apt-get purge -y nodejs npm
# yarn packageをインストール
RUN npm install yarn -g

```

以下はコンテナの生成方法
(your_app_nameをあなたのアプリケーション名に変更する)

```
$ export YOURAPP=your_app_name
$ docker build -t $YOURAPP -f Dockerfile.dev .
```

コンテナを起動する

```
$ export REPO=`pwd`
$ docker run -d --name $YOURAPP -v $REPO/:/$YOURAPP/ -p 4000:3000 -ti $YOURAPP
```


##コンテナ内で Rails アプリケーションを生成する

コンテナ上のbashを起動し、Railsアプリケーションを構築していきます。

```
$ docker exec -ti $YOURAPP bash
```

あなたのアプリケーションディレクトリに移動する
(your_app_nameをあなたのアプリケーション名に変更する)

```
$ cd /your_app_name
```

bundle init を実行して Gemfile ファイルを作成

```
$ bundle init
```

Gemfile を編集する(以下ではnanoエディタを使用)

```
$ nano Gemfile
```

Gemfile内の # gem "rails" のコメントを外す
(# gem "rails" を gem "rails" に変更する)

bundle install により Rails 関連の Gem を vendor/bundle にインストールする

```
$ bundle config set path 'vendor/bundle'
$ bundle install
```

rails new により Rails アプリケーションをこのディレクトリで新規に生成する
Overwrite /example/Gemfile? (enter "h" for help) [Ynaqdhm] と尋ねられたら Y と返答する

```
$ bundle exec rails new .
```

Rails アプリケーションを起動する
ホスト OS からアクセスできるようにバインドする IP アドレスを 0.0.0.0 にしておく

```
$ bundle exec rails s -b 0.0.0.0
```

コンテナ上の作業が完了したので、改めてホスト OS のブラウザで http://localhost:4000 にアクセスする
ブラウザ上で Yay! You’re on Rails! が表示されたら成功です
rails６　form_with（ヘルパー）のラジオボタンにCSSを装飾する方法

目的：rails6にてform_withでラジオボタンを実装、それに対してCSSで装飾を行います。

苦戦したこと：ヘルパーを使っていることにより、ラジオボタンの内部構造が見えなくなってしまった。

①他のオプションと違いラジオボタンはclassをセレクタにしてもCSSを反映する事ができない。
②label forが設定されていない事により、選択作業が反映できないバグが発生。

以下、内容を記載。

①ラジオボタンはclassセレクタではCSSが反映されない。
 
 HTML
 ![スクリーンショット 2020-11-14 19.30.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864534/4a6c068a-bed0-ea5c-5b1f-f3b5a44636fd.png)


 CSS
 .second{
    font-size: 14px;
    font-weight: bold;
    display: block; /* ブロックレベル要素化する */
    float: left; /* 要素の左寄せ・回り込を指定する */
    .
    .
  }

このような記述では全くCSSが反映されません。検証ツールで見てみると、

![スクリーンショット 2020-11-14 18.28.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864534/506f7209-273b-7eee-d4ae-0c753950dd79.png)

一見OKな気もします。ちなみに、検証ツールで見えるのはヘルパーの記述がHTMLに変換されたものなので、ツール上で修正を加えて正しく動作すればその修正したコードを丸々コピーしてHTML型に変えてしまうのも一つの手です（データの送信自体はHTML形式でも問題なし）。

結論を言ってしまうとラジオボタンにCSSを設定する場合はclassではなくlabel属性に記述をしなくてはいけません。その際、合わせてtype="radio"属性で設定されている標準のラジオボタンの表示を見えなくする必要もあります。

というわけで、

CSS
.fields-label label{
  font-size: 14px;
  font-weight: bold;
  display: block; /* ブロックレベル要素化する */
  float: left; /* 要素の左寄せ・回り込を指定する */
  .
  .
}

とし、

input[type=radio] {
  display: none; /* ラジオボタンを非表示にする */
}


の記述を加えます。これで外見上は装飾されたラジオボタンのでき上がりです。

![スクリーンショット 2020-11-14 18.35.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864534/62fa615e-4ec5-2860-244b-933de9351e0d.png)

しかし、実際に入力作業をしてみると問題発生。
ボタンをクリックしたら変色する仕様を以下のように記述したはずが全く動作しません。

input[type="radio"]:checked + label{
background:blue;/* マウス選択時の背景色を指定する */
color: #ffffff; /* マウス選択時のフォント色を指定する */
}

これはtype="radio"属性（labelの要素まで含めて）がクリックされたら指定の動きをする記述です。
再び検証ツールで確認。

![スクリーンショット 2020-11-14 18.43.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864534/49b0dd16-ee33-46a9-455c-6961a3ad2e94.png)

一見問題が無いように見えます。ちゃんと選択肢事にid、valueも違う値が登録されています。

②label for属性の指定がないことによるlabel要素の読み込みエラー

この原因を特定するのにかなり苦労しましたが、ヘルパーを使わない場合のlabel設定の仕方を確認し、わかりました。

idに対して、label forが設定されていない事で、それぞれの選択肢がうまくVIEWに反映されていなかった。意味わかんないですね、とりあえずidとlabel forが一致して初めてラジオボタンのCSS設定が反映されるという事です。なので、label forにidと同じ値を設定します。
//
![スクリーンショット 2020-11-14 19.35.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864534/f3c57f42-726c-dff2-65f4-d50a5fe09e92.png)


これが完成形です。
label for="id" 選択肢 /label
の書き方はこの指定となりますので、順番も変えました。

![スクリーンショット 2020-11-14 19.05.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864534/7c9048f0-f1a8-7af8-e3ac-7e25155516d3.png)

このように動作しました。ちなみに検証ツールで確認すると、

![スクリーンショット 2020-11-14 19.07.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864534/499aaf67-499b-915d-61fa-646fd9b1314d.png)

このようにlabel forが定義されており、idと紐づいている状態です。

※ちなみに、別箇所でcollection_selectでラジオボタンを作っていた箇所は選択肢事の全てのlabel forが同じ値になっており、どれを選択しても最初の選択肢が選択されてしまうというエラーも発生。
railsのフォームヘルパーでラジオボタンを作成する場合はlabel forの設定が必須になると思われますので、注意が必要です。