OmniAICreator/Qiita-1.07M huggingface dataset:
オブジェクトの参照関係を調べる

###構文

```
SELECT
    name,
    referenced_type,
    referenced_name
FROM
    user_dependencies
WHERE
    type = '<参照元オブジェクトの種類>'
AND
    referenced_name = '<参照先オブジェクトの名前>'
```   


###使用例一覧

```
col OWNER for a20
col NAME for a30
col REFERENCED_TYPE for a20
col REFERENCED_NAME for a30

--全オブジェクト確認
SELECT owner, name, referenced_type, referenced_name FROM dba_dependencies 
WHERE referenced_name = '<TARGET_OBJECT>';

--ビュー確認
SELECT owner, name, referenced_type, referenced_name FROM dba_dependencies 
WHERE type = 'VIEW' AND referenced_name = '<TARGET_OBJECT>';

--プロシージャ確認
SELECT owner, name, referenced_type, referenced_name FROM dba_dependencies 
WHERE type = 'PROCEDURE' AND referenced_name = '<TARGET_OBJECT>';

--ファンクション確認
SELECT owner, name, referenced_type, referenced_name FROM dba_dependencies 
WHERE type = 'FUNCTION' AND referenced_name = '<TARGET_OBJECT>';

--パッケージ確認
SELECT owner, name, referenced_type, referenced_name FROM dba_dependencies 
WHERE type = 'PACKAGE' AND referenced_name = '<TARGET_OBJECT>';

--パッケージボディ確認
SELECT owner, name, referenced_type, referenced_name FROM dba_dependencies 
WHERE type = 'PACKAGEBODY' AND referenced_name = '<TARGET_OBJECT>';

--トリガー確認
SELECT owner, name, referenced_type, referenced_name FROM dba_dependencies 
WHERE type = 'TRIGGER' AND referenced_name = '<TARGET_OBJECT>';

```


参考サイト：備忘録（ビューを調査する）
URL：http://bag-end.hatenablog.com/entry/2014/01/02/110552

dependencies・・・依存関係という意味
クレカがなくても基板外注できました

# はじめに
(早急にやり方が知りたい方は**「クレジットカードなしで外注する」**まで飛んでください。)
　最近、趣味でちょっとした工作をする際などに使用する基板を作りたいと思うようになりました。緑や黒のプリント基板って高級感ありますし、製品みたいでかっこいいですよね。
# 基板を作る手段
　そこで、基板を自作しようと考えたところ、私の環境では主に以下の3つの方法が挙げられました。
######1. ユニバーサル基板にすずめっき線で配線
######2. CNCで生基板をドリルやエンドミルで加工
######3. プリント基板を中華メーカーに外注

1.と2.については、小規模なものは問題なくできますが、両面基板や表面実装部品がある場合は製作の難易度が上がります。ユニバーサル基板は耐久性の維持が難しく思われますし、CNCだと各工具の切り込み深さや加工時の原点取りなどで加工ミスしてしまうことが考えられます。

　ということで3.の「プリント基板を中華メーカーに外注」を目指して進めていきます。

# 早速pcbgogoで手続き
　中華の基板外注メーカーはたくさんあります。今回はpcbgogo (https://www.pcbgogo.jp/) を利用しました。サイトが日本語で必要事項などを記入しやすいからです。
![SnapCrab_プリント基板製造・実装｜短納期基板製作｜プリント基板実装 - PCBGOGO - Google Chrome_2021-2-17_14-31-2_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399916/bc2862e4-b817-9cde-fe00-ab332c07c1e1.png)

早速会員登録してアカウントを作成します。基板の仕様など必要事項を入れて見積もりします。これらについては多くの方が議論されていますので「基板外注　やり方」などで検索してください。
　
　しかし、ガーバーデータの確認が通ったところで発注しようとするとクレジットカード番号の入力を求められます。
####ちなみに私はクレカは持っていません…
しかし、クレカがなくても外注はできます！その体験を以下に記載していきます。

# クレジットカードなしで外注する
　前置きが長くなってしまいましたが、結論から申し上げると「**バニラvisaカード**」(https://www.vvgift.jp/) を使用します。
端的に言うとクレジットカードのプリペイドカード版です。ファミマなどでこれを**必要な金額分購入し、クレジットカードの代わりとすることができます。**今回は3000円分購入しました。

しかし、オンラインショッピングで使用する際は、**バニラvisaのホームページよりカードの登録を行う必要があります。**今回の基板外注もその対象です。(https://vvgift.jp/online.action#nbb)
登録が完了すると「Online Shopping OK!」の赤いリボンが添付されます。

![SnapCrab_NoName_2021-2-17_14-58-5_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399916/60daf4e6-0514-b6a4-fbe8-25fc9201a4c1.png)

　これで3000円分のクレジットカードとして使用することができます。paypalを通してpcbgogoへ入金するのでpaypalアカウントも作ります。

　paypalのアカウントも作成したらバニラvisaのカード番号を入力し、発注を行います。カードを購入した金額分通常のクレジットカードと同じように扱うことができるので、クレジットカードがなくても基板外注することができました。
![SnapCrab_NoName_2021-2-17_15-10-23_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399916/b19f1db2-650c-9606-507d-29b4b20d08ec.png)
pcbgogoは製造進捗を細かく見ることができて便利ですね。
![SnapCrab_NoName_2021-2-17_14-0-39_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399916/766b9040-00fb-204c-40c2-259ee48f8e39.png)

また、バニラvisa側ではカードの残高と使用履歴を見ることもできます。
![SnapCrab_NoName_2021-2-17_15-4-32_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399916/ce9710b4-cb80-28f3-9e9e-793b9cc24d8e.png)
　今回基板外注にかかった総額は基板代(¥550)+送料(¥1650)+paypal手数料(¥101)の¥2301でした。
残高を確認すると699円となっているため、正常に取引できていることが確認できます。

余ったバニラvisaの残高は、visaカードが使えるお店であれば利用できますし、次の外注に使う事もできるため融通が利くのが良いですね。

以上、クレカがなくても基板外注する方法でした。
【Vuetify】radioボタン：前回の入力値を保持し、チェックがついた状態にする方法

## はじめに
バリデーションに引っかかったあと、値を保持し前回入力した値を保持・表示するには
Laravelであれば、oldヘルバ関数を使うが、Vuetifyを用いたラジオボタンでは
バリデーションに引っかかったあとも、チェックがついた状態にすることができず、詰まったので備忘録として書きました。（通常のinputタグであればchecked属性が使えるが、v-radioは使えず詰まった）

## 内容

```sample.balde.php
<script>
    const old_animal_name = "<?= old('animal_name') ?>";
</script>
```

```Sample.vue
<v-row>
  <v-col>
    <span>好きな動物</span>
    <v-radio-group
      dense
      row
      v-model="animalName"
    >
      <v-radio label="ネコ" name="animal_name" value="1"></v-radio>
      <v-radio label="イヌ" name="animal_name" value="2"></v-radio>
      <v-radio label="その他" name="animal_name" value="3"></v-radio>
    </v-radio-group>
  </v-col>
</v-row>

<script>
export default {
  data: () => ({
    animalName: '',
  }),
  created() {
    this.animalName = old_animal_name;
  }
}
</script>
```
Rで人工データを作る

# はじめに

Pythonではrandomライブラリを用いて人工データを簡単に生成できるが、Rでは（とくに離散データの生成に）ひと手間いるようなのでその手順を書く。

# 連続データの生成

正規分布・一様分布にしたがうデータは以下コードで生成できる。

```r:continuous.R
rnorm(n=5, mean=50, sd=10)  # 平均50、標準偏差10の正規分布から5個データを生成
runif(n=5, min=0, max=100)  # 最小値0、最大値100の一様分布から5個データを生成
```
rnorm関数はmean, sdを指定しない場合が標準正規分布、runif関数はmin, maxを指定しない場合0から1の値となる。

# 離散データの生成

上記で作成した連続データをcut関数でカテゴリ分けし、level関数で値をふることで離散データを生成する。

```r:discrete.R
x <- runif(n=5)
x.dis <- cut(x, seq(0,1,0.2))
levels(x.dis) <- 1:5
```

0から1の間で生成された連続データを0.2刻みでカテゴリ分けし、それらのカテゴリに1から5までの値を割り当てている。ちなみにpythonであればrandoｍライブラリをインポートして __x.dis = [random.randint(1, 5) for i in range(5)]__ で簡単に生成できる。Pythonは便利。
第16回 Cisco CMLにSD-WANノード導入

SD-WANの資格取得をする際、検証環境にyamlと.qcow2ファイルの取り込みではまったので
備忘録として記録しておきます。

#取り組んだノード
viptela SD-WANの**vEdge,vManage,vSmart,vBond**ファイル
![SD-WAN2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559536/04b5e61f-b7e7-b7c1-9534-2c21d5bf249c.jpeg)

#取り込み結果
![SD-WAN3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559536/55312ce3-1040-3798-df2b-f09da6ba9df9.jpeg)

##ファイル取得サイト

###yamlなどのイメージファイル
[github_CMLコミュニティ](https://github.com/CiscoDevNet/cml-community)

###viptela SD-WANの.qcow2ファイル
※ver.19と少し古いですが、検証には支障なしでした。
[networkrare.com](https://networkrare.com/free-download-cisco-viptela-images-vmanage-vsmart-vbond-vedge-cedge-for-eve-ng/)

#取り込み手順
参考サイト
https://sig9.hatenablog.com/entry/2020/06/19/000000
UnixTime変換メソッド(JavaScript)




```javascript:convertUnixTime.js

function convertUnixTime(date){
    var result = '';
    
    var d = new Date(date * 1000 );
	var year  = d.getFullYear();
	var month = d.getMonth() + 1;
	var day   = ( d.getDate()      < 10 ) ? '0' + d.getDate()    : d.getDate(); 
	var hour  = ( d.getHours()     < 10 ) ? '0' + d.getHours()   : d.getHours();
	var min   = ( d.getMinutes()   < 10 ) ? '0' + d.getMinutes() : d.getMinutes();
	var sec   = ( d.getSeconds()   < 10 ) ? '0' + d.getSeconds() : d.getSeconds();
	
	year = year.toString();
	month = (month < 10) ? '0' + month : month;
	day = day.toString();
	hour = hour.toString();
	min = min.toString();
	sec = sec.toString();
	
	result = year+ '/' + month+ '/' + day+ ' ' + hour+ ':' + min + ':'+ sec;
	
	return result;
}

a = convertUnixTime(100000000)

console.log(a);
```

```
//実行結果
"1973/03/03 18:46:40"
p5.js×Next.js×TypeScriptを動かしてみる

研究やもらったお仕事でNext.jsを使うことは数年前から多々あったのですが、なかなか書けるネタもなくここまで来てしまいました。

最近記事書いてないなぁというのもあり、ここいらでNext.jsに関する記事も書いてみようかなと思います

## やりたいこと

p5.jsをNext.jsとTypeScriptで扱いたい。また他のコンポーネントと組み合わせて使いたい。

## 手順

まず使うのは `react-p5` です。こちらnpm / yarnで入れてあげましょう。

```
$ yarn add react-p5@1.3.6
```

なお`1.3.6`にバージョン指定していますが、これは既知の未解決バグとして最新バージョンにおいてエラーが出てしまうからです。（[こちらのissue](https://github.com/Gherciu/react-p5/issues/39)参照→2021/02/26追記：アップデートされ最新バージョンでバグが修正されました）

続いて実際にNext.js上でimportするためにも一癖あります。p5.js内で`window`を使っており、その影響で通常のimportだとエラーが出てしまいます。
これにはNext.jsに用意されている[next/dynamic](https://nextjs.org/docs/advanced-features/dynamic-import)という機能を用いることで解決できます。具体的なコードはこちらになります

```typescript
// next/dynamic
import dynamic from 'next/dynamic'
// p5に型付けするためのモジュール
import p5Types from 'p5'

const Sketch = dynamic(import('react-p5'), {
  loading: () => <></>,
  ssr: false
})
```

これによって `Sketch` という名前でp5.jsが使えるキャンバスを使うことができるようになります。
例えば以下のようなコンポーネントが作成できます。

```typescript
export const SketchComponent = () => {
  const preload = (p5: p5Types) => {
    // 画像などのロードを行う
  }

  const setup = (p5: p5Types, canvasParentRef: Element) => {
    p5.createCanvas(p5.windowWidth, p5.windowHeight).parent(canvasParentRef)
    // p5でいうsetupの処理を書く
  }

  const draw = (p5: p5Types) => {
    // p5でいうdrawの処理を書く
  }

  const windowResized = (p5: p5Types) => {
    // コンポーネントのレスポンシブ化
    p5.resizeCanvas(p5.windowWidth, p5.windowHeight)
  }

  return (
    <Sketch
       preload={preload}
       setup={setup}
       draw={draw}
       windowResized={windowResized}
     />
  )
}
```

このように一連の関数はコンポーネントの関数として扱えるため、useStateなどのHooksとの併用も可能です。またp5特有の命令を使う場合は各関数の引数になっているp5を使うことで使えるようになります（`p5Types`のおかげでAutoCompleteも使えます。）

Hooksとローカル変数を併用してしまうと、Hooksが更新された段階でローカル変数の状態が関数コンポーネント内の初期値に戻ってしまうのでそこだけ注意しておくといいかもしれません（これは当たり前かもですが...ちなみに変数全てHooksでもちゃんと動きます）

またp5特有の関数はスピードが遅いこともあるので`Math`モジュールの関数で代用できるところは代用するようにしておくとスピード的に向上します。

## まとめ

今回はp5.jsをNext.js上で扱うための手順と注意事項をまとめました。なういフロントエンドフレームワークでぜひリッチなメディアアートを楽しんでみてください！
Rails6 devise omniauth-twitter でTwitterログインを作ろうとしたときの備忘録

基本はこのやり方
https://qiita.com/cigalecigales/items/16ce0a9a7e79b9c3974e

ただ前提としてFacebookやGmailログインと違い、Twitterではemailアドレスの取得に特別な権限がいるため、上記の方法では以下になる。

1. Twitter認証
2. リダイレクトされたサインアップ画面でメールアドレスとパスワードを設定
3. 以後、Twitterボタンからメールアドレスとパスワードなしでもログインできるようになる

正直それって混乱するし微妙じゃねって思って、Twitterのプロフィール画像やプロフィール文、screen_nameなどを自社のサービスでも使いたいとき以外は導入するメリット無いと思った。

またemailの取得リクエストを有効化しようにも、Twitter Developer の管理画面がコロコロ変わるのでググっても古いやり方しかでてこない。一応「Request email address form users」をオンにして、利用規約とプライバシーポリシーのアドレスを（適当なやつで）入れてみたけど、返り値に`email`は入ってこなかった。

![スクリーンショット 2021-02-17 14.48.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242610/c7b76aae-79b8-e76b-e402-1f640b5e8cee.png)

##ダミーアドレスでサインアップさせる
そういう例もいくつか見かけた。パスワードも`Devise.friendly_token[0, 20]`でDeviseが自動生成してくれるっぽい。ただユーザーに連絡したいときはどうするんだろうか。

以下はRails5の例

> Rails 5.2.2
devise 4.5.0
omniauth 1.8.1
https://techblog.gmo-ap.jp/2019/02/08/rails%E3%81%A7omniauth-twitter%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6twitter%E8%AA%8D%E8%A8%BC%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B/

##その他の参考記事

1年以上前の記事でTwitterがemailを返してくれる前提.みんな結構ハマってる。
https://qiita.com/sakakinn/items/321e6b49c92b9f02f83f#%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

## 全体的に
Railsはすごく複雑で難しく感じる。routes, model, controller が何をやっているか、ライブラリを使うときでも理解してないとすぐバグるし、マイグレーションファイルを少しでもミスるとデータベースがぐちゃぐちゃになって、またローカル、ステージング、プロダクションでも差異が生まれてしまう。

Node.js, React Native, Flutter でWebシステムを構築するともっと簡単なんかな？詳しい人に聞いてみたい。
twitterのクローンアプリを作成


##アイコンの使い方

```sh
yarn add @material-ui/core
yarn add @material-ui/icons
```
を実行

> https://www.npmjs.com/package/@material-ui/icons

https://material-ui.com/components/material-icons/
↑からimport

アイコンのチートシート　違うやつ
>mdi-music-accidental-sharp

色以外material uiのみで実装したらboxのネストが増えた

サイドバーを固定、ページネーションの実装
【Dos】ファイルのサイズと行数の取得

#ファイルサイズ・行数取得

##はじめに
ファイルのサイズと行数を取得するバッチです

###ファイルサイズ行数.bat

```bat:ファイルサイズ行数.bat

@echo off

rem ファイルサイズ取得
for %%i in (%1) do set file_size=%%~zi

rem ファイル行数を取得
for /f "usebackq" %%J in (`type %1 ^| find /c /v ""`) do set file_count=%%J

rem サイズ書き込み
echo ファイル名　　：%1
echo ファイルサイズ：%file_size%
echo ファイル行数　：%file_count%


pause


```
【Go Lang】WebFrameWork使ってみた3 iris

# はじめに
Go lang WebFrameWorkを使ってみるの三つ目。
人気ライブラリの1~3位を使ってみることにする。

[【Go Lang】WebFrameWork使ってみた1 Gin](https://qiita.com/y_nomura_CR/items/9858f2c1e4e1b4d2d2d3)
[【Go Lang】WebFrameWork使ってみた2 beego](https://qiita.com/y_nomura_CR/items/1029d6cd1e24d61831f1)
[【Go Lang】WebFrameWork使ってみた3 iris](https://qiita.com/y_nomura_CR/items/d24f243d7b34522626d5)

- Gin
- beego
- iris←今回はコレ

# 公式サイトとか
公式サイト（日本語ないです）：https://www.iris-go.com/
github:https://github.com/kataras/iris
ライセンス:BSD 3-Clause

> BSD 3-Clause

これは聞いたことないぞ？ググってみる。

> 1.ソースコードの再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項を保持すること。
> 2.バイナリ形式の再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項は、ドキュメントまたは他の資料で配布すること。
> 3.このソフトウェアのコントリビューター(貢献者)の名前は、特定の書面による事前の許可なしに、このソフトウェアから派生した製品の保証または販売促進のために使用してはいけない。

> つまり、BSD-4-Clauseを使う場合は、
> 「この製品は、○○という組織によって開発されたソフトウェアが含まれています。」
> という謝辞を入れなければなりません。

> BSD-3-Clauseを使う場合は、
> 商用利用の際に「この製品が使っている○○というライブラリは○○さんが作ったものだよ、すごいでしょ」的な宣伝文句を書いてはいけないということです。

BSD-3-Clauseなので宣伝文句をいれなければ問題なさそう。

# 人気
- star数:20,001
- qiitaの記事数：31（https://qiita.com/tags/iris）
- google検索結果：約 13,100,000 件（検索ワード"go lang iris"）

qiitaのirisタグは別の言語のirisが混じっている。pythonにもあるみたい。
google検索結果はirisというワードが普遍的すぎる結果のような気がする。

# 学習しやすさ
日本語ドキュメントはやはりない。
beegoのようなquick startもない模様。
公式サイトのドキュメントは豊富。

# 特徴
- MVCモデル
- 最速のWebフレームワーク
- クロスプラットフォーム

# 実装

GOMODULEでirisをインストールする。

```
$ mkdir iris-project && cd iris-project
$ go mod init iris-project
$ go get github.com/kataras/iris/v12@master
```

公式サイトのquick startからmain.goを作成。
Gin、beegoと同じくvueとアップロード処理を作成。
MVCとうたってたけどmain.goだけで完結してしまうな。
vueはbeegoで作成したやつをコピーしてきてインストール&ビルド。

```go:main.go
package main

import (
	"io"
	"log"
	"net/http"
	"os"

	"github.com/kataras/iris/v12"
)

func main() {
	app := iris.Default()
	app.HandleDir("/static", iris.Dir("./static"))
	app.RegisterView(iris.HTML("./templates", ".tpl"))

	app.Get("/", func(ctx iris.Context) {
		ctx.ViewData("message", "Hello world!")
		ctx.View("index.tpl")
	})

	app.Post("/upload", func(ctx iris.Context) {
		file, header, err := ctx.FormFile("image")
		if err != nil {
			ctx.StopWithError(iris.StatusBadRequest, err)
			return
		}
		fileName := header.Filename
		dir, _ := os.Getwd()
		out, err := os.Create(dir + "\\images\\" + fileName)
		if err != nil {
			log.Fatal(err)
		}
		defer out.Close()
		_, err = io.Copy(out, file)
		if err != nil {
			log.Fatal(err)
		}

		ctx.StatusCode(http.StatusOK)
		ctx.JSON(iris.Map{
			"status": "ok",
		})
	})

	app.Listen(":8080")
}
```

```html:templates/index.tpl
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>webpack_sample</title>
</head>
<body>
  <div id="message">{{.message}}</div>
  <div id="app"></div>
  <script src="./static/js/app.js"></script>
</body>
</html>
```

後はgo run で。

# まとめ
公式サイトに従うとMVCっぽくなくできてしまった。
ドキュメントも量はあるけどあまり親切でないような・・・
ググっても情報が少ないしちょっとやりにくい。

3つのFWを試してみたけど、古い技術に慣れている人からするとbeegoが一番理解しやすいと思う。
createコマンドでとりあえずの形はできるしMVCのフォルダ分けが安心する。
次回からはbeegoについてもう少し踏み込んで試してみる予定。
HTMLの主な要素〜初心者だった自分に向けて〜　その④インライン要素

#HTML・インライン要素
###はじめに
今回の記事にはHTMLの中の主なインライン要素についてまとめてあります。
その他のHTMLに関する記事は[こちら](#これまでの記事)

##a要素 `<a>`
この要素は、別のWebページやファイル、メールアドレスや電話番号などへのリンクを作成する要素です。
####`<a>`要素に必須で指定する属性
- `href` = "リンク先のURL"

また、同じページ内の特定の場所へのリンクを作成することもできます。そうすることによってランディングページのような長いWebページでも目的の場所までのスクロールが省略され、ユーザーが閲覧しやすくなります。

_使用例_

```html:HTML
<p>私にご連絡ください</p>

<ul>
  <li><a href="https://google.com">私のサイト</a></li>
  <li><a href="mailto:google@gmail.com">メール</a></li>
  <li><a href="tel:+123456789">電話番号</a></li>
</ul>
~~~
_結果_
>
<p>私にご連絡ください</p>

<ul>
  <li><a href="https://google.com">私のサイト</a></li>
  <li><a href="mailto:google@gmail.com">メール</a></li>
  <li><a href="tel:+123456789">電話番号</a></li>
</ul>

##br要素 `<br>`
この要素は、テキストの段落内で改行するときに使用する要素です。<br>
_使用例_

```html:HTML
<p>おはようございます。昨日はとても楽しかったですね。<br>
今日の予定を送りましたので確認お願いします。夜まで予定びっちりですよ。<br>
ちなみに明日は私の結婚記念日です。</P>
~~~

>
<p>おはようございます。昨日はとても楽しかったですね。<br>
今日の予定を送りましたので確認お願いします。夜まで予定びっちりですよ。<br>
ちなみに明日は私の結婚記念日です。</P>

段落間の間隔を空けるために連続して`<br>`を使用する方法は読み上げソフトの操作を妨げる原因になる可能性があるので、よくありません。そうしたい場合は、段落を`<p>`で囲いCSSで`margin`を使用して間隔を広げる方法が最も適切です。

##span要素 `<span>`
区切りやスタイル付けのために用いる汎用的な要素です。他に適切な意味的要素がない時に使用します。<br>`div`要素との違いは、 **`<div>`はブロックレベル要素である** のに対し、 **`<span>`はインライン要素である** 、という違いです。

##small要素 `<small>`
よくWebページや印刷物で小さい文字で表示されているような、著作権表示や注釈、付帯情報であることを表す要素です。この要素に入るテキストは、一段階小さいフォントで表示されます。

_使用例_

```html:HTML
<div>
  <p>いらすとやさんの描いたルフィです。</p>
  <img src = "../images/drowicon"></img>
</div>
<small>©︎watashidesign 2021</small>
~~~
>
<div>
  <p>いらすとやさんの描いたルフィです。</p>
  <img src = "https://1.bp.blogspot.com/-tVeC6En4e_E/X96mhDTzJNI/AAAAAAABdBo/jlD_jvZvMuk3qUcNjA_XORrA4w3lhPkdQCNcBGAsYHQ/s1048/onepiece01_luffy.png"></img>
</div>
<small>©︎ いらすとや. All Rights Reserved.</small>

###これまでの記事
HTMLの主な要素〜初心者だった自分に向けて〜　[その①メタデータ系](https://qiita.com/syun02051/items/013bb352bec614123b23)<br>HTMLの主な要素〜初心者だった自分に向けて〜　[その②セクショニングと、主な区分化要素](https://qiita.com/syun02051/items/7650b11e991feacf0356)<br>HTMLの主な要素〜初心者だった自分に向けて〜　[その③テキストコンテンツ](https://qiita.com/syun02051/items/d58710bfaacb327b0dc4)
AWS DMS とは？

## 勉強前イメージ

データベースを移行するサービスくらいにしか知らない

## 調査

### AWS DMS とは？

AWS DMS とは Database Migration Service の略で
DBのデータ移行を行ってくれるサービスです。
オンプレ→AWS はもちろん、オンプレ→オンプレ も出来ます。

### DMSのメリット

- 使用が簡単

ドライバやアプリケーションなどインストールする必要はありません
コンソール上のGUIで移行を実施出来ます

- 最小限のダウンタイム

DB移行中も移行元DBは使用可能な状態で移行が進められるため
DBの停止を最小限に抑えることが出来ます

- 広く普及しているデータベースをサポート

一般的に普及しているDBはほぼサポートしています。
異なるDBへの移行も可能になっています。

- 低コスト

移行にかかった分だけの費用がかかります

- 信頼性

高い障害耐性および自己修復性があります。


## 勉強後イメージ

DBの移行ってたしかに大変なイメージ
同じ種類のDBでもダンプ→リストア→レプリって感じでやるのに・・
別の種類のDBまで移行できるとかすごい！

## 参考

- [DMSを使ったデータベース移行を試してみた](https://dev.classmethod.jp/articles/try-database-migration-service/)
- [AWS DMSとは？環境を構築する4つの流れとメリットを解説](https://www.fenet.jp/aws/column/technique/245/)
- [AWS Database Migration Service について](https://www.acrovision.jp/service/aws/?p=1463)
GASのタイムゾーンがデフォルトでニューヨークになっていた

2021年2月現在で、新しくスプレッドシートを作ります。

## スプレッドシートの設定
「ファイル」メニュー → 「Googleスプレッドシートの設定」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049264/6afe3b23-00fa-f364-7ad5-feac0808bfe1.png" width="500">
スプレッドシート自体のタイムゾーンは東京になっています。

## GASエディタの設定
「ツール」メニュー → 「スクリプトエディタ」を開きます。

プロジェクトの設定を開いて、「「appsscript.json」マニフェスト ファイルをエディタで表示する」にチェックを入れます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049264/50dacb88-2663-13f0-6e3e-edecbfd357d1.png" width="500">
エディタで「appsscript.json」が開けるので開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049264/32b21826-d6cc-742d-2bfc-5b1038fb4536.png" width="500">
ここのタイムゾーンがニューヨークになっています。

```
"timeZone": "America/New_York",
```

## GASを実行してみる
Dateを生成してログに出力してみると、ニューヨーク時間になっています。

```js
function myFunction() {
  var date = new Date();
  Logger.log(date);
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049264/58bb254c-04e2-e5e8-08de-6c56725ce251.png)

トリガーを設定して実行してみます。
以下のようにトリガーを設定しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049264/871c2656-ae56-4fe9-e85d-d0f888be7f1f.png" width="500">
実行される時間は日本時間でした。
トリガーの設定には問題ないようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049264/4d8c1a95-ca53-d756-b99a-2279a87140af.png)
ということで、「appsscript.json」のタイムゾーンを修正します。

```
"timeZone": "Asia/Tokyo",
```

以下のように日本時間で出力されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049264/e4c1d98a-3125-c2ac-b462-9838e90edc9a.png)
本番環境でコンフリクトしたときの対処

##はじめに
投稿2回目です。
この前、初めて本番環境でコンフリクトしました。
別に本番環境だからといって対処法は変わらないのですが、初めての経験でかなり焦りましたので備忘録として残したいと思います。

##状況
 - 状況は下記のイメージ通りで、viでファイルを編集したことを忘れていました。。。

&emsp;<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906801/c0bee155-5b96-1573-a7cb-6d45eb8e1333.png" width=60%>

##まずは状況を確認する
自分の場合は原因も明らかでコンフリクトしていることは確定していたのですが、まずは``git status``で状況を確認します。

EC2に接続し、``git status``を実行します。
``both modified``と出力されたらコンフリクトしています。

```
$ git status
Unmerged paths:
  (use "git add <file>..." to mark resolution)
        both modified:   XXXXXXX
```

##コンフリクトを解消する
コンフリクトしていることを確認したら、下記コマンドを実行します。
作業履歴は消えてしまうので注意してください！

```
# リモートの対象ブランチに強制的に一致させる
$ git reset --hard origin/master
```

もしくは

```
# git pull する前に戻す
$ git reset --hard ORIGIN_HEAD
```

ちなみに``ORIGIN_HEAD ``は下記のような意味らしいです。

>[GitのHEAD, ORIG_HEAD, FETCH_HEAD, MERGE_HEADとは？](https://qiita.com/t-mochizuki/items/347cba461fd570bca03c#:~:text=%E6%9C%80%E6%96%B0%E3%81%AE%E4%B8%80%E3%81%A4%E6%89%8B%E5%89%8D,%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E5%80%A4%E3%81%AE%E5%88%A5%E5%90%8D%E3%81%A7%E3%81%99%E3%80%82)
>最新の一つ手前のコミットに対するハッシュ値の別名です。

##その他
超絶初学者ですが、最近便利なコマンドを知りましたのでよく使っています。

```
# ローカルとリモートのブランチ一覧を表示 + コミット履歴を表示
$ git branch -av
```

 - ``-a``オプションはリモートブランチも含めたブランチの一覧を表示
 - ``-v``オプションはコミット履歴（コミットのIDとメッセージ）を表示

##参考にさせていただきました
 - [Git超絶まとめ](https://qiita.com/masashi127/items/2e103c3fba9d1b058961)
 - [GitのHEAD, ORIG_HEAD, FETCH_HEAD, MERGE_HEADとは？](https://qiita.com/t-mochizuki/items/347cba461fd570bca03c#:~:text=%E6%9C%80%E6%96%B0%E3%81%AE%E4%B8%80%E3%81%A4%E6%89%8B%E5%89%8D,%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E5%80%A4%E3%81%AE%E5%88%A5%E5%90%8D%E3%81%A7%E3%81%99%E3%80%82)
 - [git branch コマンド](https://qiita.com/chihiro/items/e178e45a7fd5a2fb4599#:~:text=%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%AA%E3%81%84%E3%80%82-,git%20branch%20%2Dv,%E3%81%AE%E5%90%8D%E5%89%8D%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%80%82)

ここまで見て頂きありがとうございました。
基本的なコマンド以外は何かトラブルでも起きないと調べたりしないのですが、便利なコマンドが色々あるので使いこなせるようにしたいですね。
Beanstalkで作成されたS3バケットが削除できない

#S3バケットを整理しようと、Beanstalkで使用したバケットを削除しました
↓出ました権限エラー
![スクリーンショット 2021-02-17 13.14.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/11018c3b-adad-af2b-3695-9a37fa230768.png)

↓作業ユーザーに、フルアクセス付与してるんですが
![スクリーンショット 2021-02-17 13.16.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/47dbb495-79c8-4195-cfa2-d6286896ac48.png)

#原因
**S3バケットのアクセス許可設定にて、いかなる物でもバケットを削除できないポリシーが付与されていました。**

![スクリーンショット 2021-02-17 13.19.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/c7178f00-7ad5-5819-cc46-3bb78c54f898.png)

#解決
**ポリシー削除後**
![スクリーンショット 2021-02-17 13.19.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/87987fe0-5bdf-916e-4ec5-773dc9f82cee.png)

**無事バケットも削除できました**
![スクリーンショット 2021-02-17 13.21.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/3ac18e30-7ff2-619e-4ea6-c6053ca98fe9.png)

権限エラーに出会ったときは、サービスに付与しているポリシーも考えなければなりませんね。
IAMユーザーに対し、フルアクセスしとけば良いや！では安直だったな。
Ruby言語とJava言語の記述方法比較

# はじめに

Ryby on Railsしかやったことない自分が新たにJavaを学習していく時に、
「Rubyの○○に相当するものは、Javaのなんなんだ？」ってなっちゃったので、頭の中を整理するために書きました。


人間の思考は、「類似・対比・因果」で展開されること多いらしいです。
両者の記述を並べることで、類似点と相違点が見つけられてより深い理解を得られるようなると思うので、同じ境遇の方の参考になると幸いです。

自分の学習に合わせて更新・修正していく予定です。
また、間違った解釈をしている可能性があるのでご指摘していただけたら大変よろこびます。

# 環境
Ruby 2.6.5
Java SE 15.0.2

# 前提

Javaは`class Main`に`public static void main(String[] args)`を定義しないと実行できませんが、その中の記述方法として書いています。

# 記述方法の比較
##### 変数の定義
 
``` ruby:main.rb
int = 1                       # 数値
str = "Hello World"           # 文字列
bool = true                   # 真偽値
f = 1.5                       # 小数点数　
```

``` Java:Main.java
int int = 1;                 // 数値
String str = "Hello World"   // 文字列
boolean bool = true          // 真偽値
float f = 1.5;               // 小数点数  ※double(64bit)　　
```

##### コンソールへ出力

``` ruby:main.rb
# ()省略
p "Hello World"                       # "Hello World"と出力されます => 型の識別
print "Hello World"                   # Hello Worldが出力されます（末尾の改行なし）
puts "Hello World"                    # Hello Worldが出力されます（末尾の改行あり）
```

``` Java:Main.java
System.out.print("Hello World");     // Hello Worldが出力されます（末尾の改行なし）
System.out.println("Hello World");   // Hello Worldが出力されます（末尾の改行あり）
```

##### コンソールから入力=>出力

``` ruby:main.rb
# ()省略
str = gets                              # <= Hello Worldと入力した場合
puts str                                # => Hello Worldと出力 
```

``` Java:Main.java
import java.util.Scanner;              // java.utilパッケージのScannerクラスをimport(本来は冒頭に宣言）

Scanner sc = new Scanner(System.in);   // Scannerクラスからインスタンス化（インスタンス化については後述してます）
String str = sc.next();                // インスタンス化したscのnextメソッドを実行　<= Hello Worldを実行した場合
System.out.println(str);               // => Hello Worldと出力 
```

##### メソッドの定義
 
```ruby:main.rb
# 引数なし＆戻り値なしのインスタンス化を必要としないメソッド（クラスメソッド）
def greeting() 
  puts "こんにちは、世界"
end
```

```Java:Main.java
// 引数なし＆戻り値なしのインスタンス化を必要としないメソッド（クラスメソッド）
public static void greeting(){
  System.out.println("こんにちは、世界");
}
```

##### クラスの定義　(例：名前と年齢をもつ人）
 
```ruby:human.rb
 
class Human
   # ※以前書いていたattr_accessorは誤りでした

   def initialize(name, age)   # イニシャライズメソッド（インスタンス化して始めに呼ばれる）
     @name = name
     @age = age
   end

   def get_name()                # インスタンスメソッド（ゲッター）
     return self.name
   end

   def set_name(name)            # インスタンスメソッド（ゲッター）
     self.name = name
   end
end
```

```Java:Human.java

class Human{
   private String name;          // フィールド
   private int age;

   Human(String name, int age){  // コンストラクタ（インスタンス化して始めに呼ばれる）
     this.name = name;
     this.age = age;
   }

   public String getName(){      // インスタンスメソッド（ゲッター）
     return this.name;
   }

   public void setName(name){    // インスタンスメソッド（セッター）
     this.name = name;
   }
}
```

##### インスタンス化

```ruby:main.rb
human1 = Human.new(name: "太郎", age: 12)
```

```Java:Main.rb
Human human1 = new Human("太郎", 12);
```

##### 例外処理

```ruby:main.rb
begin 
  # 例外を発生させる可能性のある処理
rescue => e # 例外オブジェクトを代入した変数
  # 例外発生時の処理
end
```

```Java:Main.rb
try {
  // 例外が発生する可能性のある処理
} catch (/* 捕捉する例外の型 変数名 */) {
  // 例外発生時の処理
}
```
# さいごに

性質上、完全に対応していない部分もあるかも知れませんが極力合わせていきます。
現時点ではこれだけですが、また追記していきます。

-2021/02/17
-2021/02/19
プロキシ環境下でgo getしたい

# What's？

プロキシ環境下で`go get`して依存モジュールをダウンロードしたい場合はどうしたらいい？と調べてみると、「Gitにプロキシ設定をしたらいい」みたいな情報が見つかるので。

「そうなの？」と思ったので、少し調べてみようかなと。

# go getの説明を見る

`go get`の説明を見てみます。

[Command go / Add dependencies to current module and install them](https://golang.org/cmd/go/#hdr-Add_dependencies_to_current_module_and_install_them)

特にプロキシまわりの話はなさそうです。

コマンドでのヘルプを見てみても、同じですね…。

```shell
$ go help get
```

# http(s)_proxy環境変数を使う

Gitでプロキシ設定をしてもいいのですが、`https_proxy`（および`http_proxy`）環境変数を使っても機能します。

```shell
$ export https_proxy=http://[your-proxy-server]:[your-proxy-port]
$ export http_proxy=http://[your-proxy-server]:[your-proxy-port]
```

取得先がGit以外のこともあるようなので、こちらの方が無難でしょうか。

動作確認したGoのバージョンは、こちらです。

```shell
$ go version
go version go1.15.7 linux/amd64
```

# 参考

https://github.com/golang/go/blob/go1.15.7/src/cmd/go/internal/get/vcs.go
社会人2年間の集大成！占いサイトを作成した話③

[社会人2年間の集大成！占いサイトを作成した話②](https://qiita.com/nacho0707/items/a64618cb87a0df533e9d)のつづきとなります！

# 動物占い画面の紹介
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/6ee5b09d-725f-0cf2-2d18-ac773854188d.png)


## 機能の紹介
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/5ac1e048-38b7-e31c-0eb4-4d1e24dc7fcb.png)
カードをクリックするとモーダルが表示され、占いの結果が表示されます。カードが8枚あり、8通りの運勢を用意しました。

```javascript
// 1~8の値をつめた配列を作成
let array = [1,2,3,4,5,6,7,8]
for (let i = array.length - 1; i >= 0; i--) {
    let rand = Math.floor(Math.random() * (i + 1));
    // 配列の数値を入れ替える
    [array[i], array[rand]] = [array[rand], array[i]]
  }

// それぞれのカードに1〜８の値を割り振る
$('.card-one').val(array[0]);
$('.card-two').val(array[1]);
$('.card-three').val(array[2]);
$('.card-four').val(array[3]);
$('.card-five').val(array[4]);
$('.card-six').val(array[5]);
$('.card-seven').val(array[6]);
$('.card-eight').val(array[7]);

// モーダルに表示する8通りの結果を用意する
const inuText = "";
const hitsujiText = "";
const pandaText = "";;
const kabaText = "";
const toraText = "";
const kumaText = "";
const nekoText = "";
const usagiText = "";

// カードをクリック後の処理
$('.js-modal-open').on('click',function(){
    const cardVal = $(this).val();
    // 1~8に割り振った番号をもとに表示する結果を設定する
    switch (cardVal) {
        case "1":
            $('.content').children('img').attr('src', '../images/inu.png');
            $('.fortune-result').text(inuText);
            break;
        case "2":
            $('.content').children('img').attr('src', '../images/hitsuji.png');
            $('.fortune-result').text(hitsujiText);
            break;
        case "3":
            $('.fortune-result').text(pandaText);
            break;
        case "4":
            $('.content').children('img').attr('src', '../images/kaba.png');
            $('.fortune-result').text(kabaText);
            break;
        case "5":
            $('.content').children('img').attr('src', '../images/tora.png');
            $('.fortune-result').text(toraText);
            break;
        case "6":
            $('.content').children('img').attr('src', '../images/kuma.png');
            $('.fortune-result').text(kumaText);
            break;
        case "7":
            $('.content').children('img').attr('src', '../images/neko.png');
            $('.fortune-result').text(nekoText);
            break;
        case "8":
            $('.content').children('img').attr('src', '../images/usagi.png');
            $('.fortune-result').text(usagiText);
            break;
    }
    // モーダルを表示する
    $('.js-modal').fadeIn();
    return false;
});

// とじるボタンを押下した際の処理
$('.js-modal-close').on('click',function(){
    $('.js-modal').fadeOut();
    return false;
});
```

## まとめ
画面遷移毎にランダムに値を設定し、モーダルに値に応じた結果を表示する方法を考えることに苦労しました。あとは、クリック時に画像を設定するので、少し速度が遅いところが課題です。。。設計書は絵に書いたもののみだったため自分の頭の中で整理することに苦労しました。

今回はここまでとなります。
次回では恋愛占いのページの紹介を行っていきます:point_up_tone1:

続きはこちら！
[社会人2年間の集大成！占いサイトを作成した話④]
(https://qiita.com/nacho0707/items/c2db9e5e376fab61f769)
列番号 ⇒ A1への変更はgspread.utilsで良い

過去のこの記事でpythonでSpreadsheet操作をするライブライであるgspreadの使い方をまとめています。

https://qiita.com/plumfield56/items/dab6230512f3381fdcad


この記事の中で数値から列のアルファベットに変換する関数を紹介しています。


```python:数値からアルファベットに変更する関数
def conv_num_to_col(num):  
  if num <= 26:
    return chr(64 + num)
  else:
    if num % 26 == 0:
      return conv_num_to_col(num//26-1) + 'Z'
    else:
      return conv_num_to_col(num//26) + chr(64+num%26)

print(conv_num_to_col(1)) # A
print(conv_num_to_col(3)) # C
print(conv_num_to_col(6)) # F
```

こちらの列番号からアルファベットを取得する仕組みが元々gspreadに存在しました。
それが `gspread.utils.rowcol_to_a1(row, col)` です。

```python:gspread.utils
import gspread

print(gspread.utils.rowcol_to_a1(2, 2)) # B2
print(gspread.utils.rowcol_to_a1(4, 4)) # D4
```

gspreadをimportするなら活用しましょう。

ちなみにgspreadのサイトを見ると `a1_range_to_grid_range()` があり、
引数でA1形式でレンジを入れると範囲の開始行列、終了行列が
返ってくるというメソッドです。

しかし、importした中に該当のメソッドが無くて使用できませんでした。
(2021年02月時点)

https://gspread.readthedocs.io/en/latest/api.html#gspread-utils
M1 MacでXcodeがiOSアプリのアーカイブに失敗する

M1プロセッサのMacで動作するCIツールfastlaneやJenkinsでXcodeを動作させてアプリをビルドしてアーカイブから.ipaファイルをエクスポートしようとしたら何故か "IPA processing failed" のエラーになってしまい悩みまくったので、その解消方法をメモ

しかも何故かxcodebuildを使ってfastlaneのgymやJenkinsが生成するコマンドラインと同じパラメータで手動でxcodeを起動してアプリをビルドするとエラーが出ないので更に悩んでしまった…

fastlaneのgymでアプリをビルドして発生したエラー

```console:
2021-02-17 12:34:40.569 xcodebuild[37328:1526046] [MT] IDEDistribution: -[IDEDistributionLogging _createLoggingBundleAtPath:]: Created bundle at path '/var/folders/c7/8w5268fs7psdc397k6p8rkz40000gn/T/myshop6_2021-02-17_12-34-40.569.xcdistributionlogs'.
error: exportArchive: IPA processing failed

Error Domain=IDEFoundationErrorDomain Code=1 "IPA processing failed" UserInfo={NSLocalizedDescription=IPA processing failed}

** EXPORT FAILED **
[12:34:41]: Exit status: 70
```

fastlaneでは gym のオプションに `export_options: { compileBitcode: false }` を追加する

```fastlane:Fastfile
    gym(
      workspace: "myapp.xcworkspace",
      configuration: "AdHoc",
      scheme: "myapp",
      clean: true,
      include_bitcode: false,
      output_directory: "./build",
      output_name: "myapp.ipa",
      export_method: "ad-hoc",
      xcargs: "-UseModernBuildSystem=NO -destination 'generic/platform=iOS'",
      export_options: { compileBitcode: false }
    )
```

Jenkinsの場合には exportIpa のオプションに `compileBitcode: false` を追加する

```jenkinsfile:Jenkinsfile
                exportIpa(
                    xcodeName: "${XCODE_VERSION_NAME}",
                    archiveDir: "${WORKSPACE}/build/Release-iphoneos",
                    manualSigning: true,
                    provisioningProfiles: [
                        [provisioningProfileAppId: "net.hoge2.myapp", provisioningProfileUUID: "AdHoc_myapp.mobileprovision"]
                    ],
                    ipaExportMethod: "ad-hoc",
                    ipaName: "myapp.ipa",
                    ipaOutputDirectory: "AdHoc",
                    compileBitcode: false
                )
```

まあ、そもそもとして compileBitcode を止めないとアーカイブから.ipaをエクスポート出来ないなんてXcodeのバグだとは思うのですが…
ブランチを過去の状態に戻したときの別ブランチの対応方法

# 前提
下記の3ブランチがある
- master(本番リリース)
- dev(次リリースの機能をマージしていく環境)
- feature(現在devにPR中で、devとコンフリクトしたのでdevをマージした)

dev環境でテストで大丈夫だったものをmasterにマージする

# 状況
devの一分機能をリリース取りやめになり、masterの状態へ戻した

この場合、すでにPR出しているものは次リリースの機能が必要だったり、devへのPRでコンフリクトするのでdevをマージしていたため、masterの状態に戻ったdevへのPRには不要な機能の修正も含まれていた。


# 直し方
revertするのが簡単だが、今後対象の機能を修正したのを取り込むので、revertするとそれを無効化するコミットが作成されてしまう。

>**マージコミットを打ち消すと、打ち消されたブランチに含まれていた変更が、その後、そのブランチを再度マージしたとしても、取り込みが発生しない、という事になります。これは、revert により変更自体は打ち消されても、マージの事実が歴史上に残り続けるからです。**

これは困るので、`reset`を使います

## バックアップ作成

```
git branch bk_feature feature
```

## マージコミット前に戻す
logを調べます

```bash
 git log --first-parent

commit 233233232323222222222
    10個目の機能追加

~中略~

commit 111111111111111111111
    2個目の機能追加

commit 123456789102345678910
    Merge branch 'dev' of https://github.com into feature

commit 098765432109876543210
    最初の機能追加
```

このとき、マージコミットから最新のコミットまでのハッシュをメモっておきます
メモったら、マージコミット前に戻ります

```
git reset --hard 098765432109876543210
```

あとはマージコミット後にした修正をcherry pickでもってきます

```
# git cherry-pick {始点となるコミットの１つ前のコミットハッシュ}..{終点となるコミットハッシュ}
git cherry-pick 123456789102345678910..233233232323222222222
```

cherry-pickする際の参考
https://www-creators.com/archives/2578
https://trueman-developer.blogspot.com/2018/05/git.html

おわったらforce pushする
githubはforce pushしたことが表示される
禁止などの条件がある場合はコピーのブランチでおなじことをして再度PR

```bash
git push -f origin feature
```
（自分用）値の受け渡し方法について（値型と参照型）

#値の受け渡し方法の分類（値型と参照型）

値の受け渡し方法は２つある。

###値型
変更を他の変数や定数と共有しない。
→構造体（struct）、列挙型（enum）は値型として実装されている。

###参照型
変更を他の変数や定数と共有する。
→クラス（class）は参照型として実装されている。




#値型
インスタンスが値への参照ではなく、値そのものを表す型。
複数の変数や定数で1つの値型のインスタンスを共有することはできない。
変数、定数への代入や関数への受け渡しのたびにコピーを行っている。

例１

```swift
var a = 4.0   // aに4.0が入る
var b = a   //bに4.0が入る（aが持つ4.0への参照ではなく値である4.0が入る）
a.formSquareRoot()   //aの平方根を取る
a   //aは2.0になる
b   //bはaの変更の影響を受けずに4.0のままとなる

```

例２

```Swift
struct Color {
   var red: Int
   var green: Int
   var blue: Int
  }

var a = Color(red: 255, green: 0, blue: 0)   //aに赤を代入
var b = a   //bに赤を代入
a.red = 0   //aを黒に変更する

//aは黒になる
a.red   //0
a.green   //0
a.blue   //0

//bは赤のまま
b.red   //255
b.green   //0
b.blue   //0

```



###mutatingキーワード　自身の値の変更を宣言するキーワード

（mutate 訳：変異する）

mutatingキーワードをメソッド（func）の宣言に追加することで、自身の値を変更する処理を実行できる。mutatingキーワードが指定されたメソッドを実行してインスタンスの値を変更すると、インスタンスが格納されている変数への暗黙的な再代入が行われる。
再代入のため、定数（let）に対しては実行できず、コンパイルエラーとなる。


例

```swift
extension Int {         //extension（拡張）を使って、Int型にメソッドを追加
   mutating func increment() {     //mutatingキーワードを指定
     self += 1     //自身の値に１を加算する
   }
}

var a = 1   //1
a.increment()   //2（暗黙的にaに再代入が行われている）

let b = 1
b.increment()   //bに再代入できないため（letだから）コンパイルエラー

```



#参照型

複数の変数や定数で1つの参照型のインスタンスを共有する。
そのため、ある値に対する変更はインスタンスを共有しているほかの変数や定数にも影響する。
値型と違って、変数や定数への代入時や関数への受け渡し時にはインスタンスのコピーが発生せず、効率的なインスタンスの受け渡しができるというメリットがある。

例

```swift
class IntBox {
   var value: Int

   init(value: Int) {
     self.value = value 
    }
}

var a = IntBox(value: 1)   //aはIntBox(value:1)を参照する
var b = a   //bはaと同じインスタンスを参照する

//a.value、b.valueは両方とも1
a.value   //1
b.value   //1

//a.valueを2に変更する
a.value=2   

//a.value、b.valueは両方とも2
a.value   //2
b.value   //2

```


#値型と参照型の使い分け

基本は値型を使い、変更の共有が必要となるところは参照型を使う。

値型は、変数や定数への代入や引数への受け渡しのたびにコピーされ、変更は共有されない。
→一度代入された値は明示的に再代入しない限りは不変であることが保証される。

参照型は、変数や定数への代入や引数への受け渡しの際にコピーされずに参照が渡されるため、変更が共有される。
→一度代入された値が変更されないことの保証は難しい。

よって、安全にデータを取り扱うためには積極的に値型を使い、参照型は状態管理など変更の共有が必要となる範囲のみにとどめるのが理想。
機械語と人間語

#ブラウザが認識できる言語
##ブラウザの役割
ブラウザは、`HTML, CSS, JavaScript, WebAssembly`という言語を認識して、画面にページを描画している

>WebAssemblyについては処理の高速化が可能であることから、
2019年にW3Cという団体によってWeb標準に認定された言語

Ruby on Railsを用いての開発は
`テンプレートエンジンであるERBを用いて、HTMLにRubyを埋め込む`ということを行っている

サーバーサイドでどれだけいろいろな言語を用いて書いたとしても、最終的には、`HTML, CSS, JavaScript`となってブラウザに返されています。
>逆を言えば、最終的にこれらの言語へ変換されていなければブラウザはページを描画できない

これは、ブラウザの認識できる言語が、これらの`HTML, CSS, JavaScript, WebAssembly`のみであるため

##開発を便利にする言語
>開発するときにはもっと書きやすく、読みやすい言語で開発したい

より開発者が開発しやすいよう設計されたプログラミング言語は、`高級言語`

###高級言語
`高級言語`は、機械よりも人間が理解しやすいように設計されたプログラミング言語のこと
反対に、機械が認識しやすい言語は`低級言語`

###高級言語と低級言語

- 高級言語
    - （英：high-level programming language）
- 低級言語
    - (英：low-level programming language)

>たとえば、開発者が効率よくCSSを書きたい場合は、より高級なSCSSやSASSなどの言語が使われます。
JavaScriptの場合も、TypeScriptやCoffeeScriptなどの`高級言語`があり、保守性や効率を向上させた記法で開発することが多い

`高級言語`は便利だが、
動作する機械が認識できるように、通常より多く翻訳してあげる必要がある
この翻訳する作業は`コンパイル`
FuelPHPをローカル環境にインストール

#ローカル環境
・VirtualBox
・Vagrant

ローカル環境構築
・https://qiita.com/naoki_y/items/ef25f197950dceaca3be
・https://qiita.com/naoki_y/items/a8a02c9adaba38c6f263

#FuelPHPのインストール
###インストール方法
#####１、コマンドライン
#####２、GitHub からクローン（←今回はこの方法）
#####３、Zip ファイルをダウンロード
（公式：http://fuelphp.jp/docs/1.7/installation/instructions.html ）


```
-----インストールしたいルートに移動-----

cd インストールするディレクトリ

GitHub からクローン
$ git clone --recursive git://github.com/fuel/fuel.git
```

#Composerのインストール
※Composerをインストールしてない場合

```
Composerのインストール
$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

セットアップの実行
$ php composer-setup.php

ダウンロードしたsetup.phpを削除
$ rm composer-setup.php

グローバルで使えるようにする
$ mv composer.phar /usr/local/bin/composer

インストールできたか確認
$ composer
```

#FuelPHPを使えるようにする
FuelPHPをインストールしただけだとindex.phpアクセスしてもエラー画面が出てWelcome画面に行けません。
理由はFuelPHPのフレームワークのコンポーネントがcomposer経由でロードされるからとのこと。

```
FuelPHPのディレクトリに移動
cd /インストールしたディレクトリ/fuel

Composerの実行
$ php composer.phar self-update
$ php composer.phar update

パーミッションの設定
$ php oil refine install

ビルトインサーバを起動してindex.phpにアクセスしてWelcome画面が表示されるか確認
/インストールしたディレクトリ/fuel/public/index.php
```

下記の画面にアクセスできたら成功
![スクリーンショット 2021-02-17 12.36.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1061654/bad6865c-6097-2ffc-0943-634581152171.png)
Git 基本コマンドまとめ（Git初心者に教えるチートシート）

### 1. Gitとは

参考図書：わかばちゃん
https://next.rikunabi.com/journal/tag/webdesign-manga/

### 2. GitをPCに導入しよう

* ダウンロード: https://backlog.com/ja/git-tutorial/intro/05/ （コンソールを選ぶ）
* 初期設定: https://backlog.com/ja/git-tutorial/intro/06/
* SSH接続設定: https://backlog.com/ja/git-tutorial/reference/ssh/

### 3. リモートリポジトリをクローンする
https://backlog.com/ja/git-tutorial/intro/14/

※リポジトリはもう作ってある前提

```
git clone <repository> <directory>
```

* repository...SSHのURL
* directory...ローカルに作成されるフォルダ名

### 4. ファイルをコミットする
https://backlog.com/ja/git-tutorial/intro/08/

 **4-1.編集して、状況確認。編集したファイル一覧が出る** 

```
git status
```

`modified:` ...変更
`new file:` ...新規ファイル

 **4-2.ステージする** 

```
git add <file>
git add . （全ファイル）
```

 **4-3.コミットする** 

```
git commit -m "<コメント>"
```

### 5. リモートリポジトリにプッシュする
https://backlog.com/ja/git-tutorial/intro/13/

```
git push origin <branchname>
```

### 6. リモートリポジトリからプルする

原理：https://next.rikunabi.com/journal/20170120_t12_iq/
https://backlog.com/ja/git-tutorial/intro/16/

```
git pull origin <branchname>
```

### 7. ブランチを作成する

#### 7-1. ブランチとは: 

https://backlog.com/ja/git-tutorial/stepup/01/
分岐点を作ることができる

#### 7-2. ブランチはフォルダのようなもの

* masterブランチ ... 本番に反映したフォルダ
* developブランチ...開発してチェック済みなフォルダ
* featureブランチ...個人で開発するフォルダ

マージ...featureをdevelopに上書きする


##### ブランチの作成

https://backlog.com/ja/git-tutorial/stepup/07/


```
git branch <branchname>
```


##### ブランチの移動

```
git checkout <branchname>
```


##### ブランチを作ってそこに移動

```
git checkout -b <branch>
```

##### リモートのブランチをコピーしてきてそこに移動（developブランチの場合）

```
git checkout -b develop origin/develop
```

https://www.setoya-blog.com/entry/2012/11/04/132746

### 8. コミット を課題に紐付ける

※コミットのコメントに課題のキーを貼り付けるだけ（Backlogの場合）

### 9. プルリクエストの作成と、レビューと、画面上からマージ
https://backlog.com/ja/git-tutorial/pull-request/06/
https://backlog.com/ja/git-tutorial/pull-request/07/
https://backlog.com/ja/git-tutorial/pull-request/08/


# ▼以下、慣れてから

### 10. コマンドでマージする
https://backlog.com/ja/git-tutorial/stepup/09/

※その前にファストフォーワードしない設定
https://qiita.com/nog/items/c79469afbf3e632f10a1

```
git checkout <parent branchname>
git merge <child branchname>
```

### 11. コンフリクトの解消
https://backlog.com/ja/git-tutorial/intro/20/

### 12. その他便利機能

#### リモートの新着情報を取得
厳密には→ https://next.rikunabi.com/journal/20170120_t12_iq/

```
git fetch
```

#### ブランチの削除
https://backlog.com/ja/git-tutorial/stepup/10/

```
git branch -d <branchname>
```

#### コミット前の変更点を戻す
https://qiita.com/macer_fkm/items/ea2337a9b504b982c295

##### 一部ファイル

```
git checkout <filename>
```

##### 全部

```
git checkout .
```

#### 現在の作業を一時的に退避
https://backlog.com/ja/git-tutorial/reference/stash/#section1

```
git stash
```

#### git add してステージングしたものを戻す

```
git reset <filename>
git reset .　（全ファイル）
```

#### 既存のローカルファイルを、既存のリモートリポジトリと紐付ける

リモートに新規のリポジトリ作ったけど、既存ファイルがすでにあるから、
クローンから始めるんじゃなくて、既存ファイルを紐付けたいとき。

1.`cd` （チェンジディレクトリ）で該当のディレクトリに移動して、Gitを初期登録

```
git init
```

2.そのままリモートリポジトリを設定

```
git remote add origin <リモートのURL>
```
bind(this)を理解するのに役立つシンプルコード

おまじないとして使ってしまいがちなbind(this)をちゃんと理解するために、
O'REILLY「初めてのJavaScript 第3版 ES2015(ES6)対応」を読み返してみたので、
自分用のメモとして記事に残してみる。
自分用と言わず、同じような疑問を持っている人の助けになったら嬉しいです。

最近Reactを扱うことがあって、なんでそんなに関数をbindしまくるんだっけ?と
思ったのが今回本を読み返したモチベーション。
ネット上で解説している記事の多くは、サンプルコードを理解するのに一苦労でわかりにくい。
以下のコードが超シンプルかつわかりやすいので紹介する。

下記のようなオンラインコンソールでコードを動かしてみると理解が深まるかと。
https://stephengrider.github.io/JSPlaygrounds/

コードの引用元：上記のO'REILLY
###うまくいかないコード
オブジェクト`obj.name`に定義した文字列を反転させるサンプルコード。
動かしてみると、`getReverseName()`内の`this`が怒られてしまうことがわかる。

原因は、最終行で`obj.greetBackwards()`を呼び出すときは `this`は`obj`と紐付けられている一方で、`greetBackwards`の内側から`getReverseName`を呼び出すときは`this`が別物となってしまうことにある。

```js

const obj = {
	name : 'hello world',
	greetBackwards : function() {

		function getReverseName() {
			let nameBackwards = '';
			for(let i = this.name.length - 1; i >= 0; i--) { //ココのthisが怒られる
				nameBackwards += this.name[i]; //ココのthisも怒られる
			}
			return nameBackwards;
		}
		return getReverseName();
	}
}
console.log(obj.greetBackwards()); //表示されない
```

絵に書くとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655928/289749ea-f854-2169-9d9e-50c26d52403f.png)


###うまくいくコード1（self = thisを使用）
これを解消する手段として、`this`を別の変数に代入してあげる方法が挙げられる。
`self`や`that`を使うのがポピュラーとのこと。

```js

const obj = {
	name : 'hello world',
	greetBackwards : function() {
		const self = this;  //thisを別の変数に置き換える
    
		function getReverseName() {
			let nameBackwards = '';
			for(let i = self.name.length - 1; i >= 0; i--) { //self.nameとする
				nameBackwards += self.name[i]; //self.nameとする
			}
			return nameBackwards;
		}
		return getReverseName();
	}
}
console.log(obj.greetBackwards()); //dlrow olleh
```

###うまくいくコード2（bindを使用）
別の手段として、`greetBackwards`の中で`getReverseName`を呼び出す際に
`.bind(this)`を付与して、`getReverseNameのthis` を `objのthis`
として呼び出すように指示する。

```js

const obj = {
	name : 'hello world',
	greetBackwards : function() {

		function getReverseName() {
			let nameBackwards = '';
			for(let i = this.name.length - 1; i >= 0; i--) {
				nameBackwards += this.name[i];
			}
			return nameBackwards;
		}
		return getReverseName.bind(this)();　//ココにbind追加
	}
}
console.log(obj.greetBackwards());
```

###どっちが良いか
個人的には`self = this`の方が読みやすいので好き。

どちらが一般的によく使われるのか調べていたら、
こちらの記事で考察してるのを見付けた。とっても分かりやすい。
https://www.deep-rain.com/programming/javascript/807
@nuxt/typescript-runtimeでデコレーターを使う際の注意点

最新のnuxt.jsを使ってtypescript-runtime上でデコレーターを使うと以下のようなエラーが出ることがある。
(universalモードの場合)

```
ParseError: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (3:1)

...
at p (node_modules/jiti/dist/jiti.js:1:9442)
...
```

これは、内部で[jiti](https://github.com/nuxt-contrib/jiti)というトランスパイラが勝手に呼ばれていることが原因である。

## 解決法
typescript-runtimeの場合はts-nodeによって自動的にトランスパイルされるので、jitiは無用の長物である。
したがって、jitiを使わないように設定する必要がある。

具体的には、nuxt.config.tsに`createRequire: 'native'`を追加すればよい。
(ドキュメントには書いてないが実際動作するようである。(nuxt@2.15.0にて確認))

```ts:nuxt.config.ts
module.exports = {
  createRequire: 'native',
  // ...
}:
```
NavigationのCookbookをざっと読む

**Flutterに慣れていない人向けです。**

Navigation（遷移）はよく使うので、備忘録的に公式ドキュメントのCookbookを置いておきます。
https://flutter.dev/docs/cookbook/navigation/navigation-basics

ページの概要は以下の通りです。
###1.Create two routes.
2つのrouteを作る。
遷移前ページ（以下、「ページ1」）と遷移先ページ（以下、「ページ2」）を作るということでしょう。

###2.Navigate to the second route using Navigator.push().
ページ1からページ2に遷移するのは`Navigator.push()`を使う。
`SecondRoute()`には、次のページのClass名を記述する。

```
// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}
```

###3.Return to the first route using Navigator.pop().
ページ1からページ2に戻るのは、`Navigator.pop()`を使う。

```
onPressed: () {
  Navigator.pop(context);
}
```
公式ドキュメントわかりやすい。。。素敵。
社会人2年間の集大成！占いサイトを作成した話②

[社会人2年間の集大成！占いサイトを作成した話①](https://qiita.com/nacho0707/items/3ef87f412be7b92b9d33)のつづきとなります！

# ホーム画面の紹介
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/1a4f86b0-0ee1-8a9f-cbbe-786104575e8c.png)
※一応Copyrightも入れています。

## 機能の紹介
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/ec1f6a12-6cc6-e1a5-4759-69a85d15bd0a.png)

### 『段差につまづくかも。。』の部分
画面遷移時にランダムで運勢を表示するようにしています。全部で10通りです。運勢に対して、総合運、恋愛運、仕事運の結果も連動するように設定しています。

```javascript
// １０通りのランダムな数字のを生成する
const min = 0;
const max = 9;
const number = Math.floor(Math.random() * (max-min) + min);

// 今日の運勢のメッセージを１０通り用意する
const fortuneMsg = new Array();
fortuneMsg[0] = "";
fortuneMsg[1] = "";
fortuneMsg[2] = "";
fortuneMsg[3] = "";
fortuneMsg[4] = "";
fortuneMsg[5] = "";
fortuneMsg[6] = "";
fortuneMsg[7] = "";
fortuneMsg[8] = "";
fortuneMsg[9] = "";

// .text()で対象の箇所にメッセージを設定する
// numberがランダムに生成されるため、画面遷移毎に表示される運勢が切り替わる
$('.fortuneResult').text(fortuneMsg[number]);

// 総合運、恋愛運、仕事運の結果の表示の判定方法
// 総合運の場合を紹介
switch (number) {
    // 総合運が１の時
    // HTMLには５このマークを記載しておき、jsにより必要ない部分を隠す
    case 9:
        $('.star2').hide();
        $('.star3').hide();
        $('.star4').hide();
        $('.star5').hide();
    break;
    // 総合運が２の時
    case 5:
    case 8:
        $('.star3').hide();
        $('.star4').hide();
        $('.star5').hide();
    break;
    // 総合運が3の時
    case 6:
    case 7:
        $('.star4').hide();
        $('.star5').hide();
    break;
    // 総合運が4の時
    case 2:
    case 3:
    case 4:
        $('.star4').hide();
        $('.star5').hide();
}

```

### 『詳しくみる』の部分
『詳しくみる』をクリックすると運勢の詳細部分が表示されるようになっています。

```HTML
<details>
     <summary class="navigation">詳しくみる</summary>
         <p class="resultDetail">今日は何をしても全てうまくいく予感！</p>
         <p>総合運</p>
            <i class="fas fa-star star1"></i>
            <i class="fas fa-star star2"></i>
            <i class="fas fa-star star3"></i>
            <i class="fas fa-star star4"></i>
            <i class="fas fa-star star5"></i>
         <p>恋愛運</p>
            <i class="fas fa-heart heart1"></i>
            <i class="fas fa-heart heart2"></i>
            <i class="fas fa-heart heart3"></i>
            <i class="fas fa-heart heart4"></i>
            <i class="fas fa-heart heart5"></i>
         <p>仕事運</p>
            <i class="fas fa-pen pen1"></i>
            <i class="fas fa-pen pen2"></i>
            <i class="fas fa-pen pen3"></i>
            <i class="fas fa-pen pen4"></i>
            <i class="fas fa-pen pen5"></i>
</details>

```
### 運勢のマーク
fontawesomeのマークを使用しました。

```HTML

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

```
# まとめ
大変だったことは運勢の内容、詳細の内容、運のマーク数を考えランダムに表示させることです。また、自分で運勢を10通りを考えるのはなかなか大変でした:disappointed_relieved:であうが、ある程度本物っぽくしたかったので、10通りは用意しようと頑張りました！

今回はここまでとなります。
次回では動物占いのページの紹介を行っていきます:point_up_tone1:

続きはこちら！
[社会人2年間の集大成！占いサイトを作成した話③](https://qiita.com/nacho0707/items/25dc5634f932f47a501d)
VueでタブUIを作る

#はじめに
Vueを使ってタブUIを作ります。
作ったものはこちら

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="Nnohara" data-slug-hash="PobmpLx" 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="Vue tab">
  <span>See the Pen <a href="https://codepen.io/Nnohara/pen/PobmpLx">
  Vue tab</a> by 野原直人 (<a href="https://codepen.io/Nnohara">@Nnohara</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


#処理の流れ
`v-on`ディレクティブでクリックを検出
↓
メソッドに引数を代入し`v-if`を使って引数に応じて表示を切り替える
↓
タブ本体のスタイルも`v-bind`を使って切り替える

#`v-bind`について
[公式リファレンス](https://jp.vuejs.org/v2/guide/class-and-style.html)より

~~~vue
<div v-bind:class="{ active: isActive }"></div>
~~~

`isActive`の真偽性によって`active`クラスを要素につけることができる。また`isActive`の処理は0,1のみではなく

~~~vue
<div v-bind:class="{ active: isActive==='2' }"></div>
~~~

のようにできる。