OmniAICreator/Qiita-1.07M huggingface dataset:
PowerAppsから画像をSharePointにアップロードする

PowerAppsを使って撮影した画像をSharePointにアップロードしたいと思います。

この記事ではPowerApps -> PowerAutomate -> SharePoint
というフローで画像のアップロードを行います。

### PowerApps側

Screen上にAdd Pictureコンポーネント(UploadedImage1)を追加します。
<img width="172" alt="Screen Shot 2020-04-21 at 10.28.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318314/b728953b-5190-dc1d-d0b3-d4abcb67955c.png">

こんな感じでScreenに置きます。

<img width="290" alt="Screen Shot 2020-04-21 at 10.27.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318314/07adb166-25c8-ecf9-d219-2bb570312a3a.png">


ボタンを設置し、OnSelectに下記の数式を加えます。

```
UpdateContext(
            {
                docJson: Substitute(
                    JSON(
                        UploadedImage1.Image,
                        IncludeBinaryData
                    ),
                    """",
                    ""
                )
            }
        );
UpdateContext({flowResponse: SaveImageToSharePoint.Run(docJson)});
UpdateContext({imagePath: flowResponse.path});
``` 

UpdateContextでコンテキスト変数、docJsonに画像のバイナリデータを保持します。
これをPowerAutomateのフローであるSaveImageToSharePointを
`SaveImageToSharePoint.Run` で呼び出し、docJsonを渡します。

コンテキスト変数flowResponseにその戻り値が帰ってくるようにしています。
また、flowResponse.pathでSharePointで保存された画像のパスにアクセスできるようにしています。

次に、PowerAutomateのフロー、SaveImageToSharePointをみてみます。

### PowerAutomate側

ステップはこのようになります。

<img width="643" alt="Screen Shot 2020-04-21 at 10.21.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318314/392a30d2-6f5d-6f22-b39b-be91b9375001.png">

`JSONの解析` ステップでは

```
{
    "type": "object",
    "properties": {
        "JSONの解析_コンテンツ": {
            "type": "string"
        }
    }
}
```

PowerAppsから渡されたJSONのスキーマはこのようになります。

次に、SharePointのファイル生成で肝になるのがFile Contentです。

<img width="614" alt="asdasdfsadfasdfasdf.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318314/e1da5a55-bc8b-88ed-85b5-4ca31a026446.png">

File Contentに書く内容は
1. 上の`JSONの解析ステップ`の`JSONの解析_コンテンツ`プロパティを
2. `dataUriToBinary`でData URIのフォーマットをバイナリに変換する
です。
`dataUriToBinary(body('JSON_の解析')?['JSONの解析_コンテンツ'])`

最後のPowerAppsまたはFlowに応答するステップでは

PowerApps側への戻り値を作ります。この場合、ファイル名とファイルのパスとなります。

以上が一連の流れです。



余談ですが、PowerApps側でこのファイルパスの戻り値をPowerAppsの画像コンポーネントのImageに下記のように設定すると、

```
Concatenate(
    "https://your_org_sub_domain.sharepoint.com/sites/your_directory/",
    path
)
```

SharePointにアップロードした画像を表示することができます。

しかし、モバイルアプリ版のPowerAppsからはCookie認証の関係でSharePointにある画像は表示することができません。
Pwnagotchiをバックアップする

##はじめに
PwnagotchiとSSH接続するための設定などを全て完了した前提の記事です。
未完了の場合、r/pwnagotchiやPwnagotchi.aiなどを参照して設定を終わらせて下さい。

##backup.shを使う
まずpwnagotchiとSSH接続します。
<img width="734" alt="コメント 2020-04-21 102115.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624345/751905ea-437c-ffcb-5e56-3b9fe8367d0d.png">
backup.shは `/usr/local/src/pwnagotchi/scripts` 内にあるので`cd`で移動します。
<img width="731" alt="コメント 2020-04-21 102553.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624345/ff8cb1a4-4b63-8141-2ae3-a611ee7c0bb1.png">
ここでbackup.shを実行したいところですが、root権限が必要なディレクトリの内容もコピーしようとするため、そのままでは権限不足で実行できません。なので、`su`でrootユーザーになります。ですが、初期状態ではrootユーザーにパスワードが設定されていないので、事前に`sudo passwd root`で適当なパスワードを設定しておきましょう。
<img width="724" alt="コメント 2020-04-21 102835.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624345/2e4549e2-f541-c141-1d62-b05ac302ece4.png">
root権限を持ったら`./backup.sh`でバックアップを実行しましょう。
<img width="726" alt="コメント 2020-04-21 103650.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624345/7c121be5-9b2c-64e1-2583-c3955ff1027d.png">
バックアップを開始するとパスワードの入力を求められますが、これはrootユーザーのパスワードではないので注意して下さい。
バックアップの進行に合わせて画面にログが流れます。一瞬ですが*Super hacker*の気分に浸りましょう。
バックアップが終了したら、`ls`でディレクトリの中身を確認しましょう。
`ホスト名 - backup - 数列 .tgz`
のようなファイルが出来上がっていると思います。
(余談ですが、最後の数列はソースコードを見る限り日付らしいです。が、不思議なことになっていますね...)
<img width="720" alt="コメント 2020-04-21 104109.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624345/8bf8443c-60b0-b958-894e-6d1160d010dd.png">
最後にこのバックアップされたファイルを`scp`などでパソコン側に移動させて完了です。私は~~面倒なので~~WinSCP使いました。
<img width="400" alt="コメント 2020-04-21 105002.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624345/5ab1b732-f1bb-9758-5402-aeac194c8caa.png">
WinSCP使うとこんな感じです。コピーして完了！
##復帰する
バックアップしたファイルは.tgz方式なので、適当に解凍します。
中身はこんな感じです。
<img width="464" alt="コメント 2020-04-21 105242.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624345/f48146cc-676d-a3e3-04c8-08400f0bc9f7.png">
データを戻す際はそれぞれのファイルを名前の通りの場所に戻せば完了です。
`root`ディレクトリのアクセスにはroot権限が必要なのでWinScpなどもrootで接続しておくといいでしょう。
バックアップの`root/handshakes`の中身は今までハンドシェイクしたAPになっています。これを復帰させればカウントも引き継げます。
また、**root内のbrain.json , brain.nnはPwnagotchiのAI学習データです。これを正しく復帰させれば、AIの学習状況も引き継ぐことが出来ます。**
復帰後は適当に再起動させれば反映されます。
##SCPを使ったバックアップ
backup.shは必要なデータを収集して圧縮しているだけなので、`scp`コマンドで直接必要なデータをコピーしても同じようにバックアップできます。
必要なデータはhttps://pwnagotchi.ai/usage/#files-to-know-on-your-pwnagotchi で確認しましょう。
##ハックザプラネット！
電子工作もssh接続もほぼ未経験から始めたPwnagotchi弄りですが、様々な方の助けあって安定動作に成功しつつあります。
Pwnagotchiを知るきっかけになった @k0uj1k 氏に心より感謝いたします。
ぐるなびAPIアクセス方法

# ぐるなびAPIアクセス方法
※こちらは自分が忘れないようにするメモ書きです。

①以下のURLにアクセスし、アカウントを作成。
https://api.gnavi.co.jp/api/

②キーが発行されるので、コピーする。

③レストランAPIにアクセスする。
例：住所が銀座の寿司屋
※リクエストできるパラメータは「https://api.gnavi.co.jp/RestSearchAPI/v3/」参照

```
https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=②で発行されたキー&address=%E9%8A%80%E5%BA%A7&category_s=RSFST03001
```

④解説
レストラン検索API：https://api.gnavi.co.jp/RestSearchAPI/v3/
keyid：②で発行されたキー
address：住所
category_s：レストランの系統（寿司屋、焼肉屋etc...）
※category_sは以下「小業態マスタ取得API」にアクセスすることで取得できる。
https://api.gnavi.co.jp/master/CategorySmallSearchAPI/v3/?keyid=②で発行されたキー

⑤Pythonでアクセスする
※住所が銀座の寿司屋の店名の一覧を出力します。
※店名以外を出力したい場合、print(url)で出力したURLにブラウザからアクセスし、
 dic.get("キー")でキーを指定する。

```py:access_gurunabi.py
# モジュールのインポート
import json
import urllib.request
import ssl

#認証方法をTLSv1に指定
context = ssl.SSLContext(ssl.PROTOCOL_TLSv1)

# API に渡すパラメータの値の指定
# https://api.gnavi.co.jp/api/manual/restsearch/
# https://api.gnavi.co.jp/api/tools/     #ここでAPIのテストができる
base_url = "https://api.gnavi.co.jp/RestSearchAPI/v3/"

key = ②で発行されたキー

##### 上記の key は、ぐるなびAPI のアカウントを作成した際、取得したkeyidを指定
# shop_name = "焼肉"　#店名も含める場合はコメントアウト外す
g_code = 'RSFST03001' # 寿司のコード
address = '銀座'
# API を使う関数の定義
def gnavi_api(g_code,address):
    params = urllib.parse.urlencode({   
        'keyid': key,
        # 'name' : shop_name,　#店名も含める場合はコメントアウト外す
        'category_s' : g_code,
        'address' : address
    })
    url = base_url + '?' + params
    print(url)
    response = urllib.request.urlopen(url,context=context)
    return response.read()

# 関数を使って、API から情報を取得
data = gnavi_api(g_code,address)

# 取得した情報をJSON形式から辞書型に変換
read_data = json.loads(data)["rest"]

# お店の名前の一覧を格納する list の作成
list_name = []

# お店ごとにループし、お店の名前を list に追加する関数の定義 
def get_name(read_data):
    for dic in read_data:
        list_name.append(dic.get("name"))　
        #list_name.append(dic.get("address")) #住所を取得したい場合はこちら
    return list_name

# 関数を実行し、お店の名前の list を取得
get_name(read_data)

print(list_name)

```
[nginx]https接続のnginxでPHPを動かす[PHP]

#nginxでPHPを動かす

httpではPHPが動くのにhttpsで動かない状態を改善する方法をメモとして残します。

nginx/conf.d/default.conf設定に以下を追加します。
rootフォルダは任意に変更してください。

```default.conf
server {
        listen 443 ssl http2;
        server_name sample.com;

        if ($request_uri ~ ^.*/index.html$){
        rewrite ^(.*)/index.html$ $1/ permanent;
        }

        location / {
                root   /html;
                index  index.html index.htm index.php;
        }

        ssl_protocols TLSv1.2;
        ssl_ciphers EECDH+AESGCM:EECDH+AES;
        ssl_ecdh_curve prime256v1;
        ssl_prefer_server_ciphers on;
        ssl_session_cache shared:SSL:10m;

        ssl_certificate /etc/letsencrypt/live/sample.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/sample.com/privkey.pem;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
                root   /html;
        }

        location ~ \.php$ {
        root           /html;
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
        }
}
```

以上
if文を簡単に

#if文をワンライナーで書くには？


str = "is this a book?"
if str.include?("?")
  puts "yes, it is."
end



str = "is this a book?"
puts "yes, it is." if str.include("?")



学んだこと
・オブジェクト名.include？（"文字列"とか配列）
・include？は正規表現は使えないっぽい
・三項演算子というものもある
GCP勉強推進＆スケジュール

**随時更新**

---
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/ccce3f32-cb18-850e-7bdc-39e57fa7bbfe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/74cb4939-5f7e-863b-255c-c351076e97d5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/b271c193-9cff-abc7-305c-9f8d10b9c92d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/1c033183-18f0-3beb-fc9d-3a0c92399582.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/222c9436-4fa0-608a-9999-69feb73f9d88.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/6a0634d7-1ad1-273d-aa70-1508973f91f0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/81eb6f4a-cd82-1f3f-f9d6-898d3fa3f928.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/6d0e6763-f68e-2c8c-7652-e65054c5a05f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/abf9ed31-cbf0-936c-6888-81a415ff4d8b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/d10a55da-adac-1966-179d-604e9c149956.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/064ba6cf-66b4-ebd6-7c05-fe18503b492a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/8f198ea9-c352-a0f9-35ac-e3c6d90987c2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/a0db2c7d-1d4c-1ae5-7f5f-c014156498c0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/4eb79f63-0f78-f554-d5a0-e4115a2c1efe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/b9d9cebb-5e56-3ccf-07e9-59fbfbcc2a00.png)

##99.その他

- https://qiita.com/tags/gcp?page=1
- https://qiita.com/wMETAw/items/f12c0edbdced4b76fb6e
- https://qiita.com/showmurai/items/cec168ee17a0582d9136
- https://blog.framinal.life/entry/2019/10/31/131348
- https://daddytrevia.com/gcp/資格/
- https://daddytrevia.com/gcp/Associate_Cloud_Engineer/
- https://www.webassessor.com/wa.do?page=enterCatalog&tabs=7
- https://cloud.google.com/certification?hl=ja
- https://dev.classmethod.jp/articles/try-google-cloud-certified-pca/
- https://gcpug-tw.gitbook.io/google-cloud-platform-in-practice/geng-duo-gcp-xue-xi-zi-yuan
- https://www.topgate.co.jp/gcp02-getting-started-guide
- https://www.apps-gcp.com/category/apps/
- https://udemy.benesse.co.jp/development/web/gcp.html
- https://cloud.google.com/docs/overview?hl=ja
- https://cloud-textbook.com/35/
- https://clonos.jp/knowledge/
- https://codezine.jp/article/detail/11087?p=2
ClassicおよびLightningでのContentDocumentおよびContentDocumentLinkトリガー動作

Knowledge Article Number	000312746

#次の動作は、レコードに添付されたファイルの削除に適用されます。
・Classicでは、Salesforceは関連するContentDocumentLinkレコードのみを削除し、ContentDocumentレコードは削除しないため、ContentDocumentトリガーは起動しません。

・Lightning Experienceでは、ContentDocumentと関連するContentDocumentLinkレコードの両方が削除されます。仕様上、SalesforceはContentDocumentLinkのトリガーではなく、ContentDocumentのトリガーのみを起動します。

#これは設計どおりに機能しており、以下の手順に従って確認できます。
1. 2つの「削除前」トリガーを作成します。1つはContentDocumentに、もう1つはContenDocumentLinkオブジェクトに作成します。
2. デバッグログで確認できる「system.debug」ステートメントをそれぞれに配置します。
3. 次に、「ファイル」関連リストの下の任意のオブジェクトレコードに2つのファイルをアップロードします。完了すると、[ファイル]タブで両方のアップロードされたドキュメントを確認できます。
4. 開発者コンソールで以下のクエリを実行します。
 
```SELECT Id, LinkedEntityId, ContentDocumentId FROM ContentDocumentLink WHERE LinkedEntityId=<<Id og the document>>
```
  
2つのレコードが返されます

```SELECT Id, Title FROM ContentDocument WHERE Id=<<ContentDocumentId from the above query>>
```
 
2つのレコードが返されます

5. デバッグログを設定する
6. CLASSIC：
　　   
[ファイル]関連リストの下にあるドキュメントの横にある[削除]リンクをクリックして、アップロードしたファイルの1つを削除します。
観察：
    - デバッグログでは、ContentDocumentLinkTriggerのみが発生し、そのトリガーに存在するDebugステートメントが表示されることがわかります。
    - 削除したドキュメントは、[ファイル]タブに表示されます。
    - 上記の2つのクエリを実行すると、最初のクエリでは1行、2番目のクエリでは2行のみが返されることがわかります。つまり、ContentDocumentLinkのみが削除されます。
7. LIGHTNING:
　
オブジェクトレコードを開き、[ファイル]関連リストの下のドキュメントの横にある[削除]リンクをクリックして、2番目にアップロードされたファイルを削除します。
観察：
    - デバッグログでは、ContentDocumentTriggerのみが発生し、そのトリガーに存在するDebugステートメントが表示されることがわかります。
    - 削除したドキュメントは、[ファイル]タブで使用できなくなります
    - 上記の2つのクエリを実行すると、最初のクエリに対して行が返されず、2番目のクエリ（1番目のドキュメントに関連するクエリ）に対して1行が返されないことがわかります。つまり、ContentDocumentとContentDocumentLinkの両方が削除されています。


https://help.salesforce.com/articleView?id=000312746&type=1&mode=1
railsで一覧ページに[gem kaminari]を導入する流れについてまとめてみた。

#kaminariの導入の仕方

##1.Gemfileにkaminariを追加して保存。

```Gemfile.
gem 'kaminari','~> 1.1.1'
```

##2.kaminariをインストールする
`$ bundle install`

##3.kaminariの設定ファイルを作成する
`$ rails g kaminari:config`


##4.kaminariがページャで利用するテンプレートを作成する
`$ rails g kaminari:views default`

##5.ページャを実装する

ページネーションさせたい場所に

```app/views/books/index.html.erb
    <%= @books.each do |book| %>
        :
        :
    <% end %>
    <%= paginate @books %> <"←これを追加">
```
```app/controllers/books_controller.rb
@books = Books.all.page(params[:page]).per(10) <"←.page以降追加">
```

この場合1ページの表示件数が10件まで表示される。

10件以上投稿するとこのように次のページへと分かれる。
![スクリーンショット 2020-04-10 14.31.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607423/c37a24ff-48dd-bdf7-7322-2a3c34c0d5fc.png)

#kaminariにBootstrapを適用させる

Bootstrapをすでに導入していれば簡単にkaminariに適用させることができる。

```$ rails g kaminari:views bootstrap3```

これでapp/views/kaminariフォルダにBootstrap用のViewが生成され、Bootstrap用のテンプレートに適用される。



##参考サイト
https://qiita.com/ayies128/items/f5fec87df31b39d84f23
hnagashima-INDEX

# HNtools
Original Functions made by Hiroki Nagashima 

## オリジナル関数(目的順)

### MATLAB基本関数の拡張

[save2pdf]() –Figureウィンドウを可能な限り画面と同じようにpdfとして保存.
[myFFT]()–FFT関数を拡張. 通常のフーリエ変換に加えて、X軸も自動的に計算.



## 物理・数学

[primaryReactionRateEquation](Hiroki_Library/primaryReactionRateEquation.md) - 一次の速度方程式を超高速で解いて、与えた時間に対する結果を与える.

[resonancefield](Hiroki_Library/resonancefield.md) - スピンハミルトニアンから、共鳴磁場位置を決定する.

---

###XpectralDataClass

クラスを利用して実験データを取扱うToolBox. 
コーディングを簡単に、楽に書けるようになりたい。
データをぱっと読み込んで表示して整理して論文を書くところまでできたら良い。

---

#### 応用クラス

実際のデータに適用するためのデータコンテナーと関数群
[tresr]() - 時間分解 EPRスペクトル

- abs - 吸収スペクトル
- esr - 1次元ESRスペクトル
- [trabs]() –過渡吸収、時間分解IR スペクトル
- [fitobject]() - フィッティングを対話的に行い保存するツール.

---

#### 基本クラス

基本的なデータ処理をまとめた関数

- wave – 一次元データの基本的な取扱

[setvector](XpectralDataCalss/setvector.md) wave配列のベクトルの設定(waveクラスメソッド)

- [surfwave](XpectralDataClass/surfwave.md) – ２次元データの基本的な取扱
- [stackwave](Hiroki_Library/stackwave.md) – スタックプロットの取扱

[legendLabel](XpectralDataCalss/legendLabel.md) - スペクトルに添えて表示する凡例に関するクラスとメソッド

- [label](XpectralDataClass/label) – legendlabelアップグレード版

------

## **便利な関数**

比較的汎用性の高い関数. 他人が使ってもおそらく便利.

- [val2point](Hiroki_Library/val2point) – 単調増減関数から任意の値に最も近い値のインデックスを取得
- [FigureScale](Hiroki_Library/FigureScale.md) – Figureのサイズをテンプレート化して保存及び変更する.
- [tweet](Hiroki_Library/tweet.md) – twitterに呟く

------

## **地味な関数**

基本的には内部処理の簡略化のために作成したプログラム. 基本関数の実行には必要だが、必ずしも他の一般的なプログラムで有用とは限らないものはこちら.

[+AsFileName](https://paper.dropbox.com/doc/AsFileName-3bDAWHS4Swyw1NSCvLCpy) 

[sevector](XpectralDataClass/setvector) – wave配列のX, Y, Zに代入処理

Bruker2KoboriLab – BrukerのEPRデータのスタイルを小堀研のEPRデータスタイルへと変更
Googleの新サービス「AppSheet」で突然作ったアプリが全てErrorになった話

##はじめに
こんにちは！
Google社が買収した「AppSheet」なる、
ローコードでアプリが作れちゃう、というサービスで、
どれだけのものが作れるのか、最近研究しています。

そんな中、ある時に、作ったアプリのほとんどが突然「Error」となり見れなくなってしまいました。

悲しい気持ちになってしまったので、記事を書きます。

##それは突然起きた
ある時、「ウフフ、今日もAppSheet触ってちゃうぞ」って思ったんですね。
で、作ったアプリを開いてみると。
<img width="650" alt="スクリーンショット 2020-04-17 19.25.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/68886e84-7fa7-f158-3c2d-361efd2b0d7f.png">
うへーー。。

なんかErrorになってる。
触った記憶がないのにエラーになってる。。

仕事ではよく、お客さんから、「何もしてないんですけどね」と言われ、
「そうなんですか（ウソつけー）」ていうやりとりをしてる僕ですが、あえて言います。

**僕は何もやってないんです**


##調査
インターネットで、このErrorメッセージを調べると、
「ダッシュボードに書いている内容を解決すればいいんだよ」なんて書いてます。

そう。普通は、以下の感じで、
**黄色は警告。**
**赤色はエラー。**
てな感じで、メッセージを出してくれるのです。
<img width="1525" alt="スクリーンショット 2020-04-20 18.11.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/8e25263e-99f4-0d9a-e8a7-05ab3cdff292.png">

でも、上記の画面は例としてスクショ撮っただけで、
他のアプリは、全くエラーが出てないんですよね。
困った。困ったぞ、と思っていると。

「My account」というタブが警告っぽい表示になっています。
<img width="476" alt="スクリーンショット 2020-04-20 18.20.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/08689fed-255d-91ad-e2fb-841c3b39b958.png">
実は以前から気づいてたんですが、
**ここまで影響なかったし、何したら直るかわからなかったんで、放置してた**んです。
・・いよいよこれと向き合うことになってしまったようです。

「My account」ボタンを押して、以下のページに遷移します。
<img width="1165" alt="スクリーンショット 2020-04-20 15.08.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/e9eab726-261b-e1db-e463-a20cd7f048a8.png">

何言ってるのかわからないので、chromeで、日本語に翻訳します。
<img width="1206" alt="スクリーンショット 2020-04-20 15.08.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/be4a6e52-e866-4d19-0a41-a7ea8a2d3661.png">
よくわからないですが、ライセンスがうんぬん言ってます。
僕は無料プランなのですが、
よく見ると、「無料（プロトタイプ/個人用）」と書いていますね。

##デプロイは有料版からだぜ
そういえば、過去に、AppSheetのテストの一環で、デプロイを試したことがありました。
デプロイは、有料プランでないと、サポートしてないんですね。
[公式サイトの説明](https://help.appsheet.com/en/articles/1161076-why-is-my-app-blocked-for-my-users)によると、**デプロイしてから9日程度の猶予があるそうですが、
それまでにプランを変更しないと、アプリがブロックされる**とのこと。

**完全にそれじゃねーか!!**

ということで、対象のアプリのデプロイを取り下げました。

対象のアプリのダッシュボードから、
[Deployed]から、「Return to prototype state」ボタンをクリックします。
<img width="1529" alt="スクリーンショット 2020-04-20 17.16.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/5b2cd88e-472d-3e89-79c2-ca3641b2363c.png">

これで、ステータスが「Not Deployed」になりました。
<img width="1519" alt="スクリーンショット 2020-04-20 18.36.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/46ede612-2070-85f3-eeb4-f4907de08f27.png">

無事、「My account」の警告はなくなり、他のアプリも見れるようになりましたとさ。
【超簡略版】vimのカーソル移動

vimのカーソル移動の方法です。
自分がよく使いそうなものをピックアップしました。

[Vim初心者なのでカーソル移動まとめてみた](https://qiita.com/tpywao/items/bd119f0075e40d47c88b)
[viでのカーソル移動方法を一通りまとめました
](https://eng-entrance.com/linux-vi-move)こちらの記事にもっと詳しい情報が載っています。

# 操作見出し
- [基本操作](#基本操作)
- [単語ごと](#単語ごと)
- [行ごと](#行ごと)
- [ファイル単位](#ファイル単位)

# 基本操作
1文字ずつの移動です。

|h|j|k|l|
|:-:|:-:|:-:|:-:|
|左|下|上|右|

# 単語ごと
|w|b|e|ge|
|:-:|:-:|:-:|:-:|
|単語の先頭|前の単語の先頭|単語の末尾|前の単語の末尾|

# 行ごと
|0|^|$|
|:-:|:-:|:-:|
|行の先頭|空白を含まない行の先頭|行末|
|![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480714/a6745a37-0337-e6f9-523b-44c9b2dad467.png)|![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480714/7b624feb-ae59-3758-4ed0-c93aa18ff87b.png)|

# ファイル単位
|`gg` もしくは `:1`|`G` もしくは `:$`|
|:-:|:-:|
|ファイルの先頭|ファイルの末尾|
カラム名のつけ方メモ

よくごっちゃになるのでまとめ。


## 真偽値（boolean）
##### is＿〇〇

- 真偽値のものはis_published（isPublished）のように、is_〇〇という名前にするのが一般的。
- is_〇〇とすることで英語的にあり得ない名前になってしまう場合は別の名前にする。
- 存在有無を真偽値で管理する場合、isExistのようにおかしくなる場合はexistsにするなど。
- is_〇〇は基本的に真偽値にしか使わない。


## 日時（datetime、timestamps）
##### 〇〇_at
- 日付＋時間も含まれている場合はpublished_atのように〇〇_atとうい名前にするのが一般的。
※timestampは2038年問題あるからデフォルトで作成されるcreated_atとか以外には使わないほうがいいかも。

## 日付（date）
##### 〇〇_on
- 日付だけのときはpublished_onのように〇〇_onという名前にする。
 




---

基本的に真偽値以外にis_pubulishedという名前をつけたりなどはしない。
開発途中でデータ型を変えることになった場合などは、その都度カラム名も変えてしまう。
JavaScriptの基礎知識・文法

# 背景
JavaScriptの基礎知識を備忘録として残す。

## よく使う基礎知識・文法
・出力の仕方

```javascript

console.log(“文字列”or数値);
```


・コメントアウト
//を最初につける

```javascript

// コメントアウト
```


・変数の定義

```javascript

let 変数名＝値;
```


・定数の定義

```javascript

const 定数名＝値;
```


・テンプレートリテラル（変数展開）
※バッククオーテーションで囲む。

```javascript

const name=“tanaka”;
console.log(`こんにちは${name}さん`);
```


・if文の書き方

```javascript

if (条件式){
    処理;
}
```


・比較演算子

```javascript

a===b  // aとbは等しい
a!==b  // aとbは異なる
```


・else ifとelseの書き方

```javascript

If (条件式){
    処理;
}
else if(条件式){
処理;
}
else{
処理;
}
```


・switch文の書き方

```javascript

switch(変数名){
    case “値”;
        処理;
        break;
    default:
        処理;
        break;
}
```


・while文の書き方


```javascript

while(変数名){
    繰り返し処理;
}
```



・for文の書き方

```javascript

for(変数の定義;条件式;変数の更新){
    処理;
}
```



・オブジェクトの作り方(ハッシュ)

```javascript

定数名={プロパティ名1:値1,プロパティ2:値２,}
```


・関数の作り方(メソッド)

```javascript

const 関数名=()=>{
    まとめたい処理;
};
```


・引数を受け取る関数の作り方

```javascript

const 関数名=(引数名)=>{
    まとめたい処理;
};
関数名(引数);
```


・戻り値を受ける方法

```javascript

const 関数名=(引数名等)=>{
    return 処理;
}
const 定数名=関数名(引数等);
```


・クラスの作り方
※インスタンス生成

```javascript

class クラス名(最初は大文字){

}
const 定数名=new クラス名();
```


・コンストラクタの作り方
※クラス内に書く

```javascript

constructor(){
    処理;
}
```
（インスタンス生成時に始めにされる処理）



・thisの使い方
コンストラクタ内に書くことでプロパティ(変数的なもの)と値を使えるようになる。

```javascript

this.プロパティ=値;
```



・クラスの継承方法

```javascript

class 子クラス extends 親クラス{
}
```


・他ファイルでもクラスや関数等を使う方法

```javascript

export default クラス名（関数名等）             // 使いたいクラスがあるファイルで。
import クラス名 from “./ファイル名(関数名等)”   // クラスを使いたいファイルで。
```


・名前付きエクスポート
※インポートは同手順。

```javascript

export {値の名前};
```



・.forEachメソッド

```javascript

配列.forEach((引数)=>{処理});
```
val2point

# val2point

単調増加ベクトルから、値に最も近くなるインデックスを探す.


```matlab
[point, M] = val2point(x,xval);
% This function searches point: x(point) = xval
% Inputs:
% x: vector
% xval, value of x (single scaler or vectors)
% 
% Outputs:
% point: same size of xval
% M: error
% 
```

ベクトルxから、xvalに最も近い値をとるデータポイントを探し、そのインデックス番号を返す.
つまり、x(point) ~ xval.
Mは|x(point) - xval| で得られる誤差.

xvalはベクトルで与えることができ、その場合は出力引数は同じサイズのベクトルとして与えらる.

----------

# See Also

[functionlist](../funct)
スクレイピング業界の変革｜Octoparse 新バージョン 8.1 Beta がリリース！

![20200420164245.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/8570414a-5f0c-fd6e-8ea5-ddb776ce3f5e.png)

Webスクレイピングツールである[Octoparse](https://www.octoparse.jp/)の新バージョン ver 8.1 (ダウンロードは[こちら](https://helpcenter.octoparse.jp/hc/ja/articles/360013048720))が2020年4月15日よりリリースされました。今回の新バージョンのリリースでは、、Webページの自動認識機能の追加と内蔵ブラウザのアップグレードにより、パフォーマンスが向上し、データ取得の効率を大幅に改善しました。 また、ユーザインターフェースの改善により、インストールからタスク作成、実行中の操作まで、使いやすさも向上しました。

今回の主なバージョンアップ項目は以下のようになります。

 

#1.ハンズフリーでデータ抽出が可能

「Webページの自動認識」機能を追加するにより、WebページのURLアドレスを入力するだけで、Octoparseは自動的にWebページを識別し、ワークフローを自動的に生成するようになります。Webページ上のテキスト、画像、リンクなどの情報を識別でき、収集するデータフィールド、ページネーション、スクロールダウンなどの設定を自動的に推奨できます。複数の認識結果が表示され、簡単に切り替えられ、一般的なニーズを満たすことができると思われます。超初心者でも手軽にデータをスクレイピングできるようになりました！
![sns.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/77c151dc-7d47-305c-9821-4f33e52de9d3.gif)


 



#2.高度なブラウザ互換性

内蔵ブラウザをFirefoxからGoogle Chromeに切り替えました。以前のバージョンで読み込めなかったWebサイトは、Octoparse 8.1ですぐに読み込めるようになります。あらゆるWebサイトがOctoparseの内蔵ブラウザに開けられるように努めています。 


#3.より高速なスクレイピング速度

Webデータ収集のプロセスにおいて、更なる高速化が求められています。スクレイピング速度も、高品質のスクレイピングツールのコア競争力です。以前のバージョンと比べて、Octoparse 8.1は、10倍高速で応答性が向上しています。OP 7.0が100件データを抽出するのに21分41秒かかりましたが、OP 8.1が同じWebページから同じ量のデータを取得するのに2分しかかかりませんでした。
 


#まとめ

新バージョンに関する詳細は[この記事](https://helpcenter.octoparse.jp/hc/ja/articles/360013048720)をご覧ください。Octoparseへのご意見、アドバイスなどがございましたら、ぜひご遠慮なくお寄せください。Octoparseは引き続きより良いサービス・機能を提供できるよう努めております。
AppleWatchアプリが更新されないかもしれない

# 困ったこと
- XcodeでWatchOSアプリを開発していて、Runし直すけどなぜかWatchにコードが反映されないときがある
- iPhoneアプリは更新されてるっぽいが、AppleWatchのアプリはアプリのインストールぐるぐるにならない

# 解決策
- WatchKit AppのInterface.storyboardなどどこかUIを一部変更すると、AppleWatchアプリが更新される

# 再現環境
- Xcode11.X~
- 構成
    - iOSAppTarget
    - WatchKit App
    - WatchKit Extension
- iOS13.X
- WatchOS6.X

# あわせてどうぞ
- [AppleWatchでログが出ないことがあるので、iPhoneに投げつけて無理やり表示](https://qiita.com/okamu_/items/790828edb5ca079458f6)
JavaScriptで四捨五入、切り上げ、切り捨て

## メモ

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil
の、10進補正 (Decimal adjustment) のところを丸ごとコピペする。
※50行目からの使用例をみると使い方がわかる

標準の関数もあるけど（Math.ceil()とか）、やりたい事とマッチしないはず（具体的にどうだったかは忘れたけど。。）
Mac Karabiner-Elements 「Terget device」に接続しているデバイスが出てこなくて困った話

# 目的

- これからも若干困りそうな問題だったのでまとめる

# 実施環境

- ハードウェア環境

| 項目 | 情報 | 備考 | 
| --- | --- | --- |
| OS | macOS Catalina(10.15.3) ||
| ハードウェア | MacBook  Air (11-inch ,2012) ||
| プロセッサ | 1.7 GHz デュアルコアIntel Core i5 ||
| メモリ | 8 GB 1600 MHz DDR3 ||
| グラフィックス | Intel HD Graphics 4000 1536 MB ||

# 症状

- Bluetooth接続を用いてlogicoolの[craft](https://www.logicool.co.jp/ja-jp/product/craft)キーボードを接続した。
- キーボードの配置を変更できるソフト「Karabiner-Elements」を用いてキー位置を変えようとした。
- 「Karabiner-Elements」の「Simple modifications」のタブを開き「Terget device」のセレクトボックスをクリックしたところ、接続したキーボードがグレーアウトされており選択できない。

    ![スクリーンショット 2020-04-20 14.43.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/80e88d46-9c14-b9ff-dbc4-c5f710e4dd33.png)

# 解決方法

1. 「Karabiner-Elements」の「Devices」をクリックする。

    ![Karabiner-Elements_Preferences-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/c48268bb-f8ec-bfc6-95d8-b67b28e79683.png)

1. 「Terget device」のセレクトボックスに表示させたいデバイスにチェックマークをつける。(筆者の場合はKeyboard Craft (Logitech)にチェックを入れる)ここでもデバイスがグレーアウトされている場合はMac本体に外部デバイスがうまく認識されていない可能性がある。

    ![Karabiner-Elements_Preferences-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/c6c2be38-de0d-f80d-9b59-f1c62b5471a0.png)  
    ![Karabiner-Elements_Preferences-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4deda762-fd38-a401-c380-31dd4243772e.png)

1. 「Simple modifications」のタブを開き「Terget device」のセレクトボックスを開き、グレーアウトされず表示されている事を確認する。

    ![スクリーンショット 2020-04-20 14.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/0567ab53-4651-920d-bfec-a4d3c3a6155a.png)
ウェブと占い

無料で占いができるウェブサービスがあります。<a href="https://fortune-telling-hit.com/free-divination-getters-iida/" >ゲッターズ飯田無料占い体験</a>のようにシステムが自動的に判定する。これはデータを元にした機械的な占いなのです。

もともと占いは直感派と数学派にわかれます。インスピレーションタイプは女性に多い。数学派は男女ともにいます。数学的に計算するならプログラミングでも再現できる。占い師の経験を元にしたウェブサービスがいくつもみられました。<a href="https://twitter.com/ROMELERw" >プログラムTwitter</a>は見た目はただのつぶやき。占いも数理的で自動化される日が来るかもしれません。
Python #参照とコピーについて

## 変数は値の実体ではないことがある
_リスト_や_ディクショナリ_といった特定の型を扱う際、変数は値の実体とは異なり、実体を参照している。
以下のプログラムの実行結果から変数の性質が確認できる。

~~~python3
l1 = []
l1.append(0)

l2 = l1
l2.append(1)

print('l1 = ' ,l1)
print('l2 = ' ,l2)
~~~
実行結果
>l1 =  [0, 1]
>l2 =  [0, 1]

リスト`l2`へリスト`l1`を代入後、`l2`のみに値を追加したが、`l1`にも同様の値が追加されている。これは、`l1`も`l2`も保持しているのは参照情報であり、参照の先にある実体は同一のものを共有しているからである。

## 実体そのものをコピーする
代入を行うだけでは値そのものはコピーされない問題を解決するために、`copy()`メソッドを用いる。

~~~python
l1 = []
l1.append(0)

l3 = l1.copy()
l3.append(1)

print('l1 = ' ,l1)
print('l3 = ' ,l3)
~~~
実行結果
>l1 =  [0]
l3 =  [0, 1]

しかし、`copy()`メソッドを用いても、リストの要素が参照である場合はその参照先まではコピーされない。

~~~python
l4 = [[]]
l4[0].append(0)

l5 = l4.copy()
l5[0].append(1)

print('l4 = ' ,l4)
print('l5 = ' ,l5)
~~~
実行結果
>l4 =  [[0, 1]]
>l5 =  [[0, 1]]

リストに含まれる要素の参照先まで全てコピーしたい場合には`copy`パッケージに含まれる`deepcopy()`メソッドを用いれば良い。

~~~python
import copy

l4 = [[]]
l4[0].append(0)

l6 = copy.deepcopy(l4)
l6[0].append(1)

print('l4 = ' ,l4)
print('l6 = ' ,l6)
~~~
実行結果
>l4 =  [[0]]
>l6 =  [[0, 1]]
Pythonチュートリアル(1章)の内容を箇条書きでまとめた

#はじめに
[Python3 エンジニア認定基礎試験](https://www.pythonic-exam.com/exam/basic)対策として、Pythonチュートリアル(書籍)の内容を暗記しやすい箇条書きにまとめた自分用メモです。

##参考資料
Pythonチュートリアル： https://docs.python.org/ja/3/tutorial/
1章： https://docs.python.org/ja/3/tutorial/appetite.html
書籍： https://www.oreilly.co.jp/books/9784873117539/

#"1章 食欲をそそってみようか"
- Python3 エンジニア認定基礎試験の配点
    - 1 / 40問(2.5%) ☆★★★★(重要度：小)
- テーマ
    - Pythonの特長

#1. 食欲をそそってみようか
Pythonにはこんな特長がある。

- **インタープリタ言語**であり、コンパイルやリンクが不要。
    - インタープリタを対話的に使うことも可能。
- **Windows, Mac OS X, UNIX**などの主要OSで利用できる。
- 簡単ながら以下のような機能を備えた本物のプログラム言語である。
    - 一般性の高いデータ型
    - エラーチェック機構
    - 柔軟な配列、集合、ディクショナリなどの高水準データ型
- 以下のような理由でCやJavaなどよりプログラムを短く書ける。
    - 高水準データ型により複雑な操作を単一文で表記可能。
    - 文のグルーピングに**インデント (字下げ)**を使う。
    - 変数や引数の宣言が不要。
- 書いたプログラムは分離された**モジュール**として再利用可能。
- 以下のような機能を提供する**標準モジュール**が付属されている。
    - ファイルI/O
    - システムコール
    - ソケット
    - GUIツールキットのインタフェース
- **拡張可能言語**であり、ビルトインの関数やモジュールをインタープリタに追加可能。
- 名前の由来はBBCのテレビ番組**モンティ・パイソン[Monty Python's Flying Circus]**。

次の記事：[Pythonチュートリアル(2章)の内容を箇条書きでまとめた](https://qiita.com/Wakii/items/3a9efa210d2f602fa36e)
新卒エンジニアに送るReact + Reduxの習熟度チェックリスト

なんとなくだけどこれくらいできるといいなーと思ったことをまとめていたらチェックリスト方式になったので公開。まだ項目として足りない部分があるけどそれは今後追加していけば良いかなと。

これ足りないよ〜とかありましたらコメントいただけますと嬉しいです。

## 前提

- [ ] Create React Appでプロジェクトを開始できる 
- [ ] React公式のチュートリアルを完了している

## 初級者

- [ ] Stateの更新・propsの使用ができる
- [ ] 配列を使って要素の描画ができる
- [ ] formを使ってpostすることができる
- [ ] ライフサイクルメソッドを使うことができる
- [ ] UIライブラリを使ってスタイルを付けられる

## 簡単なビューであれば作成・修正ができるレベル

- [ ] lintの設定ができる
- [ ] Formaterの設定ができる
- [ ] react-routerを使いページ遷移をさせることができる。
- [ ] 配列内のkeyの意味がわかる。また、keyにどんな値を入れるのが適切なのか述べることができる
- [ ] 余計なdivタグを書かずにマークアップできる（fragmentを使う）
- [ ] スタイルの適用ができる


## 基本的なビューであれば問題なく任せられるレベル

- [ ] classコンポーネントと関数コンポーネントの違い・メリット・デメリットがわかる
- [ ] TypeScriptを使って書くことができる
- [ ] TypeScriptで書くことのメリットを述べることができる
- [ ] Reduxが何をしているか理解している
- [ ] Reduxを使ってStateの更新をすることができる
- [ ] APIを使ってデータの取得・更新ができる。また、Storeに入れることができる。
- [ ] hooksを使ってコードを書くことができる
- [ ] ライフサイクルメソッドを理解して使うことができる。また、あまり使用しない方が良い理由を述べることができる


## 1人月として計算ができレビューも任せられるレベル

- [ ] テストコードを書くことができる
- [ ] メモリーリークに気をつけてコーディングできる
- [ ] ログイン・サインアップなどAuth周りの実装ができる
- [ ] Reduxのメリット・デメリットを述べることができる
- [ ] middlewareで処理をすることができる。また、そのメリットデメリットを述べられる
- [ ] ReactのComponentとは何か理解している
- [ ] 必要であればカスタムhooksを作ることができる
- [ ] Code-Splittingを使うことができる。また、そのメリットを述べることができる。
- [ ] レビューすることができる

## 0からのプロジェクトでも難なくこなせるレベル

- [ ] Componentの設計ができる
- [ ] エラーハンドリングを実装できる
- [ ] Reduxを使う基盤を設計することができる
- [ ] パフォーマンスの改善ができる
- [ ] そのプロジェクトでどの範囲のテストをする必要があるのか判断でき、指標を示すことができる
HTMLとブロガー

WordPress以降は誰もがWEB運営者になれます。ブログとサイトの区別がつかない。それはWEBの中では差別化が難しいものでした。

ブログは個人であり、1次情報を取り扱う。1次情報が大事なところ、検索クエリでは重要視されることもあります。<a href="https://ladys-cash.com/affiliate-can-not-earn-money/" >アフィリエイト稼げない理由</a>のようにブログに情報価値はあるわけです。

ブログを書いていくということはサイトを運営すると同じ。だから<a href="https://www.bloomberg.co.jp/" >ニュース</a>を見ていて気になったことを雑記で書いても意味はあります。無価値だとする根拠がどこにあるのか。2次情報と1次情報。1次情報はいらないとする意見もありますがときに必要とされることもあります。
Windows Terminalで色やフォントや画面サイズを設定する


[Windows Terminal](https://www.microsoft.com/ja-jp/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab) (Preview)を使うと、PowerShellやWSLを1ターミナル内でタブ分けできる。


設定を変えたい場合、タブの一番右にある `∨`ボタンから `Settings`をクリックすると `profiles.json`が開かれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201962/334193de-4192-a489-021e-23340a336abd.png)


自力で書くのか… :innocent: 

Windows Terminalの公式ドキュメントに色々書いてある。

cf. https://github.com/microsoft/terminal/blob/master/doc/user-docs/index.md


Schemaを編集するための公式ドキュメントを見つつ、追加する。
cf. https://github.com/microsoft/terminal/blob/master/doc/cascadia/SettingsSchema.md


## 色やフォントを変える
たとえば全体的に背景色・前景色・フォント・フォントサイズを決めておきたかったので、こうした。

```diff:profiles.json(抜粋)
  ...
  "profiles":
      {
          "defaults":
          {
              // Put settings here that you want to apply to all profiles
+             "background": "#000000",
+             "foreground": "#55dd55",
+             "fontFace": "源ノ角ゴシック",
+             "fontSize": 14
          },
          "list":
          ...
```


## 画面サイズ
起動時の画面サイズを最初から広くしておきたいので、こうした。

```diff:profiles.json(抜粋)
  ...
  {
      "$schema": "https://aka.ms/terminal-profiles-schema",
      "defaultProfile": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
+     "initialCols": 205,
+     "initialRows": 40,
      "profiles":
      ...
```


## 画面の位置
起動時の画面が変な位置 (中央？)に固定されていたので、左端の下側に固定するよう変えた。

```diff:profiles.json(抜粋)
  ...
  {
      "$schema": "https://aka.ms/terminal-profiles-schema",
      "defaultProfile": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
      "initialCols": 205,
      "initialRows": 40,
+     "initialPosition": "0,200",
      "profiles":
      ...
```


## 起動時に開く端末を変える
デフォルトではPowerShellとかが開く。

WSL2のUbuntuに変えたければ、 `"defaultProfile"`の値を、同設定ファイル内にあるUbuntuの `guid`で上書きする。


## WSL2起動時のディレクトリ位置を指定
`startingDirectory`で指定できる。

たとえば `/home/v2okimochi`がホームディレクトリでそこを指定したければこうする

```diff:profiles.json(抜粋)
  ...
  {
      "guid": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",
      "hidden": false,
      "name": "Ubuntu-18.04",
      "source": "Windows.Terminal.Wsl",
+     "startingDirectory": "//wsl$/Ubuntu-18.04/home/v2okimochi" 
  },
  ...
```


## WSL2起動時に.bashrcを読み込む
読み込まれない疑惑があったので。

`commandline`で、bashを起動するように指定する

```diff:profiles.json(抜粋)
  ...
  {
      "guid": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",
      "hidden": false,
      "name": "Ubuntu-18.04",
      "source": "Windows.Terminal.Wsl",
+     "commandline" : "wsl -d Ubuntu-18.04 bash"
  },
  ...
```

cf. [WindowsTerminalやPowerShellからWSL2を実行した際に~/.bashrcが読み込まれない](https://qiita.com/ozroro/items/0baac26be01ee5ab41d6)


## 発展
さらに詳しい解説 (キーバインドなど)もあった。

cf. [Windows Terminal (Preview) メモ](https://qiita.com/rubytomato@github/items/e88cab84f36e44797cf2)
eclipse all in one インストール

Eclipseのインストールメモ。

# 動画版

<iframe width="560" height="315" src="https://www.youtube.com/embed/qjyXK5MewO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# ダウンロード

https://mergedoc.osdn.jp/

#### ここで好きなバージョンを選択（今回はEclipse 2020を想定）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/2be65382-9073-8fb1-81af-56a3356b4d1d.png)
####なんやかんや入ってるFull Editionを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/b4710423-ac76-c834-5b6f-88281806de55.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/586da9b7-cf85-ed90-1269-be064b80e30f.png)

# インストール

pleiades-2020-03-java-win-64bit-jre_20200322.zip
ダウンロードしたzipを解凍していい感じに配置。

私のいつもの構成はこんな感じ

```
D:/
　└ pleiades/
     ├ eclipse/
     ├ java/
     ├ tomcat/
     └ workspace/
```

* 解凍したらできるpleiades-2020-03-java-win-64bit-jre_20200322フォルダの中身だけ使う
* C:はすぐいっぱいになるのでD:に入れる（これは端末状況によるかな）

# 起動

eclipse.exeで起動。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/9250eb12-d631-3ad7-fdf8-2181fe2c3e5f.png)

ワークスペースの場所はこだわりがなければこのまま「起動」。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/b774491f-dd01-c946-0006-612035823323.png)
Apache mod_access_compat の注意事項

Allow ディレクティブの行にコメントを書くと挙動が狂った。
意図しない通信を許可してしまいかねないので自戒のためにメモ。

（そもそも Apache ではディレクティブと同じ行にコメントを書いてはいけないのだが）
https://httpd.apache.org/docs/2.4/en/configuring.html#syntax

> Lines that begin with the hash character "#" are considered comments, and are ignored. Comments may not be included on the same line as a configuration directive.


例えば CentOS 7 でパッケージインストールした `httpd-2.4.6-90` でこういう設定をする

```console
# rpm -q httpd
httpd-2.4.6-90.el7.centos.x86_64

# tail -5 httpd.conf
<Location /hoge>
  Order deny,allow
  Deny from all
  Allow from 127.0.0.1
</Location>

# systemctl start httpd
```

127.0.0.1 以外は /hoge にアクセスできない。
（何も設置してないので 127.0.0.1 からは 404 になっている）

```console
# curl -sv -o /dev/null http://127.0.0.1/hoge 2>&1 | grep '^<'
< HTTP/1.1 404 Not Found
< Date: Mon, 20 Apr 2020 23:28:46 GMT
< Server: Apache/2.4.6 (CentOS)
< Content-Length: 202
< Content-Type: text/html; charset=iso-8859-1
<

# curl -sv -o /dev/null http://192.168.1.100/hoge 2>&1 | grep '^<'
< HTTP/1.1 403 Forbidden
< Date: Mon, 20 Apr 2020 23:28:48 GMT
< Server: Apache/2.4.6 (CentOS)
< Content-Length: 206
< Content-Type: text/html; charset=iso-8859-1
<

```

ここで Allow ディレクティブの行にコメントを書くと困ったことになる。

```
# tail -5 httpd.conf
<Location /hoge>
  Order deny,allow
  Deny from all
  Allow from 127.0.0.1 #comment
</Location>

# httpd -t
Syntax OK

# systemctl restart httpd

# curl -sv -o /dev/null http://127.0.0.1/hoge 2>&1 | grep '^<'
< HTTP/1.1 404 Not Found
< Date: Mon, 20 Apr 2020 23:29:44 GMT
< Server: Apache/2.4.6 (CentOS)
< Content-Length: 202
< Content-Type: text/html; charset=iso-8859-1
<

# curl -sv -o /dev/null http://192.168.1.100/hoge 2>&1 | grep '^<'
< HTTP/1.1 404 Not Found
< Date: Mon, 20 Apr 2020 23:29:46 GMT
< Server: Apache/2.4.6 (CentOS)
< Content-Length: 202
< Content-Type: text/html; charset=iso-8859-1
<

```

syntax check は通って、意図していない部分まで許可されてしまったようだ。
コメントをここに書かなければいいだけなので、深くは追わない。



ちなみに、CentOS 8 でパッケージインストールした `httpd-2.4.37-16` では syntax check は同じく通るが、こういう事象は発生しなかった。
ソースからインストールした場合は syntax check でエラーになったので、独自のパッチを当てているようだ。

```
# /usr/local/apache2/bin/httpd -t
AH00526: Syntax error on line 509 of /usr/local/apache2/conf/httpd.conf:
No comments are allowed here

```
ターミナル コマンドたち

#前提
ターミナルでよく使うコマンドをまとめていきます。

なぜかというと、アプリ作成時のエラー原因がわからないことが多々あったからです。
実際に何かアプリを作成するとき、様々な記事を参考にすることが自分は多いです。
その際に、記事に書いているコマンドをターミナルでそのまま入力し、
何をやっているかわからないまま操作するため、
エラー原因がわからず頭がおかしくなることがあったので書きました。

随時追記していきます。

#本題

###カレントディレクトリのパス表示

```
$ pwd #カレントディレクトリのパスを表示する（print working directoryの略）
```
※自分が今どこにいるのか確認する時によく使います。


###カレントディレクトにあるファイルを表示

```
$ ls      #カレントディレクトリにあるファイルやディレクトリを表示する（listの略）
$ ls -l   #ファイルやディレクトリの詳細も同時に表示する
$ ls -a   #隠しファイルも含めファイルやディレクトリを全て表示する
$ ls −la  #隠しファイルを含む全てのファイルやディレクトリの詳細を表示する
```
※隠しファイルとは
　通常では表示されないようになっているファイルやディレクトリのこと。
　（重要なファイルのため他のユーザーが勝手に触らないようにするため）
　隠しファイルは名前の前に<code>.（ドット）</code>がついている。


###ファイルの移動・ファイル名の変更

```
$ mv #moveの略
$ mv sample.html tmp/  #sample.htmlというファイルを相対パスでtmp/に移動する
$ mv sample.html sample2.html  #sample.htmlというファイルをsample2.htmlに名前変更する

$ cd              #カレントディレクトリにあるファイルに移動する（change directoryの略）
$ cd sample.html  # sampleというファイルに移動する
$ cd ~/           #ホームディレクトリに移動する
$ cd ..           #一つ上の階層のファイルに移動する
```

###ディレクトリ・ファイルを作成

```
$ mkdir sample　#sampleディレクトリの作成
$ touch　sample　#sampleファイルの作成
```


###ファイル削除

```
$ rm              #removeの略
$ rm sample.html  #sample.htmlを削除する
$ rm -r sample    #sampleというディレクトリとその中身を削除する
$ rm -f sample    #sampleというファイルを削除する
$ rm -rf sample   #sampleというディレクトリとその中身を削除する
```

###ファイルの中身を表示する

```
$ cat sample　#sampleディレクトリの中身を表示
```
※入力途中にTabキーを押すと、残りのファイル名を補完してくれる。

###ファイルの設定を読み込み有効にする

```
$ source ~/.bash_profile 
  #ホームディレクトリにある.bash_profileに書き込んだ設定を読み込み有効にする

$ source .bash_profile
  #カレントディレクトリにある.bash_profile設定を読み込み有効にする
```

###これまでのコマンド履歴を表示

```
$ history     #これまで実行したコマンドの履歴を表示する 
$ history -c  #これまで実行したコマンドの履歴を消去する
```


###指定した文字に一致する行を検索

```
$ grep オプション 検索文字列 ディレクトリ名  #このような形式
$ grep -r  #指定したディレクトリ以下を検索する
$ grep -i  #大文字小文字を区別せず検索する
$ grep -l  #検索した文字列が含まれているファイル名のみを表示する
$ grep -n  #検索した文字列が書いてある行番号を表示する。-lオプションと併用はできない
$ grep -e  #複数の検索条件を指定する
$ grep -v  #パターンに一致しない行を表示する
```
↓↓例

```
$ grep "sample" *.html        #拡張子がhtmlのファイルからsampleを検索
$ grep -n "sample" test.html  #test.htmlよりsampleを検索して行番号をつけて行を表示する）
$ grep -ir "sample" .  
  #カレントディレクトリ以下のすべてのファイルからsampleという文字列が含まれている行を表示する
```


###プロセスの終了

```
$ ps aux        #起動しているすべてのプロセスを表示する
$ ps --pid PID  #特定のPIDだけを表示する
$ kill PID      #psコマンドで表示したプロセスを終了させる
$ kill -9 PID   #プロセスIDのプロセスの強制終了させる
```


###ファイルのコピー

```
$ cp                          #copyの略
$ cp sample.html tmp/         #sample.htmlを相対パスでtmp/というディレクトリの中にコピーする
$ cp sample.html sample2.html #sample.htmlをsample2.htmlという名前でコピーする
$ cp −r dir /tmp/             #dirというディレクトリとその中身を絶対パスで/tmp/にそっくりコピーする
```
fishで特定のhistoryを削除

fishの便利な機能として，optionまで含めて過去のコマンド履歴を覚えていて，途中まで打ったらそれがrecommendされます．

ところが，間違ったコマンドがずっと残っていて，さらに見間違ってそのまま何回もenterするうちに，いろんなdirectoryでそれがよくでてきて，さらに続けて．．．

と死のスパイラルにハマります．

履歴を消しましょう．意外と楽でした．

``` fish
$ history search 'git pull origin '
histroy search 'git pull origin '
git pull origin master
git pull origin mater
git pull origin maskter
git pull origin msater
git pull origin upstream
$ history delete 'git pull origin mater'
[1] git pull origin mater
Delete which entries? > all
```
で無事消せました．タイプミス多いんで．．．

- http://fish.rubikitch.com/history/
【Unity】引数を使ったボタンで好きな数字をテキストに表示する

#環境
Unity 2019.3.7f1

#はじめに
同じような処理のボタンが複数ある場合、
引数を使ったボタンでコードを簡略化できます。

こちらは一つの関数で処理しています。
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/BhM6pKOAYa">pic.twitter.com/BhM6pKOAYa</a></p>&mdash; Maru＠個人アプリ開発者 (@Maru60014236) <a href="https://twitter.com/Maru60014236/status/1252360908594016259?ref_src=twsrc%5Etfw">April 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 


#方法
1.ボタンに割り当てる関数で引数を宣言する。
2.ボタン側で引数の入力値を設定



#具体例
1～9の引数をそれぞれ設定したボタンを作成し、
ボタンを押すとテキストに
設定した数値が表示されるようにしてみましょう。

**1.前準備**
**・ボタンを9つ作成**
【Unity】オブジェクトを等間隔で配置する方法　Grid Layout Group
https://qiita.com/Maru60014236/items/56d2d53e0a80f1e65e94
で作ったボタン群を使います。
(内容：ボタン並べただけ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/af159717-69fd-fbd5-c2c7-a3a3e056d689.png)

**・空のオブジェクトを作成**
**・新規スクリプト作成**
**・空のオブジェクトに作成したスクリプトを割り当てる**

**・テキストを作成**
テキストは、見やすくするためこのように設定
・フォントサイズ50
・水平オーバーフロー　Overflor
・垂直オーバーフロー　Overflor
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/d43849f6-9c27-988c-a17a-89a9f8d6be5e.png)



**2.ボタンのテキスト変更**
ボタンのテキストを1～9に変更。
テキストフォントサイズを50にする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/35cbecda-8c2d-136f-7e2b-bc4ccb3a708b.png)


**3.ボタンに割り当てる関数を作成**
このようにコードを書きます。

```CSharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//UIを使うため追加

public class test : MonoBehaviour
{
    [SerializeField] private Text suuji_text;//Text型の変数suuji_textを宣言

    void Start()
    {        
    }

    //ボタンを押したら実行する関数　実行するためにはボタンへ関数登録が必要
    //int型の引数numberを宣言
    public void Push_Button(int number)
    {
        suuji_text.text =""+ number;//suuji_textに引数の数値を代入
    }
}
```

**4.ボタンに関数割り当て**
ボタンのクリック時のところに空のオブジェクトを割り当て
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/883adb7c-bb0b-2c1a-7d46-65e166b5fd3c.png)

先程作成した関数を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/e487043f-205f-98fd-fa78-bd743c5796aa.png)

　
数値入力欄が出現するので、
ここにボタンテキストに対応した数値を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/c1785ad4-4e4c-ab91-8904-88615145daeb.png)

それぞれのボタンで関数割り当て＆数値入力を行ってください。

**5.空のオブジェクトのスクリプトに前準備で作成したテキストをアタッチ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/7cf81b96-2bf2-2a7e-6c24-bb2b162c9937.png)

###実行
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/BhM6pKOAYa">pic.twitter.com/BhM6pKOAYa</a></p>&mdash; Maru＠個人アプリ開発者 (@Maru60014236) <a href="https://twitter.com/Maru60014236/status/1252360908594016259?ref_src=twsrc%5Etfw">April 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 


#おわりに
引数を使った関数でコードスッキリ！！
【Unity】オブジェクトを等間隔で配置する方法　Grid Layout Group

#環境
Unity 2019.3.7f1

#はじめに
ボタンなどを等間隔で配置する方法です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/52980136-8919-b71e-5a1a-163d4f4fd9fa.png)


#方法
1.整列させたいオブジェクト群をPanelオブジェクトに入れる
2.そのPanelオブジェクトにGrid Layout Group(グリッドレイアウトグループ)コンポーネントを追加
3.各種設定行う

#具体例
実際にやってみましょう。

**前準備**
まずボタンを9つ作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/aacdbba0-a3c8-cca0-4bbb-f205564a923c.png)

**1.整列させたいオブジェクト群をPanelオブジェクトに入れる**
パネルオブジェクト作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/02efbc5b-8288-7358-c471-21eb65d82489.png)

今回Panelに色は不要なので透過を0にして透明にしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/5493d6cc-6250-8664-020a-b4ac02f77695.png)
パネルの配下にボタンを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/e3730597-b33d-f30e-2c14-2d042555ff89.png)

**2.PanelオブジェクトにGrid Layout Group(グリッドレイアウトグループ)コンポーネントを追加**
Panelを選択
　
コンポーネントを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/cf28b56b-9f4b-430f-dfaa-0ae18dd09917.png)

グリッドレイアウトグループを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/d7596aa6-e345-2f7a-3545-a50b27b20ec2.png)

**3.各種設定行う**
ボタンのサイズやセルの間隔などが調整できます。
今回はこのように設定しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/031d66f5-63f1-a0e0-49e5-623d90ffa0b8.png)

**できあがり！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/6944a98e-cc9d-4a7e-212e-61a543172fdb.png)

#おわりに
これで手作業での等間隔調整とはおさらばです！
Flutter未経験者が二週間でナイキラン系のアプリを開発してみて思ったこと

こちらの記事では、ざくっと未経験からFlutterをやっていく人に向けたメリット・デメリットを伝えられたらなと思います。
#開発環境構築
以下を参考にさせて頂きました。(iosアプリのみの場合、android環境を構築せず制作できます)
・[Flutter開発環境構築](https://qiita.com/akatsukaha/items/3b8a5a6d94a3cdb1e047)
#用いたライブラリ
・geolocator 5.1.3
・cloud_firestore: ^0.9.5
#つくったもの
<div>
<img width="300" alt="スクリーンショット 2020-04-13 午後5.13.34 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547274/471c95a2-a41d-cbbd-29a0-b69208af7e8e.png">
<img width="300" alt="スクリーンショット 2020-04-13 午後5.13.52 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547274/f31f1bb5-6c89-d500-fbbe-0ce902f89bc2.png">
</div>
タイムを測りながらGPSで距離測定をするストップウォッチ機能とfirebaseのデータベース（firestore）で記録をランキング化する機能があるアプリ
##未経験でも、ある程度のアプリは開発できるのか？
結論から言いますと可能だと思います。
ゲームアプリを制作したいとかだと難しいと思いますが、ToDoアプリやSNS、タスク管理系のツールであればフロントエンド部分で細かい修正に時間がかかるかもしれませんが大方できると思います。バックエンド部分は、firebaseで開発すると学習コストは然程かかりませんし、flutterには何と言ってもホットリロードがあります。ホットリロードとは、コードを書き直せば即確認できる機能です（web制作に似た感じです）
##メリット
・簡単な個人開発アプリを制作する時には学習コストが少なくすむ。（仮にAndroidでも公開したいとなっても対応がしやすい）
・ホットリロード機能があるので、ビルドして毎回確認する必要性がない。（ネイティブと比べると、この点が嬉しい限りだと思います）
・割とライブラリが豊富（ネイティブ程ではないですが、こんなライブラリあるかなーと検索してみるとみつかるので、私はあまり困らなかった）
##デメリット
・日本語記事の少なさ（エラーがでたり、ライブラリの使い方を調べるときに英語記事を読む必要性があります）
・ARkitなど、ネイティブしかないライブラリを使いたい場合、諦めるしかないです。（なので、つくりたいアプリに必要な機能をflutterは満たしているのか確認する必要があります）
・xcodeのアップデートによってflutterのバージョンを上げる必要があった（ビルドができなくなったので焦りました汗）
#まとめ
個人開発をしたい方にはお勧めです。プログラマー実務未経験から就職・転職となると案件が少ないのでネイティブ上がりのプログラマーと競争する必要があるのかなと思いました。（実体験）
ざくっとFlutterについて書きましたが、あくまで個人的見解なので参考までに。
技術的なことやコードについては違う記事で詳しく書いておくとおもいますので、気になった方はチェックしてみてください。
#アプリ使ってくださると嬉しいです。
[競い合いランニングアプリ RUNKING](https://apps.apple.com/jp/app/%E7%AB%B6%E3%81%84%E5%90%88%E3%81%84%E3%83%A9%E3%83%B3%E3%83%8B%E3%83%B3%E3%82%B0%E3%82%A2%E3%83%97%E3%83%AA-runking/id1507729440)
【CSS】stickyで表のヘッダを固定する

# はじめに
スクロールしても表のヘッダを指定の位置で固定化して表示させたい時はありませんか？
そんな時に便利なCSSがpotisionプロパティの `sticky` です。

## sticky
[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/position#Sticky_positioning)によるとstickyは「粘着位置指定」と呼ぶようです。
指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱う・・・

要するに、「指定の位置までスクロールしたらそれ以降は表示位置が固定される（fixedになる）」ということです。

## 実装(html)

例えば、こんな表があったとします。

```html
<table>
    <thead>
        <th>No</th>
        <th>ヘッダ1</th>
        <th>ヘッダ2</th>
        <th>ヘッダ3</th>
        <th>ヘッダ4</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
        <tr>
            <td>2</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>

        :
        :
        :

        <tr>
            <td>99</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
        <tr>
            <td>100</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
    </tbody>
</table>
```

データ行がNo.1から100まで存在する場合、
後半のデータを見るには大抵、スクロールさせていると思います。
その結果、表のヘッダ部分はスクロールされ見えなくなってしまいます。

スクロールしている間、ヘッダ部分が画面の上部に固定で表示されていた方が都合がいい場合があります。
そんな時に便利なのがpositionプロパティの `sticky` というわけです。

## 実装(css)
ヘッダにstickyを当てます。

```css
th {
    position: sticky;
    top: 0;
}
```

画面上部0pxの位置でヘッダを固定させます。
`sticky` は親要素がブラウザに表示されている間、固定表示を維持します。
表の最下部までスクロールし切るとヘッダは相対表示となり見えなくなります。

## 注意点
 - IEでは `sticky` が効きません。
 - `border-collapse: collapse` が指定されている要素には `sticky` が効きません。

# まとめ
`sticky` を利用することでJavaScriptでごりごり実装せずとも、スクロールに合わせて固定/相対表示を実現してくれます。
今回は表のヘッダ部分に使用しましたが、目次にも応用できます。
初心者によるプログラミング学習ログ 295日目

#100日チャレンジの295日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
295日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>295日目　1.5h<br>・xdデザインカンプからのサイト模写<br>・ハンバーガーメニュー作成<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1252328677603340289?ref_src=twsrc%5Etfw">April 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>