OmniAICreator/Qiita-1.07M huggingface dataset:
【HoloLens MRTKv2.4】MSBuild使ってますか？

# MRTK入れたけど、MSBuildとは

まずはwikiを見ます。

> MSBuildはマイクロソフトのビルド環境であり、通常Visual Studioと一緒に使われている。

> Visual StudioのプロジェクトおよびソリューションはMSBuildに基づいており、コンパイラやリンカ、SDKなどのツールがセットアップされていれば、Visual StudioのIDE無しでもビルドすることができる。MSBuild自体は無償で利用可能である。

説明を見る限り、unity上でビルドが行えるということのようですね。
Taskなどの記載も見受けられますので、github actionとかあんな感じなんでしょうか...

# MRTKでのMSBuildとは

公式の入門チュートリアルでは、

1. unityでbuild
2. vsでデプロイ

の手順を踏んでいるようです。
https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrlearning-base-ch1#build-your-application-to-your-device

しかも使わないほうがいいよ！ってめっちゃ強調してる。。
なんであるの？

> MSBuild for Unity は使用するすべての SDK をサポートしていない場合があり、有効にした後は無効にするのが困難な場合があります。 そのため、MSBuild for Unity を有効にしないことを強くお勧めします。

気になったので実際に使ってみました。
HoloLens1を使って実験的にデプロイを行ってみます。

# やってみる

## 開発環境

- windows10 pro
- unity 2019.2.8f1
- Visual Studio Community 2019 16.6.2
- MRTK v2.4

## 手順

以下のようにMSBuildの設定を行いました。

- Unity Build Options
![qiita1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363822/73224683-0521-6d57-839d-0c3e5b62c2c5.jpeg)

- Appx Build Options
![qiita2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363822/519c455f-db9b-16c3-04b3-0b1582d11f37.jpeg)

- Deploy Options
![qiita3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363822/a8240733-36c0-2f4f-9b73-aabfc9baa2db.jpeg)

***※ USBでのDeployを行うには、Visual StudioのインストーラーでUSB開発をインストールしてください。***
![qiita4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363822/a992f970-3536-db7c-43e2-71fb037dff43.jpeg)
USB
Build all, then installを押すと、

お、走り始めました。
![qiita5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363822/6ba4a161-2819-15fd-830e-44b3ca6df791.jpeg)

Consoleにドババババババとログが書き出されて、windowは悲鳴を上げています。

成功しました。
![qiita6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363822/96cacc77-de39-1511-9afd-e8aefb298cd2.jpeg)

Deploy Optionsの画面を確認すると、以下のようにアプリができていて、USBでHoloLensとつながっている状態だと、***Launch App***を押すことでHololensにdeployされました。

![qiita7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363822/984e430f-c249-f7cb-5f81-f2d135e6277d.jpeg)

## 結果

めっちゃ便利じゃん。という結果でした。
いちいちVS開かなくていいし、UnityのBuildの待ち時間を減らせます。

しかし公式が強く非推奨にしているのは理由があると思われますので、もしかしたらHololens2だとうまくいかない？というようなこともあるのでしょうか...

他のSDKとの相性が良くないというような記述ですのでARkitとかとぶつかるんですかね。。

私は当面このPCではHololensのDeployしか行わないので、このままMSBuildを使った時短開発をしていこうと思います。

## これからHoloLens開発を始める方へ、一言

内部SSDは最低でも256GBは用意したほうが良いよ！！！
( 128GbでSSDけちったら痛い目を見ています。。 )
AWSアカウントのベストプラクティス(エンタープライズ向け)

#はじめに
現職でHD会社のIT部門でAWS移行を担当しています。
AWSのアカウント管理の考え方について勉強したので一度整理してみます。

#AWSアカウントの種類
まず、AWSで扱うアカウントには以下の種類があります。
・AWSアカウント(root)
・IAMアカウント
・組織アカウント
##AWSアカウント
AWSを利用する際に登録するアカウントで、全ての権限を持っています。
非常に強力なアカウントのため、通常は使用しないようにします。

##IAMアカウント(ユーザー)
各サービスやマネージメントコンソールのログインの際に使用するユーザー。
ポリシーをアタッチすることで操作できる範囲や権限を指定します。

##組織アカウント(Organizations)
組織内で複数のAWSアカウントを扱う場合に、共通のポリシーなど統制を効かせるために
Organizationsというサービスがあります。
このサービスで利用する、複数のアカウントを管理するアカウントになります。

#なぜIAMユーザーが必要なのか
AWSアカウント(root)では権限が強すぎるため、もし乗っ取りにでもあったらそのアカウント内では全ての操作ができてしまいます。
なので基本的にはrootアカウントは使わずに、IAMユーザーを利用します。
IAMユーザーには**必要最小限の権限**を**必要最小限のユーザー**に与えて運用することが基本です。

#アカウント管理の考え方
アカウント管理にはいろんな考え方がありますが、
1アカウントに全てのシステムを構築し、複数のVPCを管理するやり方。
システムごとにアカウントを分けて、本番、ステージングなどの環境はVPCで分けるやり方。
１システム、環境ごとにアカウントを分けるやり方。

私の結論は**１システム、環境ごとに1アカウント**です。
理由は後述

#複数のAWSアカウントを管理するには
複数AWSアカウントを作ると、管理が煩雑になってきます。
監査ログやセキュリティポリシーもアカウントごとにバラバラになってしまうと、統制が効かなくなってしまいます。
そんな時に利用できるサービスが**AWS Organizations**です。

Organizations専用のアカウントを登録して、配下に組織内のAWSアカウントを紐づけることで
同一のポリシー(SCP)を適用したり、請求を一括管理することも可能です。

#シングルアカウントとマルチアカウントどちらがいい？
「アカウント管理の考え方」の部分でも書きましたが、結局は
**その組織で何を重要視するか**に尽きると思います。

それぞれのメリットデメリットはクラメソさんの以下の記事が参考になります。
[AWSアカウントとVPC、分ける？ 分けない？: 分割パターンのメリット・デメリット](https://dev.classmethod.jp/articles/account-and-vpc-dividing-pattern/)

その上で弊社では「１システム、環境ごとに1アカウント」の方向で進めることになっています。
これは、以下の点を考慮した結果となります。
・1アカウントでは各システム担当の領域外のリソースが見えてしまう。
　→ポリシーで権限管理はしんどい。。。
・環境ごとに分けることで、誤操作の影響リスクを分断する。
・利用料金を明確にする。
　→弊社がHD会社なので、複数事業者でどれだけ利用しているのかコスト管理が明確になる。
・OrganizationsやTransitGatewayなどマルチアカウント運用に最適なサービスが出てきている。

以上のことから、「１システム、環境ごとに1アカウント」としましたが、おそらくエンタープライズの企業であれば同じような状況で議題に上がるかと思います。
・社内に複数システムがある
・各事業部ごとにアカウントを分けたい(コスト把握、権限分離)

そのようなことを実現するにはベストプラクティスとしては「１システム、環境ごとに1アカウント」が正解なのではないかと思っています。

まだまだAWS学び始めて日が浅いので、「こういう考えもある」「そこは違う」などご意見ありましたら、コメントいただけるとありがたいです。
pprintとjson.dumps

```py
import json
import pprint

l = ['apple', 'orange', 'banana', 'peach', 'mango']
l.insert(0,l[:])
#l.insert(0,l[:])
#l.insert(0,l[:])
#l.insert(0,l[:])
#print(l)
pp = pprint.PrettyPrinter(indent=4, width=40, compact=True, depth=3)
pp.pprint(l)


d = {'a': 'A','b': 'B', 'c': {'x': {'y': 'Y'}}}
pp = pprint.PrettyPrinter(indent=4, width=40)
pp.pprint(d)


print(json.dumps(d, indent=4))
```
実行結果：

```txt
[   [   'apple', 'orange', 'banana',
        'peach', 'mango'],
    'apple', 'orange', 'banana',
    'peach', 'mango']
{   'a': 'A',
    'b': 'B',
    'c': {'x': {'y': 'Y'}}}
{
    "a": "A",
    "b": "B",
    "c": {
        "x": {
            "y": "Y"
        }
    }
}
```
Person.java

class Person {
  private static int count = 0;
  private String firstName;
  private String middleName;
  private String lastName;
  private int age;
  private double height;
  private double weight;
  // インスタンスフィールド「job」を追加してください
  private String job;
  
  // コンストラクタを書き換えてください
  Person(String firstName, String lastName, int age, double height, double weight,String job) {
    Person.count++;
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.height = height;
    this.weight = weight;
    this.job = job;
  }
  
  // コンストラクタを書き換えてください
  Person(String firstName, String middleName, String lastName, int age, double height, double weight,String job) {
    this(firstName, lastName, age, height, weight,job);
    this.middleName = middleName;
  }

  public String getMiddleName() {
    return this.middleName;
  }
  
  // jobのゲッターを定義してください
  public String getJob(){
    return this.job;
  }


  public void setMiddleName(String middleName) {
    this.middleName = middleName;
  }
  
  // jobのセッターを定義してください
  public void setJob(String job){
    this.job = job;
  }
  

  public String fullName() {
    if (this.middleName == null) {
      return this.firstName + " " + this.lastName;
    } else {
      return this.firstName + " " + this.middleName + " " + this.lastName;
    }
  }

  public void printData() {
    System.out.println("私の名前は" + this.fullName() + "です");
    System.out.println("年齢は" + this.age + "歳です");
    System.out.println("BMIは" + Math.round(this.bmi()) + "です");
    // 「仕事は◯◯です」と出力してください
    System.out.println("仕事は"+this.job+"です");
    
  }

  public double bmi() {
    return this.weight / this.height / this.height;
  }
【Laravel】例外処理(try...catch)でのデバッグ

## はじめに

例外を発生させたい時、try...catch文を使うかと思います。
その時のデバッグ方法についてメモです。

## これまで

```test.php
try {
// 略 
} catch (\Exception $e) {
    $e->getMessage();
    session()->flash('flash_message', '更新が失敗しました');
}
```

というような感じでgetMessageメソッドで使っておりました。
これだとエラーの原因（ex:undefined $hoge）は分かるのですが、どの行でエラーを起こしているかという情報までは出力されないんですよね。。。

というわけで、、、

## こうしました

```test.php
try {
// 略 
} catch (\Exception $e) {
    report($e);
    session()->flash('flash_message', '更新が失敗しました');
}
```

reportメソッドを使うと、どのファイルの何行目で処理が止まっているか（エラーが起きているか）まで出力してくれます。
Main.java

class Main {
  public static void main(String[] args) {
    // 仕事を「医者」にしてください
    Person person1 = new Person("Kate", "Jones", 27, 1.6, 50.0,"医者");
    person1.printData();
    // 仕事を「教師」にしてください
    Person person2 = new Person("John", "Christopher", "Smith", 65, 1.75, 80.0,"教師");
    person2.printData();
    System.out.println("----------------------");
    // person1の仕事を「獣医」に変更してください
    person1.setJob("獣医");
    
    // 「person1の仕事を◯◯に変更しました」と出力されるようにしてください
    System.out.println("person1の仕事を"+person1.getJob()+"に変更しました");
    
    person1.printData();
  }
}
Twitter 誹謗中傷撃退マシン

昨今度々話題に上がるSNSの誹謗中傷
中には自殺者まで出すケースがあります。
なので今回はそんな人をテクノロジーの力で救いたいということで一肌脱ぎました。

もちろんTwitter APIさんに協力を仰ぎます。
では、行ってみましょう！！！

### ちなみにAPIとは

「API」とは、「Application Programming Interface」の頭文字です。

インターフェイスとは、コンピュータ用語でいうと、「何か」と「何か」をつなぐものという意味を持ちます。例えば、USBも「パソコン」と「周辺機器」をつなぐものですので、インターフェイスの一つです。

つまり、APIとは、この「何か」と「何か」が「アプリケーション、ソフトウェア」と「プラグラム」をつなぐもの、という意味になります。

APIとはソフトウェアやアプリケーションなどの一部を外部に向けて公開することにより、第三者が開発したソフトウェアと機能を共有できるようにしてくれるものです。USBは外部デバイスとパソコンを繋ぐインターフェースですが、APIはソフトウェア同士を繋げます。つまり、異なるソフトウェアやサービス間で認証機能を共有したり、チャット機能を共有したり、片方から数値データを取り込み、別のプログラムでそのデータを解析したりできるようになります。

APIを公開する、とはわかりやすく言うと、ソフトウェアにAPIという外部とやりとりする窓口を作り、外部アプリとコミュニケーションや連携ができる状態にする、ということです。鎖国時代の日本と諸外国は連携することが困難でしたが、諸外国との貿易を許されていた唯一の場所である長崎の出島をうまく活用することで、日本との貿易や文化交流、情報交換が行えるようになった、という歴史の話がありますが、日本を一つのソフトウェア、諸外国をまた別のソフトウェアと考えると、出島が司っていたのが言ってみればその二つを繋げるAPI機能です。

## TwitterのAPIキーを取得しよう
何をするにしてもまずAPIキーを取得しないといけません。窓口を使うための許可書みたいなもんですね。
ここが一番の山です。これさえ乗り切ればあとはコピペのみ、頑張りましょう。

### APIキー取得方法
取得方法は度々変わるのですがこれが2020年版です。
[2020年度版 Twitter API利用申請の例文からAPIキーの取得まで詳しく解説](https://www.itti.jp/web-direction/how-to-apply-for-twitter-api/)
このサイトが一番わかりやすかったです。

## 誹謗中傷撃退プログラムを作ろう
今回はPythonを使います。
まずAPI認証のため、Requests-OAuthlibというライブラリを用いる。
まー、窓口に入る前にいる警備員的なやつかな。

```
pip install requests requests-oauthlib
```

ついにコードです。コピペしてください。

```
# coding=utf-8

import json
from requests_oauthlib import OAuth1Session

# 認証処理
CK = 'あなたのAPIキー'
CS = 'あなたのAPIシークレットキー'
AT = 'あなたのアクセストークン'
ATS = 'あなたのアクセストークンシークレット'
twitter = OAuth1Session(CK, CS, AT, ATS)

# ツイート検索エンドポイント
url = 'https://api.twitter.com/1.1/search/tweets.json'
# ユーザーブロックエンドポイント
url2 = 'https://api.twitter.com/1.1/blocks/create.json'
# 誹謗中傷の対象となる文言
bad_words = ['バカ', 'アホ', 'たわけ']

for bad_word in bad_words:
    # エンドポイントへ渡すパラメーター
    keyword = '@@downtownakasiya '  # リプライされたアカウント
    keyword += bad_word
    keyword += ' exclude:retweets'  # RTは除外

    params = {
        'count': 50,  # 取得するtweet数
        'q': keyword,  # 検索キーワード
    }
    req = twitter.get(url, params=params)

    if req.status_code == 200:  # うまくいった時の処理
        res = json.loads(req.text)
        for line in res['statuses']:
            params2 = {'user_id': line['user']['id']}  # ブロックするユーザー
            req2 = twitter.post(url2, params=params2)

            if req2.status_code != 200:
                print("Failed2: %d" % req2.status_code)
    else:  # うまくいかなかった時の処理
        print("Failed: %d" % req.status_code)

# 注意：Twitter APIは1週間以上前のリプを検索ヒットさせることができない
```

このコードを「twitter.py」とかで保存して、コマンドで

```
python twitter.py
```

と叩けばあっという間に誹謗中傷コメントは非表示に、やったー

## 総括
どんな悪口が傷つくかは本人が一番わかってるので誹謗中傷の対象となる文言は自分で選べるようにしました。
このプログラムが少しでも世の中に役立つことを切に祈ってます。

ちなみにこれが私のTwitter垢です。気軽にメッセージどうぞ！
https://twitter.com/downtownakasiya
CSS 変数の使い方（かなりの初歩）

ページのテーマ色とかをいろんな要素で使いたい時に便利なCSS変数。
例えば、ページのテーマ色がオレンジだった場合、全ての箇所にオレンジと記載してもいいが、変更となった場合は全ての箇所を修正する必要が出てくる。
しかし、CSS変数を使うと１箇所直すだけで、その変数が割り当てられているところに反映される。

以下、サンプルコード

```css

/*宣言方法は以下のように'--'で始める*/
/*使い方はvar()の()ないに入れ込む*/
h1{
  --my-color: orange;
  color: var(--my-color);
}
/*これでh1にオレンジが割り当てられる。
また、何も設定がないときの指定もできる*/

h1{
  color: var(--my-color,blue);
}

/*これは何も設定がされていなかったらblueを割り当てて、と言うこと*/

```

ただ、`<h1>`で宣言した変数を`<p>`では使えない。
つまり

```
h1{
  --my-color: orange;
  color: var(--my-color);
}

p{
  color: var(--my-color);
}
```

としても`<p>`にはオレンジが割り当てられない。
どうすれば共通して使えるかと言うと、
方法は２つある。

①共通の親要素で宣言する。
②文書全体のhtmlで宣言する。

①の場合は、htmlが以下のようになっていた場合、

```
<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>

```

共通する親要素である`<body>`で宣言すれば両方ともに共通する変数を使える。

```
body{
  --my-color: orange;
}
```

としておくと、`<body>`の中にある要素には、--my-colorが使える。

②の方法はCSSファイル内で

```
:root{
  --my-color: orange;
}
```

と言うように宣言すると、`<body>`,`<h1>`,`<p>`の全てというか、htmlにある全ての要素に--my-colorが使える。

また変数はプロパティの値に使えるのであって、プロパティ名には使えない
。
例えば、

```
--my-margin-top: margin-top;
```

はできず、

```
--my-margin-top: 40px;
margin-top: var(--my-margin-top);
```

こういう使い方をしなければならないということ。

以下、まとめサンプルコード

```css

:root{
  --my-hue: 200;
}

body{
  background: hsl(var(--my-hue), 40%, 95%);
}

h1,p{
  color: hsl(var(--my-hue), 35%, 55%);
}

.btn{
  color: white;
  width: 100px;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  background: hsl(var(--my-hue), 50%, 50%);
  background: hsl(calc(var(--my-hue) + 180), 50%, 50%);
  /* 180°変えて補色の関係にし、見やすいように。 */
  background: hsl(calc(var(--my-hue) + 60), 50%, 50%);
  /* 完全に穂色はきついから、少しずらした色に */
}
```
strとrepr

```py
import datetime

print('s')
print(str('s'))
print(repr('s'))

d = datetime.datetime.now()
print(d)
print(str(d))
print(repr(d))

print('{!r}'.format('test')) #repr
print('{}'.format('test1'))
print('{!s}'.format('test2')) #str


class Point(object):
    def __init__(self, x, y):
        self.x = x
        self.y = y

    def __repr__(self):
        return 'Point<object>'

    def __str__(self):
        return 'point ({}, {})'.format(self.x, self.y)


p = Point(10, 20)
print('{0!r}'.format(p)) # __repr__が呼び出される
print('{0}'.format(p)) # __str__が呼び出される
print('{0!s}'.format(p)) # __str__が呼び出される
```
実行結果：

```txt
s
s
's'
2020-06-21 08:42:07.565478
2020-06-21 08:42:07.565478
datetime.datetime(2020, 6, 21, 8, 42, 7, 565478)
'test'
test1
test2
Point<object>
point (10, 20)
point (10, 20)
```
Keysight DMM 34461Aから電圧を読み込んでグラフを描く③

　高速測定は前回実行できました。どうもFETCH?で読み出すときにタイムラグがあるようです。測定値がメモリ（バッファ）に入ったら、無理やり取り出すという形のサンプルを実装します。
# 初期設定は前回と同じ

```matlab
% Instrument Connection
% Find a VISA-USB object.
obj1 = instrfind('Type', 'visa-usb', 'RsrcName', 'USB0::0x2A8D::0x1301::MY53216054::0::INSTR', 'Tag', '');

% Create the VISA-USB object if it does not exist
% otherwise use the object that was found.
if isempty(obj1)
    obj1 = visa('KEYSIGHT', 'USB0::0x2A8D::0x1301::MY53216054::0::INSTR');
else
    fclose(obj1);
    obj1 = obj1(1);
end

% Connect to instrument object, obj1.
obj1.InputBufferSize = 100000;
fopen(obj1);
```

# 本体
 200回の測定です。

`TRIG:SOUR BUS`　トリガ・ソースはバス。「トリガ待ち」状態になると、リモート・インターフェース経由で*TRGにより測定器のトリガが実行される
`INIT`　実行開始
`*TRG`　TRIGger:SOURce BUSが選択されている場合に、測定器をトリガする
`DATA:REMove? 200, WAIT`　読み値メモリから、200個の測定値を読み取り、削除する。読み出せる測定値が200個より少ない場合は待機する


```matlab
% Instrument Configuration and Control
% Communicating with instrument object, obj1.
fprintf(obj1, '*RST;*CLS');

% Communicating with instrument object, obj1.
fprintf(obj1, ':CONF:VOLT:DC 1, 1e-4');
fprintf(obj1, ':VOLT:IMP:AUTO OFF');
fprintf(obj1, ':VOLT:DC:NULL:STAT OFF');
fprintf(obj1, ':VOLT:NPLC MIN');

data=[];
counter = 200;
message = ":SAMP:COUN " + counter;
fprintf(obj1, message);
fprintf(obj1, ':TRIG:SOUR BUS');
fprintf(obj1, 'INIT');
fprintf(obj1, '*TRG');

message2 = "DATA:REMove? " + counter + ", WAIT"
d = query(obj1, message2);
data = str2num(d);

x=[1:counter];
plot(x, data,'-o')
title('34461A DC')
xlabel('x')
ylabel('Volt [V]')

grid on
```

　終了処理は、変更なしです。

```matlab
% Disconnect and Clean Up
% The following code has been automatically generated to ensure that any
% object manipulated in TMTOOL has been properly disposed when executed
% as part of a function or script.

% Disconnect all objects.
fclose(obj1);

% Clean up all objects.
delete(obj1);
clear obj1;
```

# 実行結果
 　発振器は、5kHz、1Vp-p、サイン波です。サイン波のように見えますが、電圧がおかしいです。

![スクリーンショット 2020-06-21 07.37.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407635/7486b3aa-9749-d334-09de-814c126ec9c2.png)

　方形波に変更しました。似ても似つかない形状に。
![スクリーンショット 2020-06-21 07.38.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407635/126d61d3-921b-9421-2cd5-9788b4e8438d.png)
　1kHzにしました。電圧に大きめになる誤差があります。測定は100回です。
![スクリーンショット 2020-06-21 07.42.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407635/6c5eb84c-2438-ac85-5f97-9db37591de0b.png)
　サイン波です。電圧が少し低めの誤差があるようです。
![スクリーンショット 2020-06-21 07.51.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407635/ec3ecd21-42c8-7d91-ebc3-7b67cca61ce9.png)
　200回。
![スクリーンショット 2020-06-21 07.54.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407635/894de465-0443-6c44-4882-7a9fe0d746cb.png)



# 検証が必要
　高速で読み出すために、
- オートゼロ・モードを無効
- 積分時間を最小に
などの設定は、雑音をひろいやすくなり、確度が悪くなります。あまり変化のないデータ、大きく変化するデータによっても、確度が異なるかもしれないので、利用する前にテストをして、確度と、処理速度の兼ね合いを見つけるのがよいと思います。
高専生に絶対知っておいてほしいこと①

#この記事の対象者
- 現在高専に在学している人
- 理系科目が好きだから、**とりあえず**高専に入った　という人
- **なんとなく**大学の理系に進学した人

#概要
[高専に入ってボーッとしていたら一年を無駄にした！！！](https://qiita.com/soshi_harami/items/a64ca08f9ed89d2a3db6)を読んで、いろいろと思うところがありました。
高専卒社会人エンジニアの私から、これからの将来を担う皆さんに、
高専という恵まれた環境を最大限に活かすために、ぜひ意識してほしいことを何回かに分けて書いていきます。
**暇つぶしでいいのでぜひ最後まで読んでほしいです**。

#自己紹介
- 高専の**電気**系学科→専攻科→大学院→大手電機メーカー
- 高専～大学院ではずっと物性系の研究をしていた

#書こうと思ったきっかけ
[高専に入ってボーッとしていたら一年を無駄にした！！！](https://qiita.com/soshi_harami/items/a64ca08f9ed89d2a3db6)を読んで、
1年で自主学習の重要性に気づけるなんてすごいなぁ と素直に思いました。
なぜなら自分が高専に通っていた時なんて、通学→授業受ける→帰る→課題やる→ゲームする→寝る→…くらいなもので、
自分で意欲的にスキルアップしなければ！と気づいたのは7年後に大学院に入った時でした。

結論から言うと、高専を**とりあえず**出れば、**それなりに**働くことはできます。
ですが、ぼーっとしていると、**高専というと～～～～っても恵まれた環境**を活かしきれないまま卒業してしまいます。
今、高専にいる学生の方には、そうなってほしくないのです。
だから、今、高専にいるひとは何をすればいいのか　を何回かに分けて書いていきたいと思います。

##こんな人は危険信号
もし以下に当てはまるような人は、将来困るかもしれません。

- 成績はクラスでもいい方だし大丈夫　と思っている人
- 課題や実験レポートを書いて満足している人
- 通学→授業→帰る→授業の課題やる→ゲームする→寝る をループしている人（~~つまり過去の自分~~）
- 夏休み等の長期連休にやることがない人 

##就職することを想像してみよう
※もしアカデミックの道（大学教授等）に進むとしてもほぼ同じ話です。

さて突然ですが、**就職面接を受けている5年生の自分**を想像してください。
イメージは大企業でもスタートアップ企業でもいいです。
そして、面接官はあなたにこんな質問をします。

**あなたは、他の大学生に勝てるところはありますか？**


答えられるでしょうか？　もしかして、

- 自分は成績も上位だから専門知識なら負けません！ 
- 高専で大学～大学院レベルの勉強を既にしているから自信があります！ 
- 5年生で早くから論文読んだり企業と共同研究したりして研究も頑張っています！ 
- すでに学会でプレゼンも経験しています！

とか思っていませんか？

もしそう思っていたら、残念ながら、それでは採用されません。

##なぜ採用されないのか？
高専を卒業して働くということは、当然ながら他の大学生と肩を並べるということです。
特に大企業なんかは、基本的に有名大学を卒業した人ばかりで、こんな人たちです。

- 死に物狂いで受験戦争を勝ち抜き、幅広い知識を持っています。
- 高専よりも強いネームバリューも持っています。
- バイトやサークルなどで人生経験やコミュ力がより豊富だったりします。

こんな人たちに、勉強の成績やレベルで勝負したところで勝てません。
（別の記事で書こうと思いますが、そもそも勝たなくていい）

**聞きたいのは勉強以外に何ができるか？です。**

自信をもって答えられることはありますか？

一旦この記事はここまでにして、続きはまた明日にでも書きたいと思います。
少しでも読みたいと思っていただけた方はLGTMお願いします。

#続き
こんなことを書こうと思います。
他にもこんなことが知りたいということがあればコメントに書いてもらえると助かります。

- じゃあ高専在学中に何をしておけばいいのか？
- 社会人からみて大学生と高専生は正直どう見えているのか？
- 高専生のありがちな勘違い
- 5年で就職？大学院進学？どっちがいいのか？
- 大企業がいいのか？スタートアップがいいのか？
Object Detection（OpenCV、Mask R-CNNなど）

お疲れ様です。


さて、最近下記のサイトを元にがりがり

 

GitHub

Python

OpenCV

Mask R-CNN

Anaconda

Tensorflow

Keras

 

などなど、さまざま検証中です。

 
https://ai-coordinator.jp/opencv

 

 

 

 

私ももともと、OpenCVsharpなどＣ＃使いとして昨年頑張ってましたので

１時間程度でさくっとできました。

 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/5ad00194-615a-eebb-2b8f-ee19a9482817.png)


 

 

それにしても新垣由衣さんかわいいっすね・・・

 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/9afc9b2b-1cfa-7c8e-b62b-e7b2c83e769a.png)



 

 

ロシアの大統領でもやってみましたが、

うまくいきました。

 

 

簡単なんで試してみてください。

 

 

また、

 

物体検知では最近のトレンドになりつつある

 

Mask R-CNNを利用した解析もやってみました。

 
https://ai-coordinator.jp/mask-r-cnn

 

 

 

これ、かなり環境構築難航しまして・・・

 
http://blog.livedoor.jp/tmako123-programming/archives/51025848.html

 

 

ここらのブログが参考になりました。

 

 

Pythonのプログラムを修正して、、

 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/3769feeb-a296-000b-37aa-f62a2c21df72.png)


 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/707853f7-d1ec-6949-60c8-308c26536f40.png)


なんとかいけました。

 

 

※実際は会社でとったんですが、さすがに会社の室内を上げるのはまずいだろうと思いまして・・・

 

 

イメージということでお願いします。

 

 

WEBカメラでもやってみたんですが、

 

かなり、GPUの高いやつじゃないとつらいですね・・

 

 

以前OpenPose（下記参照）も試しましたが、

GPU必須です。

 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/9c228ff1-d920-581a-fda9-384df4d44d87.png)


 

 

研究は正直あんまり好きじゃないが、

 

マネタイズできる仕掛けづくりは大好き。
OculusGo 画面共有してみる

お疲れ様です。

 

日課が終わり、引き続きVR開発です。

 


https://note.com/nerd0geek1/n/n52f19c34245d
 

ここあたりをみて、

 

 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/f668c1c0-92e5-9982-6009-834401a6a25b.png)

 

vysorをインストール

 

Android関連の開発でここあたりは既に確認済みでした。

 

結構簡単に画面共有できました。

 

 

これで何を見てるか共有できますね

 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/0bc0ddfe-4ecd-4017-d9fe-562e40026a0e.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/3a7c27ca-8771-7f5c-4077-c85590ec090b.png)


 

はい、昨日につづき

Unityちゃんです。
Oculus Goでユニティちゃんライブステージを動かす【Unity】【VR】【Oculus Go】

お疲れ様です。

 

かねてより懸案だった、

 

OculusGoでユニティちゃんライブステージを動かす

 

試してみました。

 

https://kan-kikuchi.hatenablog.com/entry/Oculus_Go_UnityChan

 
https://airmore.com/jp/install-apk-files-on-android.html
 

 

このあたりをやってみて

 

うまくいきました

 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/a2ef473c-14c1-e464-8c69-050aad99bd17.png)
f:id:jinsights:20180719004616j:plain

 

一番上に、UnityちゃんCRSがインストールされています。

 

動画は見せられませんが、うまくいきました！

 

 

Androidもいけそう！

 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/d5197aa3-9df1-064b-0885-088eda34621b.png)


 

ただ、公式のUnityちゃんライブステージ

 

出てたんですがね・・・

 

 

カメラが固定されていて結構見やすいものでした。


 

 

これすげーよ！

 

 

是非試してみてください！！
AzureMachineLearning　プロジェクト作成開始。

お疲れ様です。

 



 

ところで、今日の会社のミーティングで

 

AzureのAI、MLに火がともりました。

 

やらなければならない！

 

 

今までは、IoT全般のセンサー関連を勉強したり、

画像解析　CNN関連やOpenCVが来るに違いないとせっせとやったり

Unityの開発に終始したり、

 

実務の仕様書やらなんやら協力会社様の調整やら、試作というなの開発を

がんがんやっていたわけですが。。

 

 

これも必要だ！

 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/4bd0aa43-3dd4-74f5-7eb0-47a828fa843a.png)

 

ということで

 

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/3d39c838-2499-42f7-eee5-dc228ddaadf4.png)


 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/73503f6b-52e7-ba3b-cf61-131fa9d625d4.png)


 

AzureMachineLearning実践ガイド

MS　CognitiveService実践ガイド

 

両方とも自腹購入しちゃいまいた。

 

なんといっても我慢できなかったのと、

今日買いたかったこと。

 

本屋に行く暇なかったのと、Amazonでも大した本なさそうだったんで

これを即購入。

 

 

さっそくはじめました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/7d83e331-6ed4-7f60-1289-7666d96d0067.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/a3325883-b509-ec5e-f386-e84cd15fd9c4.png)

 

とりあえず回帰分析終了。

 

明日より、IoT検定中級試験勉強と並行で頑張ります！！！
Unity × TensorFlow でDL

お疲れ様です。

 

色々試しています。

 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/c1554505-a016-467a-f536-48587876a457.png)



 

他人のブログ見ながら、

 

Unity × TensorFlow で深層学習。

 

 

これは、

 

 

12枚の板の上に、

 

 

黄色いボールが斜面に流れて落ちそうになり

 

始めは落ちたりもするんですが、

 

深層学習で、勉強していって、

 

 

落とさなくなる、

 

というのを試して見ました。

 

 

 

私のMacだとかなりつらい模様ですが、

 

GPUかなり乗せたPCなら、

 

スムーズにいけそうです。

 

 

色々試すと面白そうです。

 

 

2018.2.3追記

なんのことはありませんでした。

 

私が、見ていた映像は、

 

学習している動画でした。

 

正常に動作しました。

 

ちょっとUnityにも興味が出てきました。
【Unity2018】VuforiaでARを試す

おはようございます。

 

だいぶ前に検証したんですが、

更新し忘れていたので記載します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/9b9398d7-51e3-d7f3-8812-650ff106dd80.png)


 

ARマーカーを準備して

 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/bc92a91f-57d5-15bf-4535-1c67b7dc7a4e.png)

 

名前忘れたけど、

 

なんとかちゃん、

 

 

マーカーの上に。

 

簡単ですよ。
OpenPose を試してみた

お疲れ様です

 

もう眠いので寝ますが、

 

Windows10Professional

GPU Geforce 1050Ti

 

でフレームレート低めですが、

 

Openpose試せたのでYoutube載せてみました。

 
Openposeの内容は以下に・・・

 
https://leapmind.io/blog/2018/01/22/%E4%BD%93%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%82%84%E5%90%91%E3%81%8D%E3%81%8C%E6%8E%A8%E5%AE%9A%E3%81%A7%E3%81%8D%E3%82%8Bopenpose%E3%82%92%E7%B4%B9%E4%BB%8B/

 
OpenPoseは、コンピュータビジョンに関する国際学会CVPR2017でCMU（カーネギーメロン大学）が発表した、keypoint（特徴点）の検出とkeypoint同士の関係の推定を行う技術です。OpenPoseを使うと、以下のように関節の位置など、人の体における特徴点がどの座標にあるかが分かります。

 

下は私がスマホで試した映像です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/ab1d549c-167e-aafe-4097-83b2727225e1.png)
Watson ×　Unity　初心者でもできる、VR 空間で Unity ちゃんとおしゃべりアプリ　を試してみた

お疲れ様です。

 

かねてより懸案になっていた、

 

VRの開発やUnityの開発、諸々・・・

 

正直、ソリューションの設計関連やっていることもあって

 

勉強する時間がねー。

 

 

自宅に帰っても、家族のフォローが優先になってしまうので、

結構厳しい・・・・・

 

 

そこで、業務時間中の会議の合間にちょこちょこ開発研究することにしてみました。

 
https://www.ibm.com/developerworks/jp/cloud/library/unity/index.html

 

 

WatsonとUnityを一緒に学習できるということに・・・

 

 

 

あー、あと

 

これもやってみた・・

 
http://singularity-labo.com/feature/24

 

これもUnityちゃんなわけで・・・

 

 

こればっかやってると、

 

最近、〇〇さん変わってしまったね・・

 

って言われそうや…

 

 

 

最近抵抗がなくなってきたのは確かですが・・

 

 

まー面白そうな気もしますしね・・

 

 

 

んで、本題・・

 

Watsonは

 

３つのサービスを利用します。

 

Speechtotext

Texttospeech

coversation(現　Watoson Assistant ）

 

これらを駆使して簡単にできました。

 

 

ちなみに、

coversation のところはひと手間かける必要あるので、

https://qiita.com/yamachan360/items/bcfa10b2d9bf62df8300

 

 

 

ここあたりが参考になります。

 

 

 

ということで、

 

VRアプリでも開発できて、

 

Watsonでも簡単にアプリ作成できました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/ee7897fa-b3b1-8657-d83e-4ec42a47f2cf.png)
GAS利用してDMM英会話の予約メールが届いたら自動でGoogleカレンダーに

お疲れ様です。

 

3時になりました。

 

英会話にご執心の私です。

 

実は、

 

https://eikaiwa.dmm.com/

 

仮契約中なんです。

 

まあ、なかなか英語で会話することなんて今までなかったので、

 

TOEICの実力も錆びるし、おかげで相当辛い想いをしています。。

 

そこで、英会話を申し込んだわけですが・・

 

 

なんと、Googleカレンダーへの追加機能がないじゃないですか・・

 

これないと忘れるよね・・

 

ということで

 

Google Apps Script

 

を利用して、

 

自動登録できるシステムを作りました。

 

 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/3d83118f-61a8-7bcd-7098-209975b1926c.png)
f:id:jinsights:20190502030855p:plain

 

 

こんな感じでGASを書きます。

 

スプレッドシートに

 

 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/b3c62cce-44d4-f1a2-5068-8151a594659a.png)


どの感覚で実行するかを明記するためにトリガーを追加します。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/c1840bb0-fe27-c33f-a132-624410a0157d.png)
 

 

ジャーン、

 

自動でGoogleカレンダーに追加できました。

 

 

この辺りは、

 

 

http://blog.shotarok.com/post/2016-12-09-auto_creation_of_eikaiwa_events/

 

これあたりが非常に参考になります。

 

 

いかに非効率なことをやめるか、、

 

ITエンジニアとかそういう人たちってそれをこそ考えるべきだと思うんですよね・・

 

 

これで、バッチリで英会話勉強できます。
初心者が始めるIoTとNode-RED

お疲れ様です。

 

７月２５日になります。


https://soil.connpass.com/event/94283/

 

Arduinoはよく触っていたのですが、

ラズベリーパイはそれほど触ることもなかったんで、

復習もかねて参加してきました。

 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/e28d0bca-8dc3-eb9c-9c5a-669c9e3e34f2.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/3d27b787-9823-0a36-4275-ab4d5c12ee65.png)


人数は５名程度

SRPに向かいました。


Pythonで開発


Node-REDでゴリゴリ書いて

ラズベリーパイで受ける・・・

光センサー

ほんと初心者の方にはいい勉強会だったと思います。
YOLO V3（人生は一度きり V3）の検証

お疲れ様です。

 

先日、Mask　R-CNNのテストを実施したのをブログに書き込みしましたが、

そこそこアクセスありました。

 

いいね！

 

ということで

 

計算量が多いため、Mask -CNNは普通のPCではとても使えないのですが、

比較的使いやすいYOLOの新しいバージョンがリリースされていたので

試してみました。

 

ちなみにYOLOの意味は

 

You Only Live Once

 

人生は一度きり！

 

というスラング用語です！

 
https://qiita.com/chimamedia/items/85259c5587171ad407a0


http://ai-coordinator.jp/yolo-v3-pytorch


ここあたりで、

Windows10 Pro

Conda

Pytorch

wget

git

 

などなどもろもろインストールして

動作確認しました。
 

Webカメラでもいけるし！


動画でもいける！


GPU積んでないPCでも結構いけました。


これは一回試す価値ありますよ！

 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/253124ac-e207-3e79-0694-34f33bc24812.png)

 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194974/9a796127-1be0-d297-1ef1-a0f2f4c62d3d.png)
Reactのコンポーネントとpropsについて

# プログラミングの勉強日記
2020年6月21日　Progate Lv.140
ReactⅡ

##コンポーネント
　コンポーネントは部品やパーツという意味。Reactでは見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせてWebサイトの見た目を作る。今回はコンポーネントにLanguageという名前を付ける。

###コンポーネントの構成

```react:Language.js
import React from 'react'; //Reactのインポート
//React.Componentを継承するLanguageクラスを作成（このクラスがコンポーネント）
class Language extends React.Component{ 
  render(){  //renderメソッドを定義
    return(
      //JSX
    );
  }
}
```

###コンポーネントの表示
　LanguageコンポーネントをApp.jsに呼び出して表示させることで、Languageコンポーネントがブラウザに表示される。JSX内に`<コンポーネント名 />`と書くことでコンポーネントを表示できる。コンポーネントは何度でも表示することが可能。

<img width="852" alt="React.3png.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/8f9c08d2-0175-796d-5e25-19c7c3d23393.png">

<img width="406" alt="React5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/d9e5ac27-ba31-5bd8-f8e6-79526931f06d.png">

```react:Language.js
export default Language; //コンポーネントをexport
```

```react:App.js
import React from 'react'; 
import Language from './Language'; //コンポーネントをインポート
class Language extends React.Component{ 
  render(){ 
    return(
      <div>
        <h1>言語一覧<h1>
        <Language /> 
    );
  }
}
```

##props
　App.jsから各言語の名前と画像のデータをLanguageコンポーネントに渡すことで言語ごとに表示を変えることができる。App.jsから渡すこのデータをpropsという。`props=値`という形でコンポーネントを呼び出す箇所で渡す。

```react:App.js
<Language
  name='HTML&CSS'
  image='https://~'
/>
```

```react:Language.js
render(){
  console.log(this.props);
  return( ... );
}
```
　渡された値は`this.props`で取得できる。`{props名:値}`というオブジェクトになる。

```:コンソール
{
  props:"HTML&CSS",
  image:"https://~~"
}
```

###propsの取得
　`this.props`と書くことで`{props:値}`というオブジェクトを取得できるので、`this.props.props名`とすることで、propsの値を取得できる。

```react:Language.js
<div className='language-name'>
  {this.props.name)
</div>
<img className='language-image' src={this.props.image} />
```

###mapメソッド
　配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッド。JSXをmapを用いて効率的に表示している。mapメソッドで配列の各要素に対して順番に処理を行い表示することができる。

```react:App.js
const languageList=[
  {name:'HTML&CSS', image:'https://~'}
];
...
<div>
  {languageList.map((languageItem)=>{
  return(
    <Lanuage
      name={languageItem.name}
      image={languageItem.image}
    />
  ...
```
Windows 10 の画面2分割や4分割表示

###Windows 10 の画面2分割や4分割表示の設定方法
複数ウィンドウズを開いて「Win」＋「方向キー（上下左右）」を押すとウィンドウがリサイズされて、フルスクリーン、2分割に加え、4分割表示もできる。

下図は２分割のイメージです。
他の組み合わせは全部「Win」＋「方向キー」実現できます。（イメージの貼り付けは省略する）
![画面分割１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/cbbadf6e-7bd6-2c0c-9708-e9975c44126a.png)
(自分用)Flask_5(txtファイルに追記する)

# 項目
1. txtファイルに追記する
2. 閑話休題_txtファイルの任意の中身を削除、又は上書きする

# 1.txtファイルに追記する
```html:html
<form action="/result" method="post">
        <label for="article">投稿</label>
        <input type="text" name="article">
        <p></p>
        <label for="name">名前</label>
        <input type="text" name="name">
        <button type="submit">送信する</button>
    </form>
```
- これは前回もやった入力内容を送るコード
- `article`と`name`にそれぞれ保存している

```python:python
article = request.form["article"]
name = request.form["name"]

file = codecs.open("articles.txt", "a", "utf-8")
file.write(article + "," + name + "\n")
file.close()
```
- こいつを任意のルートに入れればOK
- `article = request.form["article"]`と`name = request.form["name"]`は前回やった通り、入力して保存されたデータを受け取っている
- `file = codecs.open("articles.txt", "a", "utf-8")`の`"a"`は追記するモードの事
- `.write`で書き込むよと宣言し、`(article + "," + name + "\n")`で`,`で区切り、`\n`を入れる事で1行ごとに書き込まれる

# 2.閑話休題_txtファイルの任意の中身を削除、又は上書きする
- `.open()`に入れる読み込みモードは、

> - `r`で読み込みのみモード
> - `w`で書き込みモード(これを使うと完全に上書きされて前のデータは削除される)
> - `a`で一番下に追記されるモード

がある。

```:hoge.txt
foobarfoobar
```
この様なtxtファイルがあった時、

```python:python
open("hoge.txt","w").write(open("hoge.txt","r").read().replace("bar",""))
```
とする事で

```:hoge.txt
foofoo
```
と出来るのだ。

- これは`w`で書き込む前に、`r`でtxtファイルの中身を参照しているから出来ているのである

# 3.終わりに
- 正直最後のまだあんま理解してない
Reactの表示の仕組みとCSSの適用

# プログラミングの勉強日記
2020年6月21日　Progate Lv.140
ReactⅡ

##表示の仕組み
　App.jsに書かれているJSXは最終的にHTMLに変換されることでブラウザに表示される。Reactのコードを実際にブラウザに表示するためには、index.jsとindex.htmlのファイルも必要である。
<img width="670" alt="React.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/6a4255b4-e2c7-cffa-8d51-7699137793a3.png">

<img width="406" alt="React.2png.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/53dad7d7-f25e-cf65-a8a3-30806f8c0648.png">



###App.jsとindex.jsとidex.htmlの関係

```react:App.js
class App extends Component{
  render()
    return(
      <div>
        <h1>HelloWorld</h1>
      </div>
    );
  }
}
```

```javascript:index.js
import App from './component/App';
ReactDOM.rendr(<App/>, document.getElementByld('root');
```
　`ReactDOM.rendr(<App/>`でApp.jsのJSX（`render()`の括弧内の部分）がHTMLに変換されている。

```html:index.html
<body>
  <div id="root"></div>
</body>
```
　`document.getElementByld('root')`で指定したid名の場所に挿入される。index.jsでは`('id名')`を記述する。


##CSSの適用
　JSXは最終的にindex.htmlに挿入されてブラウザに表示する。なので、indx.html内でstylesheet.cssを読み込むとCSSを適用することができる。
　<font color=blue>JSXにクラス名を付ける場合、HTMLと書き方が違う。`className='クラス名'`と書く。</font>
　

```html:index.html
<head>
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <div id="root">
    <!--ここにHTMLが挿入される-->
  </div>
</body>
```

```react:App.js
render(){
  retunr(
    <div>
      <h1='title'>Hello World</h1>
      <p className='subTitle'>Hello React</p>
    </div>
  );
}
```

```css:stylesheet.css
h1{ /*JSXのタグ名を指定してCSSを適用する*/
  color:red;
}
.subTitle{
  color:blue;
}
```

<img width="544" alt="React3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/e5e10a4d-43a0-f99c-5d23-c766f550977c.png">
PHPの環境構築（パスを通すとは）

パスを通すって何？
環境構築って何をすればいいの？

この記事は、PHPの環境構築に関するメモです。
MAMP内のPHPのバージョンを変更する手順を解説します。

## PHPのバージョン確認

ターミナルから、`php -v`コマンドで現在のバージョン情報がわかります。
私の場合、`user`ディレクトリから確認してみると以下の情報が出力されました。

```terminal
$ php -v
PHP 7.4.7 (cli) (built: Jun 12 2020 00:01:12) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.7, Copyright (c), by Zend Technologies
```
続いて、MAMPのディレクトリから確認してみると...

```terminal
$ php -v
php -v
PHP 7.1.33 (cli) (built: Jan 18 2020 13:49:07) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies
```
少し前のバージョンが入っていました。
プログラミング学習にはMAMPを使っていたので、普段使用しているphpのバージョンは`7.1.33 (cli)`ということがわかりました。

## phpのパスの確認

パスとは「ショートカット」とか、「エイリアス」といったの意味です。
ターミナルから、`which php`コマンドで現在のパス情報がわかります。
MAMPで実行してみると、以下の情報が出力されました。

```terminal
$ which php
/usr/bin/php
```

「パスを通す」とは、phpを格納する場所を指定して、使用するphpを選択することになります。
![Screen Shot 0032-06-21 at 5.09.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482880/eb3514bb-d027-6eac-b85c-d43e30173195.png)

Finderからたどってみても、phpが格納されているディレクトリを確認することができます。

## .bash_profileの変更

`home`ディレクトリ（finderで家のマークがある場所）にある`.bash_profile`の設定を変更します。
![Screen Shot 0032-06-21 at 5.42.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482880/d3d7c97b-0682-3faf-9cc5-f71390f048c9.png)
`.`から始まるファイルは隠しファイルなので、`ls -a`コマンドで確認できます。

```terminal
iMac:~ tetsu$ cd
iMac:~ tetsu$ ls -a
.bash_profile		.sh_history		Movies
.bash_sessions		.ssh			Music
```
`vi`コマンドでviエディタを立ち上げます。

```terminal
$ vi .bash_profile
```
viエディタは、最初に「コマンドモード」で立ち上がります。
文字キーをタイプすると、「インサートモード」になり、キー入力が可能になります。
（※一番下に`-- INSERT --`と表示される）

```terminal
export PATH=$HOME/.nodebrew/current/bin:$PATH
eval "$(rbenv init -)"
 export PATH=~/.npm-global/bin:$PATH
 export PATH=/Applications/MAMP/bin/php/php7.4.2/bin:$PATH （※この行を追記してバージョンを指定）
```

編集が終わったら`esc`ボタンで「コマンドモード」に変更して、`:wq`コマンド（保存 & 終了）で編集を終えます。

## パス変更の確認

きちんと`.bash_profile`の変更が反映されているかを確認したい場合は`cat`コマンドを使用します。

```terminal
$ cat .bash_profile
export PATH=$HOME/.nodebrew/current/bin:$PATH
eval "$(rbenv init -)"
 export PATH=~/.npm-global/bin:$PATH 
 export PATH=/Applications/MAMP/bin/php/php7.4.2/bin:$PATH
```
最後に、もう一度MAMPのディレクトリから`php -v`で確認するとバージョンが変更されていることが分かります。

```terminal
$ php -v
PHP 7.4.7 (cli) (built: Jun 12 2020 00:01:12) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.7, Copyright (c), by Zend Technologies
```
無事、PHPのバージョンを変更することができました。

## 参考
[viエディタの使い方](https://prev.net-newbie.com/linux/commands/vi.html)
グリーンハウスのUSBドングル型LTEルータ GH-UDG-MCLTE の接続状態をcurlで取得してみる

COVID-19パンデミックの影響でPIX-MT100が品薄となったこともあり、代替として使えそうな[GH-UDG-MCLTE](https://www.green-house.co.jp/products/gh-udg-mcltec/)を入手してみました。
PIX-MT100もGH-UDG-MCLTEも、USBドングル型ですがルータ機能を内蔵しており、PCやRaspberryPiなどにUSBで接続するとUSBイーサネットデバイスのように認識され、PCにはプライベートIPアドレスがDHCPで割り振られます。
このようなLTEモデムはRaspberryPiを使ったIoTプロジェクトには非常に便利で、EthernetやWiFi接続で動かしていたデバイスに、追加の設定一切なしで、これらのドングルを接続するだけでLTEバージョンが用意できます。

一方、ATモデムであればモデムやSIMの情報をATコマンドで取得できるところ、これらのルータ機能内蔵LTEドングルの場合、標準的なAPIは用意されていません。
ブロードバンドルータのようなWeb設定画面はあるので、少なくともそこに表示されている情報はスクレイピングで取得できるはずです。

さしあたってほしいのは、

- IMEI: モデムに割り振られている一意な番号（絶対ほしい）
- MSISDN: SIMの電話番号（絶対欲しい）
- RSSI: ざっくり言うと電波の強さ

あたりです。
遠隔地に設置したIoTデバイスの台数が増えてくると、IoTデバイス運用中にこれらの情報を取れないと軽く死ねます。

Firefoxの「開発ツール」の「ネットワーク」のタブを見ながら管理画面のページを遷移していると、`cgi-bin/qcmap_web_cgi`というリソースにリクエストが飛んでいるようです。
これをcurlで叩けばほしい情報がとれそうです。

とりあえず、以下のAPIがあることはわかりました。

```shell-session:GetInfo
$ curl -s -d 'Page=GetInfo' -d 'Result=0' http://192.168.225.1/cgi-bin/qcmap_web_cgi | jq .
{
  "Page": "GetInfo",
  "model_name": "AU5700",
  "imei": "3520100xxxxxxxx",
  "software_version": "11-24",
  "my_number": "020xxxxxxxx",
  "Result": ""
}
```

```shell-session:GetHomeStatus
$ curl -s -d 'Page=GetHomeStatus' -d 'Result=0' http://192.168.225.1/cgi-bin/qcmap_web_cgi | jq .
{
  "Page": "GetHomeStatus",
  "curr_connect": "3",
  "connected_network": "DOCOMO",
  "autoconnect": "1",
  "profile_name": "CID1",
  "APN": "biglobe.jp",
  "Searching_mode": "0",
  "PIN": "3",
  "DHCP": "192.168.225.1",
  "DMZ": "0.0.0.0",
  "Model_name": "AU5700",
  "SW_Ver": "11-24",
  "MSISDN": "020xxxxxxxx",
  "Anthena": "3"
}
```

IMEIとMSISDNは`GetInfo`で取得できるようです。

続く...
初心者によるプログラミング学習ログ 351日目

#100日チャレンジの351日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
351日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>昨日1日でやったこと⇩<br>●ブログ1記事作成<br>●プログラミング学習350日目　2.0h<br>・架空LP17日目1.0h(<a href="https://twitter.com/ririru_123?ref_src=twsrc%5Etfw">@ririru_123</a>)<br>・ipad版の制作物部分作成<br>・Udemy:フロントエンド講座1.0h<br><br>時短と、別垢でやる意味がなくなってきたので、こちらに統合<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) <a href="https://twitter.com/ppmp65/status/1274445521482969091?ref_src=twsrc%5Etfw">June 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
CSSスプライトとstepsを使って筋トレをしてみた

webクリエイターボックスさんの記事を参考にして、筋トレ:muscle_tone2:（腕立てふせ）をアニメーションにしてみました。

## イラストレーターで描いたイラストをSVG形式で保存

![Screen Shot 0032-06-20 at 12.03.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482880/7933ed17-1ce6-ebb9-b813-d64b80bdb657.png)

腕を曲げる前と、曲げた後の動きをひとつの画像ファイルとして用意します。

## HTMLとCSSを実装

`pushup`クラスに画像を埋め込んで、動かしていきます。

```html
<h1>WORK OUT</h1>
      <div class="viewContainer">

          <div class="pushup"></div>

      </div>
```

CSSで画像の配置と、アニメーションの動作を記述します。

```CSS
/* push up */
.pushup {
  background: url(../images/person/pushUpMan.svg) no-repeat;
  width: 360px;
  height: 173px;
  animation: play 1s steps(2) infinite
}

@keyframes play {
  to {
    background-position: -840px 0;
  }
}
```
### アニメーションの動き

`animation`の`1s`は、アニメーションの動作時間（秒）を表しています。
`step(2)`は、2段階を繰り返すという意味です。

```css
animation: play 1s（※時間） steps(2)（※コマ数） infinite
```
コマ数を増やせば、それだけ滑らかなアニメーションを作ることが可能です。
最後に`infinite`を指定すると、動作が無限ループになります。

```
background-position: -840px 0;
```
`keyframes `内で1秒ごとに背景を指定の数値分だけx軸でズラす事で、あたかも動きがあるように見せています。

## デモ

実行結果がこちらです。
[デモサイト](https://upstr.me/workout/)

##参考

[CSSスプライトとstepsを使ってアニメーション画像を作ろう](https://www.webcreatorbox.com/tech/css-sprite-steps)
[codepen](https://codepen.io/Guilh/pen/yldGp)
【React Native】外部アプリを直接起動する方法・設定

# はじめに

React Native アプリから外部アプリを直接開く方法について調べたのでまとめます。

iOSとAndroidで若干異なるので注意が必要です。


# 外部アプリを起動するURLが必要

外部アプリを直接起動するためには、基本的に

- 独自のURLスキーム（slack://等）
- ユニバーサルリンク

など予め外部アプリによって定められた起動URLを知っておく必要があります。


# 外部アプリを起動するURLを確認する

ググると情報が公開されている場合もありますが、そうで無い場合は自分で調べる or アプリ事業者に問い合わせる必要があります。


# 自分で起動するURLを確認する方法

自分で調べる場合、アプリを実際にインストールした上で、設定ファイルを確認します。

## iOSの場合

以下のような手順になります。

1. iOS実機にアプリをインストール
2. PCにアプリをコピーする
3. Info.plistファイルを開く
4. CFBundleURLSchemesを確認する


### 1. iOS実機にアプリをダウンロード

普通にappstoreからインストールします


### 2. PCにアプリをコピーする

以前はitunesを使用してiPhoneからアプリデータを吸い出せたのですが、現在はアップデートでその機能がなくなっています。

外部アプリを利用したり、その他の方法でiPhoneからアプリデータを吸い出します。

私は「appSitter」というアプリを使用しました。（Mac）
（ストアアプリでは無いので、ご使用は自己責任でお願いいたします）


### 3. Info.plistファイルを開く

アプリは`.ipa`拡張子になっているので、`.zip`に変更し展開します。

`アプリ名/payload/`ディレクトリに`.app`ファイルがあるので`右クリック＋「パッケージの内容を表示」`で開きます。

その中に`Info.plist`ファイルがあるのでエディタで開きます。


### 4. CFBundleURLSchemesを確認する

```
<key>CFBundleURLSchemes</key>
        <array>
          <string>myapp</string>
        </array>
```

上記のようにkey + valueになっているので、確認します。
複数設定されている場合もあります。

上記例の場合、`myapp://`でアプリを起動することができます。



## Androidの場合

以下のような手順になります。

1. Android実機にアプリをインストール
2. PCにアプリをコピーする
3. AndroidManifest.xmlファイルを開く
4. CFBundleURLSchemesを確認する


### 1. Android実機にアプリをダウンロード

普通にストアからインストールします。


### 2. PCにアプリをコピーする

apkのパスを調べる

```
adb shell pm list packages -f | grep com.example.targetapp
```

得られたパスをもとにpullする

```
adb pull /data/app/com.example.targetapp-1/base.apk
```


### 3. AndroidManifest.xmlファイルを開く

Android　Studioなどで、apkファイルを開き、確認できる


4. `intent-filter`の`URLScheme`を確認する

ただアプリを起動するだけなら、mainのintent-filterを確認する。

- URLScheme: myapp
- URLHost: app

となっている場合 `myapp://app`が起動URLとなる



# アプリインストール済みの場合のみ起動URLを開くよう設定する

アプリが端末にインストールされていない場合、`myapp://`のような独自URLスキームへのアクセスは、意味の無いリクエストになってしまうので、

そのURLを開くことができるかどうかを判定してから実際にURLを開く必要がある。

## Linking.canOpenURLを使用する

URLを開くことができる場合は`true`、ひらけない場合は`false`のPromiseを返す。

公式: https://reactnative.dev/docs/linking


```javascript

const OpenURLButton = ({ url }) => {
  const handlePress = useCallback(async () => {
    // Checking if the link is supported for links with custom URL scheme.
    const supported = await Linking.canOpenURL(url);

    if (supported) {
      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
      // by some browser in the mobile
      await Linking.openURL(url);
    } else {
      Alert.alert(`Don't know how to open this URL: ${url}`);
    }
  }, [url]);
```


## iOSは追加設定が必要

iOSでは、予め独自URLを許可しておかないと`Linking.canOpenURL`が常にfalseになってしまう。


### info.plistのLSApplicationQueriesSchemesに許可するURLスキームを記述する

- info.plistのInformation Property ListにLSApplicationQueriesSchemesを追加する
- LSApplicationQueriesSchemesのTypeをArrayにする
- Valueにxxxアプリのスキームを書く



# まとめ

React Native アプリから外部アプリを直接開く方法についてまとまました。

- 独自URLスキームが必要
- 実機にインストールしたアプリから直接設定を調べることができる
- `Linking.canOpenURL`で判定し処理を分ける必要がある
- iOSの場合は許可するURLスキームを明示する必要がある


---

## 参考（ありがとうございます！）:

- https://qiita.com/nagaoyuriko/items/67c5e262f6e88cd88885
- https://qiita.com/taksatou@github/items/33dd64a83e60567f7004
ProgateのRailsレッスンⅥ反省点

# 今日の反省点（ProgateのRailsⅥをやってみて）

## find_byメソッドの使い方をちゃんと理解してなかった。 
これは特定の投稿を受け取れるようにするメソッド。

```ruby:qiita.rb
@post = Post_find_by(カラム名: params[:content])
```
これでカラム名の投稿を@postが受け取ることが出来る。

## Linkの際、変数変換を使うことを忘れていた。

```ruby:qiita.rb
<%= link_to(post.content, "/posts/#{post.id}") %>
```
学習環境ではeach文のあとだからpostになるという認識。

## form_tagメソッドの意味と使い方。

これは入力フォームを送信するときに使うもの。

```ruby:qiita.rb
<%= form_tag("飛ばすリンク先") do %>
<text area>
< % end %>
```

<text area>タグをdoとendの間に囲む。

##  createアクションの中身
これは中身に書くコードがわからなかったという話。
状況としては、name="〇〇"（じゃあこの場合はcontent）のフォーム入力内容を受け取りたい時。
ハッシュを使って書くんだよね。

```ruby:qiita.rb
def create
@post = Post.new(content: params[:content])
@post.save
redirect_to("/posts/index")
end
```
はい、contentの入力内容を@postで受け取って、保存するね。
そしたら/posts/indexに飛ばしますわ、よろしくってやつですね。

この辺がProgateのRuby on RailsⅥをやってみて出てこなかった。
そして後半の方もわかってなかったので、ⅣとⅤも復習必須。

現在プログラミングを初めて1ヶ月。
7月からスクールに通うので、それまでに基礎を叩き込みたい。
理解が遅くてほんとに悔しいな。。。

努力は必ず報われる。　もし報われない努力があるとすれば、それはまだ努力とは言えない。
CentOS8でdnfレポジトリサーバを構築したい

# はじめに
ローカルで仮想マシンを構築するとき、```yum update```などで時間がかかるのでローカルにyumレポジトリを構築したいと思います。

# 実行環境
OS : CentOS 8

# インストール
```bash
#dnf install -y  httpd createrepo rsync
```

# webサーバの設定
```bash
#systemctl start httpd
#systemctl enable httpd
#firewall-cmd --zone=public --add-service=http --permanent
#firewall-cmd --reload
#echo '<directory "/var/www/html/centos">' > /etc/httpd/conf.d/centos-mirror.conf
#echo 'option +indexes' >> /etc/httpd/conf.d/centos-mirror.conf
#echo '</directory>' >> /etc/httpd/conf.d/centos-mirror.conf
```

# ディレクトリ作成
```bash
#mkdir -p /var/www/html/centos/8/{AppStream,BaseOS}/x86_64/os/
```

# レポジトリ作成
```bash
#rsync -rtpv --delete rsync://ftp.riken.jp/centos/8/AppStream/x86_64/os/ /var/www/html/centos/8/AppStream/x86_64/os/
#rsync -rtpv --delete rsync://ftp.riken.jp/centos/8/BaseOS/x86_64/os/ /var/www/html/centos/8/BaseOS/x86_64/os/
```

# おまけ
今回作成したディレクトリのサイズを確認してみました

```bash
#du -sh /var/www/html/*
9.7G /var/www/html/centos
```

# おわりに
dnfはyumと違って構築が面倒かと思ったんですけどそうでもなかったですね。
React学習 Babel

#Babelとは
JavaScriptのコンパイラであり、トランスパイラです。
ECMA2015(ES6)以降の新しい構文をES5に変換することができます。
ReactのJSXの変換や、typescript等にも利用が可能です。

##インストール
```react
npm install @babel/core @babel/cli @babel/preset-env --save-dev
```
@babel/coreはbabelの本体です。
@babel/cliはbabelをコマンドラインで操作するために利用します。
@babel/preset-envはBabelが変換処理を行う際に利用するプラグインです。
プリセットに関して、以下のようなものは非推奨であり、基本的にpreset-envを用いれば問題ない。
・`babel-preset-es2015`
・`babel-preset-es2016`
・`babel-preset-es2017`
・`babel-preset-latest`

##.babelrcやbabel.config.jsでの設定
babelはそのままでは変換してくれないので、設定方法を明記しておく必要がある。
Babel6までの設定ファイルは、`.babelrc`でしたが、Babel7からは`babel.config.js`が導入された。
`.babelrc`は設定を反映する際に、フォルダ毎に配置する必要がありましたが、
`babel.config.js`はプロジェクトのルートに配置することで、各フォルダに個別の設定を反映させることができます。

```react:.babelrcでプリセットを指定する場合
{
  "presets": ["@babel/preset-env"]
}
```


```react:babel.config.jsでプリセットを指定する場合
const presets = [
  ["@babel/preset-env"]
]
module.exports = { presets ]
```

##コンパイルを行う
以下のように、アロー演算子を利用したソースコードを用意しました。

```react:before.js
const x3 = (n) => n * 3
```

その後、同フォルダで下記コマンドを実行します。

```react:
npx babel before.js --out-file after.js
```

after.jsが作成され、以下のようにES5の構文に変換されます。

```react:after.js
"use strict";

var x3 = function x3(n) {
  return n * 3;
}
```

#corejs@3とは
先ほど導入した`@babel/preset-env`では構文の変換のみを行っており、`generator`や`Promise`等の新しい機能には対応しておりません。
それらの新しい機能を代替コードに変換するためには、新たに`core-js`等をインストールし、設定する必要があります。
`@babel/polyfill`を以前は利用していましたが、Babel7.4.0から非推奨にり、`core-js`にまとめられております。

##インストール
今回は`core-js`の他に`regenerator-runtime`もインストールします。
async-awaitを動かすためには`regenerator-runtime`が別途必要となります。

```react:
npm install core-js regenerator-runtime --save-dev
```

##設定
オプション`useBuiltIns`に`usage`を使用することで、必要に応じて大体コードに変換します。
オプション`corejs`にバージョンを指定します。バージョン2 or バージョン3

```react:.babelrc
{
  "presets": ["@babel/preset-env",{
    "useBuiltIns": "usage",
    "corejs":3
  }]
}
```

```react:babel.config.js
const presets = [
  ["@babel/preset-env",{
    useBuiltIns: "usage",
    corejs: 3
  }]
]
module.exports = { presets ]
```
VSCode, C言語で hello world まで(Windows)

# 流れ
1. gcc(GNU compiler collection) のインストール
2. terminal の操作(実行ファイルの作成
3. launch.json の操作(実行ファイルの適用

# gcc
[MinGW-w64 - for 32 and 64 bit Windows -sourceforge ](https://sourceforge.net/projects/mingw-w64/files/Toolchains%20targetting%20Win32/Personal%20Builds/mingw-builds/installer/mingw-w64-install.exe/download)よりインストール（path を通してください。要再起動。）

# Terminal で実行ファイルの作成
VSCode で c/c++ をインストールし、hello world のコードを

```c

#include<stdio.h>

int main(void){
   printf("Hello World\n");

   return 0;
}
```
などと記入します。この時、拡張子を .c としてください。しかし、この状態で run しても launch: program '' does not exist と表示が出てしまいます。すると、launch.json が開きます。これの program の部分を修正する必要があります。ここには実行ファイルを指定すればよいのですが、そのファイルはまだ存在しないので次の手順に従い、Terminal で作成する必要があります。
まず、先ほど .c で保存したディレクトリ(の前)まで移動します。ここで ls をして Length Name の下に HelloWorld(仮).c が表示されればたどり着いています。続いて、コマンド

```terminal
gcc -o program HelloWorld.c
```

と入力すると、program という名の実行ファイルが作成されます。続いて、

```terminal
./program
```

と入力し、Hello World と出力されれば作成が成功しています。
# json ファイルの書き換え
VSCode 上で run できるようにするためには先ほど述べた通り、launch.json の program の欄を指定する必要があります。 program.exe がある場所を"program": の右に
"${workspaceFolder}/.../program.exe"
と指定してください。run できるようになっているはずです。
hetemlサーバ WAFでのWordPress admin-ajax.php 403エラー 解消方法

## WordPress / heteml - WAF
以下の条件がある場合、hetemlサーバではWordPressで403エラーが発生することが多々あります。

- hetemlサーバのWAFをONの状態
- Siteguard Plug In を利用している

## 解消方法
コントロールパネルにログインして、 WAF設定 > ドメイン一覧 > 詳細を見る > ログ参照 と辿っていき該当エラーログを確認すると親切にも **.htaccessによる除外記述**を書いてくれてるので、コピーして.htaccessに追記すれば解消します。