OmniAICreator/Qiita-1.07M huggingface dataset:
[JavaScript jQuery]トップに戻るボタンの作成 Ruby on rails

<h2>初めに</h2>
JavaScriptにまだまだ慣れていません:frowning2:
今回はまず簡単そうな...トップに戻るボタンを設置してみました。
![スクリーンショット 2021-08-22 11.31.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633266/677a7313-9c61-df98-a059-98e3074e17f8.png)

既にJqueryは導入済です。

<h2>ボタンを決める</h2>
今回は以下のアイコン素材から、矢印を入手しました！

https://iconbox.fun/

<h2>ボタンの設置</h2>

とりあえず全ページに置きたいので、
application.html.erbに記述します。

```perl:application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>my port</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    </div>
    <!--ヘッダーの内容は部分テンプレート-->
     <%= render 'layouts/header' %>
    <span id ="back"><a href="#"><%= image_tag asset_path("top3.png"), class:"back-img"%></a></span>


    <%= yield %>
  </body>
</html>
```


```<span id ="back"><a href="#"><%= image_tag asset_path("top3.png"), class:"back-img"%></a></span>```
でボタンを設置しています。

<a href="#">はページの上部を表します。
ちなみに、id=backとしてますが、classよりidで指定した方が
処理が早いそうです！

今のままだと位置が決まってないので位置をCSSで指定します。

<h2>ボタンの位置を決める</h2>

```perl:app/assets/stylesheets/application.scss
#back {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

.back-img {
  width: 50px;
  hover:none;
}
```

「position:fixed」は画面の決まった位置に固定する
ということです。今回右から,下から20pxのところに固定です。
```.back-img```のところは、私は今回hover:none;にしましたが、
画像サイズだけの指定でOKです。

<h6>これでボタンを押せば上に戻ります</h6>

<h2>jQueryで動きを出す</h2>

```perl:application.js
$(function() {
  $('#back a').on('click',function(event){
    $('body, html').animate({
      scrollTop:0
    }, 800);
    event.preventDefault();
  });
});
```


```(function() {```で関数を定義します。
```$('#back a').on('click',function(event){```は、
以下のようになっています。
今回の場合だと、$('#id名 要素名')にしてるので、
id内のaタグがクリックされたら、処理が起こるようになります。

```js
$('.セレクタ名').on('click', function() {
  イベント発生時に行われる処理
});
```

イベントの記述方法については下記もありますので、click( )という
書き方もできますが、この場合クリックされた時点で
イベントが終わってしまいます。

```js
$('.セレクタ名').イベント名(function(){
  イベント発生時に行われる処理
});
```

次にクリックされたら何をするか　ですが、以下の部分になります。

```js
$('body, html').animate({
    scrollTop:0
  }, 800);
  event.preventDefault();
});
```

「animate(）」はJQueryの関数です。
以下のような使い方ができます。

```js
$('セレクタ名').animate({
  変化対象のプロパティ名:変化値
}, アニメーションの動作時間);
```

なので今回はscrollTop:0＝最上部に、
8００ミリ秒（0.8秒間）かけて移動するということになります。
event.preventDefault(); は、aタグの機能を無効にしています。

<h2>リロードしないと動かない場合</h2>
turbolinksが邪魔をしていますので、
以下のように無効化をします。

```js
document.addEventListener("turbolinks:load", function() {
  $('#back a').on('click',function(event){
    $('body, html').animate({
      scrollTop:0
    }, 800);
    event.preventDefault();
  });
});
```


<h2>終わり</h2>
「Atomic Design」というデザイン設計手法

# Atomic Designとは
AtomicDesignとは、何かを簡単に言うとUIを構成している部品を「Atoms(原子)」「Molecules(分子)」「Organisms(有機体)」と分類して、それらを「Templates(テンプレート)」「Pages(ページ)」といった概念で組み合わせて作り上げる設計・実装の手法です。
簡単に言うと、UI コンポーネントの粒度をカテゴリーに明確に分ける手法のことです。

## メリット
- 部品が共通化されているので広範囲の修正が容易に可能。
    - コンポーネントの責務がより明確になる。
    - 見た目の粒度だけでなく、ロジックの責務も明確にできる。
- 並列作業や分業が非常にしやすい
- 部品の使い回しが非常に楽
- 世間的にも浸透している概念のため、デザイナー・エンジニア間の共通言語を作れる

## デメリット
- AtomicDesignの概念をそのまま導入すると要件に合わない場合がある。
    - チーム内でルールを制定した方が良い場合もある。
- メンバー間の認識合わせにとても時間がかかる。
- 概念や設計が破綻しないように部品を考える必要がある。

## カテゴリー

### Atoms
Atomsには基本的なスタイルだけを指定し、色やpadding、widthなどは変更できるようにつくります。`最小の粒度のコンポーネント`で、どれをAtomsにするかの判断は難しいので、デザイナーに一任するのも一つの手です。

例）Button, Icon, Text, Title ...etc

### Molecules
`Atomsを組み合わせ`て作り上げます。
使っているAtomsの色やpadding、width、などはここで指定します。
しかし、Moleculesは汎用的に使うことができる(複数organismsから参照される)ように、`Molecules自体のwidthやmarginなどは（基本的には）ここでは指定しません。`


例）Card, Box, Form, Popup ...etc

### Organisms
`AtomsやMoleculesを組み合わせ`て作ります。
使っているMoleculesやAtomsのmarginやwidthはここで指定します。
しかしOrganismsは汎用的に使うことができるよう、`Organisms自体のwidthやmarginなどは（基本的には）ここでは指定しません`。
もしも、ロジックを持つ場合は表示を制御するコンポーネントと分けて実装すると良い。

例）Header, Calendar, Modal, CardList ...etc

### Templates
こちらは`中身のないレイアウトのテンプレート`で、コンテンツのwidthや、paddingなどが含まれます。つまり、コンポーネント自体の横幅を指定しなかったことがここで活きてくるのです。
Templatesは、ロジックを持たず、pagesコンポーネントから1ページ/1回だけ呼び出されます。
DOMツリーの最もrootに近い場所にレンダリングされます。

例）MainContents, MainContentsWithSideBar …

### Pages
Pagesには、これまでのコンポーネントに実際のテキストや画像を流しこみます。
このページ特有のOrganismsのmarginなどはここで指定します。汎用的につくることは意識しませず、APIリクエストやルーティング関連の処理(基本的にRouteコンポーネントの直下にレンダリングされる)はここで行います。

## Atomic Designの粒度に分けたコンポーネントを確認する
コンポーネントの見た目は？どのAtomsを使えばいいか？等、コンポーネントの確認を行いたいときに、[Storybook](https://storybook.js.org/)というReactコンポーネント開発用ツールを使用しています。
コンポーネントのUIを一覧で確認することができます。

# 参考
[Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話]
(https://techblog.yahoo.co.jp/entry/20191203785540/)

[Atomic Designを使ってReactコンポーネントを再設計した話]
(https://blog.spacemarket.com/code/atomic-design%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6react%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E5%86%8D%E8%A8%AD%E8%A8%88%E3%81%97%E3%81%9F%E8%A9%B1/)

[React で実装する atomic design のコンポーネントごとの責務の分け方とコード規約]
(https://qiita.com/takano-h/items/8731d8e7413d7b1f6d7b)

[Atomic Designをやめてディレクトリ構造を見直した話]
(https://note.com/tabelog_frontend/n/n07b4077f5cf3)
GitHubの接続をHTTPSからSSHに変更する方法

#概要
GitHubの接続をHTTPSからSSHに変更する方法を忘備録としてまとめました。


# やり方

ターミナルを起動し以下のコマンドを入力。

```bash
 $ cd ~/.ssh
```
`~/.ssh`に移動します。


###公開鍵＆暗号鍵のペアを作成
以下のコマンドを入力

```bash
$ ssh-keygen -t rsa
```
名前とパスフレーズについて聞かれますが、無視してEnter3回押しても大丈夫です。


### 公開鍵をコピー
`cat`コマンドで公開鍵を表示します。

```bash	
$ cat id_rsa.pub 
```

表示されたら、ssh-rsaから文字列の最後までコピーします。
末尾にあるメールアドレスやIPアドレスはコピーしません。

###GitHub登録
こちらにアクセスしコピーした暗号鍵を貼り付け、適当な名前をつけて保存します。
https://github.com/settings/ssh/new


###Gitの設定

現在の設定を確認します。

```bash
$ git remote -v
```

gitに変更したSSHの接続先を登録します。

```bash
$ git remote set-url origin git@github.com:<Githubのユーザー名>/<リポジトリ名>.git
```
設定が変更されていたら完了です。

```bash 
$ git remote -v
```

`git push`出来るかどうか試してみましょう！！
GASを使って定時実行で天気をSlackに投稿する

# はじめに
(無料枠の範囲内で)個人でSlackを利用しています。
天気の情報をTVで見たり、Alexaに話しかけたり、ニュースサイトに見に行ったりするのがめんどくさいので、
Slackを使って自動で取得しようと思いました。

Googleで「Slack 天気」などで検索して、他の記事を参考にしながら構築してみました。
GAS(GoogleAppScripts)については、はじめての挑戦です。

# 必要なモノ
- Slack
  - 定時実行の結果(天気)を投稿するチャンネル
  - Incoming Webhooks
- Googleアカウント：GASつかうので
- OpenWeatherMap
  - APIキー：アカウントを作成する必要があります、無料枠で利用しています

# Let's 構築
やったことについては 下記のサイト通りです。
一部コードを書き換えています。
[はじめてのGASアプリ – 天気予報SlackBot](https://qiita.com/zhaoshibo/items/2bad07774509ada594e9)

## コード

Github: https://github.com/mabubu0203/GAS/tree/main/slack-weather

# まとめ
天気をSlackに投稿するための記事の検索などなどに30分、
OpenWeatherMapのアカウント作成に10分、
実際に構築(写経)に50分ぐらいかかりました。たぶんね。
GASの保守を今後ちゃんとうまくできるかが個人的な課題です。

# 参考さいと
- https://qiita.com/zhaoshibo/items/2bad07774509ada594e9
- https://greenkour.hateblo.jp/entry/2018/08/06/093000
【PHP学習_備忘録】 フォームデータを配列で受け取る,クロスサイトスクリプティングとは

##はじめに

本記事でやること
・フォーム入力用のHTML画面を簡単に作って、フォームデータを受け取るプログラムの作成
・エスケープ処理とは
・【セキュリティ】 クロスサイトスクリプティングとは

##フォームデータを受け取るプログラム

```html:html
<html lang="ja">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <title>Document</title>
  </head>
  <body>
    <form method="post" action="php7.php">
      好きな食べ物は？<input type="text" name = "food1"><br>
      好きな飲物は？<input type="text" name="food2">
      <input type="submit" value="送信">
    </form>
  </body>
</html>
```

```html
httpメソッドをpost指定し、受け渡しのファイル名をactionに記載(php7.phpのファイル名は適当です）
<form method="post" action="php7.php">
```

## phpプログラムの作成

```php:php7.php
<?php
 header('Content-type: text/html; charset=UTF-8');
?>

<html>
  <body>
    <?php
      $f1 = $_POST['food1']; //連想配列でデータを取得
      $f2 = $_POST['food2']; //連想配列でデータを取得
      $f1 = htmlspecialchars($f1,ENT_QUOTES,'UTF-8');
      $f2 = htmlspecialchars($f2,ENT_QUOTES,'UTF-8');
      echo 'あなたは「', $f1,  '」が好きなんですね<br>';
      echo 'あなたは「', $f2,  '」が好きなんですね<br>';
    ?>
  </body>
</html>
```
送信ボタン押したら、phpファイルで受け取りができるようになりました！

#### html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1183228/f580abcc-0cd1-7083-f462-d100ef2b58ea.png)

#### php7.php
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1183228/b885e0e5-ccb7-eb4e-e235-4bf241d7497a.png)

## エスケープ処理

最初は、下記コードの意味をわかっていなかったです。

```php
htmlspecialchars
```

htmlspecialchars関数はHTMLの特殊文字を無効化する処理を行える。

HTMLの特殊記号の例

| No |    表示     |    記述方法  |  意味 |
|---:|-------------|------------|------------|
| 1  |  <           | &lt;       |  小なり         |
| 2  |   >          | &gt;       |  大なり        |
| 3  |    &         | &amp;      |  アンパサンド    |
| 4  |     "        | &quot;     |  ダブルクォーテーション        |

でも、htmlspecialchars関数を呼び出している１番の目的は、`セキュリティ`
クロスサイトスクリプティングの不正攻撃を防ぐためです。


## クロスサイトスクリプティングとは
【下記URLのサイトから抜粋】
クロスサイトスクリプティング（XSS）とは、攻撃対象のWebサイトの脆弱性を突き、攻撃者がそこに悪質なサイトへ誘導するスクリプトを仕掛けることで、サイトに訪れるユーザーの個人情報などを詐取する攻撃のことを指します。



下記URLのサイトは図があり、わかりやすく実際に事例があったことも紹介してくれています。


https://www.amiya.co.jp/column/cross_site_scripting_20210118.html


実務においてセキュリティ知識は必須なので、まだまだ学習が必要と思いました。


#まとめ
・ユーザがサーバにデータを送る方法には、GETとPOSTメソッドがある
・GETメソッドの場合：$_GET , POSTメソッドの場合：$_POSTとすることで連想配列を参照することができる。
・クロスサイトスクリプティング攻撃を防ぐ為にHTML出力をエスケープすることが大事
・ユーザから送信されたデータをそのまま表示しない
シェルスクリプトの基礎 Part2(引数、返り値、ファイル出力、標準入出力、ファイル出力)

【引数、返り値】
echo $1 $2 $3→第1引数、第2引数、第3引数を表示

echo $0→シェルスクリプトのファイル名

echo $@→全引数を表示
echo $#→引数の数を表示
$?→直前に実行したコマンドの戻り値(成功の場合0)

【ファイル出力、標準入出力】
read var→標準入力
echo var1 = $var→入力結果表示

read var1 var2 var3→入力結果から3個変数を設定
echo var1 = $var1,var2 = $var2,var3=$var3

read -p 'var1:'var1→文字付の標準入力
read -sp 'password:'password→シークレットモードでの標準入力
read -a names→配列(Array)入力

【ファイル出力】
>:上書き
echo 'hello' > hello.txt→現在いるディレクトリのhello.txtファイルを作成(上書き)してhelloを書き込む
>>:追記→現在いるディレクトリのhello.txtファイルを作成(追記)してhelloを書き込む
【Laravel】php artisan serveで起動できない



###環境

OS: Windows10

```
chocolatey -v
0.10.15

composer -v
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 2.1.6 2021-08-19 17:11:08

 php -v
PHP 8.0.9 (cli) (built: Jul 29 2021 14:12:27) ( NTS Visual C++ 2019 x64 )
Copyright (c) The PHP Group
Zend Engine v4.0.9, Copyright (c) Zend Technologies

laravel -v
Laravel Installer 4.2.8
```


過去にXAMPPでPHPを使用していたので、そのときにインストールしたPHPのパスが残っている。

#####過去にインストールしたPHPの状況
インストールディレクトリ
C:\php-7.3.10

環境変数のPath
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/d7d2e315-718b-cbd1-ab2c-351d4bf9f963.png)

toos/php80のパスは、今回chocolateyを通してインストールしたPHPのパス。すでに順番を入れ替えてある。インストールしたてのときは、一番最後にtools/php80が追加される。

この順番のせいで、chocolateyでインストールしたPHPのパスが追加されているにも関わらず、過去にインストールしたPHPに優先的にパスが通ってしまう！


###発生エラー

メモを残しておくのを忘れていましたm(__)m

composer install
composer update
composer global require "laravel/installer=~1.1"

などいろいろ試したけど、全て何かしらのエラーが発生。

###PHPのパスの確認


```
$ which php
C:\tools\php80\php.EXE //これになっていたらOK

```
これが今回インストールしたPHPのパスになっているか確認して、なっていなければ環境変数を修正する。
そのうえで、composer installやphp artisan serveなどのコマンド実行時のエラーログで表示される解決法を実施する。

たしかphp.iniをいじらないと行けない。
実はこれを過去にインストールしたディレクトリのをいじっていたけど意味が無い。新しいtoos/phpの方をいじる！

おそらく下の３つのコメントアウトを外せばOK

```
// 行頭の;を削除すればコメントアウトが外せます
extension=mbstring
extension=openssl
extension=fileinfo
```


###環境変数が編集できない場合
```:PowerShell（管理者）で、下記を実行する
Start C:\Windows\system32\rundll32.exe sysdm.cpl, EditEnvironmentVariables
```
これで環境変数が編集できる状態になります。

###php.iniの上書き保存ができない場合
なにかのプロセスが掴んでいて保存できない状況になっていたので、パソコンを再起動したら編集できるようになります。

権限とかいろいろ書いてあったりしましたが、結局再起動したら解決しました。。。
Vuetifyのプレミアムテーマを買ってみた！

# 経緯

Vuetifyで簡単にデザイン作ろうかなと思って、
テーマの導入してみるかと考えました。
そのときプレミアムテーマって何ぞやと思い、
ググっても買ってるひとが見当たらなかったので執筆することにしました。

# テーマを買ってみる

![theme.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489160/5c6ef6e2-5949-c161-7978-005a8c3d3550.jpeg)

テーマはこんな感じでvuetifyストアで確認できます。

![selected_theme.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489160/fbd11313-51ef-1ebb-9a5c-6be93274bedd.jpeg)

セールもしてて1000円くらい？で買えるテーマがあったのでこれを買ってみます。

![order.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489160/4ff83c43-feae-8d15-90c2-83871b48cc1d.jpeg)

amazon payや、paypal、gpayで支払いできるんですね。
shoppayというのは初めて見ました。

![ordered.png.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489160/b897ca36-5710-19a5-2f8d-7352ec5fa04a.jpeg)

無事に購入。

# どうやって使うのか

肝心の部分、ここが一番気になって購入しようと思いました。
メールでダウンロード先のリンクが届きます。

![download.png.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489160/3cfeae9c-74a3-698b-9b19-41c26606c347.jpeg)

てっきりコマンドでvuetifyのなんかでゴチャゴチャするのかと思ってました。
ダウンロード後に展開してみます。

![gland floor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489160/0f0a2dba-1ecc-2dd6-f50a-cc2b3ff3324a.png)

![project floor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489160/6a20f893-6461-06dd-c9ea-0c4adffdbae1.png)

プロジェクトルートはこんな感じ。

普通にデモで触れるようなプロジェクトのソースをダウンロードできるという感じですね。
これをベースに好きにカスタマイズして利用してねということなのでしょう。
Vuetifyの初期セットみたいなのをテーマごとに変更できるのかと思っていたので、少々がっかりではあります。

# まとめ

デモで触れるプロジェクトをそのままダウンロードできるというのが結論です。
中身は流石に商品として売り出しているソースなだけあってしっかりしていました。
npm, yarn, vercelなどでセットアップが可能です。
vercelなんかは今回初めて触ったので貴重な経験にはなりました。
折角買ったので今後vuetifyでデザイン作るときにこのソースを参照しながら
自分のプロジェクトに落とし込んでいきたいと思います。

最後までお付き合いくださりありがとうございました。
テーブルのborder-collapse: collapse;が反映されない時の対処法（position: sticky;使用時）

#テーブルの一部を固定し、スクロールバーを出す
CSSのみでの実装をしました。
実装にあたり下記サイトを参考にさせていただきました。
https://since-inc.jp/blog/8675
https://www.rectus.co.jp/archives/2371

#border-collapse: collapse;が反映されない

テーブルの一部を固定しスクロールバーを出したところ、枠線が二重になり`border-collapse: collapse;`が反映されていないように見えました。
間違いなく書いているはずなのにおかしい...

#解決方法
原因は、自ら実装した`reset.css`の`box-sizing: inherit;（親要素のborder-boxの値を引き継ぐ）`でした。（知らないうちに親要素に`box-sizing: border-box;`が含まれていたんだと思います。）

```scss:app/stylesheets/application.css
.fixed{
      &:before{
            content: "";
            position: absolute;
            top: -1px;
            left: -1px;
            width: 100%;
            height: 100%;
            border: 1px solid #333;
            box-sizing: content-box; #ここを追記
       }     
}
```
paddingとborderを幅と高さに含めない`box-sizing: content-box;`を記述することで枠線が１本になり、思い通りのデザインにすることができました！！
【応用情報】午後10サービスマネジメントまとめ

#スケールアップ
バージョンアップ

cf:スケールアウト
数を増やす


#需要管理
予め定めた間隔で、サービスに対する現在の需要を決定し、将来の需要を予測する。また、監視し、報告する。

# インシデント
サービスに対する計画外の中断やサービス品質の低下、顧客へのサービスにまだ影響していない事象を指す。


#管理の流れ

###➀インシデント管理
インシデント管理では、インシデントの原因追及ではなく、サービスの回復に主眼を置く。
→別の入力操作を伝えるなどのワークアラウンド（回避策）を伝える。


###②問題管理
問題を特定するためにインシデントを分析。
RFC（Request for Change）を作って、何らかの変更を行うように管理者や作業者に要求する。

★自分では変更しない。

###（➂構成管理DB）
ITサービスを提供する上で必要不可欠な資産と、その構成を一元管理する事。
構成情報を最新に維持する。

###④変更管理
費用やリソース、他システムへの影響度や優先度をもとに変更可否を判断する。
重要なＲＦＣはＣＡＢに持っていき、決定。
★変更管理では、変更するかどうかの判断をするだけで、実際に変更するのはリリース管理。

###⑤リリース及ぶ展開管理
新規サービスやサービス変更などの計画、実行。


ITサービスに対して行われる変更作業のプロセスのことで、ITサービス全体に影響を及ぼす変更について、インシデント発生時の発生個所の特定、ダウンタイムの最小化、変更対象とはならないシステムの特定

<img src="https://smart-stage.jp/assets/image/topics/p9.png">

#サービスデスク
インシデントの連絡の受付，対応及び解決に向けた活動

#エスカレーション
業務部がインシデントの連絡を受け付けた際に，業務部内で解決できない場合は，正確な調査や対応ができる他部署や外部に解決を依頼

+ 階層的エスカレーション
    + より上級レベルのマネジメントに情報を提供したり、彼らを関与させたりすること
+ 機能的エスカレーション
    + より高度な専門知識を持つチームにインシデントや問題を転送すること

機能的エスカレーションは、より緊急度や重要度が高い時に行う。

#CMIS（Capacity Management Information System）
**キャパシティ管理**を支援する一連のツール、データおよび情報を含む情報システムのことです

#KEDB（Known Error DataBase）
**既知のエラー**（根本原因と回避策が分かっている問題）が登録されているデータベースです

#SACM（Service Asset and Configuration Management）
サービス資産管理および構成管理のことで、**サービス提供のために必要な資産**を適切にコントロールし、資産に関する正確な情報が必要なときに利用できるように管理することを言います

#既知のエラー
→インシデント及びサービス要求管理として扱う。
Excelの「テーブルの操作」アクション

# はじめに
「Excelの高度な操作」に「テーブルをフィルター」があります。
これを初めて使ってみました。

# Excelに「テーブル」ってのがあるんだ！！
Automation 360の「テーブルをフィルター」アクションを使ってみて初めて知ったのですが、Excelには「テーブル」という定義があるのですね。
Excelのワークシートの指定範囲を「テーブル」として定義して名前（テーブル名）をつける。
![excel_table01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/b3526574-ce07-edac-93d4-2a858f3a9a38.png)
Excelをもう何年も使っているのに、初めて知りました（汗）。

#  テーブルをフィルター
とりあえず、「テーブルをフィルター」アクションを使ってみます。
こんな感じ。

![excel_table02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/6c139fd0-0760-0149-ed18-e874f0a018e8.png)

Excelのテーブル名を指定するところがわかれば、あとは簡単。
私は最初、「Excelのテーブル名」と「Automation360のデータテーブル」を混同していました。
AA社のWebページにも「テーブル名はデータ テーブル名ではありません」って書いてあります。
https://docs.automationanywhere.com/jp-JP/bundle/enterprise-v2019/page/enterprise-cloud/topics/aae-client/bot-creator/commands/cloud-using-filter-table.html

# 「Excelの高度な操作」の分類
これもAA社のWebページに書いてありますが、「Excelの高度な操作」はいくつかのグループに分類されます。

- セル操作
- 行と列の操作
- テーブルの操作
- ワークブックの操作
- ワークシート操作

「Excelの高度な操作」の下はアクション数が多くて探すのが大変だから、この分類でサブグループを作って分けてくれればよかったのに。

# おまけ
今回「Excelの高度な操作」を使ってみて、気づいた小ネタ。

- 「テーブルをフィルター」の列名指定は、「Excel：開く」で「シートにヘッダーを含む」をチェックしてもしなくても使える。列の位置指定は１から始まる。
- 「複数のセルを取得」で読み込んだテーブルデータで「名前別」参照するときは、「Excel：開く」で「シートにヘッダーを含む」をチェックしておかないと使えない。インデクスは０から始まる。
- 「複数のセルを取得」で読み込んだテーブルデータで「インデックス別」参照するときは、Excel：開く」で「シートにヘッダーを含む」をチェックしてもしなくても使える。

あたりまえですが、「Excelのテーブル名」と「Automation360のデータテーブル」を混同しないでね、って話。

Excelのシートやブックは知っていたけど、Excelのテーブルを知らなかった人（私です）、テーブルを定義して「テーブルの操作」アクションを使ってみましょう。
ネットワークについて

#ネットワークについて調べてみた！
今の案件先が、機密情報を取り扱いしている関係で、PCにインターネットがつながっておりません。
そこで、すごく不便な思いをしているのですが、検証などはIEでも実行可能だったことから、インターネットとは？ネットワークとは？と疑問が湧いたため、調べたことをアウトプットしていきます。

##ネットワークとは
ネットワークとは、簡単に言えば縄のようなもので、それぞれの機器を繋いでるものです。

ネットワークは、メールやSNS、通話など様々な場面で活用されています！

###ネットワークの種類
大きく分けて、３種類あります。

1つ目が、**LAN**です。
Local Area Networkの略で、小さい区域でのネットワークです。イメージとしては、ご自宅内だけ、社内だけのネットワークなどを指します。

2つ目は、**WAN**です。
Wide Area Networkの略で、1つ目のLANより大きい区域でのネットワークです。LANとLANを繋ぐようなイメージでしょうか。

3つ目は、**インターネット**です。
これは聞き馴染みのあるワードかと思いますが、世界中を繋ぐものです。
##通信方法
ネットワークによる通信方法で、理解すべき通信モデルが2つあります。
###TCP/IP
**「Transmission Control Protocol」**と**「Internet Protocol」**を組み合わせたものである。
これは、プロトコルといって「HTTP」など通信規約を定めているものです。
ネットワーク越しに何かを送りたいときに使うものだと覚えてください！

流れとしては、ざっくり言うと以下の通りです。
①PC→②LANケーブル（WIFIの場合なし）→③ハブ（なくてもOK）→④ルーター→⑤インターネット→⑥ルーター→⑦ファイアウォール→⑧サーバー

この階層を①⇨⑧、⑧→①へと順繰りしてます！
###IOS７階層参照モデル
これはネットワークを7つの階層に分類したものです。早速、7つの階層について定義していきます。
レイヤー①：**物理階層**（LANケーブルや電波のこと。周波数やコネクト形状が違えば、全く交わらない。）
レイヤー②：**データリンク層**（MCAアドレスなどにしたがって次の経由地にデータを届ける。）
レイヤー③：**ネットワーク層**（届け先のIPアドレスより、ネットワークでデータを届けるか決定する。）
レイヤー④：**トランスポート層**（TCPやUDPなどでデータを運ぶ。）
レイヤー⑤：**セッション層**（通信を開始する、通信を終了するということを規定する。挨拶のようなイメージ。）
レイヤー⑥：**プレゼンテーション層**（適切な形式に変換したり、文字エンコードしたりと、表現形式を規定する。）
レイヤー⑦：**アプリケーション層**（アプリケーション間のやり取り。）

##まとめ
TCP/IP通信を主に使っていて、IOS７階層参照モデルが通信できている大枠を作ってるってこと。
CPPRESTメモ

クラウドに定周期で情報伝達を行うシステムに関わった。
その際、RESTやら認証やらいろいろあったので、作成期間もないことからCPPRESTを
使用することとした。

``` sample.cpp(VC2017)
......................................................
#include <cpprest/http_client.h>
#include <cpprest/json.h>
......................................................
using namespace web;
using namespace web::http;
using namespace web::http::client;
using namespace web::json;
```

起動停止ボタンでスレッドを起動してその中で送信を実施

```
UINT  MyThread(LPVOID p)
{
......................................................
     while (ptr->Thread_flag == TRUE)
	try {
		auto task = oauth(ptr->A, ptr->B, ptr->C);
        }
     }
```

上記のスレッドからタスクとして起動される。

```
pplx::task <bool> oauth(double A, int B, std::string C)
{
	return pplx::create_task([A, B, C]()
	{

		json::value postData;

		postData[L"ID"] = json::value::value(B);
		postData[L"controlPoint"][L"NAME1"] = json::value::string(U("SETPOINT"));
		postData[L"controlPoint"][L"value"] = json::value::number(A);
		postData[L"controlPoint"][L"unit"] = json::value::string(U("M"));


		// proxyあり
		//auto config = http_client_config();
		//config.set_validate_certificates(false);
		//config.set_timeout(std::chrono::seconds(time));
		//config.set_proxy(web_proxy(utility::conversions::to_string_t("http://XXX.XXX.XXX.XXX:YYY")));

		//credentials cred(utility::conversions::to_string_t("VVVVV"),utility::conversions::to_string_t("ZZZZ"));
		// Set credentials
		//config.set_credentials(cred);
		http_client client(L"https://ABC.com/INPUT", config);

		http_request request(methods::POST);
		request.headers().add(L"Content-Type", L"application/json");
		//std::string Bear = "Bearer ";
		//std::string Msg = Bear + C;
		//request.headers().add(L"Authorization", Msg.c_str());
		std::string Basic = "Basic " + C;
		request.headers().add(L"Authorization", Basic.c_str());
		request.set_body(postData.serialize());

		return client.request(request);
	}).then([](http_response response)
	{
		if (response.status_code() == status_codes::OK)
		{
			//auto body = response.extract_string();
			//std::wcout << body.get().c_str() << std::endl;
			//std::cout << response.extract_json() << std::endl;
			//return pplx::task_from_result(json::value());
			return response.extract_json(true);
		}
		else
		{
			// return an empty JSON value
			return pplx::task_from_result(json::value());
		}

	}).then([](json::value json)
	{
		// リザルトコードを返す
		bool res = FALSE;
//		try {
			res = json[L"returnResult"].as_bool();
/*		}
		catch (http_exception const & e)
		{
			res = FALSE;
		}
		catch (const std::exception& e)
		{
			res = FALSE;
		}
		*/
		return res;

	});
}
```
さくらエディタ　部分置換 「,」もしくは「.」で改行する


##部分置換 で「,」もしくは「.」で改行する
```:Goole_Public_DNS(置換前)
The Domain Name System (DNS) protocol is an important part of the web's infrastructure, serving as the Internet's phone book: every time you visit a website, your computer performs a DNS lookup. Complex pages often require multiple DNS lookups before they start loading, so your computer may be performing hundreds of lookups a day.
```
```:Goole_Public_DNS(置換後)
Why does DNS matter?
The Domain Name System (DNS) protocol is an important part of the web's infrastructure,
serving as the Internet's phone book: every time you visit a website,
your computer performs a DNS lookup.
Complex pages often require multiple DNS lookups before they start loading,
so your computer may be performing hundreds of lookups a day.


```

https://developers.google.com/speed/public-dns

##正規表現
```:置換前
([\,\.])
```
```:置換後
$1\r\n
```

##解説
・「()」と「$1」が対応する→部分置換
・「[\,\\.]」は「「,」または「.」」を意味する。
・「,」や「.」はメタ文字なので「\」でエスケープする。
・「\r\n」は改行
【雑談】今まで「SIer」を名乗らなかった企業が、勝手に「SIer」を名乗り出していて混乱が起きている


従来、SIerと言えば、
**【基幹システム、データベースなどのソフトウエア資産を前提にして、要件定義やシステム開発を行なっている会社】**
とざっくりした定義があったと思うが、最近では以下のようなジャンルまでSIerを名乗っている。

- ロボットシステムインテグレータ
- 組込みインテグレータ
- 画像処理システムインテグレータ
- IoTインテグレータ

正直、**私は困る。**
いろんな定義が氾濫されると、ユーザ企業と受託企業で用語の誤植や認識の違いが起きて、開発業務に支障が出るからだ。

### それはアウトソーシングじゃないのか

今の会社は**画像処理システムインテグレータ**を自称しているのだが、
とんでもない詐欺である。

彼らの仕事は次の通りなのだ。

- 照明、カメラの組み立て
- 工場用の配線盤の組み立て
- 既存ソフトウエアの組み立て

いや、組み立てなのだ。組み立てだからインテグレーションしてるから、彼らにとってそれはインテグレータなのだ、とのことらしい。

それはどう考えてもおかしい。
脳死の組み立て業務をやって、クライアントが喜ばないケースを何度も見てきた。

せいぜい、開発試作のアウトソーシングビジネスをやっている、と改めるべきではなかろうか。

### 「受託開発」で良いじゃねえか

日本語には、受託開発と言う素晴らしい単語がある。
「受託開発」とすれば、上記の単語の曖昧さを避けて、ユーザ企業と受託企業両者において、どう言う対応をすべきかが明確になる。

- ロボット制御の受託開発
- 組込みファームウエアの受託開発
- OCRパターン認識用　画像処理アルゴリズムの受託開発
- IoTサーバシステムの受託開発

「受託開発」と言う単語は、ユーザにとってあまり意味を持たないと思うので、強調するべきポイントじゃないんだ。

それより「〜の受託開発」の「〜」をどう練り込むか、
それがあなたの会社や部門の**Value（価値）**になるのだから、
それをどんどん売り込むべきでしょう。

### 「受託開発」だと、あなたの会社と契約すると言うことを連想しやすい！

受託開発の契約内容には注意が必要。日本の法律では委託契約には

- **請負委託** ・・・　成果物が出来上がったら報酬を提供する
- **準委任契約** ・・・　成果物が出来上がってなくても、スケジュールに対しての進捗を見て報酬を提供する

の2つのルールがあるので、契約の話を持ち出すときは、この単語を使おう。

- 私たちはSIerで、「準委任契約」で仕事を請負ます。と言われるよりも、
- 私たちは〜のサービスの受託開発を行なっていて、「準委任契約」で仕事を請負ます。


と言う方が、**「後ろに契約があること」**を伝えやすいと思う。


### 不用意にSIerを名乗らないで

SIerと名乗ることで、
**ロボット開発、組込み開発、新機能の画像処理開発、作業自動化の推進**
といった本当は売りにしたいポイントがぼやけてしまうのは本当にもったいない

少なくとも私はSIerと伝えられたら、
**データベースやサーバインフラなどを、暗黙の了解で、しっかり整えた成果物**
を想像してしまうし、もし「それはできないんです〜」なんて伝えられた日には
**ああ・・・この会社、開発力がとても低いんやろなぁ**
と私は思ってしまう。

新しいことを見つけて何かするのを目指すユーザにとっては、
2つ以上の物事に注目して話をするのはとても難しいことなのだ。

かっこいい単語、曖昧な単語に騙されず、
**「あなたの会社はどんなことが得意なのか」**
をしっかり伝えて欲しい。
そうすれば、**ユーザ企業はあなたの価値を理解して、仕事を提供しようか誠意に考えてくれるはずだ。**
Salesforceで分からないことがあったら気軽に聞いてみよう！～Salesforceの質問方法～

こんにちは！
みなさんSalesforceを扱って困ったこととか気になることとかはありませんか？
もちろん、そんなときはSalesforceのサポートに問い合わせもできますが

「良い感じのレポート作成方法」
「他のユーザはSalesforceのこの機能をどう使ってるんだろう？」
「運用面で困っていること」

など、Salesforceの業務では日々ふわっとした様々な悩みがあるかと思います。

そんな時、Salesforceで気になることや悩んでることを質問できるサイト「TrailblazerComunity」があります！

今回は「TrailblazerComunity」についてご紹介します。

※TrailblazerComunityの公式的な説明はこちらのURLをごらんください
https://www.salesforce.com/jp/blog/2017/11/say-hello-to-the-trailblazer-community.html


###まずはログインしてみよう
この記事を読んでいるあなたはきっと何かしらSalesforceについてのお悩みがあるはずです。
まずは下記URLをクリックしTrailheadにログインしましょう
https://trailhead.salesforce.com/ja

###投稿してみよう

質問するボタンをクリックし投稿してみましょう
まずは「コミュニティ」タブから「フィード」をクリックします
![コミュニティ２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/452658ca-3118-16b7-788a-17127b274cfa.png)


次に「質問」タブをクリックし「質問する...」をクリックします
![コミュニティ質問３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/846f6141-95cf-7999-188f-ba1fb49de35a.png)


あとは下記画像のように右下部分を「？質問」に設定し質問を記載し投稿すれば完了です。
![質問内容についｔ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/c38535b5-e90a-1ae8-90a4-26dddbc05181.png)


では、ここで投稿する際に気を付けることを私なりに下記にまとめました！

###1.質問する際は「@* 質問広場～初心者から上級者まで～ 日本 *」にメンションをつけて投稿しよう

「@* 質問広場～初心者から上級者まで～ 日本 *」にメンションをつけて投稿したら、日本グループのメンバーが質問に気が付きやすくなります。


###2.質問する際は「@* 質問広場～初心者から上級者まで～ 日本 *」に投稿されている内容をよく見てみよう
下記をクリックすれば「@* 質問広場～初心者から上級者まで～ 日本 *」に遷移します。
こちらから過去に皆さんがどのような質問をどんな感じで投稿したか分かるかと思います。
https://trailhead.salesforce.com/ja/trailblazer-community/groups/0F93A000000Pd80SAC?tab=discussion


###3.なるべく画面のスクリーンショットやエラー内容を共有しよう
文章だけでなくそのSalesforceの画面をスクショし投稿に貼ると理解が早まります。
またエラーメッセーにもスクショやコピペなどでなるべく投稿の中に記載があれば、答えやすくなるかと思います



いかがでしたでしょうか。
ぜひ皆さんもSalesforceで困ったことがあれば投稿してみましょう！
【Ruby on Rails】Missing :controller key on routes definition, please check your routes. (ArgumentError)というエラーを解決した話


#結論

* routes.rbを書き直す


#現状

rails sを実行すると見たことないエラーが

![スクリーンショット 2021-08-17 16.23.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681213/203ddfc6-cf54-2c03-3984-0c71cb6f0cd8.png)


#解決策

###1.原因

訳すと
「routesのコントローラーキーが見つからないから、routes見てくれ」という感じ。


###2.対策

素直にroutes.rbを見てみたら確かにコントローラーキーがおかしかった

```routes.rb
get "articles/new" => "articles#new"
````

と変更すればOK!

####投稿者コメント
見たことないエラーだったので記事にまとめてみました。
ちゃんとエラー文を読むこと大事ですね！


####My Profile
プログラミング学習歴３ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。
Swift　二分探索

二分探索とは
---
ソート済みの配列から特定の値を探し出す時に二分割しながら探しだすアルゴリズムのこと。
メリットは
データの量が増えても、大きく探す時間が変わらない。
探しているデータがどれでも、見つかるまでの時間が同じくらい等

探したい要素のインデックスを取ってくる場合

```swift:おかし.swift
//①index(of:)で探す
let okashiArray:[String] = [🍭, 🍰, 🍦, 🍫, 🍬]
okashiArray.index(of:"🍫")//３

//②　for文で回す
 func linearSearch<T: Equatable>(_ array: [T], _ key: T) -> Int? {
    for i in 0 ..< array.count {
        if array[i] == key {
            return i
        }
    }
    return nil
}
linerSearch(okashiArray,"🍫") //3

//③　二分探索（バイナリツリー）
func binarySearch<T: Comparable>(_ array: [T], key: T, range: Range<Int>) -> Int? {
    if range.lowerBound >= range.upperBound {
        return nil
      //中身がないのでnilを返す
    } else {
        // 真ん中のインデックス番号を取ってくる  
       //upperBound →　範囲の最大を取ってくる 例　  print((0..<3).upperBound)→３（注意　２じゃない）
      //lowerBound→　範囲の最小を取ってくる　　　　　例　  print((0..<3).lowerBound)→0
        let midIndex = range.lowerBound + (range.upperBound - range.lowerBound) / 2

        // 左側の方に値があるかどうか（小さいかどうか）
        if array[midIndex] > key {
　　　　　　　　　　　　　　　　//存在したら左側の配列を入れ直して再帰処理をする
            return binarySearch(a, key: key, range: range.lowerBound ..< midIndex)

        // 右側の方に値があるかどうか（大きいかどうか）
        } else if array[midIndex] < key {
       ////存在したら右側の配列を入れ直して再帰処理をする
            return binarySearch(a, key: key, range: midIndex + 1 ..< range.upperBound)

        // どっちも当てはまらなければ真ん中にあるということなのでreturnする
        } else {
            return midIndex
        }
    }
}

//補足 
//Comparable→オブジェクトのもつプロパティで比較できるようにしてくれるプロトコル　Equatableであることが前提
//Equatable→　オブジェクト同士が等しいかどうかを調べる事ができるようにしてくれるプロトコル

binarySearch(okashiArray, key: "🍫", range: 0 ..< okashiArray.count)//3

```
【応用情報】午後問２経営戦略頻出項目まとめ

#SWOT分析
自社を分析評価する手法。
S＝強み
W=弱み
O＝機会
T＝脅威

強みと弱みは内部要因（組織、人材、業務プロセスなど）、機会と脅威は外部要因（経済状況、競合他社など）。


#CST分析(Critical Success Factors:主成功要因)
ビジネスにおける競争優位を確立するための重要成功要因を明らかにする手法。
CSFの抽出・創出には、SWOT分析をしておくとGOOD。


#ベンチマーキング
製品やサービスを定性的・定量的に測定し、それを最強の競合相手又は先進企業の中で最高水準の業績を上げているベスト企業と比較してギャップを把握すること。

#LTV：Life Time Value
顧客生涯価値。
1人の顧客が生涯わたって企業にもたらす価値。

#PEST分析
企業を取り巻くマクロな外部環境を分析する手法。
P=政治
E=経済
S=社会
T=技術

#ファイブフォース分析
５つの要因「新規参入の脅威、代替品の脅威、売り手の交渉力、買い手の交渉力、競争業者間の敵対関係」から企業を取り巻く競争環境を分析する手法。
<img src="https://i0.wp.com/www.is-assoc.co.jp/brandinglab/wp/wp-content/uploads/2018/02/fiveforce_image.jpg?w=600&ssl=1">


#コストリーダシップ戦略
他者を圧倒するコストダウンにより競争優位を測る。

#PPM:プロダクトポートフォリオマネジメント
市場成長率と市場占有率をもとに、自社の事業や製品を評価し、経営資源配分の優先順位とそのバランスを決定。
<img src="https://www.profuture.co.jp/mk/wp-content/uploads/2019/04/1.png">
★「金のなる木」で得た資金を投じるべきなのは、「問題児と花形」。

#プロダクトライフサイクル戦略：PLC
<img src="https://chikenrokuglobis.s3-ap-northeast-1.amazonaws.com/uploads/images/9004/content_____1.JPG">
導入=問題児
成長=花形
成熟=金のなる木
衰退=負け犬

#カニバリゼーション
自社製品間の競合よって売り上げを奪い合う。

#プル戦略
広告で直接消費者に働きかける。

#パイラルマーケティング
口コミ効果で広げること。

#売上総利益
売上高-原価

#安全余裕率(%)
安全余裕率とは、損益分岐点に対して、現在の売上高がどのくらいの比率で上回っている（下回っている）かを示す指標です。この数値が高いほど、企業の経営状態に余裕があると判断することができます。

＝(売上高－損益分岐点売上高)÷売上高×100

#損益分岐点
営業利益がゼロの点の事。
この時の売上高を損益分岐点売上高と呼ぶ。
損益分岐点は、固定費と変動費の和に等しい。

<b>損益分岐点＝固定費/1-変動費率</b>
※変動費率＝変動費/売上高

#限界利益
すべての固定費を回収できる地点を示す管理会計上の指標です。
**売上ー変動費**

限界利益率＝限界利益÷売上高


#★資本利益率
企業の収益性を把握するために用いられる指標。
その資本がどれだけの利益を生んだか

<b>資本利益率
＝利益/資本
＝（利益/売上高）×（売上高/資本）
＝売上高利益率×資本回転率</b>

#★自己資本利益率(ROE)
自己資本に対する当期純利益の割合を表したもの。
投下資本緒投資効果を把握するために用いられる指標。
値が大きいほど、株主にとっては投資効果が高く、魅力的。

<b>ROE(%)=(当期純利益/自己資本)×100</b>

#投資利益率（ROI）
個々の投資額に対する利益の割合
プロジェクト単位の収益性（投資対効果）の評価にも利用。

<b>ROI(%)=(利益/投資額)×100</b>

#自己資本比率
安全性指標。経営の安全性のために用いる指標。

<b>自己資本比率(%)=(自己資本/総資本)×100</b>

#キャッシュフロー
<img src="https://advisors-freee.jp/article/wp-content/uploads/2019/11/424-1.png">

➀営業活動によるキャッシュフロー
②投資活動によるキャッシュフロー
➂財務活動によるキャッシュフロー

現金主義。現金の出入りに基づいて損益計算を行う方式。
ex)売上が入金された時点で売上に計上する

#損益計算書
<img src="https://www.canon-sas.co.jp/solution/tips/business/images/img_pl01.png">

発生主義。現金の出入り収支にかかわらず、売上や費用が確定した時点で収益・費用とする方式
何かのアクションがあった時点で計上する。

#貸借対照表
<img src="https://info.isi-grp.co.jp/hs-fs/hubfs/Blog/GRANDIT/4191192476/bs.png?width=1320&name=bs.png">
資産＝未来に戻ってくるもの
負債＝お金として出ていくもの

#流動比率
流動資産÷流動負債×100

###固定比率
固定資産÷自己資本×100

#総資本回転率
売上高÷そう資本

#ROA（Asset）
利益÷総資産

#フリーキャッシュフロー
フリーキャッシュフローとは、**"営業活動によるキャッシュフロー"から"投資活動によるキャッシュフロー"を差し引いたもの**で、事業活動によって生み出されたキャッシュを表しています。

これがプラスであれば、営業状態は良好であると判断できますので、設備投資を行うときでもマイナスにならないようにコントロールする必要があります。


#キャッシュフロー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1651134/3c69dfd5-e518-c39b-8930-c9ac1dcc5a02.png)
連想配列について

# PHP初心者

こんにちは！
Ruby on Railsによるオリジナルアプリケーションが落ち着いたので
他の言語を学びたいなあと思いPHPを勉強中です。
まだまだPHP初心者なので、メモ用として
投稿してみました。

# PHPの配列の記述法

```php
$shaman = ["五条悟", "七海健人", "歌姫"];
```

基本的にRubyの配列記述法とあんまり変わらないですね。
異なるのはPHPにはもう一つ記述法があるみたいです。

```PHP
$shaman = array("五条悟", "七海健人", "歌姫");
```
こちらはPHPのバージョン4.5以前で使われる記述の仕方みたい。
一つ目の配列の書き方は比較的新しい書き方らしいんやが、
近年のWebサーバーではほとんど使えるから記述が短くなるなら
一つ目の書き方がいいですね。

Rubyの時と同じく配列には添字が0始まりで付与されているので
下記のように入力すると

```php
  $shaman = ["五条悟", "七海健人", "歌姫"];
  print($shaman[0]);
```

![スクリーンショット 2021-08-21 19.47.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/8ca71550-f762-add3-50d5-52b58f98ded6.png)

五条先生が表示されます。
うーん変数を使用する際に
$を余計に記述しなきゃいけないのは
まだ慣れへんなあ。
まあなんとかなるか。

# 連想配列

配列とは、一つの変数に複数のデータを格納しておくもの。
複数のデータにはそれぞれ左から順に添字が指定してあるんでしたね。
だからさっきもshamanの0を呼び出すと五条先生が出てきたんですね。
それに対して、連想配列は添字の代わりに名前をつけて保管することができる。
例えばこんな感じ

```php
  $strongest_shaman = ["name" => "五条悟", "age" => "28", "magic" => "無下限呪術"];
  print($strongest_shaman['magic']);
```

![スクリーンショット 2021-08-21 20.02.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/074e0d57-5d1c-89a8-bf7c-d1190f03ef99.png)

無下限呪術が帰ってきました.

```"name", "age", "magic"```の部分をそれぞれキー、
```"五条悟", "28", "無下限呪術"```を値と言うそうです。

Rubyでいうところのハッシュのキーバリューストアの関係と類似してますね。
おそらくRubyを勉強する前であればこれ理解しにくかったと思うんですが、
勉強しててよかったです。

てかRubyで配列もハッシュもつまずいたし。
Rubyのハッシュみたいに連想配列も略した記述法があるんかな？
調べてみます。
risc-v アセンブラ　命令セット

#概要

risc-vの命令セット、調べてみた。

#命令セット

|命令|意味|
|:--|:--|
|lui rd, imm|rd = imm << 12, pc++
|auipc rd, imm|rd = pc + (imm << 12), pc++
|jal rd, imm|rd = pc + 1, pc += imm
|jalr rd, rs1, imm|rd = pc + 1, pc = rs1 + imm
|beq rs1, rs2, pc + imm|if (rs1 == rs2) then pc += imm else pc++
|bne rs1, rs2, pc + imm|if (rs1 != rs2) then pc += imm else pc++
|blt rs1, rs2, pc + imm|if (rs1 < rs2) then pc += imm else pc++
|bge rs1, rs2, pc + imm|if (rs1 >= rs2) then pc += imm else pc++
|bltu rs1, rs2, pc + imm|if (rs1 < rs2) then pc += imm else pc++
|bgeu rs1, rs2, pc + imm|if (rs1 >= rs2) then pc += imm else pc++
|lb rd, offset(rs1)|rd = mem[rs1 + offset], pc++
|lh rd, offset(rs1)|rd = mem[rs1 + offset], pc++
|lw rd, offset(rs1)|rd = mem[rs1 + offset], pc++
|lbu rd, offset(rs1)|rd = mem[rs1 + offset], pc++
|lhu rd, offset(rs1)|rd = mem[rs1 + offset]
|sb rs2, offset(rs1)|mem[rs1 + offset] = rs2, pc++
|sh rs2, offset(rs1)|mem[rs1 + offset] = rs2, pc++
|sw rs2, offset(rs1)|mem[rs1 + offset] = rs2, pc++
|addi rd, rs1, imm|rd = rs1 + imm, pc++
|slti rd, rs1, imm|rd = (rs1 < imm) ? 1 : 0, pc++
|sltiu rd, rs1, imm|rd = (rs1 < imm) ? 1 : 0, pc++
|xori rd, rs1, imm|rd = rs1 ^ imm, pc++
|ori rd, rs1, imm|rd = rs1 ｜imm, pc++
|andi rd, rs1, imm|rd = rs1 & imm, pc++
|slli rd, rs1, imm|rd = rs1 << imm, pc++
|srli rd, rs1, imm|rd = rs1 >> imm, pc++
|srai rd, rs1, imm|rd = rs1 >>> imm, pc++
|add rd, rs1, rs2|rd = rs1 + rs2, pc++
|sub rd, rs1, rs2|rd = rs1 - rs2, pc++
|sll rd, rs1, rs2|rd = rs1 << rs2, pc++
|slt rd, rs1, rs2|rd = (rs1 < rs2) ? 1 : 0, pc++
|sltu rd, rs1, rs2|rd = (rs1 < rs2) ? 1 : 0, pc++
|xor rd, rs1, rs2|rd = rs1 ^ rs2, pc++
|srl rd, rs1, rs2|rd = rs1 >> rs2, pc++
|sra rd, rs1, rs2|rd = rs1 >>> rs2, pc++
|or rd, rs1, rs2|rd = rs1 ｜rs2, pc++
|and rd, rs1, rs2|rd = rs1 & rs2, pc++


以上。
クライアントとサーバーでタイムゾーンを合わせる3つの方法

## 目次

1. あらかじめユーザー設定で登録したものをデータベースから取得する
2. フォームで選択させて送信する
3. JavaScriptで取得して送信する

## あらかじめユーザー設定で登録したものをデータベースから取得する

ユーザー設定にタイムゾーンの設定を設け、ユーザーに紐付けて保存します。

    Carbon::parse($request->date, $user->timezone)

PHPの場合は以下の関数で取得します。

    timezone_identifiers_list(\DateTimeZone::ALL)

セレクトボックスを用意すると良いでしょう。

    @foreach (timezone_identifiers_list(\DateTimeZone::ALL) as $timezone)
        <option value="{{ $timezone }}">{{ $timezone }}</option>
    @endforeach

## フォームで選択させて送信する

日時を送信するフォームにタイムゾーンの入力項目を設け、送信したものを使います。

    Carbon::parse($request->date, $request->timezone)

ユーザー設定と同様にセレクトボックスを用意すると良いでしょう。

## JavaScriptで取得して送信する

モダンブラウザではタイムゾーンを取得できるようになっています。hiddenに埋め込むなり、axiosやfetchに渡すなりして送信しましょう。

    Intl.DateTimeFormat().resolvedOptions().timeZone

IEには対応していません。
STM32G031と温度,S-5851でOLED温度計 (Arduino)(OLED096UNO-A)


x がんばつて　OLEDをリマップした。PA11-CLK,PA12-IO

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり

SSD1306 128x64

★0.96インチ★OLEDモジュール★I2C★ [OLED096UNO-A]


https://www.aitendo.com/product/18634



![h_con18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/0f42c670-435f-e785-4100-b25e20d7713b.jpeg)


データシートを確認して(リセットは、つながっていない)


![h_con17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/398cd8c2-7279-2c36-bcc1-a3e79b1c31cb.jpeg)




```c++


#include <Arduino.h>
#include <U8x8lib.h>
#include <Wire.h> //I2C library

//OLEDの定義
U8X8_SSD1306_128X64_NONAME_HW_I2C u8x8(/* reset=*/ U8X8_PIN_NONE);        

//i2c温度センサーのアドレス
#define S5851A 0x48

int     tempval;      //温度
int     n0;           //温度　小数点以上
int     cursor1;      //カーソルの位置
char    data_read[8]; //i2cバッファー

void i2c_oled_w(char *s)
{
  //文字の表示
  u8x8.drawString(
  ((cursor1-0) & 0x07  )*2, // x
  (cursor1>>3)*2,           // y
  s);

  while(s[0] != 0) {
    s++;
    cursor1++;
  }

  //cursor1=cursor1 + 3; 
} //i2c_oled_w

void setup(void)
{
  //I2Cの初期化
  Wire.begin(PA12,PA11); //stm32g031

  //OLEDの初期化
  u8x8.begin();

  //フォントの設定
  u8x8.setFont(u8x8_font_px437wyse700a_2x2_r);

  //スタートロゴ
  cursor1 = 0;
  i2c_oled_w("START");
  delay(500);

  //画面の初期化
  u8x8.drawString( 0,0,"        ");
  u8x8.drawString( 0,2,"        ");
  cursor1 = 0;

}//setup

void loop(void)
{
  //カーソルのクリア
  cursor1 = 0;

  //0番目のレジスター
  Wire.beginTransmission(S5851A);
  Wire.write(0);
  Wire.endTransmission();
  delay(1);

  //温度の読み込み
  tempval = 99;
  Wire.requestFrom(S5851A, 1);
  while(Wire.available())  {    // 要求より短いデータが来る可能性あり
    tempval = (int)Wire.read(); // 1バイトを受信
  }//while
  delay(1);

  //温度をセット
  int n0 = tempval;

  //n0=20; //debug

  //画面に表示
  i2c_oled_w("TMP=");
  data_read[0] = '0' + n0/10;;
  data_read[1] = '0' + (  n0-(  (n0/10)  *10)  );
  data_read[2] = '.';
  data_read[3] = '0' + 0;
  data_read[4] = 0; 
  i2c_oled_w(data_read);  
 
  //1秒待つ
  delay(1000);

}//loop



```
Qiita Daily Survey memo 2021.08.22

# Qiita Daily Survey memo 2021.08.22
Qiita の記事を可能な限り毎日読むために、読んだmemoを公開することでモチベーションを維持しようという試み。
5ヶ月ぶりに徒然と

# [VSCode上で猫ちゃんを飼い始めました](https://qiita.com/yuuton8823/items/cf5c9d4614fa096efad1)
yuuton8823 さんの記事。
VSCode 上でペットが飼える…という記事でした。

>最近癒しが欲しくてVSCode上でペットを飼い始めました。

記事に倣って、私のVSCodeにもお越しいただきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410015/bc283eae-7da5-c595-bc48-343a4f001404.png)
kawaii.
CTRL + Shift + P から vscode-pets.throw-ball でボールを投げ入れることができます。
kawaii.

# [【動画付き・初心者向け】コメントにはWHYを書こう 〜不要なコメントと必要なコメントの違いについて〜](https://qiita.com/jnchito/items/f0d90af4ed44b7484103)
Junichi Ito (jnchito) さんの記事
動画をベースにコメントの書き方について書かれた記事です。
コメントを書く際には、なんでそのコメントにしたのかを書くとよいよ…という内容です。  

最近コードレビューの機会が多く、コードレビューの際に「なんでこう書いたんだろう…？」は本当によく発生します。
その際に記述の意図が併記してあると、確かにすんなり入ってきそうでよさそうだな…と思いました。
別の選択肢として、疑問が生まれるような記述や意図のある書き方については、設計書に譲るのも選択肢の一つかなと思いました。

設計書をがっつり起こさないコーディングの場合はコメントとして控えておいて、設計書を書く場合、設計書を後から起こす場合に転記し、すっきりさせる…というのがよさそうと感じました。

# [Google's Engineering Practices documentationを読んだメモ](https://qiita.com/zhang_yid/items/a7afb4098967e00f3981)
zhang_yid さんの記事。
他のプロジェクトでも恩恵があるかもなので、Google さんが培ってきた Engineering Practices を公開するよ、という記事を読み、ポイントを書いてくださっている記事です。
とてもとても胸に刺さる要素が書かれているので、一読をお勧めします。
今の現場ではレビュアーにもレビューイにもなるので、どちらの立場からもこうするといいよが書かれていて、大変参考になりました。
レビュアー観点では、レスポンスを早くしないと、開発者のモチベーションが落ちてしまうというのが、その通りだなと思い気を付けようと思いました。
開発者視点では、簡単な動作確認のみで終わらせて、単体テストフェーズへ…という気持ちが大きかったですが、おっしゃる通り自分の書いたコードに責任を持つためにも、一緒にテストのコードをレビューに出すのはとても良いなと思いました…。
悪い継承はどんな継承か（未完成）

※ずっと下書きに入っててもったいないのでとりあえず公開

「継承ってあまりよくないよねー」と言ったような言説をここ数年で見かけるようになりました。
私も大体5年前くらいに継承という仕組みに対して失望しました。
とはいえ現状多くのプログラミングでは継承を多用しているはずで、継承＝悪というのは乱暴だとも言えます。
ではどういう継承が悪いのか、継承のどういうところが悪いのかという話になると思いますが、これをスッと答えられる人は多くないのではないでしょうか？

私も言語化しづらいなーと思っていたのですが、普通にググってたら書いてたいたし、なんなら大昔からそんな事言われていたようなので、ざっくり調べました。
参考程度にどうぞ。
細かい話はしません、私には荷が重い。

## 前提として押さえておきたい文脈

これはあくまで「自分たちで作ったクラスを継承する」みたいな文脈です。
SDKやLibraryなどで慎重に設計されたクラスを継承することに対して「良くない」という声は上がっていない認識です。
そもそもそれ無いとなんもできません。

私が得意なiOSだと例えばBaseViewControllerみたいなのが話題の対象です。

## オブジェクト指向のアンチパターン

サンキューWikipedia
[Wikipedia - アンチパターン オブジェクト指向のアンチパターン](
https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%B3%E3%83%81%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E8%A8%AD%E8%A8%88%E3%81%AE%E3%82%A2%E3%83%B3%E3%83%81%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3)

>貧血ドメインモデル（英語版）
>BaseBean（英語版）
>スーパークラスの呼び出し（英語版）
>円-楕円問題（英語版）
>循環依存（英語版）
>定数インターフェイス（英語版）
>神オブジェクト（英語版）
>オブジェクトのゴミ溜め（英語版）
>オブジェクトの乱交状態（英語版）
>シーケンスによる結合（英語版）
>ヨーヨー問題

全てが継承に関わっているわけでは有りません。
関係ありそうなものを以下にまとめます。

## ヨーヨー問題

[Wikipedia - ヨーヨー問題](https://ja.wikipedia.org/wiki/%E3%83%A8%E3%83%BC%E3%83%A8%E3%83%BC%E5%95%8F%E9%A1%8C)

>ソフトウェア開発におけるヨーヨー問題アンチパターンとは、プログラムを読んで内容を理解しようとしたときに、継承関係が深すぎる・複雑すぎるなどの理由で、たくさんのクラスを行ったり来たりしないと処理フローが追えない状況のことである。

補足・コメント
これめっちゃわかります。
私は特にライフサイクルが存在するプログラムにおいてこれを感じます。
処理のフローが、子のメソッド→親のメソッド→子のメソッドのようなフローを辿り、問題がどこでおきているのか追いづらくなると思います。

## 神クラスになってしまう

神クラス：設計の一部分（クラス）に、過剰に機能を集中させること
BaseBean：ユーティリティクラスに処理を委譲せず、継承して使ってしまうこと

ここらへん似た話だと思います。
神クラス、ゴッドクラス、あとはBlobって言葉も合ったと思います。
簡単に言えば１個のクラスに全機能を詰め込んでしまうことで起こる問題の総称です。

これがどう継承と関係しているのかといえば、ある種類のクラスの共通メソッドを作ろうとしたときに、親クラスを作り継承してしまうことがありますが、そこから神クラスができてしまうことがあるからです。
あるメソッド、処理を使いたい時は何でもかんでもそれを継承する羽目になりますから。

これは間違った継承の使い方ですね。

## ライフサイクルが混ざっているものの継承

これは私の経験則です。
例えばiOSだとUIViewController, AndroidだとActivityのように、ライフサイクルが混ざってるクラスにおいて継承すると処理の順番が非常に複雑になりますしコントロールしづらくなります。

## 以下、まとめきれてないやつのメモ

スーパークラスの呼び出し（英語版）
サブクラスがスーパークラスのオーバーライドされたメソッドを呼び出さなければならないような設計

シーケンスによる結合（英語版）
メソッドが特定の順序で呼び出される必要のあるクラス

リスコフの置換原則
https://ja.wikipedia.org/wiki/%E3%83%AA%E3%82%B9%E3%82%B3%E3%83%95%E3%81%AE%E7%BD%AE%E6%8F%9B%E5%8E%9F%E5%89%87

開放/閉鎖原則
https://ja.wikipedia.org/wiki/%E9%96%8B%E6%94%BE/%E9%96%89%E9%8E%96%E5%8E%9F%E5%89%87

依存性逆転の原則
https://ja.wikipedia.org/wiki/%E4%BE%9D%E5%AD%98%E6%80%A7%E9%80%86%E8%BB%A2%E3%81%AE%E5%8E%9F%E5%89%87

継承
https://ja.wikipedia.org/wiki/%E7%B6%99%E6%89%BF_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)
仮想継承にしていない場合に同一の基底クラスが複数存在してしまう（これが望ましい場面もあるが）。
これの何が問題かというと、最初は仮想継承していなかったものを、後から仮想継承にしたくなったときに、変更点を洗い出すのが大変になるからである。つまり仮想継承を使用するには設計をきちんと行う必要があるということである。
しかしながら多重継承を使う方が直感的になる場合もあるとの主張もあり、どちらが正しいとは言えない状況である。

## 解決策

限定多重継承
https://ja.wikipedia.org/wiki/Mixin

ここらへんもちゃんとまとめたいけど追いついていない（宿題）

### 雑感と教訓

業界全体が「完全に理解した」状態に陥って、実は全然理解できていないケースがあるので注意が必要。
Wikipediaに載ってるレベルの既知の事実を知らなかったりする。ヨーヨー問題とか、まさにそれじゃん！というのがいくらでもある。

我々がやってるのは理論ではなく工学なので、どうしてもある程度動くと理論を投げ出してしまうきらいがある。おかげで理論がまとまりきっていなく経験則や噂や意見しか見つからない。

こういうのがあるので、DDDやDIや関数型言語のような流行りにあまり乗り気になれない（言い訳）
学習コストってたぶん5年とか10年単位で掛かるんですよ。

（誰かまとめてくれないかなー）
SQLチートシート１

# SELECT(カラム、テーブル指定)
```sql
カラム指定取得
SELECT column, another_column, …
FROM mytable;

全カラム取得
SELECT * 
FROM mytable;

重複なし
SELECT DISTINCT column, another_column, …
FROM mytable

カラム定義(二倍)
SELECT column_name / 2.0 AS new_column_name
FROM mytable

関数使用
SELECT AGG_FUNC(column_or_expression) AS new_name, …
FROM mytable
```
AGG_FUNCの例
COUNT(column)
MIN(column)
MAX(column)
AVG(column)
SUM(column)
# WHERE(抽出条件)

```sql
SELECT column, another_column, …
FROM mytable
WHERE condition
    AND/OR another_condition
    AND/OR …;
```
conditionの例

```sql
col_name != 4 (比較演算子)
col_name BETWEEN 1.5 AND 10.5
col_name NOT BETWEEN 1 AND 10
col_name IN (2, 4, 6)
col_name NOT IN (1, 3, 5)
col_name LIKE "ABC"
col_name NOT LIKE "ABCD"

col_name LIKE "%AT%"
(matches "AT", "ATTIC", "CAT" or even "BATS")

col_name LIKE "AN_"
(matches "AND", but not "AN")

column IS/IS NOT NULL
```

# ORDER BY(並び替え)

```sql
ORDER BY column ASC; (昇順)
ORDER BY column DESC; (降順)
```

# LIMIT OFFSET(レコード数制限)

```sql
LIMIT num_limit OFFSET num_offset;
```

# JOIN(テーブルを共通カラムで繋げる)

```sql
INNER/LEFT/RIGHT/FULL JOIN another_table 
    ON mytable.id = another_table.id
```

# GROUP BY(複数のレコードを同じカラムでまとめる)

```sql
GROUP BY column;
```

# HAVING(GROP BYに対しての抽出条件)

```sql
HAVING condition
```
# INSERT(データ挿入)

```sql
INSERT INTO mytable
(column, another_column, …)
VALUES (value_or_expr, another_value_or_expr, …),
      (value_or_expr_2, another_value_or_expr_2, …),
```
# UPDATE(データ編集)

```sql
UPDATE mytable
SET column = value_or_expr, 
    other_column = another_value_or_expr, 
    …
WHERE condition;
```

# DELETE(データ削除)

```sql
DELETE FROM mytable
WHERE condition;
```
# CREATE(テーブル作成)

```sql
CREATE TABLE IF NOT EXISTS mytable (
    column DataType TableConstraint DEFAULT default_value,
    another_column DataType TableConstraint DEFAULT default_value,
    …
);
```

```sql
Data typeの例
INTEGER(整数), BOOLEAN
FLOAT, DOUBLE, REAL(実数)
CHARACTER(num_chars), VARCHAR(num_chars), TEXT
DATE, DATETIME
BLOB(バイナリデータ(ファイル保存))

Table constraintsの例
PRIMARY KEY (主キー制約)
AUTOINCREMENT (INTEGERの連番)
UNIQUE
NOT NULL
CHECK (expression)

FOREIGN KEY (coulmn)
      REFERENCES table(coulmn)(外部キー制約)
```

# ADD(カラムの挿入)

```sql
ALTER TABLE mytable
ADD column DataType OptionalTableConstraint 
    DEFAULT default_value;
```

# DROP(テーブル削除)

```sql
DROP TABLE IF EXISTS mytable;
```
みずほ2021年8月障害への無責任な推測

　みずほがまたやらかしたらしい、営業店の端末が使えなくなるという大問題。
　発表を信じるならハードウェア障害で、そんな重要なものにバックアップ機器を用意していないはずがないので、つまりは「切り替えがうまくいかなかった」ということらしい

　これだけなら影響を別として普通の障害なのだが、なんとなく根が深そうなのが、みずほ信託銀行でも同様の障害が起こっていたことが「あとから」わかったこと。つまり、営業店とホストコンピュータをつなぐ装置がみずほ銀行とみずほ信託銀行で「共用」されていたに違いないということである。

　セキュリティ上それでいいのか！というのは措いておこう。
　私の良くないくせだが「作っている人がまともと仮定して」どうしてこうなったか「理解できる」理由を考えたりする。
　たぶんだよ。みずほ銀行勘定系のシステム、MINORIの「成功」に気を良くして「同じシステムを系列の銀行にも導入しよう」と考えた。というわけで移植したんじゃないかしら。
（似たような移植のためにドキュメント作成支援プログラムつくった。
https://www.youtube.com/watch?v=CT99u1aQL3Q
MS-Excelでつくったジョブフロー、図形のテキストとして書き込んだものをちょこちょこっと修正することあるでよ。もれなく簡単に修正するにはどうすればよいか。）
　そのとき今回問題を起こした営業点とホストコンピュータをつなぐ装置を「共用」したんじゃないかな。あるいはもっとありそうだけど「もともと銀行用に用意した２台、現用系と待機系、待機系を遊ばせているのは勿体ないと経費削減、信託銀行用に流用。ハードエラー時は両方の処理を片方に寄せておこなうように設計し実装した（つもり）。

　あれ、あたし仮定の話でもこんな非現実的なこと考える性格だったかな。設計も相当きついが、切り替えテストが絶望的にきついぞ。最初からそんなふうに設計しているならともかく、成功裏におわったMINORIって、「成功」後、まちがいなく数多くのシステム技術者を
路頭に迷わせ
リリースしているよね。そんな微妙なことできる人、残ってないだろ。（残してくれてないだろ。）
PPPとPPPoE

#PPP (Ponit-to-Point Protocol) とは
・　L2で2点間の拠点を通信する際に利用するプロトコル
<b>・　WANの技術として利用される</B>
・　以前は上位プロトコルとのネゴシエーションは可能だったが、他ベンダ機器との疎通が取れなかった。
　　⇨ PPPは標準化されている為、他ベンダ機器との相互接続が可能
・　PPPは、LCPとNCPへ細分化される
・　リンク確立の為の認証方式として、PAPとCHAPの２つがある

##LCP / NCPとは
<b>LCP</b>：リンクの確立、維持、切断のほか、認証などの機能を提供
<b>NCP</b>：上位のネットワーク層のプロトコルとネゴシエーションすることで、ネットワーク層でPPPを利用できるようにする

##認証方式(PAP/CHAP)
PAP：平文のパスワードで認証
<b>CHAP</b>：文字列をハッシュ化したデータで認証

以下の2点の理由から、現在はCHAPが主流として利用されている。
・　ハッシュ前のデータを解読することはほぼ不可能
・　定期的に異なるチャレンジコードで認証を行う
　　※ チャレンジコード：認証サーバがユーザへ送信するランダムな文字列


#PPPoE (PPP over Ethernet)とは
・PPPフレームをEthernetフレームとしてカプセル化することにより、PPPをEthernet上で使えるようにする技術
・３つの特徴がある
　　1. ユーザー認証機能を持つ
　　2. ユーザーセッションの管理や課金
　　3. IPアドレスなどのネットワーク情報の割り当て


```python:qiita.rb
 print("練習")

```
Docker×ReDoc×Prismで快適なAPI開発環境を構築する

# はじめに
まずは今回の登場人物の紹介から。

- ReDoc
    - https://github.com/Redocly/redoc
    - OpenAPIをかっこいい見た目で表示できる
- Prism
    - https://github.com/stoplightio/prism
    - APIのモックサーバーを作ることができる

ReDocでかっこいいAPI仕様書を作って、Prismで仕様書に定義した値を返すAPIのモックサーバーを立てよう！
というのが、今回の記事の内容です。

# 事前準備
Dockerの環境構築を完了させておいてください。
また、OpenAPIの記述方法については、本記事では扱わないので、事前に学習しておいてください。

# docker-compose.yml
以下のように記述する。

```yaml:docker-compose.yml
version: '3.9'
services:
  doc:
    image: redocly/redoc
    volumes:
      - ./api:/usr/share/nginx/html/api
    environment:
      SPEC_URL: api/swagger.yml
    ports:
      - 8080:80
  mock:
    image: stoplight/prism
    volumes:
      - ./api:/api
    command: >
      mock -h 0.0.0.0 /api/swagger.yml
    ports:
      - 4010:4010
```

# APIの仕様を定義する
OpenAPIを開発するときのディレクトリ構成のやり方は色々あると思いますが、今回は以下のような構成にしてみました。
サンプルを用意したので、詳しくは[こちら](https://github.com/fukky21/redoc-prism-sample)をご覧ください。

>
root/
　├ docker-compose.yml
　└ api/
　　├ specification.yml
　　├ common/
　　│　└ models/
　　├ user/
　　│　├ paths/
　　│　└ models/
　　└ book/
　　　　├ paths/
　　　　└ models/

# 起動する
```bash
$ docker-compose up
```

# APIの仕様を確認する
http://0.0.0.0:8080 にアクセスする。
見た目はこんな感じ。とってもかっこいい。
![mock.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657374/a6bca0de-99d7-6681-a77d-66d88d982139.png)

# APIのモックを叩く
http://0.0.0.0:4010 でモックサーバーが立ち上がっている。

```bash
# 例: ユーザー一覧を取得する
$ curl -X GET -H "Content-Type: application/json" 'http://0.0.0.0:4010/v1/users'
```

# 最後に
SwaggerとReDocのどちらを使うかは好みの問題だけど、個人的にはReDocを推したい。
途中にも書きましたが、[サンプル](https://github.com/fukky21/redoc-prism-sample)を用意しましたので、よかったらご覧ください。