OmniAICreator/Qiita-1.07M huggingface dataset:
FPSのカメラを作る

マウスでFPSの用にカメラを動かすという仕組みを作ることがあると思います。
その場合、こんなコードを書きがちではないでしょうか。

```csharp
// 誤ったコード
void Update(){
    float sensitivity = 2;

    float yaw = Input.GetAxis("Mouse X") * sensitivity;
    float pitch = -Input.GetAxis("Mouse Y") * sensitivity;
    transform.rotation = transform.rotation Quaternion.Euler(pitch, yaw, 0);
}
```

ところが、マウスを回すように動かすとこのように水平線が傾いてしまいます。

![screen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985/bfd35f1f-1713-bd62-90db-771ff31b64c3.png)

なぜかというと、ピッチ(上下の首振り)とヨー(左右の首振り)は順序が違うためです。
結論から言えば、以下のコードを書けば、水平線が傾くことはありません。

```csharp
void Update(){
    float sensitivity = 2;

    float yaw = Input.GetAxis("Mouse X") * sensitivity;
    float pitch = -Input.GetAxis("Mouse Y") * sensitivity;
    transform.rotation = Quaternion.Euler(0, yaw, 0) * transform.rotation * Quaternion.Euler(pitch, 0, 0);
}
```

なお、これだとマウスを上に動かし続けるとそのうち逆さになります。
ということで、ピッチに上限下限を付けて一定以上首を振れないようにしましょう。

真上を0度として90度なら水平、180度なら真下を向くとして計算するといいです。

```csharp
    var forward = transform.rotation * Vector3.forward;
    var angle = Vector3.Angle(forward, Vector3.up);

    if (angle + pitch < 10f) { pitch = 10f - angle; }
    if (170f < angle + pitch) { pitch = 170f - angle; }
```
[CSS] MediaQueryを使わないで動的にフォントサイズを設定



[ CSS-Tricks ](https://css-tricks.com/)のWebページを眺めてたら気付いた手法。

```css
html {
  font-size: clamp(12px, calc(0.7rem + 0.25vw), 20px);
}
```

```js
clamp(<min>, <normal>, <max>)
// e.g.
//   min:    12px
//   normal: calc(0.7rem + 0.25vw)
//   max:    20px
```

- 1remはブラウザのデフォルトフォントサイズなので基本的に16pxになる
- `+0.25vw`によってViewWidthが変われば動的にフォントサイズも変わる。

### 使い所

ピクセルレベルでフォントサイズが指定されないようなWebサイトを作成するときに重宝する。

## REF

- [ CSS-Tricks ](https://css-tricks.com/)
- https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
Rails + webpacker + Vueな環境にESLintを導入

webpacker install:vueをしている前提です。


### パッケージインストール

```
$ yarn add -D eslint eslint-loader eslint-plugin-vue
```

### Loaderを設定しenvironment.jsを編集

config/webpack/loaders/eslint.jsを作成し以下を記述

```config/webpack/loaders/eslint.js
module.exports = {
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  options: {}
}
```

```config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const vue =  require('./loaders/vue')
const eslint =  require('./loaders/eslint')

environment.loaders.append('vue', vue)
environment.loaders.append('eslint', eslint)
module.exports = environment

```

### Lintルールの作成

.eslintrc.jsonをプロジェクト直下に作成し
ESLintルールを作成します。
[ESLint ルール 一覧](https://garafu.blogspot.com/2017/02/eslint-rules-jp.html)

```/.eslintrc.json
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "rules": {
    "semi": "error",
    "indent": ["error", 2],
    "quotes": ["error", "single"]
  }
```

セミコロンの付け忘れ、
インデントの字数、
Stringはシングルクオートのみ

の3つのルールを追加いたしました。

ここまで来たら

```
$ bin/webpack-dev-server
```

でwebpackerをコンパイルすると同時にESLintが走ります。

### チェックしたくないファイルを除外する

プロジェクト直下に.eslintignoreを作成し対象ファイルを記述すると自動で除外します。

```/.eslintignore
**/*.js
```
初心者がdockerでphpの開発環境を整える#4 [レンタルサーバーでdockerが使えない？]

#レンタルサーバーでdockerが使えない？
前回、docker Composeを用いてphpを打てるだけのローカル開発環境を作りました。実はこの時、サーバーを借りて、docker Hubも使って環境を全て同じ状態にできるようにしたいと考えてたんです。
そして、学習用なので無料又は低額のレンタルサーバーを借りてデプロイ（公開）までしたいと思っていました。

結果から言いましょう。
##レンタルサーバーでdockerは使えません
なんでも、レンタルサーバーにdockerをダウンロードできないらしい
レンタルサーバー大手のLサーバーさん、Sサーバーさん、Xサーバーさんも全て同じ回答でした。
他のレンタルサーバーさんにも数社問い合わせてみたけど多分、同じ感じ。
~~難しいかもですが、自己責任で試してみれば？　みたいな詐欺まがいな事言われたのは内緒~~
でもイニシャルであげた大手さんは返信早いし、回答も丁寧で好印象でした！
仕様的にレンタルサーバーは無理なのかな、残念…

##dockerが使えるサーバーは？
物理的なサーバーを借りるか、クラウドサーバーを借りるかだと思います。
というか、物理的にサーバー借りると高額になってしまうので個人の利用ではクラウドサーバーの一択だと思います。

有名どころだとAWSになるのかなぁ

##up主が使うサーバーは？
まだ決定ではありませんが、多分どこか大手のレンタルサーバーさんを借りようと思っています。
実は我慢できずに別のパソコンっでMAMPを入れてphpとMy SQLを触ってるんですが、これ以上学習する内容が増えると頭パンクしそうです。~~もう一つのパソコンバッテリー死んでるので早く今のパソコンでやりたい~~
dockerの本来の使い方とは変わりますが、レンタルサーバーの設定に合わせてdocker imageを作れたらいいかなと思ってます。

##初心者がdockerでphpの開発環境を整える 一覧
[初心者がdockerでphpの開発環境を整える#1 [dockerとは？]](https://qiita.com/fulu/items/30728918802b6a96520a "dockerとは？")
[初心者がdockerでphpの開発環境を整える#2 [dockerをインストールする]](https://qiita.com/fulu/items/b2c5504278115f440c59 "dockerをインストールする")
[初心者がdockerでphpの開発環境を整える#3 [docker imageの準備方法]](https://qiita.com/fulu/items/b85fa89afc002837510f "docker imageの準備方法")
[初心者がdockerでphpの開発環境を整える#4 [レンタルサーバーでdockerが使えない？]](https://qiita.com/fulu/items/ab599c73354151e8e80a "レンタルサーバーでdockerが使えない？")
GitHubフォークのやり方わからなくて調べたらものすごく簡単だった件。ついでにクローンとの違いも解説

# フォークとは？
フォークとは、簡単に言うと他の人が作ったリポジトリを丸ごと自分のアカウントにコピーをしてくることを言います。（これはリモートからリモートにコピーをすることで、GitHub上で完結しています。）

# クローンとの違いは？
よく比較されるものでクローンがあります。一見同じ意味なのでは...？！と思いますが、実際は違います。その違いは、**リモートからリモートにコピーをしたか、リモートからローカルにコピーをしたか**の違いです！

もっとかみ砕くと、フォークは、他の人のリモートであるGitHub上にあるリポジトリを、自分のリモートであるGitHub上にコピをーをすることです。そしてクローンは、自分のリモート上であるGitHubのリポジトリから、ローカルである自分のPCの作業ディレクトリにコピーをしてくることです。

最初は混同してしまうので注意が必要ですね。

# フォークのやり方は？
問題となっていたフォークのやり方ですが、先ほどの説明からフォークとは**「リモートからリモートにクローンをすること」**だと分かりました。これは**フォークがすべてGitHub上で起きていることで、ローカル環境は全く関係ない**ということです。

よって、GitHubで作業を行います。どのようにやるかというと、とても簡単でコピーをしたい他の人のリポジトリのURLに行き、**右上にあるForkをクリックするだけでした！！！**（※許可されていないとできないです。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673966/7f211d36-6da5-b974-77d3-a719fb087180.png)
そう、この↑画像の**一番右にある「Fork」をクリック**するだけで、フォークをすることはできました（笑）

同じ悩みの人に届くといいなと思います（笑）

# 最後に
最後までお読みになってくださりありがとうございます。もし、参考になったり、少しでも役に立った、良い記事だなと感じていただけましたら**"LGTM"**を押してくださるととても励みになります！！！お願いします！ポチっと押してくださいー！

この記事は、駆け出しエンジニアの筆者が自分のメモと理解向上のために、自分と同じ駆け出しエンジニアでも分かるように、分かりやすく解説することを目的とした記事です。誤った記載をしてしまうかもしれませんがご了承下さい。誤ってる際はコメントにてご指摘してくださると幸いです。

少しでも駆け出しエンジニアの方の力になれると幸いです。また、同じく駆け出しエンジニアの方々、一緒に頑張っていきましょう。

Twitterもやっているのでぜひフォローしてください→https://twitter.com/EngineerShige
WSL2でUbunutuのGUI環境を作る

#WSLからWSL2へ

HyperVを有効にしておく
パワーシェルでWSLをヴァージョン1から2へ変更
ここまでは前提...
次の設定がかなりはまって，３時間ほど溶けたので備忘録．

#GUI

###VcXservの設定
Additional parameters for VcXservに-acオプションを追加する
詳しくはこちら
https://docs.microsoft.com/en-us/windows/wsl/install-win10

export DISPLAY=:0.0ではだめで，

```:~/.bashrc
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0.0
```
に書き換える．
なぜならWSL2では別のIPアドレスを割り振られるようになったからです．

FIRE WALLでVcXservのプライベートネットワーク，パブリックネットワークの通信を許可しておく．

うまくX転送の設定できているか以下で確かめる．

```
$ sudo apt-get install x11-apps
$ sudo apt-get insatll x11-xserver-utils
$ sudo apt-get insatll dbus-x11
$ xeyes
```



###GUI環境をインストール

gui環境もGNOME,xfceなどいろいろあって，．．．

```:日本語フォント用
sudo apt install fonts-ipafont
```

```
$sudo apt-get install libg11-mesa-dev xorg-dev
```
```:gnome
$sudo apt-get install ubuntu-desktop
$sudo chmod 777 -R ~/.cache 
```

```:xfce環境
$ sudo apt-get insatll xfce4-terminal
$ sudo apt install xfce4-session
$ sudo apt install xfce4
$ export LIBGL_ALWAYS_INDIRECT=1
$ startxfce4
```
とりあえずどれか使えばguiデスクトップ開くはず


#参考
初心者のためのWSL( 2 ) ~GUI設定,デスクトップ環境設定編~
https://qiita.com/yoshige/items/7a17bb7a3582d72a7e48

WSL2でUbuntuのデスクトップGUIを表示する
https://qiita.com/Takahiro-Suzuki/items/56fea509816275545e07

WSL2の導入とGUI環境の構築とsshfsしたものもgnome-openしたい!! [Ubuntu18.04/20.04]
https://qiita.com/momomo_rimoto/items/51d533ae9529872696ce
Flaskのtest_clientでファイルアップロードのテスト

Flaskのtest_clientでファイルアップロード機能をテストする際につまづいたので、メモ。

▼やりたかったこと
test_clientを用いて、ファイルアップロードのリクエストを擬似的に発生させる

## 方法1.　タプルを用いてファイルアップロードを再現
```test_file.py
from io import BytesIO

res = app.test_client().post('/do_regist_post', data=dict(text='テスト', file=(BytesIO(b'test'), 'test.png')),
                      content_type="multipart/form-data")
```
・"file"がアップロードファイルが格納される変数
・タプルで(\<BytesIO>, ファイル名)を格納することで、\<input type=file>フォームからファイルアップロードされたリクエストだと認識してくれるっぽい

## 方法2.　FileStorageオブジェクトを用いてファイルアップロードを再現
```test_file.py
from io import BytesIO
from werkzeug.datastructures import FileStorage

res = app.test_client().post('/do_regist_post', data=dict(text='テスト',
                                                   file=FileStorage(filename='test.png', stream=BytesIO(b'test'))),
                      content_type="multipart/form-data")
```
・"file"がアップロードファイルが格納される変数
・Flaskでは\<input type=file>フォームの値はFileStorageオブジェクトで渡されるので、それで再現
・"stream"にファイルの中身が入る(画像ファイルだと、そのバイナリ等)
・"stream"は\<BytesIO>しか受け付けないぽいので注意

▼FileStorageクラスの詳細は以下で参照可能
https://werkzeug.palletsprojects.com/en/1.0.x/


以上。
レスポンシブwebデザイン実装方法

#導入
レスポンシブデザインをポートフォリで導入したい方向けに記事を作りました。

#目標
　レスポンシブデザインを実装する

#viewportを設定する
```views/layouts/application.html.erb
  <head>
    <title>APPNAME</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
　　#下記の一文を追加
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
```

contentプロパティにwidth="device-width"を指定することで、PCやスマートフォンなどの画面の大きさに合わせることができます。
initial-scaleは、画面の拡大率のことで、「1.0」に設定しているため、拡大は行われません。
#画面サイズによってCSSを切り替える方法
```:css
@media (max-width: 500px) {
  p {
    font-size: 10px
  }
}
```
「max-width: 500px」の部分は「画面幅が最大500pxのとき」という意味になるので、「画面幅が500px以下のとき」という意味になります。


```:css
@media (min-width: 500px) {
  p {
    font-size: 10px
  }
}
```
「min-width: 500px」の部分は「画面幅が最低500pxのとき」という意味になるので、「画面幅が500px以上のとき」という意味になります。

#補足

タブレットは「1000px」、スマホは「500px」で、適応させます。
XcodeのNavigatorの表示が⌘0で切り替えられない現象と解消方法

`Xcode`の左側に表示される`Navigator`ペインのShow/Hideを切り替えるために `⌘0` のショートカットキーを使うことが多いのですが、ふとしたタイミングでなぜかショートカットキーが効かなくなる現象が発生して困っていました。

こちらの画像のように通常は `⌘0` が `Hide Navigator` に割り当てられているのですが、
 ![スクリーンショット 2021-02-10 1.38.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104863/840177e6-4cba-9598-78f4-e84ea78bb832.png)

ショートカットキーが効かない状況ではこちらの画像のようにショートカットキーの表示が消えてしまっています。
![スクリーンショット 2021-02-10 1.52.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104863/4dcd25d4-0e44-d631-451e-b6414b4e523e.png)

原因を調べたところ Developer Document(Help) のウィンドウを表示するとそちらにショートカットが奪われてしまいキーが効かなくなる仕様のようでした。
![スクリーンショット 2021-02-10 1.53.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104863/376a3666-145f-053b-e2dc-7128d8f80d9f.png)

[Xcode: “Hide Navigator” ⌘, 0 stopp… | Apple Developer Forums](https://developer.apple.com/forums/thread/668635)

原因が分かったのでスッキリしたのですが今後改善されると良いです。
Visual Studio Code で pipenv を使えるようにする

# はじめに
pipenvとVSCodeを使って開発しようと思ったときに，設定に手こずったので備忘録として書いておくことにしました．
これが自分の初めての記事なので，見苦しい点など数多くあると思いますが，温かい目で見ていただけるとありがたいです．
自分の環境はMacなのですが，おそらくWindowsでも同じような方法で解決できると思います．

# 問題
pipenvで作った環境がVSCodeで認識されない．これによって，pipenvを通してダウンロードしたパッケージが認識されず，importに赤い波線が表示されてしまう．

# 解決方法
まずpipenvで作った環境で作動しているpythonの位置を取得します．そのためにはターミナルで該当のフォルダに入り，以下のコマンドを実行します．

```terminal
% pipenv shell
% which python
```

自分の環境では以下のようなパスが得られました．

```text
/Users/ユーザー名/.local/share/virtualenvs/フォルダ名-C_0pq_kD/bin/python
```

これで得られたパスをVSCodeのsetting.jsonに書き込みます．

```json
{
  "python.pythonPath": "/Users/ユーザー名/.local/share/virtualenvs/フォルダ名-C_0pq_kD/bin/python",
}
```

このようにすると，VSCodeでPythonのインタプリタを選ぶときの候補にpipenvで構築したものが出てきてくれるようになります．
C#でconfigファイルを使うやり方メモ

C#で作ったデスクトップアプリケーションにおいて、
アプリを閉じた時に設定データが保存され、次に開いた時に反映されるしくみを作りたい。

.configファイルを使用し、アプリ終了時に書き込み、アプリ起動時に読み出し、とすることで対応できた。
自分用のメモとして残しておく。

```config.cs
using System.Configuration;

namespace ConfigMake
{
    class DataMod
    {
        public string FileName { get; set; }
        public string StartTime { get; set; }
        public string EndTime { get; set; }
        public string Class { get; set; }
        public string Code { get; set; }
        public string Reason { get; set; }
        public string Approver { get; set; }

         public void LogLoad()
        {
            var configFile = @"test.config";
            var exeFileMap = new ExeConfigurationFileMap { ExeConfigFilename = configFile };
            var config = ConfigurationManager.OpenMappedExeConfiguration(exeFileMap, ConfigurationUserLevel.None);

            // config読みだし
            FileName = config.AppSettings.Settings["FileName"].Value;
            StartTime = config.AppSettings.Settings["StartTime"].Value;
            EndTime = config.AppSettings.Settings["EndTime"].Value;
            Class = config.AppSettings.Settings["Class"].Value;
            Code = config.AppSettings.Settings["Code"].Value;
            Reason = config.AppSettings.Settings["Reason"].Value;
            Approver = config.AppSettings.Settings["Approver"].Value;


        }

        public void LogSave()
        {
            var configFile = @"test.config";
            var exeFileMap = new ExeConfigurationFileMap { ExeConfigFilename = configFile };
            var config = ConfigurationManager.OpenMappedExeConfiguration(exeFileMap, ConfigurationUserLevel.None);

            // config書き込み
            config.AppSettings.Settings["FileName"].Value = FileName;
            config.AppSettings.Settings["StartTime"].Value = StartTime;
            config.AppSettings.Settings["EndTime"].Value = EndTime;
            config.AppSettings.Settings["Class"].Value = Class;
            config.AppSettings.Settings["Code"].Value = Code;
            config.AppSettings.Settings["Reason"].Value = Reason;
            config.AppSettings.Settings["Approver"].Value = Approver;

            config.Save();

        }
    }
   
}
```
【GitHub Actions】別リポジトリのソースコードをチェックアウトする

## やりたいこと

GitHub Actionsのワークフローを設定したリポジトリAから、別のリポジトリBのソースコードを読み込めるようにしたい。

## やり方

使用するのはお馴染みの[actions/checkout@v2](https://github.com/marketplace/actions/checkout)。
>This action checks-out your repository under $GITHUB_WORKSPACE, so your workflow can access it.

このアクションを使うとワークフローの中で、ソースコードにアクセスできるようになります。

### ▼ パブリックな別リポジトリにチェックアウト

```yaml
    steps:
      - name: Checkout other repository
        uses: actions/checkout@v2
        with:
          repository: foo/bar # 取得先のリポジトリ名を指定します。
```
`repository`にチェックアウトしたいリポジトリ名を指定すれば取得できます。
`path`や`ref`などのオプションも確認しておくと良いと思います。


### ▼ プライベートな別リポジトリにチェックアウト

```yaml
    steps:
      - name: Checkout other repository
        uses: actions/checkout@v2
        with:
          repository: foo/bar # 取得先のリポジトリ名を指定します。
          token: ${{ secrets.HOGE }} # プライベートリポジトリを読み取れる個人アクセストークンをsecretsから読み込みます。
```
プライベートリポジトリを取得するので、もちろんアクセス権限が必要になります。
その設定項目として用意されているのが`token`です。

`token`にはPAT(個人アクセストークン)を設定します。
PATの発効方法は、[公式ドキュメント(日本語)](https://docs.github.com/ja/github/authenticating-to-github/creating-a-personal-access-token)を参考にするとわかりやすいと思います。

ざっくり
```GitHubのプロフィールアイコン > Settings > Developer settings > Personal access tokens```
から作成できます。

* 強い権限をつけ過ぎないこと。(`repo`くらいあればチェックアウトするには十分なはずです)
* 個人アクセストークンを流出させないこと。

に十分気をつけましょう。

PATが作成できたら、ワークフローを作成しているGitHubリポジトリの`secrets`にトークンを登録しましょう。
[「【GitHub Actions】カスタム環境変数を読み込みたい」](https://qiita.com/__kattsun/items/f28ae1c1a2c516b872a6)を参考に登録してみてください。

### ▼ SSOが必要なOrganizationの別リポジトリにチェックアウト
```yml
    steps:
      - name: Checkout other repository
        uses: actions/checkout@v2
        with:
          repository: foo/bar # 取得先のリポジトリ名を指定します。
          token: ${{ secrets.HOGE }} # リポジトリを読み取れる個人アクセストークンをsecretsから読み込みます。
```
`.yml`ファイルの設定は、「▼ プライベートな別リポジトリにチェックアウト」と同じです。
発行したPATのSSO(SAMLシングルサインオン)を有効にしてあげる必要があります。
これも[公式ドキュメント(日本語)](https://docs.github.com/ja/github/authenticating-to-github/creating-a-personal-access-token)を参考にするとわかりやすいと思います。
古いUbuntuにpyenvで新しいPythonを入れる

やんごとなき理由により

# 環境
- Ubuntu 14.04

# やりたいこと
- pyenv で Python 3.9.0を入れる

普通にやると以下のようなエラーが出てしまう

```
ERROR: The Python ssl extension was not compiled. Missing the OpenSSL lib?
```

# やること

## 新しいopensslを導入

14.04のopensslは古いので、Python 3.7以降が必要とするopenssl 1.0.2以降をビルドしてインストールする。

```bash
cd /tmp
mkdir openssl-build && cd $_
wget https://www.openssl.org/source/openssl-1.1.1i.tar.gz
tar xvfz openssl-1.1.1i.tar.gz
cd openssl-1.1.1i
./config --prefix=/usr/local/openssl/1_1_1i --openssldir=/usr/local/openssl shared
make
make install
```
## opensslのpathを指定して、pyenv installを実行

```bash
LD_LIBRARY_PATH=/usr/local/openssl/1_1_1i/lib CONFIGURE_OPTS="--with-openssl=/usr/local/openssl/1_1_1i" pyenv install -v 3.9.0
```

これでOK

# その後起こった問題

## SSLのエラー

今回 install したOpenSSLを参照しているPythonで以下のようなエラーが発生した

```
urllib.error.URLError: <urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1122)>
```

原因としては 今回ビルドした `/usr/local/openssl/certs` 配下が空っぽ（証明書がない）なので、とりあえず既存の証明書のディレクトリを指定して回避。

```
sudo rm -r /usr/local/openssl/certs
sudo ln -s /etc/ssl/certs /usr/local/openssl/certs
```
ソースファイルの世代管理が subversion から git へ変更したのでメモ

## お品書き
[CVSup](https://docs.freebsd.org/doc/3.0-RELEASE/usr/share/doc/ja/handbook/cvsup.html "CVSup") を馴れよた頃に [subversion](https://docs.freebsd.org/doc/10.2-RELEASE/usr/local/share/doc/freebsd/ja/books/handbook/svn.html "subversion") に化けよって、subversion に慣れよった頃に [Git](https://wiki.freebsd.org/Git "Git") に化けた😢

注：git ≒ github

---
## 基礎的のん

```text:git(1)のインスコ
# cd /usr/ports/devel/git && make install
```

---
***それか***

```text:git(1)のインスコ
# pkg install devel/git
```
しておく。

---
git のインスコ完了しよったら
作業ディレクトリを変えとく😆

```text:
# cd /usr
```

---
## subversion
```text:
# svnlite co svn://svn.freebsd.org/base/head/ src
# svnlite co svn://svn.freebsd.org/base/releng/11.4/ src
# svnlite co svn://svn.freebsd.org/base/releng/12.1/ src
# svnlite co svn://svn.freebsd.org/base/releng/12.2/ src
# svnlite co svn://svn.freebsd.org/base/stable/11/ src
# svnlite co svn://svn.freebsd.org/base/stable/12/ src
```

---
## Git
```text:
# git clone -b main ssh://anongit@git.FreeBSD.org/src.git
# git clone -b releng/11.4 ssh://anongit@git.FreeBSD.org/src.git
# git clone -b releng/12.1 ssh://anongit@git.FreeBSD.org/src.git
# git clone -b releng/12.2 ssh://anongit@git.FreeBSD.org/src.git
# git clone -b releng/13.0 ssh://anongit@git.FreeBSD.org/src.git
# git clone -b releng/13.1 ssh://anongit@git.FreeBSD.org/src.git
# git clone -b releng/13.2 ssh://anongit@git.FreeBSD.org/src.git
# git clone -b releng/14.0 ssh://anongit@git.FreeBSD.org/src.git
# git clone -b stable/11 ssh://anongit@git.FreeBSD.org/src.git
# git clone -b stable/12 ssh://anongit@git.FreeBSD.org/src.git
# git clone -b stable/13 ssh://anongit@git.FreeBSD.org/src.git
# git clone -b stable/14 ssh://anongit@git.FreeBSD.org/src.git
```

---
## 個人的見解
ソースコードの取得はこの Git の方が早いけど、コミットログが見難いのが難点。
目が慣れとらんタケかも😁

---
2023/11/25 14.0-RELEASE が出たのでウッスラ追記と Markdown の仕様変更に対応しよった☺
【Rails 部分テンプレート（小学生でも分かる解説）】

#部分テンプレートとは#
「部分テンプレート」っていうのは、
`同じところをまとめておいて、それを使い回すやつ。`

例えば、
AくんとBくんとCくんがいる。
3人ともみんな、9歳で、男の子で、ゲームが好きで、マックの＠ハンバーガーが好き。

（「＠」は、いったん気にしないで）

この時に、
「Aくんは9歳で、男の子で、ゲームが好きで、マックの＠ハンバーガーが好き。
 Bくんは9歳で、男の子で、ゲームが好きで、マックの＠ハンバーガーが好き。
 Cくんは9歳で、男の子で、ゲームが好きで、マックの＠ハンバーガーが好き。」

これは、、長いしだるいしめんどいし、字で書くのも大変。

そこで、「9歳で、男の子で、ゲームが好きで、マックの＠ハンバーガーが好き。」っていうところを「**こんな人**」と言い換える。

「こんな人」＝「9歳で、男の子で、ゲームが好きで、マックの＠ハンバーガーが好き。」

すると、
「Aくんは**こんな人**」
「Bくんは**こんな人**」
「Cくんは**こんな人**」

こんな短くできる。

#部分テンプレートの使い方#

Railsでの使い方は以下の感じ。

##①「_好きなファイル名.html.erb」を作る##

viewsフォルダの好きなとこ（views/devise/sharedが多い）に、

`「_好きなファイル名.html.erb」`

と言う名前で新規ファイル作成する。

上の例なら、「_こんな人.html.erb」

`※　「 _ 」を最初につけることを忘れずに`

##②作ったファイルにまとめたいことを書く##

①で作ったファイル内にまとめたいことを書く。（すでに書いていたら、コピペする）

上の例なら、「9歳で、男の子で、ゲームが好きで、マックのハンバーガーが好き。」って書く。

```_こんな人.html.erb
9歳で、男の子で、ゲームが好きで、マックのハンバーガーが好き。
```

（ソースコードに日本語を書くのに不快感を覚えた自分に驚いたんだよね。。:man_tone2:）

ちなみに、この時に「＠」を使っていたら、とった方が良いらしい。
（ハンバーガー前にあった「＠」をとった）

##③まとめたやつを使うとこにrenderを使って書く##

あとは、実際に使いたいところに使うだけ。
使い方は決まっていて、

```
<%= render '[view以降のファイル名]', [＠をとったやつ]:[＠をつけたやつ] %>
```

例で言うと、

```
<%= render 'devise/shared/こんな人', ハンバーガー:＠ハンバーガー　%>
```
この記述をそれぞれに書いていく。

まとめると、

`
①ファイル「_○○.html.erb」作って、
②その中に何回も使うことを書いて、
③それを使うとこにrenderで書く。
`
[vscode] git initしたのに「現在開いているフォルダーにはgitリポジトリがありません」とソースコントロールで表示されたら

# 発生事象
新規開発しようとして`git init`実行後に対象ディレクトリをvscodeで開いたところ、ソース管理に **現在開いているフォルダーには Git リポジトリがありません。Git を利用したソース管理機能を有効にするリポジトリを初期化できます。** という文言が表示されていた。
`git init`は実行ずみなので、「リポジトリを初期化する」をクリックしても、すでにinitされているというエラーが発生。

ぶっちゃけGUIでgit操作はしないけど、vscodeの左下に現在のブランチ名が表示されないのが地味に辛いと感じたので対応しました。

![スクリーンショット 2021-02-10 0.47.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310331/88901c1e-72c6-8d41-6e15-01c1a36b067d.png)

# 解決方法
※以下の手順は直接settings.jsonを開いて設定した方が楽です。

1. `which git`を実行して結果をコピーしておく。私の環境では`/usr/local/bin/git`でした。
1. 設定の検索窓に`git.path`を入力すると以下のような項目が表示されるので、 **settings.jsonで編集** を選択する。
![スクリーンショット 2021-02-10 0.55.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310331/f1b8597a-960d-af1d-b9ef-c3a4bd99d276.png)
1. `settings.json`の`git.path`に先ほどコピーしたgitのパスを設定する。
![スクリーンショット 2021-02-10 0.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310331/21fdd3f8-f4ed-06fa-d4ff-91db920babb8.png)
1. vscodeをリロードするとソース管理がリポジトリを認識するようになり、ソース管理からのgit操作が可能になる。

上記手順実行後に無事ソース管理がgitリポジトリを認識し、現在のブランチがvscodeの左下に表示されるようになりました。
Firebaseコマンドが実行出来ない時の対処法

#概要
先日、Firebaseの学習を行い,実際にFirebaseを使ってみようと思い、Firebaseコマンドを実行したところ、「command not found: firebase」(訳：firebaseコマンドが見つかりません)というエラーが発生しました。
それを解消することが出来たので、その流れについてまとめてみました。

##目次
- 事前知識
- Firebaseコマンド実行の前に...
- Firebaseコマンドを実行したら...
- Firebaseコマンドが実行出来ない原因
- Firebaseコマンドを実行出来るようにする
- 最後に...

##事前知識
>Firebaseとは、Googleが提供している、モバイルおよび、Webアプリケーションのバックエンドサービスのことです。
クラウドサービスの形態では、BaaS(Backend as a Service)に位置付けされています。Firebaseを使うことで、アプリ開発者はフロントエンドの開発に専念でき、バックエンドで動くサービスを作成する必要も管理する必要も無くなります。

##Firebaseコマンド実行の前に...
Firebaseコマンドを実行する前に、
Node.jsのインストール
↓
Firebaseプロジェクト作成
↓
Firebase CLI(コマンドラインインターフェース)のインストール
を行う必要があります。

下記のURLに沿って、インストール、プロジェクト作成をお願い致します。

[Node.jsのインストール方法](https://nodejs.org/ja/download/)

[Firebaseの利用方法](https://firebase.google.com/)

##Firebaseコマンドを実行したら...
Firebase CLIのインストールが完了して、実際にFirebaseコマンドを実行したら、
以下のエラーコードが表示されました。

```
$ firebase login
zsh: command not found: firebase
```
「command not found: firebase」(訳：firebaseコマンドが見つかりません)というエラーが発生しました。
Firebaseを正しくインストールしたはずなのに、実行出来ませんでした。
ちなみに、「firebase --version」、「firebase init」、「firebase deploy」も同じエラーコード出て、実行出来ませんでした。

##Firebaseコマンドが実行出来ない原因
原因を調べたところ、インストールしたnpmのPATHに問題があることが分かりました。
グローバルディレクトリの場所を確認する為に、下記のコマンドを実行してみましょう。

```
$ npm bin -g /Users/ユーザー名/.npm-global/bin
(not in PATH env variable)
```

「not in PATH env variable」(訳：npmのPATHが通っていません)というエラーが発生しました。
このことから、PATHを通せば実行出来るということが分かりました。

##Firebaseコマンドを実行出来るようにする
PATHを通す為に、以下のコマンドを実行します。

```
$ export PATH=$PATH:`npm bin -g`
```

この状態で、Firebaseコマンドを実行したところ、正常に動作させることが出来ました。

###最後に...
今回は、Firebaseコマンドが実行出来ない時の対処法について解説を行いました。

最後まで、読んでいただきありがとうございました。
[Ruby on Rails]  マイグレーションファイルをUpのまま消去してしまった時の対処法

＊**これはホントにあった怖い話です。**
マイグレーションファイルを間違って**Upのまま削除**した男がいました。
その男は怖くなってしまい、また新しくrails g modelコマンドで、
モデルとマイグレーションファイルを生成してしまいました。


そして男は無限に**エラー地獄**を彷徨うこととなったのでした。


 
　
**そんな男（自身）の失敗から学んだ事を書いていきます。**

結論から言うと、
マイグレーションファイルを**修正**したり、**削除**する際は、
必ず<h2>rails db:rollback


で、**down**の状態でマイグレーションファイルを操作するようにしましょう。
まず、削除してしまったものはしょうがないです。



## 解決方法


**rails db:migrate:status**でステータスの確認をします。
  

**NO FILE**となっている**マイグレーションID**の番号をコピペして
手動で仮のマイグレーションファイルを作成します。
　　

(例)
2343687287282_sample　と作成します。

作られたファイルは空っぽなので
こんな感じに記述をしてあげます。　

![スクリーンショット 2021-02-10 0.09.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1078698/fc9ff4d0-a2d6-ee20-8983-177e146feea6.png)


＊ここで大事なのはclass名を必ず **Sample** にする事です。


  

このファイルを作成後に**rails db:migrate:status**をすると
先ほどまでNO FILEだった所にSampleができ上がっています。
　　
　
最後に**rollback**をしてあげましょう。


その後、削除してあげるとエラーなく無事解決です。
　　
　　

間違い等ございましたらご指摘、ご教示のほどよろしくお願い致します。
Railsで釣り大会サイトを作ってみた！

#　アプリの概要
![ezgif.com-gif-maker (7).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655853/91ff45dd-b2fe-c7e9-3d1e-618099ca6f6b.gif)




自分から大会を作成したり、気楽に釣り大会へ参加ができるアプリを作ってみました。
**時間と場所に縛られない自由な大会**がコンセプトです。

# 制作した背景

**１.　時間が限られた人でも気軽に参加できる大会で釣果を共有したい**
**２.　自分発信で大会を開催できるサイトが無い**

## １. 時間が限られた人でも気軽に参加できる大会で釣果を共有したい
友人との会話の中で、釣り大会に出たいけど「今の時期、大勢の人が集まる場所はちょっと..」「大会って敷居が高そう」 「タイミングが合わない」「育児や仕事の都合で日中に釣りができない」と話していました。
釣りする時間帯に制限のある方にもマッチしやすい大会が作れたら楽しそうだな！！と考えました。


## ２. 自分発信で大会を開催できるサイトが無い
自分の生活リズムでも参加できそうな大会を探してみた時に、開催地が遠い、時間が合わない、釣りたい魚とは違うなどの理由から探すのに苦労しました。
「参加型の大会サイトはあっても自分で開催までできれば便利なのでは？」と考え、WEB上で”開催〜ルールに基づいた順位発表”まで完結できるサイトを作ってみよう！と思い制作に至りました。

# 機能説明
|   |機能|使用技術|
|---|---|---|
|1  |ログイン機能|devise|
|2 |ゲストログイン機能||
|3 |ユーザー登録||
|4  |大会の投稿機能（CRUD）||
|5  |管理者機能|Active Admin|
|6  |画像アップロード機能|CarrierWave|
|7 |画像のメタデータを取得|EXIFR|
|8 |コメント投稿・削除（Ajax）||
|9  |いいね機能(Ajax)||
|10  |ページネーション機能|kaminari|
|11  |地図表示機能（google map API）|geocoder|
|12  |ランキング機能（ルールによって表示の変化・同率順位で処理）||
|13  |大会一覧のタブ切り替え|JQuery|
|14  |釣果の投稿機能（CRUD）||
|15  |マイページ機能||
|16  |大会エントリー機能(多対多のアソシエーション)||
|17  |魚種検索機能||
|18  |PV数の計測|impressionist|

## 直感的な操作ができるように意識
大会作成においては必要情報が多くなりがちだったので、文字入力ではなく可能な限りボタンでの選択とすることで、サクサク大会作成ができる様に意識しました。
![angler-app herokuapp com_gps_checks_new](https://user-images.githubusercontent.com/61640081/107383892-cb681700-6b34-11eb-949e-641bc8795469.png)

## ランキング表示を変える
ランキングの順位表示はルールによって処理内容が変わります。
どのデータが必要でどのように集計するかを分け、ランキング順位の処理**をするようにしました。
![angler-app herokuapp com_gps_checks_new (1)](https://user-images.githubusercontent.com/61640081/107383688-978cf180-6b34-11eb-9327-9a3e6566bbc7.png)


## 画像のGPSチェック機能
「自分の画像に位置情報が有るのか無いのか分からない..」というテストユーザー（友人）の指摘から、　投稿画面とは別で、**画像のGPSチェック**ができるように機能を追加しました。
<img width="1251" alt="スクリーンショット 2021-02-09 17 02 45" src="https://user-images.githubusercontent.com/61640081/107333618-1401df00-6af9-11eb-883b-aeca886776b5.png">


## GoogleMap内で円表示
知られたくない釣り場の”ピンポイント”が分からないように**GoogleMap内のピン（📍）表示をCSSで円を作成して表示**![Something went wrong]()
させるように変更しました。
![スクリーンショット 2021-02-09 16.57.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655853/d7ecd5e7-4b20-ea49-4185-6a32b283d83f.png)

## ER図
<img width="635" alt="スクリーンショット 2021-02-09 23 02 41" src="https://user-images.githubusercontent.com/61640081/107374479-fa798b00-6b2a-11eb-9470-95be44da34f3.png">

# 課題・今後実装したい機能
・個人釣果データを集計＆分析できるようにグラフ化
・釣果投稿にAPIを使用して天候を付け加える
・ルール違反発見時の報告機能と対策機能
・AWSへデプロイ

# 使用技術・環境
言語：Ruby 2.6.6
フレームワーク：Rails 6.0.3.2
フロント：HTML, Sass, javascript, jQuery
インフラ：Heroku　
データベース：PostgreSQL 13.0
AWS S3を使用
【PHP】三項演算子

知識を整理するための個人的な備忘録です。

#三項演算子の書き方
```php:基本構文
(条件式) ? (真の式) : (偽の式);
```
PHPの三項演算子では、条件式が`真`である場合と`偽`である場合の式を指定。
条件式が`真`である場合は`(真の式)`、`偽`である場合は`(偽の式)`の結果が式全体の値となる。

if文との違いとしては、if文のように条件によって処理が分岐するのではなく、結果によって`真の式`、`偽の式`を返す。

#使い方
```php
<?php

$num >= 0 ? print 'numは0以上' : print 'numは0未満';
```
三項演算子を使ったこの式は、if文を使って次のように書き換えられる。

```php
<php

if ($num >= 0) {
  echo 'numは0以上';
} else {
  echo 'numは0未満';
}
```
また、三項演算子の結果は**変数に代入**できる。

```php
<?php

$num = 5;
$ans = $num >= 0 ? 'numは0以上' : 'numは0未満';
echo $ans;
```
実行結果

```
numは0以上
```

また、三項演算子を**メソッドの返り値**として使用することもできる。

```php
<?php

function foo ($value) {
  return  $value >= 0 ? 'numは0以上' : 'numは0未満';
}

$num = 5;

$ans = foo($num);

echo $ans;
```
実行結果

```
numは0以上
```

#参考
* [【PHP入門】三項演算子とは？使いこなしてコードをスッキリする](https://www.sejuku.net/blog/23070)
TSファイルをMP4(H.265)に変換する

# 概要
- PT2/PT3で録画していたらTSファイルが無尽蔵に溜まっていく現象を是正するために、動画ファイルをMP4(H.265)に自動変換していく

# 実行方法
1. ffmpegのダウンロード
2. ffmepgのパスを環境変数に追加
3. 以下のコマンドを実行する

```
ffmpeg -i test.ts -c:v libx265 test.mp4"
```

# スクリプト化
- 録画サーバがWindowsのため、PowerShellを使用する。
    - 使用したスクリプトはGitHubで公開中。
        - https://github.com/seki0913/ffmpeg_auto
- Windowsのタスクスケジューラを使用して、空いている時間に録画フォルダのTSファイルをMP4(H.265)に変換していく。

# H.265の実力
- H.264の性能は確認していなかったので確認。素人目にはわかりません。
- 生ファイル（3.91 GB）
![vlcsnap-2021-02-09-23h50m39s050.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94366/6411cbf5-709b-d104-32b3-779862189c32.jpeg)
- H.265（240 MB）
![vlcsnap-2021-02-09-23h52m20s232.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94366/7daa9f11-308d-1cb2-65a5-dc8112e2f4f5.jpeg)

©椋木ななつ・一迅社／わたてん製作委員会
引用：「私に天使が舞い降りた！」第二話より
フロントコーディング時に使ったリンクまとめ

最近ようやく、flaskとpythonに関して$\tiny{基礎}$の$\normalsize{基礎}$の$\large{基礎}$を一通り学んだので、そのOUTPUT(?)としてPython*flask*MySQLを使ったステートレスな超初心者向けWebアプリを制作していました。
その際にフロントエンドの組み方でHTML,CSSのコーディングで参考にさせて頂いたいくつかのサイトを貼っておきます。
$\tiny\color{blue}{（制作したアプリについては、デプロイテストが未完なので、終わり次第あげていくつもりです。）}$:cry:

---
<STRONG>アコーディオンメニューの実装
https://copypet.jp/630/

<STRONG>ヘッダー固定(グローバルナビゲーション)
https://webdesignday.jp/inspiration/technique/css/4166/

<STRONG>テキストロゴアニメーション(jquery)
https://on-ze.com/archives/7387
画像アニメーション(jquery)
https://www.webdesignleaves.com/pr/jquery/jq_basic_05.html

<STRONG>文字の配置最適化させるとき
http://www.tg.rim.or.jp/~hexane/ach/otcs/otcs04.htm

<STRONG>SNSのリンクをはる方法
https://www.tam-tam.co.jp/tipsnote/social/post16199.html
facebookへのいいね投稿リンク
https://developers.facebook.com/docs/plugins/like-button

<STRONG>メールアドレスのリンクから送信画面に遷移させる
https://www.tagindex.com/html_tag/link/a_mailto.html

<STRONG>画像を回転させる
https://liginc.co.jp/489507

<STRONG>display:inline-blockをマスターする
https://sunsukeblog.com/css-display

<STRONG>時間入力フォーム
http://ericjgagnon.github.io/wickedpicker/

<STRONG>webページの色を反転して、ダークモード切替をする方法</STRONG>
(余談：Githubにも搭載されてますが、あの猫可愛いですよね):heart_eyes_cat:
<STRONG>https://coliss.com/articles/build-websites/operation/css/one-line-dark-mode-using-css.html


<STRONG>NES.css(ドット絵好きの人にはたまりません)
https://nostalgic-css.github.io/NES.css/#

<STRONG>Myドット絵作成
https://bcrikko.github.io/css-collection/tool/dotgen/index.html

<STRONG>bootstrapを用いたレスポンシブデザイン一覧
https://photoshopvip.net/77852

<STRONG>font-awesomeを使用する
https://coliss.com/articles/build-websites/operation/work/font-awesome-guide-and-useful-tricks.html

<STRONG>input form内の文字数入力制限させる
http://html5.cyberlab.info/elements/forms/input-minlength.html

<STRONG>input formの入力欄で自動補完させない
https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

---
【GoogleDrive】グーグルドライブにアップしたファイルをターミナルで指定の場所に保存する方法（Mac）

<!-- wp:paragraph -->
<p>こんにちは。かをるです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>今回は、<span class="marker-under-red">グーグルドライブにアップしたファイルを指定の場所へ保存する方法</span>をご紹介します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>データ量が大きくなってアップロードできない場合もコマンドで読み込めば対応可能な場面がありますので覚えておいてもいいと思います。</p>
<!-- /wp:paragraph -->

詳細はブログに記載しました。
https://kaworublog.com/wp-admin/post.php?post=1273&action=edit
【Rails】 A server is already running

はじめに
---
パソコンが重くなってしまったり、接続不良でターミナルが動作しなくなってしまい、再度ターミナルを立ち上げると「A server is already running」という文字が表示されることがあるかと思います。
私自身も最近この現象に陥ることが多いため、まとめとして記録しておきたいと思います。

(参考記事)
・rails server -d でバックグラウンドで実行中のプロセスを停止する方法
https://qiita.com/Masaaki/items/6b29c2bb1a49107f2b73

開発環境
---
ruby 2.6.3
Rails 5.2.4.4

ターミナル
---
```terminal.
$ rails s
=> Booting Puma
=> Rails 5.2.3 application starting in development 
=> Run `rails server -h` for more startup options

A server is already running. Check /app/tmp/pids/server.pid.
```

この現象は何か
---
アプリケーションサーバーのpumaが停止されていない状態で、ターミナルを再度立ち上げた際に、もう既にサーバーが起動されていることを示しています。
通常であれば、cont + Cなどでサーバーを停止させますが、何らかの理由によりこのコマンドを入力していない際に起こる現象です。

解決方法
---
①既存のターミナルを削除、再度ターミナルを起動
この作業だけで問題なく動作する場合もあります。
　
※①で解決しなかった場合
②手動でプロセス番号(PID)を指定して切る
以下のようなコマンドを実行すると、左から2番目に5桁の数字が表示されます。この数字がプロセス番号(PID)に当たります。
こちらをご自身の番号に置き換え、以下のコマンドを実行すると手動でサーバーを切ることができます。
最後に通常通りサーバーを立ち上げると、問題なく作動するかと思います！

```terminal.
$ ps aux | grep rails
ec2-user 11174  0.0  0.0 119424   912 pts/1    S+   14:30   0:00 ・・・

$ kill -9 11174

$ rails s
```


終わり
---
今回は以上になります。
私自身初見の際に大変焦ってしまった記憶があります。
まだまだプログラミング初心者ではありますが、同じ様な立場の方に少しでも参考になれば幸いです。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。
そうだ、SQLを勉強しよう⑤

#はじめに
英語の日本語訳も含めて覚えることを意識しています。
どこに記述するのか、正しく理解しないといけないですね…。何を（に）装飾しているのかを意識。

##SELECT文だけに可能な装飾

###DISRINCT
- 日本語訳は
「明確な」
- SELECT文に付ける。
- 検索を、「明確にする」イメージだから、SELECTの直後に記述する。

```sql
SELECT DISTINCT カラム名
FROM テーブル名
```

重複している行を取り除いて、抽出します。

###ORDER BY
- SELECT文の最後に付ける
- 行を並び替えるから、最後にカラム名＋並び順

```sql
SELECT カラム名
FROM テーブル名
ORDER BY カラム名 並び順(ASC or DESC)
```
並び替えて取得する。

デフォルトでは昇順。
ASCが昇順。
DESCが降順。
ファミコンROM作ってみた


#CC65コンパイラで作るファミコンROM
「日経ソフトウエア」2020年11月号から連載された特集記事「ファミコンで動くゲームを作ろう」のコードを参考に、ゲームを作成してみました。

##作成したゲーム
## Vividnia Shooting しらゆりヘヴンちゃんねる　ちょうきょうべや ※非公式です。
ROM
https://drive.google.com/file/d/1Otr0Lr7V4ohUEYqtUZ5kw9QF3Ngsbvpy/view?usp=sharing
※動作確認したNESエミュ：VirtualNES、nesterj

###タイトル画面
![bandicam 2021-02-09 23-25-36-196.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/421538b6-e746-fd43-afba-2b91d7dec5f4.jpeg)

###ゲーム画面
![bandicam 2021-02-09 23-27-15-214.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/d1ed2c29-ef1a-046c-54bb-3521137030ad.jpeg)

###結果画面
![bandicam 2021-02-09 23-29-25-323.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/c5e2bb86-894f-ffcc-5d73-4678df055218.jpeg)

###操作方法
左右　移動します
Aボタン　羽を動かして飛びます
Bボタン　鞭を投げます

###ルール
![bandicam 2021-02-09 23-27-05-563.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/765f14c3-5816-e8c1-d7fe-57a51eeaded7.jpeg)
白百合さん（自機）を操作し、”ぽまえら”を避けながら鞭を投げてアイテム（スパチャ青、スパチャ赤、プリン）を手に入れてスコアを競っていく横スクロールシューティングです。

地面にいるときには移動量が半分以下になります。

アイテムは下記の効果を得ます。
・スパチャ青   ￥1000スコア取得します。
・スパチャ赤   ￥10000スコア取得します。
・プリン       プリンを一つ取得します。 

手に入れたものは結果画面で集計されてみることができます。

#参考記事
「日経ソフトウエア」2020年11月号～3月号記事「ファミコンで動くゲームを作ろう」

CC65wiki
https://w.atwiki.jp/cc65/

#関連記事
[ファミコンROM作ってみた](https://qiita.com/tmori/items/a130fb0364dc5f757d67)
[ファミコンROM作ってみた:開発編(画像コンバーター）](https://qiita.com/tmori/items/e952a9d5e150e60af393)
[ファミコンROM作ってみた:開発編(環境）](https://qiita.com/tmori/items/14e250c52d362a403cbe)
[ファミコンROM作ってみた:開発編(ビルド）](https://qiita.com/tmori/items/ab1f163667878a7c9bf5)
[ファミコンROM作ってみた:開発編(コード設計）](https://qiita.com/tmori/items/d49fd2b261fcab86f0a4)
[ファミコンROM作ってみた:開発編(共通関数ライブラリ）](https://qiita.com/tmori/items/bc0cebefe64959337428)
[ファミコンROM作ってみた:開発編(プロダクト用関数ライブラリ）](https://qiita.com/tmori/items/ad667c6dd8cd2c27f80b)
[ファミコンROM作ってみた:開発編(mainとフローの処理コード）](https://qiita.com/tmori/items/ed9f4d85fb7fcc99ccae)
[ファミコンROM作ってみた:開発編(キャラクター制御コード）](https://qiita.com/tmori/items/ddf96075f05d0a1f710d)
Math.sqrtとInteger.sqrtの使い分けについて

# 経緯
競技プログラミングでMath.sqrtだと精度が足りず不正解になるが、Integer.sqrtだと正解になる設問がありました。なのでこの2つをどう使い分けるべきか考えてみました。
※ ちなみに対象の設問はAtCoder Beginner Contest 191の「[D - Circle Lattice Points](https://atcoder.jp/contests/abc191/tasks/abc191_d)」

# 結論
実行環境によるが、小数点以下15桁より小さい部分まで精度が必要な場合はInteger.sqrtのほうが良い。なお、Integer.sqrtは整数型を返すので、例えば2の平方根を求める場合は以下のように下駄を履かせる必要がある。

``` Ruby
U = 10 ** 20
"%.20f" % Integer.sqrt(2 * (U ** 2)).quo(U)
=> "1.41421356237309504880"
# Wikipediaで調べた2の平方根と同じ値

"%.20f" % Math.sqrt(2)
=> "1.41421356237309514547"
# 下5桁の値が違う
```

# 調査内容
[リファレンスマニュアルのInteger::sqrt](https://docs.ruby-lang.org/ja/latest/class/Integer.html#S_SQRT)によると、
>Math.sqrt(n).floor と同等ですが、後者は浮動小数点数の精度の限界によって真の値とは違う結果になることがあります。

```Ruby
Integer.sqrt(10**46)     #=> 100000000000000000000000
Math.sqrt(10**46).floor  #=>  99999999999999991611392 (!)
```

また、[リファレンスマニュアルのclass Float](https://docs.ruby-lang.org/ja/latest/class/Float.html)によると、
> Float の実装は C 言語の double で、その精度は環境に依存します。一般にはせいぜい15桁です。


実際にirbで試してみると、下4桁がInteger.sqrtは正しいですが、Math.sqrtは不正確な値となっています。

```Ruby
> U = 10 ** 20
=> 100000000000000000000
> "%d" % Math.sqrt(2 * (U ** 2))
=> "141421356237309509632"
> "%d" % Integer.sqrt(2 * (U ** 2))
=> "141421356237309504880"
```
※ [Wikipedia](https://ja.wikipedia.org/wiki/2%E3%81%AE%E5%B9%B3%E6%96%B9%E6%A0%B9)によると2の平方根は1.4142135623730950「4880」168872420969807856967187537694807317667973799073247846210703885038753432764157…
「reference broken」を解消してGitHubから変更をPullする

##TL;DL
サブPCで編集した内容をGitHubにアップロードしたあと、メインPCで変更内容をPullしようと思ったら、
「reference broken」とかいうエラーになって変更を反映できなくなってしまった。

この問題について解決方法を記載する。


##現象
```cmd
(notisumma) D:\work\venv\notisumma>git pull origin master
From github.com:xxxxxx/notisumma
 * branch            master     -> FETCH_HEAD
error: cannot lock ref 'refs/remotes/origin/master': unable to resolve reference 'refs/remotes/origin/master': reference broken
 ! [new branch]      master     -> origin/master  (unable to update local ref)
```

##原因
正直原因は不明。
gitへのpush途中でプロセスが切れるような現象が発生した場合にreferenceファイル('refs/remotes/origin/master')が
破損して発生することがあるらしい。

今回はそんな事象が発生した覚えはないが、サブPCで編集したファイルをアップロードする際、
コンソールからGitコマンドでpushしたのではなく、GitHubのリポジトリページにドラッグ&ドロップして
アップロードしたのが原因なのかと思う。(検証はしていない)

##解決方法
###1.git gc --auto

>
Gitは時々 “auto gc” と呼ばれるコマンドを自動的に実行します。 大抵の場合、このコマンドは何もしません。 ですが、緩いオブジェクト（packfileの中に入っていないオブジェクト）やpackfileがあまりに多い場合は、Gitは完全な（full-fledged）git gc コマンドを起動します。 “gc” はガベージコレクト（garbage collect）を意味します。このコマンドは幾つものことを行います。すべての緩いオブジェクトを集めてpackfileに入れ、複数のpackfileをひとつの大きなpackfileに統合し、さらにどのコミットからも到達が不可能かつ数ヶ月間更新がないオブジェクトを削除します。

https://git-scm.com/book/ja/v2/Git%E3%81%AE%E5%86%85%E5%81%B4-%E3%83%A1%E3%83%B3%E3%83%86%E3%83%8A%E3%83%B3%E3%82%B9%E3%81%A8%E3%83%87%E3%83%BC%E3%82%BF%E3%83%AA%E3%82%AB%E3%83%90%E3%83%AA

詳しくは調べてないが、このコマンドを実行することで今回問題が発生している'refs'フォルダ内がガーベジコレクトされて
問題が解決することがあるらしい。

####結果
解消されなかった。
発生する現象自体変化なし

###2.問題のファイルを手動で削除する。
解決するコマンドがわからないなら、問題が発生するファイルを力ずくで消してしまおう。(昭和生まれ思考)
![スクリーンショット (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600163/95b745ed-b732-cb2c-912b-36d5822e8323.png)

####結果
正常にpullすることができた。

```cmd
(notisumma) D:\work\venv\notisumma>git pull origin master
From github.com:xxxxx/notisumma
 * branch            master     -> FETCH_HEAD
 * [new branch]      master     -> origin/master
Updating 1916fff..0f77dfa
Fast-forward
 sample/sample.zip | Bin 0 -> 803530 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 sample/sample.zip
```

##まとめ
手動作業最強。

冗談はさておき、普段業務でGitを使うことはないので、昔勉強したコマンドとかTipsをほとんど忘れてる。
やっぱ日々使ってないとだめだと痛感した。
IE11でヘッダー/フッターを固定し常に表示する

position: stickyで固定表示させようとしたら、
IE11はサポート外のようで表示が思ったようにいかなかった。

しかし、オープンソースのsticky-stateを使うことで解決できたのでメモしておく。

# sticky-state
https://github.com/soenkekluth/sticky-state

# コード

* sample.html

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/sticky-state_mod.css">
    </head>

    <body>
        <header class="sticky">
            ヘッダー
        </header>
        <div class="wrapper">
            <p>
                コンテンツエリア1<br>
                コンテンツエリア2<br>
                コンテンツエリア3<br>
                コンテンツエリア4<br>
                コンテンツエリア5<br>
                コンテンツエリア6<br>
                コンテンツエリア7<br>
                コンテンツエリア8<br>
                コンテンツエリア9<br>
                コンテンツエリア10<br>
                コンテンツエリア11<br>
                コンテンツエリア12<br>
                コンテンツエリア13<br>
                コンテンツエリア14<br>
                コンテンツエリア15<br>
                コンテンツエリア16<br>
                コンテンツエリア17<br>
                コンテンツエリア18<br>
                コンテンツエリア19<br>
                コンテンツエリア20<br>
            </p>
        </div>

        <footer class="sticky">
            <p>フッター</p>
        </footer>

        <script src="./js/sticky-state.min.js"></script>
        <script>
            new StickyState(document.querySelectorAll('.sticky'));
        </script>
    </body>

</html>
```


* sticky-state_mod.css

```css
@charset "UTF-8";

.sticky {
    position: -webkit-sticky;
    position: sticky;
}

.sticky.sticky-fixed.is-sticky {
    position: fixed;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
  
.sticky.sticky-fixed.is-sticky:not([style*="margin-top"]) {
    margin-top: 0 !important;
}
.sticky.sticky-fixed.is-sticky:not([style*="margin-bottom"]) {
    margin-bottom: 0 !important;
}
  
.sticky.sticky-fixed.is-absolute{
    position: absolute;
}

.wrapper{
    min-height: 100vh;
}

header{
    width: 100%;
    background-color: blue;
    color: #fff;
    text-align: center;
    padding: 30px 0;

    top: 0;
}

footer{
    width: 100%;
    background-color: #89c7de;
    color: #fff;
    text-align: center;
    padding: 30px 0;

    bottom: 0;
}
```
npx react-native run-ios できない for 0.63~

#経緯
react-nativeを久々に触ったらなんかios動かなくなった。
いろいろアップデートした。二日かかった。いろいろ試した。
結果これに落ち着いたので共有します。

#対応案①
プロジェクト作り直し

```
npx react-native init MyApp --version 0.62
```

#対応案②　こちらがおすすめ
以下に書いてありました。
https://github.com/facebook/react-native/issues/30836

PodFileを書き換える方法です。

```
#use_flipper!
use_flipper!({ 'Flipper-Folly' => '2.3.0' })
```

podfileを書き換える方法らしい。
最近導入されたflipperさんがやらかしているとかなんとか

くそはまって公式のドキュメント通りできなくて、、、
よかった。また明日からがんばれます・・・
執筆中の論文の文字数をMacのメニューバーに表示する

# はじめに
執筆中の論文の進捗が常に目に入るとモチベーションが上がりますよね。
執筆中の論文の文字数をツールバーに表示するようにしました。

PDFファイルから文字数を取得し、
[SwiftBar](https://swiftbar.app)を使ってシェルスクリプトを定期的に実行して
、Macのツールバーに表示しました。
![スクリーンショット 2021-02-09 23.33.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548175/84f133e6-bd3f-6770-d640-1aa5fd148b7b.png)

# pdftotextを使って論文の文字数を取得する
まず、TeXファイルからPDFに吐き出される文字数を知ることは難しいです。
そこで、pdftotextを使って、PDFをテキストファイルに変換して文字数を取得します。

popperをインストールすることでpdftotextを使うことができます。

```
brew install poppler
```

`paper.pdf` を対象の論文とすると、以下のコマンドで文字数を取得できます。

```
pdftotext paper.pdf && echo "現在卒論" $(cat  paper.txt | wc -m) "文字"
```


# SwiftBarを使ってメニューバーに表示する

[SwiftBar](https://swiftbar.app)を使うとシェルスクリプトを定期的に実行し、Macのツールバーに表示できます。
https://github.com/swiftbar/SwiftBar

以下でインストールすると、Launchpadに追加されます。

```
brew tap melonamin/formulae
brew install swiftbar
```

起動すると、ダイアログに従って、実行するシェルスクリプトのディレクトリを指定します。
ファイル名は、<任意の名前>.<更新のインターバル>.sh のように命名します。
ディレクトリ内に`name.30s.sh`というファイルを作成し、先程のスクリプトを記述します。



```name.30s.sh
pdftotext <論文のPDFパス> && echo "現在卒論" $(cat <論文の変換後テキストのパス> | wc -m) "文字"
```


# 結果
しばらく待つと以下のように、ツールバーに表示されます。
![スクリーンショット 2021-02-09 23.37.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548175/7259247a-5b28-356b-0a85-11270b36638d.png)
rails docker webpacker Vue　の設定

## bin/webpack-dev-serverするとコンソールにエラー出るよって時

3035番ポートがないよーってエラーが出ます、
dockerの設定で3035番ポートを通してあげましょう。

```
ports:
  - '3000:3000'
  - '3035:3035'

```
を設定して解決。
EC2/t4gインスタンス/Amazon Linux 2の動作確認

# 背景

* EC2の[t4gインスタンス](https://aws.amazon.com/jp/blogs/news/new-t4g-instances-burstable-performance-powered-by-aws-graviton2/)はコスパが非常に良いらしい（AWSによればt3との比較でコストは20%減､性能は40%増）
* なので､自社パッケージの新規クライアント用のサーバとして利用したい
* CPUがx86でなく､ARMなので､既存x86ベースインスタンスのAMIは利用できない｡またミドルウェアが動作するかが要確認とのこと

で､やってみました｡

# 評価日

2021年2月6日

# 環境

* t4g.micro
* Amazon Linux 2 （ARM)
* 東京リージョン

# 動作したもの

うちのパッケージに必要な以下は一通り動作しました｡特にはまることもなかったですが､

一番､心配していたのは定期的にエラーに見舞われるCertbot(LetsEncrypt）でしたが何の問題もありませんでした｡
本番採用に向けて詳細なテストはこれからですが､いけそうな予感｡

* Java8 (OpenJDK 1.8.0_272)
    * `yum install java java-1.8.0-openjdk-devel`
* Python 3.8.5
    * `sudo amazon-linux-extras install python3.8`
    * boto3
* Apache 2.4.46
    * http2で動作（mpmはpreform => event）
    * 仮想ディレクトリ
* MySQL Client 8.0.23

```bash
sudo yum localinstall -y https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm
sudo yum-config-manager --disable mysql57-community
sudo yum-config-manager --enable mysql80-community
sudo yum install -y mysql-community-client
```
* Certbot (Apache版)

```bash
# EPEL有効化
sudo amazon-linux-extras install -y epel 
# Apache版インストール
sudo yum install certbot python2-certbot-apache
# 証明書取得（事前にドメイン割当､ポート開放､httpdを設定済）
sudo certbot --apache -d ドメイン -d www.ドメイン ... --agree-tos --debug
```
* AIDE
* その他
    * aws cli 1.18.147 Python/2.7.18 ※最初から入ってました
    * git 2.23.3
    * mailx
        * AWS SESをSMTPとして送信
Basic認証導入の際に起きた症状

# Basic認証って何？

Basic認証は、HTTP通信の規格に備え付けられている、ユーザー認証の仕組みのこと。
サーバーとの通信が可能なユーザーとパスワードをあらかじめ設定しておき、それに一致したユーザーのみが、Webアプリケーションを利用できるようにする。開発段階のアプリケーションを本番環境で確認したいときに開発者のみがアプリケーションにアクセスできるようするときに使う。←この認識でいいのかw

# 解決したいこと

今回は自分の仮説が見当違いすぎたので、仮説と検証作業は省いて、解決方法のみ紹介。
初心者プログラマーは自分の仮説が見当違いすぎたとき、とても悲しいです(笑)

■解決したいこと
Basic認証導入の際に、指定したIDとPASSでログインできない。

https://gyazo.com/282d6778b4394ee0be6811d17ffea594

ログインしようとしても、同じログイン画面に戻ってしまう。

#原因
簡単にいうと、環境変数設定の際にターミナルを2つ（コマンドうつ用・サーバー起動用）開いており、
環境変数を設定した方では、
```ターミナル
% source ~/.zshrc
```
※編集したシェルファイル（.zshrc）を実行するためのコマンド
コマンドを記述して編集した環境変数を実行していたが、サーバー起動用のターミナルではこのコマンドで実行していなかった。
ここら辺をもう少し勉強して理解する必要があると感じた、、、

# 解決方法
解決方法はとても簡単で
ターミナルを複数開いていたら
```ターミナル
% source ~/.zshrc
```
コマンドを環境変数を設定したターミナル以外でも記述すれば良い。
以上。

# zsh（ズィーシェル）
「zsh」はログインシェルという、プログラムを実行する時に、ユーザーの要求に一番最初に対応する役割を担う。隠しファイルなので、特別な設定なしではFinderなどには表示されない。
環境変数を記載する場所は、設定ファイルである「.zshrc」の中。
記載方法は
`ターミナル
% vim ~/.zshrc  
`
コマンドで記述ファイルを開いて、『i』でインサートモードにして編集する。
終わる時は、『esc』を押して通常モードに切り替えてから『:wq』を記述して、保存する。
保存後ターミナルに戻った状態を確認して、source ~/.zshrc　コマンドを記述して実行する必要がある。

# source（ソース）コマンド
「sourceコマンド」とは、シェルに記述された内容を実行する役割を担う。

---
参考にした記事
https://qiita.com/merumeru/items/db00e2634c493f47d86d
ImportError: DLL load failed: 指定されたモジュールが見つかりません。とエラーが出たら

##環境
windows 10
python 3.8.5

##初めに
Jupyter Labにて、
ImportError: DLL load failed: 指定されたモジュールが見つかりません。
とエラーが発生して解決にてこずってしまったため、
メモとして書き記しておきたいと思いました。

##解決方法
解決方法はマイクロソフトのサイトの
[The latest supported Visual C++ downloads](https://support.microsoft.com/en-us/topic/the-latest-supported-visual-c-downloads-2647da03-1eea-4433-9aff-95f26a218cc0)
Visual Studio 2015, 2017 and 2019の下にある
・x64: vc_redist.x64.exe
をインストールしたら解決することが出来ました。

##原因
windowsにはvcランタイムがインストールされていなかったので、
インストールしてあげる必要があったみたいです。
上記のvc_redist.x64.exeをインストールするとvcランタイムをインストールすることが出来るので、
エラーが解消することが出来るようです。

##終わりに
ここまで閲覧して頂きありがとうございました。

誤りや他にいい方法があるなどございましたら、
コメントいただけると幸いです。
pyenv install 3.x.x で error: C compiler cannot create executables

## 忙しい人向け
細かいことはいいから結論が知りたい人向けに先に結論を記載します。
[解決法3 xcode-betaのインストールと適用](#解決法3-xcode-betaのインストールと適用) で筆者は解決しました。

## はじめに

久々にPythonで遊ぼうと思ってpyenvでPython3系をインストールしようと思ったらハマって1時間かかったのでメモとして残します。

## 開発環境

- OS: macOS Big Sur 11.2
- pyenv: 1.2.22

## 事象

```zsh

$ brew install pyenv
```

実行後にバージョンを指定してPythonをインストールしようとするとタイトルのエラーが発生
します。
筆者の場合は3.9.1をインストールしようとしてエラーになりました。

```zsh

$ pyenv install 3.9.1

~中略~

BUILD FAILED (OS X 10.15.7 using python-build 20180424)

Inspect or clean up the working tree at /var/folders/k6/z1nv88hn50lbyt0jk334wlqr0000gn/T/python-build.20210208220628.20206
Results logged to /var/folders/k6/z1nv88hn50lbyt0jk334wlqr0000gn/T/python-build.220210208220628.20206.log

Last 10 log lines:
checking for python3.9.1... python3.9.1
checking for --enable-universalsdk... no
checking for --with-universal-archs... no
checking MACHDEP... "darwin"
checking for gcc... clang
checking whether the C compiler works... no
configure: error: in `/var/folders/k6/z1nv88hn50lbyt0jk334wlqr0000gn/T/python-build.20201015235728.20206/Python-3.9.1':
configure: error: C compiler cannot create executables
See `config.log' for more details
```

**エラーは解決後に再現できなかったのでうろ覚えだがこんな感じだったはず...！**

## 対処法
### その1 pyenvを再インストールしてみる

色々調べてみるとpyenvを再インストールすることで解決した事例もあるようなので半信半疑で試してみる

```zsh

$ brew uninstall pyenv
$ brew install pyenv
$ pyenv install 3.9.1

~中略~

configure: error: C compiler cannot create executables
See `config.log' for more details
```
 
まあそりゃそうだよねー。
解決するはずもないので対処法2へ

### 対処法2 command line tools for xcode の確認

なんとなくエラー文から推測するにCコンパイラがおかしそうなので、command line tools for xcodeが入っているかと、xcodeが最新版になっているかを確認してみる。

```zsh
$ xcode-select --install
xcode-select: error: command line tools are already installed, use "Software Update" to install updates
```

```zsh
$ softwareupdate --list
Software Update Tool

Finding available software
No new software available.
```

コマンドラインツールはちゃんと入ってる(brewが動いているので当然ではあるが)し、
Xcodeのアップデートも確認したが最新版になっている。
念の為macOSのアップデートも確認したが、(2020/02/09現在)最新版になっている。
解決しないので解決法3へ

### 解決法3 xcode-betaのインストールと適用

最終的にこちらの
[Python 3.9.0、3.8.6を pyenv を使って macOS BigSur にインストールする](https://qiita.com/craymaru/items/58e92fac99b5b0ec778f)
を参考にして解決しました！

色々調べてみるとどうやらmacOSのバージョンが新しすぎてXcodeが対応していない(**ここの理解は自信ないので間違っていればコメントで補足ください**)ようなので、上の記事を参考にXcodeのベータ版を入れて対応する。

1. [Beta Software Downloads](https://developer.apple.com/download/) よりXcode-betaのダウンロードをする。(要Apple ID)
2. 1でダウンロードしたXcode-betaを開き、Prefarence->Locationsへ
3. Command Line Tools を1でダウンロードしたバージョンに変更

ここまでできたら

```zsh
$ LDFLAGS="-L$(xcrun --show-sdk-path)/usr/lib" pyenv install 3.9.1
```

とやれば

```zsh
$ pyenv versions
system (set by /usr/local/var/pyenv/version)
  3.9.1

$ pyenv global 3.9.1
$ zsh -l
$ python --version
Python 3.9.1
```

## 結果

:tada:無事Python3系がインストールできた:tada:

## 参考
[Python 3.9.0、3.8.6を pyenv を使って macOS BigSur にインストールする](https://qiita.com/craymaru/items/58e92fac99b5b0ec778f)
[Macのpyenvでconfigure: error: C compiler cannot create executables](https://cocoinit23.com/pyenv-configure-error-c-compiler-cannot-create-executables/)
[ITってそもそも何?] IT初歩知識


#IT (Information Technology)

・情報通信技術
・コンピューターやネットワークなどに関する技術の総称
・構成要素は「ハードウェア」「ソフトウェア」

#ICT (Information and Communication Technology)

・通信技術を活用したコミュニケーション
・インターネットのような通信技術を利用した産業やサービスなどの総称
・ITと同義
・SNSなど、日常のコミュニケーションで使われているものをICTと呼ぶことが多い

#ハードウェア

・インターネットと連携したデータ通信を可能とする技術製品

ーハードウェア構成要素ー
・CPU
・メモリ
・SSD

---
CPU (Central Processing Unit)

・コンピューターの脳の役割を担う
・データ処理や他の部品の動作を管理する

メモリ

・PCの記憶装置
・CPUが処理を行う際、実行内容を一時的に記録する


SSD (HDD)

・データを長期保存する場所(ストレージ)

# ソフトウェア

・PCの中にインストールされているコンピューターを働かせるプログラムの総称

ーソフトウェア構成要素ー
・アプリケーション
・OS
・ミドルウェア

---
アプリケーション

・ユーザーに直接的な機能を提供するソフトウェア

OS (Operating System)

・コンピュータのオペレーション（操作, 運用, 運転）を司るシステムソフトウェア

ミドルウェア

・アプリケーションとOSを連携させるために介在するソフトウェア

# ミドルウェア構成要素

Webアプリケーションの支援ソフトウェア

・HTTP/HTTPS, Apacheなどがミドルウェアとして使われている

監視ソフトウェア

・コンピューターの状況を監視するために使われるミドルウェア

DBエンジン

・DBを動かす仕組みとして使われるミドルウェア

・ORACLEなど