OmniAICreator/Qiita-1.07M huggingface dataset:
【CSS】Grid Layout 基礎①

🎈 この記事はWP専用です
https://wp.me/pc9NHC-V8

#前置き

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/e71b4e6b-60f9-b661-c877-ad072f5ffe4c.png)


今回は
レスポンシブ 対応のしやすい
Grid Layoutです✨👏

flexよりも少し複雑になりますが、
慣れればできることは増えますよ❤️

続編ではflexとの違い、
gridにしかできないことを
実践形式を含めて
公開しようと思っています💕

#Grid Layoutとは
##縦線、横線に基づいて要素を置く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/17eb5750-40ac-5696-7123-4884d6f57246.png)

**横線 = 行 = row**
**縦線 = 列 = column**

線が縦横に
何本ずつあるかを決めて
要素を配置していきます🌟

何本目のrow, columnかを
指定すれば良いので
flexのorderプロパティでは
対応し切れない
レスポンシブでの
位置変更が容易にできます❤️
flexとの比較は続編にて✍️

#使い方
##grid-row, grid-column

このプロパティで
位置を指定します💫☝️
全体を覆うdivに
display: grid;
するのを忘れずに🪐

**⬇️grid-row: 1/2;**

1行目〜2行目までなので範囲はココ🍎

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/ce8e4100-2bc6-a27e-f690-e9237ccf7c83.png)

**⬇️grid-column: 2/3;**

2列目〜3列目なので範囲はココ🍎

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/55f96d78-1feb-df60-1b7e-add5f87a9d08.png)

⬇️なので

**grid-row: 1/2;
grid-column: 2/3;**

を指定した要素の位置は
ココです🍎

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/6fdee0ea-0319-3b64-a5b8-6fbadbac59a3.png)

##grid-gap
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/f738562c-8ec5-9840-4748-f5d09305cccb.png)

**grid-gap: 12px;**

要素同士の間隔を
空けることができます☁️

##grid-template-rows, grid-template-columns

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/4b68d63c-33f7-a430-94e0-b320dc50726a.png)

**grid-template-rows: 100px 50px;
grid-template-columns: 150px 1fr;**

1列目は100px, 2列目が50px
1行目は150px, 2列目が残りの幅です🌟

#実践
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/8cdfcb36-48b9-0786-d68c-0e3629e7dfb9.png)

こちらを作ってみましょう🎈🧸
要素の間隔や、
要素の中身は
お好きな物で♪
中央配置だけしてあげてください💡

 ticktack…

#答え
いつも通りclass名は
パッとみて分かりやすくするために👀
とっても安直に命名しています。

中央配置はテキストだけの想定で
text-align: center;
を使用してももちろんOKです🌷

```index.vue
<template>
  <div class="page">
    <div class="container">
      <div class="box first">①</div>
      <div class="box second">②</div>
      <div class="box third">③</div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    > .container {
      display: grid;
      grid-gap: 4px;
      grid-template-rows: 66px 106px;
      grid-template-columns: 86px 117px;

      > .box {
        display: flex;
        align-items: center;
        justify-content: center;

        &.first {
          grid-row: 1/2;
          grid-column: 1/2;
        }

        &.second {
          grid-row: 1/2;
          grid-column: 2/3;
        }

        &.third {
          grid-row: 2/3;
          grid-column: 2/3;
        }
      }

    }
  }
</style>
```

#まとめ
gridの簡単な使い方が
分かったかと思います💡
次回はflexとの違いや、
レスポンシブ対応をやる予定です！
お楽しみに❤️
Javaで要素を指定してList配列に格納する方法

Javaで要素を指定してList配列に格納する方法です。

```Java
// 2021/6/26  新規作成
// 2021/6/26  Author  乃木坂好きのITエンジニア
import java.util.ArrayList;

public class Nogizaka2 {
	public static void main(String[] args) {
		ArrayList<String> nogizaka_menber = new ArrayList<>();
		String[] data_1 = {"秋元真夏","生田絵梨花","星野みなみ","高山一実","樋口日奈","齋藤飛鳥","和田まあや"};
		String[] data_2 = {"新内眞衣","北野日奈子","寺田蘭世","鈴木絢音","山崎怜奈"};
		String[] data_3 = {"大園桃子","与田祐希","山下美月","久保史緒里","岩本蓮加","阪口珠美","梅澤美波","佐藤楓","伊藤理々杏","向井葉月","吉田綾乃クリスティー","中村麗乃"};
		String[] data_4 = {"遠藤さくら","賀喜遥香","田村真佑","筒井あやめ","早川聖来","清宮レイ","掛橋沙耶香","金川紗耶","矢久保美緒","北川悠理","柴田柚菜"};
		String[] data_4N = {"弓木奈於","佐藤璃果","林瑠奈","松尾美佑","黒味明香"};
		for(String s :data_1) {
			nogizaka_menber.add(s);
		}
		for(String s :data_2) {
			nogizaka_menber.add(s);
		}
		for(String s :data_3) {
			nogizaka_menber.add(s);
		}
		for(String s :data_4) {
			nogizaka_menber.add(s);
		}
		for(String s :data_4N) {
			nogizaka_menber.add(s);
		}
		System.out.println(nogizaka_menber);
		//指定した配列要素番号にメンバーを追加する。
		nogizaka_menber.add(0,"松村沙友理");
		nogizaka_menber.add(18,"渡辺みり愛");
		nogizaka_menber.add(28,"伊藤純奈");
		System.out.println(nogizaka_menber);

	}

}
```

指定した配列要素番号にメンバーを追加することもできます。
ずっとFPGA初心者（その10：内部プルアップ）

# プルアップ設定
いつも使用している[FPGAボード](https://qiita.com/infinite1oop/items/4b0f03b97ed859fbd954)内部に、プルアップ抵抗の設定ができることがわかったので、本記事では、プルアップ有無時の動作の確認を行う。

## VHDLコード
今回のコードは自明。BTN（ボタン押下）をLED（点灯）に結びつけるのみ。

```vhdl:Pullup.vhd
library ieee;
use ieee.std_logic_1164.all;

entity Pullup is
  port (
    BTN: in  std_logic;
    LED: out std_logic);
end;

architecture RTL of Pullup is 
begin 
  LED <= BTN;			
end RTL;
```

## Quartusの設定
デフォルトでは、プルアップ設定を行うことができない。設定を行うために、Pin Plannerメニューで、BTNやLEDあたりで右クリックすると、「Customize Columns...」が見つかるので、これをクリック。
![CustomizeColumn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/7a12af9e-4a3e-40d1-6082-8b3e36921873.png)

次に「Weak Pull-Up Resistor」を選び、コラムに追加することにより、設定を行えるようになる（表示される）。
![WeakPullupAdd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/a09db1d8-149e-6b27-f18d-4344985aafcb.png)

### プルアップ未設定時の表示
![PullupOff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/66b63c6d-ee24-b38a-8ce9-b117ad7d77d4.png)

### プルアップ設定時の表示
このコラムをクリックすると、On/OFFを選べる。
![WeakPullupOn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/b594ff53-9bd3-27a1-eb09-ca46efbee4d4.png)

## 実験
ちなみに、本ボードのVddピン（電源）やGNDピン情報については、[その８](https://qiita.com/infinite1oop/items/2c3bd5aad059f9754b5f)の外部入出力コネクタ情報を参照されたい。

### FPGA内でプルアップ未設定
青枠内にプルアップ用抵抗がある。ボタン押下でLEDが点灯（負論理、下に見える緑色が
LED）。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/8d5813f0-1ea1-a929-3867-51956241fbda.jpeg", width=90%>

### FPGA内でプルアップ設定
電源が接続されていないことを確認。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/bdf861c1-fb52-2e4a-1e56-84ef06c3474e.png", width=90%>

ボタン押下でLEDが点灯（同じ）。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/3826d891-a4aa-843f-aac2-6c050b4cf584.jpeg", width=90%>

成功。
コンテナを起動時にポート番号重複のエラーが発生

docker-compose up -d を実行し、コンテナを起動しようとしたら以下のエラー。

```
ERROR: for webapp_web_1  Cannot start service web: driver failed programming external connectivity on endpoint webapp_web_1 (中略): Bind for 0.0.0.0:80 failed: port is already allocated

ERROR: for web  Cannot start service web: driver failed programming external connectivity on endpoint webapp_web_1 (中略): Bind for 0.0.0.0:80 failed: port is already allocated
ERROR: Encountered errors while bringing up the project.
```

#原因

port is already allocated という文を見てみます。
どうやらポート番号が重複しているみたいです。



#解決策

Dockerfile にてポート番号を変更したら解決しました。

```php:Dockerfile
ports:
      - 80:80
```
80 から 任意の数値に変更します。

```php:Dockerfile
ports:
      - 81:81
```

エラー文はきちんと読まないとダメですね。気をつけます。
Go: Terminal上でmarkdownをプレゼンできるslides 

GitHub上で流行っていたもののお試し。

http://maaslalani.com/slides/

https://github.com/maaslalani/slides

![gif](http://maaslalani.com/slides/assets/slides.gif?raw=true)

## インストール

あらかじめ golang が必要。

`go install github.com/maaslalani/slides@latest` 

```
git clone https://github.com/maaslalani/slides.git
cd slides
go install
```


## 使い方

`slides sample.md`
![slides.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/a5377b7f-baef-c9f0-e3f2-692080a546f7.gif)



```sample.md
# page1 

自己紹介


---

# page2 

はじめまして


---

 `---` で区切るだけで改ページ。

```markdown
# Slide 1
Some stuff


---

1. 表にもできる

| Tables | Too    |
| ------ | ------ |
| Even   | Tables |

---

改行は LF でないといけないようだ。

---

# That's it.

Thank you!!

```

＊改行は LF でないと改ページしてくれないようだ。

簡単ですが以上です。
WSL2設定方法

デスクトップのWindows10にWSL2をインストールしたので備忘録としてのこしておきます
自分がやったことしか基本は書いてないので別の方法などは[初めに](#初めに)の記事を参考にしてほしいです

#初めに

用語の簡単な説明から書いてあるQiitaの記事があるので参考に（むしろこちらで十分）

https://qiita.com/matarillo/items/61a9ead4bfe2868a0b86

これだけでもよいがやや自分と違う＆自分なりにまとめてみたかったので

# 手順１：Windowsの機能の有効化
GUIまたはPowerShellのコマンドで、Windowsのオプション機能「Linux 用 Windows サブシステム」と「仮想マシン プラットフォーム」を有効にします。

![Windowsの機能.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1691898/1775d0df-e55a-9277-240d-34ec1b89e1cd.png)

GUIのほうが簡単なのでそちらを書く
ウインドウ左下の検索欄、あるいは「スタート（ウインドウズマーク）」→「設定（歯車）」から出てくる検索欄でもよい

↓ウインドウ左下の検索欄
![検索１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1691898/a11f6c34-43d6-cde8-d99c-cfebbc1dd4ce.png)

↓「スタート（ウインドウズマーク）」→「設定（歯車）」から出てくる検索欄
![検索２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1691898/8a6ea4c7-969e-4586-50b8-68012519d3e2.png)

その後再起動

# 手順２：Linuxディストリビューションのインストール
Microsoft Storeで、Linuxディストリビューションをインストールします。

赤枠で囲ったアイコンがMicrosoft Store
![Microsoft_store.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1691898/d0e9176e-8ce6-4cd0-5ad1-6d7932add8b4.png)

今回はLinuxディストリビューションの一つであるUbuntuをインストールします。

Microsoft Store右上の検索欄で「ubuntu」と検索
いくつか出てくるが自分は一番上の無印をインストールした（バージョンは基本最新版でよいと思う）
無印と「20.04(自分がインストールした時の最新)LTS」は同じ内容だと思うのでどちらでもよさそう

![ubuntu検索.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1691898/e8bb7f1f-7564-5ee1-29cf-5004cdb5659d.png)

![ubuntu検索2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1691898/f975f5a1-38ef-bd4d-91a7-9196cad69f05.png)

あとはウインドウ左下の検索欄に「ubuntu」と入れればアイコンが出てくるのでクリックして起動
（初回はインストール直後なのでMicrosoft storeの「起動」ボタンから起動することになるかも）
おそらく初期設定などがあるのでuserとpasswordを入力

https://docs.microsoft.com/ja-jp/windows/wsl/user-support

# 手順３：LinuxディストリビューションをWSL2で動かすように設定する

PowerShellのコマンドラインで `wsl -l -v`を実行すると、インストール＆初期化済みのLinuxディストリビューションのWSLバージョンを確認できる

```:PowerShell
PS> wsl -l -v
  NAME      STATE           VERSION
* Ubuntu    Stopped         1
```

インストール＆初期化済みのLinuxディストリビューションのWSLバージョンを2に変更するには、コマンドラインで以下のコマンドを実行する

```:PowerShell
wsl --set-version Ubuntu 2
# wsl --set-version <ディストリビューション名> 2
```

初めての投稿なので説明不足感ありますが、何かあればコメントください。
JavaScriptでランドスケープモードを検知する



##はじめに
あるアプリケーション内のロジックで、デバイスのランドスケープモードによって、処理を発火させるコードがあったのですが、Androidのキーボード入力をした場合になぜかその処理が実行されるバグがあり、ハマりました。
その際にランドスケープモードについて学んだので記事を書いていきます。

##ランドスケープモードとは

>写真や文書、用紙、画面など長方形の領域の向きを表す用語の一つで、横向きのこと。 横長、横置きとも言う。

逆に縦長をポートレートモードと言います。関係としては以下のような関係です。


<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497827/087110ac-073a-66b9-a203-b5d5a8c5f70b.png">
※wikipediaより引用


##JavaScriptでランドスケープモードを検知する方法

`window.matchMedia` を使うことで、現在のdocumentがランドスケープモードなのか、ポートレートモードなのかを判定することができます！
`window.matchMedia` は戻り値として、`MediaQueryListオブジェクト` を返します。このオブジェクトは`matches`というBoolean型のプロパティを持っており、true であれば document が現在メディアクエリリストに一致しており、false であればそうではありません。

実際にChromeの検証ツールを使って試してみました！
![スクリーンショット 2021-06-26 2.26.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497827/4e0d6162-a128-0fb8-9498-08cb16a38cc5.png)

見づらいですが、検証ツールで`window.matchMedia`を使用しています。

```JavaScript
mql1 = window.matchMedia("(orientation: landscape)");
mql1.matches
> true
```
MediaQueryListオブジェクトを取得して、matchesプロパティの値を出力しています。trueが返ってきているのが分かります。

※ここで `window.matchMedia`に引数として渡している `orientation: landscape` はなんぞやと！
`orientation: landscape` は CSS のメディア特性で、ビューポート の向きを調べることができます。
ランドスケープモードであれば `orientation: landscape`、ポートレートモードであれば、`orientation: portrait`を使用します。

ランドスケープモードの判定を行なっているので、matchesの値はtrueが返ってきています！！ これでランドスケープモードを検知できそうです。

ちなみにスマホモードで試したら、falseが返ってきました！
![スクリーンショット 2021-06-26 2.31.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497827/e70179a0-b387-f3ad-347a-ba32affbb9d5.png)

##まとめ
JavaScriptでランドスケープモードの検知方法についてまとめました！ JavaScriptは色々なことができて面白いです！

**追記**
なぜかAndroidのキーボード入力を使用すると、ランドスケープモードになってしまいます。（ご存知の方がいたら教えてください。）
Androidでキーボード入力で何かバグが起こっていたら、この現象を疑ってみてもいいかもしれません:joy:

なんでも良いので、コメント等頂けるととても喜びます:grin:

##参考

https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

https://developer.mozilla.org/ja/docs/Web/CSS/@media/orientation

https://news.mynavi.jp/article/20200513-iphone_why/
WEBサイトの運用保守手順

皆さん、こんにちは
この記事では、WEBサイトの運用/保守をしていくにあたって、どこに原因があるのかという問題発生個所の特定手順についてフォーカスして記載していきます。
ターゲットとしては、「自社/他者のサイトの運用保守チームに入って、依頼者からの不具合報告の対応や、新機能の追加/仕様変更などの対応をする業務に入ったけど、webのことよくわからんor未経験で何が何やら」って人向けです。

#いたずらに問題個所を調べる前に。
不具合対応や新機能の実装に当たって、最も重要なのは「どこで問題が生じているか/何を変更すればよいか」という点です。
検索結果がおかしいから、「searchHogeHoge」というクラスを調べてみるか～～～
というようにあてずっぽうで調べてはいけません。
そこそこモダンなフレームワーク(Laravelとか、fuelとか)であれば、おおまかな処理のフローは共通しており、それに乗っ取っていけば自然と問題個所の特定ができるようになります。

まずはwebの基本から見ていきましょう。
そもそも、WEBのURLには何の意味があるのでしょうか。
1000億年前の原始の世界において、
http://website.com/articles/aaaabbbbbb.html
というURLは「website.com」というサイトの「articles」というフォルダの「aaaabbbbbb.html」というファイルを取得(して表示)する。
という意味でした。
しかしながら、これでは毎回毎回同じ画面しか表示することができません。
ウェブの世界が発展していくにつれ、「ユーザーの操作(例えば、検索ボックスに入力した内容)に応じてサイトの表示内容を変えたい」ということを考える人が出てきました。
色々な手段が講じられてきましたが、現在において多くのフレームワークで用いられているのは、
URLに対応したメソッドを呼び出したうえで、そのメソッドの戻り値をブラウザ側に返す(そして、表示する)というものでした。
この「URLに対応した」という点がミソです。まずはこのことを覚えてください。

#WEBサイトの設計の基本思想
さて、話を進める前に、一度立ち止まってWEBサイトにおける標準的な設計の基本的なモデルを確認しておきましょう。
それがMVCモデルと言われているものです(ほかにもいろいろな派生がありますが、基本はこれです)。
これは、Model, View, Controlerの3つの頭文字をとったものです。
それぞれの役割を見ていきましょう。

Model(モデル)
モデルは具体的な処理を実施するものです。もしあなたが、複雑な計算式や条件分岐に関する実装を行うのであれば、多くの場合この領域に対してコードを追加することになるでしょう。
「検索結果を受け取って、DBの中身を検索した後、ユーザーの好みに応じた順序に並べ替えたい？」
「ユーザーの最近の閲覧履歴をもとに、おススメの動画を提案したい？」
「ユーザーの利用状況をもとに利用料金を計算したい？」
これらはすべてモデルで行うことです。

View(ビュー)
ビューの役割は、モデルで計算した結果をユーザーに分かりやすく(=見栄えよく)表示することです。
例えば、「2000円, 3000円, 合計5000円」とだけ書くよりも
 2000
+3000
=5000
と書いた方が見やすいですよね。このように計算結果や、処理の結果をhtmlの形に加工してユーザーに分かりやすく見せる層がViewになります。
多くのフレームワークでは、モデルの処理結果を簡単にビュー側に組み込みやすいような機能が用意されていますので、具体的な利用方法はご自身が利用されているフレームワークのドキュメントを見てみてください。

Controler(コントローラー)
さて、最後はコントローラーです。
コントローラーの役割は、Viewから受け取った情報を適切なModelに対して割り当てることです。
これは少しわかりにくいと思います。具体的に説明します。
例えば、ユーザーが「うどん」という文字列で検索したとします。
この検索文字列は、どこから飛んできたかというと、当然「ブラウザ側」から飛んできたことになります。
つまり「ユーザーからのクエリはViewから飛んでくる」ということです。
この時、重要な考え方になってくるのですが、「View側は誰にこの仕事を頼めばいいか詳しいことはよくわかっていない」ということです。
例えば、あなたがコンビニの店員だとして宅配便の配送をお客様に依頼されたとしましょう。
その時あなたは「トラックの運転手に電話をかけて、取りに来てもらって、配送ルートを考えて、高速道路の料金を精算して・・・」なんてことをしないですよね。「毎日コンビニにやってくる担当の人に荷物を渡して終わり」のはずです。
Viewの仕事とは、ユーザーに分かりやすい画面を提供することであって、その仕事に専念すべきなのです。
つまり、Viewは後続の処理について具体的に知っている必要は全くなく、「誰に情報を渡せばいいか」ということさえわかって入ればいいということになります。
この「渡す相手」こそがControlerなのです。
流れを簡単におさらいしましょう。
まず、ユーザーはViewを見ます。それをもとに、例えば検索条件を入力したり、自分の会員情報を見ようとしたりするでしょう。
そうしたら、そのクエリはまずControlerに渡されます。クエリを受け取ったControlerは必要なメソッド(=モデル)を呼び出したうえで、その結果をViewに対して渡す
ということです。

#結局どうやるの？
少し話がそれてしまいましたね。本題に戻しましょう。
どうやって問題の発生個所を見つけるかということですが、それはURLをベースに見つけるのが一番簡単な方法です。
先ほど「URLに対応したメソッドを呼び出したうえで、そのメソッドの戻り値をブラウザ側に返す」ということを書いたかと思います。
この「対応したメソッド」とは何でしょうか。それはズバリ「MVCモデルにおけるコントローラー」なのです。
例えば、
https://sampleWebhogehoge.com/articles/index
というURLであれば、コントローラー層のarticlesクラスのindexメソッドというように、対応したメソッドが呼び出されるのです。
ですので、皆さんがまず覚えなければならないことは、そのシステムにおいて「コントローラー層に対応するディレクトリはどこか」ということです。
これをまず覚えておけば、そのURLのページを開いたときに呼び出されているメソッドがわかるはずです。
(そのサイトの運用保守をやってる先輩とかに「コントローラー層のディレクトリ構成教えてください」とか言えば教えてくれると思います。)
マンガサイトにつひての色々な事情

つかれたる牛のよだれはたらたらと千万年も尽きざるごとし

##序

**漫画サイト。**
それは漫画がブラウザで読める web サイトのことである。

漫画サイトには大きく分けて二種類ある。一方が違法サイトで、もう一方が合法サイトである。
仕組みは表面上はどちらもよく似ている。内部的には違うが、目的が違うので手段が違うと言っていいだろうが、大まかには同じようなものだ。

ここでは、違法サイトについて調べてみたい。

まず、あるひとつの違法サイトでのコンテンツの総数を数えてみたい。
現段階で、数え上げたのは 51717 のタイトル数だった。これは全てがコミックの 1 巻分ではなくて、第何話や、週刊誌の第何号というものを含めての数で、プラスこの数の 20% 分くらいがまだ隠れ層になっていて表出していない。そしてコンテンツは日々、運営者によって更新されるので、時間とともに数は増えていく。

**隠れ層** . . . これはどう云うことかというと、今回とった手法が関係しているが、例えば 100 回ランダムに違法サイトのページアドレスを出して、データベースに記録するということを繰り返して、次回はデータベースに記録されているもの以外をデータベースに記録していくようにしたとして、100 回のうち 20 回ほどが、記録されてないアドレスになってきた場合、続けていくと100 回のうち 15 、10 、5 とだんだんと記録されていないアドレスがランダムでは出にくくなっていくことになる。
このことをここで、隠れ層と云った。隠れ層とは云わないのかもしれない、全部ではないということ。隠れ層を見つけ出すという目的ではなく[^?]、ある時点の表出しているコンテンツのメタ情報について考察していく。

[^?]: それもパズルなり。

####前提
あくまでも、違法サイトのコンテンツページのアドレスを前もって知っているわけではなく、ページにあるマンガ画像が表示されない方法で、ダウンロードせずにコンテンツが埋め込まれている URL を収集して、漫画のタイトルや著者情報を分析していくというパズルであり、漫画読みたいということではない。
読みたい場合は、まずは合法マンガサイトを掘り進んで潜り込んでみるといい。
どの漫画家が作品を何点公開しているのかなど並べて見るプログラムを考えて書いてみるなどすると、方法**など**が見えてくる。

<details><summary>🍄</summary>
<div>

<iframe width="560" height="315" src="https://www.youtube.com/embed/FvzrkW8FkIs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<details><summary>マンガサイトにつひて</summary>
<div>

<a href="https://qiita.com/dauuricus/private/a50b6fde168bd8496439">private ⌨</a>
</div></details>

</div></details>

この記事は、Ruby 、 SQLite3 、 スクレイピング、正規表現についての考察という範囲で、超ビギナー向けである。この範囲での経験がどれも 1 ヶ月以内の未熟者が書いているので、それ以上の内容であることはありえない。
フレームワークとは無縁。

スタンスとしては出版社よりは、マンガ家個人に寄りそう必要なデータを明瞭にオープンに出したい。
このスタンスにおいては漫画家に不利益になることには言及しない。出版社、および漫画家の権利保守のための作業の軽減に役立つことも提供できる可能性はあり。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225786/53f4ca08-8c01-7e31-31b9-fa3676b3f42c.png" width="100" align=left>**つづく** ... [マンガサイトにつひての色々な事情 02](https://qiita.com/dauuricus/items/5923614365bb3ae8d78a)

## 関連記事

https://zenn.dev/kurocat/articles/eb233dc31bb285

https://qiita.com/dauuricus/items/563cbcc9776f66cb672e

https://zenn.dev/kurocat/articles/55565f019754cb
pictureタグでPCとSPで画像を切替える

#概要
CSSやJavascriptを使用せず、HTMLでレスポンシブに画像切替えを実装した。
IE対応で少し悩んだので備忘録。

##使用方法

```
<picture>
    <source srcset="{画像1のパス}" media="({画面サイズ})" />
    <img src="{画像2のパス}" />
</picture>
```
* pictureタグの中にsorurceとimgタグを書く
* 画像の切替えは、``media="({画面サイズ})"``で画像サイズを指定して行う。
* 一番上に記載したsourceから順に、条件に当てはまったsourceタグの画像が適用される。
* どのsourceの条件にも当てはまらない場合は、imgタグの画像が適用される。


##使用例
```
使用例）
<picture>
    <source srcset="./img/img0.png" media="(min-width: 835px)"/>　---優先度1---
    <source srcset="./img/img1.png" media="(max-width: 1200px)"/> ---優先度2---
    <img src="./img/img2.png" />　---↑の条件に当てはまらない場合---
</picture>
```
* mediaで画面サイズが835pxより大きいの場合の画像を指定
* mediaで画像サイズが1200pxより小さい場合の画像を指定

##IE対応メモ

↓の使用例でsourceタグはPC用の画像・imgタグはSP用の画像パスを指定すると仮定。

```
使用例）
<picture>
    <source srcset="./img/img_pc.png" media="(min-width: 835px)"/>　<= PC用の画像指定
    <img src="./img/img_sp.png" width="100" height="100"/> <= SP用の画像指定
</picture>
```

* imgタグで画像の``width``と``height``を指定<br>
=> 指定しないとSPサイズで画像が切り替わらないため、必ず画像の高さと幅を指定する。

* ``width``と``height``はPC用の画像サイズを指定<br>
=> imgはSP用の画像だから...と思ってSPの画像サイズを指定すると、sourceで指定したPC用の画像もSPの画像と同じサイズになってしまう。
react-bootstrapを使用したタブメニューの実装

## 概要
Webのページでタブメニューを実装する方法は、少し探せばけっこう出てくると思います。例えば[タブメニューを作る](https://yuntu-tek.com/tab-menu/)の記事で紹介されているように、jQueryを使う方法やCSSのみで実装する方法などなど。
今回はReactを使用する前提で、選択されたタブの情報をStateに保存して処理に使いたい場合どうするかということで、簡単な実装方法ないかなと探してみました。その中で`react-bootstrap`のタブの機能が、けっこう良さげだったので紹介したいと思います。


## react-bootstrapでの実装
react-bootstrapの[こちら](https://react-bootstrap.github.io/components/tabs/)のドキュメントで紹介されている通り、`Tabs`と`Tag`を使うことで、かなり簡単に実装できそうです。ドキュメントの`Controlled`の項にありますが、現在どのタブを選んでるかもstateで管理できます。


## 実装サンプル

```javascript:TabSample.js
import React, { useState } from "react";
import { Tab, Tabs } from "react-bootstrap";

export default function TopPostComponent() {
  const [tabKey, setTabKey] = useState("aTab");

  function onChangeTab(k) {
    setTabKey(k);
  }

  return (
    <>
      <Tabs
        id="controlled-tab-example"
        activeKey={tabKey}
        onSelect={(k) => onChangeTab(k)}
      >
        <Tab eventKey="aTab" title="Aタブ">
          Aタブ
        </Tab>
        <Tab eventKey="bTab" title="Bタブ">
          Bタブ
        </Tab>
      </Tabs>
    </>
  );
}
```

こんな感じで表示されます。
<img width="400px" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32098/daf87b5d-a52d-79b1-aef8-d8e34d9fb9a1.png" />
yukicoder contest 301 参戦記

# yukicoder contest 301 参戦記

## [A 1556 Power Equality](https://yukicoder.me/problems/no/1556)

Python の多倍長整数でも流石に10<sup>9</sup>乗は出来ないので真面目に考える. A=B はまず思いつく. それ以外にあるかだが、ぱっと思いつかなかったので A と B を1から1000まで回して確認したところ2と4が出て来たので、後はこいつだけだろうと思って提出したら AC.

```python
A, B = sorted(map(int, input().split()))

if A == B:
    print('Yes')
elif A == 2 and B == 4:
    print('Yes')
else:
    print('No')
```

## [B 1557 Binary Variable](https://yukicoder.me/problems/no/1557)

直感が右端でソートと言ったのでそうした. ちゃんと分かりたい人は、蟻本の P.43 からの区間スケジューリングの部分を読む.

```python
from sys import stdin

readline = stdin.readline

N, M = map(int, readline().split())
LR = [list(map(int, readline().split())) for _ in range(M)]

result = N
t = -1
for L, R in sorted(LR, key=lambda x: x[1]):
    if L <= t <= R:
        continue
    result -= 1
    t = R
print(result)
```
開発環境構成図[Nginx × Unicorn × Supervisor × Rails × MySQL on Docker]

まだ理解の途中ですが、ポートフォリオアプリの開発環境をDockerを用いて構成したので、現状での理解度を記したいと思います。

## 開発環境構成図

![開発環境.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779676/c4a5aeb1-ffdc-c935-3808-2cb3f61d3d96.png)


### Rails

rubyのフレームワーク、MVCのやり取りを行う。

### MySQL

OSSのRDS、railsのDB情報を保存する。

### Supervisor

プロセス管理/デーモン化のツール。

「dockerコンテナは、プロセスがフォアグランドで動いていないと終了する」という制約がある事から、Supervisorがフォアグランドで動作するように見せることで、コンテナの停止を防ぐ。
また、Webサーバー・アプリケーションサーバーのプロセス管理を行う。

### Unicorn

（これが特に怪しい。）

RailsとWebサーバーのやり取りを仲介するミドルウェア。送信されてきた多数のリクエストを捌き、分散してアプリケーションに伝達するという機能を持つ。
リクエスト毎に、マスタープロセスをフォークしたワーカープロセスを生成し、一定時間が経つとマスタープロセスによって破棄される。ワーカープロセスの生成・破棄をUnicornが停止するまで繰り返す。

### Nginx

Webサーバーの役割を担うミドルウェア。HTTPリクエストとレスポンスを管理し、confファイルでhttpやserverの設定を行うことで、複数のヴァーチャルサーバーを作成する事ができる。
One-word Naming: まず1語で命名してみる

## 概要

- 命名は最初1語のみで行うと保守性が向上する。

という持論、「One-word Naming」の紹介です。

## 嬉しいこと

- 短くて意味の伝わりやすい名前をつけられる。
- プログラムの分割する機会を逃しにくくなる。

## 内容

下記の3ステップで説明します。

1. 1語のみで命名する
1. 確認する
1. 調整する

### 1. 1語のみで命名する

「1語」の定義は、英語において**スペースで分割され得る**要素だとします。[^1]

1語で、しかし内容が伝わる様に最善を尽くして命名します。

すると

- 修飾語でない語
- 具体的な語
 
を選ぶことになります。

例えば

- `user_name`

は2語ですから、1語減らします。

- `user`

はnameを修飾する語ですから

- `name`


がより適切だと考えます。

「ユーザの名前」であり、「名前」ではありますが、「ユーザ」ではないのです。

他にも

- fibonacci, sequence, number, term
- article, body, text, html
- output, response, json, stream

それぞれどんな場面なら選択されそうな1語でしょうか？

常に適切な一語を探すことで、対象の本質を理解することに繋がると思います。

### 2. 確認する

1語で十分に意味が通じるか？と考えます。

Yesなら1語で命名は完了とします。

Noの場合は言葉を増やす必要があります。


###3. 調整する

前項で、1語では不十分だった場合。

周辺を分割して、命名する対象を増やせないか検討します。
（すぐ名前を長くしたくなりますが、こらえます。）

ユーザ名の例を再び取り上げます。
`name`では読み手にとって不十分だとしましょう。

例えば、`User`型と、その属性[^2]として`name`を定義することもできるはずです。

```c:C
typedef struct { char name[30]; } user;
```

```ruby:Ruby
class User
  attr_reader :name

  def initialize(name)
    @name = name
  end
end
```

```haskell:Haskell
data User = User { name :: String}
```

分割することで、一度に考えるべきことを減らせます。
名前も短い方が理解するのは楽です。

もちろん、分割することが常に望ましい結果をもたらすとは限りません。
一般に、保守のしやすさだけがプログラムに求められる性質では無いからです。

しかし、分割は面倒で、それゆえ適切なタイミングを逃しやすいです。
コード量が増えていくほど、更に面倒になります。

ですので、命名の度に分割の可能性を検討できることは
One-word Namingの良さだと考えています。

[^1]: 学術的な定義はより厳密だろうと思いますが、本記事では扱えません。。

[^2]: ここでいう属性は抽象的な意味です。インスタンス変数、メソッド、フィールド、スロット等に置き換えて理解ください。
MIDIの note - 周波数 配列 コピペできるやつ

MIDI のnote番号と周波数[Hz]の対応表はググると色々出てくるのですが、表になっていてコピペできないものがほとんどだったので、コピペできるやつをおいておきますね。

```
uint16_t tones_i[128];
void createTones(){
  for(int i=0;i<128;++i){
    tones_i[i]=(uint16_t)(440.0*pow(2.0,(i-69)/12.0));
  }
}
````

```
const float tones[128]={
8.175798,
8.661958,
9.177023,
9.722718,
10.30086,
10.91338,
11.56233,
12.24986,
12.97827,
13.75,
14.56762,
15.43385,
16.3516,
17.32392,
18.35405,
19.44544,
20.60172,
21.82676,
23.12465,
24.49972,
25.95654,
27.5,
29.13523,
30.86771,
32.70319,
34.64783,
36.7081,
38.89087,
41.20344,
43.65353,
46.2493,
48.99942,
51.91309,
55,
58.27047,
61.73542,
65.40639,
69.29565,
73.4162,
77.78175,
82.40688,
87.30706,
92.4986,
97.99885,
103.8262,
110,
116.5409,
123.4708,
130.8128,
138.5913,
146.8324,
155.5635,
164.8138,
174.6141,
184.9972,
195.9977,
207.6523,
220,
233.0819,
246.9417,
261.6255,
277.1826,
293.6648,
311.127,
329.6276,
349.2282,
369.9944,
391.9954,
415.3047,
440,
466.1638,
493.8833,
523.2511,
554.3653,
587.3295,
622.254,
659.2551,
698.4565,
739.9888,
783.9908,
830.6094,
880,
932.3276,
987.7666,
1046.502,
1108.731,
1174.659,
1244.508,
1318.51,
1396.913,
1479.978,
1567.982,
1661.219,
1760,
1864.655,
1975.533,
2093.004,
2217.461,
2349.318,
2489.016,
2637.02,
2793.826,
2959.955,
3135.963,
3322.438,
3520,
3729.31,
3951.067,
4186.009,
4434.922,
4698.637,
4978.032,
5274.041,
5587.652,
5919.911,
6271.926,
6644.875,
7040,
7458.622,
7902.132,
8372.018,
8869.845,
9397.271,
9956.063,
10548.08,
11175.3,
11839.82,
12543.86
};
```
ダイエット＋食品管理アプリ構築の道程（５）

##delegate

```rb
delegate :foo, to: :something
```

こう書くことで、メソッドが、somethingメソッドにチェーンしたsomething.foo（something.メソッド名相当のもの）として動くようになります。他にも、to: :@instance_varとすればインスタンス変数へ、to: :CONSTANTとすれば定数につなげることができます。

###例　UserモデルとProfileモデルが1対1の関係。ユーザー名はProfileモデルに保存されてる状況で、普通に名前を取り出そうとすると@user.profile.nameとなる。

```rb:Userモデル
class User < ApplicationRecord
  has_one :profile
 
  delegate :name, to: :profile
end
```

とすると
###@user.name
で名前にアクセスできるようになる。

```rb:Userモデル
class User < ApplicationRecord
  has_one :profile
 
  delegate :name, to: :profile, prefix: true
end
```

とすると
###@user.profile_name
で名前にアクセスできるようになる。


 ###Userクラスに nameメソッドを定義するとします。 以下のようなコードになるでしょう。

```rb

class User < ApplicationRecord
  has_one :profile
 
  def name
    profile.name
  end
end
```

これでも良いんですが、もっと簡潔に書く方法が delegateです。

@user.nameと呼び出すことが下記の書き方でも実現できます。

```rb
class User < ApplicationRecord
  has_one :profile
 
  delegate :name, to: :profile
end
```

より明示的かつ、短く書くことができました。

インスタンス変数や定数へもアクセスが可能
delegateする対象ですが、インスタンス変数へアクセスすることも可能です。

```rb
delegate to:@user
```

また、定数を参照することも可能。 定数はそのままクラスメソッドのように呼び出せるのであまり使うケースは少なそうに思います。

```rb
delegate to: :NUMBER
```

オプションとして、prefixをつけることも可能です。

```rb
delegate to: :method_name, prefix: :aaa
```

上記のように書くと、メソッドを呼び出すときに以下のように呼び出すことができます。

```
@instance.aaa_method_name
```

###モデル名.persisted?
###保存済みかどかをチェックします。

>https://sakurawi.hateblo.jp/entry/delegate
[メモ]テスト時のloggingの出力を無効にしたい

自分用のメモ

Djangoを使っていてログを取るためにdjango-structlogを使っている(非常に便利)。
ただテストをするときにも出力が出て邪魔でloggingの出力を抑える方法がないか調べていたらloggingの機能に近いものがあった。別にDjangoに限った話ではないが。

```python
logging.disable(log_level=logging.CRITICAL)
```
引数にlog_levelを取れ、渡されたlog_level以下のレベルのログを出力しなくなる。[こちらドキュメント](https://docs.python.org/ja/3/library/logging.html#logging.disable)。
Python3.7からはデフォルト引数で`CRITICAL`になった様子。なので引数無しですべてのloggingの出力を抑えられる。
テスト時はコードの開始や、`unittest`の`setUp()`メソッド内で実行すればいい。

逆にログ出力をもとに戻すには

```python
logging.disable(log_level=logging.NOTSET)
```

すればいい。
これでテストの出力を汚染しないですんだ。めでたしめでたし。
残プロ　第-24回　~Bootstrap4で表を作成~

# \<table class='table'>

bootstrapならtableクラスを指定するだけで簡単に表が作成できます．pyplotとは大違い!

### .csv

文字列，整数，文字列(日本語)でテストを行いましょう．

![test_csv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578927/92a56796-ff1d-d4bc-87a6-0573f86a14d9.png)


### .py

pandasでcsvの読み込みを行うと，配列に変換する手間がかかります．なので今回は標準ライブラリcsvを使用しています．


~~~ python:
from flask import Flask, render_template, url_for
import csv

app = Flask(__name__)

@app.route('/')
def csv_show():
    csv_file = []
    with open('test.csv') as f:
        reader = csv.reader(f)
        for row in reader:
            csv_file.append(row)
    return render_template("csv.html", csv_file=csv_file)


if __name__ == '__main__':
    app.run(debug=True)
~~~


### .html

行ごとに上から定義するだけで綺麗な表が作成できます．

~~~ html:csv.html
{% extends 'layout.html' %}

{% block content %}
    <table class='table'>
        <thead>
            <tr>
                <th scope='col'>{{ csv_file[0][0] }}</th>
                <th scope='col'>{{ csv_file[0][1] }}</th>
                <th scope='col'>{{ csv_file[0][2] }}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope='row'>{{ csv_file[1][0] }}</th>
                <td>{{ csv_file[1][1] }}</td>
                <td>{{ csv_file[1][2] }}</td>
            </tr>
            <tr>
                <th scope='row'>{{ csv_file[2][0] }}</th>
                <td>{{ csv_file[2][1] }}</td>
                <td>{{ csv_file[2][2] }}</td>
            </tr>
            <tr>
                <th scope='row'>{{ csv_file[3][0] }}</th>
                <td>{{ csv_file[3][1] }}</td>
                <td>{{ csv_file[3][2] }}</td>
            </tr>
        </tbody>
    </table>
{% endblock %}
~~~


### 実行結果

![test_html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578927/75f23dfc-3090-078a-c26c-ffcc59542145.png)
ServiceNow 任意のテーブルのレコードを全削除するbackground script

USのシニアエンジニアと1年程一緒にアプリ開発をしていた中で使っていたものです。
テーブルのデータを削除したい場面で一括でレコードを消すスクリプトです。
自分の業務で必要な範囲でしか動作確認していません。
background scriptで範囲はglobalで実行です。

```javascript
recursive_table_deletion ( "cmdb" );
delete_cmdb_discovery_tables();
function recursive_table_deletion ( base_table ){
  var cgr = new GlideRecord( "sys_db_object" );
  cgr.addQuery("name", base_table);
  cgr.query();
  if (cgr.next()) {
    var target_table = new GlideRecord( "sys_db_object" );
    target_table.addQuery("super_class", cgr.sys_id );
    target_table.query();
    while (target_table.next()) {
     var child = target_table.name ;
     gs.log ("Deleting from " + child );
     gs.truncateTable(child);
     recursive_table_deletion( child ) ;  
    }
  }
  gs.log("Truncate " + base_table);
  gs.truncateTable(base_table);
}
function delete_cmdb_discovery_tables() {
        // 消したいテーブル名をtablesのリストに入れる
	var tables = [
        "cmdb_software_instance", 
        "cmdb_ci_ip_address",
        "cmdb_ci_network_adapter",
        "cmdb_sam_sw_install",
        "cmdb_ci_cpkg",
	    "ast_license_software_instance",
	    "ast_license_package_instance",
	    "ast_software_license",
	    "ast_license_base", 
	    "cmdb_rel_ci", 
	    "cmdb_serial_number", 
	    "cmdb_pid", 
	    "ecc_agent_ci",
	    "discovery_printer_supplies",
	    "cmdb_switch_port",
	    "cmdb_discovery",
	    "cmdb_tcp_connection",
	    "cmdb_tcp_half",
	    "cmdb_tcp",
	    "cmdb_running_process",
	    "discovery_device_history",
	    "discovery_status",
        "discovery_result",
        "automation_error_discovery_category_stats",
        "automation_error_discovery_code_stats",
        "automation_error_discovery_msg",
        "discovery_status_log",
	    "discovery_switch_bridge_port_table",
	    "discovery_switch_fwd_table",
	    "sys_object_source",
	    "vcenter_datastore_hostmount",
	    "discovery_switch_spanning_tree_table"
	];
	for (var i in tables) {
	    var table = tables[i];
	    var gr = new GlideRecord(table);
	    if (!gr.isValid())
	        continue;
	    gs.log("Truncate " + table);
		gs.truncateTable(table);
	}
}
```
railsでENVを使用する

パターンは二つあると思います。

## .envファイルを作成する

### .envファイルを作成

### .envファイルの記述

あとはcontrollerなどで読み込めばOKです。

https://qiita.com/rars9le/items/1b1277499819659e5601

こっちの方が簡単です。
注意点はgitignoreを記述しないとgitにプッシュしたときに載ってしまうのでセキュリティ的に良くないです。

## 環境変数を設定する

```
vim ~/.zshrc
```

このコマンドで環境変数の設定状況が表示されるので、
iを押してインサートモードに。
変数を記述してesc→:→w→qでエンターを押す。


```
export AWS_ACCESS_KEY_ID=
#こんな感じで記述
```

```
source ~/.zshrc
```

を実行

デメリットは設定した変数はその環境でしか使えないということ。
チーム開発では向いてないかな？
postgresql エラー: current transaction is aborted commands ignored until end of transaction block

# 発生した状況
Transaction中に行ロックを実装していた時に発生したエラーです。
以下の行取得エラーを期待していました。

```
pq: could not obtain lock on row in relation "table_xxxx"
```
↑は「行ロックされているので、取得できないですよ〜」ということ。


```
pq: current transaction is aborted, commands ignored until end of transaction block
```

しかし、意図に反して↑のメッセージが発生しました。つまり「現在のトランザクションを中止します。コマンドはトランザクションブロックが終了するまで無視されます」というエラーが発生しはじめました :scream: 

## 処理の全体図
![説明1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4181/c0bfc888-4b3c-0d9c-3a1e-04a499bfdc89.png)


# もう少し詳しく
実は、行ロック取得エラーをフックして、同トランザクション内で別処理を行おうとしていた時に発生しています。

## エラーが発生する処理の全体図
![説明2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4181/37fc6a85-f728-7d48-1f7f-eb7b14622953.png)


原則として、postgresのトランザクションでエラー発生後、別のクエリを実行するためには、ロールバックを使用してトランザクションをクリアする必要があるということでした。トランザクションでエラーを放置してしまうと全ての処理は実行されないということです（今回はこれに相当してます）。
エラーフックはそもそも同一トランザクションではできないということですね。

## ロールバックとは
ROLLBACKは、現在のトランザクションをロールバックし、トランザクションによって行われたすべての更新を破棄すること。[(Description: ROLLBACK)](https://www.postgresql.org/docs/10/sql-rollback.html)

# 解決方法
トランザクション内でエラーをフックして別処理などを行えないので、必ずエラー発生後はロールバックしてトランザクションをクリーンな状態にすれば発生しなくなります。
[ドキュメント](https://www.postgresql.jp/document/9.3/html/tutorial-transactions.html)にもトランザクション中のエラーについては言及されています。
>トランザクションは全てのデータベースシステムで基礎となる概念です。トランザクションの基本的要点は複数の手順を単一の「全てかなしか」の操作にまとめ上げることです。手順の進行途中の状態は他の動いているトランザクションからは見えません。 そして、何らかのエラーが起こるとトランザクションは完結しません。ですからデータベースはエラーの原因となった手順によってまったく影響されることはありません。
PHPDocで関数の詳細をいつでも参照可能にする


```

 /**
  * 引数の値にいくつかの値を足した値を取得する関数
  *
  * @param int $base_val 元の値
  * @param int #add_val 足し合わせる値
  *
  * @return int 足し合わせた値
  * @see https://exampel.com/
  *
  */

function add($base_val, $add_val = 1) {
    $total = base_val + add_val;
    return $total;
}

```

上記はPHPの記法で、fucntion add()の詳細についてPHPDocという記法を用いて記載してあるコードです。
以下の部分が、PHPDoc記法に基づいた詳細記載です。

```

 /**
  * 引数の値にいくつかの値を足した値を取得する関数
  *
  * @param int $base_val 元の値
  * @param int #add_val 足し合わせる値
  *
  * @return int 足し合わせた値
  * @see https://exampel.com/
  *
  */
```

こうすることで、関数名addにカーソルを合わせて, (Macの場合)

```
cmd + k + i
```

で、add関数の詳細情報を開いて見ることができます。

備忘録として。
また、初学者の方の参考にもなれば幸いです。
パス（path）を通す

こんにちは。
「パス（path）を通す」について説明します。

* まず、CUI[^1]におけるコマンドの処理実行の基本形は下記の形です[^2]：

[^1]: CUI とは、キャラクタベースユーザインタフェース (character-based user interface)、コンソールユーザインタフェース (console user interface) 、もしくはコマンドラインインタフェース (command line interface) です。
[^2]: パス（path）とは、ファイル（およびコマンドファイル）のディレクトリ内における位置のことです。

```console
$ コマンドパス 処理対象ファイルパス
```

* しかしこれを、下記のように動かすことができれば楽になります[^3]：

[^3]: なぜならば、「```コマンドのパス```」（主にフルパス）を意識する必要が低減されるためです。

```console
$ コマンド名 処理対象ファイルパス
```

- これを実現するには、この```コマンド名```が```コマンドパス```を正しく指すことが必要です：
   - ```コマンド名```を```コマンドパス```で表す基本形方式
      - 絶対もしくは相対パス[^4]でコマンドパスを表します
   - ```コマンド名```のみで表す方式
      - 事前にalilasコマンドで指定
         - 使用例：```alias コマンド名='コマンドパス'```
      - もしくは事前に「パス（path）を通す」必要があります
         - すなわち```PATH```環境変数を指定します（コマンドファイルを格納しているディレクトリパス（複数可）を設定）
             - この指定を表示させた例です：

```console
$ echo $PATH
/Users/kkdd/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/TeX/texbin:/usr/local/sbin
```

[^4]: 相対バス指定表現を```./```、```../```、```~/```で始めます。
【Flutter】fatal error: 'Flutter/Flutter.h' file not foundの対処法

#エラー内容
iOSでのビルドを試みたところ、

```terminal
fatal error: 'Flutter/Flutter.h' file not found
```
という内容のエラーが表示された。

#解決策
今回は、以下の二通りの解決策を試してみたところ、私の場合は解決策2の方で解決できました。
####解決策１
エディター内のターミナルにて下記を実行

```terminal
rm ios/Flutter/Flutter.podspec
flutter clean
```
####解決策２
Podfileの下の方にある、post_installから始まる部分を以下のように変更

```
post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
  end
end
```

#動作環境
```
[✓] Flutter (Channel stable, 2.2.0, on macOS 11.2.3 20D91 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] Connected device (3 available)
    ! Error: iPhone is not connected. Xcode will continue when iPhone is connected. (code -13)

• No issues found!

Dart 2.13.0
```

# 参考文献
この記事は以下の情報を参考にして執筆しました。
- [解決策1](https://www.yuukinishiyama.com/2021/01/16/flutter-fatal-error-flutter-flutter-h-file-not-found%E3%81%8C%E9%80%A3%E7%99%BA%E3%81%99%E3%82%8B/)
- [解決策2](https://github.com/flutter/flutter/issues/70895#issuecomment-792755327)
Azure Active Directory B2Cを使いこなそう 第4回「ユーザーフローの日本語化」

# 連載予定

1. [Azure Active Directory B2Cの特徴と使いどころ](https://qiita.com/yyukawa/items/78a52275b9dc9c37cd9e) 
1. [基本的な使い方（標準ユーザーフロー）を知る](https://qiita.com/yyukawa/items/5996fd6558a9f5fa8631) 
1. [基本的な概念（テナント、アプリケーション、ユーザー）を理解する](https://qiita.com/yyukawa/items/da96b4666ace678db167)
1. [ユーザーフローの日本語化](https://qiita.com/yyukawa/items/f5a6960f5e457b5cc262) ★
1. [パスワードレス認証](https://qiita.com/yyukawa/items/7c96f9599630420f37c3)
1. 条件付きアクセスを使って環境に応じた認証を要求する
1. 柔軟な認証フローを実現する：カスタムポリシー

# ユーザーフローを日本語化する
ユーザーフローを日本語化してみましょう。
ポリシーのユーザーフローを選択し、第2回で作ったユーザーフローを選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16609/783505db-98ee-5f2e-00b8-fc861ab33633.png)

カスタマイズの言語を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16609/7abd74cd-6bd1-b7a3-9f7c-f389389a0c17.png)

言語のカスタマイズを有効化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16609/c487503e-2270-7555-1b9f-8a0a6eb856a6.png)

日本語を選択して有効と既定を「はい」にし、保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16609/8ac61ff2-85e4-2a31-c96f-6711e4731f68.png)

これだけでも日本語になりますが、細かいカスタマイズをしたい場合は、既定値をダウンロードして、修正したものをアップロードします。ファイルは以下のような感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16609/9c73c114-7ff0-fcf1-b845-ccbb6da85b82.png)

```json
{
  "LocalizedStrings": [
    {
      "ElementType": "ClaimType",
      "ElementId": "UserId",
      "StringId": "DisplayName",
      "Override": false,
      "Value": "ユーザー名"
    },
    {
      "ElementType": "ClaimType",
      "ElementId": "UserId",
      "StringId": "PatternHelpText",
      "Override": false,
      "Value": "指定したユーザー名は無効です。"
    },
```

ユーザーフローを実行してみましょう。無事日本語化されていると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16609/9d2afd4c-295d-39fb-b64e-5ad948f01969.png)
HTMLで箇条書きリストを作成

#はじめに

またまたhtmlの記述方法を忘れていたので投稿しようと思います。

今回は箇条書きのレイアウトです。
ヘッダーの　navで使用される所をよく見ます。


#ul要素・li要素

* **ul要素**
順序のないリストを示すブロックレベル要素です。li要素と一緒に使用します。

* **li要素**

リストの項目を示すブロックレベル要素です。ul要素の子要素として記述します。

```.html
<ul class="lists">
  <li class="list">リスト1</li>
  <li class="list">リスト2</li>
  <li class="list">リスト3</li>
  <li class="list">リスト4</li>
</ul>
```

![スクリーンショット 2021-06-25 21.53.50（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264460/7f9322c0-67b9-4d7f-836b-58628f23f794.png)

このように表示する事ができます。

また、箇条書きの黒点が邪魔な時が消す事ができます

```.css
.list{
  list-style: none;
}
```

![スクリーンショット 2021-06-25 21.56.36（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264460/884dac35-18bd-ee5a-e8f7-4e26864ce2fa.png)


###余談

olを使って順序をつけた記述もできます。

```.html
<ol>
 <li class="list">リスト1</li>
  <li class="list">リスト2</li>
  <li class="list">リスト3</li>
  <li class="list">リスト4</li>
</ol>
```
AWSのポリシーの種類

##　はじめに
今日はAWSのポリシーについてざっくりアウトプットしていこうと思います。

よろしくお願いします(｡･ω･)ﾉﾞ

##　アイデンティティベースのポリシー
　グループ・ユーザー・ロールにアタッチするポリシーをアイデンティティベースのポリシーと呼びます。
　AWS管理ポリシー、カスタマー管理ポリシー、インラインポリシーが使用できる。

##　リソースベースのポリシー
　S3バケットやSQSキュー、SNSトピックなどに設定するポリシーをリソースベースのポリシーと呼ぶ。インラインポリシーのみが使用できる。

##　AWS管理ポリシー
　AWS管理ポリシーは名前の通りAWSが作成して管理しているポリシーで、AWSアカウントを使い始めた時点ですでに用意されている。複数のユーザー、グループ、IAMロールにアタッチできる。バージョンアップデートもAWSによって行われる。
　AWS管理ポリシーAmazonEC2FullAccessはバージョン５まであり、バージョン５がデフォルトのポリシー。

##　カスタマー管理ポリシー
　カスタマー管理ポリシーは「お客様管理ポリシー」や「ユーザー管理ポリシー」と呼ばれることが多い。その名前の通り、ユーザー作成して管理するポリシーで、複数のユーザー、グループ、IAMロールにアタッチできる。バージョンアップデートはユーザーによって行われる。
　カスタマー管理ポリシーを変更すると新しいバージョンができます。その新しいバージョンをそのままデフォルトにすることもできますが、以前のバージョンをデフォルトとして適用することもできる。
　ユーザー独自の対象のリソースを定義できたり、アクションの組み合わせが可能になるので、最小権限の原則を守りやすくなる。

##　インラインポリシー
　他のグループ、ユーザー、ロールにアタッチする必要のないポリシーはインラインポリシーに設定する。グループ、ユーザーロールのようなIAMエンティティのことをプリンシパルエンティティ（認証対象の識別名）と呼びます。プリンシパルエンティティに埋め込む子ポリシーという意味で、インラインポリシーと呼ぶ。
　インラインポリシーはリソースベースのポリシーにも使用できる。

##　IAMポリシーの評価について
　IAMポリシーはAPIアクション実行時に評価されます。まず、拒否されているかどうか評価されて、拒否されていればその時点でアクションは拒否される。

◆「拒否」されていなければ許可されているかどうかが評価される
◆「許可」されいなければ拒否される

　明示的に許可されていれば、初めてそのアクションへのリクエストが実行され、許可する範囲が広く拒否した操作が特定されている場合は、AWS管理ポリシーで大きく許可しておいて、カスタマー管理ポリシーで拒否するという方法がよく使われる。

##　おわりに
今回はポリシーについてまとめてみました
(｡･ω･)ﾉﾞバイバイ
ダイエット＋食品管理アプリ構築の道程（４）

migrate後のテーブルです。

cookingsテーブル（親）
![20210625-191123.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/4553d6a4-619f-745d-6c6f-5d659ea4f428.png)

fridgesテーブル（子）
![20210625-191407.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/780641e1-69e2-b1c8-9175-4ceddddee3b9.png)


####attr_acccessor
#####フィールド名を設定します。
formタグに含まれるテキスト
inputタグ内部にあるid属性・name属性・placeholder属性のテキスト情報


```rb:(参考)コンパイル前
<%= form_with model: @user do |f| %>
  <%= f.label :name, '名前' %>
  <%= f.text_field :name %>
  <%= f.submit "送信" %>
<% end %>
```

コンパイルされると

```rb:（(参考)今回の場合はデータが既に存在する場合で設定）
<form action="/users" accept-charset="UTF-8" data-remote="true" method="post">
  <label for="user_name">名前</label>
  <input type="text" name="user[name]" id="user_name" />
  <input type="submit" name="commit" value="送信" data-disable-with="送信" />
</form>
```

(参考)

|:name→|label for="user_name"|
|--|--|
|:name→|input id="user_name"|
|:name→|input name="user[name]"|

*頭にuserがつくのは@userにuserモデルのインスタンスを格納しているため

(参考)

|オプション|入力エリアのname属性|ストロングパラメータ|
|--|--|--|
|model: @user|name="user[email]"|params.require(:user).permit(:email)|


>https://applis.io/posts/rails-design-pattern-form-objects
データのプロパティへ動的にアクセスする方法(python,sqlalchemy)

pythonでsqlAlchemyを使ってデータを取得する時に、動的にプロパティへアクセスする方法がわからなかったので調べた方法を残しておきます。
※この記事はPyhtonのgetattr()に関する記事です。

## 経緯
今回の場合は、以下のようなクエリが２つあってなんとかして１つの関数としてまとめたいと考えていました。

```python
 q = db.query(Account.id, Account.name).filter(
     Account.status != 0,
     account["id"] == Building.account_id
 )
 db_accounts = q.all()

 q = db.query(Building.id, Building.name).filter(
     Building.status != 0,
     building["id"] == Floor.builing_id
 )
 db_buildings = q.all()
```

なので、とりあえず関数を１つ作ってみることにしました。

```python
    def get_related_data(model, parent_data, child_table_property):
        q = db.query(model.id, model.description).filter(
            model.status != 9,
            parent_data["id"] == model.child_table_property
        )
        return q.all()

  #関数の返り値をdb_biuldingsに代入
  db_buildings = get_related_data(BuildingModel, account, "account_id")
```

クエリの最後の行で、``model.child_table_property``と書けば今回の場合は``BuildingModel.account_id``となってクエリが正しく実行されると思ったのですが、child_table_propertyの部分は実際のプロパティ名を書かないといけないみたいで、うまくいきませんでした。

そこでparent_data["id"]にあるように文字列でプロパティを指定する方法を調べてみたところPyhtonの組み込み関数であるgetattr()メソッドに辿り着きました！

## getattr()

pythonのドキュメントには以下のように説明されています。
>getattr(object, name[, default])
>object の指名された属性の値を返します。 name は文字列でなくてはなりません。文字列がオブジェクトの属性の一つの名前であった場合、戻り値はその属性の値になります。例えば、 getattr(x, 'foobar') は x.foobar と等価です。指名された属性が存在しない場合、 default が与えられていればそれが返され、そうでない場合には AttributeError が送出されます。

[getattr() ドキュメント](https://docs.python.org/ja/3/library/functions.html#getattr)

ドキュメントに書いてある通りgetattrを使うことで、辞書型のようにプロパティ名を文字列でも指定できます。
なので、先程の関数を以下のように書き換えることでクエリの内容を動的に変更することに成功しました！

```python
    def get_related_data(model, parent_data, child_table_property):
　　　　　　 # getattrを使用して引数でモデルと属性名を渡すようにした
        child_table_value = getattr(model, child_table_property) 
        q = db.query(model.id, model.description).filter(
            model.status != 9,
            parent_data["id"] == child_table_value
        )
        return q.all()

  db_buildings = get_related_data(BuildingModel, account, "account_id")
```

こうすることで``child_table_value``は``BuildingModel["account_id"]``となり、値を取得できるようになりました。
加えて、渡す値を引数で変えることによってデータのプロパティへ動的にアクセスすることができるようになりました:relaxed:
rails 本番環境のcompileエラーについて。[ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.):]

##はじめに
この記事ではrailsの本番環境でのコンパイルエラーの解決方法と、開発環境と本番環境のコンパイルの違いについてまとめます。

##結論
```
ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.):
```
上記のエラーが出た際には、ターミナルから以下を実行する

```
① bundle exec rails assets:precompile RAILS_ENV=production
② export RAILS_SERVE_STATIC_FILES=true
③ サーバーを再起動
```

##解説
###①　bundle exec rails assets:precompile RAILS_ENV=production
上記のコマンドでプリコンパイが実行されます。
プリコンパイの流れは下記の通りとなっています。
1. 高級言語のコンパイル
2. 連結
3. 圧縮
4. publicディレクトリに配置


これだけだと私自身何のことか分からなかったので、上記に流れをもう少し丁寧に説明します。
1 app/assetsディレクトリ配下のscssなどの高級言語を、cssなどの言語に変換する。
2 変換したcssやjavascriptファイルを一つのファイルに連結する。
3 スペースや改行を削除し容量を減らす。
4 作成したファイルをpublic/assetsに配置する。

ではなぜこのような手順を踏まなければ本番環境でエラーが生じるのか。
#####それはwebブラウザには複数のファイルを連結して表示させる機能を持たないからです。
railsでは、cssやjavascript、画像ファイルはassetsディレクトリ配下にそれぞれ専用のディレクトリが配置され、その中に置かれます。
![スクリーンショット 2021-06-25 20.39.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1025549/bf7cd661-969c-a794-b16c-5199f349bfb8.png)

しかしそれはあくまで開発効率を上げる為であり、このままだとwebブラウザで表示させることができません。
なので上記のようにプリコンパイルを行うことによって、ブラウザ上で表示可能にさせることができます。

###②　export RAILS_SERVE_STATIC_FILES=true
このコマンドでは環境変数```RAILS_SERVE_STATIC_FILES```にtrueを入れることで、public配下のファイルを公開することができます。

```① bundle exec rails assets:precompile RAILS_ENV=production```を実行すると上述の通り、プリコンパイルが実行され、作成したファイル（プリコンパイル済ファイル）はpublic/assets以下に配置されます。
しかし本番環境ではデフォルトで、public配下のファイルが公開されない設定になっていることがある為、②によって公開し、公開したファイルをブラウザが読み込めるように設定します。

※production.rbに記載されています。

```config/environment/production.rb
 config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
```

###本番環境と開発環境のコンパイル方法の違いについて
上記のように本番環境では、コマンドによってプリコンパイルを実行するしました。
しかし開発環境では、なぜコマンドによってプリコマンドを実行しないのか。
それはwebpacker.ymlの設定によるものです。

```config/webpcker.yml
development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

```
webpacker.ymlを見るとdevelopmentとproductionでは```compile:```の設定が異なっています。
####```compile: true```にすると動的コンパイルが行われます。
動的コンパイルとは、public配下にコンパイル済ファイルが見つからない時、/assets配下のファイルを自動でコンパイルします。その為、開発環境では手動でコマンドを実行することなくコンパイルが行われます。
ですが、ユーザーがページにアクセス度にコンパイルが実行されればページの表示が遅くなります。
その為、本番環境では動的コンパイルが行わず手動でのプリコンパイルが推奨されます。

###最後に
本番環境へのデプロイは苦手意識がありましたが、仕組みを知ればそこまで難しいことではありません！
同じビギナーさんの参考になればと思います。
bundler 使い方

# 概要

- bundlerを使わない期間が長かったので使い方を忘れていた
- 初歩的なところを調べてまとめる

### 参考資料：[Bundlerの原理](https://ruby.studio-kingdom.com/bundler/guides/rationale)

# bundlerのワークフロー

### 1. .Gemfileを編集

以下参照

https://qiita.com/Islanders-Treasure0969/items/1bb18cda8e5cd6a771da

### 2. bundle install でGemfileに記載しているGemと、依存関係のあるGemをすべてインストール

```
$ bundle install
```

### 3. `.Gemfile`と`.Gemfile.lock`が衝突したとき

- 特定のgemと、それに関連するgemをupdateする
- これをするとgem名と依存関係にあるgemをアップデートする
- 動作確認は必要
- 間違えて`bundle update`しないように

実際に開発する際には、複数のgemのUpdateを一度にやるのはよくないと思う
一つの機能の開発を行うときに複数のgemを明示的にバージョンアップする必要がある場合

1. 一つのgemをアップデート
2. 動作が良好であれば一度コミット
3. また別のgemをアップデート
4. 再度コミット

という流れで行えば、不具合が起きたときに影響範囲を特定しやすいと感じた(特定のリビジョンに戻して動作確認を行うことができるため)

```
$ bundle update <gem名>
```

# その他のコマンド

### 1. bundle exec

- `.Gemfile`内のすべてのGemを利用可能にし、指定しているコマンドを実行する


## これ以降は必要になった際に随時調べる予定！
Alpine Linux 3.14 インストール、ja_JP.UTF-8 の作り方 (.mo, .po)

前回: [Alpine Linux 3.13 インストール、日本語入力 - Qiita](https://qiita.com/tukiyo3/items/4e4c9ec1ef0df82d3137)


## Download

* https://alpinelinux.org/downloads/

VirtuakBoxで動かすことにするので以下を選択した。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/67e9065f-0b05-1919-da91-328c3294e56a.png)

## DISKにインストール

* ISOから起動し、

```sh
setup-alpine
```

## DISKでブート後

* /etc/apk/repositories を編集

```diff:/etc/apk/repositories
  http://dl-cdn.alpinelinux.org/alpine/v3.14/main
- #http://dl-cdn.alpinelinux.org/alpine/v3.14/community
+ http://dl-cdn.alpinelinux.org/alpine/v3.14/community
```

```sh
apk update

apk list | grep パッケージ名
```

```sh
# usermod を使えるようにする。もしくは /etc/group を直接編集
apk add shadow
```

```sh
apk add virtualbox-guest-additions

# グループをvboxsf に追加する
usermod -aG vboxsf ユーザー名
```

```sh
apk add sudo

# グループをwheel に追加する
usermod -aG wheel ユーザー名
```

## メモ: インストールされたパッケージの内容を確認

```sh
# dpkg -L openssh
apk info -L openssh

# dpkg -l
apk info

# dpkg -S /bin/busybox
apk info -W /bin/busybox
```

## ja_JP.UTF-8 の作り方

### ビルド

* ビルドについて参考
    * https://grrr.tech/posts/2020/add-locales-to-alpine-linux-docker-image/

```sh:ビルド環境の用意
apk add cmake make musl-dev gcc gettext-dev libintl

wget https://gitlab.com/rilian-la-te/musl-locales/-/archive/master/musl-locales-master.zip
unzip musl-locales-master.zip

cd musl-locales-master
```

```sh:ひな形からコピー
# po/
cp -a po/nl_NL.po po/ja_JP.po
echo ja_JP >> po/LINGUAS

# musl-po/
cp -a musl-po/nl_NL.po musl-po/ja_JP.po
echo ja_JP >> musl-po/LOCALES
```

```sh
vim -p po/ja_JP.po musl-po/ja_JP.po
```

```sh
cmake -DLOCALE_PROFILE=OFF -D CMAKE_INSTALL_PREFIX:PATH=/usr .
make
make install
```

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/0bbbc888-5c60-4579-6b7e-2cb095839b87.png)

表示された

![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/a822d332-8250-dd4f-04a8-2c834b42223e.png)