OmniAICreator/Qiita-1.07M huggingface dataset:
zshプロンプトにGCPプロジェクトIDを表示

# TL;DR

```zsh:.bashrc
# PROJECT IDをプロンプトの右側に表示
is_first=true
function gcp_project_id() {
  if [ -f "$HOME/.config/gcloud/active_config" ]; then
    gcp_profile=$(cat $HOME/.config/gcloud/active_config)
    project_id=$(awk '/project/{print $3}' $HOME/.config/gcloud/configurations/config_$gcp_profile)

    if "${is_first}"; then
      is_first=false
      RPROMPT=${RPROMPT}%F{039}'${project_id}'%f
    fi
  fi
}
autoload -Uz add-zsh-hook
add-zsh-hook precmd gcp_project_id
```

プロジェクトID:`wmetaw-gke-sample`をGCP色っぽく表示している
<img width="584" alt="ss.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40799/f35ea16d-5c85-9683-fd44-8fdeae91807e.png">

カラーは`%F{039}`を設定したい数値に変更 ※後述

# モチベーション
GCP似て複数プロジェクトを横断する機会が多いと、アクティブなプロジェクトがわからなくなる時が多く
その度に `gcloud config list` で状況を確認するのが面倒だったので、プロンプトの右側に常時表示したかった。


# カラー変更
```bash:全256色を表示するワンライナー
for c in {000..255}; do echo -n "\e[38;5;${c}m $c" ; [ $(($c%16)) -eq 15 ] && echo;done;echo
```
<img width="965" alt="ss.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40799/741b2734-d54f-9112-8e6b-9a8a416506ac.png">


> zsh で全 256 色を試しに表示みたい
> https://qiita.com/k_ui/items/b02b93e3af13023c0bfd
アコーディオンメニューでスクロールする

# プログラミングの勉強日記
2020年6月29日　Progate Lv.148
ポートフォリオ作成中
前回作成したwebページの調整をしている

##目標物
　アコーディオンメニューでスクロールをできるようにしたい。メニューはz-indexで最前面に表示されるようになっている。

<img width="336" alt="0629.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/24d6fc84-719f-fd34-326d-05a2131f009a.png">
<img width="337" alt="0629-1.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/8bd98791-251e-b34b-b6ab-ed618ba618c7.png">

##コード

```html:HTMLファイル
<div class="navigation">
  <span class="fas fa-bars naviTop"></span>
    <nav>
      <ul>
        <li><a href="#iceland">Iceland</a></li>
        <li><a href="#aurora">Aurora</a></li>
        <li><a href="#blueLagoon">BLUE LAGOON</a></li>
        <li><a href="#london">London</a></li>
        <li><a href="#paris">Paris</a></li>
        <li><a href="#iceland">Iceland</a></li>
        <li><a href="#spain">Spain</a></li>
        <li><a href="#map">Map</a></li>
        <li><a href="#food">Foods</a></li>
      </ul>
    </nav>
</div>
```

`overflow-y: scroll;`でスクロール機能を追加できる。このときにheightを指定する必要がある。
　しかし、<font color=blue>`height: 100%;`で縦幅を指定してもうまくできない。</font>そのため、今回は<b>vh</b>という単位を利用した。（widthは<b>nw</b>で指定した）

　vw(viewport width)：ビューポートの幅に対する割合
　vh(viewport height)：ビューポートの高さに対する割合

（ビューポート(viewport)は表示領域のこと）

```css:cssファイル
nav{
    height:90vh;
    overflow-y: scroll;
    width:70vw;
    display:none;
    background-color:rgba(58, 124, 223,0.7);
    border-radius: 20px;
    margin-top:80px;
}
```


##参考文献
https://tips.adrec-dept.com/html-css/208/
https://dev.classmethod.jp/articles/css-length-viewport/
WindowsのGit Bashでadd/commit/pushを自動化するコマンドを作る


# 要約

- ローカルでないフォルダでGit Bashを使うと死ぬほど遅い。
- `C\Program Files`の下にGit Bashで使う`.bashrc`がある。
- そこにadd/commit/pushを自動化する`gish`コマンドを作った。

# Git Bashの`.bashrc`上で新たに関数を作る。

## `.bashrc`の場所
起動時に実行される`.bashrc`はMacやLinuxであれば大体home直下がデフォルトですが，
Windows10では `C:\Program Files\Git\etc\bash.bashrc`というところに存在します。


## 作成した`gish`コマンド
[ここの記述]( https://qiita.com/derodero24/items/8e97e352eac934702354)を参考に作りました。

- 引数は`gish "コミットメッセージ" [何らかの文字]`です。
- 引数が1つならエラーを返し，2つならコミットメッセージでcommit，3つあればpushまで行います。

```shell

# gish "コミットメッセージ" "何某かの文を入れるとPush"
gish(){
git add -A;

#引数の数に応じて分岐
if [ $# = 0 ]; then # Error
echo "Please add comment!"
elif [ $# = 1 ]; then # Commitだけ
msg=$1
git commit -m "$msg";
elif [ $# = 2 ]; then # Pushもする
msg=$1
git commit -m "$msg";
CULLENT_BRANCH=`git rev-parse --abbrev-ref HEAD`;
git push origin ${CULLENT_BRANCH};
fi
}

```

なお，Programfilesの中なので管理者権限が必要です。Gitのbashrcを書き換えるのはなんとなく気持ち悪いですが，[別途Homeにbashrcを作ってProgramFiles側から実行させる。](https://qiita.com/seri/items/270367654999d3ac0465)という手法もあることはあります。


# 結局どれがいいのか？

わかりません。教えて下さい…

この手の効率化はエイリアスやシェルや関数化など皆さんいろいろやってくれていますが，Git Bashでbashrcを書き換えている人はパット見いなかった＆自分で使って悪い気はしなかったので投稿しました。

他にも
- [zshで実装した方](https://qiita.com/yousan/items/b820373d4d2ac1e691a7)

などの記事を眺めたりしました。
ZBOX EN52060V+ubuntu18.04環境に、NVIDIA GeForce RTX 2060ドライバをインストールする

# 背景
ZBOX EN52060Vに、ubuntu18.04をインストールした直後はNVIDIAドライバが入っておらず解像度がVGAになってしまう。。
以下を参考にインストールする。

> [MAGNUS EN52060V](https://www.zotac.com/jp/product/mini_pcs/magnus-en52060v#spec)
> - NVIDIA GeForce RTX 2060

```
wget http://jp.download.nvidia.com/XFree86/Linux-x86_64/440.100/NVIDIA-Linux-x86_64-440.100.run
sudo bash NVIDIA-Linux-x86_64-440.100.run
```

選択肢は全てデフォルトを選択

以下の通りインストールできたことを確認する

```
$ nvidia-smi
Mon Jun 29 01:32:05 2020       
+-----------------------------------------------------------------------------+
| NVIDIA-SMI 440.100      Driver Version: 440.100      CUDA Version: 10.2     |
|-------------------------------+----------------------+----------------------+
| GPU  Name        Persistence-M| Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp  Perf  Pwr:Usage/Cap|         Memory-Usage | GPU-Util  Compute M. |
|===============================+======================+======================|
|   0  GeForce RTX 2060    Off  | 00000000:01:00.0 Off |                  N/A |
| N/A   45C    P0     9W /  N/A |      0MiB /  5932MiB |      0%      Default |
+-------------------------------+----------------------+----------------------+
                                                                               
+-----------------------------------------------------------------------------+
| Processes:                                                       GPU Memory |
|  GPU       PID   Type   Process name                             Usage      |
|=============================================================================|
|  No running processes found                                                 |
+-----------------------------------------------------------------------------+
```

# 備考
上記の手順よりもむしろ、「ソフトウェアとアップデート」から更新するのが正しいようだ
[How to install the NVIDIA drivers on Ubuntu 20.04 Focal Fossa Linux](https://linuxconfig.org/how-to-install-the-nvidia-drivers-on-ubuntu-20-04-focal-fossa-linux)
[Ubuntu 20.04セットアップ](https://qiita.com/kenji-miyake/items/06b8c3807bef0ba5c451#nvidia-driver-のインストール)


自動ログインでloginループが発生した場合は以下をする
[Ubuntu20.04がログインループで立ち上がらなくなった場合の対処法](https://qiita.com/musaprg/items/51c8f7ee8a54c0ee207b)


> 解決方法
    Ctrl+Alt+F2(ダメならF1~F5を順に押してみるとどこかでttyが起動する)を押して仮想コンソールに入る。
    sudo nano /etc/default/grubでgrubの設定を開く。（viでもemacsでもなんでもいい）
    GRUB_CMDLINE_LINUX_DEFAULT="quiet splash"から、splashを消す。
    変更後はGRUB_CMDLINE_LINUX_DEFAULT="quiet"となっているのを確認。
    nanoで開いた人はCtrl+X→yで保存・終了する
    sudo update-grubで変更を適用
    sudo rebootで再起動

# 参考
[GTX1070入りのPCにUbuntu16.04を入れ、windows10とデュアルブートする際にはまった箇所について](http://tarukosu.hatenablog.com/entry/2016/07/03/121417)
[ubuntu18.04にnvidiaドライバを入れるの苦労した](https://qiita.com/kawazu191128/items/8a46308be6949f5bda57)
[NVIDIAドライバダウンロード](https://www.nvidia.co.jp/Download/index.aspx?lang=jp)
proc_open(): fork failed errors#

タイトルの通りメモリーがないと怒られてしまった。

https://getcomposer.org/doc/articles/troubleshooting.md#proc-open-fork-failed-errors

```
sudo /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024
sudo /sbin/mkswap /var/swap.1
sudo /sbin/swapon /var/swap.1
```
で解決
[Rails]Ransackでセレクトボックスを使用する方法

# はじめに
Ransackで、セレクトボックスを使用する方法についてまとめていきます。

# selectについて
まずは、セレクトボックスを作るための`select`ヘルパーについて、説明をしていきます。


#### 基本型

```erb
select(オブジェクト, プロパティ名, 要素情報, オプション, 要素属性)
```

#### 実装例
```erb
<%= f.select :name, [['sample1', 1], ['sample2', 2], ['sample3', 3]],
 {include_blank: '選択なし'}, class: 'sample' %>
```

(form_forの中に入っているとして、オブジェクトは入れていません。)
このように、第三引数に配列を入れると、パラメータとして`valueの1や2が送信されます`。

# 便利なヘルパー
さらにセレクトボックスをカスタマイズしていくための`便利なヘルパー`があります。

### options_for_select
`セレクトボックスの初期値`を設定したいときは`options_for_select`を使用します。

#### 基本形

```erb
options_for_select(配列/ハッシュ, オプション)
```

### 実装例

```erb
<%= f.select :name, options_for_select({sample1: 1, sample2: 2, sample3: 3}, 1),
 include_blank: true %>
```

options_for_selectの第２引数に「１」がはいっているので、`１がデフォルト値として表示されます。`

### options_from_collection_for_select

モデルから選択肢を作成したいときは、`options_from_collection_for_select`を使用すると便利です。

#### 基本形

```erb
options_from_collection_for_select(オブジェクトの配列, value属性, text項目 , オプション])
```

#### 実装例

```erb
<%= f.select :name, options_from_collection_for_select(User.all, :id, :name , 1) %>
```

これで、Userモデルの中にあるnameを自動的にセレクトボックスにすることが出来ます。

# Ransackでの使用方法

`options_from_collection_for_select`を例として使用します。

#### 実装例

```erb
<%= search_form_for(@q, url: users_path, local: true) do |f| %>

  <%= f.select :name_eq, options_from_collection_for_select(User.all, :id, :name , 1) %>

  <%= f.button ' 検索する' %>

<% end %>
```

以上のようにすることで、Userモデル内のnameをセレクトボックスにして、検索することが出来ます。
また、オプションで初期値も設定されています。

`name_eq`の`_eq`の部分は`matcher`と呼ばれ、等しい値を検索できます。

#### Matcherについて
他にも以下のmatcherがあります。

| matcher      　　 |　       意味       |    
|:-----------------|------------------:|
| _eq            |             等しい |       
| noteq           |            等しくない|    
| _cont           |              値を含む(LIKE) |    
| _iteq               |                以下 |      
| _gteq            |             以上 |       

詳しくは[こちら](https://github.com/activerecord-hackery/ransack)の「Search Matchers」の項目をご覧ください。

# 参考
https://railsguides.jp/form_helpers.html
https://shinmedia20.com/rails-select-box
MacBookのキーボードが故障したときに試したこと

# MacBookのキーボードが故障したときに試したこと

## 結論
業者に頼む前にできることは全て試したが、自分の場合は治らなかった。何かPCに異常があったときのトラブルシューティングに役立てばと思う。

## 症状
キーボード入力の異常
**おはよう**　とタイプしたくても
**ぉ９」葉＾」。；：** などとなってしまう

bluetoothのワイヤレスキーボードで入力する分には正しく入力されるのでハードの問題である可能性が高い

## スペック
MacBook Air (13-inch, Early 2015)
macOS Catalina 10.15.5

## 試したこと
- 普通に再起動
- PRAMクリア
- SMCリセット
- セーフモード起動
- エアダスターで掃除
- OSの再インストール

###普通に再起動
特筆事項も効果も無し
###PRAMクリア
https://support.apple.com/ja-jp/HT204063
###SMCリセット
https://support.apple.com/ja-jp/HT201295
###セーフモード起動
https://support.apple.com/ja-jp/HT201262
###エアダスターで掃除
https://support.apple.com/ja-jp/HT205662
###OSの再インストール
システム終了
起動ボタンを押した後すぐ**commandとoptionとR**を長押し（あるいは長押ししながら起動ボタンを押す）

そうするとりんごマークではなく地球儀マークが出てくる

しばらく経つと
ユーティリティが表示されるので
**OSを再インストール**を選択

これで大抵は治るはず。。。

Appleサポートによるとこれで治らないということは完全にハードの故障とのこと

## 最後に
唯一試して無いといえば後ろのネジ外して埃を掃除することくらい

マイクロプロセッサーは生きているのでそれがせめてもの救いかな
NVIDIA Jetson Nano最初の一歩

# きっかけ

AIというものがとても流行っているので、ちょっと使ってみたくなりました。手持ちのPCでも勉強はできますが、デジタルガジェット的なラズパイみたいにコンパクトでI/Oもついていて、強力なGPUを積んでいて、しかもお小遣いで買える値段！という素敵なものがNVIDIAから出ているということを聞きました。
[Jetson Nano開発者キット](https://www.nvidia.com/ja-jp/autonomous-machines/embedded-systems/jetson-nano-developer-kit/)です。

早速購入してみました。
![jetson_nano_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641874/05c0df08-37e3-d303-d43a-0f6cf490f6cb.jpeg)
Amazonでも売ってましたが、NVIDIAからリンクされていたパートナー[菱洋エレクトロ株式会社](https://ryoyo-gpu.jp/)が微妙に安かったのでここから購入しました。

USB電源で動くし、Jetson Nanoの入っていたNVIDIAの箱がNanoを置く台にもなるので、ちょっと使ってみる程度なら問題なかったのですが、使っているうちに結局、後から、5V-4Aの電源、ケース(ファン付き)、カメラは購入することになったので、最初からAmazonで一緒に買っておいたほうが二度手間にならなくてよかったかもしれません。ちなみに、電源を切り替えるためのジャンパは古いIDE HDDのMasterとかSlaveを設定していたアレを抜き取ってJ-48に挿して使いました。

![IMG_1882.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641874/bc711c4b-056c-3e2d-6348-9283787ce576.jpeg)

# SDカードイメージを拾ってくる

OSや各種のAI開発ツールをまとめたJetson Nano Developer Kit [JetPack SDK](https://developer.nvidia.com/embedded/jetpack)をNVIDIAが提供してくれているということで、それを利用することにしました。とにかく簡単なほうがいい。
2020年6月時点ではJetPack Ver.4.3で、nv-jetson-nano-sd-card-image-r32.4.2.zipというファイルがダウンロードできました（JetPack Ver.4.4はまだ開発者プレビューのようです）。
ダウンロードしたら、Windowsで「すべて展開…」とすると「sd-blob-b01.img」というファイルになりました。

# SDカードにイメージを書き込み

[NVIDIAのガイドページ](https://developer.nvidia.com/embedded/learn/get-started-jetson-nano-devkit#write)に従ってカードイメージをSDカードに書き込んで、Jetson Nanoの起動用にします。

- SD Memory Card Formatterを[SD Associationからダウンロード](https://www.sdcard.org/downloads/formatter/eula_windows/)してインストール。ダウンロードしたzipを「すべて展開」すると、インストーラー(exe)がでてくるので実行。

[balena](https://www.balena.io/)のオープンソースツールの[balenaEtcher](https://www.balena.io/etcher/)というツールをダウンロードしてインストール。
SDカードイメージはWindows10のマシンでダウンロードしたので、Download for Windows (x32|x64)というのを選択してダウンロード。難しくないほうがいいのでPortableではなくInstallerに。

ツールを起動すると、イメージの選択でうえでダウンロードしたisoを選択、次のインストール先でmicroSDカードを選択、そして実行、とするだけで起動SDカードができました。

Jetson nanoに挿して電源を入れると、ubuntuの初期設定画面が出て、言語、キーボードなどの設定。system言語は英語のほうがいいか？と、ちょっと悩みましたが結局、日本語としました。この辺りはごく普通のubuntuと同じですね。こんな小さなワンボードコンピュータで普通にubuntu desktopが動くとは、すごい時代になったものです。H8マイコンとか扱っていた世代としては、shutdownコマンドで電源が切れるというところですら衝撃的な体験です。ブラウザ（Chromiunが入っている）でネットサーフィン（死語）ができるとかホントに感動的ですらあります。これから、このJetson nanoで何をしようか、ワクワクが止まりません。
Google Charts/サポートするデータ型と値の指定方法

# 背景

[Google Charts](https://developers.google.com/chart)のドキュメントは非常に充実しているのですが、本件に関しては「どのようなデータ型が使えて」「どのように指定するのか？」を探すのに手間取ったのでメモ。

指定できる型は、DataTableのaddColumnメソッドの説明にに以下のようなざっくりとだけ記載されています。

[公式サイトの該当ドキュメント](https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/reference#DataTable_addColumn)

```
addColumn(type, opt_label, opt_id)

type - A string with the data type of the values of the column. 
The type can be one of the following: 'string', 'number', 'boolean', 'date', 'datetime', and 'timeofday'.
```

# 型の意味と指定方法

| 型 | 意味 | 値の指定方法例 |
|:--|:--|:--|
| string   | 文字列  | 自明なので省略  |
| number  | 数値型  | 1, 1.0とか  |
| boolean  | 真偽値  | true/false  |
| date/datetime (★1)  | 日、日時  | new Date(8,30,45)<br>new Date(9,0,0,10,30,0)  |
| timeofday  | 時、分、秒、ミリ秒を表す配列<br>(ミリ秒はオプション)  | [8,30,45] ←8時30分45秒<br>[9,0,5,0] ← 9時0分5秒0ミリ秒   |

(★1)date/datetime型は日付文字列(例えば`new Date('2015-01-01')`のような形式)の指定も可能ですが利用は推奨されていません。ブラウザによって解釈が異なるためです。以下のように記載されています。

横軸に日付を使うケースは多いと思うので留意しましょう。(サーバ側で文字列として組み立てていて、ブラウザ側で再度`new Date(y,m,d,...)`するのが面倒な場合は`string`として使用してしまうのもありだと思います。)

> Again, the string representation may be parsed differently by different browsers/versions. Notably, when dealing with time and timezones, there are differences in whether the datetime is returned with a UTC (GMT) timezone, or is offset and returned in local time. This is another reason why the use of datetime strings is not recommended.
> 文字列表現は、ブラウザやバージョンによって解析方法が異なる場合があります。 特に、時間とタイムゾーンを処理する場合、日時がUTC（GMT）タイムゾーンで返されるか、オフセットされて現地時間で返されるかには違いがあります。 これが、日時文字列の使用が推奨されないもう1つの理由です。

# 関連URL

- [DataTable.AddColumn()](https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/reference#DataTable_addColumn)
- [Dates and Times](https://developers.google.com/chart/interactive/docs/datesandtimes)
$ npm run watch時のエラー　～解決済～

```
$ npm run watch
```
をした際に以下のエラーが発生した。






```
ERROR in ./src/components/CalendarBoard/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/yoshidahayata/projects/react/calender-app/front/src/components/CalendarBoard/index.jsx: Unexpected token, expected "," (47:9)
```



上記を翻訳すると下記の通りです。

ERROR in ./src/components/CalendarBoard/index.jsx
モジュールのビルドに失敗しました（./node_modules/babel-loader/lib/index.js から）。
SyntaxError. /Users/yoshidahayata/projects/react/calender-app/front/src/components/CalendarBoard/index.jsx. 予期せぬトークン、予期せぬ「、」 (47:9)







つまり./src/components/CalendarBoard/index.jsxでエラーが発生している為、見直した。
どうやらコメントアウトが上手く出来ていないために発生したエラーのようです！！

だいぶ解決するのに時間かかりました。
こういった凡ミスはteratailなどで質問しても解決できない可能性があります。
なので、ｴﾗｰ文を”Deeply翻訳”などで英文を翻訳してｴﾗｰ文を理解することが重要だなと改めて感じました。
マイコンのピン単価


2020/06/29 調べ
# DIP

|チップ    |価格       |GPIO|ピン単価|
|---------|----------|----|-------|
|ATMega8  |0.90$10Pcs|22  |0.04$  |
|ATMega88 |1.68$10Pcs|22  |0.08$  |
|ATMega328|1.39$10Pcs|22  |0.06$  |

めんどくなったのでtinyは誰かまかせた。
ZBOX EN52060V+ubuntu18.04環境に、Killer AX1650 wifiドライバをインストールする


# 背景

以下のマシンにUbuntu18.04をインストールした際にwifiが使えなかった
wifiはAX1650というものを使っているようだった

> [MAGNUS EN52060V (Barebone)](https://www.zotac.com/jp/product/mini_pcs/magnus-en52060v#spec)
> Wifi WiFi 6 AX1650

# インストール

公式サイトを参照した
（wifi繋がらない間は、iPhoneをUSB接続してテザリングを有効化とかしておく）

> [Killer AX1650 In Debian/Ubuntu 16.04+](https://support.killernetworking.com/knowledge-base/killer-ax1650-in-debian-ubuntu-16-04/)
> Use a Package Manager like APT to install an automatically Backported Iwlwifi Driver

```
sudo add-apt-repository ppa:canonical-hwe-team/backport-iwlwifi
sudo apt-get update
sudo apt-get install backport-iwlwifi-dkms
reboot
```

# 参考
[MAGNUS EN52060V (Barebone)](https://www.zotac.com/jp/product/mini_pcs/magnus-en52060v#spec)
[Killer AX1650 In Debian/Ubuntu 16.04+](https://support.killernetworking.com/knowledge-base/killer-ax1650-in-debian-ubuntu-16-04/)
[ZOTAC MAGNUS EN1070KにUbuntu 16.04 LTSをセットアップ]
(https://inoccu.com/blog/2018/05/05/090645.html)
[Ubuntu 18.04 で USB Wi-Fi アダプタを認識させる](https://qiita.com/diescake/items/2370dc67a0ed40b089ba)
Pythonのslicingは、なぜ、コロン(:)で表現するのか

#Pythonのslicingは、なぜ、コロン(:)で表現するのか

Pythonのslicingは、コロン(:)を使って表現する。
例：

```
>>> a=[10,20,30,40,50,60,70,80,90,100,110]
>>> b=a[3:8:2]
>>> print(b)
[40, 60, 80]
>>>
```

なぜ、コロン(:)を使うのか？

⇒　**意味のある（役割のある）値を並べるのなら、コロン(:)なんだろうと思う。**

似た使い方と感じるのは、以下。
エクセルの例

```
=SUM(D3:D5)
```

コロン(:)に関するwikipedia(日本語)の説明で近いと思うものは、以下。
https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%AD%E3%83%B3_(%E8%A8%98%E5%8F%B7)

>時刻や時間の、時・分・秒を区切る。時刻としての使用は ISO 8601 で規定されている。
12:34:54（12時34分54秒・12時間34分54秒）
12:34（12時34分・12時間34分・12分34秒）

　　　　
>書物（特に聖書）の章番号と節番号を分ける。たとえば「ヨハネ1:15 (John 1:15)」はヨハネによる福音書第1章第15節。

　　　　
>IPv6アドレスを文字で表現する場合、16ビットずつの区切りにコロンを使用する。0の連続を"::"と表現する。例えば 2001:db8::1 。

#まとめ
**一番適切な、コロン(:)を、自然に選んだのだろうと思う。**
（Pythonは、コロン(:)が嫌いでないことも多少影響しているかも。)
（個人用メモ）サンキーダイアグラム

# この記事の目的
以下のような `sankey-diagram` を作成する. 
`{0,1}` は２種のイベントを表していて, 一定期間に `0 -> 1 -> 1` などのように複数回のイベントが発生するという想定で, そのイベント発生の遷移を可視化することが目的.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540956/7487f026-4ac5-73bb-f50a-88e94a29ce7e.png)

# 準備

```python
import numpy as np
import pandas as pd
pd.set_option('display.max_columns', 100)
import random

import warnings
warnings.filterwarnings('ignore')
```


# ダミーデータ準備

```python
n=100

agent = [random.choice([1,2,3,4,5,6,7,8,9,10]) for i in range(n)]
day = [random.choice([1,2,3,4,5]) for i in range(n)]
time = [random.random() for i in range(n)]
event = [random.choice([0,1]) for i in range(n)]


df = pd.DataFrame({"agent":agent,
                   "day":day,
                   "time":time,
                   "event":event})

df = df.sort_values(["day","time"])

summary = df.groupby(["agent", "day"])["event"].apply(lambda x: [str(xi) for xi in x]).apply(''.join).reset_index()
summary.head()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540956/f6a17b97-f23a-f19c-d731-ebaae19fbbb3.png)

`agent` (人だったり機械だったり)が, 一定期間の`day`という間でどのようにイベントを起こしたか `event` 
というデータである. 



```python
max_len_event = max([len(i) for i in summary["event"]])
max_len_event
>>5
```



```python
summary["event"] = ["{0:-<5}".format(i) for i in summary["event"]]
summary.head()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540956/4a179b9e-8735-6265-46fe-153f421877b7.png)


```python
value_list = []

for i in range(max_len_event-1):
    tmp = [ei[i:(i+2)] for ei in summary["event"]]

    #0->0
    n = sum([1 if ei=="00" else 0 for ei in tmp])
    value_list.append(n)

    #0->1
    n = sum([1 if ei=="01" else 0 for ei in tmp])
    value_list.append(n)

    #1->0
    n = sum([1 if ei=="10" else 0 for ei in tmp])
    value_list.append(n)

    #1->1
    n = sum([1 if ei=="11" else 0 for ei in tmp])
    value_list.append(n)

source_list = [[i, i] for i in range(max_len_event*2-2)]
source_list = np.array(source_list).flatten()

target_list = [[i, i+1, i, i+1] for i in range(2, max_len_event*2, 2)]
target_list = np.array(target_list).flatten()

label_list = ["0", "1"] * max_len_event
```

```python
import plotly.graph_objects as go

fig = go.Figure(data=[go.Sankey(
    node = dict(
      pad = 15,
      thickness = 20,
      line = dict(color = "black", width = 0.5),
      label =  label_list,
      color = "blue"
    ),
    link = dict(
      source = source_list,
      target = target_list,
      value = value_list
  ))])

fig.update_layout(title_text="Basic Sankey Diagram", font_size=10)
fig.show()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540956/7487f026-4ac5-73bb-f50a-88e94a29ce7e.png)

以上！

# 参考
Qiita：[【Python】4変数以上の可視化ってどうするの？](https://qiita.com/yuto16/items/fb41c798462c7941bb79)
Plotly：[Sankey Diagram in Python](https://plot.ly/python/sankey-diagram/)
C#の開発環境を整える(Visual Studio 2019)

#はじめに
 C#プログラミングを開始するため、環境づくりを説明します。

#目次
1.Visual Studio 2019 Community Editionのインストール
2.C#でHello Worldを実行
3.NuGet関係のパッケージをインストール
4.インテリセンスを日本語化

#1.Visual Studio 2019 Community Editionのインストール
##インストールファイルをダウンロード
MicrosoftのサイトよりCommunity Editionの実行ファイルをダウンロードします。

https://visualstudio.microsoft.com/ja/downloads/

![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182869/a2d4ca0a-1250-08a3-28ef-86581303e735.png)

##インストーラーで.NETデスクトップ開発を選択
.NETデスクトップ開発を選択後、ダウンロードおよびインストールしていきます。
Microsoftのアカウントでのログインを要求されますので、新規作成か既存のIDでログインしてください。

![CSinstall.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182869/8e03594e-d264-c273-4abd-e8fa1c369a69.png)

#2.C#でHello Worldを実行
###新規プロジェクトを作成
Visual Studio 2019を起動し、C#プログラムを実行する環境を作成してください。

![2020-06-28_23h46_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182869/be57e7e4-3e52-da86-1493-ed25224b55da.png)

##HelloWorldプログラムを実行
新規プロジェクトを作成すると、HelloWorldプログラムが自動生成されます。
ビルド後、実行できるか確認してください。

```HelloWorld.cs

using System;

namespace HelloWorld
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
        }
    }
}
```

##実行エラー発生
自動生成のHelloWorldプログラムを実行しようとしたとき、必ずエラーが発生しました。
ネットを調べるとNuGet関係のパッケージがインストールされていないことをが問題のようです。
>資産ファイル 'xxx\obj\project.assets.json' が見つかりません。NuGet パッケージの復元を>実行して、このファイルを生成してください。

#3.NuGet関係のパッケージをインストール
Visual Studio installerを起動し、個別コンポーネントから、
**NuGetのターゲットおよびビルドタスク**をインストールします。
インストール完了後、HelloWorldプログラムが実行できることを確認してください。

![nuget.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182869/e8de3793-8165-5b35-c766-ec97bbe37bd3.png)

#4.インテリセンスを日本語化
Visual Studio 2019では関数の説明が英語のままで内容が分かりづらいです。
Microsoftのサイトにローカライズされたファイルがあるのでインストールします。
その際、ダウンロードしたファイルは**.Net core Release 3.1.x**です。

　https://docs.microsoft.com/ja-jp/dotnet/core/install/localized-intellisense
DockerでRadicale 3.0なうに使っていいよ。

#Radicale 3.0リリース
Radicaleの新バージョンがリリースされていたので、公開しているDockerイメージを更新しました。
https://hub.docker.com/r/takeyamajp/radicale

Dockerfileはこちらです。
https://github.com/takeyamajp/docker-radicale/blob/master/centos8/Dockerfile

旧バージョンの記事はこちら。
https://qiita.com/takeyamajp/items/d7194853b0cbd3d5ef7a

#概要
ほとんどの方は、カレンダーやリマインダー、そして連絡先などの個人情報をGoogleやApple、Microsoftなどに預けていると思います。
Radicaleは、それらの情報を保管する事ができるサーバーソフトウェアです。
https://radicale.org

自宅にDocker環境がある方は、すぐにでも個人情報を自分で管理し始めることが出来ます。

```Dockerfile
FROM centos:centos8

...

ENV TIMEZONE Asia/Tokyo

ENV SSL true

ENV LOG_LEVEL warning

ENV USER user1,user2
ENV PASSWORD password1,password2

VOLUME /radicale

EXPOSE 5232
```

管理画面には、下記のコマンドで起動して`http://localhost:5232/`にアクセスしてみて下さい。
スマホなどに登録するときは`http://localhost:5232/user/`みたいな感じて設定して下さい。（userの部分はユーザー名です）

```
docker run -d --name radicale \
       -e TIMEZONE=Asia/Tokyo \
       -e SSL=false \
       -e USER=user \
       -e PASSWORD=password \
       -p 5232:5232 \
       takeyamajp/radicale;
```

DockerHubやGitHubでスター頂けると励みになります。
それでは、良いRadicaleライフを。
Minecraft Skript 入門編 Part.6 SkriptのFAQ

#SkriptのFAQについて
<details><summary>**ここをクリックして**</summary>すると隠されている中身が見れます。</details>

この記事ではこれを使ってSkriptのFAQを記述していきます。また、どんどん更新する予定です。
#SkriptのFAQ
<details><summary>**`There's no loop that matches 'loop-player'`というエラーが出る。**</summary>
コードの中に`loop-player`が使われているがloopの中にない。</details>
*****
<details><summary>**`Cannot use 'attacker' outside of a damage/death/destroy event`というエラーが出る。**</summary>
`attacker`は`on damage:`や`on death:`等のイベントでしか使えない。</details>
*****
<details><summary>**`The expression 'victim' can only be used in a damage or death event`というエラーが出る。**</summary>
`victim`は`on damage:`や`on death:`等のイベントでしか使えない。</details>
*****
<details><summary>**Skriptがサーバー起動時に読み込まれない。**</summary>
旧バージョンのSkriptの可能性があります。[こちら](https://docs.skunity.com/downloads/)からのダウンロードをお勧めします。</details>
*****
<details><summary>**`Can't understand this condition/effect: ○○○○`というエラーが出る。**</summary>
○○○○という部分はエラーの該当部分です。このエラーはそんなコードの書き方は知らないよ！！って言ってるので、スペルミスやアドオンの追加ミスを考えましょう。</details>
*****
次は[コチラ](https://qiita.com/meoto2408/items/3d507c1d1417b73e641b)

前は[コチラ](https://qiita.com/meoto2408/items/b3971c115bf91d3262e2)
C#でHTTPサーバを作る(REST/Grapevine)

一言でいうと、秒で開発用のHttpサーバを立てます。
(2021.1.25更新: GrapevineのバージョンがVer4からVer5に変わりました
この記事はVer4ベースで記載されています。Ver4は現在Grapevine-legacyという名前になっています。Ver5についても考え方は同じですが、使用方法が一部違っておりますのでご留意ください。)

# 課題が多いC#のHTTPサーバ
アプリのテスト用にC#でHttpリクエスト(REST)に答えるサーバをお試しに立ち上げたいとして、思ったよりも難しいことに気づきます。

- ローカルテスト用、実機?環境の対抗機としてPCと外部機器で1対1で単体/結合テスト用のMocサーバを立ち上げたい
- できればexeスタンドアローンでサーバを立ち上げたい(apache/IIS立ち上げができない環境)
- VisualStudioではASP.NET MVCを使用することになるが、基本的にIIS依存。IISに依存しない方法については多分調べる時間の方が長い。(気づいたらASP.NET MVCの歴史を勉強されられてた。勘弁してほしい)
- HttpListenerでHTTPのレスポンスを書くのが一般的だが、URLの処理(ルーティング)は自分で全部実装しないといけない。例えば、"http://localhost/page/" というURLや引数に対する文字列処理をしないといけない。
- URLの自前処理は非常にセキュリティやバグのリスクが高く、普通はやらない。

と言ったところを堂々巡りします。
そこで、Grapevineというライブラリを見つけたので紹介したいと思います。.NET的にNuGetで入れてチョイチョイで立ち上がるので安心。

# Grapevine

git: https://github.com/sukona/Grapevine
Getting started: https://sukona.github.io/Grapevine/en/

## LINQPad上で早速立ち上げてみる
LINQPadでF4→Add NuGetから"Grapevine"を検索して"The embeddable～"という長ったらしいのがGrapevineライブラリ本体です。もしLINQPadのNuGet機能が使用できない場合、GrapevineのサイトからDllを入手してF4→Browse...より参照してください。
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98713/919a3b02-e460-12c4-8b9b-287a8569c772.png">
次にF4→Additinal Namespace Importsタブから名前空間を登録します。C# のUsingにあたるところになります。
とりあえず以下の名前空間を登録します。
Grapevine.Server
Grapevine.Server.Attributes
Grapevine.Interfaces.Server
Grapevine.Shared
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98713/4b741d59-d0bb-9dd8-48cc-e25109313afa.png)

あとはGetting started: https://sukona.github.io/Grapevine/en/ に沿って進めます。
一番最初のサンプルコードをLINQPadに貼り付けます。

```cs:最初のサンプル
using (var server = new RestServer())
{
    server.Start();
    Console.ReadLine();
    server.Stop();
}
```
LINQPadのLanguageがStatementsまたはC# Programになっていることを確認して、再生ボタンを押してください。
すると以下の画像のようになり、ReadLine()で入力待ちの状態になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98713/03840f2a-e141-635d-4d5e-d3e8ab141d08.png)

この状態になれば"http://localhost:1234" のURLに接続できるようになります。
ポートやホスト名を変える場合はRestServerのコンストラクタで指定できます。
終了時は、LINQPad上ではコンソール入力用の黒い帯が出ているので、ここに何か入れると次の行に進んで正常終了できます。

---
(追記)
ReadLine()で待ち受けるとLINQPadのダンプがスレッド実行待ちになって止まるので、以下のような動かしっぱなしのコードの方が良いようです。止めるときはメニューのQuery→Cancel All threads and Resetsで止めます。

```cs:最初のサンプル
var server = new RestServer();
server.Start();
```
---

NuGetやサイトからDll取ってくる→ソースコピペ→実行の3ステップで立ち上げまで一瞬でした。
引き続きGetting startedを進めるのですが、クラスを書く場合はLINQPadのLanguageをC# Programに変更してください。
次に書いてあるLoggingについては、標準出力へのトレースログはそのままLINQPadへ出力されます。

## Grapevineでのサイト(システム)構築
GrapevineではURLのルーティングはクラスやメソッドに属性をつけるだけで自動的にやってくれるので、完全にストレスフリーです。
Routingでヒットしたメソッドはdllの定義順に実行され、context.SendResponse()などで、レスポンスを返した時点で以降のRoutingは実行されません。また一度もレスポンスを返す処理が実行されなかった場合、ライブラリのエラーレスポンスとなります。(私の環境では文字化けした怪しめの出力になりました)

(実際に簡単なサイトを構築した例は別途掲載予定。)

# さいごに
GrapevineはIISとSystem.Webを駆逐してやると謳っているだけあって、使用感がシンプルで好感が持てます。
LINQPadを使用して、秒でスクラッチコードを書いて動かせるので素晴らしい。
【JavaScript】JSのオブジェクトの書き方【初心者】

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>object更新</h1>

  <script>

    // 定数を設定して配列を代入する
    const person = {
      id: 1,
      name: "suzuki",
      age: 29,
    };

    // 配列の中の名前をtanakaに変更する場合
    person.name = "tanaka";

    // 関数を定義して、コンソールに配列の中身をそれぞれ表示させる処理を書く。
    const write = () => {
      console.log(person.id);
      console.log(person.name);
      console.log(person.age);
    }
    // 実際に関数を実行
    write();

  </script>
</body>
</html>
```
Djangoメモ

## プロジェクトを作成
プロジェクト用のフォルダがない場合

```
django-admin startproject ProjectName
```

プロジェクト用のフォルダがある場合

```
# プロジェクト用フォルダ配下で実行
django-admin startproject ProjectName .
```
## プロジェクトの設定
### settings.pyの編集
```python:settings.py
# 言語
LANGUAGE_CODE = 'ja'
# タイムゾーン
TIME_ZONE = 'Asia/Tokyo'
```

## アプリケーションの作成
```
python manage.py startapp AppName
```

### settings.pyの編集
```python:settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'AppName', #←←←追加 
]
```

## 仮想環境の作成

```
python -m venv EnvName
```
【Vue.js】テンプレートリテラル記法メモ

```html:index.html
<div id="app"></div>
```

```js:app.js
const vm = new Vue({
  el: '#app',
  template: `
    <div v-if="message">
    {{ message }}
    </div>
    <div v-else>
      メッセージがありません
    </div>
  `,
  data() {
    return {
      message: 'こんにちは'
    }
  }
})

window.vm = vm
```
Rubyのクラスメソッドって何？

# はじめに

Rubyでつまずいた項目のひとつ、クラスメソッド。
わからなかったことを書いていきます。

クラスとインスタンスについては[こちら][link-1] 。
[link-1]:https://qiita.com/fishmans0120/items/569cd9ab37b89c0c1726

# メソッドとは

前提条件として、メソッドとは何か。
メソッドとは、データが持つ「動作」です。

車に当てはめて考えてみると、
車というデータが持つ動作は「走る、止まる、ウィンカーを出す」などです。

# クラスメソッドとは

クラスメソッドを定義したクラス自身が使えるメソッド。
クラスで共通の情報を持った処理に使うことができます。
定義の方法は他のメソッドと同じですが、メソッド名の前に.selfをつけます。

```ruby:test.rb
class Car
  def self.run # メソッド名の前にselfをつけてクラスメソッドを定義します
    puts "走ります"
  end
end

Car.run # クラス名.メソッド名で、定義したクラスメソッドを実行できます
```

（2020.6.29追記。ご指摘ありがとうございます:bow_tone1:）
もしくは class << self から end の間にメソッドを書く記法もあります。
ネストは１段深くなりますが、クラスメソッドをたくさん定義したい場合はメソッド名の前に毎回.selfをつけなくても済みます。

```ruby:test.rb
class Car
  class << self
    def run
      puts "走ります"
    end
  end
end
```

# 最後に

クラスメソッドの注意点は以下の通り。

・定義するときには.selfをメソッド名の前につける。
・もしくは class << self から end の間にメソッドを書く記法もある。
・このメソッドは、クラスのみに用いることができます。

最後まで読んでいただきまして、ありがとうございました。
React jsx 迷ったことまとめ

常時追加していくやつ。
React始めたばかりの初心者のため間違えていたらご指摘よろしくおねがいします。

###Inputにて数字の入力のみを許すようにする
```
onInput={(e) => { e.target.value = e.target.value.replace(/[^0-9]/g, ''); }}
```
をInputタグに追加する。

```
<input
    type="text"
    className="form-control form-control-sm"
    name="なまえ"
    value={''}
    onChange={handleOnChange}
    onInput={(e) => { e.target.value = e.target.value.replace(/[^0-9]/g, ''); }}   // <-これ
/>
```

###配列(Array)を重複削除する方法
これはSetつかうんだよー! 

```
const array1 = [1, 5, 3, 1, 5, 3];
const array2 = Array.from(new Set(array1))
console.log(array2); // [ 1, 5, 3 ]
```
引用元:
[JavaScriptで重複排除を自分で実装してはいけない（Setを使う）](https://qiita.com/netebakari/items/7c1db0b0cea14a3d4419)



###連想配列(オブジェクト)を重複削除する方法

こっちは上述のSetつかう方法ではできないよね? ...よね? IndexOfつかっちゃうよ? 怒る?:sweat:

```
const jyuhukuArray = [
    { name: "スズキ" ,hoge: 'hoge' },
    { name: "キムラ" ,hoge: 'hoge' },
    { name: "スズキ" ,hoge: 'hoge' },  //重複
    { name: "サトウ" ,hoge: 'hoge' },
    { name: "サトウ" ,hoge: 'hoge' },  //重複

];
let values = [];
let noJyuhukuArray = jyuhukuArray.filter(e => {
  if (values.indexOf(e["name"]) === -1) {
    values.push(e["name"]);
    return e;
  }
});
console.log(noJyuhukuArray)
```


### 「...」ってなんじゃいこら:rage:

[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)っていうんだよ。説明見ようず

### 他のRouteにState渡したいんだが
渡せる。
既存の申請をコピーして、新しい申請を作成する、みたいな機能で使う。

```呼び出し元.jsx
const { history } = this.props;
const originalForm = {
    name: "コピー元の申請書",
}
history.push({
    pathname: '/application/new', //ページ遷移先
    state: {
        form: originalForm,
    },
});

```

```呼び出し先.jsx 
const { location } = this.props;
if (location.state) {  // コピー元から遷移してない場合location.stateはUdefinedになる 
    const newForm = location.state.form,
}
```
これでOK


### Use array destructuring  prefer-destructuring でeslintちゃんに怒られる
ぼーっと生きてた、、、

```
let object = {};
if (e.list.length === 1) {
  object = e.list[0];  //prefer-destructuring!! ぼーっと生きてんじゃねえよ!!!!!!!
}
```

```
let object = {};
if (e.list.length === 1) {
  [object] = e.list;  // OK!! つまんねーやつだなー
}
```
Lambdaをローカル実行したときにInvalidSignatureException: Signature expired:が出る件

#問題
SAMを使ってLambdaをローカル実行したときに
InvalidSignatureException: Signature expired:xxxxxxxxx
というエラーが出る。


#対処法
何かの拍子でDockerのタイムスタンプが狂っている模様。Dockerを再起動しましょう。
それでもダメなときはOSのシステム時刻が現在時刻を指しているかどうか確かめて
現在時刻からずれていたら修正する。
【CSS】読み込み時にスライドされhover時に灰色のフィルタがかかり拡大するアニメーション

```html:index.html
<div class="cover-slide hover-darken inview">
  <img class="img-zoom" src="images/image-1.jpg" alt="">
</div>
```

```scss:style.scss
@import 'mixin';

img {
  max-width: 100%;
  vertical-align: bottom;
}

.cover-slide {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #eaebe6;

    @include animation(
      $name: kf-cover-slide
    );
  }
  &.inview {
    &::after {
      @include animation(
        $name: kf-cover-slide,
        $duration: 1.6s,
        $timing-function: ease-in-out,
        // $fill-mode: normal
      );
    }
  }
}

@keyframes kf-cover-slide {
  0% {
    left: 0;
    right: 100%;
  }
  50% {
    left: 0;
    right: 0;
  }
  100% {
    left: 100%;
    right: 0;
  }
}

.img-zoom {
  opacity: 0;

  .inview & {
    opacity: 1;
    transition: transform 0.3s ease;
    @include animation(
      $name: kf-img-show,
      $duration: 1.6s,
      $timing-function: ease-in-out,
      $fill-mode: normal
    );

    &:hover {
      transform: scale(1.1);
    }
  }
}

@keyframes kf-img-show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.1% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
  }
}

.hover-darken {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: backgorund-color 0.3s ease;
    pointer-events: none;

    @include animation(
      $name: kf-img-show,
      $duration: 1.6s,
      $timing-function: ease-in-out,
      $fill-mode: normal
    );
  }
  &:hover::before {
    background-color: rgba(0, 0, 0, 0.4);
  }
}
```

```scss:_mixin.scss
@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}
```
[UE4] Material Editorで行列計算をしたい



Material Editorでは、行列を表すようなデータ型を[隠蔽している。](https://forums.unrealengine.com/development-discussion/rendering/28582-multiple-vectors-matrix-input-in-material-editor)標準的なシェーディング言語では当然のように組み込まれているので、GLSLなどを書いてきたプログラマは少々とまどう。以下、行列を利用するときのワークアラウンド。

# Vector4とCustomノードを用いる

結論としては、`Vector4`を4つ用意し行列をつくり、演算には`Custom`ノードを用いる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76966/fce5098b-921d-cf24-fb45-531214d0c427.png)

ここでは、`Material Parameter Collection`で定義された4つの`Vector4`（RGBA）を使っている。`Constant Vector4`や`Parameter`ももちろん使える。

`Custom`ノードでは任意のHLSLが書けるので、この中で行列を宣言し、計算も行っててしまう。罠としては、行列の宣言で一部制約がある。`floatNxN`と`{}`をもちいた宣言は[コンパイルエラーになるので、`matrix<float, N, N>`と`{}`で宣言と初期化を行う。](https://forums.unrealengine.com/development-discussion/rendering/1687206-custom-hlsl-nodes-and-matrices)
UE4にはこうした初見殺しの罠が散りばめられているが、Material Editorは単にHLSLを吐き出すのではなく、中間言語からプラットフォームに応じたシェーダ言語を生成する高機能なツールなので、このような細かいトランスパイル不備は目を瞑る…。

```glsl

// floatNxN と {} をもちいた宣言はコンパイルエラーになる
float4x4 IMatrix = {
    1.f, 0.f, 0.f, 0.f,
    0.f, 1.f, 0.f, 0.f,
    0.f, 0.f, 1.f, 0.f,
    0.f, 0.f, 0.f, 1.f
};

// コンパイルエラーにならない
matrix<float, 4, 4> shadowTrans = {
    1.f, 0.f, 0.f, 0.f,
    0.f, 1.f, 0.f, 0.f,
    0.f, 0.f, 1.f, 0.f,
    0.f, 0.f, 0.f, 1.f
};

```

以下、自分が実現したかったことをメモ的に残す。

# 例: WorldPositionから特定のカメラ視野のUVを求める

いわゆるピクセルシェーダー内で、[ShadowMap法でLightCameraのデプスマップを参照するときの方法](http://marina.sys.wakayama-u.ac.jp/~tokoi/?date=20050926)であり、これができると影を自作したりプロジェクターのシミュレーションができたりする。精緻なプロジェクションマッピングのエミュレータ的なツールを作りたかったが、そのためにはプロジェクターキャリブレーションをしてIntrinsicParameterを求めたりが必要そうだったので未来の自分か誰かに託すことにした。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プロジェクターをエミュレートするマテリアルをつくってみた。 <a href="https://twitter.com/hashtag/UE4?src=hash&amp;ref_src=twsrc%5Etfw">#UE4</a> 仮想空間にリアルの映像を打ってみる <a href="https://t.co/qerPIv87RS">pic.twitter.com/qerPIv87RS</a></p>&mdash; Ayumu Nagamatsu (@ayumu_naga) <a href="https://twitter.com/ayumu_naga/status/1277198206485426176?ref_src=twsrc%5Etfw">June 28, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Material Editor

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76966/72ac7bf5-13df-ae54-9cb2-92387b47492e.png)



## Customノード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76966/da3c2a8f-53b1-0a9c-00ca-dd5f75822b7f.png)

ピクセルの絶対座標とカメラのViewProjection行列（4つのVector4で代用）を引数にとり、そのカメラ内での正規化されたUV座標を返す。ベクトルと行列をかけて、座標を補正するだけ。

## パラメータを渡すBlueprint

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76966/f4f6b4d4-5d50-12eb-d272-87fcaf8c2c87.png)

こういうノードマップは見てもナンノコッチャという感じではあるが、やっているのは、複数の`Scene Capture 2D`コンポーネントから、

1. ViewProjection行列を取り出し（`Make MinimalViewInfo` -> `Get View Projection Matrix`）
2. 4つのRGBA（4次元ベクトル）をつくって、MaterialParameterCollectionにセット（`Break Matrix` -> `Break Plane` -> `Make Color` -> `Set Vector Parameter Value`）

をしている。行列を取得してからそれをパラメータに食わせられるような型にするまで遠かったりする…。

ちなみに [`Scene Capture 2D`](https://docs.unrealengine.com/ja/Resources/ContentExamples/Reflections/1_7/index.html) はカメラとして機能しながら、生成されるカメラ空間の法線マップ、デプスマップ、色情報などにアクセスできるため非常に便利。
Ubuntu18.04にJenkinsをインストールする

# 1. パッケージのアップデート
```
$ sudo apt update
```

# 2. OpenJDKのインストール
```
$ sudo apt install -y openjdk-8-jdk
```

# 3. Jenkinsのインストール
```
$ wget -q -O - https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo apt-key add -
$ sudo sh -c 'echo deb https://pkg.jenkins.io/debian-stable binary/ > \
    /etc/apt/sources.list.d/jenkins.list'
$ sudo apt update
$ sudo apt install jenkins
```

# 4. 動作確認
```
$ sudo systemctl status jenkins

● jenkins.service - LSB: Start Jenkins at boot time
   Loaded: loaded (/etc/init.d/jenkins; generated)
   Active: active (exited) since Sun 2020-06-28 23:42:06 JST; 4min 8s ago
     Docs: man:systemd-sysv-generator(8)
    Tasks: 0 (limit: 4666)
   CGroup: /system.slice/jenkins.service

 6月 28 23:42:00 Redmine systemd[1]: Starting LSB: Start Jenkins at boot time...
 6月 28 23:42:03 Redmine jenkins[2461]: Correct java version found
 6月 28 23:42:03 Redmine jenkins[2461]:  * Starting Jenkins Automation Server je
 6月 28 23:42:03 Redmine su[2520]: Successful su for jenkins by root
 6月 28 23:42:03 Redmine su[2520]: + ??? root:jenkins
 6月 28 23:42:03 Redmine su[2520]: pam_unix(su:session): session opened for user
 6月 28 23:42:06 Redmine jenkins[2461]:    ...done.
 6月 28 23:42:06 Redmine systemd[1]: Started LSB: Start Jenkins at boot time.s
```

# 5. 起動時実行
```
$ sudo systemctl enable jenkins

jenkins.service is not a native service, redirecting to systemd-sysv-install.
Executing: /lib/systemd/systemd-sysv-install enable jenkins
```

# 6. 初期設定

## 1. Jenkinsへアクセス

http://<サーバのIP>:8080/

## 2. Unlock Jenkins

1. 上記URLにアクセスすると下記画像のようなページが表示される
2. 下記コマンドを入力しAdministrator passwordを確認<br>
```
sudo cat /var/lib/jenkins/secrets/initialAdminPassword
```
3. 上記コマンドで表示されたパスワードを「Administrator password」にコピペする
4. 「Continue」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583643/7e49c498-99d5-b1ce-7d30-8ffae2b98aff.png)

## 3. Customize Jenkins

特に何もなければ「Install suggested plugins」を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583643/266e8c97-c591-4c55-e205-33f6f78a866f.png)

自動でインストールが開始されます

## 4. Create First Admin User

画面の指示に従い必要事項を入力します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583643/03326e0f-d5b5-733d-1569-f6101910c73e.png)

## 5. Instance Configuration

ここではアクセスするjenkinsのURLを指定しますが，特に何もなければ変更せずに「Save and Finish」をクリックする

# 参考

[Installing Jenkins](https://www.jenkins.io/doc/book/installing/#debianubuntu)
【npm-scripts】タスクランナー　メモ

## 使用するコマンド
```md:README.md
yarn init -y
yarn add -D
npm i -D 
```

## 「_**ejs」もコンパイルされてしまうのを防ぐため修正しました。
```json:package.json
{
  "name": "npm-scripts_menta",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^9.8.4",
    "browser-sync": "^2.26.7",
    "chokidar-cli": "^2.1.0",
    "ejs-cli": "^2.2.0",
    "node-sass": "^4.14.1",
    "node-sass-globbing": "^0.0.23",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^7.1.1",
    "watch": "^1.0.2"
  },
  "scripts": {
    "start": "run-p watch:ejs2html watch:scss2cssprefix start:server",
    "compile:ejs2html": "ejs-cli -b src/ejs/ \"/**/!(_)*.ejs\" -o dist/",
    "watch:ejs2html": "chokidar \"src/ejs/\" -c \"npm run compile:ejs2html\" --initial",
    "start:server": "browser-sync start -s dist -w src/*.html src/css/*.css src/js/*.js",
    "compile:css2cssprefix": "postcss dist/css/style.css -u autoprefixer -o dist/css/style.css",
    "compile:scss2css": "node-sass src/scss/style.scss --importer node_modules/node-sass-globbing/index.js dist/css/style.css --output-style expanded --source-map dist/css/",
    "compile:scss2cssprefix": "run-s compile:scss2css compile:css2cssprefix",
    "watch:scss2cssprefix": "chokidar \"src/scss/\" --command \"npm run compile:scss2cssprefix\" --initial"
  }
}


```
COVID-19 と OSS

コロナ禍が始まってから、リモートワーク中心になったが、もともと自宅作業が多かったので生活様式はすごく変わったということはなかった。

ところで、IT系でも「日本の一大事」とばかりに、その手の人材も何らかの形で関与したのではないかと思う。

とりわけ OSS (Open Source Software)活動は参加しやすい。

目立ったところでは
・CodeForJapan の「新型コロナ感染症対策」
・COVID19Rader の「接触確認アプリ」
だろうか。

（続く）
iTermでのscala起動時エラーへの対処法

MacのiTermでscalaを起動させたところ、下記のエラーメッセージが出てしまいました。

```
$ scala
Welcome to Scala 2.11.12 (Java HotSpot(TM) 64-Bit Server VM, Java 1.8.0_211).
Type in expressions for evaluation. Or try :help.
[ERROR] Failed to construct terminal; falling back to unsupported
java.lang.NumberFormatException: For input string: "0x100"
        at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
	at java.lang.Integer.parseInt(Integer.java:580)
	at java.lang.Integer.valueOf(Integer.java:766)
```

### 解決法
調べたところTERM環境変数が変更すると解決するらしいです。
現在のTERMを調べてみると`xterm-256color`でした。  
これを`xterm-color`に変更すると無事に動くようになりました。

```
export TERM=xterm-color
```

### TERMとは
ついでにTERMという環境変数について調べたところ、ユーザーが使用している端末をの種類をプログラムに伝える役目を果たしているそうです。
文字を削除したり、戻ったりなどの機能はエスケープシーケンスと呼ばれる特殊な文字の入力で伝えられるのですが、端末によってエスケープシーケンスのコードが異なるため、環境変数で指定してあげる必要があるようです。
PHP基礎＜変数と定数＞

#前書き
PHPを基礎から学習しています。
積み重ねのアウトプットとして更新していきます。

#変数とは
データを入れる「箱」のようなものです。 この「箱」の中には色々なものを出し入れすることができます。
「変数」は変わる数で、「定数」は変わらない数を示します。

```index.php

<?php
    $name = '山田太郎';
    $age = 20;
    
    echo '私の名前は';
    echo $name;
    echo 'です。';
    
    echo '私の年齢は';
    echo $age;
    echo '歳です。';


```
ここでの $name や $age が変数です。

#変数名
変数名には以下のようなルールがあります。

- 先頭には $ が必要
- 英数字およびアンダースコア(_)を利用可能
- 数字は先頭の文字には使えない
- 定数は一般的には全て大文字

また、変数名は内容が分かりやすい名前をつけます。


```index.php

?php

// 良い例
$name = '山田太郎';
$age = 40;

// 良くない例
$var = '山田太郎'; // どんな変数なのかが分かりづらい
$nenrei = 40; // 基本的に英単語を元につけたほうが良い

```
さらに、長い変数名の場合は、「スネークケース」「キャメルケース」などを利用します。

```index.php

<?php
    // スネークケース
    // スネークケースでは、アンダースコアで単語間をつなげ、基本的には全て小文字となる
    $user_name = '山田太郎';
    
    // キャメルケース
    // キャメルケースでは、2番目の単語の初めを大文字とする
    $userName = '山田太郎';

```
#変数の上書き
変数は、値を変更することができます。

```index.php

<?php
    $name = '山田太郎';
    echo $name;
    $name = '鈴木花子'; // こちらが上書きされる
    echo $name;

```

#あとがき

初回は変数と定数についてまとめました。
間違い等あればご指摘ご指導お願いいたします！
nuxtで音源再生するだけで苦しんだ話

そのうちしっかりまとめるが今は備忘録として。
今回躓いたコードがこちら
```<template>
<div class="musicPlayer">
<v-btn @click="ring()">再生</v-btn>
</div>
</template>
<script>
import clickSound from "@/assets/sound/xxxxxx.wav";
const audio = new Audio(clickSound);
export default {
  methods: {
    ring() {
      audio.play();
    },
  }
}```

## 解決に導いていただいたサイト
・ビルド時にエラー「Audio is not defined」が発生して処理に失敗する
→audioを定義する場所を間違えていた。
```<template>
<div class="musicPlayer">
<v-btn @click="ring()">再生</v-btn>
</div>
</template>
<script>
import clickSound from "@/assets/sound/xxxxxx.wav";
export default {
　methods: {
　　ring() {
　　　const audio = new Audio(clickSound);
　　　audio.play();
　　},
　}
}```
ring()の中に入れることで解決。
・ビルド時にエラー「These dependencies were not found」が発生して処理に失敗する
https://code.st40.xyz/article/979
・オーディオファイルをロードするように Webpack の設定を拡張するには？
https://ja.nuxtjs.org/faq/webpack-audio-files/
Azure Active Directory の UPN を変更する方法


# はじめに
オンプレでActive Directory（以下AD）、クラウドでAzure Active Directory（以下Azure AD）を使っている。
そこの課題として、

* ADとAzure ADでUPNが異なっている
* Azure ADが使い慣れていないUPN（メールアドレスではない）

そのため、ユーザもオンプレでログインする時と、SaaS利用でログインする時で別々のアカウントを使っていて使い勝手が悪い。

本来、どのようにした方が良いのか、ベストプラクティスとしてはどのようにした方が良いのか？


# Azureドキュメントを見ると
> アプリケーションで現在 UPN を使用している場合は、エクスペリエンスを向上させるため、ユーザーのプライマリ電子メール アドレスと一致するように UPN を設定することをお勧めします。
ハイブリッド環境では、ユーザーの UPN がオンプレミスのディレクトリと Azure Active Directory で同一であることが重要です。

[Azure Active Directory でのユーザー プリンシパル名の変更の計画とトラブルシューティング](https://docs.microsoft.com/ja-jp/azure/active-directory/hybrid/howto-troubleshoot-upn-changes)



基本的には、

* UPNは同一
* UPNはメールアドレスと一致

が基本戦略のよう。
一括変更したい時はどうするか？


# 一括変更したいときは

> UPN の一括変更をロールアウトする
> UPN の一括変更については、パイロットのベスト プラクティスに従ってください。 また、すぐに解決できない問題が見つかった場合に UPN を元に戻すため、テスト済みのロールバック計画も用意します。 パイロットを実行したら、さまざまな組織の役割とアプリやデバイスの特定のセットが含まれる少数のユーザーのセットを対象にすることができます。

[UPN の一括変更をロールアウトする](https://docs.microsoft.com/ja-jp/azure/active-directory/hybrid/howto-troubleshoot-upn-changes#roll-out-bulk-upn-changes)

一括で変更できるよう。
ただし、いきなりじゃなくて徐々に。

ということで、
方法は、

* [パイロットのベスト プラクティス](https://docs.microsoft.com/ja-jp/azure/active-directory/fundamentals/active-directory-deployment-plans#best-practices-for-a-pilot)
* 動的グループ メンバーシップ ルールで簡単にパイロットグループ作成
 * [Azure Active Directory の動的グループ メンバーシップ ルール](https://docs.microsoft.com/ja-jp/azure/active-directory/users-groups-roles/groups-dynamic-membership)

で徐々に移行すればOKということがわかった。
[rspec] 特定のテストのみ実行する方法

##前提


``ruby 2.6.3``
``Rails 6.0.3.1``
``rspec-rails (3.9.1)``

***


``system spec``のテストを書いていると、テストを走らせてから実行にかなり時間がかかりますよね。

個々のテストは、テスト作成時にピンポイントで行い、全てのテストが全てパスしているかは、リモートリポジトリに``push``した時に``circle CI``に任せるような、割り振りにしたいと考えました。

てな感じで、個々のテストをピンポイントで走らせたい場合について調べました。


##特定の``ファイル``のみテストを走らせる

```ruby

#bundle exec  rspec spec/パスを指定する
bundle exec  rspec spec/system/users_spec.rb
```

##特定の``行``のみテストを走らせる

```ruby

#bundle exec  rspec spec/パスを指定後に、行数を指定する
bundle exec  rspec spec/system/users_spec.rb:2
```

``model_spec``はまだしも、``feature_spec``や``system_spec``は実行が重いので、テスト結果をすぐに知りたい場合は、``ファイル or 行指定``する方が時短になりそうですね。
【Flutter/ Dart】デバイスの画面サイズや縦横比を取得する方法

## 概要
画面を等分割して画像をグリッド表示させたい場合など、画面サイズを取得する必要があります。
Flutterでは、`MediaQuery`を使うと簡単に取得できます。

## コード

```.dart
final size = MediaQuery.of(context).size;

// 幅
final width = size.width;

// 高さ
final height = size.height;

// 縦横比
final aspectRatio = size.aspectRatio;
```
【Flutter/ Dart】Navigator.push先でNavigator.popして戻ってきたタイミングで処理を実行する方法

## 概要
Navigator.push先での操作結果をNavigator.popした後に画面に反映したいシーンに遭遇し、以下の方法で解決しました。

## ページ遷移を観測するために RouteObserver を登録

```.dart:main.dart
final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();
void main() {
  runApp(MaterialApp(
    home: Container(),
    navigatorObservers: [routeObserver],
  ));
}
```

## 対象のclassに RouteAware をミックスインする

```.dart:sample.dart

class Sample extends StatefulWidget {
  SampleState createState() => SampleState();
}

class SampleState extends State<Sample> with RouteAware {

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // NOTE: この部分、公式ドキュメントと若干異なります
    routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute<Object>);
  }

  @override
  void didPopNext() {
    // ポップされて戻ってきた後に実行したい処理
  }

  @override
  void didPush() {
    // プッシュした後に実行したい処理（本稿の主題とは異なりますが）
  }

```