OmniAICreator/Qiita-1.07M huggingface dataset:
ConstraintLayoutでNegativeMarginを入れたい

NegativeMargin用のSpaceを追加し、そのSpaceに対して参照をつければ実現できる。

```xml:negative_margin_contraint_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Space
        android:id="@+id/topNegativeMargin"
        android:layout_width="wrap_content"
        android:layout_height="4dp"
        app:layout_constraintBottom_toTopOf="@id/imageView"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/imageView"
        app:layout_constraintTop_toTopOf="@id/topNegativeMargin" />

</androidx.constraintlayout.widget.ConstraintLayout>
```
AtCoderでRuby学習9【第一回アルゴリズム実技検定 3番目】配列要素の並び替え

## はじめに
Ruby学習の一環として「アルゴリズム実技検定」に挑戦します。
そのための学習の中で学んだことをアウトプットしていきます。
今回は「第一回アルゴリズム実技検定」の三問目（3番目）より。
[第一回アルゴリズム実技検定 過去問](https://atcoder.jp/contests/past201912-open/tasks/past201912_c)

自分の解答と、解答する中で学んだ表現・メソッドなどを紹介していきます。


## 問題
6つの相異なる整数 A, B, C, D, E, Fが与えられる。
このうち 3番目に大きい数を調べるプログラムを作成せよ。

制約
・1≦A,B,C,D,E,F≦100
・A,B,C,D,E,Fは全て異なる
・入力中の値はすべて整数である。

入力は以下の形で与えられる。

```ruby
A B C D E F

入力例
4 18 25 20 9 13
```

```ruby
出力例
=> 13
```

## 解答
まずは僕が提出した解答から。

```ruby
ary = gets.split(" ").map(&:to_i)
r_ary = ary.sort
print r_ary[3]
```
入力される文字列を整数として配列で受け取り、
sortメソッドを使って並び替え、3番目に大きな整数を出力しています。

ここからは今回初めて使用したsortメソッドについてまとめていきます。

## sortメソッド
配列の内容をソート（並び替え）をします。
要素同士の比較は <=> 演算子を使って行い、sort はソートされた配列を生成して返します。

### 文字列の並び替え
文字列が入った配列に対してソートすると、「a,b,c...」や「あ、い、う…」といった順番に並び替えをしてくれます。

```ruby
ary1 = [ "d", "a", "e", "c", "b" ]
p ary1.sort
#=> ["a", "b", "c", "d", "e"]
```
数字が文字列の要素として配列に入っている場合は、以下のような感じ。

```ruby
ary2 = ["9", "7", "10", "11", "8"]
p ary2.sort
#=> ["10", "11", "7", "8", "9"]                        
```
### 整数の並び替え
初めから整数の要素として配列に入っている場合は、解答のように簡潔に書けますが、
文字列として配列に入っている場合は、ブロック{}を使って以下のようにします。

```ruby
ary2 = ["9", "7", "10", "11", "8"]
p ary2.sort{|a, b| a.to_i <=> b.to_i }
#=> ["7", "8", "9", "10", "11"]
```
ただ、ブロックの中で比較を行うためにto_iメソッドを使って整数に変換しているのであって、
生成された配列では文字列に戻っているところに注意したいです。

これと同じことがsort_byメソッドでも行えます。

```ruby
ary2 = ["9", "7", "10", "11", "8"]
p ary2.sort_by{|a| a.to_i}
#=> ["7", "8", "9", "10", "11"]
```


## 最後に
以上、「第一回アルゴリズム実技検定」の三問目（3番目）を解く中で学んだソートについてまとめました。

もし間違いなどございましたら、ご指摘いただけると嬉しいです。
Python PyInstallerでexeファイル作成　並列処理だとPCが固まる

#Pythonの並列処理をexeで実行したらPCが固まる

##実行環境
・Windodws10
・Python　3.8.3
・PyInstaller　3.6

コンソールから実行するとなんてことない並列処理が PyInstallerでexeファイルにしてクリックすると、　exeのプロセスが超たくさん立ち上がり、PCがフリーズしてしまう。絶望するくらい

*※PyInstallerがPython3.8.3に対応していないのが原因かと思いきや今回の現象には関係ありませんでした。2020/5/21現在*

##結論
freeze_support()　が必要

exeファイルで実行するとPCが固まるPython並列処理のサンプル

```python:並列処理サンプル

from multiprocessing import Pool 

##### この場合は，引数の二乗を返す関数 ###
def nijou(x):
    print( x*x )
 
###### 並列計算させてみる #########
if __name__ == "__main__":
    p = Pool(4)
    p.map( nijou, range(10) )

```
##freeze_support()の記述が必要だった


メインモジュールの if __name__ == '__main__' の直後にこの関数を呼び出す必要があります
freeze_support() の行がない場合、フリーズされた実行可能形式を実行しようとすると RuntimeError 
が発生するとのこと
freeze_support() の呼び出しは Windows 以外の OS では効果がありません。
さらに、もしモジュールが Windows の通常の Python インタプリタによって実行されているならば（プログラムがフリーズされていなければ） freeze_support() は効果がありませんとのこと

[参考はここ・multiprocessing プロセスベースの並列処理](https://docs.python.org/ja/3/library/multiprocessing.html)

※とりあえずできたからよいのですが、フリーズされた実行形式とはそもそもなんでしょうか？
わからないです。わかるかた教えてください。
exeファイルのことかしら。




```python:exeで実行しても固まらない

from multiprocessing import Pool,freeze_support
#freeze_supporを追加

##### この場合は，引数の二乗を返す関数 ###
def nijou(x):
    print( x*x )
 
###### 並列計算させてみる #########
if __name__ == "__main__":
    freeze_support()　#追加しました
    p = Pool(4)
    p.map( nijou, range(10) )

```
AWS cli個人的メモ

可変の部分は基本的にhogeにしておきます。コマンド例のhogeを自分が使いたいものに変更すれば使えます。

# IAM
## ユーザー一覧取得
```
aws iam list-users
```

# EC2
## EC2インスタンス
### オートスケーリンググループ名 "hoge" のインスタンスのプライベートIP取得
```
aws ec2 describe-instances --region=ap-northeast-1 \
--filters \
"Name=tag-key,Values=aws:autoscaling:groupName" \
"Name=tag-value,Values=hoge" \
--query "Reservations[].Instances[].PrivateIpAddress" 
```

## EBSボリューム
### Nameなしで使われていないやつを取得
```
aws ec2 describe-volumes --query 'Volumes[?!not_null(Tags[?Key == `Name`].Value)]' --filters "Name=status,Values=available"
```

# S3
## バケットの中で再帰的に一番新しいオブジェクトを探す
```
aws s3 ls --recursive s3://hoge-bucket | sort -nr | head -n 1
```

## "hoge"バケットのバージョニングを有効にする
```
aws s3api put-bucket-versioning --bucket hoge --versioning-configuration Status=Enabled
```

## "hoge"バケットのバージョニング設定を確認
```
aws s3api get-bucket-versioning --bucket hoge
```


# Route 53
## ホストゾーンを確認
```
aws route53 list-hosted-zones
```

## ホストゾーンID"hoge"にあるレコードセット確認
https://qiita.com/ryuseino/items/223743187e3769847231#%E3%83%9B%E3%82%B9%E3%83%88%E3%82%BE%E3%83%BC%E3%83%B3%E3%82%92%E7%A2%BA%E8%AA%8D
このコマンドの結果で取得できるようなホストゾーンIDを使う。先頭は固定で "/hostedzone/" になっているようだ

```
aws route53 list-resource-record-sets --hosted-zone-id /hostedzone/hoge
```

## ホストゾーンID "hoge" にあって、Nameに "hoge"が入っているレコード確認
```
aws route53 list-resource-record-sets --hosted-zone-id /hostedzone/hoge --query "ResourceRecordSets[?contains(Name,'hoge')]"
```
GitHubをコミットまで実際にやってみよう〜実践編 〜

##はじめに

こちらの記事では、アカウント登録後のGitHubで
実際にリモートリポジトリにバージョンを保存するまでの流れを紹介します。

GitHubのアカウント登録方法は別でググっていただければと思います。
Gitの基本理解や、Gitへのコミット方法は[こちら](https://qiita.com/daiki_tadokoro/items/2bf6e9d160598e09dec9)からどうぞ。

##GitHubへ現在のバージョンを反映する

GitHubへリポジトリを反映するためにはいくつかのステップがあります。

1.GitGubにリモートリポジトリを作る
2.ローカルリポジトリにリモートリポジトリを登録
3.リモートリポジトリへプッシュする
4.GitHubのリモートリポジトリを確認する


###1.GitHubにリモートリポジトリを作る

まずは、[GitHub](https://github.com/)からログインをし
画面右上の+ボタンから「New repository」をクリック。
<img width="1268" alt="スクリーンショット 2020-05-21 16.00.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626171/240fa5c8-dec3-e5f1-5e8b-88f2dca4d283.png">

次に、新しく作成するリモートリポジトリの名前を変更します。
「Repository name」に今回は、testと入力して
「Public」に青丸が付いているか確認。（もし付いていなければ「Public」をクリック）
その後、左下の「Create repository」をクリックでリポジトリを作成。
<img width="1276" alt="スクリーンショット 2020-05-21 16.06.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626171/f00f34a9-7e17-85e3-04f7-03c0cd2064f9.png">
これで中身のないリモートリポジトリtestの完成です。


###2.ローカルリポジトリにリモートリポジトリを登録

現在、リモートリポジトリを作ることはできましたが
ローカルリポジトリをのバージョンは反映されていません。
ローカルリポジトリとリモートリポジトリを紐づけるためには
「プッシュ」というコマンドが必要になってきます。

では、早速リモートリポジトリの作成後の画面から解説します。
<img width="1280" alt="スクリーンショット 2020-05-21 16.06.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626171/6f698c20-6cb0-5095-7c5f-336c0c682e4d.png">

...or create a new repository on the command lineと
書かれているものが、これから新しくローカルリポジトリを作成するときのコマンドです。

今回は、すでにローカルリポジトリがある場合、
... or push an existing repository from the command lineを
指定のローカルリポジトリのあるターミナルで入力していきましょう。
（ローカルリポジトリがまだない場合は...or create~のコマンドで作成しましょう。）

```
$ git remote add origin https://github.com/ユーザ名/test.git
```

うまく紐づけができたか確認しましょう。

```
$ git remote -v
```

###3.リモートリポジトリへプッシュする

それでは、ローカルリポジトリと
リモートリポジトリの紐づけができたのでプッシュの説明を行います。

プッシュするコマンドはこちらです。

```
$ git push origin master
```

プッシュにはパスワードと名前の入力が必要です。
GitHubに登録した情報を入力し問題なければEnterを押しましょう。

GitHubはGitと違い、バージョンの管理をWeb上で確認することができます。
https://github.com/ユーザ名/リモートリポジトリ名（test)で
リモートリポジトリにきちんとプッシュされているか確認していきましょう。

Commitsという部分が1Commitsとなっていればプッシュ成功です。
クリックすれば git logのようにコミット履歴の確認も可能です。


##まとめ
Gitのコミットの方法に比べて、ローカルリポジトリにあるバージョンを
リモートリポジトリに反映されるのはそこまで難しくありません。

念の為、一連の流れをおさらいすると下記のようになります。

1.GitGubにリモートリポジトリを作る
2.ローカルリポジトリにリモートリポジトリを登録
3.リモートリポジトリへプッシュする
4.GitHubのリモートリポジトリを確認する

ここまでの内容を理解すればGitHubの超初心者からの卒業です。
わからないことや疑問点等あればぜひコメントよろしくお願いします。
[MC Works 64]GridWorX Viewerで自前DBからデータを引っ張ってくる

MC Works 64でデータを見える化するとき、Historianのデータだけじゃなく、自前DBのデータも引っ張ってきたいときってあるよね。なくはないよね。

早速やってみよう。
自前DBのテーブル構成は以下のような感じ

| Column           |       Data type   |    Primary key     |
|:-----------------|------------------:|:------------------:|
| id             |              bigint |        ✔        |
| A           |            int |              |
| B           |            int|       |
| C           |            int |              |

WorkBenchには以下のように設定。
![workbench.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/50ca8e06-f0d4-32d0-bcdb-af6b2242566c.png)

コマンドは以下。@param_idというパラメータに渡したidのものを検索するだけ、という単純なもの。
![command.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/ab31ee79-53ad-5b27-3148-c0972cbf78bd.png)

GraphWorXの画面は以下のようにしてみた。
検索ボタンを押すと、テキストボックスに入れたidで検索した結果をGridWorXViewerに表示する、という感じ。
![画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/33c70a96-ed99-e4ee-ee36-f9fe9d70908c.png)

テキストボックスの設定は以下。ローカル変数を割り当てている。
![textbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/9661aa85-e82e-da53-0c79-c565ae2a8adc.png)

検索ボタンの設定は以下。検索ボタンを押したときにテキストボックスに割り当てられているローカル変数をグローバルエイリアスに放り込んでいる。
![button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/286827c3-a716-d21a-d128-a66431e3ba47.png)

そしてGridWorXViewerの設定。DBコマンドのパラメータにグローバルエイリアスを設定している。
![gridwork.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/8ac5be1b-8c32-d3fa-8b03-1188badd7210.png)

実行してみた結果が以下。テキストボックスに「2」を入れて、検索ボタンを押してみたら、id=2のデータをDBから取ってきている。
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/2df75fe1-2a96-ac22-ce01-aeec1d77fd83.png)

ポイントは**GridWorXViewerに動的な値を渡すときにはグローバルエイリアスである必要がある**ということ。
ローカル変数であったり、デバイス値であったりは直接パラメータとしてGridWorXViewerに渡せない。
ので、少々面倒だが、グローバルエイリアスに変換してあげよう。

注：もしかしたら違うやり方があるのかもしれないし、今後渡せるようになるかもしれない）

[環境]
MC Works64 10.95.200.00
SQL Server 2017 Express
Azure Virtual Machinesのクォータ (コア数上限)をAzure CLIで確認する方法

# はじめに
Azureのサブスクリプションにはクォータという様々なリソースの制限があります（最初からVMを1万個立てよう！とかはできない)。
[Azure サブスクリプションとサービスの制限、クォータ、制約](https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/management/azure-subscription-service-limits)

その制限の確認方法 (どのVMシリーズが何CPU分使えるか等)を確認する方法を調べると、よくPowerShellコマンドが出てくるのですが、Azure CLIを使った確認がしたかったので方法をメモします。

# PowerShellでの確認方法

```powershell
Get-AzureRmVMUsage -Location "Japan East"
```

# Azure CLIでの確認方法

```bash
$ az vm list-usage --location japaneast  --output table
```
※locationは`Japan East`でも`japaneast` と書いても大丈夫です。

# 結果
Azure VMのクォータが確認できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57724/9b51176e-89b2-402d-e080-4f4a5ecbd26e.png)

# Next steps
制限の引き上げ方法については以下を参考に。
[Azure Virtual Machinesのクォータ (コア数上限) の引き上げ](https://qiita.com/satonaoki/items/a1d2545ca78adf540f8e)
open関数

#open関数とは
open関数は、フィいるの新規作成や保存、書き込みなどのファイル操作ができます。
##open関数で用いられる基本的なオプション
open関数は、以下のような形式で使えます。

```
open(ファイル名、オプション、文字エンコード)
```
・文字エンコードとは、ファイルに書き込む際にコンピュータ上で文字や記号を扱う際に割り振られている番号のことでUTF-8,Shift-JISなどがあります。
・オプションとは、ファイルをどのように開くのか、どのように書き込むのかなどを指定します。
代表的なオプションには、以下のものがあります。

```
1. 'w+':書き込み用で開きます。ファイル名に設定したものがすでに存在している場合はそのファイルに上書きします。
2. 'r+':読み込み用で開きます。
3. 'x':新規ファイルの書き込みとして使います。既存に存在している場合は末行に追加していく。
4. 'a':書き込む用で開きます。既存に存在している場合は末行に追加していく。
5. 'b':バイナリーモードで開きます。'rb'や'wb'などの使い方をする
6. 't':テキストモードで開きます。'rt'や'wt'などの使い方をする。デフォルトではtとなる。
```
##実用例
open関数を使ってファイル操作をしてみる

###'w'の場合（ファイル作成＆書き込み、既存の場合は上書き保存）

```
w = open('test.txt', 'w')
w.write('1:テストです\n')
w.close()
```
**結果**
test.txtファイルが作成され、「１：テストです」と書き込ませれている。
また既存のファイルだった場合は、上書きされる

###'a'の場合（末行に追記する）

```
w = open('test.txt', 'a')
w.write('3:テストです\n')
w.close()
```
**結果**
test.txtの末行に「３：テストです」が追加される

###'r'の場合（ファイルを読み取る）

```
r = open('test.txt', 'r')
print(r.read())
r.close()
```
**結果**
以下のようにtest.txtに書かれている内容が表示される。

```
1:テストです
```
#テキストファイルの読み込みメソッド
・read() - ファイルを全て読み込み、その文字列データに対して処理を行う
・readlines() - ファイルを全て読み込み、１行毎に処理を行う
・readline() - 1行毎に読み込み、その処理を繰り返す

###実用例

```sample.txt
alpha
bravo
charlie
```

```
# readでサイズ指定あり
with open('sample.txt') as f:
    contents = f.read(10)
    print(contents)

print('---')
    
# readでサイズ指定なし
with open('sample.txt') as f:
    contents = f.read()
    print(contents)

print('---')

# readlineで1行だけ読み込み
with open('sample.txt') as f:
    line = f.readline()
    print(line)

print('---')

# readlinesで一括読み込み
with open('sample.txt') as f:
    lines = f.readlines()
    print(lines)
```

**結果**

```
alpha
brav
—
alpha
bravo
charlie

—
alpha

—
[‘alpha\n’, ‘bravo\n’, ‘charlie\n’]
```
1. １つ目はread(サイズ指定あり（改行いれて文字１０個まで）のケースです。
2. ２つ目はread(サイズ指定なし）のケースです。ファイルの中身を全てを読み込みました。
3. ３つ目はreadlineのケースです。１行だけ読み込みました。
4. ４つ目はreadlinesのケースです。ファイルの中身全て読み込み、結果は文字列のリストになりました。

#バイナリやテキストについて
パソコンで扱うファイルは、テキストファイルとバイナリファイルの２種類しかない。

##テキストファイルとは
文字を表すデータは、文字コード表に乗っているデータだけが書かれているファイル。

##バイナリファイルとは
テキストファイル以外のもの全てを指します。画像ファイルや音楽ファイル、動画ファイルなどです。簡単にいうと**メモ帳**で開けないファイルは全てバイナリファイルです。
binaryは「２進数」という意味です。文字コードのルールを完全無視したデータが書かれています。

参照
https://techacademy.jp/magazine/24509
https://www.sejuku.net/blog/60333
https://techacademy.jp/magazine/20626
https://quartet-communications.com/info/topics/3182
WiMAXのW05などのポケットWi-Fiで5GHzでAmazon Echo Dotにつながらないとき

# 原因
日本仕様のEcho Dotが5GHzのバンドW52にしか対応していないため。

```
Amazon製品の5GHz帯Wi-Fiは「W52」のみに対応
当サイトが Amazon.co.jp へ確認したところ、5GHz帯Wi-Fiに対応した Amazon 製の日本向け製品については、全て「W52」という規格にのみ対応しているとの回答が得られました。

「W52」というのは5GHz帯Wi-Fiの規格名で、36, 40, 44, 48ch の4つチャネルの周波数帯だけを利用できます。

5GHz帯の Wi-Fi 規格には、「W52」の他にも「W53」「W56」などが定義されていますが、後述のとおり「W52」以外は日本の気象レーダーと干渉する周波数帯を利用しているため、国内法によって複雑な制御が義務付けられています。

Amazon はその複雑な仕様を嫌ってか、少なくとも日本向け製品については「W52」規格にのみ対応させるポリシーを通しているようです。

このポリシーは、Fire HD タブレット、Fire TV、Fire TV Stick、Amazon Echo、Amazon Echo Spot など、機種を問わず一貫しており、Amazon 正規の日本向け製品であれば、必ず「W52」にのみ対応となっています。
```
https://www.teradas.net/archives/26367/

# 対処
一度2.4GHzに戻し、ACアダプタに繋ぎ5GHzに設定し、屋内を選ぶ
https://faq.uqwimax.jp/faq/show/5581?site_domain=wimax
【Swift】@testable import no such module “xxx” というエラーが出る

Xcodeでユニットテストを実行しようとしたらタイトルのエラーが出てしまった。
そんなモジュールは存在しないよと怒られてます。

### :tools: TestのTargetの「Host Application」が設定されていない
<img width="1440" alt="スクリーンショット 2020-05-21 16.11.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/623f13ba-e83c-0df8-d8ad-e8454ffd4bc8.png">

上記の、タブ画面でHostApplicationが「None」になっていないか確かめる。
もしなっていたたら現在自分が開発中のアプリをターゲットにしてあげる。


### :computer: プロジェクト名などを途中で変更した場合
テストファイル内の

```Swift
@testable import test
```

上記でいう「test」の部分は自動で更新されない。。
ので自分で修正してあげる必要がある。
WordPressのプラグイン画面などで「予期しないエラーが発生しました。」というエラーが出る

## 事象
WordPressのプラグイン追加画面で以下のようなエラーが出る
「予期しないエラーが発生しました。WordPress.org かこのサーバーの設定に何か問題があるかもしれません。問題が続くようであれば、[サポートフォーラム](https://ja.wordpress.org/support/forums/)を参照してみてください。」
<img width="1275" alt="スクリーンショット 2020-05-21 16.12.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42587/e7231fde-1ee0-b671-5dee-bf64e71b2570.png">

## 原因
WordPress.orgが落ちているとかではない場合、サーバが外部からのアクセスを拒否しています。

## 解決方法
以下のコマンドを叩く

```
sudo setsebool -P httpd_can_network_connect=1
```

## 解決
こうなれば解決。
<img width="1279" alt="スクリーンショット 2020-05-21 16.15.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42587/79dbcaf3-2f4a-940f-5c56-937e34c001dc.png">
AndroidStudioでAndroid開発を学習

#はじめに
##対象としている人、環境
**Windows10**で**AndroidStudio3.6.2**を使って開発言語**Kotlin**を使ったアプリ開発を学習したいという人向けに書いています。
実際には2020年4月から開発を開始した筆者が、その日学習したことを忘れないようにするためのメモのように記載しています。

パソコン用、マイコン用など他の開発言語をある程度理解している必要があります。

##ここまで進めていることが前提
Androidアプリを開発するためのソフト**AndroidStudio**のインストールが必要です。現時点でのバージョンは3.6.2になります。

AndroidStudioは日本語化を済ませています。

対象となるAndroidデバイスは仮想Androidで
**Pixel 2 API26 1080x1920 420dpi API 26 Android8.0(GooglePlay) cou x86 14G**
という設定で登録しています。

仮想Androidデバイス上で環境を日本語の設定、入力も日本語の設定のほか、タイムゾーンも日本を選んでおきます。

##AndroidStudioで新規プロジェクトの作成
AndroidStudioは下記の操作を終わらせた状態からの説明になります。

新規プロジェクトを選択

![SelectProjectTemplate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637460/62bd156b-bdab-e166-fa50-fba2d567e5d0.png)

空のアクティビティを選択して次へ

![ProjectExample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637460/0df65cd9-e54f-ac0d-48b6-87ed129fb80a.png)

アプリの名前は都度適切に付けて下さい。
保存ロケーションはデフォルトから変更しています。
画面ではDドライブに専用フォルダを使用してそのフォルダ内にファイルが作成されるようにしています。
言語は**Kotlin**を使用しています。

![ProjectInit_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637460/4f0db627-2203-38d9-7aa0-512aa3880235.png)

開発画面が表示されますが、裏で色々処理が行われていますので、まだ待ちます。
落ち着くと左側のツリー表示が

![ProjectInit_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637460/c9fa7cb4-848d-d5e7-0516-7431b7ceeca0.png)

このようになります。
まずはここまで出来るようになっておく必要があります。

これ以降の説明ではすべてここまで終わっていることが前提となっています。
2回目のKotlin contextの引数

初めての人用は割と見つかるけど、そのあと何したら良いのか分からないので、その段階にいる私が詰まったところをメモっていく
間違いなくこれは正しい内容ではない、最低限の内容

## 本題

Contextの引数に何を入れたら動くのか分からない
→this入れたら動いた


```kotlin:MainActivity.kt
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        sampleFunction(this)
    }

　　fun sampleFunction(context: Context?) {
　　　　// 中身
　　}

}

```
UpNext2 開発記録#0 V2開発目標を立ててみる

[第3回東京公共交通オープンデータチャレンジで最優秀賞][1]を頂いたUpNextの、メジャーバージョンアップにそろそろ取り掛かってみます。せっかくなので、ソース公開だけでなく、試行錯誤含めた開発過程を記録公開していくことに、チャレンジします。今回は第ゼロ回です。

#1. UpNextとは

UpNextは、現在の位置情報をもとに、交通オープンデータと照合して、最寄りの駅や今乗っている電車の時刻表を自動表示させるスマホアプリです。Flutterで作られています。操作を一切しなくても最適なナビ情報を表示できるのが、独自な部分です。位置や速度や時刻をもとに、歩いているのか、電車に乗っているのか、さらにはどの電車に乗っているのかを自動判別することで、これを実現しています。

![upnext_feature.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156600/8248f6c1-fef9-7fb4-cd0d-a21f1c100464.png)

[Github][2]にソースが公開されています。

[1]:https://tokyochallenge.odpt.org/2019/award/01.html#b
[2]:https://github.com/toast-uz/UpNext

#2. V2開発目標

V2作成にあたって、以下のような開発目標を立ててみました。

##A. 旧版アーキで限界だった性能や精度の改善

旧版で不満だったのは、主に2点です。1つ目は、都心などで周辺に駅が多い場合に、交通オープンデータのAPIアクセスが多くなってフリーズに近い状態になってしまうことです。2つ目は、駅の位置情報と実際の駅ホームがかなり離れている場合が多く（特に東京駅京葉線は500m程度離れています）、駅判定の精度が高められないことです。

APIアクセスの件は、APIアクセスのキャッシュや先読みにより軽減はできますが、限界を感じていました。またAPIアクセスを前提としていると、嬉しいことにアプリ利用者が増えた際に、オープンデータAPIのセンター側にインパクトが大きくなります。よって、V2では、事前にデータダンプAPIを使って静的データは取得しておき、現在の運行情報などリアルタイム情報のみ動的に取得することにします。また、これにより、一部鉄道の電車時刻表情報など提供されていない情報について、旧版では動的に計算生成していたものを、事前生成しておくことが可能になり、性能改善も期待されます。

駅の位置情報の件は、交通オープンデータだけでは限界があります。そのため、交通オープンデータのサイトで紹介されていた他の機関のオープンデータを探索し、国交省のデータか使えそう、と目星をつけました。

これらの事前のデータ収集と前処理をPythonで記述し、得られたデータをもとにしたV2アプリをFlutterで記述することにします。

項 | 項目 | 備考
---|---|---
A1|静的データの事前取得|路線や時刻表といった数か月有効な静的データについて、都度必要な分を取得していたのを、事前一括取得してアプリに最初から保持させる。
A2|国交省の鉄道位置データの活用|国交省で提供されている駅位置や路線位置データを活用して、交通オープンデータと掛け合わせる。

##B. 旧版で対応しきれなかった積み残し対応

性能や精度の改善に手間をとられて、対応しきれなかった点について、対応することを目標にします。

項 | 項目 | 備考
---|---|---
B1|UIの改善|Flutterの基本のリスト表示だけを使っていたが、もっとカラフルに鉄道路線図っぽく表示させる。できれば地図表示も行う。
B2|多言語対応|日本語以外にも対応させる。
B3|iOS対応|Androidだけの対応であったが、iOSにも対応させる。Flutter利用のため技術的課題は少ない。Appleの審査を通す手間と年貢支払いだけの問題である。


##C. 内部的な開発スタイルの刷新

その他、内部的には以下のような、開発スタイルの刷新を行います。ちなみに、C1/C2は、すでに準備ができ、GitHubと連携してVSCodeでコミット〜PUSHができる状態になりました。

項 | 項目 | 備考
---|---|---
C1|GitHubによる版数管理|従来は版数管理をしていなかった。今回は開発過程を記録公開するため、GitHubを利用する。なおV1のGitHub公開は開発完了後にファイルコピーをしただけである。
C2|VSCodeの利用|従来はFlutter/Dartだけで作っておりAndroidStudioを利用。今回は前処理にPythonも使う予定であり、よい機会なのでVSCodeで開発する。
C3|テストの記述|個人開発なのでテストは書いていない。しかしUpNextにおいて、ある程度の規模の開発となる中で複雑なバグを踏んだ時、テストの必要性は痛感していた。勉強を兼ねて、ちゃんとテストを書くことにする。

#3. 今後の展開

今後、開発が進捗した段階で、開発記録を投稿していきます。お楽しみにしてください。
Azure Synapse Analytics Workspaceがプレビューになったので、勉強しつつワークスペース作成を行ってみる

# はじめに
Synapse Analytics Workspacesがパブリックプレビューされています！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57724/b2cb80f1-c3c1-5308-8e43-aabee261d173.png)

本記事は自分用のまとめとして、勉強しながらSynapse Analyticsの使い始めをメモしたものです。
[Azure Synapse Analyticsの公式日本語ドキュメント](https://docs.microsoft.com/ja-jp/azure/synapse-analytics/sql-data-warehouse/)

# Azure Synapse Analytics (ワークスペース プレビュー)でのワークスペース作成
ひとまず以下のようにしてワークスペースを作ってみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57724/678aae6b-f734-cd53-9e15-28826ea9b9b4.png)

## Azure Data Lake Storage Gen2とは
- Azure Data Lake Storage Gen2 は、**ビッグデータ分析専用の機能セット**であり、Azure Blob Storage に基づいて構築されています。 
- Data Lake Storage Gen2 は、Azure Blob ストレージと Azure Data Lake Storage Gen1 という、既存の 2 つのストレージ サービスの機能を集約したものです。 
    - Data Lake Storage Gen2 の基礎部分は、BLOB ストレージに階層型名前空間を追加したもの

参考：https://docs.microsoft.com/ja-jp/azure/storage/blobs/data-lake-storage-introduction

要するに、サイズ無制限であらゆる種類のデータを保存できたAzure Data Lake Store Gen1にBlob Storageの機能が加わり、安価に使えるようになったもの、という理解です。


### 階層型名前空間って..？
- オブジェクトストレージの場合
    - / (スラッシュ)は**疑似的に**ディレクトリを表現
    - ディレクトリ名を変更する場合、すべてのファイルを操作する必要があり、ファイル数だけオーバーヘッドが発生する

- **階層型名前空間**
    - / (スラッシュ)はディレクトリを表現
    - ファイル数に依存することなく、最低限の操作でディレクトリ操作が可能

参考：https://eventmarketing.blob.core.windows.net/decode2019-after/decode19_PDF_DP04.pdf

# Next Steps
[Synapse Studio](https://docs.microsoft.com/ja-jp/azure/synapse-analytics/quickstart-synapse-studio#launch-synapse-studio)を使用する

## その他参考
https://qiita.com/ume67026265/items/85a629fc9827e873c34b
Glueの使い方的な㊺(Python shellでPythonから他の.pyを読み込む)

# 概要

GlueのPython Shellのコードの中から、別のPythonコードを読み込み実行する

## 手順

### Glueのジョブ作成

Glueの画面で"ジョブ"->[ジョブの追加]をクリックし、以下を入力します。

* 名前：se2_job28
* ロール：(適切な任意のもの)
* Type：Python shell

<img width="623" alt="スクリーンショット 0002-05-21 14.15.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27932/93673c57-bc50-b3f4-212c-dbad41aa41b8.png">

引き続き以下を入力します。以下の"参照されるファイルパス"に内部で読み込むファイル名をS3パスと合わせて記入します。

* 参照されるファイルパス：s3://test-glue00/se2/script/circle.py(任意のファイルパスとファイル名)

この画面で[次へ]をクリックし、次の画面で[ジョブを保存してスクリプトを編集する]をクリックします。

<img width="585" alt="スクリーンショット 0002-05-21 14.19.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27932/5df6296e-126b-3cbe-fcc7-378babb8432f.png">

呼び出すコード
S3のs3://test-glue00/se2/script/に配置しておく。

```python:circle.py
def calc_area(r):
 return r ** 2 * 3.14

print('hello circle.py')
```

ジョブのコード

```python:se2_job28
import circle

# 半径3の円の面積
circle = circle.calc_area(3)
print(circle)

print('hello se2_job28')
```

ジョブのコードを貼り付け、ジョブを実行します。

![スクリーンショット 0002-05-21 14.33.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27932/22ba6a60-6a1f-db8c-a8f9-49c6fc341343.png)

### 実行後のログ

呼び出すコードとGlueジョブコードのprintの出力結果が出ている

![スクリーンショット 0002-05-21 14.35.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27932/65f9cfe2-340e-3b54-e58c-9963588416b5.png)

## こちらも是非

Glueの使い方まとめ
https://qiita.com/pioho07/items/32f76a16cbf49f9f712f
python 通常使うプリンタ名の取得方法がわからない。

PYTHONで「通常使うプリンタ名」(デフォルトプリンタ)の取得方法がわからない。

下記のプログラムは「通常使うプリンタ」を「違うプリンタ」へ変更のプログラムです。→現在の「通常使うプリンタ名」を取得したい！

「通常使うプリンタ名」の取得方法について、ご教授よろしくお願いいたします。

下記のプログラムは「通常使うプリンタ」を「"Microsoft Print to PDF"」のプリンタへ変更するプログラム。(pythonからコマンドプロントを叩いてます)

```python:プリンタ変更プログラム.py
import subprocess
cmd = 'rundll32.exe printui.dll,PrintUIEntry /y /n "Microsoft Print to PDF"'
returncode = subprocess.call(cmd)
```

VBSで「通常使うプリンタ名の取得」のコードがネットにあり(URL：https://ekafp7.blogspot.com/2016/12/blog-post.html)
同様に下記のようにPYTHONでアレンジして作成したが、4行目でエラーがでる。
**objClassSet = objService.ExecQuery("Select * From Win32_Printer")**
おそらく引数がだめなのかよくわかりませんがエラーがでます。


```python:通常で使うプリンタ取得プログラム.py
import win32com.client
objLocator = win32com.client.Dispatch("WbemScripting.SWbemLocator")
objService = objLocator.ConnectServer
objClassSet = objService.ExecQuery("Select * From Win32_Printer")

for objClass in objClassSet:
    if objClass.Default:
        strName = objClass.Caption
 print(strName)
```

また、プリンタ一覧は下記のプログラムででましたが、「通常使うプリンタ名」までは出てこない。。

```python:プリンタ一覧プログラム.py
import win32com.client
o = win32com.client.Dispatch("WScript.Network")
prlist = o.EnumPrinterConnections()
for pr in prlist:
    print(pr)
```
PyCharmをインストールしたが、`control + e`などのショートカットキーが機能しないときの対処法

# 経緯
JetBrains製品をよく使うのですが、新しくPyCharmをインストールした際に、`control + e`や`control + a`などのショートカットが機能しないという状況に遭遇してちょっと困ったので、その解決方法をメモ。

ちなみに、この時、`command + d`などのコマンドは機能した。

# 環境
macOS Catalina 10.15.14
PyCharm 2020.1.1 (Community Edition)

# 解決方法

１. `command + ,`などで `Preferences`を開く。
2. `Keymap`を選択。 
3. 上の方にあるドロップダウン式のリストからmacOSを選択。
4. OKをクリック。
<img width="993" alt="スクリーンショット 2020-05-21 15.39.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561730/c09d3e1b-a626-a610-3921-15f3a21f015d.png">
Visual Studio Code で GAS のコードを編集する環境を作ってみた（Windowsだよ）

#はじめに
なにやら世の中には「VSCode」という素晴らしいものがあることを今更知った。orz
なんだか、TypeScriptで書けて、JavaScriptに変換までしてくれるらしいのですが！？
GASでこういう↓ものを作成したので、だったら「VSCode」で書けないのかしらん？
[スプレッドシートをDB代わりにGASのWebアプリを作成しデータ更新させてみた。Vue版 その１～～](https://qiita.com/yamamow/items/6be4fa99cd3cb45ecffa)
ということで調べ、まとめてみました。
「間違ってるぞ。」「動かないぞ。」というときは優しくご指摘くださいm(\_'\_)m

#参考にさせていただいたサイト
・[【Google Apps Script】claspを使ってローカル環境で開発する](https://coxcox.hatenablog.com/entry/2019/04/05/222532)
　　こちら↑を見ればできます。

#わからないこと
1. Googleのアカウントを複数持っていた場合の挙動


#インストールと設定手順
|No|対象|設定方法|
|:---:|:---:|:---|
|1|VSCode|[こちら](https://code.visualstudio.com/)からWindows用インストーラをダウンロードしてexeを起動する。インストール後、VSCodeは閉じておく（念のため）|
|2|Node.js|[こちら](https://nodejs.org/en/download/)からWindows Installerを選択してダウンロード。msiファイルを実行する。|
|3|clasp|コマンドプロンプトを管理者で起動する。<br> 「npm install @google/clasp -g」を実行する。|
|4|GoogleAPI|Googleに任意のアカウントでログインしておきます。<br>そして、[こちら](https://script.google.com/home/usersettings)でAPIをオンに変更します。|

これで下準備は完了です。

#まっさらでVSCodeから始める場合
※スプレッドシートの作成から・・・

|No|やること|
|:---:|:---|
|1|ローカルパソコンでソースなどを保存する用のフォルダを作成しておく。<br>フォルダの名称でスプレッドシートのファイル名が作成されるようなので、ちょっと注意。|
|2|VSCodeを起動する。|
|3|VSCode内で、ファイル＞フォルダを開く　で上記のフォルダを開く。|
|4|ターミナル＞ターミナルを開く　でターミナルを表示する。|
|5|ターミナルに、「clasp login」と入力しエンター。|
|6|ブラウザが開きアカウント選択⇒スマホに連絡が来たので許可などする。|
|7|ブラウザを閉じてVSCodeに戻る|
|8|ターミナルに「clasp create --rootDir ./src」と入力し、エンター。|
|9|上下キーでsheetsを選択⇒エンター。|
|10|すると、vsCodeで選択していたフォルダの名前でスプレッドシートのファイルが作成される。|
|11|左側の階層で「src」で右クリックをして「New File」を選択する。|
|12|ファイル名は、なんでもいいが、拡張子は「.ts」にする。|
|13|作成したファイルにfunction test() {<br>console.log('test')<br>}<br>と書いてみる。|
|14|ターミナルに「clasp push」と入力しエンター。<br>するとGAS側に反映される。|
|15|ターミナルに「clasp open」と入力しエンター。<br>するとブラウザが起動しスクリプトのエディタ画面が表示され、上記のソースが確認できる。|
|16|確認できない場合は、F5を押すなりしてリフレッシュさせると更新が確認できるはず。|
※「.ts」が「.gs」になったりと臨機応変にやってくれているようです。

#GASは存在していてVSCodeでこれから書いてみようとする場合

|No|やること|
|:---:|:---|
|1|ローカルパソコンでソースなどを保存する用のフォルダを作成しておく。|
|2|VSCodeを起動する。|
|3|VSCode内で、ファイル＞フォルダを開く　で上記のフォルダを開く。|
|4|ターミナル＞ターミナルを開く　でターミナルを表示する。|
|5|ブラウザを開き、Googleにログインする。|
|6|GASのあるスプレッドシートを開く。|
|7|ファイル＞プロジェクトのプロパティ　から、「スクリプトID」をメモる（コピる）|
|8|VSCodeに戻る。|
|9|ターミナルに「clasp clone xxxxxxxxxxxxxxx」と入力しエンター。<br>「xxxxxxxx」は前の「スクリプトID」を入力する。|
|10|すると、ファイル類が出来上がる。|
|11|※しかし、新規に作成したような「src」フォルダは作成されない。|

#そのあとの使い方（たぶん共通）
|やること|
|:---|
|その後は、Loginしなくても、スクリプトIDは入れなくても以降の処理はできる。|
|ターミナルに「clasp pull」と入力しエンターでGAS側から引っ張ってこれる。|
|ブラウザ側でのファイルのrenameは、vscodeでpullすると新しいファイルとして認識される模様。|
|vscode側でのファイルのrename後に、vscodeでpushするとファイル名が変わったように認識される模様。（※delete⇒insertなのかぁ）|
|ターミナルで「npm init --y」<br>「npm i @types/google-apps-script --save-dev」を実行しておくと便利らしい。|

#拡張機能を入れると便利
・[VSCode に必ず入れておきたい拡張機能](https://qiita.com/ucan-lab/items/e85931bf8276da43cc97)
　　簡単に拡張できてすごく便利ですね

入れてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207568/d39f8bfc-cdfb-2142-acc2-b9a38a130b36.png)

#感想
プッシュする際に毎回「clasp push」と打つのが面倒に感じますね。
十字キーを使えばいいんでしょうが、なんかそれも何度もだと面倒に感じて・・・
ボタンがあったらうれしいのになぁ。

でも、見やすくなっていい感じ。

でわでわ。
ＩＤ重複例（雇用調整助成金の記事を見て）

# はじめに

https://www3.nhk.or.jp/news/html/20200520/k10012437361000.html

雇用調整助成金オンライン申請に関する記事を見て、
じゃあ どんなときにＩＤが重複するのかを、私の経験を元にまとめました。

# 最大値＋１

[果物マスタ]

| ＩＤ    | 果物   |
|:------:|:-------------|
| 1       | りんご       |
| 2       | みかん       |
| 3       | いちご       |
|         |             |
| :       | :           |
|         |             |
| **4**       | バナナ ( ← 同時に登録 ) |
| **4**       | ぶどう ( ← 同時に登録 ) |

この場合、最大値３＋１、すなわち「４」が次のＩＤです。

しかし複数のプロセスが**「同時」**に最大値を取得すると、
両プロセスともに「４」という重複ＩＤが割り振られてしまいます。
（一方が４、他方が５とはならない。）

コーディングにもよりますが、重複ＩＤだけ割り振られて、
ぶどうの insert エラーをシステムが適切に処理しなかった場合、
ぶどうを登録したユーザに対して
**「4:バナナ が正常に登録されました」**
と、身に覚えのないメッセージが表示されるでしょう。

※「最大値＋１」が悪いわけではなくて、
設計やコーディングが甘いことが問題です。

# ランダム値

[果物マスタ]

| ＩＤ    | 果物   |
|:------:|:-------------|
| 13245  | りんご       |
| 97860  | みかん       |
| 82073  | いちご       |
|        |             |
| :      | :           |
|        |             |
| **56718**  | バナナ ( ← ランダム値が重複 ) |
| **56718**  | ぶどう ( ← ランダム値が重複 ) |

[random_int()](https://www.php.net/manual/ja/function.random-int) などで得られるランダム値をＩＤにする設計も、
たまに見かけます。これも重複ＩＤが発生し得ます。

マスタを同時刻に登録しようとして、偶然、同じランダム値が
生成される可能性は、ゼロではありません。

ＩＤの頭に「年月日時分秒」を付けても同じです。
同時刻に同じランダム値が生成されれば、意味がありません。

# ＩＤ使いまわし ＋ 未削除データ

前述の「最大値＋１」の場合ですが、
「4:バナナ」を削除したら、次回 登録時、
再度「４」が割り振られてしまいます。

[果物マスタ(親)]

| ＩＤ    | 果物   |
|:------:|:-------------|
| 1       | りんご       |
| 2       | みかん       |
| 3       | いちご       |
| **4**       | ぶどう ( ←「4:バナナ」を削除後 登録 ) |

[生産地マスタ(子)]

| ＩＤ    | 果物   |
|:------:|:-------------|
| 1       | 青森       |
| 2       | 和歌山       |
| 3       | 栃木       |
| **4**       | フィリピン ( ← 未削除データのため「山梨」を登録できない！) |

このとき共通ＩＤの別テーブルに、
例えば果物マスタの子テーブル「生産地マスタ」に、
バナナの生産地「4:フィリピン」が うっかり消されずに残っていたら、
ぶどうの生産地が登録できないかもしれません。

# まとめ？

主キー、排他制御、トランザクション、AUTO_INCREMENT、シーケンス等を
システムに合わせて設計して、重複しないＩＤ生成を心がけましょう。
macOS でIPアドレスからMACアドレスを知る 

ESXiを稼働させているNUCのMACアドレスを調べようと思ったら、macOSではデフォルトでarpingがなかったのでインストールした（Catalinaで確認）。

```
brew install arping
```

`/usr/local/Cellar/arping/2.21_1/sbin/arping`にインストールされるので、パスの通った場所にシンボリックリンクを張る。

```
ln -s /usr/local/Cellar/arping/2.21_1/sbin/arping /usr/local/bin/arping
```

root権限が必要なようなので、sudo付けて実行

```
sudo arpping <IPアドレス>
```
Nuxt.jsをVue.jsに解体するTips(Layout編)

# 背景

- Nuxt.jsで動いているSPAアプリをVue.jsに解体してほしい的な話があり、部分部分をTipsとして投稿します。
- APIはLaravel(6.x)です。なおLaravelとNuxt.jsは同一リポジトリです(なぜ)
- Nuxt.jsは2.9。Vueは2.6.10
- 今回はLayout編です。

## Layoutを分けたい

```nuxt/pages/~~.vue
<script>
export default {
  layout: 'noauth',
```

- 認証に見れるとLayoutと非認証時に見れるLayoutを分けた時があります。そういった時Nuxt.jsは上記のように簡単にできますが、Vue.jsだとコツが必要です。

## Layoutをそれぞれ作成する

### 認証用のLayout

```resources/js/layouts/default.vue
<template>
  <div>default
    <router-view />
  </div>
</template>
```

### 非認証時に見れるレイアウト

```resources/js/layouts/noauth.vue
<template>
  <div>noauth
    <router-view />
  </div>
</template>
```

## resources/js/router.jsの編集

### Routerでmeta layoutを定義する

```resources/js/router.js
import Vue from 'vue'
import Router from 'vue-router'
import Index from '~/pages/index'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Index',
      meta: { layout: 'default' },
      component: Index,
    },
    {
      path: '/noauth',
      name: 'NoAuth',
      meta: { layout: 'noauth' },
      component: Index,
    },
  ],
});
```

## resources/js/App.vueの編集

### メタフィールドをみてLayoutを変更

```resources/js/App.vue
<template>
  <div id="app">
    <component v-bind:is="layout" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultLayout: "default"
    };
  },
  computed: {
    layout() {
      return (this.$route.meta.layout || this.defaultLayout) + "-layout";
    }
  }
};
</script>

```

### Layout用のコンポーネントを定義

```resources/js/app.js
import Vue from "vue";
import router from '~/router'
import App from '~/App.vue'

import DefaultLayout from '~/layouts/default'
import NoAuthLayout from '~/layouts/noauth'

Vue.component('default-layout', DefaultLayout)
Vue.component('noauth-layout', NoAuthLayout)

new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')
```

## 参考

- [Vueでレイアウトを変更する](https://qiita.com/whoshino/items/22426bd18b5ac7e192b0)

## 関連リンク

- [Nuxt.jsをVue.jsに解体するTips(JavaScriptコンパイル編)](https://qiita.com/ProjectEuropa/items/824eb8e0902ee8d93178)
centos-sclo-rhのpythonでpoetry-virtualenv環境構築〜注意点

# 経緯
vaexを使おうとして、OSデフォルトのPython2.7.5ではバグ？により使えず、
Python2.7.17をインストールしてプロジェクトを続行をしようとしたら軽くハマったのでメモ。

# 環境
CentOS 7.5.1804
Python2.7.17
Poetry 1.0.5
tcsh

# インストール
pyenv等他のインストール方法も試したけど、他のマシンに環境構築するのも一番お手軽そうなsclo pythonを使うことにした。

```
sudo yum -y install centos-release-scl-rh
sudo yum -y install python27
```

本来ならここで、`/opt/rh/python27/enable`がインストールされるはずだが、何故かされない時がある。
その場合手書きするか、python36などをインストールしてenableをコピーして改変するか。
enableはbashで書かれているので、tcshに書き直す。

```sh
vim /opt/rh/python27/enable
```

```sh
#!/usr/bin/env tcsh

if ($?PATH) then
  setenv PATH /opt/rh/python27/root/usr/bin:${PATH}
else
  setenv PATH /opt/rh/python27/root/usr/bin
endif
if ($?LD_LIBRARY_PATH) then
  setenv LD_LIBRARY_PATH /opt/rh/python27/root/usr/lib64:${LD_LIBRARY_PATH}
else
  setenv LD_LIBRARY_PATH /opt/rh/python27/root/usr/lib64
endif

if ($?MANPATH) then
  setenv MANPATH /opt/rh/python27/root/usr/share/man:${MANPATH}
else
  setenv MANPATH /opt/rh/python27/root/usr/share/man
endif

if ($?PKG_CONFIG_PATH) then
  setenv PKG_CONFIG_PATH /opt/rh/python27/root/usr/lib64/pkgconfig:${PKG_CONFIG_PATH}
else
  setenv PKG_CONFIG_PATH /opt/rh/python27/root/usr/lib64/pkgconfig
endif

if ($?XDG_DATA_DIRS) then
  setenv XDG_DATA_DIRS /opt/rh/python27/root/usr/share:${XDG_DATA_DIRS}
else
  setenv XDG_DATA_DIRS /opt/rh/python27/root/usr/share
endif
```

# 有効化
tcshなので、他のシェルのように`scl enable python27 tcsh`は使えないので、直接enableをsourceし有効化。

```sh
$ python -V
Python 2.7.5

$ source /opt/rh/python27/enable
$ python -V
Python 2.7.17
```
ちゃんとバージョン変わっていればOK.

# poetry環境作成
p
**enableをsourceしたシェルで**`poetry init`
すでにOS Pythonでvirtualenvを作っていたら、一度環境を削除し、`poetry install`
これでSCLO Pythonで環境が作成される。

# 開発環境
ここまででターミナルから使う文には問題ないが、作成した環境のPythonをPyCharmから使おうとするとエラーが出て上手く行かなかった。
(エラーログ消失)

原因は、enableで設定した環境変数が、PyCharmからだと設定されていないからだった。
あまり綺麗ではないが、python2.7をシェルスクリプトにしてしまい、python実行時にenableをsourceすれば解決出来た。

```
cd `poetry env info --path`/bin
mv python2.7 python2.7_original

vim python2.7
```

```python2.7
#!/usr/bin/env tcsh

source /opt/rh/python27/enable
`dirname $0`/python2.7_original $*
```
Red Hat 8.x Updateにより(Gnome)Terminal起動不可時の対処

前提：

Red Hat 8.xを導入しWindowsシステムを使用するためにgroupinstallにて"Server with GUI"にて導入。
しかし、OSのUpdateをした後、Terminalを起動しようとすると、25秒程度待たされた挙句に起動しない。

事前確認：

 /etc/environmentの中身を確認（おそらく空白）

対処：

/etc/environmentに以下を記載

LANG=en_US.utf-8
LC_ALL=en_US.utf-8

※ファイルがない場合は作成
※ja_JP.utf-8でもよい

事後確認：

Widnowシステムを起動しTerminalを起動
[UNIX初心者]必須コマンド

超初心者向け（自分）です


| コマンド        |    意味    |
|:-----------------|:------------------:|
| pwd              | 現在の作業ディレクトリの絶対パスを表示   |
| cd            | 作業ディレクトリを変更     |
| ls              |ディレクトリの内容をリスト表示|
| cp                |ファイルをコピー|
| mv              |ファイルの移動およびリネーム|
| rm           |ファイルを削除|
| mkdir           |ディレクトリを作成|
| cat           |ファイルの内容を結合し、表示|
|  ssh           |リモートマシンにSSHでログインし、リモートマシン上でコマンドを実行|
| exit           |シェルを終了|
Oracleいろいろ

Docker で Oracle を軽く確認したい場合。
11g であれば、以下ので成功した。[詳細はこちら](https://qiita.com/koryo/items/73854e38d55f3f45e7ed)
[https://registry.hub.docker.com/r/wnameless/oracle-xe-11g-r2](https://registry.hub.docker.com/r/wnameless/oracle-xe-11g-r2)

```bash
docker run -d -p 49161:1521 -e ORACLE_ALLOW_REMOTE=true -e ORACLE_DISABLE_ASYNCH_IO=true wnameless/oracle-xe-11g-r2
```
12 は成功したことがない。

docker をクリアする場合、[https://docs.docker.com/config/pruning/](https://docs.docker.com/config/pruning/)を参照

まず

```bash
docker image prune
```

To remove all images which are not used by existing containers, use the -a flag:

```bash
docker image prune -a
```

Oracle 良いクライアントソフト（Windowsのみ）

OSqlEdit Oracle SQLエディタ(有料)
[http://www.hi-ho.ne.jp/a_ogawa/osqledit/](http://www.hi-ho.ne.jp/a_ogawa/osqledit/)
良い点：操作がいい。data-grid も実用性的。
悪い点：oracle cient をインストールする必要がある。

A5:SQL Mk-2(無料)
[https://a5m2.mmatsubara.com/](https://a5m2.mmatsubara.com/)
良い点：oracle cient をインストールする必要なし。直接接続できる。
悪い点：操作感がイマイチ。
upper_boundとlower_boundを用いてABC77 C問題を解く

競技プログラミングの備忘録用
lower_boundとupper_boundを用いてABC77 C問題を解く
[C - Snuke Festival](https://atcoder.jp/contests/abc077/tasks/arc084_a)

###問題
今年もすぬけ祭の季節がやってきました。りんごさんは、まず手始めにすぬけ君召喚の儀式を執り行おうと思っています。 儀式には祭壇が必要で、祭壇は上部、中部、下部の$3$つのカテゴリーのパーツ$1$つずつからなります．祭壇の$3$カテゴリーのパーツがそれぞれ$N$個ずつあります。$i$個目の上部のパーツのサイズは$A_i$，$i$個目の中部のパーツのサイズは$B_i$、$i$個目の下部のパーツのサイズは$C_i$です。祭壇を作るにあたっては、中部のパーツのサイズは上部のパーツのサイズより真に大きく、下部のパーツのサイズは中部のパーツのサイズより 真に大きくなければなりません。逆に、この条件を満たす任意の$3$つのピースを組み合わせて祭壇を作ることができます。りんごさんが作ることのできる祭壇は何種類あるでしょうか。ただし、$2$つの祭壇が異なるとは、上部、中部、下部に使われるピースのうち 少なくとも$1$つが異なることを言います。

###制約
- $1≤N≤10^5$
- $1≤A_i≤10^9(1≤i≤N)$
- $1≤B_i≤10^9(1≤i≤N)$
- $1≤C_i≤10^9(1≤i≤N)$
- 入力は全て整数である

###方針
この問題は$A_i<B_i<C_i$を満たす組み合わせの数を求めればよい．

全探索をすると$O(N^2)$となり間に合わない．そこで$B_i$を中心に考え，全ての$B_i$について，lower_boundとupper_boundを用いて$B_i>A_i$を満たす$A_i$の数と，$B_i<C_i$を満たす$C_i$の数を求めていくことで$O(NlogN)$で計算できる．

###lower_boundとupper_boundの使用例
```c++

#include<bits/stdc++.h>
using namespace std;
int main(){
    vector<int> A={0,1,2,2,3,3,3,4,4,4,4};
    cout << lower_bound(A.begin(),A.end(),2)-A.begin() << endl; //2
    cout << upper_bound(A.begin(),A.end(),2)-A.begin() << endl; //4
    cout << A.end()-lower_bound(A.begin(),A.end(),2) << endl;   //9
    cout << A.end()-upper_bound(A.begin(),A.end(),2) << endl;   //7
}
```
lower_boundは指定したkey以上の値の一番左のイテレータを返却
upper_boundは指定したkeyより大きい一番左のイテレータを返却
注意点として使用する配列はソートしておく必要がある．

###解法コード
```c++
#include<bits/stdc++.h>
using namespace std;
typedef long long ll;
typedef pair<ll, ll> PLL;
typedef vector<int> VI;
typedef vector<char> VC;
typedef vector<double> VD;
typedef vector<string> VS;
typedef vector<ll> VLL;
typedef vector<PLL> VP;
const static int INF = 1000000000;
const static int MOD = 1000000007;
#define rep(i,n) for (ll i=0; i<(ll)(n); i++)
#define repd(i,n) for (ll i=n-1; i>=0; i--)
#define rept(i,m,n) for(ll i=m; i<n; i++)
#define stl_rep(itr, x) for (auto itr = x.begin(); itr != x.end(); ++itr)
#define all(x) (x).begin(), (x).end()
#define F first
#define S second
#define PF push_front
#define PB push_back
#define SORT(V) sort((V).begin(), (V).end())
#define RVERSE(V) reverse((V).begin(), (V).end())
#define paired make_pair
#define PRINT(V) for(auto v : (V)) cout << v << " "
int main()
{
    int N; cin >> N;
    VLL A(N),B(N),C(N);
    rep(i,N){
        cin >> A[i];
    }
    sort(all(A));
    rep(i,N){
        cin >> B[i];
    }   
    sort(all(B));
    rep(i,N){
        cin >> C[i];
    }
    sort(all(C));
    ll ans=0;
    rep(i,N){
        auto one=lower_bound(all(A),B[i]);
        auto three=upper_bound(all(C),B[i]);
        ans+=(one-A.begin())*(C.end()-three);
    }
    cout << ans << endl;
}

```
【学習記録】Rubyで現在時間を取得して、時間毎に違う挨拶文を出力してみた。

##はじめに

ProgateでRubyの学習を始めて約1か月。インプット過多になり始めていたので、
初めてテーマを決めてプチ成果物を作ってみました。
記事投稿練習を兼ねて投稿します！
所要時間は３時間ほどかかりました。。

簡単な流れとしては、
__現在時間を取得__　→　__出力を変えたい時間をグループ分け__　→　__if文で挨拶文を出力__
といった感じです。





```
time = Time.now
```

まず現在時間を取得します。



```
require "time"
# morning = m
    m1 = Time.parse("6:00:00")
    m2 = Time.parse("10:59:59")
# afternoon = a
    a1 = Time.parse("11:00:00")
    a2 = Time.parse("16:59:59")
# evening = e
    e1 = Time.parse("17:00:00")
    e2 = Time.parse("1:59:59")

#上記以外の時間帯は(2:00:00 ~ 5:59:59)　zzz...で出力
```

if文で現在時刻と指定時刻を比較したいので、朝・昼・夜でそれぞれ時間指定をします。
この時、**Time.parse("時:分:秒")**とすることで、ただの文字列からTimeオブジェクトに変換しています。
詳しくは下記に参考文献を載せています。

```
if m1 <= time && time <= m2
    puts "おはようございます"
elsif a1= time && time <= a2
    puts "こんにちは"
elsif time <= e2 || e1 <= time 
    puts "こんばんは"
else
    puts "Zzz..."
end

```

グループ分けした指定時刻と、現在時刻を比較して挨拶文を出力します。
少しわかりにくいですが、

朝(6:00:00)～(10:59:59)の時間帯→　おはようございます
昼(11:00:00)～(16:59:59)の時間帯→　こんにちは
夜(17:00:00)～(1:59:59)の時間帯→　こんばんは
その他(2:00:00 ～ 5:59:59)の時間帯→　zzz...

と出力されます。

##感想(主につまづいたところ)
* 現在の"時間"のみの取得
* 指定時刻を文字列から変換
* if文の作成(時間軸の関係で最後のelsifだけ"または"になる)


##参考文献
[Ruby入門 14. 日付と時刻を扱う（全パターン網羅）](https://qiita.com/prgseek/items/c0fc2ffc8e1736348486#-%E7%89%B9%E5%AE%9A%E3%81%AE%E6%97%A5%E6%99%82%E3%81%A7time%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90)
Pythonで辞書の内容が同じかハッシュ値で調べる方法

Pythonで辞書の内容が同じかハッシュ値で調べる方法

辞書型はキーの並び順が決まってないので、単純に文字列化してmd5求めてもだめ。

ズバリこれ

```Python
import hashlib
import json

data = ['only', 'lists', [1,2,3], 'dictionaries', {'a':0,'b':1}, 'numbers', 47, 'strings']
data_md5 = hashlib.md5(json.dumps(data, sort_keys=True)).hexdigest()
```

参考
https://stackoverflow.com/questions/5417949/computing-an-md5-hash-of-a-data-structure
とある学生がゲーム開発してみた#7(記事を書かないでいた頃の話。)

#休んでました！
はい、お久しぶりです。とある学生です。
先日のMacBookの話を無視するなら約1ヶ月ぶりですね！
とうとう私の学校でも遠隔授業が始まったので忙しくなり、開発自体はしていたのですが、記事はかけませんでした。ゴメンね。今日はその間にやったことを晒していきたいと思います!
##うちの子誕生!
<img width="421" alt="スクリーンショット 2020-05-20 11.49.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614245/0fbe7b43-f26e-7651-e669-1952b229a2f2.png">

彼が「うちの子」です。
blenderで作りました。そうそう、ここで戸惑ったことがあるので紹介を。
うちの子はfbxファイルなのですが、blenderから何も考えずにfbxファイルを出力するとライトが着いてくるんです…
ライトがあるだけなら問題ないのですが、そのライトのデフォルトの輝度が10000か1000くらいあるので白飛び必至です。ちゃんとエクスポートする時にライトのチェックボックスを外さないとダメです。
もうひとつ…まずはこちらの画像をご覧下さい。
![IMG_20200521_141431.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614245/250c6aaa-6c1f-eafb-16c7-0365953ac069.jpeg)
うちの子が開脚しながら歩いてます…
正直少々気持ち悪いです。
原因はボーンにありました。
<img width="664" alt="スクリーンショット 2020-05-21 14.30.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614245/d749b839-4b37-6239-fb5e-7ee51651b60c.png">
腰周りのボーンの図です。(誤字がありますが気にしないでください。)
もともとうちの子のボーンは左の形でしたが、それが原因でした。
アニメーションはStandardAssetのを流用したので、ボーンが垂直でなく傾いている設定でした。(図の右)
これに関しては別にボーンを設定し直すことは無く、足を適度に内側に曲げて出力することで解決しました。
##ビルドとUI
![Screenshot_2020-05-21-14-41-33-64.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614245/1f5a5902-a2ad-d5ae-c406-09f7018069a9.png)
ビルドしてみました。(なぜアプリ名がGP01か分かった人とは仲良くなれそうです。)
以外とあっさりできたので驚きです。
手順としては、
1.AndroidビルドサポートとAndroidSDK
をダウンロード
2.UnityでAndroidSDKのパスを通す。
3.ビルドに含まれるシーンを確認して、ビルドする。
以上!
むしろ困ったのはビルドしてからで…
できたアプリを自分で自分に送り付けようとしたところ、提供元不明がナントカカントカ…というエラーが出ました。
どうやらGoogleDriveにアップして、ダウンロードすれば可能なようです。
今回UIはこちらもStandardAssetを流用してます。
アタッチすれば即使えますが、ジャンプボタンの縦横比が変なことになるのでこれは手動で調節します。
#まとめ
これでゲームシステムの土台が完成しました！
土台だけで7回もあるので先が長くなりそうです。
うちの子については別途記事を書く予定なので書いたらリンクを貼っておきますね。
VMware Workstation + Ubuntu 18.04 LTS > 症状: 画面解像度が800x600に固定される > 対処

```txt:動作環境
Windows 10 Pro (v1909)
VMware(R) Workstation 15 Pro (15.5.2 build-15785246)
```

### 症状

Ubuntu 18.04 LTSをセットアップしたら、画面解像度が800x600に固定されている。


### 対処情報

https://github.com/vmware/open-vm-tools/issues/303

>  titan99855 commented on 6 Nov 2018

```
$ sudo apt purge open-vm-tools
$ sudo apt update
$ sudo apt install open-vm-tools open-vm-tools-desktop
```

上記を実施することで、解像度を上げられるようになった。

(open-vm-toolsは最初はないので、purgeの効果はない。)
クラウド初心者のAWS入門(第7回)

## 第7回　DNSの設定

今回はVPCに対してDNSホスト名を設定していこうと思います。

設定するDNSホスト名は、パブリックIPと同様で**インスタンスを再起動すると変更されてしまいます**。
「Elastic IP」を使用することで、DNSホスト名も固定化できるようなので、今度やってみます。

順番に進めていきたいと思います。

+ DNSホスト名の有効化
+ インスタンス側でDNSホスト名の確認
+ WebブラウザからDNSホスト名でのアクセス
+ nslookupで確認

***
### DNSホスト名の有効化
***

VPCマネジメントコンソールから進めていきます。
まずは作成したVPCにチェックを入れます。

|![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/357cc7e6-99d0-2785-75da-786fa91ba6b7.png)
|:-:|

「アクション」から「DNSホスト名の編集」を選択します。

|![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/d5eae30a-db9a-b85e-d691-0e997bee0535.png)
|:-:|

DNSホスト名の編集から「DNSホスト名」にチェックを入れ「保存」します。

|![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/9d31eca4-55af-6fc0-57eb-1c9861e4578d.png)
|:-:|

設定を終え、「DNSホスト名」が「有効」になっていることを確認します。

|![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/f45080f4-ca52-9c71-a913-5a6e7a700f82.png)
|:-:|

インスタンス側でも変化があるので確認していきます。

|![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/f80c4a18-b084-179b-8554-18ef3b0fca78.png)
|:-:|

インスタンス側にもDNSホスト名が設定されていることを確認できました。
なお、長いDNSホスト名ですが、階層ごとに以下の意味合いがあるそうです。

|5レベル|4レベル|3レベル|2レベル|1レベル|
|:----:|:----:|:----:|:----:|:----:|
|ec2-xx-xxx-xx-xx|ap-northeast-1|compute|amazonaws|com|
|インスタンス固有|リージョン|サービス(EC2とか)|AWSドメイン|comドメイン|

最後に動作確認をしていきます。

まずはWebブラウザからホスト名アクセス。
任意のブラウザに「`http://"DNSホスト名"`」でアクセスしてみます。

|![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/33167b0f-9008-2535-51eb-73128dc285ad.png)
|:-:|

アクセスできました！
参考に・・パブリックIPからDNSホスト名を引くことももちろんできました。

|![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626270/83756400-85f4-8cb1-0119-4113ffabf324.png)
|:-:|

今回は以上です、ありがとうございました。
次回はプライベートサブネット側を構築していきます。

### 参考文献
いつもお世話になっております。
[Amazon Web Services 基礎からのネットワーク&サーバー構築](https://shop.nikkeibp.co.jp/front/commodity/0000/231260/)
WPの特定の固定ページのエディタを非表示にする

TL;DR
--

hoge,fugaってスラッグの固定ページでエディタを非表示にしたければ以下のようにします


```php
add_filter('use_block_editor_for_post',function($use_block_editor,$post){
	if($post->post_type==='page'){
		if(in_array($post->post_name,['hoge','fuga'])){
			remove_post_type_support('page','editor');
			return false;
		}
	}
	return $use_block_editor;
},10,2);
```



解説
---

WPの記事編集画面は``wp-admin/post.php``が``?action=edit``をつけて呼ばれます
ブロックエディタが有効な投稿であれば``wp-admin/edit-form-blocks.php``が読み込まれますが
この``wp-admin/edit-form-blocks.php``内ではエディタ部分だけを無効化する手段がないため
まず``use_block_editor_for_post()``が``false``を返すようにしてブロックエディタを無効にします

``use_block_editor_for_post()``の戻り値は
``use_block_editor_for_post``フィルタフックを通されるのでこれを利用します


[use_block_editor_for_post](https://developer.wordpress.org/reference/functions/use_block_editor_for_post/)


```php
add_filter('use_block_editor_for_post',function($use_block_editor,$post){
	if($post->post_type==='page'){
		if(in_array($post->post_name,['hoge','fuga'])){
			return false;
		}
	}
	return $use_block_editor;
},10,2);
```

これでhoge,fugaでブロックエディタを無効化できました

すると``wp-admin/edit-form-blocks.php``の代わりに
``wp-admin/edit-form-advanced.php``が読み込まれるようになり
旧エディタで記事編集画面が開くようになります

旧エディタであればエディタ部分だけを無効化することができます
先のフィルタ処理のついでに``remove_post_type_support()``してエディタを無効化しましょう

```php
add_filter('use_block_editor_for_post',function($use_block_editor,$post){
	if($post->post_type==='page'){
		if(in_array($post->post_name,['hoge','fuga'])){
			remove_post_type_support('page','editor');
			return false;
		}
	}
	return $use_block_editor;
},10,2);
```

以上です
Webサイト作成～公開までの簡単な流れ 

#はじめに
ITエンジニア2年目のひよっこです。
趣味丸出しの旅行記のような簡単なWebサイトを作成したので、公開までに行った流れを備忘録がてら記録します。

ちなみに、作成サイトはこちらです。
「[わたしの瀬戸内](http://my-setouchi.com/)」

#前提
文学部出身のバリバリのド文型。
新卒未経験で入った会社の研修で掲示板を作成した際、Webサイト作るの楽しいなと思ったのがきっかけ。単純ですね。
結局画面周りをやったのは研修中だけだったので、体系的な基礎知識のないまま「とりあえず作っちゃえ」という見切り発車です。
Web制作の実務経験のない人間が、練習がてらに作成したものということをご了承ください。

#どんなサイトを作ったか
まずは、自分で作ったものを実際に公開するという実績を作ることを一番の目的にしました。

・過去の島旅の思い出を、写真と文章で綴るサイト
・ページ構成、内容、デザインはシンプル
・レスポンシブ対応なし
・データベースは使用なし
・使用言語はHTML5とCSS3のみ

#流れ
##1.企画
###コンセプト設計
・どんなサイトを作りたいか
・それはなぜか
・どんな人に見てほしいか
・見た人にどう思ってほしいか
等をまとめて、作成予定サイトのイメージを固めます。

###サイトマップ作成
サイトマップとは、Webサイト全体のページの構成をリスト形式でまとめたものです。
どのページがどのページに紐付いているのかをツリー状に繋げていきます。
　①必要そうなページを洗い出す
　②洗い出したページをグループ分けする
　③ページを階層化する
　④清書（ドキュメント化）する ←私はgoogleのスライドショーを使用しました

###ワイヤーフレーム作成
ワイヤーフレームとは、各ページのレイアウトを表した設計書のことです。
どの要素がページのどの位置にあるのかというのを可視化していきます。
　①必要な各ページの掲載する要素を洗い出す（タイトル、写真、テキスト、ナビ、リンク等）
　②洗い出した要素を関連性のあるものでグループ分けする
　③要素の優先順位をつける
　④清書（ドキュメント化）する ←photoshopを使用しました

##2.サイト制作
###パーツの準備
サイトに使う画像やテキストを準備します。
今回作成したのは旅行の記録サイトなので、私は以下のことをやりました。
　①写真のレタッチ
　②写真のサイズをカテゴリごとに統一（TOPページ用、見出し用、小見出し用等）
　③パーツ用写真の編集
　④説明文の草案

###デザインの作成
本来なら、フォントや色や配置等を詰め、「デザインカンプ」というデザイン案を作成します。
が、私はここの工程をすっ飛ばしてしまいました。反省…。
今回作成したのはシンプルなものだったので、頭の中のイメージをコーディングしながら形にすることに支障はあまりなかったのですが、次はちゃんと作りこみます。

###コーディング
イメージしている画面になるように実際にコーディングしていきます。

　①エディタをDLする。
　　様々なコードエディタがありますが、私はAdobeが出している「[Brackets](http://brackets.io/)」を使用しました。
　　コーディングしたらボタンひとつでchrome上で確認できるという優れもの。
　　正直めちゃめちゃ使いやすかったです。
　②HTMLで各ページに必要な要素を書いていく
　　横並びにする作業や、位置・サイズ調整などは後ほどCSSで整えるので、ヘッダーやメニューや画像・テキストなどを一旦全部コーディングします。
　③CSSでイメージに近づける
　　ただずらっと並んでいるだけの要素たちを、CSSを使って整理します。
　④微調整して完成

##3.サイト公開
###サーバーを借りる
作成したHPをインターネット上に公開するためには、サーバーに作成物を置かなくてはなりません。
私は、「[さくらのレンタルサーバ](https://www.sakura.ne.jp/)」で一番安いプランを契約しました。

###独自ドメインを取得する
ドメインとは、ホームページのネット上の住所のようなものです。
「https\://qiita.com/」の「qiita.com」の部分ですね。
「[さくらのレンタルサーバ](https://www.sakura.ne.jp/)」ではサーバーレンタル時に独自ドメイン取得も希望できるので、一緒にやりました。

独自ドメイン取得にはお金がかかります。
「.com」や「.jp」等の種類によって金額はピンきりです。
私は「.com」」を契約しました（1年契約で3,000円位）。

※デフォルトでついてくる無料ドメインも使えますが、それだと「http\://my-setouchi.sakura.ne.jp/」と借りたところの会社名が記載されてかっこ悪いので、完全に見栄えのためだけに課金しました（笑）

###ファイルをサーバにアップロードする
いよいよ、PCに保存してあるHTMLファイル・CSSファイル・画像をレンタルしたサーバ上にアップロードしていきます。
通常はFTPクライアントソフトというファイル転送用のソフトを使ってアップロードを行いますが、さくらのサーバにはファイル転送ソフトを使わなくてもアップロードできるファイルマネージャが用意されているので、今回はそちらを使用しました。

次回は、FFFTPやWinSCP等のフリーで配布されているFTPソフトを使う練習もしたいです。

###実際にページを確認する
作成したサイトのURLにアクセスしてみて、ページの飛び先や表示位置等、想定通りの作りになっているかを確認していきます。
エディタのプレビューでは問題なくても、サーバに置いたら表示されない画像がある等のケアレスミスを発見しました。
修正したファイルをアップロードし直して、再度確認したら完了です。

#おわりに
###やっぱり基礎知識は大事
今回、見切り発車でとりあえず作ってみましたが、コーディング中難航する場面や諦めた機能もありました。
そんな時、土台として体系的な知識があったらもう少しできる事も増えたのかなと思ったので、一旦ちゃんと勉強しようと思います。

###今後
自分の作ったものがChromeでもIEでもスマホでも見れた時はやっぱりちょっと感動しました。
次は今回省いた「デザインカンプの作成」「FTPソフトの使用」も行い、js等他の言語も使ってもう少し本格的なWebサイトを作成してみたいです。

※ちなみに今回作成したサイトは、サーバが月ごとのレンタルなので恐らく1ヶ月で閉めると思います。（せっかく取得したドメインは1年間有効なので勿体無いのですが。）

ここまで読んでいただけてありがとうございます。
ど素人の備忘録ですが、少しでも参考になる部分があれば幸いです。