OmniAICreator/Qiita-1.07M huggingface dataset:
[CSS]画像を背景にする(404)

# はじめに
本記事では、私が画像を背景にするために、体験したエラーと解決方法を記述します。
間違いがありましたらご指摘いただけますと幸いです。

# エラーの内容とコード
## エラーの内容

![画像表示されない　エラー　４０４.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1768158/c12b35c8-644d-1bbe-17fd-f4c5735e1ac5.png)

やや見づらいですが、
画像を表示させようとCSSファイルにて記述しましたが、
なかなか画像が表示されませんでした。

ステータスコードは`404（Not Found）`でした。
[ステータスコード一覧](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/400)

## コード

```main_menu.css
.menu-details {
  background-image: url("greenhot.png");    ←ここの部分！
  background-position: center;
  background-size: 100%;
  width: 50vw;
  height: 15vh;
  display: block;
  text-align: center;
  vertical-align: middle;
  padding: auto;
}
```

### 実施したこと
①`"greenhot.png"`→`"../images/greenhot.png"`
不正解

②`"greenhot.png"`→`絶対パス`
不正解

③`リセットCSS`を別のものに
不正解

④`url("greenhot.png")`→`image-url("greenhot.png")`
不正解

⑤なぜかbackground-colorはできる？
`background-image`→`background`
不正解

⑥`body要素`にbackground-image: url("greenhot.png");
不正解

⑦試しに他のCSSファイルで背景画像を設定できるか。
できない

⑧`"greenhot.png"`→`"images/greenhot.png"`
不正解


# 結論

```main_menu.scss
.menu-details {
  background-image: image-url("greenhot.png");　　　　　←ここの部分
  background-position: center;
  background-size: 100%;
  width: 50vw;
  height: 15vh;
  display: block;
  text-align: center;
  vertical-align: middle;
  padding: auto;
}
```

①`.css`→`.scss`

②`background-image: url("greenhot.png");`
→`background-image: image-url("greenhot.png");`

で画像が背景になりました。
8時間かかった末に、見ることができた背景は光り輝いて見えました。



# 終わりに
CSSとSCSSの違いについて、
言葉で説明しろと言われたら、正直微妙です。
SCSSだと、
・ネストができる
・記述がCSSより楽
・変数を使用できる。
・演算が使用できる。

などがあるようで、CSSよりも便利なイメージがあります。

以下が参考にした記事です。
[SCSS（SASS）とCSSの違いについて](https://blog.maromaro.co.jp/archives/8010)
[CSSとSCSSの違い](https://miiina01220.hatenablog.com/entry/2021/04/19/132527)

明日までデザイン性をあげるべくオリジナルアプリを進める予定です。
明日も頑張ります！！
pod 'Firebase/Firestore'インストール後のビルドが遅い場合の対処法（iOS）

## ビルドが遅い
Podfileに`pod 'FirebaseFirestore'`をインストールしてビルドするとビルド完了に時間がかかります。

## 対処法
結論

```swift 
pod 'FirebaseFirestore'
```
ではなく

```swift
pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :tag => '7.11.0'
```
とか書けば解決します。

## 理由
理由は[ドキュメント](https://github.com/invertase/firestore-ios-sdk-frameworks.git)に書いてありました。

>Why
Currently the Firestore iOS SDK depends on some 500k lines of mostly C++, which when compiling as part of your Xcode build takes a long time - even more so in CI environments.

翻訳すると

>現在、Firestore iOS SDKは、ほとんどがC ++の約500k行に依存しています。これは、Xcodeビルドの一部としてコンパイルする場合、長い時間がかかります。CI環境ではさらに時間がかかります。

ということになり、事前にコンパイルした結果を、githubから取得するようにすることで解決しているようです。

## お知らせ
現在、iOS開発案件を業務委託で募集中です（副業）。[Twitter DM](https://twitter.com/ken_sasaki2)でご依頼をお待ちしています。
Flutter Textの最大文字数を制限しつつ、改行して複数行で表示させる

#１行しか表示されない！！

https://qiita.com/tetsukick/items/9a6fd51a2b6b5e22c571

👆この記事では長いテキストを表示するとき、一定以上までいくと**「.....」**となるようにしている。

しかし！！！

```dart
child: Text(
            'インドは南アジア随一の面積（世界では7位）と世界第2位の人口を持つ国である。13億人を超える国民は、多様な民族、言語、宗教によって構成されている。総人口は2020年代に中華人民共和国を抜いて世界最大になると国際連合により予測されている'
           overflow: TextOverflow.ellipsis,
            ),
```

こうすると１行目しか表示されなくて、**もっと折り返して数行は表示させたい:expressionless:**

![スクリーンショット 2021-08-23 21.23.17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/d436cb27-7f25-211a-853f-9f3b514b5cfb.jpeg)

#最大行数を指定すれば解決！！

```dart
child: Text(
            'インドは南アジア随一の面積（世界では7位）と世界第2位の人口を持つ国である。13億人を超える国民は、多様な民族、言語、宗教によって構成されている。総人口は2020年代に中華人民共和国を抜いて世界最大になると国際連合により予測されている'
           overflow: TextOverflow.ellipsis,
           maxLines: 4, // 追加！
            ),
```

![スクリーンショット 2021-08-23 21.15.42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/77e9d87a-0dc5-1b18-0067-2f3cafdba945.jpeg)

これで４行目まで表示させつつ、それを超えた分はと**「.....」**となるようにできました:laughing:
C++11, C++14 でも std::visit でパターンマッチングしたいメモ

## 背景

`std::visit` + overloaded(パターンマッチング)便利ですよね.

https://en.cppreference.com/w/cpp/utility/variant/visit

C++11, C++14 でもやりたいですね!

C++14 以下で `std::variant` の実装は variant-lite があります.

https://qiita.com/syoyo/items/69fac2038e8d487e1a70

overloaded テンプレートについては, `using Ts::operator()...;` は C++17 の構文なので,  C++11, C++14 でやるとコンパイルエラーになります.

http://martinecker.com/martincodes/lambda-expression-overloading/

で C++11, C++14 でやる方法ありました!

## 例

```
template <class... Fs> struct overload_set;

template <class F1, class... Fs>
struct overload_set<F1, Fs...> : F1, overload_set<Fs...>::type
{
    typedef overload_set type;

    overload_set(F1 head, Fs... tail)
        : F1(head), overload_set<Fs...>::type(tail...)
    {}

    using F1::operator();
    using overload_set<Fs...>::type::operator();
};

template <class F>
struct overload_set<F> : F
{
    typedef F type;
    using F::operator();
};

template <class... Fs>
//auto overload(Fs... x) for C++14
typename overload_set<Fs...>::type overload(Fs... x)
{
    return overload_set<Fs...>(x...);
}

nonstd::variant<int, float, std::string> Var;

Var v = 2;

std::string ty =  nonstd::visit(overload (
          [](auto) { return "[[TODO]]"; },
          [](int) { return "int"; }
), v);

std::cout << ty;

```

Voila!

C++11 だと取り得る型は全部記述する必要がありますのでちょっとめんどいです.

C++14 だと, マッチしなかったのは auto にしたのに fallback してくれます(ただし, float -> double などの implicit cast に注意! )

## その他

mapbox variant では `.match` があります.

https://github.com/mapbox/variant

ただインターフェイスが `std::variant` とは異るので使いづらいときもあります.
(将来的に C++17 に移行するときに書き直しが必要)

## 問題

やっぱりそこそこコンパイルに時間かかるようになってしまいます...

## TODO

* [ ] C++14 にもなると `auto` とか `...` の嵐でテンプレートの仕組みがよくわからなくなりつらい(デバッグがめんどい)ので理解する
JavaScript 要素をマウスやタッチ操作で回転

PC/タッチデバイス両対応の回転操作のサンプル

![ss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618708/8d87f24f-df31-84b1-15d0-b9010f7be1cc.jpeg)

**[動作デモ](https://akebi.jp/temp/dialRotate.html)**

----

```html:
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<title>要素の回転操作サンプル</title>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<style>
.wheel {
  position: absolute;
  border: 3px #fff double;
  border-radius: 50%;
  cursor: pointer;
  background-image: repeating-conic-gradient(#fffe, #888e 60deg, #fffe 180deg);
  user-select: none;
  box-sizing: border-box;
}
</style>
</head>
<body>

<script>
'use strict';
{
  // タッチデバイスか否かでイベント名振り分け
  const isTouchDevice = window.ontouchstart !== undefined;
  const ev = {
    down: isTouchDevice ? 'touchstart' : 'mousedown',
    move: isTouchDevice ? 'touchmove'  : 'mousemove',
    up  : isTouchDevice ? 'touchend'   : 'mouseup',
  };

  // 操作時の各値保持用オブジェクト
  const p = {};

  // 要素生成
  const body = document.querySelector('body');
  for(let i = 0; i < 30; i++) {
    body.insertAdjacentHTML('beforeend', "<div class='wheel'></div>");
    const e = body.lastChild;
    e.style.width = e.style.height = `${Math.floor(50 + Math.random() * 150)}px`;
    e.style.left = `${Math.random() * (window.innerWidth * 1.5 - e.clientWidth)}px`;
    e.style.top = `${Math.random() * (window.innerHeight * 1.5 - e.clientHeight)}px`;
    e.style.backgroundColor = `hsl(${Math.random() * 360}deg, 40%, 50%)`;

    // タッチデバイスで操作時のスクロール抑制
    if(isTouchDevice) {
      e.addEventListener('touchmove', e => e.preventDefault());
    }
  }

  // マウスボタンorタッチディスプレイ押下
  window.addEventListener(ev.down, e => {
    // 対象要素でなければreturn
    if(!e.target.classList.contains('wheel')) {
      return;
    }
    p.target = e.target;
    const e_ = isTouchDevice ? e.touches[0] : e;

    // 押下開始時の要素の角度
    p.startDeg = + p.target.style.transform.replace(/[^\d.-]/g, '');

    // 要素の中心座標
    p.cx = p.target.offsetLeft + p.target.offsetWidth / 2;
    p.cy = p.target.offsetTop + p.target.offsetHeight / 2;

    // 中心座標に対するクリック位置の角度
    // (0時位置を0°、6時位置へ向かって時計回りに ～+180°、反時計回りに ～-180°)
    p.clickDeg = Math.atan2(e_.pageX - p.cx, p.cy - e_.pageY) * 180 / Math.PI;
  });

  // 回転操作
  window.addEventListener(ev.move, e => {
    if(!p.target) {
      return;
    }
    const e_ = isTouchDevice ? e.touches[0] : e;

    // 要素の元の角度と初期押下位置角度を加味した操作後の角度 (0～360°)
    const d = (Math.atan2(e_.pageX - p.cx, p.cy - e_.pageY) * 180 / Math.PI
               + p.startDeg - p.clickDeg + 360) % 360;

    // 要素に角度を反映
    p.target.style.transform = `rotate(${d}deg)`;
  });

  // 開放
  window.addEventListener(ev.up, () => delete p.target);
}
</script>
</body>
```

これまで回転操作系のUIをいくつか作成していますが、回転操作で行なっている処理は設定の細かな差こそありますが基本はどれもだいたい同じです。

**[カラーピッカー](https://qiita.com/akebi_mh/items/3fba059989b460eb997d)**
**[ジョグシャトル型回転UI](https://qiita.com/akebi_mh/items/ebf6cc58ec5fa2427ac7)**
**[タイムピッカー](https://qiita.com/akebi_mh/items/662da8061f588d0afe38)**

----
Powershellでclassを使う方法

Powershellでクラスを定義する方法です。
久しぶりの投稿です



```Powershell

#### クラスとデータ型の定義
class Test {
      [string]$Brand
      [string]$nogizaka
}

#オブジェクトを変数に定義する
$dev = [Test]::new()
#変数に文字列を代入
$dev.Brand = "Amazon"
$dev.nogizaka = "乃木坂46"
#classの中の変数を呼び出す
$dev
```
setup nuxt (TypeScript)

```
$ npm init nuxt-app myproject

create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in myproject
? Project name: myproject
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA), Content - Git-based headless CMS
? Linting tools: ESLint, Prettier, Lint staged files, StyleLint
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git
```

```
$ cat nuxt.config.js
...
  build: {
    babel: {
      babelrc: true,
    }
  }
...
```

```
$ cat package.json
...
  "scripts": {
...
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:js:fix": "eslint --ext \".js,.vue\" --ignore-path .gitignore . --fix",
    "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
    "lint:style:fix": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore --fix",
    "prepare": "husky install",
    "lint": "npm run lint:js && npm run lint:style",
    "lint:fix": "npm run lint:js:fix && npm run lint:style:fix",
    "test": "jest"
  },
...
```

```
$ npm install --save-dev eslint-plugin-prettier
$ npm install --save-dev @vue/eslint-config-prettier
```

```
$ rm .prettierrc
$ cat .eslintrc.js
...
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'plugin:vue/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  plugins: [],
  // add your custom rules here
  rules: {
    'no-console': 'error',
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: false,
      },
    ],
  },
...
```

```
$ npm run lint
$ npm run lint:fix
```

```
$ npm run test
$ npm run dev
$ npm run build
$ npm run start
```
LinuxにApacheを導入してテストページを表示する 

## ポイント
* 最新のApacheをインストール
* ファイアウォール80番ポートの開放

## Apacheをデフォルトのバージョンから最新に更新する。
||OS|Apache|
|----|----|----|
|デフォルト|Ubuntu 20.04 LTS|2.4.41|
|更新後||2.4.48|


```:Apacheのバージョン確認
sudo apt show apache2
# デフォルトと更新後2回確認すること。
```
メモ：apache2はubuntu , httpdはcentOS

```:インストール対象を更新
sudo add-apt-repository ppa:ondrej/apache2
```
```:パッケージリストの更新
sudo apt-get update
```
```:apacheのインストール
sudo apt-get install apache2
```
```:apacheの動作確認
sudo systemctl status apache2
# Active: active (running) since ～ならApache起動OK
#「q」で終了
```

```:ファイアウォールの80番ポートを開放する
sudo ufw allow 80
```
```:ポート確認
sudo ufw status
```
```:ufw再読み込み　
sudo ufw reload
```
```:自分のVPSのグローバルIPアドレス確認
hostname -I
# もしくは
curl -4 icanhazip.com
```
```:ブラウザでApacheテストページ画面確認
#自分のVPSのグローバルIPアドレスを入力
http://123.456.789/ 
```

## 【注意】パケットフィルタ
サクラのVPSの場合はLinuxのファイアウォールとは別でパケットフィルタ（グローバルネットワーク＞パケットフィルタを設定）という機能が二重で存在するため、それを「利用しない」にするか、接続可能ポートに80番を追加しなければいけない。
→ブラウザからのHTTPリクエストがサーバーに到達しない。

## apache2.conf と https.conf
Red Hat系とDabianのApache2の設定ファイル構成が異なるので注意。

|項目|説明|備考|
|----|----|----|
|apache2.conf|Debian|/etc/httpd/conf/httpd.conf|
|httpd.conf|Red Hat系|/etc/apache2/apache2.conf|

http://www.linux.net-japan.info/install08.html

## ドキュメントルート
```/etc/apache2/apache2.conf
<Directory /var/www/>
	Options Indexes FollowSymLinks
	AllowOverride None
	Require all granted
</Directory>
```
```/etc/apache2/sites-available/000-default.conf
	DocumentRoot /var/www/html
```
ディレクトリの変更も可能

https://qiita.com/bluesDD/items/3cf77298ece0c83e9968
【18章】Javaを学ぼう

今回の記事はオブジェクト指向の重要な機能の１つである、カプセル化によってフィールドとメソッドへのアクセスを制限することを学んでいきたいと思います。「【15章】Javaを学ぼう」から今回まで改善を重ねてきた自己紹介プログラムを今回も使用していきます。私自身のアウトプットの場となりますので、よろしくお願いいたします。

#カプセル化について
**「カプセル化」**とは、使い手に必要ないものを隠してしまうことを言います。具体的には**フィールドとメソッドへのアクセスを制限すること**です。クラスの外部からアクセスできるようにするには**「public」**を、アクセスできないようにするには**「private」**を用いて定義します。

```java:Person.java
class Person {
   .
   .
 private String middleName;  
   .
   .
   .

 public String fullName() {
  if(this.middleName == null) {
     //クラス内からはアクセスできる
   .
   .
   .
  }
 } 
}
```

上図のようにprivateでも、クラス内からはアクセスすることが可能ですが、一方で下図のようにフィールドにクラスの外からアクセスすることができなくなります。

```java:Main.java
class Main {
 public static void main(String[] args) {
  Person person = new Person("Mia", "Christopher", "Olivia",......);
  System.out.println(person.middleName);
                     //クラス外からはアクセスできない
 }
}
```

##ゲッターについて
フィールドをprivateにした上で、クラス外から安全にフィールドの値を取得するために、フィールドの値を返すだけのメソッドを定義します。これを**ゲッター**と呼びます。
ゲッターは**「getフィールド名」**のように命名するのが一般的です。

```java:Person.java
class Person {
   .
   .
 private String middleName;  
   .
   .
   .

 public String getMiddleName() {
  return this.middleName;
        //フィールドの値を返す
 } 
}
```

```java:Main.java
class Main {
 public static void main(String[] args) {
  Person person = new Person("Mia", "Christopher", "Olivia",......);
  System.out.println(person.getMiddleName());
                     //ゲッターを使うことによりアクセス可能に
 }
}
```

これでクラス外からでもアクセスすることが可能になりました。

##セッターについて
フィールドのアクセス権をprivateにすると、当然フィールドの値をクラスの外から変更することもできなくなります。そこで、フィールドの値を変更するメソッドを定義します。
このような、フィールドの値を変更するメソッドを特に**「セッター」**といいます。セッターは**「setフィールド名」**のように命名するのが一般的です。

```java:Person.java
class Person {
   .
   .
 private String middleName;  
   .
   .
   .

 public void setMiddleName(String middleName) {
  this.middleName = middleName;
        //フィールドに値をセット
 } 
}
```

```java:Main.java
class Main {
 public static void main(String[] args) {
  Person person = new Person("Mia", "Christopher", "Olivia",......);
  Person.setMiddleName("Charlotte");
  System.out.println(person.getMiddleName());
 }
}
```

これでクラスの外から変更することができました。

今回の記事はここまでとします。これでひとまず自己紹介プログラムは完成しました。
次章では「オブジェクト指向」についてさらに基礎を定着させるための記事を書いていきます。よろしくお願いいたします！
最後までご覧いただき、ありがとうございました！
素数の逆数の和の下からの評価

この記事では 以下を示します.
下で$p$は$n$以下の素数全体を走ります.

$$
\sum_{p \le n} \frac1{p} > \log \log (n+1) - \log 2.
$$

この記事はほぼ[WikipediaのProof that the series exhibits log-log growthの項](https://en.wikipedia.org/wiki/Divergence_of_the_sum_of_the_reciprocals_of_the_primes#Proof_that_the_series_exhibits_log-log_growth)のコピーです.

__証明__
証明は5つのステップに分かれています.

Step 1)
$$
\sum_{i=1}^n \frac1{i} \le (\prod_{p\le n} (1 + \frac1{p})) \times (\sum_{k=1}^n\frac1{k^2})
$$
が成り立つこと. ここで, 右辺の$p$は$n$以下の素数全体を走る.

実際, 自然数$i$は互いに相違なる素数$q_1, q_2, \ldots, q_l$及び自然数$k$を用いて 一意的に

$$
i = q_1q_2 \cdots q_l \times k^2
$$

と表すことができる.
ここで $1/i$の項は

$$
(1 + \frac1{q_1}) (1 + \frac1{q_2}) \cdots (1 + \frac1{q_l}) \times \frac1{k^2}
$$

に現れる.

Step 2)

$$
\log(n+1) < \sum_{i=1}^n \frac1{i}
$$

が成り立つこと.

実際

``` math
\begin{align*}
\log(n+1)
&= \int_1^{n+1} \frac1{x}dx \\
&= \sum_{i=1}^n \int_i^{i+1} \frac1{x} dx \\
&< \sum_{i=1}^n \frac1{i}.
\end{align*}
```

Step3)
$$
\sum_{k=1}^n \frac1{k^2}
$$
は収束し, その収束値は2以下である.

実際

```math
\begin{align*}
\sum_{k=1}^n \frac1{k^2}
&= \frac1{1^2} + \frac1{2^2} + \frac1{3^2} + \cdots + \frac1{n^2} \\
& \le \frac1{1^2} + \frac1{2(2-1)} + \frac1{3(3-2)} + \cdots + \frac1{n(n-1)} \\
&= 1 + \sum_{k=2}^n \frac1{k(k-1)} \\
&= 1 + \sum_{k=2}^n (\frac1{k-1} - \frac1{k}) \\
&= 2 - \frac1{n} < 2.
\end{align*}
```

よって

$$
\sum_{k=1}^n \frac1{k^2}
$$

は単調増加かつ上に有界なので収束し, その値は2以下である.

Step 4)

$$
1 + x < \exp (x) \\ \\ (x > 0)
$$

が成り立つこと.

$f(x) = \exp(x) - (1 + x)$とおくと

$$
f^\prime(x) = \exp(x) - 1 > 0 \\ \\ (x > 0)
$$

なので $f$は単調増加である.
よって

$$
f(x) > f(0) = 0 \\ \\ (x > 0).
$$

Step 5) 以上を用いて

```math
\begin{align*}
\log(n+1)
&< \sum_{i=1}^n \frac1{i} \\
&\le (\prod_{p\le n} (1 + \frac1{p})) \times (\sum_{k=1}^n \frac1{k^2}) \\
&< 2\prod_{p \le n} \exp(\frac1{p}) \\
&= 2\exp(\sum_{p\le n} \frac1{p}).
\end{align*}
```

以上によって,

```math
\begin{align*}
\sum_{p \le n} \frac1{p} > \log\log(n+1) - \log 2
\end{align*}
```

が示された.

#### 補足

$$\sum_{k=1}^\infty \frac1{k^2}$$

の値を求める問題はバーゼル問題と呼ばれている.
現在ではその値は

$$
\sum_{k=1}^\infty \frac1{k^2} = \frac{\pi^2}{6}
$$

であることが知られている.

この値を使うと, 上と同様に


```math
\begin{align*}
\sum_{p \le n} \frac1{p} > \log\log(n+1) - \log \frac{\pi^2}{6}
\end{align*}
```

を示すことができる.
pythonでgoogle検索結果をスクレイピング 

pythonでgoogle検索結果をスクレイピングするときのメモです。

参照したHP
https://stackoverflow.com/questions/33587097/soup-select-r-a-in-https-www-google-com-q-vigilantemic-gives-empty-lis

【動作環境】
windows10 
Spyder 4.2.5  (Anaconda) 

【プログラム概要】
特定のキーワードにおけるgoogle検索結果のリンクアドレスを取得

```py
import requests, lxml, webbrowser  
from bs4 import BeautifulSoup

headers = {
    "User-Agent":
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3538.102 Safari/537.36 Edge/18.19582"
}

params = {'q': 'cyber security'}    #search keyword in this case "cyber security"

html = requests.get('https://www.google.com/search', headers=headers, params=params).text
soup = BeautifulSoup(html, 'lxml')

# container with all needed data
for result in soup.select('.tF2Cxc'):
  link = result.select_one('.yuRUbf a')['href']
  print(link)
```

実行結果は次のようになり、キーワードの検索結果のそれぞれのHPリンクが取得できています。

```
https://ja.wikipedia.org/wiki/%E3%82%B5%E3%82%A4%E3%83%90%E3%83%BC%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3
https://cybersecurity-jp.com/
https://www.cscloud.co.jp/
https://eow.alc.co.jp/search?q=cybersecurity
https://www.nisc.go.jp/
https://www.events.great.gov.uk/ehome/innovation-jpn/cyber-security/
https://ejje.weblio.jp/content/cybersecurity
https://ejje.weblio.jp/content/cyber+security
https://jpn.nec.com/ncsp/index.html
https://argus-sec.com/ja/
```


（解説）
params = {'q': 'cyber security'} の部分が検索キーワードになります。
今回は "cyber security"　です。
変更したい場合はこの部分を変更してください。

select('.tF2Cxc')
select_one('.yuRUbf a')['href']
については、".tF2Cxc"は検索結果情報、".yuRUbf a"はリンク情報になります。

参考リンク）https://practicaldatascience.co.uk/data-science/how-to-scrape-google-search-results-using-python
Google Colabでrdkitをimportしたい



#背景
anacondaが会社で使えなくなったのでgoogle colabでrdkitをやりたいのに、 
!conda install rdkit がうまくいかなかったので調べてみた。
日本語で解決法自体をメインに取り扱う記事が少ないので一例を記載する。もし皆ご存じなら申し訳ない、、、

#コード
```python:rdkit_starter
from google.colab import output

!pip install -q condacolab
import condacolab
condacolab.install()
!conda install -q -y -c conda-forge rdkit

output.clear()
```

「セッションがクラッシュしました」と出ますがおそらく問題なく続けられます。
複数CSVを結合するワンライナー

別にCSVじゃなくても使える(ヘッダー処理部とか消して)

* ヘッダーをつけるために初手に1行目を出力(`head -n 1 > result`)
* 1行目飛ばしで出力(`sed -e '1d' {}`)
* 末尾に改行が無いパターンもあるのでパイプでawkをかます(`| awk 1`)

```sh:
cat *.csv | head -n 1 > result && find . -name "*.csv" -exec sh -c "sed -e '1d' {} | awk 1 >> result" \;
```

注意として`result.csv`に出力すると無限ループして巨大な化け物を製造しつつ固まる(一敗)
ローカルサーバーを強制終了させる方法。（windows）

#成り行き
テキストエディタatomのパッケージ「atiom-live-server」を利用して、
ローカルサーバーを立ち上げた後、atomを終了すると、
ローカルサーバーが閉じられておらずパニクった。
そのため、同じことが起きたときのために、
自分用の備忘録として強制終了法を記しておこうと思う。

---

#閉じ方
これは至って簡単。

1.**`windows+R`**で「**`ファイル名を指定して実行`**」なるものを開く。


2.**`名前:`**の部分に「**`cmd`**」と入力し、みんな大好き「**`コマンドプロンプト`**」
を開く。


3.「**`netstat -aon | findstr :<ポート番号>`**」と入力＋実行。

```:コマンドプロンプト
C:\Users\...>netstat -aon | findstr :<ポート番号>
  TCP   0.0.0.0:<ポート番号>   0.0.0.0:0   LISTENING   <プロセスID>

        ↑　[「0.0.0.0」じゃない場合もある]
```
ここで「**`プロセスID`**」をしっかり確認してください。


4.「**`taskkill /f /pid <プロセスID>`**」と入力＋実行。すると、

```:コマンドプロンプト
C:\Users\...>taskkill /f /pid <プロセスID>
成功: PID 19592 のプロセスは強制終了されました。
```
となり、無事、ローカルサーバーを閉じることができます。
**お疲れ様でした。**

参考にさせてもらったサイト：

https://www.it-mure.jp.net/ja/windows/%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%9B%E3%82%B9%E3%83%88%E3%82%92%E6%AE%BA%E3%81%99%E6%96%B9%E6%B3%95%EF%BC%9A8080/944543185/amp/

-----
情報セキュリティ用語解説①

#情報セキュリティ用語解説①

***
##情報セキュリティとは
- 「情報の**機密性**、**完全性**及び**可用性**を維持すること。さらに,**真正性**、**責任追跡性**、**否認防止**、**信頼性**などの特性を維持することを含めることもある」(JIS Q 27000ファミリー参照)
- 簡潔に言うと企業/組織の資産である情報(情報資産)のセキュリティを確保し維持すること
- 機密性(**C**onfidentiality)、完全性(**I**ntegrity)、可用性(**A**vailability)は英単語の頭文字からCIAと呼ばれる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508643/48c55a99-bce1-bb37-cfb7-156dcd173355.png)

***
##機密性とは
- 権限者/無権限者を明確に区別し、情報資産へのアクセス権を持った人だけが使用できるようにする

![Untitled Diagram.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508643/c44b1cf4-2120-7391-e9d2-e87937236877.jpeg)

##機密性が損なわれると...
- 情報漏洩、情報不正利用(クレカ等)、データ改ざん・削除による完全性の損失、信頼性の欠落が起きる

##対策
- アクセス制御、認証の実施
- コンピュータ内で実行されるプログラムやコマンドなども属性を決め、適切に実行されるよう制御が必要
- パスワードなども安易なものにせず、メモなどできる限り残さない

##機密性が必要な情報
- 個人情報、顧客情報、開発情報等

***
##完全性とは
- データの正当性・正確性・網羅性・一貫性を維持する特性
- 何かしらのデータ処理(入力や編集・削除・保存等)において欠落や重複、改ざんなどのトラブルが発生せずに正しく処理されること

![Untitled Diagram-Page-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508643/bdb77cb3-9e1f-0bb6-a072-8ffd229ebfbd.jpeg)

##完全性が損なわれると...
- 処理結果に矛盾や異常が発生し、システムとして成り立たなくなる
- IoTが普及する現在では、コネクテッドカーや医療機器など人命にかかわる可能性もある

##対策
- データ暗号化、ログ取得、バックアップの実施

***
##可用性とは
- システムが必要な際、いつでも正常なサービスを提供できる状態を維持する特性
- いくら機密性や完全性が保たれていても頻繁にシステムダウンやレスポンスが恒常的に遅いなどがあるような場合は可用性が低いといえる

![Untitled Diagram-Page-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508643/7567f562-fc6a-239e-3ffb-2afd2445c390.jpeg)


##可用性が損なわれると...
- 顧客の信頼損失や機会損失、作業効率の低下に繋がる

##対策
- ネットワーク/設備の二重化、システムリソースの十分な確保、バックアップ、定期保守、UPS等
- 予備設備に対してもセキュリティ対策を怠らない必要がある

***
##真正性とは
- 利用者、システム、情報などが「正しい」ことを確実にする特性
- 例えば、なりすましなどがないように通信相手が本人であることを証明

##真正性が損なわれると...
- 本人である確証が得られず、なりすましが行われる可能性がある
- 人だけでなくウェブサイトなどでも正しさが証明できず、悪意あるサイトの可能性がある

##対策
- 認証、デジタル署名
- 認証であれば、多段階認証よりも多要素認証が有効
- セキュリティキーの紛失などに気を付ける必要がある

***
##責任追跡性とは
- 利用者とシステムなどの動作について、一意に追跡できることを確実にする特性
- システムやデータへの脅威が何であるか、どのような行為が原因なのかを追跡する

##責任追跡性が損なわれると...
- インシデント発覚時に原因/発生者等が分からない

##対策
- 情報資産の取扱記録や入退室記録、システムへのアクセス状況や動作状況のログ管理
- 利用者等を一意に識別できる仕組みが必要

***
##否認防止とは
- 事象発生後に事象発生者が否認できないよう証明する特性
- 真正性、責任追跡性を確保することと証拠の完全性を確保する必要がある

##否認防止が損なわれると...
- 特定の対象者が行ったことと証明することができなくなる

##対策
- デジタル署名、タイムスタンプ
- 上記の完全性を保つ必要がある

***
##信頼性とは
- データやシステムの利用動作が意図通りの結果であることを証明する特性

##信頼性が損なわれると...
- 意図しない処理実行や脆弱性をついた攻撃を受ける可能性がある

##対策
- 信頼性の高い機器や部品を用いてシステム構築を行い、保守点検を確実に行う
- テスト強化などによってバグや脆弱性を発見し迅速に対応することも重要
- 設計大事

***
##まとめ

***
- 情報セキュリティで大切なことは、**情報の価値や性質、利用者ニーズを理解すること**
- それに応じた**それぞれの特性を適切なレベルで確保・維持すること**である
- 例：機密情報であれば可用性を犠牲にしても高い機密性を確保することが必要な場合があるなど
[小ネタ] encodeURI と encodeURIComponent の違い

## encodeURI / encodeURIComponent のエスケープ対象外

encodeURI は以下の文字がエスケープの**対象外**になります。

```
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
```

次に、encodeURIComponent は以下が**対象外**です。

```
A-Z a-z 0-9 - _ . ! ~ * ' ( )
```

## 紛らわしい

encodeURI と encodeURIComponent はどちらも正しいURI文字列を生成するためにエスケープ処理を行うという点で共通しています。

また、エスケープする対象の文字が違うということもドキュメントを当たれば確認できます。

ほぼ同じ処理を行うだけにユースケースが重なってしまっていて、いまいち正しい使い方がわかりません。

## 正しい使い方

encodeURI でエスケープ対象外になっている文字は簡単にいうと `URI schemes` （[https://en.wikipedia.org/wiki/List_of_URI_schemes](https://en.wikipedia.org/wiki/List_of_URI_schemes)）で使われている記号です。

そのため、以下の文字がエスケープの対象から除外されています。

https`://`example.com`?`hello`=`foo`&`world`=`bar`#`baz

encodeURIComponent はこのようなhttpを含む `URI schemes` で使われる記号も含めてURIのどこに含めても問題が起きない文字のみを除外してエスケープします。

したがって、URLの **クエリ文字列 に指定するような文字列をエスケープしたい場合には encodeURIComponent** を使います。

encodeURI を使うのは、クエリ文字列に事前に指定したURLのUTF-8文字をエスケープしたい場合に限定されます。

encodeURI を使うとOAuthの実装などで、コールバックURLをクエリ文字列に指定するとき不正なURLとなりエラーとなってしまいます。

```jsx
// encodeURI だとエスケープされない
encodeURI("https://example.com?callback=https://example.com/auth/callback")
// => https://example.com?callback=https://example.com/auth/callback

// encodeURIComponent では URI schemes の文字までエスケープされる
const callbackURL = "https://example.com/auth/callback"
`https://example.com?callback=${encodeURIComponent(callbackURL)}`
// => https://example.com?callback=https%3A%2F%2Fexample.com%2Fauth%2Fcallback
```

ユースケースとしては、特定のクエリ文字列を指定する時にエスケープするのが通常だと思うので **encodeURIComponent を使っておけば問題ない**です。

## 結論

クエリ文字列では encodeURIComponent を使っとけばよろしい！

## 参考

[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)

[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)

[https://en.wikipedia.org/wiki/List_of_URI_schemes](https://en.wikipedia.org/wiki/List_of_URI_schemes)
PowerAutomateの "表内に存在する行を一覧表示" には上限がある

Office365（Microsoft365）で、ユーザーオペやスケジュールをトリガーに自動起動する連携処理を実装するのに便利なPowerAutomateですが、実際に業務の中で使おうとするといろいろな制約があります。
そのような制約を克服するため思いついたり調べたりした内容をご紹介していこうと考えています。

# Problem

Power Automateのクラウドフローで、Excelファイル内の表（テーブル）からレコードを読み取るために使用するアクションが 「表内に存在する行を一覧表示」（List rows present in a table） 。
このアクションで取得できる行数には上限があります。

こちらの設定項目のことではありません。この項目でも「上限」を設定できますが、この項目に何も入力していない、つまり「既定値＝すべて」の状態であっても、上限は存在します：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/d4807955-e839-01a5-0374-4f80c77bb842.png)

試みに、以下のように淡々と数字（1～1000くらい）が並ぶ表を準備して、「表内に存在する行を一覧表示」で読み取ってみます：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/a269a6df-1855-f83f-120f-cef243e3fe8e.png)

そして、結果のJSONを見てみると：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/1a8c592d-bb4f-3cdd-b287-23a508067090.png)

──この通り、256件が上限となっています。

# Solution

根本的な対策としては、取得するデータを少なくするために「フィルタークエリ」を指定したり、「スキップ数」を指定したりする方法を検討すべきでしょう。あるいは定期的に処理済みのデータを別の場所に退避したり削除したりして、読み取り対象の表のデータを一定件数に抑えておくというのも選択肢に入るかもしれません。

暫定的な対策としては、「設定」画面で「改ページ」をONにして「しきい値」を設定することになります：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/79b91cd7-1fce-d7e0-21c1-4bdfcb98b43f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/27fef37e-ac14-644a-bdf1-bf7f50451eff.png)

──この変更をして「完了」をクリックすれば、256件より多く（しきい値以下）データが取得できるようになります。
JavaScriptのコメントは4種類ある

JavaScriptのコメントは`//`と`/* */`の2種類である、というのはよく知られた話です。

嘘です。

4種類あります。


# `//`

1行コメントです。

```js
let a = 1; // ここから行末までコメント
```

誰もが使ったことやるやつですね。
`//`から行末までがコメントになります。

おそらく、最もよく使われているコメントだと思います。


# `/* */`

複数行コメントです。

```js
/*
	コメント
	終了まで全てコメント
*/
```

こちらもよく使いますね。

```js
/*
	/*
		コメントのネストはできない
	*/ ←ここがコメントの終わりなのでシンタックスエラーになる
*/
```


# `<!-- -->`

実は`<!-- -->`という形のコメントも許可されています。

これは[ES2015で追加されたHTML-like Comments](https://262.ecma-international.org/6.0/#sec-html-like-comments)というものです。
見てわかるとおりHTMLのコメント形式です。

```js
let a = <!-- ここはコメント
1
--> ここもコメント
```

`a=1`になります。

開始タグは行の途中にも書けますが、終了タグは先頭(スペースは可)にしか置けません。
開始タグの後ろにある文字列と、あと終了タグの後ろの文字列も何故かコメント扱いになります。
その間にある行はコメントではなく、有効なJavaScriptとして解釈されます。

どうしてこんな仕様が存在するのかというと、歴史的理由というやつです。

いにしえのJavaScriptは、JavaScript非対応ブラウザでコードが画面に表示されてしまわないように、このように書かれていました。

```js
<script language="javascript">
<!--
  var a = 1;
-->
</script>
```

これが動くようにするために必要な仕様として、この形式のコメントは昔から実装されていました。
つまり、ES2015で初めて追加されたコメント形式というわけではなく、昔からの実装に仕様を合わせたということですね。
従って、この形式のコメントは規定されてこそいるものの、使用しないことが推奨されています。

実は`<!--`と`-->`はセットで使う必要はなく、それぞれ単独でも使うことができます。

```js:これも有効なJavaScript
a=1;

--> ここはコメント

--> ここもコメント
```

どんな意味があるのかはわかりません。

# `#!`

Nodeのスクリプトは、先頭に`#! /usr/bin/env node`みたいなのが入っていることがあります。
これはNodeでは有効な形式なのですが、普通のJavaScriptでは動きません。
なので同じスクリプトを使い回したいときとかに困るわけです。

そんなわけで、ファイルの先頭にある`#!`のみコメント行として扱う、という[プロポーザル](https://github.com/tc39/proposal-hashbang)が提出されています。
プロポーザル自体はStage3で止まっているのですが、実装は進んでいて[既に有名ブラウザでは全て使用可能](https://caniuse.com/?search=hashbang)です。
これによってファイルの使い回しが楽になります。

コメント扱いされるのは先頭行の先頭のみで、それ以外の行や、コードの途中などに`#!`と書いてもコメント扱いされることはありません。

Linuxなどでは[shebang](https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%90%E3%83%B3_(Unix))と呼ばれていますが、JSでは`#`は`she`じゃなくて`hash`って呼ぶから`shebang`じゃなくて`hashbang`だよ、だそうです。



# まとめ

5種類目があったらどうしよう。
iPhoneからUbunntuへテザリングする

# はじめに
iPhoneからUbunntuへ、テザリング出来る様になるまでのメモ。

#最終更新日
2021年8月24日

# 環境の情報
OS
ubuntu 20.04
iPhone7 iOS14.7.1

# 経緯

最近外でpc触ることが増えたけど
田舎だからカッフェが空いててもWi-Fiが飛んでねえ。飛んでるのは虫だけだ。（うるさいな）
詰みだ(´･ω･`)


そうだ！スマホのギガが余っているから
テザリングすればいいのでは！（気付くのが遅い）


# 実際に


```
$ sudo apt install libimobiledevice6
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
libimobiledevice6 はすでに最新バージョン (1.2.1~git20191129.9f79242-1build1) です。
libimobiledevice6 は手動でインストールしたと設定されました。
以下のパッケージが自動でインストールされましたが、もう必要とされていません:
  apache2-data apache2-utils gconf-service gconf-service-backend gconf2-common
  libgconf-2-4 libllvm11
これを削除するには 'sudo apt autoremove' を利用してください。

```

### インストールする。



![FFE81086-CE15-4AF4-8A40-682F76801508.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/25670d4b-7bbf-e254-3fba-0d3839ec0c55.png)

![D6882BC8-280B-46A6-825E-C3A0F7AE5BE0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/dce3adbf-51f8-22fe-8479-6632b803f499.png)


### iPhone側にて、インターネット共有の設定を行う。


![21418F87-B804-4B97-8A28-71DFD338CB91.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/f7baaea5-30b0-eee5-8cfd-1c59ae2b8265.png)
![B90D1653-3957-456F-BC74-C1831CA04649.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/d1167fc5-66e2-8544-a568-261cb840aa75.png)

### iPhone側にて、ブルートゥスを設定。


### pc側に戻ってブルートゥスの設定する。


設定できれば完！
CentOS7でdockr-in-dockerすると毎回systemctl start dockerしないといけないのでなんとかしたい

# はじめに

kubernetesの書籍を読んでおり、VagrantにDockerをインストールして起動していたのですが、
Docker Desktopを利用しているのでVagrantが利用できなかったので、docker in dockerをしました。

そこで問題が発生したのでまとめます。

# 問題

以下の環境を作成しました。

```
┣ Dockerfile
┣ docker-compose.yml
┣ data
  ┣ hello_world.txt
```

`Dockerfile`

```Dockerfile
FROM centos:centos7

RUN yum update -y && yum upgrade -y
RUN yum install -y \
			yum-utils \
			device-mapper-persistent-data \
			lvm2 \
			git \
			curl

# docker & docker-compos install
RUN yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
RUN yum install -y\
			docker-ce \
			docker-ce-cli \
			containerd.io
RUN curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose 
RUN chmod +x /usr/local/bin/docker-compose 
RUN ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
```

`docker-compose.yml`

```docker-compose.yml
  
version: '3'
services:
  centos7:
    restart: always
    build: .
    container_name: 'centos7'
    tty: true
    privileged: true    
    working_dir: '/'
    command: 
      - /sbin/init
    volumes:
      - ./data:/work/
```

まずDockerを起動します。

```
$ docker-compose build
$ docker-compose up
```

別のターミナルからコンテナの中に入ります。

```
$ docker exec -it centos7 bin/bash
```

docker daemonを起動します。

```
$ systemctl start docker
```

これで利用できるようになるのですが、コンテナを落とすたびに`systemctl`コマンドをたたく必要があります。
また、CMDを使ってDockerfileに書いたりもしたのですが、反映されていないようでした。

毎回コンテナに入って設定するのは、使いづらいので困っていました。

# 原因

CentOS7をdocker-in-dockerで利用する場合には`command: /sbin/init/`と`priviliage=True`が必要となります。
それがおそらく原因になっていそうです。

また、ホストコンテナとソケットを共有することで、同じDockerを利用する方法もできませんでした。

```Dockerfile
FROM docker:20.10 as docker # 追加
FROM centos:centos7

RUN yum update -y && yum upgrade -y
RUN yum install -y \
			yum-utils \
			device-mapper-persistent-data \
			lvm2 \
			git \
			curl

# 追加
COPY --from=docker /usr/local/bin/docker /usr/local/bin/
```

```docker-compose.yml
version: '3'
services:
  centos7:
    restart: always
    build: .
    container_name: 'centos7'
    tty: true
    privileged: true    
    working_dir: '/'
    command: 
      - /sbin/init
    volumes:
      - ./data:/work/
      - /var/run/docker.sock:/var/run/docker.sock
```

# 解決方法

CentOS7がそもそも利用できなさそうなので、他にイメージに変えたら上の方法ですんなりできました。
これで`systemctl`でいちいち起動しなくて済みます。

また、`alpine`と`ubuntu`では問題なくdockerが使えました。

`Dockerfile`

```Dockerfile
FROM docker:20.10 as docker
FROM alpine:3.14

RUN apk update && \
		apk upgrade

RUN apk add \
		docker-compose

# ホストのdocker daemon共有
COPY --from=docker /usr/local/bin/docker /usr/local/bin/
```

`docker-compose.yml`

```docker-compose.yml
version: '3'
services:
  alpine:
    restart: always
    build: .
    container_name: 'alpine'
    tty: true  
    working_dir: '/work'
    volumes:
      - ./data:/work/
      - /var/run/docker.sock:/var/run/docker.sock
```

CentOS7を使っていないので根本的解決にはなっていませんが、CentOS7でないといけない理由がないのでこれで回避しました。

# おわりに

肝心のkubernetes環境はできておりません。
ことごとくエラーが発生します。果たしてできるのでしょうか。。。
PhpstomでのDockerローカル環境の開発におけるXdebugの設定手順

## 概要
表題の通り、PHPのDockerの開発環境でデバッグを行いたかったため、設定手順を残す

## 環境
- macOS Big Sur (Version 11.4)
- PhpStorm 2021.2
- Docker Desktop for Mac（2021-08-23 時点の最新）
- PHP 8.0.0RC5
- Xdebug v3.0.4

## 手順

### Xdebug設定ファイルの追加
php.ini等設定ファイルを格納しているディレクトリにxdebugのiniファイルを作成する
※ php.iniを直接編集してもよいが、設定内容をわかりやすくするため分ける

```xdebug-local.ini
[xdebug]
xdebug.idekey = phpstorm # 任意の名前
;xdebug.mode = off # 無効化する際はoffに書き換えて再ビルドする必要がある
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_host = host.docker.internal
```

### Dockerfile修正
Xdebugインストール&有効化と設定ファイルコピーの記載を付け加える

```Dockerfile
RUN pecl install xdebug-3.0.4 \
    && docker-php-ext-enable xdebug

COPY docker/xdebug-local.ini /usr/local/etc/php/conf.d/xdebug.ini
```

### アプリケーションコンテナの再ビルド
```
$ docker-compose build --no-cache {container_name}
```

### Phpstormでの設定
1.Serversの設定
Preference(⌘ + ,) -> PHP -> Servers を開き、左上＋ボタンからサーバを追加し、以下を入力

- Name: 任意
- Host: `locahost`
- Port: phpアプリケーションコンテナと紐付けを行っているport(docker-composeであれば、docker-compose.yamlのportsに記載があるはず)
- Debugger: Xdebug
- Projectfilesのマッピング(Absolute path on the server): `/var/www/html`

2.Edit Configurationsの設定

上部プルダウンからEdit Configurationsをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341629/1a98d968-08e9-a3a3-0871-e54a3f780db3.png)

以下を入力

- Server: 上記で作成したServer
- IDE key: xdebug-local.iniで設定したidekey

### 動作確認

コンテナを起動

```
$ docker-compose up
```

Phpstormの上部のデバッグマークをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341629/afded84f-8313-5e4f-e9e3-bf738d5cfb73.png)

任意のリクエストを行い、デバッグに成功すれば終了
※リクエスト時、Phpstom上でアクセス許可ダイアログが出る場合、Acceptする
NISTとは？SP800とは？FIPSとは？

#はじめに
お仕事でNIST SP800シリーズを読む機会がありました。
その中で、そもそもNISTって何？SP800って何？と自問自答した時に、アメリカの権威ある人たちが作った由緒正しい文書＾＾；程度の知識しかなかったので、同じような人たちに対するカンペとして書きました。~~「IPAのサイトに全部載ってるじゃん」なんて言わないで。~~

#組織について
##NISTとは？
アメリカの米国国立標準技術研究所のこと。（National Institute of Standards and Technology）

##ITLとは？
NISTの中で、情報技術に関する研究を行っている人たち。（Information Technology Laboratory）

##CSDとは？
ITLの中でコンピューターセキュリティに関する研究や文書の発行をしている人たち。（Computer Security Division)
後述のSP８００シリーズやFIPSを作ってる人たちである。

#文書について
IPAが日本でニーズが高いと想定される文書を翻訳してくださってます。（ありがたやありがたや
https://www.ipa.go.jp/security/publications/nist/index.html
##Special　Publication（SP800シリーズ）
CSDが発行するコンピューターセキュリティ関連のレポートのこと。
アメリカの政府機関がセキュリティ対策を行う際に利用されることを前提とされているらしく、連邦政府とか長官とかのような、SFちっくなかっこいい言葉がいっぱい出てくる。
##FIPSとは
Federal Information Processing Standardsの略。
米国商務長官の承認を受けて、NISTが公布した情報セキュリティ関連の文書。法令で要求されたり、連邦政府の要件がある場合に作成されるそうだ。・・・多分、もっと由緒正しいんでしょう。 ~~知らんけど。~~
SP８００シリーズを読んでいると、随所にFIPSを参照するよう書かれている。

#参考リンク
https://www.ipa.go.jp/security/publications/nist/index.html
https://www.ipa.go.jp/security/publications/nist/nist_publications.html
https://www.intellilink.co.jp/column/security/2019/090200.aspx
【Flutter】ローディングをVisibilityを使って実装する

#はじめに
最近Flutterで読み込み時のローディングを実装するときに個人的にとてもいいなと思うWidgetに出会ったので、簡単に使い方を紹介したいと思います。
　　
今回使うのは`Visibility`　Widgetです。

※今回の記事は、hooks_riverpod, state_notifierでの使用例を紹介しています。


#使い方
こちらソースです。
見やすくなるよう、appBarとbodyは省略しています。


```dart
 @override
  Widget build(BuildContext context) {
    //boolで判断する
    final isLoading =
        useProvider(controllerProvider.select((value) => value.isLoading));
    //VisibilityをかぶせたいところをStackで囲む。
    return Stack(
      children: [
        Scaffold(
          appBar: _createAppBar(),
          body: Stack(
            children: [
              _createBody(),
              //ここ
              Visibility(
                visible: isLoading,
                child: Container(
                  color: Colors.white,
                  child: const Center(
                    child: CircularProgressIndicator(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
```

loadingを被せたいWidgetを`Stack`で囲み、`Visibility`を定義してあげる、といった感じです。



isLoadingの型はboolで初期値に`false`をもたせてます。

`Visibility`の`visible`に入れた値が`true`のときだけ`CircularProgressIndicator()`が表示されます。

stateNotifier側では適宜ローディングを走らせたいタイミングで、

```dart
state = state.copyWith(isLoading: true)
```

として、ローディングを終わらせたいタイミングで、

```dart
state = state.copyWith(isLoading: false)
```

にすればあとはいい感じで画面にローディングが走ります。



　　

以前までは三項演算子を使って実装していて、やってることに特に変わりはないですが、
専用のWidgetがあり、コードも若干見やすくなった気がします。
【TypeScript入門】anyとunknown型の違い

# まとめ
anyはできるだけ使わないようにし、anyの代わりにunknownを使いましょう。

* any : どんな型でも許容する　= 全く安全ではない → TypeScriptの良さがなくなる
* unknown型：どんな型になるか不明
* unknown型は代入した値によって方が変化する

# anyについて
anyを使うと型の違う値を再代入できてしまうので、コードの質が下がってしまう。

```typescript
let name: any = 'YSasago' // string型を代入
    console.log('any sample 1:', typeof name, name)

//　any sample 1: string YSasago
  
    name = 29 // number型を再代入できる
    console.log('any sample 2:', typeof name, name)
  }
// any sample 2: number 29
```

# unknown型について
unknown型を使えば、自動的に方を推論してくれる。unknown型を使って計算する際は、if文で型を確認すると、計算することができる。

```typescript
    const maybeNumber: unknown = 10 // unknown
    console.log('unknown sample 1:', typeof maybeNumber, maybeNumber)
// unknown sample 1: number 10
  
    // unknown型の値を比較することができる
    const isFoo = maybeNumber === 'foo'
    console.log('unknown sample 2:', typeof isFoo, isFoo)
// unknown sample 2: boolean false
  
    // const sum = maybeNumber + 10 // object is possibly unknownのエラーが出て代入できない
  
    // number型であるか判定した後なら代入可能
    if (typeof maybeNumber === 'number') {
      const sum = maybeNumber + 10
      console.log('unknown sample 3:', typeof sum, sum)
// unknown sample 3: number 20
    }
```
iOS/Android アプリ x Bitrise

## 前置き

Swift/Kotlin/Flutter で開発されている iOS/Android アプリに携わることになり、Bitrise を利用することになったので、自分なりに試してみました。

## What is Bitrise ?

https://www.bitrise.io/

https://devcenter.bitrise.io/jp/

を読むと、Bitrise はモバイルアプリ開発に特化した CI/CD ツールであることがわかります。

## メリット
### メリット 1: 導入が容易

Jenkinse などのようにサーバーを立てたりする必要がないので、また、ワークフローの構築がコンソール上の操作のみでできました。

### メリット2: アプリに特化

アプリ用のワークフローが既に準備されており、Google Play Store や App Store へのアップロードなどを簡単に組み込むことができます。

### メリット3: 無料で始められる

https://www.bitrise.io/pricing

Hobby プランなら無料で始められるので、まずお試しできるのがいいですね（今回これで試しています）。

### メリット4: iOS/Android どちらにも対応

アプリに特化しており、かつアプリ用のワークフローが用意されているので、ポチポチするだけで必要最低限のことはできるように感じました。

### メリット5: 拡張性がある

Step と呼ばれるものを追加することで、自分が行いたい作業を追加可能なので、カスタマイズ性があるように感じました。

## 所感

* アプリに特化していて、簡単に導入できるので、アプリの CI/CD が何も入っていないならすぐに入れてしまうのはありだと思う
* ただ、ある程度、使い込んでみないとわからない部分が多そうだなぁという手応えも同時にある
【マイクラ】【Server Starter】マルチサーバーをもっと簡単に立てよう！

#作成の発端
~~~
「マイクラのサーバーを立てる作業が難しい！面倒くさい！」
~~~

筆者はマイクラを始めて1年程度の新参者ですが、熱狂的にハマった結果、友人たちを集めては夜な夜なマルチプレイで遊んでいます。
**しかし**、サーバーを個人で立てるためには様々な壁を突破しなければなりません。
バージョンが変わるたびにlauncherからserver.jarをダウンロードしたり、server.propertiesを編集したり、…

なので、サーバーを管理するソフトを作っちゃいました！


#インストール方法
1. [こちら](https://github.com/CivilTT/ServerStarter/releases/download/v1.1.0/Setup_ServerStarter.msi)のリンクを踏むとソフトをインストールするためのインストーラーがダウンロードされます。

2. ダウンロードが完了したらインストーラー(Setup_ServerStarter.msi)を起動してください。
    - 自作ソフトのため、以下のような制限を受けた場合は、**詳細情報**をクリックし、実行してください。
    
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1796208/80e0e3b9-6e76-7173-d5b7-318d88055155.png)


3. 画面の案内に従い、利用規約に同意するとインストール先を選択する画面が表示されるため、特に問題なければそのまま進んでください。
    - マイクラのクライアントが入っていない場合など、インストール先を変更する場合は適宜、変更してもらって問題ありません。

4. インストールが終わったらインストーラーを閉じ、デスクトップにショートカットが作成されていることを確認してください。

#簡単に機能紹介
次回から実装でのポイント・工夫を解説していきますが、それを理解するために搭載している機能を紹介しておきます。
##前提条件（環境）
下記の環境で動作確認を行いました。

|Index|Value|
|:-:|:-:|
|OS|Windows 10|
|CPU|Core i7-9700|
|Port|25565 (TCP)|
|Git|2.31.1|
|Java|JDK 16.0.1|

- このソフトではポート開放は自動で行われません。そのため、ご自身でセキュリティソフトやルーターのポート開放（ポートマッピング）の設定を行ってください。
- WPFで開発しているため、OSはWindowsでしか動きません。

>いつの日かポート開放をサポートする機能も付けたい…
 
##基本の使い方
>写真は英語版ですが、日本語版も現在作成中です。

まず、起動すると以下のような情報を入力する画面が表示されるため、自身のマイクラのプレイヤー名を**正確に**記入してください。
    
- 6>,7>のGitに関する情報は後述のShareWorldを利用する場合は入力してください。必要ない場合はExampleのままで問題ありません。Gitの初期設定のやり方については[こちら](https://qiita.com/CivilTT/items/16d53b734ac9d75c2e79)の記事にまとめました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1796208/cd0efa3c-914c-d964-e5eb-ff40a0e5d074.png)

---

そして、必要な情報を入力し終わるとメイン画面が表示されます。
導入が必要なバージョンと適当なワールド名を指定し、Runを押すことでサーバーが起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1796208/f88edbb1-e896-d7e4-bd9a-caff12dab406.png)

---

More Settingsを押すと以下のような画面が表示され、データパックや配布ワールド・既存ワールド(Custom Map)の導入、`server.properties`の編集を行うことができます。
また、Spigotサーバーのビルドにも対応しており、この機能を利用すれば、この画面からpluginの導入も可能となっています。
ただし、Spigotを導入する場合はSpigotが対応していないバージョンを選択すると、実行時にエラーを返されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1796208/51ca407e-a04c-16b5-24b3-7ebbae44dbef.png)

##ShareWorld
普段、A君がサーバーを立てている状況を考えてみてください

~~~
A君がいないときはサーバーを立てられないから、マルチプレイできない！
~~~

もちろん、A君がお金持ちで電気代など気にせず、常にサーバーを起動状態にしていても問題ない場合は良いですが、そんなことは稀です。
いちいちA君からサーバーのデータをもらい、あなたがサーバーを立てることもできますが、面倒くさいです。
これを解決するために、ShareWorldというgitを介したサーバーデータ同期システムを構築しました。
使い方や実装の内容は長くなるため、別の記事にまとめたいと思います。
一度設定してしまえば、World NameでShareWorldを選択するだけで同期されます。


#実装の解説
基本的に筆者は情報系の学習はすべて独学でやっているため、コードの書き方が未熟な部分が多々あります。
特にGUIの作成は今回が初めてのため、きれいな実装でない部分も少なからずあります。
それでも、初心者なりに一つのシステムを完成させるまでの軌跡を公開し、参考にしてもらえればうれしく思います。
また、公開することにより、「ここはこう書いた方がよい」などのアドバイスももらえればとても助かります。

コードは[こちら](https://github.com/CivilTT/ServerStarter/releases/tag/v1.0.0)に掲載しています。

##目次
### 初期設定
- [Gitレポジトリの設定方法](https://qiita.com/CivilTT/items/16d53b734ac9d75c2e79)　(ShareWorldを利用するにあたり最初に行ってください)

### トラブルシューティング
- [Gitによるデータ復旧の方法](https://qiita.com/CivilTT/items/84820c421938d972ec1b) （ShareWorldを利用している場合はワールドデータの復旧が可能です）

### コード紹介
- [プログラムを始める前に意識したこと](https://qiita.com/CivilTT/items/3e3879337b5c4681feed) （GUI制作の事前準備として意識したことをまとめました）
データフレームに，祝日フラグを追加するライブラリを作成した

# Japnese Holiday

データフレームを扱う際に，毎回祝日フラグ設定をするのが面倒だったので，ライブラリを作成しました。
https://pypi.org/project/jp-holiday/#description

# README.md
日付が含まれるデータフレームを入れると，祝日フラグを与えてデータフレームを返します。

引数には以下を指定してください。

- 第一引数 => データフレーム
- 第二引数 => データフレーム内の，日付が入っているカラム名
- 第三引数 => 新しく作られる祝日フラグのカラム名

を入れてください。
＊第三引数はデフォルト値が`holiday`です。

日付は，`str`型でも`datetime`型でも対応します。
`str`型に変換して，スライスをしています。`
初めから4つが年，
6，7文字目が月
9，10文字目が日にちです。
他のところは何が入っていても問題ありません。

```
ex1. 2021-01-01
ex2. 2021-01-01 01:01:00
ex3. 2021^01@01 ほりでい
ex4. 2020101901
```

```python

from jp_holiday import jp_holiday

df_with_holiday = jp_holiday.is_holidy(df, "date", "is_holiday")

```
Unity GUIのTIPS


# Unityのトグルグループを使ってラジオボタン
１．親になるGameObjectに"ToggleGroup"コンポーネントをつける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555658/1cee1e6a-b674-0ac7-a570-5d8651543085.png)

２．親の下に、toggleを３つほどつける。

Groupに親をセットする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555658/334c0601-667c-0160-6a48-cb3b3db23155.png)

3. 実行
この状態で実行すると、子供のtoggleが排他的に１つだけ選択できる（ラジオボタン）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555658/e0eedddd-61b4-7735-525c-0b38ac032e87.png)
ABC079をPythonで実装してみた。

# はじめに

本記事は、自身のAtCoderで実装能力を可視化するために備忘録として残していくためのものです。コメントにもあるように洗練された実装ではなく、実装が拙いのでご指摘下されば幸いです。

# [A - Good Integer](https://atcoder.jp/contests/abc079/tasks/abc079_a)

```python
N=input()

n0 = N[0]
n1 = N[1]
n2 = N[2]
n3 = N[3]

if n0 == n1 and n0 == n2:
    print("Yes")
elif n1 == n2 and n1 == n3:
    print("Yes")
else:
    print("No")
```

# [B - Lucas Number](https://atcoder.jp/contests/abc079/tasks/abc079_b)

```python
N = int(input())

L=[]

for i in range(N+1):
    if i == 0:
        L.append(2)
    elif i == 1:
        L.append(1)
    else:
        L.append(L[i-1] + L[i-2])

print(L[N])
```

# [C - Train Ticket](https://atcoder.jp/contests/abc079/tasks/abc079_c)

```python
ABCD = input()
a = int(ABCD[0])
b = int(ABCD[1])
c = int(ABCD[2])
d = int(ABCD[3])

if a+b+c+d==7:
    print("%d+%d+%d+%d=7"%(a,b,c,d))
elif a+b+c-d==7:
    print("%d+%d+%d-%d=7"%(a,b,c,d))
elif a+b-c+d==7:
    print("%d+%d-%d+%d=7"%(a,b,c,d))
elif a+b-c-d==7:
    print("%d+%d-%d-%d=7"%(a,b,c,d))
elif a-b+c+d==7:
    print("%d-%d+%d+%d=7"%(a,b,c,d))
elif a-b+c-d==7:
    print("%d-%d+%d-%d=7"%(a,b,c,d))
elif a-b-c-d==7:
    print("%d-%d-%d-%d=7"%(a,b,c,d))
elif a-b-c+d==7:
    print("%d-%d-%d+%d=7"%(a,b,c,d))
```
【TypeScript入門】nullとundefinedの違い

# 存在しないことを表現する型　nullとundefined

Typescriptを使っていると、nullとundefinedのどちらを使おうかと迷うことがあったので簡単にまとめました。

# まとめ
* nullは値があるはずのところにない状態のため、設計上おかしい。そのためできる限りundefinedを使うとよい。

# nullとundefinedの違い
* null : 値があるはずなのに、値が欠如していることを表す
* undefined: 初期化されておらず値が割り当てられていないことを表す
* できる限りundefinedを使う

# nullについて

nullはtypeofで表示するとobjectになる。。。混乱しそう。

```typescript
   let name = null
    console.log('sample 1:', typeof name, name)
// sample 1: object null
```

# undefinedについて
```typescript
    let age = undefined
    console.log('sample 2:', typeof age, age)
// sample 2: undefined undefined
```
[Flutter] flutter doctor --android-licenses エラー解決

## 環境
Xcode 12.5
Android Studio 4.2.1

## エラーが起きた背景
FlutterをVSCodeで使用するため、flutter doctor -v コマンドを入れた時下記ような事が出てきた。

``` 
$ flutter doctor -v 
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/Username/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
``` 

## エラー内容
``` 
$ flutter doctor --android-licenses
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
    at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
    at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
    at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
    at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
    at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
    at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
    at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
    at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)
    ... 5 more
``` 

##解決方法
1. Android Studioを開く
1. Tools -> SDK Managerをクッリク
1. Appearance & Behavior > System Settings > Android SDK
1. SDK ToolsからAndroid SDK Command-line tools (latest)をチェックしてインストールする

 
``` 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/Username/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.
``` 

###参考
https://stackoverflow.com/questions/61993738/flutter-doctor-android-licenses-gives-a-java-error
【SQL】順位と全体数を取得する

```SQL

select
  fruits
  from Table_date
  where apple_id = ?
  order by fruits  desc;
```

```PHP

  $all = SQLの結果

    $count = count($all);    ←りんごの総数
    $cnt = 0;                ←りんごの順位
    foreach($all as $list ){ 		      
       if((int)$list["fruits"] === (int)$fruits){
        $cnt++;
        return $juni;
       }
       $cnt++;
      } 
```