OmniAICreator/Qiita-1.07M huggingface dataset:
【学習メモ】Djangoでのアプリの作り方〜Hello Worldを表示させるまで〜

[Qita](https://qiita.com/rkrk-non/items/dc17406dafe190bbe345/)
の続き

#アプリを作る

```
$ python manage.py  startapp picblog

```

#settings.pyのINSTALED_APPSにアプリを追加

```Django

INSTALED_APPS =[
    'picblog.apps.PicblogConfig',
]

```

#htmlをつくる

picblogの中にtemplateフォルダを作り、その中に新たにpicblogというフォルダを作る。
ここにhtmlを書くようにする。

作ったtemplate/picblogフォルダの中に、base.htmlとhome.htmlを作る。

home.htmlに表したい文字をかく

```
hello world

```



#views.pyを設定

```
from django.views.generic import TemplateView

class Home(TemplateView):
    template_name='picblog/home.html'

```

#urlをつなぐ

configのurls.pyを開く

 ```Python
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('',include('picblog.urls')),
    path('admin/', admin.site.urls),
]
```

picblogアプリの中にurls.pyを作る

Homeはviews.pyで書いたクラス名

```Python

from django.urls import path
from . import views

app_name='picblog'

urlpatterns=[
    path('',views.Home.as_view(),name='home'),
]

```

#ランサーバーする

```
$python manage.py runserver

```


更新されたwebページにhello worldが出たらOK
Laravel 7.xにAdminerを導入する

Laravel5/6にAdminer入れる記事はいくつかあったのですが、7.xに入れる記事が見つからなかったので、一応。

#Adminerって？
laravelもphpも初心者なのでここからです。
![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503026/6163b569-32e2-a21e-7996-cb4a6e3e0cf7.png)

Adminerはブラウザで操作できるデータベース管理ツール。
PHPファイル１つで書かれているため手間が少なく、またサイズも軽い。

対応するDBは以下の通り

+ MySQL
+ Oracle
+ SQLite
+ PostgreSQL
+ MS SQL
+ etc


#Laravel7.xにAdminerを入れる
##ライブラリ
元のツールがPHPファイル１つとはいえ、Laravelに入れるにはいろいろ必要となってきます。
ライブラリは現状2つ（？）あるっぽいです。

・miroc/Laravel-Adminer
　　https://github.com/miroc/Laravel-Adminer

・onecentlin/laravel-adminer
　　https://github.com/onecentlin/laravel-adminer

しかしながら、前者のライブラリはLaravelに合わせたバージョンアップがされておらず、
composer.jsonを見てもLaravel5.xしかサポートしていないようです。

よって、Laravel7.xでは後者のonecentlin/laravel-adminerを使用していきます。


##手順
導入手順に関してはreadmeにある通りですので、5/6と変わりありません。

一応日本語で手順を書いておきます。

###1. インストール
以下のコマンドでライブラリをインストールします。

```
composer require onecentlin/laravel-adminer
```
または、
composer.jsonのrequire部分に

```composer.json
"require": {
    "onecentlin/laravel-adminer": "^4.7"
},
```
を追記して、`composer update`します。

###2. 事前準備
`config/app.php`のproviders部分に以下を追記します。

```app.php
'providers' => [
    ...
    Onecentlin\Adminer\ServiceProvider::class,
];
```

###3. アクセス許可の設定
`app/Http/Kernel.php`の`$middlewareGroups`部分に以下を追記します。

```Kernel.php
protected $middlewareGroups = [
    ...
    'adminer' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,

        // you may create customized middleware to fit your needs
        // example uses Laravel default authentication (default protection)
        \Illuminate\Auth\Middleware\Authenticate::class,
    ],
];
```

また、このあとLaravel5.1用の設定が必要となりますが、今回のスコープではないので割愛します。


###4. Adminerのテーマを設定（任意）
デフォルトの表示でもよければ飛ばしても構いません。が、やっておくと非常に見やすいです。

以下コマンドを実行すると、adminer.cssファイルがpublicフォルダにコピーされます。

```
php artisan vendor:publish --provider="Onecentlin\Adminer\ServiceProvider"
```

[Adminerの公式](https://www.adminer.org/)に様々なテーマがあるので好きなものをコピーして、adminer.cssに上書きしましょう。
ちなみに冒頭の画像は公式の「nette」というテーマを適用した場合のサンプルです。


###5.アクセス
あとはブラウザからアクセスできればOKです。

```
http://[your.domain.com]/adminer
```


#備考
ちなみにライブラリとかじゃなく生のツールの方のAdminerは
Laravelで使用している関数名とコンフリクトしているので、無理やり入れると後が面倒です。
P5.js 日本語リファレンス(setAttributes)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の setAttributes関数を説明します。

## setAttributes() 

### 説明文

WebGL描画コンテキストの属性を設定します。これは、WebGLレンダラーが表示とパフォーマンスを微調整する方法です。

WebGLキャンバスが作成された後に呼び出された場合、描画コンテキストを再初期化することに注意してください。

オブジェクトがパラメータとして渡されると、オブジェクトで宣言されていないすべての属性がデフォルトに設定されます。

使用可能な属性は次のとおりです。

- alpha  
キャンバスにアルファバッファが含まれているかどうかを示します。デフォルトはtrueです。

- depth  
描画バッファに少なくとも16ビットの深度バッファがあるかどうかを示します。デフォルトはtrueです。

- stencil  
描画バッファに少なくとも8ビットのステンシルバッファがあるかどうかを示します。

- antialias  
デフォルトのアンチエイリアスを実行するかどうかを示します(false)(Safariではtrue)

- premultipliedAlpha  
ページコンポジタが描画バッファに色が含まれていると想定することを示します。あらかじめ乗算されたアルファのデフォルトはfalseです。

- preserveDrawingBuffer  
trueの場合、バッファは消去されず、作成者によって消去または上書きされるまでその値を保持します(p5は描画ループで自動的に消去されることに注意してください) デフォルトはtrueです。

- perPixelLighting  
trueの場合、ピクセルごとのライティングがライティングシェーダで使用されます。それ以外の場合は、頂点ごとのライティングが使用されます。デフォルトはtrueです。

### 構文

setAttributes(key, value)

setAttributes(obj)

### パラメタ

- key  
String：属性の名前

- value  
Boolean：名前付き属性の新しい値

- obj  
Object：キーと値のペアを持つオブジェクト

### 例

```javascript
//マウスボタンを押したままにしてperPixelLightingを無効にします
function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke() ;
  fill(255);
}

let lights = [
  {c: '#f00', t:1.12, p:1.91, r:0.2}, 
  {c: '#0f0', t:1.21, p:1.31, r:0.2}, 
  {c: '#00f', t:1.37, p:1.57, r:0.2}, 
  {c: '#ff0', t:1.12, p:1.91, r:0.7}, 
  {c: '#0ff', t:1.21, p:1.31, r:0.7}, 
  {c: '#f0f', t:1.37, p:1.57, r:0.7}
];

function draw() {
  let t = millis() / 1000 + 1000;
  background(0);
  directionalLight(color('#222'), 1, 1, 1);

  for(let i = 0; i <lights.length; i ++){
    let light = lights [i];
    pointLight(
      color(light.c), 
      p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
    );
  }

  specularMaterial(255);
  sphere(width * 0.1);

  rotateX(t * 0.57);
  rotateY(t * 0.63);
  box(45);

  // マウスボタンを押したままのとき、perPixelLighting に false をセットする
  if ( mouseIsPressed) {
    setAttributes('perPixelLighting', false);
    noStroke() ;
    fill(255);
  }else{
    setAttributes('perPixelLighting', true);
    noStroke() ;
    fill(255);
  }
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/mvLDU_qua



### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
PowerAutomateで改行コードを扱いたい（分割したり、取り除いたり）

# やりたいこと

Power Automateで改行コードを削除したり、改行コードで分割したりしたい。
例えば

```
apple
banana
cherry
grape
kiwifruit
melon
```

こんなの感じのプレーンテキストを

```
[
apple,
banana,
cherry,
grape,
kiwifruit,
melon
]
```

な感じで改行コードで分割した配列に変換したい。

# 考え方と課題

分割といえば`split`関数ですね。
Power Automateにもあります！
関数さえあればそれを使うだけ、超簡単！

かと思いきや。。。

**改行コードってどうやって入力するんだ？**
という問題に直面します。

`\n`とかやってみても、そのまま`\n`って文字に解釈されてしまってエスケープシーケンスが効かないという罠が。。。

さらに、`改行コード`と一言でいっても、`LF(Line Feed)`か、それとも`CR(Carrige Return)`も付いて来るのか？
という問題も出てきます。
入力側が単一の環境に限定されているならば、改行コードも特定できるので楽なんですが、Power AutomateをWebServiceっぽく使ってたりするとどんな改行コードが来るかはわからないですよね。
OSとかブラウザなりその他のクライアントなり、送信元が特定できない以上はなにがきてもおかしくない！

そんなわけで、
**改行コードを定義しつつ、それをPower Automateで扱える形式で表現**
する必要があるということがわかりました。

# 実践

## 改行コードを定義する（決める）
LFだけなのか、それともCRも付いて来るのか・・・わからないのであれば、片方に寄せればいい！
ということで、前処理で`CR`はあったら消しておく。
これで以後の処理本体では改行コードは`LF`と定義することができるようになります。

## 改行コードをPower Automateで表現する
Power Automateの式ではエスケープシーケンスが効きません。
なので他の方法を探ります。
この記事を書く前に検索してみました。

[Microsoft Flow上で複数行文字列を改行で分割する](https://qiita.com/kojisaiki/items/d7fb7932e6f20e1e6628)
この記事では改行のみを含む変数を定義してそれを使うという技を使っているようでした。
これで解決する場合はシンプルで良さそう！
しかし、改行コードがCRLFなのかLFなのかわからん。。。ということで、自前で改行コードを用意することにしました。

Power Automateでは文字コードの表現方法として
* UriComponent
* Base64
* DataUri
あたりが使えるらしい。

この中から、CRとLFが表現できれば良いので`UriComponent`を使うことにします。

| 表現したいもの | 文字コード | UriComponent | Power Automate上での表現 |
| ----- | ----- | ----- | ----- |
| CR | 0x0d | %0D | decodeUriComponent('%0D') |
| LF | 0x0a | %0A | decodeUriComponent('%0A') |


# 完成

```text:分割(split)
split(replace({分割対象文字列},decodeUriComponent('%0D'),''),decodeUriComponent('%0A'))
```


```text:除去(replace)
replace(replace({除去対象文字列},decodeUriComponent('%0D'),''),decodeUriComponent('%0A'),'')
```

# おまけ(2020/10/14追記）

アダプティブカードとかで改行したい場合は「\n\n」に置きかえるとよいです。
「\n」にしても「CR」や「LF」「CRLF」どれにしても改行されずに困り果て、ふと「本家のAdaptive Cardデザイナ使ったらどうなるんだろうか」と思い立ってやってみました。
ビンゴ！これで改行がどう表現されているかわかりました。


# 参考文献
* [Microsoft Flow上で複数行文字列を改行で分割する](https://qiita.com/kojisaiki/items/d7fb7932e6f20e1e6628)
* [Azure Logic Apps および Power Automate の式で関数を使用するためのリファレンス ガイド<変換関数>](https://docs.microsoft.com/ja-jp/azure/logic-apps/workflow-definition-language-functions-reference#conversion-functions)
* [Designer | Adaptive Cards](https://adaptivecards.io/designer/)
OCI WAFでwebsocket通信が可能になったので試してみた


# はじめに
先日OCI WAFでwebsocket通信が可能になったみたいなので試してみました。

**Clinet -- WAF -- Listener**

上記の構成でwebsocket通信を許可するためのセットアップ方法をまとめていこうと思います。
ちなみに、OCI WAFに関しては以下をどうぞ。
[Oracle Cloud Infrastructure Web Application Firewallのご紹介](https://blogs.oracle.com/sec/introducing-the-oci-waf-jp)

# 必要ツール
websocket通信を簡単にセットアップできるツール
[ws: a Node.js WebSocket library](https://www.npmjs.com/package/ws)

OCI CLI(出来るだけ最新のものをおすすめします、本稿は2.10.0を利用しています)
[oracle/oci-cli](https://github.com/oracle/oci-cli/releases)

# 手順

今回行った手順は以下。

- oci cliのセットアップ
- リスナーにWAFを適用
- WAFのポリシーをアップデートする
- リスナーでwsを使ってlistenする
- クライアントからリスナーに対してHandshakeを実行

# 試してみた

###oci cliのセットアップ
こちらは既に導入しているリーダーの方もいるかと思うので、スキップします。
*※2.10.0以降のバージョンで試してください*
未導入の方は以下を参照。
[Oracle Cloud : コマンド・ライン・インタフェース(CLI) をインストールしてみた](https://qiita.com/shirok/items/e63be9a22158fef10ba9)

###リスナーにWAFを適用
OCIコンソールからWAFポリシーを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133151/0424e27e-cbf8-0a99-a3e6-f85696a3d9df.png)

作成後、DNSの設定をします。
OCI WAFは、AレコードでWAFのIPアドレスをユーザーが管理する必要ないみたいです。
WAFの設定時に生成される`CNAMEターゲット`を利用します。
プライマリドメインに対して設定する際に、`CNAME`は利用できないので、`ALIAS`で解決する必要があります。

###WAFのポリシーをアップデートする
cliを用いて、WAFのpolicy-configを変更します。

`oci waas policy-config update [OPTIONS]`

[OCI-cli/websocket-path-prefixes](https://docs.cloud.oracle.com/en-us/iaas/tools/oci-cli/2.10.0/oci_cli_docs/cmdref/waas/policy-config/update.html#cmdoption-websocket-path-prefixes)

以下で、`websocket/`配下のみにwebsocket通信を許可するようにします。
`websocket-path-prefixes`に`root`を適用させたい場合は`["/"]`と書く必要があります。
また渡す値は配列になっているので、複数のパスに適応する事ができるみたいです。

```
$ oci waas policy-config update --waas-policy-id ***** --websocket-path-prefixes '["/websocket/"]'
```

*※cliのバージョンは2.10.0以降を使ってください*

###リスナーでwsを使ってlistenする
Nodeが入っていれば、npmでinstall可能。
(もちろんリスナー側で用いるポートのfirewallは空けておく。)

```
$ npm install -g wscat
```

`-l`で通信を受け付ける(Listen)設定をします。

```
$ wscat -l 80
```

`ws` すごい簡単ですね:raised_hand:

###クライアントからリスナーに対してHandshakeを実行
クライアント側も同様に`ws`をインストールする必要があります。

```
$npm install -g wscat
```

あとは、リスナーがlisten出来ている事を確認し、以下を実行。うまくいくはず。

```
$ wscat -c ws://web.topskills.jp:80
```

また、`curl`を用いてハンドシェイクする事も可能。
レスポンスが `HTTP/1.1 101 Switching Protocols` で返ってくる事で成功を確認できます。

```
$ curl -v -H 'Sec-WebSocket-Version: 13' -H "Sec-WebSocket-Key: $(head -c 16 /dev/urandom | base64)" -H "Connection: Upgrade" -H "Upgrade: websocket" "http://********/websocket/"
```

以上の通り、本稿では、OCI WAFでwebsocket通信を試してみました。
次回はもう少し掘り下げた内容を書ければ、と思っています。:relaxed:

#参考記事
[WebSocket についてまとめてみる](https://qiita.com/att55/items/da663f6e713c3bd073e8)
[Oracle Cloud Infrastructure Web Application Firewallのご紹介](https://blogs.oracle.com/sec/introducing-the-oci-waf-jp)
[Oracle Cloud : コマンド・ライン・インタフェース(CLI) をインストールしてみた](https://qiita.com/shirok/items/e63be9a22158fef10ba9)
[WebSocket の検証では wscat が便利だった](https://qiita.com/toshihirock/items/4dfaca29058c9e744529)
【UE4】プロジェクトファイル作成をコマンドラインで行う方法＋UE4.25での対策

# 本題の主旨
Windows C++ プロジェクトファイルを生成する場合、通常は *.uproject ファイルを右クリックして "Generate Visual Studio project files" で生成します。
これをコマンドラインで行う方法と UE4.25 での注意点を説明します。

UE4.25までの内容です。

## プロジェクトファイルを生成
- `<UBTPath> -projectfiles <ProjectPath>` - エディタで指定されたプロジェクトを生成する
- `<UBTPath> -projectfiles <ProjectPath> -2019` - VS2019 プロジェクトファイルを生成
- `<UBTPath> -projectfiles <ProjectPath> -Code` - VSCode プロジェクトファイルを生成

## 略称表記の定義
- `<UBTPath>` : `c:\Program Files\Epic Games\<UEVersion>\Engine\Binaries\DotNET\UnrealBuildTool.exe`
- `<UEVersion>` : UEのバージョン。例: `UE_4.24`
- `<ProjectPath>` : 対象のプロジェクトファイルへの**フルパス**。

## UE4.25の場合
**上記の方法で生成することはできます**が、引数でプロジェクトファイルを生成した場合は警告が出て以下の対応策を提示されます。

```
WARNING: Project file formats specified via the command line will be ignored when generating
         project files from the editor and other engine tools.

         Consider setting your desired IDE from the editor preferences window, or modify your
         BuildConfiguration.xml file with:

         <?xml version="1.0" encoding="utf-8" ?>
         <Configuration xmlns="https://www.unrealengine.com/BuildConfiguration">
           <ProjectFileGenerator>
             <Format>VisualStudio2019</Format>
           </ProjectFileGenerator>
         </Configuration>
```

**"コマンドライン引数ではなく BuildConfiguration.xml で対象を指定してね"** とのことです。

BuildConfiguration.xml は [ビルド コンフィギュレーション | Unreal Engine Documentation](https://docs.unrealengine.com/ja/Programming/BuildTools/UnrealBuildTool/BuildConfiguration/index.html) に記載されている箇所に置くことで読み込まれます。

### 注意点
この設定はエディタで指定されたプロジェクトの種類の設定より優先されるため、必要な時以外は記述しないほうが良いかもしれません。
標本から元の確率分布の平均情報量（エントロピー）を求める方法について

**本記事に関する注意**
　素人の落書きです。誤り、用語の不適切、証明なしなどが多々見られると思います。
　何卒ご了承ください。

#本記事の目的
　連続確率分布により生成された標本から、元となる確率分布の平均情報量を求めたい。


##理論
　確率密度関数$\,\,f\,$をもつ連続確率分布の平均情報量$\,h(X)\,$は式 1 で表されるが、標本数$\,N\,$が十分大きければ、式 2 のように各標本$\,\,x_i\,$の情報量から求められる（はず）。

```math
\begin{align}
&h(X) = \int_{\chi}^{}f(x)\,log\,f(x)\,dx\qquad\qquad・・・式１\\
&h(X) \approx \frac{1}{N}\sum_{i=1}^{N}\,-logP(\,X = x_i\,)\,\qquad・・・式２
\end{align}
```

　式２から$\,h(X)$ を求めるためには、各標本$\,\,x_i\,$に関して$\,P(\,X = x_i\,)\,$を求める必要がある。
　ここから、$P(\,X = x_i\,)\,$と$\,h(X)\,$の求め方について少し説明していく。

　まず、いくつかの量を定義する。
　・ 各標本間の距離を$\,d(x_i,\,x_j)\,$とおく$^*$。
　・ 各標本$\,\,x_i\,$に関して、$x_i\,$との距離$\,\,d\,$が$\,r\,$以下である標本の総数を$\,n_i\,$とおく（自身含む）。
　・ ある$\,\,x\,$からの距離$\,\,d\,$が$\,r\,$以下である領域の体積を$\,V(r)\,$とおく。
　この定義に従い、適切な$\,r\,$を決めることで$\,P(\,X = x_i\,)\,$を式３から近似的に求められる。

```math
P(\,X=x_i\,)\, \approx \frac{n_i}{NV(r)}\qquad・・・式３
```

　式２に式３を代入することで、式４が得られる。

```math
\begin{align}
h(X,r) &\approx \frac{1}{N}\sum_{i=1}^{N}\,-log\frac{n_i}{NV(r)}\\
&＝ \,logV(r) + logN - \frac{1}{N}\sum_{i=1}^{N}\,log\,n_i\qquad・・・式４
\end{align}
```

　式３の近似を成立させるために、$r\,$はなるべく小さな値をとる方が好ましい。しかし、標本数が有限である以上、$r\,$が極端に小さいと大数の法則を満たせず、式３の近似に綻びが出る。そのため、$r\,$の適切な決め方は実際のデータを眺めながら考える必要がある。
　
　
$^*\lim_{d(x_i,\,x_j) \to 0}P(\,X=x_i\,)=lim_{d(x_i,\,x_j) \to 0}P(\,X=x_j\,)\,\,$さえ満たせば何でもいいはず
##応用
　適当な二次元ガウス分布から標本を生成して、$h(X)\,$を求めてみる。

```python
import numpy as np
from matplotlib import pyplot as plt


def calc_d(x):
    N = len(x)
    x_tiled = np.tile(x, (N, 1, 1))
    d = np.linalg.norm(x_tiled - x_tiled.transpose((1, 0, 2)), axis=2)
    return d


# 次元数が 2 であるため円の面積の公式を適用
def calc_v(r):
    v = np.pi * np.power(r, 2)
    return v


def calc_h(d, v, N, r):
    n = np.sum(d <= r, axis=0)
    h = np.log(v) + np.log(N) - np.sum(np.log(n)) / N
    return h


# 適当な 2 次元ガウス分布からデータを生成する
data = np.random.normal(0, 1, (1000, 2))
# r を変化させながら h(X) を計算する
r_list = [(i + 1) * 0.01 for i in range(10000)]  # r の範囲は適当に決めた
d = calc_d(data)
N = len(data)
h_list = [calc_h(d, calc_v(r), N, r) for r in r_list]
# グラフを描画する
# 計算値を青い実線でプロットする
plt.figure(0)
plt.plot(r_list, h_list, color='blue', linestyle='solid')
# 標本分散から計算した値を青い点線でプロットする
Z = np.cov(data[:, 0], data[:, 1])
h_s = 0.5 * np.log(np.linalg.det(2 * np.pi * np.e * Z))
plt.plot(r_list, [h_s for _ in range(len(r_list))], color='blue', linestyle='dotted')
# 母集団分散から計算した値をオレンジ色の点線でプロットする
h_u = np.log(2 * np.pi * np.e)
plt.plot(r_list, [h_u for _ in range(len(r_list))], color='orange', linestyle='dotted')
plt.xlim([0, 3])
plt.ylim([0, 5])
plt.show()
```

　実行すると、このようなグラフが得られる。

![Figure_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634633/49bfdb71-c645-3526-d53d-05444c86961a.png)

　横軸は$\,r\,$、縦軸は$\,h(X,r)\,$を表す。
　理論で説明したように、$r\,$が小さいほど$\,h(X,r)\,$は真の値に近づくが、小さすぎると今度は負の無限大に向かって発散していく。
　グラフを見ると、傾きが最も小さくなるように$\,r\,$を決めるのがなんとなく良さそうに見える。実際に、式３の近似が成り立つ場合$\,\frac{\partial}{\partial r}h(X,r)=0\,$も成り立つことを考慮すると、この決め方もそこまでおかしくは無いと思うが、何か証明があるわけでも無いので過信は禁物。
CMS TYPO3 10.4のインストール　その２

#Introduction Packageを閲覧します

[CMS TYPO3 10.4のインストール　その１](https://qiita.com/teijinakano/items/2b9c8ab1e14d590b6ad8) で書いた通りに順調に来ていれば、Introduction Package　が動くはずです。
下の画像で示す目のアイコンをクリックします。
![install-10.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/2cf52f12-1695-8860-f4d4-d3cf5451b471.jpeg)

すると以下のページが現れます。ここまでくれば、Good!です。
![install-11.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/5ad882e0-25f2-484c-da74-f27d08556103.jpeg)

[introduction packageが動く動画](https://youtu.be/XAsELS5Ew-0)  もご覧ください。

#日本語化します
画面左端のMaintenanceのmanage language packageのところで、Japaneseを追加します。
![install-12.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/989cbaf8-2139-0333-c970-882fa599d702.jpeg)

Japaneseを追加したら、update allもしておいて下さい。
![install-13.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/356bc35f-fd0f-b698-83e6-e81456a06b28.jpeg)

次に少々わかりにくいのですが、LISTメニューを選択して、コンテンツ階層の一番上を選びます。画面右側をスクロールしていくと、website languageというところがあるので、ここでJapaneseを追加します。

![install-14.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/805d1a7b-00c6-1ed7-a73d-5984ae2cf817.jpeg)
![install-15.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/d7e3fcb1-d5f9-2016-b375-339c85efbad1.jpeg)

画面左端のSitesメニューを選択して、LanguageタブからJapaneseを追加します。
![install-16.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/07359855-5459-abd6-8646-2c22bca5d882.jpeg)
![install-17.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/d1503c0e-ab74-3579-d05f-c9612e9e6dfd.jpeg)
![install-20.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/9283ee8e-901c-8fb0-7db6-692831afbd09.jpeg)


デフォルトでは、Englishのbaseパスが　/ でJapanese が/ja/ となっています。これが気持ち悪ければ、このパスを入れ替えて下さい。若干トラブルかもしれませんが、なんとかなります。説明がうまくできず申し訳ありません。

うまく行けばpageメニューを選択したときに、各コンテンツがJapaneseで表示されます。
![install-18.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/d63b5efc-826f-71e4-9406-a9e802e948aa.jpeg)
![install-19.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26218/6b45b598-f3a9-bd00-4899-ea0eb258cbd3.jpeg)

上の画像で示すようにTYPO3は、マルチ言語をサポートしているので、日本と英語のコンテンツを同時に作る機能があります。
左端のメニューを日本語化するには、以下で示すようにuser settingでJapaneseを選択します。

ここまでくれば、Introduction packageのコンテンツを自由に編集することにより、TYPO3の編集方法がわかってきます。


[CMS TYPO3 10.4のインストール　その１](https://qiita.com/teijinakano/items/2b9c8ab1e14d590b6ad8)

[私のtypo3で作ったサイト](https://visualmapping.info/)
IPv6への対応法をまとめてみた

## IPv6への対応の現状

## 理想

- サーバ - クライアント間でエンドツーエンドの通信をすることが理想
![IPv6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609106/21d84d51-28f7-0b9c-382c-531c9d9e7418.png)



## 現実

- 互換性のないIPv4とIPv6が混在する  
    IPv4は枯渇しているのに、まだまだ現役
![IPv4IPv6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609106/158c2561-8cbe-33a9-2bf1-c09f05a0e0d6.png)


- IPv6を待望していたIoT分野でも、セキュリティ上の観点から、  
    [IPv6の利用はインターネット経由のアクセスが必要な機器だけに限定することが勧められている](https://www.itmedia.co.jp/enterprise/articles/1606/22/news025.html)

⇔ ところが、**[IPv6のアクセスが増えている](https://www.google.com/intl/ja/ipv6/statistics.html)**  

何らかの対応策が必要だと考える

## 対応策

- プロコトル変換  
    ⇐ AWSで使われている手法
- トンネリング

### プロコトル変換

#### ALB (AWS)

![ALB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609106/112a1246-d0d7-515b-9f5b-3a4263efd275.png)


- ALBまではIPv6
- ALBからはIPv4
- ただし、vpcはIPv6に対応している必要あり
- CLBは未対応

#### Route53 + CloudFront (AWS)

![CloudFront.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609106/bd95eae6-863b-a22a-222f-eb02878edadd.png)


- エッジまではIPv6

### NAT64

![NAT64.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609106/fb197836-aca9-d74f-8c29-e4887094d016.png)


- IPv6をIPv4に変換する機器をネットワークにかます

[秒でサイトのIPv6対応ができる！サーバサイド Open NAT64を公開した](https://qiita.com/__kaname__/items/0c77fb3b5fb01a796a4b#%E3%82%B5%E3%83%BC%E3%83%90%E3%81%ABipv6%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B%E7%9C%9F%E3%81%AEipv6%E5%AF%BE%E5%BF%9C%E3%81%AB%E3%82%80%E3%81%91%E3%81%A6)
[NAT64/DNS64 public test](https://go6lab.si/current-ipv6-tests/nat64dns64-public-test/)

## トンネリング

![tunneling.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609106/407c0f3c-d823-4ae5-ad13-736e80fea056.png)


- IPv4パケットをラップし、IPv6パケットとして送る  
    受け取った側でIPv4パケットとしてアンラップする
![tunneling](tunneling.png)
[IPv6のデメリットを技術でカバーするIPv6 IPoE（IPv4 over IPv6）とは？](https://www.ntt.com/business/services/network/internet-connect/ocn-business/bocn/knowledge/archive_13.html)

## まとめ

- IPv4とIPv6を共存させる技術をまとめた  

- セキュリティ上、IPv6はIPv4の課題に加え、ルーティング等IPv6独自の課題もある  
   IPv6のIPSecは可能なだけで、デフォルトでは有効化されていない

## 参考

[なぜいま、あらためて「IPv6」を学ばなければならないのか](https://ascii.jp/elem/000/004/008/4008245/)

[IPv6セキュリティ ～問題点と対策～ - JPNIC](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=2ahUKEwjtj7jbo6vpAhWmUN4KHe-TCSkQFjAAegQIBhAB&url=https%3A%2F%2Fwww.nic.ad.jp%2Fja%2Fnewsletter%2FNo54%2F0800.html&usg=AOvVaw0wpLiATo_Dh_QAcoPp9KTM)

[IPv6のセキュリティ - JNSA](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=8&ved=2ahUKEwjtj7jbo6vpAhWmUN4KHe-TCSkQFjAHegQIARAB&url=https%3A%2F%2Fwww.jnsa.org%2Fseminar%2F2009%2F0127nsf2009%2Fdata%2FA4_3Kitaguchi.pdf&usg=AOvVaw30joGI381z-w2LQc-JH9RF)

[IPv6でセキュリティがスカスカになってませんか？](https://www.geekpage.jp/blog/?id=2017-4-19-1)

[Elastic Load BalancingがIPv6に対応しました！(5年ぶり2回目)](https://dev.classmethod.jp/articles/elb-ipv6/)

[CloudFrontがIPv6に対応](https://kizawa.info/cloudfront-ipv6)
IQ Bot：マッピング学習画面_③設定中のフィールドの詳細

このページは[「IQ Bot：マッピング設定の画面でできること」](https://qiita.com/IQBotter/private/2c5a6e77d6059b968a74)のサブカテゴリです。

##設定中のフィールドの詳細

設定中のフィールドの詳細画面は図中の③にあたり……
![画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/7de2de49-9d61-2094-0648-f5349407fe21.jpeg)

以下がその拡大図です。
![フィールド詳細_図解つき.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/fdb25fd3-c679-703f-f5b9-a85dea9fdcbc.jpeg)

aは[マッピングの設定](https://qiita.com/IQ_Bocchi/items/117778e2ef3e87460f62)に使う欄で、bは[カスタムロジック](https://qiita.com/IQ_Bocchi/items/1d8e7c77ad47e838476c)を編集するのに使う欄です。

それ以外の欄は誤り検知の条件設定のために使います。

誤り検知の条件設定については、近日中に記事を公開します。
Windows Server 2012R2 サーバーマネージャーが起動しない問題

#Windows Server 2012R2でサーバーマネージャーが起動しない

サーバーマネージャーを起動しようとすると停止されちゃいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156294/be80353e-ffe5-2c1c-c733-e6ac14b8a38a.png)

問題の詳細は以下のとおりです。

```
問題の署名:
  問題イベント名:	CLR20r3
  問題の署名 01:	ServerManager.exe
  問題の署名 02:	6.3.9600.17238
  問題の署名 03:	53d0b3e7
  問題の署名 04:	Microsoft.Windows.ServerManager.Common
  問題の署名 05:	6.3.9600.17238
  問題の署名 06:	53d0b3ba
  問題の署名 07:	1373
  問題の署名 08:	1c6
  問題の署名 09:	System.ArgumentException
  OS バージョン:	6.3.9600.2.0.0.272.7
  ロケール ID:	1041
  追加情報 1:	bddf
  追加情報 2:	bddf503950b8d434c75406ee1cb9b99a
  追加情報 3:	5152
  追加情報 4:	51521058459b170db092ccbd2230f692

オンラインのプライバシーに関する声明をお読みください:
  http://go.microsoft.com/fwlink/?linkid=280262

オンラインのプライバシーに関する声明が利用できない場合は、プライバシーに関する声明をオフラインでお読みください:
  C:\Windows\system32\ja-JP\erofflps.txt
```

#WEBの情報

日本語のページは見つからなかったんですが、英語のページだと、

https://serverfault.com/questions/704899/server-manager-wont-start-in-windows-server-2012-r2

というドンピシャのがありました。

が、改善しませんでした。

#他のユーザーで

上の情報でユーザー固有なのか、他のユーザーも同じなのか確かめるために別のIDでログインしました。
すると、なんと、普通に立ち上がりました。

#なので

ユーザーごとのファイルかレジストリが壊れているという結論になったので、壊れている部分を見つけて治すなんてことはせず、ユーザーごと削除しました。

すると、なんと、次のログインで普通にサーバーマネージャーが起動しました。


めでたしめでたし。
GitHub Actions で Slack 通知をする時にコミットメッセージを入れたい時のハマりどころ

GitHub Actions を使用して Slack にコミットメッセージ付きのメッセージを送ろうとした時にうまくいかなかったことの調査・解決方法をまとめます。

## 何が起きていたか
以下のフォーラムを参考にしてコミットメッセージを取得しようとしていた。
しかしうまく動かなかった。
[Accessing commit message in pull_request event - Community Forum -](https://github.community/t5/GitHub-Actions/Accessing-commit-message-in-pull-request-event/td-p/40856)

```yml
- name: get commit message
        run: |
           echo ::set-env name=commitmsg::$(git log --format=%B -n 1 ${{ github.event.after }})
```

## 先に結論
`actions/checkout@v1` と `actions/checkout@v2` の挙動が異なっていたため、動作していなかった。

### 解決策
解決策は２つあります。

#### `actions/checkout@v1` を使用する
こちらは単純です。`actions/checkout@v1` と `actions/checkout@v2` の挙動の差異が問題ならば `actions/checkout@v1` を使用すればうまくいきます。
ただ、せっかく `actions/checkout@v2` が出ているのに使用しないのは避けていきたいところです。

#### `actions/checkout@v2` を使用し、同時に `ref` を指定する
`actions/checkout@v2` アクションを使用するタイミングで Pull Request の HEAD にチェックアウトする方法です。
今回自分はこちらを採用しました。

```yaml
- uses: actions/checkout@v2
  with:
    ref: ${{ github.event.pull_request.head.sha }}
```

## 調査
挙動が違うと感じた/実感した際に行った調査内容についてです。

### `git log` をワークフローの中に入れてみた
#### `actions/checkout@v1`
まず、対象のコミットは以下です。
![スクリーンショット 2020-05-11 17.54.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180744/3e00583d-be81-45c8-cd93-0d651197ec91.png)

コミットハッシュが `24c119f` となっています。

ログは以下のようになっています。
上から２つ目に対象のコミットが入っていますね。

```
git log
  shell: /bin/bash -e {0}
commit 61407417192b36f7ce78a7d10100c0ca0aa77609
Merge: 554330b 24c119f
Author: Ryoya Ito <30540303+ry-itto@users.noreply.github.com>
Date:   Sat May 9 08:38:22 2020 +0000

    Merge 24c119f72c7d35bb0e24894e2740b96e018e0c51 into 554330bcd5721bc2fb8ac0382255e97860914d94

commit 24c119f72c7d35bb0e24894e2740b96e018e0c51
Author: Ryoya Ito <30540303+ry-itto@users.noreply.github.com>
Date:   Sat May 9 17:38:20 2020 +0900

    Update build_task.yml

commit a8c6cebe203d7fd393229976c9155882a11ed1dd
Author: Ryoya Ito <30540303+ry-itto@users.noreply.github.com>
Date:   Sat May 9 17:35:53 2020 +0900

    Update build_task.yml

...
```

### `actions/checkout@v2`
対象のコミットは以下です。
![スクリーンショット 2020-05-11 17.56.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180744/dc0bf090-2cb9-fb04-8b4d-56bbc44d39c5.png)

以下がログです。
これだけ？となるかと思いますが、これだけです。これ以上のログはないです。
対象のコミットが含まれていないことがわかるかと思います。

```
git log
  shell: /bin/bash -e {0}
commit 2670243ed341020471cbb8f156ea036ceb33c3ba
Author: Ryoya Ito <30540303+ry-itto@users.noreply.github.com>
Date:   Sat May 9 07:40:41 2020 +0000

    Merge 3f6fd628703a69a867143c6b08ec49e5e279d226 into 554330bcd5721bc2fb8ac0382255e97860914d94
```

### 推測
- `actions/checkout@v1` では、そのまま Pull Request のブランチの `git log` 全て + マージ後の状況のコミット

- `actions/checkout@v2` では、マージ後の状況のコミットしか持っていない

のかなと思っています。
（`マージ後の状況のコミット` なのかどうかは定かではありません。もしわかる方いたら教えていただけるとありがたいです。)

## 終わりに
今回はコミットメッセージを取得することが目的でしたが、他のパターンでも今回のようなことは起こり得ると思います。
ネット上にある `actions/checkout@v1` を使用した記事を参考にする際は上記解決方法を試してみてください。
GoogleAppsScriptでDriveApp.getFolderById()を使ったときに「Exception: サーバー エラーが発生しました。しばらくしてからもう一度試してください。」と出る。

# 問題

```javascript:コード.gs
// ...
var allFiles = DriveApp.getFolderById('<id>').getFiles();
// ...

```
を実行したときに、

```
Exception: サーバー エラーが発生しました。しばらくしてからもう一度試してください。（行 XX、ファイル「コード」）
```
とでる。

# 解決策
よーくわからん。自分は実行可能APIにするために`GoogleCloudPlatform`を紐づけたんですが、そのせいだと思われる。この状態だとすべての外部APIは`GCP`側でOnにしないといけないらしい。まぁ、めんどい。

1. `GCP`開く。
2. `APIとサービス`から`ライブラリ`。
3. 検索窓で`Google Drive API`と検索。
4. 出てきたやつを有効にする。
5. 以上。

# さいごに。
実行可能APIについてはこいつをどうぞ。
https://qiita.com/Cyber_Hacnosuke/items/acf730c246c7d2f58c0c

参考
https://stackoverrun.com/ja/q/9656264

Googleさん、一生恨みます。そしてDeepLありがとう。
Twitter→https://twitter.com/CyberHacnoshuke
Python_yamlをやる


<h1>
<span id="目次" class="fragment"></span><a href="#%E7%9B%AE%E6%AC%A1"><i class="fa fa-link"></i></a>目次</h1>

<ol>
<li>Python imort yaml</li>
<li>yamlファイルとは？</li>
<li>実行したソースコード</li>
<li>自分のミス</li>

</ol>


<h1 id="Python imort yaml">1.Python imort yaml</h1>

yamlファイルが生成される。
「yaml」読み方は「ヤムル」「ワイエーエムエル」だけど
自分はワイエーエムエルで呼んでます。
ヤムル派もたくさん居ます。

<h1 id="yamlファイルとは？">2.yamlファイルとは？</h1>
YAMLという形式で書かれたテキストファイルの事。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615291/dffd9d6e-5b26-d495-13b0-b6ba33cea679.png)
<p>コードによって生成されたファイルの中身</p>




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615291/7405d500-cb6e-683b-3e8e-ba97c75792c3.png)
<p>出力画面</p>





<h1 id="ソースコード">3.ソースコード</h1>
<blockquote>

<div class="code-frame" data-lang="text"><div class="highlight">
<pre>
""""
[DEFAULT]
debug = True
[web_server]
host = 127.0.0.1
port = 80
[db_server]
host = 127.0.0.1
port = 3306

"""

import yaml
with open('config.yml','w')as yamlp:
    yaml.dump({
        'web_server': {

        'host': '127.0.0.1',
        'port': 80
    },
        'db_server':
            {

        'host': '127.0.0.1',
        'port': 3066
            }
   },yamlp,default_flow_style=False)

-----------------------------------------------
with open('config.yml', 'r') as yaml_file:
    data = yaml.safe_load(yaml_file)
    print(data, type(data))
    print(data['web_server']['host'])
    print(data['web_server']['port'])
    print(data['db_server']['host'])
    print(data['db_server']['port'])
</pre></div></div>

<p>これを実行すると同じディレクトリに.ymlが生成され中身が見えます。</p>
</blockquote>



<h1 id="自分のミス">4.自分のミス</h1>

SyntaxErrowはマジで自分のせいなので、よく構文はチャックしよう


},yamlp,default_flow_style=False)
           ^
SyntaxError: invalid syntax

「　}　」忘れてた。

これで20分
Gmailで他のメールアドレスからメールを送れなくなった場合（CORESERVER版）

Gmailには[名前](https://support.google.com/mail/answer/22370?hl=ja&authuser=0)という独自ドメインなど他のメールアドレスとしてメールを送信する機能があるのですが、[2020年4月あたりから「TLS Negotiation failed, the certificate doesn't match the host.」というエラーで送信ができなくなる](https://qiita.com/kenji0302/items/7d3a9b351d9bb9ea5967)という現象が発生しているようです。
ぼくが保有している独自ドメイン（メールサーバーはCORESERVER）でも同様の現象が発生してしまいました。

Gmail上の設定を見てみると以下のようになっています。

```
SMTPサーバー: xxx-coreserver-jp.value-domain.com
ポート: 587
ユーザー名: foo@example.com
パスワード: ****
TLS を使用したセキュリティで保護された接続（推奨）
```

SMTPサーバー名がトリッキーな名前になっていますが、設定した当時はOP25B対策か何かでこの名前にする必要があったような気がします。
おそらく証明書がこのサーバーに適合してないものだとアタリをつけて、CORESERVERの管理画面を確認してみるとSMTPサーバーの情報は「*xxx*.coreserver.jp」となっていたので、GmailのSMTPサーバーをそれに修正したところ無事メールが送信できるようになりました。

おそらくXREAなどのValue-Domain系のサーバーでも同様の手順で解決できると思います。
Rails＋Vue＋Docker＋Webpackでの開発時に「net::ERR_EMPTY_RESPONSE」が繰り返される

#### 参考にさせていただいた記事
**・[Rails & Webpackerを最大限活用するために知っておくべきことまとめ](https://qiita.com/ttiger55/items/e45ec0febba3a412507e)**
**・[Webpacker使うなら最低限これだけは知っておいてほしいこと](https://qiita.com/chimame/items/8d3d6f4afea675cffa7d)**

#### Console上で、「net::ERR_EMPTY_RESPONSE」が繰り返される
Rails＋Vue＋Docker＋WebpackでWEBアプリを開発中、タイトルの通り以下のエラーに遭遇しました。
<img width="1199" alt="スクリーンショット 2020-05-11 16.58.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528941/6fc65c73-6bc0-17de-3326-e13a617c6a14.png">

エラー解決までにかなり時間が掛かってしまいましたが、原因は単純で、docker-compose.ymlファイルで、**ポート設定**と**WEBPACKER_DEV_SERVER_HOST**の設定が無かった為でした。
<br>

**以下が、エラーを解決したコードになります。**

```docker-compose.yml
version: '3'
services:
  web:
    build: .
    command: bundle exec foreman start -f Procfile
    volumes:
      - .:/app
    ports:
      - 3000:3000
      - 8080:8080 # 追加したコード
    depends_on:
      - db
    tty: true
    stdin_open: true
    environment:
      - WEBPACKER_DEV_SERVER_HOST=web #追加したコード
  db:
    image: mysql:5.6
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
volumes:
  db-volume:

```

調べてみたところ「WEBPACKER_DEV_SERVER_HOST」を設定することで、Rails側でWebpackerが起動していることを検知して、接続できるようになるそうです。
HTMLとJavaScriptではエスケープシーケンスの書き方が異なるｰ備忘録

#HTMLとJavaScriptではエスケープシーケンスの書き方が異なる
ということをすっかり忘れており、HTML必死にJavaScriptのエスケープシーケンスを使ってエラーを連発するという出来事があったので備忘録として残しておく。

#HTMLとJavaScriptのエスケープシーケンスの違い(一例)
|文字表記|HTML|JavaScript|
|---|---|---|
|ダブルクォーテーション(") |\&quot;|\"|
|シングルクォーテーション(')  |\&#39;|\'|

#そもそもエスケープシーケンスとは
>画面上に文字を出力する際に、文字そのものを出力するのではなく、文字色の変更やカーソルの移動、文字の消去など、文字出力の制御を行う特殊な文字列のことである。[IT用語辞典](https://www.weblio.jp/content/%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%82%B7%E3%83%BC%E3%82%B1%E3%83%B3%E3%82%B9)

ダブルクォーテーションで囲んだ中にさらにダブルクォーテーションを使いたい、などの場合に用いられるような書き方。

例えば、JavaScriptで「"JavaScript"を勉強します。」と表示したいようなとき

```js

let JS = ""JavaScript"";
document.write(`${JS}を勉強します。`);
```
上記では、エラーとなる。

そこで、ダブルクォーテーション(")のエスケープシーケンス(\")を利用すると

```js
let JS = "\"JavaScript\"";
document.write(`${JS}を勉強します。`);
```
「"JavaScript"を勉強します。」と表示が可能になる。

以上。
チーム開発を終えて(スクール振り返り)

#はじめに
【この記事を書いたきっかけ】
3ヶ月間のプログラミングスクールのカリキュラムを終えて、2ヶ月目のチーム開発においての学びや気づいた事をいつでも振り返れるようする為。


#チーム開発の内容
1チーム4人のグループに分かれて、ECサイトを開発する。
流れとしては<b>要件定義→設計→開発→テスト</b>


要件定義・設計はある程度決められており、（機能やワイヤーフレームなど）
自分たちで行った作業は主に`ER図・テーブル定義書・アプリケーション定義書・開発・テスト`


#自分の担当・役割
<b>・ログイン機能(devise)
・それぞれのページのレイアウト(Bootstrap)
・担当範囲以外のヘルプ</b>

deviceを使ってユーザーと管理者を分けてログイン機能を追加した。デザイン面の担当でBootstrapを使ってレイアウトを整え、自分の手が空いたら他の箇所の手伝い。



#チーム開発で学んだこと
###複数人で開発する際のGitHubの使い方
チーム開発では当たり前のことだが、開発ブランチと本番ブランチに分けて開発を進めていく。
(メンバーごとにブランチを分け、機能や修正ができたらpushしてmasterブランチにマージする)

今回はコミット名は細かく決めていなかったが、実務ではずっと同じメンバーで開発する訳ではないので、誰でも理解できるようにコミット名のルールを決めると良い。



###自動テストは早めにする
今回は時間が少なかったので、テストは手動で動作確認したのみだった。

なので、RSpecでテストコードを書いてテストすれば、エラーが出るところがあったかもしれない。アプリが完成した後に、テストコードを書いて実行するとエラー祭りで解消するのに時間がかかるので早めにテストコードを書く必要があると実感。

テスト駆動開発（TDD）もあるぐらいなので、テストは機能追加時など早めに書くのが良い。テストしておけば、リファクタリングもしやすい。



###コミュニケーションの重要性
エンジニアは一人でパソコンと向き合って作業を進めるイメージだったが、そんな訳でもない。

実際は開発をする上でチーム内でコミュニケーションをとるのは必要不可欠。積極的にコミュニケーションをとる事で意見も言いやすくなり、開発がしやすい場になる。

また、コミュニケーションを取っておかないと認識のズレが起き、エラーやミスが出る原因となる。



###チーム内で意見を発言する大切さ
私はチームの最年少だったので意見を良いやすい立場ではなかったが、積極的に発言するように意識した。

自分ができることやできないことなどしっかり伝えないと相手も理解できないし、年齢に遠慮して発言できないと最終的に迷惑をかける可能性もある。

開発途中には<b>KPT</b>を2回実施し、振り返った。KPTでも同様にそれぞれがしっかり考えを話すことでお互いの状況を理解できるようになる。




#チーム開発で苦労した点
###GitHubでコンフリクトが起きたときの対処
チーム開発ではコンフリクトが起きたので、随時対処する必要があった。

<b><コンフリクトで意識したこと></b>
コンフリクトが起きないようにチーム内でチャットツールなどを使い、
どの範囲を変更するかなど密なコミュニケーションを取った。

それでもコンフリクトが起きることは必ずあるので、
対処する際はどの範囲を削除するかなど確認して修正する。



#今後に活かせる点
###GitHubの活用方法
チーム開発を通してGitHubの使い方をより理解できたのは良かった。

`・ブランチを切ることで同時に開発が進められる
 ・コンフリクトが起きた際の対処法`
など実際に開発をしながら経験した事で理解もしやすく、現場に入っても活かせる。


だが、それでもまだまだGitHubを有効活用できる。例えば、`issueごとにプルリクエストを出す`など、より実務に近い形で活かせる使い方をしていきたい。

#####参考記事・プルリクエストの作法
https://qiita.com/ikuwow/items/fb52a54c086398eb5b92


###チーム開発の経験
要件定義からテストまでサービスが完成するまでの流れを一通り知ることができた。

要件定義や設計だけでも数日時間がかかったのは驚きだったが、これらのことをせずにいきなり開発してしまうと必要な機能の漏れなども出てくるので必要な過程だと実感。また、要件定義や設計をしっかり行うことで開発スピードも早くなる。

チーム開発を通して開発だけでなく要件定義、設計などの上流工程の内容について学ぶことができた。


#まとめ
チーム開発を通して学べることはたくさんあった。チーム内でレベルの高いエンジニアがいると、自分ももっとやらないといけないと良い刺激を受ける。実際の現場ではチームで開発を進めるのが基本なのでもっとチーム開発の経験を通して力をつけていきたい。
Tech Canpのドリルって復習しづらくね？

##　近況報告
　先日，テック卒業後初めての面接に行ってきました。そこでの面接でとても違和感がありまして。まず，志望動機が全く聞かれなかったんですね。なんででしょうね。自分が考えたのは2点。この面接自体は他のことを聞く目的だったこと。もう１つは質問前に落第を受けていたこと。実際面接というよりは面談に近く，かなりラフで，自分の会社を話すというより業界について話す感じでした。それと，自分の履歴書がテックのテンプレートのままだったので，その企業への志望動機が記載されていなかったんですね。その時点で切られたのでしょうか。。。
　とりあえず反省点があっただけでも収穫なので次に活かす！

# 本題
　テックキャンプのドリルは受講料の半分くらい価値があると先輩が言っており，実際全くわからなかった問題もおおいので復習を始めたのですが，**ページ移動がめんどくさい！**
・スプレットシートから問題ウィンドウへ
・問題を提出するとJSのボタンが表示され別のページへ
・解答ページはこちらの「こちら」にしかタグがないためクリックが面倒
・自己採点終了ボタンを押すとマイページへ。。。以後繰り返し

# 対処法
自己解決。

・わからなかった問題はqiitaの限定投稿ページor下書きページに投稿
・できたら横線を入れてチェック　~~こんな感じ~~
・ジャンルごとに投稿を分割する，別解，解法も記載。
⇨ドリルの解答ページは自身の解答を編集できないため理解が捗る
・自分でコーディング時間を計測
・Qiitaへの移植に時間がかかるが，何度も同じ問題を行う労力を減らせる。

### 使えるものはつかう！！！！
Raspberry Pi 4BのWiringPiをVer. 2.52へアップデートする

　RaspbianをFullでセットアップすると、他のアプリと一緒にWiringPiもインストールされます。2020年5月11日現在、財団の[公式サイト](https://www.raspberrypi.org/downloads/)から提供されるNOOBSのバージョンは3.3.1ですが、含まれるWiringPi(Ver.2.50)ではRaspberry Pi4Bが動作しません。そこで、WiringPiをVer.2.52へアップデートします[1]。

## アップデートの方法
```
$ cd /tmp
$ wget https://project-downloads.drogon.net/wiringpi-latest.deb
$ sudo dpkg -i wiringpi-latest.deb
```
## WiringPiのバージョンの確認
```
$ gpio -v
```
「gpio version: 2.52」と表示されるとOKです。
アップデートしたWiringPiはRaspberry Pi 3/3B+でも動作します。

## 補足事項
2023年4月5日時点、上記のwgetコマンドを実行すると「404 Not Found」と表示されて、パッケージをダウンロードできません。コード404はサーバに存在しないページにアクセス時に表示されるHTTPステータスコードですが、その原因は不明です。そのため、WiringPi2.70へアップデートするのも選択肢の一つです。手続きは下記の投稿を参照してください。

「WiringPi 2.70をRaspberry Pi OS(Bullseye)にインストールとLチカ、Busterにも」
https://qiita.com/tamamori/items/f40d7d81111a91354220

なお、管見で知り得た2.52と2.70の違いに以下があります。
① 2.52ではPi4 BにおいてpullUpDnControl(GPIO,PUD_DOWN)関数のプルダウン抵抗が有効にならない不具合がありましたが、2.70では修正されています。
② ハードウェア方式PWMで使用するクロックの周波数は、2.52ではPi3/3B+(19.2MHz)とPi 4B(54.0MHz)と異なっていましたが、2.70においてはどちらも19.2MHzに統一されて互換性が担保されました。

※2023年4月18日時点、サーバが有効になってVer.2.52へアップデートできました。
## Reference
[1] [http://wiringpi.com/wiringpi-updated-to-2-52-for-the-raspberry-pi-4b/](http://wiringpi.com/wiringpi-updated-to-2-52-for-the-raspberry-pi-4b/)

<!--
コメント
-->
devise関連で参考になった記事集




[*Rails*] deviseの使い方（rails5版）
https://qiita.com/cigalecigales/items/f4274088f20832252374


devise ユーザー登録場面でパスワード文字数を指定する方法
https://qiita.com/777mountain/items/f5e041ca46c70247256c


【Rails】date_selectタグの使い方メモ
https://qiita.com/ozackiee/items/3c027d07cdeb61df6029


deviseとvalidationのエラーメッセージを日本語化 ❏Rails❏
https://qiita.com/ITmanbow/items/63abb922a43646f0860c


Deviseの設定手順をまとめてみた。 その2　ViewとControllerのカスタマイズ編
https://qiita.com/hakatatech/items/f991d54ff527edb844d9
awsの課金が怖いのでCloudWatchを設定しておく

ご存じの通りawsは利用に応じて課金が発生します。
残念ながら、何円以上を超えるとシステム全体を落とすというような機能は存在しないのですが、ある金額を超えた場合に通知を発行するという設定が可能です。

思いもよらないところで課金されてしまうことがあることを踏まえ、少額設定も可能なのであまり利用せずとも必ず設定しておくことをお勧めします。

なお、請求情報の変更には権限が必要です。
ルートユーザもしくは、IAMユーザに権限を付与して設定してください。
IAMへの権限付与は[過去のアカウント登録の記事の「IAMユーザ/ロールによる請求情報へのアクセス」](https://qiita.com/roku28632/items/7e046d2d58107cc09201)に記載しています。

#手順

AWSマネジメントコンソールの右上から「マイ請求ダッシュボード」を選択します。
<img width="649" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/b546f769-f48e-aeff-ee26-623899701c16.png">

コスト管理設定の「無料利用枠の使用のアラートの受信」と「請求アラートを受け取る」にチェックを入れます。
また、通知を受信したいメールアドレスを入力します。
<img width="667" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/cea189ad-86cc-317e-2d59-f0859677c54b.png">

次に、コンソールから「CloudWatch」の画面を開きます。
左にある「請求」ボタンを押下します。
<img width="676" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/5c05d012-1f0a-8a2c-bacd-d5cfefdacc6b.png">

メッセージが表示された場合は、リージョンを「US East」にしておく必要があります。
リージョンは右上から変更できます。
<img width="276" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/7bea7eef-58f3-087c-bcdb-feccade0b24d.png">

下側にある「アラームの作成」を押下します。
<img width="624" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/25f49ffa-8dc9-b5c4-7ff8-2cf27104800e.png">

日本円で設定するため、上段のCurrencyを「JP」に設定します。
下段でアラーム条件を設定します。
自身は、awsを勉強用に無料枠で構築したので、「以上」「1000」としました。
「次へ」を押下します。
<img width="640" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/ddaeb082-c164-30f0-a988-2afe9e7b4503.png">

SNSトピックの選択を「新しいトピックの作成」を選択します。
トピック名に任意の名前を入力します。
通知を受け取るメールアドレスを入力します。
「トピックの作成」を押下します。
<img width="676" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/91c793cc-0fed-12ce-069e-0b3173878a41.png">

アラーム名とアラームの説明を入力します。
<img width="624" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/4eaca76a-b654-11f4-2b45-d96ccf4736ee.png">

内容を確認し、問題がなければ「アラームの作成」を押下します。
<img width="650" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/230ad6a1-d593-c864-72ca-4dc6102aa5f4.png">

「アラーム*が正常に作成されました」というメッセージが表示されます。
しかし、下部に記載がありますが、この時点では完了していません。
先ほど設定したメールアドレスに確認メールがきているので、「Confirm　subscription」を押下して、完了させます。
<img width="676" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/8c3996bf-a2b6-9c52-3346-5dee97130f31.png">

<img width="485" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/e40fce2c-fe5b-c28c-3217-14f861aa7eda.png">

<img width="296" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/426ef5cb-f0c8-1342-3b97-998fa1dad922.png">

これで設定が完了です。
（最後に、途中でリージョンをバージニア北部に変更した人は、元に戻しておきましょう。）
Cognosのサービスがポートのバッティングで急に起動できなくなった場合に確認したいこと。

何の問題なくなく起動していたCognosのサービスが急に、使用ポートがバッティングしているとエラーになり起動できなくなった際に確認したい点です。

実際に遭遇したのは下記の構成の環境です。

* OS ： Linux
* バージョン ： Cognos Analytics 11.1.5
* サーバー台数 ： 2台構成 (各サーバー共にオプションのGW層、アプリ層、データ層をインストールした冗長構成)

#原因はゾンビプロセスの存在

ポートバッティングを起こして原因は、9300を使用するCognosサーバーのゾンビプロセスが起動していたからです。


#対処方法
下記の順で対応をしていくことで環境復旧ができました。

## 1. ゾンビプロセスの存在を確認
下記コマンドでCognos Analyticsのサービス稼働状況を確認します。

```console:プロセス確認
ps -ef | grep cognosserver
ps -ef | grep runAsDaemon
```

それぞれ1つ以上ある状態は異常な状態とみなすことができます。
プロセスの数と同時に起動ユーザー、プロセス開始時刻を確認します。
プロセスの数が複数ある場合は、想定したユーザー以外でのCognosの起動が原因となることがよくあります。

##プロセスを実行しているユーザーでCognosサービスの停止を試みる
まずは、ゾンビプロセスが本当にゾンビが確認します。
下記コマンドを実行して想定外のユーザーでcognosのサービスを停止します。

```console:サービス停止
su - <プロセスを停止したいユーザー>
/opt/ibm/cognos/analytics/bin64/cogconfig.sh -stop
```

設計通りのユーザーで起動されたプロセスでもあきらかにプロセス開始日時がおかしい場合はプロセス停止を実施します。

##ゾンビプロセスをkillする。
上記の手順でプロセスを実行してもプロセスが停止できない場合は、ゾンビプロセスをkillします。
プロセスをkillするときは、runAsDemon → cognosserver の順番でkillを行います。

```console:プロセスをkillする
kill -9 <runAsDaemonのPID>
kill -9 <cognosserverのPID>
```

##ファイルの権限を修正する
想定外のユーザーでプロセスを起動した場合、構成ファイルやログファイルのオーナーが設計から変更されていることがあります。
設計内容にしたがってファイルの権限を変更します。

ログファイルをインストールディレクトリから外出ししている場合、変更が漏れないように注意してください。


#気を付けたいこと
プロセス（Cognosサービス）の起動ユーザーを間違えないこと！

今回のケースでは、Cognos用の起動ユーザーを作成し起動ユーザーでサービスを起動したあとに、rootでサービスの起動を行ってしまったことが根本原因でした。
rootで起動したプロセスが残ったまま、起動ユーザーでプロセス起動した際にポートバッティングで怒られていたのです。
起動ユーザーを設計する場合、そのユーザーで起動するための運用手順もあるはずなので、それに従ったサービス起動が必要となります。


以上、正常に稼働していたCognosサーバーが急にポートバッティングで起動できなくなった際に確認してほしいことになります。
[Rails]Unable to autoload constant {コントローラークラス名}, expected {ファイルパス} to define it

##Railsで以下のエラーが発生

###raise LoadError, "Unable to autoload constant #{qualified_name}, expected #{file_path} to define it" unless from_mod.const_defined?(const_name, false)
          

![スクリーンショット (269).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554142/b920d555-c0ef-6d5f-291b-e2a2dba81ba4.png)
※一部ファイル名を隠しています

##解決方法
該当するコントローラーのファイル名を確認

```homes_controller.rb

class HomeController < ApplicationController
  def top
  	@name = 'yamada'
  end
end
```

コントローラーのクラス名が間違っていました。


```homes_controller.rb

class HomesController < ApplicationController
  def top
  	@name = 'yamada'
  end
end
```

コントローラーのクラス名を正しくすることで、無事に治りました！


なお、コントローラーをgenerateしたときに名前を間違えてしまっていた場合は、ファイル名のミスもエラーの原因になっていることがあります。
その対処法については調べてみてください。
Android Remote Debug (adb)

# アプリの動作確認を無線で行う方法
皆さん，Android AppのDebugをするとき，USBが煩わしくなりませんか？
今回はソレを解決するDebugを無線で行う方法についてです．
意外と使っている人が少なかったので書きました．

## 前提条件
adb (Android Debug Bridge)が利用可能
(adb導入については[以下の記事](https://qiita.com/hikaru__m/items/15baae425b6fad25da05)を参照)

## 環境
macOS Catalina10.15.4
Android Studio 3.6.3
Flutter, Kotlin, Javaでの開発
PCと端末が同じWifi環境下であること
端末がdebug modeであること

## 接続方法
Android端末とPCをUSBケーブルで接続して以下のコマンドを実行
ここでは端末の5555番Portを指定

```shell:sh
$ adb tcpip 5555
```

端末の[設定]>[端末情報]>[端末の状態]からIPアドレス(IPv4)を取得
（IPアドレスの表記場所は端末によって異なる場合あり）
USBケーブルを取り外し，以下のコマンドを実行(IPアドレスが192.168.0.1のとき)

```shell:sh
$ adb connect 192.168.0.1:5555
# 192.168.0.1:5555  device product:[型番] model:[型番] device:HWMAR transport_id:4
```

```shell:sh
$ adb devices -l
# connected to 192.168.0.1:5555
```

下記コマンドでログ出力

```shell:sh
$ adb logcat
```

## 切断方法
接続不要になったら、 端末の取り外し&接続をUSBモードに変更
※設定したポート番号がわかれば，外部からもアクセスが可能となるので、必ず終了させる

```shell:sh
$ adb disconnect
$ adb usb
```

なお，以下コマンドでadb server 自体を停止できます

```shell:sh
$ adb kill-server
```

## その他コマンド（一部）
APKのインストール

```shell:sh
$ adb install path/to/apk
```

Port Fowarding(6100番->7100番へ)

```shell:sh
$ adb forward tcp:6100 tcp:7100
```

デバイスからPCにファイルをコピー

```shell:sh
$ adb pull device/file/path local/file/path
```

PCからデバイスにファイルをコピー

```shell:sh
$ adb push local/file/path device/file/path
```


## 最後に
いかがだったでしょうか？
adbコマンドを使いことで，起動中のアクティビティの特定やイベント発生時の監視なども可能になります．
参考文献にAndroid Developersのadbのページを貼ってるので，興味が湧いた方は確認してみてください．

## 参考文献
[Android Debug Bridge（adb）](https://developer.android.com/studio/command-line/adb)
Linuxコマンド

#はじめに
こちらではLinuxコマンドについて基本的な説明できればとおもます。

#コマンド

CentOS

アップデート

```
# update
```

Debian 

アップデート
パッケージ一覧の更新

```
# apt-get update
```
パッケージのアップグレード


```
#　apt-get upupdate
```


共通
リスト表示

```
$ ls
```

権限の変更

```
$ chmod ＊＊＊（権限内容）　[ファイル名]
```
所有・グループ変更

```
$ chown ***（所有者） ***(グループ)　[ファイル名]
```

ディレクトリ作成

```
$ mkdir [ディレクトリ名]
```
ファイルのコピー

```
$ cp [コピー元] [コピー先]
```

ディレクトリ削除

```
$ rm -rf [ディレクトリ名]
```
IP確認

```
$ ip a
```

#まとめ
いかがだったでしょうかコマンドを忘れて一つ一つを検索するのが手間になってきたのでよく使う部分をピックアップしますした。
また足していきたいと思います。
P5.js 日本語リファレンス(drawingContext)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の 変数 drawingContextを説明します。

## drawingContext

### 説明文

p5.j​​s APIはグラフィックを作成するための多くの機能を提供しますが、p5によって公開されていないネイティブなHTML5 Canvas機能がいくつかあります。次の例のように、変数 drawingContext を使用して直接呼び出すこともできます。これは canvas.getContext('2d') または canvas.getContext('webgl') を呼び出すのと同じです。呼び出すことができる可能な描画関数については, [ネイティブキャンバスAPI](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)を参照してください。

### 構文

drawingContext

### 例

```javascript
function setup() {
  drawingContext.shadowOffsetX = 5;
  drawingContext.shadowOffsetY = -5;
  drawingContext.shadowBlur = 10;
  drawingContext.shadowColor = 'black';
  background(200);
  ellipse(width/ 2, height/ 2, 50, 50);
}
```

### 実行結果
![drawingContext.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/91dda9d0-d5ed-f5c1-e6ef-3df14acf633c.png)


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
AndroidでPKCEのcode_challengeをS256で生成する方法

## 概要

OAuthの[PKCE](https://tools.ietf.org/html/rfc7636)を実装したAPIなどを呼び出す際に必要になる `code_challenge` の生成方法のTips

## 具体的には

[ここ] (https://tools.ietf.org/html/rfc7636#section-4.2) の `4.2.  Client Creates the Code Challenge` に記載のある以下の `code_challenge` をAndroid標準機能を使って作る方法

```
S256
   code_challenge = BASE64URL-ENCODE(SHA256(ASCII(code_verifier)))
```

## やり方

以下の "codeChallenge" でString型の`code_verifier`を`code_challenge`に変換可能。

```
import android.util.Base64
import java.security.MessageDigest

val String.codeChallenge: String
    get() {
        val digest = MessageDigest.getInstance("SHA-256")
        val bytes = digest.digest(toByteArray())
        // **重要** encodeToStringの第２引数のフラグをちゃんと指定する
        return Base64.encodeToString(bytes, Base64.URL_SAFE or Base64.NO_WRAP or Base64.NO_PADDING)
    }
```


## ロジックが正しいことの検証方法

[ここ] (https://tools.ietf.org/html/rfc7636#appendix-B) に `code_challenge_method`が`S256`のケースにおける
正しい`code_verifier`と`code_challenge`の組み合わせが記載されている。

`code_verifier`が`dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk`の場合 `code_challenge`は`E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM`が正解とのこと。

## はまりどころ
Base64.encodeToStringのパラメータをちゃんと指定することが重要。

引数指定がない場合、
`dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk`は
`E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw+cM=\n`
になる。

このため、以下の３つのパラメータが必要。

- `URL_SAFE`
  `+`, `-`, `/`を適切に変換してURLセーフにする

- `NO_WRAP`
  最後の改行コードを消す

- `NO_PADDING`
  改行コードの前の`=`を消す

## この記事書いた理由
[このAPI](https://developers.timetreeapp.com/ja/docs/api#%E8%AA%8D%E8%A8%BC%E3%83%95%E3%83%AD%E3%83%BC)をAndroidで呼ぶ際にハマって時間無駄にしたため。
Java 変数のスコープ

###本記事の目的
Javaを勉強中で、勉強したことをアウトプットして知識の定着を図るために記事に起こしています。
学んだことを以下のように分けて記載していきます。

・[Javaの変数宣言・初期化・データ型（キャストとプロモーション）](https://qiita.com/drafts/3878a38d2ba6c1a0570d/)
・型変換
・[変数のスコープ](https://qiita.com/drafts/a3a72fe03e9a0aef94ac/)
・文字列の操作（準備中）
・配列の操作（準備中）
・演算子（準備中）
・条件分岐（準備中）
・繰り返し処理（準備中）
・クラスについて（準備中）
・抽象クラス（準備中）
・インターフェース（準備中）
・カプセル化（準備中）
・モジュールについて（準備中）



###変数のスコープ
変数のスコープとは、定義した変数の有効な範囲のことです。
####ローカル変数
変数は基本的には宣言された場所の外からはアクセスできません。メソッド内で宣言された変数はそのメソッド内でのみ有効になります。これをローカル変数と言います。


```test.java
public class Main {
    public static void main(String[] args) {

        int one = 1;

        {
            int two = 2;
        } 
        System.out.println(one + two);
    } 
}
```
上記のプログラムはエラーになります。innerのスコープ外でinnerを呼び出しているためです。
下記のようにするとプログラムは動作します。

```test.java
public class Main {
    public static void main(String[] args) {

        int one = 1;
        {
            int two = 2;
            System.out.println(one + two);
        } 
    }
}
```
→

```
3
```
twoの内側でoneが呼び出されているためです。oneはtwoの内側でも使えます。

**スコープ内で定義した変数はスコープを外れると使えない**
また、下記のようにif文は{}の内側がスコープになるのでそこから外れるとif文内で定義した変数にはアクセスできません。

```Main.java
class Main{
  public static void main(String args[]){
    int n = 5;

    if (n == 5) {
      String seikai = "nは5です";
    }
    System.out.println(seikai);
  }
}


```

実行結果
↓

```
seikai cannot be resolved to a variable
```
以下のようにif内でseikaiを呼び出すと実行できます。

```Main.java
class Main{
  public static void main(String args[]){
    int n = 5;

    if (n == 5) {
      String seikai = "nは5です";
      System.out.println(seikai);
    }
  }
}

```

実行結果
↓

```
nは5です
```


for文についても同様です。

```Main.java
class Main{
  public static void main(String args[]) {

    for (int i = 5; i <= 10; i++) {
      System.out.println(i);  //実行可
    }
    System.out.println(i);  //実行不可
  }
}
```

実行結果
↓

```
i cannot be resolved to a variable
```

以下のようにfor内でiを呼び出すと実行できます。

```Main.java
class Main{
  public static void main(String args[]) {

    for (int i = 5; i <= 10; i++) {
      System.out.println(i);
    }
  }
}
```

実行結果
↓

```
5
6
7
8
9
10
```

####メンバー変数（フィールド）
上記のようなローカル変数の他に、メンバー変数というものがあります。クラスのメソッド外で宣言された変数はメンバー変数（フィールド）と呼ばれます。メンバー変数はメソッドの外であっても同じクラス内であれば参照できます。
また、Javaは直接外部からデータを操作することを是としないため、別のクラスから変数を参照したい場合は修飾子を使用することによってこれを可能にします。


`修飾子：クラスやそのメンバーがどこからアクセス可能であるかを決定するもの。private、protected、public等がある。`

こちらの詳しい内容については後日また記載します。