OmniAICreator/Qiita-1.07M huggingface dataset:
IBM Cloud Pak for Data as a ServiceでJupyter notebookを管理してみる

# IBM Cloud Pak for Data as a ServiceでJupyter notebookを管理してみる

### 目次
1. はじめに
2. IBM Cloud Pak for Data as a Serviceを始める
3. Jupyter notebookのファイルを用意する
3. CP4D上でJupyter notebookのファイルをアップロードする

### 1.はじめに
この記事では、IBM Cloud Pak for Data as a Service上でJupyter notebookを作成し、コードの保存するところまでを説明します。

例えば、以下のユースケースを想定します。
データ分析プロジェクトのPoCフェーズにてローカル環境でJupyter notebookを使っていた。
次のフェーズではIBM Cloud Pak for Data as a Serviceでデータおよび分析環境を管理するとなった場合に、ローカル環境で作成したJupyter notebookのコードをIBM Cloud Pak for Data as a Serviceに移行することになった。

### 2. IBM Cloud Pak for Data as a Serviceを始める

以下の記事を参照してください。
https://qiita.com/Asuka_Saito/items/df3467dc4c9919772c63

### 3. Jupyter notebookのファイルを用意する
拡張子.ipynbであればなんでも大丈夫です。
手持ちになければ以下のファイルをダウンロードしてください。
http://www.tsjshg.info/Stapy20190213_Tsuji.ipynb

### 4. CP4D上でJupyter notebookのファイルをアップロードする
4-1. 「プロジェクトに追加＋」をクリックします。
![スクリーンショット 2020-11-13 23.48.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878908/c1b4af9c-20b4-ff2a-9690-5834134d7236.png)


4-2. 「Notebook」を選択する
![スクリーンショット 2020-11-13 23.49.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878908/4f114782-d81d-3ab4-7fcf-268beb056119.png)

4-3. 「ファイルから」を選択する
![スクリーンショット 2020-11-13 23.49.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878908/413491a2-3bf7-6b98-ddfd-b8f6b257926d.png)

4-4. 3.でダウンロードしたファイルを選択し、「作成」ボタンを押す
![スクリーンショット 2020-11-13 23.50.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878908/ec12d5de-a769-eca4-9385-509b8237fea8.png)

4-5. 少し待ちます。
![スクリーンショット 2020-11-13 23.51.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878908/31ff4389-caf8-b36e-f52f-4bb12f49997d.png)

4-6. 以下の画面が表示されたら完了です。もちろんコード修正できます。
![スクリーンショット 2020-11-13 23.51.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878908/61820308-8ead-53f8-581f-3ae4152f2094.png)
Command PhaseScriptExecution failed with a nonzero exit code エラーについて


### 最初に
nodebrew で `node` を構築した Mac で、
ReactNative プロジェクトを XCode でビルドすると下記のエラーが出ることがあります。

```
env: node: No such file or directory Command 
Command PhaseScriptExecution failed with a nonzero exit code
```

▼実際にエラーが出たときの画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486398/3ef20331-e0dc-370a-9c0e-5cbf4073b779.png)

### どう対応するか？

`node` のコマンドパスがシステム全体に通ってないことが原因なので、
ターミナルから  **/usr/local/bin/node** へシンボリックリンクを貼ることで解決できます。

```
ln -s $(eval which node) /usr/local/bin/node
```
この後、XCode 上でクリーンしビルドすると動作します。

なおこちらの [Issue](https://github.com/getsentry/sentry-cordova/issues/102
) も参考にしました。ありがとうございます。
RubyのTime, Dateオブジェクトについて解説


## Time, Date オブジェクトとは？

日付や時間を表すオブジェクトです。

## Time オブジェクトの扱い方

### 現在時刻

例えば now メソッドで現在時刻を取得できます。

```
irb(main):020:0> Time.now
=> 2020-11-13 23:26:39.001668 +0900
```

### 任意の時刻

new メソッドで任意の日時を表す Time オブジェクトを生成できます。

```
irb(main):021:0> datetime = Time.new(2020, 1, 1, 12, 30
)
=> 2020-01-01 12:30:00 +0900
```

### 表示フォーマットの指定(Time)

strftime メソッドを使うことで指定したフォーマットで日時を表示できます。
例えば **2020-01-01 12:30** というようなフォーマットで表示させるには次のように書きます。

```
irb(main):021:0> datetime = Time.new(2020, 1, 1, 12, 30
)
=> 2020-01-01 12:30:00 +0900
irb(main):022:0> datetime.strftime('%Y-%m-%d %H:%M')
=> "2020-01-01 12:30"
irb(main):023:0>
```

## Date オブジェクトの扱い方

Time オブジェクトと違い、時刻まで扱う必要がないときにはこちらを使用します。

なお、事前に date ライブラリを読み込んでから使います。

```
irb(main):023:0> require 'date'
=> true
irb(main):024:0> Date
=> Date
```

### 本日の日付を取得

today メソッドを使用します。

```
irb(main):025:0> Date.today
=> #<Date: 2020-11-13 ((2459167j,0s,0n),+0s,2299161j)>
```

### 任意の日付を設定

Time と同じく new を使います。

```
irb(main):029:0> Date.new(2020, 1, 1)
=> #<Date: 2020-01-01 ((2458850j,0s,0n),+0s,2299161j)>
```

### 表示フォーマットの指定(Date)

Time オブジェクトと同じく、フォーマットを指定して日付を表すことも可能です。
ここでは Date オブジェクトから **2020/01/01** 形式で表示させます。

```
irb(main):030:0> Date.new(2020, 1, 1).strftime('%Y/%m/%
d')
=> "2020/01/01"
```
expoで作成したreact nativeアプリをios向けにテスト配布する方法

## はじめに
expoで作成したiOSアプリを開発者以外に配布したいという場面で苦戦したのでまとめました。

主に方法は2つ (他にもあればご教授お願い致します)

・ [expoでpublishする(無料)](#expoでpublishする)
・ [Testflight/DeployGateを利用する(Apple Developer Programへ入る必要あり)](#TestFlightやDeployGateを利用する)

## expoでpublishする(無料)

`expo publish`コマンドを実行するとアカウントのProjectページにビルドされたアプリが表示されます。

ここで詰まったのが、Projectページに表示されているQRコードをスキャンしたが読み込みに失敗した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488042/9954c0aa-4e8d-3ef1-ea84-44801529dcf9.png)

QRコードの真下に書いてあるのだが、この機能が使えるのはandroid端末のみ。

iOSはpublish先のexpoアカウントにログインしていないと使えないらしい。
チームの共有のアカウントを作って、そこにpublishするのが良いかと思います。

## TestFlightやDeployGateを利用する

.ipaファイルをアップロードする事でテスト配布する事ができます。

`expo build:ios`

を実行すれば.ipaファイルが作成できますが、Apple Developer Program(年会費$99が必要)に入会していなければ実行できません。

[DeployGate](https://deploygate.com/?locale=ja)
[TestFlight](https://developer.apple.com/jp/testflight)
## まとめ
自分は今回ハッカソン用に配布したかっただけで、Developer Programに入る程ではなかった為アプリの配布に少し苦戦しました。
同じexpoアカウントに複数人でログインするというのに少し抵抗がありましたが、調べてみた結果これ以外方法が無いかなと思いました。(ハッカソンという時間の問題もあり)

ストアへの公開まで考えている方はApple Developer Programに入るのが確実かなと思います。
yukicoder contest 274 参戦記

# yukicoder contest 274 参戦記

## [A 1285 ゴミ捨て](https://yukicoder.me/problems/no/1285)

小さい順でも大きい順でもいいので一つづつ重ねれるかをチェックして行けばいいだけ.

```python
from heapq import heappush, heapreplace

N, *A = map(int, open(0).read().split())

A.sort()
q = [A[0]]
for a in A[1:]:
    if a <= q[0] + 1:
        heappush(q, a)
    else:
        heapreplace(q, a)
print(len(q))
```

## [B 1286 Stone Skipping](https://yukicoder.me/problems/no/1286)

1回も跳ねないと x、1回跳ねると 3/2 * x、2回跳ねると 7/4 * x、3回跳ねると 15/8 * x、n回跳ねると (2<sup>n+1</sup>-1)/2<sup>n</sup> * x となる. D≦10<sup>18</sup> なので60回も跳ねるとそれ以降は飛距離が伸びなくなる. なので、60回、59回、……、1回跳ねた場合の答えがあるかを調べていけば良い. 切り捨ての影響があるので、適当に前後±100くらいをチェックしたら AC した.

```python
D = int(input())


def f(x):
    result = 0
    while x != 0:
        result += x
        x //= 2
        if result >= D:
            break
    return result


for i in range(60, 0, -1):
    t = D * (2 ** (i - 1)) // (2 ** i - 1)
    for j in range(-100, 100):
        if t + j < 0:
            continue
        if f(t + j) == D:
            print(t + j)
            exit()
```
SwiftUIのチュートリアルで出てくるコードをひたすら書き出す

# SwiftUIまとめ
[SwiftUIのチュートリアル](https://developer.apple.com/tutorials/swiftui)に出てくるコードをひたすら書き出す
自分のイメージを掃き出していく
※随時更新予定

## 文字操作
- 文字の表示
`Text("Hello SwiftUI")`
- タイトル
`Text(Title).font(.tile)`
- イタリック
`Text("Italic").italic()`
- ボールド
`Text("Bold").bold()`
- フレーム指定
`Text("default position of text is center").frame(width: 100, height: 100)`
- 文字の色
`Text("Color").foregroundColor(.green)`
- サブヘッドライン
`Text("subheadline").font(.subheadline)`
- 縦に並べて表示

```
VStack {
  Text(1) 
  Text(2)
}
``` 

- 横に並べて表示
 
```
HStack {
  Text(1) Text(2)
}
```
- alignmentの基本的な種類

|値|意味|
|:--:|:--:|
|.center|中央寄せ|
|.leading|左寄せ|
|.trailing|右寄せ|
|.top|上寄せ|
|.bottom|下寄せ|
|.topLeading|左上寄せ|
|.topTrailing|右上寄せ|
|.bottomLeading|左下寄せ|
|.bottomTrailing|右下寄せ|

- 軸に沿ってスペースをとる
`Spacer()`

- 余白を付与
`padding()`

## 画像
- 画像の表示
`Image("Assets.xcassetsにある画像ファイル名")`
- 画像を丸で切り取り
`Image("Sample").clipShape(Circle())`
- 画像の周りに縁をつける
`Image("Sample").clipShape(Circle()).overlay(Circle().stroke(Color.gray, linewidth: 4))`

- 影をつける
`Image("Sample").clipShape(Circle()).overlay(Circle().stroke(Color.gray, linewidth: 4)).shadow(radius: 10)`

## マップの表示
```:MapView.swift
import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ uiView: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        uiView.setRegion(region, animated: true)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}
```
- viewの位置をずらす
`.offset(x: 10, y: -10)`

- iPhoneの画面いっぱいにviewを表示
  - `.edgesIgnoringSafeArea(.top)`
  - `.edgesIgnoringSafeArea(.all)`
  - `.edgesIgnoringSafeArea(.bottom)`

- 変数宣言
`var 変数名: 型`

- previewの上書き

```
struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow(landmark: landmarkData[1])
            .previewLayout(.fixed(width: 300, height: 70))
    }
}
```

- viewのコンテンツをグループ化

```
struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LandmarkRow(landmark: landmarkData[0])
            LandmarkRow(landmark: landmarkData[1])
        }
        .previewLayout(.fixed(width: 300, height: 70))
    }
}
```

- データを行で表示

```
struct LandmarkList: View {
    var body: some View {
        List {
            LandmarkRow(landmark: landmarkData[0])
            LandmarkRow(landmark: landmarkData[1])
        }
    }
}
```

- インスタンスのプロパティを参照する？

`\.id`バックスラッシュドットプロパティ名？
インスタンスに`Identifiable`があると省略できる？
RubyのRangeオブジェクトについて解説


## Range オブジェクトとは？

ある値の範囲を扱うためのオブジェクトのことです。
例えば 1~3 を表すときは次のように表現します。

```
irb(main):001:0> 1..3
=> 1..3
irb(main):002:0> (1..3).class
=> Range
```

to_a というメソッドを使って配列(Array)に変換することも出来ます。

```
irb(main):003:0> (1..3).to_a
=> [1, 2, 3]
irb(main):004:0> (1..3).to_a.class
=> Array
```

ちなみにドットを３つにすると、最後の値を含まない Range オブジェクトを作れます。

```
irb(main):006:0> (1...3).to_a
=> [1, 2]
```

また、アルファベットについても Range オブジェクトを生成できます。

```
irb(main):011:0> ('a'..'e').to_a
=> ["a", "b", "c", "d", "e"]
```

## Range オブジェクトの値の取り出し

配列と同じく each メソッドでそれぞれの値を展開して取り出せます。

```
irb(main):016:0> (1..5).each { |i| puts "#{i}" }
1
2
3
4
5
=> 1..5
```
SSLHでHTTPS, SSH, OpenVPNを443番ポートに共存させる

## はじめに

会社や学校、公共のWi-Fiなど、80, 443番ポートといった一般的なポートしか通過させない環境では、通常の22, 1194番ポートを用いたSSH, OpenVPNは使用することができない。
また、常にインターネットに公開されているサーバーでは、いくつもポートを開放したくない。
そこで、それらを全てまとめて443番ポートで受け付けてしまおうとするのがこれから紹介するSSLHだ。
今回はHTTPS, SSH, OpenVPNを443番ポートで待ち受けするための設定を行う。

## 環境

- Ubuntu 20.04.1 LTS (GNU/Linux 5.4.0-52-generic x86_64)
- sslh-fork 1.20-1
- nginx/1.18.0
- OpenSSH_8.2p1
- OpenVPN 2.4.7

## 手順

### 既存のアプリケーションのポート変更
すでに443番ポートを使用しているアプリケーションがある場合には、設定を変更し適用しておく必要がある。
nginxなら、serverディレクティブの `listen 443 ssl;` を `listen 9443 ssl;` など別のポートに変更しておく。

### SSLHのインストール

```bash:SSLHをインストールする
sudo apt update
sudo apt install sslh
```

### SSLHの設定
SSLHの設定は `/etc/default/sslh` にあるので、これをお好みのエディタで編集する。

```bash:SSLHの設定の編集
sudo vi /etc/default/sslh
```

HTTPSが9443番、SSHが22番、OpenVPNが1194番の場合、下記のように編集する。

```:SSLHの設定
RUN=yes
DAEMON=/usr/sbin/sslh
DAEMON_OPTS="--user sslh --listen [サーバーのIPアドレス]:443 --ssl 127.0.0.1:9443 --ssh 127.0.0.1:22 --openvpn 127.0.0.1:1194 --pidfile /var/run/sslh/sslh.pid"
```

他にもいくつかのプロトコルに対応しており `sslh -h` で確認できる。
対応していないプロトコルも `--anyprot [IPアドレス]:[ポート番号]` とすることで転送できる。

### ポート開放

TCPを指定してポートを開放する。
また、もともと使用していたポートを閉じる。

```bash:ufwの場合の例
# まだ開けていない場合
sudo ufw allow 443/tcp
# 既存の設定確認
sudo ufw status numbered
# 既存の設定の削除
sudo ufw delete [SSH, OpenVPNの設定の番号]
# 設定の適用
sudo ufw reload
```

### デーモン化

systemctlの設定を行いデーモン化する。

```bash
sudo systemctl start sslh
sudo systemctl enable sslh
```

### 疎通確認

sslhで設定したものに問題なく接続できるか確認する。

```:疎通確認
curl [サーバーのURL(HTTPS)]
ssh -p 443 [ユーザー名]@[サーバーのIPアドレス]
vi client.ovpn  # OpenVPNのポート設定を修正する
openvpn --config client.ovpn
```

## おわり

みんなで仲良く貴重な資源、443番ポートを使っていこう。
【UE4】TEXT()は何故使用するのか



# 最初に

どうも、ろっさむです。

今回はUE4で文字列を扱う際に使用する `TEXT()`についてまとめようと思います。



# UE4での文字列リテラルの扱い

UE4では文字列変数のリテラル（変数や定数以外の数値や文字列などの値の総称）をそのまま使用した場合は、**ANSIを使用してエンコード**されます。

```C++
FString Name = "piyo";
```



ANSIとは一体なんでしょう？



詳しい説明に関しては省きますが、**8bit(1文字を7bit、誤り検出用に1bit)で128文字(制御文字、英数字、記号等)を表します**。サポートされる文字は非常に限られますが、コンピュータやその他の通信機器などで最もよく使われているようです。



つまり、リテラルの状態から`FString`にそのまま入れようとすると、まず**エンジン側でリテラルをANSIを使用してエンコードし、メモリに保存します**。**そのあとに、`FString`に入れるためにUnicodeでUTF-16エンコーディングを行い、再度メモリに保存します**。2回エンコードがされています。

UnicodeとUTF-16に関しては以下の記事がわかりやすいです。



https://itsakura.com/it-unicode-utf

>Unicodeは、文字集合です。世界中の文字を集めたものでそれぞれの文字に番号が振られています。
>
>UTF-16とUTF-8は符号化方式です。パソコンで使用するためにUnicodeを変換した番号が振られています。
>
>UTF-16とUTF-8の振られた番号は別々ですが、同じ文字集合のUnicodeから変換されているので持っている文字の種類は同じです。



`TEXT()`というマクロを使用することによって、**リテラルはANSIとしての保存はされず、そのままUnicodeでUTF-16エンコーディングが行われ、メモリに保存されます**。



このことから、**文字列変数用のリテラルは`TEXT()`を使用することで1回のエンコードで済み**、効率よくリテラルを扱えるということになります。



```C++
FString Name = TEXT("piyo");
```


なんとなくで`TEXT()`を使ってた方も、これで納得しながら使えますね。


# 参考

- https://docs.unrealengine.com/ja/Programming/UnrealArchitecture/StringHandling/CharacterEncoding/index.html
- https://docs.unrealengine.com/ja/Programming/UnrealArchitecture/StringHandling/index.html
- https://itsakura.com/it-unicode-utf
- https://wa3.i-3-i.info/diff406moji.html
- https://www.slideshare.net/ufcpp/unicode-228059981
AtCoderで記載したコードをgithubへアップロードし勉強記録として保存しよう

#AtCoderで記載したコードをgithubへアップロードし勉強記録として保存しよう
AtCoderの問題を解いた際、新規で勉強したアルゴリズムとライブラリを記事にするのは復習になる。
しかし全ての問題をQiitaに記載するのは時間ロスでしかない。
githubへコードをアップする為の基礎知識を学ぶ。

##対象者
コマンドをほとんど使用した事がない方
githubを使用した事がない方

##cmdの復習

```cmd:ホームディレクトリの確認
pwd
```

```cmd:ディレクトリ内の表示
ls
```

```cmd:カレントディレクトリの移動
cd パス
```

```cmd:一つ上の階層へ移動
cd ..
```

```cmd:ファイルを作成
touch ファイル名.拡張子
```

```cmd:ディレクトリを作成
touch ディレクトリ名
```

```cmd:ファイルを開く
cat ファイル名
```

```cmd:ファイルを削除
rm ファイル名
```

```cmd:ディレクトリを削除
rm -r ディレクトリ名
```

```cmd:ファイルを移動
move ファイル名 ディレクトリ名
```

```cmd:ディレクトリを移動
move ディレクトリ名 ディレクトリ名
```

```cmd:ファイルをコピー
cp ファイル名 ファイル名
```

```cmd:ディレクトリをコピー
cp -r ディレクトリ名 ディレクトリ名
```

##git

```git:gitをインストール
git init
```

```git:initを取り消し
rm -rf .git
```

```git:ファイルを追加
git add ファイル名
```

```git:init直後のaddを取り消し
git rm --cached -r
```

```git:init直後の特定のファイルのaddを取り消し
git rm --cached -r [ファイル名]
```

```git:2回目以降のaddを取り消し
git reset HEAD
```

```git:2回目以降の特定のファイルのaddを取り消し
git reset HEAD [ファイル名]
```

```git:コミット
git commit -m "メッセージ"
```

```git:コミットの取り消し
git reset --hard HEAD^
```

```git:ファイルをアップロード
git push origin master
```

```git:リモートのファイルをダウンロードする
git pull origin master
```

```git:変更したファイルの表示
git status
```

```git:変更内容を表示
git diff
```

```git:変更されたファイルを表示
git log
```

```git:変更された内容を表示
git log -p
```

```git:logを終了
q
```

```git:cloneを作成
git clone [githubのプロジェクトのurl]
```

#githubへの登録
[GitHub 入門 ～アカウントを作成する方法～](https://proengineer.internous.co.jp/content/columnfeature/7103)

##ライセンスについて
問題のライセンスは全てAtCoder株式会社が保持しています。
私達ユーザーがgithub上での設定は必要はないかと思われます。
github上での設定しない場合はデフォルトでの設定になると記載があります。
ただし、世界で初めてのアルゴリズムを開発したとかなら著作権、特許を保持した方が良いと思います。
その場合はgithubにアップしない、公開されるサイトにアップロードしない方が良いです。

##公開リポジトリを作成したのでクローンを作成
```git:gitがあるかどうか、バージョン確認
git --version
```

```git:cloneを作成
git clone [githubのプロジェクトのurl]
```

```git:ブランチを作成
git checkout -b develop
```

##では試しにファイルを追加してみよう！

さてここからが問題です。
githubのuser nameとメールアドレスを設定する必要があります。

```git:設定ファイルの編集
git config --global user.name "Your Name"
git config --global user.email you@example.com
```

```git:過去のコミットも編集
git commit --amend --reset-author
```

ユーザーとメールアドレスを設定できました。
次は追加しない隠しファイルを設定。

```git:.gitignore
touch .gitignore
```

```git:.gitignoreに「.DS_Store」を記載
.DS_Store
```

.DS_Storeをaddコマンドで追加しないようにします。
キーが記載された設定ファイルなども必ず記載しましょう。
手動でフォルダにファイルを追加。

```git:作業内容の確認
git status
```

```git:ファイルを追加
git add [ファイル名]
```

```git:コミット
git commit -m "メッセージ"
```

ここでは、

```git:テストで追加
.gitignoreを追加
git add .gitignore 
git add abc182
```

```git:.gitignoreをコミット
git commit -m "Create .gitignore and add abc182 code"
```

```git:.gitignoreをコミット
git push -u origin develop
```

ここでユーザー名とパスワードを入力する事があります。
githubのユーザー名とパスワードを入力しましょう。

##Pull Request
[はじめての Pull Request](https://qiita.com/aokiplayer/items/4efb015187ed9ccc1281)

ここからは参考記事を見てください。
そちらのが分かりやすいです。
Pull RequestはCloseできますが削除できません。
何か不味いものをプッシュしたらリポジトリを削除するしかありません。
気をつけましょう！
RubyのHashオブジェクトについて解説


## Hash とは？

Hash オブジェクトとは key と value の組み合わせでデータを表現できるオブジェクトのことです。

## Hash の書き方

Hash は中括弧とコロンを用いて作成します。

```
irb(main):082:0> user = { name: 'Masuyama' }
=> {:name=>"Masuyama"}
```

## Hash 値の取り出し型

先ほどのようなコロンを用いた記法の場合、key は symbol オブジェクトとなっているので
hash オブジェクトで symbol を指定することで対応する値 (value) を取り出すことができます。

```
irb(main):083:0> user[:name]
=> "Masuyama"
```

## Hash の書き換え

特定の key を指定して値を代入することで、値を書き換えることもできます。

```
irb(main):095:0> user = { name: 'Masuyama' }
=> {:name=>"Masuyama"}
irb(main):096:0> user[:name] = 'Yamada'
=> "Yamada"
irb(main):097:0> user[:name]
=> "Yamada"
```

## key の一覧を取得

keys メソッドを使うと key を配列として取得できます。

```
irb(main):110:0> users = { id: 1, name: 'Masuyama', age
: 29 }
=> {:id=>1, :name=>"Masuyama", :age=>29}
irb(main):111:0> users.keys
=> [:id, :name, :age]
```

## value の一覧を取得

keys と同じく、values メソッドを使うと value を配列として取得できます。

```
irb(main):112:0> users = { id: 1, name: 'Masuyama', age
: 29 }
=> {:id=>1, :name=>"Masuyama", :age=>29}
irb(main):113:0> users.values
=> [1, "Masuyama", 29]
```

## hash での each メソッド

hash では each メソッドで各要素に対する処理を行うことができます。
hash に each メソッドを使うと、ブロックに key と value の両方が渡されることになります。

```
irb(main):118:1* users.each do |k, v|
irb(main):119:1*   puts "#{k} = #{v}"
irb(main):120:0> end
id = 1
name = Masuyama
age = 29
=> {:id=>1, :name=>"Masuyama", :age=>29}
```

## hash 値の削除

一部の key, value を削除するには delete メソッドを使います。
このとき、第一引数に削除対象の key を指定します。

```
irb(main):124:0> users
=> {:id=>1, :name=>"Masuyama", :age=>29}
irb(main):125:0> users.delete(:age)
=> 29
irb(main):126:0> users
=> {:id=>1, :name=>"Masuyama"}
```
GCEのファイアウォールでsshを制限しながら、GCPのブラウザからのsshもできるようにする(IAP経由)

# やりたいこと
SSH制限されたNWなど、sshできないのでクラウド上のサーバーにアクセスできないときのための話。
そんな環境で役に立つのが、GCPのブラウザからのsshの機能。
GCPのコンソール画面から、GCEのWEBターミナルを起動できる。
GCPのこの機能は地味に気に入っている。

[公式](https://cloud.google.com/compute/docs/ssh-in-browser?hl=jacx)の画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161521/55fd5926-4819-5b6f-234d-fa1758f42f44.png)

セキュリティポリシーで、サーバーへのsshの制限をしたいときとか、
[前調べた時](https://qiita.com/henatyokotraveler/items/bbecf262917a3ea53fdc)は、
Googleの公開SPFレコードで絞るくらいしか方法はなかったが、
久々にGCPのWEBターミナルを使っていたら、ポップアップで誘導されて、良い感じの方法が追加されたことを知った。

#やり方
[公式のやり方](https://cloud.google.com/iap/docs/using-tcp-forwarding)

やることは、下記の２点だけ。
- IAPのIPアドレスを許可する
- IAMで[IAP で保護されたトンネル ユーザー]の権限を付与する 

## IAPのIPアドレスを許可する
- FWルールで許可するIP範囲は、35.235.240.0/20 からの上り（内向き）
- ポートは、SSH のポート 22 と RDP のポート 3389

Googleの公開SPFレコードよりも限定されているし、
次の設定でIAMの制限もかかっていると思うと安心感がある。

## IAMで[IAP で保護されたトンネル ユーザー]の権限を付与する

Webターミナルを使用するメンバーに[IAP で保護されたトンネル ユーザー] のロールを付与する呑み。

>Cloud Console で [IAM と管理] ページを開きます。
[追加] をクリックして、以下を構成します。
新しいメンバー: アクセスを許可するユーザーまたはグループを指定します。
[ロールを選択する] で [Cloud IAP] > [IAP で保護されたトンネル ユーザー] を選択します。
[保存] をクリックします。

# 所感
こういう感じの解決をしたかったので、非常にすっきり。
RubyのArrayオブジェクトについて解説


## Array オブジェクトとは？

いわゆる「配列」のことで、複数のオブジェクトを格納できるオブジェクトです。

```
irb(main):039:0> [1, 2, 3, 4, 5]
=> [1, 2, 3, 4, 5]
```

## Array の操作

push メソッドを使うと末尾にオブジェクトを追加できます。

```
irb(main):040:0> arr = []
=> []
irb(main):041:0> arr.push(100)
=> [100]
```

他にも末尾に追加する記法があるので紹介します。

```
irb(main):046:0> arr = []
=> []
irb(main):047:0> arr << 100
=> [100]
```

## Array にオブジェクトを代入

まず、普通に Array を作ってみます。シングルクォートで囲った文字列を Array に格納してみます。

```
irb(main):052:0> arr = ['String1', 'String']
=> ["String1", "String"]
irb(main):053:0> arr
=> ["String1", "String"]
```

でもシングルクォートを度々書くのも面倒なので **%w%[]** という記法があります。

```
irb(main):057:0> arr = %w[String1 String2]
=> ["String1", "String2"]
irb(main):058:0> arr
=> ["String1", "String2"]
```

先ほどと同じ結果になっていることが分かりますね。
**%w** で囲われた配列では、要素はシングルクォートで囲う必要がなく
スペースで区切ってあげるだけで OK となります。

## Array の処理

### each メソッド

each メソッドを使うと配列の各要素を取り出せます。

```
irb(main):064:1* arr.each do |i|
irb(main):065:1*   puts i
irb(main):066:0> end
1
2
3
4
5
=> [1, 2, 3, 4, 5]
```

### map メソッド

map メソッドを使うと、配列の各要素を加工した配列を新たに作ることができます。
例えば各要素に「2」を掛けた配列にするにはこのように書きます。

```
irb(main):068:0> arr = [1, 2, 3, 4, 5]
=> [1, 2, 3, 4, 5]
irb(main):069:0> arr.map { |i| i*2 }
=> [2, 4, 6, 8, 10]
```

### 多重代入

次のような記法により、配列の各要素を変数に格納をすることができます。

```
irb(main):074:0> arr = [1, 2]
=> [1, 2]
irb(main):075:0> foo, bar = arr
=> [1, 2]
irb(main):076:0> foo
=> 1
irb(main):077:0> bar
=> 2
```

foo, bar それぞれに配列の 0 番目、1 番目が格納されていることが分かるかと思います。
Azure サブスクリプションも Microsoft 365 も作成せずに Azure AD だけ作成したい

# はじめに

Azure AD は Azure サブスクリプションか Microsoft 365 を新規作成すると合わせて自動的に作成されますが、Azure AD 単体で新規作成する方法が見当たらなかったので調べてみました。結論としては Microsoft アカウントだけあれば単体で作成できます。

# Microsoft アカウント

Microsoft アカウントを持っていない場合は以下のサイトから作成します。
https://account.microsoft.com

# Azure AD 作成

Azure Portal にアクセスして Microsoft アカウントにサインインします。
https://portal.azure.com

Azure Active Directory を検索して開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383318/81749616-b8d7-1876-4e0f-d02019251a58.png)

この時点では「テナントの情報」にドメイン名が表示されていません。テナント ID は表示されていますが、ID は作成後に更新されます。
画面上部の「＋テナントの作成」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383318/cd293b7c-ddaf-8fcf-e0e0-dd6c1338a1f2.png)

「テナントの種類」で Azure Active Directory を選択して次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383318/42f255d0-9b6a-c0e2-b888-99f440636d41.png)

組織名、初期ドメイン名、国/地域を入力して次へ。初期ドメイン名はグローバルで一意の名前にする必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383318/7db49291-7ebc-2076-94e2-feac39745bbe.png)

確認して作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383318/9302f271-3607-a366-492a-890290a400a9.png)

作成が完了したら「テナントの切り替え」から新しく作成したテナントに切り替えを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383318/a2f06bf8-1049-496f-0fdf-25ee67580953.png)

以上で完了です。

# まとめ

Azure サブスクリプションも Microsoft 365 も作成せずに Azure AD を作成することができました。Azure AD だけ使う場面は多くないかもしれませんが、検証用途などで単体で作成できることが分かったので満足です。

# 参考

[Azure サブスクリプション、リソース、ロール、Azure AD の関係 その1](https://qiita.com/junichia/items/e8cf118314a173efcb68#%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%BD%E3%83%95%E3%83%88%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%A8azure-ad-%E3%81%AE%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88)
CustomViewをコードで実装する

# はじめに
`CustomView`をコードで実装した際に、`init`メソッドに関しての理解が曖昧でしたので備忘録として投稿します。


# 動作環境
【Xcode】Version 12.0.1
【Swift】Version 5.3


# 実装コード
```swift:CustomView.swift
import UIKit

class CustomView: UIView {
    
    var imageView: UIImageView!
    
    // 詳細説明①
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    
    // 詳細説明②
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }
    
    private func setup(){
        let iWidth: CGFloat = 200
        let iHeight: CGFloat = 200
        let posX: CGFloat = (self.frame.width - iWidth)/2
        let posY: CGFloat = (self.frame.height - iHeight)/2
        
        imageView = UIImageView(frame: CGRect(x: posX, y: posY, width: iWidth, height: iHeight))
        imageView.image = UIImage(named: "hoge")
        self.addSubview(imageView)
    }
    
}
```

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()

        let customView = CustomView()
        customView.frame = CGRect(x: 0, y: 0, width: self.view.bounds.width, height: self.view.bounds.height)
        self.view.addSubview(customView)
    }
}
```


# 詳細説明①

```swift
override init(frame: CGRect) {
    super.init(frame: frame)
}
```
* 通常のイニシャライザ（`required`が付かないイニシャライザ）はサブクラスで実装しても実装しなくても良いが、初期化などを行う場合は`override`を必ず付ける必要があります。


# 詳細説明②

```swift
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}
```
* 必須のイニシャライザ（`required`が付いてるイニシャライザ）はサブクラスで絶対に実装しないといけません。
* `init?(coder aDecoder: NSCoder)`のイニシャライザは`NSCoding`プロトコルで定義されており、それが`UIView`クラスで実装されているので、サブクラスでも実装する必要があるということになります。








# 参考
* [required init?(coder aDecoder: NSCoder) { }について考えてみよう！①
](https://tech.pjin.jp/blog/2015/11/24/required-initcoder-adecoder-nscoder-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%80%83%E3%81%88%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%EF%BC%81%E2%91%A0/)
* [required init?(coder aDecoder: NSCoder) { }について考えてみよう！②](https://tech.pjin.jp/blog/2015/11/25/required-initcoder-adecoder-nscoder-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%80%83%E3%81%88%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%EF%BC%81%E2%91%A1/)
Docker for Macに付属のKubernetesにmetrics-serverをHelmでインストールする

# 概要
タイトルのとおり Docker for Mac に付属の Kubernetes クラスタに metrics-server を Helm を使ってインストールする方法のメモです。

# インストール方法
基本的には下記のコマンドを実行するだけです。

```console
$ helm repo add bitnami https://charts.bitnami.com/bitnami
$ helm install metrics-server bitnami/metrics-server --namespace kube-system --set rbac.create=false --set apiService.create=true --set extraArgs.kubelet-insecure-tls=true
```

それぞれのコマンドは下記を実行しています。

* helm に bitnami のリポジトリを追加（追加済みの場合は不要です）
* metrics-server をインストール[^1]

これで少し待つと `kubectl top node` 等でメトリクスが取得可能となります。

```console
$ kubectl top node
NAME             CPU(cores)   CPU%   MEMORY(bytes)   MEMORY%
docker-desktop   521m         8%     1363Mi          19%
```

[^1]: 地味に難しかったのがコマンド引数に `--kubelet-insecure-tls` を指定する方法です。metrics-serverには `extraArgs` が用意されているのですが、デフォルトが `[]` というのを見て `extraArgs[0]=kubelet-insecure-tls` のように指定すると `--0=kubelet-insecure-tls` に変換されてしまい動きません。
UE4においてC++のコンストラクタで生成したコンポーネントの詳細が消える現象についての検証

#概要
下記画像のように、C++でのコンストラクタで生成したコンポーネントの詳細が消えることがたまにあります。
これはブループリントエディタ、レベルエディタ上の両方で生じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530664/39a71c67-d882-5a2a-793b-124a07791240.png)

対処法としてアクタのブループリントの親クラスを一旦他のものに切り替えて戻すと治りますが、パラメータが吹っ飛ぶので手間です。
今回はその原因について検証してみました。
#検証内容
コンストラクタでリネームしたりコンポーネントの種類を変えたりしたときによく起こる気がするので、
それぞれの状況についてどのような挙動をするのか確かめてみます。
今回試すのは

* 変数名のリネーム
* コンポーネントの名前のリネーム
* コンポーネントのクラスの変更

となります。

#検証
まずはリネームなどをする前の状態です。

```C++
// ルートシーン
rootScene = CreateDefaultSubobject<USceneComponent>(FName(TEXT("RootScene")));
RootComponent = rootScene;

// 変数名を変えるコンポーネント
before = CreateDefaultSubobject<USceneComponent>(FName(TEXT("TestSceneName")));
before->SetupAttachment(RootComponent);

// コンポーネント名を変えるコンポーネント
testSceneComponent = CreateDefaultSubobject<USceneComponent>(FName(TEXT("BeforeComponentName")));
testSceneComponent->SetupAttachment(RootComponent);

// コンポーネントのクラスを変えるコンポーネント
componentChange = CreateDefaultSubobject<USceneComponent>(FName(TEXT("ComponentChange")));
componentChange->SetupAttachment(RootComponent);
```
このクラスを継承したアクタを生成してみます。
この時点では当然ですが、各コンポーネントとの詳細パネルを確認できます。
![20201028VSCodeUE402.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530664/c90b05e3-34a0-4b54-68c4-a6b00ca34202.gif)

次に各コンポーネントをリネームなどをしてみます。

```C++
// ルートシーン
rootScene = CreateDefaultSubobject<USceneComponent>(FName(TEXT("RootScene")));
RootComponent = rootScene;

// 変数名を変えるコンポーネント
after = CreateDefaultSubobject<USceneComponent>(FName(TEXT("TestSceneName")));
after->SetupAttachment(RootComponent);

// コンポーネント名を変えるコンポーネント
testSceneComponent = CreateDefaultSubobject<USceneComponent>(FName(TEXT("AfterComponentName")));
testSceneComponent->SetupAttachment(RootComponent);

// コンポーネントのクラスを変えるコンポーネント
componentChange = CreateDefaultSubobject<UBoxComponent>(FName(TEXT("ComponentChange")));
componentChange->SetupAttachment(RootComponent);
```
変更点は以下のとおりです。

* 変数名before→afterに
* コンポーネント名BeforeComponentName→AfterComponentName
* コンポーネントのクラスをUSceneComponent→UBoxComponent

にしてみました。
すると以下のようになりました。
![20201028VSCodeUE403.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530664/7a60bebd-0f0a-556d-b254-86b3c0cd8a98.gif)
#結論
**変数名は同じでコンポーネント名を変えると詳細パネルの表示が消えてしまうようです。**
コンポーネントの内容がコンポーネント名をベースに保存されているからでしょうか。

コンポーネントの名前を変えるときは変数名も変えるなどをすれば起きなくなるのでそうするのが吉かもしれません。
もし詳細が消えてしまった場合も、**コンポーネントの名前をもとに戻せば復活します。**

逆に考えると、古いコンポーネントの名前で設定した内容が残っているかと思うとやや不安ではありますね…。
名前はよく考えて決めたほうが良さそうです。
RubyのEnumeratorオブジェクトについて解説


## Enumerator とは？

ざっくり言うと、Ruby で繰り返しを行いたいときに Enumerator オブジェクトが使われます。
例えば回数を繰り返したい数に times メソッドを付加すると、それはもう Enumerator オブジェクトになります。
※この説明は完全ではありませんがイメージとして掴むためには十分かと思います。

```
irb(main):031:0> 3.times
=> #<Enumerator: 3:times>
```

## 実際に繰り返し処理を行いたいとき

基本的には Enumerator オブジェクトを使いながら、ブロックを記述します。

```
irb(main):035:1* 3.times do |i|
irb(main):036:1*   puts i
irb(main):037:0> end
0
1
2
=> 3
```

i が変わりつつ 0, 1, 2 と増えながら繰り返されていることが分かりますね。

## ブロック処理以外の繰り返し

中括弧でブロックを表現することもできます。

```
irb(main):038:0> 3.times { |num| puts num }
0
1
2
=> 3
```

一行で書けるときにはこういった書き方をすることがあるので、覚えておきましょう。
UnityでC++Puligin(Mac)

# UnityでC++を使いたい
UnityでC++のコードを使いたいけどいまいちよく分からない
Windowsでの記事はたくさんあるがMacの記事は少ない
X Codeをインストールすればいいらしいけど、そんな機能の割に容量の喰うアプリを入れたくないと言うことでUnityとC++の開発環境(g++/clang++)があればできる方法を伝えます。
ターミナルでg++は使える前提で話をします。

# C++ファイルの作成

```cpp:lib.h
#include <iostream>
#include <vector>
#include <algorithm>
using namespace std;

extern "C"
{
    int sum(int a, int b); // a+bを求める関数
    int listsum(int* array, int size); // 配列の総和を求める関数
};

```
```cpp:lib.cpp
#include "lib.h"
    
int sum(int a, int b)
{
    return a + b;
}

int listsum(int* array, int size)
{
    int r = 0;
    for (int i=0;i<size;i++)
    {
        r += array[i];
    }
    return r;
}
```
# ビルドしてUnityで使う
Apple clangを使ってビルドします
Apple clangの導入方法はターミナルで `clang` または `gcc`と打つだけ
あとは指示に従だけ......

`clang++ --version` または `g++ --version` と打ってみて何も異常がなければ大丈夫です
多分、`clang`と一緒に`clang++`もインストールされると思う

実は、Macの`g++`コマンドというのは、`clang++`コマンドのリンクが貼ってあるだけ
本当の`g++`の使い方はまた今度......

```sh
$ clang++ -dynamiclib -o lib.bundle lib.cpp
```

# UnityでC#と連携

```cs:MainScript.cs
using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine;


static class DLL
{
    [DllImport("lib")]
    public static extern int sum(int a, int b);
    [DllImport("lib")]
    public static extern int listsum(System.IntPtr array, int size);
}
public class MainScript : MonoBehaviour
{
    public int[] Array;
    // Start is called before the first frame update
    void Start()
    {
        Debug.Log(DLL.sum(1, 2));
        System.IntPtr ptr = Marshal.AllocCoTaskMem(Marshal.SizeOf(typeof(int)) * Array.Length);
        Marshal.Copy(Array, 0, ptr, Array.Length);
        Debug.Log(DLL.listsum(ptr, Array.Length));
        Marshal.FreeCoTaskMem(ptr);
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

```


Asset内の適当なフォルダに`lib.bundle`を置いてUnityEditor上から配列の中身を適当に設定して実行する。

ちゃんとConsoleに出力されれば成功!!!

## 参考サイト

* https://www.shibuya24.info/entry/cs2cpp_array
* https://qiita.com/8128/items/7cd0bf0b3f5bad60f709
RubyのSymbolオブジェクトについて解説


## Symbol オブジェクトとは？

シンボルは任意の文字列と一対一に対応するオブジェクトです。
by 公式

## 文字列との違いは？

まず、コロン「:」を文字列の前につけて symbol object を生成します。

```
irb(main):001:0> :name
=> :name
irb(main):002:0> :name.class
=> Symbol
```

一見、文字列と同じようにみえますが ruby は symbol object を **整数** として扱います。
これは完全に内部的な話となりますが、symbol は文字列と違い整数として処理される分、高速に処理が行われます。

## symbol は何がよいの？

例えば中身が同じ文字列を生成したとき、
String object では例え中身が同じでも別な object を生成することになりますが
Symbol object では同じ object を指すことになるため、メモリの消費が抑えられます。

String での例をみてみます。

```
irb(main):014:0> string1 = 'String'
=> "String"
irb(main):015:0> string1.object_id
=> 180
irb(main):016:0> string2 = 'String'
=> "String"
irb(main):017:0> string2.object_id
=> 200
```

実体として object ID をみてみると、それぞれ違うものを指し示していますね。

それに対し、symbol では中身が同じ object であれば同じ object ID を指す、
つまり実体としては同じものを指しているのです。

```
irb(main):021:0> symbol1 = :String
irb(main):021:0> symbol1 = :String
=> :String
irb(main):022:0> symbol1.object_id
=> 91428
irb(main):023:0> symbol2 = :String
=> :String
irb(main):024:0> symbol2.object_id
=> 91428
```

この仕様により、新しい Symbol object を生成しても作られるオブジェクトの実体は一つなので
結果としてメモリの消費を抑えることができるのです。

## symbol の使用用途

symbol は hash オブジェクトの key として使用されることが多いです。
(hash: key と値の組み合わせを保持するオブジェクト)

```
irb(main):025:0> { name: 'Masuyama', age: 29 }
=> {:name=>"Masuyama", :age=>29}
```

上記の hash の例では name という key に対して Masuyama という値を持ち、
age という key に対して 29 という値を持つデータを表現できます。

Ruby では key となる文字列にコロン「:」をつける記法がよく登場しますが、
この時の key は symbol として扱われることになります。

データベースのカラム名をイメージすると分かりやすいのですが、
key 自体は様々なデータから参照されるものですので
データが作成される都度、新しいオブジェクトを生成するよりも同じオブジェクトを使った方が効率が良いですよね。
そのため、hash の key として symbol object がよく使われるのです。
【CSS】子要素「僕に逆らう奴は親（要素）でも〇す」

# 概要

長く生きていると親要素から子要素をはみ出させたい時がくると思います
今回は大きく分けて2通りのやり方ではみ出させてみようと思います

もとの要素はこんな感じ

![もとの要素](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390321/776b3536-cc05-5a12-433b-1f6dbb7336ae.png)

# 方法1:ディスプレイ幅に合わせて調整

子要素にvw(viewport width)で、100vwを指定するとウィンドウの幅いっぱいになります

これだけだと、開始位置が親要素に依存するのでズレちゃいます

![子要素の開始位置が親要素に依存している](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390321/3ebbf457-ef7d-5793-0ff6-c40b6935b22a.png)

こんな感じに指定すると

```css
.child1 {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
```

![子要素の開始位置が親要素に依存しなくなった](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390321/d2839e54-b601-533f-1334-70e7e530805a.png)

## コード

```html:oyakoro.html
<div class="parent1">
  parent1
  <div class="child1">child1</div>
</div>
```

```scss:oyakoro.scss
.parent1 {
  text-align: center;
  color: white;
  background-color: #57d1c9;
  width: 50%;
  margin: 12px auto;
  padding: 12px;
  height: 400px;
  > .child1 {
    background-color: #ed5485;
    height: 200px;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
```

# 方法2:ネガティブマージンを利用

ネガティブマージンとは、marginに、マイナスの数値を指定することです

画像の上に文字を載せたい時などに使われる気がします

## 方法2-1:calc()を利用

子要素に下記を指定

```css
.child2 {
  margin: 0 calc(((100vw - 100%) / 2) * -1);
}
```

![ネガティブマージンによって、親要素と子要素の幅が相殺される](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390321/fcef86ca-d62e-4a73-a72e-efcc58d6832f.png)

### コード

```html:oyakoro.html
<div class="parent2">
  parent2
  <div class="child2">child2</div>
</div>
```

```scss:oyakoro.scss
.parent2 {
  text-align: center;
  color: white;
  background-color: #0072bb;
  width: 50%;
  margin: 12px auto;
  padding: 12px;
  height: 400px;
  > .child2 {
    height: 200px;
    background-color: #ff4c3b;
    margin: 0 calc(((100vw - 100%) / 2) * -1);
  }
}
```

## 方法2-2:力技で幅を広げる

子要素に下記を指定

```css
.child3 {
  margin: 0 -100%;
}
```

![ネガティブマージンで横幅を広げて要素をはみ出させている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390321/cfc303db-dd94-1836-b1d7-cfaddcbc936d.png)

### コード

```html:oyakoro.html
<div>
  <div class="parent3">
    parent3
    <div class="child3">child3</div>
  </div>
</div>
```

```scss:oyakoro.scss
.parent3 {
  text-align: center;
  color: white;
  background-color: #09194f;
  width: 50%;
  margin: 12px auto;
  padding: 12px;
  height: 400px;
  > .child3 {
    height: 200px;
    background-color: #f9ce00;
    margin: 0 -100%;
  }
}
```

**他に良いやり方あったら教えてくれると嬉しいです**
VSCodeで動作確認しながらアプリを開発する方法

# はじめに
　新人から相談を受ける中で、「これどうやって実装すればいいですか？」という質問が多くどこで躓いているのかな？と考えることがありました。少し複雑な機能になってくると、小さい単位で動作確認をしながら開発することが大事になってくるけど、それを簡単にできる方法を知らないことが原因ではと思い今回記事を書きました。初学者の人や言語を問わず活用できると思うので参考にしてみてください。

VSCodeを対象にしていて、動作確認の方法の一つに[Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)という拡張機能を使うことをあらかじめ述べておきます。

# まずいくつかの大事なこと

　一つ目は、ソースコードを眺めているだけでは実際にどんな動きをするかは人間には分からないことです。そこで、実際に動かして確認する必要があります。でも、実際のソースコードは巨大なものであり、その中の今実装中の部分だけを抜き出して動作確認というのはなかなか難しいものです。どうにかして、これを抜き出して実行しようとしますが、わざわざ新しいファイルを作ってそこに張り付けてコマンドを叩いて実行するのは面倒です。ファイルの後始末も毎回やっているとかなり面倒です。これらの問題を解決しようというのが一つ目の狙いです。
　二つ目は、一つ目の方法で実際に動作確認してみて、「うん、思い通りに動いているな」と思うことがありますが、例外などが発生したときの動作はまだ確認できていません。無理をして例外チェックも上の方法で一つ一つソースコードを書いてあれこれこねくり回すことはできますが、これもなかなかに面倒です。しかも、書いたはいいけど後に残らないなんてもったいないです。そんな光景を想像したくもありません。この問題を解決するのが2つ目の方法です。

# そろそろ、方法について

一つ目：速攻で動作確認
二つ目：テスト駆動で開発

動作確認のソースコードの内容は、[1,2,3,4,5] という配列がありその中身を２乗した[1,4,9,16,25]に変換するという内容で話を進めます。この簡単な内容でやり方で学んで実際の開発に活かしてください。

## 一つ目：速攻で動作確認

まず、Code Runnerをインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415097/77f982c3-de2d-2327-5bbe-1f7e0358102e.png)



これで準備は完了で、インストール後、`Ctrl + n` で新しいファイルを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415097/9f2a7e91-363a-cd8b-6193-0da0fa79e8ce.png)


次に、動作確認したいソースコードを貼り付けます。白文字で見づらいですが、javascriptでソースコードで書いています。ほかの言語でも実行環境さえあれば問題ありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415097/71433e8c-d53d-a21c-a08c-0cae8c6f51af.png)

貼り付けた後は、`CtrL + k` を押した後に`m`を押すことでファイルの言語を選択できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415097/41c233ec-dfed-6cba-cd51-c321e443b444.png)

今回は、javascriptを選びます。すると色がついて見やすくなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415097/bc14904c-cf07-c874-c015-30197bfea9c2.png)

これで準備完了で、`Ctrl + Alt + n`を押すとターミナルに実行結果が出力されます。この方法で、簡単に動作確認をしながら開発を進められます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415097/d40f019c-f558-0432-0676-422332fab8a2.png)

## 二つ目：テスト駆動で開発

　テスト駆動と書くと難しそうに見えますが、慣れるとスムースな開発につながり、費用対効果の高いスタイルだと思います。狙いは、まず自分が実現したい内容をテストファイルに書いてしまいます。このテストは関数一つなど小さい単位で構いません。テスト駆動と聞くと一気に全部テストを書いてしまうイメージがあるかもしれませんが、それは間違いで苦痛なだけです。小さい範囲でテスト駆動で品質を保ちながら開発するのが正しい姿勢です。下にjavascriptでの例を書いています。このようにテストをまず書いてしまい、そのあとで関数を実装することで動作を保証しながら開発を行うことができます。

※具体的なテストファイルはテストフレームワークに依存してしまいますが、jestというフレームワークを使った例を示します。

```javascript
it("power関数は、配列の全要素を２乗する", () => {
　　const array = [1, 2, 3, 4, 5];

    expect(power(array)).toEqual([1, 4, 9, 16, 25]);
})
it("power関数は、配列に数字以外の要素が来ると例外を返す", () => {
　　const array = ["1", "2", "3", "4", "5"];

    try {
      power(array);
    } catch (error) {
      fail(error)  // テストを失敗で終わる
    }
})
```

# Code Runnerかテスト駆動かの判断基準

　僕のスタイルでは、実装に必要になる外部パッケージや使い慣れていない文法に最初に慣れる段階ではCode Runnerで練習しています。この段階でのCode Runnerはキーボード操作だけで済むのでかなり便利です。その後、慣れてきて実装に入る際には、テスト駆動での開発を行っています。多くの場合、Code Runnerで簡単に試して、テストを書いて実装を進めるということが多いです。

# まとめ

　楽に動作確認しながらアプリを開発するために、Code Runnerとテスト駆動を行うという内容でした。今回の記事が参考になれば幸いです。
仮想コンソールの日本語入力 どうせなら mozc

## はじめに
仮想コンソール上で生活をしたいという~~物好きな~~人のための記事です．
おすすめの順路は

1. [fbtermの日本語表示．uim-fepとuim-anthyで日本語入力も．ついでに，vimの256色化も](https://qiita.com/Pseudonym/items/12e447557a5234bb265b)
2. [uim-fepとuim-anthyの使い方と設定方法](https://qiita.com/Pseudonym/items/9ff0e9028dfd6bad5958)
3. ここ

です．

本家記事の中で紹介されているのは anthy を使うものですが，なんというか anthy くんイマイチなのです．
どうせなら mozc 使えないのかなと調べてみたらどうやら使えるのようなのでなぐり書きです．

## 環境
- Ubuntu 20.04.1 LTS
    - デスクトップも入っています

## uim-fep & uim-mozc のインストール
本家記事の uim-anthy の部分を uim-mozc に変えるだけです．

```:コマンド実行
$ sudo apt update
$ sudo apt install uim-fep
$ sudo apt install uim-mozc
```

## uim の設定記述
デフォルトの入力方法を mozc に設定するついでに vim フレンドリな設定を有効にしています． 動作としては <kbd>Esc</kbd> すると FEP が OFF になってくれるっぽいです．

```:~/.uim
(define default-im-name 'mozc)
(define-key generic-on-key? '("<Control> "))
(define-key generic-off-key? '("<Control> "))

(define mozc-use-with-vi? #t)
```

## ここでおわり
私はここで満足してしまったので終わりです．
デスクトップの方に mozc が入っていると設定が動悸されるっぽい(?)です．

mozc は予測変換とかも利用できるので結構快適な日本語入力ができると思います．
みなさんも良い日本語入力生活を🌠
UbuntuにAnacondaで構築するTensorFlow-GPU環境【1】〜GPUスペック確認編〜

#TensorFlowのGPU版（tensorflow-gpu）を動かすために必要なこととは？
1. Deep Learningを行う計算力(compute capability)のある比較的新しいGPU（nVidia社製）を搭載していること👈**今ここ**
2. GPUの適切なドライバが入っていて、使用可能な状態になっていること
3. tensorflow-gpuやGPUのドライバ（CUDA）、Deep Learning用のライブラリ（cuDNN）をインストールする環境を作るため、Anacondaがインストールされていること
4. Pythonや必要なライブラリがバージョンの互換性を持っていること

#この記事のゴール
tensorflow-gpuを動かすことができるGPUが搭載されているのかを確認し、これ以降のステップに進めるかどうかを判断する。

#クリアするべき二つの条件
そのためには以下の二つの条件を満たしているかを確認していきます。
**条件**1: nVidia社製のGPUを搭載していること
**条件2**: コンピュータのGPUがTensorFlowの要求する計算力（compute capability）を満たすこと

##条件1の確認手順
**条件1**から確認していく。そもそも、nVidia社製のGPUが搭載されているかを確認するので、次のようにコマンドを実行する。結果、このコンピュータに搭載されているGPUはnVidia社製のQuadro K2200だと判明（条件1をクリア）。

```Bash
$ lspci | grep -i nvidia
02:00.0 VGA compatible controller: NVIDIA Corporation GM107GL [Quadro K2200] (rev a2)
02:00.1 Audio device: NVIDIA Corporation Device 0fbc (rev a1)
```
##条件2の確認手順
次に**条件2**の確認に入る。以下のページからcompute capabilityを見ておく(tensorflow-gpuを動かすにはcompute capability3.0以上が必要)。

先のコマンドでGPUはQuadroシリーズの製品だと分かったので、CUDA-Enabled Quadro Productsのボタンをクリックして表を表示させる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844955/61afa3e9-2bba-4825-c0a4-00f82e4dc8fd.png)



該当の行を探す。
結果、Quadro K2200はcompute capabilityが3.0であることが判明（条件2をクリア）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844955/5e278cb0-4c1c-19a7-10d4-4c91bb9efcc1.png)


#もしcompute capabilityが不足していたら
これ以降の環境構築をこなせたとしてもGPUでの計算はできません。そのときは本当にGPUを用いなくてはならないほどの計算なのかを再検討しましょう。必要ならcompute capabilityを満たすGPUを購入しましょう。

#二つの条件がクリアできたら
環境構築に取り掛かっていきます。次の記事ではGPUのドライバーをインストールしてきます。次の記事で解説していきます。
[【２】UbuntuにAnacondaで構築するTensorFlow-GPU環境〜nVidiaドライバーインストール編〜](https://qiita.com/captain-sadami/items/0df5a14f4a42a74dc748)
AxisのPTZカメラをROS上で制御してみた

## 経緯
AxisのPTZカメラをROS上で動かす機会があったので、その手順をまとめてみました。PTZ(パンチルトズーム)カメラとは、**パン**(左右)、**チルト**(上下)、**ズーム**(拡大)の制御ができるカメラのことです。

## axis_cameraについて
最初は、PTZも含めたカメラ制御ができる[python-onvif](https://github.com/quatanium/python-onvif)を使おうとしたのですが、Axisのカメラに対応していなかったので、他の方法を探すことにしました。そこで見つけたのが[axis_camera](http://wiki.ros.org/axis_camera)でした。axis_cameraはAxisのカメラ制御用のROSパッケージです。とても便利ですが、**python2で書かれているので注意が必要です**。近いうちに自分でpython3に書き換えたものを作って、また記事にしようと思います。

## 環境
- [AXIS M5525-E PTZ Network Camera](https://www.axis.com/ja-jp/products/axis-m5525-e)
- Ubuntu 18.04
- ROS Melodic
- python2.7

## 手順
まず、準備としてaxisのデフォルトの権限がrootなので、ptz制御できるようにanonymousに変えておきます。Axisのカメラ設定画面の右下のSettings->System->Usersといくと下のようなページに行くので、Anonymous usersをONにします。
![anonymous.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663246/276ae503-3490-e196-9db5-7d8776954cec.png)

次にgithubからソースコードを落としてきて、ROSを動かしていきます。

```bash
$ cd ~/catkin_ws/src
$ git clone https://github.com/ros-drivers/axis_camera.git
$ git clone https://github.com/ros-perception/camera_info_manager_py.git
$ sudo chmod -R 755 axis_camera 
$ cd ..
$ catkin build
$ roscore
```

別のターミナルを開いて、下のコマンドを実行します。

```
$ rosrun axis_camera axis_ptz.py _hostname:=IP_ADDRESS_OF_YOUR_CAMERA
```

axis_cameraはROSのDynamic Reconfigureを使ってGUI上でPTZ制御ができるようになっています。
別のターミナルを開き、下のコマンドを実行します。

```
$ rosrun rqt_reconfigure rqt_reconfigure 
```

すると、下のようなGUIが出現します。それぞれのスライドバーを動かすことで、PTZ制御ができます。
![rqt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663246/bd38bbe1-48d3-f60f-b18e-f09fb18d3fa4.png)

デフォルトだと、tiltが動作しなかったので、PTZ.cfgの中のtiltの設定値を変更しました。それぞれの項目はgen.add()の後ろの３つに初期値、最小値、最大値の順で並んでいます。

```
#!/usr/bin/env python
PACKAGE = "axis_camera"

from dynamic_reconfigure.parameter_generator_catkin import *

gen = ParameterGenerator()

#gen.add("speed_control", bool_t, 0, "Speed control (true) or absolute position control (false)", False)
gen.add("autofocus", bool_t, 0, "Autofocus", True)
gen.add("pan", double_t, 0, "Pan value in degrees (or percent in absolute mode)", 0, -180, 180)
// tiltの値を-45,-90,0から0,0,90に変えている
gen.add("tilt", double_t, 0, "Tilt value in degrees (or percent in absolute mode)", 0, 0, 90)
gen.add("zoom", double_t, 0, "Zoom value", 1, 1, 9999)
gen.add("focus", double_t, 0, "Focus", 1, 1, 9999)
gen.add("brightness", double_t, 0, "Brightness", 1, 1, 9999)

exit(gen.generate(PACKAGE, "axis_camera", "PTZ"))
```

## まとめ
Axisのカメラであれば、簡単にROS上で動かすことができました。PTZカメラは動かすだけでも楽しいので、是非買ってみてください！家での使い道はあんまり無いと思いますが(笑)。

**間違いや質問、ご意見等ありましたらお気軽にコメントください。頑張って答えますので(笑)。**

### 参考文献
- python-onvif: https://qiita.com/UedaTakeyuki/items/8b2a02e290775d9ab362
pypyのbool型は遅い


#修正
最初「pythonのbool型は遅い」とのタイトルで公開しておりましたが、記事の内容が当てはまるのはpypyを使う場合のみであり、誤りでした。
誤った情報を流してしまい、申し訳ありません。

#言いたいこと
競技プログラミングでpypyを利用する時、True/Falseをbool型で扱うのは遅いです。
int型を使いましょう。

#概要
何かフラグを用意して、それによって処理を分岐させることはよくあると思います。

```python
f = 1
```
とする人も

```python
f = True
```
とする人もいるかと思いますが、どちらも同じ事が起きると期待しますよね。

しかし、実際は実行速度に差がでます。

正確に言うと、真偽値の判定に差がは無く、書き換えで差が出ます。これは後ほど語ります。

#実験
以下のコードで比較してみます。
実行環境はatcoderのコードテストでPyPy3(3.7.0)です。

```int.py
f = 1
for i in range(10**9):
    if f:
        f = 0
    else:
        f = 1
```

```bool.py
f = True
for i in range(10**9):
    if f:
        f = False
    else:
        f = True
```

結果はこのようになりました。（複数回やってもだいたいこんな感じです）

| コード | 実行時間 | メモリ |
|:-----------|------------:|:------------:|
| int.py       | 2423 ms     | 25640 KB         |
| bool.py     | 7439 ms      | 25612 KB       |
思ったより差がデカくないですか！？
実行速度が厳しい問題だと、これだけでもTLEの危険が高まります。
（実際、これでABC182 Eでハマりました）

#考察
ということで、あくまで競技プログラミングでpypyを使う場合の話ですが、フラグを使いたい場合にはbool型ではなくint型を使うようにしましょう。

いろいろ実験してみましたが、速度の差に影響があるのは真偽値判定ではなく値の書き換えのようでした。

フラグとして使うからには書き換えが前提になるかと思いますので注意が必要です。
例えば途中でフラグを立てたらそれ以降立てっぱなしという場合であれば、速度に差は出ないはずです。
コロコロと立てたり折ったりする場合にはこんなつまらない理由でTLEしてしまうかもしれません。

とくにこだわりがなければint型を使うことをおすすめします。

#おまけ
strでもやってみました。

```str.py
a = "True"
for i in range(10**9):
  if a == "True":
    a = "False"
  else:
    a = "True"
```

結果は以下の通りです。さすがに一番遅いですね。

| 実行時間 |メモリ |
|:-----------|:------------|
| 8183 ms     | 25612 KB|

#追記
python3で実行した場合は誤差の範囲内でした。
@shiracums さん、ご指摘ありがとうございました。
RubyのStringオブジェクトについて解説


irb を使いながら、Ruby の String オブジェクトについて解説していきます。

## String オブジェクトとは？

文字列を扱うオブジェクトのことです。
シングル or ダブルクォーテーションで囲うと String オブジェクトになります。
class メソッドで確認してみましょう。

```
 $ irb
irb(main):001:0> "文字列".class
=> String
```

## String オブジェクトの機能

よく使う String オブジェクトのメソッドを紹介します。

### upcase メソッドで大文字化

```
irb(main):002:0> 'String'.upcase
=> "STRING"
```

### downcase メソッドで小文字化

```
irb(main):007:0> 'String'.downcase
=> "string"
```

### 文字の切り出し

slice メソッドを使うと指定した文字列分を切り出せます。
下の例では 0 文字目から 2 (3 の一つ手前) まで切り出しています。

```
irb(main):006:0> 'String'.slice(0, 3)
=> "Str"
```

### サイズの確認

```
irb(main):014:0> 'String'.size
=> 6
```

## オブジェクトタイプの変換

### interger への変換

to_i というメソッドを使用します。

```
irb(main):018:0> '10000'.class
=> String
irb(main):019:0> '10000'.to_i.class
=> Integer
```

### float への変換

to_f というメソッドを使用します。

```
irb(main):020:0> '1.1'.class
=> String
irb(main):021:0> '1.1'.to_f.class
=> Float
```

## String オブジェクトの操作

### 文字の連結

```
irb(main):027:0> 'Str' + 'ing'
=> "String"
```

### 文字を末尾に連結

```
irb(main):030:0> 'String' << '!'
=> "String!"
```

変数を使うと連続して連結することも出来ます。

```
irb(main):038:0> str = 'String'
=> "String"
irb(main):039:0> str << '!'
=> "String!"
irb(main):040:0> str << '!'
=> "String!!"
```

### 自己代入

```
irb(main):042:0> str = 'String'
=> "String"
irb(main):043:0> str += '!'
=> "String!"
```

### 文字列内で変数を展開

ダブルクォーテーション内で囲った文字列の中で #{変数} という式を埋め込むと
変数を文字列の中で展開することができます。

```
irb(main):047:0> name = 'Masuyama'
=> "Masuyama"
irb(main):048:0> "私の名前は #{name} です"
=> "私の名前は Masuyama です"
```

ちなみに変数の展開だけではなく、式を埋め込んで展開することもできます。

```
irb(main):052:0> "1 + 1 = #{1+1}"
=> "1 + 1 = 2"
```
PostgreSQLにバイナリデータをINSERTする手順

## 今回やること

PostgresSQLのデータベースにjpgをデータ（バイナリ）を格納する。
PostgresSQLのバージョン10で検証。

## 格納先フォルダを作成

```/var/lib/pgsql/10/data``` にDBファイル群があるのでディレクトリを作成。
作成する時のOSユーザは```postgres```を想定。

```
cd /var/lib/pgsql/10/data
mkdir images
```

## ファイルのアップロード

```/var/lib/pgsql/10/data/images``` にファイルをアップロードしておく

今回はサンプルとして、```image.jpg```を配置しておく。

## テーブル作成

bytea型のデータが入るテーブルを用意します。

```
create table sample
(
    sample_id   serial not null constraint pk_sample primary key,
    bytes       bytea  not null
);
```

## データの挿入

PostgreSQLでバイナリ型を挿入する時は、```pg_read_binary_file()```でファイルをバイナリ形式にしなければいけない。

```
INSERT INTO sample(sample_id, bytes) 
    VALUES (1, pg_read_binary_file('images/image.jpg'));
```

```/var/lib/pgsql/10/data``` にアクセスするためには、Superuser権限がないとダメなので注意が必要。

superuser権限の付与は以下で対応する。

```
ALTER ROLE sample_user WITH SUPERUSER;
```
トップページにおしゃれな背景画像を使うだけでそれっぽいサイトになる説を検証

# はじめに
## なぜやるか
就活用のポートフォリオを作っていて第一印象がなんだか安っぽいな〜と感じたので少し手を加えてみる

## 作っているもの
記事投稿アプリ（Qiitaに近い）

## before
![スクリーンショット 2020-11-13 20.33.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771826/9a75f9f4-8766-c30f-78c3-6bd91f161b89.png)

非ログインユーザーでも閲覧できるようにしたいので、頭にログインページは設けず。
その結果、初めてのユーザーにとってどうしたらいいの？というインターフェースになってしまっている。

## after
![スクリーンショット 2020-11-13 20.34.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771826/6db567d6-ba7f-e77a-012d-faa09b3d9bf7.png)

とりあえず背景画像とゲストログインボタンを設置してみた。
うん、非常に改善されたと思う。

# 手順
ここからは画像の加工やCSSに慣れていない初心者向けに書きます。

## おしゃれ画像はUnsplash一択
画像に困ったらとにもかくにもUnsplash。
世界中の美しい写真がログイン不要かつ無料でダウンロードできる。

[Unsplash](https://unsplash.com)

## 加工はKeynote
MacユーザーであればKeynoteで事足ります。


新規スライド
　　↓
スライドサイズ設定
　　↓
画像を挿入
　　↓
画像サイズ調整

<--- ここまでで写真のトリミングが完了 --->

![スクリーンショット 2020-11-13 20.57.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771826/37bcfbac-2d6b-d02c-2d3f-609ca4989878.png)

縦200px,横600pxでトリミング


### 画像に透かしを入れる
- 黒い透かし

写真の上に四角形を重ねる
　　↓
四角形の色を黒にする
　　↓
不透明度を調節する

![スクリーンショット 2020-11-13 21.01.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771826/c5a0d383-7030-69c0-168f-742687deed2a.png)



- 白い透かし

色を白にしたらこんな感じ

![スクリーンショット 2020-11-13 21.02.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771826/82eeeedd-8261-6632-cf8e-f8947dea3d2d.png)

加工が終わったら

ファイル
　↓
書き出す
　↓
イメージ

から好きなファイル形式を選んで出力

## トップページに配置
viewファイル

```erb:index.html.erb
<div class='guest-login-box'>
  <%= link_to 'ゲストログイン', users_guest_sign_in_path, method: :post, class:'guest-login-btn' %>
</div>
```
CSS

```css:index.css
.guest-login-box {
  height: 30vw;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("/images/guest_login_box_background.png");
  background-position: center;
  background-size: cover;
}

.guest-login-btn {
  border: 2px solid #fff;
  padding: 8px 20px;
  color: #fff;
}
```

画像はとりあえずpublic/imagesに配置しました。


以上で、トップ画像の完成です。



# おわりに
ログインさせるためだけのトップページはユーザーファーストじゃない気がしていて（構造的にログイン不可欠なアプリは別ですが）

だからと言って、そのまんま出しすると？？？なUIになるし、第一印象がノペーっとしてパンチ弱くなるなと思いました。

誰かの参考になればうれしい

✔︎