OmniAICreator/Qiita-1.07M huggingface dataset:
これ書くだけ！JavaScriptで配列をcsv書き出し

用意した配列を「test」という名前だとします。
だとしたらこれを入れるだけでいいです。

```javascript
var test = ['あああ','いいい','ううう'];

let bom  = new Uint8Array([0xEF, 0xBB, 0xBF]);
let blob = new Blob([bom, test],{type:"text/csv"});
let link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = '作ったファイル.txt';
link.click();
```
ここのコードを書き換えました。[JavaScriptで文字列をファイル出力する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/28206)



補足
---
途中のtext/csvを以下の物にも書き換えれるようです。(audio/mpeg、image/jpegとか)
でもこのためにnew Blobあたりのコードを書き換える必要があると思います。
mozillaに他の書き出し形式もいっぱい書かれているのでぜひ。

https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/81257821-edd4-7a5c-be7f-88c6206d9816.png)
Rustとは？

Rustを始めるにあたってどのような言語であるかを紹介します。
Stack Overflow Developer Survey 2020のMost Lovedに選ばれています。
開発者に愛されているRustはどのような言語か紹介します。

## ツールが充実している
ツールが充実しているので、初学者でもかんたんに環境を構築ができる。
パッケージマネージャであるCargo、インストーラであるrustupなどが非常に使いやすい。

**構築方法**
* [こちら](https://rustup.rs/)にアクセスしコマンドを実行する。
* その後、表示される通り`source $HOME/.cargo/env`を実行する。
    * すると、Rustに必要なCargoやrustc（コンパイラ）がすべてインストールされます。
* あとは`cargo new プロジェクト名`を実行することで開発環境が完成します。

## 実行速度が速い
Rustは実行速度が非常に速いプログラミング言語です。
JavaやPythonより速く、Cに匹敵するほどです。
なぜ、そこまで速度が速いのか紹介します。

### ゼロコスト抽象化
ゼロコスト抽象化は、抽象化を行うと通常なんらかのコストを払う必要がありますが、Rustの場合は抽象化をゼロコストで行うことができます。
ここでいうコストとはメモリの占有率の増加、実行速度の低下などです。
Rustはゼロコスト抽象化を実現することで、実行速度の速さを実現しています。

### 仮想マシンをもたない
Javaは、一度コンパイルする際にJava仮想マシン上で動作する機械語に翻訳します。
それにより、「Write once, run anywhere」を実現しています。
対して、RustはCと同じくコンパイル後の最終結果は機械語に翻訳されます。
直接機械語に翻訳するため速度が速くなります。

### メモリ管理
Javaは、ガベージコレクションをもち不要になったメモリが貯まるとをメモリ開放を行います。
ガベージコレクションを行うことにより実行速度が低下します。
それに対して、Cは手動でメモリを取得し、開放します。
これだと実行速度は速いですが、メモリの取得忘れなど安全性に欠けます。

そこで、Rustは所有権によりメモリを安全に管理しながら、ガベージコレクションをなくすことができました。

## とにかく安全
先述した所有権によるメモリ管理によりメモリの安全性を確保しています。
Chromeの深刻なセキュリティ脆弱性の70％はメモリの問題である。
単純に考えるとメモリの安全性を確保しているだけで、70%の問題は解決することになる。

## 使用例
MicrosoftがRustの安全性を評価し、導入し始めている。
Facebookは仮想通貨のコアLibraを実装した。
IBMがNode.jsのプロジェクトをRustをつかって書き換えている。
DropboxのコアサービスをRustで書き換えている。
AWSでRust開発者の雇用を進めている。

## まとめ
Rustは安全、高速、使いやすいプログラミング言語で近年注目されてきている。
今後、Rustがメジャーな言語になるかも？しれない。
VScodeのGo: Generate Interface Stubsでエラーが出る場合の対処法メモ


## 事象

同一ファイルでstructとinterfaceを定義して、structに対してinterfaceのメソッドを実装するために、`Go Generete Interface Stubs`したところエラーになる。

コマンドパレットから`Go Generate Interface Stubs`を実行。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203061/458c2f8d-c693-0811-8d31-a1f4b90f7aa8.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203061/895212d4-d1b3-95b0-ee3b-6345178c88c9.png)

この時、VSCodeでエラーが出てしまう

```
Cannot stub interface: unrecognized interface go generate interface
```

## 対処法

自分の環境ではこれで直った。

```
go get -u github.com/josharian/impl
```

インストール後、再度`Go Generate Interface Stubs`を試す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203061/895212d4-d1b3-95b0-ee3b-6345178c88c9.png)


今度はstructにインタフェースのメソッドが追加された。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203061/bf072d5c-46b9-ecd2-a654-eacc275e16d0.png)
報連相しないという選択肢

# 報連相しないという選択肢

社会人にとって偉い人に報連相することはとても大事ですが、そうじゃないときもあります。
それが新しいことを始めるときです。

# 新しいことを始めるときは少人数が良い

新しいことを始めるには必ずリクスが伴います。
そんなとき大人数で話し合っていると、反対する人、次々と思いつきを提案してくる人、折衷案を出してくる人、が現れて、そうなるといつまでも話がまとまらず、何も進まなくなったりします。

# 立場上Noと言わないといけない人も

過去に新しい提案をしたときによく言われたのが、「個人的にはやっても問題ないが、やって良いかどうか聞かれてしまうと立場上Noを言わないといけない」というようなことがありました。要するに**「黙認するから勝手にやって」**というようなメッセージでした。

# つまり

何かにチャレンジするとき、あとで怒られないように、すべての偉い人のコンセンサスを取ろうとしがちですが、それだと潰されてしまうかもしれないという現実を受け止め。身勝手に動かないといけないときもあります。
【Go】構造体について

##構造体の定義
さまざまな型をデータ構造のひとつの型として扱うことができます。Goはオブジェクト指向とは違う、メソッドの機能によって型を便利に扱えるような仕組みに設計されています。

一般的に構造体は予約語**type**で型名を与え、任意のフィールドを定義します。

```
type 型名 struct { フィールド定義 }
```

##エイリアスの定義
先であげた予約語typeは、すでに定義されている型をもとに新しい型を定義するための機能です。そのため、下記のようにエイリアスを定義することができます。

```main.go
type (
   Ints    [2]int
   Strings []string
)

func main() {
   i := Ints{5, 10}
   s := Strings{"test1", "test2"}

   fmt.Println(i)  //[5 10]
   fmt.Println(s)  //[test1 test2]
}
```

エイリアスの定義では、同じ型の二つのエイリアスには互換性がないので注意が必要です。

##フィールド定義と複合リテラル
フィールドは下記のように定義します。

```main.go
type Test struct {
   A int 
   B int 
}

func main() {
   t := Test{A: 5, B: 10}

   fmt.Println(t.A)  //5
   fmt.Println(t.B)  //10
}
```

構造体型Testでint型のフィールドA, Bに初期値を指定して定義してます。このようにGoには、初期値を指定し構造体を生成する**複合リテラル**が用意されています。

ちなみに、フィールド定義ではメタ情報を付与する**タグ**という機能があります。

```golang
type Test struct {
   A int "test1"
   B int "test2"
}
```

プログラムの実行には影響しませんが、jsonパッケージを使用するプログラムのなどで有効に活用されます。

##構造体の埋め込み
構造体に構造体型を定義するパターンがあります。

```main.go
type Test1 struct {
   A int
   B int
}

type Test2 struct {
   A int
   Test1 Test1
}

func main() {
   t := Test2{
      A: 5,
      Test1: Test1{
         A: 6,
         B: 12,
      },
   }
   fmt.Println(t.Test1.A)  //6
   fmt.Println(t.Test1.B)  //12
}
```

このように埋め込まれた構造体を変数に指定することで、埋め込んだ構造体型のフィールドに干渉することができます。

上記のプログラムでは、埋め込む構造体型を明示的にフィールド名を与えていましたが、フィールド名を省略しても同じ結果が得られます。しかし、暗黙的なフィールドの場合プリフィックスが無視されてしまうことに注意が必要です。

##組み込み関数new
組み込み関数**new**は、任意の型のポインタ型を生成するときに使用します。

```main.go
type Test struct {
   A int
   B string
}

func main() {
   a := new(Test)

   fmt.Println(a.A)  //0
   fmt.Println(a.B)  //
}
```

##メソッド
メソッドは下記のように定義します。

```main.go
type Test struct {
   A int
   B string
}

func (a *Test) Example() {
   fmt.Printf("%d, %s\n", a.A, a.B)  //5, example
}

func main() {
   b := &Test{A: 5, B: "example"}
   b.Example()
}
```

このプログラムは**a *Test**はレシーバーを表しており、*Test型のメソッドExampleを定義し、変数bにアドレス演算子を使用した複合リテラルで初期化した値を呼び出して、出力しています。
これは、構造体型のポインタを使ったメソッドの定義でしたが、他の型や、エイリアスに対しても定義できる機能を持っています。

###型のコンストラクタ
Goでは、オブジェクト指向プログラミング言語でのコンストラクタ機能に代わって、**New型名**と定義することで型のコンストラクタを表すことができます。


##参考文献
著者　松尾愛賀
[翔泳社　スターティングGo言語](https://www.shoeisha.co.jp/search?search=%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0Go%E8%A8%80%E8%AA%9E)
全集中　スクレイピングの呼吸　+　今週の積み上げ python 学習記録#4,5,6,7

#今週の積み上げ(笑)
更新さぼったけど学習続けております。学習記録自体はエクセルシートに記録してるのでこちらにわざわざ書き込む必要もないかも知れませんが
日に大体3～5時間学習しております。progate　python とhtml cssの初級を学習し、その後paizaの入門レベルを本日終了しました。
ざっくりですが基本的な事は調べたらわかるくらいになったと思います。
で、これからどうすればいいのかなと思いましたがpython始めた一番の理由はスクレイピング、クローピングをしたかったのでudemyで購入した株式会社キカガクさんのpythonによるwebスクレイピング入門編を勉強開始しました。この2、3週間入門編の基礎ばかりだったのでつまらなかったけど今回はめっちゃ楽しいです。環境構築に手間取りましたがｗ
しばらくはスクレイピングに関する知識を集め、作りたいツールが２,３個あるのでそれができるようになるまでは　全集中　スクレイピングの呼吸　じゃなくて　全集中常駐でいこうと思います。
画像の読み込み中にローディングマークを表示させる

# はじめに
APIから画像を取得する時、読み込みが遅いと画像がある部分が空欄になる。
そこに画像が表示されることを分かりやすくするため、ローディングマークを表示させる。

# loading.gifを背景に設定
https://www.benricho.org/loading_images/transparent01.html

こちらのサイトから透過済みのフリー画像を保存。
背景画像にloading.gifを設定し、メイン画像が表示されるとloading.gifが隠れるようにする。

# コード
`image`にAPIから取得した画像URLが入る。

```html
<div style="background-image: url('images/loading.gif'); background-repeat: no-repeat;
  background-position: center center; min-height: 50px;">
  <img :src="image">
</div>
```


# 参考サイト

https://cpoint-lab.co.jp/article/201802/1574/

https://www.benricho.org/loading_images/transparent01.html
Androidアプリで端末の言語設定を取得する

#はじめに
Androidアプリで端末の言語設定を取得する。
使用したプラグイン`cordova-plugin-globalization`。

#コード
プラグインをインストールする。

```
cd src-cordova
cordova plugin add cordova-plugin-globalization
```

コード

```javascript

document.addEventListener("deviceready", function(){
    window.navigator.globalization.getPreferredLanguage (
      function(language) {
        let deviseLang = language.value;
        console.log(deviseLang)
      }
    )
}
, false);
```

app/res/xml/config.xmlに下記を追加する。

```html
<feature name="Globalization">
    <param name="android-package" value="org.apache.cordova.globalization.Globalization" />
</feature>
```

#参考サイト

https://cordova.apache.org/docs/ja/3.1.0/cordova/globalization/globalization.getPreferredLanguage.html

https://www.npmjs.com/package/cordova-plugin-globalization

https://cordova.apache.org/docs/ja/3.1.0/cordova/globalization/globalization.html
Androidアプリでリンクを開けるようにする

#はじめに
Cordovaプラグインを使用して、Androidアプリでリンクを開けるようにする。
使用したのは`cordova-webintent`。

https://github.com/cordova-misc/cordova-webintent

iOSでは`InAppBrowser`を使用する必要がある。

#コード
src-cordovaディレクトリにインストール。

```
cd src-cordova
cordova plugin add github:cordova-misc/cordova-webintent.git
```

関数を作成。

```typescript
openLink() {
  window.plugins.webintent.startActivity(
    {
      action : window.plugins.webintent.ACTION_VIEW
      ,url   : 'https://~~~'
    }
    ,function(){}
    ,function(){ alert ('Failed to open URL via Android Intent'); }
  )
}
```

TypeScriptでエラーが出る場合は、declareを使う。

```typescript
declare let window: any;
```


#参考サイト

http://phonegap-plugins.com/plugins/tunts/webintent

https://github.com/cordova-misc/cordova-webintent

https://www.it-swarm-ja.tech/ja/typescript/typescript%E3%81%A7%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E5%A4%89%E6%95%B0%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B/827152631/
moment.jsで「〜時間前」を表示させる

#はじめに
moment.jsを使用して、指定時刻から計算して「〜日前」「〜時間前」を表示させる。

#moment().fromNow()
###import
```
import Moment from 'moment';
```
指定した時刻から現在の時刻までの差を計算する。

```javascript
Moment('2020-01-01T10:10:30.900Z').fromNow();
```

#言語を設定する
このままでは「〜hour ago」など英語で表示されるので、言語を設定する。

```javascript
Moment.locale( 'ja' );
```

#時差をなくす
このままでは、UTC(世界標準時間)が適応され、日本からは＋9時間の時刻が表示される。
moment-timezoneを使用する。

###install
```
npm install moment-timezone
```

###import
```javascript
import MomentTimezone from 'moment-timezone';
```

###UTCの時刻を取得
```javascript
let dateTimeUtc = MomentTimezone.tz('2020-01-01T10:10:30.900Z', 'UTC');
```

###デバイス（ブラウザ）で設定されているタイムゾーンを取得
海外でも使用する可能性があればデバイス（ブラウザ）で設定されているタイムゾーンを取得する。
日本のみで使用の場合は不要。

```javascript
let deviceTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
```

###指定したタイムゾーンに変換
デバイス（ブラウザ）と同じタイムゾーンに変換。

```javascript
let upDate = MomentTimezone(dateTimeUtc).tz(deviceTz).format('YYYY-MM-DDTHH:mm:ss.sssZ');
```

日本のみで使用の場合は'Asia/Tokyo'を直接入力。

```javascript
let upDate = MomentTimezone(dateTimeUtc).tz('Asia/Tokyo').format('YYYY-MM-DDTHH:mm:ss.sssZ');
```

###moment().fromNow()に入れる
```javascript
let lastUpDate = Moment(upDate).fromNow();
```

#まとめ
```javascript
import Moment from 'moment';
import MomentTimezone from 'moment-timezone';

// 言語を日本語に設定
Moment.locale( 'ja' );
// デバイスのタイムゾーンを取得
let deviceTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
// UTCの時刻を取得
let dateTimeUtc = MomentTimezone.tz('2020-01-01T10:10:30.900Z', 'UTC');
// 指定したタイムゾーンに変換
let upDate = MomentTimezone(dateTimeUtc).tz(deviceTz).format('YYYY-MM-DDTHH:mm:ss.sssZ');
// 「〜日前」「〜時間前」を表示
let lastUpDate = Moment(upDate).fromNow();
```


#参考サイト
https://stackoverflow.com/questions/53017772/moment-js-parse-date-time-ago

https://www.key-p.com/blog/staff/archives/105932

https://blog.officekoma.co.jp/2019/08/nodejsmomentjs.html

https://www.it-swarm-ja.tech/ja/javascript/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8B%E3%82%89%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%BE%E3%83%BC%E3%83%B3%E3%82%92%E5%8F%96%E5%BE%97/940656841/
Vue.js + moment.jsで、時刻をリアルタイム更新する方法

#はじめに
Vue.jsとmoment.jsを使用して、時刻をリアルタイムで更新する時計を作る。
本文ではTypeScriptを使用。

#moment.jsをインストール
```
npm install moment
```
#開発コード
インポートする。

```javascript
import Moment from 'moment';
```

###Moment().format()を使用
表示形式は自由に選択できる。

https://qiita.com/taizo/items/3a5505308ca2e303c099


```javascript
time = Moment().format("YYYY-MM-DD HH:mm:ssZ");
```

###setIntervalを使用
createdの中にsetIntervalを入れる。1秒毎に新しい時刻を取得。

```javascript
created() {
  setInterval(() => {
    this.time = Moment().format("YYYY-MM-DD HH:mm:ssZ");
  }, 1000)
}
```

#参考サイト

https://python5.com/q/cmwywkvz
【Apex】ナビゲーション演算子によるNullPointerException回避

今回はSalesforceのWinter21でリリースされるナビゲーション演算子についての簡単に使い方をまとめました。

#ナビゲーション演算子とは

Winter21でリリースされた機能として、[ナビゲーション演算子](https://releasenotes.docs.salesforce.com/ja-jp/winter21/release-notes/rn_apex_SafeNavigationOperator.htm?edition=&impact=)がリリースされました。

ナビゲーション演算子はNull条件演算子などと称されることもあり、C#やRubyなどを使用している方はお馴染みかもしれませんが、それがApexでも実現できるようになりました。

ナビゲーション演算子はポインタ型の変数に対して、Nullでなければ第二項の結果を返し、NullであればそのままNullを返す演算子となります。
これにより、今まで気を使っていたポインタ変数に対してのNullチェックをナビゲーション演算子を使うことによって1文で記述することが可能になります。

#使い方
ナビゲーション演算子は『**?.**』という形で記述します。 
ナビゲーション演算子は使い方を簡単に例にしてみました。

例）Accountの変数accに対して、NameをaccName(String)にセットする場合

今まではこのように、オブジェクト変数のNullチェックが必要でした。
（Nullチェックをせずに直接Nameを参照しようとすると、NullPointerException）

```
Account acc = null;
String accName = null;
// Accountに対するNullチェックが必要だった
if(acc != null){
	accName = acc.Name;
}
```

ナビゲーション演算子によって、以下のように1文で取得することが可能になります。

```
Account acc = null;
// ナビゲーション演算子を使うと1文で記述することが可能
String accName = acc?.Name;
```

実際にデバッグで調べてみましょう。
以下のコードをOpen Execute Anonymous Windowで実行してみます。

```
// AccountをNullにしてName取得
Account acc = null;
System.debug('Account Name is ' + acc?.Name);

// Accountに値を設定してName取得
acc = new Account(Name = 'test');
System.debug('Account Name is ' + acc?.Name);
```

結果はこのようになりました。
![スクリーンショット 2020-11-22 21.46.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699607/f144dee9-7893-3e44-9402-cb3bab65b0e7.png)

このようにAccountがNullであってもNullPointerExceptionが起きることなく、結果をNullで返してくれるということが分かりました。

今回はオブジェクト変数での検証となりましたが、List型や配列などでも使用可能ですので、今後はNullPointerExceptionを恐れることなくバンバン使っていきましょう！
【Swift】画面遷移先に変数を渡したい

# どういうことか

遷移前の画面で定義した変数を遷移先の画面に渡したい。

## 渡す

`prepare` のメソッドを書いて値を渡す準備をする。
`prepare` と書いて出てきたものを選択すると自動補完してくれる。

![スクリーンショット 2020-12-05 20.05.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413699/37045009-444b-de9f-90a2-cf5ba2486ce3.png)

```swift:ViewController.swift

  // 渡したい変数
  var face = "(´・ω・｀)"

  override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

    // 遷移先のコントローラ名を書く。ここではNextViewController
    let nextVC = segue.destination as! NextViewController
    
    // 受け取る先で定義する変数名（後述）に渡したい変数を代入する  
    nextVC.nextFace = face
  }
```

## 遷移先で受け取る

```swift: NextViewController.swift

  // 例えばLabelを設置しておいてそこで受け取る
  @IBOutlet weak var nextLabel: UILabel!
  var nextFace = ""

  override func viewDidLoad() {
        super.viewDidLoad()

      nextLabel.text = nextFace
    }
```

この記事の場合だと遷移先の画面に設置したLabelに `(´・ω・｀)` が表示される。
実用的なところでは計算した答えとか遷移先に渡すとかがいいと思う。
OpenID Connect

#OpenID Connect
OpenID Connect Core 1.0のこと。

OAuth2.0を拡張したもの。OAuth2.0は認可のみの仕様であったため認証に関しては定義されていませんでした。

OpenID Connectは OAuth2.0をベースに認証部分の仕様を策定しました。

OAuth2.0は「RFC 6749」で定義されています。

RFC 6749：　https://tools.ietf.org/html/rfc6749

OpenID Connectは RFCで定義されていないみたいですね。

仕様は以下。

OpenID Connect：　http://openid-foundation-japan.github.io/openid-connect-core-1_0.ja.html#UserInfo


#目的
認証、認可、SSO(シングルサインオン)、ID連携

 

#概要
エンドユーザが IDプロバイダー上で認証を行い、生成された IDトークンをアプリ上で利用します。

アクセストークンも払い出しできます。



#用語
|No|用語|	説明|
|---|---|---|
|1|OpenID Provider(OP)|IDトークン等をRP側に提供する|
|2|Relying Party(RP)|IDトークン等をOP側に要求する|
|3|ID Token|JSON形式の Web Token(JWT)、認証用のトークン|
|4|Access Token|アクセストークン、認可用|
|5|UserInfo Endpoint|Clientは  Access Token を用いて UserInfo Endpoint にEnd-User の Claim を要求する|
|6|Claim|IDトークンのユーザ属性情報|
|7|Issuer| |	 
 


#フロー
|No|Response_type|Flow|	備考|
|---|---|---|---|
|1|code|Code flow|
|2|id_token|Implicit flow|
|3|id_token token|Hybrid flow|
|4|code id_token|Hybrid flow|
|5|code token|Hybrid flow|
|6|code id_token token|Hybrid flow|
 	 	 	 
#Implicit flow
主にスクリプト言語を用いて実装されブラウザ上で動作する Client によって使用される

Implicit flowの場合、Token Endpointは利用されない。すべて Authorization Endpointからトークンが返される。

response_typeに「id_token」が利用される場合は ID Tokenのみ返却される。Access Tokenは返却されない。

「3.2.  Authentication using the Implicit Flow」

 

 

#response_type
“code”、”token”はOAuth2.0の仕様。”id_token”はOpenID Connectの仕様。id_tokenを指定した場合は、IDトーンのみ返却される。「response_type」の値で何を返却されるかがわかる。

 

#scope
OpenID Connectの場合、scopeに”openid”を含める必要がある。scopeに”openid”が無い場合は、OAuth2.0の動作となる。

OAuth2.0の場合は、アクセストークンのみでIDトークンは提供されない。

 

#ID token Validation
Clientは ID Token の署名を, JOSE Header 中の alg Header Parameter で指定されたアルゴリズムを使い, JWS [JWS] に従って検証しなければならない (MUST).

nonce Claim の値が Authentication Request にて送られたものと一致することを確認しなければならない (MUST). Clientは nonce の値をリプレイアタック対策のためにチェックすべきである (SHOULD). リプレイアタック検知方法の詳細はClientによって異なる.
 

 
 

#OP(OpenID provider)
- OSS
 - OpenAM　・・・入手が少し面倒
 - KeyCloak
- サービス
 - Yahoo
 - Google
 - AzureAD
 - Auth0


#RP(Relying Party)
- 実装方法
 - Nodejs+express
【自主学習の記録 part2】Git LFSの実験

#Git LFS
前回Git LFSについて学習しましたが、試してみたい事を思いついたのでやってみました。

##LFS管理対象ファイルが格納されたディレクトリを移動した場合
LFSで管理されたファイルの実体は、プロジェクトのディレクトリとは異なる場所に格納されています。
この実体ファイルが格納されたディレクトリを例えばGitの移行作業時の移行漏れが発生してしまった場合等により参照できなくなった場合どうなるか試してみました。
まず以下プロジェクトに格納されているLFS管理対象のpngファイルをクリックします。
![GitLab01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/4d79b0f9-dd57-2504-c9c6-68fcdee31cd1.png)
pngファイルの中身は以下の通りです。
以前の記事で使用した画像ファイルとなっています。
![GitLab02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/ea071ef5-2cfc-852e-3410-9d21ca5e47dd.png)
次に現在LFS管理の実ファイルの場所をサーバー上で確認します。
場所は環境によって異なるかもしれませんが、私の場合はデフォルトのまま変更していませんでしたので以下の場所に格納されています。

```
/var/opt/gitlab/gitlab-rails/shared/lfs-objects
```

中身はこうなっていました。

```
[root@localhost ~]# ll /var/opt/gitlab/gitlab-rails/shared/lfs-objects/
合計 0
drwxr-xr-x. 3 git git 16 11月 29 19:38 7e
drwxr-xr-x. 3 git git 16 12月  6 15:41 94
drwx------. 5 git git 46 11月 29 19:38 tmp
```

上記```lfs-objects```ディレクトリはGitLabの設定ファイル```gitlab.rb```のlfs_storage_pathというセクションで参照されています。
該当の設定を表示したい場合は、以下のコマンドを実行します。

```
cat /etc/gitlab/gitlab.rb | grep lfs_storage_path
```

上記コマンドで表示されたLFS管理対象ファイルの実ファイル格納先ディレクトリ名```lfs-objects```を一時的に下記の通り```lfs-obj```という名前に変更してみました。

```
mv /var/opt/gitlab/gitlab-rails/shared/lfs-objects /var/opt/gitlab/gitlab-rails/shared/lfs-obj
```

この状態でGitLabのプロジェクト画面から対象のpngファイルを開いてみます。
すると以下の通りファイル名しか表示されていない状態となりました。
予想では404エラーあたりが表示されるかと思っていましたが特にエラー画面にはならずに破損ファイル？として表示はされたようです。
![GitLab03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/bb36dd79-bf52-e068-90df-ccf2ed30d766.png)
この状態でクローンしてみました。
すると以下の通りpngファイルのダウンロード時にエラーが表示され、クローンに失敗しました。
![GitLab04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/837d0f2d-130b-7108-fec3-77fe4adb7991.png)
LFSのディレクトリが無いので怒られているのでしょうか。
ひとまず先程リネームしたディレクトリ名を元に戻してみます。

```
mv /var/opt/gitlab/gitlab-rails/shared/lfs-obj /var/opt/gitlab/gitlab-rails/shared/lfs-objects
```

上記コマンド実行後に再度GitLab上のプロジェクトからpngファイルを開いてみましたところ、正常に画像が表示されました。
特に見た目に変化は見られませんが、以下は```lfs-objects```ディレクトリ名を元に戻した後の画面となります。
![GitLab05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/e7982ded-f1ab-2b91-63ae-ed8c22909b0c.png)
次にGit Bashから再度クローンを実施してみます。
今度は特にエラーなく完了しました。
![GitLab06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/118ee72f-832a-9e44-3b30-b1bba66e0ebd.png)
以上で実験は終了です。
次回はまだ検討中です。
Flutterで勤怠管理アプリを作ってみた

会社の勉強会でFlutterを勉強することになり、勤怠管理アプリを作ってみたので記載します。

<b>アプリ概要</b>
　アプリ上のボタンで出勤時刻、退勤時刻を記録する
　日々の勤怠をリストで表示

<dl>
  <dt>「勤怠管理」画面</dt>
  <dd>ボタンを押して出勤時刻、退勤時刻を記録する</dd>
  <dd>出勤時刻、退勤時刻のデータはCloud Firestoreに登録する</dd>
</dl>

<dl>
  <dt>「勤怠リスト」画面</dt>
  <dd>Cloud Firestoreから登録された日付、出勤時刻、退勤時刻をリストで表示する</dd>
</dl>

画面遷移はドロワーから実行する

以下がAndroidエミュレータでの動作画面とCloud Firestoreのデータ画面

![勤怠管理.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780047/e852b362-0e7a-2d22-e880-dfa27c9ac9ea.gif)

## 「勤怠管理」画面
起動するとこの画面
1番上の日付は1秒ごとに変化、テキストはGoogle Fontsプラグインを使用し「[Anton](https://fonts.google.com/specimen/Anton#standard-styles)」を適用

<dl>
  <dt>出勤ボタンを押すと以下のイベント</dt>
  <dd>出勤ボタンのテキストを退勤にする</dd>
  <dd>出勤ボタンが押されたタイミングの時刻を出勤時刻に設定</dd>
</dl>

<dl>
  <dt>退勤ボタンを押すと以下のイベント</dt>
  <dd>退勤ボタンのテキストを出勤にする</dd>
  <dd>退勤ボタンが押されたタイミングの時刻を退勤時刻に設定</dd>
</dl>

<dl>
  <dt>勤怠登録ボタンを押すと以下のイベント</dt>
  <dd>日付、出勤時刻、退勤時刻をCloud Firestoreに登録</dd>
  <dd>登録完了のダイアログ表示</dd>
</dl>

<dl>
  <dt>勤怠クリアボタンを押すと以下のイベント</dt>
  <dd>出勤時刻、退勤時刻を初期値に設定</dd>
</dl>

## 「勤怠リスト」画面
勤怠のリストはListTileで実装
Cloud Firestoreから登録された勤怠データを取得し、タイトルに日付、サブタイトルに出勤時刻と退勤時刻を設定
element ui el-popover を繰り返す

表題の通り。

elementui の el-popoverを繰り返したい。

```hoge.vue

<div v-for="(v,key) in list">

        <el-popover
                placement="top"
                width="160"
                v-model="visible[key]">
            <div>
                <el-button @click="visible[key] = false" size="mini" type="text" style="color: #666;">既読にする</el-button>
            </div>

            <el-button slot="reference" size="mini" type="text" style="color: #666;" @click="visible[key] = true"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></el-button>
        </el-popover>
</div>


//略

data () {
    return {
        visible:[]//[]にするのが味噌

```

こんな感じ。
君の名は

# 命名規則大事な話

プログラミングの上でクラス名、関数名、変数名など命名するタイミングが有ると思いますが、可読性を上げる上で一番じゃないかというくらい大事です。

これがいい加減だったり間違っていたりするとバグの温床になります。

# 命名は長すぎず略しすぎず

プログラミングする上で開発速度をあげるためにクラス名、変数名を略したいときがあります。変数名で`secondary_organization_name`とかあまり使いたくないですね。長いとそれだけtypoの温床になりますし。
かといってそれを`son`とか`s`とか略してしまうのは考えものです。ソースコードの途中でそれを見かけたときに、知らない人がぱっと見でそれが何かを推測できません。せめて`sec_org_nm`とか推測できる略称が良いでしょう。
略したり、しなかったりは実際にプログラムに出現する頻度で分けると良くて

- あまり書くことがないテーブルのカラム名やクラス名は略さずフルの英語名
- 頻繁に書く変数などは略称

と使い所を分けると良いです。
ただ、やはりなるべく同じ名称は同じ文字列が表せるのが良くて、上の例のようにあまりに長すぎる以外は、略さず使うのが良いと思います（`member_name`を`mem_nm`にしたりとか）。

# 命名規則はコーディングルールを決めてチームで共有しておくべき

チームで開発する場合、命名規則を表にしておくと、命名に個性が出過ぎなくて可読性が上がります。

| 名称 | 総称 | 略称 |
|:-:|:-:|:-:|
| 会員名  | member_name  | member_name |
|  組織名 | organization_name  | org_name  |

# 変数名は英語で付けましょう

某有名サイトの日付パラメータで`f_nen1=2020&f_tuki1=12&f_hi2=10`と日本語のローマ字書きを使っていたりしますが、プログラミングは基本的に英語なのに日本語のローマ字読みが来ると可読性が下がります。一般名詞はなるべく正しい英語を使いましょう。英語の勉強にもなりますし。

# 使い方を変えたら名前も変えて

仕様変更やリファクタリングで、関数や変数の使い方が途中で変わる場合は横着せず名前も正しい名前に変えましょう。一番やっちゃ行けないのが、変数名そのままで全く逆の意味にしてしまうことです。
`except_flag`という変数があった場合「Trueの場合除外対象にするのかな？」と想像してしまいますが、途中で仕様が変わって逆に「Falseの場合に除外する」仕様に変えた場合に変数名そのままだと、後に引き継いだエンジニアが気付かず逆の意味のまま使ってしまうかもしれません。

# つまり

ハンガリアン記法はダサいからやめようぜ。
google-cloud-rubyがなぜかPythonを呼び出している件について

BigQueryの運用を行っていると定期的に無駄なテーブルを削除することは良くあると思います。
テーブル数が少ない場合はwebからぽちぽちと削除するので対応可能ですが、テーブル数が多い場合はスクリプトを作って削除したほうが楽です。

最初は以下のようなスクリプトを書いていたのですが、削除対象のテーブル数が膨大なため、なかなか終わりませんでした。
※ロギング部分は省略

```ruby
require 'google/cloud/bigquery'

table_names = [削除したいテーブル名の配列]
project_name = プロジェクト名
dataset_name = データセット名

table_names.each do |table_name|
  bq_client = ::Google::Cloud::Bigquery.new(project: project_name)
  dataset = bq_client.dataset(dataset_name)
  table = dataset.table(table_name)
  table.delete
end
```

テーブルの削除処理はクライアントサイドのCPU・メモリーをほぼ使わず、ほとんどの待ち時間がBigQuery側での処理待をポーリングしているだけであるため、parallelというgemを使って並列化しました。
https://github.com/grosser/parallel

Rubyのマルチスレッド処理の実装はGVLによって同時に実行されるスレッドが1つだけになってしまっていますが、IO系のブロッキング処理に対してはGVLの解放をするので、今回のケースでは高速化が見込まれます。

```ruby
require 'google/cloud/bigquery'
require 'parallel'

table_names = [削除したいテーブル名の配列]
project_name = プロジェクト名
dataset_name = データセット名

::Parallel.each(table_names, in_threads: 30).each do |table_name|
  bq_client = ::Google::Cloud::Bigquery.new(project: project_name)
  dataset = bq_client.dataset(dataset_name)
  table = dataset.table(table_name)
  table.delete
end
```

これで、爆速になると思いプログラムを実行したところ、一瞬でCPU使用率が100%に張り付きました。
あまりにもこのプログラムがCPUを使うせいで、discordで通話中の相手から「やたらエコーかかっているんですが、風呂場で仕事してます？」と言われてしまいました。
discordはクライアントサイドで音声のノイズ除去などの信号処理をしているらしいというムダ知識が1つ増えました。

さて、あまりにもCPUを使いすぎるので、ちょっと気になってdtraceでシステムコール呼び出しの様子を調べてみたら、大量のforkが呼ばれていました。
どんなサブプロセスを生成しているのかを確認するために、`top` コマンドを実行したところ、なぜかRubyが大量のPythonを呼び出していることが分かりました。
CPUが100%になる原因はこれです。

では、google-cloud-rubyのどこコードがPythonを呼び出しているのでしょうか？
ソースコードを確認していたら見つかりました。

https://github.com/googleapis/google-auth-library-ruby/blob/master/lib/googleauth/credentials_loader.rb#L178

```rb
gcloud_json = IO.popen("#{gcloud} #{GCLOUD_CONFIG_COMMAND}", &:read)
```

このpopenメソッドの第一引数は部分は最終的に `gcloud config config-helper --format json --verbosity none`になります。
gcloudコマンドはPythonで実装されているため、このpopenによってPythonが呼び出されていました。

この処理はGCPクライアントインスタンスの初期化をする際に呼ばれる処理で、システムデフォルトの認証情報を取得するものです。

`::Google::Cloud::Bigquery.new` をループの中で毎回呼び出す必要はなかったので、ループの外に出して1回だけ呼ばれるようにしました。

```ruby
require 'google/cloud/bigquery'
require 'parallel'

table_names = [削除したいテーブル名の配列]
project_name = プロジェクト名
dataset_name = データセット名

bq_client = ::Google::Cloud::Bigquery.new(project: project_name)

::Parallel.each(table_names, in_threads: 30).each do |table_name|
  dataset = bq_client.dataset(dataset_name)
  table = dataset.table(table_name)
  table.delete
end
```

これにより、CPUが100%に張り付くことはなくなり、またテーブルの削除速度も大幅に向上しました。
dxlibでマルチプラットフォームの同時開発は行えるのかどうか

　前回までの記事と同じように書いていきたいと思います。今回は、今までとは雰囲気が違います。
　dxlibではたくさんの環境向けに開発できるようになりました。

- Windows
- Android
- iOS
- Nintendo Switch™
- PlayStation®4
- PlayStation®Vita

が対応関数に差がありますがdxlibを使ったプログラムが動く環境です。（非公式にはHTML5版もなくはないですが、非公式である以上まだ触れないでおきます。）
　そこで、dxlibで複数の環境向けを同時に開発できる開発環境を構築できないかなと思いました。
　なお、この記事は方法の考案が主になっています。ここで提案されている開発環境は実際に試したわけではありません。もし試した人がいたら結果を教えてください。
#1.対応させる環境
　この記事では、できればもっと多くの環境を対応とさせたかったですが、上で書いた環境のうち、WindowsとAndroid向けに同時開発することを目指します。二つだけだとダメという人もいるかもしれませんが、iOS向けにはvisualstudioでc++で開発する方法が見つからないし、その他の環境に至ってはそもそも開発方法が一切わかりません。なのでWindowsとAndroid向けを目指したいと思います。
#2.同時に開発する方法の模索
　まず、矛盾するようですが、dxlibは同時開発に非対応です。というのも当たり前で、一般的にUnityがマルチプラットフォーム開発で有名だと思いますが、あれは開発環境が最初からそう作られている上に、Unityの場合はmonoというc#でたくさんの環境の開発を行えるのを使っている（書いているときに一応調べたらmono以外を使うときもあるようですね.NET、IL2CPP、Burstが調べてて出てきました。けど基本的なことは変わらないはず。）からできることです。
　一方で、dxlibは、WindowsとAndroidは同じvisualstudioを使うといっても、内部で行われていることは全く別ですし、ライブラリも別に用意されています。同時開発するのも難しいでしょう。
#3.あれじゃあ結局同時開発はできない？
　最近、ネットで面白いものを見つけました。Uno platform（これ自体は2018年からあるようです）というものです。先ほど少し話したmonoを使ったvisualstudioで複数の開発向けに同時に開発できる環境です。C＃でUWP、Android、iOS、Webの同時開発ができます。先ほど、内部で行われていることは全く別といいました。じゃあどうやっているのかと。じゃあどんな仕組みなのか説明します。
#4.Uno platformの仕組み
　仕組み自体は単純で、環境ごとに複数のプロジェクトを作っています。
　まず重要なのは、visualstudioの機能です。visualstudioはプロジェクトの上の単位として、ソリューションというのがあります。要は複数のプロジェクトを一つにまとめるものです。
　Uno platformは一つのソリューション上で複数のプロジェクトを用意して、それぞれビルドしたい環境に合わせてプロジェクトを選択してビルドするようになっています。
　そして存在している複数のプロジェクトの中に、Sharedというのがあります。コードを主に書くプロジェクトです。このプロジェクトで作成したソースコードをもとに他のプロジェクトでビルドを行っています。これこそが同時開発できる秘密です。
#5.本記事で用いる方法
　ということで、このUno platformの仕組みを参考に、dxlibによる同時開発が行えないか試していきたいと思います。
　方法を簡単に説明すると、プロジェクトを三つ用意します。まずコード記述用のプロジェクト。次にWindows用のプロジェクト、最後にAndroid用のプロジェクト。で、Windows用のプロジェクトとAndroidのプロジェクトでそのソースコードを参照するようにするというものです。ただエントリポイントが違うのでそこをどうにかするためにちょっと作業が必要になります。
#6.具体的な環境のの構築
　まず必要なものとして、

- visualstudio（多分2017でも2019でも同じ方法が使えるはず）
- androidSDK
- dxlib（Windows版とAndroid版が必要です。ただしヘッダーファイルは消してください。android版のは使うので取っといてください）

があります。
　早速具体的な方法を説明します。といってもここで説明するより公式の説明の方法の方がわかりやすいと思うので具体的といっても公式のページに載ってないところになります。
1.　c++のプロジェクトを作る。本来はc++が使えればどのプロジェクトでもいいはずですが一応WindowとAndroidどっちでもいいので用意します。そして、プロジェクトにdxlibのandroid版のヘッダーファイルを追加します。内部で読み込んでいるので拡張子がhの物全部です。そしてcppファイルを追加します。この中に主にソースコードを書いていきます。この時、winmainでもandroid_mainでもなくmain関数の中に記述します。（返り値をintにします）
2.　main.hを追加して、先頭でincludeします。
3.　main.hの中身を

```cpp
int main();
```
にします。
4.　Windows用にdxlibの開発環境を作る（この時1のプロジェクトと同じソリューションになるように、新しいプロジェクトを作るときのダイアログの下の方で指定します）
5.　android用にdxlibの開発環境を作る（この時1のプロジェクトと同じソリューションになるように、新しいプロジェクトを作るときのダイアログの下の方で指定します）
6.　Windows用プロジェクトで、cppの中身を

```cpp
#include "main.h"
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
	return main();
}
```
にします。
7. 1で作成したプロジェクト内のソースコードを参考できるようにします。ソリューションエクスプローラーの参照を右クリックして、参照の追加をクリックします。左側からソリューションをクリックして、ソースコード記述用のプロジェクトを追加します。
8. android用プロジェクトでcppの中身を

```cpp
#include "main.h"
int android_main( void )
{
	return main();
}
```
にします。
9. 7と同じことをやります
以上でプロジェクトの設定は終了です。
　こちらの考えが正しければ後は、各環境用のプロジェクトをそれぞれビルドすればいけるはず。
#7. まとめ
　今回の記事では今までの記事とは違い、マルチプラットフォームの同時開発の方法の提案をしてみました。もし実際に試した人がいたら報告ください。
サーバーサイドとクライアントサイド

#この記事について
phpを勉強していた中で調べたサーバー、クライアントについて書きましたので私と同じような初心者の方の役に立てたら幸いです。
#サーバーサイドとクライアントサイド
それぞれの違いは**プログラムの実行場所がサーバーか端末かの違いです。**プログラムの実行場所とはいわゆる、コードがどこで処理されるかということです。アクセスしたサーバー側でプログラムを実行した場合サーバーサイドのプログラムと言い、アクセスした端末でプログラムの処理を実行した場合クライアントサイドのプログラムと言います。
では、各々の特徴を見ていきましょう。
#サーバーサイド

* まず1つ目は、**情報の保守性が上がることです。**サーバー側で動作しているのでクライアント側からでは基本的にソースコードを見ることができません。なので動作内容がわからないというのは、扱う情報の安全性が守られることにつながります。
* 2つ目は、**サーバー側で処理を行うのでデータベースに保存されているユーザー情報の取得や、新たに追加することが可能になるということです。**これらができることにより、ユーザーのアカウントの新規登録や、ユーザーごとに表示する情報を変化させることができます。

これらの特徴があります。サーバーサイドで使われる主な言語として**PHP**が挙げられます。

#クライアントサイド

* 1つ目は**サーバーにある情報を要求し受け取っていることです。**普段使用しているPCやスマートフォンがそれにあたります。googleなどのブラウザを通じ、サーバーにアクセスを行いプログラムの結果を反映させていたりします。
* 2つ目は**WEBの見た目を調整する際に使用されるということです。**ページを表示した際に出てくる、デザインされた色やタイトルまたは、アニメーションなどは全てクライアントサイドで処理されたものです。

これらが特徴で挙げられます。そして、クライアントサイドの主な言語として**Java Script**があります。

#まとめ
サーバーサイド、クライアントサイドについて見てきましたがそれぞれに特徴があり、メリットデメリットがあると思います。作成したいものにあったものが使えるように2つの判別はしっかりできるようになっておくとできることも広がると思います。
Google Photos上の写真を誰でもかんたんにMarkdownドキュメント上に貼り付ける話

こんにちは、ポキオです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212109/6186350a-5712-49e7-bd22-9f65ba87e5cd.png)

[IoTLTアドベントカレンダー](https://qiita.com/advent-calendar/2020/iotlt)の7日目を担当させていただきます。画像は一切関係ありませんが、2020年に執筆したブログの記事から、反響が大きかったものを内容[^1]を再編集してお送りしたいと思います。




## tl;dr

- Google Photosにアップした写真への直リンクを取得するツールを作成
- Markdown記法に則った画像埋め込みコードも作成可能
- 誰でも自由に使えるので、ぜひご利用ください
- https://bit.ly/3dYB5Yd

## アウトプット、してますか？

Tech系でなくとも、個人的にはブログやドキュメントは文字ばっかりより、画像を効果的に使っている記事が大好きで、特にIoTLTに興味がある諸兄姉は常日頃習得したテクニックをブログなどでアウトプットしていることでしょう。

今回作成したWebアプリ[^2]を使うと、Google Photosにアップした写真への直リンク（っぽいもの）を取得し、そのままMarkdownなドキュメントに画像埋め込みができるような文字列に変換してくれる便利なツールなのです。



## どうやって使うの？


まずは、Google Photos上の写真で埋め込みたい画像を選択して表示をします。


![Screen Shot 2020-12-06 at 17.27.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212109/9978f879-5cb6-0f8a-a08b-384d4c58bd00.png)



右上あたりの共有ボタンから、[リンクを作成]から[共有リンクの作成]を行い、URLをコピーします。


![Screen Shot 2020-12-06 at 17.24.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212109/a7af1bf5-c67a-8df6-e7bc-88de27978290.png)


次に、例のツールを開きます。

- https://bit.ly/3dYB5Yd

![Screen Shot 2020-12-06 at 17.32.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212109/29a0e9f7-eb50-a247-bee7-e8f7d1f1b553.png)


先程の共有リンクをツールの[URL]に入力します。オプションで、サイズ（単位はピクセル、長辺が指定された数値以下になるようになります）、代替テキスト・画像タイトル（Markdown記法やHTML記法で使われます）を入力します。


そして[変換]を押すと、

- 画像へのリンク
- Markdown記法
- HTML記法

の文字列が自動で生成されます。これをお好きなドキュメントに貼り付けるだけ！


## どういう仕組み？

Webページと裏のロジックはすべてGASで記載しています。入力されたURLにアクセスし、HTMLソースの最初の方にある**Open Graph Protocol**で書かれているアイキャッチ画像のURLを取得します。

このURLはGoogleログイン不要で、だれでもアクセスできるURLになっているので、これをベースに文字列を変換し、ツール上に表示させています。詳しくは、[こちらのブログ](https://relativelayout.hatenablog.com/entry/2020/05/17/141937)をご覧ください。



## 最後に

今年はいろいろなことがありました。オフラインの勉強会も少なくなって、少しさみしい気持ちは否めませんが、こんなときこそこのツールをつかって、ブログやQiitaなどで情報発信をしていきたいですね！




[^1]: https://relativelayout.hatenablog.com/entry/2020/05/17/141937
[^2]: https://bit.ly/3dYB5Yd
Qiitaの投稿で装飾したいときによく使うHTMLタグ

#どうも7noteです。Markdownだけでは対応できない細かい調整が可能！

画像が大きくなりすぎたり、色を付けて目立たせたりしたい時に使えるタグやCSSをまとめました。
毎日投稿していると覚えていきますが、忘れそうなのでメモのついでに投稿します。



## ■ 画像サイズをカスタマイズ

```html
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/hogehogehoge.png" width="200">
```


画像のサイズを変更します。
そのままだと大きすぎたりして使いにくいので画像の横幅を指定します。

`![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/hogehogehoge.png)
`
この( )の中のURLだけコピペしておきます。


**↓変更前↓**
![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/52f7c363-abe2-5645-dc85-c5a280422c1c.png)


**↓変更後↓**
![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/f6a5c9e2-52af-78a3-b592-0e3d65fea109.png)



## ■ 文字に色を付ける（`<font color=""></font>`）

```html
<font color="red">赤文字</font>

もしくは16進数表記で

<font color="#ff0000">赤文字</font>
```

**--見本-----------**
<font color="#ff0000">赤文字</font>になるよ
**------------------**


## ■ 改行させる（`<br>`）

```html
|朝|昼|夜|
|:--|:--|:--|
|おはよう<br>おっはー|こんにちは<br>こんちわ|こんばんわ|
```

**--見本-----------**

|朝|昼|夜|
|:--|:--|:--|
|おはよう<br>おっはー|こんにちは<br>こんちわ|こんばんわ|

**------------------**

表などの中で改行させたい時に使うことが多いです。
通常の文章のところでも使えますよ！


## ■ 打ち消し文字（`

`）

```

ここに消したい文字を入れると線が入る

```

**--見本-----------**

ここに消したい文字を入れると線が入る

**------------------**

古くなった文字を消したり、言葉を濁したりしたい時に便利。

**追記：**Markdownで`~~文字~~`と囲むことでできるみたいですね。つい`

`で書いてました。

## ■ 一部のみ非表示にする（`<!-- 消したい文字 -->`）

いわゆるコメントアウトですね。自分用のメモを残しておきたい時に便利。

```html
<!-- ここに消したい文字を入れる -->
```

**--見本--（検証ツールやソースを表示すると見れる）**

↓ここ

<!-- ここに消したい文字を入れる -->
↑ここ
**------------------**


## まとめ

マークダウンは慣れてくると便利で見た目も綺麗に整えてくれますが、
ちょっとした修正や微調整は難しいので、そんな時にちょこっとhtmlが書けると便利ですね。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】HTML・CSSのちょいテク詰め合わせ](https://qiita.com/7note)
チート付きスタック

#初めに
色々あってコードを一本書いたのでそれを上げに来ました。
あまり人の構造をいじりたいとは思いませんが、今負荷がかかっていてそれどころでは無いので、仕方なく考えた構造を上げておきます。参考にはしない方がいいです。

#それは何か
それは、チート機能付きスタックです。機能カット版のほとんどSTLのベクターなのです。

#コード
```Cpp:code.cpp
#include <iostream>
#include <vector>

//これは、記憶の持ち方についての言及です。
//シーク付きスタックに思路をプッシュして、それを回想できるように願ったものです。
//私の願いが叶いますように。

//hmm, how i make vecstack like this...


template<class T>
class VectorStack {
public:

	const T& Peek() const {
		return V.back();
	}

	bool Pop() {
		V.pop_back();
		return true;
	}
	bool Push(const T& In) {
		V.push_back(In);
		return true;
	}

	const T& operator [](std::size_t Idx) const{
		return V[Idx];
	}

	typename std::vector<T>::const_iterator begin() const{
		return V.cbegin();
	}
	typename std::vector<T>::const_iterator end() const{
		return V.cend();
	}

protected:
	std::vector<T> V;
};

struct Thought {//not define yet. 適当定義・・・。Orz
	int rune = 0;
	int prop19 = 0;
	int param21 = 0;
};

int main() {

	VectorStack<Thought> M;
	Thought T{ 0, };

	M.Push(T);
	T.rune = 2;
	M.Push(T);

	for (auto& o : M) {
		std::cout << o.rune << std::endl;
	}
	return 0;

}
```
#終わりに
最近、禊が終わりまして色々後処理をしているのですが、ほんとソフトウエア的な投資をしておいてよかったと思います。
とにかく、思考やら認識やらが狂うとほんとうにどうしようもないので、そこだけでもケアしてあれ
数十倍マシになります。

かしこ。

#追記
より良い記憶構造を願うなら、スタック付きグラフか、スタック付きツリーを模索するべきかもしれません。
スタックには思路や支点を持たせるとよいでしょう。
Rails×Heroku×bonsai×Searchkick(Elasticsearch)利用時の覚書き

モデル`Product`を対象にSearchkick（Elasticsearch）で検索する場合。

```Gemfile.rb
gem 'elasticsearch', '7.2.0'
gem 'searchkick'
```

```product.rb
class Product < ApplicationRecord
    searchkick language: "japanese"

    def search_data
        {
            keywords: keywords
        }
    end
end
```


```home_controller.rb
class HomeController < ApplicationController
  def top
  end

  def search    
    @products = self.products_query
  end

  private
    def products_query
      if params[:q].present?
        Product.search params[:q], fields: [:keywords], body_options: {min_score: 1}, operator: "or"
      else
        Product.all.order(id: "desc")
      end
    end
end

```

##Elasticsearchの導入
ここは前回の開発で入れていた。
https://qiita.com/maztak/items/0f722ad01c982a96de59

`brew install elasticsearch`だけでは上手くいかず、Elasticsearch公式サイトの手順を見ながら入れた気がする。
https://www.elastic.co/guide/en/elasticsearch/reference/7.10/brew.html

```console
$ which elasticsearch
-> usr/local/bin/elasticsearch #私の場合はこのディレクトリに入っていました
```

##ローカルで開発するとき
Elasticsearchが既に入っていれば、起動してインデックス生成してあげれば検索結果に出てくる

```console
# Elasticsearchを起動
$ elasticsearch

# 新規タブでkibanaを起動（任意）
$ kibana

# 新規タブでローカルサーバーを起動
$ rails s

# Rails Console でインデックスを生成
$ rails c
irb(main):001:0> Product.reindex # 検索対象となるモデル名がProductの場合
``` 

##Production Heroku

###HerokuにBonsaiアドオンを追加
GUIからポチポチするだけで、追加と環境変数`BONSAI_URL`の設定が自動的にされる。ただし環境変数`ELASTICSEARCH_URL`は手動で同じ値を設定する必要がある。

```console
$ heroku config:get BONSAI_URL -a myapp
-> http://username123:password123@my-awesome-cluster-94865.us-east-1.bonsai.net:443

$ heroku config:add ELASTICSEARCH_URL='http://username123:password123@my-awesome-cluster-94865.us-east-1.bonsaisearch.net:443'
```

`BONSAI_URL`はbonsaiのCredentialの画面からも確認可能。
![スクリーンショット 2020-12-06 17.02.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242610/68c83901-9824-6e36-6826-6f54a9662ba9.png)

bonsai公式ドキュメントでは、URL例が`xxx.bonsai.io/`のドメインだが、私のは`xxx.bonsaisearch.net:443`となってた。末尾の数字までちゃんと設定するように。

###インデックス作成

```console
$ heroku run rails searchkick:reindex CLASS=Product -a myapp # 対象モデルがProductの場合
# もしくは
$ heroku run rails searchkick:reindex:all -a myapp
```

`rake`の方でやるとElasticsearchのバージョンによっては上手く行かないことがあるかも（`Searchkick::ImportError`がでた）。

##参考

Searchkick
https://github.com/ankane/searchkick

Heroku Bonsai Elasticsearch Document
https://devcenter.heroku.com/articles/bonsai

SearchkickのREADMEの日本語訳
https://qiita.com/kentosasa/items/f0af67f62f4692d68370#deployment
Amazon RDS DB (Aurora)インスタンスタイプを変更するスクリプト

[Amazon Aurora](https://aws.amazon.com/jp/rds/aurora/?aurora-whats-new.sort-by=item.additionalFields.postDateTime&aurora-whats-new.sort-order=desc)を社内で検証中…

> スケールアップしたときのパフォーマンスを見てみたいな。インスタンスタイプ変えておいて！

　
> いや…スケールダウンして、違うパターンも試してみよう…！

なんてことが繰り返されていて、そのたびに AWS Console をポチポチしながらインスタンスタイプを変えていました。。。 <br>
（１６個変えるのに２０分以上マウス操作…）

![00rdm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/21b5bed1-e4fd-7107-2421-ba314f09651a.png)

さすがに面倒なので[ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/Overview.DBInstance.Modifying.html)を参考に、一括変更できるスクリプトを作りました。

```sh:modifyInstance.sh
#!/bin/bash

INSTANCE_CLASS=db.r5.large

aws rds modify-db-instance \
        --db-instance-identifier main-core \
        --db-instance-class $INSTANCE_CLASS \
        --apply-immediately

for (( i=1; i<= 15; i++ ))
do
 id="0${i}"

 aws rds modify-db-instance \
        --db-instance-identifier read${id: -2} \
        --db-instance-class $INSTANCE_CLASS \
        --apply-immediately
done
```
[ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/Overview.DBInstance.Modifying.html)に記載されている **[すぐに適用] 設定を使用する** を設定するとスクリプトを実行した直後からインスタンスタイプの変更が始まるので、検証作業中にとても便利です。
Rails　ラジオボタンの複数情報を保存する方法 

#Rails　ラジオボタンの複数情報を保存する方法 
###環境
Ruby:2.6.5
Rails:6.0.3.
____
###記述理由
探せど探し方もわからず2日間彷徨ったため、忘備録、戒めも踏まえて記述する
基本的な知識を踏まえて、今後の理解に務める。

こうした方がいいなどのご指摘があり、教えていいよという稀有な方がございましたら、なんなりとお願いします。
_____

###①HTML側：複数チェックの情報を格納して送付する記述
```index.html.erb
まず　form_withの記述の方法

<%= form_with(model: @company_type,url: companies_types_path(@company_type),
 method: :post,local: true) do |f| %>
 
中略　繰り返し表示させるための記述の方法
 
 <div class="tab-pane fade show active" id="list-doboku" role="tabpanel"
 aria-labelledby="list-doboku-list">
   <% industry_type = ["足場工事","舗装工事","しゆんせつ工事","石工事","造園工事","土木工事"] %>
    <% industry_type.each do |q| %><br>
      <%= f.check_box :industry_type , {multiple: true},q,nil %>
      <%= f.label :industry_type, q %>
    <% end %>
 </div>

中略　form_withを送付するための方法

     <div class="text-center mb-5 col-6">
       <%= f.submit "記録する" ,class:"btn btn-block send-button tx-tfm" %>
     </div>
   <% end %> 
 ```
###①-2:HTML側：このように表示することができました
![b8853ff8c03b14513b8abe3e4c1d5a0f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/19f476f9-bedc-a3a6-124f-02bfc9ea20ff.png)
______
###②controller側：複数チェックの情報を受け取り保存する記述
```モデルs.controller.rb
def create
 @company_type = CompanyType.new(company_type_params)
   if @company_type.valid?
      @company_type.save
      redirect_to companies_types_path
   else
      render :index
   end
end

private

def company_type_params
  params.require(:company_type).permit(:industry_type =>[]).merge(company_detail_id: current_user.id)
end
 ```
###②-2:DB側：このように保存することができました
![938234ae1a61749fa1679e5891ad77b2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/738af0b7-9450-f4a8-2b0d-8e8f326d679b.png)
______
###反省
探し方も悪かったと思いますが、つまづく人が少ないから探せなかったのかもしれません。
Qiita記事も初投稿、まだまだ勉強することはあると自分を勇気づけて次のエラーに取り掛かります。
圧倒的知識不足による問題の気がしますが、書いてみないことには分からないので投稿しました。
JavaScriptでScalaっぽく操作できる標準メソッドたち

:star: この記事は、[ただの集団 Advent Calendar 2020](https://adventar.org/calendars/5581) の6日目です :star: 

昨日は、同じグループのメンバーryoさんの、[ JVで人事立ち上げてみて](https://note.com/ryoryory/n/n1738864acbe0) でした :hand_splayed: 
毎年、開発部に絞らずにアドベンドカレンダーやってるから、いろんな部署のいろんな人の話が聞ける良い機会で私はこのアドベントカレンダーの時期が大好きです :heart_eyes: 

### はじめに
私は、社会人になってからプログラミングをはじめました。
そこからずっと主な言語は、Scalaでした :pencil: 
他の言語のタスクが来たときは特にScalaだとこのメソッドあるけど、この言語にもあるのかなー。のようなモチベーションでググってます :computer:

今回は、新規プロダクトの立ち上げの際にVueを書く機会があったので、その時に発見したjsの発見をメモとして残します！
※サンプルコードには、TypeScriptも使用しています。

## Option.getOrElse
私の大好きなメソッドの一つ

#### Scala
```scala
def getName(nameOpt: Option[String]): String = {
  nameOpt.getOrElse("名前の指定なし")
}

println(getName(Some("ando"))) // ando
println(getName(None)) // 名前の指定なし
```
#### JavaScript
```javascript

function getName(nameOpt?: string): string {
  return nameOpt ?? "名前の指定なし" 
}

console.log(getName("ando")) // ando
console.log(getName(undefined)) // 名前の指定なし
```

可読性のScala、文字数的にはjsって感じ :thinking: 

## Collection.map
これも、私の大好きなメソッドの一つ

#### Scala
```scala
def suffixAsobase(hinatazakas: Seq[String]): Seq[String] = {
  hinatazakas.map(hinatazaka => s"${hinatazaka}あそばせ")
}

println(suffixAsobase(Seq("かとし", "こさかな", "みーぱん", "齊藤京子")))
// Seq(かとしあそばせ, こさかなあそばせ, みーぱんあそばせ, 齊藤京子あそばせ)
```

#### JavaScript
```javascript
function suffixAsobase(hinatazakas: string[]): string[] {
  return hinatazakas.map(hinatazaka => hinatazaka + "あそばせ")
}

console.log(suffixAsobase(["かとし", "こさかな", "みーぱん", "齊藤京子"]))
// ["かとしあそばせ", "こさかなあそばせ", "みーぱんあそばせ", "齊藤京子あそばせ"] 
```

そのまま :point_up: 

## Collection.find / String.contains
#### Scala
```scala
val morningMusumes = Seq("ゴマキ", "鞘師", "まーちゃん", "尾形")
println(morningMusumes.find(_.contains("ゴ"))) // Some(ゴマキ)
```

#### JavaScript
```javascript
const morningMusumes = ["ゴマキ", "鞘師", "まーちゃん", "尾形"]
console.log(morningMusumes.find(musume => musume.includes("ゴ"))) // ゴマキ
```
戻り値の型注意 :open_mouth: 

## Collection.headOption / Collection.tail
#### Scala
```scala
val nogizakas = Seq("生田", "なーちゃん", "白石麻衣", "かっきー", "久保ちゃん")
println(nogizakas.headOption) // Some(生田)
println(nogizakas.tail) // Seq(なーちゃん, 白石麻衣, かっきー, 久保ちゃん)
```

#### JavaScript
```javascript
const nogizakas = ["生田", "なーちゃん", "白石麻衣", "かっきー", "久保ちゃん"]
console.log(nogizakas.shift()) // 生田
console.log(nogizakas) // ["なーちゃん", "白石麻衣", "かっきー", "久保ちゃん"]
```
mutable怖い :scream_cat: 

## Collection.init / Collection.last
#### Scala
```scala
val sakuras = Seq("天ちゃん", "理佐", "梨加", "ねる", "てち")
println(sakuras.last) // てち
println(sakuras.init) // Seq("天ちゃん", "理佐", "梨加", "ねる")
```

#### JavaScript
```javascript
const sakuras = ["天ちゃん", "理佐", "梨加", "ねる", "てち"]
console.log(sakuras.pop()) // てち
console.log(sakuras) // ["天ちゃん", "理佐", "梨加", "ねる"]
```


### 終わりに
getOrElseので感動して書きはじめたけど、意外と数はなかったな :cry:
immutable推奨してる言語と、mutableなので厳密に完全一致じゃないので、ご指摘いただける際はここ以外でお願いします :pray: 

(途中から、sample誰にしようかなーの趣旨に変わってたな :blush: )
Rubyで小数点を使った計算をしたい時にはto_fメソッドを使う

ruby 2.7.0についての記事です

- to_f  文字列を 10 進数表現と解釈して、浮動小数点数 Float に変換する
<br><a href="https://docs.ruby-lang.org/ja/latest/method/String/i/to_f.html">公式ドキュメント（Stringクラスto_f）</a>


```ruby
"10".to_f # => 10.0
"8".to_f / 100 #=> 0.08
```
入門Docker　アウトプット

## Dockerとは
Dockerはコンテナと呼ばれる仮想化の技術であり、特定の環境をパッケージングして、どの環境でも動かせることができる。従来はVM型という仮想化もあった。配布の容易性がDockerを流行らせた原因だと考えられる。

## docker-compose
docker-composeは複数のDockerを動かすツールであるオーケストレーションツール
をローカルで動かすためのツール。Dockerを使用する際にほぼセットで使われる。

## コンポーネント
・Docker　Image
Dockerfileというファイルに記述し、ビルドすることで、環境のスナップショットとしての役割を持つ。OSやソフトウェア、ランタイムなどの環境を提供する。

・Docker Container
Docker　Imageであるスナップショットから起動したプロセス。「1コンテナ = 1プロセス」で設計する。

ほかにもNetworkやVolumeがある。


参考：https://y-ohgi.com/introduction-docker/1_introduction/docker/
Notionでサブページの権限設定を変更する

アルプ株式会社でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2020](https://qiita.com/advent-calendar/2020/notion) 6日目のエントリです。
5日目は[Notionでユーザグループを作る](https://qiita.com/pictiny/items/6e4ebf3534488430806d)でした。

# 権限設定
Notionのページには5段階の[権限](https://qiita.com/pictiny/items/6e4ebf3534488430806d#%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E6%A8%A9%E9%99%90%E8%A8%AD%E5%AE%9A)を設定することができます。

## サブページ
ページ内に作られたサブページの権限は、上位の権限を引き継ぐのが以前の仕様でした。
11月のアップデートでページとサブページの権限が分かれ、それぞれに権限設定ができるようになりました。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">🆕 in Notion 2.10: Flexible sub-page permissions!<br><br>Before, permissions couldn&#39;t be changed for pages nested in another page — they always inherited the permission level of the parent page. <br><br>Now, you can EXPAND or RESTRICT permissions for any sub-page. Useful for team wikis! <a href="https://t.co/xHbl3ruoL3">pic.twitter.com/xHbl3ruoL3</a></p>&mdash; Notion (@NotionHQ) <a href="https://twitter.com/NotionHQ/status/1329190089449111552?ref_src=twsrc%5Etfw">November 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# まとめ
ユーザグループとサブページの権限を組み合わせることで、柔軟な権限設定を実現できるようになりました！

権限設定については[Sharing & permissions](https://www.notion.so/Sharing-permissions-524c32ac63dc424a842891ace7a99bf8)に公式ドキュメントがありますので、そちらもご覧ください。
【Unity】キャラクターが移動した跡の表現

本記事は [サムザップ #2 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/sumzap2) の12/7の記事です。
昨日の記事は @arima_moto さんの「[LaravelAdminのシャーディング対応](https://qiita.com/arima_moto/items/264eb374939be645f44a)」でした。

# はじめに
サムザップでエンジニアマネージャーをしています、[北島](https://twitter.com/RyotoKitajima)です。
仕事ではマネジメントを主にしているので、なにかを実装する時間は減ってしまっているのですが・・・
アドベントカレンダーのような機会があると、やる機会が出来て良いですね！

さて、私の本業はサーバーエンジニアなのですが、趣味でたまにUnityを触っています。
今回は、Unityで「キャラクターが移動した跡の表現」について書きたいと思います。
Unityに関しては初心者ですので、温かい目で読んでいただければと思います。

# 実装するもの
今回、実装するものは以下になります。
![【Unity】キャラクターが移動した跡の表現.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539013/24727738-5d61-af36-c8a8-04968c61e29f.gif)
※gifなので、少しカクカクしているかもしれませんがお許しを

# 環境
以下の環境での記事になります。
バージョンが違う場合は、多少異なる部分があると思われます。

**バージョン：** Unity2019.4.10f1

# 実装
前提として、キャラクターの表示や移動に関しては予めできているものとします。
そちらについては、私の過去の記事（[UnityでマリオやHollow Knightのような気持ちいいジャンプを実装するには](https://www.kitajima-ryoto.com/how-to-jump-like-mario/)）を参考にして下さい。

キャラクターに ParticleSystem を Add Compornent して表現を作っていきます。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539013/044e5ac9-e114-6e68-f81e-66154c6e9e4b.png)
まず、基本的な設定です。
Start Sizeや Start Rotationなどを設定します。
Simulation SpaceをWorldにすることで、Local座標ではなくWorld座標でParticleを生成してくれるので便利です。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539013/c73e7955-455a-391c-ba29-e0ec7e0ddc26.png)
次に、Emissionです。
Rate over Distanceを設定することでキャラクターの移動に応じてパーティクルを出してくれるようになります。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539013/9232351f-4d4a-5819-e3fb-642723a85128.png)
次にShapeです。
ここでは、キャラクターの足元に生成されるように、Positionを設定しています。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539013/077baa03-5a21-220f-7ee0-e9ec2ddf9ee8.png)
次にSize over Lifetimeです。
山のように設定することで、膨らむように出ていき段々消えていくような表現になります。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539013/d1ee7349-c8c1-5a63-db36-4d80e7ee9243.png)
最後にRendererです。
今回は、簡単に表現を試したかったので、Cubeを選んでいます。
作りこんだSpriteで足跡を表現できると、カッコイイかもしれませんね！

# 最後に
というわけで、今回はUnityでキャラクターが移動した跡の表現を実装しました。

本業はサーバーエンジニアなので、こういった目で分かるものができるクライアント側もたまには楽しいですね！
この記事が少しでもなにかの参考になると嬉しいです。

明日は、@shimizu_toshihiko さんの記事です、お楽しみに！
高位合成言語アセンブラを作る。 その16

# 概要

高位合成言語アセンブラを作る。
練習問題、フリップフロップ、やってみた。

# コードを書く。

```
make 4
in 0 1
nor 0 2 3
nor 1 3 2
out 2 3
```

# コンパイル結果

```
module x(input a, input b, output c, output d);
    assign d = ~(a | c);
    assign c = ~(b | d);
endmodule

module testbench;
    reg a, b;
    x u(.a(a), .b(b), .c(c), .d(d));
    initial
    begin
        $display("a b c d ");
        $monitor("%b %b %b %b ", a, b, c, d);
        a = 0; b = 0; #10;
        a = 0; b = 1; #10;
        a = 1; b = 0; #10;
        a = 1; b = 1; #10;
        $finish;
    end
endmodule
```

# 成果物

https://embed.plnkr.co/plunk/HZo8ntCSVJ7MQ2kL


# 真理値表で確認する。

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/791e9968-0b1c-63fd-6a1e-1db9fada40a8.jpeg)

# 成果物

https://embed.plnkr.co/plunk/pKdPQQdXAPwg2d1m

# 回路図で確認する。

動作せず。

# 成果物

https://embed.plnkr.co/plunk/52GcR7pMrjT1AKnk

# 実行結果

```

a b c d
0 0 x x
0 1 0 1
0 0 0 1
1 0 1 0
0 0 1 0


```

以上。
Djangoのviews.pyのredirect、render等の違い

##この記事の内容
Djangoのviews.pyの中でreturnしているrender等の違いについて説明します。


・render
・redirect
・TemplateResponse



##render
>Djangoのドキュメント
>"**Combines a given template with a given context dictionary** and **returns an HttpResponse object** with that rendered text."

特徴：**redirectとの違いはtemplates(html)に変数等を渡せる。**
動き：renderで記述した内容をHttpResponseに渡すことでレンダリングします。
（DjangoではHttpResponse等の中身によってレンダリングしている。
そのHttpResponseをより便利に使うためのもの）


```python:renderの記述例
from django.shortcuts import render

def my_view(request):
    # View code here...
    return render(request, 'myapp/index.html', {
        'foo': 'bar',})　#第三引数に辞書型で渡す値を指定する

```



##redirect
>Djangoのドキュメント
>"**Returns an HttpResponseRedirect** to the appropriate URL for the arguments passed."

特徴：templates(html)に何も渡さない。
単に対象のURLに遷移したいときに使用する。
下の例では、単にhttps://example.com/を表示する。

動き：HttpResponseRedirectを便利に使うための機能。
HttpResponseRedirectはステータスコード302を返すため、
redirectを使用すると、ステータスコード302が返ります。

```python:redirectの記載例
return redirect('https://example.com/')  
```

##TemplateResponse
>Djangoのドキュメント
>"Django does not provide a shortcut function which returns a TemplateResponse because **the constructor of TemplateResponse offers the same level of convenience as render()**."

Djangoのドキュメントによると、renderと同じくらい便利なため、TemplateResponseのショートカット機能を用意していないのことです。
renderとの違いは、viewの処理が終わるまでレンダリングをしないことです。
これにより、settings.pyに記載されているMiddleWareが起動後にレンダリングが始まる利点があります。

```python:TemplateResponseの記載方法
from django.template.response import TemplateResponse

TemplateResponse.__init__(request, template, context=None, content_type=None, status=None, charset=None, using=None)
```



##参考サイト
https://docs.djangoproject.com/en/3.1/topics/http/shortcuts/#django.shortcuts.render
https://docs.djangoproject.com/en/3.1/ref/template-response/
https://stackoverflow.com/questions/38838601/django-templateresponse-vs-render
https://nihaoshijie.hatenadiary.jp/entry/2015/08/30/174206