OmniAICreator/Qiita-1.07M huggingface dataset:
ポートフォリオサイトを作成する①ペライチページをNuxt+gitlab+Netlifyで作成

##経緯
もう５年以上フリーランスで仕事をしているのですが、今まで屋号なしでした。

元々は会社勤務でFlashデベロッパーをしていて、Apple事件で仕事が減り…
震災やらいろいろと重なり退職し、田舎に戻ったのがきっかけだったので
どうも「一時的」にフリーランスをやってる感覚からいまいち抜け出せなかったせいが大きいです。

あとは、黙々とコードを書いているのが楽しくて、その他が二の次だったのもあるかもしれません（笑）

ただ、何年もやっていて、自分自身この働き方が向いている自覚もあり
最近になって良い屋号も思いついたので、ズルズルとやってきていたフリーランスではなく
体制をイチから立て直すことにしました。

そこでまず考えたのは、Webサイトがない！
Web系フリーランスとしてあるまじき事態（笑）

###そこで、先日ティザーサイト感覚でペライチページを作成しました。

https://webiscuit.jp/

↓正式公開完了したので、ペライチのページはこちらです
https://condescending-dijkstra-9cc94a.netlify.com/

（１、２時間くらいで…笑）

使用したのは、タイトルにもある通り
Nuxt、gitlab、Netlifyです。

Nuxtは今更特筆することもありませんが…
今回は使い慣れたBootstrapではなく、tailwindを使用してみました。

gitlab+Netlifyは、ほとんど先人の記事を参考にさせてもらいました。
お名前ドットコムで取得したドメインをNetflifyと連携させています。

特に需要はないと思うのですが、せっかくなのでリポジトリを公開します。
https://github.com/webiscuit/portfolio-lp

あくまでも今回はLP扱いなので、本サイトは別リポジトリでいろいろと作りこんでいってます😊
そっちのほうは、Nuxtとtailwindはそのまま使用して、あとはREST APIの使用を検討しています。
Pythonでおみくじ作った。

#はじめに
アドベントカレンダーが空いていたのでPythonに関するちょっとしたことを書こうと思います。
いつもはFlaskを使ってWebアプリを作っているのですが、フレームワークに頼っているせいかPythonそのものの理解が浅いと感じました。そこで、Pythonの練習をしようとまず、おみくじを作りました。
（現在Flaskのアドベントカレンダーがガラ空きです。少しでもFlaskを知っている方はぜひ参加してください！）

#環境
Ubuntu18.04LTS
Python3.6.9
vim

#コード
今回はこんな感じのおみくじを作りました。

```python:kuji.py
from random import choice


play = input('playと入力したらおみくじを引けます。: ')

while True:
    if play == 'play':
        break

    print('もう一度入力してください。')
    play = input('playと入力したらおみくじを引けます。: ')

while True:
    KUJI = ['大吉', '中吉', '小吉', '末吉', '凶', '大凶']
    print(choice(KUJI))
    continue_ = input('もう一度引きますか？[y/n]: ')
    while True:
        if continue_ != 'y':
            if continue_ != 'n':
                input('yまたはnを入力してください。: ')
            else:
                break
        else:
            break

    if continue_ == 'y':
        pass
    else:
        break

print('終了しました。')
```

普通のおみくじだとつまらないので少し工夫してみました。
本当におみくじだけなら2行で終わります。こんな感じで。

```python
from random import choice
print(choice(['大吉', '中吉', '小吉', '末吉', '凶', '大凶']))
```

#追記
コメントのアドバイスを参考にしてもう少し工夫しました。

```python:kuji2.py
from random import choices　#choice → choices


play = input('playと入力したらおみくじを引けます。: ')

while True:
    if play == 'play':
        break

    print('もう一度入力してください。')
    play = input('playと入力したらおみくじを引けます。: ')

while True:
    KUJI = ['大吉', '中吉', '小吉', '末吉', '凶', '大凶']
    print(choices(KUJI, weights=[1, 5, 10, 10, 5, 1])[0]) # ここを変えました。
    continue_ = input('もう一度引きますか？[y/n]: ')
    while True:
        if continue_ == 'y' or continue_ == 'n': # ここらへんのコードも整えました。
            break
        else:
            continue_ = input('yまたはnを入力してください。: ')

    if continue_ == 'n':
        break

print('終了しました。')
```

以上です。
SpringでFlash Scopeを使ってリダイレクト先画面にパラメーターを渡す

画面遷移のあるアプリケーションでリダイレクトする場合、リダイレクト先にパラメータを渡したいケースがあります。
実現方法はいくつかありますが、ここではSpring + Flash Scopeを使ったやり方を紹介します。

## Flash Scopeとは
1回のリダイレクトで有効なスコープです。
Request Scopeより長くSession Scopeより短いといったイメージになります。

## 実現方法

```RedirectController.java
@Controller
public class RedirectController {

    // リダイレクト元エンドポイント
    @GetMapping("view1")
    public String view1(RedirectAttributes redirectAttributes) {
        redirectAttributes.addFlashAttribute("key1", "value1");
        return "redirect:/view2";
    }

    // リダイレクト先画面
    @GetMapping("view2")
    public ModelAndView view2(Model model, ModelAndView modelAndView) {
        // Flash Scopeから値の取り出し
        String value1 = (String) model.getAttribute("key1");
        modelAndView.addObject("redirectParameter", value1);
        modelAndView.setViewName("demo/redirect/view2");
        return modelAndView;
    }
}
```

リダイレクト元のエンドポイントでRedirectAttributes#addFlashAttributeを利用して、リダイレクト先に渡したいパラメータを指定します。リダイレクト先の画面ではそれをModel#getAttributeを利用して取り出します。

よくあるやり方としては、Sessionに値を格納してリダイレクト先で取得、という方法ですが、ほとんどのケースでSessionから値を取りだしたらその値を明示的にremoveする必要があります（メモリリークの温床となるため）。
Flash Scopeを使うことで、一度リダイレクト先に遷移したら以降はリダイレクト先画面をF5リロードしても利用することができなくなります（remove等の考慮は不要です）。

以上です。
TS初心者がハマった初歩の初歩


## ごあいさつ
社内で TypeScript の話題を聞くようになったので、
ちょうど業務で触れる機会のあった自分が主に気になった点を共有したいと思います。

## 試したい方は
実際ハンズオン的に触りたい方は、各所で導入方法が紹介されていますので、そちらを参考に。
VSCodeとnodejsをインストールするのを皮切りに、いくつかコマンド叩けばすぐ動くものが試せます。

## オブジェクトのAny問題
TSはJSをそのまま書けます。
JSのつもりでオブジェクトを定義しようとすると、以下のように書きがちです。

```typescript

const obj = {};
obj.foo = "bar";  //エラーとなる
```
しかし、このままではVisual Studioなんかではエラーになっちゃうんです。
"obj"は型が未指定だから"foo"なんてプロパティは無いよ、と。
最も簡単な回避方法はanyを指定することです。

```typescript

const obj:any = {};
```
anyというのは「型を指定できる」TSにおいて、「型の指定を行わない」と宣言するようなもので、一般的にはアンチパターンです。
オブジェクトやArrayの型指定は用意されています。

```typescript

const obj : { [s: string]: string } = {}; // 任意の文字列Keyで文字列Valueのオブジェクト
```
安易にanyに逃げないで行きたいところです。

## オブジェクトValueの型不一致問題
さぁ、上記でオブジェクトは正しく定義できるようになったんですが、下記のようなJSONがあったらどうでしょう。

```json
{
    name : "太郎",
    age : 25
}
```
ageの型はNumberなので"{ [s: string]: string }"としてしまうと不都合があります。
こういった場合は下記のように書けます。

```typescript

const obj : { [s: string]: string | number } = {};
```
パイプでつないでORみたいにできるイメージですかね。

## Valueの型が複数あるオブジェクトから取得問題
さぁ、上記で型が複数あるオブジェクトも定義できました。
しかし、そういったオブジェクトから値を取得するときにまたまた問題が見つかります。

```typescript

const json='{name:"太郎",age:25}'

const obj: { [s: string]: string | number } = JSON.parse(json);

const ageMinus = obj.age - 1; // エラーとなる
```
上記の例だと、ageプロパティが"string | number"型なので四則演算できないよ、みたいなことを言われます。
下記のようにするとageがnumberであると明示的に指定でき、エラーが解消できます。

```typescript

const ageMinus = <number>obj.age - 1;
```
なんかいろいろ複雑になってきますね。 
やりすぎて見通しが悪くなるようなら、無理にanyを駆逐しない、という選択肢も考慮しても良いかもしれません。

## TSの本質に潜む罠
根本的な話に戻りますが、TSはあくまでJSを生成するものです。
つまり **TSで書いてもあくまで動作するのはJS** なのです。
当たり前と思うかもしれませんが、こなれて来たとき私はこの事実に面食らいました。

具体的に言うと、気を付けて書かないと、privateな（そのClass内からしかアクセスできない）classもfunctionもいくらでも外部からアクセスできるのです。

TSは、privateなClassなfunctionを書くことができます。
実際、そういったClassやfunctionを外部から呼ぶような実装を書くと、Visual Studio等の高度なIDE・エディタであれば、その時点でエラー表示されます。
でもそれは、記述する上での制約が効いているだけであり、出来上がったJSのClassやfunctionはprivateでもなんでもなかったりするのです。

だって、**Javascriptにはそんな機能ない** のだから。

一応、関数で括る（いわゆるクロージャってやつかな？）などの措置をとれば同様のことはできますが、
直観的には「privateと書いたものはprivateになっている」と思ってしまいがちです。 
これに関しては、以前議論されているstackoverflowやissuesを見かけたので、そのうち是正されるかもしれません。

## 以上
なんか文字が多くなっちゃいましたが、TS初心者がハマった記録として共有させていただきます。
文系インターン生から見た「エンジニア」

はじめまして！
2019年11月から（正確には10月末のHackBowlから）、TechBowlに初のインターン生として参加させていただいているカズキと言います。
今回、TechBowlのアドベントカレンダーを盛り上げようということで僭越ながらゴリゴリの非エンジニアの僕も一筆執らさせていただきます。
# 簡単な自己紹介
- 経済学部二年生
- 2019年2月からスタートアップでインターンを開始
    1. LAPRAS株式会社(https://corp.lapras.com/) ...HRTech、コーポレート
    2. NEW STANDARD株式会社(https://new-standard.co.jp/) ...メディア、バックオフィス/インターン生採用
    3. 株式会社TechBowl(https://techbowl.co.jp/techtrain/) ...EdTech、営業

# 僕の今の気持ち
**エンジニアのコミュニティやそこに所属する方々とより良い世界を実現したい**

今まで関わってきたエンジニアの方々やそのコミュニティ・世界を良くしようとして戦っている人に対して僕が感じたことや考えたことを素直に書きたいと思っているからあえて先に結論を書いてみました。
エンジニアの採用や教育の現場になんのバックグラウンドもなく迷い込んだ一学生の話に興味を持っていただけたならぜひこの後も読み進めていただけたら幸いです。
あえて言い切る形を取っていますが、間違っていると感じられてもなんだこいつは未熟だなと鼻で笑っていただけるとありがたいです。

# なぜTechTrainなのか
どうして僕がTechTrainで今考えているような世界を実現したいと思っているのかを今までの経験から時系列でお伝えしようと思います。
## 「エンジニア」との出会い
学生として当然のごとく「文系」と「理系」というふるいにかけられた僕は2019年まで「エンジニア」に出会ったことはありませんでした。
LAPRASでのインターンで僕は初めて「エンジニア」と出会いました。
僕はLAPRASの企業文化の中の「アンチ労働集約」「人は人にしかできない仕事をするべきだ」から実際に業務の中でGASのコーディングで自動化を少しではありますがするようになっていきました。
その経験が僕のNEWSTANDARDでの職に繋がりましたし、そこで微力ながら一緒に働く方の力になれたと思っています。

## 「エンジニア」と仕事をする
プログラミングに限った話ではなく、問題解決は持っている駒の数に左右されます。
駒の数は経験した領域や事象、その数に依存していると思っているので、プログラミングの知見の浅い僕に「そんなことできるんですか！？」と思うような正しくドラえもんのひみつ道具を、渡してくれたり一緒に考えて作ってくれたり、そんな存在が僕にとってのエンジニアです。
僕に人間らしい仕事ができる環境を作ってもらえたのが時が経てば経つほど身に染みてありがたいことだと理解できてきて、今となっては書き表せないほどの感謝になっています。
エンジニアの方々と仕事をしていく中で恩返しがしたいと思うようになってきました。

## 「エンジニア」の卵と出会う
新たなインターン先を探していた僕に、たまたまご縁があってTechBowlと繋がり、HackBowlに運営として少しだけ参加させていただきました。
そこで同年代のエンジニアが寝食の時間をも惜しんで成果物を産み出す姿に深い尊敬とある種の焦燥を感じました。
このエンジニアたちが、のちに僕がそうであったように、世界に多くの問題解決の方法を産み出し「人がより人らしくある」世界を実現してくれるのではないかとある種他力本願的ではありますが心の底から思いました。
だったら、このエンジニアという世界に多くの人が足を踏み入れている今だからこそ僕がそのプレイヤーでなくとも手伝えること、より良い世界を実現するためにできることがあると思ったのです。
そして僕の思いは冒頭のように行き着いたのです。

# おわりに
そして僕がこの株式会社TechBowlとそのサービスであるTechTrain、そしてそのコンテンツのMISSIONを通して貢献できるのは、**より多くのMISSIONを掲載して、1人でも多くのエンジニアを目指す人々がその足取りを進めるきっかけを増やしていく**ことだと考えています。
ぜひ興味を持っていただけたらユーザーやメンター、または別の形でも関係を持っていただけたらとても嬉しいです。
では！今後TechTrainのコミュニティから上がる素晴らしい記事もぜひお読みください！
最後まで読んでいたき大変ありがとうございました。
【C++】オブジェクト指向の勉強 002 

# 初めに

前回はクラスと構造体の違いを復習した。
[【C++】オブジェクト指向の勉強 001](https://qiita.com/koralle/items/d7c6fb50b3ae09393ed9)

例によって今日もこちらを参考にする。
[超初心者向け プログラミング入門](https://programming.pc-note.net)

# 今回の内容
クラステンプレートについて知る。


# サンプルコード

```cpp

#include <iostream>
#include <string>
using namespace std;

template<typename T>
class testClass {
public:
    T value;
public:
    T getValue(void){
        return value;
    }

    void setValue(T v){
        value = v;
    }
    void printValue(void){
        cout << "value: " << value << endl;
    }
};

int main(void) {
    testClass<int> tc1;
    tc1.setValue(334);
    tc1.printValue();

    testClass<double> tc2;
    tc2.setValue(3.5);
    tc2.printValue();

    testClass<string> tc3;
    tc3.setValue("koralle");
    tc3.printValue();

    return 0;
}
```

実行結果

```cpp
value: 334
value: 3.5
value: koralle
```

# 終わりに
関数テンプレートすらあまり書いたことなかったので非常に勉強になる。テンプレートしゅごい。
【C++】オブジェクト指向の勉強 001

# 初めに

C++の基本的な文法は覚えてるんだけど、オブジェクト指向が全然書けなくてこのままじゃ業務もやばいと思ったので勉強。
こちらのサイトを参考にしてます。

[超初心者向け プログラミング入門](https://programming.pc-note.net)

# 今日の内容

構造体とクラスの違いの復習

# サンプルコードたち

超基本的なコード。

```cpp
#include <iostream>
using namespace std;

class SimpleClass {
// アクセス修飾子を付けないとデフォルトでprivateになってしまう。
public:
    int number;
    string name;
};

int main(){
    SimpleClass sc;
    sc.number = 0;
    sc.name = "koralle";

    cout << "number: " << sc.number << endl;
    cout << "name: "   << sc.name   << endl;

    return 0;
}
```

コンパイルして実行。

```
number: 0
name: koralle
```

ここで大事なのはクラス定義をしたらアクセス修飾子を明確にすること。
アクセス修飾子を付けなかった場合、構造体メンバはデフォでpublic、クラスはprivateになるという違いがある。
「ホンマか？」と思い、コードを以下のように変更。

```cpp
#include <iostream>
using namespace std;

class SimpleClass {
    int number;
    string name;
};

struct SimpleStruct {
    int number;
    string name;
};

int main(){
    SimpleClass sc;
    sc.number = 0;
    sc.name = "koralle";

    SimpleStruct ss;
    ss.number = 0;
    ss.name = "koralle";

    cout << "number: " << sc.number << endl;
    cout << "name: "   << sc.name   << endl;
    cout << "number: " << ss.number << endl;
    cout << "name: "   << ss.name   << endl;

    return 0;
}
```

コンパイルするとちゃんとエラーになってくれた。

```
メンバー "SimpleClass::number" (宣言された 行 5) にアクセスできません
メンバー "SimpleClass::name" (宣言された 行 6) にアクセスできません
メンバー "SimpleClass::number" (宣言された 行 5) にアクセスできません
メンバー "SimpleClass::name" (宣言された 行 6) にアクセスできません
```

これを解決するためにクラスの方にはメンバ関数としてsetter, getterを実装する。

```cpp

#include <iostream>
using namespace std;

class SimpleClass {
private:
    int number;
    string name;
public:
    int getNumber(void) {
        return number;
    }
    string getName(void) {
        return name;
    }

    void setNumber(int n) {
        number = n;
    }

    void setName(string s){
        name = s;
    }
};

struct SimpleStruct {
public:
    int number;
    string name;
};

int main(){
    SimpleClass sc;
    sc.setNumber(0);
    sc.setName("koralle");

    SimpleStruct ss;
    ss.number = 0;
    ss.name = "koralle";

    cout << "number: " << sc.getNumber() << endl;
    cout << "name: "   << sc.getName()   << endl;
    cout << "number: " << ss.number << endl;
    cout << "name: "   << ss.name   << endl;

    return 0;
}
```

コンパイルして実行。

```
number: 0
name: koralle
number: 0
name: koralle
```

問題なし。ただし参考ページの以下の文章にもあるように実装では以下の点に気を付ける。


> メンバ変数をprivateにすることで、外部からアクセスできなくなり情報の隠蔽ができたように見えます。
しかしこのコードは、隠蔽方法としては全く無意味です。
なぜならば、直接メンバ変数にアクセスできなくともアクセッサを通して値の読み書きが自由に行えるので、隠蔽したことにならないからです。
つまりメンバ変数をpublicで定義するのと何ら変わりません。

[クラスの基礎(C++) - 超初心者向けプログラミング入門] (https://programming.pc-note.net/cpp/class2.html)

# おわりに
勉強することが多い...
初めての ECS

[テックタッチアドベントカレンダー](https://qiita.com/advent-calendar/2019/techtouch)2日目担当する@smith-30です。
1日目は@taisa831 による [やってよかった読書会技術書7冊](https://qiita.com/taisa831/items/804917809480cb24dd7e)でした。読書って難しいと上辺だけさらって読了することに目的が移ってしまうのですが、アウトプットの場があれば自分の理解が深まるしいいなと思いました。

## このページについて

ecs 触ったことがなかったのでとりあえずドキュメントや動画漁って要点をまとめています

## 内容

### ECS とは

Amazon **Elastic Container Service**

AWS上でコンテナ管理をあらゆるスケールでおまかせできちゃうやつ
コンテナは **タスク** という概念で考えられている

- スケール
- 制御・監視
- ロングランニング etc..

コンテナは、task definition と呼ばれる設定項目から管理が可能。例えば、CPUとかメモリとかディスクIOとか。その定義からコンテナインスタンスが立ち上がる。コンテナインスタンス(dockerが入っている)の中には **ecs-agent(oss)** が常駐していて、定義情報を受け付けてコンテナを立ち上げる(dockerを起動)。ecs-agentは、ecsと連携を取りながらコンテナの操作を行っていく。

**スケジューラ**

コンテナ同士の起動順序やコンテナの起動を管理する。  
タスク定義をagentに発行するなどする。こいつ自体はECSの上で動いている。
また、コンテナを定期的にポーリングして状態を把握するようにし、稼働するタスクの数などを管理している。
service スケジューラはロングランニングなwebアプリケーションに有用(rest-apiなど)。
minimumHealthPercent, maximumPercentでコンテナを動かしながら新しいバージョンに切り替えていくことが可能(blue/green デプロイ)。これすごい便利だな。。

**ログ**

cloudwatch から lambda や elasticsearch にも流せる。fluentd をサイドカーにして集約させるパターンを動かしてみたい。

### 設定

大きく2つに分かれる

- task(image) 定義
    - egister-task-definition から設定
    - cpu, memory, 環境変数の設定など
- service 定義
    - create-service から設定
    - 実行状態にしておきたいtask数
    - 更新時の blue/green デプロイメント戦略の設定



### EKSもあるけどどっち使えばいいの?

[この記事](https://www.atmarkit.co.jp/ait/articles/1806/11/news029.html)を見るに、既存のkubernates 環境をAWS上へ持って来たい、あるいはAWS環境にアプリケーション実行環境までAWSにロックインされずにコンテナオーケストレーションやりたい場合によさそう。ポータビリティを維持したいとか。
ECSはAWSでしか使えないので。ただし、大規模やマルチテナントには低コストでよいとは書いてあるのでインフラ面をおまかせして動かしていく分には問題なさそう。


### プロセス死んだらどうなる?

service として登録している場合は、立ち上げてくれる。立ち上げも連続的ではなく、エクスポネンシャルバックオフで実行される。スクリプトをservice登録して試してみた。

### service 間通信どうする？

elb を vpc 内に置いてendpointをサービス側に登録したり、gateway的なサービス使ったりする。

### バッチとして使いたいときはどうする？

service ではなく、 run-task で登録したtaskを実行する。

### その他

12 factor appの原則を守ってタスク(コンテナ)を作ろう

3日目は@92thunderが担当します、フロントエンド周りかな、楽しみ。

## 参考

- https://dev.classmethod.jp/cloud/aws/cmdevio2019-container/
- https://www.slideshare.net/AmazonWebServicesJapan/aws-black-belt-online-seminar-2017-docker-on-aws
- https://www.slideshare.net/AmazonWebServicesJapan/20180214-aws-black-belt-online-seminar-amazon-container-services
- https://www.youtube.com/watch?v=3oC98Vt-uy0
Zsh の設定

#----------------------------------------------------------------------------------------
#path hsetting
#-----------------------------------------------------------------------------------------
autoload -Uz compinit
compinit
autoload -Uz colors
colors

zstyle ':completion:*' completer _expand _complete _match
zstyle ':completion:*' matcher-list '' 'm:{a-zA-z}={A-Za-z} r:|[-_.]=**'
zstyle ':completion:*' format '%B%d%b'
zstyle ':completion:*' menu select
zstyle ':completion:*' list-colors "$LS_COLORS"

export HISTFILE=${HOME}/.zsh_history
export HISTSIZE=100000
export SAVEHIST=$HISTSIZE

setopt hist_ignore_dups
setopt hist_ignore_space
setopt hist_no_store
setopt share_history
setopt no_beep
setopt nolistbeep

WORDCHARS='*?_-.[]~=&;!#$%^(){}<>'

local_host_name=$(hostname -s)
#p_color=yellow
if [ $local_host_name[0,3] = "ssh" ]; then
            p_color=red
fi

umask 022
set uname=`/bin/uname`


#set path  = ( ~/bin /usr/bin /usr/local/bin /usr/ucb /usr/etc /usr/local /usr/lib /usr/local/lib  )
#set path = ($path /opt/pbs/default/bin)

#set path = (./ /etc /usr/bin /usr/local/bin /usr/X11R6/bin /t/bin /opt/pbs/default/bin /usr/local/lsf/bin/ /bin /usr/bin/java )
#---------------------------------------------------------------------------------------
#LIBRARY_PATH
#-----------------------------------------------------------------------------------------
# $setenv LD_LIBRARY_PATH ${LD_LIBRARY_PATH}:/usr/local/lib:/work/iip_dv/tools/gcc-4.8.2/lib64
 
#setenv LD_LIBRARY_PATH /apps/gcc/3.2.2/lib:${LD_LIBRARY_PATH}

#-----------------------------------------------------------------------------------------
#  prompt setting
#-----------------------------------------------------------------------------------------

#PROMPT='${fg[green]}}[%n@%m:%d]${reset_color} %#
#'
PROMPT="${fg[green]}[%n@%m:%d]${reset_color} %#
"


#setenv DISPLAY 172.29.51.57:0.0


## file size limit ##
limit filesize 20000000
 alias ls=' ls -F --color=auto'
 alias ll='ls -lh'
 alias 1='ls -1'
 alias la='ls -lha'
 alias ltr='ls -lhtr'
 alias lsr='ls -lhSr'
 alias rm='rm -i'
 alias mv='mv -i'
 alias cp='cp -ip'
 alias ssh='ssh -X'
 alias xterm='xterm -s &'
 alias ssh='ssh -X'
 alias dirs='dirs -v'
 alias py3='python3'
 alias count='ls -1 | wc -l'
 alias grepr='grep -r'
 alias tmux='tmux -2'
#  alias tmuxk = 'tmux kill-session'
#  alias vim --servername HOGE --remote hoge.tx
 #alias simvision='simvision -layout normal'

# key bind
stty erase '^?'
stty erase '^H'
##### DELETE key
bindkey "^[[3~" delete-char
#### HOME key
bindkey "^[[1~" beginning-of-line
#### END key
bindkey "^[[4~" end-of-line

function csv_kirei() {
    column -s, -t < $@ | less -#5 -N -S
}
alias csv='csv_kirei'

#Vim Server
function v() {
    vim --servername main --remote $*
}
#Plugins
if [[ -f $HOME/.zsh/plugins.zsh ]]; then
    source $HOME/.zsh/plugins.zsh
fi
redirect_toとrenderの違い・使い分け ❏Rails❏

#【結論】アクションを実行するかしないかの違い

```ruby:xxx_controller.rb
def create
  message = Message.new(message_params)
  if message.save
    redirect_to :new
  else
    render :new
  end
end
```

このようなcreateアクションがあります。

・`save`が成功した場合は`newアクションが実行され`、一度ページがリセットされnewのページが表示されます。

・`save`が失敗した場合は`newアクションを通さず`、入力された情報はそのままにnewのページが表示されます。

<br>
保存が成功したらフォームに情報を残しておく必要はありませんよね。
保存が失敗したらエラーメッセージを表示するなどして、入力情報のエラー部分のみを変更してもらいましょう。

<br>
参考
>https://www.pikawaka.com/rails/render

<br>
ではまた！
【中央寄せ】text-align: center;とmargin: 0 auto;の違い・使い分け ❏CSS❏

#【結論】

###・`インライン要素には、text-align: center;`
###・`ブロック要素には、margin: 0 auto;`

<br>
そもそもインライン要素・ブロック要素とはなんぞやという方はこちらが参考になります。
>https://saruwakakun.com/html-css/basic/display

<br>
#`text-align: center;`を使う時

`ただのテキスト`もしくは、
`aタグ`、`imgタグ`などの`インライン要素`が中央に寄る。

####※親要素にあてること！

```xxx.html
<div class="manbow">
  <a href="...">マンボウ</a>
</div>
```

```xxx.css
.manbow {
  text-align: center;
}
```

aタグは`div要素の中で`中央に寄りました。

<br>
#`margin: 0 auto;`を使う時

`divタグ`、`pタグ`などのブロック要素が中央に寄る。

####※中央寄せしたい要素本体にあてること！

```xxx.html
<div class="manbow">
  <a href="...">マンボウ</a>
</div>
```

```xxx.css
.manbow {
  width: 100px;
  margin: 0 auto;
}
```

ブロック要素は基本的に横いっぱいに広がっています。
それだと中央に寄らないので、`width`で幅を指定してあげます。

注意したいのは、`div要素`自体は中央に寄りましたが、`中のリンク`は中央に寄っていない点です。
div要素を中央に寄せ、更に中のリンクもその中で中央に寄せたい場合は`text-align: center;`をあてる必要があります。

```xxx.css
.manbow {
  width: 100px;
  margin: 0 auto;
  text-align: center;
}
```

すべてが中央に寄りました。

<br>
#まとめ

#####`text-align: center;`
・インライン要素が中央に寄る
・親要素にあてる

#####`margin: 0 auto;`
・ブロック要素が中央に寄る
・要素本体にあてる
・要素の幅を指定してあげる

<br>
参考
>https://saruwakakun.com/html-css/basic/centering

<br>
ではまた！
ArchWSLにてKDEを使う

ArchWSLにてXを使えない問題がやっと解決しました｡
他のディストリはわからぬです｡


---
##前提条件
- ArchWSLインスト済み
- WSLバージョン2

##インストール

```shell:shell
pacman -Syyuu plasma xorg kde-applications xorg-xinit xorg-apps fcron git cargo

pacman -Rdd avahi fluidsynth pipewire

git clone --depth=1 https://aur.archlinux.org/paru-git.git && sed -i -e /exit\ \$E_ROOT/d /bin/makepkg && cd paru-git && makepkg && pacman -U paru-git-*.pkg.tar.*
paru -Syyuu dbus-x11 systemd-genie
```


このあとの作業は**Root**のみではできない

##Vcxsrv

[Vcxsrv](https://sourceforge.net/projects/vcxsrv/files/vcxsrv/)をインストール

これはXサーバーをWindows上で走らせるアプリです｡

Configの例

```
<?xml version="1.0" encoding="UTF-8"?>
<XLaunch WindowMode="Fullscreen" ClientMode="NoClient" LocalClient="False" Display="3" LocalProgram="xcalc" RemoteProgram="xterm" RemotePassword="" PrivateKey="" RemoteHost="" RemoteUser="" XDMCPHost="" XDMCPBroadcast="False" XDMCPIndirect="False" Clipboard="True" ClipboardPrimary="True" ExtraParams="-ac" Wgl="True" DisableAC="False" XDMCPTerminate="False"/>
```
##起動
`startplasma-x11`か`plasma_session` と打ち込んで黒い画面にデスクトップが生成されたら成功です｡
## トラブルシューティング
- タスクバーがない

`rm ~/.config/plasma-org.kde.plasma.desktop-appletsrc`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387170/a4e7b36d-c426-a368-132a-21f417dbd903.png)
最近勉強して、知った言葉まとめてみた

# はじめに
私が最近、知った言葉を、自分なりにまとめてみました。参考にしてもらえると、嬉しいです:relaxed:

## ハッシュ化
パスワードを、保管する際に用いられる手法。
平文のパスワードからハッシュ値と呼ばれる値を求め、そのハッシュ値という値でパスワードを保管する手法。暗号化とは違い、不可逆変換であり、元の平文のパスワードに戻すことが不可能である。

## データベースのNOTNULL制約
データベースに、nullを入れることを許容しない制約。制約をつけることにより、nullが入るとエラーが起きることにより、nullを入れることが出来なくなる。データベースの必須項目などに付けるといいと思います。

## キーワード引数(Ruby)
関数を作った際の引数の末尾に `:` をつけることで、関数を呼び出す際にどの引数に、どの数や文字、変数を渡すのか指定することが出来る。引数が多くなった場合などに便利。

## CSSセレクタ
CSSを指定することにより、要素を取得できる。多くのセレクタの種類があり、それらを組み合わせることにより、細かいとこまで指定して、要素を取得できる。[おすすめチートシート](https://webliker.info/css-selector-cheat-sheet/)

## 最後に
説明が曖昧ですが、もっと上手く説明できるように精進致します。
Flutter デモバナーを消去

simulatorやemulatorの右上のデモバナーを消去する(debugと表示されている部分)
<img width="283" alt="スクリーンショット 2019-12-02 7.45.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212004/a8e9e6f6-7d5f-b3c9-4604-d7af4e7cc506.png">

MaterialApp内に``debugShowCheckedModeBanner: false``を記述してあげるだけです。


```main.dart
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       debugShowCheckedModeBanner: false,

      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.pink,
      ),
      home: MyHomePage(title: 'Fuchsia'),
    );
  }
}
```
Railsチュートリアル 第11章 アカウントの有効化 - 前提

# サンプルアプリケーションの現状と、これから実装する変更内容

Railsチュートリアルの第10章終了時点では、「新規登録したユーザーは、はじめからすべての機能にアクセスできる」という実装となっています。第11章では、「アカウントを有効化するステップを新規登録の途中に差し込むことで、本当にそのメールアドレスの持ち主なのかを確認する」という機能を実装していきます。

# アカウントの有効化プロセス

## 概要

「アカウントの有効化」というユースケースは、大まかには以下のプロセスからなります。

1. 有効化トークン・ダイジェストを新規に生成したユーザー情報と関連付ける
2. 有効化トークンを含むリンクを、ユーザーにメールで送信する
3. ユーザーが2.のリンクをクリックすると、当該アカウントが有効化される

## 詳細

上記「アカウントの有効化プロセスの概要」をさらに詳細に見ていくと、以下のような機能の実装が必要となるのがわかります。

* ユーザーの初期状態は、「有効化されていない(unactivated)」であること
* ユーザー登録が行われた際に、以下が生成されること
    * 有効化トークン
    * 当該有効化トークンに対応する有効化ダイジェスト
* 有効化ダイジェストがRDBに保存されること
* 新規登録ユーザーの登録メールアドレス宛に有効化用メールが送信されること
    * 当該有効化用メール中に記載されるリンクに有効化トークンが含まれること
* 有効化トークンの認証機能
    * ユーザーが有効化用メール中のリンクをクリックしたことが検出できる機能
    * 登録メールアドレスをキーとしてユーザーを検索する機能
    * ユーザーから送信された有効化トークンと、RDB中の有効化ダイジェストを比較する機能
* ユーザーの状態を「有効化されていない」から「有効化済み(activated)」に変更する機能
    * 有効化トークンの認証に成功した時点で変更される

実は、上記の仕組みは、これまで実装してきた「パスワード」「（永続cookiesにおける）記憶トークン」の仕組みとよく似ています。少なからぬメソッドは使いまわしも可能なのです。

|検索キー |string|digest|authentication|
|-------|------------------|-------------------|-----|
|`email`|`password`        |`password_digest`  |`authenticate(password)`|
|`id`   |`remember_token`  |`remember_digest`  |`authenticated?(:remember, token)`|
|`email`|`activation_token`|`activation_digest`|`authenticated?(:activation, token)`|
|`email`|`reset_token`     |`reset_digest`     |`ahthenticated?(:reset, token)`|

# 第11章で行う実装

* アカウント有効化に必要なリソースやデータモデルの生成
* アカウント有効化時のメール送信部分の実装
    * Railsの`mailer`機能を用いる
* `User#authenticated?`メソッドの機能拡張
* アカウント有効化処理の本体の実装
    * 機能拡張した`User#authenticated?`を用いる
デザインは意味無しSEO

SEOとはただのアルゴリズム。そこに人から見た良さは入ってこない。Googleというのは独自価値観であり、独特のアルゴリズムがまだ生きていることがわかる。いつぞや、SEOとは人主体になったという説が流行ったが、それも過去のことになろうとしている。
<a href="https://aqua-price-market.com/" >海外ドラマ有名ジャンル</a>

デザインとは人から見て十分な意味を持っている。ただ検索ユーザーのニーズとは、きれいなWEBサイトではなく、そこにある意味文字価値。検索したことにたいして、素晴らしいデザイン性で納得できるか。それは検索クエリしだい。テキストが求められているのに、意味のない画像が貼ってある。これが無駄。フリー素材を読み取ることはGoogleはできないという。その画像の意味とは。それは結局は別の要素で決まる
Elixir Zen スタイル講座: ループを Enum.reduce/3 で表す方法

この記事は [「Elixir Advent Calendar 2019」](https://qiita.com/advent-calendar/2019/elixir) 2日目の記事です。

いよいよ今年もアドベントカレンダーの季節が始まりました！

昨日は @mocamocaland さんの[「構築したSerumでリンク先の追加と記事投稿をする方法」](https://qiita.com/mocamocaland/items/e4a4d4f00b7416513429)でした。

今日は Elixir Zen スタイル講座ということで，ループを `Enum.reduce/3` で表す方法についてご紹介します。

# 例題

C言語で書かれた次のようなループ構造を Enum.reduce/3 を使って Elixir にする方法について説明します。

```c
int loop_sample(int a[], int a_n) {
	int r1 = 0, r2 = 0;
	for(int i = 0; i < a_n; i++) {
		r1 = (r1 < a[i]) ? a[i] : r1;
		r2 += r1;
	}
	return r2;
}
```

説明を簡単にするため，if文ではなく，条件演算子を使って書いています。

解答例は次の通りです。

```elixir
defmodule ReduceSample do
  def loop_sample(a) do
    {_, r2} =
      Enum.reduce(
        a,
        {0, 0},
        fn x, {r1, r2} ->
          {
            max(x, r1),
            r2 + max(x, r1)
          }
        end
      )

    r2
  end
end
```

対応関係をコメントで書いてみます。

```elixir
defmodule ReduceSample do
  def loop_sample(a) do
    {_, r2} =
      Enum.reduce(
        a,
        {0, 0},             # int r1 = 0, r2 = 0;
        fn x, {r1, r2} ->
          {
            max(x, r1),     # r1 = (r1 < a[i]) ? a[i] : r1;
            r2 + max(x, r1) # r2 += r1; // C言語の r1 は更新後
          }
        end
      )

    r2                      # return r2;
  end
end
```

# 基本的な考え方

1. ループへの入力となるリストを Enum.reduce/3 の第1引数に与えます。
2. ループ内に登場する変数を記憶するために，変数と同じ数の要素を持つタプルを用意します。
3. 各変数の初期値をタプルにして Enum.reduce/3 の第2引数に与えます。
4. Enum.reduce/3 の第3引数の関数を次のように定義します。
	1. 第1引数をリストの各要素を表す `x` とします。
	2. 第2引数を，ループ内に登場する変数を表すタプルにします。
	3. 戻り値は，各変数を更新する式をタプルにして表します。
		* ただし，ループの中で更新された他の変数値を使用する場合は，その変数を更新する数式を展開しておきます。

# 制約条件

* リストがループの前後で不変である必要があります。
* 各イテレーションで複数の要素を参照しない場合のみ可能です。
* 各イテレーションで副作用がない場合のみ可能です。

# 次回予告

次は明日[「言語実装 Advent Calendar 2019」](https://qiita.com/advent-calendar/2019/lang_dev)3日目に投稿予定です。[「Elixir / Pelemay 研究の背景と意義」](https://qiita.com/zacky1972/items/a3dedc0cdacbeed21b6d)です。よろしくお願いします。

明日の[「Elixir Advent Calendar 2019」](https://qiita.com/advent-calendar/2019/elixir)は @torifukukaiou さんの[「12月3日なので、一二三、123ダーなElixirのこと」](https://qiita.com/torifukukaiou/items/8c37f9710e45b50b6aba#_reference-6fb2c85acda96988b720)です。こちらもよろしくお願いします。
ボタンの文字を小文字にする

どうもこんばんは、みかんです。

**！！！！とつぜんですがたいせつなおしらせ！！！！**

2020年1月27日
App Maker の提供終了に向けた対応のご案内
https://support.google.com/a/answer/9682494?p=am_announcement&visit_id=637157414793613981-426262357&rd=1


??!???!?!?!???!?

残念ながら2021年1月19日には終了してしまうそうです(涙)
移行先はAppSheetかApp EngineかGoogleフォームだそうです・・・

消すのは忍びないので記事は残して置きますが、何かの間違いじゃ無い限り役に立つことはないでしょう・・・


**！！！！おしらせはおわりです！！！！！**

今回はボタンの文字を小文字にする方法を書いてみます。

まずは、シンプルにボタンを置いてみます。

|![ap01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/97233e51-22cb-5b4c-e8dd-da16a0811cbf.png)|
|:-:|

プロパティエディタを見ると、textは「Button」になっているにも関わらず、実際にボタンに表示されている文字は「BUTTON」と、大文字になってしまっています。
これはそういう仕様なのですが、小文字にしたいことってありますよね。

そういう時は、下の様に、CSSで細工をします。

|![ap02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/5a038de7-d05a-190f-8a2e-57d75a2f7184.png)|
|:-:|

「text-transform」というプロパティに、noneを指定します。
そうすると、入力した通りの文字が表示されるようになりました！

とても地味ですが、、App Maker側で都合の悪い表示形式になっているときは、CSSでなんとかならないか探るという道があります。

以上です。良いApp Makerライフを!
OutsystemsからSalesforceに接続してみた


#はじめに
Qiitaに記事を書くなんて全然想像もしてなかったのですが、今年はアドベントカレンダーに参加することになったので、今回は業務で使ったOutsystemsからSalesforceへの接続方法を忘れないようにここに書いてみます。
###自己紹介
ランスタッドに入社して半年くらいになりました。
前職では金融系のシステム開発をしていたのですが、ここに入社して一番感じることは
ITっぽくない人が多いな～ってことです。(良い意味！！)
まだまだ伸びしろを信じながら勉強中です！

#OutsystemsからSalesforceへの接続
業務でOutsystemsを使っているのですが、ある時Salesforceに接続してデータを参照しないといけない場面に出会いました。
なんかできそうだけど全然わかんないなと思いながら調べると、さすが！！　
なんと「Salesforce Connector」というForgeがあるらしいのでその紹介をしたいと思います！

###Salesforce Connector
Salesforce Connectorは名前の通り簡単にSalesforceへ接続することができるForgeです。
以下からSalesforce Connectorをダウンロードすることができます。
https://www.outsystems.com/forge/component-overview/109/salesforce-connector

###設定方法

**1. トークンの生成**
Salesforceの個人設定の「私のセキュリティトークンのリセット」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517187/7070c54f-aa2d-5ab6-446c-f1197de575b8.png)

次にセキュリティートークンのリセットを押下します。
アカウントに設定しているメールにトークンが送信されるので保存しておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517187/355e0a3a-b081-219c-9fee-da8963d9898b.png)

**2. Salesforceに接続するServer Actionを追加**
SalesforceLoginのアクションを使用してSalesforceにログインを行います。

以下のプロパティ項目を入力
　　・ServerURL：「Soap Service Endpoint」のURL
　　　　　　　　　（Salesforceの「API」項目からパートナーWSDLの生成を押下する）
　　・UserName：Salesforceのログインユーザー名
　　・Password：Salesforceのログインパスワード＋↑で取得したトークン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517187/f24f45ee-a027-9f6b-c2a1-2ce070f55b8f.png)


後は使用したいアクションを「Salesforce Connector」からドラックアンドドロップして使えばOKです。
 
#「Find」Actionでデータを取得してみた
SalesforceConectorのオブジェクトフォルダにある「Find」Actionを追加します。
「Find」Actionは、ロジック内でログインロジックがあるため、先にログインしている必要はないっぽいです。
Findのプロパティの「ObjectList」に取得するオブジェクトの型を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517187/12bd04b2-152c-1cc8-5bf4-5448c0c1a341.png)

これで指定したオブジェクトのデータを取得することができました。
「ObjectList」に指定した型の項目がSalesoforceの項目名と違うと怒られるので気を付けてください。
「Find」以外にもActionが用意されているのでいろいろできそうですね！

#終わりに
接続できると設定はこんだけか～となるのですが、トークンの設定で「＋」を付けちゃったり、Outputの型の設定を間違えたり何かと時間がかかりました。
Forgeのドキュメントにも設定方法がそのままのっているのでよかったらそちらも確認してみてください。
とっても基礎的なことしか書いていませんが、何かのお役に立てれば嬉しいです。
【Rails】パンクズリストの作り方

#まえがき
みなさんパンくずリストは知っていますでしょうか。どこかで耳にした方もいるかもしれません。ちょっと変わった名前ですがbreadcrumbsと書くとかっこいいですね。このパンくずリストですが名前によらずとても便利な物なのでぜひ作り方を覚えましょう。

#パンクズリストとは
`ホーム＞おすすめ一覧＞家電製品`
のような現在いる位置を視覚的に見ることができる物です。大抵画面上部に用いられることが多いです。
これはよくSEO対策的に使われることが多く、SEOに詳しい人にとってはおなじみなのではないでしょうか。

パンクズリストを作るメリットは以下の通りですです。

#設置するメリット
####ユーザビリティーの向上
パンくずリストを用いることで視覚的に現在いる位置を構造的に見ることができるので、そのwebアプリを使うユーザーがサイト内で迷子になることがなくなり、ストレスなくサイト内巡回をすることができます。また、様々なユーザーはみなトップページからサイトに訪れるわけではなくそれぞれ必要なページに直接飛んでくるので、本当に目的のページを開けているか確認をするという使い方もされます。

####検索ページに表示される時がある
googleなどで検索をかけた時にページの説明欄にパンクズリストが表示されているのを見たことがある人もいるかもしれません。パンくずが表示されていると検索ページにいるだけでサイト内の構造を見ることができ、飛びたいページの上層カテゴリも表示されるのでクリック率対策になります。

####内部SEO対策
googleはページ内を評価する際に一つ一つのページに飛びリンクの文字などを認識しそのページが有用なのかどうかを判断しています。その際にパンクズリストがあるとその作業がスムーズになるために高く評価されSEO対策に効くとされています。

#設置方法
では本題です。今回はRailsでの設置になります。
Railsでは**Gretel**というgemを用意してくれています。

GitHub
https://github.com/lassebunk/gretel


```
gem "gretel"
```
このようにgemfileの一番下に追加します。

```terminal
$ bundle install
```


そしてコマンドを打ち、設定ファイルを作っていきます。

```terminal
$ rails generate gretel:install
```

すると以下のようなファイルが生成されます。

```ruby:config/breadcrumbs.rb
crumb :root do
  link "Home", root_path
end

# crumb :projects do
#   link "Projects", projects_path
# end

# crumb :project do |project|
#   link project.name, project_path(project)
#   parent :projects
# end

# crumb :project_issues do |project|
#   link "Issues", project_issues_path(project)
#   parent :project, project
# end

# crumb :issue do |issue|
#   link issue.title, issue_path(issue)
#   parent :project_issues, issue.project
# end

# If you want to split your breadcrumbs configuration over multiple files, you
# can create a folder named `config/breadcrumbs` and put your configuration
# files there. All *.rb files (e.g. `frontend.rb` or `products.rb`) in that
# folder are loaded and reloaded automatically when you change them, just like
# this file (`config/breadcrumbs.rb`).
```
今回はマイページを作っていきたいのでrootを設定した後にマイページを表記していきます。


```ruby:config/breadcrumbs.rb
# ルート
crumb :root do
  link "ホーム", root_path
end

# マイページ
crumb :mypage do
  link "マイページ", mypage_users_path
end
```
`crumbs :mypage do`はなんという名前でhtml上に表記し呼び出すかを書きます、後々使います。
`link`はパンクズリストに表示される文字とそのページがどこのパスに属しているかを表記します。
パンクズリストはリンクになっている場合が多いのでそのリンクはここで設定します。


ではビューファイルに表記していきます

```ruby:mypage.html.haml
- breadcrumb :mypage
= breadcrumbs pretext: "You are here:",separator: " &rsaquo; "
```
`- breadcrumb :mypage`はconfig/breadcrumbs.rbに定義したmypageを呼び出すことができ、
`= breadcrumbs pretext: "You are here:",separator: " &rsaquo; "`
で表示したい位置を指定することができます。

` &rsaquo;`という表記はHTML特殊文字と言われる物で`＞`の部分を表記しています。


また親子の関係を示すために以下のような表記方法もあります

```ruby:profile.haml.haml
# プロフィール
crumb :profile do
  link "プロフィール", edit_user_path
  parent :mypage
end
```

`parent`と表記しdoとendで挟むことにより`crumb :profile do`の親を書くことができます。
この表記だと次のような表示になります。

`ホーム > マイページ > プロフィール
`
といった感じでしょうか。

#まとめ
いかがだったでしょうか、今回書いて行ったパンクズリストは企業としても重宝する技術ですし、習得していて損はないのではないでしょうか。ぜひポートフォリオなどにも実装してみてください！
zsh(prezto)でコマンド実行した時刻を残す

# やりたいこと

時間のかかるコマンドを実行しておいて、後から「あれ…いつからやってたっけ」となることが多かったので、zshのプロンプトに実行した時間を残すようにしたメモ。

# やったこと

zshはpreztoで設定しているので、その設定を変えた。今使っているテーマはsorinだったのでその時の設定。

```zsh
# テーマディレクトリに移動
% cd ~/.zprezto/modules/prompt/functions/

# バックアップ
% cp prompt_sorin_setup prompt_sorin_setup.bak

# 編集
% vim prompt_sorin_setup
```

編集前

```zsh
  PROMPT='${SSH_TTY:+"%F{9}%n%f%F{7}@%f%F{3}%m%f "}%F{4}${_prompt_sorin_pwd}%(!. %B%F{1}#%f%b.)${editor_info[keymap]} '
```

編集後

```zsh
  PROMPT='${SSH_TTY:+"%F{9}%n%f%F{7}@%f%F{3}%m%f "}%T %F{4}${_prompt_sorin_pwd}%(!. %B%F{1}#%f%b.)${editor_info[keymap]} '
```

`%T` を入れた。
読み込み直すと時刻が表示されるようになった！

```
3:23 ~ ❯❯❯ date
2019年 12月 2日 月曜日 03時23分07秒 JST
3:25 ~ ❯❯❯ cal
      12月 2019
日 月 火 水 木 金 土
 1  2  3  4  5  6  7
 8  9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
3:25 ~ ❯❯❯
```

時刻はリアルタイムで更新されないけれど、コマンド実行したタイミングで確定されるみたいなので、当初の目的である「あれ…いつからやってたっけ」というのが遡れるようになったのでOK

次はhistoryにも時刻を残しておきたいな〜

# 参考

[zsh+Preztoのテーマ等をいじった話 - Qiita](https://qiita.com/sakurasou/items/10156a46fb7e2d1c300f)
GKEメモ

自分用のkubeアカウント、プロジェクト等の切り替え,GKE作成等のメモです。

## 大きな流れ
- Authenticate with a service account on gcloud
- Get credentials from a cluster through gcloud
- Run any kubectl command that reaches the server

## 手順
### serviceアカウントのactivate

```
gcloud auth activate-service-account [SERVICE_ACCOUNT_EMAIL] --key-file [KEY_FILE.JSON] --project [PROJECT_ID]
```

- [SERVICE_ACCOUNT_EMAIL],[KEY_FILE.JSON]に関して

GCPコンソールから「IAMと管理」→「サービスアカウント」にて確認、生成できる。

### clusterとの接続

```
gcloud container clusters get-credentials  [CLUSTER_NAME] --zone [ZONE]
```

###　接続できているかの確認
```
kubectl config get-contexts
```

- context,container,accountの切り替え

```
gcloud auth list
gcloud config set account [ACCOUNT_ID]

gcloud projects list
gcloud config set project [PROJECT_ID]

// 補足、実行しなくても切り替えれそう。
gcloud container clusters get-credentials [CLUSTER_NAME] --zone [ZONE]

kubectl config get-contexts
kubectl config use-context [CONTEXT_NAME]
```

## 参照
https://github.com/kubernetes/kubernetes/issues/30617
https://cloud.google.com/sdk/gcloud/reference/auth/activate-service-account
https://qiita.com/hana_shin/items/b7a947511a89accea6d4
What is Dependency

# 依存とは
## 依存の定義
class A が class Bや Interface Bを利用するとき、AはBに依存するという。
## 結合の定義
AとBが互いに利用し合っている状態を結合という。

## 結合の強弱
結合には強度があり、密結合や疎結合と呼ばれる。結合は0か1ではなく、結合の強度は連続的なものである。
## 依存の方向性
依存関係は方向性が存在し、AがBに依存していてもBがAに依存しているとは限らない。

# なぜ依存が悪いものなのか？
依存は再利用の阻害要因となる。
再利用性は開発速度・コードの可読性・コードの質を向上させる。

例えば、XMLファイルからカレンダーのイベント一覧を読み込むクラスを考えてみる。

```java

public class CalendarReader {
    public List readCalendarEvents(File calendarEventFile){
        //open InputStream from File and read calendar events.
    }
}
```
`readCalenderEvents`は`File`を引数としてとり、`readCalenderEvents`は`File` classに依存している。つまり、 `CalednarRedaer`はファイルシステム上のローカルファイルからしかカレンダーイベントを読み取る事ができない。ネットワークからカレンダーを読み込んだり、データベースから読み込んだりもできない。この場合 `CalenderReader`は`File`classに密結合していると言える。

`File` parameter を`InputStream` parameterに変更する事でより疎結合な実装ができる

```java
public class CalendarReader {
    public List readCalendarEvents(InputStream calendarEventFile){
        //read calendar events from InputStream
    }
}
```
`InputStream`は`File`objectからも、`Network Socket`からも、`URLConnection`classからも取得できる。そのため、`CalenderReader`classは`InputStream`を引数にした方が再利用性が高まる。しかし、100%結合が解消したわけではない。例えば、NIO Channelからのデータを読み取ることは難しい。



# You should not add functionality to an interface blindly.

Below is an example of what this means. The code example shows a tree node for a hierarchical tree structure.

```
public interface ITreeNode {
    public void            addChild(ITreeNode node);
    public List<ITreeNode> getChildren();
    public ITreeNode       getParent();
}
```

Imagine that you want to be able to count descendents of a given node. At first you might be tempted to add a countDescendents() method to the ITreeNode interface. However, if you do so anyone who wants to implement the ITreeNode interface will also have to implement the countDescendent() method.

Instead you could implement a DescendentCounter class that can traverse an ITreeNode instance an count all descendents of that instance. This DescendentCounter can be reused with different implementations of the ITreeNode interface. You have just saved your users the trouble of implementing the countDescendents() method, even if they need to implement the ITreeNode interface!


# 疎結合を実現する方法
1. 抽象化
2. 必要最低限の構造を抜き出す
3. 機能の分離


# 参考
http://tutorials.jenkov.com/ood/understanding-dependencies.html#:~:targetText=A%20dependency%20that%20can%20be,dependencies%20can%20be%20more%20flexible.
Laravel Mixで圧縮時にconsole.*を削除する

Laravel Mixが[terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin)の設定を中継してくれるので、
webpack.mix.jsに、以下の設定を含めておくだけで`npm run prod`時にconsole.logが削除される。
`npm run watch`や`npm run dev`するときには設定をスルーしてくれる。

```webpack.mix.js
//console.log削除設定
mix.options({
	terser: {
		terserOptions: {
			compress: {
				drop_console: true
			}
		}
	}
});
```

以下バージョンで動作確認済み

```package.json
"laravel-mix": "^4.1.4",
```

ありがたやありがたや

## 参考リンク
- [console - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Console)
- [Laravel Mix Options](https://laravel-mix.com/docs/5.0/options)
- [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin)
- [terser](https://github.com/terser/terser)
 - [Minify options](https://github.com/terser/terser#minify-options)
 - [Compress options](https://github.com/terser/terser#compress-options)
FizzBuzzに取り組むカワウソ

# FizzBuzzとは
FizzBuzzって知ってますか？

>1から100までの数をプリントするプログラムを書け。
ただし3の倍数のときは数の代わりに｢Fizz｣と、5の倍数のときは｢Buzz｣とプリントし、
3と5両方の倍数の場合には｢FizzBuzz｣とプリントすること。

(どうしてプログラマに・・・プログラムが書けないのか? Jeff Atwood / 青木靖 訳)より引用
[http://www.aoky.net/articles/jeff_atwood/why_cant_programmers_program.htm]

カワウソもプログラミングテストでこのFizzBuzz(具体的にはもうちょい発展したやつ)のコードを書く機会がありました。

今回は復習として改めてFizzBuzzをやっていこうと思います。
宮大はC言語に親しみがあるのでCでやります。キュー

# フローチャート
<img width="590" alt="フローチャート.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526245/308d5a1c-ab9a-e010-ee40-bd39cb330473.png">


# 解いてみる
```c:fizzbuzz.c
#include <stdio.h>
int main(void) {
    int i;
    for (i = 1; i <= 100; i++) {
        if (i % 3 == 0 && i % 5 == 0) {
            printf("FizzBuzz\n");
        } else if (i % 3 == 0) {
            printf("Fizz\n");
        } else if (i % 5 == 0) {
            printf("Buzz\n");
        } else {
            printf("%d\n", i);
        }
    }
    return 0;
}
```

コンパイルして実行する

```terminal
gcc -o fizzbuzz fizzbuzz.c
./fizzbuzz
```
できた！

```terminal
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
(略)
97
98
Fizz
Buzz
```

関数を作ってみるよ

```c:fizzbuzz_func.c
#include <stdio.h>

//自作関数
void FizzBuzz(int n){
  if (n % 3 == 0 && n % 5 == 0) {
    printf("FizzBuzz\n");
  } else if (n % 3 == 0) {
    printf("Fizz\n");
  } else if (n % 5 == 0) {
    printf("Buzz\n");
  } else {
    printf("%d\n", n);
  }
}

int main(void) {
  int i;
    for (i = 1; i <= 100; i++) {
      //関数FizzBuzを呼び出し
      FizzBuzz(i);
    }
  return 0;
}
```
コンパイルして実行する

```terminal
gcc -o fizzbuzz_func fizzbuzz_func.c
./fizzbuzz_func
```

```terminal
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
(略)
97
98
Fizz
Buzz
```

# まとめ
C言語でFizzBuzzを解いてみました。
解き方は他にもあると思いますが、今回やってみた方法が理解しやすいと思いました。
もっとスマートな方法を知っている方は教えてください。
Nuxt.jsのローカルでのhttps起動をnuxt.config.jsの設定で行う

## 概要
Nuxt.jsをローカルでhttps起動する際、起動スクリプトを作成する手順が検索すると引っかかるのですが、バージョンの関係か私のローカル環境では上手くいきませんでした。。ので起動スクリプトを使わずに、nuxt.config.jsの設定のみで起動する方法を紹介します。

## 前提
localhostに対するSSL証明書が、発行済みであることを前提とします。@yoshinboさんの[Nuxt.jsでlocalhostをSSL化する方法](https://qiita.com/yoshinbo/items/5838f43cbbd75e396c35)に記載の手順などを参考に、keyとcertファイルを作成してください。

## 参考
[Example using HTTPS configuration](https://nuxtjs.org/api/configuration-server/#example-using-https-configuration)

## 設定例
`server/localhost`配下に、上記で作成した証明書のファイルを配置しています。

```nuxt.config.js
import path from "path";
import fs from "fs";

export default {
  server: {
    port: 3001, // デフォルト: 3000
    host: "localhost", // デフォルト: localhost
    https: {
      key: fs.readFileSync(
        path.resolve("server/localhost", "localhost-key.pem")
      ),
      cert: fs.readFileSync(path.resolve("server/localhost", "localhost.pem"))
    }
  }
};
```
AzureでRDBとfunctionsを繋ぎたい

PlayFabですっかりマイクロソフトのトリコになった僕ですが、PlayFab経由でRDBの操作が出来たらなーという事で、どうせならAzureのサービスで出来ないかと。

その１歩目としてAzureFunctionsからRDBを操作してみたいと思い。Azureを契約しほぼ1ヵ月。

AzureのSQLDBとAzureFunctionsの起動は数日で出来るようになりましたが、この2つの接続でトラブル発生。マイクロソフトのサポートの方のご協力も得てなんとか成功にこぎつけました。

という事で、三部作で「AzureのSqlDataBaseとFunctionsを繋げる」備忘録を記載します。

+ [(1)SqlDataBaseを作るまで](https://qiita.com/yotsuno/private/b008853cf8a9a433a83f) 
+ [(2)functionsの作成](https://qiita.com/yotsuno/private/28fa6f5468ac3c3bb3b7)
+ [(3)functionsからSQLの操作](https://qiita.com/yotsuno/private/efcec3ef600824f83e04)



※原因としてはいくつかあったのですが、主たる所ではSystem.Data.SqlClientというパッケージが最新版（4.7）だとダメだったというオチ。

※マイクロソフトの方はとても親身になって下さいました。一見、初歩的そうな所でも実はあまり情報が出ていない原因の可能性もあるので、初学者の方でも、調べても解決しない場合はサポートを利用するのはありかと思いました。（自分はサポート用のプランにグレードアップしました）
 
 
NEXT: [(1)SqlDataBaseを作るまで](https://qiita.com/yotsuno/private/b008853cf8a9a433a83f)
ruby on rails 基本2

#はじめに

この記事は、2019/11/1からプログラミング学習を始めた学生がプロのプログラマーになるまでのアウトプットする為の書き込みの場である。

#Rails　コマンド編
- **rails s**
 - railsをターミナルにて起動するコマンド
- **rails db:create**　
 - 新しくデータベースを作成するにはrails db:createというコマンドを実行します
- **rails routes**
 - アプリケーションのディレクトリでコマンドを実行すると、そのアプリケーションのルーティングを確認することができます。
- **rails g controller**
 - コントローラーやそれに付随するファイルを一度に作成してくれるコマンドです
- **rails g migration** 
データベースのテーブルの情報を追加・削除・変更するために、マイグレーションファイルを生成するコマンドです
- **rails db:migrate**
 -  マイグレーションファイルに記述した内容を、実際にデータベースに適用するためのコマンドです
- **rails db:migrate:status** 
 - マイグレーションファイルがデータベースに適用されているかどうかを調べるコマンドです
 - 適用されているときはupと表示されため、修正するためにはロールバックする必要があります
 - 適用されていないときは、downと表示され、そのまま修正や削除が可能です
-  **rails d controller** 
 - 指定したコントローラーを削除するコマンドです

##今日の感想
プログラミング未経験歓迎のアルバイト求人に応募し、書類選考で落ちた件

- 書類申請した時の技術
 - html,css,ruby,ruby on railsの基礎
 - 自分で作成したアプリなど無し
- 書類選考で、落ちた理由仮説
 - プログラマーが昔と違い数多く存在する為、応募する数が多くなり未経験は、ほとんど書類で落ちる事になる
 - 未経験は、採用する際に企業側にもリスクがある、未経験で仕事を始める場合、初めはプログラミングについての知識が必要な為、企業はある程度給料を出しながら、育成する事になるので、もし、雇った人が、会社をやめてしまうと企業側は、マイナスになる為、未経験でアルバイトは受かりにくく書類で落とされる

##終わりに

もっとこうした方が良いよなどご指摘頂けると幸いです
VScodeでF#をデバッグしてみる（Scoopを使ってインストールしてみる）

![Screen Shot 2019-12-02 at 2.13.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149269/50a2024a-68a8-8ad6-3f22-e74a06974595.png)
# Summary

`VSCode`という`IDE`のような`テキストエディタ`を使って`F#`をデバッグしてみた
必要なものは`Scoop`を使ってインストールしてみた

## ポイント

`dotnet-sdk`にパスを通す

## Great thanks

@_midoliy_(twitter id)

## install

`scoop`に関しては割愛

```powershell

# dotnet-sdkをインストール
>scoop install dotnet-sdk

　　　# つらつらつらと文字がでてくる ...

# インストールされたか確認
> dotnet --version
3.0.101

# VSCodeをインストール
> scoop bucket add extras
> scoop install vscode
    # つらつらつらと文字がでてくる ...

# インストールされたか確認
> code --version
1.40.2
f359dd69833dd8800b54d458f6d37ab7c78df520
x64

# extension(chsarp)をインストール
# ionide-fsharp , F# Language Serverに関しては
# extension-IDがわからなかったのであとでインストールすることとする
> code --install-extension ms-vscode.csharp
```

## パスをとおす

上記でインストールした`dotnet-sdk`にパスを通します

```
// コントロールパネルを開く
windowsボタン + R
「 control 」と入力してリターン

// 環境変数を編集
検索窓（右上の小窓）に「 path 」と入力してリターン

// ユーザー環境変数にて
[新規]ボタンをおして適当な名前をつけて
上記にてインストールされた「dotnet-sdk」のフォルダへのパスを記入
例）%userprofile%\scoop\apps\dotnet-sdk\current
```

## Debug on VSCode

``` powershell
# 任意のプロジェクトフォルダを作成
> mkdir foo

# プロジェクトフィイル？を作成
> dotnet new console -lang F#

# vscodeを立ち上げる
> code .

# extensionsをインストール
# ionide-fsharp
# F# language Server
# ctrl shift X をおして上記extensions名を入力してリターン
# [install]というボタンをクリックする
```

```
# コードを書き換える
# Exploreボタンを押して[Program.fs]に１行追加
# let x = "foo"
# 行番号の左側をクリックしてブレイクポイントを追加する

ここでコード上の任意の場所で「 F5 」を押す
```




![Screen Shot 2019-12-02 at 2.32.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149269/56a35295-7700-5688-254c-e4d05bf9b3f5.png)

右下の「add configuration」を押す

![Screen Shot 2019-12-02 at 2.34.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149269/a20d034a-80f8-44e5-bf25-b9633843afc7.png)

「.NET: Launch .NET Core Console App 」を選択

![Screen Shot 2019-12-02 at 2.35.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149269/03ff53a5-09a8-d24f-ed52-b1e484b13e33.png)

`program`の値を書き換える
launch.jsonの`program`の値を下記のように書き換える

netcoreapp3.0 ---> 今回使うAPI的な（net45とかnetstandartとか）
foo.dll       ---> プロジェクトフォルダ名 + .dll

![Screen Shot 2019-12-02 at 2.35.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149269/23bfc1c6-d72b-b8c9-e114-1585e0ff6e9c.png)

![Screen Shot 2019-12-02 at 2.55.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149269/575aa6e6-6b95-9a1e-4deb-8300019bff04.png)










「 F5 」を押して、「 Configure Task 」ボタンを押す
tasks.jsonを作成する（基本さわらない）

![Screen Shot 2019-12-02 at 2.36.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149269/bd7d880b-82c1-6a25-f780-f798a20c762a.png)


![Screen Shot 2019-12-02 at 2.36.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149269/73814d9f-97f7-4de8-76de-8974afc2779c.png)

「.Net Core」を選択

![Screen Shot 2019-12-02 at 2.36.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149269/14f484cc-e7da-cb6c-2599-7784462a8ef7.png)


再度、「 F5 」を押してブレイクポイントでとまったら出来上がり！

現場からは以上です
MongoDB で名前を変更する

# データベース名を変更する

MongoDB にはデータベース名を直接変更するコマンドは存在しない。
そのため、通常はデータベースをコピーしてコピー元を削除する。

最新のバージョンでなければ、以下の方法でデータベースをコピーできる可能性がある。

```js
> db.copyDatabase('old_dabatabase', 'new_database')
```

この方法は MongoDB 4.0 までは使えたが 4.2 以降では使えなくなっている。

4.2 以降ではコピー元を `mongodump` して `mongorestore` でデータベース名を変えてリストアする必要がある。
（ `copyDatabase` が提供される前はこの手法が使われていたので、古いやり方に戻ったとも言える）

# コレクション名を変更する

以下のコマンドで `user` から `users` に変更できる。

```js
> db.user.renameCollection("users")
{ "ok" : 1 }
```

コレクション名の変更にはドキュメントの件数は関係なく通常、一瞬で終わる。

# フィールド名を変更する

フィールド名は `$rename` を使えば変更できる。
（データベースの特性上、自然なことだが） こちらは1件ずつ更新が走るためそれなりに時間がかかる。

```js
> db.users.find().count()
10000000
> db.users.update({}, { $rename: { 'nickname': 'alias' } }, false, true)
WriteResult({ "nMatched" : 10000000, "nUpserted" : 0, "nModified" : 10000000 })
```

1000万件のドキュメントに対してフィールド名を変更して、手元の環境では2分弱かかった。
（このあたりの時間は実行環境によって差が大きいと思うし、ローカルでの時間はあまり参考にはならないかもしれない）


ちなみに、コレクションの全件に対してフィールド名の変更を行っている途中に対象のフィールド名を用いた update を行うことで簡単に意図とは異なる処理が実現できる。
たとえば、上記の update コマンドを走らせてからすぐに別のコンソールで update を走らせると以下のようになる。

```js
> db.users.update({nickname: {$exists: true}}, {$set: {has_nickname: true}}, false, true)
WriteResult({ "nMatched" : 9838702, "nUpserted" : 0, "nModified" : 9838702 })
```

変更されたのは約984万件。つまり16万件程度が更新されていないことになる。

## インデックスを貼ったフィールドの名前を変更する

変更対象のフィールドにインデックスが貼ってあっても、特に問題はない。
（し、速くもならない）

また、 `$rename` によってインデックスの情報は更新されない。
つまり、以下のケースでは update 後、どのドキュメントにも存在しないフィールド `alias` にインデックスが貼られている状態になる。

```js
> db.users.createIndex({alias: 1})
{
        "createdCollectionAutomatically" : false,
        "numIndexesBefore" : 1,
        "numIndexesAfter" : 2,
        "ok" : 1
}
> db.users.update({}, { $rename: { 'alias': 'nickname' } }, false, true)
WriteResult({ "nMatched" : 10000000, "nUpserted" : 0, "nModified" : 10000000 })
> db.users.getIndexes()
[
        {
                "v" : 2,
                "key" : {
                        "_id" : 1
                },
                "name" : "_id_",
                "ns" : "sandbox.users"
        },
        {
                "v" : 2,
                "key" : {
                        "alias" : 1
                },
                "name" : "alias_1",
                "ns" : "sandbox.users"
        }
]
```

ちなみに unique index を貼っておくとエラーになる。

```js
> db.users.createIndex({alias: 1}, {unique: true})
{
        "createdCollectionAutomatically" : false,
        "numIndexesBefore" : 1,
        "numIndexesAfter" : 2,
        "ok" : 1
}
> db.users.update({}, { $rename: { 'alias': 'nickname' } }, false, true)
WriteResult({
        "nMatched" : 0,
        "nUpserted" : 0,
        "nModified" : 0,
        "writeError" : {
                "code" : 11000,
                "errmsg" : "E11000 duplicate key error collection: sandbox.users index: alias_1 dup key: { alias: null }"
        }
})
```