OmniAICreator/Qiita-1.07M huggingface dataset:
一瞬でJavaScriptのfor文が爆速になった話

AtCoder初心者のアクマちゃん([@akumachanit](https://twitter.com/akumachanit))デモ！`for`文を早くする方法を見かけたので試してみたデモ！

#三行で
 - `i++`を
 - `i=(i+1)|0`に変えると
 - **爆速になったデモ**

#実演
```js
// これを
for (i = 0; i <= H; i++) {
  // 省略...
}

// こうしただけ
for (i = 0; i <= H; i=(i+1)|0) {
  // 省略...
}
```
![爆速](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542817/ec16dc5d-c913-f8f4-5a90-aed52f885396.png)
*えっ...*
*メモリも...*

#なんで？
なんでも処理系に型を認識させることで速度が上がるらしいデモ。
詳しいことはこれから調べるからワガハイには聞かないでくれデモ...笑
環境によって差異とかあっても当悪魔は一切関知しないデモ！（こっそりコメントで教えてくれデモ）

#ここに書いてあったデモ
コメントで出典を乗せるべきと指摘いただきましたデモ！
その通りですデモ！ご指摘ありがとうございましたデモ！

こちらです！筆者さま失礼いたしましたデモ。
[JavaScriptのループはどれが一番高速なのか](https://qiita.com/keroxp/items/67804391a8d65eb32cb8)

#仲良くして欲しいデモ
Twitterやってるデモ！仲良くしてくださいデモ！[@akumachanit](https://twitter.com/akumachanit)
jq で unnest したい

ちょうど探してたら見つけたので
https://notchained.hatenablog.com/entry/2017/03/13/232729

```json:input.json
[
  {"name": "a", "value": [1, 2]},
  {"name": "b", "value": [3, 5]}
]
```

```json:expect.json
[
  {"name": "a", "value": 1},
  {"name": "a", "value": 2},
  {"name": "b", "value": 3},
  {"name": "b", "value": 5}
]
```

書いた。

```bash
$ jq 'map( .name as $n | .value | map({name: $n, value: .})) | flatten' input.json > actual.json

$ diff <(jq . actual.json) <(jq . expect.json) && echo OK || echo NG
OK
```
[高速版]ファイル or ディレクトリを検索して一括削除する

他の人が既に投稿してるかもしれないが、よく使うコマンドなので備忘録。

## 結論

`find`+`xargs`で爆速になる。

```shell
find <path> -name <name> -type <type> | xargs rm -rf
```

## 解説

ググると`xargs`の他に`-exec`オプションを使う方法もヒットする。

```shell
find <path> -name <name> -type <type> -exec rm -rf {} \;
```

`-exec {} ;`の場合、1 行ずつコマンドに渡し`rm`を実行する。

```shell
rm -rf foo.txt
rm -rf bar.txt
rm -rf baz.txt
rm -rf qux.txt
```

`xargs`の場合、可能な限り複数行をまとめてコマンドに渡し`rm`を実行する。

```shell
rm -rf foo.txt bar.txt baz.txt qux.txt
```

毎回実行するか、まとめて実行するかの違い。なので`xargs`の方が高速。

因みに`-exec {} +`を使うと、複数行をまとめてコマンドに渡せるけど、実行対象が数万件とかだと`xargs`の方が効率的らしい。
TypeScriptで安全にランタイム型チェックを行う〜網羅性チェックとnever型〜

以下のコードを見てください。

```ts
type HogeUnion = 1 | 2;

function printHogeUnion(x: HogeUnion) {
  console.log(x);
}
```

`HogeUnion`型、つまり`1 | 2`である`x`を受け取って出力するだけの単純な関数`printHogeUnion`を定義しています。何も問題がないコードです。

もしTSの型の健全性が壊されて`x`に`1 | 2`以外の値が入ってきた時にすぐ気付けるようにランタイム型チェックを行いたくなったとしましょう。例えば`printHogeUnion(0 as any)`を実行すると`0`を出力するのではなく例外を投げるといった具合です。この時`unreachable`関数を定義し、`printHogeUnion`にランタイム型チェックのコードを追加して以下のようになります。

```ts
function unreachable(): never {
  throw new Error("unreachable");
}

function printHogeUnion(x: HogeUnion) {
  if (x !== 1 && x !== 2) {
    unreachable();
  }

  console.log(x);
}
```

このコードは確かに正しいです。しかし問題もあります。それは仕様変更にとても弱いという事です。例えば`HogeUnion`の型を`1 | 2 | 3`にし、`printHogeUnion`の修正を行わないとどうなるでしょう。

```ts
type HogeUnion = 1 | 2 | 3;

function printHogeUnion(x: HogeUnion) {
  if (x !== 1 && x !== 2) {
    unreachable();
  }

  console.log(x);
}
```

このコードはコンパイルが通ります。しかし`printHogeUnion`にあるランタイム型チェックの処理の修正を忘れているので`printHogeUnion(3)`を実行すると例外が投げられます。これはバグです。この程度ならすぐに気付けますがもし`HogeUnion`を使っておりランタイム型チェックをこのようにしている関数がたくさんあれば修正漏れが発生しそうです。
このような場合、`never`型を受け取って例外を投げる関数`safeUnreachable`を定義して使うと上手くいきます。

```ts
function safeUnreachable(_x: never): never {
  throw new Error("unreachable");
}

type HogeUnion = 1 | 2 | 3;

function printHogeUnion(x: HogeUnion) {
  if (x !== 1 && x !== 2) {
    safeUnreachable(x); // コンパイルエラー
  }

  console.log(x);
}

```

こうすると`x`は`3`型なのでコンパイルエラーになってランタイム型チェックの修正漏れにすぐ気づくことができます。`printHogeUnion`を以下のように修正するとコンパイルが通ります。

```ts
function printHogeUnion(x: HogeUnion) {
  if (x !== 1 && x !== 2 && x !== 3) {
    safeUnreachable(x);
  }

  console.log(x);
}
```

`never`型の変数は型の健全性が保たれている限り値が存在しません。つまり`never`型の値が出てくるコードには到達しません。これは到達可能なコードであれば`never`型の値を作ることができないということでもあります。
つまり仕様変更などでそのコードに到達可能になればコンパイルエラーが発生しすぐにバグに気づくことができます。これで安全にランタイム型チェックが行えるようになりました。


ちなみにこれは以下のような応用も可能です。


```ts
function foo(x: 1 | 2) {
  if(x === 1) {
    console.log("a");
    return;
  }

  if(x === 2) {
    console.log("b");
    return;
  }

  safeUnreachable(x);
}
```

こうすることでもし`x: 1 | 2 | 3`になったときにすぐ修正漏れに気づくことができます。
Vueとaxiosを使って外部APIからデータを取得する

```js
new Vue({
  el: '#fetchUsers',
  data: {
    users: []
  },
  mounted() {
    axios.get('/users')
      .then(response => (this.users = response.data))
    }
});
```
```html
<div id="fetchUsers">
  {{users}}
</div>
```

結果

```
{userId: 1, userName: sato}, {userId: 2, userName: tanala}
```
Windows 10 Home (64bit)に Filemaker Server 18 をインストールする

表題のように Filemaker Server 18 を Windows Home 10(64bit) にインストールし、データベースファイルを LAN上で共有することができた。

**当然、サポートされていない機能なので　もし、試される方はすべて自己責任
ということで**

Qiitaの記事
**[Windows 10 Pro に FileMaker Server をインストールする](https://qiita.com/corselia/items/7ff41871845d152b256e)**
を参考にしてみた。
これは、
>バージョンは FileMaker Server 14 および FileMaker Server 15 

で、（ご本人にとっては）うまくいかなかったらしいが、以下の部分はそのまま利用できた

- ARR(Microsoft Application Request Routing)手動インストールの方法
- コマンドプロンプトでセットアップする記事の紹介  
[Admin On the Run: FileMaker 14 Offline Installation - Since FM can't write decent documentation](http://adminontherun.blogspot.com/2015/06/filemaker-14-offline-installation-since.html)

<br/>ただし、こちらも FS14 の記事なので FS18にはそのまま適用できない。<br/>
これらをすべてまとめて、**インストールから、LAN上で共有データベースを開くまで**の手順をまとめてみた。

0.必要なもの
- Windows 10 Home(64bit)   32ビット版ではインストールできない。必ず64bit版
- FMサイトよりダウンロードしたライセンスファイル(LicenseCert.fmcert) ※18からライセンスキーではダメになったみたい

1. インストール手順
 <br/>(1) サーバーインストールプログラムを解凍する、というか以下の準備がないと解凍したところで、それより先に進めなくなる.<br/>※以下解凍先は　C:\FileMaker Server 18 とする<br/>
 <br />(2) ARRを手動でダウンロードし、インストールする<br/>
[Application Request Routing 3.0 Stand-alone package (IExpress) x64] (http://www.microsoft.com/en-us/download/details.aspx?id=47332)<br/>
 <br/>(3) 必要なものに挙げたライセンスファイル(LicenseCert.fmcert)を任意のフォルダに持ってくる（というか次の(4)で場所を指定する） <br/>
 <br />(4) 解凍先フォルダにある以下のファイルを編集する<br/>
　　　1.　Files\Assisted Install.txt<br/>
　　　2.　Files\Setup.ini
      <br/>Files\Assisted Install.txtの中の<br/>
`License Certificate Path=` <br/>という行を<br/>
`License Certificate Path=C:\FileMaker Server 18\LicenseCert.fmcert`<br/>
とライセンスファイルのをwin形式のフルパスで指定するよう変更する。<br/>
      Files\Setup.ini　の末尾の<br/>
`PreReq13=Microsoft Application Request Routing 3.0.prq`<br/>
`PreReqFeatures13=Common`<br/>
の2行を削除する。<br/>
  <br/>(5) 以上の準備ができたら、コマンドプロンプトを開き<br/>
`cd C:\FileMaker Server 18￥Files`<br/>
`setup.exe /V”/log %temp%\FM18InstallLog.log ARRINSTALLED=1"`<br/>
で、インストールする。ダブルコーテーションを忘れないこと。

これで、**Windows 10 home に FileMaker Server 18 のインストール**はできた。インストール中にSSLサーバ証明書が必要というメッセージが出るがファイルメーカーのデフォルト証明書を使用する（自分のように証明書のない場合）

*インストール後、DBがネットワーク共有できるまで(続く予定)*
[rails,html]文字省略〜続きを読む実装〜



簡単なブログサイトを作成中に、よくサイトで記事が一定の文字数を超えた時に「...続きを見る」を実装したかったので調べて実装してみた。

##コード

```
<%= truncate(45, omission: "") %>
```

45文字以上は切り捨て。omissionは切り捨てた場合に表示させたい文字を書く。



<img width="435" alt="続きを読む.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438485/469645d7-66fe-ec1f-7d39-636cf3c43aca.png">

無事45文字で切れた!!!
JavaでTwilio使ってみるよ！（SMS編 その１）

前回、pom.xmlにTwilio SDKの依存を追記したところから。

# 必要なもの

Twilioに登録したときの、下記の情報が必要です。

+ ACCOUNT SID
+ AUTH TOKEN
+ callerId（購入した電話番号）

電話番号ですが、SMSを送る場合は日本の050番号じゃダメみたいです。
アメリカの番号にしましょう。

# 実装してみる

Twilioの公式ヘルプを参考に実装してみます。（ほぼそのままですが）
https://jp.twilio.com/docs/sms/api/message-resource

ACCOUNT_SID、AUTH_TOKEN、電話番号は適宜変えてください。

なお、電話番号は国際電話表記じゃないとだめです。
例えば、「090-0012-3456」に送る場合は、「+819000123456」となります。
（日本の国番号+81に、市外局番の先頭の0を除いた形）

``` java:SMSController.java
package jp.co.pmtech.iwata.twilio.controller;

import com.twilio.Twilio;
import com.twilio.rest.api.v2010.account.Message;
import com.twilio.type.PhoneNumber;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class SMSController {

    /** ACCOUNT SID */
    private static final String ACCOUNT_SID = "*******";
    /** AUTH TOKEN */
    private static final String AUTH_TOKEN  = "*******";

    @PostMapping("/sms")
    public void sms() {

        // twilioの初期化
        Twilio.init(ACCOUNT_SID, AUTH_TOKEN);

        // 送信するメッセージ
        String body = "こんにちは！\n"
                    + "テストメッセージです。";

        // SMSを送る
        Message message = Message.creator(
            new PhoneNumber("+8190********"),  // 送信先の電話番号
            new PhoneNumber("+1**********"),   // callerID（購入した番号）
            body).create();
        
        System.out.println(message.getSid());
    }
}
```

# 動かしてみる

SpringBootを起動して、http://localhost:8080/sms を叩いてみましょう。
あ、`@PostMapping`にしちゃったので、Talend API Testerから叩きますか。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/c38f818d-a403-820b-bba5-9df74422bec9.png)


おー！届きました！
ね、チョロいでしょ？

※ トライアル版の場合、メッセージの先頭に「Sent from a Twilio Trial account.」という文字列が追加されるようです。

# 絵文字って送れるの？

🤣 ←この絵文字を送ってみたいと思います。
Unicodeで送ればいいのかな？

## やってみる

https://0g0.org/unicode/1F923/
文字コードはu+1F923らしいのでやってみます。

```java:
        // 送信するメッセージ
        String body = "こんにちは！\n" + "\u1F923" + "\u1F923" + "\u1F923" +"\n"
                    + "テストメッセージです。";
```

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/dee789ba-a949-adec-d800-0ca280df4fd8.png)



あれ？なんか変な文字になった。

## 絵文字のUnicode表記方法

絵文字は拡張文字なので4バイトです。
JavaのUnicode表記は2バイトしか書けないので、サロゲートペアで2バイトづつ表現しなきゃいけないみたい。

https://www.fileformat.info/info/unicode/char/1f923/index.htm
ここに表記方法のってました。

| Encodings | |
|:--|:--|
| C/C++/Java source code | "\uD83E\uDD23" |

```java:
        // 送信するメッセージ
        String body = "こんにちは！" + "\uD83E\uDD23" + "\uD83E\uDD23" + "\uD83E\uDD23" +"\n"
                    + "テストメッセージです。";
```

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/389a96c3-2831-ea32-1ed3-41379e8e2642.png)


やったね🤣🤣🤣

# 次回予告

送信失敗とかわかるのかな？
エラー: The policy failed legacy parsing

Serverlessを使っていて以下のエラー。

# エラー
```bash
  Serverless Error ---------------------------------------
 
  An error occurred: MicroServiceAdminGroupPolicy - The policy failed legacy parsing (Service: AmazonIdentityManagement; Status Code: 400; Error Code: MalformedPolicyDocument; Request ID: xxx-xxx).
 
  Get Support --------------------------------------------
     Docs:          docs.serverless.com
     Bugs:          github.com/serverless/serverless/issues
     Issues:        forum.serverless.com
 
  Your Environment Information ---------------------------
     Operating System:          darwin
     Node Version:              12.4.0
     Framework Version:         1.63.0
     Plugin Version:            3.3.0
     SDK Version:               2.3.0
     Components Core Version:   1.1.2
     Components CLI Version:    1.4.0

```

# テンプレートの内容

```yaml
  MicroServiceAdminGroupPolicy:
    Type: AWS::IAM::ManagedPolicy
    Properties:
      Description: "foobar"
      Groups:
        - !Ref MicroServiceAdminGroup
      PolicyDocument:
        Version: '2012-10-17'
        Statement:
          # DynamoDB
          - Effect: Allow
            Action:
              - dynamodb:*
            Resource:
              - "arn:aws:dynamodb:#{AWS::Region}:#{AWS::AccountId}:table/${self:service}-*"
```

# 原因
↓こいつらが原因。

- `#{AWS::Region}`

[Serverless Pseudo Parameters](https://serverless.com/plugins/serverless-pseudo-parameters/)の記法だが、プラグインを入れ忘れていた。プラグインを入れることで解決。

```bash
npm install serverless-pseudo-parameters --save-dev
```

```serverless.yml
plugins:
  - serverless-pseudo-parameters
```
Firebase Test Labの実機テスト動かなくなったとき


### IPアドレス制限
開発環境のAPIがアクセス元IPアドレスの制限を行っていないか確認しましょう

最新のリストは以下にあります。
https://firebase.google.com/docs/test-lab/android/overview?hl=ja#and_mobile_advertising

### Bitriseから実行している場合

上限は無いはずですが…

```
Start test
Failed to start test: 500, error: Failed to list histories, error: googleapi: Error 429: Quota exceeded for quota group ‘default’ and limit ‘Queries per day’ of service ‘toolresults.googleapis.com’ for consumer ‘project_number:0123456789’., rateLimitExceeded
```

statusすらとれない…？

```
 (1/1) running
Failed to get test status, error: Failed to get test status
```

hmmm....beta版ですからね！随時追記していきます。
プログラミング未経験者が独学SwiftUIでお天気検索アプリをリリースしました🌤

はじめまして！
Swiftを独学で勉強中の[Hibimaru](https://twitter.com/Hibimaru02)です。
プログラミングは未経験で3Dイラストレーター/デザイナーとして活動しています。

自分のイラストでアプリを作ってみたかったので、2019年12月頃からSwiftの勉強を開始し、
最初はStoryboardでアプリを作る練習をしていました。
しかし、SNSなどでSwiftUIなるものの存在を知って、新しい物好きの僕は**「最新の技術を使ってリリースしたい！」**という思いからSwiftUIの勉強に切り替えました。

##目次
- 作ったアプリについて
- Swiftの勉強方法
- 作ってみて感じたこと

###作ったアプリ
####[Weather Pop](https://apps.apple.com/us/app/weather-pop/id1497676390?l=ja&ls=1)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494391/58308860-e88c-7208-3561-1529eee9c17b.png)



#####主な機能
- 現在時刻に加え3時間ごとの天気、気温情報を確認できます。
- :information_source:ボタンを押すことで風速、湿度、気圧情報の表示切り替えができます。

独学でわからないことだらけでしたので、機能は少ないですが、**なんとか形にする**という目的は達成できました。

###Swiftの勉強方法
1. 初めはUdemyの動画を見て学習しました。
[【iOS13対応】未経験者がiPhoneアプリ開発者になるための全て iOS Boot Camp
](https://www.udemy.com/share/101KI4CUITd1dTTHg=/)
1. 次に書籍で学習しました。 [絶対に挫折しない iPhoneアプリ開発「超」入門 第7版 【Xcode 10 ＆ iOS 12】 完全対応](https://www.amazon.co.jp/%E7%B5%B6%E5%AF%BE%E3%81%AB%E6%8C%AB%E6%8A%98%E3%81%97%E3%81%AA%E3%81%84-iPhone%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%AC%AC7%E7%89%88-%E3%80%90Xcode-%E5%AE%8C%E5%85%A8%E5%AF%BE%E5%BF%9C-ebook/dp/B07KQTQ5VJ/ref=sr_1_7?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=swift&qid=1580952265&sr=8-7)
2. YouTubeで学習

SwiftUIは主にYouTubeで学習しました。
最近では結構動画も増えてきているので、[SwiftUI公式チュートリアル](https://developer.apple.com/tutorials/swiftui/)を終えた後に見るとより理解が深まったように感じました！

##作ってみて感じたこと
デザインからイラスト、実装まで一人で作業するのはかなり大変でした:sweat_smile:
僕はHTMLやCSS、WordPressでサイトを作ることくらいしか知識がなく、プログラミングは全くの未経験です。
いつになったら理解できるんだろうという不安しかありませんでしたが、こんな僕でも学習を続けていると少しづつ理解できるようになってきました。
「誰が使うねん！」みたいなアプリですが、無事リリースまで持っていけたのは嬉しかったです:muscle_tone2:

SwiftUIは非常に書きやすく、すぐに慣れることができました。
ただ、細かい制御をもう少しできるようになればいいのになと感じました。
今後のアップデートに期待しております！

以上、最後まで読んでくださり、ありがとうございました！
こうしたらもっと良くなるなどのアドバイスをいただけると嬉しいです。
今後も勉強を続けていきたいです:keyboard:
JavaでTwilio使ってみるよ！（導入編）

これから何回かにわけて、Twilio使ってみた的な記事を書こうと思います。
RubyやPHPでの記事はあるようですが、Javaがあまり無かったので書いてみようと思いました。

# Twilioについて

簡単に言うと、音声通話・SMS・FAXなどの機能を持つクラウドサービスです。
自分のアプリケーションからSMSを送ったり、電話をかけたりすることができます。
日本では、KDDIウェブコミュニケーションズが代理店になっているようです。

https://www.twilio.com/ja/
https://cloudapi.kddi-web.com/availability/


# Twilioの登録

Twilioのアカウント登録と、電話番号の購入が必要です。
登録は他の記事でも書かれているので割愛します。

なお、トライアル登録もできるようです。
無料の電話番号は1つだけなどの制限事項はあるようですが、恐らく今回やることはできるはず。


# 目的

Twilio使って個人的にハマったところもあったので、同じようなところで困っている人の役に立てたらいいなーくらいの感じです。

予定しているのは

+ SMS
+ 音声通話
+ FAX

の3本です。

ちなみにSMSはチョロいです。
音声通話とFAXはちょーっとだけめんどくさいところがあります。


# 環境、その他前提

本記事では、以下を前提にします。

+ Twilioアカウント登録済み（電話番号も購入済み）
+ Java 1.8.0_181
+ SpringBoot 2.1.8.RELEASE
+ Twilio SDK 7.42.0

個別に違うライブラリ等使う場合は、その都度書きます。
（バージョン違ってもそれほど問題ないはず）


# 開発環境を作ろう

mavenで、SpringBootのテンプレ的なものができている前提です。

### pom.xml
pom.xmlに、Twilio SDKを追加します。

``` xml:pom.xml
<!-- Twilio SDK -->
<dependency>
  <groupId>com.twilio.sdk</groupId>
  <artifactId>twilio</artifactId>
  <version>7.42.0</version>
</dependency>
```

# 次回予告

[一番チョロいSMS送信を実装してみます。] (https://qiita.com/yoshiyuki-iwata/items/57a8099a5910325bda34)
z-indexでわけがわからなくなった君へ

HTMLとかCSSとかの基本はこれや

・後に記述してるやつほど表にくる

以下みたいにすると、試してないけど、たぶん画面は青くなるんちゃうかなって思うねん

```HTML
<style>
  .a, .b {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .a {
    background-color: red;
  }
  .b {
    background-color: blue;
  }
</style>
<div class="a"></div>
<div class="b"></div>
```

ようするに、モーダル出したり、画面にカーテンみたいな効果かけたりしたいとき、上に乗りたい要素の後に記述すれば、そもそもz-indexは使う必要ないねん　z-index: 999 とか z-index: 9999 とかは不毛や

追記：jquery-ui とかで要素に自動的にz-indexが付与されてしまうので、仕方なくそれ以外の要素にもz-indexを付与するという悲しい事例を発見してしまった　z-index弾圧派としては、断固としてこれを拒否すべく、jqueryによるz-indexの付与後にz-indexをしばくという方法で回避した．
Kaggle:Introduction to Manual Feature Engineering その3

##Calculate Information for Testing Data

で、testデータに今まで計算したbureau_countsとかをmergeしてるけど、testデータはtestデータでまた別のbureau的なデータがあるものだと思ってた。SK_ID_CURRを見たら、trainとtestと両方入っているのだろうか。

```
train_labels = train['TARGET']

# Align the dataframes, this will remove the 'TARGET' column
train, test = train.align(test, join = 'inner', axis = 1)

train['TARGET'] = train_labels
```

ここらへんの、trainとtestのcolumnsを揃えるのも慣れてきた。
predictする時によくエラーが出ていたものです・・

html(CSS)でも、 ```test-align:center```みたいな指定があったが、alignは「揃える」という意味だったのね。。


```
kde_target(var_name='client_bureau_balance_counts_mean', df=train)
```

あれ、上記だとエラーになってします、と思ったら元のnoteもエラーになっていたという笑

おそらく、

```
kde_target(var_name='client_bureau_balance_MONTHS_BALANCE_count_mean', df=train)
```
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11563/c51be779-b633-3c63-21df-30f89a1e29da.png)

この図だと思われる。KDEの図は本当好き。


## Collinear Variables
Collinear Variablesとは何なのか・・
検索すると、
多重共線性 multicollinearity
と同じと出てくるだが本当にそうなのか。
まあ読んだ意味からすると似たようなものだろう。
Targetとのcorrelationだけでなく、variablesそれぞれのcorrelationsを見て、高いものは外していくほうがよい、と。


## Notebookで変数の中身を知りたい
いわゆるprint debugしたい！という時、みたいところの直前で

```
from IPython.core.debugger import Pdb; Pdb().set_trace()
```
でconsole出てくるので、そこでprint debugできるよ、と。便利。

## 学んだpython
- set()


リストを渡すと重複が取り除かれる。というように使っているが本来は集合を作るものらしい・・
https://qiita.com/Tocyuki/items/0bc783daab382ef7a0ec


## 学んだ英語

- skeptically 懐疑的



次はModelingから。
https://www.kaggle.com/willkoehrsen/introduction-to-manual-feature-engineering#Modeling
SCSSにstylelintとPrettierを適用する

## 概要

- SCSSに対して、stylelintのルールにのっとったフォーマット変換をPrettierで行いたい
- VSCode上のformatOnSaveでstylelintに即したフォーマットがかかることが理想系
- セットアップするときにいつも適用済みのリポジトリを探すのがめんどくさいのでメモしておく

## 手順

- ライブラリをインストール
    - `stylelint-config-idiomatic-order`はCSSの記載順序のルール
    - こだわりはないけど何かしらの規則がないと落ち着かないので入れてる

```zsh
yarn add -D stylelint stylelint-config-idiomatic-order stylelint-config-recommended-scss stylelint-scss prettier-stylelint
# or
npm i -D stylelint stylelint-config-idiomatic-order stylelint-config-recommended-scss stylelint-scss prettier-stylelint
```

- stylelintの設定ファイル`.stylelintrc.js`を作成
    - シングルクォートにしてるのは単なる好み

```js:.stylelintrc
module.exports = {
  extends: [
    'stylelint-config-idiomatic-order',
    'stylelint-config-recommended-scss',
    './node_modules/prettier-stylelint/config.js',
  ],
  rules: {
    'string-quotes': 'single',
  },
};
```

- `package.json`にコマンド追加
    - `yarn lint:css`はstylelintの結果を見るだけ
    - `yarn format:css`はstylelintのルールに合わせてformatをかける

```json:package.json
{
  // ...
  "scripts": {
    // ...
    "lint:css": "stylelint \"src/**/*.scss\"",
    "format:css": "prettier-stylelint --write \"src/**/*.scss\""
  }
}
```

- VSCodeのプラグインを入れる
- Prettier
    - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
<img width="737" alt="スクリーンショット 2020-02-06 11.34.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/623c079f-b1cc-e584-5a35-719d840dce30.png">
- Stylelint
    - https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
<img width="571" alt="スクリーンショット 2020-02-06 11.35.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/a734b598-107b-ff4c-1893-8ba583ea41c8.png">
- formatOnSaveにチェックを入れておけばこれで動く

<img width="624" alt="スクリーンショット 2020-02-06 11.37.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/ba125a6b-f6c6-e999-2df7-befe64e86959.png">
[漏洞通告]CVE-2020-7980/Intellian Satellian Aptus Web控制台存在远程命令执行漏洞

### 漏洞描述
在`Intellian Aptus Web`1.24以前的版本中允许攻击者利用JSON数据中的Q字段对`/cgi-bin/libagent.cgi`执行任意操作系统命令,严重影响服务器安全.该漏洞在部分情况下需要可认证的cookie进行鉴权以后才能触发.

### CVE编号
CVE-2020-7980

### 漏洞威胁等级
高危

### 影响范围
`Intellian Aptus Web` <= 1.24

### 漏洞验证
使用公开payload进行验证
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491410/ae9dea46-afcb-d17f-3e70-68d3e3077792.png)
### 修复建议
升级至官方最新版本

### 时间轴
[0] 2020/01/29 NVD修改该漏洞
[1] 2020/02/06 亚信安全网络攻防实验室分析&复现该漏洞并发布漏洞通告
### Reference
https://nvd.nist.gov/vuln/detail/CVE-2020-7980
https://cxsecurity.com/issue/WLB-2020010216
[Node]mysql2でRDS証明書更新対応した

# 対象

- mysql2を使用している
- DBへ接続するのオプションに、`ssl: "Amazon RDS"` を使ってる

# 更新方法

以下のコマンドでパッケージのアップデートを行う

```
npm up mysql2
```

# 何が変わる？

constansに指定されている証明書が変更される
以下はnode-mysql2のGithub

https://github.com/sidorares/node-mysql2/blob/master/lib/constants/ssl_profiles.js

# 確認

開発プロジェクト内の 
`node_modules > mysql2 > lib > constans > ssl_profile.js`
を確認して

`Updated for 2015` となっている場合RDSの証明書更新に合わせて更新する様にしましょう。

```javascript
'use strict';

// Certificate for Amazon RDS (Updated for 2015)
exports['Amazon RDS'] = {
  ca: [
...省略
```
figmaを使って既存ホームページをデザインに起こすンゴよ〜

# はじめに

Figmaではプラグインを使うことにより、既存画面からデザインを起こすことが可能です。

そのため既存デザインがないプロジェクトにアサインされ、追加画面や画面修正を頼まれたときに大活躍します。(多分）

## 注意事項

- jsでモーダル等を表示制御している場合は表示が崩れる場合がある。
- たまにテキストが出力されないことがある。
- スクロールが必要なサイトは全部表示されないかも
- divの数だけrectangleがあるのか、不要な図形が出力されることがある
- **一切グループ化、フレーム化されない状態で出力されるので、インポート後こちらで適切な形に修正しなければいけない**
- **ログイン後のUIが欲しい場合や、セキュリティ制限があるサイトの場合は、chrome拡張機能を使う必要あり。** ニュースサイトなど誰から見ても同じUIの場合は必要ない。


## 手順

### 1. HTML To Figmaの導入

<img width="868" alt="スクリーンショット 2020-02-06 17.12.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264910/d4fa0391-a97d-e6a0-610a-7e55e508193e.png">

<img width="982" alt="スクリーンショット 2020-02-06 17.12.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264910/04f210f6-36e3-bc73-7488-07d1a4dc6648.png">


- [Chrome拡張機能](https://chrome.google.com/webstore/detail/html-to-figma/efjcmgblfpkhbjpkpopkgeomfkokpaim)
- [Figma Plugin](https://www.figma.com/c/plugin/747985167520967365/HTML-To-Figma)

### 1.5. (必要に応じて)

右上のこのアイコンをクリック

<img width="40" alt="スクリーンショット 2020-02-06 17.11.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264910/c3ed060c-cf56-029d-63e9-b1ed08b27b44.png">

<img width="324" alt="スクリーンショット 2020-02-06 17.19.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264910/fe828f11-c60c-3fd9-99dd-d5cec788dd39.png">


- 該当ページを開き、Chrome ExtensionのHTML To Figmaアイコンをクリックし、表示されるボタンをクリック。
- jsonが保存される

## 2. デザインをインポートする

![スクリーンショット 2020-02-06 17.21.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264910/585a0ac8-194c-e576-85ca-586824c122c5.png)

- Figmaで[Plugins]→[HTML To Figma]を開き、urlを打ち込む。1.5の手順を踏んでいる場合は**upload here**をクリックし、jsonを選択する

## 3. インポート完了

なんかちょっと壊れてる気がしなくもないですができました。
あとは煮るなり焼くなり好きにしましょう。

__地獄のグループ化、フレーム化作業が待っているぞ！__

![スクリーンショット 2020-02-06 17.22.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264910/5b1a6e23-9b08-e29f-ffb5-bb925920d974.png)


## おわり

ページ全体を使うのでなく、あるサイトのあるコンポーネントのつくりを参考にしたいとかそういう役割で使うほうがコスト低くてよさそうです。
Laravelのbladeで脆弱性を考慮した改行とスペース表示

https://twitter.com/mpyw/status/1224923891924996099
@mpywさんから学んだことをメモします。

##結論
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308965/b4ded617-160c-b7af-ed32-6262d88aa949.png)




**＞ヒューマンエラーでXSS脆弱性に結びつくため**
**・改行したいときはCSSでpre-wrapを当てる**
**・HTMLを生で出したいときは HTMLString クラスを使う**
**・基本的には {!! !!} は使用禁止**
**・メールテンプレート以外では使わない**
**・HTMLStringを作る場合は、属性値とかテキストとかはかならずe関数でエスケープ**
**例：**[PHPでネストした連想配列を <input type="hidden"> の配列に組み立てる](https://qiita.com/mpyw/items/0c5ec554bd628c3f0ccd)


##ちなみに
```php:
{!! nl2br(e($hoge)) !!}
```

**上記の書き方でもエスケープ処理はされますが、改行しか反映されません。
改行とスペースも反映させたい場合は、下記のようにCSSでpre-wrapあてます。**

```php:
<div style="white-space:pre-wrap;">{{$message}}</div>
```




##【注意】

```php:
<div>
  foo
</div>
```
ではなく


```php:

<div>foo</div>

```
のように詰めるように！


## 参考文献

この記事は以下の情報を参考にしました。

- [【CSS】改行を含むテキストの表示をスタイルシートで？](https://www.softel.co.jp/blogs/tech/archives/3997)
- https://twitter.com/mpyw/status/1224923891924996099
- @mpyw
Web Appの環境変数をコンテナ内のReact Appから呼び出す

失敗談と解決方法です
やらかしたメモ

# 実現させたかったこと
Azure上のApp Serviceで設定した環境変数をデプロイしたDockerイメージで使用したかった。
CRA(Create React App)を使用しているため、.envファイルに`REACT_APP_`と先頭とつけて書いておくと環境変数として読み込まれる。。
　→ App Serviceから環境変数として渡されている値をもとに`.env`を生成する。

# 試した実装と望んでいた動作
DockerfileのCMDを使用して`Docker run`のタイミングで`.env`を生成するシェルスクリプトを実行する。
↓↓↓

```dockerfile
CMD [ "/bin/bash", "-c", "./env.sh" ]
```

```shell:env.sh
#!/bin/bash

rm -rf .env
touch .env

while read -r line || [[ -n "$line" ]];
do
  if printf '%s\n' "$line" | grep -q -e '='; then
    varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
    varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
  fi

  value=$(printf '%s\n' "${!varname}")
  [[ -z $value ]] && value=${varvalue}
  
  echo "$varname = \"$value\"" >> .env
done < .env.key
```

```:.env.key
REACT_APP_ID = 
REACT_APP_PW = 
```

`.env.key`にある変数名をもとに`.env`を生成して、下の要領でアプリケーション内で読み込みたかった。

```javascript
id = process.env.REACT_APP_ID;
pw = process.env.REACT_APP_PW;
```

# 原因
`.env`の読み込みタイミングはDockerfile内の`yarn build`が実行されたとき。
`yarn build`が実行されているのは`docker build`をした際のみで、`.env`が生成される前。
`docker run`が実行されるのもApp Serviceから環境変数が渡されるのも`docker build`が終了し、App Serviceにデプロイされたタイミング。
　→ `.env`の生成自体は成功していたが読み込まれていなかった。

ただのミスだった…

# 解決策
下記のようにenvファイルを変更して、環境変数を保持するjsファイルを生成する。
`index.html`の`head`でスクリプトとして読み込ませることで、`window._env_.***`として呼び出すことができる。

```javascript:呼び出し
id = window._env_.REACT_APP_ID; 
pw = window._env_.REACT_APP_PW; 
```

```shell:env.sh
#!/bin/bash

rm -rf ./env-config.js
touch ./env-config.js

echo "window._env_ = {" >> ./env-config.js

while read -r line || [[ -n "$line" ]];
do
  if printf '%s\n' "$line" | grep -q -e '='; then
    varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
    varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
  fi

  value=$(printf '%s\n' "${!varname}")
  [[ -z $value ]] && value=${varvalue}
  
  echo "  $varname: \"$value\"," >> ./env-config.js
done < .env

echo "}" >> ./env-config.js
```

```html:index.html
<head>
...
    <script src="%PUBLIC_URL%/env-config.js"></script>
...
</head>
```

# 参考
- https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/
- https://stackoverflow.com/questions/19331497/set-environment-variables-from-file-of-key-value-pairs/19331521
- 先輩のコード
Vuetify2系で SortableJS つかって v-simple-table を ドラッグ&ドロップさせる

■ 参考
drag-n-drop in Vuetify — Part II - Vuetify - Medium
https://medium.com/vuetify/drag-n-drop-in-vuetify-part-ii-2b07b4b27684
SortableJS/Sortable
https://github.com/SortableJS/Sortable
Vuetify Simple tables
https://vuetifyjs.com/ja/components/simple-tables

■ 完成品

<p class="codepen" data-height="800" data-theme-id="default" data-default-tab="result" data-user="mykysyk" data-slug-hash="qBdBRMB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vuetify 2.x v-simple-table drag and drop">
  <span>See the Pen <a href="https://codepen.io/mykysyk/pen/qBdBRMB">
  Vuetify 2.x v-simple-table drag and drop</a> by mykysyk (<a href="https://codepen.io/mykysyk">@mykysyk</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
[ Android ] setFlags()を使って一度に複数の画面遷移

例えば　画面1→画面2→画面3と遷移した後画面3→画面1と戻りたい時がある。そのような時finish()を使うこともできるが、画面が多いとうっとおしくなる。そんな時setFlags()というメソッドを見つけたので使ってみた。

##方法
新たに画面1のアクティビティを起動して、これまでに遷移してきた画面をスタックから削除することで実現できる。

~~~java
    Intent intent = new Intent(SubActivity2.this, MainActvity.class);
    intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); //この引数は「スタックをクリア」を表す
    startActivity(intent);
~~~

##Intent.setFlags()
今回はスタッククリアの引数を使ったが、他にも引数がある。参考URLに乗せておいた。
画面の内容を変えたくなかったので、スタックにある画面1を使いまわす方法も考えたが、画面2,3が残るのが嫌だったのでスタッククリアを使った。

##感想
setFlags()の引数はいろいろあるので、うまくやればスタックの画面を使いながら不必要な画面だけクリアするということもできるかもしれない。

##参考URL
・AndroidでActivityのスタックを削除する方法
http://9ensan.com/blog/smartphone/android/android-activity-stack-delete/

・intent.setFlagsメソッドの引数について 
https://androidroid.info/android/activity/568/
スマートシティでのGoogle Coralの例

「スマートシティ」の真の可能性に到達するために、AI処理はクラウドから安全なローカルデバイスに移動し、個人のプライバシーを維持し、データ転送速度を低下させ、重要なシステムの反応時間を短縮する必要があります。

#### 占有検知
Coralを使用すると、建物の管理者はプライバシーを保護する方法で人間の存在を検出し、照明、気候、エネルギー利用を最適化して、運用コストと二酸化炭素排出量を大幅に削減できます。

#### 歩行者の安全
サンゴはカメラと画像分類技術を利用して交差点の人々を支援し、ドライバーが周囲をよりよく認識できるようにします。 公共バスや車両のサンゴは、ドアを回したり開いたりするときに歩行者や自転車を監視することもできます。

####交通流
Coralは、道路および重要なゲートウェイでセンサーを有効にし、ピーク時の交通時間、特別なイベント、気象条件、および事故に対応し、都市全体の交通流を最適化するのに役立ちます。

####人口の流れ
Coral対応センサーの分散ネットワークは、都市計画者が公園、通り、職場、小売センターなどの物理的空間の人口の流れをプライバシーを保護する方法で理解するのに役立ちます。 そのデータをより大きなモデルにフィードすると、共有リソースを効率的に配布し、インシデント対応を改善するのに役立ちます。

####大気モニタリング
コーラルを使用して、政府と企業は、大気汚染問題を特定し、排出を制限するための予防措置を作成する、高速で効率的なソリューションを構築できます。

Edge AI用のGoogle Coralデバイスが市場にリリースされました。興味がある場合は、オンラインで購入できます。 Googleには多くのCoralディストリビューター、Mouser、Gravitylinkなどがあります。

便宜上、（https：//store.gravitylink.com/global）にリンクを配置します。
ViewGroupでMaxWidthを実現する

`ViewGroup` には `maxWidth` / `maxHeight` は存在しません。素直に `onMeasure` を `override` して実現しましょう。

```kotlin
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        if (MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.AT_MOST) {
            return super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        }

        measure(
                MeasureSpec.makeMeasureSpec(maxWidth, MeasureSpec.AT_MOST),
                MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
        )
        setMeasuredDimension(measuredWidth, measuredHeight)
    }
```

`onMeasure` 時に `MeasureSpec.AT_MOST` で最大値を指定して計算し、計算結果を `setMeasuredDimension` で設定することで、最大値以上にならないようにしています。
边缘人工智能与智慧城市案の例

「スマートシティ」の真の可能性に到達するために、AI処理はクラウドから安全なローカルデバイスに移動し、個人のプライバシーを維持し、データ転送速度を低下させ、重要なシステムの反応時間を短縮する必要があります。

占有検知
Coralを使用すると、建物の管理者はプライバシーを保護する方法で人間の存在を検出し、照明、気候、エネルギー利用を最適化して、運用コストと二酸化炭素排出量を大幅に削減できます。

歩行者の安全
サンゴはカメラと画像分類技術を利用して交差点の人々を支援し、ドライバーが周囲をよりよく認識できるようにします。 公共バスや車両のサンゴは、ドアを回したり開いたりするときに歩行者や自転車を監視することもできます。

交通流
Coralは、道路および重要なゲートウェイでセンサーを有効にし、ピーク時の交通時間、特別なイベント、気象条件、および事故に対応し、都市全体の交通流を最適化するのに役立ちます。

人口の流れ
Coral対応センサーの分散ネットワークは、都市計画者が公園、通り、職場、小売センターなどの物理的空間の人口の流れをプライバシーを保護する方法で理解するのに役立ちます。 そのデータをより大きなモデルにフィードすると、共有リソースを効率的に配布し、インシデント対応を改善するのに役立ちます。

大気モニタリング

コーラルを使用して、政府と企業は、大気汚染問題を特定し、排出を制限するための予防措置を作成する、高速で効率的なソリューションを構築できます。
Edge AI用のGoogle Coralデバイスが市場にリリースされました。興味がある場合は、オンラインで購入できます。 Googleには多くのCoralディストリビューター、Mouser、Gravitylinkなどがあります。

便宜上、https：//store.gravitylink.com/globalにリンクを配置します
ModelとTableを削除する

見通しの悪さゆえに良くモデルを作成したり削除してる。今回は削除の方法についてまとめた。

#モデルの削除
```ruby
rails destroy model モデル名
```

これでモデルのファイルやマイグレーションファイルが削除される。（カラムの追加などを行った後付けのマイグレーションファイルは削除されないため手動で削除する）

#データベースに残ったテーブルを削除

```
rails dbconsole #mysqlを起動
show databases; #databaseの一覧が見れる
show table from データベース名; #テーブル一覧が見れる
drop table テーブル名;
quit;
```
WordPressでタイトル・内容・カスタムフィールドをOR条件で検索したい

# はじめに
WordPressでタイトル・内容・カスタムフィールドをOR条件で検索したいことがあったんです。
`get_posts`でも`WP_Query`でもいいんですけど、パラメーターで、

- タイトル・内容は「s」
- カスタムフィールドは「meta_query」

を設定すればいいんですけど、これだとAND条件でつながるんですよね。（普通はこれでいい）
今回は、上記をOR条件でつなぎたかったので、それをどうするかというお話。

## パラメーター「s」のSQL
```sql
AND (((wp_posts.post_title LIKE '%テスト%') 
 OR (wp_posts.post_excerpt LIKE '%テスト%') 
 OR (wp_posts.post_content LIKE '%テスト%')))
```

## パラメーター「meta_query」のSQL
```sql
 AND ( ( ( wp_postmeta.meta_key = 'prefecture' AND wp_postmeta.meta_value LIKE '%テスト%' ) 
 OR ( wp_postmeta.meta_key = 'area_detail' AND wp_postmeta.meta_value LIKE '%テスト%' ) 
 OR ( wp_postmeta.meta_key = 'genre' AND wp_postmeta.meta_value LIKE '%テスト%' ) 
 OR ( wp_postmeta.meta_key = 'practice_time' AND wp_postmeta.meta_value LIKE '%テスト%' ) 
 OR ( wp_postmeta.meta_key = 'experience' AND wp_postmeta.meta_value LIKE '%テスト%' ) ) ) 
```

この２つをORでつなげばOK

# やり方
WordPressには、標準で出力されるSQLのwhere句を追加できるフィルターがあるらしい
`posts_where`フィルター

ちなみに、どのページのときに使うかなどを設定しないと、全部のSQLにフィルターかかるので注意！！

このSQLでタイトル・内容・カスタムフィールドをすべてOR条件でくっつけます。

```php
add_filter('posts_where', 'add_my_query');

function add_my_query($where) {
    //テストの固定ページのときだけ
    if(is_page('test')) {
        isset($_GET['freeword']) ? $freeword = $_GET['freeword'] : $freeword = '';

        if($freeword) {
            $where .= <<<EOM
            AND (wp_posts.post_title LIKE '%{$freeword}%'
                OR wp_posts.post_content LIKE '%{$freeword}%'
                OR ( wp_postmeta2.meta_key = 'prefecture' AND wp_postmeta2.meta_value LIKE '%{$freeword}%' )
                OR ( wp_postmeta2.meta_key = 'area_detail' AND wp_postmeta2.meta_value LIKE '%{$freeword}%' )
                OR ( wp_postmeta2.meta_key = 'genre' AND wp_postmeta2.meta_value LIKE '%{$freeword}%' )
            )
EOM;
        }

    }

    return $where;
}

```

`wp_postmeta2`というのは`wp_postmeta`のエイリアスです。名前はなんでもいいんだけど。
条件に`meta_query`が入っている場合は、名前が重複して怒られたり、逆に`meta_query`が入っていないと、テーブルないやんって怒られます。

だから、joinのときもフィルターを使って、`wp_postmeta`テーブルをくっつけてあげます。
`posts_join`フィルター

```php
add_filter('posts_join', 'add_my_join');

function add_my_join($join) {
    //テストの固定ページのときだけ
    if(is_page('test')) {
        $join .= 'INNER JOIN wp_postmeta as wp_postmeta2 ON ( wp_posts.ID = wp_postmeta2.post_id )';
    }

    return $join;
}

```

# まとめ
普通に検索ページなどで使いたいのであれば、それようのプラグインもあったような気がします。

# 余談
## meta_queryパラメーター
`WP_Query`や`get_posts`で、`meta_query`のパラメーター使うときにはまるのが、「meta_query はクエリがひとつだけでも入れ子の配列を指定しなければなりません。」というところかな。
自分もはまるし、他の人もはまってます。
まぁ、relationが`AND`か`OR`を設定できると知っていれば、はまることはなさそうですが...

## WordPressのページネーション
基本、`get_posts`を使いますが、アーカイブとかタクソノミーページでないのに、記事一覧を取得してページャーを作りたいときは、`WP_Query`を使用します。

なんかプラグイン使ったり、長々と独自関数書いている記事もよく見かけますが、
[関数リファレンス/paginate links](http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/paginate_links#.E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.82.AF.E3.82.A8.E3.83.AA.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.9F.E4.BE.8B)の「カスタムクエリを使用した例」をコピペすれば十分なんじゃないかと思ってます。

アーカイブページなどの場合は、ほぼ`paginate_links()`で事足りますね。
【Docker】 Redis で Error: Redis connection to 127.0.0.1:6379 failed - connect ECONNREFUSED 127.0.0.1:6379 と出てきたときの対処法

# エラー内容 
Dockerで構築したRedisにNode.jsからアクセスしようとしたら以下のようなエラーがでた

```
Error: Redis connection to 127.0.0.1:6379 failed - connect ECONNREFUSED 127.0.0.1:6379
```
# 原因
Redisに接続するときのデフォルトはローカルホストを参照するように出来ているのでコンテナに接続することが出来ない

# 対処法
Node.jsからアクセスする際に直接ホストを指定してあげる

```app.js
const redis = require('redis')
const client = redis.createClient(6379, 'redis')
```
人生ゲーム(イベント)


public class Event {
	
	private int ahead;
	private int back;
	private String jobChange;
	private int sum;
	
	int getAhead() {
		return ahead;
	}
	
	void setAhead(int a) {
		ahead = a;
		System.out.println(ahead + "マス進む");
	}
	
	int getBack() {
		return back;
	}
	
	void setBack(int b) {
		back = b;
		System.out.println(back + "マス戻る");
	}
	
	String getJobChange() {
		return jobChange;
	}
	
	void setJobChange(String jc) {
		jobChange = jc;
		System.out.println("あなたの職業は" + jc + "になりました。");
	}
	
	int getSum() {
		return sum;
	}
	
	void setSum() {
		sum += ahead;
	}
	
	//1マス目
	public static void first() {
		System.out.println("道で財布を落として見知らぬ人が交番に届けた!");
		System.out.println("お礼として1,000円支払う");		//-1,000円
	}
	
	//2マス目
	public static void second() {
		System.out.println("友達に飲みに誘われた!");
		System.out.println("会費として3,000円支払った");	//-3,000円
	}
	
	//3マス目
	public static void third() {
		System.out.println("いらないゲームソフトを売った");
		System.out.println("3,000円もらう");				//+3,000円
	}
	
	//4マス目
	public static void forth() {
		System.out.println("運転中に事故を起こしてしまった...");
		System.out.println("慰謝料として全財産失う");		//全財産失う
	}
	
	//5マス目
	public static void fifth() {
		System.out.println("気になる人とデートに!");
		System.out.println("一夜を共にする");				//何もなし
	}
	
	//6マス目
	public static void sixth() {
		System.out.println("友達の喫茶店の手伝いをする");
		System.out.println("アルバイト代として5,000円もらう");		//+5,000円
	}
	
	//7マス目
	public static void seventh() {
		System.out.println("たまたま買った馬券が大当たり!");
		System.out.println("全財産の倍のお金をもらい、3マス進む");	//財産*2、3マス進む
		tenth();
	}
	
	//8マス目
	public static void eighth() {
		System.out.println("親戚の子が遊びに来た");
		System.out.println("おこずかいとして2,000円渡す");		//-2,000円
	}
	
	//9マス目
	public static void nineth() {
		System.out.println("べろべろに酔っ払い店で卓ゲロ!");
		System.out.println("迷惑料10,000円を支払い、8マス戻る");		//-10,000円、8マス戻る
		first();
	}
	
	//10マス目
	public static void tenth() {
		System.out.println("就職!お祝いとして10,000円もらう");
		System.out.println("");
	}

}
プロダクションではConcurrentMapCacheManagerを使わない方が良い

Spring Bootは標準でキャッシュの機構を持つ。使い方は非常に簡単で:

```kotlin
@Configuration
@EnableCaching
class CacheConfig {

  @Bean
  fun cacheManager(): CacheManager {
    return ConcurrentMapCacheManager("cache")
  }
}
```

とCacheManagerの実装をDIできるようにし:

```kotlin
@Cacheable(value = ["cache"], key = "#address")
fun doGeocoding(address: String): Point {
  // ...
}
```

とすれば、keyに指定した変数名をキーに戻り値をキャッシュしてくれる。

すげー簡単。なんだけど、簡単に使えるCacheManagerの実装であるConcurrentMapCacheManagerは https://stackoverflow.com/a/36774048 みたいな扱いとのこと。なので、このStack Overflowの記事の質問である「キャッシュのサイズを制限できる？」に対してはノーということらしい。

なので回答にも書いてあるようなElCacheやGuavaのようなちゃんとしたものを使うのが良いらしい（未確認）。他は何なんですかね、Caffeineとか？
Selenium on Python : Webdriver.Chrome()でエラーが出た話

Webスクレイピングの初導入にて、以下のエラーが発生。
1.'chromedriver' executable need to be on PATH
2.cannot find Chrome binary

##結論
1.chromedriver.exeがある場所にPATHを通す or スクリプト内でwebdriver.Chrome('chromedriver.exeのパス')
2. Googleブラウザがなぜか見つからないのが原因→システム環境変数PATHにブラウザのパスを登録し再起動

##環境
Windows 10
Python 3.8.1
selenium 3.141.0

## seleniumとは
Web操作をプログラミング言語で行えるサードパーティ（pipを用いてインストール）

```powershell:cmd
(vitualforwin) C:~:~:~> pip install selenium
```


##エラーが出たコード

```python:first.py
from selenium import webdriver

driver = webdriver.Chrome()
```

##エラー内容
'chromedriver' executable need to be on PATH

##解決策
以下サイトより自身のOSに合わせて、Chromedriverをダウンロード。
[chromedriverのダウンロードページ](https://sites.google.com/a/chromium.org/chromedriver/downloads)
※VersionはChromeブラウザと同じでなければいけない。確認方法は以下サイトより
[ChromeのVer確認方法](https://cs.zaq.ne.jp/knowledgeDetail?an=000004134)

→コントロールパネル
→システム
→システムの詳細設定
→環境変数
→下のほうのリストからPathを見つけ、編集
→新規をクリックし、そこにchromedriverの保存場所のパスを入力
→再起動

##エラー内容2
cannot find Chrome binary

##解決策
上と同じく環境変数にChrome.exeのPathを登録し再起動
基本的にChrome.exeはC:\Program Files (x86)\Google\Chrome\Application
にあるはず

##【おまけ】Pathが通ったか確認する方法
システム環境変数Pathに通っていれば、どこのフォルダからもそのフォルダの中へアクセスできるようになる。
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
とうっていたものを
chrome.exe
で起動できるようになる。

なので、cmdやPowershellなどでchromedriverやchromeとうってみるとよい。
ファイルパーミッションの覚書


パーミッションの読み書きのための覚書。

## 記号⇔数字※八進表記（絶対モード）対照表

| 記号 | 数字 | 意味（ユーザー、グループ、その他）・備考 |
| --- | --- | --- |
| rw------- | 600 | 読書―　―――　―――<br />直接実行されないライブラリやログなど |
| rw----r-- | 604 | 読書―　―――　読――<br />.htaccessや.htmlファイルなど |
| rw-r--r-- | 644 | 読書―　読――　読――<br />.htaccessや.htmlファイルなど |
| rw-rw-rw- | 666 | 読書―　読書―　読書―<br />CGIスクリプトが書き込むファイルなど |
| rwx------ | 700 | 読書実　―――　―――<br />ディレクトリ、CGIスクリプトなど |
| rwx---r-x | 705 | 読書実　―――　読―実<br />ディレクトリ |
| rwxr-xr-x | 755 | 読書実　読―実　読―実<br />ディレクトリ、CGIスクリプトなど |
| rwxrwxrwx | 777 | 読書実　読書実　読書実<br />CGIスクリプト書き込み先など<br />※何でもできるため要注意 |
| --------- | 000 | ―――　―――　――― |

| 記号 | 数字 | 意味 |
| --- | --- | --- |
| rwx | 7 (4 + 2 + 1) | 読書実 |
| rw- | 6 (4 + 2 + 0) | 読書― |
| r-x | 5 (4 + 0 + 1) | 読―実 |
| r-- | 4 (4 + 0 + 0) | 読―― |
| -wx | 3 (0 + 2 + 1) | ―書実 |
| -w- | 2 (0 + 2 + 0) | ―書― |
| --x | 1 (0 + 0 + 1) | ――実 |
| --- | 0 (0 + 0 + 0) | ――― |

## 表記構成

<img width="1062" alt="アートボード 1@2x.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367480/bd4f733b-3415-a74c-0ca9-ce8bced41325.png">


### ファイル種別

| 記号 | 意味 |
| --- | --- |
| - | 一般のファイル |
| d | ディレクトリ |
| b | ブロックデバイスのスペシャルファイル |
| c | キャラクターデバイスのスペシャルファイル |
| l | シンボリックリンク |
| p | 名前付きパイプ |
| s | UNIXドメインソケット |

### クラス

* ユーザー; User
    ※所有者とも
* グループ; Group
* その他; Other
    ※その他ユーザーとも

### 各クラスのパーミッション

| 記号 | 数字 | 意味 |
| --- | --- | --- |
| r | 4 | 読み取り権限あり |
| w | 2 | 書き込み権限あり |
| x | 1 | 実行権限あり |
| - | 0 | 許可なし |

### 追加パーミッション 
各クラスの三文字目（ `rwx` の `x` 部分）に下記オプション値を設定することができる。

<table>
<thead>
<tr>
<th>記号</th>
<th>クラス</th>
<th>パーミッション</th>
<th>実行権限</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">s</td>
<td>ユーザー</td>
<td>Set User ID (setuid)</td>
<td>あり（≒x）</td>
</tr>
<tr>
<td>グループ</td>
<td>Set Group ID (setgid)</td>
<td>なし（≒-）</td>
</tr>
<tr>
<td rowspan="2">S</td>
<td>ユーザー</td>
<td>Set User ID (setuid)</td>
<td>あり（≒x）</td>
</tr>
<tr>
<td>グループ</td>
<td>Set Group ID (setgid)</td>
<td>なし（≒-）</td>
</tr>
<tr>
<td>t</td>
<td>その他</td>
<td>Sticky</td>
<td>あり（≒x）</td>
</tr>
<tr>
<td>T</td>
<td>その他</td>
<td>Sticky</td>
<td>なし（≒-）</td>
</tr>
</tbody>
</table>
※S・Tは、ディレクトリでは意味がない。

※4桁八進表記の場合追加設定の値の合算を先頭に表示する。
例: `-rwsr-Sr-x` は `6745`

| 数字 | 記号 | パーミッション |
| --- | --- | --- |
| 4 | s, S | setuid |
| 2 | s, S | setgid |
| 1 | t, T | Sticky |

## 参考

* [ファイルパーミッション - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%91%E3%83%BC%E3%83%9F%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3)
* [パーミッション早見表](http://hayakawa.ddo.jp/beginner/ux/permit.html)
OracleのMVIEWをすべて一括でリフレッシュするPLSQL

たまに使うけど忘れるので。

```sql
DECLARE
    -- 全てのMVIEWの名前を取得するカーソル
    CURSOR c IS
    SELECT
        mview_name
    FROM
        user_mviews 
    ORDER BY
        mview_name;
    -- カーソルの中身を入れる箱
    vc   c%rowtype;
BEGIN
    OPEN c;
    LOOP
        FETCH c INTO vc;
        EXIT WHEN c%notfound;
        -- 一つずつ完全リフレッシュ
        dbms_mview.refresh(vc.mview_name, 'c');
    END LOOP;
    CLOSE c;
END;
```

:beer: :beer: :beer:
LPIC201学習メモ

# LPIC201学習メモ

10年ぶりにLPIC試験を受けなおすのでその勉強の過程で記憶に残った部分をメモしていく

- ブートローダの設定ファイルの場所
/boot/grub/menu.lst(GRUBの場合)

- GRUB2の場合
/etc/default/grubの内容を修正した後update-grub2コマンド実行

- ブートローダ時に設定されたカーネルパラメータは以下のコマンドで確認
cat /proc/cmdline

- systemdの管理コマンド→systemctl
> httpdサービス起動(.serviceは省略可能)
 systemctl start httpd.service 
 or 
 systemctl start httpd

- 変更されているすべての設定ファイル表示
systemd-delta

-debian系のサービス管理コマンド
update-rc.d samba default

-/etc/fstabの書式
デバイス名 マウントポイント ファイルシステム オプション dump fsck
[AWS]Ubuntu18.04などでlocal TLDが名前解決できない問題


# Problem
内部リソースのドメイン名として、`.local`とするケースはよくあると思いますが、AWSで運用しているサーバをUbuntu18.04にアップグレードした途端、これまでアクセスできていた`.local`の内部リソースにアクセスできなくなるというトラブルに遭遇しました。

実は、Ubuntu18.04では TLDが`.local`のものは名前解決できません。これはOS(systemd-resolved)の仕様です。

## 原因

https://www.freedesktop.org/software/systemd/man/systemd-resolved.html
そもそも`.local` はマルチキャスト DNS のために予約されたドメイン（`.local`TLDは RFC6762 にて非推奨）であり、Ubuntu 18.04 における systemd-resolved の挙動は独自の実装ではなく RFC の規約に準拠したものとのこと。

`.local` ドメインの名前解決を DNS サーバに対してではなく LAN に対するマルチキャストによって行おうとするが、AWSではマルチキャストをサポートしていないため、名前解決に失敗するというわけです。

かつてはマイクロソフトもActiveDirectoryのドメイン名として`.local`を推奨していた時期もありましたが、今は非推奨としているようです。
https://social.technet.microsoft.com/wiki/contents/articles/34981.active-directory-best-practices-for-internal-domain-and-network-names.aspx

# Solution

`.local`ドメインへの名前解決要求を明示的にAWSの内部DNSへ送るために、VPC の `DHCPオプションセット`にて以下のように`.local` に対する DNS サーバーに `AmazonProvidedDNS` を明示的に指定します。

- ドメイン名: `local`
- ドメインネームサーバー: `AmazonProvidedDNS`

![スクリーンショット 2020-02-06 15.50.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135986/a0444f7b-5075-91f9-5dd7-18de87ce40a4.png)

OSアップグレードの際は気をつけましょう。
PythonでPDFを画像(JPEG/PNG)化

PDFの全ページを1枚ずつPNG画像にして`output`フォルダ(作成済み)に入れたい。

```python:sample.py

from pdf2image import convert_from_path

convert_from_path(
    'sample.pdf',            #入力PDF
    dpi=300,                 #解像度
    output_folder='output',  #出力フォルダ
    output_file='out',       #出力ファイルprefix
    fmt='png'                #フォーマット
)
```

これで`output`フォルダに`out0001-01.png` ... `out0001-16.png`のようなファイルができる。pdf2image 1.11.0

メモ

- `grayscale=True`指定でグレースケールにもできる
- `size=400`指定すると、縦横比を保ったまま長いほうの辺を400ピクセルにしてくれる
- PNG出力は結構時間がかかる。JPEGなら速い。
- SSDを使ってる場合は`output_folder`指定により高速化を期待できる
AWS Lambdaでカナリアリリースする

# LambdaのVersionとAlias
AWS LambdaではPublishすると固有のVersion番号が割り当てられる。
Versionには任意の名前のAliasをつけることが可能で、Aliasに関連付けるVersionを変更することで、Aliasを指定してFunctionを呼び出しているユーザが利用するVersionを変更することができる。
![Lambda_Version_Alias.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13038/02427f6b-9a54-a781-62a1-0305578379c9.png)

# Additional versionを用いて、新しいVersionをカナリアリリースする
Aliasには Additional versionというオプションが存在し、主として指定したVersionとは異なるVersionとその呼び出し割合を指定することができる。
Additional versionの有無や呼び出し割合は任意のタイミングで変更ができ、新しいVersionの呼び出し割合を徐々に増やしていくカナリアリリースが可能である。
![Lambda_Additional_version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13038/94b0996a-ecc1-1cfa-4e15-8acee88c21d3.png)

# Additional versionの設定方法
### Management Consoleで設定する場合
Aliasの設定画面で、Additional version及びWeightを入力し、保存する。
Weightには0〜100の間の整数を入力する。
<img width="877" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13038/6927deb0-ddc1-b8b9-ce66-b095805a8fcf.png">
### AWS CLIで設定する場合
lambda create-aliasもしくはlambda update-aliasの --routing-config オプションで設定する。
Weightsは0.00〜1.00の小数で指定する。

```bash
aws lambda update-alias \
    --function-name testCanary \
    --name Prod \
    --function-version 2 \
    --routing-config 'AdditionalVersionWeights={"3"=0.8}'
```

# どのVersionが呼び出されたか確認する
### AWS CLIで呼び出した際の戻り値
レスポンスの ExecutedVersion プロパティに、実際に呼び出されたVersionの番号が出力される。
※同期呼び出しをした場合に限る

```bash
$ aws lambda invoke \
      --function-name testCanary \
      --qualifier Prod \
      --region ap-northeast-1 \
      -
{
    "StatusCode": 200,
    "ExecutedVersion": "3"
}
```

### CloudWatch
CloudWatchでは、呼び出しに用いられたAliasとVersionごとにメトリクスを取得できる。
<img width="960" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13038/6643ff06-3281-ebe7-7dea-3a0ec0d6089c.png">
自販機と接続するアプリであった話

年功序列とやらで上流に行かされるのに嫌気がさして転職→ちまちまコードを書けるようになったゆるふわ主婦です。

##【前提】
CokeOnというコカコーラ社が出しているアプリがある。
これは、アプリ対応自販機と接続して、対応商品を購入するとスタンプがついて
15個たまると1本無料で交換ができるというアプリ。詳細は↓。
なお、歩数計としても使えてノルマ達成でスタンプが貰えたりもする。
コーラガブ飲みしてカロリーやっべ、と思っても販売元のコカコーラ社が歩くモチベを後押ししてくれるので
赤いラベルのコーラでも実質コカコーラゼロになる（ならない）。スタンプためてもう一回あそべるドン。
https://c.cocacola.co.jp/app/howto/index.html

オフィスの自販機なんか大抵数十円安いので、オフィスでスタンプを貯めて
外で好きな飲み物を無料で買ったりするとちょっとだけ嬉しかったりする。ちょっとだけ。

## 【本題】
このアプリ、時間帯によってスタンプ2倍キャンペーンとかもやってるので
その時間に自販機が並んでいる食堂に飲み物を買いに行くのである。
大体出退勤の時間帯だったりするので私みたいなスタンプ目当てのユーザー以外にもそこそこ購入者がいる。

ここで以下の通り表題の件が発生した。


1. アプリを起動する。
2. アプリ曰く「近くに接続できる自販機があるやで」
3. わたし「よし、今日はこの自販機（何台かラインナップの違うCokeOn対応自販機がある）に接続したろ」
4. アプリ曰く「接続完了したやで。好きな飲み物購入どぞー。」
5. わたし「紅茶花伝にしよ。あ、PayPayで買うと還元あるから、そっちから購入するか」（もたもた）
6. 綺麗なおねぃさんが、私の前にスッと出る。
7. わたし「お？」
8. 綺麗なおねぃさんが爽健美茶を現金で買う。
9. わたし「あっ」
10. アプリ曰く「お買い上げありがとう！アプリと自販機の接続解除するやで！スタンプ2個つけたるやで！」
11. わたし「えぇ…」
12. わたし「…紅茶花伝飲むからもっかい接続しよ…」
13. アプリ曰k(ry)


社内に友達がいないので（泣）試したことはないのだが、自販機⇆アプリの状態の時は
他のクライアントからのアプリ接続は弾かれるはずである。（多分きっと恐らく）

しかし、商品購入の際にはどのクライアント（as人間）からでも購入を受け付ける。

例えば、アプリに登録した電子マネーを利用しないと購入ができないとかであれば別だが
コカコーラ自販機は現金はもちろんnanacoや交通系IC等スマホ以外にもカード形態の物も食っちまうんだぜなので（尚、大変助かっています）
アプリを接続した人間と実際に購入する人間が同一である事を判別するのは不可能である。

これはつまり自販機に接続し、切断されない範囲でうろうろしていれば
アプリを利用せずに購入する人間からポイントを頂く事が出来てしまうのではないかなあとふと思ってしまった。
ちなみに、購入せず一定時間経過すると切断される。

## 【とは言え】

まあ、やる人おらんやろという事で決着。
そもそもよっぽど急いでいない限り、自販機前でスマホをいじる人間がいたら
その前に出て買おうかとは思わないのである…。

ただ、自販機がアプリに接続されているかは確認しようって思いました。
（お値段の所の電光表示に青いバーが表示されるので分かります）

おちまい。
Rails 本番環境で画像のasset piplineが通らない=>画像の拡張子まで指定する

タイトルが全ての内容だがめちゃくちゃはまったのでメモとしてまとめておきます。

Ruby:2.6.5 Rails:5.2　webpacker無し サーバー:unicorn
この環境でdevelopment環境では問題なく表示されてたページが500を返すようになった
いろいろ見ると問題なく表示されるページもある

ログをみると


```log/production.log
Completed 500 Internal Server Error in 7ms
ActionView::Template::Error (The asset "top/logo" is not present in the asset pipeline.):
```
となっていてどうやらasset pipelineの関連で失敗しているよう、該当の部分のviewを抜粋するとこんな感じ

```app/views/static_pages/top.html.slim
= image_tag 'top/logo'
```
`app/assets/images/top/logo.png`に置いた画像ファイルをヘルパーを使って参照してる
development環境では問題なく表示できていたが
producition環境で動かしてみると画像が表示されないとかではなくサーバーエラーの500のページがレスポンスされるようになる

プリコンパイルになにか失敗したのかと思い、キャッシュを消してやり直したりサーバーの再起等を試しても一項にうまくいかず
[Rails Asset Pipelineがうまくいかないときの問題の切り分けかた](https://qiita.com/metheglin/items/c5c756246b7afbd34ae2)
を参考に色々試してみたが分からず、かなりはまった。


# config/environments/production.rb はいじらない
簡単にググってみると 
`config/environments/production.rb`の
`config.assets.compile = false`
をtrueにしろとか書いてるのを見かけた

このオプションをtrueにすると[動的コンパイル](https://railsguides.jp/asset_pipeline.html#%E5%8B%95%E7%9A%84%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB)が働く
~~ちょっと考えれば分かることだが~~そんなことしたら**本番環境の意味がほぼ無い**
開発環境と同じ状態なので当然動くことは動くが
プリコンパイルすることでサーバーの負荷を少なくしているのに動的コンパイルをオンにしたら
そもそもプリコンパイルもいらないじゃんってはなしで**根本的な解決ではない**

ということで自力で色々試してみたら解決できた
# 画像ファイルを拡張子まで指定するだけ

```app/views/static_pages/top.html.slim
= image_tag 'top/logo.png'
```
.pngを足しただけで全て解決。

どうやら開発環境の動的コンパイルでは画像の拡張子までは指定しなくてもsproketsが補完してうまく配信してくれるもよう

[Railsガイド](https://railsguides.jp/asset_pipeline.htm)をみると本番環境ではプリコンパイル時に作られる`.sprockets-manifest-md5hash.json`というマニュフェストファイルで
viewに書かれてる`logo.png`をコンパイルされたアセットハッシュ付きの`public/assets/top/logo-88（～略～）b667.png`に結びつけてるいるが
ここでは画像の拡張子までは補完してくれないのだと思う

思ったよりもかなり単純な問題だったが、開発環境では問題なく動くのに本番環境では動かないというケースは結構はまりやすい
phpのスーパーグローバル変数の定義variables_orderについて

## variables_orderとは

php.iniには以下の定義があります。

``variables_order = "EGPCS"``

それぞれスーパーグローバル変数の作成をする定義をします。
それぞれ頭文字で以下を表わします。

``E``:Environment (環境変数)
``G``:Get
``P``:Post
``C``:Cookie (クッキー)
``S``:Server

## Eは指定しないほうがいいのか？

phpのバージョンによってはデフォルト値が変わってくるようです。
7.3に上げたら"GPCS"となりました。

>; This directive determines which super global arrays are registered when PHP
; starts up. G,P,C,E & S are abbreviations for the following respective super
; globals: GET, POST, COOKIE, ENV and SERVER. There is a performance penalty
; paid for the registration of these arrays and because ENV is not as commonly
; used as the others, ENV is not recommended on productions servers. You
; can still get access to the environment variables through getenv() should you
; need to.
; Default Value: "EGPCS"
; Development Value: "GPCS"
; Production Value: "GPCS";
; http://php.net/variables-order

コメントにもあるとおりEは推奨しないとのことです。
パフォーマンスにも影響するようです。

> CGI および FastCGI SAPI の両方で、 $_SERVER にも環境変数の値が格納されます。 つまり、S を指定すると、 ES と指定したのと同じ意味になります。 これは、E が他のどこかで指定されていたとしても同じです。

ちなみにこの一文のようにphp-fpmを使用しているとENVとSERVERには同様の値が入っていました。
なのでEは指定する必要がなおさらなさそうですね。