OmniAICreator/Qiita-1.07M huggingface dataset:
正規表現の基本まとめ（JavaScript）

#概要
正規表現が苦手なので、JavaScriptの正規表現を自分用のメモとしてまとめました。

#正規表現とは？
正規表現とは、文字を表現するための表現方法のことです。検索する際によく使われます。正規表現は、「リテラル」と「メタ文字」の２種類で構成されます。

- リテラル：見たままの文字のこと
- メタ文字：特殊な意味を持つ文字のこと

#デリミタ
デリミタとは、**表現の始まりと終わりを示すもの**です。JavaScriptでは、「/」で表現します。また、終わりを表すデリミタの直後に配置し、デリミタ内部に機能を追加するものを修飾子といいます。

<img width="522" alt="スクリーンショット 2020-02-26 10.26.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584672/5a75d00b-ca7a-aa96-2a7a-47b8bf07b64f.png">



主な修飾子

|修飾子| 何の略？        |機能　　                |
|:---:|:----------------|:---------------------|
|g    |global           |合致する結果すべてを抽出する|
|i    |case insensitive |大文字と小文字を区別しない  |
|m    |multiline        |複数行を対象にする（^と$）    |


#メタ文字

##基本
メタ文字とは、特殊な意味を持つ文字のことです。

| 文字    | 表現内容              |
|:-----:|:----------------------|
|.| 改行を除く任意の１文字           |

※エスケープ
メタ文字は特別な意味を持つため、そのまま記述すると意味のある指定と解釈されます。 **リテラルとして認識させたい場合は、直前に「\」バックスラッシュを付ける必要があります。**

例）.をエスケープする

```
\.
```

##文字クラス
[]に文字を列挙することを文字クラスといいます。**[]内に記述した文字のいずれか１文字**を表現します。

```
// a、b、cのいずれか１文字を表現する
[abc]
```

###範囲の指定
文字クラス内では、「-」を使って範囲を指定することができます。文字コードの順番で指定します。

```
// a、b、cのいずれか１文字を表現する
[a-c]
```

###文字クラス内での否定
[ の直後に ^ を記述すると、**[]内の文字以外の１文字**を表現します。
※[ の直後でない場合は、 ^ のリテラルとして扱われます。

```
// a、b、c以外の１文字を表現する
[^a-c]
```

###文字クラス内でのエスケープ
文字クラス内では、エスケープが必要なメタ文字は異なります。「.」などはエスケープの必要がありません。

【文字クラス内でエスケープが必要なメタ文字】

| メタ文字 | 条件                |
|:-------|:-------------------|
|^       | [ の直後のみ          |
|-       | 文字と文字の間にある場合 |
|]       |                     |
|\       |                     |

###定義済みの文字クラス
比較的よく使われる文字クラスには、略記が定義されています。

|略記|文字クラス|表現内容 |備考      |
|:----:|:---------|:---------------------------|:--------|
|\d |[0-9] |0-9のいずれか１文字         |digitの略|  
|\D|[^0-9]|0-9以外の１文字            |\dの否定形|
|\w|[a-zA-Z0-9_]|a-z、A-Z、0-9、_のいずれか１文字|wordの略|
|\W|[^a-zA-Z0-9_]|a-z、A-Z、0-9、_以外の１文字|\wの否定形|
|\s|[\n\t\r\f ]|改行、タブ、リターン、改ページ、スペースのいずれか１文字 |spaceの略| 
|\S|[^\n\t\r\f ]|改行、タブ、リターン、改ページ、スペース以外の１文字    | \sの否定形|
|\n| |改行                           |          |
|\t| |タブ                            |          |
|\r| |リターン                         |          |
|\f| |改ページ                         |          |

##論理和指定子
aとbのいずれかという指定をすることができます。

```
// aまたはbの１文字を表現する
a|b
```

##グループ化
()で囲むことで正規表現をグループ化することができます。

```
// abcまたはabdのいずれかを表現する
ab(c|d)
```


##量指定子
~~直前の文字~~**直前部分の正規表現を何個繰り返すか**を表現します。

| 量指定子  | 表現内容           |
|:---------|:----------------|
|*         | 0個以上 　　       |
|+         | １個以上 　　       |
|?         | 0個または１個    　　|
|{n}       | n個               |
|{min,}    | min個以上 　　　　  |
|{min, max}| min個以上、max個以下 |

※最長一致と最短一致
量指定子はデフォルトで、条件を満たすものが複数あった場合、一番ながいものと一致するようになっています。これを最長一致といいます。
**最短一致（一番短いものと一致するよう）にするには、量指定子の直後に「?」をつけます。**

##アンカー
**位置**を表現します。

| アンカー | 表現内容     |
|:-------|:-----------|
|^       | 行の先頭     |
|$       | 行の末尾     |
|\b      | 単語の境界   |
|\B      | 単語の境界以外|


#正規表現の一覧
http://gimite.net/help/devas-ja/all_regex.html

#参考
https://murashun.jp/blog/20190215-01.html
https://so-zou.jp/software/tech/programming/tech/regular-expression/meta-character/
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions
https://ja.javascript.info/regular-expressions
resourcesメソッドはとっても便利！


## はじめに
> この記事はプログラミング初学者である私自身の備忘録として残します。

プログラミングの学習を初めてからというもの、ルーティングの記述ではずっとresourcesメソッドを使い続けていたので、なぜこのメソッドを使うのかおさらいしてみました。結論「やっぱり便利だな〜」。


## ルーティング（routes.rb）の記述に際して
resourcesメソッドの **不使用時** と **使用時** のコードを比べてみました。
>あれ？そもそもルーティングってなんだっけ？って思った方は、[こちら](https://wa3.i-3-i.info/word1498.html)を読んでみてください。

```ruby
### resourcesメソッド　** 不使用時 **
root to: 'posts#index'
get '/posts',     to: 'posts#index'
get '/posts/new', to: 'posts#new'
post '/posts',    to: 'posts#create'
```


```ruby
### resourcesメソッド　** 使用時 **
root to: 'posts#index'
resources :posts, only: [:index, :new, :create]
```
resourcesメソッド**不使用時**の
`get '/posts', to: 'posts#index'` を説明すると、

HTTPメソッドの`get`を使って`posts` パス（URIパターン)を取得した際の処理として、`posts`コントローラの`index`アクションを指定する。

という意味です。
形としては

```ruby
HTTPメソッド 'パス（URIパターン）', to: 'コントローラー名#アクション名'
```
てなかんじです。

resourcedメソッド**使用時**の`resources :posts, only: [:index, :new, :create]`を説明すると、

`posts`コントローラーを参照（resource）して、コントローラーが持つ**７つのアクション**から`index`、`new`、`create`のみを使う。

という意味です。
形としては

```ruby
resources :コントローラー名, only: [:アクション名, :アクション名・・・]
```
となります。
実はこれ、`only`を省けば７つのアクションすべて使えるという意味になります。

##まとめ
どちらも同じ処理を行うコードですが、
resourcesメソッド**不使用時**では３行使って記述されているコードが、**使用時**ではたった１行にまとめられています。さらにもう一点、resourcesメソッドを使えば、`HTTPメソッド`と`パス（URIパターン）`を指定する必要がありません。これだけで十分このメソッドの便利さが分かると思います。




[HTTPメソッド](https://wa3.i-3-i.info/word11405.html) や [パス（URIパターン）](https://wa3.i-3-i.info/word1166.html)について気になった方は、自分が作業中のファイルをターミナルで開いて、`rails routes`で確認してみてください。（言葉の意味が分からない場合は文字をクリック）

##もっと詳しく知りたい方は

以下にリンクを貼っておきます。

・Samurai Blog
[【Rails入門】resourcesの使い方まとめ]
(https://www.sejuku.net/blog/27728)

・Pikawaka
[【Rails】resourcesメソッドを徹底解説！](https://pikawaka.com/rails/resources)
vuetify@2.2.11で `v-col` `xs`が動かない

# `v-col` `xs` not working
vuetify@2.2.11で `v-col` `xs`が動かない。

## ドキュメント上には `xs` が存在するが、内部的には`cols`へ置き換わっている
- [vuetify documentation](https://vuetifyjs.com/en/components/grids#grid-system)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172701/d7a2b478-5d0f-5059-f341-0b42fc730da3.png)


- [[Bug Report] XS class in vuetify grid does not work #8997](https://github.com/vuetifyjs/vuetify/issues/8997)

>  Why was "xs" changed to "cols", but "sm" and "md" still work? Also, the documentation still tells people to use "xs". This makes zero sense. Either changing "xs" to "cols" was a mistake, or, If it was intentional, the documentation would reflect the change. This cost a lot of time to figure out.
> 【google訳】：「xs」が「cols」に変更されたのに、「sm」と「md」はまだ機能するのはなぜですか？また、ドキュメンテーションはまだ「xs」を使用するように人々に告げています。これは意味がありません。「xs」を「cols」に変更するのは間違いでした。または、意図的なものであれば、ドキュメントに変更が反映されます。これを理解するには多くの時間がかかりました。

# 実際の動作
### `xs`: 設定値は反映されず、無視される

```html
<v-col xs="6">
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172701/c7dcd023-763b-8eae-a3a3-1e6155059cce.png)

### `cols` に設定すると期待した動きになる

```html
<v-col cols="6">
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172701/2471e60b-f239-65a4-ee52-e88791614d61.png)
Laravel artisanコマンド逆引き

Laravelでは、アプリ開発に便利な数多くのコマンド・Artisanが用意されています。これらのコマンドを活かすことで、より労力を少なく効率的な開発が可能となります。

### コマンド一覧を確認する

```
php artisan list
```

### どのrouteが設定されているか確認する

```
php artisan route:list
```

### 対話型のコンソールtinkerの起動

```
php artisan tinker
```

### マイグレーションファイルとテーブルの作成

```
php artisan make:migration create_shops_table --create=shops
```

### マイグレーションの実行

```
php artisan migrate
```

### モデルクラスファイルのひな形作成

```
php artisan make:model <モデル名>
```

### コントローラークラスファイルのひな形作成

```
php artisan make:controller <コントローラー名>
```

### リクエストクラスのひな形作成

```
php artisan make:request <リクエストクラス名>
```

### シーダー用ファイルの作成

```
php artisan make:seeder <シーダークラス名>
```

### シーディングの実行

```
php artisan db:seed
```

### テーブルを全削除して、再作成

```
php artisan migrate:fresh
```

### テーブルを全削除して、再作成、シーディングまで実行

```
php artisan migrate:refresh --seed
```
Flaskアプリケーションをpythonコマンドで実行する際にOSError: [Errno 8] Exec format errorというエラーが出る

## 解決策1
ファイルの1行目に`#! /usr/bin/env python`を追加する

## 解決策2
ファイルパーミッションを644に変更する。

## 解決策3
`flask run`でアプリケーションを実行する

## 参考リンク
https://github.com/pallets/flask/issues/3189
https://github.com/pallets/werkzeug/issues/1482
良さげなクロスプラットフォーム開発言語《v》のメモ（Go,Nim,Rustと少し比較）

# 序
GoとNimは趣味でそれなりに触って、Rustは仕事にならない限り触らないことにしている自分が、v言語をチラ見してみたのでメモを残しておく。　バージョン0.1台とまだまだ若い言語なので参考程度に。
v言語:
https://vlang.io/

cf.なるほど。
[Rustを業務で1年使ってみてわかったこと](https://qiita.com/AtsukiTak/items/0ecba19f3518c23d2bf3)

# v言語を三行で
- v言語はGoをリスペクトしてる型あり言語。もともとvはGoで書かれていた。
- Nimと同様にC言語をバックエンドとしてバイナリ化する。vは、Nim並みにコンパイルは早くバイナリサイズは小さく。
- Rustとは異なり言語仕様はシンプルに。モダンなところはRustにも学ぶ（関数定義はfuncではなくfnだし...）。

# v言語の使い所、思ったところを三行で
- 公式サイトとしては、v言語をクロスプラットフォームなクライアント側のアプリ作りに使って欲しい模様。出自からも当座はクライアント側一択か。
- 実用するには、C/C++(/objective-C)との相性の良さが、「実績として」活かされるようになることが必要か。
- サーバ側とのやり取りはjsonで行うのが基本か。近い将来のモダンな開発としてはサーバ側はGraphQLでインターフェイスを切るといったところになるのだろう。

どこぞの猛者がネットワークゲームのクライアントとしてv言語を採用してくださったりすると、v言語が広まるのだろうか。

# 見た目。学習コストが低そうで好感あり。
GoっぽいがRustっぽくもあるのだろう。が、Rustを良く知らないので、とりあえず、Scalaを日常的に書いている人間としては違和感が少なくて良かった。まぁ、vはモダンな見た目の言語ということ。チラ見しておこう。

＃公式サイトに行くと、web上でv言語のサンプルを実行することができる。web上での実行は若い言語では望ましい機能だね。
## ①文字列の扱い

```.nim
name := 'Bob'
println('Hello, $name!')  // `$` is used for string interpolation
println(name.len)

bobby := name + 'by' // + is used to concatenate strings
println(bobby) // "Bobby" 

println(bobby[1..3]) // "ob" 
mut s := 'hello '
s += 'world' // `+=` is used to append to a string
println(s) // "hello world" 
```
やはりGoっぽい。文字列をmutableで扱う場合にはmutで明示するというあたりは今風で良い(scala/kotlin等のval/var相当)。

出典:
https://vlang.io/docs#strings

## ②パターンマッチ

```.nim
s := match number {
	1    { 'one' }
	2    { 'two' }
	else { 
		println('this works too')
		'many' 
	}
}

```
出典:
https://vlang.io/docs#match

scalaのmatch(以下)と近しい。

```.scala
val s = number match  {
    case 1 =>   'one'
    case 2 =>   'two'
    case _ => { 
        println('this works too')
        'many' 
    }
}
```

##③高階関数

かなりGoっぽいね。

```.go
fn sqr(n int) int {
        return n * n
}

fn run(value int, op fn(int) int) int {
        return op(value)
}

fn main()  {
        println(run(5, sqr)) // "25"
}
```

出典:
https://vlang.io/docs#highfns

参考
[Go言語で高階関数を書いて遊んでみた](https://qiita.com/shiki_tak/items/54ee5b84cd98a4349efe)

##④インターフェイス
こちらもGoっぽい。ただ、コンパイルが通らなかった。まぁ、若い言語ですから ;-)

```.go
struct Dog {}
struct Cat {}

fn (d Dog) speak() string {
	return 'woof'
}

fn (c Cat) speak() string {
	return 'meow' 
}

interface Speaker {
	speak() string
}

fn perform(s Speaker) {
	println(s.speak())
}

dog := Dog{}
cat := Cat{}
perform(dog) // "woof" 
perform(cat) // "meow" 
```

出典:
https://vlang.io/docs#interfaces

参考
[Goのinterfaceがわからない人へ](https://qiita.com/rtok/items/46eadbf7b0b7a1b0eb08)

##⑤テスト手法
`hello.v`をテストする際には、`hello_test.v`を用意してね、とのこと。

```hello.v
fn hello() string {
	return 'Hello world'
}
```

```hello_test.v
fn test_hello() {
    assert hello() == 'Hello world'
}
```
まぁ、実際に開発する段になってから考えるところだろうけど、IDEがサポートしてくれたら使いやすいのかも。

# 感想
Swift/Kotlinが結局クロスプラットフォーム開発用途には不十分と思われるので、ニッチなクロスプラットフォーム開発用途ではv言語ありかも。nimとの比較は気が向いた時にでも。
制限標準出力問題

https://qiita.com/sh1ma/items/86f03c08b324e7a88495

- 文字列・数値リテラル不可
- chr/ord関数不可

似たようなネタの問題を[CodeIQで出題した](https://github.com/cielavenir/codeiq_problems/tree/master/q431)ことがありましたが、あっちはchr関数の利用が前提だったので、もう一捻りがなかなか大変でした(chrが使えないとgetattrすらままならない)。
かろうじてbytearray.decodeで事なきを得ました。

※Py2/3両方可です

```py:Sh1ma.py
#!/usr/bin/env python
szero = len(str(len([])))
sone = szero + szero
stwo = sone + sone
sthree = stwo + stwo
sfour = sthree + sthree
sfive = sfour + sfour
ssix = sfive + sfive
print(bytearray([
	ssix+sfour+sone+szero,
	ssix+sfive+sthree,
	sfive+sfour+szero,
	ssix+sfive+sthree+stwo+szero,
	ssix+sfive+szero,
]).decode())
```
【CSS】CSSでオシャレになれるか？(ざっくりCSS超入門)

###1.最近少し気が付いたこと
プログラムを作って、思い通りの動作を確認する。
↓
嬉しくなってQiitaに下書きして、美しいハイライトを見て満足する。
↓
実行画面の一部のキャプチャーもアップ。


![select_dino2_hibrid.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494408/2fdd93e0-c84b-3120-9039-4774c7230708.jpeg)

####ダサい!!!
####linuxの管理者専用の白黒画面がオシャレに見えるほどダサい!!!



###２.cssとは
+ 見た目を一切気にしようとしない処理を書く人々には縁のないもの
+ デザイナーさんのような華のある人々が駆使するもの
+ __webページの見た目を華やかにするもの__

__こういう技術があるという事は、エンジニアの皆様も日々自分の
ダサさに悩んでいるんだ。(!？)__

__これを覚えれば、恐竜登録ツールもイケイケになるはず。__



###3.CSSの基本スタイル

__セレクタ{ プロパティ:値; }__
という書式から成る。

セレクタ – どのHTMLタグに対して見合えを調整するか
プロパティ – どういった内容のデザインを施すか
値 – プロパティはどの程度か。
というものらしい。

とりあえず、色を変えれば今の『逆Linux』画面から変わるはず！

参考urlを調べて実装してみる。
ワクワクするなあ。

###4.CSSのコーディング例

```php:dino_css.css
h1 {
	color: red;
	background: #33ffff;
}
body {
	background: #aaffff;
}
input[type="text"][name="dname0"]{
	color: #ffffff;
	background: #00ffff;
}
input[type="text"][name="hdname0"]{
	color: red;
	background: #00ff33;
}
input[type="submit"][name="btn2"]{
	color: red;
	background: #77ccff;
}
select{
  background:#ffcccc;
}

```
このファイルを適用したいファイルのタグの前に、下記一行を書けばいいのだ
__\<link rel="stylesheet" type="text/css" href="dino_css.css" />__
どうなるか楽しみ！！！


###5.結果

[恐竜登録ツール2](https://qiita.com/knowledge87sun/items/36cb41d73e33e96bf256)
上記ソースに適用してみる。

設定した内容が適用された。
それ以上でも、それ以下でもない。
こういう技術があるんだという事を知っただけでも良かった。。。

 __イケイケになったか？→未達成。__ 
唯一分かった事がある。
__『デザイナーへの転職は厳しい』__という現実だ。

美しさの提供って大変ですね。

![css_adopt_dino.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494408/ea846da4-c5fe-e88d-9614-ca673d60e70e.jpeg)


###6.参考サイト様
[CSSの基本的な書き方](https://techacademy.jp/magazine/4872)
[CSS 属性セレクタのサンプル(要素名[属性名=”値”])]
(https://itsakura.com/css-selector-zokusei)
ActiveRecord::DuplicateMigrationNameError:とは?

### ActiveRecord::DuplicateMigrationNameError:
`rake db:migrate`した際に下記のようなエラーが出ることがある．

```
rake aborted!
ActiveRecord::DuplicateMigrationNameError:
```

これの意味するところは，同一内容のマイグレーションファイルが二つあるよということ．
マイグレーションファイル名が異なっていてもDB構造が全く一緒なら起こった．
新しい方のマイグレーションファイルを削除し，もう一度`rake db:migrate`すればOK．
EC2(AmazonLinux2)のログをCoudWatch Logsに流す

公式ドキュメント
https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/QuickStartEC2Instance.html

(1) IAMロールの準備→CloudWatchFullアクセスでおk。
(2) Agentのインストール

```
$ sudo yum update -y
$ sudo yum install -y awslogs
$ sudo vi /etc/awslogs/awscli.conf
    # ここでregionをap-northeast-1に指定。
$ sudo vi /etc/awslogs/awslogs.conf
    # ここでCloudWatchに流したい対象のファイルを指定。
$ sudo systemctl start awslogsd
$ sudo systemctl enable awslogsd.service
```

awslogs.confの書き方
https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/AgentReference.html

```:リファレンス
[logstream1]
log_group_name = value
log_stream_name = value
datetime_format = value
time_zone = [LOCAL|UTC]
file = value
file_fingerprint_lines = integer | integer-integer
multi_line_start_pattern = regex | {datetime_format}
initial_position = [start_of_file | end_of_file]
encoding = [ascii|utf_8|..]
buffer_duration = integer
batch_count = integer
batch_size = integer
```

confファイルには複数のログストリームの定義を書くことができる。それらの区別のために、括弧`[ ]`にファイル内で一意な名前をつける。

検証として以下のように記述。

```:/etc/awslogs/awslogs.conf
[/home/ec2-user/log.txt]
datetime_format = %b %d %H:%M:%S
file = /home/ec2-user/log.txt
buffer_duration = 5000
log_stream_name = {instance_id}
initial_position = start_of_file
log_group_name = ec2_log                                                                            
```

```sh:test.sh
#!/bin/sh
echo "now called" >> ./log.txt
```

`test.sh`を実行するたびにClowdWatchでログが見れるようになった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406130/a1f48412-be47-0a94-02c5-4407e2d91112.png)

なお、一度再起動した後もログが流れることが確認できた。

___

__追記__

ログファイルには日付や時刻を含めることがるため、汎用的にログストリームに流せるように改変。ワイルドカードが使える。

```:/etc/awslogs/awslogs.conf
[/home/ec2-user/log.txt]
datetime_format = %b %d %H:%M:%S
file = /home/ec2-user/log*.txt
buffer_duration = 5000
log_stream_name = {instance_id}
initial_position = start_of_file
log_group_name = ec2_log  
```

なお、ここを編集した場合は、反映させるため、以下の手順を実行。

```
$ sudo systemctl stop awslogsd
$ sudo systemctl start awslogsd
$ sudo systemctl enable awslogsd.service
```
Bashの実行の大まかな流れとかの備忘録

# 実行してみる

Bashコマンドの実行はいたってシンプルで、terminalだったりshellだったりにそのままコマンドをたたけばいいだけ。ここでの実行は、複数コマンドをファイルに記述してそれを実行する、という形で書いていく。

## ファイルを実行する流れ

自分が始めた言語がCとPython、最近触っているのがJavaScriptだったので、最初の実行が手間取ったので同じような方は参考にしてくれれば。

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

echo hello

exit 0

```
これが実行するファイルの中身。ただターミナルに`hello`と表示する至ってシンプルなコードです。
これを実行するやり方が、以下の感じ

```shell

$chmod 777 test.sh
$./test.sh
hello
$
```
ここで個人的に違和感を覚えてしまったのが、Cだとコンパイルして実行ファイルにしてから実行という流れが、Bashだと「ファイルに権限を付与→実行」という形で、まぁ考えてみれば当たり前の話ですが、驚いた。
ここでは読みこみ、書きこみ、実行の権限を与えたけど、たぶん実行だけでいいんじゃないかなと実行してから思った。

ご指摘あれば、コメントください。
Rails6 flash表示をする

# 目的

- flashの表示で若干詰まったことがあったため実施方法をまとめる

# 書き方の例

- 下記に処理された時に「削除されました」と表示される時の書き方をまとめる。
- 任意のコントローファイルに下記の一文を記載する。下記が実行された時にflashが表示される。

    ```ruby
    flash[:notice] = "削除されました"
    ```

- application.html.erbファイルの任意の場所に下記の処理を追加する。

    ```html
    <%= flash[:notice] %>
    ```
ジェネレータ

通常の関数と異なり、前回返した値を覚えているようです。
呼び出すと次の値を返します。

```python:generator.py
def counter(num=10):
    for _ in range(num):
        yield 'run'

def greeting():
        yield 'good morning'
        yield 'good afternoon'
        yield 'good night'

for g in greeting():
    print(g)

g=greeting()
print(next(g)) #good morning
print(next(g)) #good afternoon

c=counter()
print(next(c))
print(next(c))
print(next(c))
print(next(c))
print(next(c))
print(next(c))
print(next(c))
print(next(c))
print(next(c))
print(next(c))
#print(next(c)) エラー出る
```
出力：

```
good morning
good afternoon
good night
good morning
good afternoon
run
run
run
run
run
run
run
run
run
run
```
iOSアプリで審査通ったバージョンを公開せずに新しいバージョンを申請する手順

iOSアプリで審査通ったバージョンを公開せずに新しいバージョンを申請したい。

たまにこういう事があり、何度かやったことがあるのですがいつもやり方を忘れて
確かに出来たはずなのにやり方がぱっと分からず右往左往して
もしかして出来なくなったの？（ありえそうなので・・・）
とかでやり方を思い出す（再発見する）まで時間がかかるのでちゃんとメモしておく。

例えば、公開バージョンが1.0で新しいバージョンとして2.0を開発中なんだけど
ちょっと審査に不安があって事前に審査を行いたいということで1.1を作って審査に出し（手動で公開）、無事審査が通って、デベロッパーによるリリース待ちステータスまで進んだ。
その後に2.0を審査に出したいというケース。

新しく2.0のバージョンを作ろうとしてもグレーアウトで選択できません。![１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52301/489bae75-b6df-228f-691c-3217d1a0eed0.png)

ではどうやるのか。
バージョンの追加も削除も出来ないですが1.1のバージョン番号を変更することはできるので2.0に書き換えればそれだけでOK（なんと。。。）

審査が通ったバイナリは一旦キャンセルします。
そしてここのバージョンを1.1から2.0に書き換えて保存します。
<img width="550" alt="スクリーンショット 2020-02-15 23.24.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52301/d3c46e4c-a7ee-d38f-1ba9-23148172dc6a.png">

すると左のリストのバージョンも次に表示するときには2.0に変わっていると思います。

あとは新しい2.0のバイナリをアップロードして選択、通常の手順で進めればOK
ibus-mozcでNormanレイアウト

# 概要

Ubuntu 16.04 のibus-mozcを使って[Normanレイアウト](https://normanlayout.info/)で日本語入力するための設定方法の備忘録。

Ubuntu上でNormanで入力したいだけなら[fcitx-mozcを使った方法](https://qiita.com/Yoshinobu-Ishizaki/items/26e393add3c43f4a5b01)のほうがやりやすいと思う。

ibusでは一筋縄では行きませんでしたが、Normanみたいなちょっと変わったレイアウトを採用したい人の参考にでもなれば。

# 方法

## ibusにnormanのエントリ追加

/usr/share/ibus/component/simple.xml
にエントリを入れる。colemanとかの部分をコピーして修正。

```{/usr/share/ibus/component/simple.xml}
<engine>
<name>xkb:us:norman:eng</name>
<language>eng</language>
<license>GPL</license>
<author></author>
<layout>us</layout>
<layout_variant>norman</layout_variant>
<longname>English (Norman)</longname>
<description>English (Norman)</description>
<icon>ibus-keyboard</icon>
<rank>99</rank>
</engine>
```

`ibus list-engine`
でエントリが入っているのを確認し、
`ibus engine xkb:us:norman:eng`
でレイアウトが変更されるのを確認する。

## ibus-mozc

日本語入力のためにibus-mozcをインストール。
`sudo apt install ibus-mozc`

インストール後、
`ibus-setup`
でmozcとnormanを選択。

![Screenshot from 2020-02-15 21-13-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294073/6afe0bea-d13b-0b84-ca84-aa56832804f1.png)

詳細タブの、「システムのキーボードレイアウトを使用する」のチェックを外す。

`ibus restart`するとnormanレイアウトで日本語入力できるようになってる。

残念ながら、X windowからログアウトしてログインし直すとqwertyに戻ってしまうので、自動起動するアプリケーションに`ibus restart`を追加。

また、システム設定のテキスト入力を起動したり、super+spaceで別の入力システムに切り替えたりするとやはりqwertyに戻される。
それを避けるため、mozcは変換キーで日本語変換がON、無変換キーでOFFとなって直接入力になるように設定した。

# トラブルシューティング

## ibus-setup が起動しない

最初、

```
Traceback (most recent call last):
File "/usr/share/ibus/setup/main.py", line 31, in <module>
from gi.repository import GLib
ModuleNotFoundError: No module named 'gi'
```

というエラーが出た。

これはanaconda環境で実行したからで、anaconda環境を抜けて実行したら問題なく起動した。

## システム設定→テキスト入力にNormanが表示されない

ibusのエントリを編集しても、システム設定(unity-control-center)の入力ソースリストには反映されない。

gnome-tweak-toolをインストールする。

`sudo apt install gnome-tweak-tool`

gnome-tweak-toolを起動して、キーボードとマウスの項目で「全ての入力ソースを表示」をON。

するとシステム設定のテキスト入力にEnglish (Norman)も含む全てのレイアウトが表示される。

ここで選んだNormanだとControl Lがbackspace動作をしてしまうので、gnome-tweak-tool のタイピングのところ、「CTRLの位置をAの左」に設定。

単に英語でNorman打ちたいだけならこの方法だけで良い。
ibus-mozcとは連動してくれず、システム設定→テキスト入力にNormanを追加してもmozcはqwertyのままなので、上記のようにしないとならない。

# 試行錯誤

途中経過で試してみたこと。

## gsettings

```{bash}
gsettings set org.gnome.desktop.input-sources sources "[('xkb', 'us+norman'), ('ibus', 'mozc-jp')]"
```
確か実際にはNormanレイアウトが有効にならなかったような。。。

## dconf
`dconf dump /desktop/ibus > ibus.conf`
後、

```
preload-engines=['xkb:us:norman:eng','mozc-jp']
```
と該当部分を書き換えて、
`dconf load /desktop/ibus < ibus.conf`

これも効果なかったような。。。

## ~./bashrc

```{bash}
ibus engine xkb:us:norman:eng
ibus engine mozc-jp
```
を追加。ターミナルを開くとNormanになるように。→自動起動アプリ設定の方がスマートだった。

# 参考

- https://desktopi18n.wordpress.com/2015/03/10/ibus-tips/
- https://groups.google.com/forum/#!searchin/ibus-user/Component%7Csort:date/ibus-user/P6nJw2953pc/25I7LVcPAwAJ
- https://askubuntu.com/questions/540098/how-to-set-ibus-default-input-method-in-14-04
- https://unix.stackexchange.com/questions/49452/where-is-config-file-of-ibus-stored
SpringBoot2.2.4の内蔵TomcatでSSIServletを使う

## 対象読者

SpringBootを使ったWebサービスを開発しており、内蔵Tomcatを利用している。
また、SSI (Server Side Include) を利用しているため、`SSIServlet`を使用している。

## TL;DR

Tomcat 9.0.30ではSSI関連のモジュールが外部ライブラリ化していますので、
以下のTomcat SSIライブラリも依存関係に追加しなければならなくなりました。

https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-ssi

## 経緯

JVNVU#98104709 Apache Tomcat の複数の脆弱性に対するアップデート
http://jvn.jp/vu/JVNVU98104709/index.html
により、SpringBootの内蔵Tomcatをバージョンアップする必要が出てきました。

そこで、SpringBootのバージョンを最新のリリースバージョン`2.2.4.RELEASE`へと更新することにしました。

## SpringBoot 2.2.4RELEASEの内蔵Tomcatのバージョン

https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#dependency-versions

公式ドキュメントによると、内蔵されたTomcatのバージョンは`9.0.30`です。

## Tomcat 9.0.30では、SSI関連モジュールが外部ライブラリ化されている！

ここで、Tomcat 9.0.30の[ChangeLog](https://tomcat.apache.org/tomcat-9.0-doc/changelog.html)を参照すると、

> Moved server-side include (SSI) module into a separate JAR library. (schultz)

と記載されています。

実際に`build.gradle`ファイルにてSpringBootのバージョンを`2.2.4.RELEASE`へと変更すると、
`SSIServlet`が見つからなくなり、ビルドできなくなります。

どこに移動したかが書いていないので、[MVN Repository](https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-ssi)を探索しました。


## Tomcat SSIライブラリに分割されていた

https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-ssi

MVN Repository内にて、Tomcat SSIライブラリを発見しました。

Spring Bootの内蔵Tomcatにバージョンをあわせて`9.0.30`を選択して、`build.gradle`の`dependencies`に追加したところ、問題なく`SSIServlet`を見つけられるようになり、ビルドが通りました。

## まとめ

本記事では、Spring Boot 2.2.4.RELEASE内蔵のTomcat 9.0.30にて、SSIを使用するための依存ライブラリを紹介しました。

お役に立てれば幸いです。
【VS Code・ Live server】自動更新される度に表示がTOPへ移動する

（使用環境：Windows10  os: Google Chrome 使用言語：HTML/CSS)

Vscode の　 Live server　について質問です。

自動リロードが便利で使用していたのですが
PCを変えてから以下の動作が起こり、困っています。

　コードを書く→　自動で更新→　live serverの表示が上部へ移動する

コードを書く度に画面が動くので、その都度スクロールしないと更新個所を確認できません。
手動でリロードするより手間となっています。

何度もインストールをやり直しましたが状況は変わりません。

便利なので使用したいと思っているのですが
１か月近く調べても解決策が見つからずこちらへ投稿致しました。

何かヒントでも結構なので、心当たりがある方は教えて頂けると助かります。
よろしくお願い致します。
【Go】マップサンプルメモ

## サンプル

```go
package main

import (
	"fmt"
)

func main() {
	mapTest := make(map[string]int)

	mapTest["a"] = 1
	mapTest["b"] = 2

	fmt.Println(mapTest["a"]) // 1
	fmt.Println(mapTest) // map[a:1 b:2]
	fmt.Println(mapTest["c"]) // 0 -- > 存在しないキーのときは値の型のゼロ値が返る

	for k, v := range mapTest {
		fmt.Println(k, v) // a 1
	}

	// 存在チェック
	// マップ内に指定のキーに対する値が存在しているかは、戻り値を2つ受けて、2番目の戻り値で判断することができる
	// https://blog.y-yuki.net/entry/2017/04/26/000000
	_, ok := mapTest["a"]
	fmt.Println(ok) // true

	_, ok = mapTest["c"]
	fmt.Println(ok) // false

	// 削除
	delete(mapTest, "a")
	fmt.Println(mapTest) // [b:2

	// 代入
	mapTest["d"] = 4
	fmt.Println(mapTest) // map[b:2 d:4]

	// 初期化
	mapTest2 := map[string]int{
		"A": 1,
		"B": 2}
	fmt.Println(mapTest2) // map[A:1 B:2]
}
```

## 参考

<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798158658/kuredev-22/ref=nosim/" name="amazletlink" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/51ZqHnxULJL._SL160_.jpg" alt="入門Goプログラミング" style="border: none;" /></a></div><div class="amazlet-info" style="line-height:120%; margin-bottom: 10px"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798158658/kuredev-22/ref=nosim/" name="amazletlink" target="_blank">入門Goプログラミング</a><div class="amazlet-powered-date" style="font-size:80%;margin-top:5px;line-height:120%">posted with <a href="http://www.amazlet.com/" title="amazlet" target="_blank">amazlet</a> at 20.02.15</div></div><div class="amazlet-detail">Nathan Youngman Roger Peppé <br />翔泳社 <br />売り上げランキング: 116,400<br /></div><div class="amazlet-sub-info" style="float: left;"><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798158658/kuredev-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="amazlet-footer" style="clear: left"></div></div>
マラソンの関門通過時刻をExcelで計算する


目標タイムを設定し、そこから適切なペースをExcelで計算する方法はネット上にたくさん転がっています。　
しかし、逆にキロ何分何秒で走るか、から関門ごとの予想通過時刻を計算するExcelの作り方の紹介が意外と少なかったのでご紹介します。

パラメータ（キロ何分何秒で走りたいか）をどのような形式で渡したいかにより
1と2の2パターンがあります。

作りたいものののイメージ↓
![キャプチャ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498362/383db327-cb70-3113-c14e-f3448509b041.jpeg)
#目次
１．○.○分/㎞から予想通過時刻を計算　←面倒
２．○分○秒/㎞から予想通過時刻を計算　←１より圧倒的に簡単


#１．○.○分/㎞から予想通過時刻を計算

１㎞あたりのペースを7.5分/㎞などと
分のところは整数、秒のところは小数の形で
パラメータとして渡す時の計算式はこんな感じになります↓（赤枠部）

小数部分を整数に直さないといけないので
けっこう面倒くさいです。

![キャプチャ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498362/f8806303-5127-6154-1cca-b73299bfb0ac.jpeg)

```ruby:関門通過時刻の求め方
=[1つ前の関門の通過時刻]+TIME(0,ROUNDDOWN([1つ前の関門から、次の関門までの距離]*[1㎞あたりのペース],0),MOD([1つ前の関門から、次の関門までの距離]*[1㎞あたりのペース],1)*60)
```

やってることは単純。

TIME関数で前の関門から次の関門までにかかる時間を計算して、
前の関門の通過時刻に足し算しているだけ。

具体的には、
セルF6でパラメータとして与えられた、1㎞ごとのペース○.○分/㎞（今回は"7.5"）に
前の関門から次の関門までの距離を掛け、
その計算結果の整数部分をTIME関数の第2引数（分）に、
小数部分に60を掛けたものをTIME関数の第3引数（秒）とすることで
次の関門での通過時刻を計算することができます。

２回同じ式が出てきていて無駄なことをしているように見えますが、
そこまで複雑な計算式ではないので目をつぶりました←

- **Time関数**

構文：TIME(時, 分, 秒)

引数に時間、分、秒を渡すことで
時刻の計算ができるようになります。

[Microsoftドキュメントはこちら](https://support.office.com/ja-jp/article/time-%E9%96%A2%E6%95%B0-9a5aff99-8f7d-4611-845e-747d0b8d5457)

TIME関数の第2引数である、"分"を計算する時に使用するのが
次のROUNDDOWN関数です。

- **ROUNDDOWN関数**

構文：ROUNDDOWN(数値, 桁数)

第2引数で指定した桁数で
第1引数の数値を切り捨てます。

今回はTIME関数の第2引数を計算したいので
整数部のみ抽出する、ということで
ROUNDDOWN関数の第2引数を0にして
整数部分のみ計算。

[Microsoftドキュメントはこちら](https://support.office.com/ja-jp/article/rounddown-%E9%96%A2%E6%95%B0-2ec94c73-241f-4b01-8c6f-17e6d7968f53)

TIME関数の第3引数である秒を計算する時に使用するのが
次のMOD関数です。

- **MOD関数**

構文：MOD (数値, 除数)

第1引数÷第2引数の余りを求める関数です。
第1引数が小数の場合、
第2引数を1にすることで第1引数の小数部分のみを計算することができます。

[Microsoftドキュメントはこちら](https://support.office.com/ja-jp/article/mod-%E9%96%A2%E6%95%B0-9b6cd169-b6ee-406a-a97b-edf2a9dc24f3)


#２．○分○秒/㎞から予想通過時刻を計算

１㎞あたりのペースを7分30秒/㎞などと
分も秒もそれぞれ整数の形でパラメータとして渡す時の計算式は
こんな感じになります↓（赤枠部）

![キャプチャ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498362/2c15f3f3-cee0-229b-d4a9-834969527baf.jpeg)

```ruby:関門通過時刻の求め方
=[1つ前の関門の通過時刻]+[1つ前の関門から、次の関門までの距離]*[1㎞あたりのペース]
```
１と違い、セルF6のパラメータを時刻表示にしておくことで、
TIME関数を使用しなくても時刻の足し算が簡単にできます。

#まとめ
1の方法も2の方法も、走りたいペースが急遽変わったとしても
パラメータの値を変えるだけで全ての関門の通過時刻が
一括で置き換えられるようになっています。

よろしければご活用ください。

![running-shoes-304404_1280.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498362/a64624c5-ea40-d4f3-b455-d82464961cac.png)
（[pixtabay](https://pixabay.com/ja/vectors/%E3%83%A9%E3%83%B3%E3%83%8B%E3%83%B3%E3%82%B0-%E3%82%B7%E3%83%A5%E3%83%BC%E3%82%BA-%E9%80%9F%E5%BA%A6-%E7%BF%BC-304404/)より）
透明感のあるテーブル

## thとtdの間に隙間を開けて背景透過
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="sphenisc" data-slug-hash="ZEGWGBm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ZEGWGBm">
  <span>See the Pen <a href="https://codepen.io/sphenisc/pen/ZEGWGBm">
  ZEGWGBm</a> by sphenisc (<a href="https://codepen.io/sphenisc">@sphenisc</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
涼しげなサイトに良さそうですね。


```css
border-collapse: separate;
border-spacing: 0.5em;
```
thとtdに隙間を開ける

```css
background: linear-gradient(170deg, rgba(#eef, 0.8), rgba(#ccf, 0.3));
```
背景を水色っぽいグラデーションに。0.8と0.3の数値の部分で不透明度を変更できます。
.vimrcでfor文を使ってDRYに書く

# はじめに
- vimrcでfor文をうまく使う方法が調べてもすぐにでてこなかったのでまとめました。
- 筆者は駆け出しのVimmerですので、よりよい方法等ございましたらご指摘いただけますと幸いです。

# 本記事の対象者
- Vimmer
- `.vimrc`(or `init.vim`)の書き方がある程度わかるひと(noremapがわかる人であれば読めます)

# 先に結論
`ciw`とかの`i`を省略できるようにしたいとき、(もとの`cw`機能は`ce`で代用できる)

```vim:for文を使わないと…
nnoremap cw ciw
nnoremap vw viw
nnoremap dw diw
nnoremap yw yiw
nnoremap c" ci"
nnoremap v" vi"
nnoremap d" di"
nnoremap y" yi"
nnoremap c' ci'
nnoremap v' vi'
nnoremap d' di'
nnoremap y' yi'
nnoremap c( ci(
nnoremap v( vi(
nnoremap d( di(
nnoremap y( yi(
" (以下略)
```

```vim:for文を使うと
for each_surround in ['w', 't', '"', "'", '(', '{', "`"]
  for each_command in ['c', 'd', 'v', 'y']
    execute 'nnoremap ' . each_command . each_surround . ' ' . each_command . 'i' . each_surround
  endfor
endfor
```

# 解説
## vimscriptでのfor文の使い方
最近の言語と同じ感覚で使うことができます。

```vimscript:簡単な例
for i in [1, 2, 3]
  echo i
endfor
```
```shell:結果
1
2
3
```

## 文字列と変数を連結
`.`で連結することができます。

```vim:簡単な例
let editor = 'Vim'
echo 'Hello, ' . editor . '!'
```
``````shell:結果
Hello, Vim!
```

## 文字列をコマンドとして実行
`execute`を使います

```vim:簡単な例
let message = 'I use Vim.'
execute 'echo message'
```
```shell:結果
I use Vim.
```

# 最後に
`vimrc`の行数が多い ≒ vimの熟練度が高い
という風潮がある気がします。今回の記事を実践すると、行数が減ってしまうじゃないか！　とお怒りになる方もいるかもしれません。それでも、DRYに書いて行数が減らせることによって、

- 見やすい
- 変更を加えたいときに少ない修正箇所で済む

という確かなメリットがあると考えています
Numpy入門

# 1. Numpy 基礎
## 1.1. numpy.ndarray 基礎
### 1.1.1. numpy.ndarray 属性要素

| numpy.ndarray 属性要素| 取得内容 | Example 1 <br> np.array([[1,0,0],[0,1,2]]) |
|:-:|:--|:-:|
| ndim | 次元数 | 2 |
| shape | 配列の形 | (2,3) |
| size | 配列要素の数 | 6 |
| dtype | 配列要素のデータ型 | int32 |
| T | 転置配列| np.array([[1 0] <br> [0 1] <br> [0 2]])
| flags | メモリーレイアウト ||
| flat | 一次元化（平坦化）した配列生成 <br> 配列定義例：np.array(配列変数.flat) ||
| imag | 配列要素の虚部値配列 ||
| real | 配列要素の実部値配列 ||
| itemsize | 配列要素の大きさ（バイト）<br> 例：int32 -> 32/8 = 4バイト | 4 |
| nbytes | 配列の大きさ(バイト) | 32 |
| strides | 隣する配列要素のずれ（バイト） | (12,4) <br> 縦方向：12バイト <br> -> 4バイト * 3要素(横方向) <br> 横方向：4バイト <br> -> 4バイト * 1要素|
| ctypes | ctypesモジュールで使用 ||
| base | 参照先の配列| None |

`````````````````````````````````````````````````python:Example_1.py
### ライブラリ定義
import numpy as np

### 関数定義
def print_attribute(input):
    print("")
    for key, value in input.items():
        print(">>> " + str(key))
        print("IN: print("+str(key)+")")
        print("OUT: "+str(value))
        print("")

### 配列定義
array = np.array( [[1,0,0],[0,1,2]])

### numpy.ndarray要素定義

attribute ={}
attribute['array.ndim'] = array.ndim
attribute['array.shape'] = array.shape
attribute['array.size'] = array.size
attribute['array.dtype'] = array.dtype
attribute['array.T'] = array.T
attribute['array.flags'] = array.flags
attribute['array.flat'] = array.flat
attribute['np.array(array.flat)'] = np.array(array.flat)
attribute['array.imag'] = array.imag
attribute['array.real'] = array.real
attribute['array.itemsize'] = array.itemsize
attribute['array.nbytes'] = array.nbytes
attribute['array.strides'] = array.strides
attribute['array.ctypes'] = array.ctypes
attribute['array.base'] = array.base

### numpy.ndarray要素取得例
print_attribute(attribute)
"""

>>> array.ndim
IN: print(array.ndim)
OUT: 2

>>> array.shape
IN: print(array.shape)
OUT: (2, 3)

>>> array.size
IN: print(array.size)
OUT: 6

>>> array.dtype
IN: print(array.dtype)
OUT: int32

>>> array.T
IN: print(array.T)
OUT: [[1 0]
 [0 1]
 [0 2]]

>>> array.flags
IN: print(array.flags)
OUT:   C_CONTIGUOUS : True
  F_CONTIGUOUS : False
  OWNDATA : True
  WRITEABLE : True
  ALIGNED : True
  WRITEBACKIFCOPY : False
  UPDATEIFCOPY : False


>>> array.flat
IN: print(array.flat)
OUT: <numpy.flatiter object at 0x000001E00DB70A00>

>>> np.array(array.flat)
IN: print(np.array(array.flat))
OUT: [1 0 0 0 1 2]

>>> array.imag
IN: print(array.imag)
OUT: [[0 0 0]
 [0 0 0]]

>>> array.real
IN: print(array.real)
OUT: [[1 0 0]
 [0 1 2]]

>>> array.itemsize
IN: print(array.itemsize)
OUT: 4

>>> array.nbytes
IN: print(array.nbytes)
OUT: 24

>>> array.strides
IN: print(array.strides)
OUT: (12, 4)

>>> array.ctypes
IN: print(array.ctypes)
OUT: <numpy.core._internal._ctypes object at 0x000001E00D84BC50>

>>> array.base
IN: print(array.base)
OUT: None

"""
`````````````````````````````````````````````````

# 参考文献
1. [Numpy公式ユーザーガイド（バージョン：1.18）](https://numpy.org/doc/1.18/numpy-user.pdf)
2. [Numpy公式レファレンス（numpy.ndarray）](https://numpy.org/doc/1.18/reference/generated/numpy.ndarray.html)
ChromebookのcrostiniでPython3のrequestsとBeautifulSoupを使う時の設定

# はじめに
以前、Python3でスクレイピングしてみた（[Python3とBeautifulSoup使って図書館で借りた本をスクレイピング - Qiita](https://qiita.com/optimisuke/items/047dbf5aa4c07434be5e)）けど、環境変わってもう一度試してみたら動かなかった。設定変更したら動いたので、その時のメモを残す。


# 環境構築
```
Google Chrome OS
Version 80.0.3987.89 (Official Build) beta (64-bit)
```

```
$ python3 --version
Python 3.5.3
$ sudo apt-get install python3-pip
$ pip3 --version
pip 9.0.1 from /usr/lib/python3/dist-packages (python 3.5)
$ sudo apt-get install python3-bs4
$ sudo apt-get install python3-requests

$ pip3 list
beautifulsoup4 (4.5.3)
requests (2.12.4)
```

参考にしたサイト↓
[Python3.4以降のrequests対応 - Qiita](https://qiita.com/Tattsum/items/1107406301a72a373c77)

# 試したこと
普通に実行するとエラーがでる。

```
$ python3 scrape.py 
request
Traceback (most recent call last):
  File "/usr/lib/python3/dist-packages/urllib3/util/ssl_.py", line 308, in ssl_wrap_socket
    context.load_verify_locations(ca_certs, ca_cert_dir)
ssl.SSLError: unknown error (_ssl.c:3172)

(省略)

```

検索したら、このサイトがヒットした。
[Python requests library can't make HTTPS connections (was: Apache certbot error) - Help - Let's Encrypt Community Support](https://community.letsencrypt.org/t/python-requests-library-cant-make-https-connections-was-apache-certbot-error/31401/13)

ここに書かれてる```Solved by:```に書かれてるコマンドを試してみた。

```
$ cat /etc/ssl/certs/ca-certificates.crt
$ sudo update-ca-certificates
Updating certificates in /etc/ssl/certs...
0 added, 0 removed; done.
Running hooks in /etc/ca-certificates/update.d...

done.
done.
$ cat /etc/ssl/certs/ca-certificates.crt 
-----BEGIN CERTIFICATE-----
(省略)
-----END CERTIFICATE-----
```

このあと、実行しなおしたらうまくいった。
CAの証明書が入ってなかったみたい。
公開鍵的なもの？
自分で仮想環境とか立ち上げるとデフォルト入ってないっぽい。しらんかった。ここらへん苦手。とりあえず、動いてよかった。

参考サイト↓
[Ubuntu では ca-certificates パッケージで CA 証明書をインストールできるぞ - ひだまりソケットは壊れない](https://vividcode.hatenablog.com/entry/linux/ubuntu-ca-certificates)
[認証局 （CA：Certification Authority）とは？｜GMOグローバルサイン【公式】](https://jp.globalsign.com/ssl-pki-info/pki/ca.html)
【React】コードを書いているようなアニメーションを作成する

## 概要

Next.jsでmarkdownブログを作ったのですが、その中でコードを書いているようなアニメーションを実装してみたので、共有します。
カスタムフックとして切り出せたので誰でも使用出来ます。

## 完成したもの
[自作ブログ](https://nextblog.ragnar1904.now.sh/)で見れます。

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508043/a58496f1-c7fe-4959-239a-6e7756ac0d01.gif)

## カスタムフック

`setInterval`で文字列の長さのstateをアップデートしているだけです。

```ts:setStep.ts
import { useEffect, useRef, useState } from 'react';

export const useStep = (text: string, stepTime: number) => {
  const [length, setLength] = useState(0);
  const lengthRef = useRef(length);

  useEffect(() => {
    lengthRef.current = length;
  }, [length]);

  useEffect(() => {
    const timer = setInterval(() => {
      setLength(lengthRef.current === text.length ? lengthRef.current : lengthRef.current + 1);
    }, stepTime);
    return (): void => clearInterval(timer);
  }, []);

  return text.slice(0, length);
};

```

`Ref`を用いないと、クロージャの働きによって`setInterval`内の`length`の値が変わりません。
`setInterval`した場合、`useEffect`のreturnにタイマー解除のコールバックを忘れずに。

## コンポーネント
コードと、間隔を指定して、返り値をrenderするだけです。

```tsx:LiveCode.tsx
import React from 'react';

import { useStep } from '../../hooks/useStep';
import { CodeBlock } from '../Post/MarkDownViewer';

type Props = {
  code: string;
  language: string;
};

export const LiveCode: React.FC<Props> = props => {
  const codeState = useStep(props.code, 35);
  return (
    <>
      <CodeBlock value={codeState} language={props.language} />
    </>
  );
};
```

`CodeBlock`コンポーネントでは、`React-Markdown`と`react-syntax-highlighter`を使用しています。

## まとめ
React楽しすぎますね。
やっぱりカスタムフックで機能とコンポーネントを分けられるところがクールです。
BULK API（Integration Architecture デザイナー)

# BULK API
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577032/0bc8077a-455f-aafb-7056-d97075d55bbd.png)

## 特徴
- 大量データをインポート、エキスポートする為に使用されるAPI
 - 目安として**50,000件以上**のインポート、エキスポートで使用を検討する
- **REST**に準拠しており、Salesforce内のサーバで**非同期処理**で行われる
- デフォルトでは**並列処理**だが、オプションで**逐次処理**に変更可能
 - 並列処理は処理時間の短縮が出来るが、親レコードをロックする関係上、**レコードロック**が派生する可能性がある。その場合の対処方法は２つ。
  - **逐次処理**に変更して実行する。並列ではないないので完了までは時間がかかる。
  - **親レコードを同じバッチにまとめる。**複数のバッチ処理で跨がないようにする。<br/>
 [参考情報](https://developer.salesforce.com/docs/atlas.ja-jp.api_asynch.meta/api_asynch/asynch_api_planning_guidelines.htm)
- 送信するデータは**CSV**または**XML**が可能
- BULK API 1.0またはBULK API 2.0が提供されている
 - BULK API 1.0はJob内のBatchの作成制御をクライアント側で制御する
 - BULK API 2.0はBatchの作成制御はサーバ側で制御してくれる
- BULK APIには、10分以内に完了できない場合、**10回までの再実行処理**が備わっている
- **dataloader**は設定次第でBULK APIで実行可能（dataloaderのoption赤枠の部分）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577032/4c0f1947-4181-aebf-e4d9-9f43e4302b2d.png)

- ジョブの実行状況及び実行結果はUIまたはBULK API経由でチェック可能
 - UIの場合は、**設定|環境|ジョブ|一括データ読み込みジョブ**　で確認可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577032/fac1c725-a617-9dfb-ed71-525d21520811.png) 
 -  BULK API経由は[こちら](https://developer.salesforce.com/docs/atlas.ja-jp.api_asynch.meta/api_asynch/asynch_api_jobs_get_details.htm)

- 実行結果がCompletedでも一部レコードでエラーが発生している可能性がある。
必ずバッチ結果を取得してエラーが発生しているレコードを特定して再度実行する事。
一部レコードにエラーがあっても、正常に実行されたレコードはロールバックされない。

## セキュリティ
- REST APIに準拠する

## BULK APIを選択するシナリオ
- **大量データをエキスポート、インポート**したい場合
 - 特に初回の一括データ移行などの際に利用を検討する

## リファレンス
- [BULK API 1.0ドキュメント](https://developer.salesforce.com/docs/atlas.ja-jp.224.0.api_asynch.meta/api_asynch/asynch_api_intro.htm)
- [BULK API 2.0ドキュメント](https://developer.salesforce.com/docs/atlas.ja-jp.222.0.api_bulk_v2.meta/api_bulk_v2/introduction_bulk_api_2.htm)
- [BULK API ガバナ制限](https://developer.salesforce.com/docs/atlas.ja-jp.api_asynch.meta/api_asynch/asynch_api_concepts_limits.htm)
複数のgitリポジトリを一つのリポジトリにまとめる手順

#前提
child1, child2があるとき、parentにまとめたい場合。

# 手順
1. parentディレクトリを作り、parentに移動する。mkdir parent; cd parent
2. child1ディレクトリをparentの中に作る。mkdir child1
3. git管理したいので.gitkeepを作成する。touch child1/.gitkeep
4. git add -A child1で、バージョン管理されていないファイルも含めて変更があったchild1以下を管理対象に追加。
5. リポジトリを追加した旨をコミットする。git commit -m "add: child1"
6. child1をparentのリモートリポジトリに追加し、fetchする。git remote add child1 ~/child1; git fetch child1
7. マージする。git merge --allow-unrelated-histories -X subtree=child1 child1/master
8. 不要な.gitkeepを削除する。 rm ~/parent/child1/.gitkeep
9. child2について、2以下を同様に行う。

#参考url
https://qiita.com/nozomi-kawai/items/5efe8e47e54ebccd0bf8
S3を操作するLambda関数をローカルで開発するための環境構築

Serverless Frameworkを使って構築したLambda関数のローカル開発環境で、LambdaからS3を操作する関数を開発したい。AWS上のS3を直接操作してもいいが、せっかくなのでローカルで完結する環境を構築する。

#ローカルでS3をエミュレートするためのツール 
ローカルでS3をエミュレートするためのツールとしては、
- [LocalStack](https://github.com/localstack/localstack)
- [MinIO](https://min.io/)
- [S3rver](https://www.npmjs.com/package/s3rver)
あたりがあるようだが、今回はLocalStackを使用する。

# 事前準備
Dockerが必要なので事前に使えるようにしておく。
自宅で使っているPCはWindows 10 Homeのため、Docker Desktop for Windowsが使えない。調べてみたらDocker Tookboxというツールを使えばいいようなので、インストールする。(参考：@idani氏の[windows 10 home で docker を導入するメモ](https://qiita.com/idani/items/fb7681d79eeb48c05144)）

# LocalStackを使用するための設定
プロジェクトディレクトリの直下にdocker-compose.ymlを作成し、LocalStackのDockerイメージの定義を記述する。

```docker-compose.yml
version: '3'
services:
  localstack:
    image: localstack/localstack
    ports:
      - "4572:4572"
    environment:
      - SERVICES=s3
      - DATA_DIR=/var/localstack/data
    volumes:
      - "./.localstack/data:/var/localstack/data:rw"
```

LocalStackは様々なAWSのコンポーネントをエミュレートできるが、今回はS3だけ使うのでS3に限定した定義にする。
portsはS3の使用ポート4572のみ、SERVICESもS3のみにする。
データの永続化のためDATA_DIRを定義する。

# LocalStackの実行
Docker Toolboxの「Docker Quickstart Terminal」を起動し、そこからdocker-compose.ymlがあるディレクトリに移動し、`docker-compose up`を実行して起動する。初回はlocalstackが自動でダウンロードされる。

```
$ docker-compose up
Creating network "helloworld_default" with the default driver
Pulling localstack (localstack/localstack:)...
(略)
Status: Downloaded newer image for localstack/localstack:latest
(略)
localstack_1  | Starting mock S3 (http port 4572)...
(略)
localstack_1  | 2020-02-14T13:43:37:WARNING:infra.py: Service "s3" not yet available, retrying...
```

本当は`Ready.`と表示されて起動完了のはずだが、なぜかWARNINGが。
とりあえず、CLIでアクセスできるか試してみる。
なお、エンドポイントの「192.168.99.100」はDocker Toolboxが動いているVirtualBox仮想マシンのIPアドレス。
Docker Desktopの場合は「localhost」でアクセスできる。

```
>aws --endpoint-url=http://192.168.99.100:4572 s3 mb s3://sample-bucket
make_bucket: sample-bucket
>dir > hoge.txt
>aws --endpoint-url=http://192.168.99.100:4572 s3 cp hoge.txt s3://sample-bucket
upload: .\hoge.txt to s3://sample-bucket/hoge.txt
>aws --endpoint-url=http://192.168.99.100:4572 s3 ls s3://sample-bucket
2020-02-14 22:58:13       2641 hoge.txt
```

問題なく、バケットの作成、ファイルの保存ができた。
(ちなみに、2回目に起動したら相変わらずWARNINGは出たが、Ready.も出た。)
rails db:reset、rails db:migrate:reset、rails db:setupの違い 

rails db:reset、rails db:migrate:reset、rails db:setupの違いをたまにどれがどれだったか忘れるので、まとめておきます。

## rails db:reset

- rails db:reset の場合は、新しくテーブルを作り直して、さらにシードファイルも読み込んでダミーデータも作ってくれる。新しくテーブルを作り直すので、既存のデータは全て消えて新たにシードファイルを元に作り直す。


```
Dropped database 'hogehoge_development'
Dropped database 'hogehoge_test'
Created database 'hogehoge_development'
Created database 'hogehoge_test'
```

- rails db:reset はマイグレーションファイルを編集しても、その内容は反映されない。マイグレーションを実行しない。スキーマファイル ( db/schema.rb ) だけを利用する。

## rails db:migrate:reset

- 新たにテーブルを作り直すので、テーブルのデータはもちろん全部消える。※ここは、```$ rails db:reset```と同じ


```
Dropped database 'hogehoge_development'
Dropped database 'hogehoge_test'
Created database 'hogehoge_development'
Created database 'hogehoge_test'
```

- db/migrate/hoge.rbの、マイグレーションも実行。DB をdrop した後、通常通りのマイグレート（db:migrate）が行われる。つまり、db/migrate/hoge.rb が古い順から全て実行される。

- シードファイルは読み込まないので、新しいダミーデータは生成されない。（$ raild db:seedは自分で実行する必要がある）

## rails db:setup

- アプリケーションのDB周りの初期設定をしてくれる。以下３つのコマンドを実行してくれる

1. $ rails db:create
2. $ rails db:schema:load
3. $ rails db:seed

## 余談（現場での運用）

現場では開発者が複数人いるので、テーブルに変更を加える際は、既存のマイグレーションファイルに変更を加えないようにするのが鉄則です。

【理由】
既存のマイグレーションファイルに変更を加えると、共同開発などをしている際に、共同開発しているメンバーも```$ rails db:migrate:reset``` しないといけなくなる

【ベストプラクティス】
新しいマイグレーションファイルを作成し、テーブルに変更を加える

このような対応をすると、共同開発しているメンバーは```$ rails db:migrate``` するだけで良くなります！
ただ、開発環境なら共同開発してるメンバーに```$ rails db:migrate:reset``` してくださいと周知すれば済むので、その対応でも良いですが、本番環境で```$ rails db:migrate:reset```や```$ rails db:reset```をすると、DBの値が全部吹き飛び、大事故になるため、ご注意を。
GitHub デフォルトブランチへの誤マージを防止する

# はじめに

GitHub で運用しているときに PR のマージ先を変更し忘れてデフォルトブランチへの誤マージが発生することがあると思います。
これを防止するためにはどうするのがいいのでしょうか。

# 1. 保護ブランチにする

保護ブランチにすればレビューや CI のチェックを必須にできます。
Settings > Branches > Branch protection rules から設定できます。

レビューした人がマージ先を確認し忘れるとマージされてしまいます。

# 2. マージできる権限を絞る

そもそもよく分かっていない人がマージできてしまうのはよくないのでマージできる人を絞ります。
組織だとチームが作れると思うのでチームを分類してそれぞれに適切な権限を付けます。
Settings > Manage access から管理できます。

こちらもマージする人がマージ先を確認し忘れるとマージされてしまいます。

# 3. develop ブランチを設定する

開発用ブランチが `develop` ブランチ 1 本しかないならそちらをデフォルトブランチに設定します。

間違ってマージしてしまっても revert するチャンスは多いのでさほど問題にならない気がします。

# 4-1. ダミーブランチを設定する

ダミーブランチとして `default` ブランチ（名前は何でもいいです）をデフォルトブランチに設定します。
PR を作るときに常にマージ先を変更する手間を挟むことでそもそも `master` へ PR を送るのを防止します。

間違ってマージしてしまってもプロダクトに影響はありません。
ただし誤マージに気付かないと闇に葬られてしまうので注意が必要です。

開発用ブランチが複数あって並行で開発が進んでいる場合にどのブランチを設定するか迷うことがあります。
そうなると `master` ブランチがデフォルトブランチになりがちです。
`develop` ブランチであれば誤マージされても影響が少なくても `master` ブランチだとそうもいかないことが多いので代わりにダミーブランチを設定します。

# 4-2. `master` に追従するダミーブランチを設定する

ダミーブランチを作るだけだと段々 `master` と乖離して PR を作るときに差分が多くなり重くなってしまいます。
そこで `master` ブランチに追従させます。

## ブランチを追従させる GitHub Actions

`default` ブランチは予め作っておきます。

```yaml:.github/workflows/follow_branch.yml
name: Follow branch

on:
  push:
    branches: master

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - run: git fetch --no-tags --prune --unshallow
    - run: git checkout -B default origin/default
    - run: git merge --ff-only origin/master
    - run: git push origin default
```

マージを fast-forward only にすることで誤マージが発生したときにこのアクションがエラーになってくれるので気付けます。

# おわりに

自分が知っているのはこの 4 つ（の組み合わせ）くらいなんですがみなさんどうしてるんでしょうか。
製薬企業研究者のためのRインストール方法

# はじめに

ここでは、主に製薬企業でプログラミングを使った業務を行うために必要なR言語の環境構築について書いています。
基本的にはケモインフォマティクスやバイオインフォマティクスなどにおける機械学習に利用することを想定しています。
また、使用するパソコンは、Windows 10を想定しています。


# Rのインストール

[CRANのページ](https://cran.r-project.org/)にアクセスします。
以下の図の赤枠で囲った部分で、自分のPCのOSに該当するリンク先に進みます。
（以下、Windowsを選択したものとして説明します。）

![CRAN.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/16995487-1381-17d7-c290-c77c0c10543d.png)

次に、「base」を選択します。

![installR.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/7080303e-84a6-6879-061f-f6e7e649367f.png)

次に、以下の図の赤枠で囲んだリンクをクリックすると、インストーラーがダウンロードできます。

![installR_windows.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/0887342d-4b46-9728-a119-274ea364848d.png)

あとはインストーラーを起動し、指示通りに進めていくとインストールできます。
これで、プログラミング言語Rのインストールは完了です。


# RStudioのインストール

[RStudioのダウンロードページ](https://rstudio.com/products/rstudio/download/)にアクセスします。
ここで、「RStudio Desktop Free」を選択します。

![RStudio_download.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/0a7fb014-087e-768d-09b3-655aea8c83f8.png)

インストーラーをダウンロードします。

![RStudio_install.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517951/0de0d5e3-74d4-06a1-2bc3-14f0950838c7.png)

あとは指示通りに進めていくと、インストールできます。


# まとめ

ここでは、プログラミング言語Rと、Rを扱うためのIDEであるRStudioのインストールについて説明しました。
追加で必要なパッケージについて、次回の記事で解説する予定です。


# 参考資料・リンク

[意外と少ない！？製薬会社でのプログラミングに必要な「最低限」の知識](https://pharma-engineer.com/basic-programming/minimum-information/)
HTTP ステータスコード


##HTTPステータスコードとは
HTTPステータスコードというのは、Webサーバのレスポンスの意味を表現する３桁のコード

#### HTTPの手順
1.Webブラウザから対象のWebサーバーに対してリクエスト（要求）が送信される
2.リクエストを受け取ったサーバーからレスポンス（回答）が送信される
3.サーバーから受け取った内容をWebブラウザが表示する

<img width="745" alt="スクリーンショット 2020-02-15 22.12.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568070/ce9b7e49-7402-22ed-af08-26546ffc4b6d.png">

100番台のステータスコードは、「Webサーバがもう少し情報が欲しい」「処理に時間がかかる」というレスポンスを意味します。
また、200番台は処理が成功して正常にレスポンスができている状態を、300番台はリクエストの完了に追加処理が必要である状態をそれぞれ意味します。
400番台・500番台はリクエストの誤りやサーバーによる影響が考えられるので、表示された場合には原因を探ってみましょう。

###※注意
####ユーザーフレンドリーな404ページの作成する
Webサイトを作成する際には、そういったトラブルへの備えとして、ユーザーフレンドリーな404ページを作ることが推奨されています。
では、”ユーザーフレンドリーな”404ページとは一体どのようなものなのでしょうか？

Googleではユーザーフレンドリーな404ページとして以下のことを奨励しています。
ユーザーに対して、探しているページが見つからないことを明確に伝えます。
親しみやすく魅力的な言葉を使用します。
404 ページを、サイトのその他の部分と同じデザイン（ナビゲーションを含む）にします。
最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します。
無効なリンクを報告する方法をユーザーに提供することを検討します。
この 404 ページがどれほどきれいにデザインされ、役に立つものであっても、Google 検索結果に表示したいとは誰も思わないでしょう。404 ページが Google や他の検索エンジンのインデックスに登録されないようにするため、存在しないページがリクエストされたときにウェブサーバーが実際の 404 HTTP ステータス コードを返すことを確認します。
アドレス変更ツールを使用して、Google にサイトの移転を通知します。
Lighthouse 

##Lighthouseとは
![Lighthouse.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568070/76dafabe-14af-be22-c6fa-777d06702f77.jpeg)


Lighthouse（ライトハウス）は、Googleがもともと提供していたWebアプリやWebページの評価機能を持つChrome拡張機能です。

Lighthouseには「灯台」という意味があり、「パフォーマンス」「アクセシビリティ」などの項目で特定のWebアプリやWebページをチェックでき、結果を見ながら品質改善につなげてもらうためにGoogleが提供しているものです。
2018年、これに「SEO」の項目が追加され、SEOチェックツールとしても使えるようになりました。

##Lighthouseで何ができるのか
LighthouseのSEOチェック機能を使うことで、具体的にLighthouseで何ができるかというと、WebサイトのSEOを10個の観点で「Passed Audits（合格）」か「Faild Audits（不合格）」かを評価してくれます。

####【Lighthouseの評価観点】
- メタタグでviewport（ビューポート）の幅が適切に指定されているか？
- メタタグでtitle（タイトル）が記載されているか？
- メタタグでdescription（ディスクリプション）が記載されているか？
- 正常なHTTPステータスコードを返すか？
- リンクへの誘導文字は具体的に書かれているか？（URLがそのまま載っていたり、「詳しくはこちら」のようなあいまいなものではないか）
- ページがインデックス（クローラーがWebサイトをデータベースに登録すること）を阻害していないか？※作成中ページやテストページなどでは、インデックスされないようメタタグでnoindexを記述します。
- hreflang（言語指定）が適切に指定されているか？
- rel="canonical"（ページの内容が類似していたり重複したりしている場合に正規のURLを指定する記述）が適切に設定されているか？
- ページ閲覧のためにプラグイン（Flashなど）を必要としないか？
- フォントサイズは適切か？