OmniAICreator/Qiita-1.07M huggingface dataset:
【PHP】GETで送信されたuser_idに該当するユーザーが存在すればそのユーザーの詳細情報を表示。詳細は下記に示す

１・GETで送信されたuser_idに該当するユーザーが存在すればそのユーザーの詳細情報を表示
２・user_idの入力がない場合、「user_idを入力してください」と表示（初期状態を含む）
３．該当のユーザーが存在しなければ「user_id:[ユーザーid] に該当するユーザーは存在しませんと表示


```
初画面
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/d917d2d7-af61-5781-af78-4f1223e556c0.png)


```PHP
<?php

$users = [
  '01' => [
    'id' => '01',
    'name' => '山田太郎',
    'address' => '東京都港区',
    'phone' => '090-0000-0000',
  ],
  '02' => [
    'id' => '02',
    'name' => '佐藤花子',
    'address' => '東京都杉並区',
    'phone' => '090-2222-2222',
  ],
  '03' => [
    'id' => '03',
    'name' => '山本二郎',
    'address' => '東京都豊島区',
    'phone' => '090-3333-3333',
  ],
  '04' => [
    'id' => '04',
    'name' => '田中三郎',
    'address' => '神奈川県横浜市',
    'phone' => '090-4444-4444',
  ],
  '05' => [
    'id' => '05',
    'name' => '斎藤さくら',
    'address' => '東京都台東区',
    'phone' => '090-5555-5555',
  ],
  '06' => [
    'id' => '06',
    'name' => '加藤桃',
    'address' => '東京都世田谷区',
    'phone' => '090-6666-6666',
  ],
];

if(isset($_GET['user_id']) === true){
  $id = $_GET['user_id'];

  $i = 0;

  foreach($users as $value){
    if($id === $value['id']){
      $i = 1;
    }
  }

  if($i === 1){
     $user = $users[$id];
  }

}

?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>ユーザー検索</title>
</head>
<body>
  <h1>ユーザー検索</h1>
  <form method="get">
    <label>ユーザーid:  <input type="number" name="user_id"></label>
    <input type="submit" value="検索">
  </form>
  <br>
  <?php

if(isset($_GET['user_id']) === false){
  echo "user_idを入力してください";
}
  if(!empty($user)){  
    ?>
    <h2>ユーザー：<?php echo $user['name']; ?></h2>
    <dl>
      <dt>ユーザーID</dt>
      <dd><?php echo $user['id']; ?></dd>
      <dt>ユーザー名</dt>
      <dd><?php echo $user['name']; ?></dd>
      <dt>住所</dt>
      <dd><?php echo $user['address']; ?></dd>
      <dt>電話番号</dt>
      <dd><?php echo $user['phone']; ?></dd>
    </dl>
     
     <p><a href="user_search.php">戻る</a></p>  

     <?php
  } elseif((!empty($id)) && (isset($_GET['user_id']) === true)){
      echo "user_id:".$_GET['user_id']."に該当するユーザーは存在しません";
      ?><p><a href="user_search.php">戻る</a></p><?php

    } elseif((empty($user)) && (isset($_GET['user_id']) === true)){
    echo "user_idを入力してください";
    ?><?php
}

  ?>
  <!-- 検索結果 or メッセージ表示 -->
</body>
</html>
```

```
正しい値を入力
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/95156628-3e0b-90cc-b42a-c2ae94376e99.png)

```
結果
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/8201a170-b216-0357-1a80-e5883a1b386f.png)

```
適当に入力
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/483cced6-8122-7a49-ab5c-b8484ebae7eb.png)

```
結果
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/f89a08a6-971b-f4c9-cd6c-7f1047bcbb36.png)

```
空文字を入力
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/617ee6f1-2603-3bc4-a410-0022ca85655f.png)

```
結果
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/289bcca9-1b74-65ac-5057-2f31ee3e4965.png)
vue.js 備忘録 v2からv3への変更点<基本のき>

・Vue2と３の違いについて

vue2のバージョン
→Option APIとしてバラバラに書いていた

```vue
export default {
  data() {},
  methods: {},
  computed: {},
  mounted() {},
};
```


vue3のバージョン
→Composition APIとして一つにまとめた記述方法をすることになる
→setup()はmountedなどの他のライフサイクルよりも早く行われる

```vue
export default {
  setup() {
    // data
    // methods
    // computed
    // Lifecycle hooks
  },
};
```
２とは違い、３ではsetup関数内に全てを記述してしまうのだ

・気をつけなければいけない点
→reactiveかreactiveではないか

```vue
<template>
  <div class="home">
    <h1>Home</h1>

    <p>My name is {{ name }} and my age is {{ age }}</p>
  </div>
</template>

<script>
export default {
  name: "Home",
  setup() {
    let name = "hogehoge";
    let age = 30;

    return { age, name };
  },
  data() {
    return {
      age: 48,
    };
  },
};
</script>
```

上のソースコードではマスタッシュ構文ないにあるageはどちらを表示するであろうか
→答えは48
→なぜなら30の方のageはreactiveな値ではないからだ
→そのため、reactiveな値である48が画面に描画されてしまう
→そうならないためにも、data()とsetup()で同一の変数を置くのは控えた方がよろしいだろう
→ではsetupでおいた変数をreactiveにするにはどうすればいいのだろうか
→「ref」を使用する

```vue
<template>
  <div class="home">
    <h1>Home</h1>

    <p ref="p">My name is {{ name }} and my age is {{ age }}</p>

    <button @click="handleClick">plese click</button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "Home",
  setup() {
    const p = ref(null);
    // refという物を使用すると、reactiveになる
    let name = ref("mario");
    let age = ref(30);

    const handleClick = () => {
      // refをしている値を変えたい時は変数.valueを使用する
      name.value = "hogehoge";
    };

    return { age, name, handleClick, p };
  },
};
</script>
次世代シークエンスのdry解析においてduplicate readsは取り除かれるべきか

##はじめに
これは個人用に調べたメモ書きです。誤りを含んでいる可能性があります。問題点があればご指摘いただけますと幸いです。

##序論

次世代シークエンスの解析においてfastqcなどでreadのクオリティの確認を行った時にdry解析上でduplicate readsが多数検出される。これらは取り除くべきなのかどうかを検討した。

##本論

重複しているかどうかの判断はmappingの位置によって判断される。[1] fastqcではmappingする前に検出はするが、どちらにせよリードの塩基配列情報からmappingするのでほぼ同義だと考えられる。そしてこれはPCRによるものと自然な重複を区別していない。[1]

RNA-seqの研究に関しては、Parekh Sらの研究[1]において3つの異なるプロトコル（Smart-Seq、TruSeq、UMI-seq）で作成したRNA-seqデータセットを生成し、解析したところ計算によって同定されたリードの重複の大部分はPCRの重複ではなく、サンプリングやフラグメンテーションのバイアスによって説明でき、その結果、計算機上で重複を除去しても、精度や正確さは向上せず、むしろ遺伝子発現の違いを示す検出力やFalse Discovery Rate (FDR)を悪化させる可能性があると結論づけられた。

Yu Fuらの研究[2]によってもmapping座標によって重複を削除するとデータ分析にかなりのバイアスが生じることが活論づけられている。

ChIP-seqの研究に関しても、Tian Sらの研究[3]によってピークの重複のかなりの部分は、分析のために保持する必要がある真のシグナルを表すと予測される、と結論づけられている。

mapping情報による重複の削除においてはレビュー論文[4]でも言及されており、次世代シークエンスの解析において、一般的に全ゲノムシークエンスでは重複したreadは技術的なバイアスとして削除されるのに対して、RNA-seqでは保持されると記載がある。PEでも可能性は低くなるが同様である。シングルセル解析などでも用いられるUMIはある程度有用であるようである。

対して、Atac-seqの研究に関してはPranzatelli TJFらの研究[5]によってpicard toolによるduplicateの削除によって生物学的再現性が向上するとされている。(ミトコンドリアゲノムとencodeのblacklist領域も廃棄されるべきである。[6]）

##結論

RNA-seqとChIP-seqのデータ解析においてmappingによる判断だけでduplicate readsの削除を行うべきではないと考えられる。
Atac-seqのデータ解析においてはduplicate readsの削除は行われるべきであると考えられる。


##参考文献

[1] Parekh S, Ziegenhain C, Vieth B, Enard W, Hellmann I. The impact of amplification on differential expression analyses by RNA-seq. Sci Rep. 2016;6:25533. Published 2016 May 9. doi:10.1038/srep25533

[2] Fu Y, Wu PH, Beane T, Zamore PD, Weng Z. Elimination of PCR duplicates in RNA-seq and small RNA-seq using unique molecular identifiers. BMC Genomics. 2018;19(1):531. Published 2018 Jul 13. doi:10.1186/s12864-018-4933-1


[3]Tian S, Peng S, Kalmbach M, Gaonkar KS, Bhagwate A, et al. (2019) Identification of factors associated with duplicate rate in ChIP-seq data. PLOS ONE 14(4): e0214723. https://doi.org/10.1371/journal.pone.0214723


[4]Stark, R., Grzelak, M. & Hadfield, J. RNA sequencing: the teenage years. Nat Rev Genet 20, 631–656 (2019). https://doi.org/10.1038/s41576-019-0150-2


[5]Pranzatelli TJF, Michael DG, Chiorini JA. ATAC2GRN: optimized ATAC-seq and DNase1-seq pipelines for rapid and accurate genome regulatory network inference [published correction appears in BMC Genomics. 2019 Jan 15;20(1):44]. BMC Genomics. 2018;19(1):563. Published 2018 Jul 31. doi:10.1186/s12864-018-4943-z

[6]Yan, F., Powell, D.R., Curtis, D.J. et al. From reads to insight: a hitchhiker’s guide to ATAC-seq data analysis. Genome Biol 21, 22 (2020). https://doi.org/10.1186/s13059-020-1929-3
NumPyを用いたフラットファイルのインポート処理

## フラットファイルとは

```text
フラットファイルとは、文字で表されるデータを列挙して格納するファイル形式の一つで、一行が一つのレコードを表すもの。
古くは各項目が固定長のものを指したが、現代では各項目を区切り記号で分けた可変長のものを含む場合もある。
```
[フラットファイル 【flat file】](https://e-words.jp/w/%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB.html)より

つまり、CSVやTSVファイルはフラットファイルです。

## NumPyを用いたインポート処理

np.loadtxt()を使用して単純なインポート処理を行います。

```python
data = np.loadtxt('test.csv', delimiter=',')
```

ヘッダーやコメント有り、区切り文字がタブ、取得したい列を限定したい場合は、パラメータで指定します。

```python
data = np.loadtxt('test.tsv', delimiter='\t', skiprows=1, usecols=[0, 2])
```

* delimiter : 区切り文字
* skiprows : 先頭から何行をスキップするか指定。（デフォルトは0=スキップしない）
* usecols : 取得したい列

ほかにデータ型を指定できるパラメータdtypeがあります。

* dtype : データ型（デフォルトはfloat型）

dtypeを指定しないで文字列のヘッダーを読み込むとエラーになるので注意が必要です。

```python
# 文字列型としてインポート
data = np.loadtxt('test.tsv', delimiter='\t', dtype=str)

# float型としてインポート（上から1行だけスキップ）
data_float = np.loadtxt('test.tsv', delimiter='\t', dtype=float, skiprows=1)
```

数値型を自動判別する関数としてnp.genfromtxt()があります。
dtype=Noneを渡すと列に対応する数値型を自動判別してくれます。

```python
data = np.genfromtxt('test.csv', delimiter=',', names=True, dtype=None)
```

また、np.recfromcsv()は同様の動きをしてくれます。
np.genfromtxt()との違いはdtypeがデフォルトでNoneとなるので、指定しなくてもよいです。

```python
data = np.recfromcsv('test.csv', delimiter=',', names=True)
```

## 参考情報

* [numpy.loadtxt 公式リファレンス](https://numpy.org/doc/stable/reference/generated/numpy.loadtxt.html)
Oralceのカラムの型を変換することで躓いた話

以下のような形でテーブルを作成

```sql
CREATE TABLE EMPLOYEE(
    "EMP_ID" NUMBER(10,0) Default 0 NOT NULL,
    "EMP_NAME" NVARCHAR2(14) NOT NULL,
    "UPD_USER_ID" NVARCHAR2(50) Default 'EMPAPP' NOT NULL,
    "UPD_DATE" DATE Default SYSDATE NOT NULL
    )
    TABLESPACE EMPAPPS;
```
この状態でレコードが何件か追加されている状態で、
UPD_USER_IDについて、文字列から数値の型に変更することになった。


```sql
ALTER TABLE EMPLOYEE MODIFY (UPD_USER_ID NUMBER(10))
```

すると、エラーが発生する。

```
ORA-01439: データ型を変更するには、修正する列を空にする必要があります
```

これに則りデータを削除しようとする。

```sql
UPDATE EMPLOYEE SET UPD_USER_ID = NULL;
```

今度はNULLエラーになってしまった。

```
ORA-01407: (EMPAPPS.EMPLOYEE .UPD_USER_ID)をNULLには更新できません。
```

なのでnull成約を解除したうえでNULLでアップデート。

```sql
ALTER TABLE EMPLOYEE MODIFY UPD_USER_ID NULL;
UPDATE EMPLOYEE SET UPD_USER_ID = NULL;
```

これでテーブルのすべてのレコードのUPD_USER_IDはNULLになったので再度型の変換を実行する。

```sql
ALTER TABLE EMPLOYEE MODIFY (UPD_USER_ID NUMBER(10));
```

またエラーが発生する。

```
ORA-01722: 数値が無効です。
```

むむ、、、こっからが本題。

ひらめきにより以下の推測。
カラム定義を変更する→デフォルト値の再評価が走る→設定したデフォルト値が「EMPAPP」で数値ではないため、上記のエラーが出ていると推測。

よってデフォルト値の削除を実行する。

```sql
ALTER TABLE EMPLOYEE MODIFY UPD_USER_ID DEFAULT NULL;
```


その後、型の変換を実行する。

```sql
ALTER TABLE EMPLOYEE MODIFY (UPD_USER_ID NUMBER(10));
```

という形で型の変換が出来ました。
カラムの型変換時に注意しないと行けないのは以下二点ということですね。

*  NULL成約
*  デフォルト値
OpenVPNの「Failed to import profile」の対処法メモ

# 症状

![スクリーンショット 2021-05-26 20.21.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163480/cfd9fb33-36d4-fca7-f1a5-32ba5628ae51.png)
「Failed to import profile static_key_parse_error」というエラーが出る

# 原因
OpenVPNの構築スクリプト(https://github.com/angristan/openvpn-install/)
を動作させる。CentOS8だと、`cat: /etc/openvpn/tls-crypt.key: No such file or directory`というエラーが発生する。これにより、不完全な設定ファイルが出来る。

# 対策
VPNサーバをCentOS7にする

# 関連
https://unix.stackexchange.com/questions/359428/open-vpn-options-error-tls-auth-fails-with-ta-key-no-such-file-or-director
（原因が違ってた場合に参考になるかも）

# 参考文献
https://dawaan.com/setting-up-openvpn-in-5-mins/
VPN構築はこちらを参考にしました。

https://github.com/angristan/openvpn-install/issues/672
アクセス許可の境界とは何なのか【IAM Permissions boundary】

#アクセス許可の境界とは

IAMにはアクセス許可の境界という機能があります。

https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/access_policies_boundaries.html


Aさんに以下のポリシーをアクセス許可の境界として設定します。

```json:アクセス許可の境界
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:*",
                "cloudwatch:*",
                "ec2:*"
            ],
            "Resource": "*"
        }
    ]
}
```

>
ポリシーを使用してユーザーのアクセス許可の境界を設定する場合、このポリシーではユーザーのアクセス許可は制限しますが、それ自体のアクセス許可は提供しません。この例のポリシーでは、Aさんのアクセス許可の上限を Amazon S3、CloudWatch、および Amazon EC2 のすべてのオペレーションに設定します。Aさんは、IAM など、他のどのサービスでもオペレーションを実行することはできません。実行を許可するアクセス許可ポリシーが適用されている場合でも同様です。たとえば...（以下略）
>

少しわかりにくいですね。

#ポリシーの評価ロジックを理解することによってアクセス許可の境界が分かります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/c865d815-6e47-ebc5-0ed8-f47e853669e9.png)
上記の図で考えます。

**-例1- 　IAMプリンシパルにアクセス許可の境界を設定していてS3,cloudwatch,ec2のAllowが存在し、Identity-based policyでもS3,cloudwatch,ec2のAllowが存在する場合**

**→**     *IAMプリンシパルはS3,cloudwatch,ec2に対してのみアクセスできます。*
<br>
**-例2- 　IAMプリンシパルにアクセス許可の境界を設定していてS3,cloudwatch,ec2のAllowが存在するが、Identity-based policyではS3,cloudwatch,ec2のAllowが存在しない場合**

**→**   *IAMプリンシパルはS3,cloudwatch,ec2に対してアクセスできません。*

<br>

**-例3-　 Identity-based policyではS3,cloudwatch,ec2のAllowが存するがIAMプリンシパルにアクセス許可の境界を設定していてAllowが存在しない場合**

→*IAMプリンシパルはS3,cloudwatch,ec2に対してアクセスできません。*
<br>

  

**-例4-　 IAMプリンシパルにアクセス許可の境界を設定していてAllowが存在しないが、リソースポリシーにAllowが存在する場合**

→　***IAMプリンシパルはS3,cloudwatch,ec2に対してアクセスできます。***
<br>



https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/access_policies_boundaries.html
NFT発行、OpenSeaまでの表示をWeb上だけで完結できるか?

**【本文】**
タイトルの通りです。
NFT(ERC721)を作成しOpenSeaに掲載する作業を何処までweb上だけで完結するか試してみました。つまり、環境構築をほぼしなくても何処まで行けるか、ですね。
(※OpenSea上から直接、NFTを発行することも可能みたいですが、IPFS等を経由するために敢えて以下のやり方をしました。)




【今回の環境構成】
---

web環境上で構築

+ Remix
+ Fleek (IPFSのホスティングに利用)
+ metamask
+ Rinkeby (Ethereumのテストネットワーク)
+ OpenSea(テストネット版：最終的な表示のみ)

※画像データとJSONファイルのみローカル作業

【事前準備】
---

+ ペイントで適当に絵を描き、png形式でFleekを通じてIPFSにアップロードし、ハッシュ値([ipfs_hash_image])を取得する。

![face_20210524.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167054/948d652b-454d-1b96-58ab-f801bcc3af86.png)

+ json形式で作成したNFTの画像データの情報を示すmetadataファイルをFleekを通じてIPFSにアップロードし、metadataファイルのハッシュ値([ipfs_hash_metadata])を取得

```json:token_metadata
{
  "description": "testImage", 
  "external_url": "", 
  "image": "https://ipfs.io/ipfs/[ipfs_hash_image]", 
  "name": "ttt"
}
```



【スマコンコード】
---

とてもシンプルです。

**NFTのコントラクトコード**


```javascript:testNFT.sol
pragma solidity 0.6.6;

import 'https://github.com/OpenZeppelin/openzeppelin-contracts/blob/release-v3.4/contracts/token/ERC721/ERC721.sol';

contract nft_sample is ERC721 {
  constructor (string memory name, string memory symbol, string memory baseURI) public ERC721 (name, symbol) {
      _setBaseURI(baseURI);
  }
  
  struct NFTAtr {
    string copyrightholder;
  }

  NFTAtr[] nftAtrs;

  function mintNFT(string memory _copyrightholder,string memory tokenURI) public returns(uint) {
    NFTAtr memory _nftAtr = NFTAtr(_copyrightholder);
    nftAtrs.push(_nftAtr);
    uint _id = nftAtrs.length - 1;
    _safeMint(msg.sender, _id);
    _setTokenURI(_id, tokenURI);
    return _id;
  }

  function getNFTAtrFromId(uint id) public view returns(string memory) {
    return (nftAtrs[id].copyrightholder);
  }
}
```

+ Remix上で、NFTコントラクトをコンパイル。
+ MetamaskをRinkebyに接続。もし、テスト用のEtherが無ければ、Rinkeby Faucetで3ETHほど「クレクレ」しておく。
+ Remixの接続先を[Injected Web3]に変更。Metamaskを通じてRinkebyに自動接続される。
+ Remixを利用してRinkebyにtestNFTをデプロイ。
+ デプロイ時に、[name],[symbol],[baseURI]を指定。[baseURI]は、 "https://ipfs.io/ipfs/[ipfs_hash_metadata]" で指定。
+ デプロイ後、NFTを発行(Mint)する。発行時に、[copyrightholder],[tokenURI]を指定。[tokenURI]は、今回は"/"でよい。(※発行タイミングで、(baseURI + /)で[tokenURI]が設定される。)

【確認作業】
---

+ 先ずは、OpenSea(testnet版)でmetadataが読み込めているかweb上で疎通確認

```
https://rinkeby-api.opensea.io/asset/[NFT_Contract_Address]/[tokenId]/validate/
```

+ 疎通出来ていたら、以下の結果が返る。

```json
HTTP 200 OK
Allow: OPTIONS, GET
Content-Type: application/json
Vary: Accept

{
    "valid": true,
    "token_uri": "https://ipfs.io/ipfs/[ipfs_hash_image]/",
    "errors": []
}
```

+ 実際に、OpenSea(テストネット版)で表示してみる。

```
https://testnets.opensea.io/assets/[NFT_Contract_Address]/[tokenId]
```

+ 実際の結果


![OpenSea_testnet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167054/56f343ca-b9b3-a370-66b6-95b390a07fac.png)

+ リンクは以下

https://testnets.opensea.io/assets/0x5746cc545f286f9466d01dab4b4522712e28a4ce/0


以上ですが、こんな感じです。そこそこお手軽でいい感じに実現できました。

【終わりに】
---

NFT発行からOpenSea上での表示まで、ほぼWeb上だけで完結することが出来ました。
加えて、もう一つ大きなポイントがあります。
NFTをEthereum上で発行しただけでなく、紐づけた画像とOpenSeaで表示させるために必要なmetadata自体もIPFSにアップロードしたことで完全に分散型のデジタル世界の中でNFTが実現した点です。
リストで先頭の記号をa) b)...と表記したい【CSS】

実装で詰まったので記録

a.)
b.)
じゃないのよ！
a)
b)
がいいのよ！
という自分のような人のために




## 実際のコード

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="himinmeg" data-slug-hash="ExWXBLw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="list_en">
  <span>See the Pen <a href="https://codepen.io/himinmeg/pen/ExWXBLw">
  list_en</a> by minmeg (<a href="https://codepen.io/himinmeg">@himinmeg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 詳しく解説


```html:HTML
<ul class="list_en">
<li>りんご</li>
<li>トマト</li>
</ul>
```
HTMLは通常のリストと同じ。olでも可。



```css:CSS

/* liの中で改行した時にインデントをそろえる */
.list_en {
  padding: 0 0 0 2em;
}

/* 先頭のマーカーを消して、liの数をカウントするカウンターを入れる */
.list_en li {
  list-style-type: none;
  list-style-position: inside;
  counter-increment: count;
}

/* 先頭に疑似要素でマーカーを足す、contentをカウンターで数えた「小文字のアルファベット表記 + )」にする */
.list_en li::before {
  display: marker;
  content: counter(count, lower-alpha) ") ";
}
```

counterって数字しか返さないと思っていたけど、いろいろいけるみたいです。

upper-romanでローマ数字
decimal-leading-zeroで01,02...と


他にも色々ありそうです。



### 参考

li内で改行したときにインデントを揃えるCSS
https://kailo.jp/post/7

counter() - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/counter()
【ExcelVBA図解】開発タブの表示方法

はじめに
ExcelVBAで開発タブの表示方法がわからない方へ向けて、開発タブの表示方法を図解で説明する記事です。

1、開発タブの表示
i）ファイルタブを押下
![ファイルタブ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1283533/9a32d579-a3c9-ebfe-55af-b78c5d2a6a0a.jpeg)

ii）オプションを押下
![opusyonn.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1283533/f98863a1-c422-1720-e7b8-3c50b6ad8974.jpeg)

iii）リボンのユーザー設定　⇒　開発にチェック　⇒　OK押下
![リボンのユーザー設定.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1283533/9c0f8fb1-0173-cc09-c8a8-9df59cb2a313.jpeg)

iv）表示結果
![開発タブが表示された.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1283533/5c658648-07bf-0685-f341-a82102d76ac0.jpeg)

以上です。
uninitialized constant User::FILL_INにハマった時に

Railsチュートリアル第２章
リスト2.17

```ruby:user.rb
class User < ApplicationRecord
  has_many :microposts
  validates FILL_IN, presence: true    # 「FILL_IN」をコードに置き換えてください
  validates FILL_IN, presence: true    # 「FILL_IN」をコードに置き換えてください
end
```

当初愚かにも「FILL＿IN」の部分も書き換えずに書いていた
それで出たエラーがこれである
![スクリーンショット 2021-05-26 22.13.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236083/8fede33e-368e-d4ca-ac4e-715617dc8b62.png)



```ruby:user.rb
class User < ApplicationRecord
  has_many :microposts
  validates :name, presence: true
  validates :email, presence: true
end
```

コード中に使われているシンボルを思い出し、書き直した
しかし、エラ〜は出たままなのだ
それはリロードをして確認していたからなのでした😓
エンタイトルメント管理 ⇒ 顧客のケースでのエンタイトルメントの使用

１．組織ではどこでマイルストンを作成できますか?
２．正しい文はどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/cb4169b0-e257-c32a-a44a-2c34bce3f42d.png)
Yoctoを試す（その２：PC向け）

# x64(PC向け)のBuild
[その１](https://qiita.com/infinite1oop/items/e2d00741a234197fe42e)の続き。検索すると、YoctoにてRaspberryPi用Buildの記事は多数見つかるが、PC向け(x64用Build)のものはあまり見つからないので、作業記録をここに残す。

## 開発環境
Hardware: Mac mini Late 2014, Core i5 2.6GHz, 16GB
OS: Lubuntu 20.04 LTS

## 準備
### 必要なツール類のインストール
```
$ sudo apt-get install gawk wget git diffstat unzip texinfo gcc build-essential chrpath socat cpio python3 python3-pip python3-pexpect xz-utils debianutils iputils-ping python3-git python3-jinja2 libegl1-mesa libsdl1.2-dev pylint3 xterm python3-subunit mesa-common-dev
$ git clone http://git.yoctoproject.org/git/poky
$ git clone git://git.openembedded.org/meta-openembedded

```

上記の情報は多数見つかるので、説明省略。

### x64(PC)向け
本家サイトの[meta-intel](https://git.yoctoproject.org/cgit.cgi/meta-intel/tree/README)をもとに進める。

```
$ git clone git://git.yoctoproject.org/meta-intel
```

### poky
```
$ source poky/oe-init-build-env build
```

### conf/local.conf
下記を追加。

```
MACHINE ?= "intel-corei7-64"
```
64bit用には「intel-corei7-64」を設定すると、[本家サイト](https://git.yoctoproject.org/cgit.cgi/meta-intel/tree/README)に記載有り。

### conf/bblayer.conf
全てを下記に記載。

```
# POKY_BBLAYERS_CONF_VERSION is increased each time build/conf/bblayers.conf
# changes incompatibly
POKY_BBLAYERS_CONF_VERSION = "2"

BBPATH = "${TOPDIR}"
BBFILES ?= ""

BBLAYERS ?= " \
  /home/undeux3/proj/yocto/poky/meta \
  /home/undeux3/proj/yocto/poky/meta-poky \
  /home/undeux3/proj/yocto/poky/meta-yocto-bsp \
  /home/undeux3/proj/yocto/meta-openembedded/meta-oe \
  /home/undeux3/proj/yocto/meta-openembedded/meta-networking \
  /home/undeux3/proj/yocto/meta-openembedded/meta-python \
  /home/undeux3/proj/yocto/meta-intel \
  "
```
「meta-intel」が必須、「meta-openembedded」については適当に選んだ。PC向けにどれが必須かまでは未調査。

## Build
```
$ cd build
$ bitbake core-image-sato
```

途中、[その１](https://qiita.com/infinite1oop/items/e2d00741a234197fe42e)と同じFetch Errorがあったが、5-6時間かかってBuild完了。また、86GBもの容量が必要であった。

## USBスティックへのイメージ書き込み
```
$ cd tmp/deploy/images/intel-corei7-64
$ sudo dd if=core-image-sato-intel-corei7-64.wic of=/dev/sdf status=progress
$ sync
$ eject /dev/sdf
```
「/dev/sdf」は環境により異なる。

## USB起動
Macbook AirにUSBスティックを差し込み起動させた状況を表示。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/0a3aedab-62e0-90ee-8b3c-b640eb89c9ec.jpeg", width=80%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/4f4cc0db-c662-3cc4-e49d-15e81a373dd5.jpeg", width=80%>

## SATA HDD起動
同じような方法で、SATA HDDにイメージ（wicファイル）を書き込み、自作PCにそのHDDを入れたが起動せず。調査すると、[これら](https://www.javaer101.com/ja/article/1137975.html)などの記事から、BIOS起動用のイメージであるhddimgファイルを作れば起動するようなので、トライして書き込むと起動成功（写真などは省略）。そのためには、local.confに記載追加（＆Build）が必要。

### conf/local.conf
```
IMAGE_FSTYPES += "wic hddimg"
```
IMAGE_FSTYPESに指定できるタイプについては、[ここ](https://www.yoctoproject.org/docs/2.5/ref-manual/ref-manual.html)のIMAGE_TYPESを参照されたし。

### SATA HDDへのイメージ書き込み
```
$ sudo dd if=core-image-sato-intel-corei7-64.hddimg of=/dev/sdf status=progress
```

## その他参考にしたサイト
[こちら](http://minnowboard.outof.biz/Yocto_Project.html)など。
Flutter ローカルの画像を表示させサイズを指定

#ローカルに画像を用意
![スクリーンショット 2021-05-26 21.56.55.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/3e64acb6-5117-fe4b-b153-533b5e33b019.jpeg)
Flutter プロジェクトの中に、`assets`フォルダを作りその中に`images`フォルダを作ります。

`assets/images/unnamed.png`というパスになります。
この画像を表示させます。

#pubspec.yamlに画像の置き場所を設定する
デフォルトでは下記のようにコメントアウトされているかと思います。

```yaml:pubspec.yaml
flutter:
    ...(省略)...
  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
```

`assets:`から下の部分をコメントから以下のように編集します。

```yaml:pubspec.yaml
flutter:
    ...(省略)...
  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/unnamed.png
```

ここでの`assets/images/unnamed.png`は最初に画像を設置したパスのことですね。

**※インデントの問題でエラーが発生しやすいので要注意です！元のインデントを崩さないように編集しましょう！**

#サイズを指定して画像を表示

```dart
            Container(
                width: 154,
                height: 230,
                child: Image.asset(
                  'assets/images/unnamed.png',
                  fit: BoxFit.contain,
                ),
              ),
```

サイズを指定して表示するために`Container`のchildに`Image`を設置
【ExcelVBA図解】参照設定の方法（Microsoft HTML Object Library/Microsoft Internet Controls）

はじめに
ExcelVBAで参照設定の方法がわからない方へ向けて参照設定の方法を図解で説明する記事です。ここでは「Microsoft HTML Object Library」と「Microsoft Internet Controls」を参照設定します。

1、開発タブのVisual Basicを押下
![開発タブ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1283533/7eae9d42-17c5-a785-1f05-65cdec5cc0d6.jpeg)

2、ツールタブの参照設定を押下
![VBE.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1283533/e3b48f58-930b-fd34-2bd2-146d1d5c6cf3.jpeg)

3、目的のライブラリにチェックを入れてOKを押下
![参照設定.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1283533/92ccc8b9-9fa8-708e-1a24-c73e08a08940.jpeg)

以上です。
preg_matchで元の文の大文字・小文字を維持する

#問題
WordPressで、検索ワードの部分をハイライトする機能を作成している際に問題に直面しました。なお、その際に参考としていた教本は「 WordPress 仕事の現場でサッと使える！デザイン教科書」です。

問題のコードがこちら↓

```php
// 検索文字
$string = get_search_query();
// 検索対象
$text = preg_replace('|' . $string . '|i', '<span class="highlight">' . $string . '</span>', $text);
```

試しに、検索対象を「HELLO WORLD」、検索文字を「hello」として処理を実行します。想定としては、「<font color="DarkOrange">HELLO</font> WORLD」のようになるはずが、「<font color="DarkOrange">hello</font> WORLD」というように検索文字が反映されてしまいました。

#サブマッチ文字列（$0,$1,...）を使おう！
正規表現による置き換えでは、置き換え後の文字列に置き換え前のマッチした文字列を含めることができます。それが、サブマッチ文字列の役割です。＄0にはマッチした文字列全体、＄1,＄2,...にはそれぞれカッコごとのサブマッチ文字列が入っています。

これを使い、先程のコードを修正します。

```php
// 検索文字
$string = get_search_query();
// 検索対象
$text = preg_replace('|(' . $string . ')|i', '<span class="highlight">$0</span>', $text);
```

パターン文字列に括弧を加え、$stringを'＄0'に変更してください。これで「<font color="DarkOrange">HELLO</font> WORLD」のようになったはずです。もし、うまくいかない場合は、$0の部分を適宜＄1,$2などに変更してください。
Docker環境のPyInstallerでキレイにExe化する

# はじめに

PyInstallerでは生成物の肥大化を防ぐため、専用の仮想環境を用意して、その中でビルドしようという話があります。
しかし、面倒です。
普段はDocker環境で開発していることが多いので、わざわざビルドのためだけに仮想環境を作りたくないですね。

ということで以下の方法により、**ローカル環境を汚すことなく、最小サイズのExeファイルただ1つ吐き出させる**ことができます。

---

Mac用の実行ファイルはMac上でしか生成できないらしいので([参考](https://github.com/cdrx/docker-pyinstaller/issues/96))、
本記事はWindowsまたはLinuxユーザ向けの情報となります。

ここではWindowsでの方法を載せますが、Linuxの場合もほぼ同じです。
下記の通り読み替えてください。

|Windows|Linux|
|-|-|
|pyinstaller-windows|pyinstaller-linux|
|main.exe|main|

# 手順

<https://github.com/cdrx/docker-pyinstaller>

※詳細は上記を参照されるとし、アレンジした使い方を述べます。

---

現在のディレクトリ構成は次のようになっています。

```bash
.
├── main.py
└── requirements.txt
```

下記のワンライナーを実行します。(WSLで実行しました。)

```bash
docker run --rm -v "$(pwd):/src/" cdrx/pyinstaller-windows -c \
  "pip install -r requirements.txt && \
  pyinstaller main.py --onedir --onefile --clean && \
  mv dist/main.exe main.exe && \
  rm -rf __pycache__/ build/ dist/ main.spec"
```

すると、Exeファイルが生成されます。

```bash
.
├── main.exe
├── main.py
└── requirements.txt
```

# 簡単な解説

```bash:1行目
docker run --rm -v "$(pwd):/src/" cdrx/pyinstaller-windows
```

`cdrx/pyinstaller-windows`イメージから使い捨てのコンテナを立て、カレントディレクトリをそのコンテナにマウントします。

```bash:2行目以降
  "pip install -r requirements.txt && \
  pyinstaller main.py --onedir --onefile --clean && \
  mv dist/main.exe main.exe && \
  rm -rf __pycache__/ build/ dist/ main.spec"
```

全体の流れとしては、

1. pipで依存関係をインストール
1. PyInstallerでExe化
1. Exeファイルの場所を移動
1. PyInstallerによって生成されたゴミを削除

`requirements.txt`が不要なら、`pip install -r requirements.txt && \`は削除しておきます。

その他の依存関係があれば、`pyinstaller ...`より前でインストールします。(`/src/`にホスト側のカレントディレクトリをマウントしているので、わざわざインストールするモノもなかろうかと思いますが)

実はこのあたり、単に`-c "/entrypoint.sh"`とだけ書いてもいいのですが、個人的なこだわりでアレンジしています。

# ちょっとしたコツ

## 開発・実行環境における環境差について

まず、当然ながら`main.py`はWindowsで動くプログラムである必要があります。
具体的には、下記のコードはDocker環境(Linux)では動くものの、Windows上では動作しません。

```python:main.py
with open("data.json", "r") as f:
    data = json.load(f)
```

実際には、`encoding`を指定する必要があります。

```python:main.py
with open("data.json", "r", encoding="utf-8") as f:
    data = json.load(f)
```

## CLIアプリではひと工夫

プログラム終了時にはその旨が黒い画面に表示され続けると親切です。
急に画面が消えると、正常終了したかどうか不安になりますから。
何も工夫しなければそのまま閉じてしまうので、プログラムに一手間加えます。

```python:main.py
def main():
    print("hello!")

if __name__ == "__main__":
    main()

    import subprocess
    subprocess.call('PAUSE', shell=True)
```

```bash
hello!
続行するには何かキーを押してください . . .
```

## 実行中にコンソールを表示したくない場合

GUIアプリの場合など、稀に該当すると思います。
この場合、pyinstallerの引数に`--noconsole`を追加します。

```
docker run --rm -v "$(pwd):/src/" cdrx/pyinstaller-windows -c \
  "pip install -r requirements.txt && \
  pyinstaller main.py --onedir --onefile --clean --noconsole && \
  mv dist/main.exe main.exe && \
  rm -rf __pycache__/ build/ dist/ main.spec"
```
Python Django VSCode

#VSCodeでDjango開発をする
勉強した内容、はまった内容を記述する


##環境構築
- VSCode
- Python
- pip
- pipenv
- flake8
- autopep8
- django
- Windows 10

仮想環境にpipenvを選択
他にはvirtualenvやanacondaなどあるが、比較的シンプル、簡単に感じたpipenvを選択
※virtualenvは痒い所に手が届きそうなイメージがあるが、そこはPythonに慣れてきてからで勉強しよう
Azure DevOps Pipelineを初めて使う人が、学習する方法


# はじめに
本ドキュメントでは、Azure DevOpsをこれから使う方の取っ掛かりになる学習法について記述したいと思います。
多くの方は、マイクロソフトの公式ドキュメントか、ネット検索で見つけたブログ記事を見ながら学習を初めているのではないでしょうか？
Azure DevOps Pipelineには、GUIを使った設定方法とYAMLファイルを使った設定方法の2つが存在しています。
GUIの方が古く見立たない位置にボタンがありマイクロソフト的には、YAMLを使った方式を推奨しているみたいです。
ネット検索してみると、どちらかというとYAMLの記述方法を指南するブログ記事が多く、一通り使えるようになった人が、高度なTipsを公開していることが多いのだと思います。
ずぶの初心者向けの記事は、見当たりませんでした。
また、Azure DevOpsがとっつきにくいのは、操作に慣れが必要という所に起因します。ここは場数を踏むしかありません。
では、どのように学習したら良いかと言うと。
Azure Potalに用意されているDevOps Starterを使うのが、最もわかりやすいと思います。
DevOps Starterを使うと実際に動作するプロジェクト一式をAzure PotalとAzure DevOpsへ生成してくれます。
実際に動作する一式を見れるのですから、これ以上の教材はありません。
サンプルプロジェクトを動かしてみたり、設定を追っていくうちに、操作にも慣れていくという寸法です。
ちなみに、生成されたプロジェクトのパイプラインは、GUI設定になっています。
古く推奨されていないとはいえ基本的なことはできますので、まずはGUIで慣れて、複雑な設定が必要になったらYAML設定へステップアップするのが良いでしょう。

# サンプルの生成
## DevOps Starterは、Azure Potalの検索で、見つけてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7839/183d7589-1ed1-93f4-b457-0ded277aeedf.png)

## 選んだサブスクリプションに、サンプルを生成できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7839/da5ac50a-9262-348e-1aad-34eb631358ce.png)

## 連携するサービスを切り替えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7839/2b87d0b8-04be-f58c-4241-64aa0d258f47.png)

## さすがマイクロソフトの子会社Githubも選べます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7839/cf15b67f-7e4d-912d-e06d-77d3367f48ff.png)

## 様々なフレームワークが選べます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7839/c692c629-fdc5-5f15-3dfd-61a84dde49fd.png)

## 今回は、.Net Frameworkを選択しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7839/2ec751bc-4e60-19c8-bc19-1008d46cc148.png)

## デプロイ先は、WindowsのAppServiceにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7839/c11f0aea-3d3d-8313-5e7f-84cc2d593af7.png)

## サンプルとして生成するリソースの情報を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7839/d3c613a4-9644-6e8a-956e-21eb164a8ef0.png)

## 少し待つとダッシュボード的な画面が表示されて、各リソースを簡単に開くことができるようになります。
ちなみに、不必要になって、この画面で、Deleteをすると此処で生成されたリソースは綺麗に一括削除してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7839/4fdbd1e0-e5ac-24f6-bf7d-ef38d2f81305.png)
【Chartkick/Groupdate】投稿したデータに基づいてグラフを表示する方法

#はじめに
体重を毎日記録しグラフで変化を可視化するアプリを作成するためにChartkick/Groupdateを使いシンプルなグラフ機能を実装しました。他の記事ではseedファイルに初期データをあらかじめ入れておきグラフを表示させていたので、ユーザーが投稿したデータをもとにグラフを表示させる方法を本記事では記します。

###環境
windows10
ruby 2.6.6
rails 6.0

###用意しておくもの
シンプルな投稿機能は用意しておいてください。
私は体重を記録するweightカラムを持った、postsテーブルを作りました。
また、自らの体重だけを表示したいため``devise``というgemを使ってログイン機能を実装しています。

#GOAL
ユーザーが投稿したデータをもとにグラフを作成する。
![スクリーンショット 2021-05-26 213621.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/57537912-efa0-8126-44d8-185f028bbba2.jpeg)


#実装
gemのインストールするために、Gemfileに[Chartkick](https://chartkick.com/)と[Groupdate](https://github.com/ankane/groupdate)のgemを追加します。

```Gemfile.
gem "chartkick"
gem 'groupdate'
```

```
$ bundle install
```
yarnでchart.jsをインストールします。

```
$ yarn add chartkick chart.js
```
``app/javascript/packs/application.js``に以下を追加します。

```app/javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "chartkick/chart.js"  //追記
```

自らの体重を記録していくので、``controller.rb``でログインしたユーザーのデータだけを取得するようにします。

```posts_controller.rb
def index
    @posts = current_user.posts
    @post = Post.new
  end
```

最後に、グラフを表示させるコードをviweファイルに記述します。



```index.html.erb

<%= column_chart @posts.where(created_at: 1.week.ago.beginning_of_day..Time.zone.now.end_of_day).group("date(created_at)").sum(:weight) %>
```
たったこれだけでグラフを表示することができます！
whereメソッドで直近1週間に記録された体重データを引っ張ってきました。


また、以下のようにすることでグラフをカスタマイズすることもできます。

```
<%= column_chart @posts.where(created_at: 1.week.ago.beginning_of_day..Time.zone.now.end_of_day).group("date(created_at)").sum(:weight)
, xtitle: "日付"  
, ytitle: "体重(kg)"
, width: "600px"
, height: "200px"
,colors: ['#ffff00'] %>
```
![スクリーンショット 2021-05-26 201535.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/c61fe3e2-4043-31ca-4782-dcd9e9fe385f.jpeg)



ちなみに、様々な種類のグラフも表示させることができます。
・円グラフ

```
<%= pie_chart ~~~ %>
```

・折れ線グラフ

```
<%= line_chart ~~~ %>
```

・横棒グラフ

```
<%= bar_chart ~~~ %>
```

・散布図

```
<%= scatter_chart ~~~ %>
```

まだ他にもあるので``chartkick``の[公式リファレンス](https://chartkick.com/)をご覧ください！

#参考記事
[Railsでシンプルなグラフを扱うならchart-js-rails よりchartkickを使うべし](https://qiita.com/Y_uuu/items/0d57748954c7cdb9bbcb)
スイフト勉強_データタイプ

今日はスイフトの基本データタイプについて見ていこうと思います。
データタイプとは、番組内で扱われるデータの種類のことですが、スイフトのデータタイプは構造体をタイプの基盤とし、
スイフトの多様な機能を使い分けて実現しています。

ここで重要なことは、スイフトの基本データタイプがすべて構造体を基盤として具現化されているという点です。
そして、スイフトのデータタイプはすべて大文字で始まる!!
ex)
int X Int O, double X Double O...

###Bool 
Boolタイプはtrueとfalseだけ持つデータタイプです。

```swift
var {name} : Bool = true
{name}.toggle() // true -> false, false -> true
```
###Character
characterは文字を意味します。 スイフトは、ユニコードが対応する全ての言語および特殊記号などを使用することができます。

```swift
var {name} : Character = "a"
var {name2} : Character = "♡"
```
###Int
Intは、定数タイプを意味します。 Intには、8 ビット、16 ビット、32 ビット、64 ビットの形態が存在します。
したがって、Int8、Int16、Int32、Int64と保存できるデータの大きさによってタイプが分離されます。
これは、システム·アーキテクチャによって異なりますが、32ビットアーキテクチャではInt32がInt、64ビットアーキテクチャではInt64がIntとなります。

```swift
var a : Int
var b : Int8
var c : Int16
var d : Int32
var e : Int64

print(Int.max) //9223372036854775807
print(Int8.max) //127
print(Int16.max) //32767
print(Int32.max) //2147483647
print(Int64.max) //9223372036854775807
```
###UInt 
UIntは、音の整数を含まない整数タイプで、大体Intタイプと類似しています。
違いはIntタイプより量の整数を大きく入力できる点です。
開始点が0で始まるため、データの大きさを考慮したmaximumは
音の整数表記も含めたIntに比べて、その最大値がより大きく持てます。
```swift
var ua : UInt
var ub : UInt8
var uc : UInt16
var ud : UInt32
var ue : UInt64

print(UInt.max) //18446744073709551615
print(UInt8.max) //255
print(UInt16.max) //65535
print(UInt32.max) //4294967295
print(UInt64.max) //18446744073709551615
```
###Float, Double 
FloatとDoubleは、実数タイプで浮動小数タイプと呼びます。 スイフトでは、64ビットまで表現するDoubleと、32ビットまで表現するFloatに区分されます。
そしてFloatとDoubleは値に差が出るんですが
Floatは自動的に四捨五入してしまう傾向があります。 DoubleはFloatよりその場合が少ないです。

```swift
var {name} : Float = 12.345
var {name2} : Double = 123.456
```
###String
Stringは、文字列タイプで、characterと同様にユニコードの値を持つことができます。

```swift
var {name} : String = String()
{name} = "ab" + "cd"

var {name2} : String = "hello"

{name}.count // String factors num
{name}.isEmpty // is it Blank? -> true or false

{name} == {name2} // false
{name} != {name2} // true

{name}.hasPrefix("a") // is the prefix -> true or fasle
{name}.hasSuffix("d") // is the Suffix -> true or false

{name}.uppercased() // ABCD
{name}.lowercased() // abcd

var {text} : String = """
abc
def
ghi
"""
print({text}) 
/*
abc
def
ghi
*/
```

###特殊文字
スイフトには、文字列内で一定の機能を果たす特殊文字があります。 バックスラッシュを組み合わせて射影するが、その中で多用されるものは次のものです。

```swif
\n   改行します
\\   バックスラッシュ表記します。
\"   大きい引用符を表記します。
\t   タブを一度します。
\0   文字列終了を知らせるnull文字
```
最後に簡単に
###Any, AnyObject, nil
Anyは、スイフトのすべてのデータタイプを使用できる決まっていないことを知らせるタイプです。
Any ObjectはAnyより限定された値で、クラスのインスタンスのみ割り当てることができます。
nil は、特定のタイプではなく、何もないことを知らせる値です。 Javaでのnullですよ。

次に、簡単に変数型変換法について見てみましょう。
Flutter のバージョン管理 fvmのアップグレード方法


# 前提条件

- homebrewでfvmをインストールしている

# 開発環境

・PC:macOS Big Sur

# 内容

Flutterのバージョン管理としてfvmを使用しているが、fvmのバージョンが更新できなかった問題。

fvm flutter runを実行をしたときに、ターミナルに以下のようなメッセージが表示された。

```
FVM Update Available 1.3.7 → 2.0.5 
Changelog: https://pub.dev/packages/fvm/changelog
Run pub global activate fvm to update
```

fvmの新しいバージョンが使えるみたいなので、とりあえず実行してみたが、バージョンが変わらなかった。

```
% pub global activate fvm
Package fvm is currently active at version 1.3.7.
　　　・
　　　・
　　　・
Activated fvm 1.3.7.
```

fvmのFAQページには、dartSDKのバージョンと互換性のあるfvmのバージョンが使えるようになるらしいとのこと。

自分の環境にはdartをインストールしておらず、flutter内のdartを使用していた。
そのため、現状のdartのバージョンはflutter.devからインストールしたままなので、dartのバージョンは2.10.1のまま。

```
% flutter --version           
Flutter 1.22.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f30b7f4db9 (8 months ago) • 2020-10-08 10:06:30 -0700
Engine • revision 75bef9f6c8
Tools • Dart 2.10.1
```

# 解決方法

homebrewでdartをインストールしていないので、flutterのバージョンをあげて、dartのバージョンも一緒に上げる。

fvmでインストールしたflutter 2.0.6をグローバルで使用できるように設定。

```
% fvm global 2.0.6
```

local で使用したい場合はこちら
```
% fvm use 2.0.6
```

flutter.devからインストールしたflutterのパスを削除し、fvmでデフォルトにしたflutterのパスを通す。

```~.zshrc
export PATH="$PATH:$HOME/development/flutter/bin"  <- 削除

export PATH="$PATH:$HOME/fvm/default/bin"　　　　　　<- 追加
```

もう一度、flutterのバージョンを確認すると、デフォルトで指定した、バージョンになっている。

```
% flutter --version
Flutter 2.0.6 • channel unknown • unknown source
Framework • revision 1d9032c7e1 (4 weeks ago) • 2021-04-29 17:37:58 -0700
Engine • revision 05e680e202
Tools • Dart 2.12.3
```

この状態で、fvmを更新する。

```
 % pub global activate fvm
Package fvm is currently active at version 1.3.7.
　　　・
　　　・
　　　・
Installed executable fvm.
Warning: Pub installs executables into $HOME/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):

  export PATH="$PATH":"$HOME/.pub-cache/bin"

Activated fvm 2.0.5.
```

今度はしっかりとfvmのバージョンが上がった。


# 参考

https://fvm.app/docs/guides/faq#cannot-install-latest-version-of-fvm

https://zenn.dev/welchi/articles/d8f120adeebc7a85ed17

# 関連記事

https://qiita.com/mkurom/items/f45a774d84ef534c05ed
【ExcelVBA図解】参照設定の方法（Microsoft ActiveX Data Objects x.x Library）

はじめに
ExcelVBAで参照設定の方法がわからない方へ向けて参照設定の方法を図解で説明する記事です。ここでは「Microsoft ActiveX Data Objects x.x Library」を参照設定します。

1、開発タブのVisual Basicを押下

![開発タブ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1283533/74b179a5-590c-576c-c7d6-8874af03e5c2.jpeg)

2、ツールタブの参照設定を押下

![VBE.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1283533/581eaf54-0b47-5833-676a-22940879b361.jpeg)

3、目的のライブラリにチェックを入れてOKを押下

![参照設定.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1283533/ca04cb69-5da0-c47b-87aa-e8757c5a75cd.jpeg)

以上です。
junoのmatplotlibで日本語表示

iosでpythonが動くjunoですが、標準フォントが見つからず、日本語表示できなかったので、直接指定する方法です。

カレントディレクトリに、適当にダウンロードしたttfフォントを置いた場合です。

```python
from matplotlib import pyplot as plt
from matplotlib import font_manager as fm, rc
font_files = fm.findSystemFonts(fontpaths='./')
font_list = fm.createFontList(font_files)
fm.fontManager.ttflist.extend(font_list) 
rc('font', family=font_list[0].name)
```
【AWS】EBSのボリュームタイプ

#プログラミング勉強日記
2021年5月26日

#EBSのボリュームタイプ
　EBSには5つのボリュームタイプがある。ユースケースに応じて性能やコストが異なるので5つの中から選択する。
　SSD形式は汎用SSDとプロビジョンドIOPS、HDD形式はスループット最適化HDDとコールドHDDの2種類ずつある。
　
##汎用SSD
　最もよく使われるもので、一般的なアプリを作るときになど「まず」選ぶことが多い。
　ユースケース：仮想デスクトップ、低レイテンシを求めるアプリ、小・中規模のデータベース、開発環境
　サイズ：1GB ~ 16TB

##プロビジョンドIOPS
　非常に性能が高く値段も高く、I/O性能非常に高いEC2インスタンスを作る際に使用する。スループット最適化HDDよりもスループット性能は高い。
　ユースケース：高いI/O性能が必要なNoSQLやアプリ、10,000IOPSや160MB/sを超えるワークロード大規模データベース、NitroシステムAmazon EC2インスタンス・EBS最適化インスタンスタイプで高速化
　サイズ：4GB ~ 16TB

##スループット最適化HDD
　IOPSやスループット性能は高い。プロビジョンドIOPSに比較して性能は落ちるが値段が安い。
　ユースケース：ビックデータ取得、DWH、大規模なELT処理やログ分析、ルートボリュームには利用できない
　サイズ：500GB ~ 16TB

##コールドHDD
　ログデータなどのアクセス頻度が低いデータやバックアップやアーカイブをEC2インスタンスとアタッチして実施したい場合に使用する。S3を使うことの方が多いが、EC2と一体でバックアップ処理をインスタンス上で作りたい場合に使用する。
　ユースケース：ログデータなどのアクセス頻度が低いデータ、バックアップやアーカイブ、ルートボリュームには利用できない
　サイズ：500GB ~ 16TB

##マグネティック(Magnetic)
　旧世代のボリュームで、基本的には利用しない。データのアクセス頻度が低いワークロード。
　サイズ：1GB ~ 1TB
【Rails】Rspecの出力結果を見やすくする方法

# やり方

### Rspec実行コマンドに「-f documentation」オプション付与する
```terminal:ターミナル
$ bundle exec rspec -f documentation　spec/models/robo_test_spec.rb
```

# 比較

### オプションを付与していない場合
![スクリーンショット 2021-05-26 20.48.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/f865be3b-abaf-1e25-0db4-fa7dd5807e5f.png)

### オプションを付与した場合
![スクリーンショット 2021-05-26 20.48.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/bf955da3-bb38-a863-4bcf-8924edb856e4.png)
[Ruby]関数を作成する上で心がけること

## ラベル付き引数

* 引数名がはっきりしているので渡す内容がわかりやすい。
* rubymineのIDEなどで自動保管してくれる
* 渡し忘れの引数があればエラーが出る
* デフォルト値も指定できるのでデフォルト値指定した分は省力できる
* 引数の順番気にしなくていい

```
# 定義
def some_method(user: , require: false)
end

# 呼び出し型
some_method(
   user: current_user
)
some_method(
   user: current_user,
   require: true
)
```

## 普通の引数

* rubymineのIDEなどで引数名は把握できる
* 渡し忘れの引数があればエラーが出る
* デフォルト値も指定できるのでデフォルト値指定した分は省力できる
* 引数の順番を気にしなくてはいけないので数が多いと面倒
* １・２個の引数でメソッド名からもわかりやすければ楽
  * User.find(1)  / User.find_by(id: 1)   左が楽

```
def some_method(user, require = false)
end

some_method(
  current_user,
  true
)
```

## ハッシュの引数

* 引数がわからない
* 引数の増減で引数の定義を変更しなくてよい（唯一のメリット）
* hash名が入るので打つべき文字数は増えがち
* 何かしらの構造体やモデルのインスタンスを渡すならばそこに責務が発生するが、ただのハッシュだと中身は全く何がくるか、何が必要かわからない

```
def some_method(arg={})
   user = arg[:user]
   raise unless user
   require = arg[:require] || false
end

some_method({
  user: current_user,
  require: true
})
```
【Rails】Rspecで特定のテストを流す方法まとめ

# 行数を指定して特定のテストを流す

### ①下記2点のいずれかを行う

#####it式をfitと記述する

```ruby
fit 'trueはtrueであること' do
  expect(true).to eq true
end
```

###### it式に「focus: true」オプションを付与する

```ruby
it 'trueはtrueであること', focus: true do
  expect(true).to eq true
end
```

### ②Rspec実行コマンドでファイルの末尾に行数を指定する

```terminal:ターミナル
$ bundle exec rspec spec/models/robo_test_spec.rb:20
```

# タグ付けを行って特定のテストを流す
```ruby
describe '四則演算', study: :calc do
  context '足し算', calc_type: :addition do
    it '1 + 1は2であること', easy: true do
      expect(1 + 1).to eq 2
    end

    it '100 + 200は300であること', difficult: true do
      expect(100 + 200).to eq 300
    end
  end

  context '引き算', calc_type: :subtraction do
    it '1 - 1は0であること', easy: true do
      expect(1 - 1).to eq 0
    end

    it '300 - 200は100であること', difficult: true do
      expect(300 - 200).to eq 100
    end
  end
end
```

```terminal:ターミナル
$ bundle exec rspec spec/models/robo_test_spec.rb --tag study:calc
$ bundle exec rspec spec/models/robo_test_spec.rb --tag calc_type:addition
$ bundle exec rspec spec/models/robo_test_spec.rb --tag easy # Boolean指定の場合はキーのみでOK
```
【初心者向け】ノンデザイナーでも、一手間加えるだけでグッと印象が変わるCSS

#どうも7noteです。一手間加えることでwebデザインをレベルアップできるCSSの Tips

CSSひと手間でグッと引き立てる、webデザインTipsを紹介。
同じ技術を使っていても、使っているCSSや使い方だけで、WEBサイトの印象はグッと良くできます。

デザイナーでなくても簡単に使えるCSSをまとめました。


## テキスト系

### ・ webフォントを使う

```html
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@100&display=swap" rel="stylesheet">

<style>
h1 {
  font-family: 'Josefin Slab', serif;
}
</style>
```

![sample01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/bd14bdad-0e52-4c7b-646e-5994e1475840.png)

GoogleのWEBフォントのサイト → https://fonts.google.com/

### ・ マーカーのような下線を引く

```css
p span {
  background: linear-gradient(transparent 60%, #FEB556 60%);
}
```
![sample02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/e3fcb5ae-fbec-22bc-d2ab-54006690c6db.png)




## 画像系

### ・ 丸みのある画像に変える

```css
img {
  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
}
```

![sample03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/1549556f-ea35-4ee0-bdec-1c5ef501724a.png)


### ・ chromeで画像がぼやけるのを防ぐ

```css
img {
  -webkit-backface-visibility: hidden;
}
```

### ・ imgでもbackground-size:coverみたいに親要素全体にかかるように画像をトリミングする

```css
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```

※親要素に幅と高さの指定がなければ効かない。

## ボタン系

### ・ 影や角丸をつける

```style.css
a {
  color: #333;
  text-decoration: none;
  border-radius: 50px;        /* 角丸にする */
  padding: 10px 20px;
  background: #ffcccc;
  box-shadow: 0 3px 3px #ccc; /* 影をつける */
}
```

![sample04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/a044b52e-444c-e0d7-ed86-c401dfd51ee9.png)

### ・トランジション

```css
/* 以下を追記 */
a {
  transition: .3s;
}

a:hover {
  color: #fff;
  background: #ff0000;
}
```

transitionを指定しておくことで、hover時の変化をなめらかにできます。

![sample05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/d6d2423c-b491-0fdc-f99c-2809489fbfc3.gif)

### ・ ホバー時色反転

ソースは上と同じ。

![sample05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/d6d2423c-b491-0fdc-f99c-2809489fbfc3.gif)

## フォーム系

### ・ オリジナルラジオボタン・チェックボックス

ソース → [こちら](https://qiita.com/7note/items/d6edd3d3d9b960d2707f)

![kansei.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/fc7ea4c2-9b3b-0cf9-bbe6-d2ee0224ba4f.gif)

## まとめ

CSSだけでひと手間加えるTipsを紹介しました。
ここでは紹介しきれていないテクなどもまだまだたくさんありますし、まだ非対応のブラウザがあるプロパティが使えるようになればそこから新しい手法なんかも生まれてくると思います。

時代のデザインの流行りなんかもあるので、様々なサイトを見て技術やテクニックを盗んでいくとスキルアップにい繋がりますよ！

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
ac-library-rb で解く AtCoder ABC 137 D

# はじめに
*[AtCoder Problems](https://kenkoooo.com/atcoder/#/)* の Recommendation を利用して、過去の問題を解いています。
AtCoder さん、AtCoder Problems さん、ありがとうございます。

# 今回のお題
*[AtCoder Beginner Contest D - Summer Vacation](https://atcoder.jp/contests/abc137/tasks/abc137_d)*
<font color="lightblue">Difficulty:1313</font>

今回のテーマ、優先度付きキュー

*[ac-library-rb](https://github.com/universato/ac-library-rb)* は、AtCoder Library (ACL)のRuby版です。

その ac-library-rb がなんと`Gem`化されています。
*[ac-library-rb (rubygems)](https://rubygems.org/gems/ac-library-rb)*
`AtCoder`にインストールされる日が待ち遠しいですね。
# 優先度付きキュー
```ruby.rb
# Priority Queue
# Reference: https://github.com/python/cpython/blob/master/Lib/heapq.py
class PriorityQueue
  # By default, the priority queue returns the maximum element first.
  # If a block is given, the priority between the elements is determined with it.
  # For example, the following block is given, the priority queue returns the minimum element first.
  # `PriorityQueue.new { |x, y| x < y }`
  #
  # A heap is an array for which a[k] <= a[2*k+1] and a[k] <= a[2*k+2] for all k, counting elements from 0.
  def initialize(array = [], &comp)
    @heap = array
    @comp = comp || proc { |x, y| x > y }
    heapify
  end

  attr_reader :heap

  # Push new element to the heap.
  def push(item)
    shift_down(0, @heap.push(item).size - 1)
  end

  alias << push
  alias append push

  # Pop the element with the highest priority.
  def pop
    latest = @heap.pop
    return latest if empty?

    ret_item = heap[0]
    heap[0] = latest
    shift_up(0)
    ret_item
  end

  # Get the element with the highest priority.
  def get
    @heap[0]
  end

  alias top get

  # Returns true if the heap is empty.
  def empty?
    @heap.empty?
  end

  private

  def heapify
    (@heap.size / 2 - 1).downto(0) { |i| shift_up(i) }
  end

  def shift_up(pos)
    end_pos = @heap.size
    start_pos = pos
    new_item = @heap[pos]
    left_child_pos = 2 * pos + 1

    while left_child_pos < end_pos
      right_child_pos = left_child_pos + 1
      if right_child_pos < end_pos && @comp.call(@heap[right_child_pos], @heap[left_child_pos])
        left_child_pos = right_child_pos
      end
      # Move the higher priority child up.
      @heap[pos] = @heap[left_child_pos]
      pos = left_child_pos
      left_child_pos = 2 * pos + 1
    end
    @heap[pos] = new_item
    shift_down(start_pos, pos)
  end

  def shift_down(star_pos, pos)
    new_item = @heap[pos]
    while pos > star_pos
      parent_pos = (pos - 1) >> 1
      parent = @heap[parent_pos]
      break if @comp.call(parent, new_item)

      @heap[pos] = parent
      pos = parent_pos
    end
    @heap[pos] = new_item
  end
end

n, m = gets.split.map(&:to_i)
ab = Array.new(100000 + 1){ [] }
n.times do
  a, b = gets.split.map(&:to_i)
  ab[a] << b
end
ans = 0
pq = PriorityQueue.new
1.upto(m) do |i|
  next if ab[i].nil?
  ab[i].each do |e|
    pq << e
  end
  ans += pq.pop if !pq.empty?
end
puts ans
```
今はインストールされていないので`class`部分を追記する必要があります。

```upto.rb
1.upto(m) do |i|
```
最終日に近い日から貪欲に選択します。
# まとめ
+ 優先度付きキュー(Priority Queue) を解いた
+ ACL に詳しくなった
+ Ruby に詳しくなった