OmniAICreator/Qiita-1.07M huggingface dataset:
ssh先のtmuxでssh-agentの接続が切れてしまう問題の回避策

## workaround

tmuxを起動するhomeディレクトリの `.bashrc` に以下の設定を追加する

```bash:~/.bashrc
[[ $SSH_AUTH_SOCK != $HOME/.ssh/sock && -S $SSH_AUTH_SOCK ]] \
    && ln -snf "$SSH_AUTH_SOCK" "$HOME/.ssh/sock" \
    && export SSH_AUTH_SOCK="$HOME/.ssh/sock"
```

## 参考:

https://werat.github.io/2017/02/04/tmux-ssh-agent-forwarding.html
https://serverok.in/ssh-agent-forwarding-with-tmux
https://gist.github.com/martijnvermaat/8070533
https://qiita.com/sonots/items/2d7950a68da0a02ba7e4
BOM付きUTF-8

## BOM付きUTF-8とは

バイトオーダーマーク (英: byte order mark) あるいはバイト順マーク（バイトじゅんマーク）は通称BOM（ボム）といわれる、Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。(出典:[wikipedia](https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%88%E3%82%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%83%9E%E3%83%BC%E3%82%AF))

## BOMのせいで何が起こるか
UTF-8形式などのテキストファイルを読み込んだ際、BOMがついていることによって、先頭の文字列のみ長さが長くなります。
これはvar_dumpなどで表示させることはできないので、かなり厄介です。
文字列で扱う場合は取り除いておく必要があります。

## 取り除くには
phpでは次のようにして取り除けます。

```php
$str = preg_replace('/^\xEF\xBB\xBF/', '', $str);
```

## まとめ
UTF-8形式のテキストファイルを読み込んだ際に最初の文字列だけ不可解な挙動をする場合はBOMを疑ってみてください。
気づくことができると、取り除くことは簡単にできます。
Gitのユーザ情報設定メモ

git commitする時に必要な、ユーザ名とメールアドレス情報設定。
commitしようとした時に空だと設定してねと怒られる。PCセットアップ時とかにいつも忘れる。
(エラーメッセージ中でも以下のコマンドを実行せよと言われている…)

## globalで設定する場合

(その端末の)ユーザ全体で適用される。

```bash
$ git config --global user.email "you@example.com"
$ git config --global user.name "Your Name"
```

確認

```bash
$ git config --global -l
```

以下の行が入力した通りに表示されていればOK。

```
user.name=Your Name
user.email=you@example.com
```

## localで設定する場合

複数アカウントを使っている場合などに、特定ポジトリだけの設定をしたい場合は、そのリポジトリ内で、`--global`を外して実行すればOK。

```bash
$ git config user.email "you@example.com"
$ git config user.name "Your Name"
```

確認

```bash
$ git config --local -l
```

## 参考
もっとしっかり書いてあった…
[gitconfig の基本を理解する - Qiita](https://qiita.com/shionit/items/fb4a1a30538f8d335b35)
RPAとは


RPA,SFA,CRMなど注目を浴びているので
そのうちのRPAについて書こうと思います。


#  RPAとは
Robotic Process Automation（ロボティック・プロセス・オートメーション）

意味としては、ロボットが業務プロセスを自動化することを指します。

# RPAの活躍例

## 受発注業務(1連作業の自動化)
BtoB企業における受発注業務などがあり
Webブラウザやメールから受注データを取得し、基幹システムにアップロードできる形にデータ変換。
データを基幹システムへアップするまでの一連の流れの自動化などがあります。


## 税務調査向け提出書類の自動作成(情報の収集)
各支店に、税務署より定期的に税務調査に関する資料提供をしているとして。
税務調査では、特定の個人に関する口座情報や取引情報等を複数のデータベースから
それぞれ調査しなければならず、書類作成が事務スタッフの大きな負担になっていた。

RPAツールを使うことにより、異なるデータベースから必要な情報を調べて
種類に書類に自動で転記されるようにした。

その結果、税務署への回答書作成にかかる時間が70%以上
時間にして年間15,000時間もの時間を削減できるようになった。

## 経理部門での転記作業の効率化(データ受け渡し)

経費精算や取引先への支払依頼は申請システムを経由して経理担当に来ていた。
最終的には基幹システムに申請内容を入力しなければならなかったが
申請内容が正しいのかの確認と、申請システムはWebで基幹システムは非Webでデータの受け渡しが容易でない
との理由から経理担当者が手作業で行っていた。

RPAを活用することにより、ルールに基づく自動チェックで申請内容の確認作業を自動化
データの受け渡しにおける問題もRPAツールの機能で解消することにより
手作業を自動処理に置き換えることができた。

# RPAにプログラミング必要❓

RPA提供の会社なら開発の段階で必要

一般使用の場合は業務プロセスを記憶させ、プロセスが条件によって分岐する場合は
それぞれの条件と条件に応じた動きをツール上に設定することで自動化を行います。
2桁から十の位と一の位を取得する

自己紹介：現在はscalaとAngularを書いています。

## 数字の正規表現
```ruby
def slice_num(input)
  ten = (input/10) % 10
  one = (input/1) % 10
  return ten, one
end

puts "2桁の整数を入力してください"
input = gets.to_i
ten, one = slice_num(input)
puts "足し算結果と掛算結果の合計値は#{(ten+one)+(ten*one)}です"
```
ユーザーが整数2桁を入力するとその数字を
(十の位+一の位)+(十の位*一の位)を計算し
その計算結果を出力します。

to_iメソッドで入力した内容を数字型にします
slice_numの返り値をten, oneに入れます
ten = (input/10) % 10の記述にて2桁の整数を10で割り、その値を10で割った際の余をだすことで十の位を取り出すことができる
one = (input/1) % 10の記述にて2桁の整数を1で割り、その値を10で割った際の余をだすことで一の位を取り出すことだできる
その返り値をreturnで戻すことで計算に用いることができる

## 追記
コメント欄にてご教授いただいた内容も記載します。
### divmodメソッド

```ruby
def slice_num(input)
  ten, one = (input % 100).divmod(10)
  return ten, one
end

puts "2桁の整数を入力してください"
input = gets.to_i
ten, one = slice_num(input)
puts "足し算結果と掛算結果の合計値は#{(ten+one)+(ten*one)}です"
```
x.divmod(y)
divmodメソッドを使用するとxをyで割った商と余を取得することができます。
この場合xがtenにyがoneに代入されていますね。

### digitメソッド
```ruby
def slice_num(input)
  one, ten = input.digits.take(2)
  return ten, one
end

puts "2桁の整数を入力してください"
input = gets.to_i
ten, one = slice_num(input)
puts "足し算結果と掛算結果の合計値は#{(one+ten)+(one*ten)}です"
```
input.digits.take(2)にて引数で渡されたinputに対しdigitsを使用しtakeで取得します。
take(2)では一の位、十の位までを取得します。
take(4)にした場合には、一、十、百、千までを取得します。
返り値は一、十の順番で代入されるため、今までと異なり、one、tenと変数を置いていく必要があります。
活動記録(2020.3.1)

#週末やったこと

・どこから開発を始めてよいのか分からず、AWS、Docker周りの教材をひたすらウロウロしていた。
docker-compose.yml周りが難解で結局ローカルサーバーすら立ち上がらなかった…
・MENTA加入から使い始めたSlackは素晴らしい情報共有アプリなので他の有料会員制チームスペースにも参加。
・GitとGithubの使い方を少々学んだ。これも急務…
**→擬似コードレビューやテスティングをこなすことによって自分の技術力を飛躍的に伸ばせるのではないか？**


#課題・不明点
・Rubyの勉強は平日でもやれるので休日はインフラに重点置いて学習
・RDS組み込めるか→そのままMySQLで開発すればいけるっぽい(多分いけない)
・自分のポートフォリオに合致した技術の組み合わせかどうかは教材によって異なるので注意する。環境構築は以下の教材、サイトが良さげ。

Udemy
『フルスタックエンジニアが教える 即戦力エンジニア養成講座』8.5h
BootstrapはGemを使用する。
既に学習済の内容も多いようなので全て見る必要はなさそう。

『ゼロからはじめるDockerによるアプリケーション実行環境構築』5.5h

仁科俊晴氏のブログ
https://nishinatoshiharu.com/docker-rails-server/

これらに早く辿り着いてさっさと１周しておけばよかった…

以下、入門Dockerよりdocker-compose.ymlの構成。
これを噛み砕けるようにする。
インデントが重要。以下では、nginx、app、mysqlの3つのservicesを定義している。
nginx→ここはapacheでよい？


```

version: '3.7'

services:
  nginx:
    build:
      context: .
      dockerfile: docker/nginx/Dockerfile
    volumes:
      - ./public:/var/www/html/public:ro
    ports:
      - 8080:80
    environment:
      PHP_HOST: app

  app:
    build:
      context: .
      dockerfile: Dockerfile
    env_file:
      - .env.example
    # volumes:
    #   - .:/var/www/html:cached

  mysql:
    image: mysql:5.7
    volumes:
      - ./mysql:/var/lib/mysql:delegated
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_general_ci
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
    ports: 
      - 13306:3306
```
プログラミングスクール卒業後３ヶ月たった所感

2019年10月に最近youtubeでよく広告を見る某プログラミングスクールに通い、11月より機械学習エンジニア・データサイエンティストとして現職につきました。
卒業後３ヶ月経った今、スクールで学んだことで役立ったこと、今大変なことなどをつらつらと書いていきたいと思います。

# 経歴
2015年４月　食品会社の研究・開発職として４年間務める
2019年7月　プログラミングスクール学習開始
2019年10月　プログラミングスクール卒業
2019年11月　機械学習エンジニア・データサイエンティストとして転職

# スキルセット
## 言語の使用状況
| |スクール|転職後 |
|:--|:--:|:--:|
|HTML|○|○|
|CSS|○|○|
|JavaScript|○|○|
|SQL|○|△|
|Linux|○|○|
|Ruby|○|-|
|Python|-|○|

## フレームワークの使用状況
| |スクール|転職後 |
|:--|:--:|:--:|
|SCSS|○|○|
|jQuery|○|△|
|Vue|-|○|
|Ruby on Rails|○|-|
|Flask|-|○|
|Django|-|○|

## インフラ等
| |スクール|転職後 |
|:--|:--:|:--:|
|Git/Github|○|○|
|Nginx|○|-|
|EC2(AWS)|○|○|
|S3(AWS)|○|○|


# スクールについて
## 役立ったこと
* HTML/CSS/JavaScript/Linuxについて基礎が学べ、今でもシステムを作成する際に役立っている
* Ruby→Pythonに言語が変わったがどちらも動的型付けなため、基礎的な文法を学ぶことへの学習コストはかからなかった
* EC2およびS3の作成・運用の基礎が学べ、現職ではシステムのデプロイは全てAWSを用いているため、すんなり業務に入ることができた
* 現職では頻繁には使用しないが、Gitを利用した複数人の開発の経験は業務の随所で役立つ
* メンターへの質問シートの書き方を守ることで、先輩エンジニアなどに質問する際に、何が問題で・どこで詰まっているのかが明確に伝えられ、回答を頂きやすい


## 役立たなかったこと
基本的には学んだことはある程度役立つと思いますが、下記点は仕方ないと考えていました。

* スクールでRubyを学んだが、現職では全く使用しないこと（機械学習案件を志望していたため、仕方ないと割り切ってはいました）

## 転職前にやるべきだったこと
1. 簡単でもいいので、新しい職場で使用するであろう言語で簡易的なシステムやアプリをデプロイまで持っていく

##### 理由
コードの書き方や、フレームワークを予め触っておいて、素早く職場に馴染めるようにもっと努力をすべきと思いました。

2. AWSのサービスをより理解しておく

##### 理由
最近のサービスのデプロイのほとんどはAWSを利用していると思います。無料枠内で学ぶのもいいですが、実際には有料で数万円数十万円をかけてシステムを運用します。そのため少しの金額でも身銭を切って、ドメインの取り方を学んだり、アクセスの分散方法を学ぶなど、AWSというサービスを少しでも多く理解しておいた方がよかったと思いました。

3. 綺麗なコードを書く意識をつける・練習する

##### 理由
シンプルにレビュアーが大変なのと、あとで改修する際に自分でもわからなくなってしまうので、綺麗なコードを意識することは非常に大事です。（作者はめっちゃ冗長に書きすぎて、最初はレビューの時間が非常にかかってしまいました）

## 今大変なこと
1. 想像以上にJavaScriptを多用するため、様々な機能を覚える必要がある
2. 基本的に少人数でシステムを作成したり、データ分析を行うため分からない部分が多く、仕事が止まりやすい

他にもいろいろ大変なこともあるのですが、結論としては悩んだらわかりそうな人に聞く！！これが仕事をうまく進める方法だと思います。私自身人に聞くということが苦手で、どうしても１人でやろうとしがちだったのでした。しかし、先輩エンジニアに聞いたら数分で解決してくれたり、アドバイスしてくれるため、１時間もかけて調べるよりも、わかる人に聞いた方が100％早いです！！
Firebase Cloud Functionsの実行ファイルが見つからないときにやったこと

## 概要
TypeScriptでFirebase Cloud Functionsを使っていたときの構成として実装をsrcで書いているが、
ユニットテストがTypeScriptで書きたくなったときに \_\_tests__ などのディレクトリをrootに作成した場合、
デフォルトではコンパイル時libディレクトリに srcと \_\_tests__ のディレクトリが作成される。
このときpackage.jsonのmainが `"main": "lib/index.js"` となっているのでFirebase Functionsの起動時にファイルが見つからないというエラーになる。

### 環境
|ライブラリ|バージョン|補足|
|---|---|---|
|typescript|3.7.2|コンパイルに必要|
|ttypescript|1.5.8|パスの変更などのpluginを利用する際に必要|


## 解消方法
1. mainで参照する起動ファイルをlib/src/index.jsにする
2. そもそもlibディレクトリにsrcなどのディレクトリができないようにする

### 1. mainで参照する起動ファイルをlib/src/index.jsにする
実装としては、とりあえず以下のようにするだけ

```json:package.json
{
  "main": "lib/src/index.js"
}
```

### 2. そもそもlibディレクトリにsrcなどのディレクトリができないようにする
TypeScriptのtsconfigでexcludeする

```json:tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": false,
    "strict": true,
    "target": "es2017",
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    },
    "plugins": [{ "transform": "@zerollup/ts-transform-paths" }]
  },
  "compileOnSave": true,
  "exclude": ["node_modules", "__tests__"]
}
```

これで一旦buildと実行はうまくいくが、次にVSCodeのほうが\_\_tests__のファイルにてpath解決ができなくなる。
そのため、上記ファイルからexcludeを削除して、以下のようなファイルを作成する

```json:tsconfig.function.json
{
  "extends": "./tsconfig.json",
  "exclude": ["node_modules", "__tests__"]
}
```

そして、build時の参照先のjsonを新たに作成したjsonに変更する

```json:package.json
{
  "name": "functions",
  "scripts": {
    "lint": "tslint --project tsconfin.function.json",
    "build": "ttsc --project tsconfig.function.json",
    "dev": "firebase emulators:start --only functions",
    "serve": "npm run build && firebase serve --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "npm run build && firebase deploy --only functions",
    "logs": "firebase functions:log",
    "test": "jest"
  },
  "main": "lib/index.js"
}
```

こうするとVSCodeの参照はtsconfig.jsonのままなので、path参照はうまくいくようになる。

## まとめ
まだそこまでTypeScriptとFirebase Cloud Functionを半年ぐらいだけど設定が色々あって覚えきれていない。
正直今回は１でいいとは思うが、もし何かで困ったときにこのあたりの設定を見つめ直すというのもありかもしれない

Firebase Functionsでdeployされるファイルはfirebase.jsonのsourceに書いてあるディレクトリとファイル全てになるため、
deploy時間を早くしたいとかの場合は、このあたりの設定も見直したほうが良さそう
ただ、そもそもFunctionsでそんなに大きなプロジェクトを作るほうが間違いな気もする。GAEとかでもいいのではないか？
[整理用]Python開発環境

整理がてら自分のPython開発環境のメモ

## 用途

* Deep learning / 画像処理の開発
* リモートセンシング

## 方針

* なるべく楽に導入
* 管理は最低限出来れば良い
* コードを楽に書ける
  * 補完やフォーマットなど

## OS: Ubuntu 18.04

* ライブラリなどの導入がWindowsに比べて楽
* 最近はそうでもないけど、Ubuntuじゃないと動かないものもあったので

## 環境管理: Anaconda

* 機械学習で必要なのが一通りインストールされる + 最低限の環境管理が出来るため
* 主なライブラリは以下
  * numpyとかAnacondaについてくるのは省く
  * geopandasはないとやってられない  

```python

# Deep learning用
pytorch
torchvision
tensorboard

# 画像処理用
opencv

# リモートセンシング用
gdal
qgis
geopandas
```

## エディタ: VSCode

* Extensionの充実
  * Remote Development
     * リモートサーバ上(GPUサーバ)で開発しているため
     * Extensionがリモート先でも使えるのがよい
  * ms-python
     * Microsoft公式Extension
     * イライラしない程度に補完してくれる
  * Bracket Pair Colorizer
     * 対応する括弧の色付け
* LinterやFormatterの設定が楽
* notebookファイル編集が出来る

### Linter: Flake8

* 厳しすぎず緩すぎずといった感じ
* `max-line-length = 120, max-complexity = 10`で使用

### Formatter: yapf

* Format後の感じが一番しっくり来たので
* Flake8と同じく`column_limit = 120`で使用

## おわりに

* albumentationsとか便利系も今後は入れていきたい
* 他に良さげなものがあれば教えていただけるとありがたいです
ビジネスフレームワークとは？まとめ

<h2>概要</h2>
仕事をしている中で業務効率の高い人ほどビジネスフレームワークを使用している傾向にあること、しかし、ビジネスフレームワークを学ぶ上でいまいち私にとって分かりやすい情報がまとまっていないと感じたので勉強しながら書き記していこうと思います。

<h2>目次</h2>
・ビジネスフレームワークとは？
・ビジネスフレームワークを学ぶことのメリットは？
・具体的にどんなものがあるの？

<h2>そもそもビジネスフレームワークとは？</h2>
ビジネスフレームワークとは「ビジネスの手法をテンプレート化すること」です。
簡単に言うと「仕事の進め方にルールを定める」ということです。
ルールを定めることで様々なメリットがあります。

<h2>ビジネスフレームワークを学ぶことのメリットは？</h2>
個人的にビジネスフレームワークを使うことによるメリットは以下の3つがあげられます。

<h5>1.仕事のスピードが格段に上がる</h5>
<h5>2.誰にでもわかる資料が作れる</h5>
<h5>3.資料の作成やテストを行う時の観点漏れがなくなる</h5>

<h2>具体的にどんなビジネスフレームワークがあるのか？</h2>
自分が働く上で意識しているフレームワークを10個ほどまとめました。

<h4>1.5W1H</h4>
用途：全ての資料、会話などなど
使い方：知っている人は多いですが、使いこなせてる人は少ないイメージ。
5つのWと1つのHを意識して資料を作成する。WはWhen(いつ)Where(どこで)Who(誰が)What(何を) Why(なぜ)、HはHow(どのようにして)。
メリット：資料・会話が伝わるようになる。認識齟齬がなくなる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402218/efc0bb69-7573-9dd9-209e-d700e4ac21b6.png)
<h4>2.PDCA</h4>
用途：ビジネスライフ、日常などなど
使い方：業務において実行すべきサイクル。Plan(計画)を立てDo(行動)をし、Check(評価・振り返り)、Action(改善)を行う。計画・行動はしても振り返り・内省を行わないと効果が薄いため必ずCheckを行う習慣を付けると成長に繋がります。
メリット：行動について常にブラッシュアップすることを心掛けるため、成長するためには必須のフレームワーク
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402218/8b45da3c-ff09-8909-0c77-ea0901598cf3.png)

<h4>3.守破離</h4>
用途：資料作成など
使い方：「守」有識者の資料の型を守り、スキルを自分のものにする。「破」有識者の資料を自分がより良いと思う資料に模索していく。「離」そのスキルの本質を掴んでいるため、既存の型・概念から離れることが可能になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402218/01e0fc7e-f0b4-fa3f-d80e-30524b09b61e.png)

<h4>4.GPO(Get Process Output)</h4>
用途：検証資料の作成など
使い方：必要な元データを全て抽出、次にデータに対し計算処理・加工処理を行い、最後に見やすい形にまとめる。
メリット：作業の進捗が混乱しづらい。構成がまとまる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402218/767436f8-02d8-5696-f739-e017e7bc942f.png)

<h4>5.MECE</h4>
用途：説明用資料、テスト作成など
使い方：「漏れなく・ダブりなく」を意味する。資料などを作成する際には漏れがないか、ダブりがないかを表などを使用し、一目で分かるようにしておく。
メリット：自分の考えの整理につながる。レビュワーが見たときに一目で観点の過不足に気付ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402218/62663c75-d588-8734-b025-62c4929a54dd.png)


<h4>6.なぜ分析</h4>
用途：自己分析、業務想定など
使い方：一つの物事について7回なぜを繰り返し、深堀を行う。主に自己分析などに使われるがビジネスの場面についても使われる。「なぜこの作業をするのか」「なぜ作業に時間が掛かるのか」など深堀ることによって本質の部分を掴むことができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402218/c6f56d13-6ce3-5cb2-e79c-78696164a2bd.png)


<h4>7.DAAE</h4>
用途：サービス、行動の考え方
使い方：現代のサービスを提供するにあたり、重要視するべき4つの要素です。デザインが悪いとそもそも使われず、迅速性を意識し素早くリリースして改善を随時行っていく。世の中にある多くのサービスを活用し組み合わせ、経済品質を高めていく。サービスだけでなく個人のビジネスワークにも置き換えることができると考えれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402218/593112ea-60b4-fb72-dc8f-bb3ea36cfead.png)

<h2>まとめ</h2>
10個ほどビジネスフレームワークをあげましたが、知識として知っているだけでは全く意味がないものです。まずは実践してみて自分にあった適したフレームワークを使ってみてください！
ScriptableObject をパス指定ではなく検索して取得する。

作成した ScriptableObject をファイルパス指定ではなく
Assetフォルダ下のどこにあっても問題無いように検索して取得したい。

↓

``` C#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

// 右クリック Tools/Test で任意の場所に Test_ScriptableObject.asset ファイルを作成できる
[CreateAssetMenu(menuName = "Tools/Test")]
public class Test_ScriptableObject : ScriptableObject
{
	public int value;
}
```
この `Test_ScriptableObject.asset` を実際のコード上で取得する時

``` C#
const string FilePath = "Assets/Test_ScriptabkeObject.asset";

public Test_ScriptableObject Load()
{
   return AssetDatabase.LoadAssetAtPath<Test_ScriptableObject>(FilePath);
}
```

このように `AssetDatabase.LoadAssetAtPath` を使用してScriptableObjectを取得できますが、 *パスを指定しているのが気に食わない。*

パスで決め打ちするよりファイルを検索した方が気持ちいい。

ということで、以下の形はどうでしょうか。

``` C#
public Test_ScriptableObject Load()
{
    var guid = AssetDatabase.FindAssets("t:" + nameof(Test_ScriptableObject)).FirstOrDefault();
    var filePath = AssetDatabase.GUIDToAssetPath(guid);
    if (string.IsNullOrEmpty(filePath))
    {
        // 場合により Exception や
        throw new System.IO.FileNotFoundException("Test_ScriptableObject does not found");
        
        // Log 出して return null
        Debug.LogWarning("Oh...");
        return null;
    }

    var test = AssetDatabase.LoadAssetAtPath<Test_ScriptableObject>(filePath);
    
    return test;
}
```




``` C#
AssetDatabase.FindAssets("t:" + nameof(Test_ScriptableObject))
```
`t:オブジェクト名` で Assetフォルダ以下の指定オブジェクトをすべて取得。
今回はnameofでクラス名を取得。

すべて検索ということで、配列が返ってくるから `FirstOrDefault()` で一番最初に見つかったものを取得しています。
しかしここは「複数見つかった場合ログを出す」ほうが親切ですね。


以上になります。
簡単ですが、UnityEditorの触りで自分が迷った箇所を書いてみました。


---

いつでも読み込めるように関数定義しておいた方が便利かも

``` C#
    void Hoge()
    {
		var instance = Load<Test_ScriptableObject>();
	}

    // 読み込みますよ
	public T Load<T>() where T : UnityEngine.Object
	{
		var guid = AssetDatabase.FindAssets("t:" + typeof(T).Name).FirstOrDefault();
		var filePath = AssetDatabase.GUIDToAssetPath(guid);
		if (string.IsNullOrEmpty(filePath))
		{
		}

		return AssetDatabase.LoadAssetAtPath<T>(filePath);
	}
```
シェルスクリプトから仕様書を作るツール

自分用のメモ。

結構探したけど、なかなかこれってのがない。

* 極力書かなくて良い
* markdownにできる
* ぱっと動く

くらいしか思いはなかったんだが、結構ない。

で見つけたのが、[これ](https://github.com/reconquest/shdoc)。

```
#!/bin/bash
#
# @file Title of file script
# @brief Small description of the script.
```

アノテーションスタイルなら簡単だな、と。

```
# @description Multiline description goes here and
# there
#
# @example
#   some:other:func a b c
#   echo 123
#
# @arg $1 string Some arg.
# @arg $@ any Rest of arguments.
#
# @noargs
#
# @exitcode 0  If successfull.
# @exitcode >0 On failure
# @exitcode 5  On some error.
#
# @stdout Path to something.
#
# @see some:other:func()
some:first:func() {
```

これでビルド時にドキュメント化させようかな
nilで場合分けの必要がある単純なメソッドの書き方

# 概要
下記のような単純なメソッドがあります。

```ruby
def user_name
  user.name
end
```

上記メソッド内に登場する `user` は、 「`User` オブジェクトまたは `nil` を返却するメソッド」だと仮定してください。
`User` オブジェクトには `name` というメソッドが実行できます。

`nil`の可能性があるので、`NoMethodError`が発生する可能性があります。
なので、 **nilの場合の処理** を書く必要があります。

どのように書くのが1番読みやすいか悩んでいた時に4人の方に相談したのですが、
**メソッドの内容によって、どれを読みやすいと思うかが変わる結果になりました。**

同じような単純なメソッドだけど結果が変わってくるのが面白く思ったので、その時の結果を記事にします。

- **注意**
  - この場合はこの書き方が絶対いい！！ということを主張する記事ではないです。
  - そもそも上記のような単純なメソッドの場合は、わざわざメソッドを書かずに他の方法が使えるケースも多いと思いますが、今回はその辺りには踏み込まないです。

# ケース1: メソッドで処理さえできればいい時
下記のような条件のメソッドの場合は、どのように書くのが読みやすいでしょうか。

## メソッドの条件
- メソッドの名前は `delete_user!`
- メソッド内では変数 `user` が使える
- メソッド内の変数 `user` が `nil` ではない場合は、 `user` をレシーバーとして `destroy!` メソッドを実行する
- メソッドの戻り値は利用しないので気にしなくていい

## 考えられるパターン
下記の2パターンを作成してみました。

### パターン1: 早期リターン
```ruby
def delete_user!
  return unless user

  user.destroy!
end
```

「やることないならとにかく早期リターンやろ」という考えを元に作成しました。

### パターン2: `&.` を使う
```ruby
def delete_user!
  user&.destroy!
end
```

「1行で書けるんやから `&.` を使うべきやろ」という考えを元に作成しました。

## 相談の結果
4人とも、 **「パターン2: `&.` を使う」** が読みやすいとのことでした。

やはり、ここまで単純だとわざわざ早期リターンしてメソッド内を3行にするより、
1行で書けるメリットの方が大きく感じられるようでした。

# ケース2: メソッドの戻り値が必要な時
下記のような条件のメソッドの場合は、どのように書くのが読みやすいでしょうか。

## メソッドの条件
- メソッドの名前は `user_name`
- メソッド内では変数 `user` が使える
- `user` が `nil` ではない場合は、 `user` をレシーバーとして `name` メソッドを実行する
- メソッドの戻り値を、呼び出し元で利用する
- `user` が `nil` の場合は、 `'no name'` という文字列を返す

## 考えられるパターン
下記の2パターンを作成してみました。
(早期リターンは、ケース1で評判が悪かったので最初から選択肢に入れませんでした:pensive:)

### パターン1: 三項演算子
```ruby
def user_name
  user ? user.name : 'no name'
end
```

「三項演算子がパッと見で読みやすいかな〜」と思って作成しました。

### パターン2: `&.` を使う
```ruby
def user_name
  user&.name || 'no name'
end
```

ケース1では全員が読みやすいと考えた `&.` を使った書き方です。
三項演算子を使うより短く書けます。
三項演算子が好きではない人向けに作成しました。

個人的には、今回の場合は `||` を書く必要があるので、
ちょっとパッと見では読みづらい気がしました。

## 結果
**投票結果は2対2に割れました**。

「うーんどうしたものか。好みの問題かな・・・」と思っていると、
**「早期リターンを使った書き方がよいのでは？」**との提案をいただきました。

```ruby
def user_name
  return 'no name' unless user

  user.name
end
```

確かに・・・1番分かりやすい気がする・・・！！
ケース1では不評だった早期リターンが、今回は1番読みやすい気がします。

今回のケースの場合は早期リターンを使うと、
**「`user` がnilの場合は `'no name'` を返す」**
というのが1番パッと見で伝わりやすいし、メソッドの意図が伝わりやすい感じがします。

メソッドの戻り値が重要なときは、こちらの書き方を採用しようと思いました。

# おわりに
Railsは、いろいろ自由な書き方が出来る分、書き方にこだわったり悩んだりする必要が多いと思います。

今回考えた内容は「好みの問題」で片付けられてしまうことも多いですが、
人にも聞いてみると、「こういうとき、1番読みやすいのはこれじゃないか」という傾向が見えてきて面白かったです。

一緒に考えてくれた4名のみなさんありがとうございました:relieved:
Ruby復習

Uncaught TypeError: Cannot read property 'reset' of undefined
エラーの原因が $('from')[0].reset;なのはわかっているのだが、なぜ、どういう原因なのかかが全くわからない為、明日聞く。

カリキュラムが進まない為、Rubyの復習をやった所、初めてみた時と全然違う！！
書いてあることがわかることが多いい。
変数、引数、配列演算子、配列オブジェクト、式展開なんとなくだったことがわかった気がする。
今更だけど、移動時間で読み返そう！！
三項演算子

## 三項演算子とは
if文を1行で記述することができるため、すっきりとしたコードを記述できる
しかし、複雑なif文には使用すると逆に読みにくいコードになってしまうため
シンプルなif文にのみ使用する

```ruby
var = "文字列"

if var.class == String
  "varはStringです"
else
  "varはStringではありません"
end
```
このif文を三項演算子に変換すると

```ruby
条件 ? 式1(true) : 式2(false)
var = "文字列"
var.class == String ? "varはstringです" : "varはstringではありません"
```
elasticsearch_dsl 覚書

## 環境
Python3.8.2
elasticsearch-dsl 7.1

Elasticsearch側は面倒だったので、Python上でクエリのみ確認。

### A, Q
```python
test = A("terms", field="hoge")
print(test.to_dict())
print(type(test))

test2 = Q("terms", field="huge")
print(test2.to_dict())
print(type(test2))
```

```javascript

{'terms': {'field': 'hoge'}}
<class 'elasticsearch_dsl.aggs.Terms'>
{'terms': {'field': 'huge'}}
<class 'elasticsearch_dsl.query.Terms'>
```

### Agg Array
```python
array_test = [A("terms", field="key_" +str(i)) for i in range(5)]

search = Search()
for i in range(5):
    search.aggs.bucket("array_" + str(i), array_test[i])

print(search.to_dict())
```

```javascript
{'aggs': {
  'array_0': {'terms': {'field': 'key_0'}}, 
  'array_1': {'terms': {'field': 'key_1'}}, 
  'array_2': {'terms': {'field': 'key_2'}}, 
  'array_3': {'terms': {'field': 'key_3'}}, 
  'array_4': {'terms': {'field': 'key_4'}}
}}
```
### Aggs Array ネストをつけたい

```python
array_test = [A("terms", field="key_" +str(i)) for i in range(5)]

search = Search()
X = search.aggs.bucket("array_0", array_test[0])
for i in range(1, 5):
    X = X.bucket("array_" + str(i), array_test[i])

print(search.to_dict())
```

```javascript
{'aggs': {'array_0': {
  'terms': {'field': 'key_0'},
  'aggs': {'array_1': {
    'terms': {'field': 'key_1'},
    'aggs': {'array_2': {
      'terms': {'field': 'key_2'},
      'aggs': {'array_3': {
        'terms': {'field': 'key_3'},
        'aggs': {'array_4': {
          'terms': {'field': 'key_4'}
        }}
      }}
    }}
  }}
}}}
```
laravelの学習のために音楽レビューを投稿できるサイトを作成した

Web製作会社でマークアップエンジニアとして1年業務を行いました。
その中で、今後はバックエンドに携わっていきたいと思いPHPの勉強を始め、laravelでウェブサービスを作ってみました。
まだまだ、理解していないところがあるので引き続き勉強します。
## トップページ
![full.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584078/51704a0b-009f-f991-3249-c8269476dc76.png)
トップページはメインビジュアルとサービスの紹介です。
下の方にある「投稿一覧ページへ」のボタンから投稿一覧へリンクします。
## 投稿一覧ページ
![full2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584078/94060c9e-8bd4-828e-9e82-f307d5933aae.png)
検索フォームにテキストを入れると該当のテキストが入力されている投稿だけ表示します。
「投稿一覧詳細ページへ」のボタンから各投稿の詳細ページに飛ぶことが出来ます。
## 投稿詳細ページ
![page1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584078/bcf5251a-486e-2295-5fc9-cbffff0eba42.png)
各カテゴリの詳細を表示します。
投稿の「編集」と「削除」については、投稿したアカウントのみ可能な仕様です。
## 投稿編集ページ
![page2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584078/29a8aa67-dbf6-d1bd-8072-b4465b31e9c0.png)
現在の投稿内容がテキストボックスに表示され、投稿を修正後に「作成する」を押すと確定します。
## 投稿について
<img width="1281" alt="スクリーンショット 2020-03-01 22.51.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584078/f6cb68aa-187a-7c55-d847-0e3cc12dbd92.png">
ログインした状態のみ、ウインドウの右下に「レビューする」が表示され、投稿ページに移動できます。
## 投稿ページ
![page3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584078/f9faf195-d074-2fca-4947-9d28989ca38a.png)
各カテゴリの内容を入力して「作成する」を押すと投稿が作成できます。
## 今後の修正点
・投稿一覧ページでのページネーションの実装。
・カテゴリ、投稿者名での検索をできるようにする。
Python Windows実行ファイル実行時に陥った罠

# PythonのWindows実行ファイル作成時に陥った罠
Pythonを用いてWindowsの実行ファイルを作成した際に、コマンドライン引数を用いて処理を行たかったが、その際に陥った罠について備忘として記録する。

## コマンドライン引数

### コマンドライン引数を用いたhelloworld
```hello.py
import sys

str1 = sys.argv[1]

print(str1)
```


`python test.py helloworld `
`>>> helloworld`

### pyinstallerを使って実行ファイル化
`pyinstaller hello.py --onefile`

### hello.exeの実行
`IndexError: list index out of range`
原因は、コマンドラインを使用しないため、リストが作成できなかった。

## 解決方法
### Input関数を使用

```hello.py
str1 = input("please put something")

print(str1)
```
### hello.pyの実行
`>>>please put something`
`helloworld`

##　結論
試行錯誤した結果、sysを用いてコマンドライン引数を取得することができなかったため、Input関数を使用することとした結果、うまく行った。
もし、Windowsの実行ファイルにて、コマンドライン引数を使用する方法をご存知の方がいらっしゃいましたら、是非ご教示いただければと存じます。
Visual Studio Code よく使う順ショートカット集（Mac）〜随時更新〜

これを知っているか知らないかでコードを書くスピードが格段に変わってきます。１日１つずつで良いので少しずつ慣らしていきましょう！他のサイトにも同じようなコマンド集がありますが、よく使う順というのはあまり無かったので書いてみました。<font color="Blue">便利なのに意外と知られてないものには色をつけています。</font>

ではいきましょう！

##よく使うショートカット一覧（Mac）

・行の途中で下に行を作成（いちいち行末まで移動してreturnしなくて良い）
　<font color="Blue">[ command ] + [ return ]</font>

・行の途中で上に行を作成（[shift]をつけると大体反対の意味になるので覚えとくとGood）
　<font color="Blue">[ command ] + [ shift ] + [ return ]</font>

・一つ前の状態に戻る
　[ command ] + [ z ]

・一つ先の状態に進む
　<font color="Blue">[ command ] + [ shift ] + [ z ]</font>

・インデントを上げる（複数行選択でまとめてインデントずれ修正できるから便利）
　<font color="Blue">[ command ] + [ { ]</font>

・インデントを下げる（複数行選択でまとめてインデントずれ修正できるから便利）
　<font color="Blue">[ command ] + [ } ]</font>

・コメントアウト（言語ごとに違うコメントアウトの書き方覚える必要なし）
　<font color="Blue">[ command ] + [ / ]</font>

・ファイルを閉じる（×ボタンで閉じるの面倒なので脳死で一気に閉じるときオススメ）
　<font color="Blue">[ command ] + [ w ]</font>

・カーソルが当たっているワードを検索（こっから[ > ]マーク押して文字の置換もできるよ）
　<font color="Blue">[ command ] + [ e ]</font>

・ファイル内検索（こっから[ > ]マーク押して文字の置換もできるよ）
　[ command ] + [ f ]

・選択している行をまるごと移動（いちいちコピペしなくて良い。しかもインスタンス・条件・繰り返しの下に持っていくと自動的にインデント下げてくれる賢いやつ）
　<font color="Blue">[ option ] + [ ↑ or ↓ ]</font>

・今いる行を複製（いちいちコピペなんてしなくて良い。似たコードを複数書くときめっちゃ便利）
　<font color="Blue">[ shift ] + [ option ] + [ ↓ or ↑ ]</font>

・コピー
　[ command ] + [ c ]

・カット
　[ command ] + [ x ]

・ペースト
　[ command ] + [ v ]


・画面拡大（見辛いとき、人に見せるときに良く使う）
　<font color="Blue">[ command ] + [ + ]</font> もしくは
　<font color="Blue">[ command ] + [ shift ] + [ - ]</font>

・画面縮小（２画面で作業スペースが狭いとき、拡大を元に戻すときに使う）
　<font color="Blue">[ command ] + [ - ]</font>

・エクスプローラーを閉じる（２画面で作業スペース狭いときによく使う。マウス操作でもできるから好み）
　<font color="Blue">[ command ] + [ b ]</font>

・範囲選択
　[ shift ] + [ ↑ or ↓ or ← or → ]

・全選択
　[ command ] + [ a ]

・今いる行から上または下のコード全てを選択（コードが長く全選択するほどじゃない時に便利）
　<font color="Blue">[ command ] + [ shift ] + [ ↑ or ↓ ]</font>

・ファイルの先頭、末尾に移動
　<font color="Blue">[ command ] + [ ↑ or ↓ ]</font>

・ファイルを開く
　[ command ] + [ o ]

・今表示しているファイルを複製（試しにコードを変更して動作確認したいときにバックアップに便利）
　<font color="Blue">[ command ] + [ ¥ ]</font>

・新規ファイル作成（ターミナルからとかダブルタップで作ること多いからほぼ使わない）
　[ command ] + [ n ]

・ファイルを保存（自動保存機能あるからほぼ使わない）
　[ command ] + [ s ]

</br>
pythonでのcsvファイル読み書きの際の文字コード　～windows環境ver～

# 本稿の投稿経緯
python初心者の私が、csvファイルの読み書きの際のエンコードにたまにエラーに躓くので、その内容のまとめをメモしたもの。同じく**初心者向けの記事**になります。なお、環境はwindows環境になります。

# エラー
csvファイルの読み書きの際に、よく引っかかるエラーについて
### 書き込み時のエラー
```ruby:エラー内容
UnicodeEncodeError: 'shift_jis' codec can't encode character '\u9ad9' in position 14: illegal multibyte sequence
```
shift-jisでエンコードできない文字があるよってことですね。ファイル書き込みの際にファイルの文字コードと書き込み文字の文字コードの不一致で発生します。

ちなみにコードの指定箇所はここなど。

```ruby:コード例
with open(filepath, 'w', newline='', encoding='shift-jis') as f
```

### 読み込み時のエラー
```ruby:エラー内容
UnicodeDecodeError: 'shift_jis' codec can't decode byte 0xee in position 0
```
shift-jisででコードできない文字があるよってことですね。ファイル読み込みの際にファイルの文字コードとファイルの読み込みで指定した文字コードの不一致で発生します。(もしくは、ファイルの読み込み時に指定した文字コードで読めない文字がファイルに書き込まれている。)

ちなみにコードの指定箇所はここなど。

```ruby:コード例
data = pd.read_csv(filepath, encoding = 'shift-jis')
```

# 正しい文字コードの指定は？
ファイル作成、書き込み、読み込みの一連の動作をpython上でする場合は、以下の横軸通りに指定しておけば、エラーは発生しないはずです。
(ファイルの文字コードの意味は、書き込み時に指定した文字コードによって作成されるcsvの文字コードを表しています)

| 書き込み時の文字コード   　　　    |   ファイルの文字コード　　　　 |   読み込み時の文字コード  　　　　  |
|:----------------:|:------------------:|:------------------:|
|UTF-8 | UTF-8 | UTF-8 |
| cp932 |ansi | cp932|
| shift-jis | ansi | shift-jis|

**cp932もshift-jisもファイルだとansiだけどどっちつかうの？**
cp932とshift-jisの違いは、例えば**髙(はしごだか)**や**﨑(たてさき)**といった、環境依存文字が取り扱いできるかどうかの違いが一番の差かと思います。できるのがcp932になります。なので、例えば、他システムからansiのcsvファイルが連携されてくる時は、shift-jisではなく、cp392で取り込む想定にしておくほうが吉ということです。
gonを使ってJavaScriptでRailsの環境変数を使用する

##概要

Railsアプリケーションを作成時、
dotenv-railsを使って.envファイルに環境変数を書き込んだのですが
JSファイルではそのまま使用することができず、gonというGemを使用するとJSと連携ができるとのことだったので備忘録としてまとめてみます。

（間違いや改善点があればご教示いただけますと幸いです！）

##Gemをインストール

```rb:Gemfile.
gem 'dotenv-rails'
gem 'gon'
```

bundle installを実行

##.envファイルを作成
appファイル直下に作成して、環境変数を記述します

```
MY_PRIVATE_KEY = '************'
```

##Rails側の呼び出し
（JSファイルのみでの使用であればなくてOK）

```rb
  def new
    my_private_key = ENV["MY_PRIVATE_KEY"]
  end
```

##JSファイルへの連携

```rb
  def new
    gon.my_private_key = ENV['MY_PRIVATE_KEY']
  end
```

##JSファイルでの表記

```js
var mykey = gon.my_private_key;
```

これで環境変数が取ってこれます！

##.envを.gitignoreに追記

``` .gitignore
/.env
```

これで安全に環境変数を扱えますね。

gonは便利と聞いたのでもっと理解を深めていきたいです！

間違いがあればご指摘くださいm(__)m

以上となります、ありがとうございました。
esaで画像を縮小して表示するcss

# 前提条件

スクリプトは許可させてください。

# cssバージョン

記事の中のimgタグは以下の様に、URLの最後に決まった値を追加して

```
![image.png (53.0 kB)](https://files.esa.io/uploads/production/attachments/xxx.png?small)
```

記事の先頭で以下のstyleタグを追加する

```
<style>
.markdown img[src$="?small"]{objec-fit:contain;width:300px;}
</style>
```

画像ごとに任意の値を設定する事は出来ないが、smallの部分を増やす事は出来る。

# jsバージョン

画像ごとに任意のcssを直接指定したい場合はこれ。ただし、記事編集中のプレビュー画面では動かない。

記事の中では以下のように書いて

```
![image.png (53.0 kB)](https://files.esa.io/uploads/production/attachments/xxxxx.png?width=300px)
```

記事の先頭に以下のコードをペーストする。

```
<script>
addEventListener("DOMContentLoaded",(e)=>{
  [...document.querySelectorAll(".markdown img")].forEach(img=>{
    img.style.objectFit="contain";
    [...new URL(img.src).searchParams].forEach(a=>{ img.style[a[0]]=a[1]; })
  })
}, false);
</script>
```

記事の中の画像タグに任意のstyle属性を付与出来る。
リファクタリング練習

## リファクタリング
リファクタリングは単にコードを読みやすくするだけではない
チーム開発において見やすいコードとは非常に重要で、チーム開発では他人のコードを解読する時間は非常に多くなる
その時間を短くすることは開発効率の促進に繋がる

```ruby
array = [1, 2, 3, 4, 5].map do |el| 
  if el.odd?
    el 
  end
end.compact!
```
このプログラムは配列に格納されている数字から奇数のみを取り出すプログラムです。
これをワンライナーで書き直します。

```ruby
array = [1, 2, 3, 4, 5].map { |el| el if el.odd? }.compact!
array = (1..5).to_a.delete_if { |el| el.even? }
array = (1..5).to_a.delete_if(&:even?)
array = [1, 2, 3, 4, 5].select{ |el| el.odd?}
```
mapメソッドは配列から値を一つずつ取り出して変数に格納するメソッド
odd?は奇数を判別するメソッド
delete_ifは条件に合わない値を削除するメソッド
to_aメソッドは対象を配列としてまとめて返すメソッド
even?は偶数を判別するメソッド
bitFlyer Lightning  エラーコード集

<h1> bitFlyer Lightning  エラーコード集<h1>

<h1> bitFlyer LightningのAPIを叩いていて発生したエラーコードとその対応策をまとめる<h1>

1. {"status":-100,"error_message":"Invalid product","data":null}

　　【原因】リクエストヘッダにコンテンツタイプの指定なし

　　privateAPIを利用する際、リクエストボディにJSON形式の値を詰めると思うが、その値がどのような形式かを明示的に指定してやる必要がある

```
connection = (HttpURLConnection) url.openConnection();
(中略)
connection.setRequestProperty("Content-Type", "application/json; charset=utf-8");
```
【Udemy Python3入門+応用】　19.リストのコピー

**※この記事はUdemyの
「[現役シリコンバレーエンジニアが教えるPython3入門+応用+アメリカのシリコンバレー流コードスタイル](https://www.udemy.com/course/python-beginner/ "現役シリコンバレーエンジニアが教えるPython3入門+応用+アメリカのシリコンバレー流コードスタイル")」
の講座を受講した上での、自分用の授業ノートです。
講師の[酒井潤](https://twitter.com/sakaijun "酒井潤")さんから許可をいただいた上で公開しています。**

##■リストを代入した場合の挙動
```python:list_copy
x = [1, 2, 3, 4, 5]
y = x
y[0] = 100
print('x = ', x)
print('y = ', y)
```
```:result
x =  [100, 2, 3, 4, 5]
y =  [100, 2, 3, 4, 5]
```
`x`をいじっただけなのに、`y`にまで変更が及んでしまう。

```python:list_copy
x = [1, 2, 3, 4, 5]
y = x.copy()
y[0] = 100
print('x = ', x)
print('y = ', y)
```
```:result
x =  [1, 2, 3, 4, 5]
y =  [100, 2, 3, 4, 5]
```
`x`の代わりに`x.copy()`とすることで、
「`x`そのもの」ではなく「`x`のコピー」を`y`に代入することができる。

<br>
##■なぜ影響が及んだのか
#####◆別のid
```python:id_different
X = 20
Y = X
Y = 5
print('X = ', X)
print('Y = ', Y)
print('id of X =', id(X))
print('id of Y =', id(Y))
```
```:result
X =  20
Y =  5
id of X = 4364961520
id of Y = 4364961040
```
リストではなく、数値で同様にしてみると、`Y`を書き換えても`X`には影響が出ない。
`id()`を使って、`X`と`Y`のidをみてみると、それぞれ別のidとなっていることが確認できる。

#####◆同じid
```python:id_same
X = ['a', 'b']
Y = X
Y[0] = 'p'
print('X = ', X)
print('Y = ', Y)
print('id of X =', id(X))
print('id of Y =', id(Y))
```
```:result
X =  ['p', 'b']
Y =  ['p', 'b']
id of X = 4450177504
id of Y = 4450177504
```
リストでは`Y`の書き換えにより、`X`にも影響が出ている。
この場合idをみてみると、`X`も`Y`も同じidをさしていることがわかる。

```python:id_same
X = ['a', 'b']
Y = X.copy()
Y[0] = 'p'
print('X = ', X)
print('Y = ', Y)
print('id of X =', id(X))
print('id of Y =', id(Y))
```
```:result
X =  ['a', 'b']
Y =  ['p', 'b']
id of X = 4359291360
id of Y = 4359293920
```
`.copy()`により回避した場合は、
`X`と`Y`のidが異なっていることがわかる。
テーブルのカーソル位置から関係するデータを取得する

 [FILTERを使ってテーブルを加工する](https://qiita.com/matumoto_onga/items/e1569652740a5c87bf59)の応用例です。
日報テーブル(NA_)には、１日の検査開始時間、開始数、終了時間、終了数を記入し、製品が出荷できる
数に達して出荷可能になったら、出荷日、出荷数、依頼番号を記入、出荷棚に移動して
棚の項目を0から1に変更します。以前は手で明細テーブル(M01N_,M02N_)から転記していました。
明細テーブルの先頭が新しいデータですので、該当するデータの最後から割り当てています。

```vb
Sub データ取得()
    On Error Resume Next

    Set R = Range("NA_")
    Set T = Range("NA_[出荷日]")
    
    M = Selection.Row - R.Row + 1
    N = Selection.Column - R.Column + 1
        
    If M > R.Rows.Count Then Exit Sub
    
    If DI(T, M) = "" Then
        Call DR(R, M, 年, 機, 番号, W, 月日, A1, T1, 計画, O)  ' 基本関数
        
        I = 0
        
        If 機 = 1 Then
            V = CC("(M01N_[済]=0) * (M01N_[番号]=", 番号, ") * (M01N_[W]=", W, ") * (M01N_[O]=", O, ")")
            S = WorksheetFunction.Filter(QL_INIT("M01N_[日付,出庫,依頼]"), EVT(V))
            I = UBound(S, 1)

        ElseIf 機 = 2 Then
            V = CC("(M02N_[済]=0) * (M02N_[番号]=", 番号, ")")
            S = WorksheetFunction.Filter(QL_INIT("M02N_[日付,出庫,依頼]"), EVT(V))
            I = UBound(S, 1)

        End If
        If I > 0 Then
            Call START_MANUAL        ' 更新停止
        
            T.Offset(M - 1, 0).Resize(1, 1) = S(I, 1)   ' 出荷日
            T.Offset(M - 1, 1).Resize(1, 1) = S(I, 2)   ' 出荷数
            T.Offset(M - 1, 2).Resize(1, 1) = 0         ' 棚
            T.Offset(M - 1, 3).Resize(1, 1) = S(I, 3)   ' 依頼
        
            Call START_AUTO          ' 更新開始
        End If
    End If
End Sub

Sub DR(R, I, ParamArray PA())               ' DATA READ
    Dim J: For J = 0 To UBound(PA)
        PA(J) = DI(R, I, J + 1)
    Next J
End Sub

Sub START_MANUAL()
    Application.EnableEvents = False
    Application.ScreenUpdating = False
    Application.Calculation = xlCalculationManual
End Sub

Sub START_AUTO()
    Application.EnableEvents = True
    Application.ScreenUpdating = True
    Application.Calculation = xlCalculationAutomatic
End Sub
```
変数

#let
変数とは、データの所有者です。箱でも名前でもないです。
「どの変数が持っているデータなのか」という観点がRustでは重要なので、変数は所有者と考えましょう。

書き方は以下の通りです。
`let` `変数名` `=` `データ`
以降は変数名を書くだけで中身のデータを扱うことが出来ます。

~~~rust
fn main(){
    let price = 100; //リンゴの値段　変数priceは100というデータを持っている
    println!("リンゴの値段は{}円です。",price); //変数名を書くとデータに置き換わる。100と書いたのと同じ。
    
    let name = "Rust太郎"; //名前　変数nameは"Rust太郎"というデータを持っている
    println!("私の名前は{}です。",name);
    
    let PI = 3.14; //円周率
    println!("円周率は{}です。",PI);
    
    let answer = 3 * 4 + 2; //変数answerは計算結果を持っている
    println!("3 * 4 + 2 = {}",answer);
}
~~~
実行結果

~~~
リンゴの値段は100円です。
私の名前はRust太郎です。
円周率は3.14です。
3 * 4 + 2 = 14
~~~

#シャドーイング
既に存在する変数名でletすることが出来ます。
同名の新しい変数が作成され、古い変数は使用できなくなります。
後述のmutを使うよりもこの方法をまず検討したほうが良いと思われます。

~~~rust
fn main() {
    let x = 100;        // 100を変数xに束縛
    println!("{}",x );  // 100と表示する

    let x = 200;        // xをシャドーイング
    println!("{}",x );  // 200と表示する

    let x = 3.14 as f32;// 型が違っても良い
    println!("{}", x);
}
~~~

#mut
`let`の直後に`mut`と書くと中身を変更できる変数になります。
変更可能であることを「ミュータブル」、変更不可能であることを「イミュータブル」といいます。
`let` `mut` `変数名` `=` `データ`

変数の中身を変更するときは以下のように書きます。これを代入といいます。
`変数名` `=` `新しいデータ`

~~~rust
fn main(){
    let mut price = 100;//リンゴの値段　priceは変更可能。
    println!("リンゴの値段は{}円です。",price);
    
    price = 200; //リンゴの値段を変更する
    println!("リンゴの値段は{}円です。",price);
}
~~~
実行結果

~~~
リンゴの値段は100円です。
リンゴの値段は200円です。
~~~

変更可能なのでどんなデータを持っているか常に気を付けていなければいけません。
いつ、どこで、どんなデータを代入したのかを把握しておく必要があります。
ミュータブルにする利点は、変数の作成にかかるコストを回避できることです。

#ブロックとスコープ
`{` と `}`に囲まれたコードをブロック(塊)と呼びます。
ブロックで囲まれた範囲をスコープ(範囲)と呼びます。
あるブロックで作成された変数は、そのブロックを出るときに破棄されます。

~~~rust
fn main() {
    let outer = "outer"; // スコープはmain関数
    println!("{}",outer );

    {
        let inner = "inner"; // スコープはこのブロックの中
        println!("{}",inner);
    }// innerはここで破棄される

    println!("{}", outer); // outerはまだ生きている
    // println!("{}", inner); // innerはすでに破棄されているのでコンパイルエラーになる
}
~~~

スコープの仕組みを利用して、一時的なシャドーイングをすることが出来ます。

~~~rust
fn main() {
    let x = 100;        // 100を変数xに束縛
    println!("{}", x);  // 100と表示する
    {
        let x = 200;        // xをシャドーイング　外側のxが無くなるわけではない
        println!("{}", x);  // 200と表示する
    } // ここで内側のxが破棄される

    println!("{}", x); // シャドーイングしていた変数が破棄されたので、再び100と表示する
}
~~~


ブロックの最後に書かれた式やデータは、そのブロックの戻り値となります。
戻り値となったデータはブロックから出ることが出来、破棄されません。

~~~rust
fn main() {
    // ブロックの戻り値を変数に束縛
    let value_of_block = {
        let inner = "このデータは破棄されます";
        let return_value = "このデータはブロックの外で使用されます";

        return_value // これが戻り値となる　セミコロン「;」を書いていないことに注意
    };

    println!("{}", value_of_block); // 「このデータは戻り値としてブロックの外で使用されます」と表示する
}
~~~


[目次](https://qiita.com/tonesuke/items/52e469f18e747c794376)
fishでNeovimしたいけどinit.vimが反映されなかった件

#fish + NeovimでモダンなCUI環境を作りたい
ということで作ろうとしたらなぜかinit.vimが読み込まれない…

#環境

```bash
$ bash --version 
GNU bash, バージョン 4.4.20(1)-release (x86_64-pc-linux-gnu)
$ fish --version
fish, version 2.7.1
```

```bash:~/.bashrc
alias vi='nvim'

.....

exec fish
```

bashで設定を読み込んだあと、fishを起動する設定を行っている。

#先に結論から
.bashrcでfishを起動させる場合、.bashrcのエイリアスに

```bash:~/.bashrc
alias vi='nvim'
```
があると、fishでviコマンドでNeovimを開いた場合fish側の設定が無視される。

なので

```bash:~/.bashrc
# alias vi='nvim'
```
とコメントアウトした上で、

```fish:$XDG_CONFIG_HOME/fish/config.fish
alias vi='nvim'
```

config.fishにエイリアスの設定を行って

```fish
$ source $XDG_CONFIG_HOME/nvim/init.vim
```
sourceコマンドで読み込む。


#やってみたけど駄目だったこと
##XDG_CONFIG_HOMEの定義
```fish
$ echo $XDG_CONFIG_HOME

$ 
```
と何も表示されなかったため、fishだとXDG Base Directoryに関する変数が定義されていないのでは？と予想し、

```fish:~/.config/fish/config.fish
set -x XDG_CONFIG_HOME $HOME/.config
```
を追加してみたが、残念ながらこれだけではinit.vimが読まれなかった。

#疑問

```fish:~/.config/fish/config.fish
set -x XDG_CONFIG_HOME $HOME/.config
```
は確かに効果がなかったが、これを消すとNeovimのカラースキームが変わる。この理由が良くわからない。
その後init.vimでカラースキームは指定したので問題はないが、ちょっとモヤっとする。
Nuxt.jsのpluginsにaxiosの共通部品を実装する

# はじめに
Nuxt.jsにてクライアントサイドのvueからサーバのREST APIを呼び出す際に、vue内のスクリプトにロジックを書くと、他の場所で流用できない。そのため、外部のjsに共通ロジックとしてサーバのAPIを呼び出す処理を記述したかったが、あまり良い例が無かったので、検討&実装してみた（正しいかは不明）
Vuexストア内でaxiosを使ってサーバAPIを呼び出すみたなことをやってる人も居たけど、それはちょっと違うだろう（というか気持ち悪い）ということで、pluginsに共通ロジックを作成することにした。

## 構成
修正する対象は以下の3ファイル（pages/index.vue , plugins/axios.js , plugins/api.js）

```
ROOT
 ├─.nuxt
 ├─assets
 ├─components
 ├─layouts
 ├─middleware
 ├─pages
 │      index.vue
 ├─plugins
 │      api.js
 │      axios.js
 ├─server
 ├─static
 ├─store
 └─test

```

## axios.js
以下の記事を参考に、pluginsフォルダ配下にaxios.jsを作成する。
今回は記事のまま修正はしていない。このプラグインを作成することで、axiosでサーバアクセスする際、
リクエスト発生時、エラー発生時に処理をフックして任意の処理を実行することができる。
$axios.onResponseでレスポンス時にフックすることも可能。

https://axios.nuxtjs.org/extend

``` axios.js
export default function ({ $axios, redirect }) {
  $axios.onRequest((config) => {
    console.log('Making request to ' + config.url)
  })

  $axios.onError((error) => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}
```

## api.js
このjsがapiを呼び出す共通部品。


``` api.js
export default function ({ $axios }, inject) {
  const api = new API($axios)

  inject('api', api)
}

class API {
  constructor (axios) {
    this.axios = axios
  }

  async getHoge () {
    const res = await this.axios.$get('http://localhost:3000')
    console.log(res)
  }
}
```

次の処理を入れることで、後述するvue内で <b><font color=red>$api</font></b> としてアクセスすることができるようになる。

```
  inject('api', api)
```

ここまで作成したら、 nuxt.config.js 内の plugins に次のように記載する。

``` nuxt.config.js
  plugins: [
    '~/plugins/axios',
    '~/plugins/api'
  ],
```

## index.vue

index.vueの&lt;script&gt;部分だけを抜粋。
asyncData() 内ではthisが使えないので、context.app.\$api.getHoge()
mounted() 内などのthisが使える箇所では、this.\$api.getHoge()
とすることで、api.jsに記載したaxiosの共通ロジックを呼び出すことができる。

``` index.vue
<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  asyncData (context) {
    context.app.$api.getHoge()
    return {
    }
  },
  mounted () {
    this.$api.getHoge()
  }
}
</script>
```

## まとめ
この記述がNuxt.jsとして正しいかどうかは、少し微妙なところ。
そもそもAPIクラスを作成する必要が無く、<font color=red>inject('メソッド名', function)</font>とすればよい。
しかし、今回作成したかったアプリケーションは、バックエンドが複数あり、
そのバックエンド毎に処理を実行する共通インスタンス（この例では\$api）を
作成したかったからこのようにしている。
<font color=blue>\$backendA.getHoge()</font>, <font color=green>\$backendB.getHoge()</font> のような感じ。

## 参考
* Axios Module  
https://axios.nuxtjs.org/  
なぜNuxt.jsの本家サイトにこの例が記載されていないのかが謎ってくらい「なるほどね」ってなった。
* Nuxt.jsでaxiosの共通処理を作成し、API呼び出し処理をラップして使用する   
https://qiita.com/itouuuuuuuuu/items/4132e3b7ddf2cbf02442  
最初この記事を見つけたときは「おぉ！！」ってなった。次の2点を自分なりに改善してみたのが本記事。
  * export let axios;  
    plugins/axios/index.js 内で export let axios; としている。  
    axiosをexportしたかったからこのようにしたんだと思うけども、  
    これだとESLintのimport/no-mutable-exports に引っかかってしまう。
  * import UserApi from '@/plugins/axios/modules/user'  
    作成した共通部品をvue内で使用する際にimportしなければならない。  
    これは地味にメンドイ。
配列の中にハッシュがある場合の取り出し

## 配列の中にハッシュ
以下の配列からnameの値を取り出して取得する

```ruby
user_data = [
  {
    user: {
        profile: {
            name: 'Tanaka'
        }
    }
  },
  {
    user: {
        profile: {
          name: 'Sato'
        }
    }
  },
  {
    user: {
        profile: {
            name: 'Saito'
        }
    }
  }
]

user_data.each do |u|
  puts u[:user][:profile][:name]
end
```
eachでuに値を入れて出力

```ruby
user_data.each { |u| puts u.dig(:user, profile, name)}
```
でも出力することができる
digメソッドは引数で渡したキーから値を取り出すことができる
やってみよう!GAS入門

##GASとは
GASとは、GoogleAppsScriptというJavascriptをベースに開発された言語です。
特徴としては、サーバーサイドで実行できる点と、Googleのサービスと連携できる点が挙げられます。
今回の記事では、GASを用いてスプレッドシートの操作をやってみます。

##GASの編集画面を開こう
まずはGoogleドライブにアクセスし、スプレッドシートを開きましょう。
![スクリーンショット 2020-03-01 22.00.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/fc6b61ee-5035-2111-ff25-31eeb02b938e.png)
[ツール]→[スクリプトエディタ]をクリックすれば以下のような画面が表示されると思います。
![スクリーンショット 2020-03-01 22.02.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/92b111b8-1abf-6b0f-da93-6f27b85f692f.png)
ここがコードを書く画面となります。

##セルに文字列を書き込む
GASの編集画面で以下のコードを実行してみましょう。(⌘+Rで実行)

```javascript
function myFunction() {

  //現在開いているスプレッドシートを取得
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  
　//現在開いているシートを取得
  var sheet = spreadsheet.getActiveSheet();

  //getRangeで処理を行うセルを指定。setValueで書き込む内容を指定
  sheet.getRange("A1").setValue("hoge");  
  
}
```
A1のセルにhogeが書き込まれました！続いて、セル内容の取得をやってみましょう。
![スクリーンショット 2020-03-01 22.21.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/1d28a503-8e09-7e63-487d-c6676486b354.png)

##セル内容の取得
セル内容の取得ではこんな感じで書いてみましょう。(⌘+Rで実行)

```js
function myFunction() {

  //現在開いているスプレッドシートを取得
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  
　//現在開いているシートを取得
  var sheet = spreadsheet.getActiveSheet();

  //B2セルを取得
  range = sheet.getRange("B2")
  
  //B2セルの内容を取得
  var value　= range.getValue();
  
  //B2セルの内容をポップアップ上に出力
  Browser.msgBox(value);
}
```

するとRunning function myFunction...となって処理が止まるはずです。
![スクリーンショット 2020-03-01 22.47.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/317c3fa0-f443-0311-18f7-bd76fb7cd885.png)
ここでスプレッドシートに移動しましょう。以下のようにB2セルの内容がポップアップ上に表示されていますね！
![スクリーンショット 2020-03-01 22.48.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/455e93d8-90dd-6b7e-6a93-2b77a504bf56.png)
##まとめ
今回はセルへの書き込み、セル内容の取得といった非常に簡単な例で紹介しました。EXCELでいうVBAのように、スプレッドシートでもGASを使ってマクロを組めます。Slackのアプリケーション作成などにも使えますのでぜひ使ってみてください!
iOSアプリ開発 デザインパターン入門を読んで

# 目次

第1章　前準備 ～おすすめ書籍
第2章　前準備 ～オブジェクト指向とは
第3章　前準備 ～プロトコル指向とは
第4章　前準備 ～入門書には書かれていないが重要なiOS開発Tips
第5章　Model View Controllerデザインパターン
第6章　MVCでタスク管理アプリを作ろう
第7章　Model View ViewModelデザインパターン
第8章　MVVMでGitHubクライアントアプリを作ってみよう

# 第1章　前準備 ～おすすめ書籍
学習者のレベル別で技術書を紹介している。

# 第2章　前準備 ～オブジェクト指向とは
オブジェクト指向、継承の概念を図を使って解説していて、初心者の方には分かりやすいだろうなぁと思いました。
継承のメリット、デメリットに関しても説明されており、再確認できてよかったです。

# 第3章　前準備 ～プロトコル指向とは
オブジェクト志向のデメリットを何がデメリットかをはっきりさせて解説した上で、そのデメリットをプロトコル志向がどう解決したか解説されていて、理解しやすかったです。

# 第4章　前準備 ～入門書には書かれていないが重要なiOS開発Tips
コードでレイアウト、IBActionを使わずコードで定義、ライフサイクル、メモリ管理、Delegate、Closure、Grand Central Dispatch、WebAPIといった、実際の現場で「あれ？これどうやったかな？」となるようなTipsについて簡潔に書かれていて、効率的に再確認できました。

# 第5章　Model View Controllerデザインパターン
MVCのModel、Controller、Viewのそれぞれの役割を2ページで簡潔に図を使って説明されていて、再確認しやすかったです。

# 第6章　MVCでタスク管理アプリを作ろう
サンプルコードをダウンロードしてみてXcodeで見てみようと思います。

# 第7章　Model View ViewModelデザインパターン
MVVMのModel、ViewController、View、ViewModelのそれぞれの役割を2ページで簡潔に図を使って説明されていて、再確認しやすかったです。

# 第8章　MVVMでGitHubクライアントアプリを作ってみよう
第6章と同様です。

# 全体を通して
身近な乗り物などを例に図を使って解説されていて分かりやすかったです。
【Android】 キーボードのレイアウト押し上げ設定が反映されない。

# はじめに
**「キーボードを出すとEditText下に配置しているviewが隠れて見えなくなっちゃう。」**
っていうバグを直すのに、めちゃくちゃ時間かかった。
結局とても限定的な場面でだけ発生する事案だったんだけれど、ハマると全然気付けなさそうな原因だったので共有。

## どんな状況？

EditTextの下に表示させている"0/1000"がキーボードで隠れているのがわかる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474683/8badd468-f590-196d-c28a-b96c247d0b37.gif" width="300">


これじゃ全くカウンターの意味がない。
キーボード表示中も見えるようにしておきたい。

## 調べると

めちゃくちゃ出てくる。

【参考】
https://qiita.com/bird_tummy/items/3709d607c4ec88ad9e71
http://furudate.hatenablog.com/entry/2013/07/10/012738
https://jiwashin.blogspot.com/2013/02/androideditview.html

詳しくは参考の記事を見て欲しいのだけれど、大まかにまとめるとやらなきゃいけないことは下記の2つ。
1. AndroidManifest.xmlの該当Activityに`android:windowSoftInputMode="adjustResize"`を設定する。
2. 該当ActivityのレイアウトのルートViewGroupに`android:fitsSystemWindows="true"`を設定する。

参考にして修正してみたのだけれど、依然直らず。
別に原因があるんじゃないかと考えた。

## 画面よくみてみると

もう一回キーボード出した時の画面をよく見てみる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474683/3e7a9ab4-6778-a474-daa4-e1782df85fac.png" width="300">

なんかToolbarも消えてない？
っていうかそれよりも、**StatusBarが出てない。**
画面下にばっか目がいってたけど、そこじゃない気がしてきた。

## コード見てみると

この画面に行く前に、StatusBarを隠す処理を実行していた。

```kotlin
private fun hideStatusBar() {
    val imm = activity?.getSystemService(Cotnext.INPUT_METHOD_SERVICE) as InputMethodManager
    imm.hideSoftInputFromWindow(view?.windowtoken, InputMethodManager.HIDE_NOT_ALWAYS)
    view?.clearFocus()
}
```

試しにこの画面に入る時にStatusBarを出す処理を入れてみる。

```kotlin
private fun showStatusBar() {
    activity?.let {
        it.window.clearFlags(WindowManager.layoutParam.FLAG_FULLSCREEN)
        val decor = it.window.decorView
        decor.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_IMMERSIVE)
    }
}
```

すると

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474683/0344e516-634a-bb9c-fcdf-d5ecd553c1dd.png" width="300">

でた。
色がダサいのは気にしないで欲しい。



# まとめ

* EditText使う時にレイアウト下部に表示しとかなきゃいけないViewがある場合はキーボードで隠れていないか注意が必要。
* AndroidManifest.xmlとレイアウトにキーボードの設定をしていても、StatusBarを隠す処理を入れていると設定が反映されない。

結局ちょっと深掘りして調べてみたけど、きちんとした原因まではわからなかった。
わかる人がいたら教えてほしい。

これにて一件落着。めでたし。
背景色によって文字色が変わる、流れる文字のCSSアニメーション実現方法

# はじめに
こんな感じのを実現するためのコードです。
![slider-demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/0ab5edf4-88c4-3fd7-8c3c-d3989faa2ed2.gif)

# コード
```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>流れる単語</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="color-area">
      <div class="scroll-string scroll-string-white">流れる単語</div>
    </div>
    <div class="scroll-string scroll-string-blue">流れる単語</div>
  </body>
</html>
```


```css:index.css
html {
  height: 100%;
}
body {
  height: 100%;
}
.color-area {
  width: 100%;
  height: 200px;
  top: 100px;
  position: relative;
  overflow: hidden;
  background-color: darkblue;
  z-index: 2;
}
.scroll-string {
  font-size: 30px;
  visibility: hidden;
  text-align: center;
  height: 50px;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.scroll-string-white {
  color: white;
  top: 0;
  animation: scroll-white 5s linear 0s 1 forwards;
  -webkit-animation: scroll-white 5s linear 0s 1 forwards;
  z-index: 3;
}
.scroll-string-blue {
  color: darkblue;
  top: 100;
  animation: scroll-blue 5s linear 0s 1 forwards;
  -webkit-animation: scroll-blue 5s linear 0s 1 forwards;
  z-index: 1;
}
@keyframes scroll-white {
  0% {
    transform: translateY(-100px);
    visibility: visible;
  }
  100% {
    transform: translateY(300px);
  }
}
@keyframes scroll-blue {
  0% {
    transform: translateY(-200px);
    visibility: visible;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(200px);
  }
}
```

# ポイント
白い文字と青い文字を重ねて同時にアニメーションさせています。レイヤー構造は上から順に

* 白い文字
* 青い背景
* 青い文字
* 白い背景

となっています。その際、青い背景を`overflow: hidden`とすることで白い文字を青い背景の上のみで表示させます。


# おわりに
もっと効率的の良い書き方があるかもしれません。
JQuery-UIでのダイアログ表示(２)

JQuery-UIでのダイアログ表示時のOptionは連想配列で定義する。  

- appendTo  
- autoOpen  
初期化時にダイアログが自動的に開くかどうか:true,false
- buttons  
以下のオブジェクトの配列を指定できる。

```
[
 { buttons:
  {
    text: "Ok",
    icon: "ui-icon-heart",
    click: function() { $( this ).dialog( "close" ); }
  }
 }
]
text:ボタンのテキスト
icon:
click:クリック時の処理関数
```

- classes  

```
{
  classes: {
    "ui-dialog": "ui-corner-all",
    "ui-dialog-titlebar": "ui-corner-all",
  }
}
```

- closeOnEscape  
ESCキーでクローズできるかどうか:true,false
- closeText
- dialogClass
- draggable  
ドラッグ可能かどうか:true,false
- modal  
モーダル表示するかどうか:true,false
- resizable  
リサイズ可能かどうか:true,false
- show, hide  
ダイアログの表示、非表示時のアニメーションを指定
- title  
タイトルの文言を指定
- maxHeight, minHeight, height  
最大、最小の高さ、表示時の高さ。
- maxWidth, minWidth, width  
最大、最小の幅、表示時の幅。
- position  
位置を指定  
[jQuery UI Positionユーティリティ](https://api.jqueryui.com/position/)
引数の種類

## 引数の種類
一言に引数といっても様々な種類の引数が存在します。
その中から3種類について書きます
## デフォルト引数
代入するオブジェクトがなかった場合はデフォルトで指定した値が代わりに代入される。
記述は以下

```ruby
def initialize(name="Tanaka")
end
```

## 可変長引数
可変長引数は引数の数に制限を設けていない引数のこと。
その引数は配列として認識される。
記述は以下

```ruby
def initialize(*name)
end
```

## キーワード引数
引数にキーを設定して置くことで、誤った値が代入されないように設定することができる。
キーに値が入っていないと
ArgumentErrorが発生する

```ruby
def initialize(name: "Taro")
end
```

引数の特性について知ることで値を扱いやすくなりますね