OmniAICreator/Qiita-1.07M huggingface dataset:
リリース済みのアプリをFlutterでフルスクラッチ＆リプレイスしたときに苦労したこと〜Android編〜

Flutter製のアプリ自体は少しずつストアでも見られるようになってきていると思うけど、
既存のネイティブアプリからのリプレイスって話は見かけてないのでやったこと、苦労した点をまとめました。
Flutterそのもので苦労した話は気が向いたら別に書きます。

# パッケージ名を合わせる
当然だけどリプレイスなので既存アプリとパッケージ名を合わせる必要がある。

## 解決方法
[こちら](https://tutorialmore.com/questions-330218.htm)を参考にしたらすぐ出来た。
平たく言えば普通にAndroidアプリのパッケージ名を変更するのと同じことをするだけ。

# ビルドの署名を合わせる
これも合わせないとストアに登録出来ないのでやる。
ちなみに新規なら[公式ドキュメント](https://flutter.dev/docs/deployment/android#signing-the-app)の通りやれば良い。

## 解決方法
ぶっちゃけ新規の手順でキーストアの作成の代わりに既存のファイルを使うだけだけど一応記載しておく。

### 既存アプリのキーストアファイルをandroid/app配下に置く

### android/key.propertiesファイルを作成

```key.properties
storePassword=<既存のストアパスワード>
keyPassword=<既存のキーパスワード>
keyAlias=<既存のキーエイリアス>
storeFile=<キーストアファイル名>
```

### build.gradleを編集
以下の2箇所を編集

```build.gradle
// 以下3行を追加
def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

android {
```

```build.gradle
// buildTypes {
//    release {
//        // TODO: Add your own signing config for the release build.
//        // Signing with the debug keys for now, so `flutter run --release` works.
//        signingConfig signingConfigs.debug
//    }
//}
signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile file(keystoreProperties['storeFile'])
        storePassword keystoreProperties['storePassword']
    }
}
buildTypes {
    release {
        signingConfig signingConfigs.release
    }
}
```

# データのマイグレーション
既存のアプリにログイン機能があり、内部にトークンなどを保持していたため、
それを引き継がずに更新すると情報が全て消えてしまうことが判明した。
幸い、SharedPreferencesで保持していたのでSharedPreferencesプラグインを使えば
そのまま引き継げるかと思ったけど話はそう簡単ではなかった。
まずFlutterのプラグインではインスタンスの名前が選べずデフォルト一択だった。
Androidではインスタンスを取得する際に名前をつけられるので、ここでいきなり躓いた。

更にプリファレンスの名前にprefixを自動でつける非常に~~余計~~親切な仕様があった。
なので例えばaccessTokenみたいなプリファレンスを参照すると実際には
flutter.accessTokenを参照することになる。

## 解決方法
どうしようもないので自前でSharedPrefrencesのプラグインを実装した。
と、しれっと書いたけどこれだけで調査も含めて諸々1週間位かかった。

※なお、realmも使っていたが読み込んだデータのキャッシュ程度にしか使ってなかったので
今回は引き継がなかった。

# iOSとのバージョンの棲み分け
Android/iOS両方ともネイティブアプリをリリースしているが、歴史的な経緯があってバージョンが全然違う。
合わせようとするとかなりメジャーバージョンがぶっ飛ぶことになるので、それぞれでバージョンを指定することにした。

## 解決方法
app/build.gradleのL14辺りでバージョンコードとバージョンネームを設定しているのでそこを書き換える。
もちろんこの対応でFlutter側からも問題なくAndroid/iOSそれぞれのアプリバージョンを取ってこられる。

```app/build.gradle
//def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
//if (flutterVersionCode == null) {
//    flutterVersionCode = '1'
//}
def flutterVersionCode = '100'  // ←よしなに

//def flutterVersionName = localProperties.getProperty('flutter.versionName')
//if (flutterVersionName == null) {
//    flutterVersionName = '1.0'
//}
def flutterVersionName = '2.0.0'  // ←よしなに
```

# まとめ
普通に作る分にはFlutterはかなり便利だと思うけど、こういうレアケースに手を出すとちょっと面倒なこともあるよということで、
同じようなことを考えている、あるいはこれからやっていかなくちゃあいけない人たちの参考になれば幸いです。
パターンマッチ入門 Ruby 編

Ruby 2.7 からパターンマッチという構文が（実験的に）導入されたので、パターンマッチの概念と Ruby における構文をメモ。

### 実行環境
Ruby 2.7 を使用する。Docker を使っていれば以下で用意できる。

```
$ docker pull rubylang/ruby
$ docker run -it --rm rubylang/ruby:latest bash
```

## パターンマッチとは？
- パターンを用いて入力データの**構造を判定**する機能
- パターンを用いて入力データを**分解**し、**値を変数に束縛**する機能
- case/when の強いやつ

## なぜパターンマッチを導入するのか？
- 構造をもったデータを処理することに向いている
- ↑を可読性高く、安全に書ける

## Ruby におけるパターンマッチ
キーワードは `case` / `in`

### 基本の文法
```rb
case expression
in pattern [if|unless condition]
  #...
in pattern [if|unless condition]
  #...
else
  #...
end
```

- expression（式）が pattern（構造）と `===` で比較され、真の場合中の処理に進む。
- pattern の中に変数があれば、同時に代入も行われる。
- 各パターンには `if` や `unless` （ガード式）を使えて、パターンマッチが成功しかつガード式も真を返すと `in` の内容が実行される。
- どのパターンにも該当しない場合は `else` に入る。
- `else` が無く、かつどのパターンにも該当しない場合は `NoMatchingPatternError` 例外が発生する。

### シンプルな例
実際に簡単な例をいくつか挙げてみる。

```rb
case 0
in Integer
end
```
`Integer === 0` なので上記はマッチする。

```rb
case 1
in a
  puts a # => 1
end
```
変数を使ったマッチもできる。

```rb
case [1, 2, 3]
in [1, 2, a]
  puts a # => 3
end
```
配列を使ったパターンでは、要素の個数と値が一致しているかをチェックする。

### JSON のパース
```rb:パターンマッチ不使用
error = JSON.parse(response.body)["error"]
if error.present?
  message = body["error"]['message']
  logger.error(message)
end
```
通常はキーの存在を確認しながら見ていくが、

```rb:パターンマッチ使用
case JSON.parse(response.body)
in { error: { message: message } }
  logger.error(message)
end
```
パターンマッチを使うとシンプルかつ可読性高く書ける。

### クラス名の分割

```rb
splitted_class_name = "Foo::BarController".split('::')
case splitted_class_name
in [/Foo|Baz/ => namespace, /.+Controller/]
  puts namespace # => "Foo"
end
```
`===` で判定するため、パターンに正規表現を使うこともできる。
また、マッチしないケースがくると例外が発生するので予期せぬ動きを防げる。（Controller ではないクラス名が入ったときなど）


## パターン紹介
上で例として挙げたパターンには名前がついており、以下で紹介する。

### 1. Value パターン
パターンとして単一のリテラルを指定。

```rb
case 0
in 0
end
```

### 2. Variable パターン
パターンとして変数を指定。必ずマッチする。

```rb
case 0
in a
end
```

### 3. Alternative パターン
複数のパターンを `|` で並べたものをパターンとして指定。

```rb
case 0
in 0 | 1 | 2
end
```

### 4. As パターン
マッチ対象のオブジェクトを変数に代入できる。パターンと変数をハッシュロケット `=>` で区切る。

```rb
case 0
in Integer => a
end
```

### 5. Array パターン 
複数のパターンを配列として指定。Array オブジェクトに限らず、`deconstruct` に応答できればマッチできる。

```rb
case [0, 1, 2]
in [0, *a]
end
```

### 6. Hash パターン
パターンをハッシュ形式のキーで指定。Hash オブジェクトに限らず、`deconstruct_keys` に応答できればマッチできる。

```rb
case { a: 0, b: 1 }
in { a: 0, b: 1 }
end
```

## 参考
[Pattern matching - New feature in Ruby 2.7](https://speakerdeck.com/k_tsj/pattern-matching-new-feature-in-ruby-2-dot-7?slide=2)
[n月刊ラムダノート Vol.1, No.3(2019)](https://www.lambdanote.com/collections/frontpage/products/nmonthly-vol-1-no-3-2019)
[サンプルコードでわかる！Ruby 2.7の新機能・パターンマッチ（前編）](https://qiita.com/jnchito/items/9bb4aa1dcefa00257815)
[サンプルコードでわかる！Ruby 2.7の新機能・パターンマッチ（後編）](https://qiita.com/jnchito/items/a9c7030cb5697f992cb7)
WSL2のUbuntu18.04 LTSにWordPressをインストールするMemo

#はじめに
2020年1月30日時点での作業記録となります。
自分が必要だと思う機能しかインストールしてません。
ご自身の環境に合わせて読みかえて下さい。

#WordPressの動作要件
作業前にこちらで確認しましょう。
[WordPressを入手](https://ja.wordpress.org/download/)

>PHP バージョン7.3以上、MySQL バージョン5.6または MariaDB バージョン10.1以上のサーバーを推奨しています。また、WordPress を実行するための最も堅牢な選択肢として Apache または Nginx を推奨しますが、いずれも必須ではありません。

この記事を書いてる時点でPHPをバージョン指定せずにインストールすると7.3ではなく7.2が入り動作要件から外れるので注意しときましょう。

#インストール
以下の順序でインストールしていきます。
1. Webサーバのインストール
2. PHPのインストール
3. DB(MariaDB)のインストール
4. WordPressのインストール
#1. Webサーバのインストール
動作要件には「いずれも必須ではありません。」の記載がありますが、今回はApache2をインストールします。

```
# apt install apache2
```

#2. PHPのインストール
動作要件に従ってバージョン指定を行ってインストールします…がPHPのバージョン7.3はそのままだとインストールできないので以下の作業を事前に行います。

```
# apt install software-properties-common
# apt-add-repository ppa:ondrej/php
# apt update
```

ここまで準備終わったらPHPのインストールとなります。

```
# apt install php7.3 php7.3-mysql
```

インストール時にphp7.3-mysqlは明示しないと後で面倒なことになるのでお忘れなく
インストール後のバージョン確認はこんな感じ。

```
# php --version
PHP 7.3.14-1+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Jan 23 2020 13:59:16) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.14, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.14-1+ubuntu18.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
```

#3. DB(MariaDB)のインストール
動作要件に従ってバージョン指定を行ってインストールします。

```
# apt install mariadb-server
```

インストール後のバージョン確認はこんな感じ。

```
# mysql -v
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 49
Server version: 10.1.43-MariaDB-0ubuntu0.18.04.1 Ubuntu 18.04

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.
```

MySQL同様お作法的に以下のコマンド実施。

```
# service mysql start
# mysql_secure_installation
```

これでWordPressインストールの下ごしらえ完了。

#4. WordPressのインストール
DocumentRootにファイルをダウンロードしてごにょごにょするだけの簡単なお仕事です。

```
# cd /var/www/html
# wget https://ja.wordpress.org/latest-ja.tar.gz
# tar -xzvf latest-ja.tar.gz
```

パーミッションは適宜環境に合わせて調整してください。
この後WordPress用のDB作成、ユーザーアカウントを作成しておくこと。
最後に
http://自身の環境/wordpress/wp-admin/install.php
にブラウザでアクセスし諸々画面に従えばおけ。

以上
Laravel の leftJoin で、クロージャを使えば複数条件指定もできる

突然ですが、こんな感じのSQLを書きたくなることありませんか？

```sql
-- 家族の情報を全て取得、５歳以下の子供がいればその情報も一緒に
SELECT * FROM families
  INNER JOIN persons 
    ON families.id = persons.family_id
    AND persons.age <= 5;
```

Laravel の `join` `leftJoin` メソッドだと、こんな感じで

```php
Family::leftJoin('persons', 'families.id', '=', 'persons.family_id')->get();
```

第二引数〜第四引数に ON 句の条件が入るから、２つ目の年齢の条件が指定できない・・・

と、困りながらマニュアルをちゃんと読んでみたら、なんと第二引数にはクロージャも指定できるらしい :eyes: 

https://laravel.com/docs/6.x/queries#joins

```php
Family::leftJoin('persons', function ($join) {
    $join->on('families.id', '=', 'persons.family_id')
      ->where('persons.age', '<=', 5)
    })->get();
```

これでOK！

`join` の機能なので、 `leftJoin` 限定でなく色々使えそうです。
join のコードはこうなってた。

```php
    public function join($table, $first, $operator = null, $second = null, $type = 'inner', $where = false)
    {
        $join = $this->newJoinClause($this, $type, $table);

        if ($first instanceof Closure) {
            $first($join);

            $this->joins[] = $join;

            $this->addBinding($join->getBindings(), 'join');
        }

        else {
            $method = $where ? 'where' : 'on';

            $this->joins[] = $join->$method($first, $operator, $second);

            $this->addBinding($join->getBindings(), 'join');
        }

        return $this;
    }

```
Elasticsearchの検索クエリについて

## 概要
Elasticsearchで色々とデータを検索するために調べたことのまとめ。

## クエリの実行
curl等を使ったHTTPリクエストの場合は以下のような形式でクエリを投げます。
`curl -XGET 'localhost:9200/**_index/_search?pretty' -d '{JSON_QUERY}'`

## 基本的な検索QUERY
- SELECT *

```
{
    "query": { "match_all": {} }
}
```

- SELECT a, b, c

```
{
    "query": { "match_all": {} },
    "_source": ["a", "b", "c"]
}
```

- WHERE

```
{
    "query": {
        "match": { "a": 20 }
    }
}
```

- WHERE AND

```
{
    "query": {
        "bool": {
            "must": [
                { "match": { "a": 20 } },
                { "match": { "b": "hoge" } }
            ]
        }
    }
}
```

- GROUP BY

```
{
    "aggs": {
        "hogehoge": {
            "terms": {
                "field": "a"
            }
        }
    }
}
```

- idごとに最新のレコードを取りたい

```
{
    "aggs": {
        "hogehoge": {
            "terms": {
                "field": "id"
            },
            "aggs": {
                "hoge_top_hits": {
                    "top_hits": {
                        "sort": [
                            {
                                "timestamp": {
                                    "order": "desc"
                                }
                            }
                        ],
                        "_source": {
                            "includes": [ "a", "b" ]
                        },
                        "size": 1
                    }
                }
            }
        }
    }
}
```
termsでidごとのAggregationBucketを作成し、それぞれのBucketでtimestamp順に並び替えてa,bのデータを1つだけとってます。

- idごとに最新のレコードを取り、それに対してフィルターをかける
  - Aggsに対してフィルターをかける方法はいくつかある
     - filter
     - bucket_selector
CentOS 7をEC2で運用するときのセカンダリプライベートIPアドレス設定をAmazon Linuxと同様に簡単にする。

## 前提

- AWS EC2のCentOS 7インスタンスで稼働する。
- CentOS 8で動くかどうかは未確認。

## 説明

- EC2にAmazon Linuxインスタンスを立てると、セカンダリプライベートIPアドレス設定についても、特に手動設定することなく、良い感じに設定してくれる。
- これは、[ec2-net-utils](https://github.com/aws/ec2-net-utils)というAWS謹製のユーティリティによるものだが、CentOSの公式AMIには未導入。
- なので、それを導入して、同様に設定してしまおう、という話。

## やること

1. ec2-net-utilsのソースを取得する。
2. 当該ソースに含まれるSRPMを使ってRPMパッケージをリビルドする。
3. RPMをインストールする。
4. ec2-net-utilsのSystemdサービスユニットでネットワークインターフェースを設定する。
    - すると、セカンダリプライベートIPアドレスもよしなに設定してくれる。

## 導入から設定までを一気にやってくれるスクリプト

```bash:ec2-net-utils.sh
#!/bin/sh

yum -y install git rpm-build 

git clone https://github.com/aws/ec2-net-utils
rpmbuild --rebuild ec2-net-utils/ec2-net-utils-*.amzn2.src.rpm
rpm -Uvh ${HOME}/rpmbuild/RPMS/noarch/ec2-net-utils-*.rpm

for _if in `ip link | grep '^[0-9]' | awk '{print($2);}' | tr -d ':' | grep -v '^lo$'`; do
  systemctl enable ec2net-ifup@${_if}
  systemctl start ec2net-ifup@${_if}
done
```

### 実行方法

- 適当なディレクトリで前述のスクリプトを実行する。

```bash
ec2-net-utils.sh
```

- あとは再起動の度に、サービスとして読み直して設定してくれる。
MAMP Pro5でPHPのversion操作する方法

#私のスペック
ウェブエンジニアのバイトを初めて、数ヶ月のへっぽこ。

忘れん坊なので、わかったことを忘れないようにQiitaに残しておくことにします。

#私のMAMP Pro version
![スクリーンショット 2020-01-30 17.38.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524422/74396a6a-4007-180a-1604-c7bee0134401.png)


#私のMAMP Pro5でのPHP version表示はこんな感じ
![スクリーンショット 2020-01-30 17.34.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524422/0a3f3985-309a-137c-57e7-c796c6aff27d.png)

私のイメージとしては、PHP versionの横の上下矢印を押すと今💻に入っているPHP versionが表示されて選べるようになるものだと思っていたけれど、違った。

#MAMP Proで使いたいPHP versionに変える方法

**APP/MAMP/bin/php/**に移動する。
![スクリーンショット 2020-01-30 17.05.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524422/c407a9e7-a62f-732b-a842-9a22cf162cb3.png)

そこで_をつける。
![スクリーンショット 2020-01-30 17.43.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524422/68ada142-8e08-6915-2296-941b67100420.png)

例：もしPHP versionの7.0.15が欲しければ、7.0.15より新しい全てのversionに_をつける。だが今のスクショの場合、PHP 7.1.1が一番新しいのでPHP 7.1.1のみに_をつける。

例：もしPHP versionの5.5.38がが欲しければ、5.5.3より新しい全てのversionに_をつける。


#MAMP Freeの記事はたくさんあるくせに、MAMP Pro5の記事はすごい少ない。というかほぼ日本語のページは皆無ではないか？
そこで私がかなり頼りにしているサイトはこちら。
https://www.youtube.com/channel/UCIMvsVr1wewelvJmX-KPk0A
参考になれば幸いです。
全部英語で喋ってます。

#PHPの古いversionが欲しいけれど、どうやってdownloadするかわからないというかたはこちら
https://qiita.com/Himekichi/items/d668c35ec1466b4b1a45

##参考にしたサイト
https://kazumich.com/osx_free_mamp_php_change.html
https://documentation.mamp.info/en/MAMP-PRO-Mac/Settings/Hosts/General/#wordpress
https://www.youtube.com/channel/UCIMvsVr1wewelvJmX-KPk0A
Azure Cosmos DB ~NoSQLについて~

# はじめに
マイクロソフトのCosmosDBの勉強会に行ってきました。
いままでNoSQLについてあまり触れる機会がなかったので、
できるだけわかりやすいようにまとめました。

# データベースの種類
`MySQL`は誰もが1回は触ったことがあるデータベースだと思います。
MySQLは`リレーショナルデータベース(RDB)`という種類のデータベースです。
しかし最近は`NoSQL`と呼ばれるものがあります。

この`リレーショナルデータベース(RDB)`と`NoSQL`は何が違うのでしょうか。

## リレーショナルデータベースのメリット
・リレーションでデータをつなげることが出来る
たとえば`userテーブル`にユーザーの情報を持ち、その`id`を別のテーブルに`user_id`などとして持つと、
テーブルの連結ができる

・データの型が決まっている 
`CHAR型、 INT型, DATE型`などで入れられるデータが決まっているので
それ以外のものを入れられないので変なデータが入らず、整合性が高まる

・トランザクションで整合性が保てる
トランザクションを複数行ではれるので、途中で失敗してもロールバックすることですべてをもとに戻せる。


## リレーショナルデータベースのデメリット
・データ量が増加することにより、パフォーマンス低下に繋がる
膨大なデータ（例えばユーザーログ）等とは相性が悪い。

・データの型が決まっているので自由にデータを入れられない
JSON型のデータなどを扱うには相性が悪く、さらにカラムを1個追加する場合はSQLが必要である。

・`基本的`にはスケールアップ(DBサーバーのスペックを上げること）でしか対応できない
スケールアップにも限界があるので、巨大なシステムになるといつか詰む。




## NoSQLのメリット
・データの型が決まってないので自由にデータを入れられる
JSON型でもINT型でもDATE型でも、どんなデータでも自由に入れられるので拡張性がある。

・スケールアップでなくスケールアウト出来る
DBサーバーの台数を増やせるので柔軟に対応出来る

・拡張性に優れている
何個も簡単にレプリカつくれたりする

## NoSQLのデメリット
・一貫性ががない
トランザクション処理に弱いので、ここからここまでで一個のトランザクションっていうのが出来ない
※基本的には１トランザクション１件になる


# NoSQLは万能なわけではない
NoSQL向きなものとして例をあげると
ツイッターのメッセージ等は投稿してすぐに世界中のみんなが見れなくても特に問題にはならない
そのかわり、毎日大量に投稿される

逆にNoSQLに向いてないものとして整合性が重視されるものがある
銀行口座の金額は必ず正確でなければいけないし、予約システムでは二重予約などがおこってはいけない。
こういうものはリレーショナルデータベースが向いている

# 最後に
これらの基礎知識をもったうえで次はAzure CosmosDBについて実際にに触れていく
→次へ続く...
【Rails】devise-i18nでscopedなビューを翻訳するワザ

[Devise](https://github.com/heartcombo/devise) を使えば、Rails アプリにユーザー登録・認証の機能を少ない工数で追加できる。筆者もよくお世話になっているgemの一つ。

Devise そのものには日本語などの翻訳は含まれていないが、[devise-i18n](https://github.com/tigrish/devise-i18n) gem を追加することで、翻訳が利用可能になる。

しかし、Devise で複数の scope（`User` と `Admin` で分けるケースなど）を使っていると、devise-i18n で生成したビューはそのままでは `translation missing` になってしまう。これをうまく回避する。

# translation missingの原因

たとえば、以下のコマンドでビューを生成して、

```bash
$ bin/rails g devise:i18n:views users
```

`/users/sign_in` などを見ると、以下のように（一部が）翻訳されていないことがわかる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65644/7edb050e-76a3-ddc4-1a21-d076e034111b.png)


これは、devise-i18n で生成されるビューが、`t` の引数に相対指定をしているのが原因[^1]。

```erb:app/views/users/sessions/new.html.erb
<h2><%= t(".sign_in") %></h2><%# ←❗️こことか %>

<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="form-inputs">
    <%= f.input :email, required: false, autofocus: true %>
    <%= f.input :password, required: false %>
    <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, t(".sign_in") %><%# ←❗️このあたり %>
  </div>
<% end %>

<%= render "users/shared/links" %>
```

これをなんとかしたい。

# 解決策

採れうる策は2つある。

1. `t` の引数を、相対指定から絶対指定にすべて書き換える
2. 翻訳の YAML に、当該のビューに対応するキーを追加して、その下に一通りの翻訳をコピーする

1.は書き換えるファイルが多く面倒だし、せっかく自動生成しているメリットをあまり生かせない。2.は単純にコピーすると二重管理になってしまって良くないが、YAML の**アンカーとエイリアス**を使えば回避できる。今回は2.の方法を使う。

※ YAML のアンカーとエイリアスについては、この記事などが詳しい: [プログラマーのための YAML 入門 (初級編)](https://magazine.rubyist.net/articles/0009/0009-YAML.html#%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%BC%E3%81%A8%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9)

## エイリアスで翻訳を共有

まず、以下のコマンドで翻訳ファイルを生成する。

```bash
$ bin/rails g devise:i18n:locale ja
```

`config/locales/devise.views.ja.yml` に翻訳ファイルが生成されるので、このファイルを以下のように変更する。

```config/locales/devise.views.ja.yml
ja:
  activerecord:
    attributes:
      user:
        confirmation_sent_at: パスワード確認送信時刻

  # ...(略)...
  
    models:
      user: ユーザ
  devise: &devise # ←❗️①
    confirmations:
      confirmed: メールアドレスが確認できました。

  # ...(略)...

  users: *devise # ←❗️②
  admins: *devise # ← ❗️②
```

① まず、生成された翻訳ファイルの `devise` というキーに YAML のアンカーを設定する。アンカーは `&` 記号を使う。

```yaml
  devise: &devise
```

② 次に、ファイルの末尾あたりに、スコープと同名のキー（例: `User` モデルなら `users`、`Admin` なら `admins`）をそれぞれ作り、先程のアンカーをエイリアスで参照する。エイリアスは `*` 記号を使う。

```yaml
  # インデントはdevise:と同じレベルに合わせる
  users: *devise
  admins: *devise
```

もしスコープが増えたら、同じようにキーとエイリアスを追加する。

これで、翻訳されるようになる:tada:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65644/413e13e1-a006-3173-a64e-6c364f2865ae.png)


[^1]: たとえばこのケースであれば、ビューのファイルが位置する`users/sessions/`ディレクトリを元に、`users.sessions.sign_in`というキーの翻訳を探しにいく。
Visual Studio 2019 の C++/CLI プロジェクトでリンクのエラーが発生する。

## 背景

以前 Visual Studio 2012 で作成した 32bit の VC プロジェクトを Visual Studio 2019 で 64bit 対応したときに、久しぶりに触って色々忘れていたのでメモ。

## 概要

プラットフォームを「x64」に切り替えてビルドした所、リンクで下記のようなエラーが発生。

>error LNK2028: 未解決のトークン (0A00000C) "extern "C" int __cdecl SetForegroundWindow(struct HWND__ *)" (?SetForegroundWindow@@$$J0YAHPEAUHWND__@@@Z) が関数 "public: static bool __clrcall HogeApp::ActivateWindow(class System::String ^)" (?ActivateWindow@HogeApp@@$$FSM_NPE$AAVString@System@@@Z) で参照されました。

## 解決方法

リンクのエラーなので、作成したプログラムから SetForegroundWindow 関数があるライブラリにパスが通っていないため起こる。

[SetForegroundWindow](https://docs.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-setforegroundwindow) 関数をググってみると、user32.lib にあることがわかるので、プロジェクトのプロパティを開き、 [構成プロパティ]-[リンカ]-[入力] に user32.lib を追加する。

![HogeAppProp001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58491/d1eb1549-78e9-f9b3-2a46-f78e5af3fa59.png)
zshで末尾に改行がない出力が表示されない問題

コマンドの返り値で末尾に改行がないケース結構ありますよね？curlでAPI叩く時とか。
zshでは、末尾に改行がないアウトプットを表示しないようです。
私の環境では、terminal上では普通に表示されたのですが、Emacsのshell-modeでは何故か表示されず…
そんな時は`.zshrc`に以下を記述すれば、改行がない出力でも普通に出力してくれるようになります。

```
unsetopt promptcr
```

私は、Emacs側の問題だと思って情報を探したため、中々正解に辿り付けなかったので、同じような状況の人のために、Emacsで引っかかるように記事にしてみました。
PowerShellでXMLのノードを挿入(結合)する

## XmlNodeクラス完全に理解した（わからん）

PowerShellはxmlファイルの読み込みはすごく楽。

```xml.ps1
$xml = [xml](Get-Content ./filename.xml)
#あとはオブジェクトみたいに$xml.Document....って感じでアクセスできる。
```

ただ、ノードを挿入というか結合するケースがよく分からなかった。
やりたいことは単純で、下記みたいにAlphaとBravoのNoteを結合（AplphaにBraboのNoteを挿入）したい。

```Alpha.xml
<Document>
  <Name></Name>
  <Note></Note>
  <Note></Note>
</Document>
```

```Bravo.xml
<Document>
  <Name></Name>
  <Note></Note>
  <Note></Note>
  <Note></Note>
</Document>
```

でネットで色々と調べてみたら、冗長な書き方ばかりで
「こんなコード使いまわせないよ…」って気持ちになった😢

そんなわけで、重たい腰を上げてMSDNを読み込むことにした。
[XmlNode クラス](https://docs.microsoft.com/ja-jp/dotnet/api/system.xml.xmlnode?view=netframework-4.8)

そしたら、どうやらImportNodeメソッドってやつがあるらしい。
https://docs.microsoft.com/ja-jp/dotnet/standard/data/xml/copying-existing-nodes-from-one-document-to-another

というわけで、こんな感じのさっぱりしたコードが出来上がりました。めでたしめでたし。

```sample.ps1

$alpha = [xml](Get-Content ./alpha.xml)
$bravo = [xml](Get-Content ./bravo.xml)

# $bravo.GetElementsByTagName()のリターンはSystem.Xml.XmlNodeList
$bravo.SelectNodes("//Note") | % {
    [void]$alpha.Document.AppendChild($alpha.ImportNode($_, $true))
}
#コードに誤りがあったので修正しました。@taruntaさんに感謝。
```

## 余談

型の互換に手間取って少し時間がかかった。
個人的には下記のコードで結合してくれたら直感的だし嬉しいなって思う。

```powershell
$alpha = [xml](Get-Content ./alpha.xml)
$bravo = [xml](Get-Content ./bravo.xml)

$alpha.Document.Note += $bravo.Document.Note
# =>エラー。

# ちなみに
# $alpha.Document.Note + $bravo.Document.Note
# はできる。というのもこの時点では両方ともSystem.Arrayに変換されているから。
```
MAMP ProのDBの欄にある小さいアイコンで表紙されているphpMyAdminが光って表示されない

#私のスペック
ウェブエンジニアのバイトを初めて、数ヶ月のへっぽこ。

忘れん坊なので、わかったことを忘れないようにQiitaに残しておくことにします。

#MAMP Pro使っているときにふと気が付いた
![スクリーンショット 2020-01-30 17.13.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524422/57824094-7ab8-3081-50eb-e4ff3ed0beec.png)
MAMP ProのDBの下にこのようなアイコンがあることを。
![スクリーンショット 2020-01-30 16.16.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524422/cc9117e4-1f0b-65f1-31f6-7f6ec9dc87b5.png)
**今はphpMyAdminが光って表示されていますが、PHPのversionの5.4.45を使っているときはphpMyAdminが光って表示がされませんでした。**

**現在使っているPHPのversionは7.2.21です。**
jsでurlからファイルをダウンロード

aタグを作って、urlを実行してあげればいいだけ

```js
  downloadByURL(url: string) {
    const link = document.createElement('a')
    link.download = 'result.csv'
    link.href = url
    link.click()
  }
  downloadByURL('ファイルのURL')
```
Oki Mac用のプリンタドライバをLinuxに入れる方法

会津大学で採用されてるプリンタOKI B841dnにLinuxから印刷を試みても、
Linux汎用のドライバでは、変なバイナリの羅列がでてくるだけ。。。

OKIのサイトにはB841のCUPS用ドライバがないのですが、
Mac用のドライバに含まれているので、そこから抽出してきて使います！！

※ 概要だけざっと書きました！希望があれば詳しいインストール方法とか追記するので、気軽にコメントください！！ ※

# でも大変でしょ

```bash
wget https://www.oki.com/jp/printing/download/B841-PS-MX-DRV-200_43747.dmg
7z x B841-PS-MX-DRV-200_43747.dmg
```

# 詰まったとことか

Filterはオーナー権限（７５５）にしないと、「has insecure permissions」といわれるので注意。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293301/552d17db-e683-fbcd-6bbb-0eb30928cb87.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293301/a9c2fdf4-755a-8906-2c73-4f736692ce46.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293301/f46371f7-1e40-9eea-627b-a9677a72bc6e.png)

# おまけ

ここまで頑張りましたが、実は「OKI B841dn」にはwebプリント機能があります。例えば会津大なら普通にブラウザから`<プリンタの名前>.u-aizu.ac.jp`を叩くと、管理画面的なものがでてきます。

そこから、「印刷」を選択すると、なんとwebプリント画面が出てきて、pdfを簡単に印刷できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293301/3283037c-172f-b635-5bb3-56259af4a0b9.png)

もし、ドライバ入ってないPCでちょっと印刷したいときに便利です。プリンタに全てキャッシュしてから印刷するようなので、普通にlpdとかで印刷するより速いです。(あれ、、、ドライバ無くてもいいいんじゃね。。。)
【Rails】よく使うルーティングまとめ

色々あるので、よく使うやつをまとめました。

```rb:config/routes.rb
# 基本
get '/login', to: 'sessions#new'
post   '/login',   to: 'sessions#create'

# root path(トップページ)
root to: 'static_pages#index'

# resources(index, show, new, create, edit, update, destroy)
resources :users

# /:idの代わりに/:hogehogeを使う
resources :users, param: :hogehoge

# resourcesで一部のアクションだけ使う
resources :tasks, only: %i[new create edit update]

# resourcesでアクションを追加
resources :products do
  collection do
    get :sold
  end
end

# resourcesでアクションを追加（editアクションのように、パスにidをつける)
resources :products do
  member do
    get :short
  end
end

# 組み合わせ
resources :pw_resets, only: %i[new create edit update] do
  collection do
    get :complete
  end
end

# 名前空間を分けた場合
namespace :admin do
  root to: 'static_pages#index'
  get '/login', to: 'sessions#new'
.
.
end

# 開発環境だけルーティングを有効化
if Rails.env.development?
  mount LetterOpenerWeb::Engine, at: '/letter_opener'
end
```
PHPの古いバージョンはここにあるぞ

#私
ウェブエンジニアインターンを数ヶ月しかしていない、へっぽこ。

#PHPの主に古いバージョンはどこかphp.net内で探しまくった
忘れそうなので、Qiitaに記事にしておこうと思う。

#PHPのバージョンダウンロード方法
1.まずはphpの公式サイトへ。
https://www.php.net/

2.次にdownloadのページへ。
https://www.php.net/downloads
![スクリーンショット 2020-01-30 16.54.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524422/016d1769-c30e-dbbc-5c0f-693e13fc94c1.png)
PHP 7.4.2なんて最新バージョン、今の私には必要がない。
さて、古いバージョンはどこか・・・・。

3.**Old Archives**って小さく書いてあるところへ。（なかなか見つけられなかったw）
https://www.php.net/downloads ページの一番下までスクロールすればあるだろうと思っていて、なかったから焦った:scream:

古いPHPのバージョンはこっちのURLでした。
**https://www.php.net/releases/**
![スクリーンショット 2020-01-30 16.56.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524422/e9671ff2-d07f-c31e-2847-6113e870a9f5.png)

![スクリーンショット 2020-01-30 16.56.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524422/5c47f5f3-46b2-49d3-0754-45b32d451377.png)

4.欲しいPHPのVersionをダウンロード

5MAMP/bin/php/の中に欲しかったPHPのバージョンをブッコム
![スクリーンショット 2020-01-30 17.05.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524422/6964fb5a-ce75-0607-374d-475d4b93b412.png)
忘れそうなので、赤い印でもつけておく。

おしまい
PE解析ツール　PPEE(Puppy)の紹介

PE解析ツールの1種であるPPEE(Puppy）について紹介します。
従来は[pestudio](https://www.winitor.com/get.html)を愛用していましたが、無償版の場合見れる機能がかなり削減されてしまったため、（ライセンス買っておらず申し訳ない気持ち。。。）Puppyに移行しました。

シンプルで非常に使いやすく、さらにプラグインを追加することで応用的利用も可能ということで、
初学者から熟練者まで使えるツールだと感じました。

#インストール
下記のサイトよりインストールし、展開することで利用開始できます。
https://www.mzrst.com/

#画面構成
exeを実行して、ファイルをドラックアンドドロップすることで解析結果が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102081/7976f1fd-b61b-f29a-6ed7-309267e01802.png)
DOSheader(マジックナンバー確認）、Rich Header（攻撃者のヒントあるかも）も見れますし、
あとファイル内のStringも出してくれるので、表層解析である程度通信先が見えたりする可能性もあります。（鵜呑みにするのはNGですが）

#プラグインの紹介
デフォルトで用意されている便利なプラグインが２つありますので紹介します。
##１．File Information
Plugins>Fileinfo　より利用可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102081/fe0c927f-6692-5496-2589-8f52afc01baa.png)

便利な点として下記があるかなと思います。
１）ファイルのハッシュはもちろんfuzzyhash（SSDEEP,Imphash）、ファイルのエントロピーも表示される
>FuzzyHashについては過去記事を参照ください。
>https://qiita.com/harapeco_nya/items/57906207c066f7d6d658

２）VirustotalやMetadefenderの照合も行ってくれる
３）テキストのエクスポートも可能

##２．Yara Plugin
Plugins>YaraPlugin　より利用可能です。
マルウェア解析をするにあたってYaraは使う機会が多いかと思うので、プラグインで使えるのは非常にありがたいと思います…！
実際にサンプルファイルで検証を行いました。
今回作成したファイルについては下記の記事を参照しています。
https://qiita.com/yifey/items/473b6bc9baae46738925

###検証内容
####１）検証に必要なファイルを作成
・検証用のテキストファイル（画像下）
・Yaraスキャン用のYaraファイル（画像上）
<img width="1025" alt="スクリーンショット 2020-01-29 17.19.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102081/e7e928a6-4d94-b1d0-c0eb-ccf25fe82940.png">
####２）Yaraスキャンの実行
ドラックアンドドロップでスキャンしたいファイルを解析し、
YaraPluginの「Yara Rule File」にYaraファイルをアップロードする。

下記のように、Yaraルールによりスキャンした結果が表示されます。見やすい～～～
<img width="1068" alt="スクリーンショット 2020-01-29 17.20.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102081/1f1e62cd-2d10-1933-db72-b1cf19217513.png">
あとから外部キーを設定するには?

#1対多において、あとから外部キーを設定する。

##前提条件
投稿機能作成済み(今回はtaskアプリ)
User機能作成済み

```
$ rails g migration AddUserRefToTasks
```

###マイグレーションファイルを編集
```add_user_ref_to_tasks.rb
add_reference :tasks, :user, foreign_key: true
```

###taskモデルとuserモデルを編集
```task.rb
#省略
belongs_to :user
#省略
```

```user.rb
#省略
has_many :tasks
#省略
```
文系出身エンジニアが学ぶパッケージ管理ツールとは？

#記事を書く背景
`yum`とか`homebrew`とか`npm`とか普段何も考えずに使っていたコマンドがどういうものなのか気になり調べたところ、それらは**パッケージ管理ツール**というものであると判明しました。
じゃあそのパッケージ管理ツールって何なの？となり記事を書き始めました。

#Wikipediaによると
>パッケージ管理システム（パッケージかんりシステム）とは、
OSというひとつの環境で、各種のソフトウェアの導入と削除、
そしてソフトウェア同士やライブラリとの依存関係を管理するシステムである。

#簡単にいうと
ソフトウエアをインストールしたり、アップグレードや削除するときに使うツールのこと。

#さらに詳しく
例えば自分のパソコンに「Chrome」をインストールする例を考えてみます。
普通のやり方であればChromeをインストールするURLにアクセスし、
「Chromeをダウンロード」のボタンを押し、そのダウンロードしたファイルを開けばすぐに使えるようになります。

これをパッケージ管理ツールを使わずにコマンドでインストールしようとすると、
Chromeのソースコードを入手しtarで解凍、ソースコードを「./configure」「make」「make install」という3つの手順を使い自分でビルドしなければなりません。

しかしこのやり方だと、依存関係を自分で解決しないといけないという大きな問題があります。
※依存関係
Aというソフトウェアを使えるようにするにはBというソフトウェアの×××のバージョンをインストールしなければ使えないような状態のこと。AはBに依存している。

そこで使うのが**パッケージ管理ツール**です。
パッケージ管理ツールがChromeをインストールする際に、必要な依存関係を自力で解決してくれます（必要なソフトウェアを自動でインストールしてくれる）。
これによりコマンドで簡単に「Chrome」をインストールすることが可能になります。

例：UbuntuにChromeをインストールする
※実際にインストールする際には下記コマンドの前にリポジトリに追加する作業や公開鍵の登録などの作業があります。
参照：[Google Chromeインストール[On Ubuntu 16.04 LTS]](https://qiita.com/spiderx_jp/items/e6189a736ddec14ffa23)

```
// aptがパッケージ管理ツールです
$ sudo apt-get install google-chrome-stable
```

#パッケージ管理ツールの種類の例（OSごと）
【Red Hat系Linux】
■rpm
■Yum
【Debian系Linux】
■APT
【macOS】
■Homebrew
【Windows】
■Chocolatey
【Node.js】※これはOSではない？
■npm

#参考文献
[Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)
[【パッケージ管理システムとは？】Linuxでのパッケージ管理の使い方まとめました](
https://eng-entrance.com/category/linux/linux-package)
[Linuxにソフトウェアをインストールするには？](http://note.kurodigi.com/post-0-15/)
[パッケージ管理の考え方](https://ja.opensuse.org/%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%81%AE%E8%80%83%E3%81%88%E6%96%B9)
Webサイトのアクセス解析の第一歩【Googleアナリティクスの設置】

# はじめに
前回は、アナリティクスのアカウント開設まで行ったので、今回は実際に、数値計測ができるよになるまでをまとめていこうと思います。

# 事前準備
・[アナリティクスのアカウント](https://qiita.com/Sakurai1111/items/950eb8662b46cd482c93)
・アクセス解析したいサイト（URL）
・対象のページ

# トラッキングコードの埋め込み
### 【ステップ1】 アクセスログをとるページにトラッキングコードと呼ばれるコードを挿入します。
アナリティクスのアカウントを開設したばかりの人は、トラッキングコードが開かれていると思います。
![000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19460/a1503697-cee1-d057-04a2-e5f4e0315349.png)

「①管理」→「②トラッキング情報」→「③トラッキングコード」からでも確認することができます。
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19460/3c010acd-6bd8-9cea-636a-868c86d72efe.png)


### 【ステップ2】 </head> タグの直前にトラッキングコードを挿入します。
管理するうえでトラッキングコードの変更や、仕様変更によりコードの差し替えなど発生する場合があるので、ページにそのまま挿入ではなく、極力トラッキングコードは一元で管理できるようにしておいた方がよいです。
・JS外部ファイルにして、読み込む
・PHPのインクルードでヘッダーなど共通パーツを使用している場合は、ヘッダーなどに挿入すればOK
※手動で全ページに挿入すると対応漏れや大量のページの場合、時間がかかるのでまとめて管理することをお勧めします


### トラッキングコードをそのままペースト
```html
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- ↓↓↓↓ここからGAタグ↓↓↓↓ -->
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-xxxxxxxxx-1');
  </script>
  <!-- ↑↑↑↑ここまでGAタグ↑↑↑↑ -->
</head>
<body>

</body>
</html>
```

### JS外部ファイルの場合
設置する際にひと手間必要になります。

```index.html
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./js/ga.js"></script>
</head>
<body>

</body>
</html>
```

```/js/ga.js
document.write('<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-1"></script>');
window.dataLayer = window.dataLayer || [];

function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'UA-xxxxxxxxx-1');
```
※トラッキングコードをそのまま（HTMLを）JavaScriptの外部ファイルにできないので、変更。
（UA-xxxxxxxxx-1 の部分を自身のトラッキングIDに差し替えれば使用可能）

### 【ステップ3】作業したファイルをアップロード
アクセス解析をしたページに埋め込みが完了したら、ファイルをサーバーへアップロードします。
携帯やGAを開いているブラウザ以外で確認すると実際に数値が取得されます。
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19460/b6193942-ac07-2cfd-d0ef-3541b9dd0a65.png)
※表示の画面は「リアルタイム」

---
### 【その他】よく見るページ
リアルタイムでどれくらい見ているかなど確認できる。
リアルタイム！
![riaru.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19460/ebb641ca-3b0c-8818-ee5f-3dc71d98f282.png)

全ページでどこがよく見られるか確認できるすべてのページ
（右上で期間を変えることができる）
![subete.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19460/3b13e918-f410-6cf4-76eb-e6efdf8b747e.png)

他にもいろいろ！
URLにパラメーターを付けたり、組み合わせることで、媒体ごとに、
どのバナーから流入したかなど調べることが可能★

以上
【SharePoint Framework】アプリカタログへアップロードした際のエラー

# はじめに
SharePoin Frameworkで開発したWebパーツ（.sppkg）をアプリカタログにアップロードした際に、以下の画像のようなエラーが発生しました。
![スクリーンショット (1998).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246142/e29861d7-6389-efda-c832-1628ec78c629.png)

# 解決策
configフォルダ内にありますpackage-solution.jsonファイルの`isDomainIsolated`を`false`に設定することで解消されます。

# 参考
分離された Web パーツ
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/web-parts/isolated-web-parts
🌴【SourceTree】特定ファイルのみ取り出して別ブランチに取り込む

## 環境
Windows 10
SourceTree 3.3.4
git version 2.24.1.windows.2

## やりたいこと

あるブランチで追加したファイルが別のブランチでも欲しくなった
コピペで追加してもいいが、コメントとかそのまま取り込みたい

## やったこと

### 1. ファイルを追加したコミットから対象ファイルを選択し「この変更(Hunk)を取り消す」


### 2. 対象ファイルの追加が取り消され削除状態になるのでaddしてcommitし取り消しコミットする


### 3. 取り消しコミットから対象ファイルを選択し「この変更(Hunk)を取り消す」


### 4. 新規追加状態になるのでaddしてcommitすると追加コミットになる


### 5. 目的のブランチをチェックアウト、追加コミットを右クリックしてチェリーピック
FindBugs-IDEAのエラー

##経緯
静的解析したかったので、AndroidStuidoにFindBugsを導入してみたがエラーが出て動かなかった。
以下のようなエラーが出ていた。

>Error:Internal error: (java.lang.ClassNotFoundException) com.google.wireless.android.sdk.stats.IntellijIndexingStats$Index

最初は設定がおかしいとは思っていたが、どうやらそうではないらしい。

##原因
どうやらjava9以降はFindBugsが使えないらしい…

>FindBugsはメンテナンスされておらず、Java 9以降用にコンパイルされたバイトコードをサポートしていないため、FindBugsプラグインは非推奨になり、Gradle 6.0で削除される予定です。 代わりにSpotBugsプラグインの使用を検討してください。

https://stackoverflow.com/questions/55844077/findbugs-idea-classnotfoundexception-com-google-wireless-android-sdk-stats-int

##結論
上記サイトではSpotBugsの使用を検討してほしいとのこと

##感想
エラーの意味が解らなかったので、解決してよかった。SpotBugsを検討してよう。
【備忘録】vue-cli-service アプリへの Semantic UI 導入

## 概要
```vue-cli-service``` ベースアプリに Semantic UI を導入したので、
その時の手順を備忘録として残しておく。
ベースアプリの作成手順については[こちら](https://qiita.com/nkk777dev/items/d8ae0298e7c9b0a6c048)を参考（TypeScript利用しないで作成）

## 概要
* vue-cli-service：4.1.2
* Semantic UI：2.4.2

## 導入手順
* Semantic UI のモジュールをダウンロード
  * https://semantic-ui.com/introduction/getting-started.html
  * npm install しての手順でやることも考えたが、結局gulpでビルドしたモジュールを作る必要があるのでやめた
  * カスタマイズ加える場合は必要だが、今回はいったんなし

* ```semantic``` というフォルダを作りダウンロードしたモジュールを配置
  * 必要なモジュールのみ配置（下記の画像参照）
  * ![2020-01-30_13h04_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/7cbdf02d-0378-5eb0-8f31-38527bf9a2bb.png)

* jQuery を追加
  * jQuery：Semantic UI の依存パッケージ

```
npm install jquery --save
```

* jQuery をプラグインとして登録
  * ```vue.config.js``` から ```vue-cli-service``` 内の ```webpack``` へ追加設定する
  * コンポーネントごとにjQueryを```import```せずに済むようにするための登録

```javascript:vue.config.js
const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      })
    ]
  }
};
```

* ```main.js``` にSemantic UI の js,css を ```import``` する。これで導入完了！

```javascript:main.js
import '../semantic/semantic.min.css'
import '../semantic/semantic.min.js'
```

## まとめ
普通に webpack 利用時の Semantic UI 導入と、ほぼ同じような設定だが、
```vue-cli-service``` 特有の ```vue.config.js``` の設定で少しつまづいてしまったので、備忘録として残しておく。

ドキュメント読めばすぐわかる内容なので、ドキュメントちゃんと読もうと思う。。。

## 参考：Semantic UI 利用例
```vuejs:Abput.vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="ui container">
      <div class="ui labeled button" tabindex="0">
        <div class="ui red button">
          <i class="heart icon"></i> Like
        </div>
        <a class="ui basic red left pointing label">1,048</a>
      </div>
      <div class="ui labeled button" tabindex="0">
        <div class="ui basic blue button">
          <i class="fork icon"></i> Forks
        </div>
        <a class="ui basic left pointing blue label">1,048</a>
      </div>
      <div class="ui yellow progress" data-percent="60">
        <div class="bar"></div>
      </div>
      <div class="ui yellow progress" data-percent="60">
        <div class="bar"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    $(".progress").progress();
  }
};
</script>
```
![2020-01-30_16h44_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/4323c92f-4a1b-1675-7e4e-40778dc94a11.png)

## 参考：プロジェクト構成
```
root
│
├ node_modules
│
├ public
│
├ semantic
│
├ src
│　│
│　├ assets
│　│
│　├ components
│　│
│　├ router
│　│
│　├ store
│　│
│　├ views
│　│　│
│　│　└ About.vue
│　│
│　├ App.vue
│　│
│　└ main.js
│
├ package.json
│
├ package-lock.json
│
└ vue.config.js
```
実体参照についておさらい

#はじめに

最近文字コードについて整理している中で、改めて復習がてら
文字参照・実体参照について備忘録にしてみました。
ふわっと捉えている人や全く知らない方の参考になれば幸いです。


#実体参照とは

HTMLで、主に特殊な文字を出力するために使用される特殊な単語。
特殊な文字の例としては
copyright sign 著作権表示記号の©、ドイツ語などに含まれるウムラウト¨
などがあります。

実体参照の書き方としては「&uml;」や「&#168;」(ウムラウトの例)
「数値文字実体参照」や「エンティティコード」とも言います。

たとえば、HTMLタグそのものを出力したい場合、「<IMG>」とそのまま書いてしまうと、HTMLタグと認識されてしまうため、出力されなません。これは、「<」や「>」が、タグを囲む記号と見なされるため。
そこで、「<」や「>」を、そのままの文字として出力する方法が必要となります。そのため、こういった記法が存在します。

#「文字実体参照」と「数値文字参照」

実体参照には上記の例のように2通りの書き方がありますが、もう少し詳しく見ていきたいと思います。

■文字実体参照
「文字の名前」を指定する方法。
「&文字の名前;」とすることで、その文字が出力されます。
よく使われる文字の「文字の名前」は、以下の通り。
　
・「"」：&quot;
・「&」：&amp;
・「<」：&lt;
・「>」：&gt;
・「 」：&nbsp;

たとえば、「<"あい&うえお">」をHTMLで出力する場合には「&lt;&quot;あい&amp;うえお&quot;&gt;」と記述することになります。
その他、多くの文字や記号にこの名前が付けられているが、このように元の名前(一般的な呼び名)から変に短縮されているため分かりにくい。。。
間違えないよう注意が必要です。

■数値文字参照
「Unicodeでの文字コード」を指定する方法。
「&#10進数の文字コード;」、あるいは「&#x16進数の文字コード;」という形でUnicodeの文字コードを指定すると、その文字を出力することができます。
たとえば「あ」はUnicodeでは0x3042（==12354）のため、「&#x3042;」もしくは「&#12354;」と記述します。
数値文字参照であれば、Unicodeの文字であればたいがいの文字を表現することができます。
ただし、Webブラウザが対応していること、クライアント側にフォントが存在することが条件となるので注意が必要です。


#２つの書き方の違いについて

結論から言えば、「文字実体参照」と「数値文字参照」は、記法が異なるだけで、基本的に同じ機能です。
使い分けに関しては見た目でわかりやすいため通常は「文字実体参照」を使用し、
強制的にUnicodeで表示させたい場合などには数値文字参照を用いるのがよさそうです。日本語だと文字化けするケースとか。


#終わりに
よく使うものであれば文字実体参照のほうで覚えてしまえるレベルですし、活用は楽かと思います。
しかし、文字コードを考慮しなければならない場合などには数値文字参照が望ましいので、やはりチートシートなどを
用意して、いちいち調べる時間を省く工夫をしておくと良さそうです。ツールも活用していきましょう。

変換ツール↓
http://yasu.asuka.net/orkut/conv.html

必要な情報を整理して引き出すことは、プログラミングだけでなく様々な場面で役立つので
自分なりの工夫をしてみましょう！（一番自分自身に言い聞かせています・・・！）

何かご指摘や追加して欲しい情報などあればご気軽にご連絡お願いします！
これからもこんな感じで少しずつ備忘録・チートシートなども増やしていきたいと思います。

参考：
https://takuki.com/dennou/42-unicoder.htm
Railsでscaffoldを、Herokuにデプロイするまで　


# はじめに
Railsでscaffoldで作成した簡易アプリを、Herokuにデプロイして、外部から利用できるようにするまでの一連の流れをまとめてみた。

# 環境
ruby 2.5.1p57
Rails 5.2.4.1
Ubuntu 16.04.5 LTS
Windows10
Vagrant

# 手順
Herokuでは、sqlite3が利用できず、PostgreSQLしか対応していないため、データベースは、必ず、PostgreSQLを指定してプロジェクトを作成します。
sqlite3のまま、Herokuにデプロイしようとするとコケるようです。

```
$rails new myapp -d postgresql
$cd myapp
```

Gemfileを開いて、**gem 'pg'**が記述されている事を確認する。

```
gem 'pg', '>= 0.18', '< 2.0'
```

>補足
rails new時に、postgresqlを指定したため、Gemfileに、gem pgが、デフォルトで付いてくる事になります。rails new時に、postgresqlを指定しなかった場合、Gemfileでgem pgを追加して、gem sqlite3を削除して、bundle installをする事になります。因みに、gem pgはproductionに追加しないと、Herokuで動作できないので注意。
>
ググると、Gemfileに**gem rails_12factor**も追加するように指示している情報もあるが、どうやら、古いバージョンのRailsの場合に必要だったようで、自分のバージョンでは不要との事。
>
下記の記述がデフォルトである筈なので、これが、**rails_12factor**の代用をしているようです。

```config/environments/production.rb
  # Use a different logger for distributed setups.
  # require 'syslog/logger'
  # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger    = ActiveSupport::TaggedLogging.new(logger)
  end
```

database.ymlを開いて、Herokuの本番環境用の設定を記述する。環境変数名は、Herokuが自動で用意してくれます。development用の設定は環境に合わせて個別に設定する必要があります。

```
production:
  url: <%= ENV['DATABASE_URL'] %>
```

scaffoldを作成する。

```
$rails g scaffold List name:string age:integer
```

データベースを作成した後、テーブルを作成する。

```
$rails db:create
$rails db:migrate
```

この段階でローカル環境でscaffoldが動く事を確認する。

```
$rails s -b 192.168.33.10 -p 3000
```

動きました。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94029/79941af0-664d-9ad8-e153-957930065a98.png)
gitに登録します。

>補足
rails newした時点で、git initも内部で走っているのだが、お約束としてやっておく。

```
$git init
$git add .
$git commit -m 'first commit'
```

Herokuにログインする。ログインアカウントを聞いてくるので入力する。
（※heroku loginコマンドを利用するには、事前に、Heroku CLI(Toolbelt)をインストールしておく必要があります）

```
$heroku login --interactive
```

Heroku上にアプリケーション名（リモートリポジトリ）を新規作成します。

```
$heroku create
```

git remoteに上記で作成したアプリケーション名を追加しなくても、自動で登録される事になります。念のために確認

```
git remote -v
```

ローカル環境から、Herokuのリモートリポジトリに**push**します。この時、必ず、**heroku create**してから、**push**する事。

```
$git push heroku master
```
Heroku上に、PostgreSQLのDBを作成します。

```
$heroku run rails db:migrate
```

URLを確認して、ブラウザから表示します。

```
$heroku open
```

**Manually visit https://polar-brook-18695.herokuapp.com/ in your browser.**のように、作成されたURLが表示されるので、URLの最後に、アプリ名「lists」を付けて、ブラウザから表示してみる。
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94029/32e18a9c-3a41-d4c7-a030-1a7412e424d6.png)
表示されました！　登録もOK。ちゃんと動いています。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94029/17bb01c8-b6fb-1662-1ef9-68cd814678df.png)

ログアウトして終了です。

```
heroku logout
```
# 参考URL

https://qiita.com/tsuyoshioshima/items/10a0b82ce949a60062a9
[Django]プロジェクト名を変更する

# はじめに
プロジェクト名を変えたくなったので変えてみた備忘録です.  
環境
python 3.6
Django 2.2

ディレクトリ構成

```python
mysite/
 ├ manage.py        # 変更
 └ mysite/
     ├ __init__.py
     ├ settings.py  # 変更
     ├ urls.py
     └ wsgi.py      # 変更
```

# 変更する
manage.py、settings.py、wsgi.py を変更します.

```manage.py

def main():
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mysite.settings') # ここ
    ...

```

```settings.py
ROOT_URLCONF = 'mysite.urls' # ここ
...

WSGI_APPLICATION = 'mysite.wsgi.application' # ここ
```

```wsgi.py
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mysite.settings') # ここ
```
あとはフォルダ名を変更したら、問題なさげでした.  

# おわりに
だめなときはどこかしらに旧プロジェクト名が潜んでいるので、「実行/デバッグ構成」、「環境」、「環境変数」の下を調べるといいみたいです.  
参考
[python - djangoでプロジェクト名を変更する](https://tutorialmore.com/questions-942860.htm)
go-transproxy as a service

[プロキシとの戦いに疲れたのでgoで透過プロキシを作ってみた \- Qiita](https://qiita.com/wadahiro/items/7fa852b7217940e6ef26)

[Systemdを使ってさくっと自作コマンドをサービス化してみる \- Qiita](https://qiita.com/DQNEO/items/0b5d0bc5d3cf407cb7ff)


sudo nano /etc/systemd/system/transproxy.service

```
[Unit]
Description = go-transproxy service

[Service]
ExecStart = {fullpath}/go-transproxy/bin/transproxy  -private-dns {option_value} -dns-over-https-enabled -tcp-proxy-dports 2222 {othe optionr}
Restart = always
Type = simple
Environment = "http_proxy=http://{ip}:{port}"
Environment = "https_proxy=http://{ip}:{port}"
Environment = "no_proxy={ip},{hostname},{etc}"
StandardOutput = null

[Install]
WantedBy = multi-user.target
```
sudo systemctl daemon-reload
sudo systemctl enable transproxy.service
sudo systemctl start transproxy.service
sudo systemctl status transproxy.service


これは私の環境でコンテナを使うとき用の設定であり、起動オプションはそれぞれの環境・用途に合わせて変える必要あり。

また、デフォルトで22番ポートを制御しちゃう（してくれる）ので、--tcp-proxy-dportsオプションで適当なポートに変えてあげないとSSH経由でログインできなくなった。
SSH接続するときに以下のような、

> ssh_exchange_identification: read: Connection reset by peer

や、
> Remote side unexpectedly closed network connection

などのエラーが出たらここを疑うべし。
オブジェクト指向について

#はじめに
私がこれまでプログラミングを勉強して学んできた中で、ちゃんと理解出来ているかどうかの復習も兼ねてよく聞く言語や言葉の意味を書いていこうと思います。

初めての投稿となりますので、多々至らぬ点があるとは思いますがどうぞよろしくお願いします。
#この記事の内容について
私が通っていたプログラミングスクールで学習を進めていた時によくオブジェクト指向という単語を聞くので、その事について改めて見直してみようということでこの記事を書いてみようと思いました。
オブジェクト指向はプログラミングを学習していたらよく聞く単語の一つだと思いますが、いざ説明してくださいと言われると難しいな・・・ってなりますよね。

まず、ザックリとした説明で言ってしまうと

#####「モノ」を組み立てていくように表現して、コンピュータに動作させていくという概念

です

正直、自分で書いてても？？？ってなるくらい簡潔に説明が難しいですね・・・

#何故難しく感じてしまうのか
そもそもオブジェクト指向の説明に明確な正解は存在せず、概念であるために皆さんも学習しているうちにオブジェクト指向について調べても、ほぼ全ての記事がそれぞれ説明の仕方や解答が違っていて混乱したと思います。

なので、オブジェクト指向は割と曖昧な答えになってしまうものだと思っているので、大事なのはなんとなくのイメージが掴めていて、それを伝えられたら良いものだと僕は考えました。

#####100％理解するのではなく、ザックリ理解からしてみよう

そうすると少しずつオブジェクト指向ってこうなんだと理解していけるようになれると思います。

#オブジェクト指向の必要性
そもそもオブジェクト指向が何故必要とされいるのかというと、やはりプログラミングの書き換えが楽になり、変更に柔軟に対応できるようになるというのが一番になってくると思います。

オブジェクト指向は、プログラミングの対象となる手順を一つの「モノ」としてとらえる手法のことを指しているので、それぞれの「モノ」に役割を与えるという事をして、変更があればその一つの役割の「モノ」の中身だけ変更すればいいで済むので、後々変更する可能性があるプログラムであったりしたら、オブジェクト指向で作っておいた方が良いと思います。

#まとめ
オブジェクト指向を理解する事で変更に強くなることは記載しましたが、他にもメリットは存在します。
変更に強いにも含めて4つのメリットで纏めると
#####・プログラムの変更に柔軟に対応できる。
#####・同様の機能はコードが使い回せるので、コードの記述量が減り、開発工数が削減できる。
#####・改修時の影響範囲が限定され、不用意なバグが減らせる。
#####・大規模な開発において、複数人で分担して開発しやすい。
に、なります。

オブジェクト指向のメリットも抑えて概念をザックリと理解をすれば、少しずつわかっていけると思います。
私もまだまだ理解度が足りていないので、もし皆さんのオブジェクト指向に関する知識やアドバイスがあれば是非教えていただけると嬉しいです。
初心者でも簡単。Vue.jsで１画面複数パターンを表示する方法

Vue.jsを使ったサイトの開発での主にHTML/CSSでコーディングをしています。(JavaScriptはjQuery+独習で基本を抑えているレベル)

１画面で複数のパターンを表示したい（通常表示とエラーコメント出現時など）が動的な実装までは自分はできないためquery parameterを使って複数パターンのコードを確認してもらえるようにしました。

query parameterとはこのようなものです。

```
http://my-site-url?pattern=1
```

コンポーネントから$routeオブジェクトをつかってにqueryオブジェクトにアクセスして、キーと値がを取得することができます。
v-ifディレクティブをつかって要素の出し分けをするようにしました。

```html
<div class="payment">
<div v-if="$route.query.pattern === '1'">
    <div>クレジットカードでお支払い</div>
</div>
<div v-else-if="$route.query.pattern === '2'">
    <div>デポジットでお支払い</div>
</div>
<div v-else>
    <div>銀行振込</div>
</div>
</div>
```


参考

https://stackoverflow.com/questions/35914069/how-can-i-get-query-parameters-from-a-url-in-vue-js
Vuetifyで使用するフォントを変更する

Vuetifyの標準フォントは `Roboto` なので、日本語が含まれていません。
そこで、ライブラリ本体を編集せずに日本語対応フォントへ変更する方法をご紹介します。

# CSS
```css:NG
html, body{
    font-family: "M Plus 1p";
}
```
最初は愚直に`html`ルートと`Body`へ記述してみたのですが、案の定、変更されませんでした。

```css:OK
.v-application{
    font-family: "M Plus 1p" !important;
}
```
Vuetifyのビルトインクラスを覗いてみると`.v-application`がトップレベルのクラスとなっており、そこでフォントが指定されていることを確認しました。
なので、ライブラリをロード後に任意の場所で`.v-application`のフォント指定を上書きしてやればいいわけです。

CSSは後からロードされたものが上書き反映されるので、ライブラリのロード前にこの記述をしても、結局元に戻ってしまうので注意です。

他にも、Vuetifyのビルトインクラスを上書きすることで、痒いところに手が届くカスタマイズを行えるようになります。
コピペでOK！アップロードした画像を即座にブラウザに反映しよう

#はじめに
画像をアップロードしたら即座に画像のプレビューが見たいときってありますよね。でもAjaxを導入したりするのは面倒。そんなときにすぐ使えるよう、htmlにコピペで実装できるようにしました。

**[Before]**
<img width="80%" alt="before2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449865/8acb2b8c-ee37-3cfe-43b1-40eafbdffc5e.gif">

**[After]**
<img width="80%" alt="after.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449865/fcb36fd4-e7f8-7ec7-e78f-ed1442d9e2e8.gif">



#仕組み
アップロードしたら、画像ファイルをbase64文字列化して、src属性に代入しているだけです。

#ソースコード

``` html:sample.html
    <img id="image" style="display: none;" />  <!-- 画像表示する場所-->
    <input id="file_upload" type="file" /> <!-- 画像をアップロード -->

    <script>
      document.getElementById("file_upload").addEventListener("change", selectedFile, false);

      function selectedFile(event) {
        let files = event.target.files || event.dataTransfer.files;
        showImage(files[0]);
      }

      function showImage(imagedata) {
        let file = imagedata;
        let fileReader = new FileReader();

        // 読み込み完了時の処理を追加
        fileReader.onload = function() {
          const url = this.result;
          const image = document.getElementById("image");
          image.style.display = "block"; //　display:none;を上書き
          image.src = url;
        };
        // ファイルの読み込み(Data URI Schemeの取得)
        fileReader.readAsDataURL(file); //画像表示
      }
    </script>
【Ruby on Rails】テストコードが成功しているはず（間違ったコードを書いていない）なのにrails testで 0 run 0 assertions ~と表示される際の解決法

## 結論：ターミナルを再起動する バックグラウンドの起動も右クリックで停止する

テストコードが間違っていないはずなのになぜかrails testをしても

```
0 runs, 0 assertions, 0 failures, 0 errors, 0 skips
```

と表示されてしまう時は、ターミナルを再起動すると正常に戻る可能性があります。
GitHubアプリを管理する際の流れ　『Githubデスクトップ使用』

🚨ご自身の環境に合わせて設定を行ってください。
はじめにローカルリポジトリの作成を行う。
Githubデスクトップから
左上の「Current Repository」
　　⬇️
「Add」
　　⬇️
「Add Existing Repository」
　　⬇️
「choose」　リポジトリを作成したいフォルダを選択します。
　　⬇️
「Add Repository」　🚨クリック出来ない場合　ターミナルでgit initを行う
　　⬇️
ローカルリポジトリにあるファイルをコメントつけて「Commit to master」でコミット。


次にリモートリポジトリの作成を行う。
上記の作業後。「Publish repository」
　　⬇️
モーダルが出現します。ご自身の設定に合わせ「Publish Repository」を行う。
　　⬇️
Githubのトップページに移動しリモートリポジトリが出来ていること確認してください。