
 iOS Simulator関連の削除
# シミュレーターの一覧表示
xcrun simctl list devices

# 使えないシミュレーターを削除
xcrun simctl delete unavailable

# キャッシュの削除
xcrun --kill-cache

 coreSimulator/casheの削除
rm -rf ~/Library/Developer/CoreSimulator/Caches/*

 DerivedDataの削除
rm -rf ~/Library/Developer/Xcode/DerivedData/*

 iOS DeviceSup...


 iOS Simulator関連の削除
# シミュレーターの一覧表示
xcrun simctl list devices

# 使えないシミュレーターを削除
xcrun simctl delete 

Macのストレージを空ける


 CSRファイルの生成
キーチェーンアクセスで作成する

キーチェーンアクセス &gt; 証明書アシスタント &gt; 認証曲に証明書を要求…
ユーザーのメールアドレスに任意の値を入力
通称に任意の値を入力（管理しやすい名前を付ける）
ディスクに保存を選択


 証明書（Certificates）の生成
Apple Developperで作成する

Certificates, Identifiers &amp; Profiles を選択
種類は App Store and Ad Hoc を選択
キーチェーンアクセスで作成したCSRファイルをアップロードする
配布用証明書( iOS Di...


 CSRファイルの生成
キーチェーンアクセスで作成する

キーチェーンアクセス &gt; 証明書アシスタント &gt; 認証曲に証明書を要求…
ユーザーのメールアドレスに任意の値を入力
通称に任意の

iOSアプリを実機にインストールする


 コマンド集

Heroku CLIのインストール

brew tap heroku/brew &amp;&amp; brew install heroku 

# 以下だけでもいいかも
brew install heroku

Herokuへログイン

heroku login

# ターミナルベースでログインする（毎回ログインしなくてよくなる）
heroku login --interactive

DBコンテナへログイン

heroku pg:psql -a {アプリ名}

DBのマイグレーション

heroku run php artisan migrate -a {アプリ名}...


 コマンド集

Heroku CLIのインストール

brew tap heroku/brew &amp;&amp; brew install heroku 

# 以下だけでもいいかも
brew 

Herokuのよく使うコマンド集


 Flutterのインストール

インストール

brew install flutter

 Android Studio の設定

インストール

brew install android-studio

Configure &gt; Plugins から Flutterを検索してインストール
Configure &gt; SDK Manager &gt; SDK Tools から Android SDK Command-line Toolsをインストール
Android SDKのライセンスを認証

flutter doctor --android-licenses

連携できたか...


 Flutterのインストール

インストール

brew install flutter

 Android Studio の設定

インストール

brew install android-st

Flutterの開発環境を構築する


 dumpファイルのリストア

DBコンテナとの共有フォルダにdumpファイルを移動

mv latest.dump .database/

DBコンテナに入る

dc exec db bash

リストアする

pg_restore --verbose --clean -U root -d develop /var/lib/postgresql/data/latest.dump
参考：https://blog.garbanzo.xyz/Docker_Postgresでリストアする/

 CSVからHerokuのPostgreSQLにデータ移行
heroku pg:psql -a &l...


 dumpファイルのリストア

DBコンテナとの共有フォルダにdumpファイルを移動

mv latest.dump .database/

DBコンテナに入る

dc exec db bash



dumpファイルのリストア方法

yum list installed | grep php
Repodata is over 2 weeks old. Install yum-cron? Or run: yum makecache fast
php.x86_64                           7.2.21-1.el7.remi              @remi-php72 
php-cli.x86_64                       7.2.21-1.el7.remi              @remi-php72 
php-common.x86_64             ...

yum list installed | grep php
Repodata is over 2 weeks old. Install yum-cron? Or run: yum makecache 

CentOSのPHPを7.4にする

# Now

## 概要

> node.jsで書かれたアプリケーションを超簡単にデプロイできるサービス。

### インストール

```bash:bash
npm install -g now
```

### 開発用サーバの立ち上げ

```bash:bash
now dev
```

### デプロイする

#### 登録

https://zeit.co にアクセスして登録

#### ログイン

```bash:bash
now login
```

登録したメールアドレスに認証URLが送られてくるのでクリック

#### デプロイ

```bash:bash
now
```

### URLを固定する

NowはデプロイのたびにランダムなURLが生成されるため、これを固定にしてあげる必要がある。
Package.json に設定を記述してあげる必要がある。

#### Package.jsonに追記

```json
"now": {
  "alias": {任意の文字列}
}
```

#### デプロイ

```bash
now --prod
```

`https://{任意の文字列}.now.sh`でアクセスすることができる。


# ngrok

## 概要

簡単にHttps化出来るトンネリングサービス。
LINEのWebhook URLはHttpsしか対応していないため、開発時にはこちらを利用すると便利。

### インストール

```bash
brew cask install ngrok
```

### 実行

```bash
ngrok http 3000
```

### Basic認証をかける

#### https://ngrok.com にアクセスして登録

#### ターミナルで認証する

```bash
ngrok authtoken {Authタブで確認したトークン}
```

#### 実行

```bash
ngrok -auth="{任意のユーザ名}:{任意のパスワード}" {ポート番号}
```

参考：[少しでも安全にngrokを使用する(Basic認証)](https://qiita.com/da-sugi/items/77f5b9bbbd32d8a79bf3)

# 備考

```bash:bash
# トークンなどをSECRETに入れておくことができるが何故かデプロイ時に毎回これを打たないとコケる
now -e CHANNEL_ACCESS_TOKEN=@line-token
```


Now

概要
node.jsで書かれたアプリケーションを超簡単にデプロイできるサービス。

インストール

npm install -g now

開発用サーバの立ち上げ

now dev

デプロ

NowでLINEBot作ってみる

# 初期構築

## 必要なパッケージをインストール

```sh
$ brew install watchman
$ npm install -g react-native-cli
```

## ReactNativeアプリケーションを作成

```sh
$ react-native init <アプリ名>
? CocoaPods (https://cocoapods.org/) is not installed. CocoaPods is necessary for the iOS project to run correctly. Do you 
want to install it?
○ Yes, with Gem
● Yes, with Homebrew
```

### Homebrewによるcocoapodsのインストールに失敗した場合

### 以下エラーが発生する場合あり

```sh
The formula built, but is not symlinked into /usr/local
Could not symlink bin/pod
Target /usr/local/bin/pod
already exists. You may want to remove it:
rm '/usr/local/bin/pod'

To force the link and overwrite all conflicting files:
brew link --overwrite cocoapods

To list all files that would be deleted:
brew link --overwrite --dry-run cocoapods
```

### `brew doctor`で見てみても下記のようなWarningが確認できる

```sh
$ brew doctor
Warning: You have unlinked kegs in your Cellar.
Leaving kegs unlinked can lead to build-trouble and cause brews that depend on
those kegs to fail to run properly once built. Run `brew link` on these:
  cocoapods
```

### cocoapodsのリンクが作成出来ていないようなので、指示にしたがって作成する

~~よく分からないけれど強制的に上書きしてしまう~~

```sh
$ brew link --overwrite cocoapods
```

### cocopodsによるライブラリのインストールに失敗しているはず（以下エラーが発生）

```sh
(node:6594) UnhandledPromiseRejectionWarning: Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./<アプリ名>/ios && pod install".
```

### なので、これも指示にしたがってインストールを実行する

```sh
$ cd <アプリ名>/ios
$ pod install
```

※あらかじめHomebrewでcocoapodsをインストールしてから`react-native init`を行えば早いかも知れない

# ビルド

```sh
$ react-native run-ios
```

### Ctrl + R でリロード



# パッケージの導入

## eslintの導入

### コマンド

```sh
$ npm install --save-dev eslint

$ ./node_modules/.bin/eslint --init

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? What format do you want your config file to be in? JSON
The config that you've selected requires the following dependencies:
```

## react-navigationの導入

### コマンド

```sh
$ npm install react-navigation

# 参考：https://qiita.com/zaburo/items/81c39f73216e87f443ea
$ npm install react-native-gesture-handler react-native-reanimated
$ cd ios
$ pod install
```

### ex.) screens/Home.js

```javascript
import React from 'react';
import {View, Text, Button} from 'react-native';

export default class Home extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Home</Text>
      </View>
    );
  }
}

```

### ex.) App.js

```javascript
import React from 'react';

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';

// import screens
import Home from './screens/Home';
import List from './screens/List';

// Tab
const Tab = createBottomTabNavigator({
  Home: {screen: Home},
  List: {screen: List},
});

export default class App extends React.Component {
  render() {
    const Layout = createAppContainer(Tab);
    return <Layout />;
  }
}

```

## native-baseの導入

### コマンド

```sh
$ npm install native-base
$ react-native link
```

### ex.) Home.js

```javascript
import React from 'react';

import {Container, Header, Left, Body, Right, Button, Icon, Title} from 'native-base';

export default class Home extends React.Component {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title>タイトル</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name="menu" />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

```

## react-native-firebaseの導入

### バンドルIDを設定

ex. ) com.sample.{アプリ名}

### Firebaseのプロジェクトにアプリを追加

1. iOSアプリに設定したバンドルIDを設定
2. App Store ID は後で設定する
3. 設定ファイル（GoogleService-Info.plist）をダウンロードする
4. `iOS/{プロジェクト名}` 直下にGoogleService-Info.plistを配置する
   - 上手くいかなかった場合は、xcodeから配置してみる

### コマンド

```sh
$ npm install react-native-firebase
```

### Podfileに以下を追加

```makefile
pod 'Firebase/Core'
pod 'Firebase/Firestore'  # Firestoreを使いたいのでこれも追加
```

#### AppDelegate.hに以下を追加

```objective-c
@import Firebase;  // ←追加
```

#### AppDelegate.mに以下を追加

```objective-c
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure]; // ←追加
  ...
}
```

#### コマンド

```sh
$ cd ios
$ pod install
```



## react-native-modal-datetime-pickerの導入

```sh
$ npm install react-native-modal-datetime-picker
```



## state, props周り



## 実機デバッグ

#### コマンド

```sh
$ npm install -g ios-deploy
$ react-native run-ios --device "デバイス名"
```



## 

```sh
$ react-native start --reset-cache
$ react-native run-ios
```


初期構築

必要なパッケージをインストール

$ brew install watchman
$ npm install -g react-native-cli

ReactNativeアプリケーショ

ReactNative を触ってみる

# node.js をインストールする

## NodeBrewをインストール

NodeBrew は Nodeのバージョンを管理するツール
似たものに nodenv というものもある

```bash:bash
brew install nodebrew
```

## Nodebrewのセットアップ

初めに打たなければいけない

```bash:bash
nodebrew setup
```

## 最新版のnode.jsをインストール

もちろんバージョンを指定してインストールしても良し
`nodebrew ls-remote` で提供されているバージョンを調べられる

```bash:bash
nodebrew install-binary latest
nodebrew ls # インストールしたnode.jsのバージョンを確認
```

## バージョンを指定して使用できるようにする

複数のバージョンを切り替えるときにも同じようにバージョンを指定する

```bash:bash
$ nodebrew use v12.4.0 # ls で確認したバージョンを指定
```

# パスを通す

```plaintext:.bash_profile
PATH=/usr/local/var/nodebrew/current/bin:$PATH
```

参考：[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
参考：[【2018年版】macのhomebrewでnodebrew入れてからnode.jsを入れるまで](https://qiita.com/Alex_mht_code/items/422f5ce10d9c9d5729b7)

# ESLintをインストールする

## ざっくりコマンド

```bash
$ cd {プロジェクトルート} # プロジェクトルートに移動

# package.json作成していない場合
$ npm init # 対話式でpackage.json作成 (適当にエンターでOK)

$ npm install eslint --save-dev # eslintのインストール (開発環境にしか必要ないはずなので --save-dev を付与)

$ npm install -g eslint-cli # eslintをグローバルインストールしなくてもeslintコマンドがパス通るようになる

$ eslint --init # ESLintの初期化 (.eslintrcファイルの作成)
```

### `eslint --init` の対話内容

```bash
# コードスタイルも強制してもらおうかなと一番厳しめな一番下を選択
? How would you like to use ESLint? 
  To check syntax only 
  To check syntax and find problems 
❯ To check syntax, find problems, and enforce code style

# フロントのJSしか書かないつもりなので一番上を選択
? What type of modules does your project use? 
❯ JavaScript modules (import/export) 
  CommonJS (require/exports) 
  None of these

# フレームワークは使わないので一番下を選択
? Which framework does your project use? 
  React 
  Vue.js 
❯ None of these

# TypeScriptは使わないので N
? Does your project use TypeScript? (y/N) N

# フロントのJSしか書かないつもりなので Browser のみ選択
? Where does your code run? 
❯◉ Browser
 ◯ Node

# 設定ファイルを自分で書くのは大変なのでスタイルガイドを使用すべく一番上を選択
? How would you like to define a style for your project? 
❯ Use a popular style guide 
  Answer questions about your style 
  Inspect your JavaScript file(s) 

# よく分からないけれど Airbnb を選択
? Which style guide do you want to follow? 
❯ Airbnb: https://github.com/airbnb/javascript 
  Standard: https://github.com/standard/standard 
  Google: https://github.com/google/eslint-config-google 

# 設定ファイルといえばJSONのイメージなのでJSONを選択
? What format do you want your config file to be in? 
  JavaScript 
  YAML 
❯ JSON 

# どうやら Airbnb だとESLintのバージョンを下げなければいけないらしくて大人しく従う Y
? The style guide "airbnb" requires eslint@^5.16.0 || ^6.8.0. You are currently using eslint@7.1.0.
  Do you want to downgrade? (Y/n) Y

# 関連するパッケージをインストールしろと言われたので Y
eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 eslint-plugin-import@^2.20.1
? Would you like to install them now with npm? (Y/n) Y
```

参考：[ESLintと「eslint --init」による「.eslintrc.json」の生成](https://www.konosumi.net/entry/2019/09/01/165449)


# VSCodeの拡張機能をインストールする

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) をインストールする
- Cmd + Shift + P > ESLint: enable ESLint を実行
- 自動的にJSファイルがチェックされるようになるはず・


node.js をインストールする

NodeBrewをインストール

NodeBrew は Nodeのバージョンを管理するツール
似たものに nodenv というものもある

brew instal

ESLint簡単導入 × VSCode

# 導入

## 拡張機能のインストール

以下の拡張機能をインストールします。
Javaを使うのでJava系の拡張機能がまとまっている[Java Extension Pack](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack)と、SpringBootの拡張機能がまとまっている[Spring Boot Extension Pack](https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack)を入れます。必要に応じて不要な拡張機能は無効にしてください。

- Java Extension Pack
  - Language Support for Java
  - Debugger for Java
  - Java Test Runner
  - Maven for Java
  - Java Dependency Viewer
  - Visual Studio IntelliCode
- Spring Boot Extension Pack
  - Spring Boot Tools
  - Concourse CI Pipeline Editor
  - Cloudfoundry Manifest YML Support
  - Spring Intializr Java Support
  - Spring Boot Dashboard



## プロジェクトの作成

Spring Boot Tools を入れたことで、VSCodeでSpringBootのコマンドが使えるようになっています。

### コマンド
 
コマンドパレットで`Spring Initializr: Generate a Maven Project`を実行（対話式でプロジェクトを作成していきます）

- `Java`を選択
- パッケージ名を入力（例．com.example）
- プロジェクト名を入力
- SpringBootのバージョンを選択
- 依存関係を選択
    - web
    - thymeleaf
- プロジェクトの保存先を選択

### ディレクトリ構成

  ```none:ディレクトリ構成
  src/
    └ main/
    │  ├ java/
    │  │  └ com/
    │  │     └ example/
    │  │        └ {アプリケーション名}/
    │  │          └ DemoApplication.java
    │  └ resource/
    │     ├ static/
    │     └ templates/
    └ test/
  target/
  .gitignore
  mvnw
  mvnw.cmd
  pom.xml
  ```

## アプリケーション実行

### `src/main/java/com/example/{アプリケーション名}/controller`ディレクトリにIndexController.java を作成

  ```java:IndexController.java
  package com.example.{アプリケーション名}.controller;
  
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.web.bind.annotation.RequestMapping;
  
  @Controller
  public class IndexController {
  
      @RequestMapping("/")
      public String index(Model model) {
          model.addAttribute("msg", "Hello");
          return "index";
      }
  }
  ```

### `src/main/resources/templates`ディレクトリにindex.htmlを作成

  ```html:index.html
  <!DOCTYPE html>
  <html>
  <head>
      <title>ホーム</title>
  </head>
  <body>
      <div>
          <p>コンテンツ</p>
      </div>
  </body>
  </html>
  ```

### `デバッグ > デバッグの開始` を選択

  - 環境の選択で`java`を選択(初回のみ)
  - `launch.json`が生成される(初回のみ)
  - 再度、`デバッグ > デバッグの開始`を選択(初回のみ)

### http://localhost:8080/にアクセスする

# ヘッダー・フッターの作成

## 依存関係の追加

SpringBootのテンプレートエンジンであるthymeleafのLayout Dialect機能を使うために依存関係に`thymeleaf-layout-dialect`を追加する。ついでに`bootstrap`と`jquery`も追加する。

- `pom.xml`に以下の内容を追加

  ```xml
  <dependency>
  	<groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
  </dependency>
  
  <dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.7</version>
  </dependency>
  
  <dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>1.12.4</version>
  </dependency>
  ```

## テンプレートを作成

### 実装

- `src/main/resources/template/layouts/layout.html`を作成する。

  ```html
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <head>
      <title layout:title-pattern="$CONTENT_TITLE | $LAYOUT_TITLE">Thymeleaf de layout</title>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" media="all" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
      <link rel="stylesheet" media="all" th:href="@{/css/style.css}" />
  </head>
  <body>
      <div layout:replace="~{layouts/header::header}"></div>
  
      <div id="content" class="clearfix">
          <div class="container">
              <div layout:fragment="content" th:remove="tag"></div>
          </div>
      </div>
      <div layout:replace="~{layouts/footer::footer}"></div>
  
      
      <script type="text/javascript" th:src="@{/webjars/jquery/1.12.4/jquery.min.js}"></script>
      <script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
  </body>
  </html>
  ```

  

#### `src/main/resources/template/layouts/header.html`を作成する。

  ```html:header.html
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <body>
      <nav class="navbar navbar-default" layout:fragment="header">
          <div class="container-fluid">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="/">SpringBoot練習</a>
              </div>
              <div class="collapse navbar-collapse" id="navigation">
                  <p class="navbar-text navbar-right">ログイン中</p>
              </div>
          </div>
      </nav>
  </body>
  </html>
  ```

  

#### `src/main/resources/template/layouts/footer.html`を作成する。

  ```html:footer.html
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <body>
      <div id="footer" layout:fragment="footer">
          <footer class="text-center">
              <small class="text-muted">Copyright(C) koukibuu3, All rights reserved.</small>
          </footer>
      </div>
  </body>
  </html>
  
  ```



#### `src/main/resources/templates/index.html`を以下のように修正する。

  ```html:index.html
  <!DOCTYPE html>
  <html
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">
  
  <head>
      <title>ホーム</title>
  </head>
  <body>
      <div layout:fragment="content">
          <p>コンテンツ</p>
      </div>
  </body>
  </html>
  ```

  

### 解説

`layouts/header.html`に以下を記入することで、

```html:header.html(一部)
<div layout:fragment="header"></div>
```

`layout.html`に記入した以下のタグが置き換わる。

```html:layout.html(一部)
<div layout:replace="~{layouts/header::header}"></div>
```

※ `th:replace`の代わりに`th:include`を使用することで、`layout.html`のタグの内部を書き換える。



レイアウトを読み込む個別ページ側(index.html)で以下の記述をすることで、`layouts/layout.html`の記述を反映することができる。

```html:index.html(一部)
<html
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layouts/layout}">
```

導入

拡張機能のインストール

以下の拡張機能をインストールします。
Javaを使うのでJava系の拡張機能がまとまっているJava Extension Packと、SpringBootの拡張機能が

Engineer‘s Blogkoukibuu3