OmniAICreator/Qiita-1.07M huggingface dataset:
Flutter for WebをGoogle Analytics for Firebaseで分析する

以前[Flutter for Webを使ってPWAサイト](https://qiita.com/nashitake/items/89ac499a622955a0b1d3)を作りました
iOSやAndroidアプリとは違いWebにはアプリストアがないので、アクセス解析が欲しいところです

ということでFlutter for Webで作ったサイトにGoogle Analytics for Firebaseを追加してみました！

# Google Analyticsを準備する
## プロジェクトを作成する
まずはFirebaseにプロジェクトを追加します。以前作ったPWAサイトをベースにするため、名前はFlutterPwaSampleとします

![スクリーンショット 2021-05-05 14.12.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924658/f81642c7-34a1-a972-0e24-b13ee1b4650e.png)

プロジェクトを追加したら、赤枠の「Webアプリを追加」をします

## Webアプリを追加する
アプリ名は適当に設定

![スクリーンショット 2021-05-05 14.13.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924658/80b955cd-74fe-11e4-18a8-ae5b1d5d7320.png)

すると、WebにFirebaseSDKを追加するためのコードを貼れと言われます
このコードは公開用なのでユーザに見えても問題ないようです

![スクリーンショット 2021-05-05 14.13.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924658/cc863102-e5ad-de8b-d27f-fd68ab4af454.png)

これを**Flutterプロジェクト内のindex.htmlのbodyタグ内に貼り付けます**
↓index.htmlはここですね
![スクリーンショット 2021-05-05 14.45.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924658/f00569b8-498c-cd75-02f6-194e7ccbdb38.png)


# FlutterSDKを使う
先程のコードをindex.htmlに追加した上で、FlutterにFirebaseAnalyticsSDKを追加します

## dependenciesを追加
```pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  firebase_analytics: ^8.0.2. # <<< 追加
```

## main.dartにログコードを追加
main.dartにFirebaseAnalyticsのobserverを追加します

```main.dart
import 'package:firebase_analytics/firebase_analytics.dart'; // <<< 追加
import 'package:firebase_analytics/observer.dart';  // <<< 追加
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 追加
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  static FirebaseAnalyticsObserver observer = FirebaseAnalyticsObserver(analytics: analytics);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      navigatorObservers: [  // <<< 追加
        observer,            // <<< 追加
      ],                     // <<< 追加
    );
  }
}
```

## webにデプロイする
flutter build webコマンドを叩きflutterアプリをビルド、今回はS3上にアップロードしました
[公開の手順は以前の記事を参照](https://qiita.com/nashitake/items/89ac499a622955a0b1d3)

```
$ flutter build web
```

# 動作確認
試しに公開したWebサイトにアクセスして、Analyticsダッシュボードを見てみます
すると、リアルタイムユーザに自分がカウントされていることがわかります

![スクリーンショット 2021-05-05 14.33.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924658/d5a05386-ce0f-4967-e2c0-0264ba8879a5.png)

# まとめ
ということで、Flutter for Webで作ったウェブサイトにGoogle Analytics for Firebaseを追加することに成功しました！
ただ現状だとSPAには対応していないので、画面ごとのアクセス率や各種イベントを収集することはできません

とりあえずアクセス数カウンターとしては十分ですが、色々と使いこなしていきたいですね
1年分のフォルダとファイルを一瞬で


こんにちは。
私は、シェルスクリプトを勉強していました。
私は毎日日記を書く習慣があるのですが、毎日フォルダやファイルを作成するのがめんどくさかったので、このコードを書きました。

このコードで
- 無限ループ
- date コマンド
- if
- mkdir
- touch
- 条件式

などたくさんのことを学べました。

```making_everyday_holder.sh
#!/bin/bash

# 作りたいディレクトリを引数で指定できる。
filePath=$1

start_date="2021-01-01"
end_date="2021-12-31"

# もし指定がなければ、カレントディレクトリに作成
if [ -z "$filePath" ]; then
	filePath="."
fi

# もしすでに指定した先にフォルダがある可能性を考慮
if [ ! -d "$filePath/everyday_folder" ]; then
	mkdir "$filePath/everyday_folder"
else
	echo "すでにファイルがあります。"
	exit 1
fi

# 無限ループ
# start_dateとend_dateが同じになったらbreakで脱却
while : 
do

	mkdir "$filePath/everyday_folder/$start_date"
	touch "$filePath/everyday_folder/$start_date/diary.txt"

	if [ "$start_date" = "$end_date" ]; then
		break
	fi 

    # start_dateに1日分の日付を足して、フォーマットで返却
	start_date=`date -d "$start_date 1 day" "+%Y-%m-%d"`
done
```

次のステップは、今は2021年の1月1日から同年12月31日までのフォルダを作っているが、ここを変数にすることで、作成できる範囲を選べることであろう。
Big Sur で vim が起動しない時の対応


macOS を mojave から Big Sur にアップグレードしたら vim が起動しなくなった。

```bash
$ vim ~/.vimrc
dyld: Library not loaded: /usr/local/opt/ruby/lib/libruby.2.5.dylib
  Referenced from: /usr/local/bin/vim
  Reason: image not found
zsh: abort      vim ~/.vimrc
```

## やったこと

- `brew update`
- App Store で Xcode のアップデート
- `sudo xcodebuild -license accept` もしくは Xcode を起動
- `brew upgrade vim`

Homebrew と Xcode のアップデートが必要だった模様です。

以上。



#### 参考

- [vimが「dyld: Library not loaded」エラーが出て起動できない(MacOS High Sierra) - Qiita](https://qiita.com/tomo62/items/9192477a4109f6a71eb8)
- [dyld: Library not loaded: /usr/local/opt/ruby/lib/libruby.2.2.0.dylib を治した時の記録 - Qiita](https://qiita.com/skohara/items/8e0c1319b80c2647600a)
buffaloの無線ルータでビッグローブ光のIPv6オプションを使う

# はじめに
ビッグローブ光を契約しBuffaloのルータを使って接続したところ、デフォルトだと一桁Mbpsしか出なかった。。。IPv6オプションとやらを使うことで二桁Mbpsの速度が出るようになった。
# 環境
* Buffalo WSR-1166DHPL2 https://www.buffalo.jp/product/detail/wsr-1166dhpl2.html
* BuffaloならばなんでもOKというわけではない。https://www.buffalo.jp/support/other/network-ipv6.html の「動作確認済みWi-Fiルーター」の表に載っているものを使うのが吉。

# 手順
* Webブラウザで192.168.11.1にアクセスしてログイン
* ルータの設定を変更する。
- 詳細設定→Internet→Internet→IPアドレス取得方法：IPv6オプションを使用する
* 詳細設定→Internet→IPv6→IPv6接続方法：NDプロキシを使用する
* 設定変更＆変更反映してから、ルータが再起動する。再起動後、インターネットにつながるのに１分ほどかかる。気長に待つ。

# 参考サイト
https://nmori1984.net/2021/05/05/%e3%83%93%e3%83%83%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%96%e5%85%89-with-buffalo-wsr-1166dhpl2/
【algorithm】線形探索法、二分探索法

#はじめに
今回は探索アルゴリズムを紹介したいと思います。

#探索アルゴリズムとは
探索アルゴリズム（サーチアルゴリズム）とは、大量のデータから目的のデータを見つけるときに用いられるアルゴリズムです。
探索アルゴリズムには線形探索法（リニアサーチ）と二分探索法（バイナリサーチ）があります。
それぞれ見ていきましょう。

#線形探索法（リニアサーチ）
線形探索法は、先頭から順番に目的の値が見つかるまで探す単純なアルゴリズムです。
線形探索法のポイントは二つです。
・探す値が見つかったときはその配列番号（０または自然数）を使う
・探す値が見つからなかったときはマイナスの値を使う
このようなルールで考えることにします。
流れとして、配列番号を入れる変数にマイナスの値を入れて初期化しておきます。もし見つかった場合はその変数を目的のデータの配列番号を代入して更新します。目的のデータが見つかった場合はその時点で終了します。

```swift
let nums = [1, 4, 6, 0, 3, 5]
let searchNum = 3
var index = -1
for n in 0..<nums.count {
    if nums[n] == searchNum {
        index = n
        break // forを抜ける
    }
}
print("番号:", index) // 4
```

配列は0番から要素番号が始まるので、番号が4ということは、先頭から5番目に目的の値が存在していたということになりますね。


#二分探索法（バイナリサーチ）
二分探索法は、調べる範囲を半分に絞りながら探していきます。範囲を二つ（バイナリ）に分けて探していくので、バイナリサーチと呼ばれます。
ただし、この方法が使えるのはデータがソートされている（順番に並べる）必要があります。
小さい順に値が並んだ配列を考えます。探す値を決め、データの真ん中の値を調べます。一致すればこの時点で終了です。もし、真ん中の値が探す値より小さい場合は、真ん中より左はさらに小さい値しかないので、右側だけ探せばいいことになります。これの繰り返しになります。

```swift
let nums = [1, 4, 9, 12, 14, 23, 29, 30, 100]
let searchNum = 30
var index = -1
var left = 0
var right = nums.count - 1
while left <= right {
    let middle = Int((left + right) / 2)
    if nums[middle] == searchNum {
        index = middle
        break
    } else if nums[middle] < searchNum {
        left = middle + 1
    } else if nums[middle] > searchNum {
        right = middle - 1
    }
}
print("番号:", index) // 7
```

探す値より真ん中の値が大きければ、それより右は探す必要がないので、右(right)を詰めます。
探す値より真ん中の値が小さければ、それよ左は探す必要がないので、左(left)を詰めます。

#おわりに
今回は探索アルゴリズムを紹介しました。
次回は整列アルゴリズムを紹介したいと思います。
Redshift spectrumで日付単位でadd partitionするやつ

```bash
#!/bin/sh                                                                                        

host=[redshift host]

db=[dbname]
schema=[schema]
s3_schema=[s3 path corresponds to schema]
table=[table name]

start_date="2021-01-01"
end_date="2021-04-01"

dt="$start_date"

while true ;
do
    echo $dt
    query="alter table ${schema}.${table} add if not exists partition(dt='$dt') location 's3://[bucket name]/${db}/${s3_schema}/${table}/dt=$dt'"

    echo $query

    psql -h $host -p [port] -U [username] $db -c "$query"

    dt=$(gdate -d "$dt 1 day" +'%Y-%m-%d')
    if [ "$dt" = "$end_date" ] ; then
	break
    fi
done






```
athenaで日付単位でadd partitionするやつ

```bash 
#!/bin/sh                                                                                        

table=[table name]

start_date="2014-01-01"
end_date="2021-01-01"

dt="$start_date"

while true ;
do
    echo $dt
    query="alter table $table add partition(dt='$dt');"
    echo $query

    aws athena start-query-execution --query-string "$query" --result-configuration OutputLocation=s3://[bucket name]/[path ]

    dt=$(gdate -d "$dt 1 month" +'%Y-%m-%d')
    if [ "$dt" = "$end_date" ] ; then
        break
    fi
done

```
【algorithm】合計、平均、最大最小、データ交換

#はじめに
いつもSwiftの投稿をしていますが、アルゴリズムの投稿も今後はしていきたいと思います。
今回は合計値、平均値、最大値最小値、データ交換のアルゴリズムをSwiftで書いてみたいと思います。
また、Swiftには最大値、最小値などを求める便利な関数が用意されていますが、今回はそれらを使わずにアルゴリズムの基礎として、考えていきたいと思います。

#合計値
配列の全ての要素の合計した値を求めます。
要素の一つ一つにアクセスしてそれらを都度合計値sumに足していくイメージです。

```swift
let nums = [1, 4, 3, 8, 5]
var sum = 0
for n in 0..<nums.count {
    sum += nums[n]
}
print("合計:", sum) // 21
```

以下のような別解も考えられます。

```swift
let nums = [1, 4, 3, 8, 5]
var sum = 0
for num in nums {
    sum += num
}
print("合計:", sum) // 21
```

#平均値
合計値をデータの個数で割ったものが平均値になります。
一点注意点として、Swiftでは型推論というものがあります。sumはInt型になっており、array.countももちろんInt型になっています。これらを単純に割り算してしまうと求める答えもInt型になってしまいます。これでは少数点が正しく出力されてくれません。なので、型変換をして少数を扱える方にしてあげる必要があります。sumもarray.countもFloat型にしてあげましょう。

```swift
let nums = [1, 4, 3, 8, 5]
var sum = 0
for n in 0..<nums.count {
    sum += array[n]
}
let average = Float(sum) / Float(nums.count)
print("平均:", average)
```

#最大値と最小値
最大値も最小値もやっていることは同じなので、今回は最大値を求めるアルゴリズムを紹介します。
max変数を用意して、データ一つ一つとその変数を比較し、用意した変数より大きければmax変数を更新して更新した値を以降の比較に用いるイメージです。データを全て確認した時点でmax変数に入っている値がそのデータの最大値になります。このように、全てのデータを確認し、もし条件に一致したら何かしらの処理をするというときはfor文の中にif文を書きます。

```swift
let nums = [12, 1, 14, 19, 10, 3]
var max = nums[0]
for n in 0..<nums.count {
    if max < nums[n] {
        max = nums[n]
    }
}
print("最大値:", max) // 19
```

#データの交換
単純に二つのデータを入れ替えるときはそのデータが入った変数と仮の変数を一つ用意します。理由は二つしかない場合は一方を入れ替えるともう一方に入れるはずのデータが既に上書きされてしまうためです。

```swift
var a = 1
var b = 2
var t = 0
t = a
a = b
b = t
print("a:", a) // 2
print("b:", b) // 1
```

#おわりに
今後はアルゴリズムの投稿も増やしていきたいと思います。
次回は探索アルゴリズムを紹介したいと思います。
v-onディレクティブ（２）

**Viewインスタンス**
-

全てのVueアプリケーションは、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。
Vueインスタンスは、データ監視、イベント通信や DOM 操作をするいくつかのインスタンスメソッドを持っています。

```vuejs
var vm = new Vue({
  // オプション
})
```

関数とは
-

同じ処理を定義し何度も使い回しができる形にしたもの。

```vuejs
<script>
  function 関数名(){
  処理
  }
</script>
```

無名関数とは
-

関数名なしで関数を定義できるもの。

```vuejs
<script>
  function(){
  処理
  }
</script>
```

v-on:clickをvueインスタンス内で定義してみます

```vuejs
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
      <p>現在{{ number }}回クリックされています</p>
      <button v-on:click="countUp">カウントアップ</button>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
          number: 0
        },
      methods: {
        countUp: function(){
          this.number += 1
        }
      }
  })
</script>
</body>
```

![20210505-130744.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/4230abc6-c59e-47ce-90fe-0d5ea707045c.png)


【参考】関数呼び出しパターンのthis
-

```vuejs:呼び出し元
number: 0
```
*data: {  }内

```vuejs:呼び出し先
this.number += 1
```
*methods{無名関数function( ){ }内}

>@hiroshimaeasyryo様
>https://qiita.com/hiroshimaeasyryo/items/a270b00c420ed96f02f0

>@Sthudent_Camilo
>https://qiita.com/Sthudent_Camilo/items/29467821eac0a11cfb80

>@takkyun
>https://qiita.com/takkyun/items/c6e2f2cf25327299cf03

>JavaScript Primer
>https://jsprimer.net/basic/function-this/
データ分析の要件整理時に分析者は何を意識しているか？

# はじめに

社内向けにビジネス職向けの分析依頼時の注意事項を整理する上で、分析者が意識している観点をまとめたので、再編集した上でここで展開してみます。

関連：[データ分析の設計・コミュニケーションの際に意識すること](https://qiita.com/calderarie/items/da40176ff88fea7f9835)


# 分析時に行うコミュニケーションの重要性

分析時にその背景を理解することは、そのニーズを適切に満たす分析を実施することに加え、
成果物に対するQCDS(Quality, Cost, Delivery, Scope)を適切に管理することも重要につながる。

## QCDSとその管理について

ここでのQCDSは、以下の内容を表す。

- Quality：分析の質、精緻さ
- Cost：コスト、ここでは主に人での労力
- Delivery：納期
- Scope：スコープ、作業範囲

QSとCDはトレードオフの関係性にあり、QとSに応じてタスクボリュームが増え、それに応じてCも増大し、Dの達成が困難になる。
ただし、一般にデータ分析人材は不足していることもあり、かけられるコスト(C)は人的リソースによる制約がある。
そのため、「納期(D)を後ろ倒しにする」「質(Q)とスコープ(S)を意思決定を損なわない範囲で下げる」などの調整を適宜行う必要がある。

## 分析におけるDeliveryの調整

一般的な納期調整とあまり変わらないため詳しくは割愛するが、

分析手順にベストエフォートを尽くしている前提で、その手間を理解してもらうことは重要である。

## 分析におけるQualityとScopeの調整

分析時のデータの取り扱い方の要件(≒QやS)によって、基本的にその対応コストは増大する。
データ分析は、意思決定を支えることが目的であるため、意思決定を損なわない限りで余計なコストは減らしていきたい。

分析内容によりケースバイケースであるが、QSと分析設計の観点の2軸から大まかに整理できる。

- QSの観点
    - Quality
        - 分析時の定義の複雑さ
    -  Scope
        - 集計する対象や集計項目の量(≒データ量)

- 分析設計の観点(クロス集計　おイメージ)
    - 分析の対象
        - 取り扱うユーザや期間などの抽出条件
    - 集計軸
        - ユーザセグメントなど
    - 集計項目
        - KPIなど
DBIx::Schema::DSLとMySQL型の対比

## 使える型

| データ型 | MySQLで言うと |
|:-:|:-:|
| tinyint | -128から127（0から255） |
| smallint | -32,768から32,767（0から65,535） |
| integer | int型(-2,147,483,648から2,147,483,647（0から4,294,967,295）) |
| bigint | -9,223,372,036,854,775,808から9,223,372,036,854,775,807（0から18,446,744,073,709,551,615） |
| number | int型の別名 |
| decimal | 固定小数点型 |
| dec | decimalの略称 |
| numeric | decimalの別名 |
| float | 浮動小数点型 |
| double | 浮動小数点型 |
| real | doubleの別名 |
| bit | bit型(2進数) |
| date | date型（YYYY-MM-DD） |
| datetime | datetime型（YYYY-MM-DD HH:MM:SS[.fraction]） |
| timestamp | timestamp型（エポック秒） |
| char |　固定長文字列 |
| varchar | 可変長文字列 |
| string | varchar型の別名 |
| text | text型 |
| binary | 固定長バイナリバイト文字列 |
| varbinary | 可変長バイナリバイト文字列 |
| tinyblob | tinyblob型(バイナリデータ型) |
| blob | blob型(バイナリデータ型) |
| enum | enum型 |
| set | set型(複数選択項目を格納できる) |


## emumの書き方

```perl
create_table 'テーブル名' => columns {
    emum 'hoge' => ['aaa', 'bbb', 'ccc']
}
```
要素を中央に持っていくまとめ(HTML,CSS)

要素を中央に持ってくるやり方を毎回忘れるのでまとめてみました。
他にもやり方があるかもしれませんので、気づいた方おりましたら
コメント頂けますと幸いです。

①文字列の高さを中央にする

```index.html
    <style>
    .container {
     height: 100px;
     position: relative;
     box-sizing: border-box;
     border: 5px solid #76d3f4;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
     margin: 20px 0px;
    }     
   .char_heigth-center {
     /*文字要素の高さを整える*/
     line-height: 100px;
    }
    </style>
    <div class="container">
      <p class="char_heigth-center">文字の高さを中央に</p>
    </div>
```

結果
![スクリーンショット 2021-05-05 13.53.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633008/28a72c7a-6855-4697-5560-b778eb1597b3.png)

②文字の横幅を中央にする
text-align:center;でも可能だが、改行して複数行になると
両方中央寄せになるのうで使い分けが必要

```index.html
    <style>
    .container {
    ・・・
    }
    .char_width-center {
       display: flex;
       justify-content: center;
     }
    </style>
    <div class="container">
      <p class="char_width-center">文字の横の配置を中央に</p>
    </div>
```

結果
![スクリーンショット 2021-05-05 13.53.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633008/6e5bf204-0872-2cab-f9cb-e1e409633a26.png)



③連続した文字要素を中央に配置（縦と横を中央に）

```index.html
    <style>
    .container {
    ・・・
    }     
    .char_heigth-center {
     line-height: 100px;
    }
    .char_width-center {
     display: flex;
     justify-content: center;
    }
    .disflex {
     display: flex;
    }
    .items {
      margin-right: 10px;
    }
    </style>
    <div class="container">
      <div class="disflex char_heigth-center char_width-center">
        <p class="items">文字列1</p>
        <p class="items">文字列2</p>
        <p class="items">文字列3</p>
      </div>
    </div>
```

結果
![スクリーンショット 2021-05-05 13.54.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633008/0c30c213-aaa8-5b34-faca-79c28e02c6b2.png)


④文字列以外の配置を中央にする
画像のように中の文字列は中央に配置されないので注意

```index.html
    <style>
    .container {
    ・・・
    }       
   .element-center {
     width: 60%;
     height: 60%;
     margin: auto;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     border: 5px solid #ff0000;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
    }
    </style>
    <div class="container">
      <div class="element-center">テスト</div>
    </div>
```

追記：以下の構文でも可能みたいです。
   .element-center　{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
　　または親要素に
      .element-align {
        display: flex;
        justify-content: center;
        align-items: center;
      }
　※position は要素ごとにを中央配置できるが、
　　flexは親要素の中身全てが中央配置になるため、使い分けは必要です。
追記２：右下に配置する場合は以下のようにする
      .element-right-bottom{
        position: absolute;
        right: 0;
        bottom: 0;
      }

結果
![スクリーンショット 2021-05-05 14.06.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633008/5d1cf460-ed2c-ac98-8854-a5ad8d5044b1.png)
リモートチームの存在感を伝えるツール「Remote Faces」を作ったので使ってみてください

Remote Facesと言うアプリを開発しています。機能改良して一段落したのでアナウンスツイートしました。

https://twitter.com/dai_shi/status/1389746714337112067

続くツイートに書いてあるように、使われている技術スタックは、下記のようになっています。

- [TypeScript](https://www.typescriptlang.org)
- [React](https://reactjs.org)
- [Valtio](https://github.com/pmndrs/valtio)
- [Yjs](https://github.com/yjs/yjs)
- [IPFS](https://ipfs.io) PubSub
- 場合によって [PeerJS](https://peerjs.com)
- 場合によって [Electron](https://www.electronjs.org)

技術的特徴としては、データ共有のためにサーバを介さないことで、peer-to-peerとも呼ばれます。データは参加している人の間で直接通信されます。サーバがないので、実は誰が使っているかもわかりません。ぜひ使ってみたら感想などお聞かせいただけると嬉しいです。

アプリの機能としては、いくつかのものを参考にしています。

- [Remotty](https://ja.remotty.net)
- [Spatial Chat](https://spatial.chat)
- [Gather Town](https://gather.town)

最大の難点は使い方が慣れるまで難しいことでしょうか。改善していければと思います。

とりあえず、興味を持っていただけた場合は触っていただければと思います。1人で複数のChromeタブでも動作を試すことができます。

ツールはこちら：

<https://remote-faces.js.org>

GitHubはこちら：

<https://github.com/dai-shi/remote-faces>

---

「React Fan」というコミュニティを立ち上げていて、そのSlackでもremote-facesに関する議論や質問ができますので、よろしければご参加ください。

詳しくは、下記のページをご参照ください。

[React開発者向けオンラインサロン「React Fan」の入り口ページ](https://react-fan.axlight.com/)

Slackへの招待リンクも上記ページにあります。
StyleGAN2：Google Colab 'undefined symbol' エラー

#1.はじめに
　Google colabでStyelegan2を使ったコードを久しぶりに動かそうとしたら、エラーが発生しました。コードを書いたのは2020.8で、その当時は問題なく動作したのに、急に動かなくなったわけです。解決に結構時間が掛かったのでメモとして残します。

#2.エラーの内容
　エラーは、モデルをコンパイルしてstylegan2の学習済みパラメータを読み込むときに発生します（下記ログ参照）。

```
......
Loading networks from "gdrive:networks/stylegan2-ffhq-config-f.pkl"...
Downloading https://nvlabs-fi-cdn.nvidia.com/stylegan2/networks/stylegan2-ffhq-config-f.pkl ... done
Setting up TensorFlow plugin "fused_bias_act.cu": Preprocessing... Compiling... Loading... Failed!
......
```
　
　最終的なエラーメッセージは、下記の様です。

```
tensorflow.python.framework.errors_impl.NotFoundError: /content/stylegan2/dnnlib/tflib/_cudacache/fused_bias_act_0f493ee56b0c2b4e01bd31e17dbfca83.so: undefined symbol: _ZN10tensorflow12OpDefBuilder5InputESs
```
　何これ？　fused_bias_act_0f493ee56b0c2b4e01bd31e17dbfca83.so がない？　未定義のシンボル：_ZN10tensorflow12OpDefBuilder5InputESs って何さ？　
　色々ググってみると Tensorflowとcudaのバージョンが合わない時に発生するようなことが書いてあったりしたので、色々いじってみましたが全然ダメでした。

#3.解決策
　問題は、TensorflowとKerasを指定バージョンでインストールしていたことでした（下記参照）。でも 2020.8時点は、これじゃないと上手く動かなかったんだけど。。。。

```python
!pip install tensorflow==1.14
!pip install tensorflow-gpu==1.14
!pip install keras==2.0.8
```
　
　これを、下記の様に変更したら、エラーが嘘の様に消えました。

```python
%tensorflow_version 1.x
```

　お悩みのことがもしいらっしゃれば、参考にどうぞ。
【Blender2.92】レンガの壁を手軽に作る（Wall Factoryを使用）

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Blender2.92

Blenderのメッシュオブジェクト作成アドオン「Wall Factory」を使用してレンガの壁を作ってみます。

完成図↓↓
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8131e018-afa1-a8d8-bde5-fdb6e848a4a3.png)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🕌Blender2.92🕌<br>🏦Wall Factory🏦でレンガの壁を作ってみたよぉ😊<br>めっちゃ手軽にできた💕💕<br>レンガのテクスチャは✏️クリスタで作ってみたよぉ😍<a href="https://t.co/ciNFrpH2vM">https://t.co/ciNFrpH2vM</a><a href="https://twitter.com/hashtag/blender?src=hash&amp;ref_src=twsrc%5Etfw">#blender</a> <a href="https://twitter.com/hashtag/clipstudio?src=hash&amp;ref_src=twsrc%5Etfw">#clipstudio</a> <a href="https://t.co/XNmHJyLNdH">pic.twitter.com/XNmHJyLNdH</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1389805500749938688?ref_src=twsrc%5Etfw">May 5, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#Blender標準メッシュオブジェクト「Wall Factory」追加する

「Edit」-「Preferences」
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5925b53e-aec9-7acc-2ef7-c7e9440f7deb.png)

「Add-ons」タブを選択し、キーワードで`Extra`を入れて検索すると
「Add Mesh: Extra Objects」が表示されるので、チェックON（有効）にする
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/90043178-4733-bf5c-5fd2-af9e3618294b.png)

これで、「Wall Factory」が使えるようになります。

# レンガの壁を作る

「Add」-「Mesh」-「Extras」-「Wall Factory」を選択する
![スクリーンショット 2021-05-05 12.59.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/fef402c8-a008-4645-7583-a7ec23753ddb.png)

レンガの壁ができた。完成
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6ab25077-b285-e6af-4ea3-c31554724d61.png)

「Wall Factory」のプロパティで、いろいろ設定ができます。
プロパティは、右下の「Add a Masonry Wall」を選択すると表示されます。
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/85469964-ca1e-db32-7474-adb205ffa995.png)

# もう一度「Wall Factory」のプロパティを表示する方法

表示する図形で右クリックし、「Change Wall」を選択するとプロパティが表示されます。
![スクリーンショット 2021-05-05 13.04.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/12c03c21-fba5-6172-a721-420a8bbeca97.png)
【Docker】よく使う「Docker」コマンド一覧（オプション付き）

# 【Docker】 よく使う「Docker」コマンド一覧 と Docker の使い方

## Linux 基本コマンド一覧
DockerはLinuxのコンテナ技術を使用しているため、Dockerを使用する際は、Linuxの基本コマンドを使用する必要がある。そのため、以下に頻繁に使用するLinuxの基本コマンドを記載する。

### pwd （現在のフォルダのフルパス、絶対パスを表示させる）
```
username@MacBook-Pro ~ % pwd
>>> User/username/Desktop
```

### cd （指定したパスに移動する）
```
username@MacBook-Pro ~ % cd Documents
username@MacBook-Pro Documents % pwd
>>> User/username/Documents

# ファイルを移動する際の小技
username@MacBook-Pro test_file  % pwd
>>> User/username/Documents/test_file

# cd .. (←一つ上の階層に移動する)
username@MacBook-Pro test_file @ cd ..
username@MacBook-Pro Documents @ pwd
>>> User/username/Documents
```

### ls (現在のフォルダにあるファイルやでディレクトリを表示する)
```
username@MacBook-Pro ~ % ls
>>> dir1 file.txt python_file.py
```

### mkdir (現在のフォルダにディレクトリを作成する)
```
username@MacBook-Pro ~ % mkdir test_dir
username@MacBook-Pro ~ % ls
>>> test_dir
```

### cat (fileの内容を照準出力する)
```
username@MacBook-Pro ~ % cat test_file
>>> this is test file.
```

## Docker コマンド一覧

### Docker imageをダウンロードする
```
# docker image を ”docker hub” からダウンロードする
username@MacBook-Pro ~ % docker pull <Docker image_name>
```
### Docker image を確認する
```
# docker ps で "現在動いている" docker imageを確認 
username@MacBook-Pro ~ % docker ps 
CONTAINER ID   IMAGE   COMMAND   CREATED        STATUS      PORTS     NAMES
7d48fgnb8s5s   ubuntu  'bash'    15 hours ago   Run              sample_image

# docker ps -a で "全ての" docker imageを確認することができる
username@MacBook-Pro ~ % docker ps -a
CONTAINER ID   IMAGE   COMMAND   CREATED        STATUS      PORTS     NAMES
7d48fgnb8s5s   ubuntu  "bash"    15 hours ago   Run                   sample_image
a7a351d007ff   ubuntu  "bash"    6 days ago     Exited                jovial_pasteur
```

## Docker Desktop の使い方

### #1. Docker Desktopをインストールする
「Google」や「Safari」などで、「Docker Desktop インストール方法」と調べるとインストール方法が出てくるので、その手順にしたがってインストールする。 Homebrewを使ってもインストールできるが、**Docker公式サイトよりダウンロードすることをおすすめする**

### #2. Dockerアカウントを作成する

![スクリーンショット 2021-05-01 14.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1403096/962a8334-6b22-2bdb-afd0-05d6fa477a26.png)


アカウントを持っていない場合は、右上の「Get started」をクリックし、Dockerアカウントを作成

### #3. Docker Desktop を起動させる
「Docker Desktop」を起動させ、「Docker Desktop is running」の状態であることを確認する。起動してもダメな場合、「Restart」をクリックして再起動させる。

### #4. ターミナル、またはコマンドプロンプトを開き、Dockerにログインする
「docker login」と入力すると、「username」と「passward」を聞かれるので、入力すると完了。
log outした場合も、#4.をもう一度実行すると、再びログイン可能。
Effective Java(第3版) 項目7 使われなくなったオブジェクト参照を取り除く

使われなくなった参照を保持しないように注意し、メモリリークが発生しないようにする、という内容です。

# 記載内容
## クラスが独自のメモリ管理を行う場合
コード例のスタックのように、クラスが独自のメモリ管理を行う場合はメモリリークに注意する必要が有る。
具体的には、使われなくなった参照にnullを設定することで、不要な参照を取り除けば良い。
ただし、このnullの設定は、不要にコードを乱雑にするため、常に行うべきではない。
(スコープの終了で解放される変数に対して、nullを設定するようなことはするべきではない)

## キャッシュ
オブジェクト参照をキャッシュに入れると、そこにオブジェクト参照が存在することを忘れることが多く、
キャッシュした参照が不要になっても、キャッシュ内に残ったままにしてしまうことが多い。
一般的な対処法として、以下がある。

* WeakHashMap(キーへの参照が無くなった場合に、キャッシュされた値が不要になる場合に有効)
* 古いキャッシュのバックグラウンド(ScheduledThreadPoolExecutor等)での除去
* 直接java.lang.refを使用する(高度なキャッシュ処理が必要な場合)

## リスナー、コールバック
コールバックを登録可能だが、明示的な解除をAPIとして提供していない場合、コールバックが蓄積し、メモリリークとなる。
対処方法として、コールバックに対して、弱い参照だけを保持する方法がある。

# 考察
メモリリークを避けるのは当然ですが、油断するとメモリリークしてしまう、ということは良くあると思います。

特に、クラス内でコレクションによる参照の保持することで、意図せずメモリ管理を行っていることが有ります。
その場合、その参照が増え続けないか、明示的な除去が必要かは、よく考える必要が有ります。
ただ、プログラムの稼働時間が長くなると問題が出る場合もあり、注意が必要かと思います。

メモリリークが発生した場合、プロファイラでの調査等、手間がかかりますので、
実装時に注意しておくべきです。
投稿した画像にリンクをつける

忘備録（自分用）
## 環境
- Mac
- ruby 2.6.5

## 解決したい内容
<%= link_to image-tag(item.image, class: "item-img" ),item_path(item) do %>の記述を追加すると、「NoMethodError in Items#index」を表示する。

投稿した画像をクリックすると、画像の詳細画面に遷移したい。

## 解決策
link_toの記載を見直す。

```ruby
     <% @items.each do |item| %>
      <li class='list'>
        <%= link_to image-tag(item.image, class: "item-img" ),item_path(item) do %>
        <div class='item-img-content'>
        <% end %>
     <% end %>
```
上記を下記に修正

```ruby
     <% @items.each do |item| %>
      <li class='list'>
        <%= link_to item_path(item) do %>
        <div class='item-img-content'>
          <%= image_tag item.image, class: "item-img" %>
        <% end %>
     <% end %>
```

link_to とimage_tagを一緒にせず、do〜endの中に分けて記述することで、解決。
一緒に記述する方法もありそうだが、現時点では、エラーが出るため、上記にて対応。

## 参考にした記事
https://ja.stackoverflow.com/questions/30523/image-tag%E3%81%A8link-to%E3%81%AE%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%81%A7%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E8%B5%B7%E3%81%8D%E3%81%BE%E3%81%99)

https://teratail.com/questions/296307
visual studioでwindowsフォームが追加できない

# つまづいたこと

初心者です。
visual studio 2019でフォームアプリケーションプロジェクトを作成したけど、
フォーム追加しようと思ってもwindowsフォームが見つからない・・・・・

# 解決
単に.NETデスクトップ開発をインストールしていないだけだった・・
入れていると思っていた。

visual studio のツール＞ツールと機能を取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551636/8a124d35-c4a2-343d-53c6-a4c43e499475.png)

.NETデスクトップ開発にチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551636/de70f64a-ec70-27fd-13b3-711f989e3653.png)

再起動して無事追加できましたー
v-onディレクティブ

v-onはDOMイベントを引数に取ります。
*イベントを扱うことをイベントハンドラーと呼ぶ。

|v-on|イベントの種類|
|--|--|
|change|フォーム要素の変更を検知|
|click|マウスクリックを検知|
|dbclick|マウスのダブルクリックを検知|
|input|フォーム要素の変更完了を検知|
|keypress|キーボードのキーダウンを検知|
|keyup|キーボードのキーアップを検知|
|mousedown|マウスボタンのキーダウンを検知|
|mouseup|マウスボタンのキーアップを検知|
|mousemove|マウスカーソルの移動を検知|
|mouseover|マウスカーソルの侵入を検知|
|mouseout|マウスカーソルの離脱を検知|

クリックをカウントするものを作ります。

```vuejs
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
      <p>現在{{ number }}回クリックされています</p>
      <button v-on:click="number += 1">カウントアップ</button>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
          number: 0
        }
  })
</script>
</body>
```

![20210505-130744.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/7528b2d7-a0a4-2938-40d7-1527b75f957a.png)
Amplifyで時系列順に投稿を取得しようとして詰まりました

#はじめに
ReactでAmplifyとGraphQLを用いてDynamoDBにあるデータを時系列順に取得しようとして詰まったので、その解決方法を残しておきます。

※ソートの方法は下記の記事を参考にしました。が私のミスでしっかりと実装できていなかったです。
それにより時系列順になるように実装しましたがデータが返ってこない事象が発生しました。
https://qiita.com/Genmaru/items/cde7f8a3accb2585e391

その際の原因と解決方法を残しておきたいと思います。

#原因と解決策
GraphQLのスキーマ定義時に当初は以下のようにしてました。

```
type Post @model @searchable {
  id: ID!
  postBody: String!
  status: String
  createdAt: String!
  comments: [Comment] @connection(name: "PostComments") #relationship
  likes: [Like] @connection(name: "PostLikes")
}

```
このスキーマだと時系列順に取得できませんでした。
何が悪かったのか？それは『createdAt: String!』でした。
正しくは以下のように『 createdAt: AWSDateTime!』とするべきでした。

```
type Post @model @searchable {
  id: ID!
  postBody: String!
  status: String
  createdAt: AWSDateTime!
  comments: [Comment] @connection(name: "PostComments") #relationship
  likes: [Like] @connection(name: "PostLikes")
}
```

#最後に

もし同じようなミスをしている人の助けになれば幸いです。
AWS CLIのバージョンアップ

# 背景
ローカルのAWS構成情報一覧を表示しようと思い、

```
$ aws configure list-profiles
```

を実行したが、AWS CLIのバージョンが古いみたく、実行失敗した。
2系のAWSCLIにバージョンアップする必要があるので、その手順をメモ程度にざざっと書く。

# 前提

```
$ aws --version
aws-cli/1.18.43 Python/2.7.16 Darwin/17.7.0 botocore/1.15.43
```

# バージョンアップ実行

```
$ curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
$ sudo installer -pkg AWSCLIV2.pkg -target /
```

# 確認

```
$ aws --version
aws-cli/2.2.2 Python/3.8.8 Darwin/17.7.0 exe/x86_64 prompt/off
```
2系のaws-cliにバージョンアップできました！
aws-cli以外にも変更されてるのは、他作業で変わってしまったかもしれないですm(_ _)m

# 参考

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2-mac.html
WARNING: Running pip as root will break packages and permissions.

久しぶりに動かしてみたら上記のエラーが出た。
ということで、どうすればよいか。

管理者モードでインストールやアップデートしようとするとこうなるので、

```

su yourname

```

的な感じでルート権限から抜けて アップデートなりすると良い。
nuxtアプリをherokuにデプロイする

<h1>nuxtで作成したアプリをherokuにデプロイする</h1>
先日nuxt.jsで作成したアプリをherokuにデプロイしたのでそのメモとして執筆しました。

<h2>前提</h2>
<h3>ハードウェア</h3>
・macbook pro13　m1チップ非搭載

<h3>ソフトウェア</h3>
・macOS bi sur 11.3
・nuxt 2.14.6
・パッケージマネジャ： yarn


<h2>タスク概要</h2>
概ね下記タスクを実行すればデプロイできるます。
僕が詰まった点は⑥⑦ですが、エラー内容は後述します。


①herokuアカウント作成
②heroku cli導入
③herokuへのログイン
④heroku上でアプリ作成
⑤環境変数を設定
⑥Procfileの作成
⑦.gitignoreの設定
⑧デプロイ

<h2>タスク詳細</h2>
<h3>①herokuアカウント作成</h3>
https://jp.heroku.com/ へアクセスしアカウントを作成

<h3>②heroku cli導入</h3>
下記コードを実行、実行済みの場合はパスして問題ないです。
```$ brew install heroku/brew/heroku```

<h3>③herokuへのログイン</h3>
下記コードを実行
```$ heroku login```

実行するとログインするか確認されるのでenterキーを実行![スクリーンショット 2021-05-05 12.31.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744524/e2514632-dc47-dc52-b2db-201c774002b1.png)

Log Inをクリックしてターミナルに戻る。
ターミナルの表示が下記になっていればOKです。

`Logged in as <メールアドレス>`

<h3>④heroku上でアプリ作成</h3>
下記コマンドを実行してください。<アプリの名前>は好きな名前を設定してください。
ただし、すでに存在するものは登録できないので、何度か調整する必要があります。
`$ heroku create <アプリの名前>`

<h3>⑤環境変数を設定</h3>
下記コマンドもターミナルから実行してください。

※ブラウザからherokuにログインして、作成したアプリの"settings"の"Config Vars"からも変更できます。

```$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production```

<h3>⑥Procfileの作成</h3>
アプリ直下でファイル名"Procfile"を作成してください。
yarn lockと同じ階層です。拡張子は不要です。
記述内容は下記一行です。

`web: yarn start`

※パッケージマネージャによって異なります。
 ご自身のpackage.jsonを確認してください。
```"scripts": {
    "start": "nuxt start",
    "generate": "nuxt generate",
 },
```


<h3>⑦.gitignoreの設定</h3>
`.nuxt, dist`をgitignoreから削除してください。

これができていないと下記のようにエラーします。

```╭─────────────────────────────────────────────────────────────────────────────────╮
2021-05-01T04:46:13.991279+00:00 app[web.1]: │                                                                                 │
2021-05-01T04:46:13.991279+00:00 app[web.1]: │   ✖ Nuxt Fatal Error                                                            │
2021-05-01T04:46:13.991280+00:00 app[web.1]: │                                                                                 │
2021-05-01T04:46:13.991280+00:00 app[web.1]: │   Error: Output directory `dist/` does not exists, please use `nuxt generate`   │
2021-05-01T04:46:13.991280+00:00 app[web.1]: │   before `nuxt start` for static target.                                        │
2021-05-01T04:46:13.991281+00:00 app[web.1]: │                                                                                 │
2021-05-01T04:46:13.991281+00:00 app[web.1]: ╰────────────────────────────────────────────────────────────────────────���────────╯
```


<h3>⑧デプロイ</h3>
下記コマンドを実行してください。gitの環境によっては最後はmasterではエラーします。
その場合はmasterをmainに変えて実行してみてください。

`$ git push heroku master`

しばらく時間がかかりますがエラーしなければ、`$ heroku open`を実行してアプリを開きます。

ちなみに、僕がデプロイしたアプリはこちらです。
https://amaimon-decision.herokuapp.com/
【google colab】2行でgoogle driveの公開ファイルをダウンロードする

#結論

```python
from google_drive_downloader import GoogleDriveDownloader as gdd

gdd.download_file_from_google_drive(file_id='ダウンロードしたいファイルのid', \
dest_path='ダウンロード後のファイル名')
```

#感想
今までダウンロードするために15行くらいのコードを使ってました。が、2行でできるとは······。便利！
競プロ練習

#競プロの練習
某競プロサイトの初心者用の``Card Game for Two``を解いてみた。

結論から言うとできませんでした。

自分なりにアルゴリズムを考えた結果がこちらです。
1. for文でカードを取り出す
2. アリスが取ったカードの合計値からボブか取ったカードの合計値を引いた値を出力すればいいと思った
3. 最大値を交互に取り出す記述を作レバいいと思った
4. これは思いつきはしたが使用しなかったのですが、sortのreserve=Trueを使えば入力した値を最大値の順番でリストにしていくことができると思った。

自分なりに１〜３を記述しようと考えてfor文を使ったりwhile文を使ってができなかったので解答を見てみた。

**解答**

```python:Python
n = int(input())
a = sorted(list(map(int, input().split())), reverse=True)
print(sum(a[::2]) - sum(a[1::2]))
```

これを思い付いた人は凄いと思った。
複雑なことをせずにsortとスライスとsumを使って結果を出しているのが凄いと思いました。

**感想**
自分に近い考え方としてfor文を使った解答もありましたが、今回参考にさせてもらったコードを見て、pythonの基本的な文法をまだまだ理解できてないことがわかったので、これを糧としてもっと基本に忠実に複雑に考えすぎないようにしていきたいと思いました。
円を３等分する。

新聞の書籍広告を見ていたら、「ケーキを3等分」するのに下記のような分け方をしてしまう子供たちがいるのだとか。　どこが悪いのか？　これはこれで良いのではないか。と思いつつも、実際には、どう直線を引けば良いか考察してみた。確かに解析的に3等分出来ないかもしれないが、今は、コンピューターとかプログラミングという道具もあるので、異なるアプローチがあっても、良いと思うのだが。

#### こんな風に3分割したい場合は、どうする。
![3divided_circle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561584/4f75b243-d611-66c0-461a-efffe87a02c8.png)

対称性から上記を４分割の　1/４円に関して考える。
![quarter_circle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561584/3c5bc5f9-a813-194c-c52a-492276b73eee.png)



それぞれの面積は
$S1+S2=a^2\frac{(π/2-θ)}{2},　S2=xa\frac{cos(θ)}{2},　S3=a^2\frac{θ}{2}$
また、$x=asin(θ),　S1=2(S2+S3)$ なので、解いてみると
$cos(θ)sin(θ)+θ-\frac{π}{6}=0$
が得られる。  

ということになるのだが、まず
#### cos(θ)*sin(θ)+θ-π/6 は、どんな曲線になるのか？
という脱線をしたくなったので、python を使って図示してみる。

#### 求める数式を図示してみる。

```ruby:plot.py
import numpy as np
import matplotlib.pyplot as plt

Q = np.linspace(0, np.pi/2, 256, endpoint=True)
Y= np.cos(Q)*np.sin(Q)+(Q)-np.pi/6

plt.grid(True)
plt.plot(Q, Y)
plt.show()
```

![Figure_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561584/ff303dfb-d70c-b0ec-907b-840e276c117b.png)

0.2 を少し超えたところで、0.0 になりそうなことが分かる。

#### 求める角度(θ)を計算で求めてみる

```ruby:calc.py
## 関数値(Y)が、ゼロに最も近づく時の条件を求める。

import numpy as np

Y=100 #差異の初期値設定

for j in np.arange(0,3.14/4,0.0001):
    k = np.sin(j)*np.cos(j)+(j)-np.pi/6
#    print (j,k) # for calc check
    if Y > np.abs(k):
        Y = np.abs(k)
        U = j
print ("angle=",U,",", U*360/(2*np.pi),"degree,","X=",np.sin(U),"sai=",Y)
    
```

angle(θ)= 0.2681 , 15.36099848745737 degree, X= 0.26489979163738814 sai= 6.227837301686634e-05
という解が得られた。半径の1/4 を少し超える辺りで、分割線を引けば良いことになる。
間違いとかありましたらご指摘下さい。    
    
##### 教師が期待する模範回答（蛇足）
作図による円の3等分割を直線定規とコンパスだけで行うには、円を横切る任意の直線を描き、コンパスを用いて、その垂直2等分線を引く、これは直径を示す直線となるので、もう一本、円を横切る直線を描き、そちらも垂直2等分線を引くと、その交点が円の中心になる。円の半径をコンパスで取ることができるので、円の外周上の任意の1点から、その半径で、外周上に印を付けていくと、外周を６等分でき、中心から、120度毎に直線を引けば均等に３分割できる。　というところでしょうか。
Chrome キーボードショートカット備忘録

これだけは覚えておきたいChromeのキーボードショートカットを残しておく。
## 開く系
| 操作 | キー |
|:------------|:------------|
| 新しいタブを開く | ctrl + t |
| 新しいウィンドウを開く | ctrl + n |
| 履歴を開く | ctrl + h |
| ダウンロードリストを開く | ctrl + j |
| ブックマークマネージャを開く | ctrl + Shift + o |

## 移動系
| 操作 | キー |
|:------------|:------------|
| （同じウィンドウ内の）n番目のタブに移動 | ctrl + 数字n(1~9) |
| （同じウィンドウ内の）1番後ろのタブに移動 | ctrl + 9 |
| （同じウィンドウ内の）1つ後ろのタブに移動 | ctrl + Tab |
| （同じウィンドウ内の）1つ前のタブに移動 | ctrl + Shift + Tab |
| 別のウィンドウに移動 | Alt + Tab |
| 1つ前に閲覧したページに戻る（ブラウザバック） | Alt + 左矢印 |
| (1度戻ったあと)1つあとに閲覧したページに進む | Alt + 右矢印 |
| ページの1番上に移動 | ctrl + Alt + 上矢印 |
| ページの1番下に移動 | ctrl + Alt + 下矢印 |
| アドレスバーに移動 | Alt + d |

## その他
| 操作 | キー |
|:------------|:------------|
| Google検索を使用する | ctrl + k |
| ページを再読み込みする | ctrl + r |
| 現在開いているページをブックマークする | ctrl + d |
| ウィンドウを最小化する | Alt + -（ハイフン） |
| ブックマークバーの表示/非表示を切り替える | ctrl + Shift + b |
| 現在開いているタブを閉じる | ctrl + w |
【自分用】@Wiki書き方メモ

# 概要
- 初書きです
- 最近個人創作でアットwikiを書くことになったため、その構文ルールをQiitaマークダウンと比較しながら自分用にまとめておきます。
- あとQiitaを書いてみたかったので練習です。書き足すこともあります。
- ごっちゃです。練習故お許しを…

***

## 見出し
##### アットwiki
```
*見出しh1
**見出しh2
***見出しh3
```
##### Qiita
```
#見出しh1
##見出しh2
###見出しh3
```


## 太字
##### アットwiki
```
&bold(){ここに文字を入力}
```
##### Qiita
```
**テキスト**
```


## 取り消し線
##### アットwiki
```
&s(){ここに文字を入力}
```
##### Qiita
```
~~テキスト~~
```


## 下線
##### アットwiki
```
&u(){ここに文字を入力}
```
##### Qiita
```

```


## 箇条書き
##### アットwiki
```
-箇条書き1
--箇条書き2
---箇条書き3
```
##### Qiita
```
* 箇条書き1
 * 箇条書き2
 * 箇条書き3
```


## テーブル
##### アットwiki
```
|||||
|||||
|||||
```
##### Qiita
```
| 1 | 2 | 3 | 4 |
|:-:|:-:|:-:|:-:|
|   |   |   |   |
|   |   |   |   |
```


## 水平線
##### アットwiki
```
----
```
##### Qiita
```
***
```


## リンク
##### アットwiki
```
[[ページ名またはURL]]
```
##### Qiita
```
[タイトル](URL)
```


## 画像
##### アットwiki
```
&image(画像ファイル名または画像URL)
```
##### Qiita
```
![代替テキスト](URL "タイトル")
```


## 文字カラー
##### アットwiki
```
&color(#FFFFFF){ここに文字を入力}
```
##### Qiita
```
<font color="Red">テキスト</font>
```


## 引用
##### アットwiki
```
> 引用文1
>> 引用文2
>>> 引用文3 
```
##### Qiita
```
> 引用文1
>> 引用文2
>>> 引用文3
```


## まとめ・考察
- 今回はQiitaとアットwikiに絞りました。色々な書き方がごっちゃになってたので少しは整理できたかなと（主観）
- コミュニケーションサービスによって記法がまちまちなことも分かってきました。同じだったり違ったり、あったりなかったり。
- Markdown記法と勘違いして使っている記法もあるのかもですね。プラグインなどによってまた変わってくるようです。
- アットWikiにはそもMarkdownモードとかもあるので上手く使い分けようと思います。
- Qiita楽しいです。ちょっとずつ記事書ける人になれればと思います。
- 何かあればコメントいただけるとありがたいです。ご覧いただきありがとうございました。


## 参考
- [アットウィキ(@WIKI)ご利用ガイド wikiの編集例](https://w.atwiki.jp/guide/pages/226.html#id_6861418f)
- [Qiita マークダウン記法 一覧表・チートシート](https://qiita.com/kamorits/items/6f342da395ad57468ae3)
- [Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

## 更新履歴
- 2021/05/05：公開
GeoJSONポリゴンの中心(緯度経度)を求める

シンプルにポリゴンの中心を求めたいときに。


```js
const getCentroid =  (geometry) => {
    var polygon = [];

    switch (geometry.type) {
        case "MultiPolygon":
            geometry.coordinates.forEach( (d, i) => {
                if (i == 0 || polygon.length < d[0].length) polygon = d[0];
            });
            break;
        case "Polygon":
            polygon = geometry.coordinates[0];
            break;
    }

    return polygon.reduce(
         (a, b) => {
            return [a[0] + b[0] / polygon.length, a[1] + b[1] / polygon.length];
        },
        [0, 0]
    );
}
```

geojsonのgeometryプロパティを渡す。

```js
const  geojson =   {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Polygon",
      "coordinates": [
        [
          [138.7309,35.3628],[138.8079,35.1983],[139.0248,35.2248],[138.7309,35.3628]
        ]
      ]
  }
}

//中心地を求める
const center = getCentroid(geo.geometry);
// ->  [138.823625, 35.287175000000005] 

```
RSpec（コントローラーの単体テスト）

### コントローラーの単体テストコードを書く方針
コントローラーのテストコードを書く方針は、あるアクションにリクエストを送ったときに想定通りのレスポンスが生成されるかどうかを確かめることです。

今回は、以下のexampleをテストしました。

- indexアクションにリクエストすると正常にレスポンスが返ってくる

```
describe 'GET #index' do
 it 'indexアクションにリクエストすると正常にレスポンスが返ってくる' do
  get root_path
  expect(response.status).to eq 200
 end
end
```

まず最初にどこのパスにリクエストを送りたいか記述します。（rails routesにてパスを確認しました。）

```
Prefix          Verb    URIPattern                    Controller#Action
root            GET     /                             tweets#index
```

今回は、indexアクションにリクエストを送りたいのでget root_pathです。


次の行のresponseの記述でリクエストに対するレスポンスそのものが含まれます。続けて.statusと記述することでそのレスポンスのステータスコードが取得できます。


ステータスコードは以下のような分類になっています。

HTTPステータスコード
100~ 処理の継続中
200~ 処理の成功
300~ リダイレクト
400~ クライアントのエラー
500~ サーバーのエラー


今回は正常にレスポンスを得ることを確かめたいため200というステータスコードを期待します。よって、expect(response.status).to eq 200と記述しました。
【Linux】Linuxコマンドまとめ

Linuxコマンドをまとめたものです。
今後さらに追記予定です。

#ls
ファイルやディレクトリ名を表示する。

`$ ls [オプション] [ディレクトリ（ファイル）]`
オプション

|||
|---|---|
|-a|通常のファイル（ディレクトリ）の他にドットファイルも含めて表示|
|-F|分類記号を付与して表示|
|-l|最終更新日時やファイル（ディレクトリ）のオーナ、パーミッションなどを表示|
|-t|ファイル（ディレクトリ）をアルファベット順でなく、最終更新日時に従って最終更新された順に表示|
|-R|サブディレクトリ内の全てのファイル（ディレクトリ）も全て表示|
|-1|一行に一つのエントリを表示|
|--color=auto|ファイルやディレクトリを種類ごとに異なる色で表示|


#mkdir
ディレクトリを作成する。

`$ mkdir [ディレクトリ]`

オプション

|||
|---|---|
|-m *mode*|作成するディレクトリのパーミッションを*mode*で指定した値にする。|
|-p|引数に指定したディレクトリのパスが存在しない場合、その中間ディレクトリも含めて新たにディレクトリを作成|

（例）

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

# ディレクトリdir1, dir2, dir3をまとめて作成
$ mkdir dir1 dir2 dir3

# カレントディレクトリにディレクトリdir1が存在しない時、dir1とそのサブディレクトリdir2を同時に作成。
$ mkdir -p dir1/dir2
```


#cat
ファイルの内容を表示する。

`$ cat [オプション] [ファイル...]`

オプション

|||
|---|---|
|-n|表示する内容に行番号をつける|
|-b|-nオプションと同様に行番号をつけるが、空行をカウントしない|
|-A|全ての制御文字を表示|


（例）

```
#ファイルfile1の内容を表示
$ cat file1

#ファイルfile1, file2, file3をつなげて表示
$cat file1 file2 file3

#リダイレクトを利用してfile1とfile2を連結してfile3に保存
$ cat file1 file2 > file3

#標準入力から入力された内容をfile1に書き込む(Control+dで入力を終了)
$ cat > file1
```

#cp
ファイルをコピーする。

`cp [オプション] コピー元ファイル（ディレクトリ）... コピー先ディレクトリ`

オプション

|||
|---|---|
|-i|同名のファイルが存在する場合には、上書きするかどうかをユーザに確認する|
|-f|-iとは逆に、ユーザに確認せずに全ての上書きを行う|
|-r|ディレクトリごとコピー|
|-d|シンボリックリンクとハードリンクを、そのままリンクとしてコピー|
|-p|日付、フラグなどのファイル情報を出来る限りそのままにコピー|
|-v|コピー元ファイルとコピー先ファイルの名前を表示|
|-a|コピー元ファイルの構成と属性を可能な限り保持してコピー|
|-u|同名のファイルが存在する場合には、コピー元ファイルの方がコピー先ファイルよりも新しい時だけコピー|

（例）

```
#ファイルfileをディレクトリdirにコピー
$ cp file dir

#file1, file2, file3を、まとめてディレクトリdirにコピー
$ cp file1 file2 file3 dir

#ディレクトリdir1をまるごとディレクトリdirにコピー
$ cp -r dir1 dir
```



#mv
ファイルを移動する。

`mv [オプション] 移動元ファイル（ディレクトリ）... 移動先ディレクトリ`

オプション

|||
|---|---|
|-i|同盟のファイルが存在する場合には上書きするかどうかをユーザに確認|
|-f|-iとは逆に、ユーザに確認せず全ての上書きを行う|
|-v|移動元ファイルと移動先や変更後ファイルの名前を表示|
|-b|ファイルを上書きする場合には、ファイル名の末尾に"~"がついたファイル名でバックアップを作成|
|-u|同名ファイルが存在する場合には、移動元ファイルの方が移動先ファイルよりも新しいときだけ移動|

（例）

```
#ファイルfileをディレクトリdirに移動
$ mv file dir

#ファイルfile1, file2, ディレクトリdir1をまとめてディレクトリdirに移動
$ mv file1 file2 dir1 dir
```

#rm
ファイルを削除する。

`rm [オプション] ファイル...`

オプション

|||
|---|---|
|-i|削除するかどうかをユーザに確認|
|-f|-iとは逆にユーザに確認せず全て削除|
|-r|ディレクトリを削除|

（例）

```
#ファイルfileを削除
$ rm file

#ディレクトリdirを削除
$ rm -r dir

#file1 file2 file3をまとめて削除
$ rm file1 file2 file3
```






#pwd
カレントディレクトリを表示する。

`pwd`

（例）

```
$ pwd
```

#cd
カレントディレクトリを変更する。

`cd ディレクトリ名`

（例）

```
#ディレクトリdirへ移動
$ cd dir

#ホームディレクトリへ移動
$ cd
```



#which, whereis
プログラムの存在するパスを表示する。

どこにあるプログラムが実行されるか
`which [オプション] コマンド名`


関連するファイルがどこにあるのか
`whereis [オプション] コマンド名`




#clear
端末の表示内容を削除する。

`clear`


#&
バックグランドで実行する。

`コマンド &`

#Ctrl+Z
実行中のプログラムを中断

#Ctrl+C
実行中のプログラムを強制終了



#jobs
実行中のプログラムを表示する。

`jobs [オプション] [ジョブ番号...]`

オプション

|||
|---|---|
|-i|プロセスIDを表示|


ジョブ番号の指定

|||
|---|---|
|%%, %+|カレントジョブ|
|%-|以前のジョブ|
|%n|n番のジョブ|
|%string|コマンド名がstringで始まるジョブ|
|%?string|コマンド名にstringが含まれるジョブ|

#fg
フォアグランドで実行する。

"&"をつけてバックグランドで実行したプログラムフォアグランドで実行したい場合やCtrl+Zで一旦中断したプログラムを再開したい場合など。

`fg [ジョブ番号]`

（例）

```
#カレントジョブをフォアグランドで実行
$ fg

#ジョブ番号２のジョブをフォアグランドで実行
$ fg %2
```



#bg
中断中のプログラムをバックグランドで再開する。
Ctrl+Zなどで一旦中断したプログラムをバックグランドで再開する


（例）

```
#カレントジョブをバックグランドで実行する
$ bg

#ジョブ番号３のジョブをバックグランドで実行
$ bg %3
```
【Blender2.92】現在の視点をカメラに適用する方法

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Blender2.92

現在の視点をカメラに適用する方法
「View」-「Align View」-「Align Active Camera to View」

右側のカメラViewをクリックすると、カメラビューで表示します。
![スクリーンショット 2021-05-05 12.43.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8c14d379-cf46-7a6b-430b-807e681ec75c.png)
Datasaber 課題：Viz作成-03

## Datasaber 課題：Viz作成-03

### ■ この文書は何か：
Datasaber 課題で、なんでもいいからデータを用いて Viz を作成して公開せよ！！
っていうフリースタイルな課題があったため、``やったこと``と``学んだこと``をめちゃくちゃラフにまとめる。第三弾

### ■ 結論：
- やったこと；
    - 警視庁の犯罪発生情報 DB から、``東京都の自転車盗``を持ってきて解析
    - 自転車盗件数 No.1 の大田区について、自転車盗を減少させるために、どのような働き掛けをする必要があるかを、データ分析結果より論じる
- 成果物；
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194994/9306ed9f-6fe9-9e4a-7a14-e505e14eab9a.png)


#### 1. データセットの用意と、目標設定
警視庁の犯罪発生情報 DB から抽出。
（Special Thx :tada:：https://www.keishicho.metro.tokyo.jp/about_mpd/jokyo_tokei/jokyo/hanzaihasseijyouhou.html）

| Column | Data 例 |
| --- | --- |
| 市区町村（発生地） | 中央区 |
| 施錠関係 | 施錠した |
| 町丁目（発生地） | 日本橋大伝馬町 |
| 発生場所の属性 | 道路上 |
| 発生年月日 | 2019/09/30 |
| 管轄交番 | 本町交番 |
| 被害者の年齢 | 10歳代 |
| 被害者の職業 | 大学生 |

#### 2. 解析
- 東京都大田区の自転車盗の数に着目して、大田区内のどの交番で発生件数が多いかを可視化
    - また、発生件数が多い交番での自転車盗が減少した場合、区内ランクにどう影響するかをアクションとして解析した

| 除外前 | 除外後 |
| --- | --- |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194994/8d4a13ae-0459-61d1-1911-6ec9bc09a84e.png)
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194994/f59af0b7-1252-7525-66d2-21d6e0e088e4.png)　|

- ダッシュボードアクションフィルターから、「除外」を選択することで実装
（参考：https://youtu.be/yOIDQZ3siBs?list=PLR1ulf4cyh2lTnNKO1m3_VGgKRLczHOgO&t=1117）

#### 3. インサイトと今後の展望
- インサイト
    - 大田区内の上記 2 つの交番で発生件数が多いことが分かった
    - また 2 つの交番における被害者年齢を解析したところ若者（特に 20 代）の被害数が多く、その半数は施錠をしていないとの証言をしていた
→ ``アクションとしては、若者への「施錠」の促進が有効であると考える``
- 今後の展望
    - 20 代の被害が多い理由が、大田区蒲田の特色に起因しているのかどうかなどに踏み込んでいない
    - ここに踏み込むことで、効果的な上記アクションの実現方法などを検討できる可能性がある
        - 大学が付近に多いなどであれば、大学で促進を実施してもらうなど
[Pandoc] Markdownに埋め込まれたPlantUMLソースを画像に置換する

## はじめに
`pandoc`単体では、Markdownに埋め込まれたPlantUMLを自動的に処理することはできず、先人たちは`markdown`のパース結果を`json`フォーマットで取り出し、`python`等で苦心して変換していた（記憶がある）

幸いにも、バージョン`2.0`以降、組み込まれた`Lua`言語によるフィルタ処理が使えるようになった。

実際、`pandoc`公式のレポジトリ([pandoc/lua-filters](https://github.com/pandoc/lua-filters))には、多くの`Lua`フィルタが用意されており、その中にある[lua-filters/diagram-generator](https://github.com/pandoc/lua-filters/tree/master/diagram-generator)は`PlantUML`のソースを画像に置き換えるフィルタがある。

ただしこのフィルタ、ローカルにインストールして動かすタイプのため、準備が何かとメンドイ。
今日日、`docker`コンテナ立ち上げるくらいで済ませて欲しいものである。

ところで、`PlantUML`は、*テキスト エンコード* 方式でエンコードして投げつけると、画像を返してくれる`PlantUML Server`という機能（Web App)を持っている。 (see: https://plantuml.com/ja/text-encoding)

また、`docker hub`に`PlantUML Server`イメージも用意してくれている([plantuml/plantuml-server](https://hub.docker.com/r/plantuml/plantuml-server))。

これらを悪魔合体させて`Lua`フィルタに組み込んでやれば、幾分楽になるのではという思いでチャレンジしてみた。

ざっと調べてみたところ、`Lua`フィルタ＋`PlantUML Server`は見つからなかったので新規性あるかも

## レポジトリ

簡易的な内容の`markdown`について置換できたので、`github`にレポジトリぶち上げときました([ritalin/pandoc-plantuml-luafilter](https://github.com/ritalin/pandoc-plantuml-luafilter))。詳細はそちらを参照してください、

## 処理内容の詳細

`PlantUML Server`にリクエストを送るための、*テキスト エンコード* 方式を[サイト](https://plantuml.com/ja/text-encoding)から引用すると、

> 1. テキストをUTF-8でエンコードします。
> 2. DeflateまたはBrotliアルゴリズムで圧縮します。
> 3. Base64に類似したアルゴリズムを使って、ASCIIに再エンコーディングします。

とされている。

1については、`pandoc`は、ソースを`UTF-8`で記述しなければならないため、多分解決していると思われる。

2については、純Lua製の[SafeteeWoW/LibDeflate](https://github.com/SafeteeWoW/LibDeflate)が見つかった。[^1]

問題は、`Lua`フィルタで外部ライブラリを使うことができるかどうかということ。
`pandoc`の[ドキュメント](https://pandoc.org/lua-filters.html#type-commonstate)には、

> Initialization of pandoc’s Lua interpreter can be controlled by placing a file init.lua in pandoc’s data directory. 

とあり、一応組み込むことは可能っぽい。しかしグローバルに依存ライブラリを入れるのはちょっといただけない。
ということで、代案はないか探した。いっぱい探した。

結果、パッケージのソース検索パスに入れてあげれば、グローバルに組み込まなくても使えることが判明。
検索パスは`package.path`に保持されているため、

```lua
local search_paths = {
    package.path,
    paths.join({ root_dir, "modules", "LibDeflate", "?.lua" })
}
package.path = table.concat(search_paths, ";")
```

としておくことで、

```lua
local libDeflate = require("LibDeflate")
```

のような一般的な形式で外部ライブラリをロードできた。
また、副効果としてフィルタパスに親ディレクトリ(`..`)を含んでいても解決してくれるようになった。

3については、`PlantUML`公式のサンプルをもとに頑張って実装した。
`pandoc`の`Lua`実装はバージョン`5.3`なので、ビット演算子が標準に組み込まれてくれてたおかげ([Bitwise Operators](https://www.lua.org/manual/5.3/manual.html#3.4.2))でずいぶん楽できた。

次に、`PlantUML Server`にリクエストを送ること。
これは、`pandoc`サイドに用意された`pandoc.mediabag`モジュールに[fetchメソッド]()があり、それを使うことで解決。

ファイル保存は、標準ライブラリの`io`モジュールを使用。

最後に、コードブロックを画像タグに置換して完了。

```lua
local img_el = pandoc.Image({}, image_src, "")

return pandoc.Para { img_el }
```

## 制限事項

* 日本語を含む`PlantUML`のソースで試していないためおかしくなるかも
* 内蔵の`Lua`フィルタでは、フォルダ作ったり、ファイルの存在チェックしたり、`URL`が正しいかチェックしたりできないので[^2]、 設定間違えると謎のエラーが出るかもしれません。

## あとがき

`Lua`初めて触ったけど、右往左往してなんとか形にはできた。

[^1]: ちなみに`Brotli`のライブラリも存在していたが、ネイティブライブラリに依存していて手軽さに欠けるため断念。
[^2]: 正確には[LuaFileSystem](https://keplerproject.github.io/luafilesystem/manual.html)を使えば可能ではあるが、ネイティブライブラリ依存（要はソースからのビルドが必要)
Webアプリケーション（1）

#急な事態ですね
コロナなどいろいろと急な事態なので、HTML、CSS等を学んでいきましょう。Qitaの投稿の練習も兼ねています。
##開発環境の準備
まず、開発環境を準備します。実際の運用については次号で。

##ダウンロード（1）
今回は簡単な内容ですのでテキストエディタでも充分なのですが、今回は[Visual Studio CODE](https://code.visualstudio.com/ "Visual Studio CODE")を利用します。普段使用しているVisual Studioとはちょっと違いますのでご注意ください。
上記リンク先よOSに応じたソフトをダウンロードし、インストールなどしてください。

###ソフトの起動と日本語化
Visual Studio CODEを起動します。
おっと、**英語メニュー**ですね。
ここで逃げ出したい気持ちはよく分かるのですが、Visual Studio CODEはちょっとひと手間加えると日本語化できるらしいっす。


###Visual Studio CODEの日本語化
1. アプリケーションウィンドウの右下、歯車のアイコンをクリックします。
1. その中に**Extensions**（機能拡張の意味）が表示されるのでクリックします
1. <img width="300" alt="Extensions画像" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221026/7c3b1289-6c50-2e3e-f4d0-f02c6cd4f903.png">
1. 左上にExtensionの検索フィールドが出ますので**language**と入力してください
1. **Japanese Language Pack**が候補に出てきますので、そこの**Install**ボタンを押します
1. <img width="300" alt="japanese" src= "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221026/b52ad68d-cc2d-a09f-d053-2e86b1b7398a.png">
1. Restart（再起動）するか右下のウィンドウで聞いてきますので、**Restart**をクリックします。<img width="300" alt="restart.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221026/85c7400b-28f8-6389-ee5b-f9ad450defde.png">
1. ソフトが再起動され、日本語化されました<img width="300" alt="jp.png" src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221026/7f309af7-8c6b-d86b-4d96-4be8b927721f.png">

##ダウンロード（2）

###XAMPPの準備
実行環境用として、XAMPPをダウンロード＆インストールします。
####XAMPPは車校みたいなもの
車校（東海地区では自動車学校のことをこう呼ぶ）では、**まず敷地内で運転の練習をしてから**路上教習に出ますよね。XAMPPはその車校みたいなもんです。
いきなりサイトを公開するんじゃなくて**XAMPPの中でテストしてから**本番サーバで公開という流れをとったりします。なので、XAMPPはみなさんのパソコンの中（ローカル）にサーバを作ってテストする環境を作るツールです。（ローカルサーバって言ったりします）
###XAMPPダウンロード＆インストール
Windows環境が無いので、[こちら](https://www.javadrive.jp/xampp/install/index1.html"外部サイト")を参考にインストールしてください。（外部サイトが立ち上がります）
#####余談
余談ですけどHTML、CSS、JavasScriptのテストであればXAMPPは無くてもいいかもしれません。パソコン内のブラウザ（Chromeとか）でテストできます。
XAMPPを入れるのは、サーバが必用なPHPやSQLをいじってみたいからですね。ゲームのスコアのとか、ランキングとか記録してみたいですよね。
ここまでインストールしたら、次のステップにすすみます。

##次
[Webアプリケーション（2）](https://qiita.com/nekooosaka/items/5b70b744ec06c8a6074e)