OmniAICreator/Qiita-1.07M huggingface dataset:
blocklyでobjectを動かす。 その5

#概要

blocklyでobjectを動かして見る。
audiocontextで、メロディ奏でてみた。

#ステージを作る

```
var audioContext = new AudioContext();
```

#ブロックを書く。

```
Blockly.Blocks.mml = {
	init: function() {
		this.jsonInit({
		message0: "mml %1",
		args0: [{
			type: "input_value",
			name: "TEXT"
		}],
		previousStatement: null,
		nextStatement: null,
		style: "text_blocks",
		tooltip: Blockly.Msg.TEXT_PRINT_TOOLTIP,
		helpUrl: Blockly.Msg.TEXT_PRINT_HELPURL
	})
}};
```

#フローを書く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/6e84abde-2b72-6abf-52fc-8a7225662eab.png)


#objectを書く。

```
Blockly.JavaScript.mml = function(a) {
    return "mml(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};

function oto(key) {
	var osciillatorNode = audioContext.createOscillator();
	var envelopeGen = audioContext.createGain();
	var freq = 440.0 * Math.pow(2.0, (key - 69.0) / 12.0);
	osciillatorNode.frequency.value = freq;
	osciillatorNode.connect(envelopeGen);
	envelopeGen.connect(audioContext.destination);
	var t1 = audioContext.currentTime;
	envelopeGen.gain.cancelScheduledValues(t1);
	envelopeGen.gain.setValueAtTime(1, t1);
	osciillatorNode.start();
	var release = 0.2;
	var keyUpTime = audioContext.currentTime;
	envelopeGen.gain.setValueAtTime(envelopeGen.gain.value, keyUpTime);
	envelopeGen.gain.linearRampToValueAtTime(0, keyUpTime + release);
	osciillatorNode.stop(keyUpTime + release);
};

function sleep(milliseconds) {
	var start = new Date().getTime();
	for (var i = 0; i < 1e7; i++)
	{
		if ((new Date().getTime() - start) > 100 * milliseconds)
		{
			break;
		}
	}
}

function mml(src) {
	for (var i = 0; i < src.length; i++)
	{
		var a = src[i];
		switch (a)
		{
		case 'a':
			oto('69');
		break;
		case 'b':
			oto('71');
		break;
		case 'c':
			oto('72');
		break;
		case 'd':
			oto('74');
		break;
		case 'e':
			oto('76');
		break;
		case 'f':
			oto('77');
		break;
		case 'g':
			oto('79');
		break;
		case 'A':
			oto('81');
		break;
		case 'B':
			oto('83');
		break;
		default:
		break;
		}
		sleep(4);
	}
}

```

#成果物

https://embed.plnkr.co/plunk/NWDrnWyNWUTYvh6W

以上。
dashはjupyter notebookでは実行できなかった件

##①dashでjupyter notebook が実行できなかった

上記の問題は使用なために解決できない模様（多分）


##②jupyter notebook で、実行すると、

vscに記述して👉ターミナルで実行するとエラーが表示された


```
helloland@hellolandnoAir dash % python hello.py
  File "hello.py", line 21
SyntaxError: Non-ASCII character '\xef' in file hello.py on line 21, but no encoding declared; see http://python.org/dev/peps/pep-0263/ for details
```


これは、エンコードがなんとかと問題だった

色々調べた結果、、、

ターミナルの実行コマンドが問題だった

正しくは、、、

```
Python3 hello.py
```


でした
やっぱこれだね～  Winパスリセット～♪

Windows10のAdministratorやユーザーのパスワードを、リセットする
-------

Ubuntsu( https://jp.ubuntu.com/ )を入れたUSBメモリから起動

Software&Updates
Community-maintained free and open-source software(universe)にチェックを入れて閉じる
パッケージ情報のアップデートを促されたら、Reload

情報のアップデートが終わったら、chntpw（ http://www.chntpw.com/ ）をインストール。
Terminalより、
sudo apt install chntpw

インストールが終わったら、ファイラーで、
windows/system32/config フォルダで右クリック、Terminalを開き、
sudo chntpw -u administrator SAM
もしくは、sudo chntpw -u ユーザー名 SAM

1.Clear(blanck) user password　を選択する

※うまくいかない時は、Windowsを一度起動してから、再度やり直しして

###オマケ】administratorアカウント有効化(Windows上で)
net user administrator /active:yes


...That's all. ☆ Knowledge of zealous young🌙🐰
JETSON NANO 開発者キット B01

# はじめに
JetsonNano上でディープラーニング系の重い処理を動かそうとすると、5V 4AのACアダプタを用いる必要があります。
その際、ジャンパーピンなるものが必要となるのですが、この方面に疎いにも関わらずJetsonNano触っちゃうミーハーな私のような人間には「どのジャンパーピンを買えばいいの？」となり、地味に最初の難関でした。

# 新リビジョンB01
最近、JetsonNanoの新リビジョンB01がリリースされまして、さっそく触る機会がありました。
目に見える変更点は、カメラ用のMIPI CSIコネクターが2つになっていることなのですが、うれしいことに、ジャンパーピンが付いていました！！

![IMG_20200316_075025.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33454/fb19a7b9-86b3-22ed-2fea-5a1ec316f1e2.jpeg)

一見、ジャンパーピンを挿す個所はどこに移動したのだろうと戸惑ったのですが、片方のピンのみ挿されていました。

![IMG_20200316_074936.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33454/97bb9733-2c4e-329d-657f-fe638948db6c.jpeg)

このように挿し直して準備完了です。

![IMG_20200316_074909.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33454/7269b873-41f7-fb31-4b91-e7c96e65bb00.jpeg)

これまでは別にジャンパーピンを用意する必要がありましたが、B01からは付属することになったようです。
これはささやかながら確実にJetsonNanoを触りやすくなったなと個人的には思っています。

ちなみに、JetPack4.2をいれて、Tensorflowのインストールを行いましたが、旧版と違いはありませんでした（当然か）。

以上
python配列について

## pandas 行列について

ilocとは

https://note.nkmk.me/python-pandas-at-iat-loc-iloc/


iterrowsとは

https://note.nkmk.me/python-pandas-dataframe-for-iteration/


# indexを使う理由

index とは

・リストの要素が重複していない場合: index


```
dates = []
subscribers = []
reviews = []

for index,_df in df.iterrows():
    dates = datetime.datetime.strptime(_df['date'],'%Y/%m/%d').date()
``` 


indexを使わなかった場合下記のようなエラーが表示されます


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538355/82883bf9-fc02-405b-3c39-057b5320ff40.png)
Vue.jsでHello Worldを出力してみた

#はじめに
自己学習とアウトプットを兼ねて作成してみました
本記事がQiita初投稿となります


#やってみたこと
####Vue.jsを使って簡単なコードを書いてみた
[公式サイト](https://jp.vuejs.org/v2/guide/)
[参考サイト](https://qiita.com/Mitsuzara/items/4dea8c0aa95d6284980a)
上記のサイトを参考にしつつ環境構築


#そもそもVue.jsって何？
#####Vue.js(ビュージェイエス)は、クライアントサイドで使われるJavaScriptのフレームワークのこと

それぞれ説明すると

▶︎クライアントサイド
Webサーバーにアクセスした得られた結果をWebページで表示する部分

▶︎JavaScript
Webページで複雑な機能をできるようにしたプログラミング言語

▶︎フレームワーク
少ないコードで効率的に作れるようにした機能の集まり

要は、Webページで良い感じに表示させるための機能の一つなんだなーという解釈で良いと思います

#Vue.jsって何が良いの？
####学習コスト低い
JavaScriptのフレームワークは他にも沢山存在するが、学習コストが低く学習しやすい利点がある
公式サイトが日本語対応しており、技術ブログうあ記事も充実しているので調べやすい


####小規模から大規模開発まで
個人開発から、大規模なWebサイトまで対応している

採用企業例）Google、Apple、LINE、note、ZOZO


####SPA開発
SPA（シングルページアプリケーション）開発に使用される
SPAとは、ブラウザで出来る処理はJavaScriptで終わらして、サーバーとの通信は必要最低限に抑えましょうという意味

####MVVMモデル
Webサービスを開発する上では
Model
View
ViewModel
に分けて開発する設計思想があり、ModelのデータをViewで扱いやすくするようなものを設け、データバインディングという機能を使い、データそのものを共有して取り扱う考え方

文字だけでは、良く分からない（私も）と思うので気になった方は[こちら](https://qiita.com/shinkuFencer/items/f2651073fb71416b6cd7)を参考に

#概要が分かってきた所で作成してみよう
今回作成したのは静的なhtmlファイルになります

###index.htmlの作成
```HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Worldを表示</title>
  </head>
  <body>
    <!--- "Hello World" を表示する --->
  </body>
</html>
```
###作成したindex.htmlファイル内にCDNを記述
Vue.jsを導入する方法は幾つかありますが、今回はCDNを利用しました
bodyタグの中に記述します

```HTML
  <body>
    <!--- "Hello World" を表示する --->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </body>
```

###表示用htmlを記述
messageという変数を用意して、"Hello World"の文字列を格納して表示していきます
messeageという変数を{{  }}の二重カッコで囲み、divタグで括ることでid要素を割当てています

```HTML
  <body>
    <!--- "Hello World" を表示する --->
    <div id="app">{{ message }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </body>
```
htmlはこれで準備OK

###Vue関数を使用
ここでやっとVueを記述してきます
初めて書くときには構文がやや複雑ですが、お作法と思いましょう

```javascript

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})
```

まず、Vueインスタンスの生成を行います
el:'#app'で、先ほどid要素を割当てたappの値にVue関数が使用出来るように設定しています
data:{}の中で用意したmessage変数に出力した文字列を格納

###scriptタグで括る
最後にscriptタグで括り以下のように記述します

```javascript

<body>
  <div id="app">{{ message }}</div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello World'
      }
    })
  </script>
</body>
```

###出力
以上でプログラムの作成は完了したのでブラウザで表示させてみましょう
<img width="103" alt="スクリーンショット 2020-03-14 15.15.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559642/40a4a367-c299-fc66-14ab-9966745ddbec.png">
と表示されたらOKです！

###index.html全文

```html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Worldを表示</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello World'
        }
      })
    </script>
  </body>
</html>
```

#最後に
今回はVue.jsで簡単なプログラムを作成しましたが、まだまだVue.jsの利点を十分に発揮できていないので
これからまた勉強次第、記事を投稿しようと思います
ChatWorkから、Slackにメッセージを転送するGoogle Apps Scripts

# ChatWorkから、Slackにメッセージを転送するGoogle Apps Scripts

 ```
var CHATWORK_TOKEN = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';//★ChatWork APIのトークン
var MY_ID = 'XXXXXXXXX';//★自分のチャットワークID
var ROOM_ID = ["XXXXXXXX", "XXXXXXXX"];//★チャットワークのルームID
var SLACK_TOKEN = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';//★Slack APIのトークン

function chatworkToSlack(){
  var params = {
    headers : {"X-ChatWorkToken" : CHATWORK_TOKEN},
    method : "get"
  };
  
  for (var i = 0; i < ROOM_ID.length; i ++) {
    var url = "https://api.chatwork.com/v2/rooms/" + ROOM_ID[i] + "/messages?force=0";
    var strRespons = UrlFetchApp.fetch(url, params);
    if (strRespons != "") {
      var json = JSON.parse(strRespons.getContentText());
      if(json == "") return;
      for each(var obj in json){
          var message = '';
          for(var i in json){
            message = message + json[i].account.name + "\n```" + json[i].body + "```\n";
            postMessage(message);
        }
      }
    }
  }
}


function postMessage(message) {
  var url        = 'https://slack.com/api/chat.postMessage';
  var token      = SLACK_TOKEN;
  var channel    = "#XXXXXXXXXXXXXXXXX"; // ChatWorkのチャネル
  var username   = "ChatWork";
  var parse      = 'full';
  var icon_emoji = ':robot_face:';
  var method     = 'post';
  var payload = {
  'token'      : token,
  'channel'    : channel,
  'text'       : message,
  'username'   : username,
  'parse'      : parse,
  'icon_emoji' : icon_emoji
  };
  var params = {
    'method' : method,
    'payload' : payload
  };
  var response = UrlFetchApp.fetch(url, params);
}

function test_postMessage() {
   postMessage("ハロー");
}

function test_checkMessage() {
  Logger.log("start test_checkMessage");
  var params = {
    headers : {"X-ChatWorkToken" : CHATWORK_TOKEN},
    method : "get"
  };
  
  for (var i = 0; i < ROOM_ID.length; i ++) {
    var url = "https://api.chatwork.com/v2/rooms/" + ROOM_ID[i] + "/messages?force=0";
    var strRespons = UrlFetchApp.fetch(url, params);
  Logger.log("strRespons");
        Logger.log(strRespons);
    if (strRespons != "") {
      var json = JSON.parse(strRespons.getContentText());
      if(json == "") return;
      for each(var obj in json){
        Logger.log(obj.body);
          var message = '';
          for(var i in json){
            message = message + json[i].account.name + "\n```" + json[i].body + "```\n";
        Logger.log(message);
            postMessage(message);
          }
      }
    }
  }  
}
```
まだ使っていないけどtype-safeなvuex alternative として piniaどうだろう?

この記事は 2020年03月16日 のものです。[最新の情報はpiniaの公式リポジトリ](https://github.com/posva/pinia) からご確認ください

---

- 注意: piniaリポジトリを斜め読みしただけなので大したこと書いていない
- けど vuex だとどうしても不便な場合があるので、 reactive(Vue.observable)によるVanilla State Managementや、 pinia みたいな方法でtype-safeなStoreレイヤーほしいよね.  
  そんな気持ちの人が増えたらいいよね! 宮ちゃん!

### 話のコンテキスト
- 今現在 Vue(2.x), vuexを使っているプロジェクトでの利用を想定。
- わりとごりごりしたフロントエンド。 エンドユーザーが触る管理画面 がある
- 複数のvuexモジュールがある。namespaced true. vuexモジュール間でもアクセスしうる。（単方向）
- 徐々にTypescript + compositon-apiを使い始めた。
- actionやgetterの引数や返り値の厳密な型がほしい.........


### はて、typescript+composition-api利用している場合、vuex使う理由は?
- 以前からVue.observable()使ったno vuexでのstate managementでもよかった。
- vuexのメリットがあるとすれば、比較的「Vue標準のスタイル」と呼べる. documentも存在するという点だと思う。
(独自の方法でglobal state管理をする場合、プロジェクトローカルな方法をメンバーに伝えて、これに沿って書いてもらう必要はある。)
- vuex4でもtypescriptへの注力はあまりなさそうなので、Typescript+CompositionAPI利用時はvuexは選択肢としてかなりモチベーションが低くなる

こんな話もある。
https://speakerdeck.com/ntepluhina/you-might-not-need-vuex

### そこで pinia 

https://github.com/posva/pinia


まだ experimental だけど


Vuex 定義側

```ts:src/stores/adminUsersStore.ts
import { createStore } from 'pinia'


export const useAdminUsersStore = createStore({
  state: () => ({
    usersWithDeleted: [],
  }),  
  getters: {
    activeUsers(state, getters) { return state.users.filter((u: User) => !u.retiredAt) 
  } 
  action: {
    fetchUsers() {
      ....then((response) => {
       this.state.users = response.data.usersWithRetired;
      });
    }
  }
}
```

利用側

```html:App.vue
<script lang="ts">
import { useAdminUsersStore } = "@/stores/adminUsersStore.ts";
export default defineComponent({ // 旧 createComponent
  setup(props, _ctx) {
    const adminUsersStore = useAdminUsersStore();
    mounted(() => { adminUsersStrore.fetchUsers() })
    return {
      users: adminUsersStore.activeUsers,
    };
  }
});
</script>

<template>
  <ul>
    <li v-for="u in users">{{ u.name }}</li>
  </ul>
</template>
```

## いまのところ感じていること

- compositionAPIの `reactive<T>({ ... })` を使って、fooBarStore.ts 内でvanila state管理をおこなっても良いんだけど、  `createStore({ state, getters, actions })` みたいにある程度　形式が決まっているとメリットがある
  - チームで開発をする場合、各個人が迷わないかも
  - ある程度グルーコードは出てくるだろうから pinia みたいなレイヤーがあると都合がよい。(createStore内部でいろいろやる)
    - 例: vanila state management on composition-api の場合違って、piniaの場合、各getters functionごとに computed(()  => ... )しなくてよい。

### 斜め読みしたPinia のmemo
- inject/provide使っていない. export xxx = createStorestore({ ... }) で定義して、 これを直接importして使う。
    createStore内部で pinia 内部の管理テーブル(storesMap) にidだけ突っ込んでいる
- devtoolサポートやってて偉い。これはちょっとだけ便利かも

### 疑問点など
1. storeYからstoreXのアクセスってどうやるのかまだ調べてない。

storeY = createStore({ ... }) の外側で `storeX = useStoreX()` するわけにも行かないし.
https://github.com/posva/pinia#usage
> There is one important rule for this to work: the useMainStore (or any other useStore function) must be called inside of deferred functions. This is to allow the Vue Composition API plugin to be installed. Never, ever call useStore like this:

2. stateの型かけないの....? (もしくは書かなくてもこまらない? そんなわけないやろ...???)
デプロイ失敗

エラー内容
---
       [INFO] ------------------------------------------------------------------------
       [INFO] BUILD FAILURE
       [INFO] ------------------------------------------------------------------------
       [INFO] Total time:  2.360 s
       [INFO] Finished at: 2020-03-15T14:42:24Z
       [INFO] ------------------------------------------------------------------------
       [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project sf5-lounge: Compilation failure: Compilation failure: 
       [ERROR] /tmp/build_4af038e236977e9ba2fca9b5a329339f/src/main/java/dev/GetTweet.java:[129,43] diamond operator is not supported in -source 1.5
       [ERROR]   (use -source 7 or higher to enable diamond operator)
       [ERROR] /tmp/build_4af038e236977e9ba2fca9b5a329339f/src/main/java/dev/GetTweetTest.java:[111,44] diamond operator is not supported in -source 1.5
       [ERROR]   (use -source 7 or higher to enable diamond operator)

原因
---
pom.xmlに記載不備

対処
---
pom.xmlに以下追加

    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-compiler-plugin</artifactId>
      <version>3.1</version>
      <configuration>
        <source>1.7</source>
        <target>1.7</target>
      </configuration>
    </plugin>
Rでスプライン曲線を描く

#概要
smooth.splineを使って点と点を滑らかに通るcubic smoothing spline curve（3次平滑化スプライン曲線）を描く。

#使用例
今回は滑らかに結びたいデータセットxyを、適当な乱数を使って用意。

```r:
x <- rep(1:10)
y <- rnorm(10, mean=0.5, sd=0.2)
xy <- data.frame(x,y)
```

こんな感じのデータ

```
##     x         y
## 1   1 0.5731112
## 2   2 1.0058572
## 3   3 0.6335509
## 4   4 0.2445897
## 5   5 0.3784457
## 6   6 0.5662213
## 7   7 0.6725708
## 8   8 0.4708219
## 9   9 0.5967647
## 10 10 0.6542743
```

次に各種パラメータの設定。
new_xのlengthは、predict関数により予想される点の数である。
今回は、3種類のsparパラメータを使って平滑化スプライン曲線を描画した。

```r:
plot(xy[,1],xy[,2],xlim=c(1,10),ylim=c(0,1),
     xlab="x",ylab="y",cex=1)#xyをplotしておく

new_x <- seq(1,10,length=100)#予測される点の数
spar_i <- c(0,0.4,1)#sparパラメータの変更
col_i <- c("red","green","blue")#描画パラメータ

for(i in 1:3){
  sp <- smooth.spline(xy[,1],xy[,2],spar=spar_i[i])
  pred <- predict(sp,new_x)
  par(new=T)
  lines(lwd=1, pred, col=col_i[i])
}
```
こんな感じで点と点を滑らかに結んだ曲線が描かけた。必ずしも点を通るわけではないので注意。
![smooth_spline.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560849/b4614030-ae56-0734-12a7-73ceac9d1053.jpeg)
twitter4j使用ソースをデプロイしたら失敗した

■twitter4jをデプロイしたら失敗した
---

■エラー

    [INFO] -------------------------------------------------------------
       [ERROR] COMPILATION ERROR : 
       [INFO] -------------------------------------------------------------
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweetTest.java:[9,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweetTest.java:[10,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweetTest.java:[11,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweetTest.java:[12,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweetTest.java:[13,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweetTest.java:[14,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweetTest.java:[15,22] package twitter4j.conf does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweet.java:[16,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweet.java:[17,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweet.java:[18,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweet.java:[19,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweet.java:[20,17] package twitter4j does not exist
       [ERROR] /tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweet.java:[21,17] package twitter4j does not exist
       [ERROR]/tmp/build_a4ed9f5ff44d78cc39ef296374348ae6/src/main/java/dev/GetTweet.java:[22,22] package twitter4j.conf does not exist


■原因
---
Mavenが参照できてなかった

■対処
---
pom.xmlに以下を追加した。

    <dependency>
        <groupId>org.twitter4j</groupId>
        <artifactId>twitter4j-stream</artifactId>
        <version>4.0.6</version>
    </dependency>

■参考
---
・[Twitter4Jの紹介](https://www.codeflow.site/ja/article/twitter4j)
【Go】ポインタ

#### ポインタ
<hr>
値渡し、ポインタ渡し、参照渡しの違いについて
基本こちらの記事で理解
[参照リンク](https://qiita.com/lon9/items/e70e3b453cb485858062)

#### 自分なりの整理
<hr>

```Go:
# このポインタ型の関数は
# アドレス値を受け取る
# 自身のアドレス値も別に持ってる("&"でアドレス確認可)
# 受け取ったアドレス値にあるデータにアクセス（"*"）

func pointer(i *int){
    fmt.Println("値（受け取ったアドレス）=メイン（アドレス）が入る: ", i)
    fmt.Println("自身のアドレス: ", &i)
    fmt.Println("値（受け取ったアドレス）のデータにアクセス: ", *i)
}


# メイン
func main() {
    i := 10
    fmt.Println("メイン（値）: ", i)
    fmt.Println("メイン（アドレス）: ", &i)
    
    # ポインタ型の関数にはアドレスを渡す
    pointer(&i)
}

```

結果

```
メイン（値）:  10
メイン（アドレス）:  0xc00009c008
値（受け取ったアドレス）=メイン（アドレス）が入る:  0xc00009c008
自身のアドレス:  0xc000098020
値（受け取ったアドレス）のデータにアクセス:  10
```
【Git で困った話】シリーズ

##Git 操作でクッソ困ったことをメモしていきます。
どうやって解決したらえーねん！という事ばかりが頻繁に起こるのでメモ。

フロー間違ってるかもだけど。

まずやったこと。

```
$ git status
```

で状態確認する。

```
On branch feature/useredit
# Changes not staged for commit:
#   (use "git add/rm <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#	deleted:    .env.example
#	modified:   app/Http/Controllers/CustomerController.php
#	modified:   config/database.php
```

はいはい、で

```
$ git commit -m "hogehoge"
```

で今回修正対象のファイルは`Controller`なので

```
git add app/Http/Controllers/CustomerController.php
```

で、Push

```
$ git push origin feature/useredit
```

###でたぜエラー！！！

```
 ! [rejected]        feature/useredit -> feature/useredit (fetch first)
error: failed to push some refs to 'https://github.com/oboTeamDeve/deve_obo.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first merge the remote changes (e.g.,
hint: 'git pull') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```

さて、調べますか。

これ、前もあったけど、どうやって解決したか忘れたし、今後何回も遭遇するであろう事象やからメモる。

で早速ググる。
ググる前にも

```
'git pull') before pushing again.
```

とあるので、おそらくPushする前にPullしてちょ。だと思う。

で、

[git pushがrejectされたときの対応方法](https://hacknote.jp/archives/15275/)
を参考に

```
$ git pull origin feature/useredit
```

実行。

すると、

```
Merge branch 'feature/useredit' of https://github.com/oboTeamDeve/deve_obo into feature/useredit

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.
```

なんかcommmitメッセージ入れろや、と出てきましたが、空でも良さそうなのでそのまま`:q`

で、なんか色々mergeされていざアクセスしたらEroor!表示だけど、Mergeしたことで余計なコードが入っただけだから修正して無事解決。

で、`git push origin feature/useredit`で解決。
blocklyでobjectを動かす。 その4

#概要

blocklyでobjectを動かして見る。
canvasに、car書いてみた。

#結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/70fef5ce-de7a-2a90-3396-a12333714fb4.png)


#フロー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/6409b265-d4eb-a2e4-95f8-1c4e90f56e10.png)


#成果物

https://embed.plnkr.co/plunk/RflNQ10FqzlHPvPL

以上。
blocklyでobjectを動かす。 その3

#概要

blocklyでobjectを動かして見る。
canvasに、線引いてみた。

#ステージを作る

```
<canvas id='world' width="450" height="450"></canvas>
```

#ブロックを書く。

```
Blockly.Blocks.kame_turn = {
	init: function() {
		this.jsonInit({
		message0: "tern %1",
		args0: [{
			type: "input_value",
			name: "TEXT"
		}],
		previousStatement: null,
		nextStatement: null,
		style: "text_blocks",
		tooltip: Blockly.Msg.TEXT_PRINT_TOOLTIP,
		helpUrl: Blockly.Msg.TEXT_PRINT_HELPURL
	})
}};
Blockly.Blocks.kame_walk = {
	init: function() {
		this.jsonInit({
		message0: "walk %1",
		args0: [{
			type: "input_value",
			name: "TEXT"
		}],
		previousStatement: null,
		nextStatement: null,
		style: "text_blocks",
		tooltip: Blockly.Msg.TEXT_PRINT_TOOLTIP,
		helpUrl: Blockly.Msg.TEXT_PRINT_HELPURL
	})
}};
```

#フローを書く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/5b3e65bc-abb3-52c8-0684-7f3ab691ff8c.png)


#objectを書く。

```
Blockly.JavaScript.kame_turn = function(a) {
    return "kame0.turn(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};
Blockly.JavaScript.kame_walk = function(a) {
    return "kame0.walk(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};

var canvas = document.getElementById("world");
var ctx = canvas.getContext("2d");
var kame = function(ctx) {
	this.ctx = ctx;
	this.rad = 0;
	this.x = 0;
	this.y = 300;
};
kame.prototype.walk = function(n) {
	var x0 = Math.round(this.x + n * Math.cos(this.rad * Math.PI / 180));
	var y0 = Math.round(this.y + n * Math.sin(this.rad * Math.PI / 180));
	this.ctx.beginPath();
	this.ctx.moveTo(this.x, this.y);
	this.ctx.lineTo(x0, y0);
	this.x = x0;
	this.y = y0;
	this.ctx.stroke();
};
kame.prototype.turn = function(rad) {
	this.rad += rad;
};
var kame0 = new kame(ctx);
```

#結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/6f64055c-1ebe-1861-6b93-ede9f32240b3.png)


#成果物

https://embed.plnkr.co/plunk/IregUJERHZZPpr5a

#tips

ng

```
<mutation else="1"/>
```

ok

```
<mutation else="1"></mutation>
```

以上。
C#でクラスライブラリを開発する時に必ずやった方が便利な設定

# はじめに
C#でクラスライブラリを開発する時に、必ずやった方が便利な設定の紹介です。
前提として、その開発したクラスライブラリのDLLファイルが、別のソリューション(.sln)から参照される場合を想定しています。
(同じソリューション内で[プロジェクト]の参照しかしない場合は、本稿の設定をしなくても問題ありません)

# デフォルト設定のままで不便なこと
開発したクラスライブラリを、デフォルト設定のままで別のソリューションから参照させた場合、以下の2つの不便なことが起きます。
ここで言う「デフォルト設定」とは、Release ビルドしたDLLファイルを参照させた場合を意味します。

## インテリセンスでコメントが表示されない
開発したクラスライブラリが、以下のようにプロパティやメソッドのコメントを記載しているとします。

```c#

	/// <summary>
	/// 人を表すクラス
	/// </summary>
	public class Person
	{
		/// <summary>
		/// 名前
		/// </summary>
		public string Name { get; set; }

		/// <summary>
		/// 指定されたメッセージで挨拶する
		/// </summary>
		/// <param name="message">メッセージ</param>
		public void Greet(string message)
		{
			Console.WriteLine(message);
		}
	}
```

しかし、そのDLLファイルを参照させた別のプロジェクトから利用する際に、メソッドのコメントがインテリセンスで表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403606/0801716f-b2ee-eb0f-e476-c889e16e2e94.png)


## デバッグ実行時にステップインができない
デバッグ実行時に、参照しているDLLのクラスのメソッドにステップインしたいと思っても、ステップインできません。

# お勧めする便利な設定
以下の設定を行うことで、両方の問題が解消できます。

## インテリセンスでコメントが表示されるようにする
-doc (C# コンパイラ オプション) を付けることで、XML ファイル内にドキュメント コメントを含めることができます。
具体的には、以下の手順でプロジェクト設定を変更すると、ビルド時にDLLファイルと同じフォルダにXMLファイルが作成されます。

1. プロジェクトの [プロパティ] ページを開きます。
2. [ビルド] タブをクリックします。
3. [XML ドキュメント ファイル] プロパティにチェックを付けます。

-doc の詳細は以下を参照ください。
[-doc (C# コンパイラ オプション) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/compiler-options/doc-compiler-option)

上記で作成したXMLファイルを、参照するDLLファイルと同じフォルダに格納しておけば、DLLファイルの読み込み時に、XMLも一緒に読み込んでくれます。その結果、下図のように、インテリセンスでコメントも表示されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403606/9044fcb1-ddcc-135b-4489-10677e1db38d.png)


## デバッグ実行時にステップインできるようにする
デバッグ実行するためには、ビルド時にDLLと一緒に生成される pdbファイルが必要になります。また、Releaseビルドのファイルではデバッグ実行できないため、Debugビルドのファイルに差し替える必要があります。
従って、DebugビルドしたDLLとpdbファイルを同じフォルダに格納し、そのDLLファイルを参照させることで、そのDLLのメソッドをステップ実行できます。

詳細は以下を参照ください。
[Visual Studio デバッガーでシンボル (.pdb) ファイルとソース ファイルの指定 (C#、C++、Visual Basic、 F#) | Microsoft Docs](https://docs.microsoft.com/ja-jp/visualstudio/debugger/specify-symbol-dot-pdb-and-source-files-in-the-visual-studio-debugger?view=vs-2019)

下図は、DLLファイルを参照したプロジェクトから、DLL内のクラスのメソッドにステップインした時の画面です。ソースコードのコメントや行番号も確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403606/d3eb4bd2-a326-f578-5d99-8acb403a5fdb.png)

なお、テスト実施やリリースの際には、Release ビルドのDLLを利用する必要があるため、別途 ReleaseビルドのDLLを別フォルダに格納しておくことをお勧めします。インストーラを作成するスクリプトなどは、ReleaseビルドのDLLを利用するように設定しておくと良いと思います。

# まとめ
DebugビルドしたDLLとXMLとpdbのファイルを同じフォルダに格納した上で、参照させると便利です。

私は上記手法を用いて [こちらのツール](https://www.lightning-review.com/) を作っています。

Twitterでも開発に役立つ情報を発信しています → [@kojimadev](https://twitter.com/kojimadev)
現場についていくための数学備忘録 #3

## 今回も集合
第3回は集合の順列と組み合わせをやっていきます。
プログラムで言うとマトリクス作るときに役立つのかな？

## 場合の数
サイコロを振ったとき、出る目の数は6通り、コイントスをしたら、表か裏がでる数は
2通り、こんな感じに、起こり得る数のことを__場合の数__と言います。

場合の数の求め方には下記があります。
- 積の法則 (それぞれの確率が同時に起こり得る場合、掛け算で求められる)
- 和の法則 (それぞれの確率が独立して起こり得る場合、足し算で求められる)

## 順列
1 ~ 5の自然数を利用して、３桁数字を何パターンあるでしょうか？ただし、1つの組み合わせに同じ数字が
入ってはいけません。
このような問題は、下記のように解くことができます。
1. 100の位に入る数字は5通り
2. 10の位に入る数字は4通り(100の位で使用した数字が使えないため)
3. 10の位に入る数字は3通り
同時に起こり得ることなので、__5 * 4 * 3 = 60__
__答えは60通り__
となります。順番を考えて並べることを、数学の世界では__順列__と言い、下記のように表すことができます。

__順列 = nPr__

上位の例ですと、nには5、rには3が入ります。
初心者によるプログラミング学習ログ 263日目

#100日チャレンジの263日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
263日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>263日目<br>・webサイト模写<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1239285034361556992?ref_src=twsrc%5Etfw">March 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Railsの慣習まとめ

# Railsの慣習まとめ
1. Controllerの名前は複数形にする
resources, resourceを使うときでも複数形にすることが推奨されています[¹](https://guides.rubyonrails.org/action_controller_overview.html#controller-naming-convention)

2. Modelの名前は名詞にする
    - *単数*のクラスが作成される
    - table名は*複数形*のスネークケース
    - factoryは*複数形*のスネークケース


3. Polomorphicの関連を作成する場合、columnには -able_type, -able_idにする[²](https://guides.rubyonrails.org/association_basics.html#polymorphic-associations)


4. concerning は-ing系[³](https://github.com/rails/rails/blob/master/activesupport/lib/active_support/core_ext/module/concerning.rb)


5. concernは-ableになります[⁴](https://github.com/rails/actionpack/lib/action_dispatch/routing/mapper.rb)
【angular】条件付きcssクラスの適用

#条件付きのcssクラス
###書き方
```
[class.クラス名]="条件"
```
###使用例
バリデータが成功したか失敗したかによってクラスを変更できる

```html:html
<input formControlName="formOne"
[class.input-invalid]="formOne.invalid"
[class.input-valid]="formOne.valid">
<!-- formOneのバリデータが失敗したらinput-invalidのクラスが追加、
成功したらinput-validのクラスが追加される -->
+
<input formControlName="formTwo"
[class.input-invalid]="formTwo.invalid"
[class.input-valid]="formTwo.valid">
<!-- formTwoのバリデータが失敗したらinput-invalidのクラスが追加、
成功したらinput-validのクラスが追加される -->
```
【Python】print出力で特定のキーワードの文字色や背景色を変える

# この記事の目的

Pythonで以下の様に, 特定の単語をハイライトして出力するための関数を作成しました.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540956/a15e7a1f-12e2-6be4-d8d0-4fa4c0b7c568.png)
ページの最後に[コード一覧](#コード一覧)があります.

# 解説

必要なライブラリはこれだけです.

```python
import re
```

まず, 文字色や背景色を変更するための辞書を作成します.
今回は```"yellow"```なら<font background-color=#FFCC00>黄色の背景色</font>, ```"red"```なら<font color="Red">赤文字</font>といったように設定してみました.

```python
color_dic = {'yellow':'\033[43m', 'red':'\033[31m', 'blue':'\033[34m', 'end':'\033[0m'}
```

次にハイライトしたいキーワードを設定します. 今回は都道府県名をキーワードに設定しました. 

```python
keyword = ["東京都", "千葉県", "埼玉県", "神奈川県", ...]
```

上で設定したキーワードをfor文で順番に検索していくことになるのですが, ここでリストの並び順が重要になってきます. というのもキーワードによっては, 別のキーワードの部分文字列になっている可能性があるためです. 例えば, 市区町村の検索で

```python
keyword = [... , "津市", "大津市", ...]
```

となっていた場合, 単純に左から単語を検索してヒットしたものに色を付けると以下のようになります. 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540956/c1381172-ca87-668f-6b94-e29d579b20d4.png)

そこで解決策として, リスト内の単語を文字数の長いものから順に並べます. 
すると「大津市」を先に検索することになるので, 上のような問題は起きません. 
以下がそのコードです. 

```python
#keyword = sorted(keyword, key=lambda x:len(x), reverse=True)
#コメントでより良い書き方をご指摘いただきました.
keyword.sort(key=len, reverse=True) 
```

最後に, 出力するテキストと, キーワード, 色指定の情報を受けて, 出力を行う関数を作成します. 

```python
def print_hl(text, keyword, color="yellow"):
    for kw in keyword:
        bef = kw
        aft = color_dic[color] + kw + color_dic["end"]
        text = re.sub(bef, aft, text)
    print(text)
```

実行例は以下の通りです. 

```python
text = "私は東京都に住んでいる"

print_hl(text, keyword)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540956/a9bd789e-3e35-771b-801c-83b7dccd628c.png)


以上！

# コード一覧

```python
import re

color_dic = {'yellow':'\033[43m', 'red':'\033[31m', 'blue':'\033[34m', 'end':'\033[0m'}

def print_hl(text, keyword, color="yellow"):
    for kw in keyword:
        bef = kw
        aft = color_dic[color] + kw + color_dic["end"]
        text = re.sub(bef, aft, text)
    print(text)

keyword = ["東京都", "千葉県", "埼玉県", "神奈川県"]
keyword.sort(key=len, reverse=True)
text = "私は東京都に住んでいる"

print_hl(text, keyword)
```


# 参考
[コンソールに色付きの出力をする方法](https://qiita.com/ironguy/items/8fb3ddadb3c4c986496d)
zsh にログインするときのうざい表示を止めたい

私の、zshにログインするときにいつもこんなアウトプットがでていて非常にうざかったので、これを何とかしようと思い立った。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470/8bc9d5dc-921b-a2f5-9d12-aa0f47539a00.png)

めっちゃうざい。

.zshrcを読んでみる。


```bash
eval "dircolors /mnt/c/Users/tsushi/fonts/dircolors-solarized/dircolors.256dark"
```

犯人はこいつや。単独で実行してもこの表示がでてきやがる。[dircolors](https://linux.die.net/man/1/dircolors)はカラーのセッティング情報をLC_COLORS 出力するものなので、こうなっていた。
実はこのラインにたどり着くまでに結構時間かかった。`grep -rl LC_COLORS`で検索していたので。`dircolors`が出力してるって知らんかったので、該当箇所が見つからなかった。

直し方は簡単で

```bash 
eval "dircolors /mnt/c/Users/tsushi/fonts/dircolors-solarized/dircolors.256dark" > /dev/null
```

そらそうやな。

* [How can I suppress all output from a command using Bash?](https://stackoverflow.com/questions/617182/how-can-i-suppress-all-output-from-a-command-using-bash)

# 余談 Windows Terminal のコピー＆ペースト

今までWindowsTerminalは、コピー＆ペーストが出来ないと思っていてつかってなかったのだが、キーバインドが変わっていると知った。`ctrl+shift+c/v`らしい。もしくはマウスで選択、クリックで可能になります。
Windows+VSCodeでのTex環境構築とEPSの図がずれることへの対処

# 概要

Windowsでの自分が考える快適なTex環境の構築方法のメモです。
特に、いつもEPSの図がずれるというところで詰むので、対処方法についてまとめました。

## Texのインストール
情報が多く落ちているので困らないかもしれませんが、Tex LiveのISO imageをダウンロードし、WinCDEmuなどでマウントし、インストールのためのバッチファイルを起動します。あとはインストーラーの指示に従うだけです。

* [TeX LiveのISO image](http://mirror.las.iastate.edu/tex-archive/systems/texlive/Images/)

* [WinCDEmu](http://wincdemu.sysprogs.org/)


## VSCodeの設定
Latex-Workshopの拡張機能をインストールし、
ファイル＞基本設定＞設定からJSONファイルの編集画面に移り、以下の設定を追加します。


```
"latex-workshop.latex.recipes": [
      {
          "name": "make_ptex2pdf",
          "tools": [
              "ptex2pdf"
          ]
      }
  ],
  "latex-workshop.latex.tools": [
      {
          "name": "ptex2pdf",
          "command": "ptex2pdf",
          "args": [
              "-l",
              "-ot",
              "-kanji=utf8 -synctex=1",
              "%DOC%"
          ]
      }
  ]
```


ここまでやると、Texの環境が構築できており、.texファイルを開いて任意の個所を右クリック>`Build LaTeX project` でビルドされます。
右クリック>`Latex workshop`>`View PDF file in new tab`で生成されたPDFファイルを見ながらTexを編集できます。

## EPSの図がずれることへの対処
PDFに載せたい図をパワーポイントで作成し、EPSプリンタでEPSファイルに変換し、GSviewでBounding Boxを設定して図の載せたい領域を設定する人も多いかと思うのですが、
Windows環境では、EPSの図がずれることがあります。昔構築した環境では問題なくできていましたが、最近Texをインストールすると毎回、図がずれるようになりました。
これはTexがEPSファイルのBounding Boxを無視してしまうからです。
解消方法としては以下2つの情報がネット上にはありますが、私の場合はうまくいきませんでした。


* `-dEPSCrop`オプションを入れてepsからpdfに変換する。

```
ps2pdf -dEPSCrop input.eps output.pdf
```

* .texファイルのパッケージのインクルード方法の記述を以下のように書く。

```
\usepackage[dvipdfmx]{graphicx}
```

これらの対処を行ってもBounding Boxが無視されるため、私はEPSファイル自体をトリミングして解消を行いました。
そのためのシェルスクリプトを作成しましたので以下からダウンロードし、EPSファイルが入っているフォルダに入れて、Cygwin, Windows power shellなどで実行してください。

* [cropEPS](https://github.com/takahirosuzuki-0/cropEPS)

実行方法は以下の通りです。

* `./cropEPS XXX` : 同じフォルダにあるXXX.epsをトリミングします。

* `./cropEPS all` : 同じフォルダにあるすべてのepsファイルをトリミングします。

ここまで説明しましたが、過去のEPSで作った図の資産がない人は、パワーポイントからEPSにせず、直接PDFを作成し、PDFをトリミングしてTexに張り付けるのが良いと思います。PDFをトリミングするフリーソフトはいくつかありますが、上と同様なシェルスクリプトを作成したので使って下さい。

* [cropPDF](https://github.com/takahirosuzuki-0/cropPDF)
docker desktop for windowsでubuntu18.04環境を構築する　後編

#【概要】
WindowsにDocker環境を構築する際のメモです。
専門用語はできるだけ使わない方向でいきます。
当記事は後編です。下記の目標の３，４の内容です。

#【環境】
docker desktop for windows2.2.0.3
Windows 10 Enterprise または Pro

#【目標】
<前編>
１：Dockerをローカル環境で起動する。
２：Ubuntu18.04のコンテナを作成して操作する。

#####<後編>
３：PC内の特定のフォルダ内のファイルをコンテナ内に同期する。(マウント)
４：PCがコンテナ内のUbuntuと通信を行う際のポート番号を指定する。

#【実行】
###３：PC内の特定のフォルダ内のファイルをコンテナ内に同期する。(マウント)
Windowsのフォルダをコンテナ内部のディレクトリマウントする場合コンテナを作成するときのコマンドにひと手間加える必要があります。一度作成したコンテナを後からマウントすることは(たぶん)できないため注意してください。

・c/Users/XXXXXX/docker/ubuntu1804/mountのフォルダを
ubuntuの/var/testへマウントする場合

```docker run -it -v /C//Users/XXXXXX/docker/ubuntu1804/mount:/var/test --name ubuntu_container_02 ubuntu:18.04```

#####※注意点
・Windows上のパスの書き方が少し特殊なので記述ミスをしやすい
・マウント先の/var/test以下のディレクトリはWindowsのmountフォルダに上書きされ消滅する


#####マウントすると嬉しい点
・ファイル管理・整理をGUIで行える

#####マウントしたあと注意すべき点
・Windows上でファイルを開いたり編集して保存すると文字コードやファイルの権限関係が変わってしまうことがある

###４：PCがコンテナ内のUbuntuと通信を行う際のポート番号を指定する。
Windowsとコンテナ内の環境間で通信を行う場合、お互いのポート番号を指定してやるとアプリ間通信をする場合などに幸せになれます。

これもコンテナ作成時にひと手間加えたコマンドを入れる必要があり、コンテナを作成した後にポート番号の設定を行うことはできないため注意が必要です。

Windowsのポート8080とubuntuのポート18080を間口に設定する場合
```docker run -it -p 8080:18080 --name ubuntu_container_03 ubuntu:18.04```

これでapacheなどを使用する場合に相互通信できるようになります。

###あとがき
浅い知識です書いた記事ですが、どなたかの手助けになることを祈ります。

書き終わって気が付きましたがコンテナを他のパソコンへ移植する方法を書いてませんでした。これもどこかのタイミングで書こうかと思います。

<前編>
https://qiita.com/itoumasaru6/items/fc81d963d563923a6adc

<コンテナ移植編>
VOCA(Voice Operated Character Animation)のメモ

audio と, FLAME テンプレートモデルから, よろしく 3D speech animation を生成する

https://voca.is.tue.mpg.de/

の推論を動かしてみます.

term of use, ライセンスなどを確認し, 同意できる場合にダウンロードします.

以下はライセンスなど同意できた場合です.

## インストールなど

README に従えば, 特に問題なくいけます.


## デモの実行

デモスクリプトでは, OpenGL でレンダーして, ffmpeg で動画を作ってくれます.

サーバで実行だと OpenGL がうまくいきません. 手元 PC で動かすのがよいでしょう.

連番 wavefront .obj を吐くことはできるので, .obj だけ吐いて, 必要であればスクリプトを書き換えて, NanoRT https://qiita.com/syoyo/items/1aae159f9b262fbd4aa3 や Embree https://www.embree.org/ で自前 CPU raytracer などでレンダリングするなども手です.

また, ffmpeg が, Ubuntu 16.04 の apt で入る ffmpeg では aac が experimental でうまく生成されませんでした. ffmpeg を最新にしたり, 別の audio codec を指定するか, もしくはとりえずは audio off にして動画生成しましょう.

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ねんがんの VOCA(Voice Oriented Character Animation)の推論に成功したぞ!!!! 🎉🎉🎉🎉🎉🎉🎉🎉✌️✌️✌️✌️✌️✌️✌️✌️😍😍😍😍😍😍😍💪💪💪💪💪💪💪🙏🙏🙏🙏🙏🙏🙏 &gt; <a href="https://t.co/ZuS1bxhVDd">https://t.co/ZuS1bxhVDd</a> <a href="https://t.co/empbZxlMKJ">pic.twitter.com/empbZxlMKJ</a></p>&mdash; Syoyo Fujita 🌸 RayWa(Ray and Peace) (@syoyo) <a href="https://twitter.com/syoyo/status/1239238012128518145?ref_src=twsrc%5Etfw">March 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

## TODO

* [ ] eyeblink, head pose animation を付与する機能を試す
* [ ] deepspeech モデルの最新で試す.
* [ ] RingNet https://qiita.com/syoyo/items/3329bcbb5b7eff5c3e7b で生成した FLAME パラメータで試す
* [ ] 学習をためす(70GB ものデータセット公開してくれてます! 全部きちんとダウンロードするには時間かかりそうですが...(ときどきダウンロードが切れるため))
MkDocsを使った簡単なWebサイト作成

# 概要


MkDocsというツールを使うことで、簡単にテキストベースのWebサイトの作成ができます。

ちょっとした研究者個人のサイトや、技術系サイトの作成にお勧めです。

## MkDocsの特徴

* Markdown（テキスト+α程度の簡単な言語の記述）で、Webサイトに必要なファイル一式が作れる。HTMLを直にいじらなくてよい。

* 既存の良さそうなデザインが使える。Material for MkDocksを使うことで、Googleが提唱しているマテリアルデザインを使うことができる。

## 環境構築

pythonの使える環境があれば使えます。私はWindows上でpythonをインストールし、VSCodeにPython for VSCodeの拡張機能をインストールして、VSCodeのターミナルで以下のコマンドを実行しました。

```
pip3 install mkdocs
pip3 install mkdocs-material
```

その後、私の環境では何故かmkdocsのパスが通ってなかったので以下の場所を設定しました。

C:\Users\USERNAME\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.7_qbz5n2kfra8p0\LocalCache\local-packages\Python37\Scripts

## Webサイトの作成・編集

新規プロジェクトは以下のコマンドで作れます。

```
mkdocs new test
```

そのまま作成されたファイルを開いて編集していきます。

```
code mkdocs.yml
code .\docs\index.md
```

マテリアルデザインを使いたい場合は以下の行をymlに追加します。

```
theme:
  name: 'material'
```

デザインを少し変えたい場合は[ここ](https://squidfunk.github.io/mkdocs-material/getting-started/)を参照してymlを編集していきます。


mdも自由に編集していきます。
以下のコマンドをターミナルに入力し、ブラウザで`http://127.0.0.1:8000`を開くと、作成しているサイトをファイル更新ごとに確認していくことができます。

```
mkdocs serve
```

![screen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/3b788214-8c76-b277-813b-942f964c3f3e.png)


変更が完了したらHTML, cssなどのファイル一式を生成します。

```
mkdocs build
```
プロジェクト配下にsiteというフォルダが生成され、これをWebサーバに置けばWebサイトの作成が完了です。
また、`mkdocs gh-deploy`のコマンドでGitHub Pagesにサイトを構築することもできるようです。
VSCodeのpyhton環境（pyenv）を整える（MacOS, flake8+autopep8）

## 環境
- pyenvで通常は3系を使用
- パッケージ管理：pip
- Linterにはpylintではなくflake8を使用．autopep8と組み合わせて使います．

```
$ pyenv global 3.7.3
```
などと，pyenvの設定が済んでいることを前提とします．
ちなみにpyenvにインストールしているpythonとbrewなどでインストールするsystem側のpython（brew install pythonでインストールされる方）は別ものなので，そこは意識しておいたほうが良いと思います．

## VSCodeに正しくpythonを認識させる
ターミナル側ではpyenvにインストールしているpythonがglobalに設定されていたとしても，VSCode側で開いたとき，system側のpythonを参照してしまうという問題があります．
settings.jsonに，`$ which python`で表示されるpyenvのpythonのパスを追記．

```
"python.pythonPath": "/Users/ユーザ名/.pyenv/shims/python",
```

## Linterの設定
こちらの記事を参考に設定しました．元記事では"autopep8"に""が入っていませんが，僕の環境では""付きでないとエラーになりました．

- [https://qiita.com/psychoroid/items/2c2acc06c900d2c0c8cb VSCodeのPython開発環境でpylintの代わりにflake8を導入し自動整形を設定する - Qiita]
知らなかったnumpyの関数まとめ

```
$ python
>>> import numpy as np
```

# maximum

```
>>> np.maximum([1,2], [3,1]) # array([3, 2])
>>> np.maximum(0, [-1, 2, -2, 4]) # array([0, 2, 0, 4])
```

# argmax

```
>>> np.argmax([1,3,4,2]) # 2
```

# max

```
>>> a = np.array([[1,4],[2,3]])
>>> np.max(a, axis=0) # array([2, 4])
>>> np.max(a, axis=1) # array([4, 3])
```

# diagonal

```
>>> a = np.arange(9).reshape(3,3) # array([[0, 1, 2], [3, 4, 5], [6, 7, 8]])
>>> a.diagonal() # array([0, 4, 8])
>>> np.fliplr(a).diagonal() # array([2, 4, 6])
```

# allclose

行列が近似的に等しいか調べる

# where

```
>>> test = np.array([True, False])
>>> np.where(test, 1, 2) # array([1, 2])
```
Jetson nano セットアップとUSBカメラを使った画像認識 (YOLO) の動作

# Jetson nano セットアップとUSBカメラを使った画像認識 (YOLO) の動作

Jetson nanoはNVIDIAのGPUが載った、Raspberry Piサイズのボードです。

簡単な設定でUbuntuとNVIDIA Driver, CUDAが整った環境が揃えられるので、CPUでは重すぎて動かないディープラーニングなどを個人で少し試すのによいデバイスかと思います。

試しにUSBカメラを繋いでYoloを動かしました。

## 使用したハードウェア

* Jetson Nano Developer Kit

* 128 GB Micro SD カード

* 電源アダプタ 5V/4A

* USBカメラ

* USB WiFiモジュール

* ジャンパーピン 

J48にジャンパーピンを接続するとDCジャック電源供給に切り替わります。デフォルトのUSB電源供給だと処理負荷が増えた際に安定動作しません。

![jetson.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/eeb61ddc-37a4-659e-032c-66ee30748f17.jpeg)


## 初期セットアップ

Wifiで接続し、リモートデスクトップでJetson nanoを操作する環境を作ります。

まず、OSイメージは、[NVIDIAのサイト](https://developer.nvidia.com/embedded/downloads)でJetson nano専用のもの (Ubuntu 18.04 LTS) が配布されているので、Jetson Nano Developer Kit SD Card Imageというファイルをダウンロードします。

SDカードへのイメージの書き込みは[balenaEtcher](https://www.balena.io/etcher/)などで行います。balenaEtcherの操作はイメージファイルを選択して”Flash”ボタンをクリックするのみです。
SDカードを挿入してJetson nanoを初回にブートした際は、通常のUbuntuインストール時と同様の設定を行います。

リモートデスクトップの設定に関しては[ここ](https://qiita.com/iwatake2222/items/a3bd8d0527dec431ef0f)のサイト通りに進めました。

## 画像認識 (Yolo) の動作
Yoloの動作にOpenCVが必要なのでインストールします。
私は以下のJetson nano用スクリプトを使いました。

```
git clone https://github.com/mdegans/nano_build_opencv
cd nano_build_opencv
./build_opencv.sh $1
```

次にYoloをダウンロードします。

```
git clone https://github.com/pjreddie/darknet
cd darknet
```

Makefileを次のように変更します。

```
GPU=1
CUDNN=1
OPENCV=1
```

makeと実行をして、画像認識が動きます。1.5 fps程度です。

```
make
./darknet detector demo cfg/coco.data cfg/yolov3.cfg yolov3.weights
```

![demo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/c2588ef9-5844-a131-5aeb-6502523bc6e9.jpeg)



長時間動かすとフリーズします。精度は落ちますが、以下の演算量の低い実行方法もあります。

```
./darknet detector demo cfg/coco.data cfg/yolov3-tiny.cfg yolov3-tiny.weights
```

Jetson nano用のサンプルでもUSBカメラを使った画像認識ができます。

```
cd jetson-inference/build/aarch64/bin/
./imagenet-camera googlenet --cmera /dev/video0
```
docker desktop for windowsでubuntu18.04環境を構築する　前編

#【概要】
WindowsにDocker環境を構築する際のメモです。
専門用語はできるだけ使わない方向でいきます。
当記事は前編です。下記の目標の１，２までの内容です。

#【環境】
docker desktop for windows2.2.0.3
Windows 10 Enterprise または Pro
※「Windows 10 homeではHyper-V ロールはインストールできません」とのこと

#【目標】
#####<前編>
１：Dockerをローカル環境で起動する。
２：Ubuntu18.04のコンテナを作成して操作する。

<後編>
３：PC内の特定のフォルダ内のファイルをコンテナ内に同期する。(マウント)
４：PCがコンテナ内のUbuntuと通信を行う際のポート番号を指定する。

#【Dockerについて軽く】
---Dockerがなぜ便利だといわれるか---
例えば家のパソコンのpythonで開発しているの環境を、他のパソコンへそのままコピーしたい状況になったとします。
まずpythonのインストールが必要ですね。
エディターも欲しいです。
外部のライブラリ、状況によってはApacheなどの外部ツールとそれを有効化するファイル等。OSによってはディレクトリとファイルの権限の設定もそろえる必要があります。
自分が構築先のパソコンを触ることができない場合、インストーラーなどを作成する必要などもあります。非常に面倒で時間がかかります。

それらを含めた同じ環境を用意するための工数をDockerは解決できます。
Dcokerのコンテナ内で構築した環境は、Dockerが導入されている他の環境へコピーできるからです。


#【実行】
###１：Dockerをローカル環境で起動する。
#####事前準備
前準備としてHyper-Vを有効にする必要があります。
Hyper-VはWindows上で仮想マシンを立ち上げる際に有効にしておく必要があります。

下記リンクの「設定で Hyper-V ロールを有効にする」までを実行します。　
https://docs.microsoft.com/ja-jp/virtualization/hyper-v-on-windows/quick-start/enable-hyper-v#enable-hyper-v-using-powershell

#####dockerのインストール
下記リンク先でアカウント作成し、ダウンロードページで「Docker Desktop for Windows」をダウンロードします。
https://hub.docker.com/

インストーラを完了し、ログアウトします。

ちゃんとインストールされたか確認します。
power shellを起動し、dockerと入力しenterキーを押し,
dockerのコマンドが表示されていればインストール完了です。


###２：Ubuntu18.04のコンテナを作成して操作する。
Docker用のubuntuのver:18.04を使えるようにします。
```docker pull ubuntu:18.04```
これでイメージを自分のDockerに「イメージ」を導入できます。

イメージ＝コンテナを作成するためのもの。例えるならクッキーの金型です。イメージによってくりぬかれたものがコンテナです。

```docker run -it --name ubuntu_container_01 ubuntu:18.04```
これでubuntu18.04のコンテナをubuntu_container_01という名前で作成できます。

コンテナを起動します。
まずは現在起動しているコンテナを確認します。
```docker ps```
起動したいコンテナの<NAMES>を確認します。

コンテナubuntu18.04のrootへ入るためのコマンド
```docker exec -it <NAMES> /bin/bash```

これでコンテナの開発環境に入ることができます。
ubuntuを操作したことのある人なら見覚えのある光景かと思います。
そのままだとvimやsudoなども未インストールのため一から環境を整えていきましょう。

###おまけ：他のパソコンへ環境をコピーする流れ
をざっくり記述します。
・自分のパソコンへイメージを引っ張ってくる
・イメージからコンテナを作成　
・コンテナ内の環境で開発
・開発済みコンテナでイメージを作成
・イメージからtarファイルを作成
・tarファイルを他のパソコンへコピー
・tarファイルからイメージを作成　
・イメージから開発環境を作成


<後半へ続く>
https://qiita.com/itoumasaru6/items/0ea00015ef8b9ed6facc
React render内の条件分岐

Reactでのrender内での出し分けをする条件分岐の書き方を学んだのでメモ。

## 三項演算子
```js
const testBooloean = true;

{testBooloean ? <div>testBooloean === true;</div> : <div>testBooloean === false;</div>}
```

**やってみた**
<img width="1302" alt="スクリーンショット 2020-03-15 1.28.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/3fbe423a-cf5d-83ef-3f17-1b972222a8ad.png">


## && の書き方
```js
const testBooloean = true;

 {testBooloean && <div>testBooloean === true; </div>}
```
**やってみた**
<img width="1336" alt="スクリーンショット 2020-03-15 1.31.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/651d1e13-4303-f22e-88f1-3cdfdb4bae1d.png">


**このとき注意すること！**
比較する値(今回でいうtestBooloean)には必ず**Boolean**の値が入るようにしなきゃいけないです。

例えば...

```js
const arr = [];

 {arr.length && <div>test</div>}
```

**結果**
<img width="1276" alt="スクリーンショット 2020-03-15 2.11.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/a25e9519-0e6a-a97b-a8aa-f4e23c11bdc1.png">

arr = [];なのになぜか「０」が表示されてしまいます。

arrの配列の中が空の場合...という条件にしたい場合は

```js
const arr = [];

// Booleanになるようにしましょう
 {!!arr.length && <div>test</div>};
```
**結果**
<img width="1330" alt="スクリーンショット 2020-03-15 2.14.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/7bd80225-709a-2e6a-4392-50e76d6cdc66.png">
Vapor3.1.10で Vapor Docs の Getting Started を見てPublicイメージを表示する

#Vapor
[前回](https://qiita.com/ArimitsuIshii/items/f29a24fd15e2a511dcf0)はVaporのプロジェクトで「Hello, World!」出ましたが、ファイル構成とかまったくわかっていなかったので、[Docs](https://docs.vapor.codes/3.0/getting-started/hello-world/)を見てみました。
※Docsは3.0のものです。

#わかっていること

* プロジェクト下で「vapor build」でビルドできる
* 「vapor run serve」で8080ポートでサーバー開始
* Ctrl+Cで停止　（コマンドとか無いのかな？）

くらい・・・

#Folder Structure
とりあえず知りたかったフォルダー構成
.
├── Public
├── Sources
│   ├── App
│   │   ├── Controllers
│   │   ├── Models
│   │   ├── boot.swift
│   │   ├── configure.swift
│   │   └── routes.swift
│   └── Run
│       └── main.swift
├── Tests
│   └── AppTests
└── Package.swift

###Public
アプリケーションロジックをスキップしてすぐにファイルを返す。イメージとかスタイルシートを置くところ。

っと、いうことで

#イメージを表示したい
configure.swiftでFileMiddlewareのコメント外せば動きそうなのでファイルをviで修正

```
middlewares.use(FileMiddleware.self) // Serves files from `Public/` directory
```

イメージファイルは手持ちのファイルを使いたいなぁと思い、親のWindows10からUbuntu内のファイルを探しました。

```
C:\Users\ユーザー名\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs\home\asteria\vapor\Hello\Public
```

こんなところにあるのですね。
ここにlogo.jpgファイルをコピーします。
![logo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/34429fc8-cf52-c13c-27d1-d26cbfb23ec1.jpeg)

早速ブラウザからアクセス！
![notfound.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/fc1bd818-03c7-1584-6776-96e982ea857c.png)
あれ？無いみたい。

「<font color="Tomato">WindowsからWSL/Linuxのファイルシステムへアクセスする行為は推奨されておらず、最悪の場合、ファイルの消失やデータの破損・・・</font>」ってヤバすぎる情報を発見。
最近はコマンド「explorer.exe .」でアクセスするようです。

```
explorer.exe .
```

エクスプローラーが開いてファイルが見えました。
ユーザーは「asteria」を使っています。
![expror.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/cca2a906-5afa-1d46-4bfa-6ce3d0f937da.png)
再度logo.jpgファイルをコピーします。
![narabete.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/6a0f730e-cbc5-092d-26f0-6e80cf3cb794.png)
Ubuntuの方でもすぐに見えましたが「logo.jpg:Zone.Identigier」も出来てます。（※後で見たらエクスプローラーでも見えました）

```
[ZoneTransfer]
ZoneId=3
ReferrerUrl=https://www.asteria.com/jp/
HostUrl=https://www.asteria.com/jp/wp-content/themes/theme_infoteria/img/logo.jpg?ver=20181001
```

いつも出てくるのかな？
素直にwgetの方が速かったのかと思いつつ、Vaporを起動してブラウザでアクセスしてみます。

まだ無い。
![notfound.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/8b49499a-5c29-ea25-ade0-360cc2dfe8b2.png)

もしかしてビルドか？とビルドをかけて再実行します。

```
vapor build
vapor run serve
```

動いた！
![logook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/ab82a6e5-0336-5364-de40-a6d25bcbc7af.png)

#わかったこと
設定ファイル「configure.swift」を編集したのだからビルドが必要だという単純な事でした。サーバー止めるだけではダメです。