OmniAICreator/Qiita-1.07M huggingface dataset:
jQuery UI と BootstrapのTooltipの競合を回避して共存させて両方使う

よく使いそうで忘れそうなので個人メモ。

タイトルの通り。jQueryUIとBootstrapのTooltip関数は名前が同じなので競合する。実際の動作は対象へのホバーでツールチップが表示される、というもので、使い方は同じだけれど、その設定や挙動は結構違う。

Bootstrapはhtml要素自体にパラメータを設定したりできるのでjsファイルを用意する必要がなかったりして、その分では便利だけれど、ajaxでデータを持ってきて表示させたりする時に不便。htmlコードも扱えるけれど、複雑なコードを書こうとすると面倒くさい。title=''に基本全部書き込む必要があるので、例えば、

```html
<div class='tool-tip' title='これが表示されるよ<img src='test.jpg'>'>hoge</div>
```

これはあからさまだけれど、画像のsrcが表に出てきちゃう。divとかリスト要素のネストとかを複雑に入れ込もうとすると、その中の"'に全部気を配るのは大変だし、非生産的このうえないわけで。

もちろん、BootstrapのTooltipにも、表示イベントとかあって、これをトリガーにしてゴソゴソすれば行けるっぽいけれど、対象要素を探したりするのが面倒くさこちゃんなので、てっとり早く両方を共存させて両方使えるようにしちゃえばよい。

だがそのままだと、両方のTooltipは同じ名前で定義されちゃってるので、競合しちゃう。これを回避しなければならない。まさにな回答があったのでそのまま利用する。先人たちありがとう！

https://stackoverflow.com/questions/13731400/jqueryui-tooltips-are-competing-with-twitter-bootstrap

jQueryUIのtooltipだと、コンテンツ部分をjsファイルで制御できるので、json形式でhtml内に書き込み、これを拾って書き出せる。

```html
<div class="msc-item-box d-inline-block result-item" data-item="{&quot;data&quot;:&quot;\u003Cdiv class=\u0027cost-avg-calc\u0027\u003E34 \u5468 \u003Cdiv class=\u0027msc-item-box d-inline-block is-small middle\u0027\u003E\n\u003Cdiv class=\u0027msc-item-box-name\u0027\u003E\nAP\u003C\/div\u003E\n\u003Cdiv class=\u0027msc-item-box-num\u0027\u003E\n1360\u003C\/div\u003E\n\u003C\/div\u003E\n\u003C\/div\u003E&quot;}">
ツールチップ対象</div>
</div>
```

jsonにしてしまえば直接書き込んでも表に出てこない。やったぜ。

## 読み込み順序
jQueryUIから先に読み込まないとエラーが出るらしい。
また、Bootstrapのtooltipは事前にpopperがないと、これまたエラーが出る。

```html
    <script src="jquery-ui.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="bootstrap.js"></script>
```

## jQueryUIのTooltipメソッドを別名にする

先のQAから引用するとこう。

```html
<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>
```
jQuery UI buttonメソッドをuibuttonに、tooltipをuitooltipで定義してあげている。

jQuery UIそれぞれのメソッドはこのwidget.bridgeで定義されているみたいで、こいつで別名を付けてあげればBootstrapと共存できる。

```view.js
    $(".tp").tooltip();
    $('.result-item').uitooltip({
        items: "[data-item]",
        content: function () {
            return $(this).data("item").data
        }
    });
```
あとはそれぞれの利用方法で使ってあげる。
IFTTT と Zapier を使い、Twitterへのツイートをためて、1日ごとに Github issue を作成・更新し、エンジニアの振り返り日記のまとめを作るサンプル。

IFTTT と Zapier を使い、Twitterへのツイートをためて、1日ごとに Github issue を作成・更新し、エンジニアの振り返り日記のまとめを作るサンプル。

# 全体の流れ

Twitter -> IFTTT -> Slack -> Zapier -> Github Issue

Zapierは有料なので IFTTT を一回挟んで料金節約する。


# IFTTT

ハッシュタグつきでツイートすると、Slackのチャンネルに投稿する

![image](https://user-images.githubusercontent.com/13635059/52514314-dc36d700-2c53-11e9-88e8-0c498174b2e2.png)

# Zapier でチャンネルへの投稿をトリガーにする

![image](https://user-images.githubusercontent.com/13635059/52514321-f83a7880-2c53-11e9-9f0e-f8059325468f.png)

# Zapier の Date / Time フィルタで Slack の投稿日時を、日本時間の YYYY-MM-DD にフォーマット



![image](https://user-images.githubusercontent.com/13635059/52514325-04bed100-2c54-11e9-91f7-74cb0ed61a1c.png)

![image](https://user-images.githubusercontent.com/13635059/52514336-17d1a100-2c54-11e9-8868-e35cd133fa86.png)

# Zapier の Github  Find or Create issue  アクション

Issue タイトルに日付を入れる。
Issue タイトルで見つからなかったら Issue を新規作成する。

![image](https://user-images.githubusercontent.com/13635059/52514360-48b1d600-2c54-11e9-8a94-9494259def3a.png)

# Zapier の Github Update Issues アクションを使う

今現在のBody + Slack のメッセージ内容を Body のUpdate 内容にする。
てきとうにMarkdownとかつけてみる。

![image](https://user-images.githubusercontent.com/13635059/52514381-8282dc80-2c54-11e9-8b74-c0b497b34a39.png)

# 結果のイメージ

![image](https://user-images.githubusercontent.com/13635059/52514399-b65e0200-2c54-11e9-8b65-ec65611ceb1e.png)

https://github.com/YumaInaura/YumaInaura/issues/567

# その他

[yumainaura qiita zapier - Google Search](https://www.google.com/search?q=yumainaura+qiita+zapier&oq=yumainaura+qiita+zapier&aqs=chrome..69i57j69i60l3j69i64l2.4105j0j7&sourceid=chrome&ie=UTF-8)

[yumainaura zapier はてな - Google Search](https://www.google.com/search?q=yumainaura+zapier+%E3%81%AF%E3%81%A6%E3%81%AA&oq=yumainaura+zapier+%E3%81%AF%E3%81%A6%E3%81%AA&aqs=chrome..69i57j69i60j69i64l2.5134j0j9&sourceid=chrome&ie=UTF-8)



# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/567








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Mavenをやってみる（プロジェクト作成からライブラリ管理まで）

## はじめに
Mavenというやつをやってみようと思います。（よーわからんｗ

Maven公式: https://maven.apache.org/

## ビルドツール
- ant
    - ビルドを自動化するツール
        - コンパイル、テスト、パッケージング、デプロイを自動化する
- maven
    - antよりも高性能
    - ビルドの自動化にプラスして、ライブラリの管理、テスト結果の共有などができる
    - xmlファイル(pom.xml)による管理
- gradle
    - mavenよりも高性能
    - ビルドの自動化、ライブラリ管理にプラスして、スクリプトの実行もできる
    - groovy言語で書かれたgradleファイル(build.gradle)による管理


## Mavenのインストール
- Apacheプロジェクトのサイトからダウンロード
    - `http://maven.apache.org`
    - 環境変数の設定
- `brew install maven`
    - brewによるインストール
- `mvn -v`
    - ちゃんとインストールできたか確認
    - バージョンが表示される

## Mavenの仕組み
- アーティファクト
    - プロジェクトのビルドによって生成される成果物のこと
    - jarファイルやwarファイルのこと
    - 必須情報
        - グループID
            - 生成した組織を示す(ドメイン)
            - プロジェクトのパッケージ名を設定する
        - アーティファクトID
            - グループ内で一意なもの
            - プロジェクト名を設定する
        - バージョン
- プロジェクトレイアウト
    - プロジェクトルート直下
        - srcファイル
        - pom.xml
    - mvnコマンドで自動生成するほうがよい
- POM
    - Project Object Model
    - プロジェクトのライフサイクル全体を管理する
    - pom.xmlにより定義する
        - プロジェクトに関する情報を定義しておくXMLファイル


## Mavenプロジェクトの作成
- `mvn archetype:generate`
    - Mavenプロジェクトを生成する
    - archetypeプラグインのgenerateゴールを実行するという意味
    - 設定すべき項目
        - groupId
            - プロジェクトのパッケージ名
        - articleId
            - プロジェクト名
- `mvn archetype:generate -DgroupId=(パッケージ名) -DartifactId=(プロジェクト名) -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false`

## ライブラリの管理
- Mavenにはライブラリの依存性を管理する機能がある
- 自動的にライブラリをダウンロードして、必要に応じてクラスパスを設定する
- リポジトリから取得
    - `http://search.maven.org/`
    - リモートリポジトリから取ってきたライブラリはローカルリポジトリに追加される
        - `~/.m2/repository`以下に追加される
- pom.xmlに以下のように設定する

```
<dependencies>
  <dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>3.8.1</version>
    <scope>test</scope>
  </dependency>
</dependencies>
```

## おわりに
Mavenってなんなの？というところから、Mavenを使ってライブラリの依存を管理するところまでやりました。
参考までに。

ひろたつ
静的なLPのプロジェクトにyarnでfirebase-toolsをインストールして公開するまで

## はじめに
今回は作成した静的なLPのプロジェクトにyarnでfirebaseをインストールして公開するまでをやろうと思います。


## プロジェクトの作成
とりまディレクトリ作成（プロジェクト）

```
mkdir sample-lp
```

作成したディレクトリに移動

```
cd sample-lp
```

※適当にLPを取ってくる&適宜編集


## Firebaseのインストール
yarnのインストール

```
brew install yarn
```

firebase-toolsのインストール（グローバル環境にインストール)

```
yarn global add firebase-tools
```

firebaseにログイン

```
firebase login
```

※ブラウザでログイン画面がポップアップ表示される

## firebaseプロジェクトとヒモ付
`https://console.firebase.google.com`でGUIポチポチでプロジェクトを作成

※`sample-lp`をプロジェクト名とする

作ったプロジェクトと紐付ける

```
firebase use --add
```

GUIで作成したプロジェクトを選択する

サーバの起動

```
firebase serve
```

デプロイ

```
firebase deploy
```

`https://sample-lp.firebaseapp.com/`にアクセスしてLPが表示されることを確認

※適宜自前のドメインを紐付ける


## おわりに
簡単に備忘録として書きました。
参考までに。

ひろたつ
Windows10の回復ドライブの作成とリカバリ方法 on Dell製品 

#サマリ
①回復ドライブの作成
②作成できない時の対処法
③リカバリ方法

#結論
それぞれ、以下のサイトを参照すれば基本OK!

①回復ドライブの作成
https://www.dell.com/support/article/jp/ja/jpbsd1/sln297924/windows-10-で回復ドライブを作成する方法?lang=ja

②作成できない時の対処法
https://www.dell.com/support/article/jp/ja/jpbsd1/sln299397/バックアップメディア作成中のエラー-windows-10システムでusb回復ドライブ作成中にエラーが発生する-?lang=ja

③リカバリ方法
https://www.dell.com/support/article/jp/ja/jpbsd1/sln297920/デル製コンピュータでwindows-10をリセットまたは再インストールする?lang=ja#Recovery-media


#本文

DellのWindows10 PCでの回復ドライブの作成奮闘記になります。

4年半前に買ったPC(同じくDell製）がどう考えても寿命だったので、
新しくPCを購入。

オプションのメディアリカバリ￥4,500はさすがに高いと思い、
調べたところ、USBメモリさえあれば回復ドライブが作れるとのことでやってみました☆

USBメモリは、ビックカメラにて、16G ￥880（税抜）のもので。
その差、￥3,500以上は大きいですね～♪

以下のDellの公式サイトより、簡単にできそうだったので早速トライ！！
https://www.dell.com/support/article/jp/ja/jpbsd1/sln297924/windows-10-で回復ドライブを作成する方法?lang=ja

が、放って置いたら途中でディスプレイの電源が落ち、
「回復ドライブを作成できません」
のエラーが。。

「電源とスリープの設定」が最大15分以内でスリープ状態になる設定になっていた。

これじゃダメよね～ってことで、画面、スリープの設定ともすべて「なし」に。

気をとりなおして、2回目。
1時間弱経過後、あともう少しで終わりそうなところで
またもや
「回復ドライブを作成できません」
が発生！！

調べてみると、別のプログラムが影響を与えることもあるらしいので、
以下を参考にさせていただき、他のプログラムを無効に。
https://bibouroku.net/kaifuku-drive

これなら大丈夫だろうと再実施したところ、またまた1時間弱経過後、
「回復ドライブを作成できません」
の文字が。。

もうイヤだ、と思っていたところ、
①コマンドプロンプトを管理者モードで起動し、C:\Recovery\OEMに移動
②del install *.*"を実行し、再起動
すればいいとのこと。
https://www.dell.com/support/article/jp/ja/jpbsd1/sln299397/バックアップメディア作成中のエラー-windows-10システムでusb回復ドライブ作成中にエラーが発生する-?lang=ja

藁にも縋る思いで、上記手順を実施し、
再度回復メディアの作成を試みたところ、無事！！
回復メディアの作成が完了していました！！

出口戦略、すなわち、リカバリ方法を把握しておくことも重要☆
ということで、回復メディアを使用したリカバリ方法への
リンクも貼っておきます～！
https://www.dell.com/support/article/jp/ja/jpbsd1/sln297920/デル製コンピュータでwindows-10をリセットまたは再インストールする?lang=ja#Recovery-media
Element から学ぶ Vue.js の component の作り方 その2 (button)

## button

## 前提
Elemnt 2.52
公式ページ
https://element.eleme.io/#/en-US

### ボタン

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246022/a19a0e19-5912-8cd8-536f-1a2698036b52.png)

#### 用意されている機能

* サイズの指定 3種
* タイプの指定によるデザインテーマの指定
* ボタンの形式(プレーン、角丸、円形)
* ローディングアクション
* 非活性
* アイコンの利用
* オートフォーカス
* ネイティブタイプ(button / submit / reset)

#### 構成
```vuejs
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
  >
```
disable は buttonDisabled と loadng のいずれか。
buttonDisabled  は下記の computed で定義。
親から渡した prop か、elForm を inject しているのでフォームの中においてるとフォームと連動する。

``` javascript
buttonDisabled() {
  return this.disabled || (this.elForm || {}).disabled;
}
```
他は prop の値を素直に受け取っている。


```vuejs
<i class="el-icon-loading" v-if="loading"></i>
<i :class="icon" v-if="icon && !loading"></i>
<span v-if="$slots.default"><slot></slot></span>
```

loading が true の場合は loading icon が表示される。
icon が指定されていて、loading 中でなければ icon が表示される。
slot の指定が可能になっている。

###その他の computed
```javascript
computed: {
  _elFormItemSize() {
    return (this.elFormItem || {}).elFormItemSize;
  },
  buttonSize() {
    return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
  },
```
buttonSize は prop か _elFormItemSize の帰り値の inject している elForm か elFormItems のサイズ、
あと、this.$ELEMENT は何だろう。グローバルな規定があるのかな。※ 要調査

### 所感
第二回目だが、一回目と比べてあまり成長がないな。。
次こそ頑張ろう。
別バイナリの enum。メンバー属性の取得 には気をつける


３年に一回くらいの周期で、沼にハマってるのでメモ。

# 構成
![info](https://dl.dropboxusercontent.com/s/v4usi627xm09ox3/20190208-00_01.png)

- [DLL] に 列挙型を定義する
- 列挙型の各メンバーには `属性` が指定されている
- [exe など] は、DLL の 列挙型から `属性` を取得して利用する

# ハマったこと
デプロイ後、[DLL] 内の列挙型にメンバーを追加してビルドしなおす。
[exe など] はビルドせず、[DLL] を差し替えて実行すると、意図した結果が得られないパターンがある。

# 当システムの初期状態
## ソース
```cs:enumA.dll.cs
namespace KakimoDLL
{
  /// <summary>
  /// カスタム属性
  /// </summary>
  public class TempAttribute : Attribute
  {
    /// <summary>
    /// コンストラクタ
    /// </summary>
    /// <param name="val"></param>
    public TempAttribute(string val)
    {
      Value = val;
    }
    /// <summary>
    /// メンバ
    /// </summary>
    public string Value { get; set; }
  }
  /// <summary>
  /// 検証用列挙型
  /// </summary>
  public enum EnumA
  {
    [Temp("001")]
    Member1,
    [Temp("002")]
    Member2,
    [Temp("003")]
    Member3
  }
}
```

```cs:exeとか.cs
using KakimoDLL;

namespace KakimoExe
{
  class Program
  {
    static void Main(string[] args)
    {
      var enumVal = EnumA.Member2;  // Member2 メンバの属性を取得してみる
      
      var enumType = enumVal.GetType();
      var enumField = enumType.GetField(Enum.GetName(typeof(EnumA), enumVal));
      
      var attr =(TempAttribute[])enumField.GetCustomAttributes(typeof(TempAttribute), false);
      Console.WriteLine(attr[0].Value);   //
    }
  }
}
```
## 実行結果
```
002
```

# DLL 改修後も、一応動くパターン
## ソース (列挙型部分のみ)
```
  /// <summary>
  /// 検証用列挙型
  /// </summary>
  public enum EnumA
  {
    [Temp("001")]
    Member1,
    [Temp("002")]
    Member2,
    [Temp("003")]
    Member3,
    [Temp("004")]
    Member4,
  }
```
## 実行結果
```
002
```

# DLL 改修後、意図しない結果になるパターン
## ソース (列挙型部分のみ)
```
  /// <summary>
  /// 検証用列挙型
  /// </summary>
  public enum EnumA
  {
    [Temp("000")]
    Member0,
    [Temp("001")]
    Member1,
    [Temp("002")]
    Member2,
    [Temp("003")]
    Member3,
  }
```
## 実行結果
```
001
(期待する結果は '002' )
```

# 原因

>列挙型はプログラムの内部では整数として扱われていて、 整数型に変換することでその値を取り出すことが出来ます。 特に値や型を指定しなければ、列挙型は int として扱われ、 各メンバーは宣言した順番に 0, 1, 2, …, n となります。

[列挙型 - ++C++; // 未確認飛行 C  ](https://ufcpp.net/study/csharp/st_enum.html)

[exe など] がコンパイルされた時点で `EnumA.Member2 == 1` です。
[exe など] が実行されると、`EnumA の 値が 1 のメンバーに追加されている属性` を取得しようとします。 

"DLL 改修に意図しない結果になるパターン" のように、`EnumA.Member2` の宣言順をかえてしまうようなメンバー追加をしてしまうと、[exe など] が意図していた結果が取得できなくなります。

# 対応策

1. enum メンバーの順番が変わらないように追加宣言する
2. enum メンバーに明示的に値を指定しておく
3. そもそもの実装を考えなおす
Rancher1.6系でのrancher-nfsの使い方

RancherにはボリュームプラグインとしてNFSをマウントする機能がある、というのはちょっと調べれば出てくる話ですが、肝心の使い方に触れた記事ってあんまり無いようなので、書いておこうと思います。

# rancher-nfsとは？
dockerでコンテナを作るときに、任意のディレクトリをコンテナにマウントすることができますが、「ボリュームプラグイン」を使うことでローカルディレクトリ以外のものもマウントできるようになります。
rancher-nfsはNFSをマウント可能にするボリュームプラグインですが、RancherのUIから設定できて、クラスタ全体で同じ設定を共有できるので、HighAvailabilityなコンテナを作成するときに向いていたりします。

# インストール
せっかくなので、インストールから設定まで、すべてRancherのUIでやってしまいましょう。

まず、カタログからrancher-nfsをインストールします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34966/a15a5dd6-c40a-5ce7-6d69-f5fea2752992.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34966/3c5654b4-ad4e-f09a-a00b-d21c46be8e48.png)

このような設定画面が出てくると思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34966/be47a9dc-bad0-af4e-c101-3c3f3b836408.png)

<dl>
<dt>NFS Server</dt><dd>デフォルトのNFSサーバーを指定します。<br>ボリュームを自動作成するときに使われます。<br>この記事の運用パターンではボリュームごとに接続先を指定しますので、ここでは適当に入れてかまいません。</dd>
<dt>Export Base Directory</dt><dd>ボリュームを自動作成するときの、ベースディレクトリです。<br>NFS Serverで指定したサーバで、このディレクトリをExportして、書き込み可能にしておくと、この下に自動的にディレクトリが作られたりします。</dd>
<dt>Mount Options</dt><dd>mountコマンドで指定するオプションです。省略可</dd>
<dt>NFS Version</dt><dd>環境に合わせて3か4を選んでください。だいたいは4で大丈夫だと思います。</dd>
<dt>On Remove</dt><dd><font color="red">これがわかりません！</font><br>retainは残すという意味で、purgeは捨てるという意味なので、怖いからretainを選んでいます。</dd>
</dl>

これでインストールすると、Rancherのクラスタの全hostにnfs-driverがdeployされます。
このnfs-driverはprivilegedで、`/var/lib/rancher/volumes`をマウントしています。
`/var/lib/rancher/volumes`の下に指定されたNFSサーバのディレクトリをマウントし、そのマウント先をまた別のコンテナがマウントして使う仕組みになっています。
なので、コンテナはNFSクライアントをインストールする必要も、privilegedな権限も必要ありません。

# ボリュームを定義する
コンテナでマウントするためには、rancher-nfsにボリュームを作ってもらわなければなりません。
それを自動化してくれるのが、RancherのStorage Driverです。
実際に作ってみましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34966/d9da4515-d3e2-e2dd-5ac7-e24a3d189306.png)

Storage画面へ行ってください。
すると、rancher-nfsの表記があると思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34966/bfc90ea8-17c9-49a4-f71e-b5549824d0ae.png)

Add Volumeをクリックすると、新規にボリュームを定義することができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34966/6e2a79b2-3a74-44db-5d70-aa9a5a9ff2b3.png)

NameとDescriptionは読んで字のごとくですが、この記事のキモはDriver Optionsです。
Driver Optionsに`host`と`export`を定義することで、ボリュームごとに、任意のNFSサーバ、任意のディレクトリを指定することができます。

# コンテナにマウントする
マウントするほうは、通常通りローカルディレクトリをマウントするのと同じ画面で、さきほど作ったボリュームの名前を指定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34966/4c01943c-316d-4491-b145-70abc91c85d3.png)

ここで、ボリュームに定義されていない、`/`から始まるフルパスを指定すると、rancher-nfsを経由せずにhostのローカルディレクトリもマウントできます。
rancher-nfsとlocalは併用可能です。

これで、コンテナがどこのhostに移動しても大丈夫な、HighAvailabilityなコンテナに一歩近づきました。
Pythonのジェネレータの動きだけを簡単に理解する

Pythonのジェネレータの詳細な説明や使い道については以下の記事が参考になります。

- [Pythonのイテレータとジェネレータ](https://qiita.com/tomotaka_ito/items/35f3eb108f587022fa09)
- [Pythonのジェネレーターってなんのためにあるのかをなるべく分かりやすく説明しようと試みた](https://qiita.com/keitakurita/items/5a31b902db6adfa45a70)

ジェネレータの詳細や使い道はともかく、動きだけを見ると以下のようになります。

- ループで呼び出すとジェネレータ関数内の文を順次実行し、yieldした値が取り出され、そこで処理が中断される。
- 次に呼び出された時は、yieldの次の文から処理が再開される。
- ジェネレータ関数内の処理が全て終了するとループも終了する。

次のようなプログラムを実行してみると理解しやすいと思います。

```python
def generator():
	print('a')
	yield 1
	print('b')
	yield 2
	print('c')
	yield 3
	print('END')

for y in generator():
	print(y)
	print('#')
```

出力

```
a
1
#
b
2
#
c
3
#
END
```
【React Native】Error : Failed to load bundle localhost:8081

##エラー

Error : Failed to load bundle localhost:8081

##対処法

コマンド上で
npm add @babel/runtime
npm install

またはPortを変更する
react-native run-ios --port=8088


参考URL
https://stackoverflow.com/questions/52637341/error-failed-to-load-bundle-localhost8081
Unityの教科書レベル２　メモ

#fの必要性について
変数の初期化について小数を代入するときは後ろに"f"をつける
例) float height = 1.0f;
これをつけないとdouble型だと認識されてしまいエラーが出るため
（C#ではdouble型の値をfloat型に代入することは禁じられている)

#配列の準備(基礎中の基礎)
例だけ示す
例) int[] hairetsu = new int[10];

#メソッドは引数は複数個渡せるが返り値は１つだけ

#クラスの扱いについて
クラスは関係のある変数とメソッドをひとまとめにできる。
作成したクラスはintやstringのように型として扱える
例) Player myplayer = new Player();
（ここでPlayerはクラス名、 myplayerは変数名の扱いである）

#magnitudeメンバ変数について
ベクトルの長さを求めることができる
例) float dir = new Vector2(3.0f, 4.0f).magnitude;
JenkinsでOpenJDKを自動インストール

JenkinsにはOracle JDKを自動インストールする機能があります。
複数スレーブがあるときに特に便利で、各スレーブに手動インストールしなくて済みます。

Jenkinsで自動インストールできるOracle JDKは9までとなっています。

![自動インストール](https://qiita-image-store.s3.amazonaws.com/0/21396/361fb8dd-3f32-8315-c5ba-b73066e92f7e.png)

この記事ではOpenJDK11を自動インストールする方法を紹介します。

今回例に使ったJenkinsのバージョンは ver. 2.163 です。
UIはバージョンアップにより変わる可能性があるので注意してください。

# 設定方法

## Global Tool Configuration を開く

※要管理権限

1. Jenkinsの管理 を開く
2. Global Tool Configuration を開く
3. インストール済みJDKを押す

操作画面
![Global Tool Configuration を開く](https://qiita-image-store.s3.amazonaws.com/0/21396/f52460fd-3c99-0913-f00a-463cce51ca8f.gif)

## インストールするJDKを設定する

1. JDK追加 を押す
2. JDKの名前を入力する。(自分がわかりやすい名前)
3. インストーラの削除 を押し、「java.sun.com からインストール」を消す
4. インストーラの追加 から 「*.zip/*.tar.gz展開」を選ぶ
5. アーカイブダウンロードURL と アーカイブを展開するサブディレクトリ を入力する(入力内容は後述)
6. Save を押して設定を保存する。

操作画面
![インストールするJDKを設定する](https://qiita-image-store.s3.amazonaws.com/0/21396/3f119eb8-de98-f19a-0697-50fa8d57cee2.gif)

アーカイブダウンロードURL と アーカイブを展開するサブディレクトリ はOSにより下記のように入力します。
ラベルは空欄にします。ただし、異なるOSのノードがある場合はラベルを使用します。(後述)

| | アーカイブダウンロードURL |アーカイブを展開するサブディレクトリ|
|:---|:---|:---|
| Linux | `https://download.java.net/java/GA/jdk11/9/GPL/openjdk-11.0.2_linux-x64_bin.tar.gz` |jdk-11.0.2|
| Mac | `https://download.java.net/java/GA/jdk11/9/GPL/openjdk-11.0.2_osx-x64_bin.tar.gz` | jdk-11.0.2.jdk/Contents/Home |
| Windows | `https://download.java.net/java/GA/jdk11/9/GPL/openjdk-11.0.2_windows-x64_bin.zip` | jdk-11.0.2 |

ダウンロードURLは https://jdk.java.net/11/ から取得しました。
今回の例では JDK 11.0.2 を使いました。
アーカイブを展開するサブディレクトリは実際に解凍してみたときに `bin/java` があるディレクトリを指定します。

以上で設定は完了です。

# 実際に使用してみる

ジョブの設定で先程設定したJDKを選びます。
※2つ以上JDKを設定しないと選択できないようです。

![JDK選択](https://qiita-image-store.s3.amazonaws.com/0/21396/3a415c4a-f877-944c-bd2f-5b88d1f5940e.png)

Jenkins pipelineでやる場合

```groovy
pipeline {
    agent any

    tools {
        jdk 'JDK11'
    }

    stages {
        // ...
    }
}
```

実際に実行してみると自動で解凍してパスを通してくれてます。
アーカイブを展開するサブディレクトリ の設定が間違えているとうまくいかないので注意です。

```
Started by user Admin
Building on master in workspace /var/jenkins_home/workspace/test-job
Unpacking https://download.java.net/java/GA/jdk11/9/GPL/openjdk-11.0.2_linux-x64_bin.tar.gz to /var/jenkins_home/tools/hudson.model.JDK/JDK11 on Jenkins
[test-job] $ /bin/sh -xe /tmp/jenkins3984802891567537123.sh
+ java -version
openjdk version "11.0.2" 2019-01-15
OpenJDK Runtime Environment 18.9 (build 11.0.2+9)
OpenJDK 64-Bit Server VM 18.9 (build 11.0.2+9, mixed mode)
Finished: SUCCESS
```

# 異なるOSのノードがある場合の設定

スレーブの登録がなく単一ノードだけしかない場合や、すべてのスレーブが同じ種類のOSならば以上の設定で大丈夫ですが、
異なるOSのノードがある場合は以下の設定でOSごとにインストールするアーカイブを切り替える必要があります。

「*.zip/*.tar.gz展開」を複数追加し、それぞれの設定を入れます。
OSを自動判別はしてくれないため、各ノードに設定したラベルで切り替えるようにします。
各ノードのラベルは Jenkinsの管理 > ノードの管理 > （ノード名）(※ master等) > 設定 で設定したものを使います。

![設定例](https://qiita-image-store.s3.amazonaws.com/0/21396/bd17acb3-d152-acbd-c6a4-2e5b100b2372.png)
エンジニアの行動も心理要因に依存する。心理療法的な日記メソッドで、自己分析をして問題解決したい。 #ポエム

エンジニアの行動も心理要因に依存する。心理療法的な日記メソッドで、自己分析をして問題解決したい。 #ポエム

# なぜ「わからないことを、人に聞くこと」がこんなに怖いのか、言語化と、自己分析をしておきたい。 

問題提議。

# 分からないことを、聞かない時の弊害

- 要件定義がうまく出来ずに、あとから膨大な手戻りが発生する。
- プロジェクトのことがいつまでも理解できずに、なおさら質問できない悪循環が生まれる。

# 問題の本質はなんだろう

- たとえば、大きなデメリットを理解していても、それでも動けない自分に気づくならば、それは理解の問題ではなく、心理的要因の可能性が高いんじゃないだろうか。
- 世の中の問題の多くは「頭では理解しているはずなのに、なぜか、出来ない」ことによって起こると思う。
- 個人の性格がボトルネックになりがち。自分の性格分析は、してもし足りないぐらいだと思う。


# 「なぜ質問しづらいか」を自己分析する作業をしたい。

- 一般的に、心理療法では日記をつけることが勧められているが、これを自己分析にも応用したい。
- 僕の場合は、日記形式で思考をつらつらと連ねていく行為に、解決の糸口があるような実感を得ている。
- こんな風にMarkdown形式で見出しをつけながら、見出しと箇条書きで、まとめを作っていく。それすら辛く感じられるなら、絶対にバックスペースを押さない、ジャーナリング的手法でも良いかもしれない。

# さあ、自己分析するぜ

- ここでいったんエネルギー切れ。本題までたどり着けなかった。またあとでやろう。


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/566








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Microservicesアンチパターンについて ②

[前回](https://qiita.com/soichiro0311/items/cea362e0617da8b327d4)に引き続き、以下の記事を読んで学んだMicroServiceのアンチパターンと、それに対するプラクティスを知識整理のためまとめる。

- [Microservices antipattern and pitfalls](https://www.oreilly.com/ideas/microservices-antipatterns-and-pitfalls)


## Repoting AntiPattern

### About Microservices
- 業務要件によっては、複数の`Microservice`からレポートや帳票を作成する必要がある可能性がある。この際のアンチパターン。
- 複数の`境界付けられたコンテキスト`からレポートを作成し、保守していかなければならない。


### 4Patterns

記事では四つのパターンが紹介されていた。

### database pull model
- 直接複数の`Microservice`のデータベースにアクセスしてデータを取得する`Microservice(ReportCreater)`を作るパターン。
- これはタイムリーにデータを取得し、レポートを作成できるという意味では優れているが、レポート作成対象のデータを保有する複数の`Microservice`のデータベースと`Microservice(ReportCreater)`が密結合してしまうことになる。
- データ取得対象の`Microservice`のデータベースの変更は`MicroService(ReportCreater)`へ影響を与えてしまうことになる。

### HTTP pull model
- レポート作成対象のデータを保有する複数の`Microservice`に対して`RestAPI`でデータ取得リクエストを行う`Microservice(ReportCreater)`を作るパターン。
- このパターンは`RestAPI`を使っている分、データ取得元の`Microservice`に依存するようなことはないが、レポート作成対象のデータを保有する`Microservice`の返すべきデータを作成する処理が複雑であった場合や蓄積されたデータが膨大になってきた場合、非常に低速になる可能性がある。
- リアルタイムで表示する必要がないレポートであれば、このパターンも検討してもいいと思う。

### batch pull model
- これは`database pull model`と同じく直接複数の`Microservice`のデータベースにアクセスしてデータを取得するが、それを`batch process`にやらせて、`batch process`用のデータベースに保存しておいて、`Microservice(ReportCreater)`が`batch process`用のデータベースから必要な時にデータを取得するパターン。
- `batch process`で定期的に他の`Microservice`のデータを取得することで、レポート作成のレイテンシを維持できる点が`HTTP pull model`の問題を解消している。
- 記事では`HTTP pull model`と同じくデータベースと`batch process`が密接に結合してしまうアンチパターンとされているが、`database pull model`と同じでは？と思った。

### event-based push model
 - 唯一の`push`型のパターン。これはレポート作成対象のデータを保有する`Microservice`がそのデータが登録or更新された時にそれぞれが非同期でイベントを発行し、それを`Microservice(DataCapture)`に通知するというパターン。
 - `Microservice(DataCapture)`は通知されたイベントを自分の保有するデータベースに反映させ、`Microservice(ReportCreater)`が`Microservice(DataCapture)`のデータベースからデータを取得し、レポートを作成する。
 - このパターンは`Microservice`間の依存を最小限にできている。データベースと実装も密に依存していない。ただ、`Microservice(DataCapture)`はレポート作成対象のデータを保有する`Microservice`がどんなインターフェースかを知っていれば良い。

![ReportAnti.png](https://qiita-image-store.s3.amazonaws.com/0/301386/b77defd3-dda1-afd9-75f1-306faf096209.png)


この4パターンを以下の二つの基準で評価してみると、`event-based push model`が最も優れたパターンで、`batch pull model`が最もアンチパターンだとされている。

- `Microservice`間の依存度
- レポート作成までのリードタイム

## アンチパターンについて
`Microservice`のアンチパターンを学んでみて、`Microservice`なアーキテクチャを作ろうとするときに最も気にしなければいけないことは`依存`だと感じた。
サービス間の依存、実装とデータベースの依存、一つのサービス内のモジュール間の依存。これらをできるだけ疎にすることが、テスタビリティ・リリーススピード・開発効率を向上させる鍵となる。
そして0から`Microservice`アーキテクチャを構築することよりも、モノシリックなソフトウェアを`Microservice`に移行することの方が　１００倍難しそう。。
[Java]Amazon Corretto8のインストール

#はじめに
AWSが先日２月４日にAmazon Corretto 8（独自OpenJDK）を正式リリースしたという[記事](
https://www.publickey1.jp/blog/19/awsopenjdkamazon_corretto_820236.html)を読みまして、試しにインストールしてみることにしました。

##前提
Macで実施します。

##手順
1. ダウンロード 
まずこちらの[AWSのサイト](https://docs.aws.amazon.com/corretto/latest/corretto-8-ug/downloads-list.html)からJDKをダウンロードしてきます。
私の場合はMacなのでmacOS x64の「amazon-corretto-8.202.08.2-macosx-x64.pkg」を選びました。各自のOSに合わせたものをDLします。
<img width="872" alt="スクリーンショット 0031-02-09 0.48.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/311111/cb2615b0-34c9-5151-48f1-5187c847a665.png">

2. インストール 
DLしたpkgファイルをダブルクリックしてウィザードに従ってインストールします。以下のような画面が出ますが、とりえあず特殊なことをしたい場合を除き、何もカスタマイズせず続けて完了させます。
<img width="621" alt="スクリーンショット 0031-02-09 0.54.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/311111/751835c5-3edd-e652-7c0e-373ea8a79b05.png">

3. 設定 
モノは/Library/Java/JavaVirtualMachines/に入りますが、最後にターミナルで以下のコマンドを打ってインストールを完了させます。また、JAVA_HOMEを設定したい場合は結果に表示されたパスをexportコマンドで指定してあげます。
 
```terminal
#コマンド
$ /usr/libexec/java_home --verbose

#結果出力
$ Matching Java Virtual Machines (2):
    1.8.0_202, x86_64:	"Amazon Corretto 8"	/Library/Java/JavaVirtualMachines/amazon-corretto-8.jdk/Contents/Home

#（任意）JAVA_HOME設定
export JAVA_HOME=/Library/Java/JavaVirtualMachines/amazon-corretto-8.jdk/Contents/Home
```

以上です。
上記はAWSのサイトに書かれている手順なので一応間違ってはいないかと思います。
（JAVA_HOMEの設定はプロファイルとかに書くべきですかね）

私は普段Eclipseを使っているので、一応適当なプロジェクトでこのJDKを指定して、（当たり前ですが）きちんと動くことを確認しました。

#終わりに
正式リリースとしてはまだJava8だけのようですが、そのうち11もリリースされるようです。サポート期限の違いはあれどAdoptOpenJDKという選択肢もありますね。いずれにしても、これでJavaもまだまだ生き続けるかなと。
Django 外部認証キーの仕組み

Djangoを用いた外部キーのやり方

参考サイト

yamagablog
https://ymgsapo.com/table_relation_foreignkey/

CSVファイルをインポートするのも含む
https://qiita.com/otera05/items/25d5bad759d39d61bc40

ナリトさんのブログ
https://narito.ninja/blog/detail/60/
配列を指定サイズで分割



## ライブラリ使わずにやる

-  `Array.reduce()`、spread operator, `Array.splice()` を組み合わせる

```js
const arr = [...Array(100).keys()];
// => [0, 1, 2, 3, 4, 5, 6, 7, 8,...,99];

const size = 8;

const result = arr.reduce(
  (prev, curr, index) =>
    index !== 0 && index % size !== 0
      ? [...prev.splice(0, prev.length - 1), [...prev[prev.length - 1], curr]]
      : [...prev, [curr]],
  []
);
//=> [
//   [0, 1, 2, 3, 4, 5, 6, 7],
//   [8, 9, 10, 11, 12, 13, 14, 15],
//   [16, 17, 18, 19, 20, 21, 22, 23],
//   [24, 25, 26, 27, 28, 29, 30, 31],
//   [32, 33, 34, 35, 36, 37, 38, 39],
//   [40, 41, 42, 43, 44, 45, 46, 47],
//   [48, 49, 50, 51, 52, 53, 54, 55],
//   [56, 57, 58, 59, 60, 61, 62, 63],
//   [64, 65, 66, 67, 68, 69, 70, 71],
//   [72, 73, 74, 75, 76, 77, 78, 79],
//   [80, 81, 82, 83, 84, 85, 86, 87],
//   [88, 89, 90, 91, 92, 93, 94, 95],
//   [96, 97, 98, 99]
// ];

```


## lodash使える環境

```js
const arr = [...Array(100).keys()];
const size = 8
const result = _(arr).chunk(size).value()
```
とあるエンジニアの問題意識。 意外にコスト感の高い #Markdown の論理マークアップ。会社の理想は基礎的勉強に理解のあること。優秀なエンジニアの口癖も「あれ、今何しようとしてたっけ」。 #ポエム

とあるエンジニアの問題意識。 意外にコスト感の高い #Markdown の論理マークアップ。会社の理想は基礎的勉強に理解のあること。優秀なエンジニアの口癖も「あれ、今何しようとしてたっけ」。 #ポエム

- Github ISsue や Qiitaなどに記事を書く時、Markdown でのマークアップに謎のコスト感を感じる。このコスト感はあまりに強大で、見出しをつけることさえ、本当にわずらわしく感じる。ほんのキー数個を叩くだけ、半角スペースを押すだけのことに、どうしても高いコスト感ある。なのでこうやって今は、箇条書きのリスト一個あたり、改行もせずに、つらつらと思うことを書き留めるスタイル。論理構成を最小化したい。それでトピックが大きくなっても、別の記事を作ろうとしたりしない。新規ポストこそ、他の世界にジャンプするかのような、莫大なコスト感がある。てきとうにScriptをかまして、Zapierとか経由して、見出し付、リスト化をしてくれるようにでもしようか。インプットのしやすさの問題と、アウトプットの見やすさの問題は、分離できるかもしれない。
- 問題意識を感じて、それをメモ用のアプリケーションに記録しようと思っている最中に、全て忘れて、何を考えていたか分からなくなってしまう問題に対策したい。こう書くといかにも頭が悪そうに見えるが、こういった人間の脳の、メモリの揮発的な現象は、よく観察すると、いたるところで起きている。僕が見る限り、複数の優秀なエンジニアの口癖も「あれ、今何しようとしてたっけ」だったり。
- エンジニアとして理想の労働環境について、いまいちど洗い直したい。たとえ夢物語だとしても、理想を。エネルギー管理への理解があること、昼寝ができること、自分が興味関心のある分野の、基礎的勉強をしても、決して怒られないこと。会社として本当にアウトプット推奨で、アウトプットが最大学習になるということに、理解があること。集中できる静かな環境があること。願わくは、DEEP WORK に紹介されているような、瞑想的集中エリアと、人と仕事ができるざわめきエリアが別れていて、交互に、自由に行き来ができること。

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/564








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
とあるエンジニアの問題意識。

とあるエンジニアの問題意識。

- Slackが集中力を阻害する。Slackを一瞬でも開くと、30秒は今やっていることを忘れる感覚がある。注意残余が起こる。だがこれなしには業務は進まぬ。あまりにも誘惑が大きい。集中力が分断されるのに慣れきってしまうと、そこから戻る方法がまるで分からなくなる。人間の脳はマルチタスキングはそもそも出来ないというが、比較的、それを上手にこなせている人はすごいと思う。
- チームやプロジェクトの状況によっては、ひたすらに単純作業をせざるを得ない場合もある。慣れ親しんだプロジェクトだと、色々な実装が既に軌道に乗っていて、エンジニアリングやプログラミングというよりも、事務作業をやっているような感覚になることがある。単純作業から全力で逃げようとしている自分に気づくが、誰かがやらなければ仕方がない。単純作業をどのような呼吸法で、メンタリングで乗り切ろうかという作戦を立てたい。難易度が低すぎる仕事は実はものすごく疲れる。生産性も悪くなる。
- プログラミングの善悪は、構成メンバーによって変わる。たとえばリファクタリングを是とするか、非とするかもそうだ。仮に4人のチームの3人が、リファクタリングを是としていたら、それが開発の是となる。ソフトウェア開発も人間がやっていることなので、絶対的な正解は存在しない。常に人間というコンテキストに依存している。プログラミングにおいて是非を考える時、必ず人を思いかべる。Aさんがああ言っていたな、とか、Bさんがこう考えているな、とかいうアンカーが羅針盤の役割を果たす。僕のように絶対主義を持たない日和見プログラマは、そのぐらいがちょうど良い。

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/563








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
C++でファイルから一文字づつ読み込む方法

#C++でファイルから一文字づつ読み込む方法
##内容
以下のようなテキストデータ(map_data.txt)を読み込んでそのまま整数データとして格納する方法をメモ。

11111
10001
10001
11111

1:障害物
0:通行可能

想定としては、A-starのような経路探索用に地図をグリッドデータとして保存する場合でしょうか。
意外と目的にストレートに合うものがなかったので、初心者ですが何かの役に立てば。

##システム
OS　　：Windows10からVirtualBoxを使ってUbuntu 16.04上で
言語　：C++

##コード

```cpp:qiita.rb
#include<iostream>
#include<Windows.h>
#include<stdlib.h>
#include<fstream>
using namespace std;

int main(){
	int i,j;
	char ch;
	int map_x = 5;
	int map_y = 4;
	int road_data[5][4] = {};

	i = 0;
	j = 0;

	ifstream fp("map_data.txt");

	if(fp.fail()){
		cout << "Can't Open the file!\n";
		exit;
	}
	
	while(fp.get(ch)){
		if(ch != '\n'){
			road_data[j][i] = atoi(&ch);
			i = i + 1;
		}else{
			i = 0;
			j = j + 1;
		}
	}

	for (i = 0; i<map_y; i++){
		for (j = 0; j<map_x; j++){
			cout << road_data[i][j];
		}
		cout << "\n";
	}
	
	cout << "1:Obstacle\n";
	cout << "0:Road\n";
	
	return 0;

}
```
流れは以下の通り。
①ファイルを開く
②ファイルから一文字読み込んで(fp.get(ch))
③改行文字(\n)でないか判定して
④改行文字でないなら、読み込んだ文字(文字で読み込まれます)を整数に変換し(atoi(ch))データ格納用の変数(road_data)の行方向に格納※atoiを使用する場合は#include<stdlib.h>が必要
⑤改行文字なら、格納先の変数の列を移動して(i = i + 1)
⑥続けて行方向に格納していく
⑦　②～⑥をファイル終端まで継続
⑧最後に、格納したデータを確認のために表示

また、すぐわからなくなるんですが、配列の行列はarray[i][j]を例にとると、
　 →j(行)
↓
i
(列)

となっています。参考までに。

地図データのサイズが固定されていたり手抜きなところもありますが、以上よろしくお願いします。
【用語】静的と動的

<h1>静的と動的</h1>
基本的にサーバー側とやり取りするのが動的Webプロジェクト
クライアント側で完結するのが静的Webプロジェクト

例1）静的Webプロジェクト
　企業サイトのように画面の情報が切り替わらないのが静的Webプロジェクト（※下記例外あり）

例2）動的Webプロジェクト
　ログイン画面でログインした後、「ようこそ XXXX さん」となるのが動的Webプロジェクト

例外）広告バナーのようにJavaScriptを使用して画像を切り替えるなる<b>クライアントサイド</b>で操作するものでも静的Webプロジェクトと呼ばれる

例外があるので、動的/静的を区別する場合、以下の技術を使用しているかで判断すると分かり易い
※JavaScriptの技術を動的と捉える方もいるので、注意が必要

①静的Webプロジェクト
　・クライアントサイド
　・HTML/CSS/JavaScript
　・ブラウザ（IE/Google Chrome/Safari）だけで動作するもの

②動的Webプロジェクト
　・サーバーサイド
　・Java/C#/PHPのようにサーバーとやり取りする場合
DateFormatはスレッドセーフじゃない

下記のように[DateFormat][1]のインスタンスをメンバ変数として保持して使いまわしていたところ、Fabricにクラッシュレポートが上がってきました。

```kotlin
class Util {

   companion object {
       private val sDateFormat = SimpleDateFormat("yyyy/MM/dd")

       fun convert(date: Date): String {
           return sDateFormat.format(date)
       }
   }

}
```

調査したところ複数スレッドから呼ばれる実装になっており、[ドキュメント][1]にもあるように毎度インスタンスを生成するように変更して対応しました。

```kotlin
class Util {

   companion object {
       fun convert(date: Date): String {
           return SimpleDateFormat("yyyy/MM/dd").format(date)
       }
   }

}
```

[1]:https://docs.oracle.com/javase/jp/8/docs/api/java/text/DateFormat.html
Windows 10 のレジストリに新元号が登録された場合の和暦から西暦への変換を試してみた

## 目的

Windows 10 のレジストリに、元号ごとの開始日付や名称が登録されていますが、新元号が登録された場合の和暦から西暦への変換を試してみました。

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Nls\Calendars\Japanese\Eras

```text
"1868 01 01"="明治_明_Meiji_M"
"1912 07 30"="大正_大_Taisho_T"
"1926 12 25"="昭和_昭_Showa_S"
"1989 01 08"="平成_平_Heisei_H"
```

## 前提

新元号が設定された想定で、レジストリに下記文字列値を追加しました。

```text
"2019 05 01"="ふが_ふ_Fuga_F"
```

## 確認

下記プログラムをVisual Basic（Visual Studio 2017 + .NET 4.5.2）で作成しました。

> 最近は Visual Basic ".NET" って呼ばないのか…。

```VisualBasic
Module Module1

    Sub Main()
        ' 現在日時の表示
        Dim NowDate = Date.Now
        Console.WriteLine("現在日付　　　：" & NowDate.ToString("yyyy/MM/dd"))

        ' 日本カルチャとカレンダーの設定
        Dim JPCulture As System.Globalization.CultureInfo = New System.Globalization.CultureInfo("ja-JP", True)
        JPCulture.DateTimeFormat.Calendar = New System.Globalization.JapaneseCalendar()

        ' 元号なしの和暦を西暦に変換
        Console.WriteLine()
        Console.WriteLine("①元号なしの和暦を西暦に変換（レジストリErasに新年号（仮）を登録済）")

        Dim SrcDate1 As String = "32/12/31"
        Console.WriteLine("変換元（和暦）：" & SrcDate1)

        Dim DstDate1 As DateTime = DateTime.ParseExact(SrcDate1, "yy/MM/dd", JPCulture)
        Console.WriteLine("変換後（西暦）：" & DstDate1)

        ' 元号ありの和暦を西暦に変換
        Console.WriteLine()
        Console.WriteLine("②元号ありの和暦を西暦に変換（レジストリErasに新年号（仮）を登録済）")

        Dim SrcDate2 As String = "平成32/12/31"
        Console.WriteLine("変換元（和暦）：" & SrcDate2)

        Dim DstDate2 As DateTime = DateTime.ParseExact(SrcDate2, "gggyy/MM/dd", JPCulture)
        Console.WriteLine("変換後（西暦）：" & DstDate2)

        Console.ReadKey()
    End Sub

End Module
```

## 結果

元号なしの和暦「32/12/31」は「2050/12/31」となりました。まだ新元号が開始していないのに2050年ですか。
→　個人的には想定外

元号ありの和暦「平成32/12/31」は「2020/12/31」となりました。
→　想定通り

![WS000000.JPG](https://qiita-image-store.s3.amazonaws.com/0/283306/0865c2f2-f98c-dee1-96a1-b4aa760e2db6.jpeg)


元号なしの和暦から西暦の変換は、最新のレジストリ値を基準として西暦に変換するようですね。
やはり基準となるべき元号がないといけないようです。

## 最後に

銀行から「入出金明細」の全銀フォーマットの和暦を変更しますよ。というお知らせを受けますが、
もうね、**この時代に元号なしの和暦ですか？**というツラみしかないですね。

310430　→　010501

このように、もともと元号のない和暦の"31"が2019年5月1日から"01"になりますというお知らせなので、
元号なしの和暦がどのように変換されるか確認してみたのです。

こんなときに余裕で受け身の取れるシステムなら良いのですが、そういうわけにはいかず…。
**日付も考慮しながら**、決め打ちで"30"か"31"なら平成、"01"から"29"なら新元号のような変換を組み込まないといけないようです。

マイクロソフト社が Windows 10 機能更新プログラム (2018 Spring Release) で？？元号を設定していましたが、
これからどのようなタイミングで何が行われるのか気になります。
GASでセルのデータを扱うときに、セルの列数と配列のインデックスが1ずれるのがややこしい問題

# 課題

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/8612/39a4a8b2-17ad-05ac-c49e-43f794d32847.png)

というスプレッドシートのデータをGASで扱いたいとします。

- スプレッドシートの世界では、A列の列数は1
- GASの世界での2次元配列では、A列のindexは0

というのになかなか慣れませんでした。

さらに列数が多いスプレッドシートを扱うときに、「I列って8？9？」みたいな事になるし、
列が増減したときにコードを修正するのも「どこがどこだっけ？」ってなって困りました。


# 解決策

こんなの当たり前かもしれないし、もっといい方法があるかもしれないのであったら教えてほしいです！


```js:修正前
function columnIndex_before() {
  const sheet = SpreadsheetApp.getActive().getSheetByName('xxx');
  const data  = sheet.getDataRange().getValues();
  
  for (let i=1; i<data.length; i++){
    // data[i][0]ってなんだっけ？ってなる。
    Logger.log(data[i][0] + ":" + data[i][1] + ":" + data[i][2]);
  }
}
```


```js:修正後
function columnIndex_after() {
  const sheet = SpreadsheetApp.getActive().getSheetByName('xxx');
  const data  = sheet.getDataRange().getValues();
  
  // 列が追加・削除されたときも、ここだけ変えればfor文の中は変更しなくて良くなる
  const idIndex   = 0;
  const nameIndex = 1;
  const mailIndex = 2;
  
  for (let i=1; i<data.length; i++){
    // コード量は増えるけど認識しやすくなる
    Logger.log(data[i][idIndex] + ":" + data[i][nameIndex] + ":" + data[i][mailIndex]);
  }
}
```

```:実行結果
1:Aさん:a@example.com
2:Bさん:b@example.com
3:Cさん:c@example.com
4:Dさん:d@example.com
```
測域センサでインタラクティブ！（3）

[測域センサでインタラクティブ！（1）](https://qiita.com/snafkinliberty/items/b917cb02c70c7c95e64b)
[測域センサでインタラクティブ！（2）](https://qiita.com/snafkinliberty/items/2dae116bb1fb987c1ddf)の続きです。

前回までで、**hokuyoChop**で指をさした位置の座標を取得することができました。ただしこれは、**hokuyoChop**での値なので、これをTouchDesignerの画面の-0.5<X<0.5, -0.5<Y<0.5の値に変換してあげる必要があります。

こういう時は、まずは実験的にデータを取ってみると良いです。

# Step1 円の配置
まずは、投影した画面上の座標を正確に得るため、なんでも良いですが、分かりやすいので**circleTop**を表示します。
**circleTop**を作成し、映像を壁に投影してみて下さい。円の半径は**0.02**など小さめにすると良いです。
円の位置をずらせば、-0.5<X<0.5, -0.5<Y<0.5であることが分かります。
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/311653/b80b9741-4116-9687-5515-703a051dfad3.jpeg)

# Step2 円の座標とhokuyoChop座標の取得
ここで、TouchDesignerの画面上の座標は**X**,**Y**、**hokuyoChop**で取得する座標は**x**,**y**とします。
画面中心(X,Y)=(0,0)の時の(x,y)を前回作成した**constantChop**の値で確認します。
実際に円の位置も合わせて、指をさして確認してみて下さい。
![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/311653/8669caaf-23f5-c2d4-272a-d1e789b90034.jpeg)
あとは、(X,Y)=(0.4,0.4),(0.25,0.25),(-0.25,-0.25),(-0.4,-0.4)とかで、同様に(x,y)を指さして確認します。

# Step3 x-Xとy-Yの散布図と近似直線作成
ここからはPythonでもいいですが、簡単にするため、ExcelでX,Y,x,yのデータを入力してx-Xとy-Yで2つの散布図をかいてみて下さい。できたら、近似直線を表示します。
![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/311653/875c5b48-05be-33bd-6c91-01c749b595f5.jpeg)
要は、xとX、yとYの対応関係を定式化して、x,yから計算してX,Yを出せるようにしようと言うことです。(式をX=ax+b,Y=cy+dとかにして、それぞれ2か所の値を代入して連立方程式を解くとかでも良いです。)
そうすると式が出ていますので、これでX,Yを計算するコードをPythonで書きます。先の**textDat**に書いたPythonコードに追加してみましょう。
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/311653/30392e06-e9fb-245d-41cd-489ec591e968.jpeg)

(参考)Python(numpy)で近似式を計算する場合のコード例(Jupyter Notebookを使用)
![1.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/fe3e195f-d327-edb5-65d9-af99d9a23c16.jpeg)
![2.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/d9495231-58d0-0173-4255-0f0fb82f242e.jpeg)

# Step4 X,Y座標の表示
X,Yも先の**constantChop**に追加しましょう。
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/311653/dcd99c80-1eaf-f666-66f8-885e96610703.jpeg)
**name2**に**X**、**value0**に**me.mod.text1.calpos()[2]**
**name3**に**Y**、**value1**に**me.mod.text1.calpos()[3]**
これで、X,Y座標を得ることができました。(赤いのは指をさしていない時であり、さすと表示される。)
実際に**circleTop**の**Center**にこのX,Yを図のようにして入れてみましょう。
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/311653/1cbcd40e-fd7f-d5df-781e-f15b7ba891cd.jpeg)
これで概ね、指の動きに追従して、円が動くかと思います。

# 続く...
ここまでくればもうあとはコンテンツですね。
次は、1回目で簡単に紹介したインタラクティブコンテンツを解説したいと思います。




**＜制作環境＞**
　TouchDesigner099 COMMERCIAL 64-Bit Build 2019.10700
　CPU Corei9 9900K
　GPU Geforce RTX 2080Ti
　Windows10

**＜∀RroWs＞**
　[HomePage](https://www.arrowsofficial.com/)
【備忘録】pythonの組み込み関数mapで引数が複数な関数(片方はシーケンスじゃない)を使う方法



#どういう話？
昨日やっと登録したAtCoderのABC問題を解いているとき、list hからhの最小の数を引きたいなって思ったんです。

`def decrease(x,y): #x,yはfloatなりintなり。`
  `return x-y`

みたいな感じの関数を使って
`h=list(map(decrease,h)) #どうにかしてhからmin(h)を引きたい`
ってやりたかったんですけど、どうもどこにmin(h)を入れていいのかわからなくて。

#結論
　無名関数lambdaを用いて
`h = list(map(lambda x, y=min(h): x-y, h))`
で実装できました。
２つのシーケンスを引数に用いたい場合は[こちら](https://qiita.com/min9813/items/8a0f5d59f7ae6efa7072)
Firestore Local Emulatorを起動する

[FirestoreがGAになりました。](https://cloud.google.com/firestore/docs/release-notes)
２０１９年２月８日現在、Firebaseのオンラインドキュメントではベータ版の表記がありますが、そのうち修正されることでしょう。
DatastoreとFirebase Realtime Databaseの後継となるKVSで、試してみたい方も多いと思います。
現在、firebase-toolsにエミュレータが用意されていて、以下のようにすればインストールと起動が可能です。

```
firebase setup:emulators:firestore
firebase serve --only firestore
```

が、この方法で起動した場合、node.jsからの接続しかサポートされていません。
他の言語から繋ぐにはどうするか。
firebase-toolsのコードを追うとわかるのですが、実はこのエミュレータ、gcloudのエミュレータのjarをnode.jsでラップしているだけのものです。
datastoreのエミュレータと同様、gcloudから起動すればオプションとしてパラメータを渡すことが出来ます。
しかしここでも一工夫が必要で、`gcloud beta emulators firestore start`として起動するとオプションを渡すことが出来ません。
起動コマンドが呼んでいるコマンド（起動時に表示されます）に直接オプションを渡すことで、初めてdatastore local emulatorと同様に使用出来ます

```
~/google-cloud-sdk/platform/cloud-firestore-emulator/cloud_firestore_emulator start --host=::1 --port=8080 --project_id=project-name --rules="/your/rule/file/path"
```

なお、project idは--projectではなく--project_idで渡します。また、ruleを記述したファイルを読み込ませる必要があります。
また、起動時にFIRESTORE_EMULATOR_HOSTを環境変数に入れるように表示されますが、Scala(Java)では使用しません。
環境変数GOOGLE_CLOUD_PROJECTを設定すると、project idを指定出来ます。
dirでファイルだけ取り出したい！

## Matlabってなぁに？
数学や科学の研究者に人気がある(らしい)。
これわかんないなーってググっても全然引っかからなくて泣きたくなる言語/開発環境。

## 私はファイルごとに処理をしたかった
「ディレクトリのファイルパス渡すから、中に入ってるファイル全てにこの処理やってね」っていうあぁそれどこにもよくあるよねってことをやりたかった。
とりあえず手始めに100ファイル入ってるフォルダの中身をとってこよう。

```matlab:main.m
>> listing = dir('C:¥target_directory¥100_files_inside¥');

listing =

　フィールドをもつ 102×1 の struct 配列
　
　name
　folder
　date
　bytes
　isdir
　datenum

```

100ファイルなのに102…？
cmdでも似たようなことが起こりますね。
余計な2はカレントディレクトリ( . )と親ディレクトリ( .. )でした。

## ファイルだけ取り出すには「ディレクトリじゃない」を使おう

さてさて答え合わせ。
上記のstruct配列にある「isdir」、これはディレクトリならtrue、ファイルならfalseを返すので、これを使っていきましょう。

```matlab:main.m
>> listing = dir('C:¥target_directory¥100_files_inside¥');

(中略)

>> listing = listing(~[listing.isdir]);

listing =

　フィールドをもつ 100×1 の struct 配列
　
　name
　folder
　date
　bytes
　isdir
　datenum

```

これでisdirがfalse(~)の要素のみ取り出せましたね、めでたしめでたし。
あとは煮るなり焼くなりclearするなりお好きにどうぞ。
【R】散布図に相関係数を埋め込んで描画する方法

# はじめに

散布図は2つの変数の相関関係を表現する時に使われるので、今回は散布図に相関係数を付けて描画する方法を考えてみました。

# 解析に使うデータ

* 以下のデータは、ある山の東側（east）と西側（west）の様々な標高で測定した樹高（m）です。
 * direction列：斜面の方角（east/west）
 * altitude列：測定地点の標高
 * tree_height列：測定された樹高

```tree_height.csv
direction,altitude,tree_height
east,260,12.1
east,320,12.3
east,390,8.2
east,430,9.8
east,470,7.9
east,500,6
west,280,15.3
west,330,11.9
west,380,11.2
west,410,9.3
west,440,7.9
west,500,6.8
```

# 散布図の描画

* ここでは、mtext関数を使ってグラフ中に文字列を挿入しています。
 * line：書き込む文字列を図形領域から何行離すかを指定します。0以上を指定すると図形領域の外側、マイナス値を指定すると図形領域の内側に文字列が書き込まれます。
 * side：文字列を表示する位置を、{1=下, 2=左, 3=上, 4=右}で指定します。
 * adj：文字列の配置を0～1の数値で指定します。0=左揃え, 0.5=中央揃え, 1=右揃え。

```r:Rのコンソール
> # CSVファイルを読み込む
> tree_height <- read.table("C:\\tree_height.csv", header=TRUE, encoding="CP932", sep=",")
> # 相関係数を求めて、変数corrに代入する。この時、round関数で小数第3位以下を丸めている。
> corr <- round( cor(tree_height$altitude, tree_height$tree_height, method="pearson"), 2)
> corr
[1] -0.92
> # 散布図を描画する。
> plot(tree_height$altitude, tree_height$tree_height, main="標高と樹高との関係", xlab="標高(m)", ylab="樹高(m)")
> # 相関係数の値を「r={相関係数}」という文字列に直す。
> corr_text <- paste("r=", corr, sep="")
> corr_text
[1] "r=-0.92"
> # 相関係数の文字列をグラフの右上から少し隙間を空けて表示する。
> mtext(corr_text, line=-1.2, side=3, adj=0.98)
```

![scatter_plot_with_R_01.png](https://qiita-image-store.s3.amazonaws.com/0/312166/a380c934-ddd1-17ef-ff98-469ff6cb7604.png)

# まとめ

* 文字列を挿入する際に、text関数とmtext関数のどちらを使うべきかで、最初はかなり悩みました。
 * 今まではtext関数しか使ったことがなかったので、そもそもmtext関数を理解していませんでした。
* helpで調べると、両者の違いが何となく分かりました。
 * text関数：Add Text to a Plot（プロットにテキストを追加する）
 * mtext関数：Write Text into the Margins of a Plot（プロットの余白にテキストを書く）
* 今回は「グラフの上側に、右揃えで文字列を挿入する」というように、相対的な位置指定ができるmtext関数を採用しました。
 * mtext関数のlineパラメーターやadjパラメーターに小数値を指定すると、プロットエリアの端から少しだけ隙間（マージン）を付けて文字列を挿入できると分かったのが一番の収穫でした。
【Unity(C#)】VRカメラから3Dカメラに切り替え

　　
　　
　　
この記事は

**『プログラミング完全未経験からUnityでの開発現場に迎え入れてもらえた世界一の幸せ者』**

の記事です。そのつもりでお読みください。
　　
##HMDをトラッキングしてVR空間に！

まず最初にこれは[VIVE](https://www.vive.com/jp/product/)というVR専用のWearable Deviceでのお話です。
~~会社でいつも何気なく使ってますが家庭用ゲーム機として手の届く値段じゃないですね...~~

HMDとは Head Mounted Displayの略称で頭部装着ディスプレイのことらしいです。
三か月働いてて今日初めて知った略称です。早速見出しにぶち込んでやりました。

###☆下準備☆
①Asset Storeから`Steam VR Plugin`をDL＋Import
②Importした`Steam VR Plugin`のPrefabから`[CameraRig]`をHierarchyにドラッグ&ドロップ
![cameraRig.jpg](https://qiita-image-store.s3.amazonaws.com/0/244071/caf3c1bc-8d2d-4d46-2630-d9deb411f438.jpeg)

これでエディター画面の`▷`を押せばHMDにVRの世界が広がるはずです。


###なぜVRカメラから3Dカメラに切り替える必要があるのか？

今回私が陥った状況としては、
・VRのカメラをオフにして別アングル(別のカメラ)からVR空間内をゲームビューに映したい
です。

さらにかみ砕いて言えば、
**・VRコンテンツのPVを作りたいのにやり方がわからない！**
です。

**VRのPVはあまり一人称視点を導入するべきではない**という意見があり、
私もいろいろなPVを見ましたが、賛同しております。(まあまあ古い記事ですが...→[MoguraVRさん](https://www.moguravr.com/vr-game-pv/))



一人称視点のPVはあんまりおもしろそうじゃないです。
そのゲームをプレイしたことがない人からしたら、何をやっているかあまり伝わってきません。

なので、VR空間内を一人称視点以外で撮影する方法が必要となります。

そこで、
①`[CameraRig]`を非アクティブにする
②新しい3D用のカメラを別で用意しておいてアクティブにする

で可能だと思い、試しましたが無理でした。


##VRカメラから3Dカメラに切り替え

`XRSettings`をオン、オフ切り替えでいけました。
今回はキーボードで切り替えにしてます。

```C#
using UnityEngine.XR;

void Update () {
        

        if (Input.GetKeyDown(KeyCode.F)) //VRのカメラオフ
        {
            XRSettings.enabled = false;
        }

        if (Input.GetKeyDown(KeyCode.T)) //VRのカメラオン
        {
            XRSettings.enabled = true;
        }
    }
```

もっといい方法があれば教えてください。
【MySQL修行①】基本的なコマンドと便利な機能の把握

- だいぶ前に触って、しばらく遠距離生活をしていたあの「溜め込み屋さん」と、再度ともに暮らすだけの記事第一弾。
- その名の通り、「蓄積だけして、やがて限界がきて爆発」という、人間と同族のため、しばらく嫌悪感を表していた。
- 久々に扱うということで、「検索魔が1周回って、最小限の移動で、調べたい」という私のために備忘録として残そう。

## 基本使用コマンド

### ログイン

```sql
-- ログイン
-- パスワード不要な場合は、「-p」をとる。
mysql -u ユーザー名 -p

-- ログイン時のテーブルやフィールド名の読み込みしない。（早い）
mysql -u root -p -A
```

### 一覧表示

```sql
-- データベース一覧表示
-- システム側で、使われている削除注意なものもある。
show databeses;
```

### データベース作成
```sql
-- データベース作成
create database データベース名;
```
### データベース削除
```sql
-- データベースの削除
drop database データベース名;
```

### データベースの選択
```sql
-- 指定データベースを操作対象に選択
use データベース名;

-- 選択確認。
select database();
```

### ユーザー作成

```sql
create table `テーブル名`@`localhost` identified by 'パスワード'
```

### ユーザー確認

```sql
select user();
```

### ユーザー一覧表示

```sql
select user,host from mysql.user;
```

### テーブル作成
```sql
create table テーブル名(
    -- 「フィールド名 データ型 」でフィールド定義。

    -- 正の整数型のフィールド定義
    id int unsigned,

    -- 可変長文字列（20バイト）のフィールド定義
    name varchar(20),

    -- 浮動小数型のフィールド定義
    score float
);
```
※データ型に関して。

```
＜データ型＞
・ int・・・整数
・ float・・・浮動小数（単精度）。
・ double・・・浮動小数（倍精度）。
・ tinyint・・・小さい整数。
・ int unsigned・・・正の整数のみ。これにより、正の整数は2倍の大きさまで使用可能。
・ zerofill・・・数値の前方をゼロ埋めする。例：78 -> 078 になる。

文字列
・ char・・・固定長の文字列。「char(文字数)」で指定。
・ varchar・・・可変長の文字列。「char(バイト数)」で指定。
・ text・・・長い文字列。255文字以下は、varcharを使う。

日時 
・ date・・・日付。形式は、'YYYY-MM-DD'
・ time・・・時刻。形式は、'HH:MM:SS'
・ datetime・・・日付時刻。形式は、'YYYY-MM-DD HH:MM:SS'

論理
・ boolean・・・正誤判断。tinyint(1)で判断しているため、下記の数値で判断。
    ・ true・・・1
    ・ false・・・0
```

### テーブル一覧

```sql
show tables;
```

### テーブル構造確認

```sql
-- descコマンド使用の場合
desc テーブル名;
-- showコマンド使用の場合
show full columns from テーブル名;
```

### レコード挿入
```sql
-- レコード挿入処理
insert into テーブル名(id,name) values (1, 'suzuki');
insert into テーブル名(id,name) values (2, 'tanaka');
insert into テーブル名(id,name) values (3, 'satou');
-- データを挿入したくない時。
insert into テーブル名(id,name) values (4, null);
-- 全てのデータ確認。
select * from テーブル名;
```

### カラム変更

```sql
alter table テーブル名 change column 現カラム名 新カラム名 bigint;
```

### データベース接続情報確認

```sql
SHOW PROCESSLIST;
```

## まとめ
- 今回は、MySQLコマンドということで、久々の対面には欠かせない「懐かしさ・感動・喜び」等を一切感じず、淡々と作業をする冷酷ぶり。
- 「でも本当は、素直になれていないだけだから」という、人気恋愛映画には必須のおせっかい人間が現れるまで、楽しく待つことにしよう。
- 「次回はツールの確認とか、便利機能の把握とかを探すことにしよう」という、十八番である、基本習得前の早期の便利化宣言。

## 参考
- https://confrage.jp/mysql%E3%81%A7%E3%82%88%E3%81%8F%E4%BD%BF%E3%81%86%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E4%B8%80%E8%A6%A7/  
→こちらの記事を参考にしました。大変お世話になりました。
MacのXamarin.FormsのListViewで例外が発生することへの対応

Xamarin.FormsでMacアプリを開発しているときに、ListViewを使うと例外が発生して困ったので、その解決策を記載しておきます。

# 問題
以下のように普通にListViewを使って書いて、画面をスクロールしていると、`ObjCRuntime.RuntimeException`が発生します。

```xml
<ListView ItemsSource="{Binding Items}" >
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                ...
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
```

![例外.png](https://qiita-image-store.s3.amazonaws.com/0/236182/aea80f1e-01ea-fda2-7364-692953676f2b.png)

# 解決策

`CachingStrategy`を`RecycleElement`にすれば、例外が発生しなくなります。

```xml
<ListView ItemsSource="{Binding Items}" CachingStrategy="RecycleElement">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                ...
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
```