OmniAICreator/Qiita-1.07M huggingface dataset:
Google Hangouts Chat にスレッドを指定してメッセージをポストする（Python）

# 概要
Google Hangouts Chat にスレッドを指定してメッセージをポストする方法をまとめました。

# 手順
1. チャットルームを作成
2. Webhookを設定
3. WebhookのURLを使ってメッセージをポスト
4. メッセージをポストした際のレスポンスから、スレッドの識別子を取得
5. WebhookのURLとスレッドの識別子を使ってメッセージをポスト

## 1. 新しいチャットルームを作成
割愛します。（後から追記するかも

## 2. Webhookを設定
割愛します。（後から追記するかも

## 3. WebhookのURLを使ってメッセージをポスト
WebhookのURLを使ってメッセージをポストします。

```Python
import requests

webhook_url = 'https://chat.googleapis.com/*******'

response = requests.post(
  webhook_url,
  json={"text": "送信テスト\n"}
)
```
結果はこんな感じ。
![aaaaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265053/859a43d2-8640-f102-596a-57fdd0cde886.png)

この方法で何度もポストすると、各メッセージが別スレッドに投稿されてしまいます。
<img width="1440" alt="スクリーンショット 2020-02-19 0.42.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265053/93eebec8-2bb1-5a6e-aa73-b060cc1405cb.png">

## 4. レスポンスからスレッドの識別子を取得
メッセージをポストした際のレスポンスをプリントします。
text属性に、デコードされたレスポンスの内容が記載されています。

```Python
print(response.text)
```
この中の"thread"に記載されているスレッドの識別子をコピーします。

```Python
{
  "name": "spaces/***********/messages/***********************",
  "sender": {
    "name": "users/*********************",
    "displayName": "test_webhook",
    "avatarUrl": "",
    "email": "",
    "domainId": "",
    "type": "BOT"
  },
  "text": "送信テスト\n",
  "cards": [],
  "previewText": "",
  "annotations": [],
  "thread": {
    "name": "spaces/***********/threads/***********" ←ここ
  },
  "space": {
    "name": "spaces/***********",
    "type": "ROOM",
    "displayName": "test"
  },
  "fallbackText": "",
  "argumentText": "送信テスト\n",
  "createTime": "2020-02-18T14:33:38.083263Z"
}
```

## 5. スレッドの識別子を使ってメッセージをポスト
4.で取得したスレッドの識別子を使って、スレッドを指定してメッセージをポストします。

```Python
import requests

webhook_url = 'https://chat.googleapis.com/*******'
thread = "spaces/***********/threads/***********"

response = requests.post(
  webhook_url,
  json = {
      "text": "送信テスト\n",
      "thread": {
          "name": thread
      }
  }
)
```
すると、3.でメッセージを投稿したスレッドにメッセージがポストされます。
<img width="1440" alt="スクリーンショット 2020-02-19 0.48.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265053/1b017d5b-4642-95ad-47d4-b29035db3acb.png">

# まとめ
Google Hangouts Chat にスレッドを指定してメッセージをポストすることが出来ました。

# 後書き
良かったらいいね、コメント下さい。
Swift：勝手にメニューに追加される「音声入力を開始」と「絵文字と記号」を除く方法

macOSアプリ開発で`NSTextView`や`NSTextField`を使っていて、メニューに余計なものが勝手に追加されることに気づきました。「音声入力を開始」と「絵文字と記号」というやつです。
![スクリーンショット 2020-02-19 0.59.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67153/8e91755f-a9ba-0b2d-6cc4-e21fdc973774.png)
これを取り除く方法を記しておきます。

```swift:AppDelegate.swift
@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {
    
    func applicationWillFinishLaunching(_ notification: Notification) {
        UserDefaults.standard.set(true, forKey: "NSDisabledDictationMenuItem")
        UserDefaults.standard.set(true, forKey: "NSDisabledCharacterPaletteMenuItem")
        UserDefaults.standard.synchronize()
    }

    func applicationDidFinishLaunching(_ aNotification: Notification) {
    
    }

}
```

`applicationWillFinishLaunching`の内部で`UserDefaults`を介して設定をいじります。`Did`ではなく`Will`なところがポイントです。
【Swift】実機テスト時、アプリを削除したのに「最大数に達しました。」エラーが発生した時の対処法

実機テストを行おうとしたところ、以下のエラーが発生。

App installation failed The maximum number of apps for free development profiles has been reached.

Google先生に訳してもらうと「アプリのインストールに失敗しました無料の開発プロファイルのアプリの最大数に達しました。」とのこと。

ならばと実機に溜まっていた開発中アプリを削除し再度インストールしようとしたが、また同じエラーが発生。

そんなときに行った対処法を紹介します。


環境
　macOS:10.15.3
　Xcode:11.3.1
　Swift:5.1.3


まず、開発中アプリが3つ、実機にインストールされた状態で
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/c2efd02a-85cf-fdbb-6029-1837dcee1e26.png)

新たにアプリをインストールしようとすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/ae5bce36-00bc-762b-38b8-fa7b73fe747d.png)

エラーが発生しました。
Details（詳細）を確認すると上記の「最大数に達しました。」のエラーが表示されています。
ちなみに、Xcodeのメニューバー [Window] から [Device and Simulators] を選択すると実機にインストールされているアプリの一覧が見れました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/44ac830c-5c96-ea6c-752a-1cf10d187dea.png)

このまま、**実機がMacにつながっている状態で**開発中アプリを一つ削除。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/fdb364fa-ac6a-28e7-23e9-484fda003a40.png)

Xcodeのアプリ一覧からも削除されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/48bdf83e-0b48-f854-a098-9bc47ed203b2.png)

このあとに新たなアプリのインストールした場合は正常にインストールされました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/9a21009c-a508-3c5e-1640-03d0c0ececcd.png)

問題は、**実機をMacから切断した状態で**開発中アプリを削除した場合です。

現在、実機には開発中アプリが一つしかインストールされていません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/3eeed7cd-82ec-5158-9e6a-1caeba0a4c90.png)

この状態で新たなアプリのインストールしようとすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/00d40e6a-ae1b-5d27-070b-c036bd9681ca.png)

エラーが発生しました。
Details（詳細）には、アプリを削除しているにもかかわらず「最大数に達しました。」のエラーが表示されています。
アプリ一覧にも、インストール中のアプリは一つしか表示されていません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/a9c9733c-b98b-b33c-97fe-41c506a26fd9.png)

このままでは、新たにアプリをインストールし実機テストを行うことができません。
そこで、以下の操作を行いました。

このアプリ一覧の [Connected] 欄の空きスペースをControlキーを押したままクリック（もしくは副ボタンクリック、右クリック）
表示された項目から [Show Provisioning Profiles...] を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/8d2e1650-7b6b-dc7c-71d9-af69553cd079.png)


新たに表示された画面には、削除したアプリが残っていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/a33e25d3-bcb8-b9ad-85e6-ed2f5ddf89af.png)

ここから不要なアプリ選択し [－] を押下して削除。[Done] を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/673ef047-0c39-54da-d78b-b37b11bbc6ad.png)


その後、新たにアプリをインストールしたところ、実機へ正常にインストールできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588289/b2076e5e-77f3-2e3a-0135-72a28a62e8bb.png)


以上、「最大数に達しました。」エラーが発生した際にお試しください。
【PHP】サスケェ！お前はオレにとっての新たな光だ！（ズンドコキヨシリスペクト）


#■はじめに
かねてより作ろうと思っていたのですが、すっかり忘れていました。
ということでズンドコリスペクトでPHP上であのセリフがそろうまでループさせます。
![7mecIABUZubeCgK1582040700_1582040768.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213462/22172cb9-2206-39ed-3026-6eeddf23e5ae.png)

#■プログラム
```php

<?php
$words = ['サスケェ！','お前は','オレにとっての','新たな','光だ！'];
$seikai = join('',$words);
$totaltimes=0;
do{
    $str ='';
    for($times=1;$times<=count($words);$times++){
        $str .=$words[rand(0,count($words)-1)];
    }
    echo ++$totaltimes."回目：$str\n";
}while($str!= $seikai);          

```

#■おわりに
早ければ100回くらいで揃いますが、運が悪いと5,000回以上もループしますね。
一番笑ったNGは`「光だ！サスケェ！オレにとっての光だ！サスケェ！」`です。
簡単なプログラムですが、まだまだ改善の余地はありそうです。
そういえば、久しぶりにdo-while使ったな。。

以上です。
pixelaとiPhoneで毎日の体温を記録する

# はじめに
前回投稿した[「pixelaでPCの利用状況を可視化する」](https://qiita.com/winuim/items/968980e898e2322473ad)でpixelaで手軽に活動記録を残せることがわかったので今回は、日々の体温計測結果をiPhoneのShortcutsアプリを使って手軽に残せる方法を紹介します。

# 体温記録用のグラフを作成
下記のコマンドを実行してグラフを作成します。`<username>`は適宜設定してください。

```shell-session
% pi graphs create -u <username> -g body-temp -n "Body Temperature" -i celsius -t float -c ajisai -z Asia/Tokyo
```

これでpixelaの準備は完了です。

# iPhoneのShortcutsの作成
Shortcutsアプリを起動し、「ショートカットを作成」をタップし、アクションを追加していきます。

- スクリプティング：今日の体温を尋ねる
<img width="402" alt="スクリプティング-体温を尋ねる.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327014/78765935-38d2-b3bc-9197-a1210e8110be.png">

- 日時：現在の日付を取得する
<img width="402" alt="現在の日付.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327014/dee56a28-4e29-9f98-289d-05c38e6d690e.png">

- テキスト：pixelaの更新用URLを設定する。`<username>`は適宜設定してください。
<img width="402" alt="pixle-update-url.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327014/13f764a4-4fc5-ac40-5e8d-fda109495827.png">

- 書類：pixelaの更新URLの日付部分を日時に置き換える。日時はカスタムフォーマットでpixelaのフォーマットに変換して置換する。
<img width="402" alt="更新URL置換.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327014/295c531e-7209-ec3e-f445-b06976f560a8.png">

- Web：アップデートされたテキストからURLを取得する
<img width="402" alt="テキストからURL.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327014/83af4701-4eca-a0ef-bbbc-6de6437bf38d.png">

- ネットワーク：URLの内容を取得する。`<UserToken>`は適宜設定してください。
<img width="402" alt="pixela-update.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327014/02f106ed-f9a2-d824-dc71-a7fb83c95083.png">

- URL：pixelaグラフのURLを設定する。`<username>`は適宜設定してください。
<img width="402" alt="temp-url.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327014/d129ed65-5b5e-ebe0-0bec-1522dcb4049c.png">

- SAFARI：URLを開く
<img width="402" alt="open-temp-graph.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327014/b98c4da4-75a3-c2ca-2ab5-254db626d173.png">

# Shortcutsの実行結果
作成したショートカットをタップすると「今日の体温を」入力するポップアップが表示されます。
<img width="315" alt="body-temp-question.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327014/4c48a7d7-350e-3e91-3d11-d49e1e017415.png">
体温を入力し、「OK」ボタンを押下するとSafariが開き、グラフが確認できます。
<img width="407" alt="body-temp-web.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327014/5b56d2a8-1c12-b47b-33ab-10d47707f1bc.png">
【OpenCV】OpenCVの画像をEelに表示する

## はじめに
[NGK2020S](https://ngk2020s.netlify.com/) と言うイベントで
「市販のプレゼンソフトに満足できなくなったお話（画像処理編）」と言う発表をしました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">先ほどのLT資料です🐤<br>「【NGK2020S】市販のプレゼンソフトに満足できなくなったお話（画像処理編）」<a href="https://t.co/6Xx0QXra1D">https://t.co/6Xx0QXra1D</a><a href="https://twitter.com/hashtag/NGK2020S?src=hash&amp;ref_src=twsrc%5Etfw">#NGK2020S</a></p>&mdash; 高橋 かずひと@PyConMini静岡 発表予定🐤 (@KzhtTkhs) <a href="https://twitter.com/KzhtTkhs/status/1218403072394719237?ref_src=twsrc%5Etfw">January 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


上記の動画の2:25～あたりのことがやりたかった発表です。
　⇒スライドの中でリアルタイムにデモを実施

本投稿では、OpenCVからEelの部分の説明をしています。
※たいした内容ではありませんが、、、

## ソースコード
<TABLE ALIGN=CENTER>
  <TR>
    <TD WIDTH=400px>
      <A HREF="https://github.com/Kazuhito00/opencv2eel-sample" TARGET="_blank"><strong>Kazuhito00/opencv2eel-sample</strong></a>
      <BR>
      opencv2eel_sampleはEel上でOpenCVの画像を表示するサンプルです。
    </TD>
  </TR>
</TABLE>


特にひねりもなく、OpenCVで取得した画像をbase64にしてsrcに流し込んでいるだけですね。

```python:opencv2eel.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import time
import base64

import eel
import cv2 as cv


def main():
    cap = cv.VideoCapture(0)

    # Eelフォルダ設定、および起動 ###############################################
    eel.init('web')
    eel.start(
        'index.html',
        mode='chrome',
        cmdline_args=['--start-fullscreen'],
        block=False)

    while True:
        start_time = time.time()

        eel.sleep(0.01)

        # カメラキャプチャ #####################################################
        ret, frame = cap.read()
        if not ret:
            continue

        # UI側へ転送(画像) #####################################################
        _, imencode_image = cv.imencode('.jpg', frame)
        base64_image = base64.b64encode(imencode_image)
        eel.set_base64image("data:image/jpg;base64," + base64_image.decode("ascii"))

        key = cv.waitKey(1)
        if key == 27:  # ESC
            break

        # UI側へ転送(処理時間) #################################################
        elapsed_time = round((time.time() - start_time), 3)
        eel.set_elapsedtime(elapsed_time)


if __name__ == '__main__':
    main()
```

```html:index.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="/eel.js"></script>

        <script>
            eel.expose(set_elapsedtime);
            function set_elapsedtime(elapsedtime) {
                document.getElementById("elapsedtime").innerHTML = "elapsedtime:" + elapsedtime + "s";
            }
            eel.expose(set_base64image);
            function set_base64image(base64image) {
                document.getElementById("python_video").src = base64image;
            }
        </script>
    </head>
    <body>
        <div id="elapsedtime">elapsedtime</div>
        <img id="python_video" width="640" height="480" src="./image/sample.png">
    </body>
</html>
```


## 参考
[[Python] EelをつかってHTML/CSS/JavaScriptでGUIを構築](https://qiita.com/inoory/items/f431c581332c8d500a3b) 

以上。
【初心者向け】SOP・CORSの必要性

## はじめに
本日とある技術雑誌を読んでいる時にみたSOP、CORSの解説が分かりやすかったので、ざっくりまとめます。

## SOP(same origin policy)とは

> 同一オリジンポリシーとは、あるオリジンから読み込まれた文書やスクリプトについ て、そのリソースから他のオリジンのリソースにアクセスできないように制限するものです。同一オリジンポリシーはウェブのセキュリティにおける重要な仕組みであり、悪意ある行動を起こしかねないリソースの分離を目的としています。

ちょっと分かりづらいですね。後述で具体例をもって説明します。

### そもそもOriginとは

Originとは、あるURLの
- プロトコル（https、httpなど）
- ポート番号（localhost:**8080**、com:**81**など）
- ホスト（qiita.com、google.comなど）

の組み合わせのことをいいます。

詳しくは↓
[同一オリジンポリシー](https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy)


## 具体例

確かに別のオリジンのリソースにアクセスできちゃまずいのはなんとなく分かります。ただ具体的にどういうことが起こるのだろう、、、という方もいると思います。（私です）

例えば以下のような場合を考えてみます。


とある会社のイントラがあり、そのイントラには取引先情報などの重要な情報が保管されたサーバ（https\://intra.com/）があります。このサーバにはイントラに接続されているPCからのみアクセスが可能で、外部のネットワークからは通常接続することができません。

ある日、社員Aさんがこのイントラにも接続されているPCでインターネットでネットサーフィンをしました。この時、攻撃者が罠を仕掛けたサイト（https\://attack.com/）に誤って接続してしまいました。

このサイトは、画面描画時に以下のようなJavascriptが実行されるように罠が仕掛けてありました。

```js

axios.get('https://intra.com/foo/')
  .then(response => {
     console.log(JSON.stringify(response.data));
  })
  .catch(error => {
    console.error(error);
  })

```

するとどうでしょう。
サーバーから取得した情報がコンソールのログに出力されることになります。
このようにあるオリジンから別のオリジンの情報へのアクセスを許可してしまうとこのように情報漏洩などが簡単に起きてしまいます。

ここで重要なのがSOPの考え方です。SOPにより誤って不正なサイトなどに接続してしまった場合でも、このような漏洩などを防ぐことができます。
ただし、webアプリの開発などをやっていると別オリジンへアクセスをしたことがあると思います。その時に指定するのが**CORS**です。

## さいごに
非常にざっくりですが、なんとなく概要を掴んで頂けたら幸いです。

## 参考
[・オリジン間リソース共有 (CORS)](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)
CSSファイル（等）が読み込まれているのに反映されない！！（Resource interpreted as Stylesheet but transferred with MIME type text/plain）

タイトルのような症状に陥ったのですが、「CSS 読み込まれる 反映されない」みたいなワードでググっても情報が出てこなかったので記録しておきます。

## 症状

個人で運営しているサービスのインフラ周りを全とっかえする作業中に発生しました。
環境は、Rails+Nginx on GKEといった感じです。

![2020-02-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208875/68c2a756-011b-cb2c-c509-9f459f766ced.png)

図のようにCSSがまったく当たっておらず、最初はサーバーの設定ミスでアセットファイルが提供されていないのかと思いましたが、よく見るとアセットは全て200 OKで読み込まれています。

![2020-02-18 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208875/d5889737-c585-4a1c-9767-de49cb45aa83.png)
（inkscapeで描いているのがバレてしまう...）

更に**JPG**や**PNG**といった一部画像のみは正常に表示されており、**CSS**、**SVG**、**JS**は表示されない/反映されないというおかしな現象です。

## 原因と解決策

上の画像の`Type`のところをよく見るとわかるのですが、`titlelogo`というsvgファイルのTypeが`text/plain`になっていました。
![2020-02-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208875/bb56c74f-5042-06d4-c9bc-0123b4e6faa5.png)
このType（MIME Type）が一致していないと、たとえデータが完全でも正常に表示されないようです。（はじめて知った）

よく見たらConsoleにも`Resource interpreted as Stylesheet but transferred with MIME type text/plain`という警告が出ていました。（ErrorじゃなくWarningなのでなかなか気づきにくい）

![2020-02-18 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208875/c5e1871d-c4ed-293f-5dd8-7a52ed022a4c.png)

何故いきなりこのような症状が出たのかといえば、インフラ周りを全とっかえする際にnginx.confを作り直したことが原因でした。MIME Typeを拡張子から判別するための以下の2行を付け忘れていたのです。

```/etc/nginx/nginx.conf
include mime.types;
default_type application/octet-stream;
```

1行目は`nginx.conf`と同階層にある、拡張子とMIME Typeのペアを羅列している`mime.types`を読み込むコードです。
2行目は`mime.types`に記載のないデータを「不明なバイナリデータ」を意味する`application/octet-stream`として扱うためのコードです。（これを付ければブラウザがある程度よしなに扱ってくれる？未検証）

というわけで、無事にCSSやらSVGが表示されるようになりました。

![2020-02-18 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208875/8142205f-9edc-b6b8-45c5-ae8ec19771b5.png)

めでたしめでたし

## 今回使ったnginx.conf全文

ついでに今回正常に表示されたnginx.conf全文を載せておきます。

前提は以下のとおりです。
- Railsの`public/`を`/var/www/static_files/`にmountしてある
- Railsコンテナは同一Pod上の3000ポートで起動している
- SSL通信に関してはIngress上で解決している

```/etc/nginx/nginx.conf
events {
  worker_connections  1024;
}

http{
  charset UTF-8;
  server_tokens off;

  sendfile            on;
  tcp_nopush          on;
  tcp_nodelay         on;
  keepalive_timeout   65;
  types_hash_max_size 2048;

  include mime.types;
  default_type application/octet-stream;

  server{
    listen 80;
      
    # Rooting for /public
    location / {
      root /var/www/static_files;
      try_files $uri @rails;
    }

    # Rooting for rails
    location @rails {
      proxy_pass http://localhost:3000;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
    }
  }
}
```
Docker上のWordpressでVolumeマウント時にプラグインのインストールや削除に失敗する場合の対処法。

## はじめに
Docker上のWordpressにボリュームをマウントすると、プラグインのインストールや削除ができなかったので対処法をメモしておく。
ちなみにDocker Desktop for Macではこの記事の問題は起こらなかった。

## 環境
- Ubuntu 18.04
- Docker 19.03.6
- Docker Compose 1.25.3
- Wordpress 5.3.2

## 状況説明
まず、自分は**wp-content/plugins**と**wp-content/uploads**にファイルシステムからマウントした。
### 問題1 プラグインを削除できない。
下記のようにFTP情報を入力しろと言われる。
<img height="256px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582655/1102de9e-3431-eac3-ff88-b87e9f432df3.png">

### 問題2 プラグインをインストールできない。
下記のようにディレクトリを作成できないというエラーがでる。
![error1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582655/e3315b62-fc88-0622-b712-17a58e3e3b87.png)

## 対処法
Dockerfileを作成し、ENTRYPOINTで**wp-content**と**wp-content/plugins**、**wp-content/uploads**の所有者を変更してやればいい。

```dockerfile:Dockerfile
FROM wordpress:latest

ENTRYPOINT chown www-data:www-data /var/www/html/wp-content /var/www/html/wp-content/plugins /var/www/html/wp-content/uploads && docker-entrypoint.sh apache2-foreground
# chownで対象ディレクトリの所有者変更。
# docker-entrypoint.shでWordpressイメージのENTRYPOINT呼び出し。
```
```yaml:docker-compose.yml
version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     build: . # Dockerfileからビルド。
     volumes:
        # pluginsとuploadsをマウント。
        - ./plugins:/var/www/html/wp-content/plugins
        - ./uploads:/var/www/html/wp-content/uploads
     ports:
       - "80:80" # SiteGuard等でアクセスエラーが出るのでポートは同じ方が望ましい。
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
volumes:
    db_data: {}
```
### ダウンロード
- [GitHub: makutamoto/docker-wordpress-volume-error](https://github.com/makutamoto/docker-wordpress-volume-error)

## 参考
- [Quickstart: Compose and WordPress](https://docs.docker.com/compose/wordpress/)
- [Stackoverflow: Wordpress on Docker: Could not create directory on mounted volume](https://stackoverflow.com/questions/44251019/wordpress-on-docker-could-not-create-directory-on-mounted-volume)
- [Stackoverflow: How to enable theme on WordPress on Docker](https://stackoverflow.com/questions/43309373/how-to-enable-theme-on-wordpress-on-docker)
- [GitHub: docker-library/wordpress](https://github.com/docker-library/wordpress)
gitはターミナルで操作しよう

お初目にかかります。いえもとです。

初投稿は何がいいかと考えたら、gitのコマンドしかないと思い、コマンド一覧を書くことにしました。

私はチームの影響により基本gitを扱うときはターミナルで操作しています。

理由は2つ

####  1. githubのデスクトップ操作はわかりやすいが、時間がかかる。ターミナル操作の方が早い。

自分の時間も、相手の時間も短縮できる！
時は金なり、短縮されたその時間、チリも積もれば馬鹿にはできない。

#### 2. ターミナル操作は通のように感じられる。
キーボード操作の方が、打刻感が感じられやすい。


### 操作手順の一例

#### ローカルディレクトリ下のインデックス作成

```

git init
```

変更修正したファイルをインデックスへ追加

```
///ファイルを一つ一つ追加する場合
git add <file> 

///変更したファイルをすべて追加する場合
git add .
```

コミットしよう。
インデックスに格納されているファイル群を1セットとしてバージョン記録します。

```
///一行コメントでのコミット
git commit -m 'コミット名（日本語もいけます）'

///なんだったらもっと詳細に書きたい！という場合は以下で、
got commit
```
これでバージョンは記録できます。

リモートデポジトリは後日更新します。
S3の静的ホスティングサービスを利用する

S3にはサーバーサイドの処理をする機能がないため、リクエストされたものをただレスポンスするだけの静的ファイルを外部公開にしたいときなどに今回の機能を利用する。

# S3の画面へ行き、バケットを作成を押下。
<img width="1203" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556471/1134fd59-7b8c-6462-1db9-801fa34b7629.png">

# バケット名を入力
<img width="1245" alt="スクリーンショット 2020-02-18 23.14.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556471/3e2d42c0-f9ba-62ea-4b0a-94a9b4c6b292.png">

# 次の画面はデフォルトのまま次へ
<img width="1100" alt="スクリーンショット 2020-02-18 23.16.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556471/1aacb0ef-c539-4fb4-177c-507af34d001d.png">

# パブリックアクセスをすべてブロック
アラートの「現在の設定により、〜」をチェック
<img width="1100" alt="スクリーンショット 2020-02-18 23.16.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556471/41a01818-5c3a-bc39-1b4a-ef757a8a0719.png">

# 次の画面はデフォルトのままバケットを作成
<img width="1100" alt="スクリーンショット 2020-02-18 23.17.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556471/19ea34ae-941b-c096-8f35-3ac70f898915.png">

# 作成したバケットのアクセス権限タブのバケットポリシーに、「バケットの下のファイルは全て読み取り専用であること」を示すJSONを記述
<img width="1229" alt="スクリーンショット 2020-02-18 23.32.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556471/0cfc5287-540f-6cdb-8495-f208c5e57e73.png">

# 概要タブからホスティング対象のファイルをアップロード
<img width="810" alt="スクリーンショット 2020-02-18 23.36.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556471/72deb1ca-c876-b467-824c-c931933c1250.png">

# プロパティタブからStatic website hostingを押下
<img width="1242" alt="スクリーンショット 2020-02-18 23.37.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556471/51d55d08-b4d0-b25c-5b92-9c2e498b019a.png">

# 「このバケットを使用してウェブサイトをホストする」にチェック
インデックスドキュメントにファイル名を記述
<img width="1242" alt="スクリーンショット 2020-02-18 23.38.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556471/b5fc2591-e73a-246d-57da-0b20a41f4ef7.png">

エンドポイントのURLを叩くとサイトを閲覧できる。
Cloud9上でYarnを使ってbootstrap material designを導入する

初心者のメンターをしている時に、環境がcloud9を使っている状況で、yarnを用いてbootstrapを導入する機会がありました。少し詰まりかけた部分があったのと、あまり記事がなかったので、備忘録で書きます。


## 環境
windows(64bit)
ruby 2.6.4
Rails 5.2.4
Cloud9上で開発

## Node.jsのバージョンアップ

Nodeのstableなバージョンをインストールします。

```
$ nvm install stable
```

## Yarnのインストール

```
$ npm install -g yarn
```

## bootstrap material designを導入

package.jsonを生成するために以下のコマンド実行

```
$ yarn init
```

bootstrap material designを追加

```
$ yarn add bootstrap-material-design
```

インストール

```
$ yarn install
```

## マニフェストファイルへ読み込みのpathを記載

```ruby:app/assets/javascripts/application.js

//= require bootstrap-material-design/dist/js/bootstrap-material-design.js
```

```ruby:app/assets/stylesheets/application.scss
@import 'bootstrap-material-design/dist/css/bootstrap-material-design';
@import 'font-awesome-sprockets';
@import 'font-awesome';
```

ここまでブラウザ画面で確認しても、

```
Sass::SyntaxError
```

が出る。

```ruby:config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules')
```
こちらの記載でファイルが読み込めるように設定。

サーバーを再起動すれば、無事表示！
[Nuxt.js]Vuetifyでaタグを用いず外部リンクを実装する

# [Nuxt.js]Vuetifyでaタグを用いず外部リンクを実装する
Nuxt.jsではリンクを実装する際、ページのルーティングをする場合は<nuxt-link>コンポーネントを用いることが推奨されており、また、外部リンクの場合はaタグを用います。ただ、そうすると見た目を変えたいと思っても、CSSを書くのが面倒でVuetifyを使う良さが活かせきれてません。
　そこで、この記事では、外部リンクを`v-btn`コンポーネントで実装し、少ないコードの記述量で良い見た目のリンクを作成することを目指します。完成図は以下の画像になります。

![スクリーンショット 2020-02-18 10.44.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405522/b5e86930-7b85-8dc4-e785-fa758d6e864f.png)
![スクリーンショット 2020-02-18 10.47.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405522/a0d7b94e-1e2e-c8f4-7625-fef578ef35c9.png)

どちらもホバーした状態の画像です。左がlightモードで右がdarkモードでの画像となっています。
モードによって文字色を変えております。実装方法は以前に記事を掲載しておりますのでそちらをご参考ください。（参考URL：[[Nuxt.js]Vuetifyのテーマを用いる](https://qiita.com/RyoTa0222/items/ee5225de6c91220814e1)）

## [前置き]v-btnコンポーネントをリンクとして扱う
v-btnは、`href`というpropsがあります。これはHTMLのaタグのhref属性と同じで、実際に実装し、起動したのをデベロッパーツールで見てみると、

```
// Vue上
<template>
  <v-btn href="https://hoge.example">https://hoge.example</v-btn>
</template>

// デベロッパーツール上
<a href="https://hoge.example">https://hoge.example</a>
```

となっており、aタグとして扱われております。なら、最初からaタグを使ってもいいじゃないかと思うかもしれませんが、完成図にもあるようにVuetifyのテーマによって色を変えるようにしています。その場合、Vuetifyのコンポーネントを使用して、`color`propsを用いる必要があるのです。色を切り替える必要がない場合は、aタグにスタイルを当てていけばいいのですがせっかくなので利用できる物は利用しましょう！

## [本題]外部リンクの実装
今回僕が考えた実装がこちらになります。

```vue
      <v-card>
        <v-card-title class="pb-0 d-flex flex-column align-start">
          <span class="title">TITLE</span>
        </v-card-title>
        <v-card-text class="d-flex align-center">
          <span class="mr-1">Link:</span>
          <v-btn
            href="https://hoge.example"
            text
            color="link"
            min-height="20"
            class="x-small post-link align-center py-1 px-2"
          >
            <span class="text-left">https://hoge.example</span>
          </v-btn>
        </v-card-text>
      </v-card>
```

```css
// これは必須
.post-link {
  display: inline-block;
  word-break: break-all;
  padding: 2px 8px;
  border-radius: 5px;
  text-transform: none !important;
  white-space: normal;
  max-width: calc(100% - 30px);
  height: inherit !important;
}
```
見栄えを気にしていろいろスタイルを当てて行っていたら本題と関係のないカードの方でも頑張っていました...笑
さて、`v-btn`コンポーネントについてですが、主要なものを説明をします。

### href
hrefは、先ほど説明しました通り、`v-btn`コンポーネントでhref属性を使えるようになります。

### text
textは背景を透明にし、ホバー時に透明度のある背景がつきます。これによってホバーしていない時はリンクのように見えます。

### color
colorは文字色および背景色が決定します。「link」は今回はnuxt.config.jsで自分で設定した色となっており、今回は以下の定義をしています。

```nuxt.config.js
vuetify: {
    customVariables: ["~/assets/variables.scss"],
    theme: {
      dark: true,
      themes: {
        light: {
          link: "#1976d2"
        },
        dark: {
          link: "#91ceff"
        }
      }
    }
  }
```
### CSS
CSSで与えている効果として
 - リンクが長い時にカード内で折り返す
 - デフォルトで文字が大文字になっているとそれを小文字にする
が挙げられます。

---
以上になります。デザインのご参考にしてください。
Rails6 シンプルなカレンダーにDBに格納されている予定を記載する

# 目的

- [Rails6 シンプルなカレンダーを実装する](https://qiita.com/miriwo/items/ca2a64bdf8098beccd28)にて成功したカレンダーにDBに格納されている予定を記載する方法をまとめる。

# 環境

- Rails version
    - 6.0.2.1
- SQLite3
    - 1.4
- OS
    - macOS 10.13.6

# 目標

- [http://localhost:3000/home/top](http://localhost:3000/home/top)にアクセスした時にカレンダーが表示される。
- 表示されたカレンダーにDBのデータが予定として記載されるようにする。

# 公式の手順

- [simple_calendar_tutorial.md](https://gist.github.com/nickangtc/1e8a65c18eeea5c7ca46c4f876ef5ac3)

# 条件

- 下記の記事を参考に作業を行い、[http://localhost:3000/home/top](http://localhost:3000/home/top)にアクセスした際にカレンダーが表示されるようになっていること。
    - [Rails6 シンプルなカレンダーを実装する](https://qiita.com/miriwo/items/ca2a64bdf8098beccd28)

# 実施方法

1. モデルの作成とテーブル作成
    1. 下記コマンドを実行してモデルを作成する。(string型のnameカラムとdatetime型のstart_timeカラムを保有したMeetingテーブル)

        ```terminal
        $ cd アプリ名フォルダ
        $ rails g scaffold Meeting name:string start_time:datetime
        ```
    1. 下記コマンドを実行してテーブルを作成する。

        ```terminal
        $ rails db:migrate
        ```
1. 予定の格納
    1. 下記コマンドを実行してテスト用の予定を格納する。

        ```terminal
        $ rails c
        irb(main):001:0> meeting = Meeting.new(name: "test", start_time: "2020-02-18 08:50:42")
        irb(main):002:0> meeting.save
        => true
        ```
1. ビューの設定
    1. 下記のファイルを開く
        - アプリ名ディレクトリ/app/views/home
            - top.html.erb
    1. 下記の内容をtop.html.erbに記載する。(すでに記載されている内容は削除してから記載する。)
    
        ```erb
        <%= month_calendar events: @meetings do |date, meetings| %>
          <%= date.day %>
        
          <% meetings.each do |meeting| %>
            <div>
              <%= meeting.name %>
            </div>
          <% end %>
        <% end %>
        ```
1. 表示の確認
    1. 下記コマンドを実行してアプリケーションをスタートする。

        ```terminal
        $ cd アプリ名フォルダ
        $ rails s
        ```
    1. ブラウザで[http://localhost:3000/home/top](http://localhost:3000/home/top)にアクセスし下記の画面が表示されるか確認する。2020年2月18日のカレンダーのセルに「test」と記載されていることを確認する。
【React】動的に用意したイベントハンドラのindexを取得する

##2020/2/20追記
indexを引数で渡せないわけないよなと思いながらこの記事書いてたけど，やっと渡し方わかった笑

```react:.js
handleChange_todohuken = (e, index) => {)

<Autocomplete
  onChange={e => this.handleChange_todohuken(e, input)}
>
```
終わり笑

#困った状況
~~今回はFormを登録したい数だけ動的に用意することを考えた．reactでの実装なので，Fromで入力された値はstateに持たせたい．この時に考えないといけないことは，動的に用意したどこのstateが変更されたのかを判定するためにそのFormが何番目のものであるかのindexを取得したいこと．~~
<img width="816" alt="スクリーンショット 2020-02-18 23.41.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458915/b86fc705-ea0a-982b-8479-7ddf540acc69.png">

#解決法
コンポーネントのidにindex番号を入れておいてあとで取り出す．

```react:.js
handleChange_concert = e => {
  const index = e.target.id.split(' ')[0].replace('index', '');

  // stateの配列を更新するためコピー先の配列全体を変更する
  const concerts_copy = this.state.concerts.slice();
  concerts_copy[index] = e.target.value;
  this.setState({ concerts: concerts_copy });
}

{this.state.inputs.map(input =>
  <div key={input}>
    <TextField
      label="ライブ名"
      id={`index${input} standard-basic`}
      onChange={this.handleChange_concert}
      value={this.state.concerts[input]}
      required
    />
  </div>
)}
```

#MaterialUIのAutocompleteの余談
ここでstate.todohukensの配列に都道府県名を格納することにかなり悩んで時間かかった．　　
最初はAutocompleteの中のTextFieldにonChangeを持たせていたが，当然のことながら格納されるのはoptionsから選んだ都道府県名ではなく，キーボード入力された値のみ．
AutocompleteにonChangeを持たせることでoptionsから値が選ばれた時にコールバック関数が動くので正常に値がとれる．

```react:.js
<Autocomplete
  id={`index${input} combo-box-demo`}
  options={options}
  getOptionLabel={option => option.label}
  onChange={this.handleChange_todohuken}
  style={{ width: 300 }}
  renderInput={params => (
    <TextField {...params}
      label="都道府県"
      id="standard-basic"
      required
      fullWidth
    />
  )}
/>
```

~~あとAutocompleteには選んだ都道府県名を空文字に戻せるxボタンがテキストフィールド右側に配置されてるが，今回上のindexのとりかたをする時にe.targetを使っているためクリックする要素が変わるとindexの取り方も変えないといけなかった．やり方が全然スマートでない．．．
この辺，reactでどうやってきれいに書いたらいいのかまだ分かりません，教えてください〜~~

```react:.js
handleChange_todohuken = e => {
  // 都道府県プルダウン操作した時
  let index;
  if (e.target.id){
    index = e.target.id.split(' ')[0].replace('index', '');
  }
  // 右のxボタンで都道府県名を消した場合
  else{
    index = e.target.parentElement.parentElement.parentElement.parentElement.querySelector('input').id.split(' ')[0].replace('index', '');
  }
  const str = e.target.innerHTML[0] == '<' ? '' : e.target.innerHTML;

  // stateの配列を更新するためコピー先の配列全体を変更する
  const todohukens_copy = this.state.todohukens.slice();
  todohukens_copy[index] = str;
  this.setState({ todohukens: todohukens_copy });
}
```
【HTML&CSS】フッター下部の余白を無くす方法

#概要

Webページの画面の高さいっぱいに対して、中身の要素が足りていない場合にはフッターの下に余白ができてしまいます。
この余白を無くしてフッターを最下部にする方法に意外と手こずったことはないでしょうか。
ということで、CSSがどのように反映されるかをしっかり理解してフッター下部の余白を無くす方法を書いていきたいと思います。

#フッター下部の余白をなくす方法

早速ですが、解決方法の１つの例が以下になります。

```html
<html>
 <body>
  <div class="wrapper">
   <header>ヘッダー</header>
    <div class="inner">中身</div>
   <footer>フッター</footer>
  </div>
 </body>
</html>
```


```css
html,body{
     height:100%;
}

.wrapper{
     width: 100%;
     position: relative;
     min-height: 100%;
}

.inner{
     padding-bottom:200px; /*フッターの高さと同じにする*/
}

footer{
     height:200px;
     position:absolute;
     bottom:0;
}
```

まず、`height:100%;`の％設定は設定したクラスの親要素に対して適用するものになります。
そのため、htmlから設定していかなければなりません。
htmlを`height:100%;`にしているので、bodyを`height:100%;`にすればhtmlとbodyの高さが100%になります。

**そして、コンテンツを囲んでいるwrapperに`min-height`を設定してあるのが肝です。**
私はここを`height:100%;`にしていたため、上手く反映されずに時間がかかってしまいました。

もしwrapperを`height`で設定した場合は、中身の要素分までしか高さが伸びないので、中身の要素の高さが画面いっぱい分までなければ、footerを最下部にすることができません。
`height:100%;`にしたとしても中身がなければ、高さは０になります。

しかし、`min-height`の場合は最小の高さを指定するので、中身の要素がなくても最小１００％の高さが反映されます。
例えば100pxにした場合は要素の中身が高さ50pxでも100pxまで伸びて、要素の中身が高さ150pxであれば、150pxまで伸びます。

そして、wrapperとfooterにpositionを設定し、footerを`bottom:0;`にすることで、wrapperの中に含まれているfooterはwrapperの最下部に位置します。
このままだとwrapperの中にfooterが被っているので`padding-bottom`をfooterの高さ分設定して、wrapperからfooterを押し出して最下部に配置します。

以上でフッターの下部に余白は無くなると思います。

こういった簡単に思えることで、時間が取られてイライラしてしまっている方の助けになることを祈ります。
RasDashを使ってみた

RasDashは「メモリやCPU使用率、センサの値などを表示するNode.js製ダッシュボード」です。
MOON GIFTさんの[「RasDash - Raspberry Pi用のダッシュボード」](https://www.moongift.jp/2019/05/rasdash-raspberry-pi%E7%94%A8%E3%81%AE%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89/)という記事を見て、面白そうと感じたので、使ってみました。

# 導入
下記の手順で導入。最後の`systemctl enable RasDash.service`は自動起動するために入力しただけなので、実行しなくても問題なし。

```terminal
$ git clone https://github.com/sykeben/RasDash.git ~/RasDash
$ cd ~/RasDash/
$ sudo ./install_deps
$ sudo ./service_manager install
$ sudo ./service_manager start
$ sudo systemctl enable RasDash.service
```

# 表示
`http://<Raspberry piのIPアドレス>:5808/dash/0`をブラウザで表示。
各値はリアルタイムに反映される。
![RasDashの画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460885/d0bb8688-96a6-fa12-e324-a77e5dded8aa.png)


# ポート変更
デフォルトでは、ポート番号`5808`へ接続している。
`~/RasDash/config.json`に記述された数値を変更すれば、他のポート番号に変更できる。
なお、変更後すぐに動作を確認したい場合は`./service_manager restart`コマンドをRasDashディレクトリ上で実行する。

```terminal
{
    "port": 5808
}
```

# 表示内容変更
ダッシュボードに載せる情報は下記のファイルで変更可能。

## 表示するボードの順番を修正
編集対象：`~/RasDash/views/pages/dash_0.ejs`

通常のHTMLの編集と同様に、対象のタグ群を入れ替えるだけで順番を入れ替えられる。

## ページ上部のタブに項目追加
編集対象：`~/RasDash/views/partials/navbar.ejs`

`<!-- Pages -->`の下にページを切り替えるタブを表示するコードがあるので、ここに新しいページを記載。
`<a>`要素に関連付けられたidは、`~/RasDash/public/javascript/navactive.js`でも利用されているため、必要に応じてこちらも変更。
下記の例では`Dashboard2`が追加されている。

```terminal
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-shadow">

    <!-- Brand -->
    <div class="navbar-brand text-danger">
        <img class="mr-n2" height="32px" src="/images/icon-sm.png">
    </div>

    <!-- Pages -->
    <div class="navbar-nav">
        <a id="nav-link-0" name="nav-link" class="nav-item nav-link" href="/dash/0">Dashboard</a>
        <a id="nav-link-1" name="nav-link" class="nav-item nav-link" href="/dash/1">Dashboard2</a>
        <a id="nav-link-2" name="nav-link" class="nav-item nav-link" href="/about">About</a>
    </div>

    <!-- Active Manager -->
    <script type="text/javascript" src="/javascript/navactive.js"></script>

</nav>
```

# さいごに
htmlやjavascript、cssの知識はもちろん、EJSというNode.jsのテンプレートエンジンに関する知識が必要なようです。

RasDashの他の項目をいじれるよう、暇を見つけていろいろ試してみます。
ghqの保存ディレクトリが変更されていた

## ある日、ghqで取得していたリポジトリが無くなっていた

普段の開発では

```
> ghq list
ghqで取得したリポジトリ
...
...
```

を出したり、pecoと連携させて、そのディレクトリに対して、移動をしていたのですが、ある日ghq listを叩いても、一個もリポジトリが出力されなくなってしまいました...

参考
https://qiita.com/harhogefoo/items/d43f1a4d14064ab1f972

## 原因

ghqのversion upの影響！

2019/12/31にリリースされた v0.99から

ghqで保存されるディレクトリが変更されてます。

- ChangeLog
    - https://github.com/x-motemen/ghq/blob/master/CHANGELOG.md#v0990-2019-12-31
- 変更PR
    - https://github.com/x-motemen/ghq/pull/237

## 具体的な変更内容

`~/.ghq` 配下に取得したリポジトリが保存されていたのですが、
`~/ghq` に変更されました。

どうやら隠しファイル扱いになるため、不便だとかどうとか

- 経緯のIssue
    - https://github.com/x-motemen/ghq/issues/60

## 対応方法

### 1. 0.99未満のghqで保存したディレクトリが無いか確認

```
> ls ~/.ghq/
github.com/
```

### 2. 手元のghqのversionを調べて、それが 0.99未満であった場合、updateする

```
> ghq -v
0.99未満のversion

# ghqのupdate
> brew update
> brew upgrade ghq

> ghq -v
0.99以上のversionになるように
``` 

### 3. 新しいリポジトリにディレクトリを移す

`~/.ghq` → `~/ghq` に保存されているファイルやディレクトリを移しましょう


これで

```
> ghq list
リポジトリ1
リポジトリ2
...
```

が出るようになるはず！！
GitHub基礎、操作　SQL

Git/GitHub
作業順序の管理や共同作業のための仕組み

リポジトリ
Gitの管理下にあるファイルやディレクトリの変更履歴を保管しておく入れ物

ローカルリポジトリ
自分のPC上（ローカル環境）に置くリポジトリのこと

リモートリポジ
外部のサーバなどのネットワーク上に置くリポジトリのこと

デプロイ
アプリケーションをサーバー上で利用可能な状態にすること

GitHubトラブルシューティング

SQL
データをテーブルという表形式の構造で管理するデータベースのことで、Webアプリケーションを作成する際は一般的にリレーショナルデータベースが使用

DDL　データを定義
CREATE　作成
ALTER　　更新
DROP　　削除

DML　データの操作
INSERT　登録
UPDATE　更新
DELETE　削除
SELECT　検索
基本情報技術者　マネジメント系　第3章 システム監査②


# ②システム監査の実施
計画に基づいて

1,予備調査
2,本評価
3,評価、結論の形成

の順番に行います。

## 監査計画

経営目的と合致させて進めます。

* 中長期計画: 2〜3年
* 年度計画書: 1年の期間
* 個別監査計画書: 毎回の監査の活動計画書

## 予備調査

コントロール整備状況の調査

## 本調査

コントロールが正しく機能し運用されているか

## 評価・結論の形式

これまでの分析

## 本調査における監査技法

### 基本監査技法

#### チェックリスト法
作成した質問書から回答

#### ドキュメントレビュー法
監査人自ら資料よりレビュー

#### 突合法・照合法
整合性の確認

#### 現地調査法
現地確認

#### インタビュー法
直接問合せ、意見・回答を入手



### コンピューター監査技法

#### テストデータ法
テストデータによる方法

#### 監査プログラム法

#### 監査モジュール法

#### ITF法、ミニカンパニ法
監査用レコードを混ぜて確認

#### 並行シミュレーション法
似たようなプログラムを作って確認

#### スナップショット法
特定のデータ、条件でメモリダンプをとる

#### トレーシング法
プログラムの流れから確認

#### コード比較法
正統性のあるプログラムと比較
マクロ引数に与えられたパラメーターを文字列として展開させる。

C++でマクロを使う。

マクロに渡された引数を文字列に展開して扱う事が可能。
以下に出力された通り。

どうするか
マクロ引数の先頭に'#'をつける。


```:c++
#define PRINTX(x, v)  printf(#x, v);

int main()
{
    int n=0;
    PRINTX("%d\n", n);
    printf("\n");
    PRINTX(%d\n, n);
}
```

```:出力
"0\n"
0
```
【Django】Build web apps　〜使ったコマンド〜

## [【Django】Build web apps　～1章：プロジェクト作成～](https://qiita.com/huong/items/40568d688314a862eb4e)
django-admin startproject [project_name]
python manage.py startapp [app_name]
python manage.py runserver

## [【Django】Build web apps　～3章：Modelsとデータベース～](https://qiita.com/huong/items/8a722bc8894f2a8c28d1)
`python manage.py make makemigrations [app-name]`
`pythn manage.py sqlmigrate [app-name] [migrations-id]`
`python manage.py migrate`
`python manage.py shell`
`python manage.py createsuperuser`
リモートワークで実機が無くてもネットワーク機器ベンダーの製品を体験できるサイト

##はじめに##

昨今の事情でリモートワークを余儀なくされているケースも出てきているのでは思うのですが、そんな時だからこそ自分が触ったことのないネットワーク機器がどんなもんか調査するチャンスでもあります。
とは言いつつも最近はクラウド上にベンダー製品のコンパネがあって機器検証とか普通にできるよ!!って人も多いと思いますが・・・。
※自分もCisco Merakiあたりは普通に設定したり見たりしてます。
本記事では実物の機器が無くてもどんなものか調査したり確認できるよってサイトを記載してみます。

##Cisco Devnet###

https://www.cisco.com/c/m/ja_jp/developer.html

CiscoSystems社の製品に特化した内容以外にもPython等の技術の基礎コース等も無償で提供してくれているサイト。
Cisco.com IDを持ってなくともGithubやGoogleのアカウントを持っていれば入れたりする。
自分はCisco.com ID持っているのでそれを使ってます。

詳細はCiscoさんの昨年末(2019年末)のアドベントカレンダーに載ってます。

https://qiita.com/kazkaz_o3/items/b1bfaa35be7051d2c052

昨年の12月に日本でも開催されたDevnet Expressの内容なんかもここで見れたり触れたりします。
また、Devnet SandboxではイスラエルのQuali社のCloudShellのLAAS(Lab as a service)の仕組みを利用して、
複数の機器を触れる仕組みを提供してくれています。

https://info.quali.com/quali20cloudshell20pro20powers20cisco20devnet.pdf

Cisco社にはパートナー向けにdCloudという環境もありますので、代理店やられてる方はこちらを使うのもありかと思います。

##Big Switch Labs###

https://bigswitchnetworks.jp/labs

老舗のSDNベンダーのBigSwitchNetworks社のオンラインラボ環境。
自分はBig Monitoring Fabricをこれを使って少し触ったことがあります。

利用するにはBig Switchのサイトでユーザ登録をしてから利用する必要あり。

個人的な懸念点としては2020年2月13日にBigSwitchNetworks社がAristaNetworks社に買収されたのでこのラボの仕組みの存続がどうなるんだろうかというところです。Big Monitoring FabricはAristaのTap Aggrigationと競合していたりもするので製品自体どうなのるのかも気になります。
※2020年8月23日の時点ではまだ使えそうです。

Arista社もこういうオンラインで機器が触れるラボがあるといいなあと思ったり・・・。

https://www.arista.com/en/company/news/press-release/9800-pr-20200214

##Juniper vLabs##

https://jlabs.juniper.net/ccl/portal

Junos製品を触ることができるJuniperNetworks社のラボシステム。
こちらもDevnetのSandboxのようにQuali社の仕組みを使っている模様。

詳しくは以下のてくなべさんのサイトに記載されてます。
https://tekunabe.hatenablog.jp/entry/2019/01/01/juniper_vlabs

自分はJunosを使ったこと/使う機会が現在がほとんどないので機会があれば試してみたいと思っています。
使うにはJuniper User IDユーザ登録が必要。

##Fortinet Product Demo Center##

https://www.fortinet.com/demo-center.html

様々なFortinet社の製品を触ることができるサイト。
最近はUTM、Firewallだけでなく、SD-WAN、SD-Accessといった分野に力を入れている印象です。
Fortinet社のSD-WANはどのようなものか個人的に興味あるのでFortiGate SD-WAN Demoを今度見てみたいなと思っています。
また、測定器を触っている仕事柄FortiTesterにも興味はあるのですが、このラボでは見れないみたいですね・・・。

##VMware Hands On Lab##

https://labs.hol.vmware.com/HOL/catalogs/catalog/all

様々なVMware製品をハンズオンで学べるサイト。旧VeloCloudは買収前に少し触ったことがありますがVMware製品になってから触ったことないのでこちらも登録して触ってみたいです。
また、2019年6月にVMware社が買収したAviNetworksの製品も自分は負荷分散装置は触らないので門外漢ですが、人づてに面白い製品と聞いているのでこちらも情報収集できればと思ってます。

https://www.vmware.com/jp/company/news/releases/2019/vmw-avi-networks-061719.html

※以下の日本語のサイトのハンズオンはMy VMwareのIDで試せるみたいなのですが、上記のURLはそれとは違う登録が必要?
http://web.hol.vmware.com/landingPages/index.html?id=HOL-Japan

##まとめ##

他のベンダーさんもこういった仕組みはありそうだなとは思うのですが、見つけたら追加しようかなと思ってます。
Qiitaには合わない記事だったかな・・・?
Node.js QRコードを生成する

### 簡単にQRコードを生成できたのでメモ書き



```
$ mkdir qr 
$ cd qr
$ npm init
$ npm install qrcode
$ touch index.js
```

```index.js
const QRCode = require('qrcode');
QRCode.toFile('foo.png', 'Hello World');
```
```
$ node index.js
```
↓foo.png

<img width="206" alt="スクリーンショット 2020-02-18 23.09.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/159108a6-2419-d6b4-6eca-c3361b967c4a.png">
C++：関数呼び出しのオペレーター


下記 std::for_each();を呼び出してる行では、Execクラスのインスタンスを渡している。
これまでは関数を渡すということはしていたが、インスタンスを渡している。~~クラスのコンストラクタ呼び出しから渡している。~~
for_each内の処理は、渡されたメソッドを呼び出しているだけだったから（duck typingならば？）
渡したオブジェクトが関数呼び出しをオペレーターオーバーロードしていれば、そのままオペレーター()の方が呼び出されることになる。

関数呼び出しのオペレーターの存在意義がまだよくわからない。。。

```cpp

class Exec
{
private:
	Theatre *target;
public:
	Exec(Theatre *t) : target(t) {}
	void operator()(const pair<int, AXEventListener> &h)
	{
		h.second(target);
	}
};

void XEventListeners::Call(Type type, Theatre *target)
{
	scoped_ptr<XEventListenerList> p(new XEventListenerList(m_listeners[type]));

	for_each(p->begin(), p->end(), Exec(target));
}
```
FileListは作れる！～file inputの中身も自由自在～

ふつうに`value`を書くことができない`<input type="file">`ですが、ブラウザによっては動的な設定もほぼ自由に行えることが判明しました。

## `<input type="file">`へ値を設定する

入力するものがファイルである以上、`<input type="file">`に対して`value`は（空にする`value = ''`を除けば）使えないのですが、別ルートとして`files`というプロパティがあります（[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/file#files)）。ここには選択したファイルのリスト（`multiple`でなければ1つだけ）が入った`FileList`オブジェクトが入っていて、また代入することで設定が可能です。

## `FileList`って、何？

ところが、`files`に代入するものも`FileList`オブジェクトでなければならず、代わりに`File`の配列を持ってきてもエラーになります。しかも、`new FileList`も動かないため、一見すると他の`<input type="file">`から持ってくる、ぐらいの動作しかできないようにも見えます。実際、昔はそうでした。

## 裏口から作る～`DataTransfer`

ここで登場するのが`DataTransfer`です。これは、ドラッグアンドドロップで動かしているデータを持つためのオブジェクトです。ファイルを投げ込むような動作も存在する以上、このオブジェクトも`files`として`FileList`を持っています。

そして、どういうわけか、`DataTransfer`は`new`できます。なので、`DataTransfer`経由で`FileList`をゼロから作ることが可能となります。

```js
    const dt = new DataTransfer();
    dt.items.add(file);
    const list = dt.files;
```

なお、iOS（とIE）はこの方法に対応していませんので、要注意です（[Can I use](https://caniuse.com/#feat=mdn-api_datatransfer_files)）。

## 動作例

`<input type="file" multiple>`で一気に選んだファイルを、1つ1つ`<input type="file">`に分配するような例を実装しました。

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

## その他

`DataTransfer`経由で`FileList`の作成が可能となったため、`new FileList`ができないことが有害無益となってしまい、これも可能とする動きもあるようです。

## 参考リンク

* [How to set File objects and length property at FileList object where the files are also reflected at FormData object? - StackOverflow](https://stackoverflow.com/questions/47119426/how-to-set-file-objects-and-length-property-at-filelist-object-where-the-files-a)
Flexboxを使ってレイアウトを作りたい

https://qiita.com/takepon_it/items/694636fc139d9ac1109a
↑の記事の続き的な物を書いていきます。

今回はFlexBoxを使って簡単なレイアウトを作っていきます！



#1.プロパティについて
FlexBoxってプロパティめちゃくちゃあって結局何使えばいいんだってなりません？
まぁ多分大半の物は"覚えなくても"大丈夫なんじゃないかなぁって思います。
そこで今回の記事でFlexBoxってこうやって使うんだなぁくらいのイメージが出来たらいいです！


#2.完成品のイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579434/961de670-d0e3-78c1-91ae-ce0a036e76fb.png)



こんな感じでブログの記事一覧みたいな物を作っていきます！

#3.早速コーティングしていこう！

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=UTF-8">
<title>FlexBox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="group">
	<div class="box">
		<img src="ここに画像">
		<h1>好きなタイトル</h1>
		<p>好きな文</p>
	</div>

	<div class="box">
		<img src="ここに画像">
		<h1>好きなタイトル</h1>
		<p>好きな文</p>
	</div>

	<div class="box">
		<img src="ここに画像">
		<h1>好きなタイトル</h1>
		<p>好きな文</p>
	</div>
</div>
</body>
```

htmlの記述はこんな感じでいいです！
ここは特に説明する箇所もないので早速CSSの方に移ります！

#4.CSSもかいていこう！

```style.css
.group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.box {
/*ここは自分の好きなようにしてください！*/
}
```

CSSはこうです！
これを解説していくと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579434/17469125-6f0c-960c-a75b-8219820abc97.png)


まず.groupっていう箱を作りたいので
`display;flex`
で.groupを箱にします(親要素という)

①の説明をしますね
これは
`flex-wrap: wrap;`
というプロパティを使っていて、何故これを使うのかと説明すると
親要素にしたばかりで何もしないと、只々横一列に並ぶだけなんですよね。
しかしこのプロパティを指定して親要素にwidth等を指定すると、下にいくようになります！便利ですね！

そして②の説明ですが、これは図が汚すぎて申し訳ないんですが等間隔っていうことを伝えたい矢印です！
`justify-content: space-between;`
を使うことによって横並びになっているアイテムを等間隔に設置してくれるめちゃくちゃ便利なプロパティです！
一々margin等を使わなくても綺麗に揃えれるということですね！

この二つのプロパティを使うことによって、完成図みたいなブログの記事一覧っぽい画面を作れました！
.boxはご自身の好みで作ってみてください！

#4.最後に
どうでしたでしょうか？
FlexBoxを使えば簡単に綺麗にレイアウトを作れることが分かったと思います。
今回紹介したプロパティは本当にごく一部なものですが、それだけでも十分にいい感じの物が作れます！

この記事が自分と同じような初学者の参考になったらうれしいです！
【Django】Build web apps　～2章：ViewsとURL Patterns～

## Django web app作成
[【Django】Build web apps　～1章：プロジェクト作成～](https://qiita.com/huong/items/40568d688314a862eb4e)
## views.py
```ruby:view.py
from django.http import HttpResponse
def index(request):
    return HttpResponse('HELLO WORD')
```
## urls.py作成
food appへディレクトリし、urls.pyファイルを作成し

```ruby:urls.py(food)
from . import views
from django.urls import path
urlpatterns = [
    path('', views.index, name='index'),
]
```
```ruby:urls.py(mysite)
from django.urls import include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('food/', include('food.urls')),
]
```
## 動きの説明
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581348/3f62405d-3ba5-cddd-7edd-666acc0de8bc.png)
👇
**ROOT_URLCONF**
👇
**settings.py**
👇
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581348/ae5dc043-079a-d83a-f860-62b18182d528.png)
👇
**mysite.urls**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581348/d1eb7ac6-41bf-79c9-e794-4dd72ae5214c.png)
👇
**food.urls**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581348/dc7be00a-5478-cdb4-d326-447cdff371dc.png)
👇
**views.py**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581348/2aa462a0-afef-26bf-9a04-35beab46fd2d.png)

## 終わりましたよ
**関連記事**
[・【Django】Build web apps　～1章：プロジェクト作成～](https://qiita.com/huong/items/40568d688314a862eb4e)
[・【Django】Build web apps　～3章：Modelsとデータベース～](https://qiita.com/huong/items/8a722bc8894f2a8c28d1)
VB6マイグレーション でわかったこと

①Trimとかの関数が何故、関数名だけかくことが上手く行かないのか

https://www.atmarkit.co.jp/ait/articles/1606/15/news028.html

②.net バージョンは違いが起きる

https://docs.microsoft.com/ja-jp/archive/blogs/jpvsblog/net-framework-3

③イベント記述の違い

https://www.chuken-engineer.com/entry/2019/08/15/121828

④My 用法

http://rucio.a.la9.jp/main/dotnet/shokyu/standard37.htm

⑤ 諸々を書いてくれて、ありがとう

https://t-ashula.hateblo.jp/entry/2011/12/06/210804

⑥コントロール配列の解決方法
https://www.itlab51.com/?p=2236

⑦ icsharpcode は　SharpDevelopより進化している可能性もある。
https://github.com/icsharpcode/CodeConverter
VSへのアドインもあるようだ。

⑧ VB C# 仕様変化

https://elleneast.com/?p=10679


⑨VB レガシーを封じる
https://earlgreytea.hatenablog.com/entry/2016/05/10/073046

⑩vs2008 と　sharpdevelop のエラーの原因は
Option Stirct On
https://docs.microsoft.com/ja-jp/dotnet/visual-basic/language-reference/statements/option-strict-statement

型変換が実行時行われるのは、C#erには当然ありえないのだが、VB6などは存在した。
それが両者の変換エラーにつながったのではないか。

VBにはこういう弱点があるので、やはりC#かと思うけど、喰わず嫌いみたいにあまり知らないのにケチつけたくない。
https://www.atmarkit.co.jp/fdotnet/vb6tonet2/vbnet2_13/vbnet2_13_01.html
React Nativeで必要なAndroid対応

React Nativeでアプリ開発をする時、ほとんどの方が「iOS向けにまずアプリを作り、その後Android対応をする」といった進め方をするのではないでしょうか。
今回は自分がiOS向けに開発した後、Android対応で何が必要だったのかをまとめます（随時追加更新）

なお、自分のメインスタックは下記の通りです。他にも色々パッケージは使っています
* expo v36.x
* react-native
* styled-components
* react-navigation

## box shadowの対応
有名なやつですね。

iOSでは
```
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
```
のようにかけるシャドウですが、Androidだとこれは効きません。
代わりにelevationというAndroid独自のプロパティを使います。この場合、Androidかどうかの判定は不要です。

```
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
  elevation: 1;
```

## Androidのツールバーにアプリのコンテンツが隠れてしまう
画像のようなやつです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145279/7c1e12b7-87cf-32f2-4d94-1e6247a6480e.png" width="260" >

via https://stackoverflow.com/questions/46865628/react-native-android-toolbar-going-below-status-bar

これはアプリのルートコンテナに対してpaddingを追加してあげれば良いです。
expoの場合expo-constantsからstatusBarHeightというAndroidのみで有効なAPIが用意されているのでこちらを使います。

```
import Constants from 'expo-constants'

paddingTop: Constants.statusBarHeight || 0
```

## Lottie Animationの対応
自分のアプリでは、lottie-react-nativeを使っていい感じのアニメーションを入れていました。iOSでは問題なく動いたものの、androidでは同じものをそのまま使っているとアプリがクラッシュしてしまう問題がありました。

lottie-react-nativeをv3.0.4に上げると直るという話もありますが、expo installで入れると今の所~2.6.1で入ってしまうので対応できません。
2.6.1では、lottie 3のJSONフォーマットに対応していないようで、After Effect上でExport Old Json FormatでJSONをExportし直すことで直りました。

https://github.com/expo/expo/issues/4835#issuecomment-508932818

## MapView内のMarkerコンポーネント

MapView内の<Marker/>は、ピンを立てる時によく使いますが、AndroidだとCustomコンポーネントやimageコンポーネントを使っている場合に表示されない問題があります。

対応としてはややhackyですが、Pinの高さを持った空のTextコンポーネントを入れてあげると解決します。


## To Be Added