OmniAICreator/Qiita-1.07M huggingface dataset:
【Java】byte配列を16進数にしたい

#やりたいこと
文字コード“あ”をUTF-16にしたい

#期待する結果
10進数：48(10) 46(10) 
16進数：30(16) 42(16)

#実現方法
`String.Format` か `System.out.printf` を使う

```java
import java.nio.charset.StandardCharsets;
import java.util.Arrays;

public class Main {
    public static void main(String[] args) {
        String stringValue = "あ";
        byte [] mojiCode = stringValue.getBytes(StandardCharsets.UTF_16BE);
        System.out.println(mojiCode);        //[B@372f7a8d
        System.out.println(  Arrays.toString(mojiCode)); //[48, 66]
        for (Byte code : mojiCode) {
            System.out.printf("%02x", code); //3042
        }
        System.out.println("");
        StringByteArray stringByteArray = new StringByteArray(mojiCode);
        System.out.println(stringByteArray.toHexString()); //3042
    }
    static class StringByteArray {
        byte[] byteArray;
        public StringByteArray(byte[] byteArray) {
            this.byteArray = byteArray;
        }
        public String toHexString() {
            StringBuffer stringBuffer = new StringBuffer();
            for (byte code : byteArray) {
                String hexString = String.format("%02x", code);
                stringBuffer.append(hexString);
            }
            return stringBuffer.toString();
        }
    }
}
```
VisualStudio C++ #ifdef をビルド時に切替

VisualStudio C++ #ifdef をビルド時に切替

# 目的
「#ifdef _HOGE」を C++ のソースファイルを変更せずに切替したい。

複数のプロジェクトで、下記のように「#define _HOGE」のコメントアウトを付けたり外したりしたくない。

``` Hoge.cpp
// _HOGE 使わない時は、コメントアウト
#define _HOGE

#ifdef _HOGE
・・・中略・・・
#else
・・・中略・・・
#endif // _HOGE

・・・後略・・・
```

# 環境
Windows 10 Pro
Visual Studio 2017

# ソリューションの設定
下記URLの記事を参考に
「構成」"Debug"をコピーして「構成」"D_HOGE"を追加。

VS.NETでデバッグ版／リリース版以外のビルド構成を追加するには？
https://www.atmarkit.co.jp/fdotnet/dotnettips/249addprojconf/addprojconf.html

# プロジェクト毎の設定
下記URLの記事を参考に
「構成」"D_HOGE"の
「プロジェクト」「プロパティ」の
「構成プロパティ」「C/C++」「プリプロセッサ」「プリプロセッサの定義」にて
"_HOGE;"を追加。

コンパイラとビルドのプロパティを設定する
https://docs.microsoft.com/ja-jp/cpp/build/working-with-project-properties?view=msvc-160


ソリューションに「プリプロセッサの定義」があったら、もっと嬉しかったのですが。

# プロジェクトはこのソリューション構成に対してビルドするように選択されていません。 
【VisualStudio】特定プロジェクトのビルドが飛ばされる
https://shirakamisauto.hatenablog.com/entry/2016/07/18/103947



以上
Gatsby.jsでSassを導入する手順

Gatsby.jsでSassを導入する手順になります。
## gatsby-plugin-sassを導入する
Gatsby.jsでSassを使用するには、プラグインを導入します。

```
# npm
npm install node-sass gatsby-plugin-sass
```
```
# yarn
yarn add node-sass gatsby-plugin-sass
```

## gatsby-config.jsで設定をする

```js:gatsby-config.js
module.exports = {
  /* Your site config here */
  plugins: ["gatsby-plugin-sass"],
}
```
`gatsby-config.js`で、上記のように読み込みます。

これでGatsby.jsでSassが使用可能になります。

※node-sassのバージョンによってエラーが出る場合があります。
[Gatsby.js 【Node Sass version 5.0.0 is incompatible with ^4.0.0.】 エラーの対処法](https://qiita.com/TK-C/items/c501e631494d11d5d6d2)
ffmpegで動画をGIFに変換するレシピ集

GitHubのコメントやQiitaの記事に動画を載せたいときなどに便利。

![crab-fps10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305052/b140185e-ebc8-9cc5-56f7-78bd509f4157.gif)
（[Noisestorm - Crab Rave (Official Music Video) - YouTube](https://www.youtube.com/watch?v=cE0wfjsybIQ)）

# 基本

```sh
ffmpeg -i video.mp4 -vf "split[v1][v2];[v1]palettegen[p];[v2][p]paletteuse" video.gif
```

変換元の動画ファイル名を `-i video.mp4` に指定、出力先のGIFファイル名を `video.gif` に指定する。

`-vf` オプションの中身はごちゃごちゃしているので気にしない。さくっと言うと、GIFは最大で256色までしか使えないので、一度動画全体の色分布を調べて一番綺麗に表現できる256色を選別している、というところ。上のCrab RaveのGIFでは、以下のようなパレットが作られている。

![palette.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305052/951bcafb-8624-d2f7-58d4-9b4411dc4df4.png)

砂と蟹の色が際立っている。

# FPS調整

GIF動画はファイルサイズが大きくなりがちなので、動画のなめらかさを犠牲にしてファイルサイズの削減をすることもできる。アップロード先にファイルサイズの制限があることはよくあるので、大事。

まず、元動画のFPSを `ffprobe` を使って調べる。

```sh
ffprobe -hide_banner -i video.webm
```

コマンドの出力の中に、FPSが含まれている。例えば、

```
Input #0, matroska,webm, from 'video.webm':
  Metadata:
    encoder         : google/video-file
  Duration: 00:03:12.20, start: 0.000000, bitrate: 15813 kb/s
    Stream #0:0(eng): Video: vp9 (Profile 0), yuv420p(tv, bt709), 3840x2160, SAR 1:1 DAR 16:9, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)
```

の場合はFPSが30なので（最後の行に注目）、これを基準にして、減らす。

動きの激しい動画でない場合、FPS10程度でも十分だったりする。フレームの数が1/3になるので、ファイルサイズもおおよそ1/3になる。

```sh
ffmpeg -i video.mp4 -vf "fps=10,split[v1][v2];[v1]palettegen[p];[v2][p]paletteuse" video.gif
```

| 10 FPS/384x216/3.8s/1.9M | 30 FPS/384x216/3.8s/5.5Mb |
|:-:|:-:|
| ![crab-fps10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305052/fbbb1913-4106-e430-eac5-1a81b95f0499.gif) | ![crab-fps30.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305052/9e72dab8-b158-426f-fd77-faa75ea6d454.gif) |


# 解像度調整

ファイルサイズを削減する別手段として、動画の解像度を減らすこともできる。

まず、元動画の解像度を `ffprobe` を使って調べる。

```sh
ffprobe -hide_banner -i video.webm
```

コマンドの出力の中に、解像度が含まれている。例えば、

```
Input #0, matroska,webm, from 'video.webm':
  Metadata:
    encoder         : google/video-file
  Duration: 00:03:12.20, start: 0.000000, bitrate: 15813 kb/s
    Stream #0:0(eng): Video: vp9 (Profile 0), yuv420p(tv, bt709), 3840x2160, SAR 1:1 DAR 16:9, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)
```

の場合は解像度が3840x2160なので（最後の行に注目）、これを基準にして、減らす。

アスペクト比を変えず、高さを216pxにする（384x216）場合、以下のコマンドを使う。

```sh
ffmpeg -i video.mp4 -vf "scale=-1:216:flags=lanczos,split[v1][v2];[v1]palettegen[p];[v2][p]paletteuse" video.gif
```

# おまけ: GIF動画の各フレームをPNG画像として抽出する

まずは分かりやすいように出力用のディレクトリを作る。

```sh
mkdir frames
```

作成したディレクトリの中に、連番ファイル名のPNG画像（`1.png`, `2.png`, ...）を出力する。

```sh
ffmpeg -i video.gif frames/%d.png
```

# 参考

- [High quality GIF with FFmpeg](http://blog.pkh.me/p/21-high-quality-gif-with-ffmpeg.html)
- [How do I convert a video to GIF using ffmpeg, with reasonable quality? - Super User](https://superuser.com/questions/556029/how-do-i-convert-a-video-to-gif-using-ffmpeg-with-reasonable-quality)
Windows10にインストールしたMariaDBのバージョン確認

# やり方

コマンドプロンプト起動して下記コマンドでMariaDB起動。

```bat
"C:\Program Files\MariaDB 10.5\bin\mariadb" -u root -p
```

『MariaDB 10.5』は適宜読み替えて。
その後は、ユーザーのパスワードを入力。（今回の例はrootユーザー）

んでもって下記SQL。

```sql
SELECT VERSION();
```


っていうかログインした時点でバージョン出とるがな(´・ω・`)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/99d96943-7bfa-4057-cad4-2d6b9c050297.png)


# 蛇足

普通はコマンドプロンプトからじゃなくて、HeidiSQLとかでSQL実行した方が楽。
まあ、できるだけWindows10の標準機能で確認するっていうことで…。

# バージョン

Windows 10 Pro 21H2 OSビルド 19044.1889
Gatsby.js 【Node Sass version 5.0.0 is incompatible with ^4.0.0.】 エラーの対処法


Gatsby.jsの下記エラーの対処法です。
【gatsby-plugin-sass】導入時に発生しました。

```
error Generating development JavaScript bundle failed 
Node Sass version 5.0.0 is incompatible with ^4.0.0.
```

##node-sassのバージョンを下げることで解決
node-sassのバージョンを下げることで解決することができました。

```
# npm
npm uninstall node-sass
npm install node-sass@4.14.1
```

```
# yarn
yarn remove node-sass
yarn add node-sass@4.14.1
```
circleCIでのエラー解決4つ

##①syntaxエラー
![7ab0a745c2ca516cb52a789a2427a249.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696835/5dd78334-3dec-5e98-af7b-e55891411ca7.png)
画像はただのインデントエラーなのですが、Qiitaなどに転がっている「野良コード」をいきなり参考にすると、どこを直してもこんな感じでsyntaxエラーが起こります。信頼できるリソース（例えば有料のハンズオン）を参考にしないと初学で引っかかりました。


##②Mysql2::Error::ConnectionError: Can't connect to local MySQL server through socket 'hogehoge' (2)
これはデータベースを見失っているということだったので画像のように開発環境用のローカルホスト「'127.0.0.1'」を記述。

```database.yml
test:
  <<: *default
  database: stearch_test
  host: <%= ENV['MYSQL_ROOT_HOST'] || '127.0.0.1' %>
```


##③Failure/Error: raise BrowserNotFound, 'Failed to find Chrome binary.'
imageの末尾にbrowsersをつけるとChromeの処理をしてくれます。

```.circleci/config.yml
version: 2.1
jobs:
 build:
   docker:
   - image: circleci/ruby:2.6.5-node-browsers
```

##④Webpacker::Manifest::MissingEntryError
これはwebpackerがインストールされてないということでyarn installをrunさせます!

```.circleci/config.yml
   # yarn install
   - run:
       name: yarn install
       command: yarn install
   - run: bundle exec bin/webpack
```
![7a123da37031657fc8b1b9443a333071.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696835/283da9be-81cc-9b9f-89c5-dc6d1a33c835.png)

元のcircleciファイルです。

```.circleci/config.yml
version: 2.1
jobs:
 build:
   docker:
   - image: circleci/ruby:2.6.5-node-browsers
     environment:
       RAILS_ENV: test
   - image: circleci/mysql:5.7-ram
     environment:
       MYSQL_DATABASE: myapp_test
       MYSQL_ALLOW_EMPTY_PASSWORD: true
       MYSQL_ROOT_HOST: '%'
       MYSQL_USER: root
       MYSQL_PORT: 3306
   working_directory: ~/myapp
   steps:
   - checkout
   - restore_cache:
       keys:
       - v1-dependencies-{{ checksum "Gemfile.lock" }}
       - v1-dependencies-
   - run:
       name: install dependencies
       command: |
         gem install bundler -v 2.0.1
         bundle install --jobs=4 --retry=3 --path vendor/bundle
   - save_cache:
       paths:
       - ./vendor/bundle
       key: v1-dependencies-{{ checksum "Gemfile.lock" }}
   # yarn install
   - run:
       name: yarn install
       command: yarn install
   - run: bundle exec bin/webpack
   # Database setup
   - run:
       name: Prepare db
       command: |
        bin/rails db:schema:load --trace
   # run tests!
   - run:
       name: Run rspec
       command: |
         mkdir /tmp/test-results
         TEST_FILES="$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)"
         bundle exec rspec --format progress --color --format documentation

   # collect reports
   - store_test_results:
       path: /tmp/test-results
   - store_artifacts:
       path: /tmp/test-results
       destination: test-results
```
Heroku Connect で同期されない・・？

# 結論

Heroku Connectは、31日間、salesforce側から新しいデータが同期されないと停止する！

PAUSEDの状態なら再開を押せばすぐ戻すことができるが、
SYSTEM_ON_ICEDの状態だと、Heroku Supportに連絡する必要がある。

下記リンク参照。（英語ですが、google翻訳で大丈夫かと）
https://help.heroku.com/7W6OYCD7/why-is-my-connect-instance-paused-inactive-or-iced

# 始まり
クライアントから「セールスフォース側でデータを変更したのですが、
アプリに反映されていないみたいです。」とのこと。

あれ？、、なぜだ？？
心当たりは全くない。

# 調べてみる

アドオン一覧の画面から、Heroku Connectを選択して、Heroku Connectの画面を開く。
すると、CONNECTION STATUSのところにPAUSEDの文字が。。。（赤枠）

![retake 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689332/426276f3-805d-bdd1-c361-18e28f9bd440.png)

止まってたので、同期されなかった、ということか。。
ただこのタイミングでは、なぜ止まったのかの原因はわからず。


# ひとまず対処

pausedだったので、対処は簡単。
resumeを押すだけでした。（左下赤枠）

![スクリーンショット 2020-11-02 13.05 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689332/cd0cfb1e-3225-252e-7ee4-95554deb0fb0.png)



戻った戻った。Salesforce側のレコードの数と、DB側のレコードの数が揃った。
数時間後には、Activityもちゃんと表示されてきた。
（レコードの数自体は色々上下してます）

![スクリーンショット 2020-11-02 13.04 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689332/f7382c5c-186c-5768-2bde-b6614115439b.png)

# Google先生

なぜpauseになったのか？
英語で検索にかけると、先ほどのリンクの記事がヒットしました。


なるほどと。
３１日間何もないと止まるのは、初めて知りました。。

それにしても本当に31日間もsalesforce側で、
新しいデータが追加されなかったのか？
少し疑問が残るところ。。

導入しようとしている企業様だったので、
たまたま期間が空いたのかな？

# まとめ
heroku connect の画面をひらけば、
動いてないことは一目瞭然ではあったので、
対処はしやすかったです。おわり。
GooglePlay/AppStoreの審査とadMobの検索ヒットにどれだけ時間がかかる調べた

# はじめに
## 概要
* GooglePlayとAppStoreで公開するためには、審査が必要ですが、とにかく時間がかかる!!
    * コロナになってからより時間がかかるようになったようです。
* 私の場合は、flutterで同時にアプリを作り、リリースができてから、AdMobで広告をつけるようにしてるので、広告がついたバージョンが公開されるためには、審査が2回必要です。
    * 最近は、あまりに時間がかかるので広告を付けてからあとから紐付けするようにしました
* そこで、審査や公開にどれだけ時間がかかるか調べてみました。

## 対象読者
* GooglePlay/AppStoreで公開にどの程度の期間がかかるか知りたい方

## 関連記事
* [Flutter系の記事のまとめ](https://qiita.com/kazutxt/items/524acb1c134015682ccf)
* [flutterでアプリ公開してからadmob導入するまで](https://qiita.com/kazutxt/items/4f8f802aa7232f922346)

## スタート(前提条件)
* 特になし。実際に公開する場合はアプリが必要です。

## ゴール(達成できること)
* 2020年10月～11月時点でどの程度審査に時間がかかるかわかります。

## スコープ外(ふれないもの)
* 申請の仕方やステータスチェック、NG時の対応など

## 開発環境
* flutter

``` .sh
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.2, on Mac OS X 10.15.7 19H2, locale ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 11.7)
[✓] Android Studio (version 4.0)
[✓] IntelliJ IDEA Community Edition (version 2017.1.2)
[✓] VS Code (version 1.50.1)
[!] Connected device
    ! No devices available
```
* 審査対象アプリ
    * [この日何の日??(GooglePlay)](https://play.google.com/store/apps/details?id=com.kazutxt.whatstoday)
    * [この日何の日??(AppStore)](https://apps.apple.com/us/app/%E4%BB%8A%E6%97%A5%E3%81%AF%E4%BD%95%E3%81%AE%E6%97%A5-%E7%89%B9%E5%88%A5%E3%81%AA%E6%97%A5/id1537287010)

---

# 本編
## 全体像/結論
* GooglePlayは<font color='red'><b>審査に4日</b></font>かかる
* AppStoreは<font color='red'><b>審査に0.5日</b></font>かかるが、adMobで検索できるのは<font color='red'><b>追加で7日</b></font>かかる

 <font color='blue'><b><ins>adMobで検索できる</ins></b></font>とは、adMobでアプリ登録/アプリの紐付けにおいて、「GooglePlayやAppStoreでアプリを公開していますか?」で"はい"を選択し、 <font color='blue'><b><ins>「GooglePlayやAppStore上にあるご自身のアプリを検索してください」で検索し、目的のアプリが表示される</ins></b></font>ことを表します。

## 計測結果
* 審査
    * GooglePlay:4日
    * AppStore:0.5日
* adMob検索
    * GooglePlay:0.5日
    * AppStore:7日

![time.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/4d892a55-61c2-79f5-07dc-a1552996db61.png)

## 結論
* 今回は小さいアプリでしたが、それでも審査に最大4日。adMob検索可能に最大7日かかりました。
    * 掲載まではAppStoreの方が早いのですが、adMobで引っかかる時間で逆転してしまいますね。仲悪いのかな(笑)
*  adMobをつけるために、一度リリースしてからリンクさせていたのですが、それだと2週間程度かかってしまうので、adMobは最初につけてから、アプリが登録されてからリンクするほうが良さそうです
    *  他のアプリではあと1日ぐらいAppStoreのアプリがadMob検索にヒットするのが早かったような気がしますが、幅があるのかもしれません

---

# 補足
## 備考
* 同じアプリのadMobあり/なしだけの違いでも、スクリーンショットや設定の不備でNGをうけることがありましたので、こういうリスクを避ける意味でも、リリースは1回にしておきたいですね。

## 参考文献
*  [Adding AdMob ads to a Flutter app](https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter#0)

## 追記
* 2020/11/4 初稿
【Rails】TwitterAPI使用時に、httpで送られてくる画像のURIをhttpsに変換した方法

## はじめに

[yuki](https://twitter.com/yuki82511988)と申します。DMMWEBCAMP にお世話になって、今は WEB エンジニアとして勤務しつつ、自分で仲間を集めてサービス開発したり、プログラミングの家庭教師したり毎日エンジニアライフをエンジョイしています。

未経験から目指している方向けのサポートやエラー質問なども引き受けておりますので、気になった方は DM へお願いします。

## 前提と問題
RailsをAPIとして活用していて、`gem twitter`を使って画像収集をしていた際に問題が起こりました。
twitter APIが取得してくる画像のURIが`http`から始まっており、せっかくhttps通信ができているサイトに「安全ではありません」の警告が出てしまいました。

ちなみに、その時コンソールにはこんなエラーが出ていました。

```console
Mixed Content: The page at 'https://hogehoge.com' was loaded over HTTPS, but requested an insecure image 'http://hogehoge.net/hoge.jpg. This content should also be served over HTTPS.
```

mixed contentとか言うらしいです。
最初は今回まとめる方法が思いつかず、フロントの方で何とかしていましたが、本来バックでやるべきなので修正しました。

## 対策
```ruby:examples_controller.rb
  def show
    client = Authorization.init # 独自クラスです。クライアントの情報を入れています。
    @data = client.search("#収集したいハッシュタグ", result_type: "recent").take(4).collect do |tweet|
      {
        "image": "#{tweet.user.profile_image_url.to_s.sub('http', 'https')}",
        "name": "#{tweet.user.name}",
        "text": "#{tweet.full_text}",
        "tweet_link": "#{tweet.uri}"
      }
    end
    render json: {tweet: @data}
  end
```

何をしているか一応ご説明すると、特定のハッシュタグのついたツイートを4件収集し、jsonデータとして返しています。
今回重要なのは`"image": "#{tweet.user.profile_image_url.to_s.sub('http', 'https')}",`の部分です。

これは他のエンジニアの方に教えていただいたのですが、rails consoleで`user.profile_image_url`を見てみると、ちょっとよくわからないデータの形（？）で結果が返りますが、to_sすることで綺麗なURLになりました。

そこに、subメソッドを当てて変換している感じです。

注意としてはgsubではなくsubを使っていることです。
理由としては、万が一画像のURLの一部（先頭以外）に"http"と言う文字列があった場合に誤変換して、画像が表示されなくなってしまうからです。

誰かの参考になれば幸いです。
【初心者向け】VSCodeってクリックだけでgit_pushできるんです

## はじめに
[yuki](https://twitter.com/yuki82511988)と申します。DMMWEBCAMP にお世話になって、今は WEB エンジニアとして勤務しつつ、自分で仲間を集めてサービス開発したり、プログラミングの家庭教師したり毎日エンジニアライフをエンジョイしています。

未経験から目指している方向けのサポートやエラー質問なども引き受けておりますので、気になった方は DM へお願いします。

皆さんはテキストエディタは何を使っていますか？
私はずっとVSCodeを使っているのですが、最も先に知っておきたかったことで、後から気づいたことがあるので共有します。
それは、簡単にgit/githubの管理ができることです。

## 下にある謎のバー
当時の自分は、VSCodeをひらきながら、gitの管理は別ウィンドウのターミナルで行っていました。

まず、一つ目の気づきはVSCode自体にターミナルがついているということです。

![vscode1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/27822313-5b2b-e60a-dca3-000ed83be7d7.png)


上記の画像の一番下、青い部分にマウスカーソルを合わせると、ターミナルが出てきます。。。
何かコマンドを打つ際は、こちらを是非利用してください。画面を切り替える手間がないのでとても便利です。
もちろん、ここでgitの管理もできます。

## 左にある謎のアイコン
ただ、git/githubの管理だけで言えば、もっと楽な方法があります。それは左側にあるツールを活用してあげることです。

![vscode2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/b4a922d0-d0ee-4861-6094-e7fbb2cfa7d8.png)

縦に並ぶ謎のアイコンたちの、**３番目**をクリックしてみてください。（もちろん、他も便利なので調べてみてくださいね。）

そうすると、今開いているディレクトリに.gitファイルがある（ローカルリポジトリになっている）場合、以下のような画面になります。

様々なマークやアイコンがありますが、簡単に述べますと、ここで`git add`や`git commit`、他にも様々なコマンドがクリックで実行できます。

試しにやっていただきたい一連の流れ

```
- プラスマークのボタンを押し（git add）
- Messageのところにメッセージを書き（コミットのメッセージです）
- チェックボタンを押し（git commit）
- 点が三つある場所をクリックし、git pushを選んでみてください
```

これだけで、簡単にファイルの変更をaddしてcommitしてpushすることができました！

### 余談
かつて、いっつも左側のアイコンに謎の数字が出ていたのでエンジニアの方に聞いたところ、そのような管理方法があると知りました。
今でも活用している非常に便利な方法なので、是非今日からでもやってみてください。(__)
【3分で完了】このサイトの画像サイズ、何pxだろう…？と悩んでいるあなたへ

## はじめに

[yuki](https://twitter.com/yuki82511988)と申します。DMMWEBCAMP にお世話になって、今は WEB エンジニアとして勤務しつつ、自分で仲間を集めてサービス開発したり、プログラミングの家庭教師したり毎日エンジニアライフをエンジョイしています。

未経験から目指している方向けのサポートやエラー質問なども引き受けておりますので、気になった方は DM へお願いします。

今回は、いろいろなwebサイトを見る際に**「この画像（やパーツ）ってどのくらいの大きさなんだ…？」**と悩むことが多く、いい方法がないかと模索した際に見つけたChromeの拡張機能について共有いたします。

## 早速ご紹介
[Page Ruler Redux](https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=ja)

非常に直感的に使えますが、要はブラウザで定規を使えるようにしてくれます。

#### 使用例

![keisoku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/b25ad6f0-1907-7bd2-d517-c1773ca01bb2.png)


このような感じで、拡張機能（上のリンクからchromeに追加すると、ブックマークバーの上くらいにアイコンが追加されます）をクリックすると、webページの好きな場所であらゆるサイズを測ることができます。

非常に便利なので、特に勉強し始めの方でHTML/CSSを扱う方は参考にしてみてください。
測るだけではなく、サイズの検討をつけて実装する、何てこともできると思います。
Docker コンテナの活用シーン

# はじめに :whale:

Docker コンテナを初めて使ってから2年くらい経ちました:baby:色々な活用シーンを見た気もするし、誤った使い方をしているのではと気にかかる時もあります。

Docker コンテナを使い始めた人に伝える目的だったり、新しい活用知識が得られる期待もあって"Docker コンテナの活用シーン"を晒します。

# 1. ソースコードと実行環境を含んだアプリケーションの配布用途

(アプリケーション配布者側)

- Dockerfile を用意する
- ソースコード・実行ファイル、実行環境を含めてコンテナイメージをビルドする
- コンテナイメージをレジストリに置く

(アプリケーション利用者側)

- レジストリからコンテナイメージを取得する
    - (もしくは Dockerfile からコンテナイメージをビルドする)
- コンテナイメージを利用する

# 2. 開発時の実行環境配布用途

- 成果物がソースコードのみ(ライブラリ等)の場合に開発時の実行環境を用意する
- 配布者はコンテナイメージをレジストリに置くことまでする必要はない
    - (Dockerfile を用意しておく)

# 3. DevContainer(開発環境)配布用途、リモート開発環境用途

- "2. 開発時の実行環境配布用途"がプログラムの実行環境を用意するのに、対しこちらは開発環境をコンテナに入れる
- [githubのcodespaces](https://github.co.jp/features/codespaces)に開発環境をdeployする事ができるらしい
- 筆者はまだ触っておらず、codespacesがGAになるまで待っています
- [〜開発環境は全てコンテナの中へ〜VS Code Dev Container Guideboo](https://techbookfest.org/product/4696850535809024?productVariantID=5428870601768960)に詳しく書かれています

# 4. どうなってもいいサンドボックス用途

- 使い捨ての環境としてコンテナを使う
    - ubuntuを調べる際は `docker run -it --rm ubuntu:18.04 bash` してます

# 5. "CLI アプリケーションの中身がDockerコンテナ"な用途

```
$ curl "<ソース置き場>" > hoge_command
$ chmod +x hoge_command
$ mv hoge_command /usr/local/bin/hoge_command
```

hoge_command が shell script になっており、script の中で`exec docker run fuga_container` している。

実例: https://github.com/COLORFULBOARD/bq_profile/blob/master/bq_profile

手軽にCLIアプリケーションを配布する際に便利な気がします

# 6. "CLIアプリを一時利用"な用途

CLIアプリ(コマンド)を install せずに利用する目的で Docker コンテナを使う事ができます

- git を install せずにgitを利用する
    - `docker run --name repo alpine/git clone https://github.com/docker/getting-started.git`
    - `docker cp repo:/git/getting-started/ .`
- 出自: Docker Desktop for Mac のチュートリアル


以上です。
他にもこんな使い方したら便利だよという情報があれば教えてください。
アロー関数 =>

今まで何気なくこのアロー関数を使ってきたのですが、やっぱりJSの基礎がなっていないので気になります
私気になります(？)

##アロー関数とは
`=>`を使って`function`を使わずに関数を作成することができる

具体的に見ていきましょう

```
function createGreeting(name) {
  return "Hello" + name;
}
```

こういう記述を

```
const createGreeting = name => "Hello" + name;
```

こんなに簡単に記述できる様になるんですね〜〜
ただこれは引数が１個で、処理が１行で済む場合です
２個以上２行以上になると

```
function createGreeting(name, greeting) {
  console.log(name);
  return greeting + "" + name;
}
```
こんな処理を

```
const createGreeting = (name, greeting) => {
  console.log(name);
  return greeting + "" + name;
}
```

こうやって書き換えます

ポイントは引数２個以上の場合はしっかり`()`の中に引数を記述すること！
後、２行以上の記述になると、`{}`の中に処理を記述すること！
感覚的にこの記号`=>`わかりやすいですよね
【Bootstrap】基本のクラスまとめ

# 概要

最近、Bootstrapを使ってフロントを作っています。
自分への備忘録としてこれまでに使ってきたクラスをまとめておきます。

参照
Bootstrap (ver. 4.5) : https://getbootstrap.jp/

<br>

# ブレークポイント

* sm : 576px
* md : 768px
* lg : 992px
* xl : 1200px

<br>

# レイアウト
## container
* 固定幅のコンテナ
* 各ブレークポイントごとに最大幅が変わる

<br>

## row
* グリッドシステムの行を決める要素
* 子にcolを持つことで真価を発揮

<br>

## col
* グリッドシステムの列を決める要素
* rowの子要素として使う
* col-sm-3
    * sm : 576px未満で縦並び
    * 3 : (3/12 = 25% の幅)

<br>

# ボタン
## btn
* ボタンを作る

<br>

## btn-primary
* 青ベースのボタンを作る
    * danger : 赤ベース
    * secondary : 灰色ベース

<br>

# padding, margin
## p, m
* p : padding
* m : margin

<br>

## 方向
* t : top
* b : bottom
* l : left
* r : right
* x : left and right (x軸方向)
* y : top and bottom (y方向)
* (blank) : 4方向
* 例) : pt-○ : padding-top: ○;

<br>

## サイズ
* $spacerに対する比で決まる。デフォルトで1rem=16px
* 0 : $spacer * 0 (=0)
* 1 : $spacer * 0.25 (=4px)
* 2 : $spacer * 0.50 (=8px)
* 3 : $spacer * 0.75 (=12px)
* 4 : $spacer * 1.00 (=16px)
* 5 : $spacer * 1.25 (=20px)
* auto : margin: auto;
* 例) : pt-1 : padding-top: 4px;

<a href="https://getbootstrap.jp/docs/4.5/utilities/spacing/">Bootstrapの公式リファレンス</a>で示されている代表的な例は下記のとおりです。

```css
.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}
```

ちなみに**!important をつけると、CSSファイルの読み込み順に関係なく、スタイルを適用させることができます**。

<br>

# 色
* primary : 青
* secondary : ライトグレー
* success : 緑
* danger : 赤
* warning : 黄
* info : 水色
* light : かなり薄いグレー
* dark : ダークグレー

<br>
【文系未経験エンジニア志望の方向け】逃げてきた数学にProject_Eulerを通じて向き合いませんか？

## はじめに

[yuki](https://twitter.com/yuki82511988)と申します。DMMWEBCAMP にお世話になって、今は WEB エンジニアとして勤務しつつ、自分で仲間を集めてサービス開発したり、プログラミングの家庭教師したり毎日エンジニアライフをエンジョイしています。

未経験から目指している方向けのサポートやエラー質問なども引き受けておりますので、気になった方は DM へお願いします。

私はかつてド文系で国語科の高等学校の教員をやっていたのですが、色々あって今は上のキャリアで楽しく過ごしています。
大学受験の際に数学は2Bまで学習していたのですが、プログラミングをする時にとても役立ちました。

もし、高校の頃に **「ちょっと数学を避けてしまったな…。でも考え方がプログラミングに使えそうだしな…。」**と言う方向けに、今回は数学とプログラミングが同時に学習・復習できる**Project Euler**をご紹介します。

## Project Eulerとは
プロジェクトオイラーと読みます。
https://projecteuler.net/

説明は[wiki](https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%BB%E3%82%AA%E3%82%A4%E3%83%A9%E3%83%BC)より引用。
>プロジェクト・オイラー（英: Project Euler、名称はレオンハルト・オイラー由来）は、数学やプログラミングなどに興味を持つ大人や学生が主な利用者であり、プログラミング (コンピュータ)による一連の計算問題の解決を目的としたウェブサイトである。 400以上[2]の問題の他に毎週末毎に1問ずつ増えており、様々な難問が用意されているが、 一般的なスペックのパソコンで効率的なアルゴリズムを用いれば、いずれも1分未満で解ける。

自分はプログラミングスクールでの学習が終わったのち、数学の復習もしたいと思い、こちらに取り組んでいました。
rubyで解いたリポジトリは[こちら](https://github.com/yuki-snow1823/Project_Euler)です。（50位までやりました。）

数学チックな問題、かつ出力の方法も難しいような問題がたくさんあり、非常に頭を使いました。

## 例題
では、試しに1問目をみてみましょう。
と、その前に、日本語のサイトが前はあったのですが落ちています・・・。

と言うことで、元サイトを翻訳してくれる素晴らしい拡張機能を先に入れましょう。
https://chrome.google.com/webstore/detail/project-euler-translate-i/oeicjfkbfahmdklgoollemcahaljgklo?hl=ja

```
10未満の自然数のうち, 3 もしくは 5 の倍数になっているものは 3, 5, 6, 9 の4つがあり, これらの合計は 23 になる.
同じようにして, 1000 未満の 3 か 5 の倍数になっている数字の合計を求めよ.
```

自然数って何だっけ…？って思った方、大丈夫です。ぐぐりましょう。

## 私の解答
```ruby:answer.rb
max_number = 1000
answer = 0

for num in 1..max_number -1
  if num % 3 == 0 || num % 5 == 0
    answer = answer + num
  end
end

puts answer
```

過去に作った解答なので、もっと良い方法があるかもしれません。

### オススメする理由
文系からエンジニアに転職する方も多い昨今、数学を振り返ることはとても重要だと考えています。私は2Bまでしか履修していないので言えた口ではないのですが、数学自体は嫌いではなかったので **「問題を細分化し、ロジックを組んで答えにたどり着く」** と言う論理的な思考は非常にプログラミングに生きているなと感じます。

ただ、教科書を引っ張り出して１からやり直すのも大変ですし、せっかくならプログラミングを勉強しながらやるのも良いんじゃないかなと思ったので紹介しました。

私はProject Eulerをやってみて、嫌いではなかった数学がちょっと好きになりました。なぜなら、「プログラムが」計算をしてくれるからです。これまでは面倒くさい公式を使って、計算ミスに気をつけながら、ノートを汚くして解いていた数学が、**ロジックさえあっていれば**答えが綺麗に出てくれるので、とても快感でした。

もしかしたら、数学嫌いの克服にもなるかもしれないので、是非一度挑戦してみてください。
「わ、これいいフォントだ。なんという名前だろう？」と思ったあなたへ

## はじめに

[yuki](https://twitter.com/yuki82511988)と申します。DMMWEBCAMP にお世話になって、今は WEB エンジニアとして勤務しつつ、自分で仲間を集めてサービス開発したり、プログラミングの家庭教師したり毎日エンジニアライフをエンジョイしています。

未経験から目指している方向けのサポートやエラー質問なども引き受けておりますので、気になった方は DM へお願いします。

今回は Web サイトを見ていた時、かっこいいフォントなどを見つけた際にそのフォントの名前を簡単に調べることのできる Chrome の拡張機能をご紹介したいと思います。

## 早速ご紹介

[What Font](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja)

非常に直感的に使えます。起動したのち、カーソルを気になるフォントに合わせるだけでフォント名を表示してくれます。

#### 使用例

![font.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/6a4f048e-d09a-7cb0-e5c7-d832625fcd79.png)

このような感じで、拡張機能（上のリンクから chrome に追加すると、ブックマークバーの上くらいにアイコンが追加されます）をクリックし、気になる文字の上にカーソルを合わせるとその場ですぐにフォント名が表示されます。

いいフォントを見つけた際にちょこちょこメモをしておけば、いつかきっと役に立つと思います。
ただ、フォントには利用規約がつきものなので、しっかりと調べた上でご利用ください。
jQeuryとVueを併用してた際のdataTableのUncaught TypeError: Cannot read property 'style' of undefinedエラー

jQueryとVueを併用していてjQueryのdataTableが動かなくてハマってたので備忘録的に。

エラー文
`Uncaught TypeError: Cannot read property 'style' of undefined`

通常のHTML内では

```
<thead>
  <th>
```
って```<tr>``` なくてもdataTable動いてたのに、


Vueのtemplate内では

```
<thead>
　<tr>
   <th>
```
って```<tr> ```をちゃんと書かないとdataTabeが動かない。


まぁVueとjQueryを一緒に使うことはあんまりないと思いますが、当時のプロジェクトの都合もあって使っていて、ハマったのでメモがてら。
PC-8001の起動

ネットでちょっと調べて見ました。

PC-8001は単体だとBASIC(N-BASIC)が起動します。

フロッピーが使える場合はDisk BASICかCP/Mを起動させ利用していました。

ROMの8Kの拡張領域の先頭に"AB"があるとその後のROMのコードを実行するようです。手元のPC-8001で試したところバグがあり動きませんでした。

PC-8001でフロッピーディスクを利用するためにはIOポート(PC-8033)とミニディスクユニット(PC-8031など)が必要です。IOポートにはパラレルIOの8255が入っていてミニディスクユニットにも8255が入っていて互い違いに接続しているようです。ミニディスクユニットにはZ80とフロッピーコントローラー(FDC)が入っています。

PC-8001の168,000円はどうにか手が届きましたがPC-8031は310,000円で高嶺の花でした。

起動後にミニディスクユニットとIOポートが接続されている場合で、ディスクが入っている場合は、そのディスクの内容(IPL)をメモリにコピーしてそれを実行します。

PC-8001は1979年に発売されましたが、外付けのミニディスクなども同時に発売されたようです。

この仕様はPC-8801やPC-9801に引き継がれます。

PC-8031にはシステムディスクが付属していたようです。

PC-8001で現代の外部記憶装置を作る方法は二つあって、一つはPC-8031互換で作る方法になります。この場合システムディスク相当のプログラムを入手する方法が問題になります。もう一つの方法はSD-DOSのように新しい仕組みで、それをサポートするプログラムを使う方法です。

マイクロソフトが作ったAltair BASICは8Kですが、ROMのN-BASICは24Kもあります。なんからの機能が含まれているのではないかと思われます。

N-BASICをDisk BASICとして使う場合はおそらくシステムディスクにDisc BASICの初期化などの処理が入っていてそれが実行された後、本体のN-BASICをコールドスタートさせているのではないかと思われます。

ROMのN-BASICにはDisc BASICの処理も入っているものと考えられます。

Disk BASICを試してみたいが、SDとAVRでPC-8031互換のハードを作られている人がいるようだが、公開はしていないようだ。システムディスクの内容も必要になるしちょっと難しいかも。

間違いあったらご指摘ください。

参考文献

http://www43.tok2.com/home/cmpslv/Pc80/Pc80s31.htm

http://www43.tok2.com/home/cmpslv/Pc80/EnrPc.htm

http://memo.wnishida.com/?date=20070127
Docker関連のコマンドメモ

Dockerを初めて使うことになったので勉強や調べたことの備忘録的なもの。
調べたことや学んだことがあったら随時追記してきます。


###Dockerコマンドメモ


```
docker container run Dockerイメージ名 実行コマンド
①　　　　　　　　　　　 ②              ③
```
①コンテナを作成実行
②もとになるdcokerイメージ
③コンテナ内で実行するコマンド

バージョンの確認

```
docker version
```

実行状況確認

```
docker system info
```

ディスク利用状況

```
docker system df
```

イメージのダウンロード(Nginx)

```
docker pull nginx
```


イメージを使ってNginxを起動

```
docker container run --name webserber -d -p 80:80 nginx
```

※webserberは任意

サーバの状態を確認

```
docker container ps
```

コンテナの詳細確認

```
docker container status webserber
```

※webserberは任意

サーバの停止

```
docker stop webserber
```

※webserberは任意


サーバを起動

```
docker start webserber
```

※webserberは任意


docker hubからnginxのイメージを検索

```
docker search nginx
```

イメージの削除

```
docker image rm イメージ名
```

コンテナの作成

```
docker container create 
```

※作成するのみ

コンテナの作成/起動

```
docker container run 
```

対話的実行

```
docker container run -it --name "test1" centos /bin/cal
```

バックグラウンド実行

```
docker container run -d centos /bin/ping localhost
```

※-dがバックグラウンド実行


ポートのマッピング

```
docker container run -d -p 8080:80 nginx
```

不要なイメージの削除（noneの奴）

```
docker rmi $(docker images -f dangling=true -q)
```


コンテナに入る

```
docker exec -i -t コンテナ名 bash
```


ファイル指定してビルド

```
docker build -f Dockerfileのパス -t イメージ名 .
```

キャッシュを利用しない

```
docker build -f Dockerfileのパス -t イメージ名 . --no-cache
```
[Swift5]スプラッシュ画面の作成方法

## スプラッシュ画面とは
アプリケーションを起動した時に表示される画面をスプラッシュ（Splash）画面、またはローンチスクリーン（Launch Screen）と呼びます。アプリケーションにおいては、ユーザーが操作することのできない数少ない画面です。

例を挙げるとtwitterやLineのアイコンが中央に表示されるアノ画面ですね。

デフォルトではアプリケーションを立ち上げた時に真っ白な画面が表示されるようになっております。

## 作成方法
スプラッシュ画面はXcodeの`LaunchScreen.storyboard`から作成できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/bdec5d02-33ae-6877-3ae7-2535d292cf42.png)

このようにviewに色をつけてみましょう。そうすると。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/8d18d32b-db9b-d829-9ceb-ae0cc6df81fc.png)

アプリケーションを立ち上げたときのviewの色が変わりました。基本的な作成方法は以上です。
文字を入力したい場合などは`label`を貼り付けて編集すればOKです。

## 注意点
ひとつ注意点ですが、`LaunchScreen.storyboard`とControllerは紐付けられないようで、紐付けてビルドするとエラーが発生します。

なので、storyboardを使わずにコードでスプラッシュ画面を作成したい方、また動的なスプラッシュ画面を作成したい方は、新規ファイルを作成し`Splash.storyboard(例)`を作成し、作成したstoryboardとControllerの紐付けをおこない、`project/general/App Icon and Launch Images/Launch Screen File`で作成したstoryboard名を選択してあげればControllerと紐付きます。

## 最後に
私も今回初めてスプラッシュ画面を触ったので至らない点がありましたらコメントにてお声がけいただければと思います。最後まで読んでいただきありがとうございます！
11/4 Vue.js 学習１回目

## Vue.jsとは
　https://jp.vuejs.org/
　UIフレームワーク

## Vue Devtools

* Vue Devtools：Vue開発サポートツール

　　　https://github.com/vuejs/vue-devtools#vue-devtools
　　  ・Google Chromeに追加
　　  ＜機能＞
　　  ・Componentタブ：親子関係やデータを確認
　　  ・Vuexタブ：storeの状態を確認
　　  ・イベントタブ：イベント実行履歴を確認

* 「Vue.js not detected」が表示される

　　　https://qiita.com/hashimoto-1202/items/c81f5d4c271eef16d957
　　　・拡張機能の設定で「ファイルの URL へのアクセスを許可する」を有効にする

## Vue環境構築
* CDN(直接読み込み)： `<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>`
* NPM：Node.jsパッケージ管理
* CLI：コマンドラインインターフェース

## fiddle

* HTM/CSS/JavaScriptを書けるブラウザ

　　　https://jsfiddle.net/

## Hello Worldの表示
```
<html>
<head>
  <title>Hello World</title>
  <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>
      Hello World
    </p>
    <p>
      {{ message }}
    </p>
  </div>
  <!-- Script -->
  <script>
    document.write('Script Hello World');
    new Vue({
      el: '#app',
      data: {
        message: 'Hello World'
      }
    })
  </script>
</body>
</html>
```
キャッシュを削除してもgitignoreが反映されない時は？

# 何をしても`.gitignore`が反映されない！
という状態で詰まったので、解決までの経緯を備忘録兼ねて記事にします。

# 忙しい人向けの結論
- `.gitignore`の<font color="Red"><b>文字コードを見直す。</b></font>
- `UTF-8`か`Shift-JIS`にしよう。

**[詳細(下にジャンプします)](#結論文字コードを見直す)**

---
症状とか経緯とか↓
# キャッシュを消してもダメだった
一度pushしたファイルだったり、インデックスが残ってると反映されないらしいので、キャッシュを全消し。

```bash
git rm -r --cached .
```

改めて、

```bash
git add .
```
で、いつもは正常に反映される・・・はずだった━━━━

しかし今回ばかりは何をしても反映されない！

### 放り投げて寝ました
何時間も向き合って、あらゆるパターンを試してもダメ。
寝て起きて試してもダメ。

見てください。寝癖もダメって言ってます。
<img width="300" alt="no_neguse.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/be74ac49-f426-3b9c-fdad-8ecf384f6811.jpeg">

# 結論：<font color="Red"><b>文字コードを見直す</b></font>
**その`.gitignore`くん、文字コードおかしくないですか？**
**`UTF-8`か`Shift-JIS`で書きましょう。**

...

[ﾑﾘﾀﾞﾅ(・×・)](https://dic.pixiv.net/a/%E3%83%A0%E3%83%AA%E3%83%80%E3%83%8A)と諦めかけていたら、
![LELF_ignore.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/469d2fbd-ff6a-98ff-19e1-2223db4f5449.png)
ん...？文字コードが`UTF-16 LE`で、改行コードが`LF`だと...？
意図せぬ文字コードになっています。
![8CRLF_ignore.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/40dda33e-1783-7c28-25f5-9aac80e0177c.png)
文字コードを`UTF-8`にしてあげたら、**あっさり反映されるようになりました**(改行コードもCRLFに変更しました)。
`Shift-JIS`でも正常に反映されます。

# 原因とか
### 【原因】`Windows PowerShell`+`gibo`の相性問題
今回は、`Windows PowerShell`上で`gibo`を用いて生成していました。
**この組み合わせが問題**みたい。

```bash:今回の.gitignoreの生成風景
gibo dump Python VisualStudioCode >> .gitignore
```

どうやら、**`Windows PowerShell`と`gibo`の組み合わせだと**、デフォルトで**出力が`UTF-16 LE`かつ`LF`になる**みたいです。

Gitは`UTF-16 LE`で書かれた`.gitignore`を読むことができません。

### 【対策】`Windows PowerShell`+`gibo`は使わない
`gibo`を利用するなら`Windows PowerShell`は避けた方良さそうです。

代わりに、以下の組み合わせが良さそうです。

- `コマンドプロンプト` + `gibo`
- `Git Bash` + `gibo`
- `Macのターミナル` + `gibo`


### ~~【言い訳】`Windows PowerShell`+`gibo`は普段使っていない~~
~~普段、`Macのターミナル`で`gibo`を用いて`.gitignore`を生成していました。~~

~~前項のとおり、`Macのターミナル`+`gibo`の組み合わせの場合、`UTF-8`かつ`CRLF`で出力されるため、正常に反映されていました。~~

~~解決に何時間も要した最大の原因はコレです。
まさか文字コードが落とし穴だなんて、1μmも考えていませんでした。~~

# まとめ
何してもダメな時、文字コードを見直してみてください。

コレに限らず、文字コードが原因でハマること、年に数回ありますよね。
今後も気を付けたいところです。

遅延増加したけれど沢山眠れたので、
![yokunai.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/b4a93f0f-5371-5a75-74be-0c16cbf90024.png)
TCP/IPとは、わかりやすく解説

# TCP/IPとは
-「インターネットの世界で標準として使われるプロトコル」のことです。
-「TCP」と「IP」はセットで表現されることが多いですが、それぞれ別々の通信プロトコルです。

##そもそもプロトコルとは？　
　ネットワークを通じてコンピューターがやりとりするための約束事のことです。例えば、日本語しか話せないAさんと、英語しか話せないBさんがいるとします。AさんがBさんにそのまま日本語で話しかけてもBさんには全く何を話しているのかわからず情報伝達はできないと思います。
　この場合だと、両者が同じ言語という「約束事」を共有してないと情報を伝達することはできません。他にも、手紙でやりとりをする、電話をかけたり、受けたりするなど、全部共通の約束事が定められています。
　コンピューターのネットワークもそれと同じことが言えます。「どんなケーブルを使って、どんな形式でデータを送り、それをどうやって受け取り、どのように応答するか」など共通の約束事が定められています。
この約束事のことを「プロトコル」と言います。

##IPとは
　IPは経路の制御を行い、ネットワークからネットワークに通信データを送り届ける役割をしています。「Internet Protocol(インターネットプロトコル)」の頭文字をとって「IP」です。手紙と同じで通信データを届けるには、「送り元」と「宛先」が必要です。IPによるネットワークでは、コンピューターやネットワーク機器を識別するために、「IPアドレス」という番号を割り当てて管理しています。これがインターネット上の「送り元」や「宛先」あたる住所のようなものです。

##TCPとは
　しかしIPは一方的に通信データを送りつける（コネクションレス型の通信）だけなので、データ通信の中身に何が入っているかなど、通信品質の保証はされていません。それを補う役割をしているのがTCPです。TCPはデータのまとまりを受け取るとすぐにデータが破損していないかなどのエラーを確認して、間違っている場合は、データをもう一度送ってもらうように依頼します。このように受け取ったデータをチェックしているので、データの信頼性は高くなりますが、その分スピードが遅くなるという特徴があります。

##まとめ
・TCP/IPは「世界で標準として使われるプロトコル」で、TCPとIPは別々のプロトコルです。
・プロトコルは、コンピューターネットワークにおける共通の約束事のことです。
・IPはネットワークからネットワークにデータを送る役割をしています。
・IPだけでは、データの品質保証がされていないのでTCPがエラー確認や再送依頼などを行なっています。
PHP書き方

# このページについて
PHPの構文で独特だと感じたものについて備忘録を残す
遭遇しだい追記

## PHP構文の始め方
```
<?php
  ここに記述
?>
```

## 変数の画面出力方法
```
print "{$変数名}を出力";
print ''.$変数名.'を出力';
```

## 値の受け取り方
```
$変数名 = $_POST['nameに設定した値'];
$変数名 = $_GET['nameに設定した値'];
```

## エスケープ処理
```
$変数名 = htmlspecialchars($変数名,ENT_QUOTES,'UTF-8');
```

## form各要素ののnameの受け取り

```
if(isset($_POST['名前'])==true){ //その要素がある場合
}
```

## 画面遷移
```
header('Location:遷移先');
exit();
```

## DBへの接続
```
$dsn = 'mysql:dbname=DB名;host=ホスト名;charset=utf8';
$user = 'ユーザ名';
$password = 'パスワード';
$dbh = new PDO($dsn, $user, $password);

//PDOExceptionをエラー時に投げるための設定
$dbh -> setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

$sql = 'SQL文　代入したいものは?で指定';
$stmt = $dbh -> prepare($sql);
$data[] = '代入したいデータ１';
$data[] = '代入したいデータ２';
$stmt -> execute($data);

//DBからの切断
$dbh=null;
```
main の commit が進んだら RELEASE MERGE PR を作る GitHub Action 

`main` ブランチの commit が進んだら、`foo/main` への PR を作る job。
[GitHub CLI](https://cli.github.com/) 使って簡単に書ける。

```yaml
on:
  push:
    branches:
      - main

jobs:
  create_release_merge_PR:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - uses: actions/checkout@v2

      # See: https://github.com/cli/cli/blob/trunk/docs/install_linux.md
      - name: install GitHub CLI
        run: |-
          sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-key C99B11DEB97541F0
          sudo apt-add-repository https://cli.github.com/packages
          sudo apt update
          sudo apt install gh

      # See: https://cli.github.com/manual/gh_auth_login
      # See: https://cli.github.com/manual/gh_pr_create
      - name: create RELEASE MERGE PR
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |-
          git checkout -b release_merge_for_foo
          git push --force origin release_merge_for_foo
          echo $GITHUB_TOKEN > token.txt
          gh auth login --with-token < token.txt
          gh pr create \
          --title "RELEASE MERGE for foo" \
          --base xxx \
          --body "Auto Generated RELEASE MEREGE PR"
```

---
[![yaml](https://img.shields.io/badge/元のyaml-black.svg?logo=github)](https://github.com/sensuikan1973/dotfiles/blob/main/.github/workflows/release_merge_pr.yaml)
【Swift】入門書では教えてもらえなかった変数の形

##1.入門書で教わる変数の形

```swift:
var Ippanteki = 0
```

もしくは、

```swift:
var Ippanteki:Int = 0
```

##2.入門書では教えてもらえなかった変数の形

技術書などを見ていると出てくる変数の形

```swift:
var notIppanteki:Int {
     return 1
}
```

##正体はComputed Property
<code>１</code>で記載した変数の形は値を直接格納する
<b>Stored Property</b> (格納型プロパティ)
と呼ばれています。

それに対して、<code>２</code>で記載した変数は、
<b>Computed Property</b>（計算形プロパティ)
と呼ばれるものです。

Computedプロパティは、他のプロパティの値を元に処理を行い、その結果を返す変数で、

読取専用の<code>getter</code>、書き込みの行える<code>setter</code>というものがあります。

今回記載した変数は読取専用の<code>getter</code>で、
読取専用の場合は<code>get</code>を省略出来ます。

##宣言時には、データ型の記載が必須

<code>var notIppanteki:<font color="red">Int</font> {
     return 1
}</code>

このようにデータ型の記載が必要です。
記載しない場合は、

<font color="red">Computed property must have an explicit type</font>
というエラーが出ます。

>Computed Propaty（計算型プロパティ）は、詳しい型を必ず持っている必要があります。

つまり、計算型プロパティ宣言時には、データ型の記載が必要ということですね！

##まとめ
保存したuserDefaultsの値に応じて変数の値を変更したくて調べました。
おかげでスッキリしました。

```swift:
var computedPropaty:Int {
if UserDefaults.standard.bool(forKey: "ippanteki") {
    return 0
} else {
    return 1
}
```

##参考
・<a href="https://fuuno.net/swift/computed/computed.html">Swift : 変数の後に{ }・・これはComuputedプロパティ(get/set)というものです。</a>
・<a href="https://medium.com/@bj1024/swift-%E3%81%AE-read-only-computed-properties-41a3d181de57">Swift の Read-Only Computed Properties</a>
学生必見？VScodeでコードをカラー印刷(PDFで保存)する方法

この記事は以前、私が`VScode`で記述したソースコードを印刷した際のことを解説したものです。
わざわざメモ帳やWordから印刷する必要がありません！
今回紹介する方法は重宝すること間違いなしです。
例えば情報系の学生さんがレポート提出したい際などです。そのような方の参考になればと投稿させていただきます。
積極的にアウトプットしていこう、というわけで初投稿の記事になりますが暖かい目でご覧ください(^o^;

今回は以下の環境で操作をしています。

* MacOS 10.15.6
* VScodeのバージョン: 1.50.1
* Chromeのバージョン: 83.0.4103.122
* PrintCodeのバージョン: 3.0.0

#VScodeに拡張機能を追加する
![スクリーンショット 2020-11-03 23.57.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641943/2b3d4797-1e7e-bda3-c6ea-83ad8e48d36a.png)
VScodeを開き、サイドバーにある拡張機能(`Space+Cmd+X`)から`PrintCode`と検索し上記の画像と同じものをインストールをしてください。下準備はこれだけで完了です。

次は実際に使用してみましょう。

#印刷するまでの手順

１．印刷したいプログラムファイルを開く。

２．コマンドパレットで`PrintCode`と入力し選択する。

３．ブラウザ起動後、詳細設定を行い印刷を開始する。

これら3点を操作画面も添えて説明していきます。

###1.印刷したいプログラムファイルを開く。
まずは印刷しようとしているファイルを開いた状態にします。
今回はcファイルを印刷することとします。

###２．コマンドパレットで`PrintCode`と入力し選択する。
![スクリーンショット 2020-11-04 1.43.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641943/b37c2cec-b63b-5b55-e8f4-b1b13a7556b6.png)

コマンドパレットを`fn+F1`もしくは`Space+Cmd+P`で開き、検索窓で`PrintCode`と入力し選択してください。
そうするとブラウザが立ち上がります。ブラウザはご自身の設定しているデフォルトブラウザで立ち上がります。(今回のデフォルトはChrome)
####※Windowsの方へ注意事項
この拡張機能`PrintCode`はJavascriptを用いてHTMLが生成されているようなので
`IE(Internet Explorer)`だと**正常に動作しない可能性が高い**です。
Windowsを利用している方は**デフォルトブラウザが`IE`ではないこと**を確認してください。
もし、そうだった場合はChromeなどを規定とするように設定を変更してください。


###3．ブラウザ起動後、詳細設定を行い印刷する。
![スクリーンショット 2020-11-04 1.55.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641943/3f3d087a-a01a-952c-f84f-d83f8d33e65c.png)

ここまでくれば、あとはそれぞれの印刷設定するだけです。

送信先を確認し、印刷ボタン(保存ボタン)をクリックすれば**完了**です。
#まとめ
いかがだったでしょうか。
最後に**印刷設定について補足**しておきます。
行番号の表示 - 表示する
フォントサイズ - 12
印刷サイズ - A4
これらは`PrintCode`の**デフォルト設定**になっています。
詳細は`PrintCode`インストール時のページを下にスクロールするとあります。
内容としましては非常に簡単なものでしたが少しでも参考になれば幸いです。
ご総覧ありがとうございました。
【WIP】AWS学習

参考になった資料、書籍をまとめておく、備忘録

##awsのハンズオン

[Udemy で AWS を学んでみた（１）
](https://note.com/oka__r_____/n/na89bfe0a9457)

[AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得
](https://www.udemy.com/course/aws-and-infra/)


##Terraformについて

[Terraformとは？
](https://qiita.com/m_masashi/items/d3b3413066f47e86432d)
AmazonCorretto11がインストールできない時（macOS）

## 事象（2020/11/4現在）
https://docs.aws.amazon.com/ja_jp/corretto/latest/corretto-11-ug/downloads-list.html
上記ページよりAmazonCorretto11のパッケージ版をダウンロードし、インストールしようとした所、下記画像のように弾かれインストールできなかった。
※システム環境設定>セキュリティとプライバシーからも許可できず
![スクリーンショット 2020-11-04 2.52.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150463/c61a30ba-2736-5935-ce42-97e553d637ac.png)

## 解決

https://docs.aws.amazon.com/corretto/latest/corretto-11-ug/downloads-list.html
上記ページからダウンロードすればインストールできました。
ファイル名を見てみると、最初にダウンロードしていた方は若干バージョンが古く、弾かれていたようです。

## まとめ
公式だから最新だろうという考えが落とし穴でした。
近いうちに日本語ページも更新されて問題なくなるとは思いますが、同様の現象に遭遇した方は日本語ページではなくグローバルなページの方からダウンロードしてみると良いかもしれません。
【Laravel】MySQLでのユニットテストの環境設定

##環境
Laravel Framework 5.8.38
My SQL 5.6
##テスト用データベースの作成

まずテスト用データベースを作成する必要があるので、MySQLに入ります。

```
$ mysql -u root;
```
以下のコマンドで新しいテスト用データベースを作成。
今回はデータベース名をtest_laravel_db とします。

```
$ create database test_laravel_db;
```
作成後は一旦、MYSQLから出ます。

次に中身のテーブルを作成する必要があります。
テーブルは実際に使っているデータベースをmigrateによってコピーして使います。
その前準備としてプロジェクト直下にある.envファイルを同じ階層に複製して
ファイル名を.env.testing にしてください。
このファイルを作成する事によって、テスト実行時だけDBなどの環境がこちらのテストファイルに切り替わるようになります。

.env.testingファイルの内容を一部変更します。
変更する項目は以下の通りです。

```
APP_ENV=test_laravel_db
APP_KEY=
（↑空にします）
DB_DATABASE=test_laravel_db
```
尚、.envや.env.testingファイルの内容を変更した時はターミナルにてconfigキャッシュをクリアして下さい。

```
$ php artisan config:clear
```
先ほどAPP_KEYを空にした理由は、新しいAPP_KEYを発行すると自動で入力されるからです。
新しくAPP_KEYを発行するには以下のコードをターミナルで打ちます。

```
$ php artisan key:generate --env=testing
```
後ろに --env=testing を入れないと.env.testingの方にAPP_KEYが入りません。

上記の設定が完了したら、test_laravel_dbに向けてmigrateをします。

```
$ php artisan migrate --env=testing
```
ターミナルに成功結果が表示されると思いますが、念のためMySQL内で作れているか確認しましょう。

```
$ mysql -u root;
$ use test_laravel_db;
$ show tables;
```
実際のテーブルと同じ内容だったら、テスト用のデータベースの作成が完了です。

テストを正常に作動させるにはあと2つファイルを変更します。

プロジェクト直下にある phpunit.xmlを開きます。
下記のようにコードを追加します。

```
<server name="APP_ENV" value="testing"/>
<server name="BCRYPT_ROUNDS" value="4"/>
<server name="CACHE_DRIVER" value="array"/>
<server name="MAIL_DRIVER" value="array"/>
<server name="QUEUE_CONNECTION" value="sync"/>
<server name="SESSION_DRIVER" value="array"/>
<server name="DB_CONNECTION" value="test_laravel_db"/>
```
尚、開発環境によってserverタグをenvタグに変えなくてはいけないケースがあるようですが
私はserverタグのままで大丈夫でした。

次にconfig/database.phpを開きます。

'connections'の配列の中に'sqlite'や'mysql'などがありますが
'mysql'の内容を全てコピーして、'connections'内の中に以下のように収めます。

```
'test_laravel_db' => [
          'driver' => 'mysql',
          'url' => env('DATABASE_URL'),
          'host' => env('DB_HOST', '127.0.0.1'),
          'port' => env('DB_PORT', '3306'),
          'database' => env('DB_DATABASE', 'forge'),
          'username' => env('DB_USERNAME', 'forge'), 
          'password' => env('DB_PASSWORD', ''),
          'unix_socket' => env('DB_SOCKET', ''),
          'charset' => 'utf8mb4',
          'collation' => 'utf8mb4_unicode_ci',
          'prefix' => '',
          'prefix_indexes' => true,
          'strict' => true,
          'engine' => null,
          'options' => extension_loaded('pdo_mysql') ? array_filter([
           PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
           ]) : [],
```

設定が完了したら、ターミナルでテストを動かしてみます。

```
$ ./vendor/bin/phpunit
```
【自分用】VSCode設定

```
{
  "window.zoomLevel": 0,
  "workbench.colorCustomizations": {
    "statusBar.background": "#333333", // 通常のステータスバー
    "statusBar.noFolderBackground": "#777777", // フォルダ（プロジェクト）を開いていない状態
    "statusBar.debuggingBackground": "#CA0012" // デバッグ時
  },
  "editor.multiCursorModifier": "ctrlCmd",
  "java.errors.incompleteClasspath.severity": "ignore",
  "workbench.colorTheme": "One Dark Pro",
  "[ruby]": {
    "editor.tabSize": 2
  },
  "[html.erb]": {
    "editor.tabSize": 2
  },
  "[html]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "explorer.confirmDragAndDrop": false,
  "editor.minimap.enabled": false,
  "atomKeymap.promptV3Features": true,
  "editor.renderWhitespace": "all",
  // sass設定
  "scss.lint.boxModel": "warning",
  "scss.lint.duplicateProperties": "warning",
  "scss.lint.compatibleVendorPrefixes": "warning",
  "scss.lint.important": "warning",
  "scss.lint.zeroUnits": "warning",
  // フォーマット設定
  "editor.formatOnSave": false,
  // html設定
  "html.format.wrapLineLength": 100,
  "html.format.endWithNewline": true,
  "html.format.extraLiners": "",
  "breadcrumbs.enabled": true,
  "java.jdt.ls.vmargs": "-noverify -Xmx1G -XX:+UseG1GC -XX:+UseStringDeduplication -javaagent:\"/Users/miyabi/.vscode/extensions/gabrielbb.vscode-lombok-1.0.1/server/lombok.jar\"",
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "java.home": "/Library/Java/JavaVirtualMachines/amazon-corretto-11.jdk/Contents/Home",
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "terminal.integrated.rendererType": "dom",
  "git.enableSmartCommit": true,
  "vsnotes.defaultNotePath": "/Users/miyabi/project/devnote",
  "vsnotes.defaultNoteTitle": "{title}.{ext}",
  "[javascript]": {
  },
  "path-intellisense.autoSlashAfterDirectory": true,
  "files.trimTrailingWhitespace": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "instantmarkdown.autoOpenBrowser": false,
  "plantuml.exportOutDir": "documents/png",
  "plantuml.diagramsRoot": "documents/uml",
  "plantuml.exportSubFolder": false,
  "java.project.importOnFirstTimeStartup": "automatic",
  "stylelint.packageManager": "yarn",
}

```


<!--
1ttxbH83lE-lq9oIq95WeFtDR-H0jEwlv8oY3MuRNUQA
-->
プログラミングスクールのTechBoostを受講してみた感想

##はじめに
2020年7月から１０月までTechBoostのPHP/Laravelコースを受講していました。
大手のプログラミングスクール卒業生の感想はWeb上に多く公開されているものの
TechBoostはかなり少なかったので、参考になればと思い執筆しました。
スクールの概要はHPを見てもらえばと思うので、省略ぎみで書きます。

##読んでもらいたい人
・ プログラミングスクールを検討している人
・ TechBoostに興味を持っている人

##カリキュラムの内容について
カリキュラム教材見た時、正直最初は「少ないな」という印象でした。
あまり解説が載っていないと思いました。
しかし結果として私はこれで良かったなと思っています。
なぜならオリジナルアプリの制作や現場などでは自分で調べて解決する
「自走力」が必要だという事を知りました。
解説が丁寧すぎると逆にすぐ忘れそうだなと思いました。
その分、つまづく事も多かったですが、その時はメンターさんが優しく教えてくれました。
尚、教材に関しても頻繁に更新している様子が好印象でした。

##通学かオンラインコースか
私個人の意見では通学コースがおすすめです。
学習の流れは、最初教材のカリキュラムに沿って学習を進めて、その後にオリジナルアプリを制作します。
カリキュラムフェイズの時はそこまで難しくなく、受講時は新型コロナウィルス渦だった事もあって
ほとんどオンラインで学習を進めていました。
しかしオリジナルアプリ制作フェイズに入ったら、難易度が跳ね上がり
オンラインだけではかなり厳しかったので、終盤は教室に通い詰めていました。

転職活動時にしっかりとしたポートフォリオを作成したいという方は特に通学コースの方がいいと思います。

##メンターについて
教室とオンラインのメンターさんは日によって違います。
相性はあるものの、レベルの高い方が多い印象を受けました。
私はお気に入りのメンターさんがいる時は、何度も聞きにいっていました。
学習効率が飛躍的にUPします。
一方、専属のメンターさんはとても優しい方だったので、週１のメンタリングの時は
技術相談の他に学習の悩みなども聞いてもらっていました。
##教室の環境
教室は学習をするのにとても快適な空間でした。
席は15席くらいあるのですが、満席になる事はほとんどなく、生徒さんもマナーの良い方ばかりでした。
また教室内貸し出し図書もあり、私も実際に使用する場面がありました。

##PHP学習者とRuby学習者の比率
教室の生徒さんや月１のイベントなどの様子をみると
ちょうど5:5くらいの割合だったです。

##まとめ
TechBoostは有名スクールと比べて、料金が格安ですが
技術がだいぶ身についたので、満足度が高いです。コスパで考えてもかなり良いと思います。
特にオリジナルアプリを手厚くサポートしてもらい、自信をつける事ができました。
おすすめです。
親が display:flex; だと子要素のdisplayをtable-cellにできない

#前提

これは自分用のメモに近しいものです。一瞬戸惑ったので次すぐできるように。

#現象

単純な話です。

```html
<div class="wrapper">
  <div class="btn">BUTTON</div>
</div>
```

```css
.wrapper {
  display: flex;
  flex-direction: column;
}


.btn {
  width: 7rem;
  height: 2.6rem;
  border: solid 0.2rem #bd4a4f;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  margin: auto 1rem;
}
```

.btnの中身のテキストを中央揃えにするために`display:table-cell`を適用したいんですが、親要素がflexだと子要素のtable-cellが解除されるのか、うまく縦方向の中央揃えができなくなります。

# 対処法

ボタン自体に最低限のラッパーをつけて保護してあげるだけ。

```html
<div class="wrapper">
  <div class="btn-wrapper">
    <div class="btn">BUTTON</div>
  </div>
</div>
```

```css
.btn-wrapper {
  width: 7rem;
  height: 2.6rem; /*必要ないけど、btnにmargin autoを適用していた場合はこっちに移す。それに応じて高さと幅も必要になる。*/
  margin: auto 1rem; 
}
```
Firebase Cloud Messagingでトークンの取得方法が変わっていた

タイトルのとおり。
[com.google.firebase:firebase-messaging.20.3.0](https://firebase.google.com/support/release-notes/android#messaging_v20-3-0) からは `FirebaseInstanceId` クラスの `getInstanceId` 関数からではなく、`FirebaseMessaging` クラスの `getToken` 関数から取得するようになったようだ。

```kotlin
// 1. リスナーで非同期的に取得するやり方
FirebaseMessaging.getInstance().token.addOnCompleteListener { task ->
    if (!task.isSuccessful) {
        return@OnCompleteListener
    }

    val token = task.result
}

// 2. kotlinx-coroutines-play-servicesを使ってコルーチン内で同期的に取得するやり方
val token = FirebaseMessaging.getInstance().token.await()
```

参考：`com.google.firebase:firebase-messaging.20.3.0`より前の書き方（ **deprecated** ）

```kotlin
// 1. リスナーで非同期的に取得するやり方
FirebaseInstanceId.getInstance().instanceId.addOnCompleteListener { task ->
    if (!task.isSuccessful) {
        return@addOnCompleteListener
    }

    val token = task.result?.token
}

// 2. kotlinx-coroutines-play-servicesを使ってコルーチン内で同期的に取得するやり方
val token = FirebaseInstanceId.getInstance().instanceId.await().token
```

「親クラス（FirebaseInstanceId）が持つinstanceId、の中にあるtoken」から「親クラス（FirebaseMessaging）が持つtoken」に変わっているのがハマりポイントかも。