OmniAICreator/Qiita-1.07M huggingface dataset:
Linuxまとめ（自分用）

# 本稿について
Linuxについて、これまで体型だって学んだことがなかったので、本とかネットとかで勉強して
まとめてみようと思ったしだい-ω-


# テキスト至上主義
linuxシステムではデータをできる限り`テキストファイルに保存`する習慣がある
そのため各アプリケーションはテキストで表現できるデータは極力テキストで出力するように作られている
テキストファイルに保存すればユーザは必要に応じて自由に編集できる上他のマシンにコピーすることも簡単にできる

# フリーソフトウェアの集合体
一般的にLinuxの特徴として1番に挙げられるのが「フリーソフトウェアである」という点
linuxシステムとは、様々な組織や個人によって開発されたフリーソフトウェアの集合体であり、
一つの企業によって開発・ライセンス販売されるOSとは多くの点で異なる

# Ubuntu
Devian GNU/Linuxから派生したLinuxディストリビューション
誰もが無料で利用できる

# インストール
## インストールのタイプ
PCにLinuxシステムをインストールする前に、デスクトップ環境を利用するのか、
  サーバ機能だけを利用するのかを決めておく

  * デスクトップ環境をインストールしておけば、Webブラウザと端末エミュレータや
    ほかのGUIアプリケーション間で簡単にコピーペーストできる

    | 項目         | スペック             |
    | ---------- | ---------------- |
    | CPU        | 1Ghz以上           |
    | メモリ        | 1024MB以上         |
    | ストレージの空き容量 | 5GB以上            |
    | ディスプレイ     | 解像度1024*768ドット以上 |

  * サーバとして利用する場合、
    X Window Systemやデスクトップ環境はインストールせず
    デスクトップとして利用するには性能が低すぎるPCにLinuxを学習用として
    インストールする場合、この方法でインストールすると良い
    実用するサーバを構築するのであれば、使用するサーバソフトウェアや
    コンテンツ、アクセス数などに応じたマシンを用意する必要がある
    サーバとしてインストールした場合、そのPCに接続されるモニターには基本的に文字だけが出力される
    学習環境として使うのなら、他にWindowsなどのOSがインストールされたコンピュータからSSHなどを利用して
    ネットワーク経由で接続して利用すると良い

## PCの準備とインストール
用意したPCをLinux専用にする方法の他、下記の2種類
  * Windowsと共存させる場合、起動するOSを電源投入時に選択するデュアルブー ト方式
  * VirtualBoxなどの仮想マシンを使いVagrantなどで立ち上げる方法（これはまた別途まとめたい）

# インストール後の作業
* VirtualBoxの仮想PCにUbuntuインストール
VirtualBoxの仮想マシンにLinuxをインストールした場合、ゲストOSであるLinuxに
`Guest Additions`というソフトウェアをインストールしておく
それにより、ウインドウの大きさを自由に変えることができるようになり、
ホストOSでコピーした文字列をゲストOSに張り付けたり、その逆ができるようになったりする
Guest Additionsのインストール手順は以下の通り

1. 更新可能なパッケージをアップデートし、再起動が求められた場合は再起動しておく
2. dkmsパッケージをインストールする
3. VirtualBoxのメニューで　デバイス　→　Guest Additionsのインストールを選択
4. 表示されたダイアログで`オートランの問い合わせ`を開くを選択してOKクリック
5. パスワードの入力をして認証
6. Press Return to close this window　と表示されたら`Enter`を押し再起動
 
* 端末エミュレータの起動
  <br>
  アプリケーション　→　アクセサリ　→　端末　を選択。
  <br>
　GNOME端末という端末エミュレータが起動する

# まとめ
* Linuxとはosの核となるカーネルを指し、GNUプロジェクトなどで開発されたフリーソフトウェアと
  組み合わせることでOSの機能を果たすことができる

* GNU GPLは代表的なフリーソフトウェアのライセンスで、ソフトウェアが永久に自由であることを保証する

* Linuxディストリビューションを利用すれば簡単にLinuxシステムをインストールして利用できる

* Linuxディストリビューションは数多くリリースされており、入手や利用に料金がかかるか、
  ターゲットとしている機器や利用分野、リリース感覚、
  リリースごとのサポート期間、開発プロセスが公開されているかどうか、などの点で違いがある

* Linuxシステムには、管理作業がCUIで行われる、
  ユーザ管理を意識して操作・管理する必要がある、
  テキストデータが中心的に利用される、フリーソフトウェアの集合体である、
  利用できないハードウェアがある、などの特徴がある

* 結局体型だって勉強できてないしまだまだ。追加修正あれば随時更新-ω-
スクリプトからTextAlignment(テキスト位置)を変える

TextAlignment(上下、左右、真ん中)をスクリプトから変える方法です。
英語の記事しか無かったので書きました。

```c#

//左上
text.alignment = TextAnchor.UpperLeft;
//上
text.alignment = TextAncor.UpperCenter;
//右上
text.alignment = TextAncor.UpperRight;
//左
text.alignment = TextAncor.MiddleLeft;
//真ん中
text.alignment = TextAncor.MiddleCenter;
//右
text.alignment = TextAncor.MiddleRight;
//左下
text.alignment = TextAncor.LowerLeft;
//下
text.alignment = TextAncor.LowerCenter;
//右下
text.alignment = TextAncor.LowerRight;

```
【form_for】初めてのselectボックス実装

hamlでのform_for の`selectタグ`実装方法についてです。

**ビューのイメージ**
![Alt text](https://gyazo.com/f136ad29f9a2cf7af056e11ea28ac249/raw)

# `collection_select` か `select`か？
- DBから取得 → f.collection_select タグ
- 自分で配列を定義した場合など → f.select タグ

#基本の構成
```haml:haml
= f.collection_select :カラム名(プロパティ名), 選択肢の配列,　：value属性, :選択肢の表示, {オプション}, {HTMLオプション}
= f.select :カラム名(プロパティ名), 選択肢の配列, {オプション}, {HTMLオプション}
//選択肢を場合に応じて、変更・指定したい時
= f.select :カラム名(プロパティ名), options_for_select(選択肢の配列.map{|c|[表示する値, valueにする値, {追加属性}]}, 初期値のvalueを指定), {オプション}, {HTMLオプション}
= f.select :カラム名(プロパティ名), options_for_select(選択肢の配列.map{|c| [c[:表示したい値], c[：valueにしたい値]]}), {オプション}, {HTMLオプション}
```
※ **mapメソッド**：要素の数だけ繰り返し、配列を作成する。戻り値がない時は、配列にnilが入る。

- **カラム名(プロパティ名)**：コントローラで、どんな名前として値を受け取りたいか？  
(例)params[:form_withで指定したモデル名][:カラム名]
- **選択肢の配列**：選択肢の表示に使うデータ(optionタグに設定されるデータ) ※必ず配列か、ハッシュの型。
- **value属性**：valueとして取得したいカラムを指定。
- **選択肢の表示**：optionタグに設定したい値のカラムを指定。
- **オプション**：初期表示したい文字列の定義、デフォルトで選択したい値の指定など。
- **HTMLオプション**：id名、class名など。※設定しない場合は 空のカッコ{}が必要。

# 初期値として、optionに定義していない文字列を表示する時の注意点
**promptとinclude_blankの違い**
**・** 使い回さない場合(1回っきりの使用限定)  → `prompt:選択してください`
**・** 使い回したい場合  → `include_blank：選択してください`

例えば、新規登録ページの実装時に、同じビューを使って編集ページの実装を考えている場合、promptを使ってしまうと、編集ページで表示されない!！っと詰まりました。

**参)実装したコード**

```haml:haml
=f.collection_select :item_condition_id, ItemCondition.all, :id, :name, {include_blank: "選択してください"}, {class: "item_condition_box"}
```
# 
DBからデータ取得してselectで表示する時の注意点
ubuntu版Dockerを毎回sudoなしで実行したい

# はじめに

ubuntu内にDockerをインストールしたけどコマンドを実行する前にsudoをつけないといけないのが面倒なのでどうにかしたい。
主に以下の記事を参考にしました。
[dockerコマンドをsudoの付与無しに実行できるようにする](https://www7390uo.sakura.ne.jp/wordpress/archives/631)


# やること

```
$ getent group docker
docker:x:999:
```
ubuntuにはユーザグループという概念があり、そのグループに入っているユーザに指定した権限を付与するということを行うことができます。`getent group docker`で現在のDockerグループに入っているユーザを確認すると、誰もユーザがいないため追加してあげる必要があります。

```
$ sudo gpasswd -a katoyu docker
Adding user katoyu to group docker
```
`gpasswd` を用いてDockerグループにPCのユーザ（私はkatoyuなのでkatoyuと入力）を追加します。

# ユーザグループの確認

```
katoyu@katoyu-System-Product-Name:~$ id katoyu
uid=1000(katoyu) gid=999(docker) groups=999(docker),4(adm),24(cdrom),27(sudo),30(dip),46(plugdev),116(lpadmin),126(sambashare)
```
`groups=999(docker)`とあるので、Dockerグループに入れているということになります。

```
$ getent group docker
docker:x:999:katoyu
```
`getent`でもユーザが追加されているのがわかります。

# つまづいたところと解決法

dockerコマンドを入力してみます。

```
$ docker images
Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.40/images/json: dial unix /var/run/docker.sock: connect: permission denied
```

アクセス権限ないって言われてる。ターミナルを再起動してもダメでした。
これについては、PCを再起動する必要があります。参考した記事にある「ログアウトしてログイン」はTerminalの話と勘違いしていました。

再起動（or ユーザからログアウトして再ログイン）してdockerコマンドを実行しました。

```
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
hello-world         latest              bf756fb1ae65        3 months ago        13.3kB
```
とてもめでたいですね。
プログラム書いてない人に技術負債、開発のしにくい状況をたとえで説明する

# なんでこの記事を書こうと思ったのか
フロントエンド、バックエンドエンジニアをしています、ku6ryo です。ここ半年、社内で主にバックエンドの技術負債解消に取り組んできました。技術負債を解消しなければその先の継続的な機能追加、既存機能のメンテナンスが難しい（時間がかかる）と感じました。そのときに実際に製品のコードに触れていない人に説明する機会があり、わかりやすいと言われた例をシェアしたいと思います。

# 家の建築に例える - 技術負債自体の説明
技術負債とはどのようなものか、放置するとどのようになるかを説明する場合。サービス開発、メンテナンスを家の建築に例えて説明します。住んでいる人がユーザー、建物自体が機能とします。（実際の家の増築とは厳密には違うことをご容赦ください）


*１軒の家があります。夫婦二人で建てた立派ではないですが二人で住むには十分な平屋の家で、快適なマイホームぐらしに幸せを感じていました。*

*５年経ち、子供が二人増えたので増えたので将来子供が大きくなったときに備えて二階を増築を計画しました。もともとあった屋根に穴を開けて階段を作り、屋根の上に簡単なフローリングシートを敷いて床とし、二部屋の子供部屋を増築しました。もともと重量に耐えられるような設計をしていない屋根だったため、多少のきしみがあり、２階の歩く音が１階に聞こえましたが我慢できる範囲だったので気になり始めたあとも補強はしませんでした。（このとき家自体が傾いていたのですが、その事には誰もきづいていませんでした。）*

*それから１０年経ちました。子供が大きくなり、子供の友達が遊びに来ることがしばしばできました。ある日、子供とその友達が子供部屋で飛び跳ねて遊んでいました。すると突然床が抜け、友達がおっこちてしまったのです。幸いその友達には怪我はありませんでしたが、二階の床にぽっかり穴が空いてしまいました。使えなくなってしまった子供部屋を修理するのにお金もなかったのでとりあえず穴をダンボールで塞いでその周りをガムテープで固めました。大人が上から乗っても問題なく修理できたので、とりあえず良しとしました。子供には今後絶対２階で騒がないようにと注意しました。*

*さらに５年後、父親の両親の老後に備えて３階に移り住める部屋を増築することになりました。二世帯住宅のように個別のトイレ、ベッドルーム、キッチン、バスルームを作る予定です。お金もたっぷり準備し、建設が始まりました。一ヶ月後トイレ、ベッドルームができました。
さて、キッチンに取り掛かろうとしたところ、作業中に大きな音がしました (´ﾟдﾟ｀)。なんと二階の床全体が大きく凹んでいたのです。二階を増築したときに十分な補強をしなかったために３階の重量に耐えられなかったのでした。お金は十分用意していたので、工期は伸びますが２階の床を補強してから３階を作る計画に変更しました。無事キッチンが完成しました。残すはバスルームだけです😃バスルームの建築に取り掛かりました。そうするとまた大きな音がしました (´ﾟдﾟ｀)。今度は家がぐらつきました。慌ててみんなが外に出ると、家が少し傾いていました。原因を調査してみると、土地の地盤が弱く沈んでしまったようでした。*

*家に住むのもままならず、建築中の３階は一旦建築中断せざる負えない状況に陥りました。家族全員はホテルに退避し、３階を撤去しました。その後の作業で家の傾きは直ったものの、二階の床の補強と、傾きの修繕でお金を使ってしまい、３階の再建築は断念することとなりました。*

*技術負債とは、後の作業をするまで見えずらい、または、うすうす気づいているが放置してしまった設計の不良点であると言えます。負債が溜まっていると、新たな機能を追加しようとしたときに、その解消に時間をとられて本当に実装したい機能が追加できないという自体に陥ります*

## どうすればよかったのか？
結末からみると、地盤が一番大きな問題なので、家を建てる前に解消しておくべきでした。ただし家を建てる時点（サービスを始める）でお金（リソース）が潤沢にない場合が多いです。では、どの時点で解消ができたのでしょうか？
この話の中では、二階を増築するフェーズがあります。このとき増築するお金があるということは地盤補強に回す手もあったということではないでしょうか？例えば二部屋増やすところを一部屋にして、地盤を直す費用に当てるなどです。また、３階の増築のタイミングでも同じことが言えると思います。３階の機能を減らして、やり残した地盤の補強や２階の床の補強などにお金を回すことで、建てかけの３階を失うという自体はさけられたのではないでしょうか？

#最後に
システム構築をしていく中で、ご自身の環境でこの話がしっくり来ると思う部分があればその説明につかっていただければ幸いです。
不等号の向きについて〜リーダブルコード🆚コードコンプリート〜

不等号の向きについて、[リーダブルコード](https://amzn.to/3bmXMEf)と[コードコンプリート](https://amzn.to/2XN9XXh)で言ってることが違っていて、
(そして個人的にはコードコンプリート派なので)その辺り解説してみます。

## リーダブルコードの主張

「左に主眼を置いているものがあるべき」というのがリーダブルコードの主張です。

>|左側|右側|
>|---|---|
>|「調査対象」の式。変化する。|「比較対象」の式。あまり変化しない。|

(「7.1 条件式の引数の並び順」より)

わかりやすさの根拠としては、「英語の用法と合っている」が挙げられています。



## コードコンプリートの主張

「**数直線の並びと合わせるべき**」というのがコードコンプリートの主張です。
言い方を変えると、「`<`だけを使って`>`は使わない」ということになります。

> 数値の評価は、数直線上の点を順にたどるような構成にする。
>
> (中略)
>
> 逆に、iの値がMIN_ELEMENTSよりも大きいはずであれば、次のような評価を使用することになる。
> `while ( MIN_ELEMENTS < i ) ...`

(上巻「19.1.6 数値を含んでいる式は数直線の順番に並べる」より)



## 具体例で比較

2つの主張で違いが出るのが「主眼を置いているもの(変化するもの)が比較対象より大きい」という条件(下限の条件)の時です。

例えば、「xが0より大きい」という条件を書くと以下のようになります。

```js:「xが0より大きい」
// リーダブルコード方式
if(x > 0) {
...

// コードコンプリート方式
if(0 < x) {
...
```

リーダブルコード方式しか見てこなかった人は後者は違和感があるかもしれません。
(算数・数学をやっていた時と同じように、仕様の整理やロジックの検討時に数直線を使って図示していれば、その図上の位置関係とコード上の位置関係が一致するのでこれはこれでわかりやすいと思うのですが)

一方、コードコンプリート方式で一番恩恵を得られるのが「上限下限の両方の条件がある場合」です。
例えば、「xが0より大きく、かつ10より小さい」という条件を書くと以下のようになります。

```js:「xが0より大きく、かつ10より小さい」
// リーダブルコード方式
if (x > 0 && x < 10) {
...

// コードコンプリート方式
if (0 < x && x < 10) {
...
```

[Pythonなら`0 < x < 10`と書ける](https://docs.python.org/ja/3/reference/expressions.html#comparisons)(そういう構文がわざわざ用意されている)ことを思えば、コードコンプリート方式の方が読みやすいと思う人が多いのではないかと推察します。
(というかPython書く人はみんなコードコンプリート方式なんですかね……？)

このパターンでコードコンプリート方式の方を採用するなら、前述の「下限の条件だけ」のパターンでもこれに合わせておいたほうが、仕様が変わったりリファクタリングで上限の条件が増えた場合に都合が良いです。

あとは単に「`<`だけ使って`>`は使わない」の方がルールとして単純であり、人が理解・判断するのも機械に判断させるのも容易であるとも考えられます。

ということで、今までリーダブルコード方式しか知らなかった方は、コードコンプリート方式の存在も気に留めておいていただければと思います。


# 同志

[比較演算子「>」「>=」を使わなければ QOL が上昇する - Qiita](https://qiita.com/Nabetani/items/0482f72d302a25da2479)

# 追記

この記事を書いてから、いくつかQiita内の記事やコメントで引用していただきました。
(ありがとうございます！)
それらのやりとりを見ていてなるほど、と思ったものがあったので、ここで紹介させていただきます。

> 偏見かもしれませんが、理系の人はコードコンプリート方式、文系の人はリーダブルコード方式を好む傾向にあるような気もします。
(@alt_yamamotoさん [2021-05-14 09:31](https://qiita.com/alt_yamamoto/items/25eda376e6b947208996#comment-e016088a6e59cb7606dc) より)

> コードを読むときに、脳が計算式だと認識したのか、文章だと認識したのかによって、
どっちが読みやすいかが変わってきそうですね。
>
> 数値の比較であることがわかりきっている状況であれば、コードコンプリート方式のほうが読みやすそうです。
(@H40831さん [2021-05-14 10:08](https://qiita.com/alt_yamamoto/items/25eda376e6b947208996#comment-4fb7907c306d79d04b43) より)

確かに自分は理系だし、大小比較は完全に数式として認識してますね。
あと個人的にはいわゆる「左右盲」なのでそれも大きい気はしています。
共通処理とエラー処理springmvc

````

共通処理とエラー処理


参考　URL
https://www.techscore.com/tech/Java/JavaEE/Servlet/6/


説明　implements Filterをインプリメントすると、共通処理を作れる


	後、完全に終了したとき。完全に終了したとき。
	@Override
	public void destroy() {
    	System.out.println("destroy");
	}

	一番最初　ロードしたとき
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
    	System.out.println("init");
	}





★コントローラーが呼び出される時毎回

			//URL直打ちか
/*			if(req.getHeader("referer") == null&&!req.getRequestURI().equals("/OfficeSystem_Hibernate/Login")){
				//URLのパスがRequestMappingに存在しているか
				if(list.contains(req.getServletPath())) {
					throw new Exception("BACKLOGIN");
				}else {
					//System.out.println(req.getServletPath()+"は存在しないからエラーページを表示");
					throw new Exception("NotFoundError");
				}
			}




	        if(req.getRequestURI().equals("/OfficeSystem_Hibernate/SendMail")) {		// 修正
	        	if(session.getAttribute("role").toString().equals("0")) {				// 修正
		        	throw new Exception("アクセス権限なし");							// 修正
	        	}																		// 修正
	        }																			// 修正


			}else if(ex.getMessage().equals("アクセス権限なし")) {						// 修正
				request.setAttribute("errmessage", ex);									// 修正
				req.getRequestDispatcher("/WEB-INF/error/InternalError.jsp")			// 修正
                .forward(req, res);														// 修正転送
			}
【Unity】スクリプトからゲームオブジェクトの表示・非表示を判定する

#環境
Unity 2019.3.7f1

#はじめに
スクリプトからゲームオブジェクトの表示・非表示を判定する方法を説明します。

#コード
表示・非表示の判定は
**ゲームオブジェクト型の変数.activeSelf**
で取得できます。

この関数はbool型の返り値を返すので

**bool型の変数=ゲームオブジェクト型の変数.activeSelf;**

で使います。

#具体例
下記のコードで非表示にしたオブジェクトをアタッチして実行してみます。

```CSharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class test : MonoBehaviour
{
    [SerializeField] private GameObject a;//GameObject型の変数aを宣言　好きなゲームオブジェクトをアタッチ
    private bool b;//bool型の変数bを宣言
    
    void Start()
    {
        b = a.activeSelf;//aがアクティブかどうか判定し、trueかfalseがbに入る
        Debug.Log("b=" + b);//コンソールに変部bの中身を表示
    }
}
```
　
**結果**
変数aにアタッチされていたオブジェクトは非表示だったので変数bの中にはfalseが入っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/bfc19ce6-0dee-9a4c-6cb3-aef5891bb93e.png)

#おわりに
判定した返り値をbool型の変数に入れるのを忘れずに！
Next.js + TypeScriptのプロジェクトにStorybookを導入する

# この記事の概要
Next.js + TypeScriptのプロジェクトにStorybookを導入する手順を解説した記事です。

# 対象読者

- Next.jsを触った事がある人
- TypeScriptの基礎的な知識がある人
- Storybookについて基礎的な知識がある人

# 実行環境
- Node.js 12.16.2
- Next.js 9.5.5
- React 16.14.0
- Storybook(React) 6.0.27

# 具体的な手順とゴール

公式の [Storybook for React](https://storybook.js.org/docs/guides/guide-react/) にあるように `@storybook/cli` で構築する方法を確認出来ます。

特に [Create React App](https://create-react-app.dev/) を使っている場合 `npx -p @storybook/cli sb init --type react_scripts` を実行するとかなり簡単に環境が構築出来ます。

今回はNext.jsを使っていたりTypeScriptを使っていたりするので自前で環境を用意します。

## 必要なpackageをインストールする

今回インストールするpackageは下記の通りになります。

```
@storybook/react
@storybook/addon-essentials
@storybook/addon-a11y
@storybook/addon-links
@storybook/addon-storyshots
```

※ 最小構成ではなく、便利なアドオンをいくつか追加してあります。

## 必要な設定ファイルを作成する

以下の設定ファイルを追加します。

TypeScript前提なので `.tsx` と `.mdx` の拡張子のファイルをStorybook用のファイルとして認識してさせるような設定です。

```javascript:.storybook/main.js
module.exports = {
  stories: ['../src/components/**/*.stories.@(tsx|mdx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-a11y',
    '@storybook/addon-essentials',
  ],
};
```

`options` の `storySort` はStorybookをどうソートさせるか？のロジックです。

これは [公式サイト](https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy) に載っていた例をそのまま記載した物です。

```javascript:.storybook/preview.js
const addParameters = require('@storybook/react').addParameters;

addParameters({
  options: {
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
});
```

設定ファイルは以上になります。

以前はTypeScriptに対応させる為に `.storybook/webpack.config.js` を追加する必要があったのですが、Storybook6系でTypeScriptに標準対応したのでかなり楽になったと感じます。

# Storyを作成する

以下のようにシンプルなStoryを作成します。

命名規則は `Component名 + .stories.tsx` とします。

```typescript:src/components/AppTitle.stories.tsx
import React from 'react';
import AppTitle from './AppTitle';

export default {
  title: 'AppTitle',
};

export const showAppTitle = () => <AppTitle />;
```

# Storyboookを起動する

`package.json` のscriptsに以下の記述を追加します。

```json:package.json
{
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build:storybook": "build-storybook -o build/storybook"
  },
}
```

`yarn run storybook` もしくは `npm run storybook` で起動します。

http://localhost:6006 にアクセスを行い以下のような画面が表示されていたら成功です。

![Storybook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71899/5fcafef2-edcb-2d51-7f35-07dfa22ae54f.png)

ちなみに `yarn run build:storybook` もしくは `npm run build:storybook` を実行すると上記の内容を静的なHTMLとしてアウトプットする事が出来ます。

# おわりに
今回作成したサンプルはかなり単純な物なので、開発が進むにつれ、設定等を追加する事になると思います。

その場合はまた何らかの形で情報発信を行います。

以上になります。最後まで読んで頂きありがとうございます。
AzureServiceBus接続文字列で設定できること

# Azure Storage 接続文字列について
Azure Storageに接続する際に使用する文字列です。
基本的には以下のように、アカウント名やアカウントキー等を**" ; "**区切りで、**" = "**で指定すると対象のアカウントにアクセスが出来ます。


```
DefaultEndpointsProtocol=[http|https];AccountName=myAccountName;AccountKey=myAccountKey;
```

Blob Storage, Table Storage, Queue Storage, Service Bus Storage等のストレージ系のサービスでそれぞれ接続文字列が用意されています。
今回はServiceBusの接続文字列で設定できるものについてまとめます。

# ServiceBusの接続文字列で設定できること
JavaのSDK内でこの接続文字列を解釈している[ConnectionStringBuilder](https://github.com/Azure/azure-service-bus-java/blob/master1.0/azure-servicebus/src/main/java/com/microsoft/azure/servicebus/primitives/ConnectionStringBuilder.java)のコード読んでみると、どうやらアクセスキーの設定以外にも色々な設定ができるみたいなので、どんな設定が可能かを以下にまとめます。


## Endpoint
ServiceBusのエンドポイント。以下の形式。
`sb://[NAMESPACE名].servicebus.windows.net`

```
Endpoint=sb://myEndpoint.servicebus.windows.net;
```

## Hostname
エンドポイントにAMQPSプロトコルでの接続を行う際に使用する。
内部で`"amqps://%s"`でフォーマットされる。

```
Hostname=myHostname;
```

## SharedAccessKeyName
SharedAccessKeyの名前


```
SharedAccessKeyName=RootManagerSharedAccessKey;
```

## SharedAccessKey
SharedAccessKeyのキー値

```
SharedAccessKey=[KEYの値];
```

## SharedAccessSignatureToken
SharedAccessSignature トークン

```
SharedAccessSignatureToken=[TOKENの値];
```

## EntityPath
Queue, Topic, Subscription のパス名

```
EntityPath=myQueue;
```

## OperationTimeout
タイムアウト時間の設定値。
ISO-8601デュレーション・フォーマットPnDTnHnMn.nSベースで指定する。
何も指定しないと、デフォルトで30秒が設定される。

```
OperationTimeout=P1D1H1M1.001S
```

## RetryPolicy
`Default `もしくは`NoRetry`を指定する。
デフォルトの[RetryPolicy](https://docs.microsoft.com/ja-jp/azure/architecture/best-practices/retry-service-specific#service-bus)は、3秒間隔で最大5回リトライされる。

```
RetryPolicy=Default;
```

# まとめ
ServiceBusの接続文字列では、基本的なアクセス情報の指定だけでなく、**タイムアウト**や**リトライ**の設定が可能です。
Heroku | Missing encryption keyでPrecompiling assets failedなった時やることの全て『2020』| heroku Rails

## ステップ１

仕切り直す。 `credentials.yml.enc` と `master.key`を消す

<img width="452" alt="スクリーンショット 2020-04-19 17.10.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135794/7893ec87-d1b3-e336-8aa5-612e9a681c01.png">


## ステップ2 

下記のコマンドをよしなに実行

```
% EDITOR="vi" bin/rails credentials:edit
% heroku config:set RAILS_MASTER_KEY=`cat config/master.key`
% EDITOR="vi" bin/rails credentials:show
```

## done

```
% git add . -A
% git commit -m "key"
% RAILS_ENV=production bin/rails assets:precompile
% sudo git push -f heroku master
```

## 備考

これでherokuのdbをmigrate

```
% heroku run rake db:migrate
```
Xcodeのバージョン違い (Ver8.3.2とVer11.4 beta3)

#背景
Xcode Ver8.3.2を前提とするiPhoneアプリ開発教材を使用して学習しているが、私がインストールしたのはVer11.4 beta3(11N132i)である。違う箇所で引っ掛かるので、そこを主に挙げていきたい。

#内容
##Viewの起動
・Ver8 ：専用ペインが表示されている
・Ver11：Command Shift L

##Assistant Editor
・Ver8：画面右上の○○マーク
・Ver11：Editor > Assistant
　　　　　またはCommand + Option + Return
##Main.storyboard
・Ver8 ：デフォルトで存在する
・Ver11：プロジェクト作成時の「User Interface」でデフォルトの「Swift UI」を「Storyborad」に変更しないと表示されない。
https://ios-app.zendesk.com/hc/ja/articles/360036958674-Main-storyboard%E3%81%8C%E5%87%BA%E3%81%BE%E3%81%9B%E3%82%93

## Universal / iPhone / iPad
・Ver8 ：起動時にDevicesから選択する
・Ver11：プロジェクト作成後にDeploymet Targetから選択する

##Stack View
・Ver8 ：View Controller Sceneにボタンがある
・Ver11：View Controller SceneのEmbed Inボタンから選択する

##playground
・Ver8 ：新規作成時に、Ver11の「Blank」が自動で選択される
・Ver11：新規作成時にBlank, Game, Map, Single Viewから選択可能。
既存のAndroid Projectのコピー/リネーム方法

#プロジェクトのコピー
1. **ExistingProject**のコピーを作成
2. コピーしたディレクトリ名称を**NewProject**に変更

#プロジェクトコンポーネントの名前を変更しリファクタリング
**NewProject**内のパッケージやファイルには**ExistingProject**の文字が使用されているので変更する
1. Android Studioを起動
2. **Open an existing Android Studio project**を選択
3. **NewProject**ディレクトリに移動して選択、OKをクリック
4. **Build > Clean Project**を選択し自動生成されたファイルを削除
5. **app > java**フォルダを展開
6. **com.example.android.existingproject**を右クリックし、**Refactor > Rename**を選択。**Warning**ダイアログが表示されるので**Rename package**を選択
7. **Rename**ダイアログが表示されるのでプロジェクトに新しい名称を付ける
8. **Search in comments and strings**および**Search for text occurrences**を選択し**Refactor**をクリック
9. **Find: Refactoring Preview**ペインが表示され、リファクタリングするコードが表示されるので**Do Refactor**をクリック
10. **res > values**フォルダを展開し、**string.xml**ファイルを開く
11. app_name 文字列の値を"New Project"に変更します
【Unity】スクリプトからのオブジェクト表示・非表示、見かけ上の表示・非表示

#環境
Unity 2019.3.7f1

#はじめに
今回はオブジェクトにおける
・表示、非表示
・見かけ上の表示、非表示
について書きます。

見かけ上の非表示というのは
実体はあるけど透明になってしまって見えないという意味です。


#コード
**・オブジェクト表示**
GameObject型の変数.SetActive(true);

**・オブジェクト非表示**
GameObject型の変数.SetActive(false);

**・オブジェクトを見かけ上表示**
Renderer型の変数.enabled = true;

**・オブジェクトを見かけ上非表示**
Renderer型の変数.enabled = false;






#具体例
**・オブジェクト表示**

```CSharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class test : MonoBehaviour
{
    [SerializeField] private GameObject a;//GameObject型の変数aを宣言　好きなゲームオブジェクトをアタッチ
 
    void Start()
    {
        a.SetActive(true);
    }
}
```
　
**・オブジェクト非表示**

```CSharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class test : MonoBehaviour
{
    [SerializeField] private GameObject a;//GameObject型の変数aを宣言　好きなゲームオブジェクトをアタッチ
 
    void Start()
    {
        a.SetActive(false);
    }
}
```
　
**・オブジェクトを見かけ上表示**

```CSharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class test : MonoBehaviour
{
    [SerializeField] private Renderer a;//Renderer型の変数aを宣言　好きなゲームオブジェクトをアタッチ
   
    void Start()
    {
        a.enabled = true;
    }
}
 ```
 　
 **・オブジェクトを見かけ上非表示**

```CSharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class test : MonoBehaviour
{
    [SerializeField] private Renderer a;//Renderer型の変数aを宣言　好きなゲームオブジェクトをアタッチ
   
    void Start()
    {
        a.enabled = true;
    }
}
```

#おわりに
これで表示非表示はばっちり。
初めてのFirebaseを触ってみる(Hosting)

#はじめに
おはようございます。こんにちは。こんばんは。
今回はFirebaseのHostingについて見てきます。
では、早速行って見ましょう。
※今回もwebベース(Vue.js)の解説です。
#Hostingとは
[https://firebase.google.com/docs/hosting?hl=ja](https://firebase.google.com/docs/hosting?hl=ja)

Firebaseが提供してくれているサービスの１つです。
Firebase Hosting は、ウェブアプリ、静的コンテンツと動的コンテンツ、マイクロサービス向けの高速で安全性の高いホスティングを提供します。

#Hostingの準備
##①Firebase CLIのインストール

```console
$ npm install -g firebase-tools
```
※Firebase CLIのコマンドの詳細は[こちら](https://firebase.google.com/docs/cli/)を参考にしてください。
##②ログイン

```console
firebase login
```
*※①と②の工程を済ませている方は無視して下さい。*

#Hosting設定
##③初期化
ここから実際にHosting(デプロイ)していきます。
Firebaseで公開する前に、いくつかファイルを作る必要があるので、その設定をします。
Vue.jsの作業ディレクトリに行って以下のコマンドを叩いてください。

```console
$ firebase init
```
はじめに、Database、Hosting どっちの設定にする？って聞いてくるので、``Hosting``を選択します。
![https___qiita-image-store.s3.amazonaws.com_0_53996_59412e74-91dc-ce3e-8ec2-9ca051dd7018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/0ec9d03a-018a-cf5f-9634-bd4ec59f71aa.png)

##④プロジェクト選択
次に、どのプロジェクトと紐付ける？って聞いてくるので、紐ずけたいプロジェクトを選びます。
![https___qiita-image-store.s3.amazonaws.com_0_53996_a9473a97-bbb9-2382-281a-1813bff273ff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/d643a287-9f03-8936-c1f5-140fb4684520.png)

ちなみに、create a new projectを選ぶと、上のプロジェクト作成と同じ事がここでできます。
この辺は、お好きなように。
##⑤Database Security Ruleの設定
次に、Realtime Database のSecurity Ruleについて聞いてきます。
Realtime Databaseを使わない場合は、Enterをおします。
##⑥公開ディレクトリ
あと、少しで設定は完了です。
次に、公開ディレクトリはどうする？って聞いてきます。
※デフォルトでは、publicになります。publicでいいなら、そのままエンターを押しましょう。

<font color="red">Vue.js/Nuxt.jsではビルドしたファイルが格納されたフォルダ(dist)なので、``dist``と入力。</font>

##⑦Single Page Application
最後に、Single Page Applicationの設定をする？って聞いてきます。

こちらは、デフォルトはNoになっています。
Single Page Applicationにするならy、しないなら、Nを入力します。Single Page Applicationって、何？？という人は、Nにしましょう（笑）

<font color="red">Vue.js/Nuxt.jsはシングルページアプリケーションなのでyです。</font>
##⑧公開
deployコマンドで公開します。

```console
$ firebase deploy
```

以上。
ここまで6回に渡ってFirebaseが提供しているサービスの種類や使い方等を見てきました。
自分自身もまだ理解し切れていない機能や使い方がたくさんあると思うのでその都度勉強していきます。
最後まで読んでいただきありがとうございました。

[Twitter](https://twitter.com/watataku9)やってます。良ければチェックして見てください。:point_up::point_up::point_up:


#リンク
- [初めてのFirebaseを触ってみる(導入編)](https://qiita.com/watataku/items/94274031a4e49c9cc9a0)
- [初めてのFirebaseを触ってみる(Authentication)](https://qiita.com/watataku/items/9f134b44ead087abe68b)
- [初めてのFirebaseを触ってみる(Database)](https://qiita.com/watataku/items/ac040f4671c0f9a62bd4)
- [初めてのFirebaseを触ってみる(Storage)](https://qiita.com/watataku/items/7292a04590aad5b4dd19)
- [初めてのFirebaseを触ってみる(Functions)](https://qiita.com/watataku/items/6d5fd6bfe5c4adf1b71b)
- [初めてのFirebaseを触ってみる(Functions - REDT API)](https://qiita.com/watataku/items/80dddbfa6ef6b4454858)
ポートフォリオ作成⓵READMEの書き方基本



ポートフォリオの作成を大きく切り分ければ４工程あります。
1. READMEの作成
2. 画面遷移図の作成
3. テーブル設計
4. 実装
となります。

ここでは,未経験者が採用担当者に一番みてもらう機会の多いREADMEの書き方の基本、押さえておくべきポイントについて３つにまとめて紹介していきます。

# README作成概要 
##アイディアの発見
日常生活、過去の経験、困ったこと、得意なことを必ずアウトプットしていきます。
その際に、どんな些細なことでもいいので恐れず書くことをお勧めします。
また、ロードマップの作成はお勧めです。連想ゲームのように案を導き出せるようになります。
さらに、自分の生まれた時の一番古い記憶まで遡り、そこから人生を走馬灯のように思い出して回想していくのもいいかもしれません。もしくは、自分の経歴や、学歴など大きなポイントを書き出して、そこから思い出せる内容をプッシュしていくのもいいですね。

##アイディアの選定
大切な要素として、マーケットインの視点で物をみて考えるべきです。
問題を発見し、その問題を解決するためのアプリを考えてみる
その結果、未来はどう変わるか？を考えてみます。

## 三行でまとめてみる
〜な悩みを持った人に対して
〜な解決策を提供する
〜なアプリです。 
このように、採用担当者がみて一目で興味を引き、わかるような内容でまとめるのもお勧めです。  
## まとめ  
READMEは最重要な部分でもあり、必要な要素がかけていればそこで振り落とされる大切な要素です。
また、時間をかけ過ぎず自分のアイディアを想像し具体化するための骨組みでもあり、早い段階で作り始めることをお勧めします。
Swiftで文字列をASCII出力する

# 内容
先日、[AISデータをデコードする時の考え方](https://qiita.com/Genuin/items/c00f9d39c0a3209d6744)を読んでいて、そういえばSwiftで文字列をASCIIコード（今回は10進数）に変換するのはどうやるんだろうと思って、調べたらできたので、その結果を残します。

結果的には以下のページが参考になりました。
[Swift で文字を文字コードに変換する](https://ez-net.jp/article/28/7I6PI-lB/27pbsZx7YJG_/)の「文字列を C 文字列に変換する」部分がほぼそのまま利用できました。
（熊谷さん、とっても参考になりました。ありがとうございます。）


Swiftで文字列をASCII出力するためには、以下のコードを利用する。

```swift
var str = "0123w"

let cstr:[CChar] = str.cString(using: .ascii)!
for cchar in cstr {
    print(cchar)
}
```

Stringクラスの[`cString(using:)`](https://developer.apple.com/documentation/foundation/nsstring/1408489-cstring)メソッドを利用し、引数には`.ascii`を利用する。
上記コードの出力例は以下のようになる。

```
48
49
50
51
119
0
```
（上から順に0 → 1 → 2 → 3 → wのASCIIコード。最後はNUL（null文字、この場合は文字列末尾)を表す）

今後は上記の内容を元にAISやADS-Bの復号化をSwiftでやっていこうと思います。
そちらの内容も検証でき次第記事にします。

# 今後やることの参考文献
## AISの復号化
[AIVDM/AIVDO protocol decoding](https://gpsd.gitlab.io/gpsd/AIVDM.html)

## ADS-Bの復号化
[The 1090MHz Riddle
An open-access book about decoding Mode-S and ADS-B data](https://mode-s.org/decode/)
初心者用Github コマンド集

# はじめに
仕事でGithubを使用することが多くなったので，今まで使用した基本コマンドを初心者なりにまとめました．

# 基本コマンド集

## ローカルレポジトリの設定

```
#ローカルレポジトリ作成
git init

#ローカルとリモートレポジトリの紐付け
git remote add origin <リモートレポジトリのURL>
```


## ファイルのpushまでの流れ

```
git add ~~.py   #特定のファイルをpushしたい時
git add .       #ディレクトリ内の全てのファイルをpushしたい時
git commit -m 'comment'
git push origin <branch-name>
```
## branch周り

```
#branch切る
git branch <new_branch>
#branchの移動
git checkout <移動先branch>
#上記をまとめて
git checkout -b <new_branch>
```

```
#branch名変更
git branch -m <old_branch> <new_branch>
#branch削除
git branch -d <remove_branch>
```
### pullした変更の内容を別branchに反映させたい時

```
git pull origin <remoteで変更があったbranch>
git checkout <変更を取り入れたいbranch>

@変更を取り入れたいbranch
git merge origin <remoteで変更があったbranch>
```


#### (おまけ) commitをgitのissueと紐付けする
仕事などで，githubを使用して開発する際，Issueを立てることが多いと思うが，githubのIssueとcommitを紐づける方法がある．
以下のようにコメントの冒頭にIssueのIDを書くと，github上で，Issueとの結びつけが行われる．

```
git commit -m "#1 init"
```

<div align="center">
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287291/97b42227-999c-ecc0-92fe-d1d4fb75a27a.png">
</div>
Firebase 認証メモ


# サーバサイド
## 初期化
[ガイド](https://firebase.google.com/docs/admin/setup?hl=ja#java_2)  

```java
FileInputStream refreshToken = new FileInputStream("path/to/refreshToken.json");

FirebaseOptions options = new FirebaseOptions.Builder()
    .setCredentials(GoogleCredentials.fromStream(refreshToken))
    .setDatabaseUrl("https://<DATABASE_NAME>.firebaseio.com/")
    .build();

FirebaseApp.initializeApp(options);
```
### トークンの入手方法
firebaseのconsoleのセッティング画面>サービスアカウントより「新しい秘密鍵の生成」

## 利用
[ガイド](https://firebase.google.com/docs/auth/admin/verify-id-tokens?hl=ja#verify_id_tokens_using_the_firebase_admin_sdk)

```java
// idToken comes from the client app (shown above)
FirebaseToken decodedToken = FirebaseAuth.getInstance().verifyIdToken(idToken);
String uid = decodedToken.getUid();
```

# クライアントサイド  
[ガイド](https://firebase.google.com/docs/auth/web/start?hl=ja)
[ドキュメント auth.signinwithemailandpassword](https://firebase.google.com/docs/reference/js/firebase.auth.Auth?hl=ja#signinwithemailandpassword)

## ログイン
```javascript
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
}).then((userCredencial: UserCredential | void) => {
  // userCredencial.user でUser利用する
};
```

## トークン付きリクエスト
[ドキュメント User.getidtoken](https://firebase.google.com/docs/reference/js/firebase.User?hl=ja#getidtoken)

```javascript
firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
        // Handle Errors here.
    }).then((userCredencial: UserCredential | void) => {
        // https://firebase.google.com/docs/reference/js/firebase.auth.html?hl=ja#usercredential
        if (userCredencial != null) {
              userCredencial.user.getIdToken(true).then((idToken: string) => {
                    // idTokenをリクエストヘッダに含ませてHTTP通信する処理
              }
        }
    });
```
iTerms2にオシャレなステータスバーを表示する方法

## 完成図

<img width="621" alt="Screen Shot 2020-04-19 at 16.29.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/0295d67c-d57d-8d40-f964-f0bb6f0e6de3.png">

## 今まで

ターミナルのプロンプト（`username@device-name ~/example $`）に、カレントディレクトリ名を表示しており、階層が深くなるとどんどん長くなりちょっと邪魔くさかったのですが、これでスッキリしました。

## 表示方法

1.まず、`Preference > Profiles > Session > Status bar enabled` にチェックを入れます。

<img width="922" alt="Screen Shot 2020-04-19 at 16.08.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/2a9fc22f-66df-408a-c819-08faa2e8d6a3.png">

2.次に、`Status bar enabled` の横の `Configure Status Bar`をクリックして下記画面にて表示したいアイテムをドラッグする。`Auto-Rainbow`ボタンを押すと自動でカラーリングしてくれます。

<img width="921" alt="Screen Shot 2020-04-19 at 16.31.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/5defd02a-b85b-7de7-14c8-59c791d67e6f.png">

3.最後に、`Preference > Appearance > Status bar location` を`Bottom`に設定することで、ステータスバーが画面下に移動します。

<img width="560" alt="Screen Shot 2020-04-19 at 16.11.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51328/d06500e6-31a7-fe95-8441-d3340434fad7.png">

## 他環境
他環境については書きを使用しています。
- デフォルトシェルは`zsh`
- フレームワークは `oh-my-zsh`

## 参考
https://qiita.com/delphinus/items/1748937aefeb241bdcee

https://gitlab.com/gnachman/iterm2/issues/7717
モダンなwebシステムを勉強したい 準備編

# 目次

１．[モダンなwebシステムを勉強したい 準備編](https://qiita.com/shun_xx/items/6b12158754a0fbfc4a11) （本記事）
２．[モダンなwebシステムを勉強したい backend編](https://qiita.com/shun_xx/items/579fa1bf932328e04d53)
３．モダンなwebシステムを勉強したい frontend編


# ことの発端
会社の社内システムが古い技術を使っているので、フルスクラッチで作り直すのなら
モダンな技術を使って作り直そうと検討中。

そもそもweb系エンジニアではないので、何がモダンなのかよくわからない状態だけど、
言語的なところは揃えてほしい、フロントはangularが基本。。。という縛りの中
レイヤがあっているかどうかは別として、以下のようなフレームワークやライブラリをコンテナ上で作っていこうと思っています。
社内で使用するなら、Active Directory認証にする必要があるので、とりあえずOpenLDAPで
認証できるようにしておけば、設定変えるだけですんなりいけるかと思い入れてます。

何を作るのかというと、TODOwebアプリだったり、カレンダーだったりが一般的なのかという印象を持っているのですが、
社内でも「イマイチだなぁ。他に何かないのか？」という備品・会議施設の予約サービスを作ろうと思っています。
環境は[こちら](https://github.com/shun/booking-system)へ一応公開 ~~予定~~。
やりきれるかなぁ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65929/8cda01e7-7bfe-c3be-6a05-feb40efab3f4.png)
Xcodeの便利機能

iOS開発では必須のXcodeですが、あまり知られていない（かもしれない？）便利機能を紹介します。

# Multi-cursor editing

Optionキーを押しながらドラッグすると縦に選択できます。
縦の選択自体はMacの標準機能で、通常のNSTextViewを使っていれば対応しています。
![75941177-5aef5980-5ed2-11ea-9baa-63198b7a830c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243326/416e62a8-1616-62b1-fe89-45b1513452c3.gif)
Shift+Control+クリックでカーソルを増やすことができます。
![75941196-60e53a80-5ed2-11ea-8272-373d0ba805d2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243326/325f06fa-4004-22bb-a303-3eea33765311.gif)

# Source code control

どの行がいつ、誰によってコミットされたのかが見れます。（メニュー：Editor→Authors）
例えばクラッシュが起きる箇所のコードが最近書き換えられたのか、昔からあるコードなのか、を調べる事ができます。
![Screen Shot 2020-04-18 at 20.53.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243326/cc56ea14-1c05-cb03-ecc0-853069c57d9e.png)

任意の過去のバージョンと比較ができます。（メニュー：View→Show Code Review）
例えば今日と一週間のコードを比べることにより、バグやクラッシュの原因の特定などに使えます。
![Screen Shot 2020-04-18 at 20.54.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243326/99ba875b-7151-1bda-e2d4-be3d0775d1eb.png)

ナビゲージョンバーをクリックするとファイルやプロパティ、メソッドの一覧が表示されますが、この状態でキー入力するとフィルタリングできます。
![ezgif-6-5a20c00f5fe7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243326/91d3faed-74ad-2802-45a9-90c4223e4000.gif)

# Symbolic breakpoint

バイナリ化されたライブラリやシステムフレームワークなどにブレークポイントを貼る事ができます。
例えば、年内にdeprecatedされるUIWebViewを使っているライブラリを検知するのに使えます。
![Screen Shot 2020-04-18 at 20.57.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243326/3b193e43-d927-cfdb-e2b7-c14f7a14c590.png)

WebKitのようなC++のライブラリでもブレークポイントを貼れます。
![Screen Shot 2020-04-18 at 20.58.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243326/eb2e0eaa-82a7-5a5f-4984-32b8d285e2a3.png)

# Debug View Hierarchy

Debug View Hierarchyはビューの階層を調べるのによく使う機能ですが、それ以外にもシステムコントロールがどのように実装されているか、などを調べるのに使えます。例えばUIDatePickerは実際に3D構造になっていることが分かります。
![75941269-84a88080-5ed2-11ea-8223-9985accf10ee.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243326/ef8b9960-fc00-d24f-83ce-d921e51d74b1.png)

またSFSafariViewControllerのWKWebViewはDebug View Hierarchyでは表示されず、別プロセスで動作しているためアクセスできないことが分かります。
![75941272-88d49e00-5ed2-11ea-9623-c880604dc401.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243326/b874811d-9832-1dd8-ac3f-afc96ff19c09.png)
深層学習とかでのGPUを使ったtensorflowいきなり動かなくなった、への対処

#目的
以下の環境で、GPUを使った深層学習がいきなり動かなくなった。

OS:windows10
GPU:GeForce GTX 1070
パソコン：(省略)ゲーミング？ノートパソコン

また、tensorflowがらみな感じのは、

```
tensorboard              1.14.0
tensorboardX             1.9
tensorflow               1.14.0
tensorflow-estimator     1.14.0
tensorflow-gpu           1.14.0
tensorflow-gpu-estimator 2.1.0

```

が、インストールされた状態。
対処方法を示す。

#対処方法
##動かなくなったきっかけ
学習実行時に、Ctrl+Cで、処理を止めた。

##動かなくなった状態
再度、学習を実行しようとした場合に、

```
2020-04-19 15:36:34.104585: I tensorflow/stream_executor/platform/default/dlopen_checker_stub.cc:25] GPU libraries are statically linked, skip dlopen check.
2020-04-19 15:36:34.111310: I tensorflow/core/common_runtime/gpu/gpu_device.cc:1763] Adding visible gpu devices: 0

C:\_work\_

```

**何のエラーも出ず、プロンプトに戻ってしまう。**

##対処方法
パソコンの再起動等は、やってみたが、ダメで。

ここからは、勘で、
tensorflow-gpu           1.14.0
を入れなおすことをひらめいた。

tensorflow-gpu           1.14.0
をuninstallしようとすると、アクセスエラーか何かが出た。（脈あり）

フォルダ毎、消そうとおもって、tensorflowがらみをすべてuninstallしたら、
tensorflow-gpu           1.14.0
もuninstallできた、というか、uninstall済みたいな応答を得た。

ここから、再度、tenforflow等をインストール
結果、動くようになった。
（インストールは、当然、バージョン指定で、'tensorflow-gpu==1.14.0'みたいな感じで、元通りにしました。）

先ほどのところで止まらずに、動き始めた。

```
2020-04-19 16:04:06.169138: I tensorflow/core/common_runtime/gpu/gpu_device.cc:1763] Adding visible gpu devices: 0
2020-04-19 16:04:06.172271: I tensorflow/core/common_runtime/gpu/gpu_device.cc:1181] Device interconnect StreamExecutor with strength 1 edge matrix:
2020-04-19 16:04:06.176606: I tensorflow/core/common_runtime/gpu/gpu_device.cc:1187]      0
2020-04-19 16:04:06.179549: I tensorflow/core/common_runtime/gpu/gpu_device.cc:1200] 0:   N

```

#対処の整理

「動かなくなったきっかけ」が、Ctrl+Cのせいかどうかは、わからない。
「対処方法」が、tensorflowがらみをすべてuninstallしての再installが効果があったのか、いろいろやっているうちに、時間が経過して、パソコンの機嫌が直ったのかは、不明。

#その他、得られた知見
**Python + GPUは、なんか、何のエラーもなく、終了することがある**気がする。
（エラーをなんとかひらう手段も、よく知りません。）
以前にも、経験したような気がする。

#まとめ
特にありません。
この雑な情報が、どなたかの役に立てば、幸甚。
（同じところで、止まった、同じようにしたら治った等の情報があれば、気が向いたら、教えて下さい。）
Rails + MySQL + Vue.jsでアプリを作成する➂/簡単な画面を作成する

####※前回：Rails +  MySQL + Vue.jsでアプリを作成する②/MySQLの導入
https://qiita.com/tksh8/items/885eb1ca51b32d6ea3a9


## コントローラーの作成

次のコマンドをターミナルで実行してください

```
$ rails generate controller StaticPages top
```

## ルーティングの編集

```ruby:config/routes.rb
Rails.application.routes.draw do
  root 'static_pages#top'
end
```

## ビューの編集

```html:app/views/static_pages/top.html.erb
<h1>トップページです！！</h1>
<p>Hello World!!</p>
```

## 確認
```
$ rails s
```

で
http://localhost:3000/
にいき、

<img width="455" alt="スクリーンショット 2020-04-19 16.40.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355517/f6deae5f-8a9f-37b2-f5ab-e06c53fb7420.png">

というような表示になれば成功です！！！



## Rails + MySQL + Vue.jsでアプリを作成する④/Vueの導入
https://qiita.com/tksh8/items/02ce019e02bcfff14b9b

## AWSでのデプロイ手順はこちら
https://qiita.com/tksh8/items/9a8e88a777a3a4ee7a09
TeX/LaTeXで日本語の原稿と英語の原稿を切り替えたいとき


# はじめに

現在、国際学会向けの論文を書いています。
ただ、あまり自分では自信のある内容ではないので、間に合ったとしても落ちる可能性大ですが･･･　（でも最後まで頑張ってみます＞＜）


さて、国際学会ということは英語なので、英語で書く必要があります（？）
ただ、僕は論文を英語で書きなれていないのでまずは「日本語」で書くことになりました。

日本語で書き終わった後、英語にする必要がありますが実際に
すべての日本語を１文１文消して直接英語にするのは面倒なので避けたいところです（元の日本語の文も消えてしまうため）


そこで、日本語の原稿の中に英語の文章も追加して、なにか変数一つで切り替えられないか考えることにしました。
(TeX/LaTeX初心者です＞＜　間違いがあればどんどんコメントいただければうれしいです！)


# TeXのマクロ

組版システムであるTeXには、
`\if`、`else`, `\newif`などのマクロが存在しています。
これは、TeXファイルをコンパイル時にこれらのマクロをコンパイラが読んで、実行を変えるものです。

原稿状態の日本語を英語に変えるには、「`\newif`, `if`, `else`, `fi`」を用います。

```tex
\documentclass[]{jsreport}

\newif\ifdraft

% 日本語
\drafttrue

% English
% \draftfalse

\begin{document}

\ifdraft

ここは日本語です。

\else

This is English.

\fi

\end{document}
```


上記のようなTeXファイルを作成します。

`\newif`は新しいifマクロを定義していて
`\ifdraft`(原稿かどうか？)のマクロを作っています。

そして、`drafttrue`で原稿状態であるということを定義します。


これによって、`\ifdraft`から`\else`の内部のみが展開され、
英語部分は利用されません。

<img width="726" alt="スクリーンショット 2020-04-19 16.32.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211482/5dfd5e18-cf91-2865-5806-12b3cac5a5bb.png">



```tex
\documentclass[]{jsreport}

\newif\ifdraft

% 日本語
% \drafttrue

% English
\draftfalse

\begin{document}

\ifdraft

ここは日本語です。

\else

This is English.

\fi

\end{document}
```


上記のようにすることで、`draftfalse`になり
`\else`から'\fi'までが実行されます。

<img width="774" alt="スクリーンショット 2020-04-19 16.32.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211482/aa2ecb85-2189-4cc3-98a3-54aa9df1ac1d.png">

# LaTeXのコマンド

TeXは、システムかつ言語であり、組版を作るための言語として開発されました。
しかし、TeXは高度かつ難しいため、いろいろな文法をTeX言語を用いて拡張したものが$\LaTeX$です。

そのため、LaTeXはTeXの拡張であり、子クラスみたいな存在に当たります。


TeX自体で、先程のマクロを触るのは大変難しいらしく（ベテラン向け）、初心者は拡張された優しい文法のLaTeXを用います（一般的に言われているのは最近はこっち）。

そのため、先程のifの分岐は、より優しく書くこと、柔軟に書くことができ

[LaTeX で条件分岐や反復処理：ifthen パッケージのキホン](https://qiita.com/zr_tex8r/items/71ae46c9c4e8cb575073)
で丁寧に説明されています。


例えば、日本語と英語の切り替えは以下のようにコマンドで行えます。

```latex
\documentclass[]{jsreport}
\usepackage{ifthen}

\newboolean{Draft}
\setboolean{Draft}{false}

\begin{document}

\ifthenelse{\boolean{Draft}}{
    ここは日本語です。
}{
    This is English.
}


\end{document}
```

拡張版のLaTeXを用いることで、他の様々な細かく柔軟な条件分岐を行うことができるため、こちらを使っていくのがいいのだろうと思います。


# 参考文献

- [すぐできる！ latex で if 文による条件分岐を使う方法。](https://beiznotes.org/latex-if/)
- [LaTeX で条件分岐や反復処理：ifthen パッケージのキホン](https://qiita.com/zr_tex8r/items/71ae46c9c4e8cb575073)
【Javascript】オブジェクト、配列の分割代入で勘違いするポイント

フロントのトレンドに乗ろうとReactのhooksの勉強をしているのですが、渡ってきたpropsを受け取るときとか、createContextを使ってProviderから渡ってきたstateやdispatchをuseContextで受け取るときとかに、分割代入をよく用いると思います。
その分割代入をちょっと勘違いというか、分かってなかった部分があるのでメモしておきます。


#### それぞれ分割代入するとき


```javascript

const obj1 = {a: "aだよ", b: "bだよ"}
const { a, b } = obj1

console.log(a) // aだよ
console.log(b) // bだよ
```

これは直感的にわかります。


#### ある値だけを代入するとき

```javascript

const obj2 = {c: "cだよ", d: "dだよ"}
const { c } = obj2

console.log(c) // cだよ

const obj3 = {e: "eだよ", f: "fだよ"}
const { f } = obj3

console.log(f) // fだよ
```

``obj2``のときは、**先頭から順番に代入されていくからdは無視されているという勘違い**をしていました。
``obj3``でわかる通り、**オブジェクトのキーを指定して代入している**んですね。。。

なので、下のように~~オブジェクトのキーとは関係のない変数名では分割代入はできない~~です。

[分割代入の使い方(配列, オブジェクト)](https://www.wakuwakubank.com/posts/461-javascript-destructuring-assignment/)を見たらキー名とは別の変数に代入できるみたいです。無知でした。


```javascript

const obj4 = {g: "gだよ", h: "hだよ"}
const { G, H } = obj4

console.log(G) // undefined
```

#### 配列と混同してるのでは？

```javascript

const arr1 = ["i", "j"]
const [I, J] = arr1

console.log(I) // i
console.log(J) // j

const arr2 = ["k", "l"]
const [k] = arr2

console.log(k) // k
```

``arr2``でわかるように、配列の場合は**先頭から順番に代入されていく(対応する添字の要素が個別に代入される)から"l"は無視されている**んですねー。

ここが勘違いの根源だったみたいです。。。
【JavaScript】querySelectorAllとaddEventListener　併用できない??

コード書く中でつまずいたので自分用メモ兼、私と同じようなJavaScript初学者のために記事書きました！

#結論

querySelectorAllでaddEventListenerは使えませんでした！

#過程
画像をクリックしたら要素を取得できるようにしたいと思い、
下記のコードを試してみましたが、思うようにいかない・・・


```
【html】

<div id="card1" class="cards"><img src="./images/gen1.png" alt=""></div>
<div id="card2" class="cards"><img src="./images/gen2.png" alt=""></div>
<div id="card3" class="cards"><img src="./images/gen3.png" alt=""></div>
<div id="card4" class="cards"><img src="./images/gen4.png" alt=""></div>


【JS】※正しくないコードです。

document.querySelectorAll('.cards').addEventListener('click',function(){
    console.log(this);
});
```
ググってみると下記サイトを発見し、そのサイトを元に原因究明してみました。
https://www.mitsue.co.jp/knowledge/blog/frontend/201805/24_0917.html
このサイトを1読して頂き、わからなければ当記事を参考にして頂ければ良いかと思います。(おこがましいですが・・)

##querySelectorAllで取得できる値はNodeListオブジェクトらしい・・
そして、NodeListオブジェクトはaddEventListenerを持たないらしい。
この情報を得て、
querySelectorAllの後にaddEventListenerをもってきても無駄だということが分かった。

<img width="883" alt="qiita1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603163/27f9b2ab-23eb-8e10-df36-59908c8b5698.png">

##HTMLエレメントではaddEventListenerが使えるらしい・・・


下記サイトのメソッドの部分を読むと、どうやらそうらしい。

https://developer.mozilla.org/ja/docs/Web/API/Element






## forEachを使えばうまくいくらしい・・・
ググるとforEachは繰り返し処理で、for文の代わりに使えばサクッと繰り返し処理をかけるとのこと。
記事冒頭に紹介したサイト(https://www.mitsue.co.jp/knowledge/blog/frontend/201805/24_0917.html)
ではforEachを使用していた。
ここで繰り返し処理使う?と少し疑問に思いましたが、下記サイトのメソッドの部分にあるNodeList.forEach()の説明書きを見ると少し腑に落ちました。

https://developer.mozilla.org/ja/docs/Web/API/NodeList

<span style="color: red; ">
イメージとしては、forEachによってNodeListオブジェクトがhtmlエレメントに変換され、
引数cardsに渡される。先に述べたように、htmlエレメントではaddEventListenerが使用できるので値が取得できるようになる。</span>

```
document.querySelectorAll('.cards').forEach(function(cards){

    cards.addEventListener('click',function(){
        console.log(cards);

    });
});
```

下記の画像でも分かるようにコンソールにhtmlが表示されている。



<img width="925" alt="qiita1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603163/097bb320-98af-3a75-8d25-b9efc65f3620.png">


##改めて結論

querySelectorAllでaddEventListenerは使えませんでした。
代わりにforEachを使用し、それに関数を指定してください。
その関数の中にaddEventListenerを含む関数を使ってください。

htmlエレメントはaddEventListenerを持っている(使える)ため、
取得したNodeListオブジェクトをhtmlエレメントに変換するためにforEachを使うのだという結論に達しました。


文章力が低く、伝わらない部分があるかもしれませんが、誰かの役に立てれば幸いです。
Rails +  MySQL + Vue.jsでアプリを作成する②/MySQLの導入

####※前回：Rails + MySQL + Vue.jsでアプリを作成する①/ローカル環境構築
https://qiita.com/tksh8/items/d9190451d1f01d5a5e19

注意：
(最近の新しいmacはデフォルトがzshなので
`.bash_profile`のところを
`.zshrc`にかえてください)

##MySQLの導入

###1.MySQLのインストール

```

$ brew install mysql@5.7
```
インストールが完了したら、パスを通す

```

$ echo 'export PATH="/usr/local/opt/mysql@5.7/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile
```

インストールされているか確認

```

$ mysql --version
```

###2.MySQLの起動

動作の確認です



```
$ mysql.server start
```
```
Starting MySQL
 SUCCESS! 

となれば成功です。
（停止の場合は
mysql.server stop
）
```
###3.mysql2のインストール
mysql2：railsとMySQLを連携するためのgem

```
$ gem install mysql2 -v '0.5.2' -- --with-ldflags=-L/usr/local/opt/openssl/lib --with-cppflags=-I/usr/local/opt/openssl/include
```

###4.Gemfileの更新
Gemfileに下記を追加し、

```Gemfile:Gemfile
GemfileのDBの設定をSQLiteを消し、mysql2を設定します
# gem 'sqlite3'
gem 'mysql2'
```

bundleを更新する

```
$ bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib"
$ bundle install
```

###5.database.ymlの更新
railsではデフォルトでSQLiteになっているので、
database.ymlの中身をMySQL用に書き換えます。
（項目値はそれぞれのプロジェクトによって異なります。ご自身の設定したユーザ名などに読み替えが必要です。デフォルトの場合は下記で大丈夫です）

```html:database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  host: localhost
  socket: /tmp/mysql.sock


development:
  <<: *default
  database: mysql_development
  
test:
  <<: *default
  database: mysql_test

```

###6.MySQLのデータベースを構築

```
$ rails db:create
$ rails db:migrate
```

これでデータベースが作成されたので
確認します

```
起動
$ mysql.server start

サーバへの接続
$ mysql -u root -p

データベースの一覧
mysql> show databases;
```

```
+------------------------+
| Database               |
+------------------------+
| information_schema     |
| mysql                  |
| mysql_development      |
| mysql_test             |
| performance_schema     |
| sys                    |  
+------------------------+
```


```
サーバ接続の切断
mysql> quit

停止
$ mysql.server stop
```

これでMySQL導入は終了です！！

MySQLのコマンド操作はこちらを参考に
https://qiita.com/CyberMergina/items/f889519e6be19c46f5f4



## Rails + MySQL + Vue.jsでアプリを作成する➂/簡単な画面を作成する
https://qiita.com/tksh8/items/741cf379da06d8817389


## Rails + MySQL + Vue.jsでアプリを作成する④/Vueの導入
https://qiita.com/tksh8/items/02ce019e02bcfff14b9b
Linuxインストールしたら

#はじめに

こちらではLinuxをインストールしたらまずやっといたらいいんでね？
というのをまとめておきたいと思います。

随時加えていきます。

#環境
CentOS7
Debian

##アップデート

###CentOS 

yumのアップデート

```
# yum update
```

###Debian 
パッケージリストの更新

```
# apt-get update
```

パッケージの更新

```
# apt-get upgrade
```
「OK Google!」 で LINE WORKS にメッセージを送る

Google Home や  Android スマートフォンに話しかけて LINE WORKS のトークルームにメッセージを送ってみます。

IFTTT と PowerAutomate を使います。

##PowerAutomate のフローを作る

PowerAutomate で [+作成] で [インスタント フロー] をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/b9802bbf-d02f-11eb-9a85-f853701cbd6a.png)

任意のフロー名を指定し、[HTTP 要求の受信時] をトリガーに指定し [作成] をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/27dd1382-5cfc-e5f7-71db-59714082d55a.png)

[サンプルのペイロードを使用してスキーマを生成する] をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/dfd685ed-2ecc-dab8-7d0a-bda98f4de92c.png)

以下の JSON を入力。

{
  "accountId": "admin@example.com",
  "roomId": "0123456",
  "Message": "こんにちは"
}

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/9d4e0a2f-6e6e-2877-7429-838793af24eb.png)

LINE WORKS カスタム コネクタの [メッセージ送信] をアクションに指定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/06479985-09ee-ffa6-ae80-43bb7748ccde.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/1cc2c8b0-79f9-4f7d-8b9d-cacf20ee9e9f.png)

パラメータを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/7a801460-9f24-f981-7beb-f27e47da4f8e.png)

保存をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/bd82adba-acaf-133e-3c67-7239852f3ef3.png)

URL を控えておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/340c548a-376c-2ff4-76ed-c3a2568b1a8e.png)

##IFTTT のアプレット作成
Google Assistant の [Say a phrase wtih a text ingredient] をトリガーに指定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/e1c22ed3-aeda-6e02-da22-91e1a206707d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/b1ece81f-63de-a401-cc96-9c5930c315db.png)

OK Google の後の音声コマンドや、完了後の Google Assistant の返事を指定します。この例では 「OK Google、営業部に送信」に続けて話す内容がテキストで送られます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/57880dde-07fe-fac6-17cf-bf9add752c1b.png)

Webhooks の [Make a web request] をアクションに指定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/3b111dca-7f30-84c2-14bd-855c4f712da0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/fa4b80b4-9ac6-6169-dc17-fa1da48bd45a.png)

パラメータを指定します。
URL はフロー作成時に生成されたものを指定します。
Body には以下の JSON を用います。
トークルーム宛の場合は roomId を、メンバー宛の場合は accountId を使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/59aacb1d-1246-adbc-d8fd-5ce6a1411f57.png)

完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/eab81d5f-29d0-ddcf-30a4-cc42de3461ed.png)

##動作確認
Google Home や Android の Google Assistant に話しかけましょう。
「オーケーグーグル、営業部に送信、明日の会議はオンラインで実行」のように。

指定したトークルームやあて先にメッセージが送信されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/84514879-a63d-02b2-f59b-4999bae561d9.png)