OmniAICreator/Qiita-1.07M huggingface dataset:
初心者によるプログラミング学習ログ 346日目

#100日チャレンジの346日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
346日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>346日目　2h<br>・前にやった課題サイトレイアウト見直し　1h<br>・架空LP14日目1.0h(<a href="https://twitter.com/ririru_123?ref_src=twsrc%5Etfw">@ririru_123</a> )<br>・架空LPのSPレイアウトの修正と背景画像設置<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1272623841018212352?ref_src=twsrc%5Etfw">June 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Unreal Engine 4.24 で ThirdPerson プロジェクトのキャラクタ操作のキーの割り当てを変更する

Unreal Engine 4 の ThirdPerson テンプレートでプロジェクトを作ると、デフォルトで WASD キーで移動、スペースキーでジャンプするように割り当てられています。このキーの割り当て（キーバインド）を変更する方法についてメモしておきます。

なお、ThirdPerson 以外のテンプレートでも同じ方法で変更できます。マウスのボタン割り当てや、Oculus、Valve Index などのコントローラのボタンの割り当て、ゲームパッドのボタンの割り当てなども同じ方法でできます。

# 前提

- Unreal Engine 4.24 (多分 4.25 でも同じ）
- Windows 10 Home/Pro
- ThirdPerson テンプレートを使ってプロジェクトを作成

ThirdPerson テンプレートでプロジェクト作成は、下記URLの記事の通りにやります。

- https://qiita.com/mml/items/be3f0b6c29b477bcc93a

下の画面がでるところまでできたらOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/735d6119-900c-ac00-b3e4-d525dcb45d0f.png)

# 手順

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/ac096b1b-607d-027b-5400-3fab6e873e60.png)

メインメニューの「編集」から「プロジェクト設定」を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/8ce9d288-ce4c-cb72-8dec-7ae3454b0dbd.png)

「エンジン」の中にある「インプット」を選びます。

右に Bindings という項目があるので、そこの下の 「アクションマッピング」とか「軸マッピング」とかを開くと、アクションに割り当てられているキーや、ゲームパットのボタンなどの一覧が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/550cf1bd-0b81-ae4e-e9d2-0e445331f5d1.png)

たとえは、こんな感じで「前に移動」のキーをWからカーソルの上キーに変更できます。追加する場合は、アクション名の右にある＋を押して追加します。

基本的に、これだけです、知っていればものすごく簡単なのですが、知らないと永遠にわからない系のやつです。

# アクションの追加

アクションを自分で追加したい場合は、アクションマッピングの横にある＋を押して、アクション名を入れて、バインドしたいキーとかボタンを指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/1665edba-2028-40d8-6721-b1acba63ab7a.png)

上の例では、Enfire という名前のアクションを追加し、Xキーを割り当てています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/d6e45393-cde5-6d2f-cb64-07730ea45544.png)


プロジェクト設定画面でアクションを登録すると、ブループリントエディタの中で、登録したアクション名に対応するイベントを、メニューから追加できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/f0d9662e-535a-0787-dd64-7d218f897ef8.png)

たとえば、ThirdPersonCharacter のブループリントクラスのイベントグラフに、こんなふうにイベントと処理内容を追加してやると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/259bd92f-a3dd-88cc-f6b6-b5e71e1ff2a1.png)

Xキーを押すと画面に Fire と表示されすようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/2621bd2e-2814-d1d2-26dc-e1f26caf77ea.png)

同じことは、キーを押すイベントを拾うことでもできます。イベントグラフで右クリックしてから、「インプット」「キーボードイベント」と選んで、キーを選ぶことで、キーを押したときと離した時のイベントが拾えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/153f9ac5-8362-f914-e311-d6aec604feeb.png)

例えば、これは Y キーが押されたときに、Ice と画面に表示させるようにしたものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/60d2c3fa-6204-d397-0c1c-d17052b6d7e5.png)

プレイしてから Y キーを押しまくると、上のように Ice と表示されまくります。ただし、このキーイベントを直接拾う方法だと、同じアクションにキーボード、マウス、ゲームパッド、VRデバイスなどの複数のボタンやキーを割り当てたい場合に面倒になります。キーバインドを変更したい場合にもかなり面倒です。

プロジェクト設定からなら、一括で同じアクションにキーを割り当てられるので、キーに対応したイベント（アクション）を追加する場合は、個別にイベントを作成するのではなく、プロジェクト設定のところで割り当てるのが良いようです。

しかし、公式では普通にキーのイベント拾う方法の記事ばかり検索で出てきて、この記事見つけるのにめっちゃ苦労しましたよ！！これ以上不幸な人が出ないように、ここにメモしておきます。

対応する公式記事は下記です。

- [キャラクターのジャンプを実装する](https://docs.unrealengine.com/ja/Programming/Tutorials/FirstPersonShooter/2/5/index.html)
今すぐReactでPWAを試したくなったら

試しにpwa-sampleというアプリを作成します(Reactで)。

```shell
npx create-react-app pwa-sample --typescript
cd pwa-sample
```

src/index.tsxを開き、コメントにある通り、記述を書き換えます。

```diff:src/index.tsx
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
- serviceWorker.unregister();
+ serviceWorker.register();
```
https://create-react-app.dev/docs/making-a-progressive-web-app/
production環境でないと動かないらしいので、ビルドします。

```shell
npm run build
```

buildの中身を、ローカルサーバで動かします。

```shell:例：Python3があるなら　
cd ./build
python3 -m http.server
```

```shell:例：npmのserveがあるなら
serve -s ./build
```

httpsで公開します。ngrokを使うと楽です。

```shell
ngrok http <localで動いているポート番号>
```

生成されたhttpsのURLにアクセスすると、PWA対応になっているはず:pray:

コード的には`serviceWorker.register();`に書き換えるだけで完了しましたね。
ただ、httpsで公開しないといけないので、ちょっとだけ試すというのはちょっとだけ面倒です。
さくらサーバーとFileZillaを使う時の初期設定

左上のサイトマネジャーを開く。
新しいサイトをクリックし作成
ホストに　ユーザー名.sakura.ne.jp
ログオンタイプ：パスワードを尋ねる
ユーザー：ユーザー名
パスワードは仮登録の際のもの
コマンドプロンプトでもLinuxコマンドが使いたい！Git Bashの代わりにコマンドプロンプトでLinuxコマンドを使う

## 背景
WindowsでGitを使うため、Git for Windowsを入れたら、
Git Bashというものがついてきた。

Git Bashを使うとWindowsでもLinuxコマンドを叩けるようになる。
これは便利と思って使っていた。

ただ、使っているうちに少し気になる点が出てきたので、
Git BashについてきたLinuxコマンド群をコマンドプロンプトから叩けるように変更してみた。

**注意**
そもそも、Git for Windowsのインストール時に、
GitコマンドをCommand promptで使うように設定できるものらしい。
この記事は、その設定をしなかった人向け。
ちなみにOSはWindows10。

## なぜGit Bashではなくコマンドプロンプトを使いたいのか
私がコマンドプロンプトでの運用にしたかった理由。

### Git Bash 微妙に重い
ちょこっと使いたいだけなのに、私の環境では3秒ほど待たされる。
たかが３秒、されど３秒。
積み重なるとストレスになる。

### コマンドプロンプトはアクセスが便利
エクスプローラを触っていて、このフォルダで一発Grepコマンドを打ちたい、
というときにコマンドプロンプトならフォルダバー（正式名称知らない。。。）に、
`cmd`と打つだけでそのフォルダをカレントディレクトリした状態で
コマンドプロンプトが起動してくれる。
<img width="355" alt="cmd.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655091/30c0aeb5-8586-071b-324c-da8e5b3d736f.png">

Git Bashでは、起動して、数秒待って、cdコマンドを打ってようやくスタートとなる。

というわけで、Windows純正のコマンドプロンプトで
Linuxコマンドを使えるようにしてみる。

## コマンドの正体
Git Bashをインストールした際に、
なぜLinuxコマンドが使えるようになるかをちょっと補足。

`C:\Program Files\Git\usr\bin`
にアクセスすると、たくさんのexeファイルが見つかると思う。

これがGit Bashから実行しているLinuxコマンドの正体らしい。
<img width="282" alt="less.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655091/d32de975-ae76-ec9b-906d-7f65783ff55d.png">


less.exeやls.exeなど見覚えのあるコマンドが並んでいる。
コマンドプロンプトからこれらのファイルを実行できるように、環境変数を設定する。

## 環境変数の設定
Windowsスタートメニューの検索窓から
「環境変数」で検索 ＞「システムのプロパティ」ダイアログ＞環境変数
(いつも環境変数のダイアログの開き方を忘れがちなので、
忘れなさそうな方法をこの記事のために調べた。)

PATHに、先ほど開いた
`C:\Program Files\Git\usr\bin`
を追加する。
<img width="372" alt="git.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655091/328c96a2-c8bc-a954-688a-870ef08ea18e.png">

**注意**
コマンド名がWindowsのコマンドと被っているものがある。
（Findコマンドなどは、WindowsにもLinuxにも存在する。）

ここでのポイントとして、そういったコマンドを実行する際、
Linuxのほうを優先させたければ、
`%SystemRoot%\System32`より上にLinuxを持ってくるようにする。

## 動作確認
lsコマンドで動作を確認してみる。

```
Microsoft Windows [Version 10.0.18363.900]
(c) 2019 Microsoft Corporation. All rights reserved.

C:\Users\karintoMania\Desktop\gitTest>ls
 test.PNG   text.txt
```

うまくいったようだ。


## まとめ
Git BashについてきたLinuxコマンドをコマンドプロンプトで使いたい
→環境変数にコマンドのパスを追加する。

次の記事ではそもそもどのLinuxコマンドを使いたかったのか、
みたいなことも書いてみたい。
『データサイエンス100本ノック』をやってみる①

データサイエンス初学者のための実践的な学習環境
「データサイエンス100本ノック（構造化データ加工編）」をGitHubに無料公開
https://digitalpr.jp/r/39499 

こちらをやってみようと思います。
ちなみにRは全くわからないのでやらないと思います。

#環境
・Windows10
・Docker for Desktop
・Git

#環境構築
Docker起動

```
 wsl -e docker-desktop
```

Gitからクローン

```
git clone https://github.com/The-Japan-DataScientist-Society/100knocks-preprocess.git
```
Dockerをビルド

```
cd 100knocks-preprocess
docker-compose up -d --build
```

しばらく時間がかかります・・・
なんかいろいろ落としてるぽい・・・

##環境構築の注意点
Docker Toolboxを使っている場合、アクセス先のURLが変わります。
http://192.168.99.100:8888
クライアントツールを使ってDBにアクセスする場合のホストも合わせて変わります。

#100本ノック環境の確認
以下にアクセス
http://localhost:8888

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/18c3157c-97b3-2995-2eef-faa643f6b91e.png)


こんな画面が開くはず

work/preprocess_knock_SQL.ipynbを開くと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/1782f049-23f3-54f7-d099-31bdb4fc5e9f.png)

こんな感じでSQLの問題があります。
Python、Rも同様でanserフォルダの中に答えもあるみたい。
DBはPostgre12です。

ザラっと見た感じそんな難しくはない感じですが、第３正規化しろとか言われるとだいさん・・・？って一瞬なってググりますねｗ


#おまけ

この環境は***Jupyter Notebook***っていうのを使ってるみたいですね。
なんかよく見るなって思ってたけどよく知らないので調べてみました。

Jupyter notebookはJupyterプロジェクトの一つでOSSのWebアプリケーションです。
Jupyterプロジェクトとは、複数の言語にまたがって対話的な処理実行を実現するためのサービスやOSSを開発するためのプロジェクトです。
そしてプログラムの実行結果などをまとめて管理することができます。

*.ipynbって拡張子のこの画面を作っているみたいで、中を開くと以下のようなjson形式のファイルでした。

```Entity_Relationship.ipynb
{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# DB論理設計（ER図）\n",
    "- 一部、FKとなっているデータについて、マスターテーブルに存在しないデータを有することもあります\n",
    "- 例）非会員の顧客IDは顧客テーブルに含まれません\n",
    "- そのため、FKの情報は一般的なデータベースにおける外部参照制約を満たすものではありません\n",
    "- データを結合する際の参考情報として利用してください"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![ER図](data/100knocks_ER.png \"サンプル\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}

```

##参考
今さら聞けない Jupyter notebook https://qiita.com/szk3/items/920fd3e905ed16469780
Laravelプロジェクトの始め方〜DockerのMysqlを使う編〜

練習用にLaravelとDockerのMysqlを作成する

#１．プロジェクトを作成

```terminal
composer create-project --prefer-dist laravel/laravel projectname 6.5.*
                                                      ↑プロジェクト名  ↑laravelのバージョン指定
```
ターミナルで上記のコマンドを入力。
laravelのプロジェクトを作成。プロジェクト名をつける。
バージョンを指定していないと最新すぎて困ることもある。:cold_sweat:

#２．時々出るらしいエラー。
```
dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.64.dylib
  Referenced from: /usr/local/bin/php
  Reason: image not found
```
PCの中のPHPコマンドが壊れてたりとかすることがあるらしい。こういうときは、以下のコマンド

```
brew update && brew upgrade
```
で修復される。しばらく時間がかかるので、待つ:tea:
終わったら、1.のコマンドを打って、やり直し〜:back:

#３．DockerでMysqlを起動する呪文の解説
`docker stop 〇〇|| true  && docker run --name 〇〇--rm  -d -it -p 33061:3306 -e MYSQL_ROOT_PASSWORD=△△ -e MYSQL_DATABASE=✕✕ mysql:5.7`
の呪文をうつ。:thinking:
呪文の解説は以下。
`docker stop 〇〇-mysql || true  && `は後で説明するのでまずはそれ以降を。

##第一部
かなりバラバラにして解説

```
docker run 　　　　　　 //docker起きて！
--name 〇〇   //コンテナ（mysql）に〇〇という名前をつける
 --rm 　　　　//mysqlがstopしたときに、dockerの中身を消す。これのおかげで、次に起動するたびにmysqlは消える。（練習用なので。これをつけていないと、同じ〇〇という名前のMysqlを他で起動したときにマイグレーションがかけられないことがある）
-d -it      //オプションと呼ばれる部分。 -dはバックグラウンドで実行、-itはコンソールでの文字入力を可能にして、結果を出力
-p 33061:3306       //ポートは、pc側は33061で送って、Docker側は3306で受け取ってね。
-e MYSQL_ROOT_PASSWORD=△△  //Mysqlのパスワードを△△に設定
-e MYSQL_DATABASE=××      //××という名前のDatabaseを作成
mysql:5.7 //ver5.7のmysqlを指定。
```
PC側のポートは33061じゃなくてもかぶってなければよい。かぶってたら起動できないって怒られるそうな。:sunglasses:
けど、Docker側は3306で受け取るって決まりなので、それ指定で。:raised_hands_tone2:

##第二部
上記のコマンドだと起動するだけなので、そもそも今起動しているのか、ストップしているのかがわからない。:rolling_eyes:
なので、上のコマンドの前に下記のコマンドを打ちます。

```
docker stop 〇〇|| true  &&    //docker、 〇〇という名前のmysqlをストップして！その後に、以降の処理を実行して
```

`&&`は、&&以前の処理を済ませてから（つまり、前の処理が成功してから）&& 以降の処理を進めて、という意味らしい。
`||true`は前の処理が成功していようが、していまいが、「成功」とみなす。
これによって、その後の処理は絶対に行われる。:v_tone2:

#４．Laravelの.envファイルにmysqlの設定を書き込む。
```.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=✕✕
DB_USERNAME=root
DB_PASSWORD=△△
```

先程設定した内容を記入する。

これでLaravelライフが始まる・・・:sunrise_over_mountains:
lftpのbookmark保存先

## TL;DR;

```
~/.local/share/lftp/bookmarks
```

## 検証環境

```
macOS 10.14.6 Mojave
LFTP | Version 4.8.3 | Copyright (c) 1996-2017 Alexander V. Lukyanov
```

※ 多分Linux系環境でも同じ場所にあるはず。

## 概要

検索しても中々見つからなかった。英語資料だとたまに見つかる。
日本語資料としてのメモです。未来の自分への手紙。

PCを更新したときに該当ディレクトリを持っていけばいい感じに復元できる。
ID, Passがあるので適宜コピペしてもよし。
チェックボックス のカウント＆出欠データの表示

TECH CAMPのチーム開発も終了し、個人アプリに手を加えています。（個人アプリに関しては[こちら](https://qiita.com/ruby55tomo/items/69032cf98558825705fa #Qiita)）
今回は2つの実装を紹介します。

まず1つ目。幼稚園の先生が出欠確認をする際、出席している園児を確認しチェックボックスにチェックを入れる仕様になっていますが、それをカウントし出席者の合計人数を自動で表示される様実装します。

ビューです。（前後の記述は省略）

```app/views/messages/index.html.haml
.main__main-ber__check-box__name-check__member-number
  出席(名)：
  = f.text_field :member, class: "member"
  欠席・遅刻・早退(名)：
  = f.text_field :absence, class: "absence"
  合計(名)：
  = User.count - 1
  .main__main-ber__check-box__name-check__member-number__check-number
  %p (出席者数を再度数え照合し入力すること)
.main__main-ber__check-box__name-check__check
  %p ②出席者をチェック ③上記人数を入力
  %table
    %tr
      %th.name 名前
      %th.check 出席確認
    = f.collection_check_boxes :user_ids, User.where.not(name: "master").order(name: "ASC"), :id, :name do |user|
      = user.label do
        %tr
          %td= user.object.name
          %td= user.check_box
```
以下のブロック要素に表示させます。

```
.main__main-ber__check-box__name-check__member-number__check-number
```

jsです。（前後の記述は省略）

```app/assets/javascripts/message.js
$('input:checkbox').change(function() {
    var cnt = $('table input:checkbox:checked').length;
    $('.main__main-ber__check-box__name-check__member-number__check-number').text('出席確認者数：' + cnt + '名');
  }).trigger('change');
```
.lengthでカウントしています。

こんな感じになります。
![b2cf8fa24b50b120e3314f5c6c4e1166.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620703/fadd150e-78f9-69ed-427f-3c8266cc9ab0.gif)
想定としては、出席確認しひとりひとりチェック→自動表示された人数を確認→園児たちの人数を数える→自動表示された人数と数えた数字を照合→出席者数を入力
この方法でチェック漏れ等のヒューマンエラーの回避となります。

次に2つ目。これまで出欠データはCSVを使用しインポート出力をしていましたが、アプリの画面上に表示されるよう実装します。
前提として、日付をひとつのグループとしたdaysテーブルと園児を管理するusersテーブル、そしてその2つを結ぶ中間テーブルがあります。

コントローラーで定義。

```
@days = Day.all.order(dayname: "DESC")
```

ビューです。（前後の記述は省略）

```app/views/messages/index.html.haml
.main__side-ber__member-datas
  %h2 【日付別データ】
  - @days.each do |day|
    %ul
      %li= day.dayname
      %li 出席(名)：
      %li= day.member
      %li 欠席・遅刻・早退(名)：
      %li= day.absence
      %li 出席者名：
      %li= day.users.pluck(:name).join(", ")
```

こんな感じになります。
![60521cfe14472ffe2192fd195f96a130.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620703/815b505c-79c5-2157-1af2-e30202c551f9.gif)

これで、おとといは何人出席してたっけ？あの子来てたんだっけ？ってちょっと確認したい時とかに便利です。

ちなみに、この出欠簿管理アプリはひとつの画面でほぼ全ての機能が完結する様にしています。就活の為のポートフォリオなので、ページ遷移を減らして説明しやすくする為です。本来であれば保護者用の欠席連絡のフォームは別ページですよね。今回実装した日別データもページ遷移して一覧表示した方が見やすいと思います。

<img width="369" alt="スクリーンショット 2020-06-16 1.24.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620703/1f0f0eea-b976-e43b-e47b-cad874fc4a52.png">
アプリにこれ表示させています（笑）
1行でじゃんけんゲームをつくる(python)

python3.8+ onlyです
# コード

```python
print("a|b|c"*-~-((a:=input("a:パー\nb:チョキ\nc:グー\n"))in"abc")or"Draw"*((b:=__import__("random").choice("abc"))==a)or"You "+"lwoisne"[b+a in"abbcca"::2],f"\nyou:{a} pc:{b}")
```

185Byteです

# 解説

最初に言っとくと多分もっと短くできると思います...

まあわかりやすくすると

```python
import random

a = input("a:パー\nb:チョキ\nc:グー")
b = random.choice("abc")
if -~-(a in "abc"):
    print("a|b|c")
elif a == b:
    print("Draw")
else:
    print("win" if b+a in "abbcca" else "lose")
print(f"you:{a} pc:{b}")
```

こんな感じでしょうか。ちょびっと変えたりしてますが。

多分一番謎なのが`-~-`ですね。これは~-で-1(-~は+に当たる)してそれをさらに-してるってことですね。`a in "abc"`がTrueの場合(boolはintのsubclassなので)-1されて-になるので-0,つまり0になり、Falseの場合1になる。要するにnot 〇〇を短く書いてるってことです。(下の場合だと逆に長くなるけど上だと短くなる)

で、次に`b+a in "abbcca"`でしょうか。これはまあ勝ち負けの判定ですね。ab/bc/caとでも区切ればわかりやすいかもしれません。

`__import__`はまあ引数で指定したモジュールをimportしてそのオブジェクトを返す関数です。(あってるよね？)まあ詳細は[ここ](https://docs.python.org/ja/3/library/functions.html#__import__)でも見てください。

あとは`~~~*~~~or~~~*~~~or...`みたいなやつでしょうか。これはpythonでは空文字列がFalseになることを利用したものですね。ふつうは`str*bool`みたいに使う気がします。


# 最後に
なんかわからないことがあったりもっと短く書けるよってあったりもっとわかりやすく書けるよとかあったら気軽にコメントください:smile:
主要なcss設計を読んで独自のcss設計をした話

BEM, OOCSS, SMACSS, FLOCSSなど先駆者が築き上げてきたcss設計を読んだけど、これから作ろうとしてるプロダクトにどれもしっくり来ないので独自のcss設計（命名規則）を作っちゃった

というお話です。


## ディレクトリ構成

先代が作ったプロダクトにはFLOCSS×BEMが採用されていたので、ガラッと変えないようFLOCSSをベースにしています。
まずはFLOCSSのディレクトリ構造がこちら

``` :本家FLOCSS
css/
├ foundation/  ... デフォルトスタイルの初期化や、プロジェクトにおける基本的なスタイルなど
├ layout/      ... プロジェクト共通のコンテナーブロックのスタイル
└ object/      ... プロジェクトにおける繰り返されるビジュアルパターン
  ├ component/ ... 再利用できるパターンとして、小さな単位のモジュール
  ├ project/   ... プロジェクト固有のパターンであり、いくつかのComponentとそれに該当しない要素
  └ utility/   ... わずかなスタイルの調整のための便利クラスなど
```

このまま採用してしまっても良かったのですが、**componentとprojectどっちに属すか**論争がたびたび行われていたので、もっと直感的でファイルを探しやすく、初心者にもやさしい設計を目指しました。
色々な試行錯誤の結果がこちら

``` :完成
css/
├ foundation/    ... resetやbaseなど土台となるcss
├ layout/        ... headerやfooterなど大枠となるcss
├ component/     ... 大小様々な粒度を持つコンポーネント用css
├ page/          ... そのページ内でしか使えないページ固有のcss 
├ _utilities.css ... わずかなスタイルの調整のための便利クラスなど
├ _variables.css ... css内で使える変数
└ app.css        ... cssのエントリーポイント
```

* foundation, layoutはそのまま
* objectを廃止して平坦に並べる。
* componentの粒度の幅を広げて一箇所に集約。ボタンからカレンダーまで全部ここ。
* projectは直感的にわかりづらかったので **page** に変更。ページ固有のcssとして置いておくことで、どうしてもこのページだけデザイン変えたい時に使えます。（最終手段）
* _utilities と _variables は見る頻度が多いのでファイル郡から見つけ出しやすいようにcssフォルダ直下に配置してあります。



## 命名規則

まず完成形がこちら

``` :css
.parent {}
.parent-child {}
.parent-child-grandChild {}
.parent-child-grandChild._modifier {}
```

``` :html
<div class="parent">
  <div class="parent-child">
    <div class="parent-child-grandChild">
      hogehoge
    </div>
    <div class="parent-child-grandChild _modifier">
      fugafuga
    </div>
  </div>
</div>
```

* HTML構造に合わせて**親・子・孫**を`-`で区切る
* 複数単語を使いたい場合はキャメルケースで書く
* モディファイアは接頭辞に`_`を付ける
* クラス名のネストの数は３つまで

HTML構造に合わせて`-`区切りにして、複数単語をキャメルケースにすることでクラス名からHTML構造を予測しやすくなります。
モディファイアの接頭辞に`_`を付けることで直感的にわかりやすくなります。

## utilitiesの命名規則
utilitiesは書きやすさを優先して `プロパティの頭文字-値の頭文字` としています。

```
.ta-c  { text-align: center; }
.fw-b  { font-weight: bold; }
.jc-sb { justify-content: space-between; }
.mb-10 { margin-bottom: 10px; }
```
プロパティが被りそうな場合は補完して命名してください。
例： white-space: nowrap → ws-nowrap
例： (text-)color: var(--color-attention) → tc-attention


## その他命名規則
* page配下のcssにはどのページで使われているクラスか判別するために接頭辞にページ名を付ける `top-module`, `error-contents`
* 命名規則に沿った書き方よりも **書きやすさ、可読性、統一性** が高ければ例外も認める


## まとめ
* 先人の知恵は素晴らしい
* ガチガチにルール決めても人によって解釈が変わるんだったら、少し緩めのわかりやすいルールをメンバー全員で育てていった方がいいと思う
* 答えられる自信はないけど、こういう時どうするの？みたいな質問どしどし欲しい
3Dの座標値を出力する｜Python

#Pythonで3D表現をしてみた
２Dでのグラフ表示をしてみたので、今度は３D表示を試みてみた。
使用したのは
・MacOS
・PyCharm（エディタ）
・*numpy*
・*matplotlib*
・*mpl_toolkits*
以上を使用します。
##空間二次関数のグラフ
以下のような画像ができました。
<img width="632" alt="スクリーンショット 2020-06-16 0.41.42.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409451/a22e4ece-3f3c-ab15-9ff3-03debae74244.jpeg">

X-Yビューでは1ずつ増やして
X座標 × Y座標 = Z座標　となるように表現してみました。

ではサンプルコードです。

```Python:plotAxes3D.py
# Numpy, Matplotlib
# mpl_toolkits.mplot3d を使って３D座標をプロット
#       --- 2020.06.16 ProOJI ---
#       --- No.1 ---
import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D

# (x, y, z) 座標を作成
x = [i for i in range(21)]
y = [i for i in range(21)]
z = []
for i in range(21):
    z.append(i*i)

# 3Dでプロット
fig = plt.figure()
ax = Axes3D(fig)
ax.plot(x, y, z, "o-", color="red", ms=4, mew=0.5)

# 軸ラベル
ax.set_xlabel('x')
ax.set_ylabel('y')
ax.set_zlabel('z')

# 表示
plt.show()
```
##空間サイクロン
こんなグラフも作成できます。
<img width="579" alt="スクリーンショット 2020-06-16 0.54.05.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409451/05f7f3e4-d7dd-d186-ba60-c6fae1ea0b69.jpeg">

・サンプルコード ２

```Python:plotAxes3D_2.py
#
# Numpy, Matplotlib
# mpl_toolkits.mplot3d を使って３D座標をプロット
#       --- 2020.06.16 ProOJI ---
#       --- No.2 ---
import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D

fig = plt.figure(figsize=(8,6))
ax = fig.add_subplot(111, projection='3d')

# x, y, z成分のデータの作成
theta = np.linspace(-4*np.pi, 4*np.pi, 100)
z = np.linspace(-2, 2, 100)
r = z**2 + 1
x = r * np.sin(theta)
y = r * np.cos(theta)

ax.plot(x, y, z, color='blue')
ax.scatter(x, y, z, color='blue')

plt.show()
```
##空間サーフェイス
ちょっときれいなグラフも工夫次第でこんなふうにできてしまいます。
<img width="618" alt="スクリーンショット 2020-06-16 1.00.05.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409451/aa7945e6-77d7-9d5b-9aab-abdeeaf1d3d1.jpeg">
・サンプルコード 3

```Python:plotAxes3D_3.py
# Numpy, Matplotlib
# mpl_toolkits.mplot3d を使って３D座標をプロット
#       --- 2020.06.16 ProOJI ---
#       --- No.3 ---
import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D

fig = plt.figure(figsize=(8,6))
ax = fig.add_subplot(111, projection='3d')

# x, y, z成分のデータの作成
x = np.arange(-5, 5, 0.25)
y = np.arange(-5, 5, 0.25)
x, y = np.meshgrid(x, y)
r = np.sqrt(x**2 + y**2)
z = np.sin(r)

# 面データを作成します
surf = ax.plot_surface(x, y, z, cmap=plt.cm.coolwarm,
                      linewidth=0, antialiased=False)

# z軸の設定
ax.set_zlim(-1.01, 1.01)

# カラーバーの表示
fig.colorbar(surf, shrink=0.5, aspect=10)

plt.show()
```
#まとめ
２Dでできることがそのまま３DでできてしまうPythonはあっぱれ！
同時にPythonの文法のみに詳しいだけでは足らず
やはりライブラリやフレームワークの知識はしっかりしていないと
と思えたこのたびでした。

・情報ソース
[Mpl_toolkitsについて](https://matplotlib.org/3.1.1/api/_as_gen/mpl_toolkits.mplot3d.axes3d.Axes3D.html)
PHP再入門基礎編その2

# 条件分岐、繰り返し処理、関数編。
以前WEBデザイナーだった頃に挫折したPHPに関して、
プログラミングスクールでRuby/Railsを学んだことで、サーバサイドに少し自信がついてきたので再度勉強し直しています。
ある程度理解が進んできたので、備忘録も兼ねてここに記載していきます。

## 条件分岐(if else if)

```php
//基本形
$hoge = 10;
if($hoge === '10'){
  echo '変数hogeは文字列の10です';
} else if($hoge === 10) {
  echo '変数hogeは数値の10です。';
} else{
  echo 'どちらでもないです。';
}

//処理が1つの場合省略も可能。
$box = 'toy';
if($box === 'toy') echo'箱の中身は玩具です'; else echo'箱の中身は玩具ではありません';

//三項演算子も可能
$box = 'toy';
$contentsOfTheBox = ($box === 'toy')?'箱の中身は玩具です':'箱の中身は玩具ではありません';
echo $contentsOfTheBox;
```
## 条件分岐(switch case)

```php
//基本形、自分の場合if文との使いわけは分岐3つ以上の場合。
$hoge = 11;

switch($hoge){
  case 10:
    echo '変数hogeは数値の10です';
    break;
  case 11:
    echo '変数hogeは数値の11です';
    break;
  case 12:
    echo '変数hogeは数値の12です';
    break;
  case 13:
    echo '変数hogeは数値の13です';
    break;
  default:
    echo 'どれでもありません';
}

```
## 繰り返し処理(for)

```php
//基本形
for ($i=0; $i<=5; $i++){
  echo $i;
}
//結果012345

//条件分岐と組み合わせる
for ($i=0; $i<=5; $i++){
  if($i == 2){
    continue;//2になったら次の処理3にスキップする。
  }
  if($i == 4){
  break;//4になったら処理中止
  }
  echo $i;
//結果013
}
```
## 繰り返し処理(while)

```php
$i = 0;

while($i <= 5){
  echo $i;
  $i++;
}
//012345

```

## 繰り返し処理(foreach)

```php
//foreachは配列の要素の数だけ繰り返し処理を行う。

//配列の場合。
$fruits = ['apple','melon','banana'];
echo '$fruitsの中身は','<br>';
foreach($fruits as $name){
  echo $name,'です','<br>';
}
//$fruitsの中身はappleですmelonですbananaです。

//連想配列の場合。
$prefecture = [
  'sato' => 'kanagawa',
  'kato' => 'aichi',
  'higa' => 'okinawa'
];
foreach($prefecture as $key => $value){
  echo $key,'さんは',$value,'出身です。','<br>';
}
//satoさんはkanagawa出身です。katoさんはaichi出身です。higaさんはokinawa出身です。
```
## 関数

```php

#関数

//簡単に三角形の面積を求めるプログラムを描いてみる

function areaOfTriangle($bottom,$height){
  $calc = ($bottom * $height) / 2;
  return $calc;//Javascript同様returnが使える。
}

$bottom = 5;
$height = 10;
$result = areaOfTriangle($bottom,$height);
echo $result,'cm';
//7.5cm
```
Dockerについて調べたので例えてみる👽

#🐳Dockerってなんだ？？🐳
Docker、コンテナ型仮想化うんたら、よくわかんないから難しいように思う。
くじらかわいい。
いろんなPCがある中で、開発環境を一定にでき（そうな予感がす）る。

#実際に調べてみた

・仮想？Dockerが概念のPCを作っておいてくれる。具体的には、Mysqlが入ったPC、PHPが入ったPCとかをそれぞれ作ってくれる。
・だから、それぞれのアプリが独立しているらしい。ｽｺﾞｲ:sparkles::sparkles::sparkles:
・Dockerを使わないでこれをしようとすると、アプリごとにベースの部分をたてなきゃいけなくて大変ぽい。
・独立してないと、Aのアプリだけいらなーいとかって思っても、それだけを削除するのは大変かもしれない？？起動・終了も同様に。多分、Aだけがない環境を別で用意してしまってそれを繰り返すうちに重くなってしまうのでは・・・（名推理）:sunglasses::sunglasses::sunglasses:


##例えてみた
焼き肉とお寿司が食べたいときにそれぞれのお店に行くと大変だし、要らない野菜も食べなきゃいけない。:frowning2:
焼き肉・お寿司食べ放題のお店（Docker）に行けば、好きなもの（必要なもの）だけ、１回の料金で焼肉もお寿司も食べられる的な？
さらに急にラーメンを食べたくなってもラーメンがおいてあるタイプの食べ放題だったり、融通がきく。:fork_and_knife:

###イメージ？
:flushed:Mysqlをつかいたい！Mysqlが使えるセットをください！『docker pull』
Docker🐳「Mysql組み立てセットおひとつですね！どうぞ！」←これがイメージ

###コンテナ？
:flushed:これでMysqlを使えるぞ『docker run』
ｷｭｲｰｰｰﾝ　ｶﾞｶﾞｶﾞｶﾞｶﾞ　ﾋﾟｰｰｰｰｰｰ :robot:（処理されている音）
:flushed:わぁい終わった〜　←この時点でイメージがコンテナに変わる仮想化完了

#見た中で参考になったサイト
[【サルでも分かる】Docker入門](https://www.mtioutput.com/entry/it/whatis-docker)
[10分でわかるDocker超入門](https://qiita.com/akinko/items/8fb50feb6d60eb975dba)
【Objective-C】NSArrayやNSDictionaryにint型を入れる方法

#NSNumber型にキャスト
NSArrayやNSDictionaryにはNSObjectしか入れることができないという制約があります。
そのためint型を格納する際には、NSNumberでキャストする必要があります。
以上の例を下記に記します。

```objective_c
int one = 1;
int ten = 10;
int zero = 0;

//NSMutableArray型に格納
NSMutableArray *array = [NSMutableArray array];
[array addObject:[NSNumber numberWithInt:one]];
[array addObject:[NSNumber numberWithInt:ten]];
[array addObject:[NSNumber numberWithInt:zero]];

//NSMutableDictionary型に格納
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
[dict setObject: [NSNumber numberWithInt:one] forKey:@"one"];
[dict setObject: [NSNumber numberWithInt:ten] forKey:@"ten"];
[dict setObject: [NSNumber numberWithInt:zero] forKey:@"zero"];
```
SQLにおける集計関数とグループ化

# プログラミングの勉強日記
2020年6月16日　Progate Lv.111
SQLⅢ

##サブクエリ
　クエリの中に他のクエリを入れることができる。この他のクエリのことをサブクエリという。2つ以上のクエリお1つにまとめることができるので、より複雑なデータを取得するときに使われる。サブクエリは`()`（括弧）を囲むことで作ることができる。<font color=blue>()内にセミコロンは不要（セミコロンはクエリの最後のみでいい）</font>

```sql:サブクエリを使わない方法
-- 1.Makeの得点を取得する 
SELECT goals FROM players WHERE name="Make";
-- 2.取得した結果を自分で入力する
 SELECT name FROM players WHERE goals > 15;
```

```sql:サブクエリを使う方法
-- 2.サブクエリが実行されたあとに外側にあるクエリが実行される
SELECT name 
FROM players
-- 1.サブクエリでMakeの得点を取得している
WHERE goals > (
  SELECT goals
  FROM players
  WHERE name="Make"
);
```

##AS
　カラム名などに別の名前を定義することができる。`カラム名 AS "名前"`でカラム名に定義する名前を指定する。

```sql:実行結果の表示のgoalを変更する
SELECT goals AS "Makeの得点" FROM players WHERE name="Make";
```

##テーブルを紐づける
　テーブルを紐づけるには外部キーと主キーを使う。外部キーで他のテーブルにある主キーを指定することで、テーブル同士を紐づけることができる。
　メリット：データの管理がしやすい
<img width="623" alt="SQL.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/b6bb48b8-f51c-37d9-f9e2-f1bd43c713c6.png">

##JOIN
　複数のテーブルを1つに結合したいときに使う。`ON`で条件を指定して、テーブルAにテーブルBを結合する。結合したテーブルは1つのテーブルとしてデータを取得できる。<font color=blue>外部キーがNULLのレコードは実行結果に表示されない。</font>
　複数のテーブルをJOINすることも可能で、JOINを1つのクエリで複数回使える。<font color=blue>ただし、その場合でもFROMは一度だけでよい。</font>
　

```sql:JOINの使い方
SELECT *
FROM テーブルA
JOIN テーブルB
ON 結合条件(テーブル名.カラム名 = テーブル名.カラム名);
```
<img width="670" alt="SQL2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/e1238111-2d09-b8c8-d9dc-57628b7820b9.png">

```sql
-- 2. 結合された後にSELECTの実行
SELECT *
-- 1. テーブルを結合する
FROM players
JOIN countries
--county_id:外部キー　countries.id:主キー
ON players.country_id=countries.id; 
```

##複数テーブルでのカラムの指定
　複数のテーブルに同じカラム名が存在するときは、`テーブル名.カラム名`で指定する。

```sql
SELECT players.name, countries.name
FROM players
JOIN countries
ON players.country_id=countries.id
WHERE players.name="タクヤ";
```

##LEFT JOIN
　FROMで指定したテーブルのコードを全て取得する。<font color=blue>外部キーがNULLのコードもNULLのまま実行結果に表示される。</font>

```sql
SELECT * 
FROM players
LEFT JOIN teams  --もととなるテーブルのレコードを全て取得。
ON players.team_id=team.id;
```

##全体実行順序
　SQLは取得するテーブルを形成してから検索をするので、FROMやJOINが先に来る。
<img width="670" alt="SQL3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/3ae37f23-7519-46b2-5ddb-1595c9f4cbbf.png">
【Objective-C】NSDictionaryの複数階層下のデータの抽出

#複数階層下のデータの抽出
下記のjsonデータを使用していきます。

```json
{
  "account": {
    "name": "UserName",
    "age": 20,
    "address": "xxxx@mail.com",
    "skills": {
      "programing": "Swift・Objective-C",
      "language": "Japanese"
    }
  }
}
```
valueForKeyPathを使用し、パスを使用することで、１行で複数階層したのデータを取得できます。

```objective_c
//NSString型のjsonを生成
NSString* jsonString = @"{\"account\": {\"name\": \"UserName\",\"age\": 20,\"address\": \"xxxx@mail.com\",\"skills\": {\"programing\": \"Swift\",\"language\": \"Japanese\"}}}"
//jsonをNSDictionary型に変換
NSDictionary* dic = [NSJSONSerialization JSONObjectWithData:[json dataUsingEncoding:NSUTF8StringEncoding] options:NSJSONReadingAllowFragments error:nil];
//valueForKeyPathでパスを指定し、抽出する
NSString *programing = [dic valueForKeyPath:@"account.skills.programing"];
```
AWS初心者がAWS初心者向けにVPCについてまとめた

# 初めに
ネットワークの基礎も分からない弱弱エンジニアがAWSを触り始めて、最近やっとVPCの概念が少し理解できてきたので、同じ悩みを抱える同士向けにまとめます。
※ 初心者が初心者向けに噛み砕いて書いているので厳密には表現が間違っている箇所があるかもしれません。その場合はご指摘いただけるとありがたいです。


# VPC
まず、VPCはVirtual Private Cloudの略で、その名の通り、**あなた専用の仮想ネットワーク**です。このVPC上にEC2などのインスタンスを設置することができます。VPCは、他のVPCとは論理的に切り離されているので、他の人があなたのVPC上のリソースに直接アクセスすることはできませんので、安全に利用することができます。(あまりこう言う解説は見かけないですが、仮想的なLANのようなものだと私は理解しています)。

2013年以降に作成されたアカウントには、各リージョン毎にデフォルトでVPCが作成されていますが、VPCを自分で新たに作成することもできます。
VPCの作成時には、そのVPCのIPを自分で設定することができます。

# サブネット
サブネットとは、VPC内で更に分割されたネットワークのことです。VPCで使用可能なIPのうち、ここからここまではこのサブネット、ここからここまではこのサブネット、と言うのをCIDR表記を用いて設定します。

何故プライベートなネットワークなのに更に分けるのかですが、いくつかメリットがあります。

1つ目は、VPC内にホストが多くなってきた時にサブネットが無いと、ホスト間通信の時に余計なコストがかかってしまうと言うのを解決できる点です。各サブネットは仮想ルータを持っており、同一サブネットに所属するホスト間の通信はこのルータを用いるので、外側のサブネットを見に行く必要がなく、通信のコストが抑えられます。また、この仮想ルータはサブネットに置かれたEC2インスタンスなどのデフォルトゲートウェイになります。

2つ目は、業務上通信する必要があるホストと通信する必要が無いホストをサブネットで分けることでセキュリティを向上させることができる点です。例えば、社員の個人情報などを持っている部署を他の部署と同一のネットワークに置くのは好ましく無いです。そんな時にサブネットを使ってネットワークを分けることができます。

# セキュリティグループ
サブネットがネットワーク単位で通信を制御するのに対して、セキュリティグループはEC2などのインスタンス単位で通信を制御するものです(仮想的なファイアウォールのような物と私は理解しています)。
具体的には、そのインスタンスにアクセスできるIP、ポート、IPアドレスレンジや、セキュリティグループなどをホワイトリスト形式で記述します。
例えば、WEBサーバーを動かしているインスタンスでは次のようなセキュリティグループを設定することになると思います。

| Source | Protocol | Port range | Description |
|---|---|---|---|
| 0.0.0.0/0 |TCP| 80 |任意の IPv4 アドレスからのインバウンド HTTP アクセスを許可します。 |

インスタンスへの入力を制御するルールなのでこれを**インバウンドルール**といいます。
また、同様にそのインスタンスがアクセスできるルールも指定でき、これをアウトバウンドルールと言います。


# 参考文献
https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/what-is-amazon-vpc.html
https://qiita.com/YuasaJunki/items/145dd8763883cb922400
http://www.runsurunet.com/2017/01/20/%E3%82%B5%E3%83%96%E3%83%8D%E3%83%83%E3%83%88%E5%8C%96%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88/
PHP再入門基礎編その1

#出力、変数、定数、配列、連想配列編。

以前WEBデザイナーだった頃に挫折したPHPに関して、
プログラミングスクールでRuby/Railsを学んだことで、サーバサイドに少し自信がついてきたので再度勉強し直しています。
ある程度理解が進んできたので、備忘録も兼ねてここに記載していきます。

## 基礎中の基礎、画面への出力

```php
  print 'hello';
  echo 'hello';
```

どちらも画面に出力はされるものの、echoは文であり式ではなく、戻り値もない。
他の式と組み合わせたもできない。

```php
  //ok
  $hoge = print 'hello';
  //エラー
  $hoge = echo 'hello';
```

戻り値がないことでechoの方がやや高速とのこと。
また、echoは複数の文字列や数値を結合して出力が可能。
ただ出力する分にはechoが有利か?

## 変数について

$記号をつけて宣言、１文字目は英字か_、2文字目以降には英字か数字か_を使う。
大文字と小文字は区別される。

## 定数(値の再設定ができない)も存在し、宣言にはconstをつける。

```php
//ok
const hoge = '定数です';
echo hoge;

//値を再設定するとエラー、変動がないもの、つまり円周率などに使う。
const hoge = '定数です';
const hoge = '定数です?';
echo hoge;
```

## 配列

最初の宣言などの作法は変数と同じ。
array()もしくはリテラル[]を使う方法があり、リテラルはver5.4以降なのでそこは注意。
リテラルの方が使い勝手がいいのでそちらが使えるなら使いましょう。(私見です。)

```php
//array()を使う。
$fruits = array('apple','melon','banana');

echo ($fruits[0]);
echo ($fruits[1]);
echo ($fruits[2]);

//リテラルを使う。
$fruits = ['apple','melon','banana'];

echo $fruits[0];
echo $fruits[1];
echo $fruits[2];

//要素全て一度に取り出す方法はPHP再入門基礎編その2に記載。
```

```php

//要素の追加
$fruits = ['apple','melon','banana'];
$fruits[] = 'peach';

print_r($fruits);//print_r()で確認。
//Array ( [0] => apple [1] => melon [2] => banana [3] => peach )
```

## 連想配列

```php
$prefecture = [

  //例として名前がキー、バリューが県
  'sato' => 'kanagawa',
  'kato' => 'aichi',
  'higa' => 'okinawa'

];

//要素を追加、基本的な方法。
$prefecture['yamakawa'] = 'iwate';

print_r($prefecture);
//Array ( [sato] => kanagawa [kato] => aichi [higa] => okinawa [yamakawa] => iwate )

//個別に出力する場合。キーを参照するとバリューが取れる。
echo $prefecture['sato'];

//要素全て一度に取り出す方法はPHP再入門基礎編その2に記載。
```
phpで個別のページ名とサイト名を連結して表示する

#概要
複数以上のページから構成されるサイトを作っていて、大元のサイト名をいちいちtitle属性に書くのってスマートじゃないし保守しにくいですよね。

今回は文字列連結だけの最小のPHPコードで各ページのタイトル生成処理を実装したので、備忘として残しておきます。


#やっていきましょう
呼び出し側（クライアント）のphp(index.php)とサーバーサイド処理のphpソース(Title.php)を用意します。

`index.php`および`Title.php`は同一ディレクトリ内にありますが、パスの指定をするときは必ず最初に`/`をつけてあげます。
`__DIR__` や `dirname(__FILE__)` で指定したディレクトリの末尾には`/`がつかないためです。

~~~html:index.php
<?php
// タイトル連結
require_once(__DIR__ . "/Title.php");

// HPタイトル生成
$page = 'トップページ';
$title = getTitle($page);

?>
<!doctype html>
<html lang="ja">
    <head>
        <!-- favicon -->
        <meta charset="UTF-8">
        <meta name="description" content="hogehoge">
        <meta name="viewport" content="width=device-width">
        <title><?php echo $title ?></title>
    </head>
    <body></body>
</html>
~~~

~~~php:Title.php
<?php
// HPタイトル生成
function getTitle($str) {
    $title = $str.' | ほげほげさんのサイト';
    return $title;
}
?>
~~~

あとは各画面の.phpから `getTitle($page)` を呼び出してあげるだけです。

#疑問点…

> 呼び出し側（クライアント）のphp(index.php)とサーバーサイド処理のphpソース(Title.php)を用意します。

　このとき、サーバーサイド処理だけを書いた.phpファイル名を慣習的に大文字で始めてしまい、phpファイルの中に大文字と小文字始まりが混在することに現状なってしまっているのですが、この方法は適切なのでしょうか。。？どなたかご教示いただけましたら幸いです。

　また、もしPHPを使ってこれよりも効率的な方法がありましたら、コメントなどでご教示いただけると大変助かりますo( _ _)o
pytest-htmlでテスト関数のdocstringをレポートに出力する

テスト関数の詳細情報としてdocstringをpytest-htmlのレポートに出力する方法をまとめます。

## 1. conftest.pyを編集

testsディレクトリ直下のconftest.py(なければ作成)に以下の設定を追記します。
テーブルヘッダーの３列目にタイトル、テーブルボディの３列目にテスト関数のdocstringの情報を挿入しています。

```python:conftest.py
import pytest
from py.xml import html


def pytest_html_results_table_header(cells):
    cells.insert(2, html.th('Description'))

def pytest_html_results_table_row(report, cells):
    cells.insert(2, html.td(report.description))

@pytest.hookimpl(hookwrapper=True)
def pytest_runtest_makereport(item, call):
    outcome = yield
    report = outcome.get_result()
    report.description = str(item.function.__doc__)
```

## 2. テストコードにdocstringを書く
```python
def test_one(self):
    """
    これはテスト１です
    """
    assert True

def test_two(self):
    """
    これはテスト２です
    """
    assert False
```

## 3. テスト実行

```bash
$ pytest --html=report.html
```

## 4. 結果

テーブルの３列目に各テスト関数のdocstringが表示されています。

<img width="1063" alt="pytest-html.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79372/ba459173-b1cb-2eb0-337f-ea159c4b72d3.png">


## 参考
- https://github.com/pytest-dev/pytest-html
Docker環境でLaravelのDBを複数作る

Laravelでテスト用DBを作成するときにちょっとてこずったので、記録しておこうと思います。

##環境
Mac OS Catalina 10.15.5
Docker 19.03.8
docker-compose 1.25.5
Laravel 5.5.48

DockerImageは
PHP7.3.18
nginx1.19.0
MySQL5.7.30
を利用しました。

##したいこと

既に作成しているLaravelのプロジェクトにテスト用DBを追加したい。
新しくプロジェクトを開始する時に最初からDBを複数作っておきたい。

##MySQLで直接作成

一番先に思いつくのはこれですよね。
Laravelの.envファイルで指定してるユーザーでは新しくDBを作成できなかったので、
DockerでMySQLの環境に入り込み、とりあえず作成する。

```
$ docker exec -it [container name] bash
```
とりあえずrootで新しくDBを作成。

```
:/# mysql -u root -p
```

```
mysql> CREATE DATABASE testing_db;  [testing_db はテスト用のDB名]
```
テスト用DBをLaravel環境で使用するので、そのユーザーに権限を渡します。

```
GRANT ALL ON `testing_db`.* TO 'forge'@'%' ; [forge のところはLaravelの環境に合わせる]
```
権限を先に渡してからLaravelのユーザーでDB作成しても良かったかも。

##UnitTest時にテスト用DBを使うよう指定する
LaravelにはPHPのUnitTestがいい感じに調整されて入ってるそうです。
それを利用してテストするのですが、その際に既にあるDBを操作しちゃうと大変なので、
先ほど作成したDBを使用するようにします。

```project/phpunit.xml
...

<php>
    <env name="APP_ENV" value="testing"/>
    <env name="CACHE_DRIVER" value="array"/>
    <env name="SESSION_DRIVER" value="array"/>
    <env name="QUEUE_DRIVER" value="sync"/>
    <!-- テスト環境用DBを追加 -->
    <env name="DB_DATABASE" value="testing_db"/>
</php>
...
```
Laravelのバージョンによって少し表記が違うようですが、名前やDBの指定方法は同じはず。

###テスト用環境も用意
次にテスト用環境も用意します。```.env```ファイルをコピーして```.env.testing```ファイルを作成。

```.env.testing
DB_DATABASE=testing_db  さっき作ったDB名に変更する
```
テスト用envファイルを作ったので、これを利用してマイグレーションします。
Seederがあるのならそれも利用すると、本番とほぼ同じ環境をさっき作ったDBに作成できました。

```
プロジェクトが動いてるdockerコンテナの中に入り込んでから、
# php artisan migrate --seed --env=testing
```

これで環境は整ったはず。```migrate:refresh```でも動いてくれました。
あとはテストを記述して実行すると、作成したDBに対してデータ入れたりしてくれるはずです。

##プロジェクト初回起動時にDB作っちゃう

Laradockとかを利用してると、割と簡単にできるそうです。
私はLaradockを使ってなかったのですが、全然難しくありませんでした。
初心者なので「難しくない」という結論に至るまでが長いんですよね。。。

利用する```docker-compose.yml```ファイルで、DBがマウントするところの記述を少し変えます。

docker-compose.ymlファイルが置いてある場所と同じ階層に、```sql```フォルダを作成して、

```docker-compose.yml
...

volumes:
# これを追加
- ./sql:/docker-entrypoint-initdb.d

...
```
とマウントするように記述。フォルダ名は```sql```としてますが、なんでもいいです。
というか、```docker-entrypoint-initdb.d```にマウントさせれば階層もどこでもいいです。
上記の```docker-entrypoint-initdb.d```に、拡張子が```.sql```とかのファイルを置いておくと、初回起動時に自動で内容を読み込んで実行してくれるらしいです。

[docker-composeでmysql使うとき初回起動時に複数のDBを作る方法](https://qiita.com/takyam/items/de87252fca60a9c914c6)

で、その場所にマウントしてる```sql```フォルダに次のファイルを置いておきます。

```sql/createdb.sql
CREATE DATABASE IF NOT EXISTS `testing_db` COLLATE 'utf8_general_ci' ;
GRANT ALL ON `testing_db`.* TO 'forge'@'%' ;
```
Laradockにはこれのテンプレートが既に作成されてるので、別のプロジェクトからコピーしてきました。
コピーしなくても直接記述すればいい話ですが。
これで初回起動時に作成してくれるはずです。

あとは前述の方法で環境整えたりしたらOK。


##参考
[docker-composeでmysql使うとき初回起動時に複数のDBを作る方法](https://qiita.com/takyam/items/de87252fca60a9c914c6)
[Laradockのmysqlで初期起動時に複数DBを作成する（ハマった）](https://qiita.com/SLEAZOIDS/items/f7e545d8e3721c1b2710)
[laravelでDBテストコードを書く前の設定すべきこと](https://qiita.com/kuriya/items/4c9dbefc19514f415374)
[LaravelとPHPUnitでDB操作クラスのユニットテストを行う](https://www.ritolab.com/entry/168)

めっちゃ勉強になりました。ありがとうございました。

初心者なので間違ってる所とかありましたらぜひご指摘ください。
ansibleの設定方法

インストール

```
pip3 install ansible
```
hostファイルを作る(実行するディレクトリの直下に置く)

```
[learning-server]
ipアドレス
```

hostファイルを作る(実行するディレクトリの直下に置く)

```
[learning-server]
ipアドレス
```
ansibleの実行

```
ansible-playbook -i host ansible/roles/common/tasks/learning.yml -u ubuntu --private-key="鍵"
```
Terraformでインフラを構築しようとして失敗する大学生日記

## Terraformとは
 まず、この記事をご覧の方でTerraformをご存知でない方~~数時間前の私~~はこちらをご覧ください。
 https://www.terraform.io/
 
 まぁ一次記事を理解できるなら私のQiitaなんか見ないですよね、
 初学者なりに理解したTerraformを説明させていただきます。
 しっかりとした知見は得ていないので、間違っているならコメントしていただけるとありがたいです。
 
 Terraformとは、インフラ構築をコードで行うツールであり
 そのことをInfrastructure as Codeと言います。
 メリットしては、同一環境が容易に構築できるという点や
 gitでの管理が可能であるため以前の環境に戻すことが簡単である、などたくさんあります。
 モダンですね、モダン、もダン、ジダン
　
 それでは以下に私がTerraformでAWSを構築していった経緯を記述していきます。
 記事を更新していくつもりなので、更新が遅いとか言わないでください。

## 参考のURL
 こちらに参考にさせていただいたURLを記述していきます。
 https://dev.classmethod.jp/articles/terraform-getting-started-with-aws/
 (2020/06/15)
 https://qiita.com/aromanokarisu/items/42e48c2fc6379517c031
 (2020/06/16)

## 環境
 私はmacOSのCatalinaを使用しております。
 主にターミナルを利用するつもりです。

## インストール
```terminal
$ brew update
$ brew install terraform
```
 Homebrewをインストールしていない場合はインストールしてからお願いします。
 set up等は本記事よりも前に投稿されていて、質が良い記事があるのでそちらを参照お願いします。
 AWS IAMについての記事も貼っておきます。
 [AWS IAM](https://www.wafcharm.com/blog/aws-iam-for-beginners/)
 (ぜひ公式ドキュメントから読んで理解できなかった人はアクセスしてください。)

## つまづき点　1st IAMユーザーの作成とaws cliのダウンロード
 私はルートユーザーでしかAWSにアクセスしたことがなく、
 今回は複数ユーザーからのアクセスを仮定しているためIAMユーザーを作成しました。
 `aws_access_key_id`と`aws_secret_access_key`は作成時しか確認できなさそうだったので、
 `csvを保存することをお忘れなく!!!!!!`

 また、AWS CLIのダウンロードもしていない人はしましょう。

## バージョン管理
 今回はgitにてtfファイルのバージョン管理を行うのでgitを引っ張ってきましょう。
 gitのレポジトリをクローンしかしたことがない！という人は[こちらを参照ください](https://www.sejuku.net/blog/70775)

## つまづき点 2nd git管理下でのterraformコマンド
 gitのレポジトリの管理下にある場所で

```console
$ terraform init
$ terraform plan
$ terraform apply
```
 行うとプラグインなどが自動で追加された際に、そのプラグインまで
 gitの変更点として追加されます。~~当たり前~~
 ~~なので僕はgit管理下とは異なるdirにcpして上記のコマンドを実行しました。
 もっといい方法をご存知でしたら教えてください。~~
 .gitignoreにtfstateなどを無視する記述をすればいいと気づいたので
 レポジトリ内に

```gitignore
#  Local .terraform directories
**/.terraform/*

# .tfstate files
*.tfstate
*.tfstate.*

# .tfvars files
*.tfvars
```
 コメントアウトは消していただいても大丈夫です。(2020/06/18追記)



## destroy
 今回でterraformにて簡単ではありますが、AWSのインスタンス作成ができました。
 仮で作成したインスタンスで不要であればdestroyしたい、と思いましたが

```console
$ terraform destroy
```
 で破壊されるインスタンスが何であるか確認したい
 (消すと成果物が見れなくなるので)と思い確認するコマンドと特定のインスタンスをdestroyする
 コマンドを拾ってきましたので下記に記述しておきます。

```console
$ terraform plan -destroy         // EC2に紐づいているインスタンスのリソース名を取得
$ terraform destroy -target=[インスタンス名] -target=[インスタンス名]　// 複数も可能
```
 [上記の参考はこちら](https://blog.adachin.me/archives/6698)

## region
 基本的にproviderはAWSを利用しております。そこでこれはなんだろう？と初学者ながら感じたので記述しておきます。

```terraform:main.tf
provider "aws" { //
  //バージョンを固定
  version = "2.23.0"
  region  = "ap-northeast-1"
}
```
 はい、regionですね。わからないものは一つ一つ潰していきたいので調べました。
 regionとは実際にサーバーがある地域を表すものですので上記のコードにはTokyoのregionが指定されております。
 [公式ドキュメント](https://docs.aws.amazon.com/ja_jp/general/latest/gr/rande.html)
 (2020/06/18追記)

 ここ違うよ、とか
 ここもっとこうしたほうがいいよってことがあればコメントお願いします。
Reactでやってしまいがちな、propsを更新したのにuseStateの値が更新されないぞという話。

「あれれ～？ props を更新したのに、子componentのuseStateの値が更新されないぞ～？？:nerd:」

こんな感じになっていませんか？

```tsx
export const ParentComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
    setCount(Number(e.currentTarget.value));
  }

  return (
    <div>
      <input
        type="number"
        defaultValue={count}
        name="parent-value"
        onChange={handleInput}
      />
      <ChildComponent parentCount={count} />
    </div>
  );
};

const ChildComponent: React.FC<{ parentCount: number }> = props => {
  const { parentCount } = props;
  const [count] = useState(parentCount);
  return (
    <div>
      <span>update されない </span>
      {count}
    </div>
  );
};
```

`useState`の初期値にpropsを渡すパターンですね。恥ずかしながら、自分もときどきやっちまいます:sweat:
理由は、単純に ChildComponentがrerenderされてるだけなので、stateの値を保持しているからです。

こんなときは`useEffect`を使ってupdateします。

```tsx
const ChildComponent: React.FC<{ parentCount: number }> = props => {
  const { parentCount } = props;
  const [count, setCount] = useState(parentCount);

  useEffect(() => {
    setCount(parentCount);
  }, [parentCount]);

  return (
    <div>
      <span>update できる </span>
      {count}
    </div>
  );
};
```

当たり前じゃんってことなのですが、よく聞かれるし自分でもやってしまいがちなのでまとめました(^_^;)

[サンプルコード](https://codesandbox.io/s/nice-leaf-uujko)
Windows TerminalでWSLのデフォルトのディレクトリを設定する

# Windows TerminalでWSLのデフォルトのディレクトリを設定する

Windows Terminalを使ってWSLにアクセスすると、デフォルトのディレクトリが`/mnt/c/Users/USERNAME`となってしまうので、インストールしたディストリビュージョンのユーザーのホームディレクトリへ変更していきます。

## ディストリビューションを確認

```cmd
C:\Users\USERNAME>wsl -l
Windows Subsystem for Linux Distributions:
Ubuntu-18.04 (Default)
```

## ホームディレクトリを開くように設定

WSLディストリビュージョンをインストールすると、Windows Terminalが自動で検出して以下のようなコードをsettings.jsonに作成してくれると思います。

```json
{
    "guid": "{58ad8b0c-3ef8-5f4d-bc6f-13e4c00f2530}",
    "hidden": false,
    "name": "Ubuntu 18.04",
    "source": "Windows.Terminal.Wsl"
}
```

そこに以下のコードを追加してデフォルトで開くディレクトリを設定します。

```json
"startingDirectory": "//wsl$/Ubuntu-18.04/home/USERNAME"
```
## ディストリビュージョンの設定

`//wsl$/Ubuntu-18.04`のうち、`Ubuntu-18.04`は`wsl -l`で表示されるディストリビュージョン名となります。もし、Windows StoreからUbuntuではなく、Debianをインストールした場合は`//wsl$/Debian`となります。

## 設定例

Ubuntu 18.04をインストールした場合

```json
{
    "guid": "{58ad8b0c-3ef8-5f4d-bc6f-13e4c00f2530}",
    "hidden": false,
    "name": "Ubuntu 18.04",
    "startingDirectory": "//wsl$/Ubuntu-18.04/home/USERNAME",
    "source": "Windows.Terminal.Wsl"
}
```

Debianをインストールした場合

```json
{
    "guid": "{58ad8b0c-3ef8-5f4d-bc6f-13e4c00f2530}",
    "hidden": false,
    "name": "Debian",
    "startingDirectory": "//wsl$/Debian/home/USERNAME",
    "source": "Windows.Terminal.Wsl"
}
```
turtleを使って線の描画をしてみた

#Turtleモジュール
ペンを持った亀を操って絵を描くことのできるタートルグラフィックスのPython版です。
子ども向けにはscratchなどが有名ですが、これも使いようによっては良い教材になりそうです。
そういう自分が、この描画がすごいと思って使ってみたのですが…

- こんな線画が描けます（森か林みたい）

<img width="593" alt="スクリーンショット 2020-06-15 23.35.58.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409451/c4ad3239-643a-d191-c079-86a131513c16.jpeg">


ではサンプルコードです。forestっていう関数を作成しておきましょう。

```Python:turtlePicture.py
#
# turtle を import して線描画する
# 2020.06.15 ProOJI
#
import turtle

# kameSan オブジェクト生成
kameSan = turtle.Turtle()

# メソッドを作成しておく（再帰的用法）
def forest(n, length:int=1000)->None:
    if n <= 0:
        kameSan.forward(length)
        return

    ''' 再帰 1 長さ = 1000 * 0.5 '''
    forest(n-1, length * 0.5)

    # 右に 85 度回転
    #   緩やかから急に尖った方向へ
    kameSan.right(85)

    ''' 再帰 2 長さ = 1000 ÷ 3 '''
    forest(n-1, length / 3)

    # 左に 170 度回転
    #   急なターンで尖った針を描画
    kameSan.left(170)

    ''' 再帰 3 長さ = 1000 ÷ 3 '''
    forest(n-1, length / 3)

    # 右に 85 度回転
    #   再び緩やな方向へ着地するように
    kameSan.right(85)
    ''' 再帰 4 長さ = 1000 ÷ 0.38 '''
    forest(n-1, length * 0.38)

if __name__ == '__main__':
    kameSan.penup()
    kameSan.setpos(270, -20)
    kameSan.pendown()
    kameSan.left(180)
    kameSan.speed(0)
    forest(5)
    kameSan.done()

```
こうすることで線の描画ができます。
また、少し手を加えて再帰箇所に色チェンジを設定すると・・・

<img width="584" alt="スクリーンショット 2020-06-15 23.52.20.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409451/547e88c4-a507-6a6b-3feb-3f02a2a568de.jpeg">

- サンプルコード（色付き）

```Python:turtlePictureWithColor.py
#
# turtle を import して線描画します
# kameSan は移動するとき線描画をします
# 2020.06.15 ProOJI
#
import turtle

# kameSan オブジェクト生成
kameSan = turtle.Turtle()

# メソッドを作成しておく（再帰的用法）
def forest(n, length:int=1000)->None:
    if n <= 0:
        kameSan.forward(length)
        return

    ''' 再帰 1 長さ = 1000 * 0.5 '''
    kameSan.pencolor("red")
    forest(n-1, length * 0.5)

    # 右に 85 度回転
    #   緩やかから急に尖った方向へ
    kameSan.right(85)

    ''' 再帰 2 長さ = 1000 ÷ 3 '''
    kameSan.pencolor("blue")
    forest(n-1, length / 3)

    # 左に 170 度回転
    #   急なターンで尖った針を描画
    kameSan.left(170)

    ''' 再帰 3 長さ = 1000 ÷ 3 '''
    kameSan.pencolor("green")
    forest(n-1, length / 3)

    # 右に 85 度回転
    #   再び緩やな方向へ着地するように
    kameSan.right(85)
    ''' 再帰 4 長さ = 1000 ÷ 0.38 '''
    forest(n-1, length * 0.38)

if __name__ == '__main__':
    # penup ペンを上げているので描画なし
    kameSan.penup()
    # Position へ移動
    kameSan.setpos(270, -20)
    # pendown ペンを下ろすのでここから描画される
    kameSan.pendown()
    # 左へ 180度旋回する
    kameSan.left(180)

    kameSan.speed(0)
    forest(5)
    kameSan.done()
```
どのコードが線をどう描いているのかがよくわかりますね。
[Python] 英語の人名をランダムに大量生成する

# はじめに

検証などで気持ち大きめのデータベースが欲しいことがあるのですが、書籍／記事サンプルでは数レコードしかないことがあり。なら勉強もかねて作ってしまえ…ということで、名前の生成部分を作ってみました。

# 用意するもの

[こちら](https://github.com/smashew/NameDatabases)のリポジトリから、元となるファイルをお借りします。
`NamesDatabases/first names/us.txt` と `NamesDatabases/surnames/us.txt` を、同じフォルダに配置しておきます。同名になってしまうので、`us_firstnames.txt` と `us_lastnames.txt` に変更しています。

# コード

```python
### import Modules
import random

### Preparation
# どのくらいの名前を生成するか
NUMBER_OF_NAMES = 10000

# Reference:
# https://github.com/smashew/NameDatabases

### Main Code
f = open('us_firstnames.txt')
firstnameList = f.read().split('\n')
f.close()
f = open('us_lastnames.txt')
lastnameList = f.read().split('\n')
f.close()

for i in range(NUMBER_OF_NAMES):
    currentFirstnameNo = round(random.random() * len(firstnameList))
    currentLastnameNo = round(random.random() * len(lastnameList))
    print(firstnameList[currentFirstnameNo] + " " + lastnameList[currentLastnameNo])
```

とりあえずコンソールに出るので、そのままテキストに吐き出すなり Excel (csv) に貼り付けるなりできます。
もちろん、それをコード内でやる等はご自由に…
Appleに似たページを作る【構成/フォント修正】 ~1日10行コーディング~

## 12日目

前回は横並びにするところだけ作ったのでより寄せるために左右への振り分けとフォントの調節をしようと思います！！！


### 【技術テーマ】
ホームページ制作

### 言語
* HTML
* CSS

### 目標成果物

* 左右への振り分け
* フォントの調整

をしたものの作成


### コードと資料

今回から少しいじったレイアウトをしていきたいと思います。

1. 各要素の定義修正

前回のでは左右の出し分けができないので、クラスを追加します。

```index.html
<body>
  <h1>僕のすすめる料理動画3選</h1>
  <div class="container">
      <div class="recommend">
          <div class="label left">
              <span class="series">【至高シリーズ】</span>
              <h2 class="title">ペペロンチーノ</h2>
              <span class="sub_title">料理研究家が辿り着いた最高の一皿</span>
          </div>
          <iframe class="right"  height="315" src="https://www.youtube.com/embed/Jx-tqntWPCM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    
      </div>
      <div class="recommend">
          <iframe class="left" width="560" height="315" src="https://www.youtube.com/embed/MQFEBR4Eo1Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          <div class="label right">
            <span class="series">【悪魔シリーズ】</span>
            <h2 class="title">万能ネギ</h2>
            <span class="sub_title">もう、醤油には戻れない</span>
        </div>
    </div>
      <div class="recommend">
          <div class="label left">
              <span class="series">【レンチンシリーズ】</span>
              <h2 class="title">サラダチキン</h2>
              <span class="sub_title">もう市販のサラダチキンはいらない</span>
          </div>
          <iframe class="right" width="560" height="315" src="https://www.youtube.com/embed/7il2sEYzMYA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    
      </div>
</body>
```

後のスタイルとのところとも関係するのですが、文字を右に表示するところはiframeとdivの順番を逆にしています。

2. スタイルの修正

前回のままで右文字バージョンを作ろうと思ったのですが、そのままやったらバグったので、文字のセンタリングの根本から修正しました。

```css
    .container{
        width:980px;
        margin:0 auto;
    }
    .recommend {
        margin-bottom: 10px;
        width: 100%;
        display: block;
        height: 315px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 110px;
    }
    .recommend .label{
        width:40%;
    }
    .recommend iframe{
        width:60%;
    }
    .recommend .right{
      margin-left: 30px;
      float: right;
    }
    .recommend .left{
      float: left;
    }
```
そしてフォントサイズも調整したいので、

```css
    .series{
     font-size: 21px; 
    }
    .title{
      margin-top: 0px;
      margin-bottom: 0px;
     font-size: 46px; 
    }
    .sub_title{
     font-size: 23px; 
    }

```
上記の結果がこちら
↓
![](https://i.imgur.com/jkGZ6ex.jpg)


だいぶぽくなってきました！！
次回で文字の装飾をして完成させたいな！！！