OmniAICreator/Qiita-1.07M huggingface dataset:
Splunkで以前の数値と比較したい

[splunk>answers](https://answers.splunk.com/answers/795094/%E5%BD%93%E6%97%A5%E5%88%86%E5%90%84%E3%83%86%E3%83%BC%E3%82%BF%E3%81%A8%E9%81%8E%E5%8E%BB%E3%83%86%E3%83%BC%E3%82%BF%E3%81%AE%E6%AF%94%E8%BC%83.html)でいろいろやったので、まとめます。
#前提

|No|value|prev5|
|:-:|:-:|:-:|
|1|10| | 
|2|20| | 
|3|30| | 
|4|40| | 
|5|50| | 
|6|120|150|
|7|20|210|
| |~| | 
|100|20|140|
こんな感じで過去５回分を足したものを比較するための表を作成する。

#data
```java:sample.spl
| makeresults count=100
| streamstats count as No
| eval value=random() % 100
| table No value
```

#概要
```java:detail.spl
| makeresults count=100
| streamstats count as No
| eval value=random() % 100
| fieldsummary 
| search field=value
| spath input=values
| rename {}.* as v*
| eval field_vlues = mvzip(vvalue,vcount,": ")
| fields - v*
| table field *
```
`random()`で作成しているので実行するごとに数値が違う。
#streamstats
@hyugma さんのすてきな使い方をアレンジした。

```java:streamstats.spl
| makeresults count=100 
| streamstats count as No 
| eval value=random() % 100 
| table No value
| streamstats current=f window=5 list(value) as list_value 
| eval list_value5=if(mvcount(list_value)=5,list_value,0) 
| streamstats window=1 sum(list_value5) as list_value5
```

`streamstats`はいろいろ使えるけど、_window=1_でその行のフィールドを扱うのはこれで初めて知った。縦横変換しなくてもいい。

#trendline
```java:trendline.spl
| makeresults count=100 
| streamstats count as No 
| eval value=random() % 100 
| table No value 
| autoregress value as a_value 
| trendline sma5(a_value) as value_last5 
| eval value_last5=value_last5*5
```
_sma5()_がポイント、これは`streamstats current=f`と違って、自分の値も入るので、`autoregress`で直前の値を持ってきている。
単純移動平均なので今回だと、_×５_している。
これで`streamstats`と同じ値がでる。

#まとめの前の小ネタ
####前の月の最終日
```java:last_month_day.spl
| makeresults 
| eval last_month_day=strftime((strptime("2020-01-01","%F") - 1),"%F")
```
今月の１日から`-1`するだけ。
実際に使う場合は`relative_time()`を使用して`now()`から`@month`で月頭にオフセット、そのあと`-1`するだけ。

#まとめ
実際　[Splunkで先月比のグラフをつくる](https://qiita.com/toshikawa/items/f0d60a242b5b03645653)でやろうとしたけど、あちらでやるほどじゃなかったので、別立てにしました。

`streamstats`は表示されている順番が大事なので、そこに注意していけばいいと思います。
:sweat:Splunk Answerの残りのクエリーについてはノーコメントで。
Flutterのchildren君って配列だったらしい

# Flutterのchildren君について

初めての記事になります。
社会人２年目のクソザコエンジニアをやっているものです。

前職ではアセンブラとかいう化石プログラムをやっていたのですが、最近転職してFlutterを使用した開発に携わっています。

アセンブラにはなかった概念が色々ありすぎてとても四苦八苦してお仕事に励んでいます。
（アセンブラすらまともに書けないクソザコナメクジ）
。

今までは何気なく使っていたColumnとかRowとかを使った時に出てくる
###children:<Widget>[]
が配列だった。

確かによくよく考えてみれば他のContainerとかは（）使うのに、
なぜchildren:<Widget>には []を使うんだと思っていたけど、特に気にせず使ってた。

<Widget>これもよくみればJavaの研修をやっていた時に見たListの書き方だし、
children:の後にリストを宣言しているのだということを、先輩に教わって知りました。

つまり何が言いたいかというと
children:の後にWidget型？の変数を書けば繰り返し処理が１行でできるというわけである！！！
（その前に型に入れるプログラムで何行もかかるけど！！）

間違った知識だったらすません！！
Ruby on Railsとは、なんなのか簡単に説明してみる（自分なりの解釈）

#Ruby on Railsは自動調理器
自分が作りたいサービス（**料理**）を、
必要な機能（**材料**）を入力（**自動調理器にぶち込む**）するだけで、
ほぼ完成させることが出来るツールのようなもの。

見た目や味の調整の為に、整える。（**サイトの細かい構成をいじる**）



自動調理器ってなんなんだ。。。
[Ruby on Rails]データベースの作成、カラムの追加

いつも忘れるのでRubyonRailsでのデータベースの作成、カラムの追加についてメモ

#データベース作成
まずはデータベースへの変更指示を記述するマイグレーションファイルを作成する
モデル（User）も同時に作成される。カラムは`（パラメーター名）：（変数の型）`で設定
コマンドラインでカラム設定しないでファイルに直書きでもOK

```terminal:terminal
rails g model User name:text address:text age:integer
```
次にマイグレーションファイル内容を実行する

```terminal:terminal
rails db:migrate
```
上のコマンドの代わりにこっちでも実行できるけど違いは分かりません（調べます）

```terminal:terminal
bundle exec rake db:migrate
```

#カラム追加
まずマイグレーションファイルを任意の分かりやすいファイル名で作成

```terminal:terminal
rails g migration add_occupation_to_users
```
次に作成したマイグレーションファイルに変更内容を書き込む

```ruby:add_occupation_to_users.rb
class AddOccupationToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :occupation, :string
  end
end
```

そしたら再びマイグレーションファイル実行

```terminal:terminal
rails db:migrate
```
LaTeXの脚注中の行間隔（と脚注同士の間隔）を詰める

# LaTeXの脚注中の行間隔（と脚注同士の間隔）を詰める

普段はブログに書いているのでQiita初投稿です。

## やりたいこと

さて，LaTeXの脚注中の行間隔が広いと思ったことはありませんか。もっとぎゅうぎゅう詰めにしたい。あるいは，行間隔が狭すぎる。もっと広げたい。![行間広げる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566221/f566d137-c936-7926-f44c-f3a3ad2dd19c.png)

## どうやるか

**脚注同士の**間隔を狭めたり広げたりするのは`\setlength{\footnotesep}{15pt}`などとすればできます。しかし，**脚注内の**行間隔を狭めたり広げたりするのに必要な情報はなかなかありません[^1]。行間隔をいじる有名パッケージの`setstretch.sty`は，脚注中まで行間隔調整の影響が及ばないようにわざわざ回避するコードが入ってしまっており，使えません。

結論から言うと，非常にアドホックですが，次のように**プリアンブルに**書けばよろしいということになります。

```latex
\makeatletter
\let\@makefntextOrig\@makefntext
\def\@makefntext#1{\@makefntextOrig{%
\baselineskip=7.2pt%%%ここで脚注の行間隔を指定
#1}}
\makeatother
```

これは一体何をしているのかというと，`latex.ltx`の中にある`\@footnotetext`および`\@mpfootnotetext`の定義の中を書き換えています。これらの命令の中にある`\@makefntext`に対して働きかけることでギミックを実現しています。

サンプルファイルを[GithubのGist](https://gist.github.com/domperor/999cdeda3344e72cb73b13763c5fa3f7)においておきます。また，サンプルファイルでは，ついでに**脚注同士の**間隔を狭めたり広げたりするものも一緒に行っています。これについては次に説明します。

### 脚注同士の間隔を狭めたい

脚注同士の間には，空行がデフォルトで入ってしまいます。それを抜くために，適切な位置に`\let\@finalstrut\@gobble`と書いてその処理を無効化しておきます。結果として，次のようなコードをプリアンブルに書いています。

```latex
\makeatletter
\let\@makefntextOrig\@makefntext
\def\@makefntext#1{\@makefntextOrig{%
\baselineskip=7.2pt%%%ここで脚注の行間隔を指定
\let\@finalstrut\@gobble%%%ここで脚注同士の間の空行を除去
#1}}
\makeatother
\setlength{\footnotesep}{7.2pt}%%%ここで脚注同士の間隔を指定
```

## おわりに

いいパッケージないですか。あれだけTeX Liveのパッケージ数が増えているのだから，きっとこういうのがアドホックじゃなくできるパッケージあると思うんですよ。TeX Live探索能力が欲しい。みなさんTeX Liveの深奥をどのように検索されておりますか。

[^1]: これまた非常にアドホックな方法ですが，regexpatchパッケージを使った方法がかろうじて[Stack Overflowに見つかります](https://tex.stackexchange.com/questions/515202/same-footnote-spacing-than-baselineskip)。
Gatsby.jsでエラーが出た時の魔法のコマンド

こんにちは[@yukifreeworld12](https://twitter.com/yukifreeworld12)です。
Gatsby.jsで久しぶりに修正しようとGatsbyコマンドを使うと今まで何もなかったのに急にエラーが...そんな時に使えるコマンドをメモ。後世の同じエラーにハマった人の為にも...

#問題
ちなみに今回は`gatsby build`をするとこんなエラー文が...


```
 ERROR #95313 

Building static HTML failed for path "/news/outing"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  19 |     renderNode: {
  20 |       "embedded-asset-block": (node) => {
> 21 |         const alt = node.data.target.fields.title['en-US']
     |                                             ^
  22 |         const url = node.data.target.fields.file['en-US'].url
  23 |         return <img alt={alt} src={url} />
  24 |       }


  WebpackError: TypeError: Cannot read property 'title' of undefined
  
  <略>
  
 
```
WebpackError: TypeError: Cannot read property 'title' of undefinedと
書いてありますが'title'の部分は毎回違うのでとりあえず似たようなエラーなら以下のコマンドで解決。

#魔法のコマンド

`rm -rf ./.cache && rm -rf ./.node_modules && yarn install && yarn dev`

大体このコマンドを使えば解決するはずです。

##最後に
今日も見てくれてホンマありがとな!!
記事がええなと思ったらフォローといいねホンマよろしくな!!
(ジョーブログ風に)
指定のRailsのバージョンをインストールする際のやり方

#経緯

Railsのバージョンを変更してアプリケーションを作成しようとした際に特定したバージョンをインストールできなかったことが数多くありました。特定したバージョンをインストールするための対策として今回記事を作成しました。

#インストールできるバージョン一覧の確認
下記をすることでバージョン一覧の確認ができます。

```
$ gem list rails

autoprefixer-rails (9.8.4)
chart-js-rails (0.1.7)
coffee-rails (4.2.2)
jquery-rails (4.4.0)
rails (6.0.3.2, 6.0.3.1, 6.0.2.2, 5.2.4.3, 5.2.4.2, 5.2.4)
rails-dom-testing (2.0.3)
rails-html-sanitizer (1.3.0)
rails-i18n (5.1.3)
sass-rails (6.0.0, 5.1.0)
sassc-rails (2.1.2)
sprockets-rails (3.2.1)
```
#インストールする方法

###間違ったやり方

```rails:
$ gem install rails
```
これでは最新のRailsのバージョンがインストールされてしまいます。

###正しいやり方

```rails:
$ gem install -v 数字 rails
```
とします。

例としてRailsのバージョン6.0.3.1をインストールしたい場合

```
$ gem install -v 6.0.3.1 rails
```

これでOKです。

#インストールできているかの確認
```
$ rails -v

Rails 6.0.3.1
```

これで完了です。
Express 4におけるmiddlewareの扱い

# きっかけ

Express.jsをドットインストールで勉強してたが、動画のExpressは3系だった。手元のExpressのバージョンは4なのでいくつかの相違点があり、特にmiddlewareの使い方が大きく変わっている事がわかった。

# 結論

ほとんどのmiddleware(`logger`など)は個別にインストールする必要がある。

```js

//ロガーの例
// Express 3
app.use(express.logger('dev'))

// Express 4
// まず`npm install morgan`が必要
logger = require('morgan')
app.use(logger('dev'))
```

# 参考

Express入門
https://dotinstall.com/lessons/basic_expressjs

Connect
https://github.com/senchalabs/connect#middleware
画面遷移時のNavigationBar/TabBarの表示・非表示操作

# はじめに、

NavigationController, TabBar、よく使いますね。基本的に、それなりにコンテンツがあるアプリだとこの２つは組み込まれているんじゃないでしょうか。

画面によってはナビバーを非表示にしたり、タブバーを非表示にしたり状況に応じて変えなければいけない場合もあると思います。
非表示設定といえば、いつの世も`isHidden`系ですが、なるほどぉとなった部分があるので備忘録。

# こんな場合あるよね

<img width="1024" alt="IMG_782B86A5410B-1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274090/e75b23a7-86f2-2b17-9801-1b6c2a69a497.jpeg">

複数のVCから特定のVCに遷移するケース。
２階層以降なのでタブバー が非表示になるのはわかりますが、デザインのあれこれでナビバーがない画面を実装する時、隠す実装をする。そして、元の画面に戻った時用に再表示する。

# 表示/非表示系メモ
このケースを実装する時の発想として以下のものがある。

Q : SharedVCが表示されたら隠して、閉じたら表示する
A : まとめて設定すると、いろんな画面に対応できない

Q : 遷移元のVCをクラス判定して表示の分岐をしてみては
A : かなり限定的ならいいが、所々でシェアされてるのでより抽象化共通処理を狙いたい

という部分で、以下の結論に至った。

### コード

```Swift
// 遷移元VCがナビバー・タブバーを持っているかの状態を保持するインスタンス
private var hasPreviousVCNaviBar = true
private var hasPreviousVCTabBar = true

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    // 遷移元の状態を設定
    hasPreviousVCNaviBar = navigationController?.isNavigationBarHidden == true ? false : true
    hasPreviousVCTabBar = tabBarController?.tabBar.isHidden == true ? false : true
    // SharedVC自体の表示処理をする
    navigationController?.isNavigationBarHidden == true
    tabBarController?.tabBar.isHidden = true
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    // VCが消滅するときに、保存した遷移元の状態に合わせて設定し直す
    navigationController?.isNavigationBarHidden = !hasPreviousVCNaviBar
    tabBarController?.tabBar.isHidden = !hasPreviousVCTabBar
}
```

#### 注意点
#### 遷移元VCにアクセス？
注意したいのは、　**遷移元のVCにここでアクセスしてナビタブの状態を確認しようとする**行為がよろしくないということ。
画面ごとにナビタブの非表示設定をしているわけではなく、ナビタブの配下に`viewControllers`があるので

```Swift
let prevVC = presentingViewController
prevVC.navigationController
```
としても、上で設定変えちゃってますよということ。階層をイメージしていればわかる話何ですが。

#### hidesBottomBarWhenPushedでタブバー隠し

`hidesBottomBarWhenPushed`もタブバーの非表示処理ですが、これらライフサイクルメソッドに突入してからの実装だとそのVCに反映されません。
なので、これを実装する場合は

```Swift
sharedVC.hidesBottomBarWhenPushed = true
show(sharedVC, sender: nil)
```

という風に遷移前に設定する必要があります。
これでもいいですが、遷移メソッド実装するごとに設定をするのが面倒です。
遷移メソッド自体をカスタムしたりもできると思いますが、大元で設定する方が楽です。

#### NavigationBar の hide処理多すぎ問題

```Swift
navigationController?.navigationBar.isHidden = true
navigationController?.isNavigationBarHidden == true
navigationController?.setNavigationBarHidden(true, animated: true)
```

なんか３つほどあります。
`.setNavigationBarHidden`に関してはアニメーションを付与したいかどうかの違いです。
`.navigationBar.isHidden` と `.isNavigationBarHidden`の厳密な違いはわからないのですが、`.isHidden`は上記の条件だと機能しませんでした。（エラーはなく補完もあるのに）

ナビバーを非表示処理する際は`.setNavigationBarHidden`良さそうですね。

# まとめ
該当するもの（型とか）で分岐という方法もあるが、コンテンツの肥大化等を考慮したときに、出来るだけ抽象化しておくのは大きいメリットだなと感じました。
あと`.isHidden`の違いが気になる。
深層学習 Day2後半 

#Section3) 過学習について
【正則化とは】
・ネットワークの自由度(層数、ノード数、パラメータの値etc...)を制約すること
・正則化により過学習を抑制する
##3-1 L1正則化、L2正則化
【Weight Decay (荷重減衰)】
　・過学習の原因：重みが大きいと過学習が発生する可能性がある。
　・過学習の対策：誤差(関数)に対して、正則化項を加算することで、重みを抑制する。

【L1、L2正則化】
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571506/a10b1cc6-b007-0f40-b4f8-fadefe04f286.png)：誤差関数に、pノルムを加える
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571506/59693d34-e530-81a3-562a-5f2ea3eeeb58.png)：pノルムの計算
・p = 1の場合、L1正則化と呼ぶ。
・p = 2の場合、L2正則化と呼ぶ。

##3-2 ドロップアウト
・正則化で一番代表的な手法。
・ノード数が多いと過学習が起こりやすい
・ランダムにノードを削除して学習させること。
・メリット：データ量を変化させずに、異なるモデルを学習させていると解釈できる
　
#Section4) 畳み込みニューラルネットワークの概念
全体像（CNNの構造図）　→　図例を張り付ける
【CNN】
・主に画像の分析モデルに使われるが、音声などの時系列にも使うことができる。
・畳み込み層、プーリング層、全結合層で構成される
・LeNet：CNNの大元

##4-1 畳み込み層
・畳み込み層では、画像の場合、縦、横、チャンネルの3次元のデータをそのまま学習し、次に伝えることができる。
・3次元の空間情報も学習できるような層が畳み込み層である。
###4-1-1 バイアス
・入力画像に対してフィルタと合致する箇所が計算され足しあわされた各結果に、バイアスが加算される

###4-1-2 パディング
・パディングにより出力画像の大きさを入力画像と同じあるいはそれ以上にすることができる。
・固定値は0以外も可能だが、0としたほうが学習に影響が少ない。

###4-1-3 ストライド
・入力画像に対してフィルタを動かす単位

###4-1-4 チャンネル
・入力値を分解した層数分だけチャネルがある
・チャンネル数だけフィルターが用意される

##4-2 プーリング層
・マックスプーリング
　入力画像のうちの最大値を出力する。
・アベレージプーリング
　入力画像の平均値を出力する。

#Section5) 最新のCNN
##5-1 AlexNet
・2012年の画像認識コンペティションで2位に大差をつけたモデル
・モデルの構造5層の畳み込み層およびプーリング層など、それに続く3層の全結合層から構成される。
・過学習を防ぐ施策・サイズ4096の全結合層の出力にドロップアウトを使用している

#確認テストの考察

##【P63】
機械学習で使われる線形モデル(線形回帰、主成分分析・・・etc)の正則化は、モデルの重みを制限することで可能となる。 前述の線形モデルの正則化手法の中にリッジ回帰という手法があり、その特徴として正しいものを選択しなさい。

(a) ハイパーパラメータを大きな値に設定すると、すべての重みが限りなく0に近づく
(b) パイパーパラメータを 0 に設定すると、非線形回帰となる
(c) バイアス項についても、正則化される
(d) リッジ回帰の場合、隠れ層に対して正則化項を加える

■ 考察
(a) → 正解(リッジ回帰の特徴)
(b) → 非線形回帰にならない
(c) → バイアスは正則化は行わない。
(d) → 「誤差関数」に対して正則化項を加えるもの


##【P68】
下図について、L1正則化を表しているグラフはどちらか答えよ。

■ 考察
右側：L1正則化→Lasso推定量（スパース推定）
左側：L2正則化→Ridge推定量（縮小推定）

##【P100】
サイズ6×6の入力画像を、サイズ2×2のフィルタで畳み込んだ時の出力画像のサイズを答えよ。なおストライドとパディングは1とする。

■ 考察
・x方向:(6+2*1-2)/1+1=7
・y方向:(6+2*1-2)/1+1=7
→ 出力画像サイズは  7×7

#演習結果と考察

##DN32_Jupyter演習(Dropout)
【演習実施結果】
![FireShot Capture 001 - 2_5_overfiting - .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571506/17255439-e597-f2f9-b8a4-e9db01293d1c.png)

【考察】
・WaitDekayLambdaは小さすぎると過学習になりやすく、大きすぎると学習が進まない
・「ドロップレシオ」も調整で学習の状態に大きな変化がある

##DN35_Jupyter演習(im2col)、DN37_Jupyter演習(3)
【演習実施結果】
![FireShot Capture 002 - 2_6_simple_convolution_network_after - .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571506/4bbbf55c-10c9-0ac4-57eb-174569c8558e.png)

【考察】
・多次元の配列を2次元に変換する技術をim2col (アイエムツーコル) という。
・行列計算が可能となり多くのライブラリを活用できる
・畳み込みやプーリングを使った学習では多くの計算リソースが必要になる
TypeScriptでstyled-componentsの"as" propにNextLinkコンポーネントを渡したい時

## 実装したかったこと

`<label>`要素において、リンク付きにしたい箇所とリンクなしにしたい箇所があったため、以下のように2通りのケースに対応できるようにしたい。

- `<label>`をベースにスタイルを定義する。
- `<label>`を`<a>`に置き換えて、スタイルは全く同じものを使用する。

## やったこと

`"as"` prop を使用し解決しようとしました。

```tsx
export const CategoryLink: React.FunctionComponent<LinkProps> = ({
    title = 'メンヘラ',
    href,
}) => (
    <CategoryLabel as={Link} href={href}>
        {title}
    </CategoryLabel>
);
```

これでいけると思いました。怒られました

```
Types of property 'as' are incompatible.
    Type 'typeof Link' is not assignable to type 'string | UrlObject | undefined'.
          Type 'typeof Link' has no properties in common with type 'UrlObject'.
```

これは、

- `"as"` の型が間違ってるよ。
- `Link` の型は （`"as"` で要求されている） `string | UrlObject | undefined` のどれにも該当しないよ。
- `Link` の型は （唯一オブジェクトとして検査する価値のある） `UrlObject` のプロパティと構成が全く違うよ。

と言われました。とりあえずエラーをもとに、`styled-componet ts as link`のワードでググりました。すると同じようなことで悩んでる[Zeit公式のissue](https://github.com/zeit/next.js/issues/1942)にぶつかりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384722/a62b3179-2e3d-6ef1-d011-ca44f6c95808.png)

こうしたらいけると公式が言うからいけるのでしょう！やってみます。

```tsx
export const CategoryLink: React.FunctionComponent<LinkProps> = ({
    title = 'メンヘラ',
    href,
}) => (
    <Link href={href} passHref>
        <CategoryLabel as="a">
            {title}
        </CategoryLabel>
    </Link>
);
````
できました！！！！！！！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384722/fce4310c-bad0-1d24-0dcc-0b351e0c233b.png)


(レイアウトは今作り段階なのでゴミです許してください）

## 何がダメだったのか？
こちらは[Next.jsの公式　Routing](https://nextjs-docs-ja.netlify.com/docs#with-link)のところから抜粋したものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384722/69a21e03-4a0a-2f00-6530-3881e6437aeb.png)

1. Next.jsのRoutingで設定してる`as`とstyled-componentで設定しようとした`as`が被っていた。
2. Next.jsのRoutingの`as`をTypeScript側は参照しようとしているのに、私がstyled-componentの`as`を提示した。

このため

> `Link` の型は （唯一オブジェクトとして検査する価値のある） `UrlObject` のプロパティと構成が全く違うよ。

と言うエラーになったと言うわけです。

## ちなみに
現時点でわかった`as`が受け取れるものは以下です。

* HTMLのネイティブ要素名（文字列）
* styled-componentで作ったコンポーネント（オブジェクト）

なので下のコードも通ります。

```tsx
export default CategoryLabel;
 
const Foo = styled.h1`
`;

export const CategoryLink: React.FunctionComponent<LinkProps> = ({
    title = 'メンヘラ',
    href,
}) => (
    <CategoryLabel as={Foo}>
        {title}
    </CategoryLabel>
);
```

以上です！
メンヘラなので、何か助言あれば優しい言葉でお願いします。
AWS S3のGUIツール

#はじめに
AWSのS3はよく使うサービスです。
普段のS3のファイルのアップロード、ダウンロードはどういう感じで操作しますかね。

- AWS Console
- AWS CLI
- S3 Browser
- WinSCP
- そのた

#AWSのコンソール画面から
こちらはAWSのコンソール画面にログインできるユーザーなら、ブラウザから直感的に操作できます。

#AWS CLIを使ってコマンドで操作
コマンドラインが好きな方は良いですね。
`aws s3 xxx`

使い方は`aws s3 help`で確認できます。

#S3 Browserを使ってGUI操作
S3 Browser: https://s3browser.com/download.aspx

使いやすいですね。

# WinSCP
WinSCPはよく使うツールですが、SCP、FTPは昔からの機能ですが、
S3も使えます。

WinSCP: https://winscp.net/eng/download.php

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/7c7bdff1-0474-d4ec-7477-9b3286219a3b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/54eea0ac-891f-e91e-06eb-0a6aeda1d85c.png)

アクセスキーID、シークレットキーを設定すれば、SCPと同じ感じで、Bucket一覧は表示されて、
ファイルアップロード、ダウンロードは直感的に操作できます。

#そのた
- Cyberduck: https://cyberduck.io/

Cyberduck is a libre server and cloud storage browser for Mac and Windows with support for FTP, SFTP, WebDAV, Amazon S3, OpenStack Swift, Backblaze B2, Microsoft Azure & OneDrive, Google Drive and Dropbox.

ほかもいろいろがあると思いますが、自分の好みに応じて選びましょう。

以上
HTML + JavaScript 非同期でIPアドレスを取得して表示してみた

ちょっとクライアントでIPアドレスを取得する必要があったので、
やり方を残しておきます。

今回はipinfo.ioのJSONP API使用してIPアドレスを取得しました。

ちなみに[ipinfo.io](http://ipinfo.io)は自分のIPアドレスを教えてくれるWebサービスです。

##JavaScript

```Javascript
$.ajax({
    url: "https://ipinfo.io",
    dataType: "jsonp",
    success: function(res){
         $(".ip-address").text(res.ip);
    }
});
```


##HTML

```HTML
<p>
    あなたのIPは<a class="ip-address"></a>です。
</p>
```

こちらのスクリプトを実行するとIPアドレスが表示できると思います。

##まとめ

通常、IPアドレスはサーバで取得することが多いかと思いますが、
今回のようにクライアントでもIPアドレスを取得したい時に役立ちます。
React.Componentのメンバ変数は、再レンダー時に更新されるとは限らない！

Reactで`setState()`しても値が更新されなくてハマったので、記事化します。

## 更新すべき値をメンバ変数に格納した場合

ボタンを押すと値が+1されるアプリケーションを作ります。

以下は間違ったコードです。
Appでカウンターの値を管理し、Counterはその値とカウントボタンを表示します。

```jsx:app.js
import React from 'react'
import ReactDOM from 'react-dom'
import Counter from './counter'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0}
    this.increment = this.increment.bind(this)
  }

  increment() {
    this.setState(
      (state) => {return {count: state.count + 1}}
    )
  }

  render() {
    return (
      <Counter count={this.state.count} onClick={this.increment} />
    )
  }
}

let app = document.getElementById('app')
ReactDOM.render(<App />, app)

```

```jsx:counter.js
import React from 'react'

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.count = this.props.count
  }

  render() {
    // 以下の`this.count`は、新しいpropsを反映しない！
    return (
      <div>
        <p>{this.count}</p>
        <button onClick={this.props.onClick}>カウント</button>
      </div>
    )
  }
}

export default Counter
```

このコードを実行し、ボタンをクリックしても、カウンターの値は増加しないと思います。


## レンダーごとに更新する値は、メンバ変数に保存しない

値が更新されない原因は、表示する値が`this.count`になっていることです。
counter.jsを以下のように修正すれば、ちゃんとカウント値が増加します。

```jsx:counter.js
import React from 'react'

class Counter extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <p>{this.props.count}</p>
        <button onClick={this.props.onClick}>カウント</button>
      </div>
    )
  }
}

export default Counter
```

今回は、`this.props.count`を表示するだけなので、わざわざメンバ変数に格納することはありませんが、表示させるべき値が複雑になる場合、`render`メソッドの戻り値に直接式を書かずに、結果を変数に格納したい場合があります。そういう場合は、たとえば関数にすると良いと思います。

```jsx:counter.js
class Counter extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    let count = this._getCount()
    return (
      <div>
        <p>{count}</p>
        <button onClick={this.props.onClick}>カウント</button>
      </div>
    )
  }

  _getCount() {
    let count;
    // すごく複雑な処理
    return count
  }
}
```

以上です。
Django REST framework躓きどころ

## Method Not Allowed:405
- requestsのメソッド
    - postとputを間違えていた


## 401 Unauthorized
- 権限をなくす設定
    - 'DEFAULT_PERMISSION_CLASSES': ['rest_framework.permissions.AllowAny']
       
## URLの仕組み
- GET: api/book/
- POST: api/book/
- PUT: api/book/1/

## Serializer
- `fields = '__all__'`を駆使する
- `'required': False`を駆使する

```python:serializer.py
class HistorySerializer(serializers.ModelSerializer):
    class Meta:
        model = History
        fields = '__all__'
        extra_kwargs = {
            'id': {'required': False},
            'start_at': {'required': False},
        }
```

## 403 Forbidden (JavaScriptでPOSTできない)
### js-cookie
以下ライブラリをインポートする
https://github.com/js-cookie/js-cookie/

例. 

```html:base.html
<script src="{% static 'js.cookie/js.cookie.min.js' %}"></script>
```

### JavaScript記述
ajaxのパラメータに追加


```javascript:js

params = {
    csrfmiddlewaretoken: Cookies.get('csrftoken'),
    ...
}
```

```javascript:js
$('#btn-add-confirm').click(() => {
    let post_url = "/api/configs/";
    let params = {
        csrfmiddlewaretoken: Cookies.get('csrftoken'),  // こいつが必要
        year: $("#input-year").val(),
        url: $("#input-url").val(),
        num_of_report: 1,
        is_selected: "0"
    }

    $.ajax({
        url: post_url,
        type: "POST",
        data: params,
        success: function(data, textStatus, jqXHR) {
            window.location.reload();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.warn("ポストできませんでした");
        }
    });
})
```

https://docs.djangoproject.com/en/dev/ref/csrf/#ajax


## 403 Forbidden (JavaScriptでDELETEできない)
### js-cookie
403 Forbidden (JavaScriptでPOSTできない) を参照

### JavaScript記述
ajaxに`beforeSend`を追加

```javascript:js
        beforeSend: function(xhr) {
            xhr.setRequestHeader("X-CSRFToken", Cookies.get('csrftoken'));
        },
```

```javascript:js
$('.btn-delete').click(function() {
    let post_url = "/api/configs/";

    $.ajax({
        url: post_url + $(this).val() + "/",
        type: "DELETE",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("X-CSRFToken", Cookies.get('csrftoken'));
        },
        success: function(data, textStatus, jqXHR) {
            window.location.reload();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.warn("ポストできませんでした");
        }
    });
})
```
SceneKitで環境マップ

```objc

SCNScene *scene = [SCNScene sceneNamed:@"art.scnassets/my_scene.scn"];
    
// 背景に表示用
scene.background.contents = @[@"art.scnassets/px.png", @"art.scnassets/nx.png", @"art.scnassets/py.png", @"art.scnassets/ny.png", @"art.scnassets/pz.png", @"art.scnassets/nz.png"];
    
// ライティング用
scene.lightingEnvironment.contents = @[@"art.scnassets/px.png", @"art.scnassets/nx.png", @"art.scnassets/py.png", @"art.scnassets/ny.png", @"art.scnassets/pz.png", @"art.scnassets/nz.png"];

// モデル
SCNNode *modelNode = [scene.rootNode childNodeWithName:@"MyModel" recursively:YES];
SCNMaterial *material =[[SCNMaterial alloc] init];
material.locksAmbientWithDiffuse = true;
material.diffuse.contents = [UIColor redColor];
material.roughness.contents = @0.02;
material.lightingModelName = SCNLightingModelPhysicallyBased;

modelNode.geometry.firstMaterial = material;

[scene.rootNode addChildNode:modelNode];

```

真っ先にほしい環境マップではあるのだけれど、そのままの情報がなかった。
.hdrを使えたりするのかもしれない。Swiftでも同じ。Swiftが何かは知らない。
C言語標準ライブラリ関数の使用設定

# はじめに
RX63シリーズでmath.h等のC言語標準ライブラリ関数を使う場合の設定について

# 設定方法
ファイルのプロパティー＞c/c++ビルド＞設定＞ツール設定＞Library Generator＞構成

必要なライブラリ名にチェックを入れる．
ターミナル画面の共有(スーパーエンジニア様のテクニックを盗もう！)

[前回書いた記事](https://qiita.com/summergirlna/items/4c6396fb717c84ca72fd)で@tenmyoさんより、
ターミナルの画面共有もやったほうがいいよ〜とコメントをもらったので、考えてみますた！

ワタシの目指す姿としては、

* Linux(特にRHEL/CentOS)の、`Minimal Install`で、(極力)何も入れずに動かしたい

なんですよ。なにせクローズド環境で作業することが多いんで。

で、紹介いただいた、[この記事](https://qiita.com/nashiox/items/f9b026b7433fcf984d45)にあるツールを検討してみますた！

# 考えたこと

* tmux、screenでの共有

> これMinimal Installじゃ入ってねえわ...

* ttylogで共有

> straceも入ってねえわ....

* scriptで共有

> これで妥協するか....

# 調べたこと

scriptってログ取るだけだと思ってたんですけど、めっちゃ優秀でした！ 
このサイト参考にしました！
(https://orebibou.com/2017/05/linux%E3%81%AEscript%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8F%E3%81%A8%E4%BE%BF%E5%88%A9%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B94%E5%80%8B/#2scriptreplay)

* `-f`でリアルタイム書き込みできる！
* `-t`でタイミングを記録して`scriptreplay`とかいうコマンドで復元できる！

# 感じたこと

オラ、scriptコマンドのオプションは明日には忘れてるぞ！ラッパーシェル作っとくか！
ってことでラッパーシェル作りますた
https://github.com/kuritayu/infra-tools/blob/master/scripts/tshare.bash

`tshare.bash s`でカレントディレクトリにログ取ります！これをtailすればターミナル画面共有できます
`tshare.bash p`でカレントディレクトリのログを再生します！ウニョウニョ動いておもしろいっす


# 結論
script優秀すぎ
明日からスーパーエンジニアさん達のログを記録して再生しよっと
サーバーのファイル過剰警告が起きた時使えるコマンド

#Bluehostからファイル数過剰の警告がきた！

##サーバー上のファイル数が何と６０万を超えていた、、自動スクレイピングのせいだったが、早急に削除するためにファイル数が大きいディレクトリを調べる必要があり、使ったコマンドが下記、これは使えるので展開します。



```

find . -xdev -type f | cut -d "/" -f 2 | sort | uniq -c | sort -n


8363 _3dsearch
9507 _3rpvlib
11060 wp-terrace
13207 trendwatcher
17091 wp-dog
21181 wp-ytber
26038 wp-vlogger
32360 wp-exile
43710 wp-omoshiro
50370 wp-akb48
641590 wp-channel
```
【備忘録】Bootstrap

#目的
Bootstrap で web page を作る際に調べた内容の備忘録。
作成した web page は[こちら](https://teppeimiura.github.io/MyPage/)（建設中...）。


#備忘録
## ボタンを押すとページ内の該当箇所にジャンプするアレ
Scrollspy でできる。以下の資料を参照。
https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp
houstonを使ってrailsサーバーからプッシュ通知を送る時に設定できる値のメモ、あと多言語対応

#1. 概要
 "houston"というgemを使って、ruby on railsのサーバーからiOSアプリにプッシュ通知を送るようにしました。

今回は本文・SE・バッジ数だけの一番シンプルな通知を実装しましたが、[GitHubのUsage](https://github.com/nomad/houston)を参照すると、通知データに対して他にも設定できる項目があるようです

将来細かい設定が必要になった時に忘れないように、調べたことを書いておきます。

#2. メモ

```ruby:Usage.rb

require 'houston'

# 定数の宣言はメソッド外でする
APN = Houston::Client.development
APN.certificate = File.read('/path/to/apple_push_notification.pem')

# 通知を送りたいデバイスのdevice tokenを代入
token = '<ce8be627 2e43e855 16033e24 b4c28922 0eeda487 9c477160 b2545e95 b68b5969>'

# houstonのインスタンスを生成
notification = Houston::Notification.new(device: token)
# 通知メッセージを設定
notification.alert = 'Hello, World!'

# アプリアイコンの右上に表示するバッジの数字を設定（この数字がそのまま表示されるので、加算するための計算はこの前に行っておく）
notification.badge = 57
# 通知を受信した時の音声ファイル（カスタムする場合は事前に用意）
notification.sound = 'sosumi.aiff'

# これをtrueにしないと通知を受信しない
notification.content_available = true

# リッチ通知を実装する際はtrueを設定
notification.mutable_content = true
# リッチ通知を実装する際は、XcodeのプロジェクトからUNNotificationContentExtensionのInfo.plistのcategoryを以下の値と同じにする
notification.category = 'INVITE_CATEGORY'

# 通知の設定は"AnyHashable("aps"): {...}"の値として送信されるが、それ以外にデータを付け足したい場合はここを設定する
notification.custom_data = { foo: 'bar' }

# 以下の値は"AnyHashable("aps"): {...}"の値に含むことができるが、使い道がわからない……
notification.url_args = %w[boarding A998]
notification.thread_id = 'notify-team-ios'

# 通知を送信する
APN.push(notification)

```

#3. （追記） 通知の多言語対応

プッシュ通知の多言語対応について書いた記事があまり見当たらなかったので、ついでにメモしておきます。

以下の方法を用いると、アプリ内の表示と同じように端末の言語設定に応じた通知の多言語対応をすることができます。


```swift:Localizable.strings
"GAME_PLAY_REQUEST_FORMAT" = "%@ and %@ have invited you to play Monopoly";
```


```ruby:Usage.rb
notification.alert = {
  # Localizable.stringsに記述したkeyを入れる
  "loc-key" : "GAME_PLAY_REQUEST_FORMAT",
  # 変数を設定した場合は配列で指定する
  "loc-args" : [ "Jenna", "Frank"]
}
```

引用元：[Creating the Remote Notification Payload](https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/CreatingtheNotificationPayload.html)
LINEログインを実装するまでのメモと、LINEアカウントの種類

# アカウントの種類（ややこしい）
## LINEアカウント
普段使っているような個人アカウント。

## ビジネスアカウント
> 普段ご利用のメールアドレスでログインが可能な機能です。
> お仕事で利用するメールアドレスや、LINEアカウントを利用したくない場合にご利用ください。

## LINE公式アカウント
店舗のアカウントなど。
未承認と承認済みがある。

## LINE Business ID
> LINEビジネスIDとは、LINEが提供するビジネス向け、または開発者向けの各種管理画面にログインができる共通認証システムです。
> LINEビジネスIDには、LINEアカウントでのログイン、またはメールアドレスのみで利用できるビジネスアカウントでのログインがご利用いただけます。


# LINEログインの実装手順
1. 公式アカウントを作る。
2. [LINE Developers](https://developers.line.biz/ja/)にビジネスアカウントでログインする。
3. `LINEログイン`を選択。
4. `サービスを利用するにはLINEアカウントと連携してください。`となるので、連携する。（2でLINEアカウントで始めていればでないはず）→`結局ここで個人のLINEアカウントが必要になる。`
5. プロバイダーとチャンネルを作る。

※4で使用したLINEアカウントが、ビジネスアカウントに紐づく模様。確認方法は後述。


# プロバイダーとチャンネル
* プロバイダーの中にチャンネルを作る。
    * プロバイダーはグループのようなもの？
    * チャンネルはTwitterでいうアプリにあたる？
* 案件プロバイダーを作成し、その中で開発、ステージング、本番チャンネルを作ればよさそう。


# 非公開チャンネルへのテストアカウント登録
公開前のチャンネルは非公開なので、一般LINEアカウントではログインできない。
チャンネルの権限設定から、メールで招待を投げる。
メールはLINEアカウント登録に使用しているもので登録できたけど、一覧に表示される名前が登録したアカウント名ではなく、プロバイダー名になってる？

## 追記
権限設定によるテストアカウントの登録は、チャンネルではなくプロバイダー単位でも登録できるっぽい。


# リンク
## LINE Official Account Manager
https://manager.line.biz

* アカウントリスト
    * 公式アカウントのリスト？
* ユーザプロフィール
    * Business IDの場合、その情報が確認できる。
    * LINEアカウントと紐付いていれば、その情報が確認できる。
        * 紐付け解除もできるが、紐付けが前提のLINEログインが使えなくなりそうなので未確認。

## LINE Developers
https://developers.line.biz/ja/
プロバイダーやチャンネルの管理を行う。


# 参考リンク
https://developers.line.biz/ja/docs/line-login/
https://qiita.com/itigodaifukumak/items/5fc840ea5b77cfe19af2
https://qiita.com/KEINOS/items/dfe79bc3923fa79e3d1c
Android StudioでPreviewがLoadingのまま表示されないときの対処法

# 問題
新しいプロジェクトを作成し、activity_main.xmlを開いてPreviewを表示しようとすると、「Loading」が表示されたままとなる。Android Studioのバージョンは3.5.3。

# 解決方法
APIのレベルを下げたら、Previewが表示されるようになった。
変更箇所は以下

```
File > Project Structure > Modules > Properties Compile SDK version
```
私の場合、29→21へ変更しました。
※その後、試しに21→29に戻してみたところ、正常に表示されていました。なので、この現象が発生した場合は一時的にレベルを下げてみると解決するっぽいです。

# 参考ページ
https://www.mikan-partners.com/archives/1109
https://stackoverflow.com/questions/50404548/how-to-change-my-apps-target-api-level-from-23-to-26
Nuxt.js + axiosでスネークケース・キャメルケースを相互変換する

サーバー側から返されるデータのオブジェクトプロパティはスネークケースの場合がほとんどですが、Nuxt.jsにおいてはキャメルケースで扱われることが主流となっています。
スネークケースとキャメルケースを併用して書くこともできますが、記述量が増えることでメンテナンスしづらくなる要因の一つになります。

そこで、Nuxt.js + axiosでスネークケース・キャメルケースを相互変換するプラグインを作成しました。

まず、[camelcase-keys](https://www.npmjs.com/package/camelcase-keys)と[snakecase-keys](https://www.npmjs.com/package/snakecase-keys)をインストールします。

`/plugins/axios.js`ファイルを作成します。

```axios.js
import camelcaseKeys from 'camelcase-keys'
import snakecaseKeys from 'snakecase-keys'
export default ({ $axios }) => {
  $axios.onRequest((config) => {
    if (!config.data || typeof config.data !== 'object') {
      return config
    }
    config.data = snakecaseKeys(config.data, { deep: true })
    return config
  })
  $axios.onResponse((response) => {
    if (!response.data || typeof response.data !== 'object') {
      return response
    }
    response.data = camelcaseKeys(response.data, { deep: true })
    return response
  })
}
```

nuxt.config.jsのpluginsに追記します。(axiosがmodulesに追加されているかも確認してください)

```nuxt.config.js
...
plugins: [
  {
    src: '~/plugins/axios'
  }
],
modules: [
  '@nuxtjs/axios'
],
...
```

これでリクエスト時はキャメルケースのオブジェクトプロパティがスネークケースに、外部から受け取ったデータのオブジェクトプロパティがスネークケースならキャメルケースに変換されます。
【Tips】sudo apt update で Visual Studio Code に起因する File has unexpected size に遭遇した場合

# 問題：apt update の失敗
## 入力
```sh
sudo apt update
```

## 出力
VScodeのリポジトリでエラー。

```sh
取得:11 http://packages.microsoft.com/repos/vscode stable/main amd64 Packages [156 kB]
エラー:11 http://packages.microsoft.com/repos/vscode stable/main amd64 Packages
  File has unexpected size (156056 != 156065). Mirror sync in progress? [IP: 13.75.127.55 80]
  Hashes of expected file:
   - Filesize:156065 [weak]
   - SHA512:12e6dffcd247d1ff067acfa61a3c4eb6078c326c2858feb4f6f141a1d809e22292a78282414a5c103038ea80bb63cd734c7516782c9809c341335083d4e7611b
   - SHA256:c850f35f1979831ac75641978c397e51519fa22313598ec12bde5f52277044c0
   - SHA1:1f65f4a7388c22bcf7b7f30fb7bc337c60d94b2e [weak]
   - MD5Sum:4153a12e4a5629bfb14ed98f4c8ac234 [weak]
  Release file created at: Thu, 12 Dec 2019 19:59:19 +0000
パッケージリストを読み込んでいます... 完了               
E: http://packages.microsoft.com/repos/vscode/dists/stable/main/binary-amd64/Packages.bz2 の取得に失敗しました  File has unexpected size (156056 != 156065). Mirror sync in progress? [IP: 13.75.127.55 80]
   Hashes of expected file:
    - Filesize:156065 [weak]
    - SHA512:12e6dffcd247d1ff067acfa61a3c4eb6078c326c2858feb4f6f141a1d809e22292a78282414a5c103038ea80bb63cd734c7516782c9809c341335083d4e7611b
    - SHA256:c850f35f1979831ac75641978c397e51519fa22313598ec12bde5f52277044c0
    - SHA1:1f65f4a7388c22bcf7b7f30fb7bc337c60d94b2e [weak]
    - MD5Sum:4153a12e4a5629bfb14ed98f4c8ac234 [weak]
   Release file created at: Thu, 12 Dec 2019 19:59:19 +0000
E: いくつかのインデックスファイルのダウンロードに失敗しました。これらは無視されるか、古いものが代わりに使われます。
```

# 環境
- Lubuntu 18.04 LTS
    * apt 1.6.12 (amd64)
    * Visual Studio Code 1.40.2
        + f359dd69833dd8800b54d458f6d37ab7c78df520
        + x64
- 発生日時：2019/12/13  10:45

# 解決方法
時間を置いてから再度チャレンジすれば直ってるとのこと。

# 参考文献
- [Apt update fails at chrome stable main: “File has unexpected size (1103 != 1104). Mirror sync in progress?”](https://askubuntu.com/questions/1147254/apt-update-fails-at-chrome-stable-main-file-has-unexpected-size-1103-1104)
Unityエディタ上で表示される自動実装プロパティの名前がいい感じに

# Unityエディタ上の自動実装プロパティが変な名前になっていた(今まで)
自動実装プロパティを使いたい、そしてシリアライズしてUnityエディタ上で値を編集したい。
そんなとき、以下のように書くことで一応実現できました。

```csharp
	[field: SerializeField]
	public int Hogehoge { get; set; }
```

ですが、インスペクター上の表示はこんな感じでイケてない。
![property000.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571427/28f82130-2ea4-5677-40bb-8fd4630f59cb.png)


# プロパティ名が正しく表示されるように
まだα版ではありますが、ふと思い立ってUnity2020.1.19aで確認してみたらいい感じの表示になっていました。
![property001.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571427/1b5f57b9-552d-7c59-739d-792a6aa253bb.png)
KotlinのgroupByを複数keyでやる

KotlinのCollectionにある、`groupBy`関数は、コレクションをMapにまとめることができますが、複数keyがあるときにやり方に迷ったので、メモしておきます。

と言ってもkeyは比較されるオブジェクトを指定できるので、equalsとかが適切に実装されていれば何でも良いです。
（パフォーマンスはわからないです）

## 準備

```kotlin
enum class Sex {Male, Female}
enum class Job {Engineer, Sales, Marketer}
data class Person(val name: String, val sex: Sex, val job : Job)

val persons = listOf(
    Person("mike", Sex.Male, Job.Engineer),
    Person("bob", Sex.Male, Job.Sales),
    Person("sam", Sex.Male, Job.Marketer),
    Person("lisa", Sex.Female, Job.Sales),
    Person("alice", Sex.Female, Job.Engineer),
    Person("may", Sex.Female, Job.Engineer)
)
```

## String format

toStringが値等に応じて実装されていればこの方法が楽そうです。

```kotlin
persons.groupBy { "${it.sex}-${it.job}" }

> {
   Male-Engineer=[Person(name=mike, sex=Male, job=Engineer)],
   Male-Sales=[Person(name=bob, sex=Male, job=Sales)],
   Male-Marketer=[Person(name=sam, sex=Male, job=Marketer)],
   Female-Sales=[Person(name=lisa, sex=Female, job=Sales)],
   Female-Engineer=[Person(name=alice, sex=Female, job=Engineer), Person(name=may, sex=Female, job=Engineer)]
  }
```


## Pair等のObjectに入れる

enumのようにオブジェクトが一意であれば、equalsが実装されたコンテナオブジェクトにいれてもいいと思います。

```kotlin
persons.groupBy { Pair(it.sex, it.job) })

> {
   (Male, Engineer)=[Person(name=mike, sex=Male, job=Engineer)],
   (Male, Sales)=[Person(name=bob, sex=Male, job=Sales)],
   (Male, Marketer)=[Person(name=sam, sex=Male, job=Marketer)],
   (Female, Sales)=[Person(name=lisa, sex=Female, job=Sales)],
   (Female, Engineer)=[Person(name=alice, sex=Female, job=Engineer), Person(name=may, sex=Female, job=Engineer)]
  }
```

## まとめ

まあ、特に特別なことはなかったですね。
個人的にはオブジェクトに入れるほうがmapのkeyを参照し直すときに便利そうなので、好きでした。

ちょっと迷ったのでメモしておきました。
他にもいい方法があったら教えてください。
jiraのapi

# jiraのapi

basic認証とoauth認証があるみたいだが、oauth認証はaccess tokenを取得して、再取得するのが面倒そうなので、basic認証を使うことに。

が、Deprecatedになったみたい？
https://community.atlassian.com/t5/Confluence-questions/Trying-to-access-Confluence-using-Basic-Authentication/qaq-p/1268998

# api_tokenを使ってapi呼び出し

こっち見るとapi_tokenというのを使えばいいみたい
https://community.atlassian.com/t5/Confluence-questions/Trying-to-access-Confluence-using-Basic-Authentication/qaq-p/1268998

ということでrubyだと以下で取れる。
jira-rubyというgemがあるが今の所対応してないので、自分で取るしかないみたい

```ruby

user_name = "hogehoge@hoge.com"
api_token = 'mogemogemoge'
jira_api_endpoint = "https://hogemogehoge.atlassian.net"

result_json = JSON.parse(`curl -u #{user_name}:#{api_token} #{jira_api_endpoint}`)
```
【Swift】[weak self]付のクロージャに親スコープの変数を渡したい！！！

小ネタです。

UI更新処理ってメインスレッドでやらないといけないので、
DispatchQueue.main.async {[weak self] in …… }の中に書くじゃないですか？
このときに、関数内のスコープを持った変数をクロージャに渡したい、ということがありました。

```swift
class ViewController {
    func hoge() {
        var word = "これを渡したい"
        DispatchQueue.main.async {[weak self] in
            //どうしたらいい？
        }
    }
}
```

# 正解
先に正解を書くと、

```swift
class ViewController {
    func hoge() {
        var word = "これを渡したい"
        DispatchQueue.main.async {[weak self, word] in
            print(word) //->これを渡したい
        }
    }
}
```
で渡せました。
（この例だとself使ってませんが、実際のコードではselfにもアクセスする必要がありました）

というかそもそも、**クロージャ内からwordにアクセス可能だった**ので、これでもいけます。

```swift
class ViewController {
    func hoge() {
        var word = "これを渡したい"
        DispatchQueue.main.async {[weak self] in
            print(word) //->これを渡したい
        }
    }
}
```

下の書き方がいいと思います。

# ダメな例
以下、NG集。

```swift
DispatchQueue.main.async {[weak self] word in
```

```swift
DispatchQueue.main.async {[weak self], word in
```

```swift
DispatchQueue.main.async {[weak self](word) in
```

```swift
DispatchQueue.main.async {[weak self](w: String = word) in
```

```swift
DispatchQueue.main.async {[weak self](word = self.word) in
```

# よくわかる解説
とりあえず動けばいいだけなら、ここまで読んでいただければOK。
ちょっとモヤった（循環参照的なやつ大丈夫なのか？とか）ので、NGな例がなぜNGなのか調べました。
DispatchQueueクラスのasyncメソッドの仕様と、Swiftのキャプチャリスト（Capture List）の知識が必要です。

## asyncメソッドの仕様
```swift
DispatchQueue.main.async {[weak self](word) in
```

これを書くと、

```
Contextual closure type '@convention(block) () -> Void' expects 0 arguments, but 1 was used in closure body
```
こんな感じで怒られると思います。
エラ〜メッセージがちょっと難しくて、最初わかんなかったんですが、考えてみたら当然で、
async()の引数として要求しているクロージャは() -> Void型のクロージャで、**引数はありません。**

```swift:async()の定義
public func async(group: DispatchGroup? = nil, qos: DispatchQoS = .unspecified, flags: DispatchWorkItemFlags = [], execute work: @escaping @convention(block) () -> Void)
```

定義見ると引数ずらずらありますが、group/qos/flagsはデフォルト引数がそれぞれ指定されているので、
メインスレッド呼びたいだけの時は省略することが多いです。
最後のクロージャもトレイリングクロージャで引数名書かないので、普段使ってる書き方と定義が直感的に紐づかないですね。

# キャプチャリストとは
クロージャは安易に使うと安易に循環参照を生みます。
それで[weak self]とかつけてるわけなんですが、実はこの[]がキャプチャリストです。
（僕はさっきはじめて知りました）

[Resolving Strong Reference Cycles for Closures
](https://docs.swift.org/swift-book/LanguageGuide/AutomaticReferenceCounting.html#ID57)[(日本語版)2.16.5. クロージャによる強い参照の循環 | 自動参照カウント | Swift](http://www.studiogalago.com/the-swift-programming-language/language-guide/automatic-reference-counting/strong-reference-cycles-for-closures/)

クロージャの実行スコープは、親クラスとは別になるので、クロージャ内部で使う定数やら変数やらをキャプチャしてやる必要があります。

# というかそもそもクロージャは呼び出されたスコープ内はキャプチャしてる
「クロージャに親スコープの変数渡したい時は、キャプチャリスト内に書いてね！」という結論にしようと思って記事を書いていたんですが、
調べてみたら、**そもそもクロージャは呼び出されたスコープ内はキャプチャしてる**ことが判明しました。

[Capturing Values](https://docs.swift.org/swift-book/LanguageGuide/Closures.html#ID103)
[2.7.3. 値のキャプチャ | クロージャ | Swift](https://www.studiogalago.com/the-swift-programming-language/language-guide/closures/capturing-values/)

まさかそのまま書けば使えるなんて思わず、色々な書き方を試してしまいました。。。😫
ほんとうに使える A successful Git branching model としての hgflow 

# はじめに
[A successful Git branching model](https://nvie.com/posts/a-successful-git-branching-model/)で紹介されているブランチ運用のモデルを簡単に行えるようにするツールとして [gitflow](https://github.com/nvie/gitflow) や [gitflow-avh](https://github.com/petervanderdoes/gitflow-avh) がありますが、実際に試してみると面倒な割には融通が効かず実戦投入を諦めた方が多いのではないかと思います。
A successful Git branching model を簡単に使いたいと考えている方におすすめしたいツールが[hgflow](https://bitbucket.org/yujiewu/hgflow/wiki/Home)です。
hgflowもgitflowなどと同様のツールなのですが、十分な拡張が行われていてツールとしての完成度も高く、個人での簡単な利用から複数グループでの並行した大規模利用まで幅広く実用的に利用可能なものとなっています。
この記事では、最も単純な運用パターンに絞って紹介いたします。

# インストール
下のリンク先を参考にインストールしました
- https://hg.sr.ht/~wu/hgflow
- https://tortoisehg.bitbucket.io/ja/ (windows)
- https://www.mercurial-scm.org/ (unix)

# リポジトリの準備
リポジトリを作成して、そのリポジトリで hgflow が使える状態にする

```
# リポジトリを作成
hg init (project-directory)

# リポジトリに移動
cd (project-directory)

# hgflow が使えるように初期化
hg flow init --default
```

# 一番シンプルな利用パターン
ブランチを切って案件を作成。フィニッシュされた案件はdevelopに溜まりますので
適当なタイミングでdevelopに溜まった案件群をdefaultにリリース。

### 案件の操作
```
# developから分岐して案件ブランチを作成
hg flow feature start [案件名]
 
# 案件ブランチでソース修正
...
 
# 案件ブランチでコミット
hg commit --message 'コミットメッセージ'
 
# 案件ブランチをdevelopへの取り込み、案件ブランチのクローズ
hg flow feature finish
```

### リリースの操作
```
# developからリリースブランチを作成して、defalut に取り込む
hg flow develop start [リリース名]
hg flow develop finish
hg flow release finish
```

# 参考
- https://nvie.com/posts/a-successful-git-branching-model/
- https://github.com/nvie/gitflow
- https://www.mercurial-scm.org/wiki/JapaneseMercurial
- https://tortoisehg.bitbucket.io/ja/
- https://winmergejp.bitbucket.io/
SharePointOnline内のExcelには、ファイルオープン時の自動リンクが機能せず

どうも、EXCELにある外部参照のリンクですが、SharePointOnline(SharePoint)では自動更新ができないと発覚。
MSも認めた。

ところがPowerShellから起動すると更新される➜MSにフィードバックしたがいつ対応するか…

```:PowerShell
$excel = New-Object -ComObject Excel.Application
$excel.Visible = $false      # 画面上に表示させない
$excel.DisplayAlerts = $true # 警告メッセージは表示する

# 現在のディレクトリの絶対パスを取得
$currentPath = (Convert-Path .)

# 対象の Excel ファイル名
$filename = "sample.xlsx"
$book = $excel.Workbooks.Open($currentPath +"/"+ $filename)

# 上書き保存
$book.Save()
# ブックを閉じる
$excel.Workbooks.Close()
$excel.Quit()

[System.Runtime.Interopservices.Marshal]::ReleaseComObject($book)
[System.Runtime.Interopservices.Marshal]::ReleaseComObject($excel)

```
結合テスト

##結合テストとは
単体テストで合格したモジュールを合体させて、ちゃんと動くか確かめるテスト。
Intengration Testを略してIT、Joint Testを略してJTと呼ばれることがある。
ウォータフォール開発V字モデルで基本設計と対になっている。

##項目
以下が主な項目である。
・テスト項目
・操作
・期待結果
・確認結果
・第3者の確認

##ポイント
結合テストのテストケースを作る際、**ユーザ視点**で作ることが重要となる。
私は現在Androidアプリの開発を行っているが、例えばタイトルやボタンのテキストが正しく表示されているか、画面遷移がしっかり行われるか等をテストする。入力欄がある場合は、必要に応じて限界値分析も使う。

またうっかりミスを防ぐため、テスト実施者は第三者から確認してもらうことも重要である。

##時間
単体テストと比べると比較的時間がかからない。

##困ったところ
エミュレータでなく実機が使えないことがあったので、テスト前に確認しておいたほうが良い…

##感想
初めて仕様書を作ると、単体テストのテストケースと混同しがちである。あくまで**ユーザから見た動作をテストする**ということを思えておきたい。
[JavaScript][Node.js]メモ：アロー関数の即時関数（関数を定義してその場で実行する）

アロー関数と即時関数を組み合わせる書き方。

```javascript
const a = (() => {
    // 何らかの処理
    return 'Hello!'
})()
```

余談だが、即時関数の正式名は、「IIFE (即時実行関数式)」っぽい。
「即時関数」でググっても公式のドキュメントにはなかなかたどり着けない。


## 参考リンク
* [IIFE (即時実行関数式)](https://developer.mozilla.org/ja/docs/Glossary/IIFE)
* [アロー関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
[BigQuery]6ヶ月以内の過去のクエリをAPIを使って発掘する

## 履歴はWebでも見れるが・・・
BigQueryのjobの実行履歴は普通にWebからも見れます。
<img width="287" alt="スクリーンショット 2020-01-22 16.26.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/9ad0f6c8-2707-3451-5492-3536179f9b9e.png">
ここ押してから
<img width="759" alt="スクリーンショット 2020-01-22 16.26.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/3b2edcca-fc5e-7ada-2d5e-e0c1acba1b9e.png">
ここに表示されます。が、ここは `1000件` しか表示されません。
select文だけでなく、exportや毎日のバッチ処理でのテーブルでも1件なので思ったよりも表示されなかったりします。

## もっと昔の履歴が見たい！
Web上にはないので消えているかと思いきや、APIやCLIだと過去6ヶ月間のものは取得可能なようです。 ~~なんでWebで見れるようにしてくれないんだ~~

> https://cloud.google.com/bigquery/docs/bigquery-web-ui#viewing_job_and_query_history
> 履歴内にあるすべての該当ジョブを一覧表示するには、jobs.list API メソッドか bq ls CLI コマンドを使用します。

ちゃんと書いてありますね。

自分はCLI入れていないので、サクッと使えるAPIで試してみます。
今回の対象は `jobs.list API` です

> https://cloud.google.com/bigquery/docs/reference/rest/v2/jobs/list
> 指定したプロジェクトで開始したすべてのジョブをリストします。ジョブ情報は、作成後6か月間利用可能です。

## APIを動かす
基本的に公式に書いてある手順を踏むだけです。 

* https://cloud.google.com/bigquery/docs/reference/rest/v2/jobs/list

まずはコンソールからAPIが使えるように、認証トークンを貰いましょう。
こちらを参考にすれば、クレデンシャルファイルをダウンロードできるはずです。

* https://www.magellanic-clouds.com/blocks/guide/create-gcp-service-account-key/

次にパスを通してあげます

```perl
$ export GOOGLE_APPLICATION_CREDENTIALS="DLしてきたクレデンシャルファイルのパス"
例）
$ export GOOGLE_APPLICATION_CREDENTIALS="/home/user/Downloads/[クレデンシャルファイル名].json"
```

次に、一時的なアクセストークンを取得します。GoogleCloudSDKを使います。

* https://cloud.google.com/sdk/?hl=ja

```perl
$ ACCESS_TOKEN="$(gcloud auth application-default print-access-token)"
```

一時的なものなのでexportしてないんですかね。一応外しておきます。

次にアクセストークンを使ってAPIにリクエストを送信します。
クエリパラメータの以下を設定します。

*  `projection=FULL` 実行クエリの内容も全て表示
*  `maxResults=10000` 表示件数とりあえず1万。デフォルトだと50件しか返ってこない。少ない。

```shell
$ curl -H "Authorization: Bearer $ACCESS_TOKEN" "https://www.googleapis.com/bigquery/v2/projects/[自分のプロジェクト名]/jobs?projection=FULL&maxResults=10000"

{
  "etag": string,
  "kind": string,
  "nextPageToken": string,
  "jobs": [
    {
      "id": string,
      "kind": string,
      "jobReference": {
        object (JobReference)
      },
      "state": string,
      "errorResult": {
        object (ErrorProto)
      },
      "statistics": {
        object (JobStatistics)
      },
      "configuration": {
        object (JobConfiguration) // ここにクエリ内容が表示される
      },
      "status": {
        object (JobStatus) // 成功可否
      },
      "user_email": string
    }
  ]
}
```

履歴がバーっと表示されたらOKです！

かなりの量が返ってくると思うので、絞り込みしたい場合はクエリパラメーターで絞り込みができます。適宜設定してください。

* https://cloud.google.com/bigquery/docs/reference/rest/v2/jobs/list#query-parameters

jqコマンドにパイプするのもオススメです。自分はクエリの内容を見たかったので以下のようにしました。

```perl

$ curl -H "Authorization: Bearer $ACCESS_TOKEN" "https://www.googleapis.com/bigquery/v2/projects/[自分のプロジェクト名]/jobs?projection=FULL&maxResults=10000" | jq '.jobs[].configuration.query.query' >> ~/query.txt
```

さぁ、高額クエリを叩いた犯人を探しましょう！！
NetCommons3/app/Plugin下の各リポジトリでgit config core.filemode falseする

NetCommons3はPluginが全部別々のGitリポジトリになってます。
開発環境でその各プラグイン全部が core.filemode trueになってたので、まとめて ```git config core.filemode false``` にしたくてシェルスクリプトでゴニョゴニョ

下記で無事目的をはたせました。

```
#!/bin/sh
# cd NetCommons3/app/
# bash gitCoreFileModeFalse.sh で実行
# 
dir_path="Plugin/*"
dirs=`find $dir_path -type d -maxdepth 0`

for dir in $dirs;
do
    echo $dir
    cd $dir
    git config core.filemode false
    cd ../../
done
```

Gist: https://gist.github.com/RyujiAMANO/48b0d6d2ea074463b17f676a6e6cea3e

# 参考
- [シェルスクリプトのforループでフォルダやファイルを一括処理](https://dot-blog.jp/news/shellscript-mac-terminal-for-roop-command/)
MDN ja の間違い探し

# 概要
メモです。
適宜追記する予定。

コメント欄に記載頂くと記事に反映します。

# 内容

## String.prototype.includes

2020/01/22(Wed)

日本語版
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/includes

```js
  if (!String.prototype.includes) {
    String.prototype.includes = function(search, start) {
      'use strict';
      if (typeof start !== 'number') {
        start = 0;
      }

      if (start + search.length > this.length) {
        return false;
      } else {
        return this.indexOf(search, start) !== -1;
      }
    };
  }
```

英語版
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes

```js
  if (!String.prototype.includes) {
    String.prototype.includes = function(search, start) {
      'use strict';

      if (search instanceof RegExp) {
        throw TypeError('first argument must not be a RegExp');
      }
      if (start === undefined) { start = 0; }
      return this.indexOf(search, start) !== -1;
    };
  }
```

Polyfill のコードが違っていて、WSH環境で実行すると、日本語版だと`文字列.includes(null)`や`文字列.includes(undefined)`で、エラーになる。英語版のPolyfillだと、戻り値falseになって正常に動作する。

追記：2020/01/23(Thu) 00:33：すでに修正されていました。

## Object.defineProperty()

2020/01/23(Thu) 00:43

日本語版
Object.defineProperty() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96423/a81d4e72-fb7b-96b8-fb72-95ed058893d3.png)



英語版
Object.defineProperty() - JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96423/5db295ef-04b4-7cab-3b83-0846ec4bb9ba.png)


英語版には「Compatibility notes」に「Chrome 37」の項目があるが
日本語版の「互換性のメモ」欄にはない。

## Array.prototype.indexOf()
2020/01/23(Thu) 00:53

日本語版
Array.prototype.indexOf() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

英語版
Array.prototype.indexOf() - JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96423/05a02eb1-b6f4-f0f0-ca99-b209ca9732a7.png)


英語版には「Specifications」が1つしかない(2つ削除されている)、日本語版には3つある。

Object.defineProperty()でも、「Specifications」欄が同じようになっている。

全体の方針なのだろうか。

## getUTCDate() の内容が getUTCDay() の本文

まさかのズレ。

日本語版
Date.prototype.getUTCDate() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDate

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96423/db7d6ff4-cc74-1eb3-1f24-31cb3939e29d.png)


# 終わりに

探せばいろいろみつかる気がします。
ログインしたら自分で更新もできるみたいなので、ご自身で更新して内容提案してみてはいかがでしょうか。

スクリーンショット撮るのはめんどいね。
→ スクリーンショット、Windows なら、Win + Shift + S で任意位置選択コピーで、Qiita記事上でペーストができてめちゃくちゃ便利でした。
AWS中国コンソールとグローバルの違うところ


本日AWS中国のアカウントを入手したので、AWS中国コンソールとグローバルAWSの違うところを説明します。
---
![AWS-BeiJing.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525965/06ad981c-fde5-940d-5eda-15dd42a87446.jpeg)
#１．右上のリージョンのListViewには、中国の二つリージョンしかいない。 

北京リージョン　運用会社およびプロバイダーは、Beijing Sinnet Technology Co., Ltd. です(Sinnet)。 
寧夏リージョン　運用会社およびプロバイダーは、Ningxia Western Cloud Data Technology Co., Ltd. です。(NWCD)。

![AWS-BeiJing2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525965/feb741a1-7806-f724-2655-37f64029d575.jpeg)
#２．右下の言語選択で中国語と英語しかない、日本語の選択肢がないです。


![AWS-BeiJing3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525965/8ce4ab9a-142b-2dcf-755a-fa4ff2a63899.jpeg)
#３．利用できるサービスは少ない、EFSやRoute53等はないです。

#４．URLが違うです。
グローバルAWS　https://console.aws.amazon.com/
中国AWS　　https://console.amazonaws.cn/