OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.js　トランジション

#Vue.js　トランジション

前回の記事はこちら
[Vue.js　コンポーネント](https://qiita.com/fumiya0414/items/84c677f256276aa99bf5)

##トランジションの基礎
トランジションを使ってp要素をクリックすると
フェードイン/アウトしながら表示/非表示を切り替えてみましょう。
[jsfiddle](https://jsfiddle.net/)で実際に記述しながら読むことをおすすめします。

```html:index/html
<div id="app">

<button v-on:click="show=!show">change</button>
<p v-show="show">Hello Transition</p>

 
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```

```javascript:index.js
var app = new Vue({
  el:'#app',
  data:{
    show:""
  }
})
```

実行結果
[![Image from Gyazo](https://i.gyazo.com/bf0010c28b00dafffc2ffb03d69f5279.gif)](https://gyazo.com/bf0010c28b00dafffc2ffb03d69f5279)

トランジション効果なしで表示/非表示を切り替えることができています。

まずトランジション効果を設定したい要素（今回はPタグ）をtransitionタグで囲みます。

```html:index/html
<div id="app">

<button v-on:click="show=!show">change</button>

<transition>
<p v-show="show">Hello Transition</p>
</transition>
 
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```
v-ifでDOM要素を追加もしくはv-showで表示した場合
enterという文字列を含んだクラスがトランジションクラスとして要素に追加されます。
下記がイメージです

```html
<p class= "v-enter-active v-enter-to">
  Hello Transition
</p>
```
このクラス名にCSSを設定します。
５秒かけて表示するにはCSSに以下を記述します。

```css:index.css
/* ５秒かけて表示される　display-noneが外れた時の処理*/
.v-enter-active{
  transition: opacity 5s;
} 

.v-enter{
  opacity: 0;
}
```

実行結果
[![Image from Gyazo](https://i.gyazo.com/d3a168212dfe7b8002762cb13f4ce2bd.gif)](https://gyazo.com/d3a168212dfe7b8002762cb13f4ce2bd)
DOMの動き
[![Image from Gyazo](https://i.gyazo.com/67994199ffe20fa7eb4aea4bcb1d13c1.gif)](https://gyazo.com/67994199ffe20fa7eb4aea4bcb1d13c1)

このときDOMでは５秒かけてv-enter-active v-enter-toが設定され
５秒後にはどちらも消えます。

v-ifでDOM要素を削除もしくはv-showで非表示にした場合
leaveという文字列を含んだクラスがトランジションクラスとして要素に追加されます。
下記がイメージです

```html
<p class= "v-leave-active v-leave-to">
  Hello Transition
</p>
```

非表示の際のCSSを追記します。以下が完成形です。

```html:index/html
<div id="app">

<button v-on:click="show=!show">change</button>

<transition>
  <p v-show="show">Hello Transition</p>
</transition>
 
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```

```javascript:index.js
var app = new Vue({
  el:'#app',
  data:{
    show:""
  }
})
```

```css:index.css

.v-enter-active, .v-leave-active{
  transition: opacity 5s;
} 

.v-enter , .v-leave-to{
  opacity: 0;
}
```

実行結果
[![Image from Gyazo](https://i.gyazo.com/3d35653fe25931d5297b7676c5bbba18.gif)](https://gyazo.com/3d35653fe25931d5297b7676c5bbba18)

DOMの動き
[![Image from Gyazo](https://i.gyazo.com/916a02e7ea39247a66bae63d8e6956c8.gif)](https://gyazo.com/916a02e7ea39247a66bae63d8e6956c8)

次回はVue.Routerについてです。
RuntimeError: AssertionError [while running 'Map(_add_f0_estimate)'] ...

#こちらのコードを動かしました。
https://github.com/magenta/ddsp/blob/master/ddsp/colab/demos/train_autoencoder.ipynb

#エラー内容

```
RuntimeError: AssertionError [while running 'Map(_add_f0_estimate)']
```
#理由
GPUのメモリが足りなかったときのエラー

#参考
https://github.com/magenta/ddsp/issues/29
https://www.tensorflow.org/guide/gpu#limiting_gpu_memory_growth
初心者によるプログラミング学習ログ 310日目

#100日チャレンジの310日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
310日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>310日目 2.5h<br>・自作ポートフォリオ書き直し　1ｈ<br>・架空LP模写 4日目1.5h（<a href="https://twitter.com/ririru_123?ref_src=twsrc%5Etfw">@ririru_123</a>）<br>・架空LP模写：プロフィール作成<br><br>ポートフォリオはエラーと格闘してたら終わった・・・<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1258849915687432194?ref_src=twsrc%5Etfw">May 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Tencent CloudのIMサービスを使ってコミュニケーションアプリを作ってみました。

## Tencent CloudのIMサービスとは
Tencentは2019年7月、日本でクラウドサービスを展開しました。
[Tencent IM（Instant Messaging）](https://intl.cloud.tencent.com/jp/product/im)は億級のQQユーザーのリアルタイム通信テクノロジーを搭載しています。
大きな特徴としてはAndroid、iOS、Web、ミニプログラム(Wechatでインストール不要の軽量アプリ)、PC、Macなどマルチ端末のSDKを提供しています。簡単に各プラットフォームのアプリを開発できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/938a3ba9-920f-f195-5cc6-37f8e345a59e.png)
この記事ではTencent Cloud IMサービスを試しました。


## 前提条件
- Tencent Cloudアカウントを持っていること

## Quick Start
### [IMコンソール](https://console.cloud.tencent.com/im)でIMアプリを作成
IMアプリを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/8716b8f8-5e8a-6e6f-6d6c-6f489081d943.png)
任意の名称を入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/a0ed8845-0e8a-a562-3e6a-205817df31e6.png)
しばらくすると、IMアプリを作成できました。

### SDKAppIDとプライベートキー（第三者に漏洩しないように！！！）を確認する
コンソールで作成したIMアプリをクリックすると、SDKAppIDと秘密鍵を確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/96ac579e-d282-989f-35ad-17381f3380ad.png)


### iOSアプリを試します。
#### SDKをダウンロード
GithubでSDKをダウンロードします。[SDK](https://github.com/tencentyun/TIMSDK/)
####  SDKAppIDとプライベートキーを設定
ダウンロードしたフォルダの```iOS/TUIKitDemo/TUIKitDemo/Debug/GenerateTestUserSig.h```のファイルを先に確認したSDKAppIDとプライベートキーを書き替えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/3efea236-95a0-6b6b-5389-540659bc82f3.png)

**ちょっと注意してもらいたい**：今回のdemoがSDKAppIDとプライベートキーをアプリに設定しましたが、実際の運用の時にサーバに設定します。なぜかと言うと、アプリをデコンパイルしてしまうと、第三者にプライベートキーが漏れてしまいます。


#### iOSアプリをコンパイル
1.ターミナルでpodバージョンを確認
```pod --version```
バージョンが1.7.5より古い、またはpodがインストールしていない場合は下記のコマンドで更新またインストールします。

```
gem sources --remove https://rubygems.org/
gem sources --add https://gems.ruby-china.com/
//pod install
sudo gem install cocoapods -n /usr/local/bin
sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer
//update pod local library
pod setup
```
2.ImSDKライブラリを追加します。

```
cd iOS/TUIKitDemo
pod install
```
3.手順2が失敗した場合,ローカルのCocoaPodsを更新します。

```
pod repo update
```
4.```iOS/TUIKitDemo```のフォルダにある```TUIKitDemo.xcworkspace```` を開いて、アプリをビルドします。




### Androidアプリを試します。
#### SDKをダウンロード
GithubでSDKをダウンロードします。[SDK](https://github.com/tencentyun/TIMSDK/)

#### SDKAppIDとプライベートキーを設定します
```Android/app/src/main/java/com/tencent/qcloud/tim/demo/signature/GenerateTestUserSig.java``` のファイルにSDKAppIDとプライベートキーを書き換えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/70a09c5e-b82d-aa8b-e344-747d21410292.png)

#### Android Studioでアプリをビルドします。 

### いよいよできました。作成したiOSとAndroidアプリでチャットしてみます
ご覧ください。
Android
![android](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/af3f3bec-3f2c-034b-d44b-590041e7f961.png)
iOS
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/e665b255-1464-7e68-7e45-16eefa5ee892.png)

文字、音声、動画も対応していますね！！！

### 終わりに
**感想：**SDKが多く機能を搭載して、コミュニケーションアプリを簡単に作れます。
ENOENT: no such file or directory... のエラーが出てcloud9でブラウザを開けない問題

cloud9でRails環境を使っていたのですがrails serverを起動した後にWebページをcloud9のブラウザで参照できなくなってしまいました。
こういうエラーが出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609861/be9b5cd6-6918-35ec-85a7-a4d7b5f9f791.png)

cloud9からブラウザを起動するには、まずは`Preview`から`Preview Running Application`を開いて、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609861/b1fb2b25-74de-744e-7bff-659b9fe4ac93.png)

`Pop Into New Window`のアイコンをクリックすると新しいWindowにページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609861/c858974a-e535-3a9a-f750-7f30a3c78038.png)

実は、ここの`Browser`と書いてあるところのプルダウンメニューですが、いったん他の項目を選んでしまうと`Browser`に再選択することができないようなのです。
選択が`Browser`になっていないと`Pop Into New Window`のアイコンをクリックしてもRailsの画面は表示されません。

これの解決策ですが、`Preview Running Application`で開いたWindowをすべて閉じてもう一回立ち上げればデフォルトのBrowserが選択された状態で立ち上がってきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609861/852c7f67-88d0-38dc-cf2f-d5bfd0838117.png)
すでに`Preview Running Application`のWindowが立ち上がっている場合は何も起きません。
無事に`Browser`が復活しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609861/337da5cc-bace-e1e8-36aa-9c791c39955f.png)

正直、これだけの話なのですが、ここを一度Markdownなどを選択してしまったあとだと、デフォルトがBrowserだということやBrowserにしないと動かないということに気づかないですよね。自分はWindowを再度立ち上げるところに考えが至らなかったため、環境を再構築することになりました。
同じような問題にハマった方がいらっしゃれば、お役に立てれば幸いです。

どうして選べなくなるのかは不明ですが、もし不具合なら直してほしいです。
もしかしたら、環境依存かもしれません。
【初心者向け】10行以内のスクリプト(8.foliumで地図のプロット【2】

### 【初心者向け】10行以内のスクリプト(8.foliumで地図のプロット【2】)
pythonで色々なライブラリを使えば、「少ないコードでもちょっとした事が出来て、少なければ5行程でもちょっとしたスクリプトが作れ、便利だな。」と思ったので、pythonやその他、コマンドを羅列しただけのものも出てくるかも知れませんが、10行程のスクリプトを不定期で投稿してみようと思います。

**第8回**として、以前、「foliumで銀座周辺の地図をマーカー付きで3ヶ所プロットするスクリプトを投稿したのですが、事前に場所と緯度・経度を<font color=blue>csvで用意してプロット</font>する様にしてみました。

拠点が多い場合は、この方法が可読性・メンテナンス性が良さそうです。
 
このスクリプトでは、以下3ヶ所をプロットしました。
- 有楽町駅: 位置情報【35.6749187,139.7606366】
- 銀座コリドー街: 位置情報【35.6703699,139.7573871】
- Ginza-SIX: 位置情報【35.6695908,139.7618857】

【環境】
linux: MXLinux19.1
python: 3.7.3
pip3: 20.0.2
pandas: 1.0.3
jupyter-lab: 2.1.1
folium: 0.10.1
***
**1.位置情報を以下の様な構成で、csvファイルを作成**
地名,緯度・経度

ginza,latitude,longtude
Yurakucho_station,35.6749187,139.7606366
GinzaCorridorSteet,35.6703699,139.7573871
GinzaSix,35.66695908,139.7618857


**・因みに緯度は、「latitude」、経度は「longtude」**で、検索するとこの順番で表示されると思います。
例として、コリドー街の場合「緯度: 35.6749187・経度: 139.7573871」となっていました。
このcsvを、pandasで読み込みました。

**foliumの最低限の構文は、以下の様なものです。**
<font color=blue>map = folium.Map(location=[基準地点の緯度,経度], zoom_start = 初期の倍率)
map</font>

コードはjupyterで実行、地図はjupyterにプロットされます。

**csvから地図をプロットするコードの例**

```python:jupyter

#!/usr/bin/env python
# coding: utf-8
# 銀座周辺をプロットするコードの例
# infile = './map_location'
# 
#1.ライブラリのインポート
import folium
import pandas as pd

#csvファイル読み込み
df = pd.read_csv('./map_location.csv')

#df
plot_location=df
plot_location

# ファイルから読んだ複数地点のプロットとマーカーの処理
map = folium.Map(location=[35.6749187,139.7606366], zoom_start = 14)
for i, r in plot_location.iterrows():
    folium.Marker(location=[r['latitude'], r['longtude']], popup=r["ginza"]).add_to(map)

# 3.地図のプロット
map

#df.to_csv('./map_location.csv')

```

![ginza_map.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624077/f353e332-8f7d-c4da-c82a-34decf573e3d.png)


現状、一番シンプルなマーカーマーカーですが、もう少し研究すると様々な情報も発信が出来る可能性がありそうです。
因みにこの画像は、画面キャプチャーですが、実際はプロットされた場所から移動したり拡大する事も可能です。

**以上、8.foliumで地図のプロット【2】でした。**
フリーランスエンジニアが独学で論文を読み解いていく方法（1/n）

　社会人になってから必要に駆られて論文を読むようになりましたが、まだまだ戸惑う事も多々あります。
近年、DeepLearningや機械学習といった分野が実用化されて来る中、
最新情報にアクセスしようとするとどうしても論文を紐解いていかなければならない事が多々出てくると思います。

そんな中、自分が調べたい分野があった時にどんな風にして調べていったら良いのか、
分野全体の流れはどうなっているのかをどうやって把握していったら良いか等、

あくまでも独学で自分なりにということなのですが、少しずつ紹介していけたらと思います。

#1.論文著者から流れを観る


まずは自分が気になる論文を観つけた際に最も上に書いてあるのはタイトルにつづいて著者です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631693/9614888e-04cf-fe3f-026d-a9e9eecfc33b.png)

著者名からどんなことが解るかを考えていきたいと思います。

参考になるページがありましたのでURLを紹介しておきます。
[参考ページ](https://ultrabem-branch3.com/english/paper/authorship> )


論文の著者について、通常は、5 - 10 人程度が 1 報の論文の著者になります。
とくに重要なのは first author, corresponding author, last author です。

| 第一著者<br>First author | 著者リストの最初に名前が来る人。その論文の研究をメインで行い、論文を書いた人がなるのが普通である。最近では equally contributed と言って複数の人が第一著者になる例も増えてきている。 |
|---|---|
| 第二著者<br>Second author | 2 番目に名前が来る人。第一著者の次に貢献度が高いとみなされる。実験を教えた先輩、指導にあたった若手教員などがなることが多い。 |
| 連絡著者<br>Corresponding author | その研究に対して、責任者として連絡を受ける立場の人。責任著者とも。投稿に関する一連の手続き、共著者への連絡なども corresponding author の仕事である。 |
| ラストオーサー<br>Last author | シニアオーサーとも呼ばれる。著者リストの最後に名前が乗る人。普通は研究室のボスがなる。Corresponding author と重複する場合も多いが、講座内で若手の研究者が主体的に研究を行った場合などには、そちらが corresponding author になる場合もある。 |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631693/48c11e86-ec07-6406-5161-045d8aa53775.png)

これはCharles R. Qi, Hao Su がFirst Authorということのようです。

そこで本論文のFirst Author とLast Authorについて調べてみます。

2020年5月現在
Charles Ruizhongtai Qi : Facebookにいるようです。
Hao Su : UC San Diego で助教授をされているようです。
Leonidas Guibas : 
スタンフォード大学のポール・ピゴット・コンピューター・サイエンスおよび電気工学の教授であり、幾何学計算グループの責任者であり、コンピューター・グラフィックスおよび人工知能研究所のメンバーです。

それぞれ以下のようなプロフィールページが見つかりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631693/2b768596-5506-8485-3575-63eacfefbdbd.png)

この３名を基準に論文を探してみると以下のように3Dデータを用いたセグメンテーションの流れが観えてきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631693/2e8a2226-f99a-feed-447e-0f0480406d7b.png)

もちろん論文のAbstract, Introduction, Related Work, Referenceからも他の研究をしっかりと読み解いていく必要はありますが、著者名だけからでも大雑把なあたりが付けられます。

最新論文がどんどん更新される中、情報整理をしていきながら流れを観ていくことは本当に重要で、
日々是精進していかないといけないと思っています。
シスコスイッチの初期設定

# はじめに
シスコスイッチの初期設定についてのメモ

# 別ネットワークのスイッチにpingを通すために
別ネットワークにあるスイッチの場合は、デフォルトゲートウェイも設定しないといけない。


# 初期設定まとめ
https://beginners-network.com/catalyst_config_first.html
https://xtech.nikkei.com/it/article/COLUMN/20051107/224075/


no service password-encryption

# enable パスワード設定
(config)# enable password [パスワード] … 設定ファイルにパスワードが平文のまま保存される
(config)# enable secret [パスワード] … 設定ファイルにパスワードが暗号化されて保存される

# ラインコンフィギュレーションモード
https://beginners-network.com/cisco-catalyst-command/line.html

ラインコンフィギュレーションモードではコンソールやtelnet、ssh等でCiscoルータやCatalystに接続する時のパスワードの認証、接続元の制限等が出来ます。

パスワード設定
https://www.infraexpert.com/study/ciscorouter6.html


# snmpで管理したい場合
# 管理インターフェースの設定
まずは、IPを設定する。
telnetするときや、snmpで管理するときに必要

interface vlan 管理VLANID
ip address ip-address netmask
no shutdown

## デフォルトゲートウェイ
* 異なるNWのスイッチへの監視はGWがないと疎通できないので設定する
* FWでtelnetを許可することも忘れない

# IP設定後のコンソール接続とtelnet接続
## コンソール接続
https://beginners-network.com/cisco-catalyst-command/line.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273424/43575bd2-82a2-44ba-5279-4305b2336cd3.png)

https://beginners-network.com/cisco-catalyst-command/login.html

loginコマンドでパスワードを使うようにする。login localとすると、usernameコマンドで設定したユーザー名とパスワードによる認証が行われます。

## telnet接続
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273424/9a8ff459-62dc-6407-1422-7c92dfeadfc6.png)


一般的にはline vty 0 15と定義して仮想ポートを 16 ポート用意する設定するケースが多いです。VTYのポート数はルータの機種によって設定できる数が異なります。コンソールポートやAUXポートとは異なりVTYポートの場合はデフォルトでこのpasswordとloginコマンドの設定がされていないとセキュリティ上の理由からVTYポート経由でアクセスできないようになっています。※AAAの設定をしている場合は例外となります。

# snmp設定
## エージェントとしての設定
https://beginners-network.com/cisco-catalyst-command/snmp-server-community.html

snmp-server communityコマンドを使うとSNMPサーバーがMIBを参照、又はMIBへの書き込みを行う際のコミュニティ名を設定出来ます。

wは書き込みしないので、roになりそう

```
Switch(config)#snmp-server community public ro
```

## SNMPマネージャーサーバー設定

```
Switch(config)#snmp-server host 192.168.10.24 public
```

## SNMP trap
https://beginners-network.com/cisco-catalyst-command/snmp-server-enable-traps.html

SNMPサーバーに送信するTRAPを有効に出来ます。

```
Switch(config)#snmp-server enable traps
```
BPMが行動ペースに与える効果まとめ

下記の資料が面白かったので自分用に内容をまとめてみた

#### [背景音のテンポが行動に与える効果](https://ir.lib.hiroshima-u.ac.jp/files/public/3/36975/20150417144406329537/StudiesInHumanSciences_9_17.pdf)

# 以下、まとめ

#### BPM 効果

* 知覚しやすいテンポ 67~200bpm

* 知覚や運動において快適なテンポ およそ100~120bpm

* 単語の提示されるタイミングが効果音のリズムと同期していると弁別反応時間が短縮される

* 身体運動を行う時に聞く背景音は身体的疲労感から気を反らせる

* テンポの速い音楽を聴きながら読書した時の方が読書ペースが早く、読書効率が高かった。反対にテンポの遅い音楽下で最も読書ペースが遅く、読書効率が低かった。

## ・ 表現との結びつき

* 速いテンポ
  
```
「活動性、興奮」「嬉しさ、喜び、楽しさ」「力」「驚き」「怒り」
```

* 遅いテンポ

```
「平穏、落ち着き」「威厳、荘厳」「悲しみ」「優しさ」「退屈」「嫌悪」
```

## ・ 時間感覚との結びつき

* テンポの遅い音楽と比べて、テンポの速い音楽を聴いた時の方が、待ち時間を長く感じる

* テンポの速いストレスフルなノイズを聴くと、無音の時と比べて時間再生が短くなり、特定のコースを歩いた時の時間感覚が短くなる

## ・ 背景音のテンポの変化が行動に与える効果

  * 徐々に速くなる
     覚醒する、行動が速くなる
     
  * 徐々に遅くなる
     変化なし
     
```
遅いテンポ、速いテンポ、速いテンポから遅いテンポに変わった時より、

「遅いテンポから速いテンポに変わる時がより長く運動負荷に耐えられる」
```

# 資料を読むに至った背景

会社でYoutube動画を作成、投稿することになった
筆者は動画制作の経験があったのでOP,EDの制作を担当することに

BGMはどうしようかと調べていたら[背景音のテンポが行動に与える効果](https://ir.lib.hiroshima-u.ac.jp/files/public/3/36975/20150417144406329537/StudiesInHumanSciences_9_17.pdf)を見つけたので読んでみた

以下に見返しやすい様にメモを取ったのでQiitaの投稿にメモしておこうと思った次第です
Promiseについて【Javascript】【備忘録】

# 概要

今まで逃げてたけど、Promiseについて備忘録。


# 基本形

```javascript
function test(){
  return new Promise((resolve, reject)=>{
   // 正常処理時には
   // resolve(hoge)
   // のように記述すると、hogeの内容が関数の呼び出し元に返却される。
   // rejectも同様。こちらは異常処理時。
  })
}
```
pythonによるGCSへのバケット・ファイルの操作（転送・取得・削除・読み込み等）まとめ

※以下のコードはJupyter Notebookで書いて使用するものとなります。

※GCP、GCSに対する環境構築や設定が行われていることを前提とします。



```最初に実行している.py
import os
import pandas as pd
from io import BytesIO
from google.cloud import storage

# ↓my_gcp_credentials.jsonはサービスアカウントから発行している
storage_client  = storage.Client.from_service_account_json('my_gcp_credentials.json')

```

※上記コードをJupyterで実行した後で以下の操作・コードを実行します。

#バケットを作成する

```created_bucket.py
created_bucket_name = 'tmp_bucket_qitaqita'

bucket = storage_client.create_bucket(created_bucket_name)
```

バケット名は世界中で重複のないものとしなければならないので注意。
（当初"tmp_bucket"という名前で作成しようとしましたが、すでに存在しているとのことでエラーとなりました。）

#ローカルファイルをバケットへ転送する

```trans_to_bucket.py
bucket_name = 'tmp_bucket_qitaqita'
file_name = 'send_txt.txt' #送るものの名前
destination_blob_name = 'sended_txt.txt' #送り先での名前

bucket = storage_client.get_bucket(bucket_name)
blob = bucket.blob(destination_blob_name)
blob.upload_from_filename(file_name)
```

送り先での名前を以下のようにすると、make_dirというディレクトリが作成されその中にファイルが転送されます。
`destination_blob_name = 'make_dir/sended_txt_2.txt'`



#バケット内のファイルを削除する

```del_bucket_file.py
bucket_name = 'tmp_bucket_qitaqita'
file_name = 'sended_txt.txt'#バケット内の削除したいファイル名

bucket = storage_client.get_bucket(bucket_name)
blob = bucket.blob(file_name)
blob.delete()
```

#バケット名一覧を表示する

```bucket_name.py
blobs = storage_client.list_buckets()
for blob in blobs:
    print(blob.name)
```

#バケット内のファイル名一覧を表示する
```filename_in_bucket.py
bucket_name = 'tmp_bucket_qitaqita'

bucket = storage_client.get_bucket(bucket_name)
blobs = bucket.list_blobs()
for blob in blobs:
    print(blob.name)
```

#バケットを削除する

```del_bucket.py
bucket_name = 'tmp_bucket_qitaqita'#削除したいバケット名

bucket = storage_client.get_bucket(bucket_name)
bucket.delete()
```
※バケット内にファイルが何もない場合に実行できます

#バケット内にあるtxtファイルを読み込む & ローカルに保存する

```読み込み＆保存.py
bucket_name = 'tmp_bucket_qitaqita'
file_name = 'sended_txt.txt'#読み込みたいバケット内のファイル名

bucket = storage_client.get_bucket(bucket_name)
blob = storage.Blob(file_name, bucket)

content = blob.download_as_string()
with open('sended_txt.txt', mode='wb') as f:
    f.write(content)
```

#バケット上のcsvファイルをpandasで読み込む

```csvファイル読み込む.py
bucket_name = 'tmp_bucket_qitaqita'
file_name = 'dataset_data.csv'

bucket = storage_client.get_bucket(bucket_name)
blob = storage.Blob(file_name, bucket)
content = blob.download_as_string()
df_csv = pd.read_csv(BytesIO(content))
```

#他にも需要がありそうな操作があれば適宜追加します
余談：今回、qiitaへの初投稿となりました。参考になれば嬉しい。
Microsoftアカウントのサインインで無限ループに陥った

Microsoft LearnでC#の学習中に若干詰んだので書き留めておく。

# 問題
Microsoftアカウントのサインインを完了してもサインイン画面に遷移する。

## 発生環境
Mac 10.15.4
Google Chrome 81.0.4044.129

## 発生状況
1. [Microsoft Learn](https://docs.microsoft.com/ja-jp/learn/)で、Microsoftアカウントのサインイン画面に遷移する
1. サインインする
1. 元の画面に遷移する
1. 少しするとサインイン画面（下図参照）に遷移する
1. アカウント名入力 or サインイン済みアカウント選択
1. 3に戻る（以後、ループ）

なお、アカウントのアクティビティを確認すると、サインインは成功していた。
<img width="1440" alt="スクリーンショット 2020-05-07 17.40.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571483/463781b3-85a7-5808-a1c9-6477a13dbb9e.png">

# 試したこと
- Googleで似た問題がないか検索
- Chromeのキャッシュを削除して再サインイン
- スマホ（Android、FireFox）でサインイン
- 弱弱エンジニア会、Twitterで質問

いろんな方にお力添えを頂いたが解決せず。
ここでWindowsからのサインインは試していないことに気付く。

- Windows10、FireFoxの環境でMicrosoftアカウントにサインイン

すると、アカウントのプロフィール設定を促す画面に遷移した。
もしやと思い、プロフィール設定後に問題の発生環境でサインインを試す。

サインイン完了後もサインイン画面に遷移しなくなった……解　決　し　た　！

# 原因
Microsoftアカウントのプロフィールが未設定だったため、（何故かWindows以外では）サインイン完了後もサインイン画面に遷移していた。

# 所感
解ってみれば大した事ではなかったが、合計6時間くらいはハマっていたように思う。
OSに依ってWebページの動きが変わるとは思いもしなかったので、経験の浅さもハマった要因の一つか。

Mac（とAndroid）でサインイン完了後にサインイン画面に遷移するのはWebページの不具合かな？
良い機会なので、Qiitaへの初投稿ネタとした。
AutoScalingのスケールイン対象をコントロールする場合に注意すべきRebalancing

# 背景

何かしらの解析サーバとしてEC2を利用しAutoScaling構成をとる場合、解析が終了したものから順次スケールインさせたい時がある。そのままだと一番古いものなどの条件でしか対応できない。解決策の一つとしてterminateを各EC2自身に行わせる場合にはAZの再分散に注意する必要がある。

# わかったこと

Auto ScalingはRebalancing(再分散)といってAZの偏りを修正するための機能がある。
https://docs.aws.amazon.com/autoscaling/ec2/userguide/auto-scaling-benefits.html

`suspend-processes`コマンドを打ってやるとRebalancingを停止することができる。
（その他、オプション指定により種々の機能を選択することが可）
https://docs.aws.amazon.com/cli/latest/reference/autoscaling/suspend-processes.html

# やってみた

9個のインスタンスを持つAuto Scaling Groupを用意し、3つのAZに3インスタンスずつ用意。
まずは何もしない状態で、AZがアンバランスになるように3つのインスタンスを以下のコマンドでterminate。
このコマンドは、インスタンスをterminateすると同時にdesired capacityをデクリメントしてくれる。

```sh
$ aws autoscaling terminate-instance-in-auto-scaling-group --instance-id INSTANCE_ID --should-decrement-desired-capacity
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406130/a57b219c-183b-3313-5989-a0f66287a9c8.png)

数秒のうちに新規のインスタンスが立ち上がり、その後1つのインスタンスがterminateされることでアンバランスなAZが修正された。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406130/c2037050-e2f8-ee3e-4f03-0ed2def5cbd1.png)

ここで、再度9台に戻してから今回知ったコマンドを打ってから同じことをリトライ。
確かにAZの偏りは維持された。

```sh
$ aws autoscaling suspend-processes --auto-scaling-group-name ASG_NAME --scaling-processes AZRebalance
```

この設定状態はAuto Scalingの詳細の欄の`停止したプロセス`から見ることができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406130/516843d8-8da1-a197-3adc-0bbb4aeebfee.png)
java(配列)

#配列作業手順
```java
int[] scores;           //①
scores = new int[5];    //②
```
[5] ＝　0,1,2,3,4　中身ゼロから数えて[5]

####①と②同時に行う

```java
int[] scores = new int[5];    //①②
```

####配列作成省略記法

```java
int[] scores1 = new int[] {10, 20, 30, 40, 50};   
```
```java
int[] scores2 = {10, 20, 30, 40, 50};   
```
上下同じ意味

###forループで配列を回す
```java
int[] scores = {10, 20, 30, 40, 50}; 
for (int i = 0; i < scores.length; i++) {
  System.out.println(scores[i]);
```
ループ変数名は任意で指定可能

###拡張 for 文で配列を回す
```java
int[] scores = {10, 20, 30, 40, 50}; 
for (int value : scores) {
  System.out.println(value);
```

上のfor文であった`ループ変数や配列の添字を記述する必要がなくなる`


###length使用方法
**配列のlength**
**文字列のlength()**
pvcreateするとWARNINGがたくさん出て作成できない場合の対処

事象としては色々あるかもしれないが、自分の場合

```shell-session
# lsblk
NAME            MAJ:MIN RM   SIZE RO TYPE MOUNTPOINT
nvme0n1         259:0    0 238.5G  0 disk
├─nvme0n1p1     259:1    0   499M  0 part
├─nvme0n1p2     259:2    0   100M  0 part /boot/efi
├─nvme0n1p3     259:3    0    16M  0 part
├─nvme0n1p4     259:4    0 124.4G  0 part
├─nvme0n1p5     259:5    0     1G  0 part /boot
└─nvme0n1p6     259:6    0 112.5G  0 part
  └─fedora-root 253:0    0 112.5G  0 lvm  /
nvme2n1         259:7    0 465.8G  0 disk
nvme1n1         259:8    0 465.8G  0 disk
├─nvme1n1p1     259:9    0   200G  0 part
└─nvme1n1p2     259:10   0 265.8G  0 part
# pvcreate /dev/nvme1n1p1
  WARNING: wrong checksum 0 in mda header on /dev/nvme1n1p1 at 4096
  WARNING: wrong magic number in mda header on /dev/nvme1n1p1 at 4096
  WARNING: wrong version 0 in mda header on /dev/nvme1n1p1 at 4096
  WARNING: wrong start sector 0 in mda header on /dev/nvme1n1p1 at 4096
  WARNING: bad metadata header on /dev/nvme1n1p1 at 4096.
  WARNING: scanning /dev/nvme1n1p1 mda1 failed to read metadata summary.
  WARNING: repair VG metadata on /dev/nvme1n1p1 with vgck --updatemetadata.
  WARNING: scan failed to get metadata summary from /dev/nvme1n1p1 PVID daz9jwK4OFToj1nBaNX5eiSwm6uf5W3X
  WARNING: wrong checksum 0 in mda header on /dev/nvme1n1p1 at 4096
  WARNING: wrong magic number in mda header on /dev/nvme1n1p1 at 4096
  WARNING: wrong version 0 in mda header on /dev/nvme1n1p1 at 4096
  WARNING: wrong start sector 0 in mda header on /dev/nvme1n1p1 at 4096
  WARNING: bad metadata header on /dev/nvme1n1p1 at 4096.
  WARNING: scanning /dev/nvme1n1p1 mda1 failed to read metadata summary.
  WARNING: repair VG metadata on /dev/nvme1n1p1 with vgck --updatemetadata.
  WARNING: scan failed to get metadata summary from /dev/nvme1n1p1 PVID daz9jwK4OFToj1nBaNX5eiSwm6uf5W3X
  Command failed with status code 5.
```

のようなエラーが出て正常に作成できなかった(その後 `pvs` 等、別のlvm系のコマンドを叩いても同様のエラーが出る)

直前にmdadmやstratisで遊んでいたため`mdadm --zero-superblock`したりgdiskでzapしてpartitionヘッダを削除してもダメだったので色々調べたところ、余計なpartitionヘッダとは別のヘッダが残ってしまいそれを読み取ってしまっているようだった(多分)

https://stackoverflow.com/questions/28421676/unable-to-remove-volume-group-due-to-incorrect-metadata-area-header-checksum

を参考に以下のように実施したところ解決した。

```shell-session
# gdisk /dev/nvme1n1
... 省略するがx -> zでzapする
# dd if=/dev/zero of=/dev/nvme1n1 bs=1024k count=10
10+0 records in
10+0 records out
10485760 bytes (10 MB, 10 MiB) copied, 0.0238877 s, 439 MB/s
# gdisk /dev/nvme1n1
... 省略するがGUIDに8e00を指定する以外は普通
# pvcreate /dev/nvme1n1p1
  Physical volume "/dev/nvme1n1p1" successfully created.
# pvs
  PV             VG     Fmt  Attr PSize   PFree
  /dev/nvme0n1p6 fedora lvm2 a--  112.47g      0
  /dev/nvme1n1p1        lvm2 ---  200.00g 200.00g
```
めでたしめでたし
Railsチュートリアル　RDB,RDBMSについて調べる

##はじめに
Railsチューリアルを進めている中で、リレーショナルデータベースとかSQLiteとかPostgreSQLとか全然分からなかったので調べてみました。データベースって一個じゃないんかい！自分のメモ用に記事を書いてみました。


##リレーショナルデータベース

リレーショナルデータベースとはデータを表形式（エクセルを想像してもらえるとわかりやすい）として管理するデータベース管理方式のこと。

| TH  | TH  | TH  |
| :--- | :---: | ---: |
| TD | TD | TD |
| TD | TD | TD |


RDBと略されることが多いです(Relational DataBase)。

表の行（横）を「レコード」、表の列（縦）を「フィールド」と言います。表そのもののことを「テーブル」と呼びます。

複数のテーブルを関連付ける（くっつける）こともできます。

##RDBMS
RDBMSとは【Relational DataBase Management System】の略で、先述したリレーショナルデータベースを管理するための専用のソフトウェアのことを指します。

Railsで利用できるRDBMSは「MySQL」「PostgreSQL」「SQLite」。３つともオープンソースで誰でも無料で利用できます。

Railsをインストールしてデフォルトで使用されるRDBMSは「SQLite」のようです。


##PostgreSQLとSQLiteの違い

色々調べてみたがたくさん違いがあるようです。

全て列挙しても大変ですし、私のような初学者には何を言っているのかさっぱり分からないと検索して出てきたサイトの内容を見ながら思ったので、今回はRailsチュートリアルにおいて

「なぜdevelopment環境ではSQLite,production環境(本番環境)ではPostgreSQLを使用しているのか」について考えてみます（正しいかは定かではない笑）。


・**SQLite**
名前の「ライト」から想像できる方もいらっしゃるかと思いますが、SQLiteは軽量なデータベース（個人利用レベル）を扱うことを想定しているようです。導入するハードルが低い（ライブラリとして利用できる）ことも特徴として挙げられます。

・**PostgreSQL**
SQLiteに対して、比較的大きなデータを扱うのに長けています。実際にPostgreSQLを使用したことがないので自分では今のところこれぐらいしか分からない…。

一応調べたところ以下の特徴があるようです。
・SQLの標準規格に対する準拠度が高い
・マルチバイト対応（日本語コンテンツを処理しやすい）
・マルチCPUに対するスケーラビリティが高い（接続数が増加してもパフォーマンスが維持される）

##まとめ

「実際の本番環境では多数のユーザーのデータを扱うことを想定しているためRDBMSにPostgreSQLを使用している」のかな？

「RDBMSなんて一緒にした方がややこしくなくていいじゃん！」って僕みたいなど素人は思っちゃうんですけど、どうやら環境によって使い分けるのはよくある話のようです。

##最後に
Railsチュートリアルはデータベース関係の用語についてそんなに詳しく書かれていないので、僕みたいに分からなくて困っている方に少しでもお役に立てたら幸いです！かえってモヤモヤを増やしてしまったら申し訳ないです…。

こんな感じでRailsチュートリアルでわかりづらいなと個人的に思ったところを調べて記事にしているので、他の記事も機会があれば見て頂けると嬉しいです。
今のプロジェクトで使っているライブラリを簡単にLambdaレイヤーに登録する方法

## 困ったこと

Lambdaで外部ライブラリを利用する場合、Lambdaにコードをアップロードするときに一緒にアップロードする必要があります。
さらに、Lambdaには一つ５０MBまでという制約もあり、ライブラリによってはそれ単体で５０MBを超える場合もあったりするので、そもそもアップロードできない！ということにもなる場合があります。私はPuppetierをLambdaで利用しようとしたときにこの問題に引っかかりました。（Puppetierは内部でヘッドレスChromeを使っているのでサイズが大きい）

## 解決策

Lambdaレイヤーを使うことにより、この問題を解決することができました。

ただ、Lambdaレイヤーのアップロードはコンソールを使う場合は、まずローカルでZipファイルを作ってそれをアップロードするという手順を取るのですが、これを毎回やるのは面倒なので、簡単なシェルを作って簡単にアップロードできるようにしました。

以下のシェルをプロジェクトルートディレクトリに置いておき、Lambdaレイヤーを更新する際はこれを実行すればOKというわけです。便利！

>このシェル内ではaws cliを使っていますので、aws cliをインストールしてから実行する必要があります。

```shell:lambda-layer-upload.sh
## 直下にあるnode_moduleをzip化する。
mkdir lambda_layer
cp -r node_modules lambda_layer
zip -r lambda_layer.zip lambda_layer
rm -rf lambda_layer

## 作ったzipファイルをレイヤーとしてアップロードする。
aws lambda publish-layer-version --layer-name my-lambda-layer --description "my lambda layer" --license-info "MIT" --zip-file fileb://lambda_layer.zip --compatible-runtimes nodejs10.x nodejs12.x
```

誰かの参考になれば幸いです。
Ruby 2.7 のキーワード引数と配列展開と send を組み合わせると warning が出ない

Ruby 2.7 でキーワード引数とハッシュが自動変換されるときに警告が出るようになった。キーワード引数は `def m(a:); end` みたいに引数に名前をつけて渡す機能。仮引数に `**` をつけるとキーワード引数の残りをハッシュとして受け取れる。

```ruby
# kw1 は必須のキーワード引数、 kwrest はkw1 以外のキーワードがハッシュ形式で受け取れる。
def a_method(kw1: 1, **kwrest)
  puts "kw1: #{kw1}"
  puts "kwrest: #{kwrest}"
end
a_method(kw1: 42, kw2: 4242)
# kw1: 42
# kwrest: { kw2: 4242 }
```

キーワードはどうみてもハッシュだからハッシュだと思っていたんだけど、 2.7 でハッシュとキーワードを区別するようになった。`{}` をつけて明示的にハッシュとして渡すとwarningがでて怒られる。

```ruby
a_method({ kw1: 42, kw2: 4242 })
# (irb):5: warning: Using the last argument as keyword parameters is deprecated; maybe ** should be added to the call
# (irb):1: warning: The called method `a_method' is defined here
```

これは `**` (double splats)演算子でハッシュをキーワードに展開することを明示しつつメソッドを呼び出すと回避できる。 

```ruby
a_method(**{ kw1: 42, kw2: 4242 })
```

`**` は `*` で配列を展開するイメージからの連想なのかなと連想し、`*` で配列展開しつつさらにキーワードを渡してみようとやってみたけどできなかった。展開される前にハッシュをアイテムとする配列に評価されるからまあそうなるかな、という感じ。

```ruby
# * で配列を展開しつつキーワードを渡したいけどできなかった
a_method(*[kw1: 42])         # => warning
a_method(*[{ kw1: 42 }])     # => warning
a_method(*[**{ kw1: 42 }])   # => warning
```

だけど、 `send` と組み合わせると warning がでなくなる。 `send` の二つ目以降の引数は特別扱いされる？

```ruby
send(:a_method, kw1: 1)             # => no warning
send(:a_method, { kw1: 1 })         # => warning

send(:a_method, *[kw1: 1])          # => no warning
send(:a_method, *[{ kw1: 1 }])      # => warning
send(:a_method, *[**{ kw1: 1 }])    # => no warning

# 変数に受けるとだめ。
args = [kw1: 1]
send(:a_method, *args) # => warning
```

# Links

- https://docs.ruby-lang.org/ja/latest/doc/spec=2fdef.html
- https://www.ruby-lang.org/ja/news/2019/12/25/ruby-2-7-0-released/
masterをpull出来ない。

#出来事
`master`を最新にするために、`pull`しよとしたら出来ない‥

`master`にブランチ移動する際、ターミナルに、

```
Your branch is behind 'origin/master' by 23 commits, and can be fast-forwarded.
 (use "git pull" to update your local branch)
sekishinya@mba gyakuten_clone_group13 % git branch
```

のように表示されますが、**masterブランチでコミットしてはいけません**。



`commit`しても`push`できなくしていますが、履歴がおかしくなります。


#解決策

何か変更があるかどうか、状態を確認する。

```
git status
```

それで何かが表示されたら、一旦`stash`で一時保存する。

```
git stash
```


そうすれば差分がなくなり`pull`できます。ブランチを切った後に反映をしたい場合は次のコマンドでOKです。

```
git stash pop
```
【django】models.DateTimeFieldに現在の時刻（timezone.now）を格納するときデータベース内の値が現在時刻にならない問題

models.DateTimeFieldに現在の時刻（timezone.now）を格納するときデータベース内の値が現在時刻にならない問題の解決に1時間くらい費やしました。<br>
なので、その解決法？について残しておきます。

models.DateTimeFieldに現在の時刻を入れたい場合は下の記事を参考にしてみてください。

[[Django]モデルmodels.DateTimeFieldに現在の時間を挿入する方法](https://sleepless-se.net/2018/06/09/django%E3%83%A2%E3%83%87%E3%83%ABmodels-datetimefield%E3%81%AB%E7%8F%BE%E5%9C%A8%E3%81%AE%E6%99%82%E9%96%93%E3%82%92%E6%8C%BF%E5%85%A5%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/:embed:cite)



# 結論
データベース内の値は、現在時刻になっている必要はないみたいですね。（UTCになっているから）<br>
そして、表示するときにTIME_ZONEで設定した地域の時刻に自動的に変換されるようです。

# では、いつ変換されるのか
- テンプレートファイル（htmlファイルなど）に渡して表示するとき
- views.pyでtimezone.localtime(timezone.now())したとき

時刻を表示したいだけならば**特に何もしなくても自動的に表示される**ので楽ちんです。

ただ、「ブログとかで書いた記事を指定した時刻に投稿したい」とか時間指定で何かするものであるなら、**views.pyであらかじめtimezone.localtime(timezone.now())で変換して、その変換した値をデータベースに格納する必要があります。**（そうしないと9時間遅れて投稿されます）
Rails 親子関係にないモデルを同時に更新してみよう。

どうもチャンクノです。
二週間ぐらい前にやった、親子関係にないモデルを同時に更新するやり方を書きます。
まず親モデルとしてUserがあり、子モデルとしてUserProfileとUserAddressがあります。
この子モデルであるUserProfileとUserAddressは親子関係にありません。
これを同時に更新してみましょう。

最初に自分が書いたがコードこちら

```
必要ないところは省いて書いています。
User::UserProfilesController

def update
  if @user_profile.update(user_profile_params) && @user_address.update(user_address_params)
end

private
 
def set_user_profile
  @user_profile = current_user.user_profile 
end

def set_user_address
  @user_address = current_user.user_address 
end

def user_profile_params
  params.require(:user_profile).permit(:name)
end

def user_address_params
  params.require(:user_address).permit(:zipcode)
end

```

```
view

<%= form_with model: [:user, @user_profile], local: true do |f| %>
  <%= f.text_field :name %>
  <%= fields_for @user_address, do |address| %> <= f.は不要。書き忘れじゃないよ。
    <%= address.text_field :zipcode %>
  <% end %>
  <%= f.submit %>
<% end %>
```
こんな感じで書いた気がします。
これでも動きますが

```
def update
  if @user_profile.update(user_profile_params) && @user_address.update(user_address_params)
end
```
ここの部分の記述がよくなかったらしく&&を使わずにまとめてくれと言われました。
正直最初それは無理じゃないか？と思ってましたができました。

まずは完成形から

```
User::UserProfilesController

def update
  if current_user.update(user_profile_params)
end

private

def user_profile_params
 params.require(:user).permit(
  user_profile_attributes: [:name],
  user_address_attributes: [:zipcode]
 )
end
```

```
view

<%= form_with model: [:user, current_user], url: user_user_profile_path, local: true do |f| %>
  <%= f.fields_for :user_profile, current_user.user_profile || current_user.build_user_profile do |profile| %>
    <%= profile.text_field :name %>
  <% end %>
  <%= f.fields_for :user_address, current_user.user_address || current_user.build_user_address do |address| %>
    <%= address.text_field :zipcode %>
  <% end %>
　<%= f.submit %>
<% end %>
```

こうです。
できるんかーい🙋‍♂️って感じでしたね。
自分ができないと思っていた理由はparams.require()の括弧の中身がコントローラー名と一致していないといけないと思ってたからです、、、。
なので、UserProfilesControllerでparams.require(:user)ってできなくね？って思ってたんですね。
コントローラー名は全く関係ないことを今更知りました、、、。
勉強になります。

初学者の方だとform_withの記述の仕方で不明点があると思うので、別途記事を書こうと思います！！
ひとまずこんな感じで書けば親子関係にないモデルを同時に更新することができます。
createも同じviewファイルを使ってできるはずです🙆‍♂️
そういえばここでは書いてないですがaccepts_nested_attributes_forという記述が親モデルに必要になります。ここは調べればすぐに出てくるのでご自身で調べてみてください！！
参考までに。
https://qiita.com/hiroweb/items/74867433ab5091713521

それでは今日はこの辺で！!
皆様よきプログラミングライフを🙏
覚えたことはすぐに使いたくなる習性を活かして三項演算子・重複の削除使ってみた

##はじめに

こんにちは、本日もAtCoderの解答を書き残して行こうと思います。

本日は、先日勉強していた時に出てきた解答うまく使って解けたので、
そちらを紹介して参ります。

##どんな問題を解いたか

私が今回解いた問題は、
「**0~9までの数字が3つ与えられ、それらのうち2つが同じであるかいなか**」を求める問題でした。

##私の解答
早速ですが、私の解答は以下のようになりました。

```sample.rb
a,b,c = gets.split(' ').map(&:to_i)
puts [a,b,c].uniq.size == 2 ? 'Yes' : 'No'

```

こだわりポイントとしては、
1.a,b,cを[]で囲うことで配列にしているところ
2.a,b,cの重複をuniqで確認しているところ
3.三項演算子を使って出力文字を制御しているところ
です。

1に関しては、別に分けなくても1つの配列にしてしまえばよかった気もしますが、
問題に乗っ取って再現しました。

また、普段は結構if文で条件分岐して書いてしまいますが、
今回は三項演算子ですっきり書くことができました。


他の人の解答をみていても、方向性はだいたい合っていたので、
結構嬉しかったです！

A問題なので、簡単ではありますが、
解けたことよりも、書き方がそれらしくなったかな？というところに
喜びを覚えてます。

これからも綺麗でスッキリしたコーディングを追求していきたいところです。
それでは、また。
java(乱数)

##乱数を発生させる
```java
int a = new java.util.Random().nextInt(①);
```
①に1以上の整数を指定すると0以上かつ①で指定した数未満のランダム整数がaに代入
`例：10を代入するとaに0〜9のいずれかが代入`

##キーボードから１行の入力を受け取る命令
**`文字列`の入力を受け付ける**

```java
String a = new java.util.Scanner(System.in).nextLine();
```

**`整数`の入力を受け付ける**

```java
int a = new java.util.Scanner(System.in).nextInt();
```
webアプリケーションとは

# webアプリケーションって何

簡単に説明すると、safariやgoogleなどのブラウザから利用できて、データを登録することのできるサービスです


#仕組み

自身のパソコン（クライアント）とアプリケーションのサーバーをインターネットによって繋ぎ、クライアントのリクエスト（ページ表示など）に対し、サーバーから情報をインターネットを介して持ってきてからレスポンスとしてクライアントに返します

#例えば

メルカリやアマゾン、ツイッターやフェイスブックなど


#ネイティブアプリケーション

スマートフォンなどにダウンロード・インストールして使用するアプリケーション

インターネットへの接続をする必要がない
Kubernetes 1.18 Flag --replicas has been deprecated, has no effect and will be removed in the future

# kubectl run の挙動が1.18から変更になった

Kubernetesで用いるマニフェストをワンライナーで生成したい場面にて、このエラーに遭遇したのでまとめる。
偉大な先人によってすでに懸念が示されているが、kubernetes 1.18よりkubectl runコマンドがPods作成のみのコマンドとなったため、今までkubectl runコマンドにてdeployment, job, cronjobなどを生成していた人は読み替えが必要になる。


参考: 「Kubernetes 1.18: SIG-CLI の変更内容」
 https://qiita.com/superbrothers/items/eef275853b0c2d14e95c



```
❯ kubectl run nginx --image=nginx --replicas=2
Flag --replicas has been deprecated, has no effect and will be removed in the future.
```

# kubectl runはどんな挙動をするようになったか
## 環境
Kubernetes 1.18.2
kind v0.8.1
macOS Catalina

```
❯ kubectl version
Client Version: version.Info{Major:"1", Minor:"18", GitVersion:"v1.18.2", GitCommit:"52c56ce7a8272c798dbc29846288d7cd9fbae032", GitTreeState:"clean", BuildDate:"2020-04-16T23:35:15Z", GoVersion:"go1.14.2", Compiler:"gc", Platform:"darwin/amd64"}
Server Version: version.Info{Major:"1", Minor:"18", GitVersion:"v1.18.2", GitCommit:"52c56ce7a8272c798dbc29846288d7cd9fbae032", GitTreeState:"clean", BuildDate:"2020-04-30T20:19:45Z", GoVersion:"go1.13.9", Compiler:"gc", Platform:"linux/amd64"}
```



## Deploymentを作ろうとしても、podができる(失敗例)

```
❯ kubectl run nginx --image=nginx --replicas=2
Flag --replicas has been deprecated, has no effect and will be removed in the future.
pod/nginx created
```

## Jobを作ろうとしても、podができる(失敗例)

```
❯ kubectl run my-job --image=busybox  --restart=OnFailure -- date
pod/my-job created
```

## CronJobを作ろうとしても、Podができる(失敗例)

```
❯ kubectl run test-job --image=busybox --restart=OnFailure --schedule="* * * * *" -- date
Flag --schedule has been deprecated, has no effect and will be removed in the future.
pod/test-job created
```

# どうしたらよいのか

## Deploymentを作りたいとき

残念ながらreplicasオプションがないため、Deployment作成後にscaleする感じになる

```
kubectl create deployment nginx --image=nginx
kubectl scale deployment nginx --replicas=2
```

## Jobを作りたいとき

```
kubectl create job my-job --image=busybox -- date
job.batch/my-job created
```

## CronJobを作りたいとき

```
kubectl create cronjob test-job --image=busybox --schedule="*/1 * * * *" -- date
cronjob.batch/test-job created
```



# kubectl create を使用する場合のメモ

kubectl create <リソース名>とすることで、コマンドの使用例が出てくるので呪文のようなkubectl runコマンドを用いてyamlを生成する必要がなくなった　嬉しい！



下記はDeploymentの例

```
❯ kubectl create deploy -h
Create a deployment with the specified name.

Aliases:
deployment, deploy

Examples:
  # Create a new deployment named my-dep that runs the busybox image.
  kubectl create deployment my-dep --image=busybox
```
macOSでAzuruADを利用しているWindows10に向けてRDP接続する方法

現在、多くの企業がリモート業務を行ったり、時短業務を行っているとは思うが（もちろん、セキュリティ上どうしても出社しなければいけない仕事をやられている方もいらっしゃるので一概にはいえない）、私の所属している弊社はリモートで行うことができる環境だった。

だが私自身は会社ではWindowsを使って仕事しているが、私が使っているメインPCはMacである。
Macである程度の仕事はできるが、どうしてもWindowsを使わなければ行けない状況がやはりある。
そこで、やはりRemote Desktopを使ってWindowsに入って作業をする必要があるが、弊社のWindowsのアカウントはAzureADを利用している。
macOSでリモートデスクトップを利用するときはログインに戸惑ったので備忘録として残す

### 利用するのはMicrosoft Remote Desktop
<img width="557" alt="スクリーンショット 2020-05-08 23.27.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546003/7cfb0646-5ded-d9b2-2588-1a201817ff5f.png">
公式でMicrosoftさんからでているのでこれを使います。

社内に接続する方法は色々あると思うので省略しますが、VPN接続が一般的かな？

![スクリーンショット 2020-05-08 23.32.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546003/1059fd8a-7868-f09f-3298-248cce860f50.png)
Add PCを選択
![スクリーンショット 2020-05-08 23.34.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546003/ee558978-1851-4893-ed75-234dd5b739fb.png)
PCのIPアドレスとか名前を設定して作成して選択するわけですが、
![スクリーンショット 2020-05-08 23.35.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546003/2c7197a0-1dcc-c2f6-8e0d-e96ecdc2d882.png)

ユーザー名を設定してなければ聞かれます。
macOS環境で接続先がAzureADの場合はユーザー名を

```
User@Domain
```

では私の環境では接続できませんでした。
この場合は

```
AzureAD\User@Domain
```
を入力し、パスワード入力をすると接続がうまくいきます。

![スクリーンショット 2020-05-08 23.37.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546003/2f29fb1f-bc15-3c75-c9f0-9cdb73d02a04.png)


![スクリーンショット 2020-05-08 23.47.46（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546003/a86ae040-2045-0d00-0717-df8ef15873cf.png)
これで会社の環境に家からリモートで自由に操作できるようになりました。
AzureADでもmacOSでしっかりリモートデスクトップ接続ができるのでリモート業務もしっかり行えるので非常に助かります。

今後も耐える日々が続きますがリモートでも業務をしっかりと回すことで誰かのために役立てると信じて業務に取り組みたいですね。
git push すると Authentication failed が出てpushできないとき

# 前提
- 実行環境はWindows10．
- GitLabにサインインするとき，新規にアカウントを作らずにGitHubのアカウントを用いてサインインした．
- 正しくユーザーネームやパスワードを入力してもpushできない．

# エラー内容
ユーザーネームやリポジトリ名は適当に変えている．

```
$ git push origin hogehoge
Username for 'https://gitlab.com': username
Password for 'https://username@gitlab.com':
remote: HTTP Basic: Access denied
fatal: Authentication failed for 'https://gitlab.com/hoge/hogehoge.git/'
```

# 原因
GitLabのパスワードを設定していなかったことが原因だった．

# 解決方法
以下のページからパスワードを設定する．
https://gitlab.com/profile/password/edit

設定後，再度pushするとpushできた．
改行時に\begin{hoge}を認識して\end{hoge}を補完する

##この記事の目標
vim を使って Latex のコードを書く方へ，少しだけ便利な設定を共有します．
\begin{hoge} の文章で改行をしたときに \end{hoge} を補完するように vimrc に設定を追記します．
![movie.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453674/762be06d-952b-811e-4aa3-1b1ca1a21d67.gif)
##環境・前提事項
私の VIM は バージョン 8.2.200 です．プラグインは使っていません．
最新バージョンでしか使えない機能など，特別なものは含まれていないと思います．
ただし "\begin{hoge}\begin{fuga}" と一行に複数回 "\begin{}" を登場させる方には，
意図通りの動作にならない可能性が高いです．
<font color="red">VIMのバージョンが7の場合，意図通りに動きませんでした．
バージョン7と8では count(...) 関数の使い方が異なるようです．
下記をご利用の際にはバージョンを8以上にしてください．(2021/04/13追記)</font>

##実践
vimrc に以下の内容を追記します．

```
function! s:AutoEndComp()
 let l:line_char=getline('.')
 if count(l:line_char,"\\begin{")
  let l:len=stridx(l:line_char,"}")-(stridx(l:line_char,"\\begin{")+7)
  let l:obj_name=strpart(l:line_char,stridx(l:line_char,"\\begin{")+7,l:len)
  let l:command="\<CR>\\end{"..l:obj_name.."}\<Esc>O "
  call feedkeys(l:command,'n')
 else
  call feedkeys("\<CR>",'n')
 endif
endfunction
inoremap <CR> <C-\><C-O>:call <SID>AutoEndComp()<CR>
```
##解説
改行すると関数 AutoEndComp() が呼び出されます．この関数の大まかなアルゴリズムは以下の通りです．
まず，関数 getline() によりカーソルがある行を抜き出し，文字列変数 line_char に格納します．変数の前にある「l:」はローカル変数であることを明示する接頭辞です．この接頭辞は[こちらのページ](https://thinca.hatenablog.com/entry/20120619/1340061987)で
>接頭辞を関数内で省略した場合は「l:」になる．

と解説されている通り，省略することもできます．

次に関数 count() により文字列変数 line_char に文字列 "\begin{" がいくつ含まれるかを調べます．
ひとつも含まれていない場合は else 節が実行され，通常の改行となります．
ひとつでも含まれている場合は else 前の部分が実行され，以下の処理となります．

1. \begin{hoge} の "hoge" の部分の文字数をカウントします．そのために関数 stridx(str, "extr") を使っています．この関数は，文字列変数 str における文字列 "extr" が始まる位置を返します．この関数をうまいこと使い "hoge" の文字数を変数 len に格納します．
2. "hoge" の部分の具体的な名前を調べます．そのために関数 strpart(str, "extr", len) を使います．この関数は，文字列変数 str の中で文字列 "extr" が始まる位置から文字数 len だけ文字列を抽出します．抽出した文字列を文字列変数 obj_name に格納します．
3. \end{hoge} を補完するために関数 feedkeys() を使用します．第一引数に改行したときの振る舞いを与えます．ここでは見栄えを優先して，文字列変数 command を導入しています．let により文字列を結合する際には，let str=char1..char2のように，<font color="Red">ピリオドを二つ</font>使います．

気がついた点，不備などありましたら，ぜひご指摘ください．

---
(5月9日追記)文字列を結合する方法について
訂正前: let str=char1.char2のように，ピリオドを使います
訂正後: let str=char1..char2のように，<font color="Red">ピリオドを二つ</font>使います
文字列の結合は[こちらのページ](https://vim-jp.org/vimdoc-ja/eval.html#expr5)で解説されている通り，
ピリオド二つの利用が推奨されていました．
**実践** に示したソースコードの該当箇所も書き換えました．
@htsign 様にご指摘いただきました．改めて感謝します．
ProcessingでVJ素材を作るブログ　第四回 translateとrotate( ii )

##rotate()を使ってみる
[前回](https://qiita.com/naoya_vj/items/6d0549e9d0e2b8a5d25e)に引き続き基準点の移動について記載してみよう。
rotate()は軸を基準点から時計回りで傾ける関数だ。
中に入る引数はPI＝１８０°として、PI/６などで表す。
前回触ったtranslate（）を用いて、一回基準点を画面中央にして、軸をずらしてみよう。

```processing:sample.pde

void setup(){ 
  size(640, 640);
  background(0);
  stroke(255);
  
  
  translate(width/2,height/2 );
  
  fill(0);
  rect(100,0,100,30);
  rotate(PI/6);
  
  fill(30);
  rect(100,0,100,30);
  rotate(PI/6);
  
  fill(60);
  rect(100,0,100,30);
  rotate(PI/6);
  
  fill(90);
  rect(100,0,100,30);
  rotate(PI/6);
  
  fill(120);
  rect(100,0,100,30);
  rotate(PI/6);
  
  fill(150);
  rect(100,0,100,30);
  rotate(PI/6);
  
}
```

できた画像がこちら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632724/5488999b-30cc-de30-6312-bffe7fdf14d2.png)

全て同じ
rect(100,0,100,30);
なのに、徐々に傾いていってる。

これを応用すれば、ロード画面の動画はお手の物な訳で



```processing:sample.pde 
  int num = 0;
  int numm;

void setup(){ 
  size(640, 640);
  background(0);
  stroke(255);
  frameRate(10);
}

void draw(){
  background(0);
  numm = num % 12;
  translate(width/2, height/2 );
  rotate(-PI/2+(PI /6)*numm);
  fill(numm * 10);
  rect(100,0,100,30);
  num++;
}
``` 

こんな感じ。
一定数超えたら初期値に戻す処理は、if使ってもいいけど、
最近数学にハマってる僕は、あまり使いたくなったのでそちらを採用。
rotateの中身に-PI/2入れているのは、最初スタートする位置を12時にしたかったからですね。

基準値の話はあと一回だけ続きます。

ではではー
【開発ログ③】初心者がデータベースの設計をしたらこうなったよ。

# 前提について
はじめまして、いりふねと申します。
現在プログラミングスクールにてアプリケーション開発の勉強をしております。３２歳独身A型、さそり座です。

この記事は、スクールの課題である個人開発アプリの記録であり、私自身のアウトプットの場として設定しております。未熟な点も多いと思いますが、見かけてくださった方にどんどん指摘をしてほしいと思っております。

作成するのは、有給休暇管理ツールです。
概要説明は[こちら](https://qiita.com/iczo32/items/97ad7d4baa985b3b99ca)。

また、開発するアプリケーションについては、実際にデプロイまでは行う予定ですが、サービスとしてリリースするわけではありません。アプリケーションの性質上、高いセキュリティを求められるものであり、短期で仕上げるようなものではないと思っているからです。完成品には「注意書き」も入れようと思いますが、くれぐれも完成品を見かけても個人情報を書き込まないで下さい。

では、本題へどうぞ。

# 仕様書の続き
[前回](https://qiita.com/iczo32/items/97ad7d4baa985b3b99ca)に引き続き、仕様書を書いてみようと思います。
今回は、データベース設計とその他について記述していきます。

## データベース設計
### ER図
ER図を作成してみました。手書き楽しい！！
![IMG_0606.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614723/c4467745-f17e-d6c9-57f0-7fd839f285fa.png)

今回は、４つのテーブルを使ってみようと思います。
スクールのカリキュラムで学んだ中間テーブルで多対多の組み合わせのリレーションも作りたかったんですが、今回作りたいものを私なりに考えると、結局１対多のテーブルばかりになりました。次回は挑戦してみたいです！！

### ①users table
Column|Type|Options|
|------|----|-------|
|name|string|null: false, add_index|
|email|string|null: false, unique: true|
|password|integer|null: false|
#### Association
- has_many :branches
- has_many :holidays

アプリケーションを利用するユーザーのテーブルです。
カリキュラムで学んだ「devise」を使ってみようと思います。

### ②branches table
Column|Type|Options|
|------|----|-------|
|name|string|null: false|
|user_id|integer|null: false, foreign_key: true|
#### Association
- belongs_to :user
- has_many :employees

支社を登録するためのテーブルです。
色んな会社の人事担当者が使用すると考えると、どのユーザーがどの支社を所有しているかというイメージになったので、外部キーとしてuser_idを設定しました。


### ③employees table
Column|Type|Options|
|------|----|-------|
|name|string|null: false|
|employment_status|integer|null: false|
|hire_date|date|null: false|
|branch_id|integer|null: false, foreign_key: true|
#### Association
- belongs_to :branch
- has_many :holidays

所属する社員を登録するテーブルです。社員は、必ず1箇所の支社に所属しています。一方、有給休暇を付与されたり、消化するたびにholidayレコードは増えていくイメージです。

### ④holidays table
Column|Type|Options|
|------|----|-------|
|add_day|integer|add_index|
|delete_day|integer|add_index|
|reason|text|default: ‘法定付与日のため’|
|user_id|integer|null: false, foreign_key: true|
|employee_id|integer|null: false, foreign_key: true|
#### Association
- belongs_to :user
- belongs_to :employee

ここが一番悩みました。有給休暇の増減を表すテーブルです。add_dayが付与、delete_dayが消化や喪失など表しています。社員の有給休暇の残日数は、add_dayの合計からdelete_dayの合計を引いて表現しようと思います。各レコードは社員に所属しているので、employee_idを外部キーに設定しました。
また、社員の有給消化時に消化したというレコードを投稿をするのは、管理者であるuserなので、ユーザーの外部キーuser_idも設定しています。
この他、法定付与日は、付与と喪失が同時に行われますが、ここはその日付になったら自動でレコードが作れないかと考えています。自動で作った場合は、reasonが記述できないので、デフォルト値で「法定付与日のため」と入れば良いなと思っています。

##その他
Herokuでデプロイを行います。
postgreSQLをデータベースとして使用します。

いずれもカリキュラムの指示ではありますが、私自身も初めて調べながら使っていきます。はじめて答えの載っていないものを使用するので、うまくいくかはわかりませんが、チャレンジということでできる限りでがんばります！！

## 今日の積み上げ
postgreSQLが、導入できました。ブログ記事等を参考に進めましたが、書いている方によって設定方法や手順がまちまちだったので、半日くらいかかりました。結果、無事オプションにpostgreSQLを選択してRailsの新規アプリケーションを立ち上げて、開発用とテスト用のデータベースを立ち上げることができました。
localhost3000の「Yay! You're on Rails!」を見て泣きそうになった。。カリキュラムと実践はこうも違うのか。
[Android]ダブルクォーテーションを画面に表示する

# はじめに
strings.xmlで定義したダブルクォーテーション(二重引用符)したい場合、「`\"`」を使います。
ただ、WPFの文字列リソースだと`%quot;`で表示されるのに…となったため簡単にまとめてみます。

# 比べてみる
`"`を含む文字列をTextViewに指定してみます。
「xmlにべた書きする」「strings.xmlの文字列を指定する」「Activityから文字列を指定する」の3つで比べてみました。

## xmlにべた書きする
```xml:activity_main.xml
        <TextView
            android:text="b&quot;b"
        />
        
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245399/8d3eba4a-8f15-7c07-8cfa-6fbc78cb5db4.png)
xmlでべた書きすると、`\`は効かないため特殊文字である`%quot;`と書かなければいけません。

## strings.xmlの文字列を指定する
```xml:strings.xml
    <string name="name_a">a\"a</string>
    <string name="name_b">b&quot;b</string>
```
```xml:activity_main.xml
        <TextView
            android:text="@string/name_a"
        />
        <TextView
            android:text="@string/name_b"
        />
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245399/e4f41339-4d83-d5d5-e2a1-bcab5080a202.png)

strings.xmlの文字列だと、`\`を付けないと`"`は表示されません。
`%quot;`だと表示されなくなります。


## Activityから文字列を指定する
```kotlin:MainActivity.kt
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        textViewA.text = "a\"a"
        textViewB.text = "b&quot;b"
    }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245399/581071d8-64fe-ce51-4f65-ac8b260aef4f.png)

Activityから文字列を指定すると、`\`を付けないと`"`は表示されません。
`%quot;`はXMLで使われる特殊文字なのでそのまま表示されます。

# まとめ
`%quot;`は、XMLで使われる特殊文字ですが、strings.xmlは特殊でkotlinなどActivityでの書き方と同様に`\"`で良いみたいです。
しかも、`%quot;`だと表示されなかったので、びっくりしました。