OmniAICreator/Qiita-1.07M huggingface dataset:
ポートフォリオ用参考サイト

##[ゴーストキッチン](https://www.ghostkitchens.tokyo/)

かなりBasicな作りだが、洗練されていて美しい。
若干なんのサイトなのかわかりづらいのが弱みな気がする。

##[AtCorder](https://atcoder.jp/?lang=ja)

解けた！を世界に届けたい
のキャッチコピーがいい。

##[Threes](https://three-s.space/)

最初の方にメリットが書いてあるのでとてもわかりやすい。
デザインは若干素人臭い。

##[Kyash](https://www.kyash.co/kyashcard)
流行りのオンライン決済カードのサイト。
UIが洗練されている。若干おしゃれにこだわりすぎて年齢層高い人には受けなさそう。
Mysql2::Error::ConnectionErrorが出た場合

##localhost:3000で出たエラーを解決させました

自作アプリの開発中に起きたエラーを紹介します。

#環境
・macOS
・Rails 5.2.4.3
・Ruby　2.5.1

今日（投稿日）はエンゼルスの大谷投手が693日ぶりに登板と言う事で、めちゃくちゃテレビを見たい気持ちを抑えて、いつも通りの朝活を行う事に。。。

そして、自作アプリを開くとこんな画面に遭遇しました。
<img width="1013" alt="スクリーンショット 2020-07-27 7.32.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629627/edf03920-536a-e433-297c-1890006ff294.png">

へ？

何だこれは？？

一瞬頭が真っ白になってしまいました。

なかなか自作アプリ開発が思う様に進まない中で、もはや自分でアプリを見ることすら出来ないのかと愕然。

５分くらい絶望した後に、取り敢えずエラーの解析から始めました。

#Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)って何？？
エラーの内容を調べていると結構同じ様なエラーに遭遇されている方が多かったので、その記事を見ていくと、

クライアント（自分のPC）　→　/var/lib/mysql/mysql.sock　にデータを見に行こうとしたら、そんな場所ないじゃん。って感じのエラーなんだと理解。

#socketとは
プログラムとネットワークを結ぶ接続口。仲介役。仲介業者。仲人。合コンで言う幹事。
![14102808098_o.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629627/a05fffe2-275f-07c8-45d6-5a2184a2360d.jpeg)

って事で正しい出入り口（ソケット）を探す旅に

##socketってどこにあんの？？

他の記事を読み漁り、socketの存在を調べました

特に参考にさせてもらった記事
[Can't connect to local MySQL server through socket '/tmp/mysql.sock'](https://qiita.com/kooohei/items/145e2fa32ba681ee7ddb#%E8%AA%BF%E6%9F%BB)

記事を読み比べる中で

```
'/tmp/mysql.sock'
'/var/lib/mysql/mysql.sock' 
```

と言う２つのソケットを見比べて、

「自分のエラーの場合は'/var/lib/mysql/mysql.sock'に行こうとしたが、そんな場所はないと言われているので、そこを見つけて修正すれば良いのか！！」と推測。

で、どこに書いてあんの？

##解決法

この記事を読んで私も解決しました
[【Rails】ローカル環境におけるmysql接続エラー対処法【Can't connect to local MySQL server through socket】](https://qiita.com/ngron/items/306ffbf6a0e3d0abd385#sock%E3%82%92mac%E3%81%AE%E7%92%B0%E5%A2%83%E3%81%AB%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B)

```database.yml
#修正前
development:
  <<: *default
  database: データベース名_development
  username: root
  password: <%= ENV['DATABASE_PASSWORD'] %>
  socket: /var/lib/mysql/mysql.sock

#修正後
development:
  <<: *default
  database: データベース名_development
  username: root
  password: <%= ENV['DATABASE_PASSWORD'] %>
  socket: /tmp/mysql.sock

/var/lib/mysql/mysql.sock　→　/tmp/mysql.sock　に変更してます

```
コードの修正を行ったので、再起動させます。

```
rails s
```

これでソケット名が正しくなったので、無事に閲覧が出来ました！！

##原因
database.ymlですが、特に自分で何かを記述した訳ではなくて、何かしらの教材や記事を
コピペしてしまう事で、起きやすい事象なのかと思いました。
その分、最初はすごく焦りましたが、今まで気にしなかった所を考えたり、エラー文を調べていく中で、同じ様なエラーに遭遇されている方が多かった事も、自分の中では収穫でした。ymlを一度見てもらうのも良いかも知れません。

最後にsocketの

```
'/tmp/mysql.sock'
'/var/lib/mysql/mysql.sock' 
```
の箇所ですが、使われている方によっては、

```
/tmp/mysql.sock →　/var/lib/mysql/mysql.sock
```

が正解のパターンも多くあると思いますので、まずは自身のsocketの所在を確認してみてください！！
MacでホストからDockerコンテナにlocalhostでアクセスできなかった話

# 事象
Macでdockerの公式ドキュメントに従ってもnginxのコンテナにlocalhostでアクセスできない :sob:

公式ドキュメント
[Networking features in Docker Desktop for Mac](https://docs.docker.com/docker-for-mac/networking/)

# 環境
- macOS Catalina 10.15.6
- docker desktop community
    - Version 2.3.0.3(45519)
    - Channel stable
    - Engine 19.03.8
- eset CYBER SECURITY PRO
    - Version 6.8.300.0

# 原因・解決方法 :relaxed:
こちらの回答の通り、セキュリティソフトのファイアウォールが原因でした
[teratail: docker desktop for macでホストからコンテナに接続できない](https://teratail.com/questions/258373)

# 所感 :rolling_eyes:
この答えに行き着くまでに様々なことを疑いました

- コンテナに対するポートフォーワーディング
- コンテナのポート公開設定
- コンテナのOS上のファイアウォール設定
- コンテナに割り当てられたIPアドレスでのアクセス

などなど。
しかし、どれもこれも解決に至らず。。。

セキュリティソフトが原因なのは盲点でした。
これまでの経験でも同じようなことはあったのですが、最近はなかったことだったので。

セキュリティソフト以外に原因が考えられる場合は下記サイトが参考になると思います。
[Dockerコンテナで起動したサーバにアクセスできないときの確認と対処方法](https://web.plus-idea.net/on/docker-web-server-access-denied/)

~~＃なんか今回は他所のサイト紹介みたいになっている。。。~~
SonarQube

# How to implement the SonarQube into your local machine

OS:Windows 10

Eclipse version:
 Spring Tool Suite 4 
 Version: 4.5.1.RELEASE
 Build Id: 202001211336
 OS: Windows 10, v.10.0, x86_64 / win32
 Java version: 1.8.0_241

Java on host pc: OpenJdk 11


SonarQube version:
Community Version: 8.4.1
https://www.sonarqube.org/downloads/

## Installing a local instance of SonarQube
https://docs.sonarqube.org/latest/setup/get-started-2-minutes/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/5667ea61-453d-080f-4a0d-eb01526cd74c.png)

### Install SonarLint
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/f1313025-7a2d-e099-b1ac-f224b08618c0.png)

As soon as the installation is done, right click on the target project, select Sonarlint, click analyze.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/26ee0a81-7243-46eb-8f1c-bc0985b35f14.png)

Then the following page will be available.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/25426523-f4be-8c56-53f6-3c30d19cb655.png)

## Install a SonarScanner and send the local analyze report to the remote server
Install a Sonar-scanner from the link below
https://docs.sonarqube.org/latest/analysis/scan/sonarscanner/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/511af6d6-1627-62be-1e18-e7e27224f69e.png)

Unzip it to the folder which is the same as Sonarcube
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/721d070f-4b15-b9e6-fd89-1cf27da0aa7c.png)

add the key-value as follows:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/79106751-b83c-4037-1850-ee1101e173a8.png)
sonar.sources should be the target project folder.
Note: Not "\", but "/".

Then execute the startsonar bat file to let the sonarqube server be up.
C:\......\StartSonar.bat

Execute the sonar-scanner.bat in the target project path.
C:[target project path]>C:\sonarqube\sonar-scanner\bin\sonar-scanner.bat

Then you will get the sonarcube report on your local machine.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/1f396bb6-f962-6848-8a83-9ef4bd233aba.png)

## Install external plugins from market place
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/9ca4342f-1713-7554-1927-0bc67f4ffe10.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399736/b8b32121-6d0d-a4bd-a148-c5c9155d4513.png)

Checkstyle, Findbugs, Dependencycheck should be installed from the market place to enhance the security scan.


参考した外部リンク：
https://t246osslab.wordpress.com/2016/11/20/sonnarqube%E3%81%A7%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%93%81%E8%B3%AA%E3%82%92%E8%A7%A3%E6%9E%90%E3%81%99%E3%82%8B/
役立ちそうなサイト・ツール・フレームワーク等まとめ


##[「COLOR SUPPLY」](https://colorsupplyyy.com/)
2〜4色の組み合わせを作ることができる。サイトデザインをする際に役立ちそう。

##[WhatRuns](https://ggle.io/3HdV)
サイトになんのプログラミング言語やサーバーが使われているか解析してくれるGoogle拡張機能

##[画面録画アプリ](https://getkap.co/)
Swell開発者の方が紹介してた神らしいアプリ。PF完成したら紹介動画撮りたいから記録用。
DLはしたよん。

##[CloudFlare](https://bit.ly/2PaffGF)

サーバーの負荷を下げてくれる無料のCDN。
AWSにも「CloudFront」というCDNが存在するが、従量課金制なので、PFならCloudFlareでいい気がしている。詳しくは知らん。

✅CDNについて勉強できるサイト
[Web制作/運営の幅が広がるCDNを知ろう第1回](https://bit.ly/2Dnm3Om)

✅CloudFlare導入方法
[今すぐ使えるCDN〜初めてのCloudFlare導入](https://bit.ly/3feIjaK)

##[CalendlyとCarrdで作る予約サイト]

5分ほどで予約サイトを作れるらしい。

Calendlyで自分の予定を入力しておくとCarrdで作ったサイトに反映される仕組み。予約するときに決済させることも可能

Calendlyはまだ日本語未対応


##「Kubernetes(k8s」

Google のエンジニアによって開発および設計された、Dockerコンテナの管理をしやすくするプラットフォーム

✅Docker × k8s が学習できるサイト
[Kubernetes 入門](https://bit.ly/39GmWhn)

##[「無料でGo学習できるサイトまとめ」](https://bit.ly/2Djm8CQ)
故人ブログだが参考になりそう。GO勉強したい

##[sweetalert.js](https://bit.ly/2Xg5pY5)

paizaで使用されているjsフレームワーク。綺麗なアラートが簡単に実装できる。

##[株式会社STUDIO](https://bit.ly/3gkT4JL)
ノーコードのウェブサイト作成ツール?STUDIOの運営会社。サービスの方のサイトが重たすぎて離脱率高そうなのが気になるけど、恵比寿ガーデンプレイスにオフィスがあるから多分儲かってる。
noteで「webサイト制作のコツ」なども発信してくれているので参考になる。

###[東京大学の無料公開AWS講座](https://tomomano.gitlab.io/intro-aws/)


#コピペでいける系
###・　[コピペでいける映えるアニメーション](http://photoshopvip.net/121899)

###・　[Appleっぽいイケてる背景をコピペで作れるコピペサイト](https://coliss.com/articles/build-websites/operation/css/gradient-background-hue-css.html)

###・　[vue.jsで作れるコピペサンプル](https://madewithvuejs.com/vue-poll)

###・ [現役Vueエンジニアが参考にしているフロントエンド素材まとめおすすめサイト４選](https://bit.ly/2XWelCo)

###[「Creative Tim Bits」](creative-tim.com/bits)

bootstrapで作ったモダンで綺麗なコンポーネントが無料で見れる

カードやボタンのようなパーツ、LPやフォーム丸ごとなどがソースコードと一緒に掲載されてる


###[グラデーションカラーを探せるサイト](https://webgradients.com/)

#素材系

###・[ビジネス系ブロガーがよく使ってる素材サイト](https://undraw.co/illustrations)

###・[なをきさんが教えてくれた可愛い素材サイト](https://www.linustock.com/vectors)

#Git

・[Gitでよく使うコマンド集](https://coliss.com/articles/build-websites/operation/work/useful-git-commands-visualized.html)


#セキュリティ系
・[サイト内のhttpを探してくれる](https://www.drlinkcheck.com/)
ようさんが紹介してた。
【Processing】quadraticVertexとbezierVertexの違い

### 違い
quadraticVertexは2次ベジエ曲線でbezierVertexは3次ベジエ曲線です。ただし、1つ目のアンカーは前の頂点です。こちらのサイトが参考になります。
http://www.htmq.com/canvas/quadraticCurveTo.shtml
【Processing】Perlinノイズは逆向きに戻れない?

### 結果
<img width="251" alt="2020-07-27 (3).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269835/eaab994e-4c4c-a780-7521-3c4e879b5e22.png">
Perlinノイズに沿って動いた後のパーティクルの位置から、スタート位置を調べたいと思ったのですが、できないような気がしたので確かめてみました。普通に後ろ向きに進んだだけでは同じ位置に戻れないようです。良い方法があれば、コメントにてお願いします。
### コード
https://gist.github.com/Nekodigi/8f5a1dea37d738130a637de91f56368c
【学習メモ】 【typescript】パッケージExpectのエラー解消

#概要
東京ラビットハウスさんの書籍「[Effective React Hooks](https://booth.pm/ja/items/1477000)」で学習を進めていたところ、expectというパッケージでエラーが出たので、その解決方法について書きます。

#エラー内容
create-react-appで作成したアプリをnpm startで起動すると以下の内容のエラーが表示されます。

```
TypeScript error in app_name/node_modules/expect/build/index.d.ts(8,13):
'=' expected.  TS1005

     6 |  *
     7 |  */
  >  8 | import type { Expect, MatcherState as JestMatcherState, Matchers as MatcherInterface } from './types';
       |             ^
     9 | declare const expectExport: Expect;
    10 | declare namespace expectExport {
    11 |     type MatcherState = JestMatcherState;
```

#原因
typescriptのバージョンが古く、importでの型読み込みに対応していないかったことが原因でした。
create-react-appでインストールしたtypescriptのバージョンは3.7.5でしたが、importでの型読み込みが実装されたのはバージョン3.8.0以降のようです。

#解決方法
現在、typescrptの一番新しいバージョンは3.9.7なので、package.jsonのバージョンの指定を^3.9.7に変更してnpm installでパッケージを再インストールすると解決できました。




参考サイト
https://qiita.com/yoshimok/items/aff85cd72f7c62ce2369
https://github.com/microsoft/TypeScript
Drupalにチャットボットを埋め込む（Watson Assistantを使って）

 Watson Assistantに”WebChat＂という機能が追加されました。Watson Assistantで作ったチャットボットを自分のウェブサイトに埋め込める機能です
　早速Drupalのサイトに組み込んでみようと思います。
こちらの手順を参照にしました。https://qiita.com/ishida330/items/c0764d66306f9cab2c2b
実際に生成されたコードは上記とは若干違うのですがこんな感じです。

```
<script>
  window.watsonAssistantChatOptions = {
      integrationID: "42164788-27bb-4b93-9bc5-************", // The ID of this integration.
      region: "us-south", // The region your integration is hosted in.
      serviceInstanceID: "ffc34e03-6cc1-4e2d-88b2-************", // The ID of your service instance.
      onLoad: function(instance) { instance.render(); }
    };
  setTimeout(function(){
    const t=document.createElement('script');
    t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
    document.head.appendChild(t);
  });
</script>
```

やり方は色々あるかとは思いますが今回はカスタムブロックを作り上記コードをそこにそのまま入れてメインコンテンツの下あたりに入れました。
BOTというカスタムブロックを作ってソース表示にしてテキストをフルhtmlにしてコードを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/8e9023bb-0874-4006-435b-81d5c93f6b87.png)

そしてブロックレイアウトでMian page contentのしたに配置しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/794b2c35-dc3e-021a-d385-7ab81c9b30af.png)

以下のようにページの右側でチャットができるようになりました。これはWatson Assistantで作成したボットです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/a1830466-1580-aea7-5fcb-470955b35ec5.png)

ぜひお試しを
kaptでjavaの予約語のプロパティを使わないほうがいい

# TL;DR
**kotlin -> javaのcode generationを行うときは変数名にjavaの予約語は使わないほうがいいよ**

# kaptとは
- javaのAnnotation processorsをkotlinでサポートするpluginのこと
- android開発ではおなじみのdagger2やDataBindingで使用することが多い
- アノテーションを付けたクラスを付けてkaptを走らせるとアノテーションを読み取ってコードを自動生成してくれる

# 見つかった経緯
- androidの公式ORMのRoomを使用していてぶつかりました
- ある公開APIの返却のレスポンスjsonでキー名が**catch**というものをその定義のままRoomを使用してローカルDBに保存しようとしてたらビルドがこけて調べました

## Room
- RoomはGoogleが作っているSQLiteを抽象化してくれるライブラリです
- [公式HP](https://developer.android.com/topic/libraries/architecture/room?hl=ja)
- Roomは下記のように@Entityがついているclassをテーブル定義としてkaptでDAO等を自動生成します

```kotlin
@Entity
data class StringEntity(
    @PrimaryKey(autoGenerate = false)
    val id: Int,

    val catch: String
)
```


## 確認方法
- [サンプルプロジェクト](https://github.com/RyuNen344/room-catch)を作って試しました
- [entity](https://github.com/RyuNen344/room-catch/tree/master/app/src/main/java/com/ryunen344/room/column/db/entity)を用意しました
- entityの変数名をcatchにしてビルド
- 下記のようにビルド失敗になりました


```log
エラー: Entities and POJOs must have a usable public constructor. You can have an empty constructor or a constructor whose parameters match the fields (by name and type).
public final class StringEntity {
             ^
  Tried the following constructors but they failed to match:
  StringEntity(int,java.lang.String) -> [param:id -> matched field:id, param:catch -> matched field:unmatched]\room-catch\app\build\tmp\kapt3\stubs\debug\com\ryunen344\room\column\db\entity\StringEntity.java:9: エラー: Cannot find setter for field.
    private final int id = 0;
```

# 原因
- kaptでkotlinのコードから情報を読み取ってjavaコードへ変換する際にjavaの予約語とぶつかるため失敗するようです
- 既に同様(catchではなくabstract)の問題でissueあげて、won't fix張られてるものがありました
    - [issue tracker](https://issuetracker.google.com/issues/129374517)
    - [your track](https://youtrack.jetbrains.com/issue/KT-27804)
- void, catch, abstract, javaのprimitive型名にするとkaptが失敗することまでは確認しました

### 結論
**kaptだけでなくkotlinを書くときはjavaを意識して書いたほうが良い(当たり前っちゃ当たり前)**
【Mac】Macの時計のズレを修正する

<< [【Mac】MacOSの基本操作を覚える](https://qiita.com/hiroyuki-eguchi-0731/items/99a0d771fda18adac9f0)

# MacOSの時計がずれている

デスクトップの時間がずれていることに気づく。
気づいたときは20時前なのにデスクトップでは4時前とか記載されている。

# MacOSの時計のズレを修正する

まだインターネットにもつなげてないので時刻同期はされていないのだろうけど、極端すぎる。
環境設定が根本的におかしいのだろうとあたりをつけて設定変更してみます。

## 環境設定を確認する

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406574/43fea9c4-82da-790f-6192-be7ab96a508d.png)

時計の部分をクリックして表示されたメニューの["日付と時刻"環境設定を開く]をクリックする。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406574/b28ab763-41ea-9f2d-743e-1caff12b7b3c.png)

見事にアメリカ合衆国の設定になってますね・・・。

## 環境設定を変更する

直感的な画面なので変更してみます。

### ロックを解除する

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406574/6eff2a60-85ab-e7c8-0c04-f5f4b26d9f37.png)

- 画面左下の[変更するにはカギをクリックします。]をクリックする
- ロック解除のためユーザーIDとパスワードを入力して[ロックを解除]ボタンをクリックします。

### エリアを変更する

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406574/7fe2fe15-ce6e-e83b-cfe1-0ff1892a9bb7.png)

- 日本の時間にしてほしいわけなので、[日付と時刻を自動的に設定]の選択をアジアを選択する

でも、まだ時刻が期待した通りにならない。

### 時間帯を変更する

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406574/cc028330-f9f2-639a-3c99-2b67e3dcfd44.png)

[時間帯]のタブもあるので表示してみると、こちらの方が詳細に表示されています。

- [現在の位置情報に基づいて、時間帯を自動的に設定]のチェックボックスを外す
- 画面中央の地図で日本あたりをクリックする
- [最も近い都市]の選択で近しい都市を選ぶ

### 状態を確認して再び施錠する

[日付と時刻]のタブに戻って時間の状態を確認してみます。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406574/d411b98d-8244-2d73-4d3e-2aa815470d9d.png)

うまくいきましたね！！！
[変更できないようにするにはカギをクリックします。]をクリックして再度施錠する。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406574/d744ef3b-9e8c-c571-cdfa-15e048432194.png)

できました。
お疲れ様でした。

---

2020-07-27 初稿
WSL2で開発するための設定

## linux(ubuntu)のファイルの場所
エクスプローラーで以下の場所にアクセスすればOK
`\\wsl$`
CドライブはWSL上では次の場所にあるが`\mnt\c`、パフォーマンスが悪いので使わない方が良いらしい
https://qiita.com/v2okimochi/items/f53edcf79a4b71f519b1#%E9%96%8B%E7%99%BA%E7%94%A8%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AFwsl%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E5%86%85%E3%81%AB%E3%81%97%E3%81%A6%E3%81%8A%E3%81%8F


### Pathからwindowsの表示を除く
```shell:/etc/wsl.conf
[interop]
appendWindowsPath = false
```
https://qiita.com/v2okimochi/items/f53edcf79a4b71f519b1#wsl2%E3%81%AEpath%E3%81%8B%E3%82%89windows%E3%83%91%E3%82%B9%E3%82%92%E6%8A%9C%E3%81%8F
https://github.com/microsoft/WSL/issues/4234#issuecomment-505609403

### vimでコピペが自然に出来るようにする。
```shell
sudo apt purge vim
sudo apt install vim-gtk
```
https://qiita.com/v2okimochi/items/f53edcf79a4b71f519b1#vim%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%83%97%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%95%E3%81%9B%E3%82%8B
firebaseでデータにアクセスできなくなったらやること

firebaseのDBのルールタブをクリック。

すると以下のようなのが出てきます。


```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // This rule allows anyone on the internet to view, edit, and delete
    // all data in your Firestore database. It is useful for getting
    // started, but it is configured to expire after 30 days because it
    // leaves your app open to attackers. At that time, all client
    // requests to your Firestore database will be denied.
    //
    // Make sure to write security rules for your app before that time, or else
    // your app will lose access to your Firestore database
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2020, 7, 27);
    }
  }
}

```

この一番下の行に日付がありますね。

```
      allow read, write: if request.time < timestamp.date(2020, 7, 27);
```

これが`DBに接続できるリミット`です。

ですのでこの日付を未来の日付に設定します。


```
      allow read, write: if request.time < timestamp.date(2021, 7, 27);
```

こんなかんじです。
Unity 3D入門 #7 [アセット&敵の追加]

前回作った宝探しゲームを豪華にするために、新しいアセットの追加と妨害要素である敵を追加したいと思います。

建物アセット：Sun Temple
Sun Temple参考URL：https://www.asset-sale.net/entry/Sun_Temple

ここで、Sun Templeに入っている家を置こうとすると

```
'MinAttribute' is an ambiguous reference between 'UnityEngine.PostProcessing.MinAttribute' and 'UnityEngine.MinAttribute'
```

上のようなエラーが出てしまいました。 
これは、MinDrawer.cs内のMinAttributeを3箇所UnityEngine.PostProcessing.MinAttribute に変更すると解決しました。

MinAttributeエラー参考URL：https://qiita.com/ELIXIR/items/140ee125b3c52cc7251d


<img width="566" alt="スクリーンショット 2020-07-22 0.06.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670403/9dbf2279-f699-98cc-3233-0b596f14692d.png">

だいたいこんな感じの建物ができました。
現時点では、なぜか壁をすり抜けて家の中に入れることや、家の内部の照明がないこと、扉を開けるスクリプトがないことが問題点としてあげられます。
とりあえず今はただの障害物として配置するにとどめます。


敵(ゴーレム)アセット：Mini Legion Rock Golem PBR HP Polyart
敵の見た目はこのようになります。
<img width="675" alt="スクリーンショット 2020-07-21 16.18.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670403/9fcb8652-0f5c-3930-eca8-ecab6a14f9bc.png">

また、animatorは変更しなければならず、移動についてコードを書く必要があります。

とりあえず、プレイヤーに向かって歩き続けるコードを書きます。


プレイヤーを追いかけ続けるためにNavMeshを使った手法があります。
NavMesh概要参考URL：https://unity.moon-bear.com/3dホラーゲーム「スケアクロウ：廃村の恐怖」/navmeshを使って「追いかけてくる敵キャラ」を作る/

上のURLでは「Window」→「Navigation」とありますが、自分のunityでは違う場所にあったので、メモがわりにスクショを載せます。

<img width="764" alt="スクリーンショット 2020-07-27 19.22.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670403/bd97568b-dde2-901d-db2a-3c9dd72a5ce3.png">

また、追いかけるプログラムは（https://mono-pro.net/archives/6439 ）を参考に以下のようにしました。

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.AI;  // ここを追加

public class chasePlayer : MonoBehaviour {
    private GameObject player;
    private NavMeshAgent agent;
    void Start() {
        player = GameObject.FindWithTag ("Player");
        agent = GetComponent<NavMeshAgent>();
    }
    void Update() {
        agent.destination = player.transform.position;
    }
}
```

＊プレイヤーを追いかける敵にNav Mesh Agentをアタッチすることを忘れないよう注意

これで、敵がプレイヤーを追いかけてくれるようになりました。
現段階では敵の歩行モーションの設定などをしていないので、スライド移動ですが、いつかやろうと思います。

![ezgif-7-7f79660f4cca.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670403/60692d9d-ec26-e2eb-0073-93935a2e37de.gif)
Djangoプロジェクト環境構築

自分のローカル環境構築メモです。

# 環境
* OS: macOS Catalina
* Python 3.7.1 
* venv
* Django 

# pyenv, Python インストール
macOSだとPythonがプリインストールされていますが、
バージョンが２系なので、pyenvから3系をインストールします。
https://github.com/pyenv/pyenv

```
## まず pyenvをインストール
$ brew install pyenv
```

### .zprofile(bash なら.bash_profile) 編集
以下、追加します

```
eval "$(pyenv init -)"
```

### pvenvコマンドの有効化
編集済の.zprofileをロードし、pvenvコマンドを有効化します。

```
$ source ~/.zprofile
```

### pvenvからPython 3.7.1インストール
* Python 3.7.1インスール

```
$ pyenv install 3.7.1
```

* Python 3.7.1をデフォルトバージョンに設定

```
$ pyenv global 3.7.1
```


# Djangoプロジェクト環境を仮想化する
ローカルグローバル環境に余計なパッケージが含まれないよう（プロジェクト単位でのパッケージ管理）
仮想環境の上にDjango関連パッケージをインストールします。

仮想環境作成は`venv`モジュールを使います。

### venv仮想環境構築

```
## プロジェクトディレクトリ作成
$ mkdir hogeproject
$ cd hogeproject

## venv 仮想環境作成
$ python -m venv myhogeenv

## 作成されたディレクトリ確認するとこんな感じ
$ pwd
/xxxx/xxxx/hogeproject

$ tree -L 3
.
└── myhogeenv
    ├── bin
    │   ├── activate
    │   ├── activate.csh
    │   ├── activate.fish
    │   ├── easy_install
    │   ├── easy_install-3.7
    │   ├── pip
    │   ├── pip3
    │   ├── pip3.7
    │   ├── python -> /Users/xxxx/.pyenv/versions/3.7.1/bin/python
    │   └── python3 -> python
    ├── include
    ├── lib
    │   └── python3.7
    └── pyvenv.cfg
```

### 仮想環境起動

```
## 起動
$ source myhogeenv/bin/activate

## 起動完了したらプロンプトに(myhogeenv)がつく。
(myhogeenv) $
```

### Djangoインストール
venv仮想環境が起動されている状態でDjangoをインストールします。
(Djangoは`pip`でインストール)

```
## Django version記載のrequirements.txtを配置する
(myhogeenv) $ echo "Django~=2.2.4"  > requirements.txt

## 配置済のrequirements.txt ディレクトリ確認
(myhogeenv) $ pwd
/xxxx/xxxx/hogeproject

(myhogeenv) $ tree -L 3
.
├── myhogeenv
│   ├── bin
│   │   ├── activate
│   │   ├── activate.csh
│   │   ├── activate.fish
│   │   ├── easy_install
│   │   ├── easy_install-3.7
│   │   ├── pip
│   │   ├── pip3
│   │   ├── pip3.7
│   │   ├── python -> /Users/xxxx/.pyenv/versions/3.7.1/bin/python
│   │   └── python3 -> python
│   ├── include
│   ├── lib
│   │   └── python3.7
│   └── pyvenv.cfg
└── requirements.txt

## Django インストール
(myhogeenv) $ pip install -r requirements.txt
```
matplotlibでTimes New Romanが使えないとき (Ubuntu)

下記のようなエラーが出る場合．

```
UserWarning: findfont: Font family ['Times New Roman'] not found. Falling back to DejaVu Sans.
  (prop.get_family(), self.defaultFamily[fontext]))
```

Terminalから以下のコマンドを入力することで解決する．

```
$ sudo apt install msttcorefonts -qq
$ rm ~/.cache/matplotlib -rf
```

`ttf-mscorefonts-installer`はTabで選択したい位置にカーソルを合わせてEnterを押す．
初心者によるプログラミング学習ログ 383日目

#100日チャレンジの383日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
383日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>昨日の作業・やったこと⇩<br><br>●就寝前筋トレ5分、キンドル読書 10分<br>●ブログ1記事作成<br>●プログラミング学習383日目 2h<br>・メンターの課題<br>・スライドショー実装<br><br>7連勤目。<a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアとつながりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a><a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a></p>&mdash; ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) <a href="https://twitter.com/ppmp65/status/1287482126745526272?ref_src=twsrc%5Etfw">July 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【java】条件分岐って言ったらif文だけど、条件演算子っていうのもあるんですね

# はじめに
エンジニア未経験（34歳）の僕が、エンジニアとして転職。
その転職先でjavaシルバーの資格をとりましょう。と言われたので、その学習メモです。
（もともとjavaは学びたい言語だったのでめちゃくちゃ丁度良い）
なので、記事の内容は本当に基本のキです。
と、同時に誤りがあれば遠慮なくツッコミいただけると幸いです・・・・m(_ _)m

## 条件分岐って言ったらアレのことでしょ？

###今まで(の僕）
僕「プログラミングをする上で、条件によって処理を分岐させたい時にどうすればいいんだろう・・・？」
もう一人の僕「決まってるぜ相棒。ここは```if文```か```switch文```だぜ！」

####if文の場合

もう一人の僕「リバースカード発動！『条件分岐 if文』！このカードは条件式で処理した結果がtrueかfalseとして判定される！trueの場合は条件式直後の{}の中の処理。falseの場合はelse直後の{}の中が実行される！」

```if文.java
if(条件式){
   trueの処理;
}else{
   falseの処理;
}
```

もう一人の僕「ただし、if文は条件式のあとの{}を省略することもできる！その場合、条件式の結果がtrueだった時、そのあとに続く1行がtrueの処理として判断されるっ！！」

```if文その2.java
if(条件式)
trueの処理;
trueだろうがfalseだろうが走る処理;
```

####switch文

もう一人の僕「リバースカード発動！『条件分岐 switch文』!このカードh（略」

```switch文.java
switch(式){
 case 定数:
   ケースに該当した処理;
   break;
 case 定数:
   ケースに該当した処理;
   break;
}
```

# 条件演算子というものもある（ここが本題）

そんなこんなでドヤってたんですけど、条件演算子というものもあるみたいですね。
条件演算子は三つの項目から成るので、三項演算子というのに分類されるそうな。

## 構文
**条件式 ? 式1 : 式2 ;**

なんだか見慣れませんね・・・（動揺）
条件式の結果がtrueだった場合は、式1を実行。条件式の結果がfalseだった場合は、式2を実行するみたいです。

## 実際に使ってみる

早速使ってみました。
プログラムの内容としてはこんな感じ。

1. コマンドラインでjavaを実行する時に引数で文字列を渡してあげる。
2. それが"test"という文字列と一致しているかどうかを確認する（今回の本題、条件演算子：ソースコード6行目）
　一致していれば、`str(インプットされた値と"test"は)`という変数に`"一致してますよ"`の文字列を結合
　一致していなければ、`str(インプットされた値と"test"は)`という変数に`"一致してませんよ"`の文字列を結合
3. 7行目で結合したstrをコンソールに出力

```条件演算子のサンプル.java
public class Sample{
    public static void main(String[] args){
        String inputString = args[0];
        System.out.println("inputStringは" + inputString);
        String str = "インプットされた値と\"test\"は";
        str += inputString.equals("test") ? "一致してますよ" : "一致してませんよ";
        System.out.println(str);
    }
}
/*
 → コマンドラインで test を渡して実行すると「インプットされた値と"test"は一致してますよ」と表示される
*/
```

使い所としては、簡単な条件式に限定されますかね？
「if文を使って何行にもかけて記述するほどのものですかね？この条件。」ってレベルのものはこれで書いてあげるとソースコードが短くなってスッキリしますよね

#さいごに
本当に、初歩の初歩だと思いますが、意外と初心者にとっては見慣れなかったり、そもそも引き出しが無かったりするので、まとめてみました。
何か誤りなどあれば、この記事を目にした人のためにも、~~僕の成長と自信のためにも~~ご指摘いただけますと幸いです。
Quick & Dirty な気持ちでデザインを作成してもいいじゃない

##
自分がwebデザインなどの仕事を始めた際に思っていたこと、
Quick & Dirty な気持ちでデザインを作成してもいいじゃないか
と言うことについて話そうと思います・
ポエムみたいにはなりますが、一つの考えとしてお聞きください。

##Quick & Dirtyとは？
日本語の直訳ですると、「早く、汚く」という意味になりますが、
ビジネス用語で言うと**「完璧じゃなくてもいいから早く」**という意味らしい。

##まずは作ろう
**「完璧じゃなくてもいいから早く」**と言うととてもいい意味には聞こえないが、
要は考え方なのではないでしょうか？
これは特に新人や新しいことにチャレンジする人に該当するのではと思っています。
失敗を恐れて何もしないのではなく完璧じゃなくても早く作り、その後ダメなところを見つけ、
失敗から学ぶことは多いのでまずは完璧じゃなくていいから作ると言う心構えが大事だと思う。

##例えば
自社のwebサイトのデザインを作成するとしよう。
一つは
>１週間かけて綺麗なサイトを作り上司に報告

もう一つは
>1日一つ作成し、数案作り上司に報告

確かに1週間で作るのはいいことだが、　雑だが数案作って見せることにより
クライアントが考えれなかった漏れている部分を見つけることもできると思います。
このようなメリットもあるのです。

##しかし
プロとして仕事をする以上、完璧じゃないものを作成してはいけません。
ただ、これに関してはゴールのことを言っているのではなく過程のことと考えたらいい言葉と思えてくると思います。
最初はQuick & Dirtyな感じで進めていき、最後にはプロとして完璧なものを作成するというのが理想なのだろうと思います。

##最後に
こういう仕事に関する考え方といいうのは１つではないため、
様々な意見があると思いますが、その中で
Quick & Dirty な気持ちでデザインを作成してもいいじゃない
という考え方もアリなのでは思いました。
VSCodeでAWSのLightsailインスタンス上のソースコードを編集する

## はじめに
WordPress用のインスタンスを簡単に作成できるAWSのサービス「Lightsail」を触っていて、サーバ上のソースコードを編集したくなりました。
Vimを使うのもいいのですが、使い慣れているVSCodeで作業したくなりました。

## VSCodeに拡張機能を入れる
VSCodeでLightsailサーバにアクセスするには、SSH接続が出来るようにする必要があります。
そこで、Microsoftがリリースしている「Remote - SSH」を使用します。
[![Image from Gyazo](https://i.gyazo.com/9f722e7a13e9e94214439e837b1ce4a7.png)](https://gyazo.com/9f722e7a13e9e94214439e837b1ce4a7)

## SSH接続をする
拡張機能が入ったら、ウィンドウ左側のサイドメニューに新たなアイコンが表示されるので、クリックします。
[![Image from Gyazo](https://i.gyazo.com/9536273067658b3f382747650da8fffd.png)](https://gyazo.com/9536273067658b3f382747650da8fffd)

SSH TARGETSの右側に＋ボタンがあるので、クリックします。
[![Image from Gyazo](https://i.gyazo.com/6f29f4e545f7c335898ddfabab99328b.png)](https://gyazo.com/6f29f4e545f7c335898ddfabab99328b)

SSH接続のコマンドを入力します。
`"ssh -i "[秘密鍵]" [ユーザ]@[ホスト]"`
[![Image from Gyazo](https://i.gyazo.com/09321b3c2cc94ce5e7bdcf8765ee8a04.png)](https://gyazo.com/09321b3c2cc94ce5e7bdcf8765ee8a04)

ユーザはbitnami(デフォルト)、ホストはパブリックIPです。
※パブリックIPを固定にしています。方法は「Lightsail 静的IP」などで調べてください。
秘密鍵は、Lightsailインスタンス管理画面、アカウントページからダウンロードできます。
[![Image from Gyazo](https://i.gyazo.com/56e5e16cf084cd603273a8b98524cd29.png)](https://gyazo.com/56e5e16cf084cd603273a8b98524cd29)

接続完了したら、SSH TARGETSの下に接続先サーバが表示されるので、右クリックをして、現在のウィンドウで接続します。
[![Image from Gyazo](https://i.gyazo.com/f61b43338d9f0e15850a1b7b4ed2b5ac.png)](https://gyazo.com/f61b43338d9f0e15850a1b7b4ed2b5ac)


## 完了
あとは、Open Folderをクリックしてフォルダを開けば、VSCodeで編集可能です。
[![Image from Gyazo](https://i.gyazo.com/c966803543eb998387fb8c54efbc08ae.png)](https://gyazo.com/c966803543eb998387fb8c54efbc08ae)
emotionを使うメリット

#この記事について

社内プロジェクトでstyled-componentsが主に使われており、世間でもstyled-componentsが主流な感じなのですが、
徐々に伸びてきているemotionが気になったので導入して使ってみました。


お…！ってなったのでstyled-componentsに比べてよかったこと、悪かったことを簡単にまとめます。
（*随時更新）

emotion初心者なのでこんなメリット/デメリットある！ってことがあれば教えてください:innocent:

#emotionとは

後発のCSS-in-Jsのライブラリです。
基本的にはstyled-componentsでできることはほぼできそうな印象を受けました。

個人的に良い！って思った点は
- TypeScriptとの相性◎ (https://emotion.sh/docs/typescript)
- render内（html)が見やすくなる

```jsx

// styled-componentっぽく書いたりできます
import styled from '@emotion/styled'

const Pin = styled.div`
  color: red;
`

render(<Pin> pin component </Pin>)
```

でもこっちの書き方が便利です（TSの恩恵受けられる）

```jsx
import styled from '@emotion/styled'

// Object Stylesっていいます

const Pin = css({
    color: 'red',
});

render(<div css={Pin}> pin component </div>)
```

他にもいろんな書き方できるみたいです
https://emotion.sh/docs/introduction

# メリット

## TypeScriptと一緒に使ったとき

#### css構文のサポート受けられる
react書いてるとcss（っぽいの）をかくのめっちゃめんどくさいって思ってました。
これがあればちょっとストレス軽減！！
<img width="595" alt="スクリーンショット 2020-05-01 15.54.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/e0c03072-33d8-8625-fef8-27803293501b.png">

#### コンパイル前に間違ったら叱ってくれる
タイポとか。地味に嬉しいやつです。
<img width="399" alt="スクリーンショット 2020-05-01 15.53.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/f5f81915-4072-7dd6-aed1-af5734f9ca2b.png">



#### かぶってるやつ教えてくれる

考えずに書いてるとこんなこともあったりするので…

<img width="462" alt="スクリーンショット 2020-05-01 16.07.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/94394ac6-8741-7139-1366-35670cedf7c5.png">


#### 読みやすさ

styled-componentsを使っていると、React Componentとただのタグにstyleつけてるのが混ざって読みにくく感じていました。
緑ばっかりになっててしんどい:mask:

```jsx 

(
  <Header>
　　<SiteTitle> ~~ hotel </SiteTitle>
　　<Navigation>
　　　<NavigationList>
　　　　<NavigationItem><a href="/plan">宿泊プラン</a></NavigationItem>
　　　　<NavigationItem><a href="/price">料金案内</a></NavigationItem>
　　　　<NavigationItem><a href="/reserve">宿泊予約</a></NavigationItem>
　　　　<NavigationItem><a href="/access">交通アクセス</a></NavigationItem>
　　　</NavigationList>
　　</Navigation>
 </Header>
);
```

emotionを使うといつものhtmlのタグにclassNameっぽくかけるので読みやすいです。
ここにreactComponentが追加されたら、
「あ、これ特別なやつ」ってなるので脳の負担が減るように感じました。

```jsx

return (
  <header css={Header}>
　　<h1 css={SiteTitle}> ~~ hotel </h1>
　　<nav css={Navigation}>
　　　<ul css={NavigationList}>
　　　　<li css={NavigationItem}><a href="/plan">宿泊プラン</a></li>
　　　　<li css={NavigationItem}><a href="/price">料金案内</a></li>
　　　　<li css={NavigationItem}><a href="/reserve">宿泊予約</a></li>
　　　　<li css={NavigationItem}><a href="/access">交通アクセス</a></li>
　　　</ul>
　　</nav>
 </header>

);
```


## 他
#### メディアクエリが簡単
styled-componentsの時は結構書き方めんどくさかったのですが、
emotionでは下記のようにかけます！

```jsx

const Pin = css({
    color: 'red',
    '@media(min-width: 420px)': {
    color: 'orange'
    } 
});
```

# デメリット

デメリットもいろいろあるみたいです。

#### create-react-app --typescriptとの相性の悪さ

emitして設定を書き換えなきゃいけないのですが、無理矢理感があるので、create-react-app --typescriptで進めるならstyled-componentsで進めたほうが良い気がします。
（結構めんどくさかったです）

詳しい解説は以下の方のブログがわかりやすかったです:pray:
https://www.dkrk-blog.net/javascript/emotion_css


経験した中では上記だけです:innocent:
あと、object stylesはTSの恩恵受けられるので書くのですが、書き方めんどくさい（小声）
初心者のためのpandas基礎⑧桁数処理

#pandasとは
Pythonにて、構造化データ（テーブル型のデータ）を扱うためのライブラリです。ファイルの読み込みやその後の加工・抽出処理などを簡単に行うことができ（SQL的な感覚で行うことができ）、機械学習などのデータの前処理で必須となるライブラリです。
他項目への目次は[こちら](https://qiita.com/Yanagawa_Yoshihisa/items/e1d7d0e939f58e7301ea)になります。

#はじめに
本記事では、桁数の処理方法です。はじめに理解して頂きたいこととして、pandasそのもの桁数を調整する方法と個別のデータフレームや変数の桁数を調整する方法があります。また、注意として、pandasの丸めは四捨五入ではなく、偶数への丸めとなります。偶数への丸めを知らない人は調べて下さい。


#準備
まずはライブラリをインポートします。pandasにpdという名前をつけてimportします。

```python:
import pandas as pd
```
サンプルはタイタニックのデータで試してみます。タイタニックがわからない人は｢kaggle タイタニック｣で調べて下さい。

```python:
dataframe = pd.read_csv('train.csv')
```

#pandasの桁数調整
pandasの様々設定は`option`にて管理されます。(他にも様々なオプションがあるので興味がある方は調べて下さい。)全体の桁数は`display.float_format`で、小数点以下の桁数は`display.precision`で管理されています。
実際に確認してみましょう。

```python:In
print(pd.options.display.float_format)
print(pd.options.display.precision)
```
```python:Out
None
6
```
全体の桁数に制約はなく、小数点以下は6桁表示となっています。実際のデータをみてると、例えばFareは小数点以下四桁まで表示されています。これは元々のCSVのデータが4桁までしかないためこのような表示となっていますが、桁数が多ければ6桁までの表示となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600679/b887b30d-52e0-c4a7-2f31-dea83e72ac12.png)

次にこの値を変更し、小数点以下2桁表示にします。（Fareの表示が2桁になります）

```python:
pd.options.display.precision = 2
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600679/3dfefe28-3e6a-c691-a506-853245dbc6a5.png)
初期化をしたい場合は`reset_option`を使いましょう。

```python:
pd.reset_option('display.precision')
```

#個別に設定する方法
個別の設定は`round()`を使います。小数点以下2桁にする場合は、下記になります。（Fareの表示が2桁になります）

```python:
dataframe.round(2)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600679/9d5cf022-3ad3-3059-57e4-fd4019697e69.png)

列毎に設定する場合は下記になります。（例：Ageを1桁、Fareを3桁とする。）

```python:
dataframe.round({'Age':1, 'Fare':3})
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600679/29e943b3-32e5-7521-3d75-a940eead3066.png)

#最後に
初心者にもわかるように、Pythonで機械学習を実施する際の必要な知識を簡便に記事としてまとめております。
目次は[こちら](https://qiita.com/Yanagawa_Yoshihisa/items/a3fa521d89c471b3e71f)になりますので、他の記事も参考にして頂けると幸いです。
AWS Lightsail でサクッとWordPress環境構築(1) 〜サイト立ち上げ編〜

## はじめに

この記事では、WordPressでHP作成をするにあたって、簡単に環境構築ができる AWSのサービス「Lightsail」を使った手順を記載します。

PCはMacを使用しています。AWSアカウントは作成済みです。

## インスタンスの作成
Lightsailを利用開始すると、デフォルトで Linux/Unix + WordPress のインスタンスが選択されています。
[![Image from Gyazo](https://i.gyazo.com/69e2d2938b3539cc7d6e70d985b9f7d3.png)](https://gyazo.com/69e2d2938b3539cc7d6e70d985b9f7d3)

プランとインスタンス名もデフォルトのままでいきます。
[![Image from Gyazo](https://i.gyazo.com/b030976f20f127cdab6a6656c4ba8d59.png)](https://gyazo.com/b030976f20f127cdab6a6656c4ba8d59)

数分待つと色がついて保留中から実行中に変わり、以下のような画面になりインスタンスが作成されます。
[![Image from Gyazo](https://i.gyazo.com/ddae43e41b33e5453a19b108cff5dd23.png)](https://gyazo.com/ddae43e41b33e5453a19b108cff5dd23)

## WordPressにログインする

「SSHを使用して接続」を押すと、自動でターミナルが起動しインスタンスに接続されます。
[![Image from Gyazo](https://i.gyazo.com/6aa1c85074586773e267e205fd955016.png)](https://gyazo.com/6aa1c85074586773e267e205fd955016)

ターミナルで以下のコマンドを入力すると表示されるパスワードをどこかに記録しておきます(WordPressにログインするときに使います）。

```
cat bitnami_application_password
```

exitでターミナルを抜けます。

```
exit
```

awsの画面に戻り、パブリックIPをブラウザのURLに入力すると、WordPressのトップページが表示されるはずなので確認しましょう。
現時点ではパブリックIPは変動してしまうので、後ほど固定します。独自ドメインへの紐付けは今回は行いません。
[![Image from Gyazo](https://i.gyazo.com/9ae5673e48f435e4be06ef0fbe5394d7.jpg)](https://gyazo.com/9ae5673e48f435e4be06ef0fbe5394d7)


ブラウザURLのパブリックIPの後ろに/wp-loginを加えアクセスすると、ログイン画面が表示されます。
以下を入力して、ログインします。
ユーザー名：user
パスワード：先ほど記録したパスワード
[![Image from Gyazo](https://i.gyazo.com/6d0af286fb91fd6c2f82c4bc6d8cd9d7.png)](https://gyazo.com/6d0af286fb91fd6c2f82c4bc6d8cd9d7)

WordPressにログイン完了です。ここでページの編集などを行えます。
[![Image from Gyazo](https://i.gyazo.com/6174d724bbb857395c14ac2746e12a99.png)](https://gyazo.com/6174d724bbb857395c14ac2746e12a99)

## IPの固定
aws画面で、ネットワーキングタブを選択し、「静的IPの作成」をします。
[![Image from Gyazo](https://i.gyazo.com/9ba71e7de1ff51fd979b8103a6dd6a52.png)](https://gyazo.com/9ba71e7de1ff51fd979b8103a6dd6a52)

先ほど作成したインスタンスを選択し、作成します。
[![Image from Gyazo](https://i.gyazo.com/723d116ceb998648fc01a28283ddf369.png)](https://gyazo.com/723d116ceb998648fc01a28283ddf369)

## WordPressの設定について
ちなみに、Settingsより、管理画面の日本語化や、タイムゾーンの設定、日時表示形式の設定などができます。
デフォルトのタイムゾーンは海外仕様になっていたので、日本時間にしたいなら「UTC+9」に設定しましょう。
[![Image from Gyazo](https://i.gyazo.com/16aa5e7a62d97c3bf39d001aa3812a7b.png)](https://gyazo.com/16aa5e7a62d97c3bf39d001aa3812a7b)

## おわりに
LightsailはWordPressでHPを作成したいユーザーをターゲットにしているサービスなだけあって、細かな設定をすることなくサイトの立ち上げまでスイスイ進むことができました。
ページのデザインや、独自ドメインの紐付けなどはまた改めて投稿します。

2020/3/11追記：[AWS Lightsail でサクッとWordPress環境構築(2) 〜独自ドメイン 編〜](https://qiita.com/fgem28/items/be51fcc95d6503e1102e)を公開しました。
Mailgunで独自ドメインのメール受信とメール発信

メール受信サーバを作るのってなにげに大変なので、Mailgunを利用しました。
作業メモです。

##やりたいこと
・独自ドメイン宛のメールを、普段使っているgmailに転送して受信すること
・独自ドメインのメアドから、メール発信すること。

##つまずいたやり方
### GCP（Google Cloud）のCPE（Compute Engine）でPostfix
GCPには、無料でVMを作れます。
別記事ですでに構築済みだったので、そこにPostfixをインストールしました。
独自ドメインのMXをそこに向けて、そのメールをaliasesで設定したgmailのメアドに転送させちゃおうと思ったからです。
ところが、GCPは、メールの送受信ができないようにしてるらしく、うまくできませんでした。
そこで、別の方法を考えました。

##うまくいったやり方
###Mailgunでメール転送
GCPのヘルプをみてるときに、メールはSendgridとかMailgunを使ってね！みたいな感じで書いてありました。
Sendgridのメール受信はwebhookでPOSTで受けるようで、Mailgunは、メール転送のようです。
さらに調べると、Mailgunは、普通にアカウント登録するとメール受信は有料で、Google経由だと無料らしいんです。

というわけで、Google経由のMailgunを使ってみることにしました。
予想以上にチョーカンタンでした。


###Mailgunアカウント登録
下記URLに記載されている「MailgunのGoogleパートナーページ」のリンクから登録します。

https://cloud.google.com/compute/docs/tutorials/sending-mail/using-mailgun?hl=ja

カードとか登録しないと行けないですが、課金されないはずです。


###ドメインの登録
アカウント登録できたら、ドメインを登録します。
<img width="1082" alt="mailgun-adddomain.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186659/079eeb47-9886-24dc-3feb-d3c0a3c7b09e.png">

###DNSの登録
ドメインを追加すると、DNSの設定情報が表示されますので、独自ドメインのDNSに、ここに書いてあるMXレコードとか、TXTレコードとか、を書きます。
<img width="1162" alt="mailgun-dns.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186659/10d9e93c-5b61-7941-fe80-ef9a43090efb.png">

自分は、onamae.comでドメインを取得したので、「お名前.com Navi」の「DNS設定」にレコードを書けばOKです。
https://www.onamae.com/domain/navi/dns_manage

DNSが反映されたら、Mailgunの画面で、Verifyします。


###受信メールの転送
メニューの「Receive」を選ぶと、受信メールの設定ができます。
今回は、独自ドメイン宛のどんなメールでも、普段使ってるGmailに転送させたいので、「Catch All」としました。
転送先のメアドを入れればOKです。カンタン。
<img width="1063" alt="mailgun-editroute.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186659/1a7ac27f-c6a2-ff62-fa80-2c2b97d91adc.png">

###SMTPの設定
メニューの「Domain settings」を選んで、タブから「SMTP credentials」を選びます。
右上の「New SMTP User」を選ぶと下記の画面になりますので、送信するメアドを入れると、パスワードが生成されます。
<img width="1179" alt="mailgun-smtp.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186659/7a952ed4-add2-fc2b-b268-0a7f33498f3f.png">

###GMailの設定
1)GMailの設定から、「アカウントとインポート」を選び、「名前」→「他のメールアドレスを追加」を選びます。
<img width="1321" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186659/69d71edc-64e2-94f8-8488-1a748ee5b422.png">

2)Mailgunで設定したメアドを入れます。
<img width="614" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186659/e30f9520-d186-fbf3-c013-36316cfd4637.png">

3)Mailgunで設定したパスワードを入れます。
<img width="618" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186659/c2ff87b9-c14e-9c61-2d09-c483613d0d00.png">

4)確認メールが飛んできますので、コードを入れるかメールに記載されたリンクをクリックします。
<img width="618" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186659/9d308190-ab94-1b00-5e21-b272c865039a.png">

→完成

##結論
Postfix不要ですね。
go get オプション集

#go getのオプション


```
go get [-d] [-f] [-t] [-u] [-v] [-fix] [-insecure] [build flags] [packages]
```


##-uオプション
新しいマイナーリリースまたはパッチリリースが利用可能な場合に、パッケージとその依存パッケージをネットワークから更新する。
使用しているパッケージを更新する際も使うことができる。


##-dオプション
パッケージのダウンロードのみ、インストールなし


##-fオプション
-uオプションがある時のみ使用可能。

上手く説明が出来ないので、参考URLから引用
>get -uに、各パッケージがソース管理リポジトリからチェックアウトされていることをインポートパスで暗黙的に確認しないようにします。これは、ソースがオリジナルのローカルフォークの場合に便利です。



##-tオプション
指定されたパッケージのテストに必要なパッケージも一緒にダウンロードしてくれる。



##-vオプション
実行しているコマンドを表示する。



##-fixオプション
依存関係を修正。ダウンロードしたパッケージを修正。
修正してからgetをしてくれる。


## -insecureオプション
HTTP等の安全性が確保されていない方式を使いリポジトリから取得するためのコマンド。
危険が伴うため、使用はお勧めしません。


##参考
GO ドキュメント
https://golang.org/cmd/go/#hdr-Download_and_install_packages_and_dependencies

https://www.it-swarm-ja.tech/ja/github/go-get%e3%81%a7%e3%81%a9%e3%81%86%e3%82%84%e3%81%a3%e3%81%a6%e3%83%91%e3%83%83%e3%82%b1%e3%83%bc%e3%82%b8%e3%82%92%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e3%81%a7%e3%81%8d%e3%81%be%e3%81%99%e3%81%8b%ef%bc%9f/1053492866/
ディープラーニングの基本的なアルゴリズムであるニューラルネットワーク題材－午後

応用情報技術者令和元年秋期 午後問3

ファイル：2019r01a_ap_pm_qs.pdf
当該記事はメモだけです。フル出題は、上記ファイルをご覧くださいますようよろしくお願いします。

円：ノード
矢印：アーク


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/c6bf9fc1-3d38-576e-6fbd-8bec4b433c62.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/da0e72bc-5f7d-06a2-8fdd-5111469bebf2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/41930fcd-f56a-ea46-ca0d-d8ec9efe3067.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/48f8d6cd-071d-821d-d189-6188cd36819f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/76e16933-bcb5-a071-e762-f002050b50bd.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/3c2a671a-76b4-afc8-097d-182d3f5fa8b8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/41930fcd-f56a-ea46-ca0d-d8ec9efe3067.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/643bdb8e-ad04-ab11-698d-b7a2bbe296a4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/db66140d-1d29-84b1-a64c-76169d986d0f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/734d8937-2375-eec8-8c22-bbe9b8c6f995.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/b0dd9612-d9a0-ae51-c37a-e4c8dad41cd6.png)
【Vue.js】コンポーネントの属性について

Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。

#コンポーネントの属性について
VueでHTMLのタグの属性に値を設定する場合に、「v-bind」というものを利用します。v-bind:○○という形で属性を指定することで、Vueオブジェクトを用意した値をコンポーネントタグの属性に指定して表示させることができます。

##v-modelで値をバウンド
値を入力してその値をコンポーネントに表示します。
コンポーネントの場合は「v-model」というものを使用します。
「v-model」はinputに入力された値の値をVueのdataプロパティの値にバインドする機能になります。
入力された値を変更するとリアルタイムでバインドされた変数の値が更新されます。

```
<input v-model="変数名">
```
上記のように記述します。

##v-onでバインドする
イベント関係の属性に値をバインドさせるためのもの。

```
v-on:イベント名="・・・処理・・・"
```
イベント名には、属性として用意する値から「on」を取り除いたものを使います。例えば、onclickをバインドしたいならば、v-on:clickとなります。
MacOS(15.x以上)環境でPHPの「Class 'ZipArchive' not found」エラーを解消する方法


# 実行環境
- MacBook Pro(MacOS Catalina v10.15.5)
- Homebrewインストール済み
- PHP7.3インストール済み

# 実行コマンド一覧

```zsh
brew update
brew install php@7.3
brew link --force php@7.3
```

linkには必ず「--force」をつけること
linkの段階でエラーが出る場合、下記のコマンドも試してみること

```zsh
brew link --overwrite php@7.3 --force
```

# 参考リンク

- https://stackoverflow.com/questions/58290566/install-ext-zip-for-mac
色がもつ効果やイメージ

###はじめに
webやアプリのデザインに欠かせない「色」ですが、その色がもたらす効果やイメージをしっかりと把握した上で使用しないと、意図しない意味を与えたりしてしまう可能性が出てしまいます。
様々な色がありますが、その名でも代表的な色を数個ピックアップしてそれらの色がもたらす効果やイメージを紹介できたらと思います。

##<font color="Red">赤色</font>
「火」「血」「愛」「情熱」「興奮」「怒り」「生命力」
赤はよく使われる色の一つで、非常に誘目性の高い色です。
また道路の安全標識などでも人の注意を引くものとして多く利用されています。
よってwebなどでは強調する箇所や注意を向けたい箇所によく使われます。
また、女性的なイメージもあり化粧品などにもよく使えわれる色です。

##<font color="Blue">青色</font>
「空」「水」「爽快」「清潔」「誠実さ」「落ち着き」「高貴さ」
青色には心を落ち着かせて集中力を高める心理的効果があるそうです。
青を使った配所はとても人気が高く、主観的な好みに左右されにくい色とも言われています。
ただ、「寒色」とも言われる色なので冷たい印象も持っています。

##<font color="Green">緑色</font>
「自然」「新鮮」「平和」「安心」「癒し」「森林」「爽やか」
緑は癒し効果などの人の気持ちを落ち着かせるという効果があります。
よく目が疲れたら遠くを見るといいと言いますが、あれは遠くにある緑を見ると目が休まるというところからきているそうです。(違っていたら教えてください)
緑の安心や信頼などのイメージが強いため、コーポレートカラーにもよく使われています。
ただ緑はくどくなりやすいため、前面に使う場合は注意が必要な色です。

##<font color="Yellow">黄色</font>
「光」「太陽」「月」「元気」「若さ」「幸福」「活動的」
黄色は明るく、基本的にはポジティブなイメージのあるカラーですが、
注意を引く色なので、注意勧告を出す色にも使われます。
また、子供を連想させる色でもあり子供に関わる企業のサイトによく使われています。

##<font color="Black">黒色</font>
「重厚感」「暗い」「力強さ」「厳粛」「高級」「争い」「恐怖」
色に優しさはない色ですが、全ての色の中で最も使いやすい色です。
黒を主にしたサイトには高級感が出たり、文字の強さが引き立つように作りになります。
また#000000は他の明るい赤や黄色などと同じくらい色としての主張が強いためあまり#000000を使うことはお勧めしません。

##<font color="Black">白色</font>
「清純」「無垢」「シンプル」「クリーン」
白色はどの色とも相性がよく、薄い色と組み合わせるとその色を引き締めて、濃い色と合わせるとその色のくどさを和らげてくれる色です。
白をメインにしたサイトの場合は伝えたいコンテンツをうまく強調することができます。

##色使いに困ったら
様々な色がある中でそれぞれの色がどのようなイメージや効果があるのかは理解できましたが、
いざwebサイトやアプリを作成しようと思った時に迷ってしまうと思います。
その時は様々なカラーツールがあるのでそちらを参考にするといいと思います。
一つだけ参考ツールとして紹介させていただきたいのですが、
Adobe提供のカラーツールです。
様々なカラーパターンを確認することができ、一つメインの色を決めるとそれに沿った合った色を教えてくれるツールです。
[Adobe Color](https://color.adobe.com/ja/create/color-wheel)

##実際のwebサイトのデザインを参考にしたい場合
実際にwenbページも作成してみないとイメージが少ないって人には
実際のwebサイトを確認してから作りたいと思うはずです。
そういう人は様々なwebサイトのデザインギャラリーを載せているサイトを見ると
とても参考になります。
色ごとや業種ごとで検索できるので自分の作ろうとしているサイトのイメージと合うものを探してみるとデザインの参考にもなっていいかもしれませんね。
[https://muuuuu.org/](https://muuuuu.org/)

##まとめ
色は人の経験や習慣からくる様々な情報を連想させるものであり、
また強調させるためなどに使ったりするものであるため、
色一つ選ぶにも意味を持って選ぶ必要がある。
(OutSystems)BDDFrameworkテストの実装メモ

BDDFrameworkでテスト作りながら気になった点についてメモ。
BDDFramework 1.3.0

# テンプレートモジュール
BDD Frameworkでアプリケーションを作ると、BDD Frameworkモジュール種別で作れる
この種別で作成すると、

- BDDFrameworkへの参照追加済み
- BDDFrameworkのLayoutをベースとしたテーマ作成済み
- サンプルテスト作成済み

で作業が始められる。

## BDDFrameworkのLayout（BDDFrameworkTheme/LayoutBase）
　テストケースとタイトルを配置するPlaceholderだけが置かれている。通常の画面で使うレイアウトよりだいぶシンプル。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/b231d8c4-a67b-3808-7d41-8fbed7f6cd22.png)
　
　レイアウトの最下部にはFinalResult WebBlockが配置されているので、このレイアウトベースで作った画面には自分でFinalResultを配置する必要がない。
　FinalResultの設置は忘れがちな部分なので、これはいいですね。FinalResultは配置された画面内で、その「配置された場所までの」テスト結果の集計を表示します。なので一番下に配置する必要があるのですね。
　ちなみに、このFinalResultですが、レイアウトの入力変数でオフにできます。

## サンプルテスト
以下のようなテストスイート（画面）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/81e2cc08-5fde-6946-0aab-d9ea669959d5.png)

- テストケースはWeb Blockに切り出されている。これはテスト作成のベストプラクティス[^1]
- 最初のWeb Blockは単一テストのサンプル。標準的なテストの書き方はこれでチェックできる。BDDの各ステップに対応するScreen Actionの名前は、Given1,Given2,When1,Then1のように、Gherkinのステップ（Given,When,Then)＋連番になっている。テストケースをWeb Blockに切り出す場合はこれに従うとわかりやすそう
- 2番めのWeb Blockは、Listを使って、「パラメータを変えつつ同じテストを繰り返すパターン」の例（ここは後で詳述）
- テストスイート（画面）はサフィックスTestSuitesのUI Flow、テストケース（Web Block）はサフィックスTestScenariosのUI Flowに分離してある。テストの複雑さをコントロールするためにこの分類は良いですね。プレフィックスでもいいかもしれませんが、この分け方は踏襲したい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/94d3cd61-c2c8-6414-57b6-27e3e1e479eb.png)

# スクリーンテンプレート
最近のBDDFrameworkには、テスト画面（テストスイートに対応）作成用にスクリーンテンプレートが用意されています。
スクリーンテンプレートは、

1. BDDFramework Scenario：基本こっちを選択して作成する
2. BDDFramework Data-Driven Scenario：パラメータを用いて繰り返しテスト実行したい場合はこっちを選択

の2種類。

# パラメータを変えつつ同じテストを繰り返すパターン
以下のように、List Widgetの中にテストケースのWeb Blockを配置します。これでList Widgetに設定されたデータ数だけWeb Blockが、（パラメータを変更しながら）繰り返し表示される＝テストが繰り返し実行される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/99b404bf-18b7-ac60-9687-b4277258ef01.png)

## 設定手順
例は有効な入力の範囲が2<=X<=6の場合
1. テストケースのWeb Blockに入力変数を追加する（例：Integer型のXを入力変数に追加）
2. Web Blockは、入力変数を使ったテストケースにする
3. テストスイート（画面）に1.の入力変数の型のList変数を作り、Preparationで値を入力する（例：境界値テストなら、1,2,6,7など）
4. テストスイートにList Widgetを配置し、Source Record Listに3.のList変数を設定し、List Widget内にテストケースのWeb BLockを配置する

## 実行例
1つのテストケース（Web Block）がこのように繰り返し実行される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/3f6bcab4-e72d-6c8b-8bcf-24ea683f42dc.png)

なお、この例のように、繰り返しパラメータをテスト結果画面に表示したい場合は以下のように、テストケースの各ステップにあるStepDescriptionにExpressionを配置して式で入力変数を結合すると良い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/fc3bc369-a27f-15f4-ad03-8df875f983b3.png)

[^1]: OutSystemsのブログ記事　[How to Automate BDD Testing in OutSystems, Part 1: An Introduction to the BDDFramework](https://www.outsystems.com/blog/posts/intro-bddframework-testing/)　「When setting up a test suite, it’s best practice to build each BDDScenario in a separate web block inside your test eSpace - this allows you to better organize different scenarios and have the corresponding implementations (the Screen Actions) grouped together. 」
git stashの流れ【コミットせず変更を退避ってどうやんの】

最近だけど、あるブランチで作業をしていた時に
急遽他の作業依頼が来たんだよね。

あれ、今のブランチの作業履歴ってどうやって保存して
他のブランチを切ればいいん...?って困ったのがきっかけ。

stashを使うと**コミットしていない変更履歴を退避**させておくことが可能みたい。
まじでgitすごい。

実はstashのこと知る前は、ローカルに変更したファイル群をそのまま保存して
あとで1ファイルずつまた変更しなおしてたんだよね。
まじでなんでもっと早く教えてくれなかった？？？？？？ってブチギレそうになったことが以前ある。


#まず変更を退避！
```
$git stash save "XXXXXX"
```
これでブランチ上の変更が退避される。
まあつまり、ブランチは変更が加えられていないクリーンな状態になる。
ちなみにXXXXXXのところはコメントだよ。後でこのstashってなんだっけ...?ってならないためのやつ。
俺はいつも"feature/XXXXXX_yyyymmdd"って感じでstash名に加えて年月日をアンダースコアの後に追記してるかな。

※commitしちゃってたらだめだよ。addされた変更もしくはaddされていない変更のみが対象だからね。
　やべえ、commitしちゃってたって人は戻す方法があるからそれはそれで調べてね。ごめん。



#え、本当に退避できてんのかな？
```
$git stash list

// 出力はこんな感じ。もしかしたらちょっとちがうかも。まあいっか。うろ覚えなんでね。
stash@{0}: feature/XXXXXX_yyyymmdd
```
これでさっきのstashがしっかり保存されている（退避されている）ことが確認できたね。
ついにブランチがクリーンな状態に...　めでたい。
もう思う存分新規ブランチを切りまくってください。バンバン移動してもらって構いません。

#よし、退避した変更を元に戻しますか
```
// stash@{0}の作業を元に戻すよ

$git stash apply stash@{0}
```
これでなんと、退避した変更は元通り。
微妙にめんどくさいけど、何回かやれば大丈夫すぐなれる。
***あ、一点だけ注意。元に戻すときは、ちゃんと変更を元に戻したいブランチへ再移動してからにしてね。***
これが最初できてなくて、若干混乱したことが何回かあるんで～

#退避履歴溜まってきたし、削除してえ
```
$git stash drop stash{0}
```
dropしちゃえば削除できるよ。
削除前と後にはlistでしっかり削除確認してね。
あと、間違えてstashを削除してしまっても元に戻す方法はあるらしい...
それについてはまたどこかのタイミングで！

#最後に復習しよっか　これで忘れない
- saveして
- list確認して、他ブランチで作業開始
- 作業が終わったら、ブランチを移動してapplyしてOK
- stashが溜まってきてうぜえってなったらdrop

おわり。
つかれた。
Android 11でShortcutBadgerを使えるようにする

# ShortcutBadgerが使えない!

Android 11対応を行っていたところ、バッジの更新が出来なくなっていることに気が付きました。
アプリは [ShortcutBadger](https://github.com/leolin310148/ShortcutBadger) を使用してバッジの更新をしていました。

# 原因と対策

原因は Android 11 から追加された [Package Visibility](https://developer.android.com/preview/privacy/package-visibility) によって、他のパッケージへのアクセスが制限されたことによるものでした。

対応は、ShortcutBadgerのintentを許可するよう、マニフェストファイルに追加するだけです。

```xml:AndroidManifest.xml
<manifest ...>
    <application>
        ...
    </application>

    <queries>
        <intent>
            <action android:name="android.intent.action.BADGE_COUNT_UPDATE"/>
        </intent>
    </queries>
</manifest>
```