OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.jsで作る フォーム確認画面

## はじめに

アカウント登録などで、ユーザに情報を入力してもらったあとに、入力内容を確認してもらうための画面を用意しているサービスって多いですよね
SPAでそれを実現しようとすると、確認画面にデータを渡したりとか、戻ったときに入力内容が消えちゃったりして、頭を抱えました。
結果、こんな風に実装したよ〜、というのをご紹介できればと思います。


## 環境
Vue.js 2.6.10
vue-cli 3.9.1
vue-router 3.0.3


## 動作
動作確認用として、Githubにコード全文を上げています
https://github.com/tsk-wakabayashi/routing-nest-sample

Gifでみるとこんな感じ
[![Image from Gyazo](https://i.gyazo.com/4f0c24ed4b1bed1602b827d18ddc343b.gif)](https://gyazo.com/4f0c24ed4b1bed1602b827d18ddc343b)



## 解説

基本的にはこちらの機能を使います
https://router.vuejs.org/ja/guide/essentials/nested-routes.html

簡単に説明すると、ネストされたルーティングの親に、パラメータを持たせます。

App.vueの中にメインのrouter-view

```App.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
```

Index.vueの中にFormとConfirmをルーティングするrouter-viewを置いています。

```Index.vue
<template>
  <div>
    <div>
      入力
      <span v-if="$route.meta.isConfirm">> 確認</span>
    </div>
    <router-view v-bind:user.sync="user"></router-view>
  </div>
</template>

```


Form.vueとConfirm.vueの親はIndex.vueとなり、親要素を介してデータのやり取りができます。

Form.vueとConfirm.vueを行き来しても、Index.vueはマウントされた状態のため、データが残り続けるという仕組みです。
これのいいところはブラウザバックをしてもデータが残るので、ユーザにも親切ですね

```Form.vue
<template>
  <div>
    <form v-on:submit="$router.push('/confirm')">
      <div>
        名前
        <input v-model="user.name" type="text" required />
      </div>
      <div>
        パスワード
        <input v-model="user.password" type="password" required />
      </div>
      <button>確認する</button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    user: Object
  }
};
</script>
```

```Confirm.vue
<template>
  <div>
    <div>名前: {{ user.name }}</div>
    <div>パスワード: {{ user.password }}</div>
    <button v-on:click="$router.back()">戻る</button>
  </div>
</template>

<script>
export default {
  props: {
    user: Object
  }
};
</script>
```

ルーティングは

+ '/'がフォームの入力画面
+ '/confirm'が確認画面です。

Indexのpathに引っかかったあとは、childrenの中にあるルーティングが優先されて判定されるイメージです。

```router.js
export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      component: Index,
      children: [
        {
          path: "/",
          component: Form
        },
        {
          path: "/confirm",
          component: Confirm,
          meta: {
            isConfirm: true
          }
        }
      ]
    }
  ]
});
```

今回のサンプルはIndex.vueから渡すデータをオブジェクトにしているので、”親が子のデータを勝手に変えてはいけない”というルールに反することが出来る書き方になっています。
ただ、入力項目が多いとその分データバインディングするのも大変ですし、ベストプラクティスになるものがあればご教示頂ければ幸いです。

## さいごに
冒頭では確認画面を用意するサービスは多いと書きましたが、最近の傾向はどうなんでしょうか
モーダルで出すものもあれば、確認がないものもあるような気がします
それでもrouterをネストさせるのは、他にも使いみちがありそうですよね。
C#8.0世代の総称型制約 ジェネリクスとnull許容性の関係

# C#8.0時代の総称型制約

## はじめに

C#8.0でnull許容性が追加されたことで、総称型制約にも機能が追加されました。
動作を検証している中で、既存のキーワードの動作の認識が間違っていた箇所があったので、復習の意味も含めて記事を書いてみます。

## キーワード

C#8.0で新しいキーワード`notnull`が追加されました。null不許容の参照型または値型を示すことができます。

また、従来`class`制約だったものが、`class`,`class?`の両制約に役割が分かれることになります。

ここで「おや？」と思ったのが、この記事を書いたキッカケです。何かというと「`struct?`という制約ってあったっけ？」という疑問でした。結論から言えばこの制約はありません。

null許容性の話においては、参照型と値型では全く違うということをきちんと認識しておくことが必要です。

| |参照型|参照型?|unmanaged型|値型|値型?|
|---|:---:|:---:|:---:|:---:|:---:|
|未指定      |〇|〇|〇|〇|〇|
|`notnull`  |〇|－|〇|〇|－|
|`class`    |〇|－|－|－|－|
|`class?`   |〇|〇|－|－|－|
|`struct`   |－|－|〇|〇|－|
|`unmanaged`|－|－|〇|－|－|
|`new()`    |☆|☆|〇|〇|〇|
|`notnull,new()`  |☆|－|〇|〇|－|
|`class ,new()` |☆|－|－|－|－|
|`class?,new()` |☆|☆|－|－|－|

## 総称型でnull許容性を指定する方法

### 値型の場合

値型で、かつnull許容も不許容も受け入れる場合を考えてみます。

この場合、`struct`制約を利用して、型引数をnull不許容に指定した上で、null許容したい箇所だけ`?`(`Nullable<T>`)を指定すれば良いのです。

null許容値型とnull不許容値型は違う型として認識されるので、必要な場合はオーバーロードを書くことができます。

```csharp:値型制約
// nullを許容しない
void Do<T>(T item)
    where T : struct { }

// 引数でnullを許容する
void Do<T>(T? item)
    where T : struct { }
```

### 参照型の場合

参照型の場合はというと、型引数で`class?`制約を利用する方法と、型引数では`class`制約を使用したうえでnull許容したい箇所だけ`?`を指定する方法の二通りが考えられます。

また、参照型ではnull許容性が違っても同じ型として認識されますので、オーバーロードとして書き分けることはできません。

```csharp:参照型制約
// 型引数も引数もnull不許容参照型
void Do0<T>(T item)
    where T : class { }

// 型引数はnull不許容参照型で、引数はnull許容参照型
void Do1<T>(T? item)
    where T : class { }

// 型引数がnull許容参照型ならば、引数もnull許容参照型
// 型引数がnull不許容参照型ならば、引数もnull不許容参照型
void Do2<T>(T item)
    where T : class? { }

// これは書けない
// void Do3<T>(T? item)
//     where T : class? { }
```

### 補足：`notnull`制約

`notnull`制約の時、`T?`型を指定することはできません。これは値型と参照型でnull許容性の扱いが全く異なるからです。

```csharp:notnull制約
void Do<T>(T item)
    where T : notnull { }

// これは書けない
//void Do<T>(T? item)
//    where T : notnull { }
```

## 特殊な制約

使用頻度は高くないですが、特殊な制約についても調べてみます。

### デリゲート型制約

デリゲート型制約もnull許容性を指定できるようになっています。null許容性に応じて、`Delegate`,`Delegate?`を指定できます。挙動も直感的で、例えば`Action?`を受け入れるか受け入れないかが変わります。

| |`Delegate`|`Delegate?`|`Action`|`Action?`|
|---|:---:|:---:|:---:|:---:|
|`Delegate`     |〇|－|〇|－|
|`Delegate?`    |〇|〇|〇|〇|

### 列挙型制約

列挙型制約もnull許容性を指定できるようになっています。null許容性に応じて、`Enum`,`Enum?`を指定できます。ただし、`Enum?`については、あまり直感的な挙動ではないことを覚えておきましょう。

`MyEnum`という列挙型を定義したとして、`Enum?`型制約のついた型引数に`MyEnum?`を指定することはできません。これは`struct`制約と同じ理屈です。

総合的に考えると、`Enum`制約は`struct`制約と組み合わせて使ったほうが扱いやすいように思います。

```csharp:参考
public abstract class Enum : ValueType {}

// 独自定義したとする
enum MyEnum { ... }
```

| |`Enum`|`Enum?`|`MyEnum`|`MyEnum?`|
|---|:---:|:---:|:---:|:---:|
|`Enum`       |〇|－|〇|－|
|`Enum?`      |〇|〇|〇|－|
|`struct Enum`|－|－|〇|－|

## その他の仕様変更

C#8.0から`unmanaged` 制約の挙動が変わっています。これは入れ子のunmanaged型もunmanaged型と扱われるように改善されたためです。

例えば`unmanaged`制約した型引数に対して、C#8.0からは`(int,int)` を扱うことができるようになっています。

## まとめ

C# 8.0 の目玉機能である**null許容性**の指定は総称型の利便性にも大きく貢献します。理解を深めてより利便性を享受したいと思います。
[DataDog][AWS]GPGキーが違うと言われてエージェントが更新できない場合の対処法

# 環境

- Amazon Linux Ami 2

# 現象

`sudo yum update` しようとすると、以下のようなメッセージが出て更新できない。

```
The GPG keys listed for the "Datadog, Inc." repository are already installed but they are not correct for this package.
Check that the correct key URLs are configured for this repository.
```

# 解決策

いつの間にかGPGキーが増えているので、それを足す。

`sudo vi /etc/yum.repos.d/datadog.repo`

```diff
 gpgkey=https://yum.datadoghq.com/DATADOG_RPM_KEY.public
+       https://yum.datadoghq.com/DATADOG_RPM_KEY_E09422B3.public
```

その後、  `sudo yum update` すると、更新できた。

# 参考(?)

- [Datadog Agent v6 へのアップグレード](https://docs.datadoghq.com/ja/agent/guide/upgrade-to-agent-v6/)
熨斗（のし）の王様を作ったときに気をつけたこと

# まとめ
- [のし王](https://noshi-king.matsubarase.com)というWebサービスを作った。
<img width="1186" alt="のし王サムネイル" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459948/69521b17-1791-a35b-587a-368a19714572.png">
- のし作成サービスが既に存在する中で、下記に気をつけたというお話。
    - サービス作成のきっかけになった不満点・ニーズをもれなく仕様に落とし込む
    - 仕様策定時は技術的な楽さに甘えず、ユーザー体験を優先する
    - 上記を実現するため必要最低限の技術を選定する

# 不満点の解消、ニーズを仕様に落とし込む
- ちょっとした贈り物に「のし」をつけたかった。
- 既存サービスは、以下の点で不満が残った。
    - 「のし紙」のテンプレート（背景画像）だけが提供されており、Wordなどに貼り付けた後、自分で文字を描かないとダメだった
    - Web上で任意の文字まで入れられるサービスでは、最後になるまで仕上がり具合がが分からなかった
    - 最終画像にサービス名のロゴが入ってしまい、贈り物には不向きだった
    - フォントがしょぼかった
    - 水引き（背景画像）や表書き（御礼などの上部の文字）をどう選んでよいか分からなかった
- 不満点の解消をもれなく仕様に落とし込んだ。
    - 背景画像と任意の文字を組み合わせてPDFで出力できるようにする
    - 最終出力結果には広告を入れない
    - 有料でもカッコいいフォントを採用する
    - 用途に応じて自動で「水引き」と「表書き」が選択できるようにする
- マッスルの神様 ＝ マ神　→　熨斗の王様 ＝ のし王

# ユーザー体験を最優先する
||技術的な楽さを優先|ユーザー体験を優先|
|:---|:---|:--|
|文字描画|ユーザー自身がWordなどで描画|Webサービス上で描画|
|仕上がり確認|プレビュー不可 or プレビューボタンクリックで表示|リアルタイムプレビュー表示|
|水引き、表書き|ユーザーの選択したものを表示|用途を選ぶと最適な水引き、表書きを自動で選択|
|描画フォント|無料の範囲で選択可能|有料で質の良いフォントが選択可能|
|ユーザーが泥酔状態|酔いが冷めてから使う|泥酔状態でも直感で使える|

# 仕様の実現方法を考える
- 使用した技術
    - Webサービス上で文字描画しPDF出力
        - 水引きの種類や表書きなどの情報をブラウザ上で選択させる
        - サーバーでPDFを作成してダウンロードさせる(Golang/Google App Engine)
    - リアルタイムプレビュー表示
        - サムネイル描画サーバー(Golang/Google App Engine)を準備
        - 水引きの種類や表書きなどの情報が変更されたらAjax(jQuery)でサーバーからサムネイル画像を取得し、ブラウザ上に即時反映
    - 用途を選ぶと最適な水引き、表書きを自動で選択
        - [Bulma-ExtensionsのQuickView](https://wikiki.github.io/components/quickview/)で用途一覧を表示
        - 用途を入力させて絞り込み(jQuery)
        - 用途クリックで「水引き」と「表書き」を最適なものに変更(jQuery)
- 選定理由
    - 仕様実現に際して最低限／シンプルなものを選ぶ
    - 最新の技術よりも枯れて安定した技術を選ぶ
    - なるべくメンテナンスが不要なものを選ぶ
多重Dictionaryをつくりたかった

C#は素人なので定石がわかりません。

こういう連想配列があったとしましょう。

```php:PHP
$datetimes = [
	'past' => [
		'yesterday' => new DateTime('yesterday'),
		'lastweek' => new DateTime('last week'),
	],
	'future' => [
		'tomorrow' => new DateTime('tomorrow'),
		'nextyear' => new DateTime('next year'),
	]
];
```

いや、こんな意味のわからない配列なんて作らねえよという抗議は全くもってその通りなのですがそこはスルーします。
実際はAPIに飛んできたリクエストをユーザ単位にまとめるみたいな処理をするところで、何個飛んでくるかわからないという仕様です。

PHPで書くとこんな感じでさくっとできます。

```php:PHP
$datetimes = [];
foreach($request as $v){
	$datetimes[$v['tense']][$v['key']] = new DateTime($v['value']);
}
```

一瞬で書けてとってもらくちん。


ということで、この連想配列をC#に移植しようとしたのですが、どうもこのような構造について話をしているところがほとんど見当たりませんでした。
多重連想配列はC#では禁忌なのだろうか。


連想配列は[Dictionary](https://docs.microsoft.com/ja-jp/dotnet/api/system.collections.generic.dictionary-2)を使えばいいみたいですが、これは基本的に値がひとつです。
[NameValueCollection](https://docs.microsoft.com/ja-jp/dotnet/api/system.collections.specialized.namevaluecollection)というのが目的に近かったのですが、これは値が`string`固定みたいです。なぜ。
[Microsoft.Experimental.Collections](https://www.nuget.org/packages/Microsoft.Experimental.Collections/)は名前が既に危ない。


試しに`Dictionary`の中に`Dictionary`を突っ込んでみたら普通にいけました。

```csharp
    var datetimes = new Dictionary<string, Dictionary<string, DateTime>>();

    var list1 = new Dictionary<string, DateTime>();
    list1.Add("yesterday", new DateTime("yesterday"));
    list1.Add("lastweek", new DateTime("last week"));

    var list2 = new Dictionary<string, DateTime>();
    list2.Add("tomorrow", new DateTime("tomorrow"));
    list2.Add("nextyear", new DateTime("next year"));

    datetimes.Add("past", list1);
    datetimes.Add("future", list2);
```

ただ、この構造だと`list1`などの中間変数が必要になってしまいます。
一気に`datetimes["past"].Add("yesterday", new DateTime("yesterday"));`みたいなことはできないの？

```csharp
    var datetimes = new Dictionary<string, Dictionary<string, DateTime>>();

    // The given key "past" was not present in the dictionary
    datetimes["past"].Add("yesterday", new DateTime("yesterday"));

    // Object reference not set to an instance of an object
    datetimes.Add("past", null);

    // An item with the same key has already been added
    datetimes.Add("past", new Dictionary<string, DateTime>{{"yesterday", new DateTime("yesterday")}} );
    datetimes.Add("past", new Dictionary<string, DateTime>{{"lastweek", new DateTime("last week")}} );

    // これはOK
    datetimes.Add("past", new Dictionary<string, DateTime>{{"yesterday", new DateTime("yesterday")}} );
    datetimes["past"].Add("lastweek", new DateTime("last week"));
```

Add自体はできるみたいですが、親Dictionaryのキーの有無によって動作を変えなければなりません。
キーが存在しない場合のみキーをAddし、その後はその中身だけAddしないといけないようです。
なんというかとても面倒。

もっとなんかマシな方法ってのがあるんだろうけどよくわかりませんでした。
そもそもC#ではどういう作りにするのが定石なんだろうか。
step wise regression

```{r}

#step wise regression

#Regression and the Moore-Penrose Pseudoinverse p.46

f1=function(x){
  
return(x^2+x^3+x^4)  
  
}

f2=function(x){
  
return(x)  
  
}

f3=function(x){
  
return(x^3)  
  
}



#data=data.frame(num=1:20,y=c(0.20, 0.10, 0.49, 0.26, 0.92, 0.95, 0.18, 0.19, 0.44, 0.79, 0.61, 0.41, 0.49, 0.34, 0.62, 0.99, 0.38, 0.22,0.71,0.40),x1=c(84,87,86,85,82,87,92,94,88,84.9,78,90,88,87,82,84,86,83,85.2,82),x2=c(61,55.5,57,57,50,50,66.5,65,60.5,49.5,49.5,61,59.5,58.4,53.5,54,60,58.8,54,56),x3=c(24.5,24,23,22.5,22,24,25,26,25,24,23,21,26,25.5,24,23,24,24,24,22),sign=0)


tau=c(84,87,86,85,82,87,92,94,88,84.9,78,90,88,87,82,84,86,83,85.2,82)

z=c(61,55.5,57,57,50,50,66.5,65,60.5,49.5,49.5,61,59.5,58.4,53.5,54,60,58.8,54,56)

n=length(z)

C=cbind(c(f1(tau)),c(f2(tau)))

C_plus=array(0,dim=c(ncol(C),n))

for(j in 1:ncol(C)){
  
if(j==1){
  
 C1_plus=t(C[,j])/as.numeric(t(C[,j])%*%C[,j])
 
 C_plus[j,]=C1_plus
  
}else{
  
C1_plus=t(C_plus[(j-1),])  
  
k2=t((diag(1,n)-t(t(C[,(j-1)]))%*%C1_plus)%*%C[,j])/(t((diag(1,n)-t(t(C[,(j-1)]))%*%C1_plus)%*%C[,j])^2)

C2_plus=C1_plus%*%(diag(1,n)-C[,j]%*%k2)/k2

C_plus[j,]=c(C2_plus)

}  
  
}

x_hat=C_plus%*%z

predict=C%*%x_hat

plot(c(1:length(z)),z,type="o",col=2,xlim=c(1,length(z)),ylim=c(min(c(z,predict)),max(c(z,predict))),xlab="index",ylab="values")

par(new=T)

plot(c(1:length(z)),predict,type="o",col=3,xlim=c(1,length(z)),ylim=c(min(c(z,predict)),max(c(z,predict))),xlab="index",ylab="values")

```
クォータニオンに関する情報(pyquaternion)

# 目的
私的にクォータニオンをPython上で使ってみたかったので、情報をまとめてみました。
(解説見ても、結局どう使えばいいのかわからなかったので、自分用に使い方をまとめています。詳しい情報を知っている方は教えていただけると幸いです。)
インストールについては、

    pip install pyquaternion

で個人的にできたが、その他に_numpy_とか入れる必要があるらしいので、それは他のところで調べてください。


# クォータニオン概要
クォータニオンは三次元の物体の姿勢を表現するのに適した考え方らしい。
個人的なイメージとしては、二次元での複素数(実部とか虚部とかのあれ)を三次元に拡張したもの。

すごいのは、姿勢を変えるのに掛け算するだけで済むというのでぜひ使って見たいのだが...
**そもそも姿勢って、どうやって表現するの？**
という疑問から始まってる。

# クォータニオンの使い方
_注意:変数はこの章の間は引き継がれます_
三つの虚部が回転軸を、一つの実部がその回転角を表しているらしい。
pythonで定義するには

```python
from pyquaternion import Quaternion
q1 = Quaternion()
```

とすることで、方向も回転角度もない状態のクォータニオンが得られる...
以下に一般的なクォータニオンの定義の仕方について、自分で使うだろうなといものを以下に記す。

```python
# Quaternion(axis=[x, y, z], (degrees|angle)=(度数法|弧度法))
q1 = Quaternion(axis=[1, 1, 0],degrees=90)
q1 = Quaternion(axis=[1, 1, 0],angle=3.14159265/2) # πの値はちゃんととってこようよ
```

この値を別のクォータニオンにかけることで、回転させることができる。

そして、大混乱中の僕でも、ベクトルを回転させたいのであれば以下のようにできる。

```python
>>> v = [1,0,0]
>>> v_rot = q1.rotate(v)
>>> print(v_rot)
[0.5000000000000001, 0.4999999999999998, -0.7071067811865475]
```

多分だいたいあってる。
これで、ベクトルの回転を軸と回転量から計算することが簡単にできるようになった。
#### 具体的な使い方
例えば、x軸に90度、y軸に120度回転させたいなと思ったら

```python
>>> q1 = Quaternion(axis=[1, 0, 0],degrees=90)
>>> q2 = Quaternion(axis=[0, 1, 0],degrees=120)
>>> q3 = q2*q1 #q1の回転を先に行いたいのであればこの順番
>>> v_rot = q1.rotate(v)
>>> print(v_rot)
[-0.4999999999999999, 0.0, -0.8660254037844388]
```
こんな感じで、表せます！

# クォータニオンの壁
ベクトルとクォータニオンには共通して、向きを定義することができます。が大きな違いとして、クォータニオンはその姿勢をも定義する事ができる。
なので、是非ともその姿勢とやらをクォータニオンでグリグリ動かしてやろうと思ったのですが...これがよくわからなかった

### 姿勢をクォータニオンで表すってなに？
ここまでのイメージだと、回転軸の方向をその物体の向き、そして、どれだけ回転してるかを__degrees__として表すのかと思い、以下を定義

```python
posture = Quaternion(axis=[1, 0, 0],degrees=0)
```

これで、x軸方向に回転していない状態のクォータニオンを定義てきたぞ！って思い色々出力してみると...

```python
>>> posture.axis
array([0., 0., 0.])
>>> posture.degrees
0.0
```

__!!?__
あれ、方向ベクトルは何処へ？ってなりましたが、中身見ているとどうやら、

__クォータニオンにおいて回転しない場合、そもそも方向成分が消え失せる__

ということがわかりました。なるほど、確かに回転しないのであれば、軸の情報はいらないよな...
でも、だったらどうすれば、姿勢を表せるの？(ベクトル二つ使えばできそうだが、それは絶対にやりたくなかった)

### 結論

結論は簡単な話で、方向ベクトルみたいなわかりやすい姿勢クォータニオンなどというものがあるわけではなく、その変化の分だけを追っていけば良いというものでした(自分の中で、まとめて見た感じです。)

つまり、これが今の状態を表すクォータニオンだ！というものがあるわけではなく、最初の状態はよくわからんけど、__最初の状態と比べるとこれだけ変化したよ！__というものが常にわかるということと判断しました。

この辺りの認識は当然なのでしょうか？少なくとも、無学な状態でWeb上を検索して漁っていく課程ではなかなかわかりませんでした。

もし、困っている人がいたら、認識の手助けになってくれると幸いです。

_お疲れ様でした_
【paiza 演習問題】mod7占い (paizaランク S 相当)（タイムアウト）

#対象
これは paizaランク S 相当の練習問題として[ここ](https://paiza.jp/works/mondai/skillcheck_sample/mod7?language_uid=python3)にあった問題の解答を記録するものであり、初心者向けです。（上級者の方のアドバイスは頂きたいです）

#概要
入力値ケース９（大規模データ入力時）にてタイムアウトを吐かれたのでリファクタリングを行いたい。


#コード


```py
def solve():
    N = int(input())
    Deck = [int(input()) for _ in range(N)]
    Ans = 0
    for x in range(0,N-2):
        for y in range(x+1, N):
            for z in range(y+1, N):
                Sum_deck = Deck[x] + Deck[y] + Deck[z]
                if Sum_deck % 7 == 0:
                    Ans += 1
    print(Ans)


if __name__ == '__main__':
    solve()
```

#原因？
逐一計算を行っているため、計算回数が膨らんでいる。
同じX,Y条件下では[以前](https://qiita.com/LLeak/items/58fe93c0704927205342 )のように重複分の再利用をするべきか。

と思ったけど違うなこれ。全部のmod7を計算して、数学的な組み合わせで殴ったら終わるのでは？
xibとColor Assetの組み合わせはヤバイ

# はじめに
xibで `View` などの色にColor Assetの色を指定している場合、コードで色を変更すると想定外の挙動をすることがあります。

# 環境
* Xcode 10.3
* swift 5.0

# 準備
1. Assets.xcassetsにColor Assetを作成する  
適当に下記のように色を作成。  
<img width="447" alt="color_asset" src="https://user-images.githubusercontent.com/34936885/65953836-be86de00-e47f-11e9-9d5f-c2daeb8f5947.png">
2. xibでViewControllerを作成し、Color Assetの色を指定する  
下記のように作成(赤色がColor Asset)。Labelの背景色はwhiteを指定。  
<img width="1050" alt="view" src="https://user-images.githubusercontent.com/34936885/65953747-8c757c00-e47f-11e9-92a1-1662861d5cf1.png">
<img width="211" alt="view_hierarchy" src="https://user-images.githubusercontent.com/34936885/65953777-9d25f200-e47f-11e9-9b95-20a79a5d0021.png">
3. xibでTableViewCellを作成し、Color Assetの色を指定する  
Labelを一つ置き、textColorにColor Assetを指定。  
<img width="371" alt="cell" src="https://user-images.githubusercontent.com/34936885/65953799-a9aa4a80-e47f-11e9-990e-9f86db66a0b6.png">
4. コードで色を変更する  
下記のように `viewDidload` と `cellForRowAt` で色を変更。  

```swift
override func viewDidLoad() {
  super.viewDidLoad()

  // Do any additional setup after loading the view.
  label.textColor = .blue
  colorView.backgroundColor = .blue
  label.backgroundColor = .green
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: "ColorTableViewCell", for: indexPath) as! ColorTableViewCell
  cell.label.text = "Test \(indexPath.row)"
  cell.label.textColor = .blue
  cell.label.backgroundColor = .green
  return cell
}
```

# 問題点
上記の準備をしたものを実行する。

## 期待値
期待値としては下記のような表示。
<img width="300" alt="expect" src="https://user-images.githubusercontent.com/34936885/65954086-4836ab80-e480-11e9-9f49-621c0c162ba9.png">

## 結果
しかし、結果は下記のような表示。
<img width="300" alt="result" src="https://user-images.githubusercontent.com/34936885/65953946-0279e300-e480-11e9-8e4d-a64331287270.png">
Color Assetの色を指定していないLabelの背景色は変更されていますが、Color Assetの色を指定した部分は色が変わっていない！！

# 解決策
無難な解決策としてはxibの色指定をColor Assetをやめて `Custom` を設定すること！！

Color Assetの色を指定しているとxibが読み込まれた後に再度色が設定されるらしい...

とりあえず `viewDidload` `viewWillAppear` はダメで `viewDidAppear` で設定すると期待通り設定できました。
セルの場合 `awakeFromNib` で設定してもダメでした。

## 2019/12/15追記
[この記事](https://techblog.yahoo.co.jp/entry/20191212788765/#iOS%2012%E4%BB%A5%E4%B8%8B%E3%81%A7Asset%20Catalog%E3%81%AE%E8%89%B2%E3%81%8CView%E3%81%AB%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E6%99%82%E3%81%8C%E3%81%82%E3%82%8B)に `DispatchQueue.main.async` を使うと `viewDidload` でも色変更ができるというのをみつけました。試してみたところ色がちゃんと変更されました。が、ただ `DispatchQueue.main.async` を使うとなんでここで使ってるんだ？とあとで見た人が思うので下記のようにコメントをつけた方がいいでしょう:laughing:

```swift
override func viewDidLoad() {
  super.viewDidLoad()

  // よくわからんけど動いた
  DispatchQueue.main.async {
    self.label.textColor = .blue
    self.colorView.backgroundColor = .blue
    self.label.backgroundColor = .green
  }
}
```

# さいごに
セルのラベルの色を条件によって変えようと思ったら初期表示のときに色が変わらない!!というのに直面し色々調べた結果、Color Assetが原因なのに気づきました。

Color Assetは便利だけど思わぬ挙動があるので気をつけましょう:innocent::innocent::innocent:
Jetson nanoでRoombaハックへの挑戦【情報共有用】

#Jetson nanoでRoombaハックへの挑戦【情報共有用】
色々情報共有したくこちらにも書かせて頂きました。
Roombaハックが出来ましたら、こちらにもまとめようと思ってます。

#＊＊＊Roombaハックのブログ＊＊＊
■[Roomba Jetson nanoハックへの道 【Jetson nano調べ】](https://meerobots.blogspot.com/2019/09/jaston-nano.html)
■[Roomba Jetson nanoハックへの道 【Jetson nanoセットアップ】](https://meerobots.blogspot.com/2019/10/roomba-jetson-nano-jetson-nano.html)

今後ともよろしくお願いいたします。
色々と情報共有できると嬉しいです。
Sass で毎回 &:active, &:hover, &.active を書くのがめんどくさい

めっちゃ今更な気はするけど、いい加減めんどくさい。

```sass:monogu.sass
$hover: '&:active, &:hover, &.active'
a
  #{$hover}
    color: #06f
```
```css:monogu.css
a:active, a:hover, a.active {
  color: #06f;
}
```
kill -9 PID値でOperation not permittedってなった時の対処法

#背景

[DjangoでGAEのMySQLと接続する時にポートが埋まっているよと言われた時の対処法](https://qiita.com/KueharX/items/a55295322eff3596d579)
にてポートの閉じ方を書いたのですが、なぜか後日同じ方法を試してみるとOperation not Permittedと返されて閉じられなかったので書きます。

#一応の解決策
[how-to-kill-a-process-that-says-operation-not-permitted-when-attempted?](https://unix.stackexchange.com/questions/89316/how-to-kill-a-process-that-says-operation-not-permitted-when-attempted)
ググったら上記の記事が出たのでこれを見て同じコマンド、すなわち

```lsof -i | PORT番号```

でポート番号を調べ、

```sudo kill 'pid' ```

でkillすると。


#ついでに


そう思ったので原因を調べてみました。

[初心者向け　MacでOperation not permittedの解決方法](https://qiita.com/iwaseasahi/items/9d2e29b02df5cce7285d)
[macOS Mojave の "Operation not permitted" を回避する（du/ls/mv/cp 実行時）](https://qiita.com/KEINOS/items/0366f1c281b574a79cfb)

などの記事で紹介されている通り、OSXの仕様のようなので、記事の先で紹介されている手順でシステム環境設定を開いて~などの手順を踏む方が早いかもしれません。
Sample Configuration (Logstash SNMP Input module)


# Sample Configuration(logstash snmp input module)

 AWS EC2インスタンスにが持つMIB情報（OID=1.3.6.1.2.1.25.3.3.1.2）を取得するように、以下のコンフィグファイルでは設定している。[SNMP Input Plugin](https://www.elastic.co/guide/en/logstash/current/plugins-inputs-snmp.html#plugins-inputs-snmp)を確認して、SNMPv2で使用するパラメータ情報をすべて追記した。利用する上で不要な場合は適宜削除すればよい。
　個々にOIDを指定したい場合は、***get***に対してOIDを羅列すればよいが、 walkを活用すれば、指定OID配下（その階層）の値をまるごと取得してくれる。

```
input {
  snmp {
    ###get[array]
     #Use the get option to query for scalar values for the given OID(s).
       get => ["1.3.6.1.2.1.25.3.3.1.2"]

    ###hosts[array]
     # The hosts option specifies the list of hosts to query the configured get and walk options.
     # format {tcp|udp}:{ip address}/{port}
     # community the community string, default is public
     # version 1, 2c or 3, default is 2c.
     # retries is the number of retries in case of failure, default is 2.
     # timeout is the timeout in milliseconds with a default value of 1000.
       hosts => [{host => "udp:127.0.0.1/161" community => "public" version => "2c"  retries => 2  timeout => 1000}]
    ###interval[number]
     #The interval option specifies the polling interval in seconds.
     #Default value is 30
      interval => 5

    ###mib_paths[path]
     #The mib_paths option specifies the location of one or more imported MIB files.
       #mib_paths => ["etc/mibfiles/mibfile.dic"]

    ###oid_root_skip[number]
     #The oid_root_skip option specifies the number of OID root digits to ignore in the event field name.
      #oid_root_skip => 0

    ###oid_path_length[number]
     #The oid_path_length option specifies the number of OID root digits to retain in the event field name.
      #oid_path_length => 0

    ###walk[array]
     #Use the walk option to retrieve the subtree of information for the given OID(s)
      #walk => ["1.3.6.1.2.1"]
      # example OID
      # .1.3.6.1.2.1.25.3.3.1.2:HOST-RESOURCES-MIB::hrProcessorLoad
      # .1.3.6.1.4.1.2021.4.6:UCD-SNMP-MIB::memTotalReal
      # .1.3.6.1.2.1.25.4.2.1.4:HOST-RESOURCES-MIB::hrSWRunName
  }
}


```

# Linux上でMIB情報を検索する方法


上記で設定できるのはわかったが、どのMIB情報をとってこればよいかわからない場合、対象サーバに対してMIBの情報を調査してから設定する必要がある。私が取得した対象（SNMP Agent）はAWS上のEC2インスタンスであるため、以下のようにコマンドで逐次確認しながら対象となるOIDを設定した。


（１）特定のOIDの情報を確認したい場合

```
nmpwalk -v 2c -c public localhost 1.3.6.1.2.1.25.3.3.1.2
```

（２）特定のOIDの詳細情報を確認したい場合

```
[root@ip-172-31-13-174 ~]# snmptranslate -Td 1.3.6.1.2.1.25.4.2.1.4
HOST-RESOURCES-MIB::hrSWRunPath
hrSWRunPath OBJECT-TYPE
  -- FROM       HOST-RESOURCES-MIB
  -- TEXTUAL CONVENTION InternationalDisplayString
  SYNTAX        OCTET STRING (0..128) 
  MAX-ACCESS    read-only
  STATUS        current
  DESCRIPTION   "A description of the location on long-term storage
        (e.g. a disk drive) from which this software was
        loaded."
::= { iso(1) org(3) dod(6) internet(1) mgmt(2) mib-2(1) host(25) hrSWRun(4) hrSWRunTable(2) hrSWRunEntry(1) 4 }
```
Rustのエラーライブラリ利用状況を調べてみた

# はじめに
Rustのエラーライブラリはこれまで

* `std::error::Error`をマクロで使いやすくする[error-chain](https://github.com/rust-lang-nursery/error-chain)
* `std::error::Error`をあきらめて、独自の`Fail`トレイトを提供する[failure](https://github.com/rust-lang-nursery/failure)
* failureの知見を元に`std::error::Error`を再設計 [RFC 2504](https://github.com/rust-lang/rfcs/pull/2504)

という変遷を経てきました。
（このあたりの詳細は["Rust のエラーまわりの変遷"](https://qiita.com/legokichi/items/d4819f7d464c0d2ce2b8)が詳しいです）

元々は新しくなった`std::error::Error`に対応してfailure 0.2が出る予定だったのですが、あまり進んでいないように見えます。
post failureを謳うクレートもいくつか出てきており、エラーライブラリの選定は難しくなりつつある気がしています。

そこで各エラーライブラリの利用状況を調べてみました。
折角なので、今後も半年に一度くらいは調べていきたいと思います（覚えていれば…）。


# 調査方法
crates.ioのAPIを叩く[crates_io_api](https://github.com/theduke/crates_io_api)というクレートがあったので以下のようなコードを書きました。

```rust
use crates_io_api::SyncClient;

fn main() {
    let client = SyncClient::new();
    let all = client.all_crates(Some(String::from("error")));
    let mut result = Vec::new();
    if let Ok(all) = all {
        for c in all {
            let name = c.name;
            let update = c.updated_at;
            if let Some(d) = c.description {
                if d.to_lowercase().contains("error") {
                    let rev = client.crate_reverse_dependencies(&name);
                    if let Ok(rev) = rev {
                        let total = rev.meta.total;
                        if total != 0 {
                            result.push((total, name, update));
                        }
                    }
                }
            }
        }
    }

    result.sort_by_key(|x| x.0);
    result.reverse();
    println!("|crate|dependents|updated_at|");
    println!("|-----|----------|----------|");
    for (total, name, update) in result {
        println!("|{}|{}|{}|", name, total, update.format("%Y-%m-%d"));
    }
}
```

`all_crates`メソッドでcrates.ioページ上部の検索フィールドから検索したときに出てくるクレート一覧が得られます。
ただし、この検索はREADME.mdなども対象としているようで、`error`のような一般的な単語を入れてしまうとかなり過剰に出てきます。
そのため、ここではCargo.tomlの`description`フィールドに`error`が含まれるものだけを対象としました。
さらに`crate_reverse_dependencies`メソッドでそのクレートに依存関係を持っているクレート一覧が得られます。
`crate_reverse_dependencies`で得られるクレートの個数が、そのクレートの利用数ということになります。

# 結果（2019/10/1）

10以上のクレートから使われているエラーライブラリは以下の通りです。
（上記のプログラムを実行するともう少し出てきますが、エラーライブラリでないものは手動で除去しました）

|crate|dependents|created_at|updated_at|
|-----|----------|----------|----------|
|failure|1885|2017-10-08|2019-01-02|
|error-chain|669|2016-04-29|2019-05-10|
|quick-error|242|2015-09-09|2018-05-26|
|snafu|50|2019-01-28|2019-08-26|
|err-derive|37|2018-12-24|2019-09-26|
|derive-error|28|2017-01-15|2017-10-04|
|simple-error|20|2016-03-24|2019-07-03|
|custom_error|18|2018-11-01|2019-07-30|
|common_failures|11|2017-12-24|2018-05-15|

トップ3は昔からあるやつですね。
最近（`std::error::Error`再設計後くらい）出てきて使われているのはsnafu/err-derive/custom_errorあたりでしょうか。
HTML clearfixの使い方

## Memo

### clearfixの使い方

サンプルを準備

```html:sample
<div class="box1">box1
	<div class="box2">box2</div>
	<div class="box3">box3</div>
</div>

<div class="box4">box4</div>
```

```css:css
.box1 {
  width: 500px;
  border: 5px solid #000;
}
.box2 {
  height:100px;
  width: 100px;
  background-color:#999;
  float: left;
}
.box3 {
  height:100px;
  width: 100px;
  background-color:#777;
  float: left;
}
.box4 {
  height:50px;
  width: 100px;
  background-color:#555;
  float: left;
}
/*-- clearfix このCSSが重要 --*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
```

サンプルではfloatした要素の親要素の高さが無い状態

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="abek922" data-slug-hash="RwbzYMP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RwbzYMP">
  <span>See the Pen <a href="https://codepen.io/abek922/pen/RwbzYMP">
  RwbzYMP</a> by abek922 (<a href="https://codepen.io/abek922">@abek922</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

floatした要素の親要素にクラス名clearfixをつけてclearfixのCSSを適応

```html:sample
<div class="box1 clearfix">
	<div class="box2"></div>
	<div class="box3"></div>
</div>

<div class="box4"></div>
```

clearfixのCSSを読み込むと高さがとれる状態になる

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="abek922" data-slug-hash="MWgMqBG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Clearfix_2">
  <span>See the Pen <a href="https://codepen.io/abek922/pen/MWgMqBG">
  Clearfix_2</a> by abek922 (<a href="https://codepen.io/abek922">@abek922</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## clearfix

```css:clearfix
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
```
TortoiseGitではMacで生成したSSH鍵が利用できない




#概要
Macで生成したSSH鍵を利用して、Windowsでgithubへアクセスしようとしたところ、エラーになった。
WindwosではTortoiseGitを利用してアクセスを試みていた。
原因として、TortoiseGitとMacがデフォルトで生成する鍵の形式は異なるため、エラーになった模様。
対応としては、SSH鍵の形式変換を行う、もしくは別のソフトを利用するといった対応が必要になった。

#発生エラー
```
PageantOK
Couldn't load this key (OpenSSH SSH-2 private key (old PEM format))
```
![pageant2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222043/4dfc8896-07aa-bf52-7c73-0473e09d2281.png)

#エラー原因
TortoiseGitとMacがデフォルトで生成する鍵の形式は異なるため

#対応策
 - 別のソフトを利用する(Sourcetree)
    SourcetreeはWindows版もあり、そちらであればMacで生成した鍵をそのまま利用できる。

 - 鍵の形式を変換する
    以下の手順を実施することで、鍵の形式を変換することができる。
    https://qiita.com/ryok/items/be260e6df4ecfb5d5f1d
Vuetifyのdocsサーバが起動できないとき

Vuetifyの公式ドキュメントの日本語翻訳をするために、手元でドキュメントサーバを起動しようとしたらちょっとはまったので共有です。

クローンして`yarn`で必要なモジュールをインストールして、`yarn dev docs`で起動できるかと(勝手に)思っていたら、モジュールが見つからないと怒っていらっしゃる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97227/8f645219-c61f-898b-caa8-3c947a90f128.png)


```一部抜粋.log
vuetifyjs.com:     ERROR in ./src/components/style/Colors.vue?vue&type=script&lang=js& (/Users/totto357/Private/vuetify/node_modules/babel-loader/lib!/Users/totto357/Private/vuetify/node_modules/vue-loader/lib??vue-loader-options!./src/components/style/Colors.vue?vue&type=script&lang=js&)
vuetifyjs.com:     Module not found: Error: Can't resolve 'vuetify/es5/util/colors' in '/Users/totto357/Private/vuetify/packages/docs/src/components/style'
vuetifyjs.com:      @ ./src/components/style/Colors.vue?vue&type=script&lang=js& (/Users/totto357/Private/vuetify/node_modules/babel-loader/lib!/Users/totto357/Private/vuetify/node_modules/vue-loader/lib??vue-loader-options!./src/components/style/Colors.vue?vue&type=script&lang=js&) 69:0-45 73:14-20
vuetifyjs.com:      @ ./src/components/style/Colors.vue?vue&type=script&lang=js&
vuetifyjs.com:      @ ./src/components/style/Colors.vue
vuetifyjs.com:      @ ./src/components sync \.vue$
vuetifyjs.com:      @ ./src/components/index.js
vuetifyjs.com:      @ ./src/main.js
vuetifyjs.com:      @ ./src/entry-server.js
vuetifyjs.com:     
vuetifyjs.com:     ERROR in ./src/components/doc/Parameters.vue?vue&type=script&lang=js& (/Users/totto357/Private/vuetify/node_modules/babel-loader/lib!/Users/totto357/Private/vuetify/node_modules/vue-loader/lib??vue-loader-options!./src/components/doc/Parameters.vue?vue&type=script&lang=js&)
vuetifyjs.com:     Module not found: Error: Can't resolve 'vuetify/es5/util/helpers' in '/Users/totto357/Private/vuetify/packages/docs/src/components/doc'
vuetifyjs.com:      @ ./src/components/doc/Parameters.vue?vue&type=script&lang=js& (/Users/totto357/Private/vuetify/node_modules/babel-loader/lib!/Users/totto357/Private/vuetify/node_modules/vue-loader/lib??vue-loader-options!./src/components/doc/Parameters.vue?vue&type=script&lang=js&) 73:0-64 141:26-46 142:33-53 146:28-48 150:35-55
vuetifyjs.com:      @ ./src/components/doc/Parameters.vue?vue&type=script&lang=js&
vuetifyjs.com:      @ ./src/components/doc/Parameters.vue
vuetifyjs.com:      @ ./src/components sync \.vue$
vuetifyjs.com:      @ ./src/components/index.js
vuetifyjs.com:      @ ./src/main.js
vuetifyjs.com:      @ ./src/entry-server.js
vuetifyjs.com: ℹ ｢wdm｣: Failed to compile.
```


インストールし直してみたりしたけどうまくいかないので、issueを探してみる。
すると、他にもはまっている人がいたらしく、issueがたってました。

[How to solve dependencies not found #8300](https://github.com/vuetifyjs/vuetify/issues/8300)

そのなかでの回答はこちら。

> in root folder:
> 
```
yarn
yarn build
yarn dev docs // for development
yarn start // for browsing
```

https://github.com/vuetifyjs/vuetify/issues/8300#issuecomment-524555249

`yarn build`しないといけないということでした。（考えてみれば当たり前ですよね。:joy:）
[iOS]Sign in with Apple ハマりそうなポイント

2019/10/01時点

罠だらけだったので少しまとめます。
申し訳ありませんが全体的に自信薄なので裏を取ってほしいです。
ググったらすぐ出ることはあまり書きません。

追記：素晴らしい記事がありました、こちらでいいのでは？
https://qiita.com/mejileben/items/df79024ae93971643271
（上記の参照先 Yahoo!のスライドが非常に詳しいです）
https://www.slideshare.net/techblogyahoo/sign-in-with-apple-ios-idcon/83
https://developer.okta.com/blog/2019/06/04/what-the-heck-is-sign-in-with-apple

### iOS13からで、Xcode11必須

Xcode11必須ということは、Macのアップデートも必須。
はい。

### ソーシャルログインのみのアプリは必須（リジェクト対象）

ソーシャルログインってどこまで？みたいな話が6月ころにあったらしいですが、ガイドラインは改定され、概ね「全部だよ全部！」みたいな雰囲気です。
まだ判例が出ないと何とも言えないですけど。

### iOS12はどうすればいいの？

ボタンを出さない対応で良いのではないか、という意見が多いです。

### iOS12やAndroidやWebでも使いたかったらどうすれば良いのか

Sign in with Apple JSというものがあるそうです。
それでアプリから連携できるのかは未検証です。

### iCloudに繋がっていないと使えない

「Apple IDでサインインしてください」というダイアログが出てきます。

### 1回認証したら、最初のメールアドレス共有／非共有の画面が出せなくなった

設定＞Apple ID＞パスワードとセキュリティ＞Apple IDを使用中のApp＞Stop Using Apple ID で完全にリセットできます。
https://support.apple.com/ja-jp/HT210426

あとは管理側からユーザーを削除できるらしいです（がまだ試せていません）

（ところでこのボタン、ユーザーが押したら以降ログインできなくなるんですよね？）

### emailやfullNameが取得できるのは初回だけ

ASAuthorizationAppleIDProviderを使って、[.fullName, .email]と指定しても取れないようです　ココ↓
https://forums.developer.apple.com/thread/119826
https://forums.developer.apple.com/thread/121496
Simulatorなら違う反応になるという声もありますね。

これはアプリを削除して再インストールしても変わらないので、keychainかなんかに保存しておかなきゃならないってことでしょうか？
もちろんuser識別子は取れます。でもuser識別子も変わるよって書いてるんですが🤔

メールアドレスが変わったらどうなるのか？　→　不明、試しせていません

メールアドレスに依存するな、って言われてる感じがしますねこれ。ユーザーが非共有を設定したらダミーが返ってくるわけですし。

ちなみに同じAppleIDを使用している別の端末で試しても初回状態にはなりませんでした。

### userが1回認証を完全に切った後、再度同じユーザーとしてログインできる？

できてしまいます。これはuserIDが返ってくるためです。

ですが、ASAuthorizationAppleIDCredentialには
>The identifier will remain stable as long as the user is connected with the requesting client.  The value may change upon user disconnecting from the identity provider.

と書かれているので、何かしらのタイミングで変わるのだと思います。
逆に、今のユーザーを破棄して再作成というのは難しそうです。



## 所感

必須ではないアプリは少し情報が出揃うまで待ったほうがいいかもしれません。
問題は必須になるアプリですね。
新規で出すものは既に必須ですし、継続のものも2020年4月までに必要です。
閃いたんですが、メール認証機能を入れたらSign in with Apple回避できるんじゃないですかね？！（逃げ恥）

ユーザー目線での使い勝手は良さそうです。ボタンを押すだけなので。
また特にSNSをあまりやってない人の存在を無視しなくて良くなります。
INVISIBLEとGONEの違い

# はじめに
ボタンの表示/非表示を切り替える際の状態としてVISIBLE、INVISIBLE、GONEがあります。
それらを分けるとVISIBLEは表示、INVISIBLEとGONEは非表示に分けられます。
それでは、INVISIBLEとGONEのどこが違うのでしょうか？

# 違うところ
INVISIBLEとGONEのどちらとも見えなくなることは同じですが、見えなくなった後のレイアウトに違いがあります。

### INVISIBLEの場合
下記のような状態のボタンがあります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472891/c9a409bd-f957-f333-18d0-e4958ccbf54d.png" width="200" height="300">
真ん中の"INVISIBLE"ボタンをタップすると次のようになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472891/d7fc4d64-d77c-8192-6277-82b6e700e18c.png" width="200" height="300">

### GONEの場合
次に、"INVISIBLE"ボタンと"GONE"ボタンを入れ替えた場合、次のようになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472891/12daf763-8b88-19ac-a45b-48eb525b8423.png" width="200" height="300">

# まとめ
INVISIBLEの場合、非表示になっても空白部分はそのままの状態になり、GONEの場合、非表示になると空白部分を詰めるように配置されます。

また、それぞれの日本語の意味を調べてみました。
・INVISIBLE：目に見えない等、そこにはあるけど見えないといった意味で使用されています。
・GONE：消える等、そこにはいないといった意味で使用されています。
日本語で覚えるとわかりやすいかもしれないです！
Djangoで自分専用のコマンドを作る

# 概要
Djangoをやっているといつも以下のようなものを入力することになるかと思います。

    python manage.py runserver

このrunserverの部分は実は自分で独自に用意することができます。
なので、

    python manage.py delete_all_models

とか作って、全てのモデルを消すためのコマンドも作成できます。

ここからは、その方法を紹介します。

# コマンド作成の手順

ここでは簡単な手順のみを紹介するので、より詳細なものについては、調べていただきたく思います。

## 事前準備
コマンドを作成する前に、コマンドを保管する場所をappsのポジションに用意しておくことをお勧めします。
ここからは__commands__というフォルダにコマンドを登録しておく方法を紹介します。

プロジェクトのあるフォルダに以下のように、フォルダを作成します。

    [プロジェクトのディレクトリ]
    ├ manage.py
    ├ [その他自分用のapps諸々]
    └ commands
       └management
         └commands
           ├ [ここにコマンドを定義する]
            ...

次に、コマンドたちを認識させるため、settings.py(人によってはlocal用等分けてるかもしれませんが、そこは合わせてお願いします。)の_INSTALLED_APPS_をいつものように更新します。

```python:settings.py
INSTALLED_APPS = [
    ...,
    "commands",
]
```

これで準備は完了です。

## コマンドの作成
コマンドの作成方法はいたってシンプルで、フォーマット通りに `commands > management > commands` 内にファイルを追加するだけでOKです。

またもう一点重要なポイントは、ここで作る__*ファイル名*__がそのまま__*コマンド名*__になります。
サンプルとしてここからは、__"Hello Real World"__と__print__してくれるコマンドを作成します。

### ファイルの作成
コマンド名は__HelloUnderWorld__としたいと思います。

```python:HelloUnderWorld.py
from django.core.management.base import BaseCommand
class Command(BaseCommand):
	def handle(self, *args, **kwargs):
		print("Hello Real World")
```

__BaseCommand__を継承した__class Command__を作成し、その中の__handle__というメソッドを用意することで、コマンド実行時に呼び出されます。

### コマンドの呼び出し

コマンドを実際に呼び出してみると...

```
>>> python manage.py HelloUnderWorld
Hello Real World
```

と行った具合になります。

# まとめ
以上が最低限のコマンドを作成するための手段となります。
もちろん、ここでモデルをいじる事もできるので、定期的にモデルを確認するためにcronに登録して...なんて事も可能かと思います。

通常のpython同様引数を取る事もできますが、ひとまずはこのあたりで示させていただきます。

気が向きましたら、引数を取る方法も記載したいと思います。

_お疲れさまでした。_
Swiftで変数名に&をつけるとポインタとして使える

知らなかったので、メモしておきます。

# Swiftでポインタを使う？
とある本を読んでたら、
「変数名の前に&をつけることで、その変数のためにメモリ上で確保された領域の開始位置が取得できます」
と書いてありました。

C言語じゃあるまいし、そんなことできんの？　と思って調べてみたら、できるようになってました。

# Swiftの設計思想的にどうなの？
Swiftの言語設計として、「静的型付け言語である」という点があげられます。
これにより、コンパイル時に変数の型は保証されており、
変数の型が合わないことによるエラーはコンパイラが発見できるので、安心！　嬉しい！　というわけなのですが、
ポインタを使うと、正直なんでもできちゃうから危なくね？　と思ったわけです。

実際言語として、プログラマーに低レイヤの処理を一切やらせない設計にすることも可能だとは思うんですが、
それをやってしまうと、ホントにメモリ上を操作しないといけないような処理ができず、言語の制約になってしまいます。

# そこでUnsafePointer\<T>
Swiftはそれを解決するために、UnsafePointer\<T>という型を用意しています。
「Unsafe」と書いてあるので、未熟なプログラマーでもひと目で「こいつは危ない！」とわかりますね。

[UnsafePointer](https://developer.apple.com/documentation/swift/unsafepointer)

低レイヤの話なので、文章だとちょっと難しいですが、
UnsafeMutablePointerの説明にあったサンプルコードが直感的でした。


```swift:サンプルコード
var bytes: [UInt8] = [39, 77, 111, 111, 102, 33, 39, 0]
let uint8Pointer = UnsafeMutablePointer<UInt8>.allocate(capacity: 8)
uint8Pointer.initialize(from: &bytes, count: 8)
```
[UnsafeMutablePointer](https://developer.apple.com/documentation/swift/unsafemutablepointer)

たった3行のコードで、&を使ったポインタの使用例が説明できます。
やってることは、配列の先頭を指定したUnsafeMutablePointerオブジェクトを作っているだけです。

bytesという8Byte符号なしInt型の配列があります。
これは何の変哲もない配列です。
2行目は、UnsafeMutablePointerオブジェクトを生成しています。
この時点ではこのオブジェクトはinitializeおらず、どこのアドレスも指していません。
これをinitializeしているのが、3行目です。
関数定義はこんなん。

```swift:initialize(from:count:)
func initialize(from source: UnsafePointer<Pointee>, count: Int)
```

引数のfromで、**UnsafePointer**を指定します。
MutableがついていないUnsafePointer型です。
countは要素数を入れます。
これで配列のアドレスを好き勝手指定できるポインタが生成できました！　おめでとう！

# ユースケース
サンプルコードだと、普通に配列のsubscript使っても同じことできます。
あくまでサンプルはポインタの生成をわかりやすく説明するためのコードなので、実用性はなさそうです。

実際ポインタを使うのは、Objective-Cからのコード移植とか、
あと画像の色要素を細かくいじるときとか、ユースケースは限られるとは思います。

僕が今回出会ったのは色要素を指定する処理でした。

# もっと詳しく
[素晴らしいSwiftのポインタ型の解説
](https://qiita.com/omochimetaru/items/c95e0d36ae7f1b1a9052)
このあたりがいいかと。
【SpringBoot】プロジェクトの作り方(初心者向け)

## 今回やること
 1. SpringBoot + Java8 + gradle のプロジェクトを作成します。
 2. localhost:8080にクロームでアクセスしたら、「Hello World」を表示します。

## 環境
 - IntelliJ(無料)
 - Mac
 - java8

## Spring Initializrでプロジェクトの原型を作る
 - Spring Initializrの公式ページを開きます。
<img width="709" alt=" 2019-10-01 17.27.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/c9c3b043-70eb-1e12-52cf-32434d68c41b.png">
 - ここで自分に必要な要素を選択して作っていきます。
 <img width="1280" alt=" 2019-10-01 17.28.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/3042bb9f-3694-2fe4-ee68-4edcc176d203.png">
<img width="1280" alt=" 2019-10-01 17.29.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/7bbb7f52-d2cd-8fdf-ba8b-dd190e761e0b.png">
 - 選択が完了したら、Generateボタンをクリックします。
<img width="1280" alt=" 2019-10-01 17.29.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/e2b6bc66-39d2-d381-c97a-979907f31460.png">
 - 自分の指定した場所にzipができるので、解凍します。
<img width="361" alt=" 2019-10-01 17.30.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/aff0473c-7ba4-1bec-8bdf-3f9bd3f59325.png">

## プロジェクトをIntelliJで開く
 - さきほど解凍したフォルダを開きます。
<img width="779" alt=" 2019-10-01 17.31.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/18f96a67-607b-4ced-0e25-5151df45ddfb.png">
 - build.gradleファイルを右クリックして、IntelliJで開きます。
 <img width="768" alt=" 2019-10-01 17.31.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/debd2225-97e4-434e-bf99-c79549fe5cb0.png">
<img width="969" alt=" 2019-10-01 17.32.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/df0d07bb-6ece-2f02-8ba6-a01ed3e0f923.png">

## Hello Worldを表示する
 - 初期で作られているSampleApplicationクラスには何も手を加えずに、  
 SampleApplicationクラスと同階層のディレクトリでControllerクラスを新規作成します。

```HelloController.java
@RestController
public class HelloController {

   @GetMapping("/")
    public String index() {
        return "hello world";
    }

    @PostMapping("/")
    public String index2() {
        return "こんにちは";
    }
```
 - 「localhost:8080」にアクセスするとGETメソッドが呼ばれて、  
 文字が表示されます。
<img width="504" alt=" 2019-10-01 17.52.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/27c948d1-776f-58ca-dc19-5fd85b16de7b.png">

## 注意点
 - thymeleafは不要です。
 - コードに変更を加えた時は、「■(停止)」を押下しないと、  
 多重起動になるのでいちいち消してからRunしましょう「▶」。
 - RestAPIを作りたい時は、「＠Controller」ではなく  
 「＠RestController」をつけましょう。
読んだ本の紹介01「言葉にできるは武器になる」

[「言葉にできる」は武器になる。](https://www.amazon.co.jp/dp/B01LYN9D9S/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)
おすすめ度★★★★☆

## なぜこの本を読んだのか
業務で人にうまく共有ができない、話がうまくまとまらないことに不安を持っていたのでそれに合った本な気がしたので読んでみた
人とのコミュニケーション、いい共有方法を学ぶために読んでみた

## まとめ
- 相手に「伝わった」「伝わってない」はレベルがあって4段階
    - 「不理解・誤解」「理解」「納得」「共感・共鳴」
    - 理解まで行けばいいけど共感・共鳴こそがコミュニケーションの醍醐味

- 伝わり方は人間性の評価につながる
    - 評価は言葉に対するものではなく考えてないな…などの相手の人格に対する物
    - つまりどれだけ言葉を尽くしても相手の心に響かないとだめ

- 言葉には「外に向かう言葉」と「内なる言葉」の２つがある
 - 「言葉が意見を伝える道具であるならば、まず、意見を育てる必要がある」

- 「内なる言葉」で意見を育てて「外に向かう言葉」に変換する
    - つまり　`しっかり頭で考えてから話そうね＾＾`

- 内なる言葉を用いて考えを広め、深め奥行きを持たせていく

- 頭の中だけでは考えきれないのでしっかり「アウトプット」をする
 - 「アウトプット」はその名の通り付箋などに書いていく
 - それを「T字型思考法」で考えを進めていく
 - 一度アウトプットをするので頭が内容を保持する必要がなくなるので他の考えに頭を使用できるようになる


## 感想
「内なる言葉」が不足していたことがわかりそれを意識して共有などができた
アウトプットをした後に「T字型思考法」を実施し実際に「内なる言葉」をまとめることができた

T字型思考法が自分に合っていて話す内容をしっかりまとめられるようになった（気がする）
Rubyの基本操作

###Rubyファイルを実行する

ディレクトリまで移動して、rubyを頭につけて実行するだけ

```
~/environment/app (master) $ ruby rubyfile.rb
```

###ファイル検索

xxxxフォルダ内のテキストファイルを検索して配列に入れる

```.rb
filenames = [] 
Dir.glob('xxxx/*.txt') do |file|
  filenames << file
end
```

###文字列の抜き出しと数値化


```.rb
#左から２つの文字列を取出して数値化
pref=filename[1, 2].to_i
```
tqdmの表示内容をカスタマイズしたい

# なにをするか
- tqdmの表示内容を変えてみる

# 環境
- Python 3.7.0
- tqdm 4.32.1
- GNU bash, バージョン 4.3.48(1)-release (x86_64-pc-linux-gnu)

# 通常

### いつもの

```python:基本
from tqdm import tqdm
from time import sleep

for i in tqdm(range(10)):
    sleep(0.1)
```

```bash:アウトプット
100%|██████████████████████████████████| 10/10 [00:01<00:00,  9.96it/s]
```

### forの中でprintすると大変

```python:printあり
for i in tqdm(range(10)):
    print(i)
    sleep(0.1)
```

```bash:アウトプット  
  0%|                                           | 0/10 [00:00<?, ?it/s]
0
 10%|███▌                               | 1/10 [00:00<00:00,  9.98it/s]
1
 20%|███████                            | 2/10 [00:00<00:00,  9.98it/s]
2
 30%|██████████▌                        | 3/10 [00:00<00:00,  9.97it/s]
3
 40%|██████████████                     | 4/10 [00:00<00:00,  9.97it/s]
4
 50%|█████████████████▌                 | 5/10 [00:00<00:00,  9.97it/s]
5
 60%|█████████████████████              | 6/10 [00:00<00:00,  9.97it/s]
6
 70%|████████████████████████▌          | 7/10 [00:00<00:00,  9.97it/s]
7
 80%|████████████████████████████       | 8/10 [00:00<00:00,  9.97it/s]
8
 90%|███████████████████████████████▌   | 9/10 [00:00<00:00,  9.97it/s]
9
100%|██████████████████████████████████| 10/10 [00:01<00:00,  9.97it/s]
```

# 工夫する

### postfixの中に表示してしまえばいい

```python:tqdmのpostfixに含める
with tqdm(range(10)) as t:
    for i in t:
        sleep(0.1)
        t.postfix = str(i)
        t.update()
```

```bash:アウトプット
100%|███████████████████████████████| 10/10 [00:01<00:00,  9.97it/s, 9]
```

### postfixの別の書き方

```python:別の書き方
with tqdm(range(10)) as t:
    for i in t:
        sleep(0.1)
        t.set_postfix(i=i)
        t.update()
```

```bash:アウトプット
100%|█████████████████████████████| 10/10 [00:01<00:00,  9.94it/s, i=9]
```

### 説明をつける

```python:かっこいい？
with tqdm(range(10), desc="RANGE(10)") as t:
    for i in t:
        sleep(0.1)
        t.set_postfix(i=i)
        t.update()
```

```bash:アウトプット
RANGE(10): 100%|██████████████████| 10/10 [00:01<00:00,  9.95it/s, i=9]
```


### postfixの位置を変えたい

```python:postfixを変えたい
bar_format = "{l_bar}{bar}| {n_fmt}/{total_fmt} [{elapsed}<{remaining}{postfix}{rate_fmt}]"
with tqdm(range(10), desc="RANGE(10)", bar_format=bar_format) as t:
    for i in t:
        sleep(0.1)
        t.set_postfix(i=i)
        t.update()
```

```bash:アウトプット
RANGE(10): 100%|████████████████████| 10/10 [00:01<00:00, i=9 9.95it/s]
```

### プログレスバーを消したい

```python:プログレスバーを消す
bar_format = "{l_bar}{r_bar}"
with tqdm(range(10), desc="RANGE(10)", bar_format=bar_format) as t:
    for i in t:
        sleep(0.1)
        t.set_postfix(i=i)
        t.update()
```

```bash:アウトプット
RANGE(10): 100%|| 10/10 [00:01<00:00,  9.95it/s, i=9]
```

### bar_formatの全体（メモのため）

```python:{l_bar}{bar}{r_bar}と同じ
{desc}: {percentage:3.0f}%|{bar}| {n_fmt}/{total_fmt} [{elapsed}<{remaining}{rate_fmt}{postfix}]
```

```python:その他variables
n, total, elapsed_s, ncols, desc, unit, rate, rate_fmt, rate_noinv, rate_noinv_fmt, rate_inv, rate_inv_fmt, unit_divisor, remaining_s
```

# 実はshにも組み込める

```bash:tqdm
$ seq 10 | tqdm | wc -l
100it [00:00, 81284.96it/s]
100
```

# もっと知りたい
- [公式](https://github.com/tqdm/tqdm)へどうぞ
2段階認証のgithubアカウントのssh設定【備忘録】



[参考文献]
http://tusukuru.hatenablog.com/entry/2018/08/29/021651
https://ameblo.jp/oregano-blog/entry-11548442168.html



ssh-agentに秘密鍵の登録作業が必要らしい。ssh-addコマンドでできる。引数に秘密鍵を指定する。また、鍵のパスフレーズの入力が必要。

```
$ ssh-add ~/.ssh/id_git_rsa
Enter passphrase for /home/hogeuser/.ssh/github_id_rsa:
Identity added: /home/hogeuser/.ssh/github_id_rsa (/home/hogeuser/.ssh/github_id_rsa)
```


接続確認

```
$ ssh -T git@github.com
Hi xxxxxxxxx! You've successfully authenticated, but GitHub does not provide shell access.
```

意外と他のサイトでは省略していて`Permission denied (publickey).`と弾かれがちなので気をつける。
vue.js /newを呼んで欲しいのに/:idを呼んでしまう場合の原因

# /newを呼んで欲しいのに/:idを呼んでしまう場合の原因

RailsとVue.jsを使用。

router.jsに、下記のように各コンポーネントへのルーティングを設定していた。

```js:router.js

    { path: '/expenses', component: Expense },
    { path: '/expenses/:id', name: 'expenseShow', component: ExpenseShow },
    { path: '/expenses/:id/edit', name: 'expenseEdit', component: ExpenseEdit },
    { path: '/expenses/new', name: 'expenseNew', component: ExpenseNew },
```

/expenses(一覧)から/expenses/new(登録ページ)へは問題なく遷移出来る。

が、
/expenses/new(登録ページ)でリロードをすると、
なぜかパスは **/expenses/new** のままだが **expenseShow(/expenses/:id)** のコンポーネントが読み込まれる、という現象が発生。

調べると、**/new** がリクエストパラメータとして見なされ、

```
Started GET "/expenses/new" for ::1 at 2019-10-01 17:06:53 +0900
17:06:53 web.1       | Processing by HomeController#index as HTML
17:06:53 web.1       |   Parameters: {"id"=>"new"} <==== これ
```

結果、**/expenses/:id** が適用され、
**expenseShow**のコンポーネントが読み込まれていた。

なので、**/expenses/new**を **/expenses/:id** より手前に持ってくるよう順番を入れ替えることで解消した。

```js:router.js
    { path: '/expenses', component: Expense },
    
    // /expenses/newを手前に
    { path: '/expenses/new', name: 'expenseNew', component: ExpenseNew },

    { path: '/expenses/:id', name: 'expenseShow', component: ExpenseShow },
    { path: '/expenses/:id/edit', name: 'expenseEdit', component: ExpenseEdit },
```
OCI DatabaseでのData Guardの作り方（VM）

# 下準備

* Data Guardを構成するサブネットのセキュリティ・リストに宛先1521ポートを通すイングレス・ルールを作成する

# スタンバイDB作成

* 「DBシステムの詳細」画面の「データベース」の右にある縦の3つの点のボタンをクリックし、「Data Guardの有効化」

![dataguard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23861/b471af3f-6a59-3296-532b-1d1697b31ca5.png)

*  作成するAD、サブネット、ホスト名接頭辞、データベース管理パスワードを設定
  * コンソールからは、保護モードは「Max Performance」固定、トランスポート・タイプは「Async」固定で変更不可

以上。

# その他

* プライマリがRACだと、スタンバイもRACになる。
* スイッチオーバー、フェイルオーバーは画面から実行可能
HTML 複数のクラス名をつける

## Memo HTML 複数のクラス名をつける

### 単一の場合
```html:sample
<div class="class1">
```
### 複数の場合
ダブルクォート内で半角スペースを挿入する事で複数のクラス名をつける事が可能

```html:sample
<div class="class1 class2 class3">
```