OmniAICreator/Qiita-1.07M huggingface dataset:
■アバター（Animaze by FaceRig）を使ってオンライン会議に入ってみた件

##**■はじめに**
・以前、FaceRigについて掲載したネタを、その後継アプリの”Animaze by FaceRig”でやってみたらってことで書いています。
　オンラインでミーティングをすることもしばしばあるかと思います。そんな時、”顔出しは抵抗ある…　声だけと言うのもちょっと…　アバター使ってみたいけどめんどくさいのやだ…　”と言うことありますよね。そこで、簡単にアバターで入れるやり方をお教えします。と言った感じで忘れないうちに**備忘録**として残しておきます

###**■■ここで出来るようになること**
・”Animaze by FaceRig”(ユーザーの顔の表情をWebカメラを取り込み、アバターを使って動作を再現するで表現するソフトウェア)を使ってオンライン会議アプリ（Zoom, Teams, GoogleMeet）にアバターで入ることができる様になります

##**■環境**
**・Windows 10 （”Animaze by FaceRig”がWindowsしか対応していないのでそれ以外のOSではできません）**
・”Animaze by FaceRig”　現在フリーですが、内部課金のアバターや機能があります。そこについてはここでは記載しません
　https://store.steampowered.com/app/1364390/Animaze_by_FaceRig/
![animaze.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224568/fd8132e7-bfd2-f8ee-1fb3-c36ab0d2193a.png)
・オンライン会議アプリ　今回やってみたもの
　・Microsoft Teams
　・Zoom
　・GoogleMeet

**※上記は現時点（2021/04/05）で動作確認が取れた組み合わせになります。最新の環境の組み合わせについては各自でご確認下さい**


▲初投稿：2021-04-05

##**■やってみよう！**
###**■■”Animaze by FaceRig”の配信実行**
・”Animaze by FaceRig”の購入、インストール手順についてはここでは省きます。起動出来ている事が前提の記載になります

・”Animaze by FaceRig”を起動します。起動したら”配信に接続”ボタンを押します
![animaze2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224568/dc37ebc5-f76d-e7e1-8389-a63c75c2b48d.png)
・押すと配信が開始します。現在フリーでは90分に制限されているようです
![animaze6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224568/08f7207e-be22-816b-8394-f7752a91489a.png)
・左側のメニューからアバターを変える事が出来ます。課金をすると２Dキャラクターを選択することも出来ます
![animaze3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224568/28a7b41b-9767-3282-3681-4ea5c280a410.png)
・左側のメニューから背景を変える事が出来ます。zoomではグリーンバックを使うとzoomで背景を切り替えることも出来ます
![animaze4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224568/95cc944d-926b-e167-e09e-d1c132beed60.png)
※以上が最低限の設定になります。他にも多種な機能があるので試して見るとおもしろいと思います
![animaze5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224568/d37297ec-e983-7322-83ad-f5188d6b5989.png)
**※注意：”Animaze by FaceRig” は落とさずに起動したままオンライン会議アプリを使ってください**

###**■■Microsoft Teams にアバターで入る**
・Teamsの設定画面で、カメラを”Animaze Virtual Camera”に変更します
![teams.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224568/3d1a19a9-f2b4-e46d-17d1-50774387b25d.png)

###**■■Google Meet にアバターで入る**
・Google Meetの設定画面で、動画＞カメラを”Animaze Virtual Camera”に変更します
![gmeetup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224568/bdb6a2bf-fe14-3480-5779-98037f6c6bb1.png)
![gmeetup2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224568/0f63d087-82c5-fdea-fcf9-4fbb7509cd15.png)

###**■■zoom にアバターで入る**
・zoomのカメラ選択で、”Animaze Virtual Camera”に変更します
![zoom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224568/697b0c01-f14b-8714-a2d1-1e67ef26fb9f.png)
※”Animaze by FaceRig”で背景をグリーンバックにしていると、zoomで背景を設定することも出来ます

・とりあえず、これでアバターでオンライン会議に入ることができる様になったら思います。今まではちょっと違った体験を感じてみてください！

##**■参考**
・”Animaze by FaceRig”　・・・　[こちら](https://store.steampowered.com/app/1364390/Animaze_by_FaceRig/)　
・■アバター（FaceRig）を使ってオンライン会議に入ってみた件　・・・　[こちら](https://qiita.com/KSxRDevelop/items/46c61a7270eb3e760d3b)　

・Qiita(KSxRDevelop)　・・・　その他の情報は[こちら](https://qiita.com/KSxRDevelop)　!
SpringBootでValidation実装時に地味につまったところ

## 依存するライブラリを間違えていた

- Spring Bootでアノテーションを使用する場合は"spring-boot-starter-validation"を使用する必要があります。
- javax.validationのアノテーションを使用している場合、javax.validationに依存できていればコンパイルが通ってしまうため気づきませんでした。初歩的なミスではありますが、一応メモです。


### 修正前
```build.gradle.kts
dependencies {
        ...
	implementation("javax.validation:validation-api:2.0.1.Final")
        ...
}
```

### 修正後
```build.gradle.kts
dependencies {
        ...
	implementation("org.springframework.boot:spring-boot-starter-validation:2.4.4")
        ...
}
```

- ただ、下記記事によると、一応"spring-boot-starter-validation"に依存していなくても動く場合があるようです。

参考：[Kotlin + Spring Bootでリクエスト本文のバリデーションが効かない場合の対処](https://qiita.com/takkkun/items/ae03832b436bb1760ec4#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%A1%8C%E3%81%A3%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84)
親コンポーネントから子コンポーネントへのデータの渡し方

データの渡し方を忘れないように、メモとして残しておこうと思います。
v-bindとpropsを使いました。

```App.vue
<template>
  <div id="app">
    <Number :number="number"></Number>
  </div>
</template>

<script>
import Number from "./components/Number.vue";
export default {
  data() {
    return {
      number: 10,
    };
  },
  components: { 
    Number
  }
};
</script>    
```

```Number.vue
<template>
  <div id="Header">
    <p>{{ number }}</p>
  </div>
</template>

<script>
export default {
  props: ["number"],
};
</script>
```
削除フラグと行の削除

Excel VBA
削除フラグと行の削除

```

'[削除フラグ]列に"d"と入力された行をすべて削除

Sub DeleteRows()

    '最終行を取得する
    Dim maxRow As Long
    maxRow = Cells(Rows.Count, 1).End(xlUp).Row

    '行を1つずつ見ていく(maxRow→2へ下がっていく)
    Dim i As Long
    For i = maxRow To 2 Step -1
    
        '"d"と書かれているかどうか（判断）
        If Range("G" & i).Value = "d" Then
            
            '行の削除
            Rows(i).Delete
        
        End If
    
    Next i

```
VSCode でデフォルトのターミナルを GitBash にする

# VSCode でデフォルトのターミナルを GitBash にする

`Ctrl + ,` で設定を開き、「terminal.integrated.shell.windows」を入力する
「settings.json で編集」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199232/c7b349cd-7bff-0e74-fbc1-8d6bab8a32d3.png)

「terminal.integrated.shell.windows」に gitbash の exe パスを追加して `Ctrl + S` で保存する
※パスの￥マークはエスケープのため 2 つずつ指定する
※デフォルトは「C:\\Program Files\\Git\\bin\\bash.exe」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199232/922f3a60-a95d-fa75-4105-d4f6684c5867.png)

`Ctrl + Shift + @` でターミナルを開くと Git Bash になっている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199232/38834e93-b6de-9bea-1eca-46caeb4cb3f7.png)

以上.
【Windowsユーザー必見】エイリアスを永続的に登録して開発効率を爆上げしよう！！

皆さんこんにちは！

最近ついにネタがなくなり投稿頻度が下がり気味なのですが、頑張ります。

さて、今回は**エイリアス**というものを設定してShellスクリプトのコマンド操作時間を少なくして開発効率を上げようって話です。

つまりどういうことか。。。

まずは例を見てみましょう。

```powershell
git push origin main
```

```powershell
gp
```

この二つのコマンド全くの別物に見えますよね。

ただ、エイリアスを登録することで``git push origin main``というコマンドを``gp``とたった2つの英語を入力するだけで全く同じのコマンドになるのです！

このようにして開発効率をあげちゃおうって話です。

他にもよく使う``npm run``とか``yarn``とかもエイリアスを登録することで省略されたコマンドで実行することができます！

説明はこの辺にして早速説明していきます！！！

#doskeyでマクロの作成#

以下を例にお好きなコマンドを登録してください。

```powershell
doskey ns=npm run serve
```

``doskey /macros``で登録したマクロを見れます。

```powershell
doskey /macros
ns=npm run serve
```

#マクロの保存および再利用#

次に今登録したマクロをファイルとして保存し、いつでも利用できるようにします。

任意のディレクトリに``macros.txt``を保存してください。

```powershell
doskey /macros > C:\doskey\macros.txt
```

無事保存されたら一度コマンドプロンプトを終了し、``doskey /macros``で登録したマクロを確認してください。

```powershell
doskey /macros
```

すると、先ほど登録したはずのマクロが表示されませんよね。

ここで一旦先ほど保存した``macros.txt``を``doskey /macrofile=C:\doskey\macros.txt``で再度マクロを登録します。

```powershell
doskey /macrofile=C:\doskey\macros.txt

doskey /macros
ns=npm run serve
```

このように再度登録されます。

ですが、ここで問題なのがこのままではコマンドプロンプトを起動するたびに``doskey /macrofile``を実行しないといけない。。。

それはそれで面倒くさい。

安心してください！！

次は毎回``doskey /macrofile``を打たなくてもいいように設定してあげましょう！

#レジストリエディタ#

まずはタスクバーの検索で「regedit」と検索し、レジストリエディタを開いてください。

そして、``コンピューター\HKEY_CURRENT_USER\Software\Microsoft\Command Processor``のパスを開いてください。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/518da83c-7758-e418-ba01-c6e4ddcf2ab3.png)

このような画面になると思います。

これの右側で右クリック→「新規」→「文字列値」に「AoutRun」と入力し作成。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/07ea9353-b419-9178-5fd6-1aa50eba82b7.png)

作成した文字列値の上で右クリック→「修正」→「値のデータ」に``doskey /macrofile=C:\doskey\macros.txt``と入力し「OK」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/fa00032f-ecdf-607c-5e7a-228889a1256d.png)

これでコマンドプロンプトが起動するたびに**自動**で``doskey /macrofile=C:\doskey\macros.txt``のコマンドを打ってくれます。

実際にコマンドプロンプトで``doskey /macros``で確認して見て下さい。

```powershell
doskey /macros
ns=npm run serve
```

登録したマクロが返ってくればOK！

このようにして開発効率を爆上げできます！

いかがだったでしょうか？

コマンドでの操作に慣れていない方はこれを機に慣れてみてはいかがでしょうか？

一週間もすればなれますよ！

皆さんの開発効率が上がることを願っております。

また、合わせてこちらの[【Windowsユーザー必見】エイリアスを永続的に登録して開発効率を爆上げしよう！！（複数コマンド、引数偏）](https://qiita.com/akki-memo/items/401f7363e09160f5c89f)の記事も是非ご覧ください！！

以上、「【Windowsユーザー必見】エイリアスを永続的に登録して開発効率を爆上げしよう！！」でした！

Thank you for reading

#参考記事#

・[Windows コマンドに Linux 風なエイリアスを登録して永続化させる](https://neos21.net/blog/2016/01/19-01.html)
・[コマンドに対してマクロ(エイリアス)を設定する(DOSKEY)](https://www.javadrive.jp/command/command/index2.html)
HTMLの３種類のリストについて

HTMLで表現できるリストは、
箇条書きリスト、順序付きリスト、項目説明リストの３種類になります。
順を追って説明させていただきます。
  
1箇条書きリスト

ulタグで全体を囲います。そこから子要素であるliタグで箇条書きにしたいものを
囲むと、黒点が文字の先頭について箇条書きとなります。


2順序つきリスト

olタグで全体を囲います。そこから子要素であるliタグで連番にしたいものを囲います。
すると、文字の先頭に1,2,3とついて順番を表現できます。



3項目説明リスト

dlタグで全体を囲います。そして、子要素として項目の方はdtタグで囲い、説明の方はddタグを使用します。これによりQ＆Aのような形にすることもできます。
railsにおける画像の配置場所とそれぞれの違い

#本記事の内容
本記事はraiilsにおける画像の配置場所とその違いについてまとめた記事です。間違い等ございましたら、お手数ですがご指摘いただけますと幸いです。
#画像の配置場所
下記の２箇所が画像データの配置場所となります。

`app/assets/imagesディレクトリ`
`public/imagesディレクトリ`


#違いは？(パスの記述)
画像を読み込む際のパスが異なります。
具体的には以下の様な違いがある。


```ruby:app/assets/imagesディレクトリ
<%= image_tag('hoge.png')>
```

```ruby:public/imagesディレクトリ
<%= image_tag('/hoge.png')>
```

#アセットパイプライン
`Ruby on Railsのアプリケーション内で使用したいJavaScriptやCSS、画像ファイルを「開発作業がしやすいようにファイルを分割してコーディングができるようにしつつ、最終的に一つのファイルに連結・圧縮する」仕組みのこと。`だそうです。

webブラウザは一つのwebページを表示するために複数のファイルを結合する機能が備わっていないため、開発環境において複数のディレクトリに跨って開発されたものを本来１ページとして表示できない。
これを解決するのがアセットパイラインである。

#まとめ
ざっくりと概要を掴む感じで書いてみました。
まだまだ知識不足ですので、色々記事を読みながら学習していきます。

#
#参考にした記事

https://techblog.kyamanak.com/entry/2017/10/13/003818

https://www.transnet.ne.jp/2016/02/28/rails%E5%88%9D%E5%AD%A6%E8%80%85%E3%81%8C%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8Dcolnr%E3%80%8C%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3/
並列計算の数理とアルゴリズム　桑原拓也先生　森北出版


```{r}

#ヤコビ法

A=t(matrix(c(1,2,8,4,5,6,7,8,9),ncol=3))

b=c(3,5,5)

D=diag(A)

M=solve(A)

x=rep(1,3)

p=0.01

ite=10

for(l in 1:ite){

x=x-M%*%(A%*%x-b)

}

```

```{r}

#ガウスザイデル法

A=t(matrix(c(1,2,8,4,5,6,7,8,9),ncol=3))

b=c(3,5,5)

D=diag(A)

F=array(0,dim=c(3,3))

E=array(0,dim=c(3,3))

F[lower.tri(F)]=A[lower.tri(A)]

E[upper.tri(E)]=A[upper.tri(A)]

MF=solve(D-F)

ME=solve(E-F)

#MFの場合：

x=rep(1,3)

p=0.01

ite=10^3

for(l in 1:ite){

x=x-p*MF%*%((D-F)%*%x-b)

print(sum(abs((D-F)%*%x-b)))

}

#MEの場合：

x=rep(1,3)

p=0.01

ite=10^3

for(l in 1:ite){

x=x-p*ME%*%((D-E)%*%x-b)

print(sum(abs((D-E)%*%x-b)))

}

```
【CakePHP4】ViewのHelperからComponentを読み込む方法

## 読込したいComponent

```SimpleComponent.php
<?php
namespace App\Controller\Component;
use Cake\Controller\Component;

class SimpleComponent extends Component
{

    /**
     * getHalfPoint - 与えられた数字を半分にする
     *
     * @param  float
     * @return float
     */
    public function getHalfPoint(float $num):float
    {
        $return_num = $num / 2;
        return $review_ave;
    }
}

```


## Helperの記述（ここ大事）
```AppHelper.php
<?php
namespace App\View\Helper;
use Cake\View\Helper;
use App\Controller\Component\SimpleComponent;
use Cake\Controller\ComponentRegistry;

class AppHelper extends Helper
{
    /**
     * Point - SimpleComponentのgetHalfPointの使用
     */
    public function Point($point):float
    {
        $this->Simple = new SimpleComponent(new ComponentRegistry());
        $return_point = $this->Simple->getHalfPoint($point);

        return $return_point;
    }
}

```
1,読み込みたいComponentを指定すること

``` php
use App\Controller\Component\SimpleComponent; 
```

2.Componentをインスタンス化するために必要なComponentRegistryを読み込む

``` php
use App\Controller\Component\SimpleComponent; 
```

3.読み込みしたいComponentのインスタンス化

```php
$this->Simple = new SimpleComponent(new ComponentRegistry());
```




## Viewの記述（一応）
```simple.php

<?php
    echo $this->App->Point(5);
    // 2.5が返ってくる
?>
```
CDKで"一部残して作り直し"したいんだけど（import）

CDKで構成したスタックにトラブルがあり、一部を作り直したくなる事があります。
例えば、以下のような事をして、作り直しが発生しました。

# かなしいできごと

ワイ「あー、VPCのcidr間違えた...cidr変更して作り直すか」
ワイ「んー、Elasticache(Redis)とRDSのサブネットグループが、違うcidrで違うVPCにあるとか言うてるな...」
`The new Subnets are not in the same Vpc as the existing subnet group`
ワイ「うーん、"UPDATE_ROLLBACK_FAILED"のステータスになったな...コンソールでロールバックしろと書いてあるから、管理画面からロールバックするか」
ワイ「ロールバックはできたぞ、もう一度同じことをやってもNGだと思うから、試しにSubnetgroupとRedis/RDSを手動で消してみるか」
`DBInstance smxockdf7per4z was not found during DescribeDBInstances`
ワイ「むむむ」
ワイ「また"UPDATE_ROLLBACK_FAILED"になったな...」

虚無

ワイ「ネットで色々調べたら、＜ロールバックしてやり直すか消すかの二択や＞って書いとるな」
ワイ「でも、**このstackで作ったHostedZoneのNS、もう顧客に報告してるんやで**」
ワイ「このHostedZoneだけは死守せなあかんのや...」
ワイ「ぼすけてー」

# 最終的にうまく行った手順

## Stackの削除

※ここの内容は状況によると思われます。今回守りたかったのはHostedZone

ワイ「まず、**確実にHostedZoneが削除されない状態で**スタックをdestroyするか...」
ワイ「removalPolicyとかautoDeleteObjectsを設定していなければセーフなはずやけど、**HostedZoneの場合、レコードを作っておけば削除できない**から、手動で適当なレコードを追加しておこう。」
`cdk destroy NantokaStack`
`DELETE_FAILED`
ワイ「よしよし、順調にDELTEにFAILしたな...」って、結局普通にFAILするんかい（あたりまえ）
ワイ「管理画面で削除するか、**スタックの削除後に残すチェックボックスにチェックをいれて**、ポチポチポチー」
ワイ「なんや、まだエラーになるんか」
ワイ「ふむふむ、**さっき手動で削除したRDSが邪魔をしている**ということやな」
ワイ「こいつらは**もう存在しないリソース**やけど、敢えて削除後に残すことにするか...成仏してくれ...」
ワイ「（この理屈やとRedisも邪魔するはずやのに、なんでRedisは大丈夫なんや...？まあええか）」

よし、これでStackは消えたぞ。

## Stackの再作成

ワイ「よーし、**id類が変わらないように注意して**Stackを再作成するぞー」
ワイ「もちろん、**HostedZoneを作るところだけはコメントアウト**やな」
`cdk deploy NantokaStack`
（正常終了）
ワイ「よしよし、CDKは天才やな」

ワイ「このdeployで`cdk.out`フォルダに**CloudFormantion用のテンプレート**ができとるんやな」
`NantokaStack.template.json`
ワイ「よしよし、これや。これを**コピー**するぞ。」
ワイ「コピーしたら、**コメントアウトしたHostedZoneを元に戻して**`cdk diff`しとくやで」
ワイ「`cdk diff`でもtemplate.jsonが作られるんやな」
ワイ「**コピーしたやつに、`cdk diff`で追加されたHostedZoneの部分だけをコピー**して魔改造したNantokaStack.template.jsonを作るやで」

```json:NantokaStack.template.json
    "HostedZoneAAAABBBB": {
        "Type": "AWS::Route53::HostedZone",
        "Properties": {
          "Name": "example.com."
        },
        "Metadata": {
          "aws:cdk:path": "NantokaStack/HostedZone/Resource"
        },
        "UpdateReplacePolicy": "Delete",
        "DeletionPolicy": "Delete"
    },
```
※抜粋

ワイ「管理画面を開いて、Stackのリソースのインポートのところから、このNantokaStack.tempalte.jsonをアップロードするやで」
ワイ「idをきかれるから、Zone IDを入力...と」
ワイ「ひえっ！インポートが始まったやで！」

※成功手順はここでおしまいです。

## 成功するまでの失敗パターンのメモ

- インポートするリソースが無いと管理画面で怒られる
  - CDKが吐き出したコピー時のテンプレートをそのままインポートした場合（あたりまえ）
- CDKMetadataが編集されていると管理画面で怒られる
  - CDKが吐き出した新しい方のテンプレートをそのままインポートした場合
- DeletionPolicyが無いと管理画面で怒られる
  - DeletionPolicyを追加する
- Route53::RecordSetはインポートできないと怒られる
  - DNSレコードはインポートしてから再作成することにする（つまりインポート対象から除外する）

# 学んだこと

- なんかイマイチな状態になっても、手動で削除すると一層イマイチになるので、手動で削除しない
- 頑張ればインポートできる
数値計算の技法　星野聴先生　コロナ社

```{r}

#数値計算の技法　p.61

#fiacco,mccormick(1968),murtagh,sargent(1969)

f=function(x){

f1=x[1]^2+x[2]^2-1

f2=x[1]^2-x[2]^2

return(c(f1,f2))

}

X=rep(1,2)

H=diag(1,length(X))

ite=10000

eta=10^(-2)

h=0.01

for(l in 1:ite){

f_val=f(X)

sigma=t(t(-H%*%f_val))

X=X+eta*sigma

y=f(X)-f_val

H=H+(eta*sigma-H%*%y)%*%t(eta*sigma-H%*%y)/as.numeric(t(y)%*%(eta*sigma-H%*%y))

print(f(X))
 
}





```

```{r}

#数値計算の技法　p.49

#stewart(1967)

f=function(x){

f1=x[1]^2+x[2]^2-1

f2=x[1]^2-x[2]^2

return(c(f1,f2))

}

X=rep(1,2)

H=diag(1,length(X))

ite=10000

eta=10^(-2)

h=0.01

for(l in 1:ite){

f_val=f(X)

sigma=t(t(-H%*%f_val))

X=X+eta*sigma

y=f(X)-f_val

H=H+eta*sigma%*%t(sigma)/as.numeric(t(sigma)%*%y)-H%*%y%*%t(y)%*%H/as.numeric(t(y)%*%H%*%y)

print(f(X))
 
}





```

```{r}

#数値計算の技法　p.107

#levenberg(1944)

f=function(x){

f1=x[1]^2+x[2]^2-1

f2=x[1]^2-x[2]^2

return(c(f1,f2))

}

X=rep(1,2)

ite=10000

eta=10^(-2)

h=0.01

w=0.1

for(l in 1:ite){

df=array(0,dim=c(length(X),length(X)))

for(j in 1:length(X)){
  
vec=X;vec[j]=vec[j]+h  
  
df[j,]=(f(vec)-f(X))/h  
  
}
  
A=df%*%t(df)+diag(w,length(X))  

y=df%*%f(X)

dx=svd(A)$u%*%diag(1/svd(A)$d)%*%t(svd(A)$v)%*%(-y)

X=X+dx

print(f(X))
 
}





```
Jupyter notebook (Docker) で親ディレクトリのファイルを絶対パスで取得できない件について

# はじめに
Jupyter notebookをDocker環境で使っており、テキストファイルを読み込もうとしたのですが、パスが見つからず困っていたのでまとめます。
親ディレクトリをたどって、特定のファイルを読み込む必要があったので、絶対パスを指定していたがパスが見つからず、親のディレクトリのファイルが読み込めない？そんなことあると思っていましたがそんなわけはありませんでした。

# 環境
- python3.8
- Docker
- jupyter notebook

# 問題
ディレクトリ構成がこのようになっている状態で、

```
/
　├ experiments/ 
      ├ python
          ├ A.py
      ├ dict
          ├ file.txt
　├ library/
```

`A.py`から`file.txt`が存在していればファイルを読み込む処理をしようとしていた。

```
if os.path.exists('/experiments/dict/file.txt')
```

しかし、`file.txt`があるはずなのに読み込んでくれなかった。

# 解決策
Jupyter画面で`root`に見えていた場所が実際には違っていて、絶対パスが正しく指定できていなかった。

![bandicam 2021-04-05 20-06-43-817.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/4f2ad6c8-8288-8846-7b4a-fff8608208fc.jpeg)

私はここが`root`の位置だと思っていた。
しかし、`pwd`コマンドでディレクトリを調べたところ

```
pwd
# 出力された結果
'/home/jovyan/data/experiments/python'
```

となっていた。`/home/jovyan/data/`を指定していなかった。

docker-compose.ymlでボリュームを

```
volumes:
  - ./experiments:/home/jovyan/data
```
としていたので、Jupyter上にはパスがなく勘違いしていたのが原因だった。

このようにファイルパスを指定しなおして読み込めるようになりました。     

```
if os.path.exists('/home/jovyan/data/experiments/python')
```

# 最後に
読み込みでどうするんだろうとなることがしばしばあります。
調べてもこのJupyter問題は簡単に見つからなかったのでまとめました。
もしかしたら、絶対パスを指定するところで詰まる人は少ないのかも？
グラフによるデータの視覚化


#カレンダーヒートマップグラフ
繰り返される個別の活動 (長期にわたるアカウントのクローズなど) を視覚化する場合に便利です
このグラフでは、月から週または日のように、時間ベースのグルーピングの粒度を簡単に変更できます。
カレンダーヒートマップを使用するには、[色] 項目で基準を設定し、[期間] 項目で日付ディメンションを設定します。基礎となるクエリによって、指定された期間で基準をグループ化します。基準に基づいて各期間の色がグラフに表示されます
![スクリーンショット 2021-04-05 20.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/1ea91016-a049-2ec1-0871-e761516cd91f.png)

#ドットプロットグラフ
横方向/縦方向のドットプロットでは、バブルのサイズと色を使用して、複数のディメンションと基準を表示します。ドットプロットを使用して、関連するデータを視覚化し、パフォーマンスを比較したり、異常な値を見つけたりします、
いわゆるバブルチャート
![スクリーンショット 2021-04-05 20.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/4c152693-9474-8c26-fdfd-92ac55329b6b.png)
#じょうごグラフ
じょうごグラフを使用して、フェーズに分割できる順次データ (営業サイクルなど) を視覚化します。
![スクリーンショット 2021-04-05 20.09.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/8ef4d991-e095-8cd7-921c-16dab31c683a.png)

#中点グラフ
中点グラフを使用して、目標収益に対して現在の収益を測定し、前四半期の収益と比較します。
![スクリーンショット 2021-04-05 20.11.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/4130e7e0-8f58-f97a-6ca6-993d45cda228.png)



#参考文献

[グラフによるデータの視覚化](https://help.salesforce.com/articleView?id=sf.bi_visualize.htm&type=5)
URLパラメータ

#【URLパラメータ】

##URLパラメータ （クエリ文字列）

サーバーに情報を送るためのURLの末尾に付け足す変数のこと。
　→　ソフトウェアなどのシステムに対して、外部から投げられたデータによって、挙動に影響を与える。

?以下、パラメータ=値の形で記述する。
また、&を利用して、パラメータをつなぐ。

例） https//xxxxxxxx.jp?**key=value**

※パラメータに**?**や**&**を使ってはいけない。動作しなくなる。


##ユーザーの行動歴、足跡が分かる。

アクティブパラメータは動的ページでよく使われる。
　→　ユーザの流入元が判断できる。
　→　通常の検索エンジンからか、広告検索からかの判断が付く。

例） 有料会員か無料会員かを確認する。
　　（会員サイトに遷移させるかの判断に使用する。）
fastTextと「ちくわぶ」で遊んでみる

#ふと思ったんです
ちくわぶってあるじゃないですか。
あいつって文字通り「ちくわ」と「ふ」を足したような名前してますけど、
word2vecとかfastTextで「ちくわ」と「ふ」を足したら何になるのかなと思ったわけです。

ということで今回は__fastTextのハンズオンを兼ねてちくわぶで色々遊んでみようと思います__。
※筆者はちゃんと「ちくわ＋ふ」が「ちくわぶ」ではないことは理解したうえで実験に臨んでいます。予めご了承ください。

#実装
##データ用意
今回は[こちら](https://qiita.com/Hironsan/items/8f7d35f0a36e0f99752c)の学習済fastTextモデルを利用しました。
本当はword2vecのフルモデルダウンロードしたかったんですが、家の通信環境が貧弱すぎて一向に終わらず。。。

もしハンズオンされるときは是非フルモデルでやってみてください。
このハンズオンで初めて知りましたが、今回のやり方では再学習ができません。([こちら](https://radimrehurek.com/gensim/models/keyedvectors.html#why-use-keyedvectors-instead-of-a-full-model)を参照ください)
フルモデルで実装して「ちくわぶ」を再学習して遊ぶとかやってみても面白いかもしれません。

##モデル読み込み
今回はSageMaker上で実装しました。
SageMaker上へダウンロードしたzipファイルを送りunzipします。
その後はgensimモジュールを使ってベクトルをインポートします。
インポートまでたったこれだけ。らくちんですね。

```py
!unzip vector.zip
!pip install gensim
import gensim
model = gensim.models.KeyedVectors.load_word2vec_format('model.vec', binary=False)
```

#遊ぶ
##そもそも「ちくわ」と「ふ」はあるのか
結論：ある。
いや、あるんかい。
学習データに竹輪と麩関連のデータがあったようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/e447d98c-5a25-ef90-b9ae-f8c3c8d22262.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/44ffc4d3-6e22-e34f-83b1-df175ba57b5a.png)

ちなみにちくわぶはありませんでした。(ひらがなにしてもダメ)
いや無いんかい。
その線引き何だよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/ea6a73ba-cd3a-76a8-6328-8bd5d4fdc577.png)

##ちくわ＋ふ
most_similarメソッドの引数でpositiveパラメータにリスト型で渡すと足し算できます。
その結果は「生麩」。
原料が小麦粉という意味では竹輪麩とニアピンですが、竹輪の魅力である穴が無くなってしまいやや残念です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/db841484-c499-3994-a13c-c0ce4b3d510d.png)

##ちくわーすり身
先ほどの結果に「すり身」があったので、ちくわからすり身を引いたらどうなるか試してみました。
理論上「穴」になるんでしょうか。
果たしてその結果は。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/5cc7570c-2b02-8557-3cd0-74aa7ffcd877.png)

__いや惟光だれだよ。__
__いや小太郎誰だよ。__
調べたら惟光は源氏物語の人物のようです。

##ちくわーすり身＋小麦粉
もしかして、という希望をかけて小麦粉を足してみます。
これで「ちくわ＋ふ」の結果に近くなれば私の勝ちです(?)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/a533a475-10e8-1f23-076c-63c5b899a06f.png)
こう見ると「ちくわ＋ふ」のときに出てきた「餡」「漉し餡」「生麩」がランクインしていて、結構ちくわぶ寄り(?)の結果になっているのが見て取れます。

##ちくわー穴
「穴」のベクトルもあるようだったので、「ちくわー穴」も試してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/d9b21ba5-b902-1731-5630-cd9d9b94d45e.png)
答えは「はんぺん」。
__急に納得感のある答えを出してきました。__

##はんぺんーすり身
先ほどのの実験結果では「すり身」を使ったため「惟光」が錬成されてしまいました。
この二つの違いは何なのか。
__ここに「惟光」錬成の謎が隠されていると思いました。__
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/1ed0ce27-b767-480e-3d23-fa5975e9ea75.png)
__いや麻倉誰だよ。__
すごい普通な人でてきちゃったよ。
類似度0.259ということなので多分ひねり出した結果なんでしょう。
謎は深まるばかりです。

#最後に
今回はネタ枠で遊んでみましたが、fastTextで簡単にこんなこともできます。
是非是非ハンズオンしてみてくださいね！
【Python】Worksheet.move_rangeメソッドを使用して、表(セル)を移動させる。

pythonを使用してExcelファイルの操作を勉強しています。
本日の気づき(復習)は、表(セル)の移動に関してです。
pythonでExcelを操作するため、openpyxlというパッケージを使用しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927441/8b8ac7ad-0e4f-d619-8a46-da670f017525.png)

上記のようなブック「商品リスト」を

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927441/369efcba-5759-e002-bd2b-a6cf67258cbc.png)

のように表を移動させたいです。

# Worksheet.move_rangeメソッド

```python
ws.move_range('移動するセルの範囲',
              rows=移動する行数, cols=移動する列数,
              translate=数式等のセル参照を更新する場合はTrue)
```

シート上で表の様な複数のセルを移動させる場合は
Worksheet.move_rangeメソッドを使用します。
気を付けておくべきことが何点かあります。

- rows：下に移動させる場合は整数(上なら負の整数)
- cols：右に移動させる場合は整数(左なら負の整数)
- rows引数cols引数に範囲外の値を入れてしまうとエラーになる
- 移動先の位置にすでに値や表があったとしてもセルを上書きしてしまう
- 数式の更新は基本行わない。(translate=Trueの記述追加が必要)

# 最終的なコード

```python
from openpyxl import load_workbook

wb = load_workbook('商品リスト.xlsx')
ws = wb.active
ws.move_range('B2:I24', rows=1, cols=3, translate=True)

wb.save('商品リスト_移動.xlsx')
```

translateに気付かず、右往左往していました。translate=Trueは偉大。
セルの書式設定もそのまま移動してくれるのでたいへん重宝します。
VueのSSR時におけるハイドレーションエラー対処法

参考記事
[What to do when Vue hydration fails](https://blog.lichter.io/posts/vue-hydration-error/) 
[Client Side Hydration](https://ssr.vuejs.org/guide/hydration.html) 

---

# (Vue)ハイドレーションとは？

> ハイドレーションは、Vueがサーバー側でレンダリングされたマークアップを変換し、それをリアクティブにして、Vueからの動的な変更を反映できるようにするプロセス。

Vueが期待しているマークアップと、実際にレンダリングされたHTMLが異なるとハイドレーションエラーとなる。

---

Vueで開発中に以下のようなWarningに出会す時があります。

```
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.
 This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>,
 or missing <tbody>. Bailing hydration and performing full client-side render.
```

![スクリーンショット 2021-04-01 19.52.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/66a03c80-bae5-8820-cf9e-29f5fc9d78a1.png)


Warningの内容↓
> クライアント側でレンダリングされた仮想DOMツリーがサーバーでレンダリングされたものと一致していません

このWarningは開発環境でしか表示されません。
本番環境ではエラーとして出力されたり、レンダリングが完了しなかったりします。
なのでこの問題は解決しておきべきです。

今回はこのエラーの発生箇所を特定する方法についてメモしておきます。

ちなみに、すでに上記Warningの二つ上あたりに、以下ログが出ていたらそこが発生箇所です。

```
Parent: <~~>...</~~>
```

ただ、これが人によっては表示されなかったりするので別の特定方法を提示します。
また発生原因も。



# 発生元を特定

Warningの詳細を開くと以下のようになっています。
ここで hydrateの呼び出し元をクリックします。
画像で言うと `hydrate  @ vue.runtime.esm.js?2b0e:6378` のところです。

![スクリーンショット 2021-04-01 20.14.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/92f77573-eee4-42e7-eb67-6f5e2c937219.png)

するとVueのハイドレーション機能のソースコードが展開され、
展開された行の少し上あたりにこのようなコードがあります。

```
if (process.env.NODE_ENV !== 'production') {
  if (!assertNodeMatch(elm, vnode, inVPre)) {
    return false
  }
}
```

![スクリーンショット 2021-04-01 20.19.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/3fc3399f-5941-bdb1-b54f-c6b776e61619.png)

ここの6374行目の部分にデバッガーを設定します。（6374のところをクリック）

```
return false
```

そしてこの状態で画面をリロードすると、レンダリングが途中で止まります。

あとはDevToolのConsoleタブやElmentsタブから、
ハイドレーションに失敗したDOM要素を特定していきます。
（最終的に表示されるDOM要素と異なるのでそこで特定できます。）

# 発生原因/修正方法等

考えられる原因としては以下。

### 1. サーバ側とクライアント側の状態が異なる
この原因が一番多いそうで、
この場合の解決策としては、データの取得方法やタイミングを修正するなどです。

### 2. 無効なHTMLを記述している
無効なHTMLを記述していないか確認。

例えば以下のようなHTMLを記述した場合、
正しくはtableタグの中にtbodyタグがないといけません。

[不正なHTML]

```html
<table>
  <tr><td>hoge</td></tr>
</table>
```

[有効なHTML]

```html
<table>
  <tbody>
    <tr><td>hoge</td></tr>
  </tbody>
</table>
```

しかしブラウザではこの不正なHTMLに自動的にtbodyタグを挿入してくれます。
そのため、DOMツリーに不整合が生じます。

### 3. 最終手段
client-onlyタグでラップし、サーバー側でのレンダリングを避けます。

```html

<client-only></client-only>
```

---

#### ※余談

開発環境では、
クライアントとサーバーでレンダリングされたDOMツリーが一致していなくても、
既存のDOMを破棄して最初からレンダリングし直してくれています。
しかし本番環境では、
パファーマンスを最大化するためにこの機能は無効になっています。

また、ハイドレーションは最初にページがサーバーによってレンダリングされた時（初回リクエスト時）にのみ発生します。
【MATLAB】プログラム実行の度に、タイムスタンプあるいは手入力した結果フォルダを自動生成する

# はじめに

大規模あるいは大量のデータを用いて、様々なパラメータに対して異なる計算結果を出力プログラムでは、結果をどこにどうやって保存するか、といった問題があると思います。

私がこれまで行ってきたものは、事前に結果用のフォルダを作成し、そこに計算結果をmatファイルなどで出力するやり方です。しかし、このフォルダの名前を毎回入力するのは面倒なときもありますし、一方で「この実行は〇〇というパラメータをXXにしたから… ”〇〇_XX”というフォルダ名で実行したい」といった趣旨でフォルダ名を付けたいこともあるかと思います。今回紹介するのは、そのどちらにも対応できるようになっているフォルダ生成コードです。
>コード
 result (自動生成)
   ├ 入力したフォルダ名（入力が無ければ"yyyymmdd_HHMMSS")


### コード

```matlab

% 現在時刻 now を 西暦4桁XX月XX日_XX時XX分XX秒の形で取得
sNowTime=datestr(now,'yyyymmdd_HHMMSS');   

% 手入力を促す画面
prompt=sprintf('Type resultfoldername(empty:"%s"):',sNowTime); 
nameFolder=input(prompt,'s');

% 入力があれば入力された文字、入力が無ければタイムスタンプをフォルダ名にする
if isempty(nameFolder)
    str=  sNowTime; 
else
    str=  nameFolder; 
end

% フォルダのパス生成
resPath=fullfile(pwd,'/result/',str,'/'); 

% フォルダ生成
mkdir(resPath); 
```

フォルダのパス`resPath` を残しておけば、計算結果を出力する際にそのまま使えます。

### 計算結果の出力例

```matlab
fileName=fullfile(resPath,'result.mat'); 
save(fileName); 
```

他に良い方法があれば教えてください。
python 仮想環境作り方

#仮想環境作るコマンド
・mac
・python 3.8.8

##仮想環境を作る

```コマンド
#仮想環境を作る
$python -m venv 仮想環境名
```
***

##仮想環境に入る
```コマンド
#仮想環境に入る
$cd 仮想環境名/bin
$source activate

実行すると下記になる。（仮想環境に入れてる。)
(仮想環境名)$
```

***
##仮想環境を出る。

```コマンド
（仮想環境名)$deactivate
```
PowerShellで複数moduleをuninstallしたい時のコマンド

### この記事
- メモです。すみません。
- でも日本語でほぼなくておや？ってなったので書いておきます。

Az Moduleとかいうのを入れる的な文章をみてとりあえず試してみたら１００?くらいのModuleがインストールされた。。
![lotsAzModuleInstalled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241630/1e770299-7721-7a98-d7cf-1a1ec7749933.png)


けど、powershellで複数Moduleをuninstallする方法がざっとみてわからず、やっとできたのでメモ。。

```
Get-Module -ListAvailable | Where-Object {$_.Name -like 'Az*'} | Uninstall-Module     
```
　→Azから始まるModule削除。

### 参考
- [MS公式Docs：パイプラインからオブジェクトを削除する (Where-Object)](https://docs.microsoft.com/ja-jp/powershell/scripting/samples/removing-objects-from-the-pipeline--where-object-?view=powershell-7.1)
rails6+tailwindcss2の設定

# 概要

下記の条件下でのtailwindcss導入

- rails6
- docker
- tailwindcss2

# 手順

いくつか方法があって

- gemの`tailwindcss-rails`を使う
- yarn経由でinstallする
    - 「RailsでTailwind CSSを使用する」
    - https://qiita.com/tabakazu/items/4c152de6e9a2c293d1f2

今回は前者で行う

## gemのinstall

```Gemfile
gem 'tailwindcss-rails'
```

```
bundle install
rails tailwindcss:instal
```
MySQLで連続した日付のデータを作成する

# はじめに
自分用にコピペできるように残しておく

連続したある期間の日付をテストデータに使いたかったのが始まり
# 環境
MySQL　バージョン忘れた
# 参考サイト
https://it7c.hatenadiary.org/entry/20100713/1278950305
# やり方
TEST_TABLE_1 にTEST_TABLE_2からデータを持ってきつつ、連続した日付になるようなデータにしたい。
まず結果から、

```
SET @start_day = '2021-01-01'; #期間の始め
SET @end_day = '2021-02-01';   #期間の終わり
INSERT INTO
    TEST_TABLE_1 (COLUMN_1, COLUMN_2, DATE_1)
SELECT
     TEST_TABLE_2.DATA_1 #TEST_TABLE_2からデータを持ってくる
    ,TEST_TABLE_2.DATA_2 #TEST_TABLE_2からデータを持ってくる
    ,TEST_DATE.DAY
FROM
    TEST_TABLE_2 INNNER JOIN (
        SELECT DATE_FORMAT(DATE_ADD(@start_day, INTERVAL tmp.series DAY), '%Y-%m-%d') AS DAY
        FROM (
            SELECT 0 series FROM DUAL WHERE (@num:=-1)*0 UNION ALL
            SELECT @num:=@num+1 FROM `information_schema`.COLUMNS
        ) AS tmp
        HAVING DATE_FORMAT(day, '%Y-%m-%d') < @end_day
    ) AS TEST_DATE
;
```

こんな感じでいけた。
登録されるデータはこんな感じ

```
DATA_1,DATA_2,2021-01-01
DATA_1,DATA_2,2021-01-02
:
DATA_1,DATA_2,2021-01-30
DATA_1,DATA_2,2021-01-31

```

TEST_DATEについて、

```
SET @start_day = '2021-01-01'; #期間の始め
SET @end_day = '2021-02-01';   #期間の終わり
SELECT DATE_FORMAT(DATE_ADD(@start_day, INTERVAL tmp.series DAY), '%Y-%m-%d') AS DAY
FROM (
	SELECT 0 series FROM DUAL WHERE (@num:=-1)*0 UNION ALL
    SELECT @num:=@num+1 FROM `information_schema`.COLUMNS
) AS tmp
HAVING DATE_FORMAT(day, '%Y-%m-%d') < @end_day
;
```

この結果がこれ

```
day
----------
2021-01-01
2021-01-02
:
2021-01-30
2021-01-31
```

# まとめ
バージョンによっては警告がでるかも。（テストに使うデータを作成するだけなので無視でOK）

以上
PowerShellでIISのHTTP応答ヘッダー(共通)を変更

PowerShellを活用すれば、IISのあらゆる操作がコマンドで実行可能です。
環境構築の自動化・効率化に是非お役立てください。

今回はクライアントキャッシュの設定変更。

IISを立ち上げて、該当のサイトを選択して、「HTTP応答ヘッダー」を選択して、右メニューの「共通ヘッダーの設定」をクリックして…なんて手順書とはもうお別れです。

#おまじない

```powershell
#管理者権限で実行
Start-Process powershell.exe -Verb runas
#サイト名
$siteName = 'Default Web Site'
```

#クライアントキャッシュの削除設定

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1041517/a390bdbd-3021-9bab-1ed8-de753351fa0f.png)


```powershell:設定しない（「期限切れのWebコンテンツ」のチェックを外す）
Set-WebConfigurationProperty `
    -PSPath "MACHINE/WEBROOT/APPHOST/$siteName" `
    -Name . -filter "system.webServer/staticContent/clientCache" `
    -Value (@{cacheControlMode="NoControl";})
```

```powershell:即時
Set-WebConfigurationProperty `
    -PSPath "MACHINE/WEBROOT/APPHOST/$siteName" `
    -Name . -filter "system.webServer/staticContent/clientCache" `
    -Value (@{cacheControlMode="DisableCache";})
```

```powershell:失効までの期間
Set-WebConfigurationProperty `
    -PSPath "MACHINE/WEBROOT/APPHOST/$siteName" `
    -Name . -filter "system.webServer/staticContent/clientCache" `
    -Value (@{cacheControlMode="UseMaxAge";cacheControlMaxAge="02:00:00";})
```

```powershell:有効期限
Set-WebConfigurationProperty `
    -PSPath "MACHINE/WEBROOT/APPHOST/$siteName" `
    -Name . -filter "system.webServer/staticContent/clientCache" `
    -Value (@{cacheControlMode="UseExpires";httpExpires="Tue, 19 Jan 2038 03:14:07 GMT";})
```

正しく設定が反映されたか、IISの画面から（一度は）確認しておきましょう。

参考：公式マニュアル
https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/clientcache
【MATLAB】エディタ上での実行時にmファイルのフォルダを自動的に現在のフォルダに設定(Windows)

# はじめに
MATLABは現在のフォルダが基準であるため、現在のフォルダを無意識のうちに変えて、mファイルが本来とは異なる場所でmファイルを実行してしまうと、特にファイルの入出力関係で問題になることが（私だけかもしれないが）多々あります。
（読み込みデータがあればエラーがでるだけだが、出力する場合はフォルダがごちゃごちゃになり、後々の整理が大変なことになることも。。。）

# 対策
それを防ぐために、Windowsであればmファイルの先頭に以下のようなコード

```matlab
if ispc % Windowsであれば実行
    tmp= matlab.desktop.editor.getActive;       % 現在表示しているファイルのパス
    [filepath,~,~] = fileparts(tmp.Filename);   % 現在表示しているファイルのフォルダ名の取得
    cd(filepath);                               % 現在表示しているファイルのフォルダを現在のフォルダに設定
end
```
を追加すれば、エディタ上の実行の度に、実行したmファイルがあるフォルダを現在のフォルダに設定することができます。
なお、UNIX系ではエラーになるので `if ispc` でwindowsかどうか判定しています。

UNIX系の対処法も（多分ですが）あるのではないかと思います。

ご意見等ありましたら、よろしくお願いします。
[自分メモ] Railsのコマンド関連のメモ

#概要

最近Railsを初めて触ったので、Railsコマンドを忘れないようにメモします。


#コマンド

##API作成

```
rails new sample --api
```


##Webサーバー起動

```
rails server
```

##コントローラ作成

```
rails g controller sample
```

##モデル作成

```
rails g model sample
```

##コントローラ削除

```
rails destroy sample
```

##ルーティング表示

```
rails routes
```

##DB
作成

```
rails db:create
```

マイグレーション

```
rails db:migrate
```

ロールバック

```
rails db:rollback
```

##gemのインストール

```
bundle install
```

##テスト実行(RSpec)

```
bundle exec rspec
```

##参考文献
[Railsで超簡単API](https://qiita.com/k-penguin-sato/items/adba7a1a1ecc3582a9c9)
[【Rails】Rails6でAPIモードの環境構築をしっかりやる](https://zenn.dev/akino/articles/bf245128f390d7)
メモ：nuxt/imageでSSGする際に処理する画像が多いとipxがエラー吐きまくる問題

画像が多いサイトで、nuxt/imageでSSG（静的サイトジェネレーター）で書き出ししようとするとエラーが出て、ネット上に解決方法が見つからなかったのでメモ。

## nuxt/imageとは？

nuxtの公式の画像最適化用のコンポーネントで、next.jsでいう next/image と同じような位置付けのコンポーネントです。

https://image.nuxtjs.org

## エラーの詳細

画像の多いサイトで、以下のコマンドで書き出ししようとすると

```javascript
yarn generate
```

このようなエラーがたくさん出て画像の書き出しに失敗します。

```sh
ERROR  request to http://localhost:57406/_ipx/images/hoge.jpg?s=640_298 failed, reason: connect ECONNRESET 127.0.0.1:57406
```

Githubにこのようなissueがありましたが、ちゃんと解決に至っていません。
https://github.com/nuxt/image/issues/198

原因を探ってみると画像変換に使っている ipx というローカルサーバへのアクセス過多でエラー吐いているようだったので、とりあえず応急処置的に対応しました。画像ファイルの処理を一斉に行わず少しずつ遅延させながら処理するようにしています。

@nuxt/image の /src/generate.ts を以下のように修正しました。

```javascript

export function setupStaticGeneration (nuxt: any, options: ModuleOptions) {
  const staticImages = {} // url ~> hashed file name

  nuxt.hook('vue-renderer:ssr:prepareContext', (renderContext) => {
    renderContext.image = renderContext.image || {}
    renderContext.image.mapToStatic = <MapToStatic> function ({ url, format }: ResolvedImage) {
      if (!staticImages[url]) {
        const ext = (format && `.${format}`) || extname(parseURL(url).pathname) || '.png'
        staticImages[url] = hash(url) + ext
      }
      return staticImages[url]
    }
  })

  nuxt.hook('generate:done', async () => {
    const { dir: generateDir } = nuxt.options.generate
    let delay = 0 // ← この行を追加
    const downloads = Object.entries(staticImages).map(([url, name]) => {
      if (!hasProtocol(url)) {
        url = joinURL(options.internalUrl, url)
      }
      delay += delayOffset // ← この行を追加
      return downloadImage({
        url,
        name,
        outDir: resolve(generateDir, '_nuxt/image' /* TODO: staticImagesBase */),
        delay // ← この行を追加
      })
    })
    await Promise.all(downloads)
  })
}

async function downloadImage ({ url, name, outDir, delay }) { // 引数にdelayを追加
  try {
    await new Promise(resolve => setTimeout(resolve, delay)) // ← この行を追加
    const response = await fetch(url)
    if (!response.ok) { throw new Error(`Unexpected response ${response.statusText}`) }
    const dstFile = join(outDir, name)
    await mkdirp(dirname(dstFile))
    await pipeline(response.body, createWriteStream(dstFile))
    logger.success('Generated static image ' + relative(process.cwd(), dstFile))
  } catch (error) {
    logger.error(error.message)
  }
}

```

本当は上記のissueにもコメントされてますが、本当は最大の並行処理数を決めて、処理の完了を監視して次の処理をやるみたいなことをやるべきですが、とりあえず動けば良いという雑なやり方です。

一応GithubでForkしています。

https://github.com/kjkmr/nuxt-image/commit/5b44f6566b41eda21125663c781ddf487303affc


追記：
nuxtを使ったプロジェクトの package.json の @nuxt/image を以下のように書き換えるとこちらのForkを読み込むようになりますが、設定が足りていないのか、普通に ```yarn install``` しても buildコマンドが走らずdistディレクトリが生成されないです。


```json
"dependencies": {
  "@nuxt/image": "git+https://github.com/kjkmr/nuxt-image.git#main"
}	
```

とりあえずForkしたプロジェクトを ```npm run build``` することで吐き出されるdistディレクトリを nuxtのプロジェクトの node_modules/@nuxt/image 以下にコピーして無理矢理解決しています。（今度ちゃんとやり方調べたい。。。）
ビルドサーバーを再起動するとリモート接続が出来なくなる問題

# はじめに
ビルドサーバーが手元にない状態、あるいは在宅ワークしている際にビルドサーバーを再起動した場合に起きた問題です。
リモート接続でログイン出来ないと、物理的にビルドサーバー上でログインしないと先に進まないので結構大変です。
在宅ワーク中でこの状態になると会社まで行くことになります...オワッタ...

## 原因
Macの「FileVault」機能がOnになっていると最初の管理者ユーザがログインするまでは ping にすら応答しないので、その影響で接続Errorとなっているようです。
複数のアカウントがある場合、FileVault 暗号化を有効にすると、認証情報を入力したユーザ以外のすべてのユーザがディスクにアクセスできなくなります。
![ 2021-04-05 18.42.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022988/56e1fa8e-b176-dc01-eee9-53ac249b2301.png)

## 解決策
「FileVault」機能をOffにしておくこと。
もしくは、これを回避するための再起動コマンドがあります。
リモートから再起動したい場合には通常のメニューからの再起動は行わず、代わりにコンソールを開いて以下のコマンドを入力。
このコマンドによって再起動した場合にはFileVaultのアンロックが自動的に行われるため、再起動直後であっても画面共有でのアクセスが可能です。
`sudo fdesetup authrestart`
画面共有だけでなく、SSHやGoogle Chrome remote desktopなどを利用する場合も同様にFileVaultのアンロックが必要です。
Serverless Typescript REST API MySQL(RDS Proxy)

Serverless Frameworkを使って、RDS Proxy用の基盤を作ってみました。
https://github.com/toritroniks/sls-ts-rds-proxy-api

## 機能

#### :white_check_mark:  自動リクエストとレスポンスのJSONパース
[Middy](https://github.com/middyjs/middy)を利用して、リクエストのbodyを自動的にオブジェクトにパースする
#### :white_check_mark: JSON Schemaからの自動リクエストとレスポンスバリデーション
[JSON Schema](https://json-schema.org/learn/getting-started-step-by-step.html) を使って、リクエストのbodyのバリデーションとAPIレスポンスのバリデーションは自動的に実行されます。
また、bodyのTypescriptインターフェースもSchemaから作成されます。
※ここもMiddyを使っています。
#### :white_check_mark: Webpack+Typescriptで共通処理実装可能（Lambda Layerは不要）
各Lambdaは独立された処理なので、共通処理を実装したい場合、Lambda Layerを使うことが多いと思います。
ただ、Layerのバージョン管理でデプロイが複雑になったり、ローカル実行が難しくなったりします。
Webpackを使うことで、ビルドのタイミングで必要なコードが各Lambdaの中に自動で反映されるため、Layerは不要になります。
※別のリポジトリーで処理を使いたい場合、Layerはまだ必要です。
#### :white_check_mark: ローカル実行可能 + ホットリロード！！
[serverless-offline](https://www.serverless.com/plugins/serverless-offline) のプラグインを使うと、APIのローカル動作確認が可能になります。
実装がリアルタイムで反映されるので、とても開発しやすいと思います。
#### :white_check_mark: RDS Proxy(MySQL)対応
RDS Proxyに繋げるための実装は完了しており、設定ファイルに必要なVPC情報やAWSリソース情報を入れるだけで使えます。
【Azure】WindowsServerのNSGでInternetのOutBoundをすべて拒否して運用したい話

記事内容に間違いがありましたらコメントいただければ幸いです。

#NSGとは
AzureでのNetwork Security Group。
サブネットまたはNICに付与し、Networkのブラックリスト、ホワイトリストを設定できる。
AWSでいうところの、SGとNetwork-ACLを足したようなもの。

#NSGの既定設定
NSG作成時には既定で送信・受信で以下の設定がされており、消すことができない（なんでやねん）。
ただし、オーバライドすることが出来るのでより優先度が高い（値が低い）設定を追加していくことになる。
####受信設定
|既定の受信設定|優先度  |ソース  |ソースポート|宛先|宛先ポート|プロトコル|アクション|
|---|---|---|---|---|---|---|---|
|AllowVNetInBound|65000|VirtualNetwork|*|VirtualNetwork|*	|Any|Allow|
|AllowAzureLoadBalancerInBound|65001|AzureLoadBalancer|*|*|*|Any|Allow|
|DenyAllInbound|65500|*|*|*|*|Any|Deny|
上記設定の意味としては、
VNet(※1)からVNetに対する受信はすべて許可するよ。
ロードバランサー(※2)からすべてのIPに対する受信はすべて許可するよ。
それ以外の受信はすべて拒否するよ。

(※1)ここでいうVNetは、VNet内の同一サブネット、VNet内の別サブネット、ピアリングされた別VNetなど、割と広義の意味。
(※2)ロードバランサーについては以下の記事が分かりやすい

####送信設定

|既定の送信設定|優先度  |ソース  |ソースポート|宛先|宛先ポート|プロトコル|アクション|
|---|---|---|---|---|---|---|---|
|AllowVnetOutBound|65000|VirtualNetwork|*|VirtualNetwork|*|Any|Allow|
|AllowInternetOutBound|65001|*|*|Internet|*|Any|Allow|
|DenyAllOutBound|65500|*|*|*|*|Any|Deny|
上記設定の意味としては、
VnetからVnetに対する送信はすべて許可するよ。
すべてのIPからインターネットへの送信はすべて許可するよ。
それ以外の送信はすべて拒否するよ。

#InternetのOutBoundをすべて拒否する
社内ネットワークやサービスセキュリティの要件で外行きのアクセスをすべて拒否したい場合があります。
設定例を以下に記載します。

|送信設定|優先度  |ソース  |ソースポート|宛先|宛先ポート|プロトコル|アクション|
|---|---|---|---|---|---|---|---|
|DenyInternetOutBound|100|*|*	|Internet|*	|Any|Deny|

**しかしながら、Windowsサーバーを使用する場合は以下の疑問がありました。**
・DNSは動くのか？
・NTPは正常に動くのか？
・WindowsUpdateは正常に動くのか？

###DNS動くのか？
動きます。
Azure上のVMは168.63.129.16というIPアドレスを使用して、DNSの通信を行っています。
このアドレスは特殊なアドレスで、Azure が各種サービスや機能を提供する際に使用している仮想パブリック IP アドレスで、Azure プラットフォームと利用のインスタンス間の連携に使用されます。
そして、上記のようにInternetサービスタグを使ってOutBoundを拒否した場合でも、**例外として拒否されることはありません**。
逆にDNSを拒否したい場合は、AzurePlatformDNSサービスタグを使用して、明示的にDenyで設定する必要があります。

###NTPは正常に動くのか？
動きます。
AzureのWindowsVMは、①ホスト時刻または②NTPサーバのtime.windows.comと通信をして、時刻を同期します。
既定では①のホスト時刻と時刻合わせを行うため、上記設定のNSGでは規制されません。

###WindousUpdateは正常に動くのか？
動きません。え？
WindowsUpdateは上記の168.63.129.16に含まれていません。
またWindowsUpdateを行うためのMicrosoft UpdateサイトはIPアドレスやドメインなどを公開しておらず、仮に分かったとしても不定期で更新されます。
さらにNSGのサービスタグにもWindowsUpdateを指定するタグは現時点（2021/04/05）では存在しません。
下記記事から分かるように、以前よりかなり渇望されていますが・・・（一応2021年の初頭に実装予定らしいです）
https://feedback.azure.com/forums/217313-networking/suggestions/32260814-add-a-network-security-group-tag-for-windows-updat#%7B%E2%80%8Btoggle_previous_statuses%7D%E2%80%8B
代替案として、Azure FirewallならばFQDNタグでWindowsUpdateというタグがあるらしく、こちらでWindowsUpdateの通信を制御できるらしいです。

#結論
InternetのOutBoundをすべて拒否したいが、NSGだとWindowsUpdateが正常動作しなくなる。
WSUSの構築又は、Azure Firewallを検討する。
辞書

### 辞書
辞書とは、リストと同じように複数のデータをまとめて管理するのに用いられます。
リストとの違いは、個々の要素をインデックス番号ではなくキーと呼ばれる名前を付けて管理する点です。
辞書ではキーと値のペアが1つの要素となります。
辞書の記述は`{キー1:値1, キー2:値2, キー3:値3,...}`のように記述します。
ほとんどの場合、キーには文字列が用いられます。
※リストでは要素を`[]`で囲みましたが、辞書では`{}`で囲みます。またキーと値の間には「`:(コロン)`」が必要です。
<pre>例： fruits = {'apple':'りんご', 'banana':'バナナ', 'orange':'みかん'}
</pre>
と記述することで、辞書の記述をすることができました。
次に、要素の取り出すには、取り出したい値に対応する「キー」を用います。
<pre>例： fruits = {'apple':'りんご', 'banana':'バナナ', 'orange':'みかん'}
  print('好きな果物は'+fruits['apple']+'です')　※print(f"好きな果物は{fruits['apple']です}")と記述しても出力されます

出力結果:
好きな果物はりんごです
</pre>
***
### 辞書の要素の更新と追加
辞書はリストと同様に更新と追加をすることができます。
まず更新は`変数名[キー名]=値`と書くことで更新できます。
<pre>例： fruits = {'apple':'りんご', 'banana':'バナナ', 'orange':'みかん'}
  fruits['orange'] ='オレンジ'
  print('好きな果物は'+fruits['orange']+'です')

出力結果：
好きな果物はオレンジです
</pre>
と記述することで、値の更新をすることができます。

次に追加ですが、追加は`変数名[新しいキー名]=値`と書くことで追加できます。
<pre>例： fruits = {'apple':'りんご', 'banana':'バナナ', 'orange':'みかん'}
  fruits['grape'] ='ぶどう'
  print(fruits)

出力結果：
{'apple':'りんご', 'banana':'バナナ', 'orange':'みかん', 'grape':'ぶどう'}
</pre>
と記述することで、辞書に新しい要素を追加することができます。
***
### for文
リストと同じ様に辞書もfor文を用いて要素を１つずつ取り出し、処理を行うことができます。
`for 変数名 in 辞書:`と記述することで繰り返し処理を行うことができます。
<pre>例： fruits = {'apple':'りんご', 'banana':'バナナ', 'orange':'みかん'}
   for fruit in fruits:
       print('好きな果物は'+fruits[fruit]+'です')
</pre>
と記述することで、変数fruitに辞書fruits内のキーが１つずつ取り出され代入されます。
そして、それぞれ処理が実行されます。
Cloud9で容量が足りなくなった時

Cloud9便利ですよね！
でも、すぐ容量無くなるんだよなあ。まあEBS増強すればいいんですけど、大人の事情でそうもいかなくなる場合も多いので。

```
(Account Name):/var $ df /boot
Filesystem     1K-blocks     Used Available Use% Mounted on
/dev/xvda1      10473452 10473452         0 100% /
```
大体、こんな感じですよね。

```
(Account Name):/var $ du -h -t 50M
175M    ./cache/yum/x86_64/2/amzn2-core/gen
283M    ./cache/yum/x86_64/2/amzn2-core/packages
548M    ./cache/yum/x86_64/2/amzn2-core
69M     ./cache/yum/x86_64/2/epel
619M    ./cache/yum/x86_64/2
619M    ./cache/yum/x86_64
619M    ./cache/yum
```
50M以上あるところを探すと、yumのキャッシュが見つかった！これは消せる！
AL2ベースのCloud9使ってると普通にあるはず。

```
(Account Name):/var $ sudo yum clean all
Loaded plugins: extras_suggestions, langpacks, priorities, update-motd
Cleaning repos: amzn2-core amzn2extra-docker amzn2extra-epel amzn2extra-lamp-mariadb10.2-php7.2 epel
Cleaning up everything
Maybe you want: rm -rf /var/cache/yum, to also free up space taken by orphaned data from disabled or removed repos
```

こんな感じで消す。
残りは以下みたいにsudoで強引に。

```
(Account Name):/var $ rm -rf /var/cache/yum
rm: cannot remove ‘/var/cache/yum/x86_64/2/amzn2-core/gen’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/amzn2-core/packages’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/amzn2extra-docker/gen’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/amzn2extra-docker/packages’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/timedhosts’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/.gpgkeyschecked.yum’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/amzn2extra-epel/gen’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/amzn2extra-epel/packages’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/epel/gen’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/epel/packages’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/amzn2extra-lamp-mariadb10.2-php7.2/gen’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/amzn2extra-lamp-mariadb10.2-php7.2/packages’: Permission denied
rm: cannot remove ‘/var/cache/yum/x86_64/2/timedhosts.7690’: Permission denied
(Account Name):/var $ sudo rm -rf /var/cache/yum
```

まあこれでも6%しか減らなかったので、他にも細かく消す必要あるんだろうな、とは思いつつ。一旦これで。
Virtualenvでの初歩的なミス

#エラー

```
from flask import Flask, render_template

app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)
```

仮想環境を有効化して index.html を表示するコードを実行したところ

```
Traceback (most recent call last):
  File "app.py", line 1, in <module>
    from flask import Flask, render_template
ModuleNotFoundError: No module named 'flask'
```
上記のエラーが発生
pip listでインストール済みライブラリーの中にFlaskはあるのにエラーが出た。

#解決

```
pip install Flask
```
仮想環境を有効化した後でライブラリーのインストールをもう一度しなければならなかったらしい...


#追記
仮想環境はライブラリー同士の干渉を解決するために使われるもので、使用するライブラリーをインストールするのは当たり前のことだった。
Power Automate Desktop でWeb APIの実行結果をExcelに保存する方法

最近話題のPower Automate Desktop（以下PAD）を使ってみたいと思います。
良くあるシチュエーションだと思いますが、APIの実行結果をExcelに出力します。

## Power Automate Desktop

マイクロソフトのRPAツールとなっております。こちらからダウンロードできます。

https://flow.microsoft.com/ja-jp/desktop/

## 楽天API

Web APIだったら別に何でもよかったのですが、おなじみの楽天さんの楽天市場系APIを利用します。

https://webservice.rakuten.co.jp/guide/

楽天API情報を使用するには、Rakuten Developersより
「新規アプリ登録」を行いアプリケーションIDを取得する必要があります。
簡単な情報を入力してすぐに取得することができました（はてなブログで作ったものでも申請が通りました）。

### 利用するAPI

`楽天市場商品検索API`を使いたいと思います。

下記のような感じで、GETでアクセスできます。

```url:sample
https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706
?format=json
&keyword=楽天
&genreId=555086
&applicationId=[アプリID]
```

詳しい仕様は[こちら](https://webservice.rakuten.co.jp/api/ichibaitemsearch/)でご確認いただければと思います。

楽天市場商品検索APIの出力形式ですが、以下のような形となります。

```json:response
{
    "Items": [
        {
            "Item": {
                "itemName": "a",
                "itemPrice": 10,
                "shopName": "a-Shop"
            }
        },
        {
            "Item": {
                "itemName": "b",
                "itemPrice": 20,
                "shopName": "b-Shop"
            }
        }
    ]
}
```

`Item`を配列で取得できるので、今回は例として配列分の`ショップ名(shopName)`と`アイテム名(itemName)`を取得して、Excelに出力したいと思います。

## 処理ロジック

ロジックとしましては以下のような感じで設定したいと思います。

1. 楽天市場商品検索APIを「Webサービスを呼び出す」で実行
1. 楽天市場商品検索APIの実行結果をPADの「変数」に変換
1. Excelを新規ファイルで起動
1. ヘッダーを書き込み（ショップ名、アイテム名）
1. Excelの行用の変数「`Row`」を定義（2行目から書き込みたいので、初期値は2としました）
1. レスポンスのItemsを「ForEach」で1件ずつ処理
  1. `shopName`と`itemName`を書き込み
  1. 変数「`Row`」をプラス１
1. 終わり


## 設定

全体の設定としては、こんな感じになりました。

|![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624898/fc108cc8-5f5d-d340-3242-60a4b2188557.jpeg)|
|:--|

設定として分かりにくそうなところだけ個別にキャプチャをはります。

### Webサービスの呼び出し

URLやメソッド、コンテンツタイプなどの設定ができます。
（楽天APIでは不要でしたが、ヘッダーに認証トークンを含めたい場合は、カスタムヘッダーに記述すれば大丈夫です）

|![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624898/7bd17198-58ed-0e35-ca58-d6f4955933d2.jpeg)|
|:--|

APIの実行結果のステータスについては`%StatusCode%`に入って、レスポンスデータは`%WebServiseResponse%`という変数に入っています。
前提として、PADでは`%変数名%`のように`%`で囲むと変数として扱われます。

### Excelに書き込み

|![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624898/e1dbb2fb-8614-8ded-8925-bab7125067ec.jpeg)|
|:--|

`%ExcelInstance%`という変数にExcelインスタンスを起動している（サブフローの３）ので、それを指定しています。

`%Items%`の一要素が`%CurrentItem%`の変数に割り当てられています（サブフローの７）。
そして`%Item%`という変数名の中に`%shopName%`が入っているので、それを指定します（楽天市場商品検索APIの出力形式を参照してください）。

### 実行結果

|![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624898/9dea888b-1cd9-f2ba-5749-66b687d2a15f.jpeg)|
|:--|

簡単ですね（個人的にはプログラムでやりたくなります）。
プログラミングはどの言語から始めたらいいですか？


# ONION プログラミング 勉強会 2021/4/4
[ONION](https://www.facebook.com/ONION-107310827459074/)では Web Cloud AI IoT の技術研究を行っています
プログラミングの実践や 情報交換を通して スキルアップを目指します

## 質問コーナー
### プログラミングは どの言語から始めたらいいですか？

たくさんあって悩んでしまいますよね  

プログラミング言語には それぞれ特徴があるので
**プログラミングで 何を実現したいのか** を考えて
それを 実現できる機能をもった言語を選びましょう

##### とりあえずプログラミングを初めてみたい
##### ホームページを作ってみたい

`HTML` `CSS` が おすすめ
入門難易度 ★☆☆

- 簡単に始められる
- 結果がすぐに見られて楽しい
- ほとんどの企業で使われている


##### 予約・販売サイトを作ってみたい
##### 社内システムを作ってみたい

`JavaScript` が おすすめ
入門難易度 ★★☆

- この言語でだけで いろんなものが作ることができる   
(後述の *React Native* でスマホアプリも作れる)
- Webサイトにアニメーションをつけることができる

#### スマホアプリを作ってみたい

`React Native` `Flutter` が おすすめ
入門難易度 ★★★

- iPhoneアプリ Androidアプリ 両方作ることができる

##### AIの開発がしたい
##### IoTの開発がしたい

`Python` が おすすめ
入門難易度 ★★☆

- 科学技術計算系のライブラリが豊富
- 比較的簡単
- 授業にも採用されている

##### ゲーム開発がしたい

`C#` `C++` が おすすめ
入門難易度 ★★☆

- *Unity* を使って開発する場合は C#
- *Unreal Engine* を使って開発する場合は C++


## プログラミングの実践
プログラミングは 実際に手を動かして学習するのが効率的です

テキストや スクールで学べることも たくさんありますが
プログラミングの難易度が上がるほど わからないことが増えていきます

現場経験を重ねるのが 収益的にも 学習的にも 理想的なのですが
自分の能力以上のプロジェクトだと業務が大変になり
自分の能力以下のプロジェクトだと学びが少なくなります

ONIONでは オリジナルのプロジェクトを立ち上げ
メンバーのスキルより少し上のタスクを担当してもらうことで
個々の能力向上を目指しています

現在は 下図のスキルセットで 
Webシステム開発の 技術研究を行っています
![study_theme.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345860/6f716c3c-ad73-75a9-d88e-6d8302952134.png)
Raspberry piにsambaを入れWindow 10 PCからアクセスする

### Raspberry piにsambaを入れWindow 10 PCですべてのPathからアクセスする
##学習用です。セキュリティ上問題のある設定です。
#インストール

```
sudo apt-get install -y samba
```
#設定する
```
sudo nano /etc/samba/smb.conf
```
#ワークグループの変更

```

# Change this to the workgroup/NT-domain name your Samba server will part of
   workgroup = workgroup
```


#最終行に追加

```
[root]
    comment = root
    path=/
    browseable=YES
    writeable=YES
    valid users= pi, root
    only guest=no
    create mask=0777
    directory mask=07777
    public=no
    force user = root

```

#Sambaユーザのパスワード設定

```
sudo smbpasswd -a pi

sudo smbpasswd -a root

```

#再起動
```
 sudo systemctl restart smbd
```
JS~alert,confirm~

今回はJSでのアラートボックスとダイアログボックスについて学習していきます！

アラートボックス▶ユーザーへの確認や注意喚起のために使われます。
ダイアログボックス▶　ユーザーへの確認と注意喚起のために使われるが、ボタンの情報を受け取ることができます。

```index.js
<script>
    'use strict'

     alert('シャットダウンしますか？？');

    const answer = confirm('削除しますか？？');
    if (answer) {
      document.write('削除しました');
    } else {
      document.write('キャンセルしました');
    }

  </script>
```
ここで注意なのは、このダイアログボックスはCSSで装飾することができません。
あくまで、ユーザーに注意喚起をする目的になっていいます。

CSSでデザインする場合は
モーダルウィンドウを作ります。

次の記事でモーダルウィンドウを作って行きたいと思います👌