OmniAICreator/Qiita-1.07M huggingface dataset:
【Docker】Dockerfileの命令の意味ざっくりまとめ

## はじめに
Dockerfileを読めるようになるために、Dockerfileの命令について意味をざっくりまとめました。
どう使うのかイメージがわかない命令も多いですが、**とりあえず読めるようになる**がゴールです。

公式ドキュメントに記載の内容を元にしています。
[| Docker Documentation](https://docs.docker.com/engine/reference/builder/)

## この記事が役に立つ方
- Dockerfileの読み方がよく分からない
- Docker初心者

## この記事のメリット
- Dockerfileの命令が何を示しているのかが（なんとなく）分かる。

## 環境
- macOS Mojave バージョン10.14.6
- シェル：zsh
- Docker：version 19.03.5, build 633a0ea

## Dockerfileとは？
Dockerがイメージを構築するときに読み込むファイルです。
基本構文は、

```
命令 引数
```
のようになります。

Dockerfileにイメージを構築するための**命令**を全て記述し、

```zsh
$ docker build
```
でイメージが構築され、それを元に開発が可能となります。

つまり、Dockerfileが同じであれば、**開発環境は一緒**ということです。

## Dockerfileに記述する命令一覧
公式ドキュメントにあるものを抜粋しました。
構文には触れていませんので、必要に応じて下記をご参照下さい。
[| Docker Documentation](https://docs.docker.com/engine/reference/builder/)

### `FROM`
ベースイメージを指定する。
これを元にその他命令を追加していくため、最初はFROMから記述する必要がある。
DockerHubにあるイメージを使用。

### `RUN`
それまでのイメージをベースに、新規レイヤーでシェルコマンドを実行する。
実行後出来たイメージは、以降の命令にも適用される。

### `CMD`
`docker run`時にデフォルトで実行するコマンドを指定することが出来る。
１つのDockerfileに１つしか含めることが出来ない。

### `ENTRYPOINT`
`docker run`時にデフォルトで実行するコマンドを指定することが出来る。
１つのDockerfileに１つしか含めることが出来ない。

CMDとの違いは下記記事で解説されています。
[docker CMD とENTRYPOINT の違いを試してみた - Qiita](https://qiita.com/hihihiroro/items/d7ceaadc9340a4dbeb8f)

### `LABEL`
コンテナイメージにメタデータを登録する。
過去`MAINTAINER`で指定していた作者の情報も、`LABEL`で指定するのが推奨とされている。

### `EXPOSE`
ポートの開放を行う。
コンテナ間をリンクするときなどに使用。

### `ENV`
環境変数を指定する。

### `ADD`
ファイルやディレクトリ、リモートファイルURLを追加する。
ただし、rootユーザーのみ実行・書き込み可能な状態で追加されるため、必要に応じて別途パーミッションを変更する必要がある。

### `COPY`
ホスト側からコンテナへファイルやディレクトリをコピーする。

### `VOLUME`
ボリュームのマウントを行う。

### `USER`
実行ユーザーを指定する。

### `WORKDIR`
各種命令を実行する際の作業ディレクトリ（カレントディレクトリ）を指定する。

### `ARG`
`--build-arg`フラグで渡すことが出来る変数を定義する。

### `ONBUILD`
作成するイメージが、別のビルドのベースイメージとして使用されるときに実行される命令を追加する。

### `STOPSIGNAL`
終了時にコンテナに送るシグナルを指定できる。

### `HEALTHCHECK`
コンテナが動作しているかどうかを確認するテストを組み込める。
引数の指定によって３０秒に１回動作確認などが出来る。

### `SHELL`
使用するシェルを指定出来る。

## おわりに
実際使っていない命令が半分以上あり、理解不十分:sweat_smile:

これからBest Practicesも読みつつ、人の書いたDockerfileを読みつつで理解を深めていこうと思います。
[Dockerfile Best Practices](http://crosbymichael.com/dockerfile-best-practices.html)

## 参考にさせて頂いたサイト（いつもありがとうございます）
[【入門】Dockerfileの基本的な書き方 | レコチョクのエンジニアブログ](https://techblog.recochoku.jp/1022)
[| Docker Documentation](https://docs.docker.com/engine/reference/builder/)
[docker CMD とENTRYPOINT の違いを試してみた - Qiita](https://qiita.com/hihihiroro/items/d7ceaadc9340a4dbeb8f)
【AWS EC2】$sudo vim /etc/nginx/conf.d/rails.conf 書き込みできない

#vimでrails.confの修正→保存

```console
[ec2-user@ip-XXX-XX-XX-XXX ~]$ sudo vim Z/etc/nginx/conf.d/rails.conf
```
上記のコマンドでvimにてrails.confに加筆し、いざ保存！というときに保存できない！
となった場合は下記のコマンドを入力して、権限を与えてください。

#使用するコマンド
```console
[ec2-user@ip-XXX-XX-XX-XXX ~]$ sudo chown ec2-user /var/www/
```
再度下記のコマンドでrails.confにアクセスし加筆保存すれば、編集できるはず！

```console
[ec2-user@ip-XXX-XX-XX-XXX ~]$ sudo vim Z/etc/nginx/conf.d/rails.conf
```
【Docker】Docker Networkを理解する

# Docker Networkとは
Dockerで使用されるネットワークです。

# 事前知識
### ブリッジ
第２層でMACアドレスで判別して転送
### ルータ
第３層でIPを判別して転送
### VXLAN
ルーターを介したL3ネットワークの上に、仮想的なL2スイッチで直結されたネットワークを構築する技術

## docker0
- 仮想ブリッジ
- `--net`を使用しない時のコンテナが所属するネットワーク

![20160722142617.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356851/811f9456-adfb-e226-64eb-cf3e5dccd275.jpeg)

ref:[How to capture packets on a local network with Pcap4J container | To Be Decided](https://www.kaitoy.xyz/2015/07/25/how-to-capture-packets-on-a-local-network-with-pcap4j-container/)

# 本文
## docker network
Docker Networkは起動時に3つのネットワークを起動する。

```
$ docker network ls
NETWORK ID          NAME                DRIVER              SCOPE
25ccc4b297cd        bridge              bridge              local
f2526e66534a        host                host                local
1fe9308bc08c        none                null                local
```

- host: ホストマシンと同一のネットワークインターフェースを使用する。
- bridge: docker0を使用する(デフォルト)。
- none: ネットワーク・インターフェースを使用しない。

新しくDocker Networkを生成するには`docker network create <ネットワーク名>`を使用します。

## bridge
コンテナのネットワークを確認する。
コンテナを起動していればbridgeと関連するコンテナが"Containers": {}に表示されます。

```
[
    {
        "Name": "bridge",
        "Id": "25ccc4b297cd1d48c834ca27b436b1a3c08bda13c64816d38c2a56f83d57e83f",
        "Created": "2019-11-19T04:39:34.782559207Z",
        "Scope": "local",
        "Driver": "bridge",
        "EnableIPv6": false,
        "IPAM": {
            "Driver": "default",
            "Options": null,
            "Config": [
                {
                    "Subnet": "172.17.0.0/16",
                    "Gateway": "172.17.0.1"
                }
            ]
        },
        "Internal": false,
        "Attachable": false,
        "Ingress": false,
        "ConfigFrom": {
            "Network": ""
        },
        "ConfigOnly": false,
        "Containers": {},
        "Options": {
            "com.docker.network.bridge.default_bridge": "true",
            "com.docker.network.bridge.enable_icc": "true",
            "com.docker.network.bridge.enable_ip_masquerade": "true",
            "com.docker.network.bridge.host_binding_ipv4": "0.0.0.0",
            "com.docker.network.bridge.name": "docker0",
            "com.docker.network.driver.mtu": "1500"
        },
        "Labels": {}
    }
]
```

## docker-compose networkについて
`docker-compose up` で起動したコンテナは新たに生成されたネットワークを使用します。またそのネットワークは指定していなかった場合docker0のインターフェイスを使用します。

# まとめ
今回は曖昧にしか理解していなかったDocker Networkを体系的に理解するために記事にしました。
間違いがあればご指摘ください。

# 参考
[How do I resolve hostnames to Docker containers from the host?](https://stackoverflow.com/questions/36185111/how-do-i-resolve-hostnames-to-docker-containers-from-the-host)
Pythonでcatみたいに標準入力またはファイル名指定でテキストを読み込む方法

`cat`などのコマンドは、ファイル名を引数にとって読み込みを行いますが、ファイル名が与えられない場合は標準入力を読む、という挙動をします。今回はこれをPythonで実現する方法について調べました。

```
$ cat input.txt
$ cat < input.txt
$ python hoge.py input.txt
$ python hoge.py < input.txt
```

# 0. 基本
Pythonでは標準入力もテキストファイルへのポインタもfile object（細かく言うと`_io.TextIOWrapper`クラスのインスタンス）なので、次のような関数は標準入力`sys.stdin`が引数に与えられても動作します。

```python
def process(fp):
    for line in fp:
        print(line, end='')
```
本記事はこの外側の処理をどうするか？というお話で、3通りの方法を検討していきます。

# 1. 素朴に場合分け
```hoge.py

import argparse
import sys


def main():
    parser = argparse.ArgumentParser()
    parser.add_argument('filename', nargs='?')
    args = parser.parse_args()

    if args.filename is None:
        process(sys.stdin)
    else:
        with open(args.filename) as f:
            process(f)

if __name__ == "__main__":
    main()
```
コマンドライン引数が与えられたかどうかで分岐する素直な方法です。なお本稿では、`open()`や`process()`実行時の`OSError`に対する特別な例外処理は考えないものとしますが、`process()`で例外が発生したときでもファイルをcloseするのはマストとします。
ここで`argparse`について補足しておくと、もし`nargs='?'`を省略すると`filename`が必須になってしまいます。

この方法はとってもわかりやすいのですが、釈然としないのは、`process()`を2箇所に記述しているところです。もう少し工夫すれば1箇所にまとめられますが、それでもif-elseがやや冗長に感じます。

# 2. argparse.Filetype()
```hoge.py
import argparse
import sys


def main():
    parser = argparse.ArgumentParser()
    parser.add_argument('infile', nargs='?', type=argparse.FileType(),
                        default=sys.stdin)
    args = parser.parse_args()
    with args.infile as f:
        process(f)
```
少々見慣れない形ですが、全体としては非常にスッキリしました。

`type=argparse.FileType()`とすることで、`parse_args()`の瞬間に`open()`が呼び出され、その戻り値が格納されます。このとき、与えられたファイル名が`-`のときは標準入出力に変換されます。そのため`default='-'`としてしまえば記述がちょっと減って`import sys`も不要になるんですが、知らない人にとってはわかりにくいですし、[ドキュメントの例](https://docs.python.org/ja/3/library/argparse.html)でも`default=sys.stdin`と明示されています。

そして`with`の直後は`open()`を書くのが普通ですが、ファイルオブジェクトそのものにしても戻り値は同じなので、同じ動作になります。`as`を使う意義は薄れますが。

`sys.stdin`は通常わざわざ`with`文と共に使ったり`close()`を呼び出したりしませんが、TextIOWrapperなのでちゃんと定義されています。おそらくこういうときに使うものなのでしょう。（要出典）

# 3. argparse + fileinput
レアケースだと思いますが、ファイル名を複数指定できるようにし、それらを1ファイルずつ読み込みたい、また1個も指定されなかったら標準入力を使うようにしたい、という場合があります。そういう場合は`fileinput`モジュールを併用すると簡単です。

```hoge.py
import argparse
import fileinput


def main():
    parser = argparse.ArgumentParser()
    parser.add_argument('filenames', nargs='*')
    args = parser.parse_args()
    with fileinput.input(args.filenames) as f:
        process(f)
```
`fileinput.input()`は列挙されているファイル名を次々とopenし、もしファイル名が与えられてないときは標準入力に変換してくれます。

ファイル名として`-`が指定された場合も標準入力が呼ばれるので、`$ python hoge.py input.txt -`などと実行するとinput.txtの読み込み後に標準入力も読み込むことになります。まぁこれは大して問題にはならないでしょう！

個人的に難点だと思うのは、この[fileinputモジュール](https://docs.python.org/ja/3/library/fileinput.html)は知らないと標準入力に対応しているように見えないところです。これそんなに有名なモジュールじゃないと思うんですよね…。

# まとめ
1個のファイル**か**標準入力を読むときは2の方法、複数のファイル**または**標準入力を読むときは3の方法を使うのが良いと思います。

(11/23 追記) 複数のファイルを同時に読み込みたい場合はこちら→[Pythonでpasteコマンドのように標準入力または可変個のファイルを同時に読み込む方法](https://qiita.com/hi-asano/items/de83b18ce4365dd6f793)

# 疑問
同じことを他の言語でやろうとすると、大抵は1のようにif-elseでやるしかなく、結構大変なのでは？Perlは簡単らしいですが。
【Flutter】単語アプリ開発 〜スプリントプランニング(スプリント1)〜

# スプリントプランニングとは

スプリントプランニングは、スプリント開始時に
**「スプリント期間内で何ができるか」**
**「どうやって達成させるか」**
の２点を明らかにするミーティングです。

スプリントプランニングでやること
- プロダクトバックログを更新
- プロダクトバックログアイテムの見積を行う
- プラダクトバックログアイテムの内容を具体化する
- タスクの洗い出しとスプリントバックログの作成
- スプリントゴールの合意

## プロダクトバックログを更新

今回は作成したばかりなので実施しない

## プロダクトバックログアイテムの見積を行う

通常は複数人でPJを進行させるため、プランニングポーカーがよく用いられるそう

一旦こんな感じです。というか開発期間しか見積もってない、、、

<img width="580" alt="Screen Shot 2019-11-20 at 11.46.31 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/40849a6f-0f39-cdc2-6b62-ea04c68f1eed.png">
<img width="575" alt="Screen Shot 2019-11-20 at 11.47.09 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/51c609ba-ea93-e18c-88c2-cedc4f0314e0.png">
<img width="578" alt="Screen Shot 2019-11-20 at 11.46.39 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/21d91261-2239-1e28-ebd2-53a98aadcb6a.png">
<img width="581" alt="Screen Shot 2019-11-20 at 11.46.50 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/a68546b7-5da9-1bb7-0dee-1f80374dd5d3.png">
<img width="574" alt="Screen Shot 2019-11-20 at 11.46.58 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/d9d8c98a-6e60-6295-fd91-72f74eec8107.png">


## タスクの洗い出しとスプリントバックログの作成

スプリント1での対象の4つについてさらに分割をして、ToDoリストの中に新規でカードを作成いたしました。
その際にどのプロダクトバックログと紐づくかをわかりやすくするために、PBL（ProductBackLog）番号を付与しました。

![screencapture-trello-b-A1ld6WKQ-pj-2019-11-20-23_58_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/f0bf84f1-8f29-3044-8866-cd6dcec606fb.png)

## スプリントゴールの合意

上記で作成したToDo内のカードの全消化をスプリント1のゴールとします。
GithubActionsでgitignoreしたgoogle-services.jsonを読み込む

# 背景

Firebaseを使ったAndroidアプリ開発なら`google-services.json`は必須のファイルだけれど、プライベートな情報のためgitignoreしていた

# 問題

GithubActionsにてAndroidのワークフローを記述していてBuild error
原因は
`google-services.json is missing`

そのためCI時にのみ`google-services.json`を読み込ませる必要があった

# どうしたか

## もとのjsonファイルをbase64化した値を取得する

例

```shell
cat google-services.json | base64
```

```shell
openssl base64 -in google-services.json -out base64file
```

## 取得した値をGithubRepositoryの`Secrets`に記載する

`Setttings -> Secrets -> Add a new secrets`

![スクリーンショット 2019-11-21 1.54.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260353/ad6b27d6-25a4-a60c-09a0-e3cae75a56f1.png)

例では

NAME: GOOGLE_SERVICE_JSON
VALUE: base64化した値

にしています

## GithubActionsのymlにてdecodeし、配置し直す

※一部のみ記載

* secretsは `$ {{ secrets.NAME }}` の形式でとれる
* それを環境変数に追加し
* decode処理し
* google-services.jsonを置くべき場所に配置する

```android.yml
- name: copy google-service
  env:
    GOOGLE_SERVICE: ${{ secrets.GOOGLE_SERVICE_JSON }}
  run: echo $GOOGLE_SERVICE | base64 --decode --ignore-garbage > ./app/google-services.json
- name: build
  run: ./gradlew build
```

これでうまく緑色になってくれました
参考になれば幸いです
Vue.js propsについて親コンポーネントから子コンポーネントの流れ

親コンポーネントから子コンポーネントにデータを受け取る場合はpropsを使い属性名を指定する必要がある。

```js
//子コンポーネント
Vue.component('コンポーネント名',{
  template: '<p>私は{{name}}です。</p>',
  props: ['name']
})

//親コンポーネント
new Vue({
  el: '',
  data: {  
    list: [
    {id:1, name: '男子A'},
    {id:2, name: '男子B'},
    {id:3, name: '男子C'}      
  ]
 }
})
```

また、子側からpropsデータを使ってデータを渡したり、代入する事は出来ない。
propsのプロパティは親コンポーネントから借りているだけという考え方なので、 勝手に書き換える事は出来ない。

##propsの受け取りデータ型を指定する方法

```js

Vue.component('コンポーネント名'{
  props: {
     val:String //文字列型のみ許可する方法
 }
})
```
remove.bgの画像切り抜きのすごさを楽しむ

# はじめに
twitterで話題になってるらしい「remove.bg」がどれほど
すごいのかを楽しんでみる。
使い心地とかどんな感じで画像が切り取れるのか色々ためしたので
その結果を残す

# URL
ここがサイトになります。
https://www.remove.bg/upload

# 使い方
とりあえずやってみるだけであれば２手で終わる。
①[サイト](https://www.remove.bg/upload)へアクセスする
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/301f358d-bd20-addd-fdad-baa762f68848.png)

②とってきた画像をサイトにD&Dする⇒切り抜き結果が表示される
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/049eaf9d-e0dc-bffd-7aa7-9ab262621814.png)

以上！これだけでも十分すごい。簡単すぎて焦る。

# 他にもできることを探す
単純な切り抜き以外にも色々と親切な機能があることが分かったので報告

## ①切り抜いた画像に好きな背景を張り付けることができる
ナイスすぎるでしょ！
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/02ca00e9-8b4f-8523-9efb-7b6463104747.png)

## ②切り抜き/切り抜きの復元を手動で行える
デフォルトの切り抜きも完ぺきではない。そんな時は手動で手直し。
普通はこういうのも結構大変なはずなんだけど簡単操作でらーくらく。やり方は①の画面の[ERASE/RESTORE]をクリックすると↓↓の画面へ移動するのでそれで実行できる。
![キャプチャ4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/a0bec728-b3a2-340c-6abb-3367de4b2eaf.png)

## ③APIを提供している
APIキーを取得すればAPIとして画像切り抜きをAPIを通して実行してくれる。大盤振る舞いですね。

![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/4b2ac307-3dbc-653f-e35f-346a35e35aec.png)

## ほかにも…
API以外にもwindowsツールとかMacツールとか提供してるっぽい。
このあたりちょっと疲れてきたので、割愛します。

# 色々な画像の切り抜き精度を試してみた

## 2次元画像の切り抜きを試してみた。
フリー素材でおなじみの「いらすとや」の画像で試してみた。

ちゃんと切り抜いてる、スゴイ…。
![キャプチャ6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/f7469f3e-a973-dada-eb3c-e0f1c9b534a3.png)

意地悪で複数人はどうなるか試したら…これはうまく机を認識してくれなかった。
でも元々白い背景はキチンと切り取ってた。賢い。
![キャプチャ7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/12688178-cd51-64e6-4e3e-7338afa35f6d.png)

## 複数人とかの場合はどうなる？
フリー素材サイトから画像をいただいてきていくつか試してみた。
参考：https://pixabay.com/ja/

さすが写真だときっちり見分けて人間だけ切り取った。
![キャプチャ8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/f23bdabe-5e53-0bb8-5989-147715877762.png)

## ふわふわの毛もきれいに切り取れる？
ふわふわの毛とか切り抜き大変だけどどうなるかとやってところ…
大雑把ではあるけど的確に切り取ってた。
これで気になるようなら手動で加工をどうぞってところか。
![キャプチャ9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/84772527-5d34-5e83-6881-fc32a55b9b05.png)

# おわりに
10年以上前に仕事の辛味で画像の切り取りを手伝ったことがあって、
「Webデザイナーって派手な仕事と思ったらこんな地味でつらい仕事もしてるのか…」
と思ったこともあるけど、remove.bgみたいなサービスがあれば
そんな地味仕事も一気に解決！って感じ。
実際のところはremove.bgなくても本職の人はすでに解決手段は確立しているのだろうとは思うけど。
ここ最近の画像加工関連のアプリの進化ってほんとすごい。これもAI技術の進化のたまものなのかなぁ？
Template repositoryを使って、Rails on Dockerの初期設定を共通化させてみた

## Railsプロダクトを作るたびに、毎回Rails環境作るの面倒...

と思うことありませんか？

私の場合は
Dockerの設定して...
いつも使うGemの設定して...
CircleCI設定して...
細かい調整してと...

DockerでRails環境を作成するために、やるようなことって
ちょっと面倒な割りに、共通化出来ることありますよね。

そういう時は、GitHubの新機能である `Template repository` を使ってみるといいです！

参考
https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/

## Template repositoryの説明

手短に説明するとこんな感じです。

- Template repositoryとしてセッティングしたリポジトリのファイルをコピーした状態で新しいリポジトリを作成出来る
- しかし、commit履歴は引き継がないので、ファイルだけコピーしたい場合に重宝する

### 何が便利か？

毎回行うような初期設定などを Template repositoryとして定義しておけば、
プロダクトを作成するときに、そのリポジトリをテンプレートとして使って、初期設定の手間を省ける

### Template repositoryの設定の仕方

1. `Template repository` として使いたいリポジトリを用意
2. Settingsに遷移すると、 `Template repository` という項目があるので、チェックを付けるだけ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98082/9b184f79-5b62-ad02-3970-148addf19b8f.png)

### Template repositoryをテンプレートとして使う方法

1. Template repositoryのトップ画面に遷移
2. `Use this template` という項目があるので、押下する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98082/2d705586-b8b5-8d22-3c28-3d83d4eaa41d.png)
3. リポジトリ作成画面に遷移するので、項目を埋めて、 `Create repository from template` を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98082/c43fc71d-778b-0fda-8fe4-df3d9c715f7d.png)
4. ファイルやディレクトリはTemplate repositoryのものを引き継ぎますが、commit履歴は消えて、initial commitになった状態でリポジトリが作成されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98082/9b6bab66-6c0c-6bc2-ca9d-67953b3802e2.png)


リポジトリ名の下の方に、どのTemplate repositoryから作られたのかの説明も書かれてますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98082/081d9a9b-1d83-cf59-7e5f-4d879aecb0c2.png)

#### Repository作成画面からも選択出来る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98082/4b5b25d3-f320-e5d7-f2b0-1879c4fbb4b1.png)

↓ Repository template を押すと、自身やチームが持っている Template repositoryの一覧が出てくるので、選択出来る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98082/3cf698cd-5bb4-4522-fc24-5b0dbfd22afd.png)


## 実際に作ってみました。

Docker上でRailsを動かすときの初期設定をまとめてあります。
https://github.com/CASIXx1/rails_docker_base

毎回、DockerでRails環境を作るの面倒だなーと思っていたので、このリポジトリを整備しておけば、プロダクトが量産できそうです！！

もちろん私以外のユーザーも使えますので、
もしDockerでRailsを動かしたいけど、セッティング面倒だな...という方がいらっしゃれば、是非使ってみてください！！

随時整備していきます！

## 小ネタ

- Template repositoryから作成したリポジトリも、Template repository化することが出来る
    - 人が作ったTemplate repositoryを自分が作ったTemplate repositoryのように見せることが...w 
    - (リポジトリ名の下のgenerated fromでバレるけど) 
- Template repositoryを使う時は、defaultブランチの最新バージョンの状態をそのままコピーする
    - なので、ブランチごとによって微妙に設定を変えたりする工夫は無駄
    - mysqlを入れたブランチとpostgresqlを入れたブランチで分けようとしたけど、どう頑張ってもdefaultブランチのものがコピーされてしまいました。。
Blenderで選択したオブジェクト階層をすべてサーチするScript

Mayaで言うところのlistRelatives -adコマンド
Mayaでは1行で出来るのに、Blenderでは、簡単には出来ない(?)らしく、自分で再帰関数を作ってやらないと出来ないっぽい。


↓オブジェクトを1つ選択した状態で実行すると、下の階層のオブジェクト名がすべてprintされる

```
import bpy

def return_hierarchy(ob):
	hierarchyList = []
	def recurse(ob):
		hierarchyList.append(ob.name)
		if not len(ob.children) == 0:
			for child in ob.children:
				recurse(child)
		return
	recurse(ob)
	return hierarchyList

selectList = bpy.context.selected_objects
his = return_hierarchy(selectList[0])
for hi in his:
	print(hi)
```

hierarchyList.append(ob.name)を
hierarchyList.append(ob)に変えてやれば、名前じゃなくてオブジェクト自体の取得もできます。


ちなみに、listRelatives -cっぽいことをする方法はこちら
https://qiita.com/pekochun/items/48433271c9d7e20a0b7c

自分用メモ
ちょっと自信ないので、間違ってたら教えてください。
揮発性コンポーネントにuseRefをつかう

ずっとVueやってたんですが、最近React Hooksの登場でまたReactをかじりだしました。

Vueだと揮発性コンポーネント（ポップアップやスナックバーなどの出ては消えていくもの）をグローバルメソッドとして操るには、下記のスライドのようなことをする必要があります。

https://speakerdeck.com/uhck/hui-fa-xing-falsegao-ikonponentowozuo-ruhua?slide=8

Reactだとどうなるのか。useRefを使うといいです。

（っていうかuseRef使い勝手良すぎ…？）

# useRefとは

以下のようにして作った`refContainer`の`current`プロパティには、`initialValue`で指定した、プレーンオブジェクトが入っていて、そのコンポーネントが存在している限りず～～っと同じ参照を持っていて、`current`プロパティの値も変更可能です。

つまり、どこからでも参照可能で変更可能な値を作れます。しかも、変更しても再描画はしません。

```javascript
const refContainer = useRef(initialValue);
```

コンポーネント内で好きな`current`を入れてあげれば、それを通して関数を呼び出したりできちゃうんです。

# 実装

`App.js`は最上層かページコンポーネントかなんかだと思ってください。

`useRef(null)`としていますが、それを`Popup`コンポーネントの`popup`属性に渡しています。

そうすると、`popup.current.open()`や`popup.current.close()`というようにできていることがわかります。

```javascript:app.js
  import React, { useRef } from "react"

  import Layout from "../components/layout"
  import Popup from "../components/popup"

  const App = () => {
    const popup = useRef(null)

    return (
      <Layout>
        <button onClick={() => popup.current.open()}>ポップアップを開く</button>
        <button onClick={() => popup.current.close()}>ポップアップを閉じる</button>

        <Popup popup={popup}>
          Hello useRef Popup!!
        </Popup>
      </Layout>
    )
  }

  export default App
```

`Popup`コンポーネントを見ていきましょう。

受け取った`popup`属性の`current`に値を入れてあげます。

下記の２つのメソッドを作ってあげます。それぞれ実行後のCSSクラスが切り替わり、Transitionするようにしました。

- `open()`メソッド ⇒ `.popup.popup__visible`
- `close()`メソッド ⇒ `.popup`

```javascript:popup.js
import React, { useState } from "react"

const Popup = ({ name, popup, children }) => {
  const [visible, setVisible] = useState(false)

  popup.current = {
    open() {
      setVisible(true)
    },
    close() {
      setVisible(false)
    },
  }

  return (
    <div
      className={`popup ${visible ? "popup__visible" : ""}`}
      name={visible ? name : ""}
    >
      {children}
    </div>
  )
}

export default Popup
```

おまけのCSS

```css
.popup {
  opacity: 0;
  transform: translateY(-300px);
  transition: all 1s ease 0s;
}

.popup__visible {
  opacity: 1;
  transform: translateY(0px);
}
```

`opecity`変わるだけなので、ポップアップ感ないですが、まあやりたいことはできたと思います。

このように`useRef`はプレーンオブジェクトを持つコンテナを作ってくれるだけなので、上書きするもよし、どんなオブジェクトだろうがなにを入れようが問題無しです。

なので、メソッド形式でコンポーネント内部の値を書き換えたいという要求も簡単に叶えることができてしまうのでした。

hook便利すぎですね。以上でした～。
【Flutter】単語帳アプリ作成 〜スプリントゼロ〜

# スプリントゼロ

スプリントゼロでやること
- ビジネスモデルの仮説を立てる
- プロダクトを作る理由と実現方法を明らかにする
- チーム作りのワークショップを行う
- 開発環境を準備する
- プロダクトバックログを準備し、完成の定義を決める

## 1.ビジネスモデルの仮説を立てる

ここはそれほどこだわらないが、、形式的にやってみる。

リーンキャンパスのテンプレートを[こちら](https://watanabe-office.biz/2018/11/13/leancanvas_pptx/)からダウンロードいたしました。

<img width="959" alt="Screen Shot 2019-11-20 at 10.55.22 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/07df731b-b487-ef5b-d91c-48ebc0f35e8f.png">

気づいたことは、[こちら](https://sastd.com/developer-ad-revenue/)の情報的には5万ダウンロードにいって初めて利益がでるような見通し、、遠い、、

## 2.プロダクトを作る理由と表現方法を明らかにする

### プロダクトを作る背景・理由

- Flutterでアプリ開発がしてみたかった
- 忘却曲線で思い出させてくれる単語帳が欲しかった
- そろそろ自作アプリを何かしらリリースまで一通りやってみたかった

### 期限内に達成したい目標

- 2019年内のリリース

### プロジェクトの関係者とコミュニケーション手段

一人。。。コミュニケーション手段。。瞑想。。。

### 実現するためのアーキテクチャ

一人開発のため、クロスプラットフォームでの開発が必須

### 目標を達成するための体制

一人。自分に負けないための時間管理。

### おおよその予算とスケジュール

初期リリースは年内

### リスクと対策

思いつかない。。

## 3.チーム作りのワークショップを行う

一人のため飛ばします。

## 4.開発環境を用意する

Xcode
AndroidStudio
Flutter
等の環境は構築済み

## 5.プロダクトバックログを準備し、完成の定義を決める

trelloを使ってこんな感じで進めました。

![screencapture-trello-b-A1ld6WKQ-pj-2019-11-20-22_19_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/445ffdcd-ddfd-200c-9410-91cfa563c469.png)

<img width="581" alt="Screen Shot 2019-11-20 at 11.07.55 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/3cc8cadb-4872-b5b9-6611-2103298b8e3c.png">

ちなみに優先順位をつけるために、[こちら](https://note.mu/ynunokawa/n/nd9df585d2399)の記事を参考にさせていただきました。

[Trello Priority](https://chrome.google.com/webstore/detail/trello-priority/cnkhgafbkcdclefdglbgdghohlomiofn)というツールが結構便利かも！！
【JavaScript】非同期処理とコールバック関数をセットで理解したい

タイトル通り！

ただのメモ用かもしれないので雑な内容です。

#JavaScriptの基礎

JavaScriptはシングルスレッドで動く言語。つまり並行処理できないということ。

同期処理であろうと非同期処理であろうと2つ以上の処理を同時に行うことはできない。キューに登録された関数が順番に1つずつ実行される。キューに登録される順番が順序通りであることを同期処理、そうとは限らないものを非同期処理という。JavaScript以外（DBなど）に処理を任せている間は、その処理の完了を待たずに次へ進めるため非同期という。

```sample1.js
console.log('いち');
console.log('にー');
console.log('さん');
```

```zsh
$ node sample1.js
> いち
> にー
> さん
```

```sample2.js
setTimeout(function(){console.log('いち')}, 1000);
console.log('にー');
console.log('さん');
```

最初にキューに登録されるのは`setTimeout()`で、その中身の`いち`は1秒後のタイマーの結果として出力される。

次にキューに登録されるのは'にー'、最後が'さん'なので、出力結果は下の様になる。

```zsh
$ node sample2.js
> にー
> さん
> いち
```

ここでは`setTimeout()`の引数として`console.log()`を渡し、`setTimeout()`から`console.log()`を呼び出している。このように、関数Aに関数B処理を**コールバック関数**という。

###あ

`setTimeout()`のタイマーを0に設定したら、待ち時間0秒なので順序通りに出力されるかと思いきや、そうはならない。

```sample3.js
setTimeout(function(){console.log('いち')}, 0);
console.log('にー');
console.log('さん');
```

```zsh
node sample3.js
> にー
> さん
> いち
```

これは、上から順にキューが登録されたと同時にコールバック関数の`console.log('いち');`が非同期処理されたため、JavaScriptは`setTimeout`のタイマーに処理を任せている間に次の処理を進めたということになる。


> 参考文献
>[JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる](https://qiita.com/YoshikiNakamura/items/732ded26c85a7f771a27)







#非同期の例

非同期ではコードが記述通りの順序で処理されない。

```test.js
setTimeout(function() {
    console.log('ハロー');
}, 3000);
console.log('ワールド');
```

アロー関数で省略表記して、

```test.js
setTimeout(() => console.log('ハロー'), 1000);
console.log('ワールド');
```

`node`コマンドで実行すると、

```zsh
$ node test.js
> ワールド    // 直後に出力される
> ハロー    // 1秒後に出力される
```

リクエストのタイミングと順序は、

1. 「1秒後に"ハロー"の出力」をリクエスト
2. 「"ワールド"の出力」をリクエスト

このように1行目をリクエストしたらすかさず2行目に進んでいる。本来なら先にリクエストされた処理が完了するまで次の行に進まないが、

#Promiseオブジェクトとthenメソッド

Promiseはthen()を使うことでコールバックのような処理が可能。
hamlのyoutube埋め込みコード書き方

#こんな感じで書くそうですよ。
``` test.haml
.youtube-container
  %iframe#player{frameborder: "0", height:"390", src: "https://www.youtube.com/embed/6XDjA9d_05M", type: "text/html", width: "640"}
```

#おまけ
youtube idの後ろに下記のパラメータをつけるなどで、再生を制御できるそう。

```
https://www.youtube.com/embed/6XDjA9d_05M?start=412
　=>開始タイミングを秒で指定（ここでは412秒目から再生が開始する）

https://www.youtube.com/embed/6XDjA9d_05M?end=504
　=>終了タイミングを秒で指定（ここでは504秒目に再生が終了する）

https://www.youtube.com/embed/6XDjA9d_05M?start=412&end=504
　=>複数パラメータは＆で繋げる
```

#参考記事
Railsでyoutubeの動画を埋め込む
https://teratail.com/questions/5082
Linuxの調査用にtop、ps、pstreeのログを吐く

沢山のシェルスクリプトが動くLinuxサーバで、
動作が遅くなったから調査してくれ、と言われることがちょこちょこある。

その時、`sar`コマンドなどでメモリ、CPU使用率は後で測れるけど、
どのスクリプトのどんなコマンドがボトルネックになっているのかがよくわからなかったので、
top, ps, pstreeを定期的に吐くようにスクリプトを組んでみる。


## スクリプト

```bash:toppslog.sh

#!/bin/sh

# Logファイル作成
LOG_TIME=`date '+%Y%m%d_%H%M%S'`
LOG_DATE=`date '+%Y%m%d'`
mkdir -p /topps/${LOG_DATE}
LOG_FILE="/topps/${LOG_DATE}/tp${LOGTIME}_${LOG_TIME}.log"

# top
echo -e "top cmd: ${LOG_TIME} \n****************" >> $LOG_FILE
top -n 1 -bc >> $LOG_FILE

# ps 
echo -e "ps cmd: ${LOG_TIME} \n*****************" >> $LOG_FILE
# CPU使用率順に並べる
ps auwx | LANG=C sort -k3,3  >> $LOG_FILE
                                                                                        
# pstree
echo -e "pstree cmd: ${LOG_TIME} \n*****************" >> $LOG_FILE
pstree -all -p  >> $LOG_FILE
```

### cron登録


```
$ crontab -l | grep top
*/10 * * * * /toppslog.sh
```

とりあえず10分毎にログ取得。

## 結果


```text:tp_20191120_122001.log
top cmd: 20191120_122001
****************
  PID USER      PR  NI  VIRT  RES  SHR S %CPU %MEM    TIME+  COMMAND
 1254 user     20   0  110m  968  876 R 99.9  0.0   0:02.61 awk $3=="002" && $4
 1282 user     20   0  110m  976  888 R 99.9  0.0   0:02.23 awk $3=="002" && $4

~中略~


pstree cmd: 20191120_122001
*****************
init,1
  |- HOGEHOGE.sh
  |   `-awk,1254 $3=="002" && $4=="51"
```


topで、どんなコマンドがCPU率、メモリ使用しているかチェック。
そのPIDを元に検索して、pstreeの結果から、どのスクリプトに書かれているコマンドかをチェックができる。
【Python】Shift_JISをUTF-8に変換

# 環境
Python 3.7.5

# ソースコード
```Conversion.py
import codecs
import sys

args = sys.argv

def main():
    shiftjis_path = args[1]
    utf8_path = args[2]

    # 文字コードを utf-8 に変換して保存
    fin = codecs.open(shiftjis_path, "r", "shift_jis")
    fout_utf = codecs.open(utf8_path, "w", "utf-8")
    for row in fin:
        fout_utf.write(row)
    fin.close()
    fout_utf.close()

if __name__ == '__main__':
    main()

```

Shift_JISファイルを読み込みUTF-8で新たにファイルを作成し書き込みを行っています。

# 使い方
変換元ファイルPath、出力先ファイルPathの両方とも相対パスで指定してください！

```
$ python Conversion.py <変換元ファイルのPath> <出力先ファイルのPath>
```

# まとめ
文字コード変換に毎回数分ほど時間がかかっていたので時間短縮のために作成しました。
毎日投稿のつもりでしたが前回の投稿から時間が経ってしまいました。。。
今日からまた3日坊主を始めようと思います！！！
windows format

備忘録シリーズ

## windowsでusbメモリをformatする方法

エクスプローラ

ディスク

フォーマット

クイックフォーマット

# でもubuntuのインストール用USBやHDDはうまくフォーマットできないかも。windowsやmacやlinuxでのfdisk

よく、先頭の2MBくらいしかフォーマットできない場合があります。フォーマットも失敗の場合も。

mac はディスクユーティリティ

Linuxは ```sudo fdisk /dev/sdb```  のような
/dev/sdXのXを探すには、usbをさしてその直後に、```dmesg``` とすると、

```[53114.732349] scsi 1:0:0:0: Direct-Access     BUFFALO  USB Flash Disk   1.00 PQ: 0 ANSI: 6
[53114.733578] sd 1:0:0:0: Attached scsi generic sg1 type 0
[53114.733957] sd 1:0:0:0: [sdb] 30965760 512-byte logical blocks: (15.9 GB/14.8 GiB)
[53114.735938] sd 1:0:0:0: [sdb] Write Protect is off
[53114.735950] sd 1:0:0:0: [sdb] Mode Sense: 2b 00 00 08
[53114.736448] sd 1:0:0:0: [sdb] Write cache: disabled, read cache: enabled, doesn't support DPO or FUA
[53114.755338]  sdb: sdb1 sdb2
```
こんな感じで、sdb1とsdb2があることがわかります。
この場合は、```sudo fdisk /dev/sdb```のようにしましょう。

前置きが長くなりました。

# Gpartedを使いましょう。とっても便利。

``` sudo apt-get install gparted```
でインストールでき、グラフィカルに操作できます。

結局よくわからないまま、とりあえず使えることに、、、、、

## 余談ですが、partedというコマンドがあり、大容量ディスク(>2TB)もフォーマットできます。最近は通常のHDDはpartedを使います。あまり使わなくなったfdisk......
和訳：PEP 20 -- The Zen of Python

# 概要
### 英語
> Long time Pythoneer Tim Peters succinctly channels the BDFL's guiding principles for Python's design into 20 aphorisms, only 19 of which have been written down.

### 日本語
> 長い間PythoneerであるTim PetersがPythonの設計に対するBDFLの基本理念を20の格言を19の文章に簡潔にまとめました。

# The Zen of Python
### 英語
> Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.
Special cases aren't special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.
In the face of ambiguity, refuse the temptation to guess.
There should be one-- and preferably only one --obvious way to do it.
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.
Although never is often better than *right* now.
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea -- let's do more of those!

### 日本語１
>「醜い」よりも「美しい」
「暗黙」よりも「明示」
「複雑」よりも「シンプル」でも、「複雑」でも「わかりづらい」よりはまし
「ネスト」（入れ子状）よりも「フラット」
「密集」よりも「ガラガラ」
読みやすさってのは大事
ルールを破ってまで作るべき特例なんてない 「実用性」は「ピュアさ」（一貫性）に勝る、というのはそうなんだけど
エラーが起こっているのにそれがわからないなんてのは×「そのエラーは通知しなくてもいいよ」と明示的に指定されたのなら話は別だけど
「あいまいなもの」に出会ったら、「推測」で済ませたくなる誘惑には負けないで
何かをやるには、ストレートなやり方がひとつ、たったひとつだけあるはず その方法は一目ではわかりにくいものかもしれないけど（あなたがオランダ人というのなら、話は別かもね）
「やらない」よりも「今やる」 「やらない」が「今すぐやる」よりいいこともよくあるけれど
説明が難しいのなら、その実装は良くないということ 説明がカンタンなら、その実装は良いのかも
名前空間ってのは、すんげーアイデアなんだなぁ。これ、もっと使っていこうよ！

### 日本語２
> 醜より美
暗黙より明示
複雑より単純
ただし、ややこしいより複雑
ネストよりフラット
密より疎
より読みやすく
ルールを破る以上に特別なことなどない
純正さより実用性
エラーを黙認するな
黙認することを明示してれば別
曖昧さに対し憶測するな
筋道は明確なたった一つであるべき
君がオランダ人でない限り、初めは明白ではないかもしれないが…
やらないより今やる
やらないが今やるよりいいこともよくあるが…
説明が難しいなら、そのアイデアは良くない
説明が容易なら、そのアイデアは良い
名前空間は素晴らしいアイデア、もっと使おう！

### 日本語３
>醜いより美しいほうがいい。
暗示するより明示するほうがいい。
複雑であるよりは平易であるほうがいい。
それでも、込み入っているよりは複雑であるほうがまし。
ネストは浅いほうがいい。
密集しているよりは隙間があるほうがいい。
読みやすいことは善である。
特殊であることはルールを破る理由にならない。
しかし、実用性を求めると純粋さが失われることがある。
エラーは隠すな、無視するな。
ただし、わざと隠されているのなら見逃せ。
曖昧なものに出逢ったら、その意味を適当に推測してはいけない。
何かいいやり方があるはずだ。誰が見ても明らかな、たったひとつのやり方が。
そのやり方は一目見ただけではわかりにくいかもしれない。オランダ人にだけわかりやすいなんてこともあるかもしれない。
ずっとやらないでいるよりは、今やれ。
でも、今"すぐ"にやるよりはやらないほうがマシなことが多い。
コードの内容を説明するのが難しいのなら、それは悪い実装である。
コードの内容を容易に説明できるのなら、おそらくそれはよい実装である。
名前空間は優れたアイデアであるため、積極的に利用すべきである。

# 参照元
https://www.lifewithpython.com/2013/01/pep-20-the-zen-of-python.html
https://ct-innovation01.xyz/DL-Freetime/pep-20/
https://www.python.org/dev/peps/pep-0020/
https://qiita.com/IshitaTakeshi/items/e4145921c8dbf7ba57ef
#9 UITableViewCellをカスタマイズする1例

#はじめに
個人のメモ程度の出来なのであまり参考にしないで下さい．


#環境
Xcode：11.2.1
Swift：5.1.2
2019/11



##part1
`View`に`UITableView`を置き，制約を追加し，`UITableViewCell`をその上に置く．
`Attributes identifier`からCellの`identifier`を設定する．

<img width="903" alt="スクリーンショット 2019-11-20 午後11.01.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/de61faeb-d1f8-fb11-2c6e-ac6d0efdd246.png">



##part2
`Table View`を選択した状態で，`Size inspector`の`Row Hight`に任意の数字を入力する．

<img width="259" alt="スクリーンショット 2019-11-20 午後11.15.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/06c44fb2-ab01-20a5-c626-21465f271a6b.png">



##part3
Cellの上に`UILabel`を置く．

<img width="616" alt="スクリーンショット 2019-11-20 午後11.20.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/497a7a15-e9fc-b9a7-540f-4417922b2fb1.png">



##part4
4つの制約を追加し，テキストやテキストサイズを変更する．
これを必要な数だけ，必要なところの制約を追加する．

<img width="266" alt="スクリーンショット 2019-11-20 午後11.21.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/89297614-70a1-457d-93f3-8b98df1c4ed8.png">

<img width="256" alt="スクリーンショット 2019-11-20 午後11.22.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/70615c6e-56a6-8912-dae4-0b43f0df9d2a.png">



##part5
可変長のバーの制約は下の通り．

<img width="259" alt="スクリーンショット 2019-11-20 午後11.53.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/4796369e-cc8c-1b8b-6dac-6a0687f78629.png">

<img width="258" alt="スクリーンショット 2019-11-20 午後11.54.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/2bec0445-1015-2f5a-8610-de430768ecec.png">

###追記
`name Label`の制約は以下．
<img width="266" alt="スクリーンショット 2020-02-24 午後4.46.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/af186459-9304-183b-2c73-b1f98b395404.png">

`votes Label`の制約は以下．
<img width="266" alt="スクリーンショット 2020-02-24 午後4.47.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/6506adf2-4857-dae4-be6b-483bf8f04358.png">



##part6
Subclassが`UITableViewCell`のクラスをXcodeProjectに追加する．

<img width="728" alt="スクリーンショット 2019-11-21 午前0.05.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/d516e0e4-3d0e-58d3-0b66-f16085fd04f0.png">



##part7
`Main.storyboard`で`Cell`を選択した状態で，`Identity inspector`の`Class`を先ほどXcodeProjectに追加したクラスに指定する．

<img width="766" alt="スクリーンショット 2019-11-21 午前0.14.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/59d5c797-5a19-eb6f-ee91-5327a6481a53.png">



##part8
画面を分割し，`可変長のバーの横幅の制約`を先ほど追加したクラスのコードに接続する．

<img width="991" alt="スクリーンショット 2019-11-21 午前0.20.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/ed87638b-b416-1509-5b53-fab58eae4e77.png">

##part9
後はコードと接続してないUIをコードと接続してコードでいじるだけ．

###追記
`ThirdViewController`のLabel等はコードから引っ張ることで同じコードに２つのLabelを関連付けができる．
クラウドサービス導入時にベンダーに確認したいことまとめ

# クラウドサービス購入時にベンダーに確認したいことまとめ

　最近ベンダー選定の機会が増えてきたので、よく聞くことを整理しなおしたり、まとめたりしてみました。


## システムアクセス

　最近SSOできるシステムが標準になってきているので、できればIDとPassを統合したくこの辺りを聞いてみることにしている。

- シングルサインオン可能かどうか？
- シングルサインオンしないIDを作れるか？
- ユーザーIDは変更可能かどうか？
- 一般的な制約を設けることや、変更、ユーザー自身によるリセットは可能か
- 複数回アクセスに失敗した場合ロックがかかる機能などがあるかどうか


## ユーザーサポート

　ユーザーとベンダーの間に落ちるものが無いように様々な角度から確認。

- ベンダー・ユーザーの対応範囲を明確に記載した資料はあるかどうか？
- ユーザーサポート期限に制約はないか？
- ユーザーサポートしない国があるか、サポートが異なる国があるのかどうか？
- ユーザーサポートの問合せの手段にはどのようなものがあるか？
- ユーザーサポートを受け付ける時間帯について教えてほしい
- ユーザーが自力で問題に対応できるようFAQは整備されているか？
- ベンダーの初期導入に関する作業範囲はどこまでか？


## 費用

　ユーザー課金・データ課金などベンダーによって課金の体系が異なるため、自社にとって都合の良い課金体系であれば選定ポイント＋。また、通常運用とは別に初期導入には費用を取られるパターンや問合せ課金なども考えられるため、通常利用以外についても聞くことにしている。

- 利用コスト算出方法の単位は？
- 利用コスト算出方法の期間は？
- 通常利用以外にかかるコストはあるかどうか。


## セキュリティ・コンプライアンス

　ベンダーに自由回答していただき、3社ぐらいの回答結果を横並びにしてみると違いが判って選定がはかどります。

- ベンダーの取組具合を教えてほしい。（よく顧客に提供するセキュリティ関連資料があれば、それがほしい）
- GDPRへの対応で、実施していることがあれば教えてほしい。
- 現場の担当者や開発者がデータを持ち出せないようになっているか、また、その仕組みは？
- 自社データがシステム改良など、こちらで予期しないことのために活用されるケースはあるか？


## 監査対応

　この辺りは対象になるシステムの場合のみ聞いたり、該当する項目だけ聞くことになります。ただ監査への協力がどのぐらい可能かについては聞いておくと後でちょっと楽になれます。

- 自社のJ-SOXに関する要件を満たしているかどうか？
- 自社のIATFに関する要件を満たしているかどうか？
- 自社のISMSに関する要件を満たしているかどうか？
- 監査に関する情報提供について、どの程度協力が可能か？


## サービス内容

　実際に導入予定のサービスそのものについての確認も行いますが、どのシステム導入するにしても聞くことはおおよそ以下のようなものになります。

　継続性・拡張性・緊急時の備え・終了時のデータ扱いなどは、どのシステムでも確認しておいたほうがいいとみています。

- 国によってサービスの提供ができない、品質が変わるなどがあるか？
- ユーザー数・保存データ量・同時アクセス数などに制限はあるか
- 導入実績はどのくらいあるのか
- システムの提供範囲に制限がある場合、それが拡張できるのかどうか
- 災害対策・BCP対策をどのように行っているか？
- バックアップによるデータ戻しはどこまで対応しているか？例えば「特定のデータだけ1週間前のものに戻したい」などといった要件に対応可能か？
- どのクラウドベンダーを使ってサービスを提供しているのか？
- メンテナンスに伴うサービス影響はどのぐらいあるのか？（土台のクラウド・OS・ベンダーの製品それぞれについて確認）
- 予定されたメンテナンスの通知は何日前になるか？連絡方法は？
- SLAについて詳しく教えてほしい
- 英語・中国語・スペイン語・自社の拠点のある国の言語をサポートしているか？
- サービス終了時のデータの扱い（引き渡し方法と廃棄方法）について教えてほしい
- カスタマイズできる部分・できない部分について
- 外部のサービスとの連携があるかどうか
- アクセスログの保持期限と抽出方法について確認したい
- 障害発生時の連絡体制について教えてほしい


## 確認項目シート

　上記項目を表形式にまとめたものがこちらになります。おまけで事前調査シートも少しだけ記載しています。（背景はベンダーに渡さない想定）

[ベンダー確認項目](https://docs.google.com/spreadsheets/d/1y8q0xWlp5CL08nWNAPit9qPLvs9fd8ofyXDyz0HukQo/edit?usp=sharing)


## 参考

- [クラウドサービス 安全利用のすすめ - IPA](https://www.ipa.go.jp/files/000011594.pdf)
今日のミス

初めて書くのであまり過度な期待せずに見て下さい。
プログラミング初心者による恥ずかしいミスを晒します。
今日のミスの話です。

Ruby on railsにてかんたんなページを作ろうとしたのですが、なぜかエラーを吐く始末。
(多分悪いのは自分しかいない。)

何度か試してみるとrailsの画面には飛ぶのに、目的のページが開けない。

No route matches [GET] "/messages/hello"

上のエラーです。

自分の書いたコード(そんなに書いていないのに・・)を遡ること数十秒、見つけました。

原因はいつだってそう私にあります(ドヤ)。
ルーティングをする際のファイル名を書き間違えていました。

文字どうりスペルミスを直し、無事表示させることが出来ました。


はい、今日のミスでした。!

![スクリーンショット 2019-11-21 0.26.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/484985/0fb30f84-90d5-3860-79c8-613d46147f78.png)
VBAでSHA256を計算する。

#この記事について
タイトル通りです。仕事でつかうデータ(主にファイルor文字列)に変更があったかどうかを知りたいときに便利かなと思い，調べたSHA256の計算方法をまとめてみます。

#参考にした記事
[Excel VBA で SHA256](https://qiita.com/nobu-maple/items/ac0094a226e1d7d25ec3)
[VBAでバイナリの読み書き](https://thom.hateblo.jp/entry/2015/08/15/153316)
[目的の文字コードに合ったEncodingオブジェクトを取得する](https://dobon.net/vb/dotnet/string/getencodingobject.html)

#環境
64bit版 Windows10 / VBA(EXCEL): Retail 7.1.1091

#準備
.NET Framework 3.5が有効になっていることを確認しましょう。CreateObjectで.NETの関数を借りてくるので, これが有効になっていないとハッシュを計算するためのオブジェクトが作れません。私はこれでしばらく足止めを食らいました。
「コントロールパネル>プログラム>Windowsの機能の有効化または無効化」から有効にできます。

#処理の流れ
<dl>
  <dt>ファイルのハッシュ化</dt>
  <dd>$ファイル\xrightarrow{\rm コピー}{\rm Byte()}\xrightarrow{\rm SHA256} {\rm Byte(31)}\rightarrow 16進法表示$</dd>
  <dt>文字列のハッシュ化</dt>
  <dd>$文字列\xrightarrow{\rm エンコード} {\rm Byte()}\xrightarrow{\rm SHA256} {\rm Byte(31)}\rightarrow 16進法表示$</dd>
</dl>
このこのうち，ハッシュ(SHA256)の計算はオブジェクトに丸投げするので，
 1. 対象データをどうByteの配列に落とすか
 2. アウトプットの表示をどうするか
という2点を考えればいいことになる。特に，Byte()に変換してからの処理は全く同じ。
文字列はエンコーディング次第で様々なハッシュ値を持ちうるので，文字列のハッシュ値を求める場合にはエンコーディングの種類を決めておく必要がある。…が調べてみるとなぜか文字列のハッシュを計算するのにつかわれるエンコーディングはutf8が主流のようなので，この記事でもそれに従うことにした。

#コード
CreateObjectは比較的重い処理のようなので，何度もハッシュを計算する場合を想定して一度生成したオブジェクトは開放せずに使いまわすようにした。(暗号学的ハッシュは…と言って一般化しすぎるとそうでない例もあるかもしれないので，少なくとも)SHA256のアウトプットは固定長(256bit)の整数で，Byte()としての長さと16進法表示したときの長さは初めからわかっているのでそれらは定数として定義した。

```VisualBasic:
Option Explicit

Private Const SHA256_LENGTH = 32
Private Const SHA256_LENGTH_AS_STRING = 64
    
Private objUTF8 As Object
Private objSHA256 As Object

'文字列からハッシュを計算する関数
Public Function String2SHA256$(str$)
    
    '必要ならオブジェクトを初期化してエンコード
    If objUTF8 Is Nothing Then
        Set objUTF8 = CreateObject("System.Text.UTF8Encoding")
    End If
    Dim code() As Byte
    code = objUTF8.GetBytes_4(str)

    '必要ならオブジェクトを初期化してハッシュを計算
    If objSHA256 Is Nothing Then
        Set objSHA256 = CreateObject("System.Security.Cryptography.SHA256Managed")
    End If    
    Dim hashValue() As Byte
    hashValue = objSHA256.ComputeHash_2(code)

    '16進法表示に変換 
    Dim description As String * SHA256_LENGTH_AS_STRING
    Dim i&
    For i = 0 To SHA256_LENGTH - 1
        Mid(description, i * 2 + 1) = Right("0" & Hex(hashValue(i)), 2)
    Next i

    String2SHA256 = description

End Function

'ファイル(のフルパス)からハッシュを計算する関数
Public Function File2SHA256$(fullPath$)
    
    '指定したファイルがあるかどうか確認
    Dim targetFileExists As Boolean
    targetFileExists = Len(Dir(fullPath)) <> 0
    If Not targetFileExists Then GoTo NoSuchFile

    'ファイル読み込み
    Dim buff() As Byte
    Dim ff&
    ff = FreeFile
    Open fullPath For Binary Lock Read As #ff
    ReDim buff(LOF(ff)-1)
    Get #ff, , buff
    Close #ff

    '必要ならオブジェクトを初期化してハッシュを計算
    If objSHA256 Is Nothing Then
        Set objSHA256 = CreateObject("System.Security.Cryptography.SHA256Managed")
    End If    
    Dim hashValue() As Byte
    hashValue = objSHA256.ComputeHash_2(buff)

    '16進法表示に変換 
    Dim description As String * SHA256_LENGTH_AS_STRING
    Dim i&
    For i = 0 To SHA256_LENGTH - 1
        Mid(description, i * 2 + 1) = Right("0" & Hex(hashValue(i)), 2)
    Next i

    File2SHA256 = description
Exit Function

NoSuchFile:
    MsgBox "そんなファイルないよ。"
End Function



```
【Flutter】単語帳アプリを作ってみる ※随時更新

# プロジェクト概要

単語帳アプリをFlutterを使用して、Android/iOSの両OSで開発する。
すべて一人ではあるが、スクラム開発的に開発してみる。 (参考教材: [スクラム実践入門](https://www.amazon.co.jp/dp/B07JHRL5HN/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1))
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/93db9e89-2793-50e8-a36c-d390e3c0c47f.png)

※随時アップデート情報をこちらに追加していく予定です。

## プロジェクトタイムライン

### 1. スプリントゼロを実施

[【Flutter】単語帳アプリ作成 〜スプリントゼロ〜](https://qiita.com/tetsukick/items/0475bb74a769e58caec8)
作業日: 2019/11/20

### 2. スプリント1

期間: 2019/11/20 - 2019/11/30

#### スプリントプランニング

[【Flutter】単語アプリ開発 〜スプリントプランニング(スプリント1)〜](https://qiita.com/tetsukick/items/3c2453269ae939b3a4c5)
実施日: 2019/11/21
Qiitaのストック数を取得するワンライナー（シェル）

記事のストック数は画面上で確認できないため、APIを叩く必要がある。
お手軽に取得したいときにどうぞ。

## 動作確認環境
mac、fish

## 手順
* QiitaのAPIキーを取得する（詳細は割愛）
* コマンド実行
  * `[ITEM_ID]`と`[API_KEY]`をそれぞれ置き換えて実行する
  * `ITEM_ID`は記事のIDでURLに含まれている

```shell
curl -s -i 'https://qiita.com/api/v2/items/[ITEM_ID]/stockers' -H 'Authorization: Bearer [API_KEY]' | grep total-count
```

## 補足
* ストック数はAPIのレスポンスヘッダーに'total-count'という名前で含まれている
* curlの`-s`は出力の抑制、`-i`はヘッダーを表示

## 参考資料
* https://qiita.com/api/v2/docs#get-apiv2itemsitem_idstockers
kubernetesのcloud-providerを作りたいがエラーがでたのでこれは困ったぞと問題を解決する話

kubernetesには[cloud-provider](https://kubernetes.io/docs/concepts/cluster-administration/cloud-providers/)という機能があります.一般的にはawsや,gkeなどが元から対応しているみたいですね.
また自分でも実装することができるようなので,それならやってみようとした時に出鼻くじかれた話です.

## 環境
Go1.13

## 問題に直面した!!
go 1.13では`go mod init`をすると直下に`go.mod`が作成されます.
そのあとにgo getでいい感じにパッケージを持ってきてくれます.
ただ...

```bash
go get k8s.io/kubernetes/cmd/cloud-controller-manager/app
```
これ動きません
エラーが出ます.

## 解決!
depを使いましょう.これで解決できます.
いい感じにパッケージを持ってきてくれます.

以上です

## 参考
- https://febc-yamamoto.hatenablog.jp/entry/2018/03/29/180014
- https://github.com/sacloud/sakura-cloud-controller-manager
- https://github.com/apache/cloudstack-kubernetes-provider
仕事効率UP！Windows関連ショートカットキー　

Microsoft Officeについては、バージョンによって使えないショートカットキーがあるかもしれないけど、仕事でよく使うものを記載。

ちなみに初投稿。

### 全般ショートカットキー

```:ctrl&nbsp;キー関連
# 選択範囲をコピーする
  ctrl + c

# コピーしたものを貼り付ける
  ctrl + v

# 印刷する
  ctrl + p

# すべてを選択する
  ctrl + a

# ファイルを保存する
  ctrl + s
```

```:alt&nbsp;キー関連
# ウィンドウを切り替える
  alt + tab
```

```:windows&nbsp;キー関連
# デスクトップを表示する
  windows + m

# 画面をロックする
  windows + l

# エクスプローラーを開く
  windows + e

# ファイル名を指定して実行
  windows + r
```

```:shift&nbsp;キー関連
# メニューを開く
  shift + F10
```

### Microsoft Office Wordにて使用できるショートカットキー
```
# 選択範囲に下線を引く
  ctrl + u

# 選択範囲の文字をイタリック体にする
  ctrl + i

# 選択範囲の文字をボールド体にする
  ctrl + b

# 選択範囲に取り消し線を引く
  ctrl + 5
```

### Microsoft Office Excelにて使用できるショートカットキー
```
# 1つ上のセルの値をコピー＆ペーストする
  ctrl + d

# 左のセルの値をコピー＆ペーストする
  ctrl + r

# 列を全て選択する
  ctrl + space

# 選択しているセルをアクティブにする
  F2

# 前の処理を繰り返す
  F4
```

### Microsoft Outlookにて使用できるショートカットキー
```
# 選択範囲のハイパーリンクを開く
  ctrl + k
```
PHPの警告修正メモ

長期運用コンテンツで放置されつづけていた警告を修正した際のメモです

## Warning

### 引数があってない
``` 
Missing argument
``` 
関数の引数の数が違う

``` 
sprintf(): Too few arguments
```
変換指定子と引数の数が違う

### 型が違う

```
str_pad() expects parameter 1 to be string, object given
```

string型にint型を渡している

```
implode(): Invalid arguments passed
```
配列じゃないものを渡している

```
Illegal string offset
```
配列ではなく文字列を渡している

### mt_rand
```
mt_rand(): max(0) is smaller than min(1)
```
最小値が最大値を上回っている

## notice

### 定数の宣言
``` 
Use of undefined constant
```
定数を""で宣言している　→　''に修正


### 存在しない
```
Undefined [offset,index,variable,property]
```
```
Trying to get property of non-object in
```

存在しないものを指定している

### 配列
```
Array to string conversion
```
array_diffに多次元配列を渡していた　→ foreachで展開して一次元配列同士で比較


## Strict Standards

```
Non-static method
```
staticにnattenai


```
Only variables should be passed by reference in
```
参照渡しを要求するメソッドに値を直接渡して呼び出している


```
Declaration of XXX
```
オーバライドしたメソッドの引数の数などが親クラスと異なっている
ActiveAdmin における定義済みコールバック

[ドキュメント](https://activeadmin.info/)に見つからず、[ソース](https://github.com/activeadmin/activeadmin/)を読んでいたら見つけたのでまとめ。

# 定義済みコールバック

https://github.com/activeadmin/activeadmin/blob/master/lib/active_admin/resource_dsl.rb#L162

| コールバック | new | create | update | destroy |
|---|:-:|:-:|:-:|:-:|
| before_build, after_build | o | o
| before_create, after_create | | o |
| before_update, after_update | | | o |
| before_save, after_save | | o | o |
| before_destroy, after_destroy | | | | o |

## 使い方

controllerブロックを使わずに、すっきり書けます。

```rb
ActiveAdmin.register Post do
  after_build do |post|
    post.author = current_user
  end
end
```

controllerブロックで囲っても動作しました。

```rb
ActiveAdmin.register Post do
  controller do
    after_build do |post|
      post.author = current_user
    end
  end
end
```

# ソース

ActiveSupport のコールバックを使わず、シンプルな実装が追加されています。

https://github.com/activeadmin/activeadmin/blob/master/lib/active_admin/callbacks.rb
年末まで毎日webサイトを作り続ける大学生 〜33日目 CSSでシーソーを作る〜

##はじめに
こんにちは！@70days_jsです。
気づけばもう11月も終盤ですね。

さて、今日はcssでシーソーを作ってみました。
右というボタンをhoverすれば右に、左をhoverすれば左に傾くようになっています。

今日は33日目。(2019/11/20)
よろしくお願いします。

##サイトURL
- https://sin2cos21.github.io/day33.html

##やったこと
cssでシーソーを作りました。↓
![test2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/2fa522a6-173e-7bcd-3506-aec6ed2cd08b.gif)

htmlはこんな感じです。（全体）↓

```html
<body>
    <div id="left-button">left</div>
    <div id="right-button">right</div>
    <div class="bar-wrapper">
        <span id="right-human"><img src="day33L.jpeg" alt="ガンジーの画像"></span>
        <div class="bar"></div>
        <span id="left-human"><img src="day33R.jpeg" alt="サンタクロースの画像"></span>
    </div>
    <div class="triangle"></div>
</body>
```
bodyの中にdivを4つ作って、上から2つはボタン、3つ目はしーそー&人、4つ目がシーソーの台（三角形）です。
シーソーの棒を人間と同時に傾かせるにはどうしようかとか、
cssだけでボタンhoverで他要素に動きをつけるにはどうしようかとか
色々考えた結果、最終的にこの構成になりました。

次は、cssを重要なところだけ順に説明していきます。

まずシーソーの棒と人間はabsoluteとrelativeで位置を調整しています。

```css
.bar-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 30px;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

#right-human {
    position: relative;
    top: -30px;
    right: -100px;
}

#left-human {
    position: relative;
    top: -30px;
    right: 100px;
}
```

hover時に他要素を動かす方法は、ちょっと面倒ですがこんな感じです。↓

```css
#left-button:hover + #right-button + .bar-wrapper {
    animation-name: left;
    animation-duration: 3s;
}
#right-button:hover + .bar-wrapper {
    animation-name: right;
    animation-duration: 3s;
}
```
間接セレクタを使っているので、html側で要素の位置を移動させたら動かなくなります。ここら辺は書いていて正直微妙だなと思ったので、今後別の方法を考えていきたいですね。

アニメーションはすごくシンプルです。↓

```css
@keyframes left {
    0%{
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    80%{
        transform: translateX(-50%) translateY(-50%) rotate(-15deg);
    }
    100%{
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
}
}
@keyframes right {
    0%{
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    80%{
        transform: translateX(-50%) translateY(-50%) rotate(15deg);
    }
    100%{
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
}
```

rotateで回しているだけ。

そして最後にシーソーを支える台の三角形の作り方。
正三角形じゃなくてちょっと尖るように書きました。

```css
.triangle {
    border-top: 80px solid transparent;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: 80px solid black;
}
```

borderのtop, right, leftを透明にすることで三角形に見せています。
正三角形じゃなくするためにtopとbottomは大きめに、rightとleftは小さめに設定しました。


##感想
もっと躍動的なものを作りたかったんですが、ちょっとまだ技術不足でした。
hoverを離すとスムーズに戻るのではなくカクッと戻るところも改良したいですね。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。



##参考
1. アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO (https://icooon-mono.com/)

画像を使わせていただきました。とてもいい感じのアイコンでした！
ありがとうございます！
Java入門時のリンク集&メモ(超自分用)

Javaの学習をしたときに参考にしたサイト(超個人的な備忘メモです。。。)  


## Samurai Blog様
- [【一通り理解しよう】UMLのクラス図の描き方を解説](https://www.sejuku.net/blog/86582)
- [【Java入門】コンストラクタの使い方総まとめ(クラス/インスタンス)](https://www.sejuku.net/blog/24681)
- [【Java入門】thisとは？ 意味や使い方のキホンを解説します！](https://www.sejuku.net/blog/19815)
- [【Java】superとは？意味や使い方について詳しく解説](https://www.sejuku.net/blog/20081)
- [【Java入門】継承とコンストラクタの呼び出し(super/this)](https://www.sejuku.net/blog/20896)

## デザインパターン(TECHSCORE様)
- [デザインパターン INDEX](https://www.techscore.com/tech/DesignPattern/index.html/)

## Tips
### returnでのインクリメント/デクリメント
こんなとき  

```java:Main.java
class SampleClass {
    private int member1=0;

    public int incrementLocal1(int local){
        return local++;
    }
}
public class Main {
  public static void main(String[] args){
    SampleClass sc = new SampleClass();
     System.out.println("ローカル変数: " + sc.incrementLocal1(0));
  }
}
```  
実行結果
→ローカル変数：1を期待したが・・・  

```
ローカル変数: 0
```

インクリメントされた値が返ってこないので見直し。

```java:Main.java
class SampleClass {
    private int member1=0;

    public int incrementLocal1(int local){
        //return local++;
        return ++local;  //インクリメント演算子を変数の前に記述。
    }
}
public class Main {
  public static void main(String[] args){
    SampleClass sc = new SampleClass();
     System.out.println("ローカル変数: " + sc.incrementLocal1(0));
  }
}
```  
実行結果

```
ローカル変数: 1
```

ということで、インクリメント演算子/デクリメント演算子について  
#### 変数の前に記述すると「処理の開始時にインクリメント/デクリメント」   

```java:イメージ
i=i+1;
return i;
```

#### 変数の後に記述すると「処理の終了後にインクリメント/デクリメント」
```java:イメージ
return i;  //インクリメントされる前の値がreturnされる
i=i+1;
```
HTML/CSSのコーディングスピードを爆速にする〜Emmet〜

### Emmetって？

エメットって読む。
HTML/CSSを効率的に書くためのプラグイン
Sublimetext、VisualStadioCodeなどの様々なIDEに対応

### 事前準備

VisualStadioCodeは標準搭載。
プラグインのインストールは不要。

### どのくらい早くかける

ためしにHTMLファイルに「!」を入力する。
一瞬で、HTMLテンプレートが記載される

![ezgif-4-da1d4ea2921d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/9f5f723c-1b02-1bf5-419f-d521758ee20a.gif)

### どのくらい早くかける　その２

以下のHTMLを書くためにEmmentで記述するには

▼　完成形

```html
<div id="only" class="test"><div>
```

▼　Emment

```text
div#only.test
```

![ezgif-4-3bbad6738917.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/f044d168-bf0d-4390-04f3-364641e87433.gif)

他にもいろんな記述がかける。
詳しくは、ドットインストールで学習！

https://dotinstall.com/lessons/basic_emmet_v3