OmniAICreator/Qiita-1.07M huggingface dataset:
Waypoints を jQuery から Vue.js に移植した

// この記事は、 [note](https://note.mu/in_colors_net/n/n2d8fc462df40) に投稿した記事の再掲です。

「要素が表示領域に入ったらクラスを付与」みたいな実装をするのにものすごくお世話になっている [Waypoints](http://imakewebthings.com/waypoints/)
いままでは jQuery を使って実装していましたが、まんをじして Vue.js に移植しました。

Vue.js との併用なので、利用している Waypoints ライブラリは No Framework ってやつです。

コード全文：
https://github.com/incolorsnet/note/blob/master/docs/vue-and-waypoints/index.html

動作サンプル：
https://incolorsnet.github.io/note/vue-and-waypoints/

# Vue.js + Waypoints.js with GRAPEVINE

## 実装してみる

Waypoints は CDN からも提供されています。
`<head></head>` 内 もしくは、`<body></body>` 内の一番下に入れるとよいです。

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.js"></script>
```

jQuery：

```jquery
(function($){
  $(document).ready(function(){
    $('.fade_in').waypoint(function(){
      $(this.element).addClass('visible');
    }, {
      offset: '80%'
    });
  });
});
```

Vue.js:

```javascript
const app = new Vue({
  el: '#el',

  mounted () {
    this.waypoint()
  },

  methods: {
    waypoint () {
      let elem = this.$el.querySelectorAll('.fade_in')

      elem.forEach(x => {
        this.waypoint = new window.Waypoint({
          element: x,
          handler: () => {
            x.classList.add('visible')
          },
          offset: '80%',
         })
      })

    },
  },
  beforeDestroy: function () {
    this.waypoint.destroy()
  }
})
```

`forEach` 文の書き方について、[鹿野先生](https://twitter.com/tonkotsuboy_com)にご助言をいただいてとってもすっきり書くことができました。勉強になった〜〜！ありがとうございます…🙏

#おまけ
クライアントワークもプライベートな制作も Waypoints を多用しています。なぜならフワッと表示させたら大体オッケーだと思っているからです。

のくら - スーツとモブ顔を愛してやまない漫画家｜Suit is Good.
https://nokura.me

▲フワッとさせたので大体オッケーだと思っている運用サイトです。（このウェブサイトはまだ jQuery に依存中）
【解決済】Nuxt.js が動かない（2019.5.24追記）

// この記事は、 [note](https://note.mu/in_colors_net/n/n2d752fb9577d) に投稿した記事の再掲です。

**追記の追記：**
**2019.5.24現在、この問題は解消されているようです。**

追記：
vue-cli 最新版（2.9.6）がきていたのでアップデートしたら直ったと思いきや直ってませんでした。（2018.6.9）

ちなみにバージョンアップは vue-cli の再インストールでできた。
しかし新規でインストールした Nuxt.js はまた動かない…

```bash
$ npm install -g vue-cli
```

////

`$ yarn run dev` してもエラーが出るから取り急ぎ解決策？？のメモ

# ふつうにインストール

```bash
$ vue init nuxt-community/starter-template <project>
$ cd <project>
$ yarn install
```

`axios` と `nuxt-sass-resources-loader` をいれる
あとアニメーションとかも使いたいので `Waypoints.js` と `GSAP`
ローディング用に `imagesLoaded` も
あとは `vue2-touch-events`, `moment.js`

```bash
$ yarn add nuxt-sass-resources-loader axios waypoints gsap imagesloaded vue2-touch-events moment --dev
```

SCSS と pug も使いたいからインストール
coffeescript も入れてるけど使った試しがない（JSが苦手）

```bash
$ npm install --save-dev pug@2.0.0-beta6 pug-loader coffeescript coffee-loader node-sass sass-loader
```

ふつうはここまでやったら動くんだけど、なんかよくわかんないエラーが出てローカルサーバーが起動しない（2018.6.1 現在）

```bash
# めっちゃエラーでる
$ yarn run dev
```

新田さんがツイートしてたこれを試してみる

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">yarn.lockまわりが原因なのかなと思ってるんだけど、なんかうまくいかん。npm勢はこれでいけたよーとかいってるなぁ<br><br>rm -rf node_modules<br>npm install<br>npm install prettier@~1.12.1</p>&mdash; 新田聡一郎 (@soichiro_nitta) <a href="https://twitter.com/soichiro_nitta/status/1000976041106595840?ref_src=twsrc%5Etfw">2018年5月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


```bash
$ rm -rf node_modules
$ npm install
$ npm install prettier@~1.12.1
```

#もういっかい再チャレンジ

```bash
$ yarn run dev
```

これでうごいた！
なんでエラーが出たのかはわかんないけどしばらくこのかんじでいこうと思いました

追伸：
私ごとですが案件がギリギリでめちゃめちゃ焦ったので新田さんのツイート本当に助かりました…ありがとうございます…🙏
Pythonで関数に複数の引数を渡す処理

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている山田です。

Pythonについて学習のアウトプットとして投稿します。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

#引数とは

引数とは、関数に渡す値のことです。
引数によって、関数の処理結果を変えることができます。
今回は関数に引数を渡す処理について、単数の場合と複数の場合に分けて説明していきます。

#単数の場合

まず関数を定義します。
その際、因数を引き受けるための仮引数を指定しておく必要があります。
その下に実行する処理を書きます。
さらに、関数に引数を渡すには、「関数名(引数)」という形にして、関数を呼び出します。
渡された引数は、関数の仮引数に代入されます。
こうすることで、その値を関数の処理の中で用いることができます。

```Python:script.py
def today(weather):
    print('今日の天気は'+ weather +'です')
today('晴れ')
today('雨')
```
#複数の場合
引数は複数であっても、関数に渡すことができます。
その場合は、仮引数をコンマ(「,」)で区切って、定義しましょう。
下のように、単数の場合と同じですが、引数の順番は、対応する仮引数の順番と同じにしなければなりません。

```Python:script.py
def today(weather,message):
    print('今日の天気は'+ weather +'なので'+message)
today('雨','傘を持っていきましょう')
```

#注意点
変数には、その変数が使える範囲(スコープ)が存在するということに注意しましょう。
関数の中で定義した変数のスコープというのは関数の中に限られます。
関数の外で使った場合は、正常に処理されないということを押さえておきましょう。
【Nuxt.js】ReferenceError: window is not defined ってエラーが出た

// この記事は、 [note](https://note.mu/in_colors_net/n/n1a9bc57fe15d) に投稿した記事の再掲です。

Nuxt.js だと SSR の影響で window とか document を使うとエラーが出るらしい。

```javascript
// "ReferenceError: window is not defined" って言われる
window.addEventListener(scroll, myFunc);
```

回避方法が公式ドキュメントにあったのでメモ。

#.vue ファイル内での処理

```javascript
if (process.browser) {
  // ここに window とか document を使った処理
}
```

#外部ライブラリを使う場合

.vue ファイル内

```javascript
if (process.browser) {
  require('外部ライブラリのパス');
}
```

`nuxt.config.js` にも該当ライブラリを追加しておく

```javascript
build: {
  vendor: ['外部ライブラリのパス']
}
```

#参考

window または document が undefined のときは？
https://ja.nuxtjs.org/faq/window-document-undefined/
macOS Sierraのターミナルでファイル名を変更したい

// この記事は、 [note](https://note.mu/in_colors_net/n/n3627f7b0f317) に投稿した記事の再掲です。

Mac で `$ rename` を実行したら以下のエラーが出た（HTML 拡張子を PHP に変更したい）

```bash
# HTML 拡張子を PHP に変更したい
$ rename -s html php *.html

# でもエラーが出る
sh: rename: command not found
```

# $ rename をインストール

Mac には $ rename が入ってないらしいので Homebrew からインストール

```bash
$ brew install rename
```

#再チャレンジ

```bash
# $ rename -s 置換する文字列 置換後の文字列 対象のファイル
$ rename -s html php *.html
```

できた！
JIRA 「リンクされた課題を作成する」の画面で項目を追加する

###「リンクされた課題を作成する」時に画面の項目を追加表示させる方法
リンク先のプロジェクト、課題タイプにそのフィールドが存在しているはずなので、そのフィールドを必須項目の設定にすればよい。
この際、リンク先のプロジェクト、課題タイプの**フィールド構成中に定義しているフィールドに対して**必須設定を行うこと。

※フィールドを必須設定する場合は、他のプロジェクトに影響がないことを気にして対応すべきで、フィールド構成を気にしないまま必須設定を行うのは避けるべき

*(JIRA Software 7.12.1を使用)*
scpで~/.ssh/configに登録しているサーバーにアップロードする

// この記事は、 [note](https://note.mu/in_colors_net/n/n1e2bb001028e) に投稿した記事の再掲です。

scpでファイルのアップロードをしてみたのでそのメモです

```bash
// アップロードするファイルを圧縮
$ cd /my/project/directory
$ zip -r filename.zip /my/project/圧縮するディレクトリ

// scpで送信
$ scp /圧縮したzipがある/ディレクトリ/filename.zip ホスト:/アップロード先の/ディレクトリ名

// 送信したzipを展開
$ unzip filename.zip
$ cd filename.zip

// パーミッションを変更
$ chmod 705 *
```

#ダウンロードするとき

```bash
$ scp ホスト:/ダウンロードする/ファイル.txt /ダウンロード先/ディレクトリ
```
【web3.js】web3.utils.BNで大きな数字を扱う

# 概要
JavaScriptで大きな数字を扱うときのライブラリ[BN.js](https://github.com/indutny/bn.js/)を使用出来る．
一般的にJavaScriptの数値型Numberは倍精度浮動小数点で表現されるため，最大の整数は`Number.MAX_SAFE_INTEGER=9007199254740991`である．
今回のBN.jsライブラリを用いることでこの数値以上の数値を扱う計算ができる．

# 仕様
```js:
web3.utils.BN(mixed);
```
- 引数
Number/String : 数値，数値の文字列

- 返り値
Object : BN.jsのインスタンス

```js:
const BN = web3.utils.BN;

new BN(1234).toString();
> '1234'

new BN('1234').add(new BN('1')).toString();
> "1235"

new BN('0xea').toString();
> "234"
```

# 参考
[web3.js ドキュメント](https://web3js.readthedocs.io/en/1.0/web3-utils.html?highlight=bn)
Nuxt.jsでSyntax errorが出て動かなかった

// この記事は、 [note](https://note.mu/in_colors_net/n/nc8856c8bc9d8) に投稿した記事の再掲です。

Node.jsのバージョンが古かったのが原因でした。

SyntaxError: Unexpected token ...
https://github.com/nuxt/nuxt.js/issues/2927

> NodeJS >= 8.3 supports spread operators natively.

2018.4.16現在、Node.jsが8.3以上じゃないと動かないみたい。
Node.jsは常に新しくしておくのがよさそう…😇
【Twitterタイムライン】ブログのサイドバーによくある、あれをつけたい

#[Twitterタイムライン](https://publish.twitter.com/?query=https%3A%2F%2Ftwitter.com%2FTwitterDev%2Ftimelines%2F539487832448843776&widget=Timeline)とは
よくブログなどのサイドバーにある、
これです↓
![スクリーンショット 2019-05-24 15.29.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422374/e6b51076-032e-4ac5-8880-db162d6d571c.png)
ただのリンクでもよかったんですが、最近のツイートとか、
どんなことやってるのかパッとわかるのでいいなと思い使ってみました。
#導入
[Twitterタイムライン](https://publish.twitter.com/?query=https%3A%2F%2Ftwitter.com%2FTwitterDev%2Ftimelines%2F539487832448843776&widget=Timeline)にいき、
自分のTwitterアカウントのIDを入力して「➡︎」を押し、
![スクリーンショット 2019-05-24 15.36.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422374/bc08128e-9b35-5f44-2bee-e2495e8fa8cc.png)
左(Timeline)を選択
![スクリーンショット 2019-05-24 15.38.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422374/90fde43c-d8ae-978e-20a3-ba3c4c9c903e.png)
貼り付け用のaタグが生成されるのでそれをHTMLにベタ貼りするだけです。
![スクリーンショット 2019-05-24 15.38.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422374/70377f5c-582c-5df0-7a51-7173fd799254.png)
##もっとカスタマイズしたい！とき
先ほどaタグを生成したフォームの上にあるURL、**set customization options**を押すと
カスタマイズ画面が出てくるので好きなようにカスタマイズできます。
Updateボタンを押すと、カスタマイズされたaタグが生成されます。
![スクリーンショット 2019-05-24 15.50.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422374/a38b093e-0b04-b7ff-7f71-ba1d3d2d4796.png)
他にもヘッダー、フッターを削除することもできます。
[詳細](https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview)

あとは貼るだけってすごく楽ですね...
もっとみていくと、ヘッダーやフッターも消すオプションがありました。
![スクリーンショット 2019-05-24 16.03.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422374/19304d1a-cbc7-f502-99e2-45acd60b7c34.png)
#参考サイト
[カスタマイズについて細かく書いてある！](https://souken-blog.com/2017/01/06/twitter-time-line/)

#おわりに
Twitterタイムラインがついに私のサイトにも...!という気持ちです。

次はjsのライブラリの何かか、Animate.cssを使ってみようかなと思います。
Node.jsをバージョンアップしたらgulpでエラーが出た

// この記事は、 [note](https://note.mu/in_colors_net/n/nae5aeb76dce9) に投稿した記事の再掲です。


Node.jsをバージョンアップ後、gulpを実行したら以下のエラー。

```bash
Error: Missing binding /my/hoge/dir/node_modules/node-sass/vendor/darwin-x64-59/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 9.x
Found bindings for the following environments:
 - OS X 64-bit with Node.js 8.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass --force` to build the binding for your current environment.
   at module.exports (/my/hoge/dir/node_modules/node-sass/lib/binding.js:15:13)
   at Object.<anonymous> (/my/hoge/dir/node_modules/node-sass/lib/index.js:14:35)
   at Module._compile (internal/modules/cjs/loader.js:654:30)
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
   at Module.load (internal/modules/cjs/loader.js:566:32)
   at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
   at Function.Module._load (internal/modules/cjs/loader.js:498:3)
   at Module.require (internal/modules/cjs/loader.js:598:17)
   at require (internal/modules/cjs/helpers.js:11:18)
   at Object.<anonymous> (/my/hoge/dir/node_modules/gulp-sass/index.js:187:21)
```

Sassがなんやかんやしてるっぽい？

#エラーを解消するには

```bash
$ npm rebuild node-sass
```

rebuildしたら動いた
nvimのプラグイン導入メモ

#何入れてるかわからなくなったからメモ程度に！
vimをカスタマイズしたのはいいものの、時間が経ってまたいじろうとしたら何入れたっけ？？？？ってなったから見直せるようにメモ程度に箇条書きしてきます！！
全然参考にならないと思いますがよろしくです！！
今回はプラグインのメモなので導入の仕方が知りたい人はブラウザバックしてください((_ _(-д- ｡)ﾍﾟｺﾘ

##Shougo/dein.vim
このこはプラグインを管理してくれるとってもすごい子！！
プラグインを入れたいなって思ったらこれでしょ！ってやつ！！

##自分が入れたプラグイン紹介

###reireias/vim-cheatsheet
`:Cheat`と打つとCheatSheetを表示してくれるやつ！！
コマンドなんだっけとかになったときに便利！！

###tpope/vim-fugitive
vim内でgitを使えるようにしてくれるやつ！！
`:Gwrite`で`git add <開いてるファイル>`
`:Gcommit`で`git commit`
`:Gdiff`で変更点をvimdiffで表示してくれる

よく使うのはこれかな？

###bronson/vim-trailing-whitespace
こいつは無駄なスペースをハイライトしてくれるやつ！！
なんか知らないけどスペース入ってんじゃん！！って気付ける！！

さらに`:FixWhitespace`で無駄なスペースを消してくれる！！
ファイル閉じるときに自動で実行すると楽！！

###Townk/vim-autoclose
この子は`}`とか`""`、`''`の後ろを自動入力してくれるもの！！
設定によってはもっと便利になるかも？

###tpope/vim-endwise
上のやつのRuby版！！
endを自動入力してくれる！！

Ruby書いたことがないのは秘密...

###airblade/vim-gitgutter
gitで管理しているファイルを編集したときに何をしたかを記号で教えてくれる！！

###tpope/vim-commentary
この子はノーマルモードで`gc`を打つとその行をコメントアウトしてくれる！！
行指定とかもあるから調べてくださいm(_ _;)m

###nathanaelkane/vim-indent-guides
インデントの深さを可視化してくれるやつ！！
自分好みにカスタマイズも可能！！

###'Shougo/neoyank.vim
denite. vimにこれがあると拡張できるプラグイン！
実際にはまだ使ってません...

###'Shougo/neomru.vim
上と同じで拡張できるやつ！
ファイルを開くのに使うみたい！
どんな感じで動いてるかは調査中！

###vim-scripts/Align
テキストを整形してくれるやつ！
箇条書きをしてもコマンドを実行するといい感じにしてくれる！
メモ取るときに便利！

###Shougo/vimproc.vim
vimで非同期処理をするためのプラグイン！
わけわかめーってなって使えてませんm(_ _;)m

###scrooloose/nerdtree
vimでファイル一覧を表示して開いたりできる！！

###w0ng/vim-hybrid
カラースキーム！！
自分はこの配色が好きだから使ってる！！

###itchyny/lightline.vim
vimのステータスラインのをいじるやつ！！
gitのbranchとかも表示できる！！

###osyo-manga/vim-anzu
vimで`/`で検索したときにその単語がいくつあって何番目にいるか教えてくれる！！

###Shougo/denite.nvim
ファイルや文字列検索を統合してくれる素晴らしいやつ！！

###glidenote/memolist.vim
コマンドを打つとメモが書ける！！
メモはデフォルトだと`$HOME/memo`に追加される！！

###Shougo/deoplete.nvim
色々と保管してくれるやばいやつ！！
あるととても便利だけど補完を追加するプラグインがうまく入れられなくて苦戦中！！

####deoplete-plugins/deoplete-zsh
ここからはdeoplete.nvimの補完を追加するプラグインの紹介！！
この子はshの補完

####Shougo/neco-vim
vim scriptの追加

####Shougo/neco-syntax
この子は色々と追加

####ujihisa/neco-look

####SevereOverfl0w/deoplete-github
git hubの補完

####Shougo/deoplete-clangx
c系の言語の補完

##プラグインを導入してみて
そこまで理解できていないので設定が必要なものやPythonを使うものの導入が難しかった。
deopleteはまだ途中なのは内緒
一応ガバガバな頭悪いinit.vim載せているのでここ違うよーとか、こうもできるよーとかあればどしどし教えてくれるとありがたいです！！
https://github.com/macha434
次はdenit.vimの導入を書きたいと思いまっす！！
ってことでまたね〜
【CSS】Firefoxで background-attachment: fixed; がきかないときに確認したこと

// この記事は、 [note](https://note.mu/in_colors_net/n/nf31787d6a5fd) に投稿した記事の再掲です。

`background-attachment: fixed;` を指定した親要素に対して `transform` プロパティが使われていると `fixed` がきかない様子。
 `transform` プロパティを設定すると、その子要素が全て `relative` になってしまうのが原因ぽい？
「スクロールして、要素が画面の中に表示されたらフェードインする」って実装をしたときにハマったのでメモ。

HTML

```html
<div class="contents">
 <div class="bg-fixed"></div>  <!-- fixedしたい背景要素は別にする -->
  <div class="fade-in">        <!-- transformを利用する要素は背景要素は別にする -->
     <p>Hello World!</p>
 </div>
</div>
```

CSS

```scss
css
.contents {
 position: relative;
}

// 背景要素をabsoluteにする
.bg-fixed {
 position: absolute;
 width: 100%;
 height: 100%;
 display: block;
 left: 0;
 top: 0;
 background: url("bg.jpg") no-repeat center top fixed;
 background-size: cover;
}

.fade-in {
 opacity: 0;
 transform: scale(0.8);
 transition: all .3s ease;
}

// 要素がスクロールされて "visible" クラスを付与されたときに適応するスタイル
.fade-in.visible {
 opacity: 1;
 transform: scale(1);
}
```
CarthageとCocoaPodsで挙動が変わる(RxCocoa) ※5/27原因わかりました

結論としてRxCocoaの機能を誤使用したけど、Carthage経由で導入した場合はクラッシュせずにCocoaPods経由で導入した場合にクラッシュするという内容です。

■前提

```
RxSwift: 4.5.0
RxCocoa: 4.5.0
```

■間違った使い方例

```
func viewDidLoad() {
    self.tableView.delegate = self.dataSource
    self.tableView.dataSource = self.dataSource

    viewModel.articles
                .asDriver()
                .drive(
                    self.tableView.rx.items(dataSource: self.dataSource)
                )
                .disposed(by: disposeBag)

}
```

この場合本来であれば以下のような理由でクラッシュするはずです。

```
This is a feature to warn you that there is already a delegate (or data source) set somewhere previously.
The action you are trying to perform will clear that delegate (data source) and that means that some of your features
that depend on that delegate (data source) being set will likely stop working.\n
```

すでにどこかでデータソースまたはデリゲートが設定されていますよーって感じのエラーですが、まさにviewDidLoadの頭で明示的に両方設定してるのでダメですね笑

ただこのエラー、うちの環境ではRxSwift(RxCocoa)をCarthageで導入した場合は発生せずに(本来の使い方じゃないけど)意図した通りに動きますが、CocoaPodsで導入した場合にはしっかりとエラーが発生してクラッシュします。。。

またさらにわからないのはSchemeのBuildConfigurationでDebugビルドを行った時のみに発生し、Releaseやそれ以外(独自で設定した場合)の場合も発生しません。
※これはソースをちゃんと追ってないのですが、RxCocoaのなかでif DEBUGで分岐しているのかもしれません。

Qiitaの使い方にそぐわないかもしれませんが、もし同じ事象に遭遇して原因を突き止めた方がいらっしゃいましたら、ご教授いただけたら幸いです。

よろしくお願いします。

====5/27追記======

まず実際にクラッシュする箇所(エラー)ですが、DelegateProxyType.swiftのinstallForwardDelegateメソッド内にある `assert(proxy._forwardToDelegate() === nil・・・` に引っかかることで、発生してます。
で、そもそもXcodeのデフォルト設定ではreleaseビルドはswift optimazation levelが`-O`で設定されており、この場合 `assert` は評価されずにスキップされます。 
※Debugビルドのデフォルトは `-Onone` であり、この場合は `assert` も評価され、引っかかったら `RuntimeError` になります。
これが `SchemeのBuildConfigurationでDebugビルドを行った時のみに発生し、Releaseやそれ以外(独自で設定した場合)の場合も発生しません。` の原因(理由)でした。

またうちでは以下のコマンドでCarthage経由で各ライブラリをインストールしてます。
`carthage update --platform iOS --no-use-binaries`
`carthage update` コマンドには `--configuration` というオプションがあり、ここで `Debug`と明示的に指定した場合にDebugビルドとなり、上記の理由によりCocoaPodsで導入した時に発生したエラーが再現できました。
※`--configuration` を付与しなかった場合のデフォルトはReleaseなのでしょうか？？

わかってしまえば簡単な内容だったので、勉強不足を痛感しております。。。
もし同じような理由でハマってる方の一助になれば幸いです。
Xcode10.1でiOS12.2以降の検証が出来ない場合


# はじめに
こんにちは！
古いXcodeプロジェクトをBuildしたらエラーが出たので、備忘として残しておきます。あんましAR関係ないです。
`※記載間違い等あれば教えてください。`


# エラー内容について
<img width="418" alt="err1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222377/437d99aa-1a3e-3ce7-f24d-58a7d16bc6ac.png">
>**Could not locate device support files.**
This iPhone ~~ (Model AXXXX, AXXXX, AXXXX) is running iOS 12.2 (16E227), which may not be supported by this version of Xcode.

>＜訳＞
**デバイスサポートファイルが見つかりませんでした。**
このiPhone ~~（モデルAXXXX、AXXXX、AXXXX）はiOS 12.2（16E227）を実行しています。これは、このバージョンのXcodeではサポートされていない可能性があります。


# 対策
このエラーが出た場合の対応は、以下いづれかです。

**１.Xcode 10.2用に対応する為、Swiftのバージョンを4.2以上にアップデートする。**
[Target]→[Build Setting]内に記載されている[SWIFT_VERSION = 3.x]を4.2以上に更新してください。
大半の場合は、Swift4.2以降で廃止になった文法やライブラリの更新も必要です。

**2.Xcode 10.1に、Xode10.2のデバイスサポートファイルをコピーする**
裏技感ありますが、とりあえず通したいのであればこれが一番良さそうです。
以下等のサポートファイルを纏めてくれているリンクから対象ファイルをダウンロードして
　参考①：[iOS-DeviceSupport](https://github.com/iGhibli/iOS-DeviceSupport/tree/master/DeviceSupport)
　参考②：[iPhoneOSDeviceSupport](https://github.com/filsv/iPhoneOSDeviceSupport)

↓のディレクトリに配置してください。
`Xcodeアプリのディレクトリ(Application/Xcode)/Contents(Xcodeアプリ-パッケージの内容を表示)/Developer/Platforms/iPhoneOS.platform/DeviceSupport`


**3.Xcode 10.1で頑張る。（iOS12.2用の更新を諦める。）**
尚、既にAppStoreにリリースされているアプリは、今の所iOS12.2の端末でもダウンロード出来ました。
逆にXcodeのバージョンを下げたい方は、[Downloads for Apple Develpoers (Xcode)](https://developer.apple.com/download/more/?name=Xcode)からどうぞ



以降は、原因などの詳細について記載します。


# 環境
・Xcode Version 10.1 (10B61)
・iOS 12.2 (16E227)

・Development Target iOS 11.0
・Swift Version 3 


# 原因
最新版であるXocde 10.2はSwift 3をサポートしていない為、
一つ前のバージョンであるXcode10.1を使っていました。
<img width="422" alt="err2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222377/ebb6f0dd-7cba-d59e-180b-71889979a1ba.png">
>**Unsupported Swift Version**
The project “~~” contains source code developed with Swift 3.x. This version of Xcode does not support building or migrating Swift 3.x targets.
Use Xcode 10.1 to migrate the code to Swift 4.

>＜訳＞
**サポートされていないSwiftのバージョン**
プロジェクト“~~”はSwift 3.xで開発されたソースコードを含みます。 このバージョンのXcodeはSwift 3.xターゲットのビルドまたは移行をサポートしません。
Xcode 10.1を使用してコードをSwift 4に移行します。

ただしXcode10.1は、Development Target iOS 12.1までしかサポートしていません。
<img width="627" alt="err3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222377/a12f3270-6014-9d7d-4ccc-5424cb1f6a40.png">

その為、iOS 12.2以降のiOSにビルドするとエラーとなります。
※Build Successにはなります。
>参考記事：[Xcode,Swiftのバイナリ互換性](https://qiita.com/gamako/items/c12edf77fe0632903b77)


#まとめ
いよいよSwift3を対応してくれなくなってきたので、大変ですが更新しなければいけない...
尚、Swift4.xからSwift5への更新はそこまで苦ではありませんでした。
AWS のクラウドサービス活用資料集が更新されたのでまとめてみた

AWSの資料を調べていたら公式の活用資料集のリンクがアップデートされて見やすくなっていたので備忘録的に紹介したいと思います。

# AWS クラウドサービス活用資料集
AWSが開催したBlack Belt OnlineSeminarやWebinar、初心者向けの資料から最新のAWSUpdateまで確認できるのが[AWS活用資料集](https://aws.amazon.com/jp/aws-jp-introduction/)です。

トップを開くと下記のような画面に遷移します。

![top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323405/702b336f-4a10-c3b0-04f3-77c6a38f2da8.png)

主な掲載内容は
・Webinar申し込み
・初心者向け資料
・業種・ソリューション別資料
・サービス別資料
・AWS Service Update
・JAWS-UG 発表資料

上記の様になっています。※2019年5月現在

Webinar申し込みとサービス別資料はそれぞれ別リンクにアクセスします。
サービス別資料は特に見失いやすい(私だけ？)なので[リンク](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)を残しておきます。

活用資料集のページをスクロールしていくと申込みとは別にWebinar 資料や、

![webinar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323405/b0b11f50-12d7-3e1c-16b2-3af9beeae204.png)


JAWS-UGの発表資料も掲載されています(AWS発表分のみ)。
![JAWS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323405/8fb11f19-c83d-3d87-b390-3f9ef6ebe0b9.png)

AWSは「試してみたいけどドキュメント探すのが大変」「製品ページだけだとよくわからない」などよくある問題をこういった細かく、かつわかりやすい資料でまとめてくれてるので大変素晴らしいですね、わかりやすい。

また参考までに活用資料集とは別に個人的におすすめのページも記載します。

・AWS の最新情報
最新のUpdate状況を確認できます。ブログに遷移したり「分析」「パートナーネットワーク」「MachineLearning」などカテゴリごとにも別れているので気になるジャンルに合わせてチェックできます。
https://aws.amazon.com/jp/new/?nc1=f_cc

・AWS アーキテクチャセンター
こちらはWordPress のホスティングやバッチ処理など目的に合わせてAWSの推奨アーキテクチャをGitHubやPDF形式で確認できます。
https://aws.amazon.com/jp/architecture/?nc1=f_cc&awsf.quickstart-architecture-page-filter=highlight%23new

・AWS Well-Architected
Well-ArchitectedフレームワークはAWSを利用する上で高可用性の担保やコスト最適化を行うためのベストプラクティスをまとめたものになります。これからAWSを導入する方も、すでに導入されてる方も必見のフレームワークです。
https://aws.amazon.com/jp/architecture/well-architected/
https://aws.amazon.com/jp/blogs/news/aws-well-architected-whitepaper/

# さいごに
資料やリンクはは2019年5月現在のもので更なるアップデートもされると思いますが、最新の資料置き場やリンクを探す手間が少しでも省けたら幸いです。
もしここもおすすめだよ、というのがあればぜひ追記したいと思いますのでご意見お待ちしております。
GitHubでGit LFSを利用するときのコマンド

// この記事は、 [note](https://note.mu/in_colors_net/n/n8c94a746c773) に投稿した記事の再掲です。


最近コーディングデータの中に動画が入ってくることが多くなって、そのたびにpushを失敗する。（ポンコツ） 次回こそ失敗したくないのでメモ。

#100MB以上のファイルを指定
100MB以上のファイルを指定する場合(この場合mp4を指定)

```bash
$ git lfs track "*.mp4"
```

Git LFSで管理しているファイルの確認

```bash
$ git lfs ls-files
```

#Git LFSを設定したときの手順
100MB以上のデータをコミットする直前に戻る

```bash
# HEAD^で直前のコミットを取り消す
$ git reset --soft HEAD^
```

addしてpush

```bash
$ git add .
$ git commit -m "git lfsを設定"
$ git push origin master
```

# Git LFSを取り消す

クライアントワークでGitHubからPlanioに変更したときにGit Lfsが使えなかったので、設定を取り消すコマンドも覚えておくとよさそうと思った。

```bash
git lfs uninstall
```

おわり
GAE/Goのローカルサーバーが起動しなかった「dev_appserver.py: error: too few arguments」のエラー解決法

GAE/Goのアプリのサンプルを写経していたときのこと。

- [Google App Engine で始める Go 実践入門 Part 1 【GO / Cloud SDK のインストール】 \- Qiita](https://qiita.com/rema424/items/743bc508ef70cd980e17)

ローカルサーバーの起動をするために、

```shell
> dev_appserver.py app.yaml
```

すると、

```shell
dev_appserver.py: error: too few arguments
（引数が少なすぎます）
```

調べてみると、すでに解決法がありました。

- [\`dev\_appserver\.py: error: too few arguments\`](https://gist.github.com/bryik/1f507969f5239625628d6b63f04eae60)

## 問題点

- Google Cloud SDKバンドルのpythonのコマンドに不備がある

## 修正するレジストリキー

- `regedit`を起動し、以下のキーを修正します。
- 引数を渡すようにコマンドを変更（`%*`を付け足し）ます
。

```
Computer\HKEY_CLASSES_ROOT\Applications\python.exe\shell\open\command
```

```diff
- "C:\Users\（省略..）\python.exe" "%1"
+ "C:\Users\（省略..）\python.exe" "%1" %*
```
Webpack の ejs-loader は EJS じゃなく lodash template だからタグの記法に気をつけろ

Webpack の [ejs-loader](https://www.npmjs.com/package/ejs-loader) プラグインは [EJS](https://ejs.co) 記法のテンプレートをロードしてくれそうな名前をしている……が、実際には [lodash template](https://lodash.com/docs/#template) 記法に対応している。

厄介なことに、 EJS と lodash template は記法がほとんど同じだが、 **値をエスケープして埋め込むタグとエスケープせずに埋め込むタグが入れ替わっている。**

```
const data = "<b>Hello</b>";

Lang      Input         Output
-------------------------------------------------------------------
EJS       <%= data %>   "&lt;b&gt;Hello&lt;/b&gt;"
EJS       <%- data %>   "<b>Hello</b>"

lodash    <%= data %>   "<b>Hello</b>"
lodash    <%- data %>   "&lt;b&gt;Hello&lt;/b&gt;"
```

うっかり EJS 記法でテンプレートを書くとエスケープが壊れるので注意すること。
英語(56)Is “discuss about” grammatically incorrect? 

言語処理で、機械学習が発達して、文法的に正しいかどうかより、頻出するかどうかが重視されている。

そうであれば、機械学習時代の文法があってもよいかもしれない。

なにかでなければならないという文の縛りではなく、
どういう文が多いかに基づいて、その統計結果に基づく、
確率について、わかりやすい数式（言語処理）にまとめ、
言語生成に生かすというような。

言語生成も機械学習で実現するとしても。


Is “discuss about” grammatically incorrect? 
https://english.stackexchange.com/questions/146833/is-discuss-about-grammatically-incorrect

文法的に正しくないかどうか。


# 案1 
文法的に正しくない

何を文法というかどうか。

# 案2
文法的にはやや正しくない。

discussが、talk aboutだとすれば、
discuss aboutが、talk about aboutになるという。

例えば、to doという句がある。
to doをすべきだという動詞的に捉えれば、
you have to to do.
という文があってもいいかもしれない。

このあたりは、Queens English, American English, Australian English, South African English,....など。

Latino Englishだったら問題ないかもしれない。

あるいは、文法は、文を理解しやすくする方法であるため、

# 案3 
文法的には正しい

動詞と目的語がある。
aboutが、必要か不必要かだけであれば、文法的ではなく、意味的だ。

意味が重複する。

重複する言葉は単なる強調だという仮説文法１。

あるいは、
重複する単語は意味を理解する上で無視すればよいという仮説文法２。

talk about aboutという文があっても、重複するaboutは軽くいなすのだってよい。

例えば、結末という言葉がある。結も最後だし、末も最後。
意味的な重複。

# TOEIC

TOEICの試験は、文法的に正しいかどうかよりも、
Nativeが違和感があるかどうかが大事。

その違和感を抽象的にまとめると、文法という形式で記述できるかもしれない。

## 自己参考(self reference)
英語(0) 一覧
https://qiita.com/kaizen_nagoya/items/680e3f5cbf9430486c7d

言語・文学記事　１００
https://qiita.com/kaizen_nagoya/items/42d58d5ef7fb53c407d6

日本語（０）一欄
https://qiita.com/kaizen_nagoya/items/7498dcfa3a9ba7fd1e68

一覧の一覧( The directory of directories of mine.) Qiita(100)
https://qiita.com/kaizen_nagoya/items/7eb0e006543886138f39

プログラマが知っていると良い「公序良俗」
https://qiita.com/kaizen_nagoya/items/9fe7c0dfac2fbd77a945

Error一覧 error(0)
https://qiita.com/kaizen_nagoya/items/48b6cbc8d68eae2c42b8

＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong.
# 文書履歴(document history)
ver. 0.01 初稿 　 20190519
ver. 0.02 ありがとう追記 　 20230529
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
RailsアプリケーションのRubyとBundlerのバージョンをアップデートする

## 環境

```
$ cat /etc/system-release
Amazon Linux AMI release 2018.03

# プロジェクトのディレクトリ内にて
$ rbenv -v
rbenv 1.1.1-30-gc8ba27f

$ rbenv versions
* 2.5.3 (set by /var/www/myapp/.ruby-version)

$ bundle -v
Bundler version 1.17.1

# すでにアップデートされたRailsアプリケーション
$ bin/rails -v
Rails 5.2.3
```

## はじめに

Railsアプリケーションをアップデートするにあたり、RubyとBundlerのバージョンもアップデートする必要があったので備忘録として残しておきます。

## Rubyのバージョンを確認

rbenvにインストールしたいバージョンが存在するか確認します。

```
$ rbenv install -l
```

以上のコマンドで該当バージョンが出てこなければ、ruby-buildをアップデートする必要があります。

```
$ cd /usr/local/rbenv/plugins/ruby-build && git pull && cd -
```

## アップデートしたいRubyのインストール

```
# ruby2.6.2をインストール
$ rbenv install 2.6.2

# ruby2.6.2に切り替え
$ rbenv global 2.6.2

# 再読み込みし、切り替えの反映
$ rbenv rehash

# 反映されたことを確認
$ rbenv versions
  system
  2.5.3
* 2.6.2 (set by /var/www/myapp/.ruby-version)
```


## トラブルシューティング

### インストールしたRubyのバージョンに切り替わらない

```
# 正しい参照先
$ which ruby
/usr/local/rbenv/shims/ruby
```

rbenvでRubyをインストールした場合、以上のように正しい参照先は`/.rbenv/shims/ruby`となります。それ以外だと参照先が間違っている可能性があるため、PATHを通します。EC2では全てのユーザーがログイン時にrbenvを使えるようにするために、`/etc/profile.d/rbenv.sh`にPATHを通している場合があります。


```
# /etc/profile.d/rbenv.shにPATHの記載があるかもしれない場合は要確認！
$ cat /etc/profile.d/rbenv.sh
export RBENV_ROOT="/usr/local/rbenv"
export PATH="${RBENV_ROOT}/bin:${PATH}"
eval "$(rbenv init -)"

# 以上にPATHがなければ、~/.bash_profileに記述
$ echo 'export PATH=~/.rbenv/bin:$PATH' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

# ~/.bash_profileの変更を反映
$ source ~/.bash_profile
```

### Rubyのバージョンをアップデートしたものの、bundle installができない

`Gemfile.lock`に記載されているBUNDLE_WITHとbundlerのバージョンが異なる場合、`bundle install`をした時に以下のようなエラーが出てしまいます。

```
$ bundle install --path vendor/bundle -j4
・・・
find_spec_for_exe': can't find gem bundler (>= 0.a) (Gem::GemNotFoundException)
・・・
```

まずは`Gemfile.lock`にて、`BUNDLED WITH`を確認します。確認したバージョンのbundlerをインストールします。
bundlerの参照先を確認し、`/.rbenv/shims/bundler`となっていればOKです。

```
# BUNDLE_WITHでbundlerのバージョンを確認
$ vim Gemfile.lock
・・・
BUNDLED WITH
   1.17.3

# Gemfile.lockに記載されているバージョンと同じbundlerを指定してインストール
$ rbenv exec gem install bundler -v 1.17.3

# 再読み込みし、切り替えの反映
$ rbenv rehash

# 参照先の確認
$ which bundler
/usr/local/rbenv/shims/bundler
```
関数型Python チートシート ~遅延と無限~

# 前書き
組み込み関数, `itertools`, `more_itertools` を網羅的・コンパクトに概観する。

**前提**:
イテレータを使うことで 必要に迫られるまで処理を後回しにできる。組み込み関数だけでも恩恵があるが `itertools`と サードパーティ製モジュール`more_itertools`を使うと より表現力が増す。

**表記**:

- `itertools`は接頭辞なしで言及する。例: `itertools.count`は`count` 
- `more_itertools`は接頭辞`M`で言及する。例: `M.chunked`
- イテはイテレータの略

**意義**:
個々の関数を引っ張ってこれるようになるのも重要だが、ストリーム系の処理を カテゴライズする/典型を理解する ことは長く使える知識になる。名付けと分類はその近道。

# 本文

**イテ作成**: `range`,`iter`,`count`,`repeat`,`M.repeatfunc`,`M.iterate`,`M.tabulate`で無からイテを作れる。`cycle`,`M.ncycle`,`M.count_cycle`は繰り返してカサ増し。`tee`はコピー。
**イテ微調整**: `enumerate`はインデックス付与, `M.intersperse`はセパレータ挿入。`M.padded`,`M.padnone`は短い時の埋め草。`M.prepend`は先頭に追加。`M.collapse`,`M.flatten`は平坦化。`M.consume`はイテを進めるだけ。
**イテ結合**: `chain`,`from_iterable`は直列的結合。`zip`,`zip_longest`,`M.zip_offset`は並列的結合。`M.interleave`,`M.interleave_longest`,`M.roundrobin`は別の並列的結合。
**イテ分割**: `M.partition`は述語で2つのイテに分割。`M.bucket`はキー関数で分割。`M.divide`,`M.distribute`はNつに分割。`M.unzip`はzipの逆。
**要素→listOf要素(grouping)**: `M.chunked`,`M.sliced`は要素をN個組に。`M.grouper`はイテの要素数をNに。`M.split_at`は述語で集める(セパレータは消失)。`M.split_before`,`M.split_after`ではセパレータは消失しない。`M.split_into`は不均一に集める。
**要素→listOf要素(windowing)**: `M.windowed`はWindow作成, `M.pairwise`は幅2のWindow。`M.stagger`で変則的なWindow。
**述語判定**: `M.adjacent`は述語の判定結果を付与。`M.locate`,`M.rlocate`は述語を満たすインデックスを要素にもつイテを作成。
**述語でフィルタ**: `filter`, `filterfalse`が基本。`takewhile`,`dropwhile`は字義通り。`M.strip`,`M.lstrip`,`M.rstrip`はイテの最初と最後の方にフォーカスしたフィルタ。`M.first_true`はピンポイントで1個欲しい時。
**非述語でフィルタ**: `islice`が基本。`M.islice_extended`は負のインデックスを指定可。`M.take`,`M.tail`は最初/最後のN個が欲しい時。`next`,`M.first`,`M.last`,`M.nth`はピンポイントで1個欲しい時。`M.unique_everseen`,`M.unique_justseen`は（努力的に）重複排除。`M.compress`はマスクでフィルタ。
**イテ自身に関する述語/関数**: `all`は全数確認, `any`は存在確認, `M.all_equal`は全部同じかを確認。`M.ilen`は長さ。`M.one`は要素数1のアサーション兼要素取得。`M.exactly_n`は述語を満たす要素数をテスト。`M.quantify`は述語を満たす要素数の数。
**関数適用**: `map`(注:zipWithとしても使える), `starmap`が簡便な時も。
**集約系操作**: `accumulate`は累積和(和以外の任意の関数も使える)。`M.difference`は階差。`groupBy`はグループ化。`M.groupby_transform`はグループ化＋map。`M.map_reduce`はグループ化してその各グループ中でmap + reduceを実行。
**特殊操作**: `M.side_effect`はタップ＋α。`M.replace`は置換。`M.sort_together`は超便利なソート。`M.collate`はソート済みなN個のイテをマージ。`M.dotproduct`は内積。 `M.unique_to_each`は重複確認。`M.run_length`, 情報理論の圧縮技術で使うやつ。 `M.numeric_range`, numpyでのlinspace。
**先読み系**: `M.spy`でN個先読み。`M.peekable`は先読み結果に応じて微修正(prepend)したい時。`M.seekable`でメモしながらインデックスで行き来（メモリ注意）。
**イテ生成（組み合わせ論）**: 必要な時にドキュメントを読むべし`combinations`,`combinations_with_replacement`,`permutations`,`product`,`M.distinct_permutations`, `M.circular_shifts`, `M.partitions`, `M.powerset`, `M.random_product`, `M.random_permutation`, `M.random_combination`, `M.random_combination_with_replacement`, `M.nth_combination`

# 細々としたこと
- 要素→listOf要素 は一般的に grouping ないし windowing と呼ばれる操作。
- `islice`は N個おきにとってくる takeEvery としても使える（オフセット指定も可）その観点で見ると`M.distribute`（の実装)はその兄弟。

# 参考

- 公式ドキュメント
    - [関数型プログラミング HOWTO](https://docs.python.org/ja/3/howto/functional.html)
    - [関数型プログラミング用モジュール](https://docs.python.org/ja/3/library/functional.html)
    - [Itertools レシピ](https://docs.python.org/ja/3/library/itertools.html#itertools-recipes)
- more-itertools: [公式ドキュメント](https://more-itertools.readthedocs.io/en/stable/)
Python3系でORB+RANSACでの画像間マッチングの実装


# はじめに
今回は、二枚の画像に対してORB特徴量を抽出し,
二枚の画像で得た特徴点を元にマッチングを行う方法について説明します。
以下の画像のように二枚の画像それぞれ特徴点を抽出し、対応する特徴点を結びます。
![draw_match.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406018/9f540aa4-feef-8e44-e46b-d30cd34a5568.jpeg)

#ORB (Oriented FAST and Rotated BRIEF)
ORBは、特徴点、特徴量を抽出するアルゴリズムで、カメラの運動(移動、回転、ズーム)にロバスト(不変)なアルゴリズムで、ORBができた経緯としてもともとSIFTというアルゴリズムが、移動、回転に加えてズームにロバストなアルゴリズムであったが、SIFTは計算量が多く、低速だったため、速度を改良したSURFというアルゴリズムがでてきました。ただし、SIFTもSURFも特許で守られているため、使用するためには特許料を払う必要があります。
そこで、移動、回転、ズームに対してロバストであり、計算速度も速く、フリーで使うことができるORBというアルゴリズムが2011年に開発されました。
#RANSAC
今回のように、画像から特徴点を取るといった場合に、ノイズなどの原因で法則性から大きく外れた、外れ値がデータに含まれる場合があります。その外れ値をうまく無視して、法則性を推定する手法としてRANSACがあります。

# ORB+RANSACのマッチング
今回のプログラムでは画像間のマッチングを行う際に、抽出したORB特徴量を用い、マッチングの信頼度を上げるために、RANSACを適用します。
また、今回のプログラムを動かすPythonの環境はPython3系とします。
手順は以下のようになります。

1. 画像ファイルの読み込み
2. ORBで特徴点＆特徴量の抽出
3. RANSAC
4. 画像に特徴点を書き込み
5. 結果の出力

```py
import numpy as np
import cv2
from matplotlib import pyplot as plt

MIN_MATCH_COUNT = 10 
good_match_rate = 0.15 #得られた特徴点のうち使用する点の割合

img1 = cv2.imread('./image1.png',0) # 一枚目
img2 = cv2.imread('./image2.png',0) # 二枚目
 
# Initiate ORB detector
orb = cv2.ORB_create()

# キーポイント検出,ORB記述
kp1, des1 = orb.detectAndCompute(img1,None)
kp2, des2 = orb.detectAndCompute(img2,None)

# create BFmatcher object
bf = cv2.BFMatcher(cv2.NORM_HAMMING, crossCheck=True)
#bf = cv2.BFMatcher(cv2.NORM_L1, crossCheck=False)
# Match descriptors.
matches = bf.match(des1,des2)


matches = sorted(matches, key = lambda x:x.distance)
good = matches[:int(len(matches) * good_match_rate)]

#MIN_MATCH_COUNT以上なら出力,それ以下ならelseへ
if len(good)>MIN_MATCH_COUNT:
    src_pts = np.float32([ kp1[m.queryIdx].pt for m in good ]).reshape(-1,1,2)
    dst_pts = np.float32([ kp2[m.trainIdx].pt for m in good ]).reshape(-1,1,2)
#RANSAC
    M, mask = cv2.findHomography(src_pts, dst_pts, cv2.RANSAC,5.0)
    matchesMask = mask.ravel().tolist()

    h,w = img1.shape
    pts = np.float32([ [0,0],[0,h-1],[w-1,h-1],[w-1,0] ]).reshape(-1,1,2)
    dst = cv2.perspectiveTransform(pts,M)

    img2 = cv2.polylines(img2,[np.int32(dst)],True,255,3, cv2.LINE_AA)

else:
    print ("Not enough matches are found - %d/%d") % (len(good),MIN_MATCH_COUNT)
    matchesMask = None

draw_params = dict(matchColor = (0,255,0), # draw matches in green color
                   singlePointColor = None,
                   matchesMask = matchesMask, # draw only inliers
                   flags = 2)

img3 = cv2.drawMatches(img1,kp1,img2,kp2,good,None,**draw_params)

#出力
plt.imshow(img3, 'gray'),plt.show()
```
#結果
結果は以下に示すように、[はじめに](#はじめに)で示した図と比べて、
精度の高いマッチングが行えていることがわかります。
![ransac-lena1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406018/eacd66ee-6eaf-65c6-296c-ea52d093661a.png)
MiniKFでオンプレ機械学習基盤

[Kubeflow](https://www.kubeflow.org/) とは [Kubernetes](https://kubernetes.io/) ベースの本格的な機械学習基盤です。Google に強力に推進されており、GCPには[ワンプッシュ](https://deploy.kubeflow.cloud/#/)でデプロイできます。AWSやAzureにも当然設置可能です。

今回は [MiniKF](https://www.kubeflow.org/docs/started/getting-started-minikf/)の新登場で、普段の開発マシンやオンプレサーバに簡単に本格的な機械学習基盤 Kubeflow をインストールできるようになりました。

# インストール

VagrantとVirtualboxが必須なのでインストールしましょう。

## Mac

Brewを使うと楽勝です。

    brew cask install vagrant virtualbox

Virtualboxのインストールが `The Installation Failed` のエラーで失敗した場合は、Macの「セキュリティとプライバシ」の設定で、 "Oracle America, Inc." のソフトウェアを[許可](https://medium.com/@DMeechan/fixing-the-installation-failed-virtualbox-error-on-mac-high-sierra-7c421362b5b5)してください。

## Ubuntu

Virtualboxは apt で入ります。

    sudo apt install virtualbox

しかし、vagrant は apt で入るバージョンが古くて virtualbox に対応していないので、[ダウンロード](https://www.vagrantup.com/downloads.html)してインストールしましょう。

    wget https://releases.hashicorp.com/vagrant/2.2.4/vagrant_2.2.4_x86_64.deb
    sudo dpkg -i vagrant_2.2.4_x86_64.deb

# MiniKF 起動

    mkdir -p ~/w/minikf; cd ~/w/minikf
    vagrant init arrikto/minikf
    vagrant up

最初の up では、VMイメージのダウンロードに20分くらいかかりますが、起動が終わったら Kubeflow 画面へアクセスできます。

## Mac などローカルのマシンに入れた場合

    open http://10.10.10.10:8080

手元のMacはWiFi接続しており、VMイメージのダウンロードがなかなか終わらないので、上記は本系ドキュメント及びUbuntuでの実行時の挙動から、そうなるはずだ、ということです。

# Ubuntuなどオンプレサーバに入れた場合

Macなどからトンネルを接続していきましょう。サーバ `[ai.local](http://ai.local)` でMiniKFを動かしていたら、

    ssh -NL 8080:10.10.10.10:8080 ai.local &
    open http://localhost:8080

によって Kubeflow 画面にいけます。

## URL、パスワード

設定情報は本系ドキュメントで[確認しましょう](https://www.kubeflow.org/docs/started/getting-started-minikf/)。 本記事執筆時だと、Jupyterノーツボックなど各種サービスの認証情報は次の通りです。

    username: user
    password: 12341234

# おわりに

以上、本番で Kubeflow の運用を考えていたら、開発時に MiniKF を使って、本番と開発の差分を小さくしておきましょう。
【CraftCMS】MatrixFieldに嵌められた話

先日[og情報を動的に云々話](https://qiita.com/SHIN_DEVELOP/items/fc17acf808c8a9735e3d)を書いた後に起きた出来事

今回の作業として
**MatrixFieldにテキストフィールドが格納されていれば**
**その情報をog:Descriptionに出力する** 、という対応を行った。

ざっとこういう感じである

```twig
{% set desc = entry.detail.type('blockText').one %}
{% if desc is not empty %}
〜省略
```

で順番的にその後でもページ表示項目としてdetailフィールド(matrix)を使用するわけだが

```twig
{% set article = entry.detail.all %}
{% if article | length > 0 %}
	{% for unit in article %}
		{% if unit.type == "blockText" %}
				{{unit.text}}
		{% elseif unit.type == "blockImage" %}
				<img src="{{unit.image.one.url}}" />
		{% elseif unit.type == "blockYoutube" %}
		        ︙
		{% endif %}
	{% endfor %}
{% endif %}
```

ここで何故かテキストフィールドしか出力されない謎が発生
text,image,youtubeと各種登録したけど出ない

```twig
{{article | length}} ← 3と出てほしいのに1と出る
```

どうも冒頭のDescriptionの取得処理が悪さをしているらしく、
blockTextのフィルタが残ったままになっているような感じである

対策として後半のMatrixのall処理を以下のようにする

```twig
{% set article = entry.detail.type("*").all %}
```

type指定を「全て」となるようにワイルドカードを使う。

そういうもんだと言われると納得せざるを得ないがなんかモヤモヤする話だった…
Scala で A1 notation ( A1表記 ) の変換を実装してみた

# はじめに
仕事で Google SpreadSheet の操作を行う必要が出てきたため、こちらのエントリを参考に A1 notation の変換処理を実装してみた。

[A1表記と26進数]
(https://qiita.com/ttk1/items/83ed469cf62aebcc67ba)

# 実装
```scala:A1Notation.scala
object A1Notation {

  def toA1Notation(num: Int): String = {
    @scala.annotation.tailrec
    def tailrec(num: Int, z: String): String = {
      val str = ((num - 1) % 26 + 'A').toChar.toString + z
      if (num <= 26) str
      else tailrec((num - 1) / 26, str)
    }
    if (num > 0) tailrec(num, "")
    else throw new IllegalArgumentException("The argument is not within the range of A1 notation.")
  }

  def toA1Number(a1notation: String): Int = {
    if (a1notation.matches("[A-Z]+"))
      a1notation.toCharArray.reverse.zipWithIndex.foldLeft(0) {
        case (z, (char, index)) =>
          z + (((char - 'A') + 1) * Math.pow(26D, index).toInt)
      }
    else throw new IllegalArgumentException("The argument is not A1 notation.")
  }

}
```

見ての通り、冒頭で述べた列に対する変換の操作のみ。

# おわりに
上記を使った Google Spreadsheet に関する記事も書いてみるか...。
jsフレームワークstimulusでyahoo地図を操作してみた（その二）

[前回](https://qiita.com/wkya_4a/items/6e1224550ca0b7aed9d9)の続き。
今回参照したサイトは[こちら](https://www.javadrive.jp/google-maps-javascript/pan/index1.html)……というか今回は、このサイトの記述を
【stimulus使用＋「googlemap→yahoo地図」】
に書き換えただけです。


# やったこと、やる予定のこと
#### 0. [railsアプリへのstimulus適用](https://qiita.com/wkya_4a/items/e85bd6324fe4085dce0e)（以前書いた記事）
#### 1. [stimuluｓでyahoo地図を表示](https://qiita.com/wkya_4a/items/6e1224550ca0b7aed9d9)（前回）

#### ２. 表示した地図上で、指定座標に移動（←今ここ）
……今回は「指定座標」はコードに直接書いています。

#### 3. [住所から座標を取得し、それをDBに登録](https://qiita.com/wkya_4a/items/883ad988f2ad5cf58f55)

#### 4. [「3」で登録した情報を選択し、yahoo地図上でその場所に移動（最終回）](https://qiita.com/wkya_4a/items/3df3c39c0c779ce2f452)

ということで、[前回](https://qiita.com/wkya_4a/items/6e1224550ca0b7aed9d9)作成した地図上を移動できるようにしてみます。

##まずは、移動用のボタンを用意する。
```erb:app/views/users/test.html.erb

<div data-controller="moving">

<!-- 中略 -->
  <input type="button" id="tokyo" value="東京" data-action="click->moving#tokyo">

  <input type="button" id="shinbashi" value="新橋" data-action="click->moving#sinbasi">

  <input type="button" id="shinagawa" value="品川" data-action="click->moving#sinagawa">


</div>
```
ボタンを三個用意して、それぞれにデータアクション名を設定……「data-action="click->moving#tokyo"」（又は「sinbasi」「sinagawa」）
なおこの記述は、**【「data-controller="moving"」であるdiv要素内**で行う。


このアクション名設定により、ボタンクリックするとstimulusのアクションが発生するので……

##アクション発生時の処理をstimulus用jsファイルに記述
……前回作成したjsファイルに、

```js:app/javascript/controllers/moving_controller.js
  initialize() {

       this.map = new Y.Map(this.mapTarget.id);
       this.map.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);

       var center = new Y.CenterMarkControl
       var control = new Y.LayerSetControl();
       this.map.addControl(center);
       this.map.addControl(control);

  }

//↓追記
  tokyo() {
    this.map.panTo(new Y.LatLng(35.680865,139.767036), true);
  }

  sinbasi() {
    this.map.panTo(new Y.LatLng(35.666397,139.758153), true);
  }

  sinagawa() {
    this.map.panTo(new Y.LatLng(35.629867,139.74015), true);
  }
//↑追記

```

「35.680865,139.767036」などの座標は、参照サイトから写してきた実際の位置情報です。

これで実行してみると……（【20190624変更】yahooMapをそのまま貼り付けるのは問題がありそうなため、画像をモザイク付きのものに変更しました）
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3431303637342f62376533303163352d393731662d376538632d393335302d3934646530306363326561352e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410674/2b3559a4-6030-dfa3-4079-66cf92999967.png)


「東京」「新橋」「品川」のボタンが追加され、クリックするとそれぞれの場所に移動できるようになりました。

とりあえずは今回はここまで、続きは[こちら](https://qiita.com/wkya_4a/items/883ad988f2ad5cf58f55)です。
Next.jsで静的サイトを構築するやり方！

なぜNext.jsなのか
Gatsbyを利用すると色々便利なライブラリはあるが、そのおかげでライブラリの使い方をいちいち調べに行ったりで結構大変になる。(自分だけかも)
Next.jsは自分で構築していく感じがすごく必要最小限でわかりやすい。

Githubにソースコード置いておきました。
コード: https://github.com/usu-blog/nextjs-init

また公式の勉強できる環境が揃っているのでぜひ使ってください。
参考: https://nextjs.org/learn/

## 環境

```
.
├── README.md
├── next.config.js # 静的ビルドの設定ファイル
├── node_modules
├── out # 静的なアウトプット
├── package.json
├── pages # ソースコード
└── yarn.lock
```

`package.json`は以下です。  
環境に合わせて変更して使ってください

```json
{
  "dependencies": {
    "next": "^8.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "devDependencies": {}
}
```

## How to use
### 1. インストール

```bash
yarn
# 自分でやる場合
yarn add react react-dom next
```

### 2. ビルド

```bash
yarn build
```

### 3. 静的にビルド

```bash
yarn export
```

`export`に成功するとルートディレクトリに`out`というディレクトリが生成されます。
これが静的なサイトです。

```
yarn global add serve
cd out
serve -p 8080
```
ブラウザで`http://localhost:8080/`で確認できます。
![スクリーンショット 2019-05-24 15.21.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415529/5634f8f2-f4dd-25be-ec46-74036a153e57.png)


### 通常起動
通常に起動する場合なので、静的サイトにビルドしたい場合はいらない。

```bash
yarn start
```



## 静的サイトのビルドに必要なもの

ルートディレクトリに`next.config.js`を追加する必要がある。
サンプルの書き方を書いておきます。

```js
module.exports = {
  exportPathMap: function () {
    return {
      '/': {
        page: '/'
      },
      '/second': {
        page: '/second'
      }
    }
  }
}
```

ここから接続されるURLと表示するテンプレートを選択する。
また、ここで値を入れることもできるのでDBから取り出した値をここに入れることができそう。
Atomic Designを採用したnuxtで親から子コンポーネントのスタイルを使い分ける

# 対象
- nuxtないしVueをつかっている
- Atomic Designを使ってコンポーネントを分けたアプリをつくっている（Atominc Designに限らなくてもコンポーネントの共通化をしている）
- styleはscopedにしていて、コンポーネントを超えてcssを使い回していない
- Scssをつかっている（使っていない場合はcssをネストさせなければよいだけですが）

# やること
## 背景
- アプリの中で使うbuttonやlabelを共通化したい
- アプリ内ではbuttonやlabelの見た目はいくつかのパターンしかない
- しかし、横幅とかは使う場所によってまちまちである

## やりたいこと
- 見た目のパターンはそのコンポーネントの中に定義して、親コンポーネントからどのパターンかを指定したい
    - 同じスタイルを何度も書きたくはないため
- 横幅などは親コンポーネントからその都度値を指定したい
    - 微妙に変わる部分は子コンポーネントにいちいち定義していると限りがないため

## この記事でやってみること（つまり具体例）
- MyButtonというコンポーネントをつくる
- MyButtonは通常の見た目と、強調したい見た目を親から選んで指定する
- 通常、強調のどちらでも影付きボタンにできる
- MyButtonのwidthは親から直接指定する

# やり方
- Vueが用意している[クラスとスタイルのバインディング](https://jp.vuejs.org/v2/guide/class-and-style.html)をつかう
- htmlのセレクタに対して、`:class=`や`:style=`と属性を付与することで、クラスや個別のスタイルをバインディングできる

# 通常と強調を使い分ける
こんな感じのコンポーネントを作る

```MyButton.vue
<template>
  <!-- propsで受け取ったtypeをクラスにバインディングする -->
  <button class="MyButton" :class="type">
    <slot />
  </button>
</template>

<script>
export default {
  props: {
    // 適用したいスタイルを文字列のporpとして親から受け取る
    type: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.MyButton {
  <!-- 見た目のパターンをネスとしたクラスで定義する -->
  &._normal {
    background-color: white;
    border: solid 1px black;
  }

  &._strong {
    background-color: red;
    border: solid 1px black;
  }

  &._shadow {
    box-shadow: 0px 3px 6px 0px black;
  }
}
</style>
```

親からはこのように使用する

```Parent.vue
<template>
  <div>
    <!-- 適用したいクラスを文字列で指定する -->
    <my-button class="_nomal">
      通常ボタン
    </my-button>
    <my-button class="_strong">
      強調ボタン
    </my-button>
    <!-- クラスを二つ指定する時はスペースで区切る -->
    <my-button class="_nomal _shadow">
      影付き通常ボタン
    </my-button>
  </div>
</template>
```


# 横幅を指定する
先ほどのコンポーネントに`:style`属性を書き加える

```MyButton.vue
<template>
  <!-- propsで受け取ったwidthの値をwidthスタイルにバインディングする -->
  <button class="MyButton" :class="type" :style="{ width: width }">
    <slot />
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    // 適用したいスタイルの値を文字列のporpとして親から受け取る
    width: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.MyButton {
  <!-- こちらはそのまま -->
  &._normal {
    background-color: white;
    border: solid 1px black;
  }

  &._strong {
    background-color: red;
    border: solid 1px black;
  }

  &._shadow {
    box-shadow: 0px 3px 6px 0px black;
  }
}
</style>
```

親からはこのように使用する

```Parent.vue
<template>
  <div>
    <!-- 適用したい横幅の値を単位付きの文字列で指定する -->
    <my-button class="_nomal" width="100px">
      通常ボタン
    </my-button>
    <!-- 単位を自由に指定できる -->
    <my-button class="_strong" width="10%">
      強調ボタン
    </my-button>
  </div>
</template>
```


- `:style="{ width: width }"`は、`{ width: width }`の左側にスタイルを書いて、右側に値を書く
（要するに`:style="{ width: 10px }"`ということ）
- 複数のスタイルを指定したいときには`:style="{ width: hoge, height: fuga }"`のようにカンマで区切ればOK


# まとめ
クラスとスタイルのバインディングをうまく使って抽象的なコンポーネントを作れれば、その後が楽！



Twitterもやってるので、よければフォローお願いします。
→https://twitter.com/ObataGenta
AE ショートカット　メモ

ずっと使いたかったショートカットをようやく見つけた。

レイヤーのプロパティを表示させた時
必要なパラメータ以外は非表示にさせるショートカット。

![bandicam 2019-05-24 15-03-56-098.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178061/f5984502-0ea6-3d41-e64b-99441a327402.jpeg)

これを
![bandicam 2019-05-24 15-04-06-087.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178061/6c3e1041-b74e-2a0f-4349-bc0d4fad2d3e.jpeg)

こんな感じにしたい時は非表示にしたいパラメーターをALT+Shift+Clickで選択すると非表示になる。


#その他まとめていきます

| ShortCutKey       |       内容 |
|:-----------------|:------------------|
| Shift+Alt+(A,S,P)|Aであれば現在の位置にアンカーポイントのキープレームが打てる|
| Ctrl+(↑・↓)|選択レイヤーを選ぶ|
ファジィ推論とは　#１

#はじめに
ファジィ推論（制御）について、数回に分けて説明しようと思います。
今回は、ファジィ推論についての概要をざっくり説明します。

##ファジィとは
辞書によると、”あいまいな”や”境界のぼけた”という意味だそうです。
例えば、「暑い」「速い」「重い」など、主観的な感覚で使用する表現のことをファジィと言います。

##推論とは
推論とは、あるいくつかの命題（前提）から、一つの結論を導くことを指します。
基本は、アリストテレスの三段論法。

前提：ソクラテスは人間である。
前提：人間は死ぬ。
結論：よって、ソクラテスは死ぬ。

つまり、何らかの既知の事象から未知の事象を導くことを推論と言います。

#ファジィ推論とは
ファジィ推論は、人間の主観的な感覚や思考を数値化するために提案された手法です。
例えば、

前提：暑ければ、室温を下げる。
前提：暑い。
結論：室温を下げる。

といった推論があるとします。一見当たり前のような推論ですが、これはあいまいな推論です。
人によって暑さに対する感覚が違います。一般的に暑いと言われる気温は28℃から37℃ですが、それより低い気温から暑いと感じる人もいるでしょう。また、室温を何℃下げるのかも人によって違います。

そこで使われるのがファジィ推論です。

ファジィ推論では、「暑い」と「下げる」について、その度合いを表現します。つまり、暑さの度合いが0.8ならば、室温を下げる度合いは0.6であるといった表現も可能となるわけです。

##ファジィルール
ファジィ推論では、このような推論をIF - THEN形式（もし～ならば、～である）のルールにして表現します。
上の例では、

もし、暑ければ、室温を下げる

となります。一般形にすると、

もし　A　ならば　B　である

のようになります。また「もし～ならば」を前件部、「～である」を後件部を呼びます。
前件部は複数用いる場合が多いです。その場合、

もし、AがXで、BがYならば、CはZである

というような形になります。

ファジィ推論のルールは、対象の問題によって設計されます。また、ルールの個数も決まってはいません。
ここでは、3つのルールを設計しました。

①　もし、暑ければ、室温を下げる
②　もし、寒ければ、室温を上げる
③　もし、暑くもなく、寒くもなければ、室温はそのまま

この推論をもとに、暑い、寒いの度合いの決め方と室温を何℃上げるのか、下げるのかの演算についてまとめていきます。

#まとめ
今回は、ファジィ推論についてかなりざっくりまとめました。
とりあえず、ファジィ推論は主観的な表現を数値化するということを覚えていて欲しいです。
また、なぜ度合いが0.6や0.8なのかやその後の処理についての疑問があると思いますが、次以降に解説できたらなと思います。
React.unstable_ConcurrentModeの廃止について

## はじめに

去年の11月に[React 16.x Roadmap](https://reactjs.org/blog/2018/11/27/react-16-roadmap.html)が公開されて、次はConcurrent Modeの登場を待っている状態です。
少し前になりますが、これに関連して変更があったようです。

## React.unstable_ConcurrentMode

Concurrent Modeを試すには二通りの方法がありました。上記の記事から抜粋します。

```jsx
// Two ways to opt in:

// 1. Part of an app (not final API)
<React.unstable_ConcurrentMode>
  <Something />
</React.unstable_ConcurrentMode>

// 2. Whole app (not final API)
ReactDOM.unstable_createRoot(domNode).render(<App />);
```

この前者の方法が廃止されたとのことです。
詳しくは、 https://github.com/facebook/react/pull/15532 を参照してください。

部分的にConcurrent Modeを適用すると難しいケースがある上に、利用シーンも分からないということのようです。

今後は後者の`createRoot`を使うことになります。

## おわりに

自分のテストコードで複数の場所で使っているので、近いうちに修正しておかなければと思いました。
Tomcatで「サーバーの再起動があるかもしれません」と言われます

javaのeclipse 安定版2018-09 使用pcはThinkpad e585です。

サーバーを再起動しないと古いファイルを読み込んでいるのか
サーブレットやJSPファイルの変更箇所が反映されません。
表示する文字列を一文字だけ変更しても再起動が必要になります。
再起動を2回しないと反映されないこともあります。
また、何度か再起動をしていると「ポートが既に使用されています」というエラーがでます。
そのときにポート番号を変更しても、変更したポート番号で同じエラーがでます。

プログラミングスクールに通っているのですが、他の人は再起動なしで変更内容が反映されています。
スクールの指導者に尋ねても原因がわかりませんでした。
metadataの削除やeclipseをzipファイルから新しいものに入れなおしてみましたが改善されませんでした。

再起動なしで、もしくは再起動1回で変更内容が反映される方法がありましたら教えていただきたいです。