OmniAICreator/Qiita-1.07M huggingface dataset:
Node.js(4):module PATH

<h1>パス確認</h1>
node.jsパスモジュールはディレクトリとファイルパスが取れる。先ずは今のパスを確認する。

```javascript:app.js

console.log(__dirname); //ディレクトリパス
console.log(__filename);//ファイルパス

```

```terminal:terminal
$node app.js
/Users/xxxxx/node_practice/path
/Users/xxxxx/node_practice/path/app.js

```

<h1>パス重要な関数のまとめ</h1>
<p></p>
```app.js
var path = require('path');

//今のディレクトリのパス
console.log(path.dirname(__dirname));
//ディレクトリを組み合わせ
console.log(path.join(__dirname,'/xx'));
//ファイル名
console.log(path.basename(__filename));
//ファイル拡張子
console.log(path.extname(__filename));
//パス分析
console.log(path.parse(__filename));
```

```terminal:terminal
$node app.js

/Users/xxxxx/node_practice/path
/Users/xxxxx/node_practice/path/xx
app.js
.js
{ root: '/',
  dir: '/Users/xxxxx/node_practice/path',
  base: 'app.js',
  ext: '.js',
  name: 'app' }
```
【AtCoder】典型的な BFS 問題を解く【A - Darker and Darker】

[このサイト(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 - Darker and Darker](https://atcoder.jp/contests/agc033/tasks/agc033_a)。全探索の一種である幅優先探索(BFS)の教育的かつ典型的な問題です（だそうです）。
（参考：[けんちょんさんのブログ](http://drken1215.hatenablog.com/entry/2019/05/05/223200)）

### 問題
縦H行、横W列の白黒に塗られたマス目が与えられます。
一回の操作で、全ての黒のマスの上下左右を黒く塗るとき、何回の操作で全体を黒く塗りつぶせますか？という問題です。
1 ≦ H ,W ≦ 1000

### 解法
今回の問題の場合、
・「全白マスにおける、黒マスからの最短距離」の最大値を求める問題
と言えます。
つまり、最短経路問題とみなせて、BFSで解くことができます。
DFSでなくBFSで解くんだというイメージがわきやすい、良い問題ですね。

スタートの位置が複数ありますが、構わずキューに追加してしまい、BFSを用いることで「同時進行」させるのがポイントです。
※このような問題を、「多点スタートな最短路問題」と言うらしいです。
また、「開始時点の黒マス」からの距離を記録するリストを用意しておくのもポイントです。
（全スタート地点を0に初期化する）

【メモ】
ちなみにキューに追加するのをリストからタプルに変えたら、実行時間が短くなり、メモリ消費も減りました。

```python
from collections import deque

H, W = map(int, input().split())
grid = [input() for i in range(H)]

# 初期の黒('#')の位置からの距離
dist = [[-1]*W for _ in range(H)]

# '#'の位置をキューに追加（＝今回はこれが複数あるので、複数スタートとなる）
black_cells = deque()
for h in range(H):
    for w in range(W):
        if grid[h][w] == '#':
            black_cells.append((h, w))
            dist[h][w] = 0

def bfs(black_cells, dist):
    """
    BFSを用いて、全マス目を黒くする回数を求める
    
    Args:
        black_cells: 「開始時の黒マス」の座標が入ったキュー（複数座標あり）
        dist: 「開始時の黒マス」からの距離の入ったリスト  [[-1, -1, 0], ...]
        　　　（白マスの初期値は0）
        
    Returns:
        g: 操作を繰り返した数
    """
    d = 0
    while black_cells:
        # キューとして使うのでpop()ではなくpopleft()
        h, w = black_cells.popleft()
        d = dist[h][w]
        for dy, dx in ((1, 0), (0, 1), (-1, 0), (0, -1)):
            new_h = h + dy
            new_w = w + dx
            if new_h < 0 or H <= new_h or new_w < 0 or W <= new_w:
                continue
            if dist[new_h][new_w] == -1:  # セルが白('.')であるのと同義
                dist[new_h][new_w] = d+1
                black_cells.append((new_h, new_w))
    return d

d = bfs(black_cells, dist)
print(d)
```
VBA Object型の変数がNothingであるか厳密に判定するObjectIsNothing関数と異型許容NothingであるIsNothing関数

#Nothingはオブジェクト型
なのでオブジェクト型のみ許容するユーザー定義関数で判定します。

##ObjectIsNothing

※Letを使ったシンプルな記述バージョンがコメント欄にあります。

```vb
Function ObjectIsNothing(obj As Object) As Boolean
'For Microsoft Office VBA
If obj Is Nothing Then
ObjectIsNothing = True
Else
ObjectIsNothing = False
End If
End Function
```

#厳密に判定するとは

```vb
Sub test()
Dim aRs
Set aRs = Nothing
Debug.Print ObjectIsNothing(aRs)
Set aRs = CreateObject("ADODB.Recordset")
Debug.Print ObjectIsNothing(aRs)
End Sub
```

上記の式で何が起きるかというとエラーが発生します。
aRsは何も型指定していないためVariantになるからです。
~~もしエラーが起きるのが嫌な場合は obj As Objectを単純にobjにしてください。~~
~~するとvariantはエラーではなく、型が違うためFalseが返るようになります。~~
エラーが起きるのが嫌な場合は以下のIsNothingのほうがいいです。


```vb
Sub test()
Dim aRs As Object 'Objectと明確に宣言する
Set aRs = Nothing
Debug.Print ObjectIsNothing(aRs) 'NothingなのでTrueになる
Set aRs = CreateObject("ADODB.Recordset")
Debug.Print ObjectIsNothing(aRs)
End Sub
```

ObjectIsNothig関数で

#実際は厳密に比較しないIsNothingが便利かも

##IsNothing関数

※Letを使ったシンプルな記述バージョンがコメント欄にあります。

```vb
Function IsNothing(varVari) As Boolean
'For Microsoft Office VBA
If varVari Is Nothing Then
IsNothing = True
Else
IsNothing = False
End If
End Function
```

実際はVariantでもObjectでもNothingかどうかを判定するほうがあっているので、そういうIsNothing関数を作ってみました。
変数varVariはVariant型のため、Object、VariantどちらでもNothingか判定します。
Microsoft Flowを使ってAmazonの商品価格をプッシュ通知する

##はじめに
毎日、Amazonにアクセスして狙っている商品の価格をチェックするのが面倒になってきたので、Microsoft Flowを使って希望価格より下になったらプッシュ通知するようにフローを組んでみた
(価格.comに掲載されている商品はそっちのアプリで通知を受ける方が楽)

##概要
6時間ごとに予め指定した商品情報ページを取得し、価格が指定した数値未満のときプッシュ通知をする

##処理の流れ
HTTP GETをJSON形式で受ける仕様で文字列分割を駆使し価格の文字列を取得しているため美しいフローではないが、初めて使ったし、まあ仕方ない。
![flow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479395/fe91f30a-dd69-cd68-cbff-f5a8b8fa4751.png)


- Recurrence
フロー実行のインターバルを指定できる。これを指定せずにフローを組み立てるとデフォルトでは15分単位に実行され、トラフィック的によろしくないので6時間単位とした。

- URLを変数にする
ここは商品ページのURLを変数として初期化しているだけ。無くても問題ない。

- HTTP
HTTPリクエスト(GET/PUT/POSTなど)とURIを指定する。
今回は商品ページのHTMLがほしいのでリクエストはGETを指定。
すると、JSON形式でStarusCode,Header,Bodyが返ってくる。

- 価格の近くで分割(split)
こんな感じで大量の文字列(`wc`で180万文字位だった)が返ってくるのでbodyに含まれている文字列をぶった切って価格を抽出する。

```json
{"statusCode":200,
"headers":{"Strict-Transport-Security":"max-age=47474747; includeSubDomains; preload","Vary":"Accept-Encoding,User-Agent,X-Amzn-CDN-Cache,X-Amzn-AX-Treatment","X-UA-Compatible":"IE=edge","X-XSS-Protection":"1;","X-Content-Type-Options":"nosniff","X-Frame-Options":"SAMEORIGIN","x-amz-rid":"ZSG244H5XDVQ8BR1F0DP","Transfer-Encoding":"chunked","Connection":"keep-alive,Transfer-Encoding","Cache-Control":"no-transform, no-cache","Date":"Sat, 09 Nov 2019 15:08:52 GMT","P3P":"policyref=\"https://www.amazon.com/w3c/p3p.xml\",CP=\"CAO DSP LAW CUR ADM IVAo IVDo CONo OTPo OUR DELi PUBi OTRi BUS PHY ONL UNI PUR FIN COM NAV INT DEM CNT STA HEA PRE LOC GOV OTC \"","Set-Cookie":"session-id=134-2513056-3719950; Domain=.amazon.com; Expires=Tue, 01-Jan-2036 08:00:01 GMT; Path=/,session-id-time=2082787201l; Domain=.amazon.com; Expires=Tue, 01-Jan-2036 08:00:01 GMT; Path=/,i18n-prefs=USD; Domain=.amazon.com; Expires=Tue, 01-Jan-2036 08:00:01 GMT; Path=/,sp-cdn=\"L5Z9:JP\"; Version=1; Domain=.amazon.com; Max-Age=509475069; Expires=Tue, 01-Jan-2036 08:00:01 GMT; Path=/; Secure; HttpOnly","Server":"Server","Content-Type":"text/html; charset=UTF-8","Content-Length":"1733807"},
"body":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n\n\n\n\n\n\n\n    \n\n    \n\n\n\n\n\n \n \n \n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n    \n\n\n\n\n\n    <!doctype html><html class=\"a-no-js\" data-19ax5a9jf=\"dingo\">\n    <head>\n<script type=\"text/javascript\">"}
```

- 価格の入った要素を取得(first)
分割したアレイから価格情報が含まれる要素を取得して次ステップへのinputとする。下図の例では0番目の要素に価格(599.99)が入っているので、こいつをチョイス。
![array.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479395/3e8aa511-0bb4-0b6f-c46f-c6bddbf19708.png)

- 価格の後ろの文字を分割
半角スペースでまたsplit

- 価格の入った要素を取得2
また0番目の要素に価格が入るので、これをチョイス。

- ダブルクォーテーションを除去(replace)
後続で数値変換するのにダブルクォーテーションが邪魔なので消す。

- 価格を浮動小数点に変換(float)
後続で大小比較をするために変換。

- 条件
取得した価格が設定値未満のとき、Flowのスマホアプリにプッシュ通知する設定とした。他にもE-Mailで通知したりもできる。
![if.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479395/3b55fc60-024e-e82e-4e73-eb529cd136bc.png)

もっとスマートなやり方があれば、教えて下さい。
【Swift】GoogleMapsSDKを使ってアプリを作ってみてわかったこと

#概要　
スマートチャンネル/プログラミングさんの動画を参考にして、アプリを作成しました！
【プログラミング】swiftで現在地付近のお店を探すiPhoneアプリを作ろう ~ GoogleMaps編 #40(https://www.youtube.com/watch?v=GWSD8LDBrbM)

今回は、こちらの動画を視聴したことで
・わかったこと
アプリを作成する上で
・気になって調べてわかったこと
をまとめました！

#動画を視聴してわかったこと
1.CocoaPodsのインストール方法
Macのターミナルで以下のコマンドを実行して、インストールできる。

```
sudo gem install cocoapods
```
2.Podfileの作成方法
ターミナルで以下のコマンドを実行し、PODの雛形の設定ファイルである「podfile」を作れる。

```
pod init
```

#気になって調べてわかったこと
1.SDKとは
SDK(Software Development Kit)とは
 >ある、システムに対応したソフトウェアを開発するために必要なプログラムや技術文書などをひとまとめにしたもの
[SDKとは|クラウド・データセンター用語集/IDCプラットフォーム](https://www.idcf.jp/words/sdk.html)

だそうです。

2.CocoaPodsとは
iOS/Mac向けのアプリを作成する際のライブラリ管理を管理してくれるもの。
→これが無いと自分でGithubとかからライブラリを取ってきて、プロジェクトに手動で追加して...
と大変になるみたいです。
→それを簡単にしてくれるもの
だそうです！
![iOSライブラリ管理ツール「CocoaPods」の使用方法](https://qiita.com/satoken0417/items/479bcdf91cff2634ffb1　"iOSライブラリ管理ツール「CocoaPods」の使用方法")
趣味読書

# 主観的健康感と腸内フローラ

#### 福島らの研究(A. Fukusima-Hirakawa, et. al., _int J Hum Cult Stud._, **29**, 101-111, (2019) )  

主観的健康感が強い者は腸内フローラ中に酪酸生産菌である_Rosebria spices_, _Faecalibacterium prausnitzii_, _Bilophila spices_の占有率が高かった。酪酸及びその代謝産物が中枢神経系に作用し、情動に影響を与えているのかもしれない。また、玄米食群では白米食群より、腸内フローラにこれら、細菌類が多く、主観的健康観も高かった。腸管組織は酪酸が無ければ、アポトーシスや炎症を起こすため、これら酪酸生産菌は恒常性維持のため、重要な細菌群である。
玄米に含まれる機能性物質

 - γ-オリザノール
 - GABA
 - ポリフェノール
 - ビタミンE
 - 葉酸
 - フェルラ酸
 - アラビノキシラン
 - 鉄
 - 亜鉛


#### 田原らの研究([Y. Tabara et. al., _Nippon Shokuhin Kagaku Kogaku Kaishi_, __45__(2), 93-99(1998)](https://www.jstage.jst.go.jp/article/nskkk1995/45/2/45_2_93/_pdf))
　魚を干物にすることで、含有水分量は半分以下になる。一方、EPA、DHA量は変化なかった（単位重量当たりは上昇するが、脂質中のEPA、DHAの割合は一定であった）。このため、乾燥工程(温風、遠赤外線)によって、EPA、DHAは酸化されないことが推察される。
elixirのiex停止コマンドについて確認してみた

IExのドキュメントを見直していて、ElixirのREPLであるiexから抜けるコマンドに、今まで知らなかったコマンドが追加されていたので、実際に動かして違いを確認してみました。

https://hexdocs.pm/iex/IEx.html#module-exiting-the-shell

ここに書かれていた方法は3つ。

 * via the BREAK menu (available via Ctrl+C) by typing q, pressing enter
 * by hitting Ctrl+C, Ctrl+C
 * by hitting Ctrl+\

このうち、3つ目の「 `Ctrl+\` 」が気になったので動作確認してみた。
ちなみに、3つ目はマニュアルを遡ってみると、**v1.5.0-rc**から採用されている様子。（記載時期は割と古かったようです...）

## サンプルコード

1秒ごとにカウントを標準出力するプログラムを作成。
実行中にコマンドを打つことを想定しています。

```elixir:sample.ex
defmodule Sample1 do

  def work do
    greet(:start)

    1..60
    |> Enum.map(fn x -> x end)
    |> greet_sleep()

    greet(:end)
  end

  defp greet(:start), do: IO.puts "start..."
  defp greet(:end), do: IO.puts "...end"
  defp greet(_), do: IO.puts "..."

  def greet_sleep([]), do: IO.puts ".....!"
  def greet_sleep([ head | tail ]) do
    IO.puts "...#{head}!"
    Process.sleep(1000)
    greet_sleep(tail)
  end
end

```


## 動作確認

プログラム実行中に、iex停止コマンドを入力してみます。

以前から知っていた上の二つのコマンドは、一旦メニューが出た後に処理を選択するタイプ。なので、「**やっぱり続けたい**」となった場合には、継続することもできます。下記では、「c」（※ (c)ontinue）で継続した後で停止しています。

```
$iex sample.ex 
Erlang/OTP 22 [erts-10.4.3] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe]

Interactive Elixir (1.9.0) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> Sample1.work
start...
...1!
...2!
...3!
...4!

BREAK: (a)bort (c)ontinue (p)roc info (i)nfo (l)oaded
       (v)ersion (k)ill (D)b-tables (d)istribution
c
...5!
...6!
...7!

BREAK: (a)bort (c)ontinue (p)roc info (i)nfo (l)oaded
       (v)ersion (k)ill (D)b-tables (d)istribution
^C$
```

一方、3つ目の「 `Ctrl+\` 」はiexが即終了となります。
なので、さっさと処理を止めたい場合には、「 `Ctrl+\` 」の方が便利です。

```
$iex sample.ex 
Erlang/OTP 22 [erts-10.4.3] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe]

Interactive Elixir (1.9.0) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> Sample1.work
start...
...1!
...2!
...3!
$
```

きになるのは、停止した時点のプロセスです。
とはいえ、今回のサンプルは、iex経由で起動したプロセスなので、iexが停止したら一緒に停止していると思われます。
VBA 長さ0の文字列か判定する isZeroLengthString関数とNullStringを判定するisVBNullString関数(訂正)

# isZeroLengthString
変数が文字列型で、未代入ではなくローカルウィンドでは`""`と表示されるなにも入っていない状態

```vb
Function isZeroLengthString(str As String) As Boolean
'For Microsoft Office VBA
'文字列型変数の値が長さゼロの文字列でvbNullStringではないとき、True、そうでないとき、Falseを返します。
If str = "" And _
  StrPtr(str) <> 0 Then
isZeroLengthString = True
Else
isZeroLengthString = False
End If
End Function
```

# isVBNullString

これに対して文字列型が初期値の場合、StrPtr(str)は0を返す。
これがvbNullStringである。
よって、変数が文字列型で、空白かつアドレスが0であればTrueを返す。
2019/11/12 IF文内が間違っていたので訂正しました。

```vb
Function isVBNullString(str As String) As Boolean
If str = "" And _
StrPtr(str) = 0 Then
isVBNullString = True
Else
isVBNullString = False
End If
End Function
```

#Other
なおVariant型の初期値はisEmpaty(variant) = Trueで判定できる。
ES6(JavaScript)の基礎を押さえる

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている[箕牧和廣](https://qiita.com/mimaki_kazuhiro)です。
今回はES6(JavaScript)について書いていこうと思います。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

#ES６とは

ES6はJavaScriptの新しいバージョン。
現在は多くのブラウザが対応していないため、ES6で書いたコードを動かすためにはES5(1つ前のバージョン)への変換が必要になる。
この変更を"トランスパイル"と呼び、Babelというツールを利用してトランスパイルを行う。

#letとconst

letで変数を、constで定数を定義できる。
letは再代入が可能であるのに対し、constは再代入が不可能。

letでの変数宣言

```javascript:
let name = 'Jonh';
console.log(name); // => Jonh

name = 'Kate'; // 再代入する
console.log(name); // => Kate
```

constでの変数宣言

```javascript:
const name = 'Jonh';
console.log(name); // => Jonh

name = 'Kate'; // 再代入するとエラーになる
```

#テンプレートリテラル

バッククオートで文字列を囲むと、`${}`で文字列内に変数展開ができ、改行も反映できる。

```javascript:
const name = 'Jonh';
const age = 21;

console.log(`${name}は${age}歳です`); // => Jonhは21歳です
```

#アロー関数

関数とはいくつかの処理をまとめたもの。
アロー関数は関数の中でも無名関数の省略形で、従来より簡潔な記述で関数を定義できる。

通常の関数

```javascript:
const a = function(){
//まとめたい処理
};
```

上と同義のアロー関数

```javascript:
const a = () => {
//まとめたい処理
};
```

#Class構文

オブジェクトを生成する際、最初に設計図を用意する必要がある。
この設計図を"クラス"と呼ぶ。
「class クラス名」とすることでクラスを定義することができる。

```javascript:
class User = {
 constructor() {
  this.name = 'Jonh';
 }
} //クラスの定義

const user = new User(); //インスタンスを生成
console.log(user.name); // => Jonh
```
node UI/Server framework 調べ

nuxt.js の作成時に選択できる framework のかんたんな比較 (2019/11/10)

#### UI framework

|  | スター |
|:-:|:-:|
| [Ant Design Vue](https://www.antdv.com/) | 8.6k |
| [Bootstrap Vue](https://bootstrap-vue.js.org/) | 10.3k |
| [Buefy](https://buefy.org/) | 6.6k |
| [Bulma](https://bulma.io/) | 37.3k |
| [Element](https://element.eleme.io/) | 42.1k |
| [Framevuerk](https://framevuerk.com/) | 192 |
| [iView](https://www.iviewui.com/) | 22.7k |
| [Tachyons](https://tachyons.io/) | 9.3k |
| [Tailwind CSS](https://tailwindcss.com/) | 16.2k |
| [Vuetify.js](https://vuetifyjs.com/) | 22.4k |


#### Server framework

|  | スター |
|:-:|:-:|
| [AdonisJs](https://adonisjs.com/) | 7.2k |
| [Express](https://expressjs.com/) | 46.1k |
| [Fastify](https://www.fastify.io/) | 12.5k |
| [Feathers](https://feathersjs.com/) | 11.8k |
| [hapi](https://hapi.dev/) | 11.7k |
| [Koa](https://koajs.com/) | 27.7k |
| [Micro](https://zeit.co/blog/micro-8) | 8.9k |
#AWS で料金請求が高額になりすぎないように「無料利用枠の使用のアラートの受信」をオンにする

# 請求情報 > Billingの設定

https://console.aws.amazon.com/billing/home#/preferences

他の設定もオンにしておく。

![image](https://user-images.githubusercontent.com/13635059/68537057-62c64380-03a1-11ea-9a4b-ed7cf2e7ed79.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2699








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
VBA Javaの厳密等価演算子===に近い異型不許容等価関数


```vb
Function isTypeValueEqual(a, b) As Boolean
If VarType(a) = VarType(b) And _
a = b Then
  isTypeValueEqual = True
Else
  isTypeValueEqual = False
End If
End Function
```

つまり型が違うときは等価ではないので、型が等価かどうかを判定する。
これを勝手に異型不許容等価演算と呼ぶことにする。
これをUDF、ユーザー定義関数化しているので異型不許容等価関数ということにする。
実際は文字列型は文字列型に寄せる必要があるため、完全に厳密等価演算子というわけには行かないが、基本の異型不許容等価演算の部分はこれで行けるかもしれない。
Macの画面分割ってどうやるの？

WindowsからMacに乗り換えたものの、ショートカットなど小さな障壁は乗り越えられない...
自分もその一人です（現在進行形）

特に画面分割を今まで「Windowsキー + 矢印キー」でやってた身としては、「⌘ + 矢印キー」なの？なんて思ってしまう訳です。違います。
※「⌘ + 矢印キー」はカーソル移動　例）「⌘ + ←」行前に移動

悩む前に調べましょう！Let's google it!

# やり方
主に2つ

1. 左上の緑ボタンを長押し
2. Mission Controlを開きフルスクリーン状態のアプリに別のアプリをドラッグする

## 1. 左上の緑ボタンを長押し
1. すべてのアプリのフルスクリーン状態を解除する
2. 画像の緑色のボタンを長押しする <br>
<img width="160" alt="スクリーンショット 2019-11-10 12.12.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530829/a6aaa514-1b5e-dda9-152b-815c59314272.png">

3.「ウィンドウを画面（左側・右側）にタイル表示」を選択すると画面が分割される
4. 片側の画面で分割したいアプリを選択すれば完成！

## 2. Mission Controlを開きフルスクリーン状態のアプリに別のアプリをドラッグする
### そもそもMission Controlって何？

> Mission Control では、開いているウインドウ、デスクトップの操作スペース、フルスクリーンの App、Split View の操作スペースなど、すべてを鳥瞰的に表示して、簡単に切り替えることができます。 
※Apple公式ページより引用

要は開いているウィンドウ一覧を良い感じに表示してくれる便利機能らしいです。
ウィンドウ開きすぎたときに使えるとか使えないとか...

### 起動方法 
a. F3を押下（Touch Barは画面の明るさ調整の隣にあるボタン）
b. 「Control + ↑」
c. Track Pad上で、3本指で上にスワイプ

Mission Controlについて分かった所でLet's分割！

### 画面分割
1. すべてのアプリケーションを**フルスクリーン状態**にします
2. Mission Controlを起動
3. 画面上部に現在起動中のアプリ一覧が表示されるので、アプリを別のアプリ上にドラッグします
4. 一つにまとめられたアプリをクリックして、完成！

# 分割解除方法
a. Escキー押下
b. 緑色のボタンを押下

# 終わりに
最後まで読んで頂きありがとうございます。

誰かのお役に立てれば幸いですが、ぶっちゃけ外部ディスプレイ買えば画面分割の必要はないと思います。
プログラマーは積極的に筆を選んでいきましょう！

それでは！
#AWS のサーバーで OS のバージョンを確認するコマンドは cat /etc/os-release

# 例

ElasticBeanstalk の nodejs プラットフォーム環境で確認

```
$ cat /etc/os-release

NAME="Amazon Linux AMI"
VERSION="2018.03"
ID="amzn"
ID_LIKE="rhel fedora"
VERSION_ID="2018.03"
PRETTY_NAME="Amazon Linux AMI 2018.03"
ANSI_COLOR="0;33"
CPE_NAME="cpe:/o:amazon:linux:2018.03:ga"
HOME_URL="http://aws.amazon.com/amazon-linux-ami/"

```

# CentOSではないらしい

あ、そういえばそうでしたよね。

yumがあるからといってCentosではない。

`cat /etc/centos-release` 

これどこー？って探してしまっていたよ。

# Ubuntuではないらしい

fmfm

# Linux Loft distribution とか出ないかな？

LOFTのサーバー業界進出を願ってます。

![image](https://user-images.githubusercontent.com/13635059/68537005-365df780-03a0-11ea-9e16-ed576308168f.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2698








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
WKWebViewでUserAgentにオリジナルの文字列を追加する

# Xamarin.FormsのWebView(WKWebView)でUserAgentを書き換えるのではなく、オリジナルの文字列を追加する
アプリ内のWebViewで開いた場合と、直接ブラウザで開いた場合の判定条件にオリジナルの文字列を使いたい場合。
WebViewのCustomUserAgentプロパティに文字列をセットすると本来のUserAgentが上書きされてしまうので、追加したい場合はまず自分自身のUserAgentを取得する必要がある。
そのために、WKWebViewのJavaScriptを実行するメソッド、EvaluateJavaScriptを使う。

## WkWebViewRendererを継承したクラスを使う
```c#:MyWebViewRenderer.cs
[assembly:ExportRenderer(typeof(WebView), typeof(MyWebViewRenderer))]
namespace Sample.iOS
{
  public class MyWebViewRenderer : WKWebViewRenderer, IWKUIDelegate
  {
    this.EvaluateJavaScript("navigator.userAgent", (result, error) => 
    {
      if (result != null)
      {
        var agent = result.ToString();
        this.CustomUserAgent = agent + " MyApplication";
      }
    }
  }
// 以下省略
```
「WEB制作者なら知っておきたい！WEBページ高速化ノウハウ入門」に参加してきました(メモ)

# webページ高速化ノウハウ
- 画像を圧縮させる
    - 圧縮パンダ
    - ファイル形式を適切に選ぶ
- キャッシュを使う
    - テストページはキャッシュを無効にする
- 文書も圧縮しよう
    - Minify:いらないコメント部等を削除する
        - minifyer.org
    - gzip圧縮
        - サーバー上で圧縮
        - .htaccessに書き足すだけ(Apache)     
- 読み込み順序の最適化
    - javascript
        - ファーストビューでは不要
        - しかし、javascの読み込みが終わるまで何も表示されない
        - なので、javascを後回しに
        - javascタグにdeferタグを書き足す
        - aysncは順番に実行してくれないのでdeferの方がいいかな
    - CSS
        - ファーストビューを優先するので、下にスクロールする部分はあとでもいいはず
        - preload属性を追加することで残りの部分を非同期にできる
        - ただ、IE、Firefoxが非対応
        - LoadCSS(javascript)を使うと非対応ブラウザでも非同期にできる
        - どこがファーストビュー？　→　Critical Path CSS Generator
    - 画像
        - Lazyload
        - imagタグにloading属性を指定するだけなんだけど、最新版Chromeしか対応してない...
    - ファイルをまとめる?
        - HTTP/2では不要
- ___そもそも、不要なコンテンツを消せ___
- Twitter,facebook,youtubeの外部読み込みは遅くなる
    - アカウントやリンクに置き換えてもいいんじゃない?(ハッシュタグとかでキャンペーンをやっている場合を除く)
    - ちゃんと更新していないと埋め込んでても逆にマイナスイメージになりかねない
- 未使用の広告タグ
- 未使用のフォント

- pagespeed insightsのスコアだけを気にしすぎるな

# おすすめのWordPressテーマ
- Luxeritas(ブログ用テーマ)
- Underscore(ブランクテーマ)

# おすすめのプラグイン
- まずは不要なものを削除
- コーディングできるならプラグインは不要

# PHPの提供方法
- CGI(従来)
- モジュール版 PHP
- LSAPI
- fastCGI
Rubyのeach文の書き方


## each文とは
配列の要素を順番に取り出して処理を行うことができる

## each文の書き方
```ruby:index.rb
配列.each do |変数名|
  #実行したい処理
end
```

##例えば
```ruby:index.rb

names = ["Pirori","Okachan","Ida"]

names.each do |name|
  puts "名前は#{name}です"
end
```
↓

```console:console
名前はPiroriです
名前はOkachanです
名前はIdaです
```
gem ERDにおける、カラム情報の表記方法

migrationファイルを元にER図を作成できるgem「[rails-erd](https://github.com/voormedia/rails-erd)」で、生成されたER図のカラム右側に薄文字で表記されている情報について。  
これらはカラムの型情報に加えて、非標準の制限、または必須の場合などに追加されます。

![Rails ERD](https://camo.githubusercontent.com/f705fefa37f808758adbfa8e53d7ba2d8d9a59d7/68747470733a2f2f766f6f726d656469612e6769746875622e696f2f7261696c732d6572642f696d616765732f656e746974792d72656c6174696f6e736869702d6469616772616d2e706e67)

# 例えば
| 型+オプション(migrationファイル) | 表示（rails-erd） | 備考 |
|:--| :--| :-- |
| :integer | integer |
| :string, limit: 255 | string |
| :string, limit: 128 | string (128) | 非標準の制限 |
| :decimal, precision: 5, scale: 2 | decimal (5,2) |
| :boolean, null: false | boolean * |

# 記号の説明
| 記号 | 説明 |
| :--: | :-- |
| ∗ | NOT NULL制約（必須） |
| U | 一意性制約（重複不可）|
| PK | 主キー制約（Primary Key） |
| FK | 外部キー制約（Foreign Key） |

[【SQLに慣れる】MySQLでよく使用する制約](https://qiita.com/yukibe/items/ee377f683a4735fabb9b)

# 参考

https://github.com/voormedia/rails-erd/blob/c3b680674b8a773cabed317847e789099bd4e54e/lib/rails_erd/domain/attribute.rb#L121
#AWS の Amazon Linux や #CentOS 6 に Google Chrome バイナリインストールするには外部のユニバーサルシェルスクリプトを利用せよ

```
curl https://intoli.com/install-google-chrome.sh | bash
```

これでok

# コマンド確認

```
which google-chrome-stable
/usr/bin/google-chrome-stable
```

# 参考

https://intoli.com/blog/installing-google-chrome-on-centos/

```
sudo yum install google-chrome-stable
```

ってしたいだけなのに、そこまで至るのがめちゃくちゃ大変で、シェルスクリプトで実現したよって書かれているような気がする

Centos 7系では実は簡単？ どちらにしてもこのユニバーサルスクリプト一発でいけそう


# スクリプトの中身



# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2697








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
kicadでネジ穴を開ける時に気をつけること（kicadの使う際のtips）

基板作成の時に使用するfreeのcadの中で人気があるのは
kicadかEAGLEだと思うのですけど、今回はkicadで基板を作成する際の
tipsを書いていきます。

基板を作成する際に大事なのは電気的に正しい配線を引くこと、電子部品に
きちんとあったフットプリントを使用するのは当然だとしても、意外と見逃し
がちなのが、ケースにきちんと治るサイズ、ネジ穴などをきちんと合わせることです。
なぜかというと、この辺りをおろそかにしていると使用できない基板
が出来上がって二度手間になってしまうからです。

最初に基板の外形寸法から決めていきます。
まずは使用したいケースを選び、その情報を集めます。
メーカーのシアとなどにCADデータなどがありますので、それをダウンロードしておきます。
データの形式はDWG形式が扱いやすいかと思います。
そのデータをviewerで開きます。viewerはDraftSightが無料で使いやすいかと思います。
開くとこんな感じになりますので、
<img width="1397" alt="スクリーンショット 2019-11-10 12.18.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/bc0ee2a1-68cd-f7dd-238c-159e20308492.png">

必要なところの寸法を測ります。
<img width="1003" alt="スクリーンショット 2019-11-10 10.39.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/be9b8dd0-94d9-1bc5-931e-f4a5b4ce47c7.png">

ここから割り出した寸法を参考に基板の外形を決めます。
ケースと干渉しないような大きさにしてください。

次にネジ穴の位置を決めます。ネジ穴の大きさはケースのデータシートなどを参考に
実際の使用に適した大きさにしてください。例えば下図の場合だとM4のネジ穴になります。
<img width="631" alt="スクリーンショット 2019-11-10 12.20.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/d09b22cd-5176-124f-e1ef-bc4bbac260c6.png">

ネジ穴の位置は絶対位置だと考えにくいので、相対位置で決めていきます。
自分の場合は基板の原点の位置を相対位置の原点の位置と合わせます。

ケースのCADデータから相対位置を割り出していきます
<img width="805" alt="スクリーンショット 2019-11-10 10.40.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/690050f2-1859-a6aa-f2cd-70894ba400b7.png">

写真の中のoを原点とする正方形だとします。
図の中のひらがなはネジ穴の中心をさすとすると原点oからの相対位置は
次の式で表すことができます。
あ  x = d
    y = 2a + c
い  x = b + d
    y = 2(a + c) - e
う  x = 2b + d
    y = 2a + c
え  x = 2(b + d) - f
    y = a + c
お  x = ２b + d
    y = c
か  x = b + d
    y = e
き  x = d
    y = c
く  x = d
    y = a + c

ネジ穴はフットプリントのMountingHoleから選択して配置します。
基板の原点と補助用の原点を合わせます。
<img width="559" alt="スクリーンショット 2019-11-10 10.53.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/c6abc4b7-a1b9-0aed-1af9-8e9a97cf0c52.png">
赤い十字のところが原点になります。
kicadのネジ穴のpadの上で右クリックをして相対位置を選択します。
グリッド原点を使用を選択して、上記の式で求めた値を入力してokを押します。
するとケースと合わせた位置に穴を開けることができます。
ネジ穴の位置はケースにうまくハマる位置であることはもちろん、
ネジと電子部品などが干渉しないようにしておく必要があるので
電子回路の配線などにも気をつけておく必要あがあります。
スケールなどを使って位置の確認をした後紙にプリントします。
<img width="654" alt="スクリーンショット 2019-11-10 12.28.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/644804dc-0690-2d0f-bbe1-1e65e13704d0.png">
プリントした紙で最終的な位置の確認を行うと、
ケアレスミスを減らせるかと思います。
【Unity】調整しやすい音量設定スライダーを作る

# はじめに
Unityで音量設定機能を用意する場合、
基本はAudioMixerとuGUIのSliderを使うことになると思います。
やり方はこちらの記事が分かりやすくオススメです。
http://tsubakit1.hateblo.jp/entry/2015/05/23/234053

しかし、いざその通りに実装してみると、
（機能としては問題ないものの）どこか使いにくく感じます。
具体的にはすぐに音量が下がってしまって細かい調整がしにくいです。

今回はその点を解消する方法をご紹介したいと思います。

# デシベルと音圧
なぜそのように感じるかの推測ですが、
AudioMixerから抜き出せる「Volume」がデシベルだからということになるでしょうか。[^1]
デシベルは利便性のために音圧を常用対数で変換したものです。
すなわち、上がり幅が線形ではありません。（20デシベル上がるごとに音圧は10倍になる）
そのため、値が大きい領域では急激に変化し、小さい領域ではほとんど変わらないということになります。
![pa-db.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/aeb20626-4b1e-cbbe-10cd-c06c0a01c114.png)
ただデシベル自体が人間の感覚に近いらしいので、音量調整をデシベルでやるのは何もおかしくない気もするのですが…。
スライダーなどで調整するとなると、スライダーを動かす量と音圧の変化量が大きく異なるため何となく扱いづらいと感じるということなんでしょうか。

# 結論
ともかく、Unityのスライダー(0～1)で音量を調整するにはデシベルではなく音圧で行う（下記の変換を行う）ことを推奨します。

- スライダー値（s [0.0001, 1]） → AudioMixerのVolume（v [-80, 0]）

```math
v = 20 \times \log_{10} {s}
```

- AudioMixerのVolume（v [-80, 0]） → スライダー値（s [0.0001, 1]）

```math
s = 10^{\frac v {20}}
```

# ソースコード
ということで、最初から音量調整用を想定したスライダーのコンポーネントを作りました。
人間の感覚に合わなくなった…のかもしれませんが、調整するにはいい感じでできます。
よろしければ使ってみてください。
[unity-volume-slider](https://github.com/neuneu9/unity-volume-slider)

# 参考
- https://mathwords.net/decibel

[^1]: 正確にはUnityのVolumeの単位は一般的なデシベルとは違うようです。一般的には0デシベルを最小可聴値とするのに対し、Unityでは0デシベルがデフォルト値的な何かになっているようです。なので範囲は-80～20。まあ基準値からの比という意味では同じです、多分…。
mistake: タッチディスプレイ gen4-uLCD-35DT > Diablo16 Serial Commands Reference Manual > Media Init応答の記載間違い

```txt:動作環境
Ubuntu 18.04 LTS 
display module: gen4-uLCD-35DT 
  Workshop 4 IDE v4.5.0.17 (on Windows 10 Pro)
MCU: STM32F446 Nuclero-64
  STM32CubeIDE v1.0.1 (on Ubuntu 18.04 LTS)
```

- [タッチディスプレイ gen4-uLCD-35DT > raw formatted uSDの画像をディスプレイに表示する (Diablo16 Serial Command資料の間違いで時間を溶かした)](https://qiita.com/7of9/items/3b135892db408a4dd2f4)

上記の作業中にはまった資料の間違い。

### Media Init応答の記載間違い

Diablo16 Serial Commands Reference Manual
Document Revision: 2.1
Document Date: 21st March 2019
5.3.1. Media Init

ここでは0x06しか返信されないように記載がある。
実際は0x06 0x00 0x01のようになるようだ。

Media Init以降の処理が全て失敗する状況が起きていた。
Workshop 4 IDEにてSerial Command Toolを動かして気づいた。

Serial Command Toolでの通信の内容。
![735f193e3f0c9284.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/6f0999af-174c-d1da-09c1-63a04117ef41.jpeg)

```
media_Init[FF25] 0.103 (ACK 1 0x0001)
media_SetAdd[FF2F 0000 0000] 0.008 (ACK)
media_Image[FF27 0000 0000] 0.018 (ACK)
```

Media InitがACK以外に0x00 0x01も受信していることが分かる。
STM32からの通信もそのようにすると、Media Init以降の処理が成功するようになった。

- [タッチディスプレイ gen4-uLCD-35DT > raw formatted uSDの画像をディスプレイに表示する (Diablo16 Serial Command資料の間違いで時間を溶かした)](https://qiita.com/7of9/items/3b135892db408a4dd2f4)
IN句で使うプレースホルダ部分を作成する方法

# はじめに
SQLの条件部分を動的に作成したい時があると思います。
具体的には、IN句に設定する値が動的に変化する場合です。

```sql
SELECT foo FROM sample_table
WHERE bar IN (?, ?, ?, ?, ?); -- ここの?の数が定まらない時に対処したい。
```

このようなSQLはパフォーマンスに問題が発生しがちではありますが、小規模案件では許容されることがほとんどではないでしょうか。
忘れたころにやってくる問題というイメージがあり、愚直にfor文を使えば書けますが、そろそろ簡潔に書きたいと思います。

# Javaによる実装

```java
int size = 10; // 作成したい?の数
String placeholders = IntStream.range(0, size)
                               .boxed()
                               .map(i -> "?")
                               .collect(Collectors.joining(", ", "(", ")"));
System.out.println(placeholders);
// (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
```

# おわりに
個人的に（各言語において）革新的な書き方が見つかったら追記していきたいと思います。
【Unity】material変更時にはまったこと

あまりに基礎的なことを忘れていたので。

## 問題
 モデルのマテリアルをスクリプトから変更したが反映されない。

```csharp
    Material m = dragon.GetComponent<Renderer>().material;
    m = Resources.Load<Material>("001_ChangeColor/001_ChangeColorMaterial");
```

## 原因
マテリアルの参照を直に書き換えても、レンダラーからマテリアルへの参照は変更されないから。
オブジェクトを変更しようとした場合、一つ上のオブジェクトからたどる必要がある。

```csharp
   Renderer r = dragon.GetComponent<Renderer>();
   r.material = Resources.Load<Material>("001_ChangeColor/001_ChangeColorMaterial");
```
ビルドしたUnityのゲームがウインドウモードで立ち上がらない問題

#ProjectSettingsをいじれ
　はいはい、Player -> Resolution and Presentation -> Fullscreen ModeをWindowedですね。と、思うじゃん？![スクリーンショット 2019-11-10 12.00.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439286/4171f9e1-e772-fd86-854b-aebad227b2d2.png)
　これフルスクリーンになっちゃいます:anger::anger::anger:

```cs
Screen.SetResolution(737, 415, false, 60);
```
　Start()にでもこんなコードを書けばウインドウモードにはなりますが、最初のスプラッシュスクリーンはどうにもならんです。
　あ、Unityは2019.2.0f1のPersonalです。

Game is runs in Fullscreen instead of Windowed mode when changing the build settings from Exclusive Fullscreen to Windowed mode
https://issuetracker.unity3d.com/issues/game-is-not-built-in-windowed-mode-when-changing-the-build-settings-from-exclusive-fullscreen

>This is a long standing design issue in Unity. Fixing it is more of a feature request in scope, and as such it is on our feature backlog.

Unityの中の人も結構悩んでる様子。

#なんかよく分からんけど動く
![スクリーンショット 2019-11-10 12.07.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439286/830d1be7-2850-7c58-21f3-6a5763831ad0.png)
　なんかよう分からんけど、Display Resolution DialogをDisabledからHidden By Defaultにしたらウインドウモードで立ち上がってくれました。
ancestry の構造

チーム開発でancestry gem を用いてテーブルを作って別の方に引き継いだところ、
「どういう構造になってんだ？」と聞かれたので説明の時に用いた資料を備忘録として記載します
おかしければご指摘ください。


```
インスタンス変数
@parents = [parent, parent, parent, parent, parent, parent, parent....]

親カテゴリ
parent = {name:xxxx, children:[child, child, child, child, child,  child...]} 

親から子取得
parent.children = [child, child, child, child, child, child...]

子カテゴリ
child = {name: xxx , children:[child, child, child, child, child, child....]}

子から孫取得
child.children = [child, child, child, child, child, child, child, child....]

孫カテゴリ
child = {name: xxx} 孫カテゴリ
```
この階層構造を１テーブルの１カラムで実装できちゃうのがancestryのすごいところ
GNSS・衛星測位システムの簡単な説明と現状のまとめ

# 概要
GNSS・衛星測位システムの簡単な説明とそれに関する現状についてまとめたものです。
※記事についてなるべく更新できたらと思いますが、更新についていけない場合があります。

# GNSSとは
私たちはスマートフォンやカーナビなどの製品でよくGPSとよく耳にしますが、今の時代GNSSとの方が適していると思います。
それではGNSSとGPSの違いはなんでしょうか？
国土地理院では以下のように説明しています。
>GNSSとは
　GNSS(Global Navigation Satellite System / 全球測位衛星システム)は、GPS、GLONASS、Galileo、準天頂衛星（QZSS）等の衛星測位システムの総称です。

>GPSとは
　GPS(Global Positioning System)は、アメリカ合衆国によって、航空機・船舶等の航法支援用として開発されたシステムです。
　このシステムは、上空約２万kmを周回するＧＰＳ衛星（６軌道面に３０個配置）、ＧＰＳ衛星の追跡と管制を行う管制局、測位を行うための利用者の受信機で構成されています。
　航空機・船舶等では、４個以上のＧＰＳ衛星からの距離を同時に知ることにより、自分の位置等を決定します。
[https://terras.gsi.go.jp/geo_info/GNSS.html](https://terras.gsi.go.jp/geo_info/GNSS.html)

YoutubeのほうでGPSの位置測位の仕組みについて分かりやすく紹介しているのを見つけたので、そちらを見るのをおススメします。
>[GPSの仕組みを簡単に解説します
](https://www.youtube.com/watch?v=Vy4ar5lj9vo)

# 現在のGNSS対応機器について
世界中で使われている多くのスマートフォンやカーナビなどでは、アメリカのGPS、ロシア(ソビエト時代)のGLONASS、EUのGalileoの人工衛星を使って位置情報を取得しています。
または、日本で高精度な位置情報が取得できるようにQZSS(別名：みちびき)と呼ばれる人工衛星を飛ばしています。
日本地域での利用を目的にしているので、主に日本向けに販売している機器に対応しています。
詳しくは、[内閣府宇宙開発推進事務局のみちびき（準天頂衛星システム)](https://qzss.go.jp/usage/products/list.html)をご覧下さい。
さらに、中国もBeiDou(別名：北斗)と呼ばれる北斗-1と北斗-2（別名：コンパス）の2種類の人工衛星を飛ばしています。
とくに北斗-1は地球上にある対応機器と送受信できる機能があり中国全土で利用できる特色をもっています。
BeiDouの詳細は[Wikipediaの北斗衛星導航系統](https://ja.wikipedia.org/wiki/%E5%8C%97%E6%96%97%E8%A1%9B%E6%98%9F%E5%B0%8E%E8%88%AA%E7%B3%BB%E7%B5%B1)をご覧ください。

# 各国が独自の衛星を飛ばしている理由について
各国が独自の衛星を飛ばしている理由については、宇宙開発分野で力をつけて軍事面および経済面で優位になりたいのが考えられます。
軍事面では、他国の衛星測位システムに依存せずに安定して利用したいからだと思います。
また、同時に高精度な位置情報を取得できるようになれば、ミサイルの着弾性能の向上、無人機による自立操縦などに役立つでしょう。
経済面では、高精度な位置情報が取得で自動車・航空機・船舶・配達用ドローン・農機などの自立操縦に役立つでしょう。
なお、衛星測位システムだけでは障害物からよけるができないので各種センサとAIによる組み合わせで実現しようとしています。
タッチディスプレイ gen4-uLCD-35DT > raw formatted uSDの画像をディスプレイに表示する (Diablo16 Serial Command資料の間違いで時間を溶かした)

```txt:動作環境
Ubuntu 18.04 LTS 
display module: gen4-uLCD-35DT 
  Workshop 4 IDE v4.5.0.17 (on Windows 10 Pro)
MCU: STM32F446 Nuclero-64
  STM32CubeIDE v1.0.1 (on Ubuntu 18.04 LTS)
```


## 概要

- microSDにraw formatted 画像イメージがある
    - Graphics Composerにてraw uSDとして画像を用意する
        - オフセット0とした
- microSDの画像をディスプレイに表示する

## 実装

手順の主なものは下記を参照。

- [タッチディスプレイ gen4-uLCD-35DT > タッチ検知して(x,y)座標を表示する | タッチ検知の応答表現 (コントラスト変更によるブリンク)](https://qiita.com/7of9/items/272644fe2d29f67426d6)

３つの実装を追加した。

- A. Media Init
- B. Set Address Byte
- C. Display Image (RAW)

下記は追加分だけ記載。

disp_mediaSetByteAddress()については引数を使った実装にはまだなっていない。

```STM32_serial.h
void disp_mediaInit(UART_HandleTypeDef *huartPtr);
void disp_mediaSetByteAddress(int Hi, int Low, UART_HandleTypeDef *huartPtr);
void disp_mediaDisplayImage(UART_HandleTypeDef *huartPtr);
```

```STM32_serial.c
void disp_mediaInit(UART_HandleTypeDef *huartPtr)
{
	char txbuf[20] = {0};
	char rxbuf[20] = {0};
	int pos=0;

	txbuf[pos++] = 0xFF; // cmd
	txbuf[pos++] = 0x25;

	HAL_UART_Transmit(huartPtr, (uint8_t *)txbuf, pos, 300);
	// Note: Diablo16 Serial Commands Reference Manualには
	//       0x06しか返されないと記載があるが、0x06 0x00 0x01が返されるため3にしている
	HAL_UART_Receive(huartPtr, (uint8_t *)rxbuf, 3, 500);
}

void disp_mediaSetByteAddress(int Hi, int Low, UART_HandleTypeDef *huartPtr)
{
	char txbuf[20] = {0};
	char rxbuf[20] = {0};
	int pos=0;

	txbuf[pos++] = 0xFF; // cmd
	txbuf[pos++] = 0x2F;
	txbuf[pos++] = 0x00; // HIword(MSB)
	txbuf[pos++] = 0x00; // HIword(LSB)
	txbuf[pos++] = 0x00; // LOword(MSB)
	txbuf[pos++] = 0x00; // LOword(LSB)

	HAL_UART_Transmit(huartPtr, (uint8_t *)txbuf, pos, 300);
	HAL_UART_Receive(huartPtr, (uint8_t *)rxbuf, 1, 500);
}

void disp_mediaDisplayImage(UART_HandleTypeDef *huartPtr)
{
	char txbuf[20] = {0};
	char rxbuf[20] = {0};
	int pos=0;

	txbuf[pos++] = 0xFF; // cmd
	txbuf[pos++] = 0x27; //
	txbuf[pos++] = 0x00; // x(MSB)
	txbuf[pos++] = 0x00; // x(LSB)
	txbuf[pos++] = 0x00; // y(MSB)
	txbuf[pos++] = 0x00; // y(LSB)

	HAL_UART_Transmit(huartPtr, (uint8_t *)txbuf, pos, 300);
	HAL_UART_Receive(huartPtr, (uint8_t *)rxbuf, 1, 500);
}
```

使用は順番に実行するだけ。
下記はSTM32でUART1にて使用する場合。

```main.c
	  disp_mediaInit(&huart1);
	  disp_mediaSetByteAddress(0, 0, &huart1);
	  disp_mediaDisplayImage(&huart1);
```

## 実行例

![IMG_1342.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/1f055b33-b6aa-6334-1700-21ff59faa02f.jpeg)


### 補足

Media Initの応答に関する資料が間違ったいたため、時間を溶かした。

Workshop 4 IDEにてSerial Command Toolを使って応答を確認して気づいた。

![735f193e3f0c9284.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/9dbd0b14-d3b4-24bc-7fb4-c7248ff09ede.jpeg)

- [mistake: タッチディスプレイ gen4-uLCD-35DT > Diablo16 Serial Commands Reference Manual > Media Init応答の記載間違い](https://qiita.com/7of9/items/f3a0abd5132b74567e40)
【cisco】スタティックルートの少しだけ深い話

初投稿です。
3年程ネットワークエンジニアしてて初めて知ったので個人的な覚書としてメモ程度に記載。


cisco機器でスタティックルートを書く場合、書き方は3種類あります。

①ip route [宛先NW] [マスク] [ネクストホップ]
②ip route [宛先NW] [マスク] [インターフェース]
③ip route [宛先NW] [マスク] [インターフェース] [ネクストホップ]


①ネクストホップへの経路(NWアドレス)を知っている場合、ネクストホップへ到達出来なくても経路が消えません。

②該当インターフェースがupしていない場合、経路が自分のip route上から削除される。
 ※通常時、宛先のarp解決が発生する。arp解決ができる場合通信可。解決できない場合通信がそもそも出来ない。

③該当インターフェースがupしていない場合、経路が自分のip route上から削除される。
 ※②に似ているがarp解決が発生しない。インターフェース指定する場合は、cisco推奨設定。


個人的な感想では②の場合、NEXTHOPのMACが不明の為arp解決を行う必要があるのではないかと思っています。
宛先宛の経路情報がインターフェースのみ為、まずは該当のインターフェースから宛先のarp解決を行う。
返答があれば、パケットに宛先IPと解決したmacを載せて通信を行うんじゃないかな～？と
パケットキャプチャーはしてないので真意は定かではありませんが・・・

-----以下　例-----
![キャプチャ2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222336/dbac034e-52fa-bb06-f602-f81c15fb1b21.jpeg)

①で経路が消えない例
RTからL3向けには経路がある前提ですが
赤×の部分でLinkDownが合った場合にも図の例では経路が消えません。
RT3から10.0.0.0/8の経路を受け取っているため、10.0.0.1はそっちから受信すると認識します。
その為、この場合はインターネット向けに通信NGとなります。。。
この場合、正しく経路を書くのであれば③を使います。
ip route 0.0.0.0 0.0.0.0 Gi0/0 10.0.0.1
上記の場合、赤×部分でLinkDownが発生すると経路が消失します。



②で通信出来ない例
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222336/db2fd4e1-c374-d137-c936-6597bf43381a.jpeg)

RTからL3向けには経路がある前提ですが以下の場合、PCからインターネットの閲覧はNGとなります。
※インターネット向けにARP解決が出来ないから。
　Googleやyahoo等閲覧する為には、それぞれARP解決しようとします。


ARP解決の場合、対策としてProxy ARP案もありますが問題点として
宛先に対してすべてARP解決を図ろうとするため、大量の宛先がある場合その分ARPテーブルが増えます。
メモリとかそういう観点で推奨は出来ないと思います。
③の書き方の場合、そもそもARP解決を実施しないので推奨です。




参考URL
https://www.cisco.com/c/ja_jp/support/docs/dial-access/floating-static-route/118263-technote-nexthop-00.html
https://community.cisco.com/t5/%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%B9%E3%83%88%E3%83%A9%E3%82%AF%E3%83%81%E3%83%A3-%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88/%E3%83%8D%E3%82%AF%E3%82%B9%E3%83%88%E3%83%9B%E3%83%83%E3%83%97%E3%81%A8%E3%81%97%E3%81%A6%E5%87%BA%E5%8F%A3%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9%E3%81%BE%E3%81%9F%E3%81%AF-ip-%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%82%B9%E3%82%BF%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%83%AB%E3%83%BC%E3%83%88/ta-p/3152952
今日から始めるDjango

Djangoの環境構築から簡単なHelloWordアプリの作成まで紹介します。
※ Python3系のインストールが完了している物とします。

# 環境構築

以下のコマンドを実行してください。

```
$ pip3 install Django
```

正常にインストールが完了したら、以下のコマンドでバージョンを確認する事が出来ます。

```
$ python3
>>> import django
>>> print(django.get_version())
```

これで環境構築は完了です、簡単ですね。
それでは、次にPJを作りましょう。

# プロジェクト作成

プロジェクトを作成したいディレクトリに移動して、以下のコマンドを実行しましょう。
実行するだけで、mysiteというディレクトリとファイル一式が出来上がっているはずです。

```
$ django-admin startproject mysite
```

## django-adminとは？

Djangoの管理タスクを行うためのユーティリティです。
大抵のチュートリアルではプロジェクト生成以降、django-adminは利用されず、manage.pyというdjango-adminの薄いラッパーを利用します。

manage.pyの行う事は次の二つです。
1. プロジェクトのパッケージを sys.path に追加する。
2. DJANGO_SETTINGS_MODULE 環境変数がプロジェクトの settings.py を指すように設定する。

始めて触る時期だと、違いにピンと来ない場合が多いと思います。
余計な処理をしているぶん、manege.pyの方が遅いの？というとそんな事もないので、始めて触る内は自分が参考にするチュートリアルの指示に従う方法が良いと思います。

それでは、生成されたファイル群を見ていきましょう。

# Djangoが自動で生成する物

プロジェクト生成コマンドが成功すると、以下のファイル構成でプロジェクトが出来上がっていると思います。
<img width="148" alt="スクリーンショット 2019-11-10 11.17.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36448/37508090-0ea4-20e9-246a-f4ccd04760e3.png">

生成したプロジェクトのディレクトリで、以下コマンドを実行するとローカルサーバが立ち上がります。

```
$ python3 manage.py runserver
```
上記コマンド実行後、以下にアクセスすると画面が表示されます。簡単。
http://127.0.0.1:8000/

もし、8000番ポート(デフォルト)が他のサービスで利用している場合、以下の様にポートを指定して実行してください。

```
$ python3 manage.py runserver 8080
```

デフォルトのTOPページが確認出来たら、いよいよ自分で作った画面を表示していきましょう。

# Djangoでアプリ生成

以下のコマンドをmysite上で実行してください。
firstappという名前でアプリが生成されているはずです。

```
$ python3 manage.py startapp firstapp
```

<img width="193" alt="スクリーンショット 2019-11-10 11.47.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36448/8ca4b811-fc56-8ad4-54cb-43b8b58968a9.png">

firstappの配下にviews.pyという分かりやすいview定義ファイルがあります。
内容を次の様にしてください。

```python:views.py
from django.http import HttpResponse

def index(request):
    return HttpResponse("Djangoで作った最初のアプリケーション.")
```

viewを定義したら、次はルーティングの設定です。
firstappアプリ配下にurls.pyというファイルを作成し、内容を以下の通りにしましょう。

```python:firstapp/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]
```

アプリのルーティングの設定が終わったら、ルートプロジェクトのルーティングに追記をします。
mysite配下のurls.pyを、以下の通り修正します。

```python:mysite/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('firstapp/', include('firstapp.urls')),
    path('admin/', admin.site.urls),
]
```

# 実行確認

コーディングが終わったら再びサーバーを起動し、以下にアクセスしてみましょう。
http://localhost:8000/firstapp/

```
$ python3 manage.py runserver
```

画面に文字が表示されたと思います。
簡単な画面を作る上では以下の役割を理解するだけで出来てしまいます。

1. ルーティングを設定するurls.py
2. 画面を作るviews.py
3. Djangoの管理タスクを行うためのユーティリティであるmanage.py

次回以降はDBを作成しよりアプリっぽくし、同じ様な手順をVisual Studioで行うとどうなるかを紹介します。
vue-cliでaxiosを使用する(設定から使用方法まで)

vueで非同期通信を行う際に手段はいろいろとありますが、axiosの使用が推奨されているようです。

[axios を利用した API の使用-Vue.js](https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html)

CDNでの導入方法はたくさんありましたが、vue-cliでの導入に手こずったため備忘録としての記事になります。

## 環境

- windows10
- @vue/cli 4.0.4
- npm -version 6.12.0
- node -v v10.16.3

### 前提

すでにnode・npm・vue-cli環境が整っており、vueプロジェクトが存在していること

## 手順

### axiosとvue-axiosをインストール

以下コマンドを実行

`npm install --save axios vue-axios`

### main.jsにてインポート

vue-axiosにはエントリーファイルにて設定を行うように記載されています。
エントリーファイルの意味が完全に理解できていませんが、特に設定を弄っていなければmain.jsが最初に呼ばれているはずなのでここにインポートを記載します。

```js:main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios' //追記
import VueAxios from 'vue-axios' //追記

Vue.config.productionTip = false

Vue.use(VueAxios, axios) //追記

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

```

設定としては以上になります。これでaxiosを使用できるようになっているはずです。

### 使い方

```hoge.vue
<template>
  <div id="search-ip">
    <div>
      <div>
        <input @click="getIp" type="button" value="IPを取得">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SearchIp',
    methods: {
      getIp() {
        this.axios.get('https://httpbin.org/get')
          .then((response) => {
            alert(response.data.origin);
          })
          .catch((e) => {
            alert(e);
          });
      }
    }
  }
</script>
```

IPアドレスを取得してアラート表示させる簡単なスクリプトになります。
`this.axios.get()`のところで非同期通信を行っています。

## 2021/01/25 追記

設計面ではこちらの方が優れているので合わせて確認していただけるといいと思います。
https://qiita.com/right1121/items/166f67cab861b31d3216

## 参考にさせていただいたサイト

[vue-axios - npm](https://www.npmjs.com/package/vue-axios)
[Vue.js + axios + Vue Routerで作る！シンプルなSPAの作り方](https://public-constructor.com/how-to-create-spa-with-vue/#toc9)
macでmysql2がbundle installできない時

`bundle install`でmysql2をインストールしようとしたらエラーになったので解決策のメモ。

後にこの問題に関する記事はたくさん見つけられたのだが、自分なりに色々と調べたのでメモしておく。

# 各種バージョン
macOS Mojave 10.14.6
Ruby 2.6.2
bundler 1.17.2

# はじめに結論
下記のいずれかを実行を実行した後に`bundle install`で解決。

#### macOSが新しい場合(`macOS Mojave 10.14.6`で確認)は下記実行。

```
bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib"
```

#### macOSのバージョンが古い場合はこっちでいけるらしい。

```
bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib --with-cppflags=-I/usr/local/opt/openssl/include"
```

違いは、`--with-cppflags`の有無。
下記[Stack Overflowのコメント](https://stackoverflow.com/questions/30834421/error-when-trying-to-install-app-with-mysql2-gem/39628463#comment101136963_39628463)に、OSのバージョンが新しいと`--with-cppflags`が適用できないと指摘している。

> --with-cppflags appears to break on latest OSX. I believe it can be omitted.bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib"

実際、手元のmacで`--with-cppflags`を指定すると、エラー出力先であるmkmf.logにサポートされないオプションである旨が表示される。

```
clang: error: unsupported option '--with-cppflags=-I/usr/local/opt/openssl/include'
```

#### プロジェクト毎にオプションを指定するのが面倒な時
上記解決方法は両方とも`--local`オプションを指定している。これは現在のプロジェクトの`.bundle/config`の設定を更新するものだ。
`--local`オプションを`--global`に変更する、もしくは削除する（`bundle install`のデフォルトは`--global`）ことで`~/.bundle/config`(ユーザ単位でのBundler設定)に設定を書くことができ、プロジェクト毎にオプションを設定しなくて済むようになる。

#### その他解決方法
[ここに書いてある解決方法](https://github.com/brianmario/mysql2/issues/1005)でも無事インストールすることができた。

```
bundle config --global build.mysql2 --with-opt-dir="$(brew --prefix openssl)"
```

# なぜインストールに失敗したか

そもそもなぜオプションを指定しないとインストールできなかったのか？
エラーが出た時、「前はBundlerの設定をしなくてもインストールできてたけど？」というのが最初に思ったことだった。

まず、はじめにインストールに失敗した時にコンソールに下記エラーが表示された。

```
ld: library not found for -lssl
```

lsslはGCCのopensslにへのリンクオプションらしい。それが見つからないと言っている...
Homebrewでopensslのインストール既には完了していたので、`brew info openssl`を実行してみると出力結果に下記記述が、

```
openssl is keg-only, which means it was not symlinked into /usr/local,
because Apple has deprecated use of OpenSSL in favor of its own TLS and crypto libraries.
```

つまり、opensslが/usr/localにリンクされてないため、`bundle install`実行時に`--with-ldflags`でopensslのライブラリの場所を指定してあげなくてはいけなかったわけだ。

さらに調べてみると、[High SierraからデフォルトのOpenSSLがOpenSSLからLibreSSLに変更された](https://qiita.com/moroi/items/53d60d1d6885795a0f6f)ようだ。
ターミナルで見てみると実際LibreSSLを使っていることがわかる。

```
$ openssl version
LibreSSL 2.6.5
```

つまり、Mojaveにアップデートする前は自分でリンクすることなく問題くOpenSSLを使用できていたのだが、アップデート後に`bundle install`を実行したタイミングでLibreSSLがデフォルトになり、正しくOpenSSLにリンクできなくなっていたようだ。
(High Sierraは使ってなかったのでMojaveに上げた時に問題が起こった)
lambdaにTypeScriptをデプロイする手順(zip)

# はじめに
TypeScriptをlambdaにデプロイする方はServerless FreamworkやSAMなどがあります。
しかし、installや設定などの事前準備が必要で、手軽ではありません。
そこで今回は簡単にデプロイして動作確認するために、zip化してデプロイする手順を記載していきます。

## 事前準備
### typescriptのインストール

`npm install -g typescript`

### AWS CLI
[AWS CLI のインストール](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-install.html)

### lambda関数の作成
あらかじめ、AWSコンソールやcliでlambda関数を作成しておきます。

<img width="1065" alt="スクリーンショット 2019-11-06 23.51.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226008/7feeb10a-9ea2-9da9-2c7c-a287e34dceda.png">

## プロジェクトの作成
下記の構成でファイルを作成していきます。

```
├─ src          
│   └─ index.ts  # TypeScriptソース
├─ package.json   # パッケージ設定ファイル
├─ tsconfig.json  # TypeScript設定ファイル
├─ deploy.sh      # lambdaにデプロイするためのスクリプト
```

### src/index.ts
TypeScriptソースです。
今回は`node_modules`を含めているため、動作確認として`moment`を読み込んでいます。

```typescript:src/index.ts

import moment from 'moment';

export async function handler(event: any): Promise<any> {
  return {
    statusCode: 200,
    body: {
      message: 'typescript test',
      timestamp: moment().format()
    }
  }
}
```

### package.json
パッケージ設定ファイル

```json:package.json

{
  "name": "typescript-lambda",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@types/moment": "^2.13.0",
    "moment": "^2.24.0"
  }
}
```

### tsconfig.json
TypeScript設定ファイル

```json:tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "./src/**/*"
  ]
}
```

### deploy.sh
ビルド、zip化、アップロードをするスクリプトです。

```sh:deploy.sh

#!/bin/sh
# distフォルダ
rm -rf ./dist
# TypeScriptビルド
tsc -p tsconfig.json
# package.jsonをdistにコピー
cp -f ./package.json ./yarn.lock ./dist
cd dist
# packageのインストール
yarn install --production
# uploadするためにzip化
zip -r ./lambda.zip ./

# zipデータをlambdaにアップロード
aws lambda update-function-code \
    --function-name typescript-lambda \
    --zip-file fileb://lambda.zip
```

## 実行

```sh

$ yarn install
$ ./deploy.sh
```

## 確認
AWSコンソールでテスト実行して、想定通りのレスポンスが返ってくることを確認

<img width="1296" alt="スクリーンショット 2019-11-09 10.56.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226008/68019e8d-dba9-3f6c-c179-ee15f8373487.png">

# 参考URL
[2019/6 AWS LambdaのTypeScript化](https://www.cview.co.jp/osakatech/2019.06.19.PQa4_OZPB)
Django + axiosでCSRFエラーが発生する場合の対処方法

# 1.解決したい問題
Django + axiosでPOST通信を行った時、

```bash:console.log
Forbidden (CSRF token missing or incorrect.): /top/telling
[10/Nov/2019 11:06:22] "POST /top/telling HTTP/1.1" 403 2556
```

のように、CSRF起因で403エラー（forbidden）で弾かれてしまう問題を解決します。

# 2.環境情報
・Django:2.2.6
・axios:0.19.0
・Vue.js:2.6.0

# 3.対処方法
CookieへCSRFトークンをセットする処理と、
axios利用時にCookieのどの情報をCSRFトークンとして使用するかの設定を行います。

## 1.CookieへCSRFトークンをセットする
htmlに `{% csrf_token %}` を記述し、CookieにCSRFトークンをセットします。

```html:index.html（※一部抜粋）
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{% static 'css/uikit.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>
<body>
<div class="back">
    <div class="uk-animation-fade">
        <span class="uk-navbar-item title">Destiny　- 運命の選択肢 -</span>
        <spanf class="uk-navbar-item sub-title">選択に迷ったらぜひご利用ください！幸運を祈ります！<br/></spanf>
        <div id="app">
            <form action="{% url 'top:index' %}" method="post">
                {% csrf_token %}
                <div class="uk-text-center">
                    <button id="btnStart" type="button" v-show="showStart" @click="onStart();"
                            class="uk-button uk-button-primary">占いを始める
                    </button>
(以降省略）
```

## 2.axios使用時にCookieのどの情報をCSRFトークンとして使用するかを設定する
下記２行をaxiosでのPOST通信時のロジックに追加します。

```
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
```

私の場合は下記のように実装しました。

```js:main.js
var app = new Vue({
	el : '#app',
	data : {
	    showStart: true,
        showSelect: false,
        showForm: false,
        showResult: false,
        choice: 2,
        formList: [],
        result: ""
	},
	methods : {
		onStart : function() {
	       this.showStart = false;
		   this.showSelect = true;
		},
		onSelect : function(){
		   this.showSelect = false;
		   for(var i = 0; i < this.choice; i++) {
		     this.formList.push({id: i, form:""});
           }
           this.showForm = true;
		},
		onExecute : function(){
		   this.showForm = false;
		   this.showResult = true;
		   axios.defaults.xsrfCookieName = 'csrftoken' // ←ココと
           axios.defaults.xsrfHeaderName = "X-CSRFTOKEN" // ←ココに追加しました
		   axios.post('/top/telling',{
				formList: this.formList
		    }).then(function(response) {
				this.result = response.data.result;
			}.bind(this)).catch(function(error) {
				console.log(error);
			})
		}
	}
});
```

私の場合は上記で解決しました。以上終わり。
Hamlの基本箇所についての復習②（＝）

#はじめに
[前回の記事](https://qiita.com/Moon1126Snow/items/b87b0d7cfaa97ba6da6c)が想像以上に多くの方に読んでいただけたので、続きを書こうと思います。
今回は、***HamlにおけるRuby文の書き方***です。
#実行
Rubyのビューファイル(html.erb)では、Rubyを下記のように挿入していました。

```ruby
<a href="http://****">移動する</a> 
```

同じコードをHamlで書くと次のようになります。

```haml
= link_to '移動する', 'http://****'
```

一番大きな違いは```<%= %>```がなくなり、```=```だけになっているところです。
こうすればとてもスッキリしたコードになりますが、最初のうちは読みにくい事があるので練習が必要です。

#終わりに
Hamlに限らず、プログラミングの学習記事はとても多くの内容を盛り込んであることが多いです。
そのため、中級者になればありがたくなりますが、初学者にとっては「どれが必要な情報なのか？」が見つけにくい事が多々あります。
そのため、今後も一つ一つの記事を内容を小刻みに書いていく予定です。