OmniAICreator/Qiita-1.07M huggingface dataset:
Identify Yourself!

どうも、待望のエアドロップがベレー帽だった幸福の制御工学です。

# 概要
表題の文言を最近知りました。ので、YouをIdentifyするゲーム(？)をMATLABで作りました。
MATLABのプロットウィンドウ上で同定用励起信号をマウス等でトラックすると、あなたの動特性が計算されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211913/15f2d2f2-5332-3faf-baab-b103b42f02aa.png)

# ダウンロード先
以下のファイルをダウンロードして"ident_you"を実行してください。
[ダウンロードリンク](https://github.com/HppyCtrlEngnrng/IdentifyYourself)

なお、以下の環境を前提としております。
* ご家庭のMATLAB
* PC
* ポインティングデバイス
* System Identification Toolbox(あれば)

# コード解説
ここで取ってつけたような解説を書いておきます(Qiitaなので)。今回使用したボタンやらマウス位置取得はすべてMATLABグラフィックスオブジェクトのコールバック機能を用いて実装されています([参考](https://qiita.com/macht/items/5853875dce0381e33c3a#_reference-02f6cf219ce30fc6c67b) by @macht氏, [MathWorks公式ドキュメント](https://jp.mathworks.com/help/matlab/creating_plots/callback-definition.html))。

## GUIボタン
タイトル画面で励振信号をM系列/ランダムステップで切り替えるボタンはrectangleオブジェクトで実装しています。以下のサンプルコードの通り、rectangleオブジェクトはクリック時にButtonDownFcnで指定されたコールバック関数を呼び出すため、ここにボタンの動作を指定します。なお、デフォルトではPickablePartsプロパティが'visible'に設定されているため、FaceColorプロパティを指定して色を付けるか、PickablePartsプロパティを'all'に指定しないとエッジの部分にのみ「当たり判定」が発生します。

``` matlab
% ボタンの外見指定
pos_x = 0;
pos_y = 0;
width = 5;
height = 2;
color = [0.9, 0.1 0.1];

% クリック時のコールバック関数
OnBtnClicked = @(~,~) disp('Clicked!');

% rectangleを作成
rectangle('Position', [pos_x-width/2, pos_y-height/2, width, height], 'FaceColor', color, 'ButtonDownFcn', OnBtnClicked);

% 表示調整
xlim([-10, 10]);
ylim([-10, 10]);
```

## axes上のマウスポインタ位置の取得
同定実験中にユーザのマウス操作をキャプチャするのにも、figureオブジェクトのWindowButtonMotionFcnコールバックを使用しています。以下のサンプルではさらにコールバック中にaxesオブジェクトのCurrentPointプロパティを参照して、タイトルにポインタ位置を表示しています。

``` matlab
% マウス移動時のコールバック
% 第1引数oは呼び出し元のオブジェクト(hf)
% Childrenで子オブジェクトのhaを参照
OnMouseMove = @(o,~) title(o.Children, string(o.Children.CurrentPoint(1,1:2)));

% figureオブジェクト
hf = figure('WindowButtonMotionFcn', OnMouseMove);
% axesオブジェクト
ha = axes(hf);

% 飾り
scatter(ha, rand(10, 1), rand(10, 1));
```

# 補遺
* System Identificaton Toolboxが導入されている環境では入力むだ時間推定付きのarx、導入されていなければ自前の最小二乗法で同定を行います。
* Toolboxの導入状況によらず、モデル次数はともに3としています。これは事前実験でN4SIDによる次数推定結果が概ね3となったためです。
* 実応用上でも、Human in the loopな制御系においてはユーザのモデルを考えることは有用です。([Hidden Oscillations In The Closed-Loop Aircraft-Pilot System And Their Prevention](https://www.sciencedirect.com/science/article/pii/S2405896316312587))
Reactの式展開について

Reactでコンポーネントを作るに当たって、変数展開は欠かせないものですが、微妙に気になることがいくつかあります。

## 消えるもの、消えないもの

よく条件で表示するものを変えるときに、`{condition || <SomeComponent />}`や`{condition && <SomeComponent />}`のように書くこともあるかと思いますが、条件を満たさない場合、**左側**がそのまま描画対象となります。

そして、`true`や`false`、`null`、`undefined`、空文字列ならもちろん何も描画されないのですが、truthyなものは基本的に描画対象となりますし、falsyなものでも**0**は「0」として描画されてしまいます。

`? :`を使って条件判定の後で描画するものを明確にする、あるいは展開箇所で不等号や`!`、`!!`などを直接書いて`true`か`false`しか入らないようにする、といった注意は払ったほうがいいかもしれません。

## テキストノードが入らない

ふつうに以下のようなHTMLを書くと、`<button>`と`テキスト`の間には改行があるので、スペースが入ります。

```html
<p>
  <button type="button">ボタン</button>
  テキスト
</p>
```

一方で、JSXの場合は改行の絡むスペースはすべて**無視される**（`</button> テキスト`のように、同一行に書いたときは無視されません）ので、`<button>`と`テキスト`がくっついてしまいます。

もちろん、「CSSで隙間を開ける」という解決策もあるのですが、スペースとしてのテキストノードを書いたほうがいい場面もあります。

このような場合、式展開の形で書けばスペースが消えることはありません。

```jsx
<p>
  <button type="button">ボタン</button>
  { ' ' }
  テキスト
</p>
<p>
  <button type="button">ボタン</button>
  { ' テキスト' }
</p>
```

スペースだけ独立して書いてもいいですし、スペースに続く文言まで文字列として含むのもありです。
Goreplayを触ってみた！

# 概要
- Goreplayを触ってみたのでできることや使い方をメモ

# できること

- http通信をキャプチャして...
  - 通常出力に出力
  - そのまま別の環境に流す
  - ファイルに出力してあとで別の環境で流す（リクエストタイミングも再現できる！）


# 使い方

## 導入
- 今回はサーバーで稼働しているアプリケーションを対象とした利用を想定

以下のページからtar.gzファイルをダウンロード＆サーバーに配置
https://github.com/buger/goreplay/releases

(配置して、配置したディレクトリまで移動...)

```
$ ls
gor_1.0.0_x64.tar.gz
$ tar -xf gor_1.0.0_x64.tar.gz
$ ls
gor  gor_1.0.0_x64.tar.gz
```

gorがgoreplayの本体

## 標準出力に出力

ここでは8080ポートで稼働しているアプリケーションを想定

```
sudo ./gor --input-raw :8080 --output-stdout
```
この状態でアプリケーションにアクセスするとリクエスト情報が出力される！
簡単！

## そのまま別の環境に流す

ここではリクエストをそのまま標準出力するだけのgoreplayが提供してくれるfile-serverに流し込む

```
# ファイルサーバーを起動(ポートはアプリケーションと被らないように)
gor file-server :8081

# outputとして立ち上げたファイルサーバーを指定
sudo ./gor --input-raw :8080 --output-http="http://localhost:8081"
```

## ファイルに保存しておいてあとで流す

```
$ sudo ./gor --input-raw :8080 --output-file=requests.gor

# 何件かリクエスト

$ ls
gor  gor_1.0.0_x64.tar.gz  requests_0.gor

# ここではキャプチャしたアプリケーション自身に流し直す
$ sudo ./gor --input-file requests_0.gor --output-http="http://localhost:8080"
```
> 自動でナンバリングしてくれるのね
PHPにてエラーが起き、画面が真っ白になった時の対処(エラー表示の仕方)

PHPを使ってカレンダー機能を実装したいので

枠組みを作り、あとは中だけ。

requireにて外部ファイルと組み合わせてみると、さっきまで表示されていた枠組みまでもが消えてしまった。

きっと中のコードがエラーを起こしたことが原因だなと思ったので

まずはエラーが起きてしまっている場所を特定する必要があるので「PHP エラー　表示」で検索。

PHPにてエラーの場所を特定するには

```php
<?php ini_set( 'display_errors', 1 );?>
```

を**コードの一番上に書けばphp.iniでエラー表示設定することなくエラー場所を表示できる**らしい。

ちなみに、出てきたエラー表示は

```php
Parse error: syntax error, unexpected 'mktime' (T_STRING), expecting ')' in /Applications/MAMP/htdocs/calender_index.php on line 13
```

と表示されたので13行目をチェック。

なんと、「,」が抜けていたことが原因でした...

またスペルミスか〜〜。

修正し、無事カレンダーは表示！
スペルミスは怖いものです。
Herokuで独自のnginx.configやphp.iniを使う

カルネージハート Advent Calendar 2019 2日目の記事です。

前回同様Laravel Herokuで作っている[Europa](https://project-europa.herokuapp.com/)に関する小ネタです。

## Herokuで独自のnginx.config・php.iniを使う

Procfileに以下のように記述をしてください。
なおProcfileと同じディレクトリに`custom_php.ini`と`nginx_custom.config`がある想定です。

```Procfile
web: vendor/bin/heroku-php-nginx -i custom_php.ini -C nginx_custom.config 
```

これだけで独自のnginx.config・php.iniが使えます。

一時期Europaでは動画アップロード機能も搭載しており、そのために独自のnginx.configとphp.iniを使う必要がありました。
**今はその機能はありません**

## 参考

[Customizing Web Server and Runtime Settings for PHP](https://devcenter.heroku.com/articles/custom-php-settings)

## 最後に

事実上の最新作EXAが2010年に発売以降続編の情報が皆無ですが、一部の熱狂的ファンは大会を開催してゲームを続けています。ゲームを盛り上げることで続編も出るかもしれません。カルネジスト、ネジらーの皆様のご協力をお願いします！

カルネージハートファンのプログラミング知識を共有しましょう！

主人公機のアグリオスでお茶を濁します。
![ezgif-2-8cf1e726a576.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133718/96d00896-8f53-c785-76a0-a0a0751edfc3.gif)
Gitのエイリアスって便利やな

Gitでエイリアスを設定したら、すごく便利になったので、その設定方法と自分が使っているものをいくつか紹介。(備忘録的に書きます）

# 設定方法
git initしているディレクトリから、、、

`cd .git`
`vi config`


をたたくとconfigファイルが開く。

そこに

`[alias]`

を入力する箇所があるので、そこにガシガシ書いていく。

# 実際の画面
![2019-12-05_21h46_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474856/db4843ac-1cc8-d1fc-68d8-6f058982b538.png)

「ada」に関してはaddコマンドでディレクトリ指定をしています。

# 使ってて便利だったエイリアス
### ad〇 = add <dir>
ディレクトリ指定でaddできるようにするコマンド。

### cmm = commit -m
コミットするためのコマンド。
開発が終わったらとりあえず「ad〇」→「cmm <コメント>」のコンボですぐにpushできるようにしている。

### chd = checkout develop
developブランチにすぐに戻るためのコマンド。masterとかのも作ってもいいかもしれない。

### brd = branch -D
ブランチを消すコマンド。「-D」のコマンドなので、ブランチの状況がどうであれ強制削除されるため、地雷を踏まないようにちょっと気をつけて使う。


# 最後に
一度エイリアスを設定してしまうと、もう抜け出せない。
この前自宅で開発環境作った時も、「git status」と打つのがめんどくさすぎたり、新しいブランチを切るのに「git checkout -b」というコマンドがわからなくて、ついググってしまったりと、自分好みに設定してしまうと、かなり速度を上げられる。

便利なコマンドほど、オプションがいっぱいついて、長くなりがち、タイポもしがちな自分にはもってこいの設定だなとしみじみ感じている。
Swift Network.framework Study 20191205「Server TCP」

# Study

Network.framework
Study：Server側

## 環境

Client：Java、NetBeans
Server：Swift、Xcode

#Client Source Java

```java
package example.java.network;

import java.io.PrintWriter;
import java.net.Socket;

public class ExampleClientSocket {
    public static void main(String[] args) {
        try(Socket socket = new Socket("localhost", 7777);
            PrintWriter printWriter = new PrintWriter(socket.getOutputStream(), true);) {
            printWriter.println("Example Send Data");
        }
        catch(Exception e) {
            System.out.println(e);
        }
    }
}
```

# Server Source Swift

NWListerを使用する
コネクション確立後のNWConnectionに受信処理登録、開始実施

## main.swift

```swift
import Foundation
import Network

var networkServer = NetworkServer()

networkServer.startListener()

while networkServer.running {
    sleep(1)
}
```

## NetworkServer.swift

```swift
import Foundation
import Network

class NetworkServer {
    public var running = true

    func startListener() {
        let myQueue = DispatchQueue(label: "ExampleNetwork")

        do {
            let nWListener = try NWListener(using: .tcp, on: 7777)
            nWListener.newConnectionHandler = { (newConnection) in
                print("New Connection!!")
                newConnection.receiveMessage(completion: { (data, context, flag, error) in
                    print("receiveMessage")
                    let receiveData = [UInt8](data!)
                    print(receiveData)
                })
                newConnection.start(queue: myQueue)
            }
            nWListener.start(queue: myQueue)
            print("start")
        }
        catch {
            print(error)
        }
    }
}
```
RIP, Chainer.

[衝撃の発表](https://preferred.jp/ja/news/pr20191205/)で、仕事に身が入らなくなった @kitajima_orihime です。
本当は他の記事を先に書こうと思っていたのですが、今日はChainerの思い出をいろいろ書きます。

# 私とChainerの出会い

[ISP](http://www.isp.co.jp)にいた頃、最初はCaffeでDLの仕事をしていました。ただCaffeってとんでもなく使いにくいじゃないですか。
まあいろいろ悪戦苦闘していたところにChainerが出てきたわけです。

Chainer 1.5頃までは社内の別のメンバがMr. Chainerをやっていて、自分としても興味がないわけじゃなかったのですが(むしろTensorflowやらなきゃな……とか思っていたり)、なかなかChainerまでは手が回りませんでした。
Chainer 1.11でしたっけ、trainerとかが整備されたところでもう一度コードを見たら、なんじゃこの簡潔なコードは！アレからひたすらChainerを推し続けた結果、社内でのMr. Chainerへの道をまっしぐらとなりました。

某案件でChainerの中身を全部追いかけて底のほうを弄ったり、[全脳アーキテクチャ](https://wba-initiative.org/)系の仕事でお世話になったり、急遽Chainer Chemistryについて某所でクローズドな講演を頼まれて頭ぱーんしてみたり、Chainer Meetupで何度か発表させて頂いたり。遺伝研スパコンにもお世話になりました。
気付いたら、社内で"Chainerのことならこの人に聞け"の立場を完全に獲得していました。

# Chanierの良いところ

Chainer v3あたりが一番わかりやすかったかな、と思います。いまのChainerに繋がる基盤はほぼ仕上がっていて、でもハードウェアのバージョンとかに依存する細かいifはまだ少なくて。
ガリガリにC言語でチューニングしたり細かくH/Wやライブラリバージョンに合わせたチューニングをしていないのでパフォーマンスが出ないのはしょうがないとしても、Deep Learningのフレームワークの一番奥底までが見通し良く読めるってのは、PFNの鬼のような実力のなせる技ですね。

# その後の私とChainer

[LSW](http://www.littlesoftware.jp/)ではそこまでバリバリ深層学習！って仕事内容ではなかったとはいえ、OptunaをAWS分散環境でリリース直後から使い倒してみたり色々やれたようには思います。
[アラヤ](https://www.araya.org/)は言うまでもなく深層学習の会社なのでバリバリChainerに復帰しました。社内で統一フレームワークがあるわけじゃないのですが、Chainer派はやはり人数多くはないですね。

Chainerのもくもく会では、[Anaconda/numpy由来のバグを踏んで](https://github.com/numpy/numpy/issues/11448)胃が痛くなったりもしていました。
ChainerにPRを出せなかったのが心残りではあります。Issue出したことはあるのですが、PR出しを一度はやりたかった……

# 今後のChainerとの向き合い方

Chainer3あたりのあっさりとした構造、多分今後も価値があると思います。
PyTorchがどこまであっさりとした使い方をサポートするかですが、やっぱりPyTorchってPyTorchですし、あっさりとnumpy/cupyだけをサポートするChainer3あたりってわかりやすいんですよね。
深層学習の実装「フレームワーク」を学ぶには、下手にTFとかPyTorchとかに手を出すよりもChainer3を(古いとはいえ)丁寧に学ぶことには教科書的な意味があるんじゃないかな、と思います。

そしてさっさとPyTorchでもろもろ実装できるようにがんばらないとですね。エンジニアは生涯学び続ける仕事なので、まだまだ学んでいきますぞい！

Chainer ChemistryとかChainerRLとかのPyTorch移植、楽しみにしてます。
1on1が雑談に変わるまで

# はじめに

この記事は [1on1 Advent Calendar 2019](https://adventar.org/calendars/4254) の5日目の記事です。
私の組織では、1on1を導入して1年以上経ちました（多分。いつ入れたか覚えてない）。
現在どんなことを1on1でやっているのか、ということと、それまでに至るまでにどんな変遷があったのかをふりかえってみようと思います。

# 現在の1on1の姿

個人的には、理想的な1on1の姿で行えていると考えています。

導入当初から、毎週30分、上司（グループマネージャー）と1on1を行っています。同じ拠点にいるときは対面で行いますが、私も上司も複数の拠点に行ったり来たりを繰り返している関係上、一緒の拠点にいれないときは、Skypeで行っています。
対面率は30%程度でしょうか。

1on1では、**ほぼ雑談として言っても差し支えない**進め方で行われます。
私から話したい内容を話す日もあれば、話したい内容が思いつかないときは上司から質問を投げかけられたりします。
話している内容は、「1on1っぽい」内容もありますが、雑談という形式で行われます。

- キャリアについて
- 最近の仕事について
- 困りごと
- (上司が)任せたい業務についてのモチベーティング
- 私がやりたい業務の相談

などなど。
[1on1カード](https://booth.pm/ja/items/1573253)を使って雑談してみたこともありました。

他の同僚がどういった1on1をしているかは聞いていないので分からないのですが、どの同僚も上司との関係は非常に良好でしょう。

私自身は、1on1で以下のような効果を感じています。

- 自分のやりたい仕事が上司と共有でき、仕事に繋がっている
- 上司にキャリアや目標について、常に共有できており認識のズレが発生しにくい
- 私がやりたくない仕事に関しては上司がしっかりモチベーティングしてくれる
    - それはやりたくない、という相談も気軽にできる
- 組織としてのミッション・ビジョンが上司を介して、自分の言葉として落とし込まれている

大きく変わったのは半年に1度の目標面談です。1on1を導入するまでは、目標面談の際に対面で打ち合わせる時間設定をし、初めて目標をこちらから共有してコメントを貰ったり、逆に上司からミッション・ビジョンを提示されて話し合ったり、という場に使っていました。それ自体は悪くはないことなのですが、現在では、目標面談の時間も1on1の時間内に行うため調整が不要なのはもちろんのこと、普段から私と上司の双方での目標に関するコミュニケーションが取れているため、目標の認識相違がなく、雑談をしつつ「頑張ってね」と後押ししてもらえる場となっています。
緊張感はなく、こちらから先を見据えた大きな話や夢について話したり、目標面談とは全く関係のない話題で盛り上がったりもします。**1on1の時間を、存分に楽しんでいる自分がいます。**

「**いいよなぁこの1on1**」と思える状態なのですが、世に出回っている（または仕事の関係で耳にする）1on1の話を聞くと、この姿とはだいぶギャップがあるなと感じています。なぜ、現状のような姿になったのか、というのをふりかえることで少しでも再現性が上がらないかな、と考えたのがこの記事の発端です。

# 1on1の変遷

組織に1on1を入れよう！と言い始めたのは、私の元上司（この人もグループマネージャー）だったと認識しています（今も一緒に仕事しています）。
その時から、グループマネージャーが数人集まって1on1についての勉強を進めていたのですが、「**興味あるから混ぜろー**」と言って、その勉強に混ざっていたのが私です。
グループマネージャーと手分けして1on1関連の研修に受けに行ったり、1on1の進め方についての議論を社外の実践者の方としたり、かなり色々調べて行っていました。
丁度私はそのころコーチングスキルを伸ばしたいと考えていて、その一環として1on1は有効に作用すると考え、自分なりに調べていました。
そして、実際にやってみようということになり、グループ内でトライアルが始まります。私は普段からふりかえり人間なのもあって、普段自分ひとりでやっているふりかえりを、上司と一緒にやってみる、というような進め方で始めました。
その結果、「自分からの内省・省察」「自己開示による相互理解」が進み、コミュニケーションがしやすい関係が生まれていったものと考えています。
また、面白い取り組みとして「ナナメ1on1」をやってみたり、[@nitt_sanさんに1on1をお願いしてみたり](https://qiita.com/viva_tweet_x/items/9ecfe43f08fd09ffb582)、と個人的にも模索しながら1on1をやっていた時期でした。
上司側でも、やってみた結果を共有して改善する、という活動も定期的に行われていました。
これら双方が作用し、今のいい感じのふりかえりになったのかなと思います。

あまりまとまりのない話になってしまいましたが、いい感じの1on1になった理由を最後にまとめます。

- **上司の1on1への理解**。一人で理解するだけでなく、複数人で話し合って、改善をしていった
- **部下の1on1への理解**。受ける側が「する側」の立場になって考えることで、話す話題が広がった
- **ふりかえりの習慣化**。平時からふりかえりをしていることで、1on1の中での「内省・省察」が高速で行えた
- **内面の開示**。双方歩み寄りによる内面開示により、話しやすさが増した
- **頻度**。最低週1、毎回同じ時間で行うことで、リズムもできるし、話もしやすくなった

1on1を組織的にやる、となると上司側への働き掛けをまず考えがちですが、**部下・上司が一緒になって、1on1というものをどう扱うか、どうやっていこうかと考えていくこと**も非常に重要な要素だと感じています。

1on1が雑談、いいじゃないですか。
その結果、モチベーションが生まれ、エンゲージメントが高まる。そうした正の好循環が、よい組織を生み出していくのだと思います。

# 次のバトン

@radiocat さんの6日目に続きます。お楽しみに。
作業はRのプロジェクトベースで管理しよう

##Rのプロジェクト機能の話。
Rを使い続けてはや3年になりましたが、Rの作業を効率化できることに今更気づきました。それは、Rstudioのプロジェクト機能です。まず、RstudioではなくR無印を使っている人はすぐにRstudioに乗り換えたほうがいいです（本題とそれるので詳しくは書きませんが、一番はエディタがすごく優秀だからです）。

##きっかけ
で、Rstudioって、僕が使っているといろいろな作業をしているうちにタブをいっぱい開きすぎてごちゃごちゃしていたんです。ある解析用のスクリプトを開いて、数時間別の作業をするときに別のスクリプトを開いて、その中でsource()で呼び出すためのRスクリプトを開いて…というようにどんどんタブが増えていってしまいます。こんな状態は非効率だと前から思っていたのですが、ようやくRプロジェクトを使えばいいのだと気づきました。

##何がいいの？
Rのプロジェクト機能を使うと、プロジェクトごとにタブを管理できます。つまり、自分が設定した作業単位ごとにRstudioを分けられるということです。

例えばRスクリプトA, B, CをXというRプロジェクトの中で開いても、YというRプロジェクトではそれらのスクリプトではそれらの設定は反映されず、D, E, Fというスクリプトを広げられるわけです。そして、環境変数も分けることができます。例えばプロジェクトX（←笑）でパッケージdplyrを読み込んでも、プロジェクトYにはそれは反映されません。

##プロジェクトの作りかた
Rstudioを開いて、File -> New Project を選択すると中央に新しい画面が出てくるので、New Directory -> Empty Project を選択します。するとプロジェクトフォルダの名前を入力する画面になるので、適当な名前をつけます。こうすると、新しいフォルダができて、そのフォルダの中には"XXX.Rproj"（XXXにはさっきつけた名前が入る）というファイルが格納されています。これでプロジェクトの作成は終了です。

エクスプローラーなどから.RprojファイルをクリックするとRstudioが起動します。また、Rstudioを開いている状態では、画面の一番右上に現在開いているRprojectが表示されています。そこをクリックすると別のプロジェクトが表示されるのでそれをクリックして別のプロジェクトを開くこともできます。

##ついでに。スクリプトファイルを管理しよう

冒頭にも書いた通り、プロジェクト機能は自分の作業単位ごとにRの環境を使い分けることを可能にします。プロジェクトに関係するスクリプトだけを開けばタブもかなり整理されます。

このプロジェクトフォルダをベースにデータもスクリプトも整理してしまいましょう。プロジェクトフォルダの中にデータフォルダを作って、それとは別にスクリプト用のフォルダも作れば、スクリプトの管理もかなり簡単になります。画像は一例です。

どうでしょうか。Rのプロジェクト機能、かなりおすすめです。やったことない人は是非やってみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100982/84fca685-c60b-1a00-3541-4827566f63a3.png)
Fedora31 でビデオを見る

ちょっと暇ができたので、前に使っていて、画面にひびが入ってしまったノートパソコン（dynabook T3/68JW) に fedora31 を入れ直しました。

僕は、パソコンを買ったらまず入っていた OS を削除して Linux を入れるのですが、このノートパソコンは、なぜか起動しなくなっていて、それを、また別の Dell のノートパソコンから外したハードディスクを付け直していたのでした。

また別に使っている 17インチのノートパソコンで Fedora31 デスクトップをダウンロードして、brasero で焼いて LiveDVD を作成し、この dynabook に挿入して、Fedora をインストールしたのでした。

メモリは、8G とけっして多くはない（普段使っている 17インチのノートパソコンは 32G）のですが、資源を有効利用するにはいいと思います。

まずは、dnf update コマンドを実行してパッケージ群を最新にします。そして、Video を見ようと思ったのですが、firefox のエラーになって、うまくいきません。

これは何の問題なのか、wayland を /etc/gdm/custom.conf で無効にしてみたり、flash を入れてみてもダメです。

そこで、うまく見られている 17インチのノートパソコンで、yum list | grep fusion とすると、mplayer というのがインストールされているようです。

以下のコマンドを実行して、rpm-fusion リポジトリを有効にしました。

（参考）
https://docs.fedoraproject.org/en-US/quick-docs/setup_rpmfusion/

```
$ sudo dnf install \
  https://download1.rpmfusion.org/free/fedora/rpmfusion-free-release-$(rpm -E %fedora).noarch.rpm
```

そして、以下のコマンドを実行しました。

```
$ sudo dnf install mplayer
```
mplayer をインストール後は、Fedora31 でビデオが見られるようになりました。

ここで、インストールされているパッケージのうち、feodora や anaconda 以外のものを表示してみました。

```
$ less yum_list_installed  | grep -v anaconda|grep -v fedora | grep -v updates
インストール済みパッケージ
adobe-release-x86_64.noarch 1.0-1 @System                   
librtmp.x86_64 2.4-15.20190330.gitc5f04a5.fc31 @rpmfusion-free           
mplayer.x86_64 1.4-3.fc31 @rpmfusion-free           
mplayer-common.x86_64 1.4-3.fc31 @rpmfusion-free           
opencore-amr.x86_64 0.1.5-8.fc31 @rpmfusion-free           
rpmfusion-free-release.noarch 31-1 @@commandline             
rpmfusion-nonfree-release.noarch 31-1 @@commandline             
vo-amrwbenc.x86_64 0.1.3-10.fc31 @rpmfusion-free           
x264-libs.x86_64 0.157-12.20190717git34c06d1.fc31 @rpmfusion-free           
x265-libs.x86_64 3.1.2-2.fc31 @rpmfusion-free           
xvidcore.x86_64 1.3.5-6.fc31 @rpmfusion-free    
```

あ、non-free リポジトリもインストールしていたようです。

ともかく、ビデオがみられるようになってよかったぁ。
【UE4】MacBook Pro 2019でUE4開発を始めてみたレビュー





# 最初に

 この記事はUE4を最新のMacで動かせるかどうかを試してみた記事となります。札束でUE4に挑戦したい。尚、今回の記事は参考程度に考えていただければと思います。間違いや更に良い方法があった場合にはそっとTwitter( [@ろっさむ](https://twitter.com/4_mio_11) )やコメント、修正リクエストなどでお知らせ頂けるととても有難いです。 



# 作業環境

記事内で使用する作業環境は以下の通りとなります。

- Unreal Engine：4.23.1
- MacBook Pro 2019



# 今まで使っていたMacBookPro2015でのUE4

これまでライブコーディングでの登壇に関して2015年版の13インチのMacBookProを使用していました。

メモリは8GBで1,866MHz LPDDR3、Iris Graphics 6100といった仕様です。



このMacBookPro上でUE4.16を動かそうとした場合にはまずalweiさんの以下の記事の項目全てを行う必要があります。

http://unrealengine.hatenablog.com/entry/2014/10/24/212222



全てを犠牲にしてなんとかライブコーディングができるまでになりました。解像度は最低レベルなのでUE4のデフォルトキャラクターでもなんか角ばってます。PS2くらいの見た目になります。

それでもエディタ画面ではカーソルが少し遅れて付いてくるなどはありました。





# 購入したMacBookPro仕様



- Catalina 10.15.1
- MacBook Pro (16-inch, 2019)
- 2.4GHz 8コア Core i9
- 32GB 2,666MHz DDR4メモリ
- AMD Radeon Pro 5500M（8GB GDDR6メモリ搭載）
- 2TB SSDストレージ



こちらでUE4.23.1を動作させてみました。



# 「Action RPG」で検証

とりあえずAction RPGをEpic Games StoreからDLして、プロジェクトを作成してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/696e7b1f-785b-6eb0-8438-a25edddc2c25.png)



品質は中で100〜120程度、Epicで75〜100FPS程度となりました。サクサクです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/4ef956ac-5817-8eef-712d-d5a07d175ac7.png)





# 「FXVarietyPack」のOverviewで検証



エフェクトを確認するためのめちゃくそ重いプレビューマップを開いて試してみます。

シェーダコンパイルは11000件でおよそ10分程度で完了しました。

全てデフォルト状態でもエディタ及びプレイ画面はあまりかくつかず動きますが、やはり少し重めな感じはします。

品質はEpicで40〜50FPS、中で50〜70FPS程度でした。以下はEpicでの動作をGIFとして撮ったものです。

![UE4forMac.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/831ededa-296f-da6f-b12e-c8ab9d33acf9.gif)



# 所感

Editor自体はデフォルトのままでも重く感じませんでしたし、ActionRPGのようなミニマムなコンテンツであれば問題なく開発ができると思われます。とりあえずこのスペックであればある程度開発はできそうという印象を持ちました。やっぱりお金って大切。
【Wordpress】投稿ページ（single.php）において、複数ページ（複数テンプレート）に出し分ける方法

##実現したかったこと
###ひとつの投稿において、情報によってページを切り替えられるようにしたい
投稿が一つのお店のページになっていて、さらにタブでメニューやクーポンをぶら下げるような作りに。
要は食べログやぐるなびのイメージです。
各ページの出しわけは、URLにパラメーターを追加することで判定します。

投稿（美味しい餃子 渋谷店）のトップURL
https://hogehoge.com/cat/美味しい餃子渋谷店/

投稿（美味しい餃子 渋谷店）のメニューURL
https://hogehoge.com/cat/美味しい餃子渋谷店/?info=menu

投稿（美味しい餃子 渋谷店）のアクセスURL
https://hogehoge.com/cat/美味しい餃子渋谷店/?info=access


##やること
###1. テンプレの用意
トップ用のテンプレとは別に、menu用、access用のテンプレを用意します。
single.php
single-menu.php
single-access.php

###2. function.phpにフィルターフックを追加
single_templateに対してフィルターフックを追加します。
以下、ソースの例です。

```php:function.php
function shop_template_switch($template) {
	$new_template = $template;
    if (isset($_GET['info'])) {
        $new_template = 'single-' . esc_html($_GET['info']) . '.php';
        if (is_array($template)) {
            $new_template = array(
                $new_template,
                isset($template[1]) ? $template[1] : 'single.php'
                );
        } else {
            $new_template = preg_replace('/[^\/]+\.php$/i', $new_template, $template);
            if (!file_exists($new_template)) {
                $new_template = $template;
            }
        }
    }
    return $new_template;
}
add_filter('single_template', 'shop_template_switch');
```

###3. 完成
URLに各パラメーターを追加し、表示されれば完成です。
https://hogehoge.com/cat/美味しい餃子渋谷店/
https://hogehoge.com/cat/美味しい餃子渋谷店/?info=menu
https://hogehoge.com/cat/美味しい餃子渋谷店/?info=access

パラメーター名でテンプレを作れば、さらにページを増やしていけます。

例：メッセージページを以下のURLで作成する場合
https://hogehoge.com/cat/美味しい餃子渋谷店/?info=message
→ single-message.php


##特定のカスタム投稿タイプの場合
複数のカスタム投稿タイプがある場合など、特定のカスタム投稿タイプだけに反映させたいこともあると思います。
function.phpの記述を以下のようにすれば、特定のカスタム投稿タイプだけで実装することができます。

例：カスタム投稿タイプ「shop」にだけ適用したい場合

```php:function.php
function shop_template_switch($template) {
	$new_template = $template;
	$post = get_queried_object();
	if (is_singular( 'shop', $post)) {
		if (isset($_GET['info'])) {
			$new_template = 'single-' . esc_html($_GET['info']) . '.php';
			if (is_array($template)) {
				$new_template = array(
					$new_template,
					isset($template[1]) ? $template[1] : 'single-shop.php'
					);
			} else {
				$new_template = preg_replace('/[^\/]+\.php$/i', $new_template, $template);
				if (!file_exists($new_template)) {
					$new_template = $template;
				}
			}
		}
	}
    return $new_template;
}
add_filter('single_template', 'shop_template_switch');
```




##参考サイト
https://dogmap.jp/2011/02/01/single-template-switch/
ATOMのステータスバーの項目の順番を入れ替える:パッケージmove-status-items

プログラミングにATOMを使っている方も少なくないでしょう．この記事では，エディタの一種ATOMのステータスバーに並んでいる，項目の順番を手動で入れ替えることを可能にするパッケージ`move-status-items`について，紹介します．

### ステータスバーとは？（初心者のための解説）
ATOMのウィンドウの下部にある，エラーの件数や編集中のファイル名などを表示している箇所を，ステータスバー（status bar）と呼びます．
見当たらない場合は，非表示になっていると思われますので，次の記事を参考に対処してください:
https://qiita.com/naru0504/items/9356c71c59d84b957309

### move-status-itemsの導入
パッケージ名は`move-status-items`です．詳しいインストール方法は，次の記事を参考にしてください:
https://qiita.com/oyan29/items/f55642c95d311d15c03c#パッケージのインストール方法

### 使用方法
パッケージ`move-status-items`を有効にしておいてください．以下のgifのように，それぞれの項目をマウスでドラッグすることで順番を入れ替えることができます．

![atom_rearenge_status.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425475/33a22981-dfc3-aed3-74ef-fd34cdf4819f.gif)

# 参考文献
- https://github.com/atom/status-bar/issues/207
- https://atom.io/packages/move-status-items
#Rails + docker-compose + volume mount + dotenv gem の組み合わせで docker コンテナでは存在しないはずの環境変数が rails console や rspec で突如として現れキャッシュされているように思える怪奇現象と立ち向かっていた


# Conclusion

- .env file copied from host and exist in docker container ( BAD CASE )
- "dotenv" gem read .env with rails console and rspec
- not exestence env in docker container appears in rails!

HEY DO NOT DO COPY FUZZY with Dockerfile

# What was the trouble

is this the trouble dependent on my environment or code ?

# .env

```
ABC=XXX
```

# docker-compose up

.env file effect for build docker-compose file
it for not docker container ENV 

# docker container

Yes so not set ABC env in container 
```
root@c0d7a2a32aec:/app# env | grep ABC
root@c0d7a2a32aec:/app#
```

but ... 

# Try rails console

oh whats happen!?

```
[1] pry(main)> ENV['ABC']
=> "xxx"
```

# Try Ruby pry

there is not ENV['ABC']
it seems rails only trouble

```
[1] pry(main)> ENV['ABC']
=> nil
```

# I noticed 

rails read .env file ?
this docker container BAD copy
copy all current directory files

```
COPY . .
```


So .env file is in docker container

```
root@432f3ef01b16:/app# cat .env
ABC=xxx
```

# Try remove .env

And rerun rails console

```
root@349934df34c4:/app# rm .env
```

specify do not use spring cache

```
root@349934df34c4:/app# DISABLE_SPRING=1 bundle exec rails console
[1] pry(main)> ENV['ABC']
=> nil
[2] pry(main)>
```

ENV leave!

# Reason

Gemfile

```
group :development, :test do
  gem "dotenv-rails"
```

Ah I found maybe

# Finally i tried

i remove `gem "dotenv-rails"` in Gemffile 
bundle install

and Try rails console

( and .env file is in docker container )

```
[2] pry(main)> ENV['ABC']
=> "xxx"
```

🎉 

# Conclusion

Do not copy to container .env file !


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2809








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Laravelで作ったファイルアップローダーEuropaのデータ管理ついて

カルネージハート Advent Calendar 2019 1日目の記事です。

カルネージハートEXAの公式アップローダーSATLOKEはお亡くなりになりました。

[![Screenshot from Gyazo](https://gyazo.com/0805d18b3d8944f22c8fa66ee64fc6db/raw)](https://gyazo.com/0805d18b3d8944f22c8fa66ee64fc6db)


が、代替アップローダーで[Europa](https://project-europa.herokuapp.com/)を運営しております。M2です。
[![Screenshot from Gyazo](https://gyazo.com/37b9131b6c96ed1fc7ebef5c9f5bd0e4/raw)](https://gyazo.com/37b9131b6c96ed1fc7ebef5c9f5bd0e4)

## Europaのデータ管理について

通常ファイルアップローダーはS3などで管理することが多いと思いますが、Europaについてのファイル管理は直接バイナリをDBに投入して管理しております。

なぜか、、、Herokuだからです。。。  ~~HerokuでもS3使えるやーん的なツッコミあると思いますが、作った当初はノウハウがなくというか知識g~~

ただLaravelだとバイナリデータ取り出してそのままDBに入れると上手くはいりません...

そこでバイナリデータをラージオブジェクト (LOB)としてInsertしています。

```php:migrationFile.php
    public function up()
    {
        Schema::create('files', function (Blueprint $table) {
            $table->increments('id');
            $table->binary('file_data');
        });
    }
```

```php
    //$hogeFileはリクエストから取得したFileデータ
    $fileData = file_get_contents($hogeFile);

    //Laravel/homesteadではPostgreSQLはpgsqlとして設定
    $db = DB::connection('pgsql')->getPdo();
    $stmt = $db->prepare("INSERT INTO files (file_data) VALUES (?)");
    $stmt->bindParam(1, $fileData, $db::PARAM_LOB);
    $stmt->execute();
    unset($db);
```

これで無事バイナリデータがDBに投入できます！


## 最後に

今回カルネージハート Advent Calendar 2019を始動しました。

事実上の最新作EXAが2010年に発売以降続編の情報が皆無ですが、一部の熱狂的ファンは大会を開催してゲームを続けています。ゲームを盛り上げることで続編も出るかもしれません。カルネジスト、ネジらーの皆様のご協力をお願いします！

カルネージハートファンのプログラミング知識を共有しましょう！

腹筋ミサイル回避でお茶を濁します

![D0tVcWFUcAA-jgg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133718/f9ed6bc6-ca36-f535-f6b7-c167b5c3f80b.gif)
強力Jupyter Notebook

Pythonは、初めてのプログラミングではない。以前（高校生のころだから15年くらい前）少しだけVisual C#を使ったことがある。数文字打つだけでコードが補完されたりして便利だったけど、数ある機能の上澄みしか使っていないなという印象があった。
また、大学時代には数値計算の初歩の初歩を学ぶ授業でFortranを学んだこともあった。miで正しいのか正しくないのかよくわからないコードを書いて、コマンドプロンプトからコンパイルしてエラーを食らったりしていた。なんとも見通しが悪かった。

PythonにはJupyter Notebookという強力なエディタがある（語弊がありそう）。起動も簡単で、コマンドプロンプトでJupyter notebookと打ち込むだけだ！前回覚えた表記を使うと↓こういうこと

```
$ Jupyter notebook
```
そうするとブラウザでJupyter notebookが起動する。なんとこのエディタはブラウザ上で動く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218039/95876be6-ed07-9623-5ba2-860052a1c2d3.png)
こんなかんじ。右上のNewからPython3をクリックすると、そこにはもうプログラムを書く枠が表示されていた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218039/da656bee-e80f-9fbd-8fe0-547ab3f39907.png)
こちょこちょとプログラムを書いて（書き方は適当に検索した）、Cellの下付近にある再生ボタン的なやつを押すと、書いたコードのすぐ下に文字列が表示された。

今回はここまで。
シェルスクリプト cd 物理的にディレクトリ移動

以下の説明のように、cd でシンボリックリンクを辿ってディレクトリを移動するときに -P オプションを使うと、シンボリックリンクの構造を無視して、物理的なディレクトリ構造として移動することができる。

```bash:help_cd
-P use the physical directory structure without following
   symbolic links: resolve symbolic links in DIR before
   processing instances of `..'
```

```bash:cd
# /root にいます
$ pwd
/root

# シンボリックリンク s-link をつくります
$ ln -s /usr/bin/ s-link

# s-link をつかってディレクトリ移動します
$ cd s-link

# /root/s-link にいます
$ pwd
/root/s-link

# 親ディレクトリに移動します
$ cd ..

# /root にいます（戻ってきました）
$ pwd
/root

# -P オプションをつかってディレクトリを物理的に移動します
$ cd -P s-link

# /usr/bin にいます（-P オプションなしでは、/root/s-link に移動していました）
$ pwd
/usr/bin

# 親ディレクトリに移動します
$ cd ..

# /usr にいます（/root には戻りません）
$ pwd
/usr
```
初心者によるプログラミング学習ログ 177日目

# 100日チャレンジの177日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

177日目は

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます。<br>177日目<br><br>今日もwebサイトコーディングの課題<br>履歴のテーブル？表？みたいなものを作成<br><br>ちょっとすすみがわるくて今日は昨日ほどすすんでないです。<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</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/%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></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1202321210068963330?ref_src=twsrc%5Etfw">December 4, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Visual StudioのツールバーからLive Shareを消す

# 概要

Visual Studio 2019のツールバーにいるコイツを消す

![DelLiveShare01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9adf1242-1abe-c3a9-d9dc-7855f3ce1d5d.png)

# やり方

`Visual Studio Installer`で`個別のコンポーネント`タブの
`開発作業` - `Live Share`のチェックを外す。

![DelLiveShare02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/315e6744-ed52-7cdf-9336-66435328d792.png)

![DelLiveShare03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/19d068ee-6a50-dbd8-beab-676f1bd19a0c.png)

以上
wordpress 公開サイト移行のちょっとした手順

# はじめに
案件でwprdpress構築を任せていただき、クライアントオッケーがでて、いよいよ公開！のタイミングになりました。
スムーズにクライアント希望時間に公開できるようにいろいろと下準備をしましたので、メモ代わりに書きます。
~~（実際には、まだ公開はしていないのでミスが発覚したら、随時書き換えます。）~~

# 経緯
とあるサイトにて、40ページ近くあるコンテンツを最初はhtmlで組んでほしいとの依頼で制作をしたものの、やはり自分たちで更新をしたいからCMS（wordpress）で作り直してほしいとのことで再度制作。

# 環境
新規でドメイン・サーバー（xさん）を契約し、htmlファイルを置いていました。
サブドメインにwordpressをインストールし、basic認証をかけながら構築を進めました。
なので、実質wordpressでの新規のサイト構築といったかんじです。
cssやjsは手を加えなくて済んだんで、助かりました〜。

# WP構成
## サブフォルダ
wordpressのインストール先をテスト・公開ともに、フォルダを一つかましています。
`home/public_html/__cms`
こうすることで、`__cms`と同階層に`index.php`を置かない限り、テーマは表示されない。（ディレクトリアクセスされたら、エラーは出ますが少しの間なのでokとしておきます。）
なので、公開サイトに本来の静的ファイルを公開しつつ、裏ではテーマ移行を進めておくことができる。
**worpressを本番サイトにインストールして、テスト環境とは別にデータベースも作成しておく**

## /assets/
また、`__cms/`と同階層に`assets/`をおき、その中に`css・js・img`等をぶち込んでおく。必要なのは`img`のみですが
こうすることで、静的ページなんかは長ったらしい画像パスを書かなくても、`/assets/path/to/img`で読み込むことができる。
※元々の静的ファイルも画像パスは、全てルートパス読み込みしています。

# データベース
## エクスポート
phpMyAdminを使用して、テストサイトのデータベースを複製（エクスポート）する。

- エクスポート方法は、全てのテーブルをインポートする場合は**「詳細」**（必要に応じて除外選択できる）を選択する。
- 生成オプションについては、`DROP TABLE / PROCEDURE / FUNCTION ...`を選択しておくといいらしい。（ドキュメント参照）

> DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER コマンドを追加する」オプションを選択します。復元するデータベース上でテーブルを作成する前に、同名のテーブルが存在すれば DROP コマンドでこれを削除します。

- あとは触らなくても、デフォルトで基本おkのはず。今回は特に触っていません。

そしたら、sqlファイルが出力されます！

## インポート
今度は、新しく作成したDBに先ほどエクスポートしたDBを反映（インポート）させる。
インポートファイルを読み込んで実行する！
これでDBの複製ができる。

## 注意
今回の案件では一箇所かなとは思いますが、DB内に`ドメイン`が記述されている箇所がある。
**そこをテストドメイン→本番ドメインに書き換えないとエラーが起こってサイトが見られない。**ここは注意してねと言われただけなので、詳しく理解できていない、後日調べなければ！

今回変更したのは以下

- `wp_options option_name: site_url`
- `wp_options option_name: home`

### 20.06.19 追記
参考：https://www.vektor-inc.co.jp/post/multisite_iko/

# テーマ
テーマの以降をする際は、`duplication`を使うことが弊社では多い。しかし、今回は新規構築とのことで、プラグインを使用せずに、テスト環境から該当ファイルをインポートした。
テーマ移行に必要となるものは以下

- themes / theme_name / 該当のテーマファイル一式
- uploads （メディアアップの画像等が保管されている）
- plugins インストールされていたプラグイン。これがインポートもエクスポートも時間かかる。我慢。

# 確認
ひとまず、上記が一通り完了したら、ちゃんと反映されているか確認する。緊張する。
`https://domaindesu/__cms/wp-admin/`で管理画面にアクセス。
**（本当は、セキュリティのために管理画面URL変えていますが！）**
投稿データ等間違えがなければひとまずおっけ

# 公開
サブフォルダにwordpressをインストールすると、同階層に`index.php`を置かないと、サイトアクセスできなくなるので注意。
テストサイトに置いている`index.php`を公開サイトに映して完了~~（のはず。。。現状、実作業がまだなのでわからない、、、）~~

あと、テーマのパーマリンクディレクトリと既存の静的URL（ディレクトリ）が同一の場合は、静的を消しておかないと、`503エラーが出る。`怖い。
index.php以降のタイミングの前に消しちゃいましょう！


スムーズに行くはずといっても、瞬間的にサイトが見れなくなるタイミングはあるので、メンテナンス画面も一緒に準備して、`.htaccess`でリダイレクトするとよし！
公開終了後には、コメントアウトするなりしないと、忘れたら怒られる。

# 最後に
~~本番公開うまくいくといいな。~~ 無事完了しました！
Rails Trouble : Rails console read dotenv file - .env - for docker compose and seems like caches not existence ENV constant in docker container

# Conclusion

- .env file copied from host and exist in docker container ( BAD CASE )
- "dotenv" gem read .env with rails console and rspec
- not exestence env in docker container appears in rails!

HEY DO NOT DO COPY FUZZY with Dockerfile

# What was the trouble

is this the trouble dependent on my environment or code ?

# .env

```
ABC=XXX
```

# docker-compose up

.env file effect for build docker-compose file
it for not docker container ENV 

# docker container

Yes so not set ABC env in container 
```
root@c0d7a2a32aec:/app# env | grep ABC
root@c0d7a2a32aec:/app#
```

but ... 

# Try rails console

oh whats happen!?

```
[1] pry(main)> ENV['ABC']
=> "xxx"
```

# Try Ruby pry

there is not ENV['ABC']
it seems rails only trouble

```
[1] pry(main)> ENV['ABC']
=> nil
```

# I noticed 

rails read .env file ?
this docker container BAD copy
copy all current directory files

```
COPY . .
```


So .env file is in docker container

```
root@432f3ef01b16:/app# cat .env
ABC=xxx
```

# Try remove .env

And rerun rails console

```
root@349934df34c4:/app# rm .env
```

specify do not use spring cache

```
root@349934df34c4:/app# DISABLE_SPRING=1 bundle exec rails console
[1] pry(main)> ENV['ABC']
=> nil
[2] pry(main)>
```

ENV leave!

# Reason

Gemfile

```
group :development, :test do
  gem "dotenv-rails"
```

Ah I found maybe

# Finally i tried

i remove `gem "dotenv-rails"` in Gemffile 
bundle install

and Try rails console

( and .env file is in docker container )

```
[2] pry(main)> ENV['ABC']
=> "xxx"
```

🎉 

# Conclusion

Do not copy to container .env file !


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2808








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
iOS13のセルのclipsToBoundsにつまずいた

# はじめに
iOS13 にアップデートすると下記のような画面に遭遇。

<img width="300" alt="ios13" src="https://user-images.githubusercontent.com/34936885/70232735-6bdbe200-17a0-11ea-8344-ca50c283a5a3.png">

しんぐるとんが見切れてる:shit:

# 対応
`Accessory` に `Disclosure Indicator` に設定しているので `contentView` の範囲は下の青い範囲。とりあえず `clipsToBounds` があやしい。

<img width="300" alt="layout" src="https://user-images.githubusercontent.com/34936885/70232745-7302f000-17a0-11ea-978b-f9bdd9e2ad52.png">

デフォルトでセルの `contentView` の `clipsToBounds` が `true` になってるので `false` に設定。

<img width="261" alt="clip" src="https://user-images.githubusercontent.com/34936885/70232773-81510c00-17a0-11ea-9b75-6a2daf03a1aa.png">

いけた:star2:

<img width="300" alt="after" src="https://user-images.githubusercontent.com/34936885/70233019-13f1ab00-17a1-11ea-9c60-55afe8c0d7db.png">

# 調査
とりあえず表示できましたが一応調査。
iOS13 以上でなる模様。

| iOS12.4.1 | iOS13.0 |
| --- | --- |
|<img width="300" alt="ios12" src="https://user-images.githubusercontent.com/34936885/70232702-5cf52f80-17a0-11ea-8cd0-c3f58e725a40.png">|<img width="300" alt="ios13" src="https://user-images.githubusercontent.com/34936885/70232735-6bdbe200-17a0-11ea-8344-ca50c283a5a3.png">|

そもそもなんで iOS13 未満は `clipsToBounds` が `true` なのに表示されるんだ？？

調べてみると下記がヒットした。（公式はみつからなかった...）

* [Cannot set clipToBounds on UITableViewCell's contentView in iOS 7.1](https://stackoverflow.com/questions/22387124/cannot-set-cliptobounds-on-uitableviewcells-contentview-in-ios-7-1)

詳しくはわかりませんが iOS7.1 の頃から `UITableViewCell` の `contentView` は `clipsToBounds` が `true` に設定されていても `false` になるらしい。

## 検証
iOS12.4.1 と iOS13 で　`UITableViewCell` の `contentView.clipsToBounds` がどうなってるか調べてみました。

実装はこんな感じ

```swift:ViewController.swift
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return 1
}
    
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! TestTableViewCell
  return cell
}
```

```swift:TestTableViewCell.swift
override func awakeFromNib() {
  super.awakeFromNib()
  print("awakeFromNib clipsToBounds: \(contentView.clipsToBounds)")
}

override func layoutSubviews() {
  print("layoutSubviews clipsToBounds: \(contentView.clipsToBounds)")
}
```

### iOS12.4.1 の結果

```
awakeFromNib clipsToBounds: true
layoutSubviews clipsToBounds: false
```

### iOS13 の結果

```
awakeFromNib clipsToBounds: true
layoutSubviews clipsToBounds: true
layoutSubviews clipsToBounds: true
```

なんか2回呼ばれたけどとりあえず `clipsToBounds` が `true` のままになってる:exclamation:

# さいごに
`clipsToBounds` を `false` にすることで対応しましたが、これでいいのかは不明...今のとこ iOS12 でも iOS13 でもおかしな表示にはなっていません。

そもそも `View` からはみ出したレイアウトってどうなんだっていうのはありますが:neutral_face:
.NETメモ　.NET Framework, .NET Coreサポート期間 2019/12

# 図

![201912dotnet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6b227ca5-54c6-1c27-e323-19e76791d008.png)

# 参考URL

* [Microsoft サポート ライフサイクル - 製品のライフサイクルの検索](https://support.microsoft.com/ja-jp/lifecycle/search/548)
* [core/microsoft-support.md at master · dotnet/core · GitHub](https://github.com/dotnet/core/blob/master/microsoft-support.md)
Kintoneをデータストアにしたときにハマること

#Kintone初心者アドベントカレンダー四日目です。
##ごめんなさい。昨日だったのをつい忘れてしまいました。
あぁ、やってしまった〜。
って感じです。
今日に四日目をかいてしまっています。
申し訳ございません。
<strong>よくハマりがちな罠についてかいていきたいと思います。</strong>
##なぜこのテーマなのか。
実はヒーローズリーグ大垣Pythonハッカソンで実はこの問題にハマりました。
それはAPIトークンとURLの場所を間違え実装してしまう。
これが一番の罠です。
Kintoneは実際言うとアプリを作るフレームワークに近いということを最初に認識していないといけません。
実際Pythonで今回は実装したのですが一番簡単なのはNode.jsです。
Python縛りがあったため自分は前職のC#の職場が実は本業はPythonなので学んでいたおかげでスイスイと組めました。
ですがここで間違えたのがAPIキーの場所です。
@RyBBさんも指摘していますが。
皆さん急ぐと間違えてしまいます。

```python:kintone_output.py
#ここまでは順調です。
#ここからが問題です。
#何処を見るのでしょうか。
#APIトークンのCurlが書かれている後ろのURLです。
URL = 
#APIトークンもよく間違えます。
#注意が必要です。
#自分もNode.jsで教えていただいたときに間違えました。
#APIトークンの部分をコピーするのですよ。
API_TOKEN = 

#此処から先は通常コードで問題ないです。
#上の2つを間違えると痛い目見ます。
def get_kintone(url, api_token):
    "kintoneのレコードを全件取得する関数"
    headers = {"X-Cybozu-API-Token": api_token}
    resp = requests.get(url, headers=headers)
    return resp

if __name__ == "__main__":
    RESP = get_kintone(URL, API_TOKEN)

    print(RESP.text)

```

```nodejs：kintone.js
const kintone = require('@kintone/kintone-js-sdk');
//ここですよ。
//気をつけてください。
//自分もハマりました。
const domainName = 'SUB_DOMAIN.cybozu.com'; // Your kintone URL
//ここですよ。
//気をつけてください。
const APIToken = 'YOUR_API_TOKEN'; // Your API Token
const appId = ○○; // AppID
const record = {
  text: {
    value: '追加したいテキスト'
  }
};

// Connection
const kintoneAuth = new kintone.Auth();
kintoneAuth.setApiToken({apiToken: APIToken});
const kintoneConnection = new kintone.Connection({domain: domainName, auth: kintoneAuth});

const kintoneRecord = new kintone.Record({connection: kintoneConnection});

// Add Record
kintoneRecord.addRecord({app: appId, record: record}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  console.log(err.get());
});
```
この二点を気をつければハッカソンでKintoneは無敵の武器になります。
下手にデータベースをいじるより楽になります。
みんなクラウドに走りがちですが自分の場合だったらハッカソンは断然Kintoneです。
ハッカソンの地図系マッシュアップにも無敵です。

うーん。
来年もハッカソンではKinetone使います。
@RyBBさん。
Laravel PHP 初心者メモ

##public アクセス修飾子
どこからでもアクセス可能
>public function __construct()

基本__constructの修飾子は必ずpublicにする
なぜ？？
privateにするとメソッドを呼び出せなくなるため、インスタンスの生成ができなくなります。

##private アクセス修飾子
同じクラスからのみアクセス可能。非公開のため、継承クラスからもアクセス不可

##protected アクセス修飾子
そのクラスもしくは、非公開であるが継承クラスからもアクセス可能


##static 修飾子
protected static $_item_array

$_item_arrayはインスタンス変数 
static宣言は、インスタンス化せずその変数にアクセスできます。　

アクセス例
「クラス名::$インスタンス変数名」は呼び出しできます。
「クラス名::メソッド名()」は直接参照可能です。

原理はメモリ上に残り続ける
※staticメソッドはインスタンスからの呼び出しはできません。

##オブジェクト指向のカプセル化
 呼び出し側からはこのメソッドを介して$_itemArrayの値を取得する。
この様なメソッドをgetterという
   > public function getItemArray()
        {
       return InventoryMail::$_itemArray;
    }

setterはgetterの逆でクラス外から$_itemArrayに値を代入できる
>public function setItemArray(Item item)
    {
       InventoryMail::$_itemArray->push(item);
    }

##配列書き方
>$item_array = [
  ["item_name"=>"商品A", "inventory_controll"=>10],
  ["item_name"=>"B","inventory_controll"=>4],
  ["item_name"=>"C", "inventory_controll"=>5],
  ["item_name"=>"D", "inventory_controll"=>11]
];
hostsに書かれてる全台がいつから起動してるかワンライナー

```
./pssh-2.3.1/bin/pssh -x "-oStrictHostKeyChecking=no"\
 -H "`cat /etc/hosts |\
 awk '{if( $1 != "#" && length($2) > 0 ){print $2 }}'`"\
 -i 'date --date=@$(expr `date +%s` \
- `cut -d "." -f 1 /proc/uptime`)'
```

```
 $ ./pssh-2.3.1/bin/pssh -H "`cat /etc/hosts | awk '{if( $1 != "#" && length($2) > 0 ){print $2 }}'`" -i 'date --date=@$(expr `date +%s` - `cut -d "." -f 1 /proc/uptime`)'
[1] 20:28:47 [SUCCESS] localhost.localdomain
Thu May 16 03:35:37 JST 2019
[2] 20:28:47 [SUCCESS] localhost6.localdomain6
Thu May 16 03:35:37 JST 2019
[3] 20:28:47 [SUCCESS] my-service-web001
Thu Jun 13 02:42:48 JST 2019
[4] 20:28:47 [SUCCESS] my-service-web002
Thu Jun 13 01:51:44 JST 2019
...
```

PSSH : https://code.google.com/archive/p/parallel-ssh/downloads
( wget https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/parallel-ssh/pssh-2.3.1.tar.gz して解凍してる)

dateの部分は https://qiita.com/todaemon/items/82edbad20e37039d5162 を使わせていただきました。

ちなみに `./pssh-2.3.1/bin/pssh` の後に `-x "-t -t -oStrictHostKeyChecking=no"` ってつけておくと、sudo もできるし、初めてのホストでも通るので便利です。

PSSH (古い)の代わりになるソリューションがあればお知らせください。(for で ssh する … だと長いのでpsshくらい簡潔にできると嬉しいです)

#### よくあるfor ssh 版

```
for i in `cat /etc/hosts |\
 awk '{if( $1 != "#" && length($2) > 0 ){print $2 }}'`; do\
 echo $i ;\
 ssh -oStrictHostKeyChecking=no $i cat /etc/resolv.conf;\
 done
```

```
$ for i in `cat /etc/hosts | awk '{if( $1 != "#" && length($2) > 0 ){print $2 }}'`; do echo $i ; ssh -oStrictHostKeyChecking=no $i cat /etc/resolv.conf; done
localhost.localdomain
nameserver XXX.XXX.XXX.XXX
```

----
pssh 以外では、 `ansible all -i inventory_file -m shell -a 'echo hoge'` も便利 (複雑なコマンドは書きにくいかもだけど) (あとansibleの整備が要る)

----

https://qiita.com/ystmg/items/951da0746ab0c42f8ccc (hostsの全台のディスク使用率悪い順に並べるワンライナー) に続く
goで楽して実装したいので、チート集っぽいマルチ型変換を作って、オープンソースで公開したよ

# まとめると

* goで型やデータ変換に関して、実装したり探したりするのは簡単だけど面倒
* 変換するライブラリを作成
* オープンソースで公開した。簡単な実装なのでサンプルコード集としても使える。
* もちろん対応してない変換も多々ある。（今後も増やしていく）

# 概要

goではたまに別の型へ変数を入れたり、interface{}という何でも入れられる変数を経由して受け渡したりして、そのたびに（簡単だけど）変換処理をする必要がある。

一回一回実装しても良いけど手が疲れて来るので、とりあえず、どんな型で受け取るかは知らんが、ほしい型の変数に変換できるお手軽な（こったやつではない）ものが欲しいなぁと思って、作ってみた。

ToString(v interface{}) みたいな雰囲気で、何も考えずにぶっこむ形を意識。

### できあがった形

```go
	v := 2
	s := typeconv.ToString(v).A
	fmt.Println(s)
```

出力結果はもちろん2。
「.A」は「Q&AのA」。
わざわざAってついている理由は、「.IsNil」とか「.NoStruct」とか「.Error」とか他の情報がくっついてきたりする。変換によって何がくっついてくるのかは違う。
今後も必要な情報があれば拡張できる。

戻り値を複数にしなかったのは、

```go
fmt.Println(typeconv.ToInt("100").A)
```

こんな感じで書けるようにしたかったから。
目的は「楽に実装できる」
ただ、エラーを踏み潰す場合もあるので、エラーが出そうな変換は

```go
	s := typeconv.ToInt("www")
	if s.Error != nil {
		何か処理
	}
	fmt.Println(s.A)
```



nilの場合はデフォルト値が使われる
デフォルト値も変更できる

```go
fmt.Println(typeconv.ToString(nil, "にる").A)
```

ソース見るとデフォルト値を複数渡せそうだが、１個目しか使わない。省略するか、１個書くかのどちらか。

個別にデフォルト値を設定するのも面倒になってきた人は、こんな感じで書けるようにもした。

```go
typeconv.DefaultString = ""
typeconv.DefaultInt = -1
```




# 導入

```sh
go get -u github.com/daikuro/GoTypeConvert
```

# 基本（intからstringへ）


```go
import (
  typeconv "github.com/daikuro/GoTypeConvert"
)

func main() {
	v := 2
	s := typeconv.ToString(v).A
	fmt.Println(s)
}
```

出力結果
2

# 使い方:stringからint

```go
import (
  typeconv "github.com/daikuro/GoTypeConvert"
)

func main() {
	var v interface{}
	v = "2"
	s := typeconv.ToInt(v).A
	fmt.Println(s)
}
```

結果
2

#サンプル：stringからbool

```go
	fmt.Println(ToBool("true").A)
	// Output:
	// true
```


# サンプル: structからmap[string]

```go
type User struct { 
  Name string 
}

user := &User{
  Name: "TestName",
}

a := ToMap(user).A
fmt.Println(a)
```

出力結果
map[Name:TestName]

# サンプル: mapからstruct

```go
	type User struct {
		Name  string
		Items []string
	}
	o := &User{}
	MapToInterface(o, map[string]interface{}{
		"Name":  "testUser",
		"Items": []string{"A", "B"},
	})
	fmt.Println(o.Name)
	fmt.Println(o.Items)
	// Output:
	// testUser
	// [A B]
```

# 使い方： map[string]interface{[]interface}からstruct

```go
	type User struct {
		Name  string
		Items []string
	}
	o := &User{}
	MapToInterface(o, map[string]interface{}{
		"Name":  "testUser",
		"Items": []interface{}{"A", "B"},
	})
	fmt.Println(o.Name)
	fmt.Println(o.Items)
	// Output:
	// testUser
	// [A B]
```


# 使い方： map[string]interface{[]interface {string, string, int}}からstruct

ここは趣味の世界

```go
	type User struct {
		Name  string
		Items []string
	}
	o := &User{}
	MapToInterface(o, map[string]interface{}{
		"Name":  "testUser",
		"Items": []interface{}{"A", "B", 1},
	})
	fmt.Println(o.Name)
	fmt.Println(o.Items)
	// Output:
	// testUser
	// [A B 1]
```

# 使い方：文字列からio.Reader

```go
	r := ToIoReader("value").A
```


# 使い方：base64から[]byteからstring

```go
	fmt.Println(ToString(Base64To("dmFsdWU=").A).A)
	// Output:
	// value
```

Base64Toに関してはString()メソッドも用意

```go
	fmt.Println(Base64To("dmFsdWU=").String())
	// Output:
	// value
```


# 他の使い方

テストコードを見てね！
読みやすいテストコードを意識した。

# GitHub

https://github.com/daikuro/GoTypeConvert

# 今後

面倒な変換はどんどん増やしたい。（サンプルコード集として）
標準PCセットアップ自動化してみた話

FUJITSU アドベントカレンダー6日目の記事です

標準PCセットアップを自動化してみた。(自動化できたとは言っていない)

## はじめに

2018年のCPU供給不足で待たされていた新標準PCがやっと配備されて、PC環境を移行しました。
n年後の再移行に備えたメモをまとめていたら、

「社内手順を抜きにして、開発用途のセットアップ作業内容(ほとんどOSS関連)はアドベントのネタになるんじゃね?」

と思い、アドベントカレンダーどころかQiita投稿したことないけど思い切って記事にしてみました。

### 出来たこと

  - ソフトの自動インストール
  - 開発用VMのセットアップ

### 出来なかったこと

  - ソフト設定の移行自動化

#### 用語の整理

- 標準PC
    - 社給のPC。移行した結果メモリが8GBに減って[開発者の人権](https://togetter.com/li/1293731)を失ったけど、私は元気です。
    - この話は社内設定した後の状態から始まります。
    
- セットアップ、構築
  - 「実作業で使える状態」にすること。ソフトインストール + 各種設定。

---

## できたこと

### 使用ソフトの自動インストール

せっかくのきれいな環境なので、きちんとソフト管理をしようと思って
[chocolatey](https://chocolatey.org/)を使ってみました。

chocolateyのインストールは以下2点だけ躓いたけど、それぞれ他のQiita記事のおかげで難なく完了。

1. 実行ポリシー`Remote Signed`にする => [Windows10にChocolateyをインストールする](https://qiita.com/salty_7/items/c5551b21ff6896c244b9)
2. Proxy設定する => [認証プロキシ環境下でのchocolateyインストール](https://qiita.com/geotrader/items/33b5db1832bb42979ba9)

後は簡単。chocolateyで入れれるか確認します。

```
choco search <入れたいソフト>
```

OSSであれば大体あるんではないでしょうか。  
愛用していたフォントもすぐインストールできたのでふぉんと便利ですね。
ソフト名を列挙して `choco install -y` でほっといたらインストールできました。

自分が入れたのはこんな感じです。

```
choco install -y hidemaru-editor teraterm filezilla msys2 nodejs python everything mattermost-desktop Cica vscode xming drawio
virtualbox vagrant terraform packer
```


### 開発VMのセットアップ

自分はVirtualboxでLinux VM立てて、そこ中心にPG作業してます。

- Vagrant + AnsibleでVMセットアップ
- エディタ(neovim)の設定はdotfilesで管理
- 必要なデータはCIFSマウントしたPSSSに配置

元々ある程度スクラップアンドビルドできるようにしていたので、困ることなく開発環境を再現できました。

ただ、コマンド履歴ないのが意外と困ったので、
履歴ファイル(fishを使っているので`~/.local/share/fish/fish_history` )を旧PCから持ってきて履歴引き継ぎ完了。

---

## できなかったこと

### ソフト設定の移行自動化

ソフトは自動インストール出来たものの、そこから「移行前の状態」を再現するまでは手作業。
設定をエクスポート/インポートできるソフトはマシで、出来ないものは新旧PC並べて人力入力。
不自由した点を列挙していきます。

- IME設定
  - キーマップ: USキーボードを使っているため、"Alt + `"を知るまでは切り替えが面倒だった
  - 辞書: 技検を技研とtypo。
- 共有ファイルサーバのパス。早くBox普及しないかな。
- ブラウザ
  - ブクマ: 元々仮想デスクトップと渡り歩くために定期的にエクスポートしていたが少し古かった => 普段見てるあのページどこだっけ?
  - プラグイン: 仮想デスクトップと揃えるためプラグイン整えるの諦めた。でもViminiumなくなるのは痛い

- Mattermost: いつもログインしているサーバどこだっけ? チャットからしばらく消えることに

## 終わりに

セットアップまでは出来ませんでしたが、chocolatey＋αである程度楽に標準PC移行できました。
出来なかった点は、次の移行時に備えてちょっとずつ自動化してみたいと思います。

では皆さん、来年も良い年になりますよう。m(_ _)m
自作したWebページをCSSでダークモードにする

##序文
最近のiosアップデートでiphoneをダークモードに設定できるようになりました。私個人的にはダークモードの方が好みであり、自分自身のiphone,iPad,MacBookも全てダークモードに設定しております。
そこでふと自身で作成したWebページやポートフォリオをダークモードにできないかと思い、調べて見たところ簡単に設定する事ができましたので、下記に共有いたします。



##コード
閑話休題、styleの中に下記を追加するだけです。
現在主要なブラウザ、crome,firefox,safariでは対応している模様です。

```
<style>
    @media (prefers-color-scheme: dark) {
    body{
      background-color: #000;
      color: #aaa;
    }
    }
 </style>
```

##使用例
実際に私の簡単なサイト内で試して見ましたので画像を共有いたします。
＊MacBookAir(2018)をダークモードの設定状態で、ブラウザはcromeを使用しております。
＊サイトはちなみに自身の本管理用途をして,laravel(+vue,jquery)で作成したものです。

1.ダークモード実装前
<img width="1422" alt="スクリーンショット 2019-12-05 20.13.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338175/de69f1ed-9643-b551-4c22-a083e6bfcc9f.png">

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338175/0910f168-21ec-4ed2-00e2-66ccaaa903d8.png)


2.ダークモード実装後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338175/17f88b52-ff3c-73fa-fe5d-45e6e576fe25.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338175/12e7c85e-939a-7170-8742-421731304f9c.png)


##最後に
以上WebページをCSSでダークモードにする方法でした。
なんとなくダークモードの方がテンション上がる気がする笑