OmniAICreator/Qiita-1.07M huggingface dataset:
javaScriptのArrayをまとめる

#初めに
Arrayに対する理解が曖昧だったため改めて整理することにした、

##Array
Arrayオブジェクトは、配列型の値を扱うためのオブジェクト。
配列に対して要素の`追加`、`削除`、`結合`、`並べ替え`などを行うための機能を提供する。

###生成
生成の方法は、①リテラル表現で生成する方法と②コンストラクタで生成する方法がある。
####①リテラル表現

```array.js
var ary = ['本田','香川','岡崎'];
```
####②コンストラクタ

```array.js
var ary = new Array('本田','香川','岡崎');
```

####どちらを使うか
例えばコンストラクタで生成する場合、下記はどのような意味を持つだろうか？

```array.js
var ary = new Array(10);
```
考えられるのは「`長さが10の配列`」か「`10という要素を持つ配列`」のどちらか。

##### 正解は「`長さが10の配列`」である。

この様に、コンストラクタで生成してしまうと可読性が下がるので、`配列リテラルで生成するほうが良い`。
なお、空の配列を作る方法は下記である。

```array.js
var ary = [];
```
###代表的なArrayオブジェクトのメンバー（一部）

```array.js
var ary = ['本田','香川','岡崎'];
var ary2 = ['遠藤','長谷部','長友'];

//基本形
console.log(ary);                      //(3) ["本田", "香川", "岡崎"]
console.log(ary.length);               //3　配列のサイズ
console.log(Array.isArray(ary));       //true　配列かどうか
console.log(ary.indexOf(`岡崎`))       //2　要素のキーの開始位置を取得

//加工
console.log(ary.concat(ary2));         //(6) ["本田", "香川", "岡崎", "遠藤", "長谷部", "長友"]  //配列の連結

//追加と削除
console.log(ary.pop(),ary);            //岡崎 ←削除した要素 //(2) ["本田", "香川"] ←削除後
console.log(ary.push('内田'),ary);      //4 ←追加後の要素数 // (4) ["本田", "香川", "岡崎", "内田"] ←追加後の配列


```
##代表的なArrayオブジェクトのメンバー（コールバック）
Arrayオブジェクトで代表的なコールバック系のメソッドを3つ説明する。

###forEach
forEachメソッドは指定した関連で順に処理するメソッドである、
①配列の要素を順番に取り出す。
②ユーザー定義関数のcallbackに渡す。
③渡された要素を処理する。

```foreach.js
var ary = ['本田','香川','岡崎'];

ary.forEach(function(value, index, array){
            console.log(value);
            console.log(index);
            //console.log(array)
        })
//本田
//0
//香川
//1
//岡崎
//2

```
#####第一引数 valueは`要素の値`
#####第二引数 indexは`インデックスの番号`
#####第三引数 arrayは`元の配列`
なお、console.log(array)は毎回元の配列を吐き出す。(冗長になるのでコメントアウトした)

###map
mapメソッドは配列を指定された関数で加工することが出来る。
callbackで受け取る引数はforEachと同じだが、戻り値(return)は新しい配列を作るために必要になる。

```map.js
var ary = ['本田','香川','岡崎'];

var member = ary.map(function(value, index, array){
                 return value+"選手";           
             })
console.log(member);  //(3) ["本田選手", "香川選手", "岡崎選手"]
```

もし`return`しなかったら…

```map.js
var ary = ['本田','香川','岡崎'];

var member = ary.map(function(value, index, array){
             // return value+"選手";         
             })
console.log(member);  //(3) [undefined, undefined, undefined]
```
当然に`undefined`になる。

###filter

指定された関数で個々の要素を判定し、条件に合致した要素だけを取り出すメソッド

```filter.js
var ary = ['本田','香川','岡崎'];

var member = ary.filter(function(value, index, array){
                 return value.indexOf('田') >= 0 
                 //indexOfは該当の文字があればその位置、なければ-1を返す。
             })
console.log(member);    //["本田"]
```
callbackが`true`を返した時だけ、その時の要素を配列に書き戻す。
上記では`本田`だけ`true`になるので、本頼みの配列が出来上がる。

##終わりに
Arrayオブジェクトで使用できるコールバック関数は上記の他に`some`、`every`、`sort`等がある。

##参考
javascript本格入門
MacのMicrosoft Teams / Skype for Businessでマイクを有効にする方法

# MacのMicrosoft Teams / Skype for Businessでマイクを有効にする方法
世間の流れと同じく自分も在宅勤務を行うことになったのだが、リモートワーク中に打ち合わせをする際にMacのTeamsとSkype for Businessではマイクを認識させるまで時間がかかったため手順を残しておく。
（環境：macOS Catalina 10.15.4、TeamsやSkypeはBrewでインストール）

# Macでマイクを認識させるには？
Macでは単純にSkype上の設定でサウンドデバイスを変更するだけでは認識することができなかった。
どうやら、Macの環境設定「セキュリティとプライバシー」の「プライバシー」タブのマイクに対象のソフトを許可するように指定しなければならないらしい。
ただ、この設定では追加でソフトを指定することはできず、ソフト？が許可を求めなければならないようだ。。。

# やったこと
どうにかして上記を実現できないか調べたところ、データベースファイル（`/Users/$USER/Library/Application\ Support/com.apple.TCC/TCC.db`）を直接編集すれば行けるとのこと。
ただし、このファイルを編集するにはSIPを無効にする必要があるらしい。（Macではシステム的に重要なファイルは編集できないような仕組みになっているっぽい？）
これについては、Macの電源を入れた際に「Command ＋ R」を押して、macOSユーティリティーを起動後ターミナルを実行して、

```
csrutil disable
```

を入力してEnterを押せば良い。全てが終わった後はenableで再実行して有効に戻したほうが良さそう。
その後、再起動を行い、ターミナルを起動して下記コマンドを入力する。

```
sudo sqlite3 /Users/$USER/Library/Application\ Support/com.apple.TCC/TCC.db "insert into access VALUES('kTCCServiceMicrophone','com.microsoft.SkypeForBusiness',0,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1541440109) ;"
sudo sqlite3 /Users/$USER/Library/Application\ Support/com.apple.TCC/TCC.db "insert into access VALUES('kTCCServiceMicrophone','com.microsoft.teams',0,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1548964217) ;"
```

これで「セキュリティとプライバシー」にTeamsとSkypeが表示されるようになっているのを確認できれば認識でいるはず。

#参考
https://www.too.com/support/faq/mac/maintenance/23554.html
https://www.reddit.com/r/macsysadmin/comments/d6v409/tcc_microphone_access_for_skype_for_business/
深層学習／WaveNet

#1.はじめに
　**text-to-speech** (TTS)という**文章から自然な音声を生成する**分野があります。この分野には、以前から、２つの方法がありましたが、それぞれ問題点を抱えていました。

　１つは、**「波形接続」**という１人の話者による短い音節のセットから必要なものを結合して合成する方法ですが、この方法は、声を変えたり、抑揚や感情を加えることが難しいという問題がありました。

　もう１つは、**「パラメトリック」**という話す内容や特徴(声、抑揚など)を入力によって操作できる方法ですが、これは音声品質に問題がありました。

　WaveNetは、これらを解決する方法で、音楽にも応用ができるものです。　

#2.Dilated Convolution
　音声信号は、通常サンプリング周波数が16kHzで、1秒間に16,000サンプルもの時系列データがあるため、自己回帰モデルで扱うのは極めて難しいです。そこで、WaveNetは**dilated convolution**という仕組みを使って受容野が広くなるようにCNNを構築し、この問題を解決しています。

　![BlogPost-Fig2-Anim-160908-r01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209705/1b755226-3ec9-2f96-7ff4-faaa28525d17.gif)

　**Dilated convolution** は層が深くなるにつれて畳み込むノードを指数関数的に離すことによって**受容野**(時系列過去データをどの程度参考にするか)を広げた状態で畳み込みをする演算です。また、オンラインでの使用を考慮して、未来のデータを畳み込まないように時系列をシフトさせています。


#3.アーキテクチャ
![スクリーンショット 2020-04-21 10.31.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209705/84f21c2f-ac94-5b51-1303-10726351001a.png)

　これがWaveNetのアーキテクチャです。残差ブロックとスキップコネクションを採用しています。

　活性化関数は、**GTU(gated tanh unit)**を採用しています。GTUは音声信号に対しては、よく使われるReLUよりも良く機能するとされています。

　通常の音声信号は16bitの整数値(0-65535)で保存されていますが、WaveNetでは計算負荷を減らすためsoftmaxで**256クラス**のカテゴリ変数に変換し、生成する音声がどのクラスに属するかという分類問題として生成音声の予測を行っています。

　WaveNetの確率分布は、過去の時系列データに加えて、付加情報hも条件として持っています。hにはテキスト(内容)や話者の情報(声)を含めることができ、これによってWaveNetは”付加情報 : h” の情報を指定した”出力波形 : x”の確率分布を計算することができます。

![スクリーンショット 2020-04-21 10.32.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209705/ce3b583a-b63e-d56a-cc68-ea50b27e9687.png)

#4.評価
　TTSには、MOS(Mean Opinion Scores)という, 人間の話し方とのギャップを計測する客観的な評価方法があり、その評価結果は、従来の方法に比べて人の話し方とのギャップを50%以上縮めることに成功しています。
![スクリーンショット 2020-04-21 10.53.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209705/27d6b189-351b-0466-83ff-f14a48a51c24.png)
Xojo の Web アプリでファイルのアップロード処理を作る

Xojoでファイルアップロードするときは、WebUpload を使う。

ファイルアップロード操作をWebブラウザで行い、アップロード転送が完了するとイベント UploadComplete が発動する。
UploadComplete 内に、ファイル保存の処理を描く。


```

Sub UploadComplete(Files() As WebUploadedFile)
  Var saveFile As FolderItem
  For Each file As WebUploadedFile In Files
    saveFile = SpecialFolder.Pictures.Child(file.Name)
    Try
      file.Save(saveFile)
    Catch e As IOException
      // File Error, skip file
      messagebox("error")
      Continue
    End Try
  Next
End Sub
```

# 問題

保存場所に同名ファイルがあるときにクラッシュしてしまう。
Catch e As IOException でキャプチャできない。
IOException で停止し、 ErrorNo 104 となる。

この ErrorNo 104 は
http://docs.xojo.com/index.php/FolderItem.LastErrorCode
によると、The file is in use.とある。

なお、file.MoveTo 構文でも移動先に同じファイル名があるとエラーが起こる。
この場合も
IOException で停止し、 
Error Number 183 「既に存在するファイルを作成することはできません。」
となる。

# 同名ファイルがある場合の処理を追加する

## 同名ファイルがあるとファイル保存を行わない場合

```

Var saveFile As FolderItem
For Each file As WebUploadedFile In Files
  saveFile = SpecialFolder.Pictures.Child(file.Name)
  if saveFile.Exists THen
    messagebox("file exists")
  else
    Try
      file.Save(saveFile)
    Catch e As IOException
      messagebox("error")
      Continue
    End Try
  end if
Next
```

## 既存のファイルを削除する場合

```

Var saveFile,renameFile As FolderItem
For Each file As WebUploadedFile In Files
  saveFile = SpecialFolder.Pictures.Child(file.Name)
  if saveFile.Exists Then
    Try
      saveFile.Remove
    Catch e As IOException
      messagebox("old file delete error")
      return
    End Try    
  end if
  Try
    file.Save(saveFile)
  Catch e As IOException
    messagebox("file write error")
    Continue
  End Try
Next
```

## 既存のファイルをリネームする場合


```

Var saveFile,renameFile As FolderItem
For Each file As WebUploadedFile In Files
  saveFile = SpecialFolder.Pictures.Child(file.Name)
  if saveFile.Exists Then
    renameFile = SpecialFolder.Pictures.Child(file.Name+".bak")
    if renameFile.Exists Then
      Try
        renameFile.Remove
      Catch e As IOException
        messagebox("old .bak file delete error")
        return
      End Try
    end if
    Try
      saveFile.MoveTo(renameFile)
    Catch e As IOException
      messagebox("error")
    End Try
  end if
  Try
    file.Save(saveFile)
  Catch e As IOException
    messagebox("error")
    Continue
  End Try
Next
```
HTMLに書くURI

# 基本的なことなのに
なんとなくで動いていたのだが、改めて調べて”へぇ”となったので。
お恥ずかしい。
基本的にはJSでのajax(xhr,fetch)とかでも同じこと

前提
こんなHTMLにアクセスしているとする
http\://localhost/test/test.html

### 相対パス
```html
  <a href="relative.html">LINK</a>
  <a href="./relative.html">同階層へのリンク</a>
  <a href="../relative.html">一つ上の階層へのリンク</a>
```
この時今のディレクトリ階層から相対パスとなり

一つ目、二つ目のリンク先は
http\://localhost/test/relative.html
になる

三つ目のリンクは一つ上の階層を指すので、こんな感じになる。
http\://localhost/relative.html

### 絶対パス
```html
  <a href="/absolute.html">LINK</a>
```
この時リンク先はホスト名からの絶対パスとなり
http\://localhost/absolute.html
になる

### URL
```html
  <a href="http://localhost/url/url.html">LINK</a>
```
この時リンク先はそのままURLで扱われるので
http\://localhost/url/url.html
になる

これまで意識してこなかったけど、
こうなってるらしい。
未経験からWebエンジニアになるために学ぶべき言語まとめ

# はじめに
未経験からWebエンジニアになるために学ぶべき言語についてまとめてみました。
まとめた内容は以下の通りです。

・HTML
・CSS
・javascript
・jQuery
・Ruby
・Ruby on Rails

# HTML
HTMLは*Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）*の略

・Webページを作るための最も基本的なマークアップ言語（プログラミング言語ではない）
・世界中のWebサイトはHTMLを使って作られている
・ブラウザがHTMLを処理して人間が読める形となってWebサイトに表示されている。
###### マークアップ言語とは
「文章を構造化するための言語」。「ここはタイトル部分です」「ここから本文が始まります」「ここは非常に重要な部分です」など、人間であれば直感的に理解できる事柄を、タグや記号で表示し、コンピューターに認識させることを指す。
###### ハイパーテキストとは
「ハイパーリンクが挿入できる高機能なテキスト」のこと。ハイパーリンクとは「クリックすると別のページに行ける仕組み」のことで、単に「リンク」とよばれることの方が多い。画像や動画、音声などのデータファイルもテキスト内に組み込める。


# CSS
CSSは*CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）*の略

・Webページのスタイルを指定するためのスタイルシート言語（プログラミング言語ではない）
・CSSは、HTMLと組み合わせて使用する言語。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定する。
・ 装飾の具体例
　ーウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイル
　ープリンタなどの機器で印刷・出力される際の出力スタイル
　ー音声で読み上げられる際の再生スタイル
#####スタイルシート言語とは
Webページの見た目を記述するために使われる言語。実際にはスタイルシートとして利用できる言語にはいくつか種類があり任意の言語を利用できる。しかし、HTML言語と組み合わせて使う場合にはCSSしか現状では使われていない為、CSSとスタイルシートは同じ意味合いで使われている。

#javascript
・Webサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど多岐に渡って使用されるプログラミング言語。
・メリット
　ー面倒な環境構築が不要
　ーフレームワークやライブラリが豊富な為、効率的に開発が進められる
　ー普及率が非常に高い為、情報量が多くエラーなどへの対処がしやすい
・「Java」とはまったく別の言語。
######環境構築とは
あるシステムやソフトウェアの実行環境や開発環境を整えること。ここではプログラミングをするための環境構築について説明しているが、この「環境構築」が初心者にとっては煩雑で難解な場合が多く、挫折する要因の一つ。
######フレームワークとは
システム開発を楽に行えるように用意された「プログラムなどのひな形」のこと。
######ライブラリとは
便利なプログラムの部品を集めて、ひとまとめにしたファイルのこと。フレームワークと似ているが「全体を動かすためのロジックがない」という点が異なる。

#jQuery
・javascriptのライブラリの一つ。JavaScriptを使いやすいように拡張してくれているもの。
・使用した時の具体的なイメージ：1つの機能を実現するためにJavaScriptでは10行のコードを書く必要があっても、jQueryを使えば1~2行ほどで済む。
・メリット
　ーどのブラウザでも使えること。ブラウザによって仕様が微妙に異なるため、どのブラウザでも同じコードで動作してくれることは非常に大きなメリット。

#Ruby
・まつもとゆきひろ氏により開発されたオブジェクト指向スクリプト言語。
・主にWEBアプリ開発、スマホアプリ（API）開発などに使われている。
・Rubyは「Enjoy for Programing!」を掲げており、プログラマーにとってコーディングしやすいプログラミング言語となっている。
・開発者が日本人ということもあり、日本語で書かれた有用な参考書が数多く手に入る。そのため、最新情報をいち早く活用することができる。
・Rubyを使用する最大のメリットはRuby on Railsというフレームワークがあること。（RubyonRailsについては後述）
・多くのOSで動作するため汎用性が高い

#####オブジェクト指向とは
複数の関連性の深いプログラムを1つの大きなまとまり（＝オブジェクト）にして開発が可能な形式のこと。コードの書き換えが簡単で他者と認識の共有がしやすいため、大人数で協力するプロジェクトに適している。
#####スクリプト言語
低速で動作する代わりに短い記述で処理できる言語（Python、Perl、PHP、Ruby、JavaScriptなど）。対比される言語としてコンパイル言語があり、こちらは高速で動作する代わりに記述が面倒。（C、C++、Java、C#など）

#Ruby on Rails
・Rubyのフレームワークの一つ。他にもSinatra,Padrinoなどもあるが、普及率や情報量の点でRailsの一強。
・Rubyで書くよりも格段に少ないコード量で書くことができる
・細かく書き方にルールが決まっており、その書き方通りに書いていくことで簡単にアプリケーションが作れる。
Railsでstubを使う

# よく使う構文をメモ
```ruby

post = Post.new

# 引数なし
allow(post).to receive(:title).and_return('title')

# 引数あり
allow(post).to receive(:title).with(arg1, arg2).and_return('title')

# エラーを起こさせる
allow(post).to receive(:subtitle).and_raise(StandardError.new)

# クラスに対してインスタンスメソッドのスタブ化
allow_any_instance_of(Post).to receive(:title).and_return('title')

```

# 追記
- allow句は`it`, `before`, `let`ブロックの中で使用可能。


# 参考
開発
[Rails tips: RSpecでシンプルなスタブを使う（翻訳）](https://techracho.bpsinc.jp/hachi8833/2018_02_20/52293)
【Laravel】リレーションの書き方

# はじめに

この記事は初学者の僕が私的メモとして書いているものです。
リレーションの書き方で詰まってる人の役にたてばと思います！

# モデルにリレーションを書く

UserモデルとCommentモデルのリレーションは1対多となっています。

### hasManyメソッド

``` php

class User extends Model
{
 // 略
 
 public function comments() //関数名は複数形がベスト
 {
  return $this->hasMany('App\Comment');
 }
}
```


Userモデルが自動的にCommentモデルの主キー、つまり各コメントのidを外部キーとして持ってくれます。
つまり、hasManyメソッドが定義されているクラス名(User)を小文字にして、語尾に`_id`をつけたカラム(user_id)をhasManyメソッドの引数のモデル(Comment)の外部キーとして自動で判断してくれます。

### belongsToメソッド

``` php

class Comment extends Model
{
 // 略
 
 public function user() //関数名は単数形がベスト
 {
  return $this->belongsTo('App\User');
 }
}
```

hasManyを書いたらそれに対するモデルにもbelongsToメソッドを定義してあげましょう。
この場合、belongs_toメソッドの引数のUserモデルの主キーが自動的にCommentテーブルの外部キーと判断してくれます。
つまり、belongsToメソッドの引数名を小文字にして、語尾に`_id`をつけたものが親モデルに対する外部キーとしてくれます。

## 使い方
リレーションを組んだことで親テーブルの主キーに対応する子テーブルの外部キーを使って、子テーブル内のカラムのデータを取得できるようになります。
例えば一人のユーザーに対するコメント数などを表示させたい場合以下のように書きます。

```php
//略
$user->comments()->count('user_id')
```

# おわりに
リレーションを記述する時、頭の中で関係性がわかってても実際のコードに落とし込むのが難しかったです。
しかも、自動的にlaravelが外部キーを判断してくれるのでどう動いているのか理解するのに苦労しました。

ざっくりとなぐり書きになってしまいましたが、少しでもリレーションの理解が深まればと思います。
内容についても修正点等、ご指摘頂けると幸いです！

## 参考サイト
[Laravel 5.5 Eloquent：リレーション](https://readouble.com/laravel/5.5/ja/eloquent-relationships.html)
CSSが反映されない場合の対処法

# CSSが反映されない場合の対処法
##原因
* ブラウザにキャッシュが残っているから
* 記述したcssよりもあとに同じクラスかタグに関するcssが上書きされてる

##解決
* ⌘shiftRでGoogleCromeのキャッシュをクリア
* cssファイルのより後にかく、かぶらないようにする、ページごとにcssをつくって整理する
【OPC-UA（Java）】初めての制御系アプリケーション開発メモ

OSGiフレームワーク上に実装するOPC-UAアプリケーションの開発を初めて経験したので、開発の基盤技術について簡単にメモしておきます。

## OSGiフレームワークとは
下記は、[「EclipseやSpringで使われている基盤技術OSGiとは」](https://www.atmarkit.co.jp/fjava/special/osgi/osgi_1.html) から引用させていただいたものです。

OSGiを一言でいうと、「Javaモジュールの動的追加や実行を管理するための基盤システム」です。
OSGiでは、Javaモジュールを「バンドル」と呼び、このバンドルの実行基盤を「OSGiフレームワーク」と呼びます。
OSGiには、Javaモジュールを動的追加する仕組みに加えて、複数のJavaモジュール同士を連携させる機能やJavaモジュールを管理するための機能を備えています。

## OPC-UAとは
OPC UA（Open Platform Communications Unified Architecture）は産業オートメーションなどの業界で、安全で信頼性あるデータ交換を行うために策定されたオープンな国際標準規格です。

## IoT共通プラットフォームとは
IoT共通プラットフォームとは、IoTデバイス、アプリケーション、ネットワークなどを、クラウドを介して効率的につなぐための “プラットフォーム（土台）”のことです。この言葉は様々な意味合いで使われることがあり、構築されたシステム全体のことを示す場合もあります。

## OPC-UA サンプルライブラリ
OPC Foundationからgithubにサンプルが公開されています。計測機器からの計測データをOPC-UAのアドレス・スペースに書き込む形式であるWriteValueの定義が記載されているなど、実装に使用するライブラリも詳細に記載されています。
[OPCFoundation/UA-Java-Legacy](https://github.com/OPCFoundation/UA-Java-Legacy)

## 計測機器からの計測データ取得とOPC-UAクライアントへの連携について
整理している部分の概要は下記の通りです。
＜計測機器　⇔　機器通信バンドル　⇔　データ中継バンドル　⇔　OPC-UAクライアント＞
※機器通信バンドルの概要を記載します。
※取得対象計測データの一覧は、あらかじめ定義ファイルで定義しておきます。

<1> 計測データの取得（Socket通信）
計測機器へのSocket通信により、計測データの要求と取得を行います。
<2> データ中継バンドルへの連携（アドレススペース書き込み）
取得した計測データをOPC-UA規定のデータ型に変換して、OPC-UAアドレススペースに書き込みます。
Ex. OPC-UA規定のデータ型:　WriteValue, NodeId...。

## 実装前に参考したより具体的な記事について
現場で実装する前に、より具体的なJavaでの実装例が知りたくて参照させていただいたのが下記の記事になります。結果的に実装した内容は、全く異なるフレームワークと実装内容になりましたが、身近に感じるという点でお世話になった記事です。
@s5uishidaさん
[屋内環境を手軽にモニタリングする～⑥産業オートメーション機器の稼動情報をJavaで取得する(OPC-UA / Eclipse Milo)～](https://qiita.com/s5uishida/items/60954d356a3ea1048c61)
MacのVisual Studio CodeでC#を実行する

Visual Studio CodeでC#を実行できるようにしようとするといろいろ嵌まったので，記録しておきたいと思います．

##Visual Studio Codeをインストール
https://code.visualstudio.com
dmgをダウンロードして，appをコピーすることでインストール
![スクリーンショット 2020-04-20 15.31.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48319/75316356-e582-1ea4-4f52-b571d599807d.png)


##ターミナル作業
以下はターミナルでの作業になります．
### Homebrewをインストール
本家サイトに掲載されているとおり，以下のコードを入力して実行します．

```
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
途中でパスワードを求められる（恐らく要管理者権限）．

### ScriptCSをインストール
```
$ brew install scriptcs
```
monoのパッケージなどもここで読み込まれている．


##Visual Studio Codeの拡張機能を登録
![スクリーンショット 2020-04-20 15.31.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48319/7540a262-3a8c-a477-1eaa-01fb92b5cdc4.png)

検索メニューからCode Runnerを検索して，選ぶ．

![スクリーンショット 2020-04-20 15.32.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48319/ce38b69f-de9e-6f34-259a-d7f3b37745f2.png)

「install」ボタンをクリックしてインストールする．

その他，日本語メニューの方がいい人は「Japanese Language Pack」も入れておく．

##Code Runnerの設定

拡張機能の右下のギヤアイコンを右クリックして「拡張機能の設定」を開く
![スクリーンショット 2020-04-21 11.57.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48319/7a826fcb-9b9c-64c7-0566-ba9b41ddae99.png)
![スクリーンショット 2020-04-21 12.02.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48319/0be966f9-3dc6-833e-ac8a-32c1f977fa34.png)

clearPreviousOutputやrunInTerminal,saveFileBeforeRunなどはチェックしておいた方がいいかもしれません．

「settings.jsonで編集」と書かれているリンクを開いて以下のコードを追加

```
"code-runner.executorMap": { "csharp": "scriptcs -script" },
```
この設定がないと"Unexpected named argument:"となって，嵌まります．
 [StackOverflowの記事](https://stackoverflow.com/questions/51924614/scriptcs-0-17-01-error-unexpected-named-argument)

settings.jsonは，私の場合には上記でチェックしたものを含めて，こんな風になっていました．
![スクリーンショット 2020-04-21 12.07.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48319/fa1c6a46-c482-2a69-9daf-0011a1512109.png)

ファイルを保存して，設定完了．

##テスト実行

C#コード

```csharp:helloworld.cs
using System;

class test {
    public static void Main(){
        Console.WriteLine( "Hello,World" );
    }
}    
test.Main();
```

```
(base) Mac:~ user$ scriptcs -script "/Users/user/Desktop/helloworld.cs"
Hello,World
(base) Mac:~ user$ 
```


```csharp:echoback.cs
using System;

class test {
    public static void Main(){
        string a = Console.ReadLine();
        Console.WriteLine( a );
    }
}    
test.Main();
```

```
(base) Mac:~ user$ scriptcs -script "/Users/user/Desktop/echoback.cs"
こんにちは
こんにちは
(base) Mac:~ user$ 
```

末尾の`test.Main()`はCodeRunner.appのC#環境などでは不要ですが，この環境では書かないと動かないので注意しないといけません．
uGUIのCanvas Group

#概要
Unityのバージョンは2018.4

uGUIのCanvas Groupについてのメモです。
Canvas Groupのコンポーネントの内容は以下の通りです。

- Canvas Group
 - Alpha
 - Interactable
 - Blocks Raycasts
 - Ignore Parent Groups

内容はマニュアルを見ると詳しく載っています。
Canvas Group　https://docs.unity3d.com/ja/2018.4/Manual/class-CanvasGroup.html

#Canvas Groupの機能
- Add Component > Layout > Canvas Group で追加
- Canvas Groupが追加されたオブジェクトと子オブジェクトすべてに設定が影響する（設定は以下）
 - Alphaでオブジェクトの透明度を設定する
 - Interactableで入力を受け付けるか設定する
 - Block RaycastsでコンポーネントをRaycast用のコライダーとするかどうか設定する
  - 後ろに表示しているボタンを押せるようにすることができる
 - Ignore Parent Groupsでこのオブジェクトよりヒエラルキーが上のCanvas Groupの設定の影響を受けるか設定する
  - 特定のオブジェクトだけCanvas Groupの影響を受けないようにすることができる

参考ページ
https://tech.pjin.jp/blog/2017/03/20/unity_ugui_canvas-group/
https://kan-kikuchi.hatenablog.com/entry/CanvasFader

#Canvas Groupの使い道

- UIオブジェクトをまとめて表示/非表示を切り替える
 - メッセージウィンドのフェードイン/フェードアウト（Alphaをアニメーションで制御）
 - タブ型ナビゲーション画面などで表示を一気に切り替える
- UIオブジェクトの入力をまとめて有効/無効を切り替える
 - Loading中にボタンをすべて押せなくする
ローコード開発プラットフォーム

こんにちは。

今回はローコード開発プラットフォームについて取り上げたいと思います。少し前に[WSJの記事](https://www.wsj.com/articles/low-code-becomes-high-priority-as-automation-demands-soar-11573775663)でローコード開発プラットフォームが紹介されていました。

さて、そもそもLow-code development platformとはなんでしょうか？

Wikipediaによると、

>A low-code development platform (LCDP) is software that provides an environment programmers use to create application software through graphical user interfaces and configuration instead of traditional computer programming.

とあります。

ほぼプログラミングなしでドラッグ＆ドロップベースでクイックにアプリケーションを開発できる環境を提供しているプラットフォームを持つ製品のことです。

以下ローコード開発プラットフォームを提供している会社を一部紹介します。

- **[Appian](https://www.appian.com/)**
- **[Mendix](https://www.mendix.com/)**
- **[Outsystems](https://www.outsystems.com/ja-jp/)**

#ローコード開発プラットフォームのメリット
[WSJの記事](https://www.wsj.com/articles/low-code-becomes-high-priority-as-automation-demands-soar-11573775663)では、ビジネスプロセスのIT化需要の高まりを受けてローコード開発プラットフォームが企業のなかで最優先課題として挙げられている点について、いくつかの企業の事例を通して紹介しています。その中で、あるCIOは
>ユーザー側のITに対する要求は、IT部門が提供できるものよりも常に大きく、ローコード開発プラットフォームはそのニーズを満たすための助けになる

と述べています。

では、ローコード開発プラットフォームの特性について見てみましょう。

##短期間
これまでベンダー側もしくはユーザー側として、時間をかけ開発、リリースしたシステムがいざ蓋を開けたら全然利用されていない、使いづらいという理由から使わなくなったといった経験はないでしょうか？従来のように長い期間をかけて開発するようなアプローチではなく、簡単に開発でき、短期間の内にリリースできる開発環境は、このような齟齬を無くすのに理想的なアプローチです。短期間で簡単に開発できれば、利用者のフィードバックをすぐにもらい、すぐに改善することができます。そうやって日々のビジネスで使いやすいものにしていくことで、使えない/使われないアプリケーションになるリスクを抑えることができます。

##開発の容易さ
ローコード開発プラットフォームは、文字通りほとんどコードを書かず、ドラッグ＆ドロップベースで開発できるのが強みです。これにより、場合によってはこれまでエンジニアしか開発できなかったアプリケーションをビジネスユーザーでも開発したり、積極的に開発に参加したりする事が可能になります。

冒頭で紹介したWSJの記事の中では、3万-5万ドルの製品に相当する訪問者管理アプリケーションをたった１日でIT部門とビジネス部門が一緒になって作った事例を紹介してます。こういったことができるのもローコード開発プラットフォームがMtgなどでアプリケーションの要件を話し合いながら、その場でドラッグ＆ドロップや少しの設定だけで開発できる機能性を提供しているからだと言えます。

ローコード開発プラットフォームの利用は、今後ITだけでなく広くビジネスユーザーへ拡大していき、プログラミングの知識がなくても、ローコード開発プラットフォームによって作成されたシステムをインプリできる非エンジニアは今後増えていくと思います。そうなれば、使う側と作る側の距離が近くなり、両者間の齟齬がより小さくなるのでは？と期待しています。またエンジニアのリソース不足が深刻化している昨今の状況においてローコード開発プラットフォームは、エンジニアリソース十分に検討の価値があるかと思います。

#最後に 
ローコード開発プラットフォームの事例については、**[こちらのブログ](https://www.xplenty.com/jp/blog/7-low-code-case-studies-ja/)**も参考に。

**[Xplenty](https://www.xplenty.com/jp/)**は、豊富なコネクターとデータ加工に必要な変換部品、さらに複雑なジョブの依存関係を実装するためのワークフロー機能により、データ統合をシンプルかつ容易に実現することができるローコード開発プラットフォームです。ETL/ELTの処理をドラッグ&ドロップベースで開発することができます。ぜひ**[トライアル](http://try.xplenty.com/jp/)**に申し込んでいただき、操作感を体感してください。
Slackのリマインダーでリンクが失敗する

Slackではリマインダを設定することができますが、内容にURLを設定した場合にハイパーリンクにならないことがあります。
<img width="531" alt="コメント 2020-04-21 104928.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/0c25146f-c7b0-0435-3ae6-a4ddcac4d85c.png">
#Slackのreminder機能
はじめにSlackのリマインダ機能について簡単に言及しておこうと思います。
Slackのリマインダ機能を使うと、指定した日時にSlackの好きなチャンネルや個人に向けてメッセージを送ることができます。
メッセージに
`/remind [@メンバー/#チャンネル] [何を (日本語OK)] [任意: いつ (英語)]`
を打ち込むとリマインダ設定は完了です。
詳しい使い方は[こちら](https://slack.com/intl/ja-jp/help/articles/208423427-%E3%83%AA%E3%83%9E%E3%82%A4%E3%83%B3%E3%83%80%E3%83%BC%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)
#Slackのreminderのリンク失敗問題
それでは本題です。
リマインダにリンクを含めた場合にどうなるか？
設定の際は次のようなステップを踏むと思います。

＜リマインダ設定＞
<img width="530" alt="コメント 2020-04-21 102316.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/a72e429f-a977-c454-6d15-80e3a36a8487.png">
＜日時設定＞
<img width="531" alt="コメント 2020-04-21 102706.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/3fce7086-d1af-4d21-845a-3a39dd188b60.png">
＜設定完了通知＞
<img width="533" alt="コメント 2020-04-21 102802.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/752e6117-b977-5b7a-2f6b-0fce99357a5b.png">
ここで通知の際にしっかりリンクが成功しているので「おっ、できてるやん」と思ってしまいます。しかし、実際に届いたリマインダは次の通りです。
<img width="531" alt="コメント 2020-04-21 104928.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/0c25146f-c7b0-0435-3ae6-a4ddcac4d85c.png">
できてないやん。
#リンク失敗の原因
リマインダの設定の際に`[任意: いつ (英語)]`を省いてしまったことが原因のようです。
これによってURLが`<>`で囲われてしまい、ハイパーリンクにならないようです。
#解決方法
`[任意: いつ (英語)]`を省かずに書きます。
日時の記法は次の通りです（一例）。

| 日時 | 記法 |
|:-:|:-:|
| XX秒後  | in XX sec  |
| XX分後  | in XX min  |
| XX時間後  | in XX hour  |
| XX日後  | in XX day  |
| 次のHH時MM分  | at HH:MM  |
| 次のMM月DD日  | on MM/DD  |
|毎日 HH時MM分 |at HH:MM everyday|

実際に書いてみます。

＜リマインダ設定＞
<img width="530" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/72a307e5-c276-0bd1-03fc-eb1cd9af91e3.png">
＜設定完了通知＞
<img width="533" alt="コメント 2020-04-21 103428.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/35f2758c-013e-cdbd-a425-a58de5700a14.png">
＜リマインド通知＞
<img width="524" alt="コメント 2020-04-21 103100.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/182c6f3e-b6f1-4f3d-6f1a-f0278deff432.png">

しっかりリンク先のプレビューも表示されています。
#おまけ
リンクテキストもしっかり機能しました。
<img width="527" alt="コメント 2020-04-21 103227.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/691a7f85-a610-af0f-a763-6661bcd691b2.png">

<img width="535" alt="コメント 2020-04-21 103635.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/cd47cafd-5c2b-5bf2-a83c-85a674032b4b.png">
ただしプレビューは表示されないようです。
ミニマルなモーダルライブラリをnpmで公開しました

【更新履歴】
2020/10/28 v1.0.0の機能について追記。デモをGithub Pagesに移動。

---

ミニマルなモーダルライブラリ(**MinimalModal.js**)を自作してみたので紹介します。

## MinimalModal.jsとは :thinking:
TypeScriptで作成された、軽量かつ最小限の機能のモーダルライブラリです。

## なんでこのライブラリ作ったの？ :thinking:
[Micromodal.js](https://micromodal.now.sh/)を使おうと思ったのですが、
背景スクロール無効がなかったり、IE未対応といったところが私の用途には合わなかったため、
いっそのこと作ってしまったほうが早いかなと考え、作ってみました。

## 機能 :yum:
- モーダル用エレメントのopen属性の有無、及びaria-hiddenのtrue/falseの切り替え<br>(開閉のアニメーションはCSSで実装)
- 背景をクリックまたはESCキー押下でモーダルを閉じる。<br>(HTMLの実装次第で背景クリックでも閉じないようにできる)
- タブキーのフォーカス移動でモーダル外に出ることが出来ないように制御<br>([focus-trap](https://www.npmjs.com/package/focus-trap)に依存)
- モーダル表示時に背景のスクロールを無効化<br>([body-scroll-lock](https://www.npmjs.com/package/body-scroll-lock)に依存)
- TypeScript製
- IE11 をサポート

## 導入方法 :rocket:
### npm経由
```shell:Console
% npm install @yuki0410/minimal-modal --save
```

```javascript
// Common.JS
const MinimalModal = require('@yuki0410/minimal-modal');
 
// ESModules
import MinimalModal from '@yuki0410/minimal-modal';
```

### CDN経由
```html
<script src="https://cdn.jsdelivr.net/npm/@yuki0410/minimal-modal/dist/minimal-modal.min.js"></script>
```

### 直接ダウンロード
```shell:Console
% curl -o https://cdn.jsdelivr.net/npm/@yuki0410/minimal-modal/dist/minimal-modal.min.js
```

## 使い方 :page_facing_up:
### 自動
```javascript
MinimalModal.activate();
```

　→　**[デモ](https://ohnaka0410.github.io/minimal-modal/demo/automatic.html)**

### 手動
```javascript
// open
const modal = document.querySelector('#someModal');
MinimalModal.show(modal);
 
// close
MinimalModal.close();
```

　→　**[デモ](https://ohnaka0410.github.io/minimal-modal/demo/manual.html)**


## ライセンス :lock:
MIT

## npm
[@yuki0410/minimal-modal](https://www.npmjs.com/package/@yuki0410/minimal-modal)

## Github
[ohnaka0410/minimal-modal](https://github.com/ohnaka0410/minimal-modal)

## まとめ
自分でモーダルを実装する際にｿｯと使ってってみようと思います。
Flutter環境構築 - 4（VSCodeセットアップ編）

#はじめに
今回はFlutter環境構築第4弾 「VSCodeセットアップ編」です！
Flutter SDKのインストール・Flutterコマンドのセットアップがお済みでない方は、
先に「Flutter SDKインストール編」をご覧ください。

**Flutter環境構築シリーズ**
・[Flutter環境構築 - 1（Flutter SDKインストール編）](https://qiita.com/naru_chan__/items/359fcdfb8aa092e9a44e)
・[Flutter環境構築 - 2（Xcode・iOSシミュレーターセットアップ編）](https://qiita.com/naru_chan__/items/d64455cb7d0e7dd223a5)
・[Flutter環境構築 - 3（Android Studio・Androidエミュレータセットアップ編）](https://qiita.com/naru_chan__/items/94e8e2f85bd1803feddd)

#「VSCodeセットアップ編」でやること
本編では以下の項目を行います

- VSCodeのインストール
- VSCodeのセットアップ

#VSCodeのインストール
#### 1.VSCodeをインストールする
[VSCode公式サイト](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)へ行き、**今すぐ無料でダウンロードする**をクリックします。
![スクリーンショット 2020-04-21 11.13.15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/922f4c21-d90f-29d0-786f-1ce92a1425a4.jpeg)

各自使用しているOSのものをダウンロードします。
![スクリーンショット 2020-04-21 11.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/4c314464-d1e7-773b-d245-5c06842c7ecf.png)

ダウンロードが完了したら解凍し、VSCodeを起動します。

#VSCodeのセットアップ
#### 1.Flutterプラグインをインストールする
VSCodeが起動できたら、左タブの**Extensions**をクリックします。
![スクリーンショット 2020-04-21 11.31.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/bb4e63fe-9f4a-d4c8-65b0-d8a8ef0deeee.jpeg)

検索欄で**Flutter**と入力し、Flutterプラグインをインストールします。
<img width="1440" alt="スクリーンショット 2020-04-21 11.30.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/176a95b2-ae8c-ad55-2396-745c122124bb.png">

#### 2.Androidライセンスを承諾する
ターミナルにて以下を実行します。

```
flutter doctor —android-licenses
```

**y**を複数回入力していき、ライセンス条項を承諾していきます。

#### 3.flutter doctorを実行
ターミナルにて以下を実行します。

```
flutter doctor
```

実行すると以下のように表示されます。
ここで、**Connected device**以外のものに全て**✔︎（チェックマーク）**が入っていたらセットアップ完了となります。
もし**!（ビックリマーク）**がついているものがありましたら、そこに記述されている内容通りに行い、再度**flutter doctor**を実行してください。
<img width="596" alt="スクリーンショット 2020-04-21 11.46.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/ad611edc-96b1-8d2e-c096-cee815cbbc2d.png">

#最後に
以上で「VSCodeセットアップ編」は終了となります。お疲れ様でした。

また、これにてFlutter環境構築シリーズは終了となります。

最後までご覧くださりありがとうございました。

**Flutter環境構築シリーズ**
・[Flutter環境構築 - 1（Flutter SDKインストール編）](https://qiita.com/naru_chan__/items/359fcdfb8aa092e9a44e)
・[Flutter環境構築 - 2（Xcode・iOSシミュレーターセットアップ編）](https://qiita.com/naru_chan__/items/d64455cb7d0e7dd223a5)
・[Flutter環境構築 - 3（Android Studio・Androidエミュレータセットアップ編）](https://qiita.com/naru_chan__/items/94e8e2f85bd1803feddd)

参考サイト[[Flutter公式サイト](https://flutter.dev/)]
WSLでDockerを動かすまで

# WSLでDockerを動かすまで

## はじめに

これは自分がWSLでDockerを入れる際に少し手間取ってしまったために、備忘録として残すための記事ですので、読みづらい、説明不足なところがあると思います。ご容赦ください。

## 起動手順

1. Dockerのインストール
2. 管理者権限でのWSLの実行
3. 「sudo cgroupfs-mount」の実行
4. 「sudo usermod -aG docker $USER」の実行
5. 「sudo service docker start」の実行

です。
Dockerのインストールは公式サイトを見ながらおこなえば確実です。
毎回、sudoをつける必要がありますが、どうにかすればつけなくて良くなるそうです。
SourceTreeで差分ファイルを共有する

# 差分ファイルを共有したい！！

git管理してるのに、案件の都合上コミットできない.....とか皆さんもありますよね！！！？？？？？

ありますよね？？？？？（威圧）

そんな作業ファイルを納品しなきゃいけないようなイレギュラーな時にSourceTreeのパッチの作成が便利です
これを先方に渡して差分ファイルの納品とかいう行為に終止符を打ちましょう。

## パッチの作成

まずはサンプルでコミットしてない作業ファイルを作りました。

<img width="909" alt="スクリーンショット 2020-04-21 11.30.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115335/d6f2613f-07bd-ce16-d046-8b02c29b69b4.png">

作業ファイルのパッチの作成をするには、メニューバーの``パッチを作成``を選択してください。

<img width="602" alt="スクリーンショット 2020-04-21 11.31.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115335/8f23e44a-cd36-136c-6d0a-c869eaad9871.png">

二つのタブが出てきますが``作業コピーからパッチを作成``のタブを選択し、お好きなところに[name].diffを保存
今回は、Git管理上に置いてますが、Git管理外のフォルダに格納する方がいいです。

<img width="830" alt="スクリーンショット 2020-04-21 11.31.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115335/1f6937a1-bd7c-df63-edf6-e3a8fc881cc3.png">

<img width="288" alt="スクリーンショット 2020-04-21 11.32.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115335/62097077-a0a0-d322-e86b-d3ab74791b5a.png">

[name].diffが生成されていることが確認できたら完了です。
これを送りつけてやりましょう。

# パッチの適用

え....なんか謎のテキストファイルが送られてきたんだけど...と言われた時のために
適用方法も記載しておきます。

まずは作成と同じようにメニューバーから``パッチの適用``を選択。

<img width="537" alt="スクリーンショット 2020-04-21 11.32.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115335/6883fd37-0abc-ad7f-3515-483af747a21e.png">

``ファイルをパッチ``のタブを選択し、該当の[name].diffを参照して、適用。

<img width="765" alt="スクリーンショット 2020-04-21 11.32.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115335/81a7ec43-1cc2-7d73-aa95-de981c4ade50.png">

gitの作業コピーにファイルが追加されていたら完了です。

<img width="914" alt="スクリーンショット 2020-04-21 11.33.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115335/af5aaa7f-ec0d-c522-d66d-06666bf787ab.png">

# 追伸
管理ツールがちゃんと管理するためのツールになることを願って（まさお）
/dev/urandomを使ってパスワードを「作りためる」

# 毎回作らなくていいんでは？

手元に `/dev/urandom` がない Windows は言うに及ばずですが、Mac でターミナルを使い慣れていても、わざわざ開いてシェルのお世話になるのも面倒だと（私は）思っちゃうんですよね。

なので作りためましょう。

それなりのサイズのファイルを `/dev/urandom` で作ります。1024バイトもあれば十分かなーと思います[^no-reason]。

[^no-reason]: 根拠はないです

```
cat /dev/urandom | LANG=C tr -c -d '[:alnum:]' | head -c 1024 > password_pool.txt
```

最後で `fold` に渡すと、指定したサイズで改行できます。

```
cat /dev/urandom | LANG=C tr -c -d '[:alnum:]' | head -c 1080 | fold -w 72 > password_pool.txt
```

これをローカルマシンの適当な場所に保存します。あとは必要なときにローカルPCのテキストエディタで開いて、適当な部分からコピペするだけです。

# (おさらい) パスワードの作り方

他の記事に書かれているのを含めて、パスワードの作り方のバリエーションをいくつかまとめました。

## base64 を使う

よく見かける方法ですね。

```
cat /dev/urandom | base64 | fold -w 10 | head -n 1
```

[Base64](https://ja.wikipedia.org/wiki/Base64) なので `/` と `+` が入ってしまいます。
何回か試すと英数だけのものが出るでしょうしそんなに問題ないかもしれませんが、`tr` で削ってもよさそうです。

```
cat /dev/urandom | base64 | tr -d '/+' | fold -w 10 | head -n 1
```

余談ですが、これは単純化できます[^more_min]。

[^more_min]: さらに単純化して `base64 /dev/urandom | tr -d '/+' | head -c 10` にできます（ただ最後に改行が付きません）

```
base64 /dev/urandom | tr -d '/+' | fold -w 10 | head -n 1
```

入力ファイルを指定できるのに、なぜ人は `/dev/urandom` を `cat` する呪縛から離れられないのか？（哲学）

## tr を使う

`tr` で **使いたくないものを削る** 方法です。

……なお `tr` は標準入力を対象にするので `cat` して pipe しないといけないです……これが呪縛の原因か……。

### 英数のみの場合

base64 と同じように、英文字と数字だけ出します。

```
cat /dev/urandom | tr -c -d '[:alnum:]' | head -c 10
```

うまく行かないときは locale の問題かもしれません[^locale]。そのときは以下のように `tr` に `LC_ALL=C` を加えてみてください。

[^locale]: ターミナルで日本語表示させているときに遭遇する可能性が高いと思います

```
cat /dev/urandom | LC_ALL=C tr -c -d '[:alnum:]' | head -c 10
```

### 英数記号

パスワードの制限で記号を含めないといけない、という場合には使えるかも？[^maybe]

[^maybe]: 使える記号が限られていることも多いので、これより英数のみのものを使って、記号を付け足した方がいいかもなーと思ってます

```
cat /dev/urandom | tr -c -d '[:graph:]' | head -c 10
```

### その他

`[:xxxx:]` は他にもあるので、興味のあるひとは `man` を見てみてください。`[:punct:]` とかオススメです。試してみて下さい。実用性はまったくないですが！
マイナンバーカード申請が拒否られたのでopencv使ってちょろまかす

切れ散らかしました。  
  

それは先ほど例の10万円支給を受け取るためにマイナンバーカードのウェブ申請で顔写真をあげようとした時のこと。

証明写真機でとってきた写真が「ピクセル数が足りない」と言われてアップデートできないわけです。

「これはわざわざ仕様を満たす証明写真機を探しに周らないとあかんのか？」

「いや、**ちょっとピクセル数が足りないだけならほんのちょっと画像をいじれば通せるんじゃないか？**」

## ピクセル数をちょろまかそう
この画像をいじって行きます。
![b_img.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177172/44ba9b35-5d5e-bbb9-2c67-a4565a02c777.jpeg)

とりあえず読み込む。

```python

import cv2
import numpy as np
import matplotlib.pyplot as plt

filename = 'image.png'

# 読み込み
img = cv2.imread(filename)
rgb = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
```

`rgb.shape`で証明写真のピクセル数を見てみると`(600, 450, 3)`であり、要求される最低ピクセル数は`600 x 480`であるため横方向に`30px`の余白をつけてあげればいいことが分かります。

余白の色は白黒だと怒られそうなので背景色に合わせておきます。

```python

back_color = rgb[0,0] # (x:0,y:0)のピクセルを背景色として取得 
extension = np.full((600, 15, 3), back_color) # 背景色で塗った(縦600,横15,RGBの3チャンネル)の余白を作る
processed_img = np.hstack((extension, rgb, extension)) # 余白を元画像の左右にくっつける
```

最後に、拡張子は仕様に合わせてjpegで保存。

```python

bgr = cv2.cvtColor(processed_img, cv2.COLOR_RGB2BGR)
cv2.imwrite('processed.jpg', bgr)
```

パッと見たところ気に違和感ないですね。
![a_image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177172/03131525-bec5-c97d-447b-c6c424c1d673.jpeg)

## 申請は通ったのか
ひとまずweb上でのアップロードは通りました。

この後に人手でチェックが入るでしょうから、
そこでこの左右の余白が許されたのかは分かり次第追記します。
[python] 圧縮と解凍

## やりたいこと
- あるディレクトリ内の全ファイルを別のフォルダに圧縮
- 圧縮したファイルを元のディレクトリに解凍

## ポイント
powershellの時は7zipを使ってコマンドラインから操作していたけれど、他に何かないかと
調べてみたらすごく便利なものがあった　

- **```shutil```**を```import```して使う
 - 圧縮：　**```shutil.make_archive```** [圧縮先のパス], [フォーマット], [圧縮したいディレクトリのパス] 
 - [**圧縮先のパス**]には**拡張子は入れない**
 - 解凍：　**```shutil.unpack_archive```** [解凍したいパス], [解凍先]
 - [**解凍したいパス**]には**拡張子を入れる** 
 
## サンプル

```python:圧縮
import shutil

#圧縮先
done_dir    = 'C:/test/done/testzip'
#圧縮したいファイルのディレクトリ
output_dir = 'C:/test/output/'
z = done_dir
r = output_dir
#圧縮
shutil.make_archive(z, 'zip', root_dir=r)
```

```python:解凍
#解凍したい圧縮ファイル
zf = f'{z}.zip'
#解凍
shutil.unpack_archive(zf, extract_dir=output_dir)
```
茨城県の新型コロナウイルス感染症患者の発生状況の表を作成　（その２）

次のページのデータソースを変更しました。
[茨城県の新型コロナウイルス感染症患者の発生状況の表を作成](https://qiita.com/ekzemplaro/items/43f54264acaf33efb284)

データソース
>[新型コロナウイルス感染症
対策サイト(非公式) ](https://ibaraki.stopcovid19.jp/)

JSON の取得

```bash
wget https://raw.githubusercontent.com/a01sa01to/covid19-ibaraki/development/data/data.json
```

データの変換

```bash
jq .patients data.json > patients.json
./ibaraki_convert.py patients.json data_ibaraki.json
```

```py:ibaraki_convert.py
#! /usr/bin/python
# -*- coding: utf-8 -*-
#
#	ibaraki_convert.py
#
#					Apr/20/2020
#
# ------------------------------------------------------------------
import sys
import json
#
sys.path.append('/var/www/data_base/common/python_common')
from file_io import file_to_str_proc
from file_io import file_write_proc
# ------------------------------------------------------------------
file_in = sys.argv[1]
file_out = sys.argv[2]
#
sys.stderr.write("*** start ***\n")
#
json_str = file_to_str_proc(file_in)
array_aa = json.loads(json_str)
#
dict_aa = {}
count = 1
for unit_aa in array_aa['data']:
	unit_bb = {}
	key = "i%03d" % int(unit_aa['num'])
	unit_bb["place"] = unit_aa["居住地"]
	if "年代" in unit_aa:
		unit_bb["age"] = unit_aa["年代"]
	else:
		unit_bb["age"] = ""
	unit_bb["sex"] = unit_aa["性別"]
	unit_bb["date"] = unit_aa["date"]
	unit_bb["status"] = unit_aa["退院"]
	dict_aa[key] = unit_bb
	count += 1
#
dict_bb = {}
for key in sorted(dict_aa.keys(), reverse=True):
	dict_bb[key] = dict_aa[key]
#
out_str = json.dumps(dict_bb)
file_write_proc(file_out,out_str)
#
sys.stderr.write("*** end ***\n")
# ------------------------------------------------------------------
```

ホームページ
こちらと同じです。
>[茨城県の新型コロナウイルス感染症患者の発生状況の表を作成](https://qiita.com/ekzemplaro/items/43f54264acaf33efb284)
gulpにて”Did you forget to signal async completion?”

#エラー内容

```
$ gulp sass
[11:24:34] Using gulpfile ~/Desktop/blogtest/gulpfile.js
[11:24:34] Starting 'sass'...
[11:24:34] The following tasks did not complete: sass
[11:24:34] Did you forget to signal async completion?
```

```
[11:24:34] The following tasks did not complete: sass
[11:24:34] Did you forget to signal async completion?
```

この部分でエラーメッセージ。。
しかし、cssディレクトリにstyle.cssは問題なく作成されています。

ちなみにこの段階での```gilpfile.js```は

```gilpfile.js
var sass = require("gulp-sass");

gulp.task("sass", function() {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"));
});
```

#解決策
gulp.taskに渡すfunctionはパラメーターdoneをとって、そこに渡されるコールバックメソッドを最後に呼び出さなければならないみたいです。
コールバックを行うことで、task内の処理の終了を意味します。
そのため、記載のメソッドが呼ばれたタイミングで、そのtaskの処理は終了します。

そして、```gilpfile.js```を変更。

```gilpfile.js
gulp.task("sass", function(done) {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"));
    done();
});
```

そしてもう一度、```$ gulp sass```

```
$ gulp sass
[11:28:20] Using gulpfile ~/Desktop/blogtest/gulpfile.js
[11:28:20] Starting 'sass'...
[11:28:20] Finished 'sass' after 12 ms
```
コールバックした事によって、Finishedが走りました！

今度は問題なく、コンパイルできました。

つまり、各taskでは処理実行の終了を宣言する必要があるみたいですね。
PHPスコープについて

##スコープについて
スコープとは、ある場所で定義された変数や関数使える範囲のことをスコープという。
PHPの変数には、グローバル変数とローカル変数がある。

###ローカル変数
ローカル変数は、決められた範囲内でしか使えない変数。例えば、関数の中で変数が定義されたら、その関数内でした使うことができない。

```
<?php
　 $hoge = 1;
  function fuga() 
  {
    echo $hoge;
  }
  fuga();
  
　//エラーになる。$hogeは関数の中で定義されているので、関数の外では使えない。
?>
```

###グローバル変数
グローバル変数とは、ローカル変数とは違い、関数の外でも使える変数のこと。
先ほどのローカル変数を外で使えるようにするには

```
<?php
  $hoge = 1;
  function fuga()
  {
    global $hoge;
    echo $hoge;
  }

  fuga();
  //結果1と表示される
```
$globalをつけるだけで、関数の外でも使えるようになった。
しかし、関数の外では使えるが、別の関数内では使えない。あくまでもグローバル範囲内で使えるようになる。

```
<?php
　//グローバル範囲

 function fuga()
 {
   //ローカル範囲
 }

 //グローバル範囲

 function hoge()
 {
 　//ローカル範囲
 }

　//グローバル範囲
?>
```

今回はグローバル変数とローカル変数についてまとめました。
static変数などもあるので、勉強しときます。
AppleWatchでログが出ないことがあるので、iPhoneに投げつけて無理やり表示

# 困ったこと
- AppleWatchアプリを開発している
- なんかAppleWatchのログがでない
- ログが出る人もいれば出ない人もいる現象??

# もういいやiPhoneに投げつけよう
- WatchConnectivityのメッセージ送信でログ送信を作る

```Watch側.swift
WCSession.default.sendMessage(["show_log": log], replyHandler: { _ in }) { _ in }
```

```iOS側.swift
func session(_ session: WCSession, didReceiveMessage message: [String: Any], replyHandler: @escaping ([String: Any]) -> Void) {
        guard let key = message.keys.first else { return }
        switch key {
        case "show_log":
            print(message[key])
        case "その他いろいろ受け取るでしょうきっと"
```

## あわせてどうぞ
- [AppleWatchアプリが更新されないかもしれない](https://qiita.com/okamu_/items/452f1f8b73094ce8731e)
Hyper-V第2世代(UEFI)で稼働中のCentOS7をEsxiに移行する

#内容
Hyper-V第2世代(UEFI)で稼働中のCentOS7をEsxiに移行
第1世代で作成した仮想マシンであればvmware converterで一発だが、第2世代の移行は
なんか色々作業が必要だった・・・

#環境
移行元ホスト：Windows Server 2016 
移行先ホスト：vmware esxi6.7(vSAN)
移行ゲスト：CentOS 7.3
利用ツール：vmware converter 6.2

#手順
①コンバート

まずはvmware converterにてHyper-Vからesxiに仮想マシンのをコンバート
第1世代からのコンバートであればこれで起動するが第2世代からの場合、下記が必要

②ｖCenterにログイン後、仮想マシンタイプの変更

SCSIコントローラのタイプをLSI Logic SASへと変更　★これはいらないかも
ゲストOSのOther (32-bit)となっている為、仮想マシンオプションよりCentOS7へと変更する
ファームウェアをEFIへと変更
強制的に EFI をセットアップにチェックをつける

③EFIセッティング

add boot options
 →NO VOLUME LABEL, 
　→EFI
　 →CentOS
　 　→grubx64.efi
 　　　→Input the description に任意の名前(CentOSとか)を記入
　 　 　 →Commit changes and exit

Configure boot options
　 →Change boot order 
　 　 →上記で登録したラベルを1番へと変更

④initramfsの再作成

grubの画面からレスキューモードで起動後、起動したいカーネルでdracutコマンドを実行

```
dracut -f /boot/initramfs-3.10.0-514.26.2.el7.x86_64.img 3.10.0-514.26.2.el7.x86_64
```

⑤あとはNWなど再設定
macOS git を update したメモ


## git を アップデートしたい
- 画面からポチポチとインストールした git
- コマンドラインから udpate したい

## 現在のバージョン
```
% sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.4
BuildVersion:	19E287
```

```
% git --version
git version 2.21.1 
```

## アップデートしていく
### 1. Homebrew からupdateできる
そもそも、 Homebrew がなかった…

```
% brew list
-bash: brew: command not found
```

### 2.Homebrewのインストールを行う
[Homebrew 公式](https://brew.sh/index_ja.html)のコマンドを実行する

```
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

実行後、インストールされているか確認する

```
% brew update
Already up-to-date.
```
いる…

### 3.Homebrew つかって git いれる
そもそも、はじめて `brew` コマンドを使用するので、インストールすればよいよね！

```
% brew install git
```

インストールが終わったので、バージョン確認してみる。

```
% git --version
git version 2.21.1 
```
変わんないｗなんで？？パスかな…

### 4.パスをとおしてみる
`.bash_profile` あるか確認してみる。

```
% ls -a 
```

`.bash_profile` ファイルないから、つくる。

```
% touch .bash_profile
```

作成したファイルを開いて、編集し保存！

```:.bash_profile
export PATH=/usr/local/Cellar/git/2.26.2/bin:$PATH
```

一度ターミナルをぬけて、再度バージョン確認してみる

```
% git --version
git version 2.26.2
```

アップデートされた！やったー！
SQL: ALTER TABLEの使い方メモ

SQLのテーブル定義を変更するalter文の使い方メモ(MySQLで検証)

```
# テーブル名の変更
alter table target_table rename to new_table;


# カラム名の変更
alter table target_table rename target_column to new_column;


# カラム定義の変更
alter table target_table modify target_column [新しいカラム定義];
## (例)alter table target_table modify target_column varchar(20) default NULL;


# 新しいカラムの追加
alter table target_table add new_column [カラム定義]
## (例)alter table target_table add new_column varchar(20) default NULL;
```
メモランダム Rails tutorial　第5章

# Rails tutorial 第５章

# レイアウトを作成する

- apurike-syonnnibootstrapフレームワークを組み込み、カスタムスタイルを追加する。
- home, aboutへのリンクをレイアウトに追加。
 - パーシャル、　railsのルーティング、Asset pipelineについて学ぶ。+ Sass。ユーザーログインへの第一歩も。


# 1.構造を追加する

- webアプリケーション　＝　ユーザインターフェース
- モックアップをスケッチ。
- この時点でブランチを作成。

### ナビゲーション
- サイトのレイアウトがいるに　HTMLを追加。
- internetExplorerのHTML５サポート不備を回避するJavaScriptのHTML5shimというコード。
- header
 - navbar、navbar-fixed-top、navbar-inverse

- classラベルは何度も使える。
- idラベルは一度しか使えない。

- container

- link_to
- オプションハッシュ#
- navタグには「その内側がナビゲーションリンクである」という意図を明示的に伝える役割
- yieldメソッドはWebサイトのレイアウトにページごとの内容を挿入する。
- link_to の　image_tag
 - app/assets/images/ディレクトリの中から
- alt属性は、画像がない場合に代わりに表示される文字列

### BootstrapとカスタムCSS

#### Bootstrapを使うことでアプリケーションをレスポンシブデザイン (Responsive Design) にできる
 - どの端末でアプリケーションを閲覧しても、ある程度見栄えをよくすることができ

- Gemfileにbootstrap-sassを追加する
- bundle installを実行

- カスタムCSSを動かすための最初の一歩は、カスタムCSSファイルを作ること
 - Sassは5.2.2まで登場しませんが、bootstrap-sass gemが動作するためのおまじないとして必要

- Webサーバを再起動させると、アプリケーションに反映させる
 - Ctrl-Cを押してWebサーバを停止させた後、rails serverコマンドを打ってWebサーバを起動してください

- navbar-fixed-top
- navbar-inverse
- text-align: center
- color: #fff

### パーシャル partial
#### 一箇所にまとめた方が便利
- Railsではパーシャル (partial) という機能でこのような課題を解決できる
- renderと呼ばれるRailsヘルパー
- 


# 2.Sassとアセットパイプライン

- 最近のRailsに追加された機能の中で最も特筆すべき機能の１つは、CSS、JavaScript、画像などの静的コンテンツの生産性と管理を大幅に強化する「アセットパイプライン (Asset Pipeline)」

### アセットパイプライン

#### アセットディレクトリ
- ３種　app, lib , vendor

#### マニフェストファイル
- ニフェストファイルを使って、アセットをどのように1つのファイルにまとめるのかをRailsに指示する

#### プリプロセッサエンジン
- プリプロセッサエンジンは、繋げて実行する (chain) ことができます

### Sass-素晴らしい構文を備えたスタイルシート 
- ネスト　＝　ルールを継承
 -  :hoverなど

- bootstrap-sassというgemを使えば、SCSSでも同様に$gray-lightという変数が使える


# 3.レイアウトのリンク

### Contactページ
'test "should get contact" do`
`rails test`
- Contact用ページのルートとアクション,ビューを追加する。
- 全てのテストがグリーンであることを確認。

### railsのルートURL 
- 一般的な規約に従い、基本的には_path書式を使い、リダイレクトの場合のみ_url書式を使うようにします

### 名前付きルート
- link_toメソッドの2番目の引数で、適切な名前付きルートを使ってみましょう

### リンクのテスト
- これらのリンクが正しく動いているかどうかチェックするテストを書いてみましょう
- 「統合テスト (Integration Test)」を使って一連の作業を自動化


# 4.ユーザー登録：最初のステップ
- ユーザーのモデリングは第６章、ユーザ登録の完成は第７章。

### Usersコントローラ
- Usersコントローラを作成
- `$ rails generate controller Users new`

### ユーザー登録用URL
- ユーザー登録URL用にget '/signup'のルートを追加

# 5.最後に
- 以後サンプルアプリケーションを肉付けすることに専念します。最初に、ユーザー登録、サインイン、サインアウトできるユーザーを追加します。次に、マイクロポストを追加します。最後に、他のユーザーをフォローできるようにします。
- Gitを使っている方は、この時点でmasterブランチに変更をマージしてください。

### 本章のまとめ
- HTML5を使ってheaderやfooter、logoやbodyといったコンテンツのレイアウトを定義
- Railsのパーシャルは効率化のために使われ、別ファイルにマークアップを切り出すことができます
- CSSは、CSSクラスとidを使ってレイアウトやデザインを調整します
- Bootstrapフレームワークを使うと、いい感じのデザインを素早く実装できる
- SassとAsset Pipelineは、(開発効率のために切り分けられた) CSSの冗長な部分を圧縮し、本番環境に最適化した結果を出力する
- Railsのルーティングでは自由にルールを定義することができ、また、その際に名前付きルートも使えるようになる
- 統合テストは、ブラウザによるページ間の遷移を効率的にシミュレートする
【AWS EC2】Amazon Linux2にnginxをインストールする方法

# 概要
AWS EC2(AMI: Amazon Linux 2)にnginxをインストールする

# 環境
- AWS EC2
  - OS: Amazon Linux 2
  - AMI: amzn2-ami-hvm-2.0.20200304.0-x86_64-gp2

# 構築手順
## 1. Amazon Linux Extrasを確認する
Amazon Linux2にはnginxのyumが無いので、Amazon Linux Extrasでnginxを探します。

```console
$ yum search nginx
Loaded plugins: extras_suggestions, langpacks, priorities, update-motd
31 packages excluded due to repository priority protections
============================================================ N/S matched: nginx =============================================================
pcp-pmda-nginx.x86_64 : Performance Co-Pilot (PCP) metrics for the Nginx Webserver

  Name and summary matches only, use "search all" for everything.

$ amazon-linux-extras list | grep nginx
 38  nginx1                   available    [ =stable ]

$ amazon-linux-extras info nginx1
nginx1 recommends nginx                      # yum install nginx
```

## 2. nginxをインストールする
Amazon Linux Extrasでnginxをインストールします。

```console
$ sudo amazon-linux-extras install nginx1
Installed:
  nginx.x86_64 1:1.16.1-1.amzn2.0.1                                                                                                          

Dependency Installed:
  gd.x86_64 0:2.0.35-26.amzn2.0.2                                          gperftools-libs.x86_64 0:2.6.1-1.amzn2                           
  libXpm.x86_64 0:3.5.12-1.amzn2.0.2                                       nginx-all-modules.noarch 1:1.16.1-1.amzn2.0.1                    
  nginx-filesystem.noarch 1:1.16.1-1.amzn2.0.1                             nginx-mod-http-geoip.x86_64 1:1.16.1-1.amzn2.0.1                 
  nginx-mod-http-image-filter.x86_64 1:1.16.1-1.amzn2.0.1                  nginx-mod-http-perl.x86_64 1:1.16.1-1.amzn2.0.1                  
  nginx-mod-http-xslt-filter.x86_64 1:1.16.1-1.amzn2.0.1                   nginx-mod-mail.x86_64 1:1.16.1-1.amzn2.0.1                       
  nginx-mod-stream.x86_64 1:1.16.1-1.amzn2.0.1                            

Complete!

 38  nginx1=latest            enabled      [ =stable ]

$ nginx -v
nginx version: nginx/1.16.1
```

## 3. nginxを起動する
nginxを起動して、次回以降はサーバー起動時に自動で起動するように設定します。

```console
$ sudo systemctl start nginx
$ sudo systemctl status nginx
● nginx.service - The nginx HTTP and reverse proxy server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
   Active: active (running) since Mon 2020-03-30 15:38:21 JST; 7s ago

$ sudo systemctl enable nginx
Created symlink from /etc/systemd/system/multi-user.target.wants/nginx.service to /usr/lib/systemd/system/nginx.service.
$ systemctl is-enabled nginx
enabled
```

セキュリティグループで80を開放していれば、EC2のパブリックIPでnginxのデフォルト画面が表示されます。

# 参考
- [Amazon Linux 2にExtrasレポジトリからNginxをインストールする](https://dev.classmethod.jp/articles/install-nginx-on-amazon-linux2-from-extras-repository/)
- [Amazon Linux Extrasで楽々パッケージ管理](https://www.nedia.ne.jp/blog/tech/aws/2019/04/16/13991)
- [CentOS 7へNginxをインストールして最短でサイトが表示できる手順](https://www.rem-system.com/centos-nginx-inst/)