OmniAICreator/Qiita-1.07M huggingface dataset:
hamlの書き方 基礎編

 普段htmlを書いていてhamlに慣れていなかったので簡単にhamlの書き方をまとめます。

# Hamlファイルの構造
```html
<div id='content'>
  <div class='title'>
    <h1>Teen Wolf</h1>
    <a href='/'>Home</a>
  </div>
</div>
```

上記はhamlに直すと以下のようになる

```haml
#content
 .title
   %h1= @title
   = link_to 'Home', home_url
```

## %
<開始タグ>と<終了タグ>を書く代わりに%をつけるだけで良い

## 入れ子構造にするときインデントが必須
holidayではタブ一つ分(半角スペース2つ分開けています)

# タグの中身
```haml
#content
 .title
   %h1= @title
   = link_to 'Home', home_url
```

## id
divは省略可能なので%divも取り払って`#content`となる

## class
同様に%divを取り払ってclassは`.title`になる

# erbファイルをhamlに変換する
```haml
- if @x.present?
        %item
          .item
            %h2 商品詳細
          .item_detail
            - @item_units.each do |i|
              %dl.p-item__list
                - if %i.quantity != nil && %i.price != nil
                  %dt.p-item__list-term
                    = "#{i.quantity}#{i.quantity_description}"
                  %dd.p-item__list-description
                    = "#{number_with_delimiter(i.price)}円（税込）"
```
## -
eachやifなどロジックの始まりに-記号をつける

## =
=で評価されたruby式は文として挿入される

## #{}
hamlの中でrubyの式を展開する場合に用いる

# 参照

[haml公式](http://haml.info/docs/yardoc/file.REFERENCE.html)
Windows10で旧タイプ(拡張子.HLP)のヘルプを利用可能にする方法

# はじめに
**<font color="red">Windows XP 環境を持っている(winhlp32.exeが入手できる)方が対象です</font>**

以下の記事で紹介している方法で、デフォルトのwinhlp32.exeに手を加えずに実現する方法です
http://mrxray.on.coocan.jp/Delphi/Others/Win32HLP.htm#03


# 方法
・Windows XPの [Windows] フォルダから winhlp32.exe を Windows10 の任意のフォルダにコピー
・コピーした winhlp32.exe を winhlp32_old.exe(ファイル名は任意) にリネーム

開きたいHLPファイルを右クリックして
[プログラムから開く(H)]
↓
[別のプログラムを選択(C)]
↓
[他のアプリ]
↓
[常にこのアプリを使って .HLPファイルを開く] をチェックする
↓
[このＰＣで別のアプリを探す] をクリックして、コピーした winhlp32_old.exe(ファイル名は任意)を選択する 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411106/7059b001-1093-4aa4-4fbb-3abb7add766c.png)
【JavaScript】配列とオブジェクトの違い

#【JavaScript】配列とオブジェクトの違い

##配列
複数の値(要素)を[]の中に入れ、参照したり、追加削除して利用する

```js

    let values = [1,2,3,4,5];
    console.log(values[0]);//1

    let cities = ['Tokyo','Kyoto','Sapporo','Fukuoka','Udon'];
    console.log(cities[1]);//Kyoto
```

初めに[]で器を作り、push()で末尾に追加して利用したり、初期化時に[]で上書きする使われ方が多い印象。
一時的な入れ物。

以下はRPGツクールMVのスイッチの初期化処理。
[]することでスイッチの情報を初期化(ALL off状態)している

```js

    Game_Switches.prototype.clear = function() {
        this._data = [];
    };

Game_Picture.prototype.tint内の色調(RGB)の初期化では0を入れている。

    if (!this._tone) {
        this._tone = [0, 0, 0, 0];
    }
```

##オブジェクト
複数の値をプロパティ付きで管理する。
プロパティ＝名前ラベルと理解。

キャラクター座標をcharacterPositionという定数にx:100,y:200と設定した例。

```js

    const characterPosition ={
        x:100,
        y:200
    }
```

参照方法は2通り。
・オブジェクト名.プロパティ名
・オブジェクト名["プロパティ名"]
characterPositionのx座標を参照するには、characterPosition.xとする。

```js
    console.log(characterPosition.x);//100
    console.log(characterPosition["y"]);//200
```

高さz軸を追加する場合はzプロパティを追加して値を入れれば良い。

```js

    const characterPosition ={
        x:100,
        y:200,
        z:300
    }
```
[JavaScript] nodeListから配列に変更する方法



querySelectorAll とかで、HTML要素を取り出した後に、配列プロトタイプに存在するメソッドを使用したい時ってありますよね。

でも、

querySelectorが取得するのは、配列ではなく、NodeListなのです。

でも配列の数々のメソッドは非常に便利なものなので、今回は

NodeList　→  Array 

への変更方法を記述していきます。


## ① Array.from を使用する

const links = Array.from(document.querySelectorAll(".mw-category a"));


## ② 配列リテラルを使用する

const links = [...document.querySelectorAll(".mw-category a")];

配列リテラルの最初に...とコンマを三つ記述することで、全ての要素をincludeすることができるのです。

このコンマ三つのことは、スプレッド構文と言います。もっと詳しくは、、、
https://qiita.com/akisx/items/682a4283c13fe336c547


##これでNodelistから配列に変換できたはず。。。
X240のトラックパッド交換後のドライバ更新無効化

### Thinkpad X240のトラックパッド交換
Thinkpad X240のトラックバッドをボタン独立タイプに交換した．
オリジナルはボタンがないパッドだが，使うのは左右ボタンと赤いポインタだけ，だから不便．

検索したらいくつか結果があった．
このサイトの情報を参考にした．
[Thinkpad X240sをX250用独立クリックパッドに交換してみる♪]
(https://minkara.carview.co.jp/userid/206485/blog/35635376/)

交換後，通常のPSマウスのドライバでも赤いポインタと左右のボタンは動作するようだ．
なので別途ドライバをインストールする必要はなく，交換したボタン付きのパッドは使ええている．

### 自動でSynaptic pointing deviceのドライバが適用される
しかし，たまにアップデートが自動で行わる．
X240オリジナルのトラックパッドのドライバがインストールされる．
そして，独立ボタンが全く動作しなくなってしまう．

電源を入れて使おうとしたら，ボタンが効かない．
だからなにもできず，無理してキーボードだけで頑張るのは虚しい．

自動でSynaptics poiting deviceのドライバが有効になってしまうようだ．
C:にソフトがインストールされ，マウスのドライバとしてそれが適用されている．

USBにマウスを挿して，当てられたドライバを削除し，PS2マウスのドライバにしたら動作した．
自動更新はアリガタ迷惑に近い．

### 自動でのアップデートを無効化
勝手にドライバをインストールせず，ドライバは今のままで使いたい．
Windows10に，そういう更新を無効化する方法はあるのか知らない．

検索したら設定方法が見つかった.
[How to Disable Automatic Driver Downloads on Windows 10]
(https://www.laptopmag.com/articles/disable-automatic-driver-downloads-on-windows-10)

要するに
1. コンパネからシステム
2. システムからハードウエア
3. ドライバ自動インストールを無効
と類っていくと辿り着く．

参考したサイトと手元のWin10Proとはちょっと構成が違っている？のか，辿り着くのに手間取った．
ただし最終的には「ハードウエア＞ドライバの自動更新を無効」というようなChekBoxがあった．

voila (^-^)/
iMacカメラの自撮りとコラボ動画の作成に関して。（3）

ここからは、今企画中のネットセッション企画プロジェクトとしてマイナスワン動画に合わせて自分のプレイ（楽器演奏等）を自撮りした動画をプロジェクトのサーバーへアップする方法のiMac利用例を紹介致します。
星野源さんのうちで踊ろうのヒットでYouTubeの動画に合わせて自撮り更にコラボ動画を作る方法が色々ネットに紹介されていますが、最終的にiMovieなどでコラボ動画を作る際、自撮りに元動画の音が被っていない方がきれいに仕上がるので以下の様な方法がiMacでは良いのではと紹介致します。このサイトではジャズのマイナスワン動画にQuickTimePlayerの新規ムービー収録で、YouTube動画に合わせて自撮りするものです。
１、YouTube動画サイトをリアルタイムで再生する。この際ヘッドホン利用する。
以下がマイナスワン動画サンプル。
ジャズのスタンダード曲
[![ビデオが開けなかった場合に表示されるテキスト](http://img.youtube.com/vi/u-Q8tgpr74I/0.jpg)](http://www.youtube.com/watch?v=u-Q8tgpr74I)

https://www.youtube.com/watch?v=u-Q8tgpr74I
２、QuickTimePlayerの新規ムービー収録
![スクリーンショット 2020-05-04 7.08.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/06731737-d93f-2b2b-c017-a0d4994e9faf.png)
更に入力を内蔵マイクに設定。
![スクリーンショット 2020-05-04 7.09.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/053055a1-6d3b-9108-9727-c12f3150be29.png)
３、次にiMacの場合もGarageBandを自分の音確認用に立ち上げ新規のトラック追加でオーディオを選択音源の接続先：内臓マイクにし
演奏や録音中に自分の音源の音を聴くにチェックし作成ボタンクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/339e24e3-667f-7673-4e6c-5f3b3567d82f.png" width="60%">

![スクリーンショット 2020-05-04 9.29.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/abeb9563-d29f-0fd0-9a83-921d4a6ac59a.png)
トラックの音量を調節し、自分の音量と、マイナスワン動画の音量を調節する。（別に録音はしなくても良い）

４、後はQuickTimePlayerをスタートしてから、YouTubeマイナスワン動画再生で自撮りが出来ます。

<font color="DeepPink">またWindowsの場合はやはり簡単なオーディオインターフェースが必要と思われます。次回その方法をご案内致します。</font>
ある方がWindowsの場合に自撮りした方法は、WindowsPCへヘッドホンを指し、片耳開けて撮った様です。これも一案かも！！
３、自撮りするiPhone(スマホ）はこれでいつでもスタンバイ出来ます。
　下記サイトのジャズのマイナスワン動画でみなさんのパフォーマンスを撮って、ネットセッションへメッセージ送って下さい。
別途対応して、コラボ動画作成致します。
https://www.facebook.com/kobayashi.shinsaku
尚、YouTube動画をiPadにダウンロードして共演も出来ますが、正確な尺の音源はやはり音のマイナスワンで自分のソロ部分をダウンロードして聴きながら自撮りするとより音ズレのない作品が出来ます。
iMovie等の動画作成ツールにてにてコラボ動画作成可能です。

[![ビデオが開けなかった場合に表示されるテキスト](http://img.youtube.com/vi/u-Q8tgpr74I/0.jpg)](http://www.youtube.com/watch?v=u-Q8tgpr74I)
下記がMP３マイナスワン音源ですバックパートのみです。
<a href="./imgdata1/Illclosemyeyes02.mp3">マイナスワン音源１</a>
<a href="./imgdata1/Illclosemyeyes01.mp3">マイナスワン音源２メトロノーム有り</a>
https://www.facebook.com/kobayashi.shinsaku
別アカウントにAuroraをクローンさせたい

## 概要

[他のアカウントのユーザーに CMK の使用を許可する](https://docs.aws.amazon.com/ja_jp/kms/latest/developerguide/key-policy-modifying-external-accounts.html) に基本的にかいてあるが、オプショナルな記述が混ざっていてわかりにくかったのでまとめる。

## 状況

移行元A `111122223333`

- RDS Aurora
  - DB クラスター設定から、移行先BのAWSアカウントID `444455556666` を入力
- KMS CMK
  - CMKポリシー :arrow_forward: 後述

移行先B `444455556666`

- Resource Access Manager
  - 承認するだけ
- IAM
  - IAMポリシー :arrow_forward: 後述


## 移行元A: CMKポリシー
![](https://docs.aws.amazon.com/ja_jp/kms/latest/developerguide/images/console-external-accounts-sm.png)


ここに移行先BのAWSアカウントID `444455556666` を入力。

これだけでOK。アクセス制限は移行先BのIAMポリシーでやる。

## 移行先B: IAMポリシー

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "kms:Encrypt",
                "kms:Decrypt",
                "kms:ReEncrypt*",
                "kms:GenerateDataKey*",
                "kms:DescribeKey",
                "kms:CreateGrant",
                "kms:ListGrants",
                "kms:RevokeGrant"
            ],
            "Resource": "arn:aws:kms:ap-northeast-1:111122223333:key/キー"
        }
    ]
}
```

Auroraの暗号化キーとして使うには、`CreateGrant` なども必要だった。
厳密には、もっと削れると思う。
terminal操作メモ

## 近況報告
　勉強ってなんのためにするの？って聞かれたら，どう答えるべきなのかって，教師を目指していた時に考えていたことがあります。当時の自分はどう答えてたんだろう。今の自分はこう答えます。 **その勉強「は」意味がないよ**。

というのも，勉強は手段であって第一の目的になり得ないので，目的がない状態で勉強の意義を問うことを僕はできません。モテるために勉強する，いい大学に進学するために勉強する。。。なんでもいいんです。どんな小さなことでもいいから目的をつくってあげる，きっかけを一緒に見つけてあげるのが，教師。方位磁針，道しるべ、、、教師ってそういうものであるべきなんだろうな。余談ですが，僕の好きな漫画で我が子を叱る父親のシーンでこんなセリフがあるんです。「目的もなしにだらだら手段を行使するのは時間の無駄だし身にならない，そして何よりつまらねぇ」って。鞠山さん大好き。

# 今回のお題
terminal操作を全くわかってなかった件

## 背景
techcanp卒業して１週間。過去の復習したりGoの勉強していたりしていると，いつもディスプレイ上でクリックしたりしていたことをテキストでは，教本ではターミナルで行っていたりするんです。フォルダを行ったり来たり，マウスをいじったりするよりターミナルで完結させた方が圧倒的に手軽ですもんね。今回はterminal周りの操作をまとめてみました。

## 対象
プログラミング初心者
私のようにターミナル操作をおろそかにしていた人

### CLIとGUI
　はい，ここからわかっていませんでしたorz
・GUI Graphical User Interface
・CLI Comand Line Interface
　interfaceはinter(入る)face(面)，つまり，境界を示しています。イメージは，プールに飛び込む際の空気と水の境界の部分，水中への入口が水面です。水面は概念的に言えば，人間から見た水の表面です。パソコンでも**人間の目から見た入力方法で種別**しています。

　グラフィックを用いて操作を行う仕組みを グラフィカルユーザインタフェース(GUI) といいます。例えば、「マウスでファイルをダブルクリックして開く」という操作など、普段行う操作のほとんどはGUIで行なっていることが多いでしょう。

　コマンドライン (または コマンドラインインタフェース:CLI )とは、コンピュータに対してキーボードからコマンドという文字を打ち込んで操作を行う仕組みです。ちなみにプログラミング言語はほぼこちら側です。

　一方の利点はもう片方の欠点でもあるので詳細は省きますが，CLIはターミナル１つ開いておけばパソコンのあらゆる作業ができます。そのコマンドについて本記事ではまとめていきます。

### directory（ディレクトリ）
　直訳で「住所録」です。CLIにおいて「ここにはこれが入っているよ」という保管場所を示してくれています。よく耳にする，フォルダに関しては，プログラムの集合体もフォルダと言いますが，保存場所という意味合いはディレクトリと同じです。
・ルートディレクトリーーーパソコンの最上層のディレクトリ
　移動コマンド　cd /
・ホームディレクトリーーー各ユーザーに割り当てられたディレクトリの最上位　
　移動コマンド　cd   or   cd ~
・カレントディレクトリーーー今いるディレクトリ
　確認コマンド　pwd（present working directory）
基本的にターミナルを開いた時のディレクトリはホームディレクトリ。Finderを開いた時の初期画面がホームディレクトリと考えて差し支えなし。

### コマンド詳細(詳しくは一次ソース)
|command　　　|mean|remark|
|:------:|:--:|:----:|
|cd|移動|change directory|
|cd ..| １つ上のディレクトリに戻る|
|rm|削除|remove|
|ls|ディレクトリ内表示|list|
|mkdir|ディレクトリ作成|make directry|
|touch|ファイル作成，rubyを書くなら.rbを最後につける|
|mv A.rb B.rb|A.rbをB.rbに名称変更|move|
|mv A.rb /projects|A.rbをprojectsディレクトリに移動|
|history|コマンド履歴表示||

[この人のも参考になる](https://qiita.com/ryouzi/items/f9dee1540a04a0bfb9a3)

### path
住所へのルートと考えていただければ。絶対パスと相対パスがあります。説明は面倒なので，イメージで覚える。新大塚から後楽園に行きたいとします。絶対パスで説明するなら，池袋/新大塚/茗荷谷/後楽園となり，相対パスでは/茗荷谷/後楽園になります。ディレクトリの位置を俯瞰して見るか，自分の場所から見るかの違いです。

## おわりに
まとめているうちにしっかり理解できたー！
プログラミングの技術だけでなくこういった土台の部分も大切にしていきたいです。
Raspberry pi 4 に Lubuntu を gdm3 でインストールする

[Ubuntu 20.04 LTS Server を Raspberry Pi 4 にインストール](https://qiita.com/azumabashi/items/182f365cf7405156788c) ではGUIインストールの手前までをやってみました。

ここでは Lubuntu をインストールしてみます。
作業日：2020年5月4日

次のコマンドを実行します。

```
sudo apt install lubuntu-desctop
```
途中でディスプレイマネージャ gdm3、sddm のいずれを選択するか聞いてきます。
gdm3 を選択しておきました。

インストールが完了したら再起動します。

```
sudo shutdown -r
```

GUIが起動しました。
パスワードを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/685e30b7-e8a0-0e90-4da3-6e27b8d41366.png)

デスクトップが表示されます。左上の Activities をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/71be853e-da6a-44c3-16cc-18c8e63f984b.png)

Show Applications をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/6bb5a2be-68e6-b0a2-a64a-abd9e1eae25a.png)

各種メニューが出てきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/7ffb4370-32fa-d8e4-90dc-b80b28d947d5.png)
bobthefishの色設定変更 git未コミット時の眩しい赤を落ち着かせる。

fishのプラグイン[bobthefish](https://github.com/oh-my-fish/theme-bobthefish)を使わせていただいていて、すごく助かっているのですが不満が一点ありました。
**gitで未コミットのファイルが有るときの赤色が眩しい。**

```diff:~/.config/fish/functions/__bobthefish_colors.fish
      ~~(中略)~~
    case '*' # default dark theme
      ~~(中略)~~
+      set -x color_repo_dirty               17184b $white
-      set -x color_repo_dirty               $red[2] $white
```

これで、下の画像のように眩しい赤からおとなしい紺色に変わりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256917/c55b5aca-d3a2-6421-a004-5f0d8f5e45da.png)

これ以外の点で不満はなかったので、今回はナイーブにdefaultの値を上書きしてしまいました(-_-;)
R と Java

rJava のインストールに問題があることが多い。

基本的には、rJava は、ソースインストール時に以下のコマンドを実行する。

```
$ sudo R CMD javareconf
```

これで、R の Java へのパスが更新される。

ここで更新されるファイルは以下のふたつ。

${R_HOME}/etc/ldpaths

${R_HOME}/etc/Makeconf

ところが、この二つのファイルの Java 設定がそもそも一致していない。

Mac では、基本的に Java は、/usr/libexec/java_home で、どのバージョンの Java がデフォルトかが指定されている。

そこで、まず、Makeconf の Java を、/usr/libexec/java_home で設定するように書き換える。

```
$ sed -i -e 's|JAR = |JAR = $(/usr/libexec/java_home)/bin/jar #|g' ${R_HOME}/etc/Makeconf
$ sed -i -e 's|JAVA = |JAVA = $(/usr/libexec/java_home)/bin/java #|g' ${R_HOME}/etc/Makeconf
$ sed -i -e 's|JAVAC = |JAVAC = $(/usr/libexec/java_home)/bin/javac #|g' ${R_HOME}/etc/Makeconf
$ sed -i -e 's|JAVAH = |JAVAH = $(/usr/libexec/java_home)/bin/javah #|g' ${R_HOME}/etc/Makeconf
```

また、 ldpaths は、ハードコードが必要なので、こちらも /usr/libexec/java_home と一致しているか確認する。

```
$ export JAVA_HOME=$( grep "JAVA_HOME=" ${R_HOME}/etc/ldpaths | sed -e "s|: \${JAVA_HOME=\([^\}]*\)}|\1|" )
$ if [ ${JAVA_HOME} != $(/usr/libexec/java_home) ]; then
$   export JAVA_HOME=$(/usr/libexec/java_home)
$   sed -i -e "s|JAVA_HOME=[^\n]*|JAVA_HOME=${JAVA_HOME}}|g" ${R_HOME}/etc/ldpaths
$ fi
```

また、Fink の場合、Fink で管理されているファイルを書き換えることはそのままではできない。

このため、上のスクリプトは、前半は InstallScript 内に記述し、後半は PostInstScript に記述した。

これでも、java_home が変わった時はエラーが出る可能性がある。だが、以前よりは改善になったであろう。
MacOSXでバッテリーに優しく。Pythonで過充電アラートを実装してみた。


(追記) 
Macの場合、残量については気にしないで良いそうです。
参考： https://apple-no-kajirikata.com/902/#8020
コンセントに繋いで100%の状態でも問題ないとの情報もあります。
従って、この情報を信頼するならば、本記事の方法は取る必要がなさそうです。ご参考までに。

## [経緯 ~どうでもいい話~]
常時使っていたMacbookを修理に出す関係で、昔のMacbookを引っ張り出しました。
すると、充電の割合表示がバグっていて、13%とかなっているのに、実は90%充電できていたり、、、バグ？よくわからない状態でした。

再起動してもSMCリセット？みたいなのをしても直らなかったので、いつものMacbookで使っていた充電アラートを入れようとしたのです。
バッテリーの寿命を伸ばすため、充電状況を管理するものです。

「Battery Heroより未然に過充電を防げると思うCharge Check使ってみる」
https://jitenshatoryokou.com/chargecheck-14199.html

が、充電アラートのChargeCheckのダウンロードサイト（*）が「403 Forbidden」エラーとなっていました。
*http://blog.macorz.com/2338.html

GoogleにもIndexされていないようで、困ったのでPythonで作ってみました。


## [Code]
PC : MacBook Pro (Retina, 13-inch, Early 2015)
OS : OSX High Sierra 10.13.6

### 1. python コードを作成

```python

# coding: utf-8
SetMaxThreshold = 0.79  #  上限の閾値を設定（これ以上なら充電しない） 推奨は80%らしいので、直前の079で
SetMinThreshold = 0.41  #  下限の閾値を設定（これ以下なら充電） 推奨は40%らしいので、直前の041で

import subprocess
import sys
import re
import os

cmd = "/usr/sbin/ioreg -l | /usr/bin/grep Capacity"
res =subprocess.check_output(cmd, shell=True).decode('utf-8').strip().split('\n')

Max = 0
Current = 0

for st in res:
    ar = st.split('=')
    key = re.sub('^(.*?")','',ar[0]).replace('" ','')
    if (key=='MaxCapacity'):
        Max = ar[1].strip()
    elif key=='CurrentCapacity':
        Current = ar[1].strip()


cmd = "/usr/sbin/ioreg -l | /usr/bin/grep ExternalChargeCapable"
chk =subprocess.check_output(cmd, shell=True).decode('utf-8').strip().split('=')[1].strip()
isCharge = True if (chk=='Yes') else False
Notify = False
rate=0
if (int(Max) > 0 and int(Current) > 0):
    rate  =float(Current)/float(Max)
    if rate <= SetMinThreshold and not isCharge:
        os.system("/usr/bin/osascript -e 'display notification \"充電してください！\"' && /usr/bin/osascript -e 'beep 5'")
        Notify = True

    elif rate >= SetMaxThreshold and isCharge:
        os.system("/usr/bin/osascript -e 'display notification \"充電を止めてください\"' && /usr/bin/osascript -e 'beep 5'")
        Notify = True
    else:
        print('No Nofied  = '+str(rate))


print('Notified:'+str(Notify)+' | Rate:'+str(rate)+' |Info : isCharge = '+str(isCharge) + ' | Max ='+str(Max) + ' | Current ='+str(Current))

```

ポイントは、コマンドを絶対パスで書くこと。

### 2. crontab に登録

```bash
crontab -e
```
で

作成したPython を保存し、絶対パスで登録

```vim
* * * * * python /Users/{user_name}/tool/monitoringMacCharge.py> /dev/null
```

crontab -l で登録を確認

"\> /dev/null" で　標準出力時のメール送信を回避
参考：https://ips.nekotype.com/2407/

できました。

### おまけ 充放電回数の確認
![Apple_と_Menubar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258028/4e744db8-bd26-bce0-a3ab-5a799f5b5ad0.png)

optionを押しながら、リンゴマークをクリックして、システム情報を表示

![MacBook_Pro_と_「MacOSXでバッテリーに優しく。Pythonで過充電アラートを実装してみた。」を編集_-_Qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258028/08c75690-2d53-da20-4f63-0254866f290c.png)

電源 > 状態情報 > 充放電回数

Macbook Pro 13inch　だと1000回でバッテリー交換時期とのこと。ここを抑えたい。

(追記) 
Macの場合、残量については気にしないで良いそうです。
https://apple-no-kajirikata.com/902/#8020
コンセントに繋いで100%の状態でも問題ないとの情報もあります。
従って、本記事の方法は取る必要がなさそうです。Macは賢くてよかったです。

＊こちら、確かに体感値では、以前のMacbookはこのような使い方をしていて、バッテリーに特に大きな影響はありませんでした。 

以上
iphoneカメラの自撮りとコラボ動画の作成に関して。（2）

ここからは、今企画中のネットセッション企画プロジェクトとしてマイナスワン動画に合わせて自分のプレイ（楽器演奏等）を自撮りした動画をプロジェクトのサーバーへアップする方法の一例を紹介致します。
<h2>iPhone+iPad編</h2>
iPhoneにて自撮りする方法はこの<a href="">シリーズの1</a>で紹介したので省きます。
マイナスワン動画（ダウンロード、またはサイトを再生しながら）をヘッドホン聴きながら楽器（ボーカルなども）等を演奏すると、自分の音がヘッドホンにより、不明瞭になります。そこで裏技で、GarageBandアプリを利用します。（尚、GarageBandの使い方等は別途サイト等確認下さい。）
１、新規追加MySongでAudio Recorderのマイクアイコンをクリックすると下記の様な画面が出ます（バージョンによって違いは有るかも？）
　先ずヘッドホンをセットし、モニタをOnにします（ヘッドホンセットしないとOnにはなりません）。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/83c69bc8-05ed-a75e-f3e6-ea25a9eaab69.png" width="60%">
更に、ギヤ⚙マーク(設定)をクリックして→詳細のバックグラウンドで実行をオンにする。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/0d6681d1-2da6-a6b2-8074-d631d74e4c98.png" width="60%">
これでGarageBandの設定はOKです。
２、１の設定でiPadのマイクがヘッドホンにモニタされ、更に再生するメディア（ダウンロード済みの音源、サイトの音源）を聴きながら演奏出来流様になります。
後は、GarageBandのマイク音量等、演奏し易い設定は調整して下さい。
但し、この方法ですとGarageBandのモニタへのフィードバックに若干の遅延があり気になる方は問題ありです。
３、自撮りするiPhone(スマホ）はこれでいつでもスタンバイ出来ます。
　下記サイトのジャズのマイナスワン動画でみなさんのパフォーマンスを撮って、ネットセッションへメッセージ送って下さい。
別途対応して、コラボ動画作成致します。
https://www.facebook.com/kobayashi.shinsaku
尚、YouTube動画をiPadにダウンロードして共演も出来ますが、正確な尺の音源はやはり音のマイナスワンで自分のソロ部分をダウンロードして聴きながら自撮りするとより音ズレのない作品が出来ます。
iMovie等の動画作成ツールにてにてコラボ動画作成可能です。

[![ビデオが開けなかった場合に表示されるテキスト](http://img.youtube.com/vi/u-Q8tgpr74I/0.jpg)](http://www.youtube.com/watch?v=u-Q8tgpr74I)
下記がMP３マイナスワン音源ですバックパートのみです。
<a href="./imgdata1/Illclosemyeyes02.mp3">マイナスワン音源１</a>
<a href="./imgdata1/Illclosemyeyes01.mp3">マイナスワン音源２メトロノーム有り</a>
laravel入門！　bladeの作り方（extends,yield,section）

laravelではHTMLではなくbladeというものが使われます。
bladeはテンプレートエンジンというもので、HTML+PHPを書きやすく、そして見やすくするためのもの（すごくざっくり言うと）。


そのbladeを書くにあたって、いろんな構文を使うから特に覚えておきたいものをメモしておきます。
僕の特に覚えておきたいものは、**extends,yield,section** の３つ。
この３つは、ビュー（bladeで作成したファイル）のレイアウトを共通化して、使い回しがしやすいようにするための構文。


#今回使うファイル

・app.blade.php（親）
・index.blade.php（子）

という2種類のファイルを使っていきます。
app.blade.phpというのがブラウザ上に表示させるファイルの、雛形となるもの。親ファイル。
index.blade.phpの方が、app.blade.phpを引き継いで、雛形を具体化（？）させたファイル。

どちらもviewsというフォルダに入っている前提です。
階層的にはこんな感じ。


```
laravel\resouces\views
```


app.blade.php（親）


```php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  
  <title>
    @yield('title')
  </title>

  <!-- Styles -->
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>

  @yield('content')

</body>

</html>
```

index.blade.php（子）

```php
@extends('app')

@section('title', 'ユーザー登録')

@section('content')
  <div class="container">
    メインとなるコンテンツの中身をここに書く
  </div>
@endsection
```

このapp.blade.phpとindex.blade.phpを合体させて、
ブラウザで人が見れるページを生成していきます。

#@extends：ビューの継承
index.blade.phpの中で
@extends('app')
とすることで、
<font color="Red">viewsフォルダの中にある、「app.blade.php」というファイルを継承する。</font>


※いくつものファイルに何回も同じことを書きたくないから、
app.blade.phpを作って、その中に毎回書くであろう同じ内容（雛形になる部分）を予め書いておく。
それを子のファイル（index.blade.php）に継承させる。

いつもファイルの先頭に書くから存在を忘れがち。


#@yield(読み方：イールド)と@section~@endsection：コンテンツの挿入


・@yieldには、外部化したいコードを書く。

・@yieldは親のファイルに書いて、@sectionは子のファイルに書く。

app.blade.phpの中で

```php
@yield('title')
```

とすることで

index.blade.phpで書いた

```php
@section('title', 'ユーザー登録')
```

が
app.blade.phpの中の

```php
@yield('title')
```

の中に入る。
（sectionの中身がyieldに置きかわる）

また、

```php
@section('content')
    <div>
        コンテンツ
    </div>
@endsection
```

という形もあって、@endsectionがつくタイプもある。
これも親のファイルの、@yield(‘content’)と書いてあるところに入ります。

親のファイルでcontent部分の位置だけ決めておいて、子ファイルでそのcontentの具体的な内容を入れる、みたいな感じ。


#合体させると…

app.blade.phpとindex.blade.phpを合体させると、以下のようなファイルになります。


index.blade.php

```php
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">

  <title>
    ユーザー登録
  </title>

  <!-- Styles -->
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>

  <div class="container">
    メインとなるコンテンツの中身をここに書く
  </div>

</body>

</html>

```

今回は内容の簡素化のため、ヘッダーもフッダーもなしにして書きました。

titleタグの中には**ユーザー登録**のタイトル名が入り、
bodyタグの中には**divタグのコンテンツ**が入りましたね。
試してないけどこうなるはず。



#参考
よく見るサイトはこちらです。


https://blog.hiroyuki90.com/articles/laravel-blade/
↑
こちらのサイトはこの記事を書くにあたって参考にさせていただきました。

http://blog.katty.in/7087
↑
こちらのサイトはコントローラーとビューをつなぐときに参考にさせていただきました。
今回の記事とはあんまり関係ないけど、多分bladeの次につまづきそうなところなので自分用メモ。

https://blog.hrendoh.com/getting-start-and-overview-of-laravel5/
↑
こちらのサイトはlaravelで一連の流れをサーとやるときに参考にさせていただきました。




#余計なお世話かも
bladeを書くにあたって、HTMLの構造をわかっていた方が理解しやすいと思いました。


なので、そもそもHTMLの基本構造がわからないときには
https://mdstage.com/html-css/website-practice/html-structure
このサイトがわかりやすいかも。
簡単なVimプラグインを作って基礎を学ぶ


普段はVimで開発しており、様々なプラグインを使っていますが、自作プラグインというものに興味があったので簡単かつミニマムなプラグインを作ってみてVimScriptの基礎を学んでみます。

## 環境
* macOS High Sierra
* Vim8.2

## 内容
今回は天気予報APIを使ってその日の天気を教えてくれるプラグインを作ってみます。

## ディレクトリ構成
まずvimプラグインのディレクトリは、

* autoload
* plugin
 
この2つのディレクトリを作ります。

### autoload
autoload配下にファイルを作成すると、Vim起動時ではなくコマンド実行時にのみファイルを読むことが可能です。

### plugin
plugin配下には実際に呼び出す関数を定義したファイルを作成します。

それぞれのディレクトリに、
`show_weather.vim`
というファイルを作成します。

```
.
├── autoload
│   └── show_weather.vim
└── plugin
    └── show_weather.vim
```

## 関数定義
実際に処理を行う関数を作成します。

```vim:autoload/show_weather.vim
function! show_weather#ShowWeather() abort
  " ここに処理を書いていく
endfunction
```

Vimではエラーが発生してもその後の処理も実行されますが、`abort`をつけておくとエラー発生時に即関数を抜けることが可能となります。

## APIリクエスト
次に天気予報APIにリクエストを送る処理を書いていきます。
APIには無料の`openweathermap`を利用します。
APIの利用には会員登録が必要となります。
https://openweathermap.org/

リクエストにはVimから外部コマンドcurlを叩いてその結果を得ます。
今回は東京の天気を取得します。
APIリクエストにAPIKeyが必要となりますので、vimrcなりに書いて呼び出すようにしておきましょう。

```vim:autoload/show_weather.vim
...
  let cmd = "curl -s 'http://api.openweathermap.org/data/2.5/weather?units=metric&q=tokyo,jp&APPID=".g:open_weather_appid."'"
```

```vim:.vimrc
let g:open_weather_appid = 'xxxxxxxxx'
```

`g:変数名`でグローバルな変数を定義出来ます。

## 分岐処理
実行前にcurlコマンドが使えるかの分岐処理を入れておきます。
他の言語同様にif文が使えるので`exist()`の結果で分岐してみます。
外部コマンドは`system()`を使って実行が可能です。

```vim:autoload/show_weather.vim
...
  if executable('curl')
    let cmd = "curl -s 'http://api.openweathermap.org/data/2.5/weather?units=metric&q=tokyo,jp&APPID=".g:open_weather_appid."'"
    let result = json_decode(system(cmd))
  endif
```

Vim8から`json_decode`が使えるようになってので返ってきたjsonデータに実行します。
これでVimの値としてのデータアクセス可能です。

## エラー処理
次にレスポンスコードが200以外はエラーを投げるように実装しておきます。
`echoerr`を利用することでエラー発生場所を表示できます。

```vim:autoload/show_weather.vim
...
    if result['cod'] == 200
      echo result['weather']
      echo result['main']
    else
      echoerr result
    endif
```

成功時はレスポンスのjsonから天気と気温などを表示するようにしておきました。雑。

最終的に出来上がったのはこんな感じです。

```vim:autoload/show_weather.vim
function! show_weather#ShowWeather() abort
  if executable('curl')
    let cmd = "curl -s 'http://api.openweathermap.org/data/2.5/weather?units=metric&q=tokyo,jp&APPID=".g:open_weather_appid."'"
    let result = json_decode(system(cmd))

    if result['cod'] == 200
      echo result['weather']
      echo result['main']
    else
      echoerr result
    endif
  else
    echoerr 'error! curl not available.'
  endif
endfunction
```

### 実行コマンド
最後にplugin配下のファイルに実行コマンド書いておきます。

```vim:plugin/show_weather.vim
command! ShowWeather call show_weather#ShowWeather()
```

これでVimから`:ShowWeather`を実行すると天気データの入ったデータが表示されるようになりました。

```
[{'id': 804, 'description': 'overcast clouds', 'icon': '04n', 'main': 'Clouds'}]
{'pressure': 1007, 'temp': 16.3, 'temp_min': 12.78, 'feels_like': 14.93, 'temp_max': 18.33, 'humidity': 79}
```

## まとめ
今回のソースは一応githubにあげておきました。
https://github.com/sakupa802/vim-show-weather

VimScriptの基本は理解出来たので、次回はもっと実用的なレベルのものを公開できればと思ってます。
Vimって素晴らしい。

## 参考
https://knowledge.sakura.ad.jp/23436/
http://secret-garden.hatenablog.com/entry/2016/10/11/000000
【備忘録】RDSでデータベースを作成する

#まずAWSの画面にあるサービスをクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/e27df9d6-2c4d-dd25-f861-a07be2c74a3f.png)



#RDSを検索する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/7bcd6954-1fde-aca8-a1b7-95f092c23914.png)


#データベースの作成をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/f94a89df-b9ad-82d3-b047-d7fca327d92c.png)

#データベースの設定をする
データベースの作成方法を選択：標準作成でOK
エンジンオプション：MariaDBでOK
テンプレート：無料利用枠でOK（これを指定するとこれ以降の設定項目は無料利用枠用になる）
設定
DBインスタンス識別子：データベース名を記入
認証情報の設定
マスターユーザー名：データベースサーバーで使用するマスターユーザー名を記入。
マスターパスワード：マスターユーザーのパスワードを記入。
DBインスタンス：デフォルト（バースト可能クラス）
ストレージ：汎用SSDの20GiB
あとの他の項目はデフォルトのままでOK

データベースの作成をクリック　で完了！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/d635375d-e459-a857-1538-67334b6c0186.png)


#セキュリティグループの設定
デフォルトのセキュリティグループが設定されるが、自分で設定したいものがあれば以下の手順で実施する。

まず、EC2の画面からセキュリティグループの設定画面まで行く。

セキュリティグループ名を決めて、以下のようにルールを設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/425d36fc-5f45-5e65-45e2-45de2f4156e7.png)

※「ソース」のところは、EC２のWEBサーバーからRDSのDBサーバーにアクセスできるようにしたいので、
「カスタム」で**EC２のローカルのIPアドレスを設定する。**
※EC2とRDSで作成したサーバーは同じVCPにあるので、今回はEC2のグローバルアドレスではなく、
ローカルのIPアドレスを指定する。

ルールの保存をして完了！！


次に、RDSのダッシュボードに行き、「データベース」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/61f2cbf9-4f2b-9c7b-88c3-2a5eca528a9a.png)


作成したDB識別子をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/108725c8-9da3-a6a9-ae5a-fb99292f45cb.png)


右上に変更ボタンがあるのでそちらをクリックすると、
「DB インスタンスの変更: <作成したデータベースサーバー名>」という画面が表示されるので、

「ネットワーク & セキュリティ」　＞　「セキュリティグループ」で、
先ほど登録したセキュリティグループを設定してあげる。

「次へ」をクリックし、変更内容を確認し、「DBインスタンスの変更」をクリックして、
完了！！
Gitの基本的な使い方(CUI)

#はじめに
本記事では、複数人で開発をする際に便利なツールであるGitについて
簡単な使い方をまとめます。
初心者向けの記事になります。

#Gitのインストール
Windowsの場合はgit for Windows([リンクはこちら](https://gitforwindows.org/))をダウンロードします。
Macの場合は最初からインストールされています。

#作業フォルダの作成
```
  $ mkdir test
```

#ローカルリポジトリへのコミット
Gitでファイルを管理するにあたって初期設定を行います。

```
  #作業フォルダにて
  $ git init
```
初期設定を終えると変更を保存するためのフォルダが生成されます。
(WindowsのPowershellではGet-ChildItem-force)

```
$ ls -a
# .   ..   .git
```
このように.gitというフォルダができています。
実際にファイルを作成していきます。(WindowsのPowershellではNew-Item)

```
$ touch sample1.txt
$ touch sample2.txt
```
Gitではステージング環境を設けることで、リポジトリに反映するファイルを選択することができます。直接リポジトリにコミットすることもできます。
![https---git-scm.com-images-about-index1@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406018/48ff3d0c-b1d6-2a34-af49-d0baf15f9f22.png)

まずは、作成したsample1.txtをステージング環境に追加します。

```
$ git add sample1.txt
```

Gitで管理されているファイルの現在の状態を確認します。

```
$ git status
#########出力#########
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

	new file:   sample1.txt

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	sample2.txt
```
結果を見ると、sample1.txtが追加されていることがわかります。
続いて、ステージング環境から、ローカルリポジトリにコミット(変更の反映)をします。コミットする際にはコメントが必要なため以下のようにコマンドを入力します。

```
$ git commit -m 'comment'
```
これでローカルリポジトリへの反映が完了しました。

##ブランチを分けて機能開発
現在のブランチを確認

```
$ git branch
# * master
```

初期状態のブランチ名はmasterとなっています。
ここに、新しく```hoge```というブランチを切ります。

```
$ git checkout -b 'hoge'
# Switched to a new branch 'hoge'
```
これで、ブランチを作成し現在のブランチを移動します。

```
$ git branch
# * hoge
#   master
```

sample1.txtをvi等で編集します。

```
#sample.txtに追加
This is Branch
```
これをローカルリポジトリに反映させます。
はじめにブランチへの変更を反映させます。

```
$ git add sample1.txt
$ git commit -m 'Update File'
```

次にmasterブランチに統合(merge)します。

```
$ git merge hoge
```
これでmergeできました。

#リモートリポジトリへの反映(Github)
事前に[Github](https://github.com/)にアクセスしアカウント登録を行います。
その後、「New repository」からリポジトリの作成を行います。
完了したら、ローカル環境との接続を行います。
リモートリポジトリのURLは```https://github.com/<ユーザー名>/<リポジトリ名>.git```となります。
まずは、登録されているリモートリポジトリを確認します。

```
$ git remote -v
```

現段階ではまだ、何も登録されていないため、何も表示されないです。
次に、先程作成したリポジトリのURLを```origin```という名前で登録します。

```
$ git remote add origin https://github.com/<ユーザー名>/<リポジトリ名>.git
```

登録したら、再度```$ git remote -v```で確認しましょう。

最後にリモートリポジトリへファイルのアップロードを行います。

```
$ git push origin master
```
これでローカル環境にコミットしたsample1.txtがGithubのページに追加されます。

#おわりに
最後までご覧いただきありがとうございます。
今回はCUIでの簡単なGitの使いかたの説明しましたが、
GUIでできるGithub Desktop等もございますのでそちらを使うのもおすすめです。
pyenvでRaspberryPiのPythonを3.7以降にアップデート

#pyenvとは？
Linux向けPythonのバージョン管理ツールです。

pyenvの使用法に関する記事はたくさんありますが、
**・3.7以降ではインストール時にエラーが出る**
**・.bash_profileのみでは起動時に設定が反映されない**
という問題が発生したので、備忘録も兼ねて本記事を投稿しました。

#必要なもの
・ネットワークにつながったRaspberryPi（今回はRaspberryPi3 ModelBを使用）

#方法
[こちら](https://qiita.com/hoshi621/items/c8b82ab42564256df884)を参考にさせて頂きました
##①pyenvをインストール
Pythonのバージョンを新しくするため、pyenvをインストールします。
[こちら](https://qiita.com/hoshi621/items/c8b82ab42564256df884)を参考にさせて頂きました。
（既にインストールしている方は飛ばしてください）

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

```
sudo apt install git openssl libssl-dev libbz2-dev libreadline-dev libsqlite3-dev
```

・3.7以降では下記のパッケージもインストールしないとエラーが出る

```
sudo apt install libffi-dev
```

・Githubからpyenvをコピー

```
git clone https://github.com/yyuu/pyenv.git ~/.pyenv
```

・home/[ユーザ名]/.bash_profileを編集（なければ作成）

```:.bash_profile
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
```

・RaspberryPiを再起動したのち、pyenvのバージョンを確認

```
pyenv --version
```
「pyenv 1.2.18-8-g5e8719ab」のようにバージョンが表示されれば成功

**※バージョンが表示されないとき**
home/[ユーザ名]/.profileに下記内容を追記
（.bash_profileのときと同じ内容）

```:.profile
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
```

再起動して「pyenv --version」を実行すればバージョン表示されるはずです

##②Pythonのバージョンをアップデート

・インストール可能なバージョン一覧を表示

```
pyenv install --list
```

・目的のバージョンをインストール
例えば3.7.6をインストールしたい場合は下記

```
pyenv install 3.7.6
```

・バージョンの変更

```
pyenv global 3.7.6
```

・バージョンがアップデートされたかを確認

```
python --version
python3 --version
```
どちらも更新後のバージョン（3.7.6）となっていれば成功です
JavaScriptをすこーし勉強してみたので書き留める③

最低限の知識一応あるけど、復習も兼ねて書いてみることにするの巻その③

# 関数定義
### 定義

```
function {関数名}({引数}) {
　　処理
}
```

### 呼び出し

```
関数名({引数})
```


# 変数スコープ
### ローカル変数
- 関数内の変数定義は関数内でのみ見える。

```
function showMessage() {
  let message = "Hello, I'm JavaScript!"; // ローカル変数

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- エラー! 変数は関数のローカルです
```

### グローバル変数
- 関数はグローバル変数にアクセスすることができる
- 関数はグローバル変数に対してフルアクセス権を持つ
    - グローバル変数の内容を変更することもできる

```
let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

-------------------------------------

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) グローバル変数の変更

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // 関数呼び出しの前は John

showMessage();

alert( userName ); // Bob, 関数によって値が変更されました
```

#### グローバル変数 注意点
- グローバル変数にはプロジェクトレベルのデータのみを保持するため、どこからでも見える事が重要
- 現代のコードはほとんどもしくは全くグローバル変数を持たない
- なので、関数内で自身のタスクに必要なすべての変数を宣言する

### デフォルト値
- パラメータが与えられていない場合、その値は undefined になる
    - 引数2つで定義されている関数を引数1つで呼び出すことができる
    - その場合、2つ目の引数は`undefined `になる
    - 引数が指定されなかった場合に使用する`デフォルト値`を指定することができる
        - 関数定義の引数部分に下記のように指定する
        - `=`の右辺に関数を指定することもできる

```
function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given
```

# 関数の命名
- 関数はアクション
- 名前は通常は動詞

例えば...

- `"get…"`
    - 値を返す
- `"calc…"`
    - 何かを計算する
- `"create…"`
    - 何かを生成する
- `"check…"`
    - 何かをチェックし、真偽値を返す

等

--------------------
関数式まで書こうと思ったけど、わからんくて諦めた。ニュアンスはわかるけど言語化できない。
やっぱ実際に書いてないからむずいなぁ。動かしてみてからにしよ。
おわりまる。
vscodevimのキーバインド "leader", "j" や "j", "j" が急にバグった場合の対処法

# 何が起きたか
VSCodeでVim記法を使うためにこちらを使っています。
https://github.com/VSCodeVim/Vim

<Esc>キーを`"leader(space)", "j"`にバインドしているのですが、コレが急に変な挙動をしだしました。
カーソルの上の行が消えたり、前にある文字が消えたり...。


# 結論
vscodevimのバージョンを落とすことで解決。

# 手順
### 表示 > 拡張機能
![スクリーンショット 2020-05-04 2.43.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287998/0d9b4a16-66c6-6dbd-d600-4bd3655bcb9c.png)

### `vim`と入力 > 歯車アイコン > 別のバージョンをインストール
![スクリーンショット 2020-05-04 2.44.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287998/19a51edb-5a04-bb4c-14ac-7427643737e2.png)

### 1.13.1以前を選択
![スクリーンショット 2020-05-04 2.45.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287998/dfb7fe61-0094-320f-5b5e-6e9b4799d37e.png)

### 再起動

なおった!!

# 参照
イシュー立ってました。
助かりました
https://github.com/VSCodeVim/Vim/issues/4787

# おわり
かなりハマった...。
簡単にバージョン落とせるんですね。
覚えておこう。
二次元配列について

#配列について
>
配列とは**複数のデータをひとまとめに扱うこと**ができるクラス。
**型名に[]をつけ宣言すると使うことができる**。
`型名[] 変数名;`
**配列は宣言しただけでは使うことができず、配列の実体を作成する必要があります**。
実体の作成には`new`キーワードが必要になります
`配列型変数 = new 型名[配列の長さ];`
(配列型の変数というのは配列を格納するためのただの入れ物で、 配列の実体を作成して変数に格納してやる必要があります。 new はこの実体を作成するための演算子です)。


##多次元配列について
>
データが多次元的に並んでいるときに用意されているクラス。
宣言
`型名[,] 変数名; // 2次元配列
型名[,,] 変数名; // 3次元配列`
１次元配列の時と同じく`new`キーワードを使って実体を作成する必要がある。
`変数名 = new 型名[長さ1, 長さ2]; // 2次元配列の場合
変数名 = new 型名[長さ1, 長さ2, 長さ3]; // 3次元配列の場合`

"多次元配列はすべての行の行数が同じになる。そのため多次元配列は**Rectangular Array(四角い配列)**と呼ばれます。"

###まとめ
配列はたくさんのデータを扱い整理するときに用いられるもの。
配列を宣言した後は実体を作るためにnewでまた宣言。

[参考](https://ufcpp.net/study/csharp/st_array.html)
自己相関，偏自己相関をpythonでプロットする方法

#はじめに
自己相関係数と偏自己相関係数をグラフに描いたコレログラムをpythonでプロットする方法を述べる．

#自己相関係数のプロット
statsmodels.apiの関数sm.graphics.tsa.plot_acfを用いる．

#自己偏相関係数のプロット
statsmodels.apiの関数sm.graphics.tsa.plot_pacfを用いる．

#例
例として，以下のAR(1)モデルの自己相関係数をプロットする．

```math
y_t = 1 + 0.5 y_{t-1} + \epsilon_t
```
ただし，$\epsilon_t$は分散1の正規ホワイトノイズとする．
また，$y_0=2$とする．

```python
#モジュールの取り込みとグラフをいい感じにするおまじない
import matplotlib as mpl
import matplotlib.pyplot as plt
plt.style.use('seaborn')
mpl.rcParams['font.family'] = 'serif'
%matplotlib inline
import numpy as np
import statsmodels.api as sm

#プロットするデータ列の作成
#今回は100個の時刻におけるデータを取り込む
y = np.zeros(100)
np.random.seed(42)
epsilon = np.random.standard_normal(100)
y[0] = 2
for t in range(1,100):
    y[t] = 1 + 0.5 * y[t-1] + epsilon[t]

#プロットする時系列データを見てみる
plt.plot(y)
plt.xlabel('time')
plt.ylabel('value')
plt.title('time-value plot');
```
次のグラフがプロットされる．
![chart.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565132/7299bd97-103d-d164-cf7f-d36e22104887.jpeg)

```python
#自己相関係数のプロット
sm.graphics.tsa.plot_acf(y, lags=20)
plt.xlabel('lags')
plt.ylabel('corr')

#偏自己相関係数のプロット
sm.graphics.tsa.plot_pacf(y, lags=20)
plt.xlabel('lags')
plt.ylabel('corr')
```
自己相関係数のコレログラム，偏自己相関係数のコレログラムがプロットされる．
![c1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565132/db0763fe-e722-8efc-c759-1bcf5fd8ed51.jpeg)
![c2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565132/50518b97-cddd-e8bf-216c-c66f63cd2b2c.jpeg)
ジャンパーワイヤーの長さ

#免責
この記事に従って発生した如何なる損害も筆者は負うことができません。ご免なさい。

# 目的
電子工作を勉強しているので、そのメモです。間違っていたらごめんなさい。
ジャンパーワイヤー(ジャンパーケーブル？)は長さごとに色が決まっているそうなので、そのメモです。
[抵抗のカラーコード](https://ja.wikipedia.org/wiki/受動素子#カラーコード)と同じ値を長さにも適用しているようです。

# ジャンパーワイヤーの長さ
![jumper_wire_length.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190950/7ec13200-9f4c-fc11-6d66-e6a2c27e1d14.png)

# 参考
[The Jumper Wires(f-alpha.net)](http://en.f-alpha.net/electronics/electronics-lab/lab-equipment/jumper-wires/)
【備忘録】phpMyAdminでデーターベースにアクセスできるようにする

#目的
phpMyAdminでデーターベースにアクセスできるようにする

phpMyAdminはPHPで動いているので、まずはPHPを入れる

#PHPをインストール
何が必要か分からないので、一旦下記のコマンドで全部入れる。

```
yum install php* -y
```

#phpMyAdminをインストールする。

まずはphpMYAdminを置くところに移動する。

```
cd /var/www/html/
```

phpMyAdminをインストールする。

```
wget https://files.phpmyadmin.net/phpMyAdmin/4.0.10.20/phpMyAdmin-4.0.10.20-all-languages.zip
```

以下のコマンドでZipファイルを解凍して、ファイル名を分かりやすい名前に変える。

```
unzip phpMyAdmin-4.0.10.20-all-languages.zip
mv phpMyAdmin-4.0.10.20-all-languages phpmyadmin
```

#config.inc.phpの編集をする

「config.sample.inc.php」というファイルがありますので、コピーして「config.inc.php」というファイル名で保存する。

```
cp /var/www/html/phpmyadmin/config.sample.inc.php /var/www/html/phpmyadmin/config.inc.php
```

config.inc.phpを編集する。

```
vim /var/www/html/phpmyadmin/config.inc.php
```

RDSの場合、エンドポイントを以下の場所に設定する。
※本来であればホスト名かIPアドレスを指定するのですが、AWSのRDSを使用する場合は、RDSで作成したデータベースのエンドポイントを設定する。

```config.inc.php
$cfg['Servers'][$i]['host'] = '<エンドポイント>';
```

仕組みとしては、
EC2で作成したWEBサーバーにある「グローバルアドレス/phpmyadmin」にアクセス。
↓
設定したRDSのDBサーバーのエンドポイントにアクセスしにいく。
↓
データベースの中身見れる。


#phpMyAdminへアクセス
「グローバルアドレス/phpmyadmin」をブラウザのURL欄に入力してアクセス！
以下の画面が出てくればOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/7bd3245a-f5f7-d639-9ba5-4cf19570faa0.png)

ログインできれば完了！！

#もし上記の画面が出ない場合
たまに上記の画面が出ず、phpMyAdminのフォルダ内が表示されることがある。
その場合はApacheを再起動してみてください。

```
service httpd restart
```
Unity　ゲームジャムに参加してみたって話

只今　Unityルームにて　ゲームジャムのイベントが　

やっていたので、　参加してみました。　

こちらは不定期にやっているイベントなので　

【１年に３回ぐらいしかやっていない】

時期を逃すことが　度々あるんですよね。

わたしも　イベントやっていることに気づかなくて　

気づいたのが　４月３０日でした。　

そして、　締め切りが５月３日なので　

これはちょっと無理かなーと　思っていたんですけど　

とりあえず、　なんとか急ごしらえで　ゲーム作ってみました。　

それがこちら。　

[ＣＯＷＣＯＷの村](https://unityroom.com/games/cowcow999)




テーマが密なんですけど。　まったくいいのが思いつかず　

なんとなく、　どうぶつの森みたいな感じにしたかったので　

牛にしました。　

感染した牛を４匹　見つけたら　クリアになります。　

ただちょっと動作が重たいので　

スペックの低いＰＣだと、　操作がカクついてしまうかもしれません。　

あと、Unityちゃんが止まることもしばしばあります。　

そのへんの　微調整が間に合わなかったのが　残念ですけどね。　

さすがに　３日では無理があったか。　

２日でゲームを作って、　そのあとは　ひたすらデバックしてましたもん。　でなんとか　提出日ギリギリで　完成する形になったという感じですね。

クラウドビルド　８回ぐらいやったわ。






まあ、　　よかったら　プレイしてみてください。　

他にもエラーなど　発見したら　コメントしてください。
JQueryとPythonを勉強しながらGCP上でWebサービスを公開するまで

# はじめに
COVID-19のせいで時間があり余っているため、少しだけ知識のあるJQueryやPython等を使って何かサービスを外部公開できないか考えてみた。
いろいろ考えてみたが、自分が使いたいものを作ってみることにした。それは**モバイルSuicaの利用履歴を経費精算に簡単に出せるように編集する**というものである。
完成品はこちら
https://www.mobilesuica.work
# 筆者のレベル

- プログラムを最初に触ったのは25年前に大学の研究でC言語を利用したとき
- 大学卒業後は全く触れなかったが、10年ほど前にちょこっとRubyとVisual Basicを、2年ほど前からPythonでREST APIを叩くスクリプトを作り始める（自社製品の勉強も含めて）
- 2020年の2月ぐらいから社内の詳しい人に教えを請う形でJavascript+Python+Dockerという今回のアーキテクチャの実装方法を教えてもらう
- 所謂製品レベルのものを作った経験は一切なし

# アーキテクチャ
コンテナ、パブリッククラウドの勉強もするために以下のような構成とした。
![mobilesuica.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629456/b72b2fa1-5d08-3e2d-92b5-4666b383d6eb.png)

- **Nginx**でリバースプロキシ
    - リバースプロキシには[**jwilder/nginx-proxy**](https://github.com/nginx-proxy/nginx-proxy)を利用
    - 証明書作成には[**docker-letsencrypt-nginx-proxy-companion**](https://github.com/nginx-proxy/docker-letsencrypt-nginx-proxy-companion)。これは上記のものとセットで使うと楽というのを見かけたので使うことにした。
- **Flask**でREST APIサーバ
- PDFファイルの読み込みには**tabula-py**でそのままCSVに変換
- CSVを**Pandas**で処理
- JQueryでクライアントの処理
- テーブル表示・ファイル出力は[**datatables**](https://datatables.net/)
- **Bootstrap**を利用
- GCP上のf1-micro/Container-Optimized-OSで作動。

# 仕様作成
外回りをする社会人の方ならご理解いただけると思うが、モバイルSuicaの利用履歴は使いにくい。

1. PDFでしか出力できない
2. フィルタが日付しかないため、経費精算できないコンビニでの買い物などの履歴を省けない
3. そもそも合計値が無い
4. 利用額が「差額」という形でマイナスになっている
5. 「出」「入」「残額」等無駄な項目がある

上記の不満を全て解決するWebサービスを作ることが目標である。
実装することを予定した機能は以下の通り

- モバイルSuicaのサイトからダウンロードしたPDFファイルをそのままアップロード出来る
- モバイルSuicaのサイトと同じフォーマットでテーブルとしてブラウザ上に表示する
- チェックボックス等で自由に項目をフィルタできるようにする
- フィルタした結果の合計値を追加する
- フィルタした結果のファイル出力を行う
 
次回からはPythonでサーバ側の実装方法など説明します。
チャーリープレクシングの要点を理解する

#免責
この記事に従って発生した如何なる損害も筆者は負うことができません。ご免なさい。

# 目的
チャーリープレクシングを理解してみようと思います。
将来、このテクニックを応用してLED以外も制御したいです。

# はじめに
[チャーリープレクシング](https://en.wikipedia.org/wiki/Charlieplexing)は、マイコンのピンを多重化して使うことで、より多くのLEDを制御することができるテクニックだそうです。ピンの数をnとすると、最大でn×(n-1)のLEDを制御することができます。
チャーリープレクシングについては、みなさまが分かりやすく解説してくれています。特に、こちらの[動画](https://www.youtube.com/watch?v=Bx5GLyJSWPk)が分かりやすいです。英語ですが映像だけで十分理解できます。
本記事では、私個人が理解しづらかった点をまとめておきます。

# なぜか都合よく点灯しないLED
図のように、３本あるピンを上からプラス、非接続(Hi-Z)、マイナスとすることで、赤い枠の１つのLEDを点灯させることができます。
しかし、青い枠の２つのLEDは点灯しません。電気が流れているから点灯しても良さそうなのに。
このことがチャーリープレクシングの要点のひつだと思うのですが、あまり説明されていないような。
![220px-3-pin_Charlieplexing_with_individual_resistors.svg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190950/f54e7893-6307-2d0f-b6d6-ff9bf069dd37.png)

# 電圧降下によりLEDが点灯しない
LEDを2つ以上直列で接続すると、互いの電圧降下によって必要な電圧が得られずにLEDが点灯しないようです。２つある抵抗を１つにしても電圧と電流が足らずに点灯しませんでした。
![charliplexing_2leds.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190950/552049f6-8571-44a8-659e-30adb00241a9.png)
モテるzshのプロンプト

# Terminalがbashからzshに
macOS Catalina(10.15)となり、Terminalの標準shellがbashからzshに変更されました。
[macOS 10.15 Catalina でターミナルのやつが zsh になった](https://mac-ra.com/catalina-zsh/)
プロンプトでモテるチャンスです。

## デフォルトのTerminal
![zsh01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/e1532154-173a-b256-1c13-255332a5cedf.jpeg)
こんなTerminal開いて女子が寄って来るわけがありません。
バカっしょ。

# zshのカスタマイズ
zshはカスタマイズ可能です。bashでも全然できると思いますけど。
まずはこちらを読んでください。
[お前らのターミナルはダサい](https://qiita.com/kinchiki/items/57e9391128d07819c321)
zshの見た目でモテてみましょう。

# preztoをインストール
zshのフレームワーク[prezto](https://github.com/sorin-ionescu/prezto)をインストールします。

```sh:
$ git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"

$ setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done
```

# テーマを変えます
preztoのデフォルトはsorinというやつです。

```sh:
#現在のテーマの確認
$ prompt -c
Current prompt theme is:
  sorin
```
テーマをcloudというのに変えます。
エディタで.zshrcを編集します。

```sh:
$ nano .zshrc
```
以下を追加します。

```sh:.zshrc
# Customize to your needs...
autoload -Uz promptinit
promptinit
prompt cloud #ここがテーマ名になります。
```
変更後、シェルの設定を再読み込みします。

```ｓｈ：
$ exec $SHELL -l
```
…？
![cloud.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/c4bee0de-3971-fa43-06af-df96a65857e0.jpeg)
え？何このラーメン食べた後のシミみたいなやつ。
これでモテるわけねーだろ、と思った貴方。
ごもっともでございます。ダサい。前よりダサい。

# フォントRictyのインストール
参考:[Homebrewを使ってRictyをインストール](https://qiita.com/mktktmr/items/5481eac60b96c80cc262)
Rictyの他に、派生フォントRicty Discordもインストールされます。

```sh:
$ brew tap sanemat/font
$ brew install ricty
$ cp -f /usr/local/opt/ricty/share/fonts/Ricty*.ttf ~/Library/Fonts/
$ fc-cache -vf
```
ついでにRicty Diminishedもインストールしてみましょう。
参考:[HomebrewでRicty Diminishedをインストールする方法](https://qiita.com/ponsuke0531/items/0709f1e73a9cb1df55de)

```sh:
$ brew tap homebrew/cask-fonts
$ brew cask install font-ricty-diminished
```

# フォントをRicty Discordに
Terminalの設定からフォントをRicty Discordにします。
![cloud2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/68f36066-c26d-f4d8-79e7-aaa51b1d70c2.jpeg)

なんということでしょう～。
殺風景なプロンプトに可愛い雲☁が現れたではありませんか！
同じ部署の気になるあの娘に
「なにこれ…たかし君のプロンプト、雲さんだね。やだ可愛い♡」
って言われます。
# さらに機種依存文字も使えます
cloudは引数の文字列をプロンプトにできます。
.zshrcを編集します。

```sh:
$ nano .zshrc
```

```sh:.zshrc
# Customize to your needs...
autoload -Uz promptinit
promptinit
prompt cloud ☠ #cloudの後にガイコツを追加
```
<img width="290" alt="スクリーンショット 2020-05-04 1.19.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/2d7204a5-b454-9ff1-a275-6f4e014b368c.png">

「やだ～、たかし君のプロンプト、スカル〜。意外に男らしいところあるのね♡」

## 絵文字も使えます
<img width="196" alt="スクリーンショット 2020-05-04 1.24.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/72831b0f-0b79-12a4-c5fc-48552c411f67.png">

「やだ～、たかし君たら、違う意味でスカる〜」
# まとめ
という感じでプロンプトでモテてみてください。
【Kotlin】ダウンキャストが必要な時はいつ？

Kotlinを勉強し始めています、継承関連の復習も兼ねて、メモ。

まずKotlinの継承についてです。以下のようなAnimalクラスがあるとします。
Kotlinではopenをつけないとサブクラスが作成できません。

```kotlin
open class Animal {
    open fun explain() = println("動物です")
}
```

次にAnimalクラスを継承したCatクラスを作成します。

```kotlin
class Cat : Animal() {
    override fun explain() = println("猫です")
}
```
これをAnimalの型の変数に代入することができます。

```kotlin
val cat : Animal = Cat()
cat.explain()
```
この場合の結果はどうなるでしょうか？
実体としてはCatクラスのため、「猫です」が表示されます。

次に以下のDogクラスを作成します。

```kotlin
class Dog : Animal() {
    fun bark() = println("吠える")
}
```
これもAnimalのサブクラスのため、Animalの型の変数に代入できます。

```kotlin
val dog : Animal = Dog()
dog.bark()
```

しかし、このコードはコンパイルエラーになります。Animalクラスはbark()を知らないためですね。
なので以下のようにダウンキャストすると、コンパイルエラーは消えます。

```kotlin
dog as Dog
dog.bark()
```
しかし、Kotlinでは、型チェックをすれば、ダウンキャストしたものとして扱ってくれる便利機能があります。

```kotlin
if (dog is Dog) dog.bark()
```

これをスマートキャストといいます。
このようにKotlinでは自動でやってくれるものが多いので、徐々に慣れていきたいと思います。
Pythonで書くシンプルなガチャロジック

#内容
アイテム別に重み付けをしてn連ガチャを行います

##パラメータ
パラメータとして以下の物を用意

```python
# 抽選対象のアイテムIDと重みのdictionary
item_dic = {"id_1":1,"id_2":5,"id_3":14,"id_4":30,"id_5":50}
# 抽選回数
times = 11
```

##ガチャ処理の関数

```python
import random
def gacha(item_dic, times):
	total_weight = 0
	for value in item_dic.values():
		total_weight += value

	results = []
	for i in range(times):
	    results.append(lottery(item_dic,total_weight))

    return results

def lottery(item_dic, total_weight):
	score = random.randint(1,total_weight)
	range_max = 0
	for item_key, weight in item_dic.items():
		range_max += weight
		if score <= range_max:
			return item_key			

```

## ガチャを実行
```python
item_list = gacha(item_dic, times)
```
もう少し綺麗な書き方があると思いますが、とりあえず。
Hugoで未だ対応していないgtag.jsを利用して Googleアナリティクスする


# はじめに

2020年5月3日時点において、Hugo最新バージョン[v0.69.2](https://github.com/gohugoio/hugo/releases/tag/v0.69.2)にて、Google Analyticsとの連携のための組み込みテンプレート(`{{ template "_internal/google_analytics_async.html" . }}`)は最新の[gtag.js](https://www.googletagmanager.com/gtag/js)ではなく、古いタイプの[analytics.js](https://www.google-analytics.com/analytics.js)を利用しているとわかりました。

Hugoのソースコードを見るとこのリンク箇所でそれが確認できます。
https://github.com/gohugoio/hugo/blob/04b1a6d997e72d9abada28db22650d38ccbcbb39/tpl/tplimpl/embedded/templates/google_analytics_async.html#L20-L23

この課題に関して下記のIssueが2018年1月には起票されていますが、2020年5月時点で未だに公式の対応はされていません。
https://github.com/gohugoio/hugo/issues/4327

単純にGoogle Analyticsを利用する場合は特にanalytics.jsでも問題ありませんが、[Googleタグマネージャー](https://support.google.com/tagmanager/answer/6102821?hl=ja)と同機能のタグ活用やGoogle広告との連携をする場合は、gtag.jsを利用した方がメリットがあります。

[公式ヘルプ](https://support.google.com/analytics/answer/7509746?hl=ja)では下記のようにgtag.jsについて記載しています。

> グローバル サイトタグ（gtag.js）は、ウェブページのタグ設定を効率的に行うためのフレームワークとしてを提供します。gtag.js を使用すると、タグの管理や実装が容易になります。また、最新の測定機能や統合が追加のメリットをすぐに活用できます。

本記事では、Hugoで静的サイトをビルドする際にgtag.jsを利用する方法について紹介します。

# バージョン

* Hugo: [v0.69.2](https://github.com/gohugoio/hugo/releases/tag/v0.69.2)

# やり方

Google AnalyticsのGUIにてトラッキングコードの箇所を見ると下記スクショのようにgtag.jsのテンプレートコードが得られるのでこれを使います。

![ga_2020-05-03 17.23.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91562/6a49ce4c-cf78-7882-1b12-2247ad2e4280.png)

筆者はテーマ(theme)として[hugo-ink](https://themes.gohugo.io/hugo-ink/)というものを使わせてもらっており、これに対してForkし修正をしました。

```diff:layouts/partials/analytics.html
+ {{ if not .Site.IsServer }}
+ {{ with .Site.GoogleAnalytics }}
+ <!-- Global site tag (gtag.js) - Google Analytics -->
+ <script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
+ <script>
+   window.dataLayer = window.dataLayer || [];
+   function gtag(){dataLayer.push(arguments);}
+   gtag('js', new Date());
+
+   gtag('config', '{{ . }}');
+ </script>
+ {{ end }}
+ {{ end }}
```

```diff:layouts/partials/footer.html
- {{ template "_internal/google_analytics_async.html" . }}
+ {{- partial "analytics" . -}}
```

[差分リンク on GitHub](https://github.com/momotaro98/hugo-ink/commit/75887ea5f1283c8a53c93ec92ef8a5cb7bfa78d0)

`{{ if not .Site.IsServer }}`はローカル上で`hugo server`した場合はGoogle Analytics連携させないための処理です。

themeを使っているレポジトリにて`config.toml`で`googleAnalytics = "UA-XXXXXXXXX-1"`(自分のトラッキングコードを入れましょう)のように設定すれば、`{{ with .Site.GoogleAnalytics }}`をにて値が得られ、`id={{ . }}`でビルド時に値が入ります。

`{{ template "_internal/google_analytics_async.html" . }}`を利用すると、冒頭で紹介したようにHugoが裏側で`analytics.js`を呼びます。これを`layouts/partials/analytics.html`のものを利用するように付け替えます。
footer.htmlに入れているので、すべてのページに対してgtag.jsが埋め込まれます。

これでビルドすることで連携設定完了です。

# 参考

* https://maku77.github.io/hugo/settings/google-analytics.html
* https://support.google.com/analytics/answer/7509746?hl=ja
* https://developers.google.com/analytics/devguides/collection/gtagjs/migration?hl=ja
* https://gohugo.io/templates/internal/
* https://qiita.com/akiras7171/items/066fde9a2dbcc39f3dce
Node.js(12.x)でfetchを使ってIFTTTのWebhooksへPOST【備忘録】

# Node.jsでfetchを使ってIFTTTのWebhooksへPOSTするには？
その通りの事をしたかったのだが、記事があまり見当たらなかった（検索が下手なのかも）ので備忘録として認めておく。
前提として、[IFTTTのWebhooks](https://maker.ifttt.com/use/)に登録し、キーとイベント名を持っている状態とする。

```javascript
const fetch = require('node-fetch');

const send2IFTTTWebHooks = async (j) => {
    const key = "XXXXXXXX";
    const event = "XXXXXXXX";
    const options =
    {
        "method":"POST",
        "headers":
        {
            "Content-Type":"application/json"
        },
        "body": JSON.stringify(j)
    };
    console.log("send ===> " + JSON.stringify(j));
    // "send ===> { "value1" : "123", "value2" : "456", "value3" : "789" }"
    const ret = await fetch("https://maker.ifttt.com/trigger/" + event + "/with/key/" + key, options);
    console.log("ret ===> " + JSON.stringify(ret.ok));
   // "ret ===> true"（成功の場合）
};

const main = async () => {
    const json = { "value1" : "123", "value2" : "456", "value3" : "789" };
    await send2IFTTTWebHooks(json);
};

main();
```

結局、fetchの使い方なのだが、意外と忘れてしまう。
Gitの"clone・pull・fork"の違いを理解してなかったのでまとめてみた！

今までGitのclone/pull/forkについて全然理解してなかったのでまとめてみました！
間違い等ありましたらご指摘お願いいたします。

#clone

```
$ git clone リモートリポジトリ ローカルのディレクトリ
```

リモートリポジトリをローカルの指定したディレクトリにコピー（複製）する。

#pull

```
$ git pull リモートリポジトリ ローカルリポジトリ
```

元あるローカルリポジトリにリモートリポジトリとの差分をmergeする。


#fork

自分のリモートリポジトリにコピーする。それをcloneして編集してpushする。編集された自分のリモートリポジトリをfork元にpull requestを送る。


#疑問点というか何か

- 空のディレクトリにinitして`$ git remote add origin リモートリポジトリ`を登録して、そこにpullすること
- 空のディレクトリにcloneすること

これらは同じこと！

>forkがいまいち分からない！
なぜいちいち自分のリモートリポジトリにコピーするのか？
cloneしてpushしてpull requestを送れば同じことなのではないのか？

Answer：他人が開発した元のリポジトリを変更しないため！