OmniAICreator/Qiita-1.07M huggingface dataset:
Azure の Team Explorer for Eclipse で Git Repository が表示できないときの対応


#現象

Azure の Team Explorer for Eclipse で Git Repository が表示できない

#対応

Language Pack をアンインストールする

[Help] - [About Eclipse IDE] - [Installation Details] からたどると Team Explorer Language Pack を削除できるので、削除して再起動

図の右のように英語表記になって Git Repository が表示される。

![Clipboard07b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110265/5b855d04-efe1-97f3-c84f-10fc64f2f4d1.png)
スマホアプリ開発でぶつかった壁と乗り越えるためにやったこと

株式会社オズビジョンの@h_kamadaです。

17卒として入社して、気がつけばあっという間に３年目のAdvent Calendarを迎えました。（去年はかけておらずですが。。。）

そんななか、今年度はほぼほぼ未経験のスマホアプリ開発にjoinし、右往左往しながらなんとかリリースにこぎ付けました。

スマホアプリ開発１年生だった私が、ぶち当たった壁とその壁をどう乗り越えたかをまとめます。

## どんな人に読んでほしいか

- 新しいことにチャレンジしている人
- 壁にぶつかってつまづきそうになっている人

## 壁その1. 初めて触る言語・フレームワークでそもそも知識がない

入社してから、1年目はSREチームで主にAWS基盤インフラの運用・改善業務に携わり、2年目に突入すると心機一転、phpでウェブサービスの機能開発・運用を担当していました。

そして迎えた3年目、社内でスマホアプリ開発のプロジェクトが立ち上がり、私が所属しているチームも開発にjoinしました。

必然的にスマホアプリ開発にjoinした私でしたが、これまでアプリの開発はswiftでタイマーアプリを作ってみたくらいの経験値です。

swiftにしてもjavaにしても少ない知識を活かして頑張ろうと思っていた矢先、技術選定が終わり方針が共有されます。

「React Nativeでアプリを作ります。」
<img width="982" alt="スクリーンショット 2019-12-07 0.19.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186181/58e0ee47-dbf6-9830-2d66-d836dffc41f7.png">
https://facebook.github.io/react-native/


これまでReactは少し触っていました。が、React Native？？？Reactとなにが違うの？？？という状態でした。

## コツその1. ググる、ドキュメントを読む、それでもわからなければ聞く

<img width="900" alt="スクリーンショット 2019-12-07 0.21.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186181/0232ddc1-67d5-02b4-0cb0-83f8ad8a31d7.png">
https://www.google.com/

わからないことはググって調べました。Qiita等、先駆者の知識はゴロゴロと転がっています。英語の記事も多いですが、少ない英語力でなんとか読み進めたり、google翻訳にお世話になったりしながら情報を集めました。

でも、そもそもググり方がわからなかったり、調べても理解できない箇所も出てきます。

そんな時は社内でわかる人に聞きに行きました。

ただ、質問に行くときは「自分は今なにがわからないのか」を意識して、知りたいことを端的にまとめて持っていくようにしました。

教えてくれる人も時間は有限です。作業の手を止めてまで相談に乗ってくれるのですから、しっかり準備をして臨みましょう。

## 壁その２. 実装方法のイメージがわかず手が進まない

なんとなく言語・フレームワークのことをわかったつもりになったところで、いざ開発の時間がやってきました。

しかし、エディタを開いたまま時間だけが過ぎていきます。

実際にコードを書こうとしても手が進まないのです。

いつも通りググって見ると、実装のベース知識は出てきますが、その知識を自分のサービスに合わせて書くのは簡単ではありません。

## コツその２. 既存コードやPRに挙がっているコードを読んで書き方を学ぶ

すでにマージ済みのコードや作成されているプルリクエストのコードをとにかく読みましょう。

参考書やネットの記事では「書き方の基本」や「よい書き方」は載っていますが、「自分が担当しているサービスでの書き方」は載っていません。

ドメイン知識はプロジェクトのリポジトリやwikiに載っています。

そこに書かれている情報を参考にコードを描いてみてください。

そして、真似するだけではなく、自分の知識を加えてよりよい書き方を学んできましょう。

## 最後に

エンジニアをやっている以上、新しい技術や知識は必要不可欠です。

その情報量の多さと速さに圧倒され、時には壁にぶつかることもあると思います。

私自身もよくぶつかります。

そんな時、ただがむしゃらに頑張るだけではなく、「自分は何に悩んでいるのか」「どうしたら解決できるのか」「どのように頑張るのか」をほんのちょっぴり意識してみて、そこにパワーを使うようにするとうまく進むのではないかと思います。

この記事が誰かの気づき・行動のきっかけになれば幸いです。
Node.js + Express で ES6を使う

# 確認環境
node v10.17.0

# アプリケーションテンプレートの作成 
ここでは`play_express`というアプリを作る前提で進めていきます。
※npxコマンドの使用には、`npm 5.2.0`以降がインストールされている必要があります。

```
npx express-generator play_express
```

次に依存関係をインストールします。

```
cd play_express
npm i
```

一旦、動作確認をします。アプリのカレントディレクトリで以下のコマンドを実行します。

```
npm start
```

このあと、webブラウザから`http://localhost:3000/`にアクセスすると、「Welcome to Express」画面が表示されます。
動作確認を終了するには、`npm start`実行中のコンソール上で、**Cmd(Ctrl)+c** を押下します。

# Babelのインストール
ES6を使うため、babelをインストールします。

```
npm i @babel/core @babel/node @babel/preset-env --save-dev
```

インストールが完了したらアプリのカレントディレクトリに以下の内容で`.babelrc`ファイルを作成します。

```Javascript:.babelrc
{
  "presets": [
    "@babel/preset-env"
  ]
}
```

# package.jsonの修正
startコマンドの内容を書き換えます。

```Diff:package.json
{
  "name": "play-express",
  "version": "0.0.0",
  "private": true,
  "scripts": {
-    "start": "node ./bin/www"
+    "start": "babel-node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/node": "^7.7.0",
    "@babel/preset-env": "^7.7.1"
  }
}
```

# 動作確認
以下のコマンドで動作確認。

```
npm start
```
UnityのSerialized Field

# Serialized Field
Tech Academyのメンターさんに聞いた情報をベースに知ったことをとりあえずまとめてみる。
詳細はもっと調べないと・・・・

## どういうもの？
スクリプト上のクラス内のメンバ変数について、EditorのUIからその値を変更・参照できるようにする機能。
参照のみさせる設定も可能。再生中でも変更可能。
 
## どういうときにつかうの？
プログラマー以外(例えばデザイナー)でも値をチューニングできるようになり、開発に参加できるようになる。

## 実務でのゲーム開発の流れに
こんな感じで利用してるらしい。

- ステップ1. Serialized Fieldを活用してデザイナーもプログラマーもみんな混ざって一つのUnityプロジェクトを編集してとりあえずうごくもの(モック)を作る。
- ステップ2. モックをベースに仕様を固めていく。
  - 現状のモックの全体像を把握(どこをいじっているのか見落としがないよう、みんなで集まって各人何いじった？を確認)
  - チューニングして値が固まったら編集できないように設定して、EditorのUIから変更できる範囲を狭めて仕様を固めていく(全部変更可能な状態にしておいて無法地帯状態だとバグにつながったりするので)
Androidアプリの譲渡で取引IDがエラーになる問題

GooglePlayで公開中のAndroidアプリを別のアカウントに譲渡する際に起きたエラーとその解決について共有します。アプリの譲渡はヘルプにある手順通りに進めます。
https://support.google.com/googleplay/android-developer/answer/6230247?hl=ja

取引IDを入力した際、以下のようなエラーが出ます。
> 入力した取引IDがこのデベロッパーアカウントのIDと一致しません

![スクリーンショット 2019-12-07 0.15.29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2490/d902fbc6-2871-ea27-bba6-4a3dbec66c04.jpeg)

これは、取引IDが特定のフォーマットのものだと起きる問題のようで、IDの先頭を取り除くと解決するようです

変更前
`01234567890123456789.token.0123456789012345`
変更後
`token.0123456789012345`

以下に記載されていました。
https://stackoverflow.com/questions/53933896/transaction-id-for-google-play-to-transfer-app-to-another-account
ESP32のIoTで使えるかもしれない使用例

# 概要

　この記事はArduino Advent Calendar2019　12/20の記事です。
　今更感はあるかとは思いますがGitHub上のespressif/arduino-esp32のライブラリから主要な機能の使用例をコメントの翻訳とともに挙げていきます。

＊私自身初心者のためこの記事も初心者向けです。ご容赦願います！

# ESP32とは

　espressif社が開発したIoT向けにWiFiやBluetoothなどの機能が実装されているマイコンです。電源やシリアル変換ICなどものっている開発ボードも多く発売されています。

# arduino-esp32ライブラリのインストール方法

* Arduino IDEをインストール
* Arduino IDEを起動してファイル>環境設定を開く
* 下のほうにある追加のボードマネージャのURLに　https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
　を追加。
* ツール>ボード>ボードマネージャを開きESP32ライブラリをインストールしてESP32 Dev Moduleなどのボードを選ぶ



# 使用例

概要にも書きました通りGitHubのespressif/arduino-esp32レポジトリのサンプルから使いそうなのを選んでやっていきます。

## PWM

モーターやLEDの明滅制御によく使われるPWM(Pulse Width Moduration)制御ですが、このライブラリではPWMというサンプルや関数はありません。そのかわりLEDCというライブラリがあります。今回はGPIOの13番ピンでPWMしてみます。

```C:esp32_pwm.ino
#define pin 13
#define ledc_channel 0

void setup() {
  ledcSetup(ledc_channel,1000,8); //LEDCチャネル、周波数、解像度
  ledcAttachPin(pin,ledc_channel);
}

void loop() {
    ledcWrite(ledc_channel,(uint32_t)128); //この解像度ではDuty比50%
}
```

##Digital Analog Converter(DAC)

 DACは25番ピン、26番ピンのみ使用できます。dacWrite関数の一つ目の変数にピン番号を、二つ目の変数に0から255の整数を設定します。0が0V出力、255が3.3V出力となります。

```C:esp32_dac.ino
void setup() {
}
void loop() {
　dacWrite(25,254);
　dacWrite(26,200);
}
```

## SimpleWiFiServer

同一ネットワーク上でWEBサーバーとして動作してWEBページからのHTTPリクエストに応じてLEDをON、OFFさせることができます。

<a href="https://qiita.com/Tech-para/items/daef5ce43cbcbba75b30">ここの記事を参照</a>

## Bluetooth(Classic)のシリアル通信

Bluetoothでペアリングした機器からOn;という文字列を送るとGPIO33番ピンがオンして、Off;という文字列を送るとオフするコードです。

```C:esp32_BTserial.ino
#include "BluetoothSerial.h"
#include<string.h>
BluetoothSerial SerialBT;

void setup() {

  Serial.begin(115200);
  SerialBT.begin("esp32");
  pinMode(33,OUTPUT);
}

void loop() {
    String str=SerialBT.readStringUntil(';');
    if(str=="On")digitalWrite(33,HIGH);
    else if(str=="Off") digitalWrite(33,LOW);
  delay(10);
}
```

## NTPサーバーから時刻を取得してRTCを動かす

1秒ごとに現在時刻をシリアルに表示します。

```C:esp32_ntp.ino
#include <WiFi.h>
#include "time.h"

const char* ssid       = "your_ssid";
const char* password   = "your_pass";

const char* ntpServer="0.jp.pool.ntp.org";
const long  gmtOffset_sec = 3600;
const int   daylightOffset_sec = 3600;

void printLocalTime()
{
  struct tm timeinfo;
  if(!getLocalTime(&timeinfo)){
    Serial.println("Failed to obtain time");
    return;
  }
  Serial.println(&timeinfo,"%Y %m %d %H:%M:%S");
}

void setup()
{
  Serial.begin(115200);
  Serial.printf("Connecting to %s ", ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
      delay(500);
      Serial.print(".");
  }
  Serial.println(" CONNECTED");

  configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);
  printLocalTime();

  WiFi.disconnect(true);
  WiFi.mode(WIFI_OFF);
}

void loop()
{
  delay(1000);
  printLocalTime();
}
```

# まとめ
　すべての機能を網羅することはできませんが、わたしがIoTデバイスっぽいものを作る過程で習得した機能を同じ初心者がとっかかりやすいやすいように使えそうな機能を中心にまとめてみました。お役に立てていただけたら幸いです。
SQL Serverのデータインポートウィザードを使って日時データをインポートする

# 一人アドカレ

| 日 | ポスト |
|---:|:------|
|  1 | [一時テーブルが存在していたら削除する](https://qiita.com/sotoattanito/items/10e65399caf34fae3017) |
|  2 | [何度も使う中間テーブルに名前をつけてクエリを見やすくする](https://qiita.com/sotoattanito/items/673fb0ceb543fdd391e2) |
|  3 | [共通テーブル式と一時テーブルの参照可能な範囲の違い](https://qiita.com/sotoattanito/items/9fa81e9acc9af915600f) |
|  4 | [グループ毎に最大値や最小値を持つレコードを抽出する](https://qiita.com/sotoattanito/items/efa8296039b182ccb85b) |
|  5 |       |
|  6 | [SQL Serverのデータインポートウィザードを使って日時データをインポートする](https://qiita.com/sotoattanito/items/6dd5996499652422c32f) |
|  7 |       |
|  8 |       |
|  9 |       |
| 10 |       |
| 11 |       |
| 12 |       |
| 13 |       |
| 14 |       |
| 15 |       |
| 16 |       |
| 17 |       |
| 18 |       |
| 19 |       |
| 20 |       |
| 21 |       |
| 22 |       |
| 23 |       |
| 24 |       |
| 25 |       |

# SQL Serverのデータインポートウィザードを使って日時データをインポートする
この記事は自身のブログを書き直したものです。

## 課題
SQL Serverインポートウィザードを使ってcsvのインポートを試みたところ、日時データでエラーが発生する。インポートを試みたcsvの日時データのフォーマットは次の通り。

```csv
yyyy/mm/dd HH:MM:ss.fff
``` 

年月日はスラッシュで句切られ、時分秒はコロンで句切られている。また、年月日と時分秒の間は半角空白1つ。

上記のフォーマットの日時データを含むcsvをSQL Serverインポートウィザードを使ってインポートしようとすると、エラーが発生する。

> エラー 0xc02020a1: データ フロー タスク 1: データ変換に失敗しました。列 "YMDHMS" のデータ変換から、状態値 2 と状態を示すテキスト "データが失われる可能性があるため、値を変換できませんでした。" が返されました。
 (SQL Server インポートおよびエクスポート ウィザード)


## 準備
### 実行環境
 * SQL Server 2017 Standard
 * SQL Server Management Studio 2017

### サンプルデータ
データを挿入するためのテーブル

```sql
CREATE TABLE [target_tbl] (
       [name]           VARCHAR(5) NOT NULL
     , [some_date_time] DATETIME   NOT NULL );

INSERT INTO [target_tbl] ( [name], [some_date_time] )
VALUES ( 'taro', '1999/10/11 10:20:30' );
```

| name | some_date_time      |
|:----:|:-------------------:|
| taro | 1999-10-11 10:20:30 |

テーブルに挿入するデータ

```csv
Name,YMDHMS
hoge,2015/10/15 21:00:00.000
fuga,2015/10/15 22:00:00.000
piyo,2015/10/15 23:00:00.000
```

## 解法
エラーはどうも日時データをインポートするときの日時データのフォーマットが異なるために起きているようだ(メッセージからはよくわからないのだが)。

インポート時のフォーマットを確認する。

[Integration Services Data Types](https://msdn.microsoft.com/en-us/library/ms141036(v=sql.105).aspx)

上記ページの**Converting Between Strings and Date/Time Data Types**の項目を見ると、次のようなフォーマットでなければならないとのことだ(DT_DNTIMESTAMPの場合)。

```csv
yyyy-mm-dd hh:mm:ss[.fff]
```
さきほどのcsvファイルの日時データのフォーマットを上のフォーマットに直してもう一度SQL Serverインポートウィザードを使ってインポートすると成功する。


## 感想
CONVERT関数やCAST関数はスラッシュ形式の日時データだって変換できるのだが、SQL Serverインポートウィザードはフォーマットに正確に従わないといけない。

つまりはデータや資料をしっかり確認しましょうということですね。気をつけよう。
Riot.js v4 レガシーブラウザに対応させよう

個人的にriotのv4は中規模のプロジェクトでも使いやすくなった感じがしますが、公式でieに対応していないためなかなか仕事で導入しにくいです:frowning2:
今のところ自分のプロジェクトではこれで問題なく動いてますが、まだ十分に検証していないので注意

まずはparcelで最低限の環境を整えましょう。
### インストール
```
npm install riot parcel-bundler @riotjs/parcel-plugin-riot
```

### コード
```index.html
<!DOCTYPE html>
<html>
<head>
  <title>Riot</title>
</head>
<body>
  <div id="app-root"></div>
  <script src="index.js"></script>
</body>
</html>
```
```index.js
import { component } from 'riot'
import App from './App.riot'
component(App)(document.getElementById('app-root'))
```

```html:App.riot
<App>
  <h1>{ state.title }</h1>
  <script>
    export default {
      state: {
        title: 'HELLO!'
      }
    }
  </script>
</App>
```

### 実行
``` 
npx parcel index.html
```

あとはhttp://localhost:1234 にアクセスします。 簡単ですね!

ここからIE:confounded:に対応させましょう


## :thermometer_face:ポリフィルを導入
バンドルファイルをあまり肥大化させたくないのでcdnで取り入れます。以下を追加しましょう

```index.html
  <script src="https://unpkg.com/core-js-bundle@3.4.7/minified.js"></script>
  <script src="https://unpkg.com/@webcomponents/template@1.4.0/template.js"></script>
```

これだけです！

## 最後に
`@riotjs/route`もie11に対応させたかったのだが、parcelではnode_modulesの中のes6コードがトランスパイルされなかったため断念:expressionless:。
webpackでは問題なくできたので、`regenerator-runtime`を取り入れれば動きます。
エラトステネスの篩→素因数分解→二項係数 with mod (JavaScript)

篩を使えば素因数分解できるし、素因数分解できるなら、そこそこ大きい二項係数 with mod も溢れず計算できるね、というだけの記事。

まず単純な実装のエラトステネスの篩。

~~~js
const sieve = max => {
    const m = Math.ceil(Math.sqrt(max));
    const s = [];
    for (let p = 2; p <= m; p++)
        if (!s[p])
            for (let q = p * p; q <= max; q += p)
                s[q] = p;
    return s;
};
~~~

`false` / `true` ではなく、素因数のうちどれか一つ / 無ければ `undefined` が入っている(`0` で初期化してもいいけどサボり)。
つまり、`n` が `2` 以上で `sieve[n]` が `undefined` なら素数、と言うことになる。

こうしておくと次のようにして素因数分解ができる。

~~~js
const factors = function* (n, s = sieve(n)) {
    if (n <= 1) return;
    for (; s[n]; n /= s[n]) yield s[n];
    yield n;
};
console.log([...factors(360)]); // [5, 3, 3, 2, 2, 2]
~~~

素因数分解ができたということは、競プロなんかでよく使うと噂の二項係数 with mod も書ける (特に速くはないけれど)。

とりあえず $ a^b \mod c $ を定義しまして...。

~~~js
const modpow = (a, b, c) =>
    b < 1 ? 1 : b & 1 ?
        a * modpow(a, b - 1, c) % c :
        (modpow(a, b >> 1, c) ** 2) % c;
~~~

本題の $_nC_k\mod p$ はこんな感じ。

~~~js
const nCkMp = (n, k, p, s = sieve(n)) => {
    k = Math.min(k, n - k);
    const a = [];
    for (let i = 0; i < k; i++) {
        for (const f of factors(n - i, s))
            a[f] = (a[f] | 0) + 1;
        for (const f of factors(k - i, s))
            a[f] = (a[f] | 0) - 1;
    }
    return a.reduce((n, v, k) => n * modpow(k % p, v, p) % p, 1);
};
~~~

$_nC_k$ が整数になることはわかりきってるので、素因数の多重集合 `a` で扱って重複度キャンセルして最後に乗算。

適当な値で測ってみる。

~~~js
console.time();
let r = nCkMp(1000, 300, 1e9 + 7);
console.timeEnd();
console.log(r); // 626555557
~~~

手元の Node.js v12.13.1だと平均して 1.2 ms 前後。
割を食っているのは generator なんで、ここをインライン化すれば 0.7 ms くらい。
篩の実装頑張ればもう少し速くなるかも。
もっと値が大きい時は、篩を再利用したり `foctors` 内部をメモ化したりしないと悲しい感じになる気がする。

競プロ等だと逆元テーブル化とか使うだろうし出番はなさそうだけれど、法が素数に限定されない & 毎度変わっても大丈夫なのは割と便利かもしれない。

まあ、こんな方向でも求められるよね、とぬるいことを言ってお茶を濁しておしまい。
ScriptableObjectは1ファイル1クラス

#世にも奇妙な

先日ScriptableObjectを使用していたところ奇妙な現象が起こりました。

こういうスクリプトを書きました。

```csharp:SO.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SO : ScriptableObject
{
}

[CreateAssetMenu(fileName = "SOInherit", menuName = "CreateSO")]
public class SOInherit : SO
{
	public string val;
}

```

ScriptableObjectのベースクラスとそれを継承したクラスを一つのファイルに書いたわけです。
これをProjectビュー上で右クリックから作成しました。
![SO1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526299/d18bb89c-3cdc-85ee-f34e-c8b21e0607f5.png)
そして普通に動作することを確認した後、Unityエディタを再起動しました。
すると、
![SO2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526299/32ccd274-6f02-dddd-5f42-f652d6662e93.png)
このようなAssertが表示されScriptableObjectとしての動作もしなくなっていたのです！
何もしてないのに壊れた...

#解決法
タイトルまんまなんですがScriptableObjectは1つのファイルに1つのクラスだけを書くようにします。

#原因
なんで1ファイルに複数クラスを書いてはいけないのでしょうか？
ファイル分割後のScriptableObjectファイルの中身を見てみましょう。

```yaml:SOInherit.asset
%YAML 1.1
%TAG !u! tag:unity3d.com,2011:
--- !u!114 &11400000
MonoBehaviour:
  m_ObjectHideFlags: 0
  m_CorrespondingSourceObject: {fileID: 0}
  m_PrefabInstance: {fileID: 0}
  m_PrefabAsset: {fileID: 0}
  m_GameObject: {fileID: 0}
  m_Enabled: 1
  m_EditorHideFlags: 0
  m_Script: {fileID: 11500000, guid: d740773b00796084096feb7e6b5b3618, type: 3}
  m_Name: SOInherit
  m_EditorClassIdentifier: 
  val: "\u5024\u3092\u3053\u3053\u306B\u5165\u308C\u308B\u3002"
```

注目すべきはm_Scriptのguidです。

続いてSOInherit.csのmetaファイルを見てみます。

```yaml:SOInherit.cs.meta
fileFormatVersion: 2
guid: d740773b00796084096feb7e6b5b3618
MonoImporter:
  externalObjects: {}
  serializedVersion: 2
  defaultReferences: []
  executionOrder: 0
  icon: {instanceID: 0}
  userData: 
  assetBundleName: 
  assetBundleVariant: 
```
guidの値を見てみるとSOInherit.assetのm_Scriptに保持されているguidと一致しています。
Unityはguidという一意なidをそれぞれのアセットに割り振っており、このidを利用してアセットの参照を実現しています。
ScriptableObjectはスクリプトファイルのguidを保持することで自身がそのクラスのインスタンスであることを表現しているわけです。
ですがこの時一つのファイルに複数のクラスが存在していたらどうでしょう？guidはアセット毎、つまりファイル毎に割り振られるわけですからScriptableObjectがスクリプトファイルのguidを保持していても、どのクラスのインスタンスかは分からないのです。
ScriptableObjectを作成してから再起動するまでは正常に動作していましたがScriptプロパティを見てみるとNoneになっていることからやはり参照は上手く機能していないことが分かります。

#まとめ
言いたいことはタイトルが全てです。MonoBehaviourが1クラス1ファイルなのは有名ですがScriptableObjectはあまり知られていない(と思う)上に再起動するまで不具合に気づけない分厄介です。お気をつけあれ。

#追記
1つのファイルに複数のクラスを記述した場合でもファイル名と同じ名前のScriptableObjectクラスが存在する場合、そのクラスのインスタンスのアセットファイルは問題なく読み込めるようです。
UnityがScriptableObjectを読み込む際はまずguidでどのスクリプトファイルにクラスが記述されているかを調べ、そのスクリプトファイルと同名のクラスのインスタンスであるものとして読み込まれるようです。
なので1つのスクリプトファイルに1つのクラスしか記述していなくてもファイル名とクラス名が異なる場合にはScriptableObjectを上手く読み込むことができませんのでご注意を。

いずれにせよ1つのファイルに複数クラスを記述するとかファイル名とクラス名を別にするとかトリッキーなことはしてはいけませんよということです。
OpenSiv3DでUnityみたいにUIを作れるシステムを作ってみた

# 概要
OpenSiv3Dを使うと簡単に綺麗な表現を作ることが出来ますが、複雑なUIを作ろうとすると途端にUpdate関数がごちゃごちゃして難しくなります。
そこで、今回は複雑なUIを作れる仕組みであるEasyViewerをUnityを参考に作ったので、そのご紹介をしようと思います。

# EasyViewerの特徴
EasyViewerは、EasyViewerを継承した描画用のクラスを用意することで動かせます。
EasyViewerはchildViewerを複数設定することができ、Unityと同じように階層的にViewerを設計することが出来ます。
また、MouseOverの判定もChildViewerに防がれているかどうかも判定してくれるので、ボタン入力も正確に行えます。
childViewerやparentViewerの取得はtemplate関数を用いているので、childViewerに与えられた入力もスムーズに取得可能です。

![ex.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213924/73c53e80-bb39-60c3-596b-62c7bff1ba2e.png)

複雑に構築されたUIはシーン遷移などで消すのが大変になることが多いですが、EasyViewerではdestory関数を呼ぶことでchildViewerをすべて再帰的に削除することが出来ます。


# EasyViewerのサンプル
まず、どんなものが出来るのか見てみましょう。
https://twitter.com/sknjpn/status/1194623601833459713
https://www.nicovideo.jp/watch/sm35973445
こちらが、EasyViewerを使って出来たものです。

今回、よさそうなサンプルが思いつかなかったので、代わりに最近EasyViewerを使って開発したFrom the Planetのコードを公開します。(クラス名がEasyViewerではなくViewerになっていますが、中身は同じです)
https://github.com/sknjpn/From-the-Planet
このプロジェクトでは、GUIButtonなど多くのクラスがViewerの派生クラスになっており、コードをシンプルに保ちつつ複雑なUIを実現しています。


# EasyViewerのコード
こちらのEasyViewer.hファイルをincludeすることで使えます。
https://github.com/sknjpn/ViewerSystem/blob/master/EasyViewer.h

基本的な使い方は
https://github.com/sknjpn/From-the-Planet
を参考にしてください。

# 使い方の流れ
１、描画用のクラスを作成し、EasyViewerを継承する
２、`void init() override`関数に初期化時の動作を記述する(コンストラクタの時点ではparentViewerとchildViewersはnullptrなので参照しない)
３、`void update() override`関数に更新時の動作を記述する

# その他
描画位置はmoveDrawPos関数でずらすことができます。
描画領域はsetViewerRectInLocal関数で設定できます。
ParentViewerの位置を変更すると再帰的にChildViewerの位置は変更されます。
RubyとRuby on Rails の特徴

# Rubyの特徴
- スクリプト言語である

プログラミング言語には、「コンパイラ言語」「スクリプト言語」などの種類がある。

人間が書いたコードを機械が実行するには「翻訳」を行う必要があり、コンパイラ言語の場合は事前に全て翻訳される。
スクリプト言語は随時翻訳しつつ実行される

この違いにより。スクリプト言語であるRubyはコンパイルが必要無いため、開発しやすい反面、実行速度は遅めである。

- オブジェクト指向言語である

Rubyはスクリプト言語ではあるが最初からオブジェクト指向の言語として開発されたため、変更に強く、再利用しやすいコードが書きやすくなっている

- 生産性が高い

上記の理由から、Rubyはコードの記述量が少なく済んだり、コンパイルの時間がかからないなど生産性が高いという特徴がある。
# Railsの特徴
- 言語としてRubyを使用しているため、比較的習得しやすい
- 習得したスキルを広く活用出来る
言語によっては、使われているフレームワークが多数ある。例えばPHPを学んでも、それとは別に様々なフレームワークについて学ぶ必要があるが、Rubyに関してはRailsがほぼ一択であるため、一度習得すると幅広く活用することが出来る

- 開発を効率化する仕組みが多数用意されているため、生産性が高い
Railsにはアプリの雛形を作成出来たり、SQL操作が出来るなど、開発効率を高めてくれる仕組みが標準で組み込まれている。
JSでおみくじ

```js

'use strict';

const btn = document.getElementById('btn');
const kiroku = document.getElementById('kiroku');

let count = 0;
let list;

const click = btn.addEventListener('click',function omikuji(){

count++;
const number = Math.random();

if(number < 0.3 ){
    btn.textContent='唐揚げ';
    btn.style.color = 'yellow';
    alert('ぴよ！');
}else if(number < 0.7){
    btn.textContent = 'チキン南蛮';
    btn.style.color = 'blue';
}else{
    btn.textContent = '西京焼き';
    btn.style.color = 'green'
}

if(count > 0){
    list = document.createElement('li');
           list.setAttribute('id',count);
           list.textContent =`${count}回目は${btn.textContent}`;
           kiroku.appendChild(list);
}
});

```
SQLite3::BusyException: database is locked: エラー

####環境：

```
Rails 5.1.7
```


####エラー内容：
SQLiteのカラムを少し変更してから、DBにフォームを送るとサーバー上で下記のようなエラー検出

```
ActiveRecord::StatementInvalid (SQLite3::BusyException: database is locked: INSERT INTO "budgets" ("budget_type", "price", "memo", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?)):
```
####エラー原因:
DB Browser for SQLite（SQLite管理ソフト）内でのデータ更新のし忘れ

####試したこと:

①　ターミナルで rails c して

```
ActiveRecord::Base.connection.execute("BEGIN TRANSACTION; END;")
```
を打つ　=>　失敗

②　config/database.yml内の、timeoutの値を5000から10000に変更　=>　失敗
③　DB Browser for SQLite　でDBを更新　=>　成功

####考察:
データ矛盾を防ぐための排他制御によって専有ロックがかかったのかな（？）
MySQL Workbenchを使ってデータベースを作成

#はじめに

今回試してみるツールはMySQL Workbenchです。
MySQLをインストールすると、自動的にダウンロードされる最もベーシックといえるアレです。



#MYSQL WORKBENCHとは？

MySQL Workbenchは、MySQLの公式から無料で配布されるデータベースを構築するためのGUIツールで、
phpMyAdminで行えるデータベースの作成などの簡単な作業、データベースの設計、管理、開発などが行えます。

公式:
[MySQL Workbench]()

「MySQLのデータベースを作成する際使用するツール」といえば、「phpMyAdmin」が最も一般的かと思います。
XAMPPやMAMPなどのを用いたローカル開発をはじめ、レンタルサーバー上でのデータベース作成の多くは、phpMyAdminを使用して行われる事例が多いでしょう。



#WORKBENCHにアクセス
Workbenchを立ち上げる
前回の最後のインストール終了時に「Start MySQL Workbench after Setup」にチェックを入れている場合、自動的にWorkbenchが立ち上がります。
もし、立ち上がらない場合は下記のフォルダ内を見てみましょう。
C:\Program Files\MySQL\MySQL Workbench 8.0 CE\


このフォルダには様々なMySQLに関するファイルがありますが、
「MySQL Workbench.exe」が該当のアプリケーションです。
![iruka.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/de634b0f-f0e0-2899-e34d-a33d15636b9e.png)

イルカのアイコン。なんか既視感が？（イルカと言えば中学の頃居間のWinで深夜焦る私をよくイライラさせ…うっ！頭が）



すると、Welcome to MySQL Workbenchとお出迎えされ、管理画面が立ち上がります。
画面左中央のMySQL Connectionsの横のプラスボタンを押すと、データベース作成の画面に切り替わります。ポチっと押してみましょう。
![plus.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/39306231-0382-38b4-364d-8165bff5a278.png)




#DBの基本情報入力

データベースの基本情報を入力する
データベースの基本情報を入力していきます。
「Connection Name：」は案件名、プロジェクト名など、管理しやすい名前をつけましょう。
今回はテスト用で「local development」という名前を付けた例となっています。

データベースの基本情報を入力する

ログインパスワードを入力する
次は「MySQLのログインパスワード」を入力します。
[OK]をクリックして、続いて[Test Connection]をクリックしましょう。

![test.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/78cf1e56-b0ef-6e7a-7b7e-e9ff9cfbcbc5.jpeg)


passを入力してテスト接続

無事に接続できたら成功…！
Succesfully made the MySQL connectionとポップアップが立ち上がったらひとまず接続の成功です。

![SUC.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/10657c42-00e1-4f8b-93b9-16d9306ab185.jpeg)

無事に接続が完了すると、最初の管理画面に「local development」への接続ボタンが表示されるようになります。ボタンをクリックし、データベースの画面に移動しましょう。


#管理画面からDBを管理する


データベースの基本情報を入力
以下の画面が立ち上がったら画面の上部にあるデータベースマークをクリックします。


![DBcre.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/93780181-96a8-d2f5-a8de-a908893c76bf.jpeg)


データベース管理画面



（1）「Name:」にはデータベース名を入力。
（2）「Collation:」では文字コードを設定します。文字コードはutf -utf8_general_ciを選びます。他、必要な情報を入力。
（3）[Apply]をクリック。

データベース名などを決定

データベース作成前の最終確認
内容に問題が無いか改めて確認しましょう。大丈夫そうなら[Apply]をクリックして作成へ進みます。
![123.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/478ad05c-59e8-5946-ee26-796f85d17a41.jpeg)



データベースを無事に作成できた場合は左サイドの「SCHEMAS」（スキームス）の一覧に並びます。（並びはアルファベット順です。）表示されたことを確認したら最後のステップへ移ります。

左サイドにデータベースのタイトルが表示される↓
![leftside.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/667cc8b4-f5d7-5080-955f-36e9d2d0f40f.jpeg)




#おわりに
Workbenchは高機能なツールだそうですが、これまで使う機会はありませんでした。（PHPmyAdminで済んでしまうので。）
しかし、あえてこの機会に触れてみたことで新鮮な気持ちでツールに向き合うことができました。
今後これを使えって環境で作業しないとも限らないですし。

巷では、DBの資料化や逆に図からのSQL生成がやりやすいツールなども色々増えてきているので（今回のWorkbenchにもあるのだけど次回以降…！）、今後そのあたりも試してゆく所存でございます。


参考：
[MySQL Workbenchの使い方おぼえ書き]（https://www.michaelstults.com/2014/10/how-to-setup-mysql-workbench-database-for-wordpress-on-windows-server/）
【備忘録】zabbixでDockerのリソース監視方法

Dockerをしようした、zabbixの構築を行いましたが、
zabbixでのDocker監視設定に苦労したため、備忘録として記載しております。

# 環境
zabbixserverのOS: centOS:7
他ホストのOS: ubuntu:18.04
Docker: 19.03.5
docker-compose: 1.25.0

# zabbix serverでのzabbix server と zabbix agentの構築
zabbix Serverとzabbix agentの設定を行う
今回はDocker imageを利用

Dockerのimageはzabbix:4.0.6で構築されているようで
最新のzabbix:4.2等はまだ、対応していない模様
１から自分で構築するべ対応可能なのかもしれないが、今回はあるもので構築

```docker-compose.yml
version: '3'
services:
  # ↓任意のサービス名
  zabbix-agent:
    image: monitoringartist/dockbix-agent-xxl-limited:latest
    # ↓任意のコンテナ名
    container_name: zabbix-agent
    # ↓任意のホスト名
    hostname: zabbix-agent
    environment:
      ZA_Server: 0.0.0.0/0
      ZA_ServerActive: zabbix-server
    volumes:
      - /:/rootfs
      - /var/run:/var/run
    restart: always

  # ↓任意のサービス名  
  zabbix-db:
    image: monitoringartist/zabbix-db-mariadb
    # ↓任意のコンテナ名 
    container_name: zabbix-db
    environment:
      MARIADB_USER: ${DB_USER}
      MARIADB_PASS: ${DB_USER_PASSWORD}
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - ./zabbix-db-data:/var/lib/mysql
    restart: always
  
  # ↓任意のサービス名
  zabbix-server:
    image: monitoringartist/dockbix-xxl:latest
    # ↓任意のコンテナ名
    container_name: zabbix-server
    environment:
      ZS_DBHost: zabbix-db
      ZS_DBUser: ${DB_USER}
      ZS_DBPassword: ${DB_USER_PASSWORD}
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - ./zabbix-server/alertscripts:/usr/local/share/zabbix/alertscripts
    ports:
      - 80:80
      - 10051:10051
    restart: always

```

```:.env
DB_USER=zabbix
DB_USER_PASSWORD=zabbix
```
docker-compose.ymlと.envは、同じディレクトリに配置

# zabbix server以外hostでのzabbix agent構築

```docker-compose.yml
version: '3'
services:
  # ↓任意のサービス名
  xxx-zabbix-agent:
    image: monitoringartist/dockbix-agent-xxl-limited:latest
    # ↓任意のコンテナ名
    container_name: xxx-zabbix-agent
    # ↓任意のホスト名
    hostname: xxx
    environment:
      ZA_Server: xxx.xxx.xxx.xxx ←zabbixServerのIPアドレス
      ZA_ServerActive: zabbix-server
    volumes:
      - /:/rootfs
      - /var/run:/var/run
    expose:
      - "10050"
    ports:
      - "10050:10050"
    restart: always
```

# zabbixServerでの設定
ホストの設定は、Docker特有の設定等はない。
ホストの設定時に、テンプレートの設定を行う。
新規テンプレートのリンクを押下して、[Template OS Linux for Dockbix Agent XXL - www.monitoringartist.com] を選択する。
選択したら、テンプレートとのリンクに表示されているか確認し、追加の選択する。

# 最後
あとは、認識されるか待つのみ・・・
認識されたら、コンテナ起動分のリソース情報が見れるようになる。
随時コンテナを追加していっても、勝手にデータを取得して、表示してくれる

# 参考リンク
[Docker監視用のZabbix Server/Agentをdocker-composeでまとめて立ち上げて簡単に監視する](https://qiita.com/ko-he-8/items/c88c00dbc4e4f8b868b8)
[Zabbix で Docker コンテナの状態を監視する](https://team-6.hatenablog.jp/entry/2017/08/11/220510)
[Zabbix 3.4でdocker上のZabbix Serverから監視しやすくなったよ](https://qiita.com/330k/items/3d3f984a5d3a374ccc96)
GCPのコンソールを英語表記にする

# 目的
GCPのドキュメントは英語を機械翻訳して作成されており、実際のコンソール上の表記と異なっている場合があります。こういったとき、一番手っ取り早いのはドキュメントもコンソールも英語表記に変えてしまうことです。

ほかのクラウドの場合、大体コンソール画面に設定ボタンが存在し、そちらからコンソールの表示言語を切り替えることができます。GCPの場合も、ユーザの顔写真の隣におなじみの「...」ボタンがあり、「設定」-「言語と地域」画面にある「言語」を英語に切り替えればコンソールが英語表記に切り替わり…**ません。**

# 方法
URLをよく見ると、末尾にhl=jpというパラメータが与えられていることがわかると思います。こちらを以下のように書き換えることで、コンソールの表記を英語表記に切り替えることができます。

```
...?hl=en
```

もしかしたらgoogle自体の設定とかcookieとかの兼ね合いで、普通の環境では設定画面から変更できるのかもしれませんが、私の環境ではURLを書き換えないと変更できませんでした。
【Vue.js】スマホで日本語入力時、keyupイベントが動作しない

Vue.jsで、keyupイベントでinputエリアに文字列を入力する度に検索をかける機能を実装。

が、スマホで日本語を確定入力した時に、動作しないことが発覚。

調査すると、**keyupイベント**が動いていないことが原因。

**inputイベント**に変更することで対応出来ました。
VPNとは

# VPNが無いとどのようなことが起こるか
- 社内から見れていたテスト環境のサイトが見れない
- 社内のチャットワークや共有カレンダーにアクセスできない
- 社内から接続していたサーバにsshできない

# 前提
テスト環境や社内のリソースには大抵IP制限がかけられている。
(例.自社と先方のIPアドレス)
社内にいる時にテスト環境にアクセスできるのは、自社のIP(許可されている)の範囲からアクセスしているため。

# もし社内の環境から出ると
例えば、自宅からテスト環境にはアクセスできない。
それは自宅のIPアドレスが許可されていないから。

#社外からアクセスできるようにするには
シンプルな話、自宅のIPアドレスからのアクセスを許可すればおしまい。
だが、自宅のIPアドレスは変動であることが多い上、盗聴のリスクがある。

# VPN接続するとどうなるか

外出先からVPNのアカウントにログインし、社内のリソースにアクセスすると、
接続元が外出先のIPではなくVPNのIPとなる。
社内のリソースはVPNからのIPは接続許可しているため、アクセスすることができるようになる。

# 安全にアクセスできるようにするために
道路で例えてみると

|種類|イメージ|
|:---|:---|
|普通の接続|一般道を走る|
|VPN|頑丈なトンネルの中を走る|

トンネルの中を通る(VPNを利用する)には事前に認証を得る必要がある
もし認証のプロセスが無いと、なりすまされてトンネルを通られてしまう(VPNの悪用)
Powershellでマージされてないブランチを一括でマージする

## 前書き

ブログの記事管理をgitでやってたらとてもブランチが溜まっていた！
Visual Studio Codeで作業をしていて、Powershellのほうが使いやすいので、そのコマンドについて整理してみた。

## マージされてないブランチを調べる

下のコマンドでdevelopブランチにマージされてないブランチを調べることができる。

```
git checkout develop
git branch --no-merge
```

## マージされていないブランチを一括でマージする

結論を先に書く

```
git checkout develop
git branch --no-merge | foreach { $_.ToString().Trim() }
```

### 失敗例

単純に文字列だからできるんじゃないかなーって思ってたけど、失敗した例。
PowerShellのパイプで受け渡されるのは総じてオブジェクトです。
なので、ToStringして、Trimで空白を消してあげる必要があったんですね。

```
git checkout develop
git branch --no-merge | foreach { $_ }
```

## オマケ：マージしたブランチを全部消す

どこかのブログからパクってきたのですが、忘れてしまった…。

```
git checkout develop
git branch --merged | Select-String -NotMatch -Pattern "(\*|develop|master)" | %{ git branch -d $_.ToString().Trim() }
子供向けのプログラミング教育について


#子供向けのプログラミング教育について
今回はプログラミング教育に関して自分が感じたことを記事にしていこうかと思います。

##プログラミング教育の現状
来年度より小学校にてプログラミングの教育が義務化されることは、皆さんもご存じかと思います。
これまでは義務教育の中で明確にプログラミングに関する教育はありませんでした。
(小学校独自に取り組んでいた場合は除きます。)
私が小学生だったころはキッズ向けのYahooのページでなんやかんやタイピングの練習をしたような気がします。
グローバル化が進む中で英語の教育も小学校で義務化されますが、なにゆえプログラミングの教育を義務化するのでしょうか

##プログラミング教育の狙い
国がプログラミング教育をする狙いとしては、次世代の担い手達に**「プログラミング的思考」**を養ってもらうことになります。
別の言葉を使えば**「順序立てて物事を考え、試行錯誤し、問題を解決する力」**をつけてほしいわけです。

##実際に教えてみて
私は業務で何度か子供向けのプログラミング講座のような催しを経験したことがあります。
(内容としては簡単なプログラミングでロボットを動かすというものです。)
その経験ベースで少しお話します。

###子供たちの特徴
・興味があって参加し、いろいろ動かしまくっていく子
・来たときはまったく興味ないが、やっていくうちに楽しくなっていく子
・会話してもほぼ反応がない子
・子どもよりお母さんの勢いがすごい参加者

ざざっと箇条書きしましたが、子供が主体的に参加しているというよりは「プログラミング教育ってなに!?うちの子大丈夫?」っと不安になった親御さんが申し込んで参加している感じでした。
子供たちも実際にできるのか不安そうな顔をしていましたが、体験が終わるころには笑顔を見せてくれていました。

###子供たちの能力
・ローマ字入力でタイピングをこなす
・直接入力であれば入力できる
・タイピングは出来ない。

これはやはり個人差が出る部分でした。小学校低学年でもタイピングできる子もいましたし、高学年でも苦手な子もいました。

###子供たちの経験値
・スクラッチ等でプログラミング経験あり
・今回が初めてのプログラミング

個人的には意外にもプログラミング経験がある子が多かったです。
3人に1人くらいは経験者がいて、教えていても「あーそれ、知ってるよー」と(生意気に)受け答えしてくれました。
※別に子どもは嫌いじゃないです。

#最後に
プログラミング教育を義務化しますよ！という話が親御さんの中で先行しすぎて、なぜやるのかや教育の狙いという部分がきちんと周知できていないのではないかなと感じています。
また実際に教育する側の準備が整っているとは思えないので、後追いになったとしてもしっかり環境を整備してあげないといけないと思います。
(教材に関して不十分だという意見もありましたが、自分は教材を確認していないので言及しません。)

あとこの記事を書いていて思ったのは「これをQiitaに書くのは釈迦に説法ではないか」です。
今後は実際に皆さんにも役立つような話をたまに書いていきたいと思っています。

アドベントカレンダーに関しては、間に合わず申し訳ない限りですね。
それでは。
VSCodeの保存のたびに`stylelint --fix`をする




## 背景

VSCodeでSassやCSSを保存したタイミングでstylelintでフォーマットしたい。


**2020/01/31追記**
[stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) パッケージがフォーマットに対応しました。

```settings.json
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
```
これで保存時に `stylelint --fix` をしてくれます。
ありがたや。



それに伴い、以下で紹介しているパッケージが非公開になったりしています。

以下、過去記事
---

ちょっと前の情報ではPrettierを使って、

```settings.json
{
  "prettier.stylelintIntegration": true
}
```
と書いて、Prettierを使ってフォーマットするという情報をよく見たが、この設定は廃止になってうまく動いていない様子。
そもそも、最近のお作法としては [stylelint-prettier](https://github.com/prettier/stylelint-prettier) を使用し、PrettierをStylelintに内包してStylelint側でfixするという方法が推奨されています。

```..stylelintrc
{
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": [true, {"singleQuote": true, "tabWidth": 4}]
  }
}
```
こんな感じで.stylelintrcにstylelint-prettierを入れてPrettierのルールを書いていく。




しかし、Eslint拡張の様にStylelint拡張には `autoFixOnSave` オプションが無いし、
[stylelint-plus](https://marketplace.visualstudio.com/items?itemName=hex-ci.stylelint-plus)という `autoFixOnSave` オプションが付いた拡張もあるが、どうも保存の後にfixが走るみたいで画面がリフレッシュされずうまくいかなかった。


## 結論

で、他の拡張を色々試してたところ[vscode-stylelint-format](https://marketplace.visualstudio.com/items?itemName=pqml.vscode-stylelint-format&ssr=false)拡張を使い `formatOnSave` すればうまくいって保存のたびに `stylelint --fix` をすることができました。

vscode-stylelint-format拡張はVSCodeのデフォルトフォーマッターに設定できる拡張なので、そのまま設定してしまうと全言語に設定されてしまいます。
なので、今回はSassに使いたかったので下記の様に言語を指定して設定。

```settings.json
{
  "css.validate": false,
  "scss.validate": false,
  "stylelint.enable": true,
  "[scss]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "pqml.vscode-stylelint-format"
  }
}
```


.stylelintrcファイルがないと動かない拡張みたいなので、プロジェクトルートに.stylelintrcのルールの設定が必ず必要になります。
あとStylelint拡張ももちろん必要です。
Java8 ラムダ式を変数に代入して再利用する

ラムダ式はオブジェクトと同じように、変数に代入して再利用ができます。
filter() メソッドを例にして、ラムダ式を変数に代入して再利用してみます。
以下のリストから、8文字以上の文字列のみをフィルタで取り出してみたいと思います。

```java
final List<String> months = 
Arrays.asList("January", "February", "March", "April", "May", "June", "July", "Augast", "September", "October", "November", "December");

final List<String> jewelries = 
Arrays.asList("garnet", "amethyst", "aquamarine", "diamond", "emerald", "pearl", "ruby", "sardonyx", "sapphire", "opal", "topaz", "turquoise");
```

8文字以上の文字列のみをフィルタするラムダ式を longName 変数に代入します。

```java
final Predicate<String> longName = name -> name.length() >= 8;
```

以下のように2つの別々のリストの filter() 式に対して、同じ変数(longName)に代入したラムダ式を適用しています。

```java
// フィルタして出力する
final List<String> longNameMonths = months.stream().filter(longName).collect(Collectors.toList());
final List<String> longNameJewelries = jewelries.stream().filter(longName).collect(Collectors.toList());

longNameMonths.forEach(System.out::println);
longNameJewelries.forEach(System.out::println);
```

結果、以下のように8文字以上の文字列のみが出力されました。

```bash
February
September
November
December
amethyst
aquamarine
sardonyx
sapphire
turquoise
```
忘年会でリアルタイムなクイズ大会をFirebaseとVueで構築した話

# 新人､忘年会でなにかできる？
```
やりたくないです､楽したいです
```

私､某社に入社したぴかぴかの新入社員です｡最近やっと配属されたところです｡
学生時代はネットワークの研究を主にしていたので､C､C++を主に使っており､JavaやPythonは授業でかじった程度､JavascriptはJavaと違う言語って認識でした｡

あまり体育会系ではないので､趣味の延長でできるようなことなら楽できるのでは､と考えて提案｡

# スマホでできるクイズ大会みたいなん作らへん？
<img width="40%" alt="IMG_1987.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123667/648d2932-0dd5-2440-e9bc-58746df1782b.png">
```
え~､一発芸よりしんどくないけど大変そう~
```
微妙な反応だったので､とりあえず案のひとつにとどめておきました｡
で､内容を確定するまでに実際に1ヶ月半後の忘年会に間に合うかもわからなかったのでとりあえず最低限の機能の実装を確認するためにJSに入門しました｡

ちなみにアイデアの着想はZOZOタウンの[某記事](https://techblog.zozo.com/entry/firebase-realtime-questionnaire)
みたいなアプリケーションでオールスター感謝祭的なものをイメージ｡
アプリ以外は当日の用意だけで済みそうという浅はかな考えで提案しました｡


# さて､なにをつかってどう作ろう
- ZOZOのアプリを基本的に習ってつくろう
    - Firebase(RDBはよく知らないけどNoSQLはKey-Valueだから深く考えなくていいのでは？)
    - Vue.JS（調べたら､Reactは玄人仕様､Vueはビギナー向けとのこと）
とりあえずこの2つの勉強（+そもそもJavaScriptの勉強）をはじめました｡



## つまづいたこと
### Typescriptが初心者にはハード
静的型付け言語で育った人間なのでJS互換でMS製の型付け言語Typescriptを使いたい！とモチベからVue+TSという構成で初め検討してたが､

- **Vue.ts**はVue.jsと書き方が大きく異る
- だいたいネットで転がっているサンプルはJS
- ライブラリもTSで書いてなかったり？
- JSも知らないのにTSは無茶おじさん

という経緯で諦めてJSに改宗｡

### そもそも環境構築がちょーーめんどくさい
VScodeで書いていたが､なによりESlintとPrettierがお互いに邪魔し合うのでCtrl+SのたびにESlintが **"** を **'** に置き換えて､Prettierが **'** を **"** に置き換えてコンパイルエラーを吐き出すのようなことを大量にやってくれます｡

Firebaseのデータ更新を画面に表示させることが確認できた時点で計画を実行に移すことになりました｡

### JSの概念が謎
なんですか？ES6だったりcommonJSだったりexport defaultだったり
Promiseを返す関数であることを教えてくれず謎のエラーに1日消えたりしました｡
→振り返ってみるとPromise､とても便利ですね｡thenメソッドチェーンとかすごい便利

### VueRouter（ルーティング）とかVuex（クライアントサイドのデータ+共通関数ストア的な）とかよくわからん
最終的に意図していることはわかりましたけど､Vuexの必要性がいまいちわからなかった｡
簡易VuexとしてMixinがあるらしいが､Mixinを使ってimportすると**xxx.hogehoge()**のような形で**xxx**がサフィックスとして足されるが､HTML部分に@click="xxx.hogehoge()"などと書くと参照されない
→うまいググり方がわからず断念

## よかったこと
## Vuetifyが便利
デザインセンス０でもすぐにそれっぽい画面を構築できる｡これはひじょーにいいものでした｡生でHTMLを書くよりも遥かに簡単です｡

## コンポーネント化できるので再利用性が高い
HTMLがスパゲティ化せざるを得ない言語なので､シンプルな記述で複雑な機能を持った部品を記述できるのがすごい楽でわかりやすい｡

## Firebaseが勝手にデータ同期してくれる
今回はFirebase Real time database を採用しました｡（課金タイミングがデータの読み書きのみで接続だけでは発生しないとのこと）
実際にはFirestoreでいいと思います｡DB内データの集約などができて便利ですし｡
しかし､Firebaseは一行書くだけで､この程度のアプリだとなにも気にせず､常に最新のデータを取得できるのでありがたい｡
## Vueがデータの反映を勝手にしてくれる
面倒なデータの反映を全く気にしなくていい｡正直これがVueの一番いいところ

# [できたもの](https://github.com/nakamuloud/quiz-cli)
- FirebaseでDBを操作すると
    - クイズ
    - 待機
    - 任意メッセージ
    に切り替え可能にして､任意の問題､選択肢､メッセージなどを表示可能にした｡
- コメント入力機能
    - ユーザが任意のコメントをニコニコ動画風にコメントを打てる｡その内容が他のユーザのスマホに流れる
    - ライブラリを使いたかったが､うまくできなかったのでスクラッチ実装
    - 正直いらなかった｡
    
<img width="40%" alt="IMG_1987.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123667/823ee9c4-37b6-2705-e9ad-dda937dd7e43.png">

- ユーザ認証
    - 認証レベルは雑でよかったので､静的HTMLでかんたんなエントリー画面を作成
    - 名前とすきなものの組み合わせで重複を回避
- 点数計算
    - 画面右上に正解数を表示させていた｡
    - Firestoreなら計算機能を使えたがRealTimeDBだったので､管理側でJSで直接すべてのユーザの正否を算出


# 結果
- 思ったより盛り上がったけど､もう少し企画を詰めるべきだった
- 同接100超えるかな？と思ったがギリ超えなかったので無料枠で済んだ
- VueはJS知らないHTMLよく知らないレベルでもなんとかなったので初学者にはひじょーーーにいいフレームワークだと思います｡
- ただ､JS界隈は派生が多すぎて､記事の量が偏っているので**Googlability**が一番大事
- ネットワークアプリ作るよりも目に見えるのでひじょーーーに楽しい

おわり
laravel6のDockerfileとdocker-compose.ymlを書く

シンプルなphp:7.4のイメージをベースにしています。
ローカルでの開発環境を想定しています。

```bash:Dockerfile
FROM php:7.4

RUN apt-get update -y && \
    apt-get install default-mysql-client nodejs npm git unzip -y && \
    // これがないとmysqlにつながらなくてphp artisan migrationなどのコマンドでエラーになる
    docker-php-ext-install pdo_mysql

COPY --from=composer /usr/bin/composer /usr/bin/composer
```

```docker-compose.yml
version: '3'
services:
  mysql:
    // このイメージを元にする
    image: mysql:8.0.18
    // パスワードの認証方法を変更
    command: --default-authentication-plugin=mysql_native_password
    // password設定
    environment:
      MYSQL_ROOT_PASSWORD: xxxx
    // データを保存するための設定
    volumes:
      - "./mysql-data:/var/lib/mysql"
    ports:
      - "3306:3306"
  web:
    // buildするDockerfileを指定する
    build:
      context: .
      dockerfile: Dockerfile
    // マウントする場所のマッピング
    volumes:
      - ".:/app"
    // portのマッピング
    ports:
      - "8000:8000"
    // コンテナを起動しつづける
    tty: true
    // mysqlが起動してからwebを起動させる
    depends_on:
      - mysql
    // コンテナの中に入ったときに/appにいるようにする
    working_dir: "/app"
```

```bash
// --buildは初回だけでよくて、うまくいったら次回はなくてもよい
docker-compose up --build

// 次でコンテナ内に入れる
docker exec -it コンテナ名 bash

composer create-project --prefer-dist laravel/laravel laravel_app

php artisan serve --host 0.0.0.0

// mysqlに入る
mysql -uroot -ppass -h mysql

```

.envでは
hostはmysqlを設定する。

参考サイト
[Docker超入門という動画を作りました。 \- Qiita](https://qiita.com/pluswing/items/76985f399f67c4e9d6aa)

[Docker超入門 Part1 \- Qiita](https://qiita.com/pluswing/items/476875820c5ef60fde0c)

[laraveldev/php Dockerfile \- Docker Hub](https://hub.docker.com/r/laraveldev/php/dockerfile)

[Docker に Composer をインストールするベストプラクティス（と解説） \- Qiita](https://qiita.com/yatsubashi/items/02bbbebbfe7e5a5976bc)
python3自分用メモ2 乱数のリストを作る

##乱数のリストを作る

####random.sample(population,k)
population: 範囲の指定　
ex) range(1,100) # 1~100までの整数

k: 乱数の要素の数
ex) k=10 
ex) # len(random.sample(range(1,100),k=10) -> 10

```
import random

random_list = random.sample(range(1,100),k=10)
print(random_list)

# result
# [32,16,58,31,78,68,34,90,14,45]

```

追記
result の結果例に間違いがあったので修正いたしました。
rails6のDockerfileを書く

[rails5のDockerfileとdocker\-compose\.ymlを書く \- Qiita](https://qiita.com/yoshinyan/items/e1f801d6df422d5b7f88)
こちらのRails6バージョンです。

Dockerfile自体より6になったことでyarnが必要になり、さらにアップデートする必要があるところで時間がかかってしまいました。

```bash:Dockerfile

FROM ruby:2.6.5

RUN apt-get update -y && \
    apt-get install default-mysql-client nodejs npm -y && \
    gem install rails --version='6.0.1' && \
    npm uninstall yarn -g && \
    npm install yarn -g -y

COPY Gemfile /Gemfile
COPY Gemfile.lock /Gemfile.lock

RUN bundle install
```

参考サイト

[Docker超入門という動画を作りました。 \- Qiita](https://qiita.com/pluswing/items/76985f399f67c4e9d6aa)
[Docker超入門 Part1 \- Qiita](https://qiita.com/pluswing/items/476875820c5ef60fde0c)

[Rails6 開発時につまづきそうな webpacker, yarn 関係のエラーと解決方法 \- Qiita](https://qiita.com/NaokiIshimura/items/8203f74f8dfd5f6b87a0)

[yarn自体のアップグレードをする \- Qiita](https://qiita.com/hypermkt/items/753fed69fd65124e6fd4)
基本情報技術者試験対策を考える記事



プログラマーを目指すIT系の資格かつ入門の資格と言えば何か？
それは、基本情報技術者試験でしょう。
あるものは職場で取るように言われて、またあるものは勉強のためにこの資格を取ろうと勉強します。

この記事では、基本情報者試験を受けるに際してどんな対策を練れば良いのか？という事について、その対策を考察していきたいと思います。

#出題の傾向を分析する

まず基本情報者試験は、**午前問題と午後問題**に解れています。
それぞれ分析して、どういう問題になっているのか見ていきましょう。

「合格の条件」「午前問題と午後問題の配点」「時間・問題形式」という観点で分析して、どう勉強すべきか理解を深めていきます。

#基本情報者試験における合格の条件

「午前と午後**それぞれで60%以上の正答率**であること。」

つまり、午前問題だけで点を稼いで午後問題を回避する、と言った重点的に点を稼ぐという方法は使えないという事が解りますね。
どちらも、ある程度の勉強と対策を練らねばなりません。そして、それぞれが配点に影響しあわない関係である為、別々な対策を練らないといけないとも解りますね。

#午前問題・午後問題を分析。時間配分と問題内容を分析する

まず午前問題と午後問題の時間配分は以下の通りだ。

|午前問題|午後問題|
|:---|----|
|150分|150分|

午前、午後双方とも、同じ150分の時間割り振りがされています。
朝9時半から、12時まで午前試験があり、午後13時から15時半まで午後試験があります。

1日かかる試験と言えますね。

##・午前問題

午前試験は、80問が出題。それぞれの問題において4択からの選択問題となっており、それを150分で解けば良いという事になります。
なので、最低でも**2分弱ごとに1問解ける**ペースで解いていかないといけません。
また、60%の正答で合格ラインなので、80問中48問以上の正答を出さねばなりません。

###午前問題は、過去問から70%の出題がなされる。

午前問題には面白い特徴があります。
それは、出題内容の7割程度が過去に出た問題であるという所です。
つまり、過去問を何度も解いてみて外す事がほぼないという状態になれば、6割突破は可能である事が解りますね。

###単語を正確に覚えなくていい。

午前問題の出題傾向を見るに、単語を答える問題ではなく用語に対しての正しい解説は何か答える問題が多いです。
つまり、単語を覚えるのではなくてどういう意味なのか正確に認知している事が求められます。
なので、例えば漢字単位で正確に暗記しようとしたりはする必要が無いでしょう。


###午前問題は、4択形式で答えを選ぶ形式なので、嫌が応にも1/4は当たる

4択形式で必ず答えがある中で必要な物を選択するのが、基本情報者試験の特徴です。
従って、**ランダムに選択しても1/4の確率で正解してしまうと言うことになります。**
解らない問題も、期待値にして0.25点貰えるという事になります。
もちろん、解るように勉強する事の方が大事ですが…

###時間が余る傾向にある。

基本的に知っている事を4択の中から選ぶというのが午前問題です。どちらかと言えば、時間を余らせる人が大多数とのことです。
時間配分について調べている際にこの記事を発見致しましたので貼っておきます。
参考：https://www.seplus.jp/dokushuzemi/fe/fenavi/gogo_arukikata/diff-am-pm/#i-2


##・午後問題

午後試験は、11種類の問題が出題されその中で、5問を選出して回答するという内容になっています。（例年は13問の中から5問でしたが変更されました。）
従って、**事前にやると決めた5問を、それぞれ１問あたり30分以内に解く**事が求められます。


###過去問から出題される事は無い

午後問題の、午前問題との大きな差異の1つは毎回新作問題が出されるという所だろう。
過去問を解くことにも意味はあるが、どちらかというと**解きたいジャンルに対する正しい解釈。知識、自己解決能力**が求められます。


###数択の中から適切なものを選ぶ問題

午前問題と解答形式は近く、「ア～オの中から適切なものを選べ」と言った形式の問題が出題されます。
まず文書を読む、次にその文脈の中に開いている穴に適切なキーワードになっているものをア～オから選ぶという形式です。

**正確に単語を回答させるのではなくて、穴埋め問題であるという所が大事**です。
暗記する事よりも、**理論立ててモノを考えられるか？必要な知識が備わっているうえで、それを使って正しい回答を導き出せるか？**に注力することが合格のカギです。
rails5のDockerfileとdocker-compose.ymlを書く

rails6はこちら
[rails6のDockerfileを書く \- Qiita](https://qiita.com/yoshinyan/items/a7d2d511c9e9e51e8222)

```bash:Dockerfile
// 元となるイメージ
FROM ruby:2.6.5

// nodejsが必要なので入れる
RUN apt-get update -y && \
    apt-get install default-mysql-client nodejs -y && \
    gem install rails --version='5.2.4'

// GemfileとGemfile.lockは他でrails newしたときのをコピーして作成するとよい
COPY Gemfile /Gemfile
COPY Gemfile.lock /Gemfile.lock

// bundle installを実行させる
RUN bundle install
```

```docker-compose.yml
version: '3'
services:
  mysql:
    // このイメージを元にする
    image: mysql:8.0.18
    // パスワードの認証方法を変更
    command: --default-authentication-plugin=mysql_native_password
    // password設定
    environment:
      MYSQL_ROOT_PASSWORD: xxxx
    // データを保存するための設定
    volumes:
      - "./mysql-data:/var/lib/mysql"
    // これをやらないとDBクライアントでつなげなくなる
    ports:
      - "3306:3306"
  web:
    // buildするDockerfileを指定する
    build:
      context: .
      dockerfile: Dockerfile
    // マウントする場所のマッピング
    volumes:
      - ".:/app"
    // portのマッピング
    ports:
      - "3000:3000"
    // コンテナが起動しつづける
    tty: true
    // mysqlが起動してからwebを起動させる
    depends_on:
      - mysql
    // コンテナの中に入ったときに/appにいるようにする
    working_dir: "/app"
```

Dockerfileとdocker-compose.ymlがあるディレクトリに移動して次のコマンドをうつ

```bash
// --buildは初回だけでよくて、うまくいったら次回はなくてもよい
docker-compose up --build

// 次でコンテナ内に入れる
docker exec -it コンテナ名 bash

// いつものようにrails new
rails new .

rails s -b 0.0.0.0
```

補足

```
// mysqlへの入り方
mysql -u root -p xxxx -h mysql
```

```/config/database.yml

// 次を書き換えることが必要。これをしないとdb:createでこける。
  password: xxxxx
  host: mysql

error
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)
```


参考サイト

youtubeで見つけてこのシリーズを全部見ました。
必要最低限なことをシンプルに解説してくれていて、とても分かりやすかったです。

[Docker超入門という動画を作りました。 \- Qiita](https://qiita.com/pluswing/items/76985f399f67c4e9d6aa)

[Docker超入門 Part1 \- Qiita](https://qiita.com/pluswing/items/476875820c5ef60fde0c)

--- 

[docker\-compose up したコンテナを起動させ続ける方法 \- Qiita](https://qiita.com/sekitaka_1214/items/2af73d5dc56c6af8a167)

[docker\-composeでDBの起動完了を待ってからWebアプリを実行する \- Qiita](https://qiita.com/shiena/items/47437f4f7874bf70d664)
Vuetifyのv-listのリンクが上手く動かなかった

# 事象
Vuetifyの`v-list`を使って、それぞれにリンクをつけようと以下のようなコードを書いていました。
以前別のプロジェクトで作成した際に動いていたので、深く考えずにソースの内容を流用していました。

```vue
<v-list>
  <v-list-tile :href="(リンク先URL)">
    <v-list-tile-content>
      <!-- 中略 -->
    </v-list-tile-content>
  </v-list-tile>
</v-list>
```
しかし、リスト上にマウスカーソルを置いても何も変化がなく、リストを押してもリンク先に遷移しませんでした。
前回とソースは同じはずなのに、前のは動いて今回のは動かないのが不思議でした。

# 原因
よくよく調べると、Vuetifyのバージョンが2.0系になった際に、`v-list-tile-〇〇`が`v-list-item-〇〇`に変わっていることを知りました。
そこで、`package.json`を確認してみると、Vuetifyが2.0系でした。

```json:package.json
    "vuetify": "^2.1.0",
```

# 対応
単純に`v-list-tile-〇〇`を`v-list-item-〇〇`に置き換えるとすんなり動きました。

```vue
<v-list>
  <v-list-item :href="(リンク先URL)">
    <v-list-item-content>
      <!-- 中略 -->
    </v-list-item-content>
  </v-list-item>
</v-list>
```

今回のことで、バージョンの大事さを痛感しました。
また、Vuetifyが2.0系になった際に他にもいろいろ変わったようなので、調べて対応したいと思います。

以下の記事を参考にさせていただきました。
[Vuetify 1.x to 2.0 ココだけ直せばとりあえずは動く - Qiita](https://qiita.com/dojyorin/items/fa5db9667ae0ee42e57b)
同一オリジンポリシーとCORS

## よく見るエラー
```
Access to XMLHttpRequest at 'http://example:3000' from origin 'http://localhost:8080' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
```

```
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

## 同一オリジンポリシー(Same-Origin Policy)とは
- CSRF等の攻撃を防ぐため、異なるオリジンのリソースへのアクセスに制約をかける考えかた。

### 同一オリジンの判定
- プロトコル、ホスト、ポート番号の組み合わせが等しい場合は、同一オリジンとなる。

　具体例として http://www.example.com に対しては、

　http://www.example.com/example.png // 一致（パスが異なるだけ）
　https://www.example.com/example.png // `スキーム`不一致
　http://www2.example.com/example.png // `ホスト`不一致
　http://www.example.com:3000/example.png // `ポート`不一致

##### IEの場合は以下の二つの例外があり。
- 信頼済みゾーン : 双方のドメインが高く信頼されたゾーン (企業のドメインなど) である場合は、同一オリジンの制限が適用されない。
- ポート番号 : 同一オリジンの確認要素にポート番号を含まない。

### 同一オリジンポリシーの制約を受けるWebAPI

 - XMLHttpRequest
 - Canvas
 - Web Storage
 - X-Frame-Options
 
### 同一オリジンポリシーの制約を受けないリソース取得
 - script // スクリプト
 - img, video, audio // メディア
 - object, embed, applet // プラグイン
 - frame, iframe // 別サイトのコンテンツ
 - link, CSS(font-face): // CSS、Webフォントなど

## CORS(Cross-Origin Resource Sharing)とは
- 異なるオリジン間でのリソース共有の手法 
- 新たなリクエストヘッダーをサーバー側で付加することで作用する。

```
Access-Control-Allow-Origin: https://example.co.jp  // 特定のサイトを許可する
Access-Control-Allow-Origin: *   // 全てのサイトを許可する
Access-Control-Allow-Headers "X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept"
```

### CORS対応(単純リクエストの場合) 
以下の条件を全て満たす場合、クロスオリジンのリクエストは受付可能

 - HTTPメソッドが下記のいずれか。
    - GET
    - POST
    - HEAD
 - HTTPヘッダに下記以外のフィールドが含まれない。
    - Accept
    - Accept-Language
    - Content-Language
    - Content-Type
    - DPR
    - Downlink
    - Save-Data
    - Viewport-Width
    - Width
 - Content-Typeの値は下記のいずれか。
    - application/x-www-form-urlencoded
    - multipart/form-data
    - text/plain

### CORS対応(プリフライトリクエストの場合) 
単純リクエストと異なる場合、プリフライトリクエスト (Preflight Request)を先に送り、
実際にリクエストしても良いか確認する。
以下の場合、標準外の Ping-Other HTTP リクエストヘッダーを設定しているので、
プリフライトリクエストの通信が先に行われる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149611/dabf40e8-92ba-cfc9-6157-1d99b9950cb1.png)
参考：https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
初学者によるプログラミングMemo　#3 Ruby　文字列変換メソッド

# はじめに
今回は備忘録的な感じで、文字列の変換メソッドを紹介します
なお、本記述はMacにおいて、Railsでの開発を前提としています
また、まだまだひよっこですので、不備等ございましたらご指摘いただけると幸いです

# 目次
- そもそもメソッドとは
- 文字列をくっつけたい
- 文字列を区切りたい
- 順番を逆にしたい
- 頭文字だけ大文字にしたい
- 全部大文字にしたい

# そもそもメソッドとは
プログラミングにおける、何らかの処理をする命令群のこと
メソッド名を用いることで、欲しい値を求めたり、実行したい処理を命令することができる
例えば、putsメソッドと言うのがあり

```
puts "Hello World"
```
と記述することで、

```
Hello World
```
と表示させることができます
これは、ターミナルに文字を出力するメソッドのこと
putsというメソッドに半角スペースを空け、右に続けて文字列などのオブジェクトを記述すると、そのオブジェクトが文字としてターミナル上に出力される
このように、元々から命令が設定されているもののことをさします


# 文字列をくっつけたい
例："This" "is" "a" "pen"
=> "This is a pen"
こうしたい
そう言う時は

```.rb
"This" + "is" + "a" + "pen"
```
と記述することで、結果が

```.rb
"This is a pen"
```

となる
これは特別解説なしでいけると思います

# 文字列を区切りたい
例："Python,Vue,PHP"
=> ["Python","Vue","PHP"]
こうしたい時は

```.rb
"Python,Vue,PHP".split(",")
```
と記述することで、結果が

```.rb
["Python","Vue","PHP"]
```
これは、.split(",")の部分で区切っていて、「,（コンマ）」で文字を区切ると言うことをしている
なので、"Python Vue PHP"のように、スペースの部分で区切りたい場合は

```.rb
"Python Vue PHP".split(" ")
結果 => ["Python","Vue","PHP"]
```
と、スペースで指定してあげると区切ることができる

# 順番を逆にしたい
例："12345"
=> "54321"
こうしたい場合は

```.rb
"12345".reverse
=> "54321"
```
これも特別説明はいいでしょう

# 頭文字だけ大文字にしたい
例："asset"
=> "Asset"
としたい場合

```.rb
"asset".capitalize
=> "Asset"
```
これも説明不要

# 全部大文字にしたい
例："test"
=> "TEST"
としたい場合

```.rb
"test".upcase
=> "TEST"
```
これも説明不要

# まとめ
メソッドは、そもそも命令が決められているので、単体で使う場合は対して説明することがない…
朝の挨拶がおはようと決まっているように、覚えるか都度調べるか、こうやって備忘録にするかでしょうか
コマンドラインでDockerHubへpush

コマンドラインでimageをpush。
準備としてDocker Hubのアカウントを作っておく。

```bash
// ログインする
$ docker login

"Login with your Docker ID to push and pull images from Docker Hub. If you don't have a Docker ID, head over to https://hub.docker.com to create one."

Username: yoshinyan
Password: 
Login Succeeded

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
ubuntu-ruby         latest              8cfce80f0c66        14 minutes ago      127MB

// タグ設定
$ docker tag 8cfce80f0c66 yoshinyan/ubuntu-ruby

$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
ubuntu-ruby             latest              8cfce80f0c66        15 minutes ago      127MB
yoshinyan/ubuntu-ruby   latest              8cfce80f0c66        15 minutes ago      127MB

$ docker push yoshinyan/ubuntu-ruby
The push refers to repository [docker.io/yoshinyan/ubuntu-ruby]
cbdba38118ba: Pushed 
e0b3afb09dc3: Mounted from library/ubuntu 
6c01b5a53aac: Mounted from library/ubuntu 
2c6ac8e5063e: Mounted from library/ubuntu 
cc967c529ced: Mounted from library/ubuntu 
latest: digest: sha256:685dd212ddc07e9dd26f829b8dae79355518bd1af7c7ad8624938854b6316b57 size: 1364
```

参考
[Dockerhubへの初プッシュ \- Qiita](https://qiita.com/moru3/items/32931813db81d891effb)

[login — Docker\-docs\-ja 17\.06\.Beta ドキュメント](http://docs.docker.jp/engine/reference/commandline/login.html)

[tag — Docker\-docs\-ja 17\.06\.Beta ドキュメント](http://docs.docker.jp/engine/reference/commandline/tag.html)

[push — Docker\-docs\-ja 17\.06\.Beta ドキュメント](http://docs.docker.jp/engine/reference/commandline/push.html)