OmniAICreator/Qiita-1.07M huggingface dataset:
Reactを使ってWebサービスを作るための基礎２

Reactの基礎を学ぶためのメモ．
React Componentを作る上で理解しておかなければならない基本を理解する．

#React Componentの作り方　その１
##JSXについて
Reactにおいて必須なJSXは，JavaScript上でHTMLのコードを使えるJavaScriptの拡張構文．
BabelによってJavaScriptに変換される．

###```CSS Style```について
JSX内でスタイルを渡す場合には，キャメルケースで記述する．

```js:呼び出し側
const rectStyle = {
    background: bgcolor,
    display: 'table-cell',
    border: '1px #000 solid',
    fontSize: 20,
    width: 30,
    height: 30,
    textAlign: 'center',
    verticalAlign: 'center',
  }
```
```js:Rect.js
<div style={rectStyle} />
//JSX内でJSを記述する場合は{}
```

##属性値について
新規に作成したReact Componentには，通常のDOMと同様に属性値を設定することができる．

```js:呼び出し側
<Rect num={1} bgcolor='#e02020' />
```

ここで設定した属性値は，，コンポーネント生成時（constructor時点)にpropsオブジェクト内に格納されて，React Componentに渡される．
コンポーネント内では，this.propsまたは各種ライフサイクルメソッドの引数から参照する．

```js:Rect.js
render() {
  const { bgcolor } = this.props
```

また，defaultPropsを用いることで属性値がない場合のデフォルトの属性値を設定することが可能．

```js:Rect.js
static defaultProps = {
  num: 0,
  bgcolor: '#808080',
}
```

###```props.children```について
React Component呼び出し時に入れ子にされたDOMこ要素は```props.children```に格納される．

```js:呼び出し側
<NumberPlate><i>{this.state.num}</i></NumberPlate>
```
```js:NumberPlate
//<i>{this.state.num}</i>がprops.childrenに格納される
<span>{props.children}</span>
```

###```イベントハンドリング```について
基本的な[addEventListener]('https://reactjs.org/docs/events.html')のイベントハンドリングは使用可能．
このとき書き方はキャメルケース表記．

```js:呼び出し側
  <div onClick={() => this.countUp()}>
```

##コンポーネントのstateについて
コンポーネント内部で値を保持したい場合は，stateオブジェクトという特殊なオブジェクトを用いる．
中身のパラメータに関しては自由に宣言可能．

```js:Rect.js
this.state = { number: this.props.num }
```
Reactには，stateオブジェクトのパラメータを更新するために```setState()```メソッドが用意されている．
この```setState()```メソッドによりstateが更新されるのだが，無限ループになるためrenderメソッド内で呼び出してはいけない．

```js:Rect.js
  countUp (num) {
    // stateを更新→renderメソッドが呼ばれ、再描画される
    this.setState({ number : num + 1 })
  }

  render () {
     return (
      <div onClick={(e)=> this.countUp(this.state.number)}>
     )
  }
```
GCPデプロイ時エラーの解決方法

#はじめに
GCPでデプロイしようと思ったらエラーを吐かれて、結構悩まされた後解決したので書きました。

#エラー内容

```
$ gcloud app deploy
ERROR: (gcloud.app.deploy) An error occurred while parsing file:
[/home/username/projectname/app.yaml]
Unknown url handler type.
<URLMap
    secure=default
    static_files=None
    application_readable=None
    auth_fail_action=redirect
    require_matching_file=None
    static_dir=None
    redirect_http_response_code=None
    http_headers=None
    url=/
runtime: python27
    script=None
    upload=None
    api_endpoint=None
    expiration=None
    position=None
    login=optional
    mime_type=None
    >
```

#解決策

###変更前
``` app.yaml
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
 static_files: mail/index.html
 upload: mail/index.html
- url: /
static_dir: mail
```

###変更後
``` app.yaml
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: dirname/index.html
  upload: dirname/index.html
- url: /
  static_dir: dirname
```
お気づきでしょうか、、？ そう、6,7,9行目の最初にスペースを追加しただけです。たったこれだけのためにあんなに悩まされたのかチクショウ！ yamlはこういうところめんどくさいですね。

※GCPにアップロードしたapp.yamlファイルを直接編集するか、ローカルのapp.yamlファイルを編集した後に再アップロードすることをお忘れなく。

#おわりに
GCPデプロイの手順についてはこちらのサイトがおそらく一番わかりやすいかと思います。
https://medium.com/@karthiksagar/how-to-deploy-angular-8-app-on-google-cloud-platform-gcp-cdd79e5cc5cf
[Vuejs x Firebase] Covid-19を題材にタイピングゲームを作った話

# はじめに

久しぶりの投稿です。今回は渦中のコロナウイルスを題材に作ったタイピングゲームについてまとめたいと思います。

## 作った理由

**知識向上 x タイピングスキルアップ！**

- このゲームを通じてコロナウイルスへの関心を深め、また知識、対処方法を学んでもらいたい
- ステイホーム期間でタイピングスキルをあげたい人に貢献したい

という想いで作りました。

# 概要

## 開発期間

- 2020/4/25 〜 2020/4/28

## 成果物

- タイプで学ぼうコロナ対策
    - URL: https://typing-game-covid-19.web.app

![スクリーンショット 2020-04-29 11.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58014/563a7e95-5d01-f40f-4122-c7eb46b1d742.png)




## 技術

### フロントエンド

- JSフレームワーク: [VueJS](https://jp.vuejs.org/index.html)
- スタイル: [Vuetify](https://vuetifyjs.com/ja/) 

### バックエンド

- サービス: [Firebase](https://firebase.google.com/)
- データストア: [Cloud Firestore](https://firebase.google.com/docs/firestore?hl=ja)

# 開発における感想

## Firebaseがすごい楽

### ビルドしてホストするだけ

今回のゲームはタイピングゲームということでバックエンドは充実していなくても良いというのがあります。とりあえずVuejsプロジェクトをホスティングできてちょっとしたデータ保存ができればいい、ということでFirebaseを選択しました。

ただ単にVuejsプロジェクトをビルドしてホスティングすればいいだけなのでとても楽でした。

### Cloud Firestore

Vuejsから直接データストアであるCloud Firestoreにアクセスできるというのもとても楽でした。

Cloud Firestoreはちょっと癖があって、特に集計関数の使用時に爆発的に読み取り回数が増えてしまうというところでちょっと工夫が必要でした。最終的に読み取り回数を最小に抑えることができたと思います。

リアルタイムにデータ取得ができる `firesql/rx`も面白くていいなと思いました。

### SSL対応

ホスティングサービスならすでに当たり前になっているのですが最初からSSL対応が入ってるのもいいですね。AWSなどALB設定でいけるのとかもありますが地味に面倒なので。そこらへんも省略できるのはありがたいです。

## 苦労したところはデザイン

いつもなのですがデザイン面は苦労します。

今回はVueJSをしました。理由は仕事でも使っていて使い慣れているからです。

### Vuetify

VueJSということでスタイルはVuetifyを採用したのですが、これも使いやすかったです。ドキュメントも充実していますし。

### アニメーションはkeyframes

アニメーションは全てCSSの `keyframes`を使っています。今回初めて使ったので手探りでした。でも作っているうちに理解できてきました。やっぱり何か作るといろんなことを学べるのがいいですね。

CSSのアニメーションはすごい楽だということがわかりました。

# ソーシャル性

今ってソーシャルソーシャルって、他の人との繋がりを重視するものが流行ったりしてますよね。ということでこのタイピングにも他ユーザとの繋がりを持てるように工夫がなされています。

## 見える化

サイトのトップページにトータルプレイ回数とトータルタイプ回数などが見えるようになっています。しかもリアルタイムに更新されます。プレイしなくてもこの数字がどんどん積み上がっていくのを見るだけでも楽しかったりします。

![スクリーンショット 2020-04-29 10.59.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58014/efc4e11e-94a1-f009-30bd-017eaa32e0b3.png)

## Twitter投稿

ゲーム結果をTwitterに投稿できるようにしました。これで少しずつでも繋がりができてくれたらなと思っています。

![スクリーンショット 2020-04-29 11.05.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58014/ff0fce38-8357-6065-1c26-a7383d639f61.png)


# 反響

## 面白い！と言ってもらえるのが嬉しい

公開したのが昨日（2020/4/28）なので今のところは大きな反響はないです。でも知人にプレイしてもらったところ、「面白い！」という声をいただきました。こういうのは作り手としては嬉しいですね。

これからちょっとずつでもユーザが増えてくれればと思います。

# さいごに

やっぱりこういうのを作るのは楽しいです。いろんなことを学べますし、人との繋がりもできるし、自分の作品として残るのも嬉しいですね。

これからも色々と作っていこうと思います。
【Java】 ArrayList→配列変換ではサイズを指定するべきなのか


##配列のサイズを指定する場合
```java:ListToArray.java
ArrayList<String> arrayList = new ArrayList<String>();
for(int i=0; i < 10000000;i++) { //　←　1億
	arrayList.add("A");
}
long array1Start = System.currentTimeMillis();
arrayList.toArray(new String[arrayList.size()]);              // ←←ここ
long array1End = System.currentTimeMillis();
System.out.println("処理時間：" + (array1End - array1Start) + " ms");
```
###結果
```
処理時間：3179 ms
```

##配列のサイズを指定しない場合
```java:ListToArray.java
ArrayList<String> arrayList = new ArrayList<String>();
for(int i=0; i < 100000000;i++) { //　←　1億
	arrayList.add("A");
}
long array2Start = System.currentTimeMillis();
arrayList.toArray(new String[0]);              // ←←ここ
long array2End = System.currentTimeMillis();
System.out.println("処理時間：" + (array2End - array2Start) + " ms");
```
###結果
```
処理時間：3047 ms
```
え、ほぼ同じ・・・
その時のマシンの状況によるが、ほぼ同じ結果になる

##評価する
####パフォーマンス
　処理時間はほぼ同じ
　参照元をコピーするだけだからか。
####可読性
```java
arrayList.toArray(new String[arrayList.size()]); //明示的でわかりやすい
arrayList.toArray(new String[0]);                //0の意味を考えてしまう
```
##結論
パフォーマンスはほぼ変わらないが、
可読性の観点でサイズを指定するべき
vscodeで変数名の@やメソッド名の!、?を含んでダブルクリックで選択したい

環境 mac

~/Library/Application Support/Code/User/settings.json
を開いて次を追記する。

```
"editor.wordSeparators": "`~#%^&*()-=+[{]}\\|;'\",.<>/",
```

もしくは、「command + ,」 でsettingを開いて窓に「wordSeparators」と入れて検索し出てきた設定から"@"や"!"や"?"や":"を抜く。
設定はリセットできるので、うまくやろう。


参考
[Make Visual Studio Code to correctly select PHP variables on double\-click \| Igor Kromin](https://www.igorkromin.net/index.php/2018/04/12/make-visual-studio-code-to-correctly-select-php-variables-on-double-click/)

関連
[phper用 vscodeでダブルクリックで、$を含んで変数を選択したい \- Qiita](https://qiita.com/yoshinyan/items/fe693a3e977f6f4a2fec)
中学校の委員分け（NetworkX版）

## 問題

生徒の希望を元に「クラスの委員を割り当てる問題」をマッチング問題として解きます。

## 参考

- 元記事「[中学校の委員分けを最小費用流で最適化してみた話](https://qiita.com/defineprogram/items/b8eb70bb92101241703b)」：[最小費用流問題](https://qiita.com/SaitoTsutomu/items/41d625df63f1946c7216)として求解
- 前記事「[中学校の委員分け](https://qiita.com/SaitoTsutomu/items/9075a3f9b76e1abf4866)」：混合整数最適化として求解

##  方針

今回は、マッチング問題として解きます。
そのためには、委員の必要数がn人のときに、その委員のノードをn個に増やす必要があります。
また、[最大重み最大マッチング問題](https://qiita.com/SaitoTsutomu/items/bbebc69ebc2549b0d5d2)にするので、重みwを「40 - w」に変換します。

## 解いてみよう

```py
import networkx as nx

lst = [['タプリス', '風紀委員', 10], ['青葉', '学級代表', 10], ['かぐや', '風紀委員', 10],
       ['チノ', '学級代表', 10], ['ミラ', '風紀委員', 10],
       ['タプリス', '学級代表', 30], ['青葉', '図書委員', 30], ['かぐや', '図書委員', 30],
       ['チノ', '風紀委員', 30], ['ミラ', '学級代表', 30]]
need = {"学級代表": 1, "図書委員": 2, "風紀委員": 2}
g = nx.Graph()
lst2 = [(s, f'{c}{i}', 40 - w) for s, c, w in lst for i in range(need[c])]
g.add_weighted_edges_from(lst2)
print(nx.max_weight_matching(g, maxcardinality=True))
```

出力

```
{('かぐや', '図書委員1'),
 ('チノ', '学級代表0'),
 ('図書委員0', '青葉'),
 ('風紀委員0', 'ミラ'),
 ('風紀委員1', 'タプリス')}
```

元記事や前記事と同じ解が出ました。

## 補足

マッチングは社会の色々なところで使われます。たとえば、下記のマッチングを研究している先生のサイトに紹介されています（今回利用した[重みマッチング](https://qiita.com/SaitoTsutomu/items/bbebc69ebc2549b0d5d2)ではなく[安定マッチング](https://qiita.com/SaitoTsutomu/items/2ec5f7626054f4b4de63)ですが）。

参考：https://www.nii.ac.jp/faculty/informatics/yokoi_yu/

今回、`networkx.max_weight_matching`（エドモンズ法）で解きましたが、現実問題を解くときは、数理最適化モデルの方が柔軟にモデルを作成できますし、[高速に計算できる](https://qiita.com/SaitoTsutomu/items/7fd199a95d78a6f3b741)でしょう。
ThanksBoard ‬‪~コロナと闘う全ての人へ~　医療従事者応援サイト

#はじめに
Twitter、FaceBook、その他媒体から、ご覧いただきありがとうございます。
早速ですが、感謝・応援しましょう！
以下、ご覧くださ〜〜い！宜しくお願いします！

# ‪Thanks Board ‬ ‪~コロナと闘う全ての人へ~

最前線でコロナと闘い続けている‬‪医療従事者の方々への感謝・応援サイトを作りました！
‪皆さんのお力を貸して頂けませんか?( ＾∀＾)
‪
[こちらをクリック！](http://18.177.93.163/)


## Mind ~気持ち~
‪今、自分にできることは大したことはありません。‬

1人でも多くの医療従事者の方々が、このサイトを見て、勇気・元気が出れば！と思っています！‬

**‪1人でも多くの方に一緒に感謝を伝えましょう！**

‪宜しくお願いします！‬

## Flow ~当サイトの流れ~

‪感謝・応援の流れです！‬
‪**会員登録など何もありません:+1:**‬
‪①Thanks Messagesをタッチ！‬
‪②5つのメッセージがあると思います！‬
‪③アイコンをPUSHして感謝・応援！‬
‪④カウントしてます！‬
‪⑤みなさんの気持ちが数字となって、届いてくれるはずです！‬


## Sample ~参考動画~
![op.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576541/c22358d6-edae-fd4b-f36c-54a57f30f270.gif)

![thxmessage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576541/7f12b1fb-1fe6-bb3f-500e-aa8c8961c24e.gif)

‪ご協力お願いします!!
Spotify + Vue.jsで気になるアーティストの人気を調べるぞ！　Search画面編

どうも**jack**です。
前回の続きで今回は検索画面を作成していきましょう

```vuejs:src/components/Search.vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
```

現状からアーティスト名の検索フォームを作成していきましょう！！

```vuejs:src/components/Search.vue
<template>
  <div class="search">
    <input
        placeholder="enter artist name"
        v-model="search_artist_name"
        required>
    <button
      type="button"
      @click="seach_artist">
      search
    </button>
  </div>
</template>
```

<img width="1440" alt="スクリーンショット 2020-04-28 23.05.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/2f85b272-f0fc-6f31-6613-85db90bd6102.png">

次に入力されたアーティスト名を受け取る処理を書いていきましょう！

```vuejs:src/components/Search.vue
<template>
  <div class="search">
    <input
        placeholder="enter artist name"
        v-model="search_artist_name">
    <button
      type="button"
      @click="seach_artist">
      search
    </button>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  name:'search',
  data(){
    return {
      search_artist_name: ''
    }
  },
  methods:{
    seach_artist: function(){
      console.log(this.search_artist_name);
    }
  }
}
</script>
```

これでsearchボタンを押したときにちゃんと名前が受け取れるかコンソールログで見てみましょう！

<img width="1440" alt="スクリーンショット 2020-04-28 23.24.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/31622f8b-2020-1fb8-df97-4d3922bf0f26.png">

はーい。
取れてます！！

では受け取った名前をSpotifyに投げましょう！！

vueでのSpotifyの初期準備はこの方の記事を参考にしました！
https://qiita.com/katonux/items/13f4757352b93f92be7d

```vuejs
<template>
  <div class="search">
    <input
        placeholder="enter artist name"
        v-model="search_artist_name">
    <button
      type="button"
      @click="seach_artist">
      search
    </button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'search',
  artist_data: [],
  data(){
    return {
      search_artist_name: ''
    }
  },
  methods:{
    seach_artist: function(){
      axios.get("https://api.spotify.com/v1/search",{
        headers:{"Authorization": "Bearer トークンをここに書くよ"},
        params:{"q": this.search_artist_name , "limit": "1", "offset": "0", "type": "artist", "market": "US"}
      }).then(response=>{
        this.artist_data = response.data;
        console.log(this.artist_data);
      }).catch(error => console.log(error))
    }
  }
}
</script>
```
<img width="1440" alt="スクリーンショット 2020-04-29 0.27.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/6a3e04e7-c5d0-9c84-2df5-059e45bcbb58.png">

うん！ちゃんと取れてる！
じゃあ次は取れたデータの表示編で！！
【Python】importするモジュールと同名のファイルを作るとAttributeErrorになる

ライブラリの動作確認をしようと思っただけなのに思わぬところでハマりました。

例えばjsonモジュールを試すために`json.py`というファイルを作ったとします。

```python:json.py
import json

obj = {
    "id" : 1,
    "name" : "hoge",
}

str = json.dumps(obj)
print(str)
```
問題なさそうなコードですが…。

これは、実行するとエラーになります。

```bash
$ python3 json.py
...
AttributeError: module 'json' has no attribute 'dumps'
```

jsonモジュールにdumpsがないって言われてます。

これは自身がjsonというファイル名なので標準モジュールより優先されて読み込まれてしまったためです。

よって、リネームしてやれば解決です。

```
$ mv json.py json_test.py
$ python3 json_test.py
{"id": 1, "name": "hoge"}
```

ちなみに自身がjsonというファイル名でなくても同ディレクトリ階層に`json.py`がいれば同じ結果になります。

また、`__init__.py`が入った同名ディレクトリがいても同じ結果になります。

```
$ mkdir ./json
$ touch ./json/__init__.py
$ python3 json_test.py
Traceback (most recent call last):
  File "json_test.py", line 8, in <module>
    str = json.dumps(obj)
AttributeError: module 'json' has no attribute 'dumps'
```
５－１、イテレータ

#イテレータ
イタレーションは、リスト、辞書、文字列、タプルなどの要素にアクセスするため、よく使われる機能の1つです。
イテレーションは、最初の要素から最後の要素までを順にアクセスする。(逆走はできない)
イタレーションには2つの基本的な関数がある:iter()とnext()。

```python
>>> data=["a","b","c","d"]
>>> it = iter(data)
>>> print (next(it))  
1
>>> print (next(it))
2
>>>
```
##使い方
普通はfor文を使います。

```python
data=["a","b","c","d"]
it = iter(data) 
for x in it:
    print (x)
```
もちろん、next()関数も使えます。

```python
import sys  
list=["a","b","c","d"]
it = iter(list)
while True:
    try:
        print (next(it))
    except StopIteration:
        sys.exit()
```

出力結果は同じく文字列のa,b,c,dとなります。

目次：[非IT業種のITメモ](https://qiita.com/ousrok/items/135734b5f66afb497253)
herokuでnodeアプリをデプロイする

個人的な作業メモ。チュートリアルをなぞっただけです。

https://cli-assets.heroku.com/heroku.pkg からCLIのインストーラーをダウンロードして実行。

```
$ heroku --version
 ›   Warning: heroku update available from 7.35.0 to 7.39.5.
heroku/7.35.0 darwin-x64 node-v12.13.0
```

アップデートできるようなのでしおく。

```
$ heroku update
heroku: Updating CLI from 7.35.0 to 7.39.5... done
heroku: Updating CLI... done
```

herokuにログインする。

```
$ heroku login
heroku: Press any key to open up the browser to login or q to exit: 
```

何らかのキーを押すとブラウザが開く。

![スクリーンショット 2020-04-29 9.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404297/448e6678-9c47-6f5b-97cd-ebe35c410bfc.png)

`Log In`を押下。CLIに戻るとログインされていた。すげぇ。

```
Logging in... done
Logged in as my@mail.address
```

サンプルのリポジトリをクローン。

```
git clone https://github.com/heroku/node-js-getting-started.git
cd node-js-getting-started
```

リモートと紐づける。

```
$ heroku create
Creating app... done, ⬢ morning-fortress-****
https://morning-fortress-****.herokuapp.com/ | https://git.heroku.com/morning-fortress-****.git
```

```
$ view ./.git/config 

[remote "heroku"]
        url = https://git.heroku.com/morning-fortress-****.git
        fetch = +refs/heads/*:refs/remotes/heroku/*
```

リモートにherokuが追加されている。

```
git push heroku master
```

herokuにプッシュする。

```
$ heroku open
```

を叩くとブラウザが起動した。

![スクリーンショット 2020-04-29 9.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404297/3c3b26a8-631c-a0bd-20d2-2611b210d8a3.png)

めでたしめでたし
[D3.js] たのしいグラフ描画 - ラベル付きの単純な円グラフ

D3.jsを使って単純な円グラフを描画します。ラベルも付けてみます。

# 元データ

元データです。
キーと値のハッシュになっています。

```json
testdata = { a: 40, b: 30, c: 20, d: 10 }
```

# できあがりイメージ

大変単純な円グラフができあがりました。
扇型の中心にラベルを付けています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/09fb861c-3a53-582e-41e2-422258ce63b5.png)

# プログラム

プログラムの一部です。

```js
  // 描画領域
  const svg = d3
    .create('svg')
    .attr('viewBox', [0, 0, width, height])
    .attr('width', width)
    .attr('height', height);
  // グラフを真ん中にするためのエレメント
  const chart = svg
    .append('g')
    .attr("transform", `translate(${width / 2}, ${height / 2})`);

  // 扇型を生成する
  const arc = d3
    .arc()
    .innerRadius(innerRadius)
    .outerRadius(radius);

  // 円グラフを描画する
  chart
    .selectAll(null) // 空のSelection
    .data(testdataReady)
    .enter()
    .append('path')
    .attr('d', arc) // 扇型を描画する
    .attr('fill', datum => colorSeq(datum.index)) // 塗りつぶし
    .attr("stroke", "black")
    .style("stroke-width", "1px");
```

[単純な円グラフ](https://qiita.com/sengoku/items/e311c47eedf34e334c75) に、下記のようにしてラベルを追加しています。


```js
  // 値ラベルを描画する
  chart
    .selectAll(null)
    .data(testdataReady)
    .enter()
    .append('text')
    .text(datum => datum.data.key) // 表示するテキスト
    .attr("transform", datum => `translate(${arc.centroid(datum)})`) // 扇型の中心に移動
    .style("text-anchor", "middle")
    .style("font-size", 20);
```

プログラム全体はObservableに置いています。

https://observablehq.com/@sengokyu/d3-js-basic-pie-chart-with-annotation
Reactを使ってWebサービスを作るための基礎３

Reactの基礎を学ぶためのメモ．
Reactコンポーネントを作るためにコンポーネントのライフサイクルについて理解する．

#Reactコンポーネントの作り方　その２

##Reactコンポーネントのライフサイクル
Reactコンポーネントには，```Mounting```(準備期間)，```Updating```(表示期間），```Unmounting```(破棄期間)の３つのライフサイクルが存在する．

各ライフサイクルでは，呼び出されるメソッドの流れが決まっている．

###Mounting
UIにコンポーネントが描画されるまでの準備期間．最初の一回のみ実行．
1. ```constructor()```
2. ```render()```
3. ```componentDidMount()```

###Updating
UIにコンポーネントが表示されていて，基本的にユーザが操作できる期間．propsやstateの更新の度に実行．
1. ```render()```
2. ```componentDidUpdate()```

###Unmounting
他のコンポーネントに切り替える前に現在のコンポーネントを破棄するための期間．終わりの一回のみ実行．
1. ```componentWillUnmount()```


##処理の流れを決めるライフサイクルメソッド
各ライフサイクルメソッドについて，詳しく見ていく．
ちなみに，必須の```render（）```以外はオプショナルのため，書くことがなければ省略が可能．

###```constructor()```
stateの初期化やactionのバインドのために用いられる．

###```componentDidMount()```
1度目のrenderメソッドが呼ばれた後に1度だけ呼ばれるメソッド．
この時点ではまだUIに表示はされておらず，データをフェッチしたり，アニメーションやタイマーをセットする場合はここで行う．

###```render()```
コンポーネントの根幹となる日数のメソッド．
ここに書いてあるコードが実際にUIに現れるものである．
renderはpropsやstateの更新の度に呼ばれるため，ここで直接propsやstateを操作してはいけない．
また，新しい関数の定義も避けるべき．
**propsやstateの値が変わっても，結果は冪等であるべき**．

###```componentDidUpdate()```
**第一引数に１つ前のprops，第二引数に１つ前のstate**が渡される．
パフォーマンスを低下させるpropsやstateの更新は避けるべき．

###```componentWillUnmount()```
現在のコンポーネントを破棄する直前に呼ばれるメソッド．
もうrenderは呼ばれることはないので，ここでpropsやstateの更新をしても意味がない．

##Stateless Functional Componentについて
Reactライブラリをimportするだけで自動的にReactコンポーネントとして扱われる．
このとき，renderメソッドのみのコンポーネントとなる．

コンポーネントがstateを保持しない場合には，Stateless Functional Componentにすることで負荷を減らすことができる．

```js:
import react from 'react'

const NumberPlate = (props) => {
  return <span style={{ color: '#eeeeee' }}>{props.children}</span>
}
```

これは下記に示すコードと処理自体は同じ．

```js:
export default class NumberPlate extends React.Component {
  render (props)  {
    return <span style={{ color: '#eeeeee' }}>{props.children}</span>
  }
}
```
GitHub Actions で GitHub 内の他のリポジトリを checkoutする

# GitHub Actions で GitHub 内の他のリポジトリを clone する

以下のように `actions/checkout@v2` に対して `repository` で checkout するリポジトリと `path` で checkout 先のディレクトリを指定することで GitHub 内の他のリポジトリを clone できます。
この例では `https://github.com/accountname/reponame` を `reponame` のディレクトリに checkout します。(clone と書いていたけど checkout かも。未確認)

```
    - name: Checkout other repo
      uses: actions/checkout@v2
      with:
        repository: accountname/reponame
        path: reponame
```

上記指定は複数指定できるので、何個でも checkout するリポジトリを増やせます。


以下は `.github/workflows/main.yml` の全体です。テンプレートに上記を追加して不要な項目削除したもの。

```
# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/checkout@v2

    - name: Checkout other repo
      uses: actions/checkout@v2
      with:
        repository: accountname/reponame
        path: reponame
```

## 参考サイト

以下を見るとほかの指定方法とかも説明があります。
https://github.com/actions/checkout#checkout-multiple-repos-side-by-side
[D3.js] たのしいグラフ描画 - 単純な円グラフ

D3.js を使って単純な円グラフを描画します。

# 元データ

元データです。
キーと値のハッシュになっています。


```json
testdata = { a: 40, b: 30, c: 20, d: 10 } 
```

# できあがりイメージ

大変単純な円グラフができあがりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/427c2f52-27b6-4c83-b505-e05ee78b7aa2.png)


# プログラム


プログラムの一部です。

```js
  // 描画領域
  const svg = d3
    .create('svg')
    .attr('viewBox', [0, 0, width, height])
    .attr('width', width)
    .attr('height', height);
  // グラフを真ん中にするためのエレメント
  const chart = svg
    .append('g')
    .attr("transform", `translate(${width / 2}, ${height / 2})`); // 真ん中へ移動

  // 扇型を生成する
  const arc = d3
    .arc()
    .innerRadius(0)
    .outerRadius(radius);

  chart
    .selectAll(null) // 空のSelection
    .data(testdataReady)
    .enter()
    .append('path')
    .attr('d', arc) // 扇型を描画する
    .attr('fill', datum => colorSeq(datum.index)) // 塗りつぶし
    .attr("stroke", "black") // 枠線
    .style("stroke-width", "1px");
```


全体はObservableに置いています。

https://observablehq.com/@sengokyu/d3-js-basic-pie-chart
BabelEditでPre-Translateで翻訳しない文字列を指定する

Flutterでアプリ開発しているとBabelEditで翻訳リソースの管理することがあると思います。
そしてBebelEditにはPre-Translateという自動翻訳の機能もあり、この機能をつかって翻訳することも多いです。

翻訳の中にはあとから置換する予定の変数で翻訳したくない部分があります。
`こんにちは、太郎` の太郎の部分などです。

この場合、BabelEditでは `こんにちは、{NAME}` のようにすることで、 `{NAME}` が自動翻訳の対象外になります。
結果はこんな感じ。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18273/bf66babd-ef9e-e88b-b827-459d042cbad2.png" width="400px">


サポートに問い合わせたところ以下の返答があったので、試していませんがXML/HTMLでも対象外にできるようです。

```
Pre-translate excludes text in {} and XML/HTML attributes.
```
３－３、Pythonの文字列と文字コード



##文字コード
　文字列は[文字コード](https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E3%82%B3%E3%83%BC%E3%83%89)の関係で特殊なデータ型となる。

　コンピュータは数字しか処理できないため、テキスト形式の文字等は数字に変換しないといけない。最初にコンピュータを設計された時に、1バイト(byte)は8ビット(bit)となり。1バイトで表示できる最大の整数は255(2進数の11111111は10進数の255)となり、もっと大きな整数を表示する為、たくさんバイトが必要となる。例えば、2バイトで表示できる最大整数は65535、4バイトは4294967295である。

 コンピュータ開発は、米国を中心に進められ、最初に規格された文字コードは128個しかない。この文字コードは[ASCII](https://ja.wikipedia.org/wiki/ASCII)と言い、英語で使われる英数字、記号、スペース、改行等の対応が全部できる。例：`A`の文字コードは`65`、`z`の文字コードは`122`となる。

　日本語を処理する為、1バイトは当然足りない、2バイトをしないといけない。しかし、ASCIIと同じが使え無い為、日本はJISコードを作成した。その他の国も、ASCIIを基に各国版の文字コードが作成られた。その結果は、多言語が混在されているテキストファイルに対して、化け文字が表示された。

　化け文字を対策する為、[Unicode](https://ja.wikipedia.org/wiki/Unicode)が生まれた。全ての言語を一つの文字コード(Unicode)に統一された。Unicodeはまだ改善中だが、普通に使われる文字は全部2バイトで処理している。

　文字列`A`のASCIIは10進数の`65`、2進数の`01000001`である。
　文字列`0`のASCIIは10進数の`48`、2進数の`00110000`である。
　（注意：文字列の`0`と数字の`0`は同じではない。）
　ASCIIの`A`をUnicodeを表示する為、その前に0を入れば良い。`A`のUnicodeの文字コードは`00000000 01000001`となる。ここで、新しい問題が出てくる。Unicodeを使うと化け文字は無くなったが、全部英語のテキストデータに対して、ASCIIより倍のデータ量となる。
　それを解決するため、可変長なUTF-8を作成した。UTF-8では、1文字のUnicodeの大きさによって、1バイトから6バイトに変換した。アルファベットなどは1バイト、普通の漢字は1～3バイト、あまり使わない漢字は4～6バイトもある。

E697A5  日　　110010111100101　11100110　10010111　10100101

目次　[非IT業種のITメモ](https://qiita.com/ousrok/items/135734b5f66afb497253)

参考：
　・[文字コード講座 第1回―文字コードの歴史（Unicode前史）](http://www.ndl.go.jp/jp/data/bib_newsletter/2015_4/article_05.html)
　・[Pythonでの文字コードの取り扱い](https://tanishiking24.hatenablog.com/entry/python-charset)
[Unity初級]ボタンを押したときの処理をコードから指定する

#概要
UIのボタンを押したときの処理は
![スクリーンショット_(160).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/7dcd65be-d46b-997e-0ebb-8cc093bd0b91.png)


このOn Click()で設定ができます。
これをコード上で指定する方法です。
#本文
```cs

        prefab = Instantiate(InputButton, pos, this.transform.rotation);
        prefab.GetComponent<Button>().onClick.AddListener(() => {Set("test");});
```

下のコードのように変数の値を指定することもできるので、ボタンをたくさん作成して、そのボタンごとに処理を変えることも簡単にできます。

```cs

        prefab = Instantiate(InputButton, pos, this.transform.rotation);
        string moji = "test";
        prefab.GetComponent<Button>().onClick.AddListener(() => {Set(moji);});
```
#ちなみに

![スクリーンショット_(161).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/d5490c62-ac81-f6b4-b81f-c7e18f6c576b.png)
Inspector上でボタンを押したときの処理指定をする時、引数付きの関数なら丸印の入力欄が出てきます。ここに引数を指定すると関数に渡すことができます。
VPSにDjangoを公開した時のメモ（準備編）

##この記事について
動くものを制作できる自分であり続けたい。
VPSを契約し、Djangoで制作したものを公開できたので、その時のメモを残す。

##VPS契約
AWS、GCP、Azureを基盤とする業務に携わった者としては個人で何かするにはそこまでのものは不要と思い、VPSを契約。さくらVPSでメモリ、SSDとも最小を選択。

##CentOS7 x86_64をインストール
業務で触れる機会の多かったOSを選択。
接続許可ポートはこのタイミングで選択できるので、
SSH(22)
Web(80/443)
メール(25/110/143/465/587/993/995)
を選択。

##ssh接続
契約時のIPアドレスに対し、クライアントで使用していたTeratermから接続確認。
この時点での最低限のセキュリティを考えrootでのログインを禁止しておきたい。

##rootによる接続を拒否する設定

ユーザー作成。

    # useradd hoge
    # passwd hoge

rootでssh接続させないための設定。

    # vi /etc/ssh/sshd_config

でファイルを開き、

    PermitRootLogin no

として保存。rootでssh接続できなくなったことを確認。以後はssh接続時はユーザー
hogeで接続し、必要に応じて

    $ sudo コマンド

とする。

##開発PCにPython3をインストール
Windows10PCにPython3をインストール。

ダウンロードサイトで、Windows x86_64 executable installerを選択してDL。
python-3.7.7-amd64.exeを実行。
Add Python 3.7 to PATHのチェックはON。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407977/62ec8135-e567-a2d0-a65d-f8589becc8fa.png)

##Python仮想環境を作成
今後、開発単位で仮想環境を作成することになる。

    > python -m venv venv_hoge_hoge

ディレクトリが作成され、仮想環境用ファイル一式が収められている。

仮想環境に入る。

    > cd venv_hoge_hoge\Scripts
    > activate.bat
    (venv_hoge_hoge)> 

仮想環境を抜ける。

    (venv_hoge_hoge)> deactibate
    >

##Djangoをインストール
##Pycharmインストール
##PostgreSQLインストール
##バージョン管理システム導入
##project作成
##djangoアプリ作成
##Pycharmセッティング
３、Winpython 64bit のQt Designerを動かす

なぜか64bit　WinpythonのQt Designerが動かない。
ネットに書いた対策をためしたが、Qt Designer.exeは起動しませんでした。
結局**pyqt5-toolsをインストール後、下記フォルダーにあるdesigner.exeを実行できたので、ショットカートをつくて置けば、とりあえず使えるようになった**。

wpy-3662_200114\python-3.6.6.amd64\Lib\site-packages\pyqt5_tools


試し１：WinPython Control Panel.exeでインストール。
　参考：https://qiita.com/NoTASK/items/1644e0197c84856f607a
試し２：pip install pyqt5-toolsでインストール
　参考：https://portal-sight.com/wp1/?p=57
そのほかの試し：
　・python -mを付けて再度コマンドを実行してインストール。
　・python -m pip install –upgrade pipでpipのバージョンを更新。
　・PyQt5の再インストール。(Spyder 3.3.6はPyQt5 < 5.13である必要)
なぜか直接インストールのみで、旨くいかないのはわかりませんが、わかっている方があれば、ぜひご教授お願い致します。

目次　[非IT業種のITメモ](https://qiita.com/ousrok/items/135734b5f66afb497253)
edgeR packageで発現変動遺伝子を抽出する

#RのedgeRパッケージを使って発現変動遺伝子を抽出する方法

RのedgeRパッケージを使って、RNA-seqデータでグループ間で発現が変動している遺伝子の抽出方法です。

##データセット
GEOデータベースのGSE143213のデータを使用しました。
元論文は
Kared H, Tan SW, Lau MC, Chevrier M et al. Immunological history governs human stem cell memory CD4 heterogeneity via the Wnt signaling pathway. Nat Commun 2020 Feb 10;11(1):821. PMID: 32041953
加齢によるCD4＋T細胞の遺伝子発現レベルの変化を、バルクのRNA-seqとscRNA-seqを使って明らかにしようとしています。ここではバルクのRNA-seqデータであるGSE143213_read_count_bulk.txt.gzをダウンロードして、解凍したものを使います。
データの内訳は、Naive T cell, recent thymic emigrants, memory T cell with naive phenotype, stem-cell memory T lymphocyteの４種類のT細胞で、それぞれ若年５サンプル、老年４サンプル。 
##edgeR package
発現変動遺伝子の抽出にはRのedgeRパッケージを使いました。参考文献は
Lun, ATL, Chen, Y, and Smyth, GK. It’s DE-licious: a recipe for differential expression analyses of RNA-seq experiments using quasi-likelihood methods in edgeR.　Methods in　Molecular Biology 2016 1418, 391–416.
R version 3.6.3 windows 64-bit版で実行しています

```
#edgeRのインストール
BiocManager::install("edgeR")
library(edgeR)
#データの読み込み
data_set <- read.table("GSE143213_read_count_bulk.txt", sep = "\t", header = T)
#列名をensembl gene IDに変更
rownames(data_set) <- data_set$X
#カウント値のみを抽出
counts <- x[,3:38]
#グループの定義
#ラベルはYoungがY, OldがO, NaiveがN, Recent thymic emigrantsがR, T with naive phenotypeがT, Stem-cell memory T lymphocyteがSの組み合わせで、"Y_N", "Y_R", "Y_T", "Y_S", "O_N", "O_R", "O_T", "O_S"とした 
group <- factor(c("Y_N", "Y_R", "Y_T", "Y_S", rep(c("O_N", "O_R", "O_T", "O_S"), 4), rep("Y_N", "Y_R", "Y_T", "Y_S"), 4)))
#design行列の定義
design <- model.matrix(~group)
#データリストを設定
x <- DGEList(counts = counts, group = group)
#dispersion推定
x <- estimateDisp(x, design)
x <- estimateGLMCommonDisp(x, design)
x <- estimateGLMTrendedDisp(x, design)
x <- estimateGLMTagwiseDisp(x, design)
#モデルのフィッティング
fit <- glmQLFit(x, design)
#Young TS とOld TS間でF-Test
qlf.3vs7 <- glmQLFTest(fit, contrast = c(0,0,1, 0, 0, 0, -1, 0))
#結果の抽出
table <- topTags(qlf.3vs7, nrow(counts))
#FDR < 0.05でDifferentially Expressed Genes (DEG) を抽出
DEG <- subset(table[[1]], table[[1]]$FDR < 0.05)
#結果のまとめ
DEG_genes <- as.matrix(rownames(DEG))
colnames(DEG_genes) <- "X"
result <- merge(DEG_genes, data_set, by = "X")
table[[1]] <- cbind(table[[1]], X = rownames(table[[1]]))
result <- merge(result, table[[1]], by = "X")
#DEGをプロット
par(cex = 0.7)
plot(result$logFC, result$PValue, pch = 20, xlab = "logFC", ylab = "p-value")
text(result$logFC, result$PValue + 0.0000001, result$gene_name)
```

![結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353039/8b821eec-729f-d1f3-c7bf-5403d766fd78.png)

#結果
データの元論文のSUPPLEMENTARY FIGURE3-Cと比較すると、発現変動遺伝子として抽出された遺伝子が少ないことが解ります。判定が厳しいのかもしれません。

＃参考
データセット
Kared H, Tan SW, Lau MC, Chevrier M et al. Immunological history governs human stem cell memory CD4 heterogeneity via the Wnt signaling pathway. Nat Commun 2020 Feb 10;11(1):821. PMID: 32041953

edgeR
Lun, ATL, Chen, Y, and Smyth, GK. It’s DE-licious: a recipe for differential expression analyses of RNA-seq experiments using quasi-likelihood methods in edgeR. Methods in Molecular Biology 2016 1418, 391–416.
[Unity初級]乱数を得る

#概要
乱数を生成する
#本文
```cs

        var random = new System.Random();
        int k = random.Next(100);
```
0～99の値を乱数で出力します。
#追記
```cs

        var random = new System.Random();
        int k = random.Next(20,100);
```
このように引数を2つ書くと最低値も指定できます。
ただし最低値はその数を含み、最大値はその数未満です。（この場合20～99を生成します）
WordPress｜php.ini設定｜辿ったリンクは期限が～。アップロードサイズ上限を～

WordPressで「辿ったリンクは期限が切れています」や「このサイトのアップロードサイズ上限を超えています」といった警告が表示された場合の対処方法について

# php.ini で設定する
`php.ini` で下記を設定する

```ini:php.ini
; PHPの実行時間
max_execution_time = -1

; PHPに割り当てられているメモリ使用量
memory_limit = -1

; POSTデータへ許可する最大サイズ
post_max_size = -1

; アップロードファイルの最大サイズ
upload_max_filesize = -1
```

値を `-1` にすることで**無制限**にすることができます。
作業が終わったら、消すなりコメントアウトするなり...

## デフォルト値

なおデフォルト値は下記


```ini:php.ini
; 各デフォルト値
max_execution_time = 30
memory_limit = 128M
post_max_size = 8M
upload_max_filesize = 2M
```

# .htaccess で設定する
共有レンタルサーバーを使っていて `php.ini` を触れないとか、`php.ini` だけでは上手くいかないとかの場合は、`.htaccess` へ下記を設定する

```config:.htaccess
php_value max_execution_time 600
php_value memory_limit 50M
php_value post_max_size 40M
php_value upload_max_filesize 30M
```
【Java】配列をArrayListに変換する ※注意あり

##配列をArrayListに変換する方法と注意点・落とし穴

配列をArrayListに変換する方法を紹介します。
絶対にハマる落とし穴があるので、最後まで読んでください！

```java:ListToArray.java
String[] array ={"A","B","C"};
List<String> list =  Arrays.asList(array);
System.out.println("配列 = " + Arrays.toString(array));
System.out.println("List = " + list.toString());
```
###結果
```
配列 = [A, B, C]
List = [A, B, C]
```

できた！簡単じゃん。

・・・でも

##要素を追加してみる
```java:ListToArray.java
//中略
List<String> list =  Arrays.asList(array);
list.add("D"); //Dを追加!
```
###結果
```
Exception in thread "main" java.lang.UnsupportedOperationException
	at java.util.AbstractList.add(AbstractList.java:148)
	at java.util.AbstractList.add(AbstractList.java:108)
	at codeSample.ListToArray.main(ListToArray.java:13)
```
エラーになる
##なぜか
返すクラスを取得してみる

```java:ListToArray.java
//中略
List<String> list =  Arrays.asList(array);
ArrayList<String> arrayList = new ArrayList<String>();
System.out.println("通常のArrayList = " + arrayList.getClass());
System.out.println("配列からの変換 = " + list.getClass());
```
###結果
```
通常のArrayList = class java.util.ArrayList
配列からの変換 = class java.util.Arrays$ArrayList
```
ん、なんか違う！
##深堀してみる
```java:java.util.Arrays.class
//中略
public static <T> List<T> asList(T... a) {
        return new ArrayList<>(a);
    }
    private static class ArrayList<E> extends AbstractList<E>
        implements RandomAccess, java.io.Serializable
    {
        private static final long serialVersionUID = -2764017481108945198L;
        private final E[] a; //　←←←finalになってる!

        ArrayList(E[] array) {
            a = Objects.requireNonNull(array);    // 参照コピー（追記）
        }

        @Override
        public int size() {
            return a.length;
        }
//中略
    }
```
Arraysクラスの内部クラスに定義された簡易版のArrayListを返していた！
※E[] aには元の配列が参照コピーされる。 （__追記__）
addメソッドの定義がなく、AbstractList.add(E e)にいくため、UnsupportedOperationExceptionが発生していた。

```java:java.util.AbstractList.class
public boolean add(E e) {
    add(size(), e);
    return true;
}
//中略
public void add(int index, E element) {
    throw new UnsupportedOperationException();
}
```
##修正
```java:ListToArray.java
//中略
ArrayList<String> arrayList = new ArrayList<String>(Arrays.asList(array));
arrayList.add("D");
System.out.println("配列 = " + Arrays.toString(array));
System.out.println("List = " + arrayList.toString());
```
新しくArrayListの領域をnewして変換する。  （__追記__）

###結果
```
配列 = [A, B, C]
List = [A, B, C, D]
```
Arrays.asList()は型変換するだけで、参照先メモリ領域もそのままということですね。 （__追記__）
PyCharmで環境変数を.envファイルから読み込む方法(Macの場合)

はじめに
========
Pythonで [pipenv](https://github.com/pypa/pipenv) や [dotenv](https://github.com/theskumar/python-dotenv) などを使うと project dir の `.env` ファイルを読み込んで環境変数を設定することができます。よくあるのは、`.env` ファイルを `.gitignore` に書いておいて commit しないようにしておくことで、環境別の動作を制御することができます。
私は [PyCharm](https://www.jetbrains.com/ja-jp/pycharm/) を愛用していますが、IDEからの実行時にこの `.env` を読み込ませる方法がわからなかったのですが、ようやく先日見つけたので書いておきます。

Version
----------
- MacOS 10.15.4
- PyCharm Professional 2020.1 (Community Edition でもたぶん大丈夫だと思われます)

設定方法
=========
## 流れ
まず、Run Configurationを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11124/30099fd4-08f0-1df4-639d-0f1aea64f307.png)

`EnvFile` のタブを開いて、 `Enable EnvFile` にチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11124/6fa4e442-56b0-0588-1be8-a3297fed3090.png)

`+` を 押して、 `.env file` を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11124/d69ffb32-ecda-630b-f9f6-a11d27ff68a8.png)

これで選べば終わりでしょって思いますよね。でも、 `.env` のように `.` で始まるファイルがダイアログに表示されないんですよね… 色々適当に操作しても上手く出せる感じがしない。そこで一工夫します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11124/0f2821f1-98f1-ce1e-78c4-59eda87cda4c.png)

### 追記:2021年12月23日

コメント頂いているように `Commandキー　+ Shiftキー + .キー` を押すと、 `.` で始まるファイルも表示されるようになります！


## 一工夫(は、上記のように不要ですが残しておきます)
project_dir に symlink を作ってしまいます。

```bash
% ln -s .env dot.env
```

もう一度、先程のダイアログを開くと、 `dot.env` ファイルが増えているので選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11124/77e8fa29-b2da-6a68-e14c-2693aaaa0abb.png)

すると、無事に追加できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11124/2531a6b3-da56-c6df-b045-dd5e89978ba6.png)

ちゃんと内容も反映されます。

IDEに反映させたら、symlinkは消しても大丈夫です。

```
% rm dot.env
```

さいごに
========

毎度手作業で設定したり更新したりしなくてよくなるので、ストレスが減りました。
まあ、たぶんみんな不便なので、１年以内には改善されるんじゃないかと思いますが...
AWS 基礎

#前提
AWSを学習中に学んだことを殴り書きしていきます。

#本題
・サーバー構築に必要な知識
１、サーバーOSのインストール方法LinuxやWindowsServerなどの
　　サーバーOSのインストール、各種設定方法
２、各ソフトウエアのインストールや設定方法Webサーバーソフトや
　　データベースサーバーソフト、メールサーバーソフトなど、
　　さまざまな機能を提供するソフトウエアのインストールや設定方法。


たとえば、、、
【Webサーバーとして機能させる場合】
<code>ApacheHTTPServer</code>や<code>nginx</code>などのソフトウエアをインストールする。

【データベースサーバーとして機能させる場合】
<code>MySQL</code>や<code>MariaDB</code>、<code>PostgreSQL</code>などのソフトウエアをインストールする。

【メールサーバーとして機能させる場合】
<code>Sendmail</code>や<code>Postfix</code>などのソフトウエアをインストールする。


・AmazonVPC
AmazonVPCを用いてVPC領域を構成すると、
ユーザーごとに隔離されたネットワークを作る事ができる。
作ったネットワークには、任意のネットワーク設定ができ、
ルーターなどの仮想的なネットワーク機器も配置できる。
実際にVPC領域を作るには、VPC領域に対して割り当てる<code>IPアドレス範囲</code>が存在する。

・IPアドレス
ネットワーク上で互いに重複しない唯一無二の番号。住所に相当する。
IPアドレスは、32ビットで構成されている。
8ビットずつ10進数に変換したものを、<code>.</code>（ピリオド）で区切って表記する。

ちなみに、インターネットに接続する際に用いるIPアドレスのことを
**パブリックIPアドレス**や**グローバルIPアドレス**と言う。


・CIDR表記、サブネットマスク表記
IPアドレス範囲を示すときには、
<code>CIDR表記（ClasslessInterDomainRouting）</code>もしくは<code>サブネットマスク表記</code>の
いずれかの表記を用る。

１、CIDR表記IPアドレスを2進数で表記したとき
　　（ネットワーク部のビット長を/ビット長で示す方法）
　　このビット長のことを<code>プレフィックス（prefix）</code>と言う。
　　たとえば、、、
　　「192.168.1.0～192.168.1.255」の場合、プレフィックスは24ビット。
　　そこで、「192.168.1.0/24」と記述。
　　同様に、「192.168.0.0～192.168.255.255」は、プレフィックスは16ビットなので、
　　「192.168.0.0/16」と記述。

２、サブネットマスク表記サブネットマスクは、
　　プレフィックスのビット数だけ2進数の「1」を並べ、残りは「0」を記述した表記。

・ファイヤーオールとは
通していいデータだけ通して、それ以外と遮断する機能の総称。
その最も簡単な構造がパケットフィルタリングという。


・EC２とは
AWSクラウド上の仮想サーバーのこと。
インスタンスとはEC２から立てられたサーバーのこと。

【特徴】
・数分で起動し、1時間または秒単位の従量課金
・サーバーの追加、削除、マシンスペック変更も数分で可能
・OSより上のレイヤについては自由に設定できる

【作成手順】
１、AMI選択
２、インスタンスタイプの選択
３、ストレージの追加
４、セキュリティグループの設定
５、SSHキーペアの設定

・AMIとは
インスタンス起動に必要な情報が入ったOSのイメージ。
サーバーのテンプレートのようなもの。

・インスタンスタイプとは
サーバーのスペックを定義したもの。

・ストレージとは
サーバーにくっつけるデータの保存場所。
EC2のストレージには２種類ある。

・サーバーにログインとは
どこか遠くにあるサーバーに入って、自分のパソコンから操作すること。

・SSHとは
サーバーと自分の目の前のパソコンをセキュアにつなぐサービスのこと。
（遠隔ログインシステム）

・公開鍵認証
本人だけがログインできるようにする公開鍵認証。
秘密鍵を持っているユーザーだけがログインできる。
aptのsources.listのURL(国)はどのように決まるのか調べてみた

# 概要
Ubuntuをインストールしてみたら、apt-getが遅い！ってなったことありませんか？

これは、パッケージの取得先URLが書かれているファイル `/etc/apt/sources.list` を編集して、日本のサーバを指定すれば解決する話ですが、
その時の`sources.list`の取得先URLは、人によって`archive.ubuntu.com`だったり`jp.archive.ubuntu.com`だったりするようです。

ではそもそもsources.listに書かれている取得先URLってどのように決まるのかというのを調べてみました。

# 結論

## Ubuntu Server版、Ubuntu Desktop版
OSインストール時に選んだ「Where you are?」で決まる。

## Ubuntu Live Server版
OSインストール時のntp時刻同期から推定した結果のタイムゾーンで決まる。
NICが設定されていなかったり、時刻同期ができなければ、デフォルト値であるarchive.ubuntu.comになる。

![2020-04-10 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13722/33f64a57-9e7b-1e98-60b7-2310bd35827a.png)
君たちはどうコードを学ぶか 1

うちの子供向けに、吉野源三郎さんへのオマージュをこめて。。

## 多分これくらいにわけて記事を書く感じかも

1. まずは開発環境を作ってその気になろう
2. [何を作りたいか考えて、それはどうやって動くのか概要を理解しよう](https://qiita.com/fumi-m/items/d895c2cd4cfab0b58f27)
3. [ロボットプログラミングとマインクラフト回路の違い](https://qiita.com/drafts/e1ce33ad7ef62c8250e0)
4. マインクラフトとスマホアプリの共通点
5. 画面とロジックをわけて考える
6. クライアントでやるべきこと、サーバーでやった方がいいこと

# 1. まずは開発環境を作ってその気になろう

コペル君、小さい頃は、プラレールで遊ぶことが多かったけど、一瞬レゴブロックに興味がうつって、その後、マインクラフトのゲームを楽しむようになったね。
しばらくするとマインクラフトにmodを導入してその中で電車を動かそうとして、そうこうするうちにプラレールを完全に卒業してNゲージを始めたりもした。最近は回路とかマインクラフトで作って楽しんでいるみたいだ
並行してScrachでプログラミングをする様になって、ロボットプログラミング教室に行って、いろいろなロボットをブロックで作れるようになった。

そして、いまスマホでゲームを作って見たいという段階になって大きな壁に阻まれている。

最終的にはニフクラmobile backendとmonacoを使ってゲームを仕上げることになるのかもしれないが、その前に今まで経験したことを活かして、挫折することなくスマホ上で動くアプリを作れるようになれるようになってくれると嬉しい

## 細かいことは抜きにして、まずは動く物を作ろう

昨日はニフクラモバイルのチュートリアルに従って、スマホ上でメッセージが出るアプリをmonacaでくんでみた。

そこで使った技術はhtmlとjavascript。ということで、javaxcriptを学ぶためにprogateとか始めて見たけど、おうちのネットワーク環境が良くなくて苦労していた。

progateとかのweb教材は、順を追って分かった気になるにはいいのだけど、まずは順を追って1から動かせる環境をクライアント上に作っていこう。


## 1. VSCodeをダウンロードして日本語化する

monacaとかprogateはブラウザを通してサーバー上にソースコードファイルをおいて動かすしくみ。
ややこしいことを言うと、サーバー上のソースコードをPC上にコピーして、ブラウザというアプリの中でそれを動かすと言うことになる。
とはいえ、保存をするとかでネットワークを介してサーバーと通信することが必要になる。

話を簡単にするためと、ネットワークが落ちても問題ないように、クライアントに開発環境を作ってしまおう。
そうすることで、自分でプログラミングをしている感が出てくるに違いない。

1. https://azure.microsoft.com/ja-jp/products/visual-studio-code/ にアクセス
2. Visual Studio Code をダウンロードする
3. この記事に従って、メニューとかを日本語にしよう https://qiita.com/nanamesincos/items/5c48ff88a4eeef0a8631
4. ソースコードを共有するために githubのアカウントを作ってしまおう わたしもこの後の説明でgithubというソースコード管理サーバーを使ってコードを共有しようと思っている。
    5. https://github.co.jp/ に登録する
    6. ここにアクセス出来ることを確認する https://github.com/fumi-m/program_challenge 

## 2. VSCodeからフォルダを開いてソースコードをダウンロードする

1. リポジトリをクローンする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42407/b125e3ad-1468-ac9a-a18e-28c08ef2a656.png)

2. 上のリポジトリ 「https://github.com/fumi-m/program_challenge」を入力する
3. 「ドキュメント」フォルダに "code" というフォルダを作り "リポジトリの場所を選択"とする
4. クローンしたリポジトリを開きますか？に「開く」と答える

## 3. リンクを押したらメッセージが出るようにする

まずこの記事から、”Open In browser"を使える様にしよう
https://stabucky.com/wp/archives/12385

拡張機能のインストールボタン、今のwindows版だとこちらになっています。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42407/ed2fcbcc-cc7d-94c2-1695-3d8bf944c0b1.png)

ソースコードの表示するにはこちらを押します 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42407/88ab3a0d-93cf-d6c6-e7b2-757e63ebdc2e.png)


1. page1.htmlを開く
2. page1.htmlのメニューを右クリックで開き、openIn Default Browserをクリックする![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42407/df6957f3-f117-02ea-5b04-7f1085f163f6.png)

2. これを参考に、「カエル」というリンクをクリックしたら「げこ」とポップアップが出る様にしよう
https://proengineer.internous.co.jp/content/columnfeature/8009



## 4. ボタンを押したらブラウザの一部が変わるようにしよう

こちらを参考にして、page1.htmlを編集する
https://qiita.com/n_oshiumi/items/5795de01187d5aafca07

1. 東京まで何分？というボタンを押したら、ブラウザ上に15分と出る様にしよう
【Vagrant/Mac】ローカルと仮想マシンのフォルダを共有/同期する方法

## 執筆にあたり

自己紹介も含め、簡単に今の状況を書きます。

実務でPHPを使うことになったので、まずはパーフェクトPHPで学習を進めようと思っている駆け出しです。

折角なので（ローカルを汚したくないという思いもあり）、Vagrantを使った仮想環境で学習しようと決意。

ただ、学習の都度vagrantにsshログインしてviで開発していくのも面倒だと思ったので、ローカルと仮想マシンでフォルダ同期が出来ることを知り、、、
色々調べるも古い情報だったり、パスの記述方法が違ったりして、ハマったので備忘録として残します。

## 前提条件

macOS Catalina 10.15.3
Vagrant 2.2.7

ここまでに至る環境構築については以下を参照しました。
わかりやすかったです。ありがとうございます！（勝手にリンク失礼します）
[Vagrant+VirtualBoxで仮想環境を構築し、PHPの実装内容をブラウザで確認する](https://qiita.com/nemui_/items/de5dd5feee95e60aa264)

上記の手順を一通り終えたことを前提に書いていきます。


## 1.Vagrantfileの修正

まずはローカルでの作業です。
ルートディレクトリから以下を実行します
（今回のケースはcentos7というディレクトリに移動しておりますが、bootしたい仮想マシンのVagrantfileが置いてあるディレクトリに移動してください）

```local
$ cd centos7/
$ vim Vagrantfile
```

開いて少しスクロールすると、以下のような記述になっている箇所があるかと思います。

```Vagrantfile
# Share an additional folder to the guest VM. The first argument is
# the path on the host to the actual folder. The second argument is
# the path on the guest to mount the folder. And the optional third
# argument is a set of non-required options.
# config.vm.synced_folder "../data", "/vagrant_data"
```

こちらの5行目が「同期するフォルダ設定」が書かれている部分です。
以下のように変更。

```Vagrantfile
# Share an additional folder to the guest VM. The first argument is
# the path on the host to the actual folder. The second argument is
# the path on the guest to mount the folder. And the optional third
# argument is a set of non-required options.
config.vm.synced_folder "./shared", "/home/vagrant/shared"
```

何を書いたかというと、

```
config.vm.synced_folder "同期したいディレクトリのローカル側のパス","同期したいディレクトリの仮想マシン側のパス"
```

という構文になります。

ポイントは、"同期したいディレクトリのローカル側のパス"を相対パス（ここで言うとVagrantfileと同ディレクトリに配置されているsharedディレクトリを指してます）、
"同期したいディレクトリの仮想マシン側のパス"は絶対パスで書きます。
ここ間違えるとハマります...。


## 2.ローカルに共有ディレクトリを作成
1.でVagrantfileに記述したsharedディレクトリがないので作成します。
ローカルで同じディレクトリでの作業です。

```
$ mkdir shared
$ ls 
Vagrantfile /shared
# sharedディレクトリが作成されました
```

## 3.vagrantを再起動
また同じディレクトリで再起動コマンドを実行。

```
$ vagrant reload
```

## 4.vagrantでディレクトリやファイルを作成し、ローカルで確認しよう

vagrantに入り、vagrantで作成したディレクトリやファイルと同じものが、ローカルにもきちんと作成されるかを確認しましょう！

まずは、vagrantにsshで入り、1.で書いたルートディレクトリ直下のvagrant_dataディレクトリが無いので作成。

```
# vagrantにsshログイン
$ vagrant ssh

# vagrant_dataを作成
$ mkdir shared

# 移動
$ cd shared

# sampleディレクトリを作成
$ mkdir sample

# sample(html)ファイルを作成
$ touch sample.html

# vagrantをログアウト
$ exit
```

ローカルで同じディレクトリやファイルが作成されているかを確認します。

```
$ cd shared
$ ls
# /sample sample.html
```

無事同期されていることが確認できたらOKです！
[Unity初級]シーンの移動

#概要
シーンの移動です。
using UnityEngine.SceneManagement;を書き忘れないようにしてください。
#本文
```cs

using UnityEngine.SceneManagement;


    public void StartScreen()
    {
        SceneManager.LoadScene("mainGameScene");
    }
```

![スクリーンショット_(159).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/6077deaf-7c66-3c9b-a195-c8d6f3dd3931.png)

File>Build Settingsで画像のようなウィンドウ(Build Settings)が出てきます。
使用したいScene(緑色)をドラッグアンドドロップでピンク色で丸をしたところに持っていくと登録できます（登録をしていないとエラーが出ます）

この時、登録をしていく順番ごとに右側に書かれているように数字が割り振られますが、この0番目に登録したのが完成したゲームで最初に表示されるシーンになります。
MAMPを使ったWordpressでのWEB制作方法5　初心者向け

#MAMPを使ったWordpressでのWEB制作方法5　初心者向け

前回の記事はこちら
[MAMPを使ったWordpressでのWEB制作方法4　初心者向け](https://qiita.com/fumiya0414/items/6ba9d0617bfd5a032fbd)

##CSSファイルの読み込み

まず③の記事で作成したstyle.cssでメインのCSSファイルを読み込みます
テーマ情報の下にコピペしましょう。以下のような感じです。
cssディレクトリ内のメインCSSファイルは不要なので削除してもOKです。

[![Image from Gyazo](https://i.gyazo.com/03cb4361a01fcf27d1e94eb6e0d44d72.png)](https://gyazo.com/03cb4361a01fcf27d1e94eb6e0d44d72)

次にheader.phpファイルのCSS読み込み箇所を以下のように変更します

```php:header.php
<!--書き換え前--> 
<link rel="stylesheet" href="css/style.css">
<!--書き換え後-->                                            
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet">　　

```
以下のようにCSSは当たりました。
しかしcssディレクトリ内のリセットCSS(reset.css)が当たっていません。

[![Image from Gyazo](https://i.gyazo.com/d08b6355df817731e73a0df6dfb872a8.gif)](https://gyazo.com/d08b6355df817731e73a0df6dfb872a8)

そこでリセットCSSを読み込みます。
CSSのファイルを分けている場合は同様にパスを指定できます。
スラッシュのつけ忘れに気をつけましょう。
※JSシートを使う場合の読み込みも同じです。

```php:header.php
<!--書き換え前-->
<link rel="stylesheet" href="css/reset.css">
<!--書き換え後-->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css" type="text/css" />

```

<?php echo get_template_directory_uri(); ?> の記述でパスを読み込んでいます

bloginfoを使った書き方もありますが、現在は非推奨なのでget_template〜を使用しましょう

以下のようにresetCSSも当たりました。
[![Image from Gyazo](https://i.gyazo.com/6fd4111df17648a63f571a016d4593e3.png)](https://gyazo.com/6fd4111df17648a63f571a016d4593e3)

##画像の読み込み
次に画像を読み込んでいきます。
imgタグを入れている部分を以下に書き換えましょう。
wordpressタグを使ってパスを書き換えています。
※リンクのaタグは別の処理をしますのでまだ修正は不要です。

cssでbackground-imageを使用している場合は
backgroundに書き換えてパスを修正しましょう。
例)background: url("images/画像名");

```index.php
<!--書き換え前--> 
<img src="./images/person_02.jpeg" alt="" />
<!--書き換え後-->
<img src="<?php echo get_template_directory_uri();?>/images/person_02.jpeg" alt="" />
```

以下のように画像の読み込みができました。
[![Image from Gyazo](https://i.gyazo.com/079fcb8497e01344135c0532f1c9619a.gif)](https://gyazo.com/079fcb8497e01344135c0532f1c9619a)

##wordpressタグの追加(head/body部分)

次にheader.phpのhead部分閉じタグ前と
footer.phpのbody部分閉じタグ前に
以下のwordpressタグを入れてください

```php:header.php
<head><!--headstart-->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">                    <!--レスポンシブ-->
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">    <!--fontawsome-->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css" type="text/css" />    <!--reset.css-->
  <link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet"><!--書き換え-->
  <title>corporate_sample</title>
  <?php wp_head(); ?>    <!--追加-->
</head><!--headend-->
```

```php:footer.php
<div id="footer">
      <div class="copyright">Copyright &copy; 2013 YOUR SITE NAME <br class="br-sp">All Rights Reserved.</div>
    </div><!-- /#footer -->
  </div><!--container end-->

<?php wp_footer(); ?>  <!--追加-->
</body><!--body end-->
</html>
```

これでトップページ（index.php）のビューが完成しました。
次回はリンク（aタグ)の書き換えです。

[MAMPを使ったWordpressでのWEB制作方法6　初心者向け](https://qiita.com/fumiya0414/items/e036cbaa35c648bece11)
session not created: This version of ChromeDriver only supports Chrome version 76

```
$ pip install --upgrade pip
$ brew tap homebrew/cask
$ pip install selenium -U 
$ brew cask reinstall chromedriver
```

で解決。
chromedriverのアップデートはChromeのメジャーバージョンアップがあるたびに発生するらしいので、自動化するのが良さそう（時間ある時に）

参考：
[Selenium環境用 ChromeDriverのインストールとアップデート方法](https://dot-blog.jp/news/selenium-chromedriver-install-how-to/)
[PythonでChromeWebDriverを自動更新するselenium運用](http://blog.sbfm.jp/archives/182)
LINE を Ubuntu 18.04 で使う

Ubuntu 上で LINE を使うためには、Chrome 拡張を使うのが便利だが・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/efa3cf0f-7eb5-db13-4713-5e23a82cbdfb.png)

試してみたら LINE OpenChat に対応していなかった。
なので Windows アプリを Wineで使う方法を試してみた

# 環境 
- Ubuntu 18.04 
- wine-5.4 (Staging)
- Line5.24.1.2173

# インストール

https://line.me/ja/download
から Windows版をダウンロード。
ダウンロードした LineInst.exe を開くとWineによるインストールが行われる

# 起動

nanbuwksユーザで使用している場合

```

$ wine ~/.wine/drive_c/users/nanbuwks/Local\ Settings/Application\ Data/LINE/bin/LineLauncher.exe 
```


# 不安定？ (調査中)

OpenChat を逆スクロールすると落ちることがあったので

「Wine で　LINE  ・・・起動しない問題 | 穏やかな日々」
https://gkiseki.wordpress.com/2020/01/01/wine-%E3%81%A7%E3%80%80line-%E3%83%BB%E3%83%BB%E3%83%BB%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C/
では、
> LINEが突然使えなくなった。起動時にスプラッシュ表示後のタイミングでクラッシュする。

の解決策として、VCのランタイムをインストールする方法が紹介されていた。




winetricks をインストール

```

$ sudo apt install winetricks

```

以下のようにして VC2015 のランタイムをインストールする。

```


$ winetricks vcrun2015

```
![Screenshot from 2020-04-28 17-08-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/205dc177-8a09-b735-2e79-57c416acdff6.png)


インストール直後はLineが落ちなくなったが、再起動したらまた落ちるようになった。調査中。
メモ: Proxy 環境下での Docker

https://docs.docker.com/config/daemon/systemd/

## docker pull

* http://docs.docker.jp/engine/admin/systemd.html#systemd-http-proxy

```sh
mkdir /etc/systemd/system/docker.service.d

cat << EOL > /etc/systemd/system/docker.service.d/http-proxy.conf
[Service]
Environment="HTTP_PROXY=http://192.168.0.99:8888"
EOL

sudo systemctl daemon-reload
sudo systemctl restart docker
```

```sh
systemctl show --property=Environment docker
docker pull ubuntu:20.04
```

## docker run

* https://docs.docker.com/network/proxy/#set-the-environment-variables-manually

```sh
docker run \
 -it --rm \
 -e http_proxy="http://192.168.0.99:8888" \
 -e https_proxy="http://192.168.0.99:8888" \
 -v $(pwd)/deb:/deb \
 ubuntu:20.04 /bin/bash
```


## ホストのProxy設定

```sh:~/.bashrc
export http_proxy="http://192.168.0.99:8888"
export https_proxy=$http_proxy
export no_proxy=localhost,.example.com
```