OmniAICreator/Qiita-1.07M huggingface dataset:
【Swift5】Googleフォームにあらかじめ自動入力する

## はじめに

アプリの不具合の報告などで、OS情報やアプリのバージョンなどの情報があるととても助かりますよね。
そこで今回は、それらの項目を自動入力してくれるフォームの作り方を紹介します。

## 方法

Googleフォームには、自動入力済みのURLを発行する機能があります。
このURLの一部をSwiftで書き換えればいいのです。

### 1. フォームを作成

[こちら](https://docs.google.com/forms/)からフォームを作成してください。
作成方法については説明を割愛させていただきます。

### 2. URLを生成

フォーム作成画面の右上にある、・が縦に3つ並んだメニューボタンから、「事前入力したURLを取得」をクリックします。
するとフォーム入力画面に飛ぶので、事前入力しておきたい項目に分かりやすい文字列を入力しておきます。
<img width="662" alt="スクリーンショット 2020-05-25 21.17.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626965/7f39d972-1b14-3014-12d1-8f0af16c0198.png">
「リンクを取得」をクリックするとURLが生成されます。
画面左下の「リンクをコピー」を押してコピーしておきましょう。
<img width="581" alt="スクリーンショット 2020-05-25 21.20.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626965/67ea4db3-7c9f-b252-fa46-2de8983dcb7d.png">
自分の場合はこのようなリンクになりました。

```
https://docs.google.com/forms/d/e/（省略）/viewform?usp=pp_url&entry.1009686721=osversion&entry.1835889012=appversion
```

### 3. OS情報、アプリのバージョンを取得
OS名は`UIDevice.current.systemName`、OSバージョンは`UIDevice.current.systemVersion`で取得可能です。（どちらもStringです）

```
let os = "\(UIDevice.current.systemName)%20\(UIDevice.current.systemVersion)"
let version = Bundle.main.object(forInfoDictionaryKey: "CFBundleShortVersionString") as? String
```
この文字列はURLの一部となるため、スペース（空白）は使ってはいけません。
代わりに`%20`を使用すると空白になります。

#### 追記　機種の名前を取得する
正確な機種名（例えば「iPhone XS」など）を取得するため、[YMTGetDeviceName](https://github.com/MasamiYamate/YMTGetDeviceName)というライブラリを使用します。

```
var device = YMTGetDeviceName.share.getDeviceName()
if let devName = device.range(of: " ") {
  device.replaceSubrange(devName, with: "%20")
}
```
rangeを使って、空白を`%20`に置き換えています。

### 4. URLの書き換え

先ほどのURLのosversionの部分を`\(os)`に、appversionの部分を`\(version)`に書き換えるだけです。

```
let url = URL(string:"https://docs.google.com/forms/d/e/（省略）/viewform?usp=pp_url&entry.1009686721=\(os)&entry.1835889012=\(version!)")
UIApplication.shared.open(url! as URL)
```
## 動作確認

<img width="375" alt="Simulator Screen Shot - iPhone 11 Pro - 2020-05-25 at 22.11.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626965/94662a83-0ff2-f625-6ff0-e731328e8397.png">
問題なく表示されています。
ユーザーの手間を省けるので、試す価値はあると思います！
Failed to find Chrome binary について

#前提
本日学んだことを書いていきます。
Docker
Ruby on Rails
Ruby

#本題
Capybara でのテスト実行時に以下のようなエラーが出てしまい、ハマりました。。。

```
Failure/Error: visit login_path
          
          Webdrivers::BrowserNotFound:
            Failed to find Chrome binary.
```
Chrome binary が見つからない？
Chrome がないのが原因？
Docker環境内のためChromeが入っていないのかなと思いました。

#解決方法

```capybara.rb
#変更前
Capybara.register_driver :chrome_headless do |app|
  options = ::Selenium::WebDriver::Chrome::Options.new

  options.add_argument('--headless')
  options.add_argument('--no-sandbox')
  options.add_argument('--disable-dev-shm-usage')
  options.add_argument('--window-size=1400,1400')

  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end

Capybara.javascript_driver = :chrome_headless

RSpec.configure do |config|
  config.before(:each, type: :system) do
    driven_by :rack_test
  end

  config.before(:each, type: :system, js: true) do
    driven_by :chrome_headless
  end
end
```

```capybara.rb
#変更後
Capybara.register_driver :chrome_headless do |app|
  options = ::Selenium::WebDriver::Chrome::Options.new

  options.add_argument('--headless')
  options.add_argument('--no-sandbox')
  options.add_argument('--disable-dev-shm-usage')
  options.add_argument('--window-size=1400,1400')

  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end

Capybara.javascript_driver = :chrome_headless

RSpec.configure do |config|
  config.before(:each, type: :system) do
    driven_by :rack_test
  end

  config.before(:each, type: :system, js: true) do
    if ENV["SELENIUM_DRIVER_URL"].present?
      driven_by :selenium, using: :chrome, options: {
        browser: :remote,
        url: ENV.fetch("SELENIUM_DRIVER_URL"),
        desired_capabilities: :chrome
      }
    else
      driven_by :selenium_chrome_headless
    end
  end
end
```

```docker-compose.yml
#変更前
version: '3'
services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/app
    ports:
      - 3000:3000
    depends_on:
      - db
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
volumes:
  db-volume:
```


```docker-compose.yml
#変更後
version: '3'
services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/app
    ports:
      - 3000:3000
    depends_on:
      - db
    tty: true
    stdin_open: true
    environment: #以下追記
    - "SELENIUM_DRIVER_URL=http://selenium_chrome:4444/wd/hub"
  selenium_chrome:
    image: selenium/standalone-chrome-debug
    logging:
      driver: none
  db:
    image: mysql:5.7
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
volumes:
  db-volume:
```

上記設定で解決しました。
【MarkovAO】括弧列テクについて知っていることをまとめてみた

# これは何？
[MarkovAO](https://mao.snuke.org/)で使える括弧列を使ったテクニックについて、知っていることをまとめてみます。

2020/06/01 追記
・[規則の誤爆で括弧列が化けることを利用したテク](#規則の誤爆で括弧列が化けることを利用したテク)
2020/06/16 追記
・[小ネタ](#小ネタ)

# Maxを取る
以下の規則で括弧列の深さのMaxを取ることができます。
)(:

例えばOK/NGを判定する問題等で、OKを()、NGを(())に対応させることで、NGを含むなら結果はNG、そうでないならOKとする処理が実現できます。

例
・()()(())()(())()()(())
)(:を適用していくと、(())だけが残る。

・()()()()()()()()
)(:を適用していくと、()だけが残る。

# 1規則で複数の文字を消す
a, b, c といった文字を規則中で使っている場面で、
これを ()(), (())(()), ((()))((())) と置き換えてみます。

処理終了後にa:、b:、c:で不要になった文字を消すことをする場合、
():の1規則のみで上記3つとも消す事ができ、規則の節約になります。

これについては、そもそも複数の文字を使わないように最適化した方が有効な場面が多いと思われるため、使いどころは多くないかもしれません。

# 文字のグループ化
グループ化が適切な日本語か分かりません……
以下の状況を考えてみます。

`$ooooa$ooob$ooooc$ooob`
aまたはbの左にあるoを消去したいが、cの左にあるoは残したい。
そのままやると以下のようになると思います。
oa:a
ob:b

そこで、aを(())、bを(()())、cを((()()))に置き換えて考えてみます。

`$oooo(())$ooo(()())$oooo((()()))$ooo(()())`
o(():(()

この1規則で同じ事が実現できます。
(()から始まる括弧列はa,bのみでcにはマッチしないため。

# yes/no判定問題に対する応用
(をyeに、)をsに置き換える事で終了規則を節約できる場合があります。

例えば以下のような規則が使われている場面で、
～～～～
)(:
(())::no
()::yes

(をye、)をsに置き換えてみると、()::yesの規則が不要になります（このままの形で使えない場合もある）。
～～～～
sye:
yeyess::no

# 規則の誤爆で括弧列が化けることを利用したテク
以下の状態から ^ を > に、$ を < に変換することを考えてみます。
before `^oooxxx$`
after `>oooxxx<`

真っ当にやると以下の規則で変換することになると思います。
～～～
^:>
\$:<
～～～

ここで、^を()に、$を(())に、<を(>)に置き換えて考えてみます。
before `()oooxxx(())`
after `>oooxxx(>)`
～～～
():>
～～～

少ない規則で同じ状況が再現できます。

# 小ネタ
yes/no判定問題に括弧列を使いたいけど、どう頑張っても最終的に`((()))`とか`(())`とかになってしまい、[yes/no判定問題に対する応用](#yesno判定問題に対する応用)のような事ができない状況への対処方法です。
※`)(:`の規則を使っている前提です。

括弧列全体を`()))`～～～`((()`で囲むと、この例の場合は深さ3までの括弧列が打ち消されて、最後に`()`だけが残る状態になり、yes/noに当てはめることができるようになります。
yesと判定したい場合は括弧列内で`(((())))`を生成するか、上の`((()`の後ろに`(())`を追加します。
すると、括弧列の深さのMaxに関わらず、noの場合は最終的に`()`、yesの場合は`(())`が実現できます。


# 結果
規則が縮む！！！
【xlsxwriter】pandas+xlsxwriterで条件付き書式Excelシート作成【pandas】メモ

# 概要
* 客先がExcelシートでヒートマップを見たがっていた。
* openpyxlだと、実装できなかった。（やり方が悪かった？）
* xlsxwriterをpandasのto_excelのengineとして使用
* 条件付き書式設定をxlsxwriterで行う
* セル指定は、`xl_range`を用いる。（セルを数値で指定）

# ソースコード
```python:全体
# xl_rangeを使えば、"B2:C3"をxl_range(2,2,3,3)と表現できる。
from xlsxwriter.utility import xl_range
import xlsxwriter
import pandas as pd
import numpy as np

# test用データフレーム
df = pd.DataFrame(np.arange(0,9,1).reshape(3,3))

# workbook生成
workbook = xlsxwriter.Workbook(r'./output_storage/hoge.xlsx')
# xlsxwriterでは、mode='a'は使えない。
writer = pd.ExcelWriter(r'./output_storage/hoge.xlsx',mode='w',engine='xlsxwriter')
sheet_name = 'hoge'

# データフレームをシートに書き込む
df.to_excel(writer,sheet_name=sheet_name,startrow=0,index_label='huga')

# 条件付き書式の設定
ws = writer.sheets[sheet_name]
ws.conditional_format(xl_range(2,2,3,3),
                {'type': '3_color_scale',
                       'min_color': "#44c242",
                       'mid_color': "#ebeb44",
                       'max_color': "#eb4444"})
writer.close()
```

* こんな感じで、エクセルに条件付き書式設定を行うことができる。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148213/4bd4b1fd-3718-d3f2-5a7e-f9757b0e704f.png)

# まとめ
* Excelでほしがるお客さんがまだまだ多いため、勉強する必要があるかもしれない。
* pandasとの親和性もよく、比較的柔軟に対応できそうだった。
SwiftUI TextField 日本語入力の不具合

先日、Xcode 11.5 がリリースされましたが、`TextField` の日本語入力の不具合は解消されていません :alien:
仕方ないのでしばらくは、`UITextField` を `UIViewRepresentable` から利用することにしました。

```swift
final class _TextFieldCoordinator: NSObject {
    var control: _TextField

    init(_ control: _TextField) {
        self.control = control
        super.init()
        control.textField.addTarget(self, action: #selector(textFieldEditingDidBegin(_:)), for: .editingDidBegin)
        control.textField.addTarget(self, action: #selector(textFieldEditingDidEnd(_:)), for: .editingDidEnd)
        control.textField.addTarget(self, action: #selector(textFieldEditingChanged(_:)), for: .editingChanged)
        control.textField.addTarget(self, action: #selector(textFieldEditingDidEndOnExit(_:)), for: .editingDidEndOnExit)
    }

    @objc private func textFieldEditingDidBegin(_ textField: UITextField) {
        control.onEditingChanged(true)
    }

    @objc private func textFieldEditingDidEnd(_ textField: UITextField) {
        control.onEditingChanged(false)
    }

    @objc private func textFieldEditingChanged(_ textField: UITextField) {
        control.text = textField.text ?? ""
    }

    @objc private func textFieldEditingDidEndOnExit(_ textField: UITextField) {
        control.onCommit()
    }
}

struct _TextField: UIViewRepresentable {

    private let title: String?
    @Binding var text: String
    let onEditingChanged: (Bool) -> Void
    let onCommit: () -> Void

    let textField = UITextField()

    init(title: String?, text: Binding<String>, onEditingChanged: @escaping (Bool) -> Void = { _ in }, onCommit: @escaping () -> Void = {}) {
        self.title = title
        self._text = text
        self.onEditingChanged = onEditingChanged
        self.onCommit = onCommit
    }

    func makeCoordinator() -> _TextFieldCoordinator {
        _TextFieldCoordinator(self)
    }

    func makeUIView(context: Context) -> UITextField {
        textField.placeholder = title
        textField.delegate = context.coordinator
        return textField
    }

    func updateUIView(_ uiView: UITextField, context: Context) {
    }
}
```
:panda_face:
【メモ】Python WebAPI

#multipart/form-data でファイルを POST する
以下の例では、画像、csvファイルをPOST

```workspace/templates/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>API Sample</title>
  </head>
  <body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input name="user-file" type="file" accept="image/png, image/jpeg, .csv">
        <button type="submit">submit</button>
      </form>
  </body>
</html>
```
accept：ファイルを選ぶ時のフィルターで、何かを制限するものではない。（特に指定しなくてもいい）

```workspace/server.py
from flask import Flask, render_template, jsonify, request
import numpy as np
import pandas as pd
import mimetypes

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['user-file']
    if not file: return jsonify(message='no file!')

    extension = mimetypes.guess_extension(file.content_type)
    print("extension:", extension)

    if extension == '.csv': //★★★
        df = pd.read_csv(file)
        print(df)
        return jsonify(message='csv!')
    elif extension == '.png' or extension == '.jpeg':
        stream = file.stream
        img_array = np.asarray(bytearray(stream.read()), dtype=np.uint8)
        return jsonify(message='image!')
    
    return jsonify(message='no support file!')

if __name__ == '__main__':
    app.run(debug=True)
```
★★★：
csvファイルは、mimetypeが「text/csv」となるはずだが、chromeでは「application/octet-stream」となる。
「application/octet-stream」は、ファイルタイプが不明な場合のmimetype。
ただし、pandasでdataframeとして読み込むことはできる。

- 参考

[よくある MIME タイプ](https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)
[Python, mimetypesでMIMEタイプをファイル名（拡張子）から推定](https://note.nkmk.me/python-mimetypes-usage/)

- エラー回避

[pandasでcsvが読み込めない](https://programming-info.dream-target.jp/python_flask)

#VSCodeでデバッグするときの設定
PyCharm、VSCodeなどを使用している場合、ブレークポイントでコードをステップ実行できます。

```.py
app.run(debug=True, use_reloader=False)
```
- 参考

[Flaskアプリをデバッグする方法](https://www.it-swarm.dev/ja/python/flask%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/1073013229/)
Flutter AndroidStudioでProfileビルドする方法（デバッグ時のもっさり感を消して動かす方法）

Flutterでデバッグした時のもっさり感が気になっていたのですが、開発環境から普通にビルドするとデバッグモード(JITビルド)で動くらしく、実行時に重くなるとのことです。
Profileビルド(AOTビルド)なるものを試すとだいぶヌルヌルになったので、「Flutter激重では...？」と心配な方は試してみてください。

# AndroidStudioでProfileビルドする方法
[メニュー]→[実行]→[プロファイル 'main.dart']　で動きました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560594/68d4d987-9f3b-99e7-bd3d-5b10f2801f6b.png)

# 補足
- Profileビルドの状態ではホットリロードやデバッグモードは使えません。
- 右上のDebugの帯は勝手に外れるみたいです。

# 参考
https://flutter.dev/docs/testing/build-modes
https://medium.com/flutter-jp/flavor-b952f2d05b5d
PC版twitter.comからうざい広告・脳死トレンドなど余計な表示を抹消する方法

# 広告がうざい・トレンドを見るのがつらい
広告増えすぎワロタです。表示数どんどん増えている。広告は仕方ない部分もあるけど、目に毒なものも多くてしんどいです。
トレンド欄もひどい。否応なく目に入る位置にあるから鬱陶しい。
※ 下記手順行っても見たくなったら「話題を検索」をクリックして横目にすることはできる。

# 対応する環境
① Google ChromeやChrome拡張を使えるブラウザ
② ↑に加えてUser CSSなどユーザーCSSが使えるプラグイン。
https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb
オンオフし易いしUIがわかりやすい。

一応、Chromeに限らずユーザーCSSが使える環境ならなんでも大丈夫だと思う。
Safariなんかは下のコードを.cssの拡張子でテキスト保存して環境設定→詳細に食わせるだけ。

# 使うコード
```
/* カラムの大きさを宣言,値は任意で設定可能 */
/* --full-width→全体の幅 */
/* --third-colmn-width→DM/設定などの画面で3つ目のカラムの幅 */
:root {
  --full-width: 700px;
  --third-colmn-width: 430px;
}
/* 右部サイドバーを非表示 */
[data-testid="sidebarColumn"] {
    display: none !important;
}
/*右部サイドバーを非表示にしたので、中央カラム部分が大きくなりすぎる */
/* 全体幅を調整する */
main .r-rthrr5,
main .r-113js5t {
    width: var(--full-width);
}
/* 全体幅を調整することによってDM/設定などの画面で2つ目のカラムが小さくなる */
/* 中央列、右列それぞれにサイズを指定する */
main .r-rthrr5 .r-1ye8kvj:nth-last-child(2),
main .r-113js5t .r-1ye8kvj:nth-last-child(2){
    width: calc(100% - var(--third-colmn-width));
}
main .r-rthrr5 .r-1ye8kvj+.r-1ye8kvj,
main .r-113js5t .r-1ye8kvj+.r-1ye8kvj {
    width: var(--third-colmn-width);
}
/* タイムライン部分のサイズは100%なので上書き */
.r-1ye8kvj[data-testid="primaryColumn"],
.r-1ye8kvj[data-testid="primaryColumn"] .r-1ye8kvj {
    width: 100% !important;
    max-width: 100%;
}
/* 広告・おすすめ・トピックを非表示に */
[class$="css-1dbjc4n"][data-testid="placementTracking"],
[class$="css-1dbjc4n"][aria-label$="のツイート"] [data-testid="UserCell"],
[class$="css-1dbjc4n"] [aria-label="タイムライン: Carousel"] {
    height: 0 !important;
    overflow: hidden;
    margin-top: -1px;
    padding: 0
}
/* プロフページ内[プロモーションする]ボタンを非表示に */
a[href$="quick_promote_web/intro"] {
  display: none;
}
/* 認証済み組織ボタンを非表示に */
a[aria-label="認証済み組織"] {
  display: none;
}
```

# User CSSでの設定方法
① 上記リンクからUser CSSをインストール
② http://twitter.com/home にジャンプ
③ 右上のUser CSSのアイコン[CSS]←こんなやつ をクリック
⑤ 上のコードをコピペ
⑥ User CSSのアイコン[CSS]←こんなやつ をクリックして消す

# ポイント
・最右部の表示は丸々消すコードになってます。
・twitter.comの仕様変更などで使えなくなる、またはもしくは表示がおかしくなるかも。変だと思うことがあったら「ON□」トグルボタンを押すとオンオフできます。
・700px、430pxの部分を調整すると画面幅を調節できます。
・殴り書きなんで、もっといいCSSがあったら教えてください。
AWS Elemental MediaPackage とは

#AWS Elemental MediaPackage とは
> MediaPackage は、AWS クラウドで実行されるジャストインタイムビデオパッケージ化および配信サービスです。MediaPackage では、安全性、スケーラビリティ、信頼性に優れたビデオストリームをさまざまな再生デバイスやコンテンツ配信ネットワーク (CDN) に配信できます。

##概念と用語
* ジャストインタイムパッケージング
* 配信サービス
* パッケージャ
* ソースコンテンツ
* ストリーム
* トラック
SQL『サブクエリ』について

# サブクエリとは


>データベースなどの問い合わせ（クエリ）文の内部に含まれる、別の問い合わせ文のこと。
よく用いられるのはSQLのSELECT文を利用したサブクエリで、ある条件に基づいて抽出したデータを他のクエリの対象や条件の記述に使うことができる。サブクエリ中の条件などの記述にさらにサブクエリを用いて、何段階も入れ子状にすることもできる。




##join句との比較

```sql:
/*! join句 */

SELECT OrderID FROM Sales.OrderDetail AS SOD
INNER JOIN Production.Product AS Pdt
ON SOD.ProductID = Pdt.ProductID
WHERE Pdt.Name = 'desk'

/*! 
サブクエリの構文
SELECT 列名 FROM テーブル名

　WHERE 列名 演算子 (サブクエリ)
 */


SELECT OrderID FROM Sales.OrderDetail
WHERE ProductID = 
(SELECT ProductID FROM Production.Product
 WHERE Name = 'desk')

```


###複数の結果を返すサブクエリ
　サブクエリとしてSELECT文を記述する際、単体の結果を返すSELECT文と複数行にわたる結果を返すSELECT文が存在する。単一の結果であれば、条件式を利用できます。結果が複数行となる場合、この条件式は利用できず、INを用いる必要がある

```sql:
SELECT ProductID FROM Production.Product WHERE ProductModelID = 15
/*!
複数の結果を出力する。
SELECT文をサブクエリとして埋め込む場合、
IN句を利用した次のような構成となる。
 */


SELECT OrderID FROM Sales.OrderDetail
WHERE ProductID IN 
(SELECT ProductID FROM Production.Product
 WHERE ProductModelID = 15)

```


サブクエリでのSELECT文は複数の結果を出し、一致するデータが出力される。
結合の場合、同一の値を得れるが、サブクエリを利用した方が構成が簡潔になる。

###サブクエリが使えないパターン
自身の集計を使った更新を実行する場合はサブクエリが使えない。解決法はサブクエリ内にサブクエリを入れるか、サブクエリを結合する。
EXISTSの使用方法

# 「EXISTS」とは

「EXISTS」は、「サブクエリ」を扱う仕組み。SELECT文で取得したものを、SELECTやUPDATE処理で使用することを指す。



```sql:

/*! 構文 */

SELECT [表示要素名] FROM [テーブル名]
  WHERE EXISTS (
    [入れ子にするSELECT文]
  );

```


### サンプル

```sql:

SELECT * FROM company WHERE EXISTS (
    SELECT * FROM company_sub
      WHERE company.id = company_sub.id AND user_sub.name = "A社"
  );

```


###テーブル同士のひも付き


```sql:

WHERE company.id = company_sub.id AND company_sub.job = "A社"
```


「company.id = company_sub.id」部分で、テーブル同士のひも付けを指定し、これによってcompanyテーブル側と、company_subテーブル側で連携が取れており、この記述がないと以下のように全部が表示されてしまう。


```sql:
SELECT * FROM company WHERE EXISTS (
    SELECT * FROM company_sub
      WHERE company_sub.job = "A社"
  );
```

テーブル同士のひも付きの漏れがないか注意が必要。



## 参考文献


- [【SQL】5分でわかる！ EXISTSでサブクエリを扱う方法](https://www.sejuku.net/blog/73615)
【MarkovAO】マルコフアルゴリズムの典型テクニックまとめてみた

# 前書き
初心者用&備忘録(**ネタバレを含みます**)
**空白をわかりやすいように_で示します**
[MarkovAO](https://mao.snuke.org/tasks/)のテクニック集的なあれです
# カーソルテク
sという文字の後ろのみを変更するという規則を使い規則の暴発を防いだり色々する基本テク
以下はMarkovAOの0009の例
s0:1s
s1:0s
s::
_:s
# 文字送り(仮称)
文字を前や後ろに持っていきたい場合、カーソルを付けて、
s01:1s0
s10:0s1
s00:0s0
s11:1s1(後ろに持っていく場合)
とするのがすぐに思いつくと思うが、これでは文字数が増えた際O((文字数)^2)の命令数がかかって効率が悪い、そこで
s0:o
s1:oo
o0:0o
o1:1o
o:0
oo:1
というように一旦oに置き換えてから前や後ろに持っていき最後に0や1に変える事で、O((文字数))で文字を端に寄せることが出来る

# 括弧テク
色々奥が深い(らしい)テク
一番初歩的なのは
(((())))((()))
から)(を繰り返し取除くと
(((())))となることを利用して最大値を求めるテク
他にも色々あります
[【MarkovAO】括弧列テクについて知っていることをまとめてみた
](https://qiita.com/yupiteru/items/bb7f64c1d6a6cd8183b6)
ユピテルさんがわかりやすくまとめてくれました！！

# (原始的な)大小比較テク
1~5の数字の大小は
oooo|ooo
の様にシンプルな丸と仕切りで表してから
ooooo|ooooo
oooo|oooo
ooo|ooo
oo|oo
o|o
をなにかに置き換えてoが残ったほうと考える事ができる
左を数字のままにして
5ooooo
4oooo
3ooo
2oo
1o
を考えるのも良い

# oの数をNで割った余りに置き換える
例えば3で割った余りは
oooo:o
とする、これだと3%3=3じゃないか！
と思うがそちらのほうが都合がいい場合が多い
もちろん3%3=0のほうが都合がいい場合はooo:_とする

# 文字数を減らす
golfを狙う場合基本的には使用する文字数を減らしたほうがいい
例えば
s010100101t0101001
の様な状況でsを左から右に持って行かないと行けない場合
st:tsを省くため、
tに当たる文字を予め10110111011110111110にしておくという手がある
01と混じらないのかと思うが、これは適切に扱えば混じらない
逆にraceの場合積極的に文字数を増やしておく事で暴発を防げる

# 足し算の基本
右から左に足すのを心がける
下の桁は左だからそれはそう(fastestがどうなってるかはしらない)

# あとがき
adhocの中でも特に汎用性の高いテクをまとめたつもり

...この記事いる？
Javascriptの復習（2）

# この記事について
Javascriptの復習（2）というタイトル通り2回目です。Javascriptの復習（1）でも書きましたが、初学者がアウトプットとして投稿した記事なので無視してください。

# 繰り返し処理

例えば、1~100までの数字を出力する場合、2,3行目を100回書けば出力できますが、はっきり言って非効率的です。

```script.js
let number = 1;
//下の2行を繰り返せば
console.log(number);
number += 1;

```
繰り返し処理を用いることで短いコードで済ます事ができます。

```script.js
let number = 1;
//やっている事自体は上のコードを100回繰り返すのと同じ。
while(number <= 100) {
  console.log(number);
  number += 1;
}
```

# for文
while文以外にも繰り返し処理ができるコードの書き方があります。for文はより短く書く事ができ、括弧内で"変数の定義"、"繰り返しの条件"、"変数の更新"の全てを書きます。

```script.js
let number = 1;
//左から順番に"変数の定義"、"繰り返しの条件"、"変数の更新"　セミコロンで区切る
for(let number = 1; number <= 100; number += 1) {
  console.log(number);
}
```

# 条件分岐 (if文)
ある条件が成り立つ時にだけ処理を行ないたい時に使用します。

```script.js
const number = 12;
//()内が条件式で{}内が条件を満たした時と行なわれる処理です。
if(number >= 10) {
  console.log("numberは10より大きい");
}

```

条件を満たさなかった場合の処理を書きたいときはelseを使用します。

```script.js
const number = 7;
if(number >= 10) {
  console.log("numberは10より大きい");
} else {
//条件を満たしていない時に行なわれる処理です。
  console.log("numberは10より小さい");
}

```

さらに条件を追加したい時はelse ifを使用します。

```script.js
const number = 7;
if(number >= 10) {
  console.log("numberは10より大きい");
} else if(number >= 5) {
//ifの条件を満たしていないがelse if内の条件を満たしている時に行なわれる。
  console.log("5より大きく10より小さい")
} else {
  console.log("numberは5より小さい");
}
```

# switch文
if文と同様に条件分岐の処理が行なえる書き方ですが、定数の値によって処理を分けたい時に使用するとif分よりもコードが短くなります。

```script.js
const animal = "猫";
//括弧内に変数や定数等の条件の値を記載
switch(animal){
  case"猫"://ここはコロン
//条件の値がcaseに書いた値と一致していたら行なわれる処理
    console.log("ニャーと鳴く")；
    break;//breakで処理の終わりをハッキリさせる。
}
```
条件の数だけcaseを追加してください。

```script.js
const animal = "猫";
//括弧内に変数や定数等の条件の値を記載
switch(animal){
  case"猫"://ここはコロン
    console.log("ニャーと鳴く")；
    break;//breakで処理の終わりをハッキリさせる。
  case"犬"://しつこいけどここはコロン
    console.log("ワンと鳴く")；
    break;
  case"カラス"://コロン!!
    console.log("カァーと鳴く")；
    break;
}
```

どの条件にも該当しない時の処理は、default以下に書きます。

```script.js
const animal = "猫";
//括弧内に変数や定数等の条件の値を記載
switch(animal){
  case"猫"://ここはコロン
    console.log("ニャーと鳴く")；
    break;//breakで処理の終わりをハッキリさせる。
  case"犬"://しつこいけどここはコロン
    console.log("ワンと鳴く")；
    break;
  case"カラス"://コロン!!
    console.log("カァーと鳴く")；
    break;
  default:
//if文のelseのようなもの
    console.log("そのような動物は存在しません。");
    break;
}
```

# 複数の条件の書き方（and と or）
括弧内に複数の条件を書く方法があります。

```script.js
const number = 53;
//&&を挟むと両方の条件を満たした時に処理が行なわれる条件式になる(andの条件)。
//||を挟むと片方の条件を満たしていれば処理が行なわれる(orの条件)。
if(number >= 10 && number < 100) {
  console.log("numberは2桁です");
} else {
  console.log("numberは1桁です");
}
```

#　感想
既にRubyを学習した後だったお陰かすんなりと頭の中に入った。
この勢いでJavaScriptの全容を把握できたらいいなと思います。
C#超入門 C#とは

#C＃
**マイクロソフトが開発したプログラミング言語。**
書式がC++に近い書式。.NET Framework上で動作する

**C#でやれる事。**
ウェブサービスの構築からスマートフォンアプリやゲーム開発まで幅広く活用
**採用例：**
・マイクロソフトの検索エンジンBing
・ゲームの開発環境のUnity

**C#の特徴**
オブジェクト指向型のプログラミング言語
.NET Framework を活用できる高品質なプログラムの作成が容易
**「オブジェクト指向」**を採用している。

**オブジェクト指向**
保守性、汎用性、拡張性、独立性を実現するためのプログラミング言語
・保守性
⇒既にあるコードの整理が容易になる
⇒必要なデータ・振る舞いのみを提供できる。
（振る舞い：メソッドを使って、定義する。）

**・汎用性**
⇒既に記述されたコードを修正すること無く再利用が容易。

**・拡張性**
⇒既に記述されたコードを修正せずに上書き、書き足すことが容易。

**・独立性**
⇒オブジェクト同士がお互いに疎遠な関係になることで保守・汎用化が容易になる(簡単)
⇒修正や追加を加えた際に他のオブジェクトへの影響を最小限に抑えることが出来る。

オブジェクト指向が出来るまで
**・機械語(マシン語)**
⇒コンピュータは機械語しか理解できない。昔は人間が機械語でプログラムを記述。
⇒バイナリ(数値）の羅列で人には理解しにくい。
⇒**例：0101010100やA10010、8B160210**など
**・アセンブリ言語**
⇒組立（用）言語の意味を持つ。
⇒アセンブリ言語で書いたプログラムを機械語プログラムに変換することをアセンブルするという。
⇒アセンブルするプログラムをアセンブラという。
**・高水準言語**
⇒構造体／レコード、クラス、集合といった**高水準な抽象データ型**
⇒**抽象データ型**・・・データ型の構造とそれを直接操作する手法として定義されたデータ型。

**・構造化プログラミング**
⇒コンピュータプログラムの開発や理解、修正を円滑に行えるようプログラムを整理された構造の組み合わせによって構成すること。
⇒基本的に、**順接、反復、分岐**の**三つの制御構造**による処理の流れを記述する。
⇒・**順接**・・・ステートメントを順々に処理
⇒・**選択**・・・条件式の結果に従い次に実行する文(コード)またはブロック(文を纏めた物)を選択してフロー(処理の流れ)分岐する
⇒・**反復**・・・特定の条件の間、ステートメントまたはブロック内を繰り返す。
⇒・**サブルーチン**・・・呼び出した次のステートメントに復帰することを前提にして対象ブロックの起点にジャンプする。

**・オブジェクト指向**
⇒グローバル変数や再利用の問題に対応する為に、「クラス」・「ポリモーフィズム」・「継承」が追加された。
⇒**クラス**・・・オブジェクトを生成するための設計図のひな型に沿うとするもの
⇒**ポリモーフィズム(多様性・多態性・多相性)**・・・定数、変数、式、オブジェクト、関数、メソッドなどについて
複数の方に属す売ることを許すという性質を表すもの。
⇒**継承(または拡張)**・・・単純なクラスを基にもっと複雑なクラスを形作る事。

##参考資料
**C#によるアプリケーション開発入門**
**Wikipedia**
AWS Elemental MediaLive とは

#AWS Elemental MediaLive とは
> AWS Elemental MediaLive はリアルタイムの動画サービスで、ブロードキャストおよびストリーミング配信用のライブ出力を簡単に作成できます。

##AWS Elemental MediaLive の詳細
> AWS Elemental MediaLive では、MediaLive を含むライブストリーミングワークフローには 3 つのシステムが含まれています。

* ソースコンテンツの取り込みと変換を行う MediaLive チャネル。
* MediaLive にソースコンテンツ (動画) を提供する 1 つ以上のアップストリームシステム。
* MediaLive が生成する出力の送信先となる 1 つ以上のダウンストリームシステム。

<img width="674" alt="スクリーンショット 2020-05-25 21.24.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321923/679de722-c905-e0ce-7e76-8cd04d533039.png">

> コンテンツの処理を開始するには、チャネルを開始します。チャネルが実行中の場合、入力によって識別されたアップストリームシステムからソースコンテンツを取り込みます。次に、チャネルはその動画 (および関連するオーディオ、字幕、メタデータ) を変換し、出力を作成します。MediaLive は、指定されたダウンストリームシステムに出力を送信します。

##AWS Elemental MediaLive 用語
* CDN
    * コンテンツ配信ネットワーク (CDN) は、オリジンサーバーまたはパッケージャのダウンストリームにあるサーバーのネットワークです。CDN は、コンテンツをオリジンサーバーから数十または数百のネットワークサーバーに配信し、視聴ユーザーにコンテンツを提供します。この分散ネットワークにより、コンテンツを数千人または数百万人の視聴ユーザーに同時に配信できます。
* チャネル
    * MediaLive チャネルは、そのチャネルにアタッチされた入力からソースコンテンツを取り込み、変換 (デコードおよびエンコード) し、新しいコンテンツを出力にパッケージ化します。
* チャネルクラス
    * 各チャネルは、次のいずれかのクラスに属します。
        * 標準クラス – 2 つの処理パイプラインがあるチャネル
        * 単一パイプラインクラス – 1 つの処理パイプラインがあるチャネル
* チャネル設定
    * MediaLive チャネル設定には、チャネルがコンテンツを取り込み、変換して出力にパッケージ化する方法についての情報が含まれています。
* ダウンストリームシステム
    * ダウンストリームシステムは、ワークフローの MediaLive の後に配置される 1 つ以上のサーバーのセットです。ダウンストリームシステムは、MediaLive から出力されるコンテンツを処理します。
* エンコード
    * エンコードは、出力内に存在します。エンコードには、動画、オーディオ、字幕の 3 種類があります。各エンコードには、変換プロセスで作成される 1 つの動画ストリーム、1 つのオーディオストリーム、または 1 つの字幕トラックの指示が含まれています。エンコードによってその特徴は異なります。たとえば、入力から生成される動画エンコードは高解像度のものもあれば、低解像度のものもあります。
* Input
    * MediaLive 入力は、アップストリームシステムと MediaLive チャネルの接続方法について記述された情報を保持します。入力は、MediaLive のエンドポイント (IP アドレス) (アップストリームシステムが MediaLive にプッシュするプッシュ入力の場合)、またはアップストリームシステムのソース IP アドレス (MediaLive がアップストリームシステムからプルするプル入力の場合) を識別します。MediaLive には、ソースコンテンツの形式とプロトコルごとに異なる入力タイプがあります。たとえば、HLS 入力と RTMP プッシュ入力です。
* 入力セキュリティグループ
    * MediaLive 入力セキュリティグループは、許可リストを定義する 1 つ以上の IP アドレスの範囲のセットです。入力に対してコンテンツのプッシュが許可されている IP アドレスの範囲を識別するために、1 つ以上の入力セキュリティグループをプッシュ入力に関連付けます。
* 出力
    * 出力は、出力グループ内に存在します。これは、1 つのセットとして処理するエンコードのコレクションです。
* オリジンサービス
    * オリジンサービスは、ワークフローの MediaLive の後に配置されるダウンストリームシステムの一部である場合があります。MediaLive からの動画出力を受け入れます。
* 出力グループ
    * 出力グループは、MediaLive チャネル内の出力のコレクションです。
* パッケージャ
    * パッケージャは、ダウンストリームシステムの一部である場合があります。MediaLive からの動画出力を受け取り、再パッケージ化します。AWS Elemental MediaPackage はパッケージャです。
* パイプライン
    * MediaLive には、MediaLive 入力と MediaLive チャネル内で処理を実行する 1 つまたは 2 つの独立したパイプラインがあります。
* 再生デバイス
    * 再生デバイスは、ダウンストリームシステムの最終コンポーネントです。これは、視聴者であるユーザーが動画を表示するために使用するデバイスです。
* スケジュール
    * 各 MediaLive チャネルには、関連付けられたスケジュールがあります。スケジュールには、特定の時間にチャネルで実行するアクションのリストが含まれます。
* ソースコンテンツ
    * MediaLive が変換する動画コンテンツ。コンテンツは通常、動画、オーディオ、字幕、メタデータで構成されています。
* アップストリームシステム
    * ワークフローの MediaLive の前にあり、ソースコンテンツを保持するシステム。アップストリームシステムの例としては、インターネットに直接接続されているストリーミングカメラまたはアプライアンス、またはスポーツイベントでスタジアムに配置されるコントリビューションエンコーダーが挙げられます。
VSCodeで単語単位の選択の範囲を変更する

htmlやcssで、id名やクラス名に、-(ハイフン)区切りで単語をつないだ名称を利用することが多いと思う。
VSCodeの初期設定では、ダブルクリックやcommand+D(Mac)で単語を選択するときに、-(ハイフン)区切りの単語は一括で選択できない。

-（ハイフン）区切りの単語を一括で選択したい時は、Word Separatorsの設定から「-」を削除すると、一括で選択できるようになる。

<img width="901" alt="1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606194/7b500ec4-1d1a-250b-2af8-05b777505a1e.jpeg">

上記の方法では、VSCode全体の設定を変更する。

言語によって設定を変えたい時は、settings.jsonに以下のように記載すればよい。
以下の例では、html,css,jsは-(ハイフン)区切りの名称をよく利用するので、「-」を削除。
php,perlは変数名(\$testなど)を\$含めて選択したいので、「$」を削除。
php,perlでは->を利用するので、「-」は残したままにしている。

```json
{
  "[html]": {
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?"
  },
  "[css]": {
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?"
  },
  "[javascript]": {
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?"
  },
  "[perl]": {
    "editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?"
  },
  "[php]": {
    "editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?"
  }
}
```
エアロバイクでストリートビュー進みたい！！ （その2）

## やりたいこと
エアロバイクしながらストリートビューでその場所に行った気になりたい。

エアロバイクでストリートビュー進みたい！！ （その1）
https://qiita.com/dattaman9/items/e875132eab9dd43f1d83
では、右や左に方向転換するのにWiiヌンチャクを使っていたけど、
どうせエアロバイクと有線だし、方向転換ボタンを作ってみた。

（※内容重複なところはそのまま）

### 背景
* 札幌なので、冬は自転車乗れないなー。運動したいなー。
で、エアロバイクを買って2年半。
こんなの。
![K0000788333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634480/df4ae070-88db-a2d0-ec96-3ed0ba877877.png)
ALINCO(アルインコ) コンフォートバイク AFB4309W 8段階負荷調節 折りたたみ機能付 アルインコ(Alinco) 
https://www.amazon.co.jp/dp/B00VHWRXYG/

* 「こころ旅」をみながら、いいなー。チャリオで行きたいなー。　あ、とりあえずストリートビュー見ながらエアロバイクこげばいいじゃん！　と気づく。

### 動機
エアロバイクは、TV兼PCモニターが正面にあるので、ストリートビューを開く。

* USBキーボードをエアロバイクのハンドルに置き、進むたびに↑↑を連打。
　→なんか、カーソルキーしか使わないのにジャマ。
* ころがっていたWiiコントローラー&ヌンチャクをBluetoothでPCに接続。ヌンチャクで↑↑で進む。
　→やっぱり、こいだら前に進ませたい。

と悩んでいたところ、

@ie4　さんの記事を見つけた！　これはすごい。　やってみよー。
https://qiita.com/ie4/items/130308793444bd98179f


## 機能

[前提]
・エアロバイクの機能はこわさない
・GoogleMapのAPIはつかわない。履歴とか特にいいや。
　→エアロバイクをこぐと、ストリートビューが前に進むことだけ。
　→1こぎxxメートルとかの距離はあんまり気にしない。風景がみれればOK。

　となると、↓だけあればいいんだな。
* エアロバイクをこぐと、キーボードの上が入力される
あと、
* エアロバイクのハンドルに、右と左のタクトスイッチをつけ、押すとキーボードの右・左が入力される

## 構成

* Arduino Leonardo 的な、HID キーボードになるArduino
* 100均のステレオコード分岐
* 100均のステレオ延長コード
* タクトスイッチ2つ　（ホームセンターで適当なの）
* 平行コード（同じくホームセンターで適当なの）

で、

### エアロバイクのメーターコードと接続

* ステレオ延長コードをぶちっと切り、コードをArduinoに挿せるように加工
　→ひさしぶりのはんだ付け。
* エアロバイクの本体とモニターの間のコード連結に、ステレオコード分岐をかます
![Up.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634480/f401aa1a-41c8-cd75-fa2f-f613905101d0.png)

* ステレオコード分岐から、加工した延長コードをつなぐ
* ArduinoのGNDとDigital2に、LとRをつなぐ

### 左右スイッチ

* タクトスイッチに、平行ケーブルをつなぐ
* ArduinoのGNDと、右はDigital3, 左はDigital4につなぐ

### 回路図
こんな感じ。
![cycle2_回路図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634480/52406abc-f127-3f7d-3206-a0176d1072bc.png)



## スケッチ
Arduino Leonardoにスケッチを書き込む。

```c:
#include <Keyboard.h>

int BUTTON1 = 2;
int BUTTON2 = 3;
int BUTTON3 = 4;
int HighLow = LOW;

void setup() {
  pinMode(BUTTON1, INPUT_PULLUP); //default High
  pinMode(BUTTON2, INPUT_PULLUP); 
  pinMode(BUTTON3, INPUT_PULLUP); 
  Keyboard.begin();
}

void loop() {
    HighLow = digitalRead(BUTTON1);

  if (HighLow == LOW) {
    Keyboard.press(KEY_UP_ARROW);
    Keyboard.releaseAll();
    delay(400);
  }

  if (digitalRead(BUTTON2) == LOW) {
    Keyboard.press(KEY_RIGHT_ARROW);
    delay(100);
    while(digitalRead(BUTTON2) == LOW);
  }

  if (digitalRead(BUTTON3) == LOW) {
    Keyboard.press(KEY_LEFT_ARROW);
    delay(100);
    while(digitalRead(BUTTON3) == LOW);
  }
  Keyboard.releaseAll();
  delay(100);
}
```

## 動作確認
動いたー！
ぐるぐるすると、進むぞ進むぞ。
右スイッチで右を、左スイッチで左を向くぞー。

行ってみて楽しかったところ

* 久慈→小袖海岸 あまちゃん好きとしては欠かせない
* 青島　ねこだらけ
* 大久野島　うさぎだらけ
* 布部駅→麓郷　畑と山だったー。

## 参考

【フィットネスバイク】のインターネットを作る！！
 https://qiita.com/ie4/items/130308793444bd98179f
　※この記事があればこそ、今回できました！

DENKOのアヤしいお部屋。
https://ht-deko.com/
　※Arduino、何を選ぶか勉強させていただきました！

## 最後に
小型化&ぐちゃぐちゃになった配線を、シンプルにしたいかも。

※エアロバイクって、商標かー。
フィットネスバイク？　コンフォートバイク？
一般的には、やっぱエアロバイクだよなぁ。。
Laravel + SQLite 準備編

#はじめに

Laravelを学び始めたので、ブログアプリを作っていく過程の学習を通じて感じたことなどを書いていこうと思います。

まずは準備についてまとめていきます。

#Laravelとは

webアプリケーションを簡単に作るためのフルスタックなPHPフレームワーク
[公式ドキュメント](https://readouble.com/laravel)

#環境

PHP 7以上必須
PHPのアップデート方法
$ sudo yum install -y --enablerepo=remi-php71 php

データベース
SQLite3
###Laravelインストール
[Conmposer](https://getcomposer.org)が必要です。
[Download]→[Download Composer]→コマンドをコピーしてターミナルで実行

以下のコマンドでLaravelをインストールします。
```$ php composer.phar create-project --prefer-dist laravel/laravel [プロジェクト名]```
最後にスペース+任意のプロジェクト名を入れます。

Laravelではartisanというコマンドで様々な処理を行います。
```$ php artisan --version``` とするとLaravelのバージョンを表示してくれます。

私の環境を載せておきます。

```
Laravel Framework 7.12.0
```
#各種フォルダの説明
###App フォルダ
アプリケーションに関するクラスを管理します。

モデルに関するファイルはこのapp直下に作られていきます。

ユーザーの管理をしない場合この中のUser.phpは削除しても構いません。

コントローラーに関してはapp > Http > Controllersに入れていきます。

###config フォルダ
設定に関するフォルダです。

###database フォルダ
データーベースに関するファイルを入れていきます。

**新規ファイル作成**
デフォルトでデータベースフォルダの中のdatabase.sqliteを使うのでターミナルで
```$ touch database.sqlite```
で空のファイルを作っておく。

**database > migrations フォルダ**
データーベースのバージョン管理をするためのファイルを入れていきます。
デフォルトでいくつか入っていますが、これはLaravelが最初から作っているUserに関するマイグレーションファイルです。
ユーザー管理しない場合はこれを削除します。
ここで削除しておかないと後々の開発でエラーになります。

###public フォルダ
ブラウザからアクセスした時に見えるフォルダになります。

CSSやJavaScriptや画像などはこちらに入れます。

**resources > viewsフォルダ**
画面のテンプレートを入れていきます。

###routesフォルダ

どのURLにアクセスした時にどの処理を実行するかという設定を、ルーティングと呼びます。
routesにはそのためのファイルが入っています。
Webアプリケーションを作っていくのであれば、web.phpを使っていきます。

##Finderで隠しファイル・フォルダの表示

command + shift + .（コマンド + シフト ＋ ピリオド）

これで表示と非表示が切り替わります。

VSCならデフォルトでも確認可能ですがFinderではこのような方法で表示します。

##アプリケーションの設定

.envファイルとconfigフォルダの中のファイルを作っていきます。

**.env ファイル**: 環境に依存する設定値を書きます。

**configフォルダにあるファイル**は.envファイルに書かれた値を参照します。

こうすることで環境が変わった時に.envファイルだけを差し替えればいいので便利です。

.envファイルの中

```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
```
DB_CONNECTIONがデフォルトではmysqlになっています。
SQLiteを使っていく場合**DB_CONNECTION=sqlite**のようにします。
それ以降の5つの項目はsqliteでは使わないので削除します。

**config > app.php**
envと書かれている関数はenv-helperと呼ばれていて、
.envファイルの方から値を持ってくるための命令になります。

```
'name' => env('APP_NAME', 'Laravel'),
```
こちらの意味は、appに関してはenvのAPP_NAMEに値が設定されていたらそれを、値が設定されていなかったら Laravelを使いなさいという意味になります。

環境によって切り替えたい値がある場合は .env に書いておいて適宜参照します。

app.phpで編集

```
'timezone' => 'Asia.Tokyo',
'locale' => 'ja',
```

これで設定は終わりになります。

##Links

*[ドットインストールLaravel 5.5入門](https://dotinstall.com/lessons/basic_laravel_v2)*

*[Finderで隠しファイル、隠しフォルダの表示／非表示]
(https://support.borndigital.co.jp/hc/ja/articles/360005975154-Finder%E3%81%A7%E9%9A%A0%E3%81%97%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB-%E9%9A%A0%E3%81%97%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%81%AE%E8%A1%A8%E7%A4%BA-%E9%9D%9E%E8%A1%A8%E7%A4%BA)*
Windows Server 2019 Essentials をHyper-V運用（ファイルサーバ化）①

##小規模事業所用のファイルサーバをWindowsServerで構築してみんとてみるなり

server機の勉強をする目的もあり、、備忘録なので経過を書きます。つまり正しい説明や最短な経過にはなりません。完了後余裕があれば、整理したいとは思います。検索すればわかる「ひとつひとつの設定方法」などは記載しません。ちなみに、仮想化もサーバー設定も初体験なので悪しからず笑

###環境など

- 更新前まで
    - windows10pro(8.1無料UG) 10台程度をlinuxベースのNASをファイルサーバ化して運用
- 更新後
    - windows10pro 新品10台程度をWindows Server 2019 Essentials（仮想化）をファイルサーバ化して運用
- 変更目的
    - ファイルサーバがlinuxベースのNASだと、特にexcelファイルなどの誤作動がある。
    - セキュリティ向上、職場内運用ポリシーの厳格化のため。
- 検討事項
    - ドメイン管理できるか（使用するスタッフのITリテラシー含め）
- その他
    - 今まではFortigate30Dでルータ使用していたが、更新後はcisco841Mでルータ、Fortigate50EでL3スイッチとする。
- server機構成
    - M/B:GIGABYTE Z97-WIFI（NIC２口）
    - mem:16GB
    - SSD:intel 256GB(ホストOS ＆ ゲストOS）
    - HDD:WD RED 1TB×２台（データ＆バックアップ）
    - ホストOS:windows10 pro
    - ゲストOS：Windows Server 2019 Essentials（Hyper-V)

###ホストOSのセットアップ

そもそも古い自作PC用のM/Bのため、win-server2019の正規ドライバがないため、ドライバなしでも動くのですが蛇足的にwin10内のHyper-Vによる仮想化しつつserverを構築します。windows storage-serverOSのnas購入も考えたのですが、ついつい興味が勝ってしまいました。仮想化してサーバー化したことを後で後悔する自信があります。

- 設定など
    - SSDにwin8.1→ドライバ→win10にUG
    - SSDは500GBのHDDにクローンでバックアップ
    - officeなど余計なソフトは入れず。
    - たまたまnicが２口あるのは儲けもの笑
    - WD RED 10TB×2台はNTFSで通常フォーマット（1台12Hくらいかかる）
    
###Hyper-VによるゲストOSのインストール

- Hyper-VをホストOS側でONにし、仮想マシン作成時に第2世代を選択。（新しいもの好き）
- 第2世代では物理DVD不可のため、WindowsServer2019Essentials購入時に添付されていたDVDをISO化してなんとかインストール

###HDDのセットアップ

- 無事起動後、データ用のHDDをSCSIコントローラー→ハードライブ→容量固定で作成。（Hyper-Vマネージャー）※VHDXだったか？
    - 7TB作成で半日かかります。可変にした場合あとで作るボリュームも変えていかないとと思うと、固定が楽かと想像しました。
- ゲストOS内ディスクの管理でHDDをReFSでボリューム作成
    - ReFSにしたのは、説明を読んで「ブートに使わないし、検査も自動でやってくれる」って書いてあるから…です。1台は世代管理しながらバックアップをしたいと思っているので、そもそも２台ボリューム化が必要かは今のところ知りません。

###ネットワーク設定
- たまたまM/Bにnicが2口付いているのでintelをゲスト側で、Qualcomn側をホスト側で使いたい。
    - 仮想マシンを組んだ時に気にせずに「Default Switch」でネットワークアダプタを設定していたので、一度削除。
        - ゲストOSとの接続が切れたので、Hyper-Vマネージャで「仮想スイッチマネージャー」→仮想スイッチの作成→外部→nic選択
        - ハードウェアの追加→ネットワークアダプター→intel-nic選択→とりあえずゲストOSへの接続は成功
        - ゲスト側のネットワークアダプター設定でIPv4設定を行うと、ping他の端末から通った！
        - default swintchの初期設定だとインターネットはできる。ゲストOSから担当PCにはpingかえってくるけど、担当PCからゲストOSへのpingは返ってこない状態でした。担当PCに「WindowsAdminCenter」を入れてアクセスしてみたかったので笑、ここで解決かな。
    - ネットワーク関連の細かい設定はまた今度…

###参考書に沿ってserver設定を継続…って今笑ったでしょ？
- ActiveDirectoryとドメインコントローラーの違いをお勉強
    - WindowsAdminCenterでドメインコントローラーは実行できなさそうと書いてあるが…実際はいかに？
- 担当PCのブラウザアクセスにてActiveDirectoryドメインサービス、DNSサーバー、Winsサーバーを導入 

ん…本日はここで作業終了。知り合いから刀剣乱舞の動画の無料公開をdmmでやる予定だったんだけど、サーバーがダウンしたとかでお祭り連絡もらって、ついそっちに興味を持っていかれました。

[Windows Server 2019 Essentials をHyper-V運用（ファイルサーバ化）②](https://qiita.com/sasaan/items/b05a5a4d48bf0decad70)
【VBA-JSON】連想配列の配列の書き方

前回に引き続き連想配列の配列でつまずいたので覚え書きです。

とりあえずPHPで書くとこんなデータです。

```php:php
$data = array(
	'shcool' => '第一中央',
	'class' => "3-2",
	'number' => "21",
	'testList' => ["数学","日本史"],
	'find' => array(
		'statement' => 'AND',
		'statementList' => array([
						'key' => '試験日',
						'operator' => '>=',
						'value' => '2020/05/15 00:00:00',
						],[
						'key' => '試験日',
						'operator' => '<=',
						'value' => '2020/05/15 23:59:59',
						],),
	),
	'limit' => 5,
	'select' => array([
						'fieldName' => '問い3回答',
						'returnName' => 'Q3 A'],
	),
);
```

これを[VBA-JSON](https://github.com/VBA-tools/VBA-JSON)で書くとこうなりました。
一部変数にして文字列結合しています。クォーテーションの数が凄いことになって混乱します。

```vb:vba
class = "3-2"
number = "21"

Dim param As Object
Set param = JsonConverter.ParseJson("{""shcool"":""第一中央""," & _
"""class"":""" & class & """," & _
"""number"":""" & number & """" & _
"""testList"":[""数学","日本史""]," & _
"""find"":{""statement"":""AND""," & _
"""statementList"":[{""key"":""試験日"",""operator"":"">\="",""value"":""2020/05/15 00:00:00""}," & _
"{""key"":""UPDATE_TIMESTAMP"",""operator"":""<\="",""value"":""2020/05/15 23:59:59""}]}" & _
"""limit"":5," & _
"""select"":[{""fieldName"":""問い3回答"",""returnName"":""Q3 A""}]" & _
"}")
```
自分が XAML 系プラットフォームのクラスを覚えるときにしてること

既に大体覚えてる人は対象外です。都度都度コントロールを調べて覚えてるんだけど、覚えることが多すぎて大変な人向け。

## XAML 系プラットフォームのコントロールの特徴

継承を使って色々なコントロールが定義されています。
端的にいうと継承ツリーの中で重要なコントロールについて覚えておくと、他でも使いまわしが効いていいです。

### UWP & WPF

UWP と WPF はコントロールの構造が似ています。なので覚え方も大体同じです。大まかに全体に共通することと大きく 4 つのカテゴリーに分けて覚えます。

#### 全体に大体共通

- Style でプロパティの値をまとめて設定できる
- 依存関係プロパティはバインド出来る
- Margin の設定とか幅と高さを持ってる


#### ContentControl

Content プロパティに設定したものをいい感じに表示してくれる。
見た目を整えるなら Content プロパティに何でもいいからオブジェクト突っ込んで ContentTemplate に DataTemplate を設定して見た目整える。

以下のように色々なコントロールがこれに該当。

- ContentControl
- Window
- ToolTip
- Button
- CheckBox
- RadioButton
- ListBoxItem
- Label

#### ItemsControl

複数個のデータを表示するコントロール。ItemsSource プロパティにコレクションを設定（もしくはバインド）して、ItemTemplate で 1 項目ごとの見た目を DataTemplate で定義する。
因みにデータの 1 行単位でみると ContentControl です。

- ItemsControl
- ListBox
- TreeView
- Menu

厳密にはちょっと違うけど似た雰囲気として使えるものとして DataGrid がある。
これは 1 セル 1 セルが ContentControl みたいな感じで、編集モードとか表示モードとかあってちょっと複雑。こいつは真面目に覚えるしかない。

#### Panel

Children プロパティに子要素を置いてレイアウトをいい感じにしてくれる。

- Grid: 行と列を定義して配置する。一番使う。何かレイアウトパネル覚えるならまずこれ。
- StackPanel: 縦並び、横並びが出来る。Grid 覚えたら次はこれでいいと思う
- Canvas: 絶対座標指定。そんなに使わないけど、便利なこともある。
- RelativePanel: UWP のみだけど便利。相対座標での配置もなれれば楽。レスポンシブデザインに対応するのが他の Panel より楽。
- DockPanel: WPF のみだったかな？（UWP の Toolkit に入ってたかも？) 聖杯レイアウトが出来る。アプリの大枠切るのに便利。
- WrapPanel: WPF のみ。UWP は Toolkit にある。横並び縦並びで端まで行くと折り返すレイアウト

#### その他

諦めて個別に覚えよう。

### 総括

ということで以下のクラスを重点的にリファレンスを見て、どんな機能が定義されるのかをまずみましょう。

- FrameworkElement
- Control

↑のクラスは、ほぼすべてのコントロールの先祖にあたるため、ここにあるものは他のコントロールで使えます。覚えて損なし。

次に以下の 2 つのコントロールの使い方を見てみよう。

- ContentControl
- ItemsControl

1 項目を表示するコントロールと、複数のデータを表示するコントロールのベースとなるクラス。
大体のコントロールは上の 2 つのどちらから継承してたりすることが多いので、この 2 つを覚えてると、どんなコントロールでも見た目を思い通りに定義しやすくなります。

そして Grid コントロールでのレイアウトの仕方を覚えておけば思った通りの見た目は大体出来ると思います。

## Xamarin.Forms

Xamarin.Forms は XAML だけど、UI コントロールが最終的に各プラットフォームのネイティブコントロールに直接マッピングされたりするに関係上かわかりませんが、ContentControl とかがなかったりして勝手が少し違います。
似たコントロールとして ContentView がありますが、そんなに継承しているクラスは多くない感じなので覚えても費用対効果がそんなに高くなかったりします。

でも、ItemsControl と同じノリで使える感じのものは多いです。これは覚える価値あり。

- ItemsControl
- CollectionView
- TaggedPage: ItemsSource とは継承関係にないですが ItemsSource プロパティと ItemTemplate プロパティを持ってる

レイアウトパネルは UWP や WPF と大体同じですが StackPanel じゃなくて StackLayout だったり微妙に名前違うものがあってちょっと戸惑います。
あとは FlexLayout という Web の CSS Flexbox と同じノリでレイアウトを組めるやつがあるので、そこらへんもおさえておくといいかもです。

## まとめ

ということで、UI 系の部品の多くはオブジェクト指向の継承を使って作られてるものが XAML 系では多いので、継承のツリーを見て、肝となる機能を実装している親クラスを見つけて、そいつの機能を抑えることで、そのクラスを継承しているクラスの使い方のほとんどを押さえることが出来るので、費用対効果が高くてオススメです。
GCP QwikLabsやってみた　なんとかクエスト終了して初バッジGet!

# GoogleCloud Platformの勉強をしてみた

いままでは10年前にクラウドに移行し始めてから、AWS一本できました。ここでちょっとGCPにチャレンジする機会がでてきたので、お勉強してみようと思います。
ちなみにAzureのハンズオンに昨年出て、資格も合格しました。周りに内容が分かってない人が多かったことに驚いたことを覚えています。

## GCPの基礎というクエストを始めてみた。

いろいろあるとはおもうのですが、GCP eラーニング、と検索して出てきたのはQwikLabsというなんだかミススペルのようなサイト。これがGCPの公式勉強プラットフォームなのかな。
早速登録してみたら、英語の講座がぶぁっと並んでるので、慌ててアカウント設定で日本語にしたら、安心の日本語も出てきてくれました。とりあえず、入り口は日本語でやってみたい。

最初のターゲットは、GCPの基礎、というクエスト。クエストということは、きっとこれを倒せばいいんだとおもう。
登録してみると、QwikLabs:5分間の、ちょっと日本語のあやしい動画での解説。
覚えなきゃないことは、たぶん、Qwklabsの作業が終わったら、終了ボタンを押すこと。でも、押すと全部記録が消えるから、どこか別のところにとっておいてね、ということかな。


各回４５分あるので、それらは別記事で書いて載せていこうと思います。

## Qwiklabs と Google Cloud Platform の概要

2020/5/26 やってみた。本当に導入。最初にクレジットを買ってくれという案内があるので、一瞬買わなきゃいけないのかと思ったけど、それは一般的なQwiklabsを使うときの話みたい。
そのままconsoleにログインし、IAM、api、cloud shellをちらっと見て終了。

## 仮想マシンの作成 or Compute Engine: Qwik Start - Windows

2020/05/27 やってみた。いきなりcloud shell でコマンドを試そうというところから始まる。ユーザやconfigなどを表示。
gcloud auth list
gcloud config list
リージョンとゾーンについて。AWSと同じ。
VMインスタンスを作成。
東京リージョンにはゾーンが３つある。大阪も同様。
この段階で、httpとhttpsのトラフィックを許可するオプションがある。これはいいな。
そのまま、sshでログインもできる。AWSより少し楽。
apt-get updateをするような手順で、少し時間がかかるかと心配したけど、１分もかからず終わる。
OSが新しい状態でVMインスタンスがDeployされてるのかな。
nginxをインストールする。これも１分かからない。
そして、接続確認をするも。。。つながらない！なんでだ。
まちがって、colud shellの方でコマンドを実行していました。
それでやり直して、そのままクリックしても開かない。今度は、今はIPで開くとhttpsがデフォルトになっているため、手でhttpに切り替えたら無事nginx welcome画面が見れました。(VM作成時にhttpsにチェックいれていたためでした）
ここまでで半分。
上記をCloud shellからコマンドラインで実施。
gcloud compute instances create gcelab2 --machine-type n1-standard-2
 --zone us-central1-c

cloud shellからsshすることもできる。そんなことする必要あるのかな。コマンドラインで全部できるようになっているってことか。



## Cloud Shell と gcloud のスタートガイド

２０２０/5/28 やってみたのですが、うまく動かず、チャットでサポートを依頼したら、障害みたいなので調査して連絡するとの返信がありました。チャットサポートは結構すぐ返信をくれましたが、解決できてないので、クレジットはどうなるんだろうなと思っています。治ったら連絡ってくるのかな？いろいろ謎ですが、これも１つの経験ということで。

治った連絡がきたので、再度やってみました。
しかし、本当にかんたんな内容で、コマンドラインでinstanceを作って、sshしたら終了でした。
まあAWSでもそんなもんだし、VMを作るだけなら、本当に楽な時代になったなと思います。
ただ、実際に作るときは、どのVMを選ぼうかとか、何をインストールしようかとか、
誰がアクセスできるようにしようかとか、ネットワークどうしようかといろいろあるかと思います。
その辺がすっぽり抜け落ちているので、本当に机上でやるのに毛が生えたくらいの印象でした。

今度は一応終わりましたが、最終の設問で説明のなかった部分もあったりして、全体的にいまいちな印象は残りました。

## Kubernetes Engine: Qwik Start

間４０分くらいで、最初の１時間はログイン説明で、そんなによくわからなかったおいうのが正直なところです。実際にkuberneteで作って見れるので、触ってみた感じにはなれました。実務にはかなり距離があります。
Cloud shellでkubectlとかのCUIでのハンズオンなのですが、GUIってないのかな。そのへんは
あとで調べてみようと思います。

## ネットワーク ロードバランサと HTTP ロードバランサを設定する

やってみた。でもあんまり意味がわかんない。

## Google Cloud の基礎: チャレンジラボ
→このラボは結局なかったんだけど、これはなんだったんだろ。やってみるといいっていみなのかな？？
SpeechRecognitionで繰り返しマイクを拾い続ける

## 話している言葉をずっとテキストに起こし続けたかった

そのためにはマイクをずっと動かして声を拾い続けないといけません。SpeechRecognitionは時間が一定経つと自動的に終わってしまいます。その回避策です。

そもそも何故そうしたかったのかというと[リアルタイムに声をテキストとして表示する「Zimack」というサイトを作った](https://maketake.hatenablog.com/entry/2020/05/24/175937) というので詳細を書いているのですが動画配信用に字幕を出すものが欲しかったためです。それで手ごろだったのがVueでwebページを作ってOBSでキャプチャすることでした。

[Zimack](https://mizotake.github.io/subtitles-page/dist/)

[リポジトリ](https://github.com/MizoTake/subtitles-page)

## 実装内容

今回の実装はApp.vueにメソッドとして書いています。それを切り抜いて以下のような流れになります。

```js
  data: () => ({
    speechRecognition: window.SpeechRecognition || window.webkitSpeechRecognition,
    isFirstStarted: false,
-----省略------
  methods: {
    settingRecognition () {
      var recognition = new this.speechRecognition()
      recognition.lang = 'ja-JP'
      recognition.interimResults = true
      recognition.continuous = true
      // start時のコールバック、フラグを立てる
      recognition.addEventListener('start', () => {
        this.isFirstStarted = true
      })

　　　// テキスト起こしの途中経過が入ってくる
      recognition.addEventListener('result', event => {
        const stackText = Array.from(event.results).map(x => x[0]).map(x => x.transcript)
        this.currentText = stackText.join('。')
      })

      // end時のコールバック、複数回呼ばれる可能性があるのでフラグが立っていれば再度テキスト起こしを始める
      recognition.addEventListener('end', () => {
        if (this.isFirstStarted) {
          recognition.start()
          this.isFirstStarted = false
        }
      })
      
      recognition.start()
    }
  },
-----省略------
  mounted () {
    // SpeechRecognitionが扱えるのであればundefinedにならない
    if (!this.speechRecognition) {
      alert('ChromeなどのSpeechRecognitionに対応したブラウザをお使いください。')
      return
    }
    this.settingRecognition()
-----省略------
```

endが複数回呼ばれたりして適切なタイミングで `start()` を行わないとエラーが出たりブラウザが重くなったりしていました。

## まとめ
サクッと1日くらいで作ったものなので変数名や処理の流れの雑さは否めないのですが自分は躓いたのでメモ書きとして残します。
Youtubeライブとかの配信でも字幕を出せるようになるので意外と面白いです。すこし間違ったテキストになるのもまた好きなのでサクッと実装できるこのようなapiがあることに感謝ｧ…
Pythonで文字列を逆順にする


#サンプルコード
```python:string.py
#反転させる文字列
input_line = input()
#ここで反転
ans = input_line[::-1]
#answer
print(ans)
```

#感想

あまり使わなそうなコードですが、覚えておいて損はないです。
Sansan API + AWSで企業情報のマスターDBを構築する

## 1. 経緯
社内には<span style="color: #d32f2f">数多くのシステム</span>があります。CRM、ERP、経費精算、、、etc...<br>
そして、その各システムには、企業を登録するUIがあり、それぞれのシステムに<b><span style="color: #d32f2f">企業登録</span></b>を行います。<br>
そこで課題に上がってくることが以下の2点！<br><br>

#### 社内の課題😱
<span style="font-size: 120%">①それぞれのツールに<span style="color: #d32f2f"><b>何度も同じような情報を入力</b></span>しなければならない。</span><br>
<span style="color: #666666">※CRMやERPなど各システムに企業名や担当者など共通する情報を何度も入力。。。</span><br><br>

<span style="font-size: 120%">②色々な人が入力するので、<span style="color: #d32f2f"><b>同じ企業の登録でも表記ゆれ</b></span>をする。</span><br>
<span style="color: #666666">※「株式会社あつまる」「株式会社ATSUMARU」、「(株)あつまる」、「あつまる」、半角や全角、など考え出したらキリがないレベルで表記ゆれがあります。一番の絶叫は、半角カタカナですね。🥶</span>


特に、②に関しては、今後、各システム同士を連携する際にもかなりネックになってきますね。🤔

<span style="color: #666666">※イメージ図</span><br>
![20200517122431.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116236/c7393521-9673-aeed-ac9a-2b8dd697d16b.png)




## 2. 実現したいこと

<span style="font-size: 120%">①一つのUIに企業を登録すると<b><span style="color: #d32f2f">全てのシステムに同じ企業情報が登録される</span></b>。</span><br>

<span style="font-size: 120%">②企業情報に関しては、ユーザーに入力させるのではなく、クラウド名刺管理Sansanから企業データを引っ張ってきて、<b><span style="color: #d32f2f">選択させる方式で企業を登録</span></b></span>。

***
【流れ】<br>
名刺を写真にとり、Sansanに登録 → システムに企業登録する際は企業一覧が表示されるので選択するだけ<br>
企業名だけではなく、<span style="color: #d32f2f">名刺に含まれる企業情報も同時にデータベースに登録</span>されます。

![20200517122323.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116236/627f8f08-660e-f646-e469-0094eb9507d3.png)


### 2-1. Sansan APIについて
クラウド名刺管理Sansanを契約している企業向けにAPIが公開されています。<br>
APIドキュメント自体は一般公開されています。
非常にわかりやすく、そして、APIリクエストからのレスポンスも早い！！！
色々なパラメータで条件を絞れたり、あらゆる角度から欲しい情報が引っ張れるので、
社内のシステム連携には非常にやりやすく、とても嬉しい！😂

[Sansan Open API](https://docs.ap.sansan.com/ja/api/openapi/index.html)


### 2-2. アーキテクト
![20200518101223.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116236/a916a145-5d32-31c7-751c-ccfe5da53364.png)



## 3. 開発のポイント
- Sansan APIは[名刺 Set 取得（期間指定）](https://docs.ap.sansan.com/ja/api/openapi/index.html#%E5%90%8D%E5%88%BAapi-%E5%90%8D%E5%88%BA-set-%E5%8F%96%E5%BE%97%EF%BC%88%E6%9C%9F%E9%96%93%E6%8C%87%E5%AE%9A%EF%BC%89-get)で12時間前から現在時刻までの取得、Lambdaの実行は30分ごと。
- LambdaからDynamoDBに企業登録する際は、一度、企業検索をかけて、ないことを確認して、登録している。既に登録されている企業データに関しては、登録処理を行わない。

### 3-1. 企業入力に関して
名刺登録されている膨大な選択肢から企業を探すのは、非常に困難なため、<b>企業名の入力サジェスト</b>で選択できる形にしています。

[Vue-Multiselect | Vue Select Library.](https://vue-multiselect.js.org/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116236/d1a6977c-74c4-4541-964b-a1be2ce89adb.gif" width="320" height="300">


## 4. 今後の展望
社内システムとの連携に関して、システムA、システムB、システムCと書いていますが、まだ実は連携ができていません。そこで、以下の2点を実現できる基盤と仕組みを創っていきたいと思っています。

1. 正しい情報の整理
2. データ登録業務の効率化

記事を読んでいただきありがとうございます！<br>
今後も、定期的にアウトプットしていこうと思います！🤗
Ubuntu LinuxはOSのアップデートはGUIだけでなくCLIでもやっといたほうが良いんじゃないかという話

今回は、Windows、MacユーザがデスクトップのUbuntu Linuxについてハマりがちなんじゃないかというポイントについて書きます。
それは、「Ubuntu LinuxはGUIの「ソフトウェアの更新」だけでなく、CLIでもアップデートしておいたほうが良いのでは？」という話です。

使用したのはUbuntu 20.04 LTS

理由としては、私自身がGUIツールでのみアップデートして使っていて、原因不明の「使っているとwifiがいつの間にか切れる」という症状が出たからです。理由はそれだけで、サンプリングポイントが１点なんですが、（三台のPCに入れたので３点かも）全部同じ症状が出ました。
CLIでアップデートしてから、同じ症状は出てないです。

CLIのアップデート法は以下の記事にあるようです。

https://qiita.com/masoo/items/8ebc51a6a9f32417d4a3

これについてはいろいろ記事を見たのですが、「GUIとCUIではちょっと違うが、同じようなことをやっている」のような記述しかみつけられませんでした。
MacやWindowsはGUIのアップデートで普通の用途なら足りてしまうので、もしかしたらハマりポイントかもしれません。
ちょっと理由が知りたいですね。

このトラブルシューティングでは色んな人にご協力いただけました。名前は出していいかわからないので書かないですが、ありがとうございました。
ハードコーディングとは

#はじめに
この業界で仕事をし始めてから日々聞きなれない単語を聞くことが多いのですが、今日は「ハードコーディング」という言葉を耳にして意味がわからなかったので、調べた結果をアウトプットさせていただきます。

#ハードコーディングとは
主にこちらの記事を参考にしました。
[「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word12866.html)

記事にも書いてありますが、一言で言えば、「別のところに分けておいた方が良い処理や値をソースコードの中に直接埋め込むこと」です。

具体的なプログラムで見るとわかりやすいです。

```sample.rb
price = gets
puts price + price * 0.1
```

上は物の値段を標準入力で受け取って、消費税率10%の税込価格を表示するごく簡単なRubyスクリプトです。
プログラムでは消費税率0.1が、税込価格を計算する箇所に直接書かれています。このスクリプトを書いた本人は税込価格を表示するプログラムだとわかっているため特に問題ありませんが、他の人が見たときに0.1って何？、みたいな感じでプログラムの意味が他人には把握しづらいです。
このように分けておいたほうがわかりやすい処理や値（今回は税率）を直接コードに書くことをハードコーディングと言います。
さらにハードコーディングされているのが数字の場合、それらは「マジックナンバー」と呼ばれます。
今回の税率0.1はマジックナンバーとなります。

複数人で開発する際にハードコーディングがあると、他の人がコードを見たときに処理がわかりづらいため、一般には避けるべき書き方です。

今回の税込価格プログラムのハードコーディングを解消すると、例として以下のようになります。

```sample.rb
price = gets
tax = 0.1
puts price + price * tax
```

消費税をtaxとして分離することで、可読性が上がるとともに、将来消費税が変更になってもtax部分だけを変更すればいいので、修正も楽になります。
ハードコーディングとは逆に処理を分離する書き方は、ソフトコーディングと呼ばれるそうです。

今回は税込価格表示の簡単なプログラムだったためハードコーディング解消のありがたみがわかりづらいですが、巨大なプログラムになるとソフトコーディングによる恩恵は大きいと思われます。
具体的にはデータベース設定などはハードコーディングを避けるべき項目だと考えられます。