OmniAICreator/Qiita-1.07M huggingface dataset:
Flutterで誕生日から年齢を算出するときのメモ

# **この記事の内容**
現在うさぎの体調管理アプリを開発中で、誕生日から現在の年齢を算出して表示させたかったのですが計算の仕方がわからなかったため自分用のメモとしてここに書いておくためのものです。
初学者の粋をまだ出れていないためまだまだ勉強不足のためツッコミどころ多いかもしれません。
そのため間違いとか修正点ございましたら、ご指摘いただけると幸いです！

## 入れたライブラリ
- [intl](https://pub.dev/packages/intl#-installing-tab-)


## 参考にしたサイト
- [Flutter：2つの日付の違いを見つける](https://www.it-swarm-ja.tech/ja/dart/flutter%EF%BC%9A2%E3%81%A4%E3%81%AE%E6%97%A5%E4%BB%98%E3%81%AE%E9%81%95%E3%81%84%E3%82%92%E8%A6%8B%E3%81%A4%E3%81%91%E3%82%8B/806949779/)

- [生年月日から年齢を簡易計算する数式](https://qiita.com/aqril_1132/items/46e824541e657190ef3e)


## 画面の動き
![20201210_020244.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501157/53d24754-a1aa-3650-e81b-7c94fc3c246c.gif)


## 該当箇所のコード
modelとviewでファイルを分けてProviderをつかっております。

```dart:model
  String birthday;
  int age;
  
  
  ///日付選択
  Future<void> selectDate(BuildContext context) async {
    final DateTime selected = await showDatePicker(
      context: context,
      locale: const Locale('ja'),
      initialDate: DateTime.now(),
      firstDate: DateTime(DateTime(2006).year),
      lastDate: DateTime.now(),
      builder: (BuildContext context, Widget widget) {
        return widget;
      },
    );
    final selectedBirthDay = selected;
    final today = DateTime.now();

    if (selected != null) {
      ///今日の日付から選択した誕生日の年数のみ引く
      this.age = today.year - selectedBirthDay.year;
      this.birthday = (DateFormat.yMMMd('ja')).format(selected);
    }
    notifyListeners();
  }


```


        body: Consumer<AddRabbitModel>(
          builder: (context, model, child) {
            return SingleChildScrollView(
              child: Stack(
                children: [
               ----省略----
                          SizedBox(
                            width: double.infinity,
                            child: FlatButton(
                              onPressed: () async {
                                await model.selectDate(context);
                              },
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  FaIcon(FontAwesomeIcons.calendarAlt),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: model.birthday != null
                                        ? Text(
                                            '誕生日${model.birthday}: 年齢${model.age}歳')
                                        : Text('タップして誕生日を選択'),
                                  ),
                                ],
                              ),
                            ),
                          ),
			           ----省略----


## あとがき
今回は、Flutterで誕生日から年齢を算出のときの計算の仕方をやりました。
また勉強になったことをアウトプットがてら発信できるように勉強頑張ります。
大学生データサイエンティストのキャリアスタートから一年間の振り返り

##自己紹介
大学三年の春からデータサイエンス及びプログラミングの勉強を初めて約一年半経ちました。大学は生物系で研究室ではmatlabでの一分子定量分析を行っています。

自分はこのデータラーニングギルドの立ち上げ期での参加によって運良く（本当に運が良かったと思う）データ分析者としてのキャリアをスタートしました。タイトルではデータサイエンティストと名乗りましたが広義で該当すると思っています。定義が曖昧なのでタイトルはスルーでお願いします。

この記事では自分の2020年のデータ分析関連の活動を振り返ります。業務内容の列挙とその簡単な分類にはなりますが興味ある方は（特に未経験者や大学生）何かこれからのキャリアの参考になればと思います

##2019年
一応キャリアのスタートから書くと、2019年は夏頃から短期の時系列モデリングのインターンと秋から後述のNupp1でのインターンをしていました。
勉強始めたての春はpython,R,SQLなど分析者必須のスキルと、分析で使う基本的なビジネスフレームワーク、統計と機械学習について勉強してました。この辺の参考書籍とかは自分で調べたりデータラーニングギルドで教わったりでした。

##1月~4月
#####株式会社Nupp1でデータアナリストとしてインターン
2019年9月にデータラーニングギルド経由で紹介頂いたベンチャー企業でインターンアルバイトをしていました。
業務内容は非常に自由度が高く、以下が主な活動内容でした。
・metabaseで購買行動やユーザー属性に関する可視化やダッシュボードの作成
・アクセスログをpythonで分析可視化し、マーケティング施策やUI/UX改善の提案
・新規マーケティング施策のシミュレーション（リスク分析や感度分析）

#####データ活用プロダクトのデータアノテーションの管理
こちらもデータラーニングギルド経由で紹介頂いたお仕事です。
プロダクトで使うデータを用意するために、プロダクトに合わせて必要なデータを整理しその入力を外注化するための業務内容整理と外注先クラウドワーカーとの調整と業務管理を行っていました。
直接分析を行ったわけではないですが、PMと近かったこともありビジネス面での貴重な経験を得る機会になりました。


##4月~8月
#####大学院入試勉強
生命理工学系に属していましたが、インターンなどの業務活動を通して統計や経営学、認知心理学とデザインなどにより興味をもったので、同じ大学の大学院経営工学系を志望することにし、受験勉強をしていました。この受験勉強を通して

・マーケティング
・経営戦略
・会計/ファイナンス
・SQC（統計的品質管理）
・オペレーションズリサーチ（数値最適化など）

の体系的な学習が出来たのは今後の活動にとっても良かったので一応振り返りにも入れました。
試験結果は運よく合格でした。



##9月~12月

#####先述のNupp1でのインターン
・Google Analytics/Firebase でのアプリアクセス解析とアプリマーケティング
・Metabase でのダッシュボード作成

#####株式会社piponでの受託BIダッシュボード作成&etc..
・Qlicksenseでのダッシュボード作成
・figmaでUIデザインプロトタイプの作成

同じくデータラーニングギルドに在籍している方から募集があり始めました。ダッシュボード作成はここまでと変わらずですが、ここで以前から興味を持っていたUIデザインを始めました。（まだほんとに始まったばかり。）未経験だったので書籍で学習しながらです。読んだ学習書籍の中でもオブジェクト指向UIデザインは特に良く、最初に何も学習しない状態で作ったプロトタイプと比べてかなり違いと成長を感じました。これについてはまた記事でまとめたいと思います。

#一年を通して
自分の活動の大部分がSQLを書いてのダッシュボード作成でした。データサイエンティストスキルセットの分類で言うならエンジニアリングとビジネス力がメインでした。

データサイエンス方面では、今年は統計検定2級だけ取りましたが、来年は一級取得とモデリング関連での活動を増やしたいです。時系列分析や因果推論あたりを深掘りしたいなあと考えています。

業務としてはデータ活用基盤の構築・活用のフロー設計・導入あたりを経験したい考えていて、現在、データの定期取得→データベース→BIダッシュボードのポートフォリオ作成中です（ほんとはこっちを間に合わせてCalendar投稿したかった。)
(docker × jupyter × postgresql × metabase でのダッシュボードポートフォリオ作成スターターキット近日公開予定！)



あと、データサイエンス✖︎〇〇で考える掛け合わせのスキルで言えば
・マーケティング
・エンジニアリング（Vue,react,typescriptらへん勉強中）
・UI/UXデザイン(大学院の研究内容はこの辺になるはず)
あたりをメイン候補に頑張っていきたいと思いました。


##まとめ
自分の今後のキャリアについてはプロダクトマネジメントかグロースハックマーケティングに携わりたいとは思ってますが、まだ学習量も経験も足らずなりたいキャリア像は不明瞭です。

2021から大学院の二年間を有効に使って
・大学でUI/UXデザインの研究を中心とした経営工学の学習
・インターンや業務委託でエンジニアリング＆マーケティングの経験を積む
を中心に目の前のことに全力で注力していきます。

こうやってみると自分のデータ分析キャリアはデータラーニングギルドで始まりほとんどがここで成長の機会を得ています。どれだけ感謝すれば良いことか、、アクティブに活動をしていきたいと思います。
最後にはなりましたが、データラーニングギルドでの輪読会や分析プロジェクトなどの活動もまた自分の成長に欠かせませんでした。これからもよろしくお願いします！
[PHP] Messaging APIを用いたLINE Botでユーザー情報を取得するには

#今回の題
ラインボットを友達に追加したユーザーは、そのLINE Botにユーザー情報を提供しています。
今回はそこからユーザーのプロフィール情報、つまり、

- ユーザーID
- ユーザー名
- サムネイル画像
- ステータスメッセージ
- 言語 

を取得します。

#前提
- 公式のSDKを利用します。
[LINE Messaging API SDK for PHP](https://github.com/line/line-bot-sdk-php)

- おうむ返しまで完成している。
もし完成していない場合、以下の記事を参考に完成させてください。
[[PHP] Messaging APIを使ったLINEbotで色々試してみる](https://qiita.com/kuzira_vimmer/items/ad485a9365c2c23f0465)

#コード
早速タイトルの答えとなるコードです。

```php
 $user_id = $event->getUserId();
 $response = $lineBot->getProfile($user_id);
 $profile = $response->getJSONDecodedBody();
```

これだけです。

`$profile`の中に以下のような配列の形でユーザー情報が入っています。

```php
[
    'userId' => 'XXXXXXXXX',
    'displayName' => 'XXXXXXXXX',
    'pictureUrl' => 'XXXXXXXXX',
    'statusMessage' => 'XXXXXXXXX',
    'language' => 'ja',
]
```

今回は以上です。

#参考
[LINE Messaging API SDK for PHP](https://github.com/line/line-bot-sdk-php)
[LINE Developers プロフィール情報を取得する](https://developers.line.biz/ja/reference/messaging-api/#get-profile)
$ rails new で作成したアプリのDBを確認する方法

Railsでアプリを作成していると、ローカルで作業する限りDBの存在を強く意識することがありませんでした。

それは`$ rails new (app名)`で自動的にDBが作成され(デフォルトではsqlite3)、
DBとのやり取りは主にモデルを介して行うからです。

しかし今回、分け合って外部キー制約が掛かっているか確認する必要が出たので
直接DBを確認するため方法を調べたので備忘録としてまとめておきます。

#テーブルの確認
カレントディレクトリにて

```
$ sqlite3 db/development.sqlite3 #ローカルでのDBの実態
sqlite3> .databases; #データベース一覧
sqlite3> .schema; #スキーマ構造。railsのschema.rbと同じものが見れる。今回はここで外部キー制約を確認。
sqlite3> .tables; #テーブル一覧
sqlite3> select * from (テーブル名);　#テーブルの中身を参照(｢*｣は任意の文字という意味)
```
#参考
[Railsで作成したspliteへの接続方法][2]
[2]:[https://www.javadrive.jp/rails/ini/index6.html]
[SQLite入門 基本のコマンド][1]
[1]:[https://www.dbonline.jp/sqlite/]
【Java】特殊文字を含めたコマンドライン引数の指定

# 特殊文字を含めたコマンドライン引数の指定

についてまとめました。

## 指定方法

以下のような指定方法になります。

- スペースを含めたい場合：ダブルクオーテーション 「""」で囲む
- ダブルクオーテーションを文字として扱いたい場合：「\」で囲む

## 【説明】

Javaのコマンドライン引数は、スペースで区切って列挙しますが、「スペース自体を文字列として扱いたい」場合もあると思います。その場合は上記のように、ダブルクオーテーションや ¥ を使って区切ってあげます。

## 【実際に書いてみる】

### スペース区切りで配列を取得

まずサンプルコードを用意しました。

```java
public class Main {

    public static void main(String[] args) {
        // 先頭の配列だけを出力する
        System.out.println(args[0]);
    }
}
```

コマンドラインで以下のようにコンパイル→出力します。

```java
java Main.java ルパン三世 次元大介 石川五エ門 峰不二子
```

実行結果は以下です。

```java
ルパン三世
```

これはコマンドライン配列がスペース区切りでされるため、最初の引数である「ルパン三世」しか出力されていないためです。

### スペースを文字列として扱う

ダブルクオーテーションで囲ってスペースを文字列として扱います。

先程のコマンドの配列すべてをダブルクオーテーションで囲いました。

コマンドラインで以下のようにコンパイル→出力します。

```java
java Main.java "ルパン三世 次元大介 石川五エ門 峰不二子"
```

実行結果は以下です。

```java
ルパン三世 次元大介 石川五エ門 峰不二子
```

ダブルクオーテーションで囲った部分が一つの配列として取得されました。

ちなみに、ダブルクオーテーションはエスケープされない限りデータとして扱われることはないのでそのポイントは抑えておく。

```java
java Main.java "ルパン"三世
```

実行結果は以下です。

```java
ルパン三世
```

### ダブルクオーテーションを文字列にする

この場合は半角の「\」をダブルクオーテーションの前に使用します。

```java
java Main.java \"ルパン三世\" 次元大介 石川五エ門 峰不二子
```

実行結果は以下です。

```java
"ルパン三世"
```

## 【まとめ】

試験では以下の点に注意する

- スペースが区切り記号に使われる
- スペースを含む文字列はダブルクオーテーションでくくることで１つとして扱われる。
- ダブルクオーテーションそのものは文字として扱わない。

気になるのは、ダブルクオーテーションを文字として扱う場合、なぜか¥が入力できなくて、\じゃないと出来なかったんですよね・・なぜだろう。

## 参考文献・記事

参考記事・資料

- [徹底攻略Java SE 11 Silver問題集[1Z0-815]対応](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5Java-SE-11-Silver%E5%95%8F%E9%A1%8C%E9%9B%86-1Z0-815/dp/4295007625/ref=pd_lpo_14_img_0/356-5238196-1895250?_encoding=UTF8&pd_rd_i=4295007625&pd_rd_r=1c21865b-a9fe-43e8-ac01-46170e44abca&pd_rd_w=9El0Q&pd_rd_wg=hh5Hc&pf_rd_p=4b55d259-ebf0-4306-905a-7762d1b93740&pf_rd_r=72AVH18EM90CKG00CH5W&psc=1&refRID=72AVH18EM90CKG00CH5W)
- [Javaのコマンドライン引数の書き方を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/22469)
Nuxt.jsでpugとstylusを使う

# 前提
- [Nuxt.jsでソースをsrcディレクトリにまとめる
](https://qiita.com/oblivion/items/4b218e46531e9db287f3)

これをやっていること

# インストール
`pug`と`stylus`のモジュールをインストール

```shell
$ npm i -S pug pug-loader pug-plain-loader stylus stylus-loader@3.0.2 @nuxtjs/style-resources
```

# ファイル作成

ディレクトリ、`styl`ファイルの作成

```shell
$ mkdir -p src/assets/style && touch src/assets/style/{_reset.styl,_base.styl,_transition.styl,_keyframe.styl,_media.styl,_variables.styl,index.styl,resource.styl}
```

# 設定

設定ファイルに変更を加える

```javascript:nuxt.config.js
export default {
  css: [
    '~/assets/style/index.styl' // 追記
  ],
  styleResources: {
    stylus: '~/assets/style/resource.styl' // 追記
  },
  modules: [
    '@nuxtjs/style-resources' // 追記
  ]
}
```

# ファイルの内容

```:_reset.styl
*
  margin 0
  padding 0
```

```:_base.styl
img
video
  width 100%
  height auto
```

```:_transition.styl
.v-enter-active
.v-leave-active
  transition opacity .5s

.v-enter
.v-leave-to
  opacity 0
```

```:_keyframe.styl
@keyframes fade
  0%
    opacity 0
  100%
    opacity 1
```

```:_media.styl
$break-point = 768px

/* SP */
sp()
  @media all and (max-width: $break-point - 1)
    block

/* PC */
pc()
  @media all and (min-width: $break-point)
    block

/* IE11 */
ie()
  _:-ms-lang(x)::-ms-backdrop,
  &
    block

/* sp only */
.is-sp
  +pc()
    display none

/* pc only */
.is-pc
  +sp()
    display none
```

```_variables.styl
$main-color = #000000
$primary-color = #ffffff
```

```:index.styl
@import '_reset'
@import '_base'
@import '_transition'
@import '_keyframe'
```

```:resource.styl
@import '_media'
@import '_variables'
```

# Nuxt.jsのそのほか

- [Nuxt.jsを使う](https://qiita.com/oblivion/items/3488e41af630a3b07ff6)
Laravelに内蔵されているサーバーを起動してプロジェクトにアクセスする備忘録

まず動かしたいプロジェクトに移動する。自分の場合はneomediaprojectspaceというローカルディレクトリで動かしたいので

```terminal:コマンドプロンプト
>cd neomediaprojectworkspace
>php artisan serve
```
とします。すると

```terminal:コマンドプロンプト
Starting Laravel development server: http://127.0.0.1:8000
[Thu Dec 10 01:10:58 2020] PHP 8.0.0 Development Server (http://127.0.0.1:8000) started
```
でwebサーバーが立ち上がるので、

「localhost:8000」を検索エンジンに記載して接続します。

```terminal:コマンドプロンプト
Starting Laravel development server: http://127.0.0.1:8000
[Thu Dec 10 01:21:09 2020] PHP 8.0.0 Development Server (http://127.0.0.1:8000) started
[Thu Dec 10 01:21:48 2020] 127.0.0.1:54121 Accepted
[Thu Dec 10 01:21:49 2020] 127.0.0.1:54121 Closing
[Thu Dec 10 01:21:49 2020] 127.0.0.1:54124 Accepted
[Thu Dec 10 01:21:49 2020] 127.0.0.1:54124 [200]: GET /favicon.ico
[Thu Dec 10 01:21:49 2020] 127.0.0.1:54124 Closing
```
![スクリーンショット 2020-12-10 011644.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/826735/732c2871-4258-9936-ab23-f117cec3dab8.png)

とLaravelのデフォルトの画面へ接続することができます。
これより前のバージョンのララベルのデフォルト画面が画面の真ん中にLaravelの文字が書いてあり、個人的にがそのほうが好きだったのですが、、
Git・GitHub使い方メモ

# Git

gitの備忘録として
メモなので、日々付け足します。

##### リポジトリの新規作成
カレントディレクトリをリポジトリに指定

```
$ git init
Initialized empty Git repository in /Users/qiitaroh/Projects/Test/.git/
```

##### インデックスへ追加
コミット対象にする

```
$ git add [file]
```

##### インデックスのコミット
-mオプションでメッセージを付加

```
$ git commit -m "comment"
[master (root-commit) 4c399c8] start
 2 files changed, 37 insertions(+)
 create mode 100644 dir/<file>
```

or

##### 全てコミット
変更済みファイルを全てコミットする（addが不要）

```
$ git commit -a
```


--interactiveオプションはファイル単位で選んでコミットできるらしい。


##### Branch
```
test1というブランチを作成
$ git checkout -b test1
```

ローカルのブランチ一覧の表示

```
$ git branch
  master
* test1
```

##### Merge
test1の何かしらのファイルの変更後

masterに切り替え、test1をマージ

```
$ git checkout master
Switched to branch 'master'
$ git merge test1
```

ブランチの削除

```
$ git branch -d test1
```
# GitHub


##### リモートリポジトリへの追加
GitHubへローカルで作成したリポジトリを追加

```
git remote add origin https://github.com/username/<reposi>.git
```


##### 開発で使いそう版

forkする(GitHubにて)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672975/487046a6-6b85-1f6f-e286-0205658c7724.png)

「https\://github.com/\<username>?tab=repositories」にforkしたリポジトリができているので、そのリポジトリへ遷移しURLをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672975/d470cd01-693c-5423-0c11-9f0dc6b21936.png)


ローカルにクローンする(以降ローカル)
```
git clone https://github.com/username/<reposi>.git
```
ブランチの作成
```
git checkout -b feature/test-1234
```
ファイルの編集をする。
ファイルをコミット対象に追加
```
git add [対象ファイル名]
```
コミット
```
git commit -m 'test-1234_お米美味しい'
```
プッシュ
```
git push origin [ブランチ]
```

##### forkの同期
forkしたリポジトリを元ブランチと同期したい場合は下記を実施する。

1.アップストリームの設定
```
git remote add upstream https://github.com/username/<reposi>.git
```

2.upstremよりフェッチ
```
git fetch upstream
```

3.マージ対象のブランチに切り替え
```
git checkout [ブランチ名]
```

4.upstream/masterをマージ
```
git merge upstream/master
```
Deep Evidential Regression【Abstract】【論文 DeepL 翻訳】

この記事は自分用のメモみたいなものです.
ほぼ [DeepL](https://www.deepl.com/home) 翻訳でお送りします.
間違いがあれば指摘していだだけると嬉しいです.

翻訳元
[Deep Evidential Regression](https://arxiv.org/abs/1910.02600)
Author: Alexander Amini, Wilko Schwarting, Ava Soleimany, Daniela Rus

前: 無し
次: [【1 Introduction】](https://qiita.com/tomato_/items/82b96ec99b38541a07d9)

# Abstract

## 訳文

決定論的ニューラルネットワーク (NNs) は, 不確実性の校正された, ロバストで効率的な測定が重要である安全上重要な領域において, ますます導入が進んでいる. 本論文では, 非ベイズ型 NNs を学習するための新しい方法を提案し, 連続的なターゲットとそれに関連する証拠を推定する. これは, 元のガウス尤度関数に証拠的な事前分布を置き, NN を訓練して証拠分布のハイパーパラメタを推論することによって達成される. さらに, 予測された証拠が正しい出力と一致していない場合, モデルが正則化されるように訓練中に priors を課す. 我々の方法は, 推論中のサンプリングや, 訓練のための分布外 (OOD) 例に依存しないため, 効率的でスケーラブルな不確実性学習を可能にする. 我々は, 様々なベンチマーク上で較正された不確実性の尺度を学習し, 複雑なコンピュータビジョンタスクへのスケーリングを実証し, 敵対的や OOD テストサンプルへのロバスト性も実証している.



## 原文

Deterministic neural networks (NNs) are increasingly being deployed in safety critical domains, where calibrated, robust, and efficient measures of uncertainty are crucial. In this paper, we propose a novel method for training non-Bayesian NNs to estimate a continuous target as well as its associated evidence in order to learn both aleatoric and epistemic uncertainty. We accomplish this by placing evidential priors over the original Gaussian likelihood function and training the NN to infer the hyperparameters of the evidential distribution. We additionally impose priors during training such that the model is regularized when its predicted evidence is not aligned with the correct output. Our method does not rely on sampling during inference or on out-of-distribution (OOD) examples for training, thus enabling efficient and scalable uncertainty learning. We demonstrate learning well-calibrated measures of uncertainty on various benchmarks, scaling to complex computer vision tasks, as well as robustness to adversarial and OOD test samples.
streamlitで気象データを可視化

住んだことがある市町村、
どこの気候が過ごしやすいのか知りたくて可視化してみました。

# 作ったもの

https://mighty-basin-58725.herokuapp.com/

![スクリーンショット 2020-12-10 13.35.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188786/26b5079e-9790-a44f-269c-b3de0d50530d.png)


# データ取得
https://www.data.jma.go.jp/gmd/risk/obsdl/
※取得後、数行削ってから読み込んでます。

# コード
```python
import streamlit as st
import pandas as pd

df = pd.read_csv("./data_edit.csv", encoding="utf-8", header=None)

df_T = df.T
# df.columns=df.iloc[0]

# df_T.reindex(df_T.index.drop("Unnamed: 0"))
df_T.iloc[0,0] ="市"
df_T.columns = df_T.iloc[0]
df_T = df_T.iloc[1:]

df_T = df_T.drop_duplicates(subset=["市","年月日"])

df_T = df_T[df_T["年月日"].str.startswith("最高気温")]

df_TT = df_T.T
df_TT
df_line = df_TT.iloc[2:].reset_index(drop=True).drop(columns=[25]).astype(float)
st.write(df_line)

st.line_chart(df_line))
Next.jsをSSRやAPI Routeに対応させてFirebaseにデプロイする

レッドインパルスのたかけんです。
REDIMPULZ Advent Calendar 2020 の9日目のエントリーです。

## TypeScript導入済のNext.jsのテンプレート

[以前の記事](https://qiita.com/takaken/items/8ffbb3b11db1de2b3cb2)でTypeScript導入済のNext.jsのテンプレートを紹介しました。
今回は、こちらのテンプレートで作ったアプリをFirebaseにデプロイする方法を紹介します。

Firebaseの設定を導入済のテンプレートも作成したので、Firebaseにデプロイ前提の場合は、こちらからプロジェクトを作成してください。
https://github.com/redimpulz/nextjs-typescript-starter-with-firebase

## Next.jsのFirebaseのデプロイについて

https://qiita.com/1amageek/items/0d01dca2148df345224a

上記の記事で詳しく解説されていますが、 **SSRやAPI Routeなどのサーバーサイドの処理** を行うプロジェクトの場合は、

* Firebase Hosting : 静的コンテンツの配信
* Cloud Functions : サーバーサイドでの処理

の2つのサービスを使うことで、サーバーレスでデプロイすることができます。

## [nextjs-typescript-starter-with-firebase](https://github.com/redimpulz/nextjs-typescript-starter-with-firebase)

[nextjs-typescript-starter](https://github.com/redimpulz/nextjs-typescript-starter) をベースに、Firebaseにデプロイする設定を追加したテンプレートです。

### 使い方

```
yarn deploy
```

npm scriptにdeployコマンドを記載しているので、`npm run deploy` でデプロイできるようになっています。

### 説明
 

```json:.firebaserc
{
  "projects": {
    "default": "<project-name-here>"
  }
}
```

* プロジェクト名は自分のものに書き換えてください


```json:firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nextApp"
      }
    ]
  },
  "functions": {
    "source": ".",
    "predeploy": [
      "npm install",
      "npm run build"
    ],
    "runtime": "nodejs10"
  }
}
```

* Firebase Hostingには、publicディレクトリの内容を反映させます
* Firebase HostingのリクエストをCloud Funtionsに渡すようにしています
* Next.jsはNode.jsのバージョンが10.13以降に対応なので、 `runtime":"nodejs10"` を指定します


```javascript:functions/index.js
const { https } = require('firebase-functions');
const { default: next } = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev, conf: { distDir: '.next' } });
const handle = app.getRequestHandler();

exports.nextApp = https.onRequest((req, res) => {
  console.log('File: ' + req.originalUrl);
  return app.prepare().then(() => handle(req, res));
});
```

* Cloud Funtionsのエントリーポイントとなるファンクションで、リクエストをNext.jsアプリに渡すようにしています

### その他、注意点

Cloud FunctionsでNode.jsのバージョンが10以降を使うには従量課金のBlazeプランである必要があります


## まとめ

Next.jsをSSR・API Routeに対応させて、Firebaseにデプロイする方法を紹介しました。
Next.jsの場合、Vercelにデプロイさせるのが一番手軽かと思いますが、Firebaseにデプロイさせたい人もいると思うので、良かった参考にしてみてください！
Nuxt.jsでビルド時にconsoleを削除する

設定ファイルに変更を加える

```javascript:nuxt.config.js
export default {
  build: {
    terser: {
      terserOptions: {
        compress: { drop_console: true } // 追記
      }
    }
  }
}
```

# Nuxt.jsのそのほか

- [Nuxt.jsを使う](https://qiita.com/oblivion/items/3488e41af630a3b07ff6)
enebular × Noodlで保活支援アプリのプロトタイピングに挑戦！

この記事は [enebular Advent Calendar 2020](https://qiita.com/advent-calendar/2020/enebular)に投稿した記です！
アドベントカレンダーに参加していると12月があっという間に過ぎるように感じます。

#本題
私には今年の7月に生まれたばかりの息子がいます。来年度から保育園に通わせるために人生初の「**保活**」をしました。この保活がとても大変だったので、少しでも苦労を減らそうと支援アプリを考えました。

そのアプリについて[【オンライン】enebular developer meetup](https://enebular.connpass.com/event/193989/)にてLTをしました。技術にはあまり触れていなかったので、この記事に残します。

##伝えたい事

**Node-RED on enebularは、フロントエンドのプロトタイピングにおいて、爆速で作れるバックエンドサーバーになる！**

私は普段、フロントエンドのプロトタイピングに[Noodl](https://www.tds-g.co.jp/noodl-jp/)というビジュアルプログラミングツールを使用しています。

作る時間を減らしてアイデアを考える時間を増やしたいと思っています。
enebular × Noodlは、この思いを実現できる強力な組み合わせです！

#何を作る？
今回はNode-RED on enebularをRESTサーバーに見立て、NoodlでUIをプロトタイピングするために使用しました。

機能としては地図とメモ帳が一体になったアプリです。保活の時に、**地図にメモを書き込みたいけど見づらくなるな**と思い作ってみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/3290cc94-8559-67ae-0407-ed130462816e.png)

##想定するシステム構成
次の図のように、Noodlで作成したUIと、Node-RED on enebularでデータのやり取りを行い、Node-REDのフローでデータをFirebase Realtime DatabaseなどのDBに蓄積&参照します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/c58f6c49-78bc-93fb-2cad-21370496c5ea.png)

##作ったもの
今回はNoodlでUIを作成し、http requestをNode-REDに送り、レスポンスを受け取るというシンプルなものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/d09e1538-5ef6-3c9d-6d54-2cecab6ac811.png)

Node-REDでhttp requestの受け取りをするには、**http inノード**を使用します。
今回はシンプルにGETリクエストを受け取るようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/ed6194f9-0b98-d431-f117-162c06af41fd.png)

http requestの処理はhttp inノードと合わせて、**http responseノード**を使用します。このノードは名前のとおりhttpのレスポンスを返すノードです。今回は200レスポンスを返すようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/f721c0a8-2327-27e9-6b80-8df223c2b15f.png)

#今後は
今回はhttp response何もデータやアクションを起こしていませんが、今後はFirebase Realtime databaseやGoogleスプレッドシートにデータを蓄積するようにしていこうと思います。

余談ですが、Googleスプレッドシートを扱うノード**GSheetノード**を使おうとGoogle APIに新規プロジェクト作成しようとしたら、無料トライアルで作成できるプロジェクト数の上限に達しており作席できませんでした😢

年末なのでクラウドも使っていないのは断捨離ですね。
Nuxt.jsでドメイン直下じゃなくサブディレクトリにパスを切る

設定ファイルに変更を加える

```javascript:nuxt.config.js
export default {
  router: {
    base: '/subdir/' // 追記
  }
}
```

# Nuxt.jsのそのほか

- [Nuxt.jsを使う](https://qiita.com/oblivion/items/3488e41af630a3b07ff6)
【C#】Enumを使う際のTips

# 最初に

どうも、ろっさむです。

今回はC#でenumキーワードを使用する際の使い方をざっくりまとめていこうと思います。

# Enumとは

基本的には曜日や色、月日などの、**特定の値しかとらないデータ**を表現する際に使用します。
これは**`列挙型(enumeration type)`**と呼ばれ、**`enum`キーワード**を使用します。

```c#
public enum Colors
{
	Red,
	Yellow,
	Blue,
	White,
	Black,
}
```

列挙型要素のデフォルトは**`int`型**であり**、`0`から始まって`1`ずつ増加**していきます。
つまり`Red`が`0`で、`Yellow`が`1`、`Blue`が`2`となります。ただし、この数値は**オーバーライドすることも可能**です。

```c#
public enum Colors : byte
{
	Red = 1,
	Yellow = 2,
	Blue,
	White,
	Black = 100,
}
```

列挙型は**`long`,`short`,`byte`型とデフォルトの`int`型のみ**宣言することができます。これ以外(例えば`char`)の列挙型を作成することは非推奨となっており、リフレクションを使用して無理に作っても**例外がスローされる可能性**があります。

```c#
public enum Colors : byte
{
	Red,
	Yellow,
	Blue,
	White,
	Black,
}
```

# enumの使い方色々

前提コードが以下の状態だとします。


```c#
public enum Colors
{
	Red,
	Yellow,
	Blue,
	White,
	Black,
}
```

## キャストを用いた相互変換

### int→enum

```c# 
int red = 0;
Colors colors = (Colors) red;
```

### enum→int

```c# 
int red = (int) Colors.Red; 
```

### Int32→enum

任意の整数型の値を列挙型に変換するためには`ToObject(Type enumType, int value)`メソッドを使用します。このメソッドは**`object`型を返すので、更にCastを行う**必要があります。

```c#
Int32 red = 0;
Colors colors = (Colors) Enum.ToObject(typeof(Colors), red);
```

### 整数をキャストして列挙値に変換する場合の非メンバーの割り当てを回避する方法

`-1`など、**実際にはメンバーの値として存在しない**値でも、castして割り当てることが可能となってしまいます。これを回避するためには以下のように、**`IsDefined`メソッドを使用する**必要があります。

```c#
int unknown = -1;
if (Enum.IsDefined(typeof(Colors), unknown))
{
    // 処理
}
```

### enum→string

列挙値を文字列変換するためには`ToString()`メソッドを使用します。

```c# 
var red = Colors.Red.ToString();
```

## 列挙型要素の全取得方法

`System.Enum`クラスの`static`メソッドを使用した方法がメインとなります。

### 値の取得

`Enum.GetValues`を用いることで、要素の値を取得できます。

```c# 
foreach (int color in Enum.GetValues(typeof(Colors)))
{
	Console.WriteLine(color);
}
```

### 要素名の取得

`Enum.GetValues`を用いることで、要素の値を取得できます。

```c# 
foreach (string color in Enum.GetNames(typeof(Colors)))
{
	Console.WriteLine(color);
}
```

## ビットフラグとして列挙型を使用する

ビットフラグとして列挙型を使用する場合 **`FlagsAttribute`属性を付与する**必要があります。

```c#
[Flags]
public enum Colors
{
	Red    = 1,
	Yellow = 2,
	Blue   = 4,
	White  = 8, 
	Black  = 16,
}
```

詳しい使用方法は以下のブログ記事が参考になります。

↓↓↓↓↓↓↓↓↓

**[C#で列挙型(enum)をビットフラグとして判定および演算する](https://johobase.com/judge-calculate-enum-csharp/)**

# Enumを使用する際の注意点

列挙型は定数となるため、**enumの値はコンパイル時に定数に置き換えられます**。

const定義したものと同様に、enumに変更を加えた場合、そのenumを参照しているアセンブリなども再コンパイルする必要が生じます。


# 参考

- [Enum クラス（公式）](https://docs.microsoft.com/ja-jp/dotnet/api/system.enum?view=net-5.0#methods)
- [Top 7 C# Enum Code Examples](https://www.c-sharpcorner.com/article/top-7-c-sharp-enum-enumeration-code-examples/)
- [enum 利用時の注意事項について](https://qiita.com/kazuhisam3/items/093fbc734d37aae5db8c)
Nuxt.jsでソースをsrcディレクトリにまとめる

Nuxt.jsで使うディレクトリを`src`ディレクトリに集約する

```shell
$ mkdir src && mv assets components layouts pages plugins static store middleware src/
```

設定ファイルに変更を加える

```javascript:nuxt.config.js
export default {
  srcDir: 'src/', // 追記
}
```

# Nuxt.jsのそのほか

- [Nuxt.jsを使う](https://qiita.com/oblivion/items/3488e41af630a3b07ff6)
プロジェクトのルートから別ディレクトリのnpm scriptをyarnで動かしたいとき〜（npm --prefix的なやつ）

# わざわざcdするの、めんどくせ
例えばこんなディレクトリだと、appまで降りるのだりいから、makefileとか置いちゃう


app
- package.json
- yarn.lock
makefile


makefileにこうやって書いとこう
プロジェクトのディレクトリ入ったら、速攻でコマンド打って、さっさと開発環境立ち上げてぇし

```makefile
dev:
	yarn --cwd ./app dev
```

`make dev`で/appのpackage.jsonのscript実行できるよ
Nuxt.jsを使う

静的サイトジェネレーターとして、Nuxt.jsを使う

# 前提条件
- npmの5.2.0以降のバージョンがインストールされていること

# インストール
プロジェクトディレクトリの作成

```shell
$ mkdir test && cd $_
```

Nuxt.jsフレームワークのインストール

```shell
$ npx create-nuxt-app
```

# 開発
開発サーバーを起動

```shell
$ npm run dev
```

# デプロイ

静的HTML生成

```shell
$ npm run generate
```

# その他

- [Nuxt.jsでソースをsrcディレクトリにまとめる
](https://qiita.com/oblivion/items/4b218e46531e9db287f3)
- [Nuxt.jsでドメイン直下じゃなくサブディレクトリにパスを切る
](https://qiita.com/oblivion/items/65721e069a25a53a876b)
- [Nuxt.jsでビルド時にconsoleを削除する
](https://qiita.com/oblivion/items/264725917a43b9baef99)
- [Nuxt.jsでpugとstylusを使う
](https://qiita.com/oblivion/items/95ffa0cd55be8f54fcfd)
- [Nuxt.jsでpictureタグのコンポーネントを作る
](https://qiita.com/oblivion/items/381bb9187cb9f1fa79ff)
- [Nuxt.jsでobject-fitしたvideoコンポーネントを作る
](https://qiita.com/oblivion/items/d7ae905f54bfac5603ac)
- [Nuxt.jsでstore使う
](https://qiita.com/oblivion/items/f685c247199ef81115f0)
- [Nuxt.jsでデフォルトで使うメタ情報を設定する
](https://qiita.com/oblivion/items/2d173f7fd1f9980a7717)
- [Nuxt.jsにgtm入れる
](https://qiita.com/oblivion/items/56175bd59dae00260692)
- [Nuxt.jsでエラー用ページを作る
](https://qiita.com/oblivion/items/c6d0a0a356c3f3a020ab)
- [Nuxt.jsでLoadingページを設定する
](https://qiita.com/oblivion/items/0f0b1722fbf2b52d9eae)
- [Nuxt.jsでスクロールに応じてフェード出現
](https://qiita.com/oblivion/items/08d49949216bb89f5143)
- [Nuxt.jsでスムーススクロールする
](https://qiita.com/oblivion/items/8b458cb441aa34fb9ec1)
- [Nuxt.jsでvue-slickを使う
](https://qiita.com/oblivion/items/9353f0716515c0a23ffa)
Unity ShaderGraph レシピ #1 シンプルなグリッド

# シンプルなグリッド
![スクリーンショット 2020-12-10 0.07.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198311/ad3b01a7-d184-c980-ae5d-54098b38b0b1.png)


# 作り方

### 1. Rectangle 
四角形をタイリングして実現するので、まずはRectangleノードを用意します
![スクリーンショット 2020-12-10 0.09.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198311/eaa4f299-b438-eba8-142e-dc15d3d251c8.png)
ちなみにRectangleノードのWidth,Heightがグリッドの太さになります。
![スクリーンショット 2020-12-10 0.16.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198311/86734927-b593-e795-8a3d-ea25d327a677.png)

### 2. TilingAndOffset & Fraction
四角形のテクスチャをタイリングしたいのでTilingAndOffsetノードでリピート数を指定してFractionノードに繋げます。その結果をRectangleのUVに使用します。

![スクリーンショット 2020-12-10 0.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198311/184dc9e5-1f23-4a16-cde7-736ecd692415.png)

TilingのX,Yがマス目の数になります

![スクリーンショット 2020-12-10 0.21.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198311/7168b91f-90f7-301d-6a41-f8f33ce02321.png)

###完成！
### おまけ
白地に黒線だと何かと不便になるので、黒地に白線に変えるにはRectangleのOutをColorに繋げる前にOneMinusノードで反転させましょう。

![スクリーンショット 2020-12-10 0.27.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198311/a3c8dd27-fe5a-76cc-32fe-49853bdd76d2.png)

![スクリーンショット 2020-12-10 0.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198311/b017aa92-1bfb-c9dd-07de-5a2132f71c15.png)

グリッドの色を変更する方法は[次回](https://qiita.com/Teppy/items/d584b040900debb354f4)
KotlinのMockを使ったテストの実行時間

mockKを使ったテスト実行の遅さが気になった。
そこで、自前Mock、Mockito、mockKで、以下のinterfaceのmockを生成させて、それぞれのテスト実行時間を測定してみた。

```kotlin
@Mockable
interface TodosRepository {
    suspend fun add(todo: Todo)
    suspend fun get(): Flow<List<Todo>>
    suspend fun update(todo: Todo)
    suspend fun remove(todo: Todo)
}
```

## テスト実行時間の測定結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/d79e1094-44dd-a14d-52f9-e76a5d54e43e.png)

TodosRepositoryTestが自前mockを使ったテスト。同じテストコードを5回実行している。

**初回のテスト実行時間**
mockK(1.8s) > Mockito(174ms) > 自前Mock(19ms)

**2回目以降のテスト実行時間(平均)**
mockK(34.5ms) > 自前Mock(20.25ms) > Mockito(15ms)

## まとめ
- 初回のテスト実行時間は、自前Mockが一番短い。
- 2回目以降ならMockitoが一番短い
- mockKもMockitoも、2回目以降は、1回目よりも格段に実行時間は短い。
簡易stylus環境の構築

```json
{
  "scripts": {
    "start": "run-p server stylus",
    "server": "http-server ./htdocs -o",
    "stylus": "stylus -w src/style/index.styl -o htdocs/style/style.css"
  },
  "dependencies": {
    "http-server": "^0.12.3",
    "npm-run-all": "^4.1.5",
    "stylus": "^0.54.8"
  }
}
```
centos8のdnfにepelリポジトリを追加

xclipをインストールしたかったけどAppStreamリポジトリに入っていない？のでepelリポジトリを有効にしてそこからインストールする。

## epel有効

```s
$ dnf install -y epel-release
```


/etc/yum.repos.d/ 以下にepelのリポジトリ情報が追加される。
/etc/yum.repos.d/epel.repo
Node generatorを使ってenebularのプライベートノードを作ってみる

# はじめに

enebularでは、[Node-RED](https://nodered.jp/)のフローを作成する機能や、作成したフローをHerokuやRaspberryPiなどで実行する機能を提供しています。
普通、フローは、[Node-REDのサイト](https://flows.nodered.org/search?type=node)にある一般に公開されたノードを利用して作成しますが、2020年7月にリリースしたenebularのプライベートノード機能(有料)を利用すると一般に公開することなく独自のノードを作成し、それを使ってフローを作ることができます。

この記事ではNode-REDのノードを作成するツールである[Node generator](https://github.com/node-red/node-red-nodegen)を使ってenebularのプライベートノードを作ってみようと思います。

Node generatorは、OpenAPIドキュメント、Web of ThingsのThing Description、functionノードからNode-REDのノードを生成できるようです。
今回は、functionノードからプライベートノードを作ってみます。

# functionノードの作成

Node genaratorでfunctionノードからノードを生成するには、Node-REDをご利用のPCにインストールする必要があります。
PCには予め以下のNodeJSをインストールしています。

```
$ node -v
v12.20.0
$ npm -v
6.14.8
```

ターミナルを起動し、以下のコマンドを実行するとNode-REDがインストールされます。

```
$ npm install -g --unsafe-perm node-red
```

インストールが終わったら以下のコマンドでNode-REDを起動します。

```
$ node-red
```

起動したらWebブラウザで`http://127.0.0.1:1880/`にアクセスします。

Flow Editorが表示されますので、functionノードを配置し、JavaScriptのソースコードを入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380472/a09e102a-2f32-5ed2-e861-c8a43562ef7a.png)

今回はNode generatorのサンプルと同様にlower caseを実装します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380472/6bcd2b00-c8df-88cc-3edc-76888e58df6e.png)

ソースコードの入力欄の上部の本のアイコンをクリックし、`Save to Library...`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380472/4340eae4-c775-782c-bfb4-00a2f12ab51a.png)

名前(lower-case.js)を入力し、Saveボタンを押してLibraryにfunctionを保存します。
以上により、`~/.node-red/lib/functions/lower-case.js`にソースコードが保存されます。あとで、このファイルをNode generatorで利用します。

# Node generatorを使ったプライベートノードの作成

Node generatorを使ってfunctionノードから独自のノードを作成します。

まず、Node generatorをインストールします。

```
npm install -g node-red-nodegen
```

Node generatorを使ってノードを作成します。プライベートノードは、prefixが`enebular-privatenode-contrib-`である必要があるため、コマンドに指定します。
また、enebularにプライベートノードを登録するときにはtgzファイルの形式で登録するため、`--tgz`を付けることで直接tgzファイルを作ります。

```
$ node-red-nodegen ~/.node-red/lib/functions/lower-case.js --prefix enebular-privatenode-contrib-　--tgz
Success: enebular-privatenode-contrib-lowercase-0.0.1.tgz
```

コマンドが成功すると、コマンドを実行したフォルダに、`enebular-privatenode-contrib-lowercase-0.0.1.tgz`ファイルが作成されます。

これをenebularにプライベートノードとして登録します。

enebularにログインし、プロジェクトを選択します。
右下の`＋`ボタンを押してプライベートノードを登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380472/5e7ea1c8-041a-3c25-0d8a-ad893629554c.png)

プラリベートノードを登録したプロジェクトで、フローを作成し、Web Flow Editorで開くと左側のパレットに、今回作成したプライベートノード(lowercase)が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380472/3c6e1288-3f2b-2a57-ff9f-e3ebc85e2e4e.png)

このノードにInjectノードを使って`Test`という文字を入力し、Debugノードで出力を確認すると、すべて小文字に変換された"test"という文字列が出力され、期待通りに動作することが確認できました。

# まとめ

Node generatorを使ってenebularのプライベートノードを作成しました。
今回はfunctionノードから作成しましたが、[Node-REDのノードを作成する方法](https://nodered.jp/docs/creating-nodes/first-node)を知らなくても簡単にプライベートノードを作れました。

今後、OpenAPIやThing Descriptionからのノード開発も試せればと思います。

enebularのプライベートノードを利用すると、Node-REDの独自のノードを簡単に開発して試すことができますのでぜひご活用ください。
centosのAppStreamとBaseOSリポジトリとは


## BaseOS
基本的なOS機能のコアセットを提供する。

## AppStream
いろんなアプリケーション、言語、データベースを提供する

参考
https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/8/html/installing_managing_and_removing_user-space_components/using-appstream_using-appstream
Bearer スキームでトークン認証する API を FastAPI で実装した

勢いで書いたはいいものの特に使うこともないコードが発生してしまったので Qiita に書いて供養する。

FastAPI のお試しと Bearer スキームの仕様理解のための練習という感じ。

大いに参考にした記事： [トークンを利用した認証・認可 API を実装するとき Authorization: Bearer ヘッダを使っていいのか調べた - Qiita](https://qiita.com/uasi/items/cfb60588daa18c2ec6f5)

## 作ったもの
- パスワード認証
- トークンを用いた認証・認可
    - Bearer スキーム = `Authorization: Bearer` ヘッダを見る
- バックエンド API のみでフロントエンドは作っていない
    - 認証通ったら LocalStorage に token 入れておいて API 叩くときはヘッダ付けてくれって感じ
    - @nuxt/auth とかでシュッとできそう
- JWT ではなく古典的なセッションストレージ (メモリ) なのでステートフル

## コード
``` python:main.py
from fastapi import FastAPI
from routers import auth

app = FastAPI()

app.include_router(auth.router, prefix="/auth")
```

``` python:routers/auth.py
from os import getenv
from hashlib import pbkdf2_hmac
from secrets import token_hex
from fastapi import APIRouter, Header, Depends, HTTPException
from pydantic import BaseModel

router = APIRouter()

users = {
    "foo": "d7277d65c13dbd72e4b2d3ce66a56dd70fb5a0fea0bec058dc8e313fc743c12c",
    "bar": "466b21c4b915616bf9d69696bc1da7c0f819daa7371dadbecfd4d542d7e8b8a2",
}

session = {}


class Credentials(BaseModel):
    username: str
    password: str


def hash_password(password: str) -> str:
    return pbkdf2_hmac("sha256", password.encode(), getenv("SALT").encode(), 100000).hex()


def get_token_header(authorization: str = Header(None)):
    if authorization is None:
        raise HTTPException(401, headers={"WWW-Authenticate": 'Bearer realm=""'})
    if authorization[:7] != "Bearer ":
        raise HTTPException(400)
    return authorization[7:]


def verify_token(token: str = Depends(get_token_header)):
    if token not in session:
        raise HTTPException(401, headers={"WWW-Authenticate": 'Bearer error="invalid_token"'})
    return session[token]


@router.post("/signup")
def post_auth_signup(c: Credentials):
    if c.username in users:
        raise HTTPException(409)
    # TODO check password policy
    users[c.username] = hash_password(c.password)
    token = token_hex()
    session[token] = c.username
    return {"token": token}


@router.post("/signin")
def post_auth_signin(c: Credentials):
    if c.username not in users:
        raise HTTPException(404)
    if users[c.username] != hash_password(c.password):
        raise HTTPException(401, headers={"WWW-Authenticate": 'Bearer error="invalid_request"'})
    token = token_hex()
    session[token] = c.username
    return {"token": token}


@router.post("/signout")
def post_auth_signout(token: str = Depends(get_token_header)):
    if token in session:
        del session[token]


@app.get("/user")
def get_index(username: str = Depends(verify_token)):
    return {"username": username}
```

作りが雑すぎるので実用的ではないけど、何かやるときの参考にはなりそう。
pictureタグ

[http://scottjehl.github.io/picturefill/](http://scottjehl.github.io/picturefill/)

`picturefill.min.js`をダウンロード・設置

```html
<script src="assets/js/picturefill.min.js"></script> <!-- 追加 -->
</body>
```

```html
<picture>
    <source srcset="assets/img/img_pc.png" media="(min-width: 768px)">
    <img src="assets/img/img_sp.png" alt="">
</picture>
```
videoタグ

```html
<video :poster="thumb" autoplay loop playsinline muted>
  <source :src="src" type="video/mp4">
</video>
```

- width - 幅
- height - 高さ
- poster - サムネイル
- autoplay - 自動再生
- loop - ループ再生
- playsinline - インライン再生（スマホ用）
- muted - 音無し
- controls - コントロールを表示
【Java】デフォルトパッケージからのアクセス

## デフォルトパッケージから他のクラスにアクセスしようとすると？

**結論、コンパイルエラーになります。**

デフォルトパッケージ（無名パッケージ）に属するクラスは、同じ無名パッケージに属するクラスからしかアクセスできない。

以下の例ではデフォルトパッケージに属したSubClass.javaとex6というパッケージに属したMain.javaを例にします。

```java
//パッケージ宣言されていない = デフォルトパッケージ(デフォルトパッケージ)
public class SubClass {
    protected int num = 10;
}
```

```java
//ex6パッケージに属している
package ex6;

public class Main extends SubClass {

    public static void main(String[] args) {
        System.out.println(num);
    }
}
```

このまま実行するとコンパイルエラーとなります。

```java
Exception in thread "main" java.lang.Error: Unresolved compilation problem: 
	非 static フィールド num を static 参照できません

	at Main.main(Main.java:5)
```

## まとめ

無名パッケージどおしでしかアクセスできないのは、名前がついていないから指定のしようが無いから？かと解釈中です。

エラーや例外の種類についても、また復習しないといけないです。

参考記事・資料

- [徹底攻略Java SE 11 Silver問題集[1Z0-815]対応](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5Java-SE-11-Silver%E5%95%8F%E9%A1%8C%E9%9B%86-1Z0-815/dp/4295007625/ref=pd_lpo_14_img_0/356-5238196-1895250?_encoding=UTF8&pd_rd_i=4295007625&pd_rd_r=1c21865b-a9fe-43e8-ac01-46170e44abca&pd_rd_w=9El0Q&pd_rd_wg=hh5Hc&pf_rd_p=4b55d259-ebf0-4306-905a-7762d1b93740&pf_rd_r=72AVH18EM90CKG00CH5W&psc=1&refRID=72AVH18EM90CKG00CH5W)
【Java】List／Set／Mapってよく使うけど、何なん？？

# はじめに
こんにちは！@kanato4です！！

普段はJavaを扱う仕事をしているわけですが、Javaのコードで目にすることが多い「Set/List/Map」を今回の記事で簡単にまとめていきたいと思います。

というのも、自分自身がSet/List/Mapの違いについて明確に回答できないこと、上司から「この辺は最低でも知っとけ」と言われたこともあり、「まぁ知らんとあかんよなぁ」と感じたからです。

今後、Javaを使う機会もより多くなってくると思うので、その時のためにしっかり予備知識を入れていかないとね！という気持ちのアウトプットです。

# List/Set/Mapとは
List/Set/Mapは配列のように複数のデータを一つのオブジェクトとして操作することができます。

もちろん、データを取り出したり、追加・削除といったことも可能であり、その辺も配列と似ているところです。

ただ、配列の場合は最初に要素の数を宣言しないといけないです。

```Java
//配列の場合は要素数を指定する必要あり
String hoge[] = new String[5];
```
その点、List/Set/Mapは要素数を指定する必要はありません。サイズに関しては動的に変更可能なわけです。

## それぞれの特徴

また、List/Set/Mapには次のような特徴があります。

|名称|特徴|Collectionインターフェース|
|------|------|------|
|List|順序がある。重複した要素を含むことができる.|継承している|
|Set|順序はない。重複した要素も含むことができない。|継承している|
|Map|「キーと値のペア」の集合。重複OK。|-|

イメージとしては、`List`はきちんと順番に要素を並べているので重複しても要素の位置で判別できるから重複OK、`Set`は無造作に要素を詰め込むので重複するとどれがどれだか分からなくなるから重複NGといった感じでしょうか。

-----------------------
2020/12/10 追記
上記について、@swordoneさんよりご指摘をいただきました。

根本的な違いとして、Listはその名の通り「リスト」で、要素を「並べる」役割。Setは「集合」を表し、「その要素が集合に含まれるか否かを判定する」役割があります。

存在の有無を判定するために、同一の要素は2つ以上不要なので、Setは重複しないよう設計しています。


-----------------------


`Map`は配列ならばインデックス(0とか1とか。要素の順番。)で呼び出すところを、インデックスに名前(キー)をつけて、そのキーで呼び出せるようにできるものです。これも重複OK。キーも基本的に何でもOKです。pandaでもgorillaでも大丈夫！

Collectionはスーパーインターフェイスと呼ばれるもので、ListとSetはこのインターフェースを継承しています。Mapに関しては継承されていないです。Collectionインターフェースを継承することで、様々なメソッドを活用することができるようになります。詳しくは下記のURLにサマリーが載っています。

[Collection（Java Platform SE 7）](https://docs.oracle.com/javase/jp/7/api/java/util/Collection.html)

上記の表のようにList/SetとMapとの間には微妙に違いがあります。例えば、要素の追加をする場合、List/Setではaddメソッドを使用しますが、Mapではputメソッドを使用するといったことが挙げられます。この辺の差異については、きちんと把握をする必要がありそうですね。

# おわりに
ざっくりとではありますが、それぞれの違いについて理解できたように感じます。List/Set/Mapのどれを使うのが適切かは場面ごとに違ってくると思うので、使う際はしっかり考えていかないといけないですね。開発を通して身につけていきたいところです。
Fargateの環境変数をs3においたenvファイルから取得する方法


## はじめに
この記事は [『PERSOL PROCESS & TECHNOLOGY Advent Calendar 2020』](https://qiita.com/advent-calendar/2020/ppt) の23日目の記事です。

今年もこの時期がやってきましたね。
現在 AWS re:Invent がオンラインで開催中ですね。最近は影響の大きい変更がサービスに入った際にはTwitterのトレンドに載るなど、クラウドインフラに興味を持たれている方が増えてきて嬉しい限りです。

さて、今回はそんなre:Inventの内容ではなく、タイトルにもあるんですが今から1ヶ月前にリリースされたAWS Fargate(ECS)のアップデートの中で個人的に嬉しかったものの紹介とその実現方法を解説しようと思います。

## 目次
- さくっと
- なにが良くなったのか
- 技術検証時に困ったこと
- 終わりに

## 本編
### さくっと紹介
 s3にアップロードしたenvファイルをECS on Fargateで引いてくることができるようになりました。
envファイルの形式は至って単純で、以下の形式で記述するだけです。

``` env:develop.env
# コメントもかけて可読性up
VARIABLE=VALUE
ENVIRONMENT=develop
```

これをs3バケットにアップロードし、アップロードしたファイルのArnをコンテナの Environment Files にコピペします。
![スクリーンショット 2020-12-09 23.54.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/4389df3a-e959-065d-2724-fccafe8fdc1e.png)

envファイルの設定は以上で、タスクを更新すると次回からs３の環境変数ファイルを参照しにいってくれます。非常に簡単ですね。

### なにが良くなったのか

 今までECS on Fargateで環境変数をアプリケーションの外部で設定する基本的な方法は、コンテナの環境変数として設定することが主流だったかと思います。

![スクリーンショット 2020-12-09 23.41.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/59bed05b-c585-552e-390f-4280306c67ea.png)

最初のうちはかわいいもんですが、開発を続けていると気がつけばこのような形で環境変数がすごいことになります。(途中から面倒になりました)

![スクリーンショット 2020-12-09 23.44.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382072/332342e7-f9d2-9919-a1cb-87b5678fb4fa.png)

またこちら運用時のタスク定義が1つなら良いんですが、5個10個と増えていくと環境変数の追加や修正に割とばかばかしい時間がかかります。
もし本番環境で新バージョンをデプロイしました、でも環境変数の更新を忘れました。なんてことになったら障害が起きちゃうんですよね。

今回のアップデートで上記の問題は解消されたと言えます。

> 環境変数の追加・修正が大変

envファイルの更新だけで済みます(※もちろんタスクの更新は必要ですよ。)

> たくさんあるタスクの環境変数の更新が大変

一つのファイルで複数のタスクが参照できるので、ひとまとめに書いてしまえばenvファイル一個の更新で済みます。

注意して欲しいのが[こちら](https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/developerguide/taskdef-envfiles.html)のドキュメントにもあるのですが
>コンテナ定義に environment パラメータを使用して環境変数が指定されている場合は、環境ファイルに含まれる変数よりも優先されます。

なので、すでにコンテナの環境変数を使用されている場合は、envファイル利用に切り替える際には今まで使っていたコンテナの環境変数を消してあげる必要があります。同じ環境変数を使い続ける場合でも古い変数を参照してしまうことがないように整理はしてあげた方が良さそうですね。

### 技術検証時に困ったこと
　自分で検証を行った時2回程軽く詰ったので共有しておきます。

#### s3アクセスを許可するIAM policyはタスクロールではなくタスク実行ロールに追加する。
　今回のファイルアクセスには以下の二つのポリシーが必要です。

- s3:GetObject
- s3:GetBucketLocation

またこちらはECSのサービス作成時(だったかな？)に設定するタスクロールではなく、タスクの実行ロールというものに付与する必要があります。
デフォルトでは **ecsTaskExecutionRole** という名前で生成されていると思うので、ドキュメントの内容に沿ってIAM policyをセットしてやるとアクセスに必要な権限を付与することができます。

#### ルーティングを通す。
　当たり前のことですが、ルーティングのエラーなんて出ないもんで10分くらい首を傾げてました。
つまりはタスクに設定したsubnetからs3バケットへアクセスするためのVPCエンドポイントへのルーティングを通そうねということです。簡単なことですが見事に足下をすくわれましたね！！

### 終わりに
　今回のアップデートは環境変数ファイルの他にも ポジティブなToriさんが[Twitter](https://twitter.com/toricls/status/1324532430716297217)で詳しく説明をしてくれています。
環境変数の詳しい内容については [『環境変数の指定』](https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/developerguide/taskdef-envfiles.html) に載ってあります、是非ご参照ください。

急ぎ足で説明させていただきましたが、今回の記事は以上になります。


それでは よきコンテナライフを。

#### 参照
[ポジティブなToriさんのTwitter](https://twitter.com/toricls/status/1324532430716297217)
[『環境変数の指定』](https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/developerguide/taskdef-envfiles.html)
AWS用語集第一回(データセンター、アベイラリティゾーン)

#はじめに
AWSの用語ってたくさんあるし、英語だし、単語だけ聞いてもピント来ない！ということで自分の触ったことのあるAWSのサービスに出てくる単語を複数回に渡って説明していきたいと思います。

#用語の説明
まずはこちらの図を見てください。
https://infrastructure.aws
なにやら世界中にくもの糸のようにネットワークが張り巡らされていますね！この青い点がAWSのデータセンターです。各データセンターには数万台のサーバーが収容されていると言われています。このデータセンターの単位をアベイラリティゾーン（AZ）といいます。つまり「AZ」と言われたら「データセンターのことなんだなあ」と思えば大丈夫です！
また、青い点の中には黄色い点があります。このAZを束ねたものをリージョンといいます。「リージョン」と言われたら「国のこと」と思えば大丈夫です！日本には東京リージョンと最近できた大阪リージョンがあります。（下図）
![スクリーンショット 2020-12-09 23.36.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694973/78137453-9c6c-88ae-ba52-3ad2764c0252.png)
このように小さなデータセンターを複数に分けて配置することで安全性を高めています。ちなみに、ピンクの点はエッジロケーションといい、クラウドフロントというサービスが情報をキャッシュしておく拠点となります。キャッシュしておくことによりネットワークの通信速度の遅延を防ぐことができるみたいです。

#東京リージョンの構成
私たちがよく使うのは東京リージョンだと思うので東京リージョンを例にとって深堀していきましょう。東京リージョンは`ap-northeast-1`と表されます。`ap-northeast-1`の下に`ap-northeast-1a`、`ap-northeast-1b`、`ap-northeast-1c`、 `ap-northeast-1d`と4つのAZが続きます。このうち`ap-northeast-1b`に関しては現在のアカウントでは表示されないようです。
私たちは各リージョンにVPCというAWS内部のネットワーク環境をつくることができます。東京リージョンにVPCを作ろうといった場合、`ap-northeast-1a`、`ap-northeast-1c`、`ap-northeast-1d`の3つ全てのリージョン（データセンター）を使用することが可能になり、ここにEC2インスタンスを立てて、サーバーを起動して、といったことをすると世界中にwebサービスを公開できる訳です！

#まとめ
今回はAWSのデータセンターは世界中にあって、小さなデータセンターが集まってリージョンをつくることによりネットワークの冗長化を図っているという話をしました。次回以降どのようにしてそのネットワークを構成していくのか、ということについてまとめたいと思います！
【VBA】事務職で便利なマクロ集

<H2>概要</H2>
事務の仕事をしています。
職場によっては、データとしての体をなしていないデータをExcel上でまとめたり、セルの結合で構成された様式にデータを転写する作業をしたりすることもあると思います。
その作業の中でよく使っているExcelのマクロを紹介します。
個人用マクロブックに保存してショートカットキーを設定すれば特定の作業が楽になるかもしれません。

<H2>よく使うマクロ達</H2>

<H3>選択範囲の文字を全て半角にする</H3>
全角・半角入り乱れたデータをもらった時によく使ってます。

```vb
Sub half_width()
    Application.ScreenUpdating = False
    For Each n In Selection
        n.Value = Application.WorksheetFunction.Asc(n.Value)
    Next
    Application.ScreenUpdating = True
End Sub
```

<H3>選択範囲の文字を全て全角にする</H3>
全角文字しか受け付けない業務システム上にデータを貼り付ける時によく使います。

```vb
Sub half_width()
    Application.ScreenUpdating = False
    For Each n In Selection
        n.Value = Application.WorksheetFunction.Asc(n.Value)
    Next
    Application.ScreenUpdating = True
End Sub
```

<H3>選択範囲の数字を全て税込価格にする</H3>
これはよく使うと思います。

```vb
Sub tax()
    Application.ScreenUpdating = False
    row_n = Selection.Row
    For Each a In Selection
        If IsNumeric(a.Value) And a.Value <> "" Then
            a.Value = Application.WorksheetFunction.RoundDown(a.Value * 1.1, 0)
        End If
    Next
    Application.ScreenUpdating = True
End Sub
```

<H3>いい感じの表を作る</H3>
テーブルを使うまでもない表をぱっと作る時によく使ってます。

```vb
Sub line()
    Selection.Borders.LineStyle = xlContinuous
    Range(Cells(Selection(1).Row, Selection(1).Column), Cells(Selection(Selection.Count).Row - 1, Selection(Selection.Count).Column)) _
    .Borders(xlEdgeBottom).LineStyle = xlDouble
    Selection.Borders(xlEdgeTop).Weight = xlMedium
    Selection.Borders(xlEdgeBottom).Weight = xlMedium
    Selection.Borders(xlEdgeLeft).Weight = xlMedium
    Selection.Borders(xlEdgeRight).Weight = xlMedium
    With Range(Cells(Selection(1).Row, Selection(1).Column), Cells(Selection(1).Row, Selection(Selection.Count).Column))
        .HorizontalAlignment = xlCenter
        .Interior.ColorIndex = 27
    End With
End Sub
```

こういうデータを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/896190/994df32c-fb58-06f4-254b-90710c86c4c6.png)
こうできます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/896190/ab5238c4-ac7f-14b9-f401-e44f96e9694a.png)


<H3>xlA1形式とxlR1C1を入れ替える</H3>
セルの結合まみれの様式にデータを転写するマクロを作る時は
A1参照形式派の人もR1C1形式に切り替えるのではないでしょうか？
その切り替えを簡単にできるマクロです。

```vb
Sub switch_R1C1()
    If Application.ReferenceStyle = xlA1 Then
        Application.ReferenceStyle = xlR1C1
    Else
        Application.ReferenceStyle = xlA1
    End If
End Sub
```

<h2>最後に</h2>
少しだけですがよく使うものをピックアップして紹介させてもらいました。
お役に立てればうれしいです。
Notionでページのコメントを非表示にする

アルプ株式会社でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2020](https://qiita.com/advent-calendar/2020/notion) 9日目のエントリです。
8日目は[Notionでバックリンクを使う](https://qiita.com/pictiny/items/802641afe2ee02569dc4)でした。

# コメント
Notionはページに[コメント](https://qiita.com/pictiny/items/8bef45e801b90a2989fe#%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88)を表示することができます。

# ページのカスタマイズ
コメントが増えてくるとコンテンツを表示するまでのスクロールが必要になり、非表示にしたくなることがあるかと思います。
ページをカスタマイズすることで、コメントを非表示にすることができます。

## コメント表示のカスタマイズ
ページ右上のメニューから `Customize page` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/5d702eed-2f25-66d2-a605-ff7bc0ca27ba.png)

`Page comments` の設定が `Expanded` になっていると、コメントが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/4cf0bf28-5ba7-a70b-4365-d10c1441bc64.png)

`Expanded` から `Off` に設定することで、コメントが非表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/b9217c75-35e5-eeb3-4198-1e2466300310.png)

# まとめ
コメントの他に、[バックリンク](https://qiita.com/pictiny/items/802641afe2ee02569dc4)の表示も設定することができます。

公式ドキュメントは[Styles & customization](https://www.notion.so/Styles-customization-bfb379c2fa6d43f18d4aed9fd126b2cc)にありますので、そちらもご覧ください。