OmniAICreator/Qiita-1.07M huggingface dataset:
[R] NbClustの計算時間を指標ごとに計測してみた

# 背景

Rでクラスタリングのクラスタ数を提案してくれるライブラリである[NbClust](https://www.rdocumentation.org/packages/NbClust/versions/3.0/topics/NbClust)は、デフォルトで計算する指標の設定が``index='all'``になっていて、``GAP`` ``Gamma`` ``Gplus`` ``Tau``以外の指標が計算されます。この4指標は計算時間がかかるので除外されているのですが、実際に使うとそれでも重いです。

しかし、試しに``index='db'``などとして1指標だけ計算すると、すぐに計算が終了します。
そこで、上記4種類以外にも計算時間がかかる指標があるのではないかと思い調べてみました。

# 計測方法と結果

指標ごとに、irisデータセットをWard法でクラスタリングした場合の計算時間を測りました。実行コードは次の通りです。

```R:R
library(NbClust)
index_ary<-c("kl", "ch", "hartigan", "ccc", "scott", "marriot", "trcovw", "tracew",
             "friedman", "rubin", "cindex", "db", "silhouette", "duda", "pseudot2",
             "beale", "ratkowsky", "ball", "ptbiserial", "gap", "frey", "mcclain", 
             "gamma", "gplus", "tau", "dunn", "hubert", "sdindex", "dindex", "sdbw")
for(index in index_ary){
  start.time<-proc.time()
  NbClust(iris[,-5], method = "ward.D", index = index)
  end.time<-proc.time()
  cat(index,' ',(end.time-start.time)[3],'\n')
}
```

結果はこの様になりました。

|指標|経過秒数|特記事項|
|---|---|---|
|kl|0.033|
|ch|0.024|
|hartigan|0.023|
|ccc|0.01|
|scott|0.01|
|marriot|0.012|
|trcovw|0.011|
|tracew|0.01|
|friedman|0.01|
|rubin|0.01|
|cindex|0.009|
|db|0.014|
|silhouette|**0.105**|少し重い|
|duda|0.02|
|pseudot2|0.023|
|beale|0.019|
|ratkowsky|0.016|
|ball|0.013|
|ptbiserial|**0.236**|少し重い|
|gap|**0.272**|少し重い|
|frey|0.043|
|mcclain|0.046|
|gamma|**3.075**|重い|
|gplus|**3.046**|重い|
|tau|**3.031**|重い|
|dunn|0.013|
|hubert|**0.268**|少し重い|
|sdindex|0.034|
|dindex|0.072|
|sdbw|**0.283**|少し重い|

``index='all'``で除外される4指標はどれも重く、特に``gamma`` ``gplus`` ``tau`` が重い事がわかりました。

そして、ここが重要なポイントですが、除外される4指標以外に、``silhouette``、``ptbiserial`` ``hubert`` ``sdbw`` も少し遅めである事が分かりました。もっとも、重いと言っても``gamma``などの10分の1程度でした。

# まとめ
指標ごとにNbCLustの実行時間を計測したところ、``index='all'``で除外される指標以外にも重めな指標がいくつかある事が分かりました。ただし、``index='all'``で除外される指標の10分の1程度の重さでした。
Mac でログインシェルが起動できなくなったら 

## tl;dr

ターミナルアプリで無事に起動するはずの `/bin/bash` などの OS 標準 shell を指定して起動する。
設定方法は以下の通り。

- ターミナル.app: `環境設定 -> 一般 -> 開くシェル` で `コマンド（完全パス）`
- iTerm2: `Preference -> profile -> general -> Command` で `Custom Shell`

## どしたの？

homebrew を update / upgrade したら homebrew でインストールした zsh が起動しなくなった。
chsh してしまってたので困った。

`.profile` とか `.rc` のカスタマイズに失敗したときはエディタで編集して復旧できるはずです。

## 参考

- [Macでログインシェルを確認/変更するいくつかの方法 - rcmdnk's blog](https://rcmdnk.com/blog/2015/05/25/computer-mac-bash-zsh/)
【初心者向け】転職にも活用できるAWSの前提知識を解説

<br>

「AWSって何するの？」

結論、**インフラ構築**です。

今回はIT業界で多く利用されているAWSについて、初心者向けにわかりやすく解説していこうと思います。

最後まで読んでみて、もし良いなと思ったら、記事を書く励みになるので、ぜひLGTMをお願いします！
<br>
<br>

## AWSについて
冒頭でもお伝えした通り、AWSとはインフラ構築をクラウド上で行う、非常に便利なツールの一つです。
<br>

「インフラ構築って？」
「クラウドって？」

これらを解説していきます。
<br>
<br>

### インフラ構築について
まずIT業界で言うインフラとは、物理的なコンピュータやサーバー、データベースなどの事を指します。そしてインフラ構築とは、これらの物理的な機器をインターネットに接続し、Webやアプリケーション上での利用ができるような環境を、構築をする事を意味します。

厳密に言えば、もっといろいろあるのですが、ここではAWSについての説明がメインなので割愛します。
<br>
<br>

### オンプレミスとクラウド
次にクラウドについてですが、その前にオンプレミスと言う言葉を紹介します。
<br>

#### オンプレミス
オンプレミスとは、上記の説明と同じように、実際に企業が物理的なコンピュータやサーバーなどを購入し、独立したインフラ構築を行うことです。

主に社内の情報や、顧客の個人情報など、機密性の高いシステムを開発する際などに、採用されることの多い手法です。
<br>

#### クラウド
これに対しクラウドとは、ある企業が構築した大規模なインフラを、インターネット上で利用する事ができると言うサービスです。

例えばAWSは、Amazonが世界中に整えたインフラ施設(リージョン)を利用して、各企業にその一部を貸し出している、と言うのがわかりやすいかと。
<br>

#### 主流はクラウドへ
このオンプレミスとクラウドに関しては、それぞれメリットとデメリットがあるのですが、現時点で日本でも主流になりつつあるのは、クラウドサービスの方になります。

理由は、オンプレミスと比較した際に、導入コストが抑えられたり、インフラを稼働させるのに時間がほとんど掛からない、と言うメリットがあるためです。

特に時間が掛からないと言うメリットは、スピード感を求められるスタートアップやベンチャーにとって、かなり強力な利点になります。そのため、モダンな開発をしている企業のほとんどが、AWSなどのインフラ系クラウドサービスを利用しています。
<br>
<br>

### クラウドサービスのシェア
ちなみにインフラ構築が可能なクラウドサービスは、他にも有名所がいくつか存在し、代表的なものは以下の３つになります。

<ul>
  <li>AWS - Amazonの提供</li>
  <li>GCP - Googleの提供</li>
  <li>Azure - Microsoftの提供</li>
</ul>

この３つは主要３大クラウドサービスとも言われており、世界のインフラ系クラウドサービスシェアの、約7割を担っています。

さらにその中でも、GCPやAzureに倍以上のシェアを持ち、圧倒的に利用されているのが、このAWSになります。
<br>
<br>

### AWSを学習するメリット
世界的にみても、圧倒的なシェアを持つAWSですが、国内でもその風潮は顕在です。つまり転職や仕事に生かすと言う意味で、AWSを学習することは、かなり需要が高い人材になれる。といった具合です。

実際、未経験からエンジニアに転職をする際に、面接でポートフォリオの話はほとんどせず、AWSの話をするだけで内定が決まった、と言う事例も多数聞きます。
<br>

またこのようなインフラ系クラウドサービスが主要になりつつあると言うことは、今までソフト側だったバックエンドエンジニアと、ハード側だったインフラエンジニアの垣根は無くなっていくと、容易に想像がつきます。

そういった意味でも、エンジニアになるのであれば、バックエンドだろうがインフラだろうが(もっと言えばフロントだろうが)、AWSを学ぶことにより、転職の可能性や仕事領域の拡大は、充分見込めるものとなるでしょう。
<br>
<br>

## まとめ
少し長くなりましたが、これらの知識は知っておくだけでも、転職や仕事で大いに活用できるものになります。さらに深くAWSについて知りたい方は、

AWS EC2
AWS RDS
AWs S3

このあたりを検索してみるのがオススメです。

最後まで読んでいただき、ありがとうございました！
<br>
<br>
<br>

筆者：yuki｜学習10日目で初案件獲得→現在はフルスタックエンジニア転職に向けて学習中
Qiita：https://qiita.com/yuki4839
Twitter：https://twitter.com/yuki35522891
JavaScriptでCSSファイルを切り替える

JavaScriptを利用して、読み込むCSSファイルを切り替えます。

##コード

HTMLにはlinkタグを全て記述しておきます。

```html
<link rel="stylesheet" href="1.css" title="a">
<link rel="stylesheet" href="2.css" title="b" disabled>
<link rel="stylesheet" href="3.css" title="c" disabled>
```

``title属性``に名前を付けておきます。この名前で切り替えます。
最初に無効化しておきたいファイルには``disabled属性``を付けておく。

```js
function change_css(name){
    for(const css of document.querySelectorAll('link[title]')){
        css.disabled = css.title !== name
    }
}
```
この関数に読み込みたいファイルのタイトル(a,b,c)を渡せば、ファイルが切り替わります。
Progate　JavaScript　IV 

段々難しくなってきました。
一つ一つの要素の難易度はそこまで高くないと感じておりますが、絵面が違うマトリョーシカを自分で作り上げてるイメージ・・。
コンストラクター、継承、オーバーライド、全てが効率よく回す為にはどうしたらよいのかという考えのもと定義されているような感じがします。
その部分を感じながら勉強するのは楽しいですね！日常生活にも活かせそうです。
EC2でyum install時に「Another app is currently holding the yum lock;」で実行できない

# 背景
```yum update -y```実行時に以下文言が出て、実行できなかった。

```
$yum update -y
Another app is currently holding the yum lock;
```  

#原因
yum実行中に以下ロックファイルが作成され、残っているため

```
/var/run/yum.pid
```

# 対処法
以下コマンドでロックファイルを削除すればOKです。

```
rm /var/run/yum.pid
```

# 参考
https://onoredekaiketsu.com/yum-sleeps-and-cant-be-executed/
TypeScript　は『VSCode』一択！

TypeScriptは『VSCode』一択です。
異論があればコメントにてどうぞ。

>InteliJは型推論見づらいです。。2020/12/15

#TypeScriptコンパイラーがVSCodeに内蔵されてる
**信頼もできるし、これが一番重要**です。

変数の上にカーソルを置くと
勝手に型がどんなのか教えてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684145/1704de97-d908-9180-ac82-b346f3fc199a.png)

#VSCode自体もTypeScript作られてる
タダの豆知識ですね、はい。

#型推論で見れるのがデカい
以下はどちらも同じです。

```typescript
let num: number = 10; //型注釈
let num = 10;         //型推論
```

numって本当にnumberなの？って思ったら
変数にカーソルを置くと勝手に型がどんなのか教えてくれます。

>**基本的に『型推論』**で書きましょう。
型推論で記述できない時に、『型注釈』をします。

#【コラム】長期運用するならTypeScriptにすべし！
長期にわたってメンテナンスしたいプロジェクトで作業するのなら、TypeScriptで書くべきです。
TypeScriptではコードを書いている間に何が間違っているのかを教えてくれます。
TypeScriptはコードベース全体の自己ドキュメント化を支援し、コードリーディングの体験を改善します。TypeScriptは開発者がお互いのコードを理解しやすくするのに役立ちます。
C#のDelegate、Action、Funcの動き

# 概要
`DelegateCommand`の引数として使用する`Action`についてよくわかっていなかったため、掘り下げようと思ったが、関係する大元の`Delegate`があまりにも多岐にわたりすぎていてとりあえず以下の３つの動きを確認したときの備忘録です。

- Delgateクラス
- Acitonデリゲート
- Funcデリゲート

# Delegate
[Delegate クラス](https://docs.microsoft.com/ja-jp/dotnet/api/system.delegate?view=net-5.0)
> デリゲートを表します。デリゲートとは、静的メソッドを参照するデータ構造、またはクラス インスタンスおよびクラスのインスタンス メソッドを参照するデータ構造です。

## Delegateクラスの派生としてAction、Funcそれぞれのデリゲートが存在する
まず`Delegateクラス`があって、その派生に`Delegate`から派生した`Actionデリゲート`、`Funcデリゲート`がある。
この名前から想定されるようにActionとFuncの違いは`TResult`の有無であり、以下のように使い分ける

| デリゲート | 用途 |
| :---: | :--- |
| Action | UIの操作（アクション） |
| Func | コールバックなどの関数 |

以下略以降、T1～T16の最大16個の引数を受け取れるデリゲートが定義されている

```
- Delegate
    - Action
    - Action<T>, 
    - Action<T1, T2>
    - 以下略
    - Func<TResut>
    - Func<T1, TResult>
    - 以下略
```

### Actionデリゲート
[Actionデリゲート](https://docs.microsoft.com/ja-jp/dotnet/api/system.action?view=net-5.0)
> `値を返さないメソッド`をカプセル化します。

### Funcデリゲート
[Funcデリゲート](https://docs.microsoft.com/ja-jp/dotnet/api/system.func-1?view=net-5.0)
> `TResult パラメーターで指定された型の値を返すメソッド`をカプセル化します。

# 試したコード
```csharp
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("----- Main - Start -----");

            DelegateTarget((string msg) => Console.WriteLine($"{msg} Callback"));

            ActionTarget((string msg) => Console.WriteLine($"{msg} Callback"));

            FuncTarget((string msg) => {
                Console.WriteLine($"{msg} Callback");
                return true;
            });

            Console.WriteLine("----- Main -  End  -----");
        }

        delegate void Callback(string message);
        static void DelegateTarget(Callback callback)
        {
            Console.WriteLine("***** Delegate - Start *****");
            callback("Delegate");
            Console.WriteLine("***** Delegate -  End  *****");
        }

        // 戻り値の設定はできない
        static void ActionTarget(Action<string> action)
        {
            Console.WriteLine("***** Action - Start *****");
            action("Action");
            Console.WriteLine("***** Action -  End  *****");
        }

        // 戻りの型引数は必須
        static void FuncTarget(Func<string, bool> func)
        {
            Console.WriteLine("***** Func - Start *****");
            func("Func");
            Console.WriteLine("***** func -  End  *****");
        }
    }
```

# 結果
```bash
PS> dotnet run
----- Main - Start -----
***** Delegate - Start *****
Delegate Callback
***** Delegate -  End  *****
***** Action - Start *****
Action Callback
***** Action -  End  *****
***** Func - Start *****
Func Callback
***** func -  End  *****
----- Main -  End  -----
```
[C#の基礎] GoFデザインパターン/テンプレートパターン

処理の流れは同じだが、場合によって処理の中身を変更したい場合に使えるパターン。

## 基本的な処理の流れの定義

```charp
public abstract class AbstractFoo{
  public virtual void Process(){
     Initialize();
     ProcessMain();
     Terminate();
  }
  public abstract void Initialize();
  public abstract void ProcessMain();
  public abstract void Terminate();
}
```

抽象クラスにしているのはこのクラス単体でインスタンス生成できなくするため。

## 実際の処理の中身を書く

```csharp
public class FooImplementationA : AbstractFoo{
  public void Initialize(){
    // do something
  }
  public void ProcessMain(){
    // do something
  }
  public void Terminate(){
    // do something
  }
}
public class FooImplementationB : AbstractFoo{
  public void Initialize(){
    // do something another type
  }
  public void ProcessMain(){
    // do something another type
  }
  public void Terminate(){
    // do something another type
  }
}
```

## 利用

単純にインスタンス生成して使う場合

```csharp
var fooA = new FooImplementationA ();
fooA.Process();

var fooB = new FooImplementationB ();
fooB.Process();
```

ファクトリー使うならこう

```csharp
class FooFactory{
  public Foo GetFoo(string type){
    if(type == "A") return new FooImplementationA ();
    if(type == "B") return new FooImplementationB ();
  }
}

var factory = new FooFactory();
var foo = factory.GetFoo("A");
foo.Process();
```

DI使うならこう

```csharp
var builder = new ContainerBuilder();
builder.RegisterType<FooImplementationA>()
  .As<Foo>
  .InstancePerLifetimeScope() ;
var container = builder.Build();

var foo = container.Resolve<Foo>();
foo.Process();
```

構成によって FooImplementationA か FooImplementationB かのどちらかを登録するようにすれば、実行時に構成ごとに使う実装を切り替えられる。
SEOとは？

## はじめに
ProgateでHTML&CSSコースを学習している途中でSEOというものを見つけたので
まとめておきたいと思います。

## SEOとは何だろう
>SEOとは「検索エンジン最適化（Search Engine Optimization）」の略称で、優良な被リンクを集めたり（外部施策）、ユーザーに価値あるコンテンツを提供し、適正に検索エンジンにページ内容を理解・評価されるよう技術的にWebページを最適化（内部施策）することで、GoogleやYahoo!などの検索エンジンでキーワードが検索された場合に、自サイトが上位に表示されるようにすることを意味します。
引用：[SEOとは？ 押さえておくべき24のSEO対策方法とポイント](https://www.gyro-n.com/seo/hack/seo-point/)

つまり検索エンジンは自分でサイトを訪問し、分かりやすいと思ったら検索上位に表示させるという仕組みになっているらしい。

SEO対策をしたとしても、すぐに検索上位に表示されるというわけではなので、
長期的にみていく必要があるみたいです。

## サイトを作る上でで重要なこと
### まずは検索エンジンに好かれるようサイトを作ろう
まずは検索エンジンに好かれるようなサイトを作りましょう。
検索エンジンに好かれなければ、どれだけいいページがあったとしても、読者に読んでもらうことはできません。

### そこから、読者が求めていることに合うようなページを作ろう
サイトを多くの人に見てもらうには初見でもわかるような構成にする必要があります。
デザインも流行りのものを使うなどを考えましょう。

## 具体的なSEO対策
SEOツールを作っている[Gyro-n(ジャイロン)](https://www.gyro-n.com/seo/hack/seo-point/#base-of-seo-1-evaluation)の記事から数個ピックアップしていきます。
元サイトにはもっと多くの対策が載っているのでぜひ参考にしてみてください。

### 対策1 コンテンツの品質と量を上げる
Googleは専門性の高い内容を評価する傾向にあるため、特定のものに対して深く掘り下げる必要があります。
コンテンツ量としては、2000~4000文字ほどあれば評価されるようです。

### 対策2 ページタイトルを工夫する
ページタイトルには必ずキーワードを含め、なるべく前方に表示する。
また、最大で30文字ほどにし、簡潔に記載する。

### 対策3 内部リンクをしっかり構成する
表示しているページからの同じサイトのリンク(内部リンク)が多ければ多いほど評価されやすくなります。
また、パンくずリスト(そのページの階層をわかりやすくしたもの)も効果的です。
【PHP】ユーザー定義関数を初心者に説明してみる

初心者のみなさん、`関数`使ってますか？
普通に使ってるってツッコミありがとうございます笑

####公式から

[公式: ユーザー定義関数](https://www.php.net/manual/ja/functions.user-defined.php)

```php:公式の例から
<?php
function foo(引数1, 引数2, /* ..., */ 引数_n)
{
    echo '関数の例' . '<br>';
    return $retval;
}
?>
```

上の例は単に関数って`こんな形だよ`ってだけの例ですね。
あんまり参考になりません。

ちょっと使える形にしてみます。

```php:改造後
<?php
function add(num1, num2)
{
    $sum = num1 + num2;
    return $sum;
}
//call
$num1 = 5;
$num2 = 10;
echo add(num1, num2);
//-> 15
?>
```

`使えない？？`
たしかに`使えない`ですね笑
そもそも1行で書ける足し算を関数にしただけなので。

では関数って`どんなときに使うと効果的`なんでしょうか？

####関数を使う場面

__例えばこんな処理__
`DBに接続してユーザーがいたら、
ユーザー情報を取ってきて、
選択した値によって表示するカラムを変更して出力。`

```php:関数を使った例
<?php
$input_column_int = 3;
$dbh = connectDb();
$user = findUser($dbh, $id));
if ($user) {
    outputColumn($user, $input_column_int);
} else {
    echo 'ユーザーが見つかりません';
}
```
```php
connectDb();
//->PDOを使ってDBに接続する関数
findUser();
//SQLをPDOで走らせて$idに対応するユーザー情報を取ってくる関数
outputColumn()
//-> $userのカラム番号=$input_column_intの値を表示する関数
```

詳しいコードは書きませんが、関数を使っていると`スッキリ`見えますよね？
`全部のコードをベタ書き`すると`読むのがウンザリする`のはなぜでしょうか？

####処理が2つ以上存在してくるとややこしくなる

なのでこういうことです！

 * `関数で処理を隠す`
 * `関数名でなんの処理かわかるようにする`
 * `一気に可読性があがる`

####関数を作るときに意識したいこと
関数は大きく分けて`2種類`に分かれます。

１．`状態を変化させる`
２．`数式などで値やオブジェクトを返す`

 * `１`は例えば`出力`です。
やっている`処理ブロック`に`名前をつけてあげるイメージ`です。
ここでは１行の処理ですが２０行ぐらいあって、それに`適切な関数名`をつけてあげたらどうでしょう？
`関数名がコメントの役割を果たしてくれる`ってわけです！

```php:１.状態を変化させる
function outputColumn($user, $id) {
    echo $user[$id];
}
```

 * `２`は`返り値のあるパターン`です
引数に入力された値を元に計算やDB処理を行い、`値やオブジェクト`を返します。
関数はブラックボックスにすることができます。

```php:２．数式などで値やオブジェクトを返す
function findUser($dbh, $id) {
    $sql = 'select * from users where ?';
    $stmt = $dbh->prepare($sql);
    $stmt->execute([$id]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);
    return $user;
}
```
####関数を1処理にすることのメリット
 * `テスト`が容易になる
 * `使い回し`やすくなる
 * `関数名が明確`になり、コード内の`可読性`があがる

####まとめ

・関数化するときに一番気をつけることは、`読みやすくすること`です。
・そして関数化した部分は`十分なテスト`をし、ブラックボックス化して`後々チェックする部分`を`極力減らしましょう`。

・`最初から関数化`しようとせずに、`処理が増えてきた後にやる`ほうが無難です。
・`最初からやってやろう`はあまりうまくいきません笑

#####お願い
`LGTMお願いします！
ストックのついでにお願いします！
モチベーションがあがります！`
【Q&A】'' と　""   使い方の違いって何ですか？ 

#結論
機能としては同じです。極端な話、どっちでもいいです。
どちらも文字列を表現します。

個人的には、手が小さいので””の方が好きです。
（手が届くから）


#注意
プロジェクトのルールで定まっている場合はTPOに合わせて従いましょうね。

>例:
jQuery："
three.js：'
AngularJS：'
※現場に寄る
【Q&A】TypeScript /  var let const　の違い　使い分け

#var/let/constとは？
変数を宣言する際に使うキーワード。

何がいいのかというと
『let』と『const』により、<b>変数の値を意図せず上書きしたり、間違って同じ名前の変数を宣言してしまうようなバグ</b>を防止できるようになりました。

varを使う必要性が感じないのは私だけですかね？？

#varとは
varでは再宣言、再代入が可能です。

```typescript
var test = '初期値';
test = '再代入OK';
var test= '再宣言OK';
```

>追記：varを使わないと行けないときは、JavaScriptの実行環境がかなり古い場合。

昔のJSにはconstやletはなく、varしかありませんでした。
なのでTypeScriptのように
JavaScriptにトランスパイルする言語では使うことはまず無いですmm


#letとは
letでは**再宣言が禁止**

```typescript
let test= '初期値OK';
test= '再代入OK';
let test= '再宣言NG';
```


#constとは
constでは、**再宣言、再代入が禁止**=定数

```typescript
const test = '初期値OK';
test= '再代入NG';
const test= '再宣言NG';
```

#まとめ
>**再代入が必要**な時は、**『let』**
**定数**にしたいなら**『const』**



#スコープの範囲について
##let
下記のようにletを使用すると、ブロックの中と外で同じ変数名でもスコープを分けてくれます。

```typescript
let a = 'イエス ブロック！';
var b = 'ノー　ブロック！';

if(true){
    let a = 'YES BLOCK！';
    var b = 'NO BLOCK！';
    console.log(a);//YES BLOCK！
    console.log(b);//NO BLOCK！
}

console.log(a);//イエス ブロック！
console.log(b);//NO BLOCK！
```


##const
```typescript
const a = '定数';
if(true){
const a = 'YES CONST!';
console.log(a);//YES CONST!
}
console.log(a);//定数
```



次回は''と""の違いがよくわからなかったので解説します。
Java出身なので「文字列は""」って認識が抜けなくて。。。
【Mac】zshやbashでgitのタブ補完を設定したのにならないあなたへ

#はじめに
 この記事を読んでる方は、gitで`switch`する時にブランチ名が`feature/hoge`だったりで打つのめんどくさいと思い、タブ補完機能を.zshrcや.bashrcで設定しようとしてみたはずです。
でも、

**macの最初から入ってるgitだとならないんですよね。**

じゃあどうしたらいいのでしょうか？

# 結論
**brew でgitを入れましょう**
たったこれだけです。
最初から入ってるgitは消さなくていいです。

gitをbrewで入れる方法や、.zshrcや.bashrc内の設定方法の説明は、僕よりこのリンク先の方がわかりやーすく説明できると思うので、こちらの方にまかせます(あとは頼んだゾ。。。)
https://hirooooo-lab.com/development/git-terminal-customize-zsh/

# 最後に
タブ補完機能がならなくて原因を探りに探って行き着きました。
そんな自分と同じ人を減らしたくて書きました。
「gitをbrewで入れればいい」って伝えたいだけでなので、文章テキトーです。
【メモ】Jupyter notebookで複数カーネルを設定する方法

* 製造業出身のデータサイエンティストがお送りする記事
* 今回は自分のメモとして記事に残しておきます。

##はじめに
複数人で開発する際にMinicondaによる仮想環境を作成して開発することがあります。その中で、Jupyter notebookでなぜかカーネルを上手く設定できないことがありましたので、自分でカーネルを簡単に変更できる方法を備忘録として残しておきます。

##手順

###仮想環境の作成
condaを使って仮想環境を作成します。下記コードで簡単に設定できます。

```php
# conda create -n 環境名
$ conda create -n env

$ conda info -e
```

下記のように仮想環境（env）が簡単に作れます。

```php
base                  *  /Users/opt/anaconda3
env                      /Users/opt/anaconda3/envs/env
```

###Jupyter notebookへカーネルを設定する方法
先ほど構築した仮想環境をカーネルに追加します。仮想環境をactivateにして、下記コードで簡単に設定できます。

```php
# conda activate 仮想環境名
$ conda activate env

# jupyter notebookへカーネルを追加
$ ipython kernel install --user --name=env --display-name=env
```

下記にオプションを整理しておきます。

|オプション|内容|
|:---|:---|
|--user|・現在ログイン中のユーザーにインストール　|
|--name NAME|・カーネルスペックの名前を指定　|
|--display-name NAME|・表示されるカーネルの名前を指定　|

###Jupyter notebookのカーネルを削除する方法
構築した仮想環境のカーネルを削除する方法は、下記コードで簡単に設定できます。

```php
$ jupyter kernelspec uninstall env
```
hoverで子メニューが表示されるサイドバーメニュー

※ Resultを0.25xにしてご覧ください。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="momonoki1990" data-slug-hash="eYdmmKo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="hoverで子メニューがでてくるサイドバー">
  <span>See the Pen <a href="https://codepen.io/momonoki1990/pen/eYdmmKo">
  hoverで子メニューがでてくるサイドバー</a> by 熊瀬川直也 (<a href="https://codepen.io/momonoki1990">@momonoki1990</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

* ```li```の中に、親要素(```a.parent```)と子要素(```ul.child```)を並列させる。
* 子要素(```ul.child```)は```display:none```で消しておく
* 親要素と子要素をまとめる```li```に対して```:hover```をかけ、子要素(```ul.child```)を```display: block```で表示させる。
* 親要素(```a.parent```)に対して```:hover```をかけても、子要素(```ul.child```)は親要素(```a.parent```)に内包されていないので、子要素(```ul.child```)にカーソルを合わせている時に、子要素(```ul.child```)が消えてしまう。
* 親要素(```a.parent```)は```display: block```で広げておく
* 子要素(```ul.child```)は、```z-index: 9999;```→浮かせる、```white-space: nowrap;```→折り返させない、```box-shadow: 0 2px 8px rgba(77, 77, 77, 0.2);```→浮いているように見せる
* ```li```の高さは```a```タグに対して上下```padding```をかけて押し広げる(リンクの選択範囲が```li```の高さいっぱいまで広がる)
* 親要素と子要素をまとめる```li```に```position: relative```をかけて、子要素(```ul.child```)や```span.chevron```に```position: absolute;```をかけることで、子要素(```ul.child```)や```span.chevron```の位置を定める。
* ```ul```は```list-style: none```をかけておく。
高位合成言語アセンブラを作る。 その14

# 概要

高位合成言語アセンブラを作る。
ビジュアルプログラミング・エディタblocklyで半加算器、書いてみた。

# 写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/19db320c-5076-b350-36cb-292fc01f5582.jpeg)


# 成果物

https://embed.plnkr.co/plunk/8PNMQalDpk2KkzCP

以上。
UTF-8の文字列のバイト列を取得する

基本的なことですが、「あ」をUTF-8で表現すると `0xE3 0x81 0x82` となります。エンジニアの皆さんならこの程度は暗記しているでしょうが、私はどうも記憶力が鈍ってきたので忘れがちです。

というわけで、任意の文字列（ここでは「あいう」とします）をUTF-8で表現したときのバイト列を16進数で取得する方法について、思い付くものを適当にまとめました。実用性があるものもないものも含め、何か他にあるようでしたらコメントで教えてください。

## Ruby
```ruby
"あいう".unpack("H*") # ["e38182e38184e38186"]
```

## Python3
```python
"あいう".encode() # b'\xe3\x81\x82\xe3\x81\x84\xe3\x81\x86'
```

## JavaScript
```javascript
encodeURIComponent("あいうABC") // '%E3%81%82%E3%81%84%E3%81%86ABC'
```

`encodeURIComponent()` はUTF-8を使うと規定されているのでこれが使えます。ただしASCII文字の大半はそのまま出てきます。

## PowerShell
```powershell
> [System.Text.Encoding]::UTF8.GetBytes("あいう") | % { "{0:x}" -f $_ }
e3
81
82
e3
81
84
e3
81
86
```

## その他
```sh
$ echo 'あいう' | od -t x1
0000000 e3 81 82 e3 81 84 e3 81 86 0a
0000012
```

環境依存かもしれません（自信がありません）
RUNTEQに入ったらまず知っておきたいMarkdownの書き方

## Markdownってなんすか？
Markdownは文章を読みやすく装飾するための記法です。もともとはプレーンテキストで書いたものをHTML形式に変換するためのものとして開発されました。

## RUNTEQの何で使うんすか？
RUNTEQの質問フォームはMarkdownで書かなければなりません。最初からテンプレートのようになっているのでなんとなくでも書けますが、ちゃんと知っておいたほうがきれいに文章が書けると思います。

## 最低限知っておきたいコードの書き方
最低限コードの書き方がわかればなんとかなります。`puts "RUNTEQ"` みたいなやつです。
これはバッククォート`` ` ``で囲ってあげるだけです。
`` `puts "RUNTEQ"` ``

複数行のコードを書きたいときはこれと同じようにバッククォート3つ```` ``` ````で囲ってあげます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555267/6f6a3eb5-45b0-8708-44cd-486f438ec9d5.png)


```
school = "RUNTEQ"
puts school
```

こんなやつです。この際バッククォート3つの外側に上下それぞれ1行ずつ空けないと正しく表示されないことがあるみたいです。
この2個の書き方だけ覚えておけばとりあえずOKです。

なぜこれが大事かというと、長いコードをプレーンテキストで貼り付けただけだと見辛い上に、Markdown記法が邪魔をして意図した通りに表示されない恐れがあるためです。この2個の記法を使って良いRUNTEQライフをお送りください。

## おまけ編
流石にこれだけだと寂しいので知っておくと見やすい文章が書ける書き方を紹介します。

### 見出しの書き方
見出しは`#` で表します。6個まで書けて数を増やすほど小さくなります。HTMLのH1~H6と同じです。

```
# 見出し
## 見出し
### 見出し
#### 見出し
##### 見出し
###### 見出し
```

# 見出し
## 見出し
### 見出し
#### 見出し
##### 見出し
###### 見出し

### リスト
リストは`-`か`+`か`*`をつかいます。どれも同じです。

```
- リスト
+ リスト
* リスト
```

- リスト
+ リスト
* リスト

数字付きリストを書きたいときはピリオド付きの数字を使います`1.`みたいな感じです。

```
1. リスト1
2. リスト2
3. リスト3
```

1. リスト1
2. リスト2
3. リスト3

### 引用
`>`で引用を表せます

```
> 引用です
> 引用です
> 引用です
```

> 引用です
> 引用です
> 引用です

### 強調
文字を強調して表示したいときは`*`2個か`_`2個で囲みます。

```
**強調**
__強調__
```

**強調**してます
__強調__してます

ちなみに1個で囲むと斜体になります。

```
_naname_
*naname*
```

_naname_
*naname*

### リンク
`[表示文字列](リンク先)`でリンクを作成できます。

`RUNTEQの申し込みは[こちら](https://runteq.jp/)から`

RUNTEQの申し込みは[こちら](https://runteq.jp/)から

### 画像の埋め込み
RUNTEQで質問する時の画像の埋め込みはGyazoのシェアのマークダウンをコピーを選んでおけばいいんですが(リンクをコピーだと開かないといけないから見る人がめんどい)、自分で書くときは`![代替テキスト](画像のURL)`で表示できます。

`![ランテクン](https://blog.runteq.jp/wp-content/uploads/2020/09/chihou-800x527.png)`

![ランテクン](https://blog.runteq.jp/wp-content/uploads/2020/09/chihou-800x527.png)

### 線
`*`3個か`-`3個か`_`3個で線が引けます。

```
***
---
___
```

***
---
___

## さいごに
Markdownは方言みたいなものが多くGitHubで使えるものや、Qiitaで使えるものなど色々あるみたいです。ですが基本のMarkdownを抑えていればあと少し覚えるだけで便利な記法を使えると思うのでぜひ使ってみてください。
RUNTEQ入りたてで質問のやり方よくわかんない人は運営に聞けば優しく教えてくれると思うので悩みすぎることなくどんどん質問していくといいと思います。

## 参考文献
[Daring Fireball: Markdown Basics](https://daringfireball.net/projects/markdown/basics)
[日本語Markdownユーザー会](https://www.markdown.jp/)
[Markdown記法 チートシート - Qiita](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
上記参考にさせていただきましたありがとうございます。
IPv6下でFWが有効化されていない意味を考える(2)

#TL;DL
かなり間が空いてしまったが、以下の記事で思ったより簡単にIPv6アドレスは見つかってしまうことがわかると思う。
https://qiita.com/maccadoo/items/e4ee3514e8d907487e12

うちはIPv6なんて契約してないよという奥さん。
windowsやmacOSならターミナルを開いて以下のコマンドを打って下さいな。

```
> ipconfig

inet6 2XXX:XXXX:XXXX:XXXX:
```

2千番台で始まるアドレスを見つけたら、奥さんIPv6開通済みです。
そんなご家庭に、旦那が遊んでいるラズパイなんかを見つけたら、この記事を見せてあげてくださいな。

そのラズパイには簡単にアクセスでき、乗っ取られる可能性が高いから注意してね。というのがこの記事の本題です。

旦那がうちはルーターが初期設定だからラズパイにアクセスなんかできねーぜって言い始めたら、とりあえず一発殴ったあと、以下の記事を読んで、この記事に戻ってきてくださいな。
https://qiita.com/maccadoo/items/41e4cde50d1a288a19d6

大声で言いたい。IPv6はバレたのが前提で対策立てた方が良いと。
そんな中でFirewallが有効化されていないなんてありえない。
そんな設定がデフォルト設定なんてありえない。と言いたいところですが、実際デフォルトなんですよ。奥さん

#前準備
ラズパイで以下のコマンドを叩いて、IPv6アドレスを調べておいてください

```
> ip a
```


#何が起こるの?
なんらかの方法ラズパイのIPv6を取得できたと仮定する。
今回実験なので、上記で取得済みです。
あとは、IPv6が使えるネットカフェあたりに行けばOKです。
幸い、Windows10で1803以降ならsshクライアントが標準搭載されているため、コマンドプロンプトかpowershellを立ち上げ以下のコマンドを実行します。

```
> ssh pi@[バレちまったIPv6]
password: raspberry

ラズパイにSSHした上で
> ip r
default via 192.168.1.1
これでルーターのアドレスが判明
> exit
一旦ラズパイから抜ける

再度SSH(今度はポートフォワード付きで)
> ssh pi@[バレちまったIPv6] -L 8080:192.168.1.1:80
password: raspberry
```

この状態で、Edge等のブラウザを立ち上げアドレスバーに
http://localhost:8080/
「ユーザ名」： admin
「パスワード」： admin

さて、以下のリンクのような画面でお好きに設定が可能です。
https://support.so-net.ne.jp/supportsitedetailpage?id=000011780

ってここは、ネットカフェな事に気がつけば、旦那は1発殴られるだけで済まないことがわかるでしょう。
そう、乗っ取られるのはラズパイだけでは済まないのです。

この記事の途中に出てきた以下のコマンドは、IPv6とIPv4を変換しながらポートフォアリングするコマンドです。優れものですね。正しく使えばですが・・・

```
> ssh pi@[バレちまったIPv6] -L 8080:192.168.1.1:80
```

#対策
以下の記事を参考に
https://qiita.com/maccadoo/items/41e4cde50d1a288a19d6
https://nuro光実測と評判.jp/nuro-ipv6-fw-security/
https://thesaibase.com/net/nuro-ipv6-fw

#あとがき
Nuro光+HuaweiのHGW(HG8045j,HG8045D,HG8045Q)の組み合わせは最凶ですね。
Nuro光はIPv6が有効
HGWにIPv6のファイアーウォールは実装されていない
ユーザー名はadminで決め打ち
初期パスワードはadminのまま運用可能

本当に配下にラズパイを初期設定で放置しておいたらどうなるのでしょう
【JavaScript】APIのエラーハンドリングをより良く書きたい。

# 当初の書き方

APIと通信を行い、ステータスコードでエラー画面を表示したり、
成功のトーストを表示したりなどをする状況で、

「エラー処理は `try-catch` だな...」と思っていた自分は
当初は以下のように書いておりました。

```javascript

let response

try {
  // API通信
  response = await this.$api.post({ ... })
} catch (error) {
  response = error.response
}

if (response.status === 201) {
  // 成功時の処理
} else {
  // 失敗時の処理
}
```


この書き方でも問題は無いのですが、
`let`を使うのはちょっと...という感じがしてしまいます。

<br>
# 改善
そこで、API通信が非同期処理であり、戻り値は`Promise`であることに着目すると、
以下のように書き換えられます。


```javascript
const response = await this.$api.post({ ... }).catch((error) => {
  return error.response
})

if (response.status === 201) {
  // 成功時の処理
} else {
  // 失敗時の処理
}
```

<br>
これで`let`を使わずに書くことができて、より良いコードになりました。
（ちなみに`Promise`については[こちらのサイト](https://jsprimer.net/basic/async/)で勉強したのですが、すごく良かったです。）


<br>
ActiveRecordでデータを月毎に集計

# [ActiveRecord]でデータを月毎に集計する方法

今回は入力した数値を月毎に集計して合計値を出力させる方法を投稿します。
ネットで検索しても、なかなか良い方法がなかったので、参考になればと思います。

使用テーブル(incomesテーブル)↓↓↓
![スクリーンショット 2020-11-28 14.03.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/875779/39a01ec9-c7a1-7e47-b5a6-841b687fec82.png)
このテーブルから2019年-月分・・・2020年-月分としたいと思います。
実行コード↓↓↓

```ruby
Income.group("YEAR(fill_date)").group("MONTH(fill_date)").sum(:price)
```
YEAR(fill_date)で年毎にグルーピングして、さらにMONTH(fill_date)で月毎にグルーピングした後、sum(:カラム名)でpriceを合計しています。
このときのターミナルのログ↓↓↓
![スクリーンショット 2020-11-28 14.05.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/875779/bde7968f-cf4b-148d-a311-4bb1f99ab2db.png)
結果、年と月を区別して合計値を出力させることができました。

今回の記事が誰かの役に立てればと思います。またもっと良い方法があればコメントしてもらえると助かります！！
AmplifyのMulti Environmentで個人的にやっていること🚀

AWS Amplify Advent Calendar 2020:santa_tone2:の
12月16日を担当させてだくDysonです。
今日は私の誕生日です:raised_hands:

AmplifyのMulti Environmentを使うと同じコードで環境の分離ができます。
例えば、商用環境、ステージング環境、開発環境の分離をamplifyで行うことができます。
開発を行っていく上ではかなり重宝します。

参考: Amplify Multi Environment でチーム開発を整備する
https://dev.classmethod.jp/articles/amplify-multienv-team-dev/

multienvは便利なのですが、Gitブランチの切り替え時にenvの切り替えを
忘れていたり、自動で書き換わる別envの設定ファイルで競合が起きたりするので
個人的にやっていることを紹介します。

# 1. Gitブランチの切り替え時にenvの切り替えを忘れを防ぐ
切り替えようのスクリプトを作成しました。

- bin/checkout-env.sh

```
#!/bin/sh
declare -A branches=(
    ["prod"]="master"
    ["staging"]="staging"
    ["dev"]="develop"
)
PS3="Select checkout env: "
select selected in "${!branches[@]}"
do
  target=$selected
  break
done

echo "Checkout: $target"
git checkout ${branches[$target]} && amplify env checkout $target
```

- 実行方法

```
$bin/checkkout-env.sh
1) dev
2) prod
3) staging
Select checkout env: 2
Checkout: prod
Switched to branch 'master'
Your branch is up to date with 'origin/master'.
✔ Initialized provider successfully.
Initialized your environment successfully.
```
実行時にenvを数字で指定します。(以前は引数でenvを指定でしたが、選択式に変更しました。)
envの切り替えを先に行うとファイルの書き換えによりGitブランチが変更できないので先にGitブランチ切り替えを実行しています。

※env名とブランチ名は各自の環境に合わせてスクリプトの変更が必要になります。

# ２. 別envの設定ファイルで競合を回避する

Amplifyのenvの切り替えやamplify pushを行うと設定ファイルやCloudFormationの
テンプレートが更新されます。
.gitignoreでファイルを除外する方法もありますが、管理対象からは除外したくなかったので
.git/configと.gitattributesに競合時は自ブランチのファイルを優先する設定を追加しました。

- .git/config

```
[merge "ours"]
    name = "Keep ours merge"
    driver = true
```

- .gitattributes

```
src/aws-exports.js merge=ours
amplify/team-provider-info.json merge=ours
amplify/backend/api/*/build/cloudformation-template.json merge=ours
amplify/backend/api/*/build/parameters.json merge=ours
amplify/backend/auth/*/parameters.json merge=ours
amplify/backend/function/*/*-cloudformation-template.json merge=ours
```

その他こんな工夫をしているとかあれば教えて下さい！
それでは**Merry Amplify**:tada:
【SES】SESとは

## SESとは
**Amazon Simple Email Service** の略
フルマネージド型・サーバレス型のコスト効率に優れたEメール配信サービス

- メール転送エージェント（Mail Transfer Agent ※メールサーバー）の構築が不要
- SMTPエンドポイントまたはAPIエンドポイントにリクエストを送ることでメール送信が可能
- バウンス処理（メール送信失敗時の処理）の設定が可能

## メール送信
### SMTPエンドポイント
**SMTP**：Simple Mail Transfer Protocol の略
インターネットなどのTCP/IPネットワークで標準的に用いられる、メールを送信するための通信プロトコルの1つ

- 生成済みのメッセージを受け取り、SESのSMTPエンドポイントを経由してメールを送信する
- 利用ポートは、25 / 465（SMTP over SSL） / 587（Message Submission）
- TLS（Transport Layer Security）が必要
- 認証にはAWSアクセスキーとシークレットアクセスキーを使用

### APIエンドポイント
**SendEmail API**：From / To / Subject / Body などの情報を付加したリクエストを送ると、SES側でメッセージを生成してメールを送信する

**SendRow API**：メッセージ全体をアプリケーション側で生成してメールを送信する

- 認証には専用IAMユーザーを作成し、そのクレデンシャルを使用
Rubyのputsメソッドについて簡単に

Rubyには「puts」と呼ばれるメソッドが用意されています。

呼び方は人によりますが「プッツ」だったり「プットエス」と呼ばれていたりします（僕はプッツ派です）。

このputsメソッドはターミナルに値を出力するためのメソッドになります。

記述方法は簡単でputsの後ろに
「" "」（ダブルクォーテーション）または、
「' '」（シングルクォーテーション）と呼ばれる記号の中に文字列を記述するだけです。
数値はそのまま「" "」や「' '」で囲まずに記述します。

「""」はshift + 2
「''」はshift + 7
でそれぞれ表示することができます。

putsは数値を足すこともでき、文字列同士を連結することもできます。


```ruby

puts "値"  #ターミナルの出力は「値」
puts 10    #ターミナルの出力は「10」数値なので「""」はいらない

#数値の足し算、文字列の連結
puts 10 + 10  #ターミナルの出力は「20」
puts "これは" + "文字列です"  #ターミナルの出力は「これは文字列です」

```


ただし、「数値の足し算」「文字列の連結」は同じ数値同士、文字列同士のみの話です！

Rubyには「文字列」と「数値」の概念があります！
Rubyでは「数値 + 文字列」の計算は基本的にはできません。
以下に例をあげます。

```ruby
puts 100 + "歳です" #数値と文字列の計算

#ターミナルの出力は
Traceback (most recent call last):
        1: from array.rb:1:in `<main>'
array.rb:1:in `+': String can't be coerced into Integer (TypeError)

```

このようにエラーが表示されます。
この時のRubyは<h3>「文字列を数値に変換できませーーん」</h3>とエラーを返してくれます。


この数値の「100」と文字列の「歳です」という文字を連結させるにはどうすればいいのか、、、

答えはこうです。

```ruby
puts "100" + "歳です" #「100」を文字列として記述
#出力は「100歳です」
```
他にも記述方法はあるんですが今回は簡単な記述方法にします。

<strong>え、さっき数値は「" "」いらんゆうたやん、、、

と、思った方そうです、<strong>数値は</strong>「""」や「''」を必要としないです。

ただし、<strong>数字を文字列として扱う場合</strong>は別で、この場合<strong>「文字列同士の連結」</strong>になります。　

ややこしや〜

<h2>まとめ</h2>

・putsメソッドはRubyに予め用意されているメソッドである。
・putsを使ってターミナルに表示するには、<strong>文字列</strong>なら「""」や「''」の中に記述する、<strong>数値</strong>の場合はそのまま記述する。
・基本的には「文字列」 + 「数値」の計算はできない。
rootアカウントのパスワードを変更【ubuntu18.04】

## TL;DR（要約）
- rootのパスワード忘れちゃった（ダメ。ゼッタイ。）
- rootのパスワード復旧方法を書きました

## 前置き
ubuntuを触りたいお年ごろ。そんなあなたは試行錯誤する中でrootパスワードを設定したくなります。ここでは、仮にrootパスワードを忘れてしまった場合に備えた解決策を書きました。

## 前提
- OS：ubutu18.04

## 解決手段その1
sudo権限を持っているユーザでrootのパスワードを変更する

**手順1**. 次のコマンドからrootのパスワードを変更

```shell
sudo (username) passwd root
```

## 解決手段その2
sudo権限を持つアカウントのパスワードも忘れてしまった（ダメ。ゼッタイ。）

**手順1**. GRUBモードを起動するために、再起動した後「ESCキー」または「Shiftキー」を連打

**手順2**. 「ubuntu」にカーソルを合わせて、「eキー」を押す

**手順3**. 「linux /boot/......」と記述されている行を見つける

**手順4** 「ro」と書かれているところを「rw single init=/bin/bash」に書き換え、あの後に続く単語を削除する（行は削除しちゃダメ）

**手順5**. 「Ctrl+X」または「F10」を押す

**手順6**.「root@(none)#」とでてきたら、次のコマンドを打ちパスワードを変更

```shell
passwd
```
**手順7**.「Ctrl+Alt+Del」を押し、再起動をかける

## Option（パスワードの初期化）
rootのパスワードは、デフォルトでは設定されていないため、パスワード入力によってrootアカウントに直接ログインすることができなくなっています。これは、rootアカウントが乗っ取られるリスクを下げるためだと思われます。そのため、本来はrootのパスワードを設定しない方が安全かもしれません。

（ただ管理者の意識次第ではありますので、sudo権限を持つアカウントを乗っ取られてしまったら、元も子もありません。）

そのため、rootのパスワードを設定してしまったら、削除する方法を書いておきます。

```shell
passwd -d root
```

## 参考文献
ありがとうございました。
- [Reset the Root Password on Ubuntu](https://www.vultr.com/docs/reset-the-root-password-on-ubuntu)
- [ubuntu のパスワードを強制的に書き換える（設定する）](https://cootaman.hopto.org/?p=24936)
- [Ubuntu 18.04: 忘れたパスワードを再設定する](https://www.hiroom2.com/2018/05/27/ubuntu-1804-reset-forgotten-passwd-ja/)
自分的Markdown記法まとめ

## はじめに
私は今年の11月からプログラミングの学習を始めました。
2021年4月までに内定をいただくことを目標に勉強を進めていきます:grin:

## この記事について
Markdown記法について自分が再び検索するであろうことをまとめておきます。

- 説明
- 記述例
- 表示例

の順で書いています。
表記方法が複数あるものは自分が一番使いやすそうなものを選んでいます。

ちなみに記事の右上にある･･･から"Markdownで本文を見る"を押すと
実際のこの記事の原文を見ることができます。
ぜひ参考にしてみてください。

## 見出し
見出しを使うことで記事が読みやすくなることはもちろん、
自動で目次をつけてもらうことができます。

```
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
```

# 見出し1
## 見出し2 　←これと
### 見出し3　　←これが使い勝手良さそう
#### 見出し4

## 箇条書きリストと番号付きリスト
行頭を箇条書きにしたり、数字をつけたりできます。
インデントをつけることもできます。

```
- 箇条書きは
- 見やすくなるので
    - 積極的に使いましょう

1. 番号付きリストは
1. 全部１にすると
    1. 修正が楽になる
```

- 箇条書きは
- 見やすくなるので
    - 積極的に使いましょう

1. 番号付きリストは
1. 全部１にすると
    1. 修正が楽になる

## コード埋め込み
### 1行の場合
`バッククオート`で囲むことで文中に表示することができます。

### 複数行の場合
以下のようにバッククオート3つで埋め込むことができます。

また、上下列は空行にしておきましょう。
バッククオートの後に言語を入れてやるとハイライトしてくれます。
:ファイル名　とすることで以下のように表示させることもできます。

```markdown:test.txt
(空行)
'''markdown:test.txt
これはアポストロフィーですが、　脳内でバッククオートに変換してください。
ちなみにバッククオートは、JISキーボードでは　Shift + @　です。
'''
(空行)
```



## 引用
行頭に大なり > をつけることで引用できます。

```
> ああああ
> いいいい
> うううう
```

> ああああ
> いいいい
> うううう

## 強調・打ち消し戦
文字をアスタリスク * 2個で挟むことで**強調**されます。
波線 ~ 2個で挟むと~~打ち消し~~されます。

## リンク
何かを参考にした場合は必ずリンクを貼っておきましょう
リンクを貼るだけの場合はhttps://から入力することでそのままリンクにすることができます。

```markdown
[Qiitaのトップページ](qiita.com "ここに説明が入ります")
https://qiita.com
```

[Qiitaのトップページ](qiita.com "ここに説明が入ります")
https://giita.com

## 参照
[Markdown記法 サンプル集](https://qiita.com/tbpgr/items/989c6badefff69377da7)
Progate　JavaScript　III

[スクリーンショット 2020-11-28 13.36.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/915765/50e64e7c-3ce7-df21-d279-26e14a5eae6a.png)

return文難しいですね・・。
これを使うとコードがスッキリして扱いやすくなるのでしょうけど、少し複雑。。
現存してる知識で無理矢理数値は合わせましたが、return文の深い理解がもう少し必要だと感じました。
【HTML・CSS】子要素内のコンテンツ配置をdisplay:flexで行う

#プログラミング勉強日記
2020年11月28日
子要素内のコンテンツ配置をdisplay:flexで行う方法について学びました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">お疲れ様です😌<br><br>💥メモ<br><br>display:flexは、子要素の横並びにしか使ってなかったですが、子要素内でのコンテンツの配置にも使用できることを知りました😌 <a href="https://t.co/mic8I1Td2k">pic.twitter.com/mic8I1Td2k</a></p>&mdash; ミキ🐹@プログラミング (@mikiprogram) <a href="https://twitter.com/mikiprogram/status/1332544748800724992?ref_src=twsrc%5Etfw">November 28, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#参考本
[CSS設計完全ガイド ~詳細解説+実践的モジュール集 ](https://www.amazon.co.jp/CSS%E8%A8%AD%E8%A8%88%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89-%E8%A9%B3%E7%B4%B0%E8%A7%A3%E8%AA%AC-%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E9%9B%86-%E5%8D%8A%E7%94%B0-%E6%83%87%E5%BF%97/dp/429711173X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=36Z312ES9035M&dchild=1&keywords=css%E8%A8%AD%E8%A8%88%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89&qid=1606538772&sprefix=CSS%2Caps%2C343&sr=8-1)
SeeeduinoXIAO で I2S 出力する

# 概要

SeeeduinoXIAOは公式ではI2S出力ができないことになっているが、SoCのデータシートを良くみるとI2S出力が可能である。

https://files.seeedstudio.com/wiki/Seeeduino-XIAO/res/ATSAMD21G18A-MU-Datasheet.pdf

PinNoを緑、I2S部分を黄色で纏めると以下の通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187531/8bd23f5f-a63a-f3b0-0717-41141ad072d9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187531/7fd7e51f-0f7d-212b-cc5b-a013997a666a.png)

# コード修正

初期状態ではI2Sが無効化されているので、下記のように修正する必要がある。

C:/Users/(YourName)/Documents/ArduinoData/packages/Seeeduino/hardware/samd/1.7.9/variants/XIAO_m0/variant.h


```C:variant.h
// I2S Interfaces
// --------------
#define I2S_INTERFACES_COUNT 2

#define I2S_DEVICE           0
#define I2S_CLOCK_GENERATOR  3
#define PIN_I2S_SD           (8u) // PA07:I2S/SD[0]
#define PIN_I2S_SCK          (2u) // PA10:I2S/SCK[0]
#define PIN_I2S_FS           (3u) // PA11:I2S/FS[0]
```

# サンプルコードの実行

I2Sの出力サンプルが提供されているので、実行。

C:/Users/(YourName)/Documents/ArduinoData/packages/Seeeduino/hardware/samd/1.7.9/libraries/I2S/examples/SimpleTone

## 実行結果

PCM5102a で音出た。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187531/90449cf2-d86e-58e5-05d0-07e19a1ae46e.png)


# その他

- I2S-MCLKもコード弄れば出せる。
- PLLが載っていないので、各周波数は 48MHz の整数分周でしか出せない。
周波数毎に誤差をまとめると、以下の通り。
44.1kHzと48kHzの16bitならば十分使える領域。

|SamplingFreq|BitDepth|分周率|実周波数|エラーレート|
|--:|--:|--:|--:|--:|
|44100|	16|	34|	44118|	0.000400|
|44100|	32|	17|	44118|	0.000400|
|88200|	16|	17|	88235|	0.000400|
|88200|	32|	9|	83333|	-0.055178|
|48000|	16|	31|	48387|	0.008065|
|48000|	32|	16|	46875|	-0.023438|
|96000|	16|	16|	93750|	-0.023438|
|96000|	32|	8|	93750|	-0.023438|
【Tips】コマンドラインのおすすめキー操作

# はじめに
黒い画面で爆速コーディングしてたら、かっこいいじゃないですか〜
いちいちマウスに手を差し伸べなくてもよくなるTipsをまとめました！！！

# ショートカット
**※ | ←カーソルを示す**
#### Ctrl + F (カーソルを右に1文字移動）
```
a|bc → ab|c
```

#### Ctrl + B (カーソルを左に1文字移動）
```
ab|c → a|bc
```

#### Ctrl + D (カーソルの右の1文字を削除）
```
a|bc → a|c
```

#### Ctrl + A (カーソルを先頭に移動）
```
abc de|f → |abc def
```

#### Ctrl + E (カーソルを後尾に移動）
```
a|bc def → abc def|
```

#### Ctrl + K (カーソルより後ろを全削除）
```
a|bc def → a|
```

#### Ctrl + U (カーソルより前を全削除）
```
abc de|f → |f
```

#### Esc F (カーソルを1単語右に移動）
```
abc| def ghi → abc def| ghi
```

#### Esc B (カーソルを1単語右に移動）
```
abc def |ghi → abc |def ghi
```

#### Esc D (カーソルから単語の終わりまで削除）
```
abc |def ghi → abc | ghi
```


#終わりに
多分、最初はみんな遅い。でも使わないと、ずっと遅い。
Laravel6 検索フォーム (GET) パラメータを取得できない時の対処法


この記事は、Laravel6において検索時にGETメソッドのパラメータを取得できない時の対処法です。

#環境

macOS
Laravel 6.20.3
Doeker 19.03.13

Eventテーブルにあるtitleカラム(string型)を検索します。一致する場合それを返し、一致しない場合はEventの全てのカラムを返します。

#解決する前
検索機能に関係あるところだけ書いています。

```event/index.blade.php
<div class="container">
  <div class="row">
  <form action="{{url('/event')}}" method="GET">
    <input type="text" name="search" value="{{ $search }}" placeholder="イベント名を入力してください">
    <input type="submit" value="検索">
  </form>
  </div>
</div>
```
```EventController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Event;

public function index(Request $request)
    {   

        $search = $request->input('search');
        if (!empty($search)){
            $events = Event::where('title',$search)->orderBy('created_at','desc')->get();
        }else{
            $events = Event::orderBy('created_at','desc')->get();
        }
        return view('event.index',compact('events'));
}
```
```wep.php
Route::resource('event', 'EventController');
```
formのGETメソッドを使いパラメータをcontrollerに渡しています。
しかしパラメータは空になりelse文ですべてのEventが返ってしまい検索ができませんでした。
(ちなみにcontrollerの一行目にdd($request)を追記することでパラメータは確認できます。)

#解決方法

index.blade.phpを以下のように修正します。

```index.blade.php
 <form action="{{ route('event.index') }}" method="post">  
      {{ csrf_field()}}  
      {{method_field('get')}}
      <input type="search" name="search" placeholder="イベント名を入力してください">
      <input type="submit" value="検索">
 </form>
```

formの方をpostにして、{{method_field('get')}}でメソッドをgetにしています。
この方法で無事にパラメータが渡り、検索できるようになりました。

Laravelのバージョンによっては解決前の書き方でできるみたいなので、環境に合わせて色々試してみてください。
FIDO認証 概要

認証プロトコルの一つであるFIDOについてまとめる。学習記事。

## FIDOとは

* FIDO認証:パスワードの依存度を減らし、利便性と安全性を満たすための認証プロトコル。

## FIDO登場の背景

* 認証手段として、パスワードは利便性と安全性の両面で課題がある。
  * 利便性：複数のパスワード管理、小型端末での入力が不便。
  * 安全性：パスワード漏洩時の不正アクセスの危険性。
* 上記課題を解決するための認証プロトコルとして、FIDOが登場した。

## FIDO認証概念

* 認証器：利用者の本人性を検証する主体。
* 認証サーバー：認証器による検証結果を受け取り、その妥当性を確認するサーバー。![FIDO_concept.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/82f1c3ac-4503-e553-e502-cea5ee09ba44.png)




## FIDO認証の流れ

### 署名情報の生成・登録

1. 認証サーバーに認証器を登録する。
   * 認証器は秘密鍵と公開鍵を生成する。
     * 認証器は秘密鍵を保管する。
     * 認証サーバーは利用者のIDに紐づけて公開鍵を保管する。

### 認証

1. [認証器]認証サーバーからチャレンジ(有効なランダム文字列)を受け取る。
2. [認証器]本人性の検証を行う。
3. [認証器]　(本人性が検証できた場合、)1.で受け取ったチャレンジを秘密鍵で署名する。
4. [認証器]検証結果＋署名付きチャレンジを認証サーバーに送信する。
5. [認証サーバー]受け取った署名付きチャレンジを対応する公開鍵で検証する。
6. [認証サーバー]　(署名検証に成功した場合、)認証成功。

![FIDO_sequence.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/2e348dfc-bfde-3cf8-8136-c9199867af70.png)


## 参考情報

* [Fido認証概要説明](https://www.slideshare.net/FIDOAlliance/fido-83445442)
* [Bonfire API #1 生体認証のAPI化](https://www.slideshare.net/techblogyahoo/bonfire-api-1-api-88021627)
laravel 初めてデータベースを接続する際のエラー解決



#はじめに
今回はUdemyにて学習した際に発生したエラーになります。その解決方法を投稿したいと思います。

#初学者の方へ
初めてphpMyAdminとlaravelがデータベースに接続する際にどの様にエラーを突破したかを書いていますので是非参考にしてみて下さい。

今回のエラー文は下記になります。スクショも載せます。

```
`SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: nodename nor servname provided, or not known (SQL: select * from information_schema.tables where table_schema = laravel_task and table_name = migrations and table_type = 'BASE TABLE')`
```

![2020-11-25_12-34-39-47c2c1db8e1dbed6e5db458f9a1dcb3e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698439/eaec097e-c858-7b68-b688-b5f0d1a9284b.png)



#エラー文の解説
データベースに接続する際、拒否されています。
つまりlaravelの.envにてはポート番号 password データベースの名前が間違っている可能性が高いとなります。

#.env ポート番号 phpMyadmin を確認しよう

``` .env.php
//laravelの .envになります。
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_task
DB_USERNAME=laravel_user //phpMyadminの特権にusernameがあります。
DB_PASSWORD=hosthost
```
![2020-11-25_12-51-33-0e26f83ec25a51da85872d4b77c8f59b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698439/34680b76-f9f4-0d5f-f2b7-eb77fc906262.png)
![e7e7520802da32fab0aae676b6e86f1d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698439/239807c8-f16a-d5f6-a1c7-61c9514c7532.png)

#エラー解決
`DB_HOST`を確認すると`phpMyadminでは[%] .envでは[127.0.0.1]
これがエラーの原因となります。こちらを下記に書き換えます。


``` .env.php
//laravelの .envになります。
DB_CONNECTION=mysql
DB_HOST=localhost  //ここを書き換えて下さい
DB_PORT=3306
DB_DATABASE=laravel_task
DB_USERNAME=laravel_user //phpMyadminの特権にusernameがあります。
DB_PASSWORD=hosthost
```
また、念のためですが`database.php`も下記に書き換えます。

```database.php
// 5４行目を書き換えます
'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => '/Applications/MAMP/tmp/mysql/mysql.sock', 
　　　　　　　　//'unix_socketを上記のように書き換え
            'charset' => 'utf8',
            'collation' => 'utf8_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],
```
また、ターミナルで下記を実行して下さい。

```
//ターミナルにて
php artisan cache:clear
php artisan config:cache
``` 


最後に`php artisan migrate`を実行すると下記のスクショの様に解決できます。
![“スクリーンショット” 2020-11-28 13.17.21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698439/48e3e882-110e-4e24-4d1b-bf955210e2c6.jpeg)

#最後に
如何でしょうか?無事に解決できましたか?
もし、おかしいところがあれば是非突っ込んで欲しいです。
Active Hashの使用方法


テーブルを使用するがデータが決まっている場合、データベースにデータを保存せずにテーブルを使用するActive Hashの使用をします。

例えば性別の場合、男性・女性・その他の３通りのため、テーブルでデータを作成する必要がありません。


<h1>Active Hash導入</h1>

active_hashのgemを導入します。

```ruby:Gemfile
gem 'active_hash'
```
```ruby:ターミナル
bundle install
```

<h1>Active Hash用のテーブル作成</h1>

今回性別(gender)テーブルを作成します。

Active Hashの場合、データベースに保存するために必要なマイグレーションファイルが不要なため、--skip-migrationを追記します。

```ruby:ターミナル
rails g model gender --skip-migration
```

コマンド入力後、以下のファイルが作成されます。
このファイルに、カラムやレコードを手動で設定します。

<h3>app/models/gender.rb</h3>


<h1>モデルの設定</h1>

先ほど作成したファイルより、モデルの設定をします。

<h2>継承先設定</h2>

genderモデルにActiveHash::Baseを継承し、
ActiveRecordと同じようなメソッドを使用できるようにします。

<h3>変更前</h3>
```ruby:app/models/gender.rb
class SleepTime < ApplicationRecord
end
```

<h3>変更後</h3>
```ruby:app/models/gender.rb
class SleepTime < ActiveHash::Base
end
```

<h2>カラムとレコード設定</h2>

genderモデルで使用するカラムとレコードを設定します。

```ruby:app/models/gender.rb
class Gender < ActiveHash::Base
  self.data = [
    { id: 1,  type: '男性' },
    { id: 2,  type: '女性' },
    { id: 3,  type: 'その他' }
  ]
end
```

<h2>コントローラーからビューに引継ぎして表示</h2>

genderテーブルのデータをコントローラーで取得し、ビューに引継ぎさせます。
※今回はtestコントローラー→ビューで使用します。


```ruby:app/controllers/test_controller.rb
class TestsController < ApplicationController
  def index
    # genderテーブルの全データ取得
    @genders = Gender.all
    # genderテーブルの指定カラムのみ取得(今回はtypeカラムのみ取得)
    @genders_type = Gender.pluck(:type)
  end
end
```

Allメソッドで取得したデータをビューで表示する時、
Active Hashでは「all_records」メソッドを使用しないといけないため注意

```ruby:app/views/test.index.html.erb

# allメソッドで取得したデータの1配列目のtypeデータ
<%= @genders.all_records[1].type %>
=> 男性

<%= @genders_type[2] %>
=> 女性
```




<h3>参考</h3>
https://hirocorpblog.com/post-221/
Next.js v10でTypeScriptを使いつつEmotion v11を使おうとしたら5時間も解決しなかった話

## これは何

- タイトルにあるように、5時間もハマってしまいました
- 一応解決出来たので備忘録として残しています

### 使用しているパッケージの情報

| 名前 | バージョン |
|---|---|
|next|10.0.1|
|react|17.0.1|
|typescript|4.0.5|
|@emotion/react|11.1.1|
|@emotion/babel-plugin|11.0.0|


## JSX Pragmaが動かない

### 事象

- [インストールの記事](https://emotion.sh/docs/install)などには`/** @jsx jsx */`という記述が紹介されている
- しかしそのままだとコンソールエラーが出た

### 解決策

- `/** @jsxImportSource @emotion/react */`という記述にする
    - [CSS Propの詳細な説明のページ](https://emotion.sh/docs/css-prop#jsx-pragma)に記載されている
    - Reactのバージョンが新しくて（v17）JSXのランタイムの方式が違っていたため、従来の記述からは変える必要があった

## Babelの設定が上手く働かない

### 前提

- 新しいJSX Pragmaが動くようにはなったものの、毎回書くのは面倒
- Babelの設定をしてJSX Pragmaの記載無しで動くようにしたい

### 事象

`@emotion/babel-preset-css-prop`を使ってもJSX Pragma無しだと動かなかった

### 解決策

- `@emotion/babel-preset-css-prop`の代わりに`@emotion/babel-plugin`を入れつつ、`.babelrc`を以下のようにしたら動いた
    - babelrcの中身は[公式のこのページより抜粋](https://emotion.sh/docs/css-prop#babel-preset)

```json:.babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}
```

## 動くは動くけど、型定義がなくて怒られる

### 事象

- スタイル自体は当てられるけどエディタ上でエラーが出ている
    - インストールしただけだとEmotionの型定義ファイルが無かった

### 解決策

- `next-env.d.ts`に以下の一行を足す
    - [Emotion v11についてのページ](https://emotion.sh/docs/emotion-11)に記載されている

```ts:next-env.d.ts
/// <reference types="@emotion/react/types/css-prop" />
```

## まとめ

- 過去にEmotionを適用したリポジトリを見ながら、ただ真似るだけで設定していたのが良くなかった
- 公式ドキュメントをしっかり読むのはやっぱり大事
循環リンクリストのノードの追加・削除

#メモ
片方向リンクリストを今まで書いてきたので、循環リンクリストのコードを書いてみました。循環リストなため、片方向リストと異なって、頭とお尻がないため、これらを指定するポインターを定義し、コードを書きました。

```circlelist.c
#include <stdio.h>
#include <stdlib.h>

//node declaration
struct node{
  int data;
  struct node *link;
};

//function declaration
void addcirq(struct node **, struct node **, int);
void cirq_display(struct node *);
void delcirq(struct node **, struct node **);

void main(){
  //declare front and rear pointer
  struct node *front, *rear;
  
  //set pointer to empty list
  front = rear = NULL;
  
  //add node to list
  addcirq(&front,&rear,10);
  addcirq(&front,&rear,11);
  addcirq(&front,&rear,12);
  addcirq(&front,&rear,13);
  addcirq(&front,&rear,14);
  addcirq(&front,&rear,15);
  
  //display nodes
  cirq_display(front);
  
  //delete node in list
  delcirq(&front, &rear);
  delcirq(&front, &rear);
  delcirq(&front, &rear);
  
  printf("After deletion:\n");
  //display nodes
  cirq_display(front);
}

//delete node in linked list from the front
void delcirq(struct node **f, struct node **r){
  struct node *temp;
  
  //if list is empty, print message and return to main
  if(*f==NULL){
    printf("List is empty. Nothing to delete.\n");
    return;
  }
  
  //if there is only one node in list
  if(*f == *r){
    //delete node
    free(*f);
    //set front and rear pointer to null
    *f = *r = NULL;
  }else{
    //set locator pointer to front
    temp = *f;
    
    //set rear pointer to point to the next node after front node
    (*r)->link = temp->link;
    
    //set front pointer to the next node after front node
    *f = temp->link;
    
    //delete node
    free(temp);
  }
}

//add node to linked list
void addcirq(struct node **f, struct node **r, int num){
  struct node *s;
  
  //create new node
  s = malloc(sizeof(struct node));
  //append data to new node
  s->data = num;
  
  //if list is empty
  if(*f == NULL){
    //set front and rear pointer to new node
    *f = *r = s;
  }else{
    //set link of rear to point to new node
    (*r)->link = s;
    //set rear pointer to new node
    *r = s;
  }
  
  //set link of new node to point to top of linked list
    s->link = *f;
}

//display node in linked list
void cirq_display(struct node *f){
  struct node *temp;
  
  //if list is empty, do nothing and return to main
  if(f == NULL){
    return;
  }
  
  //set locator pointer to front of list
  temp = f;
  
  //loop through list
  do{
    printf("%d\n",temp->data);
    //go to next node
    temp = temp->link;
  }while(temp!=f);
  
}
```