OmniAICreator/Qiita-1.07M huggingface dataset:
Qiitaにyoutube動画を埋め込む方法（2021/3/11のQiitaのアップデートで埋め込めるようになりました）

# Qiitaにyoutubeを埋め込む方法

##※追記
2021/3/11のQiitaのアップデートでyoutubeの埋め込みができるようになったので、埋め込み手順を追記しておきます。

（参考）[Qiita公式 リリースノート](https://qiita.com/release-notes#2021-03-11)


##埋め込み手順

###1. 埋め込みたい動画の右下にある「共有」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/ae513df3-5f61-4c3c-f76b-7b3f05e9c91c.png)

###2. 「埋め込む」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/4915dc96-0a1d-7c5c-6aef-b7fc650797e9.png)

###3. 表示されたソースコードをコピー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7781904e-f0ac-84d0-4d60-2de57f39cc13.png)

開始位置にチェックを入れると、時間を編集できるようになります。ここで開始時間を指定すれば、埋め込んだ動画がその時間から始まるようになります。

```
<iframe width="560" height="315" src="https://www.youtube.com/embed/aPvYI-nczXM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```

###4. youtubeの埋め込みでとってきたURLをQiitaにコピペ

<iframe width="560" height="315" src="https://www.youtube.com/embed/aPvYI-nczXM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

以上で埋め込み完了です。


###5.（補足）埋め込み用のURLが分かっている場合
共有用のリンクがわかっている場合は以下のコードのSRC属性にURLを記載すれば埋め込みできます。

```
<iframe width="560" height="315" src="URL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```

<br>
以上

<br>

***

<del>結論から言うと、youtubeの埋め込みはできない。</del>
代替はテキストリンク。


##youtubeへのリンク貼り方
**設置例**
[NBAジノビリのプレー集](https://youtu.be/Hlm6mkgGio4)

`[アンカーテキスト](URL)`

```:ソースコード
[NBAジノビリのプレー集](https://youtu.be/Hlm6mkgGio4)
```

>※youtubeのリンクはアクセスしているページのURLではなく、共有用のURL

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5985ed53-8f86-e4c5-e84b-62bd465c01ca.png)   |   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/4417e8a8-bb97-15be-7e20-786c6e11dcf4.png)|
|:-:|:-:|


<br>
##iframeによる埋め込み（※使えない）

↓↓↓ここにiframeタグ貼り付けてる
<iframe width="560" height="315" src="https://www.youtube.com/embed/k6xdt12hrV0?start=73" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
↑↑↑ここまで

↓↓↓↓↓↓↓ あなたの記事の内容
```html
:ソースコード
───────
```html:ソースコード
↑↑↑↑↑↑↑ 編集リクエストの内容
<iframe width="560" height="315" src="https://www.youtube.com/embed/k6xdt12hrV0?start=73" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```

iframeは表示されない


<br>
##画像形式の埋め込み（※使えない）

![NBAジノビリのプレー集](https://youtu.be/Hlm6mkgGio4)　：not foundになる


```:ソースコード
![NBAジノビリのプレー集](https://youtu.be/Hlm6mkgGio4)　
```


##まとめ
おとなしくテキストリンクで設置
MEMO：update mysql.user set password=PASSWORD('')が使えない時の解決法

#概要
mariaDBでrootのパスワードがわからなくなった。
【update mysql.user set password=PASSWORD('')】
を実行したところ実行できなかった。

#解決方法
こっちを使えばいいみたい
【alter user 'root'@'localhost' identified BY ''】
BYの後の''の間に新しく設定するパスワードを入力

#詳細手順
1.mariaDB停止
　mac:【mysql.server stop】
2.セーフモード起動
　mac【mysql.server start --skip-grant-tables】
3.mariaDB接続
4.【use mysql;】実行
5.【alter user 'root'@'localhost' identified BY ''】
6.mariaDBを再起動する
JISキーボードのMacでバックスラッシュを入力する (Emacs用設定付き)

問題の背景を理解している人は[本編](#karabiner-elementsでキーの挙動を変更する)に飛んでください。

(追記: 投稿して満足したところで、もっとずっと簡単な方法を発見してしまった。むなしい。 [~/Library/KeyBindings/DefaultKeyBinding.dict によるキーバインドの変更](https://texwiki.texjp.org/?Mac#defaultkeybinding-dict))

# 想定する環境

この問題への対応は、環境依存性が高いですので、最初にこの記事が前提とする環境を書いておきます。

- macOS 10.13 (Mojave)
- MacBook (JISキーボード)
- Karabiner-Elements 12.9.0
- Emacs 26 for Mac OS X (パッチ無し)

# 背景

JISキーボードには \ (バックスラッシュ) のキーがありません。UNIXユーザ、プログラマにとって、これは大変不便です。
一方、JISキーボードには ¥ (円記号) のキーがあります。¥ (円記号; U+00A5) は呪われた文字です。
Windowsでは、¥ (円記号) と \ (バックスラッシュ)が同一視されることが多いようですが、これらは元々 JIS X 0201 と US-ASCII という別の文字集合に属するもので、同一視がそもそも間違っています。MS-DOSが採用したMS漢字コードにおいて、1バイト文字として表現されるのは US-ASCII でなく JIS X 0201 であったが、テキストファイルだけからどちらの文字集合であるかは区別できないため、C言語のソースコードなどで使われる \ (バックスラッシュ)は画面上では ¥ (円記号)のように文字化けしてしまっていました。この現象を正しく文字化けと認識せず、\ (バックスラッシュ)を ¥ (円記号)と読み換えようなどと、対応をなあなあにして来たことが、我が国にとって永遠の禍根を残すことになります。

macOSは ¥ (円記号) と \ (バックスラッシュ)を区別します。したがって、JISキーボード上の ¥ (円記号) のキーを押すと ¥ (円記号) が入力されます。これはたいへん正しい処理ですが、実用的には不便です。¥ (円記号; U+00A5) は実際にはほとんど使用されておらず、逆に \ (バックスラッシュ)はUNIXやプログラミングでは最も重要な文字の1つだからです。

ことえり、そして Google 日本語入力には、¥キーで入力する文字をバックスラッシュ (\\) に変更する機能があります。したがって、これらの機能で満足できる人はこの記事を読む必要がありません。

# Karabiner-Elementsで¥キーの挙動を変更する
原理的には、[Karabiner-Elements](https://pqrs.org/osx/karabiner/) で "International 3" (¥キーに対応)を \ キーに変更するだけで良さそうですが、私の環境ではうまく行きませんでした。[Karabiner-ElementsでJISキーボードがUSキーボードとして認識される問題](Karabiner-ElementsでJISキーボードがUSキーボードとして認識される問題)のように見えますが、Country codeを45にしても変化ありません。

JISキーボードでは、Option+¥ で \ (バックスラッシュ)を入力することができます。そこで、以下のようにして¥キーを押すとOption+¥が押されたようにします。
(参考: [JIS配列のMacで、バックスラッシュをさくっと入力する方法(JetBrainsのIDE対応)](https://qiita.com/kunit/items/f6ec7e159d93002bfc48)

1. Karabiner-Elements の Complex modifications タブから Add rule ボタンを押す
2. Import more rules from internet (open a web browser) ボタンを押す
3. "Swap ¥ and \ always on JIS Keyboards" というルールを Import する
4. Change ¥ to Alt+¥ ルールを Enable する

# Emacsの設定
上記設定で大概はOKですが、Emacsでは駄目です。¥キーを押しても "M-¥ is undefined" と叱られてしまいます。
¥キーで \ (バックスラッシュ)が入るようにするためには、init.el の中で次のように設定します。なお、私のように ns-command-modifier と ns-alternate-modifier を設定して Command キーと Option キーを入れ換えている人は、M-¥ でなく s-¥ としてください。

```emacs-lisp
(define-key global-map [?\M-¥] [?\\])
```

実はこれだけではまだ不十分で、インクリメンタルサーチがうまく動きません。インクリメンタルサーチを使っていない人(いないと思うが…)以外は、以下の設定も追加しましょう。

```emacs-lisp
(defun isearch-add-backslash()
  (interactive)
  (isearch-printing-char ?\\ 1))
(define-key isearch-mode-map [?\M-¥] 'isearch-add-backslash)
```

これですっきり。コーディングもはかどりますね。
Nuxt.jsのpagesでコンポーネントを定義する方法（２パターン）

# 環境
- Nuxt.js
- Vue.jp

# ディレクトリ構成

```
my-project/
├ components
│ └ OriginalDialog.vue
├ pages
│ └ index.vue
└ 以下省略
```

# コンポーネント定義（パターン１）

よくみるコーディング


```index.vue

<original-dialog ref="originalDialog" />

<script>
import OriginalDialog from '@/components/OriginalDialog'

export default {
  components: {
    OriginalDialog
  },
</script>
```

# コンポーネント定義（パターン２）

すっきりしたコーディング

```index.vue

<original-dialog ref="originalDialog" />

<script>
export default {
  components:{
    originalDialog: () => import('@/components/OriginalDialog'),
  }
</script>
```
Nuxt.jsでpug,scssを導入する手順

個人的な備忘録として。

## npmで必要なパッケージをインストール
```
// pug
$ npm i --save-dev pug pug-loader pug-plain-loader
## " --save-dev"はアプリでのみ使用できる形でインストールする、という意味

## インストール完了後、下記が表示される
+ pug@2.0.4
+ pug-loader@2.4.0
+ pug-plain-loader@1.0.0
added 49 packages from 90 contributors and audited 901646 packages in 16.945s

47 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

// scss

$ npm i --save-dev node-sass sass-loader

## インストール完了後、下記が表示される
+ sass-loader@8.0.2
+ node-sass@4.13.1
added 97 packages from 54 contributors, updated 1 package and audited 902192 packages in 28.621s

48 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```
Github　普通じゃないコンフリクト解決方法

#経緯

githubでプルリクエストを送りマージしようとしたが、コンフリクトが起きて、、、

#状況

vscで、コンフリクトしている場所が表示されない
gitのwebで、コンフリクトが起きている場所を表示しない

##解決方法

解決したがこれが正しい方法か不明です

①マスターブランチの情報をロウカルのマージしたいブランチに取り込む

```
 git checkout 作業しているブランチ
 git pull https://github.com/ユーザー名/ファイル master
```

②マウターブランチにマージしたいとコマンドを入力

```
git merge https://github.com/ユーザー名/ファイル master
```

すると下記のエラーが表示されてvscでコンフリクトを解消する事ができました

<img width="678" alt="スクリーンショット 2020-03-16 13.19.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538355/76b3fb6a-fc15-b556-ce74-ce761bcbf82b.png">

#追記

このやり方が正解なのかわかりませんが、私が調べた中でコンフリクトが起きている場所がわからないといった解決方法を記したサイトがなかったです

もし、もっと効率がいい解決方法がありましたら、お教えいただけると幸いです
$ brew doctor すると A newer Command Line Tools release is available. と警告が出たときの対処法

日本語ソースの記事が少なかったのでケース共有します。

Homebrewを使ったインストールを行う際に、$ brew doctorで警告が出ました。

``` Terminal
$ brew doctor

Please note that these warnings are just used to help the Homebrew maintainers
with debugging if you file an issue. If everything you use Homebrew for is
working fine: please don't worry or file an issue; just ignore this. Thanks!

Warning: A newer Command Line Tools release is available.
Update them from Software Update in System Preferences or
https://developer.apple.com/download/more/.
```

`アップデートしてね`ということなので、言われるがままアップロード。

```
$ softwareupdate --list

Software Update Tool

Finding available software
No new software available.
```
![PixelSnap 2020-03-16 at 12.49.47@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532774/eeb1e114-b3eb-2cf5-fd96-29d6ca05dc1b.png)

`アップデートないよ`と言われて困りました。


困ったときのグーグル先生ということでエラー文`Warning: A newer Command Line Tools release is available.`で検索すると、以下の英語掲示板に出逢いました。

[Brew doctor warns about “Warning: A newer Command Line Tools release is available”](https://discourse.brew.sh/t/brew-doctor-warns-about-warning-a-newer-command-line-tools-release-is-available/6370)

同じ症状だったので読み進め試していくと、最後に解決に至るレスがありました。

>I also had the same issue and had nothing showing in system updates, so I downloaded the “Command Line Tools for Xcode 11.3” from the Apple Developer Downloads 58.

>Installed them and re-running brew doctor I no longer get the “newer Command Line Tools” warning.


[ここ（Apple Developer Downloads）](https://developer.apple.com/download/more/)で”Command Line Tools for Xcode 11.3”を探してインストールしたら治ったよ


![PixelSnap 2020-03-16 at 12.56.56@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532774/7b01b573-34ad-2464-5c01-b6f6b45077a0.png)

ということで、URL先の最新版のCommand Line Toolsを再インストールすると、
症状は改善しました。
ドロップダウン リスト用の範囲はテーブル化すると、自動で範囲が拡張されて余計なひと手間が省ける

# 前置き
ドロップダウン リストを使いたい時に変数用のシートに名前付きの範囲を作成し、データの入力規則でリストとして指定する運用は広く行われていることと思う。ここにデータを追加する場合、自然に考えれば末尾に追加したいところであるが、名前付き範囲は末尾にデータを追加してもドロップダウン リストには反映されないため、ドロップダウン リストに反映させるための余計なひと手間が必要になってしまう。

# 概要
データの範囲をテーブル化しておくと、データを末尾に追加してもドロップダウン リストに自動で反映されるよ、というTIPS。

# 検証
#### 事前準備
ドロップダウン リスト用の値の一覧を2つ用意した。A列では `$A$3:$A$5` の範囲に名前を付けており、B列では `$B$2:$B$5` の範囲をヘッダーありのテーブルに変換している。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286440/e808dde0-9ca9-c529-d282-27c20370964c.png)

A列用のデータの入力規則は以下のように設定している。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286440/60d240b7-2fc3-0b38-4dec-745858c4ab40.png)

B列用はこちら。テーブルを参照させる場合はINDIRECT関数を使わなければいけない点に留意。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286440/959ebae1-7d24-cc06-1efa-894c41d1ec04.png)

それぞれ以下のようなドロップダウン リストになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286440/30560879-855f-d40d-73f5-87d15f0e89cf.png)

#### 値を末尾に追加
それぞれの一覧の末尾にデータを追加し、ドロップダウン リストの変化を確認してみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286440/6f3d2171-2ebe-3cde-8bab-0d4181e9bb51.png)

確認の前に、画面上で確認できる変化について触れておこう。青い線が囲んでいる範囲が `$B$2:$B$5` から `$B$2:$B$6` に拡張され、 「日本酒」のセルの右下に付いていた `┛` が「ウイスキー」のセルに移動している。これはテーブルの末尾にデータを追加した場合はオートコンプリートが働き、自動でテーブルが拡張されたためである。

本筋に戻って、A列のドロップダウン リストの値を確認してみる。名前として定義した範囲が `$A$3:$A$5` なので、この範囲の外で起こるデータの増減はリストに反映されていない。対策として、範囲の間に行を追加してデータを挿入（＋必要であればデータの順番を修正）している人が多いのではないだろうか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286440/9d4173bd-d450-7c83-d638-44364b43505a.png)

一方のB列はテーブルの自動拡張の恩恵を受け、追加した値がドロップダウン リストに反映されている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286440/78ca03ae-ed64-b375-8626-b5cfae06268b.png)

# 考察
長らく使っていた名前付き範囲を使う手法は、「範囲の間に行を追加して～」というバッドノウハウを常に頭の片隅に置いておかなければならないという地味な負担があった。テーブルを使うことにより、データを末尾に追加していくという自然な運用を実現でき、バッドノウハウが不要になった。テーブルを使う利点は他にも数多くあるため、よく調べて使いこなせるようになろう。
JavaScriptでオブジェクト（≒連想配列）をフィルタリングしたい

# オブジェクト（≒連想配列）をフィルタリングしたい

たとえば、以下のようなオブジェクトがあるとします。

```javascript
const objInput = {
  hoge: 'hogehoge',
  fuga: 'fugafuga',
  piyo: 'piyopiyo'
};
```

`hoge` と `fuga` のみを残した以下のような新しいオブジェクトを作るのが今回の目的です。

```javascript
const objOutput = {
  hoge: 'hogehoge',
  fuga: 'fugafuga'
}
```

ようするに `hoge` と `fuga` の要素だけを抽出したいんです。



# 手法A：べた書きする

`hoge` と `fuga` をべた書きする方法です。

```javascript
const objOutput = {
    hoge: objInput['hoge'],
    fuga: objInput['fuga']
};
```

うん、とてもシンプル！

`hoge` や `fuga` というキー名が固定なのであれば、この書き方がわかりやすいと思います。

ただ、フィルタリングしたいキー名が状況に応じて変わる場合、この書き方は使えません。。。



# 手法B：forEachを使う

以下のようにフィルタリングしたいキー名のリストがある場合を考えます。

```javascript
const keyList = ['hoge', 'fuga'];
```

この `keyList` の要素を `forEach` で巡ってみます。

```javascript
// 出力オブジェクトを空オブジェクトで初期化します。
const objOutput = {};

// 抽出する要素の一覧で繰り返し
keyList.forEach((key) => {
    // 出力オブジェクトにキーを追加して、値を代入
    objOutput[key] = objInput[key];
});
```

この書き方もそこそこシンプルだと思います。

`forEach` さえ知っていれば、読めるので、他の人にコードを引き継ぐときの混乱も少なそうです。

ただ、最初に `const` で宣言している `objOutput` に後から要素を追加していくのは、少しリスクを感じなくもないです。



# 手法C：reduceを使う

今度は `keyList` の要素を `reduce` で巡ってみます。

```javascript
// 出力オブジェクトをreduceの結果で初期化します。
const objOutput = keyList.reduce((objAcc, key) => {
    // 累積オブジェクトにキーを追加して、値を代入
    objAcc[key] = objInput[key];
    // 累積オブジェクトを更新
    return objAcc;
}, {});
```

この書き方は万人受けしないと思いますが、個人的には好きです。

`objOutput ` を、宣言と同時に、 `reduce` の結果で初期化しているので、良い感じです。

ただ、 `reduce` を知らないと読めないので、コードレビューとかの際に、揉めるかもしれません。



# 最後に

「他にもこんな書き方あるよ！」というのがあれば、是非コメントとかで教えてください！

本記事作成にあたり、以下を参考にしました。ありがとうございました。

- [MDN web docs / Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
- [JavaScriptでforEach, filter, map, reduceとか](https://qiita.com/itagakishintaro/items/29e301f3125760b81302)
外部キー制約のついたカラムを削除したい

外部キー制約の付いたカラムを削除するのにプチハマりしたのでまとめます

## 参考

こちらの記事でマイグレーションについてかなり詳しくまとめられています
マイグレーションの操作をするときは、こちらの記事で該当箇所をざっと読んでから公式ドキュメントに目を通すのが良さそう
https://pikawaka.com/rails/migration

## 例）ベストアンサー機能

- questionモデル内に、ベストアンサーに選ばれた回答を保存するためのbestカラムがある
- bestカラムには外部キーが設定してある（answersテーブル)

という状況

```ruby:db/schema.rb
create_table "questions", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8" do |t|
  t.bigint "best"
  t.index ["best"], name: "fk_rails_dd35f91b0c"
end

add_foreign_key "questions", "answers", column: "best"
```

## 実践
まずはカラム削除用のマイグレーションファイルを作成する


```terminal
$rails g migration RemoveBestFromQuestions
```

マイグレーションファイルが生成

```ruby:db/migrate/xxxx_remove_best_from_questions.rb
class RemoveBestFromQuestions < ActiveRecord::Migration[5.1]
  def change
  end
end
```

こちらにカラムを削除するための記述を追加していく
外部キーとインデックスを貼っているので、カラムを削除する記述だけではエラーが発生してしまう
それらを削除する記述も必要っぽい


```ruby:db/migrate/xxxx_remove_best_from_questions.rb

class RemoveBestFromQuestions < ActiveRecord::Migration[5.1]
  def change
    remove_foreign_key :questions, :answers
    remove_index :questions, :best
    remove_column :questions, :best, :bigint
  end
end
```
これで`rails db:migrate`を実行すればOK

## 最後に

間違っている部分があれば遠慮なくご指摘ください
GitHubのファイルサイズ超過エラーについて

# はじめに
この記事は、過去 `GitBucket` から `GitHub` への移行時に、
ファイルサイズ超過エラーが発生した際の対応方法を記述した記事になります。
他の方も書いている内容にはなりますが、どなたかの一助になれば幸いです。

# 注意点
この記事の手法を使うとGitリポジトリの履歴を書き換えることになり、
他メンバーが対象リポジトリをクローンしていると、整合性が合わなくなってしまいます。
自身のケースでは `GitBucket` から `GitHub` への移行という、完全クリーンな状態で
実施した内容にはなりますので、その点ご留意ください。

# どんなエラーか
下記のエラーです。

``` bash
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
```

# エラーの原因
文言通りですが、ファイルサイズ超過のエラーです。
GitHubでは100MB超えのファイルを保存することができないため(Git LFSを使用すれば可能)、
GitHubへのPUSH時にエラーになる現象となります。
`Git LFS` については下記の方が解説くださっていますので、ここでは省きます。
https://qiita.com/ikmski/items/5cc8b8832336b8d85429

# 対策方法
## 対象ファイルを検索
まずは、リポジトリ内で下記のコマンドを実行し、100MB超えのファイルを検索します。

```bash
% find . -size +100M -ls
XXXXXXXX XXXXXXX -rw-r--r--    1 user group 316274484  3  16 12:00 ./hoge.zip
```

## 対象ファイルを履歴から削除
自身のケースでは、対象ファイルがGit管理不要なもの(そもそもそんなものを追加するなって思いますが)だったので、
Git履歴から全て削除を行いました。
`git filter-branch` という非常に破壊的なコマンドがあるので、そちらを利用しました。
簡潔にいうと `git filter-branch` は大量のコミット履歴を一括で書き換えることのできるコマンドになります。
パスワードやキー情報を誤ってコミットしてしまった履歴や、今回のようなエラーの発生時が主なユースケースになると思います。
(とはいってもかなり破壊的なコマンドなので、可能なら使いたくない・・・。)

```bash
git filter-branch -f --index-filter 'git rm --cached --ignore-unmatch ./hoge.zip' HEAD
```

## 現在の内容をPUSH
履歴の削除後、現在の状況を強制的にPUSHします。
(developブランチの場合)

```bash
git push -f origin develop
```

これで履歴から100MB超えのファイルが削除され、 `GitHub` への移行が可能なはずです。
また、この手順は公式が出している下記の記事が参考になるかもしれません。
[機密データをリポジトリから削除する](https://help.github.com/ja/github/authenticating-to-github/removing-sensitive-data-from-a-repository)

# 最後に
`git filter-branch ` は使いどころをちゃんと考えたいコマンドですが、
使い方さえ誤らなければ非常に便利なコマンドだと思います。
そもそも使う必要がある状況に陥らないことが最優先だと思いますが・・・。

git、痒いところに手が届く感じがすごく便利です。

# 共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくは[Wantedly](https://www.wantedly.com/projects/134741)からお問い合わせください。
【Day21】積み上げ日記

＜予定＞
○Progate
- jQuery 初級

○ローカル環境構築

○デイトラDAY9,10,11,12

＜内容＞
○Progate
- JQUERY 初級

＜学習時間＞
2h

＜間違えた箇所＞
○jQueryのイベント指定で使われるfunctionの意味がわからない

＜学んだところ＞
○emmetを使いこなすと、効率よくコードをかける
【Day20】積み上げ日記

＜予定＞
○Progate
- jQuery 初級

＜内容＞
○Progate
- JQUERY 初級

＜学習時間＞
2h

＜計画通り進んだか？＞

＜間違えた箇所＞
○jQueryのイベント指定で使われるfunctionの意味がわからない


＜学んだところ＞
○class と id

○id はセレクタに、. → ＃をつける。
 .list {    →    #list {

○メソッド
・hide
・show
・fadeOut
・slideUp
jsで戻るボタンを作成した

最初はphpでパラメーターに引数を渡して戻るボタンを作成したようと思ったが、jsの方が簡単だった。
バックエンドがphpでjsで戻るボタンを作成したときに、参考にした記事
[JavaScriptやPHPで1つ前のページに戻るボタンを設置する](https://blanche-toile.com/web/history-back)

```html
//onclick処理
<input value="前に戻る" onclick="history.back();" type="button">
 
//href属性に設定
<a href="javascript:history.back()">前に戻る</a>
```
【Day19】積み上げ日記

＜予定＞
○Progate
- HTML＆CSS学習コース上級
- HTML＆CSS学習コースflex box

＜内容＞
○Progate
- HTML＆CSS学習コース上級
　– レスポンシブデザインの実装
- JQUERY 初級

＜学習時間＞
2h

＜間違えた箇所＞
○fa fa-bars ？？？

○spanタグの使い所

＜学んだところ＞
○要素の横並び：display: flex

○要素を最大幅まで広げる：flex: auto

○要素を折り返したい：flex-wrap: wrap

○要素を縦に並べたい：flex-direction: column
【Day18】積み上げ日記

＜予定＞
○Progate
- HTML＆CSS学習コース上級

＜内容＞
○Progate
- HTML＆CSS学習コース上級
　- メディアクエリ
　  ‐　box-sizing
　– レスポンシブデザインの実装
　
＜学習時間＞
2h

＜間違えた箇所＞
○box-sizing: border-box; の仕組みがよくわからない。

＜学んだところ＞
○responsive.cssを読み込む際には、必ずviewportよりも下の行に記述する

○画面幅にサイズを合わせる：width:100%

○float の解除：clearクラス
未定義の場合実行しないforeachを、なるべくシンプルに書いてみる

# 目的

- `PHP Warning:  Invalid argument supplied for foreach()`を起こさない
- 予め空配列を定義するのもなんか嫌
- でも定義されているときはforeachを実行してほしい

# 対策

```php
// $array をstring型の配列と仮定します
foreach($array as $key => $value){
    echo $value;
}
// => PHP Warning:  Invalid argument supplied for foreach()

// 対策
if(isset($array)) foreach($array as $key => $value){
    echo $value;
}
// => エラーも起きず、何も出力されない

$array = ['a', 'b', 'c'];
// $array をstring型の配列と仮定します
if(isset($array)) foreach($array as $key => $value){
    echo $value;
}
// => abc
```

# 課題点
- そもそも未定義かもしれない変数を使う構造の是非
- `isset()`関数の仕様上、NULLと未定義を区別できない（らしい）


アルバイト中、if文とforeach文を1行にまとめられるのか気になったので調べてみました。

「こういうのもあるよ！」とか「やめたほうがいいよ！」などありましたらコメントお願いします。🙇‍♂️(お手柔らかに)
【Day17】積み上げ日記

＜予定＞
○Progate
- JS学習コースⅲ
- HTML＆CSS学習コース上級

＜内容＞
○Progate
- JS学習コースⅲ
　− 関数の代入
　− アロー関数
　− 引数
- HTML＆CSS学習コース上級
　- メディアクエリ

　
＜学習時間＞
2h

＜間違えた箇所＞
○””と｀｀の使い所がわからない！
テンプレートリテラルの時だけ、｀｀を使う！

＜学んだこと＞
○function = アロー関数「() =>」

○テンプレートリテラル

○メディアクエリ：@media (条件) { .... }
メディアクエリの条件には、max-width(最大幅)、またはmin-width(最小幅)を指定できる。
[Rails] Mechanizeがファイルディスクリプタを大量に消費してしまう

内容はタイトル通り。
Railsにて、Mysql2のConnectionError出てる場合とか
ファイルディスクリプタを異常に使いまくってる場合はもしかしたら関係あるかも。

### 経緯
とあるサービス(Rails,puma)にて

```
Mysql2::Error::ConnectionError
```

が多発してサービスが利用できなくなる障害が発生しました。

詳しくログを追ってみると他にも

```
Errno::EMFILE (Too many open files @ rb_sysopen ...(略)
```

のようなエラーも発生している様子。

さらに、、、

```
# ファイルディスクリプタ上限確認
ulimit -n
# pumaプロセスのファイルディスクリプタ確認
for i in $(ps aux | grep "[p]uma" | awk '{print $2}'); do sudo ls /proc/$i/fd | wc -l; done
```
上記コマンドでプロセスの開いてるファイル数を確認してみたら
どうやらファイルディスクリプタがいっぱいになっているようだった。

### 原因
実は、ファイルを開いているわけではなくてアプリケーションで使用していた **Mechanize** というgemにて
外部からデータを取得する際にコネクションを作成していた様子。
（スクレイピングとかするときに使われてるgemらしい。）


ファイルディスクリプタでは、ファイルだけでなく**コネクションもカウントされる**ようで
大量のコネクションが削除されずに作成され続けたことで問題が発生した。
(Mysqlも多分コネクション関係？？ 詳しい人コメントお願いします。)

### 対応
単純に、コネクションが開いたままになっていることが問題。
閉じてあげる必要がある。

Mechanizeのコネクションは以下のメソッドを呼び出すと閉じてくれるらしいので
使用中のコネクションの最後の処理が終わったあたりで呼び出してあげる。

```
Mechanize.shutdown
```

あとは、サーバー再起動などで既存コネクションを消してあげましょう。
【Day16】積み上げ日記

＜予定＞
○Progate
- JS学習コースⅡ

＜内容＞
○Progate
- JS学習コース Ⅱ
　- オブジェクト


＜間違えた箇所＞
○セミコロンつけ忘れ！

○インデックス番号指定するときに、[ ] をつけ忘れている！

○文字列の連結とテンプレートリテラルが使えていない！
＋で文字をつなげるか、${}でつなげるかの違い！

○for文がさっぱりわからない！

○プロパティに配列を代入する仕組みがわからない！


＜学んだこと＞
○オブジェクト：配列と同じく複数のデータをまとめて管理する
 配列　　　  ：値１, 値２, 値３,
オブジェクト：プロパティ１：値１, プロパティ２：値２

○「名前は〇〇です」
console.log(`名前は${character.name}です`);

○undefined：存在しないインデックス番号やプロパティを指定すると出力される

○for文
for (変数の初期処理; 繰り返し条件; 繰り返し終了時の処理)
【Day15】積み上げ日記

＜予定＞
○Progate
- JS学習コースⅡ

＜内容＞
○Progate
- JS学習コース Ⅱ
　- for文
　- 繰り返し処理のまとめ
　- 配列とは
　- 配列の要素取得（インデックス番号）
　- 配列の要素更新
　- 配列と繰り返し

＜間違えた箇所＞
○繰り返し処理のまとめ
「％　３」の意味がわからない。

＜学んだこと＞
○for文　＝　while文
for (let number = 1; number <=100; number = number + 1 {
Console.log(number)
}

○３の倍数の式
Number % 3 === 0 

○配列
const animals = [“dog”, “cat”, “sheep”];

○配列とfor文、length
for (let i = 0; i < fruits.length; I++) {
C++でメモリリークに困った時の対処法。

## 概要
C++で開発をするときに、メモリリークを確認しているが、どこでリークしているのかわからない。
そういうときに、g++の標準装備でどこがメモリリークしているかをチェックできます。

## 状況説明
簡単な例でいうと、

```test.cpp
int main() {
  int *a = new int[10];
}
```
このように```new演算子```をもちいてメモリを確保しているのにも関わらず、```delete a```
を書き忘れている。（これは見ただけですぐわかるメモリリークだが、実際はコード構造が複雑で、どこでリークしているかわからないこともしばしば。）

これを実行すると、```a```として確保されたメモリが解放されず、メモリリークとなる。コンパイルエラー、プログラム実行時のエラーいずれも起こらない。


## 対処法
### AddressSanitizer というツールを使う
コンパイルオプションを付け加えるだけでメモリリークを検出してくれるので、便利です。

実際にコンパイルする時のコマンドは、
``` g++ -fsanitize=address -fno-omit-frame-pointer -g test.cpp ```
 です。その後にプログラムを```./a.out```で走らせると、
<img width="912" alt="Screen Shot 2020-03-14 at 20.28.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/a115028f-6e1a-8330-5dcf-1959c5d08c2b.png">

となります。

```bash
#0 0x7fa3f0a33618 in operator new[](unsigned long)
#1 0x5604a079d7fb in main /from_local/test.cpp:2
```
のところを見ると、test.cpp の２行目でメモリを```new演算子```で確保したところでメモリリークしていることが確認できます。
もう少し複雑に絡み合った構成でも、このように的確にメモリリークの原因を出力してくれます。

## まとめ
今回はC++での開発時にやっかいな問題であるメモリリークの解消方法の１つとして、**AddressSanitizer**を用いた例を紹介しました。
もしメモリリークに悩んでいる時があったら、コンパイルオプションを使って簡単に確認できるのでぜひ試して見てください。


おわり。
git init~pushまでの手順方法

ポートフォリオ作りのために初めてgit管理してみたのでメモ。
投稿主の環境
1.aws cloud9（デフォルトでgit導入済み）
2.windows
3.bitbucket

手順としては
1.git init
2.git add
3.git status
4.git commit
5.git log

#1.git init
操作しているアプリケーションのルートディレクトリに移動してからgit initでそのディレクトリをgitの管理対象（初期化）にする。

```ruby:git_init
cd ルートディレクトリ名/
git init
Initialized empty Git repository in ~~
```
自分がgit initするときに出てきた（エラー？）メッセージは

```ruby:git_init
Reinitialized existing Git repository in ~~
```
これはすでにあるものをもう一回初期化しましたという意味だそう。(特になにかをする必要ないと思われる。）

#2.git add
git add ファイル名で対象のファイルをリポジトリに移動。

```ruby:git_add
git add ファイル名
```
ちなみにgit add -A実行するとそのディレクトリにあるファイル全てがリポジトリに追加されます。

```ruby:git_add
git add -A
```
#3.git status
git addでgitにファイルを追加をしようとしてもこの段階ではまだ追加はされていません。というのも、間違って直gitに追加してしまわないようにするためです。
そのため、git addを実行すると、ファイルは一時保存のような状態になります（ステージングという待機用リポジトリへ移動）。
わかりやすく言うと、git add => ステージング（一時保存）=> 反映といった3段階になっています。
git statusでは、ステージングの状態を確認することができます。

```ruby:git_status
git status
```
#4.git commit
ステージングにあるファイルを反映（コミット）するためにgit commit -m "メッセージ"を実行します。

```ruby:git_commit
git commit -m "メッセージ"
```
このメッセージはgitを使った共同開発で何をしたかをわかりやすくするためのものみたいです。
#5.git log
git logでgit commit -m "メッセージ"のメッセージの履歴を確認することができます。履歴が長いときは"q"を押して解除できます。
#bitbucketに反映
1~5実行後にgit pushを実行するとbitbucketに反映されます。
#最後に
初学者ながら自身の経験を投稿してみました。gitのやり方がよくわかっていなかったのでメモとしてアウトプット。少しでも参考になればと思います。
【Windows】ROBOCOPYで未更新のファイルが「更新済み」として表示され「コピー済み」にカウントされる事象

ROBOCOPYで未更新のファイルが「更新済み」として表示され「コピー済み」にカウントされる事象について記載しています。

# 詳細

+ **事象**
ROBOCOPYで未更新のファイルが「更新済み」としてログに表示され「コピー済み」にカウントされる

+ **検証環境**
Windows Server 2016

+ **発生条件**
/SECFIX オプションつきでの実行時

+ **解消法**
1.　/SECFIX オプションを外して実行をする
2.　/M オプションを付与して実行する

|オプション|説明|
|:--|:--|
|/SECFIX|スキップしたファイルも含むすべてのファイルのファイルセキュリティを修正|
|/M|アーカイブ属性のあるファイルのみコピーしリセット|

# コマンド例

```console:/SECFIXを実行しない例
robocopy "Source:\" "Destination:\Directory" /MIR /B /COPYALL /NP /R:0 /W:0 /XA:S /XD "Source:\System Volume Information" "Source:\$RECYCLE.BIN" /log+:C:\log\%date:~0,4%-%date:~5,2%-%date:~8,2%_log.txt
```



|オプション|説明|
|:---|:--|
|/MIR|ディレクトリツリーをミラー化|
|/B|バックアップモードでコピー<br>※実行ユーザーに対して、コピー元先のBackup Operators権限が必要|
|/COPYALL|セキュリティ情報を含むファイル情報を全てコピー|
|/NP|ログに進行状況を記載しない|
|/XA:|指定した属性のファイルを除外|
|/XD:|指定した名前/パスに一致するディレクトリを除外|
|/R:n|コピー失敗時の再試行回数（既定1,000,000）|
|/W:n|再試行まで待機時間n秒（既定30秒）|
|/LOG+:ファイルパス|実行ログをファイルに追加出力|

# 参考

[StackExchange](https://serverfault.com/questions/828467/robocopy-all-data-marked-as-modified)
[Note of Windows Admin](https://winadminnotes.wordpress.com/2017/07/18/robocopy-detects-files-as-modified/)
wikipediaからワードクラウドを作成するツールを作った

http://www.minekawada.com/kawaminee/wordcloud/%E3%82%A2%E3%83%B3%E3%83%91%E3%83%B3%E3%83%9E%E3%83%B3

urlの形式としては、
http://www.minekawada.com/kawaminee/wordcloud/{検索項目}
の形式で

PythonとJavascriptを使用
IBM Quantum Composerの登録（くわしいバージョン）

2023/12/02 更新しました。

[IBM Quantum Composer](https://quantum.ibm.com/composer/)（旧名称 IBM Quantum Experience）への登録方法の詳しいバージョンです。

1) IBM Quantum Platform (https://quantum.ibm.com/) のサイトへ行きます。
IBMidを持っている方は、「Continue with IBMid」をクリックします。
Google ID、Github ID、LinkedIn ID のいずれかのIDをお持ちの方は、そのIDを使ってログイン可能ですので、それぞれのIDのアイコンをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151117/bf4eb377-cdc9-f3de-eb34-b0df1251d1f4.png)


2) これらのIDを持っていない方は、新しくIBMidを作ります。メールアドレスが必要ですので、ご用意ください。「Create an IBMid account」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151117/61c2c446-8510-a2e2-e01f-511b061d815f.png)


3) 次の画面で「IBMidの作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151117/91cbe033-0cda-b28f-f597-91f82269c1d5.png)


4) 次の画面でeメールアドレス、ご氏名（名）、ご氏名（姓）、パスワード、居住している国または地域、都道府県を入力して、「次へ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151117/5b5de245-f957-ce0f-bc66-62d7ee98e6f5.png)


5) メールを確認してIBM Security から届く７桁の 確認コードを「検証トークン」の欄に入れ、リンクにある文書を読んだら「アカウントの作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151117/b1c73744-cb97-8700-ff06-bcfe18e0c0f2.png)

6) 内容を確認して、「次に進む」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151117/90dd7925-058e-4306-2030-60fcef225f08.png)

7) 再度メールを確認して、IBM Securityから届く6桁のコードを入力し、確認をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151117/47c84d8f-3e1e-ee1a-3696-e9243ffb62a9.png)


8) 書かれていることを最後まで読み、よろしかったら、「I accept the IBM Quantum End User Agreement(同意します)」にチェックを入れ、「Accept & continue」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151117/b62f833a-f9c9-75aa-315c-37d7f64e3663.png)

9) 名前、姓（苗字）、学校名（会社名など）、量子の知識レベル（初心者の方は「Hmm what's a qubit?」を選択。）、何をしたいか（例：「Study Quantum Computing.」など）を記入し、ニュースや情報を送ってもらいたい方はチェックを入れて、「Continue」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151117/83d8298f-2d45-92e9-588e-af1f6649b20a.png)


10) 下の画面になったら登録完了です。右上からの人のマークのアイコンからログイン・アカウントを確認できます。真ん中下の方の「IBM Quantum Composer」から量子計算の実験を開始できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151117/56c6dd37-c094-9c82-8e48-719e0b4ba9a0.png)

お疲れ様でした！
【Qiita】記事で挿入した画像に枠線をつける方法

#【Qiita】記事の画像に枠線をつける方法

画像を挿入するときに、枠線がないとどこからどこまでが画像かわかりにくい。

⇛　表形式(テーブル)をうまく使うことで枠線をつけられる


##記述方法
`| ![image.png](URL)|
|:--|`

**＜ポイント＞**

- 2行で記述
- 1行目：「|」(パイプ)で画像のソースコードを挟む
    - 画像のソースコード「\!\[image.png\](URL)」
        - [ ]の中は[ファイル名.拡張子]：例[example-picture.JPG]
- 2行目：|:--|
    - 「-」の数は2つ以上



<br>

```ruby:ソースコードの例
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/9c4e0aa5-69a5-d717-d1d8-af8611bf0498.png)|
|:--|
```

ソースコードが長いのでややこしく見えるが、やってることはシンプル。
①「｜」で挟む
②「|:--|」をつけるだけ

##画像への枠適用：実例

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/9c4e0aa5-69a5-d717-d1d8-af8611bf0498.png)|
|:--|


<br>
##枠がない場合

**↓↓↓ここから画像↓↓↓**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/92b8078a-44f8-cd21-a5e7-a7da052003e7.png)

**↑↑↑ここまでが画像↑↑↑**

背景白だと、境目がわからない、、
Vuetifyで既存ページのデザインを改善してみた

#はじめに

最近 Vue.jsとVuetifyに出会って
「こんな簡単に綺麗なサイト作れるんかよ！」
って衝撃を受けました。

せっかくなら前に作ったツールのデザインもVuetifyで改善してみたいと思ってやってみることに。

#ビフォー

改善前のページがこちら

![before](https://qiita-user-contents.imgix.net/https%3A%2F%2Ftialight.com%2Fexp%2FGPLG%2Fss.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&w=1400&fit=max&s=fe146ec63f009327707bf65892183e4b)

htmlとcssだけで短時間で作ろうとするとこんな出来栄えになりました・・・；

良い点を挙げるならシンプルなとこかな（？）
なのでシンプルを維持したままデザインを改善してみました。

#アフター

Vuetifyでデザインを改善したものがこちら

![after](https://i.gyazo.com/0a491c884e108710bdf3aba95f82b590.png)

なかなかいい感じ！

全部 `<v-card>` の中に納めました。
リンク生成ボタンを押した後に表示したい要素は`<v-expand-transition>`に入れることでスッキリしました。

#さいごに
Vuetifyで書くとめちゃくちゃ簡単にUI改良できるので楽しすぎる。

実はフレームワーク使うのって今回が初めて。
もうフレームワークなしで何かを作るのは無理かもしれない笑

おわりです
Djangoのsettings.pyの設定について（自分用）

#問題点
開発環境のsettings_dev.pyとsettings.pyを分けると、SECRET_KEYエラーが発生、

SECRET_KEYアプリ作成時に自動に生成される５０桁のキー

これがないとエラーを吐く、

改善点はSECRET_KEYをなんにもないsettingｓ.pyに記述するか、commonファイルをインポートする
【Parcel】TSXでsnabbdom-pragmaを使う

[snabbdom](https://github.com/Swizz/snabbdom-pragma)は仮想DOMライブラリのひとつです。
Reactの代わりに使う機会もあると思います。
preactなどと導入方法は同じです。

## 参考

https://www.npmjs.com/package/snabbdom-pragma

## 手順

1.依存のインストール

```shell:shell
$ yarn add snabbdom-pragma
```

2.tsconfigにjsxFactoryを追記

```json:tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "Snabbdom.createElement"
  }
}
```

3.tsxファイルでSnabbdomをインポートする

```tsx:main.tsx
import * as Snabbdom from 'snabbdom-pragma' // １行目あたりに追加
```

4.htmlファイルでtsxを読み込む

```html:index.html
<script src="./main.tsx"></script>
```

5.parcelを起動

```shell
parcel path/to/index.html # http://localhost:1234
```

## 実際の例

cycle.js+Snabbdomにて使いました。
https://github.com/HikaruEgashira/example-cyclejs
Go 言語でトランプのStructを作って、カードを強い順に並び替える ( #go lang sort card Struct )

```go
package main

import (
	"fmt"
	"sort"
)

type Card struct {
	Strong int
	Name   string
}

func main() {
	cards := []Card{
		Card{2, "2"},
		Card{3, "3"},
		Card{4, "4"},
		Card{5, "5"},
		Card{6, "6"},
		Card{7, "7"},
		Card{8, "8"},
		Card{9, "9"},
		Card{10, "10"},
		Card{11, "J"},
		Card{12, "Q"},
		Card{13, "K"},
		Card{14, "A"},
	}

	sort.SliceStable(cards, func(i, j int) bool {
		return cards[i].Strong > cards[j].Strong
	})

	fmt.Println(cards)
}

// [{14 A} {13 K} {12 Q} {11 J} {10 10} {9 9} {8 8} {7 7} {6 6} {5 5} {4 4} {3 3} {2 2}]

```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
submitボタンにdisplay: noneを付与すると送信できない問題の解決方法


## 事象
新規投稿画面で投稿用のsubmitボタンを用意するときform_with(for)をよく使いますが、
fontawesomeなどでアイコンを付与したい場合はレイアウトがうまく決まりません。
そこで下記のようにstyle: 'display: none'を付与してみたのですが、
そうすると送信ボタンが効かず投稿ができなくなってしまいました。

```new.html.haml
= f.submit 'Upload', class: 'submit', style: 'display: none'
```

因みにf.label下にあるfile_fieldはstyle: 'display: none'を付与しても問題なく動作します。

## 解決策

下記のようなhamlファイルの場合、style: 'display: none'を付与するのではなく
scss(css)ファイルでsubmitを透明化すればボタンを無力化することなく隠すことができました！

```new.html.haml
  (略)
    = form_with model: @モデル名, local: true do |f|
      (略)
      = f.submit 'Upload', class: 'submit'
```

```new.scss
.submit {
  opacity: 0;
}
```

## 参考

[【CSS】opacityで画像や文字などを透過させる方法](https://saruwakakun.com/html-css/basic/opacity)

</br>
XceptionHourgrassに猫の写真とマスク画像を学習させてみた

# XceptionHourgrassに猫の写真とマスク画像を学習させてみた

にゃーん（笑）
![cat-valid.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595605/2c7b967d-fe62-8823-e4c6-0a7358ad0a1f.png)

# XceptionHourgrassとは

[こちら](https://github.com/tanreinama/XceptionHourgrass---PyTorch)で公開しているニューラルネットワークのモデルです。
マスク画像やヒートマップ画像を作るためのニューラルネットワークです。
詳しいアーキテクチャとかは、[前回の投稿](https://qiita.com/tanreinama/items/572af945253d2797b279)を参照してください。

# 何をやったか

MS-COCOデータセットから、猫の写真とマスク画像をダウンロードしてきて、XceptionHourgrassに学習させてみました。
[GitHub](https://github.com/tanreinama/XceptionHourgrass---PyTorch)のreadmeに書いてある手順そのままです。

## XceptionHourgrassのダウンロード

まずはGitHubからCloneします。

```
$ git clone https://github.com/tanreinama/XceptionHourgrass---PyTorch.git
$ cd XceptionHourgrass---PyTorch
```

## MS-COCOデータセットのダウンロード

COCO2014のtrainデータセットを使用します。
データサイズが大きいので注意。以下のコマンドで、画像データと、アノテーションデータをダウンロードし、解凍します。

```
$ wget http://images.cocodataset.org/annotations/annotations_trainval2014.zip
$ wget http://images.cocodataset.org/zips/train2014.zip
$ unzip annotations_trainval2014.zip
$ unzip train2014.zip
```

## 猫の写真とマスク画像の用意

サンプルのトレーニング用PGは、COCOデータセットを直接読み込むのでは無く、フォルダから画像を読み込むように作られているので、COCOデータセットのアノテーションデータからPNG画像を作成します。

```
$ python3 make_testdata.py
```

そうすると、「train_files/imgs」以下に256x256pxの写真データが、「train_files/mask」以下に256x256pxのマスク画像が生成されます。
独自のデータを学習させたい場合は、同じディレクトリ内に画像を配置すれば良いわけですね。

![トレーニング画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595605/92fcfa1c-3e54-b553-fac7-9600091e1042.png)

因みにこれで生成されるデータ数は、2818枚。
う〜ん、本格的な学習をするには画像の枚数が少ないなぁ・・・。
これは、COCOデータセットの中から猫の画像だけを取りだしているため。`python3 make_testdata.py --category 'cat,dog'`とかすれば、猫と犬の画像を抽出するので、データ数的には少しましになる。ただ、あまりクラス数が多くなると、認識が難しくなるので、悩みどころ。
本格的な用途で使うには、もっと大規模なデータセットを用意した方が良いでしょうね。

## トレーニング

後はGitHubに書いてある手順そのまま、プログラムを叩くだけ。
バリデーション用のデータは、自動的にtrain_test_splitで0.01分が取り分けられる。

```
$ python3 train_testdata.py
```

学習には、HourgrassNetの[論文](https://arxiv.org/pdf/1603.06937.pdf)に従って、OptimizerにRMSPropを使用している。Adamとかでも良かったかもしれないけど、Momentum SGDでは上手く動かなかった。
とりあえず20エポックほど学習させますが、実際はこのデータ数だと12エポック程度で収束する模様。手元で行った実験では160000枚のデータに対して22エポックでValidation lossが最小になりました。

# 結果

冒頭の画像の通り。にゃーん（笑）
![cat-valid.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595605/2c7b967d-fe62-8823-e4c6-0a7358ad0a1f.png)

## いいわけ

ハッキリ言ってデータ数が足りてません。もっと、同じドメインに沢山のマスク画像があるデータセットで試してみたい所ですが、ぱっとは思いつかなかったので、とりあえず定番のCOCOデータセットを使ってみただけです。

まぁ、3000枚いかない枚数のデータで、しかも転移学習とか無しに直接学習させた結果なので、こんなもんでしょう。
より多数のデータを用意出来るなら、きっともっと良くなるはずです。

あと、この学習用PGはテスト用なので、Data Augmentationの手法は何も入っていません。単純に画像のRandom CropやFlip等入れるとか、Affine変換入れるとかでだいぶ変わるはずです。
Torchvisionのtransforms使っても良かったんだけど入力画像とマスク画像の両方に同じ変換入れなきゃなので面倒だったから省いたの・・・。

#Reference

1. XceptionHourgrass - PyTorch https://github.com/tanreinama/XceptionHourgrass---PyTorch
2. Alejandro Newell, Kaiyu Yang, and Jia Deng "Stacked Hourglass Networks forHuman Pose Estimation" https://arxiv.org/pdf/1603.06937.pdf
3. COCO Dataset http://cocodataset.org/#home
リモート会議の内職ガイド

こんにちは。会議のプロセス改善ツール「[minmeeting](https://minmeeting.jp/)」を開発している[伊勢川](https://twitter.com/a_isegawa)です。

<a title="minmeeting - 10分で生産的なミーティングができる会議ツール" href="https://minmeeting.jp/" target="_blank"><img width="100px" src="https://qiita-image-store.s3.amazonaws.com/0/199506/32e65577-a5bb-2c3b-4d30-4690c3c5ce0f.png" /></a>

リモートワーク・在宅勤務の急速な普及に伴い、増えているのがオンライン会議。チャットや電話よりも密なコミュニケーションがとれるため、リモートになると会議の相対的な重要性は増しています。

他方で、オンライン会議の運営は対面よりも難しく、無駄な会議・グダグダな会議も増えやすくなります。特に、よく起こりがちなのが、<B>内職問題</B>です。オンライン会議だと何をしていてもよく分からないので、内職をしやすくなります。

今回は、その内職問題について、<B>どのような対策を行えばよいか</B>、
その対策をかいくぐって、<B>それでも内職をしたい人はどうすればよいか</B>をまとめました。

両者の立場を取り上げることで、相互理解が進むことを望みます。

## 内職させたくない場合は、どのような対策があるか
- 会議の時間を短くする
- 会議を2回に分けて、1回目で宿題を出し、2回目で結論を出す
- 参加者を絞り（5人以下）、ミュートにしなくても話が成り立つようにする
- 参加者が多い場合は、チームを分けてそれぞれのチームで議論をしてもらう
- Webカメラで顔を映させる
- Webカメラに付けられるクリップ式の広角レンズを配る
- 全員が話す機会をつくる
- ファシリテーターがランダムに発言者を指定する、名前を呼ぶ、質問する
- チャットを使ったブレインライティングなど、個人がアウトプットを求められる時間を設ける
- 参加メンバーが仕切る時間を設け、主催者側の気持ちをわかってもらう
- 重要なことを言う前に、「これから5分は内職の手を止めて聞いてください」と言う
- 内職OKな会議（時間）と、そうでない会議（時間）を明確にし、参加者に伝える

## それでも内職したい場合は、どうすればよいか
- ハードウェア式のスイッチのついた会議用マイクを設置
- Web会議アプリが会議用マイクにつながっていることを確認する
- Web会議アプリのミュートボタンではなく、会議用マイクのスイッチを使ってミュートにする
- ノイズのない静かな場所で会議に参加し、エアコンを切る（ノイズがあるとミュートにしてるのがバレる）
- Webカメラの角度を調整し、手元を移さないようにする
- Webカメラと同じ方向にサブディスプレイを準備し、Web会議の画面と内職用の画面を同時に見れるようにする
- たまには相槌をうったり、笑い声を入れたりする

## 内職に向いている作業とは
リードオンリーの作業
- メールやチャットのチェック
- 次の会議の資料のチェック
- テクニカル・ドキュメントのチェック

時間がかかる処理
- e2eテストのテストケース追加
- バッジ処理のテスト
- github actionsのyamlのテスト

あまり頭を使わない作業
- メールやチャットのリアクションや簡単な返信
- 社内の些末な申請の承認

## 結論
いろいろ検討してみましたが、結局Web会議は内職する側に圧倒的に有利です。
そこに対してテクノロジーで内職を可視化したりすることもできますが、それも無益ないたちごっこを生み出すだけでしょう。

今回は小手先のテクニックを中心に取り上げましたが、内職する気にならないような魅力的な内容にするのが本質的な対策だとつくづく思いました。

## お知らせ
リモートワークの生産性を高めるための情報を集めるTwitterをはじめましたので、ぜひこちらもフォローをお願いします。

<a href="https://twitter.com/ise_test" target="_blank"><img width="598" alt="スクリーンショット 2020-03-16 10.51.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199506/2d391b60-a618-9581-4880-5d68d4bc3cb4.png"></a>

リモートワークの生産性チャンネル
https://twitter.com/ise_test
Laravelの開発環境をDockerで構築したらcould not find driver

Laravelの開発環境をDockerで構築しようとしてハマったのでメモを残しておきます。

Laravelの開発環境をDockerで構築する方法は以下を参照してください。
[Dockerを使って1コマンドで起動できるLaravel開発環境を構築する](https://qiita.com/sano1202/items/963c4677f14790863b67)

以下のようにDockerfileを作成しました。

```docker:Dockerfile
FROM php:7.3-apache

COPY --from=composer /usr/bin/composer /usr/bin/composer
RUN apt-get update && apt-get install -y \
    unzip \
    libzip-dev \
    zlib1g-dev \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* \
    && a2enmod rewrite
COPY ./apache2.conf /etc/apache2/apache2.conf
COPY ./php.ini /usr/local/etc/php/php.ini

WORKDIR /var/www/myapp
```

コンテナを起動してアクセスしてみると、PDOExceptionでcould not find driverが出力されました。
MySQLのPDOドライバが有効になってなかったかと思って、php.iniのexentionのコメントを外すもエラー消えず。

そもそもインストールされてないっぽいです。
対処法はDocker Hub に答えがありました。

======Docker Hub引用=========
PHP Core Extensions
For example, if you want to have a PHP-FPM image with the gd extension, you can inherit the base image that you like, and write your own Dockerfile like this:

```docker
FROM php:7.4-fpm
RUN apt-get update && apt-get install -y \
        libfreetype6-dev \
        libjpeg62-turbo-dev \
        libpng-dev \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install -j$(nproc) gd
```
======Docker Hub引用=========


どうやら```docker-php-ext-install```でいけるようです。

最終的にこんな形にして、エラーは解消しました。

```docker
FROM php:7.3-apache

COPY --from=composer /usr/bin/composer /usr/bin/composer
RUN apt-get update && apt-get install -y \
    unzip \
    libzip-dev \
    zlib1g-dev \
    && docker-php-ext-install \
    zip \
    pdo_mysql \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* \
    && a2enmod rewrite
COPY ./apache2.conf /etc/apache2/apache2.conf
COPY ./php.ini /usr/local/etc/php/php.ini

WORKDIR /var/www/myapp
```
XAMPPのコントロールパネルが表示されなくなった

# 経緯
XAMPPを起動しても、コントロールパネルのウィンドウが表示されなくなりました。
「Show/Hide」をクリックしてもウィンドウは表示されません。

↓タスクトレイから、Apacheなどを正常に起動/停止はできますが。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384619/6bf3ab6d-8716-b012-9a67-44886a36930b.png)

# 環境
- XAMPP v3.2.2
- Windows10

# 対応
「xampp-control.exe」と同じフォルダ内の「xampp-control.ini」を見ると、怪しい設定項目を発見しました。

```config:xampp-control.ini
[WindowSettings]
Left=-25600
Top=-25600
Width=159
Height=39
```
ウィンドウが、画面の表示領域から外れてしまっていたようです（原因は不明）。

そこで、適当な値に修正しました。
私の場合、表示座標だけでなく、ウィンドウのサイズもおかしくなっていたので、4項目全て修正が必要でした。

```config:xampp-control.ini
[WindowSettings]
Left=315
Top=138
Width=697
Height=452
```

# 確認結果
久しぶりに表示されました(^^)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384619/0ebe5656-a134-6e85-8e97-6067f4f02760.png)

# 参考
なかなか情報が見つかりませんでしたが、iniを疑って検索すると、同じ悩みの人がいました。
[Xampp control panel is not showing - Stack Overflow
](https://stackoverflow.com/questions/46627164/xampp-control-panel-is-not-showing)

以上
rspec-railsで使うコマンドを羅列する

使うコマンドを雑多にメモる。

# 導入

```ruby:Gemfile
group :development, :test do
  gem 'rspec-rails', '~> 3.6.0'
  gem 'factory_bot_rails'
end
```

```ruby:spec/support/factory_bot.rb
RSpec.configure do |config|
  config.include FactoryBot::Syntax::Methods
end
```

```terminal
$ rails g rspec:install
.....
```
chrome拡張機能の配布手段まとめ

作成したChrome拡張機能の配布方法をまとめました。


##配布方法一覧


|  | 一般公開 | 限定公開 | 非公開 | ctx | ソース配布 |
|:-:|:-:|:-:|:-:|:-:|:-:|
| インストール可能ユーザ  | 全て  | 全て（URLを知っているユーザ）  | デベロッパーと同一ドメイン  | 実質自分のみ  | 全て  |
| ストア検索  | ひっかかる  | ひっかからない  | ひっかからない  | 公開しない  | 公開しない  |
| 更新方法  | ストア  | ストア  | ストア  | ctxの再配布  | ソースの再配布  |
| 用途  | 全ユーザに公開したい  | ある程度限定的に公開したい  | ユーザを厳格に絞りたい  | ？  | ストアを使わずに配布したい  |

##ストアでの公開

ストアでの公開方法には現在３つの公開方法があります。

- 一般公開
- 限定公開
- 非公開

拡張機能を更新する際はストア経由が一番楽で管理も容易です。
拡張機能の配布はストアでの公開が推奨されており、ストアにアップロードする方法をまず検討すべきです。


[カスタムの Chrome アプリと拡張機能を作成して公開する -Google公式](https://support.google.com/chrome/a/answer/2714278?hl=ja)


###一般公開
[chromeウェブストア](https://chrome.google.com/webstore/category/extensions?hl=ja)で拡張機能が公開できます。
全てのユーザがストアから検索してインストールすることができます。

###限定公開
拡張機能はストア経由で配布しますが検索にひっかかりません。
配布したいユーザにURLを送りインストールしてもらいます。

ユーザはGoogleアカウントが不要なので配布しやすいですが、URLを知っているユーザなら誰でもインストールできるので**厳密にはユーザを限定することができません。**ユーザを絞りたい場合は次の非公開設定を検討すべきでしょう。

###非公開
拡張機能の公開ユーザをデベロッパーのドメイン内のユーザに絞ることができます。


例えばアプリを管理するデベロッパーが「extension-admin@hogehoge.com」とすると、
「tanaka-koji@hogehoge.com」はインストールできますが、「kato-yuji@piyopiyo.com」はインストールできません。

ドメインで絞るためユーザはGoogleアカウントが必要ですが、厳格に配布制限を行うことができます。

##ストア以外での公開方法
ストアを使わずに拡張機能を配布することもできますが、推奨されておらず煩わしいことが多いのでオススメはしません。
ストアで公開できない場合に止むを得ずとる公開方法です。


###ctxファイルの配布
拡張機能をctxという形式で圧縮し配布する方法がありましたが、現在はブラウザでブロックされるため実質利用価値はありません。
配布方法の手段として取られることはないでしょう。
[Chrome拡張はストア以外から導入不能に ～“インライン インストール”が段階的に廃止へ -窓の杜](https://forest.watch.impress.co.jp/docs/news/1127319.html)

###ソースごと配布
ユーザは拡張機能のプロジェクトを丸ごとダウンロードし、デベロッパーモードで「パッケージ化されていない機能を読み込む」で拡張機能を使用する方法です。

ファイルサーバやOneDrive上に置いて、それを読み込み先に設定することもできますが、動作が不安定になることが多く、ネットワーク障害で読み込みが失敗すると再設定が必要なことがあります。

基本的に拡張機能の読み込み先はローカルの方が良いでしょう。
（ストア経由でもローカルにダウンロードされています。[Google Chromeの拡張機能（エクステンション）が保存されている場所 -牧田結來公式ブログ](https://makitayuki.com/google-chrome-extension/)）

ちなみにソース配布だと下のようなアラートがブラウザ起動毎？に表示されてしまいます。
![スクリーンショット 2020-03-16 11.08.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537165/9135f92e-33a4-27d5-40d7-fe34729bbd9f.png)


##共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくは[Wantedly](https://www.wantedly.com/projects/134741)からお問い合わせください。
RaspberryPiのVNC設定をSSHで完結させる。

#はじめに
この記事は、ラズパイを使う高専生にむけたものです。あまり一般的なものではないということをご了承ください。また、Qiitaで記事を書くのはこれが初めてなので、至らないとこが多々あると思います。ご了承ください。

##何がしたいの？
ラズパイは、ただの基盤です。普通に使うにはディスプレイ、マウス、キーボードが不可欠です。しかし、それらが家にない同級生も少なくありません。なので、パソコン一台で、設定を完結させたらと思いました。よって今回は、**ディスプレイ、マウス、キーボードは使いません！**

##SSHとVNCとやらで何ができるの？
詳しい解説は省略します。（~~私もよく分かってない~~）簡単に言えば...  

SSH: 外部のコンピュータのコマンドを使えるようになる　(CUI)
VNC: 画面も共有して、マウスを使って直感的に使える様になる　(GUI)

#手順
大きく分けて、以下のような手順で進めていきます。
1. SSHを有効にする
2. SSHでクライアント側とラズパイを接続する
3. VNC の準備
4. VNCで接続！

##環境＆必要なもの
OS：Windows10　Raspbian10  

・パソコン（LANケーブルとSDカードスロットが必要）
・ラズパイ
・LANケーブル
・無線LANの環境  

それでは、やっていきましょう。

##1.SSHを有効にする
Raspbianでは、SSHがデフォルトでは無効になっています。設定から変更すればいいんですが...今回はできないので、がんばりましょう。
###SDカードをパソコンに挿入
SDカードのドライブレターを確認しておきます。（今回はFとしていきます。）
###空ファイル"ssh"を作成
コマンドプロンプトを立ち上げ、以下のコマンドを入力し、ルートディレクトリにsshという空ファイルを作成します。

    f:　（SDカードのドライブレター）
    type nul > ssh

~~touchコマンドほしー。~~はい、確認してみましょう
![Inkedコメント 2020-03-14 191414_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509143/7f6a7334-0915-812a-2c09-1d21af24dfb2.jpeg)

0バイトのファイルができていますね。これで、SSHが有効になります。SDカードは戻して起きましょう。

##2.SSHでクライアント側とラズパイを接続する。
まず、ラズパイの電源を入れ、LANケーブルでパソコンに接続しましょう。

    ssh pi@raspberrypi.local

`pi`はユーザー名、`raspberrypi`はホスト名です。初期値であればそのまま、変更していれば、書き換えてください。  

    pi@raspberrypi.local's password:[パスワード]

パスワードを求められるので、入力します。表示されないのは仕様なので、慎重に！(初期値は"raspberry")

![コメント 2020-03-14 184646.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509143/846023b9-1868-f079-ffc9-e7dec208ffaa.png)

出てきましたね！

##3.VNC の準備
これにて、ラズパイを操作することが可能となりました。ここからは、インターネットが必要になります。パソコンが無線LANにつながっていることを確認してください。（ラズパイは、パソコンからLANケーブル経由でインターネットとつながっています。）

###VNCServerをインストールする（ラズパイ側）
ラズパイ側には、Real VNCのVNCServerをインストールしていきます。先ほどSSHで接続したところに打ち込んでください。

    sudo apt-get install realvnc-vnc-server

VNCServer : https://www.realvnc.com/en/connect/download/vnc/

###VNCViewerをインストールする（パソコン側）
パソコンに、VNCViewerをインストールします。こちらはRealvncのサイトからどうぞ。

VNCViewer : https://www.realvnc.com/en/connect/download/viewer/windows/ 

##3.VNCで接続！
###ラズパイのIPアドレスを調べる。
VNCで接続するには、ホスト側のIPアドレスがわからないといけません。

    ip addr show

Enterを押すとたくさん文字が出てきます。今回は有線LANなので、`eth0`と書かれたグループの`inet`に続く数字です。控えておきましょう。
>こちらの記事を参考にさせていただきました。[ifconfigが非推奨に!? ifconfigコマンドを使わずにRaspberry PiのIPアドレスを調べる方法 | 猿まね電子工作](http://densikousaku.com/archives/861)

##4.VNCViewerから接続。
パソコンから、VNCViewerを立ち上げて、控えたIPアドレスを入力します。

![コメント 2020-03-16 104930.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509143/e0d4d590-ff76-163b-007e-6fb33122fe0a.png)

ユーザー名とパスワードの入力を求められるので、入力して、完了です。

![コメント 2020-03-16 110039.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509143/fb0064ca-3120-817e-effa-cf4dfdbe1104.png)

##まとめ
せっかく一人一台ラズパイがあるので、パソコンとつなげることができればできることが増え、可能性が広がります。ぜひ有効活用していきたいですね。
Expecting android:screenOrientation=“unspecified”...の対処法

## 困ったこと
Andsroid3.6+から、AndsroidManifestファイル内で下記のように、Activityの向きを固定に指定しているとワーニングが出るようになりました。これは、Googleより「ユーザの（画面の向きを変えれる）選択肢を狭めないように横向きにもアプリを対応させましょうね。」というメッセージなわけでございます。

## 対処法① アプリを横向き対応する
ユーザの利便性を追求するのであれば横向きもサポートするほうが良いのは当然です。
なお、ワーニングの指示通り下記のどちらかを指定すれば消えます。

```xml
<activity
    android:screenOrientation="fullSensor"
    android:screenOrientation="unspecified"
/>
```

|パラメータ名|説明|
|---|---|
| unspecified | デフォルト値。システムが画面の向きを選択します。システムが使用するポリシー、つまり特定の状況における選択は、端末により異なる場合があります。 |
| fullSensor | 画面の向きは、端末の方向センサーによって決まり、4 つの画面の向きすべてを使用できます。これは "sensor" と似ていますが、端末の通常の動作にかかわらず、4 つの画面の向きすべてを使用できる点が異なります（たとえば、一部の端末では通常、反対の縦向きや反対の横向きは使用しませんが、それらの向きも有効になります）。API レベル 9 で追加。 |

https://developer.android.com/guide/topics/manifest/activity-element

## 対処法② とりあえず見えなくしたい

applicationタグ、もしくは無視したい個別のActivityタグに`tools:ignore="LockedOrientationActivity"` を追加しましょう。
これでワーニングは見えなくなります。

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="jp.co.xxxxx.xxxxx">
   <application
        android:name=".App"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="LockedOrientationActivity"  <- ここだと全体に
        >
    ...
        <activity
            android:name=".view.main.MainActivity"
            android:label="@string/title_activity_main"
            android:launchMode="singleTop"
            android:screenOrientation="portrait"
            tools:ignore="LockedOrientationActivity"　<- ここだと個別のActivityに
        />
    </application>
     ...
</manifest>
```

## 対処法③ 無視する
一応これでもビルドは通ります。
ワーニングが気にならない人、後ほど直すからとりあえずワーニングだけは出しておきたい人、はそのままで良いでしょう。

## 参照
https://stackoverflow.com/a/60400979/6891441
MacVimからNeovim+iTerm2+tmuxに移行した経緯と困ったところ

開発環境をいじってみて、タイトル通りの環境に落ち着きました。
その経緯を書いていきます。

## もともとの開発環境

- MacVim
- tmux
- Terminal

言語は主にPHPを使っていて、場合によってPython, Ruby, Goなど。

## Neovimの導入

以前からちょいちょい試していたのですが、GUI環境で良いのがなかったのがネックになり完全導入はできていませんでした。

Vimを使っていて特に困っていなかったのですが
今回はどうしてもDeniteでfloting windowを使いたかったので、思い切ってTerminalでNeovimを使うことにしました。

homebrewを使ってインストール

```bash
$ brew install neovim --HEAD
$ nvim -v
# -> NVIM v0.5.0-cb8b942
```

## tmux

もともと使用していたので、特に変わりなく使っています。

```bash:.bash_profile
alias tmux-new='tmux new  -c ~/develop -s develop -n _vim nvim \;\
                     neww -c ~/develop -n ｓｒｃ \;\
                     neww -c ~/develop -n docker docker exec -it hogehoge \;\
                     neww -c ~/develop -n fugafuga \;\
                '
```

こんな感じで、aliasを作って環境を一気に立ち上げるようにしています。
<C-b>0とやるとNeovimが立ち上がるので便利です。

## iTerm2

もともとTerminalを使ってNeovim+tmuxで開発をしていたのですが、
なんだかカーソルの動きがカクつくというかスムーズに動かないのが気になってきました。
悩んだ結果、iTerm2を試してみることに。

そうしたら、カーソルもスムーズに動くようになりました！
Terminalを置き換えただけで特に設定はなし。カラーテーマを「Solarized dark」に変えただけ。


## ちょっと困ったところ

### ファイルの変更通知がでない

MacVimでは別アプリなどでファイルが更新されたときに警告が出ます(`:help W11`)。
Terminalで使っているとこれが出ないようでした。下記の設定を入れることで表示されるようになりました。

```:.tmux.conf
set -g focus-events on
```

```vimscript:.vimrc
set noautoread
autocmd FocusGained * checktime
```

### :terminalの設定が動かない

vimでは下記のような設定をしていました

```viml:.vimrc
command! T lcd %:p:h | bo terminal ++close bash --login
```

しかし、下記の問題が発生しました。

- ++closeがないという警告がでる
- インサートモードでスタートしない

下記のように設定を変えることで解決しました。

```viml:.vimrc
command! T lcd %:p:h | bo split term://bash --login | normal i
```

ただ、いままでは`exit`でウインドウが閉じていたのですが、nvimでは閉じてくれないようでした。
これはまだ解決できていません。

## まとめ

今のところ快適に使えています。
現状、iTerm２の利点は感じていないので、どうにかしてTerminalに戻れないかなと頑張ってます。