OmniAICreator/Qiita-1.07M huggingface dataset:
Xamarin.Forms 4.x を調べてみて


(Xamarin の環境をすべて捨てたからの再構築で色々詰まって時間がなくなった... ビルドとかは後回しでコラムチックになります…)
備忘録みたいな内容で間に合わせにもなっていない。。。 各内容は補充していくのでもう少し待っていただければと思います！

# 概要
せっかく Advent Calendarに登録したから久しぶりに Xamarin.Formsを触ってみます。
4.x になっており最後に触った 3.0(をほんの少し、メインは2.x)に比べてだいぶ進化したのでそのへんの感想を書いていきます。

# F100 Community
一番最初にRelease Notesみて気になった言葉。
こんな言葉自体しらなかったので、調べて見ました。(これを調べてたら 時間が無限に消化した)

感想としては
面白いスプリントだと思うし、それをデカデカとやって行こうとオープンにしているのはすごいなと思った。

F100の名前の由来はさておき。([元ネタ](https://english.stackexchange.com/a/326717/21503))
F100とは Formsには問題がたくさんありますが その問題は小さな、些細な問題の集まりで大きい問題を起こしているというもの。
F100がついたバグは それら問題を細かくしており そのバグの修正をコミュニティのメンバーで行っていました、

もう2年近く行っているのかな？
内容の[PullR](https://github.com/xamarin/Xamarin.Forms/pulls?q=is%3Aopen+is%3Apr+label%3AF100) や[Issue](https://github.com/xamarin/Xamarin.Forms/labels/F100) を見ると知見が広がって勉強になるので暇なときに眺めてます。

# Shellを触る
## Shellって何
Navigation, Tabbed, Carousel, MasterDetailという ContentPageの親にあたる Pageがナビゲーションをコントロールしていたが
それらナビゲーションとは違う 全く新しいナビゲーションのコンポーネントなのかな。

見た目はMasterDetailと似ているが Shellは Androidの DrawerLayoutをラップしたもの。習って他のプラットフォームでも実装している。 これのおかげで他のプラットフォームで Drawer使うとか言われたら Xamarin.Forms はありな空気になったと思う。

## サンプルを読んで
[ドキュメント](https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/app-fundamentals/shell/create)

https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/app-fundamentals/shell/create#describe-the-visual-hierarchy-of-the-application を見る限り階層は非常にシンプル XAMLでかける用に見えるがサンプルではStyleの実装が長ったらしいので優しくないが、Resourceとして切り出せばいいだけだと思います。

ライフサイクルとか、ナビゲーションとか 調べたいこと多いけど TODO.

## 実装してみよう
TODO

# CollectionViewを触る
TODO

# 備考
## テストしてたら起きたバグ
```
System.TypeLoadException: 'Could not resolve type with token 01000016 from typeref (expected class 'Xamarin.Forms.Xaml.Diagnostics.VisualDiagnostics' in assembly 'Xamarin.Forms.Xaml, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null')'
```
ぐぐったら restore したらや bin/obj 消したら直るって出たので 試しに消して再ビルド。するとエラーがたくさん出た。各プロジェクトの パッケージを見たらFormsのバージョンが揃ってなかった。
iPhone(iOS13)でパスワードレス(WebAuthn)認証を試す

# iPhone(iOS13)でパスワードレス(FIDO2)認証
ついに2019/12/11にリリースされた iOS 13.3 でパスワードレス(FIDO2)認証がサポートされました。
https://support.apple.com/ja-jp/HT210393#133
引用
> このアップデートにはバグ修正とその他の改善も含まれています。このアップデートには以下が含まれます:
> SafariにNFC、USB、LightningのFIDO2準拠のセキュリティキーへのサポートを追加

しかしNFC、USB、Lightningに限定され、BluetoothやTouch IDは含まれません。＜惜しい！！
惜しいですが、まずはFIDO2がiOSのSafari上で動作するようになった事を素直に歓迎しつつ、試してみました。
※2020/06/22にiOS14でのFaceID、TouchIDへの対応が発表されました。iOS14betaがリリースされましたら、そちらについても検証します。
https://developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes

OpenAM14のWebAuthn認証モジュールを呼ぶと以下のようなダイアログが表示されるようになりました。

<img width="375" alt="IMG-2125.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316098/13b44002-e55c-afc1-53ea-726b0497c1d9.png">
「キーをiPhoneの上部に」というのがミソです。上部以外では反応しません。

# iOS 13.3 2019/12/11 時点の動作状況
早速というほどのスピードでは無いですが、手持ちのデバイスで試してみました。
(2020/04/09 Update)
※iPhone7 SIMフリー版 でテストしてます。
## 利用可能なブラウザ
今の所はSafariしか動作しないです。
Safari以外のブラウザは12/11より前のリリースなので、ある意味当然な事です。
以降にリリースされるバージョンに期待です。(2020/04/09 Update)

|  App | Ver. |動作 |
|---|---|---|
|  Safari |13.x|○ |
|  Chrome |80.3987.95|☓ |
| Firefox |24.1|☓ | 

## 動作を試した認証デバイス
接続方法はNFCかLightningです。

| メーカー | モデル名 | 接続方法 |
|---|---|---|
|Yubico| Yubikey 5 NFC | NFC |
|Yubico| Yubikey 5Ci | Lightning |
|Google|USB Titan Security Key | NFC |
|Feitian| AllinPass(K33) | NFC |
左から表の降順で、Yubikey5NFC, Yubikey5Ci, Google Titan, Allinpass
![IMG-2133.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316098/4662b025-e887-2952-4081-dc2055027441.jpeg)



## 試したFIDO2のオプション
residentKeyやuserVerificationなど登録、認証時のオプションについて試してみました。
userVerificationが使えないです。キーにPINが設定されていても、prefferedの場合は無視され動作し、requireの場合はPIN入力のダイアログが出ずにダンマリです。
※iOS14ではPIN入力もサポートされる予定です。

|オプション|利用可否|
|---|---|
|residentKey|☓※1 |
|userVerification|☓ |
※1 キーにuser.id等保存されることは確認できましたが、userVerificationが出来ないのでユーザーネームレス認証に使えないです。
iOS以外ので環境では、residentKey=trueにすると、userVerification=discouragedにしても、認証デバイスへPIN設定を強制するダイアログが出てしまいます。デバイス（実装）依存かもしれませんが、これ以外の動作をするデバイスが今の所手元にはありません。
![residentkey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316098/4cdf341c-0c5c-358d-484d-d8efdff6f6e5.png)


## 複数認証デバイス登録時の対応
RPサーバーに一人のユーザーで複数の認証デバイスを登録すると、OpenAM14ではデバイスは以下のような表示となります。
![keys2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316098/bd6a33c1-64f2-fa24-c963-6476f091b279.png)

複数の認証デバイスが登録されていると、認証開始時にRPサーバーから登録されているCredentialIDを全て提示するのがWebAuthnですが、ちゃんとハンドリングできるかはクライアント側次第です。
で、これは動作しました。

ローカル認証に関する実装が無い感じを受けるのですが、いずれTouch ID/Face IDと共に実装されてくるのでしょうか。本命はそっちだと信じたいです。※iOS14にて対応予定と発表ありました。iOS14 Safari 14のTouch ID/Face ID対応について[記事](https://qiita.com/tonoki/items/b65be74b195c299bf585)書きました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/3kA6U3nlW_8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
heroku+AI(pytorch:seq2seq)でQ&AのLINEbotを作成してみた

ただ自然言語処理するだけでなく、何か有益になりそうな形あるものを「無料」で作りたかった。
やったこと、ハマったところなどつらつらと。
※暇見つけて書いていきます。


#いきなりですがハマったところ
・LINEの固定IP制限
・LINEBOTのSSL化
　　⇒本当にいきなりですんません。LINEはBOTのサーバがSSL化されてないとダメで、
　　　かつ固定IP化されてないとダメなんです。
　　⇒herokuに感謝！！！
　　⇒herokuでSSL化できます。
　　⇒さらにherokuのFixieで固定化できます。
　　　カードの登録が必要だけど、無料枠が（自分には）大きいので採用した。
　　　偉そうに書いているが、本当にありがたい

・janome
　　⇒分かち書きするために入れたかった。（というかローカルでは使っていたんだけど）
　　　デプロイのインストール時に500MBを使い切ってしまうんでダメだった。
　　⇒なので、janomeは学習時（というか、分かち書きに変換するとき）だけ使うものとします。
　　　
・pytorchでcpuinfoしてエラー
　　⇒こちらもインストール時にエラーになってしまうんでcpu版の小さいのを使います。
　　　ですが、いざ起動させるとcpuinfoのエラーが出てしまうんです。
　　　だいぶ検索し、バージョンで回避できることが判明した。
　　　後でも出てきますが以下を指定して使っています。
　　　　http://download.pytorch.org/whl/cpu/torch-1.0.1-cp36-cp36m-linux_x86_64.whl
　　　　torchvision==0.2.1
　　　

#用意したもの
1.LINE devアカウント
　　⇒LINEのボットなので取得しないとね
2.heroku
　　⇒BOTのサーバになる
3.github
　　⇒herokuにソースを送る（でいいのかな？）

まずは
#LINEのデベロッパーアカウント作成
参考：：：：：https://developers.line.biz/ja/
SSLが必要
ボットサーバのIPアドレスが固定である必要がある

#heroku
アプリ作成
pythonで登録
ログの見方
LINEのアクセストークンを環境変数に設定する
LINEのシークレットトークンを環境変数に設定する
FixieでIP固定
　herokuの機能。お試し程度なら無料枠内で収まる
FixieのURLを環境変数に設定する
SSLはherokuのサブドメイン扱いかな

#github
ソースを登録
runtime.txt　（python-3.6.9とだけ記載）
requirements.txt　以下を記載
　　Flask==0.12.2
　　line-bot-sdk==1.8.0
　　http://download.pytorch.org/whl/cpu/torch-1.0.1-cp36-cp36m-linux_x86_64.whl
　　torchvision==0.2.1
pytorchのバージョンを上記のものにしたらcpuinfoのエラーはなくなった
【エラー】Nuxt.jsとLaravelのAPIでajax通信した際のCORSエラー

# 概要

現在、Nuxt.jsからLaravelで作ったAPIにaxiosライブラリで通信しようとしたら、以下のようなエラーが出た。

<img width="446" alt="スクリーンショット 2019-12-16 17.40.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352619/d6b9ec13-7843-08fa-8cd8-3b66965cb3b3.png">

# エラー前のコード

Nuxt.js自体を`http://localhost:3000`で起動。

## index.Vue

```js:
        methods: {
            get_text(){
                this.$axios.$get("/index")
                .then((response)=>{
                    this.text = response
                })
                .catch((error)=>{
                console.log(error.name + ": " + error.message);
                })
            }
        }
```

## nuxt.config.js

```js:

  axios: {
    baseURL: 'http://localhost:8000/api'
  }

```

# 原因

いわゆるCORS(Cross-Origin Resource Sharing)エラー。

僕の解釈ですが、以下が必要だと思います。

・信頼性のないドメインを排除するために出たエラー
・Ajax通信する際は、ドメインが同じである必要性

今回僕のコードでは、
`http://localhost:3000` →　`http://localhost:8000`と、異なるドメインに対してAjax通信しようとしています。

`nuxt.config.js`を以下のように修正しました、プロキシを設定します。

# 修正後のコード

## index.Vue

```js:
        methods: {
            get_text(){
                this.$axios.$get("/api/index") // 修正
                .then((response)=>{
                    this.text = response
                })
                .catch((error)=>{
                console.log(error.name + ": " + error.message);
                })
            }
        }
```

## nuxt.config.js

```js:

  axios: {
    proxy: true  // 追加
  },
  proxy: {
    '/api': 'http://localhost:8000', // 追加
  },

```
AWSのリソースへのアクセス許可が降りる原理

# 大前提
`AWS policy = Identity policy(アクセス元) + Resource policy(アクセス先)`

# AWSのポリシーのアクセス許可が降りる原理
`Access condition = [Identity Policy ALLOWS the access] & [Resource polict DOES NOT DENY the access]`

# Identity Policy
IAM Policy is attached to IAM roll, Group, User.
It is composed of multiple statements (= effect+action+resource)
effect = Allow / Deny
action > (ex)  ["athena:StartQueryExecution", "athena:GetQueryExecution"]
resource > (ex) "arn:aws:athena:*:*:workgroup/primary"
RESOURCE IS LIMITED BY ACTION.
(おかしい組み合わせの時はEdit Policy > Visual Editor のページでwarningが出る)
# Resource Policy
Resource Policy is attached to resouce (e.g. S3 bucket, Athena table...)
This can specify IAM entities which are denied to access this resource.
AWS API Gatewayのdeploymentとstageの位置付けを整理


# Deployment
* APIのバージョン。
* 既存のstageを選ぶか、stageを新規作成してデプロイ。

# Stage
* エンドポイントのバージョン。
* １stageに１URLが振られる。(URLのpathの末尾で区別される)
* 既存のDeploymentDateの一覧からDeploymentをひとつ選択して作成。

# DeploymentとStageの位置付け
* Stageがdeploymentの一覧の中から一つを選択する。(StageのDeployment Historyタブにて)

ややこしいのはdeployment新規作成の時にそれに紐づけられるstageを必ず選択せねばならないこと。つまり、deployment作成時にはそれはいずれかのstageに選択されていなければならない。しかしその後、そのstageに紐づけられるdeploymentを切り替えることで、作成したdeploymentがどのstageにも選択されていない状態が起こりうる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/e55f59c3-56da-d206-2e06-63e60cee5369.png)

# 補足
あるAPIで最初にDeploymentを行う際には、`Deploy API > Deployment stage=[New Stage]`
Deploymentが一つもない状態でstageを作成することはできない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/5f76255c-86bd-f370-c4cd-4ef441d700a0.png)
Kaggleで機械学習をはじめよう

#はじめに
機械学習をはじめて１年くらいの初心者ですが、最近Kaggleを使って勉強をしたりしています。
Kaggleはガチなデータサイエンティストも大勢いらっしゃるのですが、
実際やってみて、私のような超初心者や、ちょっとやってみたいな～くらいの軽い気持ちの人が
勉強のとっかかりにするのにもいいんじゃないかと思いました。

この記事はKaggleをやってない人に向けてKaggleはこんなところがいいよ！という記事なので、技術の話は一切触れません。

#私のこと
入社前は大学で生物の研究をしていて自然を満喫？しておりました。
プログラミングを初めてもうすぐ2年、機械学習初めて1年程になります。
今は画像処理の仕事をしているので、この記事も画像中心の考え方になっていると思いますがご了承ください。

Kaggleは今年の夏初めてコンペに参加し、上位20%以内にはなんとか入ったくらいの微妙な腕前です。

#Kaggleとは
>Kaggleは企業や研究者がデータを投稿し、世界中の統計家やデータ分析家がその最適モデルを競い合う、予測モデリング及び分析手法関連プラットフォーム及びその運営会社である。

Wikiより引用。ちなみに親会社はGoogle。
Kaggleでは常にいくつかコンペが開催されていて、参加者は好きな課題に挑戦してその腕を競い合います。
日本からのコンペには過去にメルカリ、リクルート、くずし字認識のコンペがありました。

#Kaggleのいいところ
##1. すぐ始められる！
環境構築って面倒くさいですよね。やりたいことがあってもまずそのハードルを越えなきゃと思うと腰が重くなる。。

Kaggleではブラウザ上でPythonとRのカーネルを使うことができます。
Rは使わないのでPythonカーネルしかわかりませんが、機械学習に定番なライブラリはほとんど入っています。

ライブラリを追加したい場合はpipかcondaが使えるようです。
![qiita01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487676/27a0fd80-9325-a5bf-0aaf-6397e0b5a239.png)

GCPも連携して使えるんですね。今知った。

##2. GPU貸してくれる！
↑の画像でお気づきだと思いますがGPUを貸してくれます。とてもありがたい。

ただし、色々と制限があます。

- 30h / week
- GPU Onにすると CPU 16GB ⇒ 13GB


![qiita03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487676/f9671e85-1868-3050-060c-4b63d982af86.png)![qiita05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487676/4fd50a92-ce05-4d1c-c239-e10b0932db0e.png)
（Sessionに 9 hours と書かれているのは、カーネルの実行時間の制限らしいです。9時間以上の処理はできません。）

ただ、コンペで上位を狙おうと思うとこの無料分では足らなくなってくるとは思います。。

##3. データ用意しなくていい！アノテーションもしなくていい！
機械学習では通常大量にデータを用意する必要があります。
自分で集めたりタグ付けしたりするの、結構大変です。
かといってVOCやCOCO（論文などでよく使われるアノテーション付きデータセット）は大きすぎて死:rolling_eyes:。。。という時にお借りしました。
（初めてKaggleに登録したときは、データセット目当てでした）

私が初めて使ったのは”Dogs vs. Cats”。犬と猫を分ける、基本的な分類問題です。
![qiita06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487676/cdf7b465-37e4-12bc-7154-9edd19d4917f.png)
既に閉じたコンペですが、過去のコンペのデータも使えますし、後から投稿して自分のスコアを確認することもできます。


##4. 初心者レベルのお題から上級者向けのお題まで！
コンペの分類については他にまとめてくださっている方がたくさんいるので、ここではさらっとだけ。
他にも色々あるみたいですが、今確認した分類には下7分類がありました。

- Featured
- Research
- Recruitment
- Getting started
- Playground
- Masters
- Analytics

この記事は入門者向けなので、入門者がまずやるべきは

- Getting started
　画像だとDigit Recognizer(MNIST)、統計問題だとTitanic といった有名な問題があります。

- Playground
　Getting Startより一歩難しいけど、基本的な問題という感じ。
　Dog vs. Cat もここです。たまに賞金付きのコンペがあります。

このあたりでしょうか。初心者におすすめのコンペとかも色々な人がまとめてくださってます。
入門レベルから上級者向けの問題まであって、ステップアップしていけるのも良いところだと思います。

##5. 他の人のコードが見られる！
各コンペでは、自分のカーネルを投稿することできます。
コンペ参加者がこんな風にやったらこのくらいできたよ！と自分のカーネルを投稿してくれています。
これは初心者にはとてもありがたく、他人のコードを読むのはとても勉強になりますし、Forkしてコンペに参加することもできます。

### なぜ敵に塩を送るようなことができるの？
よくKaggleを知らない方から聞かれますが、この理由は Kaggle Progression System にあります。

カーネルの評価が良いと、メダルが貰えます。メダルを集めるとKaggle内の称号（？）が上がっていきます。
5つの称号がありますが、例えば最上位の Grandmaster になるにはカーネルだけで金15枚が必要です。
![qiita02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487676/33e3b25e-a5e1-0fe3-0cdf-81f233760384.png)

話が脱線しましたが、こういう理由もあり、参加者は自分のカーネルを公開したりディスカッションしたりして、みんなで切磋琢磨できる仕組みになっています。

#おわり
Kaggleを使えば、外側にあるハードル乗り越えてすぐ機械学習はじめられるよ！という話でした。
（Kaggleの回し者ではありません）

この記事を読んで少しでもはじめてみようかな、という気持ちになってくれる方がいましたら幸いです。
勉強目的と言ってますが、あわよくば賞金をいただきたいですね:laughing:
Git

この記事では、gitに関する基本的な知識をまとめています。

##Gitとは
Gitはテキストファイルなどのバージョン管理を行うためのソフトウェアです。バージョン管理とは、ファイルの変更内容や変更履歴を保持しておいて、あとから古い状態に切り戻したりできるようにするためのものです。プログラムコードの管理がしやすいため、チームで開発をする際にGitは欠かせないと言えるでしょう。

##バージョン管理システムの違い
バージョン管理システム自体は他にもいろいろあります。SubversionがGit以外では有名ですが、SubversionとGitは、管理の方法がだいぶ違います。ここでは管理方法について詳しく説明していきます。

**Git**
<img width="481" alt="スクリーンショット 2019-12-16 16.07.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499907/05191b79-4779-1c29-56c8-270b884c464b.png">

Gitにはサーバーだけでなくローカルにもリポジトリ（ローカルリポジトリ）があるのが特徴です。サーバーのリポジトリに直接コミット（登録&保存）は行いません。ローカルリポジトリにコミットを行って、そのローカルリポジトリからサーバーのリポジトリ（＝リモートリポジトリ）にコミットの内容を別途送り込みます。

**Subversion**
<img width="477" alt="スクリーンショット 2019-12-16 16.07.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499907/4421e1dc-7abe-7c0c-5790-5249d37ff7dd.png">

Gitとは異なり、ローカルリポジトリが存在せず、直接リモートリポジトリにコミットします。Gitのようにローカルリポジトリの容量を気にしなくて良いという性質上、バイナリファイル（テキストファイル以外）を管理するのに適していると言えるでしょう。

##ローカルリポジトリへのコミット
先ほどGitでのローカルリポジトリに対するコミットについて触れましたが、コミットする際に段階があることを理解しなければなりません。
段階とは以下のようなものです↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499907/55a04c01-1411-b5db-62e4-a1af0125d6d1.png)

ステージングはファイルからコミットに含めたい変更を選別する作業といえます。この一段階があることによってローカルリポジトリには必要なファイルだけが存在することになり、とても整理しやすくなるのです。

##ブランチ
Gitを語る上で欠かせないのがこのブランチです。具体的に説明すると、1つのプロジェクトから分岐させることにより、プロジェクト本体に影響を与えずに開発を行える機能のことを言います。この機能によって複数人が同時に共同開発をすることを可能にしています。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499907/408ea5ef-b406-6108-44d1-f80707b55d99.png)

**結合ブランチ（マスターブランチ）**
統合ブランチとは、リリース版が何時でも作成可能なようしておくためのブランチです。つまり、安定した状態を保っておく必要があり、基本的に直接変更を加えるがないブランチです。

**トピックブランチ**
変更を加える際に作成するブランチです。追加機能やバグ修正といったある課題に関する作業はこのブランチで行います。トピックブランチで内容をどれだけ変更してもマージ（＝ブランチの更新取り込み）するまで結合ブランチに影響はありません。


##コンフリクト
マージする際に同じ場所を同時に更新してしまった場合、コンフリクトという問題が発生します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499907/d6412f26-7ec9-dee7-dfc6-9f4c94a97980.png)

同じ場所を同時に更新してしまうと…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499907/d7b62ed6-1125-37fc-4098-a07328c117a1.png)

コンフリクトが発生！

**コンフリクトはコマンド操作によって内容を修正したり、片方を優先することによって解消することができます。**

##おわりに
Gitの基礎的な知識まとめは以上です。後々詳しくコマンドなどについてまとめられたらいいなと考えています。
ECRチートシート

# 基本コマンド
```
# Retrieve the login command & log in Docker with that command
$(aws ecr get-login — no-include-email — region ap-northeast-1)
# attach tag to local docker image
docker tag LocalDockerImage TagName
# push the image (specify image by tag)
docker push TagName
```
# Docker Imageのtagに関する理解(要確認)
１つのDocker Imageには複数のタグを付けられる。
`TagName = (RepositryName)/(ImageName):(Version)`
このRepositoryNameはpush先のECRのrepo名と同じにする必要がある。
`ECRのrepo名 = 111122223333.dkr.ecr.ap-northeast-1.amazonaws.com とか`
つまり複数のレポに同一imageをpushするにはそのimageにレポの数だけの異なるタグを付けてやる必要がある。
AWSのSavings Plansを適用したら具体的にいくらになるか

# 概要
2019/11/7に、AWSからSavings Plansという新しいAWS利用料節約のための価格モデルが登場したらしい。
具体的にいくらになるのかがわかりにくかったので、適用例を作ってみました。

# 選ぶ際の判断基準
★TODO★
## Savings Plan タイプ
### 選択肢
- Compute Savings Plans
    - Fargateに適用したい場合
    - リージョンやインスタンスファミリーを期間内に切り替える可能性が高い場合
- EC2 Instance Savings Plans
    - 対象のリージョン・インスタンスファミリーを期間内の使用量の予測が立つ場合

★TODO★

# 適用例
### 稼働状況
Tokyoリージョンでt2.mediumのインスタンスを常時2台稼働している
（365日×24h×2台＝17,520h）
元々の支払額（オンデマンド支払い）：`$1065.216`

### 参考情報（Savings Plansのレート）
- 前提条件
    - インスタンス：`t2.medium`
    - Savings Plan タイプ：`EC2 Instance Savings Plans`
    - リージョン：`Tokyo`
    - 期間：`1年`
- オンデマンドレート：`$0.0608/h`
- Savings Planレート（全額前払い）：`$0.0384/h`（割引率37%）
- Savings Planレート（一部前払い）：`$0.0391/h`（割引率36%）
- Savings Planレート（前払いなし）：`$0.0411/h`（割引率32%）

### 適用条件
- Savings Plan タイプ：`EC2 Instance Savings Plans` 
- 期間：`1年`
- リージョン：`Tokyo`
- インスタンスファミリー：`t2`
- 時間単位のコミットメント：`$0.0384`
- 支払いオプション：前払いなし
- 前払いコスト（1年間のコミットメント合計）：`$336.384`（`$0.0384×24h×365日`）

### 最終的な支払い
t2.medium1台分をSavings Plansに適用したので、残りの1台分をオンデマンド支払い。
つまり、
`$336.384 + $0.0608/h × 24h × 365日` = **$868.992**（割引率18.42%）

# 総括
現状の単位時間あたりのオンデマンド使用量は推奨プランページに記載されているのですぐ確認できるが、
推奨の内容は現状の使用量を継続した場合のプラン。

もし適応の1年ないし3年の間に大きくシステム構成の変更を予定しているならば、
自前で計算する必要がある。

「時間単位のコミットメント」を計算する時には、予定しているServiingPlanが時間単位いくらになるのかや単位時間に稼働しているサーバの台数やインスタンスプランをしっかり調べた上で計算する。
（オンデマンドレートを入れるのかServiingPlanレートを入れるのかが結構混乱した）

---
# 参考
- [AWSの新価格モデル「Savings Plans」とは？オンデマンドやリザーブドインスタンスと比較する](https://qiita.com/nasuvitz/items/1317495450e91c987cba)
- [Savings Plan のよくいただくお問い合わせについて](https://aws.amazon.com/jp/blogs/news/savings-plan-faq/)
- [新しいEC2割引モデル「Savings Plans」プラン別の損益分岐点を調べてみた](https://dev.classmethod.jp/cloud/aws/savings-plans-break-even-point/)
- [Amazon EC2 料金表](https://aws.amazon.com/jp/ec2/pricing/on-demand/)
- [Pricing with Savings Plans](https://aws.amazon.com/jp/savingsplans/pricing/)
リーダブルなコードを書こう（変数編）

　　
「リーダブルコード」という本書を読んだのでちょっとメモ

## 良いコードとはなにか

### 読んだだけでどう動いてるのかが分かるコード

ここで重視されるのはコメントや変数、メソッド名である。  

あなたが作成したメソッドにもしコメントがない場合、
他の人がそのメソッドを理解するには記述されたコードを読んでようやく理解することができる。  
コメントはなるべく明確にわかりやすく書こう。  

変数名も同じである。  
例えば、終礼のチャイムが鳴ったらあなたはオフィスを出るとしよう。

``` C#
var is_time_going_home_ = true

if (is_time_going_home_ === true)
{
    leaveTheOffice()
}
```

上記のように _is_time_going_home_ と変数名が書かれていた場合、英語のようにすらすら読むことができるだろう。  
この変数名の指定でプログラムを始めたての頃にやりがちなのがある。  
フラグ変数なのでただ単に _f_ と記述してしまうのだ。

```C#
var f = true

if (f === true)
{
    leaveTheOffice()
}
```

みんなも上記のコードのように書いたことがあるのではないだろうか。（ワタシハアル）  
どうだろう、_f_ はなんのための変数なのか書いた人の意図を汲み取れるだろうか。  
汲み取れたらあなたはエスパーか何かだろう。  

### 手が加えられる状態であること

チーム開発では、コードは改修されることを前提として書いていくのが重要である。  
コードの質は事業の継続性に繋がると思えという人もいる。  
その事業の継続、プロダクトの成長を持続させるには、  
**できるだけ小さく軽量なコード**を書いていく必要があると言われている。  

## 変数編

``` C#
public getData(){

}
```

上記のような変数名を私は書いたことがある。  

> 「get」はあまり明確な単語ではない。「get」という単語からは何も伝わってこない。  
このメソッドはページから？ローカルキャッシュから？データベースから？インターネットから？どこからDataを取ってくるのかがわからない。  
インターネットならば、FetchData()、DownloadData()のほうが明確である。  

「リーダブルコード」より引用  

明確な名前はコードを読む人へのメッセージにもなる。  

本書の例として、単語の代替案の例が挙げられている。  

|単語|代替案|  
|---|----|
|send|deliver, dispatch announce, distribute, route|
|find|search, extract, ocate, recover|
|start|launch, create, begin, open|
|make|create, set up, build, generate, compose, add, new|
「リーダブルコード」より引用

英語のニュアンスに強くなる必要があるのかもしれない。

### 省略形の名前

ソースコードに一般的な省略形は用いても大丈夫である。  
例：CSS (Cascading Style Sheets)

しかし、プロジェクト独自の省略形はやめよう。  
新しいメンバーがプロジェクトに加わったときその省略形が分からなかったら意味がない。  
→ 辞書作ればいいと思うのん。いい考えだと思うがそれは避けるべき状況である。そもそも省略形を多用するべきではない。  

独自の省略形は多用せず最小限にとどめておこう。  

### 変数のScopeを減らそう

> 変数のことが見えるコード行数を減らす。

「リーダブルコード」より引用  

これはどういうことか。  

``` C#
public Class1 {
    string str_CompanyName

    public void Method1(){
        str_CompanyName = "";
        Method2();
    }
    public void Method2(){
        str_CompanyName = "Method2で使用した";
    }

    public void Method3() {
        // str_CompanyNameを使用していない
    }

    // Method3()のようにstr_CompanyNameを使用していないメソッドがたくさんあるクラスになっている
}
```

上記コードの _str_CompanyName_ はクラス内のどこからでもアクセスできるのがわかる。  
しかし、実際使用しているのはたった2個のメソッドだけである。  
変数 _str_CompanyName_ のスコープはとても大きいということになる。  
これは縮めるべきである。ということで下記コードのように改修してみる。

``` C#
public Class1 {

    public void Method1(){
        string str_CompanyName = "";
        Method2(str_CompanyName);
    }
    public void Method2(string str_CompanyName){
        str_CompanyName = "Method2で使用した";
    }

    public void Method3() {
        // str_CompanyNameが見えない
    }

    // その他のメソッドも同様にstr_CompanyNameが見えない
}
```

Method1にローカル変数として定義し、Method2には引数として渡す形になっている。  
これにより、変数のスコープを小さくできていることがわかる。

## まとめ

- 明確なコメントを書こう。
- 変数名、メソッド名は他の人が読んでもわかるようなものを選ぼう。
- 変数を用いるスコープに応じて、長さを調節しよう。

## 参考図書

- リーダブルコード――より良いコードを書くためのシンプルで実践的なテクニック  
    URL：https://www.oreilly.co.jp/books/9784873115658/
puma のコードネームが面白い

みんな使ってるRubyのWebサーバー[puma](https://github.com/puma/puma)ですが、[マイナーバージョンごとに振られるコードネーム](https://github.com/puma/puma/releases)が面白いので抽出してみた。

コードネームは[定数ファイル(`lib/puma/const.rb`)](https://github.com/puma/puma/blob/master/lib/puma/const.rb)に書かれてるっぽいのでバージョンごとにそのファイルを調べてみる。


```sh:shell
git tag --list |
  ggrep -E "v\d.+\.0" |
  sort --version-sort|
  xargs -I ver sh -c "git --no-pager show ver:lib/puma/const.rb"|
  ggrep -E '^\s+(CODE_NAME|PUMA_VERSION)\s+=.+'|
  ggrep -oP '(?<=").+(?=")'
```

このシェルスクリプトはmacOSでしか動かしてなく、また grep は GNU のやつ使っている(`brew instrall grep`でインストールできるggrep)。やってることは: 

- git タグの出力
- メジャー、マイナーバージョンアップのみを抽出 (`v2.2.0`とか)
- バージョンごとにソート
- それぞれのバージョンの `lib/puma/const.rb` を出力
- `CODE_NAME = ...` と `PUMA_VERSION = ...` を抽出
- コードネームとバージョンのみを出力

```plaintext:結果
1.0.0
1.1.0
1.2.0
1.3.0
1.4.0
1.5.0
2.0.0
2.0.0.b2
2.0.0.b3
2.0.0.b4
2.0.0.b5
2.0.0.b6
2.0.0.b7
2.1.0
2.2.0
2.3.0
Delicious Thin Mints
2.4.0
Crunchy Munchy Lunchy
2.5.0
Astronaut Shoelaces
2.6.0
Pantsuit Party
2.7.0
Earl of Sandwich Partition
2.8.0
Sir Edmund Percival Hillary
2.9.0
Team High Five
2.10.0
Robots on Comets
2.11.0
Intrepid Squirrel
2.12.0
Plutonian Photo Shoot
2.13.0
A Midsummer Code's Dream
2.14.0
Fuchsia Friday
2.15.0
Autumn Arbor Airbrush
2.16.0
Midwinter Nights Trance
3.0.0
Plethora of Penguin Pinatas
3.0.0.rc1
Schneems Sleak Shoes
3.1.0
El Niño Winter Wonderland
3.2.0
Spring Is A Heliocentric Viewpoint
3.3.0
Jovial Platypus
3.4.0
Owl Bowl Brawl
3.5.0
Amateur Raccoon Rocketry
3.6.0
Sleepy Sunday Serenity
3.7.0
Snowy Sagebrush
3.8.0
Sassy Salamander
3.9.0
Private Caller
3.10.0
Russell's Teapot
3.11.0
Love Song
3.12.0
Llamas in Pajamas
4.0.0
4 Fast 4 Furious
4.1.0
Fourth and One
4.2.0
Distant Airhorns
4.3.0
Mysterious Traveller
```

なんか元ネタあるのかな？[最新のやつは Weather Report のアルバム名っぽいけど](https://github.com/puma/puma/releases/tag/v4.3.0)

追記:
こちらの記事で同じことやってた。 https://qiita.com/rnitta/items/8caff31e5f9b054b9287
M5StickCでSDカードに書き込む

#はじめに
M5StickCにはマイクロSDスロットがありません。
スロットがあるM5StackかM5StickVを使った方が簡単ですが、
M5StickCでマイクロSDカードの読み書きをやってみました。

#M5StickCにマイクロSDを接続する
SDカードはSPI接続でアクセスできるのでM5StickCのGPIOピンをSDカードに接続できるようにします。
マイクロSD変換アダプターを改造するとかでも作れると思いますが、
秋月のDIP化キットが￥300とかなので、そういうのを使った方が簡単です。

基本はこちらのサイトのを参考にしています。
https://lang-ship.com/blog/?p=721

SDカードの2～7のPINがSPIモードでの通信に使われるので、
それらをM5StickCのピンに割り当てればSDカードの読み書きができます。
HATポートにくわえ、Groveポートのピンまで使えば全て割り振ることもできますが、
GroveポートはI2CかUARTとして使いたいところですので、
SDの２番がCSで、常にこれを選択する状態にして構わないので10kΩとかの適当な抵抗でGNDにつなげます。
（ジャンパーでGND直結でもよいと思います）

SPIはMISOとMISO、MOSIとMOSIみたいな感じで
同じ名前のを接続すればいいので、普通は簡単なんですが、
SDカードのピンアサインを見るとCMDとかDAT0とかで
SPIの名称と異なるので、こちらのサイトを見ながらやってみました。
http://maicommon.ciao.jp/ss/Arduino_g/SDcard/index.htm

SDカードの２番（CD）をCS（実際はGND）
SDカードの３番（CMD）をMOSI
SDカードの４番のVDDは3V3
SDカードの５番のCLKはCLK
SDカードの６番のVSSはGND
SDカードの７番（DAT0）をMISO
と接続すればよいです。

#SDカードの読み書きの方法
ArduinoライブラリのSD.hをincludeするだけです。
ただし、CSは接続してないので、-1を指定します。

```C++
#include "SD.h"
SPI.begin(0, 36, 26, -1);
```

以上の様に初期化すれば、M5Stack等と同様の方法でSDカードの読み書きができます。
Docker でビルドをリセットしたい。

# Docker上でビルドしたコンテナを削除したいときに使えるコマンド（３連チャン）

一度ビルドしたら、再度実行してもsuccessとかすぐ出て編集した内容が反映されているかわからないので、リセットできそうな方法を記載します。


```qiita:stop(まずはコンテナを停止)
$ docker stop $(docker ps -q) 
```


```qiita:remove(コンテナ削除)
$ docker rm $(docker ps -aq) 
```


```qiita:remove_image(イメージ削除）
$ docker rmi $(docker images -q)
```
この順番で実行すれば、何度でもビルドしなおすことができます。


しかし、３行のコマンドを分けて打つのも面倒なので、横着な方法で連結して実行しています。
一応、データは消えてくれますが、この方法がいいかどうかは分からず実行しています；

```qiita:１行コマンドにまとめる
$ docker stop $(docker ps -q) | docker rm $(docker ps -aq) | docker rmi $(docker images -q)
```


Docker学びはじめて、いろいろやってみてはいますが良くわかりません。

最終的なDockerfileの理想像としては、
ターミナルで手入力で実行するコマンドは極力無くして
"docker-compose build", "docker-compose up -d"くらいで
開発環境をコピーできるようにしたいと思っています。


そのためにDockerfileをしっかり書けるようになりたいんですが、
ネットで見つかる記事のほとんどが、
途中途中でターミナル使う方法を記事にまとめてくれているため、
自分のしたいことと少し違って、モヤモヤしています。

「コマンドを途中で何回も手入力したら、Dockerの威力発揮しきれてないやん（；；）」


「DockerはDockerfileを読み込むだけで、自動的に同じ開発環境を構築できるんじゃないのかー！？
なぜ、途中でターミナルへコマンドを入力するんだー！」と心の中で叫んでいます。

今は、[DockerでLaravelを起動する](https://qiita.com/t_wkm2/items/9b2011af9569627fee40)
ここを参考にトライしていますが、
過去のビルドのデータが残っていると邪魔くさい感じで
コンテナ削除のページへ行きついたのでメモ代わりに記事にしました。

Dockerfileが正しく書けているのか、どうなのか分からず
命令がただしく記述できているかを確認したいので、
ビルドで生成されたファイルやフォルダを
全てビルド前の状態に戻せたらわかりやすいのになぁと思っています。


そういう方法を知っている方がいらっしゃったらぜひ教えてください。
その方法がないなら、gitで毎回リセットするしかないのかなー？なんて考えています。


みなさん、どうやってDockerfileが正しく書けているのか確認しているんだろう？と思います。
それに関しても参考になるサイトとかありましたら、ぜひともシェアしていただけると助かります！！


参考ページ
[Dockerの不要なコンテナ・イメージを一括削除する方法](https://suin.io/537)
HTML・CSS復習編　clearfixについて

# はじめに
現在自分は**HTML・CSSモダンコーディング**という技術書を使ってHTML・CSSの復習をしております。
この記事はその復習のアウトプットです。

# clearfixとは
clearfixというのは、floatプロパティを使用した場合、親要素に高さが反映されずに潰れてしまう現象を改善するための技術です。

clearfixクラスを親要素に追加してあげることで、親要素ないの最後にclearプロパティが適応してあるdiv要素が追加されます。それによりfloatの効果が打ち消されて親要素が潰れる現象を防ぎます。

実際にclearfixクラスを記述してみると....

```css
.clearfix::after {
  display: block;
  clear: both;
}

<div class='main clearfix'></div>
```
擬似クラスafterを使うことで、このクラスを追加した要素ないの最後にdiv要素を追加します。
アンドロイドは電気羊の夢をみるか

アンドロイドっていってもOSじゃないよ。
（タイトルでわかる人にはわかると思いますが）

今回はアイデアの出し方と、そのトレーニング方法です。
これは僕が昔から実践している古典的なトレーニング方法。
古典的だけど効果的。
僕なりにどうすればいいのかを必死に考えて編み出した方法なんだけど、
どうやら一流と言われている方もお薦めしているようで、
「なんだよ...」って思ったけど、
以外とポピュラーなんだな、ということ最近知りました。

デザインを上達したい。
企画書の書き方を上達させたい。
いいアイデアをだしたい。
いいコピーを書きたい。
などなど、煩悩はつきませんが、
それをどうやって練習していけば良いのでしょうか。
ってことですね。

その前にアイデアの神は、どうやって降臨するのでしょうか。
じっとパソコンの前で腕組みしていても、神は降りてこないですよね。
ジェームスヤングの「アイデアのつくり方」という本にはこう書かれています。
1.情報を収集する
2.情報を咀嚼して、断片的な思いつきを広げる
3.いっかい問題を頭の外に放り投げる
4.ここで真のアイデアがうまれる
5.生まれたアイデアを現実に適合させる

この4の段階で神が降りてくる、ということなのですが、
レベルは違うとしても、みんな同じ経験してるんちゃう？

でも、この4にいくまでが大事なんですね。
情報がインプットされていないと神は降りてこないよってことです。
じゃあ、資料収集、情報収集に時間かければいいんじゃね？
って思いがちですが、時間のない案件などではアイデアだしまでに余裕ないのが
世の常。どうすればいいんですか！？

はい、そこでこのトレーニングです。
日々こういう泥臭いトレーニングをしておくことで、神が降りてくる確率がぐっと高まります。
トレーニング方法は簡単です。器具などは必要ありません。

「日常の暮らしの中で、考える癖をつける」こと。
一番簡単なのは、電車にのったときに目につく広告。
これをみて、自分ならどうする、と考える「癖」をつけることです。

初級：広告を見て、自分は好きか、嫌いかを判断する。
＜自分の中での好き嫌いを自覚することができます＞
中級：広告の裏テーマを想像する。
＜この広告の真の狙いはなんだ？と考える＞
上級：自分ならそのテーマに対して、こういう広告にする。ということを考える。
＜なぜなら...を必ずつけて、どうプレゼンするかも考える＞
超級：どんなプレゼンだったのかを想像する。
＜凄い広告だった場合、どうやってクライアントや上司を説得したのかを考える＞

はい、たったこれだけです。
ものすごく地味で、すぐに効果はでないけど、
これを無意識にできるようになると、人の話をただ聞くだけ、にならず
考える癖がつきます。
そして、これをやっていると、情報収集も必然的に必要になるので、
神を以前よりも早めに降臨させることが、できる。かもしれません。
（だせーとか、かっちょいーの判断が自分の好き嫌いだけではなく、世の中こうじゃん！と
論理的になります）

ぜひお試しを。
アンドロイドはなにもインプットされなければ、夢はみないです。きっと。
ヒストグラムの返り値について。

こんにちは。
今回はmatplotlibモジュールの中にあるhistメソッドを見ていきたい。
僕にとって意外だったののはこの関数は3つの返り値を返す事。
それではまずサンプルコードから見ていきましょう！

# サンプルコード
``` python:hist_sample.py
import matplotlib.pyplot as plt
import numpy as np

np.random.seed(123)
mu = 10  #  平均値
sigma = 15 # 標準偏差
# 平均値１０、標準偏差15の正規分布に従う乱数を1000個作成。
x = np.random.normal(mu, sigma, 1000) 

# 描画オブジェクト（fig)とサブプロット(ax)を作成。
fig, ax = plt.subplots()

# ここで、ヒストグラムを描写！そして3つの返り値が存在。
n, bins, patches = ax.hist(x)

plt.show()
```

結果：
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255565/7a1c4017-110f-e01f-45b6-b79d87989077.png)

**なんと美しい。**

# 返り値の説明
返り値は : *n, bins, patches*の三つ。
一つずつ見ていこう。

- n （配列）
    - 縦軸の個数を表す。
    - 全ての要素を足すと、上記のコードでは1000になる。

- bins (配列）
    - 横軸の句切となる座標
    - デフォルトの大きさは１０。
    - ex: [51.3, 61.3, 71.3, ・・・]

- patches
    - 描画したヒストグラムのビン毎のobjectの集合
    - つまり、それぞれのグラフの情報が入っている（色など）


# まとめ
ヒストグラムは小学校？で習うし、グラフとしても有能だ。
マスターして、素早く可視化できるようになっておいた方がいいと思う。
また、ヒストグラムをアレンジしたければ、
[Qiita: Matplotlibでヒストグラムを描画する方法](https://qiita.com/supersaiakujin/items/be4a78809e7278c065e6)がとても参考になりました。
大学祭でシステムを作った話（デジタルパンフレット・公式App編）

背景・結論編の続きです。
今日はデジタルパンフレットアプリについて語ります。

## 何を作ったのか
大学祭で、行われている企画の一覧や詳細を確認できるほか、構内のマップを表示できるようにするアプリです。

## なぜ作ったのか
INIADでは、学部の方針として、MOOCsの活用や、デジタルサイネージ・Gmailの活用で、なるべく紙を使わずして情報をやり取りできるようにしています。
とはいえ、来場者にそれを強いることはできないので、紙のパンフレットを製作・配布していましたが、何となく情報系学部なのにその辺解決できないかな・・・そうだ！スマホアプリにしよう！となった次第です。（なお、やっぱり全員アプリというのは難しいので紙のパンフレットは製作しました）

## 使用したツールなど
今回は、iOS向けに開発しました。（Android版は、自分が書けなかったので、大学の友人にお願いしていましたが、時間がなかったのが災いして間に合いませんでした・・・来年は自分がちゃんと書けるようになりたいな・・・）
Swiftによるネイティブアプリです。
アプリのバックエンドは、RailsでWeb APIを構築しています。

## 来場者受付システム機能
昨日の記事で書いた、来場者受付システムのクライアント機能です。
標準では、アンケート画面が出て、このまま設問に答えると、来場受付用のQRコードが表示されます。
<img width="375" alt="IMG_0714.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/55ec4365-4638-c899-63de-759794f66a7f.png">
<img width="375" alt="IMG_0717.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/f884850f-1322-c42d-7c72-7d6662a415c4.png">

実行委員や、サークルの受付担当などは、「INIAD-FES関係者はこちらからログイン」をタップすることで、INIADのG Suiteアカウントで認証を試行します。

<img width="375" alt="IMG_0715.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/513b25ff-5353-84e2-c4f5-7d26ce46014e.png">
<img width="375" alt="IMG_0716.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/2d111b1e-65c1-f03e-3f26-e4f042c727d0.png">
権限が付与されている場合は、使用している認証情報に読み取りの権限を追加してアプリに戻る形式になっています。
この画面が表示されるたびに、付与されている権限をチェックして、それに応じて画面を切り替えるようになっています。


## 企画情報表示機能
<img width="375" alt="IMG_0710.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/3c6b67b7-f302-b7e8-1777-f88165dcfeaf.png">

企画の一覧画面です。
上にはマップを表示しています。（若干視認性に欠けるので、虫眼鏡アイコンをタップすると拡大表示できるようになっています）
左右の矢印みたいなボタンをタップするか、画面をスワイプさせることで、フロアを切り替えることができます。

<img width="375" alt="IMG_0711.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/50f5c5e0-919c-a593-871b-ce0dc1acd12f.png">
企画名をタップすると、詳細をフルスクリーンで表示することができます。（なので、一覧画面で表示できる詳細情報は一部のみにしています）

バックエンドのAPIは、企画管理システムの一部になっていて、Webの管理画面から情報を随時変更することができます。
画像も、APIからURLを配信する形にしていて、アプリ側では企画の固有情報を持たないようにしています。

## プッシュ通知機能
![IMG_0462.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/2cd3f96c-16f7-ed06-ff24-ca991bd814f1.jpeg)

INIADホールという、400人強を収容できるホールで、ダンスサークルなどが演技をするなど、時間を決めて行われるイベントの告知や、大学祭自体の開始終了などの情報を直接ユーザーに届けられるように、プッシュ通知の機能を搭載しています。
プッシュ通知の配信サーバーは、メルカリが作っているOSSのプッシュ配信サーバー、Gaurun (https://github.com/mercari/gaurun) を使用しています

<img width="375" alt="IMG_0713.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/a2a54f7b-37db-b8f2-013b-83cc22ba7cc6.png">
配信したプッシュ通知の履歴は、「お知らせ」画面から再確認できます。

## トラブルなど
iOS13から「SF Symbols」というものが利用可能になりました。
これは、Appleが作ったアイコンを、開発者がアプリ内で利用できるようになったというもので、自分で作る手間が省けていいのですが、iOS13は公開されたばかりなので、それ以下のバージョンへの対応に苦慮しました。

あと、アプリの公開が大学祭本番の4日前なので、周知が十分にできず、来場者のアプリ利用はかなり少なかったようです・・・

## 今後の展望など
まずアプリを周知できればいいなという感じです。
後は、たまたま中の人と知り合いになった筑波大学の[雙峰祭](https://www.sohosai.com)では、PWA対応＋GPS測位で現在地を把握していて、ユーザー的にはかなり敷居の低そうな感じでシステム運用していたので、jsのフレームワークもやってみようかなとか思ってもいます・・・
[ Android ] esspressoでのテストコードサンプル

前回、AndroidTestで必要となるesspressoとサンプルコードをついて紹介した。
今回はより具体的なコードを紹介する。


##Spinnerの選択
UIテストでSpinnerをクリックするコードは以下のとおりである。

~~~java
//spinnerの選択肢で"hoge"と表示されている選択肢をクリックする
onData(allOf(is(instanceOf(String.class)), is("hoge"))).perform(click());
~~~


https://qiita.com/teracy/items/ebbe92e2384657800856


##Buttonの有効性を確かめる
例えばボタンが有効状態かどうか確かめるには以下のコードを書く

~~~java
//リソースIDがR.id.buttonが有効かどうか検証
onView(withId(R.id.button)).check(matches(isEnabled()));
~~~

https://stackoverflow.com/questions/32880107/android-checking-a-button-is-enabled


##BACKキーを押す
クリックにはclick()があったが、BACKキーにもメソッドがある。

~~~java
Espresso.pressBack();
~~~

https://stackoverflow.com/questions/42861182/espresso-pressback-does-not-call-onbackpressed

##スクロールする
スクロールしてから、クリックなどしたい場合は以下のように書く。

~~~java
//R.id.NEXT_ACTIVITYの位置までスクロールし、クリックする
onView(withId(R.id.NEXT_ACTIVITY)).perform(scrollTo(), click());
~~~

##Activityの生成を確かめる
確認にはActivityMonitorを使う
ActivityMonitorを作成し、Instrumentation.addMonitor()で登録。
これより後に起動したActivityのインスタンスを取得できる。。

~~~java
        Instrumentation.ActivityMonitor monitor = new Instrumentation.ActivityMonitor(SessionDetailActivity.class.getCanonicalName(), null, false);
        InstrumentationRegistry.getInstrumentation().addMonitor(monitor);
~~~

登録後の起動確認コードは以下のとおりである。

~~~java
            Activity nextActivity = monitor.waitForActivityWithTimeout(5000);
            assertThat(nextActivity, Matchers.is(Matchers.notNullValue()));
            nextActivity.finish();
~~~

https://qiita.com/cattaka/items/83f7a82ce80f352ef7c9
clonerが楽しいという話

#はじめに

この記事は「Notch #madewithnotch Advent Calendar 2019」20日目の記事です。

clonerは楽しい。

clonerについてはadvent calenderの4日目のこちらの記事が参考になります。
https://qiita.com/Shuhei_Maeta/items/12c8cfa52ea5458c7cd5
clonerは最高。
めちゃくちゃわかる。
めちゃめちゃうなずきながら読んでいました。
C4dに馴染みがなくても楽しいです。

というわけで今回は、clonerの話をします。
clonerでこんなんできるよ！という1つの例です。
他のソフトウェアだとこの辺のことをする難易度ってどうなんでしょうか。

では、時計盤を作ってみようと思います。

#時計盤
ひたすらshape3Dをクローンしてクローンしてクローンしていきます。


#####最初の設定
他の方が初期設定をどうされてるのか気になりますが、
私は基本的に、最初にcameraノードを入れるようにしてます。
そのままだと、中心に置かれていて、オブジェクトなどを配置したときに、
位置が被って見えないので、Position Zを-10にしてます。
これだと、カメラから見たときX横方向・Y縦方向で動くのでわかりやすいな～と個人的に思います。
ただ、planeを置いたりすると、必ずRotation Pitchを-90とかにしないと見えないのが、
若干手間ではあります…。

#####クローンします
カメラが配置できたらclonerとshape3Dを用意します。
clonerはRootに。shape3Dはclonerにつないでください。

shape3Dのタイプは今回はplaneを使います。
PlaneのRotation Pitchを-90にします。
それからscaleX,Zもいじってお好みのサイズにしてください。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528711/db94e368-d74b-d895-d793-b6ee6bdeef8c.png)

では、clonerの設定をいじります。
まずModeはRadialに。
Num clonesは時計ということで12個に。
サイズが小さいので、Radiusを2.5にしました。
これだけで時計感ありますね。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528711/5ea38630-184a-285e-16e9-0296a7093ed1.png)

#####細かくしてみる
針足して完成でもいいですが、ちょっと細かくしてみます。
新たにclonerとshape3Dを追加します。
新規でもいいですが、clonerとshape3Dを両方選んでctrl+Dで複製してしまいます。
このままだと重なっていて見えないので、先に数を増やします。
複製したclonerのNum clonesを60にします。
複製したshape3DのscaleX,Yを最初に作ったものより細く小さくします。
外側の円周に沿うようにしたいのでradiusを調整します。

さらに細かくしてみます。
もう1セットclonerとshape3Dを増やします。
clonerのNumClonesを300にして同じことを繰り返します。
これだけで割といい感じになった気がします。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528711/a5e01115-a330-b8a6-7201-a200e988949a.png)


#####円弧をぐるぐる回す
何か動いている要素がほしいので足してみます。
円弧をくるくる回してみようと思います。

新たにclonerとshape3Dを追加します。
shape3DのShape Typeは今度はRingにします。
Rotation Pitchは-90にします。
Inner Radiusを0.9くらいにします。これで円が細くなったと思います。
時計盤の外側に配置しようと思うので、
Scaleをすべて大きくします。
shape3Dを選択した状態で、キーボードのYを押してViewPortを適当にドラッグするとまとめて値を動かせます。
大きくするとカクツキが気になるので、subdivisionXを60とかにします。
この円を円弧にしていきます。
End Angleの値を今回は60にします。
これで円弧ができあがります。

clonerの設定に移ります。
ModeはRadialにして、Num Clonesは3とか。
なんだか、円周に沿ってない感じがします。
Radiusを0にします。
これで、円に沿ったような形になったかと思います。

Continuous Modifierというのを追加します。
このノードの右端からみょーんと引っ張ってclonerのRotationBankにつなげてください。
これで円弧がくるくる回ります。
スピードが遅すぎるので、Continuous ModifierのSpeedを10とかお好みで変えてください。
時計回りになって欲しいので、Modifier Operationをaddからsubtractにしてみました。
![screenshot_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528711/f91a8659-bb0a-e181-7661-6d19846efa34.png)


#####あとは煮るなり焼くなり
あとはお好みで秒針を作ったり、
Clock Time Modifierあたりを追加して動きを出してみたりしてください。

これだけで何かしら形になるの楽しくないですか。
私は楽しいです。
clonerにMathModifierなど使うと動きが出てそれだけで楽しいです。

もうちょっと手を加えてこんな感じになりました。
![clock.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528711/8b6411bc-0a70-0f6c-5de6-e318b8d008a6.png)

#おわりに
ここまでお読みいただきありがとうございます。
はじめたての人がたどり着いて、何か参考になればなーと思って書きました。

clonerの話ということで、他に付け加えたものについての詳細は省きますが、
ファイルを置いておくので、中身が気になった方はご覧ください。
https://www.dropbox.com/sh/v3npi9j0fnnfo1w/AAAfrehde9itlIp2MN4y0waAa?dl=0
質問などあれば、分かる範囲でお答えします。
bitbucketでコンプラ可能性のあるdotfileをprivateに管理できる

# GitHub使ってますか

便利ですよね。でもフルオープンじゃないとタダじゃねえ。

# Bitbucket知ってますか

[なんと無料で1GBもprivate repositoryを持つことができる](https://bitbucket.org/)んだぜ。

# これで社外秘可能性のある情報も[rcm](https://github.com/thoughtbot/rcm)して脳死pushできるぜ

それはどうかな？(credentialとかはさすがにまずいので脳死せずちゃんと分けましょう)

# やったぜ。

久々にdotfilesをcommitしたなあという日記だぜ。
スケジュールとタスクを1画面で管理したい


![](https://i.imgur.com/ORzENZV.jpg)

現在私自身が所属するチームでは、
**上記の画像のように、Trelloを用いてスケジュールとタスクを管理しています。**

※全部無料プランの範囲内です。
※画像内のスケジュール・タスクの内容はダミーです。本物の内容ではありません。
※ダミーで作ったので参加者fuwamakiだけになってますが、本当はもっといます。

スケジュールとタスクを1画面で管理できて、めっちゃ便利です。

この記事では上記の、現在自分が所属しているチームで行っている
スケジュール・タスクの管理法をご紹介します。

## ターゲット

以下のような方に、この記事が参考になればと思います。

- スケジュールとタスクを管理する必要があるチームのメンバー、関係者
- スケジュールとタスクの管理方法に課題感を感じたことがある
- できる限りシンプルにスケジュールとタスクを管理したい
- 使うツールはそんなに増やしたくない
- 少人数のチーム

補足:

大人数チーム（10以上とか）の場合、この方法ではさすがに管理しきれないかもしれません。

## 背景

現在私が所属するチームでは、文頭で述べた、
Trelloを用いたスケジュールとタスクの管理を試験的に導入中です。

実際に使って微妙に感じたり、メンバーに浸透しなかったりしたら、
方法を改めようと思い始めましたが、割と今のところ良い感じです。笑

そもそも、私の所属するアプリチームでは今まで、タスクはバックログで管理し、
スケジュールはスプリントごとによしなに形式で、特に管理していませんでした。

そうなると、以下のような課題が出てきました。

- メンバーが今後何をする予定なのか、可視化されていない
- 不規則でリリースが起きた場合のスケジュールが管理しにくい
- ほかチームから、チームが今何をしているのか、今後なにをする予定なのか分からない
- ほかチームから、チームがどのプロジェクトを担当しているのか分からない

とはいえ、スケジュールをタスクと別で管理するようにすると、
2重管理になる可能性があって面倒になりえる。

そこで調べたり試行錯誤したりして、このTrelloの方法を試験的に採用することにしました。

## タスク・スケジュール管理 設定方法

このタスク・スケジュール管理の設定方法について簡単に説明します。
まずTrelloに利用登録しましょう。

https://trello.com/en

<img width=240px src="https://i.imgur.com/AfMPTQQ.png">


続いて、Chrome拡張機能、Eleganttの利用を開始します。
これにより、上記のスケジュール管理を実現できます。

https://chrome.google.com/webstore/detail/elegantt-the-leading-gant/jdongfcbejkjibhkbekkjcckophhjcjj?utm_source=chrome-ntp-icon

![](https://i.imgur.com/AQbTeiA.png)

※つまり今回紹介するタスク・スケジュール管理は、Google Chrome上で行う方法になります。

## タスク・スケジュール管理 使い方

Trello自体の詳しい使い方は省略します。簡単な使い方の説明だけ。

Trelloではタスクの管理を、
EleganttではTrelloで用いられるタスクカードごとにスケジュールを設定・管理できます。

タスクカードには詳細設定ができ、スケジュール情報やタスク詳細などを記載できます。
スケジュールに載せたくないタスクは `VISIBLE` をOFFにします。

![](https://i.imgur.com/zZke4hV.png)


スケジュールとタスクを1画面で管理、と記載しましたが、
スケジュール部分は高さを変えればスケジュールだけ編集できますし、

![](https://i.imgur.com/oONrDnr.png)

また、スケジュール部分を非表示にすれば、タスクのみ編集・管理できます。

![](https://i.imgur.com/rjB42D8.jpg)

このようにして、タスク・スケジュール管理を実現しています。

また、以下は参考適度に。
画像内ではタスクカードに色の付いたラベルを設定しています。
こんな感じでラベルはカスタマイズできます。

<img width=240px src="https://i.imgur.com/K0Y8riz.png">

TODOの管理は、画像のようにリストごとに担当者のTODOを振り分けてもいいですし、
以下のようにTODO, doing, doneなどをリスト分けしても良いかもしれません。

![](https://i.imgur.com/mS34RoC.jpg)

## タスク・スケジュール管理 メリット・デメリット

このタスク・スケジュール管理について、
実際に運用してみて感じたメリット・デメリットを記載します。

### メリット

- とにかく1画面で管理できるのは楽、見やすい
- 他チームから見ても、自分たちのチームが今何しているのか伝わりやすくなった
- 今後のタスクのスケジュール調整が円滑にしやすい

また、Trelloはショートカットキーが魅力で、慣れると非常に使いやすいと思います。
（多少個人的な気持ちも入ってます。笑）

`?` を押すと、すぐショートカットキー一覧を確認できて良いです。

<img width=240px src="https://i.imgur.com/QdgcxFL.png">


### デメリット

- スケジュールに表示するタスク・表示しないタスクを、全カードそれぞれ設定しないといけないので多少面倒。
- Trelloのルール管理をそこまで徹底してやっていないので、多少メンバーごとに設定項目や入力内容にバラつきがある。

まだまだ他の拡張機能の導入を検討したり、
ルール管理したりなど改善は必要と感じています。

## まとめ

正直、ツールはなんでも良いと思います。
以下のようなことが考慮されてることが大事かなと個人的に思います。

- そのツールを使う理由があること
    - できれば社内都合とかではなく、使い勝手観点が望ましい。
- チームメンバーが納得できていること
- チームメンバーにツールの扱い方が浸透しやすいこと

とはいえ、今回紹介したタスク・スケジュール管理が、皆様の参考になれば幸いです。
DockerにnginxとRailsとVueの環境を作る

カレンダーに穴が空いていたので穴埋めに推参しました。飛び込み参加&拙い記事になりますがご容赦くださいませ。

## 想定

最近、XDが便利すぎてjQueryでフロント動かすのがしんどくなってきたので、Vue導入するために勉強をはじめました。
昨今のjavascriptはjavascriptのくせに（※認識が古い）パッケージ管理とかが必要なくらいファイルが増えて面倒なのでDockerで動かすことにしました。昔はtableチカチカさせるだけみたいな使えない子だったのにな君。

![図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62826/a4b60c6b-b624-dbf5-ea03-c3dff924e420.png)

<del>この図必要か？</del>

RailsでAPIを作り、Vueでそれを参照する想定です。
Railsなら弊社のエンジニアはだいたい書けるし、デザイナーさんもpug書けるしsass書けるし、結構楽に導入できるんと違う？という<del>甘い</del>見積もりによりこの構成にしました。

## ファイル構成

```
/project
  .docker-compose
  server
    Dockerfile
    Gemfile
    Gemfile.lock
    Rakefile
    app ほか
  client
    Dockerfile
  data
    www
```

`/project/data/www`の下にVueのファイルが入ります。Railsのポートを3000番に、Vueを80番に繋ぐ。

この間は地味な作業なので割愛します。APIとVueコンポーネントをしこしこ書いていきます。
作業中のやらかし: [Docker上のVueからDocker上のswaggerAPIを叩きたい - teratail](https://teratail.com/questions/227363)
CORSでもない？404ってなんで？！ブラウザでは開けるのに？！となってteratailに行きましたが、ソースにpostって書いてあっただけでした。getに書き直したら普通にCORSが出た。恥ずか死

## CORS発生

そりゃそうだ。ポート違うもの。
これを回避しようと調査していると、どうやらnginxを入れてプロキシサーバにしてやるといいらしい。

```yaml:docker-compose.yml
  nginx:
    build: ./nginx
    ports:
      - '9000:9000'
    volumes:
      - ./nginx/server.conf:/etc/nginx/nginx.conf
    links:
      - server
      - client
```

```nginx.conf
  server {
    listen 9000;
    server_name localhost;
    location / {
        proxy_pass  http://server:3000;
        proxy_set_header Host localhost;
        add_header Access-Control-Allow-Origin http://localhost;
        add_header Access-Control-Allow-Methods "POST, GET, PUT, PATCH, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
        add_header Access-Control-Allow-Credentials true;
    }
  }
```

ということで、VueでRailsのAPIからデータを取得して画面表示ができました！<del>やったねたえちゃん！</del>

この後、CSRFで血の泡を吹くのはまた別のお話……（※未解決）
兎にも角にもセキュリティはクリアしないと業務に導入できないので今後も頑張ります。接続先IPが固定になればそれでいいような気もしているのですが……インフラ知識は（も）無い……

Q.VueCLIを選んだのが悪いのでは？
A.erb嫌いだからjQueryついでに爆殺したかったんだよ……

## 作業中お世話になりました

[docker-composeを使ってnginx上でVueアプリケーションを動かす](https://qiita.com/akashixi/items/2ebe9404c64a8854b4e5)
[docker-composeを使ってVue.jsのプロジェクトを作成して、Dockerで動かしてみた](https://qiita.com/tubutubu_mustard/items/ed8c047540015e2d07fc)
[vue.jsでウィンドウ読み込み時に関数実行したいときの書き方](https://qiita.com/bo-san/items/85d734fd07ca3703b16b)
[docker上のnginxから、別のコンテナのwebへリバースプロキシさせる](https://qiita.com/74th/items/3545366f5f66eb70ff85)
[Nginxによるリバースプロキシの設定方法](https://qiita.com/schwarz471/items/9b44adfbec006eab60b0)
Windowsで（WSLを利用して）Node-RED環境を構築する

#概要
Windows 10上にNode-RED環境を作るのに、諸般の事情でWSL（Windows Subsystem for Linux）を利用した際の備忘録。

#環境
Windows 10 Home 1903 (x64)

#手順
###WSLの設定
1.　設定画面からアプリを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/4f32933a-d2b5-0068-d576-74206e89fe17.png)

2.　「アプリと機能」タブで、下部にある関連設定の「プログラムと機能」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/db086b5b-15b0-00c9-9a8b-a6995981729d.png)

3.　以下のようなダイアログが表示されるので、「Windowsの機能の有効化または無効化」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/aed0110f-a641-60f0-8b02-950d3f3c6f43.png)

4.　「Windows Subsystem for Linux」にチェックを入れて、OKをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/aeecbb8d-34f9-ddf3-a90d-797a25d5edcd.png)

5.　続いて、Microsoft Storeアプリを起動します。Ubuntuを検索して、クリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/aecf72fa-c87c-90c7-d3b6-fb7e6345a0d0.png)

6.　インストールをクリックしてください。インストールが完了するまで待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/d1308090-2734-6e22-516d-c12fb9e8ba14.png)


###Node.jsのインストール
スタートメニューからインストールしたUbuntuを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/37123850-0a3c-5f71-df39-2f4a8b81110f.png)

初回起動時はユーザー名とパスワードの入力が求められるので、適宜入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/f55327e9-bdaf-94fa-a003-a4565d5f43ee.png)

以下のコマンドを実行して、Node.jsとnpmをインストールします。
※環境にも寄りますが、少し時間かかります。

```
> sudo apt-get update
> sudo apt install -y nodejs npm
```


###Node-REDのインストール
続いてNode-REDのインストールを行います。
下記のコマンドを実行して下さい。

```
>　sudo npm install -g --unsafe-perm node-red
```

###Node-REDの起動
インストールが完了したら、早速起動してみます。

```
>　node-red &
```

Windows上のブラウザで、[http://127.0.0.1:1880/](http://127.0.0.1:1880/) にアクセスしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/4c301c72-68c6-5567-c5c6-b198ca4ec1a0.png)

ということで、WSLを利用して、Windowsの環境を極力汚さず（？）に、
Node-REDをインストール・起動することができました！

ただし、Bluetooth等のデバイスを利用するノードを追加すると、
正しく動作しなかったりしますので、ご注意ください。



#余談
###WSLの初期化
いろいろインストールや設定変更して、上手く動かなくなった時などに
Linux環境を初期化したい場合があります。

1.　設定画面 → アプリを選択し、「アプリと機能」タブのUbuntuの中の「詳細オプション」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/043a7ab8-6caf-e534-cffb-f18c12dca9a9.png)


2.　以下のような画面が表示されるので、「リセット」をクリックしてください。Ubuntuが初期化されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/a5d6311b-dfda-ef4d-2b1f-82a3f5a43e97.png)
Cisco Catalyst Stackやり方メモ

Stackやりかた
①ケーブルを結線する

②マスタ側を先に起動して2分後くらいにスレーブ側を起動する

③マスタ側に下記configを設定する

　switch 1 priority 15
　copy running-config startup-config
　switch 2 priority 14
　copy running-config startup-config

④保存して再起動する

できあがり
【Git】いらないローカルファイルを消去する方法

git clean がかなり便利です。
git clean -f で簡単に削除できます。

```
$ git clean -h
usage: git clean [-d] [-f] [-i] [-n] [-q] [-e <pattern>] [-x | -X] [--] <paths>...

    -q, --quiet           do not print names of files removed
    -n, --dry-run         dry run
    -f, --force           force
    -i, --interactive     interactive cleaning
    -d                    remove whole directories
    -e, --exclude <pattern>
                          add <pattern> to ignore rules
    -x                    remove ignored files, too
    -X                    remove only ignored files
```

```console:console
$ git clean -f
```
「ダブルチェック」と「クロスチェック」の違い

#ダブルとクロスの似ていて違うところ
両方とも複数回チェックを行うのは一緒です！！
要は人を増やすのか、方法を増やすのかなのだ！！

##ダブルチェック	
「自分でも確認したけど、不安だから先輩にも見てもらおうかな」のように、一度、自分が確認した対象を他の人にも確認してもらうこと
##クロスチェック	
「こっちの資料を使って確認したけど、こっちの資料を使った確認もしておこうかな」や「最後まで動くかの確認はしたから、今度は動いた結果が正しいかを確認しようかな」のように、やり方や観点を変えて確認すること

#例：クマムシの耐久性テストで例えてみた
A君がクマムシの耐久テストを行いました。
A君がクマムシに人間の致死量の1000倍以上の放射線を浴びせたが不安だったので
B君にも全く同じ方法でクマムシに放射線を浴びせる耐久テストを行わせた。
これがダブルチェック！！！

一方で、放射線を浴びせた後に他の方法でも生存チェックを行おうとして様々な方法でチェックした
・150度の高温
・電子レンジでチンしても
・宇宙空間や真空下で1週間以上の生存確認
・マイナス270度の超低温の世界
これがクロスチェック！！！

#まとめ
一人で様々な観点から複数の方法を用いてチェックするのが『クロスチェック』、二人で全く同じ項目でチェックをするのが『ダブルチェック』と覚えておくとよいでしょう
adventcalender  azureのデプロイチャレンジ【2019/12/4 分として投稿】


カメドットです。
今日は、AdventCalenderの4日目ネタになります

## どうしてazure
今までやったことがなくて、TLにazureの入門記事が流れてきたから

## 1日目

azureについて、クラウド上でデプロイされるところまで、確認いたしました。

デプロイされたインスタンス情報

<img width="944" alt="950b5348f94d8fd7a7d10e6487f69653.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/ab4eefcd-9524-b7f2-65d1-7f3ed44ac694.png">


実際にBrowseボタンをクリックすると、デプロイ完了した時の画面が表示されるようになっていました


<img width="951" alt="234688a33e7a2d76ce30024c649d6212.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/fb289449-9aea-b572-8bec-c8b15c042ea9.png">


## issue
ローカルのデプロイ用にコードを落として、設定中です

<img width="947" alt="ba0dc1df77d5aa2afab41a2217b05ea6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/d81f8ba4-7587-5510-37ea-119d089caab7.png">

## 感想
記事通りにやっていればインスタンス作成までは、azure未経験でもさっくりできちゃいました。

## 課題
ローカル環境でwindowsのpip入れ直しとかを進めているので、後日記事反映予定です
次また、何か出来たらadventcalanderにアップ予定です!(^^)!

## リンク

https://qiita.com/chomado/items/e69091b87b66d7910c22
Flaskのloggingとその他のモジュールのloggingを共存させる

Flaskのloggerの`default_handler`でFlask側が設定しているらしいので、相乗りさせてあげれば良い

`my_module.py`

```python
from logging import getLogger
logger = getLogger(__name__)
```

`app.py`

```python
from logging import DEBUG
from flask.logging import default_handler
import my_module
my_module.logger.setLevel(DEBUG)
my_module.logger.addHandler(default_handler)

app = Flask(__name__)
```


# Ref
[Logging — Flask Documentation (1.0.x)](https://flask.palletsprojects.com/en/1.0.x/logging/)
[Logging HOWTO — Python 3.8.1rc1 documentation](https://docs.python.org/3/howto/logging.html#logging-advanced-tutorial)
ReactNative開発者のためのFlutter入門~文法編~

こんにちは。普段ReactNativeでアプリケーションを開発しているMちゃんです！
前から良いと評判のFlutterをやってみたいなとずっと思ってたのですが、ようやく重い腰を上げてようやく取り組んだので、ReactNativeと比べてどうなのか？という視点も含めて書いていきたいと思います！

## Flutterとは
FlutterはDartを開発言語としており、Googleによって開発されたモバイルアプリケーションSDK
ReactNativeと同じで1つのコードからiOS,Android両方のプラットフォームで動作するアプリケーションが作成できます。
独自のレンダリングエンジンを実装しており、Hot Reloadが魅力を1つです。

## 文法の違い
#### 変数
ReactNativeは動的型付けです。
Dartでは静的、動的の2つを組み合わされています。
型は必須ですが、一部の型注釈は省略可能です。

```js
// JavaScript
var name = 'Flutter';
```

```dart
// Dart
String name = 'Flutter';
var name = 'flutter';
```

#### 既定値
ReactNative(JavaScript)の既定値はundefined。
Dartはnullになります。

```js
// JavaScript
var name; // undefined
```

```dart
// Dart
String name; // null
```

#### if判定
ReactNative(JavaScript)ではifの条件0またはnullがfalse。
Dartではfalseのみです。

```js
// JavaScript
var myNull = null;
if (!myNull) {
  console.log('null is treated as false');
}
var zero = 0;
if (!zero) {
  console.log('0 is treated as false');
}
```

```dart
// Dart
var myNull = null;
if (myNull == null) {
  print('use "== null" to check null');
}
var zero = 0;
if (zero == 0) {
  print('use "== 0" to check zero');
}
```

#### 関数
Dartでは戻り値がvoidの時は省略して書きます。
また、functionという文字も不要です。

```js
// JavaScript
function fn() {
  return true;
}
```

```dart
// Dart
fn() {
  return true;
}
// can also be written as
bool fn() {
  return true;
}
```

#### 非同期処理
非同期処理においてコールバック関数は重要な要点です。
Dartにはアロー関数が存在しないので、少し書き方が異なりますが大まかには一緒です。

```js
// JavaScript
fetch(url)
  .then(response => response.json())
  .then(responseJson => {
    const ip = responseJson.origin;
    return ip;
  });
```

```dart
// Dart
http.get(url).then((response) {
  String ip = jsonDecode(response.body)['origin'];
  return ip;
});
```
ただし、(ip) => print(ip)のように1行だけの関数はアロー関数のように書くことができます。

```dart
// Dart
final example = new Example();
example
  ._getIPAddress()
  .then((ip) => print(ip))
  .catchError((error) => print(error));
```

#### asyncとawait
JavaScriptとDartでは使用方法は基本的に同じですが、宣言する場所が若干違います。

```js
// JavaScript
async function _getIPAddress() {
  const url = 'https://httpbin.org/ip';
  const response = await fetch(url);
  ...
}
```

```dart
// Dart
Future<String> _getIPAddress() async {
  final url = 'https://httpbin.org/ip';
  final response = await http.get(url);
  ...
}
```

#### 感想
今回はDart文法を学習していきましたが、静的型付けが魅力の一つだなと思いました。
次回はFlutterについて本格的にやっていこうと思います！
次回もお楽しみに✨