OmniAICreator/Qiita-1.07M huggingface dataset:
現在時間の取得（Date）

#今回の内容
* 今回の取得方法は私自身が使用したものだけを投稿していますので、他の取得方法などは調べていただいた方が詳しい情報が得られると思います。

<img width="150" alt="C1260E4F-6F02-42B3-9EAE-93478CF9D903_1_201_a.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/390fe89f-7c85-26b8-9bf5-8432672cca84.jpeg">


#コードと簡単解説

* UILabelを作成しておきます。

```Swift:
@IBOutlet weak var currentDateLabel: UILabel!
```
* 時間の取得を行います。
* `.dateStyle`と`.timeStyle`で取得してくる形を決めます。種類は`.full`、`.long`、`.medium`、`.none`、`.short`があります。

```Swift:
currentDateLabel.text = {() -> String in
            
            let formatter = DateFormatter()
            formatter.dateStyle = .full
            formatter.timeStyle = .medium
            formatter.locale = Locale(identifier: "ja_JP")
            let date = Date()
            return formatter.string(from:  date)
        }()
```

#終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。
【Laravel】@sectionと@yieldの関係（初心者向け）

#はじめに
レイアウトを作成するにあたって必須の`@section`と`@yield`について簡単に説明します。

#`@section`と`@yield`の関係
`@section`の書き方には、

```php:index.blade.php
@section('セクション名', '画面に表示する値')
```
と記述するパターンと、

```php:index.blade.php
@section(親テンプレートの@yield名)
~~~画面に表示する内容~~~
@endsection
```
として、親（ベース）となるテンプレートに記述された`@yield(名前)`部分に、`@section`と`@endsection`に囲まれた部分がはめ込まれるというパターンがあります。

#具体例

```php:layouts/app.blade.php(親となるテンプレート)
<h1>@yield('title')</h1>
<div class="container">
   @yield('content')
</div>
```

```php:menus/index.blade.php(子となるテンプレート)
@section('title', '一覧画面')

@section('content')
   <p>一覧画面を表示します</p>
@endsection
```

`app.blade.php`の`@yield('title')`部分に、`index.blade.php`の`@section('title', '一覧画面')`に記述した「一覧画面」が入り、同じく`app.blade.php`の`@yield('content')`部分に、`index.blade.php`の`@section('content')`に記述した`<p>一覧画面を表示します</p>`がはめ込まれます。

#おわりに
一度理解すれば簡単ですね。
ほかにも、`@extends`や`@include`もあるので、ググってみてください。
ABC202 C - Made Up を解いてみた

https://atcoder.jp/contests/abc202/tasks/abc202_c

![abc202_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/8cda5e73-67f4-31b6-0aeb-b2361c284d77.png)

いつもの通り i, j をそれぞれ for でネストして全探索したら
TLE で落ちてしまう。とりあえずサンプルを眺める

![abc202_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/40d5e55e-781f-0b8d-8e05-12692b37f38c.png)

for 文で B[C[i]-1] について i で回してみよう。
その時に**B[C[i]-1] と同じ値が 配列 A の中に何個あるのか**数えれば良さそう。
ってことは事前に辞書で A について整理しておけば解決すると思った。

```MadeUp.py
N = int(input())
A = list(map(int,input().split()))
B = list(map(int,input().split()))
C = list(map(int,input().split()))

#A の中に何の要素が何個ずつ入っているのか管理
dic = {}
for i in range(N):
    if A[i] not in dic:
        dic[A[i]] = 0
    dic[A[i]] += 1

score = 0
for i in range(N):
    try:
        score += dic[B[C[i]-1]]#該当したら、その個数を積み上げる
    except:
        pass#　B[C[i]-1] が辞書内に存在しないと言われたら pass する
print(score)
````

atcoder problem 灰色〇で半分くらいのレベルだったら C 問題でも何とか。。
ちょっとずつレベルを上げていきたいところですね。

#おまけ
間違っても以下のようにしない方がいいと思います。

```MadUp_TLE.py
N = int(input())
A = list(map(str,input().split()))
B = list(map(int,input().split()))
C = list(map(int,input().split()))

A = "".join(A)
score = 0
#以下のように O(N^2) となるので TLE となります。
for i in range(N): #=> N
    score += A.count(str(B[(C[i])-1])) # => N : 
                                       # count は都度 A の中を要素数(N) だけ探索してカウントするため
                                       # 計算量は N と認識されます。
print(score)
```
[CSS]border-radiusを使ってグニャグニャ円作り

# はじめに
本記事では、`border-radius`について記述します。

# border-radius
`radius`=「半径」　by　Google先生
知らなかったです。

## 50%

```css
 .left-content {
  width: 300px;
  height: 300px;
  background-color: lightgreen;
  border-radius: 50%;
 }
```
以下緑の丸です。
多くの方が知っているであろう`50%`はまんまるです。
1辺を100%とした時、
4辺それぞれの真ん中(または半分)、つまり50%の位置を通るようにしているというイメージです。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1768158/84a79c78-6a77-4a64-4043-a4e55e1c38e9.png)

## (ex)10%/50%
`border-radius: 10% / 50%;`という記述があったとします。

```css
 .center-content{
  width: 300px;
  height: 300px;
  background-color: skyblue;
  border-radius: 10% / 50%;
 }
```
`10%`は横の辺、`50%`は縦の辺と思ってください。
青色の図を確認します。
`縦の辺の真ん中(50%)`と`横の辺は四角から約10%横に進んだところ(縦には進みません)`を結んだ図形となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1768158/f5bdf8f5-099d-0d69-1bc0-40cbfc5b68a9.png)

## (ex)50% 40% 30% 20% / 25% 35% 45% 55%
歪な形ですね。こんな形も作れることを知り、興奮しました。

```css
 .right-content{
  width: 300px;
  height: 300px;
  background-color: pink;
  border-radius: 50% 40% 30% 20% / 25% 35% 45% 55%;
 }
```
ピンク色です。
青色は、4辺とも`同じ%`でしたが、
今回は、4辺とも`違う%`になります。
`border-radius: 10% / 50%;`同様、
`/`よりも前の%達は横の辺、後は縦の辺になります。
ここでは、`50% 40% 30% 20%`が横、`25% 35% 45% 55%`が縦。

スタートは、左上の角から始まります。
左上の角は、`左上角から右方向に横50%の点`と`左上角から下方向に縦25%の点`をなぞった形
右上の角は、`右上角から左方向に横40%の点`と`右上角から下方向に縦35%の点`をなぞった形
右下の角は、`右下角から右方向に横30%の点`と`右下角から上方向に縦45%の点`をなぞった形
左下の角は、`左下角から右方向に横20%の点`と`左下角から上方向に縦55%の点`をなぞった形

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1768158/a2954cb3-c9c5-0e4e-4fc4-074996ce6b92.png)

これでピンク色の形が出来上がります。

以上です。
いかがでしょうか。

# 終わりに
border-radiusには無限の可能性を秘めていることがわかり、
より一層、デザインするのが楽しくなりました。

これらをいくつも重ねて回転させて使うオシャンなことをされている方もいて、
デザイン上手い方の脳みそが欲しいと思いました。

以下参考サイトです。
最初のYouTubeの動画がすごくおすすめです。
[Advanced CSS Border-Radius Tutorial](https://www.youtube.com/watch?v=j3Z4DR0o8bk)
[border-radius](https://developer.mozilla.org/ja/docs/Web/CSS/border-radius)
[今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！](https://www.webcreatorbox.com/tech/border-radius)

明日も頑張ります！
Ruby でヒアドキュメント内で条件分岐やループ処理を行う方法

# はじめに
複数行に渡る文字列を生成したいとき、ヒアドキュメントは便利だが、ヒアドキュメント内で条件分岐やループ処理を行う際に少し苦労したのでまとめておく。



# 実装方法
例として、以下のような仕様のコマンドラインスクリプトを実装してみる。

* マークダウンで記述されるブログ記事に、自動で YAML ヘッダをつける機能を持つ
* 引数としてタイトルやサムネイル画像、タグを与えると、`@options` 変数で各引数の値を取得できる

その際の、YAML ヘッダをヒアドキュメントで記述する。

```ruby
require 'erb'

header = <<~'HEADER'
  ---
  layout: post
  title: "<%= @options[:title] %>"
  image: "<%= @options[:image] %>"
  date: "<%= Time.now.strftime('%Y-%m-%d') %>"
  tags:
  <%- @options[:tags]&.each do |tag| -%>
  - <%= tag %>
  <%- end -%>
  ---
HEADER

puts ERB.new(header, nil, '-').result(binding)
```

`\n` を実際の改行に変換した結果は以下のように出力される。

```yaml
---
layout: post
title: "Hello world!"
image: "/images/2021/09/hello_world.png"
date: "2021-09-06 22:37:34"
tags:
- greeting
- first-post
---
```



# 解説
ヒアドキュメント内で条件分岐やループ処理を行いたい場合は ERB を使用する。

* `<%-` と `-%>` で囲まれた箇所で Ruby が実行される
* `<%=` と `%>` で囲まれた箇所は Ruby が実行された際の戻り値が出力される

上記 2 つのどちらも、囲まれた箇所で Ruby が実行されるが、違いとしては出力結果がそのまま表示されるかされないかだ。

`@options[:tags]&.each do |tag|` や `end` の部分は、結果を出力するわけではなく、単に Ruby を実行してほしいだけなので `<%-` と `-%>` で囲む。



# trim_mode について
なお、`<%-` と `-%>` の記法は ERB のインスタンスを生成する際の第 3 引数に `'-'` を指定することで使用可能となる。これは `trim_mode` と呼ばれる。

```ruby
# 第 3 引数に '-' を指定
ERB.new(header, nil, '-').result(binding)
```

`trim_mode` を使わずに、ヒアドキュメントの出力のみを引数に指定するならば、以下のように記述することもできる。

```ruby
require 'erb'

erb = ERB.new <<~'HEADER'
  ---
  layout: post
  title: "<%= @options[:title] %>"
  image: "<%= @options[:image] %>"
  date: "<%= Time.now.strftime('%Y-%m-%d') %>"
  tags:
  <% @options[:tags]&.each do |tag| %>
  - <%= tag %>
  <% end %>
  ---
HEADER

puts erb.result(binding)
```

ERB インスタンス生成時の第 1 引数に直接ヒアドキュメントを渡す書き方だ。`trim_mode` を用いないので `<%-` と `-%>` ではなく `<%` と `%>` を使用している。

この場合、出力が以下のようになる。

```yaml
---
layout: post
title: "Hello world!"
image: "/images/2021/09/hello_world.png"
date: "2021-09-06 22:43:28"
tags:

- greeting

- first-post

---
```

余計な空行が出力されてしまっている。これは `<% @options[:tags]&.each do |tag| %>` の部分と `<% end %>` の部分が、行としては存在しているが、何も出力されないためである。

このように、ただ Ruby のコードを実行させたいだけの行でも、存在している以上は出力結果に反映されてしまう。

これを解決するのが `trim_mode` である。今回の例では第 3 引数に `-` を指定したので `<%` と `%>` の代わりに `<%-` と `-%>` を使うことで、余計な改行が入らなくなる。

`trim_mode` についての詳細は [ERB のリファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/class/ERB.html) を参照すること。



# 弱点
ERB を使用するとヒアドキュメント内で条件分岐やループ処理を行うことができるが、以下のデメリットがある。

* シンタックスエラーが発生した際に、行数が若干わかりづらい

ERB を用いたヒアドキュメント内でシンタックスエラーが発生すると、そのエラーが発生した箇所が、ヒアドキュメント内の行数で表示される。ファイルの行数ではない。

そのため、ぱっと見で何行目にシンタックスエラーがあるのかがわからない。あまりヒアドキュメントが長くなりすぎると、シンタックスエラーが発生した際の追跡が難しくなる点に注意すること。



# 参考
* [While loop in a here documents](https://www.ruby-forum.com/t/while-loop-in-a-here-documents/154598)
* [class ERB](https://docs.ruby-lang.org/ja/latest/class/ERB.html)
RaspberryPIにmoonlight-embeddedをインスコする手順

たぶんこれが正しいと思います。
だけどお前らはあほなのできっとわからないからメモ書きしておく。

(1)リポジトリの追加
```curl -1sLf 'https://dl.cloudsmith.io/public/moonlight-game-streaming/moonlight-embedded/setup.deb.sh' | distro=raspbian codename=buster sudo -E bash```

(2)インストール
```sudo apt install moonlight-embedded```

(3)アップデート
```sudo apt update```
```sudo apt upgrade```

【参考】
https://github.com/moonlight-stream/moonlight-embedded/wiki/Packages
AWS認定 SAP, DOP, SCS合格しました

# 概要

以下のAWSの認定試験を受けて合格しました。

AWS認定ソリューションアーキテクト プロフェショナル - 2021年5月
AWS認定DevOpsエンジニア プロフェッショナル - 2021年8月
AWS認定セキュリティ 専門知識 - 2021年8月

# 受験した理由

実際の仕事内容が試験範囲と重なってきつつあったので、AWSのベストプラクティスを理解したかったためです。

# 試験勉強


## 使った教材

### AWS認定ソリューションアーキテクト プロフェショナル

- [AWS認定ソリューションアーキテクト-プロフェッショナル ~試験特性から導き出した演習](https://www.amazon.co.jp/dp/4865942483/)
- [AWS 認定ソリューションアーキテクト プロフェッショナル模擬試験問題集（全5回分375問）](https://www.udemy.com/share/1020WG3@w0L0AhgQMSqN24QAh6DVMiCvXGbRcMdBdBQFoUH3Z6-BHpjqFff4BgXKMw7XwNRr/)

### AWS認定DevOpsエンジニア プロフェッショナル

- [AWS認定 DevOpsエンジニア – プロフェッショナル (DOP-C01) 模擬試験 (2021年試験対応版) ](https://www.udemy.com/share/103gkC3@rKYtwyRmHOn6faqsHGln-ChgEy8qLnX_71BdqNgV2VSeqI1Y_SYDEou2s_LTXV5f/)

### AWS認定セキュリティ 専門知識
- [要点整理から攻略する『AWS認定 セキュリティ-専門知識』](https://www.amazon.co.jp/dp/4839970947/)
- [AWS Security Speciality(SCS-C01) 2021 with Explanations](https://www.udemy.com/share/103mbA3@yjHmiU5LI6FoqQW7E3m6VVg4g228gHATAu92_c491wLFn8lX7K-nm7HQgyDlNYGt/)

## 勉強方法

* 問題を解いて、不正解の問題はもちろん、正解した問題も解答説明を隅々まで読んで解き方に慣れる、自信を持って正解できるようにしていく。
* 知らないことや理解できないことは、AWS公式のドキュメントを読み込んで大事なことをノートやScrapboxにどんどん書いて覚える、理解する。
* さらにイメージが湧かないものは、クラスメソッドさん、クラウドワークスさんなど、噛み砕いて説明して下さっているブログを参考に、自分でも触ってみる。

これをひたすら理解するまで繰り返す。


## 受験

### 受験時期

実は、もっと前から受験したい気持ちはあったのですが、長らく仕事がハードな状況が続いていて、時間的にも精神的にも余裕がなかったので自分なりの気運を待ってベストな状態で予約して受験しました。
プロフェッショナルや専門知識は3時間と長い上に問題文が長文で脳が疲労するので、心身ともに健康であることも重要だと思います（少なくとも私はそうです）。

### 受験場所

コロナ禍ということもあり、自宅で受験しました。
初回は、試験より試験開始までの試験官とのやりとりの方が緊張したかもしれません、それぐらい緊張しました。しかし、体験された方のブログを参考にさせていたおかげで問題なく受験することができました。
DevOpsエンジニアプロフェッショナルとセキュリティ専門知識は、日本語試験官の予約が取れず、英語の試験官を選択しましたが、こちら[AWSオンライン試験監督との英会話例](https://blog.trainocate.co.jp/blog/online-e_028)を事前に見ておいたので英語が得意ではない自分でも問題ありませんでした。

自宅で受験すると、慣れたPCで、エアコンも自分で適温に設定できるので快適で、試験に集中できたと思います。


## 感想

* セキュリティ専門知識は本当に楽しかった。 難しいイメージがあって敬遠していたけど、もっと早く勉強すればよかったと思いました。
* ソリューションアーキテクトプロフェッショナルとDevOpsエンジニアプロフェッショナルは、自分がまだ経験していないような構成や規模のシステムの問題が範囲に入っていたので、今後、この勉強が役に立つ時がくるといいな、という思いになりました。
POSIX準拠で外部コマンドを使わないシェルスクリプト用のpad関数とゼロパディング

## はじめに

この間前ゼロ削除と `trim` 関数を作ったのでそれなら `pad` 関数とゼロパディングも必要だろうということでおまけで作ってみました。前と同じく外部コマンドもコマンド置換も必要とせず小さなデータに最適な関数です。

参考 [シェルスクリプト用のPOSIX準拠で高速な前ゼロ削除とtrim関数の実装 〜それ本当に外部コマンド(sed,awk,tr)が必要ですか？〜](https://qiita.com/ko1nksm/items/4f3a8b04ec25d9043f8c)

## 実装

前回はパラメータ展開を使った面白い書き方で実装したのですが、今回はおそらく単純なループを使うしか無く、コード的にはあまり面白くありません。POSIX シェル準拠縛りをなくせばもう少し別の方法があるのですが。

```sh
pad() {
  set -- "$1" $(( $2 < 0 ? 0 : $2 )) "${3:- }" "" 
  while [ ${#4} -lt "$2" ]; do set -- "$1" "$2" "$3" "$4$3"; done
  while [ ${#4} -gt "$2" ]; do set -- "$1" "$2" "$3" "${4%?}"; done
  eval "$1=\$4"
}

pad_start() {
  pad "$1" $(( $3 - ${#2} )) "${4:-　}"
  eval "$1=\"\${$1}\$2\""
}

pad_end() {
  pad "$1" $(( $3 - ${#2} )) "${4:-　}"
  eval "$1=\"\$2\${$1}\""
}
```

使用例

```sh
# 変数を文字列で指定した長さで埋める
pad ret 5 "*"
echo "$ret" # => *****

# ゼロパディング
pad_start ret "123" 5 "0"
echo "$ret" # => 00123

# 前埋め
pad_start ret "abc" 10 "123"
echo "$ret" # => 1231231abc

# 後埋め
pad_end ret "abc" 10 "123"
echo "$ret" # => abc1231231
```

## ゼロパディング

ゼロパディングに関しては少しだけ簡単な書き方があります。例えば `123` を 5桁 の `00123` にする場合、`123 + 100000` してから頭の `1` を削除すれば良いです。

```sh
set -- 123                  # $1: 123
if [ "$1" -lt 10000 ]; then # 5 桁 未満の場合だけ処理を行う
  set -- $(( 100000 + $1 )) # $1: 100123
  set -- "${1#1}"           # $1: 00123
fi
```

ただこれを汎用の関数にしようと思うと難しく、例えば `$((10 ** 5))` という累乗の計算が POSIX シェルでは規定されていないためできません。これができないとなると結局ループが登場してきて `pad` 関数を使うのと大差なくなってしまいます。

## おわりに

必要な関数だとは思うもののネタ的には何の面白みもない記事でした。コードのライセンスは例によって CC0 なのでそのまま or 自由に変更して使用して構いません。
Cookieとセッションについて

# はじめに
今回はクッキーとセッションについて勉強しましたので、アウトプットしていきたいと思います
# HTTPはステートレス

HTTPはステートレスなプロトコルです。 ステートレスとは、「状態を保持しない」という意味になります。「状態が保持できない」とは、リクエストする度に、どんなリクエストをしたのかという情報を保持することができない。
毎回リクエストする度に、前回どんなリクエストをしたのか全く覚えてません。

>ステートレスに対して「状態を保持」のことを、ステートフルという。

![ダウンロード (1).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/20b40cd1-897a-875a-9398-5df4774504f7.jpeg)


# HTTPの弱点

さて、ここで困ることが起きます。 皆さんがよく利用するWEBサイトである会員のログインなどです。

1度ログインしたはよいものの、次のリクエスト（例えばページを変えるなど）のタイミングではログインしたという状態を保持することができないため、ログイン状態を維持することができないということになります。

そのため、「ログインしているかどうか」の状態をチェックをする必要があります。
例えば状態を保持するために、以下のようにurlのパラメータへ、loginができているかの情報を持たせるという方法があげられます。

しかし、上記の問題として、login=OKというパラメータを手で容易に変更、改ざんすることができてしまうという問題があります。
これにより、システムとしては意図しない方法で挙動を操作されてしまう危険性があります。
システムとして意図しない操作により情報が操作されることで、

例えば、不正なログインでの商品購入や、個人情報の流出などの問題が発生するリスクがあります。

このような危険性を回避する解決策となるのが、_CookieとSession_

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/afde5a7a-3ce2-5e61-d5a7-9675e5bc36d6.png)


# Cookie
Webサーバーが発行し、ブラウザで保持されるテキストデータのことです。以下はhttpヘッダーの中身です。 httpヘッダーはクライアント(ブラウザ)とサーバー側が情報をやり取りする際に渡している追加情報です。この追加情報の中にCookieのやり取りも含まれます。

# 何をしてくれているのか
Cookieをユーザーのブラウザに保存することにより、次回同一サイトを訪れた際、前回の続きのページを表示するような、いわゆる、Webサイトとユーザー間の「会員証」のような働きをしてくれています。

# Cookieの流れ
1. ブラウザにアクセスしたタイミングで、WebサーバーからCookieが発行され、ブラウザに渡される。
2. ブラウザはCookieを保存する。
3. 次回以降ブラウザは、CookieとともにWebサーバーへアクセスする。
4. WebサーバーはCookieの内容に合わせて、必要な情報を踏まえたページを表示する。

![スクリーンショット 2021-09-06 21.05.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/d303440a-ef0e-64a5-8c56-be79c78a5040.png)


① ページのリクエスト
② リクエストされたページを返す
③ ②のレスポンスの際に、cookieも一緒に渡す
④ Cookieと一緒にページをリクエストする
⑤ Cookieを見て、前回来てくれたユーザーであることを判断する
⑥ Cookieを元に、そのユーザーに適したページを返す
一方で、Cookieにも弱点はあります。 それは、Cookieはクライアント側に依存するため、パラメータと同様にデータを改ざんすることができてしまうのです。

そこでSessionが登場します。

# Session
一連の処理の始まりから終わりまでを表す概念のことで、ここではクライアントとサーバーの通信状態のことを指します。Sessionは、Webサーバーで保持されるデータになります。

__Cookieは、ブラウザで保持されるデータ__

__Sessionは、Webサーバーで保持されるデータ__

![スクリーンショット 2021-09-06 21.46.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/a0b73f08-307d-eb64-d4e9-02f2b15a63e6.png)


![スクリーンショット 2021-09-06 21.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/e09c5574-9250-78fd-2e64-7d7b79bd642d.png)




① emailとpasswordを持たせてログインのリクエストをする
② emailとpassword情報を元にSession IDを発行し、Session IDをCookieに保持させた上で、ログイン後画面を表示させる
③ Session IDを元に、ページのリクエストをする
④ Session IDを元に、リクエストしているユーザーが誰かを特定する
⑤ 該当するユーザーに合致する情報を返す（Aさん用の画面を表示させる）
SessionにはIDを割り振ることで管理することができます。保持されたSessionが必要な場合はIDを指定することで取り出すことが可能です。

***

例として、ネットショッピングについて挙げてみます。

ネットショッピングにログインし、商品をカートに入れ、購入までを一連の処理（Session）として扱いたいですが、
冒頭で説明した通り、HTTPはステートレスのため、一連の処理（セッション）として扱えません。

そこで、先程説明したCookieを利用して、一連の処理（セッション）として扱います。

Cookieに一意の値(Key)を入れ、リクエストするときにCookieにある値(Key)も一緒に送ることで、同一人物であることが識別可能になり、一連の処理として扱うことができるようになる。

しかし、Cookieに保持するデータは改ざん可能なため、CookieにSessionのIDを格納することで、より安全に一連の処理を行うことが可能。

#参考記事
この一冊で全部わかるWeb技術の基本（書籍）

# 画像引用
[INTERNET Watch](https://internet.watch.impress.co.jp/docs/column/security_basic/1259630.html#12-04-01_l.jpg)

[神田ITスクール](https://kanda-it-school-kensyu.com/php-basic-contents/pb_ch11/pb_1103/)
PowerAutomate: エスケープされたJSONオブジェクトの簡単な利用法

# 概要
以下のように、エスケープされたJSON の利用方法です

```json:ecsapedJSON
{
  "result": "[{\"Name\":\"hoge\",\"Value1\":\"fuga\"},{\"Name\":\"foo\",\"Value1\":\"bar\"},{\"Name\":\"fis\",\"Value1\":\"brr\"},{\"Name\":\"fis\",\"Value1\":\"bir\"},{\"Name\":\"fes\",\"Value1\":\"bar\"}]",
  "logs": []
}
```

# 普通のやり方
1. Parse JSON したいJSONを一度実行して取得
1. 実行結果から Schema を自動生成して編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/c7ad59cf-a2c5-cc33-09ba-3817dc9024df.png)

# 単なるエスケープの場合の省略法
1. Schema に "{}" を書くだけ<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/ddaa8f8c-ef2c-f267-c9a0-29610dd0088f.png)
1. あとは、普通のJSONで利用<br>

```JSON:body[0]
@{body('Parse_JSON')?[0]}
```
:::note info
インフォメーション
Composeや、escapedJSONをそのまま利用することは現状出来ません。
また、動的参照したい場合は、Schema定義は必要。
:::
AtCoderログ：0103 - ABC 217 A

# 問題

https://atcoder.jp/contests/abc217/tasks/abc217_a

## 問題文
> 相異なる二つの文字列 $S,T$ が与えられます。
> $S$ が $T$ よりも辞書順で小さい場合は Yes を、大きい場合は No を出力してください。

## 制約
> ・$S,T$ は英小文字からなる長さ $1$ 以上 $10$ 以下の相異なる文字列である。

# 回答
## 回答1 (AC)
C++ では標準関数によって文字列の辞書順による比較が可能なので、数字と同じようにコーディングすれば良いです。コードは以下のようになりました。

```C++:abc217a-1.cpp
#include <bits/stdc++.h>
using namespace std;

int main() {
  string s, t;
  cin >> s >> t;

  if ( s<t ) {
    cout << "Yes" << endl;
  } else {
    cout << "No" << endl;
  }
}
```

# 調べたこと
## [AtCoder の解説](https://atcoder.jp/contests/abc217/tasks/abc217_a/editorial) → [公式解説](https://atcoder.jp/contests/abc217/editorial/2575)
回答1と同じ方針でした。

# リンク
## 前後の記事
- 前の記事 → [AtCoderログ：0102 - ABC 217 に参加しました](https://qiita.com/RoadLynton/items/17d83d58948355c23593)
- 次の記事 → [AtCoderログ：0104 - ABC 217 B](https://qiita.com/RoadLynton/items/031cddef375aecfc6559)
githubでssh接続する

# githubにsshでレポジトリを新規作成する際の注意！
* ssh接続でgithubにpushしたい　　

　　その際には秘密キーペアを作成してローカルの.sshに保存。一方をgithubに保存。　　
　　たくさん記事があるので省略。  
 githubのkeyを保存する際、下の方にある[allow write access]にチェックを入れないとgit push できません。
ERROR: The key you are authenticating with has been marked as read only.
fatal: The remote end hung up unexpectedly
[VSCode] 実行時のコンソールがPowerShellに強制されてしまうバグについて

8月のアップデート(version 1.60)で言語自動検出やブラケットのカラー化など新たな機能が追加され今まで以上に便利になったVSCodeですが、Windows環境ではアップデート後プログラム実行時にコンソールが**PowerShellに強制されてしまうバグ**が発生しています。
___
**追記(2021/9/11)**
issueのコメントによると9/13(月)~14(火)に修正版を出す予定だそうです。
https://github.com/microsoft/vscode/issues/132150#issuecomment-917023548
> We were planning on releasing the recovery build yesterday but the fix for another issue took a little longer to figure out so expect it Monday probably around 11-12 PST unless something goes wrong. We don't release on Fridays as half the team's in Zurich (so Saturday there) and in case something goes wrong.

___
このバグのせいでコマンドプロンプトやgit bashなどのPowerShell以外のコンソールを使って実行することができなくなっていてかなり迷惑です。

VSCodeのリポジトリでこのバグについてのissueがいくつも乱立していました。
一部抜粋します。

- [Default console changed from what I wanted to Powershell during upgrade #132149](https://github.com/microsoft/vscode/issues/132149)
- [Powershell console opens every time I launch VS Code with a project #132150](https://github.com/microsoft/vscode/issues/132150)
- [Run python file in terminal ignores default terminal #17278
](https://github.com/microsoft/vscode-python/issues/17278)

現状、設定を変更するなど簡単な操作で修正することができないみたいで一つ前のバージョンに戻すしかないみたいです。
以下VSCodeのダウングレード方法を紹介します。

1. [version 1.59のリリースページ](https://code.visualstudio.com/updates/v1_59)から一つ前のバージョンのダウンロードリンクをクリックしてインストーラを取得します。Downloads: Windowsの隣にある`User`をクリックするとダウンロードできます。
![verision1_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618785/b30afbab-ecbc-6ec7-264a-b9bb8e9b29a6.png)
1. VSCodeがインストールできたら自動更新を無効にします。Update: Modeのdefaultを`none`に変更します。
![setting_vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618785/de5f8bf2-2e2b-9c48-9f94-70c89db6e374.png)
1. 確認用のポップアップが表示されるので`Restart`を押してVSCodeをリスタートして完了です。


version1.60で新たに追加された機能が使えなくなるのは残念ですが、コードが実行できなくなるよりは全然マシですね。

自動更新が無効になっているので、バグが修正されたか随時確認する必要があります。
修正版が出ると[リリースページ(July 2021 v1.60)](https://code.visualstudio.com/updates/v1_60)の一番上に修正履歴が表示されます。
修正されたらUpdate: Modeの設定を`default`に戻して自動アップデートしましょう。
setValue()よりもsetValues()の方が格段に速い

GASでスプレッドシート内のデータを取得して貼り付ける時、setValue()とsetValues()があるのはご存知かと思います。今回はこの2つの実行速度を比較していきたいと思います。
測定方法はシンプルで、1,000行のデータをいかに速くペーストできるかを競います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955768/9b97e4b2-f542-40d0-ee35-e2fdf2babf78.png)

#①setValue()を使って貼り付け
詳細な解説は省きますが、簡単に言うと下記手順を実施しています。
1. getValue()で1セル分のデータを取得
2. setValue()で、1.で取得したデータを貼り付ける
3. 1.～2.を1,000回繰り返す。

```gas:paste.gs
//---------- ペースト関数 ----------
function pasteValues() {
  // 現在のシートを取得
  const Sheet = SpreadsheetApp.getActiveSheet();
  // シートの最終行を定義
  const LastRow = Sheet.getLastRow() + 1;

  // ☆☆☆☆☆☆☆☆☆ 1つずつ貼り付け ☆☆☆☆☆☆☆☆☆
  let value = "";
  for (let i = 2; i < LastRow; i++) {
    value = Sheet.getRange(`A${i}`).getValue();
    Sheet.getRange(`B${i}`).setValue(value);
  }
  // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
}

```

#②setValues()を使って貼り付け
setValues()を使う際、引数は2次元配列にしてください。
※getValues()でデータを取得した時点で2次元配列になっていますが、getValue()で取得した場合は1次元配列になってしまいますのでご注意を。
setvalues()とgetValues()の使い方はググればわかりやすい記事がたくさん出てきますので、そちらをご参考に。

```gas:paste2.gs
//---------- ペースト関数 ----------
function pasteValues2() {
  // 現在のシートを取得
  const Sheet = SpreadsheetApp.getActiveSheet();
  // シートの最終行を定義
  const LastRow = Sheet.getLastRow() + 1;

  // // ################### 一気に貼り付け ###################
  const ValueArr = Sheet.getRange(`A2:A${LastRow}`).getValues();
  Sheet.getRange(2, 2, ValueArr.length, ValueArr[0].length).setValues(ValueArr);
}

```

#実行速度比較
①と②の実行速度ですが、結論から申し上げますと②の方が断然早いです。
試しにそれぞれの検索方法で5回処理を行い平均値を出してみたところ、次のような結果になりました。
①：168,211.4[ms] → 約168秒
②：320[ms] → 約0.3秒

1000行のコピペでは500倍以上の差が出ました。
参考までに、②の方法で200,000行のデータを貼り付けしたところ、約18秒でした。
setValues()は優秀。

#まとめ
setValues()のエラーが出まくっていた時期もありましたが、慣れれば使いやすいです。
それに数万行のデータをインポートして自動化処理を行う、という場合に①の方法だと時間制限にかかってしまいますね。
PowerAutomateで実行者の予定表を操作する

# 結論
- Outlookの「イベントの作成」やTeamsの「会議の作成」に失敗する場合・・
- まず、カレンダーの取得アクションでフロー実行者のカレンダー一覧を取得しておき、<br>そこから抽出したカレンダーIDをイベントの作成アクションの予定表IDに設定する。
- あとは実行者の接続情報を使って実行するとうまくいく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/cb52a58d-28e3-ac0b-3f11-707a67ce41f4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/f13d3dfa-22e9-94ee-5b0f-872e02f19d0d.png)

# 問題
- イベントの作成アクションで他人の予定表に登録したいときがあります。
- 普通にドロップダウンからカレンダーを選択すると、フローの作成者本人が実行する場合は動きます。

:::note alert
ただしフローを他人に実行させ、他人の予定表に登録しようとするとエラーになります。
:::

# 原因
ドロップダウンにはフロー作成者のカレンダーIDが設定されており、選択するとフローにそのIDが埋め込まれてしまうことが原因。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/3dcfe0ea-c678-efe2-9cea-085340993e60.png)

その様子はコードのプレビューで確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/c708365f-cfc1-b93e-580b-3e206c52464a.png)

# 解説
### 前提
フロー実行者の接続情報を使用する必要があるため、インスタントフローである必要があります。
トリガーとしてはSharePointの選択アイテムから実行するものか、PowerAppsボタンなどから実行します。
PowerAppsV2を使用する場合はOutlookコネクタが実行者の接続を使用する設定か確認します。

### フロー
カレンダーの取得アクションで実行者のカレンダー一覧を取得します。
その出力オブジェクト配列になるため、アレイのフィルター処理でnameがCalendarとなるものを抽出します。(ODataクエリ)
環境によっては「予定表」になっている場合もあるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/013cef95-d023-cd4c-c9b9-287403520304.png)

出力の一例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/3cc28293-275f-8e35-e82a-4df649be035f.png)


任意で、フィルターした配列の要素数をチェックしてエラー処理などを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/de68473a-8115-9daf-349a-075dec28cfab.png)

あとは配列の1要素目のidを抜き出し、
その出力をイベントの作成アクションの予定表IDにカスタム値としてセットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/10bbd1e3-8053-cf55-46bd-191d19473aa0.png)


# あとがき
うまくいかなくて困っている人を見かけたので共有しておきます。
PowerAppsだとカレンダーIDが選択できないので、先にIDを取得してセットしてって手順が当たり前なのですが、Automateだと躓いてしまいますね。

OutlookコネクタでPower Appsから直接呼び出す方法は以下の記事が分かりやすいです。

https://qiita.com/yamad365/items/fc8e7f76771570aba660
【PHP基礎】ページネーションの作り方

#はじめに#
　PHPを使ったページネーションの実装方法について勉強しましたので、備忘録として残していきます。
　ページを遷移させるだけですが、素のPHPで書こうと思うと結構ロジックを考えなければなりません。なるべく丁寧にまとめていきますのでよろしくお願いします。


#ページネーションとは#
　ページネーションとは、ECサイトの商品件数や掲示板のコメントなど件数が多い場合に、一気に表示させるのではなく、ページ遷移を行うことで数件〜数十件ずつ取得していく手法のことです。普段何気無く使っている機能ですが、実装しようとすると結構ロジックを考えなければなりません。
　何か機能を作る場合は、まず言語化することが大切です。今回の場合は下記のように言語化できるでしょう。ECサイトの商品件数を例としてあげていきます。

①商品件数を1〜10件だけ取得する。
②GET通信でページ数の値を与える
③リンクを作成する
④リンク先の値をチェック

このような順序で進めていきます。
それでは実際にやっていきましょう。

##商品件数を1〜10件だけ取得する##
　データベースから商品情報を取ってくる際は、SQLを使います。その際に、LIMIT句を使います。LIMIT 0,10とすることで商品情報の1〜10件目を取得することができます。10,10とすれば次の10件、20,10とすればさらにその次の10件が取得できます。なんだか出来そうな気がしてきましたね。ちなみに書き方は下記のようになります。

```limit.sql
SELECT * FROM items LIMIT 0,10;
```
注意点は、1件目から取得するのに1,10とするのではなく、0,10とすることです。コンピュータの世界は0から数えるのが基本ですので間違えないようにしましょう。

##GET通信でページ数の値を与える##
　それでは次に、LIMIT句の開始点を動的に変化させていきます。そのためにはプレースホルダーを使っていきます。LIMIT ?,10として、?の部分に開始点を入れることで変化させていきます。この部分には、URLパラメータを使っていきます。GET通信の際に、URLの後ろに〜?page=1とすることで、スーパーグローバル変数\$_GET['page']に1という値が入ります。この調子で2,3,4と作っていきたいところですが、先ほど説明の通りLIMIT句の開始点には0,10,20という数字を入れていきたいです。次のように書いてみましょう。

```page.php
$page = $_GET['page'];
$page = ($page - 1)*10
```
　こうすることで、\$pageにはページが進むごとに0,10,20という数字が入っていきます。あとはこれをLIMIT句に当てはめていくだけですね。

##リンクを作成する##
　さて、ここまでくればあとはリンクを貼っていくだけです。
HTMLのaタグを使用しましょう。1ページ目にはpage=1、2ページ目にはpage=2・・・あれ、どこまでリンクを作れば良いのでしょうか・・・？もう少し考える必要がありますね。ここでは繰り返し構文を使うのが便利です。（繰り返し構文の具体的な書き方は[こちら](https://qiita.com/kt103/items/25c80dfa6439f863769b)）
　しかし、繰り返し構文を使うには、何回繰り返せば良いのかという情報を取得する必要があります。今回の場合は、ページの上限数を取得してくる必要があります。まずはSELECT文で全ての件数を取得します。SELECT COUNT(*)とすることで、件数を取得することができます。

```count.php
 try {
      $dbh = new PDO($dsn, $username, $password);
      $sql = 'SELECT COUNT(*) as cnt from items';
      $stmt = $dbh->prepare($sql);
      $stmt->execute();
      $rows = $stmt->fetch();
    } catch (PDOException $e) {
      echo '接続できませんでした。理由：'.$e->getMessage();
    }
```

　そうして取得した件数を１ページに表示させたい件数で割ります。今回は10件表示させたいので10で割ります。こうすると、例えば全件数が20件の場合は2ページ、30件の場合は3ページといった具合にページ数が割り出せます。それでは、35件の場合はどうでしょうか。あれ、割り切れないですね。そんな時に便利な関数がceil関数です。小数点以下を繰り上げることができますので、35件の場合は4となります。

```ceil.php
 $count = ceil($rows['cnt']/10);
```

　このようにして全ページ数を取得できれば、あとはその数だけ繰り返しをするだけです。



#リンク先の値をチェック#
　ここまでくれば一応ページネーション機能自体は完成です。しかしまだ問題が残っています。今回はURLパラメータを使ってページ遷移をしているので、URLに直接値を入力することができます。例えばページ上限の値より大きい値を入れられてしまった場合や、マイナスの数字を入れられてしまった場合は画面が真っ白になってしまいます。これを回避するために、値のチェックを入れることにします。

```check.php
 if($page < 1){
   $page=1;
 }elseif($page > $count){
   $page=$count;
 }
```

　このようにすることで、ページ数が1より少ない時は\$pageに1を、最大ページ数より多い時は\$countを代入してエラーを防ぎます。

#まとめ#
　今回はページネーションの実装方法についてまとめていきました。結構大変だと思いますが、一つずつ丁寧に読み解いていくと問題なく実装できると思いますので挫けずに頑張りましょう。
Pythonで日本語文の中の生物の学名を抜き出す

（追記）コメント欄で以下よりシンプルな書き方を教えていただきました。
# モチベーション
[生物の学名は斜体で書く](https://www.enago.jp/academy/scientific-names_animals-plants/)という決まりがあります。Wordに文章を打ち込んでいる時に、いちいち学名を手作業で斜体にするのが面倒なので、自動化したいです。そのための第一歩としてPythonで学名を抜き出してみます。
ちなみにPython 学名で検索するとニシキヘビ（<i>Python</i>）の情報が出てきます。

# 学名を抜き出す
日本語文の中に半角英字で学名が書かれていることを想定。例文はWikipediaの「[クラミドモナス](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%83%9F%E3%83%89%E3%83%A2%E3%83%8A%E3%82%B9)」より取りました。

```Python:Python
text = "クラミドモナス（Chlamydomonas）は緑藻綱クラミドモナス目（もしくはオオヒゲマワリ目）に属する単細胞の鞭毛虫からなる属である。"\
            "500種以上が知られているが、単にクラミドモナスと言えば、モデル生物として盛んに利用されている"\
            "コナミドリムシ（Chlamydomonas reinhardtii）を指すことが多い。"\
            "C. reinhardtii は分子生物学、特に鞭毛の運動や葉緑体の動力学、発生生物学、遺伝学の研究のモデル生物である。"\
            "チャンネルロドプシンのような、光感受性のイオンチャネルを持っていることは、クラミドモナスの特筆すべき性質の一つである。"\
            "「ウォーターメロン・スノー」として知られる、雪山がピンク色（あるいは赤色）に染まる現象は、同属の C. nivalis のしわざである。"
```
![スクリーンショット 2021-09-06 21.45.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820036/e75fb276-f07e-60c3-4543-287ac7c1757c.png)

文章の中に出てくる学名には3パターンあります（上の文章はすべてのパターンを網羅しています）。
1. 属名のみ　例：<i>Chlamydomonas</i>
2. 属名＋種小名　例：<i>Chlamydomonas reinhardtii</i>
3. 属名の頭文字＋種小名　例：<i>C. reinhardtii</i>

属名の頭文字は大文字、種小名はすべて小文字です。
英語など、ラテンアルファベットで記述される言語の文章から学名を抜き出すのはそれなりに面倒そうですが、日本語文からなら正規表現で半角英字を探せばできそうです（まさか全角で学名を書く生物学者はいないでしょう）。ということで、やりました。正規表現弱者なので、もっとエレガントな書き方があるよという人は教えてください。

```Python:Python
import re
result = re.findall(r"[A-Z][a-z]+ [a-z]+|[A-Z][a-z]+|[A-Z]\. [a-z]+", text)
print(result)
```
![スクリーンショット 2021-09-06 21.52.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820036/04139df4-ebda-3e37-933f-b3e384a0ac14.png)
とりあえず全部抜き出せたようです。
正規表現の|(OR)前後の順番を変えるとうまくいきませんでした。

```Python:Python
result = re.findall(r" A | B | C ", text)
```
となっている時に、A, B, Cの順番で探すものと思われます。
上のコードでは、「属名＋種小名|属名のみ|属名の頭文字＋種小名」の順番で探しています。「属名のみ|属名＋種小名|属名の頭文字＋種小名」とすると、「属名＋種小名」がうまく探せませんでした。

# 参考
- [論文での動植物の学名の記載方法](https://www.enago.jp/academy/scientific-names_animals-plants/)
- [クラミドモナス](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%83%9F%E3%83%89%E3%83%A2%E3%83%8A%E3%82%B9)
- [【Python】文字列からアルファベットのみを抽出する方法](https://niwakomablog.com/python-alphabet-extract/)
- [複数の文字列のいずれかにマッチするパターンを記述する](https://www.javadrive.jp/python/regex/index14.html)
- [正規表現でスペースを記述する方法+Pythonサンプルコード](https://miyabikno-jobs.com/regular-expression-space/)
Swift - viewの影

swiftでviewに影をつける基本の四つのプロパティ

```simple.swift
testView.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
testView.layer.shadowColor = UIColor.black.cgColor
testView.layer.shadowOpacity = 0.6
testView.layer.shadowRadius = 4
```
#影の方向 shadowOffset
heightは縦方向です、正数は下、負数は上です。
![截圖 2021-09-06 21.46.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326861/b63b460f-8eba-ec2d-003a-463dc61b17b7.png)
![截圖 2021-09-06 21.50.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326861/196f72db-d497-2f33-5d1d-abce5bbb77e4.png)

```simple.swift
//影は下にある
testView.layer.shadowOffset = CGSize(width: 0.0, height: 30.0)
//影は上にある
testView.layer.shadowOffset = CGSize(width: 0.0, height: -30.0)
```
widthは横方向です、正数は右、負数は左です。
![截圖 2021-09-06 21.54.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326861/6e41b826-23a7-5f50-0d22-b2367e78dbf5.png)
![截圖 2021-09-06 21.55.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326861/c5416013-07ea-4626-5d44-5ae78b51986d.png)

```simple.swift
//影は右にある
testView.layer.shadowOffset = CGSize(width: 30.0, height: 0.0)
//影は左にある
testView.layer.shadowOffset = CGSize(width: -30.0, height: 0.0)
```
#影の色 shadowColor
![截圖 2021-09-06 21.57.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326861/5cdf308a-3749-6e2c-580f-30694e984ee2.png)

```simple.swift
testView.layer.shadowColor = UIColor.blue.cgColor
```
#影の透明度 shadowOpacity
範囲は０〜１です。０が透明、１が不透明です。
![截圖 2021-09-06 22.00.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326861/87bc34c1-9b7e-f9d4-907e-f2cb79fc9522.png)

```simple.swift
testView.layer.shadowOpacity = 0.2
```
#影の幅 shadowRadius
![截圖 2021-09-06 22.03.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326861/dde63e43-46a3-bae2-3a0a-bcd706f17711.png)

```simple.swift
testView.layer.shadowRadius = 30.0
```
#終わりに
わかりやすいようにちょっと大げさな数値を入れましたので、自分のニーズで調整してください。
WindowsでのNeovim build方法

#Windows でのNeovim のbuild方法を書きます
公式に記載されていますがあっちゃこっちゃしているので,Ｗindows用に抜粋した感じです．
https://github.com/neovim/neovim/wiki/Building-Neovim

## 準備編 : MYSY2をインストールする(下記サイトの1～6をやってるだけです)
1. 以下よりMYSY2インストーラをダウンロード  
https://www.msys2.org/  
2. MUSY2の初期設定的なことをする
上記のサイトの5番, 6番を実行する  
パッケージの更新

```
pacman -Syu
```
スタートメニューよりMYSY2MSYSを実行し，以下コマンドにて残りの基本パッケージを更新

```
pacman -Su
```

以下のようなエラーが出ましたが,　もう一回　pacman -Su　やればなんか消えました．

```
error: failed retrieving file 'openssl-1.1.1.l-1-x86_64.pkg.tar.zst' from mirror.msys2.org : Operation too slow. Less than 1 bytes/sec transferred the last 10 seconds
error: failed retrieving file 'libgcrypt-1.9.3-1-x86_64.pkg.tar.zst' from mirror.msys2.org : Operation too slow. Less than 1 bytes/sec transferred the last 10 seconds
error: failed retrieving file 'glib2-2.68.4-1-x86_64.pkg.tar.zst' from mirror.msys2.org : Operation too slow. Less than 1 bytes/sec transferred the last 10 seconds
warning: too many errors from mirror.msys2.org, skipping for the remainder of this transaction
error: failed retrieving file 'icu-69.1-1-x86_64.pkg.tar.zst.sig' from download.nus.edu.sg : Operation too slow. Less than 1 bytes/sec transferred the last 10 seconds
error: failed retrieving file 'libopenssl-1.1.1.l-1-x86_64.pkg.tar.zst' from mirror.msys2.org : Operation too slow. Less than 1 bytes/sec transferred the last 10 seconds
warning: failed to retrieve some files
error: failed to commit transaction (download library error)
Errors occurred, no packages were upgraded.

```
##ビルド編: neovim を ビルドする
以下の箇所を行う
https://github.com/neovim/neovim/wiki/Building-Neovim#first-step
https://github.com/neovim/neovim/wiki/Building-Neovim#windows  
###MYSY2を使う
・MYSY2MYSY を起動して必要な諸々をインストール

```
pacman -S \
    mingw-w64-x86_64-{gcc,libtool,cmake,make,perl,python2,pkg-config,ninja,diffutils} \
    gperf
```

###コマンドプロンプト(cmd.exe)を使用する
・コマンドプロンプトでMYSY2でインストールしたものが使えるようにPathを通す

```
set PATH=c:\msys64\mingw64\bin;c:\msys64\usr\bin;%PATH%
```
・<font color="red">管理者権限</font>でコマンドプロンプトを起動して，任意の箇所にプロジェクト配置

```
git clone https://github.com/neovim/neovim
```
・続けて，以下コマンド実行

```
cd neovim && make -j4
```

・さらに以下コマンド実行で \neovim\build\bin 以下に nvim-qt.exe が生成されています（一行ずつ実行したほうがいいかも)

```
mkdir .deps
cd .deps
cmake  -G Ninja ..\third-party\
ninja
cd ..
mkdir build
cd build
cmake -G Ninja ..
ninja
ninja install
```
*mkdir .deps build はどっかの段階で作成されるのでいらないかも
###こっからプラグインを入れてオリジナルの開発環境を作っていきましょう!!!
### 疑問：誰か教えてください．お願いしマンモス
・上記の手順で正しいのでしょうか？
・公式のBuilding on Windows は参照しなくていいのでしょうか？


###注意点:公式手順のコマンドをコピペする場合，サイトを翻訳すると以下のようにコマンドが崩れるときがありました．
```
mkdir .deps
 cd .deps 
cmake -G Ninja .. \ third-party \ 
ninja cd ..
 mkdir build
 cd build 
cmake -G Ninja .. 
ninja 
ninja install ..
```
gulp-sass のモジュール読み込みを require から import 文に書き換える

gulp-sass 公式のサンプルコードで、モジュール読み込み部分が require を連結させた書き方になっている。これを import に置き換えるのがわからなかったので調べた。

[公式リポジトリ](https://github.com/dlmanning/gulp-sass)にちゃんと書いてあった。。
~~[Stack Overflow](https://stackoverflow.com/questions/68176320/gulp-sass-5-0-how-to-use-compiler-with-import-instead-of-require) にドンピシャな質問と回答があったので、gulp の設定ファイルとともにメモしておく。~~

## 元 (公式サンプルコード)

[gulp-sass - npm](https://www.npmjs.com/package/gulp-sass)
`var sass = require('gulp-sass')(require('sass'));`

## 変更後

```gulpfile.babel.js
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass( dartSass );
```

## Sass から CSS にコンパイルする例

```gulpfile.babel.js
'use strict';

import path                 from 'path';                   // Node.js Built-in
import { src, dest, watch } from 'gulp';
import dartSass             from 'sass';
import gulpSass             from 'gulp-sass';
import postcss              from 'gulp-postcss';
import cssMqpacker          from '@hail2u/css-mqpacker';   // PostCSS Plugin
import postcssFlexbugsFixes from 'postcss-flexbugs-fixes'; // PostCSS Plugin
import autoprefixer         from 'autoprefixer';           // PostCSS Plugin
import sourcemaps           from 'gulp-sourcemaps';

// Use Dart Sass ('node-sass' で Node Sass)
const sass = gulpSass( dartSass );

const rootdir = path.resolve(__dirname, '..'),
paths = {
  css: {
    src: './src/*.scss', // style.scss, custom-editor-style.scss
    dest: rootdir, // dist/assets/css
    watchScss: './src/**/*.scss'
  }
};

const buildStyles = () =>
  src(paths.css.src)
  .pipe(sourcemaps.init())
  .pipe(sass.sync({
    outputStyle: 'compressed' // 'expanded'
  })).on('error', sass.logError)
  .pipe(postcss([
    cssMqpacker(),
    postcssFlexbugsFixes(),
    autoprefixer({ // 対応ブラウザを書いた .browserslistrc を読みに行く
      // grid: 'autoplace', // default false
      // cascade: false // Use Visual Cascade, if CSS is uncompressed. Default: true
    }),
  ]))
  .pipe(sourcemaps.write('.')) // 指定無しだと圧縮CSSファイル末尾に追記
  .pipe(dest(paths.css.dest));

// Wacth tasks
const taskWatch = (done) => {
  watch(paths.css.watchScss, buildStyles);
  done();
};

// Task run
exports.buildStyles = buildStyles; // `npx gulp buildStyles`
exports.default     = taskWatch;   // `npx gulp`
```
 
## 参考記事

* [Gulp-sass 5.0 how to use compiler with import() instead of require()? - Stack Overflow](https://stackoverflow.com/questions/68176320/gulp-sass-5-0-how-to-use-compiler-with-import-instead-of-require)
PICマイコン開発入門　開発環境構築編

前回は[こちら](https://qiita.com/Ohuu_12/items/7c0b247ff79e27d5c5b7)
今回は開発環境を構築していきます。

## OS

今回開発に使用するPCのOSはWindows10を前提として進めていきます。

## 統合開発環境(IDE)のインストール

PICの製造元であるMicrochip Technology Inc.が提供している、MPLAB X IDEを使用します。
MPLAB X IDEと検索して、Microchip Technology Inc.のページから最新のWindows版インストーラをダウンロードします。（執筆時点ではv5.50でした）
インストーラに沿ってインストールします。基本的にデフォルトのままで構いません。
インストーラの最後の画面（チェックボックスが3つにチェックが付いている画面）から先に進むと、3つWEBページが開きます。

## コンパイラのインストール

MPLAB X IDEにはコンパイラが含まれていないので、コンパイラをインストールします。
前項で3つ開いたWEBページのうち、MPLAB XC Compilersと書かれているページから、以下の3つをダウンロードして、インストールしましょう。

- MPLAB XC8 Compiler
  - License Type画面で聞かれるライセンスタイプはFreeで構いません。
  - Compiler Settings画面でAdd xc8 to the PATH environment variableにチェックを入れておきましょう。
- MPLAB XC16 Compiler
  - License Type画面で聞かれるライセンスタイプはFreeで構いません。
  - Compiler Settings画面でAdd xc16 to the PATH environment variableにチェックを入れておきましょう。
- MPLAB XC32/32++ Compiler
  - License Type画面で聞かれるライセンスタイプはFreeで構いません。
  - Compiler Settings画面でAdd xc32 to the PATH environment variableにチェックを入れておきましょう。

※Free版のコンパイラはコードサイズや実行速度の最大最適化ができない制限がありますが、個人開発では問題ないと思います。

## MPLAB Harmony v3のインストール

MPLAB Harmony v3は組み込みソフトウェア開発のフレームワークです。
ただし32bitマイコンが動作対象のため、しばらくは使わないかと思いますので飛ばしてしまっても構いません。

インストール手順

1. MPLAB X IDEを起動する
2. メニューバー > Tools > PluginsからPluginsウィンドウを開く
3. Available Pluginsタブに切り替える
4. MPLAB Harmony 3 Launcherにチェックを入れて、ウィンドウ左下部のInstallボタンをクリックする

## MPLAB Code Configurator(MCC)のインストール

PICは各種動作設定をコードを書いて行わなければなりませんが、MCCはグラフィカルに設定を行うことができ、各種設定に沿ったソースコードファイルの生成も行ってくれます。
この先使う予定のPICは動作対象外のため、しばらくは使わないと思いますので飛ばしてしまっても構いません。

インストール手順

1. MPLAB X IDEを起動する
2. メニューバー > Tools > PluginsからPluginsウィンドウを開く
3. Available Pluginsタブに切り替える
4. MPLAB Code Configuratorにチェックを入れて、ウィンドウ左下部のInstallボタンをクリックする

## フォントやカラースキームの変更

メニューバー > Tools > Options > Fonts & Colorsで変更可能です。

シンプルなMonokaiのカラースキームを作ってみました。

<https://github.com/hirosuke1214/MonokaiForMPLABXIDE/releases/tag/v1.0>
![Screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30831/86c018a3-c849-b922-5d40-4651c870b95d.png)

お好みのフォントを使用してください。
Redmine チケット駆動開発における工数入力を支援するツール「Redmine Time Puncher」その１

# はじめに

Redmine を使った開発と工数入力についてのお話です。

進捗や予実の管理のため、工数が正確に入力されていることは望ましいでしょうが、
実際の開発業務においてはなかなか難しいのが現実ではないでしょうか？

- 工数を細かく設定できるのはいいけど、手ではなかなか入れきれない
- 正確につけるのは大切なのはわかっているが、割り込みの作業まで逐一つけるのは、正直、面倒くさい
- そもそも一日の終わりに工数をつけようとしても、午前中のことなんか覚えてない（私だけか...）

今日は、なんとか開発者の負担を減らしつつ工数入力の精度を上げる方法がないものかと、
いろいろと漁っていた時に、たまたま目に留まったものがあったので紹介させてください。

# Redmine Time Puncher

[Redmine Time Puncher](https://redmine-power.com/) とは、Redmine を使ったチケット駆動開発を念頭に置いて、
工数の入力を支援してくれるツールです。

主に以下のような機能があります。

1. Redmine活動ログとの連携
1. Outlook、Skypeとの連携
1. 作業カテゴリの自動振り分け

他にもカスタムクエリによるチケットの表示や外部ツール（勤怠管理システム）との連携もできるそうです。

![detail](https://www.redmine-power.com/img/detail_V6.PNG)


上のイメージのような手順で工数をつけていき、最後に右下の「保存」ボタンで Redmine への出力を行うようです。

おおっ、まさにこれやん、と思ってしまった瞬間でした。
まだ少し触っただけなので、今後、もう少し使い込んで記事にしたいと思います。
VS CodeでVSCodeVimを使っていると大きなファイルでとても遅いとき

普段VS Codeのextensionの[VSCodeVim](https://github.com/VSCodeVim/Vim)を使っているのですが、数キロ行くらいあるファイルを編集しようとするととても遅くて困ったときにやったことを書きます。
閲覧するだけなら全然遅くないんですが、編集をするとなると激遅になり困ったときに解決方法が見つかったのでメモです。

## やったこと
VSCodeVimの他に[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)と[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)という括弧を色づけてくれるextensionを入れているのですが、この2つをdisableしました。

これだけで大きなファイルでを快適に編集できるようになりました。


## 参考Issue
https://github.com/VSCodeVim/Vim/issues/2216#issuecomment-569468925
Lost connection to MySQL server during query

Flask-SQLAlchemyでMySQLを使っていてハマった事象について。

# 発生事象

Flaskアプリケーションを起動して長時間（８時間くらい？）経過後にブラウザでアクセスするとInternal Server Error。エラーログは下記の内容。

> sqlalchemy.exc.OperationalError: (pymysql.err.OperationalError) (2013, 'Lost connection to MySQL server during query')

Internal Server Error発生後、ブラウザで再読み込みするとエラーは解消される。
が、さらに長時間経過すると再び同様のエラーが発生。

# 環境

* Python 3.9.5
* MySQL 5.7.34
* Flask 2.0.0
* Flask-SQLAlchemy 2.4.4
* PyMySQL 1.0.2

# 原因と対策

どうやら長時間経過するとコネクションプールが死んでしまう模様。
これを解消するにはDBアクセスの前にpingを飛ばしてやる、すなわち `SELECT 1` のような特に何もしないSQLを投げてコネクションプールを復活させてやればＯＫ。

https://docs.sqlalchemy.org/en/13/core/pooling.html#pool-disconnects

この方法はSQLAlchemyの機能として提供されており、デフォルトでは使用しない設定となっている。
`create_engine` の引数に `pool_pre_ping=True` を渡せとのことだったが、[A Minimal Application](https://flask-sqlalchemy.palletsprojects.com/en/2.x/quickstart/#a-minimal-application)をどう改修したらいいものやら、いろいろ試した結果以下の方法に落ち着いた。

```python:flask_app.py（抜粋）
app = Flask(__name__)
app.config['SQLALCHEMY_ENGINE_OPTIONS'] = {
    'pool_pre_ping': True
}
```

とりあえず長時間経過してもエラーは出なくなった。

# わからないこと

* MySQL以外のDBMSでは発生しないのか？
転職活動管理アプリを作ろう②（開発環境構築～ログイン画面）

前回は [コチラ](https://qiita.com/soso555/items/049d566fd23f601dccb9)

# ツール
- OS
    - Windows 10
- IDE
    - eclipse (Version: 2020-12 (4.18.0))
        - [新規] > [Spring スターター・プロジェクト] より新規プロジェクトを作成
        - [ウィンドウ] > [ビューの表示] より「Bootダッシュボード」を開いておく
- DB
    - MySQL (docker)
        - [ココ](https://github.com/soso555BoBs/local-dev-mysql) に docker-compose を置きました
        - localhost:3306 で接続可能
        - ```http://localhost:8081/``` で phpMyAdmin へ接続

# プロジェクト設定
- Spring Boot
    - 必要なモジュールは以下の通り
        - spring-boot-starter-data-jpa
        - spring-boot-starter-security
        - spring-boot-starter-thymeleaf
        - spring-boot-starter-web
        - spring-boot-starter-web-services
        - spring-session-core
        - thymeleaf-extras-springsecurity5
        - spring-boot-devtools
        - mysql-connector-java
        - spring-boot-starter-test
        - spring-security-test
        - spring-boot-starter-data-jdbc
        - spring-boot-starter-jdbc
- application.properties
    - DB 接続に必要な設定は以下の通り

        ```
        spring.datasource.url=jdbc:mysql://localhost:3306/sample
        spring.datasource.username=test
        spring.datasource.password=tset
        spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
        # spring.sql.init.mode=always
        # spring.sql.init.schema-locations=classpath:database/schema.sql
        # spring.sql.init.data-locations=classpath:database/data.sql
        spring.sql.init.encoding=utf-8
        ```

# ログイン画面表示
1. ```$ docker-compose up -d``` で MySQL コンテナ（および phpMyAdmin コンテナ）を起動する
2. 「Bootダッシュボード」より対象のプロジェクトを右クリック > [（再）起動] を選択
3. ```http://localhost:8080/``` にアクセスするとログイン画面が表示される

# 次回に向けて
- docker（≒ dockerhub）を使うことで MySQL 環境構築がすぐ出来た
- Spring Boot が Tomcat を内包してくれているので、eclipse にプラグインを入れずともサーバー起動可能なことに感動した
    - Linux 環境へのデプロイ方法や環境構築については後々調査する
- ```spring-boot-starter-security``` モジュールを入れることでログイン画面が即表示できた
    - DB のスキーマ定義、実際のログイン処理については後々調査する
転職活動管理アプリを作ろう①（導入）

# 目的
　転職活動のステータス管理を Excel でやっているのですが、Mac と Windows それぞれでファイルを持ってしまっているため管理が煩雑になりました。
　マルチデバイスで管理し、かつ個人情報を自分がセキュリティレベルをコントロールできるところに配置したいと思い立ち、新規に（簡単に）作成することにしました。
（「Notion とか使えば？」という声は聞こえません）

# 欲しい機能
1. ログイン
2. 企業の応募ステータス管理
3. Markdown によるメモ機能
4. ノウハウを貯めておく Wiki
5. （できれば）CSV 出力
6. （できれば）CSV 取込

# サイト要件
- 動作環境
    - Linux
        - Amazon Linux か Heroku か別のホスティングかは未定
    - Chrome 最新版
        - その他のブラウザは知らない

# 技術要件
- 言語 / フレームワーク
    - Java 11
    - Spring Boot 2.4
- DB
    - MySQL
- サーバ
    - Tomcat、Apache
- バージョン管理
    - Git
- コンテナ
    - docker
        - k8s は要検討

上記内容で進めていこうと思います。
VSCodeでAngularのデバッグ

これまでVSCodeを利用したTypeScript(AngularプロジェクトでもOKだった)のデバッグには拡張機能である[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)の利用が主流でしたが、つい最近この拡張機能が廃止されました。

理由はVSCode自体にデバッガが取り込まれたためです。
これまでは「VSCode」と「ブラウザ」を交互に切り替えながらデバッグ作業をしていたのですが、VSCodeにデバッガ機能が内蔵されたことで思いのほか便利になったので、VSCodeへの導入に関する備忘録を残します。


# デバッグ手順

既にWebPack等で開発対象が起動しているとします(Angularならば、`ng start`コマンドでサーバー起動済みの状態)


## デバッグ起動設定を追加
コマンドパネルを使用して上記で起動しているサーバーにアクセスする方法がお手軽ですが、開発中に何度もデバッガを実行するのでアクセス先のURL入力の手間も省くために`launch.json`にデバッガ起動用の設定を記述します。

内蔵デバッガが使用できるブラウザは、今のところGoogleChromeかMicrosoftEdge(多分Chromium版のみ)となっています。
下記の設定例ではMicrosoftEdgeを使用しています。

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "type": "pwa-msedge",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
```

`type`要素に使用したいブラウザのタイプを指定することで切り替えることができます。

|typeの内容|ブラウザ|
|----------|-------|
|pwa-chrome|GoogleChrome|
|pwa-msedge|MicrosoftEdge|

## ブレイクポイントを設定する
たったこれだけでブレイクポイントを設定した箇所でプログラムを停止させることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14972/3add4f26-a4f4-ea73-4514-47354fddecf6.png)

## Edgeを使えばもっと便利になるかも
VSCodeの拡張機能[Microsoft Edge Tools for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools)を導入しておくともっと便利になるかもしれません。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14972/af912f85-f7dd-1e20-9d87-0bf51298203d.png)
この拡張機能を導入した状態でデバッガを起動すると、デバッガツールが上記のように変化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14972/aee42321-8f4a-3151-12dd-6e60f57f165c.png)
このアイコンを選択することで、デバッグ対象のブラウザで表示している内容をVSCode内のEdge開発者ツールで表示することができます。
もちろんインスペクタも使用可能です。また、スクリーンキャストを実行することでVSCode内にブラウザが表示している内容そのものを投影することができ、スクリーンキャスト内から実際のブラウザ画面へのマウス操作も行うことができます。

下記はブレイクポイントでWebアプリを停止させつつ、スクリーンキャストでブラウザの表示内容を映しスクリーンキャスト内でインスペクタを使ってHTML要素を参照している時の画面です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14972/4f715e20-4574-6412-a53d-369a4a4348ba.png)

# 参照

参考にしたWebサイト様。

- [VSCodeでJavaScriptのデバッグが容易になったらしい](https://zenn.dev/chida/articles/a12f72ed8153b0)
- [Easier browser debugging with Developer Tools integration in Visual Studio Code - Microsoft Edge Blog](https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/)
djangoのMiddleWareに頼らなく、自作でSessionのキーと値をブラウザに保存しましょう！

Djangoは独自のsession処理機能が実装されていますが、自分なりのsessionを作ることももちろんできます。
例えば：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729963/56ab7073-4f8b-6e6f-f9e3-d70f644e6085.png)
このように、好きなNameを設定し、あるいはいくつのcookiesをまとめてブラウザに保存することで、ブラウザから二回目のrequestが来た時、必要なデータも簡単に手に入れることができます。

# Template
簡便のため、form tagを使ってLogin画面を想像してください。

# MiddleWare
```python
class Cust_session(MiddlewareMixin):  
  
    def process_request(self, request):  
        request.my_session = {'my_session_id':'', 'my_session_value':''}  
        request.name = ''  
  
    def process_response(self, request, response):  
        my_session_value = request.my_session.get('my_session_value')  
        print(my_session_value)  
        hl = hashlib.md5()  
        hl.update(request.name.encode('utf-8'))  
        re_username = hl.hexdigest()  
        request.my_session['my_session_id'] = re_username  
        print(request.my_session)  
              response.set_cookie('my_session_id_plus',request.my_session['my_session_id'])  
  
        return response
```


# Views層
```python
def login(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        user_obj = True if username == 'A' and 'password' == 123 else False
        if user_obj:
            request.my_session['my_session_value'] = {'name':username,
                                                      'password':password}
            request.name = username
        return HttpResponse('ok')
    return render(request, 'login.html', locals())
```

process_requestで設定されたrequest.my_sessionはViewsに渡し、Viewsのlogin関数はrequest.my_sessionの`my_session_value`の値を与える。
process_responseはViewsからのrequest.my_sessionをチェックし、my_session_idがないため、Viewsから与えられたrequest.nameを暗号化し、ブラウザで保存するmy_session_id_plusのvalueとなります。

単純にブラウザで保存されているcookiesのカスタマイズに過ぎないため、ご了承ください。