OmniAICreator/Qiita-1.07M huggingface dataset:
[JavaScript] Ajaxのテスト時にFormからのSubmit送信に切り替えてデバッグする方法


こんにちわ。

最近、Ajaxで処理することが多いです。
やはり、UXを考えると、Ajax使いまくらないと。。。ですよね。

しかし、Ajaxの開発をしていると、サーバーサイドの連携部分でエラーが発生することがありますよね。
この場合、皆さんはどのようにデバッグをされているのでしょうか？


色々検索してみたのですが、これといった方法が見つからず、、、でした。
そこで、私はいつもは以下の方法でデバッグをしています。

問題がないとは言い切れませんが、デバッグするには十分かな、と考えています。

### ①まずは、エラーをResponseから取得し、Consoleに吐き出す

JQueryで、以下のように書きます。

```JavaScript
$.ajax({
   type : 'POST',data: data,url : url,dataType : "json",
   success : function(json) { fn_callback(json);},
   error : function(XMLHttpRequest, textStatus, errorThrown) {
    console.log("XMLHttpRequest : " + XMLHttpRequest.status);
    console.log("textStatus : " + textStatus);
    console.log("errorThrown : " + errorThrown.message);
    //↓ここがキモ。本番では出力しない。
    console.log("responseText : " + XMLHttpRequest.responseText);
    return false;
}
});

```

最後のresponseTextというところを出すと、エラーログが見れるので、ここで解決することが多いです。
この辺は、検索すると出てくる方法ですね。


### ②GETに切り替えて、URLを取得し、直接ブラウザから叩く
でも、上記でも、原因がよくわからない場合ってありますよね。

この場合に、本当にもっといいやり方ないのかな、とは思いつつ、以下のようなやり方をしてます。

まず、送信typeをPOST => GETに変更します。
そして、サーバーサイドで、わざとエラーを起こします。（存在しない関数を呼んだりして）

そうすると、GETでアクセスしたパラメータ付きURLが取得できるので、
そのURLをコピーして、ブラウザで叩く、という方法。

そして、サーバーサイドのエラー箇所を特定していきます。
ここまでで大体潰せます。


### ③POSTデータをFormに埋め込みサブミットする

しかし、GETは送信できるデータに上限がありますよね。
そういう時は稀ですが、これが必要な場合は、formを作ってサブミットします。

でも、Ajaxで大量データを送る時って大抵、配列やオブジェクトで送ることが多いです。
そうすると結構面倒ですよね。

例えば、こんなデータを送る時、

```JavaScript
{'a':123,'b':{'b1':'bbb1','b2':'bbb2'},'c':['x','y','z']};
```

いちいち手作業でformを作るのは不便ですよね？
（その結果、全然大したことないバグだったりすると・・・。）

たまたま、今回送信していたデータがこれ以上に複雑なデータだったので、
汎用的に送信する関数を作りました。

やってることはシンプルで、配列かオブジェクトなら、再帰的に階層を辿り、
hiddenタイプのinputに納めて送信する、という方法（ただの力技）です。

```JavaScript
function makeForm(object,GetPost,url,id){
    var keylist = {};
    function extendObject(txt, key){
        if(typeof txt == 'object' && txt !== null){
            for(var i in txt){
                var tmpkey =  (!key)?i:key + '['+i+']';
                extendObject(txt[i], tmpkey);
            }
        }else{
            keylist[key] = txt;
        }
    }
    extendObject(object, '');

    var form = document.createElement("form");
    form.id = id;
    form.action = url;
    form.method = GetPost;

    for(var name in keylist){
        var ip = document.createElement("input");
        ip.type = 'hidden';
        ip.name = name;
        ip.value = keylist[name];
        form.appendChild(ip);
    }

    document.body.appendChild(form);
};

```

この関数を↓の感じで呼んでください。

```JavaScript
var object = {'a':123,'b':{'b1':'bbb1','b2':'bbb2'},'c':['x','y','z']};
object['_token'] = $('meta[name="csrf-token"]').attr('content'); //CSRFトークンをセット
makeForm(object,'POST','dummyurl/test','submit_form');

$('#submit_form').submit()
```

これで、デバッグに困ることはあまりないかな、と。

ただ、こんな力技しかないのでしょうか？

もっと良いデバッグ方法があれば知りたいのですが。。。
これで十分間に合っている感はあります。
SDU の table ラベル付け（beta）

#はじめに
[直前の記事](https://qiita.com/strysd/items/42789b2475415fae6798) では書かなかった、table ラベル付けについて試してみたことのメモです。この記事を書いた時点では beta 版なので今後仕様が変わる可能性があります。

#table を試す
## 同一ページ内にテーブルが１つの場合

右向き矢印で示した table を選択した後、左向き矢印で示した一覧表を範囲指定します。
<img width="711" alt="80a.png" src="https://qiita-image-store.s3.amazonaws.com/0/27855/34b00fd9-f263-2c55-4d51-bd6698a813a0.png">

このままだと見づらいので、上向き矢印（丸１）で示したズームイン記号を選択し、拡大表示したい範囲（丸２）を指定します。左半分の元の文書イメージと、右半分の認識状態の表示がそれぞれ拡大されるタイミングはややずれることがあります。あせらず待ちましょう。table としてラベル付けした箇所にカーソルを持っていくと、上向き矢印（丸３）で示した、Annotation table が表示されます。
<img width="695" alt="81a.png" src="https://qiita-image-store.s3.amazonaws.com/0/27855/85e5b7e9-7584-9bfd-a5b9-95e67deca72a.png">

次はテーブルの行や列を識別する画面が表示されます。しかし、表示がまた小さくなってしまいます。これは不便ですね。再度上向き矢印（丸１）で示したズームイン記号を選択し、拡大表示したい範囲（丸２）を指定します。右向き矢印で示したメニュー（丸３）を使って Column と Row フィールド認識を開始します。
<img width="901" alt="82a.png" src="https://qiita-image-store.s3.amazonaws.com/0/27855/26d89cf6-5d48-b724-e848-42e6c46a21c3.png">

Column を選んで列（縦方向）を決めていきます。縦方向にテキストがほぼ重なって配置されている場合は、カーソルをもっていって重なりの中央付近でクリックすると簡単に認識できます。もし左寄せと右寄せが混在していて、縦方向に重なっていない場合は、同じ列として認識させたい範囲を範囲指定する必要があるようです。
<img width="682" alt="83a.png" src="https://qiita-image-store.s3.amazonaws.com/0/27855/0fddc088-c318-e0b7-8acd-7da42fa60643.png">

同様に Row を選んで行（横方向）も決めていきます。一つのセル内でテキストを改行していたりする場合は、同じ行として認識させたい範囲を範囲指定する必要があるようです。列と行がうまく認識できると、左側の Table preview にプレビューが表示されます。
<img width="907" alt="84a.png" src="https://qiita-image-store.s3.amazonaws.com/0/27855/ef8c857a-22d6-0e85-67f1-e6e019133049.png">

- ちなみに間違って認識されたセル、列、行、または結合されたセルを認識から除外したい場合、認識された状態の上にカーソルを合わせていると、Remove 表示が出てきて、その時点でクリックすると除外できるようです。

- Column と Row を認識させた後、Step2 として body 、col_header、row_title などを指定できるはずなのですが、ズームイン機能を使ってしまうと指定できないようです。
 - ちなみに Step2 の各種フィールドの使い分けかたは[マニュアル](https://console.bluemix.net/docs/services/discovery/sdu.html#tables)をご覧ください。

テーブルの各項目の認識作業が終わったら右上の Submit table ボタンを押します。そのままだとページ内容が未確定になっています。ほかのページに移動する前には Submit page ボタンも押してください。

## 同一ページ内にテーブルが複数ある場合
こういう場合です。
<img width="676" alt="85a.png" src="https://qiita-image-store.s3.amazonaws.com/0/27855/a2946586-2218-f729-6481-7d80de1eca98.png">

Previous ボタン、Next ボタンで前後のテーブルに移動しながら連続して作業できるので、これは便利と思いました。
<img width="876" alt="86a.png" src="https://qiita-image-store.s3.amazonaws.com/0/27855/c50f552e-af40-26e5-040c-6a9682646418.png">

#まとめ
テーブルのデータは、View data schema の Collection view でも Build queries でも未実装のようです。将来的に改良されていくのだと思いますが、今後が楽しみですね。
JWTでセッション管理してはいけない

世の中にはJWT(JOSE/JWS/JWE)でセッション管理をしてはいけないという記事が2017年から山ほどあるのに、なぜかJWTでセッション管理をしようとする人がいる。翻訳記事だったり暗号の説明が長すぎたりして、JWTをセッションに使ってしまうような人の心に刺さってないんじゃないだろうか。

# 前提
JWTでセッション管理というのは、暗号化したトークンをブラウザのCookieに持たせて、サーバー側ではトークンを復号化してユーザー判定などのセッション管理を行うことである。サーバー側で[sessionId: userId]のペアを管理する必要がないのでステートレスに扱えてスケールしやすいというメリットがある。

# 問題
すごく便利な図があったのでまずこれを読んで欲しい。セッション方式の策定/設計をする職位の人ならすんなり読めると思う。

![jwt-sessions.png](https://qiita-image-store.s3.amazonaws.com/0/16962/410edaf1-2544-e5f1-253c-73bfe3965048.png)

[co3k.org](https://co3k.org/blog/why-do-you-use-jwt-for-session)より引用 [^1]

左から４番目Local Storageは読んでそのままこれ以上補足することもない。残りの部分は下記の2点に集約される。

### 明示的にログアウトするにはサーバー側の秘密鍵の変更が必要
このため次の二択を迫られる。

* 誰か一人でもログアウトしたいときは全員ログアウトになる（秘密鍵を更新した場合）
* なりすましログインが発覚しても、トークンの有効期限が来るまではそのセッションは無効にできない（秘密鍵を更新せずに耐える場合）

これが許されるのは金銭の絡まないサービスか、ユーザーに損害があっても運営がポイントを配れば済む（詫び石対応）類のサービスなどに限られるだろう。でもセキュリティは固いにこしたことはない。仮想通貨取引サイトで後者を選択したら、犯人が外部に送金していくログを指を咥えて見ているしかない。

### 従来のセッション管理の方がマシ

前項の不便さを回避するために、次のような回避策を考えるかもしれない。

* 明示的にログアウトしたユーザーを無効なトークンとして管理する
* ユーザーがパスワードを変えたらトークンも再発行の必要があるようにする  

結局のところサーバーサイドでのステートフルなセッション管理であり、JWTのメリットであるステートレスを捨てている。新規に実装するよりも、従来の枯れているセッション管理実装を使ったほうがわかりやすくバグの見落としも少ないだろう。

[^1]: オリジナルの英語版は[@joepie91](https://twitter.com/joepie91)氏

# 認証
セッション管理ではなくOAuth認証などに使うのは問題ない。一回認証したら終わりなので、有効期限を短くしておけば済む。「一人のために全員ログアウト」のような不便は発生しない。

# 所感
一部実装がalgヘッダにnone(暗号化なし)を許可していただとか、どの暗号化方式にどんな弱点がとか、話題が分散するとどこが重要なのかわかりにくくなる。RFCを読めなどと言えば拒否反応を示す人もいるのである。正しく手短に伝えるのは難しいですね。

# 参考URL
* [No Way, JOSE! Javascript Object Signing and Encryption is a Bad Standard That Everyone Should Avoid](https://paragonie.com/blog/2017/03/jwt-json-web-tokens-is-bad-standard-that-everyone-should-avoid) (PARAGON INITIATIVE, 2017-03-14)
* [JOSE（JavaScriptオブジェクトへの署名と暗号化）は、絶対に避けるべき悪い標準規格である](https://postd.cc/jwt-json-web-tokens-is-bad-standard-that-everyone-should-avoid/) (POSTD, 上記PARAGON記事の翻訳, 2017-04-13)
* [どうしてリスクアセスメントせずに JWT をセッションに使っちゃうわけ？](https://co3k.org/blog/why-do-you-use-jwt-for-session) (co3k.org, 2018-09-20)
* [JWTをセッション管理に転用するのはあまり良いアイデアではない(認証だけならいいよ)](http://blog.anatoo.jp/entry/2018/10/03/000518) (anatooのブログ, 2018-10-03)
dockerを利用して、ubuntu18.04環境でDjango開発環境作りました。

●ubantu18.04に
　　　dockerをインストールする
　　　参考(https://docs.docker.com/install/linux/docker-ce/ubuntu/)
　　　わからない場合(https://www.virment.com/ubuntu18-04-how-to-setup-docker/)
●docker composeを利用する
　　　(http://docs.docker.jp/v1.9/compose/django.html)

これで出来ました。
Xcode10.2でcarthage updateすると `Could not find any available simulators for iOS`

Xcode10.2にあげてSwift5でビルドしようとすると
`Module compiled with Swift 4.2.1 cannot be imported by the Swift 5.0 compiler: /Users/......`
といったメッセージが表示されました。

もちろんSwift4.2でコンパイルしていたものをSwift5でインポートできないので
`carthage update` でビルドし直します。
ただ `carthage update` をしたところ
`Could not find any available simulators for iOS` というエラーが

carthageがSwift5に対応していないんなじゃないかなと思って
`brew upgrade carthage` を実行してver0.31から0.32へアップデート

その後 `carthage update` で無事にビルドできました。


これでもまだ

```
Could not find any available simulators for iOS
```
のメッセージが表示されることがあります。その場合は文字通りiOSのシミュレータを削除していることが原因です。
Xcodeからシミュレータを追加しましょう。

1. Xcodeを開いて左上の`Generic iOS Dvice`（端末名）をクリック
2. Add Additional Simulatorsをクリック
3. シミュレータの一覧が表示されます（おそらくシミュレータがないので空）
4. 左下の+ボタンから適当にシミュレータを追加します。

これでビルドできるはずです。シミュレータは意図的に消さないと消えませんが、Xcodeがストレージをたくさん使っているため、不要なデータ削除をしていた際に自分は消してしまっていました。
CentOS7でMinecraft Spigotサーバーを立てる

# Minecraftとは？
これはブロックを置いて冒険し続けるゲームです
無限に生み出される広大なワールドを舞台としたゲームです。氷で覆われた山脈、沼地のような湿地帯、広大な草地など、秘密と驚きと危険がいっぱいの世界です！

>[Minecraft公式ホームページ](https://www.minecraft.net/ja-jp/)より引用

# Spigotとは？
Spigotとは、SpigotAPIを実装したラッパータイプのサーバーMODである。 SpigotAPIがBukkitを拡張したものであるため、Bukkitプラグインが使用できる。 また、CraftBukkitから様々な改良がされている。

>[Minecraft Japan Wiki](https://www26.atwiki.jp/minecraft)より引用

# マインクラフトサーバーの要件
|要件|プレイヤー数|CPU|RAM|HDD/SSD|
|---|---|---|---|---|
|最低限|30人以下|Intel Core 2 Duo / AMD Athlon 64 x2|2GB|最低200MB|
|推奨|30～60人|Intel Core i3 / AMD Athlon 64 x2|4GB|最低250MB|
|快適|60人超|Intel Core i7-4771|8GB|最低250MB(SSD)|

少なくとも低pingインターネット接続をするように。
(DSLや有線接続など)

>[Minecraft Wiki](https://minecraft-ja.gamepedia.com/)より引用

# 1. まずJavaのインストール
下記の一つのコマンドを入力するだけでインストールできます。

```
yum  -y install java-1.8.0-openjdk.x86_64
```

# 2. Spigotのインストール
[https://getbukkit.org/download/spigot](https://getbukkit.org/download/spigot) から使いたいバージョンのダウンロードボタンを教えて Spigot-◯.◯◯.◯.jar の部分を左クリックしてリンクのアドレスをコピーします。
そして下記のコマンドを入力します。

```
wget <コピーしたリンク>
```
下記は1.13.2のダウンロードのコマンドです。

```
https://cdn.getbukkit.org/spigot/spigot-1.13.2.jar
```

# 3.さっそく起動してみよう！
起動もコマンド1つでできます！（今回はメモリ512MBでバージョンは1.13.2で起動します。）

```
java -Xmx512M -Xms512M -jar spigot-1.13.2.jar
```
起動するとマインクラフトサーバーのjarファイルのあるフォルダーにeula.txtファイルができます。eulaとは利用許諾契約で意味は「ソフトウェアの開発元と購入者の間で交わされる契約。ソフトウェアの使用や複製、譲渡などについて購入者に許可あるいは禁止される行為や条件、開発元による保証やサポート、責任の範囲、免責事項などが定められている。」です。

>[http://e-words.jp](http://e-words.jp/w/) より引用

eula.txtの開きましょう！以下のコマンドで開けます

```
vi eula.txt
```

これを開くと色々書いてある文章がでてきます。その中に eula=false という部分があるのでそこを 
eula=true に変更再度サーバーを起動してみましょう。

```
java -Xmx512M -Xms512M -jar Spigot-1.13.2.jar
```

するとサーバーが起動します！ですがまだクライアント側が参加できる環境では無いのでクライアント側から入れるようにします。

# 4. ファイアーウォールの設定
ファイアーウォールというのは
「ソフトウェアのメーカーによっては、ウイルス対策ソフトと組み合せて販売されています。 企業などのネットワークに使用するファイアウォールは、インターネットと社内のLANとの間に設置するものです。 この場合のファイアウォールの基本的な機能は、外部からの不正なアクセスを社内のネットワークに侵入させないことです。」
です。
> [国民のためのセキュリティサイト](http://www.soumu.go.jp/main_sosiki/joho_tsusin/security/index.html) より引用

ファイアーウォールの設定は簡単です。コマンド2つで終わります。以下のコマンドを実行してください。
(今回はデフォルトの25565を使用します）

```
firewall-cmd --add-port=25565/tcp --permanent
firewall-cmd --reload
```
これでファイアーウォールの設定は終わりです。これでCentOS7のグローバルIPアドレスでMinecraftサーバーに入ることができます。

# 5. プラグインを入れてみよう！
プラグインのjarファイルをダウンロードしてきます。できたら、そのプラグインのjarファイルをマインクラフトサーバーのjarファイルのあるフォルダーにpluginsというフォルダーが新しくできます。そのpluginsというフォルダーにプラグインのjarを入れます。するとプラグインを導入することができます！

# 6. 早速プラグインをサーバーに反映させよう！
マインクラフトのサーバーのコンソールから以下のコマンドを実行するだけでサーバーを再読込することができます。

```
reload
```

これで再読込することができます。

(追記)
　reloadコマンドはSpigot開発者があまりおすすめしていないそうです。再起動は stop をしてから再度起動コマンドを入力してください。

# 7. サーバーを閉じてみよう。
サーバーで誰も遊ばないときはサーバーを閉じることができます。閉じるのはマインクラフトのサーバーのコンソールから以下のコマンドを実行するだけでサーバーを停止することができます。

```
stop
```

これでサーバーを停止することができます。

# 8. 最後に
マインクラフトサーバーで友達と一緒に遊ぶことは楽しいですが、不正なアクセス等には気をつけましょう。
最後までありがとうございました。
ASP.NET Core > IHttpActionResult vs IActionResult のどちらをつかえばいいのか？についてメモ



以下リンク先に回答あり

[c# - IHttpActionResult vs IActionResult - Stack Overflow](https://stackoverflow.com/questions/51480689/ihttpactionresult-vs-iactionresult)


IActionResultは asp.net core
IHttpActionResultは、ASP.NET時代のものとの事

asp.net coreでは、IActionResultを使った方がよさそうです。


## 例

```csharp
using System;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;


[HttpGet("{id}")]
[ProducesResponseType(typeof(Product), StatusCodes.Status200OK)]
[ProducesResponseType(StatusCodes.Status404NotFound)]
public IActionResult GetById(int id)
{
    if (!_repository.TryGetProduct(id, out var product))
    {
        return NotFound();
    }

    return Ok(product);
}
```
Web周りの関連技術一覧

私が初めてWebアプリを作成する際にその関連技術のあまりの多さに何から手をつけていいか分からなかったので， それを自分なりにまとめたものを公開します．順次アップデート予定．

# 概要
まずWebアプリの構造として，

1. クライアントサイド...アプリが動いている端末に入っており，通信が途切れても残る部分．
2. サーバサイド...アプリが動く端末には入らず，どこか別のマシンで動いている部分．
3. データベース...顧客や商品の情報などがそれはそれは大量に蓄えられる部分．

に大別でき，1・2・3の組み合わせで成り立ちます．この3つを構成する要素についてそれぞれ見ていきます．

## クライアントサイド
主にアプリ自体の見栄えに関わります．以下の3要素からなります．
1. HTML ... Webページのレイアウトを決定するもの．
2. CSS  ... HTMLを綺麗に飾り立てるためのもの．
3. JavaScript ... Webページを動的に動かすためのもの．サーバサイドとやりとりもする．


具体的な技術は以下のようになります．

| 言語 | ライブラリ | フレームワーク | 亜種 |
|:-:|:-:|:-:|:-:|
| html | | | Handlebars, Mustache  |
| css  | | |  Stylus, SCSS, SASS |
| javascript | jquery, React.js, axios, lodash | Vue.js, React.js, Angular.js　| TypeScript, Babel, Buble, CoffeeScript |

## サーバサイド
クライアントサイド，およびデータベースとやりとりをする架け橋となる部分です．他にも色々な仕事がありますが，要するにユーザのマシンには重すぎる処理やユーザからは隠したい処理が行われる部分です．

具体的な技術は以下のようになります．

| 言語 | フレームワーク |
|:-:|:-:|
|Ruby|Ruby on Rails, Hanami|
|PHP|Laravel, Slim, CakePHP|
|Node.js|Express, Meteor.js, AdonisJS|
|Java|Spring, Play, JSF|
|Python|Django, Responder|
|Go|gin, go-kit|
|Elixir|Phoenix |
|(シェルスクリプト)|


## データベース
データを蓄え，かつ高速でデータを探したり更新することに特化したデータ群で，これを管理するシステムをデータベース管理システムといいます．必要に応じてサーバとやりとりをします．データベース管理システムには大きく以下の2種類があります．

1. RDBMS ... RDB(関係データベース)と言われるデータ構造を管理します． RDBはいわゆる表です．表形式でデータを管理します．上の言語とフレームワークの図なんかもRDBと言えるでしょう．最も一般的なデータベースです．
2. NoSQL ... NotOnly SQLの略で，RDB以外を扱うデータベース管理システムの総称です．

具体的な技術は以下の通りです．

| RDBMS | NoSQL |
|:-:|:-:|
| PostgreSQL | MongoDB(ドキュメント志向)  |
| MySQL | BigTable |
| SQLite | Redis(インメモリDB, キーバリューストア,揮発性&永続性) |
| MariaDB | Memcached(インメモリDB, 揮発性) |

# オススメの学習フロー

1. HTML→CSS→JavaScript→JQuery
2. MySQLを使ったデータベース操作(1と前後しても良い．平行してやっても良い)
3. いずれかのフレームワーク

# まとめ
以上の3種類を組み合わせてWebアプリを構築することが多いです．
例えば，
HTML,CSS,JavaScript (+ Vue.js) × Ruby on Rails × MongoDB
などです． 
実際にはもっと多くの種類がありますし，フレームワークを使えばクライアントサイドとサーバサイドをあまり意識せず構築できます．また，一方で我々が実生活でお世話になっているアプリ達は，用途に応じてデータベースを使い分けたりともっと複雑で大規模です．
しかし，これらを知っていれば個人でアプリを作成する際に困ることはないでしょう．私はそもそもHTMLが何か知らない状態でインターンシップに飛び込んだのでとんでもなく苦労しました．
主には自分の知識の整理のために投稿しますが，誰かの目にとまりあわよくば助けとなることを願っています．私自身まだまだ未熟で間違いや不足があると思いますので，修正や加筆，苦言などもいただけると嬉しいです．
フレームワークごと，データベースごとの利点とかもまとめて加筆予定．
初心者めも

JavaScriptでは関数は変数と変わらない。
Javaでオブジェクトを変数に入れられるのと同じように、JavaScriptでは関数を変数に入れられる。

よくある書き方

```javascript
function hogefunc() {
    document.write("よくある書き方");
}
hogefunc(); /* 『よくある書き方』と表示される */
```

変数に代入する書式

```javascript
var hogefunc2 = function() {
    document.write("変数に代入する場合と同じ書式でかく");
}
hogefunc2();/* 『変数に代入する場合と同じ書式でかく』と表示される */
```

unction hogeという宣言はhogeという関数入りの変数を作ったということ。

関数を戻り値で返す関数

```javascript
var sotofunc = function() {
     
    return function() {
        document.write("関数を返す関数");
    }
}
 
var func = sotofunc(); /* return の横にある関数が、func変数に代入される */
func(); /* 代入された関数が実行され『関数を返す関数』が表示される */
```

関数が変数と同じならば、他の数値や文字列と同じように扱うことができる。
たとえば関数の戻り値を関数にする方法などが可能。

関数を引数で関数に渡す

```javascript
var hogefunc3 = function(func2) {
    func2();/* 引数で渡された何かしらの変数を関数として実行する */
}
/* 関数を引数で渡す。『関数を引数で受け取る関数』と表示される */
hogefunc3(function(){ document.write("関数を引数で受け取る関数"); });
```

関数も変数だから、引数として関数を渡すことができる。
これの使いドコロは、あらかじめ共通部分はつくっておいて、処理部分を後から作るとかができる。

関数内で生き残る変数（クロージャ）

```javascript
var hogefunc4 = function() {
    var num = 0; /* 0を持つ変数を宣言 */
     
    return function() {
        document.write(num);
        num++;
    
var clfunc = hogefunc4(); /* returnの横にある無名関数を変数に代入する */
/* numはスコープから外れているので、clfuncに代入された関数が実行後も変数は生きている */
clfunc(); /* 0と表示される */
clfunc(); /* 1と表示される */
clfunc(); /* 2と表示される */
```

JavaScriptでは関数を関数内に定義することができる。
ある関数が関数の外にある変数にアクセスできるが、関数内にネストされた関数でもそれはできる。

関数を返す関数hogefunc4内にnumという変数があるが、
通常numの寿命はhogefunc4が実行されている間だが、
戻り値で返される関数がnumを使っている場合numの寿命が伸びる。

戻り値で返される関数が生きている間はnumは生き続けるし、またnumは戻り値関数のスコープの外にあるから
状態が保持される。

この場合、関数を実行するたびインクリメントされる。
状態を持った関数を作ることができる。

こういうものをクロージャと呼ぶ。
【Oracle】文字列をバイト数指定で区切る方法

どうしても文字列をバイト数で文字を区切りたい場合のファンクション

VARCHAR2(5000)だけ、望む項目長に調整しなきゃだけど。

```sql
CREATE OR REPLACE FUNCTION SUBSTR_EX(
    A_TEXT IN VARCHAR2
  , A_BYTE IN NUMBER
  , A_ROW  IN NUMBER
)
RETURN VARCHAR2
IS
  L_START_POSITION  NUMBER;
  L_RESULT          VARCHAR2(5000);
  L_ROW_COUNT       NUMBER;

BEGIN
  L_RESULT := '';
  L_ROW_COUNT := 1;
  L_START_POSITION := 1;

  -- テキスト値がNULLの場合は何も出力しない
  IF A_TEXT IS NULL THEN
    RETURN NULL;
  END IF;

  LOOP
    L_RESULT := L_RESULT || SUBSTR(A_TEXT, L_START_POSITION, 1);

    -- バイト数が合致した場合
    IF LENGTHB(L_RESULT) = A_BYTE THEN
      EXIT WHEN(L_ROW_COUNT = A_ROW);
      L_ROW_COUNT := L_ROW_COUNT + 1;
      L_RESULT := '';
    END IF;

    -- 全角文字を取得してバイト数が超過した場合
    IF LENGTHB(L_RESULT) > A_BYTE THEN
      L_RESULT := SUBSTR(L_RESULT, 1, LENGTH(L_RESULT) - 1);
      EXIT WHEN(L_ROW_COUNT = A_ROW);
      L_ROW_COUNT := L_ROW_COUNT + 1;
      L_RESULT := '';
      L_START_POSITION := L_START_POSITION - 1;
    END IF;

    -- 全文字処理したら終了
    IF L_START_POSITION = LENGTH(A_TEXT) THEN
      IF A_ROW > L_ROW_COUNT THEN
        L_RESULT := '';
      END IF;
      EXIT;
    END IF;
    L_START_POSITION := L_START_POSITION + 1;
  END LOOP;

  RETURN L_RESULT;
END;
/
```
【居心地の良い組織についてと、これから目指すもの】 #devlove

# 要約

- 自身が組織に求めるものは「何でも言える雰囲気」
- 自分が見えるつもりで見えていなかったものは、「我欲」
- これからは「ちょっと変わった優しい人」を目指す

# 本文
組織論やマネジメントに興味があったので、先日『[みえないものをみえるようにしよう 〜組織の中の見える化、人と人との関係性の見える化〜](https://devlove.doorkeeper.jp/events/88224)』と題したイベントに参加してきました。

そこで感じたことと、自分の今後の目標について書きます。

有意義なイベントを開いていただきありがとうございました！
主催者の方々に御礼申し上げます。

　
さて、自分は２年前から自身の感情を記録することをテーマとしていて、そのために以下２つの施策を今日まで継続しています。

- 日記をつける
- 仕事のモチベーショントラッキングをする

日記は、一日５分程度で書き、内容として「日付、曜日、天気、時刻、書いている場所、朝食、運動、所感、何分かかったか」を含めるようにしています。
特に所感が大事で、その時に感じた自分の気持ちを書くことに重点を置いています。ネガティブな気持ちの記録はあまり読み返して気持ちの良いものではなかったので、朝に書くようにしています。

モチベーショントラッキングは、一日のうち幾つかの区切りを設けて、「９時、１０時、１２時、１５時、１７時」の時点の
「やる気、気分、仕事の面白さ、仕事環境の快適さ、稼働超過率、通勤ストレス率」を百分率で記録し、「メモ」としてその時の所感を書くようにしています。

こんな感じで、感情の記録をテーマに２年間やってきて、その上で先日のイベントで発表されたスライドと絡めて所感を書いていきます。

網羅的な記事にはならないと思います。その点はすみません。

参考スライドは以下です：
[みえないものをみえるようにしよう 2019-03-26 #devlove](https://speakerdeck.com/tsuyok/mienaimofalsewomieruyounisiyou-2019-03-26-number-devlove)

# 自身が組織に求めるものは「何でも言える雰囲気」
話を聞いたあとでまず考えたのは、**そもそもなぜ自分は組織論に興味があったのか？**ということでした。

もう5年前くらいになると思いますが、某企業の統合プロジェクトにインフラエンジニアとしてアサインされ、そこがびっくりするくらいのデスマーチプロジェクトだったことがきっかけの一つだと思います。

死屍累々になるメンバーを日々見るうちに、これではいけないなと本能的に察知したように思いました。
トム・デマルコを狂ったように読み、何がエンジニア、ひいては現場の人たちにとって良いことなのかを考えるようになりました。

しかし、結局のところ、話を聞いたあとでもマネージャを目指すと厳格に決意したわけでもありません。
その代わり分かったのは、「自分にとって働きやすい職場とはどんなもので、そこに自分は何を求めているのか」ということでした。

それが冒頭の要約につながります。

自分は割とフランクに誰とでも話したいタチですし、他人とはちょっと変わったことをするのが好きなようです。
そして、言葉に出すことで自分の理解を深めることが快楽なようです。
というわけで、言葉を出しづらい空間が耐えられないのです。

「こんなことを今更聞くの？」や、「これ言ったらウザがられるんじゃないか」といった雰囲気になることがもうダメです。

完全に自分のためですが、こんな感じで、何でも言える雰囲気の組織を作りたいがために自分は組織論を勉強しているようです。

# 自分が見えるつもりで見えていなかったものは、「我欲」
前項の要望は、先日の話を聞いて初めて分かったことです。

ショックでした。「自分って自分のことしか見えてないサイテー野郎じゃないか！」と。

でも実際そういうところはあると思います。

自分は他人に合わせることがどうしても苦手です。車の運転も苦手ですし、行列に並ぶことも耐え難いです。

「周りに合わせる」ことができるリミットは１５分くらいだと思っています。
これは要するに、「我欲」の強さに起因していると思います。

子供の頃母親とデパートに行くと、すぐ迷子になる癖に入り口付近の迷子センターは記憶していて、センターに行って親を呼び出してもらったりしていました。

この体験をキーとして自身を振り返るとかなり当て嵌まることが多く、自分のペースでどこへでも行ってしまうことが自分の我欲の強い点だと思います。

**組織論を勉強してるくせに単独行動を好む理由が、ようやくわかりました**。

# これからは「ちょっと変わった優しい人」を目指す
自分の我欲が分かったので、これとどうにか付き合っていかないといけません。

先ほども述べたように他人と話すことは嫌いじゃないのですが、いかんせん相手に合わせることが苦手です。
これをどうにかしたい。

結局、自分のメリットを考えることから始めることにしました。

**最適なパフォーマンスを出すためには他者や環境のサポートが必要だ**という話を伺い、これを一つの納得材料として
取り組むことにしました。

個人のパフォーマンスを最大化するには他人の助けが要りますが、目標設定をしておかないと他人と共通のコンテキストが
持てません。

１on１というのも、結局は廻り回って自分のために目標設定の助けとなることがわかりました。
自分もこれまでの経験から、他人と話すことで自分の考えに気付いたりしたことはいくらでもあります。

自分はちょっと変わってるタイプの人ですが、**話すことでその相手を尊重することが将来的に出来ればいいな**、と思うようになりました。

今後は、そのための活動を行っていきたいと思います。
0からはじめるelm-ui#1-hello_world

# 今日覚えること

`Element.text`関数で文字列を表示する方法

```elm
text : String -> Element msg
```

```elm
import Element exposing (..)
main = layout [] <| text "Hello, world"
```

[動くコード](https://ellie-app.com/565Fmh5vCzVa1)

> 復習：`layout`はElementからHtmlに変換する関数だよ
[前記事](https://qiita.com/miyamo_madoka/items/0af0a1fafcd8a440b140)をみてね

# はじめに
前の#0で`Html msg`に変換する方法を学んだのでいよいよHello worldをしましょう

Elmでは直接`Element msg`を描画してくれないので先に`Html msg`に変換する方法を学ばないといけないんでした

> Hello worldとはプログラミング界では「画面に文字を表示してみましょう！」などといった意味です。別になんの文字列でも構いません

# `text`

```elm
text : String -> Element msg
```

文字列を受け取って`Element msg`に変換する関数です

すごく雑に説明すると

```elm
text "textだよ" -- == <div>textだよ</div>
```

こんな感じです

> ##### え、divが付くの？
付いたりします。`Html.text`と違ってelm-uiがよしなにレイアウトするので勝手にdivが付いたりします。ついでにclassも何個かつきます

文字列を表示したいときはとにかく`text`です
簡単ですね

# おわり

文字列を画面に表示できるようになりました

### 宿題

- 好きな文字列を表示してみよう
情報処理安全確保支援士 平成28年度秋 午後1問1

#設問1
**a：エ**
「a」の後に**「ルータ間の通信をすべて暗号化」**とあるため、**トンネルモード**です。
これが**端末間**であれば**トランスポート**になります。

**b：ア**
「片側のルータのIPアドレスが動的に変わる環境」とあるため、**アグレッシブモード**です。
IPアドレスが固定された環境だったら**メインモード**になります。

#設問2
**(1) c：x1.x2.x3.x4**
表1のza.z2.z3.z4はローカルアドレスの項目に記載があるため、LTEルータのグローバルIPアドレスであることがわかります。
ほかのx1.x2.x3.x4、y1.y2.y3.y4は外部アドレスの項目に記載があるためLTEルータ以外の機器がLTEルータと通信を行っています。
この中でz1.z2.z3.z4:22宛て(SSH通信)に通信を行っているのはx1.x2.x3.x4です。

**　d：y1.y2.y3.y4**
表1の中でSMTP通信を利用しているのはy1.y2.y3.y4です。

**(2) パスワード認証を無効化し、公開鍵認証を利用する。**
SSHには**パスワード認証**と**公開鍵認証**の2つがあります。
今回、パスワードの辞書攻撃を受けた痕跡から暫定対策として**公開鍵認証**に設定変更されています。
採点講評にありましたが、「パスワード認証を無効化し」という言葉がないとNGそうです。

#設問3
**(1) e：送信元IPアドレスを監視端末のIPアドレスに限定**
「e」の前に「LTEルータでは、監視端末を利用したい場合にだけ、SSHサービスにアクセスできる仕様にすべきです。」とあるため、TCPWrapperを利用し、許可する送信元IPアドレスを監視端末に限定化すればよさそうです。
TCPWrapperとはUNIX系OSでアクセス制御を行う機能の1つで、今回LTEルータがLinuxで動作しているため、LTEルータに設定を追加したと思われます。

**(2) 中間者攻撃による通信内容の盗聴**
いくつかの組み込み機器ではホスト鍵が同一のものが使用されているため、攻撃者が組み込み機器を購入し、ホスト鍵を入手できれば、ルータと監視端末の間に割り込んでなりすましを行うことが可能になります。

**(3) 作成時：秘密鍵を使用してイメージファイルにディジタル署名を付与する**
**更新時：公開鍵を使用してイメージファイルのディジタル署名を検証する。**
「更新時にイメージファイルが改ざんされていないかを検証できるようにする必要がある」とあります。そのためイメージファイル作成時にディジタル署名を作成し、更新時にディジタル署名を検証する方法をとればよさそうです。
ディジタル署名作成時は、秘密鍵を利用します。検証時は秘密鍵の対である公開鍵を利用し検証を行います。

**(4) LTEルータにログインしてファイルシステムの中から見つける**
イメージファイルを暗号化した場合、複合するのはイメージファイルを持っているLTEルータになります。
そのため、攻撃者がLTEルータにアクセスできれば復号鍵を窃取されてしまう可能性があります。
エラー問題１@import  〜CSSがめっちゃ長くなっちゃった時に使うよ！〜

#@importっていつ使うの？？

ページを作っていて
@importは外部のCSSファイルを取り込むときに使用。

スタイルシートの内容がとても多くなって、いくつかに分割したいときに使う。

##使い方
CSSの最初に記述。

```
@import url("cssファイル名");
```
違う階層のディレクトリにCSSファイルがある場合は、階層を指定する。
例えばCSSディレクトリにCSSファイルがある場合は、

```
@import url("css/cssファイル名");
```
事例:XCodeで実機でビルドできない

## 事例
新たなプロビジョニングプロファイルを作りコマンドラインでビルドを試していたら実機だけでビルドができないことがわかった。
他のプロジェクトも同様に実機でビルドできなくなっていた。

## 対応
結果をみると

```
/usr/bin/codesign '--force' '--sign'
```
のところでエラーが出ていた。
色々試してみたところ次の情報を見つけ、キーチェーンアクセスのロックをトグルしてロック解除にしたところビルドが通るようになった。

https://stackoverflow.com/questions/24023639/xcode-command-usr-bin-codesign-failed-with-exit-code-1-errsecinternalcomponen?noredirect=1&lq=1
OCI Database : バックアップから複製環境を作成

Oracle Cloud Infrastructure (OCI) の Databaseサービスにはバックアップからデータベース環境の複製を簡単に作成する機能があります。アプリの開発環境を複数持ちたい、動作検証を行う環境が欲しいなどデータベースの複製環境を必要とする際に有用な機能ですね。複製環境を作成する手順を紹介します。
# 概要
Oracle CloudのDatabaseサービスにはデーターベースのバックアップを自動で行う仕組みが備わっています。自動バックアップ機能を有効化するとデータベースの増分バックアップが毎日自動で取得され、Oracle CloudのObject Storageに格納されます。このバックアップを使用してDBシステムを作成します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/384729/e53d9e4e-b434-a2b5-a852-99ee3b54a193.jpeg" width=500>

# 前提
+ Oracle CloudでDBシステムを作成済み
+ 自動バックアップ機能を有効化し、バックアップが取得されている
+ 複製環境は同一の可用性ドメイン(Available Domain)に作成する

# 手順
### バックアップの確認
コンソールから複製を作りたいデータベースが含まれているDB システムに移動し、バックアップのリストを表示します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/384729/d0e6aab1-9d54-6ce8-1067-d2e2cc803d4c.jpeg" width=700>

自動バックアップ機能を使用している場合、上図のように日次で取得されたバックアップが表示されます。Type: Incrementalという表記から増分バックアップがとられていることがわかります。増分バックアップといわれても、どの時点から増分バックアップをとっているの？と思われる方もいるかもしれません。自動バックアップの動作としては、初回のバックアップと週末のバックアップをLevel 0 、平日はLevel 1の増分バックアップを行っています。

(補足)
OCI Databaseでは任意のタイミングでデーターベースのフルバックアップを取得することもできます。取得したフルバックアップからもデータベースの複製が作成できます。フルバックアップを取得するには、バックアップリストの上にある 「バックアップの作成」ボタンをクリックします。
このときに取得したフルバックアップは下のように「Type: Full」と表示されます。


<img src="https://qiita-image-store.s3.amazonaws.com/0/384729/cd58c16a-b6d8-d816-f06e-ecc7aa2c1468.jpeg" width=700>

### 複製環境の作成
さて、バックアップを確認したら複製環境を作ってみます。
バックアップの右側のメニューアイコンから「データベースの作成」を選択します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/384729/531c60a3-6cf0-d3f7-8e96-e11464137823.jpeg" width=700>

複製環境の設定を行うウィンドウが表示されるので、項目を記入していきます。
はじめに「既存のDBシステムの使用」か「新規DBシステムの起動」を選択します。
「既存のDBシステムの使用」は、すでに存在しているベアメタルDBシステム上へのデータベース追加を意味しますので、今回は「新規DBシステムの起動」を選択します。すると表示されている項目が変更され、下図のようにDBシステム作成時とよく似た項目が表示されます。
ここで、複製環境となるDBシステムのシェイプの選択やSSH鍵の登録、配置先サブネットなどの設定をしていきます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/384729/787958ba-6d44-6c81-a8a0-c8a168978f8f.jpeg" width=500>

入力が終わったら、ウィンドウ下部にある「データーベースの作成」ボタンをクリックします。
新規DBシステムのプロビジョニングが始まります。しばらくして、DBシステムの表示が「使用可能」になれば、複製環境の作成は完了です。

# 参考情報
Oracle Cloud Infrastructure マニュアル(日本語)

+ [Oracle Cloud Infrastructure Object Storageへのバックアップ](https://docs.oracle.com/cd/E97706_01/Content/Database/Tasks/backingupOS.htm)

+ [バックアップから新規DBシステムを起動するには](https://docs.oracle.com/cd/E97706_01/Content/Database/Tasks/launchingDB.htm#dbsysfrombackup)
3D 散布図を回転 GIF アニメーションにする

Python にて 3D 散布図を描画して回転する GIF アニメーションとして出力したい、ということをやって少しハマったので、最終的にできた方法をまとめる。

GIF アニメに変換する方法としては ImageMagick や FFmpeg を使う方法などがあるが、今回は Pillow を使った。

## データ
今回はサンプルデータとして、ランダムな3次元データを生成したものをプロットすることにする。

``` python
import numpy as np

data = np.random.multivariate_normal(np.zeros(3), np.eye(3), 2**10).transpose()
data.shape  # => (3, 1024)
```

## 3D 散布図を描画する
Matplotlib で 3D 散布図を描画して、それを PIL Image に変換する。

``` python
from io import BytesIO
from PIL import Image
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import axes3d

def render_frame(angle):
    """data の 3D 散布図を PIL Image に変換して返す"""
    global data
    fig = plt.figure()
    ax = fig.add_subplot(111, projection='3d')
    ax.scatter(*data)
    ax.view_init(30, angle)
    plt.close()
    # 軸の設定
    ax.set_xlabel('X')
    ax.set_ylabel('Y')
    ax.set_zlabel('Z')
    ax.set_xlim(-3, 3)
    ax.set_ylim(-3, 3)
    ax.set_zlim(-3, 3)
    # PIL Image に変換
    buf = BytesIO()
    fig.savefig(buf, bbox_inches='tight', pad_inches=0.0)
    return Image.open(buf)
```

``` python
render_frame(30)
```

![](https://qiita-image-store.s3.amazonaws.com/0/16369/715283ec-133c-8ff7-04f1-61a80bb92e5c.png)

## GIF アニメを生成する
角度を変えながら全フレーム分の画像を生成して、GIF アニメとして保存すれば完成。

``` python
images = [render_frame(angle) for angle in range(360)]
images[0].save('output.gif', save_all=True, append_images=images[1:], duration=100, loop=0)
```

![](https://qiita-image-store.s3.amazonaws.com/0/16369/90779a46-d205-fd5f-5f49-12362399b7a2.gif)

※ `range(360)` だと出力された画像が重すぎて Qiita にアップロードできなかったので、上記画像は `range(180)` で出力した
ABC093 C - Same Integers(300点)

#問題概要
[問題のリンク](https://atcoder.jp/contests/arc094/tasks/arc094_a)

$3$ つの整数 $A,B,C$が与えられる。

以下の $2$ 種類の操作を好きな順で繰り返して $A,B,C$をすべて等しくするために必要な操作の最小回数を求めよ。

- $A,B,C$ のうち $2$ つを選んで、その両方を $1$ 増やす
- $A,B,C$ のうち $1$ つを選んで、その整数を $2$ 増やす

#制約条件
- $0≤A,B,C≤50$
- 入力はすべて整数である

#考えたこと
操作はどちらも足し算で$+1$または$+2$なので、$3$つの整数を小さい順に$A,B,C$とすると、最終的に全ての数が$C$または$C+1$となるように操作を繰り返すことになる。

足し算が何回必要かは $(C-A)/2$の商と剰余によってわかる。最小回数を求めるには$+2$の操作を優先するべきなので、まず$2$で割った商が$+2$の操作回数となり、剰余が$+1$の操作回数となる。
例えば$A=3, C=6$の時、$(C-A)/2$の商は$1$、剰余は$1$となり$+2$を1回、$+1$を1回すればよい。

これを$(C-A)/2$と$(C-B)/2$の剰余の結果ごとに場合分けして書けばよい。(剰余だと考えうる場合の数は4通りなので。)

計算量は値の大小に左右されず、$O(1)$となる。

#解答
```c.cs
using System;
using System.Linq;

class Program
{
    static void Main(string[] args) {
        int[] s = Console.ReadLine().Split().Select(int.Parse).ToArray();
        Array.Sort(s);
        Console.WriteLine(solve(s[0], s[1], s[2]));
    }
    static int solve(int a, int b, int c) { //a < b < c
        int count = 0;
        if ((c-b)%2 == 0 && (c-a)%2 == 0) {
            count += (c-b)/2+(c-a)/2;
        }   
        else if (((c-b)%2 == 0 && (c-a)%2 == 1) || ((c-b)%2 == 1 && (c-a)%2 == 0)) {
            count += (c-b)/2 + (c-a)/2 + 2;
        }
        else {
            count += (c-b)/2 + (c-a)/2 + 1;
        }
        return count;
    }
}
```
Wix サイトに Google ドメインを接続する

http://www.guidetojapanese.org/grammar_guide.pdf

Google ドメインを購入し、Wix でサイトを作成している場合、ドメインは自動的に Wix に接続されます。

新しく作成した Wix サイトへの接続を完了するには、Wix アカウント内のサイトをアップグレードする必要があります。

別の Wix サイトを作成、アップグレードする場合、新しく作成したサイトに簡単にドメインの接続を切り替えることができます。
ドメインの接続を切り替える方法：

    こちらをクリックし、Wix アカウントにログインします。
    右上のユーザーパネルにカーソルを合わせ、「ドメイン」をクリックします。
    該当するドメイン横の矢印をクリックします。
    「基本情報」タブをクリックします。
    「ドメイン名の接続先：」横の「変更」をクリックします。
    新しいサイト横で「接続」をクリックします。
javascriptから別のjavascriptの処理を呼出し実行する

## 経緯、目的
会社で運用しているWebシステムのつくりが悪く、
ほとんど同じ処理にも関わらず、画面ごとに別々のjsを作って呼び出しているため、
改修案件が発生すると何本も同じような修正が必要になり、開発コストも障害リスクも高い。
そのため、共通した部分の処理を切り出して別のjsファイルを作成し、
それぞれのファイルから必要に応じて呼び出すようにできないかと考えた。

## 試したこと
共通関数func_a.jsの関数の処理結果を個別処理func_b.js経由で取得し、画面main.htmlに表示する。
というごくごく簡単なモノですが・・・
※共通関数func_a.jsの処理(関数)は、windowオブジェクトのグローバル変数としてセットする。

#### ソース

```html:main.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="Shift_JIS">
    <title>JS共通化サンプル</title>
    <meta name="description" content="">
    <meta name="keywords" content=",,,,">
    <meta name="viewport" content="width=device-width">
    <script src="js/func_a.js"></script>
    <script src="js/func_b.js"></script>
  </head>
  <body>
    <h2>JS共通化サンプル</h2>
    <div>func_a.jsより、func_b.jsの処理を呼び出し実行する</div><br>
    <input type="button" value="テスト" onClick="pushBtn()"/><br>
    
  </body>
</html>
```
```javascript:func_a.js
(function() {
    function hoge() {
        fuga = 'fuga';
        return fuga;
    }
    window.hogeLib= window.hogeLib|| {};
    window.hogeLib.hoge = hoge;
})();
```

```javascript:func_b.js
function pushBtn() {
    // func_a.jsのhogeを呼び出す処理
    var hoge = window.hogeLib.hoge();

    //文字列がアラートに表示される。
    alert(hoge);
};
```

#### 画面イメージ

◆画面表示時
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126315/fd414a9b-860f-38b6-6968-448a7e219bba.png)

◆「テスト」ボタン押下時（アラート表示）
![WS000013.JPG](https://qiita-image-store.s3.amazonaws.com/0/126315/4542fc18-6f59-09d5-0adb-ee88687e2a68.jpeg)


## 結果
ごくごく簡単なサンプルですが、あるjsから別のjsの処理を呼び出すことができることが確認できました。
(そんなコトをするより、各jsの差異を取り込んだ１本のjsに集約した方がむしろ早いし分かり易い、
という意見が社内的には強いですが。)
VitualBoxにKaliをインポートできない。凡ミスログ


『[ハッキング・ラボのつくりかた 仮想環境におけるハッカー体験学習](https://amzn.to/2U0BGCT)』という本の序盤でVitualBoxにKaliをインポートする箇所がある。


インポートエラーで躓いてしまったが、凡ミス過ぎてネットに情報がなかった。
初心者で本を読んでいて万が一同じ状況にハマった人用に残します。

# インポート前の作業
・VitualBoxインストール
・デフォルトの仮想マシンフォルダを/VM_Guest/VBoxに変更（本でココに変更せよとのことで）
・Kaliインストール
・KaliをVitualBoxにインポート


# エラー
以下のエラー内容が。
`仮想アプライアンス"/Users/ユーザー名/Desktop/kali-linux-2019.1-vbox-amd64.ova"のインポートに失敗しました。`
`終了コード : NS_ERROR_INVALID_ARG (0x80070057)`



# 実行環境
・VitualBox：6.0.4
・自分のPC：macOS High Sirra 10.13.4

# 試したこと
①再度インストールし直し、VirtualBoxにインポートし直す。
⇒改善なし

②SHA256Sumの確認 ※[SHA256Sumとは](https://www.atmarkit.co.jp/ait/articles/1711/16/news016.html)

```
shasum5.18 -a 256 ダウンロードしたova
```
⇒サイトのハッシュ値とで一致、ファイルは破損していない。
61e26829e8b2d890da23e0d9878d9422392f1fb9642ed3a884f9cc261babd0a8

③[こちらの記事](https://murabitoleg.com/vm-uuid-error/)を参考にUUIDを再設定
⇒vdi拡張子のファイルがない(初心者はそこまでたどり着けなかった)・・・！

```
VBoxManage internalcommands sethduuid /VDIファイルのあるパス/ファイル.vdi
```



# 解決法
今回デフォルトの仮想マシンフォルダを/VM_Guest/VBoxに作成しており、どうやら権限がないことが原因でした。

```
ls -l
```
⇒drwxr-xr-x

権限がないのが原因？ということでディレクトリの権限を変更。
参考：https://qiita.com/shisama/items/5f4c4fa768642aad9e06

```
sudo chmod 777 VM_Guest
```

777の必要はないですが、とりあえずこれでインポートできます。
<img width="656" alt="スクリーンショット 2019-03-27 9.30.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/244525/f49d2084-1173-d050-eacc-5196a794f35b.png">


凡ミス。しかしはまったのでもし同じ状況の人がいればご参考に。
v-forでdataを取得する時にはv-bind:key設定も必須

v-for で data を取得している箇所では v-bind:key を指定していないと、npm run build を実行した時に「Custom elements in iteration require 'v-bind:key' directives」というエラーが発生します。

ローカルでの動作確認を npm run serve で実施していた段階では、ブラウザ上には正しく表示できてしまっていたので気づきませんでしたが、実際にはエラーも発生していました。

調べてみると、以前は任意だったものが、Vue.js 2.2.0以降では必須になったようです。

以下の例は、MyCardというコンポーネントをv-forで複数個表示しようとしているサンプルコードの断片です。

- 誤っていたコード

```vuejs
<v-flex v-for="item in items" xs12 sm6 md4>
  <MyCard v-bind:title="item.title" v-bind:content="item.content"/>
</v-flex>
```

- 正しいコード

```vuejs
<v-flex v-for="item in items" v-bind:key="item.id" xs12 sm6 md4>
  <MyCard v-bind:title="item.title" v-bind:content="item.content"/>
</v-flex>
```


なお、上記コードと同じ.vueファイル内に以下のデータが入れてあり、それを取得しています。
（サンプルプロジェクトのため、データを外部ファイルにしていません）

```vuejs
<script>
import MyCard from './components/MyCard.vue'

export default {
  name: 'App',
  components: {
    MyCard
  },
  data () {
    return {
      items: [
      { title: 'タイトル1', content: 'コンテンツのサンプル1' },
      { title: 'タイトル2', content: 'コンテンツのサンプル2' },
      { title: 'タイトル3', content: 'コンテンツのサンプル3' },
      { title: 'タイトル4', content: 'コンテンツのサンプル4' },
      { title: 'タイトル5', content: 'コンテンツのサンプル5' },
      { title: 'タイトル6', content: 'コンテンツのサンプル6' }
    ]
    }
  }
}
</script>
```

###参考になったサイト
https://qiita.com/FumioNonaka/items/d1d9c9335116426a8316
https://jp.vuejs.org/v2/guide/list.html#key
https://github.com/vuejs/vetur/issues/261
Vue.js + UIKitによるSPA開発環境構築

# はじめに
フロントエンド環境の構築に関して最低限必要な手順を残します。
以下の環境を使って構築しました。

| 環境             |       Version     | 
|:-----------------|------------------:|
| OS               | macOS Mojave 10.14.3 |
| node.js          |           10.13.0 |

# なぜ
### なぜフロントエンドか？
提供しているプロダクトの責務とコンテキスト境界を考えたとき、サーバサイドアプリケーションだと重すぎるし、冗長機能ができそうな予兆がみられました。
また全ての機能を同じアプリケーションに搭載した場合、ビジネスのスピード感についてゆかなくなる時がくる、つまり技術的負債を溜め込みやすい体質になるのではないかという懸念があり、フロントエンドとバックエンドサービスは分断することにしました。

### なぜVue.jsか？
自分が経験した開発の歴史はJQueryゴリゴリ→Knockout.js（MVVM）のような流れを辿ってきました。
Vue.jsはたまたま出会ったのですが、JSフレームワークのデファクトであるバインディング機能はもちろん、CLIによるワンタッチでの環境構築、ルーティング機能がとても便利だと感じた点と、学習コストが低いという定評がある点から選びました。

### なぜUIKitか？
BootStrapは飽きたのと、いくつかCSSフレームワークを見た上でUIKitが一番シンプルで自分好みだったからです。

# 手順
環境構築する手順は以下のとおりです。

### １．vue-cliのインストール
```
$ npm install -g @vue/cli
```
※すでに古いバージョンのvue-cliがインストールされている場合はアンインストールしてください。

```
$ npm uninstall vue-cli
```

### ２．vueプロジェクトの作成
```
$ vue create my-project
```
### ３．vueプロジェクトに移動
```
$ cd my-project
```
### ４．UIKitのインストール
```
$ npm install uikit
```
### ５．UIKitの読み込み
main.jsにUIKitを読み込むよう、以下の内容を追記

```src/main.js
import UIkit from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'
import 'uikit/dist/css/uikit.css'
import 'uikit/dist/css/uikit.min.css'
UIkit.use(Icons)
```
### ６．ビルド
以下のコマンドでビルドし、http://localhost:8080 をURLバーに入力するとVue.jsの初期画面（ロゴ）が表示されます。

```
$ npm run serve
```

# 参考

自分が環境構築の際に、一番手こずった点はUIKitのimport部分です。
最初vue-cliをインストールした後、公式サイトから落としてきたUIKitを適当なフォルダに入れて\<script\>で読み込もうとしましたが、うまくいきませんでした。

そこでUIKitもnpmでインストールするように変更し、node_modulesの載せた状態でmain.jsにimportさせると上手くいったので、その手順を載せておきます。
トランザクションストレージエンジンを調べてたらアバウトにmysqlを全部知ることになった話

# トランザクションストレージエンジンを調べていたら
これを理解するためには殆どMySQLの全容を必然的に知ることになる、そんな気がしました。
MySQLにデータを入れる、というのがよく聞く話だと思います。筆者も前までそんなイメージでした。しかし、データ管理のシーケンスは、そんな単純なものではありませんでした。

以下、MySQLのシーケンスです。

```
クライアントからのリクエスト
　　　　　↓
コネクタ and コネクションプール
　　　　　↓
　パーサ and キャッシュ
　　　　　↓
　　オプティマイザ
　　　　　↓
　　ストレージエンジン
　　　　　↓
　　ストレージファイル
```

結構後の方に知りたいストレージエンジンが出てくるんですね。

というわけで、上から1個1個潰していくことにします。

## コネクタとコネクションプール
コネクタは、様々なプログラミング言語からアクセスするためのドライバ

コネクションプールとは、接続待機している状態のプロセス（コネクション）を一定数確保（プール）させているところ。ここでプールされているコネクションは、接続のリクエストが来たら順次使用できるようになっていて、接続する際の負荷を軽減させる仕組みです。ストックしているコネクションを上回るアクセスが来た場合、空きができるまで、クライアントのリクエストは待機状態になります。

## パーサとキャッシュ
無事にコネクションプールから、コネクションを渡されたクライアントのデータは、パーサとキャッシュに来ます。
パーサとは、SQLクエリの解析を行います。mysqlのコマンドラインツールから打ち込んだクエリはここで解析されるんですね。

キャッシュとは、SQLクエリとその結果をストックしてくれます。

## オプティマイザ
パーサで解析されたクエリを最適化します。

## ストレージエンジン
ようやく本題です。
ストレージエンジの役割を先に書きますと、

- データ変換
- インデックス
- メモリ利用
- トランザクション
- 同時実行性(排他制御)
- ユニークファンクション（MyISAMの空間情報インデックスなど）

上記が主だった機能です。インデックスやトランザクション、排他制御といった中核を担う機能を持ってるんですね。

### このエンジンには大別して２種類ある

####トランザクションストレージエンジン
トランザクション機能をサポートしている
代表格かつ、mysqlのdefault-storage-engineがInnodb


####非トランザクションストレージエンジン
トランザクション機能をサポートしていない
以前はmysqlのdefault-storage-engineだったMyISAM

### ストレージエンジンソフトウェアは、他にもいっぱいある
Memory
Archive
NDBCLUSTER
CSV
Merge
Federated
Example
Blackhole

などなど・・・それぞれにユニークファンクションがある。
POIの非推奨バージョンでJUnit起動時にエラー

# はじめに
とあるプロジェクトにて単体テストクラスがエラーを吐き続けていたため、原因を調査。
その時の調査過程のメモです。

# 発生していたエラー
```
SLF4J: Failed toString() invocation on an object of type [org.apache.poi.hssf.usermodel.HSSFRow]
java.lang.AssertionError: hashCode not designed
    at org.apache.poi.hssf.usermodel.HSSFRow.hashCode(HSSFRow.java:704)
    at java.lang.Object.toString(Object.java:236)
    :
    :
```

上記エラーのため、デバックログの出力に失敗していた。
（それでもテストクラスの実行はできてた）

# エラー発生箇所を見てみる
エラーが起きているHSSFRow.javaを見てみる

```
702: @Override
703: public int hashCode() {
704:     assert false : "hashCode not designed";
705:     return 42; // any arbitrary constant will do
706: }
```

どうやらhashCodeメソッドが呼ばれるとAssertionErrorが発生する実装になっている様子。

# ライブラリのバージョンを確認してみた
少し悩んでとりあえず各ライブラリのバージョンを確認してみることに。

- DBUnit：2.5.1
- POI：3.12

↑のバージョンが正しいのか調べるためGoogle先生に聞き込み。
（[DBUnitを使用した結合試験データの積み込み](https://qiita.com/tamurashingo@github/items/e37697796001bb40f0d2)の記事を参考にさせて頂きました。）

# POIが推奨されるバージョンではなかった
参考にさせて頂いた記事によると、POIのバージョンは3.2-FINALを使う、とのこと。
試しにバージョンを切り替えてみたところエラーの発生は無くなった。
Windows7でWindowsUpdate出来ないので

https://www.atmarkit.co.jp/ait/articles/1712/06/news032.html
の設定をしたのですが

```
手順（1）：スタートメニューから「すべてのプログラム」→「アクセサリ」を開き、コマンドプロンプト右クリックして、コンテキストメニューから「管理者として実行」を選択します。
手順（2）：「管理者：コマンドプロンプト」ウィンドウで、次のコマンドを実行します。
C:\Windows\System32> net stop wuauserv
C:\Windows\System32> ren %Windir%\SoftwareDistribution SoftwareDistribution.old
C:\Windows\System32> rd %Windir%\SoftwareDistribution.old /S
C:\WINDOWS\SoftWareDistribution.old、よろしいですか（Y/N）? y
C:\Windows\System32> wuauclt /detectnow
```

そのあとWindowsUpdateしたが帰って来ない……

困った……(T_T)
サポートの作業を自動化していく（第一部最終回 StackStorm Workflow編）

# はじめに
4回に渡ってお送りしてきたStackStormを使ったサポート作業の自動化ですが、うっかりWorkflowの紹介をしていませんでした。

# 背景と目的
## 背景
StackStormでAnsible Packを無事使えるようになりました。今回はStackStormの全体のWorkflowを紹介します。

## 目的
ログインと設定ファイル作成の手間を省き、GUIで作業できるようにStackStormをフロントエンドとして立ち上げていきます。

### 今回やること
+ StackStormのWorkflowの作成

### 今回はやらないこと
+ 独自Dockerイメージの作成

# 手順
1.　メタデータ
まずはメタデータファイルを作成します。
ここではDB立ち上げに使う変数を定義しています。
今回はコンテナ名、DBアクセス用のTCPポート番号、取り込むDumpファイルがおいてあるパスを変数として扱います。
メタデータは```/opt/stackstorm/packs/<mypack>/actions```に通常配置しますが、
今回はコンテナにマウントしているため、```/home/kannosan/<mypack>/actions```に配置します。

```stackstorm:createSQL.meta.yaml
name: createSQL
enabled: true
pack: rcpsupport
entry_point: 'workflows/createSQL.yaml'
runner_type: "mistral-v2"
parameters:
  container_name:
    type: "string"
    required: true

  db_port:
    type: "string"
    required: true

  folder_path:
    type: "string"
    required: true
```

2.　Workflow
処理の実態となるWorkflowを記載したファイルを作成します。
今回はWorkflowと言いながら、シングルアクションになっています。
処理自体は単純にAnsibleのPlaybookを呼び出し、そちらでコンテナ作成、DB立ち上げをさせています。
このときAnsibleのPlaybookはコンテナから見たパスとなるので、
ローカルホストのパスではなくコンテナにマウントされたパスとなることに気をつけてください。
こちらのファイルは```/opt/stackstorm/packs/<mypack>/actions/workflows```に通常配置しますが、
やはりコンテナにマウントさせるため、```/home/kannosan/<mypack>/actions/workflows```に配置します。

```stackstorm:createSQL.yaml
---
version: '2.0'
rcpsupport.createSQL:
  input:
    - container_name
    - db_port
    - folder_path
  tasks:
    createSQL:
      action: ansible.playbook
      input:
        playbook: /root/ansible-playbook/create_sql_container.yml
        extra_vars:
          - container_name="<% $.container_name %>"
          - port="<% $.db_port %>"
          - base_path="<% $.folder_path %>"
```

以上のファイルを作成し、コンテナのStackStormを立ち上げるとStackStormのWeb GUIにWorkflowが登録されているはずです。
あとは問い合わせが来たら、適宜、名前・ポート番号・貰ったファイルパスを入れるとDBが立ち上がります。

# まとめ
これまで問い合わせがあってからDB立ち上げにコマンドを毎回打って30分位拘束されていました。
これを利用するようになり、コマンド打って待っていればDBが立ち上がっているので、拘束時間は5分程度に短縮されました。
そこそこ効果があったと自負しています。
今回は自動化の基盤の構築＋DB立ち上げのタスクの自動化をお届けしました。
まだまだ、自動化できるタスクはあるので、自動化が実現できたらまたご紹介していきたいと考えています。
Wix Codeがリリース!JavaScriptの使用やデータベース連携が可能に!

WixでJavaScriptを使いたい!
データベースと連携して大量にページを自動生成したい！

と言う要望を実現するためのツールです。

インポートしたExcelと連携してページ出力が出来るなど、
大量ページ作成がかなり簡単になっており、Wixの印象がかなり変わりました。

データベース連携が出来れば、
今まで出来ないと思っていた他サイトからのデータ移行などもスムーズに出来そうですね。

公式サイトによると以下のような事が出来るようになるとの事です。

    具体的には、動的ページの作成、サイト訪問者の情報収集、データベースの情報抽出、訪問者の行動に沿ったインタラクティブなサイト作成、Wixと外部APIの連動、など様々なことが簡単にできるようになります。

    Wix Code新登場 : コーディングの力で限りない拡張性を実現する新ツール｜Wix公式ブログ

データベース連携の機能の使い方

Wix Codeには沢山の機能があるのですが、本日はデータベース連携の使い方をご紹介。
Wix Codeを有効にする

まずはWix Codeの機能を有効にします。

20180108 01

↑サイトエディタを表示し、「ツール」から「デベロッパーツール」にチェックを入れます。

20180108 02

↑すると、「サイト構成」の中に「Database」と言う項目が表示されます。

「+」ボタンをクリックし、「New Collection」を選択します。

20180108 03

↑「作成をはじめる」をクリック

20180109 08
↑データベースコレクションの名前を入力します。

英数字のみ入力可能ですので分かりやすい名前をつけてください。

「What’s this database collection for」の欄は
「Site Content」とします。

その後、「Create Collection」をクリックします。
git勉強ネタ staging環境では git fetch origin developmentが楽

gitのリモートリポジトリーにmasterとは別でdevelopmentブランチがあるとする。
これをローカルにfetchする。

```
git fetch origin development

 * branch            development -> FETCH_HEAD
```

↑によって、ローカルのリモート追跡ブランチ origin/developmentが生成されたはずだが、
`git branch`を確認してもmasterしかない。

```
$ git branch
* master
```

↓
↓
◇`git checkout FETCH_HEAD` すると**development**ブランチに切り替わる。

```
git checkout FETCH_HEAD
```

```
$ git branch
* (HEAD detached at FETCH_HEAD)
  master

```

ブランチ名が`(HEAD detached at FETCH_HEAD)`となっているが中身はdevelopmetブランチ。


staging環境などで、**masterへマージしたくないけど動作は確認したい** という時に使えそう。
仮想ページview 

仮想ページビューとは

Googleアナリティクスのタグに特殊な設定を加えてることで、同一URLで計測できなかったページや、pdf資料のダウンロードを、「仮想ページ」としてトラッキングする方法です。

「仮想ページビュー」という名前のとおり、実際には計測できないページを、Googleアナリティクス上で架空のページビューを発生させて計測するための機能です。
この機能を利用すると、本来のURLを変えることなく、詳細なアクセスデータを計測することができます。
この手法はバーチャルページビューともよばれます。

今回は、この「仮想ページビュー」の設定方法をご紹介します。
オススメの利用シーン

仮想ページビューは、以下のシーンでおすすめの設定です。

    「フォーム入力ページ」「内容確認ページ」「入力完了ページ」のURLが同一でも各ページの実績を計測したい
    pdf資料のPV数を計測したい

今回は、「フォームの入力ページ」「内容確認ページ」「入力完了ページ」のURLが同一で、各ページの数値を計測したい場合の設定方法を例にご説明します。

（関連記事：「AIが自動でサイト分析！GoogleアナリティクスのAssistant機能の実力は？」）
設定方法
1）設定可能なページかどうか確認する

入力、確認、完了ページに、それぞれのGoogleアナリティクスタグを設置する必要があります。
システム的にできない場合もあるため、事前に確認しましょう。
2）タグの記述を変更する

Googleアナリティクスタグに、下記のような記述を加えます。

例：フォームのサンクスページに仮想ページビューを設定する場合
1
2
	
ga('create', 'UA-XXX-X', 'auto');
ga('send', 'pageview', {'page': '【任意のURL：thanks.html】', 'title': '【任意のタイトル：thanks】'});

【 】内は任意の文字を指定します。

'page'：Googleアナリティクスに認識させたいURLを入力します。
※この記述を加えると、本来のURLを変えることなく、Googleアナリティクス上で指定したURLとして計測されます。

'title'：ページのタイトルを指定します。こちらも任意のものが設定されます。

（関連記事：「プロが厳選！絶対に入れておきたいアクセス解析ツール4選」）
確認方法

設定ができたら、早速確認しましょう！
Googleアナリティクスの「リアルタイム」機能を使った確認方法を説明します。
リアルタイム機能とは

リアルタイム 機能とは、Webサイトで発生しているセッションやコンバージョン等をリアルタイムで確認できます。以下のような場合にぜひ使いたい機能です。

    Googleアナリティクスの目標設定を変更したので、計測できているかすぐに確認したい
    Googleアナリティクスタグに変更を加えた(クロスドメインや、仮想ページビュー等)ので機能しているか確認したい
    イベント トラッキングを新たに設定したので、機能しているか確認したい

1）Googleアナリティクスの「リアルタイム」を選択

まずはGoogleアナリティクスを開きましょう。
下記のように、レポート画面内の「リアルタイム 」をクリックし、「概要」を選択してください。
Magento 2 Development and Its Extensions

FME is the name you can trust when it comes to Magento 2 eCommerce development. With more than 7 years of professional services in the field of Magento e-Commerce development and consultancy, FME has attained a good reputation in the market. Since the release of Magento, the company has been working dedicatedly on e-Commerce projects and has achieved a high level of standards. Discussing here two of the best selling Magento 2 Extensions that would definately increase your revenue:

## [Magento 2 Hide Price and Add to Cart Button](https://www.fmeextensions.com/hide-price-add-to-cart-magento-2-extension.html)
If you have an ecommerce store and you want to restrict some customers from buying and even seeing product price then You should not have to worry about, because FME has an extension that will resolve your worries regarding this issue. Magento 2 Hide Price and Add to Cart Button, by using this extension you will easily hide add to cart button and even price from the specific users. Magento 2 Hide Price & Add to Cart extension conceals the price and Add to Cart button of specific products from selected customer groups, store views and countries. To personalize you can choose to only hide the price, Add to Cart button or both from your product page. You can also replace price or Add to Cart button with custom text message, image, quote form or a link to another page.
![hide price.png](https://qiita-image-store.s3.amazonaws.com/0/386249/431ab8fd-0ccf-474b-911c-0fe49402ee7a.png)

## [Magento 2 add customer attribute extension](https://www.fmeextensions.com/magento-2-customer-attributes-extension.html)
If you have an ecommerce store and you want to have multiple types of registration forms for users but don't want to code or hire a developer for it, then you must try this Magento 2 add customer attribute extension developed by FME. Magento 2 Customer Attributes extension gives you a full-featured experience to create multiple registration fields and attach them to the sign-up form of your website. You can add different types of customer attributes fields such as file upload, image upload, text, date, message, radio options and arrange them in a custom order.

![attribute.png](https://qiita-image-store.s3.amazonaws.com/0/386249/a28be93c-8c25-2cd5-dab4-3d1357bf3c7d.png)
RealtimeDatabase のデータ修正を自動化するためのスクリプト

# 結論

```zsh

#!/bin/zsh
function fix () {
    expect -c "
    spawn firebase database:update $1 <JSONのパス>
    expect \"(y/N)\"
    send \"y\n\"
    expect \"View data at\"
    exit 0
    "
}

# ↓これをループ処理でよしなにしてどうぞ
fix <DB内のパス>


```

# あってないような説明（ダブルミーニング）

* `firebase database:update`で任意のパスの値を書き換えられるぞー。
    * `update`と`set`の違いは公式で確認してくれよな。
* `expect`コマンドを使うとCLIの操作を自動化できるぞー。
* expectはインストールしろみたいな情報もあるけど多分入ってるから`man expect`で確認してどうぞ。
* `send \"y\n\"`の`\n`がEnterと同じ意味やで。
* `expect`の引数は適当でも意外とマッチするぜ。
* `exit`のタイミングは考えないと処理が途中で終わっちゃうね。まあTry&Errorしてみよか。

# おわりに

* シェルクソ雑魚パーソンなので謎に時間を消費したのにむしゃくしゃして書きました。
* [Firebase-CLIの公式リファレンス](https://firebase.google.com/docs/cli/?hl=ja#database_commands)、説明少なくね？（まあそんなもんか？）

# 参考文献

* [Macにおけるバックスラッシュ（\）の入力方法](https://qiita.com/miyohide/items/6cb8967282d4b2db0f61)　　←笑いどころ
* [Firebase-CLI 公式リファレンス](https://firebase.google.com/docs/cli/?hl=ja#database_commands)
* [Firebase-CLI ( Realtime Database 操作)　#firebase](https://qiita.com/bohebohechan/items/f30f8ebd71bda789a330)
* [対話式のコマンドをスクリプト化する方法](https://qiita.com/dogyear/items/e58ddab9a49bf82ed43f)
* [Linuxの対話がめんどくさい?そんな時こそ自動化だ！-expect編-](https://qiita.com/ine1127/items/cd6bc91174635016db9b)
もそ、プログラミングを学ぶ【Ruby & Rails復習編】〜本引数と仮引数の違いってなに？〜

相変わらずエラー問題に苦戦中の もそ。
やさしい先輩たちから「この部分はRubyの復習をしてみるといいかも」というアドバイスをもらい早速Rubyを復習しています。

すると早速、
「げっ、ここって意味がよくわからなくてスルーしたところじゃん...」
となっていたところが出てきました。
Railsを学んだのでなんとな〜く分からんでもないのですが、理解を深めるべくリベンジしました。

今日はそんなRubyの**本引数と仮引数**について書いていきます。


#引数について

まずは引数(ひきすう)についておさらいします。

引数は、プログラムでメソッドなどに渡すことのできる値です。
変数の値には使える範囲が決まっていて、これを**スコープ**と呼びます。
たとえば、**あるdef~end内で定義した変数は、ほかのメソッドでそのまま使うことはできません**。

引数を使うことでメソッドの外にある変数、つまりスコープ外にある変数をメソッドの中で使うことができます。

そして引数には、メソッドを呼び出す部分に記述する**本引数**とメソッドを定義している部分に記述する**仮引数**の２つがあります。
コードを実際に見てみましょう。

```rb

① def multi(input)←()内は仮引数
    puts input * input
   end

② puts "何か数字を入力してください"
   input = gets.to_i

③ multi(input)←()内は本引数
```

こんな感じです。
コードが読み込まれて処理される順番は③→②→①となります。
③と②でスコープを定義して、引数を使うことで①に変数を渡しています。

ひとつポイントなのが、**仮引数の名前は本引数と違ってもいい**ということ。
先ほどのコードの流れは、
③のinputという本メソッド内に②gets.to_iという数値を入れて、①で結果を表示する　
というものでした。
これは方程式と同じで、仮の名前に数値を代入しているので、「x=aとして　x+1*10=aを解きなさい」という数学の問題と同じような感覚です。

なので先ほどのコードは、

```rb

def multi(number)
    puts number * number
    return number * number
  end

  puts "何か数字を入力してください"
  value = gets.to_i

  multi(value)
```

と表すことができます。

##スコープの範囲に注意

次に、このようなコードで考えてみましょう。

```rb
① def rename(name)
    name = "もそと#{name}"
   end

② name = "ポチ"
   rename(name)
   puts name
```

このコードを実行すると、出力結果は「ポチ」だけになります。
では、「もそとポチ」と出力するにはどうすればいいでしょうか？

このコードのポイントは、何回も出てきている"name"の記述。
同じ名前が出てきているのですが、**実は①と②で中身が違います**。



...意味分かんないですよね。**私もわからないです。**

というわけで、LINEでポチに泣きつきました。


<img width="375" alt="無題1160 3.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/372174/1d07cd4b-9175-a335-cdb0-00d5252e187f.jpeg">


「え、これ外側で名前変えてるだけだからでしょ（即答）」


ここでポチのいう外側は②の部分。

```rb
① def rename(name)
    name = "もそと#{name}"
   end

② name = "ポチ"
   rename(name)
   puts name
```

②のコードでは、
「name=ポチとして、rename(ポチ)にします。ではnameを出してください」
と記述しています。
最初にname=ポチと言っているので、ここで指すnameの中身は「ポチ」になります。


では①の部分はどうでしょうか。
「rename(name)を定義します。name=”もそとポチ”です」

よくよく考えてみてください。
これ、**②と①でnameで指示しているnameの中身が違います**よね。


なので出力結果を「もそとポチ」にするには、

```rb
① def rename(name)
    name = "もそと#{name}"
   end

② name = "ポチ"
   name=rename(name)
   puts name
```

このように記述すればよいのです！なるほど〜！


--
ふわふわしていた引数の考え方が、やっときちんと理解できた...気がします（理解したとは言っていません）
配列と本引数/仮引数はややこしいとポチも言っていたので、ここは焦らず少しずつ理解を深めていこうと思います。
果たして理解できる日は来るのか...もその修行は続く。
Floating Parametersを表示する

よく忘れるので備忘録。
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/102231/a00e7422-11a2-8483-67b9-b48e725c3358.png)

下記のメソッドで、特定のパラメーターをフローティングウィンドウで開ける。

```
op('オペレーター名').openParameters()
```

![無題2.png](https://qiita-image-store.s3.amazonaws.com/0/102231/e471d57f-834d-eceb-9f56-a293296f4e19.png)
![無題3.png](https://qiita-image-store.s3.amazonaws.com/0/102231/5af31d1b-0ea3-d9ae-fc2c-85f900862bdf.png)