OmniAICreator/Qiita-1.07M huggingface dataset:
chuwi herobook 14.1 購入直後にやったこと

自分用の備忘録です。

# 初回電源投入
電源を入れたらセットアップが始まりますが、コルタナがいきなりしゃべり始めるので注意。うるさい。
音量はオフにしておくのが吉。


# 画面項目サイズの変更
1920x1080のハズなんですが、なんか解像度が低く見えたので確認したら、画面項目のサイズが150%になってました。
ディスプレイ設定から解像度を確認するついでに変更できます。

変更すると画面が大きくなった感じがしてびっくり！

# WindowsUpdate
ホントは↓の回復ドライブの作成のために再起動したらWindowsUpdateが走って、なかなか再起動できなかった…。
賢い人は先にやっておきましょう…。


# 回復ドライブの作成
ここを参考にしました。
http://faq3.dospara.co.jp/faq/show/7136?site_domain=default

msconfig後の再起動で↑のWindowsUpdateが走って待たされた。
ちなみに16GBのUSBメモリを要求されました。

現在、回復ドライブの作成中に暇つぶしに書いてます（イマココ
→　追記：作成にめっちゃ時間がかかって8時間ぐらいかかりました…

# 今後の予定
* MicroSD(64GB)の挿入
    * ローカルのストレージがややうんこ(64GB)なので、多少マシになるかなって。
    * 運用はSSHごしのリモデスマシンにする予定…。
    *    * 結構さくっと動くのでやっぱり普通に運用してみようと思います。（オフィスとか入れて）

# その他
* UEFIに入るキーはESCらしい。大切なことなので覚えておく。
    * https://qiita.com/T_keigo_wwk/items/f3c7744d5addf121598a

# 追記(2020/01/27)
英字キーボードが慣れない…というか使いにくい…。半角全角キーがないからじゃ…。
というわけでCapsLockを全角半角キーに割り当てました。

…が一筋縄じゃ行かなかったので、参考となる記事を付記しておきます。

* https://qiita.com/NitRogeeen/items/c1cedcb3abd60f12db9d

以上、現場からでした。
CentOS 7にPHP 7.1をインストール（Remi's RPM repository）

# はじめに

Remi's RPM repositoryを利用してCentOS7にPHP7.1をインストール
親記事：[PHP, PHP-FPMの各種インストール方法とEOLまとめ](https://qiita.com/witchcraze/items/dfe3823554b7caba6f6a)
参考：[Remi's RPM repository](https://rpms.remirepo.net/wizard/)

## サポート

本手法で導入した場合、[PHP: Supported Versions] (https://www.php.net/supported-versions.php)/[PHP: Unsupported Branches](https://www.php.net/eol.php)より、2019-12-01がEOLになると思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## note

- インストール後の更新は `yum --enablerepo=remi-php71 update`

## LOG

### インストール

```shell-session
# cat /etc/redhat-release
CentOS Linux release 7.7.1908 (Core)

# yum install -y https://rpms.remirepo.net/enterprise/remi-release-7.rpm
... 略

# yum install -y --enablerepo=remi-php71 php which
... 略
```

### 各種確認

```shell-session
# which php
/usr/bin/php

# php -v
PHP 7.1.32 (cli) (built: Aug 28 2019 13:15:08) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies

# php -i | grep php.ini
Configuration File (php.ini) Path => /etc
Loaded Configuration File => /etc/php.in

# yum info php
Loaded plugins: fastestmirror, ovl
Loading mirror speeds from cached hostfile
 * base: ftp.iij.ad.jp
 * epel: ftp.riken.jp
 * extras: ftp.iij.ad.jp
 * remi-safe: ftp.riken.jp
 * updates: ftp.iij.ad.jp
Installed Packages
Name        : php
Arch        : x86_64
Version     : 7.1.32
Release     : 1.el7.remi
Size        : 9.4 M
Repo        : installed
From repo   : remi-php71
Summary     : PHP scripting language for creating dynamic web sites
URL         : http://www.php.net/
License     : PHP and Zend and BSD and MIT and ASL 1.0 and NCSA
Description : PHP is an HTML-embedded scripting language. PHP attempts to make it
            : easy for developers to write dynamically generated web pages. PHP also
            : offers built-in database integration for several commercial and
            : non-commercial database management systems, so writing a
            : database-enabled webpage with PHP is fairly simple. The most common
            : use of PHP coding is probably as a replacement for CGI scripts.
            :
            : The php package contains the module (often referred to as mod_php)
            : which adds support for the PHP language to Apache HTTP Server.
```
[nextjs 9] now.shでdotenvとかを使ってprocess.envを表示したい

# 問題
[Exposing configuration to the server / client side][1]
で通常は問題ないが、`now`をして`now.sh`にデプロイすると`process.env`で設定した変数が見えなくなる。

# 解決方法

[repo][3]

`now.json`で`secrets`を使う。


```js:next.config.js
require("dotenv").config()

module.exports = {
  env: {
    // これは `yarn dev` `yarn build && yarn start` `now`どこでも動く
    STATIC_ENV: "static value",
    // これは `now`すると見えなくなる
    FROM_DOT_ENV: process.env.FROM_DOT_ENV,
  },
}
```

**now.json**を追加して

```json:now.json
{
  "build": {
    "env": {
      "FROM_DOT_ENV": "@from-dot-env"
    }
  }
}

```

[Adding Secrets][2]
`now secrets add from-dot-env 'from now secret'`
を走らせる。 

**[注意]**
`now secrets add FROM-DOT-ENV 'from now secret'`
と大文字でやっても、小文字で保存される
`now secrets ls`
で確認出来る。


その後に`now`をすると、now.shでも`process.env.FROM_DOT_ENV`が見える。


[1]: https://nextjs.org/docs#exposing-configuration-to-the-server--client-side

[2]: https://zeit.co/docs/v2/build-step/#adding-secrets
[3]: https://github.com/github0013/my-next-project
プログラミングパラダイムについて整理して理解を深めよう

#はじめに
未来電子テクノロジーでインターンをしているErika-Mです。

PythonやSQL、JavaScriptなど様々な言語をだんだんと習得し始めたので、初心に帰ってプログラミングパラダイムをしっかり頭に入れようと思いました。

（https://style.potepan.com/articles/12941.html
プログラミングの考え方を変えるパラダイムとは？分かりやすく解説しました！）
↑こちらのサイトがとてもわかりやすく、参考にさせていただきました。

もし誤りがあれば修正するのでどんどん指摘してください。

#プログラミングパラダイムとは

パラダイムと聞くととっつきにくいイメージがありますが、言い換えればプログラミングの基本スタイルのことです。
どのように処理を進めるのかの方向性の違いのようなものでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450384/2fc2cc39-2906-26dd-e538-23d8ed7b36d2.png)
（出典：https://style.potepan.com/articles/12941.html）

#プログラミングパラダダイムの種類

調べても難しい説明ばかりだったので、ざっくりとした印象を書きます。

##オブジェクト指向
プログラムを「モノの作成と操作」として見る考え方です。
実態としては変数と関数をひとまとめにしたクラスを作ります。
クラスとは設計図のようなもので、大人数でもクラスを共有することで共同開発がラクにできます。

##命令型プログラミング

「手続き型」と同義として使われます。
問題を解決するために、どう処理を行うかを指示します。

##宣言型プログラミング

問題の性質や意味、制約を記述し、その値がどのようなものかを宣言します。
SQLを思い浮かべてもらうとわかりやすいと思います。

###関数型プログラミング
宣言型プログラミングの一種で、数学的な関数の組み合わせによって表現します。

###論理型プログラミング
関係を扱う論理式の組み合わせです。

#まとめ

プログラミングパラダイムは他のプログラミング言語を学ぶ際の指標になるので、参考にしてみてはいかがでしょうか。
#Rails の bundle install と bundle update の違いを結論から書く

# bundle install

- 初回は Gemfile を元に gem をインストールする。 Gemfile.lock が生成され、 gem のバージョンを固定する。
- 二回目以降は、Gemfile.lock で固定されたバージョンの通りに gem をインストールする。
- Gemfile.lock が存在する場合は、誰が bundle install しても同じバージョンの gem がインストールされる。同じ Gemfile.lock がある限り、同じバージョンのgem群を再現できる。(それが **ロック** だ！)

# bundle update

- Gemfile を元に gem のバージョンをアップデートして、Gemfile.lock を更新する。
- それぞれのgemのバージョンがどのバージョンアップデートされるかは、Gemfileでのgemのバージョン指定や、gem同士の依存関係による。

# つまり

- Gemfile.lock がある限り、 bundle install した時の gem のバージョンは変わらない。
- bundle update した後に Gemfile.lock を元に戻してから bundle install すると、gem のバージョンは元に戻る。つまり gem をダウンデートできる。
- Gemfile.lock がなかったり、削除した場合に bundle install を実行すると、gem のバージョンが固定されていないため、バージョンが変わる可能性がある。
- Gemfile.lock を削除してから bundle install するのと、 Gemfile.lock がある状態で bundle update する場合では、どちらも可能な限り最新バージョンのgemをインストールしようとするため、同じ結果になる。
- 初回に bundle install した後に、すぐ bundle update を実行すると、すでに可能な限り 最新バージョンの gem をインストールしているはずなので、何も変わらない。

# ツッコミ歓迎

嘘があったら俺を食え。

![image](https://user-images.githubusercontent.com/13635059/65807092-dd5b4b00-e1c7-11e9-9ee5-c433913cf84d.png)

# 参考

[bundle install と bundle updateの違いについて - Qiita](https://qiita.com/lasershow/items/1a048d03ddaaba98171e)

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
パーティクルに当たり判定を実装する

# 概要
パーティクルに当たり判定を実装する方法を紹介します。本記事では、パーティクルがオブジェクトに衝突すると衝突回数が加算されていくように実装します。

# 結果
最終的にこの動画にようになります。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">パーティクルと立方体との衝突回数を表示させる <a href="https://t.co/1EWeWrf9YX">pic.twitter.com/1EWeWrf9YX</a></p>&mdash; みこし (@Mikoshi_prog) <a href="https://twitter.com/Mikoshi_prog/status/1176680897334005760?ref_src=twsrc%5Etfw">September 25, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 方法
<img width="629" alt="オブジェクトの配置.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498199/c31c5680-4f26-a0f9-3523-88eaa4561503.png">

本記事で使用するオブジェクトは、緑色の**Cube**、赤い**Particle**、衝突回数を表示する**Text**です。各オブジェクトのTransformの値は

* Cube: Scale(3, 3, 3)
* Particle System: Position(10, 0, 0), Rotation(0, -90, 0)
* Main Camera: Position(4, 0, -10)

のように変更しました。さらにCubeには**Box Collider**をつけます。Box Colliderがないと衝突判定ができません。Box ColliderのIs Triggerのチェックは入れないでおきます。カメラから見てCubeの右側からParticleを放出するようにします。

<img width="949" alt="パーティクルの設定.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498199/2726191b-d707-06e0-94cd-1f6529edc426.png">


パーティクルの設定は上の図のようにします。Particleの色は図には映っていませんが、Start Colorで変更します。Particleの当たり判定を実装するうえで重要なのが

1. **Collision**にチェックを入れる
1. CollisionのTypeを**World**にする
1. Collisionの**Send Collision Messages**にチェックを入れる
1. スクリプトで**OnParticleCollisionメソッド**を呼び出す

です。1~3までは上の図の通りです。4については以下のスクリプトで説明します。

```C#:ParticleController.cs
using UnityEngine;

public class ParticleController : MonoBehaviour
{
    private int count;

    private void Start()
    {
        count = 0;
    }

    private void Update()
    {
    }

    void OnParticleCollision(GameObject obj) 
    {
        Count++;
    }

    public int Count 
    {
        get { return count; }
        private set { count = value; }
    }
}
```
ParticleController.csはParticle Systemにアタッチするスクリプトです。この中に**OnParicleCollsion**という名前のメソッドが入っています。これは、先ほどの1~3の設定ができているときにパーティクルがColliderのついているオブジェクトに衝突したときに自動で呼び出されるメソッドです。衝突するたびに、衝突回数を表す変数countを1ずつ増やしています。**メソッドの名前はOnParticleCollsionでなければならず、引数の型もGameObjectでなければなりません。**

```C#:TextController
using UnityEngine;
using UnityEngine.UI;

public class TextController : MonoBehaviour
{
    private ParticleController particleController;
    private Text text;

    private void Start()
    {
        particleController = GameObject.Find("Particle System").GetComponent<ParticleController>();
        text = GetComponent<Text>();
    }

    private void Update()
    {
        text.text = particleController.Count.ToString();
    }
}
```
続いてTextにアタッチするTextController.csです。Textに衝突回数を表示させる必要があるので、ParticleController.cs内で定義されている変数countを参照しなければなりません。そこでParticle SystemにParticleControllerがついていることを利用して

```
particleController = GameObject.Find("Particle System").GetComponent<ParticleController>;
```
でParticleController.cs内にアクセスできるようにします。あとはUpdateメソッドでTextの文字をcountにすれば衝突回数が増えていく様子が画面上で見てとれます。

以上です。
Noodlにオシャレな文字フォントを追加して利用する方法

# 概要
Noodlで使用可能な文字フォントが少ないので、追加してみました。

初期状態では８種類の文字フォントが利用可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/06adb518-fcec-34b7-c863-514f62c72018.png)

今回ご紹介する方法は、文字フォントのファイルをNoodlのプロジェクトに追加します。
操作方法は簡単ですが、プロジェクトが変わるとその都度読み込ませる必要があります。

NoodlのバージョンはVer1.3.1を使用しています。
Noodlハンズオンに参加すると、Ver1.4.0がインストールされていると思いますが、
基本操作は変わりません。

# 手順
## 新規プロジェクト作成
　Noodlを起動し、「Create new project」で新規プロジェクト作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/bcf4488a-c727-74e3-48d2-0412617f8c44.png)

## 文字フォントファイルを用意
　プロジェクトに読み込む文字フォントファイルを用意します。
ネットで検索するとフリーの文字フォントが沢山みつかります。

今回は、[こちら](https://sitebk.com/summary/brush-font/)のサイトにあった、**ジン乱角-R**フォントを利用してみます。（ラーメン屋さんのお品書きみたいなフォントですね）

現状確認済みの文字フォントファイルの拡張子は次の2種類です。
 - ttf
 - otf
ダウンロードしてzipファイルを解凍すると、次のようにotfファイルがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/ac9d3b5b-857f-cfc1-7a8e-b086dd87a82b.png)

## 文字フォントをプロジェクトに読み込む
用意した文字フォントファイルを読み込みます。

**ファイルをNoodlのプロジェクト画面にドラッグ&ドロップする**

だけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/64eac922-3d8f-9944-ef09-3a8485155367.png)

## 読み込んだ文字フォントを使う
Textノードの”Font Family”プロパティを開くと、次のように追加したフォントが一番上にあります。あとはこのフォントを選択するだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/b805da87-7561-4871-67d9-14762bdddb13.png)

## おわりに
文字フォント変更するだけで、UIの印象ががらっと変わりますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/45adbda7-dda5-0c01-2bb6-9630f164fc71.png)
Route53からドメイン取得

#WHAT
AWS,Azure,GCPちょっとつかってみてなにができるかすこしでもわかっておきたい
##WHY
知ってて損はない
##WHERE
AWS  route53でドメイン取得してみる
##WHO
marude-dameo 
##HOW
手を動かす、google先生と過去の先輩たちのアーカイブやドキュメントを活用させていただきます
https://dev.classmethod.jp/cloud/register-domains-route53/

`Route53`>`登録済ドメイン`>`ドメイン登録`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/5e0890d3-3400-a300-021b-e11dcd998402.png)

`ドメイン選択`>`任意ドメイン入力登録`>`チェック`>`続行`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/358ac4f4-428f-ecf5-24ad-8c4adfa26e10.png)

`必要な個人情報を打ち込む`>`存在するメールアドレスを入力`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/3cd07f4e-5472-720c-c8ed-0aefaad47b38.png)

`プライバシー保護は有効`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/b920b1ae-e97a-6859-4171-bb5399c8543a.png)

`確認メールが来るのかな`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/83f50c1a-d725-d3bd-a06c-a17e226d11c0.png)

`きたよ`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/2437d76e-672b-8a8f-bb9b-7c0a666dd118.png)

`承認されたみたい`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/f6a6a4d1-823c-7225-8d60-2f9421f3b012.png)

`登録内容、規約を確認して購入完了`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/40193368-bc0c-4f1d-707d-4afc25a73c1d.png)

`多分登録された`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/857cbbba-5578-f11b-c012-512e2b919163.png)

`はず`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/fb1603a4-2e44-c7d6-f678-1a566fd3440c.png)

`まつ`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/1a6cd965-e86d-1f78-17ed-4576eecb4efd.png)

`メール受信`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/70d6b3f6-acc9-48c5-7288-d5a04ffd7914.png)

`登録済に`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/c017dd4e-32c5-cfdb-b918-6996c0096fea.png)

`route53 ホストゾーンには自動登録されるみたいです`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504520/bee74eee-c0a0-5280-93cb-6d5bd208564c.png)

`ひけました`

```
$ dig marude-dameo.com ns

; <<>> DiG 9.8.2rc1-RedHat-9.8.2-0.30.rc1.el6_6.1 <<>> marude-dameo.com ns
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 16459
;; flags: qr rd ra; QUERY: 1, ANSWER: 4, AUTHORITY: 0, ADDITIONAL: 0

;; QUESTION SECTION:
;marude-dameo.com.              IN      NS

;; ANSWER SECTION:
marude-dameo.com.       172800  IN      NS      ns-1687.awsdns-18.co.uk.
marude-dameo.com.       172800  IN      NS      ns-1440.awsdns-52.org.
marude-dameo.com.       172800  IN      NS      ns-595.awsdns-10.net.
marude-dameo.com.       172800  IN      NS      ns-207.awsdns-25.com.

;; Query time: 11 msec
;; SERVER: 10.3.0.1#53(10.3.0.1)
;; WHEN: Sat Sep 28 09:27:48 2019
;; MSG SIZE  rcvd: 171
```

別途レジストラ介さないのは便利ですね
Rubymine(IntelliJ IDE)へのzshの適用

## 起こったこと
せっかく導入したzshがRubymineで適用されなかった。
bashのままでは嫌だ！

**環境**

- MacBook Pro (13-inch, 2018)
- macOS Mojave 10.14.6
- Rubymine 2019.2.3


## zshの適用方法
1. Rubymineを起動
2. Preferences(環境設定)を開く
3. 左上の検索窓に「Terminal」と入力し検索
4. 左ペインの「Terminal」を選択
5. Application settingsのshell pathに「/usr/local/bin/zsh」と入力し、右下の「OK」を押す
6. Rubymineを再起動すると、zshが適用される。

<img width="1000" alt="スクリーンショット 2019-09-28 9.24.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286816/c2d3b72e-912d-f42d-eff8-dff99c7e7fc4.png">

## 参考
以下の記事を参考にさせていただきました。ありがとうございました。

[IntelliJ IDEAのシェルをzshに変更する](http://think-simple-enjoy-life.com/433)
FFMPEGで「Unknown decoder 'copy'」と出る場合はoptionの指定順序がおかしい

#原因
[ffmpeg: Unknown decoder 'copy' #13](https://github.com/valekhz/m4b-converter/issues/13)にあるように、-iオプションの前にエンコードオプションをつけると発生する

#解決策

##誤
```shell
/usr/bin/ffmpeg -vcodec copy -acodec copy -i "input.mp4" "output.mp4"
```

##正
```shell
/usr/bin/ffmpeg -i "input.mp4" -vcodec copy -acodec copy "output.mp4"
```
MySQL ERROR 1136 (21S01)の解決方法

Mysqlにてgoodというテーブルに以下の値をINSERTしようとした

```
INSERT INTO good VALUES(1,"ペン",120);
```

すると、以下のエラーが発生。

```
ERROR 1136 (21S01): Column count doesn't match value count at row 1
```

どうやら、INSERTする値の数とカラムの数が合っていないとダメだらしい。テーブルのカラムは4つあった。

```
INSERT INTO good VALUES(1,"ペン",120,NULL);
```
として入力すると、解決。
JavascriptでPOST(Submit)後にイベントを発火させる方法がわからない。→解決

 会社の受付フォームを趣味でごりごり作成しております。
POST後にイベント発生させたい。やり方がわかりません。
 具体的には、「<button class="btn btn-primary" type="submit">登録</button>」をクリックするとPOST送信され
POST後にイベントを発火して「＜fieldset id="itemInput0" hidden＞」の「hidden」を「true」にして表示させたい。
どなた様かご教授お願いします。
**→(解決)POST後、Javascriptのプログラムが走るので、その時に処理できました。ありがとうございました。**

```html:form.html
<form action="{% url 'form_daihen' %}" method="POST">
  {% csrf_token %} 　
  
  <!----------コード省略----------->
  
  <fieldset id="itemInput0" hidden>

    <!----------コード省略----------->

  </fieldset>
  　
  <!----------コード省略----------->
  
  <button class="btn btn-primary" type="submit">登録</button>
</form>
```
Google Application Engineでデプロイする時に必要な設定とコマンドまとめ

https://cloud.google.com/appengine/docs/standard/go111/quickstart?hl=ja
この流れに沿って開発してみました。

##1.Cloud SDK をダウンロードしてインストールOR更新
###インストール方法
https://cloud.google.com/sdk/docs/?hl=ja

C:\Users\[あなたのユーザ名]\AppData\Local\Google\Cloud SDK\google-cloud-sdk
Windowsだとこの辺りのパスにダウンロードされます。
これで、gcloud～のコマンドが使えるようになります。

###更新方法
既にインストール済みの場合には、
####gcloud components update
で更新できます。

##2.新しいプロジェクトの作成
####gcloud projects create [YOUR_PROJECT_ID] --set-as-default

--set-as-defaultを付けると、プロジェクトの作成と同時に、アプリケーションのデプロイ対象となるプロジェクトが置き換わります。


#####※既にプロジェクトがある場合には、gcloud config listでデプロイ対象となるプロジェクトが正しいか確認できます。もし対象が異なっていた場合には、gcloud config set project [プロジェクト名]でプロジェクトは書き換え可能。

##3.デプロイ準備
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466621/2ad50862-516f-9bf2-015b-973c711cbe86.png)

デプロイの前に、対象のプロジェクトで請求先アカウントのリンクを有効化します。これをやらないとデプロイしても以下のようなエラーが出ます。

```
ERROR: (gcloud.app.deploy) Error Response: [7] Access Not Configured. Cloud Build has not been used in project ～
```

##4.デプロイ
####gcloud app deployと入力すれば、デプロイ完了です。

※一時的にプロジェクトを変えたい場合は、gcloud app deploy --project PROJECT_IDでプロジェクトIDを指定可能です。

##(補足)デプロイした内容が反映されない時
APP Engine>Memcacheから、キャッシュをクリアしてあげると即時反映される、らしい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466621/45317b88-7dbf-f452-e317-1c1c15fb3886.png)
新しく登場した一括管理アプリ「Stack」がガチで便利だったから聞いてほしい

Product Huntをみていたら、　Stackというアプリが話題になっていたので、チラッとみてみました。

Webアプリを一元管理できるようで、有名どころだと「Franz」「Station」があります。

私は「Station」を愛用しており、乗り換える気持ちはなくて、「試しに触ってみるか」くらいの感覚でDLしました。
（Product Huntで超人気アプリを使ってみたかったというのもあります）

使ってみた結果、最高に便利な一元管理アプリで、速攻でstationから乗り換えました(掌返し)

ぜひ皆様にその感動をいち早くお届けしたくて、超久しぶりにQiitaに投稿します。
→[https://stackers.app/](https://stackers.app/)

※2019/9/27時点、Mac限定のアプリです。

## Stackを激推したい３つの理由

個人的にStackいいなぁと思うポイントは３つあります。

- 横スクロールで一望できる
- カテゴライズできる
- リンク踏むと、アプリ内ですぐ閲覧できる

それぞれ簡単に説明していきます！

### 横スクロールで一望できる

横スクロールで登録したwebアプリを一望できます。今までは一元管理といいつつ、違うwebアプリを見る度にショートカットキーを叩いたりしていて、地味に面倒くさかったんですよ。

stackでは横スクロールでまとめて見れます。slackもこんな感じで、こんな感じで一望できちゃう！
![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314351/85bb0f50-0db4-1f15-0839-74c5ef8e1b87.gif)

これだけで凄い便利になりました。他のアプリでシェアするのも、stackだったら横スクロール＋コピペで超簡単にできちゃいます。

### カテゴライズできる
アプリ毎にカテゴライズできて、階層を作れます。言葉では伝わりにくいんですが、GIFで紹介するとこんな感じ！

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314351/8b84e36d-b65f-979b-553d-61702c659af7.gif)

twitterとfacebookの階層とslackの階層をわけて確認できています。

この機能で、関係性の強いアプリ同士をまとめて閲覧できます。カテゴリーの移動は、ショートカット`cmd+1`, `cmd+2`…と用意されていて、操作も簡単で最高です！

### リンク踏むと、アプリ内ですぐ閲覧できる
これめっちゃ最高。今までの一元管理アプリは、毎回毎回ブラウザ飛んで、不便だったんですよね。ちょっとしたリンクはその場でみたいじゃないですか。

開発者の方が押しポイントにしていて、こんな風に簡単に開けます。さらに、ブラウザでちゃんと開きたいときは、右上のアイコンをクリックすればOK！閉じるアイコンもあって操作性◎。最高かよ。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314351/a98556e3-9600-313d-589f-01557ef45829.gif)

## 最後に
stack、最高の一元管理アプリの予感がします。サクサク動いてて、アクティビティモニタみると、エネルギー消費量やメモリ使用量もstationより抑えられています。

気になる点がゼロかっていったらそうではなく、横スクロールする際に、少しガタつくことがあって、今の所それくらいです。

一元管理アプリを使っている方はぜひ試してみてください！！！
→[https://stackers.app/](https://stackers.app/)
【Laravel5.5】ビューの作成

Laravel5.5の備忘録として残しておく。
今回はビューの作成について。
※拙い言葉で恐縮です。
※なんか解釈に間違いがあったり、表現が曖昧だったりするかもしれません。
　予めご容赦くださいませ。

controllerとViewファイルについてメモ。

controller名はなんでもいいけど、一旦 `ItemController.php` としておく。

controllerはartisanコマンドを使って作成する。

```
php artisan make:controller ItemController
```

とすれば作成される。
作成される場所は `/app/Http/Controllers` 配下

作成時は以下の状態なので、ビューファイルに渡すための処理を記述する

```php:ItemController.php
<?php

namespace App\Http\Controllers;

use App\Item;

use Illuminate\Http\Request;

class ItemController extends Controller
{
}

```

まずはビューファイルのindex.phpに情報を渡すための処理を記述。

```php:ItemController.php
<?php

namespace App\Http\Controllers;

use App\Item;

use Illuminate\Http\Request;

class ItemController extends Controller
{
	public function index() {
		return view('item.index', [
			'var' => 'hogehoge'
		]);
	}
}
```

ビューファイルは `/View/item/index.php` とする。

 `return view('item.index' ~` は '/item/index.php' の `.` を除いた部分を記述する。
(素人の語彙力のなさw)

 `var` に文字列である `hogehoge` を配列で格納する。

ビューファイルは以下のように記述。

```php:index.php
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
   <title>hogehoge</title>
 </head>
  <body>
   <p> {{ $var }} </p>
  </body>
</html>
```

 `$var` は `ItemController.php` で記述していた `'var' => 'hogehoge'` が格納されている。
 `echo` を使わずにController側で記述した内容をビューファイルに渡し表示させる時は、Laravelの独自変数表示方法である `{{ 変数 }}` を用いる。

するとブラウザ側では
<img width="154" alt="スクリーンショット 2019-09-28 4.57.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490824/cdae5917-5c9e-4360-f743-2e63af361d59.png">
と表示される。

## compact関数
今回viewに渡す方法として配列を用いたが、 `compact関数` というものを使えば、短く記述することが可能。
記述の仕方としては `return view('ファイル', compact('変数'));` とすれば良い。
先ほどのファイルに記述するとすれば以下の通りとなる。

```php:ItemController.php
<?php

namespace App\Http\Controllers;

use App\Item;

use Illuminate\Http\Request;

class ItemController extends Controller
{
	public function index() {
        $var = 'hogehoge'
		return view('item.index', compact('var'));
	}
}
```

とすれば良い。

今回も勉強になった。
「トレンドマイクロのビジネスセキュリティのWindows10対応予定」の対応予定時期と補足事項について、(予告なく?)変更が発生していた。

#内容
(参考)「Windows10対応予定|トレンドマイクロ＞ビジネスセキュリティ」の対応予定時期と補足事項
https://www.trendmicro.com/ja_jp/business/os-support.html

先月見ていた時、
「
Windows 10 May 2019 Update 対応予定
ウイルスバスター ビジネスセキュリティ 10.0 2019年9月上旬　 SP1で対応予定
ウイルスバスター ビジネスセキュリティ  9.5 2019年9月～10月
ウイルスバスター ビジネスセキュリティ  9.0 2019年9月～10月
」

#補足
windows10が、20190927で、このページに5種類ありました。

#Windows10 調査資料
Microsoft Windows 10(wikipediaより)20190927現在
https://ja.wikipedia.org/wiki/Microsoft_Windows_10

Released in July 2015（2015年7月リリース）
Windows 10 November Update（Windows 10の11月の更新プログラム）
Windows 10 Anniversary Update
Windows 10 Creators Update
Windows 10 Fall Creators Update
Windows 10 April 2018 Update
Windows 10 October 2018 Update
Windows 10 May 2019 Update

別名が、8種類ありました。


#外部参照
(参考)ついにWindows10のバージョン1903が一般リリース開始。ウイルスバスターcorpは6月25日に対応されました。
https://infochanpuru.com/win10-ver1903/
(参考)ウイルスバスターコーポレートエディションの脆弱性(CVE-2019-9489) について
https://www.ipa.go.jp/security/ciadr/vul/alert20190910.html
初心者によるプログラミング学習ログ112日目

# 100日チャレンジの112日目

Twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

112日目は、

 * テンション上がらず、あまりプログラミング学習できなかった
 * MENTAのメンターさんの課題のみ。
 * 実質的に30～40分ぐらいしか学習せず。


基本的に平日は、仕事を終えて家に帰ってから寝るまで3時間ぐらいしか時間がありません。
【CodeCommit/Windows】クライアント環境整備、Git認証情報作成、リポジトリの作成とクローン

AWSのCodeCommitで、クライアント環境の整備とGit認証情報の作成をし、クローンするまでの手順です。

## 対象ツール
AWS CodeCommit

## 手順
### サマリ
1. Gitクライアントのインストール
2. IAMユーザーとGit認証情報の作成
3. リポジトリの作成とクローン

### 1. Gitクライアントのインストール
1. 以下より、GitクライアントをDL、インストール（基本デフォルトの内容でインストールでOK）
https://git-scm.com/downloads

2. コマンドプロンプトを起動し、e-mailと名前を登録

```
> git config --global user.email "you@example.com" 
> git config --global user.name "Your Name"
```
you@example.com：任意のメールアドレスを入力（ダミーでOK）
Your Name：任意の名前を入力（ダミーでOK）
→登録しないと、git commit時にエラーになるので、先に登録しておきましょう！

### 2. IAMユーザーとGit認証情報の作成
1. AWSコンソールにログインし、IAMより、ユーザーを作成する（「アクセスの種類」はローカルでGitを操作するだけなら、「プログラムによるアクセス」のみチェックでOK）
2. 以下のいずれかのポリシーをアタッチする  

|ポリシー名|アクセスレベル|
|:---|:---|
|AWSCodeCommitFullAccess|フルアクセス|
|AWSCodeCommitPowerUser|完全: リスト 制限: 読み込み, 書き込み|
|AWSCodeCommitReadOnly|完全: リスト 制限: 読み込み|  
  
3.上記のユーザーに対し、「AWS CodeCommit の HTTPS Git 認証情報」を生成する  
①IAMにて上記ユーザーをクリック > 「認証情報」タブをクリック  
②「AWS CodeCommit の HTTPS Git 認証情報」下の「生成」をクリック  
③Git 認証情報が生成されるので、「証明書のダウンロード」をクリック
④gitCredentials.csvがダウンロードされる（Git 認証時に使用するので大切に保管する 
 こと）

### 3. リポジトリの作成とクローン
1. AWSコンソールにログインし、CodeCommitを開き、「リポジトリの作成」をクリック
2. 「リポジトリ名」欄にリポジトリ名（必須）、「作成」欄にリポジトリの説明（任意）を入力し、「タグの追加」（任意）を実施する
3. 「URLのクローン」 > 「HTTPSのクローン」をクリックし、コマンドコマンドプロンプトを開いて任意の場所でgit cloneする

```
> git clone 「HTTPSのクローン」でコピーしたURL
```
4.ユーザー名とパスワードを聞かれるので、2-④でダウンロードしたgitCredentials.csvに記載のユーザー名とパスワードを入力し、「OK」 
5. ローカルリポジトリが作成される  
※git clone時に認証情報を間違えてその後、cloneできなくなった場合は以下を参照
[【CodeCommit/Windows】ユーザー名 or パスワードを間違えてgit clone出来なくなった場合の解決方法](https://qiita.com/C_HERO/items/6fa0ff4153f0149645cd)
## 参考

[AWS アカウントでの IAM ユーザーの作成](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_users_create.html)
[AWS CodeCommit のセットアップ](https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/setting-up.html)
[AWS CodeCommit リポジトリの作成](https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/how-to-create-repository.html)
【ざっくり翻訳】Firebase のコンソールを使って、iOS アプリを配布しよう

# 経緯
App Attribution が公開になったので、原文を読みました。
言語設定を日本語にすると分かりやすい説明文があります。
あくまで個人の意訳／英語の勉強くらいのレベルですので、誤訳／口語としておかしいなどご指摘頂けますと幸いです。

### 元のページ
- [Distribute iOS apps to testers using the Firebase console](https://firebase.google.com/docs/app-distribution/ios/distribute-console, "Distribute iOS apps to testers using the Firebase console")

### 注釈
- 大体書いてある所の目安となるように見出しは原文も合わせて記載しています。
- 公開時点で手順の検証が終わっていないため、適時更新してゆきます。

---------

Distribute iOS apps to testers using the Firebase console
===

あなたは、あなたのチームのテスターを管理し、Firebase コンソールを使って配布することができる  

### Before you begin ／ 始める前に
まだ iOS のプロジェクトがなければ作成しましょう。
他の Firebase 製品を利用していない場合、プロジェクトを作成して登録するだけです。
しかしながら、将来それらの製品を追加するのであれば、先のリンク先の手順を全て完了してください。  

### 1. Build your app ／ アプリをビルドしよう
テスターに署名済みのビルド版、プレリリース版を配布する準備ができた場合、以下の要件を満たしている限り普段と変わらない手順で配布できます。

- 開発チーム以外に配布する場合、AdHoc または Enterprise の profile を使用する必要がある
- あなたのアプリで Game Center, APNs (and by extension, Cloud Messaging), または iCloud を利用する限り、provisioning profile で利用する explicit app ID はワイルドカード を利用できない
- もしAdHoc プロファイルを利用する場合、テスターチームのデバイスのデバイスID（UDID）を含める必要があります。  
  あなたの新しいテスターを追加する場合テスターのロールに対して、provisioning profile に新しいテスターのデバイスID（UDID）を更新する必要があります  
  [こちらを参照してください](https://firebase.google.com/docs/app-distribution/ios/distribute-console#register_devices, "こちらを参照してください")
- 最新の配布版よりアプリを修正したら（それは、UDIDの追加のための再ビルドした場合を除く）、ビルドターゲットのユーザーに表示されるバージョン番号（バージョン）と一意のビルド番号（ビルド）を更新します

ビルドが完了したら、指定したフォルダに ipa ファイルおよび、ログファイルを保存します。
次の手順でIPAファイルをテスターに​​配布します。

### 2. Distribute your app to testers ／ アプリをテスターに配布する
あなたのアプリをテスターに配布するためには、Firebase のコンソールを使って IPA ファイルをアップロードする  

1. Firebase のコンソールの [App Distribution page](https://firebase.google.com/docs/app-distribution/ios/console-link, " App Distribution page") を開きます。複数プロジェクトがある場合該当するプロジェクトを選択します。
2. 配布ページ上で、ドロップダウンメニューよりあなたが配布したいアプリを選択します。
3. コンソール上に IPA ファイルをドラッグすることで、アップロードすることができます。
4. アップロードが終わったら、あなたが配布するテスターグループと個別に配布するテスターを選択します。  
   そして、配布時のリリースノートを作成します  
   [テスターの管理](https://firebase.google.com/docs/app-distribution/manage-testers, "テスターの管理")とテスターグループの作成についてはこちらをご覧ください
5. テスターに配布するビルドバージョンを選択します。  
   招待されていないテスターは、テスト開始通知メールを受け取ります。  
   既存のテスターは、新バージョンのテスト開始通知メールを受け取ります。  

App Attribution の招待通知メールを送った後、Firebase のコンソールから招待メールを承諾したか／配布アプリをインストールしたか確認できます

### 3. Register additional tester devices ／ テスターのデバイスを追加する

テスターが署名なしのアプリのテストを承諾した場合、端末のUDIDを共有し許諾してもらう必要があります。同意が得られた場合、App Distribution は端末から UDID を収集することができるメールによって共有された新たな端末のUDID を通知される

あなたが端末の UDID を記載したメールを受信した場合、UDID を記載した provisioning profile を更新し、次の手順で新しいテスターにアプリを配布できる

1. アップルデベロッパーポータルの[デバイスの追加](https://developer.apple.com/account/resources/devices/add, "デバイスの追加")から、メールに記載してある UDID を登録します
2. [iOS Provisioning Profiles](https://developer.apple.com/account/resources/profiles/list, "iOS Provisioning Profiles")上で、登録したデバイスを provisioning profile に追加します
3. provisioning profile をダウンロードして、アプリを再度ビルドします。もしテスト端末の追加だけの再ビルドである場合、ビルド番号やバージョンは更新する必要がありません。
4. Firebase のコンソールまたは CLI から [アプリの再配布](https://firebase.google.com/docs/app-distribution/ios/distribute-console#distribute, "アプリの再配布") 行います。すでに同じビルド番号やバージョンで配布している場合、新しく登録した端末のユーザーのみが配布通知メールを受け取ります。

これらの手順を終えると、あなたのテスターは手順を完了し、あなたのアプリをインストールできるようになっています。
備忘録：よく使うショートカット&コマンド集

# よく使うショートカット集

## Chrome

### タブ + ウィンドウ
- 新しいタブを開く
    - Command + t
- タブを閉じる
    - Ctrl + W
- シークレットウィンドウを開く  
    - Command + Shift + n
- タブを右に移動  
    - Ctrl + Tab
- タブを左に移動
    - Ctrl + Shift + Tab
- タブを指定して移動
    - Command +　数字   

### 開発
- HTMLのソースを表示
    - Command + Option + u
- 開発者ツール
    - F12
### 検索
- アドレスバーにカーソルを移動
    - Command + L

## Vim
### 行移動
-  行の先頭に移動
    -  0
- 行の末尾に移動
    - $  
- 下の行の先頭へ
    - +
- 上の行の先頭へ
    - -
 
### 単語移動
- 単語の先頭に進む
    - w
- 単語の先頭に戻る
    - b
- 単語の末尾に進む
    - e
- 単語のも末尾に戻る
    - ge  

### 編集
- コピー
    - {コピーする行数}yy
- ペースト
    - p
- 削除
    - dd
    - 数字 + dd(数値分削除)
    - d + 0(カーソル位置より前の行頭まで削除)
    - d + ^(カーソル位置より前の空白を除いた分行頭まで削除)

## terminal
- ディレクトを検索
    - find [検索対象パス] -name "[ディレクトリ名]" -type d 
- ファイル内文字列検索
    - grep [検索したい文字列] -rl [検索対象フォルダのパス]

## Mac
###ウィンドウ
- 同じアプリケーションで画面を切り替える
    - Command + F1
Pandas データフレーム同士のカラム名の差分を取得・比較する方法

##記事を書いた発端
「dataframe カラム名 比較」とか「データフレーム カラム名 差分」とか検索しても、自分が知りたい情報が出てこなかったので書きました。どんな単語で検索するのが適切なのだろうか・・・。

なお、さきほど似たような内容の投稿をしました。あなたの知りたいことはこちらですか？↓
[データフレーム同士の列の中を比較して、一方にしかないない値を取得する](https://qiita.com/hatorijobs/items/e6219c6a7f1872b5939f)

##動作環境
python 3.7.3 
jupyterlab　1.0.1

##列が少ないデータフレーム同士の場合
２つのカラム名の一覧をprintで並べて表示するだけですので、検索すればコードはすぐに出てきます。

```
[in]
import numpy as np
import pandas as pd

# サンプルとなる２つのデータフレームを作成する
train = pd.DataFrame({ 'ID' : [1,2,3], 'Item' : ["aaaa","bbbb","dddd"], 'answer' : [1,1,0]})
test  = pd.DataFrame({ 'ID' : [1,2,3], 'Item' : ["aaaa","bbbb","cccc"]})

# ３列なので、これで十分わかる
print(train.columns)
print(test.columns)

[out]
Index(['ID', 'Item', 'answer'], dtype='object')
Index(['ID', 'Item'], dtype='object')
```
ワイ「このtrainデータは、testデータと比べて、answerという列が追加されているという違いのみだな、よし」という具合に、簡単にわかるのですが、列が多くなると、このやり方では通用しません。ここからが本題です。

##カラム数が多い場合のカラム名の差分を確認する方法（失敗例）
列がうんざりするほど多いサンプルを以下に作りました（手作業で）。ここでは、a~zの26列くらいのサンプルですが数百列のカラム数とかを想定してください。

```
[in]
train_data = {
    'aaaa':['1'],'bbbb':['1'],'cccc':['0'],'dddd':['1'],'eeee':['0'],'ffff':['1'],
    'gggg':['1'],'hhhh':['1'],'iiii':['1'],'jjjj':['1'],'kkkk':['0'],'llll':['0'],    
    'mmmm':['0'],'nnnn':['0'],'oooo':['1'],'pppp':['1'],'qqqq':['0'],'rrrr':['1'],
    'ssss':['0'],'tttt':['0'],'uuuu':['0'],'wwww':['1'],'xxxx':['0'],'yyyy':['1'],
    'zzzz':['0']
}
test_data = {
    'aaaa':['1'],'bbbb':['1'],'cccc':['0'],'dddd':['1'],'eeee':['0'],'ffff':['1'],
    'gggg':['1'],'hhhh':['1'],'iiii':['1'],'jjjj':['1'],'kkkk':['0'],'llll':['0'],    
    'mmmm':['0'],'nnnn':['0'],'oooo':['1'],'pppp':['1'],'qqqq':['0'],'rrrr':['1'],
    'ssss':['0'],'tttt':['0'],'uuuu':['0'],'vvvv':['1'],'wwww':['1'],'xxxx':['0'],
    'yyyy':['1']
}
train = pd.DataFrame(train_data)
test  = pd.DataFrame(test_data)
print(train.columns)
print(test.columns)

[out]
Index(['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee', 'ffff', 'gggg', 'hhhh', 'iiii',
       'jjjj', 'kkkk', 'llll', 'mmmm', 'nnnn', 'oooo', 'pppp', 'qqqq', 'rrrr',
       'ssss', 'tttt', 'uuuu', 'wwww', 'xxxx', 'yyyy', 'zzzz'],
      dtype='object')
Index(['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee', 'ffff', 'gggg', 'hhhh', 'iiii',
       'jjjj', 'kkkk', 'llll', 'mmmm', 'nnnn', 'oooo', 'pppp', 'qqqq', 'rrrr',
       'ssss', 'tttt', 'uuuu', 'vvvv', 'wwww', 'xxxx', 'yyyy'],
      dtype='object')
```
さっきと同様の表示をしましたが、列の数が多くなると、目視で比較することが難しくなります。どうやればよいか、色々検索しましたが、最初に述べた通りいい方法が見つからなくて、時間がかかりました。（カラムの列の中を比較するとかのやり方は出てくるのですが・・・。）
そこで、以下のようにやれば、うまく表示ができます。

## カラム数が多い場合のカラム名の差分を確認する方法（これが正解）

```
[in]
# データフレーム同士のカラム名の差分を取得・比較する方法
# trainにあって、testにないものを表示する
print(list(filter(lambda x: x not in test.columns, train.columns)))
# testにあって、trainにないものを表示する
print(list(filter(lambda x: x not in train.columns,  test.columns)))

[out]
['zzzz']
['vvvv']
```
どうでしょう。タイトルの目的は果たせました。おつかれ様です。
もっといいやり方あったら、コメントで教えて下さい。

追記）setを使っても、同様に確認出来ます。コメントありがとうございます。

```
[in]
print((set(train.keys()) - set(test.keys())))
print((set(test.keys())  - set(train.keys())))

[out]
{'zzzz'}
{'vvvv'}
```
angular materialのダイアログがデーターを受け渡すと空白になってしまう時のメモ

angular materialのダイアログがデーターを受けわたすと空白になってしまった時のメモ。
僕の場合空白になっていたと思われる理由が2つ。
僕は初心者なので悩みましたができる方はすぐわかると思います...

- export interface data {...} のdataの名前とthis.dialog.open内のdataの名前が違う
- 表示する方のhtml内では{{hoge}}ではなく{{data.hoge}}

(dataは各自使用した名前）
これで３日悩んでいました。

#1つ目

(↓これが動かなかった方)

```typescript

export interface Dialogdata {
  title: string;
  message: string;
}

...

this.dialog.open(hogedialogComponent,{
              width:'300px',
              data:{title:"にゃーん",message:"わーん"}
         });
```

(↓これが動く方)

```typescript

export interface data {
  title: string;
  message: string;
}

...

this.dialog.open(hogedialogComponent,{
              width:'300px',
              data:{title:"にゃーん",message:"わーん"}
         });
```

exportした名前と使用してる名前が違った。

#２つ目

（動かなかった方）

```typescript

<mat-dialog-content style="text-align: center;">
{{message}}
</mat-dialog-content>
```
(動く方)

```typescript
<mat-dialog-content style="text-align: center;">
{{data.message}}
</mat-dialog-content>
```

#あとがき
簡単なミスですが３日迷ったのでメモに残しておきます。お疲れ様でした。
サービスやアプリを作りたいけどアイデアが思い浮かばない時の突破方法

# 目的

- 「何かを作りたいけど案がない。。。」というときの筆者なりの打開策をまとめる

# 考え方

1. 自分が最も興味のある分野(趣味)と全く別のサービスを掛け合わせてみる。
  - 例えば、「趣味」×「SNS」等々
  - 思いのほか突飛な組み合わせがニッチなニーズを埋めたりすることもあるのでためらわずどんどん案を出そう！
1. 趣味の中で課題に感じていることを解決するサービスを作る。
  - どんな内容でもOKなのでとにかくかきだしてみる
1. 生活で自分が課題に感じているものを書き出してみる。
  - 自分で課題に感じていることは大抵同じことを思っている方がいる
1. ユーザをより具体的に想像する。
  - 例として一眼レフ初心者向けの何かしらのサービスを作ろう！と思い立ったときに利用者を性別、年齢、興味度合いなど詳しく設定する
  - 設定した利用者がどんなことに課題を感じているかでサービスを決める

# サービスの案を出す時に最初に考えないほうが良いこと

1. 先に実現可能か考える
  - 案を出す時にはこのことを考慮しないでバンバン案を出したほうがよい。
  - とりあえず案を出しその中から精査したり組み合わせたりできるため案は多い方がよい。
1. 既にあるサービスだから作ることを諦める
  - 既存のサービスがあるなら、そのサービスに足りてない部分をカバーできるようなサービスを考えればOK
  - むしろ競合があった方が欠点などを上げやすい

# ある程度アイデアが出てきたら考えること

- そのサービスを使用する人を詳細情報まで設定する。
  - 例えば、「一眼レフに興味のある、地方に住む、20代の男女」や「自分に合った化粧品選びをしている、30代の女性」や「宴会の予約を上司から頼まれた、40名ほどの部署の新入社員の男性」などとにかく詳しく設定するこが重要！
  - 細かく設定する目標を設定することによりこの後まとめる課題などがより具体的に出てくる。
  - アイデアを出す段階を重複することもあるが、さらに深堀り設定することが大切である。
- サービス自体やサービスがカバーしている内容の課題を挙げる。
  - 具体的に挙げた使用者がどんなことに課題を感じているかを挙げる。
  - 既存のサービスにたいしての課題でもOK
  - 題材に挙げている業界に対してでもOK
  - とにかくたくさん文字にする。
- 前述の課題をどのようにして解決していくかを考える。
  - 前述した課題に対して自分のサービスではどのように向き合ってどのように解決するのかを具体的に書く
- 競合サービスに負けない圧倒的な優位点を挙げる。
  - 課題解決の内容と重なってもOK
  - 絶対的な優位性をいろいろな角度からまとめる。
  - 使いやすさ、処理の速さ、メンテンナンス性、などなど多くのアプローチから考えてみる。
  - 具体的なサービス内容もこのあたりで煮詰められるとよりOK
- 作るものの第一目標を決める。
  - どこまでのサービスを提供できたら完成にするのかを考える。
  - 具体的に考える&段階を踏み考えることにより実装やコーディング時に迷子にならなくて済む。
  - アイデアがたくさん出てきて実装したいサービスがあった場合第二、第三目標を作ることもよい。
  - 第一目標は低めに具体的に設定することがコツ
エンジニアスタンプラリー～フロントエンド編＃5

## 企画主旨
[Frontend Developer Roadmap](https://roadmap.sh/frontend)をひたすら巡回する企画 
詳しくは[こちら](https://qiita.com/tonchan1216/items/8d5f072cf769dfe1bc4f)

## 今回の実施内容
CSSフレームワーク
BootstrapはCSSフレームワークというカテゴリ。初耳。

## CSS Frameworks

#### Bootstrap
yarn経由でBootstrapやPopper.jsをインストール。
CDNから引っ張る時代は終わったのかしら。
公式サイト[Overview Bootstrap](https://getbootstrap.com/docs/4.3/layout/overview/)からいくつかの要素を導入。
主にはGridシステムを使用。Flexboxで頑張ったのは何だったのか。

```html:index.html
    <section id="contents" class="row">

      <section class="col-md-9 row">
        <article class="skill col-lg-3 col-md-4 col-sm-6">
          <h3>HTML</h3>
          <p><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">STAMP</a></p>
        </article>

        <article class="skill col-lg-3 col-md-4 col-sm-6">
          <h3>CSS</h3>
          <p><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">STAMP</a></p>
        </article>
      </section
      <aside class="col-md-3 row">
        <section class="col-md-12 col-sm-6">
          <h3>Weather News</h3>
          <p id="weather-news"></p>
        </section>

        <section class="col-md-12 col-sm-6">
          <h3>Add Skill</h3>
          <p>
            <input type="text" name="title" id="skill-box">
            <input type="button" value="Add" id="add">
          </p>
        </section>
      </aside>

    </section>
```

## 成果物
デザインをちゃんとレスポンシブに。前回までのCSSだいぶ削除した（無駄骨）。
https://tonchan1216.github.io/WDR-frontend/v5/
https://github.com/tonchan1216/WDR-frontend/tree/v5.0
[SwiftUIスケッチ] Slackのサインインボタン

SwiftUIの練習がてらスケッチしてみる。

<img width="219" alt="Screen Shot 2019-09-28 at 1.55.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24979/dff4e587-002b-91ca-f604-9bdaeb8d564d.png">

こういうやつ
https://api.slack.com/docs/sign-in-with-slack

```swift
struct SignInWithSlackButton: View {
    let action: () -> Void
    var body: some View {
        Button(action: action) {
            HStack(alignment: .center) {
                Image("Slack")
                    .renderingMode(.original)
                    .resizable()
                    .frame(width: 24, height: 24, alignment: .center)
                HStack(spacing: 0) {
                    Text("Sign in with ")
                    Text("Slack").fontWeight(.bold)
                }
            }.padding(EdgeInsets(top: 6, leading: 8, bottom: 6, trailing: 8)).overlay(
                RoundedRectangle(cornerRadius: 6)
                    .stroke(Color.secondary, style: StrokeStyle(lineWidth: 1))
            ).foregroundColor(Color.primary)
        }
    }
}

```

<img width="485" alt="Screen Shot 2019-09-28 at 2.14.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24979/d0602121-b6ec-a39d-36ed-4c09a72d608e.png">

## もやもやするところ

- 文字サイズ大きい時は画像も大きくしたい
- 文字途中で太字にするのはHStackでいいのかな
【Nuxt.js】Nuxt開発サーバにローカルネットワークからアクセス

# コマンド
```shell
npx nuxt --hostname 0.0.0.0
```
Nuxtで開発中の画面を、スマホ実機でさくっと見たかった。
※ @nuxt/cli v2.9.2 時点

Nuxt開発サーバは、デフォルトではホストマシン内からのアクセスに限定されている。
特別なホスト番号「0.0.0.0」を指定すると、LAN内アクセス可能なホストアドレスの解決してくれるとのこと。


# ソース・その他の方法
設定ファイルに記述する方法などはこちらにありました。
https://ja.nuxtjs.org/faq/host-port/
【自分用メモ】CookieとSessionについて

## Cookieについて
- Cookieとは、ユーザーの情報を一時的に保存するテキストファイルのことである。
- Cookieを利用することによって、サーバー側からクライアントに特定のパラメータを覚えさせることができる。
  - クライアントは同じサーバーにアクセスする際、覚えておいたパラメータをHTTPリクエストに付与して送信する。
  - ex.) ショッピングサイトに再訪問したときにすでにログイン状態になることができる。

### Cookieの発行単位
- Cookieは、ブラウザごとに発行される  

### 別タブの扱いについて
```
同じブラウザで別タブを開いた時は、Cookieは一緒  
違うブラウザの場合は、新たにCookieが発行される
```

## セッションについて
### HTTPのセッションとは
セッションとは、Webサイトにアクセスして行う一連の流れのこと
### セッションIDについて
- セッション管理のために付与される固有の識別情報
- セッションIDはユーザーがアクセスやログインしたときに発行される
- 一定時間アクセスがなかったり、ログアウトするとセッションIDは破棄される

### セッション管理が必要な理由
- HTTPは、クライアント/サーバー間でリクエスト/レスポンスが完了したら接続が切断される
- サーバーに複数のリクエストを送っても同一のクライアントから送信されたものであるかどうか判断できないため  

## フォームの基本的な流れ
Cookie、セッションについて具体的にどういうことに使われているのか、  
例として、申し込みフォームの基本的な流れをあげる。フォームの基本的な画面として  
- 入力画面
- 確認画面
- 完了画面  

がある。流れは  
1. 初めてユーザーが入力画面で情報を入力して、送信ボタンを押す
2. サーバーが、セッションIDを発行し、tempファイルに保存する。
3. サーバーがユーザーに確認画面と、CookieにセッションIDを保存させる
4. ユーザーが確認画面の完了ボタンを押す。このとき、ユーザー側は、Cookieをサーバーに送る
5. サーバーは、受信したCookieを元に完了画面を送信する
6. ユーザーは完了画面の完了ボタンを押す。このとき、Cookieもサーバーに送信する
7. サーバーは、Cookieを元にセッションを終了させる  

となる
Java Silver受験直前・ひっかけ問題チェックシート

# この記事は？
Oracle Java SE8 Silverの試験対策を行った際に、ミスリードや単純ミスで間違ってしまった問題のパターンをリストアップしました。

## 配列

```java:配列
 int[] nums;
 nums = {1, 0}; //コンパイル・実行成功
 nums = {1.0}; //コンパイルエラー
```

三行目をピリオドとカンマを見間違えてしまったパターンです。
カンマの後はスペースが入るので気を付ければ見間違えない…と思います。

## Stringのメソッド呼び出し

```java:String
  String hoge = " ho ge ";
  hoge.trim();
  System.out.print(hoge); //「 ho ge 」が出力される
```

Stringのメソッド(特にtrim,replaceなど変換)を呼び出してはいるけれども変数に再代入していないパターンです。
上記例は他の処理を削っていますが、他の文字列操作に埋もれてしまうと意外と見落としてしまいます。

## String型でなくStringBuilder型をreturn

```java:StringBuilder
public String hoge(){
  StringBuilder huga = new StringBuilder("huga");
  return huga.append(" huga");
}
``` 
文字列操作を行った後、脳内で勝手にStringBuilderをStringにキャストしてしまうパターンです。
選択肢にも複数紛れているので、StringBuilderを使う場合は特に戻り値の型に気をつけましょう。

# ローカル変数名とフィールド名が一致
```java:変数名
 class Hoge {
   int a;
   void huga() {
    int a;
    ...
    System.out.println(a);
   }
 }
```
IDEだと色分けが出来るため分かりやすいですが、単色だとローカル変数の存在を忘れがちです。
フィールドを参照するならthisが付くので分かりやすいのですが…

## 継承の継承(メソッドの実装)
```java:継承の継承
abstract class A {
    abstract void hoge();
}

abstract class B extends A {
    void huga() {};
}

class C extends B {
}
```
この場合、クラスCが原因でコンパイルエラーとなります。
原因はクラスAのメソッドhogeを実装していないことです。
クラスBはクラスAを継承してはいますが、抽象クラスのためhoge()を実装せずともエラーにはなりませんが、
クラスCは具象クラスのため、実装が必要となります。

## 明示的にコンストラクタを定義している場合
上記の場合、引数無しのコンストラクタは自動生成されません。
しれっと呼び出されてると見逃しがちですが、コンパイルエラーとなります。



# 付録：学習するまで知らなかったこと
## toStringによる自動変換
文字列結合の時とかにtoStringが呼ばれてStringに暗黙的に変換されます。
明示的に変換することが多く、暗黙変換に頼る機会がそこまでなかったと感じています。
(StringBuilder型とString型を+演算子で結合する、なんて問題も出てきますが、役立つ日は来るんでしょうか？)

## ArrayListのadd(int index, object obj)
挿入位置を指定しなければならないシチュエーションがあまりなく、addメソッドで指定可能であることを知りませんでした。
~~メソッドを逐一暗記するよりはリファレンスの読み方を身に付けた方が実用的ではとは思います。~~

## meinメソッドにthrowsを記述しても良い
内部で処理しきらない方が良いパターンもあるのでしょうか？

# 試験対策を実施した所感
今まで触れてこなかったパターンを多く学ぶことが出来ましたが、実務上活用出来るかというと少し微妙なところではあります。
コンパイルを通せて動作はするけれどもアンチパターンである、といった題が多く、そういったパターンを初学者が「コンパイル・実行可能である」と学習してしまうのは問題があるのではと感じます。
そのため、本試験は言語の理解を深めることが主であり、良いプログラムを書けるようになることが目的ではないと理解した上で対策に取り組むべきだと考えます。
~~それとIDEとリファレンスの偉大さを痛感いたしました。~~
CoreNFCでNFC Type F(Felica)をリードしてみた。

#前回補足
[前回の投稿](https://qiita.com/HAL27241/items/e567f021c99e10d148a7)で重要だけど、ちょっと説明不足だったかなって思うところを補足します。
##NFC TypeA/B/F
NFCのカードには大きく分けてType A/B/Fがあります。他にもあるみたいなんですが、かなりマイナーなのでちょっと省略します。
Type A/Bは運転免許証とかマイナンバーなんかの公共的なカードによく使われていて、国内で流通しいるのはほぼType Bと思っていいみたいです。
一方、Type FはFelicaとも言われているもので、SuicaとかPiTaPaとかの交通系ICカードによく使われています。

##AID、System Code
NFC Type A/BだとAID、NFC Type FだとSystem Codeという情報があって、これを入り口にしてカード情報にアクセスします。
CoreNFCではこの情報を事前にアプリに組み込んんでおく必要があります。というかこれが無いとCoreNFCではスキャンすら成功しないので補足でした。
この設定がプロジェクトの設定の「info」タブで項目を追加するものですね。
以下、ご参考。
Type A/BのAID
![typeB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369600/608dfb76-a791-8582-6757-08030d5cb3f6.png)
Type FのSystem Code
![typeF.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369600/b064f519-e51d-693c-6e73-9ef8f198ead8.png)
#NFC Type F
さてさて本題のType Fカードをリードしてみるんですが、一応、以下の内容はPiTaPaで動作確認したってことをお断りしておきます。
でも、ほとんどの交通系ICカードでいけると思うんですけどね。

##PiTaPa
まずはカードの仕様を確認しましょう。
以下のページを参考にしました。記録情報っていう項目が重要な情報です。
https://www.wdic.org/w/RAIL/PiTaPa

##接続、サービス取得、リードの実装
実装は[前回](https://qiita.com/HAL27241/items/e567f021c99e10d148a7)の続きってことで、カードのスキャンができたところからです。
スキャンが成功すると以下のデリゲートメソッドが呼ばれます。

```swift
func tagReaderSession(_ session: NFCTagReaderSession, didDetect tags: [NFCTag]) {
}
```
この引数`[NFCTag]`によるとカードとかタグは同時に複数を読めるみたいですね。
とりあえず必要なものは１つ目なので、こいつに向かって接続しましょう。

```swift
let tag = tags.first!
session.connect(to: tag) { (error) in
}
```
こんな感じでカードに接続できます。
カードに接続できたら次にサービスを取得したいんですが、そのためには`tag`を`NFCFeliCaTag`型にする必要があります。

```swift
guard case .feliCa(let feliCaTag) = tag else {
	return
}
```
とりあえず、こんな感じでしょう。
そうしたら`felicaTag`を使ってサービスを取得できるようになります。
どれでも良いのですが、今回はカード種別を取得してみたいので、サービスコードは`0x008B`です。
そうそう、サービスコードの指定はリトルエンディアンにするみたいです。

```swift
let serivces = [Data([0x8b, 0x00])]
feliCaTag.requestService(nodeCodeList: serivces, completionHandler: {
	(nodes, error) -> Void in
}
```
そして１ブロックをリードします。

```swift
let serivces = [Data([0x8b, 0x00])]
let blockList = [Data([0x80, 0x00])]
feliCaTag.readWithoutEncryption(serviceCodeList: serivces,
								blockList: blockList,
								completionHandler: {
									(status1, status2, dataList, error) in
									
									for data in dataList {
										print("\(data[8])")
									}
}
```
長かったですが、これでカード種別をリードできました。
そして出力結果は`34`(0x22)となり無事に「PiTaPa」で、しかも「関西私鉄/バス」ってことがわかりました。
#まとめ
とにかく初心者としてはカードの仕様がよくわからず、ちょっと厄介でしたが、段階的にでも読めるようになると楽しくなってきました。
それと実装は簡単なんですが、非同期関数の連続で、ストレートに作るとエラーとか例外の処理ですぐに複雑になるので気を付けたいですね。
まあ、通信系のAPIをよく使っている人なら問題ないでしょう。

他にもAPIの引数から新幹線の乗り継ぎみたいにカード２枚以上の同時アクセスができそうなこともわかりました。
#参考文献
https://www.wdic.org/w/RAIL/サイバネ規格%20%28ICカード%29
https://www.wdic.org/w/RAIL/PiTaPa
GSAP ScrollToPluginを利用してwebpackのproductionモードでbuildとエラーがでる

webpackでGSAP ScrollToPluginを利用した際にproductionモードでbuildした場合にエラーが発生。
（developmentモードでは正しく機能する）

# 例
```js

import { TimelineMax, ScrollToPlugin } from 'gsap/all';

〜中略〜
TweenMax.to(window, 0.4, {
  ease: Power1.easeOut,
  scrollTo: {
    y: 0,
    autoKill: false
  }
});
```
このようなコードをproductionモードでbuildすると、下記の様なエラーが発生し機能しない。

```
Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.
```

#解決策
const scrollPlugin = ScrollToPlugin;
を追加することで解決。

```js

import { TimelineMax, ScrollToPlugin } from 'gsap/all';
const scrollPlugin = ScrollToPlugin;

〜中略〜
TweenMax.to(window, 0.4, {
  ease: Power1.easeOut,
  scrollTo: {
    y: 0,
    autoKill: false
  }
});

```
conda-forgeのgeopandasをインストールするときは、チャネルプライオリティをstrictにする

### 結論
チャネルプライオリティをstrictに設定してから、conda仮想環境を作成し、geopandasパッケージをインストールする。

```
$ conda config --set channel_priority strict
```

### 問題
conda-forgeのgeopandasを使用したい。
condaバージョン4.7で作成したconda仮想環境では、geopandasをインストールしてimportすると、ImportErrorが発生した。

```console
$ conda --version
conda 4.7.12
$ conda config --get channels
--add channels 'defaults'   # lowest priority
--add channels 'conda-forge'   # highest priority
$ python -c "import geopandas"
ImportError: libpoppler.so.76: cannot open shared object file: No such file or directory
```

condaバージョン4.5で作成したconda仮想環境では、geopandasをインストールしてimportしてもエラーにならなかった。
condaバージョン4.7で作成したconda仮想環境では、geopandasをインストールしたときに、defaultsチャネルのfionaパッケージがインストールされてしまって、エラーになっているようだ。

### 解決
参考URL [Using multiple channels](https://conda-forge.org/docs/user/tipsandtricks.html#)

condaバージョン4.6から、チャネルプライオリティの設定方法が増えている。
チャネルプライオリティを strict に設定し、conda仮想環境を作り直したところ、エラーが発生しなくなった。

```console
(base) $ conda config --add channels conda-forge
(base) $ conda config --set channel_priority strict
```

この設定のもと、作成したconda仮想環境では、エラーが発生しなくなった。

```console
(base) $ conda create -n myenv2 python=3.6
(base) $ conda install -n myenv2 geopandas
(base) $ conda activate myenv2
(myenv2) $ python -c "import geopandas"
(myenv2) $
```
【Vuetify2】Vuetifyのreset.cssは？ → ress.css

# 結論：ress.css
Vuetifyが採用してるreset.cssの種類は「ress.css」でした。
※ Vuetify v2.0.19 時点

Vuetify使うときに、果たして別途reset.cssって必要なのか…？ と気になって調べました。
Vuetifyの中に内包されてるということなので、要らないね！

# ソース
### GitHub
ress.cssをベタ書きしてるファイルがありました。
https://github.com/vuetifyjs/vuetify/blob/v2.0.19/packages/vuetify/src/styles/generic/_reset.scss

```scss:_reset.scss

/* ! ress.css • v1.1.1 - MIT License - github.com/filipelinhares/ress */

/* # =================================================================
   # Global selectors
   # ================================================================= */

   html {
    box-sizing: border-box;
    overflow-y: scroll; /* All browsers without overlaying scrollbars */
    -webkit-text-size-adjust: 100%; /* iOS 8+ */
  }
...
```

### ドキュメント
FAQの中に言及がありました（2019/09/28時点）。
https://vuetifyjs.com/en/getting-started/frequently-asked-questions#the-scrollbar-is-showing-even-though-my-content-is-not-overflowing-vertically

> Vuetify uses the `ress reset` which by default turns on the html scrollbar to normalize behavior between browsers.
Elixirに入門してみる

# 概要

技術書展7 にて Elixir に関する書籍を入手したため、入門してみました。
尚、書籍内では MacOS, Linux が推奨されておりますが、折角なので Windows環境 で実践してみました。


# 参考
以下、参考にさせていただきました。
「PhoenixLiveView と Nerves をさわる Elixir へのいざない」
https://techbookfest.org/event/tbf07/circle/5173194898014208

# 環境
- Windows10
- IntelliJ IDEA Ultimate 2019.2
- Elixir Plugin (https://plugins.jetbrains.com/plugin/7522-elixir)

# 概要
Chocolaty で Elixir をインストールしてみたところ、mixコマンド実行時にエラーが発生しました。
エラーの内容を確認してみると、erl.exe の参照が 実際のインストールパスである Program Files でなく Program Files (x86) となっておりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353069/9096fde4-7a19-d4e6-afd4-4c936928359a.png)

Program Files に シンボリックリンク を設定することでコマンド自体は通るようになりました。
ですが、現時点 (2019年9月) では素直に 公式サイトのWindowsインストーラ を利用した方が良いかと思います。

プロジェクトの作成は 下記コマンドで実行します。

```
mix new sample
```

作成後、IntelliJ より インポートを行います。予め Elixirプラグイン の導入が必要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353069/625d0a38-c149-5020-7cd2-337cf7016811.png)

参考までに SDK の設定画面を添付します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353069/15364bda-a6eb-2dc7-51b2-d1a8e55ac64e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353069/3fb7ca1a-7cc0-588e-c6b9-179b18c2a8b3.png)

書籍のチュートリアルに従ってフィボナッチ数列の関数を実装してみました。
関数にもパターンマッチングがあるのが、凄いですね。

```elixir:sample.ex
  def fib(0), do: 0
  def fib(1), do: 1
  def fib(x) when (x >= 2) do
    fib(x-1) + fib(x-2)
  end
```

関数を呼び出す関数も実装します。
匿名関数は & で省略表記出来るようなので、試してみました。

```elixir:sample_test.exs
  test "fibonacci number" do
    expect = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]
    result = Enum.map(0..10, &(Sample.fib(&1)))
    assert expect === result
  end
```

続いて、Phonenix のお試しです。
Phonenix のインストールは、下記コマンドで実行します。

```
mix local.hex
mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
```

Webプロジェクトの作成は 下記コマンドで実行します。

```
mix phoenix.new sampleweb --no-ecto
```

サーバの実行は下記の通り設定することで、IntelliJより起動することが出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353069/c0fdad09-34d1-ef3e-3690-fcbcbc1cb1c8.png)

構築後のサンプルWeb画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353069/7a9b12c3-7634-dcb3-c545-99fbc4ae0379.png)

# コードサンプル
サンプルコードを Github にアップしています。
https://github.com/tYoshiyuki/elixir-study

# 課題
IntelliJ より デバッグ起動 すると起動時にエラーが発生し、ブレークポイントによる動作確認が上手く出来ませんでした。
(※) 別途、調査したいと思います。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353069/f3afb599-735f-12c7-e25e-85bf97bfd637.png)