OmniAICreator/Qiita-1.07M huggingface dataset:
2進数⇔10進数の変換

「2進数」と「10進数」のそれぞれへの変換についてご紹介いたします。

## 10進数から2進数に変換する方法。
割り切れなくなるまで割り算を繰り返す。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655909/bd6e0474-0616-84b3-4dc9-b779581e9545.png)
最後に矢印のように順番に数字を並べていく。
160（10進数）の2進数は、10100000となる。
※8桁で表す時、桁が足りない場合は先頭に0を付け桁を合わせる。

ひたすら割り算を書いていく方法。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655909/007406b8-3cd4-3c14-8e3b-02ba5da52d74.png)
矢印のように余りを順番に並べる。
192（10進数）の2進数は、11000000である。
## 2進数から10進数に変換する方法。
例　1011（2進数）を10進数に変換する場合。
①2進数の数字の下に2を書き右上に累乗の数字を書き、桁が上がるごとに1ずつ増やす。
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655909/029c44d0-ff12-778b-7ede-81dc0ac7792a.png)
![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655909/cb6bf36d-45be-d887-0b1b-f2cdd07939df.png)
②1の箇所だけ、下の2の累乗に合わせた数字を計算する。0の箇所は計算する必要がない。
2⁰は、N⁰=1（数学上どの数字でも0乗は1となる。）
③2⁴+2¹+2⁰=16+2+1=19
よって1011（2進数）の10進数は、**19**となる。
[javascript,cssアニメーション]大量のエラーメッセージを出すアニメーション

テキストを入力するだけでメッセージ動画が作れるサービス[Teloppy](https://teloppy.com "Teloppy")を運営しております！
その中で用いたアニメーションのコードを一部紹介したいと思います！

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707318/34548750-9cc2-01cd-063f-eb33fc19cf26.gif)

[実際のテロッピーでの動作](https://teloppy.com/telops/97ig97be/?message=U2FsdGVkX1%2ByuZsxuZkRk6E1lhD63V5mzDQ4KsdqoUuFtVT5SGsUrSObgc3PKIy59YwjYOeWDPurTVeXp78Yj5H5m9LGOq%2FLpJc3PWBpllU%3D)(teloppy版の方では都合上解像度によってアニメーションの仕様が異なります)

コードの完成形がこちらです

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OJQreqN" data-user="teloppy_com" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/teloppy_com/pen/OJQreqN">
  Untitled</a> by Teloppy テロッピー | 自分だけのメッセージ動画を作ろう (<a href="https://codepen.io/teloppy_com">@teloppy_com</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## css


```css
.pad{
position:absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transform: scale(0.8);
～～略
}
.pad--visible{
opacity: 1;
transform: none;
}
```
装飾の部分は端折りましたが、でモーダルの中央配置を行って、pad-visibleクラスが付与されたときにtransitionでフワッと出てくる感じです。

## js

```js
const $pad = document.querySelector('.pad'),
        $body = document.querySelector('body');
/*
length １行あたりに複製する数
translateX 複製するときに基準となるX座標
translateY 複製するときに基準となるY座標
*/
const clone = (length, translateX, translateY) => {
  for (let index = 0; index < length; index++) {
        //要素の複製
        const $clone = $pad.cloneNode(true);
        //ちょっと左にずらす
        $clone.style.left = (-(length - 1) / 2 + length - index) * 50 + translateX + 'px';
        //ちょっと上にずらす
        $clone.style.top = (-(length - 1) / 2 + length - index) * 50 + translateY + 'px';
        //DOMに追加
        $body.append($clone);
      }
}
for (let index = 0; index < 3; index++) {
    clone(6, (-1 + index) * 250, (-1 + index) * document.documentElement.clientHeight/2);
}
```

まず、モーダルの複製とそれぞれの位置を設定します。css側ですでに中央配置を行っているので、js側の配置では中央からどれだけモーダルをずらすのかというのを設定します。

clone関数では指定された分だけの数のモーダルを１行作ってちょっと左上にずらしながら複製します。

```js
for (let index = 0; index < 3; index++) {
    clone(6, (-1 + index) * 250, (-1 + index) * document.documentElement.clientHeight/2);
}
```

ここの記述では、１行6個のモーダルを３行作っていますが、１行目のX座標の基準値は-250px、２行目を真ん中に配置したいので0px、3行目は250pxの配置になります。Y座標も同様ですが倍率はウインドウの高さに指定してあります。

```js
$pad.remove();
```
で複製の元になったモーダルは消して

```js
const $pads = document.querySelectorAll(".pad");
await timer(500);
for (const $pad of $pads) {
	$pad.classList.add("pad--visible");
	await timer(200);
}
```

0.5秒待ったあとに、for ofでモーダルを一個ずつ0.2秒ごとに表示させて完了です！

Teloppyではこんな感じのアニメーションを多く作ってます。[twitter](https://twitter.com/teloppy_com)のフォローもお願いします:sunny:
【Swift】Result<Sucess,Failure>型によるエラー処理について

# はじめに
エラー処理にはOptional\<Wrapped>型による方法やdo catch文による方法などがありますが、今回はAPI通信にて使用されることの多いResult\<Success,Failure>型による方法について解説したいと思います。

# Result\<Success,Failure>型とは
Optional\<Wrapped>型によるエラー処理では成功を結果の値で、失敗をnilで表すのに対して、Result\<Success,Failure>型では成功を結果の値で、失敗を**エラーの詳細**で表します。
Result\<Success,Failure>型は**型引数を２つ取る列挙型**で、.successと .failureの２つのケースを持ちます。型引数のSuccessは**成功時の値の型**を表し、Failureは**失敗時のエラーの型**を表します。
またSwiftの標準ライブラリにはエラーを表すプロトコルのErrorがあるため、型引数Failureはこのプロトコルに準拠します。
```swift
public enum Result<Success, Failure> where Failure: Error {
    case success(Success)  // .sucessの場合はSuccess型の連想値を持つ
    case failure(Failure)  // .failureの場合はFailure型の連想値を持つ
}
```

# 実装方法
次の例では、ユーザーIDを渡すと、対応するユーザー情報を返すfindUser(byID:)関数を用いて、成功時はその結果を、失敗時は発生したエラーを取得できるようにしています。
失敗時のエラーは列挙型DatabaseErrorとして定義し、データが見つからないエラーを.entryNotFound、重複したデータによるエラーを.duplicatedEntry、不正なデータによるエラーを.invalidErrorとしています。そしてswitch文を用いて、これらのすべてのエラーに対して網羅的にエラー時の動作を実装しています。
```swift
enum DataBaseError: Error {
    case entryNotFound
    case duplicatedEntry
    case invalidEntry(reason: String)
}

struct User {
    let id: Int
    let name: String
    let email: String
}

func findUser(byID id: Int) -> Result<User, DataBaseError> {
    let users: [User] = [
        .init(id: 1, name: "Yusei Nishiyama", email: "nishiyama@example.com"),
        .init(id: 2, name: "Yosuke Ishikawa", email: "ishkawa@example.com")
    ]

    for user in users {
        if user.id == id {
            return .success(user)
        }
    }
    return .failure(.entryNotFound)
}

let id = 0
let result = findUser(byID: id)

switch result {
case let .success(user):
    print(".success: \(user)")
case let .failure(error):
    switch error {
    case .entryNotFound:
        print(".failure: .entryNotFound")
    case .duplicatedEntry:
        print(".failure: .duplicatedEntry")
    case .invalidEntry(let reason):
        print(".failure: .invalidEntry(\(reason)")
    }
}

// 実行結果
// .failure: .entryNotFound
```

# 利用するべき時
### ⑴ エラーの詳細を提供したい時
Result\<Success, Failure>型では**連想値を通じて失敗時にエラーの値を返します**。したがって、エラー発生時には必ずエラーの詳細を受け取ることができ、詳細に応じてエラー処理の挙動を細かくコントロールできます。
またResult\<Success, Failure>型では**エラーの型が型引数となっているため、任意のかたでエラーの情報を表現できます**。したがって、**発生し得るエラーの種類をあらかじめ把握できる**というメリットや、**エラー処理に必要な情報を受けることができる**というメリットがあります。

### ⑵ 非同期処理のエラーを扱うとき
Result\<Success, Failure>型は値として処理の結果を表せるため、**関数やクロージャの引数や戻り値に指定できます**。クロージャを用いて非同期処理の結果を呼び出し元に通知する場合であれば、呼び出し元にエラー情報も伝えることができます。
一方、Optional\<Wrapped>型では値の有無しか表すことしかできず、またdo-catch分ではそもそも発生したエラーを呼び出し元に伝えることができません。その点においてResult型は優れています。

# 参考
・Swift実践入門 (https://gihyo.jp/book/2020/978-4-297-11213-4)
tmux.confが反映されない

『tmux.conf 反映されない』で検索すると『前のセッションが残っているので`ps`でpid調べて`kill`コマンドで消しましょう』といった記事が何故か出てくるが、`tmux kill-session`で消せます。

```sh:動いているセッション全部消す
tmux kill-session -a
```
【HTML】HTMLのtextarea内で文字列を改行する方法

javascriptでもできるけど、いちいちこんな事でJSを使うものなーと考えてたら、いいの見つけた。

# コード
```HTML
<textarea>【武器】&NewLine;【防具】</textarea>

または、

<textarea>【武器】&#13;【防具】</textarea>
```

# 結果
```
【武器】
【防具】
```


参考
https://tamoc.com/textarea_newline/
JetpackComposeのRippleダサくない？

# 初めに
前回に引き続きJetpackComposeの記事を書いていこうと思います
今回はJetpackComposeを実装してる時に自分がこれ修正したいなぁって思って調べたものを備忘録として残しておきます

### 本文
早速ですが、実は結構簡単なんですよね。
`Modifier`でタップの挙動を制御する時に設定する`clickable`に対して以下の設定を追加してあげればいいだけです

```kotlin
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(),
```
`rememberRipple`内に`bounded`, `radius`,`color`を好きなように設定できます。
`bounded`は`false`を渡すことで領域を超えてエフェクトが発生します。
`radius`は大きさを指定することができ、`color`は`ripple`の色を変更することができます。

### 最後に
JetpackComposeは非常に便利な分、まだ思った通りの実装をするのには少し手間がかかってしまうところが多いので、こういった従来の実装をしたいけどどうしよっかなぁみたいな部分を記事に残していけたらなと思います。
rsyslogにてログを転送する方法

# はじめに
こんにちは、山田です。
現在にかかわっている案件で、rsyslogに触れる機会があったため具体的に実装したことをまとめていきます。

# 構成図
構成図は以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/16bb31ea-88d5-c388-7116-c2bdec24bac6.png)
# ログ受信側のrsyslog.conf設定変更
``/etc/rsyslog.conf``の以下のコメントアウトを外しログのTCP転送を受け入れるようにします。
```/etc/rsyslog.conf
module(load="imtcp") # needs to be done just once
input(type="imtcp" port="514")
```

# ログ受信側のrsyslog設定ファイル作成
``/etc/rsyslog.d``配下に``test.conf``を作成し、その中にログの転送先、転送条件を追記していきます。

```/etc/rsyslog.d/test.conf
:msg, regex, "test..log" /var/log/test.log 
& ~
:fromhost-ip, isequal, "10.1.0.46" /var/log/test.log
& stop
```
基本的な構成以下のようになっています。
```
:＜プロパティ＞, ＜条件文＞, "＜値＞"　"＜ログの送信先＞"
```
**プロパティ**：チェックする対象を指定するもので今回は``msg(メッセージ本体)``,``fronthost-ip(送信元IPアドレス)``を指定しています
**条件文**：プロパティと値をどのように比較するのかを指定するもので今回は``regex(指定した値を正規表現とし、それにマッチするかどうか)``,``isequal(指定した値と完全に一致する)``を指定しています。

# ログ送信側のrsyslog.conf設定変更
``/etc/rsyslog.conf``に追記しログを転送できるように設定する。
```/etc/rsyslog.conf
*.* @@10.1.0.58:514
```
記載方法については以下ようになっています。
```
<ファシリティ>.<ログレベル>  ＜@ or @@＞ ＜ホスト名 or IP＞ : ＜ポート番号＞
```
**ファシリティ**：要するにログメッセージのこと。
**@ or @@**：1個だとUDP転送、2個だとTCP転送になる。

# 動作確認
実際にログが転送されているのか確認していきます。

## loggerにてログ出力
ログ送信側でloggerコマンドを使用して、転送条件にマッチするログを出力させます。

```
logger test01log
```

## ログ転送確認
ログ受信側にて、ログが受信されていることを確認します。
```/var/log/test.log 
Jun 15 05:01:56 ip-10-1-0-46 ec2-user[59482]: test01log
```
受信が確認できれば完了です！

# 終わりに
rsyslogの設定方法について記載しました。
自分なりにまとめてみたことで理解が深まった気がしてます。
また、学んだことを記載していければ良いなと思います。
終わり。
【SwiftUI】NavigationViewがiPhoneとiPadで見た目が変わる

# 問題点
`NavigationView`にスタイルを設定しないとiPhoneとiPadで見た目が変わってしまう。
|iPad|iPhone|
|-|-|
|![simulator_screenshot_2BC0E84E-1339-48FC-AB61-B1A767296089.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/859e9384-606c-be2c-6f47-929d3536c33c.png)|![simulator_screenshot_47A14FCB-0350-420A-8D03-610540F81D5C.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/95e771f5-40e6-6945-9e21-dcf75db4434a.png)|

# コード
```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(0..<10) { _ in
                    Text("テキスト")
                }
            }
            .navigationTitle("タイトル")
        }
    }
}
```

# 解決策
```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(0..<10) { _ in
                    Text("テキスト")
                }
            }
            .navigationTitle("タイトル")
        }
        .navigationViewStyle(.stack)
    }
}
```
`NavigationView`に`.stack`を指定すると同じ見た目で表示する事ができます。
```swift
.navigationViewStyle(.stack)
```
iOSのステータスバーの色をHTMLのmetaタグで変える方法

こんにちは、ちゅらデータのおーすてぃんやいびーん！

# 概要
iOSのSafariのステータスバーの色を\<meta>タグで調整する方法を紹介します。

筆者は、iOS用のPWAを勉強で作っている時に、2022年のSafari仕様でどうやってうステータスバーの色を変えるかを調べていたのですが、情報が古かったり、わかりにくかったりして苦労しました。

なので、わかったことをまとめておきましょうね！

# theme-colorでステータスバーの色を変える
以下のように、HTMLの\<head>タグに\<meta name="theme-color" value="">でiOSのステータスバーを色を設定することができます。
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="Shopping List App">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="blue" >
  <meta name='viewport' content='width=device-width, height=device-height, initial-scale=1.0, user-scalable=no'>
  <link rel="manifest" href="manifest.json">
  <title>Your App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
</body>

</html>
```
これはどうやら、最近Safariがサポートしてくれるようになったので、まだあちこーこーです。AndroidのChrome、Firefoxなどもこのタグがわかるので、楽になりました。

# 外観モード対応
iOSにはダークモード、ライトモードの外観モードがあり、明るめのtheme-colorをダークモードで使うと、不恰好なので、以下のように、mediaのAttributeを追加して、cssのmediaクエリと同じ書き方をします。
```html
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="Shopping List App">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#555555" media="(prefers-color-scheme: dark)">
  <meta name="theme-color" content="#848484">
  <meta name='viewport' content='width=device-width, height=device-height, initial-scale=1.0, user-scalable=no'>
  <link rel="manifest" href="manifest.json">
  <title>Your App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
</body>
</html>
```
iOSは上から\<meta>を見て、当てはまるtheme-colorが見つかるまで順番に下の最後の\<meta>まで見ていくようなので、ライトモードにもmediaのAttributeを追加しましょう。
また、mediaのないものも追加しておくのもいいのかもしれません。
jekyll①設定(DL/ビルド/サーバー)


# jekyllファイルの設定
**(1)ファイルダウンロード**
```
gem install bundler jekyll
jekyll new 〇〇(←任意のフォルダ名)
```
以下のファイルが生成される
![スクリーンショット 2022-06-15 10.45.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/f3e16d0c-05c2-59d5-d77a-5a541d44e90c.png)

**(2)ローカルサーバー起動**
```
cd 〇〇
bundle exec jekyll serve
```
上記のコマンドを入力すると_siteと.jekyll-chacheが生成される
![スクリーンショット 2022-06-15 10.47.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/8df72b03-689b-de1c-41f1-ccf634ca70e2.png)
ローカルでサイトを確認する
http://localhost:4000/
![スクリーンショット 2022-06-15 10.36.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/04bb0ddf-c12d-2952-d35e-3d969cc32417.png)

## 参考URL
jekyll公式サイト: <a href="https://jekyllrb.com/">https://jekyllrb.com/</a>
jekyll Tips: <a href="https://jekylltips-ja.github.io/">https://jekylltips-ja.github.io/</a>
jekyll②サイト制作に必要なファイルを作成する

## jekyllのベーステーマを上書きする
jekyllをインストールし、ビルドされた_siteの中身はMinimaというgemベーステーマの中身である。
サイトを作成するのに、minimaの中身と同一のファイルを作成する。

[_config.ymlに記述されている]
![スクリーンショット 2022-06-15 11.25.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/ba0586c4-5b5b-c2a7-6e8b-cee5d42b3b28.png)
[minimaのファイルの確認]
![スクリーンショット 2022-06-15 11.44.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/b10307b5-51b4-8ed8-dd85-112635ffa42e.png)

### 同じファイルを作成し、上書きの準備をする
```
$mkdir _includes
$mkdir _layouts
$mkdir _sass
$mkdir assets
```
![スクリーンショット 2022-06-15 11.35.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/290cf9e7-3017-d4d0-8cd1-c00b8151b91c.png)

## 作成したファイルの中身について

+ **_includes** - サイト内で繰り返されるソースコードの保管(header.html/footer.html/nav.htmlなど)
+ **_layouts** - サイトのレイアウト、topとblogページのレイアウトを変えたい場合(defalut.html/blog.htmlなど)
+ **_sass** - sassファイルの保管(style.sass/bootstrap.sassなど)
+ **assets** - css/js/images など

## sitemapの設定
ビルドファイルの確認やアンカーリンクの確認に便利なので、sitemapを設定する
sitemap.xmlを作成
```
$touch sitemap.xml
```
sitemap.xmlに以下を追加
```
---
layout: null
search: exclude
---

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

    {% for page in site.pages %}
    <url>
        <loc>{{page.url}}</loc>
        <lastmod>{{site.time | date: '%Y-%m-%d' }}</lastmod>
        <changefreq>daily</changefreq>
        <priority>0.5</priority>
    </url>
    {% endfor %}

    {% for post in site.posts %}
    <url>
        <loc>{{post.url}}</loc>
        <lastmod>{{site.time | date: '%Y-%m-%d' }}</lastmod>
        <changefreq>daily</changefreq>
        <priority>0.5</priority>
    </url>
    {% endfor %}

</urlset>
```
http://localhost:4000/sitemap.xml　で確認すると以下の内容が表示される
![スクリーンショット 2022-06-15 12.01.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/43352f7f-2859-e187-749e-7574fd1134c3.png)

## 参考URL
ベーステーマについて： <a href="http://jekyllrb-ja.github.io/docs/themes/">http://jekyllrb-ja.github.io/docs/themes/</a>
サイトマップの作成：<a href="https://jekyllrb.com/tutorials/convert-site-to-jekyll/#11-add-a-sitemap">https://jekyllrb.com/tutorials/convert-site-to-jekyll/#11-add-a-sitemap</a>
GNU sed (git mater): CWE-416 パッチ

gcc version 12.1.1 (GCC) で GNU sed (git://git.sv.gnu.org/sed) をビルドしようとすると

```console:
sed/utils.c: In function 'utils_fp_name':
sed/utils.c:103:10: error: use after 'rpl_free' of 'p' [CWE-416] [-Werror=analyzer-use-after-free]
```

が出る。以下の修正

```diff:sed/utils.c.patch
diff --git a/sed/utils.c b/sed/utils.c
index 5765dc3..92cc852 100644
--- a/sed/utils.c
+++ b/sed/utils.c
@@ -285,6 +285,7 @@ ck_fclose (FILE *stream)
     {
       if (!stream || stream == cur->fp)
         {
+          open_files = r.link;
           do_ck_fclose (cur->fp);
           prev->link = cur->link;
           free (cur->name);
```

で対応できた。
jekyll③sass設定

## sassの設定
### ファイルの作成
#### ①_sassフォルダに_common.scssファイルを作成
```
$cd _sass
$_sass touch _common.scss
```
#### ②assetsフォルダにcss/style.scssファイルを作成
```
$cd assets
$assets mkdir css
$cd css
$css touch style.scss
```
### ファイルの読み込み
ビルド後に[_site/assets/css/style.css]の階層にファイルを生成されるために、
②で作成した、[assets/css/style.scss]に以下の内容を記載する。
```
---
---
@import "common";
```
:::note alert
---
---を忘れずに記載する
:::

### ビルドしてファイルが生成されているか確認
ビルドのコマンド
```
$bundle exec jekyll build
```
_site/assets/css/style.cssを確認
![スクリーンショット 2022-06-15 14.30.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/f0841d87-e3d2-74f0-bedd-7b018c201807.png)

## _layoutsにcssファイルを設定
忘れずに、_layouts/default.htmlにcssをlinkする
```
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>
```
## 参考サイト
sassの設定： <a href="https://jekyllrb.com/docs/step-by-step/07-assets/#sass">https://jekyllrb.com/docs/step-by-step/07-assets/#sass</a>
Unity インスペクターでの設定値を維持したまま変数名を変更する方法



## 0.0 はじめに
publicやSerializeFieldなどでインスペクターから値変更などアクセスが可能ですが、スクリプトで変数の名前を変更すると、デフォルト設定の状態ではインスペクターから値は消えてしまいます。
値の数が少ない場合はまた設定すればよいのですが、大量にある場合や調整済みの値などは再度設定に手間がかかります。
変更後も値を保持するための方法を説明します。








## 1.0 UnityEngine.Serializationの追加
スクリプトの先頭にあるusing名前空間にUnityEngine.Serializationを追加します。下記にあるFormerlySerializedAsアノテーションを使うために必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352037/ead03620-091d-f013-c252-f078c8a82a11.png)











## 2.0 FormerlySerializedAsアノテーションを挿入
値を保持したい変数の前にFormerlySerializedAsアノテーションを挿入します。FormerlySerializedAs()の()内の引数には保持したい値を持っている変数名（変更前の変数名）を""で囲んで入れます。
下記の例ではbeforeが変更前の変数、afterが変更後の変数です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352037/2c63846d-d6a0-4b27-8be3-cf4ac4becd44.png)









## 3.0 Unityでビルド
Unityに戻ってビルドしましょう。（Unityのデフォルト設定であればスクリプトを保存してUnity画面をアクティブにすると自動でビルドしてくれます。）
変更された変数に値が保持されているはずです。
この後はFormerlySerializedAsアノテーションを削除しても問題ありません。
jekyll④bootstrap設定

## bootstrapをvendor以下にダウンロード
:::note alert
以下の方法だと、共同開発の際にrubyのバージョンを統一する必要があったり、vendor以下(不要なファイル)もgithubにプッシュしないといけないのであまりオススメできない
:::

### ①bootstrapをダウンロードする
Gemfileに以下を記入し、bundle installする
(バージョンを書かなくても最新のbootstrapがダウンロードされる)
```
gem 'bootstrap'
bundle install
```
vendor/bundle/ruby/2.7.0/gems/bootstrap-5.1.3がダウンロードされていることを確認する
![スクリーンショット 2022-06-15 15.09.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/f653cc26-bb74-5d80-073e-b23cb5d8f897.png)

### ②bootstrap.scssを設定
assets/css/style.cssに@importを入力
```
@import "../vendor/bundle/ruby/2.7.0/gems/bootstrap-5.1.3/assets/stylesheets/_bootstrap";
```
### ③ビルドされていることを確認する
_site/assets/css/style.cssにbootstrap.scssの内容が生成されているか確認する
```
$bundle exec jekyll build
```
![スクリーンショット 2022-06-15 15.28.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/31c6a1f2-cfaa-7162-4c05-0db9439a1347.png)
### ④githubにプッシュする際.gitignoreのvendorの記述を削除
削除しないと、vendor以下がgithubにアップされないためビルドされずbootstrapで組んだレイアウトが崩れるので注意する
```
_site
.sass-cache
.jekyll-cache
.jekyll-metadata
vendor←削除
```

## bootstrap.scssのファイルを_sass以下にダウンロード
:::note info
こちらの方法だと、bootstrap.scssのカスタムもしやすく、共同開発の際にrubyのバージョンを統一や、vendor以下(不要なファイル)もgithubにプッシュする必要がない
:::

### ①bootstrapダウンロードし、_sass以下にダウンロードしたbootstrapファイルを入れる
bootstrapを<a href= "https://getbootstrap.jp/docs/5.0/getting-started/download/">ダウンロード</a>
![スクリーンショット 2022-06-15 15.44.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717593/f160645c-d9af-4cb9-cad6-6e5b99fb0413.png)
### ②_sass/_custom.scssを作成し、importする
```
@import'../_sass/bootstrap-file/bootstrap';
```
### ③assets/css/style.scssにもimportする
```
---
---
@import '../_sass/custom';
```
### ④ビルドされていることを確認する
_site/assets/css/style.cssにbootstrap.scssの内容が生成されているか確認する
```
$bundle exec jekyll build
```
【転職活動】経験年数１年未満のプログラマーがポートフォリオを準備せずに面接に挑んだ結果


プログラマーとしての経験年数１年未満でポートフォリオを準備せずに面接に挑んだ結果を残しておきます。

結論から言うと２５社ほど応募して内定１ついただきましたが辞退する結果となりました。

経験年数１年未満の人が何を準備して面接に挑むべきか学んだので（反省も込めて）傷が深いうちに列挙します。

<!-- 目次部分(リンクになるところ) -->
１. [投稿者の経歴](#anchor1)
２. [なぜ準備不足で挑んだか](#anchor2)
３. [転職活動の内容](#anchor3)
４. [書類通過～一次面接](#anchor4)
５. [コーディングテスト](#anchor5)
６. [二次面接、役員面接](#anchor6)
７. [まとめ](#anchor7)

***

<a id="anchor1"></a>

### １. 投稿者の経歴
簡単に自己紹介させていただきます。
・社会人１０年目で転職回数４回
　・１社目：製薬会社のプラントエンジニア４年（非IT職）
　　⇒結婚に伴い退職
　・２社目：ITメーカー子会社の派遣でシステムのカスタマーサポート２年（SE入門）
　　⇒正社員としてプログラマーになりたいと思い退職
　・３社目：零細ベンチャー企業でシステム開発半年（受託）
　　⇒コロナで開発案件０となり退職
　・４社目：メーカー系子会社でシステム保守（SES）
　　⇒開発がしたかったのに保守となりプログラミングさせてもらえないので転職を決意
・実務ではPHP　LaravelでWEBシステム開発を半年ほど経験
・会社の研修ではJava　SpringFrameworkを半年ほど経験
・JavaはOracle Java Silver SE8に合格

***

<a id="anchor2"></a>

### ２. なぜ準備不足で挑んだか
・転職活動しながら準備していけばよいと思い、ポートフォリオをあえて作らず見切り発車で応募した
・低レベルのポートフォリオは採用面接では逆効果となるとYoutubeで知った
・とりあえず面接を受けて感触を確かめたかった（門前払いなのか、もしかして合格できるのかなど）

などなど、ポートフォリオの重要性について無知だったことが主な理由です。

***

<a id="anchor3"></a>

### ３. 転職活動の内容
転職サービスとしてはDODA１本で活動。エージェントサービスも利用したが、紹介案件にはすべて事前に目を通しているものばかりだったので、結局紹介してもらった企業には1社も応募していない。

自分でDODAのサイトから求人票を見て25社ほど応募をかけた。
転職の軸はざっと以下の感じ
①WEBプログラマーとしての採用であること
②零細企業は避け安定して開発案件がありそうなところを重視
③優先１は自社サービスの開発、優先２は受託開発、優先３はSES

***

<a id="anchor4"></a>

### ４. 書類通過～一次面接
・書類通過は７社ほど
・通過したのはほとんどがSES。自社サービスを名乗って求人を出しているが、実際にはSESで経験を積んでから自社プロダクトメンバーに移行、といったアウトな会社もあった。
・一次面接は比較的非IT出身の若い女性の人事部の方が対応されることが多かった
・この時点で１社だけ自社サービス企業の一次面接を突破し、ほぼこの会社に転職活動のすべてを託していた

***

<a id="anchor5"></a>

### ５. コーディングテスト
先に挙げた自社サービス企業のみ、コーディング試験があった。（さすがちゃんとしてる・・・）
track（トラック）という外部サービスを使って自宅で受ける。
試験時間はなんと４時間。アルゴリズム問題２問（各上限２時間）
コードの書き方はWEBで調べてOKなので、単純に問題を論理的に解く能力が問われる
コーディング結果は用意されたテストパラメータを投入して、期待通りの応答が返ってくるかで判定できる仕組み。
ちなみに全問コーディングできなくてもコードの書き方やロジックが良ければ受かると思われる（ネット調べ）

今回は８割ぐらい解けて、制限時間が来たので提出。
結果は後日合格をいただいた。

***

<a id="anchor6"></a>

### ６. 二次面接、役員面接
問題の二次面接。
だいたい直属の上司となるエンジニアか、エンジニア出身の役員の方が対応してくださる。
技術的な質問はもちろんだが、経験してきた業務内容や、５年後１０年後の自分のなりたいイメージを聞かれる。
ポートフォリオがあるかも聞かれる。

私の場合、入りたかった自社サービス企業のエンジニア役員からこれらの質問をされ、必死に回答したが落ちてしまいました。
ポートフォリオなしに、技術的な話を口頭だけでするのはすごく難しく感じました。
例えば
「ＰＨＰを書くときに気をつけていることは何ですか？」
「Laravelのクラスについてどんな使い方をしましたか？」
など、冷静に答えられればいいのですが
回答を事前に用意していないとめちゃくちゃテンパります。
結果、説明が合っていても回りくどくて伝わりずらく、面接官をがっかりさせてしまいます。



***

<a id="anchor7"></a>

### ７. まとめ

結局入りたかった自社サービス企業に落ちてしまい、改めて準備不足を痛感しました。せっかく書類選考やコーディングテストを突破できたのに、本当にもったいなかったです。

やはり良質なポートフォリオを片手に挑むべきだと思いました。これは自分のためでもあるし相手のためでもあると思います。採用のミスマッチって本当に自分にとっても会社にとっても地獄でしかないからです。

技術のミスマッチを防ぎ、自身のレベル感を正確に伝えるためにもポートフォリオは絶対にあった方がいいです。制作を通じて技術的な自信もつくので面接で冷静にいられる気もします。

せっかく内定をくださったＳＥＳ企業様には大変申し訳ないですが、どうしても自社サービス企業に入りたくなってしまったので内定辞退させていただきました。転職活動はいったん停止して、これからポートフォリオの制作に取り掛かります。

プログラマーは開発が好きなので大丈夫、頑張りましょう。
PHP 問題集

 ★下記の問題をプログラミングしてみよう！
整数 N , K と N 行 K 列 の二次元配列 A が与えられます。 A の要素のうち、1 要素だけ 1 になっている要素があるので、その要素の行と列を出力してください。

★入力される値
N K
A_11 A_12 ... A_1K
...
A_N1 A_N2 ... A_NK


・ 1 行で整数 N , K が半角スペース区切りで与えられます。
・ 続く N 行では、二次元配列 A の各要素が半角スペース区切りで与えられます。

入力値最終行の末尾に改行が１つ入ります。

★期待する出力
1 になっている要素の行と列を次の形式で出力してください。
出力の末尾には改行を入れてください。

【　行番号 列番号　】

★条件
すべてのテストケースにおいて、以下の条件をみたします。
・ 1 ≦ N , K ≦ 100
・ A_ij は 0 または 1 (1 ≦ i ≦ N , 1 ≦ j ≦ K)
・ 1 であるような A の要素は 1 つ

★入力例1
4 3
0 0 0
0 0 0
0 0 1
0 0 0

★出力例1
3 3

★回答
~~~php
$input = explode(" ", trim(fgets(STDIN)));
   $n = $input[0];
   $k = $input[1];
   
   for ($i = 1; $i <= $n; $i++) {
        $array = explode(" ", trim(fgets(STDIN)));
        array_unshift($array,"dmy");
        unset($array[0]);
        $ans[$i] = $array;
   }
   //var_dump($ans);
   for ($i = 1; $i < $n+1; $i++) {
        for ($j = 1; $j < $k+1; $j++) {
             if($ans[$i][$j] == 1){
                 echo $i ." ". $j . "\n";
             }
        }
   }
~~~
CVPR2022の量子化論文 (3)

# 概要

この記事では、[CVPR2022](https://cvpr2022.thecvf.com/)の量子化論文を紹介します。[^1]
[その1](https://qiita.com/kyad/items/8f15de6b914440a4f76c) [その2](https://qiita.com/kyad/items/036008ee2f286e68369d)

[^1]: 画像や数式は論文から引用しています。


# Instance-Aware Dynamic Neural Network Quantization

https://openaccess.thecvf.com/content/CVPR2022/papers/Liu_Instance-Aware_Dynamic_Neural_Network_Quantization_CVPR_2022_paper.pdf

概要：DQNet. 画像毎に量子化ビット数を変える量子化
研究機関：Huawei
新規性：Bit-Controllerが重みとActivationのビット数を指定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2448931/6b53112c-f04c-5d1c-f35c-1302b0bcde84.png)
キモ：学習時、各レイヤは、Bit-Controllerが指定したビット数でQATする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2448931/ff0675c6-9623-db3d-02cb-9942be60bcba.png)
演算回数をロスに入れて最適化する。
評価：ResNetやMobileNetV2で実験した。


# Data-Free Network Compression via Parametric Non-uniform Mixed Precision Quantization

https://openaccess.thecvf.com/content/CVPR2022/papers/Chikin_Data-Free_Network_Compression_via_Parametric_Non-Uniform_Mixed_Precision_Quantization_CVPR_2022_paper.pdf

概要：PNMQ. データフリー量子化
研究機関：Huawei
新規性：学習やデータが不要で精度の良い量子化。
キモ：重みの量子化誤差を最小化するシンプルな方法。CSR(圧縮率)を指定して圧縮する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2448931/aa854091-52f1-26bb-52ad-0facedc2a3fd.png)
評価：ResNet, MobileNetV2で実験した。


# Channel Balancing for Accurate Quantization of Winograd Convolutions

https://openaccess.thecvf.com/content/CVPR2022/papers/Chikin_Channel_Balancing_for_Accurate_Quantization_of_Winograd_Convolutions_CVPR_2022_paper.pdf

概要：[Winogradによる畳み込み計算](https://arxiv.org/abs/1509.09308)の量子化による精度劣化を抑制する方法。
研究機関：Huawei
新規性：Winogradの入力とフィルタのレンジをバランスさせる方法を提案した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2448931/512d2bcf-3da7-4bb0-f9d2-3ec12901e7c2.png)
キモ：テンソルと重みにスケーリング係数$\Omega$を掛ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2448931/baecc5b4-6f35-689c-a60d-bcbb5aa3aff2.png)
評価：ResNetで実験した。
Djangoで複数のパスパラメータを含むURLを実装する

## 目的

以下のように、パスパラメータを複数含むURLを、Djangoで定義・実装する方法の整理
`http://localhost/<プロジェクトID>/<タスクID>/`

#### 参考：公式チュートリアル

https://docs.djangoproject.com/ja/3.2/intro/tutorial03/

## URL定義
たとえば、複数のプロジェクトが、複数のタスクを持つ、そんなアプリがあったとする。
タスク詳細を表示するURLは複数の変数（パスパラメータ）を持つ。
このような場合、Djangoでは以下のようにURLを定義できる。

```config.urls.py
urlpatterns = [
    path('', views.projects),
    path('<int:pj_id>/', views.detailProject),
    path('<int:pj_id>/<int:tk_id>', views.detailTask)
]
```

この定義では、以下のURLにアクセスできる。
* `http://localhost/` : プロジェクト一覧
* `http://localhost/pj_id/` : プロジェクト詳細
* `http://localhost/pj_id/tk_id/` : タスク詳細

## View実装
Viewは以下のように実装できる。

```views.py
def projects(request):
    return HttpResponse("<html><body>プロジェクト一覧</body></html>")
def detailProject(request, pj_id):
    return HttpResponse(f"<html><body>{pj_id}</body></html>")
def detailTask(request, pj_id, tk_id):
    return HttpResponse(f"<html><body>{pj_id}, {tk_id}</body></html>")
```

ポイント
* Viewの引数名(pj_id, tk_id)は、urlsに定義したパスパラメータの名称と一致させる必要がある。
* 順序は、パスパラメータの順序と異なってもよい。

## 余談
プロジェクト部分とタスク部分を別アプリとして作って、urlsを分けることも可能。
これでも、detailTaskには、pj_idとtk_idが渡される。

```config.urls.py
urlpatterns = [
    path('', include('projects.urls'))
]
```
```projects.urls.py
urlpatterns = [
    path('', views.projects),
    path('<int:pj_id>/', views.detailProject),
    path('<int:pj_id>/', include('tasks.urls'))
]
```
```tasks.urls.py
urlpatterns = [
    path('<int:tk_id>/', views.detailTask)
]
```
ゲームエンジンの歴史　

## ゲームエンジンとは
共通して用いられる主要な処理を代行し効率化するソフトウェアのことを言います。


なぜゲームエンジンがあるのか、それはゲーム1つ1つのキャラクターやフィールドを１から作るのは時間がとてつもなくかかってしまいます。
それらを効率的に行えるようにする様々なツールがまとまったものをゲームエンジンといいます。

ゲームエンジンを使うことで毎回ゲームにあった環境を整える必要がなくなります。

ゲームエンジンの歴史を見ていきます。

## ゲームエンジンの始まり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700643/79a75cf3-acc3-760b-2390-dcce51a67688.png)

ゲームエンジンの始まりは、ゲーム黎明期である1,980年から始まります。
この頃のゲームでは、ハードの性能が低く、ゲーム内容も単純なものが多く、開発は比較的楽に行えました。そのため、それぞれの会社が社内で開発を楽にするソフトとしてゲームエンジンを使用していました。

1990年ごろから現在のようなゲーム製作者向けのゲームエンジンを公開するはやりが生まれました。

そのはやりを生んだゲームが <b>DOOM</b> である。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700643/c5be23d5-2e7e-8659-01de-d970f204d308.png)
この <b>DOOM</b> のようなPFSゲームを簡単に作ることが出来る <b>DOOMエンジン</b> というものが公開された。このエンジンの公開によってPFSゲームが大きく発達し、数多くのゲームが生まれることになりました。


## ゲームエンジン自体を開発する
この <b>DOOMエンジン</b> の広がり方に目をつけたのが、 [<b>id software</b>](https://d.hatena.ne.jp/keyword/id%20software) 
  [<b>Epic Games</b>](https://d.hatena.ne.jp/keyword/Epic%20Games) です。この2社はゲームエンジンを制作して社外に公開し、ライセンス契約を結ぶという新しいビジネスを展開していきました。

そうして、ゲームを作るための補助として開発されてきたゲームエンジンが、この頃にはゲームエンジンのみを開発するような形へと変わっていきました。

そうして生まれたのが、<b>Epic Games</b> の有名なゲームエンジンです。 [<b>unreal engine</b>](https://d.hatena.ne.jp/keyword/unreal%20engine) なのです。

## ゲームエンジンの普及
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700643/14ac8a17-4518-bb52-7878-330aa6389900.png)

こうして <b>unreal engine</b> のようなライセンス契約式のゲームエンジンが生まれたが普及していったのは2000年代序盤から。

各メーカーは黎明期からエンジンを開発していたが、PS2やGCといった高性能なハードが出てくると自社の開発したエンジンだと予算的にも、時間的にもきつくなっていきました。

そこで、Epicのような他社がエンジン開発を目的として作成したゲームエンジンをライセンス契約をして使用するようになっていきました。

そうしたエンジンの需要の伸びにより、様々なゲームエンジンがライセンス契約をめぐって、開発されることとなりました。

## 現在のゲームエンジン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700643/cc5d6513-6dc6-ed58-a5f5-ba5af3f18a5a.png)
現在ではゲームエンジンを使うのがかなり多くなり、ソフトメーカーの自社開発のエンジンがわざわざ作られるというのは少なくなりました。
とはいえ、作りたいゲームの雰囲気を出すために、1からエンジンを作るっていうところもあるようです。

また、一時期大量にあったゲームエンジンは、その熾烈な戦いの末、２大巨頭である <b>Unreal Engine</b> と <b>Unity</b> を中心に精鋭たちが生き残っています。

 <b>Unity</b> は、初心者でもかんたんにゲームが作れるようになっており、個人がエンジンを利用しゲームを作るいわば「インディーゲーム」も多く生まれています。

更に、ゲームエンジンの技術はフライトシュミレーターや医療シュミレーターといったゲーム外のものにまで広がっており、これからの社会に必要不可欠なものへと昇華しています。

## 最後に

今回は軽くゲームエンジンについて調べてみました。ゲームエンジンについて大まかにですが知ることが出来て満足です。












## 参照、引用元
https://ja.wikipedia.org/wiki/%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3
FileMaker Data Migration Tool オススメの構成

## FileMaker Data Migration Toolとは

FileMaker Data Migration Toolとは、Claris社から提供されている、FileMakerのデータ移行を行うためのツールです。
FileMakerで作ったシステムをバージョンアップさせる際に、とても便利に使えるツールでしょう。

## 紹介内容
今回はマイグレーションを行うための作業環境について、オススメの構成があるため、紹介します。

## 構成
とてもシンプルな形で表現すると次のようになります。
![shot 2022-06-14 at 18.00.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2322472/f9cf9f44-e297-0ace-2fb9-377a108253d6.png)

FMDataMigration・・・マイグレーションを行うためのプログラム

新本番.fmp12・・・新しく使おうと考えているFileMakerファイル

旧本番.fmp12・・・これまで使っていた、実際のデータが入っているFilemakerファイル

doneフォルダ・・・マイグレーション作業で出来上がるFileMakerファイルを格納するフォルダ

## 公式用語との紐付け

FileMaker Data Migration Toolを利用する際に、ファイルの名称に混乱してしまうケースがあるように思います。
ソースファイルって何？　クローンファイルって何？　という疑問が出てくるのではないでしょうか。

今回のファイル構成と対比してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2322472/45f71ea2-019b-3b4a-99f0-15cf6d61f6b8.png)
/var/folders/qq/t2scl2cn0rg6kl0lbs99yljc0000gt/T/com.evernote.Evernote/image.png


まずは「旧本番」ファイルです。これはリリース前の状態でいえば、今まさに本番で稼働しているシステムのファイルのことです。
データ（ソース）が日々登録されたり更新されたりしているファイルです。
FileMaker Data Migration Toolでは、それを　「ソースファイル」　と呼びます。
「データ＝ソース」と考えると、このあとの流れもスムーズに理解できると思います。

つぎに、「新本番」ファイルです。これは、プログラムやレイアウト表示、データベース構成、アカウントなどを最新にしたものです。
開発環境がある方ならば、開発環境で開発を行い、完成させた「これをリリースするぞ」ファイルを指します。
FileMaker Data Migration Toolでは、それを　「クローンファイル」と呼びます。
クローン？　複製？　何の複製物？　という感じで、日本人にはピンと来ないネーミングかもしれません。
「ソースファイルがデータだったから、こちらはデータベースやスクリプト等の構造系のことだ」と覚えるとわかりやすいでしょう。


このようなコンビネーションとなりますので、FileMaker Data Migration Toolの操作を文字にすれば、「ソースファイル」に入っているデータを取り出して、「クローンファイル」に入れ込むよ。　ということになります。
「データ」について厳密には、各レコードの情報以外にも、アカウント情報や、シリアル値の「次の値」そしてインデックス情報なども含まれ、移行対象となっています。

:::note info
ソースファイルが　「中身」　
クローンファイルが　「箱」　
と捉えればよりわかりやすくなるでしょう。
:::

## オススメ構成のポイント
以下の2つのポイントがあります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2322472/0b06c9db-c1a0-b483-7cc4-a2784d3c945a.png)
・コマンド文を記述する際に内容をシンプルにできる
・マイグレーションした後のファイル名を実際に使う時の名称と同じにできる

内容は地味なようですが、実務としてはラクになると思います。
シンプルイズベストです。

## コマンド文
FileMaker Data Migration Toolは、ターミナル上でコマンドを入力して実行します。
今回のオススメ構成における、コマンド文は以下になります。

### 前提条件
新本番.fmp12、旧本番.fmp12 共にファイルにアクセスするための
+ アカウント名は　test
+ パスワードは　xxx
とします。

また、コマンドを実行する際には、FileMaker Data Migration Toolを入れたディレクトリまで移動しておきます。今回の例でいえば、「作業フォルダ」の中に移動しておくことになります。

~~~
./FMDataMigration  -src_path 旧本番.fmp12 -src_accounts test -src_pwd xxx -clone_path 新本番.fmp12 -clone_accounts test -clone_pwd xxx -target_path ./done/本番.fmp12

~~~

このコマンド文を実行することで、doneフォルダに中に、「本番.fmp12」というファイルが作られます。
このファイルは、開発環境で作った最新のプログラムやテーブル構成になっており、かつ、これまで本番で動いていたデータが格納されています。
疎通確認の通信がELB Target groupまで届かない

## What's This

監視（疎通確認）で、ELB のTarget groupに通信が届かず、なぜだろうと考えていたところ、
社内の有識者にアドバイスいただき、解決できたのでそのメモです。

## Details

Apacheのアクセスログを確認したところ、監視 Agentからの通信が来ていませんでした。

```
sudo grep "監視 Agent" /var/log/httpd/access_log
# 出力なし
```

また、curlでhttp/1.1を使ってアクセスすると464になりました。

```
$ curl --http1.1 -I https://hogehogeなURL/
HTTP/1.1 464
Server: awselb/2.0
Date: 日時
Content-Length: 0
Connection: keep-alive
```

このことから、以下仮説になりました。

・464はクライアント側とELB間でHTTP/1.1やHTTP/2.0、gRPCの差異があると出るエラー。
監視で使用するクライアントではHTTP/1.1が使用されているため、
現在ALBに設定されているHTTP/2対応のターゲットグループ経由でEC2にアクセスしようとすると、HTTP 464が返ってくる。
https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/load-balancer-troubleshooting.html#http-464-issues

## Solution

・監視用にHTTP/1対応のターゲットグループを作成して、
以下URI宛のアクセスのみ、そのターゲットグループに転送させるようALBのリスナールールを追加。
https://hogehogeなURL/healthcheck/

## Conclusion

##### 原因
・監視で使用されているリクエストプロトコルは HTTP/1.1 であるが、
ターゲットグループのプロトコルバージョンが　HTTP/2 であるため、疎通確認が失敗していた。

##### 対策
・疎通確認用に、HTTP/1.1対応のターゲットグループを作成した。
・疎通確認用に、以下URI宛のアクセスのみ、そのターゲットグループに転送させるようALBのリスナールールを追加。
https://hogehogeなURL/healthcheck/

##### 結果
・監視でAlertではなく、正常判定になった。
・アクセスログで、監視 Agentから通信がきていることを確認できた。

```
sudo tail -n 20 /var/log/httpd/access_log
"IP" - - [日時時刻] "GET /healthcheck/ HTTP/1.1" 200 12 "-" "監視 Agent/0.0.0"
```

##### 総観
HTTPプロトコルのバージョンについては、なんとなくバージョンがあるんだな〜くらいの理解でしたが、
バージョンの不一致で疎通確認が失敗することがあるんですね。

## Reference

・https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/load-balancer-troubleshooting.html#http-464-issues

・https://stackoverflow.com/questions/65233710/fetch-in-node-receiving-status-code-464-but-working-in-browser

・社内有識者
弊社には優秀な技術者が数多く在籍しており、技術的にわからないところがあれば、部署超えて教え合う風土が整っています。
自分は何回アドバイスいただいたか数え切れないほどです・・
稼働中EC2にSSMを追加

## 概要
稼働してるEC2にSession Managerでアクセス為に、手順をご説明させていただきます。

## 手順

### 1.EC2にSSM エージェントの実行状況を確認

```
sudo systemctl status amazon-ssm-agent
```

### 2. EC2既存ロールにAmazonssmmanagedInstanceCore アクセス許可ポリシーをアタッチ

![截屏2022-06-15 14.16.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/a4367d57-ab89-fdfb-7fdd-43b1b6e2cc82.png)

### 3.ポート 443 で Systems Manager エンドポイントへの接続を確認

```
telnet ssm.RegionID.amazonaws.com 443
telnet ec2messages.RegionID.amazonaws.com 443
telnet ssmmessages.RegionID.amazonaws.com 443
```
### 4.ec2再起動

以上となります。
Mac環境でVBAマクロが開けない場合の解消方法

## MACでマクロが開かない

Win10環境で作成したVBAマクロファイルをMacPCで開いた所、
<font color="Red">【このブックには、このバージョンの excel でサポートされていない内容が含まれています。】</font>
というエラーメッセージが表示され、マクロ実行出来ない状態でファイルが開かれました。
　　![ActiveXエラー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2709200/2330dd30-c0d9-510f-5656-5ce427497ff4.png)

## 原因はActiveXコントロール形式でシートに配置したボタン

ActiveXコントロール形式で配置していたボタンを、フォームコントロール形式のボタンに置き換えた結果、MAC環境でもVBAマクロファイルを開き、マクロ実行する事が出来るようになりました。
※ActiveX形式のオブジェクトは、MAC環境には対応していないようです。
　MAC環境での利用が想定される場合、ユーザーフォームの使用も控えた方がよさそうです。

　　![ActiveX→フォームコントロール.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2709200/80669014-e062-1577-9e3a-db620cee6b29.png)

## ActiveXとフォームコントロールの違いについて
#### ■フォームコントロールのメリット
- VBAコードを記述しなくてもボタンにマクロ登録できるため、初心者でも作業の自動化を行う事が出来る
- MAC環境でも、ボタン配置したマクロファイルを開く事が出来る
#### ■ActiveXのメリット
- ボタン色や陰影など、オブジェクトの見た目をリッチに作りこむ事が出来る
（フォームコントロールでは文字のフォント変更のみ編集可能）
- ボタンプロパティを編集する事で、様々な操作の制御を行う事が出来る
　　![ActiveXプロパティ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2709200/8a8a74e7-cd5b-a4b5-cdf2-d5b124fd5af2.png)
一例として”Enabled”プロパティを”False”に変更すると、ボタンをクリック出来ない状態にすることが出来ます。
「特定セルの値が変更したタイミングで”Enabled”プロパティを”True”に更新して、ボタンをクリック出来る状態にする」というような機能制御を行う事が可能です。
　　![ActiveXプロパティ_Enable_2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2709200/1a1331e9-6761-527a-0173-96efa4a2b329.png)
## まとめ
- 不特定多数の作業環境での利用が想定される場合は「フォームコントロール」を使用
- 作業環境が限定されていて、様々な制御を行いたい場合は「ActiveX」を使用
というようにシーンに応じて機能を使い分けられるとよいのではないでしょうか。
Linux mint入りのSSDを追加してWindowsとデュアルブートする

Windows環境がインストールされたデスクトップPCに、Linux mint環境をインストールしたSSDを新たに付け足してデュアルブートできるようにした際のメモです。

> マザーボードはASRock製で、biosのバージョンは以下の通り。
>```
>SMBIOSBIOSVersion
>P1.40
>```

SSDとマザーボードを接続するSATAケーブルはマザーボードの付属品を使い、SSDに電力を供給する電源ケーブルは電源ユニットの付属品を使います（無ければ新たに調達する）。

SSDをPC本体に追加した後、以下の手順を実行します。

1. F2キーでbiosを開く
1. アドバンスド（Advanced）のタブへ移動 → SATAコントローラを「AHCI」にする
1. 起動（Boot）のタブへ移動 → 起動優先順位について、ブートドライブ #1 を Linux mint にする（#2 は自動的にWindowsになる）
1. Linux mint 環境を立ち上げ、ターミナルを起動して `sudo update-grub` を実行して grub（Linuxのブートローダー）を更新する（これでgrubが既存のWindows環境を認識する）
1. Linux mint 環境をシャットダウンしてからPCを起動してブート画面が表示されれば成功

ブート画面で起動するOSを十字キーで選択できます。このように、別ディスクでのデュアルブートはお手軽です。

> 未設定のシステムを選択してしまった場合は Ctrl + Alt + Del で抜けられます。
ミノ駆動本を読んでクソゲー作ってみた

# はじめに

良いコード/悪いコードで学ぶ設計入門（ミノ駆動本）を読み、悪いコードがどれほど悪影響をおよぼすのか、良いコードでどれだけ改善できるのかを実証していくために実際にゲーム作ってみました。
今回は悪いコードをピックアップして実装に取り入れ、クソゲーになってしまう原因を紹介していきます。


### 読むべき人

- ミノ駆動本を読んだけどいまいちピンとこなかった人
- 悪いコードのヤバさが分からない、良いコードのメリットが実感できない人
- 部分的なコードでは現実感が湧かなかった人

### 前提

本記事は JAVA のコードで例を提示していますが、考え方に関する内容なので JAVA を書いたことがなくても問題ありません。

### 身に付くスキル

- 保守や変更がしやすいコードを書くための考え方

# 参考資料

[仙塲 大也. 良いコード／悪いコードで学ぶ設計入門保守しやすい　成長し続けるコードの書き方](https://www.amazon.co.jp/dp/B09Y1MWK9N/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)

# 内容
今回作成したゲームの実際のコードになります。
https://github.com/kdr250/good-code-bad-code-sample
こちらのコードでクソゲーになってしまっている原因を現場でありそうなシチュエーションで解説していきます。

### 仕様変更で新技追加！
PM ) ◯◯くん、このゲームで新しい技を追加することになったから、実装お願いできるかい？

◯◯ ）承知しました！追加しておきます！
.....
◯◯ ）よし、魔法系の技だから[MagicManagerクラス](https://github.com/kdr250/good-code-bad-code-sample/blob/main/bad/src/main/java/com/example/sample/MagicManager.java)見ておけばいいか。..追加完了。実行!!
.....
◯◯ ）ん？ダメージゼロ..なぜだ...
![bad_code.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708735/ca46716a-3c1d-67c0-7277-0dac04b64793.gif)

ミノ駆動本の中に`6.2.5条件分岐を１箇所にまとめる`という章があります。
その中に以下文章が書かれています。
>ソフトウェアシステムが選択肢を提供しなければならないとき、そのシステムの中の1つのモジュールだけがその選択肢のすべてを把握すべきである。

この内容は、「同じ条件文を散乱させないようにしましょう。」という考え方で、散乱させてしまうと起こりうるミスとしては「条件文が書かれている場所が全て把握できず、新規で機能実装をする時などに条件文に条件を追加し忘れてしまう。」などが挙げられます。

こういったミスが起こりうるコードはできるだけ避け、共通の処理は１箇所にまとめることで仕様変更が楽で運用しやすいコードになります。

[条件分岐の追加を忘れているコードの箇所](https://github.com/kdr250/good-code-bad-code-sample/blob/fdbad16e080f44a2509c5edf33f234087f8b0fc6/bad/src/main/java/com/example/sample/UI.java#L735)
 
# おわりに
今回は
- 6.2.5 条件分岐を１箇所にまとめる

をピックアップして実際に悪いコードが発生させる悪夢を紹介していきました。
こういった作りになってしまっているコードは世の中に溢れてしまっていると思います。
あるべき構造を理解して実装やリファクタしていくことで、悪魔のいない世界になることを願っています。
Android12でBeaconが取得できない

# 結論
BLUETOOTH_SCANのパーミッションを要求する

`AndroidManifest.xml`
```
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.hogehoge.androidbeaconapp">
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
    <uses-permission android:name="android.permission.BLUETOOTH_SCAN" /> <-追加

    <application
        android:allowBackup="true"
```

必要であれば`requestPermissions`にも追加

# 詳細
[iBeacon](https://ja.wikipedia.org/wiki/IBeacon)を購入したので試しにログを出力するためにサンプルアプリを作成。パーミッション周りはaltbeaconの公式サイトの[こちら](https://altbeacon.github.io/android-beacon-library/requesting_permission.html)を参考に設定してみたがなぜか動かない。
ログを漁ってみたところ以下のようなメッセージが表示された。

```
E/ScanHelper: SecurityException stopping Android O background scanner
E/CycledLeScannerForLollipop: Cannot start scan.  Security Exception: Need android.permission.BLUETOOTH_SCAN permission for android.content.AttributionSource@802cd449: GattService registerScanner
```

Android公式サイトを参照するとAPIレベル31から新しいBluetooth権限が追加されていることがわかりますね。
https://developer.android.com/about/versions/12/features/bluetooth-permissions?hl=ja
[Unity][C#] 再帰などでスタックオーバーフローになる場合の処置

Unity,というかC#,というか.NET?のスタックサイズは[デフォルトで1MB](https://www.gamedeveloper.com/programming/c-memory-management-for-unity-developers-part-1-of-3-)しかないらしいです。
.Netの場合は[スタックサイズを変更できる](https://qiita.com/hiroed1218/items/d2caf33378961b02ec9e)みたいですが、Unityでは変更できないようです。

それでもどうしても、ネストの深い再帰などを使いたい場合は
(例えば道路のノード間のコストマップから最短経路を得たいときとか)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/8854cd92-fa97-ddaa-bb59-fa90a9d64ca6.png)
Threadを使用し、オプションでスタックサイズを与えてあげると簡単です。
```
Thread th = new Thread(new ThreadStart(threadProc), 4194304);
```
Unityの中の人に教えてもらいました。
[Rails] ポケモンで例えるクラスとインスタンス

### はじめに
いろいろな記事を参照しても理解が殆どできなかったクラスとインスタンスですが、
メソッドについて考えるタイミングでようやく少しだけ理解が出来たのでまとめてみました。
間違っていたらご指摘お願いいたします。

### クラスとインスタンスの違いついて（理解できている部分のみ）

クラス：PostやUserなど大文字（クラス名）のこと、よく設計書とか言われます。大元の部分といったところでしょうか？

インスタンス：＠posts, post, @userなどのPostやUserなどのクラスから<font color="red">作り出したもの</font>
→ 例）`@post = Post.new`とかよく書くと思いますが、ここの`@post`はPost(クラス)から作り出したものなのでインスタンスということになります。なのでもちろん`post = Post.new`の`post`もインスタンスです。

### ポケモンに例えてみる

クラス：ポケモンクラス
ポケモンを作り出してくれる設計図です、卵から孵るんじゃないんです

インスタンス：今回はポケモンクラス（設計図）からピカチュウとヒノアラシを作り出しました

ピカチュウとヒノアラシは同じ設計図から作り出されたので持つべきもの（中身）は一緒です。ただしそれぞれが持っている個性は違います。
| ポケモンクラスの中身 | ピカチュウインスタンス | ヒノアラシインスタンス |
|:-:|:-:|:-:|
| name  |  ピカチュウ | ヒノアラシ  |
| type  | でんき  | ほのお  |
| HP | 35 | 30 |

参考にさせていただいたサイトです!

https://digitalstation-chiba.com/news/%E3%83%9D%E3%82%B1%E3%83%A2%E3%83%B3%E3%81%A7%E5%AD%A6%E3%81%B6%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%BB%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%83%BB%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7/

### 最後に

個人的にはdb/schema.rbをみながらdb/seeds.rbに本番用のデータを手作業で入力している時が一番クラスからインスタンスを作っているなーと感じました。
それこそクラスの中身確認してそれぞれにマッチした文章や数字を当てはめていくみたいな感じです。

ポケモンで例えるのは有名な話なので別の例えをしてみたかったのですがなかなかいい例が思い浮かばず断念。
たい焼きクラスなど有名所はまだありますが、実際自分はあまりそれでは理解できなかったので…

自分はメソッドをモデルに移行させる事ができたときにやっとクラスの意味などが少しだけ理解できたので、今分からなくてもいずれわかるようになることがあるので足踏みしないで進んでいくことが大事だと改めて感じました。

閲覧頂きありがとうございました！
Youtube Data Api v3+GASを使ってLive配信のコメントを取得した

YoutubeDataApiV3を使うと<B>Live配信</B>のコメント及びスーパーチャットを取得することができます。しかし、あくまで生配信中でかつ実行した直近のものしか取得できないので、あまり実用的ではないです。

## メリット
* スプレッドシートに出力するのが楽

## デメリット
* 直近のものしか取得できない
* アーカイブ化されたものは不可

# 方針
1. 動画のURLからvideoIdを取得
1. videoIdからliveChatIdを取得
1. liveChatIdからコメント取得

# コード
```javascript
function getComments() {
    const videoUrl = "https://www.youtube.com/watch?v=[videoId]";
    const videoId = videoUrl.match(/watch\?v=.*$/g)[0].replace('watch?v=/','');
    var api = YouTube.Videos.list("snippet,liveStreamingDetails,contentDetails,status", {id: videoId})
    var chatId = api["items"][0]["liveStreamingDetails"]["activeLiveChatId"]
    const results = []
    if (chatId != null){
        var comments = YouTube.LiveChatMessages.list(chatId, "snippet,authorDetails", {hl: "ja"});
        for (let comment of comments["items"]){
            var isSuperChat = (comment["snippet"]["superChatDetails"] != null)
            var message;
            var published;
            var name;
            var nameId;
            var amount = "";
            if (isSuperChat){
              var superChat = comment["snippet"]["superChatDetails"]
              amount = superChat["amountDisplayString"];
              message = superChat["userComment"];
            }else{
              amount = "";
              message = comment["snippet"]["textMessageDetails"]["messageText"];
            }
            published = comment["snippet"]["publishedAt"]
            name = comment["authorDetails"]["displayName"]
            nameId = comment["authorDetails"]["channelId"]
            // コメント、投稿時刻, ユーザー名, ユーザーID, スーパーチャット時の金額を取得
            results.push([message, published, name, nameId, amount])
          }
    }
    const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
    const sheet = spreadsheet.getSheetByName('test');
    const lastRow = sheet.getLastRow();
    // 1行目に見出しを入れるので、削除しない
    if (lastRow >= 2){
        sheet.deleteRows(2, lastRow-1)
    }
    // 2行目からあとに挿入
    sheet.getRange(2, 1, outputComments.length, outputComments[0].length).setValues(results)
}
```
# ハマった点など
 * pageTokenを使うと最新のコメントを常に取得し続ける（過去には遡らない）
 * スーパーチャットになるとcomment["snippet"]["textMessageDetails"]["messageText"]が消える
【JavaScript 関数ドリル】中級編のtakeWhile関数の実装アウトプット

## takeWhile関数の課題内容

\_.takeWhile関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#takeWhile

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。
https://js-drills.com/blog/takeWhile/

## 課題に取り組む前の状態

- 解答を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

- 自分で実装できた。



## takeWhile関数の実装コード（答えを見る前）

```javascript
function takeWhile(array, predicate) {
  const newArray = [];
  for (let i = 0; i < array.length; i++) {
    if (!predicate(array[i])) {
      break;
    }
    newArray.push(array[i]);
  }
  return newArray;
}
```

## takeWhile関数の実装コード（答えを見た後）

```javascript
// 同じ
```
[CSR] CSR生成方法と例

## CSR設定項目

|項目|内容|利用可能な文字/文字数制限|入力例|
|---|---|---|---|
|コモンネーム（CN)|実際に接続する URL の FQDN|半角英数字文字 半角のハイフン「 -」が使用できます。 最大64文字まで ※ワイルドカード証明書の場合、コモンネームの先頭に必ず「*.」を付けてください。|www.japan.ad.jp *.japan.ad.jp|
|組織単位名（OU)|部署名|半角英数字 半角記号8種『-/.,( )_+』半角スペースが 使用できます。 最大64文字まで|Technical Division|
|組織名（O)|申請組織の名称（英名）|半角英数字 半角記号8種『-/.,( )_+』半角スペースが 使用できます。 最大64文字まで|Japan Internet Inc.|
|市町村名（L)|申請組織の事業所住所の 「市町村名」（英名） ※東京は 23 区|半角英数字 半角記号8種『-/.,( )_+』半角スペースが 使用できます。 最大128文字まで|Shibuya—ku|
|都道府県名（S/ST)|申請組織の事業所住所の 「都道府県名」（英名）|半角英字 半角記号7種『-/.,( )+』半角スペースが 使用できます。 最大64文字まで|Tokyo|
|国名（C)|申請組織の国名|半角英字（大文字）が使用できます。 最大2文字まで ※通常はJPで入力ください。|JP|

## CSR生成例
```
# 秘密鍵を生成
openssl genrsa -des3 -out XXXXXX.key.pem 2048
ex) openssl genrsa -des3 -out site.key.pem 2048
	パスワード：*******
	
# 秘密鍵(パスフレーズを削除)を生成
openssl rsa -in XXXXXX.key.pem -out XXXXXX.key_np.pem
ex) openssl rsa -in site.key.pem -out site.key_np.pem

# CSRを生成
openssl req -new -key XXXXXX.key_np.pem -out XXXXXX.csr.pem
ex) openssl req -new -key site.key_np.pem -out site.csr.pem

# CSRを設定
Country Name (2 letter code) []:JP
State or Province Name (full name) []:Tokyo
Locality Name (eg, city) []:Shibuya—ku
Organization Name (eg, company) []:Japan Internet Inc.
Organizational Unit Name (eg, section) []:Technical Division
Common Name (eg, fully qualified host name) []:www.japan.ad.jp *.japan.ad.jp
Email Address []:
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
```
【JavaScript 関数ドリル】中級編のtakeRightWhile関数の実装アウトプット

## takeRightWhile関数の課題内容

\_.takeRightWhile関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#takeRightWhile

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。
https://js-drills.com/blog/takeRightWhile/

## 課題に取り組む前の状態

- 解答を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

- 自分で実装できた。



## takeRightWhile関数の実装コード（答えを見る前）

```javascript
function takeRightWhile(array, predicate) {
    const newArray = [];

    for (let i = array.length - 1; 0 <= i; i--) {
        if (!predicate(array[i])) {
            break;
        } 

        newArray.unshift(array[i]);
    }

    return newArray;
}
```

## takeRightWhile関数の実装コード（答えを見た後）

```javascript
// 同じ
```
Backlogのメモ

<h2>メモ

Backlogで綺麗に書くためのメモ
バックログは、書き方の設定が２種類あるらしい！
マークアップ言語の設定ともう一つあるみたいだが、今回はマークアップ言語の時のみ使用可能！
Qiitaに書いてみたらQiitaもマークアップ言語を使っているみたいなので、わざと邪魔な文字を入れているのそれを削除などして使うこと。


## ◆タイトルを作る

## 📕できるもの

## 【タイトル】

## ✍️書き方
<p>※「！」は消してください

!## 【タイトル】


<br>
<br>
<br>

<h2>◆文字を太くする

<h2>📕できるもの

**変数名を変更しました** 

<h2>✍️書き方
<p>※「空白」は消してください

**変数名を変更しました **

<br>
<br>
<br>
<h2>◆テーブルを作る

<h2>📕できるもの

No.  | ファイル名  | 詳細  | ステータス
------------- | ------------- | ------------- | -------------
1  | admin/xxx.php  | データjoin  | 要確認
2  | admin/yyy.php |$xxx でjoin  | 完了?
3  | admin/xxx_controller.yyy.php  | テスト用? | 修正不要
4  | admin/xxx.yyy.php | 不使用？  | 修正
5  | admin/xxxyyy.php  | 不使用？  | 不要

<h2>✍️書き方　
<p>※「！」は消してください

No.  | ファイル名  | 詳細  | ステータス
!------------- | ------------- | ------------- | -------------
1  | admin/xxx.php  | データjoin  | 要確認
2  | admin/yyy.php |$xxx でjoin  | 完了?
3  | admin/xxx_controller.yyy.php  | テスト用? | 修正不要
4  | admin/xxx.yyy.php | 不使用？  | 修正
5  | admin/xxxyyy.php  | 不使用？  | 不要




<br>
<br>
<br>

## ◆黒背景を作る
## 📕できるもの

```

$fruit = "banana";

echo $fruit;

```

## ✍️書き方
<p>※「`」は半角を使ってください!<br>
下記はQiitaで勝手に変換されてしまうので全角を使用しています。<br>
mac & windows→「Shift」 + 「@」

｀｀｀
$fruit = "banana";

echo $fruit;

｀｀｀


<h2>
以上がよく使っててるやつです。

随時更新します
2022-06-15（最終更新日）
6月末までにオリジナルアプリケーション開発します。

# アプリ開発を公開しようと思った経緯
皆さんこんにちは。harukiと申します。早速ですが、当方の簡易な経歴とアプリ開発の過程を公開するに至った経緯を記述しようと思います。

#### 私の経歴
・20年卒の元地方銀行員。約2年で退職。⇨テックキャンプに入校⇨カリキュラムが大方終了し今日からオリジナルアプリ作成
となっております。

#### アプリの開発過程を公開する目的
・過程をアウトプットすることで、自分の学びになると思ったため
・今後、初めてアプリ開発する人何かの参考になるかもしれないため
・開発過程を公開することで、モチベーションを高めるため
・期日を決めるため

上記のような目的で、テックキャンプ受講生のアプリ開発過程を公開しようと思ったわけです。一言でまとめると、自分にプレッシャーをかけるためにアプリ開発過程を公開します。


# 使用する言語
・ruby 2.6.5
・HTMLやCSS、Javascript


# 開発するアプリ内容
ここからが本題です。
初めて開発するアプリは「議論するための場所を提供するプラットフォーム」にしようかと思います。
付ける機能大まかに説明すると
・ユーザー登録
・議論するためルームの作成
・ルームに参加
・人気のルーム表示
・コメント投稿
・コメントに対するいいね
・ユーザー詳細表示
です。

なぜ、そのようなアプリにしようと思ったのか？どのような問題意識から開発しようと思ったのか？等は後日、別記事にします。

# 今後の記事投稿の方針について
#### 投稿予定日について
平日夜に「今日やったこと、アプリの進捗具合、やってみてよかったこと（意識した事）」について投稿しようと思います。休日は基本的には記事投稿しない予定です。

#### いつまで投稿するか
テックキャンプの方に聞いたところ、そこそこのアプリを作ろうと思ったら、大体２〜３週間程度の時間は必要とのことです。凝ったものを作るのなら、4週間以上必要になるそうです。従って、今回は今日から2週間後の6月末を終了予定日として、アプリ開発をしていきます。

#### 雑感
記事を書く練習がてら、この記事を書いてみました。この記事（ユーザー登録やグーグルアナリスティックの設定等含め）を書くのに現在で１時間強の時間を使っていてしまいました。記事を書くのって大変ですね、、、。今後は”簡潔に”わかりやすく記事を書くことを意識します。

ここまでご拝読いただきありがとうございます。今後もよろしくお願いします！
スプレッドシートで指定セルに対する任意の範囲を**動的に**足す関数

# 目的

指定セルに対して、列n個ずらし、行n個ずらし、そこからの範囲を任意に指定して、それを足し合わせたい。このとき指定セルをそのセルそのものとして、それを動的に動かしたい場合。

## 関数

```
=sum(OFFSET(INDIRECT(ADDRESS(ROW(),COLUMN())), 0, 2,1,10))
```