OmniAICreator/Qiita-1.07M huggingface dataset:
nuxt-tailwindをmodule版に切り替える

## tailwindcssはいいぞ

[tailwindcss](https://tailwindcss.com/)をご存知ですか？CSSフレームワークというよりユーティリティクラス群といった内容で、bootstrapやmaterial design系のフレームワークとは一線を画しています。

何を隠そうわたしゃこのtailwindが大好きでね、もうわざわざ定義済みのコンポーネント付きフレームワークを使って必死にカスタムするより、ReactやVueなんかでコンポーネントは独自に定義しながら、自由に（しかし緩いルールを用いながら）このtailwindでスタイルをつけていくのが実にしっくり来ており、重宝しています。

最近は[採用事例](https://builtwithtailwind.com/)も一気に増えてきており、ちょっぴり嬉しく。
https://send.firefox.com/ もtailwindを利用してますね。

## nuxt.jsにおけるサポート
tailwindcssは[nuxt.js](https://ja.nuxtjs.org/guide/) ではcliからサポートされていて `npx create-nuxt-app ***` のコマンド後、  **?Use a custom UI framework** という選択肢から選ぶことが可能です。既存のnuxtプロジェクトでtailwindを利用の方は、この方法で導入した人が多いのではないでしょうか。
しかし2019/06/11、nuxt.jsの[公式Twitter](https://twitter.com/nuxt_js)からこんな発表がありました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Tailwind CSS is now a command away from your NuxtJS project ✨<br><br>Install the module and get:<br>🗃️ Automatic files creation<br>🧹 PurgeCSS included<br>🚀 PostCSS preset env to stage 1 <a href="https://t.co/IJkPYApxyT">https://t.co/IJkPYApxyT</a></p>&mdash; Nuxt.js (@nuxt_js) <a href="https://twitter.com/nuxt_js/status/1138463642423312391?ref_src=twsrc%5Etfw">2019年6月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

要約しますと、

 - tailwindCSSはコマンドからなくなるよ！
 - module形式で
    - 自動ファイル生成
    - PurgeCSSに対応
    - [PostCSS preset env stage1](https://preset-env.cssdb.org/features)に対応

なるほど。特に嬉しいのは[PurgeCSS](https://github.com/FullHuman/purgecss)を含めてくれてるところです。tailwindはユーティリティクラス群であるため、どうしてもファイルサイズが大きくなりますが、PurgeCSSは利用していないCSSクラスをビルド時に削除してくれます。
最終的にビルドされるファイルサイズが、かなり小さくなるはずです。

https://tailwindcss.com/docs/controlling-file-size/#app

もちろん既存の`create-nuxt-app...` でもPurgeCSSは設定を書けば追加可能ですが、面倒な方は既存のプロジェクトから今回のmodule版に入れ替えてしまう方が楽だと思います。

## module版への切り替え手順

https://github.com/nuxt-community/nuxt-tailwindcss

1. 既存のtailwindcssを削除

```sh
$ npm uninstall tailwindcss
```

2. 既存の設定ファイル及びCSSをリネームor削除

```sh

$ mv tailwind.config.js _tailwind.config.js
$ mv ./assets/css/tailwind.css ./assets/css/_tailwind.css
```

3. nuxt.config.js 内のbuildにある下記内容を削除

```nuxt.config.js
postcss: {
  plugins: {
	tailwindcss: './tailwind.config.js'
  }
},
```

4. 新規でModule版をインストール

```sh
npm install --save-dev @nuxtjs/tailwindcss
```

5. `nuxt.config.js`に `devModules`を定義し、Moduleを追加

```nuxt.config.js
module: [...],
devModules: [
  '@nuxtjs/tailwindcss'
],
```

6. `npm run dev` を実行
7. `tailwind.config.js` と `assets/css/tailwind.css` が自動で生成されるか確認
8. リネームファイルと生成後のファイルを見比べ適宜移行

## PurgeCSS適用後のファイルサイズを比較

`npm run build`し、`dist/_nuxt`内に出来たファイルサイズを比較

|                | nuxt-create-app版 | module版 |
| -------------- | ----------------- | -------- |
| size | 560KB             | 200KB    |

もともとNuxt.jsはファイルサイズが巨大になりがちですが、それでもPurgeCSSをかませることで半分以下にはなりました。
【Vagrant】非常に稀なVagrantの問題が発生した際の解決方法（のうちの一つ）


# TL;DR

`vagrant plugin update`コマンドを実行し関連するプラグイン（今回の場合`vagrant-vbguest`）をアップデートするといけた

# `vagrant up`時にエラー発生

`vagrant up`した際に以下のようなエラーが発生

```
The guest machine entered an invalid state while waiting for it
to boot. Valid states are 'starting, running'. The machine is in the
'unknown' state. Please verify everything is configured
properly and try again.

If the provider you're using has a GUI that comes with it,
it is often helpful to open that and watch the machine, since the
GUI often has more helpful error messages than Vagrant can retrieve.
For example, if you're using VirtualBox, run `vagrant up` while the
VirtualBox GUI is open.

The primary issue for this error is that the provider you're using
is not properly configured. This is very rarely a Vagrant issue.
```

なんか

>  This is very rarely a Vagrant issue.

らしい

# 解決方法

`vagrant plugin update`で関連するpluginのバージョンをあげてみたらうまく動くようになりました

```
>vagrant plugin update
Updating installed plugins...
Fetching: vagrant-vbguest-0.18.0.gem (100%)
Successfully uninstalled vagrant-vbguest-0.17.2
Updated 'vagrant-vbguest' to version '0.18.0'!
```

`vagrant-vbguest`が古かったみたいなのが原因らしかったです

# ほかにも

`vagrant plugin repair`という既存プラグインの修復を試みるコマンドもあるのでこれを先に試してみてもいいかもしれません。

```
>vagrant plugin repair
Repairing currently installed global plugins. This may take a few minutes...
Installed plugins successfully repaired!
```

# おわり

- なんかWindowsUpdateが来るたびに起動しなくなるきがする
【Rails】オリジナルアプリ開発#1

今回、オリジナルアプリとして<b>「個人でサッカーやフットサルを企画、運営ができる」</b>サービスを開発していく。

#開発の流れ

かなりざっくり。今後もう少し１つ１つの項目を具体的にかつ、全体像を掴みたいところ。

- 仕様書

- モック(Moqups)

- 技術の選定

- コーディング

- テスト(RSpec)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

#仕様書
[Google Design Doc](http://please-sleep.cou929.nu/20091116.html) を参照しつつ考察。

- アプリの目的や背景(詳細は省く)

- おおまかな機能(ログイン、ログアウト、企画一覧表示、企画登録、編集、削除、利用するコート情報)

- データモデル構造(データがどのように存在してどのように追加、編集、削除していけばいいのか考える。例えば、Userモデル←「ログイン、参加、企画」時に必要...とか)

- アプリ名(プロジェクトのディレクトリ名をある程度、加味しつつ決める。アンダーバーで繋ぐ兼ね合いもあるから。もしくは、省略形を作る。)

 
#モック
[Moqups](https://moqups.com/)使用。
作成したモック→https://app.moqups.com/1qh4IKrk8m/edit/page/aa9df7b72
デザインよりもページ同士のつながりを優先し作成。

#参考リンク
[ソーサル](https://sosal.me/)
[YUUKI@Laravelエンジニアさんのポートフォリオ作成](https://webnewage.com/portfolio-process)

***
(オリジナルアプリ開発#2に続く)
フリーなワイルドカードDNSサービス

# TL;DR

* Webサーバーのバーチャルホスト設定がしたいけれど、DNSレコードの登録や`hosts`の設定は面倒…
* そんな時に、ワイルドカードDNSサービスが便利かも？


# フリーなワイルドカードDNSサービス

[xip.io](http://xip.io/)や[nip.io](https://nip.io/)あたりが有名どころで、IPアドレスを含んだドメイン名でアクセスすると、その指定したIPアドレスを返してくれるサービスです。

[Free wildcard DNS services for IP addresses](https://moss.sh/free-wildcard-dns-services/)

[nip.io](https://nip.io/)のトップページに例があるので、ちょっと見てみましょう。

> ・ 10.0.0.1.nip.io maps to 10.0.0.1
> ・ 192-168-1-250.nip.io maps to 192.168.1.250
> ・ app.10.8.0.1.nip.io maps to 10.8.0.1
> ・ app-37-247-48-68.nip.io maps to 37.247.48.68
> ・ customer1.app.10.0.0.1.nip.io maps to 10.0.0.1
> ・ customer2-app-127-0-0-1.nip.io maps to 127.0.0.1

こんな感じで、指定されたIPアドレスに名前解決してくれます。


# なにが嬉しいの？

バーチャルホストを必要とするシステムを開発していたり、テストしたりしていると、Webサーバーのバーチャルホストに指定する名前自体の名前解決をどうしようか、けっこうな悩みの種になります。

* DNSレコードを登録するのは…
* そもそもDNSサーバーは…
* いいや、もう`hosts`に書いてしまえ

といったことを、よくやっているのでは？

そんな時に、こういったサービスを利用すると便利かもしれません。


# 例

例えば、以下のようなバーチャルホスト設定を持つApacheを用意します。

```
<VirtualHost *:80>
	ServerName foo.172.17.0.2.nip.io
	DocumentRoot /var/www/foo
</VirtualHost>

<VirtualHost *:80>
	ServerName bar.172.17.0.2.nip.io
	DocumentRoot /var/www/bar
</VirtualHost>

<VirtualHost *:80>
	ServerName hoge.172.17.0.2.nip.io
	DocumentRoot /var/www/hoge
</VirtualHost>
```

ドキュメントルート直下のファイルを作成。

```shell
$ cd /var/www/
$ sudo mkdir foo bar hoge
$ sudo echo foo > foo/index.html
$ sudo echo bar > bar/index.html
$ sudo echo hoge > hoge/index.html
```

確認。Apacheの動作しているIPアドレスは、`172.17.0.2`とします。

```shell
$ curl foo.172.17.0.2.nip.io
foo
$ curl bar.172.17.0.2.nip.io
bar
$ curl hoge.172.17.0.2.nip.io
hoge
```

# 注意点

`xio.ip`はサービスダウンすることで有名らしいですが、このエントリを書いていた時も落ちていました…。

そういう場合は、`xip.io`や`nip.io`を自前で立てるとよいみたいです。

https://github.com/exentriquesolutions/nip.io

しかしですね、自前で立てるとそのDNSサーバーにどうやってアクセスするのかという話がまた（略）。

あと、インターネットアクセスがプロキシサーバー下だと、名前解決だけでなく実際のアクセスもプロキシサーバーが行ってしまうので、悲しい結果になります…。
Javascriptを用いたカウントダウンタイマー

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている[小栗](https://qiita.com/keitaro-o)です。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

2021年の四月までを期限とし、社会に出るまでに、できることをしようという内容で作成しました。

```JavaScript:countdowntimer
          
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
          function countdowntimer(){//関数名を指定
           var countdown = setTimeout(function(){
            var today = new Date();//今日の日時を取得
            var targetDay = new Date('2021/04/01 00:00:00');//期限となる日時を秒まで指定
            var daysBetween = Math.ceil((targetDay - today) / (24*60*60*1000));//Math.ceil(引数として与えた数より大きい数以上の最小の整数を取得) 24時間*60日*60秒*1000で
            var remainDay = (targetDay - today);//残りの日数
            if (remainDay >= 0){
             var h = Math.floor(remainDay / 3600000);//Math.floor(引数として与えた数以下の最大の整数を与える。）
             var h1 = h % 24;
             var m = Math.floor((remainDay - h * 3600000) / 60000);
             var s = Math.round((remainDay - h * 3600000 - m * 60000) / 1000);
             $("#countdown").text("社会人まで"+ daysBetween + "日と" + h1 + "時間" + m + "分" +s + "秒です。");         if ((h == 0) && (m == 0) && (s == 0)) {//指定の日時が来たら、
               clearTimeout(countdown);
               $("#countdown").text("社会に出る時間です。覚悟はいいですか？");
               }
             }else{
               $("#countdown").text("社会人として活躍中です。");
             }
           }, 1000);
          }
       
          countdowntimer();
Node.js Express でのPOSTデータ登録DBエラー処理

#はじめに

やりたかったのは、ブラウザからPOSTされたデータをAJAXで受取DBに登録すること。
登録自体は、なんとかなったがエラー処理に苦労したので情報を残しておこうと思う。
わかっている人から見れば、わかってないなと思われそうなプログラムを組んでいると思うが、そこは恥を忍びたい。。。

#プログラム構成

ソースコードは以下の通りだが、説明するとブラウザからの通信をindex.jsで受信し、DBに登録するクラスのインスタンスを生成し、登録を行う。DBに登録するクラスは、派生クラスであり、dbcontroler.jsを継承している。

```javascript:index.js
    try {
      var controler = new tablename_control();
      controler.insertNewNumber(req.body)
      res.json({msg: 'sucess'})
    } catch(error) {
      res.status(500).send(error);
    }
```
当初は、tablename_controlクラスのメソッド内でエラー発生時にthrow new Error()で対処できると思ったが、結論はダメだった。これが問題点１。

```javascript:tablename_control.js
module.exports = class tablename_control extends Dbcontroler {
    constructor () {
        super();
    }

    async insertNewNumber(data) {
        try {
            data = JSON.parse(JSON.stringify(data));
            var sqls = ['SQL生成処理'];
            await this.insertRecode(sqls);

        } catch(error) {
            this.logger.error(error);
            throw new Error('SeverError');
        }
    }
}
```
ここでは、JSONデータからSQLを生成して継承元のSQL実行メソッドを実行している。


```javascript:dbcontroler.js
module.exports = class dbcontroler extends Logger {
//省略

    async insertRecode(sqls) {
        try {
            await this.client.connect();
            for (const sql in sqls) {
                await this.client.query(sqls[sql],(err,result) => {
                    if(err) {
                      throw err;
                    }
                );                
            }
        } catch(error) {
            throw error;
        } finally {
            this.client.on('drain', this.client.end.bind(this.client));
        }
    }
}
```
そして、最後のソースは上記の通り。これがではQueryでエラーが発生した場合、サーバが落ちてしまう。
これが問題点２。

Queryで発生したExceptioinはcallback関数内に渡されるがそこでThrowしても、どこでもcatchしてくれなかった。これが非同期処理の大変なところではないだろうか。

#修正結果

色々紆余曲折した結果下記のように修正。

```javascript:dbcontroler.js
module.exports = class dbcontroler extends Logger {
//省略

    async insertRecode(sqls) {
        try {
            await this.client.connect();
            for (const sql in sqls) {
                await this.client.query(sqls[sql]);                
            }
        } catch(error) {
            throw error;
            this.client.on('drain', this.client.end.bind(this.client));
        }
    }
}
```
Queryにcallbackを指定しないことで、Queryで発生したExceptionをキャッチ出来た。
これで問題点２はクリアできた。

だが、tablename_control.jsでのthrow new Error()をindex.jsがキャッチしてくれない問題１が発覚した。
この原因は（おそらく）、index.js内でDB登録処理が終わる前にブラウザにレスポンスを終えてしまったことにあると思う。ほんとにわたしは非同期処理に慣れていないのがわかった。

以下のように修正。

```javascript:index.js
    var controler = new winnum_control();
    controler.insertNewNumber(req.body)
    .then( () => {
      res.json({msg: 'sucess'})
    })
    .catch((error) => {
      res.status(500).send(error);
      return;
    });
```
DBの登録処理を待つように変更。
これで、DB登録エラー時にHTTPステータスコードを500に設定することができた。

ちなみにerrorをsendしているが、これは正しくブラウザ側で受信出来ていない。原因はわかないので放置している。

#最後に
色々調べた結果、このような形になったがこれが正解なのか、スタンダードなのかわからない。
わたしは、try{}catch(){}の書き方になじみがあるので、このソースに違和感はあまり感じないがもっといい方法があるかもしれない。

今後そんな方法に出会ったらまた、投稿しようと思うかもしれないが、今のところはこの方法でいこうと思う。

また、私のようなはまり方をする方は少ないかもしれないが、もしそんな方がいてこの投稿が参考になってくれたら幸いです。
オリジナルSSM

###SSHでログインせずに、PrivateServerの運用の利便性の向上を図る

AWSの管理ツールにSSMがありますが、エージェントの導入など設定や要件で利用できないときに踏み台サーバを利用せずに、VPC内のPrivateserverにリモートでスクリプトを実行できるようにし、運用上の利便性の向上を図ります。
環境の注意点としては、
EFSを利用して、すべてのServerからスクリプトを共有できるようにしている
EC2ではrootでのloginが許されていないので踏み台server側はec2-userで下記のssh.shを実行する
実行するスクリプトはフルパスで宣言する
jqコマンドのインストールが必要です。

```
curl -o /usr/bin/jq -L https://github.com/stedolan/jq/releases/download/jq-1.5/jq-linux64
chmod a+x /usr/bin/jq
```


```/efs/sh/ssh.sh

#!/bin/bash

echo "Which script to run?"
read str

private_ip=$(curl -s http://169.254.169.254/latest/meta-data/local-ipv4)

private_ips=(`aws ec2 describe-instances --filter Name=instance-state-name,Values=running | jq .Reservations[].Instances[].NetworkInterfaces[].PrivateIpAddresses[].PrivateIpAddress -r | grep -v ${private_ip}`)

for  private_ips in ${private_ips[@]}

do
  echo "$private_ips start $str"
  ssh $private_ips "sudo sh $str"
done

echo "finish ssh.sh"
exit 0
```

自身のprivateipを取得し、VPC内のすべて(自身以外)のprivateipを取得することができる
for文で配列の要素数繰り返しプライベートIPを表示する

``` /efs/sh/get-instance-id.sh
#!/bin/bash

instance_id=$(curl -s http://169.254.169.254/latest/meta-data/instance-id)
echo "$instance_id"
exit 0
```
SSHの接続先のinstance-idを取得し表示する
`curl -s`進捗状況を隠すことができる

```

```putty tarminal.
[ec2-user@ip-10-0-0-12 sh]$ sh /efs/sh/ssh.sh
Which script to run?
/efs/sh/get-instance-id.sh
10.0.1.19 start /efs/sh/get-instance-id.sh
i-0e3cc8ab872a6c0bd
10.0.1.93 start /efs/sh/get-instance-id.sh
i-0d858669815bdb2f1
finish ssh.sh
```

上記の結果から踏み台Serverから各PriveteIPでloginせずに、スクリプトの実行をすることができている
ssh.shで複雑にするより実行するスクリプトを作りこんだほうが確実でしょう。


loginせずに、プロセスを停止できるといいかも

```/efs/sh/start-process.sh
#!bin/bash

echo "Which process to stop?"
read str

PIDs=$(ps aux | grep $str | grep -v grep | awk '{print $2}')
for PIDs in ${PIDs[@]}
do
    kill $PIDs
    echo "${PIDs} Stoped"
done
exit 0
```

putty tarminal.

```
[ec2-user@ip-10-0-0-12 sh]$ sh /efs/sh/ssh.sh
Which script to run?
/efs/sh/stop-process.sh
10.0.1.19 start /efs/sh/stop-process.sh
Which process to stop?
COMMAND
PID Stoped
/efs/sh/stop-process.sh: line 9: kill: PID: arguments must be process or job IDs
10.0.1.93 start /efs/sh/stop-process.sh
Which process to stop?
COMMAND
PID Stoped
/efs/sh/stop-process.sh: line 9: kill: PID: arguments must be process or job IDs
finish ssh.sh
```

簡単にプロセスの停止ができるはデバック時に役立ちそう

プロセスを実行、標準出力、エラーをすべてファイルに格納する

```/efs/sh/start-process.sh
#!/bin/bash

echo "Which process to run?"
read str

instance_id=$(curl -s http://169.254.169.254/latest/meta-data/instance-id)
sh $str > /efs/logs/$instance_id/sh_logs 2>&1 &
echo "$instance_id Execution $str"
exit 0
```

putty tarminal.

```
[ec2-user@ip-10-0-0-12 sh]$ sh ssh.sh
Which script to run?
/efs/sh/start-process.sh
10.0.1.19 start /efs/sh/start-process.sh
Which process to run?
/efs/sh/get-instance-id.sh
i-0e3cc8ab872a6c0bd Execution /efs/sh/get-instance-id.sh
10.0.1.93 start /efs/sh/start-process.sh
Which process to run?
/efs/sh/start-process.sh
i-0d858669815bdb2f1 Execution /efs/sh/start-process.sh
finish ssh.sh
```

`tail /efs/logs/i-0e3cc8ab872a6c0bd/sh_logs`参照する

```
i-0e3cc8ab872a6c0bd
```
NAOのデフォルトの姿勢を設定する

NAOの電源を入れてNAOが起動し、インストール済のアプリが起動条件トリガーによって起動するのに、NAOが座ったままな時、確認するべきこと。
悩んで時間を無駄にしてしまったのでメモです。

#オートノマスライフ

<img width="1440" alt="スクリーンショット 2019-06-17 12.21.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325419/05eef201-51dc-e55a-85a8-cf7ea3c2f606.png">

オートノマスライフがオフになっている状態だとNAOは立ち上がりません。
ロボットWebページにアクセスし、「**デフォルトでライブの状態**」を**ON**にしましょう。
逆に、スペースの関係などでNAOを座ったままの状態にしたいときはここをOFFにしておけばOKです。


みみっちい・・・
かつての文字コード

*文字コードについて解説する機会があった際に使ったレジュメ用をメモです*


# 日本の文字コード

- 最近はutf-8のがんばりで平和
- それまではいろいろ戦乱

## 1バイト文字の文字コード

### ASCII
*American Standard Code for Information Interchange*

-  ・・・こんな略だったっけ？ってぐらい何の略か調べないランキングに入る当たり前の単語。
- 現在でも主流
- WindowsもMacもLinuxもみんなこれ
- この上にutf-8やShift-JISなどが組み合わさる


### EBCDIC
*Extended Binary Coded Decimal Interchange Code*

- IBMがメインフレーム（昔はIBM製などの大きいUnix機とかありました）で使用していた文字コード
- これに後述する漢字コードを乗っけてました


## マルチバイト文字の文字コード

### EUC
*Extended Unix Code*

- UnixでASCIIと組み合わせて使われた。
- utf-8に変更しそびれたレガシーなサーバーで極稀に生息する。
- だいたいPHP4ぐらいまで。
- テキストをShift-JISとして開こうとして半カナだらけに化けたら、たぶんコレ

### JIS

- 一部のメインフレームでASCIIと組み合わせて使われた。
- ASCIIと文字コードがぶつかるのでASCIIとJISの切り替えを示すコードが必要
- Shift-JISとして開こうとして$マークのエスケープシーケンスが混ざった文字化けしたら、たぶんコレ

### Shift-JIS

- MS-DOSやWindowsでASCIIと組み合わせて使われている。
- JISのコードマップをASCIIとぶつからない様にシフトさせた。

### utf-8

- 今の主流
- Windows10でようやくutf-8に変更できそう（？）
- だいたいこれでソースは書いておけば間違えない

## その他

### utf-16

- これで統一しよう的な動きあったが文字によってバイト数が可変する欠点。
- utf-8に主流を持っていかれた。
- 今となっては希少
[Ruby] よくある区切り文字で文字列を分割したい

自分的よくある区切り文字： カンマ、改行、半角スペース、全角スペース

```ruby
> str = "hoge fuga,piyo\nfoo  bar, baz　hogehoge"
> str.split(/[,\n\p{blank}]+/)
 => ["hoge", "fuga", "piyo", "foo", "bar", "baz", "hogehoge"]
```

## `\p{blank}` ？

Unicodeの文字プロパティの指定方法で、半角/全角スペースに対応しています。

参考（blankについては書いてません :bow: ）：
[Unicodeの文字プロパティを指定した正規表現をみてみる（ECMAScript2018）](https://blog.tes.co.jp/entry/2018/06/29/145450)

スペースに改行も含む `\p{White_Space}` がありますが、別に扱うことも多いのでblankを覚えたらよさそう。
LaravelのセッションにDynamoDBを使用する方法

# はじめに
Laravel5.8から、セッションストアにDynamoDBが追加されたので、（公式見ても全く判らなかったので）使うまでにやったことを残しておきます。

# 手順
## テーブル作成

自動で作ってくれるコマンドなどは存在しないので、自分で作成する。

```bash
aws dynamodb create-table --table-name=[your session table name] --attribute-definitions AttributeName=key,AttributeType=S --key-schema AttributeName=key,KeyType=HASH --billing-mode PAY_PER_REQUEST
```

AttributeNameはLaravelのCacheManagerがデフォルトでkeyを入れてくるので、keyにしている。
この値は変えても問題は無いです。
（私は変えました）

## config/cache.phpに設定を追加

最初からLaravel5.8を使用しているとdymanodbの設定が入っているけど、そうでない場合は存在しないので、以下を追加する。

```php
'dynamodb' => [
    'driver' => 'dynamodb',
    'key' => env('AWS_ACCESS_KEY_ID'),
    'secret' => env('AWS_SECRET_ACCESS_KEY'),
    'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
    'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
    'endpoint' => env('DYNAMODB_ENDPOINT'),
],
```

iamで制御すると思うので、
driver、region、table以外の設定は大抵不要。

expireされる時間とか設定したい場合、以下のコードを読むと何が追加で設定可能かが判ります。

https://github.com/laravel/framework/blob/5.8/src/Illuminate/Cache/CacheManager.php#L227-L251

私の最終的な設定はこうなりました。

```php
'dynamodb' => [
    'driver' => 'dynamodb',
    'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
    'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
    'attributes' => [
        'key' => env('SESSION_KEY', 'key'),
        // 'expiration' => env('SESSION_LIFETIME', 0), <- ミスリード：カラム名の指定
    ],
],
```

※keyを書き換えてるのは、デフォルトのキー名が判らなかったためです。。

## .envのSESSION_DRIVERを書き換える

SESSION_DRIVER=dynamodb

# 終わりに
dynamodbはリクエストの並列実行にとにかく強いので、使える条件が整ってるときは積極的に使っていきたいです。
ActivityScenarioのactivityにアクセスする

getActivityのような関数が見当たりませんでしたが、以下のコードで直接Activityにアクセスできます。
Test Labでスクショを撮影したい場合にactivityへアクセスする必要があったので調べました。

```
        val activityScenario = ActivityScenario.launch(MainActivity::class.java)
        activityScenario.onActivity {
            ScreenShotter.takeScreenshot("top1", it)
        }
```
(2019年版)CentOS6系標準搭載のPython2.6にpipとvirtualenvをインストールする手順

マイカイワスレル。

nssのアップデートはcurl: (35) SSL connect errorを防ぐために必要

```
$ sudo yum update nss
$ curl -O https://bootstrap.pypa.io/2.6/get-pip.py
$ sudo python get-pip.py
$ sudo pip install virtualenv
```

あとは思う存分virtualenvします。
[JS]'use strict';(厳格モード)で、未宣言の変数代入をエラーとして検出してくれる件

# 厳格モードとは
strictは直訳すると「厳格、厳しい」の意味。
結論から言うと、これはこのJavaScriptの関数内を厳格モードとして扱う、という意味とのこと。
ここで言う厳格モードとは、より**的確なエラーチェックが行われるモード**のことで、これまでエラーにならなかったような、曖昧な書き方をされていたものも、きっちりエラーとしてチェックしてくれたりするものだそうです。

曖昧な書き方でも、実行できているなら良いじゃん…
なんて思われるかもですが、そういったコードは後々修正追加をしていくと、出どころ不明のエラーとなってしまったりするので、なるべくキッチリかけてるに越したことはありません。

## 宣言されていない変数への代入
[以前](https://qiita.com/riotam/items/1946c4049dbe926cf217)書いた通り、宣言されていない変数はグローバル扱いされるが、これを厳格モードで実行すると…

```javascript:非厳格モード
const a = 1;
b = 2;

console.log(a); // => 1
console.log(b); // => 2
```

```javascript:厳格モード
'use strict';

const a = 1;
b = 2;

console.log(a);
console.log(b);
// => Uncaught ReferenceError: b is not defined at window.onload
```
厳格モードでは、しっかりエラーとしてキャッチしてくれている。

さらに…

```javascript:出力しなくてもエラー
'use strict';

const a = 1;
b = 2;

console.log(a);
// => Uncaught ReferenceError: b is not defined at window.onload
```
console.logで、bを出力しなくてもエラーが出る。
つまり、代入した時点でエラーとして検知している様子。
【メモ：CakePHP2系】指定したviewまたはレイアウトを呼ぶ

###CakePHP2系で他のメソッドでも同じビューを使いたい

```php5:view.ctp
// app/View/Users/hoge.ctpを呼ぶ
$this->render('hoge');
//または、
$this->render('/Users/hoge');
```

###特定のレイアウトを使いたい

**あるコントローラ全体で特定のレイアウトを使う**

```php5:UsersController.php
// app/View/Layouts/hoge.ctpを呼ぶ
public $layout = 'hoge';
```

**あるメソッドだけ特定のレイアウトを使う**

```php5:UsersController.php
public function hoge() {
    // app/View/Layouts/hoge.ctpを呼ぶ
    $this->layout = 'hoge';
}
```
最近のサクラエディタのインストーラー入手

# きっかけ

昔からWindowsでのテキストエディタとしてサクラエディタを愛用している。（かれこれ10年くらい？多分大学のころから使ってる）
もはや`サクラー`と言ってもいいのではないか？

このほど、PythonのソースをIDEで開くほどではない感じで開きたいとことがあったのだけど、入っていたサクラエディタが古くてPythonの表示で弱い(´・ω・｀)
何せ、古いインストーラーを後生大事に使っていた状況だったのだ。

サクラエディタのポータルが古いインストーラーのダウンロードページのままだからと言ってこれはおかしいと思ったので、ちゃんと確認したところ、やはり最新の状況はところどころ違っていた。

# SourceForgeからGitHubへ

一番の違いは、ソース管理がGitHubへ移ったこと。
一応Releasesのところから、各バイナリは落とせる模様。
https://github.com/sakura-editor/sakura/releases

本体のexeはこのページのzipで落とせばよい。
readmeを読めばインストールに必要な手順も分かるので問題ない。

ただ、私はこれだけでは満足しない。(-_-)/~~~ピシー!ピシー!

```
64bitバイナリはないんかなー　あってもええやん？今時
```

ということで、GitHubのwiki（なぜか目次は英語）を読んでみるとやはり何かある。

# 最新の64bitバイナリの入手

恐らくこれは安定板ではないので、どっかにバグがあること覚悟で使うべきなのかもだけど、入手できる方法を発見。

最新のソースからビルドしてダウンロードできるようにする仕組みがある様子。
知らないサービスだなΣ(ﾟДﾟ)
https://ci.appveyor.com/project/sakuraeditor/sakura/builds/23386955

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57515/e4f9f250-6778-ee4c-7616-7bc7cb152007.png)

上記のリンクをクリックすると、ビルドが始まる。
ビルドが成功したら、以下のリンクをたどって、インストーラーで入手できる(　´∀｀)bｸﾞｯ!

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57515/b8447cf1-5073-b93e-9a5e-a90abbec3551.png)

# インストール後

無事Pythonの表示に対応してました。(*´▽｀*)
[JS]宣言されていない変数に何かを代入すると、グローバル変数として扱われる件

# サンプルコード
とあるエラーにはまって色々調べたら、**JavaScriptでは、宣言されていない変数に代入をすると、グローバル変数が作成される**、ということを知ったので、サンプルコードとともに共有しておきます。

```javascript:グローバル変数,ローカル変数,未宣言変数への代入
const a = 1; //グローバル変数を宣言した変数に代入
b = 2; // 未宣言の変数に代入

(function(){
	const c = 3; // ローカル変数を宣言した変数に代入
})();

// それぞれを出力
console.log(a);
console.log(b);
console.log(c);
```
このコードでは、「a」「b」「c」にそれぞれ「1」「2」「3」を代入しています。
それぞれの変数は、「グローバル変数宣言済み」「未宣言」「ローカル変数宣言済み」となっています。実行してみると…

```text:実行結果
1
2
Uncaught ReferenceError: c is not defined at window.onload
```
このようになります。
3行目のローカル変数が出力されないのは分かりますが、実は未宣言の2行目は普通にグローバル変数として扱われています。
# 未宣言の変数は警告も出ない
ご存知の通り、未宣言変数はエラーの潜在的な原因になり得ることから、わざと未宣言変数に代入して、グローバル変数に使う…というのは望ましくない。
しかし、誤って書いてしまった場合、警告も何も出ずに処理されてしまうので、気がつきにくいなと思いました。
対策としては、「use strict」で厳格モードにするなどして、対応すると良いそうな。

厳格モードについては、[こちら](https://qiita.com/riotam/items/afe5366cc20c4a322f1e)に書いています。
かんたんな疎通確認

```bash
echo -n "" > /dev/tcp/[IP or Url]/[Port]
```
このコマンドで簡単に疎通確認ができます。
通っていたら、コマンドの実行が終了します。
逆に終了しなかったら、通っていないということです。

グーグルでやってみました。

```bash
echo -n "" > /dev/tcp/www.google.jp/80
```
pushdとpopd

# 最近、知名度が低いpushdとpopd
- 老兵が当たり前だと思ってたコマンド
- 最近はGUIや様々なインタフェースが進歩してコマンドラインだけで作業することが少なくなった
- バディ作業しているとき、何気に使うと「なにそれ、ちょっとかっこいい」と自惚れられる

## pushdとpopdの機能
ディレクトリ位置をスタックして、任意のタイミングでスタック位置に戻れる機能（たぶん）

## pushdとpopdの使い方の例
現在のディレクトリをスタックする
```pushd .```

作業するためルートディレクトリに移動
```cd /```

作業を終えて、元のディレクトリに戻りたい
```popd```


## Windows7でもOK
```
C:\Windows\system32>pushd .

C:\Windows\system32>cd \

C:\>popd

C:\Windows\System32>
```
- Windows10も大丈夫なはず（たぶん）

## pushdとpopdの用途
- 手順などで「現在のディレクトリをコピーして保存」などがあればこのコマンドにすると良い
Redshiftの接続クライアントツールの比較

Windows環境からAWSのRedshiftに接続するためのクライアントツールを
いくつか触ってみた。  

# 検討の条件
- 無料で利用できる
- Windowsで使える
- 検索結果がグリッド形式で見られる

# クライアントツール
## SQLWorkbench/J
AWSが[公式に接続ツールとして紹介](https://docs.aws.amazon.com/ja_jp/redshift/latest/mgmt/connecting-using-workbench.html)している

存在しないテーブルにselectなどちょっとしたエラーが発生すると
それ以降のSQLが失敗するようになってしまう。
参考：[エラーの後にロールバックしなければいけない理由](https://postgresql.g.hatena.ne.jp/iakio/20081120/1227202633)
rollbackを発行すると正常につながるようになるのだが、何かと面倒。
重い。

公式ページ：[SQL Workbench/J - Downloads](https://www.sql-workbench.eu/downloads.html)

## QueryEditor
AWSのWebコンソール上にある機能。
ブラウザで実行するためインストール不要。

使うためには以下の条件を満たす必要がある。
- ノードタイプがDC1.8xlarge、DC2.large、DC2.8xlarge、DS2.8xlargeのどれか。
- 「拡張されたVPCルーティング」がOff。
今回では利用したRedshiftがDS2.largeであり、条件を満たさなかったため不採用。

## A5SQL Mk2
OracleDBやPostgreSQLなど多様なDB接続に対応した無償（寄付募集中）のツール。 
Redshiftに対応していると記載はされていない。
ver2.12.xだとつながるが、ver2.13.xだとつながらなかった。
date型が2000/1/1固定になってしまうので注意。
公式サイト：[A5:SQL Mk-2](https://a5m2.mmatsubara.com/)

## pSqlEdit
無償のPostgreSQLクライアント。
Redshiftに対応していると記載はされていない。
SQLWorkbench/Jより軽く、テーブル名の補完等も効く。
エラー時にはrollbackが必要な点は同じ。
公式サイト：[A.Ogawa's home](http://www.hi-ho.ne.jp/a_ogawa/)

## Aginity Workbench for Amazon Redshift
Redshit専用のツール。
データの分散状況を見るなどRedshiftならではの機能があるらしい。
メールアドレスを登録しなければならなかったので、面倒に感じて試さなかった。
公式サイト：[aginity workbench](http://www.aginity.com/products/aginity-workbench/)

## DBeaver Community Edition
OracleDBやPostgreSQLなど多様なDB接続に対応したツール。
有償版と無償版がある。
正式にRedshiftに対応している。
Athenaにも対応している。
起動に時間がかかるが、動けば軽い。
キーワード補完やアカウントによる色分けなど、機能が多彩。
公式サイト：[DBeaver Community](https://dbeaver.io/)

# 結論
DBeaverを採用。
- 正式にRedshiftに対応している。
- OracleDBにつなぐ時に使っているA5SQLと操作が似ているので戸惑いが少ない。
　Ctrl+Enterで実行。Ctrl+Spaceで補完候補など
VScodeのPylintの出力先

## VScodeのPylintの出力先の設定
Windowsで別のアプリケーションで、環境変数に"HOME"を使用しているものがあり、VSCodeでPylintを実行すると"HOME"フォルダに、勝手に".pylint.d"フォルダが作られてしまう。

解決策
環境変数に"PYLINTHOME"を追加し、出力先を指定する。
指定したフォルダに".pylint.d"フォルダが作られるのではなく、直接.statsファイルが生成される。
numpyは同じ次元の要素数でないとtypeが変換される。

numpyで配列を作成していたら型が思わぬ変換をされていてハマったので忘備録
どうも要素数が同じでないとnp.arrayで作成した要素がlist型に変換されるようだ。

<img width="1274" alt="スクリーンショット 2019-06-17 11.34.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54774/4049f896-23da-0060-0b40-7baa7b810521.png">
HomebrewとHomebrew-caskのインストール

# HomebrewとHomebrew-caskのインストール
Macにパッケージ管理ソフトであるHomebrewとHomebrew-caskをインストールしたときのメモ

## Homebrewのインストール

### Homebrewインストールコマンド
- 管理権限のあるアカウントでターミナル起動
- 余計な雑念を捨て以下を実行

```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

### Homebrewの動作確認

```
brew
```
コマンドがずらっとでてくる（はず）。

### Homebrewのバージョン確認

```
brew config
```

## Homebrew-Caskのインストール

### Homebrew-caskインストールコマンド
HomebrewはCUIが中心なので、アプリケーションを入れたいならHomebrew-caskをインストールする。

```
brew install cask
```
これで、brewにcaskオプションが使える様になる

### Homebrew-caskの動作確認

```
brew cask
```

### 基本的なHomebrew-caskのコマンド

- Homebrew-caskで入れられるアプリを探す
```brew cask search```

- 探したキーを元にHomebrew-caskでアプリケーションをインストールする（Google Chromeの場合）
```brew cask install google-chrome```

- Homebrew-caskでのインストール済みのアプリケーションのリストを表示
```brew cask list```
Twitterのconsole.logを取り戻す

# console.logが出ない

どのツイッターのページでもいいので開発ツールを開いて`console.log`を実行して欲しい。

```javascript:console.logの実行結果
> console.log("hello")
< undefined
```

なんと`console.log`の結果が出力されないではないか:rage::rage::rage:
ツイッター社はJavaScriptの標準関数を置き換えて開発者に嫌がらせしているようだ。[^1]

# console.logを取り戻す

```javascript:console.logを取り戻すスニペット
(function regainConsoleLogFromTwitter() {
 if (!/^https?:\/\/twitter\.com/.test(document.URL)) return;

 var iframe = document.getElementsByTagName("iframe");
 if (iframe.length) {
  iframe = iframe[0];
 } else {
  iframe = document.createElement("iframe");
  document.body.insertAdjacentElement("beforeend", iframe);
 }
 console.log = iframe.contentWindow.console.log;
})();
```

iframeから正常な`console.log`を持ってきて`console.log`に上書きする。

```javascript:console.logの実行結果
> console.log("hello")
  hello
< undefined
```

正常な動作を取り戻せた:heart_eyes:

[^1]: `console.log`の値がツイッター社にツイートされている疑いすらある。
kubectl execでやや複雑な処理を実行したい

`kubectl exec`でコンテナ内でやや複雑な処理を実行させたい場合、ヒアドキュメントを使うと簡単だったのでメモ。コンテナ内にあらかじめスクリプトを配置しなくても済む。

## やり方

以下のように書く。

```shell:コマンド
kubectl exec -i mypod bash <<'EOC'
echo hello
echo world
EOC
```

```shell-session:実行例
$ kubectl exec -i mypod bash <<'EOC'
> echo hello
> echo world
> EOC
hello
world
$
```

- `-t`オプションをつけると`Unable to use a TTY - input is not a terminal or the right kind of file`と警告がでるの`-i`だけでよい
- この例はコンテナ内に`bash`がある前提なので、ない場合は`sh`を使う。

以下のようにもかけるが、ヒアドキュメントのほうが見やすい。

```shell
kubectl exec -i mypod -- bash -c "echo hello; echo world"
```

### 変数の展開

変数をコンテナの中に入る前に展開したい場合`<<EOC`とする。コンテナの中で変数を使いたい場合は`<<'EOC'`とする。

コンテナの外で変数を展開したい場合は以下。

```shell:コマンド
myworld="outer world"
kubectl exec -i mypod bash <<EOC
myworld="inner world"
echo hello
echo ${myworld}
EOC
```

```shell-session:実行例
$ kubectl exec -i mypod bash <<EOC
> myworld="inner world"
> echo hello
> echo ${myworld}
> EOC
hello
outer world
$
```

コンテナの中で変数を使いたい場合は以下。

```shell:コマンド
myworld="outer world"
kubectl exec -i mypod bash <<'EOC'
myworld="inner world"
echo hello
echo ${myworld}
EOC
```

```shell-session:実行例
$ kubectl exec -i mypod bash <<'EOC'
> myworld="inner world"
> echo hello
> echo ${myworld}
> EOC
hello
inner world
$
```

### 関数とかif文とか

関数とかif文とかも使える。リターンコードもとれる。

```shell:コマンド
kubectl exec -i mypod bash <<'EOC'

set -eu
set -o pipefail

myfunc () {
  echo "hello world $1"
}

for i in `seq 1 10`; do
  myfunc $i
  if [ $i -eq 5 ]; then
    exit 99
  fi
done

EOC
```

```shell-session:実行例
$ kubectl exec -i mypod bash <<'EOC'
>
> set -eu
> set -o pipefail
>
> myfunc () {
>   echo "hello world $1"
> }
>
> for i in `seq 1 10`; do
>   myfunc $i
>   if [ $i -eq 5 ]; then
>     exit 99
>   fi
> done
>
> EOC
hello world 1
hello world 2
hello world 3
hello world 4
hello world 5
command terminated with exit code 99
$ echo $?
99
$
```

## 参考リンク

- [SSHで一気にコマンドいろいろ投げたい](https://qiita.com/matsudatakashi/items/55250a708bd769372c24)
swagger.yaml から Swagger サーバーを自動生成して GAE にデプロイする仕組みを作ってみた

## 概要

![スクリーンショット 2019-06-16 15.50.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/a13011ec-892a-5ee7-9397-6d1f466d8012.png)


swagger.yaml を GitHub に push すると CircleCI 経由で Swagger サーバーを Google App Engine (GAE) にデプロイされる仕組みを作ってみました。

swagger-codegen を使うと swagger.yaml から API ドキュメントとモックサーバーを生成することができます。GitHub で swagger-codegen で生成したサーバーサイドのコードを管理して Webhooks を使ったデプロイをする方法もありますが、生成に必要な swagger.yaml だけをソース管理した方が管理しやすいので、その仕組みを作ってみました。

## 完成物
今回は [Swagger Editor](https://editor.swagger.io/) で最初に入力されている Petstore のものをそのまま使いました。

![スクリーンショット 2019-06-15 22.54.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/97753401-4218-d2c4-e0e8-5b8fdeb6e8eb.png)
API ドキュメント

![スクリーンショット 2019-06-15 22.54.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19698/06eec7f8-d663-c364-a669-7eb5d34fa106.png)
モック API

## 使用技術

### GitHub

swagger.yaml を管理して CircleCI と連携します。

### CircleCI

GitHub に push されたときに Webhooks を受け取って、swagger-codegen によるビルド 〜 GAE へのデプロイまで行います。

### swagger-codegen

swagger.yaml から Swagger サーバーのコードを生成するために用います。今回は Docker Hub に上がっているものを使いました。

GitHub: https://github.com/swagger-api/swagger-codegen
Docker Hub: https://hub.docker.com/r/swaggerapi/swagger-codegen-cli

### Google App Engine

Swagger サーバーのデプロイ先として Google App Engine を利用しました。

## コードと使い方

コードは全て [tanabee/swagger-deployment-template](https://github.com/tanabee/swagger-deployment-template) にあげています。使い方は [README.md](https://github.com/tanabee/swagger-deployment-template/blob/master/README.ja.md) に書きました。

[Orbs](https://circleci.com/docs/ja/2.0/using-orbs/) を使ったら GCP の service_account.json などのプロジェクト固有の設定ファイルを repo に置かなくて設定できてよかったです。yaml もかなり少ない行数で書けます。

```yaml:.circleci/config.yml
version: 2.1

orbs:
  gcp-cli: circleci/gcp-cli@1.5.0

jobs:
  build:
    machine: true
    steps:
      - checkout
      - run: mkdir swagger
      - run: docker run --rm -v ${PWD}:/local swaggerapi/swagger-codegen-cli generate -i /local/swagger.yaml -l nodejs-server -o /local/swagger
      - gcp-cli/initialize
      - run: cp ./app.yaml swagger/app.yaml
      - run: gcloud app deploy swagger/app.yaml --no-promote --version=1
```
 
CircleCI は不慣れなので、もっと良い書き方あればプルリクください :bow: 

## まとめ

GitHub, CircleCI を組み合わせて GAE にデプロイする仕組みができました。 Fork して簡単に使えるようにしていますので、気になる方は触ってみてください。プルリクもお待ちしてます！

## 関連記事
- [Swagger x Heroku で手軽に API モック＆ドキュメントを作る](https://qiita.com/tanabee/items/e6cedfcc75a4e50e3ad2)
- [GitHub の特定のラベルが付いた issue の登録時に Slack に通知するツールを作ってみた](https://qiita.com/tanabee/items/9c074741418a1789dfde)
- [スプレッドシートに OKR を書くとツリー構造で可視化されるツールを作ってみた](https://qiita.com/tanabee/items/3c17dcdbb8efb7afe212)
Homebrewでdockerをインストール

# 配布されたMacにDockerを入れる
Dockerの導入は直接公式サイトに行って入れる方法と、Macパッケージ管理ソフトを使っていれる方法がある認識。
今回、Homebrew-caskを使っていれたので、そのときの覚書きメモメモ。

*前提：HomebrewとHomebrew-Caskが導入済み*

## お約束

```
brew update
```

##Dockerを入れる

```
brew cask install docker
```

## 動作確認

```
docker run -d --name web1 -i -t -p 88:80 nginx:latest
```
localhost:88にアクセスしてみてnginxの画面でてきたら成功

・・・簡単すぎて不安になる老兵。
エクセルでJAVAアプリを超簡単生成！「ワンダーロボ」Gridと関数静的テーブルの設定方法

今回はGridの設定方法について説明します。


###ステップ1.Gridの設定方法
###ステップ2.関数静的テーブルの設定方法

---
###ステップ1.Gridの設定方法
最初に、Gridの設定方法を説明します。

###1-1.画面設計書に記載
まずは、画面設計書で設定します。赤線で囲った範囲を、画面詳細設計書に記載します。
<img width="1128" alt="01.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/80e0cdff-4d0f-6c6f-02fe-8400c8beddf9.png">

#####[項目説明]
・範囲：グリッドの表示範囲を、設定します。（左上側のセルID~右下側のセルID）
・グリッドタイトル：グリッドを設定し、項目名をGridの1行目に設定します。
・高さ自動調節：画面の下側にオブジェクトが存在しない上で、画面の高さに合わせてGridの高さを自動調節します。
・グリッド表示のみ：「はい」に設定すると、Grid全体が表示のみになります。
・グリッド最大行数：Gridの最大表示件数
・グリッド修正不可列：Gridの表示のみの例
・グリッド初期ソート順：Gridの表示順の設定
・グリッド行操作：行の追加・削除を制御
・自動Query：「実行」を指定するとデータを自動的に検索し、Gridに表示します。

<img width="1128" alt="02.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/59f6a546-de8a-46b9-2c8c-be3b8afb4866.png">

###ステップ1-2.インポートして確認
実際に開発環境にログインし、設計書ファイルをインポートして確認します。
SaaSForceシステム===>「システム」===> 「開発設定」===> 「システム自動構築」

SaaSFroceの開発環境にログインし、設計書ファイルをインポートします。そして、利用画面で反映されているか確認して完了です。
<img width="1128" alt="04.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/2f94adef-0b07-2c92-0486-b7086abdc328.png">
---
###ステップ2.関数静的テーブルの設定方法
次に、関数静的テーブルの説明をします。まずは、画面設計書で設定します。
<img width="1128" alt="07.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/c44c19c7-cd9c-b04b-3f5a-4b8ac41da134.png">

####2-1.shape（図形）に設定

#####[項目説明]
・データ元：データベース運用設定、テーブルからデータを取得して取得条件は、入力が必須ではありません。
・配置：取得したデータを対応する項目に配置する
・静的テーブル：静的テーブル名はグリッドと同じでヘッダーの第1列のセル位置は静的テーブル全体を表すために使用
・項目：検索機能をトリガーとする項目名
・セル結合：静的テーブル内の指定された列の指定された行を結合
※例）「B11」結合、条件は「B11」⇒「B11」列の同じデータを結合
「C11」結合、条件は「B11,C11」⇒[C11]列と[B11]列の同じデータを結合
・小計：指定された列の合計
・合計：指定された列の合計
・入力制御：指定された列に入力制御を設定
・サイズ設定：静的テーブルの幅と高さを設定
・改ページ設定：静的テーブルが複数ページで表示する場合の設定方法
・関数設定：静的テーブル内の指定された列の関数を設定
・CSS設定：CSSスタイル、「スタイル設定」シートに定義されたスタイルID
・文字色設定：文字列の色を設定
・フッター値設定：静的テーブルのフッター値を設定
・フッター背景色設定：フッターの文字色を設定
・フッター文字色設定：フッターの文字色を設定
・奇数行背景色：奇数行の背景色を設定
・偶数行背景色：偶数行の背景色を設定

####2-2.インポートして確認
実際に開発環境にログインし、設計書ファイルをインポートして確認します。
SaaSForceシステム===>「システム」===> 「開発設定」===> 「システム自動構築」
#####ユーザー利用画面表示例↓
<img width="1128" alt="08.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/62f93646-7a9a-9425-93c7-c7ffbc29acde.png">
Android on ROCK64でusb wifiアダプタで無線接続する

## tl;dr
- [tp-link TL-WN725N](https://www.amazon.co.jp/dp/B008IFXQFU) を接続

```
adb shell
# 以下からはandroid内のshell
su
insmod /system/lib/modules/8188eu.ko
# ID 0bda:8179 が認識されていることを確認
lsusb
svc wifi enable
```

## 環境
- ROCK64 V2.0
- [Android 7.1.2 Stock Image \[microSD Boot\] \[Rooted\] \[20171204\]](https://wiki.pine64.org/index.php/ROCK64_Software_Release#Android_7.1.2_Stock_Image_.5BmicroSD_to_eMMC.5D_.5BRooted.5D_.5B20171204.5D)


## 問題発生
ROCK64にはwifi機能は付属していないため、有線接続またはwifiアダプタでネットに繋ぐことになる。
早速、家にあった[buffalo WLI-UC-GNM2S](https://www.buffalo.jp/product/detail/software/wli-uc-gnm2s.html)を挿してみるがwifiがオンにできない。
「wifi設定からwifiのトグルスイッチをオンにする→勝手にオフになる」という症状だった。
ふむ...？ドライバがナイノカナー？？(適当)

[公式サイト](https://store.pine64.org/?product=usb-wifi-802-11bgn-rtl8188eu-for-rock64)やいくつかの記事から8188euのchipsetを使ったwifiアダプタが使えるらしいことがわかったので以下を購入。
[tp-link TL-WN725N](https://www.amazon.co.jp/dp/B008IFXQFU)
しかし、使用したイメージではただアダプタを挿しただけでは使えなかった。
全く同じ症状が出ている。どうしたものか。

## やったこと
色々試しつつやったので正確な順番は不明

- ROCK64を有線で繋いである状態
- `$ADDR` はROCK64のIPアドレス

```
adb connect $ADDR:5555
adb devices -l
# 繋がっていることを確認
adb shell dmesg
# dmesgコマンドが使えるらしいのでみてみる。
adb logcat
# いろんなlogが吐かれるので、wifiの操作をしてみる。
# ここらへんのログ保存するの忘れた。
```

ログをみている感じだと、やっぱりドライバがないっぽい？ことが分かり、andoridの中身をみてみることにした。

- `$TID` はROCK64のtransport id
  `adb devices -l`した時に表示される

```
adb -t $TID shell
# 以下からandroid内のshell
# 8188euがないことを確認。まず何も表示されなかった
lsmod
# 8188eu.koがあることを確認
# .koファイルがandroidのカーネルモジュールらしい
ls /system/lib/modules/
# rootにログイン
su
cd /system/lib/modules/
# ドライバをインストール
insmod 8188eu.ko
# 8188euがリストにあることを確認
lsmod
# しかしwifiがオンにならない
```

ここでそもそもusbデバイスとして認識されていないのではないかと思いつく

```
# アダプタを抜き挿ししてlsusbコマンドで ID 0bda:8179 を認識することを確認
# 2回目で認識した(最初は認識されてなかった。ナゼなの...)
svc wifi enable
# 途中でsvcコマンドというのを知ったので使ってみた。
# wifiがonになった！
```

## 8188eu.koと一緒に置いてあったドライバ
ここにあるドライバを使うアダプタなら、同様な作業を行えばいけるのでは...?(保証はできない)

```
8188eu.ko
8188fu.ko
8189es.ko
8192cu.ko
8192du.ko
8723au.ko
8723bs.ko
8723bu.ko
8812au.ko
8822bs.ko
8822bu.ko
bcmdhd.ko
rk29-ipp.ko
vcodec_service.ko
```

`8812au.ko`は[公式で売ってるアダプタ](https://store.pine64.org/?product=rock64-usb-3-0-dual-band-1200mbps-wifi-802-11abgnac-rtl8812au-adapter)があるので使えるのではないだろうか。

## 備考
今回使用したアダプタ「tp-link TL-WN725N」は、購入時期によっては技適マークがシールでアダプタ本体に貼ってあるらしい。そのシールを剥がして使った場合、日本の電波法に違反するようなので注意。
買ったやつは外箱裏面にシールが貼ってありました。
詳細は以下のページを参照。
[TL-WN725Nをご購入のお客様へ](https://www.tp-link.com/jp/attention/20170914.html)
とりあえずdockerでgolangを環境をサクっと

# とりあえずdockerでgolang

速攻でgo言語をサクっと動かしたいときに叩いたコマンドを覚書したメモメモ。
*dockerサービスが稼働している前提です。*

## dockerでサクっと
公式コンポーネントを使ってサクっ立ち上げます。

### dockerコマンドで以下を実行

``` cmd:docker
docker run -it --rm golang:alpine /bin/sh
```
これで、dockerの中で golangサーバーのコンテナが立ち上がり、そのコンテナのシェルに入れる。

### golangのバージョン確認
dockerのコンテナのshに入り込んだら、とりあえずgolangのバージョン確認あたり叩いてみる。

``` cmd:/bin/sh
/go # go version
go version go1.10.2 linux/amd64
/go #
```

__[参考]コンテナのサイズ__
*golang:alpineはalpine（軽量linux）にgolangを載せたdocker公式コンポーネント。
でもalpineのくせに376MByteは結構大きいですね。
参考までに nginx/alpineは18MByte。*

### goのソースの格納先
このコンテナのディレクトリ構成は以下みたいなので、srcの下(/go/src)にコードを入れればよさげ

``` cmd:/bin/sh
/go # ls -l
total 8
drwxrwxrwx    2 root     root          4096 May  4 04:04 bin
drwxrwxrwx    2 root     root          4096 May  4 04:04 src
/go #
```

### 普通に実行できる
もし格納したのが /go/hogehoge.go だった場合。

``` go:/go/hogehoge.goの実行
go run /go/hogehoge.go;
```
AWS Summit Tokyo 2019に行ってきました。

# [AWS Summit Tokyo 2019](https://aws.amazon.com/jp/summits/tokyo-2019/)に行ってきました。

いくつか公演を聞いて、それらから得られたキーワードをいくつか紹介します。

聞いたののは以下の公演

|開催日|公演名|
|:-------|:----------|
|2019/06/13|AWS で実現する攻めのシステムモニタリング|
|2019/06/13|IoTデザインパターン（2019版）|
|2019/06/13|制作・管理・アーカイブ・配信までエンドツーエンドのAWSメディア最新事例|
|2019/06/13|Amazon Redshiftの運用管理|
|2019/06/13|CircleCI CEO ジム・ローズが語るCI/CDの未来|
|2019/06/13|AWSのマネージドサービスを活かした Kubernetes 運用とAmazon EKS によるクラスタのシングルテナント戦略について|
|2019/06/13|Amazon Alexa 音声インターフェースへの新しい挑戦。スマートホームを実現するAWS IoT|
|2019/06/14|Kubernetes on AWS（Amazon EKS実践入門）|
|2019/06/14|EKSで構築するグリーのエンターテインメントシステム|
|2019/06/14|Amazon RDS におけるパフォーマンス最適化とパフォーマンス管理|
|2019/06/14|めざせ！サーバレスプロフェッショナル|
|2019/06/14|Going Deep on Amazon Aurora with MySQL Compatibility|




# AWS で実現する攻めのシステムモニタリング

一般的なAWSの情報収集と解析手法について何と何を使えばよいという説明でした。

CloudWatch, CloudWatch Logsで収集、Insights, Elasticsearch, Athenaで検索、
Kibana, QuickSightなどで可視化するという流れの説明でした。

# IoTデザインパターン（2019版）

IoTのクラウド活用。

AWSからどうやってプログラムの配布・更新を容易にやるかといった話題でしたが具体的な内容が多かったのでIoTやっていないとわかりませんでした。

# 制作・管理・アーカイブ・配信までエンドツーエンドのAWSメディア最新事例

TVなどのメディアの話で、編集室で編集していたものをクラウドで編集できるようにし、属人的な作業からの解放であったり、オンプレからクラウドに変えて画像処理のCPU使用率の効率化・コストダウンに成功した話などユーザ目線での話だったのでわかりやすかったです。

今後はシステム会社でなくてもシステム構成などわかるようにならなければいけない。
ユーザからはベンダーの専門知識がないことへの懸念がある。と印象うけました。

# Amazon Redshiftの運用管理

ピークタイムのバッチとアプリケーションのリソース割り当て設定など説明がありました。

以下、紹介があった運用に役立つ機能です。

* Auto Analyze 自動的に統計情報を更新する
* Auto Vaccum Delete 削除領域の解放: 稼働中に実行され負荷が上がったら解放処理は一時中断される
* Auto WLM クエリに割り当てるメモリを自動化する

# CircleCI CEO ジム・ローズが語るCI/CDの未来

アジア、日本のシステム開発が増えている、CircleCIの利用者もUSに次ぐ第2の市場である。

本番環境でテストするということの勧め。テストが終わったらLBを切り替えてリリースする。
デプロイ方法を共通化して公開している。CircleCIが管理しているOrbsというデプロイスクリプトを使えば他のシステムでのデプロイも容易となる。

# AWSのマネージドサービスを活かした Kubernetes 運用とAmazon EKS によるクラスタのシングルテナント戦略について

freeeのSRE部門でKubernetesの運用をシングルテナントにして開発部門に任せることに成功した話でした。

freeeはマイクロサービスとしてコンテナ上にアプリケーションを構築しているが、それの数が増えSREでの管理が追いつかなくなっているので開発部門と運用の切り分けをした事例の話でした。

規模が増えるとSREの負荷はあがると思われるのでこういったアプローチはどんどん増えるのだろうと思いました。

# Amazon Alexa 音声インターフェースへの新しい挑戦。スマートホームを実現するAWS IoT

スマートリモコンを開発したラトックシステムの開発奮闘記のような内容でした。
テレビリモコン操作では、テレビ局の名称を俗に何と呼んでいるかなどのアナログの情報が必要だったりしたそうです。

# Kubernetes on AWS（Amazon EKS実践入門）

Kubernetesを使うための基本的な手順の説明でした。
cliが便利であるとか。

# EKSで構築するグリーのエンターテインメントシステム

k8sを使える環境が進化してEKSとなった。
EKS便利だがECSの方が費用は安い。

# Amazon RDS におけるパフォーマンス最適化とパフォーマンス管理

次のプロセスでPDCAを回す。

* Monitering パフォーマンス
* Discovary 問題発見
* Analysis 修復するためのチューニング計画をたてる
* Resolution 解決

しかし、パフォーマンスの問題は検知できても問題の原因までわからないことが多い。
次を使って確認する。

* データベースロード.チャート 動いているリクエストの数、vCPU数とあっているか
* カウンターメトリクス.チャート OSよりDBの中のスタッツ
* Top Nディメンション.テーブル 問題となっているSQLを見つけられる

PostgreSQLのQuery Plan Managementはすごい統計情報を自動更新する。

# めざせ！サーバレスプロフェッショナル

Lambdaを使った開発方法を全般的に説明して、デザインパターンなども紹介しました。
かなりボリュームがあり、資料が公開されるのを待っています。

# Going Deep on Amazon Aurora with MySQL Compatibility

AuroraについてAuroraの実装内容などを説明しました。

s3を使った6台のストレージクラスタがあり高可用性を実現している。

複数のAZをまたぎ保存し、1つのAZが落ちても書き込みサービス継続、3つのストレージクラスタが落ちても読み込みサービスの継続ができる。
書き込みは全てのストレージに書き込みが行われなくても終了レスポンスを返せ、高速性を実現している。もし、一部のクラスタでエラーとなれば他のクラスタから正しいデータを取得して修復する。

*Aurora Serverless* というサービスもできた。
API経由でDBにアクセスできるためodbcなどを使わずにもLambdaアプリケーションを作れる。
Wahoo GPS bicycle computer

マイポータル
https://qiita.com/carpenders/items/adb743f0a308f6786c73
検索
Wahoo ELEMNT elevation problem
wahoo
https://support.wahoofitness.com/hc/en-us/articles/115000441324-Why-am-I-Seeing-Elevation-Differences-in-My-Ride-Data-
strava
https://support.strava.com/hc/en-us/articles/115001294564
https://support.strava.com/hc/en-us/articles/216917707-Bad-GPS-Data-What-Why-How
https://support.strava.com/hc/en-us/community/posts/208836527-Correct-and-Edit-bad-GPS-points-in-an-Activity
その他
https://wahoofitness.yonyx.com/y/conversation/?id=086402d0-53dd-11e8-8f6c-bc764e10d166
https://www.reddit.com/r/bicycling/comments/933dy5/wahoo_elemnt_bolt_altitude_issues/
https://groups.google.com/forum/#!topic/wahoo-elemnt-users/L7skAUrsVwk
https://groups.google.com/forum/#!topic/wahoo-elemnt-users/cPRM8NnCohw
https://www.bikeforums.net/electronics-lighting-gadgets/1123247-wahoo-element-bolt-speed-elevation-accuracy-issues.html
https://forum.bikeradar.com/viewtopic.php?t=13088965
https://singletrackworld.com/forum/topic/wahoo-bolt-elevation-temperature-weirdness-rma/
https://red-route.org/articles/how-fix-strava-activities-with-incorrect-gps-data
git commitのコメント　日本語文字化けを自動でなくそう

# git commitするたびにキレそう
1. cmd（コマンドプロンプト）開いて、git commitして、vimが開いて（デフォルトの場合）よし書くぞ～
2. 日本語を書く
3. 文字化け
4. イラつく

## じゃあ毎回忘れずに文字コード変えたら
- それは面倒

# 自動用への解決策
## バッチファイルの作成
1. cmd_utf8.batを作成 （バッチファイル名は適当で）
2. なかみはこれ（Shift JISで保存してね）

```
set LANG=ja_JP.UTF-8
```

## 自動になるように設定（以後、自己責任で）
1. regeditを開く
2. \HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Command Processorへ移動
3. 新規→文字列値
4. AutoRun　という名前
5. 右クリック→修正
6. 値はバッチファイルの絶対パス（対象ファイルをShift押しながら右クリック→パスのコピーで簡単にパスを取得可能）

以上

# 確認

![cmdキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319891/9227bd2a-fcb1-9ebc-854d-b9dfc8ecc7c8.png)

上記のような感じで勝手に実行される

## 注意
- cmd開くたびに実行されるんで気を付けてください
プログラム初心者のためのC#入門 #11 ポリモーフィズム

# #11 ポリモーフィズム
**ポリモーフィズム**は，同じ名前のメソッドなのに，それを呼び出すクラスによって挙動が変わるというものです．ポリモーフィズムという名前で意識をしたことはなくても，皆さんは既にポリモーフィズムを扱っています．

前回の例です．

```PolymorphismSample.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace PolymorphismSample
{
    abstract class Animal
    {
        public string sound;

        public Animal(string sound)
        {
            this.sound = sound;
        }

        public void MakeSounds()
        {
            Console.WriteLine(sound);
        }
    }
    class Dog : Animal
    {
        public Dog() : base("Bow wow") { }
    }
    class Cat : Animal
    {
        public Cat() : base("Meow") { }
    }
    class Bird : Animal
    {
        public Bird() : base("Chirp") { }
    }

    class Program
    {
        static void Main(string[] args)
        {
            Animal[] animals = new Animal[] { new Dog(), new Cat(), new Bird() };

            foreach (Animal animal in animals)
            {
                animal.MakeSounds();
            }
        }
    }
}
```
```:出力結果
Bow wow
Meow
Chirp
```
`animals`内の要素全ての`MakeSounds`メソッドを呼び出すと，メソッドの名前が違うわけでもないのに違う文字列が出力されています．これこそがポリモーフィズムです．
ここで大事なことは名前を正しく付ける事と，名前通りに実装することです．これはポリモーフィズムに関係なく重要な事ですが，名前と実装が違うと利用者が混乱するので名前はよく考えて付けるようにしましょう．
さて，上の例ですが，出力する文字列を変えているだけで処理の内容はで基底クラスで決めてしまっています．しかし，処理の内容をクラスによって変えたいという場合もあります．そういう時はメソッドを**オーバーライド**しましょう．

##オーバーライド
オーバーライドは基底クラスのメソッドを，派生クラスで上書きすることです．

```PolymorphismSample.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace PolymorphismSample
{
    abstract class Output
    {
        public abstract void OutputMethod(int num);
    }

    class PlusOne : Output
    {
        public override void OutputMethod(int num)
        {
            Console.WriteLine(++num);
        }
    }
    class PlusTwo : Output
    {
        public override void OutputMethod(int num)
        {
            Console.WriteLine(num + 2);
        }
    }
    class Double : Output
    {
        public override void OutputMethod(int num)
        {
            Console.WriteLine(num * 2);
        }
    }

    class Program
    {
        static void Main(string[] args)
        {
            Output[] outputs = new Output[] { new PlusOne(), new PlusTwo(), new Double() };

            foreach(Output output in outputs)
            {
                output.OutputMethod(5);
            }
        }
    }
}
```
```:出力結果
6
7
10
```
メソッドに`override`修飾子を付けると基底クラスの実装を上書きすることができます．しかし，オーバーライドすることができるのは`abstract`，`virtual`，`override`のうちのどれかが付いているメソッドだけです．また，`override`修飾子と共に`sealed`修飾子が付いているメソッドはオーバーライドできません．

次回は[カプセル化](https://qiita.com/17t7037t/items/c7abd0e22ef6e1ef33c1)について説明します．
[win][Eclipse]JSP体験 　WIP


#環境構築

このあたり参考に。
https://qiita.com/nenimigi/items/48fcf6f4c9408820266d

Eclipse 2019-03の最新版を使用した。
Javaの列からFull Editionを選択しダウンロード。
http://mergedoc.osdn.jp/

pleiadesというフォルダをzip解凍して作成し、好きな場所に設置。


#Eclipse起動

フォルダの中のeclipse.exeを実行する。
もちろんフォルダ名変えてもよい。

[好きなパス]\pleiades-2019-03-java-win-64bit-jre_20190508\pleiades\eclipse

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64334/2bdfcda9-68dc-3cc8-c01b-3a9eab873784.png)
[AE] インデックスプロパティではなくレイヤー連番を割り当てる

#忘れそうなのでメモ

レイヤーに名に
ほにゃらら001って作って複製すると、自動で連番が出来ますよね。
ほにゃらら001
ほにゃらら002
ほにゃらら003
といった具合。
その連番を参照させたらめちゃめちゃ便利なるなと。
グループ毎に割り当てられるし。

```jsx
var src = thisLayer.name;
var int_data = src.replace(/[^0-9]/g, '');
var myNum = Number(int_data);
```
Golangで構造体をJSONに変換してPOSTする

# ポイントまとめ
Golangで構造体をJSONに変換してからPOSTするまでの流れのメモ
ポイントは以下の通り
1. JSONに変換できるように構造体を定義
2. Content-Typeをapplication/jsonに指定
3. JSONをbytes.Buffer型に変換して送信

# サンプルコード
```go
package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"net/http"
)

// test server
const URL = "http://localhost:8000" 

// sample structure
//// ポイント1
type Sample struct {
	ID   int    `json: "id"`
	Name string `json: "name"`
}

func main() {
	// build sample structure
	sample := new(Sample)
	sample.ID = 0
	sample.Name = "hoge"

	// encode json
	sample_json, _ := json.Marshal(sample)
	fmt.Printf("[+] %s\n", string(sample_json))
	
	// send json
	//// ポイント2, 3
	res, err := http.Post(URL, "application/json", bytes.NewBuffer(sample_json))
	defer res.Body.Close()

	if err != nil {
		fmt.Println("[!] " + err.Error())
	} else {
		fmt.Println("[*] " + res.Status)
	}
}

```

```bash
❯ nc -l 8000
POST / HTTP/1.1
Host: localhost:8000
User-Agent: Go-http-client/1.1
Content-Length: 22
Content-Type: application/json
Accept-Encoding: gzip

{"ID":0,"Name":"hoge"}
```
Ajaxでよく起こるエラー！

今回は備忘録も兼ねて、私がAjax実装するにあたってよくぶち当たった２種類のエラーについてまとめていきます！

参考程度にして頂けると幸いです:relaxed:

######それではスタート！

---
### ➀４０４エラー

###### そもそも404エラーとは？？？
簡単にまとめると、サーバーエラーの1つで、ページが存在していないときに表示されるエラーです。

・ajaxでは、情報を送る段階で起きやすいエラーです！
　例を出しながら見ていきましょう！

```javascript:posts.js
$(function() {
  function buildPost(post){
    var html = `<div class="content">
                  ${post.text}
                </div>`
    return html;
  }

  $("#new_post").on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action');
    $.ajax({
      url: '/posttt',  ←スペルミス
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentData: false
    })
    .done(function(post){
      var html = buildPost(post);
      $('.contents').append(html);
      $('post_text').val('');
    })
    .fail(function(post){
      alert('エラー');
    })
  })
});
```
上記のコードですと、ajaxを送る送信先にスペルミスがありそうですね...

こうした上で検証ツールのコンソールログを確認して見ます！

<img width="377" alt="934787d1c7761fb220e8feb1c1d08466.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438981/76cccc59-5a87-9ec9-9814-653c92266540.png">

404のエラーが発生していますね:joy:

##### 404エラーまとめ：ajaxの送信先URLの記述を確かめる！

----

###➁500 Internal Server Error

###### そもそも500 Internal Server Errorとは？？？
簡単にまとめると、サーバー側に問題があるときに表示されるエラーです。
*ただ5xxエラーはたくさんの種類があるので内容にも種類はさまざまです。

・ajaxでは、送った側（サーバー側）で起きやすいエラーです！
　例を出しながら見ていきましょう！

```create.json.jbuilder
json.text @post.texttt  ←スペルミス
```
上記のコードですと、jsonに情報を読み込むスペルミスがありそうですね...

こうした上で検証ツールのコンソールログを確認して見ます！

<img width="268" alt="41c08edcd77772b800e50fdfea153625.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438981/61bdbc27-6471-14ca-a1cc-23cd4b929960.png">

500 Internal Server Errorが発生していますね:joy:

##### 500 Internal Server Errorまとめ：コントローラやjbuilderの記述を確かめる！

---

ajaxで私がぶち当たったエラーは以上になります！

エラーが起こった時は、
***console.log***
***debugger***
***binding.pry***
と言ったデバックを利用すると解決するスピードも速くなるかと思うので、実践していってみてください！

それではご静聴ありがとうございました！