OmniAICreator/Qiita-1.07M huggingface dataset:
datetimeを配列にしたり、一行で日付だけ受け取ったり

# やりたいこと
```
'2019-10-09 01:20:33'
```

というmysqlに登録されているdatetime形式のデータを

```
$datetime = [
    'year' => '2019',
    'month' => '10',
    'day' => '09',
    'hour' => '01',
    'minute' => '20',
    'second' => '33',
];
```
といった配列形式にしたり

```
$day = hogehoge('2019-10-09 01:20:33'); // 09
```
と、ぱっと取得できるようにしたい。

# 配列形式にする
```
// 一般的なdatetime
$datetime1 = getDateTimeArray('2019-10-09 01:20:33');
$datetime2 = getDateTimeArray('2019/10/09 01:20:33');

// 特殊な場合はformatオプションを付ける
$datetime3 = getDateTimeArray('2019年10月09日01時20分33秒', 'Y年m月d日H時i分s秒');

function getDateTimeArray($datetime, $format = '')
{
    if (empty$format) {
        $date = new DateTime($datetime);
    } else {
        $date= DateTime::createFromFormat($datetime, $format);        
    }
    $datetime_key = ['year', 'month', 'day', 'hour', 'minute', 'second'];
    return array_combine(
        $datetime_key,
        preg_split('/[-: ]/', $date->format('Y-m-d H:i:s'))
    );
}
```

# 日付だけほしい
```
// 一行で
$day1 = date_create('2019-10-09 01:20:33')->format('d');

$day2 = DateTime::createFromFormat('Y年m月d日H時i分s秒', '2019年10月09日01時20分33秒')->format('d');
```

関数使ったほうが見やすいかな

```
// 一般的なdatetime
$day1 = getDateTimeByFormat('2019-10-09 01:20:33', 'd');

// 特殊な場合
$day2 = getDateTimeByFormat('2019年10月09日01時20分33秒', 'd', 'Y年m月d日H時i分s秒');

function getDateTimeByFormat($datetime, $format, $create_format = "")
{
    if (empty($create_format)) {
        return date_create($datetime)->format($format);
    } else {
        return DateTime::createFromFormat($create_format, $datetime)->format($format);
    }
}
```
日付以外表示しないならこれでもいいがちょっと長い。
Railsチュートリアル 第５章＜復習＞

第５章の復習メモです。
個人的に重要と思ったことを書きます。
調べたことや、知っていたことも含めて書きます。


#Bootstrap
Twitterが作成したフロントエンドのフレームワーク。
デザインが予め用意されているので、いい感じのデザインを素早く実装できる。

railsで使うには、Gemfileに`bootstrap-sass`を追加する。

```
source 'https://rubygems.org'

gem 'rails',          '5.1.6'
gem 'bootstrap-sass', '3.3.7'  # ←追加
.
.
.
```

追加後、`$ bundle install`を忘れずに実行する。

また、Bootstrapを読み込ませるため、
CSSファイルには以下を追記する。

```～.scss
@import "bootstrap-sprockets";
@import "bootstrap";
```

**補足**
railsでは、`generate controller`した時、
ビューと一緒に、対応するCSSファイルが作られる。
今回は、簡略化のため、全てのCSSを一つにまとめた物として、
`app/assets/stylesheets/custom.scss`を作成した。
（カスタムCSSというらしい）


##部分テンプレート
ビューファイルのコードの冗長化を防ぐため、
共通する部分を、別ファイルに記載できる。
これを部分テンプレートと呼ぶ。

ファイル名は、
`app/views/layouts/_<任意の名前>.html.erb`
の形式にする必要がある。

呼び出す際は、renderメソッドを用いて、
`<%= render 'layouts/<任意の名前>' %>`
と記載する。

**＜例＞**
部分テンプレート

```app/views/layouts/_shim.html.erb
<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->
```

呼び出す側

```app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application',
                               'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>  # ←ここで呼び出している
  </head>
・
・
```

以下も参考にさせていただきました。
https://qiita.com/taca10/items/dd4a0eae6864e2bdbf3a


#アセットパイプライン、Sass
##アセットパイプライン
以下を参考にさせていただき、学習しました。
https://qiita.com/hogehoge1234/items/9a94ebc93c5f937502cd

##Sass
CSSの強化版（？）で、

- ネスト
- 変数の使用

ができるみたい。書き方等、詳細は省略。


#リンクの貼り方
ビューファイルでリンクを貼る場合、link_toメソッドを使う。

```
<%= link_to "文字列", "URL" %>
```


#ルーティングの変更、名前付きルート
##ルーティングの変更
`generate controller`コマンドでコントローラ等を作成すると、
ルーティングが自動生成される。

```config/routes.rb
Rails.application.routes.draw do
  get  'static_pages/about'
end
```

この場合、`ルート/static_pages`にGETリクエストが来ると、
static_pagesコントローラの、aboutアクションにルーティングされる。
即ち、コントローラ名とアクション名に対して、URLが固定されている。

これを、以下のように書き換えることで、URLを自由に決めることができる。

```config/routes.rb
Rails.application.routes.draw do
  get  '/about',   to: 'static_pages#about'
end
```
上の例では、`ルート/about`にGETリクエストが来ると、
static_pagesコントローラの、aboutアクションにルーティングされる。

##名前付きルート
railsでは、`config/routes.rb`に記載したURLに対して、
ルート以降の相対パス、ルートを含めた絶対パスを表す変数が
それぞれ用意され、格納される。
**＜例＞**

```config/routes.rb
Rails.application.routes.draw do
  get  'static_pages/about'
end
```
の場合

- 相対パス（'/static_pages/about'） ： 変数 `static_pages_about_path`
- 絶対パス（'http://www.～.com/static_pages/about'） ： 変数 `static_pages_about_url`

ルーティングを変更すると、変数名も更新される。
**＜例＞**

```config/routes.rb
Rails.application.routes.draw do
  get  '/about',   to: 'static_pages#about'
end
```
の場合

- 相対パス（'/about'） ： 変数 `about_path`
- 絶対パス（'http://www.～.com/about'） ： 変数 `about_url`


#統合テスト
テストについては、以下を参考にさせていただき、学習中です。
https://qiita.com/duka/items/2d724ea2226984cb544f


復習記事を書いてみると、理解不足がとても実感できます・・・
nodenvでNode.jsを複数バージョン管理する

# nodenvについて

プロジェクトごとにNode.jsのバージョンが異なる場合に、複数のNode.jsを管理・切り替えをすることができます。
**※nodeenvではない**

# インストール　※for Mac
homebrewでインストールできます。
**※nodeenvではない**

```
brew install nodenv
```

## 管理しているバージョンの一覧を確認

以下のコマンドで現在nodenvで管理しているNodeの一覧が確認できます。

```
$ nodenv versions
* system (set by /Users/username/.nodenv/version)
  10.14.1
  10.16.0
```

## Nodeを追加する
まず、以下のコマンドでインストールできるNodeを確認できます。

```
$ nodenv install --list
Available versions:
...
```

一覧から欲しいバージョンを指定して、インストール。

```
$ nodenv install 12.8.0
```

## Nodeを切り替える

プロジェクトディレクトリに移動し、以下のコマンドで使いたいバージョンを指定。

```
$ nodenv local 10.14.1
```

Nodeのバージョンを確認すると切り替わっています。

```
$ node -v
v10.14.1
```


## （おまけ）nodenvを使っている時のnpmの場所

`~/.nodenv/versions/10.16.0/lib/node_modules/npm`
※バージョンは都度確認

IDEでパッケージの指定をしたい場合にけっこう探したので、memo
Visual Studio Code が "Extension host terminated unexpectedly."といって操作できなくなることへの対処

# VSCodeで操作ができなくなる・・
VSCodeで作業中に"Extension host terminated unexpectedly."と出て操作ができなくなる
<img width="530" alt="Screen Shot 2019-10-09 at 17.40.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15053/874d2d4f-23f2-be6f-0cff-a73a184800f7.png">

発生するトリガーがよくわかりませんがSource Controlで変更ファイルを見るときによく起こりました。
発生すると、Source Controlの他のファイルが開けなくなり、まもなく上記メッセージが出ます。。

# Live Share Chatをはずす
VSCodeのExtensionsの**Live Share Chat**をDisableしたら、上記の現象がとりあえず出なくなりました。

# 現象が起きた環境
Visual Studio Code: 1.38.1
Live Share Chat: 0.22.1
Slice notation - TC39 Proposals

この記事は2019年10月9日に書いたものであり、[#tc39_study TC39 Proposals LT 大会](https://web-study.connpass.com/event/147538/)で使用したものです。

---

## 状況
- Stage : 1  
- URL : https://github.com/tc39/proposal-slice-notation/
- Champion : ?
- Authors : ?  
コミット履歴を見る限り、[Sathya Gunasekaran](https://github.com/gsathya)(Google,v8の人)

---
## 提案内容
slice表記構文を追加する提案。
現状は`Array.prototype.slice()`を使用して、配列から指定した要素を元にして配列をshallow copyする。

---
- 左は配列の下限(デフォルト0)
- 真ん中は配列の上限(デフォルトは配列の長さ)
- 右はステップ引数、1はなにもない、2は最初と最後の値の配列(デフォルトは1)
- すべて指定しなくてもOK

```javascript
const arr = ['a', 'b', 'c', 'd'];
arr[1:4:2];
// → ['b', 'd']
```
---
[Prior artの章](https://github.com/tc39/proposal-slice-notation/#prior-art)にもあるように、すでにPython、CoffeeScript、Go、Rubyでは同様のことができると説明がある(触ったことがないのでわからない)

---
slice表記構文を使用する場合はこのようになる

```javascript
const arr = ['a', 'b', 'c', 'd'];
const str = 'hello world';

arr.slice(1, 3);
// → ['b', 'c']

str.slice(6);
// → 'world'
```
---
Slice notationの場合はこうなる.

- `arr[1:3];`は2つめから3つめの要素の配列を生成する
- `str[6:];`は`:`の右辺を指定していないので、6文字目から先のすべての要素が含まれた配列を生成する

```javascript

const arr = ['a', 'b', 'c', 'd'];
const str = 'hello world';

arr[1:3];
// → ['b', 'c']

str[6:];
// → 'world'
```

---
このようにobjectのindexにアクセスして操作もできる

``` javascript
const obj = { 0: 'a', 1: 'b', 2: 'c', 3: 'd', length: 4 };
obj[1:3];
// → ['b', 'c']
```
---
```javascript
const arr = ['a', 'b', 'c', 'd'];

arr[:3:1]; // 下限引数は指定されていないので0
// → ['a', 'b', 'c']

arr[1::1]; // 上限引数は指定されていないので配列長さである4
// → ['b', 'c', 'd']

arr[1:]; // 上限引数は上記の通り4、ステップ引数は指定されていないので1
// → ['b', 'c', 'd']

arr[:3]; // 上限引数は上記の通り0、ステップ引数は上記の通り1
// → ['a', 'b', 'c']

arr[1::2]; // 上限引数は上記の通り4、ステップ引数は上記の通り2なので、要素の最初と最後を取得
// → ['b', 'd']

arr[:3:2]; // 下限引数は指定されていないので0、ステップ引数は2なので、要素の最初と最後を取得
// → ['a', 'c']
```

----
なにも指定しない場合は、配列のshallow copyになる

```javascript

const arr = ['a', 'b', 'c', 'd'];
arr[:];
// → ['a', 'b', 'c', 'd']

arr[::];
// → ['a', 'b', 'c', 'd']
```

---
- マイナス表記もある
- 下限計算`start = max(lowerBound + len, 0)`
- 上限計算`end = max(upperBound + len, 0)`
- 配列の要素を逆転させたい場合はステップ引数を`-1`にする

```javascript

const arr = ['a', 'b', 'c', 'd'];

arr[-2:];
// start = max((-2 + 4), 0) = max(2, 0) = 2
// → ['c', 'd']


arr[-10:];
// start = max((-10 + 4), 0) = max(-6, 0) = 0
// → ['a', 'b', 'c', 'd']

arr[:-2];
// end = max((-2 + 4), 0) = max(2, 0) = 2
// → ['a', 'b']

arr[:-10];
// end = max((-10 + 4), 0) = max(-6, 0) = 0
// → []

arr[::-1];
// → ['d', 'c', 'b', 'a']
```
---
上限と下限は配列の長さで制限がある

```javascript

const arr = ['a', 'b', 'c', 'd'];

arr[100:];
// → []

arr[:100];
// → ['a', 'b', 'c', 'd']
```
Ruby インスタンス変数 の 値 を 順に出力する

# 目的

- インスタンス変数を出力する方法を知る。

# 書き方の例

- クラス`A`にはインスタンス変数`b`と`c`が定義されるものとする。
- インスタンス変数`c`の値を順に出力したい。
- インスタンス`1`と`2`の2個作成するものとする。
- クラス`A`から生成したインスタンスのインスタンス変数`b`と`c`には任意の値が入っているものとする。
- 下記に処理を記載する。

```ruby
# クラスAを定義
class A

  # 変数string_1にインスタンス1の内容を格納
  string_1 = A.new(b: "インスタンス変数bに格納される値", c: "インスタンス変数cに格納される値")

  # 変数string_2にインスタンス2の内容を格納
  string_2 = B.new(b: "インスタンス変数bに格納される値", c: "インスタンス変数cに格納される値")

  # 変数stringsに変数string_1とstring_2の内容を配列として格納
  strings = [string_1, string_2]

  # 変数stringsに配列状に格納された内容を一つづつ変数stringに格納
  strings.each do |string|

    # 変数stringに格納された内容のインスタンス変数cのみを出力
    puts string.c

  # each文を閉じる
  end

# クラス定義を閉じる
end
```

# より具体的な例

- クラス`Menu`にはインスタンス変数`content`と`price`が定義されるものとする。
- インスタンス変数`content`の値を順に出力したい。
- インスタンス`1`と`2`の2個作成するものとする。
- クラス`Menu`から生成したインスタンス`1`のインスタンス変数`content`には、文字列「お肉100g」が格納され、インスタンス変数`price`には文字列「100円」を格納する。
- クラス`Menu`から生成したインスタンス`2`のインスタンス変数`content`には、文字列「お魚1尾」が格納され、インスタンス変数`price`には文字列「150円」を格納する。
- 下記に処理を記載する。

```ruby
# クラスMenuを定義
class Menu

  # 変数menu_1にインスタンス1の内容を格納
  menu_1 = Menu.new(content: "お肉100g", price: "100円")

  # 変数menu_2にインスタンス2の内容を格納
  menu_2 = Menu.new(content: "お魚一尾", price: "150円")

  # 変数menusに変数menu_1とmenu_2の内容を配列として格納
  menus = [menu_1, menu_2]

  # 変数menusに配列状に格納された内容を一つづつ変数menuに格納
  menus.each do |menu|

    # 変数menuに格納された内容のインスタンス変数cのみを出力
    puts menu.content

  # each文を閉じる
  end

# クラス定義を閉じる
end
```

- 下記に前述の処理のコメント無しバージョンを記載する。

```ruby
class Menu
  menu_1 = Menu.new(content: "お肉100g", price: "100円")
  menu_2 = Menu.new(content: "お魚一尾", price: "150円")
  menus = [menu_1, menu_2]
  menus.each do |menu|
    puts menu.content
  end
end
```
Udemy 「Unityゲーム開発入門」講座受講ノート　4 - 19 Listとforeach

#19.Listとforeach

###List

配列と同じように連続した複数のデータをまとめて扱うことができる。
for文と連携して使える。

さらに、**追加、削除**ができる


###宣言と初期化
**List<型名> 変数名 = new List<型名>(){値a,値b,値c};**



```csharp
        List<int> numbers = new List<int>(){-1,21,23};
```

###値の取得

```csharp
        Debug.Log(numbers[0]);
        Debug.Log(numbers[1]);
        Debug.Log(numbers[2]);
```
###値の代入
```csharp
        numbers[1] = 0;
        Debug.Log(numbers[1]);      //確認する
```

###値の追加

**変数名.Add(追加する値);**

```csharp
        numbers.Add(100);
        Debug.Log(numbers[3]);      //確認する
```

###値の削除
２つの方法
**変数名.RemoveAt(何番目);**
**変数名.Remove(削除する値);**

```csharp
        numbers.RemoveAt(3);
        numbers.Remove(-1);
```
###長さの取得
```csharp
        Debug.Log(numbers.Count);
```

### for文との連携
```csharp

        for(int i=0; i<numbers.Count; i++)
        {
            Debug.Log(numbers[i]);
        }
```


1-9までのListを作りたい

```csharp
        List<int> numberList = new List<int>();
        for(int i=0; i<10; i++)
        {
            numberList.Add(i);
        }
        for(int i=0; i<numberList.Count; i++)
        {
            Debug.Log(numberList[i]);
        }
```

###foreach文
配列とListで使える
全部の要素を簡単に呼び出せる

**foreach(型名 各要素を入れる変数名 in リストの変数名)
{
}**

```csharp
        List<string> nameList = new List<string>(){"フク","ルル","グリ"};
        foreach(string Name in nameList)
        {
            Debug.Log(Name);
        }
```


例題：0-99までの3の倍数を要素にもつListを作成する。
値を表示して確認する.

```csharp
        List<int> testList = new List<int>();  //宣言
        for(int i=0; i<100; i++)               //iを0～99まで繰り返す
        {
            if(i%3 == 0)                       //iが3の倍数の場合
            {
                testList.Add(i);               //testListに追加する
            }
        }
        foreach(int number in testList)        //リストの要素を確認する
        {
            Debug.Log(number);
        }
```

-------------------------------------------------------------------------
##教材
**Udemy Unity ゲーム開発入門：インディーゲームクリエイターが教えるマリオのようなゲームを作成する方法**
https://www.udemy.com/course/studio_shimazu_sideview_action/
Excel VBA入門 　ボタン追加

# VBAでボタン作成
VBAでボタンを追加するには下の画像の様にまず開発タブのコントロールグループ内の挿入から
ボタン(フォームコントロール)をクリックします。
![スクリーンショット 2019-10-09 17.30.04_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507713/af605ae3-438e-4e11-8296-6d32a7854459.jpeg)

次にボタンの大きさをドラッグで指定します。
![スクリーンショット 2019-10-09 17.34.32_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507713/cd7fe9ae-a7d7-ad80-d364-a311374ac816.jpeg)

マクロの登録ウィンドウが出るのでマクロ名を入力してマクロの保存先を作業中のブックを選択して編集ボタンをクリックします。
![スクリーンショット 2019-10-09 17.35.11_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507713/01ebfd67-3f77-99e9-5be3-e891152f3096.jpeg)

するとVBEのコードのウィンドウへ遷移するのでそこでボタンをクリックした時の処理を記述します。
今回はSub btnMessage() MsgBox "ボタンクリック" EndSubと記述して
ボタンを押すと"ボタンクリック"と文字が別ウィンドウで表示されるようにしてます。
![スクリーンショット 2019-10-09 17.35.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507713/2dd6e84c-54e4-bd80-aea1-2a292a7a1fd5.png)

![スクリーンショット 2019-10-09 17.36.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507713/6a769434-b763-41ef-db35-aedac099822b.png)
PathFollower.startFollowのパラメータ


|名前 	        |タイプ	|引数	   |デフォルト|説明
|:--------------|:------|:---------|:-------|:-----|
|duration       |number |<optional>|1000    |パスの継続時間（単位：ミリ秒）を指定します。継続時間> 0。
|from	        |number |<optional>|0	    |パスの開始位置を指定します。開始位置は0〜1の間で、toより小さくなければなりません。
|to	        |number |<optional>|1	    |パスの終了位置を指定します。終了位置は0から1の間で、fromより大きくなけれななりません。
|positionOnPath	|boolean|<optional>|false   |パスオフセットを使用してPathFollowerをPathに配置するかどうかをセットします。
|rotateToPath	|boolean|<optional>|false   |PathFollowerは、Pathの方向を指すように自動的に回転する必要かどうかをセットします。
|rotationOffset	|number |<optional>|0	    |PathFollowerがPathに一致するように回転している場合、この値は回転値に追加されます。これにより、オブジェクトをパスに回転させることができますが、回転の角度も制御できます。
|startAt        |number |<optional>|0       |パスの現在の開始位置を指定します。現在の開始位置は、from～toの間になければなりません。
ruby on rails 第2章

- bundle install --path vendor/bundle
    - このプロフェクトのみで使うgemをインストールする
- bundle install --without production
    - 本番環境をのぞいてgemをインストール
- ソースコードから実行用プログラムをビルドするためのツールがRake
    - rails4以前はrakeに関わる記述をgemファイルに記載していたためマイグレーションを行うときは`bundle exec rake db:migrate` としていたが、rails5以降は`rails db:migrate`でもいけるようになった。
- Restとはrepresentational state transfer の略である。
    - restfulなスタイルを採用することで、rails開発者にとっては作成すべきコントローラーやアクションの決定が楽になる。
 
-
SwiftUI 破線のボタンの作り方

# 破線のボタンの作り方
備忘録です。

<div align="center">
<img width="300" alt="hasen_sample_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184792/b3973118-7321-65c9-e21c-9af9a281ec73.png">
</div>

StrokeStyleのdashの数値で破線の長さを変更できます。

```swift
var body: some View {
        VStack(alignment: .center) {
            Button(action: {}) {
                HStack(spacing: 4) {
                    Image(systemName: "plus.circle")
                    Text("HogeHoge")
                }
                .foregroundColor(.blue)
                .padding(12)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .strokeBorder(
                            style: StrokeStyle(
                                lineWidth: 2,
                                dash: [4]
                            )
                    )
                        .foregroundColor(.blue)
                )
            }
            
        }
    }
```
Python3の勉強まとめ Part.1

# print関数その1
str型(文章)をprintで入力するときのオプション、注意点
・文字を囲むとき「"」と「'」はどっちでもいい
・例えばprint('I don't know.')など、文字の前後と文字の内側に同じ記号があるとエラーになる
・回避したい場合は前後と内側の記号をバラバラにするか、内側の記号の前にバックスラッシュ(\)を入力する
<pre>例.print('I don\'t know.') → I don't know</pre>
・\nと入力すると改行できる
<pre>例.print("Hello,World!") → Hello,World!

例.print("Hello,\nWorld!") → Hello,
                             World!</pre>

・C:\name\nameなど、フォルダの先頭がnのファイルパスをprintしたいときは、
先頭にr(raw)をつける
<pre>例.print(r'C:\name\name) → C:\name\name</pre>
・先頭にまとめて「"」を3つつけると改行して表示させることができる
<pre>例.print(""" 
test1                      test1
test2             →        test2
test3                      test3
test4                      test4
""")</pre>
・文章後に(半角スペース)* (数値)と入力すると繰り返し表示させることができる
<pre>例.print("Oh,Yes!" * 3) → Oh,Yes!Oh,Yes!Oh,Yes!</pre>
・文節の間に+を挟むと繋げることができる(無くてもよい)
<pre>例.print("Oh,Yes!" *3 + "Ah....") → Oh,Yes!Oh,Yes!Oh,Yes!Ah....</pre>
・通常は「+」を使わなくても文節を繋げて表示させることができるが、変数を用いた場合はできない
<pre>例.test = "Py"
print(test"thon") → error!

例.test = "Py"
print(test + "thon") → Python</pre>

一旦ここまで！
print関数だけでめっちゃ量あるなぁ...
Nested import declarations - TC39 Proposals

この記事は2019年10月9日に書いたものであり、[#tc39_study TC39 Proposals LT 大会](https://web-study.connpass.com/event/147538/)で使用したもの。

この機能はまだ未策定かつ変更の可能性が高い。

---

## 状況
- Stage : 0
- URL : https://github.com/benjamn/reify/blob/master/PROPOSAL.md
- Champion : [Ben Newman](https://github.com/benjamn)
  - この頃はFacebookやMozillaに居たかもしれないが、今はMeteorでApolloの開発者ぽい

---
## 提案内容
importをtop level以外でも使用できるようにするというもの。  
関数内にネスト可能で、スコープは関数内に限定し、同期的宣言。

```javascript

if (condition) import "./sometimes";

if (condition) {
  import "./sometimes";
}

if (condition) let foo = bar;
```
---
## Dynamic importとの違い

非同期関数内のみで動作する。

```javascript
async function main() {
  const hoge = await import('./hoge.js');
  hoge()
}
```
---
この`Dynamic import`はすでに現在EdgeやIE以外の主要ブラウザで使用できる。
![スクリーンショット 2019-10-09 11.34.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108073/1820dc7d-1e43-dac4-27c6-b57ea3d81585.png)
---
---
## Dynamic importとの関係
[Dynamic importのproposal](https://github.com/tc39/proposal-dynamic-import)の[「A new binding form」](https://github.com/tc39/proposal-dynamic-import#a-new-binding-form)の部分を読むと記載があるが、[2016年7月のTC39 meetingでNested import declarationsの話し合い](https://github.com/rwaldron/tc39-notes/blob/def2ee0c04bc91612576237314a4f3b1fe2edaef/meetings/2016-07/jul-27.md#10iiic-nested-import-declaration)があり、そこで当時Stage1にいたDynamic importの前身?である`await import`の提案を待つように言われている。

同期的なimportの提案なので、ブラウザやtop levelのimportとの関係性に問題があるという話などが行われていた。  
先ほど記載したように`await import`の提案を待つように言われており、本人は同期宣言を望んでいたが、どうやら叶わなかったらしい。  
まだ[Inactive Proposals](https://github.com/tc39/proposals/blob/master/inactive-proposals.md)に入らず、Stage0に居るので、もしかしたら動くこともあるかもしれない。  

---
## 最後に
このNested import declarationsを読む前はDynamic importがあり、Stage0から上がらなさそうなのに、なんで読もうとしているのだろうという気持ちだったが。  
Dynamic importとの関係性や2016年の話し合いを知れて、おもしろかった。
全部Typescriptで作りたい

# はじめに

結論から言うと、「開発プロジェクトで扱う開発言語をTypescriptに一本化してみる」というものです。

## 背景

開発プロジェクトでは、Webアプリだけ作ることなないでしょう。サーバサイド(マイクロサービス)やお手軽なツールも作るはずです。そして開発する各アプリ・ツールは、用途に合ったフレームワークや開発言語を採用していると思います。

Webアプリであれば、React, Vue, Angularといったフレームワークとなり、開発言語はJavascriptもしくは、Typescriptとなります。
サーバサイドであれば、Django, Spring Boot, ASP.NET フレームワークなり、開発言語はPython, Java, .NET(C#等)となります。
ツールやバッチとなると、、、選択肢は多いですが、サーバサイドで採用した開発言語に合わせたり、稼働OSによって選択肢を絞り込むことになるのではないでしょうか。

以前から継続しているプロジェクトならば仕方ないですが、新規プロジェクトでは一つにまとめたい！
そのために、調べたことを以下に書いてみます。

## 開発言語の採用例

現時点で、自分が新規に開発するならば、以下の構成パターン①②で作るのが良いかと考えています。
それでも、Typescriptと(Java or Python)となってしまいます。
というわけで、パターン③というモチを描いてみました。
**(既にやってるよ！という方はいっぱいいるかもしれませんけど(笑))**

| 構成              | GUI                            | Service             | Tool/Batch         |
|:-----------------|:-------------------------------|:--------------------|:-------------------|
| パターン1         | Angular/React/Vue - Typescript | Spring Boot - Java  | Spring Boot - Java |
| パターン2         | Angular/React/Vue - Typescript | Django - Python     | Python             |
| パターン3(New!)   | Angular/React/Vue - Typescript | NestJS - Typescript | oclif - Typescript |

ウムウム！全部Typescriptにまとめられてスッキリです。
また、表に表現してませんが、Electronを使えばマルチプラットフォームなデスクトップアプリも作れますし、nexeでも同様のパッケージ化もできますよね。
あと、サーバとクライアントで同じソースを共有できると、元々サーバでしていた処理をクライアント側に変更したり、、といった最適化もしやすいですよね。PWAの考え方に似てますね。

# 実現性の確認

それでは全部Typescriptで作れるか？簡単に確認していきたいと思います。
確認はHello World!程度と考えています。(またWindows10 で実施しています)

## GUI(Angular)

@angular/cli を使ってみました。

```
npm i @angular/cli -g
ng new hello
cd hello
ng serve --open
```

![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179413/68f69efe-4c68-99a5-325b-da8f7bf05ac2.png)

## Service(NestJS)

```
npm i -g @nestjs/cli
nest new hello
cd hello
npm run start
```

`http://localhost:3000`をブラウザ(chrome)で開いてみると以下が表示されます。

![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179413/5c1666db-0b86-d0f8-0b9a-a3bcc27a4135.png)

## Tool/Batch(oclif)

```
npm i oclif
npx oclif multi mynewcli
cd mynewcli
bin\run --version
mynewcli/0.0.0 win32-x64 node-v10.15.3
```

## パッケージ化(ocliif+nexe)

```
npm i nexe -g
npx oclif multi mynewcli
cd mynewcli
nexe bin\run
.\run.exe --version
mynewcli/0.0.0 win32-x64 node-v10.15.3
```

## パッケージ化(nestjs+nexe)

```
npm i nexe -g
nest new hello
cd hello
nexe dist\main.js
main.exe
```

`http://localhost:3000`をブラウザ(chrome)で開くと同様に応答があります。

# 所感

まだ"Hello World"しか試せていませんが、全部Typescriptで作れそうです。
ただ、DjangoやSpring Bootの代替として使えるか？もう少し検証が必要そうですね。
UiPathで使える文字列操作

UiPathの文字列操作で、ぐぐってもたどりつけなかったのもあったので、忘備で書いておきます。

#空白削除する系
#####文字列の前後を削除　.Trim
「 　 椎名 林檎 」　 ⇒　「椎名 林檎」
" 　 椎名 林檎 ".Trim
#####文字列の途中にある空白を削除　.Replace(" ","")
「椎名 林檎」　 ⇒　「椎名林檎」
"椎名 林檎".Replace(" ","")
「椎名　林檎」　 ⇒　「椎名林檎」
"椎名　林檎".Replace("　","")
#####文字列の途中にある改行を削除　.Replace(vbCrLf,"")
「椎名　　⇒　「椎名林檎」
林檎」
"椎名
林檎".Replace(vbCrLf,"")　
vbCrLfに""は不要なので注意です。vbCrLfでダメだったらvbLf

#置き換える系　
#####特定の文字を置き換える　.Replace
"椎名林檎".Replace("椎名","Sheena")　 ⇒　「Sheena林檎」
#####小文字から大文字に置き換える　.ToUpper
"SheenaRingo".ToUpper　 ⇒　「SHEENARINGO」
#####大文字から小文字に置き換える　.ToLower
"SheenaRingo".ToLower　 ⇒　「sheenaringo」

#教えてくれる系
#####文字数を返す　.length
"椎名林檎".length　 ⇒　「4」
#####何番目にあるかカウント　.IndexOf
"椎名林檎".IndexOf("林")　 ⇒　「2」
カウントは0から始まります

#取り出す系
#####左から何文字かを取り出す　Left
Left("椎名林檎",2)　 ⇒　「椎名」
#####ある文字からある文字まで取り出す　.Substring
"SheenaRingo".Substring(3,4)　 ⇒　「naRi」
カウントは0から始まります。.Substring( 何番目から,何文字 ）

#その他
#####指定した箇所から指定した分だけ削除　.Remove
"椎名林檎".Remove(1,2)　 ⇒　「椎檎」
カウントは0から始まります。.Remove( 何番目から,何文字 ）
\tの使い方 macとWindowsで異なるエスケープシーケンス-java

**文字列内で使う時**

```java:sample
		System.out.println("美味しい\tみかん");
```
コンソール：　美味しい　みかん

**変数を使う時**

```java:sample
		String sample1 = "ふつうの";
		String sample2 = "いちご";
		System.out.println(sample1 + "\t" + sample2);
```

コンソール：　ふつうの	いちご


**Windows**

```java:sample
		System.out.println(sample1 + "\t" + sample2);
		System.out.println(sample1 + "¥t" + sample2);

```
\と¥両方が使える

**mac**

```java:sample
		System.out.println(sample1 + "\t" + sample2);
		System.out.println(sample1 + "¥t" + sample2);　//macではバックスラッシュと円記号が区別される
```
コンソール：
ふつうの	いちご
ふつうの¥tいちご


**エスケープシーケンス（一部）**

| エスケープシーケンス       |       記号の意味 |    Center align    |
|:-----------------|------------------:|:------------------:|
| ¥"            |    ダブルクォーテーション
|¥'|シングルクォーテーション
| column           |            改行
| will             |             ￥(円)マーク |        will        |
| be               |                be |         be         |
| left             |             right |       center       |
| aligned          |           aligned |      aligned       |
CloudFormationでCodeBuildのBuildSpecのファイル名指定方法

# はじめに
BuildSpecの初期値のファイル名「buildspec.yml」を変更する方法がわからず、サポートに問い合わせしたため備忘録として記録。
開発/本番環境でファイル名を変えたかった。

# 方法
SourceプロパティのBuildSpecに指定する。
下記は「my-buildspec.yml」を指定した例

```yaml
Resources:
  MyProject:
    Type: AWS::CodeBuild::Project
    Properties: 
      Artifacts: 
        Type: CODEPIPELINE
      Environment: 
        ComputeType: BUILD_GENERAL1_SMALL
        Image: aws/codebuild/standard:2.0-1.10.0
        ImagePullCredentialsType: CODEBUILD
        Type: LINUX_CONTAINER
      ServiceRole: <サービスロールの ARN>
      Source: 
        BuildSpec: my-buildspec.yml
        Type: CODEPIPELINE
```

# 参考
https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-properties-codebuild-project-source.html

# ひとこと
ドキュメントを見て理解できずにサポートにお世話になってしまう。
AzureHttpError : The specifed resource name contains invalid characters. ErrorCode: InvalidResourceNameの原因

azure上では英字がすべて小文字に変換されて記憶されるため、
アカウントに大文字英字を含んでいた場合に起きるバグ。

### 解決方法
アカウントをすべて小文字にする。
もしくは、小文字に置き換えてから処理を行うように変更する。
Ruby on Railsで「"application.js" is not present in the asset pipeline」とエラー

progateのRuby on Railsをローカル環境で学習中に表題のエラーが発生したためメモとしてまとめます。

ログアウト、いいね機能を実装した際に
`ActionView::Template::Error: The asset "application.js" is not present in the asset pipeline`
とjavascriptのファイルが存在しないとエラーが出ました。


調べると原因はrailsのバージョンの違いによるものでした。
rails5.xではJavascriptのフォルダは
`app/assets/javascripts/application.js`

とある一方、rails6.0では
`app/javascripts/application.js`
と場所が異なります。

rails5.xでのビューファイルhead内は
`<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>`
となっているため以下のように変更し、正常にapplication.jsが読み込まれるようにし解決しました。なお全てのビューファイルで反映してほしいため、app/views/layouts/application.html.erbに変更を加えています。

```ruby:application.html.erb
  <head>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
```

上でも少し触れましたが、progateで使用されているrailsバージョン「5.x」を指定してプロジェクトを作成する必要があったのですが、何も分からず`rails new [プロジェクト名]`で始めてしまい、バージョンは最新の「6.0.1」となっていました。
学習の中でProgateに記載されているコードをそのままエディタに貼り付けた際、application.html.erbのheadタグ内も誤って書き換えたのが原因です。


書籍等で学習する際は以下の記事を参考にアプリ作成を始めようと思います。
[Rails開発環境の構築（複数バージョン共存可能）（Homebrew編）](https://qiita.com/emadurandal/items/e43c4896be1df60caef0)
[GCP]Google App EngineでWebアプリを公開するまでの一連の流れ

# はじめに
node.jsで作成したWebアプリをGoogle App Engine（以下、GAE）にデプロイするまでの一連の流れをまとめています。


# 手順
## 1. ローカルマシンにnode.jsのインストール
ローカルで作成したnode.jsアプリをテストしたい方は、node.jsをインストールしてください。
ローカルでテストをしない方はこの手順を省略しても問題ありません。

ダウンロード先
https://nodejs.org/ja/download/

## 2. Cloud SDKのインストール
インストール手順
https://cloud.google.com/sdk/install?hl=ja

## 3. 必要なファイルの作成
適当なフォルダを作成し、`app.js`と`app.yaml`と`package.json`を保存します。
参考までに、express（node.jsのWebアプリケーションフレームワーク）を用いて Hello, world! を表示するプログラムを記載しておきます。
なお`app.js`と`app.yaml`はGAEのチュートリアルで扱われているものです。

```javascript:app.js
'use strict';

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.status(200).send('Hello, world!');
});

if (module === require.main) {
  const server = app.listen(process.env.PORT || 8080, () => {
    const port = server.address().port;
    console.log(`App listening on port ${port}`);
  });
}

module.exports = app;
```

```yaml:app.yaml
runtime: nodejs10
```

```json:packege.json
{
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "express": "^4.16.4"
    }
}
```

## 4. アプリの有効化
GAEの画面で「設定を有効化」をクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402872/4f625f65-a321-f875-28f1-3f6806e07d61.png)

次に「アプリケーションを有効にする」をクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402872/e522c56d-0d40-7204-e3f1-d1eff585b972.png)

## 5. デプロイ
3で作成したフォルダ内で`gcloud app deploy`コマンドを実行してください。

## 6. Webアプリの表示
`gcloud app browse` コマンドを実行してください。
Hello, world! が表示されます。

もしくはGAEの画面からもWebアプリの表示ができます。
サービス名（ここではdefault）をクリックしても表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402872/55dc9be6-40a0-5bde-1e71-cf7b632226d7.png)

バージョンをクリックしても表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402872/bd1bb952-8470-ed19-2386-77667fb52121.png)


# トラブルシューティング
## デプロイ時にエラーが出る
`gcloud app deploy`コマンド実行時に以下のエラーが表示される場合は、「4. アプリの有効化」の設定をしていないものと思われます。

`ERROR: (gcloud.app.deploy) Unable to deploy to application [プロジェクトID] with status [USER_DISABLED]: Deploying to stopped apps is not allowed.`

## Hello, world! が表示されない
Stackdriver Loggingでログを確認してください。
以下のメッセージが表示されている場合は、packege.jsonで`"start": "node app.js"`の指定がされていないものと思われます。
この記載がないとデフォルトでserver.jsを実行しようとするようです。

`Error: Cannot find module '/srv/server.js' at Function.Module.`
OCIへのコンソール・ログインをセキュアにする


# したいこと
デフォルトの状態だと、ID/パスワードが漏れてしまえば、世界中どこからでも侵入されてしまうので、無償の範囲でOCIへのコンソール・ログインをセキュアにして、安心して眠りたい。

# 制御の対象

IDCS経由でログインした場合と直接ログインした場合では、制御対象のユーザが異なるため、分けて考える必要がある。

![idcslogin02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456818/841f0be5-4923-2f6c-a279-18b3e9b6ec30.png)

* 制御ポイント①は、IDCSの機能によって制御する。[IDCSの無償機能と有償機能](https://qiita.com/NSO-KC/items/e3fde269a1ec2e1529c8)より、接続元IP制限を無償の範囲で利用できる。ただし、MFAを使いたい場合は有償ライセンスが必要

* 制御ポイント②は、OCIの機能によって制御する。こちらはMFAが標準機能として提供されている。( [Managing Multi-Factor Authentication](https://docs.cloud.oracle.com/iaas/Content/Identity/Tasks/usingmfa.htm) )

* 2020/9/2 Update
 OCIローカル認証も、ソースIPによるコンソールログインの制御ができるようになったようです。
 https://docs.cloud.oracle.com/en-us/iaas/releasenotes/changes/e5cc1ae9-089b-478c-84e6-539f7435db4c/

# 制御方法の選択

両方を同時に使用するのは煩雑なので、IP ( 場所 )で制限したいか、個人所有のデバイスを使用したMFA ( 人 )で制限したいかによって、どちらをメインで使うか考える。( IDCSのライセンス持っているなら、IDCSに統一したほうがより細かい制御ができるだろう。 )

私は、企業アカウントの管理者ではないので、個人登録のアカウントを前提とする。その場合、ログインしている「人」を確実に識別できることが望ましい。そのため、OCIのMFA機能を使う。(企業アカウントの場合は、IP ( 場所 ) で制限したいこともあるだろう)

その場合、以下が懸念される。

1. IDCS経由でログインされた場合、MFAの制御をバイパスされる。
2. デバイスを紛失したら、詰む。(SR上げたらなんとかしてくれるのかな。。)

1.に対しては、グループマッピングをデフォルトから変更して、Administratorsが付与されないように変更する
2.に対しては、複数のデバイスを登録することで対応する。(会社貸与携帯と個人携帯)

# やってみた
## MFAを有効にする

1. MFAに利用するデバイスに、オーセンティケータ・アプリケーション(Oracle Mobile Authenticatorなど)をインストールする ※ 検証では、Oracle Mobile Authenticatorを使いました。
2. OCIコンソールに、制御対象のユーザを使ってログインする
3. 左上のメニューから、ログイン・アカウントのリンクを押下する

![user01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456818/64ef6bc9-a2b1-6adf-856d-9e370357540e.png)

4.「マルチファクタ認証の有効化」ボタンを押下する
5. 表示されるQRコードを、端末にインストールしたオーセンティケータ・アプリケーションで読み取る
6. オーセンティケータ・アプリケーションに表示される数値を入力して「有効化」ボタンを押下する
![mfa01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456818/73e7a350-5fd6-3279-4e91-cfeecc153d1e.png)
7. いったんログアウトし、もう一度ログオンする
8. ログオン時に以下の画面が表示される。オーセンティケータ・アプリケーションに表示されている文字列を入力して、ログインできれば成功
![mfa02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456818/baa5047a-88b3-5e19-7a0b-73e2e76dbc1d.png)

## もう一人管理者を登録する
1. OCIの管理者を作成する場合は、メニュー→[アイデンティティ]→「ユーザ」を選択し、「ユーザの作成」ボタンから新規ユーザを作成。作成後、作成したユーザのリンクを押下して、「パスワードの作成/リセット」ボタンを押下すると初期パスワードが生成される。
2. メニュー→[アイデンティティ]→「グループ」を選択し、Administratorsグループを押下。「ユーザをグループに追加する」を選択して、上記で追加したユーザを選択する
3. 新規作成したユーザでログインできることを確認する
4. もう一つのデバイスに対し、「MFAを有効にする」の手順をもう一度実行する

## グループマッピングをデフォルトから変更する
1. まずは、新規にグループを作成する
OCIのWEBコンソールから、メニュー→[アイデンティティ]→[グループ]を選択して、「グループの作成」→ "USER_IDCS" (命名は任意) という名前のグループを作成する。( このグループには何の権限も付与しない )
![group01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456818/08ed37f4-139e-16c3-5691-0abaa9850556.png)

2. マッピングを変更する
OCIのWEBコンソールから、メニュー→[アイデンティティ]→[フェデレーション]を選択する。デフォルトで存在する"OracleIdentityCloudService"のリンクを押下して、「マッピングの編集」を押下し、マッピングを変更する
![group-mapping.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456818/5704f20c-6a16-db11-63b3-649c60c85a59.png)
3. IDCS経由でログインして、いろいろとメニューを触ってみる。ログインはできるが、リソースが何も表示されなければ成功


これで、管理ユーザのログインは、MFA必須になっているはず。。
日付を出力するときのフォーマットをカスタムする

# はじめに
- コマンドプロンプト、PowerShell両方で実行可能。
- 今回はコマンドプロンプトで実行している。<br>
※「powershell」の記述を抜けばPowerShellで実行可能。


# 日付のフォーマットを変更する。
「yyyymmdd」形式や昨日の日付などを出力できる。

## 本日の日付を「yyyymmdd」形式で出力する
 ```
powershell [DateTime]::Today.ToString('yyyyMMdd')
```

##  昨日の日付を「yyyy-mm-dd」形式で出力する
```
powershell [DateTime]::Today.AddDays(-1).ToString('yyyy-MM-dd')
```

# 実行結果を変数として代入する
batファイルなどに使うと便利。
「YDAY」に昨日の日付を「yymmdd」形式で出力する。

```
set CMD="powershell [DateTime]::Today.AddDays(-1).ToString('yyMMdd')"
set YDAY=
for /f "usebackq delims=" %%a in (`%CMD%`) do set YDAY=%%a
echo %YDAY%

pause

endlocal
```
個人的Apacheのセキュリティを考慮した設定

個人的にApacheのセキュリティを考慮した設定を記載します。

## iconsディレクトリ対策
デフォルトコンテンツで使う画像などが設置されているディレクトリについて、コンテンツ表示を無効化する。
### autoindex.confの修正
```
vi /etc/httpd/conf.d/autoindex.conf
※以下の箇所をコメントアウト。

#Alias /icons/ "/usr/share/httpd/icons/"

#<Directory "/usr/share/httpd/icons">
#    Options Indexes MultiViews FollowSymlinks
#    AllowOverride None
#    Require all granted
#</Directory>
```
## welcome.conf削除
非表示でもいいと思いますが、公開不要なものなので削除。

```
rm -f /etc/httpd/conf.d/welcome.conf
```
## security.conf作成
```
vi /etc/httpd/conf.d/security.conf
※以下記載。

# バージョン情報の隠蔽
ServerTokens Prod
ServerSignature Off

# inode情報の隠蔽
FileETag None

# レスポンスヘッダからX-Powered-Byを削除
Header unset X-Powered-By

# httpoxy 対策
RequestHeader unset Proxy

# クリックジャッキング対策
Header append X-Frame-Options SAMEORIGIN

# XSS対策
Header set X-XSS-Protection "1; mode=block"
Header set X-Content-Type-Options nosniff

# XST対策
TraceEnable Off

<Directory /var/www/html>
   # .htaccess の有効化
   AllowOverride All
   # ファイル一覧出力の禁止
   Options -Indexes
</Directory>
```

## クライアントから送信されるHTTPリクエストに関する設定
数値はあくまで例です。LimitRequestFieldSize が4096だと、
長いCookieコンテンツを送信した場合、Bad Requestが発生することもあります。
ただCookieの長さの上限をあまり大きくしないほうがセキュアです。

```
# リクエストボディの最大サイズ
LimitRequestBody 655360000
# リクエストヘッダーの最大数
LimitRequestFields 32
# リクエストヘッダーの最大サイズ
LimitRequestFieldSize 4096
# リクエストラインの最大サイズ(各リクエストの最初のライン)
LimitRequestLine 4096
```
## ダミーのVirtual Hostを設定
　IPアドレスや意図しない逆引きアドレスからアクセスされないよう、最初ダミーのVirtualHostを設定します(↓はexample.comというドメイン名の場合)。この設定をしてログを確認すると、どれだけ不審な送信元IPからアクセスを受けているかわかります。

```
NameVirtualHost *:80
<VirtualHost *:80>
    ServerName dummy.example.com # 適当な名前でよい

    ...
</VirtualHost>

<VirtualHost *:80>
    ServerName example.com # 実際に使用しているドメイン
    ...
</VirtualHost>
```
三日坊主だけどプログラミングに挑戦してみた

# Hello,World!
まずは簡単な自己紹介。
僕は今までプログラミングというものをやったことがありません。

業務でプログラミングが必要になったので、
UdemyとQiitaを使ってPythonの勉強をし、記録していくことにしました。
# 用意したもの
Windows 10搭載のノートPC
[酒井 潤さんの講座](https://www.udemy.com/course/python-beginner/)
(セール中に買うと2000円以下で買えます)
やる気、元気、時間
Python 3.7.4
Anaconda3
Pycharm
# 略歴
文系マーチ卒業(浪人して受かる程度の知能)
新卒で3年間3D CADのベンダーで技術担当として働く
某IT企業に転職した現在27歳アラサー

Aidemyで勉強しようと一念発起するも3日で断念
Progateに手を出すも2日で断念
2年で年収2.5倍になった方の記事を見て影響を受ける↓
(https://zine.qiita.com/products/interview_udemy_20170906/)
UdemyとQiitaの利用開始
# 目標
- 副業で金を稼ぎたい
- Raspberry Piで自分でプログラムを組んで人の顔を認識すると話しかけるアプリを作りたい

# 学習方法
インプットはUdemy、アウトプットはQiitaで行っていきます。
とりあえずは[酒井 潤さんの講座](https://www.udemy.com/course/python-beginner/)を1回見て、2回目に改めて整理しながら見るという方法でやっていきます。

三日坊主にならないように頑張るぞ！
json ruby 実践

```ruby

require 'net/http' #標準ライブラリの呼び出し
require 'uri'
require "json" #jsonを使うためのライブラリ


u = URI.parse('http://zipcloud.ibsnet.co.jp/api/search?zipcode=6695221')

res = Net::HTTP.get(URI.parse('http://zipcloud.ibsnet.co.jp/api/search?zipcode=6695221'))

status = JSON.parse(res)["status"]
results = JSON.parse(res)["results"]

p "status:#{status}"
p results
```

参考記事

https://qiita.com/yertea/items/be6f535fc31d7325ed97
Windows10にnobleをインストールする

## nobleとは
Node.jsでBluetooth LEを扱うためのモジュールです。

https://github.com/noble/noble

## 環境

* Windows 10 Professional
* Node v10.16.3
* Bluetooth USB アダプタ [エレコムLBT-UAN05C2](https://www.elecom.co.jp/products/LBT-UAN05C2.html)

※Windowsの場合、Bluetoothアダプタのデバイスドライバを差し替える作業をします。なるべくPC内蔵のBluetoothを使用せず、外付けのものを使用することをお勧めします。

## Node.jsのインストール
こちらの記事が非常にわかりやすいです。
https://qiita.com/maecho/items/ae71da38c88418b806ff

Powershellでバージョンを確認します。(コマンドプロンプトでもいいです。)

```
> node -v
v10.16.3
```

## nobleをインストール

試しにインストールしてみる

```
> npm install noble
(中略)
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\ProgramData\Anaconda3\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
```
Python2じゃなきゃダメみたいです。

調べてみると、`node-gyp`のインストールに失敗しているようです。
下記の記事で対策が紹介されています。
https://qiita.com/AkihiroTakamura/items/25ba516f8ec624e66ee7

PowerShellを管理者で実行して下記のコマンドを実行します。
(マシンスペックによっては10分ほど時間がかかるかもしれません。）

```
> npm install --global windows-build-tools

---------- Visual Studio Build Tools ----------
Successfully installed Visual Studio Build Tools.
------------------- Python --------------------
Successfully installed Python 2.7

Now configuring the Visual Studio Build Tools and Python...

All done!

+ windows-build-tools@5.2.2
added 145 packages from 99 contributors in 244.329s
```

再チャレンジ

```
> npm install noble
(中略)
+ noble@1.9.1
added 63 packages from 44 contributors, updated 1 package and audited 111 packages in 9.459s
```

うまくいきました。

## デバイスドライバの差し替え
nobleの[README](https://github.com/noble/node-bluetooth-hci-socket#windows)によると、Bluetoothアダプタのデバイスドライバを、[Zadig](https://zadig.akeo.ie/)というツールで[WinUSB](https://docs.microsoft.com/ja-jp/windows-hardware/drivers/usbcon/winusb-installation)というドライバに書き換える必要があります。

ツールを起動して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410452/98f34b2c-0f13-589e-4d16-98b31be3a7a5.png)

`Options -> List All Devices`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410452/05dfc566-e1dd-a0b7-10ce-e75e45886502.png)

Bluetoothアダプタを選択して`Replace Driver`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410452/98acffab-7a75-3bdd-09d3-3b3794098601.png)


## サンプルコードを実行
こちらの記事のコードで周辺のBLEデバイスを検索できれば成功です。
https://qiita.com/n0bisuke/items/00503d2b18fc4f413c4e

## インストールされたpython2のパス問題
`windows-build-tools`を入れたときにpython2がインストールされましたが、
Windowsの環境変数から`PATH`をみると
`C:\Users\user\.windows-build-tools\python27`
というパスが追加されていました。

私の環境ではこれのせいでpythonのデフォルトがpython2になってしまいました。
解決策としては、python3の`python.exe`の名前を`python3.exe`とする方法があります。

ただ、この方法ではなんとなく悔しいので、何かいい方法があれば教えていただけると嬉しいです。
Firebase App Distribution と Fabric Beta のテスター管理の違いについて

Firebase App Distribution (Beta) 使ってますか？
Fabric から移行しないとなー的空気が漂う今日このごろ、つい最近 App Distribution によるテストアプリの配布が可能になり、いよいよ本格的に Firebase を使っていく流れができつつあります。

テストアプリの配布に関していろいろと検証していたところ、面白いことが分かりましたので書いてみようと思った次第です。

# Firebase App Distribution はテスターを Google アカウントで管理する

<img width="512" alt="shot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309011/7be60ab9-3abb-199d-a94d-82fff535d18d.png">

さっそくですがこれがテスター管理画面です。
赤枠を付けたところがテスター情報で、上段がGoogleアカウント、下段が招待メールを送ったメールアドレスになります。

ん？って思った人がいるかもしれません。
「上段が『Googleアカウント』で下段が『Gmailアドレス』じゃないの？」と。

結論から言ってしまうと、そうとは限らないんですね。
**Invitation を送ったメールアドレスが、テスターのGoogleアカウントのGmailとは限りません。**

テスターを招待する時に宛先のメールアドレスをもらって、「テスターまたはグループを追加」から追加すると思います。
この時、もらうメールアドレスはGoogleアカウントのものでなくても構いません。
テスターがメールを受信できるメールアドレスなら何でも、なんならYahooでも問題ありません。

そのメールアドレスにメールを送った後、デバイスの所有者がメールから招待リンクを開きます。
開いたWebページがGoogleアカウントへのログインを要求してくるので、テストに使いたいアカウントでログインすることにより、そのアカウントがテスターとして登録されるわけです。
このとき、**ログインするアカウントは最初に招待してもらったメールアドレスとは関係なくて構いません。**

ここでログインされたGoogleアカウントがテスターとして登録され、Firebaseに認識され、このアカウントにテスト用アプリへのアクセスが許可されます。

そして、**招待メールアドレスとテスターGoogleアカウントが紐付けられ、Firebaseによって管理されます。**
その紐付いた状態を表したのが、最初のスクリーンショットになります。

# 招待メール（リンク）の拡散でテスターを増やすことはできない
ここでふと疑問が湧いてきます。
最初の招待メール、あるいはリンクを他の人に渡して、新しいテスターを増やすことができるか？ということです。

これも結論からいうと不可能です。
先述の通り、招待メールアドレスはテスターとして登録されたGoogleアカウントと紐付けられてFirebaseに管理されています。
したがって、すでにGoogleアカウントが紐付けられた招待メールアドレスの招待リンクからは、別のアカウントをそれ以上紐付けることができません。

テスターをGoogleアカウントで管理する、それを最初の招待メールアドレスと紐付ける。
これにより、一通の招待メールからテスターを無軌道に増やされることを防いでいるわけです。

Fabric Betaで発生していたことのある問題がこれによって解決されています。
Fabricでは招待リンクを入手してしまえば誰でもテストアプリをインストールすることができていましたが、Googleアカウントを使うFirebaseではそういうことはできなくなっています。

例えば、ブラウザ拡張機能などを利用している時に悪意あるコードを埋め込まれたりしてリンク情報を盗まれる可能性もゼロではありません。
Firebase App Distributionでは、たとえリンクを盗み出せても承認されたGoogleアカウント以外ではテストアプリをダウンロードすることができないので、そういう場合でも安心です。

# テスターがデバイスを変えることは簡単にできる
それとは逆に、テストアプリへのアクセスを許可されたGoogleアカウントのユーザーは、自分のデバイスを変えることは簡単にできます。
テストアプリへのアクセス権はGoogleアカウントに紐付いているので、App Distribution のページにそのアカウントでログインすれば、どの端末でもテストアプリへアクセスすることが可能です。

Fabricの時でも別デバイスで招待リンクを開けば可能ではありました。これはこれで別段難しいわけではありませんでしたが、若干作業としては面倒な感じでした。
Firebaseではこれがアカウントで管理されているので、より今のサービスっぽい、直感的な管理ができそうな感じです。


# 終わり
テスター向けAndoirdテストアプリのインストール手順の記事もよかったらどうぞ
[こちら](https://qiita.com/Idenon/items/e07a0965f7df40769b22)
Github使ってみた3

今回もGitHubについて記事を書く。


##コンフリクト
　ファイルの同じ個所を複数の人が修正した後、それらをマージする場合に起こる。
　コンフリクトの画面から「Resolve」で対象ファイルを選択し、正しいものに修正して、完了である。
　

##コミット履歴をまとめる
　コミット履歴はまとめることができる。例えば、ファイルを何度か修正し、
最新の履歴だけ表示したい場合に行う。
　GUIではログから対象操作をまとめたい操作をすべて選択し、「Combine to one commit」でまとめることができる。


##コミット履歴の比較
　ファイルの修正した個所を比較することができる。
　GUIではログを開いて、対象の操作を選択し、「Compare with previous revision」
を開く。その後、対象ファイルを開くことで、比較できる。
TSV,CSVファイルを読込んでみる

Shift_JISで書かれたtsvファイルの読込み処理をGOで書いてみました。

# iconv-go を利用してみる[失敗編]

UTF-8で記述されたtsv/csvファイルを読込む場合、`encoding/csv`のみで対応できるのであるが、Shift_JISで記述されている場合、そのままだと文字化けを起こしてしまう。
そこで、パッケージを利用したのですが、うまくいかなかったた。

```go:main.go
package main

import (
	"encoding/csv"
	"io"
	"os"

	iconv "github.com/djimenez/iconv-go"
)


func main() {
	file, err := os.Open("XXXX.tsv")
	if err != nil {
		panic(err)
	}
	defer file.Close()

	// shif-jisの場合には以下の処理を追加
	converter, err := iconv.NewReader(file, "sjis", "utf-8")
	if err != nil {
		panic(err)
	}

	//reader := csv.NewReader(file)
	reader := csv.NewReader(converter)

	// デリミタ設定(TSVなら\t, CSVなら,)
	reader.Comma = '\t'

	// コメント設定(コメント文字を指定)
	reader.Comment = '#'

	// ダブルクオートを厳密にチェックしない
	reader.LazyQuotes = true

	var line []string

	for {
		line, err = reader.Read() // 1行読み出し
		if err == io.EOF {
			break
		} else if err != nil {
			fmt.Println("読み込みエラー: ", line)
			panic(err)
		}

		// ここに処理を追記する
	}
}
```

##エラー内容

なぜか、TSVファイルの15行目を読込むと、以下のエラーが発生する。
`panic: The storage control blocks were destroyed.`

15行目の内容を削除し、1行詰めても同じ場所でエラーが発生する。
原因が不明だったためパッケージを変更することに。

# text/transform を利用してみる[成功編]

```go:main.go
package main

import (
	"encoding/csv"
	"io"
	"os"

	"golang.org/x/text/encoding/japanese"
	"golang.org/x/text/transform"
)

func main() {
	file, err := os.Open("XXXX.tsv")
	if err != nil {
		panic(err)
	}
	defer file.Close()

	// shif-jisの場合には以下の処理を追加
	converter := transform.NewReader(file, japanese.ShiftJIS.NewDecoder())

	//reader := csv.NewReader(file) // 取込ファイルがUTF8の場合、こっち
	reader := csv.NewReader(converter)

	// デリミタ設定(TSVなら\t, CSVなら,)
	reader.Comma = '\t'

	// コメント設定(コメント文字を指定)
	reader.Comment = '#'

	// ダブルクオートを厳密にチェックしない
	reader.LazyQuotes = true

	var line []string

	for {
		line, err = reader.Read() // 1行読み出し
		if err == io.EOF {
			break
		} else if err != nil {
			fmt.Println("読み込みエラー: ", line)
			panic(err)
		}

		// ここに処理を追記する
	}
}
```

こちらの方法だと問題なくtsvファイルを読込めた。
Linuxのシンボリックリンクの貼り方

毎度忘れるのでメモがてら

シンボリックを貼りたい階層にいって下記コマンドを実行

```ln -s /hoge/fuga/ hogefuga```

/hoge/fuga/が参照したい箇所

hogefugaが今いる階層に出来るディレクトリ

hogefugaが既に存在するディレクトリの場合、
今いるディレクトリ/hogefuga/hogefugaになってしまうので注意。
初心者による初心者のための font-family

font-familyがフォントの指定をするためのプロパティってことはわかってるけど、現場ではすでに固定の指定があって自分で指定することはなかったり、font-family指定はこれでOK！みたいなのをコピペしてきてばかりで、書き方をイマイチわかってない自分用メモ。
間違ってるところがあればぜひ指摘してください！

## 基本文法

**font-family: <font color="MediumBlue">family-name</font>, <font color="Green">generic-family</font>;**
↓例↓

```
body {
   font-family: Helvetica, Verdana, sans-serif;
}
```
>If Helvetica is available it will be used when rendering. 
If neither Helvetica nor Verdana is present, then the user-agent-defined sans serif font will be used.
*W3C Recommendation*
https://www.w3.org/TR/css-fonts-3/#propdef-font-family

一番左に書いてあるフォントから、コンピュータにインストールされてるかどうか調べて、最初に見つかったもので表示します。
なので、Helveticaが見つかればHelveticaで表示、もしなければVerdana。
それもなかったら適当なsans-serifのフォントで表示する。
とりあえず、使ってほしい順にfamily-name書いて、最悪の場合せめてこのgeneric-familyにしてねって滑り止めを一番最後に書いておく。

### <font color="MediumBlue">family-name</font>
上記の例だと、Helvetica, Verdanaがfamily-name。
 , (カンマ)で区切って複数指定。↑の通り、見つからないとコンピュータが勝手にフォント決めちゃうから、複数予備を書いておく。
有名どころだと、ヒラギノ角ゴシック、メイリオ、游明朝とか。

### <font color="Green">generic-family</font>
|keywords|特徴|
|:---|:---:|
|serif|文字の端に三角形の飾りがあるシュッとしたやつ|
|sans-serif|飾りがないやつ|
|cursive|筆記体。日本語フォントはあんま関係ない|
|fantasy|装飾書体。小洒落たやつ。日本語フォントはあんま関係ない|
|monospace|等幅フォント、もっと増えて〜〜〜|

### フォント一覧
MacならFont Bookアプリ。
左上の[i]ボタン押すとfont-familyに書く正式名称が確認できる。

### family-nameは""(クォーテーション)で囲む？
>To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:
```body { font-family: "New Century Schoolbook", serif }
<BODY STYLE="font-family: '21st Century', fantasy">
```
*W3C Recommendation*
https://www.w3.org/TR/css-fonts-3/#propdef-font-family

空白、数字、またはハイフン以外の句読点を含むfamily-nameのときはクォーテーションつけることを推奨するよ！って感じ。
なので、Helveticaはクォーテーション不要。ＭＳ Ｐゴシックは空白があるからクォーテーション必要。

#### ''（シングルクォーテーション）と""（ダブルクォーテーション）どっち？
どっちでもOK。


## 例と疑問

```
body{
font-family: "Noto Sans JP",-apple-system,BlinkMacSystemFont,"ヒラギノ角ゴシック W3","Hiragino Sans",YuGothic,"メイリオ",Meiryo,sans-serif;
}
```

### 日本語と英語で同じの書くのなんで？
"メイリオ", Meiryo, とか、同じじゃないの？
結論：同じ
日本語で書くと認識されない場合があるそうで、英語名も書く。
じゃあ英語名だけでいいんじゃないの？と思うんですが、昔はどっちも書いておいた方が良いとされてたそうで
今でも、念の為そうしてるところが多いっぽい。
参考：https://www.foxism.jp/entry/2019/04/06/183108

### "Noto Sans JP" ってよく見かけるけどなに？
Google fonts（ https://fonts.google.com/ ） の一つ。
よくわかんないけど人気。
詳しくは↓がわかりやすかったです。
参照：https://plu-plu.net/notosansjp/

### -apple-system, BlinkMacSystemFont ってなに？
Appleのシステムフォントの指定。

+ -apple-system：Safari用
+ BlinkMacSystemFont：Chrome, Opera用

もうちょっと勉強してから追記します〜

## 補足

### 日頃からフォントを意識してみる
Chrome拡張子：WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

カーソル当てるとなんのフォント使ってるのか表示してくれる拡張子。
Swift Firebaseを使って画像をuploadする

<h1>Firebaseで画像をuploadする概要</h1>

ざっくりしか書いてありません、概要でも掴んでもらえたらと書きました

```Swift
// 1：画像をデータに変換
guard let imageData = image.jpegData(compressionQuality: 0.3)
```
compressionQualityは0.0~1.0まで設定できます

```Swift
// 2：ストレージイメージ参照を作成->保存するFirestorageの場所
let imageRef = Storage.storage().reference().child("/productImages\/(name).jpg")
```
productImagesは今回はfirebase上のstorageにフォルダを作成しています
後述のnameに関してはOutletのテキスト入力を想定しています
２箇所（productImages, name）は任意に変更可能です

```Swift
// 3：メタデータを設定
let metaData = StorageMetaData()
metaData.contentType = "image/jpeg"
```
"image/jpeg"はstorage上のタイプを指定しています

```Swift
// 4：データをアップロード
imageRef.putData(imageData, metadata: metaData) { (metaData, error) in
    if let error = error {
        self.handleError(error: error, msg: "Unable to upload image.")
    return
   }

// 5：画像がアップロードされたら、ダウンロードURLを取得
imageRef.downloadURL { (url, error) in
    if let error = error {
         self.handleError(error: error, msg: "Unable to download URL.")
    return
    }
    guard let url = url else { return }

// 6：新しいドキュメントをFirestoreコレクションにアップロード
// uploadDocumentは関数を用意してあげる
// Firebaseへの登録時の構造体を初期化して、setDataメソッドでデータをセットしてあげる
    self.uploadDocument(url: url.absoluteString)
     }
}
```
<script async> で DOMContentLoaded が発火しないことがある

async属性をつけた `<script async>` は非同期で読み込まれるため、
ドキュメントの読み込みが完了した時点で `script` が読み込まれていないことがある

その場合、読み込みの状況次第では `DOMContentLoaded` が発火しない

```old.js
function main() {
  // 読み込み後に動かしたいコード
}

document.addEventListener("DOMContentLoaded", main, false);
```

改善策として、ドキュメントの読み込み状態をチェックする
[document.readyState](https://developer.mozilla.org/ja/docs/Web/API/Document/readyState) を見れば、状況が分かる

```NEW.js
function main() {
  // 読み込み後に動かしたいコード
}

if (document.readyState !== "loading") {
  main();
} else {
  document.addEventListener("DOMContentLoaded", main, false);
}
```
今日学んだ基本情報の勉強内容(5)

#様々なハードウェア

データを読み取る装置は以下のようなものがある

 - イメージスキャナ ・・・絵などをデータとして読み取る装置
 - OCR　・・・　はがきの郵便番号のような手書き数字などを読み取る装置
 - OMR　・・・　試験などで使われるマークシートなどを読み取る装置
 - キャプチャカード　・・・　映像機器から映像をディジタルデータとして取り込む装置

ここで初めて知ったのが、商品についている
![jan-code_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482973/43dd5c59-45de-c09d-efb2-39d71b58fcc0.jpeg)

これのことを<font color="Red">JANコード</font>というらしい


##プリンタ
プリンタの種類としては以下のようなものがある

 - <b>ドットインパクトプリンタ</b>　・・・　印字ヘッドにピンがついていてそのピンでインクリボンを紙に叩きつけることによって紙に文字を出力していく。音が大きくて品質も高くない。


 - <b>インクジェットプリンタ</b>　・・・　印字ヘッドのノズルからインクを紙に噴射することによって印刷するプリンタ。現在家庭で使われる多くのプリンタがこのプリンタ。音が静かで高品質。色はCMYKが使われている。


 - <b>レーザプリンタ</b>　・・・　レーザー光線を感光体上にあてることによってイメージを作り、そこに付いたトナー(色粒子からなる粉)を紙に転写することで印刷する。このプリンタはページ単位で印刷するので高速であり高品質、主にビジネス目的で使用される。


プリンタの印字速度を表す指標は「1秒間に何文字印字できるか」を表す<font color="Red">cps</font>と「1分間に何ページ印字できるか」を表す<font color="Red">ppm</font>がある。

##入出力インターフェース
###IDE
ハードディスクを接続するための規格で最大2台までのハードディスクを接続できる規格だったが、<font color="Red">EIDE</font>となったことにより最大4台まで接続することができる。

###SCSI
<font color="Red">デイジーチェーン</font>と呼ばれる数珠繋ぎに機器を連結していく接続方法で使われるインターフェースで、終端には<font color="Red">ターミネータ</font>が必要になる。

パラレルインターフェースとシリアルインターフェースは以下のようになる。

|パラレルインターフェース |シリアルインターフェース |
|:---:|:---:|
|IDE  |USB |
|SCSI |IEEE1394  |

###無線インターフェース

- IrDA　・・・　赤外線を使って通信を行う規格。携帯電話やリモコンなどに使われて、間に障害物があると通信ができない。
- Bluetooth　・・・　2.4GHzの電波を使って通信を行う規格で、携帯電話やパソコンで使われて間に障害物があっても通信できる。


##参考文献
- [キタミ式イラストIT塾　基本情報技術者　平成28年度]
- [ORANGE POS / JANコードとは？バーコードの種類とQRコード、RFIDとの違い](https://orange-operation.jp/posrejihikaku/pos/12625.html)