OmniAICreator/Qiita-1.07M huggingface dataset:
for 文

<template>
  <div>
    <form>
      <normal-controls v-bind:form="uiData.form"></normal-controls>
      <button type="button" class="btn" v-on:click="$router.push('/exchange_manage')">キャンセル</button>
      <button type="button" class="btn btn-primary" v-on:click="showCheckModal">登録</button>
    </form>
      <div>
        <!-- Modal Component -->
        <b-modal id="modalDelete" ref="checkModal"
                 @ok="post()"
                 centered
                 title="更新内容確認">
             <div>
              <b-table striped hover :items="items"></b-table>
            </div>
        </b-modal>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import {commonErrorCheck, getFormData, getParam, default as pageBase} from '../../mixins/page-base'
import normalControls from '../../components/normal-controls'

export default {
  mixins: [pageBase],
  name: "update",
  components: {normalControls},
  data() {
    return {
      uiData2: {
        form: []
      },
      items: []
    }
  },
  async asyncData(ctx) {
    return await axios
      .get('/api/exchange_item/update?id=' + getParam('id', ctx.route.fullPath))
      .then(commonErrorCheck)
      .then(res => {
        return {
          uiData: {
              id: 1,
              form: res.data.form
            }
          }
      })
      .catch(error => {
        // throw error;
      });
  },
  methods: {
    showCheckModal (bData) {
      // let new_items = [];
      // for (let field of this.uiData.form) {
      //   if (field.type == 'InputTextField') {
      //     let row = { "項目": field.label, "変更前": field.original_data, "変更後": field.data};
      //     if (field.original_data != field.data)
      //       row['_cellVariants'] = {"変更後": "info"};
      //     new_items.push(row);
      //   }
      // }
      // this.items = new_items;
      let is_input_text = function (field) {
          return field.type == 'InputTextField';
      }
      let process_row = function (field) {
          let row = { "項目": field.label, "変更前": field.original_data, "変更後": field.data};
          if (field.original_data != field.data)
            row['_cellVariants'] = {"変更後": "info"}
          return row;
      }
      this.items = [].concat(
        this.uiData.form.filter(is_input_text).map(process_row)
      );
      this.$refs.checkModal.show()
    },
    async post() {
      // TODO クライアントバリデーション
      // TODO ここで登録前の内容をモーダルとかで確認したい
      return await axios
        .post('/api/exchange_item/update', getFormData(this.uiData.form))
        .then(commonErrorCheck)
        .then(res => {
          const result = res.data.result
          if (result.errorCode != null) {
            alert('エラーが発生しました：' + result.message)
            return
          }
          alert('データを更新しました。')
          this.$router.push('/exchange_manage')
        })
        .catch(error => {
          if (error.message !== 'ログインしてください。') {
            alert('サーバーでエラーが発生しました。')
          }
        });
    }
  }
}

</script>

<style scoped>

</style>
JavaScript: Tips: パイプライン関数にswapメソッドを付けとくと ちょっとうれしい

今、現時点で ```|>``` 、```?``` が普通には使えないんでこんなこと書いてます。

```js:
const pipe = x => (...fs) => 
  fs.reduce( (acc, f)=>f(acc), x )
pipe.swap =(...fs)=>x=>pipe(x)(...fs)
```
としておくと、

+ 単体で使うときは ```pipe(値)(関数1, 関数2, ...) ``` のように ```|>```と同じ並びで使えてうれしい。
+ map等で使うときは、 ```map( e=>pipe(e)(関数1, 関数2, ...) )```と書くべきところを、 ```map( pipe.swap(関数1, 関数2, ...) )``` と、ちょっとだけすっきりと書けてうれしい。

ということなんですが、うれしいのは僕だけ? 需要あります?

「関数にメソッドつけるなんて邪道」「あんまりうれしくない」「最初から引数を逆にしとけばいいじゃん!」という突っ込みや「swap関数を定義すれば?」というような各方面からのコメント、お待ちしております。
Markdown(マークダウン) 記法/語法まとめ記事一覧

目的：MarkdownからHTMLに変換してHP編集する際に活用するメモ
対象者：入門者
執筆者レベル：入門者

## 基本使用例
参考なった度&#9733; &#9733;
**[Visual Studio Code で Markdown を使いこなす]
(https://cpp-learning.com/vscode_markdown/)**
<font color="Grey">見出し, 太字, 斜体, 打消し線, 箇条書き, 引用, コード表示, リンク, 改行</font>
最終更新2018年10月18日
備考：習うより慣れろってことで練習用コードを記載.VisualStudio Code使用.


参考なった度&#9733;
**[Markdown記法一覧](
https://qiita.com/oreo/items/82183bfbaac69971917f)**
<font color="Grey">改行, 見出し, 引用, リスト, 水平線, リンク(自動リンク,インライン記法),
強調, 画像, 打消し,コード表示(インライン, シンタックスハイライト)</font>
最終更新2018年02月18日



参考なった度&#9733;
**[HTMLよりはるかに簡単！マークダウンを活用して記事を読みやすくしよう](
https://ferret-plus.com/8839)**
<font color="Grey">見出し, 強調, 斜体, 改行, 水平線, 箇条書き, ナンバリング, リンク, 画像, 引用</font>
最終更新2017年11月7日

##Qiita/githubでのMarkdown使用例

参考なった度&#9733; &#9733;
**[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#2-9)**
最終更新2019年02月07日
内容：Qiitaで使えるMarkdown記法まとめ

**[Markdown記法 サンプル集](https://qiita.com/tbpgr/items/989c6badefff69377da7)**
最終更新2018年12月26日
内容：マークダウン語法まとめ(githubflavoredmarkdown含む)

参考なった度&#9733; &#9733;
**[Qiita マークダウン記法 一覧表・チートシート](
https://qiita.com/kamorits/items/6f342da395ad57468ae3)**
<font color="Red">**文字色**</font>, <font color="Grey">見出し, リスト, 空行・改行, インライン表示, コード表示(挿入),
リンク, 引用, 画像挿入+サイズ指定, テーブル挿入, 太字, 斜体,
打消し線, 水平線, 注釈, マークダウンのエスケープ</font>
最終更新2017年09月27日


##その他
参考なった度\:poop: \:hankey:
**[絵文字チートシート](
https://www.webfx.com/tools/emoji-cheat-sheet/)**

参考なった度&#9733;
**[HTMLで使われる特殊文字](https://on-ze.com/archives/14)**
Illustrator レイヤー名を連番にリネーム　スクリプト

#イラレのレイヤー名を連番(000.001.002...~099)にリネーム
79個ある大量のレイヤーネームを変更する。
イラレスクリプトはやった事無いけど、調べながら＆昔作ったゼロパディングリネームも使いました。
#コード
```jsx
var doc = app.activeDocument; 
var numLay = doc.layers.length; // layer length

function zeropaddingNum(num,thisNum){
    var  zerocount = '';
    var toNum = String(num).length;
    for (var i = 0 ; i < toNum;  i++ ){
        zerocount  = zerocount+'0';
    }
    return (  String ( zerocount + String ( thisNum ) ). slice(- (toNum+1) )   );
}

function Rename(){
    for ( var i = 0 ; i < numLay ; i ++ ){
           doc.layers[i].name= zeropaddingNum(numLay,i);
    }
}

Rename();
```
ゼロパディングは以前にも記事を書いていますが、
レイヤー数が2桁なら0**
レイヤー数が3桁なら0***
と最大数の桁数の頭に0が付くようになっています。
こんな感じです。

![bandicam-2019-05-15-13-03-20-586.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178061/65450e92-70b6-366f-8281-d5f4bc2cb267.jpeg)


#気付いたこと
さすがに大量の変更を加えるので、アンドゥグループを使おうと思ったんですがエラー。
恐る恐るこのコードで実行してみると、AEみたいに、レイヤー１つ１つではなく
一括でやってくれているみたいです。
UNDOしたら全ての名前が元に戻ってくれます。

```jsx
app.beginUndoGroup("undo");
app.endUndoGroup();
```
このメソッドは必要ないようです。
Vuexを使わないで共通状態管理を行う

#そもそも共通状態管理はどういう時に使うの?
・複数の画面で同じ値を使いたい時。
・URLに値載せたくないけど遷移先で値使いたい時。
参考:
https://stackoverflow.com/questions/40774131/hide-query-params-in-address-bar-vuejs
・そのほか使いたいと思う時がある時。

#なぜVuexや自作のもので共通状態管理をおこなうの？データから直で値持って来ちゃダメなの？

変えたのがコード上でしかわからないのでこんがらがるなどの理由があります。
値変更時にログ出力しとけば『あ~そこでその値変えたのね！！』とかなってバグ修正がしやすくなる。『あ！ここで共通の値かえてる〜、だからおかしかったんだ！』とかとか。

もっと詳しく説明してくれていると思った参考以下
https://vuex.vuejs.org/ja/


#で?? 実際コードどんな感じなの？
ちなみに参考お手本以下URL
https://jp.vuejs.org/v2/guide/state-management.html

**大元のところ**

```main.js
var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction(newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction() {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}


new Vue({
  data: {
    privateState: store.state
    // sharedState: store.state
  },
  methods: {
    setMessageAction: function(newValue) {
      store.setMessageAction(newValue)
    },
    clearMessageAction: function() {
      store.clearMessageAction()
    }
  },
  render: h => h(App),
}).$mount('#app')
```
**使用方法**

`console.log(this.$root.$data.privateState.message);`
とか
`<div>{{this.$root.$data.privateState.message}}</div>`
とか
`this.$root.setMessageAction('変更したよ！');`
とか

#コードの説明

```main.js
new Vue({
  data: {
    privateState
```

のところの

```main.js
privateState
```

が

```main.js
this.$root.$data.privateState
```

で呼べてる。


```main.js
new Vue({
  data: {
    privateState: store.state
    // sharedState: store.state
  },
  methods: {
    setMessageAction: function(newValue) {
      store.setMessageAction(newValue)
```

の

```main.js
setMessageAction: function(newValue)
```

のところが


```main.js
this.$root.setMessageAction('変更したよ！');
```

で呼べてる。

さいごにここの説明を

```main.js
if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue

```

もし、debugをtrueにしていたらログをだします。
自分のもってるmessageを新しい値にかえます。

#これはやっちゃだめ
ログ出力しないので、せっかく作ったの意味なくなる
`this.$root.$data.privateState.message = '変わりました！';`

#最後に
間違っている部分などあれば教えていただけると嬉しいです！

参考:
https://qiita.com/residenti/items/550589313cfef43062c3
Pythonで変数(インスタンス)の詳細を確認する

# はじめに
Rubyのpメソッドみたいなものがpythonにないのかなぁ、と調べた結果です。

# 結果
vars関数を使えば似たような動きをしました！

Googleで「Ruby Python p 代替」で調べても出てきません。(調べ方が悪い)
「python オブジェクト ダンプ」で参考ページが出てきました！
似たような感じでvarsにたどり着いていない方に共有です。

とあるクラスのインスタンスaをprintで表示すると以下のようになります。

```python:printの場合
>>> print(a)
<QuerySet [<Project: aaa>, <Project: bbb>, <Project: ccc>]>
```

このインスタンスaのプロパティが何かわかってなくて、内容を見たいんだ！(自分の実装を忘れてしまう私のような人はあまりいませんかね…)
って時にvarsを使います。

```python:varsの場合
>>> vars(a[0])
{'_state': <django.db.models.base.ModelState object at 0x04318C50>, 'id': 1, 'name': 'aaa', 'description': 'aaa', 'created_date': datetime.datetime(2019, 4, 10, 3, 17, 58, tzinfo=<UTC>), 'owner': 1}
```
すばらしいです…！
a[0]って添え字を指定しているので、全部出したい人はeach等使って、くるくる回してください。

更に、値やメソッドの名前だけを知りたい場合、dir関数を使えばよいとのこと、アドバイスを頂きました。
(shiracamusさんありがとうございます！)

```python:dirの場合
>>> dir(a[0])
['DoesNotExist', 'MultipleObjectsReturned', '__class__', '__delattr__', '__dict__', '__dir__', '__doc__', '__eq__', '__format__', '__ge__', '__getattribute__', '__getstate__', '__gt__', '__hash__', '__init__', '__init_subclass__', '__le__', '__lt__', '__module__', '__ne__', '__new__', '__reduce__', '__reduce_ex__', '__repr__', '__setattr__', '__setstate__', '__sizeof__', '__str__', '__subclasshook__', '__weakref__', '_check_column_name_clashes', '_check_field_name_clashes', '_check_fields', '_check_id_field', '_check_index_together', '_check_indexes', '_check_local_fields', '_check_long_column_names', '_check_m2m_through_same_relationship', '_check_managers', '_check_model', '_check_model_name_db_lookup_clashes', '_check_ordering', '_check_property_name_related_field_accessor_clashes', '_check_single_primary_key', '_check_swappable', '_check_unique_together', '_do_insert', '_do_update', '_get_FIELD_display', '_get_next_or_previous_by_FIELD', '_get_next_or_previous_in_order', '_get_pk_val', '_get_unique_checks', '_meta', '_perform_date_checks', '_perform_unique_checks', '_save_parents', '_save_table', '_set_pk_val', '_state', 'check', 'clean', 'clean_fields',
'created_date', 'date_error_message', 'delete', 'description', 'from_db', 'full_clean', 'get_deferred_fields', 'get_next_by_created_date', 'get_previous_by_created_date', 'id', 'name', 'objects', 'owner', 'pk', 'prepare_database_save', 'refresh_from_db', 'save', 'save_base', 'serializable_value', 'sheets', 'unique_error_message', 'validate_unique']
```

なんでも調べられますね…ッ！

# 参考
こちらのページがそのものズバリでした。
https://minus9d.hatenablog.com/entry/2015/08/02/204226
git リモート・ローカルブランチを一括で削除

リモート・ローカルブランチの一括削除方法をまとめました。

## ローカル

```bash
git branch | grep 'hoge' | xargs git branch -d
```

マージされていないブランチなら-Dを使用

## リモート

### 確認

```bash
git branch -a --merged | grep 'monitor' | grep remotes/origin | sed -e 's% *remotes/origin/%%'
```

### 削除

```bash
git branch -a --merged | grep 'staging' | grep remotes/origin | sed -e 's% *remotes/origin/%%' | xargs -I% git push origin :% --no-verify
```

マージされていないブランチなら--mergedを消す
Flutter tips 丸みを帯びた四角

# Flutter 丸みを帯びた四角
Flutterで丸みを帯びた四角系の簡単な方法を知っていますか。
FlutterではClipRRectを使用することで簡単に作成できます。

```dart
import 'package:flutter/material.dart';

class Sample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body:Center(
          // 丸みを作るWidget
          child: ClipRRect(
          // 曲線の度合いを設定
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(50.0),
              bottomLeft: Radius.circular(50.0),
            ),
              child: Container(
                child: Center(child:Text("center")),
                height: 100,
                width: 100,
                color: Colors.blue[500],
              )
          ),
        )
    );
  }
}
```

下の画像のように丸みを帯びた四角が簡単に出来上がります。

<img width="200" alt="スクリーンショット 2019-05-15 12.18.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325856/9fb2324e-0f54-c2be-9ce9-0d7147510237.png">
WKHTTPCookieStoreのgetAllCookiesのcompletionHandlerが呼ばれない

## 概要

iOS11から実装された `WKHTTPCookieStore` の `getAllCookies` の `completionHandler` が
呼ばれなくなる不具合に気づいたのでメモ

```swift
WKWebsiteDataStore.default().httpCookieStore.getAllCookies { cookies in
  // 呼ばれない場合がある
}
```

`WKWebViewConfiguration` に `WKProcessPool` を設定して `WKWebView` を表示し、
その後 `WKWebView` を `addSubview` した `UIView` がなくなると
`getAllCookies` の `completionHandler` が呼ばれなくなるようです

iOS12.1.2で確認しましたが、他のバージョンでも起きるようです(※ シミュレーターでは再現しませんでした)
https://stackoverflow.com/questions/55565188/wkhttpcookiestore-getallcookies-completionhandler-not-called-in-some-os-versions

## 原因

下記URLにも書かれていますが、 `WkWebView` が非表示状態になると、 `WKProcessPool` が待機状態になり、
`HttpCookieStore` へのアクセスがブロックされてしまう場合があるようです。
https://bugs.webkit.org/show_bug.cgi?id=188242

`URLSession` の `shared` では `WKWebsiteDataStore.default()` と同じ `HttpCookieStore` が参照されるため、WebViewのセッションを使ってAPI等にリクエストしている場合は注意が必要です

ちなみに **`WKProcessPool` を使用して `WKWebView` を表示する前であれば、**
`getAllCookies` の `completionHandler` は正常に動作するようです。


## 対策

`CGRect(x: 0, y: 0, width: 0, height: 0)` でサイズ0のWebViewを作成し、 `addSubview` してひとまず回避。
`WKWebView` が `UIScreen` のどこかしらに描画されてさえいればいいようです。

## 参考

https://bugs.webkit.org/show_bug.cgi?id=188242
Nuxt.js v2.7.0 変更点のまとめ

#はじめに

**Nuxt v2.7.0**がリリースされました。
変更点をみてみようと思います。

https://github.com/nuxt/nuxt.js/releases/tag/v2.7.0

#SSR logs がブラウザコンソールに表示される。

![57533442-12acec80-733e-11e9-92e9-950718b198ac.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317035/1df7e797-fa6a-71b7-51a6-34f54de5f863.gif)

`nuxt dev`で、ssrログがブラウザコンソールに表示されるようになりました。
SSR側での`console.log`結果をブラウザで確認できるので、でデバックしやすくなりますね。

#`store/`作成を検出する

Nuxt.jsは、`store/`ディレクトリを作成したことを検出し、自動的に再ロードするため、再起動する必要はありません。

![57455462-70243900-726b-11e9-8b1b-675e31f17c44.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317035/7563bba0-fd14-fab3-e4bd-d0288a1ea87f.gif)

# Typescript で Node v8.6 のサポートが終了

Nuxt.js v2.7は Node 8.6 のサポートは終了しました。
Typescriptを使っている人はご注意を。

ts-loaderはv6にアップグレードされています。

#その他
`vue-app`で `transision` deprecateされ、`pageTransition`へ変更されました。

いくつか細かい修正がありましたが、自分に影響するのはこのくらいでした。
5ステップでMacにLaravel環境を構築する(Composerインストールからローカル実行まで)

# Composerをインストール

```bash
$ brew install composer
```
brewが入っていない方は下記を参照ください
[macOS 用パッケージマネージャー — Homebrew](https://brew.sh/index_ja.html)

# laravelインストール

```bash
$ composer global require laravel/installer
```

# Pathを通す

```bash
$ export PATH=$PATH:＄HOME/.composer/vendor/bin
$ source ~/.bash_profile
```

# Laravelプロジェクト作成

```bash
$ laravel new laravel_sandbox
```

# ローカル実行

```bash
$ cd laravel_sandbox
$ php -v
PHP 7.1.23 (cli) (built: Feb 22 2019 22:08:13) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies
$ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>
```

ブラウザで`http://127.0.0.1:8000`にアクセスし、起動が確認できます。

![スクリーンショット 2019-05-15 12.04.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/f1befe12-0b42-8899-3a8e-e850e62db21e.png)


# 参考にしたページ

- [Laravelクイックスタート 4.2 Laravel](https://readouble.com/laravel/4.2/ja/quick.html)
- [HomebrewでComposerをインストール - Qiita](https://qiita.com/naente_dev/items/d9cdcbc6fd67db079f05)
#vim でキーワード検索した状態でファイルを開く ( vim -c '/KEYWORD/' example.txt )

タイトルの通り。

行番号指定なども不要で便利。

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/1839








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
【Unity】オブジェクトを１秒間で目的地まで動かす（WIP）

この記事は随時更新予定です。

# 背景など
[#remember_rostov](https://note.mu/stat_ketm/n/nc05324aae77a)プロジェクトの一環。
ロシアW杯、ラウンド16の日本VSベルギー戦最後の14秒のトラッキングデータを自作する。
汎用的なものを目指し、コーチ、アナリスト、選手、サポーター、すべての人が簡単に使えるようにする。

# 環境
Unity 2019 Personal

# やったこと
オブジェクトを`現在地`から`目的地`（マーカー）まで`1秒`で動かす

<img width="721" alt="Screen Shot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186209/a206dd84-18a6-dd67-1e42-89d38f76ad3e.png">

## Assets

- 地面(`Plane`)
- ターゲット(`Plane`)
- オブジェクト(`Cube`)


## `Cube`の`CubeBehavior`

- フレームレートを30fpsと仮定
- `Start()`で`dist`を定義

``` cs
using UnityEngine;

public class PlayerBehavior : MonoBehaviour
{
    public GameObject targ;
    float dist;
    // Start is called before the first frame update
    void Start()
    {
        dist = Vector3.Distance(transform.position, targ.transform.position);
    }

    // Update is called once per frame
    void Update()
    {
        transform.position = Vector3.MoveTowards(transform.position, targ.transform.position, dist/30);
    }
}
```

# TODO

− 複数マーカーを順に追従したい
− フレームレートの読み込み
− 任意時間での移動
Web版 Rstudio (rocker/tidyverse) をFiraCodeで快適にする 【更新2020/5】

【2020/5 もっとシンプルなCSSに更新しました】

R環境を rocker/tidyverse に移して、唯一辛かったのが
フォントにFiraCodeを選べない事なのです。

https://github.com/rstudio/rstudio/issues/2534
のコメントに、
https://github.com/Gabryxx7
さんが神のようにシンプルな手段を書いていらしたので概要を書きます。


##なぜ今のrockerでは出来ないか：
Rstudioからインストール済みのフォント一覧を取得する方法がない
##解決策：
クライアントサイドでCSSを挿入する


# Chrome プラグインを導入
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld/related
Gabrielさんオススメはこちら。
シンプルで使いやすいです
(CSSをインジェクトできるツールならなんでも可)

# Rstudioの画面でプラグインを実行
<img width="1043" alt="Screenshot 2019-05-15 at 11.56.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255842/268d7951-bad5-043c-e4aa-f3aa8f0e5301.png">

# 右側のCSSペインに、下記をコピペ

```html:fira.css
@import url('https://fonts.googleapis.com/css?family=Fira+Code&display=swap');

.ace_layer.ace_text-layer {
    font-family: 'Fira Code' !important;
}

#rstudio_console_output {
    font-family: 'Fira Code' !important;
}
```

## Saveして、Rstudioのページをリロード
<img width="1543" alt="Screenshot 2019-05-15 at 11.58.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255842/5a6bea03-a26f-d4cf-e49c-43ca6c4af29c.png">

できました！！
いやっほう

※以前のコードはgithub側のフォントが無くなってしまい動作しなくなっていました。
google fonts から firacode が配信されたのを利用する形に変更されました。

こちらも、元の rstudio のgithubから
https://github.com/antoine-sachet さんの神コードを拝借させて頂いています。
#django ModuleNotFoundError: No module named 'django-extensions'

# pip install するときは ハイフンじゃないですか

```
$ pip install django-extensions
```

# でそれをそのまま設定に追加しますよね

```
INSTALLED_APPS = [
    'django-extensions',
...
]
```

# なんだよ！

```
$ ./manage.py shell_plus
Traceback (most recent call last):
  File "./manage.py", line 21, in <module>
    main()
  File "./manage.py", line 17, in main
    execute_from_command_line(sys.argv)
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/django/core/management/__init__.py", line 381, in execute_from_command_line
    utility.execute()
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/django/core/management/__init__.py", line 357, in execute
    django.setup()
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/django/__init__.py", line 24, in setup
    apps.populate(settings.INSTALLED_APPS)
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/django/apps/registry.py", line 91, in populate
    app_config = AppConfig.create(entry)
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/django/apps/config.py", line 90, in create
    module = import_module(entry)
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/importlib/__init__.py", line 127, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
  File "<frozen importlib._bootstrap>", line 1006, in _gcd_import
  File "<frozen importlib._bootstrap>", line 983, in _find_and_load
  File "<frozen importlib._bootstrap>", line 965, in _find_and_load_unlocked
ModuleNotFoundError: No module named 'django-extensions'

```

# アンスコでしたね

```diff
INSTALLED_APPS = [
-    'django-extensions',
+   'django_extensions',
...
]
```

 # 揃えて欲しい

うん。

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/1837








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
gulp-notifyをストリーム外で表示

# 内容

gulp-notifyをストリーム外で実行する方法です。
時間のかかる処理のコールバックなどで使えます。

# コード

## ノーマル通知

```JavaScript:gulpfile.js
const gulpNotify = require('gulp-notify');

// ノーマル通知
gulpNotify('通知メッセージ').write('');
```

![gulp-notify-normal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296774/1f91cda1-3610-d377-0afe-0de8a8c7cff8.png)

## エラー通知

```JavaScript:gulpfile.js
const gulpNotify = require('gulp-notify');

// エラー通知
gulpNotify('通知メッセージ').write(new Error());
```

![gulp-notify-error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296774/3ffa02f3-1c29-844c-538a-3bb43975f951.png)
DNSラウンドロビンについてのメモ

自らのインプットのために"サーバ/インフラを支える技術"を読み､ある程度まとめてみました。

今回は第一章の"Webサーバを冗長化する DNSラウンドロビン"をメモしました｡

##用語
#####DNS
IPアドレスとドメイン名の対応を管理する仕組み

#####DNSラウンドロビン(DNS Round Robin)
DNSを一つのサービスに複数台のサーバを分散させる手法

#####TTL(Time To Live)
データの寿命

#####プロキシサーバ
ホームページを見るときに使うソフト（Webブラウザ）の身代わりになってホームページにアクセスしてくれるコンピュータ（サーバ）

##DNSラウンドロビン
以下画像では"www.example.jp" へアクセスしたいAさんとBさんを想定しております｡

<img width="404" alt="インフラを支える技術_pages-6.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416433/b2025952-281c-ee24-7050-db91abe551a6.jpeg">

DNSサーバは,同じ名前に複数のレコードが登録されると､問い合わせのたびに異なる結果を返します｡この動作を利用することで､複数台のサーバ処理を分散させることができます｡比較的簡単に負荷分散できるDNSラウンドロビンですが､以下のような問題点があります｡

- サーバの数だけグローバルアドレスが必要
 - たくさんのサーバで負荷分散するためには､IPアドレスをたくさん取得できるサービス(回線)を利用する必要がある｡ 
- 均等に分散されるとは限らない
 -  携帯サイトなどで問題になることがある｡携帯電話からのアクセスは､キャリアゲートウェイと呼ばれるプロキシサーバを経由する｡プロキシサーバでは､名前解決の結果がしばらくの間キャッシュされるので､同じプロキシサーバーを経由するアクセスは常に同じサーバへ届くことになる｡そのため均等にアクセスが分散されず、特定のサーバにのみアクセスが集中する可能性がある｡TTLを短く設定するという方法もあるが､必ずしもTTLに従ってキャッシュを開放するとは限らない｡

- サーバがダウンしても気づかない
 -  DNSサーバはWebサーバの負荷や接続数などの状況に応じて問い合わせ結果をコントロールする事ができない｡Webサーバの負荷が高くてレスポンスが遅くなろうが､接続数がいっぱいでアクセスを処理できない状況であろうと全く関知しない｡何かしらの原因でサーバダウンをしていても､それを検出することなく負荷分散を続けてしまう｡そのためダウンしたサーバに分散されてしまったユーザはエラーページと対面する｡

つまり､DNSラウンドロビンはあくまでも負荷分散するための仕組みでしかなく､冗長化の仕組みではないので､他のソフトウェアと組み合わせてフェイルオーバやヘルスチェックを実装する必要があります｡

##DNSラウンドロビン冗長構成例
今回は2台のWebサーバの両方にVIPをもたせて冗長化する仕組みを紹介します｡
Web1が停止すると､VIP1がWeb2へ引き継がれ､全てのアクセスをWeb2が処理するようになります｡逆にWeb2が停止すると今度はVIP2がWeb1に引き継がれて､全てのアクセスをWeb1が処理するようになります｡Webサーバ同士が協調しあって､正常なVIPわけができる仕組みです｡

<img width="416" alt="DNSラウンドロビン冗長化構成例_pages.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416433/e1b8c0ae-0269-5e60-cd98-7a9e5d051a35.jpeg">

しかし､この構成もスクリプトやソフトウェアを用いてフェールオーバやヘルチェックをできるようになったとしても､サーバの台数が増えるに連れてシステムが複雑に難易度が上がっていきます｡

できればWebサーバ上で特別なソフトウェアを動かさなくても良い構成にしたいです｡

##まとめ
今回はDNSラウンドロビンについて少しまとめてみました｡一見便利そうでしたがあくまでも負荷分散を目的としており､冗長化とはまた違うようです｡次回からはApacheで検証しながら､ロードバランサについて触れていこうと思います｡

説明ざっくりとしてもうしわけございません笑
今回は以上です笑

##参考
- [[24時間365日] サーバ/インフラを支える技術 ‾スケーラビリティ、ハイパフォーマンス、省力運用 (WEB+DB PRESS plusシリーズ)](https://www.amazon.co.jp/dp/4774135666/ref=cm_sw_em_r_mt_dp_U_NjL2Cb4RXQV1R)
- [「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/index.html)
- [webサーバーに対する負荷分散　DNSラウンドロビンとロードバランサ](https://qiita.com/bunty/items/b7316b7448c15509b52f)
WindowsのOpenSSHを使ってuser:administratorでログインする方法

Windowsのことはあまり詳しくなくて、ちょっとだけハマったので、メモ。

Windows10 Homeの場合、GUIからAdministratorユーザーを有効にすることができないっぽいです。よって、SSHで`ssh administrator@192.168.X.XX`とかしてもPasswordが間違っていると出てログインできません。

https://github.com/PowerShell/Win32-OpenSSH

Windows10 Homeの場合、Administratorを有効にするには、cmdまたはpwshから以下のコマンドを実行します。

```sh
$ net user administrator
active account : No

# Administratorを有効にする
$ net user administrator /active:yes

$ net user administrator
active account : yes

# パスワードの設定
$ net user administrator *
or
$ net user administrator ${PASSWORD}
```

これでSSHからWindowsの`administrator`ログインが可能になります。

```sh
$ ssh administrator@192.168.X.XX
```


https://github.com/PowerShell/Win32-OpenSSH/wiki/Install-Win32-OpenSSH
SourcetreeとALMiniumの連携がうまくいかない

#突如リモートリポジトリと接続できなくなったSourcetree

今後の備忘録としてメモ。

フェッチもプルもプッシュもできない。

エラーとして、「NotSupportedException encountered.」的なメッセージが出る。。。

##原因
ALMiniumの定期的なパスワード変更のせいだった。。。

sourcetreeをインストールし、リモートリポジトリ側にアクションをかけるとwindows側の「資格情報マネージャー」から
ユーザー名とパスワードを求められる。

そのパスワードが変わってしまったから接続できないと言っていたのだった！！！！！

##対処法
①まずは、windows内で「資格情報マネージャー」を検索する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402399/953475d9-8af3-fb23-78c1-801dbbe35fd3.png)

するとこんな画面が出てくるので、alminiumに関する部分を削除する。



②次に「C:\Users\（ユーザ名）\AppData\Local\Atlassian\SourceTree」にアクセスする。

AppDataは隠しファイルとなっているので要注意だ。

アクセスしたら、「passwd」のファイルを丸ごと削除する。

以上、で完了だ。あとは、sourcetreeからリモートリポジトリに何かしらのアクションをすると、

ユーザ名とパスワードを再度求められるので、入力すればよい。


僕のgitライフは守られた。

~~くそめんどくせえ~~
Rails6 のちょい足しな新機能を試す16（UploadedFile#to_path編）

# はじめに

Rails 6 に追加されそうな新機能を試す第16段。 今回のちょい足し機能は、 `ActionDispatch::Http::UploadedFile#to_path` 編です。

Rails 6.0 に `ActionDispatch::Http::UploadedFile#to_path` が追加されました。

これにより、

```ruby
File.read uploaded_file
```

のように書くことができるようになりました。

今回は、アップロードファイルのフォーマットが PNG かどうかチェックするという機能を実装することにより、ちょい足し機能を試してみます。

記載時点では、Rails は 6.0.0.rc1 と 5.2.3 で確認しました。Rails 6.0.0.rc1 は `gem install rails --prerelease` でインストールできます。


```shell
$  rails --version
Rails 6.0.0.rc1
```


# 注意事項

今回は、あくまでも、 `ActionDispatch::Http::UploadedFile#to_path` の機能を試すのが目的です。
アップロードファイルのフォーマットを確認するという目的であれば、他に良い方法があるんじゃないかと思います。
また、設計の観点で見てもリファクタリングの余地のあるコードになっています。
ご了承ください。

# 事前準備

今回は、 [Rails6 のちょい足しな新機能を試す15（Active Storage編）](https://qiita.com/suketa/items/2daad87d8c22737f5582) のコードに追加していきます。
Railsプロジェクトを作って画像ファイルをアップロードするところまでは、そちらを参照してください。

# User モデルを修正する

- User モデルに、 avatar_file 属性を追加します。
- avatar_file のフォーマットをチェックする validation も追加します。

```ruby:app/models/user.rb
class User < ApplicationRecord
  # PNG フォーマットのヘッダー定数を追加
  PNG_FORMAT_HEADER = ["89504E470D0A1A0A"].pack("H*")

  attr_writer :avatar_file # avatar_file を追加

  has_one_attached :avatar

  validates :name, presence: true
  validate :avatar_file_format # validation の追加

  private

  def avatar_file_format
    if @avatar_file.present?
      header = File.read @avatar_file, 8 # ちょい足し機能の確認
      if header != PNG_FORMAT_HEADER
        errors.add(:avatar, "is not png format file")
      end
    end
  end
end
```

ここで、 `@avatar_file` は、 `ActionDispatch::Http::UploadedFile` オブジェクトです。
`ActionDispatch::Http::UploadedFile` に `to_path` メソッドが追加されたことにより
`header = File.read @avatar_file, 8` と書いてもエラーにならないことを確認するのが目的です。

# User コントローラの修正

User コントローラで新規登録時に User モデルの `avatar_file` に `user_params[:avatar]` を設定します。

```ruby:app/controllers/users_controller.rb
  def create
    @user = User.new(user_params)
    @user.avatar_file = user_params[:avatar] # この行を追加

    respond_to do |format|
     ...
```

# User登録画面で PNG ではないファイルをアップロードする

User登録画面にアクセスして、PNGではないファイルをアップロードすると validation エラーになることが確認できます。

![rails6_validation_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209941/f75e8125-0586-70c2-82ae-c0c735d328ba.png)

# Rails 5 では

Rails 5.2.3 で同じことを試すとエラーになります。
![rails5_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209941/52824b09-1439-b317-74ec-a8b5cc770d9c.png)

# ソース

今回のソースは以下にあります。
https://github.com/suketa/rails6_0_0rc1/tree/try016_uploaded_file_path

# 参考情報

* [What is new in Rails 6.0](https://bogdanvlviv.com/posts/ruby/rails/what-is-new-in-rails-6_0.html)
* [Add implicit to path conversion to uploaded file](https://github.com/rails/rails/pull/28676)
* [PNGのファイルヘッダ](https://ja.wikipedia.org/wiki/Portable_Network_Graphics#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%98%E3%83%83%E3%83%80)
tcpdump によるキャプチャ取得

# 参考サイト
様々なオプションが載っていたのでいつか試したい。
https://milestone-of-se.nesuke.com/sv-basic/linux-basic/tcpdump/


# 実施環境
Ubuntu 16.04 (LTS)


# コマンド一覧

## 1分ごとに1ファイルに出力(最大2ファイル)

~~~
sudo tcpdump port 443 -G 60 -W 2 -w tcp-capture-at-%H%M%S.pcap
~~~

## 1時間ごとに1ファイルに出力(最大24ファイル：24時間分)

~~~
【フォアグラウンド】
sudo tcpdump -A port 443 -G 3600 -W 24 -w tcp-capture-at-%H%M%S.pcap
【バックグラウンド】
sudo tcpdump -A port 443 -G 3600 -W 24 -w tcp-capture-at-%H%M%S.pcap &
~~~

## キャプチャ確認コマンド

~~~
sudo tcpdump -r capture-at-hhmmss.pcap | grep xxx.xxx.xxx.xxx
※「hhmmss」と「xxx.xxx.xxx.xxx」は適宜置き換えてください。
~~~

## キャプチャ確認(特定IPを除去)

「192.168.1.1」をキャプチャから除きたい場合

~~~
sudo tcpdump -r tcp-capture-at-173204.pcap | grep -v 192.168.1.1
~~~

「10.56.0.20」「192.168.1.1」をキャプチャから除きたい場合

~~~
sudo tcpdump -r tcp-capture-at-173204.pcap | grep -v 10.56.0.20 | grep -v 192.168.1.1
~~~
JavaScriptで文字列中にある空白を取り除く方法

ビルトインの`String.replace`メソッドを使って空白を`''`に置換する

```javascript
const hoge = '  hoge foo   bar  '

hoge.replace(/\s/g, '') // => "hogefoobar"
```

なお`trim`では文字列中の空白は取り除くことができないので注意。
Electronでgentelellaのデモページを動かす

#はじめに

私の今の目標はElectronでアプリを作成することです。
とりあえず、画面を作成したいと思いましたが、自分で作るのは大変なので、何かないかと探していると
gentelellaという、かっこいい画面がありました。

[GitHub：https://github.com/puikinsh/gentelella](https://github.com/puikinsh/gentelella)

そこでこの画面を表示するElectronアプリをまず作成してみようと思います。

#参考にした他の方の記事
node.jsのインストール、Electronのインストールは下記の記事を参考に行っています。
[参考記事：Visual Studio CodeとNode.jsの導入について](https://qiita.com/GRGSIBERIA/items/b8cd4a2b3635d1bb0391)

また、Electronのアプリの作成に関しては下記の記事を参考にさせて頂き、今回作成するのはその記事で作成したElectronアプリを少し変更したものとなります。
[参考記事：Electronでアプリケーションを作ってみよう](https://qiita.com/Quramy/items/a4be32769366cfe55778)

#開発環境
ちなみに私の環境は以下の通り
　OS：Windows10
　開発環境：Visual Studio code

#gentelellaのインストール
まず、npmでインストール可能なため、以下のコマンドを実行します。

```command:powershell
> npm install gentelella --save

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN nodejs_analysis@1.0.0 No description
npm WARN nodejs_analysis@1.0.0 No repository field.

+ gentelella@1.4.0
added 1 package from 2 contributors and audited 1 package in 12.025s
found 0 vulnerabilities
```

そうするとカレントディレクトリ配下に./node_modules/gentetellaのディレクトリが作成され、その配下に色々なファイルが展開されています。

#Electronアプリにデモページを表示させる
mainWindow.loadURLに渡しているHTMLファイルのパスを上記でインストールしたデモページのパスに変更します。
ちなみにデモページのパスは以下の通り
./node_modules/gentelella/production/index.html


```node.js:index.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('ready', function() {

  // ブラウザ(Chromium)の起動, 初期画面のロード
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/node_modules/gentelella/production/index.html');

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});
```

これで準備は完成です。

#Electronアプリを起動する。
下記のコマンドを実行するとアプリが起動し、デモページが動かせます。

```command:powershell
> electron .
```

#最後に
gentelellaはかなりかっこよく私はすぐに気に入りました。
ですが、中々記事もなくどうしようかと思いましたが、自分でこつことと調べて行こうと思います。
自分のための備忘録としても、何か調べたらまた記事にしたいと思います。
[Python3]dict.keys()を使用した際にTypeError: unhashable type: 'list' で引っかかりそうになった話

```python:再現できるコード
if foo in dict.keys():
...
```

みたいなことをしようとした時に、下記のエラーが発生した。

```text:ERROR内容
TypeError: unhashable type: 'list' 
```

下記のように変更して解決した。

```python:解決策
if foo in list(dict.keys()):
...
```

dict.keys()の戻り値は下記のようになるが、（多分）これが純粋なlistではない故に発生するエラーなのに、エラー内容が```TypeError: unhashable type: 'list' ```というのは分かりづらい…。

```text:dict.keys()の戻り値
dict.keys(['aaa', 'bbb', 'ccc'])
```
Compute Engineの公開SSH認証鍵はフォーマットに注意

Compute Engineのインスタンスに自端末のSSHクライアントから接続する際は
メタデータのSSH認証鍵を登録してあげる必要があります。

[Compute Engine]-[メタデータ]-[SSH 認証鍵]にて鍵を登録します。

![Compute Engine.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413429/cee37fbd-b832-e070-c97a-97cab958708a.png)


この時登録する鍵の情報は以下のフォーマットに合わせる必要があります。

```
ssh-rsa [KEY_VALUE] [USERNAME]
```

私は最初マニュアルをしっかり読まなかったためフォーマットの存在を知らずハマりました・・・・


## 参考

- [メタデータ内の SSH 認証鍵の管理 - 公開 SSH 認証鍵ファイルのフォーマット](https://cloud.google.com/compute/docs/instances/adding-removing-ssh-keys?hl=ja#sshkeyformat)

## その他

- メタデータからの鍵登録ではなく直接インスタンスの authorized_keys に鍵を登録してもSSH接続はできましたが、インスタンス再起動の度に上書きされるようでした。
jestで返り値の型が配列であることを検証したい時に書くコード

ビルトインの`Array.isArray()`を利用することで検証可能

```javascript
describe('hogeMethod', () => {
  it('return empty array if hogehoge', () => {
    const hogeArray = hogeMethod('hogehogehoge')
    expect(Array.isArray(hogeArray)).toBe(true)
    expect(_.isEmpty).toBe(true)
  })
})
```
process.envの型

環境変数を使った分岐をする際に`process.env`などが使われる。

```ts
process.env.NODE_ENV === 'production'
```

もともとの型付は以下なので、基本的に全て`string`になり型が弱い。

@types/node

```ts
    interface ProcessEnv {
        [key: string]: string | undefined;
    }
```

これを型付するには、プロジェクト内で`global.d.ts`等の型定義をおいて、以下のように上書きするといい。これで`process.env`が型的に扱いやすくなる。また、tsdoc形式でコメントを書けば何の値かがVSCode上でわかるのでプロジェクト特有の環境変数と使う場合はコメントを書くことをおすすめする。

```ts
/// <reference types="node" />

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}
```

上記の定義は`create-react-app`のやり方と同じ。

https://github.com/facebook/create-react-app/blob/394e385d5e25705ebd9f82e90958f6f207a5c315/packages/react-scripts/lib/react-app.d.ts#L5-L10
# C# Dispose 処理のテンプレ

C# で ```RectiveProperty``` 利用時に大量の ```Dispose()``` 呼ばないといけないのでテンプレメモった ```ReactiveProperty``` のネット上のサンプルには必ずしもこのように書いてない事があるのでコピペ気味な人は注意にゃーん。

```MvvM``` 的には ```Model``` が永続的かつそれを監視してビューに反映させる為に ```ReactiveProperty``` を利用したケースでは ```View``` から ```ViewModel``` の ```Dispose()``` を明示的に呼ばないと ```Model``` ```ViewModel``` 間の参照が消えずリーク的動作になると思われにゃーん。 (この理解であってる？)

```csharp

using System;
using System.Reactive.Disposables

    public class Foo : IDisposable
    {
        private CompositeDisposable Disposable { get; } = new CompositeDisposable();

        ~Foo ()
        {
            Dispose(false);
        }

        public void Dispose()
        {
            Dispose(true);
            // GC.SuppressFinalize(this); if overrided "virtual void Dispose(bool disposing)"
        }

        protected virtual void Dispose(bool disposing)
        {
            if (disposing)
            {
                // managed?.Free();
                // managed = null;
                Disposable.Dispose();
            }
            // unmanaged?.Free();
            // unmanaged = null;
        }

        public Foo ()
        {
            // Disposable.Add(DisposableInstances);
            // rxprop = model.ToReactivePropertyAsSynchronized(m=>m.Value).AddTo(Disposable);
            // rxprop = model.ObserveProperty(m=>m.Value).ToReactiveProperty().AddTo(Disposable);
        }
    }
```

## 参考
- [Q. あれ、ReactivePropertyだとINotifyPropertyChanged要らないんじゃなかったっけ？](https://qiita.com/YSRKEN/items/5a36fb8071104a989fb8#q-%E3%81%82%E3%82%8Creactiveproperty%E3%81%A0%E3%81%A8inotifypropertychanged%E8%A6%81%E3%82%89%E3%81%AA%E3%81%84%E3%82%93%E3%81%98%E3%82%83%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A3%E3%81%91)
- [MVVMでメモリリークしちゃってました 原因と対策編](https://blog.okazuki.jp/entry/20110227/1298817065)
- [【WPF】ViewModelがINotifyPropertyChangedを実装していないとメモリリークする件](https://aridai.net/article/15)
AWS CLI の パス を通す

## はじめに

mac, awscli command not found とかがキーワード。
本記事の前提は pip3 で awscli のインストールをしたという前提です。

公式はこちら
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-macos.html#awscli-install-osx-path

似ている記事はこのあたり。

https://qiita.com/mokuo/items/0484feefbaddb70a9b06
https://qiita.com/yuyj109/items/3163a84480da4c8f402c
https://blog.sioyaki.com/entry/2018/09/20/124123


## 解決する問題

`aws --version` がせめて表示されるようにする。
実行ファイルにパスを通していないとこんな感じ。

```
$ cd ~
$ aws --version
-bash: aws: command not found
```

なるほど。

```
$ pip3 list | grep aws
aws cli   1.16.157
```

はい。インストールされていますね。
この時点で何も出力されていない方は、こちらへどうぞ。
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-macos.html#awscli-install-osx-pip


## pip3 はどこに何を入れたのか確認する

```
$ pip3 show awscli
Name: awscli
Version: 1.16.157
Summary: Universal Command Line Environment for AWS.
Home-page: http://aws.amazon.com/cli/
Author: Amazon Web Services
Author-email: UNKNOWN
License: Apache License 2.0
Location: /Users/使っている人のユーザ名/Library/Python/3.7/lib/python/site-packages
Requires: PyYAML, docutils, rsa, botocore, colorama, s3transfer
Required-by: 
```

なるほど。 `Location` に何かありそうだなと判断できそうです

### ここで注意点！

.bash_profile に、

```
export /Users/umekage/Library/Python/3.7/lib/python/site-packages:$PATH 
```

ってやってもこれはダメ。実行ファイルはここにはないのです！

## 実行ファイルはどこか確認する

ちゃんと、 `/bin` を捕まえておきましょう

```
$ pip3 show awscli -f | grep /bin
  ../../../bin/aws 
  ../../../bin/aws.cmd
  ../../../bin/aws_bash_completer
  ../../../bin/aws_completer
  ../../../bin/aws_zsh_completer.sh

```

ということで、ディレクトリを上がればなんとかなりそうと分かります
この相対パスは `Location` で見たところからの相対パス。

## 結論

.bash_profile は以下のとおり記載できます

```
export PATH=/Users/使っている人のユーザ名/Library/Python/3.7/bin:$PATH
```

意気揚々と実行しましょう！

```
$ aws --version
aws-cli/1.16.157 Python/3.7.3 Darwin/18.5.0 botocore/1.12.147
```

完璧ですね。これで世界を革命する力を得たといっても過言ではありません！！！！
lsでディレクトリ名のみ表示する(grepは使わない)

# ディレクトリだけ表示したい(grepあり)

他の記事なんかを見ると、`ls`と`grep`を使ってこんな解決方法があることがわかります。

```
ls -l | grep ^d
```

これは`ls -l`でディレクトリ内のすべての情報を獲得したのち、それをパイプで渡して、先頭に`d`のつくもの(すなわちディレクトリ)の行のみを表示するようにしています。しかし、これだと`ls -l`による余計な情報(例えば権限、サイズ、作成日時など)も表示されてしまいますね。

# ディレクトリ名だけを表示したい

「ディレクトリ名だけ一覧で得られればいいんですけど！」という願いを叶えるコマンドがこちら。

```
ls -d */
```

これで、カレントディレクトリにあるディレクトリすべての名前のみを表示することができます。
AWS Transfer for SFTPにEIPをアタッチする

# やりたいこと

```
 $ sftp -i ~/.ssh/id_rsa  ftpuser@xxxxx.server.transfer.us-east-1.amazonaws.com
```

のような、FQDNではなくて以下のようにEIPでアクセスしたい

```
 $ sftp -i ~/.ssh/id_rsa  ftpuser@0.0.0.0
```

## 理由
SFTPにアクセスしてファイルPUTしてくれるシステム側の都合に合わせてあげる

## やったこと

* NLB作成 (public)
* NLBにEIPつける 
* VPCエンドポイント作成
* Transfer for SFTP の作成
* エンドポイントサービス作成
* エンドポイントサービスとNLBの関連付け

## 具体的な手順
ほとんど同じようなことやってるやつがあった
https://dev.classmethod.jp/etc/transfer_for_sftp_support_privatelink/


ここのアカウントBのイメージ
ここだとNLBがinternalになっている点とEIPつけていない点が異なるだけ。

# このやり方ってありなのか？

https://aws.amazon.com/jp/sftp/faqs/


>Q: 自分の SFTP クライアントで、固定 IP アドレスを使って自分の SFTP サーバーの VPC エンドポイントにアクセスすることはできますか?


> できます。自分の SFTP サーバーの VPC エンドポイントに構築すれば、固定 IP を有効化することが可能です。自分の VPC 内で、有効化された Elastic IP を持つ Network Load Balancer (NLB) を作成し、そのターゲットとして自分の SFTP サーバーの VPC エンドポイントを指定します。関連付けられた Elastic IP は、ユーザーに 1 つまたは複数の静的 IP アドレスを付与します。これは変更することはできません。これらの IP は、SFTP クライアントユーザーによるファイアウォールのホワイトリスト登録を目的として使用できます。このセットアップに関する詳細は、Network Load Balancer のドキュメントをご覧ください。
「このインストールはシステムポリシーで許可されていません。システム管理者に問い合わせてください」にハマった話

#msiを使用したインストールでハマった
VisualStudio2019をインストールしようとしたら、突然現れたエラーと延々格闘したのでメモ。
##エラー内容
VisualStudio Installerでインストールを進めようとしたら、10秒くらいでエラーで落ちる。
その内容が以下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353603/4a1e04fe-b602-cebb-e17e-238c1c6ba936.png)
>\Microsoft.VisualStudio.MinShell.Msi.Resources.msi のインストールはソフトウェア制限ポリシーで許可されていません。Windows インストーラーでは制限されていない項目のみインストールできます。ソフトウェア制限ポリシーによって返された承認レベルは 0x0 でした (返された状態: 0x800b010c)。

つまり、**Microsoft.VisualStudio.MinShell.Msi.Resources.msi**が叩けないってことらしい。
msiを叩けないことなんて初めてなので、手動で同じmsiを叩いてみたら、確かに叩けず、以下のエラー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353603/75e78fb5-b8de-c472-a216-25309795738a.png)
システム管理者によりこのプログラムはブロックされています。詳細はシステム管理者に問い合わせてください。
え。2017は問題なく入れられたし、ほかのmsiは叩けるし、PCから見えるメモリは足りてるし、ユーザーの権限も十分あるし・・・なんで？
##やったこと
VisualStudioをインストールしようとして、制限ポリシーで引っかかるなんて意味わからん。
周りの人はハマってないし。と思いつつ、
ローカルセキュリティポリシー＞ソフトウェアの制限のポリシー＞強制＞強制のプロパティの変更
管理者権限の確認と管理者実行
といった、日本語で出てくる制限ポリシーで検索できる解決策はほとんど試した。でも解決できなかった。
##原因
これだった。
https://support.microsoft.com/en-us/help/925336/fix-error-message-when-you-try-to-install-a-large-windows-installer-pa
つまり、Windowsインストーラプロセスに、.msiパッケージまたは.mspパッケージが正しく署名されていることを確認するのに十分な連続仮想メモリがないときに発生するエラー、とのこと。

**確かに、軽いmsiは叩けるけど、重いmsiは叩けなくなっていた。**
##解決法
レジストリエディターのPolicyScopeの値を書き換えることで解決しました。
！レジストリの値を書き換えるのは自己責任でお願いします！
↑のMicrosoftサポートサイトのエラー回避手順の中の、
**HKEY_LOCAL_MACHINE\Software\Policies\Microsoft\Windows\Safer\CodeIdentifiers**
以下にある、**PolicyScope**ファイルを編集し、値のデータを１に変更。

この作業だけでインストールできない問題は解決しました。
インストールできたら値はちゃんと戻してね、と書いてあるので戻しましょう。


なんでメモリが足りないのかは引き続き要調査。。。
ローカル環境にiphone等（他のタブレット） からアクセスする

ローカル環境にiphone からアクセスする方法には色々あり、どれも簡単な内容だったが
同じ方法ではアクセスできなかったので私が接続できた方法をメモ。

###なぜその必要があるか？
google chromeの開発ツールでもレスポンシブの確認ができるが、
iphoneのwebブラウザの下に出てくるツールバーの関係で若干レイアウトが崩れる。
毎回、都度デプロイして確認していたが時間がかかりすぎるので、
iphoneを見ながら調整を行いたい際は下記で繋げて確認した方が時間は大幅に短縮できる。

####1.始めに例えば同一のwifiにPCとiphoneを繋げていた場合、下記のmacの設定＞ネットワークから接続済みの下に書かれているIPアドレスを確認。

![スクリーンショット 2019-05-15 10.14.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383660/fd8e5fe9-fe93-8ff4-1d01-4a58626ae997.png)

####2. ターミナルで下記のコマンドを打つ
$ bundle exec rails s -b 192.168.0.17
（IPアドレスはそれぞれ違うので、自身のPCで確認ください）

注意：これをおこなったらhttp://localhost:3000では繋がらないので、
http://192.168.0.17:3000での接続になる。

####3. iphone（他のタブレットも同様）から接続
http://192.168.0.17:3000と打ち込めばOK.


以上。
Ruby Privateなインスタンスメソッド/クラスメソッドのテストを書く

[@koshi_life](https://twitter.com/koshi_life) です。

最近、Ruby関連のプロジェクトでテスト書いたり、リファクタしたりしています。そこでPrivate宣言したメソッドのテストの書き方を調べたので備忘です。

# 結論 Object#send を使う

[Object#__send__](https://docs.ruby-lang.org/ja/latest/method/Object/i/__send__.html) メソッドを用いることで、Private宣言したメソッドをクラス外から呼び出しが可能です。

ちなみに、privateメソッドがコールできてしまうRubyの言語仕様/背景について以下エントリが参考になりました。

[Ruby の private と protected 。歴史と使い分け](https://qiita.com/tbpgr/items/6f1c0c7b77218f74c63e)

### 前提

- Rails 5.2.3
- Ruby 2.6.0
- minitest 5.11.3

### 対象クラス

```hoge.rb
class Hoge
  # クラスメソッド
  def self.pr_class_method(arg1, arg2)
    "pr_class_method arg1=#{arg1} arg2=#{arg2}"
  end

  # クラスメソッド (キーワード引数)
  def self.pr_class_method_kw(arg1:, arg2:)
    "pr_class_method_kw arg1=#{arg1} arg2=#{arg2}"
  end

  # クラスメソッド (Block利用)
  def self.pr_class_method_blk(arg1, &blk)
    blk.call(arg1) if block_given?
    "pr_class_method_blk arg1=#{arg1}"
  end

  private_class_method :pr_class_method,
                       :pr_class_method_kw,
                       :pr_class_method_blk

  private

  # インスタンスメソッド
  def pr_instance_method(arg1, arg2)
    "pr_instance_method arg1=#{arg1} arg2=#{arg2}"
  end

end
```

### send検証

```.rb
$ rails c

# <インスタンスメソッド> 普通に呼ぶと NoMethodError エラー
> hoge = Hoge.new
> hoge.pr_instance_method(1,2)
# NoMethodError (private method `pr_instance_method' called for #<Hoge:0x00007ff7501ab338>)

# <インスタンスメソッド> sendで呼ぶ
> hoge.send(:pr_instance_method, 1, 2)
=> "pr_instance_method arg1=1 arg2=2"

# <クラスメソッド> 普通に呼ぶと NoMethodError エラー
> Hoge.pr_class_method(1, 2)
# NoMethodError (private method `pr_class_method' called for Hoge:Class)

# <クラスメソッド> sendで呼ぶ
> Hoge.send(:pr_class_method, 1, 2)
=> "pr_class_method arg1=1 arg2=2"

# <クラスメソッド> sendで呼ぶ  (keyword引数)(blk引数)
> Hoge.send(:pr_class_method_kw, {arg1:'kw1', arg2:'kw2'})
=> "pr_class_method_kw arg1=kw1 arg2=kw2"

# <クラスメソッド> sendで呼ぶ (blk引数)
> Hoge.send(:pr_class_method_blk, 'blk-arg1') {|arg1| puts "it is block. arg1=#{arg1}"}
it is block. arg1=blk-arg1
=> "pr_class_method_blk arg1=blk-arg1"
```



### テストコード

```hoge_test.rb
require 'test_helper'

class HogeTest < ActiveSupport::TestCase
  test 'Private Methodのテスト' do
    # インスタンスメソッド
    hoge = Hoge.new
    actual1 = hoge.send(:pr_instance_method, 'i-A1', 'i-A2')
    assert_equal('pr_instance_method arg1=i-A1 arg2=i-A2', actual1)

    # クラスメソッド
    actual2 = Hoge.send(:pr_class_method, 'c-A1', 'c-A2')
    assert_equal('pr_class_method arg1=c-A1 arg2=c-A2', actual2)

    # クラスメソッド (キーワード引数)
    actual3 = Hoge.send(:pr_class_method_kw, { arg1: 'ckw-A1', arg2: 'ckw-A2' })
    assert_equal('pr_class_method_kw arg1=ckw-A1 arg2=ckw-A2', actual3)
  end
end
```

### 参考

- [privateメソッドのテスト](https://qiita.com/tashua314/items/78bd03f55502b2783341)
- [Procを制する者がRubyを制す（嘘）](https://melborne.github.io/2014/04/28/proc-is-the-path-to-understand-ruby/)
EnzymeとJestを使ったReact componentのユニットテストの雛形

下記変更を加えれば各componentについてのユニットテストができる。

- describeのnameを書き換える
- テスト内容に応じてitを追加・変更する

EnzymeのAPIはこちらを参照: [API Reference - Enzyme
](https://airbnb.io/enzyme/docs/api/)

```javascript

import React from 'react'
import Enzyme, { shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })

describe('HogeComponent', () => {
  it('has a input', () => {
    const wrapper = shallow(<HogeComponent />)
    
    // inputタグがHogeComponent内に1個存在することをテストする
    expect(wrapper.find('input').length).toBe(1)
  })
})
```
プログラミング言語のリファレンス本が支払う著作物利用料について

# プログラミング言語の著作権
もし私が、特定のプログラミング言語のリファレンス本を執筆し販売し利益を得た場合、該当プログラミング言語団体にたいして支払うロイヤリティって発生するのかな？

と、素朴な疑問を抱いたので~~ぐぐっ~~調べてみました。

法律のホの字も脳みそに入っておらず、著作権についても商標権についても疎いので、とんだ勘違いしていたら申し訳ありません。

## プログラミング言語に著作権はなかった
結果としては、プログラミング言語自体に著作権は認められていないんですね。

> 日本語や英語が著作権法で保護されないと同様にプログラム言語も保護されないことを、著作権法では、確認的に規定しています（第１０条第３項）。
>[プログラム言語とは何？ Weblio辞書](https://www.weblio.jp/content/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E8%A8%80%E8%AA%9E)

あれ10条？それって日本のルール？世界では？と、調べてみると、
著作権は世界共通のようです。＜ただし条約加入条件必要

なるほど！

以上のことから、各リファレンス本が独自に仕様を調べ、言語に対しての独自の説明を行っている本であれば、各著作物にロイヤリティは発生していないと思われます。

ただ、各言語によって、公開されている公式リファレンスの著作権は各々違うようなので、転載などする場合は要確認です。

## 主なドキュメントの利用条件など
ドキュメントの著作権はさらっと見てまわった感じだとこんなでした。

* ruby
  * [配布条件 (Ruby 2.6.0)](https://docs.ruby-lang.org/ja/2.6.0/doc/license.html)
* javascript
  * [About MDN Web Docs - The MDN project \| MDN](https://developer.mozilla.org/en-US/docs/MDN/About#Copyrights_and_licenses)
* Python
  * [Copyright — Python 3.7.3 documentation](https://docs.python.org/3/copyright.html)
* C#（Microsoftのドキュメント全体の使用条件）
  * [使用条件 \| Microsoft Docs](https://docs.microsoft.com/ja-jp/legal/termsofuse)
* Java(Oracle)
  * [Oracle Legal Notices](https://docs.oracle.com/cd/E23003_01/html/en/cpyr.htm)

# あとがき
リファレンス本を執筆するなんて、そんな予定はもちろん微塵もありません。
ドラッグ&ドロップの実装

#はじめに
　DxLibでGUI開発を行う中でアイテムなどを選択する操作でドラッグ&ドロップ(D&D)で実装したい！ということがあるかと思います。将棋なんかだとポチポチするよりも駒を掴んで動かすほうが気持ちいいですよね。そこで今回はD&Dを実装してみようと思います。

#開発の手順
1. ボタンを作成する -> [疑似ボタンの実装](https://qiita.com/Daisuke8251/items/a795c9f359365f82e98f)を参照
2. クリックしている間処理を止める(無限ループ)
3. マウスの左ボタンを離したときに動作するボタンを作成する

　この手順で実装します。
##なぜこうなるの？
　イメージしやすいよう今回は将棋を題材に説明していきます。
　D&Dをする手順としては「駒を掴む -> 駒を移動させる -> 駒を置く」という3ステップで行うことになります。ここにユーザーの操作を付け加えると「駒の上でクリックして駒を掴む -> クリックしたままマウスを動かして移動させる -> マウスのボタンを離して駒を置く」となります。
　もう少しプログラム的な言い方に変えてみると

```
　1. クリックしたところが駒の上か範囲判定をして真であればD&Dの処理を開始する
　2. 駒の移動が終わるまで待つ
　3. ボタンを離したときにその位置に駒を置く
```
となります。

#ボタンを作成する
　これについては[疑似ボタンの実装](https://qiita.com/Daisuke8251/items/a795c9f359365f82e98f)を参考にして行ってください。

#クリックしている間処理を止める(無限ループ)
　DxLibには`WaitKey()`という処理待ち用の関数がありますが様々な事情によりよろしくないということ、アニメーションや時間管理を同時に行っている場合にはすべての処理が止まってしまうことから使用しません。無限ループは空で書けば処理待ちのみ、内部に処理を書き込めば続けて実行したい処理のみを行うことができゲームなどでは特に有用です。

```cpp
while (GetMouseInput() & MOUSE_INPUT_LEFT) {
        // アニメーションなどをつけたければここに処理を書く
}
```
　基本的にはループを空回ししているだけです。ただ、これだとマウスで掴んだものが半透明になってついてくるようなことはなく、画面上ではただマウスが動くだけなのでアニメーションとしては少し寂しいかもしれませんね。一緒に動かす処理を書くならwhile文の中に、選択中のものをちょっと暗くしたりするならwhile文の前に処理を記述しましょう。

#マウスの左ボタンを離したときに動作するボタンを作成する
　少しイメージしづらいかもしれませんが作るのはボタンになります。普通のボタンは"押した"ときに反応しますがその逆を作ります。そのためにはいくつかのステップを踏む必要があります。
　前提としてマウスの左ボタンが押された状態である必要があります。これは先ほどのループで実現しています。つまりさっきの処理を書いておけば普通のボタンと違ってマウスがクリックされたかどうかの判定は必要なくなります。ですから、座標の判定からの処理で問題ありません。このことを把握しておけば後は普通にボタンを作るだけで問題ありません。

#実装
　今回は将棋を作るものではないので駒をただ置くだけにしています。これまでのページから画像を張り付けてもらえば問題ないでしょう。

```cpp
int komaX = 300, komaY = 300; // 持ち駒の座標
int banX = 100, banY = 100;   // 駒を置く座標
int sizeX = 50, sizeY = 50;   // 駒のサイズ

if (GetMouseInput() & MOUSE_INPUT_LEFT) {
  int posX, posY;
  
  // マウスの座標を取得(何を選択したかを判定する要素)
  GetMousePoint(&posX, &posY);
  if ((posX >= komaX) && (posX < (komaX + sizeX))) {  // 駒の上か判定(X座標)
    if ((posY >= komaY) && (posY < (komaY + sizeY))) {  // 同様(Y座標)    
      while (GetMouseInput() & MOUSE_INPUT_LEFT) {
        // アニメーションなどをつけたければここに処理を書く
      }

      // マウスの座標を取得(どこに置いたかを判定する要素)
      GetMousePoint(&posX, &posY);
      if ((posX >= banX) && (posX < (banX + sizeX))) {
        if ((posY >= banY) && (posY < (banY + sizeY))) {
          DrawString(0, 0, "Conguratulation!", GetColor(255, 0, 0));
        }
      }
    }
  }
}
```
　判定部に関しては理解しやすいように2文に分けて書いていますがまとめてもらって構いません。`Conguratulation!`の赤文字が表示されれば成功です。

#さいごに
　普段何気なくしていることを少し分解して考えると自分で実装できる機能は意外と多くあります。少し意識して生活してみると開発のアイデアも浮かびそうですね。