OmniAICreator/Qiita-1.07M huggingface dataset:
Gitでcloneする時にライブラリーがうまく入らない

#完全なるメモ書き。
[vialer-pjsip](https://github.com/VoIPGRID/VialerSIPLib)のExampleを動かしたいと思って、プロジェクトを`git clone`した後に
`pod install`を実行して、readmeに書かれている通り、runしてみたが、

・ file was built for unsupported file format 
・which is not the architecture being linked (arm64)

などと出てしまった。(iPhone7実機で実行)

#####Googleに頼る。
error文を読んで、該当してそうな箇所をXcode上で調べてみるも、原因がよくわからなかった。
そこでerror文をコピペしてGoogleに投げてみたら、同じところで詰まってる人がいた。さすが。

#####結論
[こちら](https://github.com/VoIPGRID/VialerSIPLib/issues/127)の解決法でイケた。
自分が試してみて、うまくプロジェクトがビルドできた部分だけ抜粋します↓

・[このサイト](https://github.com/git-lfs/git-lfs/wiki/Installation)にしたがって`git lfs`をインストールする
・一度プロジェクトを削除してもう一度`git clone`する
・`pod install`する。(おそらく、失敗していた時よりも時間がかかるはず。だがしかし、
それは上手くいってる兆しッ！！！！)
・`Example/Pods/Vialer-pjsip-iOS/VialerPJSIP.framework/Versions/A`のフォルダのサイズを確認してみて、多分100MB以上あるはず。(これがめちゃくちゃ小さいと失敗してるかも)

#####実行してみる
動いた。
Keys.swift.sample的なファイルをRenameするのを忘れずに。

lfsっていいうものは、large filesの管理をするもの。みたいな認識で留めておきましたが、間違っていたらぜひ指摘をお願いします。。

---
####追記(2019/05/05)
冒頭のGithubのページの`Usage -> Installation`のところにこの問題の解決策も書いてありました。
Cache的な感じなんですかね。。調べねば。
Cloud Build デプロイ用に tarとsshが入ったイメージを作成してsubmitする

GWがもう終わってしまう。。。復帰に向けてそろそろコード書かないとな。

---

Cloud Buildでのデプロイ時のサーバー転送用に、tarとsshが使えるイメージが欲しかったので、
手元で作成して、Container Registryにsubmitする方法をまとめてみる。

質問・訂正・改善・苦情・ご意見あれば、コメントにてよろしくお願いします。

## 事前準備

* gcp上に対象プロジェクトがあること
* gcloud コマンドが使えること
* gcloud auth login してること
* gcloud config set project {project_name} で対象プロジェクトを指定していること

~~この辺毎度必要になってくるので別途まとめておきたい。~~

この辺り、まとめました。
[gcloudコマンド事始め（Docker）](https://qiita.com/ideodora/items/8080409051907d281ae7)


## APIを有効化

下記のAPIを Google Cloud Platform Console で有効にする。

* Container Registry API
* Cloud Build API

## Dockerfileを用意

とりあえずこんな感じ

```
FROM debian:stretch

RUN apt-get update && apt-get install -y --no-install-recommends \
	tar \
	bzip2 \
	gzip \
	ssh \
	&& apt-get clean \
	&& rm -rf /var/lib/apt/lists/*
```

tar, ssh 圧縮用に gzipとbzip2入れてみた。

## Submit（Container Registryにイメージをアップロード）

```
# 前述のDockerfileがあるディレクトリで

# プロジェクト名
PROJECT_ID=some_project_name

# 新しく作成するイメージの名称
IMAGE_NAME=some_image_name

# Submit ・・・ ①
gcloud builds submit --tag="gcr.io/${PROJECT_ID}/${IMAGE_NAME}” . 

=> 〜中略〜
DONE
----------------------------------------------------------------------------------------------------------------

ID                                    CREATE_TIME                DURATION  SOURCE                                                                                         IMAGES                                       STATUS
50a5d6bb-fa95-4f81-9285-53d89810c8f8  2019-05-05T04:05:28+00:00  27S       gs://some_project_name_cloudbuild/source/1557029126.14-0ddbe2bb56eb403eb31ac9176e580258.tgz  gcr.io/some_project_name/some_image_name (+1 more)  SUCCESS

```

こんな感じ。

①の 『.』 は対象をカレントに指定してるのでタイポじゃないです。

## Cloud Buildでの使い方

**cloudbuild.yml** にて、name属性に、作成したイメージのtag名[gcr.io/~]を指定すると、ビルドステップの中で、
Submitとしたイメージをpullして使ってくれます。


```
steps:
- id: deploy
  name: gcr.io/some_project_name/some_image_name
  entrypoint: bash
  args:
    - '-c'
    - |
      tar cvz ./ | ssh somevps tar zxv -C /home/ubuntu/dist/
```

今回の場合、tarとsshがステップの中で使えるようになる。

## まとめ

Cloud Buildのビルドステップに使うイメージで、gcloud, maven, npm など[ビルトインで用意してくれてるもの](https://cloud.google.com/cloud-build/docs/cloud-builders?hl=ja#supported_builder_images_provided_by)以外が使いたい場合、自分で用意したほうが勝手が良いと思う。
必要最小限の欲しいものだけ突っ込めるし。[コミュニティで別途用意してくれてるもの](https://cloud.google.com/cloud-build/docs/cloud-builders?hl=ja#community-contributed_builders)もあるけど、用途と合わないことがままあるので、よろしければお試しください。
Atom,Vimいい感じの設定【自分用】

<h1>バージョン</h1>

- Atom 1.36.1
- Vim 8.0

<h1>Atom設定</h1>

<h3>背景</h3>
- UI Theme = One Dark
- Syntac Theme = Monokai

<h3>パッケージ</h3>

- advanced-open-file(Atom内でファイル開く)
- **atom-beauty**(自動インデント整理)
- **atom-clock**(エディタ内に時計)
- **autoclose-html**(htmlで自動閉じタグ)
- **autocomplete-paths**(パスの補完)
- emmet(html,css入力を簡単に)
- **file-icons**(超見やすい)
- git-plus(git機能の拡張)
- **highlight-selected**(同じ文字をハイライト表示)
- linter(自動構文チェック)
- linter-erb
- linter-ruby
- linter-ui-default
- **minimap**(コード全体見れる)
- **open-recent**(前回使用したファイルを見れる)
- **pigments**(色を視覚的に)
- **platformio-ide-terminal**(Atom内でターミナル開ける)
- project-manager(プロジェクトの管理)
- rails-snippets(Railsの補完的な)
- **show-ideographic-space**(全角スペースを感知)
- tabs-to-space(tab,space置換)
- todo-show(todoリスト)
- tool-bar(ツールバー)

<h1>vim設定</h1>

```vim:.vimrc

"文字色ON
syntax on

"256色使う
set t_Co=256

"molokai大好き
colorscheme molokai

"行番号
set number

"自動インデントの幅
set shiftwidth=4

"背景色
hi Normal ctermbg=none
hi Normal ctermfg=grey
hi Visual  ctermbg=236

"カーソルつける
set cursorline
"カーソルのラインはいらない
hi clear CursorLine

"カーソルの色
hi LineNr ctermfg=239
hi CursorLineNr  ctermfg=grey


"コメントの色
hi Comment ctermfg=darkgrey
```
Leetcode #83: Remove Duplicates from Sorted List

```swift
func deleteDuplicates(_ head: ListNode?) -> ListNode? {
    var pre = head
    var next = pre?.next
    while next != nil {
        if pre!.val == next!.val {
            pre?.next = next?.next
            next = pre?.next
        } else {
            pre = next
            next = next?.next
        }
    }
    return head
}
```
Leetcode #81: Search in Rotated Sorted Array II

Need to consider the duplicate cases, such as [1,3,1,1,1], 3

```swift
func search(_ nums: [Int], _ target: Int) -> Bool {
    if nums.isEmpty {
        return false
    }
    var start = 0
    var end = nums.count - 1
    while start <= end {
        let mid = (start + end)/2
        if nums[mid] == target {
            return true
        } else if nums[mid] > nums[start] {
            if target >= nums[start] && target < nums[mid] {
                end = mid-1
            } else {
                start = mid+1
            }
        } else if nums[mid] < nums[start] {
            if target <= nums[end] && target > nums[mid] {
                start = mid+1
            } else {
                end = mid-1
            }
        } else {
            start += 1
        }
    }
    return false
}
```
Leetcode #33: Search in Rotated Sorted Array

```swift
func search(_ nums: [Int], _ target: Int) -> Int {
    if nums.isEmpty {
        return -1
    }
    var start = 0
    var end = nums.count - 1
    while start <= end {
        let mid = (start + end)/2
        if nums[mid] == target {
            return mid
        } else if nums[mid] >= nums[start] {
            if target >= nums[start] && target < nums[mid] {
                end = mid-1
            } else {
                start = mid+1
            }
        } else {
            if target <= nums[end] && target > nums[mid] {
                start = mid+1
            } else {
                end = mid-1
            }
        }
    }
    return -1
}
```
iPhoneのショートカットアプリを使い、Safariで見ているページをSlackで共有する

# 作った経緯
仕事のお昼休憩の時などに、スマホで読んだ記事をチームのSlackのrandomチャンネルに投げたりすることがあるのですが、
iPhoneのショートカットアプリを使って簡単に効率化できそうだったので試してみました。

# 成果物
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Safariで開いているページをSlackで共有 <a href="https://t.co/FMcUbXyha7">pic.twitter.com/FMcUbXyha7</a></p>&mdash; カッキー (@k_Kackie) <a href="https://twitter.com/k_Kackie/status/1124877513144987651?ref_src=twsrc%5Etfw">2019年5月5日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 作り方

## 用意するもの
- Slackのチャンネル
- iOS Safari
- ショートカットアプリ<br>持っていない場合は[こちらからダウンロードできます](https://itunes.apple.com/jp/app/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88/id915249334?mt=8)。

## 手順1　Webhook URLの取得
ブラウザでSlackにログインし、下記にアクセスします。
https://slack.com/services/new/incoming-webhook

チャンネルを選択する画面が開きますので、ショートカットを使って共有したいチャンネルをここで選びます。
お試しでやってみたいだけの場合は、自分宛にしておくと良いと思います。

次の画面でセットアップの手順を開くと「Webhook URL」というものが表示されています。
ショートカット作成に使うものなので、こちらをコピーしておきます。

## 手順2　ショートカットを作成する
iOSショートカットアプリを開きます。
今回はSafari内で使うショートカットにしたいため、下記のような手順で作成していきます。

1. 右上のインジケーターのアイコンをタップし、「共有シートに表示」をアクティブにします。<br>「受け入れの種類」項目が表示されるので、「SafariのWebページ」のみ選択します。
2. Slackに送信したい文章を作成します。<br>サンプルでは画像のように設定しました。お好みで調整をしてください。<br><img width="375" alt="IMG_3525.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360068/f68e5cc8-6b3d-bb83-d9b0-26884928d51c.png">
3. Slackにデータを送信するための設定をします。画像のように設定してください。<br>URLには先ほどコピーしておいた「Webhook URL」を入れておきます。<br>「本文を要求」のところで新規フィールド（種類はテキスト）を追加します。<br>`text`には上の手順で作成した「テキスト」を選びます。<br>`username`は任意で設定できます。<br>送信者の部分に表示されるので、自分とわかるものにしておくと良いと思います。<br><img width="375" alt="IMG_3527.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360068/9bedd78a-349c-9f7d-5483-1568ad14fd86.png">
4. これだけでも動きますが、Slackで共有ページのプレビューを表示する設定をしておきます。<br>`username`の下にラベル`unfurl_links`を追加し、値を`true`とします。

以上です。
Safariを開いて、ショートカットを試してみてください。

## Safari以外でも使えるようにする
受け入れの種類に「URL」を追加し、「Safari Webページの詳細を取得」を「入力からURLを取得」に変更します。<br>TwitterアプリからツイートのURLを共有したりなど、Safari以外でも使えるようにすることができて便利です。

## その他できること
`icon_url`に画像URLを指定することで、アイコン画像を上書きできます。

`channel`に#チャンネル名を指定することで、インテグレーション取得時に選択したものを上書きして、他の場所に投稿することができるようになります。
Slackのセットアップの手順ページを見ると「ダイレクトメッセージは "channel": "@<span>username</span>" で指定できます。」とありますが、現在usernameを使用してのDM送信は非推奨となっているようで、機能しません。
ユーザ名の代わりにユーザIDを使用することができますが、こちらはダイレクトメッセージではなく相手のSlackbotに喋らせるという機能で、使い所は微妙です。

# 感想
実はショートカットアプリ自体初めて触ってみたのですが、意外と自由度が高くて驚きました。まさかPOST送信の機能まであるとは・・。
こんなふうに普段の何気ないアクションの中で、「もっと効率化できるんじゃないか？」と考えて方法を模索していくのは楽しいですね。

動画にモザイクかけるのめんどくさかったｗ
WebstormでCSSライブラリーの入力補完が何故か効かない問題の原因の一個

何故かうまくいかず半日潰したので、誰かのヒントになるといいと思い、雑ですがメモ程度に書きます。

##Webstormでnode_modules配下のcssファイルが入力補完候補に上がるかどうかで、ライブラリーのディレクトリ名が関係しているっぽい

cssライブラリーを作っていたのですが、何故かWebstormがcssファイルを入力補完候補として読み込んでくれませんでした。

色々package.jsonなどをいじったりもしたのですが、最終的に分かったのは`/scss`というディレクトリ名称の配下にあるファイルはWebstormに読み込まれ入力補完候補に上がっていました。

`/scss` のディレクトリ名を `/dist`や`/css`などに変換した場合には入力補完候補に上がりません。(特にディレクトリを指定するような設定は記述していませんでした)

どうやらデフォルトでどのフォルダを`css`の入力補完候補の読込先にするかの設定が絡んでいるようです。
#django 用の .gitignore を一瞬で自動生成する

https://www.gitignore.io/ を利用

```
# Created by https://www.gitignore.io/api/django
# Edit at https://www.gitignore.io/?templates=django
### Django ###
*.log
*.pot
*.pyc
__pycache__/
local_settings.py
db.sqlite3
media
# If your build process includes running collectstatic, then you probably don't need or want to include staticfiles/
# in your Git repository. Update and uncomment the following line accordingly.
# <django-project-name>/staticfiles/
### Django.Python Stack ###
# Byte-compiled / optimized / DLL files
*.py[cod]
*$py.class
# C extensions
*.so
# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
pip-wheel-metadata/
share/python-wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST
# PyInstaller
#  Usually these files are written by a python script from a template
#  before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec
# Installer logs
pip-log.txt
pip-delete-this-directory.txt
# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
.hypothesis/
.pytest_cache/
# Translations
*.mo
# Django stuff:
# Flask stuff:
instance/
.webassets-cache
# Scrapy stuff:
.scrapy
# Sphinx documentation
docs/_build/
# PyBuilder
target/
# Jupyter Notebook
.ipynb_checkpoints
# IPython
profile_default/
ipython_config.py
# pyenv
.python-version
# pipenv
#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
#   However, in case of collaboration, if having platform-specific dependencies or dependencies
#   having no cross-platform support, pipenv may install dependencies that don't work, or not
#   install all needed dependencies.
#Pipfile.lock
# celery beat schedule file
celerybeat-schedule
# SageMath parsed files
*.sage.py
# Environments
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/
# Spyder project settings
.spyderproject
.spyproject
# Rope project settings
.ropeproject
# mkdocs documentation
/site
# mypy
.mypy_cache/
.dmypy.json
dmypy.json
# Pyre type checker
.pyre/
# End of https://www.gitignore.io/api/django
```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
IllustratorでExtendScriptを使って画像ファイルを差し替える方法

ExtendScriptを使って、イラレの画像を差し替える方法を解説します。

画像は埋め込んでなくてリンクフファイルを扱います。
つまり、リンク先を置き換えるだけです。

aiファイル内のリンクファイルは `activeDocument.placedItems` で取得できます。

そして取得したファイルのリンクは

```javascript
placedItem.file = new File("ファイルへのパス");
```

で置き換えることが出来ます。

例えば以下のようなコードで置き換えが可能です。

サンプルコード

```javascript
// ドキュメントを取得
var doc = app.activeDocument;

// 対象のレイヤーを取得
var targetLayer;
var layers = doc.layers;
for (var i = 0; i < layers.length; i++) {
    if (layers[i].name === "<対象のレイヤー名>") {
        targetLayer = layers[i];
    }
}

// 対象のplacedItemを取得
var targetPlacedItem;
var placedItem = targetLayer.placedItem;
for (var i = 0; i < placedItem.length; i++) {
    if (textFrames[i].name === "<対象のPlacedItem名>") {
        targetPlacedItem = placedItem[i];
    }
}

targetPlacedItem.file = new File("<置き換えるファイルへのパス>");
```
redux-thunk と typescript でちゃんと型定義する

そういえば `redux-thunk` の `connect` 周りいつも適当に型つけてたので、実際ちゃんとやろうと思うとどうなるかなと思って書いてみた。案外ちゃんと書ける。いうほど型アサーションの重複もない。reducer 内の payload や、コンポーネント内に渡される thunk の関数のも補完や型チェック効くので安全度は高い。記述量は多い。

記述量は多いが、redux の管理する state とその更新パターンである reducer はクリーンに保つことができるし、細かいロジックは thunk に分離できるし、プレゼンテーションコンテナに提供されるインターフェイスも connect の定義も型チェックの保護を受けるので、受け入れられるような気がしてきた。

```tsx
import React, { useCallback } from "react";
import { connect, Provider } from "react-redux";
import { createStore, applyMiddleware, combineReducers } from "redux";
import ReduxThunk, { ThunkAction } from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

// state
type CounterState = number;
type State = { counter: CounterState };

// action creator
const actionCreators = {
  add: (num: number) => ({ type: "ADD" as const, payload: num })
};

type ActionTypes = ReturnType<typeof actions[keyof typeof actionCreators ]>;

// async action (thunk)
type ThunkPromiseAction<T> = ThunkAction<
  Promise<T>,
  State,
  undefined,
  ActionTypes
>;
const thunks = {
  add: (num: number = 1): ThunkPromiseAction<void> => async dispatch => {
    dispatch(actionCreators.add(num));
  }
};

// reducer
const counterReducer = (
  state: CounterState = 0,
  action: ActionTypes
): CounterState => {
  switch (action.type) {
    case "ADD":
      return state + action.payload;
  }
  return state;
};

const store = createStore(
  combineReducers({ counter: counterReducer }),
  composeWithDevTools(applyMiddleware(ReduxThunk))
);

// component
const Index: React.FC<{
  counter: number;
  add: (num?: number) => Promise<void>;
}> = props => {
  const handleAdd = useCallback(() => props.add(), [props.add]);
  return (
    <div>
      <p>counter {props.counter}</p>
      <button onClick={handleAdd}>+</button>
    </div>
  );
};

// redux connect
const ConnectedIndex = connect(
  ({ counter }: State) => ({
    counter
  }),
  {
    add: thunks.add
  }
)(Index);

// next.js page
export default () => (
  <Provider store={store}>
    <ConnectedIndex />
  </Provider>
);
```

サンプルコードは next.js で書いているけど特に依存はしていない。書いてる最中何度も `thunk` を `thank` と書き損じた。

## 記述量の話

よし、じゃあ「減らす」アクションを追加しよう

- アクションクリエーター sub を追加
- thunk の sub を追加
- reducer に SUB のパターンを追加
- コンポーネントの props で sub を受け取るように修正
- コンポーネントに `+` ボタンの横 に`-`を増やし、subを呼ぶようにする
- connect で thunks.sub をマッピング

thunk が増えたところで大したことないな!
[Python]pyorbitalで簡単衛星軌道予測

# はじめに
[pyorbital](https://pyorbital.readthedocs.io/en/feature-moon-phase/)は(低軌道)衛星の[TLE](https://ja.wikipedia.org/wiki/2%E8%A1%8C%E8%BB%8C%E9%81%93%E8%A6%81%E7%B4%A0%E5%BD%A2%E5%BC%8F)情報から、軌道パラメータを計算するためのpythonパッケージです。

# 環境
+ windows 10
+ python=3.6.5 
+ pyorbital=1.5.0

# 1. TLEファイルを取得
まずは、計算に必要なTLEファイルを用意します。衛星のTLEは[NORAD](https://ja.wikipedia.org/wiki/%E5%8C%97%E3%82%A2%E3%83%A1%E3%83%AA%E3%82%AB%E8%88%AA%E7%A9%BA%E5%AE%87%E5%AE%99%E9%98%B2%E8%A1%9B%E5%8F%B8%E4%BB%A4%E9%83%A8)の[ホームページ](https://celestrak.com/)から取得することができます。今回は例として、地球観測衛星[Aqua](https://ja.wikipedia.org/wiki/Aqua_(%E4%BA%BA%E5%B7%A5%E8%A1%9B%E6%98%9F))のTLEを使用します。[こちら](https://celestrak.com/satcat/tle.php?CATNR=27424)にアクセスしてください。すると、以下のような情報が載っていると思います。

>AQUA                    
1 27424U 02022A   19124.57944444  .00000044  00000-0  19699-4 0  9999
2 27424  98.2004  66.1134 0001895 143.6983 232.6166 14.57117668904232

1行目が衛星の名前、2~3行目がTLEになります。
1~3行目をコピーし、てきとうなテキストエディタに貼り付け、「aqua.tle」と名付けて保存します。

# 2. pyorbitalのインストール
pyorbitalはpipでインストールできます。

`$ pip install pyorbital`

# 3. pyorbitalを使ったコードを書く

以下のようなコードを書きました。

```python:aqua_orbit.py
from datetime import datetime

from pyorbital.orbital import Orbital
from pyorbital.tlefile import Tle


# TLEの読み込み
aqua_tle = Tle('AQUA', 'aqua.tle')
aqua_orbit = Orbital('AQUA', line1=aqua_tle.line1, line2=aqua_tle.line2)

now = datetime.utcnow()

# 現在の緯度、経度、高度を取得
lon, lat, alt = aqua_orbit.get_lonlatalt(now)
print('Aquaの現在地')
print('経度: ', lon)
print('緯度: ', lat)
print('高度[km]: ', alt)
print('')

# 24時間以内に東京タワーから衛星が見える時間を計算
pass_time_list = (aqua_orbit.get_next_passes(utc_time=now, length=24,
                                             lon=139.75, lat=35.66, alt=0.333))
print('次にAquaが到来する時刻[UTC]: ',
      pass_time_list[0][0].strftime('%Y/%m/%d %H:%M:%S'))

```

Orbitalインスタンスのget_lonlatalt()メソッドを使うと、datetime型で指定した時刻の衛星の位置を取得することができます。

また、get_next_passes()メソッドを使うと、utc_timeで指定した時刻から、lengthで指定した時間分までに、ある地点(今回は例として東京タワーの緯度、経度を用いた)からの衛星の可視時間をリストで取得できます。

スクリプトを実行すると、出力は以下のようになります。

>Aquaの現在地
経度: -139.1972385567638
緯度: 59.24613580619223
高度[km]: 711.2824044503619

>次にAquaが到来する時刻[UTC]:  2019/05/05 15:08:02

これら以外にも、get_observer_look()メソッドを使うと、観測者から見た衛星のAzimuth(方位角)とElevation(仰角)を得られたりします。

取得した緯度、経度を[Basemap](https://matplotlib.org/basemap/)などにプロットしてみると、また面白いかもしれませんね。
CATVのインターネット接続においてルータ交換時にインターネットがつながらない件

久しぶりの投稿です。
前回までにお届けしたVMware Cloudの話は、
おかげ様でかなりのアクセスをいただいております。
https://qiita.com/hiroito1118/items/48d8d66fab24acd16c1d

まだまだハイタッチの方もご存じなかったりして、
提案時にハマるので、読んでおいてください。


さて、久しぶりの今回から、よもやま技術的に引っかかったことの
備忘録的に投稿させていただきます。


# １．何の話題か？

CATV回線利用しているユーザが、ルータを交換したら
上手くインターネットにつながらなくて困った話


# ２．やろうとしたこと、発生事象

・CATVにてインターネット契約
・回線業者からルータの貸し出しがあったので、それを使っていた
・YAMAHAのルータに置き換えしたくなって、交換した
　→なぜかつながらない（接続は正しい）
・貸出ルータに繋ぎ直すとインターネット接続復活


# ３．試行錯誤したこと

・一先ずYAMAHAルータのWAN側の設定を実行
　→DHCP有効だと言われるので、それでIP取りに行く
　　→IPは無事とれる
　→DNSは指定されたものある？と聞かれるが何も言われてないので、DHCPでとる
　→結果成功し、YAMAHAルータ的には、インターネットつながったぜ！と言ってくる
　　→全くつながる気配ない

・YAMAHAルータのWAN側に振られたIPに向けて、ローカルのPCからpingを打つ
　→成功

・YAMAHAルータのWAN側上位に向けてpingを打つ
　→全く通らない（ここが怪しい）

・回線業者からの貸し出しルータに変な設定入ってないかみようとする
　→管理者PWがわからず断念

・実はPPPoEみたいに認証式？
　→調べてみたが、CATVはそんな方式ではない。
　→もちろん認証のID/PWなんて払い出されてないから、そんなことはない。


# ４．結局原因は？

大した話ではなく、CATVのモデムが傘下の機器の情報を保持していたために、
接続し直してもその機器はつながせてくれない、という話でした。

特に上位からのIP割り振りが１個しかできないケースでは、
こういうことになりやすいですね。



CATVでのインターネット接続は公式の情報が充実していないので、
共有がてらの投稿でした。

今回は以上です。
Ruby の Mastodon API ライブラリで uninitialized constant になる

Ruby の Mastodon API ライブラリで new すると下記のようなエラーになります。

```
irb(main):008:0> client = Mastodon::REST::Client.new(base_url: 'xxxx', bearer_token: 'xxxx')
Traceback (most recent call last):
        4: from /Users/xxx/.rbenv/versions/2.6.2/bin/irb:23:in `<main>'
        3: from /Users/xxx/.rbenv/versions/2.6.2/bin/irb:23:in `load'
        2: from /Users/xxx/.rbenv/versions/2.6.2/lib/ruby/gems/2.6.0/gems/irb-1.0.0/exe/irb:11:in `<top (required)>'
        1: from (irb):8
NameError (uninitialized constant Mastodon::REST)
```

原因がわからず困ったのですが、似た名前の gem （下記）を事前に誤って install していたのが原因でした。


```
$ gem info mastodon

*** LOCAL GEMS ***

mastodon (0.3.1)
    Author: Colin Shea
    Homepage: http://evaryont.me
    Installed at: /Users/xxxx/.rbenv/versions/2.6.2/lib/ruby/gems/2.6.0

    A Ruby parser for todo.txt files
```

ちなみに Mastodon API のライブラリはこちら。

```
$ gem info mastodon-api

*** LOCAL GEMS ***

mastodon-api (2.0.0)
    Author: Eugen Rochko
    Homepage: https://github.com/tootsuite/mastodon-api
    License: MIT
    Installed at: /Users/xxxx/.rbenv/versions/2.6.2/lib/ruby/gems/2.6.0

    A ruby interface to the Mastodon API
```

誤って install したほうを uninstall してあげたら解決しました。

```
$ gem uninstall mastodon
Successfully uninstalled mastodon-0.3.1
```

Mastodon 自体は [一般的な言葉](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%B9%E3%83%88%E3%83%89%E3%83%B3) ですし、こうしたこともあるのかなと思いました。
大学院生は電気執事の夢を見るか？其の1

#Introduction

執事が欲しいなぁと思ったので作ることにした。まずは簡単な機能から始めようと思うが、行く行くは研究スケジュールを自動で立てて一日のタスクを全てスケジューリングするところまでさせたいと思っている。
今回はとりあえず下準備としてRaspberry Piのインストール及び初期設定を行う。

#materials and method

Raspberry Pi3 model B+

#Results

##Rapberry Piの初期設定

###OSインストール
OSにはRaspbianを選択。
ラズベリーパイ公式サイト[[1]](https://www.raspberrypi.org/downloads/raspbian/)からdesktop版をダウンロード、ガイドに従ってインストール。インストールにはUbntuのPCを使用。
が、いきなりハマる。ddでimgインストールしようとすると

```
dd: opening `/dev/mmcblk0': Read-only file system
```

などとのたまふ。如何はせむとて調べてみるにつれ、どうやらmicroSDではずれを引いたらしい。SDカードリーダなどのロックを確認したりsudoでやったり、FAT32でフォーマットしなおしたりext4でフォーマットしたりした色々試みたがRead-only file systemと言われる。最後の最後FAT32でフォーマットしたのちに、macでインストールするとあっさりインストールできた。理由はわからない。

###初期設定-パーティションの拡大

```terminal:Terminal(RaspberryPi)
$ sudo raspi-sonfig
```

で設定画面が出るのでAdvanced optionから選択する。

---
###初期設定-ユーザ名変更
デフォルトだとユーザpiが存在することが一般に知られている。これではセキュリティ的に具合が悪いのでpiユーザは消してsudo権限を持つユーザを追加する、というのを考えたが、どうやらこれはよくないらしい。piユーザが所有者のファイルがある場合、piユーザを削除することでrootでしか触れなくなるため、エラーが発生する可能性があるらしい。むべなるかな。
piユーザを削除するのではなくpiユーザの名前を変更するのがよいというのを風の噂で聞いたのでそのようにする。

---
####初期設定-ユーザ名変更-tmpユーザ作成

```terminal:Terminal(RaspberryPi)
# useraddでユーザを新規作成オプションの-Mはホームディレクトリを作成しないことを示す。どうせこのアカウントは消すので作らなくてよい
$ sudo useradd -M tmp
# コマンドgpasswdはユーザのグループ情報の操作を担う。オプション-a XX YYでユーザXXをグループYYに追加できる。
$ sudo gpasswd -a tmp sudo
# tmpユーザのパスワード設定
$ sudo passwd tmp
# piユーザをログアウト。これからの作業はtmpユーザで行う。
$ exit
```

---
#### 初期設定-ユーザ名変更-ユーザ名piをXXXXXに変更

```terminal:Terminal(RaspberryPi)
# usermod -l XXX YYYでユーザ名YYYをXXXに変更できる。例ではpiからnewpiに変更
$ sudo usermod -l newpi pi
# usermod -d -mでホームディレクトリを/home/piから/home/newpiに変更。
# -dオプションで作業ディレクトリの変更。
# -mオプションの併用で"usermod -d ディレクトリ -m ユーザー名"とコマンドを打つとホームディレクトリを移動し以前と同じホームディレクトリが使えるようになる。
$ sudo usermod -d /home/newpi -m newpi
# groupmod -nでpiグループをnewpiグループに変更
$ sudo groupmod -n newpi pi
# ログアウト。tmpユーザはもう用済み。
$ exit
```

---
#### 初期設定-ユーザ名変更-tmpユーザ削除

```terminal:Terminal(RaspberryPi)
# 仮ユーザを削除
$ sudo userdel tmp
# newpiユーザのパスワードを変更
$ sudo passwd newpi
```

これでユーザ名変更は終わり。次はデータの保存などをやるためにGoogle driveを使えるようにする。

---
macでiOS開発しているときにたまに実行したくなるお掃除コマンドたちをスクリプトにした

# できること

以下のように実行すると、GitHubのリポジトリに登録してあるお掃除スクリプトをローカルのmacで実行できます。

```bash
$ curl https://raw.githubusercontent.com/hrkt/cleanup-mac-for-ios-developers/master/cleanup-mac.sh | bash -
```

エントリ執筆時点では、下記の掃除を対象としています。

- ~/Library/Developer/Xcode/DerivedData
- ~/Library/Developer/Xcode/Archives
- ~/Library/Caches

# 動機

iOSの開発をしていると、たまに実行したくなるお掃除用のコマンドがあります。
お掃除対象は、Xcodeが生成するビルド用のファイル群やアーカイブファイルなどです。

Xcodeのメニューからも実行できるものがありますが、コマンドにしておいた方が操作対象がわかりやすくて個人的に好きなので、スクリプトにした上でGitHubに格納して管理することにしました。


# おすすめ

GitHubのスクリプトをワンライナーで実行できるようにしておくと、ローカルに置いておかなくてもよいのでお手軽なところがよいです。

# 参考

こちらの記事をベースにしました。

- https://qiita.com/fujiwarawataru/items/b68d30697b0f4834e5d2
Windows 10 でアカウント名の表示がメール アドレスのみになってしまう事件

**警告: 本稿は筆者の経験に基づいた参考情報を提供するものであり、本稿に示した手順の実施により生じた結果について、筆者は一切の責任を取れません。**

# 現象

Microsoft アカウントのメール アドレスを変更したら、 Windows 10 のアカウント名がメール アドレスのみになってしまう現象が遭遇しました。

## 原因調査

`regedit.exe` を使って古いメール アドレスを検索したところ、 `HKEY_USERS\.DEFAULT\Software\Microsoft\IdentityCRL\StoredIdentities` の下に新旧メール アドレスのレジストリ キーが見つかりました。

同じ Microsoft アカウントに対するレジストリ キーが複数あることが原因で、アカウント名の表示がメール アドレスのみになってしまうものと推測しました。

## 解決方法

  1. 新しいメール アドレスのレジストリ キーを (*バックアップした後*) 削除します。
  2. 古いメール アドレスのレジストリ キーの名前を新しいメール アドレスに変更します。
  3. 一度サインアウトしてからサインインします。

以上でした。
StoryBoardの代わりにxibで画面を実装する

## StoryBoardの代わりにxibで画面を実装する
いつも忘れてしまうので備忘録としてメモしておきます。

### 手順
* AppDelegateにrootViewControllerを設定
* StoryBoardを削除
* plistの編集
* xibファイルの作成・設定

### AppDelegateにrootViewControllerを設定
```Swift
import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        self.window = UIWindow(frame: UIScreen.main.bounds)
        self.window?.rootViewController = UINavigationController(rootViewController: ViewController())
        self.window?.makeKeyAndVisible()
        return true
    }
```

### StoryBoardを削除
Main.storyboardを右クリックし、「Delete」を選択します。
「Move To Trash」を選ばないと完全に削除されないので注意です。

### plistの編集
info.plistを開きます。
「Main storyboard file base name」がMainになってるので、そこを空にします。
<img width="575" alt="スクリーンショット 2019-05-05 11.22.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311282/0ae9349b-df77-6343-7273-6d29a9f6cbf6.png">

### xibファイルの作成・設定
storyboardの代わりにViewとなるxibファイルを作ります。
#### xibファイルの作成
* 「⌘ + N」
* 「View」を選択して「Next」
* 名前を入力して「create」

#### xibファイルを使うための設定
* xibのFile's Ownerを選択
* Custom Classの「Class」にそのxibを適用させるViewContoller名を入力
* <img width="1176" alt="スクリーンショット 2019-05-05 11.30.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311282/12f852d4-37f8-fbf9-6e6c-0037e97b96e5.png">
* File's OwnerのOutletsからxibのViewとOutletsのViewを接続
<img width="282" alt="スクリーンショット 2019-05-05 11.37.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311282/a73f5ac6-c92c-766f-fccd-5488e94a18da.png">

Viewを選択してReferencing Outletsを見てみると、ViewとFile's Ownerが接続されていることがわかります。
<img width="269" alt="スクリーンショット 2019-05-05 11.37.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311282/d4895e05-35c9-1e75-7d5e-1e01a6e9b253.png">

### 完成
これで完成です。
ビルドしてみましょう。
<img width="503" alt="スクリーンショット 2019-05-05 11.39.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311282/db840cb1-16d3-ed5c-6148-134076acc0b2.png">

できました。

### 参考
* [RootViewControllerで画面遷移をまとめた話
](https://speakerdeck.com/satotakeshi/rootviewcontrollerdehua-mian-qian-yi-womatometahua?slide=19)
[下付き文字コマンド]Wordでショートカットキーをカスタマイズする方法

#はじめに
Office365ユーザーです。
最近、文書を作る機会が増えてWordを使っています。（Pagesで文書作成したい。）
下付き文字や数式など、いろんな機能を使って文書を作るのですが、いちいちマウスでタブやリボンを選択して編集していました。**結構、非効率...:joy:**
<img width="1438" alt="スクリーンショット 2019-05-05 10.17.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/19e977bc-f43c-bb22-1114-6b912464d567.png">

そこで、今回は例として下付き文字の**ショートカットキーを自分で設定してスマートに編集する方法を共有したいと思います。**

#目次
・ショートカットキー編集画面を開く
・自分の変更したいショートカットキーを選択する(今回は下付き文字)
・デモ
・ショートカットキーを変更する際の注意点

#使用する機器
・macOS
・Office365 Word　　　　　　macOS版のWordなら何でも大丈夫だと思います。

#ショートカットキーをカスタムする。【下付き文字】
##手順

```タブツリー
ツール  -->  ショートカットキーのユーザー設定
```

###このような画面が出てきます

<img width="587" alt="スクリーンショット 2019-05-05 10.28.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/33f22ab6-071a-3fed-6dfd-9aab9ae05fdd.png">

このような画面が出てくる。

あとは、**自分が使いたい機能のコマンドを選んで、新しいショートカットキーを割り当てれば完成。**

間違えたり,
元に戻したい時には**すべてもとに戻す...**ボタンを押せば初期値に戻すことができます。

#下付き文字のショートカットを変更する

私の中で下付き文字の需要が高まっているのでこれをショートカットで呼び出したい！
今からショートカットを作成していこうと思います。

まずは、すでにあるか調べます。
先程の画面を開き、下付き文字のコマンドを探します。
英語なので翻訳するなりしてたどり着いた。「Subscript」が下付き文字のコマンド名らしいです。
調べてみたら、⌘(command) と =(イコール、Shift ＋ -)が設定されていました。

**下**付き文字のショートカット名は→**Subscript**
**上**付き文字のショートカット名は→**Superscript**

早速使おうとおもったら、できない？！？！しかも上付き文字になる(笑)なぜか同じに設定されています😨

**これは自分でカスタムするしかない。**



以下のように変更してください。
<img width="587" alt="スクリーンショット 2019-05-05 11.15.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/1aa8615d-4d52-b2d8-520e-83e3a992e7a7.png">



##変更点
```
command + -
```
(コマンド⌘)と(マイナスー)のショートカットにした。

**これで万事解決！**
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/273106c4-e713-bd59-a859-486c45e29bbb.gif)


コマンドめっちゃ快適〜〜
いちいちメニューからマウスでクリックする必要性がなくまりました！


##注意点
・ショートカット名が英語の略語になっていること
使いたい機能の名前をGoogleで調べてみましょう。

・すでにあるコマンドは使わない。
コマンドを打ったときにすでに定義されているか表示される。今回設定したコマンドにもすでに割り当てられていたのでそういった場合は上と同じ手順で解除：変更してください。


#キーボード　ショートカット一覧
・**mac版**
[Word for Mac のキーボード ショートカット](https://support.office.com/ja-jp/article/word-for-mac-%E3%81%AE%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89-%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88-3256d48a-7967-475d-be81-a6e3e1284b25)
・**Windows版**
[Windows 版 Microsoft Word のキーボード ショートカット
](https://support.office.com/ja-jp/article/windows-%E7%89%88-microsoft-word-%E3%81%AE%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89-%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88-95ef89dd-7142-4b50-afb2-f762f663ceb2)

#おわりに
よく使うもので，マウス操作が面倒になったら，このコマンドを調べてみるのをお勧めします。

そして、コマンド化されていない機能もたくさんあるので、よく使う機能などは、自分で設定することで、より効率よく編集することができますよ！
では！！！！！！！
Arch Linux に React Js をインストール

次の記事をなぞってみました。
[React Js Arch Linux Installation Guide](https://tutorialforlinux.com/2018/08/16/how-to-install-react-js-on-arch-linux-easy-guide/)

私の環境です。

```text
$ uname -a
Linux iwata 5.16.8-arch1-1 #1 SMP PREEMPT Tue, 08 Feb 2022 21:21:08 +0000 x86_64 GNU/Linux

$ node --version
v17.3.0

$ npm --version
8.4.1
```

1) インストール

```bash
sudo npm install -g create-react-app
```

>確認

```text
$ which create-react-app
/usr/bin/create-react-app

$ create-react-app --version
5.0.0
```

2) アプリケーションの作成

```bash
create-react-app hello-world
```

次のようなファイルが作成されます。

```text
$ tree -L 1 hello-world/
hello-world/
|-- README.md
|-- node_modules
|-- package-lock.json
|-- package.json
|-- public
`-- src
```

3) サーバーの起動

```bash
cd hello-world
npm start
```

4) ブラウザーで　http://hostname:3000 にアクセス

![react_may0501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/c523a86a-7667-58d4-4031-8337d6f46997.png)

>サーバーでファイアウォールが動いていたら止めます。

>```bash
sudo systemctl stop ufw
```

5) src/App.js を改造します。

```js:src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
<p>皆さん　今日は。</p>
<p>May/05/2019</p>
      </header>
    </div>
  );
}

export default App;
```

6) ブラウザーでアクセス
![react_may0502.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/835afa59-bf60-46a2-0336-a3b5b38c9dc9.png)

7) もう少し src/App.js を改造します。

```js:src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
<h1>皆さん　今日は。</h1>
<h2>May/05/2019</h2>
    </div>
  );
}

export default App;
```

8) ブラウザーでアクセス
![react_may0503.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/89d38d48-375e-6424-6496-455a334840d9.png)

9) 公開ファイルの作成

```bash
npm run build
```

次のファイルが作成されます。

```text
$ tree build/
build/
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── precache-manifest.0fe745c05466250d33cd5f5ec8261b01.js
├── service-worker.js
└── static
    ├── css
    │   ├── main.584f321a.chunk.css
    │   └── main.584f321a.chunk.css.map
    ├── js
    │   ├── 2.3310f33a.chunk.js
    │   ├── 2.3310f33a.chunk.js.map
    │   ├── main.b2804c8a.chunk.js
    │   ├── main.b2804c8a.chunk.js.map
    │   ├── runtime~main.a8a9905a.js
    │   └── runtime~main.a8a9905a.js.map
    └── media
        └── logo.5d5d9eef.svg
```

10) 公開ファイルのテスト

10-1) サーバーのインストール

```bash
yarn global add serve
```

>インストールしたサーバーのバージョンの確認

>```text
$ ~/.yarn/bin/serve --version
11.3.2
```

10-2) サーバーの起動

```bash
~/.yarn/bin/serve -s build
```

10-3) ブラウザーで http://hostname:5000 にアクセス
初投稿 記事の書き方

#はじめに

pythonが気に入って、プログラムを勉強していくうちに困ったことやすぐ忘れるようなことを忘備録としてぶろぐに記録しようと思いました。別のブログでやっていましたが、プログラムソースを綺麗に表現するシンタックスハイライトするには、一工夫必要で、面倒になり、投稿しなくなりました。

Qiitaはその点、コードに色をつけたシンタックスハイライトで記述する方法が超簡単であることを知り、トライしてみようと思いました。

#投稿するまで

まず、どうやって記事を書くかと言うと、下書きから始めます。

文章をかくのですが、マークダウンで記述する方法はこちらで一通り見ておくといいですね。

[マークダウン記述方法](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

`# 見出し`のように書いて、見出しをつけることができます。

\[表示文字](URL ‘title’)でタイトル付きリンクを貼れます。

#コード

コードを書いてみます

```python

def test():
    print(“hello world”)

test()

```

なるほど、色付きで表示されます。


#下書き保存

右下のプルダウンメニューで、下書き保存や投稿でます。
下書き保存しとけば、あとから続きを書くことができます。

#おまけ

この記事はipadで書いているのですが、バッククォートの入力は’を長押しするとバッククォートがでてきます。

[バッククォートの入力方法](https://dayone.me/1jfzIL)


#これから

非常に簡単にプログラムコードを含む投稿ができることがわかりました
[Ruby on Rails]環境変数の設定方法(.bash_profile、Dotenv-rails)

# 環境変数の設定方法
今回はこちらのトピックについて説明していきたいと思います。

##環境変数とは
環境変数とはAWSのパスワードや、APIの秘密鍵などGithubにあげたくない機密情報の第三者への漏洩を防ぐためにサーバーなどのOSに保存しアプリに渡す仕組みです。
今回は**.bash_profile**に記述する方法と**Dotenv-rails**というgemを使う方法の二種類を紹介したいと思います。

**なお環境変数は開発環境、本番環境にそれぞれ設定しなければなりません。**

###.bash_profileへの記述方法
まず.bash_profileへの環境変数の設定方法ですが自分で調べた印象では後ほど紹介するDotenvよりもこちらの方が一般的みたいです。

以下が設定手順です。

####1 .bash_profileを開く
ターミナルでvim ~/.bash_profileコマンドを打つことで開くことができます。
開いたままの状態だと編集ができないので「i」を押すことで編集モードに切り替えることができます。


```
ターミナル
#ローカル環境、本番環境共に記述する
vim ~/.bash_profile
```
####2 環境変数を記述
「i」コマンドを入力し編集モードに切り替えたら下記のように記述します。

```
ターミナル
export KEY='*******'  #使用したいキーやパスワードを記述
export SECRET_KEY='********'

```
####3 環境変数を適用させる
環境変数を記述したら必ず下記のコマンドで設定を有効にしましょう。

```
ターミナル
#下記のコマンドで環境変数を使えるようにする
source ~/.bash_profile
```
####4 環境変数の呼び出し
環境変数の呼び出しかたは以下の通りです。

```sample.rb
#設定した環境変数の呼び出し
ENV['KEY']
ENV['SECRET_KEY']
```
以上になります。

###Dotenvを用いた設定方法
Dotenvは**.envファイル**に記述する設定方法です。
なお、RailsではDotenv-railsというgemが用意されているのでこちらを使用していきます。

####1 gemをインストール

まずgemをインストールします。

```Gemfile.
gem 'dotenv-rails'
```

```
bundle install
```

####2 .envファイルを作成
環境変数を設定したいアプリのappファイルやconfigファイル、Gemfileなどが置いてあるルートディレクトリに「.env」というファイルを作成してください。

####3 環境変数を設定
作成した.envファイルに環境変数を記述します。

```|.env|
KEY='*******' #使用したいキーやパスワードを記述
SECRET_KEY='*******'
```

####4 .gitignoreを編集
作成した.envファイルがgithubにアップされないように.gitignoreファイルに記述します

```|.gitignore|
#下記を追記
/.env
```

これで環境変数をgithubにアップすることなく使用することができます。

####5 環境変数の呼び出し
呼び出しかたは.bash_profileと同様です。

```sample.rb
#設定した環境変数の呼び出し
ENV['KEY']
ENV['SECRET_KEY']
```

以上になります。
通常.envを読みこませるにはコマンドが必要ですが、dotenv-railsというgemを導入することにより自動的に読み込んでくれます。

##最後に
以上になります。
環境変数の設定方法は他にも色々あるのでぜひ調べてみてください。
私自身まだまだ知らないことだらけなので引き続き勉強していきます！！
もし間違っている部分等あれば教えていただけると嬉しく思います！！

最後まで読んでいただきありがとうございました！
「glassfish.lib.grizzly-npn-bootstrap-1.6.jarが見つからなかったかロードできませんでした」が原因でPayara Serverが起動しない

[注意1] この記事の内容は以下の環境で動作確認を行っています。

```
C:\payara5\bin>asadmin.bat version
Version string could not be obtained from Server [localhost:4848].
(Turn debugging on e.g. by setting AS_DEBUG=true in your environment, to see the details.)
Using locally retrieved version string from version class.
Version = Payara Server  5.191 #badassfish (build 94)
Command version executed successfully.
```

[注意2] 次のURLを参考にしています: https://www.coppermine.jp/note/2019/01/payara5-npn-version-switch/

***

Java EEのローカル開発環境としてPayara Serverを利用しているのですが、ソフトウェアの導入直後、以下のエラーによりPayara Serverが起動しないということがありました。

```
エラー: メイン・クラス[1.8.0|1.8.0u120]-Xbootclasspath.p:C:\payara5\glassfish.lib.grizzly-npn-bootstrap-1.6.jarが見つからなかったかロードできませんでした
```

この問題に対する対処法はいろいろあると思いますが、わたしの場合は`domain.xml`を修正することで問題が解消しました。ディレクトリ`${install_directory}/glassfish/domains/${domain_name}`に格納されている`domain.xml`を確認すると、以下のような記述が複数個所見つかると思います。

```xml
<!-- Grizzly NPN Jar version -->
<jvm-options>[1.8.0|1.8.0u120]-Xbootclasspath/p:${com.sun.aas.installRoot}/lib/grizzly-npn-bootstrap-1.6.jar</jvm-options>
<jvm-options>[1.8.0u121|1.8.0u160]-Xbootclasspath/p:${com.sun.aas.installRoot}/lib/grizzly-npn-bootstrap-1.7.jar</jvm-options>
<jvm-options>[1.8.0u161|1.8.0u190]-Xbootclasspath/p:${com.sun.aas.installRoot}/lib/grizzly-npn-bootstrap-1.8.jar</jvm-options>
<jvm-options>[1.8.0u191|1.8.0u500]-Xbootclasspath/p:${com.sun.aas.installRoot}/lib/grizzly-npn-bootstrap-1.8.1.jar</jvm-options>
```

これはJavaのバージョンに合わせてロードする`grizzly-npn-bootstrap-${version}.jar`を変えるという機構のようですが、これがうまく動いていないことがPayara Serverが正常に起動しない原因のようです。自動で切り替える機構がうまく動かないなら、ハードコーディングしてしまいます。

ここでPayara Serverで利用してるJavaのバージョンを確認します。

```
C:\jdk\jdk1.8.0_202\bin>java -version
openjdk version "1.8.0_202"
OpenJDK Runtime Environment Corretto-8.202.08.2 (build 1.8.0_202-b08)
OpenJDK 64-Bit Server VM Corretto-8.202.08.2 (build 25.202-b08, mixed mode)
```

Javaのバージョンは`1.8.0u202`で、`domain.xml`の記述を見る限りだと`grizzly-npn-bootstrap-1.8.1.jar`をロードするのが正解のようです。そこで上記の`domain.xml`の記述をすべて削除するか、コメントアウトして、以下の通り書き換えます。

```
<jvm-options>-Xbootclasspath/p:${com.sun.aas.installRoot}/lib/grizzly-npn-bootstrap-1.8.1.jar</jvm-options>
```

するとPayara Serverは正しく起動するようになるはず(´・ω・｀)
【読書備忘】現場で役立つシステム設計の原則① 第1章：小さくまとめてわかりやすくする

## 連載目次

[第1章：小さくまとめてわかりやすくする](https://qiita.com/marie_khr/items/5b9058da25e3b5959a4b) →本記事
[第2章：場合分けのロジックを整理する](https://qiita.com/marie_khr/items/91811a152ca48477d69a)
第3章：業務ロジックをわかりやすく整理する（公開予定）

## はじめに

この記事は、増田亨さんの著書「**現場で役立つシステム設計の原則**」の、主に私自身へ向けた読書備忘録です。（追ってサンプルコードも追加予定）

とても素晴らしい本だと思うので、興味を持たれた方はぜひ読んでみてください。
リンクは記事の最後にあります。

## 本章の概要
第1章：小さくまとめてわかりやすくする

変更が楽で安全なプログラムを書くための第一歩として、
ソースコードの整理整頓の基本を学びます。

## 覚えておきたいキーワード
今後、理解を深めたいと感じたキーワードのメモです。
ドメイン駆動設計については初心者なので、基本的なものが多いかもしれません。

### 破壊的代入
1つの変数を使いまわして代入を繰り返すこと。再代入。
破壊的代入はプログラム変更の副作用を起こしやすいため、極力避けた方がコードが安定します。

### 値オブジェクト（Value Object）
値を扱うための専用クラスを作るやり方。
金額、数量、年月、電話番号など業務上の名前や用語をそのままに、小さなクラスを定義して、長さや形式などのルールは、値オブジェクト内に明示的に定義します。

こうする事で、正しい値を扱うことが保証されます。
単純に String や int 型の変数を定義するだけでは、業務の関心事にそぐわない異常な値も設定できてしまうため。

### 完全コンストラクタ
オブジェクトの生成時に、オブジェクトの状態が完全に決定され、それ以降は不変とする設計パターン。
setter メソッドは作らず、別の値が必要になったら、別のオブジェクトを作成します。
値オブジェクトとセットで覚えておきたいキーワードです。

## 本章の個人的共感ポイント
本章のなかで特に共感したポイントのメモです。
開発現場で取り組んでみたい度合いを「★」の数で表現してみました。

### わかりやすい名前を使う
>名前のわかりやすさは、プログラムの読みやすさ／読みにくさに直結します。名前があいまいだったり、名前と内容が一致していないプログラムは読むのに苦労します。（p17）

取り組みたい度：★★★★★
クラス名やメソッド名は下手なものを使えないけれど、変数名（特にローカル変数）は、実装者の個性が現れやすいように感じます。
本文の例にあるような1文字の変数名（`int a;`）はさすがに見たことがありませんが、ロジック全体を読まないと、変数の内容が読み取れないような名前は時々見かけます。
特に「業務で使っている言葉をそのまま」使うべき、という点には非常に共感。日本語の業務用語を無理に英語に訳して、意味が分かりづらくなった経験が何度もあります。

### メソッドは短く、クラスは小さく
>変更に苦しむのは、いつでも長いメソッドと大きなクラスです。（中略）コードを「短いメソッド」と「小さなクラス」に小分けして整理するのが、変更を楽で安全にする設計の基本です。（p27）

取り組みたい度：★★★★★
本章の冒頭にある「クラスは最初から大きかったわけではありません」という言葉が、特に印象的でした。ほんの少しの修正や機能追加が積み重なって、メソッドの数が増え、気がつけば巨大なクラスに...という経験は誰でもあるのではないでしょうか。
設計は初期段階で終わるものではなく、常に改善を重ねていくべき（メソッドの抽出やクラスの分割も積極的に行なう）というのは、個人的には大きな気づきでした。
小さいところから始めないと難しいかな、という思いから★4つ。

### 「値」を扱うための専用のクラスを作る
>値の種類ごとに専用の型を用意するとコードが安定し、コードの意図が明確になります。（p32）

取り組みたい度：★★★★★
ドメイン駆動設計における「値オブジェクト（Value Object）」という実装パターンについての説明。自分でデータの種類ごとに専用の型を作ってしまう、という発想が全くなかったので、目からウロコな内容でした。
また、値オブジェクトは不変（とするもの）なので、ロジックの途中で思わず値が変更されてしまう、という不具合が起こらない点も特徴なのだそう。

値オブジェクトについて分かりやすくまとめている方がいたので、合わせて読んでおきたいです。
[DDD基礎解説：Entity、ValueObjectってなんなんだ](https://little-hands.hatenablog.com/entry/2018/12/09/entity-value-object)

## 参考文献

[現場で役立つシステム設計の原則 ~変更を楽で安全にするオブジェクト指向の実践技法](https://www.amazon.co.jp/dp/477419087X)
第1章：小さくまとめてわかりやすくする（p13〜p46）
「R言語でのベクトル要素の削除」に似た処理をPythonで行いたい

# 目的・背景
個人的に，R言語におけるベクトル要素の削除と，Pythonにおけるリスト要素の削除(del文など使用)では勝手の異なる点が多く，困惑したことが何度かありました．例えば...

```remove.R
tmp = c("a","b","c","d","e")
tmp2 = tmp[-3]
print(tmp)
print(tmp2)
# 出力
# "a" "b" "c" "d" "e"
# "a" "b" "d" "e"
```

このような処理をPythonで行おうと思って，次のコードを書いたことがあります．

```remove.py
tmp = ["a","b","c","d","e"]
tmp2 = tmp
del tmp2[2]
print(tmp)
print(tmp2)
# 出力
# ['a', 'b', 'd', 'e']   # tmpからも"c"が消えてる...??と困惑した．
# ['a', 'b', 'd', 'e']
```

当時「tmpが指しているリストオブジェクトのアドレスがtmp2に渡される」ということを知らなかったため，Rをいじる感覚でPythonのコードを書いてしまい失敗したことが何度かありました．
そこで，タイトルのような関数をPythonで作ってそれを使っていこうと考えました．

ちなみに，Rでは次のようにインデックスを指定して複数の要素の削除も可能です．
このような指定,処理もできるような関数にしたいと思います．

```remove2.R
tmp = c("a","b","c","d","e")
tmp2 = tmp[-c(2,3,4)]
print(tmp)
print(tmp2)
# 出力
# "a" "b" "c" "d" "e"
# "a" "e"
```




# 作った関数

作成した rdel() を定義するソースコードは，次のような感じです．
Rっぽい要素delete，という意味で rdel という名前にしました．

```def_rdel.py
def rdel_1(lis,ind):
    n = len(lis)
    if ind==0:
        out = lis[1:(n-1)+1]
    elif ind==(n-1):
        out = lis[0:(n-2)+1]
    else:
        zen = lis[0:(ind-1)+1]
        kou = lis[(ind+1):(n-1)+1]
        out = zen + kou
    return out

def rdel(lis,ind):
    if type(ind)!=list:
        out = rdel_1(lis,ind)
    else:
        ind = sorted(ind)
        back = 1
        for i in range(len(ind)):
            lis = rdel_1(lis,ind[i])
            if i < len(ind)-1:
                ind[i+1] -= back
                back += 1
        out = lis
    return out
```

引数は次の通りです．

- lis：リストオブジェクト．要素の削除の対象．
- ind：int(またはそのリスト)オブジェクト．削除したい要素のインデックスを指定．

使用例を最後に示します．

```ex_rdel.py
hoge = ["a","b","c","d"]
ex1 = rdel(hoge,2)
ex2 = rdel(hoge,[1,3])
print(hoge,ex1,ex2)
# 出力
# ['a', 'b', 'c', 'd'] ['a', 'b', 'd'] ['a', 'c']
```

エラー処理等は全然できていません．
アドバイスやご指摘がありましたらお願いいたします．
Pathを利用した状況で相対パスを求めたい

さほど頻度は高くないと思いますが、とあるパスを起点として、別のパスの相対パスを求めたいということがあります。Java7以降では、ファイル操作(もといパス操作)に`java.nio.file.Path`を利用することが多いと思いますが、__`Path`を利用している状況で相対パスを求めたいという場合には`Path::relativize`を使用します。__

JavaDocは次のURLになります: https://docs.oracle.com/javase/jp/8/docs/api/java/nio/file/Path.html#relativize-java.nio.file.Path-

APIの使い方がややわかりづらいのですが、相対パスを求めたいパスを引数に、起点としたいパスをレシーバにそれぞれ指定します。

以下はディレクトリ`/a/b/c/directory`を起点としてファイル`/a/b/c/directory/e/file`の相対パスを求めるサンプルです。なおファイル`/a/b/c/directory/e/file`はディレクトリ`/a/b/c/directory`に格納されているという想定になります。

```java
package main;

import java.nio.file.Paths;

public class Main {
    public static void main(String[] args) {
        var directory = Paths.get("/a/b/c/directory");
        var file = Paths.get("/a/b/c/directory/e/file");
        
        System.out.println(directory.relativize(file)); // => e\file
    }    
}
```
システム開発 見積もり～受注

仕事でやっているシステム開発。見積もり～受注までの流れを書いてみる。

立場:一次受け
開発スタイル:ウォーターフォール + 少しだけプロトタイプ開発

##1. 見積もり前準備
1. ユーザーからこれをこう作ってほしいと打診される。(or 自分からこれこれこういうのがあると、業務的にいい感じになるよと提案する)
1. ユーザーへヒアリングする
1. ヒアリングした内容をまとめる 
    1. 議事録を書く
    1. 課題を抽出する


##2. 見積もり
2. 課題を解決するための機能を洗い出す
3. システム方式を決定する
3. 機能を実現するための画面を洗い出す
4. 外注の役割分担を決める
4. 外注に見積もり依頼をする
1. あらかじめ作成しておいた、標準作業工数表から画面数をもとに工数を出す
2. 外注見積もり結果を見積もり内容に反映させる
1. 上長に承認依頼を出す
2. OKもらったら見積書を作成する

##3. 受注
2. ユーザーに見積もり書を提出する
2. ユーザーからの注文確定連絡を待つ(場合によってはこの日までに確定しないと、計画どおりいかないよ、など催促する)
1. ユーザーから注文書を受け取る
2. 作業計画をたてて、本当にできるかどうか最終チェックする
3. キックオフミーティングを実施して、開発のスタートをきる 


2次受けとかだと、開発範囲があらかじめ決まっているので、2-6からの作業になると思います。
標準作業工数表はExcelファイルで、画面数を登録すると、最終工数がでるようなに自作しています。
見積方法はファクションポイント法など、いろいろあると思いますが、自分は作業積み上げ法を採用しています。
Day003 webエンジニアへの道 - dotinstallの「Ruby on Rails 5入門」完了 -

こんにちは。
webエンジニアを目指すtomoです。

エンジニアの勉強をしている日々の学びを記録しています。

私自身の頭の整理と今後迷った時のリファレンスも兼ねて書き連ねていきますが、同じようにエンジニア転職を考えている方の参考にもなればと考えています。
また、「ここ間違ってる！こっちが正しい！」といったご指摘もあれば頂けると嬉しいです🙏

ゴールデンウィークも終盤にさしかかってきましたが、今日も今日とて勉強を進めて行きます！

---

##dotinstallの「Ruby on Rails 5入門」完了

上記のレッスンではscaffoldを用いた簡単なテキスト投稿サイトの作成を行いました。
rails上でどのような処理が行われているか全体感はわかったものの、各要素の結びつきや命名規則がいまいち理解できていないので、ここからはrailsチュートリアルで理解を進めることにします。

↓ちなみに、作成したサイトはこのような感じ↓
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391565/d7b5c89b-1cd1-2bd2-4d11-80688b73fd0c.png)
新規投稿、編集、削除機能が付いており、
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391565/78f756de-2575-07f6-a650-06c173756fc2.png)
投稿時のバリデーションも行ってくれて、
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391565/bfd1d447-26b0-9d83-0772-1d783a673976.png)
投稿内容に対してコメントも付けられるようになっています。

##Railsチュートリアルを始める

ということで、本日からRailsチュートリアルを進めることにしました。
できればローカル開発環境の構築から行いたいところですが、[Day001の反省](https://qiita.com/tomo_tech/items/df681a3cfea61e9aa62d)（必要なソフトウェアやバージョンの管理をしなければならないので、開発環境の構築は意外と難しい...）からチュートリアルに従ってAWS Cloud9で開発を進めています。

##★メモ

######*後日調べること & 気づいたこと

- 使いやすくて気に入っていた画像変換サイト（png,jpeg,gif,mp4など各種対応）の名前を忘れてしまったので今度探す...


##さいごに

まずは1週間を目標にチュートリアル1周を終えたいと思います。

---

twitterもやっているので、宜しければフォローお願いします！
[@tomo_tech_](https://twitter.com/tomo_tech_)
デバッグツールの導入について


## はじめに

利用したことのあるデバッグツールについて覚書。

## binding.pry によるデバック

binding.pry では、実際アプリ動作時の変数にセットされている値を確認することが可能。

### 導入準備

- Gemfile への追記

```Gemfile
gem 'pry-rails'
```

- bundle install を実行

```
$ bundle install
```


### 使い方

- ソース内に`binding.pry`を追記する。

  下記例では、「@message」に何がセットされているのかを確認することを目的としている。


  ```message_controller.rb
    def create
      @message = Message.new(message_params)
      binding.pry
  
      if @message.save
        flash[:succes] = 'Messageが正常に投稿されました！'
        redirect_to @message
      else
        flash.now[:danger] = 'Messageが投稿されませんでした＞＜'
        render :new
      end
    end
  ```

  

- 該当ロジックを使用する画面操作をしてみる。

  今回の場合は、「メッセージ投稿」の操作を実施。

- ターミナル上で確認したい変数を入力する。

  下記例のように、「@message.title」や「@message.content」と入力することによって変数の中身を確認することができる。
  
  ```
      14: def create
      15:   @message = Message.new(message_params)
   => 16:   binding.pry
      17: 
      18:   if @message.save
      19:     flash[:succes] = 'Messageが正常に投稿されました！'
      20:     redirect_to @message
      21:   else
      22:     flash.now[:danger] = 'Messageが投稿されませんでした＞＜'
      23:     render :new
      24:   end
      25: end
  
  [1] pry(#<MessagesController>)> @message.title
  => "たいとる"
  [2] pry(#<MessagesController>)> @message.content
  => "めっせーじ"
  ```
  
  - デバックを終了する。
  
  ターミナル上で「exit」を入力することにより終了させる。
  
  操作していた画面は、デバック対象の操作（ここではメッセージ投稿）が完了した状態となる。
  
  ```
  [3] pry(#<MessagesController>)> exit
  ```
  
  
  
  

## Rails Best Practices によるデバック
rails_best_practicesでは、railsに特化したコードの品質チェックが可能。

### 導入準備
- Gemfile への追記

```Gemfile
gem 'rails_best_practices'
```

- bundle install を実行

```
$ bundle install
```




### 使い方

```
$ rails_best_practices .
Source Code: |================================================================================================|

Please go to https://rails-bestpractices.com to see more useful Rails Best Practices.

No warning found. Cool!
```

上記例では「クーーール！！」と言われてしまったので、クールじゃない私も見てもらおうと思います。

routes.rb において`resources`の記述をしている状態で、controller 側で`new`メソッドをコメントアウトしてみます。

```routes.rb
Rails.application.routes.draw do
  root to: 'messages#index'
  resources :messages
end
```

```messages_controller.rb
class MessagesController < ApplicationController
  # def new
  #   @message = Message.new(content: 'sample')
  # end
（他のメソッドは省略）
end
```

つまり、RESTful ではない状態にしてみた。

この状況下での実行結果は以下の通り。

```
$ rails_best_practices .
Source Code: |================================================================================================|
/Users/sayjoy/Desktop/free/tr_ms_board/config/routes.rb:4 - restrict auto-generated routes messages (except: [:new])

Please go to https://rails-bestpractices.com to see more useful Rails Best Practices.

Found 1 warnings.
```

正しくwornings が検出され、対象ファイル（不足しているメソッド名まで！）も表示される。

品質チェックの範囲は確認できてないが、機械的にレビューしてもらえる環境がここにはあるということ（最高）である。今後のアプリ作成でも活用させていただこう。



## 宿題

### よりマニアックな活用方法への挑戦

調べてみると、ツールにはオプションがあったり、まだまだ使いこなせていない感があるので今後の開発にて使い倒して見ようと思う。デバックツールは実際にバグにぶち当たった時に、よりありがたみを感じることができるはずなので、どんどん開発に挑戦してみるべし。楽しみすぎる。。バグはよこい！笑

### RuboCop なるツールもある模様

こちらについても調べて使ってみるぞい。
#jq コマンドで、 #JSON オブジェクトのvalueに文字列が含まれている場合、含まれていない場合の否定検索をする簡単な例

```
$ echo '{"name":"Alice"}' | jq 'select(.name | contains("lic"))'
{
  "name": "Alice"
}
$ echo '{"name":"Alice"}' | jq 'select(.name | contains("lic") | not)'
$ echo '{"name":"Alice"}' | jq 'select(.name | contains("Bob") | not)'
{
  "name": "Alice"
}
```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
seabornでグラフを複数のグラフを描画する

# 概要
seabornで複数のグラフを複数行複数列で描画するときの設定や
y軸を揃える設定、グラフのサイズを変える設定の方法を記載します。

# どうして書いたのか
seabornでグラフを複数描画するときに、
いつも「あれ、どうだったっけ？」ってなって検索するのに時間がかかるので、
他にも同じ人がいるかもと思い、記事にしました。

# 前提
- 実行環境は jupyter notebook です。
- import するのは以下。  

``` python
import matplotlib.pyplot as plt
import seaborn as sns
```

- 描画するデータは以下で取得できるseabornのサンプルデータを使います。  

``` python
tips_df = sns.load_dataset('tips')
tips_df.head()

	total_bill	tip	sex	smoker	day	time	size
0	16.99	1.01	Female	No	Sun	Dinner	2
1	10.34	1.66	Male	No	Sun	Dinner	3
2	21.01	3.50	Male	No	Sun	Dinner	3
3	23.68	3.31	Male	No	Sun	Dinner	2
4	24.59	3.61	Female	No	Sun	Dinner	4
```

# 1行2列で描画する

subplotsに行, 列 な感じで数字を指定する。
(もし2行3列なら、 `plt.subplots(2,3)` となる。)

ax1とax2にsubplotsで指定した設定が入るイメージをぼくは持っています。
それを各グラフのaｘに指定することで設定を反映させます。
axがパラメータとしてないグラフもあります。lmplotとか。

``` python
fig, (ax1, ax2) = plt.subplots(1, 2)

sns.regplot(x='total_bill', y='size', data=tips_df, ax=ax1)
sns.countplot(x='size', data=tips_df, ax=ax2)
```

## 2つのグラフ間でy軸を揃える

subplotsのところに `sharey=True` を追加する。

``` python
fig, (ax1, ax2) = plt.subplots(1, 2, sharey=True)

sns.regplot(x='total_bill', y='size', data=tips_df, ax=ax1)
sns.countplot(x='size', data=tips_df, ax=ax2)
```

## グラフをサイズを変える

subplotsのところに `figsize=(10, 20)` を追加する。
()の中の数字は(横のサイズ, 縦のサイズ) です。 

``` python
fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(10,20))

sns.regplot(x='total_bill', y='size', data=tips_df, ax=ax1)
sns.countplot(x='size', data=tips_df, ax=ax2)
```