OmniAICreator/Qiita-1.07M huggingface dataset:
PlayFrameworkのScalaテンプレートでelaf ifを書く

# Scalaテンプレートでelaf ifを書く
Scalaテンプレートで、`else if`を記述する際に、詰まった。

普通に`if else`を記述すると

```
@if(status == 0) {
  <p>OFF</P>
} else {
  <p>ON</p>
}
```

この記述だと、かけそうでかけないelse if

```
@if(status == 0) {
  <p>OFF</P>
} else if (status == 1) {
  <p>ON</p>
} else {
  <p>AWAY</p>
}
```

`@{}`でScala文法として、これだとかける

```
@{
  if(status == 0){
    <p>OFF</p>
  } else if(status == 1) {
    <p>ON</p>
  } else {
    <p>AWAY</p>
  }
}
```
レンタルサーバーでSSH通信をした



レンタルサーバー私の場合はmixhostでSSH通信をしたので、その時の方法をまとめておく。
これができれば、FTPツールを用いなくてもファイルのやりとりができる！

##公開鍵の取得

Macの場合（Linux）元々内部で設定されているものがあるので、ここではそれを利用する

```:ターミナル
$ cd ~/.ssh
$ ls
id_rsa       id_rsa.pub   known_hosts
```
デフォルトでは上記のように鍵が設定されている。
`id_rsa` が秘密鍵
`id_rsa.pub`が公開鍵である。ちなみに、pubはpublicの略。

```:ターミナル
$ cat id_rsa.pub
```

`cat`コマンドで無数の文字の羅列が出てくるのでこれがをコピーする

##レンタルサーバーで公開鍵の登録


mixhostの場合は下記を参照にCーパネルの操作でSSH並びに公開鍵の設定ができる。

https://help.mixhost.jp/hc/ja/articles/115003742132-SSH%E3%81%AE%E3%81%94%E5%88%A9%E7%94%A8%E6%96%B9%E6%B3%95


操作で異なるのは`キーのインポート`があるので、それを選択し、そこで↑の公開鍵を登録する

キーの名前はなんでも構わない。
パスフレーズは`git clone`の時に要求されるパスワードを指定する

その後、インポートした公開鍵を認証`authorized`したら準備は完了である。

その他レンタルサーバーは調べればSSHの設定などで出てくると思われる。

##いざ、SSH通信

再びターミナルに戻り以下コマンドを実行

```:ターミナル
$ ssh ユーザー名@ホスト名
```

これで、設定がうまく行ってSSH通信でレンタルサーバーとやりとりができるようになっているはずである。
ちなみに,`exit`で操作をやめられる

##ショートカットでSSH通信

本来は先ほどのように` ssh ユーザー名@ホスト名`で通信をしなければならないが、ファイルに設定を書き込めばショートカットでSSH通信ができ、ユーザー名もホスト名も覚える必要がなくなる


```:ターミナル
$ vi ~/.ssh/config
```
このコマンドで`config`ファイルの書き換えができる

```:~/.ssh/config
Host 好きな名前
    User {username}
    HostName {IPアドレス or ホスト名}
    IdentitiesOnly yes
```

これでショートカットが登録できた

```:ターミナル
$ ssh 好きな名前
```
これからはこのコマンドで手軽にSSH通信がレンタルサーバーとできる
クラスとインスタンス①

#クラスとインスタンスについて

##クラスとは？
- 値の元となるもの

- 値の共通のルールを定義する
    - ルールとは共通の属性と処理（メソッド）

クラスを使えば、文字列が「こんにちは」や「どうも」という別々のデータを持つことができることと同じように、共通のルールを守った上で個別のデータを作ることも可能である

>**メリット**
共通の情報をまとめ、個別の情報は各データごとに分けることで、開発・管理・保守がし易くなる
>>
何か変更を加えたい時、「どこに何があるか解らない」といったことが無いように情報を整理して置ける

何かを作り上げるときには設計図があり、そこから実体のあモノが生まれる

クラスは、共通の属性と処理を決めるだけで、実体はない
そのため、クラス単体ではデータを扱うことは出来ない

>車の設計図だけでは、車は運転できないことと同じ

```rb:クラスの定義
class Car # クラス名は半角英大文字から始める
  # 変数やメソッドの定義
end
```
だだ、クラスだけでは何もデータを扱うことは出来ない...


##インスタンスとは？
- クラスを元にして作られるデータのこと
- クラスと異なり実体を持つ
- クラスが使用できるnewメソッドを実行して生成する

>車の設計図の例で言えば、設計図から作られて実際に販売されている車のこと

###newメソッド

```rb:newメソッド
# インスタンスを生成し変数で扱う
変数名 = クラス名.new
```
- クラスは、定義しなくてもnewという特別なメソッドをはじめから持っている
- newメソッドは、使用したクラスのインスタンスを生成して返す

```rb:newメソッド
class Car

end

prius = Car.new  # Carクラスのインスタンスを生成
puts prius  # インスタンスを出力
```
上記のようにクラスの定義と通常のRubyの記述は同じファイル内に書くことが可能
作成したクラスからインスタンスを生成できるようになっている

>空のクラスを作り、何の情報も持たないインスタンスを生成しただけなので
値がどのようなデータやメソッドが使用できるかのルールをクラスに記述していない
>>つまり現状では生成されたインスタンスはまだ何もでない
VSCode+Dockerコンテナ内のPHPをデバッグする際、host.docker.internalに接続できない問題の対処

# 概要
VSCodeでDocker Desktop(Windows)上のコンテナをデバッグする際、正しく設定しているつもりが以下のようなエラーが出てしまい正常に接続できない問題が起きていました。
この件について対処出来たためメモしておきます。

```
Xdebug: [Step Debug] Time-out connecting to debugging client, waited: 200 ms. Tried: host.docker.internal:9003 (through xdebug.client_host/xdebug.client_port) :-(
```

# TL; DR
VSCodeのlaunch.jsonに以下の`hostname`の指定が必要でした。

```jsonc

    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "hostname": "0.0.0.0",  // この設定が必要
            "port": 9003,
            "pathMappings": {
                "/app": "${workspaceRoot}"
            },
            "log": true
        }
    ]
```

# 環境
今回は以下のような構成でRemote Containerは使用せず、WSL2上のVSCode ServerとDocker Desktop上のコンテナ間で
デバッグを行おうとする構成でした。
(あまり一般的ではない...?)
VSCode Serverから見るとhost.docker.internal(自分の環境では192.168.65.2)からの接続を許可する必要があるため、"0.0.0.0"の指定が必要だったのかと思っていますが、この部分はちょっと自信がありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51174/ad535bdc-69db-e8db-3a16-782c3fe15b1c.png)

xdebug.ini (XDebug3)

```ini
zend_extension=xdebug

[xdebug]
xdebug.mode=debug
xdebug.start_with_request = yes
xdebug.client_host=host.docker.internal
xdebug.log_level = 0 ;コネクション失敗のログを取りたい時は1、不要なら0などにする。https://xdebug.org/docs/all_settings#log_level
```
Tesorflowの画像分類のチュートリアルでエラーを起こした話

# はじめに
どうも、趣味で機械学習を勉強している者です。
今回は、Tensorflowのチュートリアルにある[画像分類](https://www.tensorflow.org/tutorials/images/classification?hl=ja)にて、[モデルの学習](https://www.tensorflow.org/tutorials/images/classification?hl=ja#%E3%83%A2%E3%83%87%E3%83%AB%E3%81%AE%E5%AD%A6%E7%BF%92)を実行したらエラーを**起こした**ので、解決方法と教訓を紹介します。
（結論を言ってしまえば、しょうもないミスでした...）

# エラー内容
チュートリアルにはお手本になるコードと説明文が載っています。
説明文を読みながらコードを写経していたはずなのにエラーが発生！

発生したエラーがこちら

>WARNING:tensorflow:Your input ran out of data; interrupting training. Make sure that your dataset or generator can generate at least `steps_per_epoch * epochs` batches (in this case, 30000 batches). You may need to use the repeat() function when building your dataset.

どうやらinputしているジェネレータのバッチ数がダメだよと言われているもよう。
しかもご丁寧に「今回の場合は、30000バッチ数」だよとの記載。
しかし自分は、お手本に沿ってジェネレータを作成し、モデルを構築。
もちろんパラメータに使っている変数も間違っていない。
それなのに何故...

# エラー原因と解決方法
では実際にどんなコードでエラーを**起こした**のか、自分が書いたコード（全ての元凶）がこちらです。

```python:python
history = model.fit_generator(
    train_data_gen,
    steps_per_epoch=total_train,
    epochs=epochs,
    validation_data=val_data_gen,
    validation_steps=total_val
)
```
そして、チュートリアルに記載しているお手本となるコードがこちら。
![2021-02-18 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670420/ad8632f0-a785-5b00-4f28-817b2d965e20.png)

もうお気づきでしょう。
冒頭でコードを写経したと言っておきながら、できてなかったのですね。
そう、

` // batch_size`

が抜けてますね...

コードのパラメータの詳細は以下になります。

|  パラメータ  |  説明  |
| ---- | ---- |
|  train_data_gen |  学習データのジェネレータ（学習データ）  |
|  steps_per_epoch  |  学習データに対して、1つのエポックを宣言し、次のエポックを開始するまでの合計ステップ数  |
| total_train |学習データの合計数（ここでは2000）|
|epochs|学習データ全体を学習するまでの反復数（ここでは15を指定）|
|validation_data|検証用データ|
|val_data_gen|検証データのジェネレータ|
|validation_steps|検証データに対して、1つのエポックを宣言し、次のエポックを開始するまでの合計ステップ数|
|total_val|検証データの合計数（ここでは1000）|
|batch_size|重み更新ごとのサンプル数|

つまりエラーを起こしたコードでは、**15**のエポックで学習データ全体を学習すると指定しておきながら、1つのエポックのステップ数を学習データ全体としているためにエラーが発生していたのです。

だからエラーの内容で**30000**といわれていたのですね。
steps_per_epoch がtotal_train （**2000**）の場合、epochsが**15**なので学習データは**2000**×**15**=**30000**必要になるってことだったんですね。

なので、原因は` // batch_size`を書き忘れていたことであり、解決方法は` // batch_size`を追加するということでした。

本当にしょうもないミスでしたね...

# エラーを起こした原因
エラーの原因は分かりました。
では、そもそもなぜこんなミス（コードの写経漏れ）を起こしてしまったのか。

お手本のコードを見てください。
![2021-02-18 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670420/752531a9-c84e-6a25-9071-5fa17d88db51.png)
` // batch_size`はご丁寧に赤文字で記載されていますね。
そうです！赤文字で記載されているからこそ、私は写経漏れを起こしたのです！

ずばり、` // batch_size`を**コメント**と勘違いしたんです！
（えぇ...なんとも恥ずかしい...）

**python**で` //`といえば**切り捨て除算**の演算子だということをすっかり忘れていたんですね。
（ちなみに、`//`でコメントアウトできるのは**javascript**です）

# 今回の教訓
自分は今何の言語を使っているのか、それをしっかり頭に入れながらコードを書いていくことが重要だなと再認識させられたエラーでした。
.htaccessファイルを編集してリダイレクト処理をする

#概要
.htaccessファイルをXserver経由で編集して301リダイレクト処理をほどこす

今回使ったサイトはこちら
https://rakko.tools/tools/28/

##.htaccessとは何か。

Webサーバーの設定ファイルのこと。
.htaccessと同じディレクトリとその下層に対して、記述した内容の効果を発揮する。

##301リダイレクトとは何か。
サイトリニューアルなどで生じる古いURLを新しいURLにリダイレクトさせること！

#手順

トップページはこんな感じ。
まず最初に「ドメイン名」のところに今使っているサイトのトップページのドメインを貼り付ける！
![スクリーンショット 2021-02-18 23.45.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961398/49d049bf-7080-621a-ec56-1c6aa28af14c.png)

ｗｗｗは、なければなしにチェックを入れる！
そして`301リダイレクト`の
ディレクトリリダイレクト（改行区切り）の枠内に記述をします。

確かこんな感じだったはず、

```
リダイレクト元のURL【半角スペース】リダイレクト先のURL
```
これだけ書いたらあとは下の`コード作成`を実行するだけ！
（スクロールすると色々記入するところあるけど特に何も記述してない）

![スクリーンショット 2021-02-18 23.54.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961398/04d7e2af-b1f2-f3e4-4e92-96e7a14d0bdf.png)

そしたら右側の.htaccessにコードがわきでてくるので一旦放置。

次はXserverにログインし、サーバーを選択してサーバーパネルに入る！
![スクリーンショット 2021-02-18 23.58.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961398/9e9abc0c-7884-0fa7-92fd-df2e06688423.png)
そしてここにある.htaccess編集をタップ！

からのドメインを選択して.htaccess編集を選択すると、ファイルの中の記述がでてくる！

多分だけど、記述はドメインごとに異なっていてルールもさまざまなので、無作為に触らないことが懸命。

先ほど生成した.htaccessファイルの記述をみながら、ルールを変えないようにコピペしていきます。

記述し終えたら確認して実行へ！

#まとめ
ルールの詳細や規則性は後日また作業あれば編集します。

##参考文献
https://qiita.com/sunnyG/items/7e5bd6e8dc9b04c9978e
Rubyで安全にevalしたくて怖いプログラム作った

なんかこんな感じにしたら安全にevalできないかなっていう感じ。
まぁ拾ってきたコードがほとんどなんだけど。

参考
http://tolarian-academy.net/ruby-sandbox-eval-bot/

教えてruby強い人。

```ruby:ruby
# Sandbox http://tolarian-academy.net/ruby-sandbox-eval-bot/

### usage
# begin
#   EvalSandbox.new.execute(code)
# rescue SecurityError, SyntaxError => e
#   e.message
# rescue Error => e
#   e.message
# end

class EvalSandbox
  module Sandbox
    [File, Dir, IO, Process, FileTest, RubyVM, RubyVM::InstructionSequence, ObjectSpace].each do |klass|
      refine klass.singleton_class do
        def banned_method(*_); raise SecurityError.new; end
        klass.methods.each do |m|
          alias_method(m, :banned_method)
        end
      end
    end

    refine Object do
      def banned_method(*_); raise SecurityError.new; end
      allowed = [:Array, :Complex, :Float, :Hash, :Integer, :Rational, :String, :block_given?, :iterator?, :catch, :raise, :gsub, :lambda, :proc, :rand, :methods]
      Kernel.methods.reject { |name| allowed.include?(name.to_sym) }.each do |m|
        alias_method(m, :banned_method)
      end
    end

    refine Kernel.singleton_class do
      def banned_method(*_); raise SecurityError.new; end
      allowed = [:Array, :Complex, :Float, :Hash, :Integer, :Rational, :String, :block_given?, :iterator?, :catch, :raise, :gsub, :lambda, :proc, :rand]
      Kernel.methods.reject { |name| allowed.include?(name.to_sym) }.each do |m|
        alias_method(m, :banned_method)
      end
    end
  end

  def context
    binding # Bindingオブジェクトの生成
  end

  def execute(code, ug)
    code = CGI.unescapeHTML(code)

    begin
      RubyVM::InstructionSequence.compile(code)
    rescue SyntaxError => e
      return e.message
    end

    return "Invalid Access" if code.include?("ENV")

    begin
      safe_code = <<-"CLEANROOM"
        module CleanRoom
          using Sandbox
          #{code}
        end
      CLEANROOM
      eval(safe_code, context)
    rescue SecurityError, SyntaxError => e
      raise e
    rescue Error => e
      raise e
    end
  end
end
```
アニメ：呪術廻戦のサイトのEP紹介のウネウネ動くhoverアニメを解説する

## 概要

**[EPISODES｜TVアニメ「呪術廻戦」公式サイト](https://jujutsukaisen.jp/episodes/)**
各EPのサムネイルの上にマウスオンすると、うねうねうね〜っとしながら黒い画像が取れていきます。この黒い画像は`mask`によって設定されていますが、かっちょいいので真似しましょう。

## `mask`って？
**[mask - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mask)**
なんと未邦訳ですね。触りだけ訳すと下記みたいなことです。
> mask CSS shorthand プロパティは、特定のポイントで画像をマスクまたはクリッピングすることで、要素を（部分的または完全に）隠します。


上記の通り、`mask`はショートハンドプロパティです。詳しく見ると

- `mask-clip`
- `mask-composite`
- `mask-image`
- `mask-mode`
- `mask-origin`
- `mask-position`
- `mask-repeat`
- `mask-size`

というわけです。下記に見る通り、今回は`mask-image`、`mask-position`、`mask-size`が設定されています。


## マークアップ
`hover`対象に、親の真上に`:after`要素を配置、そこに`mask`で画像をあてておき、`hover`時に`animation`で`mask-position`を`X`方向のみ動かしてます。

```html:html

<a href="01.php" class="epThumb linkA_2">
 　　<img src="../images/episodes/1-1.jpg">
    ::after
</a>

````

```css:css

@keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

@keyframes ani2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

.linkA_2 { 
    position: relative;
}

.linkA_2:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #000;
    -webkit-mask: url(../images/btn_sprite.png);
    mask: url(../images/btn_sprite.png);
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    opacity: .4;
    animation: ani2 .7s steps(22) forwards;
}

.linkA_2:hover:after {
	animation: ani .7s steps(22) forwards;
}
```


`mask`で指定されてる画像は下記。
![maskに指定されている画像](https://jujutsukaisen.jp/images/btn_sprite.png)


## 補足
 - ウネウネ〜といったニュアンスは`steps(22)`が効いてますね。
 - `Ani`と`Ani2`の違いは、`animation-fill-mode: backwards`じゃだめだったのだろうか…。
 - `mask`、使ったことなかったけど楽しそうですね！
AWSデプロイ時、背景画像が表示されない

AWSにデプロイした時に、
Do not fallback to assets pipeline if a precompiled asset is missed.
というエラーが発生しました。

```
$ RAILS_ENV=production bundle exec rake assets:clean
```
```
$ RAILS_ENV=production bundle exec rake assets:clobber
```
```
$ RAILS_ENV=production bundle exec rake assets:precompile
```

assetsファイルからpublic/imagesファイルに背景画像を移動しました。

この方法でエラーが解消しました。
【不合格者の合格体験記】理解しながら進めたAWS SAA-C02試験勉強法まとめ

# はじめに
実務ではAWS経験していないエンジニアです。
エンジニア経験は運用監視2年6ヶ月、クラウド基盤のSV、Storageの構築1年。
今回、不合格を経て`AWS SAA-C02試験合格`を掴み取ることができました。
このブロクを見てくれているかたの合格のお手伝いができれば幸いでございます。

# 1. 勉強期間
1ヶ月ほど勉強しました。
下記のように`2019年にAWS SAA-C01試験(英語版)`で受験しているのでサービスの下地の理解はある程度ある状態でしたが知識的には再受験を決めた段階でSAA試験合格には程遠い状態でした。ちなみ今回は日本語版で受験しております。

```
試験勉強に取り組んだ期間
2019/01/09~2020/09/30⇨SAA-C01(英語受験して不合格。心が折れる。)
2020/02/01~2020/08/1⇨現場移動があり試験勉強はお休み。
2020/08/27~2020/9/27⇨マネージャーに相談してリハビリとしてクラウドプラクティショナー受験し合格。
2021/01/20~2020/02/23⇨SAA-C02(日本語受験。合格)
```
# 2. 使った教材
・模擬試験
[【SAA-C02版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）]
(https://www.udemy.com/course/aws-knan/)
・教材
 [Blackbelt](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)
[くろかわこうへいさんのYoutubeチャンネル](https://www.youtube.com/channel/UCX30pfp4p82rIiSJmBygADw)
 [AWS Japan公式Youtubeチャンネル](https://www.youtube.com/user/AmazonWebServicesJP)
# 3. やったこと

勉強方法
優先順位としては`1,Blackbelt 2,Udemy模擬試験 3,黒本`という順位で学習しました。
3の黒本に関しては今回は全然使わなかったのでここでは書きません。
上記に記載していますが今回は不合格からのSAA試験でした。その反省もあり模擬試験中心の勉強を避けBlackbelt中心の勉強で試験勉強に取り組みました。
過去に失敗した結果を自己分析すると足りないのはサービスやインフラストラクチャに対する理解力でした。そこで今回は極力模擬試験をやらずに1つひとつのBlackbeltを使用してサービスを理解する勉強法を取り入れました。
udemy模擬は全6回を1周＋模擬①、③、⑥のみを2週目実施しました。
勉強の配分は7:3の割合でBlackbelt、webでサービスについて調べる(7), Udemy模試(3)の配分です。

# 4. Youtube活用術
`Blackbeltを読むのがつらいとき`
集中が途切れてしまったり、なかなかやる気が出ない時にBlackbeltを動画で見ることをおすすめします。
**速度は1.5倍速くらい**で試聴すれば通常の時間よりも早く終わるし、AWSのアーキテクトの方の説明が丁寧なので理解しづらいサービスがあるときは最初にBlackbelt動画で内容理解すれば効率がいいかなと思います。

`AWS SUMMITのセッション動画`
こちらもAWS公式チャンネルからですが。**ストレージの比較やサーバレスサービスへのセッション**があるのでこちらもおすすめ。
サーバレス系(Lamda,SQS,SNS,SES)は実務で触らないとなかなか理解できない部分なので動画で視聴すると理解度が増します。

`くろかわこうへいさんのYoutubeチャンネル`
くろかわさんは最前線でAWSに取り組まれているかたなので**ECS,IAM,CloudFormationの解説動画が非常にわかりやすいです。**このチャンネルの注意点はAWSとは関係ない動画も本人のエンジニアとしての経験談が語られていてかなりおもしろい内容なのでついついみてしまいがちになるので気をつけてください。

# 5. 合格した所感
**やはりサービスを理解することが合格への近道だと感じました。**
-Blackbelt, Youtubeなどを使って勉強すると模擬試験とは違い明確な点数などはでないので一見遠回りのように感じましたが理解が深まったので本番の試験でも焦らないで受験できました。

**AWSを勉強してよかったこと**
インフラに対しての理解が飛躍的に向上しました。普段は業務の範囲内で仕事をしているので限られた知識しか得られませんがAWSを勉強したことにより幅広い知識を習得することができました。

不合格を経験し心が折れていましたが合格にいたるまでサポートしてくれたマネージャー、同僚に本当に感謝しております！！これをみてくれた受験者が1人でも多く合格できることを祈っております。
[インフラエンジニアの資格について]

普段はRailsばかりだけど、
最近、**インフラエンジニア**について調べていたらどうやら資格がある事を初めて知ったので、資格について少しだけ書いていきたいと思います。


##インフラエンジニアの資格
資格の種類はまだまだあるみたいですが、持っていたら重宝される資格を**6つ**ほどピックアップしていきます。


##基本情報処理技術者
基礎的なITスキルからプログラミング、ネットワーク、データベース、セキュリティや経営戦略などITエンジニアとして身につけておきたい幅広い分野を満遍なく学ぶことができる。

##応用情報処理技術者
`基本情報処理技術者`の上位資格に位置付けられ、問われる内容もより高度なものとなっている。


##ネットワークスペシャリスト
`基本情報処理技術`や`応用情報技術`の試験範囲が非常に広範囲であるのに対し、
ネットワークスペシャリストは文字通り、ネットワーク技術に特化した内容となっている。

##データベーススペシャリスト
`応用情報技術者`の上位に位置づけられ、データベースに関する専門知識が必要となります。


##Linux技術者認定 LinuC(リナック)
`LinuC（リナック）`は、特定非営利活動法人LPI-Japanが開発管理するLinux技術者試験です。 レベル１は最もエントリーレベルとなっており、インフラエンジニアの中でも、サーバー系の資格です。

##シスコ技術者認定 CCNA
スコシステムズ社が実施するCisco技術者認定試験の一つです。 ネットワークに関する基礎知識も合わせて学べることから、ネットワークエンジニアの登竜門とも言われています。


　

###まとめ

想像を絶するくらい難しそうな気しかしないが、
もし、仮にインフラで活躍する時がくればその時は資格に挑んでみたいと思った。
laravel mixの使い方

こんにちは、JeffTechです。

# この記事で実現できること
- Laravel Mixの使い方を理解する

# 開発環境
- PHP7系
- Laravel6系
- Laravel Mix
- JavaScript
- MacOS

# 説明
今回は、LaravelでSassやJavaScriptなどを扱うときに便利なLaravel Mixの使い方を説明していきます。
この記事では、Laravel Mixを使用してJavaScriptのalertメソッドで、Hello World!と出力させます。

# 実装の流れ

1. Laravelプロジェクトのインストール
2. npm installコマンドの実行
3. JavaScriptファイルを作成
4. webpack.mix.jsの編集
5. Viewファイルで読み込む
6. npm run dev
7. Sassの場合


# 実装
## Laravelプロジェクトのインストール
まずはLaravelのインストールからです。
今回は`laravel_mix`というプロジェクト名にしています。

```bash
$ composer create-project --prefer-dist laravel/laravel laravel_mix "6.*"
```

これで、laravel_mixというLaravel6のプロジェクトがインストールされました。


## npm installコマンドの実行

無事インストールが終わったら、プロジェクトフォルダである`Laravel_mix`ディレクトリに移動して、`npm install`コマンドを実行します。

もし、Node.jsをインストールしていない場合は、[こちらからダウンロードしてください。](https://nodejs.org/en/)Node.jsをインストールすれば、npmも使えるようになります。
Node.jsがインストールできたら、下記コマンドを入力して確かめてみましょう。

```bash
$ node -v
```

```bash
$ npm -v
```

両方ともバージョンが表示されれば、OKです。

ちなみに、npmはNode Package Managerの略でNode.jsのパッケージマネージャーのことです。PHPでいうところの、composerの役割を担ってくれています。
つまり、Node.jsで動くパッケージをインストール・アンインストールするにはnpmコマンドを実行することになります。

```
$ npm install

-----省略-----
48 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```
上記のようになれば、Laravel Mixが使えるようになっています。



## JavaScriptファイルを作成
今回は、Hello World!とアラートで出力させたいので、`laravel_mix/resources/js`ディレクトリに、`helloWorld.js`というファイルを作成して、下記のように編集します。

```javascript:helloWorld.js
alert('Hello World!');
```

これでOKです。


## webpack.mix.jsの編集
`laravel_mix/webpack.mix.js`を下記のように編集してください。

```javascript:webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/helloWorld.js', 'public/js') // この行を追加
    .sass('resources/sass/app.scss', 'public/css');
```

これで、helloWorld.jsが読み込まれることになります。


## Viewファイルで読み込む
今回は、`laravel_mix/resources/views/welcome.blade.php`で`Hello World!`と出力させてみます。
そのため、下記のようにscriptタグを追加してください。

```html:welcome.blade.php
<!DOCTYPE html>
    ーー省略ーー
    <body>
        <div class="flex-center position-ref full-height">
        ーー省略ーー
        </div>
        <script src="{{ mix('js/helloWorld.js') }}"></script> <!-- この行を追加 -->
    </body>
</html>
```

これで`welcome.blade.php`で`helloWorld.js`が読み込まれるようになりました。


## npm run dev
それでは、最後にコンパイルしていきます。

```
$ npm run dev

-----省略-----
 DONE  Compiled successfully in 2161ms
```

のようになれば、成功です。

`php artisan serve`でサーバーを立ち上げて、ブラウザで確認してみましょう！
`Hello World!`とアラートが出力されましたか？
Laravel Mixを使うと、こんな感じで簡単にJavaScriptを扱うことができます。


## Sassの場合
Sassの場合は`webpack.mix.js`以下のようにしてください。

```webpack.mix.js
mix.sass('resources/sass/app.sass', 'public/css'); // Sassの場合
```

Viewファイルの`headタグ`内に下記を追加してください。

```html:viewファイル
<!-- Sass -->
<head>
    <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>
```


# 最後に

これでLaravel Mixを使用して、JavaScriptやSassを使いこなすことができると思います。
ぜひ試してみてください！

少しでも役に立った！という時は、いいねをポチッとして
フォローしてくださると嬉しいです、、、笑

役に立たなかった時は、怒らないでコメント頂けますと幸いです笑

Twitterもやってますので、よかったら見てみてくださいね！
https://twitter.com/jefftechsaku
Amazon SNSを利用してモバイルプッシュ通知を送信するやり方ー Node.js

# 前準備
[Amazon SNSを利用してモバイルプッシュ通知を送信するやり方ーコンソール編](https://qiita.com/Rei_2020/items/ab1768c1a0191b73492e#%E5%89%8D%E6%BA%96%E5%82%99)をご参照ください。

# Node.jsでプッシュメッセージを送信
いくつかのポイントがあります。

1. 'aws-sdk'モジュールを使えば楽です。
2. 東京リージョンは<b>ap-northeast-1</b>です。
3. <b>配信プロトコルごとにカスタムペイロード</b>で送信する場合、<b>MessageStructure: "json"</b>の追加は必須です。
4. AWS.SNS().publish()でプッシュメッセージを送信します。

```javascript:index.js
// AWS SDKをロードする
const AWS = require('aws-sdk');
// リージョンを設定する
AWS.config.update({region: 'ap-northeast-1'});

exports.handler = function (event, context, callback) {
    // プッシュのパラメータを設定する
    const params = {
        // プッシュ内容
        Message: JSON.stringify({
            default: "何かのメッセージ",
            GCM: {ペイロードを参照}
        }),
        // 配信プロトコルごとにカスタムペイロードに設定する
        MessageStructure: "json",
        // 対象トピック
        TopicArn: '{あなたのトピックのARN}'
    };

    // Amazon SNSにアクセスするためのPromiseを作成する
    const sns = new AWS.SNS();
    const promise = new Promise((resolve, reject) => {
            sns.publish(params, (error, data) => {
                if (error) {
                    reject(error);
                    return;
                }
                resolve(data);
            });
        });

    // Promiseを実行
    promise.then((result) => {
        const response = {
            'statusCode': 200,
            'headers': {
                'Content-type': 'application/json'
            },
            'body': JSON.stringify(result)
        }
        // 結果を出力
        callback(null, response);
    }).catch((error) => {
        const response = {
            'statusCode': 500,
            'headers': {
                'Content-type': 'application/json'
            },
            'body': JSON.stringify(error)
        }
        // エラー結果を出力
        callback(null, response);
    });
}
```


# サンプル
[https://github.com/Rei2020GitHub/MyPublicProject/tree/master/AWS/amazon-sns-demo-send-push-notification](https://github.com/Rei2020GitHub/MyPublicProject/tree/master/AWS/amazon-sns-demo-send-push-notification)

# 参考
[Amazon SNSを利用してモバイルプッシュ通知を送信するやり方ーコンソール利用](https://qiita.com/Rei_2020/items/ab1768c1a0191b73492e)
[Amazon SNSを利用してモバイルプッシュ通知を送信するやり方ー Node.js](https://qiita.com/Rei_2020/items/fd8c679f697b0e0f5ca7)
[Amazon SNSを利用してモバイルプッシュ通知を送信するやり方ー HMS対応（ソリューション）](https://qiita.com/Rei_2020/items/352a0b02d6eb13ab19da)
[Amazon SNSを利用してモバイルプッシュ通知を送信するやり方ー HMS対応（実装）](https://qiita.com/Rei_2020/items/ad4046b59d3e2cc7111c)
Confluence 공간 전체 페이지 리스트 추출하기

![main888.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144058/80a8006c-aa72-7fa8-e4da-0044b6b8ad3b.png)

> ✍ [Confluence](https://www.atlassian.com/ko/software/confluence) 한 공간의 전체 페이지 리스트 추출하는 방법입니다.
> https://github.com/atlassian-api/atlassian-python-api 을 활용하였습니다. (:star: 558)

# 테스트 환경
- Confluence 7.4.3
- Python 3.7

# 사전 설치
```
$ pip install atlassian-python-api
```

# 코드
`get_all_pages_from_space()` 함수로는 최대 500개 까지의 페이지만 추출 됩니다.
API 호출 시 [Pagination](https://developer.atlassian.com/server/confluence/pagination-in-the-rest-api/)(페이지 매김) 제한이 있는데요. (이걸 몰랐어요.. :scream:)

`while` 과 `flag`를 활용해서 Pagination 처리를 극복(?) 해줍니다.

```python:get_all_pages.py
from atlassian import Confluence

confluence = Confluence(
    url='<confluence_url>',
    username='<id>',
    password='<password>')

page_ids = []
flag = True
limit = 500
step = 0

while flag:
    pages = confluence.get_all_pages_from_space(space=space, start=step * limit, limit=limit)
    step += 1  

    if len(pages) == 0:
        flag = False
    else:
        for page in pages :
            page_ids.append(page.get('id')) # page.get('title') 이라면 페이지 제목

# 전체 페이지 수
print(len(page_ids))

for page_id in page_ids :
    print(page_id) # 전체 페이지 ID 출력
```

# 참고링크
- https://www.programcreek.com/python/?CodeExample=get+all+pages
- https://velog.io/@king/Confluence-%EC%B2%A8%EB%B6%80%ED%8C%8C%EC%9D%BC-%EC%A0%90%EA%B2%80%ED%95%98%EA%B3%A0-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B8%B0
ニコニコ静画のコメントを消す

# ニコニコの最大の欠点はコメント
なのでコメントを消します。

# 利用環境
Stylus と対応ブラウザ

https://add0n.com/stylus.html

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

https://addons.mozilla.org/ja/firefox/addon/styl-us/


# User Script
```css:画面に流れるコメントを非表示にするCSS
.stream_comment {
    display:none !important;
}
.css_stream {
    display:none !important;
}
.comment_show {
    display:none !important;
}
.balloon {
    display:none !important;
}
```
```css:邪魔なコントロールを非表示にして少し中央に寄せるCSS
.content_list .pages .image_container {
    margin-left:auto;
    margin-right:auto;
}
#detail .player.vertical .content_list .pages {
    /** 652+310. */
    /*width:962px;*/
    width:962px;
}
#ko_controls {
    width:0px;
    display:none !important;
}

```
# 🍤エビデンス 👎👎👎
## before
コメント目障り
ストレスフル 🤬
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72257/fb102d2a-ec93-0281-613d-5b321d573d3a.png)

## after 👍👍👍
心の安寧が保たれる。
うっかり見えてしまうこともないため、非常にグッド。
ストレスフリー 😄
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72257/a5cf2c41-c8d8-13b5-dcb6-f4c213428724.png)




# あとがき
ぶっちゃけ、赤の他人のコメントや評価なんて基本ゴミ以外のなにものでもない。

長らくUserCSSで無効化していたせいで、逆に『そもそもニコニコにコメントなんて有ったっけ？』くらいになってきてて、たまに評価用の機能のを拡充してほしいと思ってしまうほど。
(どの道コメントは要らないけど)

ニコニコ静画には好きな作品が沢山ありとても有り難く利用させていただいている。とても優秀なコンテンツサイトだと思うので、これからもコンテンツ産業の為に頑張ってもらいたいのだけど。もう少しコメント不要派の人間のために、コメントを遠ざける機能を検討してもらいたい。

作品を語らうのは親友だけで良いの。作者様を応援できさえすれば良いの。素性も知らない人と馴れ合うのは吐き気がするの。
【コピペOK】Laravelで戻るボタン(ブラウザバックボタン)を実装してみた


こんにちは、JeffTechです。

# この記事で実現できること
- LaravelのBladeで戻るボタンを実装できるようになる

# 開発環境
- PHP7
- Laravel6
- HTML
- CSS

# 実装
入力確認画面から入力画面に戻る時など何かと便利な戻るボタン。
そんな戻るボタンを簡単に実装できる魔法のコードがこちらです。
Laravelで実装とか言ってますが、特にLaravel関係なくHTMLとJavaScriptで実装できます。
コードは本当にこれだけ↓

```html:
<button type="button" onClick="history.back()">戻る</button>
```
`type="button"`を指定しないとデフォルトでは`type="submit"`になってしまい、うまくブラウザバックできないので注意してください。
あとはclassとかを適当につければ簡単に戻るボタンの出来上がりです。

戻るボタンを実装したいBladeにちょこんと置いてみましょう！

# 最後に
少しでも役に立った！という時は、いいねをポチッとして
フォローしてくださると嬉しいです、、、笑

役に立たなかった時は、怒らないでコメント頂けますと幸いです笑

Twitterもやってますので、よかったら見てみてくださいね！
https://twitter.com/jefftechsaku
【Automation Anywhere】 Automation360 x LINE OCR のハンズオン！（初心者向け）

2021年2月26日、RPA Communityさん主催により Automation Anywhere x LINE OCR のハンズオンを実施しました！

おかげさまで大好評をいただき、以下に動画が公開されています。
（女子部♡ということでピンクのサムネイルですが、動画は男性やどちらでもないみなさんもご視聴いただけます。）

https://www.youtube.com/watch?v=nnEooKeIWAw

動画の中で、講師が「コピペしてください」と言っている変数のかたまりやスクリプト類をこちらに置いておきます。

#事前準備＆資料

その前に、事前準備の動画＆当日の資料もおいていきます。

##事前準備の動画

ハンズオンに参加するには、Automation Anywhereを動かせる環境を持っている必要があります。
無償のコミュニティエディションの申し込み～初期設定を以下の動画で案内しています。

https://youtu.be/L4G0k-ad0LU

##資料

ハンズオン当日は主に講師の画面を見ながらハンズオンを進めていましたが、実は資料もがっつり作っています。
動画を見るよりも、資料を見ながら自分のペースでじっくりやりたい！　という人や、動画だと進みが遅くてタルい！　という人は、ぜひこちらの資料を見ながらハンズオンに挑戦してみてください。

https://www.slideshare.net/ChihiroSano/automation-anywhere-x-line-ocr

#コピペ集

##LINE OCRのトライアルサイト

コピペ用URL　→　`https://clova.line.me/ocr_demo/en`

以下のサイトです。

https://clova.line.me/ocr_demo/en

##CSVに設定する内容

コピペ用　→　`購入日,店名,購入金額`

※　↑をコピペしたあとに「改行を入れる」のをお忘れなく！

##購入日、店名、金額を取り出すJavaScript

※ごめんなさい！　今はLINE側の仕様が変わって、以下のスクリプトでは動かなくなっています＞＜　時間があるときに確認して直したいと思いますが、「すぐ知りたい！」「早く直してー！」という方がいらっしゃいましたら、コメントもしくはTwitter（https://twitter.com/IQ_Bocchi ）でお知らせください。

```javascript:javascriptの「開く」アクションにコピペするスクリプト
function getDate(s){
  var j = JSON.parse(s).result;
  var pi = j.paymentInfo;
  return (pi ? (pi.date ? pi.date : '') : '');
}

function getStore(s){
  var j = JSON.parse(s).result;
  var si = j.storeInfo;
  var name = (si ? (si.name ? si.name : '') : '');
  var branch = (si ? (si.branch ? si.branch : '') : '');
  var dq = '"';
  return dq + name + branch + dq;
}

function getPrice(s){
  var j = JSON.parse(s).result;
  var tp = j.totalPrice;
  return (tp ? (tp.price ? tp.price : '') : '');
}

```

##「ファイルに記録」アクションの、ログに記録するテキスト

コピペ用　→　`$vDate$,$vStore$,$vPrice$`

※変数を講師の画面どおりに作っている場合のみ、上記のコピペが使えます。

##応用編で、ファイル名を入力するレコーダーアクションのファイル名のところに設定する変数

コピペ用　→　`$vFile{name}$.$vFile{extension}$`

※変数を講師の画面どおりに作っている場合のみ、上記のコピペが使えます。

#以上！

この記事の内容は以上です。

もしも動画や資料を見ながらハンズオンに挑戦していて、わからない点やうまくいかない点がありましたら、お気軽にこの記事やTwitterにコメントをいただければ幸いです。
【コピペOK】Laravel6にたった3コマンドでBootstrapを導入する方法

こんにちは、JeffTechです。

# この記事で実現できること
- 3コマンドでLaravel6にBootstrapを導入する

# 開発環境
- Laravel6

# 実装
Laraveldでは簡単にBootstrapを導入することができます。
まずは、laravel/uiパッケージをComposerを使ってインストールします。

```bash:ターミナル
$ composer require laravel/ui:^1.0 --dev
```
^1.0が入っていないとインストールできないので気をつけてください。

laravel/uiパッケージをインストールできたら、Artisanコマンドを使ってBootstrapのスカフォールドをインストールします。

```bash:ターミナル
$ php artisan ui bootstrap

// --authオプションをつけると認証画面が自動生成されます。
$ php artisan ui bootstrap --auth
```

最後に下記コマンドで適応させていきましょう。

```bash:ターミナル
$ npm install && npm run dev
```
` DONE  Compiled successfully in XXXXms`となっていれば完成です。


# 最後に
たった3コマンドでBootstrapが導入できちゃいましたね！素敵！

少しでも役に立った！という時は、いいねをポチッとして
フォローしてくださると嬉しいです、、、笑

役に立たなかった時は、怒らないでコメント頂けますと幸いです笑

Twitterもやってますので、よかったら見てみてくださいね！
https://twitter.com/jefftechsaku
【コピペOK】bashでnodeとyarnのインストールをする方法

こんにちは、JeffTechです。

# この記事で実現できること
- homebrewのインストール
- nodebrewのインストール
- Node.jsのインストール
- yarnのインストール


# 開発環境
- macOS Catalina
- bash


# 説明
フロントエンドの環境を構築している際にnode.jsとyarnが必要になったので、nodebrewを使って、node.jsとyarnをインストールしていきます。
※なお、今回はよく使われているbashで実装していきます。


# 実装の流れ
- Homebrewのインストール
- Nodebrewのインストール
- nodebrewのPATHを通す
- Node.jsのインストール
- yarnのインストール


# 実装
## Homebrewのインストール
Homebrewはパッケージ管理システムの一つで、様々なソフトウェアの導入を簡単にしてくれるツールです。
今回はこちらを使用していくので、インストールしていない人は下記のコマンドを実行して、インストールしてください。インストールしている人は飛ばしてオッケーです。なお、インストールしているかわからない方は`$ brew --version`と叩いて、エラーが出た場合はインストールされていないので、下記のコマンドを叩いてください。

```bash:ターミナル
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
公式サイト：https://brew.sh/index_ja

## nodebrewのインストール
NodebrewはNode.jsのバージョンを管理するバージョン管理ツールです。今回はこのnodebrewを使用して、Node.jsとyarnを一括管理できるようにしていきます。
下記のコマンドを実行して、先ほどインストールしたHomebrewを使用してnodebrewをインストールしてください。すでにインストールしてる人はHomebrew同様飛ばしてオッケーです。インストールしてるかわからない方は`$ nodebrew`と叩いてください。

```bash:ターミナル
$ brew install nodebrew
```
これでnodebrewのインストールは終わりです。

## nodebrewのPATHを通す
Nodebrewのコマンドを利用するためにnodebrewにPATHを通していきます。
下記のコマンドを実行してください。

```bash:ターミナル
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
```
追加したパスを適用していきます。

```bash:ターミナル
$ source ~/.bash_profile
```
これでNode.jsとyarnをインストールする準備が完了しました。

## Node.jsのインストール

まずnodebrewのセットアップをします。（Homebrewでインストールした場合は、セットアップしないとNode.jsインストール時にエラーが出る）

```bash:ターミナル
$ nodebrew setup
```

それでは、nodebrewを使用して、Node.jsをインストールしていきます。

```bash:ターミナル
$ nodebrew install-binary latest
```
インストールが完了したら、インストールされたNode.jsのバージョンを確認して、そのバージョンを使う設定にしていきます。

```bash:ターミナル
$ nodebrew list
```
`v15.11.0`などのバージョンが表示されていればOKです。このバージョンは人によって違うので、数字が違くても気にしなくて大丈夫です。

バージョンを確認したら、下記コマンドのバージョンを自分がインストールしたバージョンにしてコマンドを実行してください。

```bash:ターミナル
$ nodebrew use v15.11.0
```

下記コマンドでNode.jsのバージョンを確認してください。

```bash:ターミナル
$ node -v
v15.11.0
```

## yarnのインストール
最後にyarnのインストールをして終わりです。

```bash:ターミナル
$ npm install -g yarn
```
バージョン確認もしておきましょう

```bash:ターミナル
$ yarn -v
1.22.10
```


# 最後に
以上でbashを使用したNode.jsとyarnのインストールは終了です。
各々フロントの開発を楽しんじゃってください！

少しでも役に立った！という時は、いいねをポチッとして
フォローしてくださると嬉しいです、、、笑

役に立たなかった時は、怒らないでコメント頂けますと幸いです笑

Twitterもやってますので、よかったら見てみてくださいね！
https://twitter.com/jefftechsaku
ManjaroのGrubがWindowsを認識してくれない


##環境

- OS
    - Manjaro
    - Windows10


　私は普段ManjaroとWindows10を別のディスクに入れてデュアルブートしています．最近アップデートをしたところ， ManjaroのGrubがWindows10を認識してくれず，Manjaroが直接起動してしまうという問題が生じました．

Windows側のディスクが壊れているわけではなさそうなので，どうやらManjaroのGrub関係アップデートが悪さをしているのではないかと検討をつけましたが，調べても参考になる記事が見つからず途方に暮れていました．

##解決方法
　今回救いの手になったのはTwitterのManjaro公式アカウントの[ツイート](https://twitter.com/ManjaroLinux/status/1369636286097727499)でした．
やはりGrubアップデートが原因だったようです．以下のコマンドをターミナルで実行し，再起動すればブート画面が今まで通り出てくると思います．

`sudo echo GRUB_DISABLE_OS_PROBER=false >> /etc/default/grub && sudo update-grub`

もし/etc/default/grubのアクセス権限がないよと言われたら，直接書き加えてください．
こんな状況に陥る人はそういないと思われますが，なにかの参考になれば幸いです．

##結論
公式を読め

参考記事
[Grub2 | Secure Boot Bypass 2021 - Update highly recommended](https://forum.manjaro.org/t/grub2-secure-boot-bypass-2021-update-highly-recommended/57280)
［怒りの備忘録］pandas で .splitした後に別れた要素をそれぞれ新規の列に格納したい

# 結論
.split() の引数にexpand=Trueをいれましょう。

## 例えば

```python
df = pd.read_excel('sample.xlsx')
df.head()
```
* 出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635959/02d5fd5d-c18b-1476-79d5-fcebf7b80747.png)

こちらを / で区切って左から各列に振り分けたい時は。。

```python
df[['1st','2nd','3rd']]=df['Set'].str.split('/',expand=True)
df.head()
```
* 出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635959/f569fbb5-c863-99d8-abbe-00edf6059427.png)


意外とググっても出てこなくて、、忙しい時ほどこういう初歩的なところに陥っちゃいますね。まだまだ精進です。
でも、１時間くらいかけて悩んだことをサクッとまとめておくのは大事かもですね。

### p.s.
自分が昔書いたコードを見返して思い出しました。悔しい。
cssを使って、レターマークを作るには

#ゴール　/　CSS・HTMLを使ってレターマークを作る

![スクリーンショット 2021-03-10 231348.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153703/c1c223bd-75c0-9226-376c-90ea9fc90adb.png)

このレターマークをHTML・CSSで作ります。

#HTMLをかく

```html:html
<div class="letter">
  <div class="btn-letter"></div>
</div>
```

・親要素＝letterクラス
・子要素＝btn-letterクラス
ということは最低限把握しておきましょう。

#CSSをかく

```css:css
.btn-letter {
 background-color: #fff;
 border-top: solid 3px blue;
 border-left: solid 3px red;
 border-bottom:  solid 3px orange;
 border-right: solid 3px orchid;
 height: 400px;
 position: relative;
}
.btn-letter::after,
.btn-letter::before {
  content: "";
  position: absolute;
  width: 100px; /* 幅指定 */
  height: 70px; /* 高さ指定 */
}
.btn-letter::before {
  left: 200px;  /*赤線から右に200px*/
  top: 150px;  /*青線から下に150px*/
  border: solid 3px black;
}
```

![スクリーンショット 2021-03-10 225252.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153703/8c7f2458-17a7-3813-e4a1-f68c75f1f4f7.png)


これでレターマークの枠が出来ました。
次は、この枠内にブイの字を書いていきましょう！

```css:css
.btn-letter::after {
  top: 150px;
  left: 200px;
  border-bottom: solid 3px orange;
  border-top: solid 3px blue;
  border-left: solid 3px red;
  border-right: solid 3px orchid;
  transform: rotate(45deg); /*45度の回転角度をつける*/
}
```

どこの線を使えばいいかわかりやすいように上下左右全てにおいて`transform: rotate(45deg);`を付けました。
早速見てみましょう。

![スクリーンショット 2021-03-10 225813.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153703/ec6c9f6e-e019-b901-c9e0-56fa3394934e.png)

ブイの字を作るには、
・オレンジの線（border-bottom）
・ピンクの線（border-right）
を使えばよさそうですね！

では、このcss（.btn-letter::after）を書き換えてブイの字を作りましょう！

```css:css
.btn-letter::after {
  top: 117px;
  left: 216px;
  width: 70px;
  height: 70px;
  border-bottom: solid 3px orange;
  border-right: solid 3px orchid;
  transform: rotate(45deg); /*45度の回転角度をつける*/
}
```

topとleftを微調整して....

![スクリーンショット 2021-03-10 231112.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153703/5b23e3a5-6228-cec2-aaf3-e40ebd25bc05.png)

できました！！
是非皆さんもチャレンジしてみて下さい！
Laravel Mix をver5から6へアップグレードした

Laravel Mix(Laravelのアセットコンパイルライブラリ)のver5.1を使っていたんですが、
polyfillを導入するにあたってアップグレードしました。

その時に複数回エラーと格闘したので、備忘録として残しておきます。

### やることをざっくりまとめ

・laravel-mixのバージョンを上げる
・package.jsonのscriptsを編集
・webpack.mix.jsを編集する
・Node.jsのバージョンをあげる



### laravel-mixのバージョンをあげる

私の場合は現行で最新版の`polyfill`を入れるにあたって
laravel-mix@^6.0を入れるようログで勧められました。
誘われるまま`npm install`

```shell
npm install laravel-mix@^6.0.0
```
とりあえずバージョンだけはあげられました。

### package.jsonのscriptsを編集
`npm run watch`を打ったところ、以下のエラーが出力。

```shell
[webpack-cli] Unknown argument: --hide-modules
```

調べてみたところ、laravel-mixの5系で使えていた`--hide-modules`オプションが、6系ではなくなったらしい。
[Laravel Mixリファレンス: Update Your NPM Scripts](https://laravel-mix.com/docs/6.0/upgrade#update-your-npm-scripts)

というか、リファレンスを見ると6系のscriptsの書き方が大分変わっている・・・。

[リファレンス](https://laravel-mix.com/docs/6.0/upgrade#after)にのっとり、package.jsonのscriptを書き換える。


```shell
"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}
```

ちなみに、6系では`--hide-modules`を使うまでもなく`node_modules`以下をwatch対象から外してくれるようです。
([リファレンスWatch Ignores](https://laravel-mix.com/docs/6.0/upgrade#watch-ignores-node_modules)参照)

### webpack.mix.jsを編集
リファレンスをよくよく見てみると、バージョンアップにより`webpack.mix.js`も少し変更があったようです。
使っているjsフレームワークに合わせて、少し編集を加えます。

参照:[リファレンス API for JavaScript Frameworks](https://laravel-mix.com/docs/6.0/upgrade#api-for-javascript-frameworks)

```js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
```

```js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css').vue();
```

私の場合はVueを使っていたので上記のようにしましたが、`React`を使っている方は`react()`でイケるようです。

### Node.jsのバージョンをあげる
ここまでやって`npm run watch`をしても、まだエラー出ました。

```shell
You are using an unsupported version of Node. Please update to at least Node 12.14
```

どうやら使っているNode.jsのバージョンが古いようです。

```shell
node -v
# => 10.16
```
確かに古いので、バージョンを上げることにしました。

```shell
# バージョンを指定してインストール
nodebrew install-binary v12.14

# バージョンを指定
nodebrew use v12.14
```

インストールするだけでなく、useも忘れずにしましょう。
これでlaravel-mixのバージョンアップは完了です!

### 補足①ここまでの手順を試してもエラーが出る時

ここまでやってもエラーが出る場合は、一度フロントエンドライブラリを入れ直してみましょう。

```shell
// ライブラリ削除
rm -r node_modules

// ロックファイルを削除してバージョン固定を解除
rm package.lock.json

// 過去にインストールしたライブラリのキャッシュを削除
npm cache clean

// 上記コマンドで初期状態に戻した上でのインストール
npm i
```

### 補足②laravelでのpolyfill設定
[laravel-mix-polyfillのページ](https://www.npmjs.com/package/laravel-mix-polyfill)を見ればわかることですが、以下の通りです。

```js
const mix = require('laravel-mix');
require('laravel-mix-polyfill');


mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: "firefox 50, IE 11"
    }).vue();
```
create linke databaseでテーブルを見つけやすくするコツ

#はじめに
`create linked database`しても、テーブルが見当たらないというコメントをいただいたので、見つけやすくするポイントを紹介します。

##create linked databaseを使う時のポイント
ページをたくさん作ったいると、見つけるのが大変です。そこで、私はいつも作成したデータベースには名前をつけています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741816/af02f7fe-f0cc-fa4a-7741-a8fdf9ae600e.png)

上の家計簿では、`April Shopping`とテーブルに名前をつけています。
そうすることで、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741816/49af4407-a2d1-8f38-5e58-2db70f468fc8.png)

`/create linked database`と入力して、エンターキーを押した後、検索の状態になり、テーブルの名前を入力することで簡単に表示させることができます。テーブルの名前は日本語も対応しています。

###テーブルに名前をつけていないと…
名前をつけないと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741816/b83901bc-7625-4a02-5606-dfb90546d5dd.png)
になってしまい、テーブルを見つけにくくなってしまいます。
pipenvで作った環境でPycharmのコード補完がされなかったの対処法

# はじめに
`pipenv`でPythonの仮想環境を作った際に、実行時にエラーは起きないがIDE上でライブラリのインポート時にコード補完が効かない状態になりました。その時に調べたことのまとめです。

# 結論
* PycharmのSDK設定から仮想環境を作ればOK
* `pipenv`を使い手動で仮想環境を作った時はPycharmへインポートする

# 経緯
Pythonでプロジェクトを作るのがとても久しぶりだったので、モダンな環境構築の方法を調べたところ、`pipenv`を使って仮想環境を作るのが良さそうでした。
なので、まずプロジェクトのルートディレクトリで`pipenv --python 3`を実行し、仮想環境を作りました。
その後、`pipenv install 〇〇`として依存ライブラリをインストールしました。


この状態で、Pycharmのエディタを開くと、import文のコード補完がされませんでした。よく見ると、上の方に「プロジェクトのSDKが設定されていません」というようなエラーが出ていました。なるほど、先ほど作った仮想環境が見えていないんだが、と思いエディタに促されるまま、雰囲気で設定を行うと、プロジェクトのルートに`.venv`ディレクトリが作成されました。よし、これで行けるはず！と思ったのですが相変わらずimport文の補完が効きませんでした。キャッシュの削除や再起動をしてもだめです。
そこでふとライブラリが本当にインストールされているのか気になり、`.venv`の中の`site-packages`を確認しみると、インストールしたはずのパッケージが見当たりませんでした。しかし、Pythonスクリプト自体の実行はうまくいくので、恐らくIDEの設定がおかしいのだと思い、調査をはじめました。

# 原因
まず最初は`pipenv`が何者なのかほとんどわかっていなかったので、これを調べることからはじめたのですが、`pipenv`は先ほどから述べている通り、Pythonの仮想環境を作るためのツールです。`pipenv`で仮想環境を作ると、ディレクトリが作成され、その中にPC上のPythonへのシムリンクが作られます。依存ライブラリはそのディレクトリの中にインストールされ、仮想環境外へ影響が出ないようにしてくれます。

で、このディレクトリなのですが、調べていくと**pipenvを実行した場所に作成される訳ではない**ということがわかりました。`pipenv --venv`とすると仮想環境のパスが表示されるのですが、自分の場合は`/Users/<username>/.local/share/virtualenvs/xxxxxx`というようなパスになっていました。
プロジェクトのルートディレクトリに作られた`.venv`とまったく別物です。つまり、`pipenv`で作った仮想環境と、Pycharmが見ている仮想環境が違ったからコード補完がされなかったということです。なので、Pycharmの設定で`pipenv`で作った仮想環境を読み込むように設定すればOKです。

具体的な手順は以下の通りです。

File → Project Structureを開く。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614264/b074045b-e439-4311-e1cf-2f03ea0de26c.png" width="500px">


Platform Settings → SDK → 「＋」ボタンからAdd Python SDK... を選択。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614264/fc755f5e-b1a5-5223-b3f8-c5612b2f9f5a.png" width="500px">


Existing environmentをチェックし、Interpreterに仮想環境上のPythonのパスを入力。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614264/3e7cba68-a8dc-d039-00dc-87a390679960.png" width="500px">


以上でPycharm上でコード補完が効くようになりました！しかし、仮想環境がプロジェクト外に出るのはちょっと気持ち悪い気もします。そんな時は、仮想環境を作るときに`PIPENV_VENV_IN_PROJECT=1`という環境変数をセットすると、現在のディレクトリに仮想環境が作成されるので、そのパスをPycharmに読み込ませればOKです。

または、手動で`pipenv --python 3`とするのをやめて、Pycharmを使って仮想環境を作る方法があります。というか、こちらの方がおすすめです。手順は以下の通りです。

まず、今ある仮想環境を削除します。

```
pipenv --rm
```

そして、先ほどのSDK追加のウィンドウで、New environmentにチェックを入れ、`<プロジェクトのパス>/.venv`というパスを入力します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614264/108e4030-df05-5f9a-8664-0fb223efd2cb.png" width="500px">

これでプロジェクト以下にPythonの仮想環境が作成され、Pycharmにも読み込まれた状態になります！また、Pycharm上のターミナルは、自動で仮想環境にログインした状態で立ち上がるようになります。

実は、このPycharmで仮想環境を作る作業、最初に雰囲気でSDK設定していた時にやっていたのですが、どうやら最初に手動で作った仮想環境が優先されるようで、後からPycharmで作った仮想環境にはライブラリがインストールされませんでした。そのせいですごくハマりました...。
なので、既に手動で仮想環境を作ってしまった時は、今ある仮想環境を削除してから作業するのを忘れずに！
Transition


##slide animation

transition + transform + z-index + overflow

##transition 

transitionプロパティを使って、移り変わりの緩急を定義できる

##transrate
translateは物体の位置を移動する関数
transform: translate（50px, 70%）
transform: translateX（100%）
transform: translateY（100%）

X＝縦　Y＝横

##rotate
rotateは物体を回転させる関数
transform: rotate(30deg);


##transform-origin

transform-originは支点を指定する関数
transform-origin: center, center;


##skew

skewは平行四辺形を定義する関数
transform: skew(30deg);


##scale

scaleは物体のサイズを引数倍にする関数
transform: scale(1.1, 1.2);


##z-index

z-indexは前面に出る方を指定できるプロパティ（positionがstatic以外のとき）
A（z-index: 20;）B（ z-index: 10;）の場合、Aが前面に来る


##fixed

fixedはwindowの指定の位置に固定する
position: fixed;


##sticky

stickyは親要素の範囲内で位置を固定できる
position: sticky;


##overflow

overflow: visible; 表示
overflow: hidden;　非表示


##::before, ::after

擬似要素
beforeは要素の一番先頭、afterは要素の一番最後に付与される
content ''が必須
OLED LCDディスプレイ(SSD1306)をESP32でHello-worldしてみる！


OLED LCDディスプレイを買ったので、手元にあるESP32で簡単に動作確認してみたいと思います。意外と最近の記事が少なかったので備忘録もかねて書きます。
ついでにLCDディスプレイとI2C通信についても軽くふれていきます。


##使ってみたLCDディスプレイについて
Amazonで売っていたHiLetgoのOLEDLCD(SSD1306)です。
約900円でした。I2C通信仕様の物を選んでみました。
Macのキーボードに載せてみました。思ったよりかなり小さい・・・
ピンは`GND,VCC,SCL,SDA`の4本です。
 
![IMG_0846.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342722/17adc704-2590-d4df-485f-e7797b6db4ac.jpeg)


##I2C通信とは？
接続する前にI2C通信について簡単に説明します。I2C通信とはシリアル通信の1種です。
厳密にいうとシリアル通信の同期方式の一つになります。電源線の他に2本の線を接続する必要があります。

**SDA : データ線　データを転送する。**
**SCL : クロック信号線　送信側と受信側の同期を行う。**


**参考になる記事**
[電子工作初心者のために シリアル通信方式を分かりやすくまとめてみた](https://qiita.com/Gri_Gra/items/b6f901b35d3917ffc580)

##ESP32との接続方法(Devkitcの場合)
ESP32のどこにさせばいいの？ということでまず、お手元のESP32の入出力ダイアグラムをみてみましょう。VCCは3.3vに繋いでください。
下記図をみると
**GPIO21:SDA データ線**
**GPIO22:SCL クロック線**
に該当することがわかります。

![入出力ダイアグラム.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342722/f85a0bbe-cde2-98f7-8fd6-021683231292.jpeg)

##ライブラリ
SSD1306 ESP32 と検索して出てくるライブラリをインストールしてください。


##コード
注意する箇所はI2Cアドレスです。SSD1306本体の裏側を見て、抵抗がどこに繋がっているか確認して下さい。

```java
//OLED LCD サンプル
//SDA データ線 GPIO 21
//SCL クロック線GPIO 22

#include <Wire.h>
#include "SSD1306.h"//ディスプレイ用ライブラリを読み込み

//本体裏側　0x78に接続→0x3C 0x7A→0x3A
SSD1306  display(0x3c, 21, 22); //SSD1306インスタンスの作成（I2Cアドレス,SDA,SCL）


void setup() {
  display.init();    //ディスプレイを初期化
  display.setFont(ArialMT_Plain_16);    //フォントを設定
  display.drawString(0, 0, "Hello SSD1306!!");    //(0,0)の位置にHello Worldを表示
  display.display();   //指定された情報を描画
}

void loop() {

}

```

##結果（イメージ）
※SSD1366となっていますが、ミスです※

![IMG_0847.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342722/6738834c-c960-0817-6e44-c1b2fbe6c84f.jpeg)


##終わりに
思ったより簡単にできました。ディスプレイがあるとセンサの値や、状態を確認するのが簡単になりそうですね。しかも安いし、コンパクトで尚且つ綺麗でした。
複数使う場合はアドレスを割当なければならないので、またいろいろ調査してみてください！！
[PowerAutomateDesktop WEBログイン制御]

#[前提]
・手動で起動する。
・ログイン作業は手動で行う。
・ログイン後、OKを押すとPADの処理継続。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1090671/0a8176ee-81cc-f65f-cc65-613b6651e63b.png)


#[ポイント]
・＜Webページに次が含まれる場合＞で、ログイン後の任意文字（今回の場合”すべて”）を使用し、ログイン処理を待つ。


#[動作イメージ]
・ログインメッセージが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1090671/bc5f5faf-f95a-60bc-c140-c77aa3921fc1.png)

・ログイン画面が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1090671/b4e2f638-f4d7-aba2-e3e4-adb27db1e9cd.png)

＝＝ログインは自分で行う。＝＝

・ログインし、”すべて”が表示されるまで、ループして待機。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1090671/d89577e1-67ba-4f16-0d75-e1d7593a6f64.png)

・ログインしたら、PADの処理が継続。
【Rails】String型で送られてくるparamsの数字をInteger型に戻す方法

今日はpostmanを使っていたときに、paramsを数字で送ったはずが文字列になっていたので、それをIntegerに戻すやり方を書いておこうと思います。

まず、application_controllerで引数がintegerかどうか判別するメソッド(integer_string?)を定義しておきます。

Integer(str)のところでは引数がinteger型ではなかったときにAugumentErrorになります。それをrescueするといった形です。


```ruby:application_controller.rb
def integer_string?(str)
  Integer(str)
  true
rescue ArgumentError
  false
end
```
そしてControllerでparams(homework_params)という形で、string型となっている数字をinteger型に変換しています。

例) {"status"=>"3", "student_comment"=>"楽しかったです！"}から {"status"=>3, "student_comment"=>"楽しかったです！"}に変わる。


```ruby:homeworks_controller
def update
  @homework.update(params(homework_params))
end

private

def homework_params
  params.permit(:student_comment, :status)
end

def params_int(homework_params)
  homework_params.each do |key, value|
    if integer_string?(value)
      homework_params[key] = value.to_i
    end
  end
end
```

## まとめ
以上になります。フォームから数字が送られてくると、勝手に文字列になってしまうので、そういうときにこの手法は使えそうだと思いました。
なぜか、postmanでも文字列で解釈されましたが・・
ConoHa + nginx+ Let's Encrypt でサブドメインを追加する

完全に自分用メモ。

## 1. まずはConoHa側でサブドメインの受付設定を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545780/0cc4fe83-f3ec-f9bc-8bca-93e3d6d52b1d.png)

## 2. サーバー側でnginxを止める
動いていると証明書の発行が成功しない

## 3. サーバー側で証明書を発行
`letsencrypt` を実行できるようにしてある前提。実行できるまでの手順はいろいろなページで紹介してある

```
(sudo) letsencrypt certonly --standalone -d (サブドメイン).（ドメイン）
```

## 4. nginxの設定ファイルを編集する
好きなように編集しましょう。
cli-kintone を使った添付ファイルの移行方法のメモ

kintoneに添付ファイルをアップロードする方法についてのメモです。

# 移行データの準備

* t01は作業フォルダ
* Attachmentsに添付ファイルを配置
* Attachments/01の01を添付ファイルをアップロードするキー項目とする想定
* upload.csvはcli-kintoneで読みこむアップロード用のデータファイル
* upload.shはcli-kintoneの処理を書いたシェルスクリプト


```
t01
├── Attachments
│   ├── 01
│   │   ├── sample1.txt
│   │   └── sample2.txt
│   └── 02
│       └── sample1.txt
├── upload.csv
└── upload.sh
```

# kintoneアプリ

![スクリーンショット 2021-03-10 20.49.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/6d5dca30-6b13-5e35-2118-4e280ea5d0b3.png)

# upload.csv

レコードに複数のファイルをアップロードする場合、ディレクトリを作成してそこに複数のファイルを設置する。
CSVにはcli-kintoneのアップロードファイルのベースパスをパラメータで渡して、ファイルはベースパスからの相対パスを設定する。
複数ファイルの場合は、CRで区切るようにする。

```upload.csv
"Id","file"
"001","01/sample1.txt
01/sample2.txt"
"002","02/sample1.txt"
```

# upload.sh


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

appId=<アプリId>
apiToken='<APIトークン>'
domain='<ドメイン>'
attachmentFileDir='<添付ファイルディレクトリ>'
inputFilePath='<アップロードCSVファイル>'

cli-kintone --import -a "$appId" -t "$apiToken" -d "$domain" -b "$attachmentFileDir" -f "$inputFilePath"
```

# 実行

```
$ ./upload.sh
[2021-03-10 20:41:30]: Start from lines: 1 - 3 => SUCCESS
[2021-03-10 20:41:30]: DONE
```

# 結果

![スクリーンショット 2021-03-10 22.12.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/c2f3e206-3358-d248-f95f-12b854c9df07.png)


![スクリーンショット 2021-03-10 22.14.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/cf697954-4ec3-05ec-c0b3-3819ae7b1839.png)



# 参考

https://developer.cybozu.io/hc/ja/articles/202957070#step10
Eclipse/JavaでJSONを使い楽に解析/テストする

#はじめに
こんにちわ、こんばんわ。かえるのクーの助手の「井戸中　聖」（いとなか　あきら）です。
初めて書きます。Qiitaを一度使って（投稿して）みたかったので、とりとめのない記事ですが、書いてみます。
この記事は、マークダウン記載の練習中です。徐々にフォーマットをちゃんとしますので、しばらくご容赦ください。画像の張り付け方も勉強中です。

#この記事は以下の対応のための内容です
- java/Eclipseでホワイトボックステストをしているが、開発中のプロジェクトでJSONを使っていない。オブジェクト内容全体がすぐに確認できない。
- テスト対象のプログラムコード自体には一切手を加えたくない。JSON支援クラスのimportもテスト用のコーディングも対象ソースに内挿したくない/やりたくてもできない。
- オブジェクト構成がとても複雑な場合などに内容確認に時間がかかる。任意の場所で任意のオブジェクト内容をJSON形式で確認したい。

そんなときに、JSON形式でオブジェクト内を確認するための方法です。
#手順
1. mavenも書き換えたくないので、手動でjarファイルを取得し、外部jarとして登録する。
※例えば `gson-x.x.x.jar` (com.google.gson.Gson):を個別に入手して参照ライブラリに登録します。(.x部はバージョン値)

2. デバッガで確認したいオブジェクトの付近でブレークポイントで止める。

3. デバッガの式ペインの名前部分に`(new com.google.gson.Gson()).toJson(対象オブジェクト)` の文字列を入力して改行を押す。

4. 値部分に対象オブジェクトの内容がJSON形式で展開されて表示される。

5. JSON形式文字列部分をCopy&Pasteして適度に整形すれば、そのままテストエビデンスとして、貼り付けられる。

#ポイント
- デバッグ実行時に式の名前部分に入力した文字列がJava変数/オブジェクトとして評価されます。
- new や.get()/.set()なども都度実行されます。制約も多くあり、新規の変数定義などはできません。
- この機能を使って、ソースを一切変更せずにオブジェクト内部をJSON形式で「動的に」デバッグ確認できます。
- オブジェクト/クラスにJSON関連のアノテーション等がまったく不要であるところがミソです。

#いいところ
ホワイトボックステストがはかどります。

#わるいところ
マシン性能にも依存しますが、式ペインの名前部分にたくさんGson()のnewを書くと、デバッグの「もっさり」感がでてきます。

では、ごきげんよう。
react filter とmapの違い

```react
var e = {name: 'banana', num: 2}
const all = [{name: 'banana', num: 2},{name: 'apple', num: 3},{name: 'lemon', num: 3}]

const deletedDatas = all.filter((a, index) => {
    return a.num == 3
    // 説明
    // a.num == 3のとき、true
    // return true
    // このときは該当する[a]を保存する
    // a.num == 3が違うとき、false
    // return false
    // このときは該当する[a]は保存しない
});

//deletedDatas = [{name: 'apple', num: 3},{name: 'lemon', num: 3}]



const test = selectMenues.map((menu, index) => {
    return a.num == 3
    // この場合はtrueかfalseかが配列の形でかえる
});
// test = [false, true, true]
```


ここからは個人的なメモ

```react
        // 表示用のデータを更新
        const updateTrainerShifts = trainerShifts.filter((shifts, index) => {
            if (shifts.trainer.id == data.trainer_id){
                const updateShiftData = shifts.data.filter((shiftd, index) => {
                    if(shiftd.day == data.day){
                        // ここは変更後のデータを格納
                        return data
                    }else{
                        return shiftd
                    }
                });
                return {trainer: shifts.trainer, data: updateShiftData}
            }else{
                return shifts
            }
        });
        setTrainerShifts(updateTrainerShifts)
```
RSpecの導入

##目的
Rspecを導入する。

##Rspecの導入
```ruby:Gemfile
group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'rspec-rails', '~> 4.0.0' #ここに追加
end
```
Gemfileを編集。
`group :development, :test`内に記述する。
記述が完了したらターミナルで`bundle install`を実行。

##Rspecの設定
ターミナルで`rails g rspec:install`を実行
上記コマンドを実行すると`.rspec`というファイルが生成されるので`.rspec`内に下記の記述を追加。

```ruby
--format documentation
```

##テストコードの記述
テストコード記述用のファイルを作成しテストコードを記述する。
ターミナルで下記を実行することでUserモデル用のファイルが生成される。

```
rails g rspec:model user
```