OmniAICreator/Qiita-1.07M huggingface dataset:
kintoneのフォーム作成時に、大量の選択肢を一瞬で登録する

# はじめに

kintoneで、ドロップダウンやチェックボックスなど「複数の選択肢を用意しておくフィールドタイプ」を作る場合、選択肢が多くなると、「+」ボタンを押しては入力、押しては入力、、、、ってのがとても面倒くさいことが多いです。

しかし、そこはWebアプリであるkintone！ブラウザのデバッグコンソールを使えば、JavaScriptを使って大量の選択肢を一瞬で登録してやることが可能です。

# サンプルコード
こちら！
既存の項目は保持して、その下に一括投入します。
`values`配列と`checked`の`true|false`だけを修正すればOKです。[^1]

[^1]: ちなみに`let` `const`じゃなくて`var`で書いてあるのは理由があります。ブラウザのconsoleにコピペしながら試す場合は、どうしても`var hoge = fuga`ってのを繰り返し貼り付けるケースが多く、`let` `const`は変数の再定義をできないので、毎回リロードするなり、気を使わなきゃいけないんです。再定義できてしまうユルい`var`がとても便利でしたw


```js
// 入力する値
var values = [0, 5, 10, 15, 20, 25, 30]
// 複数選択可能なフィールドでデフォルト値のチェックを付けるならtrue
var checked = false

var addButton = '.treeeditor-node-item-add-cybozu'
var textField = '.treeeditor-nodes-cybozu .input-text-cybozu'
var checkBox = '.treeeditor-nodes-cybozu .input-check-cybozu'
values.forEach(value => {
  var allButtons = document.querySelectorAll(addButton)
  var length = allButtons.length
  // 行追加
  allButtons[length - 1].click()
  // テキスト入力
  document.querySelectorAll(textField)[length].value = value
  // デフォルト値のチェックボックスをON
  if (checked) document.querySelectorAll(checkBox)[length].click()
})
```

# 実行例

## ドロップダウン
設定の詳細画面まで出して、F12でConsoleを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/20ae0b0e-e0a5-b2fd-c9b5-d791fa469e28.png)

貼り付けて、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/7528e661-a8d9-6da4-c023-3c214ff96398.png)

Enter！ドヤ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/08ee24af-5d3b-4d3a-ab58-e59d3b30be9b.png)

## チェックボックス
設定の詳細画面まで出して、F12でConsoleを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/21dfdab4-3228-d710-dbdc-700cb7bb88a1.png)

貼り付けて、デフォルトチェックは`true`にしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/54e351f3-9f82-410a-43d9-baa9d34a13a8.png)

Enter！ドヤ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/ff7b2ad3-eb25-9475-88f1-0ece957692a7.png)

# 既存の項目の設定値だけを取得

こうすれば、既存項目の設定値を配列で取得できます。
この結果をコピーして、一括設定プログラムの`values`としてそのまんま使えちゃうので、アプリ間での設定項目のコピペも簡単にできちゃいますね！

```js
var textField = '.treeeditor-nodes-cybozu .input-text-cybozu'
Array.from(document.querySelectorAll(textField)).map(_ => _.value)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24333/92c5d75c-2ce7-3073-fc5a-f56477274915.png)

# 謝辞(?)
この記事のコードは、弊社SonicGarden副社長の[藤原氏](https://www.sonicgarden.jp/members/fujiwara)が編み出した技を、もう少し汎用的にしたものです。原作者の名前もちゃんと書いておかないとね！

藤原さんは、これ系の「デバッグコンソールでサクッとDOM操作(CSS操作も)」が超得意で、その分野はまだまだ勝てる気がしないっすねー。初心者の前でもライブコーディング的な面白い魅せ方が色々できるので、もっと極めたいですね！日々精進であります。

# おわりに

ほかにも、「ラジオボタン」「複数選択」フィールドでも動作確認できました。DOMの構造はかなり共通なんですね。

kintoneにアップロードしたJavaScriptは設定画面では有効になりませんが、こんな風にブラウザのConsoleを使ってやると、その場限りでいくらでもhackできます！楽しんでいきましょう :smile:
【SwiftUI】FirebaseAnalytics用にModifierを作ってみた

# この記事について

Firebase×SwiftUIで作成されたアプリの場合
どのようにして画面が表示された際に
EventやUserPropertyを送ろうか考えた際に試してみた内容を記事にしてみました。

最後の方におまけとしてこれもできるのかな〜と
と思ったことを試してみたのも添えてありますのでご興味があればぜひ！

# ViewのExtensionにAnalytics用のメソッドを追加
**Viewのextensionで追加してみる**


```swift:FirebaseAnalyticsTracker.swift
final class FirebaseAnalyticsTracker {
    enum Event: String {
        case login
    }
    
    func sendEventLog(_ event: Event, parameters: [String: Any] = [:]) {
        Analytics.logEvent(event.rawValue, parameters: parameters)
    }

    enum UserProperty: String {
        case level
    }
    
    func setUserProperty(key: UserProperty, value: String) {
        Analytics.setUserProperty(value, forName: key.rawValue)
    }
}
```

```swift
extension View {
    func sendEventLog(_ eventName: FirebaseAnalyticsTracker.Event, parameters: [String: Any] = [:]) -> Self {
        FirebaseAnalyticsTracker().sendEventLog(eventName, parameters: parameters)
        return self
    }
    
    func setUserProperty(key: FirebaseAnalyticsTracker.UserProperty, value: String) -> Self {
        FirebaseAnalyticsTracker().setUserProperty(key: key, value: value)
        return self
    }
}
```

```swift
struct FirebaseAnalyticsTestView: View {
    var body: some View {
        VStack {
            Text("Send Analytics Data to Firebase")
        }
        .sendEventLog(.login)
        .setUserProperty(key: .level, value: "5")
    }
}
```

# DebugViewで確認
無事loginEventとlevelが5であるというUserPropertyが送れてました:v:
<img width="573" alt="スクリーンショット 2019-10-16 1.14.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75593/1fa9f3e5-c112-0b0d-7051-3cbe74ffc4ae.png">

# 課題
`@State`や`@ObservedObject`で変更が通知され
Viewが再描画される際にFirebaseAnalytics用のModifierがある場合余分にEvent,UserPropertyが送信されているようでした。

ここに関しては引き続き検証をしていこうと思っておりますので進捗あり次第更新します:bow_tone2:
#おまけ

**Viewにコメント付与,logを出すModifierもできる**

```swift
extension View {
    func comment(_ text: String) -> Self {
        return self
    }
    
    func log(_ text: String) -> Self {
        print(text)
        return self
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Send Analytics Data to Firebase")
                .comment("こんな感じでいける")
                .log("text")
        }
    }
}
```
codepen 埋め込みテスト

# 概要

codepen　埋め込みテストしてみた。
embedを押す、コードをコピー。

# サンプルコード

```
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="ohisama" data-slug-hash="ZEEOWrz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="referrer">
  <span>See the Pen <a href="https://codepen.io/ohisama/pen/ZEEOWrz">
  referrer</a> by ohisama (<a href="https://codepen.io/ohisama">@ohisama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="ohisama" data-slug-hash="ZEEOWrz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="referrer">
  <span>See the Pen <a href="https://codepen.io/ohisama/pen/ZEEOWrz">
  referrer</a> by ohisama (<a href="https://codepen.io/ohisama">@ohisama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#結果

window.parentは、獲れない。

以上。
あなたのサイトを高速に？Webサイトのパフォーマンスの分析に便利なツール２選

Webサイトが重い・ブログを立ち上げたけどなんか重い、Webサイトの最適化を行いたいけど
指標が分からない、どこから手をつけていいか分からないなどありませんか？

そんな時に便利なWeb分析ツールのご紹介です。
私は下記２つのツールをメインに使っています。

## 便利なところ

- パソコン・モバイルなど端末毎のパフォーマンス分析をしてくれる
- 画像やレンダリングなどの速度状況と改善の余地を可視化できる
- 分析の一貫としてパフォーマンスを数値で可視化できる

## PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=JA

<img width="1276" alt="スクリーンショット 2019-10-16 11.50.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452135/e60614e4-3d16-a8c4-c608-92fcdc0b87cd.png">

## GoogleChrome拡張機能 Lighthouse
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

<img width="387" alt="スクリーンショット 2019-10-16 11.43.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452135/cae41b06-600c-0d25-16ea-d27259247284.png">

<img width="1276" alt="スクリーンショット 2019-10-16 11.50.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452135/3b770e00-30c5-44df-5c53-8d87a06e5fd3.png">

どちらも、数ステップで簡単に検証を実施できるのでとても便利です。
一度使ってみてください。
App ServiceとAzure FunctionsでKey Vault参照がGA！

# はじめに
この記事は2019/10/15に発表された["Key Vault references in App Service and Azure Functions are now available"](https://azure.microsoft.com/en-us/updates/general-availability-of-key-vault-references-in-app-service-and-azure-functions/)の要約記事です。  
この記事では「そもそもAzure Key Vaultとは何か」といったところから今回の発表のポイントまで紹介していきます。
始めに今回の発表のハイライトを紹介し、Azure Key Vaultの簡単な説明や発表の詳細について述べていきます。

# 今回の発表のハイライト
ソースコードの変更なしでシークレットの管理機能をアプリケーションへ導入することができるKey Vault参照がGAされました。
それにより、App ServiceやAzure Functionsでホストされるアプリは、アプリケーション設定の中でKey Vaultで管理されるシークレットへの参照を簡単に定義できるようになりました。

# Azure Key Vaultとは何か
Azure Key Vaultとはアクセスを厳密に制御する必要があるもの（シークレット）を安全に保管し、安全にアクセスするためのツールです。
アクセスを厳密に制御する必要があるものとは具体的にはAPI キー、パスワード、証明書などのことを指します。
Azure Key Vaultを利用すると以下のことが簡単に、そして厳密に制御することができます。

- シークレットの管理：トークン、パスワード、証明書、API キーなどを安全に保管＆厳密なアクセス管理ができます
- キー管理：データの暗号化キーの作成と制御が簡単に行うことができます
- 証明書の管理：Azure および内部の接続されているリソース用のSSL/TLS証明書を簡単にプロビジョニング、管理、デプロイすることができます
- ハードウェア セキュリティ モジュールに基づくシークレットの格納：以上のシークレットはソフトウェアまたはFIPS 140-2 レベル2検証済みHSMで保護することができます

詳細については[Azure Key Vault とは](https://docs.microsoft.com/ja-jp/azure/key-vault/key-vault-overview)や[Azure Key Vault の基本的な概念](https://docs.microsoft.com/ja-jp/azure/key-vault/basic-concepts)を参照してください。

# 今回発表された内容
シークレットとは有効期限とアクセス制限に基づいて一時的に保存されます。
これらの管理機能をAzureのアプリケーションに提供するのがAzure Key Vaultですが、これを用いるためにはコードを変更しなければなりません。
しかし、アプリケーションの中にはコードの変更を簡単に行うことができないものもあります。

そこで、ソースコードの変更なしでシークレットの管理機能をアプリケーションへ導入することができるKey Vault参照が公開されました。
それにより、App ServiceやAzure Functionsでホストされるアプリは、アプリケーション設定の中でKey Vaultで管理されるシークレットへの参照を簡単に定義できるようになりました。
具体的には、Key Vault参照はシステムに割り当てられたアプリのIDを利用してシークレットを安全に取得し、それを環境変数としてアプリケーション内で使用できるようにします。
つまり、アプリケーションの設定の既存のシークレットをKey Vaultの中にある同じシークレットへの参照に置き換えるだけで、アプリケーションはそのまま正常に動作します。

# おわりに
この機能は以下のホスティングオプションで徐々に提供されています。

- App Service Plan
- App Service Environment
- Azure Functions Consumption Plan（Windows）
- Azure Functions Premium plan

Azure Functions Consumption plan（Linux）へのサポートは近日中に提供されます。
詳細は[こちらのドキュメント](https://docs.microsoft.com/ja-jp/azure/app-service/app-service-key-vault-references)を参照してください。
HTMLとCSSだけで、固定ヘッダー・それぞれスクロールできるサイドメニューとメインコンテンツを作りたい

# 最初に
こんなレイアウトで、サイドメニューとメインコンテンツをそれぞれスクロールできるようにしたかった。
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223733/0a65921c-db03-dcd2-d27f-da3aaaecc5ba.png)

よく見るレイアウトなんだけど、
全然思い通りにコーディングできず苦労したのでメモしておきます。

# コード
## 前提
reset.CSS仕込んでます

## HTML
```html
<body>
	<header>
		<!--任意のヘッダーコンテンツ-->
	</header>
	<div class="main">
		<div class="main-contents">
			<aside class="sidebar">
				<!--任意のサイドメニューコンテンツ-->
			</aside>
			<div class="main-contents-body">
				<!--任意のメインコンテンツ-->
			</div>
		</div>
	</div>
</body>
```

# CSS
```css
body{
	font-size: 1.4rem;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 60px 1fr;
}

/* header */
header{
	position: sticky;
	top: 0;
	height: 60px;
	background-color: #eee;
}

/* main */
.main{
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	width: 100%;
	height: calc(100vh - 60px);
	background: pink;
}
.main-contents{
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-rows: 1fr;
	align-items: flex-start;
	margin: 0 auto;
	max-width: 1200px;
	height: 100%;
	background: #fff;
}
.sidebar{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	position: sticky;
	overflow-y: auto;
	height: calc(100vh - 60px);
	box-sizing: border-box;
	background: hotpink;
}
.main-contents-body{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	height: calc(100vh - 60px);
	overflow-y: auto;
}
```

# 解説
## display: grid;を使用して要素を分割する
### 3つの入れ子構造にする
本来なら`body`に設定した1つのgridで事足りそうですが、
Bを`max-width: 1200px`にするためには入れ子の構造が必要になりました。

1. ヘッダーと本体を分ける（gridレイアウト）
1. 本体の中に、サイドメニューとメインコンテンツが入るボックスを中央に配置する（`margin: 0 auto;`）
1. 中央のボックスで、サイドメニューとメインコンテンツを分ける（gridレイアウト）

## サイドメニューとメインコンテンツをそれぞれスクロールさせる
### 両方にheightを設定する
一件無駄に見えますが、これをしないと`overflow-y: auto;`が利きません。
ヘッダー下のサイズで指定したものと同じ高さにしてあげてください。

# 実践した感想と補足
普段はディレクター職をやっているため、久々にHTML/CSSに触れた者です。 
今までJavaScriptにて処理していたものが、CSSで簡単に書ける時代になってきていますね。
想像以上にできることが多くなっていて、驚きました。

おそらくショートハンドなど活用して、もっとスマートに書けると思うので、
よりよい書き方がありましたらご教授いただけますと幸いです。

# 更新履歴
- 2019/10/16
  - 初出
- 2019/10/17
  - `<body>`関連の記述もれを追加
[要約]Chrome 78 - DevToolsの新機能について

コレは英語の勉強がてら [Chrome 78 - What’s New in DevTools - YouTube](https://www.youtube.com/watch?v=VNkctDLYP6o&t=39s)と[What's New In DevTools (Chrome 78)  |  Web  |  Google Developers](https://developers.google.com/web/updates/2019/09/devtools) を自動翻訳とかい色々つかって要約してみた記事になります。

間違ってたらすみません


## Auditsパネル内でのマルチクライアントのサポート (Multi-client support in the Audits panel)

![](https://i.imgur.com/6UmnPdM.png)


Auditsパネルをつかってページのパフォーマンステストが実施可能になりました。  

動画内では紹介としてjQuery, Lodash, Treejsをロードしているスコアが69のページに対して改善を試みています。

Option(Cntl) + Pで`Request blocking`を開いて`jquery`をブロック対象にしています。  

Option(Cntl) + Pで`show overrides`を開いて他のリソースに対して非同期属性を付与します。Folderを選ぶと変更されたソースコードはそこに保存されるようになります。Option(Cntl) + Pを再度押して変更したいソースを選択して`tree.js`と`loadash`に対して`async`属性を付与します。Option(Cntl) + Sを押すと保存されます。  

その後もう一度監査パネルでパフォーマンステストをするとスコアが89点に!

## ペイメントハンドラーのデバック(Payment Handler debugging)

![](https://i.imgur.com/Mh2Fu9l.png)


WebでペイメントハンドラーAPIをつかって支払をしたときのデバックために支払情報がDevTools上で確認できるようになりました。  
支払情報の記録は収集を開始してから3日間DevToolを閉じていても記録し続けます。  

記録するにはDevToolからA`Apllication`を開いて`Paymetn Handler`を開きます。  

左上にRecボタンがあるので押してDev Toolを閉じます。  

その後何かしらでPaymentHandlerをつかったらDevToolを開き`Apllication`から`Paymetn Handler`を開きます。
そのままでは表示されないので`show event from other domains`にチェックを入れると`PaymentHander`のイベントが表示されます。  



## Lighthouse 5.2 in the Audits panel

`Audits`パネルでサードパーティのコードの量を表示するようになりました。`Third-Parth Usage`で各サードパーティのコード量とメインスレッドをブロックした時間を知ることができます。


## パフォーマンスパネル内での最大コンテンツの可視化(Largest Contentful Paint in the Performance panel)

Chrome77から導入された`Perfomance`パネルでサイト内で一番大きいコンテンツをマークアップして表示するようになりました。またLCDをマウスオーバーすると該当場所を色をつけて教えてくれます。クリックすると詳細を見ることが可能です!

![](https://i.imgur.com/B4DW4re.png)


## DevToolメインメニューからのバグ報告や機能リクエスト (File DevTools issues from the main menu)

メインメニューから`Help`→ `Report a devtool issue`で報告することができます。  
あなたが使用しているOSバージョンやChromeバージョンそして、再現する方法などを教えて下さい。


![](https://i.imgur.com/QDF7oPx.png)
rails 6 を使用してのDocker開発環境を構築しました。

##開発環境
- macOS Mojave ver.10.14.6
- Docker ver.19.03.2
- docker compose ver.1.24.1

##私について
- 独学１ヶ月目
- 間違えている箇所、内容あれば是非コメントください！

## 問題点
rails6開発環境をDocker上で構築するために、
1. Dockerdileとdocker-compose.ymlファイルを作成。
2. ターミナルにて `docker-compose up` コマンドを実行。
3. 新規ターミナルで、 `docker exec -it` 実行。コンテナ内に入る。
4. しかしwebpackerがインストールされていませんとエラーが出てしまう。


ムムム、どうしたものか。。


### Dockerfile

```ruby:qiita.rb
FROM ruby:2.6.5-alpine AS builder

RUN apk --update add --virtual build-dependencies \
    build-base \
    curl-dev \
    mysql-dev \
    linux-headers

RUN gem install bundler

WORKDIR /tmp

COPY Gemfile Gemfile
COPY Gemfile.lock Gemfile.lock

ENV BUNDLE_JOBS=4

RUN bundle install
RUN apk del build-dependencies

FROM ruby:2.6.5-alpine

RUN apk --update add \
    bash \
    nodejs \
    mariadb-dev \
    tzdata \
    yarn 

RUN gem install bundler

WORKDIR /tmp
COPY --from=builder /usr/local/bundle /usr/local/bundle

ENV APP_HOME /myapp
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME
COPY . $APP_HOME
```

### docker-compose.yml

```ruby:qiita.rb
version: '3'
services:

  mysql:
   image: mysql:8.0.17
   command: --default-authentication-plugin=mysql_native_password
   volumes:
     - "./mysql-data:/var/lib/mysql"
   environment:
      MYSQL_ROOT_PASSWORD: root

  app:
    build: .
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ".:/app"
    ports:
      - "3000:3000"
    tty: true
    depends_on:
     - mysql
    working_dir: "/app"
```

## 解決方法
- Docker-compose.ymlファイルに、binの中にwebpacker-dev-serverを作成する記述を追加しました。
同様の操作をターミナルでを実行すると。。。やっと成功しました！

```ruby:qiita.rb
version: '3'
services:

  mysql:
   image: mysql:8.0.17
   command: --default-authentication-plugin=mysql_native_password
   volumes:
     - "./mysql-data:/var/lib/mysql"
   environment:
      MYSQL_ROOT_PASSWORD: root

  app:
    build: .
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ".:/app"
    ports:
      - "3000:3000"
    tty: true
    depends_on:
     - mysql
    working_dir: "/app"

  webpacker:
    build: .
    command: bundle exec bin/webpack-dev-server

```
<img width="1440" alt="スクリーンショット 2019-10-16 11.11.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/c129a2b8-6512-dcc2-06e8-70fda5355474.png">

### 最後に
初めてのDockerでの環境構築、苦労しましたが一応これで成功しました。ここからアプリの作成を初めて行きます！！
また、今回の手順で「他にもこんな方法あるよ！」、「ここ間違ってるよ！」とか諸先輩方のご指摘もお待ちしております！
最後までご覧頂きありがとうございました。
【Laravel】毎回同じ検索条件を書くならEloquentのクエリスコープを使う

3年弱Laravelを使っていたのに、今まで存在を知らなかった便利な機能「<a href="https://readouble.com/laravel/5.8/ja/eloquent.html#query-scopes">クエリスコープ</a>」を使ってみました。

# こんなケース

ブログサイトを作っていたとして、記事データを取得する機会って結構あると思います。

- 検索結果を表示する時
- 記事の詳細を表示する時
- 最近の記事を表示する時
- 関連する記事を表示する時

仕様によっては、まだまだあると思います。

そんな時、おきまりの様に毎回指定する条件があったりします。

- ステータスコードが「公開」である
- 画面表示日時が公開日時に含まれている

これを検索のたびに毎回書くのってなんか嫌ですよね。
そこで登場するのがクエリスコープです。

# クエリスコープ

クエリスコープには

- Eloquentモデルを使うと勝手に条件が追加されるグローバルスコープ
- 条件を一つのメソッドにまとめて、条件を追加したい時にだけ使うローカルスコープ

があります。

今回は、過去の記事を取得したいケースも考慮し、グローバルスコープではなく、「公開中の記事を取得する条件」をローカルスコープで定義してみます。
グローバルスコープについては公式ページとか日本語サイトを見てみてください。

## ローカルスコープの定義

ローカルスコープの場合、使いたいモデルに`scope`という文字を頭につけたメソッド名を定義する。

```Blog.php
<?php

namespace App\Models;

use Carbon\Carbon;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Blog extends Model
{
    use SoftDeletes;
   
    /**
     * 公開中の条件
     *
     * @param $query
     * @return mixed
     */
    public function scopeOpen($query){
        return $query->where('status', 1)
            ->whereDate('start_at', '<=', Carbon::today())
            ->whereDate('end_at', '>=', Carbon::today());
    }
}

```

## 使い方

使うときはこんな感じ。`scope`を取り除いたメソッド名で呼び出す。

```php

public function getBlogsOrderByStartAtDesc(){
        return Blog::open()
            ->orderBy('start_at', 'desc')
            ->get();
}
```


今まで知らなくて同じ様な条件をいっぱい書いていた気がします。
これを使えば、条件の書き忘れもないし、仕様変更で条件を変える時もここだけ直せば良いので便利です。

ただ、便利な分なんでもできてしまいますが、クエリスコープのメソッド内では単純な条件追加だけにしておいて、if文などの複雑なロジックは書かない方がいいと思われます。
処理が追いにくくなったり、メソッド名と処理内容が乖離してしまったりして事故の元になるので。
GoogleCloudStorage→AWS S3のsync

* S3に書き込み権限を持つIAM userを用意する
* ~/.botoにCredentialsを書く
* ~/.botoに認証バージョン4対応設定を書く

```
[Credentials]
aws_access_key_id=xxxxxxxx
aws_secret_access_key=xxxxxxx

[s3]
host = s3.ap-northeast-1.amazonaws.com
use-sigv4 = True
```

```
gsutil rsync -d -r gs://bucketname/2019 s3://bucketname/2019
```

## memo
ファイルは転送されるが、中身が権限エラーとなり正しく書き込まれなかった。認証バージョン4対応が必要なことに気づかずハマった。gsutil v4.28以降が必要なので、古ければupdateが必要

rsyncに-dオプションがついているので、入力を間違えるとS3の中身がきれいさっぱり消えるので注意すること

## 参考
[amazon-s3 – 認証が原因でgsutilがs3にコピーできない](https://codeday.me/jp/qa/20190519/861167.html)
[CloudStorage config](https://cloud.google.com/storage/docs/gsutil/commands/config#additional-configuration-controllable-features)
[CloudStorage rsync](https://cloud.google.com/storage/docs/gsutil/commands/rsync)
[AWS Service Endpoints](https://docs.aws.amazon.com/general/latest/gr/rande.html#s3_region)
つまらないミスを指摘されないための Git Commit

子どものころから忘れ物やケアレスミスが多く、
「テストの時間の半分は見直しに使いなさい！」と言われて育ち（？）ました。

チーム開発では「うっかり Commit 」でレビュアーに迷惑をかけてしまったり、
本番の不具合に繋がったりするので、最大限気をつけています。
（それでもまだうっかりしてしまうことがある😫）

他にオススメのセルフチェック法など、コメントいただけると嬉しいです！！

## こまめに Commit する
Commit の単位が大きくなればなるほど、差分から「うっかりコード」を見つけづらくなります。
例えばあるリソースのCRUD機能を作る場合、CRUDそれぞれで Commit を分けたり、
さらにバックエンドとフロントで分けたりと、出来るだけ **小さい単位でCommit** するよう心がけています。

※2019/10/26 追記（コメントでいただいたアドバイス）
レビュアーにとって差分の確認がしやすい Commit にするため、
後から `git rebase` と `fixup` コミット(もしくは `squash` コミット) を使ってまとめると良さそうです！

## git add -p
差分のブロック単位でインデックスに追加する

```
git add -p
```

ブロック単位で `add` できるので、不要な修正が見つけやすくなります。
自分は新規ファイル追加以外で `-p` オプション無しの `add` を使うことはありません。
全部打つのは面倒なので `git adp` で使えるようにエイリアス登録してます😃

## git status
ファイルのインデックス状況を確認する

```
git status
または
git status --short
```

上記の `git add -p` では新規追加したファイルを `add` できないので、
新規ファイルが unstaged 状態で残っていることがあります。
`git status` すればそれを発見できます。
また誤って add してしまったファイルがあればそれも見つけられます。
`--short` オプションをつけると、より一覧性が高く見やすくなります（2019/10/27追記）
`git st` でエイリアス登録しています。

## git diff --cached | grep log
デバッグコードが残っていないかチェックする

```
git diff --cached | grep log -b20
```

`git diff --cached` はインデックスされたファイルの差分を確認するコマンドです。
これに `log` の `grep` をかけることによって、 `console.log()` 等デバッグコードの
消し忘れを発見できます。
`git dc` で前半部分を打てるようにエイリアエス登録してます。

## プルリクの差分をじっくり眺める
プッシュ後にプルリクを作る際、 コードの差分をジィッ・・・と眺めます。
ブラウザで見ると全体を俯瞰しやすく、レビュアー目線で
「ここもっといい感じに書けるのでは？」みたいなのも発見できたりします。

## 追記
コメント欄で教えていただいた手法などをこちらに追記します！

### git commit -v
※2019/10/16 追記

```
git commit -v
```
コミットメッセージの編集画面にファイル名だけでなくコードの差分まで表示してくれます。
私はいつも `git commit -m` でサクッとコミットしてしまっていたけど、確かにこのタイミングはミスに気づきやすそう👀

### GUI ツールを使う
※2019/10/24 追記
GUI ツール（SourceTree等）だと一覧性も高く見落としが少なくなりそうです。
自分は CUI の操作感が好きで戻れないですが、使ったことのない人は一度試して良いかも。

### tigを使う
※2019/10/24 追記
CUI で git を便利に使えるツール。しらなかった！
`git add -p` はパッチ単位の add ですが、 tig なら１行単位で add できるようです👀
Mac なら Homebrew で簡単にインストールできます。

## git add -i
※2019/10/27 追記
```
git add -i
```
インタラクティブな `git add` 。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135266/29b57984-b936-a6fa-e66b-76aa8f3954ab.png)
対話的な `add` で、 `git add -p` と `git status` をまとめてできるようなイメージですね！
追加漏れを防ぐのに良さそうです。

## まとめ
個人の習慣があると思うので、みんながどうやってるか聞いてみたい！
京都府の今日の天気予報を気象庁のページからとってきて表示する

#天気を表示したい
slack に毎日天気を表示させるために気象庁のページから今日の天気予報をスクレイピングしました

そのうち gem にしたいとは思うけれど時間があまりとれないので、ここに張り付けておく


##気象庁の天気の注意ポイント
* 毎日5時・11時・17時に発表される
* 予報なので発表時点で過去のデータは表示されない  
  例えば 11時の発表時点で 00-06 と 06-12 の予報は削除されている

##ソースコード
なので下のコードで　Safe Navigation Operator つけて空文字表示を実現しています
なおライセンスは MIT にしておきます。

```
require 'mechanize'

agent = Mechanize.new
page = agent.get("https://www.jma.go.jp/jp/yoho/333.html")
prefecture = page.at(".titleText").children.text.delete("天気予報\n： ")
table = page.search('#forecasttablefont')
INDEX_1_AREA = 3
INDEX_1 = 5
today_weather = []
today_weather[0] = {}
today_weather[0][:area] = table&.children[INDEX_1_AREA]&.search(".th-area")&.children&.at("div")&.children&.first&.text
today_weather[0][:weather] = table&.children[INDEX_1]&.search(".weather")&.children&.search("img")&.attribute("alt")&.value
today_weather[0][:rainy_percent] = table&.children[INDEX_1]&.search("table.rain")&.search("td")&.map(&:children)&.map(&:text)
today_weather[0][:temp] = {min: table&.children[INDEX_1]&.search("table.temp")&.search("td.min")&.children&.text, max: table&.children[INDEX_1]&.search("table.temp")&.search("td.max")&.children&.text}

INDEX_2_AREA = 11
INDEX_2 = 13
today_weather[1] = {}
today_weather[1][:area] = table&.children[INDEX_2_AREA]&.search(".th-area")&.children&.at("div")&.children&.first&.text
today_weather[1][:weather] = table&.children[INDEX_2]&.search(".weather")&.children&.search("img")&.attribute("alt")&.value
today_weather[1][:rainy_percent] = table&.children[INDEX_2]&.search("table.rain")&.search("td")&.map(&:children)&.map(&:text)
today_weather[1][:temp] = {min: table&.children[INDEX_2]&.search("table.temp")&.search("td.min")&.children&.text, max: table&.children[INDEX_2]&.search("table.temp")&.search("td.max")&.children&.text}

result = "```\n"
result << "#{prefecture}\n"
today_weather.each do |v|
  result << "───────────\n"
  result << "#{v[:area]}\n"
  result << "#{v[:weather]}\n"
  result << "🗾降水確率\n"
  v[:rainy_percent].each_slice(2) do |r1, r2|
    result << "#{r1} #{r2}\n"
  end 
  result << "🌡️気温\n"
  result << "最低 #{v[:temp][:min]}\n"
  result << "最高 #{v[:temp][:max]}\n"
end
result << "```"
puts result
```

https://gist.github.com/masoo/a26c7faa4361f765ab23c222f1cb7025
mongoose でデータの登録直後に検索を行う際の注意点

mongooseではデータの検索(find)や登録(save)は非同期で処理されるため、処理の順番に注意する必要があります。
#検索(find)について
検索(find系の関数)については、awaitを利用して検索処理の結果を待つことができます。

```node.js:コード
  console.log('before find.');
  let result = await hogeCollection.find((err, result) => { console.log('found.'); });
  console.log('after find.');
```

```node.js:結果
before find.
found.
after find.
```

#登録(save)について
登録(saveやcreate)については、awaitでは処理結果を待つことができません。

```node.js:コード
  console.log('before save.');
  await foo.save((err, result) => { console.log('saved.'); });
  console.log('after save.');
```

```node.js:結果
before save.
after save.  ← 登録処理のコールバックより先に実行されている
saved.
```

#つまり？
例えば、データを一旦DBに登録してから、登録したデータを含めて検索をしたい場合、上記のコードを登録→更新の順に並べても、登録が完了するより先に検索が走ってしまう場合があり、期待した結果が得られないことがあります。

#どうすればよい？
登録が完了してから検索が実行されるように、then()を利用しましょう。

```node.js:コード
  foo.save().then(() => {
    hogeCollection.find({}).then((result) => {
      // 検索してから実行したい処理
    });
  });
```
JavaScript　覚えておくべき注意点！（６）　メソッド / 関数の書き方と呼び出し方 / 関数と変数の有効範囲の関係を知りましょう / 即時関数

#★関数のメリットを知りましょう
###複雑な手順を纏める
　関数は、複数の文で書かれた命令に名前を付けて、まとめて呼び出せる仕組みです。
###読みやすくて再利用しやすいプログラムが書ける
　第二のメリットは、「プログラムが読みやすくなる」ことと、「プログラムを再利用できる」ことです。
###始めから用意されている関数も沢山ある
　本当は複雑な手順が必要なプログラムも、関数化することで簡単に利用できるようになっているのです。

```javascript:kansuu.js
console.log 関数 // コンソール情報を表示
alert 関数 // 警告ダイアログボックスを表示
prompt 関数 // 入力ダイアログボックスを表示
parseFloat 関数 // 文字列を数値に変換
confirm 関数 // 確認ダイアログボックスを表示
```
始めから用意されている関数の種類は[JavaScript メソッドの索引](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Methods_Index)を参照してください。

#★関数の書き方と呼び出し方
関数を定義するには、
function の後に関数名を書き、そのブロック {} の中に関数の中で実行したい処理を書きます。
関数の後の()には、必要に応じて引数（ひきすう）を定義します。
引数は関数を呼び出す側から関数中で使用する値を渡す仕組みです。
returnは関数の終了を意味します。returnと同じ行には、呼び出し元に返す「戻り値」を指定することができます。
returnがない場合は関数は最後まで実行され、戻り値が undefinedとなって終了します。
 
```javascript:kansuu2.rb

function getResultMsg (com,hum) { 
/* 順番に、function:functionキーワード、getResultMsg:関数名、(com,hum):カンマを区切って引数を指定 */
	行いたい処理
	return result; 
/* 順番に、return:returnキーワード、result:戻り値 */
}
```
####挨拶プログラムを関数化してみる　プログラムを書く

```javascript:kansuu3.js

var name = prompt('名前を入力してください');
greet(name);

function greet(name) {
	var message = 'こんにちは';
	alert(message + name);
	return;
}
```

#★関数と変数の有効範囲の関係を知りましょう
下記の書き込みは、実際間違っている例文です。
変数には、ローカル変数とグローバル変数という違いが乗り越えられない場合があるからです。

```javascript:kansuu4.js

/* 中略 */

function greet(name) {
	var message = 'こんにちは';
	alert(message + name);
	return;
}

console.log(message);
// messageが定義されていないというエラーになる。
```

#★即時関数
下の関数を使うとグローバル変数をローカル変数に代えることができます。
即時関数を書くには、関数を定義する際の関数名を省略して全体をカッコ「()」で囲み、最後に「()」;を付けます。

```javascript:kansuu5.js
(function () {
	この中に記述した処理はすぐに実行されます
	この中で宣言した変数は、ローカル変数となる
})();
```
参照：
[いちばんやさしいJavaScriptの教本](https://book.impress.co.jp/books/1116101117)
webサイト制作時におけるiOS Safariでの罠

遭遇次第追記します

## フォントサイズおかしい

```css
html {
  -webkit-text-size-adjust: 100%;
}

```

上記でおそらく意図したとおりになるが、`normarize.css` を素直に使えばいい気がする

## ある要素内でスムーズにスクロールしない

その要素に `-webkit-overflow-scrolling: touch` を指定する

## スクロールを固定できない

`overscroll-behavior` はまだ使えない

https://github.com/willmcpo/body-scroll-lock

上記を使うとちょうど下端についているときに下端に行こうとすると、その跳ね返りがなくなるので場合によってはこれでも解決しない可能性はあるかもしれない（が、その対応策もわからない、下端にいったら1pxずらすとかだろうか……:scream:）

ちなみにこのライブラリを使っていてもノッチのあるデバイスを横向きにした場合のセーフエリアでスクロールができてしまうらしいので、対応が必要な場合には予めセーフエリアを無効化するような対応が必要になる

## tbody, trの背景のグラデーションがおかしい

thead, thead, tfoot, tr にbackground-imageでグラデーションをかけると、tdにそれぞれのセルにグラデーションがかかってtrなどの行全体にたいしてのグラデーションにならない。
Start-Processとログファイル


Start-Processコマンドを実行し、外部プログラムを呼び出すことはよくあることだと思います。
ただ、その結果をファイルに出力しようとしてはまりました。。。

今後の覚書として。。

Start-Processの基本構文

```PowerShell:基本構文
Start-Process -FilePath プログラム -ArgumentList オプション -RedirectStandardOutput ログファイル
```

例：jstatを実行し、結果をgc.logファイルに出力する

```PowerShell:例：jstatを実行し、結果をgc.logファイルに出力する
Start-Process -FilePath "c:\jdk-11.0.2\bin\jstat.exe" -ArgumentList "-gc 8855 5000" -RedirectStandardOutput c:\gc.log
```
※この時、ログファイルは上書きされてしまうということに注意。
　事前に実行時刻をログファイルへ出力していても上書きされるため消える。
　代替案として実行時刻を変数に格納し、その後ファイル名に付与することとした。

```powershell:ファイル名に実行時刻を付与する
$DateTime=Get-Date (Get-Date).Datetime  -Format yyyyMMdd_HHmmss
rename-item -Path "c:\gc.log" -NewName "c:\gc_$DateTime.log"
```
SVNからGitに移行して良かったと思う点、悪かったと思う点

私の職場ではSVNからGitに移行して間もなく2年になります。移行の推進に関わった私の視点から、Gitにして良かったと思う点を綴っていきたいと思います。

少々Gitの用語を使ってますので、Gitとは？を一通り学び、実際に導入しようか考え始めた方に向けて書いています。

# 良かったと思う点

## コミットが気軽に出来るようになった

Gitでコミットとは、ローカルリポジトリに変更内容を記録するだけ。リモートリポジトリにPushしない限り皆に影響を与えません。

そのため、ローカルリポジトリで検証をして問題無ければリモートリポジトリに上げるという手法が取れますので、コミットの心理的なハードルが下がります。


## Branch作成のハードルが下がった

Gitでは非常に容易にbranch作成が可能になっています。

SVNのようにbranchesを選んで・・・といったStepが不要となっていますので、誰でも簡単に作れちゃいます。

もちろん、ローカルリポジトリにこっそりプライベートのbranchを作ってテストなんてことも容易です。リモートリポジトリにPushしない限り、皆には見えません

私の職場ではSVNを使っていた頃、Externalsを使っていたのでbranch作成が難しく、SVNの管理担当に依頼して作っていたという背景がありました。

Gitに変える際、このExternalsを解消して運用に落とし込んだということがありました。

確かにGitにはSubmoduleやSubtreeといった似たような機能がありますが、これらはリポジトリの管理を難しくするので、まずは無くすことは出来ないかを検討するのが賢明です。


## コードレビューの必須化が実現できた

Gitの基本Stepとして、まずbranchを作って自分の変更を入れます。それをリモートリポジトリにPushしたら、

master branch(SVNで言うtrunk)にマージしても良いか？というリクエストを立てます。

ここでコードレビューし、OKであればマージということが実現できます。GitHubではプルリクエスト、GitLabではマージリクエストといいます。

master branchへのPushを直接できないように制限をかけられます。これによってコードレビューを必須化することが出来ました。


## レビューフィードバックへの心理的負担が軽減された

コードレビューした結果、修正があったとしましょう。

私の職場ではSVNだとpatch運用でレビューしていたので、そういった場合には修正patchを作り直して上げ直すと言った手間があります。

しかもpatch間の差分は見づらい・・・

これがGitだと、修正をもういちどリモートリポジトリにPushすればよいので、非常に楽ちん。さらにレビュワーは修正間の差分も見れます。

これにより、気を遣わないで些細なコメント間違いでも指摘しやすい環境になりました。


## Branch間のマージが容易になった

年度毎にコードを分けているような環境だと、最新で見つかったバグ、もしくは過去のコードにバグを見つけた場合、年度毎にマージする必要が出てきます。

SVNだとこれが結構手間でした。Gitだと実はこれがブラウザ上で数クリックでできちゃいます。

レビューが終わってマージが完了した後、Cherry-pickという機能を使うと、その変更を他のどのbranchにマージするかを指定するだけで、反映ができます。

あまりに簡単なので、何なら気づいたら修正を入れた本人じゃなくても出来てしまうという素晴らしさ。これが導入後非常に好評でした。



# 悪かったと思う点

# 教育コスト

便利な機能が増えた分、Gitは概念が複雑です。

そのため、最初は色々と疑問が出ますので、答えられる人を立てて運用を開始する必要があります。

私の場合は、何名かチームの中心になりそうな人を集めてGitの外部講習を受け、チーム毎に窓口になるという方法を取りました。

とはいえ、大変なのは最初だけで、数カ月もすれば皆慣れて質問もほとんど出なくなりました。


# リバートの考え方(限定的かも）

Gitにはリビジョンという概念が無いので、戻すという考え方は難しいところがあります。

そのため、実動ベースでどの変更から不具合が起こったか特定する場合などに、変更を１つ１つリバートしたりします。

Gitではそういった手法が取りづらいデメリットがあります。

Gitはマージする時にSquashマージという手法を取るのが一般的で、これはbranchからマージする時にログを1つにまとめる方法です。

ログが1つにまとまるということは、コミットがひとかたまりになりますので、master側の変更点は見やすくなるものの、

SVNでやってた変更単位でリビジョンを戻して・・・といった手法は取れなくなります。branchも用が済めば消しちゃいますしね。

この辺りはSVNよりコミットの粒度が大きくなり、手間がかかる点ではありますが、

そもそもあまりこういったことに直面することは無いので、それほど大きいデメリットになっていないです。


# Branch増えすぎ

branchが手軽に作れる分、増えます。かなり増えます。

増えるとCloneやPullの時間が遅くなるといった、パフォーマンスへの影響を与えます。

また、branch一覧に大量にbranchが出てくるので、目的のbranchを見つけにくくなりますので、定期的に消す必要があります。

SVNだとbranchを消すということはあまり考えられないですよね。

Gitではレビューが終わってマージすると同時にbranchを消すという操作が出来ます。

これを徹底しておかないと、増えまくりますので、気を付けて運用しましょう。


# 周りの説得の難しさ

Gitはチーム全員の協力あってこそ運用が成り立つものですので、実はここが一番難しいところかもしれません。

上記のメリットを説明しても、やっぱりデメリットを見てしまう方は居て。

最終的には

「Gitはトレンドなので、ソフト屋として今後覚えておいて損は無い！転職で有利に働くかもよ！」

という論法が一番効きましたね（笑）

それにはやはり、しっかりと皆に説明する場は必要です。やるからには皆が納得して導入したいものです。


# 結論として

導入には色々と障害はあったものの、悪い点を鑑みても余るぐらい利点の方が多かったです。

まだまだSVNを利用している会社は多いと思います。今Git移行に悩んでいる方の後押しになれば幸いです。
micro:bitのMakeCode拡張ブロックをつくる

# 環境

- Windows10


# 概要

Windows10上にMakeCodeの拡張ブロックをつくる開発環境 pxt-microbit を構築して、拡張ブロックを開発する。

[pxt\-microbit](https://github.com/microsoft/pxt-microbit) は node.js でつくられた pxt 開発環境のターゲットの一つであり、TypeScript と C++ によって MakeCode の拡張機能を開発することができる。

pxt-microbit は micro:bit の実行ライブラリ [micro:bit runtime](https://lancaster-university.github.io/microbit-docs/) を直接利用したプログラムを組むことができる。


# pxt-microbitのインストール

## node.js を入れる
pxtは v.8.9.4 以上を要求している。
[Download \| Node\.js](https://nodejs.org/en/download/)
## pxt を入れる

```shell
npm install -g pxt
```


# 拡張ブロックの開発
開発ツールの使い方は [Command Line Tool](https://makecode.com/cli) を参照。

## プロジェクトの初期化

まず、開発ディレクトリでターゲットを設定する。

```shell
pxt target microbit
```
必要となるモジュールをインストールする。

```shell
pxt install
```

## プロジェクトのビルド

`pxt build` するとコードを makecode.com へ送ってコンパイルする。


## プログラムの書き込み

`pxt deploy` すると test.ts が動くプログラムが接続された micro:bit へ転送される。

MakeCode のウェブアプリでビルドしたローカルファイルの `.hex` を読み込んで利用することもできる。


## 拡張ブロックの公開

MakeCode で Github から読み込むと最新バージョンが読み込まれるので、更新するときには `pxt bump` でバージョンアップをする。

すでにその拡張機能を利用している MakeCode プロジェクトならば、`javascript` 表示にしてエクスプローラ―から「更新ボタン」を押すだけでバージョンアップできる。


# 開発ノウハウ

## microbit-dalを変更する
コンパイルに使用される `microbit-dal` のコードは、 `pxt.json` で設定できる。ただし、一旦 `microbit` リポジトリを経由して呼び出されるので、`microbit-dal` を指定する `microbit` リポジトリを作らなければならない。

```json
{
    "yotta": {
        "dependencies": {
            "microbit": "yokobond/microbit#mbit-more"
          }
    }
}
```

`microbit` リポジトリ変更箇所

```json:module.json
  "dependencies": {
    "microbit-dal": "yokobond/microbit-dal#mbit-more"
  },
```
[Comparing lancaster-university:master...yokobond:mbit-more · lancaster-university/microbit](https://github.com/lancaster-university/microbit/compare/master...yokobond:mbit-more)
basic認証ありのサイトを偽装user agentでfile_get_contentsする

headerにbasic認証用のAuthorizationと、User-Agentを追加するだけ(*´▽｀*)

```
    $opts = array(
        'http' => [
            'method' => 'GET',
            'header' => implode("\r\n",[
                'Authorization: Basic ' . base64_encode('ID:PASS'),
                'User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1',
            ]),
        ],
        'ssl' => [
            'verify_peer'      => false,
            'verify_peer_name' => false
        ]
    );
    
   file_get_contents($url, false, stream_context_create($opts));
```
チラ裏: Catalinaに上げたらVirtualBoxが重すぎて使い物にならない場合

* Catalina (10.15アップデート済み)
    * 透明感など軽量化をしてみるも変化なし。
* VirtualBox 6.0.12, 6.0.4, 6.1β試した
    * 仮想化のタイプをKVMなどに変更するも変化なし。

=> VMWare Fusion を使うと、これまで通り軽かったのでそちらに移りました。

=> VirtualBox 6.0.14 だと我慢できる程度の速度で動くようになりました。
neovimをpynvimにしないとエラーになる話

# :healthcheckをかけたら・・・
python２でエラーが発生している。

```
## Python 2 provider (optional)
  - INFO: pyenv: Path: /usr/local/Cellar/pyenv/1.2.13_1/libexec/pyenv
  - INFO: pyenv: Root: /Users/oosakinaoya/.pyenv
  - WARNING: No Python executable found that can `import neovim`. Using the first available executable for diagnostics.
  - ERROR: Python provider error:
    - ADVICE:
      - provider/pythonx: Could not load Python 2:
          /Users/oosakinaoya/.pyenv/shims/python2 does not exist: pyenv: python2: command not found
          
          The `python2' command exists in these Python versions:
          2.7.16
          
          
          /Users/oosakinaoya/.pyenv/shims/python2.7 does not exist: pyenv: python2.7: command not found
          
          The `python2.7' command exists in these Python versions:
          2.7.16
          
          
          python2.6 not found in search path or not executable.
          /Users/oosakinaoya/.pyenv/shims/python is Python 3.7 and cannot provide Python 2.
  - INFO: Executable: Not found
```

どうやらpyenvでpython2をグローバル指定してないのが問題なようです。

## pyenvでpython２と３をglobal指定する

```
$ pyenv global 3.7.4 2.7.16

$ pyenv versions
 system
* 2.7.16 (set by /Users/oosakinaoya/.pyenv/version)
* 3.7.4 (set by /Users/oosakinaoya/.pyenv/version)
```

２つが指定されました。これでこのエラーは解決しただろうと思ってもう一度:healthcheckをかけてみます

## 第2のエラー

さて、エラーが変わりました。何でしょうねこれはまた。

```
## Python 2 provider (optional)
  - INFO: pyenv: Path: /usr/local/Cellar/pyenv/1.2.13_1/libexec/pyenv
  - INFO: pyenv: Root: /Users/oosakinaoya/.pyenv
  - WARNING: No Python executable found that can `import neovim`. Using the first available executable for diagnostics.
  - ERROR: Python provider error:
    - ADVICE:
      - provider/pythonx: Could not load Python 2:
          /Users/oosakinaoya/.pyenv/shims/python2 does not have the "neovim" module. :help |provider-python|
          /Users/oosakinaoya/.pyenv/shims/python2.7 does not have the "neovim" module. :help |provider-python|
          python2.6 not found in search path or not executable.
          /Users/oosakinaoya/.pyenv/shims/python is Python 3.7 and cannot provide Python 2.
  - INFO: Executable: Not found
```

:help provider-pythonをしてみろと言ってますね。
そうすると、下記のコマンドを打ってみろという文章が出てきたので打ってみます。

```
$ python2 -m pip install --user --upgrade pynvim
```

**おめでとう！neovimはpynvimへと進化した！**

どうやらモジュールの呼び出し方が変わったようで、neovimで呼び出すとコンフリクトエラーを引き起こすようで、これが今回のエラーの原因です。これで完了です。
Laravel  form内 old関数使用例

inputタグ
name属性の値を、old()の引数に入れる。


     <input type="title" name="title" value="{{ old('title') }}" class="form-control" id="input_title" placeholder="old関数の引数にname属性で指定した値を入れてる。">


textareaタグ
<textarea>ここにold()入れる。</textarea> oldの引数にはname属性の値を入れる。


     <textarea type="text" name="body" class="form-control" id="input_body">{{ old('body') }}</textarea>

selectタグ
selectのname属性の値をold()の引数に指定
if分でidの値が「１」なら@if(old('id')=='1') selected  @endif　がselectedされる感じ。



    <select name="id">
        <option value="1" selected　@if(old('id')=='1') selected  @endif>1</option>
        <option value="2" @if(old('id')=='2') selected  @endif>2</option>
        <option value="3" @if(old('id')=='3') selected  @endif>3</option>
    </select>
Neo4jでプロパティの上限と下限を設ける



# 値の上限と下限

Neo4jを使っていると、ラベル`Node`のプロパティyearは必ず1900~2100以内を保っていてほしいな〜〜
といった、**プロパティの下限と上限を定めたい**ときがあります。

Neo4jの性質上、各ノードごとにそのような制約を作ることはできませんが、上限と下限からはみ出していたら強制的に丸め込むということは可能です。

# 値の丸め込み

以下のような句法を利用します。

```
MATCH ()-[r:Link]->() SET r.pheromone = CASE WHEN r.pheromone <1.0 THEN 1.0 WHEN r.pheromone > 3.0 THEN 3.0  ELSE r.pheromone end
```


まず、MATCHで値の上限と下限を求めたいオブジェクト集合を取り出します。
その後、SET構文で値の再設定を行います。

ただし、下限や上限をはみ出していた場合強制的に丸め込みたいため、
CASE文を使い

1. WHEN lower_valueよりも下回っているなら lower_valueを設定する
2. WHEN upper_valueよりも上回っているなら upper_valueを設定する
3. 1, 2でないなら上限と下限の内側のため、そのままのオリジナルの値を返す

を行えば、値の丸め込みを行えます。

# 最後に

Neo4jはまだ三日ほどしか使っておらず、完全に雰囲気でしか使えていません。（複雑なものは一切知りません...）
間違っている部分がありましたら、ご指摘いただけるとありがたいです！
AWSのMFA(二段階認証)をHuawei P9liteで有効にしようとしたら 1時間ハマった話

#端書き
**３年程前に書いた記事です。Qiitaのマークダウンをお勉強のため再掲しました。**
                     **～以下、本文～**

Cloud9環境利用のため、AWSの利用を開始しました。
様々な記事でMFAを有効にしないとキケン！と警鐘を
鳴らしている方がいらっしゃり、実際に不正ログインに
よる被害も発生しているためMFA有効化を行いました。

結果、1時間余りハマり体力が削られたため備忘も兼ねて
記事に起こしました。

#注意点
Google Play開発者サービスの強制停止及び初期化を含みます。
この作業による影響は調べてないため不明です。
1週間ほど経過して問題は発生していませんし、root権限で
いじる訳でもないですがくれぐれも自己責任での実施をお願いします。

#この記事のポイント
・大筋では@viptakechaさんの記事通りで大丈夫
https://qiita.com/viptakechan/items/6d19aee635b2ab189e47
・筆者の端末(HUAWEI P9lite)だと大ハマりする点を紹介
　古い端末(2016年頃)のため起こる様子。最近の端末だと
　起こっていない？
・わかりにくい日本語表現をできるだけ丁寧に解説


#1.Google Authenticatorをインストール
※アプリの初回起動時にカメラの使用に必ず許可を与えて下さい。

#2.Googleアカウントの設定
端末の『設定』⇒『google』⇒『Googleアカウント』⇒『セキュリティ』※1
⇒『2段階認証プロセス』を有効化&認証システムアプリの登録
　このときに端末画面上にQRが表示され、アプリで読み取れとの指示がでるが
　もちろん読み取れません。
　（画面上のQRを背面カメラで読み取る方法があるのか5分ぐらいガチで迷いました）
　（もちろんそんな超技術はありません）
　コードを発行し、google Authenticatorに手入力しましょう。
　尚、当たり前なのですがノートPCに表示さえ認証したところ
　ノートPCが無事端末として登録されました。

※1　メールアドレス下をスライドすると出てきます

#3.Google Play開発者サービスの初期化
ここが一番のハマりポイントでした。

・Googleアカウントへの端末&アプリのセキュリティ的な登録は完了
・アプリから端末カメラの使用は許可されている
にも関わらずGoogle AuthenticatorからQRを読み込むべくカメラを使用
しようとすると『バーコードリーダーは利用できません』が表示されました。

やり方
アプリ一覧⇒Google Play開発者サービス⇒強制停止⇒再インストール⇒端末再起動

で無事バーコードリーダの使用ができるようになりました。

#4．AWSの『MFAデバイスの管理』で認証コード1、認証コード2
地味にハマりました。

QRコードを読み取る⇒パスワードが表示（認証コード1入力)
⇒数十秒後、パスワード切り替わる(認証コード2に入力)

※二段階認証を有効化するとプリインストールのgmailアプリが
　メールを取得できなくなります
googleアカウントよりアプリパスワード発行、アプリ起動時に要求される
パスワード欄に入力すればOK
（つまり既存のパスワードはアプリ向けのパスワードとしては使用できなくなる）
NextEngineのAPIの更新タイミングについて

# NextEngineのＡＰＩ
認証のためにアクセストークンが必要です。
oAuthっぽいプロトコルだけど、Railsでのdevise+omniAuthで動きます。
deviseプラグイン欲しい人は声かけてください。

## トークンが更新タイミングがわからない
明示的にトークンを更新する手段がないので、ループアクセス最中などにトークンがかわるケースがある。そのために、途中でAbortするケースが多々ある。また、ログインをするとかならず変わる。

## 実験の結果
10分に1回、企業情報をとるＡＰＩにアクセスをした。するとトークンが発行されて24hを越えた最初のアクセスのタイミングで更新がされる。逆に言えば、連続アクセス中に24時間を経過した場合に、突然トークンが更新されたりする。そのため、かなりめんどくさい。

## 対応方法
要はアクセスされる前に更新しちゃえばいい。なので、バッチジョブの前に企業情報にアクセスするなどの処理をすることその時点で更新可能なトークンは更新処理を走らせることができる。そのため、「バッチ処理中に２４時間を経過したパターン」以外は回避できる。専用ユーザーを用意して、常にバッチ処理前に更新処理ができるか、「常に最も更新日時が新しいユーザー」をアクセスにすることで実用上は問題は回避できる気がする。

## 結論
有効期限内でAPI経由で意図的かつ明示的に更新できないのつらい。
Elasticsearchのcopy_toで登録された値は_sourceにはいってこない

Elasticsearchのcopy_toを使うと複数のフィールド値を1つのフィールドにまとめることができます。

[公式サイトの例](https://www.elastic.co/guide/en/elasticsearch/reference/6.4/copy-to.html)だと first_name、last_nameのフィールドからfull_nameのフィールドにcopy_toで値をコピーしておいて、full_nameフィールドだけで名前検索っていう例がのってます。

おもしろいなぁとおもったのが、マッピング定義としてはfull_nameフィールドが存在してて、そこに値をコピーしてるんだけど、_search結果の _sourceにはfull_nameが入ってこないこと。

公式の例のとおりindex作成

```
PUT my_index
{
  "mappings": {
    "_doc": {
      "properties": {
        "first_name": {
          "type": "text",
          "copy_to": "full_name" 
        },
        "last_name": {
          "type": "text",
          "copy_to": "full_name" 
        },
        "full_name": {
          "type": "text"
        }
      }
    }
  }
}
```

データ投入して検索。

```
PUT my_index/_doc/1
{
  "first_name": "Ryuji",
  "last_name": "AMANO"
}

GET my_index/_search
{
  "query": {
    "match": {
      "full_name": "Ryuji"
    }
  }
}

// 結果
{
  "took": 53,
  "timed_out": false,
  "_shards": {
    "total": 5,
    "successful": 5,
    "skipped": 0,
    "failed": 0
  },
  "hits": {
    "total": 1,
    "max_score": 0.2876821,
    "hits": [
      {
        "_index": "my_index",
        "_type": "_doc",
        "_id": "1",
        "_score": 0.2876821,
        "_source": {
          "first_name": "Ryuji",
          "last_name": "AMANO"
        }
      }
    ]
  }
}
```

こんな感じで確かにcopy_toで保存したフィールドは_sourceには出力されません。

じゃ、full_nameに直接値をつっこんだら？

```
PUT my_index/_doc/2
{
  "full_name": "Nobunaga ODA"
}

GET my_index/_search
{
  "query": {
    "match": {
      "full_name": "ODA"
    }
  }
}

// 結果
{
  "took": 3,
  "timed_out": false,
  "_shards": {
    "total": 5,
    "successful": 5,
    "skipped": 0,
    "failed": 0
  },
  "hits": {
    "total": 1,
    "max_score": 0.2876821,
    "hits": [
      {
        "_index": "my_index",
        "_type": "_doc",
        "_id": "2",
        "_score": 0.2876821,
        "_source": { // 今度はfull_nameが表示される。
          "full_name": "Nobunaga ODA"
        }
      }
    ]
  }
}
```

同じフィールドなのに表示されたり、表示されなかったりっていうのは 普段MySQLいじってる感覚からすると奇妙にも思えるんですが、 _source は、 PUT 等で登録された入力値だって思えばなんとなく納得できますかね。

PUTで直接full_nameに入れれば、_sourceにfull_nameありだし、copy_toでfull_nameにコピーしたときは、full_nameのインデックスに内部的に登録はされてるけど、_sourceでは無いってことかなと。
FuelPHP1.8.2でSessionが全く動かなかった件

#FuelPHP1.8.2でSession(file)が動かない

FuelPHPの最新Verである1.8.2を試してみると、セッションが全く動かない事実に気づいた。
環境はPHP5.4。Windowsの開発マシンで、将来的にはCentOS7で稼働させる予定のお話です。

どんなにSessionに情報を保存して保存されない。
ていうかCookie見てみるとSessionの情報がくっついてきてないのね。
ちなみにセッションの種別は"file"。


んで、ログを見ると、

ERROR - 2019-10-15 19:02:02 --> shutdown - Fuel requires Sodium support in PHP. Either use PHP 7.2+, install the libsodium PECL extension, of the sodium-compat composer package! in C:\xampp\xxxxxxxxxx\vendor\paragonie.php on 33

なんてエラーが出てる。
ログに出るだけで画面がエラー吐くわけではないので、このログを見つけるまでに３０分ぐらい。

言われたライブラリ"libsodium"を使おうとしたけど、なんかPHP5.5以上のバージョンしかないｗ
PHP5.4対応がウリのフレームワークちゃうんかいｗｗ


続いて"paragonie/sodium_compat"をcomposerで入れてみた。
入った。
だが何故かダウングレードしていくFuelPHPの各ライブラリ。Why。


#どうしたのか
とりあえず、ダウンロードしてきたparagonie/sodium_compatとrandom_compatを手動でfuel/vendorに張り付けて、fuel/app/bootstrap.phpに手動でオートロードを書く。

```bootstrap.php

require APPPATH ."../vendor/paragonie/random_compat/psalm-autoload.php";
require APPPATH ."../vendor/paragonie/sodium_compat/autoload.php";
```

これで動きました。
詳しくは知らないけど、悩んでる人がいたら参考にどうぞ。

#愚痴る
しかし1.8.0.x⇒1.8.1で急にDB結果を配列で扱えなくなったり（IFが飛んでる）、セッションの関数が消されたり（Session::writeとかね）と、正直あまりにもリビジョン上げるのにこれはないんじゃない感が半端ないわ。。。
配列で扱えるように修正されたので、1.8.2に手を出してみたけど、やっぱ……ちょっと今後お付き合いしていく上で不安は隠せませんね。。。
npmによる開発環境の構築の手間を最小限に減らすため、オリジナルパッケージを作る

# npmによる開発環境の構築の手間を最小限に減らすため、オリジナルパッケージを作る

## １．環境構築が面倒くさい

　私が記事を書くといつも面倒くさいがキーワードになっている気がします。とにかく開発を行っていると面倒くさいことが沢山出てくるのです。新しいロジックを組んだりするのは良いのですが、一度やった作業を何度も繰り返す不毛な時間が面倒で仕方がありません。いかにしてこの無駄を省くか、そんなことを常に考えていることはそれです。

## ２．試しにReact用の環境構築パッケージを作る

　まずはReact+TypeScriptを使うための環境構築を試してみます。これをやる上で最も面倒な部分は、WebPackと依存モジュールの追加作業です。create-react-appを使えば一発ですが、カスタマイズするときに設定をejectしてから修正することになるので、どうせなら最初から見える場所にあった方が楽です。ということでそういうものを作ってみました。

## ３．React+TypeScriptを即使えるようにする

　[setup-template-react](https://www.npmjs.com/package/setup-template-react)を使います  
　適当な空ディレクトリを作り、以下のコマンドを順番に実行していきます。

```sh
npm -y init
npm -D i setup-template-react
npm i
npm start
```
すると以下のような内容が追加されます

```txt
root/  
　├ dist/ (ファイル出力先、ビルドするまで生成されない)  
　└ front/ (フロントエンド用ディレクトリ)  
　　├ public/ (リソースHTMLファイル用)  
　　│　└ index.html  
　　├ src/ (JavaScript/TypeScript用ディレクトリ)  
　　│　├ .eslintrc.json  
　　│　├ index.tsx  (Reactのサンプルコード)
　　│　└ tsconfig.json  
　　└ webpack.config.js  
```
　これで「今日は世界！」という表示を行う最低限のReactのサンプルが動作します。setup-template-reactをインストールした時点で、カレントパッケージの環境を自動的に更新するようになっています。既にプロジェクトが存在するディレクトリでも実行可能です。バックエンド側の構築が終わっていて、フロントエンド側の設定を追加したい場合などにも利用できます。

　ちなみにRailsにFullSPA環境を作るためのパッケージも用意しています。[setup-template-rails-react](https://www.npmjs.com/package/setup-template-rails-react)を使うと、既存のパッケージ内に別枠でReactのビルド環境を生成し、assetsに出力するように構成してあります。

## ４．これを実現するには

　実は本当のメインのお話は環境構築を簡単にすることではなく、環境構築を簡単にするための環境構築を簡単にするための内容です。間違えて二回書いたわけではありません。この環境構築パッケージを作るのを簡単にするために、setup-templateというパッケージを使用します。

### 4.1 環境構築用パッケージの作り方

　環境構築用のパッケージを作るため、適当な空ディレクトリを作ってください。

```sh
npm -y init
npm i setup-template
```

　以下のような構成でディレクトリとファイルを作成します

```txt
root/  
　├ template/ この中に入れたファイルが、インストール時のRootに展開される
　└ options/  
　　├ package.json ターゲットに対して追加設定(結合される)を入れておく  
　　└ message.txt  インストール時のメッセージ  
```


　このようにファイルを用意しておくと、パッケージインストール時にファイルが展開され、ターゲットのpackage.jsonの内容が更新されるようになります。

　後は環境構築用パッケージのpackage.jsonのnameに以下の設定を行います。その他の部分は、特に書き換える必要はありません。

```package.json
{
  "name": "適切なパッケージ名",
  "scripts": {
    "postinstall": "npx setup-template"
  },
}
```

ここまで出来たら

```sh
npm publish
```

を行いnpmに登録しておくことによって、いつでも環境設定が可能になります。

## ５．まとめ

　今回紹介した[setup-template](https://www.npmjs.com/package/setup-template)は、既に存在するプロジェクト内に対して、必要なファイルの展開とpackage.jsonの合成を行うための機能を提供します。オリジナルの環境構築パッケージを作りたいと思った方は、ぜひ使ってみてください。
[メモ]clang 9.0.0をVisual Studio 2019でビルドする

clangをソースアーカイブからビルドする方法のメモです。
動機としては、デバッグシンボル付きのlibclangがほしかったので、自分でビルドしました。

正確な情報が欲しい場合は、http://clang.llvm.org/get_started.html とか http://llvm.org/docs/GettingStarted.html#unpacking-the-llvm-archives を見てください。

## 環境
- Visual Studio 2019 16.3.4
  - ☑ワークロードでC++によるデスクトップ開発をインストールする必要はある。
  - 個別コンポーネントで☑Python 3 64ビット(3.7.4)をインストールする必要はある。
  - 他にも必要かもしれないが、調べていない。
- CMake
- Windows 10 64bit version 1903
- 潤沢なメモリ(とくにリンカーに必要)
- ざっくり42GB以上の空き容量(Debugビルドだとさらに倍以上)

## ソースアーカイブ
llvmとclang、そしておまけでclang-tools-extraをダウンロードしておきます。

- llvm-9.0.0.src.tar.xz
- cfe-9.0.0.src.tar.xz
- clang-tools-extra-9.0.0.src.tar.xz

## ディレクトリ構成
ここでは作業ディレクトリを `C:\tmp\llvm-9.0.0` とします。
その中に、ソースアーカイブを展開します。

```
C:\TMP\LLVM-9.0.0
├─cfe-9.0.0.src
├─clang-tools-extra-9.0.0.src
└─llvm-9.0.0.src
```

リネームします。
そして`build`というディレクトリを作ります。

```
C:\TMP\LLVM-9.0.0
├─clang
├─clang-tools-extra
├─build
└─llvm
```

## CMakeとビルド


x64 Native Tools コマンドプロンプトを開く。

```
REM どうせなら、使いそうなターゲットだけに絞っておくため、`LLVM_TARGETS_TO_BUILD=AArch64;ARM;WebAssembly;X86;RISCV`としておく。
cd C:\tmp\llvm-9.0.0\build
"c:\Program Files\CMake\bin\cmake.exe" ..\llvm ^
 -Thost=x64 ^
 -G "Visual Studio 16 2019" ^
 -A x64 ^
 -DCMAKE_INSTALL_PREFIX=c:\tmp\llvm-9.0.0\install ^
 -DCMAKE_BUILD_TYPE=RelWithDebInfo ^
 -DLLVM_INCLUDE_TESTS=OFF ^
 -DLLVM_ENABLE_PROJECTS=clang;clang-tools-extra ^
 -DLLVM_TARGETS_TO_BUILD=AArch64;ARM;WebAssembly;X86;RISCV

REM 並行ビルド数を2(場合によっては1)にしてビルド。
REM ビルド中に他の作業ができるように、優先度は下げて実行する。

start /BELOWNORMAL /WAIT /B msbuild -m:2 INSTALL.vcxproj -p:Configuration=RelWithDebInfo
```