OmniAICreator/Qiita-1.07M huggingface dataset:
コミットメッセージで絵文字を使う

趣味で作っているアプリのコミットメッセージが無機質だったので、
絵文字をprefixとしてコミットメッセージに含めるようにしました。

一人でサービスを作っていると、
当初の高いモチベーションは時間が経つにつれてしぼんでいきます。

エラーを解決しても一人喜んで、さて次の機能に取り掛かるか。
なんてこともしばしば。

せめてコミットメッセージは華やかにしたい。
そんな思いを絵文字が叶えてくれました。


さて、だらだらと引っ張ることでもないので、やり方いきます。
まずは、リポジトリのルートに`.commit_template`というファイルを作成します。
ファイル名はなんでも良いのですが、それとわかるものにしましょう。
.commit_templateは、コミットのテンプレートになります。

次に、.commit_templateを編集します。
テンプレートはこちらを拝借しました。
[Emojiで楽しく綺麗なコミットを手に入れる | nownabe/.commit_template](https://gist.github.com/nownabe/85d8595fd142adc426fbfaf2bab015e0)

このテンプレートをコピペします。
必要に応じて絵文字を追加したりしてください。

続いて、このテンプレートがコミット時に表示されるようにします。
`git config commit.template .commit_template`
を実行する。

すると、コミット時に.commit_templateに記述した内容が表示されます。
あとは、絵文字をprefixにしてコミットするだけです！

![1__COMMIT_EDITMSG____working_projects_comicolle_comicolle-web__git__-_VIM__vim_.png](https://qiita-image-store.s3.amazonaws.com/0/45577/8fdce8c2-a825-063c-7c51-bee7af9f37de.png)


### 参考
こちらの記事だけでできました。ありがとうございます！
[Emojiで楽しく綺麗なコミットを手に入れる](https://goodpatch.com/blog/beautiful-commits-with-emojis/)
[Gitのコミットコメントを絵文字Prefixにして楽しく開発する
](https://qiita.com/mfks17/items/e68adc058e1a9e519807)
APIについてのまとめ(忘備録)

参考文献[Web API: The Good Parts](https://www.amazon.co.jp/Web-API-Parts-%E6%B0%B4%E9%87%8E-%E8%B2%B4%E6%98%8E/dp/4873116864/ref=sr_1_1?ie=UTF8&qid=1521979320&sr=8-1&keywords=api)
---

## Web API 
HTTPプロトコルを利用してネットワーク越しに呼び出すAPI
    
### API
”Application Programming Interface”の略
ソフトウェアコンポーネントの外部のインターフェイス、つまり機能ははわかっているけれどもその中身の実際の動作は詳しくわからない（知らなくて良い）機能のカタマリを、外部から呼び出すための仕様

* HTTPプロトコルを使うため、エンドポイントはURLによって指定される。
* 簡略化「URLにアクセスすることで、サーバー側の情報を書き換えたり、置かれた情報を取得できたりすることが出来るWebシステムで、プログラム側からアクセスしてそのデータを機械的に利用するためのもの」

### APIでの利用を前提としたサービス
* IaaS      `Infrastructure as a Service`
* BaaS      `Backend as a Service`
* DaaS      `Data Storage as a Servie`

### 何をAPIで公開するべきか
    そのサービスでできる事全て（コアの価値のある部分全て）をAPI経由で行えるようにする。

### APIを公開するリスク
情報・利益が盗まれれる可能性について
  →ユーザーが少ない場合・・・不利益はほぼない。情報を有効活用してくれる・付加価値をつけてくる
  →ユーザーが多い場合・・・可能性はある。注目を集める。自分のサービスを公式でコントロールできるようにしておかないと逆に危険

### API公開で得られる物
    サービスの核と離れた、自分で開発する優先度が低いものを他の誰かが開発して、サービスの付加価値を上げてくれる。
    評判を下げるAPI利用を取り締まれる。（利用規約を設ける。）

### Web APIを美しく設計する必要性
    設計の美しいWeb APIは使いやすい
        →使うユーザーは他人かつ複数である。
    設計の美しいWeb APIは変更しやすい
        →使うユーザーは変化に敏感とは限らない。
    設計の美しいWeb APIは頑強である
        →Webと同じ以上にセキュリティが必要である。
    設計の美しいWeb APIは恥ずかしくない
        →APIは開発者に判断される。

### Web APIを美しくするには
1. 何をAPIで公開するかを決める
2. アクセス先のエンドポイントを決める
3. やりとりする方法や適切なレスポンスデータの形式を決める。
4. セキュリティやアクセス制限を決める。
    
原則

* 仕様が決まっているものに関しては仕様に従う。
* 仕様が存在していないものに関してはデファクトスタンダード（de facto standard 事実上の業界標準となった規格）に従う。  


### 対象となる開発者の数とAPIの設計思想
    LSUDs・・・large set of unknown developers（未知の多数の開発者）
        →パブリックなAPI（Facebook,twitter）
    SSKDs・・・small set know developers（既知の少数の開発者）
        →プライベートなAPI（自社内）


### APIとして公開する機能を設計する
公開したAPIがどのように使われるのか、そのユースケースをきちんと考える。
    
### モバイルアプリケーション向けのAPIに必要な機能
1. クライアントアプリケーションの画面とその遷移を考える
2. どんな機能をAPIで提供しなければいけないかを考える。

### APIエンドポイントの考え方
    エンドポイント・・・APIにアクセスするためのURI
           →APIは多数の機能をもつため複数のエンドポイントがある。

### URL ≠ URI
URIの方が広い概念で、URLはURIの 一部分
URL・・・場所を示す書き方のルール
    →ページや画像などを取得したりするための場所、アクセス方法の指定
    
URI・・・名前または場所を識別書き方のルールの 「総称」(ボス)
    →URLはURIで定められたルールに従って書かれたり使われたりする

例
寿司(URI)
    --握り寿司(URL)
webページのアドレスはURLと呼んでもURIと呼んでもどっちでもよい。

### エンドポイントの基本的な設計
原則：覚えやすく、どんな機能を持つURIなのかがひと目でわかる
* 短く入力しやすいURI
* 人間が読んで理解できるURI
    →単語を省略しない（一般的な省略は良しex.jp）・英語・APIでよく使われているもの・スペルミスを確認する。
* 大文字小文字が混在していないURI
* 改造しやすいURI
* サーバー側のアーキテクチャが反映されていないURI
ルールが統一されていないURI
バイナリファイルを32bit整数の配列としてC++ソースコードに埋め込みたい（Vulkan SPIR-Vとか）

[OpenCLの時](https://qiita.com/aokomoriuta/items/aafd5907e139b58368d4)のようなテキストファイルではなく、VulkanでSPIR-Vのバイナリファイルを32bit整数配列で埋め込みたい時などにどうしたらいいかメモ。

結論から言うと、元のバイナリファイルを `data.bin` とすると

```shell-session
$ cat data.bin | hexdump -v -e '"0x" 1/4 "%08X" ",\n"' > data.txt
```

と変換し、これを

```cpp
constexpr std::uint32_t DATA[] =
{
    #include "data.txt"
};
constexpr auto DATA_LENGTH = sizeof(DATA)/sizeof(std::remove_extent_t<decltpye(DATA)>);
```

とすればいい。

なお、32bit(4byte)ではなく、8bitや16bitにしたい場合は以下の通り。

```shell-session
$ cat data.bin | hexdump -v -e '"0x" 1/1 "%02X" ",\n"' > data.txt
$ cat data.bin | hexdump -v -e '"0x" 1/2 "%04X" ",\n"' > data.txt
```

hexdumpの部分を一応解説しておくと、`-v`はファイル全部を出力するという意味（付けないと途中省略されることがあるので必須）。`-e`は後ろに続く`''`内の文字列形式で出力する。`""`で区切った順番で出力されるので、`"0x?????,\n"`となる。????の部分は`1/4 "%08X"`が該当する。これの意味は、「1つの4byteデータを"%08X"」で出力する。`%08X`は普通のCの`printf`とかで出てくるやつと同じ。今回は「0埋め8文字大文字16進」の意味。なので、8bitと16bitの時は↑のようになる。

`xxd -i`でも似たようなことができるが、変数名とかが勝手についてくる上、出力される形式はコンパイル時定数ではないので、ソースコードへの埋め込みという点ではこの方法がより優れていると言える。
XMindを使ったスキルの棚卸し

今の会社に入って4年。ライターとして入社して、コーダー、デザイナーなど様々なポストを担当してきましたが、来期からはプロジェクトマネージャーも兼任することに。これまでBacklogで管理してきた「習得すべきスキルリスト」を可視化してみたいなと思っていたところ、便利そうなサービスを発見したため試してみました。

# XMind
http://jp.xmind.net

#XMindで出来ること

* マインドマッピング
* ビジネスチャート
* ブレインストーミング　etc

>![macbook.png](https://qiita-image-store.s3.amazonaws.com/0/188964/2b014519-0a89-3cd5-5286-a8c9993d9e0f.png)
（※公式サイトより転載）

マインドマッピングツールではあるものの、プロジェクトの管理ツールとしても使えるそうで、有料版を使えば枝分かれしたタスクをガントチャート化することも可能とのこと。
# ライセンスの種類
* 無料版：XMind 8
* 有料版：XMind 8 Pro

※機能比較：http://jp.xmind.net/store/

# 実際に作ってみました
マッピングするだけであれば無料版でも十分であり、（機能の確認を含め）パワーポイント感覚で15分くらいで下記図が完成！

![必要なスキル.png](https://qiita-image-store.s3.amazonaws.com/0/188964/16dfb82f-cde0-b8dc-9cd6-94d635e61713.png)


「このレベルであれば、紙とペンの方が早いのでは？」という声が聞こえてきそうですが、トピック（項目）の挿入が簡単なため、少し大きめのプロジェクト管理においては重宝しそうです。
地図ライブラリ「Leaflet」で地図上に筋斗雲の現在地をマーキングする

本日も地図ライブラリ「Leaflet」に関する記事です。
以前は、Cluster機能をご紹介しました。[(地図ライブラリ「Leaflet」にcluster機能を追加する)](https://qiita.com/mitch0807/items/52698a561d4255578657)

Leafletにはデフォルトのアイコンがあるのですが、それを自分で指定したアイコンで地図上に表示する方法を書いていきます。まぁそれだけは面白くないので、ドラゴンボールの筋斗雲がいまどこにいるか確認できるようなマップを作っていきましょう。

![img](https://stat.ameba.jp/user_images/20170227/10/hatake-0715/99/6c/j/o0480035013878162301.jpg?caw=800)


## 地図を用意
詳しくは、僕の前回の記事 [(地図ライブラリの本命「Leaflet」を5分で理解&導入する)](https://qiita.com/mitch0807/items/7ed4eaf6253a9b879ae7)をみてください。本記事では詳しく説明はしません。

```javascript
var mymap = L.map('mapid').setView([35.681167, 139.767052], 15);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}).addTo(mymap);
```

## そしてアイコンを用意
まずはよくあるクラウドのアイコンを黄色にしてダウンロードします。
![kintoun.png](https://qiita-image-store.s3.amazonaws.com/0/209160/5b4fbad4-b608-b3bc-3473-3dd8c200ab5c.png)　← こんな感じのやつ


## 「Leaflet」上でサイズなどを定義

```javascript
var kintounIcon = L.icon({
    iconUrl: 'kintoun.png',
    iconSize: [30, 30],
    iconAnchor: [15, 30],
    popupAnchor: [0, -40]
});
```
iconAnchorはアイコンと、地図が接する点を定義するためのプロパティなのですが、基本的には、１番目はiconSizeのWidthの半分、２番目はiconSizeのHeightと同じ値を指定してあげればいいです。これをちゃんと設定しないと、地図をズームとかしたときにアイコンの位置がずれてしまうので気をつけましょう。

## 地図上にランダムに配置
あとは、前回同様、ランダムに地図上に配置してあげましょう。

```javascript
for (var i = 0; i < 15; i++) {
    var marker = L.marker([35.681167 + (Math.random() / 50), 139.767052 + (Math.random() / 50)], {icon: kintounIcon});
    marker.bindPopup("<b>筋斗雲" + i + "</b>");
    marker.addTo(mymap);
}
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/209160/dc13871c-843b-0aa5-a0bc-3f8a67e3d55b.png)

できた。が・・・クソ微妙・・・黄色だから見えにくいし、筋斗雲なのに浮いてる感がない！影をつけましょう。

## 影をつける
まずは影の画像を用意して筋斗雲アイコンに反映します。
![shadow.png](https://qiita-image-store.s3.amazonaws.com/0/209160/6accc25d-530f-30c6-35c6-e84b4db9ed50.png)　← こんな感じのやつ

```javascript
var kintounIcon = L.icon({
    iconUrl: 'kintoun.png',
    shadowUrl: 'shadow.png',
    iconSize: [30, 30],
    shadowSize: [30, 30],
    iconAnchor: [15, 30],
    shadowAnchor: [15, 0],
    popupAnchor: [0, -40]
});
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/209160/11999915-6e06-9cd8-6aef-36c61bb51b4c.png)

おーだいぶんいい感じになった！かなり浮いてる感でた（笑）
こんな感じで街中に筋斗雲が待機してて、UBERみたいにスマホで呼べたら最高ですね。
今回の記事は以上です。
Android を L2TP/IPsec を使って VPN 接続

自宅にある YAMAHA RTX810 で L2TP/IPsec サーバを構築したのですが、Android 端末から VPN で接続できるかを検証しました。

■ サーバ構築はこちら
[YAMAHA RTX810 で L2TP/IPsec サーバを構築](https://qiita.com/parukun/items/b943f489b53b60e82648)

# 動作環境
Android バージョン：6.0.1

# 設定方法
1. Android の設定から「その他のネットワーク」を選択
<img width="200" alt="vpn1.png" src="https://qiita-image-store.s3.amazonaws.com/0/245497/8866a61a-d6ca-f03a-28ad-538723dc5d45.png">
***

2. 「VPN」を選択
<img width="200" alt="vpn2.png" src="https://qiita-image-store.s3.amazonaws.com/0/245497/db144614-2f8b-d6d7-5b8d-c63b2ef92e7e.png">
***

3. 右上の「＋」をタップ
<img width="200" alt="vpn3.png" src="https://qiita-image-store.s3.amazonaws.com/0/245497/d70ed6da-84c5-1563-2b93-091de1c2b779.png">
***

4. VPN の設定をする
・名前：任意
・タイプ：L2TP/IPsec PSK
・サーバーアドレス：（サーバーのアドレス）
・L2TP シークレット：使用しない
・IPSec 識別子：使用しない
・IPsec 事前共有キー：（自分で設定した事前共有キー）
<img width="200" alt="vpn4.png" src="https://qiita-image-store.s3.amazonaws.com/0/245497/a6b23fd6-1ab2-d8a8-5845-9aee2b0bc3ed.png">
<img width="200" alt="vpn5.png" src="https://qiita-image-store.s3.amazonaws.com/0/245497/77ae19e1-cf90-28d6-bfbf-2438020e5600.png">
***

5. 設定で入力した名前が表示されるので、タップする
<img width="200" alt="vpn6.png" src="https://qiita-image-store.s3.amazonaws.com/0/245497/d19d3047-4cec-b4aa-2a62-0f6ca332b516.png">
***

6. ユーザー名、パスワードを入力し、接続
<img width="200" alt="vpn7.png" src="https://qiita-image-store.s3.amazonaws.com/0/245497/c6f28ebd-face-8ab7-492d-ed9727b774cc.png">
***

7. 「接続中」と表示されれば OK
<img width="200" alt="vpn8.png" src="https://qiita-image-store.s3.amazonaws.com/0/245497/e08d4b89-81cc-01b0-eca5-1f6fa21cd62b.png">

# 接続されているかの検証
家のセグメントの IP アドレスに対して接続すると、サーバに接続できたので VPN の接続が成功したと思います。

また、家のセグメントには届くことがわかりましたが、インターネットに対してはどのような経路で出ているのか、VPN に接続されている状態で、[確認くん](https://www.google.co.jp/search?q=%E7%A2%BA%E8%AA%8D%E3%81%8F%E3%82%93&ie=utf-8&oe=utf-8&client=firefox-b&gfe_rd=cr&dcr=0&ei=3n-3WryECMyuX6e7pcgL)を使ってみました。

VPN で接続されている時は、家のプロバイダの情報が表示され、VPN を切断すると、Android が元々接続しているプロバイダの名前が表示されたため、一度 VPN を通って、VPN 接続先からインターネットへ出ているようです。

■ VPN 接続中（家のプロバイダが表示される）
<img width="200" alt="vpn9.png" src="https://qiita-image-store.s3.amazonaws.com/0/245497/10e7e033-590a-0b0d-84fe-ab060c056ee8.png">

■ VPN 切断中（Android 端末のプロバイダが表示される）
<img width="200" alt="vpn10.png" src="https://qiita-image-store.s3.amazonaws.com/0/245497/2d471f83-34ea-1ec5-e79f-21cfb3d491e6.png">
すごいErlangゆかいに学んだメモ 19章 OTPアプリケーションの作法

Erlang でアプリケーションをパッケージングする定石作法について

## OTPアプリケーション
Erlangアプリとは、関連する`コード`と`プロセス`の集まり。

- OTPアプリケーションとは
    - プロセスに対してOTPビヘイビアを適用している
    - アプリ全体の構築と解体方法をVMに伝えることができる特別な構造で、そのプロセスをラップしている

OTPアプリケーションは、以下を提供する

1. ディレクトリ構造
2. 統一的な設定方法
3. 環境変数と設定の生成方法
4. 依存関係を考慮しつつアプリケーションを起動停止する方法
5. アプリケーションを終了することなく, 衝突を検知し, ライブアップデートを安全に制御する手段

OTPコンポーネント != OTPアプリケーション

なお、すべてのOTPアプリケーションは `kernel` と `stdlib` に依存する.

## アプリケーションリソースファイル
拡張子 `.app` のファイル.
中身はErlang項が書かれており, ErlangVMにアプリケーションについての情報を伝える.

このファイルはアプリケーションのエントリポイントや終了方法などを伝える.
これは、コンパイル済みのモジュールと一緒に `/ebin` に保存する

`.app.src` というファイルを `src/` 以下に置く場合もある。
その場合, コンパイル時に `app.src` が `app` になって `/ebin` に置かれる.
好みの問題だが、現在はこのパターンが主流.

書式の例は以下

```erlang
{application,
 myapp,  %% アプリケーションの名前をatomで指定
 [{description, "アプリの説明文をここに"},
  {vsn, "0.1.0"},  %% バージョンを指定. コードのホットスワップ時にも使用される
  {registered, []},  %% アプリケーションによって登録されるレジスタ名のリスト
  {mod, { myapp_app, []}},  %% applicationビヘイビアを実装したコールバックモジュールと引数を指定
                            %% ここを記述しない場合はライブラリアプリケーションとして扱われる

  %% 依存するアプリケーションをリストで指定する
  %% 全てのOTPアプリケーションはkernel と stdlib に依存している
  %% ここで指定されたアプリが先に起動する
  {applications,
   [kernel,
    stdlib
   ]},
  {env,[
      {hoge, "FUGA"}  %% 環境変数を指定
  ]},
  {modules, []},  %% rebar を使っているなら自動で処理される箇所
  {maintainers, []},
  {licenses, ["Apache 2.0"]},
  {links, []}
 ]}.
```

## アプリケーションビヘイビア
- アプリケーションコントローラ(AC)
    - ErlangVMが起動するときに、一緒に起動されるプロセス
    - ACは他の全てのアプリケーションを起動し、それらの上位に位置する.
        - 実質、各アプリケーションのスーパーバイザのような立ち位置

- アプリケーションマスター
    - アプリケーションを起動するとき、ACが起動するプロセス
    - 各アプリケーションを世話する、２つからなるプロセス.

`AC --> アプリケーションマスター --> 各アプリケーションのスーパーバイザ` という構造.

### アプリケーションビヘイビアのコールバック関数
アプリケーションビヘイビアが必要とするコールバック関数は以下の２つ

- start/2
    - `YourMod:start(Type, Args)` という形式
    - Type は常に `normal`
    - Args はアプリケーションリソースファイルの `{mod, ...}` からから取得されるオプション
    - start はアプリケーションの初期化を行い、最上位のスーパーバイザのpidを返す
- stop/1
    - start/2 で返される状態を引数に受け取る
    - アプリケーションの実行が終了したあとに動作し、必要な終了処理を行う

## applicationモジュールの関数
- `application:start(AppName).`
    - アプリケーションコントローラに対して指定したOTPアプリケーションを起動するように伝える.
    - 第二引数にプロセスタイプを指定可能
        1. `temporary`
            - 正常終了は再起動しない
            - エラーで落ちても再起動しない
        2. `transient`
            - 正常終了は再起動しない
            - 異常終了のとき、他のアプリケーションも停止してVMも止まる
        3. `permanent`
            - 正常終了のとき他のアプリケーションも終了し、VMも止まる
            - 異常終了のとき、正常終了と同じ動作
- `application:which_applications`
    - 現在起動しているアプリケーションのリストを取得できる

## ライブラリアプリケーション
特に起動するプロセスがないモジュールを、アプリケーションとしてラップしたい場合がある.
`stdlib` などはライブラリアプリケーション.

ライブラリのときは、アプリケーションリソースファイルから、 `{mod, {Module, Args}}` を削除する.

## 参考リンク
- 公式ドキュメント
    - [アプリケーションについて](http://erlang.org/doc/man/app.html)
    - [applicationモジュール](http://erlang.org/doc/apps/kernel/application.html)

## 参考文献
- [すごいErlangゆかいに学ぼう](https://www.ohmsha.co.jp/book/9784274069123/)
【Railsメモ】assert_selectについて


###assert_selectとは
アプリケーションのビューのテストを行う際に使うアサーションメソッド


書式
```assert_select(セレクタ, [条件], [メッセージ])```

使用例
```assert_select 'title', "Sign Up page"```
だったら、title要素の内容を検証する際に使う


※アサーションとは、ある条件が成立しているかどうかをチェックすることを言う


＜参考にしたサイト＞
https://railsguides.jp/testing.html
RaspberryPi respeaker



[Download Raspbian for Raspberry Pi](https://www.raspberrypi.org/downloads/raspbian/)





[ReSpeaker 2\-Mics Pi HAT \- Hats & Plates \- Seeed Studio](https://www.seeedstudio.com/category/ReSpeaker-2-Mics-Pi-HAT-p-2874.html)


[respeaker/seeed\-voicecard: 2 Mic Hat, 4 Mic Array, 6\-Mics Circular Array Kit, and 4\-Mics Linear Array Kit for Raspberry Pi](https://github.com/respeaker/seeed-voicecard)


```
$ git clone https://github.com/respeaker/seeed-voicecard.git
$ cd seeed-voicecard
$ sudo ./install.sh 2mic
$ sudo reboot
```


[Raspberry PiでAlexa Voice Service\(AVS\)を利用する方法 \- Qiita](https://qiita.com/zono_0/items/2c485b4176d349964876)
Maps SDK for iOS




[スタートガイド  \|  Google Maps SDK for iOS  \|  Google Developers](https://developers.google.com/maps/documentation/ios-sdk/start)



SDK をインストールする

## CocoaPods

Google Maps SDK for iOS は CocoaPods の pod として利用できます。CocoaPods は、Swift と Objective-C の Cocoa プロジェクトで依存関係を管理するためのオープンソースのツールです。

`sudo gem install cocoapods`


result

```js:result
Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, activesupport, nap, fuzzy_match, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader, cocoapods-plugins, cocoapods-search, cocoapods-stats, netrc, cocoapods-trunk, cocoapods-try, molinillo, atomos, CFPropertyList, colored2, nanaimo, xcodeproj, escape, fourflusher, gh_inspector, ruby-macho, cocoapods after 16 seconds
28 gems installed
```


add Podfile file

```ruby:Podfile file
source 'https://github.com/CocoaPods/Specs.git'
target 'YOUR_APPLICATION_TARGET_NAME_HERE' do
  pod 'GoogleMaps'
  pod 'GooglePlaces'
end
```

ターミナルを開いて、Podfile があるディレクトリに移動します。



`pod install`
Windowsの標準機能でzip化すると、ピリオドで始まるフォルダの2個目が消える


# 環境
* Windows10
* Windows標準搭載のzipプログラム（右クリック→送る→圧縮(zip形式)フォルダー）

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/3fde9c8a-56ab-4016-9f85-01716348a8d7.png)


# 問題

以下のような、ピリオドから始まるフォルダ（`.settings`, `.mvn`）が複数存在するフォルダを用意します。

```txt:sample1フォルダの中身
2018/03/25  19:30    <DIR>          .
2018/03/25  19:30    <DIR>          ..
2018/03/25  19:29    <DIR>          .mvn
2018/03/25  19:29    <DIR>          .settings
2018/02/03  13:16             1,243 sample1.txt
               1 個のファイル               1,243 バイト
               4 個のディレクトリ  83,119,607,808 バイトの空き領域
```

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/1dbacd02-c17b-583d-4829-0b5349b182bc.png)

このフォルダを、Windows標準機能でzip化します。

zip化されたフォルダの中身を確認すると、`.settings`フォルダが消えていました。

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/01e573cb-e9cf-6e90-eda9-66222229e6c9.png)


# 調査

### `.mvn`フォルダのみ存在するフォルダをzip化して確認

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/8b4dd2a7-a93d-4e35-eb6d-65fd07c83aaf.png)

zip化したフォルダの中身に、 `.mvn`フォルダは存在しました（復元できた）。


### `.settings`フォルダのみ存在するフォルダをzip化して確認

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/4f4fba7c-9c1e-23fb-712c-6c8b0ae22b7d.png)

zip化したフォルダの中身に、 `.settings`フォルダは存在しました（復元できた）。


### 結果

以下の条件を満たすフォルダを、Windows標準機能でzip化すると、完全に復元できません。

* ピリオドから始まるフォルダが複数存在する

具体的には、ピリオドから始まる2個目以降のフォルダが、zip化ファイルに含まれません。
（たぶん名前順に並べたときの2個目以降）


# 解決方法
[7-Zip](https://sevenzip.osdn.jp/) を使い、完全に復元できることを確認しました。

# 感想
ピリオドで始まるファイル/フォルダをWindowsで扱う場合は、注意が必要ですね。
Alexaとスマートロック「SESAME (セサミ)」で開けゴマ生活を送ってみた。

皆さんどうも。
子供の頃から鍵の締め忘れが多く、よく親に叱られていたtaruです。

アラサーになってから、ようやく鍵との決別を決意してAmazonで評判のよかったSESAMEを使ってみることにしました。

今回使うSESAMEとはこんなやつです。
~~2018年3月現在、Alexaと連携させるためには、IFTTTで操作する必要があるため、Wi-Fiアクセスポイントセットを使ってます。~~
2018年8月6日にアップデート通知が来ました。正式にAlexaスキルがリリースされたそうです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/106116/c2ef59c1-ef2f-bdf7-2d09-3d94a0659184.jpeg" width=50%>
[SESAME (セサミ)HPはこちら](https://candyhouse.co/)

## SESAME初期セットアップ＆AlexaとIFTTTの連携（簡単なので省略）
SESAMEの初期セットアップは説明書通りに設定すればすごく簡単に設定できます。（ただ、中古で購入する場合などはSESAME側のDBに所有者情報が登録されているため、お問い合わせから以前の所有者の登録を解除して貰う必要があるみたいなのでご注意を）

## SESAMEとIFTTTを連携する
1. SESAMEの初期セットアップ完了後、まずはSESAMEアプリで設定した自宅のSESAMEの設定でクラウドにチェックを入れましょう。チェックを入れることにより住宅SESAMEがクラウドサービスから操作出来るようになります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/106116/7641841f-4393-7c26-0a61-1443c82a0c62.png" width=50%>
　　
　　

2. 次にIFTTTアカウントとSESAMEアカウントの連携です。IFTTTでsesameと検索すれば「Sesame by CANDY HOUSE」が出てくるのでそれをクリック！次の画面で「CONNECT」ボタンが出てくるのでそれもクリック！
![Group.png](https://qiita-image-store.s3.amazonaws.com/0/106116/73ea1e8f-7634-b73f-80a5-f3d132141038.png)
　　

3. すると、CANDY HOUSEのログイン画面が出てくるのでSESAME初期セットアップ時に作成したユーザーのアイパス入れてログイン！
![Group2.png](https://qiita-image-store.s3.amazonaws.com/0/106116/b23471d7-3bd0-1354-1da7-e5b43a2d97b4.png)
無事連携出来たみたいです。
![Group3.png](https://qiita-image-store.s3.amazonaws.com/0/106116/be82cf7a-e964-c8c9-dd07-f6d7aa723c36.png)

## IFTTTのアプレットを作成する
1. もう一息。New Appletから、アプレット作成します。まずはthisにAmazon Alexaの「Say a specific phrase」を選択してフレーズを入力。もちろんここは **開けゴマ** です！
<img width="60%" alt="スクリーンショット 2018-03-25 19.04.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/106116/292afe36-b235-f83b-6bc2-775289f4a6f5.png">
　　

2. 次にアプレットのthatで、Sesame by CANDY HOUSEのOpen Sesameを選択。自宅のSESAMEを選択します。
<img width="60%" alt="スクリーンショット 2018-03-25 19.08.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/106116/896a40fc-1276-915a-c4ba-e4441a55901e.png">
　　

3. Finish！やったー。
<img width="60%" alt="スクリーンショット 2018-03-25 19.10.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/106116/6c8ccb97-0b92-d03c-f29f-62a0698762f7.png">

## さっそく「開けゴマ」してみる
ぼく「Alexa トリガー 開けゴマ」
Alexa「すみません。そのIFTTTトリガーが見つかりません」
ぼく「うそだ！！！」

おかしい、、そんなはずは、、が、なんど試しても認識してくれません。。なんども話しかけ、ようやく近い言葉の「トリガー ヒラケゴマ」も認識してくれず。。
<img width="60%" alt="スクリーンショット 2018-03-25 19.10.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/106116/dbd30583-fe52-08ff-35c0-fe0f673b8bb6.png">

Alexaが悪いのか、私が悪いのか、、色々試行錯誤した結果、「**扉開ける**」をフレーズにすることでカギが開きました！！
ぼく「Alexa トリガー トビラ アケル」
![videotogif_2018.03.25_19.42.00.gif](https://qiita-image-store.s3.amazonaws.com/0/106116/4cfa5cf1-7617-146d-ef85-eb83698ed3fb.gif)

Alexaの性能に失望しながらもなんとか無事成功？して、知り合いにこの喜びを伝えたところ、「外から大声で叫ばれたら開けれちゃうよね」という一言で、私の開けゴマ生活は始まることもなく終りを迎えたのでした。

## まとめ
- IFTTTのフレーズは「扉開ける」にすること。
- 家のセキュリティがザルになるので設定しないこと。（閉めることに使うならOK！）

SESAMEですが、APIも公開されているためかなり遊べそうです。今回はIFTTT連携のみですが今度API使ってなにかやってみようと思います。
[SESAME API](https://docs.candyhouse.co/#introduction)
Install "zsh" for MacOSX

## Installing "zsh" to MacOSX, you can use command line easily than before.

### Update "homebrew"
※If you don't install "homebrew" yet start from here.

```shell
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

※If you already installed "homebrew" start from here.

```shell
$ brew update

# Check whether you can use brew or not.(correct case)
$ brew doctor
=> Your system is ready to brew.
```

### install the zsh

```shell
$ brew install --disable-etcdir zsh
```

### After finished, check the version of the zsh.

```shell
$ zsh --version
=> zsh 5.4.2 (x86_64-apple-darwin17.3.0)
```

### Change the login shell for the zsh.
#### First step: Edit /etc/shells

```shell
$ cat /etc/shells
# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh

↓↓

# add the script "/usr/local/bin/zsh"

$ sudo vi /etc/shells
# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
/usr/local/bin/zsh

```

#### Second Step: change the setting of the login shell.

```shell
$ chsh -s /usr/local/bin/zsh
# Enter password

### Setting for the Zsh
#### Install "oh-my-zsh"

```shell
$ curl -L http://install.ohmyz.sh | sh
```

#### Reboot the Terminal.

#### Edit "~/.zshrc"

```shell

$ vi ~/.zshrc
...
plugins=(
  git
)

↓↓

# add some items in the brackets.
plugins=(
  git
  ruby
  osx
  bundler
  brew
  rails
  emoji-clock
)

# Save the setting.

```

#### Reload "~/.zshrc"

```shell
$ source ~/.zshrc
```

### Finish.

You can change the setting of "zsh" what you want.
「百花繚乱！なないろ言語で競技プログラミングをする資料」のリスト


元記事：https://qiita.com/drken/items/6edb1c0542d4c3b7179c

重複を考慮した記事の有無リスト。180615現在。

|言語|状況|
|:--|:--|
|Bash|記事あり|
|C (GCC)|記事あり|
|C (Clang)|C (GCC)に同じ|
|C++14 (GCC)|記事あり|
|C++14 (Clang)|C++14 (GCC)に同じ|
|C\#|記事あり|
|Clojure|記事あり|
|Common Lisp|記事あり|
|D (DMD)|記事あり|
|D (LDC)|D (DMD)に同じ|
|D (GDC)|D (DMD)に同じ|
|Fortran|記事あり|
|Go|記事あり|
|Haskell|記事あり|
|Java7|記事あり|
|Java8|Java7に同じ|
|JavaScript|記事あり|
|OCaml|記事あり|
|Pascal|記事あり|
|Perl|記事あり|
|PHP|記事あり|
|Python2|記事あり|
|Python3|記事あり|
|Ruby|記事あり|
|Scala|記事あり|
|Scheme|記事あり|
|Text|(入力を取る問題は解答不可)|
|VB|記事あり|
|Objective-C (GCC)|(一応C (GCC)のコードで通せる)|
|Objective-C (Clang)|Objective-C (GCC)に同じ|
|Swift|記事あり|
|Rust|記事あり|
|Sed|---|
|Awk|記事あり|
|Brainfuck|---|
|Standard ML|記事あり|
|PyPy2|Python2に同じ|
|PyPy3|Python3に同じ|
|Crystal|記事あり|
|F\#|記事あり|
|Unlambda|---|
|Lua|記事あり|
|LuaJIT|Luaに同じ|
|MoonScript|記事あり|
|Ceylon|---|
|Julia|記事あり|
|Octave|記事あり|
|Nim|記事あり|
|TypeScript|JavaScriptのコードで通せる|
|Perl6|記事あり|
|Kotlin|記事あり|
|PHP7|PHPに同じ|
|COBOL|記事あり|


残りは、Sed / Brainfuck / Unlambda / ~~Ceylon~~ の模様です。まあ、難しいでしょうね。。
あと、Objective Cの機能を使った答案もあったらいいかなと思います。

----

Ceylon、試してみたのですが、ACになる気配がありません。
https://abs.contest.atcoder.jp/submissions/2253403
~~もしCeylonのAC答案をご存知でしたら提出URLを教えてください。~~

コードテストにて以下のプログラムの実行時間が4秒でしたので、ACを獲るのはまず無理だと思います。。

```
shared void main(){
	print("hello world");
}
```
wikipedia full access on webWorker

not api

```html
<script src="//gnjo.github.io/deth.js"></script>
<input></input>
<output></output>
<script type="text/plain" data-worker="1">
let is={};
is.katakana=(d)=>{return /[\u30a0-\u30ff]/.test(d)}
is.hiragana=(d)=>{return /[\u3040-\u309f]/.test(d)}
is.kanji=(d)=>{return /[\u3005-\u3006\u30e0-\u9fcf]/.test(d)}
is.kannji=is.kanji
is.nihongo=(d)=>{return (is.katakana(d)|is.hiragana(d)|is.kanji(d))}
;
async function calc(data){
 let word =data.word
 ,lang = is.nihongo(word)?'ja':'en'
 ,url= `https://${lang}.wikipedia.org/wiki/`+encodeURIComponent(word)
 ,html=await fetch(url).then(d=>d.text())
 ;
 return {html:html,url:url,word:word}
};console.log('worker boot');
onmessage=function(e){calc(e.data).then(postMessage)}
onerror=function(e){console.log(e)} 
</script>
```
```js
var fn={}
fn.worker=(src)=>{
 //inner.js or text or element
 let is={},f=(d=>URL.createObjectURL(new Blob( [d], {type:"text\/javascript"} )));
 is.element=function(o){return !!(o && o.nodeType === 1)};
 is.url=(d=>!/\n|;/.test(d));
 return new Worker( is.element(src)?f(src.textContent):is.url(src)?src:f(src) );
}
fn.q=(s)=>{return document.querySelector(s)};
fn.jsy=(d)=>{return JSON.stringify(d,null,2)}
;
let w =fn.worker(fn.q('[data-worker="1"]')) //same new Woker...
,sofer =_.debounce((o)=>{ w.postMessage(o) },200)
;
let ob =new Proxy({},{ set:(o,p,v)=>{ o[p]=v; sofer(o) }})
fn.q('input').oninput=function(ev){ ob.word = this.value}
w.onmessage=function(e){ fn.q('output').innerHTML = e.data.html}
;
```
CentOS 7 gcc 7.3.0のソースファイルからのインストール

# 動作確認環境
- 仮想環境 VMware Workstation Player 14.1.1
- OS Windows 10 Pro 64bit

# 仮想環境
- OS CentOS 7.4 (1708) minimalインストール
- メモリ 2GB
- HDD 250GB

# ダウンロード・展開
最新バージョンの確認
[GCC, the GNU Compiler Collection - GNU Project - Free Software Foundation (FSF)](https://gcc.gnu.org/)

`/usr/local/src`ディレクトリに移動する。

````
cd /usr/local/src
````
ソースファイルをダウンロードする。

````
wget http://ftp.tsukuba.wide.ad.jp/software/gcc/releases/gcc-7.3.0/gcc-7.3.0.tar.gz
````

ダウンロードしたファイルを展開する。

````
tar zxvf gcc-7.3.0.tar.gz
````
# コンパイル・インストール
展開したディレクトリに移動する。

````
cd gcc-7.3.0
````

CとC++をコンパイル・インストール

````
./contrib/download_prerequisites
mkdir build
cd build
../configure --enable-languages=c,c++ --prefix=/usr/local --disable-bootstrap --disable-multilib
make
make install
````

# エラー対策
`libstdc++.so.6.0.24`のエラーが発生する場合、以下のようにする。
`libstdc++.so.6.0.24-gdb.py`のファイル名を変更する。（参考しないようにする）

````
mv /usr/local/lib64/libstdc++.so.6.0.24-gdb.py /usr/local/lib64/back.libstdc++.so.6.0.24-gdb.py
````
`/usr/local/lib64`ディレクトリを参照するよう`/etc/ld.so.conf.d/`に追加する。

````
echo '/usr/local/lib64' > /etc/ld.so.conf.d/local-lib64.conf
````

# バージョン確認
gccのバージョン確認は`gcc --version`で表示される。

````
gcc (GCC) 7.3.0
Copyright (C) 2017 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
````
g++のバージョン確認は`g++ --version`で表示される。

````
g++ (GCC) 7.3.0
Copyright (C) 2017 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
````

# 参考
[Cコンパイラーインストールメモ(Hishidama's C compiler install Memo)](http://www.ne.jp/asahi/hishidama/home/tech/c/install.html)
[Centos7 编译安装 Nginx Mariadb Asp.net Core2 (实测 笔记 Centos 7.3 + Openssl 1.1.0f + Mariadb 10.2.7 + Nginx 1.12.1 + Asp.net. Core 2 ) - vicowong - 博客园](http://www.cnblogs.com/vicowong/p/7234714.html)

---
[目次](https://qiita.com/knutpb1205/items/3ece0cab588afdb13f02)
CSSのスタイル優先度を総まとめ

# cssを編集している時に思ったとおりに適応されていないと思ったら、スタイルの適応優先度をよくわかっていなかったので総まとめです。

## id属性 > class属性
id属性とclass属性ではid属性が優先されます。

html

```html
<p id="a" class="b">red</p>
<p class="b">blue</p>
<p>green</p>
```
css

```css
p#a { background: red;}
p.b { background: blue;}
p { background: green; }
```

## style属性に記述 > id属性
タグ内にstyle属性を付与して直打ちするとid属性よりも優先度が高まります。

html

```html
<p id="a" style="background: red;">red</p>
<p id="a">blue</p>
```

css

```css
p#a {background: blue; }
```

## !importantを最後につけると優先度が一番高くなります

cssのプロパティの最後に「!important」をつけると優先度が一番になります。

html

```html
<p style="background: red">brown</p>
<p id="a">brown</p>
<p class="b">brown</p>
```

css

```css
p {background: brown !important;}
p#a {background: blue;}
p.b {background: yellow;}
```
JavaでDBに接続

お久しぶりです。
ハルちゃんです。
いよいよサーブレットに触る機会がでてきたので、JavaでMySQLに接続する方法を解説して行きたいと思います。
必要なもの

- Javaの開発環境（ここではEclipse)
- Mysql
- ドライバ

自分はMampを利用しているためMampをダウンロードします。
https://www.mamp.info/en/

設定は
https://techacademy.jp/magazine/5102
こちらを確認しながらできると思います。

あと
https://dev.mysql.com/downloads/connector/j/
こちらをダウンロードすれば準備完了です。

実際に作業に移ります
まず最初にeclipseでファイルを作ります。
<img width="334" alt="スクリーンショット 2018-03-25 19.08.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/240422/fbe89fd1-5d5e-49fa-7087-8f136949bad5.png">
このような形でlibファイルにmysql-connector-java-5.1.46-bin.jarをコピーします。
次にビルドパスの構成を選択し
ライブラリーのJARの追加を選択します。<img width="579" alt="スクリーンショット 2018-03-25 19.13.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/240422/94c4b09a-e1f9-2fcb-1cad-37606b943a96.png">
選択画面に切り替わりますので、libファイル内のmysql-connector-java-5.1.46-bin.jarを選択して適応させてください。
そうするとこんな形で、参照ライブラリーが出てきます。ここまでできたらデータベースに接続する環境が整いました！
<img width="574" alt="スクリーンショット 2018-03-25 19.15.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/240422/121eb046-ea94-eb38-41e2-5ec76c5f353e.png">

データベースに接続します。
<img width="926" alt="スクリーンショット 2018-03-25 19.23.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/240422/d2e9f40c-4b29-7582-cde3-fa018acd5e64.png">
try {}catchで例外が発生した場合に例外処理を出力します。
*←この部分には自分のデータベースのユーザーとパスワードが入ります。
接続ができれば接続完了。失敗だった場合に接続失敗が出力されます。

https://www.youtube.com/watch?v=2HTZYPVHTBs&index=1&list=LL-FDeuuQwmD9u4WIukMq-3g&t=0s
こちらの動画を参考に自分で接続しました。
mampで接続する記事がないのでこちらを元に設定するといいかと思います。
Laravelで掲示板システム作るチュートリアル

## はじめに

下記の親記事を参考にLaravel5.6で書き直す形で掲示板を作ってみました。ハマりそうなポイントを記事にまとめてみました。基本は親記事をもとにすすめて、うまくいかずに詰まったときに本記事のサンプルコードを参考にすると幸せになれるかもしれません。

## 親記事

[【保存版】Laravelで掲示板を作成する方法【チュートリアル】](https://manablog.org/laravel_bulletin_board/)

## サンプルコード

[Github](https://github.com/NakanishiTetsuhiro/laravel-bbs)

## 環境

Laravel: 5.6.12

## modelsディレクトリのオートローダー設定

Eloquentのモデルをappディレクトリ以外に作成して利用する場合は、composer.jsonにオートローダーの設定をする必要があります。親記事のチュートリアルではapp/modelsディレクトリにモデルクラスを作成していましたので、modelsディレクトリの中をオートロードしてくれるよう設定していきます。

### 1. composer.jsonを書き換える

composer.jsonの20行目あたりにclassmapの設定項目がありますので、そこにapp/modelsを読み込むよう１行加えます。

```
"autoload": {
    "classmap": [
        "app/models",  // この行を追加
        "database/seeds",
        "database/factories"
    ],
    "psr-4": {
            "App\\": "app/"
    }
},
```

### 2. composer.jsonの変更を下記コマンドで反映

    composer dump-autoload

オートローダーの役割ってcomposerが担ってくれていたんですね。てっきりLaravelがやってくれているものだと思ってました。

## リソースコントローラを作成するためのコマンド

Laravel5.6だと下記のように打つとうまく生成されます

```
php artisan make:controller PostsController --resource
```

## postでstoreコントローラにアクセスできない

LaravelではCSRF対策でformの中に@csrfディレクティブを記述しないとうまくPOSTでアクセスできないようになっています。詳しくはLaravelの公式ドキュメントあたりを参照してください。

[Laravel 5.6 CSRF保護](https://readouble.com/laravel/5.6/ja/csrf.html)



## さいごに

自分で最新版のLaravelに書き換える作業が一番勉強になったりするので、みなさんも[元ネタの記事](https://manablog.org/laravel_bulletin_board/)から頑張って書き直してみるのもありかもしれません。本記事のソースコードを答え合わせとして使ってみてください。


## 参考サイト

- [これで理解できるComposerを使ったオートロード](http://reffect.co.jp/blog/post/composer-autoload)
- [オートロードについて](http://laraweb.net/surrounding/1642/)
- [
Laravel 5.6 コントローラ](https://readouble.com/laravel/5.6/ja/controllers.html)
-[Laravelのルーティング書き方まとめ](https://qiita.com/michiomochi@github/items/de19c560bc1dc19d698c)
ManjaroLinuxでpowerlineのパッチを当てたフォントを使う

# Manjaro Linuxでpowerlineのパッチを当てる
プログラミング用フォントで有名なRictyをterminalで使用する際に、powerlineが適用されたものが見つからなかったため、パッチを当てるまでの手順

# powerlineのインストール
今回は、pacmanからインストールする

```terminal:terminal
sudo pacman -S powerline powerline-fonts
```

# Rictyのインストール
AURにて配布されているので、そちらを用いる

```terminal:terminal
yaourt -S tty-ricty
```

# パッチスクリプトのダウンロード
powerlineのフォントパッチのスクリプトのダウンロード

```terminal:terminal
git clone https://github.com/powerline/fontpatcher ~/fontpatcher
```

# パッチを当てる

```terminal:terminal
sudo fontforge -script ~/fontpatcher/scripts/powerline-fontpatcher /usr/share/fonts/TTF/Ricty-Regular.ttf
```

これで、ホームディレクトリ上にパッチの当たったフォントファイルが作成される。

# 適切な場所に移動させる

```terminal:terminal
sudo mv 'Ricty\ Regular\ for\ Powerline.ttf' /usr/share/fonts/TTF/
```

これで、パッチの適用されたフォントを選択することができる。
shellのthemeを変えた際、viewが崩れる原因を解消できた
Webpacker バージョンアップ後、アセットプリコンパイルで Cannot find module 'postcss-smart-import' エラー

Webpacker のバージョンをあげたところ、下記のエラーが発生したので、解決方法をメモ。

```
Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-smart-import'
```

**バージョン情報**

- Ruby : 2.4.2
- Rails : 5.1.4
- React : 16.2.0
- Redux : 3.7.2
- Webpacker : 3.3.1

[webpacker/css\.md at master · rails/webpacker](https://github.com/rails/webpacker/blob/master/docs/css.md#post-processing-css) を見ると、 `.postcssrc.yml` は以下のようになっている。

```yml:.postcssrc.yml
plugins:
  postcss-import: {}
  postcss-cssnext: {}
```

`postcss-smart-import` ではなく `postcss-import` を使うようになった？
以下のように修正すると、エラーが解消した。

```yml:.postcssrc.yml(差分)
 plugins:
-  postcss-smart-import: {}
+  postcss-import: {}
   postcss-cssnext: {}
```
【GAS】ブラウザの入っていない環境でclasp loginする方法

## 環境

- Windows 7(ホストOS)
- CentOS 6.9 (ゲストOS、ブラウザなし)

CentOSはWindows上に作成した仮想環境です。

## 手順

1. ゲストOSで `clasp login`

    ```
    $ clasp login
    🔑 Authorize clasp by visiting this url:
    https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&scope=XXXXX(以下略)
    ```

1. ホストOSで上記URLにアクセス

1. claspにアクセスを許可

1. アクセス許可後に遷移されるURLに、ゲストOSからリクエスト送信
    `$ curl localhost:42906/?code=4/XXXXX(以下略)`

ブラウザの入っている環境でのログインに比べると少し手間ですが、
以上の手順で、ブラウザの入っていない環境でもログイン可能です。
emailのバリデーション

大文字を許さず全て小文字で保存する
下記記述でメールアドレスの正しい形式になる

`before_save { self.email.downcase! }`

`validates :email, presence: true, length: { maximum: 255 },
                    format: { with: /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i },
                    uniqueness: { case_sensitive: false }`
Rails の標準機能でパスワード安全保護

`password_digest` カラムを用意して
app/models/user.rb　ファイルに
`has_secure_password` を記述するとパスワードが安全に保護される

暗号化のために bcrypt Gem も必要なので
`# gem 'bcrypt', '~> 3.1.7'`
を
`gem 'bcrypt', '~> 3.1.7'`
にする
[初心者向け]Cloud9で五分でできる、"Yay! You’re on Rails!"

# はじめに
[この記事](https://qiita.com/Kouch/items/07fda4cc3deca2cb05ed)でも書いたんですけど、1からローカルで環境を構築するの、結構大変なんです。
例えばRailsの場合、Rubyをダウンロードしたり、パスを通したり…。コードを書くまえに面倒なことが多い！自分は早くRailsを触って見たいのに…
そんな時に使えるのが、総合開発環境、IDEです！

五分で"Yay! You’re on Rails!"まで行く！多分！（AWSアカウントは持っている前提で）


# 総合開発環境とは
- IDE（Integrated Development Environment）と呼ばれる。
- 開発する時に必要な道具を、一式揃えてくれている。
    - ターミナル
    - エディター（実際にコードを打ち込むところ）
    - 実行結果の画面
    - などなど
- 環境がすでに作られているものをブラウザ上で操作できる。
    - やったことある人はProgateをイメージするといいかもしれません。
- 初心者がコードを書き始める時に便利！
    - ただし、その分自分でいじれない部分もあるので、慣れてきたらローカルで動かせるようになろう。

# Cloud9とは？
![スクリーンショット 2018-03-25 16.34.26.png](https://qiita-image-store.s3.amazonaws.com/0/209138/a618f5d1-d3c7-6d1c-a763-b1624ca0cd32.png)

- 総合開発環境（IDE）の一つ。
- 現在はAWSの中に組み込まれている。
- Railsチュートリアルに出てきたので、使ってみることに
    - 参考記事

# さっそく使ってみよう！
## AWSのアカウントを作ろう。
- 画面の指示に従って作りましょう。（既に持っている人はもちろん大丈夫です）
- 公式サイトは[こちら](https://aws.amazon.com/jp/)
- 作成時にクレジットカード番号が必要ですが、うっかりハイスペックなサーバーを長時間動かしたりしなければ、無料枠の範囲でで済みます。
    - AWSに「請求」という項目があってここで自分がいくら分使用しているか見ることが出来ます。

## Cloud９にチャレンジ！
AWSの検索窓からCloud9と検索してCloud９のページへ。

ダッシュボードに行けたら"Create environment"で新たに環境を作りましょう。
![スクリーンショット 2018-03-25 17.53.36.png](https://qiita-image-store.s3.amazonaws.com/0/209138/95efcef2-b415-de90-360c-f28f99ba2760.png)

Nameに自分の好きな名前をいれて…![スクリーンショット 2018-03-25 17.56.21.png](https://qiita-image-store.s3.amazonaws.com/0/209138/fc4053d4-bacf-6392-db58-4fb93095e48f.png)


ここら辺の設定はデフォルトのままでOK
![スクリーンショット 2018-03-25 17.56.58.png](https://qiita-image-store.s3.amazonaws.com/0/209138/f53e1184-7ea4-ed58-764d-6e9bebf19cf8.png)


最後に確認画面で"create environment"を押して、ちょっとだけ待つと…
![スクリーンショット 2018-03-25 18.10.07.png](https://qiita-image-store.s3.amazonaws.com/0/209138/fd8ca4eb-d362-495c-1cf0-de8d55132da0.png)

統合開発環境が作れました〜！

## Cloud9でRailsアプリを起動させよう。
さて、さっそくRailsのアプリを作成して起動させてみましょう。
現在の画面の下の方にある枠がターミナルの部分です。ここにコマンドを打ち込めます。
まず、Railsの新しいアプリケーションを作成します。

```
$ rails new test_app
```
もう既にRubyやRailsは入っているので、これでappやconfigなど、いつものRailsファイルが作成されます。

あとはアプリのディレクトリに移動してサーバーを起動すれば…

```
$ cd test_app
$ rails s
=> Booting Puma
=> Rails 5.1.5 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.11.3 (ruby 2.4.1-p111), codename: Love Song
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:8080
Use Ctrl-C to stop
```

このように表示されれば成功！サーバーが起動しました。

## アプリが起動していることを確認しよう。
上の方にある"Preview"のボタンを押してください。
![スクリーンショット 2018-03-25 18.19.27.png](https://qiita-image-store.s3.amazonaws.com/0/209138/285dbc2a-eec5-db01-ced0-692cb4be7ede.png)

すると、右下にブラウザが表示されます。ここでこのブラウザを新しいウィンドウで表示させてあげましょう。
下記のボタンです。
![スクリーンショット 2018-03-25 18.21.50.png](https://qiita-image-store.s3.amazonaws.com/0/209138/cdb8e594-0a63-844e-e13d-69580ec0f93f.png)


すると（わくわく）…

![スクリーンショット 2018-03-25 18.23.17.png](https://qiita-image-store.s3.amazonaws.com/0/209138/2f626d63-2c7c-6719-6eeb-9440871db2fb.png)


出来ましたね！**Yay! You’re on Rails!**

# 最後に
ここまでくればコードを書き始めることができます。
楽しいRails開発ライフを！！
pem ⇒ ppk 変換

WinScpで接続する時には、ppkファイルが必要です。
pemファイルからppkファイルに変換する方法です。

**PuTTYgen** ツールを使います！

![putty1.png](https://qiita-image-store.s3.amazonaws.com/0/79214/9f781dc2-6ab6-d1ee-96a5-cf60c938b3a0.png)

「Load」ボタンをクリックして、pemファイルを読み込みます。

その後、「SavePrivateKey」ボタンをクリックしたら完了です！
Kotlinのobject宣言したクラスのインスタンスを動的に取得する方法

objectのインスタンスを動的に取得する際にちょっとハマったのでメモ。

Kotlinは言語としてシングルトンをサポートしています。
書き方も非常にシンプルで、`class`宣言の代わりに`object`を入れるだけ。

```Hoge.kt
object Hoge {
  ...
}
```

インスタンスを取得するのも`Hoge()`で取れて簡単。

さて、今回はクラス名だけを外部パラメータから取得してこのobjectのインスタンスを動的に取得する方法です。
その前に、通常の`class`のインスタンスを動的に取得するにはどうすればいいでしょう。

```Foo.kt
fun main(args:Array<String>) {
  val name = args[0] // 実行時引数に"Hoge"が入っている想定
  val instance = Class.forName(name).newInstance() as Hoge
}
```

JavaのClassを使う形で取れます。
がしかし、kotlinでobject宣言したクラスの名前を指定した場合、こんな感じで怒られます。

```
Exception in thread "main" java.lang.IllegalAccessException: Class FooKt can not access a member of class Hoge with modifiers "private"
```

objectはシングルトンのため、内部的にコンストラクタがprivateになっていて呼び出せないということのようです。
そこで、Kotlinのクラスを扱うことができるKClassを使います。
KClassには`objectInstance`というプロパティが用意されていて、そこからobjectのインスタンスを取得できます。

```Foo.kt
fun main(args:Array<String>) {
  val name = args[0] // 実行時引数に"Hoge"が入っている想定
  val clazz = Class.forName(name).kotlin // これでKClassが取得可能
  val instance = clazz.objectInstance as Hoge
}
```

以上です。
Lambdaのcloudwatch-alarm-to-slackで無料と思ってKMS暗号化キーを使ったら2円かかったので関数修正した

[CloudWatchアラーム通知をSlackにする](https://qiita.com/hf7777hi/items/e0f43f0fb7e2effa0af8)の[IAMのKMSで暗号キーでWebhookURLを暗号化](https://qiita.com/hf7777hi/items/e0f43f0fb7e2effa0af8#iam%E3%81%AEkms%E3%81%A7%E6%9A%97%E5%8F%B7%E3%82%AD%E3%83%BC%E3%81%A7webhookurl%E3%82%92%E6%9A%97%E5%8F%B7%E5%8C%96)でKMSキーを使ったのですが、これが実は無料じゃなかった。

[AWS Key Management Service の料金](https://aws.amazon.com/jp/kms/pricing/)
>キー
AWS Key Management Service で作成したそれぞれのお客様のマスターキー (CMK) は、KMS により生成されたキーマテリアルで使用するか、インポートしたキーマテリアルで使用するかに関わりなく、それが削除されるまで、1 USD/月の料金がかかります。KMS により生成されたキーマテリアルの CMK の場合で、CMK が毎年自動的にローテーションするように設定されている場合は、新しくローテーションされたバージョンに 1 USD/月の CMK コストが発生します。AWS KMS では、以前の各バージョンの CMK を保持および管理して、古いデータを確実に復号できるようにしています。以下について、料金が請求されることはありません。

>・AWS 管理の CMK。サポートされている AWS のサービス内のリソースを最初に暗号化しようとすると、お客様に代わって自動的に作成されます。

>・削除を予定された CMK。待機期間中に削除をキャンセルした場合、その CMK は削除を予定されなかったものとして請求されます。

>・GenerateDataKey および GenerateDataKeyWithoutPlaintext API リクエストによって作成されたデータキー。これらの API リクエストを直接行うか、またはユーザーに代わって統合された AWS のサービスによって行うかに応じて、以下で説明される使用料金ごとに、これらの API リクエストに対して課金されます。AWS KMS で保存または管理されない限り、データキー自体に対して月間利用料金が課金されることはありません。

つまり、自身で作成したキーに料金が発生するようです。
よく読めよってな話ですね。


ちなみにLambda関数は以下のように修正しました。

l.51

```js
const hookUrl = process.env.hookUrl;
```

l.120

```js
exports.handler = (event, context, callback) => {
    if (hookUrl) {
        // Container reuse, simply process the event with the key in memory
        processEvent(event, callback);
    } else {
        callback('Hook URL has not been set.');
    }
};
```


環境変数は取得したWebHookURLをそのまま設定する感じ。
「hookUrl」：「https://hooks.slack.com/services/*********」

これで無料枠でslackにも通知が来るようになります。
オフラインリアルタイムどう書く過去問(第2回)

問題はこちら->http://nabetani.sakura.ne.jp/hena/ord2/
だいぶ前に書いていたのを修正したものです。
各列を8ビットの数として全部の列のandをとると（foldl/4）、横一列にそろっている位が1となります。
後は、それぞれの列で、該当の位より上位を右シフト（>>,drop/4）して一段下げます。

```Prolog
hatomtonum(X,Num):-(atom_concat('0x',X,Atom),atom_number(Atom,Num)).
numtohatom(Num,Atom):-
     Quot is Num div 16,Rem is Num mod 16,
     ntoha(Quot,A1),ntoha(Rem,A2),atom_concat(A1,A2,Atom).
ntoha(Q,S):-Q>9->
     member([S,Q],[[a,10],[b,11],[c,12],[d,13],[e,14],[f,15]]);atom_number(S,Q).

bittetris(In,Re):-
     concat_atom(Out, -, In),maplist(hatomtonum,Out,Nums),foldl(and,Nums,255,X),
     maplist(drop0(X),Nums,L),maplist(numtohatom,L,Atoms),atomics_to_string(Atoms,-,Re).
                 
and(X,Y,Z):-Z is X /\ Y.

drop(X,_,0,X):-!.
drop(X,Y,Z,RX):-
     (Z is Y /\ Z->(R is X mod Z,X1 is ((X-R-Z) >>1)+R);X1=X),
     Z1 is Z >> 1,drop(X1,Y,Z1,RX).
drop0(Y,X,RX):-drop(X,Y,128,RX).

solve([]):-!.
solve([_,B,C|T]):-
     bittetris(B,R),(R==C->write("pass ");write(" fail ")),writeln(R),solve(T).

start:-str(S),split_string(S,"\s,\n","\s",L),solve(L),!.

%start.

str("#0      ff-2f-23-f3-77-7f-3b    1f-03-00-1c-0d-0f-06
#1      01      00
#2      00      00
#3      7a-4e   0c-02
#4      56-b6   08-14
#5      12-12-12        00-00-00
#6      de-ff-7b        0a-0f-05
#7      95-be-d0        05-1e-20
#8      7c-b0-bb        1c-20-2b
#9      7a-b6-31-6a     3a-56-11-2a
#10     32-0e-23-82     18-06-11-40
#11     ff-7f-bf-df-ef  0f-07-0b-0d-0e
#12     75-df-dc-6e-42  35-5f-5c-2e-02
#13     62-51-ef-c7-f8  22-11-6f-47-78
#14     0c-47-8e-dd-5d-17       04-23-46-6d-2d-0b
#15     aa-58-5b-6d-9f-1f       52-28-2b-35-4f-0f
#16     ff-55-d5-75-5d-57       0f-00-08-04-02-01
#17     fe-fd-fb-f7-ef-df-bf    7e-7d-7b-77-6f-5f-3f
#18     fd-fb-f7-ef-df-bf-7f    7e-7d-7b-77-6f-5f-3f
#19     d9-15-b5-d7-1b-9f-de    69-05-55-67-0b-4f-6e
#20     38-15-fd-50-10-96-ba    18-05-7d-20-00-46-5a
#21     fe-fd-fb-f7-ef-df-bf-7f fe-fd-fb-f7-ef-df-bf-7f").
[メモ]BigQueryの配列型、構造体型

下記のような形式のオブジェクトをBigQueryに入れたい。（オブジェクトの配列を含んでいる）

```json
{
  "id": "1",
  "params": [
    {
      "key": "key1",
      "values": [
        "val1",
        "val2"
      ]
    },
    {
      "key": "key2",
      "values": [
        "val1",
        "val2"
      ]
    }
  ]
}
```

フィールドの定義はどのようにすればよいか。


## フィールド定義
GCPのWebコンソール上での設定を想定している。

|Name|Type|Mode|
|:--:|:--:|:--:|
|id|STRING|REQUIRED|
|params|RECORD|REPEATED|
|params.key|STRING|REQUIRED|
|params.values|STRING|REPEATED|

`params.*`をWebコンソールから定義する際は、`params`を定義した箇所の`RECORD`の右側の`+`から追加する。

## RECORD型
「1つ以上の他のフィールドのコレクション」（https://cloud.google.com/bigquery/data-types?hl=ja）


標準SQLでは、「構造体型」になっている。
https://cloud.google.com/bigquery/docs/reference/standard-sql/data-types?hl=ja#struct-type

## REPEATED
繰り返しフィールド。（https://cloud.google.com/bigquery/docs/legacy-nested-repeated?hl=ja）

標準SQLでは、「配列型（Array）」になっている。
https://cloud.google.com/bigquery/docs/reference/standard-sql/data-types?hl=ja#array-type

繰り返しフィールドを二つ以上もつ場合、そのまま`SELECT * FROM table_name`などとすることはできず、フラット化などを行う必要がある。

下記のエラーが発生する。
> Error: Cannot output multiple independently repeated fields at the same time.
PHP で Post リクウェストを処理

PHP で Post リクウェストを処理するサンプルです。

```php:post01.php
<?php
echo '<html lang="ja">';
echo '<meta charset="utf-8">';
echo "<body>";
echo "post01.php<p />";
echo "<h2>テスト</h2>";
if (isset ($_POST['name']))
    {
    echo "*** post ***<p />";
    $name = $_POST['name'];
    echo $name . "<p />";
    }
```

## テストスクリプト

curl でテスト

>```bash
curl -X POST http://localhost/test_dir/post01.php --data 'name=次郎'
```

HTTPie でテスト

>```bash
http -f POST http://localhost/uchida/test_dir/php/post01/post01.php name=次郎
```

## 確認したバージョン

```text
$ php --version
PHP 8.2.9 (cli) (built: Aug  1 2023 12:25:51) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.9, Copyright (c) Zend Technologies
```
【GAS】スプレッドシート及びシートオブジェクトをキャッシュしつつシートの取得を極限まで簡潔に書く

# 目的
- APIを叩く回数を減らしてスクリプトを高速化
- `SpreadsheetApp.getActiveSpreadsheet().getSheetByName('hoge')`とかいうクソかったるい記述をなくして可読性UP

参考：[GASでSpreadsheetを操作する自分的ベストプラクティス](https://qiita.com/ryan5500/items/e72eb205fbe006c2eb6f)

# 関数

```javascript
function sht(shtName,bkId) {
  var bk = bkId || 'me'
  if (!this[bk]) {
    this[bk] = {
      'bk' : !bkId ? SpreadsheetApp.getActive() : SpreadsheetApp.openById(bk),
      'sht' : {}
    }
  }
  if (!this[bk].sht[shtName]) {
    this[bk].sht[shtName] = this[bk].bk.getSheetByName(shtName)
  }
  return this[bk].sht[shtName]
}
```

## 使い方
第一引数にシート名、第二引数にスプレッドシートのID[^1]を指定してください。
第二引数を省略するとアクティブなスプレッドシート(とそのシート)を取得します。

# 効果
この関数は一度使用したスプレッドシート及びシートを記憶するので、

```javascript
var hoge = sht('hoge')
var fuga = sht('fuga')
```

と書いてもAPIのキックは3回で済みます。また

- 関数fooは関数barを呼び出す
- barは単独で使用することがある
- fooとbarは同じシートを操作する

といった状況の際に余計な気を回す必要がなくなります。

```javascript
function foo() {
  var hoge = sht('hoge')
  doSomething()
  bar()
}

function bar() {
  //fooでシートhogeを取得している場合はAPIにアクセスしない
  var hoge = sht('hoge')
  doSomething()
}
```

とても便利です。

[^1]: URLのttps://docs.google.com/spreadsheets/d/～この部分～/edit
PHP で Get リクウェストを処理

PHP で Get リクウェストを処理するサンプルです。

```php:get01.php
<?php
echo '<html lang="ja">';
echo '<meta charset="utf-8">';
echo "<body>";
echo "get01.php<p />";
echo "<h2>テスト</h2>";
if (isset ($_GET['name']))
    {
    echo "*** get ***<p />";
    $name = $_GET['name'];
    echo $name . "<p />";
    }

echo "</body>";
echo "</html>";
?>
```

## テストコマンド

curl でテスト

```bash
curl -G http://localhost/test_dir/php/get01/get01.php --data 'name=次郎'
```

HTTPie でテスト

```bash
http http://localhost/test_dir/php/get01/get01.php name==次郎
```


ブラウザーでテスト
![php01.png](https://qiita-image-store.s3.amazonaws.com/0/179446/24325b43-26b8-dda5-87fd-d8f45618bfed.png)


## 確認したバージョン

```text
$ php --version
PHP 8.2.9 (cli) (built: Aug  1 2023 12:25:51) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.9, Copyright (c) Zend Technologies
```

Post の例はこちら
[PHP で Post リクウェストを処理](https://qiita.com/ekzemplaro/items/f6e38285ea11dbc81435)
ブートローダー「rEFInd」のテーマを変える方法

# rEFIndのテーマについて
[MacのBootCampをブートローダを使って起動時に簡単に切り替えられるようにする](https://qiita.com/sxrun/items/7ba00b6e732cd1ac24ab)で、ブートローダー「rEFInd」を紹介しましたが、この「rEFInd」、初期画面で用意されているデザインが激しくダサいです。

いくつか、テーマを作っている方々がいるみたいなので、違和感のないテーマに差し替えてみました。

rEFIndのテーマ一覧
[The rEFInd Boot Manager: Theming rEFInd](https://www.rodsbooks.com/refind/themes.html)

この中で、一番シンプルで、マッチしそうな「Minimal theme」を導入してみました。
導入手順は、以下になります。

# テーマの導入手順

## 1. テーマのダウンロード
下記サイトから、rEFIndのカスタムテーマ「Minimal theme」を、ダウンロードしてください。
[EvanPurkhiser/rEFInd-minimal](https://github.com/EvanPurkhiser/rEFInd-minimal)

## 2. テーマのインストール
### 2-1. rEFIndのフォルダをマウント
rEFIndの設定などが入ってるフォルダは、通常では見えないので、以下の手順で、Macにマウントします。

```sh
# マウントするためのフォルダを作成
sudo mkdir /Volumes/efi
# マックにマウント
sudo mount -t msdos /dev/disk0s1 /Volumes/efi
```

上記手順で、FinderでEFIが見えるようになります。

### 2-2. テーマをコピー
EFI/EFI/refind の中に themes というフォルダを作って、ダウンロードしてきたテーマを「rEFInd-minimal」という名前で入れてください。

### 2-3. 設定ファイルへ追記
テーマを読み込ませるために、 EFI/EFI/refind/refind.conf の一番下に以下の記述を追記してください。

```config
# custom thema
include themes/rEFInd-minimal/theme.conf
```

# 画面イメージ
![687474703a2f2f692e696d6775722e636f6d2f33624d473655372e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/35613/20949894-ce9d-7d3c-8bcd-843ca6b338d2.png)
引用 https://github.com/EvanPurkhiser/rEFInd-minimal
Javascriptはscriptタグを読み込んだ時点ですぐ実行される

#エラーが出る例

```html:ov01.html
<!DOCTYPE html>
<html>

<head>
  <script src="./ov01.js"></script>
</head>

<body>
  <button>ボタン</button>
</body>

</html>
```

```javascript:ov01.js   
var button1 = document.querySelector('button');

button1.addEventListener('click', function () { 
  return console.log('Clicked!');
});
```

何故エラーが出るかというと、`<script src="./ov01.js"></script>`が読み込まれた時点では、

```html:ov01.html
<!DOCTYPE html>
<html>

<head>
  <script src="./ov01.js"></script>

```

までしか読み込まれてないからですね。

この時点でこのJavascriptを実行して

```javascript
var button1 = document.querySelector('button');
```

とか言われても、`button`なんて要素はどこにもないから、`querySelector`が無を返すわけですね。

#エラーが出ない例

```html:ov01.html
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <button>ボタン</button>
  <script src="./ov01.js"></script>
</body>

</html>
```

```javascript:ov01.js   
var button1 = document.querySelector('button');

button1.addEventListener('click', function () { 
  return console.log('Clicked!');
});
```

`<script src="./ov01.js"></script>`を`<button>ボタン</button>`より後ろに配置してやれば、ちゃんと動きます。


#余談

いや、多分、めちゃくちゃ基本的なことなんですよこれ。

にもかかわらず、今更ハマって「あれ？？」ってなったんですよね。

多分、これまでjQueryとか書く時に

```javascript
$(function(){
    // 実行内容
});
```

って何にも気にせずに書いてたから、問題にならなかったんでしょうね。

この書き方なら、htmlの読み込みが終わってから処理が実行されますからね。

でも、言われてみれば、jQueryライブラリ自体を読み込むscriptタグは先に書いてたなあ。

普段意識してないと、後から「そういえば。」ってなることが結構ありますね。


#参考リンク
超シンプルなことしか書いてないこの記事より、詳しいことが知れます。

mozillaによる一次ソース。一番確実。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/script#Notes

複数の外部JSファイルを読み込む時の実行順序について
http://analogic.jp/external-js-execute-timing/

【JavaScript基礎】JavaScriptの実行順序について
http://kde.hateblo.jp/entry/2017/05/20/212928