OmniAICreator/Qiita-1.07M huggingface dataset:
Azure Arc for Servers から AWS EC2 に接続してみる

※本記事は2020年4月時点での内容です。

#はじめに
Azure ArcはMicrosoft Ignite2019で発表され、現在Azure Arc for ServersがPublic Previewでリリースされています。ドキュメントを読んでいるとAmazon Linuxという表記があり、興味を持ったため早速試してみました。

※2020/4/15時点でAmazon Linux 7という表記になっていますが、これはTypoのようです。ドキュメントの管理者に変更依頼を投げたので、しばらくすると改善されると思います。正しい表記は、Amazon Linux 2です。

参照: https://docs.microsoft.com/ja-jp/azure/azure-arc/servers/overview#prerequisites

#設定手順概要
1.AWSマネジメントコンソールにログインし、EC2インスタンスを一つ立てます。今回は、Amazon Linux 2 AMI(HVM)を選択しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/822e3f29-2735-4702-38a3-049251962ef5.png)

2.AzureポータルでAzure Arcを検索します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/963781e1-7a83-00e1-e479-e88c03a13f72.png)

3.「+追加」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/cbcad075-b460-8f82-cb71-1c365f624496.png)

4.「スクリプトの生成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/10e8b902-3117-b456-bcc9-56ecc119c7ca.png)

5.各種設定を入力します。今回EC2インスタンスのOSがLinuxのため、Linuxを選択しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/65f5a31f-7cbb-f10a-13cd-769512e72a40.png)

6.エージェントをインストールするためのスクリプトが生成されるので、メモ帳等にコピーしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/e309f26e-3659-3b0e-dbb7-d319227eb9f3.png)

7.あとは簡単に設定できます。EC2インスタンスにログインし、先ほどコピーしたスクリプトを順に実行するだけです。正常に完了するとこのような画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/0fe4075c-77c0-e2a6-8117-b2874edc2015.png)

8.Azureポータルから確認してみます。AzureからAWSのインスタンスが確認できます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/f4adf8ad-c4c6-bf6e-e98c-42452db8a60c.png)

#さいごに
Azure、オンプレミス、AWSなど複数環境でサーバーを利用している際に、Azureポータル一画面で全てを管理(ポリシーの割り当て等)ができるのは便利ですね。ドキュメントには記載がありませんが、GCPなど他のクラウドからも接続できるはずなので、試してみたという方がいらっしゃいましたら是非教えて下さい！
EKSのHelloworld

# 概要
* いつもminikubeだったので、たまにはマネージドな環境で(AWS)試してみた。
* 慣れている人ならちょっとわからないが、少なくとも自分は10分とかでできたりはしなかった。

# 要するに
以下3手順でEKSでサンプルAPが動作するところまで試した。

1. AWSマネジメントコンソールでクラスタ作成
1. AWS CloudFormationでノード作成
1. サンプルAPの作成

# 手順
以下マニュアルで試すのみ。

https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/getting-started-console.html

## 前提
手元の環境は以下があったので、割愛

* AWS:VPC/サブネット
* [クライアント(mac):AWS CLI/eksctl ](https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/getting-started-eksctl.html)
* [kubectlの設定をAWSへ](https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/create-kubeconfig.html)

## 1. AWSマネジメントコンソールでクラスタ作成
マニュアルの「ステップ 1: Amazon EKS クラスターを作成する」を実行

## 2. AWS CloudFormationでノード作成
マニュアルの「ステップ 3: マネージド型ノードグループの起動」を実行

## 3. サンプルAPの作成
マニュアルの「次のステップ」- [「ゲストブックアプリケーションを起動する」](https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/eks-guestbook.html)を実行

# 所感
* 当たり前だが、シングルノードのminikubeよりは手順が多い
* VPCやサブネット構築からやる場合にはeksctl create clusterなどでやれば良いと思う。
* AWS CloudFormationで利用するテンプレートの世代によって手順が大幅に変わっている
    * 以前よりだいぶ楽になった
日本の携帯番号の正規表現を求められています、お願いいたします。

こんにちは、:sunny:中国人の路と申します、日本語の初心者です、どうぞよろしくお願いいたします。
phpやってます、いつも日本向けのプロジェクトをやってますから。
ただいま、ある質問を聞きたくて、
日本の電話番後と携帯電話番号の正規表現を求められています。
ある人が答えてくれましたら、ほんとに助かります。どうもありがとうございました
未経験エンジニアの転職活動必勝法

未経験エンジニアのための転職活動必勝法をまとめました。一読いただけると幸いです。
↓こういう方に最適です
＃プログラミングある程度できるようになったから転職活動をはじめたいが何からはじめたらいいの？
＃未経験で採用されるにはどう工夫すればいいの？
＃そもそも転職活動って何からすればいいの？
等々　

[未経験エンジニアのための転職活動必勝法(note)](https://note.com/nao_universe/n/n84244fef42a9)
AviUtlで文字列から関数を記述してオブジェクトを移動させる

# 目的
AviUtlのアニメーション効果で、ダイアログから自由に関数をstring型で記入し、その関数とトラックバーの変数を用いてオブジェクトの座標を制御する。

# 方法
`loadstring`関数を使用します（[リファレンス](http://www.rtpro.yamaha.co.jp/RT/docs/lua/tutorial/library.html#loadstring)）。
例えば、

```Lua:
function = loadstring("a = 1 + 1")
function()
debug_print(tostring(a))
```
と記述すると、`func()`が呼ばれたときに`a = 1 + 1`が実行され、

```
2
```
と表示されます。

# サンプル
トラックバーの値を変化させると、ダイアログに記載した関数をもとに座標が変化します。

```Lua:@自作関数.anm
@自作関数
--track0:X,-1000,1000,0,0.01
--dialog:f(X),fx="x";

x = obj.track0

func = loadstring("y = "..fx)
func()

-- オブジェクトの座標を設定
obj.ox = obj.ox + x
obj.oy = obj.oy + y
```

`-100`から`100`までの`直線運動`に設定して、AVIに出力してみます。
ダイアログの関数には`-x`と記述しました。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618500/a59620c0-de8b-6a1d-ccc1-a4a5dedd6d8c.png)
![Avi.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618500/39e0b47a-14cb-50fb-329d-94af8c02b4de.gif)
【PMP】PMBOKの？？？を自分の理解で書いてみる（コンフリクトマネジメント）

#初めに
　PMP取得を目指して勉強中の状の人が書いています。自分の学習の備忘として残していきます。
　（誤った理解などが後で判明すれば訂正していきます）。

##テーマ
　コンフリクトマネジメントの「妥協や和解」と「鎮静や適応」の違い
　特に混乱したのは「適応」の部分。それって妥協とかと何が違うの？となり混乱。
　ちなみにPMBOK(第六版)の定義はこちら。
　[定義]
　　妥協や和解：関係者全員が、ある程度は納得できる解決策を模索し、
　　　　　　　　コンフリクトを一時的または部分的に解決する。
　　　　　　　　この手法は、ときどき、双方に不利な状況に終わる。

　　鎮静や適応：意見の異なる部分ではなく、同意できる部分を強調し、
　　　　　　　　相手のニーズへの立場を認め、調和と関係を維持すること。

##考察
　定義を見た第一印象は「なんか鎮静や適応の方が友好的で理想的」。
　だって、妥協や和解は双方に不利な状況に終わるとか言ってるし。

　でも結論としては妥協や和解の方が建設的な面が強い。なぜなら
　「妥協や和解」はコンフリクトの元が解消に向けて一歩前進しているのに対して、
　「鎮静や適応」は人間として感情のコントロールはしてるけど、
　コンフリクトの元については特に何もしていないから。

##結論
　結論というか自分の理解を具体例を出して書いてみる。

　例えば今日はどうしても肉じゃがが食べたいのに奥さんはパスタが良いと主張している。
　問題は「食べたい物を食べたい」＋「最近言うこと聞いてばっかで、
　なんか言いなりになるのはイヤという感情」の2点だとする。

　妥協や和解：じゃあ中華にしようか。
　　　　　　　⇒これは双方食べたいものは食べれないけど（双方不利益）、
　　　　　　　　相手の言いなりにはならずに済んだ（コンフリクトの元は1つ解消）。
　　　　　　　　何があったか知りませんが、これでガスが抜けて
　　　　　　　　次は相手の要望に応えてあげるやさしい心が期待できるかもしれませんね。

　沈静や適応：そうか。じゃあ（へそ曲げられるとめんどいし
　　　　　　　まぁ別にパスタ食えないわけでもないから）パスタにしよう。
　　　　　　　⇒とりあえず、その場は両者の関係という側面では良し。
　　　　　　　　ただ自分としてはコンフリクトの元はそのまま放置されてて、
　　　　　　　　これが溜まるともっと深刻なコンフリクトとして現れる、かもしれない。

##後記
　駄文ですが読んでいただいてありがとうございました。
Python の正規表現マッチングで引数付groupを使うと遅いのか検証する

# 結論

- 正規表現でグループを指定するとちょっと遅くなる。(14%)
- 引数付でgroup(1)とかするとさらにちょっと遅くなる。(22%)
- 遅くならないわけではないけど倍かかるわけでなし別に気にする必要ない。（個人差があります）
- 何行もロジック書くよりは標準ライブラリの関数使ったほうがだいたいにおいてマシ。

# やる気あったんか

どちらかというとQiitaになんか書こうというモチベーションでした。すいやせんした。
Pythonの正規表現でマッチしたあとmatchobj.group(1)とかするとなんか遅い気がしたし、簡単に検証できそうだったのでとりあえず書きますという気持ちです。

# 環境

- Windows 10 Home
- Python 3.6.6
- ipython 6.4.0

# 実験用コード

```python
import re

seq = "hoge123fugafoobar456zoo"
pat1 = re.compile(r"\S+\d{3}\S+\d{3}\S+")
pat2 = re.compile(r"\S+(\d{3})\S+(\d{3})\S+")

def matchA():
    for i in range(100):
        mat1 = pat1.match(seq)
        groupA = mat1.group()

def matchB():
    for i in range(100):
        mat2 = pat2.match(seq)
        groupB = mat2.group()

def matchC():
    for i in range(100):
        mat2 = pat2.match(seq)
        groupC = mat2.group(1)
```

でIPython REPLから以下のようにする。

```IPython
In[0]: %%timeit
  ...: matchA()
  ...:
```

# 結果
|関数|正規表現|正規表現でグループを含む|group()|実行時間|％|
|---|---|---|---|---|---|
|matchA|r"\S+\d{3}\S+\d{3}\S+"|含まない|group()|111μs|100|
|matchB|r"\S+(\d{3})\S+\(d{3})\S+"|含む|group()|127μs|114|
|matchC|r"\S+(\d{3})\S+\(d{3})\S+"|含む|group(1)|135μs|122|

倍くらい違うのかと思ったけどそうでもなかったです。
標準ライブラリの関数はよくできているのだなぁと思いました（小並感）
Laravel ユーザー認証機能

#前提
composerインストール済み
php7.3
Laravel6.0以降
ログインしないと使えないようなサービスの開発に必要なユーザー認証機能についてアウトプットしていきます。

#本題
・ユーザーの登録
・ユーザーのログインとログアウト
・ユーザーの情報の管理などを行うホーム画面
・ログインしていないユーザーのアクセスを制限するアクセス制限
・現在のユーザーのログイン状態などをプログラムないから調べるための各種機能
これらの機能を１から開発していくのは大変...
ですが、Laravelではもとより、認証機能を持っているため簡単に実装できます。

認証機能「Auth」を使用します。
早速、実装していきます。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ターミナルにて下記、コマンドを入力。

```ターミナル
$ composer require laravel/ui
```
※もしcomposer command not foundのようなエラーが出たらcomposerが入っていないのでインストールする！
問題無かったら下記、コマンドをターミナルに続けて打っていきましょう！

```ターミナル
$ php artisan ui vue --auth
```

```ターミナル
$ npm install
```
※npmが無い場合はエラーが出るのでNode.jsをインストール！
https://nodejs.org/ja/

```ターミナル
$ npm run dev
```

コマンドを打ち終わったら php artisan serveをターミナルに打ち込みできているか確認！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594409/cb1b02db-52bb-b84f-0f46-81215be3361d.png)

※右上の方に新しくLOGIN・REGISTER発見！

これでAuth関連の機能が利用可能になります。
Voice UX: What Is Voice Design? Why It Is Important For Business In 2020

Anybody with internet access and basic coding skills can develop a voice-powered technology today, Alexa has more than righty thousand skills currently, but the majority of them are not useful. 
 
Voice User Interface means the ability to interact with the devices; it can understand and provide answers based on the user’s command. From asking Alexa to set the alarm at 6 a.m, to ask to play their favorite songs. It can understand the user’s voice command instead of typing.
 
These days, many companies are investing in developing voice-based products. Well, it makes sense because the human voice is the primary way to initiate communication. Another benefit is voice-based products through brands can attract more customers to provide a seamless experience.
 
## Why Voice Design Is Important 
 
The rise of voice technology can be credited to the evolution of artificial intelligence and cloud facilities. With machine learning and NLP techniques, technology now able to interpret human speech accurately; it can also identify user’s speech frequencies.
 
Voice assistants such as Alexa, Siri, and Google Assistant are a growing part of our digital lives, and it is predicted that usage of it will be growing in the future. Many brands and consumers have already started using smart devices at their offices and home.
 
As both customers and brands embrace voice technology, VUI design abilities, and expertise will become more important for companies to stay connected and deliver optimum experiences to the customers.
 
This technology and software make a human conversation easy and natural, but make sure you need to design it properly to achieve its full potential. 
 
For instance, many warehouse companies now use voice-based delivery management software that helps to improve product efficiency and saves time.
 
However, voice design concentrates on such products that can be more useful for people who have visual or mobile damage, or who can’t use their hands in certain circumstances.
 
## Understands User’s Persona & Adaptability 
 
Voice technology is being used in websites and applications, consistent communication of queries between visual and voice interface remains an important element in voice design.
 
All you need is to come up with a predictive dialogue based on the user’s action; it tries to fulfill the user’s intentions at different points of the conversation.
 
For instance, if the consumer visits a hotel website and clicks on the gallery page, the site will ask if the person wants to book the room. Or else a person requests to check the Airbnb availability in New York, the site cloud will instantly ask about date and location in that particular area.
 
Voice design is a new concept; hence designers need to learn how to solve problems that arise during the creation of a Voice user interface.
 
## Summery
 
While developing a UX for Voice User Interface, you should think about the user’s commands and the ability to provide relevant results for the query. Brands should invest in technologies, but to create a better user experience, they need to invest in the experience.
HTMLファイルをPHPでスクレイピング

# 前提
- 抽出したい要素を一意に特定できるよう考慮しなければならない
- 複数ページのある要素を抽出したいという場合には、その要素が特定の部分にしか記載されていないのであればそのままスクレイピングをしても問題なし
- もし複数の箇所に記載されているのであれば、まずは**記載箇所をパターン化してから**スクレイピングする必要がある

# 下準備

```php
$html = 'https://xxx.com/index.html';
$html = file_get_contents($store_html);
$dom = new DOMDocument();
@$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
unset($dom);
```
- @」でエラーを抑制しているのは HTML の記述に誤りがあった場合でもエラーを表示しないようにするため

# 値の取得の例

```php
$tar = $xpath->query('//body//p[contains(.,"タイトル")]/following-sibling::div[@class="main"]/span')->item(0)->nodeValue;
```

- 「//」で途中のパスを省略することができる。
- 上記は**bodyタグの中から、文言に"タイトル"を含むpタグの隣の、class名がmainのdivタグのなかの、spanタグの中のテキスト**を取得している。
- query() は一致した全ての要素をリストの形で返すため item(0) として最初の要素を指定する必要がある。

スクレイピングしたい対象によって取得方法が異なるためその都度調べるしかない

# 参考リンク
https://php-archive.net/php/dom-scraping/
http://cloudcafe.tech/?p=2456
物性論におけるGreen関数とリゾルベント

　数学や電磁気学，数値解析の分野等でしばしばお目にかかるGreen関数と，物性物理学や素粒子物理学でのGreen関数は，見た目の定義がかなり異なっている．ここではこれらの間の関係について，最も簡単な例を挙げて述べる．前者でよく出てくる形は次のようなものである：
$$G(z):=\frac{1}{z-\mathcal{H}},\tag{1}$$ここで$z\in\mathbb{Z}, \Im z\neq 0$とする．$\mathcal{H}$は一般の線形演算子としても良いが，とりあえずハミルトニアンと思うことにして，
$$\mathcal{H}:=\sum_n \varepsilon_n c_n^\dagger c_n,$$としよう．ここで$c_n$または$c_n^\dagger$は1粒子状態$|n\rangle$を生成または消滅させる演算子である．ここではFermion演算子とする．すなわち，反交換関係：
$$[c\_n,c\_{n'}^\dagger]\_+:=c\_n c\_{n'}^\dagger + c\_{n'}^\dagger c\_n\equiv \delta\_{nn'},$$に従う．$\epsilon_n$は$|n\rangle$が属する固有エネルギである．
　一方，物性物理学での (1体) 遅延Green関数は次式のように導入される：
$$G^\mathrm{r}\_n(t):=-\frac{\mathrm{i}}{\hbar}\theta(t)\langle [c_n(t),c_n^\dagger]_+ \rangle,\tag{2}$$ここで$c\_n(t):=\mathrm{e}^{\mathrm{i}\mathcal{H} t/\hbar} c\_n \mathrm{e}^{-\mathrm{i}\mathcal{H} t/\hbar}$であり，逆温度$\beta$と化学ポテンシャル$\mu$を示す熱平衡状態における統計平均：
$$\langle\cdots\rangle:=\frac{1}{Z}\mathrm{Tr}\ \mathrm{e}^{-\beta(\mathcal{H}-\mu\mathcal{N})}\cdots,$$を定義した．また，
$$Z:=\mathrm{Tr}\ \mathrm{e}^{-\beta(\mathcal{H}-\mu\mathcal{N})},$$$$\mathcal{N}:=\sum\_n c\_n^\dagger c\_n,$$である．(1)と(2)式の関係を調べたいということである．
　さて，ハミルトニアンは既に対角化されているから，
$$c\_n(t)=\mathrm{e}^{-\mathrm{i}\varepsilon\_n t/\hbar}c\_n,$$と計算される．この結果とFermion演算子の反交換関係から
$$G^\mathrm{r}\_n(t)=-\frac{\mathrm{i}}{\hbar}\theta(t)\mathrm{e}^{-\mathrm{i}\varepsilon\_n t/\hbar},$$を得る．上式のFourier変換を求めてみよう．ただし，$t\to\infty$の振る舞いからわかるように，通常のFourier変換では収束しない．そこで，以下のように収束因子$\mathrm{e}^{\pm\delta t/\hbar}, \delta>0$を導入し，Fourier変換を$\delta$を無限小量とした佐藤超関数と見なすことにしよう：
$$G^\mathrm{r}\_n(E):=\left(\int\_{-\infty}^0\mathrm{d} t\mathrm{e}^{\mathrm{i}E t/\hbar}\mathrm{e}^{\delta t/\hbar}+\int\_{0}^\infty\mathrm{d} t\mathrm{e}^{\mathrm{i}E t/\hbar}\mathrm{e}^{-\delta t/\hbar}\right) G^\mathrm{r}\_n(t).$$これは簡単に計算できて
$$G^\mathrm{r}\_n(E)=\frac{1}{E-\varepsilon\_n+\mathrm{i}\delta},$$となる．したがって(1)と(2)式の間に次の関係を得る：
$$G^\mathrm{r}\_n(E)=\Bigl\langle n\Bigr|\frac{1}{E-\mathcal{H}+\mathrm{i}\delta}\Bigl|n \Bigr\rangle=\langle n|G(E+\mathrm{i}\delta)|n\rangle.$$
【React Native】WebViewが勝手にURLをエンコードして困ったら

# はじめに

WebViewコンポーネントに渡すURLが予約文字（「&」や「%」など）を含む場合、
**iOSのWebViewコンポーネントは自動でURLエンコードした文字に置き換える**仕様になっているようです。

ReactNativeはもちろんiOSだけでなくAndroidでも使用するので、OSによって渡されるURLが異なってしまってはまずい。対処する必要があります。



# 解決策

iOSの場合は、url文字列に対して`unescape()`をダブルで回します。

```react
// WebViewに渡したいURL
// このままだと、'%'が'%25'に変換されてしまう
const url = 'https://google.com?=%justasample/';
// iOSの場合はダブルでデコードする
const okUrl = Platform.OS === 'ios'
  ? unescape(unescape(url))
  : url;

// --------

const Component = () => (
  <WebView source={okUrl} />
);
```

# まとめ

URLを渡す前にひと手間かけることで、解決しました。
「密」のときと「密でない」ときで挙動が変わる C++ プログラム

## 実行

![mitsu2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30255/4c28f0ab-9461-fae1-e205-3e281aabd99d.gif)

## 解説

`&` の間の空白の有無によって異なる構文に解釈される。

- 密
  - `a&&b` → `a && b` → `a.operator int() && b.operator int()` → `1 && 1` → `true`
- 密でない
  - `a & & b` → `a & (&b)` → `a.operator int() & (b.operator&())` → `1 & 0` → `false`

`if (初期化; 条件)` のように書けるのは C++17 からの文法。


## ソースコード

```C++
# include <iostream>

struct X {
	int operator & () { return 0; }
	operator int () { return 1; }
};

int main()
{
	if (X a,b;a&&b)
		std::cout << "！！密！！\n";
	else
		std::cout << "密ではない\n";

	std::cout << "------------\n";

	if (X a, b; a & & b)
		std::cout << "！！密！！\n";
	else
		std::cout << "密ではない\n";
}
```
```
！！密！！
------------
密ではない
```

## 教訓

- アドレス取得演算子を安易にオーバーロードしない
- 型変換演算子に `explicit` を付け、暗黙の型変換を禁止する。
  - `explicit operator int () { return 1; }` 
- ソースコードに Social Distancing を導入しない
GoogleDriveをPCにマウント(G Suite必須)


# GoogleDriveを身近に：PCにマウントするDrive File Stream

**G Suite契約下で利用できる「GooglDriveマウントツール」の"Drive File Stream"が便利**というお話です．
　← ※もうこれだけで検索してダウンロードしてイントールできる人は読まなくて大丈夫です(^^)．
　← ※さらに，G Suiteに会社や学校が契約していない人は，先を読んでも無駄になります．
　← ※さらにWindows10環境でしか試していません．Mac OSもいけるようですがこの記事では意識していません．
　(以下，GoogleDrive = G.Drv)

## ◆はじめに:G SuiteのG.Drvは最強

　GoogleDriveは便利です．一般アカウントでは15GBまで無料です．これでも結構便利です．人にファイルを提供したりデータ共有することで，USBメモリを持ち歩かずに済みます．

それが，**G Suite**(ビジネス向けGoogle契約)に組織(会社・学校)が契約していると，**Drive容量無制限**になります．

###これすごくないですか？

他のサービスを細かく調べたわけじゃないですが，グロスで契約して一人ひとりの容量が無制限って．
(ちなみに私は2年で使用量390GBになりました)

　ただ，G.Drvのインタフェースは，直接的にデータを扱う感じではないので，隔靴掻痒の感があります．

周りを見渡しても，多くのユーザは「バックアップ」としてしか使っていないように見えます．

でもですよ．

**無限容量のディスクがPCにドライブとしてマウント**できたらどうでしょうか．

* NASのように，最強のストレージが手元にあるような扱い方ができる．
* でもクラウドだから，NASと違って遠く離れた場所に行ってもマウントできる．

こうなれば，ものすごく使いやすくなると思いませんか．

Windowsの標準エクスプローラにG.Drvを見せる技というのもあります．↓

  * [Windows10のエクスプローラーのナビゲーションにGoogleDrive同期ツールのフォルダを表示させる](https://qiita.com/MeilCli/items/e53bd75ae35fde1c5130)
ですが．

* レジストリいじったりしないといけないのでちょい壁が高い．
* 勝手にレジストリいじるのは怖いし．
* OSがメジャーなバージョンアップしたら設定が外れてしまう可能性も．

**あくまでもアプリとして扱えるマウントツール**はないのか．

で，探したらありました．

なんと**ご本家Google謹製**．

## ◆Google謹製の「ドライブファイルストリーム」

◎見つけた紹介記事です．
[【ドライブファイルストリーム】GoogleDriveのファイルをストリーミングで閲覧できるソフト \| フジモガ](https://fmoga.com/drive_file_stream)

◎ご本尊．Google謹製だし間違いないです．
[ドライブ ファイル ストリームを導入する \- G Suite 管理者 ヘルプ](https://support.google.com/a/answer/7491144?hl=ja)

このストリーム，縛りがあります．

* 上のようにG Suiteに契約している必要があります．つまり，個人で勝手に作ったアカウントではだめなのです(実際に確かめました．ダメでした)．
* またこのしくみ，ローカルにほとんどデータを残さないのが特徴です．
* ローカルのデータを明示的にコピーしない限り，「同期」はしてくれません．この辺はNASを使っている人ならおわかりでしょう．

さて，職場から離れ，VPNもしていない自宅のPCでG SuiteのG.Drvがマウントできるでしょうか．
 → 上の紹介記事の通りにやったら，すんなり，ちゃんとマウントしてくれました．(もちろん組織アカウントログインは経ます)

![ほらね．GoogleDrivがG:\に](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441159/5a862c60-caad-982b-6e84-4b53112438b1.png)

* マウントドライブはGoogleにちなんでか，**G:\ドライブ**です．
* もちろん変更可能です．
* NASと同様に通常データのように利用できます．いちいち「アップロード」という作業が不要になります．
* いままでGoogleの「バックアップと同期」を使っていましたが，G Suiteアカウントでは，もうこのアプリは不要です．
* 他の一般アカウントでは併用することにしています．

## ◆注意事項とか

* **ファイルサイズに注意：**ものすごく使いやすいマウント状態のG.Drvですが．G.Drvはあくまでもクラウドです．
* **反応速度に注意：**大きな画像や映像ファイルをPhotoshop等，大規模アプリで扱う場合，反応が遅くなったり，場合によりアクセスが途切れてアプリがフリーズするリスクがあります．
  * そういう時は素直に，そのファイル(と必要なファイル)だけ一旦，ローカルディスクにコピーして編集し，終わったらG:ドライブに上書きコピーするようにしたほうがいいでしょう．
* **アクセス量に注意：**当然ですが，G.Drvとのアクセスがかなり増えますので，通信環境によっては使いすぎに注意が必要ですね．

### ◎おまけ
この利用方法だと，**バックアップを逆に発想**できます．つまり，

  * G:\ドライブをメインのストレージとして利用
  * G.Drvデータの「バックアップとして」，PCの外部ディスクやNAS等に，定期的にコピーをとる
    *  → 「**最新データはG.Drvにある**」状況を作れます．
  * もしG.Drvに障害が起きて読めなくなっても，ローカルに最後のバックアップはあるわけです．

以上です．楽しいGoogle生活を．
Ubuntuで誤ってレポジトリを作成したらsources.listから直接編集できる

##環境

Windows10home
VirtualBox上のUbuntu18.04

##エラーの状況
Docker導入の際に誤って何度もターミナル上で`add-apt-repository`を実行し、その内容が間違っていたため`apt`するだけでエラーが起きる状態に。

##解決法

`sources.list`を直接編集すれば解決。当時は標準のエディタで行った。権限があるので、vimするときだけroot権限で行えばいい。
GitHub の "Allow edits from maintainers" 機能は Organization アカウントからのプルリクエストでは使えない

## TL;DR

GitHub の "Allow edits from maintainers" 機能は Organization アカウントに fork したリポジトリからのプルリクエストでは使えず、個人アカウントでの利用に限定されているようです。

プルリクエストの右サイドーの1番下（Notifications の下）に表示されるものです。
![スクリーンショット 2020-04-15 21.32.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49924/4a79b7d9-1d57-cd1e-f265-4253ccd7c8bb.png)

## 背景

ある OSS に改善点を見つけたので、自分が所属する Organization アカウントにリポジトリを fork して修正した後にプルリクエスト（[spiffe/spire#1468](https://github.com/spiffe/spire/pull/1468)）を作成しました。OSS のメンテナーからレビューを受けたところ「"Allow edits from maintainers" にチェックしてもらえると助かる」とコメントされたのですが、対応しようにも該当のチェックボックスが見つかりませんでした。

"Allow edits from maintainers" 機能は、プルリクエストに紐付いているブランチ（fork したリポジトリのブランチ）に対して、本家リポジトリのメンテナーが Commit することを許可するかを選択できる機能です。自分のケースでは、プルリクエストをマージする前にメンテナーが最新の master ブランチを取り込みたいという要望からでした。詳細は [Allowing changes to a pull request branch created from a fork - GitHub Help](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/allowing-changes-to-a-pull-request-branch-created-from-a-fork) を参照してください。

気になり調べたところ、過去に個人アカウントに fork して作成したプルリクエストには "Allow edits from maintainers" チェックボックスが表示されていました。当初は Organization アカウント上で自分に紐付いた権限が影響していると思ったのですが、権限を更新しても状況は変わらずだったので GitHub サポートに問い合わせることにしました。

## GitHub サポートからの回答

自分の質問:

> I forked a repository into the company organization (NOT user) and created a PR. I am 'Owner' in the company organization, But The "Allow edits from maintainers" checkbox is not displayed on PR. Why?

GitHub サポートからの回答:

> That is the expected behavior in this case. When the source repository of a pull request, belongs to an organization, we disable this option due to complexity around enforcing write permissions for that organization and the target repository's organization.

Organization アカウントに fork したものだと権限管理が複雑になるためこの機能は無効化されているとのことでした。

おしまい。
Knowledge を Heroku にデプロイする

herokuへの登録、CLIツールの導入が済んでいる前提です
まだの方は[こちら](https://devcenter.heroku.com/articles/heroku-cli)

## 1. Heroku アプリの作成
```bash

heroku create app-name
```
`app-name`は好きな名前にしてください
リンクになります
## 2. Knowledge のダウンロード
[knowledgeのgithub](https://github.com/support-project/knowledge/releases)から直接ダウンロードするか、以下のコマンドを実行

```bash
wget https://github.com/support-project/knowledge/releases/download/vx.x.x/knowledge.war
```
`x.x.x`には最新のバージョンをいれます

## 3.Heroku にプラグイン導入
warファイルをデプロイするためのプラグインを導入します
```bash
heroku plugins:install java
```

## 4.Heroku にデプロイ
```
heroku war:deploy <path_to_war_file> -a app-name
```
`<path_to_war_file>`にはダウンロードしたwarファイルのパスを指定してください
wgetコマンドでダウンロードした場合、カレントディレクトリにあるので`knowledge.war`と入力すれば動作します

url等の情報が以下のコマンドでわかります

```
heroku apps:info app-name
```
`Web URL:` にアクセスするとknowledgeにアクセスできます

## 5. Herokuにアドオン追加
Postgresqlを使うためのアドオンを追加します

```
heroku addons:create heroku-postgresql -a app-name
```

## 6. Postgresql へのアクセスURLの取得
knowledgeに設定するためのDB設定を取得します

```
heroku run echo \$JDBC_DATABASE_URL -a app-name
```

## 7. Knowledgeで管理ユーザーの作成
右上のユーザーマークからサインイン
ID: admin
Password: admin123

管理者としてサインインできたら、
右上ユーザーアイコン → システム設定 → 上から三つ目の「ユーザー管理」をクリック

追加ボタンを押して自分でIDとPasswordを設定
権限の`Administrator`にチェックをいれます

登録ができたら一度サインアウトし、自分が設定したIDとPasswordでサインイン
先程と同様にユーザー管理画面へ行き、初期ユーザー(ID: admin)を削除

削除しないと初期ID,Passwordでログインできてしまうため必ず削除しましょう

## 8. Postgresql への接続
先程作った管理者でサインイン
システム設定 → 下から四つ目の「データベースの接続先変更」をクリック

`URL:` に手順6のコマンドで表示されるURLをすべてコピー(`jdbc:postgresql://`も含めその先全て)

`ユーザー:` には上記URLの`?user=`以降`&password`以前までの文字列をコピー

`パスワード:`には上記URLの`&password=`以降'&sslmode'以前までの文字列をコピー

`スキーム:`には上記URLの`:5432/`以降`?user`以前までの文字列をコピー

`最大接続`と`自動コミット`はそのまま(それぞれ0,false)

「保存」をクリックして変更を保存

「保存」ボタンの横に「組み込みDBで保存したデータをカスタム設定のDBにコピー」ボタンが現れるので、それをクリック

## 終わりに

以上でセットアップが完了しました
無料枠でもある程度は使えますが、記事やユーザーが増えてくるとDBをアップグレードする必要が出てくるかもしれません
ターミナルでPHPコードを実行する

PHPは膨大な関数が含まれていますが、関数の使い方・挙動を簡単に確認したい場合がよくあります。

その時、PHPファイルを作成〜Webサーバを起動〜ブラウザを起動…といった手順を踏まずとも、お手持ちのターミナルからPHPコマンドをオプションを指定して実行することで、対話的シェルを起動してPHPのコードを実行することができます。(ただし環境上のPHPが--with-readlineを指定してコンパイルされている場合に限ります。)

```
$ php -a
```

あとはコードを打ち込むだけ。

```
Interactive shell

php > $ary = array('aaa', 'bbb', 'ccc');
php > foreach($ary as $row) {
php {   echo $row;
php { }
aaabbbccc
```

PHPマニュアルに掲載されてるコードもこの通り。

https://www.php.net/manual/ja/function.array-merge.php

```
php > $array1 = array("color" => "red", 2, 4);
php > $array2 = array("a", "b", "color" => "green", "shape" => "trapezoid", 4);
php > $result = array_merge($array1, $array2);
php > print_r($result);
Array
(
    [color] => green
    [0] => 2
    [1] => 4
    [2] => a
    [3] => b
    [shape] => trapezoid
    [4] => 4
)
```

便利ですね。
Pythonのクラスの"__init__"メソッドと"self"引数の疑問をすっきりさせたい。

# 本記事の要旨
本記事は、Pythonのクラス定義に現れる"def \_\_init\_\_(self):"をとりあえず暗記しておまじないのように書いている方のために、なるべく直感的に納得できるようにするために書きました。

# Pythonのクラス定義
Pythonはクラス定義の際に、以下のような形式を取ります。

```python
class demo_class():
    def __init__(self):
        pass
```
これが(pythonにしては)直感的ではないということで、自分以外にも初学者の方で苦労されている方は多くいられるかと思います。



## 参考書(入門Python3)などの説明
> \_\_init\_\_()は、クラス定義から個々のオブジェクトを作るときにそれを初期化するメソッドにつけられた特殊名である。

まあ、それだけ言われてもよくわかりません。しかしこの入門Python3は続いてPythonの処理系が何をするかを説明してくれていてそれがわかりやすかったので、それをまとめて、更に図を加えて説明します。

より説明しやすくするため、クラスのメンバ変数nameを追加し、"hoge"を追加する要素をくわえます。

```python3

class demo_class():
    def __init__(self,name):
        self.name = name

a = demo_class("hoge")
print("a: ",a)
print("a.name: ",a.name)


[出力結果]

a:  <__main__.demo_class object at 0x1023b6668>
a.name:  hoge

```
## Pythonのクラスがどんな動きをするかのイメージ

pythonは関数を実行するように、クラスをインスタンス化することができます。
インスタンスとはオブジェクトの実体であり、インスタンス化は大雑把に言えばメモリ上をプログラムが実行可能な状態にすることを表します。

実際以下の行ではpythonのインタプリタはどこから実行するでしょうか。

```python
a = demo_class("hoge")
```

1. demo_classクラスの定義を参照する
2. demo_classクラスの空のオブジェクトを生成する
3. 引数をもとに、demo_classクラスのオブジェクトの初期化をする
4. メンバ変数nameにstringの"hoge"を代入する
5. オブジェクトにaという名をつける

以上のような順番で処理されていきます。
図で表すと以下のような感じ
![obj.dot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152284/aecea43e-3565-cca0-1779-46e63a3058bd.png)

![obj.dot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152284/10fe9c68-60bc-3b2f-6022-637b89751563.png)

![obj.dot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152284/4ccae95c-aca7-cf48-3d27-df6a163b021b.png)



## 図の説明
まずはじめに、クラスの定義より、空のクラスオブジェクトを生成します

![obj.dot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152284/aecea43e-3565-cca0-1779-46e63a3058bd.png)


生成されたクラスオブジェクトは、自らを初期化する(nameメンバに"hoge"を追加)ために、先程のオブジェクトへ手を加えなくてはいけません。このとき、pythonインタプリタからすれば、どのオブジェクトへどんな初期化をすればいいかわかりませんし、変数への参照方法もわかりません。

\_\_init\_\_メソッドは初期化をするための特殊メソッドです。

つまり、**Pythonインタプリタにどのオブジェクトをどのように初期化してほしいか明示するために**初期化をするための特殊メソッド\_\_init\_\_メソッドに**先程生成した空のオブジェクトをself引数として渡す**のです。

![obj.dot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152284/10fe9c68-60bc-3b2f-6022-637b89751563.png)

これにより、自分で作ったオブジェクトを同定することができるようになり、クラスごとに余計な名前を別々に作る必要もなくなるわけです。


ここで問題になるのが、"self.name"です。

```python

def __init__(self,name):
    self.name = name
```

この左辺の"self.name"は**メンバ変数を定義しますよ**ということで、**オブジェクトにname変数を作成して、引数の"hoge"が入ったnameを代入する**ということです。
つまり**1行目のnameと2行目右辺のnameは表すものが違う**わけです。ここが一緒だから初見ではよくわからなくなるのだと思います。

なぜ"self."という前提がつくのかというと、そうすることでインタプリタがどのオブジェクトを参照して処理を行えばいいか明示的になるからです。(たぶん)

(pythonでは"."のあとに続くものをすべて属性と呼びます。)


![obj.dot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152284/4ccae95c-aca7-cf48-3d27-df6a163b021b.png)

# 注意
本稿では、"〇〇するために"や、"〇〇するためである"というように断定し、限定的な目的のための手段として説明する部分が多々ありますが、これはイメージを掴むことを第一目標にするために取った手法であり、長い学習スパンで鑑みるといささか問題があります。



# 参考
入門Python3 
[公式ドキュメント](https://docs.python.org/ja/3/tutorial/classes.html)
DoS攻撃いろいろ

#概要
サーバーに負荷をかけて妨害をするDoS攻撃について、どのような手法があるのかを調べました。

#DoS攻撃とは
DoS（Denial of Service）攻撃とは、サイバーの攻撃の1つであり、攻撃目標であるサイトやサーバに対して大量のデータを送り付けることで行われる攻撃。
受信側はトラフィックが異常に増大するため、負荷に耐えられなくなったサーバ等が落ちてしまいサービスを継続できなくなる。

#DoS攻撃の種類
###「フラッド型」
大量のデータを送り付けて、サービスを継続できなくする。

###「脆弱性型」
システムの欠陥を利用して、サービスを継続できなくする

#具体的な攻撃方法
###ICMPの脆弱性をつく「PoD(Ping of Death)攻撃」
ネットワークの疎通確認で使用されるプロトコル「ICMP」の脆弱性を利用する手法。
通常ICMPの通信はごく小さいパケットで行われるが、この攻撃では巨大なICMPパケットを送り付ける。
そうすることで、ICMPで巨大なパケットを受け取ることを想定していないシステムが動作不能になってしまう。

###新たな脆弱性を利用する「ゼロデイ攻撃」
未知の脆弱性や、判明してすぐの脆弱性を利用する手法。
ウイルスソフト等で対応が間に合わないうちに攻撃する。

###TCPのハンドシェークを悪用する
TCPで通信を確立する際に使用する、3ウェイハンドシェークの仕組みを悪用する手法。
攻撃者は大量のSYNパケットを送るが、あえて最後の返答のACKパケットを送らない。
そうすることで、サーバー側の処理待ちを増やし、メモリを大量に消費させる。

####※「3ウェイハンドシェーク」
「データを送るよ」「OK。こっちも送るよ」「OK」の3回のやり取りを経て接続を確立するのが「3ウェイハンドシェイク」です。
　→以下のページがわかりやすかったです。
　　https://wa3.i-3-i.info/word15428.html

#まとめ
・DoS攻撃には大きく「脆弱性をつく方法」と「大量のパケットを送りつける方法」の二種類がある。
・脆弱性をつく方法は日々増えているため、ウイルスソフト等を最新にしておくことが大切。

#参考サイト
以下のページを参考にさせていただきました。
https://cybersecurity-jp.com/security-measures/18262
laravelで、「シンボリックリンクを貼っても画像が表示されない」を解決する

[LaravelをAWSのEC2へデプロイする手順](https://qiita.com/masataka715/items/6e46f1f5e53bdff6cd3d)を参考にさせていただき、EC2の中に作成中のLaravelアプリケーションをデプロイしました。
基本的なCRUD処理ができる掲示板アプリです。

ローカル環境上では、プロフィール画像を指定しなければ、デフォルトの画像が割り当てられるようにしていました。
EC２にデプロイした後に、同じような形でデフォルト画像を表示しようと思ったのですが、表示されませんでした。
一度、public/storageを削除し、php artisan storage:link として、再度シンボリックリンクを貼ってもうまくいきませんでした。
現在、storage/public配下に、noimage.pngが存在している状態です。


Laravelのバージョンは、 5.8.37です。



##シンボリックリンクとは??
ショートカットのようなものです。
今回の例で言うと、laravelアプリの、トップのpublicが、ウェブ上に公開されるディレクトリとなります。ブラウザからサーバー上のファイルにアクセスするときは、 /storage/app/publicの中にあるため、画像を表示することができません。そこで、public/storage と、storage/app/public にリンクを持たせることにより、
**public/storageにアクセスする＝storage/app/publicにアクセスする**、ということを実現できます。
（間違っていたらすみません）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499375/c510757a-8e94-3cd0-be98-a1a944023613.png)

**ローカルではこれで行けたが、EC2上では表示できない....**
こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499375/786e1cf0-7b1f-6249-f391-787e016a9c91.png)

ちゃんとシンボリックリンク貼ってるのに....

原因は、画像の閲覧権限が無いことでした。

```
アプリのトップ]$ ls -l public/storage/
-rw------- 1 ec2-user ec2-user 2510 4月 14 06:28 noimage.png
```

このimage.pngの権限が600だったので、「所有者」のみ読み書き可能と言う状態でした。

```
$ chmod 664 public/storage/noimage.png
```
で、「所有グループ」に読み書き権限、「その他」に読み取り権限を与えることにより....
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499375/df91de94-25c7-11f0-3fc9-4064c6eb3fb5.png)

表示できました。

シンボリックリンクを貼っても画像が表示されない方は、権限周りを一度見てみると良いかもです。
Railsチュートリアル3章

#3.2.1　演習
######1.　Fooというコントローラを生成し、その中にbarとbazアクションを追加してみてください。

```
$ rails g controller Foo bar baz
```
<br>

######2.　コラム 3.1で紹介したテクニックを駆使して、Fooコントローラとそれに関連するアクションを削除してみてください。

```
$ rails destroy controller Foo bar baz
```
<br>
#3.4.3　演習
######1.　サンプルアプリケーションにContact (問い合わせ先) ページを作成してください。

下記コードを追記しました。テストも問題なくクリアしています。

```static_pages_controller_test.rb
require 'test_helper'
class StaticPagesControllerTest < ActionDispatch::IntegrationTest

（中略）

  test "should get contact" do
    get static_pages_contact_url
    assert_response :success
    assert_select "title", "Contact | #{@base_title}"
  end
end
```
```static_pages_controller.rb
class StaticPagesController < ApplicationController

（中略）

  def contact
  end
end
```
```contact.html.erb
<% provide(:title, "Contact") %>
<h1>Contact</h1>
<p>
  Contact the Ruby on Rails Tutorial about the sample app at the
  <a href="https://railstutorial.jp/contact">contact page</a>.
</p>
```
```routes.rb
Rails.application.routes.draw do
  get  'static_pages/home'
  get  'static_pages/help'
  get  'static_pages/about'
  get 'static_pages/contact' #この行を追記
end

```

#3.4.4　演習
######1.　〜FILL_INと記された部分を置き換えて、rootルーティングのテストを書いてみてください。
```static_pages_controller_test.rb
require 'test_helper'
class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  
  def setup
    @base_title = "Ruby on Rails Tutorial Sample App"
  end
  
  test "should get root" do
    get root_url
    assert_response :success
  end

（中略)

end
```

######2.　〜rootルーティングをコメントアウトして見て、 red になるかどうか確かめてみましょう〜（中略）〜テストが green になることを確認してみましょう。

無事確認できた。

#今回調べた単語たち
######プレースホルダ
>【 placeholder 】 
> 実際の内容を後から挿入するために、とりあえず仮に確保した場所のこと。また、そのことを示す標識などのこと。

######テストスイート
>【Test Suite】
>ソフトウェアテストの目的や対象ごとに複数のテストケースをまとめたもの。

######テスト駆動開発
>【test-driven development; TDD】
>プログラム開発手法の一種で、プログラムに必要な各機能について、最初にテストを書き（これをテストファーストと言う）、そのテストが動作する必要最低限な実装をとりあえず行った後、コードを洗練させる、という短い工程を繰り返すスタイル。

######REFACTOR
>リファクタリング (refactoring)
>プログラムの動きを変えないまま、ソースコード（人間語で書いたプログラムの元ネタ）を書き換えること。
カラースキームの調整をちょっとだけお手伝いするプラグインを作った話

[この話の次のエントリ](https://qiita.com/astrorobot110/items/db32dea7a89370f4546f)

先日、某vimmerが集うslackのチャンネルで、 `:highlight` コマンド中のcterm→#RGBの変換が欲しいとぼやいたら、「まぁ欲しいよね」「rgbからctermも欲しいよね」 **「vital化してほしいよね」**[^1]みたいな話になりまして…いや、流石にvitalのプロジェクトにプルリクとかおこがましいレベルのスクリプトキディなのですが、作ってみたかったので作りました。
**他の人の手でvital化されつつあるんですけど。**

## astrorobot110/technicolor

<https://github.com/astrorobot110/technicolor>

## ウラ話

### gitリポジトリの方で軽く触れたテンプレートの話

ネットは広大なのでctermパレットに対応するRGB値とか、なんならその計算方法とかぽこじゃか出てくるのでそれには困らないんです。ただ、それをどう現在のバッファに書き込むか…となると何を想定すべきか皆目見当がつかなかったんです。
例えば…

- コマンド名は `hi` か `highlight` か？
- 引数間の空白は `<space>` か `<Tab>` か？
- じゃあそもそも `&tabstop` はいくつか？
- 引数の順番は？
- そもそも全グループの記述に同じ順番使ってるの？

…を想定して、ある程度うまく行く用にしなければなりません。
なんとかしました。

そのまんまソースに書いてある話の書き直しなのですが、まず現在行のカーソル位置から上に検索して直近の空行の下にあるハイライトコマンドの構造を確認します…めっちゃ分かりづらい。
要はvimで言うところのカーソルがあるパラグラフの一番最初にある `highlight` コマンドの行をテンプレートとして採用します。もしくは、これがテンプレートとして機能しない場合…要はバックグラウンドの記述がないので空白にせざるを得ないような場合の為に、テンプレートとして採用するコメント行を書いておけるようにしてあります。

これがない場合は、Normalグループの記述を採用します。

それもない場合は、テンプレートの様式を定義できるバッファローカルな辞書型変数を参照しに行きます。

それもなければ、technicolorのスクリプト内で定義しているテンプレートを採用します。

…という手順でテンプレートを解析しておき、現在行の引数をすべて変数に収めてから変更箇所を置換して、テンプレートに合わせて現在行を再生成してから置き換えています。

### バグの話

ぶっちゃけ、**カラースキームを作りたくて作ったわけではないので**、実際に使っていません。というわけでバグ取りが進んでいないので…すいません手伝ってもらえると幸いです。

[^1]: すいません文面そのまんまじゃないんですけど勝手に引用してます。というか文面そのまんまだと誰が誰だか…
シンプルなImageEffectその２。モノクロ。

twitterでアップしたモノクロImageEffectのシェーダコードを貼っておきます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ImageEffect基礎。輝度抽出でモノクロ化。<br>色指定できるようにしておくとセピア化も出来て汎用性上がるよね。 <a href="https://t.co/vkBo9NmtPg">pic.twitter.com/vkBo9NmtPg</a></p>&mdash; MIYAKE (@ScreenPocket) <a href="https://twitter.com/ScreenPocket/status/1250077048304832515?ref_src=twsrc%5Etfw">April 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

輝度抽出としてはRGBのYCbCr変換のY値を使うのが定石ですけど、
Unityは標準でLuminance()という関数がすでに用意されているのでそれを使います。
https://docs.unity3d.com/ja/2018.4/Manual/SL-BuiltinFunctions.html

```glsl:Monochrome.shader
Shader "ScreenPocket/ImageEffect/Monochrome"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color ( "MainColor", Color ) = (1,1,1,1)
    }
    
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            sampler2D _MainTex;
            fixed4 _Color;

            fixed4 frag (v2f i) : SV_Target
            {
                half4 col = tex2D( _MainTex, i.uv );
                col.rgb = Luminance(col.rgb) * _Color;
                return col;
            }
            ENDCG
        }
    }
}
```

ついでに色も乗算。後でGB風ImageEffectシェーダを作る時に使うので。
Pythonにおけるクラスの記法

#クラスの記法
```
class (クラス名):
    (スイート)
```
クラスは上記のように記述します。
クラス名とはその名の通りクラスの名前で、スイートとは単純文やメソッドなどの処理を記述する部分です。
メソッドは関数とほとんど同じ記法で記述できるものですが、関数とは違って一般にクラスの内部で記述されます（これ以上はわからない）。

##実際にクラスを作ってみる
```Python
class Ball:
    def __init__(self):
        print('クラスを作成')
```
このようにして作成します。
selfはインスタンス変数と呼ばれる、そのクラス(オブジェクト)に属する変数を定義する際に使用します。
それではインスタンス変数を定義してみます。

```Python
class Ball:
    def __init__(self, c, s):
        self.color = c
        self.size = s
        print('作成')
```

インスタンス変数は

```
self.(インスタンス変数名)
```

のように定義します。
また、インスタンス変数は一般に`__init__`メソッドの中に定義するようです。

それではオブジェクトを作成してみます。

````Python
ball = Ball('RED', 20)
print(ball.color)
print(ball.size)

>>作成
>>RED
>>20
```

ここではballクラスにprintが含まれているので「作成」が表示されます。
このようなクラスを用いてコードを再利用しながら記述量を減らしていくような手法をオブジェクト指向と呼びます(間違っている可能性大)。

誤りを見つけた方はご指摘いただけますと幸いです。
【Rails DBエラー】SQLite3::SQLException: table "✖︎✖︎✖︎" already existsが出るときの解決

# 【Rails DBエラー】SQLite3::SQLException: table "✖︎✖︎✖︎" already existsが出るときの解決

## なぜこのエラーが出るか
このエラーはすでに作成されているテーブルが再度作成されているときに出現するエラーです。
モデルを作った後に、カラム名とかを間違えて「rails db:rollback」とかz「rails destroy モデル名」とかして、また「rails db:migrate」をした時におきますね。
↓こんなエラー

```:terminal
> rails db:migrate
== 20201111115213 CreateComments: migrating ===================================
-- create_table(:comments)
rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:

Caused by:
SQLite3::SQLException: table "✖︎✖︎✖︎✖︎✖︎✖︎" already exists
```

## どう解決するか
いたってシンプルで、すでに作られているテーブルを一回削除すれば良いです。
なので、下で紹介する方法は、「SQLiteにて既存のテーブルを削除する方法」になります。

```:terminal
> rails db

sqlite> .tables
table-example1 table-example2 table-example3 table-example4 

sqlite> drop table 既存のテーブルの名前;
sqlite> .quit

# この後、またちゃんとマイグレーションすれば好きです
> rails db:migrate
# これであなたのエラー解決できれば嬉しいです！
```

### 追記/RailsでのSQlite、Mysqlの操作コマンド集
SQLiteへの接続

```:terminal
sqlite> rails db
```

SQLiteの接続を切る

```:terminal
sqlite> .quit
それか
Ctrl+D
```

テーブル一覧

```:terminal
sqlite> .table
```

Mysqlへの接続

```:terminal
Myslq> mysql -u root -p PASSWORD;
```

Mysqlデータベースの確認

```:terminal
Myslq> show databeses;
```

Mysqlテーブルの確認

```:terminal
Myslq> show tables;
```
【Java】FizzBuzzを出力するときに気をつけるべきこと

#FizzBuzzを出力するときに気をつけるべきこと#
##FizzBuzz問題とは##
最初のプレイヤーは「1」、次のプレイヤーは前のプレイヤーの次の数字を言うゲーム

ただし・・・

- 3で割り切れる場合は「Fizz」
- 5で割り切れる場合は「Buzz」
- 両方(すなわち15)で割り切れる場合は「Fizz Buzz」

というルールがあります

FizzBuzz問題は比較的かんたんなプログラムで出力できることから、
初心者プログラマが乗り越えるべき壁となっています
##ひな型になるfor文を書きます##
```java
for(int i = 1;i < 100;i++){
    System.out.println(i);
  }
```
##上記の意味は？##
- 整数型(Integer)を宣言
- 添字「i」を1として初期化
- iを99(100含まず)までインクリメント(増分)し、
- インクリメントされた添字iを改行付きで出力する


```
1
2
3
(中略)
97
98
99
```
99まで出力されました
##上のコードに手を加える##
文字列「はFizzです」を連結する

```java
for(int i = 1;i < 100;i++){
　System.out.println(i + "はFizzです");
}	
```
###結果・・・###

```
1はFizzです
2はFizzです
3はFizzです
4はFizzです
5はFizzです
(中略)
15はFizzです
(中略)
96はFizzです
97はFizzです
98はFizzです
99はFizzです
```
1も3も15もFizzとなってしまいました
これは「3の倍数なら」「5の倍数なら」「3かつ5の倍数なら」「そうでないなら」という条件分岐をしていないからです
##3の倍数に「Fizz」と出力する##
3の倍数なら「Fizz」、そうでなければ数字を出力するように書き加えます

```java
for(int i = 1;i < 100;i++){
 if(i % 3 == 0){
   System.out.println(i + "はFizzです");
 }
 else{
   System.out.println(i);
 }
}
```
「i % 3 == 0」は
iを3で割った余りが0
すなわち3の倍数であることを意味します
###結果###

```
1
2
3はFizzです
4
5
6はFizzです
7
8
9はFizzです
10
(中略)
15はFizzです
16
17
18はFizzです
(中略)
93はFizzです
94
95
96はFizzです
97
98
99はFizzです
```

##3の倍数、「Fizz」と5の倍数に「Buzz」と出力する##
3の倍数なら「Fizz」5の倍数なら「Buzz」、そうでなければ数字を出力するように書き加えます

```java
for(int i = 1;i < 100;i++){
 if(i % 3 == 0){
   System.out.println(i + "はFizzです");
 }
 else if(i % 5 == 0){
   System.out.println(i + "はBuzzです");
 }
 else{
   System.out.println(i);
 }
}
```
###結果###
```
1
2
3はFizzです
4
5はBuzzです
6はFizzです
7
8
9はFizzです
10はBuzzです
11
12はFizzです
13
14
15はFizzです
16
```
###おや！？###
15がFizzになってる！
これは上の処理で条件が満たされ、下の処理がスキップされるためです
このため、「より狭い」条件から順に書いていくことが必要です

```java
 if(i % 3 == 0){
   System.out.println(i + "はFizzです");   //ココで条件が満たされ、下の処理がスキップされる
 }
 else if(i % 5 == 0){
   System.out.println(i + "はBuzzです");
```
##3の倍数かつ5の倍数##
3の倍数なら「Fizz」5の倍数なら「Buzz」、そうでなければ数字を出力するように書き加えます
3の倍数と同時に5の倍数を満たすために、条件式を「&&」でつなげます

```java
i % 3 == 0 && i % 5 == 0
```
##完成！##
```java
for(int i = 1;i < 100;i++){
    if(i % 3 == 0 && i % 5 == 0){
        System.out.println(i + "はFizz Buzzです");
     }
     else if(i % 3 == 0){
        System.out.println(i + "はFizzです");
     }
     else if(i % 5 == 0){
        System.out.println(i + "はBuzzです");
     }
     else{
        System.out.println(i);
     }
}
```

##結果##

```
1
2
3はFizzです
4
5はBuzzです
6はFizzです
7
8
9はFizzです
10はBuzzです
11
12はFizzです
13
14
15はFizz Buzzです
```
ちゃんと15がFizz Buzzと出力されています
いえい！

##ちなみに##
広い条件から書いていくと・・・

```java
 for(int i = 1;i < 100;i++){
        if(i % 3 == 0){
        System.out.println(i + "はFizzです");
        }
        else if(i % 5 == 0){
            System.out.println(i + "はBuzzです");
         }
         else if(i % 3 == 0 && i % 5 == 0){
             System.out.println(i + "はFizz Buzzです");
         }
         else{
            System.out.println(i);
        }
    }
```
##結果##
```
1
2
3はFizzです
4
5はBuzzです
6はFizzです
7
8
9はFizzです
10はBuzzです
11
12はFizzです
13
14
15はFizzです
```
やはり「Fizz」が優先され、おかしなことになるので注意です
Vue+Ts環境に入れたライブラリがTsに対応していないのにvueのprototypeを汚染していた時

# Vue+Ts環境に入れたライブラリがTsに対応していないのにvueのprototypeを汚染していた時
## 今回のケース
- vue+typescript(vue-property-decorator)の環境
- ライブラリをいれて`Vue.use`的な感じで読み込んだ
- ライブラリを入れたところ、`this.$~~~`みたいな感じでグローバルなVueインスタンスのprototypeに関数などが入っている
- なのにTypescript対応をしていない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253700/47ef7156-aa07-a1be-59e1-6b7df85c99d6.png)
- こんな感じのエラーが出る（これはVSCodeのVue用拡張機能のエラー）

## なぜこうなるのか
`.vue`ファイル内で良く使われる`this`は基本的にVueのインスタンスを指しています

上の画像では`Home`というVueコンポーネントでの利用ですが、そのコンポーネント内では`$auth`が定義されていません。実態は`Home`クラスが継承している`Vue`に対して外部のライブラリが注入されています。

## ではどうするのか
Typescriptを使っているので当然ですが型を定義しましょう。
面倒であれば`any`型でも定義すればしっかりとanyと解釈してエラーが消えます。

`src`配下に型定義ファイルを作成します。名前は適当につけましょう `auth.d.ts` とか

```typescript:auth.d.ts
import Vue from 'vue'

// 2. 拡張したい型が含まれるファイルを指定してください
//    Vue のコンストラクタの型は types/vue.d.ts に入っています
declare module 'vue/types/vue' {
  // 3. 拡張した Vue を定義します
  interface Vue {
    $auth: string
  }
}
```

実はこの辺り、[公式ドキュメント](https://jp.vuejs.org/v2/guide/typescript.html#%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A7%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E5%9E%8B%E6%8B%A1%E5%BC%B5)にも書いてあります。

もちろんしっかりと型定義すれば適切な推論を受けることができるのでみなさん是非、型定義で快適な開発体験を謳歌してください。

以上になります。指摘等あれば気軽にコメントしてください
Cloud-Based Applications: Businesses Must Opt For It For Staying Updated

Cloud technology has much to offer to businesses when they consider it for developing an advanced application for their business. The affordable cost of development and many other development-related advantages have made cloud technology the best choice for developing native apps for your business.

## Know Why You Must Opt For Cloud-Native Application For Your Business
More than 15% of the business workload relies on cloud-native ecosystems in 2017. This technology doesn't exist during the past days, but the advent of it has gained huge popularity among the developers and businesses in a very short time span.

The same report predicted that more than 32% of businesses would be using this advanced technology by the end of 2020. Another report by IBM Cloud-native development shows that more than 55% of apps that will be developed in the future will be developed using a cloud-native approach. Let's justify the reason why you must opt for a cloud-native app solution for your business.

## Monitoring And Management Tools
Auditing and monitoring of cloud-native apps have become much easier due to the availability of various tools and technology. Developers can opt for any of the platforms such as Datadog, AppDynamic, Newrelic, and many more to monitor containers and microservices. They can use Zipkin and Open Tracing for debugging the application they have developed, whereas they can use Splunk, fluent, Elasticsearch, and many more for log aggregation, these tools are preferred as the best solution when it comes to developing the application.

## Auto Scaling
Most of the business entrepreneurs are opting for cloud-native solutions for developing advanced app solutions such as [package delivery tracking software](https://www.appemporio.com/delivery-tracking-system/) or any other type of advanced solution for their business. Its auto-scaling feature allows developers to develop the app very easily and speedily than ever before. They can implement the auto-scaling feature while writing the code for their specific parts of their system. Those parts which they develop using this advanced feature can easily be scale-out, they don't require any manual intervention when it comes to traffic spikes.

## Reliable Systems
The utilization of microservice and Kubernetes architecture enables developers to craft excellent performing app solutions that also without any error. This type of application has the ability to heal itself while finding any type of issue. Also, this type of app moves to new data when it comes to processing, this advanced ability helps to manage outages and reduces the chance of failure.

## Ending Note
The majority of developers and businesses are stepping ahead to develop a cloud-native app solution. Thus developers need to make sure that they learn this advanced technology, this can help them to develop an app solution that also without investing much penny on the same. Businesses must also understand the importance of the same and must develop advanced applications using this advanced technology with the help of developers or mobile app development companies.
個人アプリ（link_to　使い方）

```erb
<%= link_to new_block_path do %>
    <span class="blinking">press a to start</span>
<% end %>
```
do〜end を忘れていてページの遷移ができなかった。


`GET http://localhost:3000/block/css/css.css net::ERR_ABORTED 404 (Not Found)`
記述変更
変更後 `link href="/assets/css.css/"`  　　変更前 `href="css/css.css"`
でエラーは解決

`GET http://localhost:3000/block.js net::ERR_ABORTED 404 (Not Found)`
記述変更
変更後 `script type="text/javascript" src="/assets/block.js"></script`
変更前 `src="block.js"`
でエラーは解決


エラーは解決したが、ゲーム部分の表示がされない
swift コメントアウト

##「時間ないからって端折るな」コメントアウト備忘録

```swift

  /// - Author: 作成者名
  /// - Authors:作成者名複数
  /// - Bug:
  /// - Complexity: 複雑さ
  /// - Copyright:
  /// - Date: 作成日
  /// - important: 知っておいて欲しい事
  /// - Precondition: 前提条件
  /// - Postcondition:　事後条件
  /// - Requires: Preconditionよりこっちの方がいいかも
  /// - Note:
  /// - Todo:
  /// - Version:
  /// - Warning:
  /// - Parameters:
  /// -    familyName:姓
  /// -    firstName:名
  /// - Returns:名字 (戻り値の説明)
  func sample(familyName: String, firstName: String) -> String{
    return familyName + firstName
  }
```

こんな感じで書いておいて。とお願いする時に必要だったので作成。
間違いあったらご指摘いただけると幸いです。
まあ結局書かない現場の方が多いんだけどね。w
MacにReact Nativeの環境を構築する手順


`2020-04-15`時点の手順です。

# `Xcode`をインストールする

`App Store`より検索してインストールする。

# `Xcode`のライセンスをAcceptする

``` bash
$ sudo xcodebuild -license accept
```

# `Android Studio`をインストールする
[Android Studio](https://developer.android.com/studio?hl=ja) からダウンロードしてインストールする。

# `Android SDK`をインストールする

`Android Studio`を起動する。起動時に自動でインストールされる。

# `Node.js`をインストールする

ここでは`nvm`を利用してインストールする。

## `nvm`のインストール

``` bash
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
```

## ログイン時に`nvm`が利用できるように設定する

macOS `Catalina`の人は`~/.zshrc`に、それ以前の人は`~/.bash_profile`に、`nvm`インストール時に表示される下記を記載する。

``` bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
```

上記ファイルが無ければ作成する。既にファイルがあれば勝手に追加されているかも。
記載後にシェルを再起動する。

## `Node.js`をインストールする
ここでは`v10.13.0`を入れる。

``` bash
$ nvm intall v10.13.0
```

# `Yarn`をインストールする

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

# `CocoaPods`をインストールする
ここでは`HomeBrew`を利用して入れる。

## `HomeBrew`をインストールする

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

## `CocoaPods`をインストールする

``` bash
brew install cocoapods
pod setup
```

# `JDK`をインストールする

最新の`JDK14`だとAndroidビルド時にエラーになるようなので、`JDK11`をインストールする。

``` bash
$ brew install java11
```

インストール時に表示されるパスを`~/.zshrc`または`~/.bash_profile`に記載する。
記載後にシェルを再起動する。

``` bash
export JAVA_HOME=/usr/local/Cellar/openjdk@11/11.0.6+10
PATH=${JAVA_HOME}/bin:${PATH}
```

**done!!**
【CSS】背景色を透過したら文字も透過してしまうopacity

#opacityを適用したら背景色を透過したいのに文字も透過する...
opacityってちゃんと読んでいないとそのオブジェクトだけを透過すると思っちゃうんですけど、実際は子要素にも適用されちゃうんで他の透過方法を使うしかないです。それがrgbaってやつです。

##rgbaとは
r(red), g(green), b(blue)これにa(alpha)というのをつけたものです。alphaは透明度を表します。まあ端的にいうと色の透明度を決めるプロパティですね。

```sample.css
.sample {
  background-color: rgba(255,255,255,0,5);
}
```

これでrgbだけなら真っ黒になるんですがalphaが追加されたので半分透過した状態が確認できるはずです。
後ろに画像とかあれば分かりやすいです。
これで背景色だけを透過するので、子要素に文字があっても透過することなく表示させれます。
最後に参考サイトだけ貼って終わります。[opacity](http://www.htmq.com/css3/opacity.shtml)と[rgba](http://www.htmq.com/css3/rgba.shtml)のリンク

ではでは
わがままな要望を叶えたシェルスクリプトのusage関数の書き方

## はじめに

コマンドの使い方を表示する `usage` 関数、書いていますか？
書いていますよね？
でも不満がありますよね？

それは・・・

　

　　　　$\huge{インデント}$

　
普通に書くと

```sh
usage() {
  cat<<USAGE
Usage: command [-h | --help]
USAGE
}
```

みたいな感じになってインデントがすこぶる気持ち悪いです。私には他にも細かい要望がいくつもあって、でも良い書き方が思いつかなかったのでずっとモヤモヤしていたのですがようやく思いついたのでインデントに始まるいろいろな要望を叶えた `usage` 関数の書き方を紹介したいと思います。

## 要望

私の細かい要望を羅列していきます。説明は省略しますが多分、既存の `usage` の書き方に不満があった人ならわかるんじゃないかと。

- インデントをきちんと揃えたい
- 本物のタブは使いたくない（インデントはスペース2文字派）
- タブを使ったとしてもヒアドキュメントの終わりはインデントできず揃わない
- ヒアドキュメント後の `}` が気持ち悪い
- コメントの形で埋め込むやり方は頭の `# ` が嫌
- ファイルの一番上に書きたい
- とは言うもののバージョン番号を入れた変数よりかは下にしたい時もある
- `set -eu` とどちらを上にするか悩む
- ヘルプの中で変数やコマンド置換を使いたい
- ヘルプの中でも未定義の変数を参照したら落ちてほしい（つまり `set -u` を機能させたい）
- ヘルプが表示されない場合のパフォーマンス低下はできるだけ避けたい
- なるべく短くシンプルに書きたい
- 複数のヘルプを持たせたい（例えばサブコマンド専用のヘルプ）
- POSIX 準拠の範囲でやりたい

## 実装

```sh:hello.sh
#!/bin/sh

VERSION=0.0.1

set -eu && :<<'USAGE'
Usage: $(basename "$0") [-h | --help] [NAME]

Options:
  -h | --help   Display this help

Version: $VERSION
USAGE

usage() {
  sed -n "/<<'$1'/,/^$1\$/ { s/.*<<'$1'/cat<<$1/; p }"
}

case ${1:-} in (-h | --help)
  eval "$(usage "USAGE" < "$0")"
  exit 0
esac

echo "Hello ${1:-World}"
```

みたまんまですが、一応解説すると、

- `&& :<<'USAGE'` の左に `set -eu` 等の簡単なコマンドを追加実行でき、一行で書くことが出来ます。
- `VERSION` 変数等はヘルプの上に書いても下に書いても `&& :<<'USAGE'` の左に書いても構いません。
- `:` コマンドにヘルプ内容を渡してますが、何もしないはずなのでパフォーマンス低下はわずかです。
- `'USAGE'` とシングルクォートでくくっているのでヒアドキュメントの中身はただのテキスト扱いです。
  - つまり `basename` コマンドは（この時点では）実行されずパフォーマンス低下はありません。

`usage` 関数

- 現在のスクリプトファイルを読み取りヒアドキュメントの開始から終わりの行までを出力しています。
- 途中の `set -eu && :<<'USAGE'` は `cat<<USAGE` に変換しています。
- 最終的に `eval "$(usage "USAGE" < "$0")"` で出力されたコードを実行します。
- `eval` で実行される際は `'USAGE'` を `USAGE` に変更してるので変数やコマンド置換が行われます。
- `USAGE` の文字を変更すれば別のヘルプを出力することが出来ます。別のファイルにあっても構いません。

### おまけ

シェルスクリプト実装版（`sed` 未使用）の `usage` 関数です。

```sh
usage() {
  while IFS= read -r line && [ ! "${line#*:}" = "<<'$1'" ]; do :; done
  while IFS= read -r line && [ ! "$line" = "$1" ]; do set "$@" "$line"; done
  shift && [ $# -eq 0 ] || printf '%s\n' "cat<<$line" "$@" "$line"
}
```