OmniAICreator/Qiita-1.07M huggingface dataset:
在庫管理システムのデモ

#在庫管理システムのデモ

前回の記事でSpring Bootを使用して在庫管理システムを作成するよう述べた。
https://qiita.com/ktkt11122334/items/81dd461bc4e7b0f97b34

今回は、作成したシステムのデモを行う。
*分析系のシステムは作成していません。
*前回の記事と要件、設計が異なる箇所もあります。

操作の概要としては、
マスタ情報の作成→注文情報作成→注文情報出荷操作→在庫確認の流れを説明する
*gifでアップロードしたらスピード感のない動画になってしまいました・・・

## 税率マスタ作成
![税率.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526203/2f07db0c-6e9a-ff37-23df-d8ef47f35d85.gif)

商品に紐づく税率のマスタ情報を作成します。

## 商品マスタ作成
![商品マスタ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526203/4d671bae-3a82-53c4-8466-96668e9c9aeb.gif)

商品情報を作成します。
作成した商品は注文の際に選択し、注文を確定します。


## 注文情報作成
![注文作成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526203/88125a04-0f68-4828-0ede-8568b9ece236.gif)

注文情報作成の操作として、
顧客情報の入力、商品マスタの選択、購入個数の設定を行います。
注文が確定すると、注文リスト画面に作成した注文情報が表示されます。


## 注文情報の出荷処理から在庫確認まで
![出荷から在庫確認まで.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526203/5c0184e2-e04f-4ae1-ca4c-746e1579ab5e.gif)

作成した注文情報の出荷処理を行います。

在庫設定を行わず出荷処理をすると、
在庫不足エラーの通知が私のメールアドレスにメール通知されます。
内容としては、出荷失敗した注文Idとその注文内容が記載されたものです。

出荷されなかった注文情報は、出荷処理されません。
在庫消費画面により、在庫消費されていないことが確認できます。

在庫作成画面から在庫の設定を行います。
作成した商品マスタに紐づく在庫情報が表示されます。
実在庫数 < 出荷予定数の行は赤色
実在庫数 < 基準在庫数の行は青色
で表示されます。

実在庫数 > 出荷予定数に設定して出荷処理を行うと、
私のメールアドレスに出荷完了が通知されます。

在庫消費画面から在庫消費された数が表示されます。
また、在庫作成画面の一覧から実在庫数、出荷予定数が更新されていることが確認できます。



## 最後に
Spring Boot未経験から2ヶ月弱で、なんとなくなアプリケーションを作成することができました。
依然として、仕様の認識不足によって無理矢理な実装を行なったり、また、Springの内部ロジックが意図した動きになっていない箇所もあります。

これからも学習を進め、Javaを扱えるエンジニアとして精進できたらと思います。
作成したアプリケーションは、AWSにデプロイして動作確認しましたが
セキュリティ面に自信がないため公開はしません。

もし、本記事の内容で不明点ありましたら回答しますので、
ご気軽にコメントいただけたらと思います。

ソースコードはGithubに公開しています。
https://github.com/ktkt11122334/qiita


以上
template.ParseFilesの省略

自分用に、いちいちtemplateを呼び出すときに2,3行かくのめんどいので1行で書こうとした。

```
func handleIndex(w http.ResponseWriter, r *http.Request) {
	v := 1
	render("index").Execute(w, v) 

//t :=template.ParseFiles("index")  t.Execute(w, v) を省略した。()の中身を変えるだけでfileが呼び出せる。
//変更するのは()の引数とvの値のみでOK!!わざわざtemplate.Parsefile書くのめんどかった。
}
```


```
func render(name string) *template.Template {
	t, _ := template.ParseFiles(name + ".html")
	return t
}
//引数にfile名を指定し活用
```
【Nuxt】ページとコンポーネントの関係と管理について

nuxtを書いていって、ある程度まとまったのでメモとして。

# 結論
- ページ → コンポーネント間のデータの受け渡しはvuexのstateを用いる。
- propsでも渡せるがコンポーネント内でコンポーネントを更に読み込むケースもあるため、バケツリレーになってしまう。
- コンポーネントはvuexのstateを参照する。コンポーネント内でデータをfetchしない。
- 読み込み順の制御はページで行う。

# 基本
## ページ
- `/page`配下
- ページ全体の表示に必要なHTML・CSS・JSが入っている
- コンポーネントを読み込むこともできる

## コンポーネント
- `/components`配下
- ページ上で使うパーツファイル
- そのコンポーネントを表示するために必要なHTML、CSS、JSのみが格納されている
- コンポーネント内で更にコンポーネントを読み込むことも可能

# ページからコンポーネントへのデータの受け渡し
2パターンある。

1. vuexのstateを使う
2. propsを使う

単純なのは2だが、propsの定義が必要・バケツリレーが発生するため基本的に1の形式に統一したい。
（のだが適切に使い分けるべき。後述）

## コンポーネント内でAPIコールをしない理由
- コンポーネント間の読み込み順の制御ができない
- 認証を通った上で読み込みが必要な場合にその順番の制御ができない

なので、コンポーネントはあくまでも渡されたデータ、stateで管理されたデータの表示のみを行うべき。
APIコールの処理はページで行い、順番を適切に制御する。

# 破綻するケース
- 全部storeに寄せすぎるとstoreの肥大化を招いて破綻する。
    - storeは結局グローバル変数と変わりない。
- 保持する必要の無いデータはstoreを使わずpropsで適切に使ったほうが良い
    - パフォーマンス的にもデータ管理的にも。 

# 制約がない故に
その気になれば、コンポーネント側でデータを取り寄せ、ページ側ではstateを使う、といったスタイルに統一することも出来るし、
コンポーネント側でデータをロードすることもあれば、ページ側で行ったり、バラバラにすることもできる。
いくらでもできる。

なので、基本を決めておいて、「例外的にここではこうしている」といったコメントを残した上でコードを書いていくと、
メンテナンスの際にコードが追いやすり、変更もしやすくなると思った。
Oracle CloudのユーザーにOMCへのアクセス権限を付与する①

Oracle Cloudのユーザーに作成したOMCインスタンスへのアクセスするためのユーザー権限付与の方法を紹介します。OMCは、OCIネイティブのサービスではないので、ユーザー権限の付与の仕方に若干戸惑うかもしれません。以下の手順が確実だと思います。


- OCIの右上のプロファイルから、サービス・ユーザー・コンソールをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562423/c7179773-4de7-9627-e3d9-94eb9e3730e6.png)


- Infrastructure Classicダッシュボード、もしくは、アプリケーション・ダッシュボード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562423/5bb3a37f-5676-3fde-bddf-a161f2e4c429.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562423/373c2598-74f0-8e21-674a-50541499cff0.png)


- Account Managementのユーザー -> OMCが作成されているリージョンのIDCSを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562423/426562f2-7ff0-040f-774a-638f9ed45cb9.png)
※IDCSへ認証がリダイレクトされるケースがあります


- 対象ユーザーの編集をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562423/95361fdd-df17-efec-c284-67fe5077a5b2.png)

- Management Cloudの作成したインスタンスに対してOMC AdministratorまたはOMC Userの権限を選択する
  OMC Administrator　- OMCの設定を含むすべての操作が可能
  OMC User - 主に参照のみ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562423/250ba79b-f180-b80b-519d-f6b0a7c9afae.png)

- 選択するとコンソールの一番上にメッセージが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562423/cdd2ef20-433a-cb39-4c6f-517f7959e1cc.png)

Oracle Management Cloud関連の情報は[こちら](https://qiita.com/western24/items/1e44bfcaa77f3251a263)
Sikulixを使ってみた感想文

###経緯
マクロ対策してきたので画像認識で色々やりたかった。
触っててつらかった部分をまとめていくついでに、触ってみた感想を書いていきたい。

##感想文
###良かった
- 簡単
    - コードを書くといっても click(画像)やif,elsif,else,whileくらいでかなり動くので、簡易な自動化の実現はかなり楽。
    - 画像認識での操作を気軽にできる。
    - IDEの操作が直感的にわかりやすい
- 無料
    - ライセンスがMIT。何も気にすることなく使っていいのが良かった。[^1]

###辛かった
- 情報がすくない
    - ググっても大した記事が出てこない。
    - elsifを調べても上位に出てくるのがpythonでの書き方で、jython（sikulix上で使うpythonもどきのこと）でも同じ書き方をしていいのか迷ったりする。
    - 環境構築は簡単。これに関しては情報も多数出てくる。
- IDEが使いにくい
    - 余計な空白等の削除をしてくれない（設定次第ではしてくれるのかもしれない）
    - VScodeと比べるとかなりストレス。
- 公式が見づらい



###触る前に知っておいた方がお得なこと 
- Rubyとpythonどっちがいいか。
    - Ruby,pythonを選べるが、調べて出てくるサンプルの大半がpythonなのでpythonを選ぶ方が楽だと感じた。
- 無限ループの止め方
    - 「shift + alt + c」 or 「プロセスを殺す。」
- 参考になる記事
    - https://qiita.com/hirohiro77/items/a91f16662091618f2794

###もし業務に導入するなら

簡単に作れてしまう分、ドキュメントとしてきちんと形に残しておかないと悲惨な目に合うことが多くなりそうだと感じました。
また、RPAツールを使わずとも、簡単なプログラムを組んでしまえば目的の自動化が出来る場合が多いのではないかとも感じました。[^2]
導入する前に十分な検討を行うべきものだと思います。
特にメンテナンス部分のコストを軽視されやすいものだと思うので、その部分は1度きちんと考えたほうが良いと思いました。
この辺は他の人も結構触れてて同じような意見を述べてる＆詳しく書かれてるので他の人に任せます。
参考記事：
[RPA導入はボトムアップ型とトップダウン型アプローチのどちらがいいのか](https://qiita.com/spaces/items/affda4441607497e23eb)
[WinActor と VBA を用いた RPA 事例](https://qiita.com/kce119/items/56e89a7318d5d678f3a2)
[RPA導入の現実を理想に近づけるために](https://qiita.com/n_oshiumi/items/9938a5268771769a1136)
[RPA導入前にまず考えておくべきこと](https://qiita.com/hal220/items/ff18571f428efd102b7c)
たくさん貼りました。
まぁ流行りらしいのでRPAで記事を漁れば結構出てきます。

終わり。

[^1]: UiPathも個人利用なら無料だった気がする。あと仕事だとUiPathが主流らしい。
[^2]: 例えばOS上で完結する（ファイルのコピー等）ならshellで十分ですし、web上で完結する自動化ならpuppeteer等が望ましいでしょう。
int.TryParseなどで、使わない out 引数のためにわざわざ変数を用意したくない！

#はじめに
C#7.0 (Visual Studio 2017) 以降、_（アンダースコア）で、結果を破棄するout引数を指定できます。

#サンプル（コンソールアプリ）

```Program.cs
using System;

namespace ConsoleApp1
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.Write("整数をどうぞ：");
            var inputText1 = Console.ReadLine();
            if (!Int32.TryParse(inputText1, out _))
            {
                Console.WriteLine("整数を指定してね！");
                return;
            }

            Console.Write("日時をどうぞ：");
            dynamic inputText2 = Console.ReadLine();
            if (!DateTime.TryParse(inputText2, out DateTime _)) // CS8183:「暗黙的に型指定された破棄の型を推論できません」対策として型を指定（ここでは、out の次の DateTime）
            {
                Console.WriteLine("日時を指定してね！");
                return;
            }

            Console.WriteLine("ありがとう！");
        }
    }
}

```

#姉妹品
out引数で用いる変数をインラインで宣言する（値も使える）コーディングとして次のようなものもあります。

```sample.cs
var inputText1 = Console.ReadLine();
dynamic inputText2 = Console.ReadLine();
var valid1 = int.TryParse(inputText1 , out var intVal);
var valid2 = DateTime.TryParse(inputText2, out DateTime dtVal);
if(valid1 && valid2) {
  Console.Write("どうもありがとう {0} と {1} を入力してくれて！", intVal, dtVal);
}
```

#参考にした資料
- https://docs.microsoft.com/ja-jp/dotnet/csharp/discards
IntelliJ IDEA を日本語化してみる

Windows環境でIntelliJ IDEAを日本語化します。

## 環境

- Windows 10 Pro (64bit)
- IntelliJ IDEA Community Edition 2019.3.1

## 手順

1. 以下のサイトからWindowsのPleiadesプラグインをダウンロードします。

    https://mergedoc.osdn.jp/#pleiades.html#PLUGIN

2. ダウンロードしたzipファイルを展開して、setup.exeを実行します。

3. 日本語化するアプリケーションの選択ボタンから、IntelliJ IDEAの実行ファイル(idea64.exe)を選択します。

4. 「日本語化する」をクリックして、以下のメッセージが表示されれば完了です。

```
日本語化が完了しました。他のアプリケーションを選択することで続けて日本語化できます。日本語化した後は、このインストーラーを削除しても問題ありません。
```

以上です。
LINEbotを作成する流れ[備忘録]

参考にさせて頂いた記事
https://qiita.com/at_1016/items/9f97dc1c561182c18182

# 必要な事
- LINE messaging APIに利用登録をする
- Messaging API SDK for PHPを利用しつつコーディングをする
- Herokuにデプロイする
- LINEのコンソールでWebhook設定をする

# LINE messaging APIの登録
https://developers.line.biz/ja/services/messaging-api/
開発者登録・プロバイダ作成・チャネル作成をする

# Messaging API SDK for PHPをインストールする
ここにPHPを書くのだが、この時に```channel access token```と```channel secret```を書き込む

# Herokuでアプリサーバーを作る
GUIでも出来るし、コマンドラインからでも良い

#Herokuへのデプロイ方法

```heroku git:remote -a Heroku上のapp名```
これを行うと、自分がいるディレクトリ内のgitの情報がheroku上に登録される

```heroku apps:info```
フォルダのgitと繋がっているherokuのアプリ情報が参照出来る
GitLab/pages で Hugo を使う

### ここが[フロントマッタ―](https://gohugo.io/content-management/front-matter/)
```
---
title: GitLab で Hugo を使う
subtitle: GitLab を使い倒す
date: 2020-01-01
tags: ["gitlab", "hugo"]
---
```
[GitLab](https://gitlab.com/) で新規プロジェクト作成時に、
[Create from template] で "Pages/Hugo" のテンプレートを使用うと、他にサーバを立てることなく [Hugo](https://gohugo.io/) が使えるようになる。 

Hugo は静的サイトジェネレータと呼ばれるもので、[マークダウン形式](https://gohugo.io/content-management/formats/) で
記事を書いておけばよろしく処理をしてくれる。

# とりあえず動かす
インポートしたら先ず最初にリポジトリ内の config.toml に記述されている
baseurl を自分のネームスペースのURLに変更。

```
baseurl = "https://pages.gitlab.io/hugo/"
↓
baseurl = "https://namespace.gitlab.io/projectname/"
```
(namespaceはアカウント名、projectnameは作ったプロジェクト名)

テンプレートが、[GitLab/Pages](https://docs.gitlab.com/ee/user/project/pages/) を使っているので、内容を更新したら自動的に CI/CD が行われてデプロイされる。
デプロイが完了したら、ブラウザから baseurl を指定してアクセスできる。

# 微調整
あとは、[configuration](https://gohugo.io/getting-started/configuration/) 等を参照しながら微調整していく。

- 日本語化  
DefaultContentLanguage を en → ja に変更。

```
DefaultContentLanguage = "ja"
```
変な日本語があったら themes/beautifulhugo/i18n/ja.yaml を修正。

- ナビゲーションのメニュー名を日本語に  
[[menu.xxx]] プリフィクスの name属性を適宜修正

- social media の修正  
[Author] に自分のアカウントを設定する。  
持ってないものはコメントアウトすれば表示されなくなる。

# コンテンツの修正

|場所|修正箇所|
|:----|:----|
|フロントページの真ん中の部分|content/_index.md|
|Aboutページ|content/page/about.md|
|ブログのページ投稿|content/posts/ の下に スラッグ.md ファイルを作る。※１|

※１）フロントマッタ―付きマークダウン形式を使う。

#まとめ
- 動的サイトにも静的サイトにもそれぞれのメリデメがある。
- 更新が頻繁でなかったり、一時的なランディングページとかを立てるならあり。
- マークダウンなので、他のマークダウンを使うサイトやサービスと相性がいい。

とりあえず、ランディングページのベースとかを作って置けば、色々使いまわしできるかもしれないので
備忘録として残しておく。

で、作って見たサイトがここ → https://nekyox.gitlab.io/hugo/
（そんなに頻繁には更新しない予定・・・）

GitHab を使って公開する場合は Netlify と連動させる必要があるなど、もうちょっと面倒くさい。
viモードのtmuxでwin32yankとpbcopyを使う

一つのtmux.confファイルでWSL用では`win32yank.exe`を使うよう、Macでは`pbcopy`を使うようにしたかったのでif-shellを使って環境ごとにクリップボード共有ツールを変えるようにしました。

tmux.confファイル全体はこちら
https://github.com/tMinamii/dotfiles/blob/master/tmux/tmux.conf

```conf:tmux.conf
setw -g mode-keys vi
unbind -T copy-mode-vi Enter
bind-key -T copy-mode-vi v     send-keys -X begin-selection
bind-key -T copy-mode-vi C-v   send-keys -X rectangle-toggle

## for WSL2
if-shell -b 'test "$(uname -a | grep microsoft)" != ""' \
  'bind-key -T copy-mode-vi Enter send-keys -X copy-pipe-and-cancel "cat | win32yank.exe -i"; \
   bind-key -T copy-mode-vi y send-keys -X copy-pipe-and-cancel "cat | win32yank.exe -i"; \
   bind-key C-p run-shell "win32yank -o | tmux load-buffer - && tmux paste-buffer"'

## for Mac
if-shell -b 'test "$(uname -a | grep Darwin)" != ""' \
  'bind-key -T copy-mode-vi Enter send-keys -X copy-pipe-and-cancel "pbcopy"; \
   bind-key -T copy-mode-vi y     send-keys -X copy-pipe-and-cancel "pbcopy"; \
   bind-key C-p run-shell "pbpaste | tmux load-buffer - && tmux paste-buffer"'
```
DBのテーブルをBigQueryにアップロードする簡易な方法

PostgreSQLのテーブルをBigQueryに**とりあえずコピーする雑な方法**を調べたのでメモします。

ググっても複雑なソリューションばかりで簡易な方法が無かったので調べたものです。

MySQLなどの他のDBでも同様の方法でいけると思います。

# こういうのでいいんだよ、こういうので

1. `psql` コマンドなどでDBのテーブルを改行区切りJSONで出力
2. 出力を `gsutil` で GCP Cloud Strage にアップロード
3. `bq load` コマンドで Cloud Strage からBigQueryテーブルにコピー

```shell
uri="gs://mybucket/temp$(date +%FT%T)-$RANDOM.ndjson.gz"
q='select ROW_TO_JSON(mytable) from mytable order by id'
psql $PGMMDB -t -A -c "$q" | gzip | gsutil cp - "$uri"
bq load --replace --source_format=NEWLINE_DELIMITED_JSON mydataset.mytable "$uri"
```

**工夫したところ:**  

- gzip 圧縮すると回線に優しい
- ファイル形式はCSVでもいいが、データ中に改行か引用符があるとハマる。JSONが無難。
- `psql ... | bq load` のように直結したいのが人情だが、`bq load`はパイプや標準入力からの読み込みに対応していない（っぽい）
- 日次更新なら`bq load`に`--replace`をつけてデータを総入れ替えするのが手っ取り早い
- `psql`にはJSON出力するオプションは無いようなので`ROW_TO_JSON`関数を使う

# 「こういうのでいいんだよ、こういうので」の要件

BigQueryなどの新しいツールの導入時に陥りがちなのが、

1. （初めは）まだBigQuery上にデータが無い
1. データが無いので分析に使えない
1. 分析に使っていないので、BigQueryの効果が目に見えない
1. BigQueryの効果が分からないので、データをBigQueryにアップロードする作業より他の作業が優先される
1. まだBigQuery上にデータが無い

という負のスパイラルです。なので、

- アプリDBはPostgreSQL
- テーブルは大きめだが巨大ではない（< 10GBぐらい）
- スキーマの変換は不要
- アップロードは1日1回ぐらいの頻度でよい
- 最悪、アップロードに失敗してもいい

という程度の**雑な要件**で、「とりあえず、アプリのDBテーブルをそのままアップロードしてみよう」と考えました。

- リアルタイムで同期したい
- テーブルサイズが数百GBになる
- 分析用のカラムを追加したい

といった場合にはもっと堅牢なソリューションを使ってください。

# むすび

ハンバーグ定食を食べたくなってきました。
玩玩 @propertyWrapper

看了這兩篇文章動手做之後簡單來做個筆記

- [NSHipster - Property Wrapper](https://nshipster.com/propertywrapper/)
- [Swift by Sundell - Property Wrapper in Swift](https://www.swiftbysundell.com/articles/property-wrappers-in-swift/)

## <strike>規格</strike> 提案

[SE-0258 Property Wrappers](https://github.com/apple/swift-evolution/blob/master/proposals/0258-property-wrappers.md)

小聲說：寫這篇的時候我還沒詳細讀完所有的內容

## 玩過之後看到的優點

- 過去以來需要寫在 didSet 裡面的邏輯有辦法再封裝，讓宣告的地方能夠更加乾淨
- 似乎可以解決在設定初始值無法觸發 didSet 的問題

## 語法

對我來說，直覺是有 Java 中 annotation 的 fu
詳細說明可以參照

- https://docs.swift.org/swift-book/ReferenceManual/Attributes.html
    - 的 `Property Wrapper` 段落

### 定義

``` swift
@propertyWrapper
struct Trimmed {
    private(set) var value: String = ""
    
    // 根據文件指出，「必須」定義這個 property 
    var wrappedValue: String {
        get { value }
        set { value = newValue.trimmingCharacters(in: .whitespacesAndNewlines) }
    }
    
    init(wrappedValue: String) {
        self.wrappedValue = wrappedValue
    }
}
```

`wrappedValue` 通常會是一個 computed value ，用這樣的寫法的話，在 `set` 裡面可以拿到在 init 中被設定的值，而 `get` 中回傳的值則是放處理完成的值。

### 使用方式

先定義一個簡單的 struct 並把剛剛定義的 property wrapper 放在一個屬性前面

``` swift
struct Post {
    @Trimmed var title: String
}
```

使用之後如下：

``` swift
let post = Post(title: " B A A ")
print(post.title) // "B A A"
```

因為有透過 property wrapper 的處理，這時候在 console 輸出的內容會是 `B A A` ，而不是前後有空白的 ` B A A ` 。

## 結

目前還沒摸清楚可以在實際專案中怎麼用，不過看來是個可以拿來做適度封裝的好工具。
接下來還要繼續去看 Projected Value 到底是什麼東西和可以怎麼用，看懂之後再來多寫一篇。

## 環境

- Xcode 11.3.1
- Swift 5.1
- Playground

## 參考

- [SE-0258 - Property Wrapper](https://github.com/apple/swift-evolution/blob/master/proposals/0258-property-wrappers.md) (官方)
- [Swift Book - Attributes](https://docs.swift.org/swift-book/ReferenceManual/Attributes.html) (官方)
- [NSHipster - Property Wrapper](https://nshipster.com/propertywrapper/)
- [Swift by Sundell - Property Wrapper in Swift](https://www.swiftbysundell.com/articles/property-wrappers-in-swift/)
windowsでRuby on Railsインストールからプロジェクト作成までの流れ

##windowsでRuby on Railsインストールからプロジェクト作成までの流れ

Railsは下記のコマンドでインストールできます。

```terminal
gem install rails
```

インストールが完了したら、下記コマンドでバージョン確認ができます。

```
rails -v
gem list rails
```
```
rails (6.0.2.1)
rails-dom-testing (2.0.3)
rails-html-sanitizer (1.3.0)
sprockets-rails (3.2.1)
```
特定のバージョンを追加したい場合は、下記のコマンドで追加できます。

```
gem i -v 5.2.4.1 rails
```
バージョンを確認すると、増えていることが分かります。

```
gem list rails
```
```
rails (6.0.2.1, 5.2.4.1)
rails-dom-testing (2.0.3)
rails-html-sanitizer (1.3.0)
sprockets-rails (3.2.1)
```

これでrailsのインストールが完了です。

次にrailsのプロジェクトを作成します。

```
rails new プロジェクト名
```
上記のコマンドで作成できますが、オプションを指定することもできます。

```
rails new hello -d mysql　　#データベースの指定
rails _5.2.4.1_ new プロジェクト名　　#railsのバージョン指定
rails _5.2.4.1_ new プロジェクト名 -d postgresql　
```
これでrailsのプロジェクトが作成できます。

```
rails s
```
上記のコマンドで起動することができます。

<hr>

途中でSQLiteのエラーが出たときは下記の記事が参考になるかと思います。

```
Could not find gem 'sqlite3 (~> 1.4) x64-mingw32' in any of the gem sources listed in your Gemfile.
```
https://prog-8.com/docs/rails-env-win


webpackerをインストールしたい時は下記コマンド

```
rails webpacker:install
```
設定ファイルのコメントと空行を除外するシェル芸

サンプル設定ファイルをそのまま動かしていると読みにくいことがある．そんなときにシェル芸を使う．

コメントが`;`の場合は以下．今回はPHP-FPMの設定ファイル．

```bash
grep -v '^;' www.conf | sed /^$/d
```

sedで空行が消せる．egrepで書くなら以下．

```bash
egrep -v '^(;.*)?$' www.conf
```

コメントが`#`や`//`の場合でも基本的に使える．
ふーん、Edgeじゃん

すみません。
ちょっと言ってみたかっただけのタイトルです。
ただMicrosoft Edgeについての記事ではありますので問題ないかなと。

先日ついに正式にChromiumをベースとした新しいMicrosoft Edgeがダウンロードできるようになりました。
macユーザーでも利用することができるのでこれで
わざわざwindows PCを起動してのwebの動作チェックをしなくてもすみそうです。
ただ日本での確定申告の影響により、Windows Updateを介しての自動配信はまだのようで、4月1日以降、順次開始する予定とのことです。
ただし日本ではWindows Updateを介しての自動配信はまだのようです。
その理由としましては確定申告が影響しているとのことで国税庁のサイトによると、確定申告に必要なe-Taxソフトを使用するための推奨環境は、WindowsではMicrosoft EdgeまたはInternet Explorer 11となっており、ChromeなどのBlinkエンジンベースのWebブラウザやFirefoxはサポートされていないため、Windows Updateを介しての自動配信は4月1日以降、順次開始していくとのことのようです。


<h2>Chromium版 Microsoft Edgeとは</h2>
ChromiumとはGoogleが中心となって開発されているオープンソースのWebブラウザです。
レンダリングエンジンにBlink、JavaScriptエンジンにV8を採用しているのでHTMLのレンダリングやJavaScriptの実行に関してGoogle Chromeと基本的に同一の結果となります。
<a href="https://www.microsoft.com/en-us/edge"><img width="1440" alt="スクリーンショット 2020-01-20 5.19.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/dc2b1553-44f6-4ea0-5645-6b9ef0aa5541.png">
</a>
ロゴも変わっています。
こっちの方がいいですね！

<h2>web製作者にとって</h2>
webの動作チェック検証などでieで相当苦戦させられてきましたのでやっとieから解放されるのかなと期待をしています！(実際まだまだ解放されることはないと思いますが…)
既存のIE専用のWebサイトが残っている企業向けの機能として、あらかじめ設定された特定のWebサイトを自動的にIE11と互換のレンダリング機能によってWebサイトを表示するIE モードも搭載されています。
そしてまだIE11のサポートはきれませんので安心できません！
サポートが切れるまでのカウントダウンをしてくれているサイトがありました。
<a href="https://death-to-ie11.com/"><img width="1426" alt="スクリーンショット 2020-01-20 5.33.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/4a05e587-1b41-ab8d-1439-af276e546274.png">
</a>
https://death-to-ie11.com/
deth to ie11 というのがなんとも言えませんね。
まだまだ先ですが少し悲しい気もしますね。


<h2>ブラウザシェア率</h2>
ちなみに現段階のブラウザシェア率を調べてみました。
下記のグラフは2019年1月から2020年1月現在までのブラウザシェアの状況です。
ソースは<a href="https://gs.statcounter.com/browser-market-share/desktop/japan/#monthly-201901-202001">StatCounter</a>より
![StatCounter-browser-JP-monthly-201901-202001-bar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/e79d2632-d5f8-afd0-3c14-db8b3552447f.png)
Chromeが圧倒的シェアを誇っています。
その次にIEが来るのが日本っぽさが出てますね。
ちなみに海外だとこんな感じです。↓
![StatCounter-browser-ww-monthly-201901-202001-bar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/73ebb324-9e7a-6c93-9789-dd5ca475da36.png)
Chromeの一強というのは変わりませんが、２位にFirefox、３位にSafariがきて、４位、５位でIEとEdgeという結果になりました。
Chromium版 Microsoft Edgeが出てChrome１強を崩せるのかが今後の楽しみです。


<h2>これから</h2>
まだまだIEでしか起動しないアプリとかありますので(特に日本)それらがどうなるかが今後の問題にはなってきそうですが、web製作者にとって明るい未来が見えてきたのではないかと思っています。

<br/><br/><br/>
##共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくは[Wantedly](https://www.wantedly.com/projects/134741)からお問い合わせください。
LiveData Builderを使ってコードをスッキリさせる


# はじめに
LiveData Builderを勉強したのでメモ代わりに投稿します。

# LiveData Builderとは？
`androidx.lifecycle:lifecycle-livedata-ktx`に含まれる拡張機能で、`liveData` 関数内でsuspend関数を呼び出し、LiveDataに値を直接反映させることができます。

[Android Developers](https://developer.android.com/topic/libraries/architecture/coroutines)内に解説があります。

また、[こちら](https://codelabs.developers.google.com/codelabs/advanced-kotlin-coroutines/index.html)に公式のコードラボがあります。

# リポジトリ
GitHubからリポジトリ情報を取得してリスト表示するサンプルを[こちら](https://github.com/nanaten/Try_LiveData_Builder)に上げてあります。

# 導入

LiveData Builderの導入にはlivedata-ktxの導入が必要です。

```groovy:build.gradle
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.2.0-rc03"
```

# LiveData Builderを使わない場合
通常、LiveDataを扱う場合は `MutableLiveData` を用いて以下のように記述すると思います。

```kotlin:ViewModel
    // MutableLiveDataで取得したいオブジェクトをラップ
    val data = MutableLiveData<Repos>()
    
    // 関数を定義
    fun getRepos() {
        viewModelScope.launch {
            try {
                // APIからデータ取得 ※getReposはsuspend関数
                val repos = api.getRepos()
                // postValueでdata内の値を更新
                data.postValue(repos)
            }
            catch (e: Exception) {
                ...
            }
        }
    }
```

```kotlin:MainActivity
    // viewModelを定義
    private val viewModel: ViewModel by viewModels()
    
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        // 関数呼び出し
        viewModel.getRepos()
        
        // dataの値を監視
        viewModel.data.observe(this, Observer {
            // 値が更新された時の処理
        })
    }
```

# LiveData Builderを使った場合

LiveData Builderを使うと以下のように記述することが出来ます。

```kotlin:ViewModel
    // LiveData Builder
    val data: LiveData<Repos> = liveData {
        try {
            val repos = api.getRepos()  // getReposはsuspend関数
            emit(repos) // emit()で値を更新する
        }
        catch (e: Exception) {
            ...
        }
    }
    // fun getRepos()は削除
```

```kotlin:MainActivity
    // viewModelを定義
    private val viewModel: ViewModel by viewModels()
    
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        
        // dataの値を監視
        viewModel.data.observe(this, Observer {
            // 値が更新された時の処理
        })
    }
```

ViewModel内の記述がかなりスッキリしたことが分かります。
`liveData { ... }`はいつ呼ばれるのか？という疑問があると思いますが、
**Viewが値を`observe`した時**になります。

LiveData Builderを使うことによって、

- コード量が削減できる
- MutableLiveDataをImmutableなLiveDataに置き換えることができる
- functionをActivity・Fragmentから呼び出さずに済む

などのメリットがあります。

Viewのロード時に一度だけAPIを叩くような場合は、`MutableLiveData`を使わずに`LiveData`で十分になるかと思います。

# おわりに
まだLiveData Builderを触り慣れてないので、他にもこんなメリットがあるよ！などのご意見お待ちしております。

今回の記事を書くにあたって、以下のリンクを参考にさせて頂きました。

- [ViewModelとKotlin Coroutinesの書き方あれこれ (stsnブログ)](https://satoshun.github.io/2019/12/android-viewodel-kotlin-coroutine/)
JavaScriptのプロジェクトをTypeScriptに移植する手順メモ

自分用メモです。

## 必要パッケージインストール
- `yarn add typescript @types/node` // TypeScript導入
- `yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier` // ESLint + Prettier導入
- `yarn add json-loader` // JSON読むやつ

## 設定ファイル生成･編集
### package.jsonのscriptsに以下を追加

```json
"scripts": {
  "tsc-init": "tsc --init",
  "watch": "tsc --watch",
  "build": "tsc"
}
```

### tsconfig.jsonの生成
- `yarn tsc-init`
- tsconfig.json内の以下を変更
    - targetを`es2015`
    - outDirを`./.dist/`
    - rootDirを`./src/`
    - types(配列)に`node`を追加

### ESLint + Prettierの設定
- `eslint --init`
    - _**TypeScriptを使用しないを選択**_
- .prettierrcに`"singleQuote": true`を追加
- .eslintrc.jsonに以下を追加

```json
{
  "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/eslint-recommended",

      "plugin:prettier/recommended",
      "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser"
}
```

あとは全コードをTypeScript化しておわり！
FTPのコマンドを実行BATファイルに含める方法

## ファイル数が多いのが嫌だ
* FTPをバッチファイルで実行するとき、対話形式で入力する部分をテキストファイル化して、FTPのコマンドラインオプション
でファイル名を指定します
* user、passwordを指定してUnixの/var/www/htmlにindex.htmlを送信する場合、以下のテキストファイルを用意します  

```TXT:FTP_CMD.txt
user
password
cd /var/www/html
ascii
put index.html
bye
```
実行するときは、`FTP -s:FTP_CMD.txt`のようにオプションでファイル名を指定します  
ちょっとしたスクリプトを実行するのにBATファイルとコマンドファイルの２つを用意しなければなりません
* そこで、Windows環境でバッチファイルとFTPコマンドを一つのファイルにできないかということ

## 基本的な構造
1. ファイル名の拡張子は.batにします
  拡張子を.batにすることによってダブルクリックでバッチファイルとして起動します
1. FTPのコマンドラインオプション -s: で自分自身を読み込むようにします  
  `FTP -s:"%~f0"`
  と指定すると自分自身をFTPコマンドとして実行します  
1. バッチファイルとして実行する部分はFTPにとって無視できるようコメント行になるようにしたいのですが、
FTPコマンドにはコメントに相当する命令がありません  
  そこで、FTPコマンドの`!`を利用します  
  FTP対話中に`!`を打つと、シェルにエスケープします  
  Windows環境ではDOSモードになります  
  そこで、`!REM`と入力すると、REMはDOSではコメントになるので、何もせずにFTPに制御が戻ります  
  この仕組みを利用して、  
  `!rem 2>Nul & @Echo off & @CLS`  
  のように書くと、FTPにとっては無害な行で、
  バッチファイルとしては、`!rem` がエラーになるけれども、エラーメッセージはNULにリダイレクトすることによって
  メッセージ出力が抑止され & のあとに記述してあるコマンドが実行されます
1. バッチ部分の最後はEXITを実行するようにすれば以降の行はバッチファイルとしては無視されます  
  `!rem 2> Nul & @PAUSE & @EXIT /b`


## 実際の例
  こんな感じで書けます  

  
```DOS:SAMPLE_FTP.BAT
!rem 2>Nul & @Echo off & @CLS
!rem 2>Nul & @ftp -s:%~f0
!rem 2>Nul & @pause & @exit
open HOSTNAME
USERNAME
PASSSWORD
cd /var/www/html
ascii
put test.html 
bye
```
・ HOSTNAMEの部分には転送先サーバーのホスト名またはIPアドレスを指定します
・ USERNAMEの部分にはログインユーザーIDを指定します
・ PASSWORDの部分にはパスワードを指定します

## 実行結果
![ftp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477637/2b412b39-ea1e-6722-49d4-573e580c1864.png)
VBSCRIPTを実行BATファイルに含める方法

## ファイル数が多いのが嫌だ
* VBSCRIPTをバッチファイルで実行するとき、CSCRIPTまたはWSCRIPTコマンドの引数として
VBSCRIPTが書かれたファイルのパスを指定します  
ちょっとしたスクリプトを実行するのにBATファイルとスクリプト記述ファイルの２つを用意しなければなりません
* そこで、Windows環境でバッチファイルとVBSCRIPT文を一つのファイルにできないかということ

## 基本的な構造
1. ファイル名の拡張子は.batにします
  拡張子を.batにすることによってダブルクリックでバッチファイルとして起動します
1. CSCRIPTのコマンドラインオプションで自分自身を読み込むようにします  
  `Cscript //NoLogo //E:VBScript "%~f0"`
  と指定すると自分自身をVBSCRIPTファイルとして実行します  
  `//E:VBscript`と書くことによってファイル拡張子がVBSでなくてもVBSCRIPTとして実行するようになります
1. バッチファイルとして実行する部分はVBSCRIPTにとって無視できるようコメント行になるようにします  
  `' 2> NUL & @CLS`  
  のように書くと、VBSCRIPTにとっては無害なコメント行で、
  バッチファイルとしては、`'` がエラーになるけれども、エラーメッセージはNULにリダイレクトすることによって
  メッセージ出力が抑止され & のあとに記述してあるコマンドが実行されます
1. バッチ部分の最後はEXITを実行するようにすれば以降の行はバッチファイルとしては無視されます  
  `' 2> Nul & PAUSE & EXIT /b`


## 実際の例
  こんな感じで書けます  

  
```DOS:VBSCRIPT_SAMPLE.BAT
' 2> Nul & @Cls & @Cscript //NoLogo //E:VBScript "%~f0" %* & @pause & @Exit /b
' ここから下がVBScriptのスクリプト文です
WScript.Echo "これは、VBScriptのEchoです"
WScript.Quit
```

## 実行結果
![VBSCRIPT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477637/78492d06-ed5f-096d-24e4-30511eb78dc4.png)
Web制作の初心者で知っていると便利な英単語一覧

#Web制作初心者制作で知っていると便利な英単語一覧

クラスの名前付けをしているとここは何てクラス名を付ければいいんだろうとか、参考にしたいソースを見た時にこれ何て読むのだろうとか、書けるけど読み方がわからなくて同僚と話すときにタジタジになってしまうなどあると思います。
web制作初心者の方や英語なんて日本にいるんだから使わないわ！と思っていた人や、英語の勉強を避けてきた人などが参考になればいいなと思ってまとめてみました。
よく使うやつと誤字しやすいつを載せています。

##クラス名一覧
**wrapper (ラッパー)**
・要素を内包する
　もっとわかりやすく言うとサラ○ラップのラップのように包み込むということ
・タイプミスしやすいので注意

**wrap(ラッパー)**
・wrapperをただ略しただけ

**container(コンテナ)**
・コンテナ
　スペル的に語尾を伸ばしたくなるけど伸ばさない方が伝わりやすい

**content(コンテント)**
・内容、中身
・コンテンツともいう人はいる

**common(コモン)**
・共通

**product(プロダクト)**
・製品、商品

**concept(コンセプト)**
・コンセプト
　conseptではないので注意

**index(インデックス)**
・索引

**inquiry(インクアリー)**
・問い合わせ
　クアリーって発音しながらquaryではなくquiryなので注意

**access(アクセス)**
・アクセス
　cとsが２つなので注意

**privacy(プライバシー)**
・プライバシー
　sではなくてcなので注意

**input(インプット)**
・入力

**confirm(コンファーム)**
・確認
 ファームって発音しておきながらfarmではなくてfirmなので注意

**finish(フィニッシュ)**
・完了

**section(セクション)**
・部分

**description(ディスクリプション)**
・説明

**summary(サマリー)**
・概要

**inner(インナー)**
・内側

**outer(アウター)**
・外側

**agree(アグリー)**
・同意

**address(アドレス)**
・住所
　dとsが二つずつあるので注意

**active(アクティブ)**
・アクティブ、有効

**disabled(ディセイブルド)**
・無効

**icon(アイコン)**
・アイコン

**breadcrumb(ブレッドクラム)**
・パンクズリスト
　普段つかわない言葉なんで馴染みがないのでわかりにくいですね

**navigation(ナビゲーション)**
・ナビゲーション

**nav(ナビゲーション)**
・navigationを略しただけ

**button(ボタン)**
・ボタン
　botton やbottom のように間違えてしますことが多いので注意

**bottom(ボトム)**
・下部
　ちなみに上からtop(トップ)、middle(ミドル)、bottom(ボトム)となる


<br/><br/><br/>
##共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくは[Wantedly](https://www.wantedly.com/projects/134741)からお問い合わせください。
2020年流行するであろうwebデザインのトレンド

ここ最近はざっくり言ってしまえばフラットデザイン2.0、マテリアルデザインが主流になっていると思います。
視認性もよく操作もしやすいのが好まれる傾向になっています。
そんな中でこれからあるいは、今も流行っているものもありますが2020年で流行するwebデザインを紹介したいと思います。
正直webデザインの流行ってすぐに広まるものでもないと思うのですでに流行っているものも紹介しています。
なるべくサイトも載せていこうと思いますが、ページが更新されて違うデザインになっていたり、サイトがなくなってしまっていたらごめんなさい。



##・ダークモードに対応したデザイン
ios13からiphoneでもダークモードが搭載されました。
すでに対応しているサイトもありますがまだまだダークモードに対応していないサイトが多く見られます。
目に優しいから、かっこいいからなどの理由で利用している人は多いと思いますのでこれからもっと増えてくるでしょう。
ただカラーが変わるのでブランドイメージとかの兼ね合いもあるのでなかなか難しい部分ではありますが…
<img width="1440" alt="スクリーンショット 2020-01-20 7.15.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/31c6d842-a129-91b4-e718-2957c46893c9.png">
https://www.webcreatorbox.com/tech/dark-mode


##・余白スペースを多く利用したデザイン
最近のwebサイトはフルスクリーンの画像を背景に設定しているページが多く存在しますが、
あえて画像をフルスクリーンサイズにせず、空いた余白をうまく利用することによってその画像や文字を引き立たせ、
伝えたいコンテンツをうまく伝えることができる作り方になっています。

<img width="1435" alt="スクリーンショット 2020-01-20 7.00.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/71c3c279-dde5-201c-8bd0-6eb597e4a409.png">
https://www.crazy.co.jp/

<img width="1431" alt="スクリーンショット 2020-01-20 6.58.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/a825cc6d-b022-ba6a-5329-ba02c7a787d6.png">
https://www.rainbow.co.jp/


##・3Dアニメーションを利用したデザイン
アニメーションを利用したサイトが増えてきましたが、
さらにこれからは3Dイラストをアニメーションさせる時代になってくるのではないかと思います。
PCのスペックも昔と比べて格段に上がりwebサイトでも表現できるようになってきたと思います。
もちろんそれでもパフォーマンスの向上も必要にはなりますが…

<img width="1433" alt="スクリーンショット 2020-01-20 6.48.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/61d873e2-269a-5379-08c5-89169141f610.png">
https://w-wired.com/ww/pc/




##・イラストを多く使ったデザイン
イラストを使うことで硬いイメージの題材でも親しみのあるものにすることができるのと、とてもわかりやすく物事を伝えることができるのでデザインになります。

<img width="1432" alt="スクリーンショット 2020-01-20 6.50.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/4eab7dff-1a2c-7197-f4a9-dc9783e1e547.png">

https://payme.tokyo/




##・スクロールに合わせてアニメーションが展開されるデザイン
google pixel4 や macbook pro のページが主なところかと思います。
次はどんなアニメーションが起こるんだろうとスクロールしたくなる感情を揺さぶられます。

<img width="1440" alt="スクリーンショット 2020-01-20 6.41.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/3f57926a-c980-753e-aa46-8093e6c73cd7.png">
https://www.apple.com/jp/macbook-pro-16/

<img width="1431" alt="スクリーンショット 2020-01-20 6.42.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/91c6aa12-c78c-2ccf-a3da-3083c6466539.png">
https://store.google.com/jp/product/pixel_4

<br/><br/><br/>
##共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくは[Wantedly](https://www.wantedly.com/projects/134741)からお問い合わせください。
icsファイルの仕様について調べてみた

# はじめに
携わった案件で、 `icsファイル` の内容を解析・読取る必要があり、
仕様について調べたため、個人のメモも兼ねて、覚書としてまとめていきたいと思います！

# 参考サイト
[RFC-2445](http://www.asahi-net.or.jp/~CI5M-NMR/iCal/rfc2445.txt)
[iCalendar仕様](http://www.asahi-net.or.jp/~CI5M-NMR/iCal/ref.html)
[iCalendar - Wikipedia](https://ja.wikipedia.org/wiki/ICalendar#%E3%82%B3%E3%82%A2%E3%83%BB%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88)

# icsファイルとは
`iCalendar ` と呼ばれるスケジュールの標準フォーマットを表すファイルです。
MIMEタイプは `text/calendar` 、文字コードはデフォルトで `utf-8` が使用されます。

中身はプレーンテキストなので、普通にテキストエディタで開いて、フォーマットに沿った形で記述することができます！
OSによって挙動は変わりますが、作成したファイルを開くと、標準のカレンダーアプリに内容が反映されます。

# 構文について
icsファイルの具体的な構文については下記のような形です。
構文は、 [RFC-2445](http://www.asahi-net.or.jp/~CI5M-NMR/iCal/rfc2445.txt) でまとめられており、
一番シンプルなもので下記のようなものになります。

```
BEGIN:VCALENDAR
　VERSION:2.0
　PRODID:-//hacksw/handcal//NONSGML v1.0//EN
　BEGIN:VEVENT
　　DTSTART:19970714T170000Z
　　DTEND:19970715T035959Z
　　SUMMARY:Bastille Day Party
　END:VEVENT
END:VCALENDAR
```

それぞれの行の詳細について触れていきます。

## BEGIN, END
例：
　`BEGIN:VCALENDAR`
　`END:VCALENDAR`

開始タグの意味合いで `BEGIN` 、終了タグの意味合いで `END` が使用されているようです。
`VCALENDAR` 等のコンポーネントは、必ずこちらを開始/終了のタグとして扱います。

## VERSION
例：
　`VERSION:2.0`

これは該当.ics形式のバージョンを示しています。
RFC-2445で規定されているのは2.0で、恐らくそのままで大丈夫です。

## PRODID
例：
　`PRODID:-//hacksw/handcal//NONSGML v1.0//EN`

ファイルの作成者を表す情報です。
必須項目にはなりますが、特に決まったフォーマットはないみたいです。

## VEVENT
例：
　`BEGIN:VEVENT`
　`END:VEVENT`

この部分が具体的なイベントを表すタグになります。
`VCALENDAR` と同様、開始タグの意味合いで `BEGIN` 、終了タグの意味合いで `END` が使用されます。

## DTSTART
例：
　`DTSTART:19970714T170000Z`

イベントの開始日時です。
定期的なイベントの場合は、最初のイベント分の開始日時になります。

## DTEND
例：
　`DTEND:19970715T035959Z `

イベントの終了日時です。
定期的なイベントの場合は、最初の分の終了日時になります。

## SUMMARY
例：
　`SUMMARY:Bastille Day Party`

イベントの件名、見出しに相当するものです。

# まとめ
上記までの内容が一番シンプルな構成の `icsファイル` になります。
[RFC-2445](http://www.asahi-net.or.jp/~CI5M-NMR/iCal/rfc2445.txt) を確認すると、
まだまだ色んなオプションがありそうなので、そちらは別途当記事・または別記事としてまとめていきたいと思います。
凄くシンプルな内容となってしまいましたが、お付き合い頂きありがとうございました！

# 共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくは[Wantedly](https://www.wantedly.com/projects/134741)からお問い合わせください。
お待ちしております！
Vue.jsにおけるBootstrap4の導入方法

# はじめに
はじめまして、Qiita初投稿です。
最近Vueを勉強し始め、Bootstrapと組み合わせてポートフォリオ作ろうと思い調べていたのですが、Vue（vue-cliの3.0系で作成したプロジェクト）に対応した連携方法がなかなか見つからなかったため、メモがてら記録。


[Vue.js を vue-cli を使ってシンプルにはじめてみる](https://qiita.com/567000/items/dde495d6a8ad1c25fa43#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)
[Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！](https://qiita.com/masa08/items/3474d97a1283dfc275c9)


# プロジェクト作成
Vue vue-cliの3.0系をつかって作成しました。

```
$ vue create my-project
```

vue-cliの3.0系を使う場合、公式の推奨はvue createとのこと（下記参照）
[vue init と vue createの違い](https://qiita.com/teraco/items/74a6104d3e201c4f654e)

# Bootstrap4を導入
2.0系ではsrc/router/index.jsというファイルがあったそうですが、上記方法で作ったプロフェクトには該当するものが見当たらなかったため、若干困りました。
そこで、/src/main.jsにbootstrapの記述を追記。追記内容は公式リファレンス参照
https://bootstrap-vue.js.org/docs

**2020/01/22追記：これだけでは一部bootstrapが動作しないため、jquery,popperをインストールする必要がありました**


```
npm install --save jquery popper.js
```


↓/src/main.jsはこんな感じになりました

```javascript:/src/main.js
import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

//-----------------追加-----------------
require('jquery/dist/jquery')
require('popper.js/dist/umd/popper')
require('bootstrap/dist/js/bootstrap')
//-----------------追加-----------------

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

Vue.config.productionTip = false

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

# 確認
とりあえずbootstrapのボタンを追加

```vuejs:/src/App.vue
<template>
  <div>
    <a class="btn btn-primary" href="#" role="button"> Bootstrap</a>
  </div>
</template>
```

bootstrapが適応されていることを確認！
<img width="177" alt="スクリーンショット 2020-01-20 10.11.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286945/c8aefd8e-1729-60ea-51ea-6768d4825987.png">
基本情報14週目(01/20週)

# 目標と結果
### 目標
- 参考書をみる。
- [基本情報技術者試験ドットコム](https://www.fe-siken.com/)を使う。
- 午後で通用する様に内容を理解する。
    - アルゴリズムとプログラミングの勉強をする。
    - 午後問題で重視する分野を見つける。
- 大学の諸々を片付ける。

### 結果
- 卒論は終わりました！
    - 学内で発表があるので資料作成云々で結局は1月丸々使うことになりそうです……
- 午後対策講座に申込みました。
    - 1回(2/16)
        - アルゴリズム
    - 2回(2/23)
        - 表計算とCASLⅡ

# 振り返り
### Keep
- なし。

### Problem
- なし。

### Try
- 2、3月の予定を立てる。
- 午後試験の概要を改めて把握する。
    - 2月から気持ちを切り替えて取り組みたい。
【作業効率アップ】Visual Studio CodeでLaravel開発する時にワークスペースを少し見やすくする設定

Laravelに限りませんが、VisualStudioCodeなどを使って開発する時に普段触らないファイルやディレクトリが沢山表示されてワークスペースが見にくくなります。


このように。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138682/ed66e6b7-9acb-b237-f61a-073defe6e059.png)

これを解消するための設定例を書きます。

# 課題

普段触るのは`app`,`config`,`resources`,`routes`,`tests`,`.env`あたりでしょうか。

それ以外はファイルを探す時の邪魔になるのでワークスペースに表示しないようにします。

# settingsファイルを配置

ワークスペースの直下に`.vscode/settings.json`というファイルを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138682/830afd0a-d256-2b18-0214-75dfc867894a.png)

# 非表示にするファイルを指定

.vscode/settings.jsonに以下のように記述します。

```json:.vscode/settings.json
{
    "files.exclude": {
        "**/.git": true,
        "**/.vscode": false,
        "**/bootstrap": true,
        "**/database": true,
        "**/public": true,
        "**/storage": true,
        "**/vendor": true,
        "**/xdebug_log": true,
        "**/.env.example": true,
        "**/.editorconfig": true,
        "**/.gitattributes": true,
        "**/.gitignore": true,
        "**/.styleci.yml": true,
        "**/artisan": true,
        "**/composer.json": true,
        "**/composer.lock": true,
        "**/package-lock.json": true,
        "**/package.json": true,
        "**/phpunit.xml": true,
        "**/README.md": true,
        "**/server.php": true,
        "**/webpack.mix.js": true
    }
}
```

ファイルを保存すると設定がすぐに反映されます。

# 結果

スッキリしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138682/65ef3e29-9aa6-0960-b18a-94059e8a037c.png)

これでファイルが探しやすくなった。

設定はお好みで変えましょう。

以上です。

---

[「VS CODE」カテゴリーアーカイブ – mrkmyki＠フリーランスブログ](https://mrkmyki.com/category/%e3%83%84%e3%83%bc%e3%83%ab/vs-code/)
[Swift] IntやDoubleなどの数字オブジェクトを2倍にする関数でジェネリクスを使ってみた

# 概要

業務でInt型やDouble型を単純に2倍する関数を作りたい時に戸惑いましたのでググってみました。

```swift

    /// これを型ごとに作ると、関数が増えてしまって冗長なので書きたくない
    func multipleValue(_ value: Int) -> Int {
        return value * 2
    }
    
    func multipleValue(_ value: Double) -> Double {
        return value * 2
    }
    
    func multipleValue(_ value: CGFloat) -> CGFloat {
        return value * 2
    }

    multipleValue(2) // 4
    multipleValue(3.14) // 6.28
}
```

これをクールに一つの関数にまとめたいと思いました。
さてどうすればいいのかを考えるのが今回のテーマです。

## ジェネリクスを使う

すぐに思いつくやり方は、ジェネリスクでパラメータを一つにまとめる方法です。

ジェネリスクはSwift のドキュメントでこう記されています。

[英語版Swiftドキュメント](https://docs.swift.org/swift-book/GuidedTour/GuidedTour.html)


ジェネリクスの用法としては
[[Swift]ジェネリクスについて](https://qiita.com/ktaguchi/items/fc260a0af506f258177d)

[ジェネリック関数 | ジェネリクス | Swift](http://www.studiogalago.com/the-swift-programming-language/language-guide/generics/generic-functions/)

が参考になります。

それはいいとして、ジェネリクスを使ってこんな風に書きたいです。

```swift
    /// Tがジェネリックパラメータ
    func multipleValue<T>(_ value: T) -> T {
        return value * 2
    }
    
    multipleValue(2) // 4
    multipleValue(3.14) // 6.28
}
```

これでいけるかと思ったのですがビルドエラーになってしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44392/49cb37da-7f81-c534-5e25-6348555a2c1b.png)

エラーの内容は

```sh
Binary operator '*' cannot be applied to operands of type 'T' and 'Int'
```

どうやらジェネリクスに二項演算子「*」などのoperatorが使えないみたいなエラーでした。

そのため、てっきりジェネリクスで数値を2倍にできないのかと諦めかけましたが、
エラーの文章からググってみましたら解決策が見つかりました。

[Binary operator '+' cannot be applied to two 'T' operands](https://stackoverflow.com/questions/34125637/binary-operator-cannot-be-applied-to-two-t-operands)

ということで Numeric protocol に準拠させたら使えるそうです。

```swift
    /// Tがジェネリックパラメータ
    func multipleValue<T: Numeric>(_ value: T) -> T {
        return value * 2
    }
    
    multipleValue(2) // 4
    multipleValue(3.14) // 6.28
}
```

これで目標のあらゆる数値を単純に2倍にする関数が作れました。

## Numeric とは何なのか

[Numeric](https://developer.apple.com/documentation/swift/numeric)

乗算をサポートする値を持つ型だそうです。

Numericプロトコルを汎用制約として使用すれば、標準ライブラリ内の任意の数値型を操作する関数が作れるようになるとの事でした。

これで数値を操作する汎用メソッドが作れます。

と調べた後にこれについて詳しい資料がありましたので最後に貼って終わります。

[Protocol-Oriented Integers に想うジェネリックプログラミングの未来](https://www.slideshare.net/tomohirokumagai54/protocoloriented-integers)
Jenkins、gitlab連係

## CI/CD
これについては今さら自分の方で掘り下げることもないので、割愛。デプロイとテストの自動化。

## GitとJenkinsの連係
やっぱりGitでコミットしたらUTは勝手に流してほしいし、マージしたらビルドとデプロイぐらい自動化しておきたい。
なので、そこの連携の仕方だけ記録。

## Gitlab
- Jenkins用のアカウントを作っておく
- ジョブ登録時のsevice idをsettingのintegrations、webhookに登録

## Jenkins
- GitaLabのplugin入れる
- 管理画面からGitLabにアクセスする認証情報追加（登録していたアカウント）
- ジョブ登録

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260635/e8247199-026e-6ab7-7b9e-8966aede5b0c.png)
reactとその周辺ライブラリをまとめて使う


## 経緯
Reactやその周りのエコシステムを説明する機会が増えたので、
記事にまとめることにしました。
早速ですが、Reactから説明していきます。

## React
公式に載ってるシンプルなコードがこちら

```js
function
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);
```

慣れていないとjsとHTMLが混在していて見づらいという印象かもしれませんね。
仮想DOMなのでjsで要素を操作・描画しているという感覚です。

下のReactDOM.renderというところでHelloMessageにname:"Taylor"というパラメタを渡しています。
HelloMessageクラスではrenderメソッドで、画面描画する要素を返しています。
propsというのは親から受け取るパラメタをもつオブジェクトです。

## redux
Reactはview部分だけであり、他のエコシステムと組み合わせることで真価を発揮します。
その最たる例がreduxで、fluxという概念を元に状態を管理し、仮想DOMを操作していきます。
FluxとReduxの概念を理解する部分はこちらの方が詳しい記事を書いているので、参照してください。
https://qiita.com/syossan27/items/7e1b2e07ac68b96bdaa7

## react-router
reduxが絡むとreact-routerだけでなくreact-redux-routerが必要になってきます。
状態管理による遷移が発生するためです。

## redux-saga
これは[副作用のある処理](https://ja.wikipedia.org/wiki/%E5%89%AF%E4%BD%9C%E7%94%A8_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0))を書くためのライブラリです。
Googleの検索結果に意図したファビコンが表示されない

# 背景
GoogleのPC検索結果にファビコンが表示されるようになった。
が、指定のファビコン画像ではなく、タッチアイコンに指定している別の画像が表示されてしまっていた。

# 現状
問題のサイトではアイコン類を以下のように指定。

```html
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="192x192" href="/touch-icon.png">
```

タブやお気に入りのファビコンは `favicon.ico` が表示されているのだが、
検索結果は `touch-icon.png` が表示されてしまっている。

検索結果でも `favicon.ico` を表示したい。

# Googleのガイドライン
Googleのガイドラインは以下のページに記載されている。

* [検索結果に表示されるファビコンを定義する](https://support.google.com/webmasters/answer/9290858?hl=ja)

# 疑いポイント１：アイコンのサイズ

[ガイドライン]((https://support.google.com/webmasters/answer/9290858?hl=ja)) では以下のように指定されている。

> ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください

対して、問題のサイトのアイコンのサイズは `64 x 64`。
サイズ違反が原因？

# 疑いポイント２：アイコン系の記載順
[ガイドライン]((https://support.google.com/webmasters/answer/9290858?hl=ja)) では以下のように指定されている。

> ホームページのヘッダーに次の構文の <link> タグを追加します。
<link rel="shortcut icon" href="/path/to/favicon.ico">
rel
　次のいずれかを指定できます。
　・"shortcut icon"
　・"icon"
　・"apple-touch-icon"
　・"apple-touch-icon-precomposed"

対して、問題のサイトではアイコン系の設定を以下のように２つ記載している。

```html
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="192x192" href="/touch-icon.png">
```

記載順から `apple-touch-icon` がファビコンとして認識されている？

# 結論
「疑いポイント：２」のアイコンの記載順が原因っぽかった。
以下のように記載順を修正することで、Googleの検索結果に `favicon.ico` が表示されるようになった。
※ただし、反映まで２日ほどかかった。

```html
<link rel="apple-touch-icon" sizes="192x192" href="/touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
```

サイズについては、`64 x 64` のままで表示されるようになったので、
ガイドラインに沿っていなくてもよしなにやってくれるようです。
SQL*Plusで実行するSQL文をBATファイルに含める方法

## ファイル数が多いのが嫌だ
* OracleのSQL*Plusをバッチファイルで実行するとき、SQL文が書かれたファイルのパスを指定します  
ちょっとしたSQLを実行するのにBATファイルとSQL記述ファイルの２つを用意しなければなりません  
Unixのシェルスクリプトではヒアドキュメントの仕組みを利用すると、スクリプト内に標準入力のテキスト
を記述できるため、１ファイルに収めることができます
* そこで、Windows環境でバッチファイルとSQL文を一つのファイルにできないかということ
 
## 基本的な構造
1. ファイル名の拡張子は.batにします  
拡張子を.batにすることによってダブルクリックでバッチファイルとして起動します
1. SQLPLUSのコマンドラインオプションで自分自身を読み込むようにします  
  `SQLPLUS ＠"%~f0"`  
  と指定すると自分自身をSQLファイルとして実行します  
1. バッチファイルとして実行する部分はSQL*Plusにとって無視できるようコメント行になるようにします    
  SQL*Plusの入力SQLは以下のコメント形式があります
  
  ・ 行頭に`REM`と記述すると、その行はコメント行となります
  ・ 行の途中に`--`があると、行末までコメントとなります
  ・ `/*`と`*/`に囲まれた部分はブロックコメントとなります
  
  一方、バッチファイルでも行頭の`REM`はコメントとして扱われます
  また、`^`が行の途中にあると次の行も併せて１行として処理されます
  
  この仕組みを利用して、以下のような構造にします

  ```DOS:sample.bat
  1 REM ^
  2 /*
  3 バッチコマンド行
  4 SQLPLUS @"%~f0"
  5 EXIT
  6 */
  7 SQL文
 ```
  バッチファイルとしては、1,2行目がコメントとなるので、3,4,5行と順に実行し、5行めのEXITで終了します  
  一方、SQLPLUSの入力文としては、1行目は行コメント、2～6行目まではブロックコメントになるので、7行目のSQLが実行されます

## 実際の例
  こんな感じで書けます  

  
```DOS:ORA_SQLPLUS.BAT
Rem ^
/*
@Echo Off
Cls
SET Path=%Path%;C:\Program Files\instantclient_12_2
SET CONN=user/pass@hostname:1521/pdb1
SET NLS_LANG=japanese_japan.ja16sjis
sqlplus %CONN% @"%~f0"

Pause
Exit /b
*/
-- ここから SQL*Plus で読み込む SQL
DELETE FROM SAMPLE_TBL
 WHERE DEL_FLG = '1';
COMMIT;
EXIT
```

## 実行結果
![SQLPLUS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477637/075aa2e0-eb7c-d681-3a44-1b24538729c0.png)
社内の月朝ゆるもく会で作ったバーチカルメニュー


毎週月曜朝、7:00~8:30くらいでゆるっともくもく会をやり始めました。
頑張って早起きして、アウトプット出していきたい。。。

## 成果物

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="umaniel" data-slug-hash="OJPaNpe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="circle">
  <span>See the Pen <a href="https://codepen.io/umaniel/pen/OJPaNpe">
  circle</a> by UMA (<a href="https://codepen.io/umaniel">@umaniel</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

その昔、横方向の開きメニューを作ったことがあったので、縦方向でも作ってみようと思い、やってみました。

## やってること
特に難しいことはしておらず、classの付け替えでheightが変わるだけです。

``` css
[class*="home--"].active {
  height: 100%;
}
[class*="home--"].disactive {
  height: 0%;
}
```

純javascriptはclassの付け替えが面倒。。。

``` javascript
const home = document.querySelectorAll("div[class*='home--']");

const active = _self => {
  const selfClass = _self.className.replace(/^(home--(top|bottom|center)).*/, "$1");
  for (i = 0; i < home.length; i++) {
    home[i].className = home[i].className.replace(/^(home--(top|bottom|center)).*/, "$1");
    home[i].className += selfClass == home[i].className ? " active" : " disactive";
  }
};

const disactive = () => {
  for (i = 0; i < home.length; i++) {
    home[i].className = home[i].className.replace(/^(home--(top|bottom|center)).*/, "$1");
  }
};
```
PowerShellでファイルのフルアクセス権を特定ユーザに付与する

**短期派遣を雇うから、どこどこのフォルダに対してのみ、派遣さんが読み書きできるようにして！**という依頼がたまにある。
UNIXなら`chown -R`と`chmod -R`で一括設定できたのだが、WindowsのGUIだとこれが面倒くさい。しかも、オーナー権限の無いファイルが途中に混じっていたりすると Administrator でも自由が効かず、いちいちエラーで止まるからイラつく。

というわけで、コマンドラインから一括変更できるPowerShellスクリプトを書いてみた。
*$folder* と *$users* を書き替えてもらえばそのまま動くようになっている。

```powershell
$folder = "\\fileServer\本社\人事総務部\給与担当\給報"
$users = @("mydomain.net\spot_user1", "mydomain.net\spot_user2", "mydomain.net\spot_user3")

# サブフォルダ含めて、所有者をadministratorsグループに変更
cmd /c "TAKEOWN /F $folder /R /A"

# サブフォルダ含めて、フルアクセス権を付与
$users | %{ cmd /c "ICACLS $folder /GRANT ${_}:F /T" }
```

ちなみに、`takeown`はUNIXでいう`chown`のことで、オーナー権限を強制的に奪うコマンド。`icacls`はUNIXでいう`chmod`のことで、権限を変更するコマンドである。
ルータとハブとスイッチと

今回は、ルータとハブとスイッチについての違いをまとめてみた。

まとめてみようと思った理由としては、機器を見たときにそれがルータなのかハブなのか、スイッチなのか見分けることができなかったので、見分ける方法を知りたいと思ったから。

答えを述べると、見た目だけで見分ける方法はないということ。

これはルータ

![c0cf635f-8987-4395-9d4e-1289536bdf43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421663/62e44ba3-6f5b-dc54-83f5-ab3854e4c268.jpeg)



ではどのように見分ければいいのか。

まずは機器の特色から見ていく。

 

▼ルータ

2つのネットワーク（LANとWAN）がある

レイヤ3（ネットワーク層/IPアドレス）で動作

ルータ+ハブという機器がある

 

▼ハブ

複数ポートある

ルータ+ハブという機器がある

全ての機器に情報を与える

 

▼スイッチ

レイヤ2（データリンク層/MACアドレス）で動作

決まった機器にしか情報を与えない




以上のような特色から、次に機器を見分ける方法について考えてみた。

 

▼ルータとハブ

2つのネットワークがあったらルータ、1つのネットワークだとハブ。

 

▼ルータとスイッチ

2つのネットワークがあったらルータ、1つのネットワークだとスイッチ。

 

▼ハブとスイッチ

確かめたい機器に機器を3つ繋いでポートが光るのはハブ、光らないのがスイッチ。

※スイッチの場合でも設定したら3つ光る可能性がある。





内容としては以上だが、実際に繋がれている機器を見るのが一番早く覚えれそう。
JIRAを活用してスクラムを活かす

## JIRA使えてますか
プロジェクトでタスク管理をする上で欠かせなくはないけど、後に分析や結果の提示をするためには便利なAtlassianのソフトウェアですね。プロジェクトやチームによって設定や使い方はまちまちなので、どれが良いということはないですが、スクラム開発を進める中で便利だった設定を紹介しておこうと思います。

## 優先度
皆さん使ってると思いますが、優先度とアイコン表示の設定です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260635/989d8f92-2a4c-7716-54b8-2b84c13d7de3.png)

## Webhook
チャートツールやメール等で通知できるので、確認漏れを無くせました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260635/2c241d27-9295-e900-570a-c70700418176.png)

## カスタムフィールド
項目が多いので不要なもの無くし、時間管理を追加するなどして利便性を上げました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260635/ba4b1aa2-4d4d-f52b-66c2-2dc2cea66758.png)

## ボード設定（ステータス、見積もり時間）
ボードのステータス、ワークフロー、見積もり時間を、ボード画面右上のプルダウン⇒ビルダーから設定できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260635/084fa972-6f9c-f685-88b6-c9efb8cc5dcc.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260635/28ac7854-d5b0-bc0d-c051-5966e3c5df77.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260635/a066f007-19cf-6447-06dc-95edadaeb9b6.png)


時間入力やステータスのカスタマイズはスクラム開発であると便利ですね。
ステータスはチームのポリシーによって違いますし、時間を入れて予実を計ることで改善していけます。

## バックログの受け入れ条件、終了条件追加
しっかりと受け入れ条件と終了条件を記載することは重要です。
全員の認識を完全に一致させることは難しいので、見える形で共通認識を残した方が認識祖語が起きません。
PO側が作成しておき、プランニング時に認識を合わせることでスムーズにイベントが進みます。
また、タスクにも設定できる（少し面倒）のでDEV内での認識合わせにも使えます。
[アドオン](https://marketplace.atlassian.com/apps/1216137/agility-checklist-for-jira-free?hosting=server&tab=overview)

## 進め方
スクラムでのJIRAを使った進め方は簡易的ですが以下の流れでやることが多かったです。


1. スクラムボードにPBLを作成(PO)
1. ストーリーや説明、条件を記載(PO)
1. プランニングでPBLと優先順位の確認(チーム) 
1. ストーリーポイントの見積もり(DEV)
1. PBLにタスク追加、見積もり時間の入力を行う(DEV)
1. バーンダウンチャートを用いて日々の消化状態を確認(チーム)
1. レビュー時に受け入れ条件を確認しながらチェックを入れていく(チーム)

## まとめ
うん。すごく普通の設定しかしてないですね。
【PHP入門をローカル開発環境で学習する時の手順】【備忘録】

【PHP入門をローカル開発環境で学習する時の手順】

［vagrant@localhost php_lessons］$〜

の状態にする迄の手順は、

https://bit.ly/30CrL6L


を参照しつつ、手順11で、cyberduck上のphp_lessonsフォルダをダブルクリック


手順13で、ターミナル上で、


$ cd php_lessons


手順14で、


［vagrant@localhost php_lessons］$〜

を確認して、完了。



補足：

画面上を綺麗にしたい場合、

$ clear　

もしくは、

control＋L

で、できます。




【index.phpをSublime Text等で編集した後ブラウザで表示させる手順】

index.phpなどのphpファイルをブラウザ上で表示させるには、Webサーバーが必要。

ローカル開発環境にもWebサーバーは入っているみたいですが、

設定が面倒なので、

今回はPHPが用意している簡易的な「ビルトインWebサーバー」を使います。



【手順】

①［vagrant@localhost php_lessons］$〜
となっているのを確認する


②$ ip a（←これでこのローカル開発環境のIPアドレスを確認できる）


③192.⚪︎⚪︎⚪︎.⚪︎⚪︎.⚪︎⚪︎　というのを控える


④$ php -S 192.⚪︎⚪︎⚪︎.⚪︎⚪︎.⚪︎⚪︎:⚪︎⚪︎⚪︎⚪︎（←これでビルトインサーバーが立ち上げれる）
※「:の後ろの番号」は、ポート番号。
必要に応じて、ポート番号をつける。
※必要に応じて、と動画の説明にはありましたが、
試しにポート番号無しで入力すると、
「Invalid address:〜」と出たので、そのままポート番号を入力すべきですね。


⑤http://192.⚪︎⚪︎⚪︎.⚪︎⚪︎.⚪︎⚪︎:⚪︎⚪︎⚪︎⚪︎をブラウザ上で検索する

これで確認できる。


完了




【学習を正常に終了する時の手順】

①contorol +C


②［vagrant@localhost php_lessons］$〜
となっているのを確認する


③$ exit（これで仮想マシンからログアウトできて、mbpの操作に戻る） ※mbpはMacBook Proのこと。


④$ vagrant suspend（これで仮想マシンを停止できる）※5秒ほどかかる。


⑤$ exit（これでターミナルを終了できる）


完了