OmniAICreator/Qiita-1.07M huggingface dataset:
【Vue.js】フェードイン・フェードアウト（トランジション）の使い方

#【Vue.js】フェードイン・フェードアウト（トランジション）の使い方

Vue.jsに用意されているtransitionコンポーネントを使うフェードインやフェードアウトなどのtransitionを設定することができる。


公式ページ
https://jp.vuejs.org/v2/guide/transitions.html


##目次

1. [トランジションの方法](#トランジションの方法)
2. [クラスの適用フェーズ](#クラスの適用フェーズ)
3. [適用されるクラスの種類](#適用されるクラスの種類)
4. [クラスの命名ルール](#クラスの命名ルール)
5. [CSSの設定](#cssの設定)
6. [トランジションの実例](#トランジションの実例)



<br>
##トランジションの方法
条件を満たすと、特定のclass属性が付与される。このクラス属性に対してcssスタイルを設定する。

- 使えるディレクティブ： `v-show`, `v-if`
- 要素をtransitionタグで囲む
    - 中のタグは一つのみ。
    - 複数ある場合は上の要素のみ表示される。
- 要素の状態によって専用のクラスが付与される。




<br>
##クラスの適用フェーズ
要素の表示・非表示、トランジションの段階によってクラスが付与される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/faf64652-ff24-6f4e-e491-7a60d6294c3f.png)



<br>
##適用されるクラスの種類
適用されるクラスは全部で６種類。enterとleaveに２分される。

- enter: true(非表示→表示)の時に適用されるクラス
- leave: false(表示→非表示)の時に適用されるクラス

| クラス名 | 概要 |
|:-:|:--|
| v-enter  | 開始状態。trueになった瞬間に適用される  |
| v-enter-active  | 活性状態。trueになった瞬間から、完全に表示されるまで適用される  |
| v-enter-to  | 終了状態。trueによる遷移が終わった瞬間に適用される  |
| v-leave  | 開始状態。falseが適用された瞬間に適用される  |
| v-leave-active  | 遷移状態。falseによる遷移の開始から終了するまで適用される  |
| v-leave-to  | 終了状態。falseによる遷移が完全した瞬間に適用される  |



<br>
##クラスの命名ルール
transitionタグには `name属性` で名前をつけることができる。

name属性がないデフォルト状態ではクラス名の冒頭に`v-`がつく。

name属性を記述した場合は、`v-`がname属性の値に置き換わる。

**①name属性がない場合**
`<transition>`
　　↓
`v-enter`



**②name属性がある場合**
`<transition name="trans">`
　　↓
`trans-enter`




<br>
##CSSの設定
効果の持続期間は`v-enter-active`, `v-leave-active`に適用する。

透過度(opacity)は`v-enter`と`v-enter-leave`に適用する。

```css:css設定の例
.v-enter-active, .v-leave-active {
    transition: opacity 1s
}

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


##トランジションの実例

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/771a92f2-dce5-ab81-11d4-5f08f4152632.png)|
|:--|


```js:.js
var app = new Vue({
    el:'#app',
    data:{
        isShown: false
    }
})
```

```html:.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app">

        <div>
            <button @click="isShown =! isShown">表示切り替え</button>
        </div>
        
        <transition name="vshow">
            <p v-show="isShown">
                v-show="isShown"
            </p>
        </transition>

        <transition name="vif">
            <p v-if="isShown">
                v-if="isShown"
            </p>
        </transition>

        <br><hr>
        <p>isShownプロパティの値：{{isShown}}</p>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="script.js"></script>
</body>
</html>
```


```css:.css
.vshow-enter-active, .vshow-leave-active{
    transition: opacity 1s
}

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

.vif-enter-active, .vif-leave-active{
    transition: opacity 2s
}

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

```



<br>
以上。
新卒プログラマの学習ログ　〜　其の四　〜

#Kotlinのあれこれ
Android StudioでKotlinを使用しながら、Androidアプリ開発に関して学んでいます。
Javaの基礎知識があればKotlinの学習は必要ないと上司から言われていましたが、全然そんなことないと思っています。(泣)

確かにオブジェクト思考を前提としたプログラミングではありますが、Javaと比較してKotlinは型推定が常識のように行われるためにいきなりライブラリの仕様等を見ると心が折れます。

#基礎知識
Kotlinでは関数も、数値や文字列のなどの値のようにして扱うことができます。
そのため、変数に代入したり関数の引数として与えたり、関数の結果として返したりできます。

このような性質のオブジェクトは第一級オブジェクトに分類されます。


#よくみる "::関数名" とは？

Kotlinのコードを見ているとよく**::関数名**のような記述をよく見ます。
以下のコードをご覧ください。

```Sample.kt

fun square(i : Int): Int = i * i

fun main(){
   val functionObject = ::square
   println(functionObject(5))
   println(square(5))
}

```

前述したように=（イコール）を用いて関数squareを定義していますね。
この関数は引数にInt（数字）を受け取ってInt（数字）を返す関数ですね。

これをmainでは変数`functionObject`の初期定義を`::square`で行っています。
出力は以下のようになります。
> ..> 25
> ..> 25


squareの引数に5を与えた結果の25が二回出力されていますね！
::squareで関数オブジェクトを生成し、その結果を`functionObject`に与えているので、
関数squareと同じ動作を実行できるようになっていますね。

どちらも引数に数値を受け取って数値を返す関数になっていることが確認できますね。
これが関数オブジェクトと言われるものの基本となる知識です。

## 最後に
JavaやC言語でなれている人にとってはあまり馴染みのない書き方ですね。
次回はこの関数オブジェクトを使用して、関数を引数に持つ関数**高階関数**に関して記事を書いてみたいと思います。




#とりあえず。。。
メモ代わりに書いていますが、これから理解が深まれば書き足していきます。
いつか誰かのお役に立てると嬉しいですね。

# 初学者から一人前まで、、、
ここでは一人前のプログラマの定義を
「おおよそ自力で様々なツールを活用しながら、ある程度思い通りの実装ができること」
とします。

また、人生においてプログラミングに向き合う時間として、現時点で2000時間取り組めればある程度の基盤が備わると仮定しています。
（言語やツールに依存しない思考法や情報収集能力）

プログラミングは大学で学んで来ましたが、特に根詰めてやってきていないので、ノーカウントとして取り組みます。

現在までの学習時間
**およそ410時間**
どんどん更新していきます。
SwiftでGoogleのMaterialDesignを簡単に使ってみる

# 注意書き
今回はあくまで**簡単(機能する程度)に**実装するだけですので、[Usage](https://material.io/develop/ios/components/textfields)に書かれていることとは違うと思いますが、ゴリゴリに実装したい方は、この記事を読まず[公式ガイドのUsage](https://material.io/develop/ios/components/textfields)を熟読することをおすすめします。
※こんな感じで少し雑な記事になると思いますがお許しください。。。


# 今回使うライブラリ
今回使うのは、GoogleがデザインしたMaterialDesignです。
iOS(Swift,Objective-C)だけでなく、Android(Java,Kotolin),Web(HTML,CSS,JavaScript?)もあります。
(詳しくは[こちら](https://material.io/collections/get-started/))
パーツは [material.io/components](https://material.io/components) から探せるので、気に入ったものを探してみてください。
その中でも今回は[TextField](https://material.io/develop/ios/components/textfields)を使いたいと思います。


# Podライブラリ導入
・Podファイルの生成

```
$ pod init
```

・Podファイルに追加

```
pod 'MaterialComponents/TextFields'
```

・Podインストール

```
$ pod install
```

# 使い方
・`.workspace`ファイルを開きます。

・ストーリーボードに普通のUITextFieldを配置します。
![スクリーンショット 2020-08-06 12.38.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/97df6f55-e12b-c776-ce0d-dacf279972f0.png)
![スクリーンショット 2020-08-06 12.38.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/712db68d-d0b3-b1b5-1a1f-52e0426c6e93.png)

・`ViewController.swift`にMaterialComponents.MaterialTextFieldsをインポートします。

```Swift:ViewController.swift
import MaterialComponents.MaterialTextFields
```

・先ほどStoryboardに配置したUITextFieldとコードを関連付けをします。

```Swift:ViewController.swift
@IBOutlet weak var GoogleTextField: UITextField!
```

・Storyboardに戻り、TextFieldのカスタムクラスを、`MDCTextField`に変更します。
![スクリーンショット 2020-08-06 12.38.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/8339ba0d-d29e-6ff3-b147-2f397308d5d2.png)

・こんな感じで実装できました！
![名称未設定2.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/431ce55b-6dfd-94ba-6b5b-93d5c12125c4.jpeg)
しっかり表示されました！

・背景にこんな感じの入力する項目(Placeholder)みたいなのをつけたいという方は・・・
<img width="375" alt="Simulator Screen Shot - iPhone 11 Pro - 2020-08-06 at 18.58.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/37a9ba46-c6a7-d109-6162-89af7d185743.png">

・Placeholderの項目を変更してみてください！
![qiita_placeholder_fixed_screenshot.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/9b7b7532-c72a-fb74-75f3-a1c796963558.jpeg)



# サンプルGIF

![ezgif.com-video-to-gif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/2501bcc4-6612-1d55-0ce9-6132bfb8a47d.gif)

# サンプルプロジェクト
https://github.com/rea-sna/GoogleDesignSample
Matplotlib 美しいグラフの描画


#実行環境
- Python 3.6.8
- Matplotlib 3.1.2

#はじめに
matplotlibのスタイルには、
pyplot API と オブジェクト指向APIの2つがあり、pyplot APIは通常、オブジェクト指向APIよりも柔軟性が低くなる。

[Pyplot tutorial](https://matplotlib.org/tutorials/introductory/pyplot.html)

#例１：折れ線グラフの描画
```python
import numpy as np
import matplotlib.pyplot as plt

# データの作成
def func(x):
    return 100*x*(1-x)

x1 = np.arange(0,1.01, 0.01)
y1 = func(x1)
x2 = np.arange(0, 1.1, 0.1)
y2 = x2 * 20
```

単純に折れ線グラフを描画する．

```python
#　グラフの描画
plt.plot(x1, y1)
plt.plot(x2, y2)
plt.show()
```
![naive.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304572/78ebcb28-bbb5-f136-9cde-9ae80cae7b7a.png)

ここに，軸のラベルと凡例を追加する．

```python
# X軸、Y軸のラベル
plt.xlabel('X-AXIS')
plt.ylabel('Y-AXIS')

# グラフの描画
plt.plot(x1, y1, label='LABEL1')
plt.plot(x2, y2, label='LABEL2')

# 凡例
plt.legend()

# 表示
plt.show()
```
![add_label.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304572/f98ae6ee-8894-a382-bf0e-9ff736c417ad.png)

さらに，軸ラベル，目盛り，凡例の文字サイズを拡大する．

```python
# サイズ変更
plt.figure(figsize=(6,4))

# X軸、Y軸のラベル
plt.xlabel('X-AXIS',fontsize=24,fontfamily='Times New Roman')
plt.ylabel('Y-AXIS',fontsize=24,fontfamily='Times New Roman')

# 目盛りを内側に向ける
plt.tick_params(direction='in',labelsize=16)

# グラフの描画
#   マーカーの種類は 'o': 円, 'D': ひし形, 's': 正方形
plt.plot(x1, y1, label='LABEL1', c='blue', linewidth=2)
plt.plot(x2, y2, label='LABEL2', c='red', linewidth=2, marker='o', markersize=10)

# 凡例
leg = plt.legend(
    loc='upper left',  #位置 lower/center/upper, left/center/right で指定
    fontsize=18, # フォントサイズ
    ncol=1, # 列数を指定
    fancybox=False, # Trueだと角が丸くなる, デフォルトはTrue
    edgecolor='black' # 境界線の色
)
leg.get_frame().set_alpha(1.0) # 凡例の矩形を不透明にする, デフォルトは半透明になっている

# 表示
plt.show()
```
![change_size.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304572/67507a9c-c643-2970-01aa-ec2badec1853.png)


さらにさらに，拡張性を考慮してsubplotを用いる．

```python
# サイズ変更
fig = plt.figure(figsize=(6,4))
ax = plt.subplot(111)

# X軸、Y軸のラベル
ax.set_xlabel('X-AXIS',fontsize=24,fontfamily='Times New Roman')
ax.set_ylabel('Y-AXIS',fontsize=24,fontfamily='Times New Roman')

# 目盛りを内側に向ける
ax.tick_params(direction='in',labelsize=16)

# グラフの描画
#   マーカーの種類は 'o': 円, 'D': ひし形, 's': 正方形
ax.plot(x1, y1, label='LABEL1', c='blue', linewidth=2)
ax.plot(x2, y2, label='LABEL2', c='red', linewidth=2, marker='o', markersize=10)

# 凡例
leg = plt.legend(
    loc='upper left',  #位置 lower/center/upper, left/center/right で指定
    fontsize=18, # フォントサイズ
    ncol=1, # 列数を指定
    fancybox=False, # Trueだと角が丸くなる, デフォルトはTrue
    edgecolor='black' # 境界線の色
)
leg.get_frame().set_alpha(1.0) # 凡例の矩形を不透明にする, デフォルトは半透明になっている
# グリッド線の表示，　デフォルトでは透明度0%, ラインスタイルを破線にする
ax.grid(alpha=0.2,ls='--')

# 表示
fig.show()
fig.savefig('subplot',bbox_inches='tight')
```
![subplot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304572/4ced1271-8d37-ccba-93db-b245ce7f334a.png)
【webpacker】Rails6.0でのBootstrap, jQueryの導入方法まとめ

Railsへの​BootstrapとjQuery導入方法は、

- 今までもあったGemを使った方法
- 6.0からのWebpackerを使った方法

と2つあるが、今回は*後者*の方を採用する。

#参考対象者
- Rails6.0で、bootstrapやjQueryを使いたいなと思っている方

#環境

```
$ rails -v
Rails 6.0.3.1
```
```
$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]
```

#Webpakerでパッケージを管理


```
$ yarn install jquery popper.js bootstrap
```

Railsでは、BootstrapはjQueryとpopper.jsというパッケージに依存しているため、一緒にインストールする。
また、パッケージ類は**node_modulesディレクトリ以下**にインストールされる。

#bootstrapの導入

###Webpackの設定

```config/webpack/environment.js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment
```

jQueryやpopperを事前に読み込むように設定している。
こうすることで、わざわざ**requireや@import**で読み込む必要がなくなる。


###bootstrap製のjavascriptを読み込む

```app/javascripts/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('bootstrap/dist/js/bootstrap.min.js')
```

###bootstrapのCSSを読み込む

```app/assets/stylesheets/application.scss
 *= require bootstrap/dist/css/bootstrap.min.css
 *= require_tree .
 *= require_self
```

Bootstrapの読み込みは、**自分自身で書いたcss（*= require_self）**よりも前に書き込む必要がある。



#jQueryの導入


###jQueryを読み込む

```app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require('bootstrap/dist/js/bootstrap.min.js')
```



#Usage

###自身のJavaScriptファイルを読み込む

```new.html.erb
<div>
  //省略
  <%= javascript_pack_tag 'users/new' %>
</div>
```

javascript/packsディレクトリ配下の、users/new.jsファイルを呼び出すことでjsファイルを使えるようにする。
JavaBeansとBean

#JavaBeansとBeanとは何か？違いを理解していなかったので調べてまとめる。

##JavaBeans（ジャバ ビーンズ）とは
Javaで書かれた再利用可能なソフトウェアコンポーネントまたはその**技術仕様**のこと。


- 操作するデータのことをプロパティと呼ぶ。<br>
JavaBeansはあくまで仕様なので以下のような規則があります。


###JavaBeansの主な仕様(Beanが従うべき仕様や規約)
- クラスをpublicで指定する
- プロパティ(クラスのメンバ変数)はprivateで指定する
- 引数なしのpublic指定なコンストラクタを定義する
- プロパティにアクセスするためのgetter、setterメソッドを用意する
- 外部からプロパティにアクセスするためのいわゆるgetterメソッド/setterメソッドなどメソッド名が命名規則に則っている
- java.io.Serializableインタフェースを実装する(必須ではない)
- パッケージ化する
- クラス名の最後は慣例的にBeanにする


##Beanとは
- JavaBeansやEnterprise JavaBeans（EJB）の仕様に則って開発された、<br>部品化された再利用可能な**Javaプログラム**。


- 外部の他のプログラムから容易に利用できるよう共通化された仕様に則って開発されたプログラムで、コードの共有や再利用、機能毎の分離や役割分担、汎用的なプログラム部品の流通などに利用されている。



###JavaBeans仕様に則ってコーディングするメリットは？

結論から言うと、JavaBeanを使うメリットは「データの意図しない書き換えを防げること」です。

###解説
各データ属性はprivateであるため、外部からはアクセスできません。
そのため、必ずインスタンスの生成をしてから、セッターを呼ばなければデータ属性を書き換えられない仕組みです。
このようにして外部からデータ属性を保護することをカプセル化と呼びます。



参考にした記事（いつもありがとうございます）
---
[JavaBeansとは？仕様や使い方、永続化について解説](https://www.sejuku.net/blog/60374)
[JavaBeansの使用方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/34816)
[Bean](http://e-words.jp/w/Bean.html)
画像・Gif動画を使ってReadmeを彩ろう

# ポートフォリオの重要性
Readmeは自分が作ったポートフォリオの説明書。

如何に良いポートフォリオでも、Readmeが書かれていないが故に人事担当者に離脱されてしまう事も有り得る。
せっかく自分のポートフォリオページに来てもらったのに、それでは機会ロスになってしまう。

しかし、実際にReadmeをどう書いていいか分からないがプログラミングの学習始めの頃はあったので、備忘録の意味も兼ねて記載する。

記載するものとしては、
開発環境に加えて、実装した機能と、データベースの内容を伝える為に、
テーブルの種類やアソシエーションの記述が必須と感じる。


### 開発環境
- Ruby 2.6.5
- Ruby on Rails 6.0.0
- MySQL 0.5.3 (DB)
- Github
- Visual Studio Code

### 実装機能
- ログイン機能
- 投稿機能
- 画像ファイルのアップロード機能

### commentsテーブル
|Column|Type|Options|
|------|----|-------|
|text|text|null: false, foreign_key: true|
|user_id |integer|null: false, foreign_key: true|
|tweet_id|integer|null: false, foreign_key: true|

### Association
- has_many :tweets
- belongs_to :user

# 文字だけだと寂しい
開発環境、実装機能、DB構成を書く事で印象は変わるが、
上記だけだと寂しい感が否めないと自分のReadmeを書いていて思った。

そこで画像や短いGif動画を使えばReadmeに彩りが出て映えると考えた。
だが自分で撮影したスクリーンショットや動画をそのまま使おうとしても使えない。
何故なら拡張子が違うから。

Vscodeのように実際にコードを記載していくなら末尾の拡張子を任意の文字列に変える事で、ファイル形式にも反映される。
しかしそれはGithubにまでは適用されてくれない。

適用されてくれないなら仕方ない。適用されるように変換するまでだ。

# ❶画像の変換にissueを使う
Githubの中の任意のリポジトリに入るとissueの項目があるので、
まずはその中のnew issueを押下する。
<img width="1308" alt="issue.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638561/2ad89bad-e0a1-9af7-eeea-d1ddf5c2f85d.png">

次に変換したい画像を赤枠内にドラッグ&ドロップします。
<img width="980" alt="issue2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638561/226c7c44-5d4d-07e8-dd01-5172217007c2.png">

変換されたコードが出現します。
<img width="968" alt="issue3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638561/c1fdefb1-46c0-237b-763f-7a5e212a545a.png">

あとは変換されたコードをReadmeにコピー&ペーストすれば画像は表示されてくれます。これで文章だけよりも遥かにReadmeのイメージが伝わりやすくなります。
_________________________________________________________________________

# ❷動画の変換にはffmpegを使おう

続いて短めのgif動画をReadmeに載せる場合です。

個人的にですが無料版では7秒の時間制限のあるGyazoよりも、
デフォルトでMacにインストールされているQuickTime Playerで録画する方が良いと思います。但し時間が長くなり過ぎないように注意は必要です。

参考記事
https://qiita.com/syamaoka/items/4d4054cd75df00460925

まずは記事内にも記載がありますが、homebrewでffmpegをインストールします。
このツールを使えば、mov形式の画像をgif形式に変換できます。
現状、Githubはmov形式に対応していない為。


というわけで、下記コードをターミナルで入力します。

```
brew install ffmpeg
```
インストールは少し時間がかかるので気長に待ちましょう。

インストールが終わったらいよいよ動画形式の変換です。
動画データのあるディレクトリに移動して下記のコマンドを入力すればOKです。

```
ffmpeg -i <動画データの名前>.mov -vf scale=720:-1 -r 10 <動画データの名前>.gif
```
**※↑名前を囲っている<>は必要ありません。**

**補足**
※変換コード内のscaleは表示サイズです。
scaleは記述しなくても問題ありませんが、表示されるサイズがかなり小さくなってしまうので適宜サイズの指定を行ってください。

※もしエラーが起きる場合はimagemagickがインストールされていない事が原因である可能性があります。必要に応じて、別途インストールをして下さい。

参考ページ
https://github.com/thoughtbot/paperclip/wiki/How-to-fix-NoMethodError-after-ImageMagick-Update-(OSX-Homebrew)


動画データがgif形式に変換できたら、あとは先ほどの画像と同じくissueにコピー&ペーストしたものをReadmeに貼り付ければOKです。

![tweets.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638561/eecb20fc-0e94-c834-fb38-f8af0367ca39.gif)


Readmeに動画が配置できたので、これでReadmeにやってきた人に上記のような動画が見れるようになります。

初めてQiita記事を書いてみたので読みづらかったり、見づらい点があるかと思いますがご容赦願います。

https://github.com/athlaliel/PanLove/blob/master/README.md
HtmlタグでStringを装飾する方法


- htmlタグをStringで書いて
- そのStringをData変換
- NSMutableAttributedString(data:options:documentAttributes)で装飾する
 - options に documentType.html を指定


```Swift
let str = "<i>testText</i>"
let stringWithBaseFont = NSString(format:"<span style=\"font-family: '-apple-system', 'HelveticaNeue'; font-size: \(22)\">%@</span>" as NSString, str)

stringWithBaseFont.data(using: String.Encoding.unicode.rawValue, allowLossyConversion: true)!

if let attributedString = try? NSMutableAttributedString(
    data: stringWithBaseFont.data(using: String.Encoding.unicode.rawValue, allowLossyConversion: true)!,
    options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding: String.Encoding.utf8.rawValue],
    documentAttributes: nil) {
    attributedString.addAttribute(.foregroundColor, value: UIColor.red, range: NSRange(location: 0, length: attributedString.length))
}
```
【OpenRPA】SSH接続するカスタムアクティビティを作ってみた

OpenRPAでSSH接続をしてみたかったのですが、現時点のバージョンにSSHのアクティビティがなかったので、作ってみました。

# どうやって作る？

OpenRPAの[wiki](https://openrpa.openrpa.dk/pages/plugin-model)を見ると

> The robot uses Microsoft Workflow Foundation ( .NET version 4.6.2 ). A lot of different products uses this platform ( even other RPA products, for instance UIPath), and in many cases activities created for one platform will also work here. Say someone created an activity that reads the content of a PDF file and inserted that into a string, that activity would most likely also work inside OpenRPA.

> ロボットはMicrosoft Workflow Foundation（.NETバージョン4.6.2）を使用します。多くの異なる製品がこのプラットフォームを使用しており（UIPathなどの他のRPA製品でさえ）、多くの場合、1つのプラットフォーム用に作成されたアクティビティもここで機能します。誰かがPDFファイルのコンテンツを読み取り、それを文字列に挿入するアクティビティを作成したとします。そのアクティビティはおそらくOpenRPA内でも機能します。

要は、「Workflow Foundationベースで作られたものならOpenRPAでもたぶん使えるよ！」とのこと。
逆に言えば、UiPathのカスタムアクティビティの作成方法がわかれば、OpenRPAのカスタムアクティビティも作れるはず！

# 参考にした記事

[【UiPath】カスタムアクティビティの作成（事前準備と実践初級）](https://qiita.com/UmegayaRollcake/items/c9ff9a01b101ba9193fc)
[UiPath Studioで使用するカスタムアクティビティの作成方法](https://qiita.com/masatomix/items/1f63513e80313a99faeb)
[UiPath Studioで使用するカスタムアクティビティの作成方法 つづき(GUI構築)](https://qiita.com/masatomix/items/e75598f73b0e019044ac)

UiPathのカスタムアクティビティの作成方法として、これらの記事を参考にしました。

OpenRPAのカスタムアクティビティを作成する場合も、ほとんど上記と同じ内容で作成できます。
ただし、現在のOpenRPAではNuGetに対応していないため、NuGet関連の手順については無視します。

# というわけでできたもの

https://github.com/pmt-iwata/RunCommandActivity

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/dded0989-66fa-8690-0173-1a0fe52d7730.png)

# インストール方法

Visual Studioでビルドすると、Releaseの下に

+ OpenRPA.PMTech.SSH.dll
+ Renci.SshNet.dll

ができるので、OpenRPAのフォルダ(C:\Program Files\OpenRPA)にコピーしてください。

# ちょっとだけ解説

アクティビティ自体の作り方は、上記の参考記事の通りに作っただけなので、解説は省きます。

## SSH接続

SSH接続については、[SSH.NET](https://github.com/sshnet/SSH.NET)というライブラリを使っています。
Visual StudioのNuGetパッケージマネージャからダウンロードして使っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/611963f6-931d-cafd-93b9-790601c652f7.png)

### SSHパスワード問題

こんな感じで接続情報作ってるんですが、パスワードがプレーンテキストなんですよね。

``` C#:RunCommandActivity.cs

public InArgument<string> Password { get; set; }

ConnectionInfo con = new ConnectionInfo(host, port, user, ProxyTypes.None, null, 0, null, null,
    new AuthenticationMethod[] {
        new PasswordAuthenticationMethod(user, password) });

```

`SecureString`使ってあげればプレーンテキストは回避できると思うのですが、テストがどうしてもエラーになってしまって解決できませんでした。

`PasswordAuthenticationMethod`を使っているのでユーザー/パスワードの認証しかできませんが、`PrivateKeyAuthenticationMethod`を使えば秘密鍵方式の認証もできそうなので、プレーンテキスト問題と合わせて今後の課題かなー。

# おわりに

一応動作確認はしていますが、ちゃんとテストはしていません。
（SSH.NET呼んでるだけだから大丈夫だとおもうけど）

今回作ったのは単発のアクティビティなんですが、ほんとはスコープみたいな感じでやりたかったんですよね。
（最初に接続先だけ定義して、複数コマンド連続実行みたいな）
このあたりもうちょっと調べて、機能追加してみようと思います。
コルモゴロフスケールを返す関数

[コルモゴロフスケール](https://www.cradle.co.jp/media/column/a423)

第1引数：'eta'，'v'，'tau'のどれか
第2引数：代表速度
第3引数：代表長さ
第4引数：動粘性係数(デフォルトで290Kの水の動粘性係数）←無くてもよい

```matlab:kolmogorov.m
function ANS = kolmogorov(varargin)
% how to use
% example kolmogorov(key , u, l, nu)
% default nu = 1.087e-6 <-- Temperature= 290K
% key ; 'eta' or 'v', 'tau'
%      length   velocity time
% u : float flow speed
% l : float charactristic linear dimension
% nu: float kinematic viscosity

narginchk(3, 4)
[key, u, l] = varargin{1:3};

nu = 1.087e-6;
if nargin==4
    nu = varargin{end};
end
eps=u^3/l;%m^2/s^3
eta=(nu^3/eps)^(1/4);
v=(eps * nu)^(1/4);
tau = (nu / eps )^1/2;

switch key
    case 'eta'
        ANS = eta;
    case 'v'
        ANS = v;
    case 'tau'
        ANS = tau;
    otherwise
        meg='ERROR:Please input eta or v, tau for first arugument';
        error(meg)
end
```

varginやらnarginchkを使ってみたかった笑

---
備忘録用に書いてあります．
間違いや改善点があれば教えてください！！
matplotlib で自作 colormap を作るメモ

## 背景

独自の colormap がほしい. 画像の false color 表示で, 値の特定の領域だけ色を変えたい(ハイライトさせたい)など.
contourf はうまくいかないっぽい.
 
## 自作する

matplotlibのcolormapのRGB情報取得と関連操作
https://qiita.com/HidKamiya/items/524d77e3b53a13849f1a

ありがとうございます.

`LinearSegmentedColormap` で from_list で作ればいけました!
 


## colormap 反転のメモ

Preset では, `_r` をあとにつけると反転する
MACでnodebrew(とNode.js)を入れたい

自分windowsユーザーなのにMacで入れたいとのことで、人に教えないといけない感じになり、自分のMacで試してみてできたので備忘録残します。
ターミナルMac便利ですね。。

基本的には
[NodebrewでNodeをインストールする - Qiita](https://qiita.com/hiro266/items/fb1d37c180d6cbc696c8)
こちらの記事を参考にさせてもらいましたが、自分の環境だとちょっと出来ない箇所もあったので出来なかった分ここに残しておく感じです。

## Homebrewを入れる
[Homebrew](https://brew.sh/index_ja)
こちらからいれましょう
```/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
ターミナルで叩いてインストール

## NPMとNode.jsは削除しておく
基本的にはnpm使わないので削除します。
https://nabewakashi.com/how-to-switch-to-nodebrew
こちらの記事を参考にしました。
sudo使うときは気を付けましょう。
ですが、nodeが削除できてなかったのでおそらくゴミが残っている感じだったので、

```
$ which node
/usr/local/bin/node
$ rm -rf /usr/local/bin/node \
>     node_modules
```
こちらで削除したらnodeが消えました。

## nodebrewをインストール
インストール
`brew install nodebrew`

確認
`nodebrew -v`
バージョンが表示されればOK。


## bashが無かったら入れる
最初、MACですと.bash_profileがないそうなので、作成します。
https://qiita.com/k3ntar0/items/eb8cdbd8eba9da388def
こちら非常に助かりました。

## pathを通しておく
.bash_profileを開いたら
`export PATH=$HOME/.nodebrew/current/bin:$PATH`
こちらでパスを通します
保存したら
`source ~/.bash_profile`
で更新して反映します。

## セットアップ
`nodebrew setup`
これやらないとインストールできないらしいです

## Node.jsを入れます
・バージョン確認
`nodebrew ls-remote`

・指定したバージョンのインストール
`nodebrew install-binary <version>`

・インストールしたバージョンのリスト
`nodebrew ls`

・指定したバージョンを指定
`nodebrew use <version>`


`node -v`
で入ってればOK

#### 参考文献
* https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498
* https://nabewakashi.com/how-to-switch-to-nodebrew
* https://brew.sh/index_ja
* https://qiita.com/k3ntar0/items/eb8cdbd8eba9da388def
DynamoDB@boto3のクエリの書き方メモ

DynamoDBのクエリの書き方＠boto3メモ。忘れがちなあなたに。

## DynamoDBのテーブルの項目定義
パーティションキー：primary_id
ソートキー　　　　：sort_id
属性１　　　　　　：timestamp

## コード

```python
a = client.query(
    TableName='table-name',
    # Limit=500,
    KeyConditionExpression='primary_id = :id and begins_with(sort_id, :sort_id)', # 主キー向けのクエリ
    # FilterExpression='#tstamp > :st and #tstamp <= :ed', # 属性向けのクエリ
    # ExpressionAttributeNames={
    #     '#tstamp': 'timestamp' # timestampが予約語になっていて使えなので代替する
    # },
    ExpressionAttributeValues={
        ':id':{'S':'primary_001'},
        ':sort_id':{'S':f'sort_2020080101'},
        # ':st':{'N':'202008010000'},
        # ':ed':{'N':'202008010010'},
    },
    # ExclusiveStartKey={'primary_id': {'S': 'xxxx'}, 'sort_id': {'S': 'yyyy'}},
)
```
bundle IDの調べ方メモ（iOS）

## 趣旨

appium等でiPhone実機にインストール済みのアプリを動かす際、bundle id情報が必要です。
こちらは、bundle idの調査方法を忘れないためのメモです。

## 環境情報

|対象|Version|
|:---|:---|
|OS|Mac OS X 10.15.5|
|Xcode|Version 11.6 (11E708)|
|iOS|iPhone11 13.5.1|

## 方法①

* App Storeでbundle idを取得したいアプリを検索
* URLのid部分をメモ
* 以下のURLを叩く
https://itunes.apple.com/lookup?id=[メモしたid]
* ダウンロードされたファイルからbundle idを探す

あるアプリについてこちらの方法①で試しましたが、ここで取得したbundle idではアプリが起動しなかったので、方法②で取得しました。

## 方法②

* iPhoneをPCに接続する
* Macに標準でインストールされているユーティリティ「コンソール」を立ち上げる
* iPhone上でbundle idを取得したいアプリを立ち上げる
* コンソールからbunlde idを取得する
    * アプリ名とかで絞った方が取得しやすい

今回試した際は、方法②で取得したbundle idで無事にアプリが立ち上がりました。
（1文字違いでした）
[WPF]グリッドビューの列幅を固定するには

# はじめに
本記事は開発で得た知識を備忘録として残すことを目的としています。

# 遭遇した問題
ListViewのViewプロパティをGridViewにすると見せ方をグリッドにすることができます。グリッドの列幅はドラッグドロップで幅の長さを変更できるようになっていますが、固定したいときがあったのでやり方を調べたところ、GridViewには列幅の可変・固定を明示的に切り替えるようなプロパティは存在しないので、別の解決策が必要でした。

# 解決策
 [こちらの記事](http://pieceofnostalgy.blogspot.com/2014/04/wpf-listview.html)や[こちらの記事](http://frog.raindrop.jp/knowledge/archives/002153.html)から以下の解決方法があることが分かりました。
- GridViewColumnHeaderのIsEnableをfalseにする
- GridViewColumnHeaderのStyle定義でカラムヘッダー幅変更用のThumb(ドラッグできるコントロール)のIsEnabledをFalseにする

#  さいごに
 一つ目の方法は簡単ですがヘッダーのスタイルがFalseの時用のものになってしまうので、見た目が変わってしまったり、列の順序変更も禁止になったりします。目的以外の影響も出てくるので注意が必要です。
[WPF]TextBlockで文字を省略するには

# はじめに
本記事は、開発で得た知識を備忘録として残すことを目的としています。

# やりたいこと
TextBlockでTextを表示する際に、表示しきれなかった場合は語尾に「・・・」を付けて、省略されていることがわかるようにしたいです。

# 解決策
TextBlockにはTextTrimmingプロパティというものがあり、これを以下のように設定することで解決できました。
- 文字単位で省略したい時は、TextTrimmingプロパティにCharacterEllipsisを設定します。
- 単語単位で省略したい時は、TextTrimmingプロパティにWordEllipsisを設定します。

# さいごに
TextBlockにはTextWrapping というテキストの折り返し方法設定できるプロパティがあるので、それに省略記号を表示するような設定があるのかと思っていました。それ専用のプロパティがあることは意外と知らない人も多いんじゃないかなと思いました。

# 参考
https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.texttrimming?view=netcore-3.1
固定小数点数、浮動小数点数、論理回路と基本回路

#固定小数点数と浮動小数点数について
　**固定小数点数**
　・固定終点は、「ビット列のどの位置に小数点があるか」を暗黙的了解として扱う表現方法
　・少数を固定する位置は、ソフト実装によってきまります。

 つまり、以下の表現もできます。
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/af29f344-5aa5-a905-df99-198172c1b1b3.png)


または、このように表現することも可能です。

![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/e11a7d05-1859-f39a-3b8a-56cfdd3b3398.png)

**浮動小数点数**
 ・固定小数点数で制限されていた表現できる数値の範囲広げるための方法です。
　例を挙げると以下の通りになります。
　　10進数:0.00025の場合
　　　「2.5（仮数部）× 10-4（指数部）」
仮数部と指数部を変えることで、様々な表現ができます。この時により有効桁を多くとれるように、
小数点の位置を調整し仮数部の最上位桁を0以外の数値にすることを正規化といいます。
また、記号で表現すると以下の通りになります。
　![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/98923da7-de15-2e82-4148-fa8c95f6c7a4.png)

#論理回路と基本回路
　・論理演算する回路が論理回路という、基本的には以下の3種類 <font color="#cc0000">※以下の回路は基本回路とも呼ばれております。</font>
　　・論理積回路(AND)
　　・論理和回路(OR)
　　・否定回路(NOT)

**論理積回路(AND回路)**
  ・入力がどちらも「１」だった時に、「１」を出力するのが論理積回路(AND回路)になります。
　　![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/6a8c0aa1-953b-fbf0-21ad-19c67247a155.png)
　
論理演算は<font color="#cc0000">論理式</font>という式であらわすことができます。

![図76.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/b8b40a64-696b-181f-62e4-d4f3c770e232.png)

この時、入力としてA、Bが取り得る値の組み合わせは全部で4パターン。これに対応する出力Yをくっつけて表としてまとめたものが<font color="#cc0000">真理値表</font>と言います。

![図8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/387c5fa2-99c7-1750-14a1-578167e9c1fc.png)


**論理和回路(OR回路)**
 
・入力がどちらが１つでも「１」だった時に、「１」を出力するのが論理和回路(OR回路)になります。

![図9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/42b6c280-45a1-13e8-e589-5ab123a819f0.png)

論理和(OR)を示す演算記号は「+」。したがって、この場合の論理式は次のようになります。

![図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/4871df59-0ecb-0a1c-3faa-5851e39c97ca.png)

論理和回路（OR回路)の真理値表は以下の通りになります。

![図11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/c099f99d-069d-8341-53b8-c22a71f29df0.png)

**否定回路(NOT回路)**

・入力が「0」なら「1」、「１」なら「０」を出力するといった具合に、入力値を反転させて出力するのが否定論理（NOT回路)になります。

![図12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/43057ac9-a59c-a78b-3826-1a305dce93af.png)

否定(NOT)を指揮であらわすときは、値の上に「－」を付加して表現します。

![図13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/a1d11621-ac50-7cf2-05d8-c4ad3bed0b59.png)

入力としてAとり得る値は２パターン
否定回路(NOT回路)の真理値表は以下の通りになります。

#以上
iPhoneで自動車部品の不良品検知(現場コスト大幅削減？？）

#Create MLで100%検知
目視できるレベルの金属部品の表面異常検知であれば、 **Create MLで十分な高精度を達成できます。**
三重県桑名市の某自動車部品メーカーとの技術研究を行い、
**Create MLで100%の検知結果を出しました。**
**従来の不良品検知システムは数千万のコストがかかることも多いので、アイフォンに置き換えられると大幅なコスト削減が望めます。**

##現場で使えるのか

**傷は1〜4mm程度。**
![良品.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/07d51e2b-1188-a655-031b-f52433af1686.png)　![不良品.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/bc475fd4-0ec6-397f-19da-c8bcfeae64d5.png)
*（左）良品　／　（右）不良品（四角い影が「圧痕」という傷）*

良品30、不良品30のデータでの実験となります。

**現場では99%の検知能力が求められます。**
製造現場では90%の分類精度であっても不十分です。
大量の再検査コストがかかり、自動化の意味がなくなってしまうのです。

Create MLの画像認識モデルは、（模様のようなものではなく）物体の種類分類データセットによって事前学習されているため、細かい模様のような傷には適用できないのではないかと当初は考えました。

そのため当初は、Pythonの画像分類ネットワークを初期値からトレーニングするか、抽象度の高い事前学習層だけを用いて転移学習させる必要があると覚悟しました。
それでもダメなら、金属表面専用の最新研究を用いる。

ただ、とりあえず試す意味でCreate MLにかけてみると、わりあい**あっけなく精度100%を達成しました。**
<img width="512" alt="スクリーンショット 2020-08-06 1.32.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/029598c0-9343-df66-4dbf-950a5a8b261e.png">

###金属表面を分類する際のコツ
重要なのは、データセットを可能な限り**一貫した画像にすること**です。
モデルに傷の有無だけに集中してもらうイメージで取り組みました。

#####1、フォーカスする領域にクロップする
部品全体の画像を一気にモデルにかけてしまうと、ランダムに近い結果しか得られませんでした。
幸い、今回の部品は傷のつく場所が部品の一部分に集中していたので、その部分だけをクロップして使用しました。
複数箇所に傷がある場合は、一定の形状や角度ごとに部品の部分を区別して、各々でモデルを作成した方が高精度が望めます。

#####2、撮像環境を一定にする
金属は光の反射があるので、部分による明暗が出てしまいます。
撮像環境を一定にすることで、反射のばらつきは無視できます。
カメラと部品の位置を固定して撮影します。
特別な照明は必要ありません。

#####３、データ拡張を慎重に行う。
データ拡張なしでCreate MLでトレーニングしたところ、Training正解率は100%、Validation（検証）正解率は70％程度でした。
**トレーニング正解率と検証正解率が乖離するのは過学習のサインです。**
一般に、**過学習はデータセットが十分ではない時に起こります。**
十分なデータを得ることが難しい場合は、データ拡張を用いてデータセットを水増しします。
ただし、**やみくもにデータ拡張をすればいいというものでもありません。**
Create MLには
Add Noise、Blur、Crop、Flip、Rotate
というデータ拡張オプションがありますが、今回は、たとえばrotateを適用して画像をランダムな角度で回転させてデータを水増ししたところ、**むしろ正解率が下がりました。**
**Flipだけを用いたところ、正解率100%を達成できました。**

画像の性質上、画像のz軸で回転させると、本来は一方向であった光の反射や影や金属の表面の筋がバラバラの向きになってしまい、ノイズとして無視したいものを画像の特徴として捉えてしまうのだと思います。

####現場への導入に必要なこと
#####１、部品表面全体を画像認識する必要があります
部品を回転させながら撮像します。
２つ方法があります。
・時系列で回転させた表面を一枚の画像としてまとめる方法。
・回転させながら動画を撮って毎フレーム解析する方法です。
Create MLの軽量モデルならエッジデバイスでも毎フレーム解析が可能なので、後者がとっつきやすいように思います。
#####２、不良品を排除する機器に信号を送る必要があります
BlueToothなどの形で通信する必要があります。
#####３、過検出を防ぐ
現場で発生する埃や繊維、白粉といった「不良品ではないが表面異常としてうつるノイズ」を無視する必要があります。
これらのノイズが原因で「不良品」として認識してしまうと、良品が大量に弾かれてしまい、結局再検査の人員コストがかかります。
**過検出を防ぐには、CIFilter等を用いて情報をエッジのみにするなどして、ノイズを目立たないように、傷が目立つように画像を前処理することが有効です。**
WWDC 2020のセッション Explore Computer Vision APIs　が参考になります。
<img width="128" alt="スクリーンショット 2020-08-06 1.59.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/99e40b31-08b0-9b44-e859-721cfbb49059.png">
*（写真）フィルターで情報量を削った金属表面*

#結論
**目視できるレベルの不良品検出であれば、Create MLで十分に対応できます。**
少なくとも、Pythonモデルで試行錯誤する前に、手軽に試してみてる価値はあります。。

<img width="128" alt="スクリーンショット 2020-08-06 8.25.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/cca5915d-8d2a-2f95-07fd-24a33638f161.png">
機械学習関連の情報を発信しています。
MLBoysだいすけ　https://twitter.com/JackdeS11
MLBoysゆうじ https://twitter.com/oka_yuuji

Core MLやCreate ML、Visionを使ったアプリを作っています。
MLBoys:mlboys.d.yu@gmail.com
だいすけ:rockyshikoku@gmail.com
Oracleをインストールするときに便利なOracle Preinstallation RPMの補足

# 便利なOracle Preinstallation RPM
Oracle Database 12c時代に、Linux版Oracleのインストール支援ツールOracle Preinstallation RPMを会社のWebで紹介した。いまでも基本は同じだが、いくつか変わっているので差分を紹介する。

**以前書いたブログ**
かなり詳しく書いたつもりなので、興味のあるかたはどうぞ。

* [Oracleインストール支援ツールを使う（1）](http://www.intellilink.co.jp/article/column/oracle-yam06.html)
* [Oracleインストール支援ツールを使う（2）](http://www.intellilink.co.jp/article/column/oracle-yam07.html)
* [Oracleインストール支援ツールを使う（3）](http://www.intellilink.co.jp/article/column/oracle-yam08.html)

# 変わったところ

* <font color="blue">Oracle Linux以外でも使えるようになった。</font>以前はUEKと依存性があったためRed Hatでは使えなかった。
* <font color="blue">18cや19c、21c、23c、23ai用がリリースされた。</font>基本的にどのバージョンも同じ仕組みなので、おそらく新しいDBバージョンがリリースされたときにも代用できる。
* LANGが日本語でもエラーログが出なくなった。

**バージョンごとのRPMパッケージ名**
これまでパッケージ名がコロコロ変わっていたので要注意。

* **11.2：** oracle-rdbms-server-11gR2-preinstall
* **12.1：** oracle-rdbms-server-12cR1-preinstall
* **12.2：** oracle-database-server-12cR2-preinstall
* **18c：** oracle-database-preinstall-18c
* **19c：** oracle-database-preinstall-19c
* **21c：** oracle-database-preinstall-21c
* **23c：** oracle-database-preinstall-23c
* **23ai：** oracle-database-preinstall-23ai

`yum search "oracle-database-preinstall*"`で検索すると、新バージョンに対応したパッケージを探せる。

:::note info
Oracle Preinstallation RPMは、Oracle Linux 7までは標準リポジトリに含まれていたが、Oracle Linux 8ではAppStreamリポジトリに含まれている。[インストレーションガイド](https://docs.oracle.com/cd/F19136_01/ladbi/installing-the-oracle-preinstallation-rpm-with-uln-support.html#GUID-AF94713E-97AF-4F20-8DBC-36BC383D0301)では、有償サポートユーザー向けのULNからインストールする方法が紹介されているが、ULNユーザーでなくてもOracle Preinstallation RPMを使用できる。
:::

# さあ実験くん

Oracle LinuxのUEK（Unbreakable Enterprise Kernel）と依存関係を確認する。何も表示されないので、UEKを持たないRed Hat Enterprise Linuxでも使用できることがわかる。

```shell-session
# yum deplist oracle-database-preinstall-19c | grep uek
★何も表示されない
```

ログファイルには実行している内容が出力される。ログを見る限り、これまでと同じようだ。またLANGが日本語でもエラーが出ていなかった。

```shell-session:19c用をインストール
yum install oracle-database-preinstall-19c
```

```shell-session:/var/log/oracle-database-preinstall-19c/backup/＜実行した日付＞/orakernel.log
Adding group oinstall with gid 54321
Adding group dba with gid 54322
Adding group oper with gid 54323
Adding group backupdba with gid 54324
Adding group dgdba with gid 54325
Adding group kmdba with gid 54326
Adding group racdba with gid 54330
Adding user oracle with user id 54321, initial login group oinstall, supplementary groups oinstall,dba,oper,backupdba,dgdba,kmdba,racdba and  home directory /home/oracle
★以下省略
```

# RHELで使用するとき

Oracle Preinstallation RPMはRHELのリポジトリには含まれていない。そのため事前にyum.oracle.comからダウンロードする必要がある。ブラウザもしくはwgetでダウンロードできる。

RHEL7: http://yum.oracle.com/repo/OracleLinux/OL7/latest/x86_64/
RHEL8: https://yum.oracle.com/repo/OracleLinux/OL8/appstream/x86_64/
RHEL9: https://yum.oracle.com/repo/OracleLinux/OL9/appstream/x86_64/

RHELをRHNに登録してRHELリポジトリが有効になっている状態で、次のように実行すれば必要なパッケージをインストールできる。

```shell-session:19cの例
yum localinstall oracle-database-preinstall-19c-1.0-2.el7.x86_64.rpm
```
Netlifyにjpドメインを登録


Netlifyに独自ドメインを登録しようとしたところ、jpドメインは通常のやり方では設定できないことがわかりました。

## 解決法
ドメインレジストラ(ムームードメイン)でCNAMEレコードとALIASレコードを設定

## 具体的な設定手順
### Netlify側
管理画面 > 設定したいサイト > Settings > Domain Management > Custom Domains > AddDomainAlias
よりドメインを追加

<img width="953" alt=" 2020-08-06 13.35.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/d73e5a04-3f5f-89b5-daa1-4973542bff80.png">

### ムームードメイン側
コントロールパネル > ドメイン操作 > ムームーDNS > 処理(変更) > 設定2
より、CNAMEレコードとALIASレコードを以下のように設定

```
www CNAME ＊＊＊＊.netlify.app(デフォルトのURL)
(空欄) ALIAS ＊＊＊＊.netlify.app(デフォルトのURL)
```

ALIASレコードは、CNAMEレコードの亜種みたいなもの(wwwなしのドメインにも設定できる)です。

<img width="689" alt=" 2020-08-06 13.32.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/3a66f86a-4870-b9c4-bc5a-4ae3b04f20f5.png">

### その他
設定から3~4時間くらいで反映されました。

## 感想
海外発のサービスとの連携がめんどくさくなるし、GoogleDomainsに移管すると年4600円取られるし、jpドメインなんて使うもんじゃない。

## 参考
- [github + Netlify + ムームードメイン（独自ドメイン）でホスティングする - Qiita](https://qiita.com/cislv/items/9678758ffe9ae74c7326)
PythonのSeleniumで秒速でスクレイピングする方法

## セレクタをXPATHで取得

Chromeの拡張機能のxPath Finderを使用し素早くページ上のXPATHを指定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280363/6e584345-24f5-696c-4e8d-5e01843b1767.png)



そしてそこにsend_keysなどで入力項目を送る。

以下はSBI証券のログインのスクリプトの抜粋です。

``` python
try:
    browser.get('https://www.sbisec.co.jp/ETGate')
    username_field = browser.find_element_by_xpath('/html/body/table/tbody/tr[1]/td[2]/form/div/div/div/dl/dd[1]/div/input')
    username_field.clear()
    username_field.send_keys(username)
    password_field = browser.find_element_by_xpath("/html/body/table/tbody/tr[1]/td[2]/form/div/div/div/dl/dd[2]/div/input")
    password_field.send_keys(password)
    login_button = browser.find_element_by_xpath("/html/body/table/tbody/tr[1]/td[2]/form/div/div/div/p[2]/a/input")
    login_button.click()#click login
    time.sleep(5)
```

このパターンを使えばSeleniumを使ったプロジェクトが一気に捗ります。


## 更新履歴

- 2020/06/06 新規作成
WordPressで記事を「公開」として投稿しても、予約投稿失敗となってしまう

# 事象

WordPress で普通に投稿して、現在時刻から公開とした場合、なぜか予約投稿となってしまい、更にそれが失敗して公開されない事象に遭遇した。

調べたら色々な人が「予約投稿に失敗」することは書いているが、原因の調査に色々と苦労したので経緯とか解決方法とかをメモ。

# 問題

## 1. WordPress の wp-cron.php 呼び出しそのもの

今回問題が発生したのは検証環境であり、実際にアクセスするURLとwp_options の home / siteurl のドメインが異なる状態だった (別の環境から dump などを一式持ってきて、 nginx の sub_filter とか proxy_redirect でページに表示されているドメイン情報を置き換えて動作確認していた状態)。

そのため、この状態だと **wp-cron.php の呼び出しが home/siteurl で指定したドメイン側のサイトへと行われてしまう** 。

この場合の解消方法としては、`/etc/hosts` に記述を追加して本番を自身と認識させたり、サーバー上の cron によって開発の wp-cron.php を定期的に呼び出すようにしたり、そもそもの問題である home / siteurl を適切な値に直す、といった方法が必要になる。

ただ、これは明らかに普通の範囲を逸脱した使い方だとは思うので、あくまで参考まで。


## 2. Basic 認証による wp-cron.php 実行阻害

これは検索したらよく出てくるが、 wp-cron.php が呼ばれないと予約投稿は上手く投稿されない。
今回は前段に nginx + Basic 認証がいたので、これをちゃんとパスさせて WordPress から wp-cron.php を実行できる環境を作っておくこと。


## 3. OS上の不完全な時刻あわせ

Basic認証はともかく、home / siteurl をだますパターンは滅多なことでは起こり得ないと思うので、同様の問題にあたる人がいるとすれば、ほぼこの 3. の問題だと思う。

この問題が原因かどうかは、WordPress の設定 > タイムゾーンを見てみよう。 ここでは、タイムゾーンに「東京」が指定されることを想定している。 この時、以下のように「協定世界時」と「現地時間」が一致していると、この問題の可能性が高い。 
協定世界時 (GMT) は現地時間 (JST) のマイナス9時間であるため、これらの間の差は9時間ないとおかしい状態なのである。

```
# タイムゾーンは東京を指定しているので後者が日本時間、前者はその9時間前になる
協定世界時は2020-08-06 01:23:45です。 現地時間は 2020-08-06 01:23:45 です。
```

色々と調査しましたが、この問題は `/etc/localtime` だけ書き換えたことが原因でした。 今回、Dockerで動かしてたので、**親の `/etc/localtime` を `:ro` でマウントするという方法を採っていたのです** 。

そして、何が起こったかはまさに以下で説明されている通りです。

> そんな /etc/localtime をホストに volume マウントするとどうなるか? symlink である /etc/localtime がホストの /etc/localtime に置き換わると思いきや、実はリンク先のファイルが置き換わる、つまり、UTC の zoneinfo の中身が JST のそれに置き換わってしまうのです。
> Docker で /etc/localtime をホストに volume マウントしてハマった話 - https://qiita.com/jeffi7/items/9d4c85cf049644f711b8

UTCの時刻がJSTのそれに置き換わる、ということで、確かに UTC が JST に置き換わってますので、事象と一致しますね。 
WordPress の中身は詳しくないんですが、どうも「WordPressの時刻回りはすごい複雑」に見えたので、この２つの時刻の取得のソース元が違うとかなんでしょう、多分。 で、これらが混ざりあっている結果、こういう状況になってしまったのではないかと思いますが、インフラ設定がちゃんとしてればいい話ではあるので、これ以上は突っ込みませんでした。

というわけで、Docker でタイムゾーンを合わせるのであれば `-e TZ=Asia/Tokyo` のように環境変数を渡すことで指定できるので、環境変数を使ってコンテナのタイムゾーン合わせをしましょう。
擬似要素が付けれない！？htmlタグについて

#擬似要素が適用できない
```sample.html
<div class="sample">
  <img src="" class="sample-img">
</div>
```

```sample.scss
.sample-css{
  &:before{
    content: "";
    width: 20px;
    height: 20px;
    background-clor: red;
 }
}
```

本来ならば、上記の様なコードで擬似要素が適用できます。

しかし、ディベロッパーツールで見ても存在しない

コードの記載に間違いがない場合にまず確認して欲しいことが今回説明する、**「擬似要素が使えるhtmlタグかどうか？」**です。

#擬似要素が使えないタグとは？？

例えば、```imgタグ```です。

使えない理由は、**閉じタグがないから**です。

###なぜ、閉じタグがないと使えないか？
→要は、閉じタグのない要素はカラ要素だと判断されるため、仕様的に擬似要素が適用出来ません。

imgタグ以外にも、selectタグや、optionタグ、お同じですね。

擬似要素が適用できないときはチェックすべき項目ですね。

#参考
・[imgタグにafter要素（疑似要素）はつけれないだとーーー！！](https://sugi511.hatenablog.com/entry/2014/01/06/img%E3%82%BF%E3%82%B0%E3%81%ABafter%E8%A6%81%E7%B4%A0%E3%81%AF%E3%81%A4%E3%81%91%E3%82%8C%E3%81%AA%E3%81%84%E3%81%A0%E3%81%A8%E3%83%BC%E3%83%BC%E3%83%BC%EF%BC%81%EF%BC%81)
クラウドAI開発講座 Microsoftと高専キャリアがコラボ #5 

# クラウドAI開発講座
[マイクロソフトと高専キャリア教育研究所が共催するAI開発プログラム](https://online.kosen-career.tech/ai)
**無料**で参加でき、困ったときにはメンターに相談ができるオンラインプログラム



# 進歩
Microsoft Teams使用するbotの作成に慣れていないため、[ちょまどさんが公開している別のボット作成方法](https://qiita.com/chomado/items/4de8e1f4e5a76fb20bcd)で、メッセージををのままオウム返しするbotを作成しました。

今回のbot作成方法はコマンドをあまり使っていませんでした。プログラミング初心者の私は、コマンドの使い方に慣れていないため、直感的に作成しやすかったです。

個人的には、一番作成しやすかった。




## みんなありがとう！メンションを取り除けました
Microsoft Teams でチームでbotを呼び出すとき、**メンション**というものを使います。
このメンションをプログラム上で取り除く処理をしてからbotで出力しないと、メンションごとオウム返ししてきます。

メンションを取り除く方法について参加者間で話題になりました。

初めて**メンション取り除く問題**を目の当たりにした私は、
**「お前かーーーーー！」**
ってなりました。


その瞬間の画像（メンションは赤線の部分、メンションがそのままオウム返しされている部分が青線）
![5_3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668928/2ba1174a-d935-aa05-2746-334fadcb4e29.png)


すぐさま高専キャリアのクラウドAI開発講座のSlackで、この問題を解決した先人（参加者）の知恵を借りました。

**みんなありがとう。一人だったらたぶん何もできなかった。**

プログラム変更後、うまくメンションを取り除けました（赤線の部分を取り除いた）。
![5_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668928/0f0ae8fd-5a04-cdc1-4c5f-30b1c671a701.png)

プログラムは、

```EchoBot.cs
var replyText = $"Echo: {turnContext.Activity.Text}";
```
を次のように変更

```EchoBot.cs
var replyText = $"Echo: {turnContext.Activity.RemoveRecipientMention()}";
```

これだけですが、C#をいじったことのない私は少してこずり、時間がかかりました。

# 今後の予定 
botの作成手順は大体把握できました。
問題はbotの中身を書き換えるためのC#です。これが**マジでわからん**。C#を理解しつつ、bot作成に励みます。

このプログラムを通して、C#もマスターしたいです！




# 高専キャリアONLINEの提供コンテンツ（高専キャリア教育研究所）
[高専キャリアONLINE](https://online.kosen-career.tech/)の提供コンテンツ（[高専キャリア教育研究所](https://kosen-career.tech/)）

- [Business Design Lab](https://online.kosen-career.tech/business-design-lab)
- [クラウドAI開発講座](https://online.kosen-career.tech/ai)（本記事）
- [【高専生/編入生限定】特許活用ビジネスプランコンテスト](https://online.kosen-career.tech/bizdev-weekend)
【Git】過去のコミットを起点にしてそこからブランチを作成する。

自分用のメモとして残します。


#■やり方

###1.ローカルにブランチ作成
```shell
git checkout コミットRev -b ブランチ名
```

###2.リモートに作成したブランチを反映
```shell
git push -u origin 作成したブランチ名
```
kusanagi で ハマりがちなこと

# はじめに
KUSANAGI初期構築において、時間がかかった（＝ハマった）部分のまとめです。
構築手順ではありません。
KUSANAGIについての詳細は公式（ https://kusanagi.tokyo/ ）をご覧ください

## 環境
Conoha VPS のかんたんKUSANAGIテンプレートを利用しました。
※構築は、[KUSANAGI+WordPressかんたん導入ガイド](https://support.conoha.jp/vps/guide/kusanagi_easystartup/?btn_id=v-kusanagi_os-sidebar_guide-kusanagi_easystartup)をそのまま実施。

↓ OSバージョンなど
`OS: CentOS Linux release 7.8.2003
nginx: nginx/1.19.0
mysql: Ver 15.1 Distrib 10.1.45-MariaDB`

## ハマったこと
### 1.  All-in-One WP Migration プラグインでのデータImport時にDirパーミッションで引っかかる
#### 問題
ConohaのKUSANAGI+Wordpressで環境を作成後、さぁ、データを移行しましょうというときに起きたエラーです。

エラー内容は章タイトル通りですが、少し補足します。
KUSANAGIが作ったWordpress環境は、KUSANAGIユーザー（グループ）以外のアクセスが禁止されています。（一部uploadsディレクトリ等を除く）
移行に使おうとしたAll-in-One WP Migration プラグインは、php実行権を持つユーザーでImportしようとします。
この「php実行権を持つユーザー（グループ）」と、「KUSANAGIのユーザー（グループ）」が一致しないので、Importに必要なDirにアクセスできず、エラーになります。

なのでタイトルには「All-in-One WP Migration プラグインで」と書きましたが、同じようにKUSANAGIのDirにアクセスするようなプラグインには同様なエラーが出ると思います。
ですが、この場では「All-in-One WP Migration プラグイン」に限定して解決策を提示します。

#### 解決策
結論から言うと、**対象Dirの所有者を httpd:www に変更** します。
変更するのは以下２つのDirです。
`wp-content/plugins/all-in-one-wp-migration/storage`
`wp-content/ai1wm-backups`

```bash:cmd
$ chown -R httpd:www wp-content/plugins/all-in-one-wp-migration/storage
$ chown -R httpd:www wp-content/ai1wm-backups
```

#### 補足説明
Importに必要なDirにアクセスできない、というエラーなので、手っ取り早くDirを `chmod 777` する手もありますが、セキュリティを鑑みるとおすすめできません。
誰でもアクセスできてしまうような設定は避けるべきです。

#### その他
All-in-One WP Migrationについては[こちら](https://ja.wordpress.org/plugins/all-in-one-wp-migration/)
※開発環境→本番環境への移行時に大変便利なツールです。いつも有難く使わせてもらっています。

参考にしたサイト：https://lunalunadesign.net/2019/09/71/

* * *

### 2. All-in-One WP Migration プラグインでのデータImport時に100%で停止しそれ以上進まない

#### 問題
1の問題が解決して、さぁImportするぞと意気込んでみたものの、100%で停止しそれ以上進まない。
サーバのエラーログを見るとこんな記述が。

```bash:
$ client intended to send too large body:65213411 bytes, client
```
nginx が定義している POST の最大サイズを超えてアップロードしようとすると発生するエラーのようです。
最大サイズを増やしてあげれば大丈夫そうですね。

#### 解決策
下記ファイルの中身を編集します。※xxxxxの部分は環境によって異なります。

```bash:
vi /nginx/conf.d/xxxxxxxx_http.conf
vi /nginx/conf.d/xxxxxxxx_ssl.conf
```

httpの場合はhttp.conf、httpsの場合はssl.confを開いて、
**client_max_body_size** を変更し、保存します。
私の場合、初期値が16Mだったので200Mに変更しました。

```bash:
client_max_body_size = 200M
```
保存したら、nginxを再起動します

```bash:
sudo systemctl restart nginx
```

#### 補足説明
地味に大切なポイントですが、.confファイルはローカルではなくサーバ上でviを使って作業するようにしましょう。（特にWindowsの方）
***ローカルで作業すると一部文字化けしたりして、期待した動作にならないことがあります。***
（ここで15分くらいハマりました）

#### その他
参考にしたサイト：https://www.itblog.jp/?p=9941

* * *

### 3. Wordpressの管理バーについて、管理画面は日本語表記なのに、管理画面以外では英語表記になる
### 問題
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406963/1f4d4368-0bed-a5d3-f473-e6592bddc488.png)
管理バーが英語表記になっています。


### 解決策
ダッシュボード > KUSANAGI > KUSANAGI Settings から「翻訳アクセラレーター」を開きます。
「サイトに表示される翻訳された文章」を、***「翻訳を停止」から「キャッシュを使用」に変更します***
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406963/6cf5da35-1492-b97c-6f92-c70dd72fa8af.png)
これで、KUSANAGI上のキャッシュ（日本語訳された文章を保持している）を利用することができます。

# 最後に
今回初めてConoha VPSを使いました。
お問い合わせも即日返ってくるし（重要）、公式のHELPも充実しているので、おすすめです。
（料金も他のレンタルサーバーと比較してちょっと安めです）
仕事だけでなく個人的にも使いたいと思いました。
今日のメモ（添字演算子、多重代入）

#添字演算子
添字には負の数値(-の値)を指定できる。
要素(a=[n1,n2,n3,n4])の末尾を-1とし、先頭に向かって順に減っていく。
<img width="349" alt="スクリーンショット 2020-08-06 15.57.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208788/a79ec434-d3e8-7539-cbaf-12ae8be54242.png">
更に添字に２つの整数を指定すると複数の要素を出力できます。

```
a = [0,1,2,3,4,5]
a[1,3]
#=> [1,2,3]
```

#多重代入
コード内の複数の変数に一度に代入をする。
メソッドの返り値で複数の値を返し、多重代入で受け取る事もできるがreturnを指定する必要がある。

```
def foo
    return 1,2,3
end
a,b,c = foo
p a
p b
p c
#=> 1
    2
    3
```

変数よりも代入する値が少ない場合は、余った変数にnilが入る。

```
a,b,c = 1,2
p a
p b
p c
#=> 1
    2
    nil
```
変数よりも代入する値が多い場合は、余った値は無視される。

```
a,b = 1,2,3
p a
p b
#=> 1
    2
```
1つの変数に複数の値を代入した場合は配列の代入と見なされるので注意ですが、値が余った場合最後の変数に＊をつける事で配列としてまとめて代入されます。

```
a,*b = 1,2,3
p a
p b
#=> 1
    [2,3]
```
What is MWDM Wavelength Division Multiplexing?

The large-scale construction of 5G new infrastructure also places higher demands on the bearer network. The 5G bearer network mainly includes 5G fronthaul networks and 5G backhaul networks. Wavelength division multiplexing(WDM) technology is the preferred solution for 5G fronthaul networks. According to the different wavelengths used, it can be divided into DWDM (Dense Wavelength Division Multiplexing), CWDM (Coarse Wavelength Division Multiplexing),the newly proposed MWDM, and LWDM.

Coarse Wavelength Division Multiplexing (CWDM) and Dense Wavelength Division Multiplexing (DWDM) are both mature WDM technologies. What is MWDM?

To understand what MWDM is, you first need to know why MWDM was proposed.

5G fronthaul network requires high reliability, high performance, low cost and easy deployment solutions. Need a low-cost technical solution that can quickly respond to market needs. Chinese telecom operators innovatively put forward the concept of 12-wave multiplexing WDM. MWDM is proposed based on mature CWDM technology.

CWDM has 18 wavelengths (1271~1611nm), but due to the relatively large attenuation of the 1270~1470nm band and cost considerations, usually only 6 wavelengths (1271nm, 1291nm, 1311nm, 1351nm, 1371nm) are used. MWDM is based on the 6 wavelengths of CWDM, shifted by 3.5nm left and right to expand to 12 waves (1267.5, 1274.5, 1287.5, 1294.5, 1307.5, 1314.5, 1327.5, 1334.5, 1347.5, 1354.5, 1367.5, 1374.5nm).

![153.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463940/7cad3603-9e82-ae73-cb14-967cd2dd5ab5.jpeg)

What are the advantages of this? MWDM reuses the first 6 wavelengths of CWDM, compresses the 20nm wavelength interval of CWDM to 7nm, and uses Thermal Electronic Cooler (TEC) temperature control technology to expand 1 wave into 2 waves. In this way, an increase in capacity can be achieved while further saving optical fibers.

MWDM can reuses the production process and industrial chain of CWDM to meet the urgent needs of 5G commercial.

With 20 years’ experience of OEM ODM manufacturing, HYC has a wide range of optical passive WDM modules for 5G networks. HYC has a large-scale production capacity to help 5G deployment. Now we have developed a series of MWDM modules that can be provided to our customers in the process of global 5G network construction. 

About HYC Co., Ltd
HYC Co., Ltd is a leading manufacturer of optical passive devices and has built a certain influence in the global industry. We focus on providing customers with one-stop customization of optical passive devices design, development, and manufacturing. We have production lines including optical fiber connectors, optical fiber jumpers, PLC splitters, WDM, MEMS optical switches, and products that are widely used in FTTH, Data center, 5G network, Telecom, etc.
https://hyc-system.com/Product/index_208
Javaアノテーションの歴史

Javaのアノテーションの役割と歴史をまとめる。

#歴史

「@」アノテーションとは、Java 1.5で導入された、

- `@Override`のようにコンパイラにヒントを与えるコメントとして生まれたのがきっかけ。


##アノテーションを使用するメリット。

- コードの正確性：`@Nullable`、`@Deprecated`、`@Override`などのアノテーションにより、メソッドやフィールドに重要な意味情報を追加し、コンパイラによってその情報が強制されるようにすることができる。 

- テスト・メソッド：TestNGとアノテーションが登場するまで、JUnitは リフレクションを使用してメソッドがテスト・メソッドであることを判別していました。この判別には、特別なネーミング規則が必要でした。<br>アノテーションの採用によって、ネーミング規則を使用する必要がなくなった。

- 永続性（Hibernateなど）：アノテーションを付加することで、フィールドやメソッドをデータベースに保存されているデータと紐付けることができる。

- 依存性注入：インジェクションする必要があるクラスにアノテーションを付加し、その旨を示すことができる。


##よく使うアノテーション

###`@Nullable`と`@Nonnull`（javax.annotation）

- フィールドおよびメソッド・パラメータに付加でき、変数がnull値を取ることができるか
どうかを指定します。
- このアノテーションは非常に有用であり、Javaコンパイラ（javac）を使用する多くのツール（主要なIDEが代表的な例です）がこの2つを認識します。
- 可能な限り、常にこのアノテーションを使用するようにします。コードベースにおけるnullポインタ例外の数が急激に減ることにすぐ気付くはずです。

###`@Override`

Java6以降必須になっている。

####理由
- このアノテーションは、親インタフェースまたは親クラスのメソッドをオーバーライドするすべてのメソッドに付加する必要がある。
- この付加によって、意図せずにメソッドをオーバーライドしてしまうこと

- 逆にタイプ・ミスのためにオーバーライドしていなかったメソッドを「オーバーライドした」と思ってしまう事態を防ぐことができる。

参考にした記事(いつもありがとうございます)
---
https://www.oracle.com/webfolder/technetwork/jp/javamagazine/Java-MA16-Annotations.pdf