OmniAICreator/Qiita-1.07M huggingface dataset:
Kotlinで引数違いのコンストラクタを作る方法

# 概要

kotlinでの引数違いのコンストラクタの作り方を記載する。

# 引数違いのコンストラクタの作り方

`constructor(引数) {処理}`でコンストラクタが作成できる。

```kotlin
class SampleClass {
    // StringかFloat値が入る
    private val value: Any

    // サンプルコードのため中身の処理はどちらもvalueに代入するだけの同じ処理になっている
    // Stringを受け付けるコンストラクタ
    constructor(value: String) {
        this.value = value
    }

    // Floatを受け付けるコンストラクタ
    constructor(value: Float) {
        this.value = value
    }

    fun isValueString(): Boolean {
        return value is String
    }

    fun isValueFloat(): Boolean {
        return value is Float
    }
}
```

# 実際にコンストラクタを使ってみる

```kotlin
val sampleClass1 = SampleClass("String")
Log.d("ValueCheck", "SampleClass1 ${sampleClass1.isValueString()} , ${sampleClass1.isValueFloat()}")

val sampleClass2 = SampleClass(100F)
Log.d("ValueCheck", "SampleClass2 ${sampleClass2.isValueString()} , ${sampleClass2.isValueFloat()}")
```

出力されたログを見てみると以下の様になっており、それぞれStringとFloatで初期化できていることが分かる。

```
D/ValueCheck: SampleClass1 true , false
D/ValueCheck: SampleClass2 false , true
```
（レポート）Scrum Fest Osaka 2021 Day 2 「紙芝居で2人のアジャイルコーチがScrumのあるあるをちょっとだけ語ってみる」

# Scrum Fest Osaka 2021 Day 2 「紙芝居で2人のアジャイルコーチがScrumのあるあるをちょっとだけ語ってみる」

2021/06/26に開催されたScrum Fest Osaka 2021での発表です。
https://confengine.com/conferences/scrum-fest-osaka-2021/proposal/15268/2scrum

# チーム参加してきました

[aslead Agile](https://aslead.nri.co.jp/solution/aslead_agile.html) のチーム「[オキザリス](https://speakerdeck.com/viva_tweet_x/huesudeyong-qi-wode-taxin-gui-timugashi-yan-wozao-rifan-sitejin-nizhi-rumadefalsewu-yu?slide=3)」にて参加してきました。
チーム7人で参加して、その場で実況しつつ、記事も作っています。


# スクラムの精霊
- 昔2人の男がいた
- 二人はその日暮らしで稼いでいた
- 二人は今日もダンジョンに潜った
- 二人は宝箱を見つけた
- 宝箱には注意書きがしてあったが、かまわず開けた
- 中からスクラムの精霊が出てきた
- 三人は酒場に行った
- 酒場で三人が語っていると、村人が飛び込んできた
- 村人は山賊がでた！と叫んでいて助けを求めていた
- 3人は山賊退治を引き受けた
- 精霊「まずは情報収集から始めよう」
★何か始める際は、情報収集から行う

- 3人は、山賊の寝床に向かった
- どうやら山賊は食料が足りていない様だ
- 3人は山賊を退治する方法を考えた
- 精霊「硝酸をかけて溶かしちゃおう」
- 精霊「毒薬で皆殺しにしよう」
- 二人は食料と引き換えに、山賊に引っ越してもらうことにした
- 村人は不思議な顔をして報酬を二人に渡した
★ 最小の仕事からこなすんじゃなく、ユーザにとっての優先順位で仕事をこなす

- 精霊「はじめにきちんと計画しろ！」
- 二人は精霊を無視して、新しい仕事の依頼を受けた
- 内容はなくしたものを探してほしい
- 場所は精霊を見つけたダンジョンだった
- そこでなくしものを探しているとボスが現れた
- 二人はやられてしまった
★ 始めに計画を立てて、仕事をこなすことで、やることが明確になる

- 精霊「だから初めに計画しろといったんだ！！！」
- 二人は精霊を無視した
- すると精霊は怒って、初めに入っていた宝箱に戻ってしまった
- 二人はボスと戦うために武器屋に行った
- 二人はそこで、ボスをどうやったら倒せるのかを話した
- 二人は無意識のうちに計画していた
- そして二人はボスを倒しに行った
～続く～
★ 正しい考え方は、自然とチームを染める


# 感想
- 計画や詳細を確認せずに仕事をすると、ユーザの思っていたものと違う結果になることを再認識した。計画など雑になりがちだが、きちんとすることが一番の近道だと思った。
ESP-wroom02備忘録

グダグダ説明は無し


Arduino
Board Manager URL

```
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
```

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json


選択ボード

```
Generic ESP8266 Module
```

配線

```
3V-----------3V3    GND-------GND
3V-----------EN    IO16
             IO14  TOUT
             IO12   RST -書き込み時GND後open
             IO13   IO5
GND----------IO15   GND
3V-----------IO2    TXD----Serial RXD
書き込み時GND- IO0    RXD----Serial TXD
             GND    IO4--[+ LED -] --GND
```


LEDチカチカコード

```
void setup() {
  // put your setup code here, to run once:
  pinMode(4,OUTPUT);
}

void loop() {
  // put your main code here, to run repeatedly:
    digitalWrite(4, HIGH);
   delay(1000);
   digitalWrite(4, LOW);
   delay(1000);

}
```

書き込み時、IO0をGNDに接続し、RSTをGNDにちょっと接続すると書き込みモード
＝「UART Download Mode(書き込みモード)」

書き込みがおわったら、IO0をGNDから切り離し、RSTGNDにちょっと接続するとリセットがかかりコードが動作する（IO0をGNDから切り離しただけでも動作することあり）
＝「Flash Boot Mode(実行モード)」
laravel 任意のフィールドの値が指定したものと一致していた時にフィールドの必須を確認する方法 required_if

# 目的

- laravelで任意のフィールドの値が指定したものと一致していた時に当該フィールドの必須を確認する方法をまとめる

# 方法

- フィールド`check`の値に「true」という文字列が格納されたときに、フィールド`input_str`の値のが必須入力されているかをバリデートしたいときは下記のように記載する。
- 下記はリクエストファイルの`rules()`メソッドの内容のみ抜粋して記載する。

    ```HogeRequest.php
    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'check' => 'required',
            'input_str' => 'required_if:check,true',
        ];
    }
    ```

- 任意のフィールドの値が指定したものと一致していた時に当該フィールドが必須かどうかをバリデートする時バリデーションルールの頭に`required_if:フィールド名,指定された値`を記載する。


# 参考文献

- [https://readouble.com/laravel/6.x/ja/validation.html](https://readouble.com/laravel/6.x/ja/validation.html)
Jetpack ComposeのTextField(EditText)についての色々 [Android Kotlin]


#はじめに
Jetpack ComposeのEditText的存在 TextField の基本的なことを書いていきます。
触り始めたその日に書いているので訂正すべき点などあったらコメントお願いします！
参考
https://developer.android.com/jetpack/compose/state#state-in-composables
https://www.youtube.com/watch?v=O_MmOP5fjUg

#では、早速

```kotlin:MainAcitvity.kt
@Composable
fun textField(){
    TextField(
        value = "キョン",
        onValueChange = {}
    )
}
```

TextField()でTextFieldを起動して引数で色々設定していく形ですね。
value → TextFieldの値を設定
onValueChange → TextFieldの値の変化を受け取る
という役割があります。

#問題点1 TextFieldの値を編集できない

```kotlin:MainActivity.kt
@Composable
fun textField(){
    val fieldValue = remember { mutableStateOf("キョン") }
    TextField(
        value = fieldValue.value,
        onValueChange = { newValue ->
            fieldValue.value = newValue
        })
}
```

これでユーザーが値を編集できます！onValueChangeでTextFieldの値に変化があったら値を取得してfieldValueに代入。valueにfieldValueを代入でTextFieldの値が置き換わる。という感じです。
remember()、mutableStateOf()は正直雰囲気で使っていて、どう働いているか説明できないので公式のリンクを貼っておきます。https://developer.android.com/jetpack/compose/state#state-in-composables

#問題点2 画面回転すると値がリセットされる
ViewModelは画面が回転しても値を保持してくれるのでViewModelを使って解決していきます。

```kotlin:MainViewModel.kt
class MainViewModel: ViewModel() {
    val query = mutableStateOf("キョン")

    fun onQueryChanged(newValue: String){
        query.value = newValue
    }
}
```

```kotlin:MainActivity.kt
@Composable
    fun textField() {
        val fieldValue = viewModel.query.value

                TextField(value = fieldValue,
                    onValueChange = { newValue ->
                        viewModel.onQueryChanged(newValue)
                    })
    }
```

ViewModelのqueryを参照しTextFieldに代入する。
ViweModel内でqueryの値を更新する関数を定義し、MainActivityのonValueChangeでその関数を呼んであげる。
この二つによって画面が回転しても値がリセットされないTextFieldが出来ます！
またViewModelに値を保存しておけばButtonが押されたらTextFieldの値を取得することも簡単に実装できますね。

```kotlin
@Composable
fun Button() {
    Button(
        onClick = {  
         println(viewModel.query.value)
 },
    ) {
        Text("Button")
    }
}
```


#以上
![F399368B-F1B2-4D0F-BBB0-93BD6C55E551.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975063/6bdd2f79-0a47-613a-0dd9-80dc50472971.gif)
.NETについて勉強したことをまとめてみた

#.NETについて勉強したことをまとめてみた

#◆結論
.NETを使って新しくアプリケーションを作る時は.NET 5.0 を使うのが良い

#◆.NETとは
a. Microsoftが立ち上げたMicrosoft .NETという構想を指す
b. あらゆるものをインターネットに接続するという構想
c. 現在で言うIoT
d. ブランド名だと思って構わない

#◆注意点
.NETは現在.NET 5が最新のフレームワークとなっています。
.NET 5は複数あった.NETのフレームワークをカバーしています。
しかし、.NET 5を理解するには今まで使用されていた.NET Frameworkや.NET Coreを理解する必要があると感じたため、勉強をしました。
.NET 5は.NET CoreからCoreという名前を取って、より統合した感を強くしたものと思って大丈夫だと思います。

#◆.NET Coreとは
a. .NETのフレームワークの1種
b. Webアプリケーションやデスクトップアプリケーションを作ることができる

#◆.NET内での.NET Coreの立ち位置
##いつできたのか
2016/6/27にVer1.0がリリース

##特徴
クロスプラットフォーム、オープンソースという特徴を持つ
2000年に開発され、使用されてきた.NET FrameWorkを引き継いでいる
.NET Coreは両方の特徴を引き継いでいる

##.NET FrameworkやXamalinとの違い
###.NET Frameworkとは
Windows専用に作成されたフレームワーク
###Xamarin
.NET FrameworkのAndroid、iOS、Mac用のフレームワーク


#◆.NET Coreの4つの強み
##1. クロスプラットフォーム
i. .NET FrameworkやXamarinは使用できるOSが決まっていた
ii. .NET Coreは複数のOSに対応している
iii. メリット：開発者のOS選択が自由となる
##2. オープンソース
i. オープンソースであるため誰でも無償でソースコードを読める
ii. また、改変なども可能
iii. メリット：ソースコードを読むことができるため仕組みを深く理解できる
##3. 軽量さ
i. ストレージ容量の負担が軽い
ii. アプリケーションを配布するときも最低限のライブラリを同梱すればよい
iii. メリット：アプリケーションを動作させるPCのスペックがある程度低くても動作可能
##4. フレキシブルさ
i. 稼働が少ない時は最小限、高パフォーマンスが要求される時はスケールを大きくする
ii. メリット：インフラ面にかかるコストを最小限に抑えることができる
#◆参考ページ
- https://docs.microsoft.com/ja-jp/archive/msdn-magazine/2017/september/net-standard-demystifying-net-core-and-net-standard
- https://blog.hiros-dot.net/?p=9086
【UiPath】QiitaのAPIで投稿を一覧取得する

# はじめに

この投稿は、RPAツール「UiPath」での **API呼び出し例** の記事です。

この記事は「UiPath Friends もくもく会 2021年6月開催 2021-06-26（土）9:00 - 12:00」で書きました。

https://uipath-friends.doorkeeper.jp/events/121863

# QiitaのAPIを叩いてみる

QiitaはAPIが公開されていて、投稿やコメントなどの情報が取得できます。
データの更新やユーザの情報などは認証が必要ですが、記事の情報などは認証しないｔでも取得できます。
今回は、特定のタグに投稿された記事をすべて取得します。

全体像については、以下の記事が参考になります。

https://qiita.com/api/v2/docs

https://qiita.com/kou_pg_0131/items/57f86a1abc332ed2185d

https://qiita.com/tag1216/items/b0b90e30c7e581aa2b00

https://qiita.com/miyuki_samitani/items/bfe89abb039a07e652e6

# アクセストークンを発行する（お好みで）

アクセストークンなしでAPIを呼び出すと「**1時間で60回以上呼び出すとエラー**」になります。ログイン済みのQiitaの画面からアクセストークンを発行してヘッダーに付与すれば「**1時間で1000回**」まで呼び出せます。
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/1a754273-b8b5-32be-bb48-9753db961bd6.png)



# 取得したいタグを指定する

記事を取得したいタグを指定して、APIを呼び出すので事前に収集しておきます。今回は以下のタグを取得します。

https://qiita.com/tags/uipath

https://qiita.com/tags/automationanywhere

https://qiita.com/tags/winactor

https://qiita.com/tags/bizrobo

https://qiita.com/tags/blueprism

https://qiita.com/tags/powerautomatedesktop


# Studioでコードを書く

タグを指定し、APIを繰り返し呼び出して、結果をデータテーブルに格納し、最後にファイルに出力します。

使用したAPIのエンドポイントは「https://qiita.com/api/v2/items 」です。

APIレスポンスはJsonで返却されますが、ページ情報（何ページ目か？全体で何ページあるか？）が無いので、「レスポンスのステータスコード」と「結果の配列有無」で最終ページかを判断します。

実装していませんが「レスポンスステータスが200以外の場合は、数回リトライする」等の実装が必要かもしれません。（一時的なエラーによる中断と、処理完了を区別する）

イメージは以下になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/52e708e2-afe7-f42f-01e7-6c5af91dfd19.png)


# 取得した結果

取得した記事情報が以下のようにExcelに出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/d6111be3-f0bf-71c7-813b-45c905eea65f.png)

これを集計すれば、投稿の傾向などが分析できます。

# おわりに

いかがでしたでしょうか。API呼び出しの実装例として役立てば幸いです。

この記事が参考になったら、 LGTMをお願いします。閲覧ありがとうございました。
FastAPIで５文字化をやってみた


FastAPIが面白そうだったので、勉強してみることにしました。

しかし、なにか新しいことを勉強するときに出てくる大量のドキュメント、
しらないキーワードをぐぐるとさらにまた登場する新たなキーワードの山、
またそれをぐぐる、
（以下　繰り返し）

前に調べたことを忘れている

泣けてきます！

そんなときの救世主的アイデア、Reo Harada氏の[５文字化](https://qiita.com/LaO/items/03fdd8551bc85718afc3)が素晴らしかったのでまねさせていただきました。

５文字化とはどういうことかというと

####キーワードを重要な文字５文字に圧縮する

というアイデアです。


５文字化する過程で頭を使うので、印象に残るし、超短くまとめるので、要領よく覚えられます。

なにより言葉を徹底的に断舎離するので、ドキュメントの山に押しつぶされずにすみます！

####キーワード
５文字化したもの
補足とか覚書

の順に書いてあります。ただし、５文字化が苦しい場合もあり、７文字までで、また略語も可としています。


####パスパラメータ　

url中のやつ


/のあとの文字列


####クエリパラメータ　
url中のやつ
?のあとの文字列

####ワーカープロセス 
プロセス
サーバー上のバックグラウンドプロセス

####Pydantic
ライブラリ
Pythonの型ヒントを利用してData validation/serializationを行うライブラリ


####validation　
検証

####serialization	
直列化

####Responder　
フレームワーク
Web FW、Python の次世代 Web フレームワーク

####gunicorn　
サーバー
WSGIサーバー、flaskとかで使う

####Uvicorn　
サーバー
高速なASGIサーバーで、uvloopとhttptoolsにより構成

####Hypercorn
サーバー

####Starlette
フレームワーク
ASGI Framework/toolkit


####ドキュメントの自動生成	
文書を自動で　　

####WSGI 
インタフェース
WebServer Gateway Interface、サーバと PythonWebアプリとの標準インターフェース

####ASGI　
WSGIの後継
覚え方：薄着(WSGI)の後継は厚着(ASGI)


####APIサーバー
サーバー
jsonを返すサーバー、fastAPIはまさにこれをつくるもの

####APサーバー　
サーバー
アプリケーションを提供するサーバ

####Pydantic
ライブラリ
バリデーション、シリアライゼーションなど

####Starlette　
FW/TK
軽量なASGIフレームワーク/ツールキットで、非同期サービスの構築に最適

####エンドポイント	
問い合わせ先
HTTP メソッドと URL の組み合わせで実現

####httptools
ライブラリ
フレームワークに依存しないHTTPプロトコルユーティリティのコレクション

####WebAPI
[ネット越やりとり](https://qiita.com/NagaokaKenichi/items/df4c8455ab527aeacf02)

####credentials
資格情報
pwやidなどのログイン資格情報

####async def 
非同期の関数
追記予定

####uvloop
イベントループ
超高速asyncioイベントループということらしい


やばい！イベントループがわかってない
他の単語を参照するようになってきたーーー
というわけでイベントループです


####イベントループ
ループの仕組み
イベントを待機するループを持つ仕組み


###実際５文字化をやってみての感想

５文字化は思った以上にきつい作業ですが、見知らぬ単語がでてきたら、とりあえず書いておいて、「いずれqiitaにアップしてやるぞ」と思うと、モチベーションが保てます。

モチベが保てれば「大量のキーワードに押しつぶさえて挫折」ということが減るのではないかと思います。

それから、苦し紛れに追加した補足説明なんですが、あとから読みかえすにはこっちのほうが便利だったりします。

でも補足が１行にまとめらるというのも、５文字化したおかげですね。

いったん極端に短くした言葉を逆に長くするのは楽にできますので。




参考：
[FastAPIが覇権を取れるかもという話](https://qiita.com/shuto-S/items/78868cbf03f9deec0fba)
Rubyの比較演算子の挙動を変えたいなら、<=>をオーバーライドすべし

結論は、「比較演算子(`<`, `==`, `>`)ではなく、`<=>`を再定義すべし」。


## 当初の疑問

`>`と`<`と`==`の整合性ってどうやって取るんだっけ？


## 答え

`def <=>(other)` ~~(javaでいうObject#compareTo)~~を再定義する。他の`>`, `<`, `==`は触らない。
from: https://stackoverflow.com/a/13973761

`def ==(other)`の実装は、`return True if self<=>other == 0 else False`のようになっている。
(https://docs.ruby-lang.org/ja/latest/class/Comparable.html)



## 考察

なぜこんがらがったのかを考えてみた。Javaだと、

- 比較演算子(`==`, `<`, `>`)の挙動を書き換えることはできない。
- equalsToとcompareToを書き換えても、これによって比較演算子(`==`, `<`, `>`)の結果が変わることはない。(確かsortingの並び順は変わるはずだ)

一方rubyだと、

- 比較演算子(`==`, `<`, `>`)の挙動を書き換えることはできる。
- また、`<=>`を書き換えることによっても、比較演算子の挙動が変わる。
（レポート）Scrum Fest Osaka 2021 金沢『マインドと組織の変革　～北國銀行における事例～』

# [Scrum Fest Osaka 2021 Day 2](https://www.scrumosaka.org/)

2021/06/26に開催された[Scrum Fest Osaka 2021 Day 2](https://www.scrumosaka.org/)のイベントレポートです。
金沢トラックの飯久保さんのセッション「マインドと組織の変革　～北國銀行における事例～の内容」の感想を記事化しています。

# チーム参加してきました

[aslead Agile](https://aslead.nri.co.jp/solution/aslead_agile.html) のチーム「[オキザリス](https://speakerdeck.com/viva_tweet_x/huesudeyong-qi-wode-taxin-gui-timugashi-yan-wozao-rifan-sitejin-nizhi-rumadefalsewu-yu?slide=3)」にて参加してきました。
チーム4人で参加して、その場で実況しつつ、記事も作っています。
私は一人で金沢トラックに一日いました。
この記事では、お話をきいたうえで私が感じたことをまとめていきたいと思います。

# 顧客：北國銀行

金沢市に本店を持つ銀行。金融系だけではなくITにもソリューションを出している。

## 中期経営計画

銀行業だけでなく、次世代の地域総合会社を目指している。
地域全体のイノベーションに貢献する。

ただ、地方銀行を取り巻く環境は非常に厳しくなってきている。
そこで、一般的に想像する金融業だけでなく、DXの道を選んだ。

## 北國銀行の考えるDX

単なるデジタルの活用だけでなく、働き方・銀行そのものをデジタルで根本的に変えていく。
テクノロジーを戦略に活用するだけでなく、人や組織を変革し、地域社会をより良い方向に変革し続ける。
そして、北國銀行ブランドの実現を目指す。

## 議論する組織風土

対話型の議論やプロジェクト単位の意思決定を重要視。
社内外とのコラボレーションをして、アジャイル型な組織を目指す。

## 従来の北國銀行

真面目・誠実。
逆に言うと多様性が足りない。
役員は神様。
内向きな思考。
何かを進めるときに、「上層部が言うことが正しい」「過去の事例が正しい」として新しいことにチャレンジしにくい
コラボレーションがなかなかない
ここから徐々に変わってきてはいる。

## システム開発で起きていたこと

複雑な組織構造のため、提供されるサービスも複雑になってしまう「コンウェイの法則」が発動していた。

- 声が大きい人の仕様がそのまま採用され、フィードバックループが回らない。または一部しかない。
- 既存の業務の仕様がそのまま踏襲される。紙ベース・デジタルでないやり方をそのままデジタル化しただけになっている。
- お客様不在で仕様が決められる。なかなかお客様の意見を尊重できていない。
- 新しい発想が出てこない。
- 声の大きい人同士が並列で議論していて、意思決定スピードが遅い
- 責任の押し付け合い・部署間の言った言わない問題
- 内向的。外のことを考えないといけないときに「だれのためになんのためにやっているのか」というのを考えるようにしないといけない。

## いろいろやってみた

**DevOpsシミュレーション研修（フェニックスプロジェクトワークショップ）**
上の方から下の方まで、多くの人に参加してもらった。

**新入社員に向けてアジャイル研修**
全員に向けてアジャイルってなんですか？を説明

**システム子会社の設立とDX人材の採用**
ITに携わる人の比率を上げていく

**クラウドとアジャイル型開発の採用**
ITではアジャイルの考え方は浸透していたが、IT外の人にもアジャイルの進め方を浸透

**DevOpsシミュレーション研修**
ダイバーシティ（部署・年齢など）をあわせて、丸1日缶詰。
ちょっとでも新しいことを体験してみて、アンチフラジャイル／アジリティを学んでいく。

昔ながらの金融だけでなく、いろんな世界を持ってやっていく意識。
部署内で対話が行われるようになっただけでなく、部署間で対話が進むようになった。

新入社員も「モノ申すのはダメだ」と思っていた人が多かったが、あっているかあっていないか関わらず発言できるようになった。
新入社員の女性が覚醒し、色々話すようになってから、「自分たちもやっていいんだ」と思う社員が増えてきた。

## 変化の成功要因

**トップダウンアプローチ**
人事部出身の人が頭取になる風潮があったが、IT出身の人が頭取になり、デジタル化がうまく進んでいる。

**ミドルマネジメント層**
中間管理職の人も考え方に賛同し、やらされ感ではなく進んでいく。
チーム・組織・自律性・権限移譲。
これによってコラボレーションが生まれていった

# 感想
私もよくお世話になっているITプレナーズさんの講演でした。
フェニックスプロジェクトの効果は私も体感させていただいている（ファシリテーター資格もいただいている）のですが、こうしたIT外の企業でもうまく変化のきっかけにつながっている、というのが素晴らしいと思います。
トップダウンからアプローチできる、のも成功要因として大事ですね。組織変革の参考にさせていただきました。
【ZOHO CRM】Delugeを使って商談の総額をボタン 1 つで入力する方法

## 概要

商談の各データ内の[総額入力]ボタンをクリックすると、[総額]項目に関連付けられている見積書の総計を入力する方法を紹介します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1664535/4edc514b-57a7-306d-1be6-3e907bd19902.png" width=80%>


## 利用する機能

- カスタムボタン
- 関数

## 設定方法

1. [設定] > [タブ&項目] > [商談]をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1664535/46218518-b384-83ac-1bac-3fd5fd5da4e3.png" width=80%>

2. [リンクとボタン]より[最初のボタンの作成]をクリック
3. ボタン名や詳細を入力し、ボタンの配置では[ページの表示]を選択
4. "ユーザーが..どのような処理を行いますか？"にて[関数の作成]を選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1664535/3ffe1bbd-9dd7-10da-7dfe-3cad9c9e1d39.png" width=80%>

5. 関数名/表示名/詳細を入力
6. 自動的に Deluge を記述する画面に移動するので、関数を記述（下記コードを参照）
7. [Edit Arguments]にて引数を設定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1664535/77674c9b-f3f2-48d2-cf36-aade6f048d7c.png" width=80%>

8. 関数を保存
9. ボタンを表示する権限を指定
10. リンクとボタンの[保存]をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1664535/3f5aed4b-46c5-f249-b333-da915837189a.png" width=80%>

## Deluge コード

```deluge
//関連リストの見積書を取得
quotes = zoho.crm.getRelatedRecords("Quotes","Deals",dealId);

//見積書の総計を取得
all_total = 0;
for each  quote in quotes
{
    total = quote.get("Grand_Total");
    info total;
    all_total = all_total + total;
}
info all_total;

//総額項目を更新するための辞書を生成
amount = Map();
amount.put("Amount",all_total);
info amount;

//商談の総額項目を更新
updete = zoho.crm.updateRecord("Deals",dealId,amount);
info zoho.crm.getRecordById("Deals",dealId).get("Amount");
return "Successfully updated!";
```

※実装は自己責任でお願いいたします。
※仕様が変わる場合があります。


### 補足：Edit Arguments の設定

手順 7 の"[Edit Arguments]にて引数を設定"では、商談の ID を渡すように設定します。"#"を入力するとパラメータを入力できます。今回は商談の ID を設定しましたが、この機能を利用するといろいろと出来そうですね。


### 余談：Deluge とは

Degule とは、Zoho 独自のスクリプト言語です。Zoho CRM をはじめとして Zoho のいろいろな製品で利用できる言語みたいです。

自分はプログラマではないので専門的なことはできませんが、Zoho 製品を活用するために Deluge を少しずつ覚えてみたいと思い、下記のサイトを使って学びました。最近は Google 翻訳や DeepL 翻訳などの自然言語処理が素晴らしいので英語が苦手な自分でも何とかやれました。

[Deluge 学習サイト（英語）](https://deluge.zoho.com/learndeluge#Welcome!)


## 結果

今回作成した[総額入力]ボタンをクリックすると、見積書の総計の合算値が[総額]項目に入力されました。

【詳細】
①商談に2つの見積書が関連付けられている
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1664535/13164046-af6c-ffcc-b0dc-15e9577ef309.png" width=80%>

②[総額入力]ボタンをクリックすると、2つの見積書の総計(990,000 + 1,100,000 = 2,090,000)が[総額]に入力される
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1664535/0a7c4d90-86d4-b476-6503-b95edc8c578c.png" width=80%>



<br/>

> 【重要】
関数の実装は自己責任でお願いします。またこのような記事を書いておいて言うのもなんですが、関数を利用したカスタマイズを手放しで推奨しておりません。Zoho CRMだけでなくSalesforceなどの製品でもそうですが、できるだけカスタマイズせずともうまく行くように運用側を少し妥協するなどの気持ちが必要だと自分は考えています。CRMをゴリゴリにカスタマイズした結果、身動きが取れなくなったところや活用できなくなったところをよく聞くので...

<br/>

## まとめ

今回は、関数とボタン機能を利用して商談の総額項目を 1 クリックで更新する方法の備忘録でした。総額項目は、売上予測タブなどでも利用される重要な項目なので、簡単かつミスなく入力できるようにしたいと考えている方の参考になれば幸いです。

<br/>
ではでは、よい ZOHO ライフを！
terminatorでpuTTY style pasteにすると設定画面が開けなくなる

## 前置き terminatorのおすすめ初期設定
ターミナルソフトのterminatorの初期設定はイマイチいけなてないので、teratermチックですが以下のように変更しています。

設定画面-一般-puTTY style pasteにチェックをいれる
→右クリックでペースト

設定画面-プロファイル-一般-選択をコピーにチェックをいれる
→選択した時点でコピー

設定画面-プロファイル-一般-タイトルバー表示のチェックを外す
→無駄スペース解消

設定画面-プロファイル-背景-背景を透過にチェックをいれる
→お好み

設定画面-プロファイル-スクロール-無限のスクロールバックにチェックを入れる
→コマンド履歴をすべて残す

## 問題があった
設定画面を開くにはterminator上で右クリックしていましたが、右クリックを`puTTY style paste`にキーを割り当てることで設定画面が開かなくなりました。困った！

## 解決方法
以下に書いていました。Shift + F10 で設定画面が表示されます。よかった！
[How to ask Terminator preference menu?](https://unix.stackexchange.com/questions/452590/how-to-ask-terminator-preference-menu])
Salesforce数式項目_Excel.ISOWEEKNUM関数

**Salesforceの数式項目でExcel関数：ISOWEEKNUM( )と同じ結果を実現する：**

```java:数式項目「日付が年度の何週目」
FLOOR( ( StartDay__c - DATE( YEAR( StartDay__c - WEEKDAY( StartDay__c -1) + 4 ) , 1 , 3 ) + WEEKDAY( DATE( YEAR( StartDay__c - WEEKDAY( StartDay__c -1) + 4 ) , 1 , 3 ) ) + 5 ) / 7)
```
Rubyのオブジェクト指向の宿題（１）

# 宿題

以下のコードを実行するとどうのような結果になりますでしょうか？

```
module Mod
  def foo
    puts "Mod"
  end
end
class Cls1
  include Mod
  def foo
    puts "Cls1"
    super
  end
end
class Cls2 < Cls1
  def foo
    puts "Cls2"
    super
  end
end

Cls2.new.foo
```

# 悩んでいるところ

クラスCls1は特に他のクラスから継承する明記がないのに、superはどういうことでしょうか？

# 実際の実行結果

```
[35] pry(main)> Cls2.new.foo
Cls2
Cls1
Mod
=> nil
```

# 解説

## 原因

rubyのメソッドにとって、自分のクラス　→　インクルードしているモジュール　→　スーパークラス　→　スーパークラスのインクルードしているモジュールの順に検索されます。

## 流れ

Cls2クラスのインスタンスでfooを呼び出すと、Cls2クラスのfooが実行され、Cls2を画面に出力したあと、superでCls1クラスのfooを呼び出します。
=> Cls2
Cls1クラスのfooの中でCls1を画面に出力した後、superでModモジュールのfooを呼び出し、Modを画面に出力します。
=> Cls1
=> Mod
Dockerを用いたローカルPostfixサーバー構築方法 メモ

* ローカル環境でメール通知系のテストをするためにメールサーバー(Postfix)を構築したかったので、Dockerを用いたその構築方法をメモする。

 
## Postfixとは

* オープンソースのメール転送エージェント(Mail Transfer Agent、MTA)ソフトウェア。
* MTA間のメール送信/受信を行う。



## メールサーバーコンテナ起動方法

* [こちら](https://hub.docker.com/r/catatnight/postfix/?ref=login)のイメージを利用させていただく。
* Dockerコマンド

```shell
docker run -d -p 25:25  --name testmailserver -e maildomain=example.com -e smtp_user=username:password catatnight/postfix
```

* ユーザー認証設定を複数指定する場合
    * `-e smtp_user=user1:pwd1,user2:pwd2,...,userN:pwdN`のように指定する。

* Open DKIM (Domainkeys Identified Mail) を有効化する場合
    * なりすましやメール改竄を検知するための電子署名方式の送信ドメイン認証。
    * `-v /path/to/domainkeys:/etc/opendkim/domainkeys`のように指定する。
        * 鍵ファイル(`.private`)を`/etc/opendkim/domainkeys`へマウントする。

* TLSを有効化する場合
  * `-v /path/to/certs:/etc/postfix/certs`のように指定する。
        * 鍵ファイル(`.key`)と証明書(`.crt`)を`/etc/postfix/certs`へマウントする。



### 動作確認

* **コンテナ起動状態確認**

  ```shell
  docker ps
  CONTAINER ID   IMAGE                         COMMAND                  CREATED                  STATUS          PORTS
         NAMES
  df86879c9e0c   catatnight/postfix            "/bin/sh -c '/opt/in…"   Less than a second ago   Up 3 seconds    0.0.0.0:25->25/tcp
         testmailserver
  ```

* **接続確認**

  * 自身の環境がWindowsのため、telnetを有効化する。
    * クイックアクセスメニューから［アプリと機能］を実行し、［プログラムと機能］のリンクをクリックし、［Windowsの機能の有効かまたは無効化］を実行する。
    * 追加機能の一覧画面から［Telnetクライアント］項目を選んで追加する。
  * 次のコマンドを実行する。

  ```shell
  telnet localhost smtp
  
  220 example.com ESMTP Postfix (Ubuntu)
  ```



次はアプリとつなぐところまで試したい。

## 参考情報

* [Postfix](https://ja.wikipedia.org/wiki/Postfix)
* [catatnight/postfix](catatnight/postfix)
DockerでJupyter

Dockerfile

```Dockerfile
FROM ubuntu
RUN apt -y update && apt -y upgrade
RUN apt install -y python3 python3-pip
RUN pip install jupyterlab
WORKDIR /
RUN mkdir /code
CMD ["jupyter-lab", "--ip=0.0.0.0", "--port=8888", "--allow-root"]
```

以下を実行

```\
docker build . -t myjupyter
docker run -p 8888:8888 -v `pwd`:/code myjupyter
```
【LeetCode】就活に向けたコーディングテスト対策 #14

#はじめに
こんばんは．
M1就活生が[LeetCode](https://leetcode.com/)から，easy問題を中心に**Python**を用いて解いていきます．

https://leetcode.com/

↓では，解いた問題のまとめを随時更新しています．
[まとめ記事](https://qiita.com/halpi/items/43761b89a1873dcc9a5c)

https://qiita.com/halpi/items/43761b89a1873dcc9a5c

#問題
今回解いたのは，難易度easyから [問題66のPlus One](https://leetcode.com/problems/plus-one/) です．
問題としては，整数を表す10進数が1桁ずつ入った配列`digits`が与えられたとき，その数字を 1 増やすというもの．例えば，`digits = [9]`であれば，Outputは`[1, 0]`というふうに位上がりが発生します．
入力例と出力例は以下の通りです．

Example 1:

```python
Input: digits = [1,2,3]
Output: [1,2,4]
Explanation: The array represents the integer 123.
```

Example 2:

```python
Input: digits = [4,3,2,1]
Output: [4,3,2,2]
Explanation: The array represents the integer 4321.
```

Example 3:

```python
Input: digits = [0]
Output: [1]
```

#書いたコード
書いたコードが以下になります．

```python
class Solution:
    def plusOne(self, digits: List[int]) -> List[int]:
        string_digits = ''.join(map(str, digits))
        plusone_string_digits = str(int(string_digits) + 1)
        return list(map(int, plusone_string_digits))
```

まず，入力配列`digits`を`join()`メソッドを使います．数値のリストを連結する場合，`join()`ではエラーとなるため，`map()`で文字列に変換してから連結させます．リスト内包表記を使っても同様の処理を記述できます．

```python
>>> digits = [1, 2, 3]
>>> string_digits = ''.join(digits)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: sequence item 0: expected str instance, int found

>>> string_digits = ''.join(map(str, digits))
>>> string_digits
'123'

>>> string_digits = ''.join([str(n) for n in digits])
>>> string_digits
'123'
```

文字列として連結した後，整数型で`+1`を計算し，それを再度リストとして返しました．
Pythonでは，`list()`を使うと，文字列を1文字ずつリストに変換することができます．`join()`同様，数値ではエラーとなります．`map()`を使うか，リスト内包表記を使って数値に変換することで，うまくリストに変換することができます．

```python
>>> string_digits = '123'
>>> plusone_digits = list(string_digits)
>>> plusone_digits
['1', '2', '3']

>>> plusone_digits = list(int(string_digits))
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: 'int' object is not iterable

>>> plusone_digits = list(map(int,string_digits))
>>> plusone_digits
[1, 2, 3]

>>> plusone_digits = list([int(n) for n in string_digits])
>>> plusone_digits
[1, 2, 3]
```

#おわりに
Pythonを使うと，簡単に解くことができますが，メソッドや仕様を深く理解できるので勉強になります．しかし，アルゴリズム力を高めるためには，組み込み関数やメソッドに頼らずに解くべきですね笑

今回書いたコードはGitHubにもあげておきます．

https://github.com/halpi17/LeetCodeStudy/blob/master/066/plusOne.py

[前回](https://qiita.com/halpi/items/132ef389e15d28f395c6)　[次回](https://qiita.com/halpi/items/399d37b0c0b0db7fb03e)
DockerでSpring Bootをビルドして実行する

#Dockerを触ってみる

jupyterプロジェクトの表示はやってみたので、Docker上でSpringBootを起動してみる。

#API作成

まずはSTSでAPIのエンドポイントを追加。

maven istallからjarファイルを作成。
target配下にjarファイルが作成される。

#Dockerファイルを作成

```Dockerfile
FROM openjdk:8-jdk-alpine

ARG JAR_FILE=target/*.jar
COPY stkpp.jar stkpp.jar

VOLUME /tmp
RUN mkdir /app
WORKDIR /app
ENV JAVA_OPTS=""
ENV JAR_TARGET "stkpp.jar"

ENTRYPOINT ["java","-jar","/Skt/target/stkpp.jar"]
```

#コンテナー化

mavenを使用しているので、次のコマンドで実行

```
docker build -t springio/gs-spring-boot-docker .
```
このコマンドでイメージを作成し、springio/gs-spring-boot-docker としてタグ付けします。

#コンテナを起動
```
docker run -p 8080:8080 springio/gs-spring-boot-docker
```

http://localhost:8080/

で動作確認できる。
Vue.jsでonScrollを特定の要素に対して実装する

# なにこれ
1. Vue.js（筆者はnuxt.jsを使った）使ってて、特定の要素内でスクロール時に処理したい。
1. おっ、公式ドキュメントでonScrollのサンプルあるやんけ！
1. 動かないんだが？？？

という人向け

# 結論
カスタムディレクティブに停止してるコードをこれに変える

```javascript
import Vue from 'vue'

Vue.directive('scroll', {
    inserted: function (el, binding) {
        let f = function (evt) {
            if (binding.value(evt, el)) {
                el.removeEventListener('scroll', f)
            }
        }
        el.addEventListener('scroll', f)
    }
})
```

# 公式のカスタムディレクティブの問題点

公式では以下のようなコードでイベントリスナーを追加している。

```javascript
Vue.directive('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f)
      }
    }
    window.addEventListener('scroll', f)
  }
})
```
https://jp.vuejs.org/v2/cookbook/creating-custom-scroll-directives.html

なんだけど、`overflow-y: scroll`とか使って特定の要素内スクロールを実現すると、動かない。
これはwindowとしてはscrollしてないので、イベントが発火しないからである。
>Web サイト上でスクロールイベントと連動するアニメーションなど
公式の対象としては上記内容を想定しているので、当たり前と言えば当たり前なのだが、筆者がやりたいことには合致しなかった。

# 修正

windowではなくelを対象にしてあげればよい。

```javascript
// window.removeEventListener
el.removeEventListener
// window.addEventListener
el.addEventListener
```

ただこれだとページ全体のスクロールイベントは発火しなくなるので、別のカスタムディレクティブを設定してあげるとよいかもしれないね。
NextjsのgetServerSidePropsでダイナミックルーティングのidを取得する方法

## やること

通常、Next.jsのダイナミックルーティング(post/1)ではidの1を取得するためには、下記のように書くと値がとれます。

```js
const { id } = router.query;
```

これをgetServerSidePropsの中で取得するにはどうすればいいでしょうか。

```js
export async function getServerSideProps(context) {
```

下記のようにすれば取れます。

```js

export async function getServerSideProps(context) {
  const { id } = context.query;
```

## 参考

[Dynamic routing with getServerSideProps in Nextjs](https://stackoverflow.com/questions/61222726/dynamic-routing-with-getserversideprops-in-nextjs)

[NextjsのgetServerSidePropsでダイナミックルーティングのidを取得する方法](https://off.tokyo/blog/dynamic-routing-with-getserversideprops-in-nextjs/)
【初学者】human_attribute_nameとは

**railsを勉強中に出てきたhuman_attribute_nameについての記事です。**

# モデル名.human_attribute_name(:カラム名)とは
ActiveRecord::Baseのクラスのメソッド
内部的に I18nモジュールを利用してくれるやつ
つまり、日本語化とかするときに使うって認識でいれば良いと思います。


#設定方法
【参照先】config/locales/ja.yml
こんな感じで記述をしておきます。

```config/locales/ja.yml
ja:
  activerecord:
    errors:
      messages:
        record_invalid: "バリデーションに失敗しました: %{errors}"
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
    models:
      tasks: タスク
    attributes:
      task:
        id: ID
        name: 名称
        description: 内容
        created_at: 登録日時
        updated_at: 更新日時
```

#使い方

翻訳したい部分のviewファイルに記述するときは以下のようにしましょう。
今回はToDoアプリを作成していると想定しています。

```
Task.human_attribute_name(:name)
=> "名称"

t("activerecord.attributes.task.name")
=> "名称"

Task.human_attribute_name(:created_at)
=> "登録日時"

t("activerecord.attributes.task.created_at")
=> "登録日時"

```

なんか長くて複雑そうですが、やっていることは単純ですね！
Linuxコマンド備忘録

# はじめに
* 備忘録としてLinuxコマンドを書き留めておく。
* 気になったものがあれば都度追加する。

## ファイルのバックアップコピーと反映を1つのコマンドで実行
### 改善前

~~~
# cp -p /app/fileA.sh /app/fileA.sh_20210624 （ファイルのバックアップ）
# cp -f /tmp/fileA.sh /app/fileA.sh （ファイル反映）
# rm -f /tmp/fileA.sh （ファイル削除）
~~~

### 上記と同じことを1つのコマンドで実行できる。

~~~
# mv -fb --suffix=_$(date +%Y%m%d) /tmp/fileA.sh /app/fileA.sh
~~~

* オプション説明
    * -f
        * コピー先に同じ名前のファイルがあっても警告なしで上書きする。
    * -b
        * コピー先に同じ名前のファイルがある場合は上書きする前に、上書き前のバックアップファイルを作成する。
    * -S（--suffix）
        * -b（--backup）オプションで作成されるバックアップファイルの名前の後ろにつく文字列を指定することができる。


## その他あれば、こちらに都度追加して残しておく
AuthenticationとAuthorizationを使い分ける

セキュリティ周りでよく聞くわりに、意外と違いがわかっていなかったのでここで知識を持っておくことが目的。


Authenticationは**認証**、Authorizationは**認可**です。和訳しても似ているやん(嘆き)。


## Authentication(認証)

「あなたが何者か」「これは何か」を特定するのが認証。
認証に対するレスポンスは`Who, What`で開かれた回答のイメージ。

```
Aの身分証を持っている/AのIDPASSを知っている → このユーザーはAだ！
```


## Authorization(認可)

「権限を持っているか」を判別するのが認可。
認可に対するレスポンスは`Yes, No`で閉じられた回答のイメージ。

```
Xライセンス証明書を持っている → このユーザーはアクセスしてOK！
```


## 両者の関係

一般に権限はユーザー依存が多いので、`認証→認可`の処理フローができていることが多い。

実際のサービス上では以下のような裏処理が働いている。

```
1. 認証
	ログインする
	→ ユーザーを特定する
	
◎ ユーザーを証明するトークンを発行する

2. 認可
	サービスにアクセスを依頼する
	→ トークンをもとに権限を確認する
	→ アクセス許可を与える
	→ アクセス完了
```


## 思ったこと

この言葉に限らないが、曖昧な言葉を僕以外の万人が正確に使い分けられているわけはないと思っている。
つまりは`Authentication`って書いてあっても`認証`のことかと固定して考えるのは意外と落とし穴かもしれないと思ったり。(よくわかっていない人が認可のつもりで使っているのかもしれないし、なんならどちらでもないのかもしれない…。)
PowerShellで表結合っぽいことをする

SQLでJOINを使って表結合するのは便利ですが、そのためにデータベースを構築するのも面倒なので、ハッシュテーブルで簡易に実装してみます。

まず、こんな感じのCSVを用意します。

```csvs:date_moncster.csv
date,monster
2021-07-01,ピカチュウ
2021-07-02,イーブイ
2021-07-02,ピカチュウ
2021-07-03,カモネギ
```
それに対し、こんな感じのCSVで取得した値を結合します。

```csvs:monster_value
monster,value
ピカチュウ,100
イーブイ,10
```

コードはこちら。

```powershell
$monster_value = Import-Csv ".\csv_sample\monster_value.csv" -Encoding UTF8

$monster_hash = @{}
$monster_value | ForEach-Object {
    $monster_hash.add($_.monster,$_.value)
}
Write-Output $monster_hash['ピカチュウ']

$date_monster = Import-Csv ".\csv_sample\date_monster.csv" -Encoding UTF8

$date_monster | ForEach-Object {
    if ($monster_hash[$_.monster]){
        Write-Host "$($_.date),$($_.monster),$($monster_hash[$_.monster])"
    }
}
```
`monster_hash`というやつが名前の通りハッシュテーブルです。これにモンスターごとの値を格納しておき、date_monster.csvから１行ごとに読み込みながら結合します。

こんな出力になります。

```
2021-07-01,ピカチュウ,100
2021-07-02,イーブイ,10
2021-07-02,ピカチュウ,100
```


カモネギの行が欲しい場合（SQLでいうところのOUTER JOIN）はifを取っちゃえばOKです。
【Nuxt.js】今まで書いた記事のWordPressリンクまとめ

[【Nuxt.js】Nuxt文法編：cookie①ライブラリ不要の簡単読み書き](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91nuxt%e6%96%87%e6%b3%95%e7%b7%a8%ef%bc%9acookie%e2%91%a0%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e4%b8%8d%e8%a6%81%e3%81%ae%e7%b0%a1%e5%8d%98%e8%aa%ad%e3%81%bf%e6%9b%b8/)
[【Nuxt.js】Nuxt文法編：cookie②ライブラリ不要の簡単読み書き](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91nuxt%e6%96%87%e6%b3%95%e7%b7%a8%ef%bc%9acookie%e2%91%a1%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e4%b8%8d%e8%a6%81%e3%81%ae%e7%b0%a1%e5%8d%98%e8%aa%ad%e3%81%bf%e6%9b%b8/)

[【Nuxt.js】開発ブログ：firebaseでチャットアプリ①](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91%e9%96%8b%e7%99%ba%e3%83%96%e3%83%ad%e3%82%b0%ef%bc%9afirebase%e3%81%a7%e3%83%81%e3%83%a3%e3%83%83%e3%83%88%e3%82%a2%e3%83%97%e3%83%aa%e2%91%a0/)
[【Nuxt.js】開発ブログ：firebaseでチャットアプリ②](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91%e9%96%8b%e7%99%ba%e3%83%96%e3%83%ad%e3%82%b0%ef%bc%9afirebase%e3%81%a7%e3%83%81%e3%83%a3%e3%83%83%e3%83%88%e3%82%a2%e3%83%97%e3%83%aa%e2%91%a1/)
[【Nuxt.js】開発ブログ：firebaseでチャットアプリ③](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91%e9%96%8b%e7%99%ba%e3%83%96%e3%83%ad%e3%82%b0%ef%bc%9afirebase%e3%81%a7%e3%83%81%e3%83%a3%e3%83%83%e3%83%88%e3%82%a2%e3%83%97%e3%83%aa%e2%91%a2/)
[【Nuxt.js】開発ブログ：firebaseでチャットアプリ④](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91%e9%96%8b%e7%99%ba%e3%83%96%e3%83%ad%e3%82%b0%ef%bc%9afirebase%e3%81%a7%e3%83%81%e3%83%a3%e3%83%83%e3%83%88%e3%82%a2%e3%83%97%e3%83%aa%e2%91%a3/)
[【Nuxt.js】開発ブログ：firebaseでチャットアプリ⑤](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91%e9%96%8b%e7%99%ba%e3%83%96%e3%83%ad%e3%82%b0%ef%bc%9afirebase%e3%81%a7%e3%83%81%e3%83%a3%e3%83%83%e3%83%88%e3%82%a2%e3%83%97%e3%83%aa%e2%91%a4/)

[【Nuxt.js】WYSIWYGエディター: Quillを使ってみた](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91wysiwyg%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf%e3%83%bc-quill%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/)

[【Nuxt.js】Nuxt実践編：ページトップボタンをwindow.scrollToで実装する](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91nuxt%e5%ae%9f%e8%b7%b5%e7%b7%a8%ef%bc%9a%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%88%e3%83%83%e3%83%97%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92window-scrollto%e3%81%a7%e5%ae%9f%e8%a3%85/)
styled-componentsを利用したプロダクトにstylelintを入れたい話。

# 背景
個人開発しているプロダクトでは`styled-components`を採用しています。 cssプロパティの書き方に関して個人的ルールを設けているため、時々コードを書いているときに「　あれこれってどっちが先だっけみたい？　」 みたいなことが発生します。こんなことで、いちいち頭のリソースを使いたくなかったので、サクっとフォーマットやプロパティーをオーダしてくれると嬉しいなと考え、プロダクトに`stylelint`導入を考えました。 

要件としてはlint後に次のようになっていれば、ok

``` js:lint前
const Navigation = styled.nav`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px;
  border-radius: 48px;
  background-color: white;
`;
```

``` js:lint後
const Navigation = styled.nav`
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: white;
  border-radius: 48px;
`;
```

ちなみにstyled-componentsの公式にある`stylelint`に関して次のようにありました。 

> Beware that due to limitations on what is possible for Stylelint custom processors we cannot support the --fix option

どうやら、`stylelint-processor-styled-components`をプロセッサーとして利用する場合は、自動修正してくれないみたい？？


## 実装
> 自分が調べた範囲内での紹介なので、他にも方法があるかもしれないです。

利用するモジュールをインストールしていく

```
$ yarn add -D stylelint stylelint-config-standard stylelint-config-recess-order
```

簡単にそれぞれのモジュールについて説明をしておくと

- [stylelint](https://github.com/stylelint/stylelint) : stylelint本体
- [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard): 色々な スタイルルールを適用してくれる。
- [stylelint-config-recess-order](https://github.com/stormwarning/stylelint-config-recess-order): スタイルを一定の規則に則ってソートしてくれる。


次にプロジェクト直下に`.stylelintrc.js`を作成し、次のように設定していきます。

``` .stylelintrc.js
module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recess-order"
  ]
};

```


最後に`package.json`の`scripts`を追加。

``` package.json
 "lint": "stylelint './src/**/*.tsx' --fix"
```


無事、`scripts`を走らせると自動整形されていることがわかると思います。 


# 総括
調べる中で様々なstylelintのルールを見つけました。チームやプロダクトにあった、ルールを決めるといいと思います。また、プロパティーのオーダーを入れたことでプロジェクト全体で記述が統一されるため非常に読みやすく、見やすくなった印象を受けました。
Rubyで4乗的ガウスを解く方法


　1から40までの整数の4乗の和をプログラムで算出してみました。


　1⁴ + 2⁴ + 3⁴ + ........ + 40⁴

　上記の計算の結果をプログラムで出したいということです。

　僕は最終的に以下のコードでこの問題を解きました。
　答えは「21781332」です。


```ruby
count = 1
sum = 0
while count <= 40
  sum += count**4
  count += 1
end
puts sum
```

　では答えを出した手順を以下の流れで説明したいと思います。

1. 少ない数字で試してみた
1. ひとまず40回繰り返し処理をしてみた
1. 40回目の総和だけを算出できるようにしてみた
1. whileを使ったやり方を試してみた


##1. 少ない数字で試してみる
　まずは試しに1から3までの4条の和を出してみました。

```ruby
num = 1**4 + 2**4 + 3**4
puts num
```

　これで1と16と81の合計である「98」を出せることが分かりました。

##2. ひとまず40回繰り返し処理をしてみた
　あとは上記の計算を40回繰り返せばいいだけだと考えました。

```ruby
num = 0
40.times do |i|
  num += (i+1)**4
  puts num
end
```
　これで40回分の総和が算出されるようになり、「21781332」という結果も出せます。


##3. 40回目の総和だけを算出できるようにしてみた
　ここからはおまけです。上記のコードでは1回目から40回目までの総和が全て出力されます。そこで40回目の総和だけを出力させるコードにしたい場合も考えてみました。

```ruby
num = 0
40.times do |timesCount|
  n = timesCount + 1
  num += n**4
  if n == 40
    puts num
  end
end
```
　「timesCount」を用いて処理の回数を数えて、40回目の時だけ総和を出力させる形です。

##4. whileを使ったやり方を試してみた。
　上記までのやり方で問題はなさそうですが、理解を深める目的で他のやり方も試してみました。whileを使って実装し、分かりやすくするために変数名も変えてみました。

```ruby
count = 1
sum = 0
while count <= 40
  sum += count**4
  if count == 40
    puts sum
  end
  count += 1
end
```
　こちらの方がわかりやすいかなと思います。ただ僕はまだまだ勉強不足であるため、もっと可読性の高いコードを追求できるはずです。

####※追記

```ruby
count = 1
sum = 0
while count <= 40
  sum += count**4
  count += 1
end
puts sum
```

　if文を使わなくても「puts sum」をwhileから追い出すだけで40回目の総和を出せます！初歩的なミスでした。コメント欄でさらにシンプルなコードを教えていただいているので、参考にしてください!

　またこちらの記事はもともと僕が「はてなブログ」で書いていた記事です。
[4乗的ガウスを解く　<はてなブログ>](https://kim-shun.hatenablog.com/entry/2021/06/18/233041?_ga=2.90927378.963533827.1624519528-296921127.1624519528)
　はてなブログで書いていた記事を随時Qiitaに移行していこうと思います。



　以上です。ご意見を頂けるとありがたいです。
【Docker】環境変数を利用して、PORT番号を変更してみる　no.19

![パンプキン カフェ (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/ed63af67-2c80-57ea-3806-96c3cb8cdf3e.png)


こんにちは。まゆみです。

Dockerについての記事をシリーズで書いています。

今回の記事では、環境変数を利用してPORT番号を変える方法を書いていこうと思います

環境変数はPORT番号以外でも用いられる場面が多いので、様々な場面で応用していただければ幸いです。

ではさっそく始めていきますね。

#環境変数を使うメリット

Dockerfileで環境変数を設定することで、PORT番号に変更があった時に、 <font color="Red">わざわざDockerfileからImageをrebuildしなくても済みます。</font>


#環境変数の設定

環境変数の設定は、Dockerfileで行います。

今回はPORT番号に対して環境変数を設定したいので、下記のようなコードになります(80がデフォルト値になります)

ちなみにEXPOSEで指定するのは、所定のネットワークのどのポートをリッスンするかを指定します。

```
ENV PORT 80

EXPOSE $PORT
```

下のスクショのような感じになります

また、環境変数の設定の仕方は上記の方法以外にもありますので、興味のある方は[こちら](http://docs.docker.jp/v1.11/engine/reference/builder.html#env)からどうぞ。


![2021-06-26_8-46-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/c20415fe-aa17-00f6-3866-6feed52e4e57.png)

Dockerfileを書き換えたら、そのDockerfileを基にしたイメージを作るため、一度rebuildしておいてください。

#Containerを実行する

では先ほどのプロセスでrebuildしたイメージからContainerを実行してみます。

その際、

```
--env PORT=(変更後の番号)
```

とオプションを付けてrun します

80から8000に変更してみます。

```
 docker run -p 3000:8000 --env PORT=8000 <ImageID>
```
環境変数を使えば、PORT番号を変更したからと、わざわざDocerfileを書き換えてrebuildする必要もなく、コマンド上でPORT番号の変更に対処する事ができます。

また、--envオプションは、『-e』を代用しても大丈夫です。


#環境ファイルを使う

また、環境ファイル(.envファイル)を別に作って、そのファイルの中に環境変数を設定する事もできます(下のスクショ参考)

![2021-06-26_9-16-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/8c2ce114-e7aa-3ff7-6dce-77cd5983057d.png)


環境ファイルを使った場合、Containerをrunする際につけるオプションは

```
--env-file ./.env
```

になります

カレントディレクトリ―(./)にある.envファイルの環境変数を使えと指示します。

#まとめ

今回の記事はここで締めくくらせていただきます。

お役に立てれば幸いです。
Amazon Simple Email Service (SES) 概要


## Amazon SESとは

* 任意のアプリでメールを送信できるようにするAWSのEメール送受信サービス。



## 利用用途

* **Eメール送信**
  * トランザクションメッセージ送信：購入確認、出荷通知、ポリシー変更
  * マーケティングメッセージ送信：広告、ニュースレター
  * システム通知：ヘルスレポート、アラート、ワークフローステータス更新
* **Eメール受信**
  * お客様からのメールに応じたサポートチケット作成
  * Eメール自動返信
  * バウンス、苦情処理
  * メーリングリストのサブスクライブ解除リクエスト処理

## 利点

- **導入コストが低い**
  - SESを利用するために最低限必要なもの：AWSアカウントとメールアドレス、ドメインのみ。
  - メールサーバー管理、ネットワーク構成などの複雑な設定が不要。
  - すぐに利用開始できる。
- **低価格**
  - 使用分に対してのみ料金が発生する。固定費や最低料金がない。
  - EC2でホストされているアプリから送信した場合、毎月 62,000 通のメールまで無料で送信可能。
- **高い配信性能**
  - 送信メールが受信されやすい（スパム判定されにくい）。
    - 送信したメールが確実に届くように、送信頻度や量のコントロール、アドレス偽装への対策、ウイルスのスキャンなどといった機能を用いて高い信頼性を維持する。

## メール送信

### メール送信方法

* **Amazon SESコンソール**
  * ユースケース：システムセットアップ時にテストしたい場合
* **Amazon SES API**
  * ユースケース：アプリから直接メール送信したい場合
  * SendEmail API 
    * From,To,Subject,Bodyを用意して、SES側でメッセージを生成して送信する。
  * SendRawEmail API :  
    * メッセージ全体をアプリ側で生成して送信する。
* **SMTPインタフェース**
  * 生成済みのEmailメッセージを受け取って送信するSESのSMTPエンドポイント
  * ユースケース：既存の送信用SMTPサーバーからのリレーする場合、SMTPを前提としてプログラムから直接利用する場合

### その他のメール送信関連機能

#### 送信制限

* 次の内容を制限することができる。
  * 送信Eメール数、送信レート、送信クォータ(24時間に送信できるメール数)、最大送信レート(1秒当たりにアカウントから受け付けるEメールの最大数)

#### 送信アクティビティモニタリング

* 次のイベントをSESコンソール、SES API、CloudWatchで取得することができる。
  * 送信、拒否、バウンス、苦情、配信、オープン、クリック、レンダリング失敗

#### トラッキング

* オープントラッキング：メッセージが誰に開かれたかを把握することができる。
* クリックトラッキング：受信者がリンクをクリックしたかを把握することができる。

#### メールテンプレートを用いたパーソナライズメール送信

* メールテンプレートを作成し、パーソナライズしたメールを送信する。
  * 件名、本文を、受信者ごとにパーソナライズする。
  * アカウントごとに最大10000テンプレート作成可能。

## メール受信

* 自身のドメイン宛のメールを受信するメールサーバーとしても利用できる。

### 主な機能

* 他のメールサーバーとの通信
* スパム、ウィルススキャン
* 送信元に応じた受信拒否
* ドメインに含まれる受信者宛のメール受信
* 受信内容に応じたアクション

### メール受信時に利用可能なアクション

* S3バケットへのメール配信
* SNSトピックへのメール公開
* Lambdaファンクション実行
* バウンスアクション
* ヘッダー追加

など

## 料金

* **E メールメッセージ**

  * 送受信する各 1,000 通の E メールにつき、0.10USD。

* **送信データの料金**

  * 送信するメッセージのデータ 1 ギガバイト (GB) ごとに0.12USD 。

* **受信メールチャンク**

  * 受信メールチャンク 1,000 通につき、0.09USD。
    * 1受信メールチャンク：ヘッダー、メール本文 (文字と画像)、添付ファイルを含めた 256 キロバイト (KB) の受信データ。

* **AWS の他のサービスの料金**

  * Amazon SES の設定や利用形態に応じて、上記以外の AWS のサービスに対する月額料金が発生する。

    * Amazon EC2 でホストされているアプリケーションを使用して E メールを送信する。

    * 受信メッセージを Amazon Simple Storage Service (Amazon S3) バケットに転送する。

      など

## 参考情報

* [Amazon Simple Email Service](https://aws.amazon.com/jp/ses/)
* [Amazon Simple Email Service (Amazon SES)](https://d1.awsstatic.com/webinars/jp/pdf/services/20190521_AWS-BlackBelt_AmazonSES.pdf)※BlackBelt資料
* [【AWS】メール配信サービスSESの概要から使い方まで](https://techplay.jp/column/614)
【Gatsby】SearchConsoleで気づいたらサイトマップが404になっていた！？

# はじめに
こんにちは。昨年の緊急事態宣言発令に伴い、当時持っていた定期券を払い戻ししたく、定期券売り場に行列できていたので、あとで対応できるように封だけしてもらっていたのですが、持っていくのすっかり忘れていました...。あーもったいないことした、筆者です :innocent:

さて、今回は、気づいたらSearchConsoleでサイトマップが最近読み込まれないなぁと思ったら、サイトマップが404になっていた件について記していこうと思います。

# サイトマップは何処へ
なんか増えとるし、階層掘っておるぞ..。

## 昔
1. `https://example.com/sitemap.xml`

## 新
1. `https://example.com/sitemap/sitemap-index.xml`
1. `https://example.com/sitemap/sitemap-0.xml`

# 解決策
現在のサイトマップのURLで登録してみる
`https://example.com/sitemap/sitemap-index.xml`

あ、行けたわ :v:

# 原因
バージョン4以降にしたときに、options.outputの値が`sitemap`になって、階層が変わったためみたいです。
また、サイトマップのファイル名も変更されています。

# おわりに
以前gatsbyv2=>v3にアップグレードした際に、このプラグインもバージョンが上がりその結果、サイトマップのurlが変わっていたみたいです :sweat: 

無事に読み込まれるようになってホッとしました :smile: 

それでは！
正規表現で泣きました

こんにちは！
僕は今、プログラミングスクールの
最終課題をやっています。
仕事をしながらスクールに通って３ヶ月が
経とうとしています。
「１００％理解してからカリキュラムを進めるんじゃなくて、
とりあえず60％ぐらいの理解で
わからない、覚えてないと思った時に振り返ればいい。」
と思って進めてきました。

最終課題では自分で１からWebアプリケーションを作成するのですが、
覚えてないことだらけで震えました。

この記事ではユーザー登録機能の実装で
正規表現で震えまくったので復習も兼ねて
アウトプットしていきたいと思います。

# 正規表現

Webアプリケーションにおいて
メールアドレスに「@」を入れなきゃいけなかったり、
パスワードを半角英数字に指定できたりするアレです。

![スクリーンショット 2021-06-26 8.01.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/a939e2ae-81ee-e89c-85d4-3f218f991a71.png)

これらは正規表現を用いて記述します。
文字列に特定の文字が存在するか確認したり、
特定の文字を取り除いたりする操作を
行うのが正規表現を用いたテクニックです。

# パスワードを英数字で記述

正規表現のお勉強は以前していましたが、
カリキュラムを進めることだけを考えていた当時の僕は
「ハイハイ、そんなのがあるんだねﾊﾅﾎｼﾞｰ」
程度で見てました。
こんなマインドで最終課題に来ちゃったもんだから
復習をしている時にもう汗が止まりませんでした。

カリキュラムをこなす、最終課題を早く終わらせるとか
こんなマインドじゃお客様思考のポンコツエンジニアにしか
なれないので心を改めます。

さて、パスワードを英数字で記述するバリデーションの設定は
以下の通りです。

```user.rb
PASSWORD_REGEX = /\A(?=.*?[a-z])(?=.*?\d)[a-z\d]+\z/i.freeze
validates_format_of :password, with: PASSWORD_REGEX

```

最初見たときはわけわからん過ぎて３日間泣いてました。
涙は出てなかったけど。

細かく見ていきましょう。

```
[a-z]
```
これは[]を使用することで、[]に囲まれた文字のうち1つがマッチするかを
チェックしています。
中身はa-zと記述してあるのでアルファベットa~zのうちいずれかに
マッチという意味になります。

```
 \d
```
このdは数字を表します。
[a-z\d]は英数字のいずれか１つにマッチという意味になります


```
?=
```
?=の直後に設定した文字でチェックをかけて、
設定した文字が続く文字列が存在する場合、
その文字列にマッチします。

```
 *?
```

直前の1文字が0回以上続くとマッチします。
このアスタリスクの後に?をつけることで、チェックした文字列の中で、
?の直後の文字が出てきた段階でその1文字のみ返します。

```
i
```

最後にiオプションをつけると大文字・小文字関係なく検索してくれます。
逆に小文字のみという制約にする場合は、
iオプションを付けないことで対応できます。

```
\A
```
直後の文字が先頭にある文字列にマッチします。

```
\z
```
直前の文字が末尾にある文字列にマッチします。

# 名前を全角かな/カナ漢字で登録
```user.rb
with_options presence: true, format: { with: /\A[ぁ-んァ-ヶー-龥々ー]+\z/ } do
    validates :first_name
    validates :last_name
end
```

こんな感じで実装しました。

```
[ぁ-んァ-ヶー-龥々ー]
```

最初なんかのバグを習わなきゃいけないのかと思いました。
[]を使用することで、[]に囲まれた文字のうち1つがマッチするんでしたよね。
中身はぁ-んァ-ヶー-龥々ー。
ナンジャこりゃ。
一個ずつ見ていきましょーや。
「ぁ-ん」は「ぁ」から「ん」までということは想像できますよね。
「ァ-ン」と表現すると「ヴ、ヵ、ヶ」という文字が弾かれちゃうので
「ァ-ヶ」と表現しています。
「一-龥」と記述することで漢字をチェックすることができます。
「々」は文字ではなく、記号として認識されちゃうので
別途「々」の指定を追加する必要があります。

また末尾に「ー」をつけることで、
「サラー」や「ケレハー」のような長音記号が含まれた文字列を
区別することができます。

# 名前のフリガナを登録する場合

![スクリーンショット 2021-06-26 8.54.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/c7648648-7de8-f56b-f7b3-45e5c55e3788.png)

カタカナのみの登録の際は[ァ-ヶー－]
のみにしてしまいましょう！！

```
with_options presence: true, format: { with: /\A[ァ-ヶー－]+\z/ } do
    validates :first_name_kana
    validates :last_name_kana
end
```
【Nuxt.js】Nuxt文法編：非同期通信やasyncDataの使い方

#前置き
非同期通信について解説していた
こちらの記事で間違いがありました。
申し訳ございません🙇‍♀️
[【Nuxt.js】Nuxt文法編：asyncData](https://qiita.com/aLiz/items/cf861393e2461721a085)

ということで今回は
訂正ver.です。

#何が間違っていたのか
[【Nuxt.js】Nuxt文法編：asyncData > Promise > 簡単な例](https://qiita.com/aLiz/items/437e7239f36daacf2bf6)

このコード、
awaitでjsonデータをgetしてくるまでに
非同期でconsoleを表示したり
そのgetしてきたデータを表示させる
と書いています。

しかし、
jsonデータが返ってきていないのに
表示させることはできません🙇‍♀️

```index.vue
<template>
 <div class="page">
  {{ ip }}
 </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData() {
    // このjsonをゲットするまで非同期でお仕事します
    const data = await axios.get('http://icanhazip.com')
    console.log(data)
    return { ip: data.data }
  },
}
</script>
```

他にも…
コードは上から実行し、
終わってから次のコードと思っていましたが、
javascriptは
コードの上から順番に実行されるとは
限らない仕様でした。。。
なのでaxiosなどからデータが返ってくる前に、
空のデータを返してしまうことがあるようです。

参考: [Promiseとはなんぞや？！できるだけわかりやすく説明してみた（ついでにasync/awaitも) ](https://qiita.com/garchomp_otoka/items/7de9efc78e18e4c7e606)

#そもそも非同期通信とは何か
動画を例にすると分かりやすいです💡

**同期通信：**
動画を全て読み込んでから再生
**非同期通信：**
全て読み込まなくとも、読み込めた所まで再生
その間にも読み込みを続ける

#勘違いをしていた
⬆️のコードで私は
jsonデータが読み込めたところまでを表示する
と認識していたのですが、、、

**これはそもそも
jsonデータが全く返ってきていない状態**

何も読み込めていない状態で
それをやろうとしていたわけなんです。。。

#非同期通信、await、asyncDataの整理
お馴染みのJSONplaceholderから
データを取得しているだけのコードです。
このコードを見ながら整理していきます。

```index.vue
<template>
  <div class="page">
    {{ posts }}
  </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData () {
    return await axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        return { posts: response.data}
        console.log(response.data)
      })
      .catch((error) => console.log(error))
  },
}
</script>
```

##非同期通信async
外部データを使う場合に
同期処理だと処理が遅くなるため
非同期通信を使用します。

##Promiseのawait
###そもそもPromiseとは
javascriptはコードの上から
順番に実行されるとは限らない仕様💥
なのでaxiosなどからデータが返ってくる前に、
空のデータを返してしまうことがあります。
それを防ぐのがPromise💫

Promise本楽の書き方はこれ

```index.vue
new Promise(function(resolve, reject) {}
```

###awaitとは
本来の書き方よりも
スムーズにしたのがasync/awaitです💕
asyncとawaitは必ずセットで使います。

asyncが非同期通信
awaitがPromiseです。

##asyncData
非同期通信のグループ化をします。

async created () { await } の代わりに
async asyncData () { await } といった使い方をします。 

似た役割としてfetchがありますが、
呼び出しタイミングや
データのセット先が違うだけで
使い方はほとんど同じです🍎
[【Nuxt.js】Nuxt文法編：fetch](https://qiita.com/aLiz/items/49a863b34f46c1773ae7)

#まとめ
**axios**: API通信
**async/await**: 非同期通信とPromise
**asyncData**: 非同期通信のグループ化
Liquid 日付表示の変更方法

# Liquid　日付フォーマットの変更の仕方
今回はブログ記事などで使う、日付表示の仕方です。
当初は何度もググって調べ直してました！
dateオブジェクトだけ呼び出しても、任意の表示にならずに結構戸惑いました。
覚えるまで意外と時間がかかったので、非エンジニアさんやまだコードを書くことに慣れてないリキッダーさんお役立してください。

## 書き方


```
// /で区切りたい時 例 00/00/00
{{ article..published_at | date: '%Y/%m/%d'}}

// .で区切りたい時 例 00.00.00
{{ article..published_at | date: '%Y.%m.%d'}}

// 年月日で区切りたい時 例 00年 00月 00日
{{ article..published_at | date: '%Y年 %m月 %d日'}}
```

## 説明
ブログ記事の公開日を例に説明しています。
表示したいdateに対して、dateフィルターで表示を変更しています。

参考：
https://shopify.dev/docs/themes/liquid/reference/filters/additional-filters/#date

https://ruby-doc.org/core-3.0.1/Time.html#method-i-strftime

こちらちょっと便利でわかりやすいです。
http://www.strfti.me/


ただ、どれも英語…
わかりずらいかと思います。
上記のコードを参考にされてください。
誰かのお役に立てれば幸いです！
tmux で複数行を貼り付けるとき警告する


# はじめに・動機
tmux を使っていて、大量のテキストがバッファにある状態でコピーモードに入ろうとしたところ、
うっかり `prefix ]` を打ってしまって大変なことになったので、その改善。
一番身近な例ではTeraTerm、聞くところによるとiTermでも、複数行ペーストするときに警告を出してくれるので、それを真似する。

# 設定

```.tmux.conf
# 貼り付けるとき、改行が含まれていると警告する
bind-key -N "Paste the most recent paste buffer" ] {
    if-shell "[ `tmux show-buffer | wc -l` -eq 0 ]" {
        paste-buffer -p
    } {
        confirm-before -p "The buffer contains a newline(s). Are you sure to `paste-buffer`? (y/N)" paste-buffer -p
    }
}
```

# 解説

```
bind-key -N "Paste the most recent paste buffer" ] {
```

`prefix ]` キーの動作 (`paste-buffer`)を設定(上書き)する宣言。

```
    if-shell "[ `tmux show-buffer | wc -l` -eq 0 ]" {
```

ココポイント。
まず `tmux show-buffer` で現在のバッファの内容を標準出力で受け取り、それを `wc -l` の標準入力に繋ぐ。
すなわち、**バッファの内容の行数を数字で取得**する。
さらに、`[ ]` コマンドで数字評価し、0の場合に1個目のコマンドブロックを実行する。
0でない場合は、2個目のコマンドブロックを実行する。

```
        paste-buffer -p
```

改行がない場合は、特に確認せずそのまま `paste-buffer` を実行する。

```
    } {
```

遅ればせながら `{ }` について。
tmux 3.1 で導入された新機能で、従来めっちゃ面倒だった複数コマンドの直列実行が簡単になる文法。
cf. https://github.com/tmux/tmux/blob/b1a8c0fe022e99cffb0fb4f321740464f35bc6b9/CHANGES#L623

```
        confirm-before -p "The buffer contains a newline(s). Are you sure to `paste-buffer`? (y/N)" paste-buffer -p
```

改行が含まれる場合は、`paste-buffer` 前に `confirm-before` でプロンプトを出して確認する。
y を押せば貼り付け、その他のキーを押すとキャンセルになる。

```
    }
}
```

おわり。

# 課題点
バッファに改行があろうとなかろうと、 ``[ `tmux show-buffer | wc -l` -eq 0 ]`` は必ず走るので、貼り付けがちょっと遅くなる。

# 最後に
自分のtmuxの設定は下記に置いてあるので、参考にしたい人は参考にして下さい。
そしておもしろ便利な設定があれば教えて欲しいです。
https://github.com/Yasuwoh/dotfiles/blob/master/_tmux.conf