OmniAICreator/Qiita-1.07M huggingface dataset:
ノンデザイナーズデザインブックを読んだ上で自分の名刺を作ってみた。

# ノンデザイナーズデザインブックを読んで

## デザインには4つの基本原則がある。

### 1、コントラスト

需要な要素に目を引かせるために様々な要素にコントラストをつける。
コントラストには「 テキスト及び画像化された文字の視覚的な表現には、少なくとも4.5：1のコントラスト比がなければならない」というルールがWebアクセシビリティの一般ルールとなっている。
彩度が変わるだけでもコントラストに影響してしまうのだ。


### 2、反復
デザイン上の特徴を反復を通して視覚的に一貫性をもたらす。
見出しの色とか小見出しのデザインを統一させれば同じ内容だと一目で分かりやすい。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/291712/0911c461-8de7-dba6-f668-088752b336d5.png)


### 3、整列
中央揃えよりも左、右揃えの方が両側が揃っていて綺麗なデザインに見える。
中央揃えの場合はもっと中央揃えの意図と工夫が必要であり、活字を中央揃えにした場合、行間を広く開けて一目で余白が付いていて中央揃えと分かるようなデザインにすれば◎。
明確な意図があれば中央揃えが生きる整列の目的がページの一体化と組織化。
同じページで2種類以上の文字揃えを用いないようにする。


### 4、近接
関連する項目を纏めてグループ化させることで図のように関連する要素を視覚的に表すことができる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/291712/f9c508e9-3e71-6834-4389-4dcf54a331b9.png)

### 以上のことを通して自分の名刺を作ってみた
![image.png](https://qiita-image-store.s3.amazonaws.com/0/291712/9157715b-b958-bf65-2267-676370b633ae.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291712/4afc9010-f8e3-3ed8-52a0-c91bfb6092e1.png)

## 気をつけたこと
- コントラストで絵と文字情報をうまく分別してどこを見てもらいたいかを分けて伝える。一番見てもらいたい名前に関しても大きさも大きく、太くした
- 整列で揃えることで情報の整理がしやすい
- 近接で名前、所属/メール、SNSで分別した

以上です！
0. AWS Cloudformationで環境構築~ディレクトリ設計/スタックの単位~




## 対象の読者
- 個人でサービスを作りたいけど、時間がない。でもちゃんとしたネットワークを作りたい人
- 既存のサービスをcloudformationに乗せ変える為に勉強したい人
- アプリケーションに集中したいのでネットワークは誰かのcloudformationを使って手っ取り早く使いたい人

## 使用しているサービス
- api gateway
- codebuild
- codepipeline
- alb
- elasticbeanstalk
- vpc
- ec2(bastion-nat)
- ecs
- eip
- sns
- sam
- route table
- route53(public private)
- lambda
- cloudformation

## Cloudformation化しているサービス
- codebuild
- codepipeline
- alb
- elasticbeanstalk
- vpc
- ec2(bastion-nat)
- ecs
- eip
- route table
- route53(public private)
- lambda(sam)
- cloudformation

## ネットワーク構成

<img width="1050" alt="スクリーンショット 2019-03-04 23.16.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/211243/d41692de-dc18-1d37-c3e5-cf14701d4215.png">



※ 今回紹介するのは下記の図の左側とaws vpc常に構築されるecsのみ。

## ディレクトリ構成

```yaml
├── README.md
├── api
│   ├── deployment-pipeline.yml![Bad Request]()
![Bad Request]()

│   ├── eb.yml
│   ├── residential-map-template.yml
│   ├── route53.yml
│   └── main.yml
├── batch
│   ├── deployment-pipeline.yml
│   ├── eb.yml
│   ├── residential-map-template.yml
│   ├── route53.yml
│   └── main.yml
└── web
│   ├── deployment-pipeline.yml
│   ├── ecs-cluster.yml
│   ├── load-balancer.yml
│   ├── residential-map-template.yml
│   ├── route53.yml
│   ├── service.yml
│   └── main.yml
├── db.yml
├── delete.sh
├── route53.yml
├── run.sh
├── sg.yml
└── vpc.yml

```

実行順序は

```
vpc.yml
↓
sg.yml
↓
dns.yml
↓
db.yml
↓
batch/main.yml
↓
api/main.yml
↓
web/main.yml
```


## Cloudformationはすべで一つのtemplateにして使用するべきが、部分的に使用するべきか
結論は、分けて管理する方がよかった。



全て一つのtemplateにして開発する場合のデメリット

- stackの作成にはかなりの時間がかかるので原因の切り分けが難しい。
- 一箇所で失敗すると全体がロールパックされてしまう。(かなり時間がかかってしまう。)
- スコープが区切りにくい。一つのテンプレートで作成すると、重複を許さないように作る為にsg.ymlとかecs.ymlとかこだわってしまうと、どこに何が書いてあるのか見通しが悪くなる。(コレは個人的なものかも)

あるまとまりでスコープを区切って、あとはサービスごとにディレクトリを切って実行するのが良いのでは、というのが
このディレクトリ構成。

```
├── api/*
├── batch/*
└── web/*
├── db.yml
├── delete.sh
├── route53.yml
├── run.sh
├── sg.yml
└── vpc.yml
```
ただ、ちょっといただけないのが、一つのスタックが他のスタックに依存すると、そのスタック単体の更新ができないことがあります。
こんな感じです。
![stack.png](https://qiita-image-store.s3.amazonaws.com/0/211243/5df30020-ff60-feed-95af-bc1d45fec444.png)
次回vpcの作成に実際に使用している定義ファイルを詳しくいていきます。
RailsでAWS S3を使って画像アップでの解決策

<h1>エラーコード</h1>
<h3>is not a recognized provider carrierwave


<h1>結果から言いますと下記のコードです。

config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: 'アクセスキー',
      aws_secret_access_key: 'シークレットアクセスキー',
      region: 'ap-northeast-1',
      path_style: true
    }
    config.asset_host = 'https://s3-ap-northeast-1.amazonaws.com/バケット名'


<h2>ポイント</h2>
<h4>今回アクセスキーとシークレットアクセスキーは直打ちでしております。</h4>

修正して治った点はregionの設定です。
AWS S3の設定では東京で設定をしていて
URLは「us-east-1」と表示されてましたが
「ap-northeast-1」と入力したら画像はS3にアップされました。

次は画像がうまく表示されませんでした。

<h2>解決策</h2>,
config.asset_hostのURLを「https://s3-ap-northeast-1.amazonaws.com/自分のバケット名」
にしました。

これで無事
画像がAWS S3にアップされてアプリ内でアップした画像を表示できました。
jQueryを使ってdivタグをレスポンシブな正方形にする方法

## 動作環境
- HTML 5
- CSS 3
- jQuery 3.3.1



## 論よりコード

#### HTML

```html:bodyタグ
<body>
    <div class="main">
        <div id="target" class="square">正方形1</div>
        <div class="square">正方形2</div>
        <div class="square">正方形3</div>
        <div class="square">正方形4</div>
    </div>
</body>
```

今回は4つの正方形を描画


#### JavaScript

```html:scriptタグ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script>
    // 最初のロード時とリサイズ時に発火
    $(window).on("load resize", function() {
        // id="target"のwidthを取得
        var width = $("#target").width();
        // class="square"のheightに設定
        $(".square").css({"height": width});
    });
</script>
```

jQueryの呼び出しを忘れずに！！


#### CSS

```html:styleタグ
<style>
    .square {
        background-color: #ccc;
        display: inline-block;
        margin: 0;
        padding: 0;
        width: 20%;
    }
</style>
```

背景を灰色に設定し、横に4つ並べている
numpyのpackbitで困ったのでメモ

numpyで2進数を10進数に変換する関数として[np.packbits](https://docs.scipy.org/doc/numpy-1.16.1/reference/generated/numpy.packbits.html)がありますが、ふと使おうとしたところ、少し思った挙動とは違っていました。

そもそもやりたかったことは、「$N$ 個の $r$ bit データを$N$個の10進数表現にする」ということです。

想定外の挙動というのは以下の２つです。
1. 8bitより大きい場合には、8bit区切りで計算する
2. 8bitより小さい場合には、二進数を左シフトで0埋めをしてから計算する

想定していたのは
1. 8bitよりも大きくても**特に区切らない**
2. 8bitよりも小さい場合には二進数を**右シフト**で0埋めをしてから計算する
という感じでした。

わかりにくいので例で示すと

```python
import numpy as np
# 入力が8bitの場合　(思ったとおりの挙動)
A = np.array([[1, 0, 0, 0, 0, 0, 0, 0]])
print(np.packbits(A)) # ⇒ [128]
# 入力が9bitの場合 ([256]になってほしかった)
B = np.array([[1, 0, 0, 0, 0, 0, 0, 0, 0]])
print(np.packbits(B)) # ⇒ [128, 0]
# 入力が3bitの場合 ([4]になってほしかった)
C = np.array([[1, 0, 0]])
print(np.packbits(C)) # ⇒ [128]
```

という感じです。

これをどうにかするために、場合分けをしてごちゃごちゃやっていたのですが、結局以下の方法でいいじゃんとなりました。つまり二進数の定義どおりに計算するという当たり前の方法です。

```python
# reverse: X[..., -1]を第1bitとする場合はTrue
#          X[..., 0] を第1bitとする場合はFalse
def mypackbits(X, reverse=True):
    p = np.power(2, np.arange(X.shape[-1]))
    if reverse:
        p = p[::-1]
    return np.dot(X, p)
```

計算時間は`np.packbits(X)`よりも`mypackbits(X)`のほうが短かったです。

```python
r = 8
N = 1000
X = np.random.randint(low=0, high=2, size=[N, r])
%timeit np.packbits(X) # 58.4 µs ± 174 ns per loop (mean ± std. dev. of 7 runs, 10000 loops each)
%timeit mypackbits(X) #  17.1 µs ± 278 ns per loop (mean ± std. dev. of 7 runs, 100000 loops each)
```


ニッチですが誰かの参考になればいいなーと思います。
Vuexでモジュールと処理を細分化する

Nuxt.jsを最近やり始めたんだけれど、Vuexでの状態管理がサクサクと書けて非常に良いな、という印象を持っている
んで、Vuexで利用する `store` フォルダ内のファイルをどのように分割するか、というと、これはどうやら人それぞれらしい

- `index.js` 内に全てまかなう方法
- `index.js`、`posts.js`、`user.js` とみたいにモジュール毎にファイル分け
- `index.js`、`mutations.js`、`actions.js`、`getters.js`のように状態管理の要素別にファイル分け

このような方法があるけれど、以下のようにモジュール別にフォルダを分けて、状態管理の要素別にファイル分けするという方法でやってみた

```
└── store
    ├── index.js
    └── posts
    │   ├── actions.js
    │   ├── getters.js
    │   ├── index.js
    │   └── mutations.js
    └── users
        ├── actions.js
        ├── getters.js
        ├── index.js
        └── mutations.js
```

このようにした理由はいくつかあるのだけれど、以下の2つが大きな理由

- 複数人で開発するときの開発しやすさ
- VuexでTypeScriptの導入がやりやすくなった時に、少しずつJavaScriptからTypeScriptへ移行できるようにする

## store/index.jsで各モジュールをimportする

```javascript:store/index.js
import Vuex from 'vuex'
import postsModule from './posts'
import usersModule from './users'

new Vuex.Store({
  modules: {
    posts: postsModule,
    users: usersModule,
  }
})
```

## 各モジュールのindex.jsに処理をimportする
actions、getters,mutationsをindex.jsでimportしておく
また、今回は各stateについてはモジュール内のindex.jsで定義した
`namespaced: true` にしておくことによって、他モジュールやcomponentからは `モジュール名/postDatas` や `モジュール名/アクション名` といったかんじで呼び出すことができる

```javascript:store/posts/index.js
import actions from './actions'
import getters from './getters'
import mutations from './mutations'

export const state = () => ({
  postDatas: {},

  postComments: [],
})

export default {
  namespaced: true,
  state,
  actions,
  getters,
  mutations
}
```

## 各々の処理を定義
以下のようにやっていく(例ではaction)

```javascript:store/posts/actions.js
export default {
  async fetchPostBy({ commit }, { id }) {
    ....
  },
...

}
```

このケースだと、 `posts/fetchPostBy` でこのアクションを呼び出すことができる。
ただし、同じpostsモジュール内の場合だと `fetchPostBy` で呼び出すことが可能
each とmapの違い（自分メモ用）



・eachはブロック内の処理はeach自身には反映されない。
・mapはブロックの戻り値がmap自体にも反映される。

```ruby
m = [[6, 1, 8], [7, 5, 3], [2, 0, 0]]
```

これを真ん中の1,5,0だけ抽出したい時に

```ruby:mapの時
 m.map{|a|a[1]} => [1, 5, 0]
```

```ruby:eachの時
 m.each{|a|a[1]} => [[6, 1, 8], [7, 5, 3], [2, 0, 0]]
```

となり、eachの場合だと{}の処理後に反映されていない。
引数（m）と同じ扱いになる。
dockerでサーバ間処理をローカル開発環境に構築しようとした時に躓いたこと

dockerにてサーバ間処理を行えるようにローカル環境を構築。localhostに向けてAPIを叩いて値を取得しようとした矢先に、以下のようなエラーに遭遇。

```
サーバB上で"http://localhost:3000/(APIのURL)"にリクエスト
→Failed to connect to localhost port 3000: Connection refused
```

さてさて、困った^ ^;

# 環境
サーバA：APIサーバ(port:3000)
サーバB：フロントサーバ(port:4000)

サーバBがAPIを叩いて、サーバAへ処理をお願いする、そんなオーソドックスな構成です。

サーバの構成ファイルは別々のディレクトリで管理しています。

# 解決策
サーバBのdocker-compose.ymlに`external_links`、`external`という設定を入れて、サーバAと疎通が取れるようにしてあげました。

```
version: '3'
services:
  front:
    〜
    external_links:
      - (server_Aのサービス名)
〜
networks:
  default:
    external:
      name: (server_Aのネットワーク名)
```

そしてAPIのリクエストを以下のように変更します。
```
"http://(server_Aのサービス名):3000/(APIのURL)"
```

# 何が問題だったのか？
そもそもサーバBからlocalhostにリクエストを投げることは、サーバB自身にリクエストを投げることと同義なのです。ループバックアドレスになっちゃうので・・・

そのため、docker上で外部のサーバAにリクエストを飛ばせるように設定を加える必要が出てきます。

その設定が`external_links`、`external`となるようです。

![全体像.png](https://qiita-image-store.s3.amazonaws.com/0/254597/9c72ed54-e06f-9e5e-c90f-bb83b819bbcd.png)


これで、サーバAのサービス名とポート番号を指定してリクエストを投げて上げることで、無事疎通ができるはずです^ ^

dockerは奥が深いですね。

この記事はあくまで自分の解釈で書いたものなので、本当はこうなんだよ〜というのがあればコメントいただけると幸いです。
ファン・ダン・ラーン（Fun/Done/Learn）で振り返りしてみた＋独自拡張してみた

# はじめに
以下記事にインスパイアされ、自分のチームでもファン・ダン・ラーン振り返りをしてみたので、その内容のシェア記事です。

- [ファン・ダン・ラーン(FDL)ふりかえりボード](https://qiita.com/yattom/items/90ac533d993d3a2d2d0f)
- [Fun/Done/Learnによるふりかえりレポート / 学び・楽しさにフォーカスするアクティビティ紹介](https://qiita.com/viva_tweet_x/items/7e279f41f4388d9162ef)

**ファン・ダン・ラーンとは？**
以下フォーマットを用いて、振り返りをすること。
（それ以上の定義は無く、使い方についてはチームごとにカスタマイズされることが前提となっている。）

![ファン・ダン・ラーン](https://camo.qiitausercontent.com/5f8f8334058300fa39b2d3f977b5674adb3e3527/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f31373133312f32353838663564642d366336362d316335632d306466362d6238626539383735326161632e6a706567)
※[ファン・ダン・ラーン(FDL)ふりかえりボード](https://qiita.com/yattom/items/90ac533d993d3a2d2d0f)より引用

# 結論
**良いところ**

- 「Fun」の基準があるので、「感情」にフォーカスして振り返りができる。
    - 「感情を発露すること」を「是」とできる空気感が作れることで、心理的安全が醸し出されている感じがある。
    - 普段の振り返りでは「楽しくなかったから・・・」とは言い難かった
- 「Done（Deliver）」の「線引」があるので、どこまで行けば良いのか？の会話が促進される。
    - 我々が目指していることが何なのか？を振り返りのたびに、話し合うことができる。
    - 線の中/外が明確になるので、「どれを改善すればよいか？」がわかりやすい

**カスタムしたところ**

- 「Learn」
    - ウチのチームでは別途「学習した内容をシェアする時間」を振り返りとは別でも受けていたので、「振り返りでわざわざフォーカスする必要が無いね」という話になりました。
    - 何がベストかは決まってないですが、「重力に負けそうな部分（日頃意識するのは難しい部分）」などを定義すると良さそうだなーと感じてます。
    - ウチのチームでは、「ScrumValues（5つのスクラム価値基準）」とか「Dream（個人の理想像）」とかにしたりしてます。
        - 今の所、「Dream（個人の理想像）」が一番しっくりきてます。（ファン・ダン・ラーンより語呂が悪いのが弱点）
        - 「心理的安全性」が脅かされがちなチームであれば「Safe」とか入れても良いかも。（Funに近いかもだけど、明確に抜き出すのが大事なときもある気がする）
        - 「顧客目線」が足りてないなら「Customer」とか。
- 「Done」の定義
    - 「価値の提供に貢献できた」くらいのニュアンスで使ってました。
        - 『「完遂したこと」というニュアンスでは無い』ということは宣言してました
    - ウチのチームでは「もう少しやりようがあった気がする場合は線の外」くらいの感じで線引してました。
- 「Fun」の定義
    - 個人の感情のため、否定しない（というか出来ない）ことを前提に主張してもらった

# 実際の流れ

大きくは以下の流れでやりました。

1. 個人ワーク：「頑張ったこと」「みんなで話し合いたいこと」「感情が動いたこと」「何かしらの気づき」を付箋に書き出す
2. グループワーク：順番を決めて交代で、付箋を説明しながらホワイトボードに貼る。（※人数が少ない場合に限る）
3. グループワーク：どの付箋について振り返るか決める。
4. グループワーク：振り返り対象について、アイデアを出し合う。
5. グループワーク：どのアイデアを対策として実行するか決める。

※人数が多い場合
人数が多い場合は、付箋を張ってから、話し合いたいものを投票して決めても良いかも。
ウチのチームは3人＆1週間スプリントで、付箋の数も少なかったので、全部話しながら張り出しました。

※他に注意したこと
「付箋に書き出す」のに時間がかかりがちなので、書きたい人だけ一行日記を書けるような場所を用意してました。
振り返りの時に、「あ～、こんなんあったね～」って思い出すのが目的でした。
個人的には結構役に立った。

## 最終的なホワイトボードはこんな感じ
Dreamのバージョンもあるんですが、とりあえず、一番初回にやったLearnバージョンで載せておきます。
（この時は、1週間スプリント＆メンバー2人だけってこともあり、付箋がすっごい少ない。）

![2019-02-19_masked_small.jpg](https://qiita-image-store.s3.amazonaws.com/0/214587/4e100dcf-8ca8-ba87-59e0-1eca51d5fb1c.jpeg)

Doneの周りのうにょうにょ線は、「この線を越えたいよねー、この外にあるやつを振り返ろう！」って話をした時の線です。

# 感想
**メンバーの感想**

- 振り返りに感情が乗るのが良い！（今までの振り返りはなんか、人間味が無くなっていく感じがする）
- （普段は意識しないけど、これなら）「つまらない」に対してのアクションを考えるようになる。

**自分の感想**

- 「良かった」「悪かった」の二元論ではなく、複数の基準で評価できるのが現実に即している感じで振り返りやすかった。
    - 「良かったとも悪かったとも言える・・・」みたいな話もあるので。
- 何も定義がなさすぎて、一番最初の導入は混乱した。（逆に言えば、自分で決めていい自由度の大きい振り返りフレームワークとも言える）
- 「Done」っていう言葉に引っ張られて「終わったこと」というニュアンスで受け取られがちなので、「Deliver（価値の提供）」という基準であることをファシリテーターは意識しておくべきだと感じた。

# さいごに
いろんな振り返りフレームワークがあるので、ぜひ活用していきたいです。
他の振り返り系記事でも言われてますが、「[アジャイル・レトロスペクティブズ](https://www.amazon.co.jp/dp/4274066983)」を読んでおくとより良い振り返りができると思います。おすすめです。

以上です。
[failed]bubblesort 

```c
#include<stdio.h>
int main (void)
{
    int i,j,temp;

    int num[3];
    for(i=0;i<=2;i++){
        scanf("%d",&num[i]);
    }

    for(i=0;num[i]<num[i+1];i++){
        temp=num[i];
        num[i] = num[i+1];
        num[i+1]=temp;

    }

    //for result check//
    for(i=0;i<=2;i++){
        printf("%d",&num[i]);
    }
Google スプレッドシートを curl で読む

次のシートを読みます。
![spread_mar0401.png](https://qiita-image-store.s3.amazonaws.com/0/179446/42799405-8019-a63c-7ef1-df5e469c44c6.png)

シート名は、Sheet1 とします。

## curl のスクリプト

```bash:curl_read.sh
#
ACCESS_TOKEN="******"
SPREADSHEET_ID="*****"
URL="https://sheets.googleapis.com/v4/spreadsheets/"
#
curl -H "Authorization: OAuth "$ACCESS_TOKEN \
	-X GET \
	$URL$SPREADSHEET_ID/values/Sheet1!A1:E1
```

実行結果

```text
$ ./curl_read.sh 
{
  "range": "Sheet1!A1:E1",
  "majorDimension": "ROWS",
  "values": [
    [
      "t2001",
      "小山",
      "71345",
      "FALSE",
      "2017-3-15"
    ]
  ]
}
```

## Httpie のスクリプト

```bash:http_read.sh
ACCESS_TOKEN="******"
SPREADSHEET_ID="*****"
URL="https://sheets.googleapis.com/v4/spreadsheets/"
#
http GET $URL$SPREADSHEET_ID/values/Sheet1!A1:E1 --verify=no \
	"Authorization: OAuth "$ACCESS_TOKEN
#
```

実行結果

```text
$ ./http_read.sh 
HTTP/1.1 200 OK
Alt-Svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
Cache-Control: private
Content-Encoding: gzip
Content-Type: application/json; charset=UTF-8
Date: Fri, 04 Aug 2023 05:38:03 GMT
Server: ESF
Transfer-Encoding: chunked
Vary: Origin, X-Origin, Referer
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 0

{
    "majorDimension": "ROWS",
    "range": "Sheet1!A1:E1",
    "values": [
        [
            "t2001",
            "小山",
            "71345",
            "FALSE",
            "2017-3-15"
        ]
    ]
}
```

## アクセストークンの作成方法はこちら
[Google スプレッドシートを curl で扱う](https://qiita.com/ekzemplaro/items/bbe4222544eb17110604)

## スプレッドシートの ID
ファイルを開いた時の URL の 'd/' と '/edit' の間です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/b9d463bb-1f16-55fb-7a46-65b0d7c2036f.png)


## 参考ページ
[Google Sheets > API v4 > Basic Reading](https://developers.google.com/sheets/api/samples/reading?hl=ja)
ラスボス系後輩ヒロインAIチャットボットを作りたい・Pythonの基礎④

[前回](https://qiita.com/perpouh/items/74e21d76117594509cf6)の続きから行きます。具体的に関数内関数から。
BB/GOはフレンドの始皇帝に倒してもらいました。ありがとうフレンドの始皇帝。

## 関数内関数

関数の中に関数を作ることができます。JavaScriptとかPHPでもできますけど、まあ使った覚えはない……。

```python
def outer(str):
  def inner(str):
    str = "piyo"
    print("inner: " + str)
  print("outer: " + str)
  inner(str)
  print("outer: " + str)

outer("hoge")
inner("fuga")
```

```bash
$ python func.py 
outer: hoge
inner: piyo
outer: hoge
Traceback (most recent call last):
  File "func.py", line 35, in <module>
    inner("fuga")
NameError: name 'inner' is not defined
```

はい。当然関数の外からはアクセスできません（PHPは何故かできるけど）（あれ本当に何のための関数内関数なんだろうか）
innerメソッドの中でstrを書き換えてもouterメソッドに影響することはありません。

## クロージャ

```python
def outer(str):
  def inner():
    print("inner: " + str)
  return inner

inner = outer("hoge")
inner()
```

```bash
$ python generator.py 
inner: hoge
```

はい。
引数にメソッドを渡してやることもできます。

```python
def outer(str, func):
  def inner():
    func()
    print("inner: " + str)
  return inner

def closer():
  print("piyo")

inner = outer("hoge", closer)
inner()
```

## 無名関数：ラムダ関数
ラムダ。Java8のラムダ式からいまいち和解できないでいるのですけど、これはワンライナーくらいの意味で受け取っていいのかしら。ラムダ式もラムダ関数も、ラムダという言葉の意味自体がよくわかりません。AWS Lambda（サーバレス）とか見るに「無」？
<del>某作品の乱数と書いてラムダと読むキャラもよくわかりません。乱数とラムダ関係なくない？</del>

閑話休題。コードを書きます。

```python
def zipnumber(num, func):
  num = func(num)
  print(num[0:3] + "-" + num[3:7])

numbers = ["123-4567", "12-34567", "1234567", "1-23-4567"]

for number in numbers:
  zipnumber(number, lambda number: number.replace("-", ""))
```

どこにハイフンが入ってるかわからないので一旦ハイフンを取り除きつつ再成形して表示するコード。

```
$ python generator.py 
123-4567
123-4567
123-4567
123-4567
```

lambdaで渡したものをfunc()で実行することに何故かものすごい違和感がある……。うーん。

## ジェネレータ
ジェネレータは[この前](https://qiita.com/perpouh/items/74e21d76117594509cf6#%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF%E5%86%85%E5%8C%85%E8%A1%A8%E8%A8%98)うっかりやってしまったので割愛。ジェネレータ内包表記を理解するためにジェネレータ関数やっちゃってました。
うーんしかしますますジェネレータ内包表記の使い所はわからない……

## デコレータ

デコレータの説明はインターネットだとこちらがわかりやすかったです。
[Pythonのデコレータについて - Qiita](https://qiita.com/mtb_beta/items/d257519b018b8cd0cc2e)

```python
def check_role(func):
  def wrapper(*args, **kwargs):
    print("log start")
    func()
    print("log end")
  return wrapper

@check_role
def main_method():
  print("method execute!")

main_method()
```

```bash
$ python decorator.py 
log start
method execute!
log end

```

うおおSpringFrameWorkのあのイケてるアノテーションみたいなことができる……！！神！マジで好きな言語とFWの好きなところが詰まってる！ワー！！
アノテーションが下（メソッド宣言に近い方）から処理されるってことだけちゃんと留意すれば良さそうです。ひええ好き……

本日は保守対応があったためお勉強はちょっとだけ。残りは名前空間と例外。
Node-RED（enebular）のobnizノードを使ってみる

　obnizには"**Cloud API**"というAPIが用意されています。これはWebSocketでjson形式のコマンドを送ると、IO制御やディスプレイの表示を変えるといった操作ができます。

　このCloud APIをノンプログラミングで利用できるよう、**Node-RED**に**obnizノード**が用意されています。

<font color="Red">
2020年10月にobnizノードのアップデートがありました。
↓をご参照ください。
[Node-REDのobnizノードがバージョンアップした！](https://qiita.com/wicket/items/e150e78cd787da03493e)
</font>

　Node-REDは株式会社ウフル様の「**enebular**」の環境を使用しました。

　今回はobnizノードを使い、Node-REDのinjectノードのボタンを押すと、obnizの画面に"Hello,obniz!"が表示されるデモを作成します。手順は次の通りです。

　１．Node-REDにobnizノードをインストールする
　２．Node-REDでフローを作ってデプロイする
　３．動作確認

##１．Node-REDにobnizノードをインストールする
 enebularのNode-RED環境を起動します。環境が立ち上がると画面右上"デプロイ"ボタンの下にタブがいくつか表示されています。
　"**admin**"タブを選択し、入力欄に次の文字を入力します。
　　node-red-contrib-obniz

　入力欄下部の"**Install**"ボタンを押すとインストールが始まります。
<img width="310" alt="obnizインストール.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/183282/41330b71-e147-b52c-c6c7-7212caa2c3b7.png">

　インストールが完了するとノード一覧（画面左端）にobnizノードが追加されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/183282/453a9074-a5c1-2d9d-f4d6-2ebed5ac4d69.png)

##２．Node-REDのフローを作ってデプロイする
　Node-REDのフローを次の図のように配置します。
使用するノードは次の3つです。
- injectノード
- debugノード
- obnizノード
![image.png](https://qiita-image-store.s3.amazonaws.com/0/183282/4640d1cd-8ede-8092-2877-26e31248225a.png)
　各ノードの設定を次のようにします。
####**injectノード**
・ペイロードの種類を"**JSON**"に設定
・ペイロードを入力

**ペイロード**

```
   {
       "display": {
          "clear": true, 
          "text": "Hello, obniz!"
       }
   }
```


![image.png](https://qiita-image-store.s3.amazonaws.com/0/183282/74477cd2-96c1-766f-93c2-49977a780f7f.png)


![image.png](https://qiita-image-store.s3.amazonaws.com/0/183282/4893f540-52e4-2b74-5dcb-27fa505c972d.png)
####**obnizノード**
・obniz IDを入力します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/183282/422e02e5-cf43-2a8d-e61c-9709955ccd25.png)

以上の設定を終えたら、画面右上の"デプロイ"ボタンを押してデプロイ！

##３．動作確認
　injectノードの左端にある□を押すとobnizの画面に"Hello,obniz!"と表示されます。
同時にNode-REDのデバッグコンソールにJSONの内容が表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183282/30325d2d-ffd4-28be-debd-676d5e9b5191.png)

![20190303_175513.jpg](https://qiita-image-store.s3.amazonaws.com/0/183282/a8d443b9-796e-d02e-2d98-2f0c5f9ab5ae.jpeg)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183282/fee07c93-c74a-a608-e7f1-f4baad649653.png)

##参考
・obniz Cloud API
　　https://obniz.io/doc/obniz_api
　
・Node-RED日本ユーザ会
　　https://nodered.jp/

・obniz　node-red SDK リファレンス
　https://obniz.io/doc/nodered-sdk/README

・株式会社ウフル　enebular
 https://www.enebular.com/ja/index.html
18日目。HTML&CSS上級編、スマホ対応できました！

１８日目の本日はついにHTML&CSS上級編にチャレンジです。

##画面サイズ毎に表示を変える
max-widthで最大幅ごと、min-widthで最小幅ごとに表示を設定。
670pxまで、1000pxまで、それ以上の３段階の場合はこんな感じ。

```
h1 { color: red }

@media ( max-width: 1000px ) {
  h1 { color: blue; }  
}

@media ( max-width: 670px ) {
  h1 { color: green; }  
}
```

## 全ての要素に共通の設定をする
```
* { xxxxx }
```

##サイズをボーダー込みで計算する
 `box-sizing:` 
  `border-box`・・・ボーダー込み
  `content-box`・・・ボーダーなし（CSS2まで、デフォルト）
 `inhabit`・・・親要素を継承する

```
* {
 box-sizing:border-box;
}
```

##viewportを設定する
とりあえず呪文として`head`に書いておく

```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

##画面の幅をピクセルから％に変更する
スマホでもパソコンでも最大サイズにしたいので、「100%」にする

```
.container { width: 100%;}
```

##パソコン用とスマホ用でCSSを分ける
viewportの下にサプで呼び出すCSSのリンクを貼る
スマホ用のCSSに1000px以下の設定を書いていく

```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stylesheet.css"><!-- PC用-->
    <link rel="stylesheet" href="responsive.css"><!-- スマホ用-->
```

##floatを解除する
スマホ版だとレイアウトが崩れるので、floatを解除する。

```
—Floatを解除したい行にて
<div class=“clear”></div>
```
クリアのための空タグを打つ、というのがちょっと不思議ですね！

```
—CSSにleftのクリアを指定。
.clear { clear:left; }
```

##スマホ専用のメニューを作る
PC画面の時は`display: none;`スマホの時は`display: block;`
スマホ画面の時は、PC用メニューを`display: none;`にします。なるほどー！

#HTML&CSS上級編（ガイドなし、仕様書でつくる。)

##ヘッダーをスマホ対応させる
###アイコンを探す
すごいいっぱいある！
https://fontawesome.com/v4.7.0/icons/

たしかヘッダーで読み込んでおいて呼び出すんだっけ？
`<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">`

`bars`にしてみる
https://fontawesome.com/v4.7.0/icon/bars
`<span class="fa fa-bars menu-icon"></span>`

これでいいはずなんだけど、アイコンは真ん中で黒い表示。どうやっても右詰めの白表示にならず。とりあえず「次へ」行ったら判定通っちゃいました。まあいっか。(18分)

##トップ部分をレスポンシブ対応させよう
### 新規登録、Facebook、Twitterボタン
横長100％にしてOK！と思ったら、下段のボタンは短いままにしなきゃでした。
上段のボタンをまとめているクラスを指定してクリア。
ボタン同士がくっついているので、padding-bottomで指定したら遠らない。
しかしこれは仕様書になくて、見本にある・・・？ので、設定を外してくっついた状態にしたら判定を通りました！見本と違っても判定基準を満たしていればいいらしい。まあいっか。(15分)

##レッスン一覧をレスポンシブ対応させよう
###タイトルのフォントを変える
###アイコンのサイズを変える
これでOKとおもいきや、PC版のレイアウトが崩れたので！
###Floatをクリア
タブレット版のレイアウトがなんか違っていたらしく。よくみるフォントサイズが違う。
###headingのフォントサイズを変更
通りました！（15分）

##フッターをレスポンシブ対応にしよう
ここは簡単。アイコンを中心揃えにするだけ。
と思ったら、最後のボタンを100%にするのでした。完成！(5分）
ところで `text-align: center;` でテキストだけではなく画像も揃うんですね。不思議です。

これにてHTML＆CSSクリアです！
PC、タブレット、スマホに対応できました。
http://appdays.herokuapp.com/Day18/

(所要時間 2時間ちょっと）
[Swift4]配列の中の全ての要素が条件を満たすか判定する

Swift4.2から使えます。

##allSatisfy
>
シーケンスのすべての要素が特定の述語を満たすかどうかを示すブール値を返します。
func allSatisfy(_ predicate: (Element) throws -> Bool) rethrows -> Bool


```swift

// 全ての値が偶数が判定する
let values = [2, 4, 6, 8, 10]
let isAllEvenNumber = values.allSatisfy { $0 % 2 == 0 } // isAllEvenNumber == true

// 全ての値が５文字以上か判定する
let names = ["Sofia", "Camilla", "Martina", "Mateo", "Nicolás"]
let allHaveAtLeastFive = names.allSatisfy({ $0.count >= 5 }) // allHaveAtLeastFive == true
```
Pandasでデータを操る。長いURLをちゃんとエクセルに書き出したい編

# Introduction

以下のような実験データファイル(test.tsv)があるとします。実験の結果、「これは重要な部分だから、後で他のデータベースリンクと詳細を比較しよう」と思い、8行目のRef_Link列に参考データベースのURLを書き込みました。

![スクリーンショット 2019-03-04 17.58.51.png](https://qiita-image-store.s3.amazonaws.com/0/335400/c1b0b390-06b4-e702-24e2-32ee23d007cb.png)

これを他の人がPythonを使ってエクセルに書き出したときにどうなるでしょうか、というのが今回のお題です。

ちなみにこのリンクは https://hogehogehogehoge...hogehoge.com というものです。特に特殊文字を含んでいるとか、そういったことはありません。

# 長すぎるURLは無視される

以下にtest.tsvファイルを読み込んでtest.xlsxに書き出すだけのスクリプトを示します。

```python:test_pre.py

'''
    test3.py
'''

import pandas as pd


# read data
data = pd.read_csv('test.tsv',delimiter='\t', index_col=0)

# write to excel
data.to_excel('test.xlsx')
```

これを実行してみると以下のような実行結果が返ってきました。

```
 Ignoring URL 'https://hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge' with link or location/anchor > 255 characters since it exceeds Excel's limit for URLS
  force_unicode(url))
```

そして結果のtest.xlsxファイルは以下のようになります。

![スクリーンショット 2019-03-04 18.08.11.png](https://qiita-image-store.s3.amazonaws.com/0/335400/167af409-16d9-0e00-5739-fa46715cb7ad.png)

8行目のRef_Link列の値がなくなっていることがわかります。これは上に示した警告文通り、**長すぎる(具体的には255文字以上の)URLが無視されてしまったためです**。エクセルにはhttpから始まる文字列を自動的にURLと認識する機能があるのですが、URLが長すぎると、その機能とpandasの書き出し機能が競合を起こすようなのです。

# 解決策: ExcelWriterで書式設定

スクリプトを以下のように書き換えます。

```python:test3.py
'''
    test3.py
'''

import pandas as pd


# read data
data = pd.read_csv('test.tsv',delimiter='\t', index_col=0)

# convert from pandas data to excel
writer = pd.ExcelWriter('test.xlsx', options={'strings_to_urls':False})
data.to_excel(writer)
writer.close()
```

pandasでDataFrameをエクセルに書き出すときに、書式の設定を行うことができます。

```python
options={'strings_to_urls':False}
```

とすることで、先に説明した**httpで始まる文字列を自動でURLと認識する機能をやめることができるのです**(.ExcelWriter()の詳細についてはここでは割愛)。

これを実行すると、先ほど出ていた警告文はなくなり、以下のようにちゃんとURLが、8行目Ref_Link列に文字列として挿入されるようになりました。

![スクリーンショット 2019-03-04 18.13.08.png](https://qiita-image-store.s3.amazonaws.com/0/335400/66acef7e-18d4-e5b0-a6dd-941d2b75639e.png)
React Routerを使用して作ったページをGitHub Pagesにデプロイしようとしたらうまくいかなかった話(解決法まで)

## まず何をしようとしてたのか
`create-react-app`を使用してreactのアプリケーションの枠組みを作ってそれを基にポートフォリオサイトを作り，GitHub Pagesへ上げようとしていた。

## 何が起きたのか
[GitHub PagesにReactアプリをデプロイする方法](https://qiita.com/yuitnnn/items/11375ea29ec023d19fdf)や[react-gh-pagesのリポジトリ](https://github.com/gitname/react-gh-pages)を見ながらデプロイしようとしてたらページが表示されなかった。

## 試したこと
- `gh-pages`のバージョンを落としたり
- `homepage`のリンクをhttps://ry-itto.github.io/リポジトリ名 にしてみたり
- 新しく`create-react-app`を使用して何も変更していない状態でちゃんとデプロイできるか試したり

しました。

## 何をしたらうまくいったのか(解決法)
`BrowserRouter`に`basename={process.env.PUBLIC_URL}`をつけてあげるとうまくいった。

```react
<BrowserRouter basename={process.env.PUBLIC_URL}>
  <Switch>
    ...
  </Switch>
</BrowserRouter>
```

## 終わりに
今回はReactの練習がてらポートフォリオサイトを作成してGitHub Pagesに上げようと思ってこの問題に直面しました。
それゆえになぜ上記のような解決方法で解決したのかを理解できていないので今後理解していこうと思います。

## 今回作成したポートフォリオサイト
https://ry-itto.github.io/portfolio_react
※挙動がおかしい部分などありますが暖かい目で見ていただけるとありがたいです。。

## 参考
- [GitHub PagesにReactアプリをデプロイする方法](https://qiita.com/yuitnnn/items/11375ea29ec023d19fdf)
- [react-gh-pagesのリポジトリ](https://github.com/gitname/react-gh-pages)
- [React-router problem with gh-pages - Medium](https://medium.com/@Dragonza/react-router-problem-with-gh-pages-c93a5e243819)
TextMeshProのフォントアセットが壊れた時の対処メモ

## はじめに

`(略) because it was serialized with a newer version of Unity. (Has a higher Serialized File version)` などと言われ、フォントアセットが壊れることがある。

## 試してダメだったこと

- Unityのバージョンを最新に変える
- Library, Objフォルダを削除

## 対応

一度Editor上から該当アセットを削除し、Gitで復元すると治ることがある。何も分からん…。
Node.jsインストール してみた

nodebrewでnode.jsをインストールしたけど三秒で終わらなかった時のメモ....φ(・ω・｀ )

#手順
1.Homebrewのインストール
2.nodebrewのインストール
3.node.jsのインストール
4.有効化
5.パスを通す
#Homebrewのインストール

[Homebrew](https://brew.sh/index_ja)

```terminal
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
#nodebrewのインストール

```terminal
brew install nodebrew
````

#node.jsのインストール
最新を入れる

```terminal
nodebrew install-binary latest
```
ちなみに安定はstable

``` error
Fetching: https://nodejs.org/dist/v11.10.1/node-v11.10.1-darwin-x64.tar.gz
Warning: Failed to create the file                                             
Warning: /Users/Morico/.nodebrew/src/v11.10.1/node-v11.10.1-darwin-x64.tar.gz: 
Warning: No such file or directory
                                                                            0.0%
curl: (23) Failed writing body (0 != 846)
download failed: https://nodejs.org/dist/v11.10.1/node-v11.10.1-darwin-x64.tar.gz
```
フォルダがないので失敗したらしい

```
mkdir ~/.nodebrew/src
```

再度、nodebrew install-binary latestで
######################################################################### 100.0%
Installed successfully

```terminal 
nodebrew ls 
```

v11.10.1

current: none

#有効化

```terminal 
nodebrew use v11.10.1
```

nodebrew ls

v11.10.1

current: v11.10.1

まだしかし、現状だと
node -v
とかしてもcommand not foundが表示されるだけなので

#パスを通す
```
export PATH=$PATH:~/.nodebrew/current/bin
```
上記を.bashrcとかに追記して
source .bashrcで読み込めば

node -v

v11.10.1

以上（2019-03-04）
スタック

abc120 c

```
#include<iostream>
#include<vector>
#include<algorithm>
#include<string>
#include<map>
#include<math.h>
#include<queue>
#include<deque>
#include<stack>
#include<cstdio>
#include<utility>
#include<set>
#include<list>
#include<cmath>
#include<stdio.h>
#include<string.h>
#include<iomanip>
using namespace std;
#define FOR(i, a, b) for (ll i = (a); i <= (b); i++)
#define REP(i, n) FOR(i, 0, n - 1)
#define NREP(i, n) FOR(i, 1, n)
using ll = long long;
using pii = pair<int, int>;
using piii = pair<pii, pii>;
const int dx[4] = { 0, -1, 1, 0 };
const int dy[4] = { -1, 0, 0, 1 };
const int INF = 1e9 + 7;
int gcd(int x, int y) {
	if (x < y)swap(x, y);
	if (y == 0)return x;
	return gcd(y, x%y);
}

template<class T1, class T2> void chmin(T1 &a, T2 b) { if (a>b)a = b; }

template<class T1, class T2> void chmax(T1 &a, T2 b) { if (a<b)a = b; }
template<class T>
void Add(T &a, const T &b, const T &mod = 1000000007) {
	int val = ((a % mod) + (b % mod)) % mod;
	if (val < 0) { val += mod; }
	a = val;
}
////////////////////////////////////////
int main() {
	string s;
	cin >> s;
	int res = 0;
	stack<char>st;
	for (int i = 0; i < s.size(); ++i) {
		if (st.empty() || st.top() == s[i]) {
			st.push(s[i]);
		}
		else {
			res += 2;
			st.pop();
		}
	}
	cout << res << endl;
	return 0;
}
```
スタックは積み重ねるイメージ。キューと逆。
【Oracle】テーブルのカラム情報をSQLで取得する方法

# 背景

普段の開発中の場合、SQLクライアント（GUIツール？）を使用していれば、カラム情報の取得は困らないと思います。
GUIでぱぱっと表示できます。

しかし、SQLを使って、カラム情報を取得したい状況があるかもしれません。
そんな状況があったので、せっかくなので記事に残そうと思いました。

# 動作確認環境

- Oracle 11g
- SQL Developer

# SQL

```sql
SELECT
  column_name
  , data_type
  , data_length
FROM
  all_tab_columns 
WHERE
  owner = 'HOGE'
  AND table_name = 'FUGA'
ORDER BY
  column_id; 
```

カラム情報を確認するには、all_tab_columnsを参照します。
上の例で、WHERE句は、HOGEスキーマが所有しているFUGAテーブルを指定しています。
ORDER BY句は、項目の順番（column_id）を指定します。

SELECT句はそれぞれ、

- column_name → 列名（カラム名）
- data_type → 列のデータ型
- data_length → 列の長さ

を表しています。

その他にも取得できる情報はたくさんあります。
詳しくは、[ALL_TAB_COLUMNS（Oracle公式）](https://docs.oracle.com/cd/E16338_01/server.112/b56311/statviews_2103.htm)を参考にするとよいかと思います。

# 終わりに

MySQLの場合は、```DESCRIBE テーブル名``` で取得できます。
MySQLに比べると、OracleはSQLが長くなってしまい微妙だなぁ…という印象です。
最近遊んでるpaiza.jpの話【Python3標準入力解決】

#paiza.jpで遊んでいる話
独学でPGをやっている関係上、特定の分野にかまけていると数値処理などがだんだん怪しくなってくることが時折あります。
最近「あれってどうやるんだっけ・・・」となることが頻発していたので、 [paiza.jp](https://paiza.jp/challenges/info)さんのスキルチェック講座でリハビリをしています。
この記事は

**paiza.jpのスキルチェック楽しいんだけど、標準入力のせいで敷居が高くなっていて勿体ないな**

ということが書いてある記事になります。＋　標準入力の解決も書きました。
解決だけ知りたい人は「スキルチェックにおける標準入力の解決」までどうぞ

#paiza.jpとは
就職サイトに学習サイトなどがくっついている感じのサイト。当方転職活動中ですが、こちらのサービスは利用していません。作ったコードとか後述のスキルチェックでクリアした程度で紹介が来たり来なかったりだそうです。いろいろな言語をブラウザ上で環境作らずに気軽にかけるので、遊ぶ分には楽で楽しいです。

#paiza.jpのスキルチェック
時間制限がある中でお題をコーディングしていく系のやつです。
S～Dレベルの問題がある中で、B問題くらいまではやってみました。
問題レベル的には数値処理ができればサクサクかけます。（～Cまでの感想）
時間まで計測されながらコーディングするのは初めての経験だったので、難易度も程よくゲーム感覚でなかなか面白いです。
C問題ではスピード込みで上位に入れてもらえて割とご満悦
![57b54e4a3c6768c4f48044ef00b7632e.png](https://qiita-image-store.s3.amazonaws.com/0/361263/3d08342f-f60e-b4b2-dd60-23a3fc948045.png)


#paiza.jpの標準入力
ただ入力データ取り込みの「標準入力」がよくわからなすぎて、登録してすぐ手を付けた問題は投げました。（後日勿論タイムアップになりながらも解答）
一応[ヘルプリンク](https://paiza.jp/guide/samplecode.html)はありますが、いま改めてみると、うーんまあわかるけど…って感じです。

```python:helpcode.py
input_lines = int(input())
for i in range(input_lines):
  s = input().rstrip().split(' ')
  print("hello = "+s[0]+" , world = "+s[1])
```

当時の私はそもそも標準入力自体が怪しかったので、さっぱりでした。後日[pythonの講座を進めていくと見つかった](https://paiza.jp/works/python3/primer/beginner-python3)（リンク先の.05）ので、理解しましたが実際の能力とは別のところで若干敷居が高いハードルがあるものどうなんだろう…


#スキルチェックにおける標準入力の解決
自分は[ここ](https://tommru.com/programing/python/standard_input)をみて解決しました。
入力データが連なっている方向で処理が異なります。
今のところこの組み合わせで標準入力はすべて解決しています。

###一番原始的な処理

```python:simple.py
#入力データが以下だったとする
#5

l=input()
#1つだけデータを取り出すならこれだけ。l=5となる。

```
###縦に連なっている場合
取り組んだ問題のなかでは、こちらのほうが高頻度で使用しました。

```python:tate.py
#入力データが以下だったとする
#5
#10
#15

n=3 #データ数。以下のnに直接入れてもok
l = [input() for i in range(n)]
#list形式で取得する。l=["5","10","15"]となる。
#整数として取得したい場合はinput()をint(input())とすればよい。

```

###横に連なっている場合

```python:yoko.py
#入力データが以下だったとする
#5　10　15

l=input().split() 
#list形式で取得する。l=["5","10","15"]となる。
#整数として取得したい場合はmapという関数を併用する。
#l = list(map(int, input().split()))

```

#後記
スキルチェック楽しくて一生できるけど、眼精疲労なのか首がずっとじわじわ痛いです。
仕事で拘束時間が無駄に長いのと、いろいろなことに目が行き過ぎてどれも進捗が微妙なのが悩みです。また更新します。
.classpathをGitで管理しつつ変更は無視したい

# `.classpath` をGitで管理しつつ変更は無視したい
JavaのプロジェクトをEclipseで扱っていると、 `.classpath` というファイルが生成されます。
これがないとEclipseがうまく起動できないので、Gitの管理下には入れたいです。

ただ、ビルドかなんかのタイミングで、この `.classpath` の中身がコロコロ変わるんです。この変更をコミットしたくはないので、変更を無視する方法を調べました。

# `--skip-worktree` ならできる
後輩いわく「skip-worktreeでできますよ。それ」

ん？なにそれ？

`update-index` に `--skip-worktree`というオプションがあるみたいで、それなら「Gitで管理しつつ変更は無視」が可能みたいです。

`--skip-worktree` については、こちらの記事がとても参考になりました。
[既に git 管理しているファイルをあえて無視したい](https://qiita.com/usamik26/items/56d0d3ba7a1300625f92)

今回の場合、以下のコマンドを叩けばよいです。

```bash
git update-index --skip-worktree .classpath
```

すごい！できた！後輩に感謝。


# SourceTreeのカスタムアクションに登録してみる

コマンドだとすぐに忘れちゃうので、できればGUIで操作したい。
ということで、SourceTreeのカスタムアクション（独自スクリプト）に登録します。

カスタムアクションについては、こちらの記事がとても参考になりました。
[SourceTreeのカスタムアクションでマージ済みのブランチを消す](https://qiita.com/yumechi/items/a060dc199ee54c134e86)

`.classpath` がGitの作業ディレクトリのrootにあるとは限らないので、こんな仕様を考えました。

- `.classpath` という名前のファイルをサブディレクトリからすべて検索する
- 見つかったすべての `.classpath` に対し、 `--skip-worktree` を適用する

## Macの場合

こんなスクリプトを作ってみました。

```SkipClasspath.sh
#!/bin/bash
find . -name .classpath | xargs -I % git update-index --skip-worktree %
```

`find` で `.classpath` を検索しています。
`xargs` で見つかったすべての `.classpath` に対し、 `--skip-worktree` を適用します。

これをカスタムアクションに登録すればOKです。

もし、実行時に `launch path not accesible` というエラーが表示された場合、以下のコマンドで実行権限を与えてください。

```bash
chmod u+x SkipClasspath.sh
```

## Windowsの場合

こんなバッチを作ってみました。

```SkipClasspath.bat
set fileList=`dir /s /b .classpath`
for /F "usebackq delims=" %%g in (%fileList%) do (
    git update-index --skip-worktree %%g
)
```

`dir` で `.classpath` を検索しています。
`for` で見つかったすべての `.classpath` に対し、 `--skip-worktree` を適用します。

これをカスタムアクションに登録すればOKです。

# さいごに
カスタムアクションに登録できました！GUIで操作できて便利です。
Pandasでデータを操る。数値を数値としてエクセルに書き出したい編

# Introduction
以下のような実験データファイル(test.tsv)があるとします。実験データが得られなかった部分がハイフン'-'で埋められています。

![スクリーンショット 2019-03-04 12.21.18.png](https://qiita-image-store.s3.amazonaws.com/0/335400/cee20cce-36aa-b1d3-dab8-3c3353bffa40.png)

これを読み込み、何らかの数値処理を行ったのち、他の人もデータ整理がしやすいようにとエクセルファイルに書き出そうとしました。

# 普通に.to_excel()でよいのでは？

pandasは非常に便利なため、DataFrameをエクセルに書き出すなど、造作もなくこなすことができます。以下は何のひねりもなく、test.tsvを読み込んだ結果をそのままtest.xlsxに書き出すスクリプトです。

```python:test_pro.py

'''
    test.py
'''

import pandas as pd


# read data
data = pd.read_csv('test.tsv',delimiter='\t', index_col=0)

# write to excel
data.to_excel('test.xlsx')
```

このスクリプトを実行して出力されたエクセルファイルは以下のようになります。

![スクリーンショット 2019-03-04 17.04.20.png](https://qiita-image-store.s3.amazonaws.com/0/335400/5ae75350-5ce0-4f74-293e-8ece5330e125.png)

数値のセルに何やら緑色の三角マークがついています。これは**数値が無理やり文字列に変換されて出力されたことを表しています**。pandasは非常に賢いため、数値と文字列(ここではハイフン'-')がごちゃ混ぜになったデータ列は**オブジェクト型に変換してしまうのです**。このままでは他の人がこれを元にさらにデータ加工をするときに、面倒なことになりそうですね。

# 解決方法: '-'でないところはfloatと宣言してあげる

今回、この問題を解決するために、以下のような関数を作成しました。

```python:separate_float.py
'''
    separate_float.py
    purpose: separate str and float
'''

def separate_float(data, string):

    if(data[string].dtype == object):
        # if not equal '-', this value is float
        data[string] = data[string].where(data[string] != '-').astype(float)
    
        # else, this value is '-'
        data[string] = data[string].fillna('-')
```

データと列名を引数に指定し、その列がもしオブジェクト型なら、if文内を実行します。もしオブジェクト型でない(純粋にintかfloatしかその列に存在しない)なら、この処理は実行されません。

今回は数値に混入している文字列がハイフン'-'とわかっているので

```python
.where(data[string] != '-').astype(float)
```

でハイフンでないところはfloat型であると明示的に宣言してあげています。ただし、これだけだと.where()で該当しなかった部分はNaNになってしまうため、その後に改めて

```python
data[string] = data[string].fillna('-')
```

としてNaNを'-'で埋め戻してあげています。

この関数を使って、最終的にできたスクリプトは以下のようになります。

```python:test.py
'''
    test.py
'''

import pandas as pd

from separate_float import *


# read data
data = pd.read_csv('test.tsv',delimiter='\t', index_col=0)

# call separate_float
separate_float(data, 'HGVD_AltAlleleFreq')

# write to excel
data.to_excel('test.xlsx')
```

このスクリプトでは'HGVD_AltAlleleFreq'という列だけにこの関数を施しています。結果は以下のようになります。

![スクリーンショット 2019-03-04 17.20.52.png](https://qiita-image-store.s3.amazonaws.com/0/335400/94f37858-124f-345f-5a3a-a12f90720cb8.png)

B列の'HGVD_AltAlleleFreq'だけは正常に数値とハイフン'-'が区別されていることがわかります。
React+Firebase+Reduxを使用したチャット開発記事まとめ

## はじめに
自分が作成した[Reactチャット](https://react-chat-b0e8a.firebaseapp.com/)、その開発の際に行った事をQiitaにまとめました。
そして、そのQiitaをここにまとめます。

## React
[Reactでのチャット作成手順を誰にでもわかるように解説する](https://qiita.com/Takumi_Kaibara/items/1ddeabd5372bc635febd)

## React + Firebase
[ReactにFirebaseでGoogleアカウントの情報を反映させる](https://qiita.com/Takumi_Kaibara/items/2b30f86c9241dc597bf9)

## React + Firebase(FirebaseRealtimeDatabase)
[Reactで作ったチャットのメッセージをFirebaseRealtimeDatabaseに追加、削除する](https://qiita.com/Takumi_Kaibara/items/f77fc899b3f76db01c23)

## React + Firebase(FirebaseRealTimeDatabase) + Redux
[React＋Redux+Firebaseでログイン状態を管理する](https://qiita.com/Takumi_Kaibara/items/9249a4ba71302e06cc16)

## 随時更新(予定)!!
UnionFind実装(python3)

## 背景
- Atcoder ABC120でUnionFindを使用すると簡単に解ける問題が出された([参照](https://atcoder.jp/contests/abc120/tasks/abc120_d))
- せっかくpythonで実装したので、そのコードを残しておきたい
- 直大さん(AtCoder 代表取締役社長）の紹介されていた、実装方法が画期的だった

##　この記事の説明
### やること
- python3でのUnionFind木の実装紹介(コメント少なめ)

### やらないこと
- UnionFind木自体の説明


## コード説明
基本機能である、根の探索、木の併合、ある２つの要素が同じ木に属するか判定、ある要素を含む木の要素数を返す、関数を実装しました。

直大さんがコメントしていた、実装方法は以下となります。
各ノードの親(根）を管理するリストのrootノードのところでそのノードを根に持つ木の要素数を保持することによって、別のところで要素数を保持する必要をなくす。

## コード

```python:UnionFind.py
class UnionFind():
    # 作りたい要素数nで初期化
    # 使用するインスタンス変数の初期化
    def __init__(self, n):
        self.n = n
        # root[x]<0ならそのノードが根かつその値が木の要素数
        # rootノードでその木の要素数を記録する
        self.root = [-1]*(n+1)
        # 木をくっつける時にアンバランスにならないように調整する
        self.rnk = [0]*(n+1)
    
    # ノードxのrootノードを見つける
    def Find_Root(self, x):
        if(self.root[x] < 0):
            return x
        else:
            # ここで代入しておくことで、後の繰り返しを避ける
            self.root[x] = self.Find_Root(self.root[x])
            return self.root[x]
    # 木の併合、入力は併合したい各ノード
    def Unite(self, x, y):
        # 入力ノードのrootノードを見つける
        x = self.Find_Root(x)
        y = self.Find_Root(y)
        # すでに同じ木に属していた場合
        if(x == y):
            return 
        # 違う木に属していた場合rnkを見てくっつける方を決める
        elif(self.rnk[x] > self.rnk[y]):
            self.root[x] += self.root[y]
            self.root[y] = x

        else:
            self.root[y] += self.root[x]
            self.root[x] = y
            # rnkが同じ（深さに差がない場合）は1増やす
            if(self.rnk[x] == self.rnk[y]):
                self.rnk[y] += 1
    # xとyが同じグループに属するか判断
    def isSameGroup(self, x, y):
        return self.Find_Root(x) == self.Find_Root(y)
        
    # ノードxが属する木のサイズを返す
    def Count(self, x):
        return -self.root[self.Find_Root(x)]

```

# 謝辞
c++の実装を見せてくださった大先輩に感謝します。
[failed]C bubblesort

初期化の時点でうまくいかない、、、。

```c
#include<stdio.h>
int main (void)
{
    int data[7][5];
    int i,j;

    for(i=0;i<=6;i++){
        printf("\n");
        for(j=1;j<=3;j++){
            scanf("%d\n",&data[i][j]);
        }
    }

    for(i=0;i<=6;i++){
        printf("%d\n",data[i+1][0]);
    }

    //for resoult check//
    for(i=0;i<=6;i++){
        printf("\n");
        for(j=0;j<=4;j++){
            printf("%d\n",data[i][j]);
        }
    }

       
}
【SQL】BigQueryで出力した結果をCSVとして出力し、Google Cloud Platformのバケットにアップロードする方法だお。

#概要
**<font color="LightSeaGreen">
全ての人間は２種類に分けることができる。
　　　　　　　　Google Cloud Platformerと、そうでない者。
　　　　　　　　　　　　　　　　　　　　@74kenshiro（1988～2130年）</font>**

**名もなき初心者エンジニアがBigQueryで出力した結果をGoogle Cloud Platform のバケットに返す記事だお。**


**目次**
**１．SQL実行で出力した結果をCSVデータとしてバケットに出力する方法
２．テーブルをCSVデータとしてGCS（バケット）に直接エクスポートする方法
３．バケットの詳細で確認**
#この記事で分かること##
**・出力した結果をCSVデータにする方法。
・CSVデータをバケットにアップロードする方法。
・テーブルをCSVデータとしてバケットにエクスポートする方法**
#データ概要
**元データ：とある会社の社員データ「staff_list.csv」**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/340189/28689a37-70ad-8a43-84ef-12c66839da35.png)

**今回出力してアップロードしたい結果**

```sql:攻撃力が高い順のランキング
SELECT
  RANK()OVER(ORDER BY attack DESC) AS attack_rank,
  id,
  division,
  attribute,
  attack,
  defense
FROM
  `company.staff_list_utf8_manual`
ORDER BY
  1;
```

**OUTPUT この出力結果をCSVデータとしてバケットに保存したい**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/340189/87d806e5-5d79-2f3a-dae7-8132710901a7.png)
#１．SQL実行で出力した結果をCSVデータとしてバケットに出力する方法

###１．クエリ結果右の「結果を保存する」からCSVを選択し、保存する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/340189/aaf0f18e-be01-834d-5cfe-23077d4ae53a.png)


###２．GCPのバケットを開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/340189/df964162-f0b1-bba3-1008-2a901f7f326d.png)
###３．保存したCSVをバケットにアップロードする。ドラッグでもいける！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/340189/4d3d555a-af6b-a5bf-8b36-df24befb3b56.png)


#２．テーブルをCSVデータとしてGCS（バケット）に直接エクスポートする方法
※テーブルの作成方法はこちらをご参照下さい。
**神記事：[【BigQuery】Google Cloud Platform（GCP）でバケットを作成し、データをアップロードして、BigQueryで読み込み、SQL実行してテーブル作成する方法だおｗ](https://qiita.com/74kenshiro/items/51dc4a6f1a2cd56cb8c6)**
###１．対象のテーブルを選択し、「エクスポート」⇒「GCSにエクスポート」
（ちな、GCS = GoogleCloudStorage）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/340189/e4e2788e-9529-8588-ef37-41fee3304534.png)
###２．「参照」⇒エクスポートする先のバケットを選択、「データ名.csv」を入力⇒「エクスポート」
![image.png](https://qiita-image-store.s3.amazonaws.com/0/340189/a9c9e5ef-e43d-2da9-bb09-05d37f2671d7.png)
#３．バケットの詳細で確認
**でけた。**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/340189/0c978a67-d22f-2f6f-0735-62157819912f.png)


#オワタ。
データやファイル、BigQueryで集計したデータも全てGCP上で完結するのはさすがGoogle様です。
玄人向けな点もありますが、半日くらい色々いじると分かってきます。

PS：今月で31歳になります。おめでとうと思ったらいいねおなしゃす。
Pythonのリストから、順番を守ったまま重複を削除する

# Introduction

ここにPythonの配列

```python
>>> script = ['Python', 'Ruby', 'Perl', 'Python', 'JavaScript']
```

あります。ここから**順番は守りつつ、重複を削除したい**場合、どのようなスクリプトが必要でしょうか、というのが今回のお題です。今回の場合、最終的に['Python', 'Ruby', 'Perl', 'JavaScript']というリストを得るのが目的です。

# 重複を取り除くならsetを使えばよいのでは？

setは集合演算を行うことができるデータ型です。listをset型に変換したい場合は以下のようにset関数を用います。

```python
>>> set(script)
```

実行結果は以下のようになります。

```
{'Perl', 'Python', 'JavaScript', 'Ruby'}
```

setは集合演算を行うデータ型であるため、**順番を気にしません**。よってset関数のみでは、重複を取り除くところまでしか達成できません。

# set + sorted、そしてkey=.index

ズバリ答えを言ってしまうとsorted関数を使います。ただし、sorted関数の引数であるkeyに.index()を指定するのが、今回の味噌です。

.index()は引数に指定したものが、どの要素にいるかを前方一致で返します。つまり'Python'の文字列の場合には

```python
>>> script.index('Python')
0
```
のように左から検索して最初に出くわした要素数である0を返します。これをsorted関数のkeyに選択してあげます。

最終的なスクリプトと、その出力結果は以下のようになります。

```python
>>> sorted(set(script), key=script.index)
['Python', 'Ruby', 'Perl', 'JavaScript']
```

期待通りの結果を得ることができました。
agora.io 事例・開発紹介 - オンラインクレーンゲーム

#agora.io 事例・開発紹介 - オンラインクレーンゲーム

クレーンゲームのオンラインサービスがいくつか提供されているようです。
クレーンの映像を遠隔のプレイヤーに届ける必要がある為、当然映像配信技術が利用されます。
国内のオンラインクレーンサービスでもAgoraSDKが採用されました。
又、別のオンラインクレーンサービスでも採用検討中になります。

##利用SDK
・WebSDK
・iOS/Android VideoSDK
・録画SDK

##構成
主な機材の構成は以下のようになっております。
![fig1.jpg](https://qiita-image-store.s3.amazonaws.com/0/300377/22c0f30e-7fda-d421-92cc-60b116b7e4c5.jpeg)

agora.io SDKはクレーンを写しているカメラの映像配信部分に利用されています。
（クレーンの操作信号についてはお客様の独自実装となります）

矢印内のクレーン操作情報についてはAgoraのSignalingSDKを利用することも可能です。

又、録画SDKがありますので、プレイ中の動画を保存し、リプレイ再生や問い合わせ対応の時に活用することも可能です。

##agora.io SDK採用のポイント
・低遅延
　　クレーンゲームの特性上、映像の遅延が発生すると操作性が悪くなります。
　　agora.io SDKは1秒以内の低遅延が可能ですので、
・視聴者数増加の負荷対策
　　P2PのWebRTCでは視聴者が増えると配信側端末の負荷があがり、まともに配信ができなくなります。
　　agora.io SDKではSFU接続になりますので、視聴者が増えても問題はありません。
・録画
　　プレイ中のイレギュラーな動作はどうしても発生すると思います。
　　プレイを録画しておけば何が発生したか後日確認する事が可能です。


##（おまけ）Motion JPEGを利用した場合のメリット/デメリット
オンラインクレーンゲームの実際の現場ではラズパイ+USBカメラ+Motion JPEGでの構成もあります。
比較的上記構成は簡単に実現できます。
![クレーンゲーム構成図-motion-jpeg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/09bcf10d-78bb-3196-346c-3df83d9524e8.png)
**・メリット**
-ラズパイ本体の負荷が低い
-MJPG－streamer等のオープンソースが利用できる
-Flash不要で再生できる

**・デメリット**
-ラズパイが直接プレイヤーのリクエストを受け付ける為、1台でさばける人数が少ない
-負荷分散が容易でない
-Motion JPEG対応カメラがいつまで入手できるか不透明
-TCPベースの為RTTの問題や輻輳の懸念がある

#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://hubs.ly/H0kB1_n0)
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://hubs.ly/H0kB1_n0)
ESLint v5.15.0

前 [v5.14.0] | 次 [v5.16.0]

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">ESLint v5.15.0 has been released: <a href="https://t.co/uKkqOcMQML">https://t.co/uKkqOcMQML</a></p>&mdash; ESLint (@geteslint) <a href="https://twitter.com/geteslint/status/1101671983203282944?ref_src=twsrc%5Etfw">March 2, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ESLint `5.15.0` がリリースされました。
小さな機能追加とバグ修正が行われました。

質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。

> 🏢 [日本語 Issue 管理リポジトリ](https://github.com/eslint/eslint-jp)
> 👫 [日本語サポート チャット](https://gitter.im/eslint/eslint-jp)
> 🏢 [本家リポジトリ](https://github.com/eslint/eslint)
> 👫 [本家サポート チャット](https://gitter.im/eslint/eslint)

# 🚀 本体への機能追加

特になし。

# 💡 新しいルール

## [#11392]: [prefer-named-capture-group]

正規表現のキャプチャーグループの利用について、必ず名前付きキャプチャーグループを利用するよう強制するルールが追加されました。

```js:例
/*eslint prefer-named-capture-group: error */

// ✘ BAD
const bad = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;

// ✔ GOOD
const good = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<date>[0-9]{2})/;
```

> [🔗 Online demo](https://eslint.org/demo/#eyJ0ZXh0IjoiLyplc2xpbnQgcHJlZmVyLW5hbWVkLWNhcHR1cmUtZ3JvdXA6IGVycm9yICovXHJcblxyXG4vLyDinJggQkFEXHJcbmNvbnN0IGJhZCA9IC8oWzAtOV17NH0pLShbMC05XXsyfSktKFswLTldezJ9KS87XHJcblxyXG4vLyDinJQgR09PRFxyXG5jb25zdCBnb29kID0gLyg/PHllYXI+WzAtOV17NH0pLSg/PG1vbnRoPlswLTldezJ9KS0oPzxkYXRlPlswLTldezJ9KS87XHJcbiIsIm9wdGlvbnMiOnsicGFyc2VyT3B0aW9ucyI6eyJlY21hVmVyc2lvbiI6OSwic291cmNlVHlwZSI6Im1vZHVsZSIsImVjbWFGZWF0dXJlcyI6e319LCJydWxlcyI6e30sImVudiI6e319fQ==)

# 🔧 オプションが追加されたルール

特になし。

# ✒️ `eslint --fix` をサポートしたルール

特になし。

# ⚠️ 非推奨になったルール

特になし。

[v5.14.0]: http://qiita.com/mysticatea/items/79df343e19f8608f620a
[v5.16.0]: http://qiita.com/mysticatea/items/a7aed64c42fa56fcbe00
[#9999]: https://github.com/eslint/eslint/issues/9999
[#11392]: https://github.com/eslint/eslint/issues/11392
[xxxx]: http://eslint.org/docs/rules/xxxx
[prefer-named-capture-group]: http://eslint.org/docs/rules/prefer-named-capture-group

<!-- 
![JSCS Icon](http://jscs.info/favicon.ico) JSCS 互換ルールです。
-->
Nuro光のルーター(HG8045Q)でLAN内で通信する方法

## LAN内のホストにsshできない

例えば以下のようにsshしようとしても、`No route to host`と怒られてしまいます。

```bash
ssh 192.168.1.3
```

## ポートマッピングで対応

ポートマッピングは、WAN側からのみではなく、LANLAN内部の通信に対しても設定可能なようです。

`192.168.1.2`から`192.168.1.3`にsshしたい場合は、以下のスクリーンショットのように設定すると動作するようになりました。

![HG8045Q.png](https://qiita-image-store.s3.amazonaws.com/0/106949/8e1fe409-20fe-5856-1bd9-ca67b990be2f.png)
Bonfire Android #4 に参加したメモ

振り返りと自分の所感です。
Twitterでの自分の発言を拾ったり、発表資料を見直して書きました。

## 勉強会詳細
- 正式タイトル「Bonfire Android #4」
- [connpassページ](https://yj-meetup.connpass.com/event/119780/)
- [Twitterハッシュタグ](https://twitter.com/hashtag/yjbonfire)

Yahooの勉強会らしい。
地下鉄降りてから会場着までにだいぶ迷った(；・∀・)

## 内容
### Yahoo!乗換案内アプリでのデザイナーの役割について
（発表資料は見当たらず）
いつも使用しているYahoo乗換案内のアプリのデザインの話だった。
最初Android版はiOSと同じデザインだったのだが、
MaterialDesign発表後は徐々にAndroidっぽいデザインになった。

iOSとAndroidでデザインは違うよねっていうのが偉い人にも浸透してきたってことなのかな。

デザイナーもAndroidStudioを使用してデザインを作成
自分はデザイナーと一緒に仕事したことがないのでデザイナーと一緒に仕事するというのが未知の領域ですね。

### Material Designの変化の中でアプリエンジニアができること
[発表資料](https://speakerdeck.com/nakamuuu/bonfire-android-number-4)
ラクマアプリがGoogle Play「ベスト オブ 2018 ユーザー投票部門」でアプリカテゴリ優秀賞​を受賞とのこと🎉
http://news.fril.jp/entry/congratulationsrakuma
楽天はあまり好みではないが、アプリ自体の出来が良いならDLしてみようかな。

Materialdesign登場の
- 少ない工数で対応可能
- エンジニアのdesign意識

無茶苦茶デザインセンスを求められるより標準である程度整ったデザインがあるのはいいな。

でもMaterialdesignに引きづられて個性を失ってしまう。
そこで登場したのが去年のmaterial-theming。
Materialdesignは毎月アップデートされる（最近は毎月ほどではなくなったらしいが）
情報のキャッチアップはエンジニアが得意なので、エンジニアとデザイナーの情報共有が大事。
Material Theme Editorをエンジニアも使えるようになって、エンジニアとデザイナーの協会の曖昧さをポジティブにしていく。


### 自由度の高いアプリ内UIを実現するためのKARTE SDKの仕組み
（発表資料は見当たらず）
https://karte.io/
KARTEとは
ユーザをトラッキングして適切な情報をポップアップで通知するSDKを提供。

自由度の高いのためにネイティブUIではなく、WebViewベースで作成する。
WebViewベースのため
Web版アプリ版共通のメッセージを出せる。

### UI改善に繋がるエンジニアの立ち回り
[発表資料](https://speakerdeck.com/seto_hi/uigai-shan-nixi-garuenziniafalseli-tihui-ri)
https://blog.nohana.co.jp/article/material-design-guideline-reading
一番印象に残ったのは輪読会でしょうか。
デザイナーさんと一緒にプロダクトを作るというのをやりたいですね。

### エクストリーム・プログラミング開発におけるUIテスト〜ライブコーディングを添えて
（発表資料は見当たらず）
ライブコーディングを披露するという貴重な発表。
手法の名前忘れましたけど、タスク設定からテスト記述、実装、まで。

(次にこういう記録を残すときは記憶がはっきりしているうちに仕上げたいですね)