OmniAICreator/Qiita-1.07M huggingface dataset:
安易にPHPのバージョンを上げたら色々ハマった（imagick編）【追記あり】

Qiitaに記事を書くのがこれが初めてです。

今まではハマった事、解決方法などは色々と手元のノートに書いて記録してきました。しかしそれに限界を感じ、また自分のようにハマった人がいるんだったら、その人たちへの手助けになるかと思い書き始めようと思いました。

さて、今回のお題目はタイトルの通り。
安易にPHPのバージョンを上げたら色々ハマった（imagick編）

このたびWordPressの勉強をする必要が出てきたので、apacheのhttpd-vhosts.confを弄ってAliasでディレクトリを分けて、その中にWordPress5.6のファイル展開して突っ込む。
XAMPPでずっと開発してきて、別件のプログラムでMySQLも使っていた為、データベース系の設定もちょちょっと書いたらあっさりとHelloWorldの画面が出てきて拍子抜けした。

なんか、自分が現役だった頃と全然違う…。簡単すぎ…。（10年も経てばそりゃ変わる）

WordPressの設定画面を色々と弄り倒していたところ、サイトヘルスという場所に行きついた。
どれだけ自分の環境が安全であるかを教えてくれるらしい。

そこで指摘された点はこちら。
・SSL化されてない
・PHPのバージョン低すぎ

PHPのバージョンは確かにXAMPPを突っ込んだ2018年から全然変えてない。7.2.x。指摘されて当然。XAMPPの場合、バージョンを上げるにはアンインストール→新しいのをインストールするしかないらしく、ひーこら言いながら最新のXAMPPをインストール+前の設定の引継ぎをおこなった。
参考にしたサイトはこちら。
【XAMPP】最新版のXAMPPにアップデートする際の注意と手順【Web開発】【XAMPP】 – クラベル
https://cravelweb.com/webdesign/xampp-upgrade-setup

【2021/03/19日追記】
以前、このような紹介パターンでリンク踏んだら404で表示出来なかった経験があるので具体的にファイルおよびフォルダ名を追記します。リンク先の方には感謝しかありません。
apache系
1 httpd.conf
2 httpd-vhosts.conf

php系
1 php.ini

mysql系
1 my.ini
2 config.inc.php
3 \xampp\mysql\data(DBの内容が入ってるディレクトリ)
一気にファイルやディレクトリを差し替えると、XAMPPのコントロールパネルで起動した時に怒られる確率が高くなります。
慎重に、ファイルをひとつ入れ替えたら起動して様子をみるようにしましょう。

めでたくPHP8.0.2インストール完了。

再びサイトヘルスを開くと今度はまた色々と怒られた。
・SSL化されてない
・gdがインストールされていないか無効化されている
・imagickがインストールされていないか無効化されている

gdに関してはphp.iniのextension=php_gd.dllがコメントアウトされていた為、それを外してやる事で解決。

問題はimagick。XAMPPでimagickをインストールする手順が煩雑。imagick以外にもImageMagickも入れてやる必要があるため、ファイルを落としてきてインストール。こちらは参考にしたサイトは割愛。
ImageMagickもインストールしてPathも通した。php/ext/の下にphp_imagick.dllを配置して、php.iniにphp_imagick.dllを追加。
さて再起動。

phpinfo()の中にimagickが無い。

もしかしてPHP8系に非対応？
アタリでした。

WordPressのサポートに同じ状態になった人がいらっしゃいました。
https://ja.wordpress.org/support/topic/%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%EF%BC%88xampp%EF%BC%89%E3%81%A7/

こればかりは手も足も出ません。imagick側の対応を待つしかないんでしょうか。

今回の教訓。「検証しないで安易にバージョン上げると大変になる」。

今回の件で「今まで動いていたTwitterOAuthが動かなくなった」編もありますので、後日書きたいと思います。
では。
MAMPでEC-CUBE2系インストールに失敗した

MAMPで、EC-CUBE2系（2.13.5）をLocalにインストールした際、DB情報入力画面の次で処理が止まるエラーが発現。
何度もインストールしてたのに、解消まで手間取ったのでログを残す。

ログを確認すると、
>[15-Mar-2021 16:53:16 Asia/Tokyo] PHP Fatal error:  DB処理でエラーが発生しました。
SQL: [SET SESSION storage_engine = InnoDB]
MDB2 Error: unknown error
_doQuery: [Error message: Could not execute statement]
[Last executed query: PREPARE mdb2_statement_mysql_12a941c4181cfb45bc8b89a459f857c1ba510fac2 FROM 'SET SESSION storage_engine = InnoDB']
[Native code: 1193]
[Native message: Unknown system variable 'storage_engine']
 in /Applications/MAMP/htdocs/eccube-2.13.5/data/class/SC_Query.php on line 1095

とのこと。storage engineのエラーとのことなので、MySQLそのものが壊れちゃったのかと疑った。
しかし、結論からいうと、下記の記事が解決法になりました。

https://qiita.com/cs_sonar/items/d90b8e291c5ea5e2cc4b

前のMAMPではMySQLのバージョンが5.7よりも低かったのでしょうね。おそらく。
今回はEC-CUBEのソース側を変更することでインストール処理を進めました。
終わり。
ActionView::Template::Error: Webpacker can't find application in..のデバッグ

#目次
- エラー内容
- 使用環境
- 対処法
- 終わりに

#エラー内容
Railsチュートリアル第3章にて、Railsサーバーを立ち上げて (http://localhost:3000/static_pages/home) を実行したところ、以下のようなエラーが出没しました。。
 
```
ActionView::Template::Error (Webpacker can't find application in /Users/yuuu/environment2/sample_app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
):
     6:     <%= csp_meta_tag %>
     7: 
     8:     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     9:     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    10:   </head>
    11: 
    12:   <body>
  
app/views/layouts/application.html.erb:9
```


#使用環境
macOS BigSur 11.2.2
ruby 2.6.6
Rails 6.0.3
webpacker 4.0.7


#対処法
webpackをコンパイルすれば解決するとのことだったので以下のコマンドを実行しましたがエラーが出ました。

```
$ bin/webpack
[webpack-cli] Failed to load '/Users/yuuu/environment2/sample_app/config/webpack/development.js' config
[webpack-cli] TypeError: Cannot read property 'toWebpackConfig' of undefined
    at Object.<anonymous> (/Users/yuuu/environment2/sample_app/config/webpack/development.js:5:30)
    at Module._compile (/Users/yuuu/environment2/sample_app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (/Users/yuuu/environment2/sample_app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at loadConfig (/Users/yuuu/environment2/sample_app/node_modules/webpack-cli/lib/webpack-cli.js:1158:31)
    at /Users/yuuu/environment2/sample_app/node_modules/webpack-cli/lib/webpack-cli.js:1245:74
    at Array.map (<anonymous>)
```

調べたところ、application.html.erbで出ているエラーの以下の一文をコメントアウトしたところ、無事にviewが描画されました。

```
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
```


#終わりに
JavaScript系のエラーは詳しくなかったのでかなり骨が折れました、。根本的な解決になっているかわからないので、原因が分かり次第追記させていただければと思います！(ふぅ。)
cssでの優先度〜class属性、id属性〜

#①class属性
クラスとは、簡単に言うと学校のクラス学級のようなもので、何年何組みたいなものです。
またこのclass名は1ページで何度でも使うことができます。
こちらは、要素に対しての指定として使われます。
例えば、ヘッダーとしての要素があるとします。その際class="header"と使われます👍

#②id属性
反対にid属性は１ページで1回のみ使うことができます。
こちらは
固有の名前を付ける場合に使われます👍
class属性とは違いこちらは、出席番号のようなものです。
同じクラスの同じ人が何人もいるわけにいきませんよね(・・;)　

またこれらは、cssを適用する場合にも影響があります。

cssでは、class属性よりもid属性が強い関係にあります。

では、cssでの優先度について考えてみましょう。

cssには記述方法が3つほどあります。

#①HTMLタグ
こちらはHTMLタグの中に書く方法です。

```index.html
<p style="color:aqua">マイメロディ</p>
```
外部に書くのが基本なのであまり使われませんが、このような書き方も可能です。

#②head内に書く
こちらは、HTMLのヘッド内に書くことによって、このページではこのタグはすべてこのようにしてくださいと指定することができます。

```index.html
<style type="text/css">
  p {color: pink;}
  </style>
  <title>Document</title>
</head>
<body>
  <p>お願い</p>
  <p>マイメロディ</p>
</body>
```
と書くことにより、このページでpタグが出てきた場合はすべてピンクになります😊♡

#③cssの外部ファイルに書く
これは一番ベストなので説明する必要もありませんが、cssno
記述の場合、上から順番に読み込まれていき、一番優先されるのは下にある要素だと学習しましたね。

上記の中で一番優先的に反映されるのは、個別的に当てているHTMLタグの中に当てているcssです。

☆まとめ☆
１．class属性とid属性でcssの強制力が変わる
２．cssを書く場所により強制力が変わる

でした！！
SlackでAPIを叩くときのボットのあれこれ

#slackって？
`Slack は、チームとコミュニケーションを図るための新しい手段です。メールよりも速く、整理され、安全な方法で実現できます。`(公式から引用)

まあこんなQiitaみてるようなエンジニアに今更いうこともないので割愛させていただきます！

#Botを作ってそいつに色々吐かせよう！

みなさんWebappとか作っててお問い合わせフォームとか作るじゃないですか。
その時にわざわざメアドで送らせてたりしてませんか？（煽り）

そんなのSlackのBotにやらせるのよ！

というわけで早速解説していこうと思うのですが、、、

あの〜〜フロント周りやバック周りは各自やってくださいね、、？？

#それでは本編に

SlackのAppの欄から”アプリを作る”を選択。
右上あたりにBotと書かれているアイコンがあると思うので、それをクリック。
そしたら名前つけたり、画像決めたりなどありますが、今回重要なのはそこではなく
![スクリーンショット 2021-03-15 17.40.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530841/c7b15b21-637a-9318-8362-b14f9112de0d.png)

こいつがイッチバン大事！忘れないようにコピーしてメモにペースト！！！（まあ、忘れてもすぐ確認できるんだけどね）

そのあとは、ChannelのID！
こいつもないとBotがどこに吐き出していいかわからなくて困ってしまうよなあ？？

確認方法（一番簡単だと思うもの）はWeb上でSlackに入り、チャンネルを開いたURLの最後のパスがIDになってるぜ。


#終わりに
これで一応の設定は終わり。ほとんど備忘録として残しました。
みてくれてありがとう！！！！
Next.jsでSVGをコンポーネントとしてImportするやり方

# やりたい事

Next.js x TypeScriptでSVGをこんな感じでimportして使いたい。

```jsx
import IconPenguin from "./IconPenguin.svg"

export const Component = () => (
  <div>
    <IconPenguin/>
  </div>
);
```

# やり方

[SVGR](https://github.com/gregberge/svgr)というsvgファイルをReactコンポーネントとして読み込めるようにしてくれるツールを利用する。

```node
npm install @svgr/webpack
```

`next.config.js`を作成して以下を記述。

```js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });
    return config;
  }
};
```

TypeScriptを使用している場合は以下のようなエラーが出るので、

`Cannot find module './IconPenguin.svg' or its corresponding type declarations.ts(2307)`

`index.d.ts`を作成して以下を記述。

```
declare module '*.svg'
```

# 参考

Next.jsでsvgを使用する
https://qiita.com/shn_kg/items/6660fb9ee63b2402de6a

SVGR
https://github.com/gregberge/svgr
ブロッホ球から理解する

#ブロッホ球
量子コンピュータは量子ビットの回転をマイクロ波やレーザーによってコントロールし行います。
ブロッホ球の球形は、各種量子の形を模したものではなく確率を表しています。


物理系のシミュレーションのゴールは、系（着目している対象）の初期状態（最初の状態）と、その系のダイナミクス＝時間発展（系が時間の経過に伴ってどう変化するか）のルールが与えられたときに、一定時間後に系がどういう状態にあるかを知ることである。

例えばビリヤードのシミュレーションを考えよう。初期状態は各玉の最初の位置と速度である。また、古典力学系なので時間発展のルールはニュートンの運動方程式（微分方程式）である。これらを与えてやることで、ブレイクショットの終了時に各玉がどこにあるかを予測することができるのである。

上の例のように、系の時間発展のルールは、一般に微分方程式で表される。古典力学系ならニュートンの運動方程式、電磁気学系ならマクスウェル方程式、流体力学系ならナビエ・ストークス方程式、といった具合である。したがって、物理系のシミュレーションの本質は、微分方程式を数値的に解くことに帰着される。そして、当然ながら量子系のシミュレーション、すなわち量子力学に従う系のシミュレーションもその中に含まれる。







```math
|ψ⟩=α|0⟩+β|1⟩ 
```


記号|ψ⟩はどの程度の重みで0と1が重ね合わされているかを表しています。つまりQbitを表しています。

α,βをこのとき複素確率振幅と言うそうです。

αやβが複素数になっているのは、量子の世界では0や1といった離散的な量も波の性質をもち干渉するためです。

このとき
複素ベクトルを用いると


```math
\begin{pmatrix}
 α \\
 β
\end{pmatrix}
```



ブラケット記法を使用すれば以下のようになります。

```math
|0⟩=
\begin{pmatrix}
1 \\
0
\end{pmatrix}
```


```math
|1⟩=
\begin{pmatrix}
0 \\
1
\end{pmatrix}

```









確率の和が1になるように、規格化条件

```math

{|α|²+|β|²=1} 
```
と規定します。

複素数を使う理由
三角関数では微分するごとに sin とcos が入れ替わって厄介だからです。たとえば sin 関数を t で微分すると、t の係数が飛び出てきて、sin 関数は cos 関数に変わってしまいます (下式)。これでは「関数の形を変えずに E を抽出する」ことができません。


ブロッホ球とはつまり、qubitを球面上の１点として表現したものです。
確率の総和が１であることからブロッホ球は単位球です。

量子ゲートの操作とは量子ビットの回転軸の操作を行うことをいいます。

#パウリゲートを行列演算で考える

#量子ゲートの物理的実装

超電導量子bitを用いる方法では、そのqubitのエネルギー準位差に等しい振動数の電磁波を照射することでqubitを操作します。そのような振動数の電磁波をある一定時間照射すると、
|0⟩を|1⟩ に|1⟩を|0⟩ に

に反転させることができるのです。
Fizz Buzzに対抗して世界のナベアツプログラムを紹介します。

ヨーロッパで「Fizz Buzz」という多人数で1から順に数を数えて
・3の倍数を「Fizz」
・5の倍数を「Buzz」
・3でも5でも割り切れる数は「Fizz Buzz」
・それ以外は数字
を言うゲームがあります。世界のナベアツで有名な桂三度さんの
「3の倍数、3が付く数字を言うとアホになる」
というプログラムを書きました。JavaとPHPで1～50までのプログラムです。

Java


//世界の「ナベアツ」ゲーム
//1から50までのを対象に、
// 3の倍数、数字に3がつくと、アホになる
//
//
//    新規作成日    2021/3/15
//    Author        乃木坂好きのITエンジニア


package paiza;

public class Sekainonabeatu {
　public static void main(String[] args) {
　  for(int i=1;i<=50;i++)
 
     {

       if ((i % 3 ==0) ||( i/10 == 3) || (i%10 == 3)) {

           System.out.println(i + "になるとアホになる");

       }else {

           System.out.println(i);

       }

    }

  }

}


PHP
//
//  ナベアツプログラム
//  Date  2021/03/15　(新規作成)
//  Author  乃木坂46好きのITエンジニア
//
//

<?php

for($i=0;$i<100;$i++)
{

  if ($i % 3 ==0 || $i / 10 ==0 || $i++  )

   {

       echo $i.";でバカになる\n";

    } else {

        echo $i."\n";

    }
}


?>
分岐処理をマスターした方は是非挑戦してみてください。
AWS CLIでECRの棚卸しをしつつ、Lifecycle Policyの設定の有無やストレージ使用量を出力します。

# 背景

特定のAWSアカウントだけECRの値段が跳ね上がっていたので調査しました。
ECRの料金はストレージ量とデータ転送量の2点ですが、ストレージ使用量を調べてみました。

ECRの料金については[こちら！](https://aws.amazon.com/jp/ecr/pricing/)

※以下は20210315時点の東京リージョンの値段です

ストレージ数 | 料金
-- | --
すべてのGB/月あたり| 0.10USD

データ受信 | 料金
-- | --
すべてのデータ受信 | 0.00USD/GB

データ送信 | 料金
-- | --
1 GB/月まで | 0.00USD/GB
次の 9.999 TB/月 | 0.114USD/GB
次の 40 TB/月 | 0.089USD/GB
次の 100 TB/月 | 0.086USD/GB
150 TB/月以上 | 0.084USD/GB

# 各種バージョン

```
$ aws --version
aws-cli/2.1.30 Python/3.8.8 Darwin/20.3.0 exe/x86_64 prompt/off

$ jq --version
jq-1.6
```

# スクリプト

```bash
#!/bin/bash

PROFILE="profile-12341234"

REPOSITORYS=$(aws ecr describe-repositories \
    --profile ${PROFILE} \
    --query 'repositories[*].repositoryName' \
    --output text)

for REPOSITORY in ${REPOSITORYS}
do
    RES=$(aws ecr describe-images \
        --repository-name ${REPOSITORY} \
        --profile ${PROFILE})
    # ポリシーがなければNotFoundExceptionに入るのでエラーは捨てる
    POLICY=$(aws ecr get-lifecycle-policy \
        --repository-name ${REPOSITORY} \
        --profile ${PROFILE} 2> /dev/null)
    if [ $? -gt 0 ]; then
        IS_ENABLE_POLICY=0
    else
        IS_ENABLE_POLICY=1
    fi
    echo "${REPOSITORY},$(echo ${RES} | jq '[.imageDetails[].imageSizeInBytes] | add'),$(echo ${RES} | jq '[.imageDetails[]] | length'),${IS_ENABLE_POLICY}"
done
```

# 出力結果

以下のようにCSV形式で出力されます。

`リポジトリ名, サイズ（byte）, イメージ数, Lifecycle Policyが有効かどうか`

```
repository1,15209655632,72,0
repository2,null,0,1
repository3,null,0,0
```

この結果をもとにLifecycle Policyで特定数以上のイメージは削除するなどの設定を加えるといいかもしれません。
CSS~!important~

CSSには優先度というものがあります。
上から書いたものが、下に向かって反映されていきます。

例えば、このように記入したとしましょう。

```index.html
<h1>今日は何をしていましたか？？</h1>
```

```style.css
h1 {
  color: red;
}

h1 {
  color:blue;
}
```

この場合、優先的に反映されるのは一番最後に記入されたcssになります。
![スクリーンショット 2021-03-15 17.05.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/2f6edd69-8a8b-8ce5-34da-bfcea54abd5f.png)

こうなりますね。
赤色を反映したいとしましょう。
ここで使うのが、『!important』です。
では先程のcssに付け加えていきます。

```style.css
h1 {
  color: red !important;
}

h1 {
  color:blue;
}
```
とすると、赤色が反映されました。
![スクリーンショット 2021-03-15 17.09.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/1832e805-e60f-b5dd-2283-14a4728d02bf.png)

ただし、このタグは本当に優先したいものに付けるようにしましょう！
使わないのがマストです😊
GDevelop の「イベント」を正しく理解しよう（初心者向けイベントの使い方）

特にプログラミング経験者がおちいりやすい罠なのですが、GDevelop の「イベント」は「if 文」ではありません。
このことは公式 Wiki でもサラッとしか説明されていないため、誤解したままイベントを if 文と同じように利用してしまうと、その独特な挙動に悩まされることになります。

参考ページ：[ゲーム作りの基本コンセプト：GDevelop を使うために知っておきたいこと](http://wiki.compilgames.net/doku.php/ja/gdevelop5/tutorials/basic-game-making-concepts#イベントとそれがいかにしてオブジェクトを選択するか) の「イベントとそれがいかにしてオブジェクトを選択するか」

確かにイベントは if 文と同じ役割を果たす面もありますが、イベントの役割はそれだけではなく、**対象のオブジェクト（インスタンス）を絞り込み**、その上で**絞り込まれたインスタンスに対し一括でアクションを実行する事ができる**、という特徴があります。

例えば、次の画像のようなシーンで、ミサイルが当たっている戦車のみ削除したい場合は……
![GDevelop のシーン画像](https://1.bp.blogspot.com/-6peHQxDn9cM/X_lVKlejgbI/AAAAAAAAB_I/CbitsWKdpgUf1Jh-5ZcSeDZm8NTXTzzJwCLcBGAsYHQ/s1920/2021-01-09%2B160140.png)
次の画像のようなイベントを設定するだけで、ミサイルが当たっている戦車のみ削除することができます。
![GDevelop のイベント画像](https://1.bp.blogspot.com/-Rk8-fDnO2Mc/X_lYhkiLgdI/AAAAAAAAB_c/ElJ10sPXlHs1PAmXhHtb37VUgSaNdWXaQCLcBGAsYHQ/s919/2021-01-09%2B161651.png)
これは、イベントの条件で「ミサイルに衝突している戦車」のみにインスタンスが絞られたため、そのイベントのアクションで戦車を削除すると、ミサイルと衝突している戦車だけが削除されるという仕組みです。

このような特徴により、わざわざ次の画像のようなイベントの組み方をする必要はありません。
![2021-03-15 145625.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224830/bbe5594e-d1bc-6409-3101-bf5534db5c59.png)
（希望通りの動作はしますが、イベントの仕組みを正しく理解していない組み方です）

さらに、この絞り込まれたインスタンスは、サブイベントにも引き継がれます。
例えば次の画像のように、それぞれの戦車にインスタンス変数を持たせて、異なる番号を割り当てたシーンならば……
![2021-03-15 122442.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224830/9f2400d6-8f9e-79a5-4bde-98eae5c1f063.png)
次の画像のようなイベントにすることで、ミサイルとの衝突時に戦車を ID ごとに異なるアニメーションに変化させることができます。
![2021-03-15 144619.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224830/c9e4d068-8bf1-d39e-8fd8-db9cb072f4bc.png)
これは、最初のイベントでミサイルと衝突している戦車のみに絞り込み、更にサブイベントで ID が一致する戦車のみに絞り込むことで、それぞれ異なるアクションが実行される仕組みです。
なお、条件に該当するオブジェクトがない場合は、そのイベントのアクションは実行されません。

では、今までの例とは異なり「戦車のどれか1輌にでもミサイルが当たったら、3輌全て消す」には、どうしたら良いかというと……
![GDevelop のイベント画像](https://1.bp.blogspot.com/-T5oH-yDLNXo/X_lg_hT_N-I/AAAAAAAAB_o/-1juT12G838480t8FxgL9GbZ0endKMujwCLcBGAsYHQ/s919/2021-01-09%2B165306.png)
上の画像のように「すべてのインスタンスを選択する」アクションを、削除するアクションより先に追加することで、戦車すべてがアクションの対象となり、3輌全てを削除することができます。

このように多少独特ではありますが、対象の絞り込みとアクションを一括でおこなえる、というイベントの特徴はゲーム制作において非常に強力です。
正しく理解すれば、シンプルかつスピーディーにゲームを作ることができるようになることでしょう😉

※ この記事は「[GDevelop 無料ゲーム制作ツールを使い倒す Blog](https://gdevelop-jp.blogspot.com/2021/01/gdevelop.html)」からの移植＆改訂版です。
windowsでiverilog その94

#概要　

windowsでiverilogやってみた。
浮動小数点、整数、変換の、テストベンチ書いてみた。

#参考にしたページ

https://github.com/dawsonjon/fpu

#サンプルコード

```
module test;
	wire [31:0] out;
	wire aa, oa, os;
	reg clk;
	reg rst;
	reg as;
	reg [31:0] a;
	fpu_f2i u(.input_a(a), .input_a_stb(as), .output_z_ack(oa), .clk(clk), .rst(rst), .output_z(out), .output_z_stb(os), .input_a_ack(aa));
	initial
	begin
		clk = 0;
		rst = 0;
		a = 32'h42fa0000;//125
		as = 0;
		$monitor("%h %h", a, out);
		#10
		rst = 1;
		#10
		rst = 0;
		#100
		as = 1;
		#100
		as = 0;
		#100
		$finish();
	end
	always
		#1
			clk = ~clk;
endmodule

```

以上。
【Swift】ライブラリ Instantiate を使用した際のエラー "Fatal error: Unexpectedly found nil while unwrapping an Optional value"

# エラー

```swift:Storyboard+UIViewController.swift
    public extension StoryboardInstantiatable where Self: UIViewController {
        init(with dependency:Dependency) {
            let storyboard = (Self.self as StoryboardType.Type).storyboard
            switch Self.instantiateSource {
            case .initial:

                // ここで落ちた
                self = storyboard.instantiateInitialViewController() as! Self
            case .identifier(let identifier):

                self = storyboard.instantiateViewController(withIdentifier: identifier) as! Self
            }
            if self is ViewLoadBeforeInject {
                _ = self.view
            }
            self.inject(dependency)
        }
    }
```

## 解決策

Storyboardの `Is Initial View Controller` にチェックをする。
windowsでiverilog その93

#概要　

windowsでiverilogやってみた。
整数、浮動小数点、変換の、テストベンチ書いてみた。

#参考にしたページ

https://github.com/dawsonjon/fpu

#サンプルコード

```
module test;
	wire [31:0] out;
	wire aa, oa, os;
	reg clk;
	reg rst;
	reg as;
	reg [31:0] a;
	fpu_i2f u(.input_a(a), .input_a_stb(as), .output_z_ack(oa), .clk(clk), .rst(rst), .output_z(out), .output_z_stb(os), .input_a_ack(aa));
	initial
	begin
		clk = 0;
		rst = 0;
		a = 32'd125;
		as = 0;
		$monitor("%h %h", a, out);
		#10
		rst = 1;
		#10
		rst = 0;
		#100
		as = 1;
		#100
		as = 0;
		#100
		$finish();
	end
	always
		#1
			clk = ~clk;
endmodule

```


以上。
appleとAppleは辞書順ではどちらが先か？

　この記事ではpython3.7, ruby2.6.6を使用しています。実行環境はそれぞれPyCharm2020.3とAWSです。

(注 2021年3月15日追記)
文字コードはPythonの標準の文字コードであるUTF-8とします。
ちなみに自分はこの記事を執筆して始めて文字コードを意識しました。

##1. はじめに
　プログラミングでは半角と全角、大文字と小文字は別の文字として認識されますよね。そしてこのことは既に知っていると思います。では質問です。appleとAppleは辞書順ではどちらが先にくるでしょうか？

##2. 答え
　答えは**Apple**が先です。Pythonを使って確かめてみましょう。

```python:practice1.py
s1 = 'apple'
s2 = 'Apple'
if s1 > s2:
    print(f'{s1}は{s2}より前')

# -> appleはAppleより前
```


##3. apple, Apple, APPLEではどうなるか？
　appleとAppleは辞書順ではどちらが先にくるかという疑問が解消したところで次の疑問が生じました。「apple, Apple, APPLEではどうなるのか？」先ほどと同じようにif文を用いて調べてみましょう。

```python:practice2.py
s1 = 'apple'
s2 = 'Apple'
s3 = 'APPLE'

if s1 < s2 <s3:
    print(f'{s1}, {s2}, {s3}の順')
elif s1 < s3 < s2:
    print(f'{s1}, {s3}, {s2}の順')
elif s2 < s1 < s3:
    print(f'{s2}, {s1}, {s3}の順')
elif s2 < s3 < s1:
    print(f'{s2}, {s3}, {s1}の順')
elif s3 < s1 < s2:
    print(f'{s3}, {s1}, {s2}の順')
elif s3 < s2 < s1:
    print(f'{s3}, {s2}, {s1}の順')

# ->APPLE, Apple, appleの順
```

答えはAPPLE, Apple, appleの順になることが分かりました。

##4. 考察
　APPLE, Apple, appleの順になることから分かることは次のとおりです。すなわち**「同じ文字ならば辞書順では大文字が小文字に優先する」**ということです。
　ただしコメントでご指摘があったように文字コードによっては小文字が先に来ることもあるそうです。だったら「この記事は一体何だったんだ？」と思われるかもしれません(ｔなみに書いた本人は一番思っています)。まあUTF-8とASCIIが大文字優先だからギリ耐えたことにしようしたい(耐えてないけど...)。

##5. コードを読みやすくする
　**「同じ文字ならば辞書順では大文字が小文字に優先する」**という結論は分かったのですが、apple, Apple, APPLEの順番を比較したコードは条件分岐が6通りもあって読みにくいですよね。読みにくさを解消するためにリストを用います。まずリストを作成して次にsort()メソッドを使用して降順に並べ替えます。

```python:practice3.py
apple_list = ['apple', 'Apple', 'APPLE']
apple_list.sort()
print(apple_list)
```

##6. まとめ
結論：**「同じ文字ならば辞書順では大文字が小文字に優先する」**
(この後は余談です。興味がある方は読んでいただけるとありがたいです。)

###参考文献
『実践式はじめてのPython問題集まとめVer2:Python入門』


###余談
　今回の疑問は『実践式はじめてのPython問題集まとめVer2:Python入門』で問題演習をしていたときに生じました。自分はこの結果が受け入れられずrubyでも試しました。一応そのときのコードを記載しておきます。あと自分がrubyのコードをQiitaに投稿したのはこれが始めてです。

```ruby:practice.rb
s1  = 'apple'
s2 = 'Apple'
if s1 < s2
    puts("#{s1}は#{s2}より前です")
elsif s1 == s2
    puts("#{s1}は#{s2}は同じです")
else
    puts("#{s2}は#{s1}より前です")  
end

# -> Appleはappleより前です
```
ReactHooksで映画検索アプリを作る

<h1>コード</h1>
<a href=https://github.com/kenta0313/react-hooked>https://github.com/kenta0313/react-hooked</a>
<h1>コード解説</h1>
<h3>1.Header.js</h3>

```react:components/Header.js
import React from "react";

const Header = (props) => {
  return (
    <header className="App-header">
      <h2>{props.text}</h2>
    </header>
  );
};

export default Header;
```
<p>親要素からレンダリングしているだけです。</p>
<p>index.jsのファイルをインポートするのを忘れないでください。</p>
```react:index.js
import App from './components/App';
```
<h3>2.Movie.js</h3>
```react:conponents/Movie.js
import React from "react";

const DEFAULT_PLACEHOLDER_IMAGE =
  "https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SX300.jpg";


const Movie = ({ movie }) => {
  const poster =
    movie.Poster === "N/A" ? DEFAULT_PLACEHOLDER_IMAGE : movie.Poster;
  return (
    <div className="movie">
      <h2>{movie.Title}</h2>
      <div>
        <img
          width="200"
          alt={`The movie titled: ${movie.Title}`}
          src={poster}
        />
      </div>
      <p>({movie.Year})</p>
    </div>
  );
};


export default Movie;
```
<p>こちらはAPIから取ってきた変数を引数に取っています。</p>
<h3>3.Search.js</h3>
```react:conponents/Search.js
import React, { useState } from "react";


const Search = (props) => {
  const [searchValue, setSearchValue] = useState("");
  
  const handleSearchInputChanges = (e) => {
    setSearchValue(e.target.value);
  }

  const resetInputField = () => {
    setSearchValue("")
  }

  const callSearchFunction = (e) => {
    e.preventDefault();
    props.search(searchValue);
    resetInputField();
  }

  return (
      <form className="search">
        <input
          value={searchValue}
          onChange={handleSearchInputChanges}
          type="text"
        />
        <input onClick={callSearchFunction} type="submit" value="SEARCH" />
      </form>
    );
}

export default Search;
```
<p>まず、useStateで検索欄の初期値を空に設定してます。</p>
<p>handleSearchInputChangesで検索欄へ入力できるようにしています。（これがなかったら入力できないです。）</p>
<p>resetInputFieldが呼ばれると検索欄が空になりなす。</p>
Windowsからダブルクリックでshファイル実行

sample.sh.bat

```bash
:; if !(type uname > /dev/null 2>&1); then
    @ECHO off
    wsl ./%~n0%~x0
    PAUSE
    EXIT
:; fi
# ===== ↑ Windows bat =====

# ===== ↓ Linux bash =====
echo `uname`
```

* sh実行のために起動用batファイルは作りたくなかった
* ```:;```を使うことでsh側でのみ実行するコマンドを書けるっぽい
    * [Single script to run in both Windows batch and Linux Bash?](https://stackoverflow.com/questions/17510688/single-script-to-run-in-both-windows-batch-and-linux-bash)
* bat側で動くコマンドとsh側で動くコマンドを分け、batで動いてる場合はwslで自分自身を実行させる
Raspberry Piでデータの可視化をしてみる[Grafana]

Raspberry PiはLinuxベースのOSを乗せられる上に、ひと通りのセンサーが積まれていたりGPIOで容易にモジュールを接続できたりと、何かを測定するのにとても便利です。

csvやJsonなどテキスト形式のファイルに出力されることも多いと思いますが、せっかくのLinux環境なのでラズパイ内でデータの可視化ツールを動かせたら便利そうだなと考えました。

# 環境

```
Raspberry Pi 3B+/4B (Raspbian GNU/Linux 10 (buster) armv7l )
```


Dockerでデフォルトでインストールされる**Grafana**は記事執筆時点(2021/03/15)で`7.4.3`です。


# 準備

Dockerが入っていない場合はインストールしましょう。

```
$ curl -sSL https://get.docker.com | sh
```

```
$ docker -v
Docker version 20.10.5, build 55c4c88
```


# 実行
いちいち`sudo`をつけて実行するのは煩わしいので、ログインユーザをgroupに入れて権限を与えておくと良いと思います。


```
sudo docker run -d -p 3000:3000 grafana/grafana
```
これで`localhost:3000`にアクセスするとこのような感じでみることができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609338/f9593a90-856b-ec95-cf59-4df50a3efb7b.png)



私の場合はさらに、
- **Grafana**でcsvを読み込むためのプラグインを導入したい
- ローカルにあるファイルをDockerコンテナ内から参照(マウント)したい
という2点をクリアしたかったので、以下のように追記して実行しました。


```
sudo docker run -d  -p 3000:3000 --name=grafana  -e "GF_INSTALL_PLUGINS=marcusolsson-csv-datasource" -v /home/pi:/home  grafana/grafana
```

# **Grafana**を操作する

## ログインについて
初期状態ではID/PASSは`admin/admin`になっています。継続的にコンテナを運用するならば入力後に変更しておくと良いでしょう。


## データソースの選択
このバージョン(7.4.3)においては
`Configuration(右側の歯車マーク)->Data Sources->利用するプラグインの選択('csv'を検索)->LocalファイルPathを入力`
といった手順でソースを読み込みます。
この場合のPathはDocker内にマウントしているソースファイルの場所になります。
(私の例では`/home/result.csv`)

![csv_input.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609338/600328a6-5610-f805-e201-4b00f30be773.gif)




## ダッシュボードの作成

データソースが読み込めたら左の+パネルより`Dashboard->Add new panel`と進み、
先ほど読み込んだcsvがデフォルトで表示されているはずなので、csvのヘッダー行に指定している要素を入力していきます。

今回私が使ったデータは自宅のWifiのDL時の速度を計測したもので、
- 日時と日付が入力されている`date`のカラムを`Time`型
- 実際の測定値が入った`download`のカラムを`Number`型
でそれぞれ読み込み`Switch to table view`をクリックすると
Y軸、X軸に対応して値がグラフが出力されます。

![addnew.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609338/b1045e4d-00b9-8a29-6f48-5a9d65e2eca1.gif)


なお、Edit画面右側の方でグラフの種類や軸(Axis)の調整ができます。
V7.4からはフォーカス時の横棒表示が使いやすくなったりしているみたいです。

一度作成したpanelはドラッグ操作で細かい時間軸での表示などができます。


![timerenge.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609338/834820b2-d9b3-b50d-9db4-0b5d48daab84.gif)

また、作成したダッシュボードはSave後、左上のShareボタンで(公開環境であれば)リンクを作成することができます。スマートフォン環境にも最適化された表示がされるので便利です。




## issue
- 常に最新のデータを表示させるためにはどうしたらええんや...?
->last〇〇 で指定すると良さそう
- メトリクスの自動送信とかしたい



# ちなみに
Google先生で検索してみると、 Grafanaの他には、

```
代替案 Grafana
Datadog. ...
Splunk. ...
logstash. ...
Graylog. ...
Fluentd. ...
Prometheus. ...
Nagios Log Server. ...
Scalyr.
```
のような感じでデータ可視化ツールがあるよと教えてくれました。

この中のいくつかは今回活用した**Grafana**のようにDockerイメージが提供されていて同じ使い勝手で利用できるものもあるかと思います。
(ただし、SplunkのようにARMv7用のイメージが提供されていなかったりするので注意)
それぞれのツール同士を連携させる方法もあったりしますのでご自身の好みで色々遊んでみると楽しいかと思います。
最近ではGoogle Data Studioも俄かに流行の兆しを見せていて、一層導入のハードルは下がってい流のではないでしょうか。こちらはBig Queryやメールへのメトリクス画像送信など自社サービスとの連携も強力です。

それでは良いビジュアライズライフを！



# 参考にした記事
- [grafanaのcsvプラグインを使ってみた - 忘れそうな内容をメモしています](https://shintarof.hatenablog.com/entry/2021/01/24/015324)
コンテナ起動時のオプション読み込みを参考にしました。

- [10分で理解するGrafana - Qiita](https://qiita.com/Chanmoro/items/a23f0408f0e64658a775)
DockerでのGrafana運用やPromehteusとの連携などもう少し詳しくまとめてあります。
javaのmockitoを使用してリスト型データを返すには

Junitで単体テストをする。（ライブラリ下記を使用）
・Eclipse4.8
・Java 8
・mockit-1.10.19
・junit-4.12


```java

package G_T.OfficeSystem.controller;
import java.util.List;

public class Test1  {

	//DBが無い時にリストデータを返すメソッド
	public  List<String> runSample(String ID,String PASS) {
		// 未実装
		return null;
	}

	//ただ、何か文字を返すメソッド
	public String runSample(String ID) {
		// 未実装
		return null;
	}
}
```

``` java
//DBが無い時にリストデータを返すメソッド
		Test1 hoge = mock(Test1.class);
		List<String> list = Arrays.asList(new String[] { "a","b","c" });

		when(hoge.runSample("one","1")).thenReturn(list);

		assertEquals( "a", list.get(0));

		List<String> list_結果= hoge.runSample("one","1");

		for (int i=0; i<list_結果.size(); ++i)
		{
		    System.out.println(list_結果.get(i));
		}
```
（uniqにブロックを与える書き方は http://ruby-doc.org/core-2.2.0/Array.html を参照）

参考資料
junit基礎　https://qiita.com/ryuutamaehara/items/c8efb304b73cc0542e6f

テストでよく使う検証メソッド一覧 https://qiita.com/opengl-8080/items/e57dab6e1fa5940850a3 を参照
PhpStorm + Xdebug「ソース位置が見つかりません」とエラーが出た際の対応

# 環境
windows 10
wsl2
Ubuntu20.04
Docker version 20.10.5
docker-compose version 1.28.5
Laradockを利用

# 解決方法
PhpStormで設定したサーバーの名前とWEBサーバーの環境変数`PHP_IDE_CONFIG`を同じものにする

```bash
export PHP_IDE_CONFIG="IDEで設定したサーバーの名前"
```

## サーバーの名前って
設定(Ctrl+Alt+S) > 『言語 & フレームワーク』>『PHP』>『サーバー』
で作成するサーバー設定につける名前
![server_name.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214310/a782235d-4abe-242d-e0fb-e270317dee7b.png)

## 何が起きたのか
Laradockを利用するとデフォルトで`PHP_IDE_CONFIG=laradock`に設定されており、XdebugからIDEにリクエストする時この値が含まれます。
IDEはこの値でサーバーを探し、パスマッピングから実行されたファイルを探し出し開いてくれる。　という仕組みでした。
自分はサーバーの名前を適当に"debug"にしたためIDEは「laradockなんてサーバー無いから実行されたファイルを見つけられないよ！」となったわけです。
なのでLaradockの場合は.envファイルの`PHP_IDE_CONFIG`を変えるかIDE側のサーバー名を`laradock`に変えればいいと思います。

# 参考サイト
https://stackoverflow.com/questions/48977304/docker-phpstorm-xdebug-cant-find-source-position-error
Gentoo Linuxを構築する上での用語集

#目的
私はGentoo Linuxを構築する上でわからない用語だらけで苦戦しました
正直Linuxすらよくわかっていなかったです
ここに調べた用語をまとめました
今後Gentoo Linuxを構築する方に少しでもスムーズに進められるように書かせていただきます
・[Gentoo Linux構築の手順　パート1](https://qiita.com/Goto_Kazuhide/items/9119186f9fb1bede1009)
・[Gentoo Linux構築の手順　パート2](https://qiita.com/Goto_Kazuhide/items/07eb5304c806a2dad793)
・[Gentoo Linux構築の手順　パート3](https://qiita.com/Goto_Kazuhide/items/cf671bf65f5f984abf21)
・[Gentoo Linux構築の手順　パート4](https://qiita.com/Goto_Kazuhide/items/fafe5ba5188f44be0433)
・[Gentoo Linuxを構築する上での用語集](https://qiita.com/Goto_Kazuhide/items/1ea550fe910255b1d24e)

#Gentoo Linux

自分に必要なシステムだけを入れることができるフレキシブルなLinux
無駄がないためとても軽い


#OS
パソコンを動かしたり、管理したりする最重要ソフトウェアのこと

##基本的役割
ハードウェアの抽象化
リソース管理
利用効率の向上

##構成
カーネル
シェル
GUI
ライブラリ

##種類
Windows　　個人用
Mac　　　　個人用
Linux　　　サーバ－用

#Linux
OSの１種

##Linuxでできること
WindowsやmacOSのようにパソコンの操作ができる
CUI操作を基本としている
ファイルやフォルダの検索
インターネット検索

##ディストリビュージョン
いろいろなLinux の種類

##Linuxの代表的なディストリビュージョン
1 Red　Hat Enterprise Linux(RHEL)
2Ubuntu(ｳﾌﾞﾝﾄｩ)
3CentOS(セントオーエス)

#カーネル
OSの中核
シェルとハードウェア(キーボードやマウス、CPU、ディスク)の通訳ができる唯一のソフトウェア
シェルで叩かれたコマンドでカーネルを通してハードウェアに指示をだす

#シェル
カーネルに直でつながっているチャットインターフェイスである
ユーザーとカーネルの仲介役
シェルで叩かれたコマンドでカーネルを通してハードウェアに指示をだす

#シンボリックリンク
別のファイルから本ファイルをみれるようにすること
ほぼ同じ仕組みをWinodwsでは「ショートカット」、macOS（Mac OS X/旧Mac OS）では「エイリアス」（alias）という

#デバイス
特定の機能・用途を持った部品や装置

#ブロックデバイス

単なるファイルの読み書き以外にランダムアクセスができるデバイスのこと
HDD や SSD などのストレージデバイスがそれにあたる
ブロックデバイスは通常、直接アクセスするものではなく、そこにファイルシステムを作成し、
それをマウントすることでファイルシステム経由で使用する。

#マウント
コンピュータに接続した機器やメディアをコンピュータに認識させ、使える状態にすること

#BIOS
パソコンの電源が入って最初に動く、主にハードウェアを制御するプログラム

#セキュアブート
パソコンの電源を入れたあとに、このソフトは動かしていいかどうかチェックする機能
ここで問題があると判断されたソフトは起動しない

#オススメ参考書
[日経Linux 2021年 3 月号](https://amzn.to/3svQ9n7)
Docker 初心者チートシート

# Docker 初心者のためのチートシート
このページは随時更新していきます。
ターミナルでのコマンド一覧です。


### ログイン
```
$ docker login
```

### Pullする
```
$ docker pull {IMAGE_NAME:TAG_NAME}
```

### Docker imageのリストの確認
```
$ docker images 
```

### コンテナに入る 
```
// すでにあるコンテナに入る
$ docker exec {CONTAINER_NAME}

// 動いているコンテナに入る
$docker exec -it {CONTAINER_NAME} bash
```

### Runの一覧
```
// imageからコンテナを作る
$ docker run {IMAGE_NAME}

// imageからコンテナを作ってから入る 
$ docker run -it {IMAGE_NAME:TAG_NAME} bash

// すでにあるコンテナを指定してrun
$ docker run --name {CONTAINER_NAME} -it {IMAGE_NAME:TAG_NAME} bash
```

### コンテナの確認
```
$ docker ps -a
```

### ファイルの作成
```
touch {FILE_NAME}
```

### コンテナから出る
```
// 完全に出る
$ exit

// 「コンテナを動かしたままにしたい」「止めたくない」という場合
command + p + q
(コマンドでなく、ショートカット)
```

### リスタート
```
$ docker restart {CONTAINER_NAME or ID}
```

### コミット
```
$ docker commit {CONTAINER_NAME or ID} {NEW_Docker_image_NAME}
```
Ruby と Ruby on Rails の違い

##この記事の目的
Railsを学んでいく過程で、純粋なRubyとの間にどのような違いがあるのかを、気づいた時にその都度アウトプットすることで理解を深めていくことを目指します。
#メソッド編
・Rubyでは中身が空のまま定義されたメソッドは何も実行しません。しかしRailsでは中身が空のまま定義されたメソッドでも何らかの振る舞いをする場合があります。例えば、「AplicationController」クラスを継承したクラスの中のメソッドで静的ページのビューを出力することのみを目的とするメソッドの場合は、その静的ページのURLへのルーティングがなされ、対応するビューのファイルが作成されてさえいれば特に中身がないアクションでも動作します。
#モジュール編
・Rubyでは作成したモジュールを使う際にincludeを使って明示的に読み込む必要がありますが、Railsではその必要はなく、特に何もしなくてもモジュール内で定義したメソッドを使うことができます。
GASのタイムゾーンについて

new Date();で実行された際の日時を取得した際にぜんぜん違う値を取得されてしまった。
タイムゾーンがおかしいのではと思うが新しいスクリプトエディタにそれらしい設定箇所が見当たらない。

右の方にある「以前のエディタを使用」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315284/1df44121-f7c7-500a-ec4f-1edcce949d77.png)
何かダイアログが出てくるが無視、閉じる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315284/75e6bdb6-f359-7ff9-c86d-ac1e8f881266.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315284/0253fec7-9b2d-00d4-e228-dfbec411b35f.png)


保存して解決

現場からは以上です。

ってかGoogleさん新しいエディタで設定できるようにしてくださいね。
NoMethodError -よく発生するRubyの例外クラス-

# はじめに
初学者です。おそらく一番悩まされたエラーなので備忘録としてまとめました。
間違いあればご指摘お願いします！

追記　3/16 問題点の提示して頂きましたので修正しました！
### 修正箇所
**nilClassについて**修正いたしました。
→[参考記事様](https://qiita.com/scivola/items/da2480ca4597a7dcf73d)

[参考記事様](https://www.ryotaku.com/entry/2019/02/18/231458)「NoMethodError・nil:NilClass」の原因
参考文献 「プロを目指す人のためのRuby入門」

# NoMethodError
存在しないメソッドを呼び出そうとしているときに発生します。

考えられる原因はいくつかあります。

- メソッド名を間違えちゃったパターン　＆　レシーバが想定に対してnilになっているパターン
- レシーバ(※1)の型（クラス）が想定していた型じゃないパターン

(※1)[レシーバについて](https://qiita.com/you8/items/e5f5c27cfed60a23fa75)

# 対処法

- ControllerとViewでスペルミスが無いか確認する
- Controllerでコードの書き間違いが無いか確認する
- そのページで対象のアクション（method）が定義されているか、インスタンス変数の(流れ)順番を意識して見なおす

対処法を確認したところで、詳細を見ていきます。

## メソッド名を間違えちゃったパターン　＆　レシーバが想定に対してnilになっているパターン[nil:NilClass]
**メソッドがない = 指定しているメソッドの表記が間違えているというパターン**

メソッドを定義しているController,Viewを確認すると間違いが見つかるのでは無いかと思います。
初学者の自分はよく単数形と複数形を間違えていました。
あとインスタンス変数の＠を書き忘れてた時、場合によってはNoMethodErrorになります。

例を見ていきます！
下記の表記はよくあるコメント投稿サイトの一部です。
ここで両サイドにあるインスタンス変数に注目してください。

```ruby:posts_controller

def index
   @posts = Post.all.order
end
```

```ruby:index.html.erb
<% @posts.each do |post| %>　　
  <div class="post" data-id=<%= post.id %> data-check=<%= post.checked %>>
    ・
    ・ 省略してます
    ・
  </div>
<% end %>
```

上記ではすでにコントローラーにて@postsが定義されています。ここでコントローラーの表記を間違えたとします。

```ruby:posts_controller

def index
   posts = Post.all.order　#インスタンスでなくローカルで定義したとします。(@の忘れ)
end
```

```ruby:index.html.erb
<% @posts.each do |post| %>　　
  <div class="post" data-id=<%= post.id %> data-check=<%= post.checked %>>
    ・
    ・ 省略してます
    ・
  </div>
<% end %>
```
これではコントローラーがposts(ローカル)なのに対し、ビュー側が@postsとなり、eachで表示しようとしています。
この場合NoMethodErrorになりました。
![nomethod2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1101585/5354c6f2-e98a-4c57-2bea-f6b005a4ccc9.png)

### NilClassについて

nil とは、何かが存在しないことを表すために用いられるオブジェクトのことを指します。

nilは「NilClassクラスのオブジェクト」なので、「NilClass」クラスに定義されていないメソッドを使用すると、エラーが発生します。

上記のエラー文の「undefined method 'each' for nil:NilClass」に注目します。
直訳すると「nil:NilClassに対して、'each' は未定義のメソッドです」という意味です。


このエラーの原因は、@以外にも以下のようなスペルミスがないか入念なチェックが必要かと。

```ruby:正解
@name.length
```

```ruby:間違い
@neme.length
```


## レシーバのクラスが想定していた型じゃないパターン
**文字列でなくシンボル型で呼び出してしまったというのがよくあるパターンです**
そんなことで！？ということでもやらかしてしまうのコワイ...(-_-)
Spring Security使用時に、Http://localhost:8080/h2-console で接続できない（CSRF対策）



#Spring Security使用時に、Http://localhost:8080/h2-console で接続できない場合、試したこと。

###①まず、ログイン不要ページに`h2-console/**`を追加します。

####ログインしていなくてもHttp://localhost:8080/h2-console/～ にアクセスできるように。
※`**`はいずれかのファイル、という意味の<font color="OrangeRed">正規表現</font>。
`/webjars/**` `/css/**` `/login`(ログイン画面) `/signup`（ユーザー登録画面）、などと一緒に直列で書く。（下は一例）

```SecurityConfig.java
@Override
	protected void configure(HttpSecurity http) throws Exception {
		//ログイン不要ページの設定
		http.authorizeRequests().antMatchers("/webjars/**").permitAll().antMatchers("/css/**").permitAll()
				.antMatchers("/login").permitAll().antMatchers("/signup").permitAll().antMatchers("/h2-console/**")
				.permitAll().anyRequest().authenticated();
	}
```

###②接続が拒否されないように下の一文を追加する。

```SecurityConfig.java
@Override
	protected void configure(HttpSecurity http) throws Exception {

		//h2consoleを使用可能に（SpringSecurityを入れている場合consoleで接続を拒否される）
		http.headers().frameOptions().disable();
	}
```

###③最後に、CSRF対策時に追加する項目。

#####理由：connectする時に、formを送信するため。CSRF対策では、トークン無しのformはログイン失敗とみなされる。なのでignoreさせます。

```SecurityConfig.java
@Override
	protected void configure(HttpSecurity http) throws Exception {

		//h2-consoleのCSRF対策	
		http.csrf().ignoringAntMatchers("/h2-console/**");
	}
```


##<font color="MediumAquaMarine">完成図</font>

```SecurityConfig.java
@Override
	protected void configure(HttpSecurity http) throws Exception {
		//ログイン不要ページの設定
		http.authorizeRequests().antMatchers("/webjars/**").permitAll().antMatchers("/css/**").permitAll()
				.antMatchers("/login").permitAll().antMatchers("/signup").permitAll().antMatchers("/h2-console/**")
				.permitAll().antMatchers("/admin","/userDetailAdmin/**").hasAuthority("ROLE_ADMIN").anyRequest().authenticated();
		//ログイン処理
		//ログイン処理のパス、ページの指定、ログイン失敗時の遷移先、
		//ログインページのID・パスワード、ログイン成功時の遷移先
		http.formLogin().loginProcessingUrl("/login").loginPage("/login").failureUrl("/login")
				.usernameParameter("userId").passwordParameter("password").defaultSuccessUrl("/home", true);
		//ログアウト処理
		http.logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")).logoutUrl("/logout")
				.logoutSuccessUrl("/login");
		//h2-consoleのCSRF対策
		http.csrf().ignoringAntMatchers("/h2-console/**");
		//h2consoleを使用可能（SpringSecurityを入れている場合consoleで接続を拒否される）
		http.headers().frameOptions().disable();
	}
```

###<font color="Magenta">追記：</font>csrf対策はデフォルトでONになっているので、ignoreを使わず、`http.csrf().disable();`とするのもありです。
CSRF対策をOFFにします。
一般的にはそう出てきますｗ
でもCSRF対策実装したいよね、、ということなので、よろしくお願いします。

#まとめ
埋め込み式で便利なh2-console、Spring Security上で動かすときは、適宜SecurityConfig.javaに書いて対応しよう、という記事でした。

ご精読ありがとうございました。
Docker Desktop for Windows をダウングレードしたい！

ローカルPCで開発作業をするのに Docker Desktop for Windows は便利なのですが、今月になって登場した V3.2.1 がどうもやたらと不安定(Dashboard 画面がかたまるってどういうことよ…)。V3.1.0 は比較的安定していたので戻したいと思ったのですが、V3 以降 auto-update がデフォルト…というか無効化できなくなっているとのことで。 [auto-update なんてヤメレ](https://github.com/docker/roadmap/issues/183) という要望は V3 リリース当初から出ているものの、まだ議論中の様子。

仕方ないので、V2 の最終版 V2.5.0.1 まで戻すことにします。

- [リリースノート](https://docs.docker.com/docker-for-windows/release-notes/) のページを開く
- "Docker Desktop Community 2.5.0.1" のリンクを探してダウンロード、インストール

以上です。あ、V3 は事前にアンインストールしましょう。別にエラーになるわけではありませんが "Already up-to-date" とか言われてインストールが効きませんので。
./cryptlib.h:62:11: fatal error: 'stdlib.h' file not found

# 症状
`rbenv install`や`openssl`のインストールのときに引っかかるだけかもしれないけど。

```sh
$ rbenv install 2.3.4
Downloading openssl-1.0.2u.tar.gz...
-> https://dqw8nmjcqpjn7.cloudfront.net/ecd0c6ffb493dd06707d38b14bb4d8c2288bb7033735606569d8f90f89669d16
Installing openssl-1.0.2u...

BUILD FAILED (OS X 10.15.6 using ruby-build 20200224)

Inspect or clean up the working tree at /var/folders/m6/cq5lzgy56_j2bs6x0665h7dh0000gp/T/ruby-build.20210315152950.75743.aGLcgu
Results logged to /var/folders/m6/cq5lzgy56_j2bs6x0665h7dh0000gp/T/ruby-build.20210315152950.75743.log

Last 10 log lines:
/usr/bin/perl ../util/mkbuildinf.pl "clang -I. -I.. -I../include  -fPIC -fno-common -DOPENSSL_PIC -DZLIB_SHARED -DZLIB -DOPENSSL_THREADS -D_REENTRANT -DDSO_DLFCN -DHAVE_DLFCN_H -arch x86_64 -O3 -DL_ENDIAN -Wall -DOPENSSL_IA32_SSE2 -DOPENSSL_BN_ASM_MONT -DOPENSSL_BN_ASM_MONT5 -DOPENSSL_BN_ASM_GF2m -DSHA1_ASM -DSHA256_ASM -DSHA512_ASM -DMD5_ASM -DAES_ASM -DVPAES_ASM -DBSAES_ASM -DWHIRLPOOL_ASM -DGHASH_ASM -DECP_NISTZ256_ASM" "darwin64-x86_64-cc" >buildinf.h
clang -I. -I.. -I../include  -fPIC -fno-common -DOPENSSL_PIC -DZLIB_SHARED -DZLIB -DOPENSSL_THREADS -D_REENTRANT -DDSO_DLFCN -DHAVE_DLFCN_H -arch x86_64 -O3 -DL_ENDIAN -Wall -DOPENSSL_IA32_SSE2 -DOPENSSL_BN_ASM_MONT -DOPENSSL_BN_ASM_MONT5 -DOPENSSL_BN_ASM_GF2m -DSHA1_ASM -DSHA256_ASM -DSHA512_ASM -DMD5_ASM -DAES_ASM -DVPAES_ASM -DBSAES_ASM -DWHIRLPOOL_ASM -DGHASH_ASM -DECP_NISTZ256_ASM -I/Users/hogeuser/.rbenv/versions/2.3.4/include   -c -o cryptlib.o cryptlib.c
In file included from cryptlib.c:117:
./cryptlib.h:62:11: fatal error: 'stdlib.h' file not found
# include <stdlib.h>
          ^~~~~~~~~~
1 error generated.
make[1]: *** [<builtin>: cryptlib.o] Error 1
make[1]: Leaving directory '/private/var/folders/m6/cq5lzgy56_j2bs6x0665h7dh0000gp/T/ruby-build.20210315152950.75743.aGLcgu/openssl-1.0.2u/crypto'
make: *** [Makefile:287: build_crypto] Error 1
```

# 調査
Cわからないから本格的な情報調査というより、ネットで同様の事例が起きた人を探した
[xcode-select --install](https://github.com/microsoft/vcpkg/issues/3913)
[export SDKROOT=$(xcrun --sdk macosx --show-sdk-path)](https://github.com/microsoft/vcpkg/issues/4355#issuecomment-591767338)

# 上記を試した結果
自分の場合は`export SDKROOT=$(xcrun --sdk macosx --show-sdk-path`でうまくいきました！


前もこの事例あったから、将来の自分のために。

(多分Avira antivirusユーザ限定)rbenvに限った話で言えば、以下も発生したから、↑をやったときにもしかしたらこれも起きるかも
[アンチウイルスソフトの影響で ruby のインストールに失敗した](https://qiita.com/silmisilon/items/cbefc1d470ee589f95b0)
高位合成言語アセンブラを作る。 その21

# 概要

高位合成言語アセンブラを作る。
俺言語から、verilogコードを生成する。


# コードを投入。

九九

```
10 a=1
20 b=1
30 ?=a*b
60 a=a+1
70 #=a<10*30
90 b=b+1
100 a=1
110 #=b<10*30
120 #=120
```

# 生成したコード

```
module ore(input clk, input rst, output reg [7:0] out);
	reg [7:0] a;
	reg [7:0] b;
	reg [7:0] pc;
	always @(posedge clk)
	begin
		if (!rst)
		begin
			a <= 0;
			b <= 0;
			pc <= 10;
		end
		else
		begin
			case (pc)
			10:
			begin
				a <= 1;
				pc <= 20;
			end
			20:
			begin
				b <= 1;
				pc <= 30;
			end
			30:
			begin
				out <= a*b;
				pc <= 60;
			end
			60:
			begin
				a <= a+1;
				pc <= 70;
			end
			70:
			begin
				if (a<10)
				begin
					pc <= 30;
				end
				else
				begin
					pc <= 90;
				end
			end
			90:
			begin
				b <= b+1;
				pc <= 100;
			end
			100:
			begin
				a <= 1;
				pc <= 110;
			end
			110:
			begin
				if (b<10)
				begin
					pc <= 30;
				end
				else
				begin
					pc <= 120;
				end
			end
			120:
			begin
				pc <= 120;
			end
  			endcase
		end
	end
endmodule
module test;
	reg clk,
		rst;
	wire [7:0] out;
	ore u(.clk(clk), .rst(rst), .out(out));
	initial
	begin
		clk = 0;
		rst = 1;
		$monitor("%d", out);
		#2
			rst = 0;
		#2
			rst = 1;
		#2500
			$finish;
	end
	always
		#1
			clk = ~clk;
endmodule
```

# 成果物

https://embed.plnkr.co/plunk/eJBnbuAbOycsCsLN


以上。
Docker composeでngrokを簡単に使う方法（QOL爆上がりな件）

docker-composeで開発をしていて、お手元のスマートフォンでの確認や、他の人にサービスを見てもらう際に、
毎度デプロイすることは難あり。
そういった時に、`ngrok`を使用すると、簡単にローカル環境を外部に一時的に公開することができる。

今回はLaravelの開発においての使用とし、開発環境はdockerである。
laravelが8000ポートで、
データベースが3000ポートとしている。

また、`brew install ngrok`を済ませていることが前提。

#手順
#1 Dockerを起動しておく

```
docker-compose up -d
```

#2 ngrokを起動する

```
ngrok http 8000
```

このコマンドでngrokが起動する。

この時の注意点は、
docker自体にngrokなど特に何もインストールする必要はなく、
起動したいサーバーのポート番号を指定する。

laravelアプリは`localhost:8000`だから、
`ngrok http 8000`となる。
データベースのポート番号、3000は指定する必要はないと確認している。

そうすると、ngrokの起動画面に切り替わり、`forwarding`と記載されているurlが実際にchromeなどでアクセス
する際のurlになる。

ngrokの使用を停止する時は、
`controll + c`
で止まる。

これ使ってQOL爆上がりです。
【React.js】別ファイルに関数をまとめてexportsを利用して呼び出す。

# 開発環境
React.js

# 概要
React.jsで関数を共通化して別ファイルにまとめたときに、HTMLのscriptタグを使い呼び出すのは面倒だと思いました。JavaScriptのexportsを使い呼び出すことができることを知りましたので、備忘録として記事に残しておきます。

## import.jsとexport.jsファイルを作成
import.jsからexport.jsの関数を呼び出していきます。

```javascript:export.js
exports.criminalIsKogoro = function () {
  console.log("犯人は毛利小五郎");
}

exports.detectiveCriminal = function (name) {
  console.log("犯人は" + name);
}

const criminalIsAgasa = function () {
  console.log("犯人は阿笠だ");
}
```
比較するためにcriminalIsAgasaだけはexportsしないようにしておきます。


```javascript:import.js
import exportFunction from 'export.jsのパスを記述'
// または
// var exportFunction = require('export.jsのパスを記述');

exportFunction.criminalIsKogoro; // "犯人は毛利小五郎"
exportFunction.detectiveCriminal("元太"); //"犯人は元太"
exportFunction.criminalIsAgasa; // error. exportFunction.criminalIsAgasa is not a function
```
このようにexportsをしておかないと外部のファイルから読み込むことができないことが分かりました。



# 参考
https://hacknote.jp/archives/22850/

https://qiita.com/shtwangy/items/e89466ec3a5cf4e4554c
Terraform Cloudを使っていて、モジュールのパスが通らない

Terraformのtfstateを、[Terraform Cloud](https://app.terraform.io/)で管理している私。そんな私が、今までステージングで構築していた環境と同一構成の本番環境を構築しようとしています。そんな時、今までは何事もなく動作していたTerraformが、`terraform plan`を走らせた途端にこんな感じでエラーを吐いてうんともすんとも言わなくなることがあります。

```
Error: Unreadable module directory
```

短期間で二度もこの問題にぶち当たりまして、流石に記録しておかないとまたやるぞ、と思い、ここに記す次第です。**私は未来の自分を全く信用しておりません。**

## 対処方法

WorkspaceのSetting > Generalの中に、「Execution Mode」という項目があります。これを「Remote」から「Local」に切り替えて保存します。

![スクリーンショット 2021-03-15 15.27.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7201/d3652f7e-6696-715a-45a3-fc60430ca7bf.png)

ローカルに戻り、`terraform plan`を叩いてみてください。無事、動作することが確認できるでしょう。

## 問題の所存

要するに、リモートでstateを管理しようとしているのと同様、Terraform側でモジュールについてもリモートを参照しているわけです。ところが、私はTerraformの実行はLocalでやる想定でおりますので、Github連携も何も、Terraform Cloudとはstateとvariable以外の何のソースも共有しておりません。そんな時に、このエラーが発生するのです。
laravelとreact 一緒に使うけど 厳密に言うと APIじゃない件について

めっちゃ時間無駄にしたので戒めのためのメモ

状況
laravelで作ったサービスをあとからreact化しようとした際 遭遇
axiosにて記事情報を post すると 何故か リレーションしているuser_idがnillになり処理が完了しない｡ 


結論
･routes/api.phpにかかない
普通にweb.phpに書く

ここに書くとpostするとauthのガードに引っかかってuser_idがnillになってエラー

※
ちなみに私は トークン とかいろいろ 迷子になって laravel passportまでいれて結局関係にことにあとで気づきました･･｡ 勉強にはなったが｡｡｡


ソース
https://teratail.com/questions/234875
「VBA にはビット NOT 演算子がない」?

誰もが当たり前だと思っている自然の法則や科学の知識。

でもそれは本当なのでしょうか?

答えは, やってみなくちゃ分からない, 大科学実験で。

………

VBA にはビット NOT 演算子がない(ので自分で自作するしかない)みたいな記事を 2 本も観測しました。

> ちなみにNotはビット演算とは挙動が違うのでオリジナルを作るしかない。
> 　　― [VBAでビット演算(論理演算) - t-hom’s diary](https://thom.hateblo.jp/entry/2015/08/09/101751)

> 気づくと思うけど、ビット反転に相当する「Not」が無い。そこで「ビット反転」をするには、関数を自作する必要があるのです。
> 　　― [VBA でビット反転など - negationの日記](https://negation.hatenadiary.org/entry/20160109/1452278177)

本文を読むと, 通常論理演算子として扱われる`And`や`Or`の実態がビット演算子であるという認識は共通のようです。 おそらく以下のような推論のもとにこの結論を出したと思われます。

1. ビット AND は片方のオペランドが 0 であれば必ず 0 になる。 これは片方が False であれば False になる論理積の動作と合致している。
2. 同様にビット OR の動作は片方が True なら True になる論理和の動作と合致している。
3. しかし, ビット NOT では True にかけると False つまり 0 にはならない。
4. よって`Not`演算子はビット NOT ではない。

一見妥当に見えますが, この推論には以下の「隠れた前提」があります。

- True の内部表現は 1 である。

この前提が正しいかどうか, 以下の式をイミディエイトウィンドウに入力してみましょう。

```
? True + 0
```

結果は?

```
-1
```

そう, VBA における True の内部表現は -1 なのです。 というよりは, すべてのビットが立っているといったほうが正しいでしょうか。

True が「すべてのビットが立っている」ならビット NOT をかければ「すべてのビットが降りている」状態, つまり 0 つまり False になります。 よって先程の推論は根底から崩れます。

では最後に確かめてみましょう。

```
? Not 3
-4
```

はい, `Not`はビット NOT 演算子でした。 だから, やってみなくちゃわからない, 大科学実験で。

なお, 件の記事は二本とも 5 年前というかなり古いものですから, 実は当時から挙動が変わった可能性もあります。 四半世紀も放置されていると言われる VBA なのでないとは思いますが…。
サイバーエージェントの3dayハッカソンに参加してきたので所感

初投稿です(CAの方にブログ書くのをお勧めしていただいたのではじめの一歩!)

3/12-3/14の三日間でサイバーエージェントの3dayハッカソンに参加してきました。
技術的な話はしませんが、これからCAの説明会やインターンシップに出ようと思ってる人は是非

今回初めてサーバーサイドの人と連携してゲーム制作をしました。ランキングとユーザー認証の実装を必須とし、お題はシューティングorパズルで、自分のチームはシューティングを作りました。
（僕はインゲーム部分担当）
初めてサーバーサイドと一緒に開発して思ったことは、互いに互いの言語や、使い方の知識がなく、情報共有が大変でした。
また、自分のチームはガチャの実装もしたので、初めてソシャゲを1から作る体験をしたような実習となりました。ガチャやランキングがあることで意識するゲームデザインなども出てくるので、普段とはかなり違う目線でゲーム開発を出来たと思います。

3日目終了後にはCAのSGE(ゲーム系子会社の協力体制的な)の説明や、社員さんによるLT会を開いていただきました。特に木原さんのお話(エンジニアとして大事なこと)は、個人の本音を聞いてる感じがしてとてもよかったです。
最後にグループに分かれて懇親会をしました。コロナ中の新卒研修のお話や、リモートワークのお話などを聞けて、短い時間でしたがとても楽しかったです。

こんな感じでふわふわした感じで終わってしまいますが、技術的なことを何も載せないのはあれなので最後に社員さんにお勧めされた書籍の紹介を(ダイマ)

https://gihyo.jp/book/2021/978-4-297-11927-0

Unityの技術書ですが、これからUnityを始める人向けではなく、ある程度やってる人が製品レベルまで完成度を上げる際に参考にする書籍かなと思います。

では
Vue.js始めてみました⑥(v-for)

この度Vue.jsを学び始めました。
その勉強内容をまとめます


## v-for

HTML要素を繰り返し表示する時にv-forを使います。

```JavaScript:Vue.js

//配列から順番に値を1つづつ取り出し表示する
<タグ v-for="変数 in 配列>

//指定した回数表示を繰り返す
<タグ v-for="変数 in 最大値>

//配列から値と番号を1つずつ取り出し表示する
＜タグ v-for="(変数,番号) in 配列">
```

## 使い方

```JavaScript:Vue.js
//配列から1つずつ取り出す使い方

<div id="app">
  <ul>
    <li v-for="item in Array">{{ item }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      Array:['いちご','メロン','バナナ','りんご']
    }
  })
</script>
```

上記のではArrayという配列にdataで配列データを用意しておき、それをv-forで順番に取り出し{{ item }}に入れて出力しています。


以下のようにすると配列データを番号付きで出力することもできます。

```JavaScript:Vue.js
//配列から1つずつ取り出し、番号付きで表紙する

<div id="app">
  <ul>
    <li v-for="(item,index) in Array">{{ index }}:{{ item }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      Array:['いちご','メロン','バナナ','りんご']
    }
  })
</script>
```


以上です。
カテゴリカル変数の変換

##初めに
- 機械学習に，カテゴリカル変数（男/女，新宿/原宿/渋谷　みたいな人間にか分からないようにラベルが貼られているもの）を学習させる時には，ダミー変数化（0/1，0/1/2）をする必要がある

##方法

pandasのpd.get_dummiesを使う

````
predict_data = pd.get_dummies(predict_data)
````

　　　　　　新宿/原宿/渋谷
ラベル：新宿  　1    0    0
ラベル：原宿  　0    1    0
ラベル：渋谷  　0    0    1

みたいに行列を使って返してくれる（後で綺麗に書き直します・・・・）

##疑問
新宿/原宿/渋谷　→　0/1/2
と変換する方法との精度の差がが気になる
（正規化しないで済むから行列の方が良い vs 説明変数は少ない方が良い）

後で時間があったらやってみます
ksnctf #5 onion

#onion
[問題](https://ksnctf.sweetduet.info/problem/5)

onion:玉ねぎ
onionに意味はあるのか...?

問題にはアルファベットと数字（a-z,A-Z,0-9）が羅列された文字列が表示されている。
[base64](https://ja.wikipedia.org/wiki/Base64)でデコードしてみる。[ここ](https://www.utilities-online.info/base64)が便利。

10回くらいデコードすると

```
begin 666 <data>
51DQ!1U]&94QG4#-3:4%797I74$AU
 
end
```
が得られた。
これは[uuencode](https://ja.wikipedia.org/wiki/Uuencode)した結果らしい。

```
begin 666 <data>
```
はヘッダー情報で、666は[パーミッショ](https://ja.wikipedia.org/wiki/パーミッション#UNIX.E7.B3.BB.E3.81.AE.E3.83.91.E3.83.BC.E3.83.9F.E3.83.83.E3.82.B7.E3.83.A7.E3.83.B3)ンを表す。ユーザー、グループ、その他に対して、読み込み、書き込みの権限があることを示す。

```
51DQ!1U]&94QG4#-3:4%797I74$AU
```
は問題の文字列をbase64でデコードした文字列で、これをuudecodeすれば良さそう。
[ここ](https://decode.urih.com)でデコードできる。

#まとめ
base64について理解が深まった。
ベーシック認証の付け方【初心者】

【初心者向け】ベーシック認証作業忘れないように、備忘録_φ(･－･

－－－－－－－－－－－－－－－－－

①.htaccessファイルを作成し、以下を追記（既にあれば追記）

```php
AuthType Basic
AuthName "Please enter your ID and password"
AuthUserFile "フルパス\.htpasswd"
require valid-user
 //←改行一行入れる
```

②.htpasswdファイルを作成
▼ココでID/PWを作成(オススメ)
https://www.en-pc.jp/tech/htpasswd.php#htpasswd
※パスワードは8文字以内がオススメ（長すぎると通らない可能性大）
※暗号化方式を「MD5」に（それ以外は通らない可能性大）

③生成されたパスを.htpasswdファイルに追記

④シークレットウィンドウで確認する

◎リリース時は.htaccessから、追記した行を消すのを忘れない！！

－－－－－－－－－－－－－－－－－

いつもベーシック認証の仕方忘れて鳥頭になるので、私的備忘録です。
今回は.htpasswd作成で詰みました。
回避方法は暗号化方式をMD5にしたらいけたけど、、パスワード5文字以内にしたのにCRYPTで通んなかったのなんで…？？:rolling_eyes: