OmniAICreator/Qiita-1.07M huggingface dataset:
【Shopify】liquidのオブジェクトについてまとめてみた (tax_line, template, theme)

# はじめに

この記事は、Liquid オブジェクトについて日本語訳したものです。

`tax_line`, `template`, `theme`オブジェクトをまとめていきます。



# tax_line オブジェクト

`tax_line`オブジェクトの属性についてみていきます。


## tax_line.price

`tax_line.price`は、税金の金額を返します。
この金額は、顧客の現地通貨で表示されます。`money filters`のいずれかを使用して、設定した金額形式で返します。

```.liquid:Input
{{ tax_line.price | money }}
```

```.liquid:Output
¥2,500
```



## tax_line.rate

`tax_line.rate`は、税率を10進数で返します。

```.liquid:Input
{{ tax_line.rate }}
```

```.liquid:Output
0.10
```



## tax_line.rate_percentage

`tax_line.rate_percentage`は、税率をパーセンテージ形式で返します。

```.liquid:Input
{{ tax_line.rate_percentage }}%
```

```.liquid:Output
10%
```



## tax_line.title

`tax_line.title`は、税金のタイトルを返します。

```.liquid:Input
{{ tax_line.title }}
```

```.liquid:Output
GST
```



# templete オブジェクト

`templete`オブジェクトは、一握りの属性があります。

`template`だけを参照すると、現在のページをレンダリングするために使用されるテンプレートの名前を返します。

```.liquid:Input
<!--  page.contact.liquid template が使用される場合は -->
{{ template }}
```

```.liquid:Output
page.contact
```



## template.directory

`template.directory`は、テンプレートの親ディレクトリの名前を返します。
親ディレクトリが`templates/`フォルダであるテンプレートの場合は`nil`を返します。

```.liquid:Input
<!--  customers/login.liquid template の場合 -->
{{ template.directory }}
```

```.liquid:Output
customers
```



## template.name

`template.name`は、テンプレートのカスタムサフィックスが存在する場合はテンプレート名を、`.liquid`拡張子が存在する場合は`.liquid`拡張子を除いたテンプレート名を返します。

```.liquid:Input
<!-- product.alternate.liquid template の場合 -->
{{ template.name }}
```

```.liquid:Output
product
```

## template.suffix

`template.suffix`は、`template.name`プリフィックス、または`.liquid`拡張子を除いたカスタムテンプレートの名前を返します。カスタムテンプレートを使用していない場合は`nil`を返します。

```.liquid:Input
<!-- product.alternate.liquid template の場合 -->
{{ template.suffix }}
```

```.liquid:Output
alternate
```



# theme オブジェクト

`theme`オブジェクトには、ストアの公開テーマに関する情報が含まれています。

`theme`オブジェクトの属性についてみてみます。



## theme.id

`theme.id`は、テーマのIDを返します。これは、ユーザーをテーマエディタに直接リンクさせたい場合に便利です。

```.liquid:Input
Visit the <a href="/admin/themes/{{ theme.id }}/settings">theme editor</a> to change your logo.
```

```.liquid:Output
Visit the <a href="/admin/themes/8196497/settings">theme editor</a> to change your logo.
```



## theme.name

`theme.name`は、テーマの名前を返します。



# 終わりに

今回の記事はここまでになります。
お疲れ様でした。

# Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search
【第1回】AWS戦記 ～ルートユーザへのMFA設定～

# AWSアカウント作成後のルートユーザにMFA設定

こんにちは。
現在AWSアカウントを作成してほやほやの状態です。
ルートユーザのセキュリティを強化するためにルートユーザに対しMFA（Multi-Factor Authentication：多要素認証）を設定します。
メールアドレス＋パスワードだけだと突破される可能性が高いですからね。

ちなみに今回は多要素認証用に「Google Authenticator」」を利用します。
こちらはスマートフォンによる2段階認証を実現するために利用します。

Google 認証システムで確認コードを取得する: [Google Play](https://support.google.com/accounts/answer/1066447?co=GENIE.Platform%3DAndroid&hl=ja")

## 前提条件
・AWSアカウントが作成済みであること。
・携帯電話（スマートフォン）を所持しており、且つ「Google Authenticator」がインストール済みであること。
・AWSマネジメントコンソールへの接続はChromeを利用する。

## ルートユーザへのMFA設定
1．「すべてのサービス」→「セキュリティ、ID、およびコンプライアンス」→「IAM」を選択。
2．以下の画面の赤枠のリンクをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1154007/524a2794-3218-5fe9-a77c-6f0379c0f75c.png)
3．「MFAの有効化」をクリック。
4．「仮想 MFA デバイス」が選択された状態で「続行」をクリック。
5．スマートフォンの「Google Authenticator」を起動し、画面上に表示されたQRコードをスキャンする。
6．「Google Authenticator」上の画面に表示された6桁の数字を**2回**入力し、「MFAの割り当て」をクリック。
7．以下の画面が表示されれば成功。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1154007/59bd18e9-3623-ef34-6ae0-32ce60e66c9a.png)
8．MFAが有効になったか確認するため、現在利用しているブラウザとは別のブラウザ（ChromeまたはEdgeなど）でAWSにログインを試み、MFA認証が表示されることを確認。
9．スマートフォンからMFA認証の6桁の番号を入力してAWSマネジメントコンソールにログインできることを確認する。

ちなみにMFA認証に利用しているデバイスが紛失された場合は登録したメールアドレスおよび連絡先電話番号でなんとかなるみたいです。

次回はIAMグループとユーザーの作成を予定しています。
ではでは。
【javascript】javascriptの記述をhtmlファイルから呼び出す

超初心者向けなお話です。

```index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>JavaScriptのお勉強</h1>
    <script src="main.js">
  
    </script>
</body>

</html>
```

``<script src="main.js"></script>``この記述を書くことによって、同じディレクトリ内のmain.jsファイルの記述を呼び出すことができます。

```main.js
alert('がんばれ')
```


お勉強がんばりましょう。
BoxColliderの各面をPlaneとして取得するスクリプト

BoxColliderの各面のPlaneが欲しい時があるのですが直接取得する方法がわからないのでスクリプトを組みました。
[UnityのBoxColliderの頂点を取得するスクリプト](https://qiita.com/RYUMAGE/items/dae74abaf2b7888dcbfa) をPlaneにしたものです

```C:GetBoxColliderPlanes
    public static Plane[] GetBoxColliderPlanes(BoxCollider Col)
    {
        Transform trs = Col.transform;
        Vector3 sc = trs.lossyScale;

        sc.x *= Col.size.x;
        sc.y *= Col.size.y;
        sc.z *= Col.size.z;

        sc *= 0.5f;

        Vector3 cp = trs.TransformPoint(Col.center);

        Vector3 vx = trs.right * sc.x;
        Vector3 vy = trs.up * sc.y;
        Vector3 vz = trs.forward * sc.z;

        Plane[] planes = new Plane[6];
        planes[0] = new Plane(trs.right, cp + vx);
        planes[1] = new Plane(-trs.right, cp - vx);
        planes[2] = new Plane(trs.up, cp + vy);
        planes[3] = new Plane(-trs.up, cp - vy);
        planes[4] = new Plane(trs.forward, cp + vz);
        planes[5] = new Plane(-trs.forward, cp - vz);

        return planes;

    }
```

親の回転、縮小に対応しています
![BoxPlane.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1146955/fdcdf460-737b-5ae4-814e-bf1dd83cace8.png)
【SwiftUI】PreviewProviderにおけるBinding変数のエラーをなんとかする

# どういうことか

フルスクリーンのモーダルで遷移する場合、遷移元から遷移先の `@Binding` にBool値を渡したのち、例えば『戻る』というボタンを押した際にこのBool値を `false` にする必要がある。
そうした場合、遷移先の `PreviewProvider` にてエラーが出る。
なんも書いてないと

`Missing argument for parameter`

とか、それでfixした場合は

`Cannot convert value of type 'Binding<Bool>.Type' to expected argument type 'Binding<Bool>'`

とか、なんか書いてみても

`Cannot convert value of type 'Bool' to expected argument type 'Binding<Bool>'`

こんな感じで間違っている。

## バインディング変数を初期化する

```swift
// バインディング変数
@Binding var isModalActive: Bool

// 中略

struct IndexView_Previews: PreviewProvider {
    static var previews: some View {
        // isModalActiveのバインディング変数を初期化
        IndexView(isModalActive: .constant(false))
    }
}
```

おわり(´・ω・｀)
【Django】forms.pyでログインユーザーに応じてテキストフィールドをdisabledしたい

ログインユーザーに応じてフォームのあるフィールドを入力不可にしたい。

参考
https://qiita.com/The-town/items/4b5718ccfc488edd93c8


Formのインスタンス作成時にuserを渡してもらう

```forms.py

class Form(forms.ModelForm):
    def __init__(self, user, *args, **kwargs):
        self.current_user = user
        super().__init__(*args, **kwargs)
        for field in self.fields.values():
            if str(self.current_user) == "hoge": # hogeならdisabled
                field.widget.attrs["disabled"] = ""
    class Meta:
             model = Hoge
             fields = ('お好きなフィールド')
```

views.pyでFormインスタンスを作成する際、引数としてログインしているユーザー情報を渡す。

```views.py
class View(View):
...
    form = Form(user=request.user, data=request.POST)
...
```

勉強不足なのでもっと良い書き方があったら教えてください。
PlaneとRayの交差する点を求めるスクリプト

[マウスポインターをコライダー内部に閉じ込める方法](https://qiita.com/RYUMAGE/items/c1a324e2289e306209df) 内に書いたスクリプトですが、記事を分けておかないと探せないので別にしました。

```C#:CrossPointOnPlane
    //Planeで取得
    public static Vector3 CrossPointOnPlane(Plane plane, Ray ray)
    {
        float enter = 0.0f;
        plane.Raycast(ray, out enter);

        return ray.GetPoint(enter);
    }
    //平面上の点PlanePointと法線PlaneNormalで取得
    public static Vector3 CrossPointOnPlane(Vector3 PlaneNormal, Vector3 PlanePoint, Ray ray, float distance = 1000.0f)
    {
        Vector3 result = Vector3.zero;

        Vector3 v1 = ray.origin - PlanePoint;
        Vector3 v2 = ray.origin + (ray.direction * distance) - PlanePoint;

        float d1 = Mathf.Abs(Vector3.Dot(v1, PlaneNormal));
        float d2 = Mathf.Abs(Vector3.Dot(v2, PlaneNormal));

        float denom = d1 + d2;

        if (denom > 0)
        {
            result = ray.GetPoint(distance / denom * d1);
        }
        return result;
    }
```
オンライン資格確認の顔認証付きカードリーダー雑感

オンライン資格確認の顔認証付きカードリーダー」について、「どれを推奨？」と言われても、ベンダーとしても形状や保守など微妙に違いますが、一括仕入れするわけでも無いので特定のメーカーを推奨できません。参考までに、各機種の感想をエンジニア視点で紹介しておきます。

※以下は個人の感想であり所属組織等の見解を代表するものではありません。
※感想をさらに追加しました(22/4,25/2)

## 富士通 Caora (PD-CA01)

https://www.pfu.ricoh.com/caora/healthcare/

* ずんぐりに見えるが、印象より横幅は小さく安定性が良い
* UIは業務端末な感じの画像とフォント
* 外光の影響を避けるため奥に突っ込んでからしっかりスキャン。PFU! PFU!
* カードが奥に入るが取り忘れアラートはちゃんと有
* 全体の作りと質感に安心感があり、背面もスッキリしていた
* 複数台接続可能だが別売りライセンスが必要（注意
* エンジニアとしては端末に信頼感がありそうで好き

----
* 顔認証が環境によりイマイチ（アップデートで直った？）
* この見た目と入口の幅でカード縦入れは使うと戸惑う(25/2)

## アルメックス Smapaマイナタッチ (CPS-100W)

https://www.almex.jp/mc/products/examination/mynatouch.html

* 公費読み取り機能にひかれるが、初期保守期間が短いため悩む人多
* 印象通り全体的に大きめ。筐体の質感は少しチープ（個人的感想）
* UIはポップな感じで印象は良い
* カメラが高性能という触れ込みだが違いはわからない
* 仕組みは解るがUSBが２本必要（本体とリーダー）なのはちょっと困る
* 公費読み取り機能が付いている
    * この機種固有なのでベンダーが対応してくれるか不明（それ程難しくは無いが）
    * 18ヶ月以降は有償保守(¥2500/月)になる（ソフト＋ハード保守）
* HDMIがついていたりマウスをつけられたりと、半身はLinux組み込み系の匂いがする
* マニアとしては分解して中のボードを見たい（ダメです）

----

* 現場的には顔認証速度が一番速かったとか
* 公費や保険証読み取りを使うにはベンダー側対応が必要
* 保守とサイズ感でなかなか選ばれず
* 自分の日常の範囲では導入医院見かけない...(25/2)

## パナソニック 顔認証付きカードリーダー XC-STFR1J-MN

https://biz.panasonic.com/jp-ja/products-services_onlineinfo

* スタイリッシュで１番人気な予感。UIも綺麗
* 思ったより横幅があり、縦に長いため存在感がある（写真はスリムに見えますが
* 画面を押した時の安定性に不安。耐震ジェル必須かも
* PC拡張デバイスとして認識され、PC側ソフトで全部動かす仕組み！(液晶がPCの拡張ディスプレイ扱い...）
* そのため１台の端末に複数接続不可

-----

* 拡張ディスプレイ扱いなのでPC切り替え機を使うとおかしくなる（非推奨
* PCのスリープ復帰でメイン画面が映ったり、横向きになったりする
* 母艦で処理するのでCPUパワーが必要。ベンダー提供の安い端末だとその分顔認証が遅くなる
* サポートに一番手間がかってベンダー的には不評
* 私の体感では近所はこれが７割くらい..(25/2

## キャノン HiCARA

https://cweb.canon.jp/ht/lineup/hicara/index.html

* 突然出て来たので情報無し（ウワサはあったが）
* 見た感じカード差し込み部分の出来が気になる
* 「ハンディ状態」の意味はわからないがおもしろい
* 省スペースなのは良いが、少し出遅れた感

---

* 狭い受付の角に置いても圧迫感が無い
* カードの差し込みに戸惑うが、本体も軽い
* 液晶表示もハッキリしていて個人的には好印象

# 選び方

勝手な印象だけですが...

* 事務機器は派手さより頑丈で安定性が一番（比較できないが） - 富士通
* 他と違った新機能を使いたい（ベンダー対応？） - アルメックス
* みんなが使っているのが安心（でもない？） - パナ
* マイナ保険証はどうせ利用者少ないので小さい端末を置きたい（あれば） - キャノン

何かの参考になれば。メーカーの方すみません（汗。

それにしても、これだけ仕様不明確せかされてリリースして、不具合あれば全台保守交換とかやらされる製造メーカーには同情しますが、全種類の問い合わせが来る現場も結構きついです。

んで、ウワサではスマホに入ったマイナンバーカードはICカード＋顔スキャン方式のこれらの機械では対応できなくなるので新しいのを作る必要があるとか...(25/2
移動する方向にオブジェクトを傾けさせたい【Unity】 


タイトルの通り。
UFOとかドローン、ゴーストみたいな浮遊してる敵とかに使えるかも？
[Transform.InverseTransformDirection](https://docs.unity3d.com/ja/current/ScriptReference/Transform.InverseTransformDirection.html)という存在を初めて知った。


```cs:Simple_Tilt.cs
using UnityEngine;
public class Simple_Tilt : MonoBehaviour
{
    [SerializeField] private float xMultiple;
    private Vector3 latestPos;

    private Vector3 tiltVector;
    private Vector3 localDiff;

    void Update()
    {
        //ワールドでの移動量
        Vector3 diff = transform.position - latestPos;
        latestPos = transform.position;
        //ローカル用に変換する
        localDiff = transform.InverseTransformDirection(diff.normalized);

        tiltVector = new Vector3(
        localDiff.z * xMultiple,
        transform.eulerAngles.y,
        localDiff.x * -xMultiple);

        transform.rotation = Quaternion.Slerp(transform.rotation, Quaternion.Euler(tiltVector), 0.1f);
    }
}
```
webpack.mix.jsのmix.jsで親ディレクトリ(parent)にjsファイルを出力する方法

webpack.mix.jsで下記のディレクトリ配置にしてnpm dev buildしてみる

ソース
/www/src/app.js
出力
/www/public/js/app.js

```js
mix.setPublicPath.js('app.js', '../public/js')
```

```console
✔ Compiled Successfully in 17215ms
/public/js/app.js
```

と表示されるも/www/public/js/はからっぽ...

検索していると下記のgithub issueを発見

Unable to mix output .js file to the parent directory
https://github.com/JeffreyWay/laravel-mix/issues/1220

```js
mix.setPublicPath('../').js('app.js', 'public/js')
```

として設定すると無事希望通りのディレクトリに出力された
Programming Phoenix LiveView -- Interactive Elixir Web Programming Without JavaScript (Beta) 📘 を買ってみた話 (Elixir)

# はじめに
- [Elixir](https://elixir-lang.org/)楽しんでいますか:bangbang::bangbang::bangbang:
- [Programming Phoenix LiveView -- Interactive Elixir Web Programming Without JavaScript](https://pragprog.com/titles/liveview/programming-phoenix-liveview/)という本📘のBeta版が購入できます

![liveview-beta-250.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/b9356a02-f83f-1c1a-51ed-82e33a9093e2.jpeg)

- 表紙が格好よかばい
- 早速買ってみました
- その話を書きます
- 気になる方、正式リリース版をあとで買おうとおもっていらっしゃる方はもう買っちゃってもいいかもしれません(個人の見解)
- そんな話を書きます

# 買ってみた
- [Programming Phoenix LiveView -- Interactive Elixir Web Programming Without JavaScript](https://pragprog.com/titles/liveview/programming-phoenix-liveview/)
    - :point_up::point_up_tone1::point_up_tone2::point_up_tone3::point_up_tone4::point_up_tone5:のリンクから購入できます
- 支払い方法は、各種クレジットカード、[PayPal](https://www.paypal.com/jp/home)から選べます
    - 私は[PayPal](https://www.paypal.com/jp/home)を使いました
- Pragmatic Bookshelfの他の本をお持ちの方は巻末についているクーポンを使うとお得に購入できます
    - [Programming Phoenix 1.4](https://pragprog.com/titles/phoenix14/programming-phoenix-1-4/) :book: 
    - [Designing Elixir Systems with OTP](https://pragprog.com/titles/jgotp/designing-elixir-systems-with-otp/) :book: 
    - とかとかとか、[Elixir](https://elixir-lang.org/)関連じゃない本とかでもお持ちのものはございませんか
- 購入すると、PDF、epub、mobiの3種類の電子データ形式でダウンロードできます
    - 技術書は紙の本の方が私は好きなのですが、早くみてみたかったので今回は電子版だけど買っちゃいました
    - [Send to Kindle Eメールアドレスの使用方法](https://www.amazon.co.jp/gp/help/customer/display.html?nodeId=G7NECT4B4ZWHQ8WV)を参考にして、Kindleで読むことにしました(.mobi形式)

## [What’s a Beta Book?](https://pragprog.com/support/#beta-books)
- 正式版は2021/09の予定とのことです
- Beta版って何なのさ？　は、[What’s a Beta Book?](https://pragprog.com/support/#beta-books)に書いてあります
- 私がポイントだとおもった部分をピックアップします
    - Betaの最初のできはだいたい50%くらい
    - 更新版と最終版は、一度Beta版を購入しておくと
    - <font color="purple">$\huge{追加料金なしでダウンロードができます}$</font>
        - [elixir.jp](https://join.slack.com/t/elixirjp/shared_invite/zt-ae8m5bad-WW69GH1w4iuafm1tKNgd~w)という[Slack](https://slack.com/intl/ja-jp/)のワークスペースで教えていただいたのですが、Pragmatic BookshelfにおいてBeta版の更新は2〜3回ということが多いそうです
        - 教えてくださった方、ありがとうございます！

# Wrapping Up :lgtm::lgtm::lgtm::lgtm::lgtm:
- 最終版は追加費用無しで手に入りますので、紙じゃなくてもいいよという方はもう買っちゃってもよいかもしれません
    - 個人の見解です
    - もちろん、最終版として仕上がった2021/09版が一番読みやすいのだろうとはおもいます
- Enjoy [Elixir](https://elixir-lang.org/) :rocket::rocket::rocket: 

# (最後の最後に)[Elixir](https://elixir-lang.org/)ってなによ？、[Phoenix](https://www.phoenixframework.org/)ってなによ? という方へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/601aeb87-9d1d-6a9d-b30b-338507dc593e.png)

- :point_up::point_up_tone1::point_up_tone2::point_up_tone3::point_up_tone4::point_up_tone5: 2020/12/26時点くらいのスクリーンショット
- [Phoenix](https://www.phoenixframework.org/)は、[Elixir](https://elixir-lang.org/)というプログラミング言語でWebアプリケーションをつくるフレームワークです。
- [Elixir](https://elixir-lang.org/)についてもっと知りたい方は下記の本:books:をオススメします
    - [プログラミングElixir（第2版）](https://www.ohmsha.co.jp/book/9784274226373/)
    - [Elixir実践ガイド](https://book.impress.co.jp/books/1120101021)
【Python画像処理】Manimをインストールしてみる。

本当に純粋な個人的メモです。内容紹介やインストール方法などはこちら。
[Pythonで数式・グラフのアニメを描ける「Manim」](https://qiita.com/Tonoyama/items/a53d55f96008a5b8296c)
[Pythonで美しい動画を作ろう](https://qiita.com/Kohki_Mametani/items/3c7a44e2445958a5cc25)
[Manim Documentation:Installing to Mac](https://docs.manim.community/en/v0.1.1/installation/mac.html)

私の環境(Mac)では`brew cask`が動作せず、MacTexは手入力となりました。
[MacTeX のダウンロードとインストール](https://medemanabu.net/latex/mactex-download-install/)
[MacTeX - TeXShop を使ってみよう](https://medemanabu.net/latex/mactex-texshop/)
[MacTeX - TeXShop で 日本語を使う方法](https://medemanabu.net/latex/mactex-texshop-ptex-platex/)

* 長らくCUIの世界から遠ざかっていたのでUNIXコマンドの記憶も曖昧。そちらも参照しながらの泥縄式作業が延々と続く。<br>[UNIXコマンド一覧](http://www.ritsumei.ac.jp/~tomori/unix.html)
* 案の定、エラー出まくりでそもそもインストーラーが止まりまくり。そもそもMacへのインストールには色々と難関が？<br>[MacbookにManimを入れて、MP4形式の動画を出力してみた](https://qiita.com/Tonoyama/items/a53d55f96008a5b8296c)
* 開発環境アップデートを怠ってきたツケが回ってきて`xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools)...`エラーが出る→`xcode-select --install`コマンドを叩くとCommand line tools for Xcodeのアップデートが必要で、さらにそれにはOSのアップデートが必要と言われ…の繰り返し。<br>[macOSアップデート後の『xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools)...』の対処法](https://qiita.com/nishina555/items/e23d73067a5cac182a63)<br>[MacOSでCommand line tools for XcodeとHomebrewのインストール](https://qiita.com/royroy/items/338362362de73a94fc0c)
* 結論からいえば、そういう部分さえちゃんと構築されてたら以下のインストール手順がするりと通る模様？<br>[Manim Documentation:Installing to Mac](https://docs.manim.community/en/v0.1.1/installation/mac.html)

そんなこんなで、とりあえず以下のサンプルコードからのgif生成には成功しました。
[Pythonで数式・グラフのアニメを描ける「Manim」](https://qiita.com/Tonoyama/items/a53d55f96008a5b8296c)
![HelloWorld.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597772/d1aaf1bc-7c7e-28ef-bf3e-180706a9be39.gif)
![Graphing.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597772/dd24ac43-4fe7-aa97-9337-7036f687de43.gif)
![3dGraphing.gif](https://cdn-ak.f.st-hatena.com/images/fotolife/o/ochimusha01/20210226/20210226073250.gif)
間違いなく、ここからが長くなりそうです。ManimやPythonの話というより、プレゼンする内容そのものの話で、これからは逆に「Manimで表現すると格好良い展開」みたいなものも意識していく形になりそう？

思い出したのが1990年代にマルチメディアCD-ROM開発にDirectorと並んで使われていたオーサリングソフトAuthorware(Macromedia→Adbe→開発中止。パーツの連ね方とかが何となく似てる？)…今から思えば、あれがもう半世紀近く昔の話なんですね。恐ろしい事にRやPythonが産声を上げたのもその頃だった訳で…
[マクロメディア - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%AF%E3%83%AD%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2)
[Adobe Authorware - Wikipedia](https://en.wikipedia.org/wiki/Adobe_Authorware)
【Docker】エラー　Could not find gem 'mysql2 (~> 0.5)' in any of the gem sources listed in your Gemfile

#はじめに
Dockerの環境構築中に発生したエラーの解決した方法を記録します。
ただ、エラーは発生までの経緯で解決方法が違ってくるので、参考程度にしてください。

【エラー文】
Could not find gem 'mysql2 (~> 0.5)' in any of the gem sources listed in your Gemfile

#環境
Docker version 20.10.0
docker-compose version 1.27.4
#####Docker内の環境
ruby:2.6.5
Rails:6.0.0
データベース:mysql

###Dockerfile

```docker-compose.yml
FROM ruby:2.6.5
RUN apt-get update && apt-get install -y \
    build-essential \
    libpq-dev \
    nodejs\
    vim 

WORKDIR /[作成したディレクトリ名]
COPY Gemfile Gemfile.lock /[作成したディレクトリ名]/
RUN bundle install
```

###docker-compose.yml

```docker-compose.yml
version: '3'

services:
  web:
    build: .
    ports:
      - 3000:3000
    volumes:
      - '.:/[作成したディレクトリ名]'
    tty: true
    stdin_open: true
```





#結論
結論は以下の２点を事項することで解決に至りました。
・bundle installしてmysqlをインストール
・webpackerをインストール


#経緯と対応

dockerc-composeでコンテナを作成後Railsのセットアップを行いサーバーを起動した時に発生しました。
エラー内容は`mysql2が見つからない`という内容でした。

###対応１
Dockerfileにmysqlの記述がないから当然？？と思いましたが、Gemfileにはmysqlが記述されてるのでとりあえずコンテナ内で`bundle install`をしてインストールしてみることにしてみました。

かなり時間が経ってgemfileにインストールされました。


###対応２
再び`rails s -b 0.0.0.0`をして起動しようと試みましたが今度は`Please run rails webpacker:install Error docker`というエラーが出ました。
これも、Dockerfileに書いてないので当然？？と思いながら調べてると`webpacker`を使う為には`yarn`が必要で、yarnをインストールする為には下記の記述も必要との事でDockerfileを編集してイメージ作成からやり直しました。
最後コンテナ内でwebpackerをインストールするとうまくいきました。

###対応２の手順
Dockerfileにyarnを追記します。

```:Dockerfile
FROM ruby:2.6.5
RUN apt-get update && apt-get install -y \
    build-essential \
    libpq-dev \
    nodejs\
    yarn \ ←ここ
    vim 

WORKDIR /exam
COPY Gemfile Gemfile.lock /exam/
RUN bundle install
```

`rails webpacker:install`のコマンドを入力してwebpackerをインストールします。

```:ターミナル
root@c21d03f52523:/exam# rails webpacker:install
.
.
.
省略
Webpacker successfully installed 🎉 🍰
root@c21d03f52523:/exam# 
```
サーバーを起動します。

```:ターミナル
root@c21d03f52523:/exam# rails s -b 0.0.0.0
=> Booting Puma
=> Rails 6.1.2.1 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.2.1 (ruby 2.6.5-p114) ("Fettisdagsbulle")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 156
* Listening on http://0.0.0.0:3000
Use Ctrl-C to stop
```
かなり時間がかかりましたが、インストール後`rails s -b 0.0.0.0`で見事サーバーが立ち上がりました！

この記事では上記のエラー解決のみの内容ですがこの後データベースを作ってDocker内での開発環境を整えて行きます。
もしこの先にもご興味あれば下記の記事を参考にしてみてください。

【Docker】Ruby2.6.5とRails6.0.0とmysql  DockerComposeで環境構築
https://qiita.com/AKI3/items/3b9656f6dc3759817aa5

#最後に
Dockerについて完全に理解できておらず、今回の対応も対処療法ですのでこれからも継続学習が必要です。
万が一情報が間違っている場合ご指摘していただけると幸いです。



#参考

https://qiita.com/matata0623/items/2ff3125d2cdbd5c13528

https://qiita.com/anx/items/88cb4bbf67ff6c046e32
都道府県の名称⇔コード変換 - Python

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36973/83c235e8-860f-5c9d-91fb-1c8adfe14883.png)

日本都道府県の名称と[JIS X 0401-1973](http://www.soumu.go.jp/denshijiti/code.html)コードを変換するPythonユーティリティ[`jp_pref`](https://vochicong.github.io/jp_pref/)。
都道府県名の文字列、リスト、もしくは pandas series をコードに簡単に変換可能。
その逆に、コードから名称への変換も楽勝。

---

## インストール

`pip install jp_pref`

### インポート

```python
from jp_pref.prefecture import name2code, code2name
from jp_pref.prefecture import df as df_pref
```

---

## 都道府県名称・コード変換

```python
assert name2code("東京都") ==\
       name2code("東京")   == 13
assert code2name(13) == "東京都"
assert name2code(["東京都", "大阪府", "北海道"]) ==\
       name2code(["東京",   "大阪",   "北海"])  ==\
       [13, 27, 1]
assert code2name([13, 27, 1]) == ['東京都', '大阪府', '北海道']
```

---

## 都道府県データフレーム

```python
from pandas_show.core import display_in_cols
display_in_cols(df_pref, 4)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36973/034a4ca9-2acb-1ced-5b44-c41e8c85dc1d.png)

ちょっと長い都道府県リストが一画面に収まるように、[`pandas_show`](https://vochicong.github.io/pandas_show/) を使った。

---

## おしまい

主に機械学習における特徴量エンジニアリングでの利用を想定している。
このユーティリティを使って都道府県名をJIS X 0401-1973コードに変換すると、隣接する都道府県ならコード値も連続しているという利点がある。

参考：[ドキュメント](https://vochicong.github.io/jp_pref/)と[ソースコード](https://github.com/vochicong/jp_pref/)
【初投稿】AWS戦記 プロローグ

# はじめに
初めまして。
いつもQiitaを参考にばかりしているのですが、自分の学習を兼ねて自分でも記事を投稿してみようと思い衝動的にアカウント作ってみました。
マークダウンの使い方の勉強も試行錯誤しながらのんびりやっていこうかな思います。
# 自己紹介
Linux系のインフラ系システムの構築をやってます。
最近はAWS関連の仕事が増えてきました。
プログラミング言語はほとんどできないので、これから勉強していきたいです。
# やりたいこと
1. AWSの基本的な構築（VPC周り、EC2など）
2. CloudWatchによるメトリクス監視
3. CloudFormation、TeraForm、Packer、AnsibleによるInfrastructure as Codeの学習
4. CodeCommitによるソースコードの管理及びPipelineの構築
5. プログラミング言語の習得（Python、Ruby、Goなど）
6. マークダウンの書き方を覚える
7. コスト監視

# 前提条件
・無料利用枠で納める。
・実務に使えそうな構築を目指す。
・他者が読んでもわかりやすいように書く。
# 次回予定
| 項目 | ゴール | 備考 |
|:--|:--|:--|
|VPC作成   | 10.100.10.0/16のネットワークの作成  | デフォルトVPC削除  |
| サブネット作成  | Public/Private/Protectedの作成  | AZを分ける  |
| インターネットゲートウェイ作成  |  インターネットへ接続できること | Publicに設置  |
| NATゲートウェイ作成  | Privateセグメントからインターネットへ接続できること | Privateに設置  |
| IAM 管理者グループ作成  | 管理者用グループ作成  |   |
| IAM 管理者ユーザー作成  | 管理者用ユーザー作成  |   |
| IAM 一般グループ作成  | 一般権限用グループ作成  |   |
| IAM 一般ユーザー作成  | 一般権限用ユーザー作成  |   |
| IAM MFA認証  | 作成したIAMユーザーに多要素認証を設定  |   |
| IAMポリシー作成  | EC2用UAMポリシー作成  | SessionManagerやS3へのアクセス許可  |
| IAMロール作成  | EC2用IAMロール作成  | SessionManagerやS3へのアクセス許可  |
| エンドポイント作成  | EC2からエンドポイント経由でAWS CLIを実行できること |   |
| セキュリティグループの作成 | EC2周りが操作可能になること  |   |
| SessionManager設定  | EC2へ接続  |   |
| EC2構築  | EC2インスタンス（AL2）が起動し、yumアップデートできること  | t2.microを利用  |
| AMI作成  | 構築したEC2からAMIを作成する  | Cloud-Initの設定も実施すること  |
| CloudWatchEvntによるEC2自動停止  | 自動的にEC2が停止されること  | SSMで設定  |
| S3バケットの作成  | EC2からファイルをGET/PUT/DELETEできること  |   |


<br>

とりあえずこんなところでしょうか。
上記以外にもRDSやVPC間のPeerig、Route53やらACMにもチャレンジしてみたいです。
最終的にはコード管理できるようになりたいなぁ。

ではでは。
iOS13とiOS14で似たように振る舞うTableView

SwiftUIではUITableViewのような振る舞いを持つViewに`List`が存在します。
このListはなかなか曲者でiOS13とiOS14ではデザインの設定方法が異なり、なかなか思うように扱うことが出来ません。

iOS14からは遅延読み込みが可能なLazyVStackが登場しているのでこちらを代替手段として用いるのが簡単です。

ということで、OSのバージョンでListとLazyVStackの出し分けをしつつ似たような見た目の振る舞いを持つViewを作成してみます。

```swift
struct TableView<Content: View>: View {
    let content: () -> Content

    let rowBackgroundColor: Color

    init(rowBackgroundColor: Color, _ content: @escaping () -> Content) {
        self.content = content
        self.rowBackgroundColor = rowBackgroundColor

        UITableView.appearance().separatorStyle = .none // この区切り線を消すコードはiOS13でのみ有効
        UITableView.appearance().backgroundColor = .clear
    }

    var body: some View {
        if #available(iOS 14, *) {
            ScrollView {
                LazyVStack(spacing: 0) {
                    self.content()
                        .background(self.rowBackgroundColor)
                }
            }
        } else {
            List {
                self.content()
                    .listRowInsets(EdgeInsets())
                    .listRowBackground(self.rowBackgroundColor)
            }
            .environment(\.defaultMinListRowHeight, 0)
        }
    }
}
```

このViewは以下のように利用することで、似たような振る舞いをもたせることが可能です。

```swift
struct ContentView: View {
    var body: some View {
        TableView(rowBackgroundColor: .blue) {
            ForEach(0..<100) { index in
                Group {
                    HStack {
                        Circle()
                            .frame(width: 50, height: 50)
                        Text("No, \(index)")
                        Spacer()
                    }
                    .padding(.vertical, 12)
                    .padding(.horizontal, 20)
                }
            }
        }
        .background(Color.blue.edgesIgnoringSafeArea(.all))
    }
}
```
[デイリーコーディング]リスト内の数値の正の数、負の数、ゼロそれぞれの割合を表示する

# 今日の問題: リスト内に入っている整数の正の数、負の数、ゼロそれぞれ合計し、リスト全体から見た各割合を出せ(小数点6桁四捨五入)

```python:回答
def plusMinus(arr):
  size = len(arr)
  plus = [i for i in arr if i > 0]
  minus = [i for i in arr if i < 0]
  zero = [i for i in arr if i is 0]
  print('{:.6g}'.format(len(plus) / size))
  print('{:.6g}'.format(len(minus) / size))
  print('{:.6g}'.format(len(zero) / size))

if __name__ == '__main__':
    arr = [-4, 3, -9, 0, 4, 1]
    plusMinus(arr)
```
```python:結果
0.5
0.333333
0.166667
```

ベターな回答:

```python

def plusMinus(arr):
  positive = sum(x > 0 for x in arr) / len(arr)
  negative = sum(x < 0 for x in arr) / len(arr)
  zero = sum(x == 0 for x in arr) / len(arr)

  print("{0:.6f}".format(positive), 
        "{0:.6f}".format(negative), "{0:.6f}".format(zero), sep="\n")

```

参照: Plus Minus \([Hackerrank](https://www.hackerrank.com/challenges/plus-minus/problem)\)
DNG OpCodeList のメモ

DNG では, レンズの歪み情報やレンズシェーディングの情報などを OpCodeList タグで付与することができます.

https://exiftool.org/TagNames/EXIF.html
https://www.adobe.com/content/dam/acom/en/products/photoshop/pdfs/dng_spec_1.4.0.0.pdf (Chapter 7 OpCode List Processing)

https://dc.watch.impress.co.jp/cda/accessories/2009/05/07/10770.html

1 ~ 3 と三つあります. 処理のステージや OpCode による画像処理を経たあとの画像データのダイナミックレンジに応じて使い分けるようです.

* OpCodeList1 : 32bit 用. 0 ~ 2^32 - 1
* OpCodeList2 : 16bit 用. 0 ~ 2^16 - 1
* OpCodeList3 : 正規化 float 用? 0.0 ~ 1.0

OpCode 自体の画像データ(e.g. GainMap)自体は float などを使っており, とくにクランプされたり量子化されたりはしていません.

また, OpCode のデータはバイナリデータですが, データフォーマットとしては特に難しいものではないです. DNG の仕様書を見てその通りにパースすれば情報を得られます!

注意点としては, DNG(TIFF)のエンディンアンには関係なく, OpCode のデータは常に Big-Endian です.
【メモ】Laravel6/7 (laravel/ui)でのLogin機能の実装方法


Laravel6/7 (laravel/ui)でのLogin機能の実装方法

```ターミナル
#Laravel 6.x
composer require laravel/ui:^1.0 --dev

#laravel 7の場合
composer require laravel/ui:^2.4
```

```
root@***********::/work# php artisan ui vue --auth

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.
```
```

C:\Users\name\*****\*****\backend>npm install

npm WARN deprecated axios@0.19.2: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
                                                        ~~省略~~
```
```
C:\Users\name\*****\*****\backend>npm run dev

> @ dev C:\Users\name\*****\*****\backend
> npm run development

> @ development C:\Users\name\*****\*****\backend
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
                                                        ~~省略~~
```

これで完璧！！！

今後は自作できるように頑張ります。
【imi-enrichment-date】年号を含む日付表示の正規化

# imi-enrichment-dateとは
経産省のジービスインフォというサイトで公開されているオープンソースライブラリの１つで、
`令和３年２月２６日`のような日付表示を`2021-02-26`といった形式に正規化することができます。
MITライセンスで公開されているので商用利用も可能です。


## インストールの仕方
このツールはnpmのようなパッケージ頒布サイトでは公開されていないようで、
経産省のサイトあるいはプロジェクトのGitHubページからダウンロードして用います。

```bash
# on your own project
npm install https://info.gbiz.go.jp/tools/imi_tools/resource/imi-enrichment-date/imi-enrichment-date-1.0.0.tgz
```

## 使い方
ここでは自分のプロジェクトに組み込んで使う方法を紹介します。  
ライブラリから適当な名前で読み込んだ関数は、引数に`2021年2月26日`や`令和三年二月二六日`のような日付を表す文字列か、`{"@type": "日付型", "表記": "2021年2月26日"}`のようなオブジェクトを引数にとります。

```javascript
const normarizeDate = require("imi-enrichment-date");
console.log(normarizeDate("令和３年２月２６日"));
// or
const date = {
	"@type": "日付型",
	"表記": "令和３年２月２６日"
};
console.log(normarizeDate(date));
```
```console:出力
{
  '@context': 'https://imi.go.jp/ns/core/context.jsonld',
  '@type': '日付型',
  '表記': '令和３年２月２６日',
  '標準型日付': '2021-02-26'
}
```

出力は`yyyy-mm-dd`形式で、上記のようなオブジェクトとして返ってきます。  
どのように変換を行っているのか気になったので[ソースコード](https://github.com/IMI-Tool-Project/imi-enrichment-date/blob/master/lib/normalize.js)を見てみると、「漢数字・全角の算用数字を半角の算用数字に変換」→「年号が含まれる場合は正規表現で処理」といった流れで変換がなされているようでした。

## どのようなパターンに対応しているのか
日付表示にはさまざまなフォーマットがありますが、このライブラリが対応しているフォーマットは以下のとおりです。

| 形式 | 例  | 備考 |
| ---- | --- | --- |
| 年・月・日がなんらかの文字で区切られているもの | 2020/01/01 | 区切り文字は数字以外ならなんでもよい | 
| 先頭に元号を含むもの | 平成10年10月10日 | 明・昭など一文字や、㍽・㋿のような合字、あるいはH・hのようなアルファベットでもよい | 
| 漢数字を含むもの | 一九九九年十二月三〇日 | 三十ではなく三〇のような書き方をしてもOK |
| 元年という表現を含むもの | 令和元年3月24日 | |


`2/26/2021(2021年2月26日)`のようなアメリカ式の日付表示には対応していませんが、日本で使われている日付表示の方式にはほぼ対応しているライブラリといえます。  
ひとつだけ気をつけるべきこととしては、`21年2月26日`のように年の上二桁を省略した書き方をすると、意図せず`1921-2-26`となってしまう点があります。これはエラーにはならないので注意が必要です。  
また(これはあまり一般的ではありませんが)、`西暦2021年2月26日`のような表現はエラーになります。役所に行ってなにか申請書を書こうとすると、最近では配慮が進んでいて年号ではなく「西暦」に丸がつけられるようになっていることがありますよね。西暦と年号表示を並行して使用しているシステムでは注意が必要です。  

## リンク
- IMI 情報共有基盤 コンポーネントツール
	- [https://info.gbiz.go.jp/tools/imi_tools/index.html](https://info.gbiz.go.jp/tools/imi_tools/index.html)
- IMI Tool Project
	- [https://github.com/IMI-Tool-Project](https://github.com/IMI-Tool-Project)
【Excel】Windows API

# Windows API 一覧
## 検索方法1
　1. APIは下記サイトを開く
　　　サイト : [マイクロソフト](https://docs.microsoft.com/ja-jp/documentation/)
　2. 必要な関数名でサイト内検索をする。
　3. それっぽいページを選択する。
　4. 英語サイトの場合、URLの「en-us」を「ja-jp」に書き換えてリロードすることで
　　　日本語で表示できる場合もある。(翻訳されていれば)

## 検索条件2  
  上記の2.の手順でも検索結果に出ない場合がある。その場合は
　「Microsoft "キーワード"」などで検索を掛ける。

# 構文

### コード
```vb
' ウィンドウ情報を取得し、ウィンドウハンドルを返却する。
Declare Function FindWindow Lib "USER32" Alias "FindWindowA" _
        (ByVal lpClassName As String, ByVal lpWindowName As String) As LongPtr```
```

#### Declare
　DLLの外部プロシージャへの参照を宣言する。
#### Lib
　DLLの名前
#### Alias
　関数の別名を付けることができる。
【Rust】cargo doc でエラーが起きた話

## Cargo doc したらエラー起きた
```shell
$ cargo doc
 Documenting pin-utils v0.1.0
 Documenting serde v1.0.123
 Documenting rocket_codegen v0.4.7
error[E0658]: linking to associated items of raw pointers is experimental
   |
   = note: see issue #80896 <https://github.com/rust-lang/rust/issues/80896> for more information
   = help: add `#![feature(intra_doc_pointers)]` to the crate attributes to enable
   = note: rustdoc does not allow disambiguating between `*const` and `*mut`, and pointers are unstable until it does

error: aborting due to previous error

For more information about this error, try `rustc --explain E0658`.
error: could not document `pin-utils`

Caused by:
  process didnt exit successfully: `rustdoc --edition=2018 --crate-type lib --crate-name pin_utils /Users/macuser/.cargo/registry/src/github.com-1ecc6299db9ec823/pin-utils-0.1.0/src/lib.rs --cap-lints allow -o /Users/macuser/xxxxxxxxxxx/target/doc --error-format=json --json=diagnostic-rendered-ansi -L dependency=/Users/macuser/line-bot-sdk-rust/target/debug/deps --crate-version 0.1.0` (exit code: 1)
warning: build failed, waiting for other jobs to finish...
error[E0658]: linking to associated items of raw pointers is experimental
   |
   = note: see issue #80896 <https://github.com/rust-lang/rust/issues/80896> for more information
   = help: add `#![feature(intra_doc_pointers)]` to the crate attributes to enable
   = note: rustdoc does not allow disambiguating between `*const` and `*mut`, and pointers are unstable until it does

error: aborting due to previous error

For more information about this error, try `rustc --explain E0658`.
error: build failed
```

どうやら`pin-utils`って依存モジュールの doc 作成でエラってるっぽい。

cargo doc の公式ドキュメントを見てみる。
https://doc.rust-lang.org/cargo/commands/cargo-doc.html

#### OPTIONS
**Documentation Options**

`--open`
Open the docs in a browser after building them. This will use your default browser unless you define another one in the BROWSER environment variable.

`--no-deps`
Do not build documentation for dependencies.

`--document-private-items`
Include non-public items in the documentation.


依存モジュール実行しないってオプションあるやん。
なので、こうする。

```shell
$ cargo doc --no-deps
Finished dev [unoptimized + debuginfo] target(s) in 0.89s
```

おっけい。
RustでWebAssemblyを使ってみた時の記録

# この記事について
プログラミング独学3年目の文系大学生の開発メモ。

# なぜWebAssemblyなのか
特に理由はありません(笑)
最近話題になっていると聞いて触ってみました。

# なぜRustなのか
これも特に理由なしです。
システムプログラミング言語なのに低レベルだけではなく、色々なアプリケーションを開発するためのライブラリが揃っていると聞いて興味を持ちました。

# 開発環境 (2021/02/26現在)
Windows10 Education バージョン 20H2 (Windows10 Home バージョン 20H2上のVMware Workstation Player 16仮想マシン)
Visual Studio Code
gcc 8.1.0
node 11.13.0
npm 6.9.0
rustc 1.50.0
cargo 1.50.0

# 開発手順
[MDNに掲載されているRust用のWebAssembly入門](https://developer.mozilla.org/ja/docs/WebAssembly/rust_to_wasm "Rust から WebAssembly にコンパイルする")に沿ってやります。
WebAssembly自体をもっと知りたいという方は[こちら](https://developer.mozilla.org/ja/docs/WebAssembly "WebAssembly")から確認してください。

# 開発メモ
- Rustをインストール際にC++のBuild Toolsのインストールを促された。
これを無視してやったら```cargo install wasm-pack```するときにエラーが出た。
普段はVisual Studio Communityを使うことがほぼ無かったので、インストーラーを入れ、C++のデスクトップ開発用のツールを一通り入れたらエラーは治った。
(今回とは関係ないが、gccを入れておかないとエラーが出る場合もあるらしい。)
- Rustのコード内の```#[wasm_bindgen]```という記述はアトリビュートと呼ばれ、直下の文のみを修飾してくれるらしい。
あくまで直下のみなので、何度も記述されてるからと言って2個目以降を省いてはダメ。
- Rustにおいて「クレート」とは他言語でいうライブラリやパッケージのこと。Rustの特徴として、クレートを芋づる式で追って解析していくため、初回ビルド時のみ時間がかかる。
- Rustにはクラスは存在しないけど```struct```(構造体)には```impl```(インプリメンテーション)という特殊な構文が存在し、構造体にメソッドをつけることが可能。
だから、実質オブジェクト指向に開発できる。
- npmでpublicに公開するとき、package.jsonのnameに@xxxを含む記述があった場合、組織を予め用意しておく必要がある。

# 参考
- [
Rust入門 - とほほのWWW入門](http://www.tohoho-web.com/ex/rust.html "
Rust入門 - とほほのWWW入門")
- [実践Rustプログラミング入門](https://www.amazon.co.jp/%E5%AE%9F%E8%B7%B5Rust%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80-%E5%88%9D%E7%94%B0-%E7%9B%B4%E4%B9%9F/dp/4798061700/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=rust+%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0&qid=1614273021&sr=8-1 "実践Rustプログラミング入門")
【rails6.0にBootstrap】RailsにBootstrapを導入する方法

#はじめに
こちらの記事では、Railsのアプリケーションの開発途中でBootstrapを導入する方法について書いています。

##環境
ruby '2.6.5'
rails '6.0.0'

##手順

###1.必要なGemのインストール
まずは、必要なGemを導入(インストール)します。


```ruby:Gemfile
gem 'bootstrap', '~> 4.5.0'
gem 'jquery-rails'
```

```:ターミナル
% bundle install
```
###2.CSSのファイル名変更
 application.cssをapplication.scssと拡張子を変更します。

###3.scssの中身を削除
application.scssファイルの中に記述されている物を全て削除します。

```css:app/assets/stylesheet/application.scss

#全て削除

ーーここから削除ーー

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

ーーここまで削除ーー
```

###4.Bootstrapにapplication.scssにインポート
application.scssにBootstrapを使用するための記述を追記します。

```css:app/assets/stylesheet/application.scss
 @import "bootstrap";
```

###5.他のSCSSファイルを読み込む記述
他のSCSSファイルを適用するためには、ファイルの数だけ記述をおこなう必要があります。
適用するための記述は以下の通りです。

```css:app/assets/stylesheet/application.scss
 @import "読み込みたいSCSSのファイル名";
```

私の場合、scssファイルが7つあるので全て記述していきます。
![スクリーンショット 2021-02-26 1.50.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/792954/8a40d3b6-a491-8673-c957-528b130d6f84.png)

これでブラウザをリロードすると、CSCCが適用されています。

#まとめ
以上がRailsにBootstrapを導入する手順でした。
最後に、今回参考にさせていただいたQiitaの記事を貼っておきます。こちらの方は、アプリケーションの作成から丁寧に解説されています。これからアプリケーションを作成する方はぜひ合わせて読んでみてください！

https://qiita.com/keisukesaito/items/0309f7b76d8aa4d78879
今更Raspberry Pi 4をNASにした

# 概要
Raspberry Pi 4 にUSBでSSDを繋ぎ、それをNAS化してみました。
これだけ情報があるのに、あえて残そうと思った理由は

- 備忘録的に残して置く
    - もう一度組み直す or SSDを追加するかも
- Linuxに不慣れな自分がハマったポイントがあった
    - 手順ミスで/etc/fstabにフォーマット前のUUIDを書いたままリブートさせてしまい、OSが起動しなくなってあたふたした
- 参考にしたサイトと同じ設定をしてもうまく動かなかった
    - 実現したいシステムの前提条件と合っていなかったのかも。。。

というのがあったので、改めてまとめなおそうと思った次第です。

# 背景

※興味ない方は読み飛ばしてもらってOKです

PCゲームを録画したものをLAN内で共有し、スマホからVLCで見ていたのですが、
どうやらVLCが原因と思われるエラーでブルスクが3度ほど発生。
心臓にも悪いしゲームのプレイ中にブルスクなんてとんでもないので、
録画データをちゃんとNASに置いて、それを見ることにしようと思い立ちました（ようやく）

ラズパイ自体はすでに購入済みで、興味本位でsambaで共有出来るように設定していました。
またOSが入ったmicroSD上のデータを読み書きすると遅いし容量も少ないということで、
SSDまで買ってありましたが、箱が積んであるだけだったのでそこからの作業です。

# 構成

```
Win10 PC -- rooter -- RasPi4
                        | (USB3.0)
                       SSD
```

SSDにOSを置いたりもしていない、ほぼほぼplainな状態です。

# やること

- SSDの接続・初期化
- 自動マウントの設定
- 編集可能なディレクトリの作成
- sambaの設定（省略）

## SSDの接続・初期化

今回つないだSSDはWindowsマシンでNTFSフォーマット済みのものを利用しました。
接続はUSBでSSDとRaspberryPi4を繋ぐだけ。

NAS化したいので、SSDをext4でフォーマットし直します。
ただしmountされている状態ではフォーマット出来ないので、まずunmountします。

```bash
# mountされているのでunmountするdeviceを特定
$ sudo fdisk -l
  ...
  /dev/sda1 ... # <- 接続したSSDが見えてる

# unmountする
$ sudo umount /dev/sda1
```

unmountできたのでext4でフォーマットしていきます。

```bash
# ext4でフォーマット
$ sudo mkfs.ext4 /dev/sda1
# セクタをどうするか聞かれるが、ひとまずdefault値で設定
```

## 自動マウントの設定
次に起動時にSSDを特定のディレクトリにmountしてくれるように設定します。
mount先のディレクトリを作って、USB接続しているSSDを特定、fstabを設定します。
fstabの書式上、UUIDやPARTUUIDなどデバイスを指定する術がいくつかあるようです。

```bash
# mount先のディレクトリを作成
# 一般的には /mnt か /media 以下に作るらしい
$ sudo mkdir /mnt/ext_ssd

# USB接続しているSSDのUUIDを特定
$ sudo blkid
  ...
  /dev/sda1 ... UUID=XXXXX-XXXXXX-XXXXX ... # <- USB接続しているSSD

# fstabを編集するためのエディタ起動
# vimでもnanoでもleafpadでも…　お好きなエディタで
$ sudo nano /etc/fstab
```

fstabには下記の1行を追加
ちなみにnofailを書かず、デバイス指定を間違うとOSが起動しなくなります。
https://bacchi.me/linux/troubleshooting-boot-process/
（解消方法も下に置いておきます）

```bash
# デバイス指定 マウント先 ファイルシステム オプション dump pass の順で指定できる
# nofailを忘れるな！！
UUID=XXXXX-XXXXXX-XXXXX /mnt/ext_ssd ext4 defaults,nofail 0 2
```

ここで/etc/fstabに設定した情報が間違っていないか確認する　←ココ重要

```bash
# etc/fstab を使ってmountを試みる
$ sudo mount -a

# mount されているか確認
$ sudo df
　...
  /dev/sda1 ... ... ... ... /mnt/ext_ssd # デバイスがマウントされていることを確認
```

ここまで来て初めてrebootです。

```bash
$ sudo reboot
```

## 編集可能なディレクトリの作成

ここで一つハマった。
よくよく考えれば当たり前なのだが、SSDの直下をrwxには出来ない。
（windowsでも普通はC直下ではなく、どこかのディレクトリを共有設定する）
なのでLAN内で誰でも触れるようなディレクトリを/mnt/ext_ssd以下に作る必要がある。
もちろんこれはmountされている状態で行う必要がある。

```bash
# ディレクトリの作成
$ sudo mkdir /mnt/ext_ssd/share

# permissionの変更
# 今回は誰でも使えるように777にしたが、用途に応じて変更すること
$ sudo chmod 777 /mnt/ext_ssd/share 
```

# /etc/fstab の編集ミスった
RasPiのOSが入っているmicroSDは基本的にext4でフォーマットされていて、標準のwindowsでは読めない（WSL2があれば話は別だが）
なので読めるようにするアプリを使って/root/etc/fstabの書式を正しい記述に直す必要がある。
今回は Linux File Systems for Windows by Paragon Software というものを使った。
https://www.paragon-software.com/jp/home/linuxfs-windows/

こちらのページを参考にした。
https://m-bc.jp/2019/08/ext4bywin10/

# 最後に
ぐだぐだとまとめてきましたが、大事なのは/etc/fstabの編集です、そこにつきます。
書式ミスを解消する方法を探して試すだけで2時間ぐらい浪費してしまったので、
同じような境遇の方がいて、これをみて解消できたという方がいたら幸いです。
【Unity】Packageのインポートで同一ファイル名のシーンやスクリプトが上書きされる

##Packageをインポートしたらデータが上書きされてびっくり

タイトルの通りなので注意したい。

なんとなく別プロジェクトのUIとかスクリプトを使い回そうとしてインポートしたら起きました。
GameManagerとかOpenURLとか一部使い回してるけど中身が違うスクリプトが上書きしてしまって焦った。

とりあえずsceneとscriptは丸々上書きされてしまいました。

一旦上書きされてしまうと、バックアップ以外に戻す方法がないっぽい。
今回はDropBoxから復元しました。

ファイル操作のミスとかでも間違って上書きしちゃうことはあるけど、
気をつけたい。

Unityのバージョンは2019.4.1f
##一応警告は出るが、、
パッと情報がなかったので、何かの間違いかもと思ってテストしてみた。

同じファイル名のシーンとスクリプトとがあるプロジェクトを二つ用意

![スクリーンショット 2021-02-26 0.50.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682050/cf493af4-8420-0ab2-44e0-ec0701c8e665.png)


スクリプトはこんな感じのやつの表示テキスト部分だけを変えたものに。

```c#:Hello.cs

    // Start is called before the first frame update
    void Start()
    {
        Debug.Log("上書きされた");
    }
```

<b>エクスポート側</b>

![スクリーンショット 2021-02-26 0.59.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682050/555fc799-22af-ef87-ad94-4e8609f48058.png)

<b>インポート側</b>
![スクリーンショット 2021-02-26 1.01.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682050/ef4499e8-d962-1de9-85c9-df3cbe202eb9.png)

あ、ちっさく警告でてる！。
ここで気づけてチェックを外せばOKだけど、
このままimportを押してしまうと上書きされてしまう。

![スクリーンショット 2021-02-26 1.14.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682050/2ab54841-efe8-7d2e-60fc-9bab79164f8e.png)


もうちょっとババーンと警告出して欲しいな。

ちなみに昔は警告も出なかったそうな。コワイ。
https://answers.unity.com/questions/1006498/accidentally-overwritten-scripts-with-imported-pac.html
https://answers.unity.com/questions/594502/help-scene-file-overwritten-after-import-package.html
https://www.reddit.com/r/Unity3D/comments/adlhzg/does_unity_just_overwrite_your_scene_if_you/


##その他メモ
あとプロジェクトウィンドウの中に同一ファイル名のファイルをコピーしても上書きされない。
別のファイルとして召喚される。
![スクリーンショット 2021-02-26 1.43.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682050/7409fea2-97c5-7b4a-44ea-762fa286a09e.png)

Finder上からの操作であれば上書きできる。
https://amagamina.jp/overwriter/
VBAやVBScript,Excelで今日が何年度かを求める式 Year dgree function

#会計年度、事務年度
Financial Year degree, Business Year dgree
と英語でもあるように、1年の期間を1月から12月までとしない場合があります
これを計算する方法です。
考え方自体はずっと前に知ったのですが、だいたい整理できたのでまとめておきます。

#考え方
日本の年度は4月からはじまり、3月に終わります。
年を求めるのは`Year()`ですが、1月から3月までは1年多くなります。
なので1月から3月は1つ少なくなります。
そこでIFを使いたくなるのですが、使いません。
その代わり、「TrueとFalseの値」を使います。
##VBA,VBSとExcelのTrue
ところで、VBAとVBS、そしてExcelのワークシート関数には今回2つの違いがあります。
それはExcelのワークシート上ではTrueは1でありVBAとVBScriptは-1であるということです。
これを言い方を変えると、0がFalseでそれ以外はTrueとされています。
これはどういう言語でも同じのようですね。
###4月はじまり令和版 VBA VBS

令和年度※令和のみ対応
`Year(Date) + ((month(Date)<4)*1) -2018`
西暦年度
`Year(Date) + ((month(Date)<4)*1)`

この式の中に不等号を入れるというのはプログラムならではではないでしょうか。
`*1`はお守りみたいなもので、あんたTrueとか言っているけどbooleanじゃなくてLongになあれっておまじないです。
VBAの場合はDateの代わりにNow関数を使ってもいいです。

###4月はじまり令和版 Excel
Excelは1です。なので符号を変えるため`-1`を掛けます。
もっというと、絶対値にすればいいので、こうなります。
Worksheet上で年度を求める

```
=YEAR(TODAY())+(ABS(MONTH(TODAY())<4)*-1)
```

VBA、VBSでは`TODAY()`関数をDateやNowに変えます。

##年度関数の法則

上記の式は`<4`という部分があります。
そう、例えば7月始まりの6月終わりであれば、4を7に変えるといいわけです。
Excelのワークシート

```
=YEAR(TODAY())+(ABS(MONTH(TODAY())<7)*-1) - 2018
=YEAR(TODAY())+(ABS(MONTH(TODAY())<7)*-1)
```

VBA、VBS

```
=YEAR(DATE)+(ABS(MONTH(DATE)<7)*-1) - 2018
=YEAR(DATE)+(ABS(MONTH(DATE)<7)*-1)
```

つまり、始まりの月を入れればいいということです。
includeメソッド学びメモ書き

## includesメソッドとは
アソシエーションの関連付けを事前に取得し`N +1問題`を解決してくれるメソッドのこと。  

### N + 1問題
SQLが大量に発行されることで動作が重くなる問題のこと  

`なぜSQLが大量に発行されるのか？`  


（例）

user_idにuserテーブルのidを外部キーとして参照するfruitsテーブルがあったとして・・・

fruitsテーブル

| id | name | user_id |
|:-:|:-:|:-:|
| 1  | りんご  | ２  |
|  2 |  みかん | ３  |
|  3 |  バナナ |  １ |
|  4 |  マンゴー |  ２ |


userテーブル

| 1 | 2 |
|:-:|:-:|
| 1  | タケシ | 
| 2  | サトシ | 
| 3  | カスミ | 

UserモデルはFruitモデルに対して１対他の関係になっている

```ruby:Userモデル
class User < ActiveRecord::Base
    has_many :fruits
end
```

```ruby:Fruitモデル
class Fruits < ActiveRecord::Base
    belongs_to :user
end
```

この関係で、「全てのユーザーのもってるフルーツを一覧表示する」コードを以下のように書くと、
userテーブルに１回アクセスが行われる（＝SQLが発行される。）

```ruby:controller
@users = User.all
```

また、ビューで以下のように記述して一覧表示すると、user１つずつに対してfruitsテーブルにアクセスするので、
userテーブルのレコードの数だけ（３回）SQLが発行される。

```ruby:view
@users.each do |user|
  user.fruits.each do |fruit|
    fruit.name
  end
end
```
この１＋３回のSQL発行が`1+N問題`となる。


## includeメソッド

上記の状態で、usersテーブルにアクセスする際に、fruitsテーブルの情報ももってきてくれるのが`includeメソッド`。　　
**引数にアソシエーションで定義した関連名を指定して定義する。(NOTテーブル名)**

```ruby:Userモデル
class User < ActiveRecord::Base
    has_many :fruits #←関連名
end
```

```ruby:controller
@users = User.all #変更

@users = User.include(:fruits) #変更後

```

これでusersテーブルへのアクセス１回、fruitsテーブルへのアクセスは１回の計２回に変更される。

コントローラーの時点で関連テーブルの情報を一括取得することで、ビューが動いた時に必要以上のSQLが発行されない。

## includeメソッドの親子関係
次に、このFruitモデルのidをさらに外部キーにする関連Juiceモデルがある場合は、以下のように書くことで、親子の子の情報もまとめて取得することができる（便利！）

```ruby:Userモデル、Fruitモデル、Juiceモデル
# User.rb
class User < ActiveRecord::Base
    has_many :fruits
end

# fruit.rb
class Fruit < ActiveRecord::Base
    belongs_to :user
    has_many :Juices
end

# juice.rb
class Juice < ActiveRecord::Base
    belongs_to :fruit
end
```

```ruby:users_controller.rb
@users = User.includes(fruits: :juices)
```
上記を実行すると・・・

```ruby:実行結果
SELECT `users`.* FROM `users`
SELECT `fruits`.* FROM `fruits`  WHERE `fruits`.`user_id` IN (1, 2, 3)
SELECT `juices`.* FROM `juices`  WHERE `juices`.`fruit_id` IN (1, 2, 3, 4)
```

３回のアクセスで全て取得できる！！　　

お疲れ様でした。
式展開ってなんなの？

# 式展開とは？
- 文字列の中に式を入れることができる機能
- 書き方は文字列中で`#{式}`とするだけ
- 文字列を作るときにダブルクォーテーション`"`で囲む

## 記述例と出力例

```:記述例
"今日で#{20+1}歳になりました"
```
```:表示例
 今日で21歳になりました
```

## ターミナルでirbを使用して確認してみる

```:出力成功例
irb(main):001:0> "今日で#{20+1}歳になりました"
=> "今日で21歳になりました"
```

<br>

```:出力失敗例
# シングルクォーテーションだと式展開されない
irb(main):002:0> '今日で#{20+1}歳になりました'
=> "今日で\#{20+1}歳になりました"
```
>`シングルコーテーションは不可`
シングルクォーテーション`'`で囲んだ場合は式展開が行われません


# 補足
式展開の`式`に関して

`Rubyにおける「式」とは`
文字列や数値の他に

- メソッドの呼び出し
- 変数
- 演算子式

などが含まれます。

すなわち、`"文字列", 1000, (1 + 5)`などはすべて式

Rubyは記述をすべて式と捉えます。

```:ターミナル【例】irb
irb(main):001:0> "記述はすべて式"

# 式の結果
=> "記述はすべて式"
```

`irb`でとくにメソッドも使用せずに文字列や数値の値を確認できていた
これは、式の結果が表示されていたからこそ可能となっていた


`irb`を使用して想定通りの出力がされない場合は、以下の可能性がある

- irbを起動できていない`（最初にirbとコマンドを入力しないとirbは起動しません）`
- 式展開 #{ }が全角になっている`（式展開は半角で記述します）`
アプリケーションの簡易カスタマイズ ⇒ ユーザインターフェースのカスタマイズ

１．Lightning Experience レコードページのカスタマイズに使用できるのは、どのページレイアウト要素ですか?
２．コンパクトレイアウトを使用してカスタマイズするのは、レコードページのどの部分ですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/a537db72-c395-8e46-0984-aa3e0d3505d1.png)
windowsでwsl2でvscode-neovimを早めにしたい

どうも、vimmerを自称する癖にvimを裏切りvscodeに頭を垂れた弱者です。
同時に完全linux互換という言葉につられ、osxとlinuxを裏切り、wsl2に頭を垂れた罪人でもある私は、vscode-neovimとかいういい感じの拡張機能を見つけたので、いじってみました。

すると気持ちよくなりました。

しかし、neovim0.5だの、vim-plugだの、ime自動切り替えだのに時間を取られて、すぐに気持ちよくなれなかったのもまた事実。
すぐに気持ちよくなりたい人のためにこれを記す。

## 何が手に入るのか

- リーダーキーはspace
- クリップボードはwindows側の物を使う
- easymotion搭載
- インサートモード、コマンドモードを抜けるときにIMEを無効にする
- vim-surroundも一応

そんなvscode vim環境。

## どうすればいいのか

wsl2上でこれを実行し、

```bash
# Install neovim 0.5.
curl -fLO https://github.com/neovim/neovim/releases/download/nightly/nvim.appimage
chmod u+x nvim.appimage
sudo mv nvim.appimage /usr/local/bin/nvim

# Install vim-plug.
sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \
       https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

# Install win32yank.
# クリップボード操作プログラム。
curl -fLO https://github.com/equalsraf/win32yank/releases/download/v0.0.4/win32yank-x64.zip
unzip win32yank-x64.zip -d win32yank
chmod u+x win32yank/win32yank.exe
sudo mv win32yank/win32yank.exe /usr/local/bin/win32yank
rm -rf win32yank-x64.zip win32yank

# Install zenhan.
# IME操作プログラム。
curl -fLO https://github.com/iuchim/zenhan/releases/download/v0.0.1/zenhan.zip
unzip zenhan.zip
chmod u+x zenhan/bin64/zenhan.exe
sudo mv zenhan/bin64/zenhan.exe /usr/local/bin/zenhan
rm -rf zenhan.zip zenhan

# 最小init.vimをダウンロード。
# https://gist.github.com/sijiaoh/64d7fcf87e725203475eab51f56df4b0
# 注意：init.vim上書きするよ！！！
curl -fLo ${HOME}/.config/nvim/init.vim --create-dirs https://gist.githubusercontent.com/sijiaoh/64d7fcf87e725203475eab51f56df4b0/raw/9720dafbb3cc60227c8293dd8cc031423684d1cd/init.vim
```

これをvscodeのsettings.jsonに追加する。

```json
{
  "vscode-neovim.useWSL": true,
  "vscode-neovim.neovimExecutablePaths.linux": "/usr/local/bin/nvim"
}
```

気持ちいい。