OmniAICreator/Qiita-1.07M huggingface dataset:
ExpoとReactNativeで環境変数を設定する

# はじめに
ReactNative with Expo という構成で環境変数を設定しようと思ったら意外にハマったので備忘録

# プラグインをインストール
色々な記事があって混乱しますが以下のプラグインが一番シンプルにできました。
[babel-plugin-dotenv-import](https://github.com/tusbar/babel-plugin-dotenv-import)

```
$ npm install babel-plugin-dotenv-import
```

# babel.config.js を修正

```babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    // pluginsに必要な情報を追記
    plugins: [
      [
        'dotenv-import', {
          'moduleName': '@env',
          'path': '.env',
          'blacklist': null,
          'whitelist': null,
          'safe': false,
          'allowUndefined': false,
        }],
    ],
    presets: ['babel-preset-expo'],
  };
};
```

# .envファイルの作成
これはWEBの記法と何も変わりません。

```.env
SAMPLE_EMAIL=sample-mail@sample.com
SAMPLE_URL=https://sample/sample
```
# 環境変数を読み込む
```sample.js
import {SAMPLE_EMAIL, SAMPLE_URL} from '@env';

console.log(SAMPLE_EMAIL); // sample-mail@sample.com
console.log(SAMPLE_URL); // https://sample/sample
```
2020年にRealsense SR300をMacBookで利用するTips


Realsenseの少し古いバージョンであるSR300をMacBookで動かそうとしたら、少し躓いたのでメモです。

まとめは以下の通りです。

1. Latest Legacy Releaseのlibrealsenseを利用
2. pyrealsenseはsetup.pyのビルドフラグを変えてインストール
3. USB給電は電力が十分なものを使用

## 1. Latest Legacy Releaseのlibrealsenseを利用

最新版のSDKでは下記のようなエラーが出て、Realsenseデバイスへの接続に失敗することがあります。

```
Could not open device command transfer failed to execute bulk transfer, error: RS2_USB_STATUS_TIMEOUT
```

そこで、下記の旧バージョンのSDK使います。

https://github.com/IntelRealSense/librealsense/tree/v1.12.1

cloneしたら、最新版と同じくcmakeすればOKです。
cmakeしたらXCodeを開いて、`install`ターゲットでビルドしてlibrealsenseのインストールを済ませておくのを忘れずに！

## 2. pyrealsenseはsetup.pyのビルドフラグを変えてインストール

Python連携はこちらの旧版のものを使います。

https://github.com/toinsson/pyrealsense

pipでインストールしようとすると、最新版のXCode環境ではビルドでコケます。
XCodeのstdlibの参照先が変わっているのが原因なので、setup.pyで指定し直してあげます。

```setup.py
    module = cythonize(
        [Extension(
            name='pyrealsense.rsutilwrapper',
            sources=["pyrealsense/rsutilwrapper.pyx", "pyrealsense/rsutilwrapperc.cpp"],
            libraries=['realsense'],
            include_dirs=inc_dirs,
            library_dirs=lib_dirs,
            language="c++",
            extra_compile_args=["-O3", "-stdlib=libc++"], # ここを追加
            extra_link_args=["-stdlib=libc++"], # ここを追加
            )])

```

編集したら、`python setup.py install`でインストールできます。

## 3. USB給電は電力が十分なものを使用

デプスセンサが結構電力を食うので、安いUSB-C変換コネクタだと、起動してすぐ落ちてしまうことがあります。

Apple純正の変換コネクタなど、電力が十分なものを使うようにしましょう。

以上です。誰かの役に立ちますように！
[MySQL] 月ごとのカウント抽出で歯抜けになっている月を埋める

# やりたいこと
月ごとのレコード数のカウントを取りたいが、レコードのない月でもカウント0で出力したい
日付マスタみたいなテーブルは作りたくない。SQLだけで完結させたい

# 対象のテーブル

### データ
usersテーブル

|  created_at  |
| ---- |
|  2020-09-01  |
|  2020-09-01  |
|  2020-07-01  |
|  2020-07-01  |
|  2020-05-01  |

### 普通にSELECTした場合の出力

|  月  | カウント |
| ---- | --- |
|  202009  | 2 |
|  202007  | 2 |
|  202005  | 1 |

### 以下のような出力が欲しい

|  月  | カウント |
| ---- | --- |
|  202009  | 2 |
|  202008  | 0 |
|  202007  | 2 |
|  202006  | 0 |
|  202005  | 1 |

## 歯抜け対応のSQL

月一覧を出力する文を作成して、`UNION ALL`することで対応する

```
SELECT
    EXTRACT(YEAR_MONTH FROM DATE_ADD(NOW(), INTERVAL(months.series) MONTH )) AS yearMonth
  FROM (
    SELECT 0 AS series
    FROM DUAL
    WHERE (@num := 1) * 0
    UNION ALL
    SELECT @num := @num - 1
    FROM information_schema.COLUMNS
    LIMIT 12
  ) AS months
```

### 最終的なSQLはこちら
- 月一覧取得の方に`0 AS count` を追加

```sql
SELECT
  s.yearMonth AS yearMonth,
  SUM(s.count) AS count
FROM (
  SELECT
    EXTRACT(YEAR_MONTH FROM DATE_ADD(NOW(), INTERVAL(months.series) MONTH )) AS yearMonth,
    0 AS count
  FROM (
    SELECT 0 AS series
    FROM DUAL
    WHERE (@num := 1) * 0
    UNION ALL
    SELECT @num := @num - 1
    FROM information_schema.COLUMNS
    LIMIT 12
  ) AS months
  UNION ALL
  SELECT
    EXTRACT(YEAR_MONTH FROM users.created_at) AS yearMonth,
    COUNT(*) AS count
  FROM
    users
  GROUP BY yearMonth
) AS s
GROUP BY s.yearMonth
ORDER BY s.yearMonth DESC
LIMIT 12
```

## 追記
MySQL8の場合は、以下のコメントにあるWITH句を使った方法がわかりやすいです！
Azure FunctionsでのPythonによるストレージ入出力メモ

## はじめに
Azure FunctionsがPythonランタイムに対応しています。
ただ、ストレージのへの入力をトリガー→Functions処理→ストレージへの出力、を行う方法がなかなか見つけられなかったので備忘録を兼ねてメモします。

## 手順
※ Functionsリソースの作成等は終わっている前提です。
1.バインドするAzureストレージの情報を記載します。

```json:local.settings.json
{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "python",
    "AzureWebJobsStorage": "DefaultEndpointsProtocol=https;AccountName=<ストレージアカウント>;AccountKey=<アカウントキー>;EndpointSuffix=core.windows.net"
  }
}
```

2.入力元と出力先のパスを記載します。

```json:function.json
{
  "scriptFile": "__init__.py",
  "bindings": [
    {
      "name": "inputblob",
      "type": "blobTrigger",
      "direction": "in",
      "path": "container/input/{name}",
      "connection": ""
    },
    {
      "name": "outputblob",
      "type": "blob",
      "direction": "out",
      "path": "container/output/{name}.csv",
      "connection": ""
    }
  ]
}
```

3.Pythonスクリプト内に処理を書きます。

```python:__init__.py
import logging

import azure.functions as func

def main(inputblob: func.InputStream, outputblob: func.Out[str]):
    logging.info(f"Python blob trigger function processed blob. v2.0\n"
                 f"Name: {inputblob.name}\n"
                 f"Blob Size: {inputblob.length} bytes\n")

    input_text = inputblob.read(size=-1).decode("utf-8")
    # 行いたい処理
    output_text = input_text += "hoge"

    outputblob.set(output_text)
```

これで2.で設定したpath "container/output/{name}.csv"へファイルが出力されます。ファイル名はこの場合だと入力ファイル名の末尾に".csv"が付いた形となります。
【Swift】ColorをRGBで指定する

## はじめに
SwiftでcolorをRGBで指定する方法を説明します。

## Swiftでのcolor指定
まず通常の指定方法は

```swift:ViewController.swift
sampleView.backgroundColor = .blue

sampleView.backgroundColor = UIColor(red: 0.1, green: 0.5, blue: 1.0, alpha: 1.0)

sampleView.backgroundColor = UIColor(red: 30/255, green: 144/255, blue: 255/255, alpha: 1.0)
```

下に載せている記事が参考になるかと思いますが、SwiftでRGB指定しようとすると全ての値を255で割って分数表記にしないといけないため、若干めんどくさいです。
@shu26 さんのQiita
https://qiita.com/shu26/items/bc0a8a06019b24d799d4

そこで、RGBの値をそのまま利用するためのextensionを作成します。
## 255で割るためのextensionを作成する
UIColorとかの名前をつけたSwiftファイルに、extensionを作成します。

```swift:UIColor.swift
import UIKit

extension UIColor {
    static func rgb(red: CGFloat, green: CGFloat, blue: CGFloat) -> UIColor{
        return self.init(red: red / 255, green: green / 255, blue: blue / 255, alpha: 1)
    }
}
```

## Viewの色を変更してみる
作成したextensionを使ってViewの色を変更してみます。

```swift:ViewController.swift
sampleView.backgroundColor = UIColor.rgb(red: 121, green: 162, blue: 255)
```
![rgbsample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592713/06c87c21-ba76-de07-78f1-fd5657d0c58e.png)
これでRGBでcolorを指定することができるようになります！
plantumlで頑張らないレイアウト制御

先日、画面共有でplantuml書きながら打ち合わせしてたら、「結構すらすらとキレイに作れるんだね」って言われて、意外と知られてないのかなって思ったので書きました。

## 矢印の向きで制御する

割と直感的な挙動なのですが、これ知らない人がコーディング規約作ってたりすると、「矢印の向きは左から右にすること」とかいう規約作られて苦労します。

```
rectangle Foo
rectangle Bar
rectangle Baz

Foo -> Bar
Foo -> Baz
```
[![出力結果](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKTEr0Cb0cMDWXDIy5Q100)](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKTEr0Cb0cMDWXDIy5Q100)

```
rectangle Foo
rectangle Bar
rectangle Baz

Foo -> Bar
Baz <- Foo
```
[![出力結果](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKTEt0Ca2-WeqkM8j3QbuAq200)](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKTEt0Ca2-WeqkM8j3QbuAq200)

## 矢印に使う".(ドット)"や"-(ハイフン)"の数で制御する

plantumlの出力結果にはレイヤーというか層みたいなのがあり、矢印に使われる".(ドット)"や"-(ハイフン)"によって、矢印の先のオブジェクトがどの層に置かれるか制御できます。これも、知らない人が規約作ったりすると、ハイフンとかの数指定されてめんどくさくなります。

例えば先程出した図ですが、

```
rectangle Foo
rectangle Bar
rectangle Baz

Foo -> Bar
Foo -> Baz
```
[![出力結果](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKTEr0Cb0cMDWXDIy5Q100)](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKTEr0Cb0cMDWXDIy5Q100)
これは矢印に使われてるハイフンが全て一本なので、層は1つです。ここで、FooからBarへの矢印のハイフンを2本に増やしてみます。

```
rectangle Foo
rectangle Bar
rectangle Baz

Foo --> Bar
Foo -> Baz
```
[![出力結果](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKT7NjG58GjXrOt24rBmLe4W00)](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKT7NjG58GjXrOt24rBmLe4W00)
BarがFooの下に来るようになりました。このとき、出力結果は上下に別れて2層になってます。Bazも2層目に置きたい場合はBazの矢印の数も増やします。

```
rectangle Foo
rectangle Bar
rectangle Baz

Foo --> Bar
Foo --> Baz
```
[![出力結果](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKT7NjG58mDbZ28JKl1MWK0000)](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKT7NjG58mDbZ28JKl1MWK0000)

Bazを更に下に置きたい場合、ハイフンを更に増やすと下に層が追加されます。

```
rectangle Foo
rectangle Bar
rectangle Baz

Foo --> Bar
Foo ---> Baz
```
[![出力結果](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKT7NjG58GDf03bd58pKi1cWK0)](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuIfAJIv9p4lFILLmoyz7uZab5g7mghYuW0eKT7NjG58GDf03bd58pKi1cWK0)
この出力結果は"Fooがある層"、"Barがある層"、"Bazがある層"の3つになります。

層を横に広げたい場合は"left to right direction"を記述します。

```
left to right direction

rectangle Foo
rectangle Bar
rectangle Baz

Foo --> Bar
Foo ---> Baz
```
[![出力結果](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuSf9JIjHACbNACfCpoXHICaiIaqkoSpFu-82CHBpqdDI5Tpoyv5uJeb5ABmgBYwW0WLTNJkG58GDv81b75BpKe2M0000)](http://www.plantuml.com/plantuml/png/SoWkIImgAStDuSf9JIjHACbNACfCpoXHICaiIaqkoSpFu-82CHBpqdDI5Tpoyv5uJeb5ABmgBYwW0WLTNJkG58GDv81b75BpKe2M0000)


## 終わり

hiddenや"-r->"とか"-l->"で制御するのも悪くはないのですが、個人的にはそれらを乱用して頑張るよりは、矢印の装飾を最小限にして上記挙動を活用したほうが直感的な気がしますし、出力結果の統一感も保てるんじゃないかと思います。特に"left to right direction"入力したときの"-r->"や"-l->"の動きは個人的にすごくわかりづらいので。
最近は[draw.io](https://app.diagrams.net/)とかも出てきて出番も減ってるような気がしますが、テキストベースで変更履歴が残せたり、便利なところもあるので、もっと流行ってほしいなと思います。
ECサイトの開発で使える英語まとめ 

# はじめに
ECサイトの開発で使える英単語や英語表現をまとめました。
辞書的に使っていただければと思います。
随時追加・更新をしていきます。

# 英語まとめ 
## 商品
**product / item**
商品

**quantity**
数量
`qty`と略すこともあるようです。


**material**
素材

**manufacturer**
メーカー・製造者

**country of origin**
原産国

**seller** 
出品者

**product description**
商品説明

**new arrival / new product**
新商品

**brand new** 
新品

**used / secondhand**
中古

**unused**
未使用

**stock**
在庫

**in stock**
在庫有り

**out of stock**
在庫無し

**restock**
再入荷

**wish list**
欲しいものリスト

## 検索

**search box / search field / search bar**
検索窓

**search word / keyword**
検索ワード

**search suggestion**
検索候補

**search results**
検索結果

**search history**
検索履歴

**browsing history**
閲覧履歴

**category**
カテゴリ

**sort**
並び変える
「人気順に並び替える」は`sort by popularity`

## 価格
**price**
価格

**with tax / tax included / including tax**
税込み

**with out tax / tax excluded / excluding tax**
税抜き

**tax rate**
税率

**proper / proper price**
定価

**regular price**
通常価格

**sale price**
セール

**discount** 
割引 / 割り引く

**subtotal**
小計

**total**
合計

## 購入
**cart**
カート / 買い物かご
「カートに追加する」は`add to cart`。

**buy / purchase**
購入する

**pay / payment**
支払う / 支払

**payment method**
支払方法

**cash on delivery**
代引き
`cod`と略すこともあります。

**credit card**
クレジットカード

**in/by installments**
分割払い。
`payment by installments`のように使用します。

**in a lump / in a lump sum**
一括払い

**deferred payment**
後払い	

**reservation / reserve**
予約 / 予約する

**order**
注文 / 注文する

**backorder**
お取り寄せ
orderでも取り寄せという意味になりますが、日本だと通常の注文を`order`ということが多いので、区別の意味でも`backorder`というのがいいでしょう。

**shopping**
買い物
購入に限らず、商品を探したりすることも含む買い物全般を指します。

## 配送
**arrival / arrive**
入荷 / 入荷する

**shipping / ship**
発送 / 発送する

**delivery**
配達

**scheduled delivery /specify date and time delivery / designated date and time delivery**
日時指定配達

**express delivery**
速達便

**same day delivery**
即日配達

**delivery company / shipping company**
配送会社

**delivery address**
配送先住所

**unattended delivery**
置き配

**postage**
送料

**tracking number**
追跡番号

**delivery notice**
不在票

## 注文履歴
**order history**
注文履歴

**cancel order**
注文をキャンセルする

**return**
返品 / 返品する

**refund**
返金 / 返金する

**exchange**
交換 / 交換する

**defective product**
不良品

## アカウント
**account / membership**
アカウント / 会員

**login / log in / sign in**
ログイン。
海外のサイトでは`sign in`が使われることもよくありますが、日本だと`login`が一般的です。

**logout / log out / sign out**
ログアウト。
こちらも`sign out`より`logout`の方が日本では聞きなれていますね。

**create account / register membership / sign up**
会員登録。
ログイン、ログアウトを`sign in`, `sign out`で表現する場合は、`sign up`を使うといいでしょう。

**cancel account / membership**
退会


# 参考にしたサイト

[プログラミングでよく使う英単語のまとめ【随時更新】](https://qiita.com/Ted-HM/items/7dde25dcffae4cdc7923) 
命名に迷った時によくお世話になっている記事です。
今回は記事の書き方も参考にさせていただきました。
ありがとうございます。
Windowsでjarファイルをダブルクリックで開く

#Windowsでjarファイルを開く
配布用にjarファイルを作り、いざ配布をしたところMacではダブルクリックで簡単に開けるもののWindowsでは開けない場合がある。私がダブルクリックで動くようにした方法をここにまとめる。
#javaのインストール
javaがないと始まらないので無料のjava8を指示にしたがってインストールする。
https://java.com/ja/download/
#レジストリエディタの編集
ここが大事。虫眼鏡のところでregeditと検索。開いたら、HKEY_CURRENT_USER/Software/Classes/Applications/javaw.exe/shell/open/command
のように移動していく。「(既定)」をダブルクリックし「"C:¥...exe" "%1"」となっているものを「"C:¥...exe" -jar "%1"」と書き換える。HKEY_CLASSES_ROOT/Applications/javaw.exe/shell/open/commandでも良い。
#まとめ
最初はjarファイルを右クリックでプログラムから開く→別のプログラムを選択→常にこのアプリを...にチェック→Java(TM) Platform SE binaryで実行。
以降はダブルクリックで動かせるでしょう。
セグメンテーションモデル（DeepLabV3）の結果をCore ML Helpersでラベルごとに振り分ける。

アップルの公式配布DeepLabV3のCore ML モデルは、(512,512)のML Multi Arrayを出力します。
各ピクセルは0~14のラベル値です。

0,'background'背景
1,'aeroplane'飛行機
2,'bicycle'自転車
3,'bird'鳥
4,'boat'ボート
5,'bottle'ボトル
6,'bus'バス
7,'car'車
8,'cat'猫
9,'chair'椅子
10,'cow'牛
11,'diningtable'テーブル
12,'dog'犬
13,'horse'馬
14,'motorbike'バイク
15,'person'人
16,'pottedplant'鉢植え
17,'sheep'羊
18,'sofa'ソファ
19,'train'電車
20,'tv'テレビ

出力結果をマスク画像として使いたい場合、ピクセルのラベル値を判別する必要があります。
[Core ML Helpers](https://qiita.com/john-rocky/items/bfa631aba3e7aabc2a66)でラベル値によって判別してマスク画像にできます。

```swift
// Core ML Helpersの　toRawBytes関数の中で、対象のラベル値を白くする

for c in 0..<channels {
      for y in 0..<height {
        for x in 0..<width {
          var value = ptr[c*cStride + y*yStride + x*xStride]
　　　　　　　//例えば車を判別したい場合、ラベル値が７なので、7は０（白）にして他は255(黒)にするとマスク画像ができる。
            if value != T(7) {
                value = T(0)
            } else {
                value = T(255)
            }
          let scaled = (value - min) * T(255) / (max - min)
          let pixel = clamp(scaled, min: T(0), max: T(255)).toUInt8
          pixels[(y*width + x)*bytesPerPixel + c] = pixel
        }
      }
    }
```
![IMG_0530.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/fee69d9c-2c3d-0eb5-477e-f09cfcd67590.png)

マスク画像がとれると、背景だけぼかしたり、お馴染みのセグメンテーション画像が
できます。
![IMG_0531.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/43a0a265-a763-f43b-4275-77f798b9d7be.png)

![スクリーンショット 2020-09-09 11.13.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/c9d2ad9e-8f99-e90c-7b30-e0a5085cc264.png)

****
Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[MLBoysチャンネル]
(https://www.youtube.com/channel/UCbHff-wfjTnB3rtXIP6y0xg)
[Medium](https://medium.com/@rockyshikoku)

[相棒](https://twitter.com/oka_yuuji)
[note](https://note.com/oka_yuuji)
React(フロント)からHasuraのgraphqlを叩く

前回hasuraを使ってgraphqlサーバを立てたので、今回はフロントと繋げたいと思います。
繋げるために利用したライブラリは**apollo**です。

####ドキュメント
https://www.apollographql.com/docs/tutorial/client/

##1. npm install
まずはライブラリをインストールしましょう。
```
npm install @apollo/client
```

##2. ApolloProviderでアプリをラップ(アプリのどこでも利用できるように)
次に、ApolloProviderコンポーネントでアプリをラップし、ApolloClientインスタンスを渡しましょう。

```index.jsx

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import React from "react";
import ReactDOM from "react-dom";
import Pages from "./pages";
import injectStyles from "./styles";

const client = new ApolloClient({
  uri: "http://localhost:4000/",
  cache: new InMemoryCache()
});

injectStyles();
ReactDOM.render(
  <ApolloProvider client={client}>
    <Pages />
  </ApolloProvider>,
  document.getElementById("root")
);
```

##3.クエリを投げる
準備はできました。
以下のようにクエリを投げれば結果を確認することができます。

```sample.jsx
import { gql, useQuery } from "@apollo/client"; 

const GET_SAMPLE = gql`
    query getSample {
      sample {
        id
        message
      }
    }
  `;

  const { data, loading, error } = useQuery(GET_SAMPLE);
  console.log(data); //データの取得が確認できる
```

###注意
gqlの中身ですが、Hasura上でクエリを投げる分には以下のみでよかったと思います。

```
{
   sample {
        id
        message
   }
}
```

しかし、フロントから投げる時は「query "クエリ名"(キャッシュ用)」をつける必要があります。

```
query getSample {
      sample {
        id
        message
      }
    }
```
素のrailsアプリをherokuにデプロイ

Dcokerコンテナ上に、Railsアプリを組んでCircleciを使って自動デプロイまでを一気にやろうとしたら
迷宮入りしたので、原点回帰しようと思います。

##herokuへデプロイする練習
##自分の環境
Ruby :  2.6.6
rails : 6.0.3.2
git : 2.23.0
heroku-cli : 7.42.13 darwin-x64 node-v12.16.2

###Railsアプリを用意する
```:terminal
$ rails new heroku_app #今回はheroku_appというものを用意
$ cd heroku_app
$ rails g scaffold blog title:string body:text
$ rake db:migrate
$ rails s
```



##Railsアプリをデプロイする準備
- config/routes.rbの設定
- Gemfileの設定
- config/datebase.ymlの設定
- config/enviroments/production.rbの設定


###config/routes.rbの設定
```config/routes.rb
Rails.application.routes.draw do
   resources :blogs
   root 'blogs#index' #トップページをblogsコントローラのindexアクションに設定
end
```

![スクリーンショット 2020-09-09 0.00.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397356/c4ecb811-5a4e-60c8-0597-fc4696758f9f.png)

###Gemfileの設定
今回はherokuの無料枠で使えるpostgreSQLを使います。
ちなみにMySQLは有料枠になります。
※pg：production：本番環境のherokuは、postgreSQLを使うよって意味になります。

```:Gemfile
group :development, :test do
  gem 'sqlite3' #do ~ end内部に追加。他のgemは残してください。
end
group :production do
  gem 'pg'
end
```

さっき更新したGemfileの変更をbundle installする。

```:terminal
$ bundle install --without production
```

※ちなみに、このオプションは一度打ち込めば、アプリ内部の/bundle/configというところに書き込まれるため、
それ以降は--without producitonを打たなくても本番環境以外のgemをインストールしてくれるようになります。
その他のbundle install時のオプションは全てここに書き込まれます。

このようになっていたらOK

```:.bundle/config
BUNDLE_WITHOUT: "production"
```

###cinfig/database.ymlの設定
実際にデータベースと接続する設定をします。

```config/database.yml
production:
#半角スペース２個分の空白を開ける
<<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5
  ```
  adapter: postgresql - postgreSQLのデータベースに接続します。
  encoding: unicode - unicodeという文字コードを使用します。
  pool: 5 - DBに接続できる上限の数を決めます。今回は5。

###config/environments/production.rbの設定
本番環境での動的な画像の表示をONにする。

```config/enviroments/production.rb
#デフォルトでfalseとなっている以下の箇所をtrueに変更
  config.assets.compile = true
```

##herokuへデプロイの準備を行う

git経由でアップロードをします。

```:teminal
$ git init #このフォルダをgitと紐付けます。（最初の一回だけ）
```

変更したら毎回やるやつ

```:terminal
$git add -A #保存するファイルの選択。-Aは全部
$git commit -m "first commit" #addしたファイルの保存の確定
```

herokuへ登録する

```:terminal
$heroku login
$heroku create アプリ名 #自由にどーぞ、空欄でも可。ちなみにすでに誰かが作って存在する場合はエラーが出るので、別名をトライ。
$git push heroku master
```

本番環境でのマイグレーション

```:terminal
$heroku run rails db:migrate
```
![スクリーンショット 2020-09-09 10.44.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397356/121fe988-d096-ce5e-eb2e-95c3efff1dec.png)



終わり！

ちなみにheroku runをつけるとheroku上でrailsコマンドを打つことができます。
参考にさせていただいた記事通りに行えば、素のrailsをherokuにデプロイすることは容易にできました。
元記事の説明が大変丁寧でわかりやすく、感謝しています。
参考記事：https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39
MDBootstrap Vueことはじめ

## プロジェクトのクローン

```
# ユーザーディレクトリ直下にワークスペースを作成
cd && mkdir GitHub && cd GitHub

# git cloneする
git clone https://github.com/mdbootstrap/Vue-Tutorial-Agenda-App.git
```

## インストールと起動

```
# 作業ディレクトリに移動
cd ~/GitHub/Vue-Tutorial-Agenda-App/getting-started/start-here

# npmがインストールされているかチェック
npm -v

# 依存関係のインストール
npm install

# サーバーの立ち上げ
npm start
```

## アクセスしてみる

[http://localhost:8080/](http://localhost:8080/)

## Vueプロジェクトの構造について

### 構造

```terminal
.
├── License.pdf
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   └── main.js
└── static
```

### 主要な要素

要素|役割
--- | ---
node_modules|Vueをビルドするために必要なライブラリー
src|アプリケーションのソースコード
assets|画像やアイコンなどの静的アセットが配置される
App.vue|ルートコンポーネント（他の全てのコンポーネントがネストされる）
main.js|App.vueコンポーネントをレンダリングし、DOMにマウントする
index.html|アプリのメインファイル

* コンポーネントとは、構成要素のこと

## App.vueのシングルファイルコンポーネント

1. Template
2. Scripts
3. Styles

 => 詳しくは次の投稿で解説

## 参考

[Getting started - Material Design for Bootstrap](https://mdbootstrap.com/education/vue/getting-started/)
VSCodeをSQLクライアント化する方法

# はじめに

私は今までは `SQLクライント` に `LINQPad` を利用していました。
しかし、`LINQPad` は Mac に GUI 対応していないため代替ソフトを探していたら VSCode でいけそうだったのでその設定方法を紹介します。

# 前提条件

- VSCode がインストールされていること

# インストール

## `SQLTools` を導入する

`Extensions` から `SQLTools` を検索しインストールを実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/3602ac1c-6936-d135-75cf-86555bcbbee2.png)

# 使い方

## 新規コネクションの追加

まず、`SQLTools` のメニューから **`Add new connection`** を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/63a2d8e1-70d4-fb94-68e0-5ad7db65702f.png)

すると接続先 Database の種類を選択する画面が表示されるので、適切なものを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/c1b6c426-273a-73ce-9310-8ef069ebfe36.png)

一覧にない場合は **`Get more drivers`** をクリックして、適切なものを追加インストールしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/c3c833be-da23-88fe-299f-1bef95c92172.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/36bc005d-7f40-7aa8-4bb7-6e7dea83f220.png)

接続先 Database の種類を選択すると Connection Assistant が起動するので、必要情報を入力してください。
今回は SQLServer の例です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/d490e712-0fc6-3f29-7a37-70f562ef5736.png)

必要情報の入力が完了したら **`TEST CONNECTION`** をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/7a35e485-9cb0-97f2-defc-3d1d57f76873.png)

無事に接続が成功すると **`Successfully connected!`** と表示されます。
もし失敗したら、もう一度接続情報が正しいか確認しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/f17b9b35-2346-4613-fdbc-830e81a00705.png)

**`SAVE CONNECTION`** をクリックすることで、今回の入力情報を保存することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/47b71127-be16-8068-53b4-cd7678da9375.png)

## SQL の実行

コネクションの追加に成功すると **`CONNECTIONS`** に先ほどの接続先が追加されています。
プラグマークをクリックすると接続先に接続することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/e5f6aa2e-90b0-64aa-110a-c66227116c67.png)

SQL ファイルマークをクリックすると sql ファイルが追加されます。
ここに実行したい SQL を記述していきます。
// または特定の .sql ファイルを開いても OK です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/ca341e7f-2a9e-bbae-2055-9fc3e36d7553.png)


SQL を記述したら、実行したい SQL を範囲選択して **Ctrl + E, Ctrl + E** と押すことで SQL が実行されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/94fa1592-ddb2-ad07-6f5f-e25a52c8a52a.png)

まだ Database に接続されていない場合, 保存してある接続先の中から選択するためのダイアログが表示されます。
適切な接続先を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/ab5ed000-afe3-9baa-55e7-8856d4ef0129.png)

実行が成功するとデフォルトでは右カラムに結果タブが追加され, そこに実行結果が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/9b17e106-e497-f269-cd8b-9598e86d270a.png)

# おわりに

`VSCode` は本当に何でもできて便利ですね。
【TypeScript】Type 'string' is not assignable to type 'number | undefined'.の対処


#はじめに
Reactでzeit-ui/reactのstyleを適用させようとすると、以下のコンパイルエラーとなった。

#エラー内容

```shell
Type 'string' is not assignable to type 'number | undefined'.ts(2322)

```
> numberのところにstringのtypeを割り当てることはできません。

そうですね。
できませんよね。


#対処

```tsx
import * as React from "react";
import { Image } from '@zeit-ui/react'

export function SampleImage() {
  let width: number
  return <Image
    width="540"
    height="160"
    src="http://www.deelay.me/2000/https://react.zeit-ui.co/images/custom-domains.png" />;
}
```
この様にしていたのを、

```jsx

width={540}
height={160}
```

このように修正するとエラーが消えました。


###終わりに。
最後まで読んで頂きありがとうございます:bow_tone1:
転職の為、未経験の状態からRailsを学習しております。正しい知識を着実に身に着け、実力のあるエンジニアになりたいと考えています。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。
npm勉強でわからなかったこと

##①package.jsonファイルの「bin項目」

**▼具体的な例**

```js
{
  "name": "hello-world-cli",
  "version": "1.0.0",
  "bin": {
    "hello-world-cli": "index.js"
  },
  "license": "MIT"
}
```

**▼bin項目の説明**

```text
{
  "name": "npmライブラリの名前",
  "bin": {
    "コンソールでライブラリを実行するコマンドの名前": "実行するJavaScriptへの相対パス"
  }
}
```

**▼解決**
**package.jsonのbin項目では、
<font color="FireBrick">keyにコンソールでライブラリを実行する際のコマンド名、
valueにコンソールでライブラリを実行された際に一番最初に実行されるJSの相対パス</font>**
を記載する。

##②importとrequireの違い
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507412/cb62cd5d-0ee0-3546-90af-8e16cdc19ff9.png)
textareaにハマった

フォーム画面を作成中にはまったところを記録しておく。

### 問題の状況
日記アプリを作成中に、formタグ中で`<textarea>`を使用した。
色々いじっていたら、いつの間にか、テキストエリアをクリックすると、下の画像のように先頭に空きスペースが追加されるようになってしまった。

![コメント 2020-09-09 101418.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540509/6bfd9664-7c3a-e48b-7c26-9dbbf44d86db.png)

問題となったソースコードは以下。

```html:example.html
<form action="hoge" method="post">
<div class="form-group">
     <label for="body">本文：</label>
     <textarea class="form-control" name="body" id="body" rows="20">
     {{ $diary->body ?? old('body') }}
     </textarea>
</div>
```

### 原因と解決策
原因は、`<textarea></textarea>`を改行して使っていたこと。
なので、一行で書けば問題なく、先頭の空白はなくなった。

直したソースコードは以下。

```html:example.html
<form action="hoge" method="post">
<div class="form-group">
     <label for="body">本文：</label>
     <textarea class="form-control" name="body" id="body" rows="20">{{ $diary->body ?? old('body') }}</textarea>
</div>
```

以上！
Windows10でMax8お試し版を使ってみてからの正式購入

#Max8お試し版はどこに行けば手に入る？
公式サイトさん https://cycling74.com/downloads
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/22922dee-7f1c-dcac-8a71-f42f1b1ee27c.png)
zipが天から降ってくる。

#解凍してインストール
zipを気合で溶かしてインストーラーを起動！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/a27efa99-52c3-09d7-563d-41749a3cbe95.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/ab4ef97c-e6bd-329c-3086-5fcc621960d2.png)
念のためにライセンス原文は控えておきました。
ライセンスを翻訳サイトで日本語訳にしたりして、読んだ上で同意のチェックを入れてNextボタン！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/1f76bf28-d9a9-752e-b818-c543e143d901.png)
ここは初期値のまま。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/50a8ca30-6e0a-79a7-67e4-6cdacdebcab4.png)
GO!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/d502efa0-4289-6a65-a7ef-aa98d8c41152.png)
『即起動するよ』にチェックを入れてFinishボタン。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/b48bc919-2902-609d-2fbb-8d8407e6beb2.png)

#30日無料お試し期間
Max ~~ウルフィー~~ のコンソールが立ち上がりました！
アイコンがひょうたんみたいで可愛いなと思いました＾＾
とりあえず何か作ってみます。New Patcher。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/3ac23036-9ed0-44bd-7814-f7610ed9759d.png)
ぱっちゃ～画面。お試し期間の残日数が出ています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/e9528d89-1e86-da05-32ab-36f779d7f12d.png)
普通にいろいろできました。パッチを組んで音も出せましたし、作成したパッチをファイル保存もできました。

#気に入った、買ってやろう（上から目線）
公式サイトさん https://www.mi7.co.jp/products/cycling74/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/c636feda-fbe5-edbc-4af5-3729747ce6f2.png)
Max処女だしLiveというソフトも持っていないので、あたいはこっち。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/869df522-7fb7-2bff-af14-a206e8040f88.png)
購入にはMusicEcoSystemsというところに登録が必要でした。
購入すると所有製品のページでインストーラーがダウンロードできるぅ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/1b8493ba-2403-f548-cf4e-bf813f8598b6.png)
日本語版って書いてあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/48ff48dd-9481-27ab-9499-79159be91a0a.png)
1. お試版はアンインストール
2. PCシャットダウン（おまじない）
3. PC起動
4. 購入した方のファイルでインストールしなおす（手順はお試版とほぼ同じ）

BUT、起動してもまだ試用版の帯が付いてる…。なんぞ(>ω<、)？？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/d1168eb0-79e4-d77a-2c76-a11d67738b79.png)

購入ありござ的なメールにアクティベーションの方法書いてありました。( ˙-˙ )

手順通りに認証したら、ちゃんと使えるようになりましたとさ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/34cf64b0-c6c7-6e0c-90c5-6f3141b6c965.png)
ペーパープロトタイピングのメリデメ 〜形から入りたいタイプです〜



## はじめに
自分は単に個人開発でデジタルな画面イメージやワイヤーフレームを作成する必要はなかったので
ペーパープロトタイピング に近いことをしました。

今回は、自分がやった個人レベルの話と、
チームで動く場合のペーパープロトタイピング の意義とそのメリットとデメリットなどを書いていきます。

## ペーパープロトタイピング 

**アプリやソフトウェア、Webサイトなどの開発を始める前に、どのように動作するか確認するため、
紙に書いて確認するというものです。**

そのまんまっす。

開発を始める前ってどこって感じですが、以下が有効らしいです。

- ブレインストーミング会議（チームがユーザーフローの手順をまとめる、または多様なレイアウトを調査／有効にする必要があるときに）
- 概念実証テスト（チームがゲリラテストを行う必要があるときに）


自分の場合は、ざっくりいうと

課題・アイデア集めて、競合アプリ確認して、仕様決めて（ペルソナ、ユースケース、コア機能など）
その仕様を紙で書いて遷移状態やイメージつけていくって感じです。

カッコよく言ってますがまぁ簡単に画面イメージ作って、動作とか書いてくんです。

後述しますが、プロジェクトによっては**余分な作業でもあるので必ずしもやる必要はないです。**


参考：https://www.webcreatorbox.com/webinfo/paper-prototyping

## メリット

1. 楽しい。
メリットというか読んだ書籍でペーパープロトタイピングは、速く楽しい必要があるそうです。そうでなければやり方に問題があると。

2. 速い。
画面イメージ作成から遷移の流れなど書きます。
画面数によって違いがあると思いますが、ディスカッション目的であれば、だいたい1画面5分とからしいです。
自分の場合は自分が分かるレベルで汚い絵だったので、全画面で30分くらいでした。もちろんこれが正解ではないと思うので参考までに。

3. 安い。
紙とペンだけ。

4. チームビルディングにつながる。
これ自分はやったことないですが、良いなって思います。
ペーパープロトタイピングは特別なスキルを必要としないため（UI/UXの知識あった方が良いと思うけど）、誰でもプロセスに参加することができます。

## デメリット
1. フィードバックを集めるのが難しい。
良いか悪いかの判断を直感的にするのが難しいです。
意外と色やデザインによって補われることもあるので。

2. 結局はデジタル化する。
個人開発ではいらないですが、仕事でやる場合はペーパーで書いた後、ワイヤーフレームとして作成したりします。
ただ、手書きのものをデジタル化するツールもあるので適宜求められるレベルによって手間は違ってくると思います。

## 最後に

UIステンシルとか持ってるだけでテンション上がるなと思いました。
形から入るタイプなので。笑

https://www.uistencils.com/collections/stencils
３６０度、デバイスの向きを測定する時の【Tips】

Core MotionのDevice MotionかARKitでデバイスの向きはとれます。

一周は6.28318531ラジアンです。

開始原点が0ラジアン。

デバイスのY軸を中心に回転させた場合、
右回りだとラジアンが加算。
左回りだとラジアンが減算されます。

**ただし、半周で+-が逆転します。**
右回りの場合、3.14ラジアンまで加算すると、次は-3.14ラジアンになります。

← -3.13 ← -3.14 ← **分水嶺** ← 3.14 ← 3.13

という具合です。

**条件式で右回りを判別する場合、加算しているかにくわえて、分水嶺の部分も判別しておく必要があります。**

```swift
if rotation.y > recentRotation.y || (recentRotation.y > 3 && rotation.y < 0) {
// 現在のラジアンが以前のラジアンより大きい、または、以前のラジアンが３以上で現在のラジアンがマイナス値の場合、右回り
    print("turning right!")
}
```

分水嶺を越えてしまえば、以降右回りは加算、左回りは減算なのは同じです。

****
Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[MLBoysチャンネル]
(https://www.youtube.com/channel/UCbHff-wfjTnB3rtXIP6y0xg)
[Medium](https://medium.com/@rockyshikoku)

[相棒](https://twitter.com/oka_yuuji)
[note](https://note.com/oka_yuuji)
【超簡単】GoのインストールとVSCode設定方法

# インストール
## インストール
### Mac
以下のコマンドを実行します。

```
$ brew install go
```

### Windows
以下のページより、Windows用のインストーラー(.msiファイル)をダウンロードして実行します。
[Download and install](https://golang.org/doc/install)

![go-download.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/c7085dc8-072f-7ef1-f84e-e4ab5e13c0ed.png)

インストーラーに表示される手順に従って進めます。
インストール先フォルダは、特段の理由がなければデフォルトのまま変更しない方がいいです。

## インストール後確認
インストール後、コマンドラインで以下を実行して動作すればOK。

```
$ go version
go version go1.15.1 windows/amd64
```

## 環境変数の設定
PATHに`%GOPATH%\bin`を登録します。
PATHに登録しておかないと`go get`でインストールしたコマンドを実行することができません。

### Mac
以下のコマンドを実行して設定します。

```
$ echo "export GOPATH=$(go env GOPATH)" >> ~/.bash_profile
$ echo "export PATH=$PATH:$(go env GOPATH)/bin" >> ~/.bash_profile
$ source ~/.bash_profile
```

### Windows
環境変数の設定がわからない場合は、以下が参考になります。
[WindowsにGo言語をインストールする方法まとめ](https://qiita.com/yoskeoka/items/0dcc62a07bf5eb48dc4b#gopathbin-%E3%82%92path%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B)


# VSCode Extension
VSCodeをインストールしていない場合は、[こちら](https://code.visualstudio.com/download)からインストールします。

## インストール
VSCodeを起動し、拡張機能(Ctrl+Shift+X)を開いて`Go`で検索します。
検索結果に表示される以下をインストールします。

![go-extension.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/2a773fe0-3e2d-7f52-9cfa-9e34b26e70e3.png)

## 主な機能

- Lint&Format
- Debug
- コード補完

## Tips
VSCodeで開発をしていて、補完が効かない、エラーが消えないなどの時は、VSCode上で以下のコマンドを実行するとたいてい解決します。

- `Ctrl + Shift + P`でコマンドパレットを表示
- `Go: Restart Language Server`と入力して実行

# プロジェクトのはじめかた・おすすめライブラリ
手前みそですが、以下の記事を参考にして頂けると幸いです。
[Goプロジェクトのはじめかたとおすすめライブラリ8.5選。ひな形にも使えるサンプルもあるよ。](https://qiita.com/yagi_eng/items/65cd812107362d36ae86)
⇒Qiitaのデイリートレンド5位に入りました！

# さいごに
Twitterの方でも、モダンな技術習得やサービス開発の様子を発信したりしているので良かったらチェックしてみてください！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Goプロジェクトのはじめかたやおすすめライブラリの記事に続き、GoインストールとVSCode設定に関してもQiitaに投稿しました😊<br>他言語と比べて、圧倒的に簡単に始められるのがGoのいいところです！<br>Goをこれから始める方など、良かったら参考にしてください😇<a href="https://t.co/s02NmXTfU3">https://t.co/s02NmXTfU3</a></p>&mdash; やぎぬ😇行動力エンジニア (@yagi_eng) <a href="https://twitter.com/yagi_eng/status/1303525281953710080?ref_src=twsrc%5Etfw">September 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

また、BOT開発を通じてGoとLINE BOTにまとめて入門する記事をZennに掲載していますので、良かったらそちらもご覧ください！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ZennでGoとLINE BOTの記事を書いてみました<br><br>⬇️BOT開発を通じてGoとLINE BOTにまとめて入門する<a href="https://t.co/QqsEESJMKa">https://t.co/QqsEESJMKa</a><br><br>5ステップに分け、「Hello Worldから始めて、飲食店検索ができるLINE BOTの実装まで」を解説しています<br>GoやLINE BOTに興味のある人は是非読んでみてください😇<br>24,000字超え😇</p>&mdash; やぎぬ😇行動力エンジニア (@yagi_eng) <a href="https://twitter.com/yagi_eng/status/1325027213784326152?ref_src=twsrc%5Etfw">November 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
[ServiceNow] サービスカタログに引数を渡したい

# きっかけ
とあるサービスカタログに前のページで表示している値を引き継いで遷移したいという要望があり、URLから取得する方法を実装しました。

## 参考にした記事
https://jace.pro/post/2018-07-15-sp-set-variables-via-url/

## プラットフォーム
NewYork

## サンプル
以下のカタログ（レコードプロデューサー）のAsset No.フィールドに値を渡したい。
![スクリーンショット 2020-09-08 19.31.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/776efade-2dd3-6a1a-084c-832fdc0320dc.png)


# 方法1 変数のDefault Valueを使用する
![スクリーンショット 2020-09-08 20.57.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/c53969ef-e32a-64b9-217a-074df6e7ba89.png)

変数のDefault Valueに以下のスクリプトを書きます。

```hoge.js
javascript: (function(){
  try{
    return $sp.getParameter('var_asset_no') || '';
  } catch(e){
    return RP.getParameterValue('var_asset_no');
  }
})()
```

以下の様にURLパラメータを渡してカタログを開きます。

```
https://(インスタンス名).service-now.com/(カタログページ)&var_asset_no=P1000023
```

## 結果
![スクリーンショット 2020-09-08 20.54.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/aa8417a1-71ac-efcc-abc4-39567414623b.png)

# 方法2 マクロ型の変数を使用する
マクロ型の変数を設定します。
![スクリーンショット 2020-09-08 21.10.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/9c401a68-8c14-634a-648a-165cecd45c3d.png)

ウィジェットのクライアントスクリプトに以下のコードを書きます。

```client_script.js
function($scope, $window) {
    var params = $window.location.href.split('?')[1];
    var paramArr = params.toString().split('&');
    paramArr.map(function(keyval) {
        var key = keyval.split('=')[0];
        var value = keyval.split(key + '=').join('');
        value = decodeURIComponent(value);
        try {
            $scope.page.g_form.setValue(key, value);
        } catch (e) {
            console.log('Error set params', e);
        }
    });
}
```
以下の様にURLパラメータを渡してカタログを開く

```
https://(インスタンス名).service-now.com/(カタログページ)&category=hardware&cmdb_ci=P1000023
```

## 結果
CategoryとAsset No.に値を設定できました。
![スクリーンショット 2020-09-08 21.13.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/73b86f37-3a17-c524-fb2f-72bf98e142a4.png)
外部キーとして参照されている列にauto_incrementをつけ忘れた時の解決法

既に構築したテーブルの主キー列にAUTO_INCREMENTをつけ忘れていた。
後からAUTO_INCREMENTを付与したい状況。
しかし、列が他のテーブルから外部キー制約で参照されていると、単純にALTER TABLEしようとしても以下のようなエラーが発生する。

＊親テーブル：employee_info
*子テーブル：employee_state
*AUTO_INCREMENTを付与したい列：employee_id

```
Error Code: 1833. Cannot change column 'employee_id': used in a foreign key constraint 'employee_state_ibfk_1' of table 'management.employee_state'
```

対処法
・関連テーブルのWRITEロック
・子テーブルの外部キー制約を一時的に削除
・ALTER TABLEで親テーブルの列にAUTO_INCREMENTを追加
・外部キー制約を戻す（子テーブルにもう一度外部キー制約をつけ直す）
・テーブルをアンロック

```
LOCK TABLES employee_info WRITE, employee_state WRITE;

ALTER TABLE employee_state DROP FOREIGN KEY employee_state_ibfk_1;

ALTER TABLE employee_info MODIFY employee_id INT AUTO_INCREMENT;

ALTER TABLE employee_state ADD FOREIGN KEY(employee_state_ibfk_1) 
REFERENCES employee_info(employee_id);

UNLOCK TABLES;
```

結果、無事にAUTO_INCREMENTを付与できました！

```
SHOW COLUMNS FROM employee_info;
```

![2020-09-09 9.42.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706335/601eb102-6f46-81d4-5aa4-931069c8ef87.png)


●参照
https://unk-pizza.hatenadiary.org/entry/20170530/p1
【備忘録】atom-runnerで、日本語が文字化けする

# 現象
Atomのatom-runnerを使用したときに、「hello」は表示できても、「こんにちは」で文字化けが発生。

```python
print('hello')
print('こんにちは')
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233660/ee4705e9-0d46-0db3-5986-759378a61967.png)

# 解決策
`C:/Users/○○（ユーザー名）/.atom`の中にある`init.coffee`を開き、
`process.env.PYTHONIOENCODING = "utf-8";`を追加する。

追加したらAtom再起動して確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233660/142102e0-a278-a2c1-aa93-d08943700b5a.png)

以上！
WindowsのCMD.exeで難しいコマンドなしでUTF-8テキストにBOMを付ける方法

スマートじゃないけどすごく簡単。

使用テキストエディタ 
sakura

手順
①UTF-8 BOMつき付形式の空ファイルを用意しておく。(test01.txt)
  ⇒sakuraでtest01.txtという空ファイルを作り、名前を付けて保存でUTF-8 BOM付きを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706342/a8e37558-63e3-c20d-6322-d6c453694c02.png)


②UTF-8 BOMなしでBOMを付与したいファイルを用意する。(text02.txt)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706342/d4bbac1c-10df-187c-4ff5-8ad063fcce97.png)

③CMD.exeでsopy /bを用いてtest01.txtとtest02.txtを結合してtest03.txtをつくる。
copy /b test01.txt + test02.txt test03.txt
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706342/a862e65e-26ff-9cb5-940c-3e0cfaf6634d.png)

④test03.txtをsakurade確認するとUTF-8 BOMつきになっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706342/408e95dc-93a8-aa0f-38ab-119f69864072.png)
Windows10でGoogleDriveの同期フォルダを変更

#どこで設定できるのか探すぞ!
雲マークアイコンを右クリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/505cb17c-6c03-86a9-8699-87d8da83994e.png)
点々マークをクリック。
点々マークが灰色になってクリックできない時はWindowsUpdateが溜まってるかも。
あたいの場合はWindowsUpdateをぜーんぶ適用して再起動したらクリックできるようになったよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/dd0d4c19-5974-1626-00a9-74d45ce149e4.png)
設定へ行くぞ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/1031b777-2efc-3386-9874-401c02610fe6.png)
あ、なんかそれっぽいのある。終わったな…余裕。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/56bdb78f-fe58-f1f1-d85f-ea2e2b4f965a.png)

#いじれないんですけど！!
***フォルダの場所***を100回以上カチカチクリックしたのにダメだった…。ものすごい速さでクリックしたのにダメだった…。
伝家の宝刀***設定値蹂躙***（設定を左上から右下まで全部見ていくやつ）をやったのに***フォルダの場所***をこじ開ける方法が見つからず…。

ひょっとして初期設定したら一切変更不可？課金（お布施）しないと変更できないとか…いや、まさかそんなことないよね。
再インストールなのかなぁ…。

#一旦出て入りなおせ
一旦アカウントの接続を解除。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/4ce1100b-f288-95f3-ade4-c8a7158e19dc.png)
再度ログインして設定を進めていくと……
いたあああああああああ！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/ad1c0bd9-9a54-60f0-687f-59998c562d5e.png)
Laravel8 : 新ログイン「jetstream」を早速試してみたメモ

##Laravel8 : 新ログイン「jetstream」を早速試してみたメモ

みなさんこんにちは 
[ジーズアカデミー 主席講師 山崎ですm(_ _)m](https://gsacademy.jp/mentor/)
今回はLaravel8にアップデートされLogin画面作成のMyMemoをしておきます。

以下がLaravel8インストール完了時の画面です。変わってる・・・。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/25d66a0b-0a85-eec2-3401-aaf86fa91d0d.png" width="800">
**以前のlaravel/ui もLaravel8で用意されたようですので、以下記事を参考にしてください。**
https://qiita.com/daisu_yamazaki/items/b946594896179abcd203


###前提条件/検証環境

 - Laravelを基本を理解してCRUDを作成した経験がある人
 - 記事内容的には、Laravel8のLoginを使う場合の***自分メモ***です。
 - *PHP 7.3.x(確認した環境)*
 - **EC2の場合：t2.small （メモリ２G以上必要 "laravel/jetstream"に必要なため,t2.microだとコケます。Swapで対応できる方はそれでもOK）**
 - Node.js インストール済みであること


####【 Laravel6/7でのログイン画面作成はこちらをご参考に】
https://qiita.com/daisu_yamazaki/items/a914a16ca1640334d7a5

---


##Laravel8 ログイン画面作成
Login
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/4a624769-27a7-2599-cd9c-b780f0573d59.png" width="400">
Register
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/9b3e3194-e08b-6f88-3118-428d68eb5514.png" width="400">



#####１. laravel/jetstreamをインストール
幾つかの種類があるようです、時間的に今回は簡単なものを選択！！

```cmd:ターミナル

composer require laravel/jetstream

php artisan jetstream:install livewire

php artisan migrate

npm install

npm run dev

```


上記コマンドの2回目は「Livewire」or「inertiajs」を選択します。
どちらも目新しい。


```cmd:ターミナル

#https://laravel-livewire.com/
php artisan jetstream:install livewire

#https://inertiajs.com/
php artisan jetstream:install inertia

```

「Livewireは（Bladeインクルードのように）最初のコンポーネント出力をページとともにレンダリングします。...インタラクションが発生すると、Livewireは更新されたデータを使用してサーバーにAJAXリクエストを送信します。」とサイトの説明を見る感じでは、Bladeテンプレート側の記述だけでJavaScript(ajax,event...)を生成するようなイメージでしょうか。
[**livewireの動画解説も用意されています**]
https://laravel-livewire.com/screencasts/installation



「Inertiaにはクライアント側ルーティングがなく、APIも必要ありません。いつものように、コントローラーとページビューを構築するだけ」と「クライアント側とサーバー側の2つを接続する接着剤と考えてください」って感じで書いてますね。フロント側をvue/React/Svelte ...構築する場合にはこちらですね。


#####ダッシュボード
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/c2ed7d9f-f6d8-c97b-0711-e92bf0279df5.png" width="800">
#####プロフィールページ？？
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/45a4909e-c353-65fc-5a34-9fb6131d050e.png" width="800">

なんか、すごくなってる。。。

#####まずは Laravel8バージョンのLOGINが実装できました！
*Loginのところも「幾つかの選択肢」があるようなので*、これも後で調べていこうと思います。
いやー、インストールはサクサク感が出た気がします（個人の感想）。
Login後の機能が拡張されてるので、これから触って調べていこうと思います。
凄いですね～ワクワクします！！
※朝30分でメモったので、間違ってたらごめんなさいm(_ _)m
※先程、確認したら、すでに同様の記事を上げてらっしゃる人が多数いました。。速い人は本当に速い。アウトプットが重要ですからね。これでいいんです。

##◇Laravel8.x 公式
https://laravel.com/docs/8.x/frontend#introduction

##◇「動かして学ぶ！Laravel開発入門(翔泳社)」本だしました。
https://www.amazon.co.jp/dp/B08TBF3FQS/


##◇「Laravel DB.com」も運用中
Laravelをテーブル設計するだけでMigrationも生成できるツール
https://qiita.com/daisu_yamazaki/items/9f0dd73553367f8077f0

#◇ Youtubeチャンネル
[「遅咲きエンジニア」MicrosoftMVP 山崎](https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg)
https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg



以上
マークダウン記述方法(指定のリンクに遷移する)



|No.    |*タイトル*                  |
|----------|--------------------------|
|1|**現在の記事**|
|2|[投稿記事一つ目](https://qiita.com/kawashi23/items/50c8570d7cba34b95c9b)|
|3|[投稿記事二つ目](https://qiita.com/kawashi23/items/c6547c5f41fe0ecafebd)|


下記は記述となります。
「/」「\」を除きますと上記のマークダウンとなります。


/|No.    |*タイトル*                  |\
/|----------|--------------------------|\
/|1|**現在の記事**|\
/|2|[投稿記事一つ目](/https://qiita.com/kawashi23/items/50c8570d7cba34b95c9b\)|\
/|3|[投稿記事二つ目](/https://qiita.com/kawashi23/items/c6547c5f41fe0ecafebd\)|\
curlでChatworkの投稿を削除するワンライナー

`TOKEN_ID`はAPIのトークンを、`ROOM_ID`は削除したい投稿のあるルームIDを、`MESSAGE_ID`には投稿のIDにそれぞれ置き換えてください。

```sh:sh
curl -X DELETE  -H "X-ChatWorkToken: TOKEN_ID" "https://api.chatwork.com/v2/rooms/ROOM_ID/messages/MESSAGE_ID"
```

```powershell:PowerShell
Invoke-RestMethod -Uri "https://api.chatwork.com/v2/rooms/ROOM_ID/messages/MESSAGE_ID" -Method DELETE -Headers @{"X-ChatWorkToken" = TOKEN_ID}
```

任意の投稿の「リンク」ボタンをクリックしたときに投稿記入欄に表示されるURLのうち、ハイフンの左側の数列が`ROOM_ID`で、ハイフンの右側の数列が`MESSAGE_ID`になります。

```sh:例
# ROOM_IDは 123456789
# MESSAGE_IDは 1234567890123456789
https://www.chatwork.com/#!rid123456789-1234567890123456789
```

### ひとこと
このワンライナーをシェルスクリプトに組み込んでおけば、ボットの投稿削除のためにわざわざボットアカウントでログインする必要がなくなりますね！

### 参考リンク：
[APIトークンを発行する – ヘルプ | Chatwork](https://help.chatwork.com/hc/ja/articles/115000172402-API%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E7%99%BA%E8%A1%8C%E3%81%99%E3%82%8B)
初心者がdocker for macをインストールしてphp7.0の動作環境を用意する

##対象者
dockerって何？

##参考記事
[DockerをMacにインストールする（更新: 2019/7/13）](https://qiita.com/kurkuru/items/127fa99ef5b2f0288b81)

##アカウント登録
[公式サイト](https://hub.docker.com/)

##dockerバージョン確認
```
docker version
```

Double-click Docker.dmg to start the install process.
When the installation completes and Docker starts, the whale in the top status bar shows that Docker is running, and accessible from a terminal.

##gitバージョン確認
```
git version
```

#dockerとは？

dockerはコンテナ管理ソフトウェア。
installをしたので使ってみましょう。

##dockerのコマンドを使ってみる
###nginxをpullする
```cmd:cmd
docker run -d -p 80:80 --name {コンテナ名} nginx
```

###起動しているnginxを止める
```cmd:cmd
docker container stop {コンテナ名}
```

###起動しているnginxを起動
```cmd:cmd
docker container start {コンテナ名}
```

###起動しているコンテナのリストを表示
```cmd:cmd
docker container ls
```
```cmd:cmd
docker container ls -a
```

###コンテナの削除
```cmd:cmd
docker container rm {コンテナ名}
```

###イメージの削除
```cmd:cmd
docker image rm {ID}
```

#ここまでの疑問
- nginxって何？
- imageって何？

##参考url
[【入門】Nginx（エンジンエックス）とは？Apacheとの違いと初期設定](https://www.kagoya.jp/howto/rentalserver/nginx/)
[Dockerイメージの理解を目指すチュートリアル](https://qiita.com/zembutsu/items/24558f9d0d254e33088f)

###nginxとは？
静的コンテンツ向き。
Apacheは動画処理などの動的コンテンツ向き。

###imageとは？
Docker イメージとは、親子関係を持つ、複数のイメージ・レイヤ（image layer）によって構成されています。イメージ・レイヤは読み込み専用です。Docker は、複数のイメージ・レイヤに含むファイルやディレクトリの情報を1つに統合する技術を使っています。

###コンテナとは？
Dockerのコンテナは、 Dockerのイメージ・・・・を元に作成される仮想環境の実行部分。

##参考URL
[DockerでPHP7.0×Apacheの環境を構築する](https://qiita.com/kurkuru/items/fa7401a01c4d5dd98e4a)

nginxじゃなくてApacheを使います！
業務はApacheです。

###php7.0のイメージをレジストリからダウンロードする
```cmd:cmd
docker run -d -p 80:80  --name php70-apache  php:7.0-apache
```

###php70-apacheへログイン
```cmd:cmd
docker container exec -ti php70-apache bash
```

###PHP7.0とApacheの動作確認
```cmd:cmd
echo '<?php phpinfo();' > index.php
```

##ホスト⇔コンテナ間でディレクトリを同期する
まずは、先程作成したコンテナは削除します。

###コンテナの削除
```cmd:cmd
# コンテナを停止
docker container stop php70-apache
# コンテナを削除
docker container rm php70-apache
```

###新しくディレクトリが同期されるコンテナ
```cmd:cmd
docker run -d -p 80:80 -v /Users/[user name]/docker/php70-apache/www:/var/www/html --name php70-apache php:7.0-apache
```

###php70-apacheへログイン
```cmd:cmd
docker container exec -ti php70-apache bash
```

###PHP7.0とApacheの動作確認
```cmd:cmd
echo '<?php phpinfo();' > index.php
```

###[localhost](http://localhost/index.php)の動作確認
GitHubにダークモードを適用する

エンジニアの皆様、エディターやコンソールを始めアレやコレやをダークモードで利用されていることと思いますが、トップレベルに利用頻度の高いgithubだけいつまでもビカビカと眩しいままで苦しんでいませんか？🦇

[GitHub-Dark](#https://github.com/StylishThemes/GitHub-Dark)がオススメです。
Stylusという独自CSSを適用するchromeのブラウザ拡張を用いてダークモードのCSSを適用する仕組みになります。

**導入手順**

1. [Stylus](#https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne/related)をインストール
2. [github-dark](#chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/install-usercss.html?updateUrl=https%3A%2F%2Fraw.githubusercontent.com%2FStylishThemes%2FGitHub-Dark%2Fmaster%2Fgithub-dark.user.css)をインストール

これだけで完了！あとはGitHubを開いているブラウザをリロードすればこんな感じに↓
![スクリーンショット 2020-09-09 8.01.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433449/6ca1acb5-efd1-6dcb-eea2-83f362a5efa8.png)


![スクリーンショット 2020-09-09 8.02.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433449/fa197566-683e-5980-2460-bcf62533a4e9.png)

眼球負荷が激減して良い感じです☺️
草が草じゃなくなってるのが少し残念ではありますがまあ良いでしょう！
【JavaScript】配列の中にオブジェクトを追加する。

JSの初歩的な部分で躓いたので、備忘として記録する。

下記のとおり、科目(キー名subject)と点数（キー名points）を代入した変数testがあるとする。
let test = [{subject: 'sociology', points: 75}, {subject: 'english', points: 50}, {subject: 'biology', points: 85}];
この中に、点数95点をとった科目scienceを入れたい場合、

ハッシュ名[キー] = 追加したい値;

では入れられない。

あくまでも、配列[]に追加したいわけなので、pushを使う。

test.push = ({subject: 'science', points: 95});

これで追加完了。ここから、points'95'だけを抽出したい場合は、

console.log(test[3]["points"]);　・・・配列testのインデックス番号[3]の['points']プロパティを出力、という意味。

まとめると下記のとおり。

![2020-09-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698990/34532f5f-5c22-6f2d-5cbe-3190d200dad4.png)


※追記
　下記の書き方も可能。

![2020-09-09 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698990/41517fe6-37ed-9f52-584d-84b013073117.png)
OOSとCloudから何を発想するか

技術的な議論するのではありません、OSS（Open Source Software）とCloudが登場して随分時が経ってきています。
果たして、どれだけの企業で、これらの登場によって新しい方向へと転換できたのでしょうか？
OSSを開発で使用すればコーディング量が減り、品質貢献が期待できます。
場合によっては、コーディングせずにシステムを実現できるような期待が出来るようになりました。
OSSの効果的な一つの方向性として**OSSをリファレンスとする**のはどうでしょうか？
OSSでは多くの人が関与するので、おのずと読みやすさ、コーディングルールが自然と整ってきます。日本と欧米とのソースコードの可読性について大きな違いがあります。それは欧米ではキャリア流動性が高いので、普段から可読性が高く、**開発者からの手離れが良いコーディングを尊重**してきました。日本はその逆が多いのではないでしょうか？今ほどではないにしろ、他人に分かりにくく効率が良いプログラムを構築できることが良しとされ、そのような方がスキルが高いと評価される傾向がまだまだ残っているのではないでしょうか？一部の非常に効率とリアルタイムを追求する領域ではそれもあると思いますが、それ以外の領域では**可読性・メンテナンスビリティ・潜在的なバク（コーディンロジックが難解で、読み誤るとバグを発生しやすいコーディング）**といった観点での品質管理が必要であると思います。模範となる、ある意味でOSSのコードをリファレンスとするのはどうでしょうか？

運用/オペレーションまで考慮した開発環境として何が考えられるでしょうか？　
実際の**運用/オペレーションをテストする為に自社内でプラットフォームを用意するよりもCloud環境を利用する方が遥かに取り回しが良くなります。**
これまでは、仮想マシンによる仮想化を実施してリソースを仮想マシンごとに割り当てる方法を採用してきました。この方法ですとオンライン系とバッチ系を別の仮想マシン上で実行することや、同じ仮想マシン上で実行することを臨機応変変えて実現する事は困難であり、サイズも大きく取り回しが重く実際には無理な状況でした。開発系はITサービスを実現するアプリケーションとミドルウェアだけをパッケージングして取り回せれる方が早く作りますし、完成したものをそのまま運用へ渡せる事を望んでいます。
運用側では、従来の仮想化マシンによる仮想化されたITサービスを運用するとなると、その仮想化マシン各々に資源を割り当てるという方法で、物理的なハードウェアを全体を鳥瞰的にタイムリーに管理するといったことが複雑になってしまいます。この両者の観点を上手く折り合いをつけられる技術としてコンテナ技術による仮想化が登場してきています。この技術は簡単に言うとアプリケーションとミドルウェアだけで塊をつくりDoker等のコンテナ基盤に載せると、コンテナ基盤をサポートしている様々な環境で運用/オペレーションできることが可能となります。
更に、これまでの一度出来上がった全ての環境を保守・維持するという時間経過と共に複雑化していく運用環境を捨てて、**Immutable Infrastructureという破棄＆構築を繰り返す時間がたってもクリーンな運用環境を実現することも出来る**ようになってきます。
この様な技術の到来で、従来の考え・方法・オペレーションを踏襲していくだけで良いのでしょうか？

この話だけで全てを語っていません。
何をお伝えしたいかというと、OSSとCloudによってもたらされる利便性から、**独自の利用・活用方法を考え・実践するという柔軟な姿勢な取り組みを実現して欲しいという事**です。