OmniAICreator/Qiita-1.07M huggingface dataset:
[SQLite3]UPDATEで連結文字を値として使う方法

#やりたいこと
##実施前の状態
テーブル名:city

| field1 | field2 | field3 | field4 |
|:----------------:|:-----------------:|:------------------:|:------------------:|
| 北海道  | 札幌市中央区 | NULL |
| 北海道  | 札幌市中央区 | 旭ヶ丘 |
| 北海道  | 札幌市中央区 | 大通東 |
| 北海道  | 札幌市中央区 | 大通西 |
| 北海道  | 札幌市中央区 | 北一条東 |
| 北海道  | 札幌市中央区 | 北一条西 |

##やりたいこと
field1~3の文字列を連結してfield4に入れる
##完成予想

| field1 | field2 | field3 | field4 |
|:----------------:|:-----------------:|:------------------:|:------------------:|
| 北海道  | 札幌市中央区 | NULL |北海道札幌市中央区 |
| 北海道  | 札幌市中央区 | 旭ヶ丘 |北海道札幌市中央区旭ヶ丘 |
| 北海道  | 札幌市中央区 | 大通東 |北海道札幌市中央区大通東 |
| 北海道  | 札幌市中央区 | 大通西 |北海道札幌市中央区大通西 |
| 北海道  | 札幌市中央区 | 北一条東 |北海道札幌市中央区北一条東 |
| 北海道  | 札幌市中央区 | 北一条西 |北海道札幌市中央区北一条西 |

#とりあえず連結文字を取得する方法
SQLite3では```||```を入れることで連結可能

```SQL
"abc"||"123"
=> abc123
``` 
今回はfield1~3を連結したいので

```SQL
SELECT field1||field2||field3 FROM city;
```
#連結文字を使ってUPDATE
通常のUPDATE基本文

```SQL
UPDATE テーブル名 SET カラム = 値 WHERE 条件;
```
今までの流れから

```SQL
UPDATE city SET field4 = (SELECT field1||field2||field3 FROM city);
```
(※全レコードで実施するので条件は付けなかった)

と考えてやってみたが失敗
何度かやってみてとりあえず成功した文はこっち

```SQL
UPDATE city SET field4 = (SELECT field1||field2||field3)
```
#カラムにNULLがあるときの対処
SQLiteでは値がNULLのときに別の値に置き換えてくれる```ifnull```がある

```SQL
SELECT ifnull(カラム1, 置き換え後の値)
```

今回の場合

```SQL
UPDATE city SET field4 = (SELECT ifnull(field1,"")||ifnull(field2,"")||ifnull(field3,""))
```
これでやりたかったことは成功

#思ったこと
1. こんなことする人がいるのかな
2. 調べても出てこなかったからいないのでは
3. 適当に書いてるので他にあれば教えてください
4. 説明が雑すぎて信用できないかも
Laravel 導入手順（未完成）

#Laravel 導入手順 1
Laravel初心者がデプロイ目指してわかったところを記録していくための備忘録
筆者の環境:MacOS

##Composerの導入
Laravelはインストールの他、プロジェクトを立ち上げる度に**Composer**というコマンドラインソフトを使うらしい。
初回は以下のホームページからダウンロードする。

https://getcomposer.org/download

ダウンロードした composer.phar を 
/usr/local/bin/composerへ移動するのでターミナルで以下のコマンドを打つ。

```terminal
cd ~/downloads 
sudo mv composer.phar /usr/local/bin/composer.phar
```
これはパスを通してファイル名だけでコマンドを起動する為の準備です。
なので、任意のディレクトリにcomposer.pharを移動して、毎回そこにcdで移動しても起動すると思いますがそれは大変だしどこへ行ったか分からなくなるので初めからパスの通っているところに動かしておきます。
慣れてる人は ~/bash.rc とかにexportしてパスを通しても同じ結果になると思いますが失敗して上書きすると大変な事になるので上記の方法が安心で簡単。
あと、
cd /usr/local/bin/ で入って

```terminal
ln -s composer.phar composer 
```
とやっておくとコマンド入力する時composerでもcomposer.pharでも動くようになる。
※補足： vs Java
他のサイトによると依存関係の管理を自動化してくれるとの解説があったので、恐らくだけど、ComposerってJavaだとMarvenとかGradleに相当するものだと思います。

#Projectの作成
Composerがインストールできたらプロジェクトを作成出来るようになっているので、
プロジェクトのルートフォルダにしたいところへcdで移動してから、

```terminal:terminal
composer create-project Laravel/Laravel myapp --prefer-dict
```
と打つとmyappという名前のプロジェクトができます。
myappの部分は自分が作りたいアプリの名前を入れる。
あと、スペースで区切られているオプションは入れ替えても動くみたいです。
例えば、
composer create-project Laravel/Laravel --prefer-dict myapp
でも同じ結果でした。（はじめのComposerはコマンド名だから固定）

#プロジェクトが認識されてるかテスト起動する
プロジェクトのルートディレクトリで

```terminal
php artisan serve
```
とするとララベルに（というかPHPに）内臓の簡易ローカルサーバーが立ち上がります。
MAMPとかTOMCATみたいなコンテナのテスト用お手軽版。
で、これを立ち上げて
http://localhost:8000/
にアクセスするとLaravelのサンプルページが表示されます。
終了するときはCtrl+cで。
#Controllerの作成
Laravelのアプリケーションプロジェクトは初期状態でControllerクラスが継承されていないらしい。
代わりに初期状態ではルーティング用のファイルに無名関数でコントローラが書かれている。

```php:web.php
Route::get('/', function () {
     return view('welcome');
}); 
```
しかし、このファイルは本来送られてきた（ユーザーがアクセスしてきた）URLをコントローラーのアクションメソッドへ案内する為のもので、ここでコントロールするべきではないと思います。
やろうと思えば逆に、viewをreturnする代わりにstring型で文字列をreturnする（つまりHTMLタグをここへ書く）でも動く。
ルーティングができているかの動作テストするのにファイル作るのがめんどくさい時とかは役に立ちそう。

さて、コントローラはアプリケーションプロジェクトのルートディレクトリで

```terminal:terminal
php artisan make:controller IndexController  
```
とすればHttp/Controllersフォルダにファイルができています。
なお、最後のIndexContollerは任意の名前にできます。普通はviewの名前＋Controllerにするのが良さそう？
#マイグレーションファイルを作る
自分自身まだよくわかっていないので間違っているかもしれないが、雑な解釈で行くとデータベーステーブルのモデル定義を自動生成してくれる事をマイグレーションというっぽい。
ここに記述したカラムをcreateしてくれる。
.sqlスクリプトファイルとどう違うのかはよく分からない。記法はSQLより簡単だけど似たようなものだと思う。

※「マイグレーション」でググるとマイグレーションとは「移行」という意味だと書いてあったがこの場合はその解釈だとかえって意味不明なので、上記のような解釈で捉えています。

プロジェクトルートで

```terminal:terminal
php artisan make:migration create_tablename_table
```
と打つとマイグレーションファイルができる。
databaseフォルダにmigrationsフォルダができていて、その中に生成したファイルがあるので開いて
テーブル定義を記述する。
（SQLのcreate table に相当することをここへ書く。）
書けたら

```terminal:terminal
php artisan migrate
```
とやるとデータベースにテーブルが出る・・はずが出なかった。
エラーが出た。
Laravelのインストールの仕方によってはこれで成功するらしい。
もう解決したので忘れたが、ここでエラーが出た場合それをコピーしてググるとすぐ答えが出てくるのでその通りにする。

私の場合、envファイルに指定された名前のdatabaseがMySQLになかった。
あとdbのユーザー名とパスワードが違った。
.envファイルを開くとMySQLの項目が見つかるので、そこで使いたいdatabase名などに書き換えればいける。
ユーザー名がroot パスワードなしの場合だと
パスワードは空欄にしておく。なんか入ってたらだめ。
databaseはmysqlコマンドで入ってアプリケーション名とかをつけて作ればいいと思う。
で作った名前で.envに書いておく。

それでやり直したら接続できました。
LaravelのEloquentでリレーション先のデータも含めて取得カラムを指定したい！！

# 概要
LaravelのEloquentを用いて、リレーション先も含むデータを取得したい。
全てのカラムを取得したいのではなく、それぞれいくつかのカラムだけを指定して取得したい。

カラム指定がなければwith()を利用してリレーション先のデータが取得できるのに、カラム指定『select()やget([...])など』を利用するとなぜかリレーション先のデータが取得できない・・・。

# 解決策
select()に指定するカラムの中に外部キーを加えることで、リレーション先のデータの必要カラムも取得できた!!

# 具体例

groupsテーブル

| id               |        name       |      created_at    |  
|:-----------------|------------------:|:------------------:|
|     1            |         baseball  |  1996-07-11 00:00:00   |
|     2            |         soccer    |  1996-07-11 00:00:00   |
|     3            |         computer  |  1996-07-11 00:00:00   |
|     4            |    sciences       |  1996-07-11 00:00:00   |

usersテーブル

| id               |       name 　　  　|      group_id      | age |
|:-----------------|------------------:|:------------------:|:--------:|
|     1            |        Mari       |        1           | 22 |
|     2            |        Hori       |        1           | 25 |
|     3            |        Sori       |        2           | 48 |
|     4            |        Tari       |        1           | 88 |



大雑把ですが以上のようなデータがあり、groupsテーブルとusersテーブルが一対多の関係にあるとします。Laravelの場合だと、まずモデルにリレーション（hasManyとbelongsTo）の参照を記述すると思います。

ただデータを取ってくるだけならば何も問題はないのですが、例えばusersのageとgroupsのnameだけが欲しいって時があると思います。

```php
// カラムを指定せずデータ取得
$groups  = Group::with('users')->get();

// カラムを指定してデータ取得（失敗ver）
$groups  = Group::with('users:age')->get(['name']);

// カラムを指定してデータ取得（成功ver）
$groups  = Group::with('users:age,group_id')->get(['name', 'id']);
```

上の例をみてもらえれば、わかるように、外部キーを取得しないとどうやらリレーション先のデータは取れないようです。
今回の成功verでデータを所得すると、groupテーブルのname,idが取得できます。さらに、リレーション先のusersテーブルの関連するuserのageとgroup_idのみが表示されます。

※ with('users:age, group_id')のようにカラム名の間にスペースが空いているとうまいこと取れなかったので注意が必要。


# 参考
[Laravel 5.5 withで特定カラムを取得する](https://mseeeen.msen.jp/laravel-5-5-get-specified-column-with-with/)


[Laravel 5.7 Eloquent：リレーション: eagerローディング](https://readouble.com/laravel/5.7/ja/eloquent-relationships.html#eager-loading)
【ExcelVBA】「定数式が必要です」でコンパイルできない

# はじめに

職場で事務作業用のマクロの改修を依頼されたので、ちょこちょことコードを直していたところ、**「定数式が必要です」**というコンパイルエラーが突然発生しました。

![vba_compile_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312166/f1953fe8-210c-a0f4-0757-fc17ebe56187.png)

このエラーメッセージは定数の宣言に誤りがある時に出るようなので、最初は私のコードが誤っていると思ってコードを入念に確認しました。
ですが、定数の宣言部分も含めて、どこにもコンパイルエラーになるような箇所が見当たりませんでした。

コードを一通り確認した後は、Excelを再起動したり、OSを再起動したりと色々試してみたものの、いずれも全く効果がありませんでした...

# 解決のヒント

キーワードを変えてあれこれ調べていたところ、[teratailの記事](https://teratail.com/questions/110201)で私と同じような症状の方が質問されているのを発見しました。

> 元々は動いていたExcelVBAのソースに修正を加えたところ、突然Constで定義した定数値が読み込めずにエラーとなってしまいました。

# 解決方法

今回コンパイルエラーが起きたのは標準モジュールだったため、以下の手順でVBAのバグ？を回避することができました。
（※上記のteratailの記事に書かれている方法と実質的に同じです。）

1. 新しい標準モジュールを作る。
2. 新しい標準モジュールに、コンパイルエラーを起こした標準モジュールのコードをコピーする。
3. 元の標準モジュールを解放（削除）する。
4. 新しい標準モジュールの名前を、元の標準モジュールの名前に置き換える。

# まとめ

目の前の問題はクリアできたものの、何が原因でVBAのバグ？に触れてコンパイルエラーになったかが全く分からないので、同じような症状がいつ再発するか分からないのが気がかりです...
SEOに関する基礎知識！クローラー対策とは

#はじめに
最近、SEOについて勉強し始めました。
今まではとりあえずコードを書くことだけに専念してきたのですが、
IT業界に入ったからにはSEOの知識も必要になってきたんです！
実際私はまっっったく知識がない状態でIT業界に飛び込みましたが、
会議などでSEOについて議論されていてもついていけず:baby:
そもそもコードを書くにしても、SEOを意識したコーディングが必要になるので、やはり理解しなければいけません！
単にコードばっかり書いててもダメだと反省し少しずつ勉強を始めました！:thumbsup:

そこで今回は、SEOの基礎中の基礎である**クローラー対策**について簡単にまとめました！
まだプログラミングの学習を始めたばかりの方でも、
業界の最低限の知識として必ず把握すべき内容ですので、ぜひざっくりとでも抑えておいてください！

#そもそもクローラーとは
私たちがサイトを作成した際、何も努力しなくても検索結果に表示されると思ったら大間違いです！
実は、"クローラー"というプログラムが存在を認識したサイトだけが検索結果に表示されます。

つまりクローラーとは…
**Google等の検索エンジンが、WEB上にあるファイルのデータを収集するためのプログラムのこと**です！
Google等の検索エンジンでは、クローラーが集めたWEBサイトのデータを検索用データベースに常に保管しています。
私たちがGoogle等でWEBサイトを検索すると、その検索キーワードをもとにして、保存されているWEBサイトのデータから当てはまるサイトをピックアップして検索結果に表示させています。

クローラーは常にWEBサイトを巡回し、新規サイト等を探し回っています。
しかし、クローラーが漏れなく全てのサイトを探してくれる訳ではないんです。
クローラーが見つけやすいようにこちらが工夫してあげないと、せっかく作成したサイトがクローラーに見つけてもらえず検索結果に表示されない:sob:なんてことが発生してしまうのです！

つまりクローラー対策とは、**クローラーにサイトを見つけてもらいやすくする為の対策のことを指します！**
そしてクローラーにとっての巡回のしやすさのことを**クローラビリティ**と呼びます！

#クローラー対策の方法
###①サイトの階層構造を浅く作成する
トップページから遠くなればなるほど、そのページはクローラーに見つけてもらい辛くなります。
つまり階層が深くなればなるほど、見つけてもらえない！
なので見つけてほしいページのリンクはトップページから浅く設定しないといけません！

###②サイトを更新する
クローラーはいつも、サイトの更新がないか探し回っています。
細かくても良いので更新してあげることで、クローラーが見つけてくれやすくなります。
記事の更新などでもOK！

###③外部リンクや内部リンクを増やす
クローラーは、リンクを辿ってサイトを発見します。
その為検索エンジンにヒットさせたいサイトは、リンクを貼っておくことで探してくれやすくなるのです。
できればもちろん外部リンクを貼りたいのですが、外部のサイトにリンクを貼ってもらうって結構難易度高いですよね:sweat:
それなりに情報量があって他者から評価されるサイトでなければ厳しそうです。。
とはいえ内部リンクでも効果はあります！
ただし闇雲にリンクを貼るのではなく、関連性のあるコンテンツ同士を繋げるのがポイントです！
そうすることによって検索エンジンからの評価が上がります！

###④パンくずリストを設置する
パンくずリストを設置することで、クローラーはそのサイトの構造を理解しやすくなりクローラビリティが向上します！
パンくずリストを設置していると、ユーザー側から見ても、自分がどのページにいるかわかりやすいので良いことだらけですね！

###⑤Fetch as Google機能を使う
GoogleにはFetch as Googleという機能が存在します。
この機能は、自分のサイトをクローラーに見つけてもらうよう申請できるものです！
どうやら申請した後、見つけてくれるまでに少し日数がかかる場合もあるようですが、
それでも自分で申請できるというのは有難いです！

#さいごに
ざっくりとですが説明させて頂きました！
クローラー対策は、細かく調べるともっとあるのですが、今回は代表的な５点に絞っています。
こういう対策も必要なんだなーくらいにでも把握しておいて損はないかと思います！
picoCTF 2018 Buttons - Points: 250

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/40b981f2-2267-ab86-245c-cb3885cfcaac.png)

#解いてみた

200ポイントを全部終えて250ポイントゾーンに入りました。

リンクにアクセスしてボタンを押すだけ？の簡単な問題です。

リンクにアクセスしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/8b15d2a0-7182-6696-127d-8252fca7a992.png)

素直にボタンを押してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/975d1b70-f2f2-817d-0352-53b603f28c0c.png)

ボタンではないが。。。と思いつつリンク（ボタン？）を押してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/51f7b1e1-0c3f-02ed-15aa-deafbd709e6f.png)

アクセス失敗の文字とともに謎の80年代フォークソングが流れてきましたよ。
怪しいのは2つ目のリンクのページなので、このページのソースを見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/7163bd3b-2040-a2ff-db5e-5fb7d5a66c5a.png)

button2.phpにhrefしているだけ？
普通php相手にはsubmitとかしそうですが。

ボタン1のソースも見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/17a6abc7-98d0-4ff2-5839-e56176fd1fb8.png)

button1.phpにPOSTでsubmitしているだけ。
ということでbutton2.phpにsubmitしてみたくなりました。

1ページ目のソースを少し編集してみます。chromeのF12で。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/f90166b9-d7d9-b8a9-7f9d-eb583f05b0c9.png)

本来button1.phpのところをbutton2.phpに書き換えてクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/7696d385-9a7e-81da-8c4d-6fe323c5dff2.png)

できた。
djangoメモ

# TL;DR

djangoを使ってみて詰まったところのメモ帳。
自分の記憶力を信用してはいけない（戒め）。

## DBの更新

```bash
# DBを更新する
python manage.py migrate
# DBのテーブルの列名などを更新する。models.pyを変えたらこれをしてからmigrate
python manage.py makemigrations
```

## MySQL用のパッケージ
`PyMySQL`は公式では推奨されていない。
`mysqlclient`を使うべき。


## nginxのconfファイルについて
startprojectで作るプロジェクト名とnginxの\*_nginx.confの\*が一致している必要がある。
今日の学習

##やったこと
１、Railsチュートリアル１.３〜１.４までドキュメントを見ながら行った。
２、MVCの仕組みの理解勉強（Youtubeなど）
３、わからない単語をピックアップ（renderメソッド）
４、Railsのルーティングについて

##学んだこと
１、ターミナルでのタブの使い方
→Command + t … 新しいタブを開く

Command + w … 現在のタブを閉じる

Shift + Command + → … 右のタブに移動

Shift + Command + ← … 左のタブに移動

２、Railsチュートリアルでのサーバーを立ち上げと終了の仕方
立ち上げ（rails s　）
終了（control + c）

##難しくてはまってしまったところ
1,Railsチュートリアル１.３（rails newを実行する）のところで下の図のように表示され、かなりの時間を使ってしまった。<img width="648" alt="スクリーンショット 2019-07-04 22.19.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430076/27e0c7c0-f874-2ad2-eb7b-75273a07e87b.png">
２、Railsチュートリアル1.3.4（Hello,world！）をブラウザに表示することができなかった。

##どう解決したか
１、Railsチュートリアル１.３はgithubの権限の付与と予測したがサーバーを立ち上げhttp://localhost:3000/
を開くと正常に開き、進めることができた。
Apache Solr スキーマレスとハイライト

Solrのスキーマについてネット上で色々と説明頂いている。多様な各種文書ファイルを検索するにはちょっと違和感があり、スキーマレスを触ってみました。スキーマレスとハイライトについての設定方法を今回備忘録的に残します。正しい設定方法か分かりませんが今後の検討用にします。

Solr8.1.1を解凍したフォルダを$SOLR_HOMEで表します。

#### スキーマレスで起動

```
$SOLR_HOME>bin\solr.cmd start -e schemaless
Creating Solr home directory $SOLR_HOME\example\schemaless\solr

Starting up Solr on port 8983 using command:
"$SOLR_HOME\bin\solr.cmd" start -p 8983 -s "$SOLR_HOME\example\schemaless\solr"

Waiting up to 30 to see Solr running on port 8983
Started Solr server on port 8983. Happy searching!

Created new core 'gettingstarted'

Solr schemaless example launched successfully. Direct your Web browser to http://localhost:8983/solr to visit the Solr Admin UI
```


#### 「solrconfig.xml」を変更するため、Solrを停止する

```
$SOLR_HOME>bin\solr.cmd stop -all
Stopping Solr process 10112 running on port 8983
```

#### ```$SOLR_HOME\example\schemaless\solr\gettingstarted\conf\solrconfig.xml```を編集

現在のrequestHandlerを削除

```
＜削除する箇所＞
  <requestHandler name="/update/extract"
                  startup="lazy"
                  class="solr.extraction.ExtractingRequestHandler" >
    <lst name="defaults">
      <str name="lowernames">true</str>
      <str name="fmap.content">_text_</str>
    </lst>
  </requestHandler>

```

下記内容を追記

```
  <requestHandler name="/update/extract"
                  startup="lazy"
                  class="solr.extraction.ExtractingRequestHandler" >
    <lst name="defaults">
      <str name="xpath">/xhtml:html/xhtml:body/descendant:node()</str>
      <str name="capture">content</str>
      <str name="fmap.meta">attr_meta_</str>
      <str name="uprefix">attr_</str>
      <str name="lowernames">true</str>
    </lst>
  </requestHandler>
```
#### Solrを再起動

```
$SOLR_HOME>bin\solr.cmd start -e schemaless
Solr home directory $SOLR_HOME\example\schemaless\solr already exists.

Starting up Solr on port 8983 using command:
"$SOLR_HOME\bin\solr.cmd" start -p 8983 -s "$SOLR_HOME\example\schemaless\solr"

Waiting up to 30 to see Solr running on port 8983
Started Solr server on port 8983. Happy searching!

WARNING: Core 'gettingstarted' already exists!
Checked core existence using Core API command:
http://localhost:8983/solr/admin/cores?action=STATUS&core=gettingstarted


Solr schemaless example launched successfully. Direct your Web browser to http://localhost:8983/solr to visit the Solr Admin UI
```

#### 文書ファイルの取込み

```
$SOLR_HOME>java -jar -Dc=gettingstarted  -Dauto example\exampledocs\post.jar C:\Users\Documents\*.pdf
```
※文書ファイルは、環境に合わせて適宜読み替えます。

#### ハイライト付きでクエリーしてみる

Solrの管理画面を開き```http://localhost:8983/solr/gettingstarted/select?fl=id&hl.fl=attr_content&hl=on&q=attr_content%3Asolr```とすると、想定したレスポンスが表示された。

ポイントは、クエリー対象のフィールドを「attr_content」に、ハイライトのフィールドを「attr_content」に設定すること。
picoCTF 2018 you can't see me - Points: 200

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/1d735edd-6551-fb1e-53b2-1bf24a972bdf.png)

#解いてみた

なんかよくわかりませんが、/problems/you-can-t-see-me_0_8fc4b46df0f4dd36b87a28877fcf9ea2に行ってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/ffe2222f-8431-d215-6c56-1bbd1c088541.png)

真ん中にある

```
-rw-rw-r--   1 hacksports hacksports    57 Mar 25 19:57 .  
```

って何ですか？これが問題なのか？
先頭にdって書かれてないから「.」っていう名前のファイルなんでしょうか。

catしてみましたができません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/dd78aba4-aee5-4600-e1c2-cfcf32d4c584.png)

「.」っていう名前のファイルが作れるのか試してみましたが、だめでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/cdaa3fb7-de99-95be-e79b-8153bc453fc2.png)

llでだめならls -ltaやってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/800cffdb-ad4d-4a10-ffbb-1a7d24f9276a.png)

まぁ結果は同じです。

ただ一つ気づいたことがあります。
ファイル名とフォルダ名の後ろが灰色になっているのとなっていないのは何が違うんでしょう？
もしかして半角スペースとかが大量に入っている？

ということでcatしたあとにtabでファイル名を入力させればいけるんじゃないかと思った。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/99bfced8-6352-8a6d-669b-5761e5d125e1.png)

できた。
django twitter_clone作成　part1

##はじめに
こんにちは、rickyです。
今回はdjangoの構造をしっかりと理解しながら、twitter_cloneを作製していきたいと思います。
part1では環境の構築や使うと便利なエディタについて話しながら、お決まりのhelloworldの表示までを行います。

##対象者
対象とする方のレベルとしては自分で何を作ればいいか迷っている方、djangoの基本的な動作について理解していきたいという方を対象としています。

##エディタからdjangoのインストールまで
では、早速環境からとなります。
使用するエディタはpycharmを使います。以前はvimを使っていたのですが、階層について分かりづらかったのでこれからpythonを書き始めようとされる方にはおすすめのエディタです。
もちろんお気に入りのエディタがあれば、それを使ってくださって大丈夫です。
pycharmは無料版と有料版がありますが、私は無料版で作業をしています。
初歩的な内容なので無料版で事足りると思います。
なので、インストールする際は無料版をインストールしましょう。
さてインストールが終わったら、早速pycharmを立ち上げてNewProjectしましょう。
プロジェクト名はtwitter_cloneとでもしておきましょう。
次にdjangoのインストールを行います。すでにdjangoをインストールしている方もvenv環境ではインストールの必要があるので注意して下さい。
（venv環境とは簡単に言うと仮想環境のことです。仮想環境に切り分けて作業をすることで、他のプロジェクトと依存関係に陥ったりすることなく、作業することができます。）
djangoをインストールするにはpycharmの下のバーにあるTerminalをクリックしpip install djangoでインストールします。
インストールが終わったら、確認のためにターミナルからpythonと入力し、pythonshellを起動します。
そこで
import django
print(django.get_version())
と入力すればインストールしたdjangoのバージョンが表示されます。
ちゃんと表示されればインストールができています。

##djangoでサーバー起動とhelloworld
さてここでインストールしたdjangoでプロジェクトとアプリを作成してみます。
コマンド1つで簡単にできるのでさくっとやってみましょう。
プロジェクトはdjango-admin startproject プロジェクト名で
アプリはdjango-admin startapp アプリ名で
作成できます。
このときアプリはプロジェクトが作成されるときにできるmanage.pyと同じ階層に作ります。
これでプロジェクトとアプリが作成できました。
プロジェクトとアプリの違いについては[こちらのdjango公式サイト](https://docs.djangoproject.com/ja/2.2/intro/tutorial01/)に詳しく書かれています。
では次はdjangoを起動してみましょう
ターミナルを開いてmanage.pyの階層に移動します。
そして./manage.py runserverと打ち込み、ブラウザから　localhost:8000にアクセスします。
ロケットのロゴが表示されれば成功です。
今度はお決まりのhello worldを表示させます。
これにはアプリ直下のviewsには関数名と返り値returnでHttpResponse('hello world')を返します。
アプリ直下のurlsにはimportでviewsを読み込みます。
ここまででviewsに書き込んだ内容をurlsが読み込むことができます。
そしてプロジェクト全体から読み込むためにプロジェクト直下のurlsに情報を書き込みます。
プロジェクト直下のurlsにはurl情報とどこからincludeしているかの情報を記載します。今回はアプリ名.urlsとなります。
また、./manage.py runserverでサーバーを起動し、localhost:8000に今度はプロジェクト直下のurlsに書いたパスの名前を加えるとviewsで返り値とした情報つまりhelloworldが出力されています。

##終わりに
今回はdjangoの基本的な箇所からの説明となりました。
何度かwebアプリは作成してきたのですが、基本的な理解が追いついていないと考え、もう一度最初から簡単なクローンアプリの作り方から始めたいと思いこの記事を書きました。
なぜurlsがプロジェクト側とアプリ側にあるのかという点についての説明がまだ理解しきれていないので理解した際に加筆予定です。
djangoに関するコードについてはdjangoチュートリアルを参考にしていただけると幸いです。
ではなるはやで記事の更新を行う予定です。
お楽しみに〜
広告ID(Advertising ID)の取り扱い方 [Android版]

広告ID - Play Console ヘルプより
https://support.google.com/googleplay/android-developer/answer/6048248?hl=ja

>広告 ID は、ユーザーがリセットできる広告用の固有の ID で、Google Play 開発者サービスから提供されるものです。この広告 ID によってユーザーの管理性は向上し、デベロッパーはシンプルな標準システムで引き続きアプリを収益化できます。また、ユーザーは ID をリセットしたり、Google Play アプリ内のパーソナライズド広告（以前のインタレスト ベース広告）をオプトアウトしたりできます。

# 広告IDとは

* ユーザーを識別するためのID

広告の配信や、ユーザーの分析に使用します。

## 広告IDの特徴

* ユーザーが任意のタイミングでリセットできる
* ユーザーがオプトアウトすることができる

##### オプトアウトとは
個人情報の第三者提供に関し、個人データの第三者への提供を本人の求めに応じて停止すること。
（ざっくりいうと同意をとりやめること）

ユーザーが広告のカスタマイズをオプトアウトしている場合は、
以下の目的で、広告IDを使用してはいけない。

* 広告目的のプロフィール構築
* パートナライズド広告のターゲット設定

###### オプトアウト設定方法
設定アプリ　＞　Google　＞　広告　＞　広告のカスタマイズをオプトアウトする
※Android 5.2以下ではGoogle設定アプリから設定

## 広告IDの使用規約
Android 広告IDの使用より
https://play.google.com/intl/ja_ALL/about/monetization-ads/ads/ad-id/

広告IDを使用するためには規約があります。

### 広告ID使用上の注意点
* 広告とユーザーの分析以外で使用してはいけない。
* 広告IDの収集と使用、規約への遵守について、ユーザーに開示する必要がある。
* ユーザーのオプトアウト設定を遵守する必要がある。

#### ユーザーがオプトアウト設定している場合
* 広告目的でユーザーのプロフィールを作成したり、ユーザーをパーソナライズド広告のターゲットに設定したりするために広告IDを使用してはいけない。
* ただし、コンテンツ ターゲット広告、フリークエンシー キャップ、コンバージョン トラッキング、レポート、セキュリティや不正行為の検出などに使用することはできる。

#### ユーザーの同意なしにしてはいけないこと
* 個人を特定できる情報や、永続的なデバイス ID（SSAID、MAC アドレス、IMEI など）に関連付けたりしてはいけない。
* 新しい広告IDを、以前の広告IDや以前の広告IDからのデータに紐づけてはいけない。
Laravelの.envファイルと、config/database.phpファイルについてメモ

LaravelのDBを設定する際のメモ

下記ファイルについて、まとめておく。

```
.env
config/database.php
```

#.env
.env は環境毎に変更したい情報をまとめておくファイルということだが、
ようは```環境変数の設定```を書いている。

```php:.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
```
#config/database.php

.envファイルで設定した環境変数を取得して、DBの設定をしている。

```php:config/database.php
'default' => env('DB_CONNECTION', 'mysql'),
 
    'connections' => [
        'sqlite' => [
            'driver' => 'sqlite',
            'database' => env('DB_DATABASE', database_path('database.sqlite')),
            'prefix' => '',
        ],
 
        'mysql' => [
            'driver' => 'mysql',
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'strict' => true,
            'engine' => null,
        ],
 
        // ....
    ];
```

#env関数について

env関数はLaravelのヘルパ関数

公式
https://readouble.com/laravel/5.5/ja/helpers.html

env関数は```環境変数の値を取得する。```
第2引数はデフォルト値。

```:ex)
'username' => env('DB_USERNAME', 'forge'),
```

#まとめ

Laravelの設定に関して、理解が深まった。

参考にさせていただいたURL
https://laravel10.wordpress.com/2015/02/21/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A/
Leetcode #451: Sort Characters By Frequency

```swift
func frequencySort(_ s: String) -> String {
    var dict = [Character: Int]()
    for char in s {
        if let value = dict[char] {
            dict[char] = value + 1
        } else {
            dict[char] = 1
        }
    }
    var tuples = [(char: Character, count: Int)]()
    for key in dict.keys {
        tuples.append((key, dict[key]!))
    }
    tuples = tuples.sorted(by: {$0.count > $1.count})
    var answer = [Character]()
    for tuple in tuples {
        for _ in 0..<tuple.count {
            answer.append(tuple.char)
        }
    }
    return String(answer)
}
```
Google Noto Fonts (日本語)の組み込み

# Google Noto Fonts
https://www.google.com/get/noto/
Googleが作ったNotoという名前のフォント

"no more tofu"が合言葉のようで、文字化けや豆腐（フォントにない文字）で苦しむ日本のエンジニアにはうれしい限りです。
（詳しくは、[Wikipedia](https://ja.wikipedia.org/wiki/Noto) をどうぞ）

Webフォントとして使えるので、組み込み方を整理

# 手っ取り早く組み込む
```css
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css); 
```

# 軽量して組み込む
フォントのロードが終わるまで、デフォルトのフォントで画面が表示されてしまうので、できるだけ早くロードするTips

```css
@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 400;
	src: local('NotoSansJP-Regular.otf'),
	     url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
	     url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
	     url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
	font-display: swap;
}
```

# References
* [Google Not Fonts](https://www.google.com/get/noto/)
* [Can I use font-display?](https://caniuse.com/#search=font-display)
* [MDN Web Docs - @font-face - ブラウザ実装状況](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face#Browser_compatibility)
* [MDN Web Docs - font-display - Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#Browser_compatibility)
* https://clickan.click/how-to-noto-sans-japanese/
* https://fonts.google.com/earlyaccess#Noto+Sans+Japanese
VSCode Remote SSH接続できない

# VSCodeでリモート開発やるぞ!

terminalからは繋がるのにVSCode Remoteでは...ssh繋がらない..orz

## サーバーで開発するときにはvimで開発してるけど、
周りがVSCode使ってるし、Remote Development Kitでたからちょっとためしてみよう!
...sshつながらないじゃん

って人への対処方法2つまとめました。

## 症状

普段は踏み台サーバーを経由して、ssh接続で繋げて開発している。
けれど、VSCode RemoteにするとUnreachableというエラーが生じでてしまう。

## 原因1

サーバー側で待機しているsshdに対して、クライアント側のsshのopensslが古いと繋がりません。

具体的な情報は環境によるので記載しませんが、AWSやGCPのクラウド上で作業しているのならば、基本的にはクライアント側(MacやWindows)のopensslのバージョンでしょう。

## 解決方法

### opensslのアップデート方法(brewがinstall済み前提) 

sshでつなぐときに使用しているopensslのバージョン確認

```shell
ssh -V                                         
OpenSSH_7.9p1, LibreSSL 2.7.3
```

このバージョンがだいたい8系が入っていたら僕の周りの人は解決しました。

```shell
brew update
brew install openssl
```

```shell
brew update 
brew upgrade openssl
```

## 原因2

サーバー側で強制的にshellを切り替えていると失敗する問題。

例えばこういう人が当てはまると思います。入ってきたばかりで、root権限もsudoersにも慣れていない状態で、ログインシェルが固定されている。ログインシェルは、tcsh/bashだけど、アナログにzshに切り替えている人です。
多分こんなコードを設定ファイルに記載して切り替えているのではないでしょうか？

```shell:.bashrc
exec zsh
//もしくは
zsh
```

bashがログインシェルになっているけどzshに強制的に切り替えているパターンです。
エラーの内容は、 'install' command not found　みたいに怒られます。

### 解決方法

素直にその記述を消して繋げてみましょう。

```
less $HOME/.bashrc
less $HOME/.bash_profile
```

をしてその記述をコメントアウトしてから再読み込みをかけましょう。

```
source ~/.bashrc
```

# まとめ

vimで編集するときはsshで接続しているのに、VSCodeだと繋がらないという方は上記の2つの箇所を試してみてください。

こちらにtipsものっているので
https://code.visualstudio.com/docs/remote/troubleshooting#_enabling-alternate-ssh-authentication-methods



VSCode vimの設定も書いているのでぜひこちらもどうぞ。
https://qiita.com/y-mattun/items/45776b7e1942edb2f727
WordPressで使えそうなPHPの連想配列

PHPの連想配列をたまに使おうとして忘れがちなのでメモ。

## 達成したいこと
* ナビゲーションの並びを後からでも変更しやすいようにしたい
* ナビゲーションに画像を使用したときに画像パスを含めるとソースがカオスなことになるのをナントカしたい
* ナビゲーションは基本的に同じようなことを繰り返し書くことになるけど、書くのも見た目的にもなんだか面倒臭いので同じことを何度も書きたくない

## 環境
* PHPが使用出来る環境
* PHPのバージョンは5.4以降ならきっと大丈夫

## 想定

- WordPressでファイルパスやページのパスを羅列する場合
    - `echo esc_url(home_url('/'))` 云々を定数に置き換えればWordPressでなくても使えます

### 避けたいパターン

``` php:避けたいパターン
<li role="menuitem"><a href="<?php echo esc_url(home_url('/')); ?>">HOME</a></li>
<li role="menuitem"><a href="<?php echo esc_url(home_url('/')); ?>about/">ABOUT</a></li>
<li role="menuitem"><a href="<?php echo esc_url(home_url('/')); ?>gallery/">GALLERY</a></li>
```

上の例は3つしかないので未だマシですが、これが5つ以上になったら見るだけで発狂しそうです。


#### 念願叶ったパターン

``` php:念願叶ったパターン
<?php
 $navLists[] = array( 'url' => '', 'name' => 'HOME' );
 $navLists[] = array( 'url' => 'about/', 'name' => 'ABOUT' );
 $navLists[] = array( 'url' => 'gallery/', 'name' => 'GALLERY' );
?>

<?php foreach ( $navLists as $navList ): ?>
 <li role="menuitem"><a href="<?php echo esc_url(home_url('/')); ?><?php echo $navList['url']; ?>"><?php echo $navList['name']; ?></a></li>
<?php endforeach; ?>
```

「記述量増えてるじゃないか」 と何処からか石ころでも投げられてきそうですが、以下のように何かしらの変更があったときに煩わしさが減ります。

#### こんなとき便利かも

* ちょっとデザインを変更したい。(大抵ちょっとの変更じゃ済まないというツッコミは今は無しで)
  * クラスだのIDだのリストの数の分だけ変更せずとも、一箇所の変更で済みます。
* 並び順を変えたい。一部を削除したい。一部を追加したい。
* 一部のページのURLを変えたい。一部のページのページ名を変えたい。
エンジニアとして最速で成長する方法

# はじめに 
すごくありきたりなタイトルで記事を書きます。
エンジニアになりたての方の参考になれば幸いです。

## 設計を担当する
作りたい機能やサービスの**設計**をしましょう。
個人開発でもいいですし、会社内でもいいです。

**設計を担当する** → **技術を知らなければ設計ができない** → **設計ができなければ開発が始められない**

設計をするために必死にその技術を勉強するでしょう。
会社の場合は仕事なのでメチャクチャ危機感が持てるのでお勧めです。



## 新しい機能やサービスを開発する
例えばフロントエンドの複雑な制御などはググってもサンプルコードが出てくるわけではありません。
要件を実現するための処理を自分の頭で考えて実装しなければなりません。
そもそもそれが正しいエンジニアの姿だと思いますが最近はコピペエンジニアも増えていると思いますので。

銀の弾丸はないことを念頭に置いて開発しましょう。

## 公式ドキュメントを読む
当然ですが何らかのライブラリやフレームワークを使う場合はボリュームにもよるがドキュメントを一読することをお勧めします。
そのライブラリでは何ができるのか、どういう便利なメソッドがあるかなどを知っているのと知らないのでは開発スピードが大きく変わってきます。間違った使い方も防げますね。

実体験として、たった１つのメソッドを知らなかったために無駄なコードを何行も書き、数時間消費してしまったことがあります。
その後そのメソッドの存在に気付き、はじめに書いていたコードを全て削除し、1行追加しただけで全てが解決しました。

## 遅延評価勉強法
例えばvue.jsを使う予定もないのに勉強だけしても使う時になったら大体忘れてるので必要になった時に勉強するのがいいと思います。

ただしコンピュータの基礎的な部分は全てに通じる部分があるので勉強しておくことをお勧めします。
Leetcode #695: Max Area of Island

```swift
 func maxAreaOfIsland(_ grid: [[Int]]) -> Int {
     if grid.isEmpty || grid[0].isEmpty {
         return 0
     }
     var grid = grid
     var answer = 0
     for i in stride(from: 0, to: grid.count, by: 1) {
         for j in stride(from: 0, to: grid[0].count, by: 1) {
             if grid[i][j] == 1 {
                 var area = 0
                 helper(&grid, i, j, &area)
                 answer = max(answer, area)
             }
         }
     }
     return answer
 }

 private func helper(_ grid: inout [[Int]], _ i: Int, _ j: Int, _ area: inout Int) {
     if i < 0 || i >= grid.count || j < 0 || j >= grid[0].count || grid[i][j] == 0 {
         return
     }
     area += 1
     grid[i][j] = 0
     helper(&grid, i-1, j, &area)
     helper(&grid, i+1, j, &area)
     helper(&grid, i, j-1, &area)
     helper(&grid, i, j+1, &area)
 }
```
NumbersからGoogleスプレッドシートに改行ありセルをコピペしたい場合のメモ

# やりたいこと

macのNumbersから以下条件のセルを、Googleスプレッドシートにコピペで貼り付けたい。

- 文字列結合して作ったセル
- んでもって改行があるセル


# Googleスプレッドシートにペーストすると改行が消える…

### こんなセルを作る
<img width="945" alt="スクリーンショット 2019-07-04 21.27.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86842/4a99edc6-e4e1-b2fe-4c84-cdb3c7ef4b78.png">

↓

### この2つのセルをコピる
<img width="944" alt="スクリーンショット 2019-07-04 21.27.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86842/f14b9ab1-a6a7-0d1a-3655-b62ead757f5b.png">


↓

### Googleスプレッドシートに貼り付けると・・・

↓

<img width="642" alt="スクリーンショット 2019-07-04 21.43.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86842/566c460f-78f3-25de-2942-3914523efa3a.png">

改行消えてる・・・


# 関数で制御文字を入れてみると？

**CHAR関数** というものがある。
```Unicode文字コード番号（10進表記）に対応する文字を返します。```
ってやつ。

CHAR(8232) で「Line Separator」になるとのこと。
これを使ってみるとどうなるか？

### 改行をCHAR(8232)に変える

見辛いけど、こんな感じ。
<img width="971" alt="スクリーンショット 2019-07-04 22.07.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86842/52918442-144c-0fed-1a37-db7d93f2e055.png">

↓

### この2つのセルをコピる

<img width="941" alt="スクリーンショット 2019-07-04 21.49.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86842/106b5041-2d8c-91fb-b858-e6b36a25e17e.png">

↓

### またGoogleスプレッドシートに貼り付けると・・・

↓

<img width="642" alt="スクリーンショット 2019-07-04 21.58.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86842/ef0b8174-cff6-fbb5-2192-91f41693d6fe.png">

ダメです！


# 関数で制御文字を入れてみると？その２

CHAR(8233) で「Paragraph Separator」になるとのこと。
こいつならどうなるか？

### 改行をCHAR(8233)に変える

<img width="988" alt="スクリーンショット 2019-07-04 22.03.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86842/feae48b3-1d3a-5d1d-155d-94a1027437f2.png">

↓

### この2つのセルをコピる

<img width="948" alt="スクリーンショット 2019-07-04 22.03.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86842/16d639fe-1cda-0bd0-558d-2b2553e35980.png">

↓

### またまたGoogleスプレッドシートに貼り付けると・・・

↓

<img width="637" alt="スクリーンショット 2019-07-04 22.04.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86842/f24b1867-bb62-59e7-8412-02b8ab61a386.png">

いけた！


# さいごに

なんかもっといい方法ないのかな？
picoCTF 2018 what base is this? - Points: 200

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/00e5ebf1-945f-17a7-55ff-11f39ffa89d9.png)

#解いてみた

まずはnc 2018shell.picoctf.com 31711に接続して雰囲気を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/76681293-e5fe-3925-3b79-a0811c096dbb.png)

途中にある2進数を文字に直してそれを入力しましょう。
という問題のようです。
[CyberChef](https://gchq.github.io/CyberChef/)を使います。
が、30秒以内に頑張らないといけないようなので急いでやる必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/da6cd524-3241-b88f-8888-c1b33a27f94f.png)

というような具合です。がこのwriteupを書いていると当然時間が過ぎてしまって、キャプチャを取りながらやるのは至難の業です。
2問目は16進数で、3問目は8進数を変換する問題も出てきました。

16進数を変換するのはこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/dc0fe3e7-8378-590d-67a0-a492d44bb0a2.png)

そして8進数を変換するのはこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/0063981c-fbfa-2457-64f7-5958bdf7994f.png)

ということで全部やりきると答えが出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/e1f88536-0ae3-c270-f68d-20861cb394c4.png)
jQueryで表示非表示活性非活性する方法

# 表示になっているものを非表示にする
```js
$(要素).hide();
$(要素).toggle(false);
```

# 非表示になっているものを表示する
```js
$(要素).show();
$(要素).toggle(true);
```

# 実行されるたびに表示と非表示を切り替える
```js
$(要素).toggle();
```

# 活性化
```js
$(要素).prop('disabled', false);
// disabled属性を削除する
$(要素).removeAttr('disabled');
// ラジオボタンを活性化
$('input[name="name属性の値"]').removeAttr('disabled');
```

# 非活性化
```js
$(要素).prop('disabled', true);
// ラジオボタンを非活性化
$('input[name="name属性の値"]').prop('disabled', true);
```
## 注意1 : disabled属性のある要素はサーバへ送られない
[disabled属性の項目値はサーバへ送信されないのでリロードすると値が消えるときの対応方法 - Qiita](https://qiita.com/ponsuke0531/items/e93a37b8e11858eb4bcc)
## 注意2 : attr()は使わない
- `attr`で活性非活性の切り替えは古いjQueryならできるらしいけど、ソースにあるとわかりにくいから使わない方が良いと思う
- `attr(属性, 値)`で、属性に値を設定する
    - `$(要素).attr('disabled', true);` は、disabled属性の値をtrueにするということ
    - `$(要素).attr('disabled', false);` は、disabled属性の値をfalseにするということ
- disabled属性は「存在すれば非活性」「存在しなければ活性」なので属性の値はどうでもいい

```js
/** これは全部非活性になる. */
<input type="text" disabled>
<input type="text" disabled="disabled">
<input type="text" disabled="true">
<input type="text" disabled="false">
```

# 出展
- [【jQuery】要素の表示・非表示について (show, hide, toggle) - TASK NOTES](https://www.task-notes.com/entry/20150112/1420994026)
- [jQueryのprop()でdisabled属性を切り替える - Qiita](https://qiita.com/pugiemonn/items/5db6fb8fd8a303406b17)
- [jQuery - attr()とprop()の違いと使い分け - Miuran Business Systems](http://www.m-bsys.com/code/jquery-attr-prop)

# 他のことを知りたい
[JavaScriptの実装に役立つリンク集 - Qiita](https://qiita.com/ponsuke0531/items/bf4b67e3ba4ae0df1390)
[JavaScriptでファイルの入出力をしたい時に役立つリンク集 - Qiita](https://qiita.com/ponsuke0531/items/37ab0a10be42c0d202bb)
[JavaScriptでいろいろ取得したい時に見てみるリンク集 - Qiita](https://qiita.com/ponsuke0531/items/802195cdb080182b71b9)
Leetcode #973: K Closest Points to Origin

```swift
func kClosest(_ points: [[Int]], _ k: Int) -> [[Int]] {
    var dict = [Int: [[Int]]]()
    for point in points {
        let num = point[0] * point[0] + point[1] * point[1]
        if let value = dict[num] {
            dict[num] = value + [point]
        } else {
            dict[num] = [point]
        }
    }
    var answer = [[Int]]()
    var count = 0
    for key in dict.keys.sorted() {
        if count < k {
            answer += dict[key]!
            count += dict[key]!.count
        } else {
            break
        }
    }
    return answer
}
```
タスクシステムはどうしてダメか、脱タスクシステム

#タスクシステムとは
ここで言うタスクシステムとは、かつてゲームプログラミングで使われていたとされる技法の事です
ざっくり言うと、タスクのリストをプライオリティー値で並べ、前から順番に実行していくような感じです

#何故ダメか
もともと手続き型プログラムは、実行してほしい処理を順番に書き並べたものです
言い換えればもとよりプログラムはタスクのリストであって、それをプログラムリストというわけです
それをタスクシステムは動的にタスクのリストを持って、さらにはプライオリティー値で並べ替えるので
"処理順がソースコードに表れません"
手続き型言語では処理の順番が最重要にもかかわらずです
それも動的に処理の順番が入れ替わるなら致し方ない部分もあるかもしれませんが大概は固定です
なら、実行順はソースコードで静的に可視化されたほうが良いわけです

どう頑張っても実行順がソースコードに表れないタスクシステムなんかが最適解になることはあり得ないのです
まっーーーたくナンセンス極まりないです

#何故タスクシステムなんかが流行ったのでしょう
思うに、こういう人たちは要は極端なんです
グラデーションというものを分かってません


#どうすればよいか
普通のアプリプログラムのように、ごく普通にプログラムを書けばよいだけです
とにかく、タスクシステムはタスクの並べ替えが極悪なので、それを取り除きます
そうすると普通のプログラムになります

具体的には型や種類ごとにコンテナを用意して突っ込み、`foreach`などで処理すればよいだけです
このとき、コンテナに突っ込まれる各アイテムの並び順(実行順)は問いません
逆に、順番を問わないものだけを同一コンテナに入れます
プライオリティー値による並べ替えは有りません
もし処理の順番に依存関係があるなら、突っ込むコンテナを分けます
経験則ですが、型ごとにコンテナを分けるだけで十分なことが多いです
また、どの順で実行してもよいという事は並列に実行してもよいという事でもあるので
並列実行の余地があります

~~~C++
container_t< player_t * > players;
container_t< enemy_t * > enemies;
・
・
・
for( auto &player: players )
{
  player->update();
}
for( auto &enemy: enemies )
{
  enemy->update();
}
for( auto &player: players )
{
  player->nanika();
}
・
・
・
~~~

このようにコンテナを`foreach`なんかしながら
自由気ままに自分が処理したい順に好きなようにプログラムを書いていきます
プログラムのプログラムリストとしての機能を取り戻した瞬間です
きもちいい～～～
実行順はプログラムを見たまんまです
これぞ"プログラム"

#一見よく似てるけど
共通の処理をまとめるため、
1フレームに1回アップデートするインターフェース`updatable_t`を用意したとしましょう
これを実装したオブジェクトはコンテナ`updatables`に入れられ、一フレームに一回`update`が呼ばれます

~~~C++
container_t< updatable_t * > updatables;
・
・
・
for( auto &updatable: updatables )
{
  updatable->update();
}
~~~

これは古典的なタスクシステムとよく似てますが、一つ決定的に違うのは
コンテナの中身の実行順は問わないということです
もし実行順に依存関係があるなら、updtablesには入れずに、別口で処理します
ここで依存関係があるからと並べ替えなんかをすると
プログラム上には表れない見えない依存関係ができて邪悪なわけです
タスクシステムのまずい点です

#何事も例外は有るよね
それでもコンテナに突っ込んだオブジェクトを並べ替えて処理したいことは有るでしょう
しかしそれは局所的にそうやれば良いだけであって、プログラム全体が犠牲になる必要は有りません

#結論
処理をプライオリティー値で並べ替えるタスクシステムは窓から投げ捨てましょう
matplotlibで3Dプロットを作成

#動機
matplotlibの三次元プロットで複数axisを生成する方法が目に入ったのでコードを書いてみた。


#作図してみた
##環境
Anacondaのjupyter labを使用。

##データの読み込み

```py

import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D
from scipy import genfromtxt
import numpy as np
import pandas as pd
import os

d = pd.read_csv("./3d_scatter_plot_data.csv")
#相対パスでは.が現在のパスを明示的に示す方法。 ..で、一つ上の階層を示すなどが使える。

d #データの確認
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374781/e421d2e1-79ee-dc3e-58c7-87e2a782048d.png)

今回使用したデータは、工場で生産された製品に、色のバラツキが発生していないか、Lot毎に測色した結果を用いた。測色の評価方法については、[ココを参照](https://www.konicaminolta.jp/instruments/knowledge/color/section2/02.html)。


##3D散布図の作成
```py
#データをarray型に
x = np.array(d["a"])
y = np.array(d["b"])
z = np.array(d["L"])

# グラフ作成
fig = plt.figure()
ax = Axes3D(fig)
 
ax.scatter(x, y, z)
# 軸ラベルの設定
ax.set_xlabel("a-value")
ax.set_ylabel("b-value")
ax.set_zlabel("L-value")

plt.show()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374781/f5280cd1-5a97-f99c-ddfe-5c4e5eacb446.png)

作図に成功したが...本来はグラフをマウスでドラッグするとグラフが回転してくれるそうだが微動だにしない。
jupyter labでは上手く動かないのかもしれない...
Django, psycopg2, PostgreSQL データベース接続時の空のエラーの対処方

#Djangoのデータベースをpsycopg2でPostgreSQLに接続するときに空のエラーが発生した
Django のデータベースを PostgreSQL に変更しようと、psycopg2を使用してDjango 側とPostgreSQL 側のコンフィギュレーションを済ませて、Django のデータモデルをマイグレーションしようとしたときに、以下の空のエラーが発生した。最後```OperationalError```の後に何も表示されていないので、何が問題かが分からずに、解決方法を検討することができずにいた。

```
connect conn = _connect(dsn, connection_factory=connection_factory, **kwasync)
django.db.utils.OperationalError
```
#原因はPostgreSQLの言語のコンフィギュレーションだった！
次のPostgreSQLのコンフィギュレーションファイル
```C:\Program Files\PostgreSQL\10\data```
```postgresql.conf```を開き、以下のように変更し、パソコンを再起動する。するとエラーが表示されるようになった。
###変更前

```:postgreslq.conf
lc_messages = 'japanese_japan.932'
lc_monetary = 'japanese_japan.932'
lc_numeric = 'japanese_japan.932'
lc_time = 'japanese_japan.932'
```

###変更後

```:postgreslq.conf
lc_messages = 'en-US'
lc_monetary = 'en-US'
lc_numeric = 'en-US'
lc_time = 'en-US'
```

```:コマンドプロンプト
connect conn = _connect(dsn, connection_factory=connection_factory, **kwasync)
django.db.utils.OperationalError: FATAL:  password authentication failed for user "DBUSER"
```

以下のサイトを参考に対処しました。
https://github.com/psycopg/psycopg2/issues/417
BFG Repo-Cleanerを使ってGitリポジトリを軽くした件

### 要らないデータの大きさを簡単に確認する方法
---

```
git clone https://github.com/daijinload/test.git
cd test

wget https://confluence.atlassian.com/bitbucket/files/321848291/321979854/1/1360604134990/git_find_big.sh
chmod 755 git_find_big.sh
./git_find_big.sh
```

中に入ってダウンロードしたシェルスクリプトを実行するだけ。

### bfgを使ってファイルを削除する方法
---

※注）必ずバックアップを取ってから実行してください。

```
wget https://repo1.maven.org/maven2/com/madgag/bfg/1.13.0/bfg-1.13.0.jar

git clone --mirror https://github.com/daijinload/test.git
du -hs test.git/objects

java -jar bfg-1.13.0.jar -D 'bigfile1' test.git
java -jar bfg-1.13.0.jar -D 'bigfile2' test.git

cd test.git
git reflog expire --expire=now --all && git gc --prune=now --aggressive
git push
```

以上で、Gitのリポジトリが軽くなります。

先頭コミットのハッシュ値が変わってなかったですが、リリースしたときのハッシュ値を保存しているような現場では、調べてから実行したほうが良いと思います。

また、念のため作業者全員のローカルのGitをcloneしなおしたほうが良いと思います。

とりあえず、リポジトリを軽くしたい人は、ぜひ！！

### 参考URL
---

// git_find_big.shの説明
https://confluence.atlassian.com/bitbucket/maintaining-a-git-repository-321848291.html

// bfg.jar
https://rtyley.github.io/bfg-repo-cleaner/
JavaScriptでいろいろ取得したい時に見てみるリンク集

# 要素の〇〇を取得したい
```javascript:jQuery版
// idを取得したい
let id = $(要素名).attr('id');
// onClickイベントなどでidを取得したい
let id = $(this).attr('id');
// タグを取得したい
let tag = $(要素名).prop('tagName');
// type属性の値を取得したい
let type = $(要素名).attr('type');
```

```javascript:aタグの値を取得したい
/** D3.js */
let val = d3.select("#id属性").text();
```

# 要素の値を設定したい

```javascript
$("#id属性").val("値");
```

- [.val() | jQuery 1.9 日本語リファレンス | js STUDIO](https://js.studio-kingdom.com/jquery/attributes/val)

# ラジオボタン
## 選択値を取得したい
```javascript
/** 普通. */
let radios = document.getElementsByName("name属性");
let selected;
for (let i = 0; i < radios.length; i++){
    if(radios[i].checked){
        selected = radios[i].value;
        break;
    }
}
/** jQuery. */
let selected = $('input[name="name属性"]:checked').val();
```

- [JavaScriptでラジオボタンの値を取得する方法](https://lab.syncer.jp/Web/JavaScript/Snippet/30/)

## 選択値を設定したい

```javascript
/** jQuery. */
$('input[name="name属性"]').val(["値"]);
$('input[name="name属性"]')[0].checked = true;
```

- [jQueryでラジオボタンを選択する方法 - Codeflow](https://www.codeflow.site/ja/article/jquery__how-to-select-a-radio-button-with-jquery)

# `input type="hidden"`の値を取得したい
```js
/** jQuery. */
// name属性指定
let a = $('input:hidden[name="name属性"]').val();
// id属性指定
let d = $('#id属性').val();
```
- [jQuery hiddenの値を取得/設定するサンプル](https://itsakura.com/jquery-hidden)
- [JavaScript入門講座 hiddenオブジェクト](http://javascript.pc-users.net/browser/form/hidden.html)

# 家族要素を取得したい

- [jQueryで親要素や子要素を取得する方法 | tagamidaiki.com](https://tagamidaiki.com/jquery-parent-child/)
- [jQueryで親要素を取得する：parent(), parents(), closest() | UX MILK](http://uxmilk.jp/8150)
- [jQueryで子要素を取得する方法：children(), find() | UX MILK](http://uxmilk.jp/10873)

# jQueryを使って要素を取得したい

- [jQueryでdocument.getElementByIdしたいです - ゆとり日記](http://rukiadia.hatenablog.jp/entry/2014/06/18/131504)
    - document.getElementById('id') と $('#id') が同じだと思っていて、ドハマリしました:sob:
- [Bugle Diary: [jQuery]inputのname属性にアクセス](http://temping-amagramer.blogspot.jp/2011/08/jqueryinputname.html)
- [jQueryでclassやidをワイルドカード指定 - Qiita](http://qiita.com/miiitaka/items/2e546a38b0346e67c995)
    - [jQuery リファレンス：[ 属性名 ^= '値' ]](http://www.jquerystudy.info/reference/selectors/start.html)


# jQueryを使わないで要素を取得したい

- [ライブラリを使わない素のJavaScriptでDOM操作 - Qiit](http://qiita.com/kouh/items/dfc14d25ccb4e50afe89)

# 他のことを知りたい
[JavaScriptの実装に役立つリンク集 - Qiita](https://qiita.com/ponsuke0531/items/bf4b67e3ba4ae0df1390)
[JavaScriptでファイルの入出力をしたい時に役立つリンク集 - Qiita](https://qiita.com/ponsuke0531/items/37ab0a10be42c0d202bb)
[jQueryで表示非表示活性非活性する方法 - Qiita](https://qiita.com/ponsuke0531/items/ed8dc7991311a9a2a5a7)
RDS ではパラメーターにまったく問題ないのに Incompatible-parameters が発生する場合がある

AWS の [RDS](https://aws.amazon.com/jp/rds/ "RDS") では Incompatible-parameters というエラーが発生し、インスタンスを起動できなくなる場合があります。そのエラーに遭遇してしまったのですが、一般に言われている方法では解決できなかったので報告します。

## 結論

再起動を繰り返すとパラメーターが正常でも発生する場合がある。しばらく待つ事で起動できるようになる。

## 経緯

RDS に限らず RDBMS では起動直後の状態と、インデックス等必要な情報を十分メモリに蓄積した状態とでは性能にかなりの違いがあります。今回、RDS で作成した MySQL のインスタンスの起動直後のパフォーマンスを調査するために何度も再起動を繰り返していたのですが、データベースのステータスが突然 ***Incompatible-parameters*** になってしまい起動できなくなりました。

## 公式情報を調べる

調べてみると、すぐに日本語の公式なナレッジが見つかりました。

 * [Amazon RDS インスタンスが、incompatible-parameters 状態で動かなくなってしまいます。どうすれば解決できますか?](https://aws.amazon.com/jp/premiumsupport/knowledge-center/rds-incompatible-parameters/)

要約するとカスタムパラメータグループの設定に問題があり、インスタンスの起動に失敗しているという事になります。カスタムパラメーターグループとはデータベースをチューニングするためのパラメーターのグループであり、MySQL の my.cnf に相当する物です。

自分でインストールした MySQL でも my.cnf の内容が間違っていれば起動できない場合があります。Incompatible-parameters はその状態に相当するエラーであると考えられます。


## パラメーターに問題のない事を確認した

RDS は十分なパフォーマンスを発揮できる状態にチューニングされていると考えられますが、必要に応じてパラメーターの調節ができるようになっているわけです。今回、確かにパラメーターグループを新規作成し一部のパラメーターを書き換えていますので、その設定が間違っているのだと言われたら、確かにそうなのかも知れません。

しかし、

 * 直前まで同じパラメーターで起動できていた
 * パラメーターを再度確認し、起動が不可能な要素を見つけられなかった
 * 同じパラメーターで新たにインスタンスを作成したが、起動も再起動も問題なく実行できた

というような状態であり、どうも公式ナレッジに記載されている状態とは異なるようでした。

## サポートに問い合わせ (解決)

サポートに問い合わせた所、1営業日程度で返事が届きました。結論としては最初に書いた通りになりますが、カスタムパラメーターグループを利用しているインスタンスにおいて、何度も再起動を繰り返していると incompatible-parameters になり、起動できなくなる場合があるとの事です。今回は起動直後の状態の試験を行っていた最中でしたので、再起動は10回程度行っていました。しばらくすると自然回復するそうで、確かに問題のインスタンスはいつの間にか起動していました。

## そういう物だと受け入れましょう

詳細な原因については非公開との事でしたが、再起動を繰り返す事で、RDS がなんらかの異常が起こっていると認識してしまったのかも知れません。ユーザーの立場としては「そういう事がある」と受け入れざるを得ないのが現状です。

今回は検証環境での出来事なので実害はありませんでしたが、本番環境をメンテナンスする時等には必要以上に再起動を行わない等の注意が必要だと思います。特にパラメーターチューニングを伴うメンテナンスの時には、本当にパラメーターが間違っている場合との区別が難しい可能性があります。そんな時は是非この記事を思い出して下さい。

何度確認してもパラメーターの間違いが見つけられないのに incompatible-parameters が出続ける場合は、同じパラメーターグループで別のインスタンスを立ち上げてみると良いと思います。
コミットメッセージにPrefixつけるようにするとコミット粒度が細かくなっていい感じ。

いつだったか、Twitterでgitのコミットメッセージにプレフィクスをつけるって話をみかけて、自分でもやってみました。

Prefixの付け方もいろいろあるようなんですが、自分は下記2つのミックスでやってます。

- [Gitのコミットメッセージの書き方 - Qiita](https://qiita.com/itosho/items/9565c6ad2ffc24c09364)
- [【今日からできる】コミットメッセージに 「プレフィックス」 をつけるだけで、開発効率が上がった話 - Qiita](https://qiita.com/numanomanu/items/45dd285b286a1f7280ed)

だいたい使ってるのは下記です。

- add: ファイルの追加や機能の追加
- fix: バグ修正
- change: 機能、仕様の変更
- refactor: リファクタリング
- disable: 無効化。だいたいはコメントアウト
- remove：削除。コメントアウトしたコードの削除とかファイル削除とか
- style: コードフォーマットの変更
- comment: コメント追加・修正

使うか微妙だなぁってのは下記。

- revert: 変更とりやめ。SourceTreeで元にもどすと自動でコミットメッセージはいるんで自分では入れなさそう。
- test: テストだけを変更したときに使うかもなぁって思ったんですが、結局使わずに、テストコードをどうしたのかをfix, addなどで書いてます。

他にもオープンソースプロジェクトなどでPrefixのルール決めてるケースがあったら参考にしてみたいので知りたいところです。

# Prefixつけると、ごちゃまぜコミットが減ります。

さて実際にPrefixつけたコミットメッセージをつけるようになると、いろんなコミットがごちゃまぜにならないようにコミット粒度を細かくわけるようになってきます。

機能変更(change)してるときに不具合みつけて不具合修正(fix)までした1つのコミットにならないように、わけたりとかですね。

細かい粒度でコミットしてると、あとで「あれ？なんでこのコードこうなってるんだ？」ってときにコミットメッセージからその時どう考えて今のコードになってるのかわかったりして便利です。（逆にひとまとめでドンッとコミットしてると、どういう経緯で今のコードになってるのかわからないことが多いです）
某pay、不正アクセス事件についてまとめ

## 結論
結論：技術を疎かにした結果起きた災害

## なにが起きたのか(事件概要)

2019年7月1日(月) 某大手小売業の会社からQRコードの決済サービスが提供された
同サービスはクレジットカード・デビットカードによるチャージが可能だった

しかし、不正ログインが簡単に出来てしまう仕様だったため

> 不正アクセスの被害者は約900人、被害額の合計は約5500万円（4日現在）

という災害(※記者会見で発表された想定被害)をもたらした([情報元](https://www.itmedia.co.jp/news/articles/1907/04/news087.html))

##### ※2019年7月4日現在、新規で会員登録ができないため、自分の目で確認できない。この件に関して既にデマが広がっているので、情報元URLを貼りながら記事を書く

## なぜ不正ログインができたのか(脆弱性について)

原因は**「パスワードの再設定」**にあるという([情報元](https://www.appps.jp/332462/))

### ①知人でもパスワードが再設定できるレベル


パスワードの再設定には**「生年月日」「会員ID(メールアドレス)」**の情報が必要である

https://www.omni7.jp/account/OP_OSD0013_001.do?mmbrRgstType=4

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330109/790251f2-5f1e-1c0a-5e6e-f06f135ba374.png)

知人で試せてしまうレベルの必須項目の少なさであるが、この生年月日は
**会員登録時に入力せずに登録すると2019年1月1日で登録される**仕様([情報元](https://www.appps.jp/332462/))
つまり、誕生日を登録していないユーザへの不正アクセスはメールアドレスだけで試し放題である。

二段階認証(電話番号にSMSを送る)とか秘密の質問が表示される仕様にしていれば事はここまで大きくならなかっただろう。

### ②任意のメールアドレスでパスワード再設定ができた

これが一番致命的で**自分のアカウントのパスワード再設定を他人のメールアドレスで出来る**という仕様である

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330109/dcae7466-9c39-75dd-858c-ecd40c82e208.png)


この仕様がなければ、そもそもこの事件は起きていなかったと考えられる。

攻撃者は「他人のアカウントのパスワード再設定を自分のメールアドレスで行う→ログイン→クレジットカードチャージ→QRコード決済」ができてしまったのである。

#### 修正済？
2019年7月4日現在、この仕様は修正されたように見えるが
CSSの**display:none;で隠Pay(隠ぺい)**されたことが再度話題になった([情報元](https://www.itmedia.co.jp/news/articles/1907/04/news079.html#l_mt1626333_7pt-03.jpg))

ブラウザでこの記述は簡単に書き換えることができるので、**見た目は隠れているが実際には使える状態**である。

例えばGoogle ChromeであればF12キーからデベロッパーツールを開いて、Styleタブから「display:none;」の記述を見つけて消す等で表示できる。下記画像は実際に表示させたもの

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330109/9a986397-7c24-5582-c163-821939688000.png)


※Twitterなどでは、再設定用メールアドレスを入力してもメールが来なくなっている等の情報も見受けられた。サーバ側でも対策したのだろうか。これについて事実確認できないので、**ちゃんとした情報元**が欲しい


### その他情報 (リンクは情報元)

- [記者会見](http://blog.livedoor.jp/ninji/archives/53555123.html)
某ペイの社長が二段階認証を知らなかった (リンク先の動画31分あたり)
技術に詳しい者が記者会見にいなかった。

- [補償について](https://www.itmedia.co.jp/mobile/articles/1907/04/news101.html)
> 被害に遭ったユーザーへの対応については、全て補償するという。この中にはクレジットカード会社からの補償も含まれる

- [デマ](http://blog.livedoor.jp/ninji/archives/53555612.html)
Twitter上で「記者会見でSMSをSNS(Twitter)と誤解している」話題が挙がったが**まったくのデマである**。（記者会見の動画を見ればわかる）

- [Struts疑惑](https://twitter.com/shao1555/status/1146664700387549184)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330109/6e4bd4e9-d86e-1107-99ff-8458e26b1705.png)

今回の件の原因ではないが、[Struts1](https://ja.wikipedia.org/wiki/Apache_Struts)を使用しているのではないかと話題になっている。根拠となっているのはURLの最後が.doであることである
https://www.omni7.jp/account/OP_OSD0013_001.do

Struts1は、いにしえのフレームワークである。現在扱える人が少ないし、脆弱性がある（仮に使用しても、その脆弱性に対応できる技術力があれば問題はないが……長い目で保守することを考えると扱える人が少ないのは危ないことである）

# 結論

根本的に任意のメールアドレスでパスワード再設定ができなければ起きなかったが

生年月日の必須入力、二段階認証、秘密の質問……どれかひとつでもあれば事件はここまで大きくならなかったはず

当然だがウェブサービスは常に攻撃される可能性がある。決済サービスのように金と個人情報を扱うサービスなら尚更である。サービスを提供する以上、対策はしっかりしなければならない


# 追記

2019年7月5日現在、再設定用メールアドレスの入力欄がHTML上から消滅したことを確認した。
実際の確認はできないが、サーバ側でも対策済だと考えて良いだろう
Ajaxのフワッと理解

# 注意事項
この記事は、「ぶっちゃけ下書きが溜まってきて処分したかったけど消すのはもったいない」という筆者の気まぐれで作成された記事である。
某5才児教育番組みたいなノリの記事なので真剣にAjaxを学びたい人は回れ右でお願いします。
この記事を読んで得られるものは、ふわっとしたAjaxの理解だけです。

# Ajaxってなに？
javascriptでWebページを再読込(ページ更新処理)せずにページの内容を変更する技術のこと。  
名前の由来は「**A**synchronous **JA**vascript + **X**ml」の頭文字を取ったもの。

# そもそもAjaxを使うと何ができるの？
画面をポチポチしても、画面が固まらなくなるよ！

# 何で画面をポチポチすると固まるの？
画面をポチポチすると、新しい画面のデータを取りに行くから、戻ってくるまで画面が固まるんだよ！

# じゃあ何でAjaxだと固まらないの？
**見えないところ**で新しい画面のデータを取りに行って、今の画面に**こっそり**渡してるから固まらないんだよ！


# ちょっと**だけ**まじめに同期と非同期のお話
* 同期とは(画面が固まる方)  
画面の更新処理(HTTPリクエスト)をサーバーに送信すると、サーバーから応答(HTTPレスポンス)が返ってくるまで処理を待機する(=画面操作ができなくなる)こと。
* 非同期とは(画面が固まらない方)  
画面の更新処理(HTTPリクエスト)をサーバーに送信しても、サーバーからの応答(HTTPレスポンス)の有無にかかわらず処理を継続する(=待機中も画面操作ができる)こと。

# Ajaxでできること(めっちゃざっくり)
Google検索のサジェスト、FXのチャートとかなんかリアルタイムで動いてるやつ。
Vagrant インストール トラブル対応

# ユーザフォルダ直下ではVagrant起動に失敗する

はい、ちょっとお試しで動かそうとしたところ、はまりましたのでメモを...

##環境##
- Vagrant バージョン：2.2.5
- VirtualBox バージョン：6.0.8
- 利用OS：Windows10
- 選択OS：CentOS/7

##事象##
コマンドプロンプトから初回のvagrant upにて失敗する

①コマンドプロンプトでvagrant upコマンド実行する（VirtualBoxが起動される）
②コマンドプロンプトに以下メッセージが表示される

```shell:prompt
C:\users\**** > vagrant up
・
・
・
==> default: Rsyncing folder: /cygdrive/c/Users/sugim/ => /vagrant
```

③コマンドプロンプトに以下メッセージが表示され、VirtualBoxがクローズしてしまう

```shell:prompt
==> default: Forcing shutdown of VM...
・
・
・
```

##原因##
Vagrantの起動をユーザフォルダ直下でしようとしていたため
ユーザフォルダ配下に新たにフォルダを作成して実行すればOK

```diff
例）✖ C:\users\**** > vagrant init centos/7
　　　 C:\users\**** > vagrant up
　　↓
　　〇 C:\users\****\projectName > vagrant init centos/7
　　　 C:\users\****\projectName > vagrant up
```
Visual Studio Codeで開始タグと閉じタグをハイライトするプラグイン

#DreamWeaverでは標準だった開始タグと終了タグをハイライトする機能をVSCodeで実現する

他の人が書いたコード、インデントが整っていないコードを直す時。

もうどこにタグの始まりと終わりがあるのか分からなくなった時。

↓↓VSCodeのプラグイン検索から

Highlight Matching Tag

これ、神プラグインです。