OmniAICreator/Qiita-1.07M huggingface dataset:
vimでfsharpをquickrunで実行する(windows10)


![Screen Shot 2019-11-04 at 9.32.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149269/88ecd151-e265-fce7-af95-6db3ab23ff63.png)



# Summary

windows10で
cmdでvimを立ち上げて
fsharpコードをかいて
quickrunで実行する

## 結論
quickrunでconcurrentランナーを使うためにvimprocをメイクする

ようするにdllを作成すればいいだけ

### すること

1. scoopをインストール
2. msys2をインストール
3. vimprocをクローンしてvimproc.win64.dllを作成
4. quickrunの設定をごにょごにょと

```
msys2をインストール
> scoop install msys2

msys2のツールをインストール
> msys2
$ pacman -Sy mingw-w64-x86_64-toolchain

vimproc.win64.dllをメイク( vimprocフォルダに移動してから）
> .\tools\update-dll-mingw.bat
```

quickrunの設定（monoの場合）

```vim
let g:quickrun_config.fsharp = {}
let g:quickrun_config.fsharp = {
  \  'exec': ['%c %o']
  \ ,'command'                          : 'fsharpi'
  \ ,'cmdopt'                           : '--readline-'
  \ ,'runner'                           : 'concurrent_process'
  \ ,'runner/concurrent_process/load'   : '#load "%S:gs?\\?/?";;'
  \ ,'runner/concurrent_process/prompt' : '> '
  \ ,'hook/time/format'                 : "\n*** time : %g s ***"
  \ ,'hook/time/dest'                   : ''
  \ ,"outputter/buffer/split"           : 'vertical'
\}
```
Dockerでcoldfusionの開発環境を作ってみる！

#目的
coldfusionの開発環境を作っておき、家でいろいろ試せるようにする。
また、今後coldfusionをはじめる人のローカルにお試しの環境をサクッと作れるようにする。

#環境
coldfusionアップグレード5

#手順
①coldfusionアップグレード5のイメージを探す
②docker-compose.ymlファイルを作成
　※/html/以下はバインドマウントで、
　　ホストコンピュータからの変更が反映されるようにする。
③コンテナを起動
④ドキュメントルートにsample.cfmを置く
⑤サイトにアクセス
　http://localhost:8500/sample.cfm
⑥管理画面にアクセス
　http://localhost:8500/CFIDE/administrator/index.cfm

#各作業抜粋
##①coldfusionアップグレード5のイメージを探す
adobe公式のイメージがあるのですねぇ。

▼参考になるサイト探してみた
英語
>https://helpx.adobe.com/coldfusion/using/docker-images-coldfusion.html

イメージファイルはここにあるっぽい。
>https://bintray.com/eaps/coldfusion

下記のページの、"set me up"を押下すると、pullコマンドが確認できました。
https://bintray.com/eaps/coldfusion/cf%3Acoldfusion/2018.0.5#release

```
docker pull eaps-docker-coldfusion.bintray.io/cf/coldfusion:2018.0.5
```

##②docker-compose.ymlファイルを作成

下記を参考にしながら
>https://helpx.adobe.com/coldfusion/using/docker-images-coldfusion.html

``` docker-compose.yml
version: '3'

services:
   # coldfusionコンテナ
   coldfusion2018:
     image: eaps-docker-coldfusion.bintray.io/cf/coldfusion:2018.0.5
     ports:
       - 8500:8500               # ポートフォワード（ホスト側のポート8500をコンテナのポート8500に転送）
     environment:                # 環境変数
       - acceptEULA=YES          # EULAを環境変数に書きなさいとのこと
       - password=admin          # CF管理画面のパスワード
     volumes:
       - ./html:/app             # バインドマウント（ドキュメントルートを
                                 #"/docker-compose.ymlおいているディレクトリ/html"とする）
```

▼今回のポイントは、EULA（環境変数に許諾同意の記載が必要）
ソフトウェアの開発元と購入者の間で交わされる契約。 
ソフトウェアの使用や複製、譲渡などについて購入者に許可あるいは禁止される行為や条件、
開発元による保証やサポート、責任の範囲、免責事項などが定められている。

##③コンテナを起動する（私は、powershellで起動）

▼起動方法

```
# 対象コンテナのディレクトリへ移動（docker-compose.ymlおいている場所）
cd  C:\Users\micro\desktop\docker\coldfusion
# コンテナを起動
docker-compose up -d
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/8b9c59ca-1a7b-005b-33ce-eb2c4064fc19.png)


▼ちなみに停止方法はこちら

```
# 対象コンテナのディレクトリへ移動
cd  C:\Users\micro\desktop\docker\coldfusion
# コンテナを停止
docker-compose down
```

##④ドキュメントルートにsample.cfmを置く
```samlpe.cfm
<cfset title = "test sample.cfm">
<html>
	<head></head>
	<body>
		<h1><cfoutput>#title#</cfoutput></h1>
	</body>
</html>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/ccc5d506-1cd1-2100-e4cb-146b829c047c.png)

##⑤サイトにアクセス
http://localhost:8500/sample.cfm
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/26812904-90dd-bebe-8c63-6b6f46f13154.png)

##⑥管理画面にアクセス
http://localhost:8500/CFIDE/administrator/index.cfm
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/cdb0e6de-4708-56a7-39c5-7d0a9aa7666d.png)
※パスワードは、docker-compose.ymlで設定した"admin"

#はまりポイント（私だけ？(笑)）
##①EULA記述必須やと思って記載したが、間違えて記載していた。

▼正解

```
environment:
  - acceptEULA=YES
```

▼間違え

```
environment:
  - acceptEULA:YES
```

最初、間違えのやり方をしていると、コンテナのエラーは全く表示されていないがlocalhostが表示されない状態。
下記のコマンドを投げると、EULAのエラーがあることがわかった。
次から何かあったら、これで状況を確認しよう。

```
docker-compose logs
```

##②相変わらず、バインドマウントが効かないときがある。
docker>setting>share driveの”reset credential”で。
▼ファイヤーウォールに止められている場合はネットワークを許可
https://qiita.com/t20190127/items/3abb7c17acdc8543c8ad
【AtCoder】深さ優先探索(DFS)の典型的な問題を解く

競プロ強くなりたいので、[このサイト(AtCoder 版！蟻本 (初級編))](https://qiita.com/drken/items/e77685614f3c6bf86f44#%E4%BE%8B%E9%A1%8C-2-5-5warshall-floyd-%E3%82%92%E4%BD%BF%E3%81%86%E5%95%8F%E9%A1%8C)を参考に、AtCoderの問題を解いてアルゴリズムの基礎固めしています。今回解くのは、[AtCoderのA-深さ優先探索](https://atcoder.jp/contests/atc001/tasks/dfs_a)。全探索の一種である深さ優先探索(DFS)の典型的な問題です。

### 問題
東西南北の長方形の街にて、途中の塀を通らず、道を通って、家から魚屋へたどり着けるかという問題です。
※ちなみにこの問題を幅優先探索(BFS)で解くと、辺の重みなしの最短経路問題になります。

### 解法
今回は再帰を使わず、スタックしていく方法で解きます。[Wikipedia](https://ja.wikipedia.org/wiki/%E6%B7%B1%E3%81%95%E5%84%AA%E5%85%88%E6%8E%A2%E7%B4%A2)の深さ優先探索のページがアルゴリズムの概要がわかりやすいです。

解くポイントとしては、

■DFS一般的な部分

- スタックを作成し、未訪問のノードを入れていく
- 訪問したノードには、訪問済みの印をつける  
　※閉路がある場合に必要  
- スタックから一つずつ取り出し、処理を行う  
　※スタックなので「後入れ、先出し」。これがDFSを実現している。

■この問題特有の部分

- スタートの位置がわからないので、初めに調べる（＝スタックに入れておく）
- 親ノード(x, y)に接続しているノードは、(x-1, y), (x+1, y), (x, y-1), (x, y+1)の4通り

といったところでしょうか。
以下、pythonのコードです。

```python
from collections import deque
 
H,W = map(int, input().split())
C = [input() for _ in range(H)]
 
# sの位置をあらかじめ調べておく
for n1,c_w in enumerate(C):
    for n2,c in enumerate(c_w):
        if c == "s":
            s_h = n1
            s_w = n2
            
stack = deque([[s_h, s_w]])  # スタートの位置だけ入ったスタックを作成
 
visited_list = [[0]*W for _ in range(H)]
visited_list[s_h][s_w] = 1
 
def dfs(town, visited_list, stack):
    while len(stack) > 0:
        h, w = stack.pop()
        if town[h][w] == "g":
            return "Yes"
        for j, k in ([1, 0], [-1, 0], [0, 1], [0, -1]):
            new_h, new_w = h+j, w+k
            if new_h < 0 or new_h >= H or new_w < 0 or new_w >= W:
                continue
            if town[new_h][new_w] != "#" and visited_list[new_h][new_w] == 0:
                visited_list[new_h][new_w] = 1
                stack.append([new_h, new_w])
    
    return "No"
 
print(dfs(C, visited_list, stack))
```
[Elm] andThenとmapの違いについて

## それぞれの定義

主にTask型を例にとって話す。

```elm
andThen : (a -> Task x b) -> Task x a -> Task x b
```

```elm
map : (a -> b) -> Task x a -> Task x b
```

## 考察

### mapについて

手前味噌ではあるが、map関数の本質的な部分に関しては以前書いた以下の記事に詳しい。
[>>> Elmのmap関数について一通りまとめてみた - @lilpacy | Qiita](https://qiita.com/lilpacy/items/df92deb6e5de78f7aab5)

### andThenについて

Task以外の代表的な型について公式の説明を取り上げつつ説明を試みる。

```elm:Maybe
andThen : (a -> Maybe b) -> Maybe a -> Maybe b
```

>Maybe.andThen: Chain together many computations that may fail.
>Maybe.andThen: 失敗する可能性のある多くの計算を連結します。

```elm:Result
andThen : (a -> Result x b) -> Result x a -> Result x b
```

>Result.andThen: Chain together a sequence of computations that may fail.
>Result.andThen: 失敗する可能性のある一連の計算を連結します。

`map`は大抵のプリミティブな型に存在しているが、`andThen`は失敗する可能性を表現した型（Maybe,Result,Taskなど）にしか存在しないのが特徴的だった。

以上より、andThenは一般に、失敗する可能性のあるいくつかの処理をチェーン（して平坦化）するものだと解釈できそうだ。

### 両者の違い

#### 2019.11.10 追記
以下にうだうだ書いているけれど、とどのつまり、`map`と`andThen`の違いは、**データ構造に値を包んだまま内部の値を変換するか、値を包んだデータ構造から値を取り出して再度包み直すか**と言って良さそうだと思った。

---

違いは第一引数にとる関数の構造が`(a -> Task x b)`なのか`(a -> b)`なのかだけではあるが、[公式](https://package.elm-lang.org/packages/elm/core/latest/Task)的には

>Task.andThen:
>Chain together a task and a callback.
>The first task will run, and if it is successful,
>you give the result to the callback resulting in another task.
>This task then gets run

>Task.andThen:
>タスクとコールバックを連結します。
>最初のタスクが実行され、成功すると、
>コールバックに結果が渡され、別のタスクが発生します。
>次に、このタスクが実行されます。

とあるように、`andThen`はコールバックをするため

>Task.map: Transform a task.
>Task.map: タスクを変換します。

`map`は変換するためのものであると説明がなされている。

しかし、[公式](https://package.elm-lang.org/packages/elm/core/latest/Task)には`Task.succeed`の説明のところに、

>Task.succeed:
>A task that succeeds immediately when run. It is usually used with andThen. 
>You can use it like map if you want:

>Task.succeed:
>実行するとすぐに成功するタスクで、通常andThenと共に使用されます。
>それ(andThen)は必要に応じてmapのように使用できます。

とあるように、`andThen`も`map`のようにラップされた値をラップされたまま変換するという使い方もできる。

以下、それぞれ`andThen`を`map`的に使った場合と、`map`を`andThen`的に使った場合の事例。

```elm:andThenをmap的に(ラップされた値の変換として)
Process.sleep (60 * 60 * 1000)
    |> Task.andThen (\_ -> Time.now)
    |> Task.andThen (\t -> Task.succeed (Time.posixToMillis t))
```

```elm:mapをandThen的に(コールバックのつなぎとして)
Process.sleep (60 * 60 * 1000)
    |> Task.map (\_ -> Time.millisToPosix 1572814010059)
    |> Task.map (\t -> Time.posixToMillis t)
```

ちなみに、例が適切かどうかは不明。

## まとめ

つまるところ、違いは第一引数に取る関数の構造の違いだけであるので、`andThen`を`map`のように使うこともできるし`map`を`andThen`のように使うこともできそうだ。

けれど、`andThen`、`map`という名前がつけられているだけにそれぞれをみだりに役割を変えて使うことは可読性という観点からは避けた方が無難であると感じた。

もっとも、`Task.andThen`にはTaskの再帰をフラットにして処理をチェーンしていくという使い道の方が一般的みたいではあるが。

>最後にTaskの再帰方法です。単に受け取った結果を元に再びAPIを叩くと、Task (Task Response)のような感じでTaskがネストしてしまいます。それをフラットにする関数がTask.andThenになります。再帰方法はCmdを利用したときと同じ形になります。最終結果は固定値をTask.succeedで返します。

[>>> ElmでHttpをわかってしまおう - @ababup1192 | Qiita](https://qiita.com/ababup1192/items/b03fce202e1018bc4992#task%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3)

以上。
Firebase /  Firestore のTimestamp の比較メソッドisEqualとcompare

FirestoreにてTimestamp型を使用していますが、２つのTimestampの比較方法がわからなかったので今回調べました。

## isEqual(object:)
インスタンスが同一かどうか

```swift
let now = Timestamp()
now.isEqual(now) // -> true
```

## compare(object:)
2つのTimestampが同一時間か、もしくは以上・以下か

```swift
let now = Timestamp()
now.compare(now) // -> `.orderedSame`
```

`compare(object:)`メソッドによる結果

```swift
// 左は右よりも小さい
case orderedAscending
// 左は右よりも大きい
case orderedDescending
//　左右が同じ
case orderedSame
```

以上、備忘録です。
キーボードで操作できるiOS/iPadOSブラウザWazari Browserを作った

![github_issue_without_touch](https://user-images.githubusercontent.com/1880965/67365457-a69d0880-f5ac-11e9-84ef-06d448a7c4c6.gif)

[App Store - Download](https://apps.apple.com/us/app/wazari-browser/id1475585924?mt=8)

ブラウザを作ったといってもiOSではWebkitを使わないといけないという制約があるので、実際はWebviewに色々UIを追加したものを作りました。そう、React Nativeでね。 2015年に[一人React Native](https://qiita.com/advent-calendar/2015/react-native) を書いたのが非常に懐かしいです。あれから、どのようにReact Nativeが進化していったかを含めて良い勉強になりました。

開発することを決めた理由は、iPad Proのキーボード操作が不便だったからです。画面をタップしたり、キーボードを操作したり、PCに慣れていると非常に面倒。また、Capslockの位置にControlキーがないのも操作に支障がありました。（エンジニアならESCキーが必須だと思う？ので、バッテリーと母体との接続を考えると外部キーボードはスマートキーボードではなくて、Magic Keyboardを購入しています）

ちなみにWazari Browserは[Wazaterm](https://www.wazaterm.com) というブラウザからTerminalを操作するサービスのサブプロジェクトとして開発しました。Wazatermの利用は課金が必要ですが、Wazari BrowserはGPLv3のオープンソースとして[ソースを公開しています。](https://github.com/shohey1226/Wazari)

機能は、下記のようになっていま。す

* Customizable shortcuts to operate browser. e.g. Change tabs without touching screen.
* 画面にタッチすることなくブラウザを操作できる
* CapslockのCtrl化等のキーマッピングが可能（外付けキーボード利用時）
* タブ切り替え等のショートカットキーを変更できる
* ブラウザ画面を分割できる
* 検索エンジンの切り替え Google or Duckduckgo
* 検索窓から履歴ページ移動・タブ移動

少しずつ開発時のポイントを投稿していこうと思います。
年月日　日付　順序の種類

ISO 8601-1:2019 - Date and time - Representations for information interchange - Part 1: Basic rules 
ISO 8601-2:2019 - Date and time - Representations for information interchange - Part 2: Extensions 

   Date and Time on the Internet: Timestamps
https://tools.ietf.org/html/rfc3339

日付及び時刻の表記を規定する JIS に「令和」を追加 2019年5月20日
https://www.meti.go.jp/press/2019/05/20190520006/20190520006-2.pdf

JIS X 0301：2019  情報交換のためのデータ要素及び 交換形式−日付及び時刻の表記 （追補1）
http://kikakurui.com/x0/X0301-2019-02.html

ロケールのカテゴリを使用した各国語対応   日付の形式
https://docs.oracle.com/cd/E19683-01/816-3979/overview-46/index.html

ISO 8601 -- Date and Time API の基礎知識 (ja)
https://www.coppermine.jp/docs/notepad/2016/12/iso-8601.html

国際化に伴う日付の年月日順序判定をやってみた
https://qiita.com/y_koh/items/541e72957d03c9e900d0

日時のフォーマット（ISO 8601）
https://qiita.com/kidatti/items/272eb962b5e6025fc51e

世界の「年月日」の表現　　（数と形の文化を知る）　＝国（言語）で分類＝
http://kyotoka4no3.blog.jp/archives/4863280.html

所変われば、表記も変わる ～ 日付の表記法
https://www.quicktranslate.com/blog/2017/07/所変われば、表記も変わる-～-日付の表記法/


英語の日付で世界の国は「アメリカ式表記」「イギリス式表記」を採用どちらを使用しているか？
https://english-columns.weblio.jp/?p=234

日付ってなんでアメリカは「月/日/年」でイギリスは「日/月/年」なの？　日本は「年/月/日」なんでややこしいったらありゃしない
https://news.livedoor.com/article/detail/13423801/

曜日や日付、時間と場所の順序。心地よく響く英語の７パターン！
https://bebeblanchecoco.com/date-time-location/

ベトナム式日付の書き方  ～日本とは逆の順で～
https://life.viet-jo.com/howto/life/38
plunkerでtensorflow.js その15

#概要

plunkerでtensorflow.jsやってみた。
argMax使ってみた。

#サンプルコード

```

tf.setBackend('cpu');
let index2alphabet = [];
let alphabet2vector = {};
let trainXArray = [], 
  trainYArray = [];
for (let i = 0; i < 26; i++) 
{
  index2alphabet[i] = String.fromCharCode('a'.charCodeAt(0) + i);
}
for (let i = 0; i < 26; i++) 
{
  alphabet2vector[index2alphabet[i]] = Array(26).fill(0);
  alphabet2vector[index2alphabet[i]][i] = 1;
}
trainXArray.push([alphabet2vector['y'], alphabet2vector['z']]);
trainYArray.push(alphabet2vector['a']);
trainXArray.push([alphabet2vector['z'], alphabet2vector['a']]);
trainYArray.push(alphabet2vector['b']);
for (let i = 0; i < 26 - 2; i++)
{
  trainXArray.push([alphabet2vector[index2alphabet[i]], alphabet2vector[index2alphabet[i + 1]]]);
  trainYArray.push(alphabet2vector[index2alphabet[i + 2]]);
}
const trainX = tf.tensor3d(trainXArray);
const trainY = tf.tensor2d(trainYArray);
const model = tf.sequential();
model.add(tf.layers.lstm({ 
  units: 64,
  returnSequences: false,
  inputShape: [2, 26]
}));
model.add(tf.layers.dense({
  units: 64, 
  activation: "relu"
}));
model.add(tf.layers.dense({
  units: 26, 
  activation: "softmax"
}));
model.compile({
  optimizer: tf.train.adam(),
  loss: tf.losses.softmaxCrossEntropy
});
model.fit(trainX, trainY, {
  epochs: 160,
  verbose: 0,
  validationData: [trainX, trainY],
}).then(() => {
  const testX = tf.tensor3d(trainXArray);
  const predicts = model.predict(testX);
  const predictsArray = predicts.argMax().arraySync();
  for (let i = 0; i < predictsArray.length; i++) 
  {
    let predictAlphabet = String.fromCharCode('a'.charCodeAt(0) + predictsArray[i]);
    document.write(predictAlphabet);
  }
  alert("ok");
});

```

#成果物

https://embed.plnkr.co/Na3jWjvWjt5jRrhYoomz/

以上。
plunkerでtensorflow.js その14

#概要

plunkerでtensorflow.jsやってみた。
binaryCrossentropy使ってみた。

#サンプルコード

```
tf.setBackend('cpu');
const model = tf.sequential();
model.add(tf.layers.dense({
    units: 8,
    activation: 'tanh',
    inputShape: [2]
}));
model.add(tf.layers.dense({
    units: 1,
    activation: 'sigmoid'
}));
model.compile({
    optimizer: 'adam',
    loss: 'binaryCrossentropy'
});
const xs = tf.tensor2d([[1, 0], [0, 1], [1, 1], [0, 0]], [4, 2]);
const ys = tf.tensor2d([[1], [1], [0], [0]], [4, 1]);
model.fit(xs, ys, {
    batchSize: 4, 
    epochs: 1000
}).then((d) => {
    var str = "loss = ";
    str += d.history.loss[0]; 
    str += "<br>1, 1 = ";
    var pre0 = model.predict(tf.tensor2d([1, 1], [1, 2]));
    str += pre0.dataSync() + "<br>0, 0 = ";
    var pre1 = model.predict(tf.tensor2d([0, 0], [1, 2]));
    str += pre1.dataSync() + "<br>0, 1 = ";
    var pre2 = model.predict(tf.tensor2d([0, 1], [1, 2]));
    str += pre2.dataSync() + "<br>1, 0 = ";
    var pre3 = model.predict(tf.tensor2d([1, 0], [1, 2]));
    str += pre3.dataSync() + "<br>";
    document.write(str);
});
```

#成果物

https://embed.plnkr.co/xTaxEW41fcrjvWcxKDxL/


以上。
Railsで:formats=>["image/*"]でActionView::MissingTemplateエラーが発生した場合の対応

## 現象

Railsで500エラーが発生し、エラーログにはActionView::MissingTemplateと書かれていました。
media/ads/show.erbは存在し、これまで問題なく表示できていたURLだったので、なぜ？？となりました。

エラーログの:formats=>["image/*"]を見る限り画像のテンプレートを探しに行ってしまっているようなのですが、URLに`.png`や`.jpg`などの拡張子が付いている訳でもありませんでした。

```
ActionView::MissingTemplate (Missing template media/ads/show, media/application/show, application/show with {:locale=>[:ja], :formats=>["image/*"], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :coffee, :jbuilder]}. Searched in:
```

## 結論

acceptヘッダーに`image/*`を指定することで再現しました。
おそらく、リンク先の画像を一括ダウンロードするようなブラウザ拡張の対象URLに引っかかってしまったのだと思います。

```
curl '<URL>' -H 'accept: image/*;'
```

## 解決方法（方針）

画像のformatを弾く方針で考えてますが、formatが指定されている訳ではないのでできるか不明です。
対応完了したら追記します。


## 詳細

formatsを取得している処理はactionpackライブラリの`mine_negotiation.rb`に書かれていました。
（actionpack-5.0.2を使用しています。）

```ruby

      def formats
        fetch_header("action_dispatch.request.formats") do |k|
          params_readable = begin
                              parameters[:format]
                            rescue ActionController::BadRequest
                              false
                            end

          v = if params_readable
            Array(Mime[parameters[:format]])
          elsif use_accept_header && valid_accept_header
            accepts
          elsif extension_format = format_from_path_extension
            [extension_format]
          elsif xhr?
            [Mime[:js]]
          else
            [Mime[:html]]
          end
          set_header k, v
        end
      end
```

今回、拡張子が指定されていないので`params_readable`はnilになります。
そして、HTTPリクエストのacceptヘッダーに`image/*`を指定したので、use_accept_headerメソッドと`valid_accept_header`メソッドは共に`true`を返します。
結果、`accepts`メソッドが呼び出され、`image/*`をもつMine.Typeインスタンスがformatsの結果として返されます。
FLASKのセッション登録

セッションについて、他人のソースを見ていても、よく分からない。

一応、質問できるサイトに下記の相談をしてみた。

https://teratail.com/questions/221079?modal=q-comp


#ログイン状態

DJANGOなどの他のフレームワークには、今更戻れない状態で、
自分に追加したいのは、単なる複数ユーザーに対応できる
ログイン機能だけ・・・

欲しいのは、ユーザーＩＤだけで、後の処理はユーザーＩＤさえわかれば、
ＳＱＬでクエリを使って、リストオブジェクトとして複数メンバを
取得すれば、いいだけである。


さてさて、SESSIONというオブジェクトが良く分からなくなり、
参照しているソースを変えようかなと思う。。。

どうも、いろんなPYTHON-FLASKの本を見ていても、
ここのところに言及しているソースが見つからない・・・


とりあえず、Pythonで、SQLAlchemyを使うという
ライブラリがあるみたいで、このライブラリのSESSIONを使うのが
正解と言うような気がしてきた。

しかしながら、このライブラリが増えたら
またまた使いこなしを覚えるのに時間がかかる。

あと原理原則を言えば、直接データベースを触るテクニックをマスターしたい。

```python
@app.route('/add', methods=['POST'])
def add():
    text=request.form['text']
    db.session.add(text)　　　→　このゴニョゴニョが怪しい気がする
    db.session.commit()
    return redirect('/'))
```

昨日は一日ボヤっとしていたのであるが、今朝がたに
下記の記事をメモ書きでトレース

https://qiita.com/kiyokiyo_kzsby/items/f8aa0bf68007e18d6882

いままでソースをダウンロードして、コンソールで動かしていて
イメージングしていたのだが、手書きのメモパッドに
書き出すことで、コンピュータを頭の中に描くことができることに気づく

これを名付けると、

脳内デバッグモード

ということになる。


なぜ、いままでこれに気づけなかったのか。。。


話は変わるが、中国語の文脈をつかむのも、この方法が良いのだろう
そのためか偶然にもメモパッドは、黒字に緑の字である

黒板の色は、緑字に白字だったりするが、脳の中にすっと文字が入ってくるので
おそらく記憶化しやすいのだろう

#エンディング

そしてこの記事の終盤に入るが、リンク先の記事を見ていても
セッションを使ってユーザーを識別するところは
記載されているが、複数からのアクセスがあった場合に
どうなるかというのはコメントがなかった。

おそらくログインできるのは１ユーザであり、違うユーザーが
やってきた場合には、ユーザーが違うのではじかれる処理になる。

まあサービスInにあたっては、これはこれで良いのかもしれない

とりあえず今日のところはユーザー識別までは、この処理で行けそうだ

あとはメインの処理において、データとユーザをプロパティで紐付けして
クエリを働かせれば良いだろう。

なんとなく、この週末の進展は得られた感じ。

今日中にリリースしないと、もうすぐ自分への仕事依頼が殺到する。
[ec2] ロードバランサ登録・登録解除コマンド

公式が分かりづらかったので自分用に簡潔にまとめておく。

## ロードバランサー

EC2 インスタンスを登録すると、ロードバランサーに追加されます。ロードバランサーは、登録済みインスタンスの状態を、有効になっているアベイラビリティーゾーンで常に監視し、正常なインスタンスにリクエストをルーティングします。インスタンスの需要が上昇した場合、需要に対応できるようにロードバランサーに追加インスタンスを登録できます。

## 登録
準備が整ったら、ロードバランサーにインスタンスを登録します。インスタンスがロードバランサーで有効なアベイラビリティーゾーンにある場合、そのインスタンスは、必要な数のヘルスチェックに合格するとすぐに、ロードバランサーからトラフィックを受信する準備が整います。

## 登録解除
EC2 インスタンスを登録解除すると、ロードバランサーから削除されます。登録解除するとすぐに、ロードバランサーはインスタンスへのリクエストのルーティングを停止します。需要が低下した場合や、インスタンスを保守する必要がある場合、ロードバランサーからインスタンスを登録解除することができます。登録解除されたインスタンスは実行され続けますが、ロードバランサーからトラフィックを受信しなくなります。準備ができたら、再度ロードバランサーに登録することができます。


```shell:登録
aws elb register-instances-with-load-balancer --load-balancer-name my-loadbalancer --instances i-4e05f721
```

```shell:登録解除
aws elb deregister-instances-from-load-balancer --load-balancer-name my-loadbalancer --instances i-4e05f721
```

[EC2 インスタンスを Classic Load Balancer に登録または登録解除する - Elastic Load Balancing](https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/classic/elb-deregister-register-instances.html)
クエリで Project Euler Problem 2

## 【お題】
[Problem 2](http://odz.sakura.ne.jp/projecteuler/index.php?cmd=read&page=Problem%202 "Problem 2 - PukiWiki")。
> フィボナッチ数列の項は前の2つの項の和である. 最初の2項を 1, 2 とすれば, 最初の10項は以下の通りである.
>
> 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...
> 数列の項の値が400万以下の, 偶数値の項の総和を求めよ.

400万という数字に一瞬たじろぐけど、フィボナッチ数列って指数関数的に増加するから、あっという間に到達するんだよな。

## 【環境】
| SQLServer | SQLCMD |
| ---- | ---- |
| 2017 | 14.0.1000.169 |
設定はデフォルト。

## 【クエリ 1】
偶数値の項は 3個毎に出現するから、3個一行に並べて縦に集計すればいい。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254888/b6117eb1-b67b-7f99-7ef6-02f0a6ac2664.png" width=30%>
クエリに起こすと以下。

```SQL
DECLARE @1st    INT = 1;                    -- 最初の項
DECLARE @2nd    INT = 2;                    -- 二つ目の項
DECLARE @Max    INT = 4000000;              -- 最大値

;WITH [CTE_Fib]([a], [b], [c]) AS (
    SELECT
          @1st
        , @2nd
        , @2nd + 1st
    UNION ALL
    SELECT
          [c] + [b]
        , ([c] + [b]) + [c]
        , (([c] + [b]) + [c]) + ([c] + [b])
    FROM [CTE_Fib]
    WHERE   ([c] + [b]) + [c] <= @Max
)
SELECT SUM([b]) FROM [CTE_Fib]
;
GO

-----------
    4613732

(1 行処理されました)
```

## 【クエリ 2】
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254888/402b0220-cb43-9f28-517c-51229e2ee261.png" width=40%>
で良ければ（ダメだろ）以下。

```SQL
DECLARE @2nd    DEC(7, 0)   = 2;            -- 二つ目の項
DECLARE @Para   DEC(10, 9)  = 4.236067675;  -- 偶数項算出係数
DECLARE @Max    INT         = 4000000;      -- 最大値

;WITH [CTE_Fib]([b]) AS (
    SELECT @2nd
    UNION ALL
    SELECT CONVERT(DEC(7, 0), [b] * @Para) FROM [CTE_Fib]
    WHERE   [b] * @Para <= @Max
)
SELECT SUM([b]) FROM [CTE_Fib]
;
GO

----------------------------------------
                                 4613732

(1 行処理されました)
```
13桁以下の偶数までなら一応これでも求まる。それより大きいと誤差が発生するけど。
S3とherokuの設定に関するエラー

ActiveStorageでアップロードした画像をS3に保存する際に生じたエラーについて書きました。

※ActiveStorageでアップロードした画像をS3に保存する方法は、以下の記事を参考にするとよいと思います。
https://kykt35.hatenablog.com/entry/2019/02/19/093112


# エラーの発生内容
上記の記事を参考にしてS３の設定をして、ブラウザで本番環境の挙動を確認しようとしたら、application errorが発生した。

## 画像
https://gyazo.com/e2dec7f7f1e981ee00368f8e2c3e1fd5

# エラーの原因追求

herokuにログインして、heroku環境でrails c(コンソール)コマンドを実行する。

```
$ heroku run rails c
Running rails c on ⬢ enigmatic-reaches-21915... up, run.1720 (Free)
Traceback (most recent call last):
	109: from /app/bin/rails:9:in `<main>'
	108: from /app/vendor/bundle/ruby/2.5.0/gems/activesupport-5.2.3/lib/active_support/dependencies.rb:291:in `require'
.
.
.
```
## 画像
https://gyazo.com/e4e5aa2e2e017caa7306f1ff7ebb850c

# エラーの原因発見
```
/app/vendor/bundle/ruby/2.5.0/gems/aws-sigv4-1.1.0/lib/aws-sigv4/signer.rb:612:in `extract_credentials_provider': Cannot load `Rails.config.active_storage.service`: (Aws::Sigv4::Errors::MissingCredentialsError)
missing credentials, provide credentials with one of the following options:
  - :access_key_id and :secret_access_key
  - :credentials
  - :credentials_provider
```
ログの一番下を見ると、エラーの原因を発見した。このエラーは、S3のaccess_key_idとsecret_access_keyがherokuの環境上で設定できていないことが原因で起こるエラーのようだ。

## 画像
https://gyazo.com/11394ef3200ae8eb33645233b8995cdb

# 解決方法

```
$ heroku config:set AWS_ACCESS_KEY_ID="＜S3で設定したACCESS_KEY＞"
Setting AWS_ACCESS_KEY_ID and restarting ⬢ enigmatic-reaches-21915... done, v23
AWS_ACCESS_KEY_ID: ＜S3で設定したACCESS_KEY＞
$ heroku config:set AWS_SECRET_ACCESS_KEY="＜S3で設定したSECRET_KEY＞"
Setting AWS_SECRET_ACCESS_KEY and restarting ⬢ enigmatic-reaches-21915... done, v24
AWS_SECRET_ACCESS_KEY: ＜S3で設定したSECRET_KEY＞
```
herokuにログインして、上記のコマンドを実行してS3のaccess_key_idとsecret_access_keyを設定する。そうしたところ、application errorは解決できました。



＜参考記事＞
・https://qiita.com/nobu0717/items/a34a896f6e7ad68dc54e
・https://teratail.com/questions/199552
・https://qiita.com/m-itoidcf/items/77d064147a32169b5449
Webプログラミングの勉強を始めて約半年が経ちました

#導入
はじめまして、石川県在住の大学生です。webプログラミングの勉強を始めて約半年が経過したので**webプログラミングに興味がある方**や**webプログラミングの勉強を始める方**に向けてなにかアドバイスを送ることができるのではないかと思いQiitaの記事を書くことにしました。また、webプログラミングについて勉強したことをノート代わりとしても利用していこうと考えています。
「もっとこうした方がいい！」「この本やサイトを参考にしたらいいよ！」などありましたら教えてくださると嬉しいです！

#半年間で行った行動内容
以下に半年間で行った勉強内容と使用した参考書などを書き出します。

**1. HTML、CSSについての理解**
 ・スラスラわかるHTML＆CSSのきほん（参考書）

**2. HTML、CSSだけを用いてサイトを模写**
 ・SANGOというサイトを模写しました。比較的簡単な構成になっているのでおすすめです。
　[https://saruwakakun.design/]

**3. Bootstrap4についての理解**
　・Bootstrap4ファーストガイド-CSS設計の手間を大幅に削減！-（参考書）

**4. HTML、CSSに加え、Bootstrap4を用いてサイトを模写（これは2サイト模写しました）**
　・2で模写したSANGOをBootstrap4を用いてもう一度模写したのち、iSaraというサイトを模写しました。
　[https://isara.life/]

**5. WordPressについての理解**
　・WordPress-仕事の現場でサッと使える！デザイン教科書-（参考書）

**6. XAMPPを使用してみる**
**7. 完全オリジナルのホームページの作成開始**
**8. SEO対策についての理解**
　・いちばんやさしい新しいSEOの教本-人気講師が教える検索に強いサイトの作り方-（参考書）

**9. モバイルファーストについて学び実装する**
**10. jQuery、Javascriptに触れる** 
**11. レンタルサーバーを使用をしてみる**
　・ロリポップというサイトを使用しています。他サイトに比べてコスパがいいと思っています。
　[https://user.lolipop.jp/]

**（※今後それぞれの専門用語について詳しく説明していくつもりです）**

以上の学習から約半年間である程度自分の思い通りにホームページを作成できる段階に持っていくことができました。サイト作成には最低限1と2をマスターすれば大丈夫であり、自分が想像していたものよりwebサイト制作のハードルは低いと感じました。

#おわりに
今後は、webプログラミングについて詳しく説明していこうと考えています。個人としても、さらなる技術向上を図っていきたいと思っています。少しでもwebプログラミングの楽しさが伝わればと思っています。
[Elm] Taskの使い方について端的に

長めのしっかり解説した記事が多いので、ここでは端的に要点をまとめてみる。

## Taskの使い方ざっくり

Taskは基本的に非同期処理の結果をMsgのペイロードに乗せてCmdを発行するために使われる。

## 具体的な使い方

```elm:言葉で
Task.attempt (ResultをペイロードにとるMsgのコンストラクタ) (Task e x)
```

```elm:コードで
type Msg = ExampleMsg (Result e x)

Task.attempt (ExampleMsg (Result e x)) (Task e x)
```

Taskのeとx、ExampleMsgのペイロードであるところのResultのeとxが一致することが重要。
失敗する可能性がない場合はattemptではなくperformを用いる。

```elm:言葉で
Task.perform (xをペイロードにとるMsgのコンストラクタ) (Task Never x)
```

```elm:コードで
type Msg = ExampleMsg x

Task.perform (ExampleMsg x) (Task Never x)
```

以下、それぞれattemptとperformの定義

```elm
attempt : (Result x a -> msg) -> Task x a -> Cmd msg
```

```elm
perform : (a -> msg) -> Task Never a -> Cmd msg
```

ちなみに、Taskの定義は幽霊型だったりする。

```elm
type Task err ok = Task
```

よって、Taskを生成するためには`succeed`や`fail`を始めとしたAPIを用いる必要がある。

```elm
succeed : a -> Task x a
```

```elm
fail : x -> Task x a
```

## 便利な点

`map`や`andThen`、`onError`や`mapError`を使用することでCmdにする前に`Task e x`の`e`と`x`を自在に変換しておくことができる。

よって、最終的に欲しい値以外のtempな値をCmdで飛ばしたりmodelに保持したりする必要がなくなる。

### 参考

[Task - core 1.0.2 | elm-lang.org](https://package.elm-lang.org/packages/elm/core/latest/Task)
[ElmでHttpをわかってしまおう - @ababup1192 | Qiita](https://qiita.com/ababup1192/items/b03fce202e1018bc4992)

以上。
pythonでLinuxコマンド文字列を整形する汎用的なプログラム

# 背景
Linuxコマンドを用いて例えばCPU温度などを定期的にDBに追加しています。
この時にコードをなるべく少なくしようとコマンドだけで色々と調べたのですがなかなか難易度が高かったので作成しました。

# 仕様
汎用的に利用できるようにしたいのでpythonのFormatのような動きを実現させたい。

# コード
こうなりました。

```python
import sys;
print(sys.argv[1].format(*sys.argv[2].split(" ")) )
```
 * 第一引数：Formatの指定文字列
 * 第二引数：空白で区切られたFormatに入れる文字列


## 利用方法

```sh
mosquitto_sub -t "#" -v |xargs -I@ python3 /home/hashito/command/text2format.py "insert into mqtt.msg (t,m,tm)values(\'{}\',\'{}\',UNIX_TIMESTAMP(NOW()))" @ | xargs -I@ mysql -e "@"
```

mqttの内容を雑にマリアDBにつっこめます


# 追記
@shiracamus 様からコメントいただきました。
コマンドのみだと下記の形で出来るようです。

```console
$ echo "a b" | xargs echo | xargs printf "insert into mqtt.msg (t,m,tm)values('%s','%s',UNIX_TIMESTAMP(NOW()))"
insert into mqtt.msg (t,m,tm)values('a','b',UNIX_TIMESTAMP(NOW()))
```

これをずっと探していたのですが、自分の知識がなく助かりました！
ありがとうございました！
AtCoder Grand Contest 040 参戦記

# AtCoder Grand Contest 040 参戦記

## [AGC040A - Dividing a String](https://atcoder.jp/contests/agc040/tasks/agc040_a)s

25分で突破したが、WA1なので30分扱い.

`><` の間は0で、`<>` の間は、左右の0から1づつインクリメントしてきた大きい方なので、以下みたいに2パスでやれば解ける.

```python
S = input()

N = len(S) + 1
t = [0] * N
for i in range(N - 1):
    if S[i] == '<':
        t[i + 1] = t[i] + 1
for i in range(N - 2, -1, -1):
    if S[i] == '>':
        t[i] = max(t[i], t[i + 1] + 1)
print(sum(t))
```

## [AGC040B - Two Contests](https://atcoder.jp/contests/agc040/tasks/agc040_b)

全く手付かずで敗退.
【独学】React Nativeを初心者が学習してみた part1

# はじめに
筆者のプログラミング学習歴は独学で５ヶ月ほど。
普段はRuby on Rails5を学習している初学者の私が、面白そうなのでReact Nativeを学習してみることにした。
iOSアプリ作ってみたいし、ついでにReactも学べばRailsで作ったWebサービスのフロントエンドが充実するかもしれない！といった安直な考えだけで学習を始めてしまったのだが、本当にこれで良かったのか...。
その答えはいずれ私がReact,React Nativeを習得した時にわかるだろう。

# React Nativeとは何か
[公式サイト](https://facebook.github.io/react-native/)や様々なqiitaの記事を読み漁ったが、[こちらの記事](https://qiita.com/Iwark/items/7c27e919bb71f8b256f6)にわかりやすくまとめられていた。
要は、React NativeはReactをモバイルでも使えるようにしたもの。
そしてそのReactはJavaScriptのフレームワークということ。
現時点ではこの程度しか理解できなかった。
クロスプラットフォームとか、Reduxとかexpoとか、いろんな用語が出てきたけどとりあえず今はそんなに気にしないことにする。
あと、FaceBookが開発していて、FaceBookやInstagram,Airbnbとかのめっちゃ名前聞いたことあるサイトがReactを採用してるらしい。
その情報で学習のモチベーションを高めたところで、実際にどのように学習していくかを検討してみる。

# ReactNative学習コンテンツの選択
困ったことに、Railsのようにホイホイ情報が出てくるわけでもなく、学習コンテンツ自体もRailsに比べると少ないと感じる。
とりあえず現状で使えそうなコンテンツは、

- [Progate Reactコース](https://prog-8.com/languages/react)
- [ドットインストール React講座](https://dotinstall.com/lessons/basic_reactjs)
- [公式チュートリアル(React)](https://ja.reactjs.org/tutorial/tutorial.html)
- [公式チュートリアル(React Native)](https://facebook.github.io/react-native/docs/tutorial)
- [Youtube React & React Native チュートリアル](https://www.youtube.com/results?search_query=React+Native+tutorial)
- [Udemy React Native講座](https://www.udemy.com/course/react-native-ios-android/)

といったところが思い浮かんだ。
他の記事や公式サイトを眺めた感じ、**Reactが書ければReact Nativeも書けるっぽい**ので、とりあえず情報量の多いReactを主に学習しつつ、頃合いを見つつReact Nativeで適当にアプリとか作ってみる感じで学習を進めていくことにしよう。


# Progate Reactコースを終えて
ということでプログラミングを始めた当初からお世話になりまくっているProgate様でReactコースを受講。
~~そもそも超初心者の頃にやったJavaScriptもほぼほぼ忘れてたのでJavaScriptコースも一周ザーッとやって書き方とか思い出しておいた。~~
ボリュームはそんなにないので半日もあれば終わる。
**Reactってこんなことできるんだ〜くらいは分かった**。
でもやっぱりProgateでわかるのはその程度だし、ブラウザ上だけで完結できちゃってるから、今度はゆるくドットインストールでざっとさらってみようと思う。

# おわりに
1. iOSのアプリ作るのに、現在使用しているメモリ4GBのMacBook Airじゃきついだろうから、16GB以上あるPCを購入することを決意した。なる安で仕入れたいところ。
2. Railsで作ったアプリのフロントにReactあてられるんじゃね？
って、簡単に考えたけど、実際どうなるんだろ？と思ってグーグル先生に聞いたところ、RailsとReactの連携には色々方法があるっぽい。
その辺もまだざっと眺めた程度だけど、その時が来たらきちんとまとめてみようと思う。
その時が来たら。

part2につづく。
Vue で SVG の色、サイズを指定できる Icon Component 

## Inline SVG は動的に色、カラーが指定できる
SVG は Inline で HTML で挿入できて、後から動的に色、カラーが指定できます。
これはものすごく便利です。

## SVG は Vue Component のように読み込める

Webpack plugin [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader) を使うと、import するだけ SVG 画像を コンポーネントとして表示することができるようになります。

vue-cli だと下記コマンドだけで svg 画像が import できるようにります。

```
vue add svg
```

こんな感じです。

```vuejs
<template>
  <nav>
    <a href="https://github.com/vuejs/vue">
      <VueLogo />
      Vue
    </a>
</template>
<script>
import VueLogo from './public/vue.svg';
export default {
  name: 'Example',
  components: {
    VueLogo,
  },
};
</script>
```

## SVG を読み込んで、種類、色、サイズを指定できるコンポーネントを作る

直接 SVG 読み込んでもいいのですが、インターフェイスを共通化したコンポーネントがあった方が扱いやすいと思ったので作ってみました。

[demo](https://storybook-static-93dcj3vny.now.sh/?path=/story/*)

### 書いてみたコード

- アイコンの切り替えは [is](https://jp.vuejs.org/v2/guide/components-dynamic-async.html) を使ってます。
- サイズは親のサイズに合わせるようにしています。
- 色の指定がない場合は、親のカラーが使われます。
- SVG の中にサイズ指定があるものを使うとサイズが反映されません。ファイルを開いて削除しています。

```vue
<template>
  <div v-bind:style="{ display: 'inline-block', width: size  + 'px' }">
    <svg :is="type" :stroke='stroke' :fill='fill' />
  </div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue';

import arrowDown from '@/assets/icons/arrow-down.svg?inline';

export default Vue.extend({
  components: {
    arrowDown,
  },
  props: {
    type: {
      type: String as PropType<string>,
      required: true,
    },
    stroke: {
      type: String as PropType<string>,
      default: 'none',
    },
    fill: {
      type: String as PropType<string>,
      default: '#333',
    },
    size: {
      type: Number as PropType<number>,
      default: 48,
    },

  },
});
</script>
```

コード全体は https://github.com/coa00/VueSvgIcon に置いてます。
海外のYoutuberの配信のコメント欄を日本語で見る（プログラミング知識不要

にじさんじidの配信がみたい！
https://www.youtube.com/channel/UCpJtk0myFr5WnyfsmnInP-w

でもコメントが英語、インドネシア語、日本語と多国籍なのでわからない....


![スクリーンショット 2019-11-04 2.05.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488642/f8d21386-8efa-def8-b3d1-66f7b151b40b.png)

用意するもの
①google chrome
②拡張機能のgoogle翻訳

①google chrome

これは説明不要でしょう。ダウンロードしてください。

②拡張機能のgoogle翻訳

https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb?hl=ja

ここから飛べます。
chromeにダウンロードしてください。
そして、あとは画面を翻訳しながら見るだけです。

![スクリーンショット 2019-11-04 2.15.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488642/33c3d1ce-6a8b-0cac-11b3-5555c132590d.png)

実際に動かすとこんな感じです。
https://www.youtube.com/watch?v=M708k4SBIfc

わからないことがありましたらコメントまでどうぞ。
40 Gbps ~ 100 Gbps の InfiniBand/Ethernet のメモ 

## 想定環境

~8 ノードくらいで, 手元ワークステーション的な感じで mini cluster を 40 Gbps ~ 100 Gbps で組みたい.
なるべく将来 200 ~ 400 Gbps に拡張できることを見込んで.

40 Gbps(IB/Eth), 56 Gbps(IB) だと, リース終了品が eBay に流れているようで安価に調達することができる.

## 用語

ダイレクトアタッチケーブル

https://panasonic.co.jp/ew/pewnw/product/column/009.html

要は 1G のイーサネットケーブルのように, コネクタとケーブルが一緒になったもの.

光ファイバー接続の場合だとトランシーバー(電気 <-> 光変換)が必要であるが, 銅線接続の場合はトランシーバーは不要

アクティブ, パッシブ => 信号増幅とか, D/A 変換するのはアクティブっぽい.


## コネクタ(トランシーバー)の形状

https://en.wikipedia.org/wiki/Small_form-factor_pluggable_transceiver
https://www.wavesplitter.jp/index.php/191/qsfp28port-valiation
https://www.completeconnect.co.uk/what-are-the-differences-between-qsfp-qsfp-and-qsfp28/

QSFP => IB DDR(20 Gbps)まで
QSFP+ => IB QDR(40 Gbps), FDR(56 Gbps)対応
QSFP28 => IB EDR(100 Gbps), 100 GbE 向け

200 Gbps 越えると QSFP56 になる?

コネクタの形状自体は同じっぽいので, 帯域が出ないかもはしれないが, IB EDR(100 Gbps) に QSFP のコネクタを挿して使い回すことができるかも?

## ケーブルの種類

* 銅線(copper) : 安い. 重い. あまり長くできない. ミニクラスタ用
* 光ファイバー(fiber) : 銅線に比べると高い. トランシーバー(光変換)部分がコスト高い. 長距離対応は信号の増幅が必要などのためか高くなる. 軽い. 超高密度とか, 広いネットワーク向け. 速度が上がるにつれて, 銅では対応できずファイバーになるのしらん.

## スイッチの騒音

スイッチは本来サーバールームで動かす用なのでファンがとてもうるさいです.
Noctua の 40mm ファンに換装がおすすめっぽい

Noctua NF-A4x10 FLX
https://www.youtube.com/watch?v=nW87duasx7E

## HBA 選び

2023/06 時点では, ConnectX-3(40 Gbps) は Windows ではもうドライバが提供されていない.

https://network.nvidia.com/products/adapter-software/ethernet/windows/winof/

いちおう WinOF はあるが Windows 11 対応などされていない.

Linux はドライバあるが(`mlx4`), こちらももうあんまりサポートされていないよう.
 
eBay とかで調達する場合 ConnectX-4 以上の利用を推奨.


## その他

Beware of EMC switches sold as Mellanox SX6XXX on eBay
https://forums.servethehome.com/index.php?threads/beware-of-emc-switches-sold-as-mellanox-sx6xxx-on-ebay.10786/

eBay で EMC 品として売られている SX6xxx 系スイッチ(2~4 万円で激安)は, unamaged switch として IB だけで動かすには問題なさそうだが(opensm 動かせばいいだけ), Eth モードで動かしたいなどだと OS が違うので動かない(or ほかの mellanox スイッチと共存できない)ので注意.
Laravelでタスク管理アプリ作成してみた

今回Laravelの復習も兼ねてシンプルなタスク管理アプリを実装してみましたので、オープンソースとして共有いたします。

# 目的
・自分の学習（復習）のため
・Laravel初期データの改良版作成
　|- Topページの部分などcssを変更するだけで機能は同じでデザインのみを変更することができる

# 作成物
![task_top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393193/5d36efcb-1ebb-17f0-0ebb-25ad3e7025c4.png)
![contents.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393193/bb08673f-184e-9e95-b5fc-645fc2545a65.png)


下記に環境移行の手順をまとめます。

# 環境構築
Mac High sierra
Laravel 5.8
VirtialBox+Vagrant+Homestead環境

※こちらはチートシートにまとめてありますので
このURLを参照してください。
　|- [Laravel環境構築 チートシート](https://qiita.com/ProgramingDai/items/6fe5f678bf5a05e27c05)

チートシートの「vagrant ssh」まで完了すれば大丈夫です。

+α　別のVM名で環境構築し、そちらには新規のLaravelをダウンロードしてください。一部取り出したいデータがあるため。

# 1.データクローン
まずどこでもいいので下記コマンドをターミナルに入力してデータをクローンしてください

```console:ターミナル
$ git clone https://dai570415@bitbucket.org/dai570415/laravel-task-master.git
```

# 2.クローンデータを解凍して環境に入れる

先ほど環境構築した際に「code」フォルダを作成しているかと思いますので、その中に解凍したファイル（中身のみ）をごそっと入れてください。

下記アドレスにアクセス
`192.168.10.10`

Topページが表示されるはずです。

# 3.認証・DB関係を設定する

マイグレート

```console:ターミナル
$ php artisan migrate

* こちらでDB周りが構築できました
```

# 5.シンボリックリンクを作成

```console:ターミナル
$ php artisan storage:link

* こちらは画像表示させるために必ず必要になるので
おこなっておいてください。
```


最後にUser情報の変更をしたい場合は直接下記アドレスを入れてください。
`192.168.10.10/user/userEdit`

こちらは編集できるAPIのみ実装しています。CSSも当ててない状態。
気が向いたら、Taskページからユーザー情報を変更できるようにする予定です。
モヤっとしていたPython等のインタープリター型言語とバッチスクリプトとMinecraftのコマンドスクリプトの違いについて理解したこと

#はじめに
初Qiita記事です！
初心者である自分がなかなか理解できないところや、理解しところをメモ代わりに少しずつ加筆（修正？）していこうと思っています。
それと、この記事で私と同じような疑問を持っている人々の助けになれたらなぁと思ってます。
もし、ここが間違っているぞ！等ありましたら遠慮なくコメント等で教えて頂けると助かります！
よろしくお願い致します。

#何に疑問を感じたのか？ことの顛末

###Minecraft独自のゲーム内プログラミング言語？
Minecraftを知っていますか？
知らない人のために少し説明すると、マインクラフトはゲームにもかかわらず、プレイヤーがゲーム内でコマンドを用いて様々な操作ができるのです。
しかも、コマンドだけではなく、コマンドを羅列することによってスクリプトを作成し操作を自動化することもできてしまいます。
ゲーム内でプログラミングができてしまいます。そこで私は

**(。´・ω・)ん?プログラミング？**

っと私は思ってしまうのですね。マイクラのこれはプログラミング言語なのか？と。
プログラミング言語は主に、C言語等のコンパイル方式とPython、Javascript等のインタープリター方式に大別されると思います（多分）
マイクラ独自のゲーム内プログラミング言語はいったいどっちに属するのだろう？と。
はたまた、どっちにも属さないのか？など。
プログラミング言語といってもPythonやJavascriptとは根本的に仕組みは違うだろう、と。
そういう疑問が生まれたわけですね。

###バッチスクリプト、PowerShell、シェルスクリプトもプログラミング言語？

実は、以前マイクラの前にバッチスクリプト等のスクリプトも、インタープリター型のプログラミング言語だよ、と言われて同じような疑問を持ったことがあります(笑)
だって、プログラミング言語ってテキストエディタに謎の長いテキストを書いて、それを処理系で機械語に翻訳して～のが細かい仕組みはわからないけど、そういう過程があるのが漠然とプログラミング言語だと思っていたのですから...！
それに対して、バッチスクリプトとかシェルスクリプトって、ざっくり言うとコンソールコマンドをテキストファイルに羅列したものじゃないですか。

**それってPythonやJavascriptと同じインタープリター方式のプログラミング言語なの？？**

と思ってしまうわけです。
様相があきらかに違うじゃないですか。
前者はパソコンを操作するCUI（character-based user interface）ベースのプログラミング言語。
後者は生粋の（？）プログラミング言語。
きっと両者は根本的に何かが違う！って、そう思ったのです。

#結論
###結論
マインクラフトのゲーム内言語（以下、マイクラ言語とします）は、コンパイル方式とインタープリター方式どっちに分類されるのかと言うと、恐らく**インタープリター方式に分類される**のだと思います。
また、バッチスクリプト、PowerShell、シェルスクリプト等（以下、スクリプト言語とします）もPythonやJavascript等と同じく**インタープリター方式の言語**だということが分かりました。
**Javascript等のインタプリタ―言語と、バッチスクリプト等のスクリプト言語とマイクラ言語は、基本は同じである**というのが今のところの結論です。
C言語とは違います、あれは事前にコンパイルして機械語を生成しますから。

###メモ
疑問を持ち始めたころは、インタプリタ―言語は「命令を逐次機械語に翻訳しながら実行する」から、コマンドを解釈してOS自体が挙動を変える"スクリプト言語"と、マイクラのゲームの挙動を変えるだけの"マイクラ言語"は「命令を逐次機械語に翻訳しながら実行する」という部分で違うと思っていました。スクリプト言語とマイクラ言語はOSとマイクラゲーム本体がコマンドを解釈しているだけで、逐次機械語に翻訳しながら実行しているわけではないですから。
しかし、「命令を逐次機械語に翻訳しながら実行する」の部分を私はちゃんと理解していなくて、なんとなく、パソコンのどこかにC言語のような機械語ファイルが細かく生成されて、処理系とは別のプロセスで実行されているのかなと思っていましたが、そうではないようです。

#最後に
ここまでが、今のところ私が理解したこと、考えたことのまとめです。
支離滅裂なところが多く&大雑把だと思いますが、大目に見てくださると幸いです。
macOS mojaveおよびcatalinaにMagentaの環境を作る

書いておかないと忘れてしまいそうなので、とりあえず書いておくが結論から言うと「そんなにハイスペックじゃないグラボでいいからtensorflow-gpuが対応してるグラボと安定してubuntuが動くマザボを買って、corei5程度のそれほど早くないCPUに16GB程度のメモリを乗せ、HDだとデータのスループットで計算速度以前足を引っ張られるからSSDを入れておいて、外部記憶が必要になった時にはUSB3.1のRaidでも用意すればいいのでとにかく安いマシンを組んだ方がいいです」となってしまいますが、必要に迫られてタイトルのような環境を設定してるうちに色々つまづいたりしたので結果的にどうしてるか、だけメモっておきます。あとトラブルの内容も。

# 前提

* anyone, pyenvを使ってる
* pyenvでminiconda3-latestを入れてある

# 問題

pyenv環境ではMagentaの公式のスクリプトによるインストールだと、`$ source deactivate` した時にシェルが落ちる、と言う問題があるようだ。そのほかにも色々細かくありそうだけど、結論としては以下のようにしている。

# 方法

```
$ pyenv local miniconda3-latest
$ conda create --name magenta python=3.7.5
$ pip install magenta
```

これだけ。公式から出ているインストールスクリプトを見てもだいたい似たようなもんなので問題ない。で、これを、、、

```
仮想環境を有効にする
$ conda activate magenta

仮想環境を無効にする
$ conda deactivate
```

で、必要な時に使える。ちなみに `python3 -c 'import tensorflow as tf; print(tf.__version__)'` でtensorflowのバージョン確認をしたところ、Magentaの仮想環境の中ではちゃんと1.15.0が帰ってきた。ちなみに公式のスクリプトでインストールしたらコマンドラインからのバージョン確認が出来なかったが他でも再現性があるかはわからない。あといくつか機能的（シンセの関連）とかが使えないとかもあるんだが、そっちは解決できてない。まぁいいけどMIDIで吐き出すなり渡すなりして、あとはもっといい音源使うもん。

何はともあれ、これで開発用のMacBook Proに学習を仕掛けおくことはできそうなんで、よかったよかった。当面はこの体制で進めつつもどっかのタイミングでubuntuがちゃんと乗るPCを買うことにしたい。なるべく安いやつ。

（もちろんMacBook Proに直接ubuntuを乗せてインストールもしてみましたがCUDAも入って「やったーこれでGPUで計算できる環境ができるー」と思った矢先にdevice compatibility で引っかかってしおしおのパーでしたけどね。でもおかげでubuntuに対する理解度はあがった。そして「仕事でない限り、使う用途がない限り使うもんか」と思うこともできた）


さて環境構築は仕事の入り口でしかないので明日からまた色々試していこうと思う。
機械学習は何がいい、ってプログラムに対するパラダイムも、現実世界に与える影響のパラダイムも今までのコンピューターのありようとは随分と違うので、しっかり取り組んでいきたい。
【初心者】JavaScript　以前の記事について／undefined／配列応用編【備忘録１０】

##以前の記事での編集アドバイス
備忘録９にて、編集アドバイスをいただきました。
コメントをその際に返すことができませんでしたので
こちらで感謝申し上げます。ありがとうございました。

今までの記事では、書く際にそのまま値などを書いてしまっていたので
今後は、黒背景でしっかりわかりやすいように表示できるようにしていきたい。

他の方の記事の書き方や、今やっていることに関連する記事も
少しずつにはなると思うが、目を通して学んでいきたい。

##11/1～11/2に勉強したこと

###オブジェクトを要素に持つ配列
-　定数定義したのちに、単純に単語を並べるだけでなく、項目ごとに分けて単語を並べることができる。
【例】

```js

const pets=[
 {name:"犬",price:20000},
 {name:"猫",price:10000}
];

```

-　横に並べてしまうと長くなるので縦に並べると良い。
-　{}{}同士の間に「,」を入れなくてはならないので忘れないように気を付ける！
-　配列の時と同じように、初めの項目は「インデックス[0]」となるため気を付ける！

###項目を順に表示させたい場合
-　さきほどの配列の項目をそれぞれ順に表示させたい場合は下記のように書く。

【例】

```js

const pets=[
 {name:"犬",price=20000},
 {name:"猫",price=10000},
 {name:"鳥",price=5000}
];

for(let i = 0 ; i <= pets.length ; i ++ ){
 console.log(------------------);//←区切り線

 const pet = pets[i];

 console.log=(`この動物の名前は${pet.name}です`);
 console.log=(`${pet.price}円で売られています`);
}

```

-　for文の間部分で再度　const pet = pets[i];を定義するのを何度も忘れたので要注意！
-　name:...などで定義する際、文字なのか値なのかで""が必要／不要が分かれることを忘れてしまうので癖付けていきたい。

###undefinedと表示されないために

-　例えば、４つ項目がありそれぞれ「名前」「年齢」とすべてに
入力があればいいのだが、１つの項目の「年齢」だけ入力が無いという場合もあると思う。
-　その中で繰り返し処理をしてしまうと、その項目の年齢部分だけ【undefined】と出力されてしまう。
-　もし、入力がない場合にも何か違う表記で出力したい場合は下記のように書く。
【例】

```js
....
 const pets=pet[i];
  if(pet.age === undefined){
  }else{.....

```


###さらに細かい出力
-　更に細かく項目を設定することも可能。
【例】

```js

const pets={
 name:"犬",
 price:20000,
 favorite:{
  food:"ささみ",
  color:"黄色",
 },
};
```

-　更に細かく項目設定する際「,」を合間に忘れないようにする。

【例２】

```js
const cafe={
 name:"犬カフェ",
 menus:["コーヒー","ココア","ケーキ"]
};

console.log(`店名：${cafe.name}`);
for(let i = 0 ; i <= cafe.menus.length ; i ++){
 console.log(cafe.menus[i]);
}
```

-　lengthを使用する際「menus.length」だけにならないように注意！
-　最後の出力で、「[i]」が抜けることがあったので気を付ける！

###振り返り

まだ、for/if/配列を自由に使用できないので、慣れるまで自身でもいろんな
パターンで書いてみようと思う。
学習記録＃4・5

昨晩アップロード前に力尽きたため2日分の更新です。

#11月2日やったこと

- 手慣らしタイピング：MEZZO"「Forever Note」
- progate：RubyⅡ- 8まで
- リクナビ　インターンシップ＆仕事研究LIVE　参加

#今日やったこと

- 手慣らしタイピング：逢坂壮五「Maybe」
- progate：RubyⅢ - 5まで
- 2DのUnity使用のミニゲーム「まほうのクッキング(仮)」のイラスト制作

##progate：RubyⅢ-5まで
個人的メモ

- ハッシュとシンボル

ハッシュ：順番に引き出しにしまっていく配列に対して、一つ一つ名付けたキーと呼ばれる箱に一つづつ入れるイメージ。配列の要素にすることもできる。

シンボル：キーに文字列を使う際の省略した書き方。exm ) :name

- メソッド

```ruby:method
def メソッド名
処理
end

puts メソッド名
```

引数は　メソッド名(引数名)　で定義して　メソッド名(値)　で呼び出し。
引数を設定していると値無しで呼び出すとエラー。

##リクナビ　インターンシップ＆仕事研究LIVE　参加
####良かった点
- 就活やったるでという気持ちになる
- 知らない会社を知ることができる
- がっつり中の人と話せる

####個人的所感

- 目当ての企業があれば、1対1で話せるタイミングがあるので行く価値高い
- スルーor受け流せるスキル・メンタルが必要
- スケジュールを調整できる準備をしていくと良し


　主目的はIT業界研究入門セミナー。直前で友人がつかまらなかったため一人で参加。案内は私服でOKだったけどキリッと見えるしスーツを着ていった（参加者8割くらいは私服だった気がする）。

　セミナー内容はネットで得られる情報とそんなに差異は無かったけど、概ね自分の認識が間違ってないことが分かったので満足。業界迷ってる人はこれ系をいろいろ受けていったら知識はつきそう。
　イベントとしてはインターンシップの情報提供なので、ブースで聞けるのは企業紹介＋業務紹介＋インターン紹介を15~20分ぐらいにまとめたプレゼン。やり方と内容は企業にもよる。インターバルのときと、終了1時間前頃の人がまばらになってるときには1対1で話せる状況になっていたりするのでがっつり聞きたいこと聞いたりできる。
　歩いてると声かけられるのでスルーor受け流せるスキル・メンタルが必要なのと、プレゼン終わりのアンケートでインターンの参加希望出せたりもするのでスケジュール調整の準備があるといいと思う。
React Hooks を導入しようとしたはなし

# React Hooks について
最近プロジェクトでReactをメインで触るようになり、すこーしReact読めるようになったかなと思ってきたので、（ヒヨコである事に変わりありませんが…。）今後末長くReactとお付き合いできるように歴史について勉強しようという事で、今更ながらReact ver16.8で導入された React Hooks についてちゃんと勉強してみました。


# 過去作ったToDoApp
React 触り始めて勉強用に作った [ToDoApp(GitHub)](https://github.com/mineyuji/ToDoApp)は`this.state`で書いていたので、React Hooks でのメリデリ掴むために React Hooks 導入してみようかなと思います！


# this.state から useState に...
### useState について

`useState`はインポートする事で使い始めることができます。

```jsx

import React, { useState } from 'react';
```


state値と、stateの更新関数を同時に宣言します。代入元の`useState`に初期値を持たせることができます。


```jsx

const [count, setCount] = useState(0);

// setCount 関数で新しい値をセットしてあげます。
return (
    <div>
      <button onClick={() => setCount(count + 1)} > + </button>
      <span>{count}</span>
    </div>
);
```
これで、ボタンが押されるたびに画面に表示された数字がインクリメントされます。




### 導入検討ファイル
メインのファイルである、`src/components/TaskInput.js`からまず導入を検討しました。
上記のサンプル作るために[リファレンス](https://ja.reactjs.org/docs/hooks-state.html)読んでて気づいたのですが、`useState`は、関数型コンポーネントでの利用を目的として開発されているようで、クラス型で組んだコンポーネントを今回の`useState`に書き換えるのはナンセンスのようです。

今回のToDoAppは、以下のようにクラスコンポーネントで記述しているため、いろいろ大変そうです。

```jsx
class TaskInput extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      todo: [],
      values: '',
    };
   ....
```

`useState` は、関数単位でReactで保持可能な`state`を生成できるという特徴があります。
> クラスを書かずに使えるようになります。 　（[ステートフックの利用法](https://ja.reactjs.org/docs/hooks-state.html)）

atom単位から機能単位で管理されるもので利用する事で効果（メリット）を発揮できそうです。


# React Hooks　導入に至って
今回、ToDoApp への導入はちょいと見送ります。。笑
機能拡張などの際には使える機能な気がします。
`src/compornents/atoms/`内で管理されているファイルなどで`state`管理が追加される場合には積極的に使っていきたい機能です。

思いついた用法としては、`reduxForm`と合わせて、簡単にバリデーションフォームコンポーネントを作ることもできそうだなと感じています。
次回挑戦したいと思います！


# さいごに
今回は、React ver16.8で導入された React Hooks について書きました。
よりシンプルでミニマムで管理されたコンポーネント開発を行うために便利な機能が追加された気がします。
個人的には運用の段階では`this.state`と`useState`を使い分けながら開発したいなと思います。
（クラス型で開発されたものは、改修が大きくなっちゃう）

クラス型技法が好きな僕としては、利用機会が少なそうですが、小さいプロジェクトなどで使ってみたいなと思います。

これからのアップデートも常に気にかけながら導入検討を進めて行かなければいけないですね。大変です。。
基本情報3週目(11/04週)

# 目標と結果
### 目標
- 12項目まで参考書の演習問題を正解する。
- できない部分を見つけ、そのままにしない。
- 基礎理論とアルゴリズムを勉強を続ける。
- [基本情報技術者試験ドットコム](https://www.fe-siken.com/)を使う。

### 項目

独習ゼミの項目で言うとFE52まで

9．データベース
(データベース方式・データベース設計・データ操作・トランザクション処理・データベース応用)
10．ネットワーク
(ネットワーク方式・データ通信と制御・通信プロトコル・ネットワーク管理・ネットワーク応用)
11．セキュリティ
(情報セキュリティ・情報セキュリティ管理・セキュリティ技術評価・情報セキュリティ対策・セキュリティ実装技術)
12．システム開発技術
(システム要件定義・システム方式設計・ソフトウェア要件定義・ソフトウェア方式設計・ソフトウェア詳細設計・ソフトウェア構築・ソフトウェア結合/ソフトウェア適格性確認テスト・システム結合/システム適格性確認テスト・導入・受入支援・保守・廃棄)

### 結果

- FE52まで勉強した。

# 振り返り
### Keep
- 過去問道場を使う。

### Problem
- テクノロジ系に弱い。

### Try
- 過去問道場を使い続ける。
基本情報11月の勉強計画

# 目標と結果
### 目標
- 23項目までの演習をクリアする。
- 学習時間のボタンを忘れずに押す。
- 基本情報技術者試験ドットコムを活用する。
- 個々のテストに合格する。

### 項目
9．データベース
(データベース方式・データベース設計・データ操作・トランザクション処理・データベース応用)
10．ネットワーク
(ネットワーク方式・データ通信と制御・通信プロトコル・ネットワーク管理・ネットワーク応用)
11．セキュリティ
(情報セキュリティ・情報セキュリティ管理・セキュリティ技術評価・情報セキュリティ対策・セキュリティ実装技術)
12．システム開発技術
(システム要件定義・システム方式設計・ソフトウェア要件定義・ソフトウェア方式設計・ソフトウェア詳細設計・ソフトウェア構築・ソフトウェア結合/ソフトウェア適格性確認テスト・システム結合/システム適格性確認テスト・導入・受入支援・保守・廃棄)
13．ソフトウェア開発管理技術
(開発プロセス手法・知的財産適用管理・開発環境管理・構成管理・変更管理)
14．プロジェクトマネジメント
(プロジェクトマネジメント・統合マネジメント・ステークホルダマネジメント・スコープマネジメント・タイムマネジメント・コストマネジメント・品質マネジメント・資源マネジメント・コミュニケーションマネジメント・リスクマネジメント・調達マネジメント)
15．サービスマネジメント
(サービスマネジメント・サービスの設計/移行・サービスマネジメントプロセス・サービスの運用・ファシリティマネジメント)
16．システム監査
(システム監査・内部統制)
17．システム戦略
(情報システム戦略・業務プロセス・ソリューションビジネス・システム活用促進・評価)
18．システム企画
(システム化計画・要件定義・調達計画・実施)
19．経営戦略マネジメント
(経営戦略手法・マーケティング・ビジネス戦略と目標・評価・経営管理システム)
20．技術戦略マネジメント
(技術開発戦略の立案・技術開発計画)
21．ビジネスインダストリ
(ビジネスシステム・エンジニアリングシステム・e-ビジネス・民生機器・産業機器)
22．企業活動
(経営組織論・OR/IE・会計財務)
23．法務
(知的財産権・セキュリティ関連法規・労働関連/取引関連法規・その他の法律/ガイドライン/技術者倫理・標準化関連)

### 結果
- 修了テスト以外は合格した。
- 67時間以上の時間登録ができた。
- 過去問道場で勉強を続けた。
- 独習ゼミの対策講座に出席した。


# 振り返り
### keep
- 過去問道場を使い続ける。


### Problem

- 計算問題が苦手。
    - 離散数学、アルゴリズム。

### Try
- 過去問道場を使い続ける。
- 午前免除に合格する。

# 週次計画
###[3週目(11/4)](https://qiita.com/Yuya_nakano/private/74930e778c7358fc4045)
###[4週目(11/11)](https://qiita.com/Yuya_nakano/private/9d5a711a341c61e3fb50)
###[5週目(11/18)](https://qiita.com/Yuya_nakano/private/0b1c9fcf9ed916be3b54)
###[6週目(11/25)](https://qiita.com/Yuya_nakano/private/476e0168511303a4f684)
【django】プロジェクト内のcssが読み込めない

# 事象
ローカル開発環境にてDjangoの管理サイトにアクセスしましたが、
以下のように、管理サイトでcss(静的ファイル)が読み込めませんでした。

![django_admin_no_css_login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251749/c3a8077d-f881-2cee-bb13-19f5d271360b.png)
![django_admin_no_css.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251749/cb740567-914f-a30f-7601-f9e55e1c773b.png)

---
## 前提条件

```
Python 3.7.4
Django 2.2.6
virtualenv 16.1.0
```

# 解析
## HTTPログ

```
$ python manage.py runserver
Performing system checks...

System check identified no issues (0 silenced).
November 02, 2019 - 16:45:33
Django version 2.2.6, using settings 'studysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[02/Nov/2019 16:24:55] "GET /admin/ HTTP/1.1" 200 3080
[02/Nov/2019 16:24:55] "GET /static/admin/css/responsive.css HTTP/1.1" 404 77
[02/Nov/2019 16:24:55] "GET /static/admin/css/dashboard.css HTTP/1.1" 404 77
[02/Nov/2019 16:24:55] "GET /static/admin/css/base.css HTTP/1.1" 404 77
```

どうやらcssが読み込めてないようです。
原因を探るべく、`settings.py`を確認してみた。

```settings.py
# snip

DEBUG = False
ALLOWED_HOSTS = ['localhost','0.0.0.0']

# snip
```

上記の`DEBUG = False`が怪しかったのでTrueにすると、cssが読み込めるようになりました。
DEBUG = Falseは本番環境が想定されており、静的ファイルはnginxなどのwebサーバから読み込む仕様になっているようです。

# 対応策
cssが読み込まれるためには、以下の2つのうち**どちらか**の対応が必要です。

## 1. settings.pyでDEBUG = Trueにする
Trueにするとプロジェクト内のcssも読み込まれます。

## 2. `python manage.py runserver --insecure`コマンドを使う
--insecureオプションを付けると、プロジェクト内のcssが読み込まれます。

# おまけ

```settings.py
DEBUG = False
ALLOWED_HOSTS = ['*']
```

この設定ではcssは適用されませんでした。
ALLOWED_HOSTSを任意にしただけではcssは読み込めないようです。
それもしかして再帰出来るんちゃうの

#初めに

以前にも運動学自体の記事は書いたのですが，n軸に対応するときに，賢い書き方はないのかと考えていたところ再帰することができるのではないかと考えた所です．

#再帰させたい処理

```arm.py
    x1 = L1 * np.cos(deg1)
    y1 = L1 * np.sin(deg1)
    x2 = x1 + L2 * np.cos(deg1+deg2)
    y2 = y1 + L2 * np.sin(deg1+deg2)
    x3 = x2 + L3 * np.cos(deg1+deg2+deg3)
    y3 = y2 + L3 * np.sin(deg1+deg2+deg3)
```

いかにも再帰できそうな雰囲気ありません???

#再帰させてみた

```arm.py
def test(x,y,deg,L,n):
    if n < len(x)-1:
        x[n] = L[n]*math.cos(deg[n]) + x[n-1]
        y[n] = L[n]*math.sin(deg[n]) + y[n-1]
        return test(x,y,deg,L,n+1)
    elif n >= len(x)-1:
        x[n] = L[n]*math.cos(deg[n]) + x[n-1]
        y[n] = L[n]*math.sin(deg[n]) + y[n-1]
        return x,y

_x = [0]*3
_y = [0]*3
deg = [0.0,math.pi*0.5,0.0]
L = [1,1,1]

print(test(_x,_y,deg,L,0))

```

```
([1.0, 1.0, 2.0], [0.0, 1.0, 1.0])
```
意外と苦労したけど形になりましたとさ