OmniAICreator/Qiita-1.07M huggingface dataset:
Firebase×Reactでポートフォリオサイトつくった

はてなブログとQiitaを足して2で割ったようなサイトを作りました
## 画面
### ARTICLES：記事一覧
![344A5011-5ADC-43D1-AF90-37B9CF721AE3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120823/7fad21d3-2626-2c98-0342-6c14b96a1bad.jpeg)

- QiitaやQrunch、はてなブログなど外部サイトに投稿した記事一覧をまとめて見れます
- ブログみたいに直接記事を投稿することもできます
- 記事にタグをつけられます
- 記事一覧でタグフィルタをかけることができます

### 記事ページ
![B07A6B9F-548F-4EF0-8BE0-AC737E2FBFC2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120823/6380aacb-8d54-ac45-f049-8ccd33df356e.jpeg)

- Qiitaみたいに右側に目次が出ます
- 記事はMarkdown形式で書いたものを表示しています

### PRODUCTS：製作物一覧
<img width="1194" alt="F4E1FFEE-E277-4AF6-BD30-265777C35EE1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120823/93952658-b478-c70b-d65f-443f86383991.jpeg">

- 個人開発で作成したWEBアプリなどの一覧が表示されます

### 製作物ページ
<img width="1194" alt="DCFF1067-5BCD-432B-89D3-EB53805E4331.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120823/f8a80343-baeb-1aa2-1991-5676b3576a38.jpeg">

- 製作物に関するシリーズ物の記事を見ることができます
- 右側に表示している記事の目次と、シリーズの記事のリンクが表示されています
    - 上図では「概要」ページを開いている画像で、概要ページの目次が表示されています
    - 「要件定義」などのページのリンクも表示されています

## 特徴
### 自分の記事をまとめられる
はてなブログだったりQiitaだったりQrunchだったり、いろいろなサイトに記事を投稿している人はわかると思うのですが、あの記事どこに投稿したっけ？？と忘れてしまうことが多々ありました。

自分の記事を一覧で確認できるので、どこに投稿したかがわかって便利です！

### ポエムが投稿できる
技術的な記事はQiitaでLGTMが欲しいものの、ポエムは規約的に投稿できないので、はてなブログなど別のサイトで投稿していました。
すると前述のように自分の記事がいろいろなところに分散してしまう原因になってしまいます。

自分のサイトなので当然ポエムが投稿でき、技術的な記事はQiitaのリンクをはることでLGTMも（うまくいけば）ゲットできます！

### シリーズ物の記事が簡単にまとめられる
ブログやQiitaでシリーズ物の記事を作ろうとすると、各ページのリンクを貼ったまとめ記事を作成したり、記事ごとに前の記事と後ろの記事のリンクを貼ったりする必要があります。これが正直面倒くさすぎます。

シリーズ物の記事リンクはいわゆるリファレンスサイトのように目次と一緒に自動生成されるので、書き手も楽だし読み手も楽だしと一挙両得になります！

## 構成
- Firebase
    - Hosting
    - Authentication：管理者ページの認証
    - Firestore：DB
    - Storage：画像保存用
- React
    - Redux不使用
- TypeScript
- Material UI

## 詳細
設計：https://yaki-lab.firebaseapp.com/Product/YakiLab/Top
URL：https://yaki-lab.firebaseapp.com/
ソースコード：https://github.com/yakipudding/yaki-lab
React Hooks useStateでformのonChangeハンドリング

#React Hooksでフォームで全てのinput要素にonChangeイベントを割り当てる際、input要素が多いと大変面倒くさいと感じていたので。

- Reactには一月前から触れたばかりで日々学習しています。
- 公式チュートリアル、ドキュメントを一通りやって、オリジナルアプリの開発を始めた段階です。
- 公式がこれからはHooksで行くと暗に宣言していると感じたので、クラスコンポーネントは流しただけです。最初からHooksオンリーで始めています。
- JavaScriptはなんとなくやっている感じで体系的な学習はまだまだです。


##Reactでフォームを扱う場合
自分はform要素を一つ一つstateにして、onChangeイベントでは条件分岐でtargetのname属性に応じて該当するstateを割り当てていました。

```react:form.jsx
const Form = (props) => {
    //input要素を一つ一つstateとしていた。input要素が増えると面倒
    const [firstName, setFirstName] = useState(null);
    const [lastName, setLastName] = useState(null);
    const [email, setEmail] = useState(null);

　　//name属性でstate名を判断する条件分岐　
    const handleChange = (e) => {
        if(e.target.name === 'firstname') {
            setFirstName (e.targetValue);
        } else if (e.target.name === 'lastname') {
            setLastName (e.targetValue);
        } else if (e.target.name === 'email') {
            setEmail (e.targetValue);
        }
    }

    const handleSubmit = (e) => {
        // do something
    }

    return (
    <form onSubmit={this.handleSubmit}>
        <input type="text" name="firstname" value={firstName} onChange={handleChange} />
        <input type="text" name="lastname" value={lastName} onChange={handleChange} />
        <input type="text" name="email" value={email} onChange={handleChange} />
        <input type="submit" value="Submit" />
    </form>
    )
 }
```

なんかもの凄く無駄な記述をしているような気がしていました。でもReactではform要素もReactの支配下で管理するというスタンスなので、こうせざるを得ないのかなと思っていたのです。
それにstateを逐一監視していなくてもsubmitの段階で確定してくれればそれでいいと思うのですが、そうやろうとするとinput要素は入力を受け付けてくれません。useRefも試してみましたが、余計面倒になり諦めました。
このform要素をまとめてオブジェクトとして扱おうとすると、ちょっと扱いが面倒という記事もチラホラ目にしましたし。

海外YouTuberのReact解説を風呂でボケーっと眺めていて、以下のような記述ができると知って早速拝借。
（この方はクラスコンポーネントで記述していましたが）。

```react:form.jsx
const Form = (props) => {
　　　//formステートをオブジェクトにしてinput要素はプロパティで設定
    const [form, setForm] = useState({firstName: '', lastName: '', email: ''});
　　
　　　//これでonChangeイベントを動的に扱えるので条件分岐不要
    const handleChange = (input) => e => {
        setForm({...form, [input] : e.target.value});
    };

    const handleSubmit = (e) => {
        // do something
    }

    return (
    <form onSubmit={handleSubmit}>
        <input type="text" value={firstName} onChange={handleChange('firstName')} />
        <input type="text" value={lastName} onChange={handleChange('lastName')} />
        <input type="text" value={email} onChange={handleChange('email')} />
        <input type="submit" value="Submit" />
    </form>
    )
 }
```
formというstateをオブジェクトにしてinput要素をプロパティで持たせて、
handleChangeの引数にstateオブジェクトのプロパティ名を渡すだけでスッキリしました。

handleChangeのアロー関数のアローが二つ出てくるのですが、一つにすると、

```react:form.jsx
const handleChange = (input) => {
        return e => setForm({...form, [input]: e.target.value})
    }
```

こういう意味らしい。
それと、`setForm({[input]: e.target.value})`とついついやってしまうのですが、
React Hooksのstateの変更はマージではなくて置換ですので`({...form, [input]: e.target.value})`ですね。

こちらの方の記事にもこの扱いが出ていました。やはり最初は面倒だなと思いますよねこれ。こちらの方の記事の方がわかりやすいです。
参考記事:[React Hooks での form の扱い方](https://qiita.com/7kaji/items/7197f0062337b002a3c1)

これでやっとフォームコンポーネント作るの億劫でなくなりました。
Pythonのmain()ーif文つけるのなぜ？

#Pythonの__name__ってなにっ？
`if __name__ == "__main__":`っていう
Pythonのソースコードによく登場する１行は
「おまじない」とかで片付けられますが
なんの役に立っているのでしょう。

例えば、`helloWorld.py`というファイルを作成したとします。

```Python:helloWorld.py
def main():
    print("Hello Python!")
# メイン
main()
```
先ほどの
`if __name__ == "__main__"`の記述はありませんが

```
$ python helloWorld.py
Hello Python!
```
という実行結果は得られます。
ただしこの構成の場合、`import`した場合でも

```
＞＞＞ import helloWorld # この時点で「Hello Python!」が表示されてしまう
Hello Python!
```
ということで、単にPythonファイルをインポートして、main関数を再利用しようとしただけなのに実行まで勝手にされてしまうのは困ります。
そこで

```
def main():
    print("Hello Python!")

# main()の前に１行挿入するのだ
if __name__ == "__main__":
    main()
```
このif文の内部は import された際には実行されません。

```
＞＞＞ import helloWorld
＞＞＞
```
## インポートで実行されない理由

- import helloWorldをした場合：

`if __name__ == "__main__" の __name__`という変数には
このPythonファイルのモジュール名が文字列で入っています。
つまり
`__name__の中身は”helloWorld” という文字列`
となっています。

- python helloWorld.pyのようにプログラムを実行した場合：

helloWorld.py の内部の
`__name__ 変数は "__main__" という文字列`
になります。

###まとめ

1. `import helloWorld`した`helloWorld.py`内部では、
   `__name__` ==`"helloWorld"`という文字列になる。

2. `python hello.py`した`helloWorld.py`内部では、
   `__name__` == `"__main__"`という文字列になる。

よって`import`しただけで勝手に動かれてしまうことを防ぐことが可能！
というわけです。
う〜ん、Python奥が深い。
いろいろ学ぶ余地がありますね。
Caliburn.Microを用いてWPFアプリケーションを作成する(4)

# Buttonを追加し、挙動を設定する

## 概要

[WPF in C# with MVVM using Caliburn Micro](https://www.youtube.com/watch?v=laPFq3Fhs8k)の54分目あたりからを参考に、[前回のComboBox追加](https://qiita.com/paichi81@github/items/475a9cb58cd13f6fae02)の内容に、Buttonを追加する。

### 完成形

ボタンを押すとテキストボックスがクリアされるようにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23242/bc4ddaf8-ddf2-fc48-9dcf-c864ccebe110.png)

## 実装

今回も動画を見ながら進める。


### ViewにButtonを追加する

とりあえずShellViewに次のようにボタンを追加する。

```xml:ShellView.xaml(抜粋)
        <!-- row 4 -->
        <Button Grid.Row="4" Grid.Column="1" >Clear</Button>
```

### ShellViewに実行時の関数を追加する

```cs:ShellViewModel.cs(抜粋)
		public void ClearText()
		{
			FirstName = "";
			LastName = "";
		}
```

この内容をViewに反映するため、さきほどのxamlを書き換える。

### ClearText呼び出しを追加

ボタンを押すとTextBoxに紐づけられたFirstName, LastNameが""に設定されるので、結果として紐づけられたTextBoxの内容が空欄になる。

```xml
        <Button Grid.Row="4" Grid.Column="1"  x:Name="ClearText">Clear</Button>
```

### 内容が入っている時だけクリアされる条件をつける

CanClearTextを実装する。
（動画参照　1:05:00付近）

まだ理解がおいついてないが、なんらかの命令規則（バリデーション?）によって動いてる模様。（→2020.6.15追記）
xamlを変更してないが、ClearTextに対してCanClearTextを追加するだけで、挙動が変わる（ちょっとびっくりした）

いずれかのTextBoxに値があるときだけEnableになる条件

```cs:ShellViewModel.cs
		public bool CanClearText(string firstName, string lastName)
		{
			// throw new NotImplementedException();
			return !String.IsNullOrWhiteSpace(firstName) && !String.IsNullOrWhiteSpace(lastName);
		}
		public void ClearText(string firstName, string lastName)
		{
			FirstName = "";
			LastName = "";
		}
```

### 完成

値が入っているときにClearボタンを押すと、TextBoxが空欄になる。

## 追記

Canほげほげについて、どこに説明があるのかとCaliburn.Microのドキュメントを頑張って読んでみたら、なんのことはない一番先頭のIntroductionに書かれてた（おぢさんなので見つけたときは「（爆）」とか言いたくなったorz）

Can～はActionMessageという機構になっている。
さらにイベントトリガになる Action Conventions という規約も存在しているみたいなので、あとで真面目に読む。

* https://caliburnmicro.com/documentation/introduction
payjpを使ってクレジットカード機能を導入しちゃおうってわけ(準備編)

暑くなってきましたね。:flag_jp:
コロナの影響あるからってアタシ負けないんだから。:pouting_cat:
そろそろエアコンの掃除でもしようかね！！

話がそれましたね。
そう今回はpayjpに関して。
みんな焦んないで。
タブ開きすぎ！ってパソコンあるある言うからちょっと待って。
さぁ行くわよ！！！:older_woman_tone5:

#1 payjpってなんぞや？？

初めての方もいるかもしれないので簡単に説明すると、
クレジットカード機能を実装するにあたってすごく便利なものです。
それはなぜか？

フリマアプリで考えるとまずテーブルは

・userテーブル
・商品テーブル
・決済テーブル

以上が購入にあたり必要になります。
メルカリ使ったことある人ならわかると思うんですが、商品購入の際にクレジットカード決済ができる。
そんで一度使ったことあるクレジットカードは保存してあるので、次が登録せず使える。
ですがこれいざ作るってなって考えてみたらこう思うわけ。

### DBにクレジットカード情報丸々保存して、それ流出したら大問題ですやん！！！！

そうなのそうなの。
セキュリティ的に危ないわよね。
そんな悩みを解決してくるのがpayjpなわけ。:fist:

#2 payjpを使う前準備じゃい！！

いきなりVS codeなんて焦りすぎ。
(我慢できない方は引き返してください。お願いします。):runner_tone5:

まずはpayjpのHPがあるのでアクセス!!

[payjp](https://pay.jp/)

アクセスするとこんな感じ。
<img width="1439" alt="A98696BE-2140-4A56-A422-FC761B3EC82D.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596765/ca93c8f9-be8c-97e7-bbe5-00a6e6afb4cd.png">

そんで上のログインからまずは会員登録しましょう。
(無料だから安心だZE!)

#3 登録できたら。
ログインしたらこんな感じ。
(ちゃんとテストモードになっていること！！）


<img width="1429" alt="35E47BE9-F000-4278-8407-32F70D7A23D5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596765/c506c0d7-ea81-ca41-bc22-f4d8a5da35db.png">

#4 全然足りてなかったから追記よ！！
payjpのgem入れてないやん。

そうpayjpはgemがあるのでレッツGemfile!!

```ruby:Gemfile
gem 'payjp'
```

bundle install!!!

これで準備は終わり。
次はクレジットカード登録編でお会いしましょう。
(明日記事書きます。):point_up:
gdal ツールで GeoTiff のピラミッド画像を作ってみる。

## はじめに

解像度の高い GeoTiff ファイルを QGIS などの GIS ツールで扱うとき、ピラミッド画像を作っておくことで、画像を読み込んだレイヤーの拡大・縮小を行ったときの画面表示が高速になり、ツールの操作性を向上させることができる。

## ピラミッド画像

ピラミッド画像のイメージはこんな感じ。

![スクリーンショット 2020-06-14 20.32.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18599/a736cf8c-1a23-1ed8-c1ba-d3f3f4a7fdb3.png)


ピラミッドの底辺にあたる元の画像に対し、ピラミッドの間を切り取ることで現れる断面を縮小画像としてを記録。

これらを元ファイルに埋め込んでおくことで、ピラミッド画像に対応するツールが自動的に画像を認識。ラスタレイヤの拡大・縮小時に元画像でなく、縮小されたピラミッド画像を使って描画を行うようになる。



## gdaladdo

ピラミッド画像の作り方は色々あるけど、ここでは gdal で提供されるツール `gdaladdo` を使ってみる。



### ピラミッド画像の追加

```
$ gdaladdo -r average el_pyramid.tif 2 4 8 16 32 64
```

この場合、`el_pyramid.tif` ファイルの元画像に対し、1/2, 1/4, 1/8, 1/16, 1/32, 1/64 の大きさの画像を作成し、`el_pyramid.tif`ファイルに画像を埋め込む。

-r オプションは、画像の縮小時に用いられるアルゴリズムの指定。

ピラミッド画像を追加するため、元の GeoTiff ファイルと比べると、若干サイズが大きくなる。



### ピラミッド画像の削除

```
$ gdaladdo -clean el_pyramid.tif
```

-clean オプションを指定して gdaladdo を実行することで、追加したピラミッド画像を削除することもできる。（ただしピラミッド画像の分ファイルサイズが減ることはない）
[ASP.NET Core] 發佈至IIS

#目的
初次使用ASP.NET CORE後想發布至IIS,卻發現無法直接使用,會有`HTTP Error 500.19 - Internal Server Error`,
google一下後才發現需要先安裝一些模組


###1. 安裝 .NET Core Windows Server Hosting

要在 IIS 上運行 ASP.NET Core，必須先安裝[.NET Core Windows Server Hosting](https://dotnet.microsoft.com/download/dotnet-core/thank-you/runtime-aspnetcore-3.1.5-windows-hosting-bundle-installer)

###2.安裝完畢後，用系統管理員身分執行指令

```
net stop was /y
net start w3svc
```
wsl2にtfenvをインストールする

## インストール

```bash

git clone https://github.com/tfutils/tfenv.git ~/.tfenv
echo 'export PATH="$HOME/.tfenv/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
```

## 指定したバージョンをインストール

```bash

tfenv list-remote
```

```bash

tfenv install 0.12.26
tfenv use 0.12.26
```

```
yuta@DESKTOP-V36210S:~/AWS_Teraform_Demo$ tfenv list
* 0.12.26 (set by /home/yuta/.tfenv/version)
```
[デプロイエラー] Mysql2::Error: Table '〜' already exists: CREATE TABLE `〜`

# これは何
Railsでチーム開発中、Capistranoでの自動デプロイ時のエラー
「Mysql2::Error: Table '〜' already exists: CREATE TABLE `〜`」がでた時の対処方法。
直訳すると、「既にテーブルがあるから無理だよ」ですね。

※未経験初心者が書いています。ここ違うよ！もっと良い方法あるよ！という事がありましたら、ご指摘いただけると幸いです。


# 対処方法
結論から言うと、データベースのスクラップアンドビルドです。あなた自身が想像と破壊の神シヴァになることだったのです。

真面目にやります。。。
まずはターミナルからSSHログインしてAWSに接続します。
ログイン後はmysqlに接続して中身を見てみましょう。

```
[ec2-user@]$ mysql -u root -p

# mysqlのパスワードです
Enter password:
```

mysqlに入ったら、本番環境のデータベースを見てみます。

```

mysql> show databases;
+----------------------------------+
| Database                         |
+----------------------------------+
| information_schema               |
| sample_production                |
| mysql                            |
| performance_schema               |
+----------------------------------+


mysql> show tables from sample_production;
+--------------------------------------------+
| Tables_in_sample_production                |
+--------------------------------------------+
| ar_internal_metadata                       |
| schema_migrations                          |
| user_addresses                             |
| users                                      |
+--------------------------------------------+

```

こちらをdropコマンドで削除します。

```
mysql> drop database sample_production;

mysql> exit
```

ディレクトリを移動し、データベースを作成します。

```
$ cd  /var/www/アプリ名/current

[ec2-user@ current]$ rails db:create RAILS_ENV=production;

# 必要であればこちらも
[ec2-user@ current]$ rails db:migrate RAILS_ENV=production;

```

あとは、
bundle exec cap production deploy 
して完了です。


ありがとうございました！！
【Spring】コントローラの例外出力テスト

リクエストを受け付けるコントローラのテストは基本的に`MockMvc`を使って書くことが多い。
例外を出力をさせる場合、その例外出力のテストは`org.assertj.core.api.Assertions.assertThatThrownBy`で実装できる。

## 例
### プロダクトコード
```java
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TestController {

    @GetMapping(value = "exception")
    public void throwException() {
        throw new IllegalStateException("例外です");
    }
}
```

### テストコード
```java

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;
import org.springframework.test.web.servlet.MockMvc;

import static org.assertj.core.api.Assertions.assertThatThrownBy;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;

@RunWith(SpringRunner.class)
@SpringBootTest
@AutoConfigureMockMvc
public class TestControllerTest {

    @Autowired
    private MockMvc mockMvc;

    @Test
    public void throwExceptionTest() {
        assertThatThrownBy(() ->
                mockMvc.perform(get("/exception"))
        ).hasCause(new IllegalStateException("例外です"));
    }
}

```
`.hasCause`を使えば例外の中身を検証できる。
#参考
[assertThatThrownBy（リファレンス）](https://joel-costigliola.github.io/assertj/core-8/api/org/assertj/core/api/Assertions.html#assertThatThrownBy-org.assertj.core.api.ThrowableAssert.ThrowingCallable-)
[How to prevent NestedServletException when testing Spring endpoints?（stack overflow）](https://stackoverflow.com/questions/44900646/how-to-prevent-nestedservletexception-when-testing-spring-endpoints)
【Swift】UITableViewとUITableViewControllerは何が違うのか

掲題についてふと疑問に思いTwitterで呟いたら素敵な回答を頂けたので、こちらにまとめした。

## UITableViewとUITableViewControllerについて
#### 構造の違い
もちろん`View`と`ViewController`がそれぞれの親になっています。

| UITableView      | UITableViewController |
|:----------------:|:-----------------:|
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/d03e5d64-01d1-6441-a7be-bb4f0720ab1d.png" width=60%>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/a271726b-04ae-5cbe-caf5-db2755fcdf6d.png" width=60%>|

## UITableViewControllerの特徴
### 1. StaticCellを使用できる
`StaticCell`とは静的に固定したセル、つまり再利用しないセルです。
よく例であげられるのは設定画面で、`TableViewのようなセクションがある一覧を作りたいが、再利用する必要のない時`などに使います。

普通のViewでTableViewのようなレイアウトを作るのは結構面倒ですが、`StaticCell`で作ると本当にレイアウトの実装コストが低くて済みます。

### 2. clearsSelectionOnViewWillAppearでTableViewの選択状態を自動でクリアしてくれる
遷移先画面から戻ってきた時に選択状態をクリアしたい場合などにとても便利です。
`UITableViewController`には`clearsSelectionOnViewWillAppear`がデフォルトで`true`になっており、そのための処理を書かなくても画面が表示される時に選択状態を解除してくれます。

`TableView`で同じような処理をしたい場合は、`viewWillAppear`などでそれ用の処理を書くことになります。描画のためのデータを`Model`などにしておいて、`Model`保持した選択状態を元に`viewWillAppear`で`deselectRowAtIndexPath`を用いてクリアするのかなと思います。
`StaticCell`で描画していた場合は`Cell`数も少ないので全部クリアしてしまえば良いですね。

### 3. CellにUITaxtFieldなどを置いた時、キーボード表示時に自動で入力欄がキーボードの上にくるようにスクロールしてくれる
キーボードと入力欄の位置問題は、誰しも一度は出会う問題ではないでしょうか？
基本的にキーボードの高さをとってそこまで`Offset`を変更してスクロールさせたりしていると思います。
それが`UITableViewController`だと自動でやってくれるのです。小さいですが、これは地味に便利ですね。


大体こんなところではないでしょうか。
今まであまり`UITableViewController`を使う機会がなかったのですが、上記がいかせる画面があれば是非使ってみたいな〜と思いました！

コメント頂いた方々、ありがとうございました✨
【PHP】array_uniqueよりもarray_flip2回の方が早い件を検証してみる

`array_unique`と、`array_flip`2回のどちらの方が早いかについてなんとなく検証してみました。

# きっかけ
以前、先輩エンジニアに「`array_unique`よりも`array_flip`2回の方が早いらしいよ」と聞いたことがありました。  
ふと思い出し、調べたら日本語の記事もほとんど見つからなかったのでまとめようと思います。

# array_unique と array_flip
## array_unique
`array_unique`は、配列を入力とし、値の重複がない新しい配列を返す関数です。

```
$a = array (0, 1, 0, 2, 3, 4, 6, 6, 2); //これが
$b = array_unique($a); //こうすると
print_r($b);
------
こうなる
Array       
(
    [0] => 0
    [1] => 1
    [3] => 2
    [4] => 3
    [5] => 4
    [6] => 6
)
```

## array_flip
`array_flip`は、配列を入力とし、配列のキーと値を入れ替えた値を返します。

```
$a = array ("トマト", "人参", "なす","ピーマン"); //これが
$b = array_flip($a); //こうすると
print_r($b);
------
こうなる
Array
(
    [トマト] => 0
    [人参] => 1
    [なす] => 2
    [ピーマン] => 3
)
```

配列のキーはユニークではなくてはいけません。
そのため、もし仮に`$a`の要素の値に重複が生じていたら、重複していたものは削除されます。

```
$a = array ("トマト", "人参", "ピーマン", "なす","ピーマン", "トマト",); //これが
$b = array_flip($a); //こうすると
print_r($b);
------
こうなる
Array
(
    [トマト] => 0
    [人参] => 1
    [なす] => 2
    [ピーマン] => 3
)
```

従って、`array_flip`を使った結果にもう一度`array_flip`を使うと

```
$a = array ("トマト", "人参", "ピーマン", "なす","ピーマン", "トマト",); //これが
$b = array_flip(array_flip($a)); //こうすると
print_r($b);
------
こうなる
Array
(
    [5] => トマト
    [1] => 人参
    [4] => ピーマン
    [3] => なす
)
```
array_uniqueと同じように、全ての要素がユニークな配列ができました。

# 速度検証
`array_unique`と`array_flip`2回のどちらも同じように、配列の重複した値を削除することが確認できたところで、  
両者の速度検証を行ってみます。


## 1回目
こんな感じのコードにしました。

```
<?php

$a = array();
for ($i = 0; $i < 500; $i++) {
   $a[] = $i;
}

$b = array();
for ($i = 0; $i < 100; $i++) {
   $b[] = $i;
}
// 0~500の値がある配列があり、0~100の値が重複している。
$c = array_merge($a, $b);

// array_unique
$time_start = microtime(true);
$d = array_unique($c);
$time = microtime(true) - $time_start;
$time = sprintf("%.13f", $time);
echo "array_unique => {$time} 秒\n";

// array_flip2回
$time_start = microtime(true);
$d = array_flip(array_flip($c));
$time = microtime(true) - $time_start;
$time = sprintf("%.13f", $time);
echo "array_flip2回 => {$time} 秒\n";
```

### 結果

* array_unique: 0.0005168914795 秒
* array_flip2回: 0.0000481605530 秒

array_flipの方が早いです。

## 2回目
配列の要素数が少ないだけかもしれないので、もう少し要素を増やして計測してみます。

```
<?php

$a = array();
for ($i = 0; $i < 300000; $i++) {
   $a[] = $i;
}

$b = array();
for ($i = 0; $i < 100000; $i++) {
   $b[] = $i;
}
// 0~300000の値がある配列があり、0~100000の値が重複している。  
$c = array_merge($a, $b);

// array_unique
$time_start = microtime(true);
$d = array_unique($c);
$time = microtime(true) - $time_start;
$time = sprintf("%.13f", $time);
echo "array_unique => {$time} 秒\n";

// array_flip2回
$time_start = microtime(true);
$d = array_flip(array_flip($c));
$time = microtime(true) - $time_start;
$time = sprintf("%.13f", $time);
echo "array_flip2回 => {$time} 秒\n";
```

### 結果
* array_unique: 0.5305528640747 秒
* array_flip2回: 0.0351331233978 秒

ダントツでarray_flip2回の方が早いですね....  

# まとめ
2つのメソッドの速度計測を行い、array_uniqueよりもarrray_flip2回の方が本当に早かったことが確認できました。
こんなに速度が違ったとは...

厳密には、もっとたくさんの要素を重複させたりなどで計測を行って確かめてみるのが良いかもしれません。

ありがとうございました。
[Rails]遷移元のURLを取得してリダイレクトする方法

# やりたいこと
Railsで開発しているフリマアプリで、特定の処理後、遷移元のURLに戻る（リダイレクトする）ことをやりたい。
具体的には↓

1. 商品ページから購入ボタンを押す
2. クレジットカードが登録されていないと、**クレカ登録画面に遷移**
3. クレカ登録後、**購入しようとしてた商品ページに戻る(リダイレクトする)**

元々はクレカ登録後、カード情報を表示する画面に遷移していました。
これだと、**購入しようとしていた商品を再度探して購入ボタンを押さなければならない、というユーザーにとても不親切な挙動**でした。

## 元の状況
※GIF見にくくて申し訳ありません…

商品ページで購入ボタン押す → クレカ登録画面に遷移（クレカが登録されていない場合）
![92e9b1521895f97a6e1f2c4a46c7ce3f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602794/6b80910e-7b1f-82d0-9cc8-64a6ad3f89fa.gif)

クレカ登録 → 登録したカード情報を表示する画面に遷移
![e94f61e09decdfded6051eabaa91cd4b.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602794/daa419ac-4f60-7200-5c36-16f4e02e5f0a.gif)

これではユーザビリティも悪いし、せっかく購入しようとした商品も「うわ、また探すの面倒。。買うのいいや」という状況になりかねないので、解決策を模索。うまく解決できたので記述します。

# 環境
Ruby 2.5.1
Rails 5.2.4

# 使うのは`request.referer`
記述自体はめちゃくちゃ簡単です。

```ruby:creditcards_controller.rb
  def create
    render :new if params[:payjpToken].blank?
    customer = Payjp::Customer.create(card: params[:payjpToken])
    @card    = Card.new(user_id: current_user.id, payjp_id: customer.id)
    @card.save ? (redirect_to request.referer) : (render :new) # この行！！！
  end
```
endの上の行で、`redirect_to request.referer`と記述してますが、これで、カードの登録画面(creditcards/new)に遷移する前のURL（HTTPリファラ）を取得し、リダイレクトさせています。

## 修正後

カード登録 → 購入しようとしていたページに戻る → すぐ買える！
![480ebbde6bc9bd533df8fadda2e06681.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602794/dc9b0c6a-7574-b16a-61d2-cd3c68de558d.gif)

こんな感じで解決できました。

（ちなみに`? () : ()`は三項演算子です。詳しくは伊藤さんのQiitaへ([[初心者向け] RubyやRailsでリファクタリングに使えそうなイディオムとか便利メソッドとか](https://qiita.com/jnchito/items/dedb3b889ab226933ccf))

Railsの`request`についてはこちら。
[[Railsガイド]10 requestオブジェクトとresponseオブジェクト](https://railsguides.jp/action_controller_overview.html#request%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8response%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88)

referer(referrer)、HTTPリファラについてはググっていただくのがいいかと思います。
PythonでChemSpiderを利用する方法

# はじめに

[ChemSpider](https://www.chemspider.com/)は、代表的な化合物のデータベースです。
ここでは、PythonでChemSpiderのデータを利用する方法について解説します。


# Web API利用申請

まず、Web APIの利用申請が必要です。
[Developers Portal](https://developer.rsc.org/)から申請を行います。
ここでAPIキーが発行されるので、これを利用してChemSpiderのデータを取得します。


# ChemSpiderクラスのインスタンス作成

PythonでChemSpiderを利用するには、`chemspipy`を使います。
上で取得したAPIキーを利用して、`ChemSpider`クラスのインスタンスを作成します。

```python
from chemspipy import ChemSpider


cs = ChemSpider(発行されたAPIキー)
```

# 化合物の検索

```python
search_results = cs.search('glycine')
filter_results = cs.filter_name('glycine')
```


# まとめ

ここでは、ChemSpiderのデータにアクセスする方法について解説しました。
`ChemSpipy`を使えば、ChemSpiderに格納されている情報を簡単に利用することができます。
ケモインフォマティクスに不可欠なツールなので、是非使えるようになっておきましょう。


# 参考資料・リンク

[ケモインフォマティクスは製薬企業でどう役立つ？どんな知識が必要？](https://pharma-engineer.com/chemoinformatics/medicinal-chemistry-summary/)
primary key のカラムとは別に auto_incremen するカラムがあるテーブルを migrate したい

## 前提
* DB の主キーは連番ではない
* 連番のカラムが必要
* Laravel Framework 5.8.36
* mysql  Ver 14.14 Distrib 5.7.25

### 実行しようとした migration ファイル
```php
Schema::create('tests', function (Blueprint $table) {
    $table->uuid('id')->primary();
    $table->bigIncrements('counter');
    $table->timestamps();
});
```

### 出たエラー
```console
SQLSTATE[42000]: Syntax error or access violation: 1068 Multiple primary key defined (SQL: alter table `tests` add primary key `tests_id_primary`(`id`))
```

「複数の `primary key` は設定できないぞ」って感じのメッセージである。
どうみても主キー1個だろ？と思ったが、何か隠された仕様があるのかもしれないと思い、  `php artisan migrate --pretend` を実行してみると。

```sql 
create table `tests` (
`id` char(36) not null, 
`counter` bigint unsigned not null auto_increment primary key, 
`created_at` timestamp null, 
`updated_at` timestamp null
) default character set utf8mb4 collate 'utf8mb4_unicode_ci'

alter table `tests` add primary key `posts_id_primary`(`id`)
```
なんか `counter` に `primary key` がついてる！！

そうなんです。
`auto_increment` を有効にすると自動で `primary key` がついてきてしまうんです。
実際に sql 文を構築しているクラスを読みに行くと、確かにそう書いてあるのだ。
<img width="843" alt="Laravel migration core" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71497/e9281c99-cd4b-d9de-a60f-358f593b7cd6.png">
なんてこった。
たしかに mysql の仕様では `auto_increment` のカラムには `index` 貼れとあるが、勝手に `primary key` に勝手にされたら困るんだなぁ。
実際には `auto_increment` = `primary key` というケースがほとんどなんだろうけど、明示的に `primary key` にするメソッドがあるんだからさぁ。

## 解決策
いくつか対応パターンを考えた。
1. UUID を諦める
2. UUID は利用するが primary key は number に譲って、モデルなどの運用でカバー
3. 生の SQL を書く
4. migration ファイルで頑張る
5. このクラスをオーバーライドする方法を探して、 primary key つけないようにする

今回は 4 を採用した。

### 修正した migration ファイル

```php
Schema::create('tests', function (Blueprint $table) {
    $table->uuid('id');                 // 1
    $table->bigIncrements('counter');
    $table->timestamps();

    $table->unique('counter');          // 2
    $table->dropPrimary();              // 3
    $table->primary('id');              // 4
});
```

### やってること
1. `id` のカラムから `primary()` のメソッドを削除
2. `counter` に `unique` を付与
3. `primary key` を削除
4. `id` を `primary key` に指定

### 確認
```sql
mysql> desc tests;
+-------------------+---------------------+------+-----+---------+----------------+
| Field             | Type                | Null | Key | Default | Extra          |
+-------------------+---------------------+------+-----+---------+----------------+
| id                | char(36)            | NO   | PRI | NULL    |                |
| counter           | bigint(20) unsigned | NO   | UNI | NULL    | auto_increment |
| created_at        | timestamp           | YES  |     | NULL    |                |
| updated_at        | timestamp           | YES  |     | NULL    |                |
+-------------------+---------------------+------+-----+---------+----------------+
```

## おつかれさまでした
なかなかこんな変なことする人はいないと思うけれども、宗教上の理由で自分は uuid(ulid) を使い続けるので、またこれに出くわすかもしれないので防備しておく。
java(カプセル化)


#カプセル化
・フィールドに不正な値が入らないように防ぐ
・「矛盾しないクラス」を作る
・「現実世界を忠実に真似る」オブジェクト指向の本質と直結している



#フィールド、メソッドに対してアクセス制限を行う

**アクセス修飾子（しゅうしょくし）**

| 名称    　　　|       指定方法　　　 | アクセスを許可する範囲   |
|:-----------------|------------------:|:------------------:|
| private            　　　　　　　　　 |　　　　　　　　private| 自分自身のクラスのみ       |
| package private        　　　　|（何も書かない）| 　自分と同じパッケージに属するクラス       |
| protected            |protected|自分と同じパッケージに属するか、自分を継承した子のクラス          |
| public               |             public  |         全てのクラス        |


##メンバに関するアクセス修飾子の定石
・フィールドは全て`private`
・メソッドは全て`public`

##getterとsetter
・メソッドを経由したフィールドの操作

###getter
・「get」+「フィールド名の先頭を大文字にしたもの」
・nameフィールドの中身を呼び出して元に返すだけのメソッド

```java:Hero.java
public class Hero {
  private String name;

  public String getName() {  //getName()を経由してnameフィールドにアクセス
    return this.name;
  }
}
```

```java:King.java
public class King {
  void talk(Hero h) {
    System.out.println("王様：ようこそ我が国へ、勇者" + h.getName() + "よ。");
  }
}
```


###setter
・「set」+「フィールド名の先頭を大文字にしたもの」
・値を代入するだけのメソッド（他のクラスで）

```java:Hero.java
public class Hero {
  private String name;

  public void setName(String name) {
    this.name = name;    //this.は絶対に忘れないように
  }
}
```

#クラスに対するアクセス制御

| 名称    　　　|       指定方法　　　 | アクセスを許可する範囲   |
|:-----------------|------------------:|:------------------:|
| package private        　　　　|（何も書かない）| 　自分と同じパッケージに属するクラス       
| public               |             public  　　　　　　　　　|         全てのクラス        |

##非public（package private）クラスの特徴
・クラス名はソースファイル名と異なってもよい
・１つのソースファイルにクラスを複数宣言してもよい


```java:Hero.java
public class Hero {
}
class HeroSkill {
}
class HeroSinbol {
}
```

```java:Hero.java
class Character {
}
class Boss {
}
```
find,find_byメソッド　違い

# findについて
findメソッドはidによってデータを取得します。
Railsでは、デフォルトでidカラムがプライマリキーとしてデータベースに追加されているため、自分で設定することなく、findメソッドを使用できます。

## 構文
```
モデル名.find(引数)
```

指定できる引数は、

- 数値型
- 文字列の数字
- 数字のリスト
- 数字の配列

以上
4つです。

(例)blogの詳細画面を実装したい場合

```ruby:blogs_controller.rb
class BlogsController < ApplicationController
  # 省略
  def show
    @blog = Blog.find(params[:id])
  end
  # 省略
end
```

blogの情報(詳細)を取得するために、「findメソッドの引数にどのblogのidを渡せば良いのか」、「どのidのblogの詳細画面を開きたいのか」を教えてあげる必要があります。

この例では、paramsメソッドとfindメソッドを使用して、画面から取得したblog情報を変数に代入しています。

アクションが起動すると、parameterでblogのidが送られてくるようになっています。

# find_byについて
特定の条件にマッチした最初のレコードを検索します。
取得するデータは一件です。

## 構文
```
モデル名.find_by(特定の条件)
```

指定できる引数は、

- カラム名
- 検索条件

などです。データが見つからない場合はnilを返します。

(例)find_byメソッドがnilを返す特性を生かし、以下のように条件分岐が可能

```ruby
#省略
<% unless @blog.user_id == current_user.id %>
  <% if @favorite.present? %>
    <%= link_to 'お気に入り解除する', favorite_path(id: @favorite.id), method: :delete, class: 'btn btn-danger' %>
  <% else %>
    <%= link_to 'お気に入りする', favorites_path(blog_id: @blog.id), method: :post, class: 'btn btn-primary' %>
  <% end %>
<% end %>
# 省略
```

このように、お気に入り登録がされていなければ、お気に入りするボタンを表示させ、お気に入り登録されていば、お気に入りを解除するボタンを表示させることができます。

## まとめ
- findは、検索条件として指定できるのは、idのみ
- find_byは、複数の条件を指定したり、id以外のカラムでも検索できる
- findは、データを複数取得できる
- find_byは、最初にマッチした一件のみ取得できる
- findは、検索結果がない場合、例外を発生させて処理を中断する
- find_byは、検索結果がない場合、nilを返すため、処理は中断されない
USBデバッグ有効時にアプリを操作不可能に

# はじめに

USBデバッグが有効な場合に、ダイアログを出して、操作させないアプリがあったので、自分もやってみた。

# 実装

USBデバッグが有効かどうかは、 `Settings.Global.ADB_ENABLED` で取得できる。
https://developer.android.com/reference/android/provider/Settings.Global#ADB_ENABLED

```kotlin:MainActivity.kt
class MainActivity : AppCompatActivity(R.layout.activity_main) {

    override fun onResume() {
        super.onResume()

        val isAdbEnabled = Settings.Global.getInt(contentResolver, Settings.Global.ADB_ENABLED)
        if (isAdbEnabled == 1) {
            AlertDialog.Builder(this)
                .setTitle("USBデバッグがオンになっています")
                .setMessage("USBデバッグをオフにしてください。")
                .setPositiveButton("開発者向けオプションを開く") { _, _ ->
                    startActivity(Intent(Settings.ACTION_APPLICATION_DEVELOPMENT_SETTINGS))
                }
                .setCancelable(false)
                .show()
        }
    }
}
```

ついでに開発者向けオプションを開けるようにした。

# 完成

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506759/308520f4-9516-4125-b449-a860edd17fd8.gif">

# おわりに

USBデバッグが有効な際に、どんな悪いことができるのかはよく分かっていない...
【Golang】ポインタについて


Go勉強中です。PHPしかやったことのない私がポインタについて勉強しました。
実験的なことをしながらポインタを体感していきたいと思います。

## ポインタを説明する前に

ポインタを説明する前に、まず「変数」についてお話しします。

## 変数

変数は、よく`モノを入れておく箱`と例えられています。
その`モノを入れておく箱`を今回は`番号付きロッカー`だと考えてください。

 - どうしてそう考える必要があるか？

　変数は、本来PCのメモリ上に保管されて処理されています。PC上の保管されるときは`16進数のアドレス`が割り振られて保管され、必要な時に呼び出されます。

変数とはつまり、**`16進数のアドレス`を、人間が判断しやすいように命名が可能な`箱のようなモノ`です。**変数の概念を、少しだけPC寄って理解するため`番号付きロッカー`とお考えください。

### 変数の宣言

ロッカー01番に数字を入れてみましょう。他の言語と同様、上書きすることも可能です。

```golang
var Locker01 int // 変数 Locker01 をint型として宣言

Locker01 = 5
fmt.Println(Locker01)  // 5
Locker01 = 6
fmt.Println(Locker01)  // 6
```
前置きが長くなりました。


## ポインタ

ざっくり言うと転送装置です。
 - 特殊な型

### `*`と`&`で定義した場合

```golang
var money Money
money = Money{
	amount:   120,
	currency: "yen",
}
fmt.Printf("money :%+v\n", money)
fmt.Printf("変数に格納されているアドレス :%p", money)
```
格納されている16進数のアドレスが確認できる

```:出力
money :&{amount:120 currency:yen}
変数に格納されているアドレス :0xc00000a060
```

### `*`と`&`を使わずにMoneyを定義した場合

```golang
var money Money
money = Money{
	amount:   120,
	currency: "yen",
}
fmt.Printf("money :%+v\n", money)
fmt.Printf("変数に格納されているアドレス :%p", money)
```
変数に格納されているアドレスが表示されず、何故かプロパティが出力される

```:出力
money :{amount:120 currency:yen}
変数に格納されているアドレス :%!p(main.Money={120 yen})
```
Unity: スクリプトだけで親子関係のあるオブジェクトを作成する

　最近趣味でUnityを扱っていて、その中でスクリプト上でオブジェクトを作成し親子関係を設定することがあったのでまとめておきます。

# 親子関係のあるオブジェクトを作成する
　まず、スクリプトを作成します。

```cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class sample : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

```

## 1. 3Dオブジェクトの作成
　3Dのオブジェクトを作成する際には、GameObject.CreatePrimiticve関数を使用するようです。その引数でオブジェクトのタイプを選択することでオブジェクトを出力します。

```csharp

void Start()
{
    // プレーン型オブジェクト
    GameObject plane  = GameObject.CreatePrimitive(PrimitiveType.Plane);
    // キューブ型オブジェクト
    GameObject cube = GameObject.CreatePrimitive(PrimitiveType.Cube);
    // 球型オブジェクト
    GameObject sphere = GameObject.CreatePrimitive(PrimitiveType.Sphere);
    // カプセル型オブジェクト
    GameObject capsule = GameObject.CreatePrimitive(PrimitiveType.Capsule);
    // 円柱型オブジェクト
    GameObject cylinder = GameObject.CreatePrimitive(PrimitiveType.Cylinder);
}
```

## 2. オブジェクトの親子関係の追加
　親子関係はオブジェクトのtransform間に設定される関係なようで、子オブジェクトのtransformに対してparent要素に親オブジェクトのtransformを代入するだけで良いようです。

```csharp
// キューブ型オブジェクトの親要素に球型オブジェクトを追加する
cube.transform.parent = sphere.transform;
// カプセル型オブジェクトの親要素に球型オブジェクトを追加する
capsule.transform.parent = sphere.transform;
```
## 親子関係の解消について

### 子オブジェクトから
　子オブジェクトからの親子関係の解消は子オブジェクトに登録されていた親オブジェクトを上書きすることでできます。

```csharp
cube.transform.parent = null;
```

### 親オブジェクトから
　親オブジェクトからの親子関係の解消は複数の子オブジェクト全てとの親子関係を削除することになります。

```csharp
sphere.transform.DetachChildren();
```
国家公務員行政職からAIエンジニアに転職するまで②週目　2020.6.13~

※エンジニアに転職するまでの学習経過等を日記感覚で書いていきます。
　プログラミングに関係ない読書の記録もありますがご了承ください。

6.13(土)
7:05~ スタバ　（トイレにウォシュレットがないことに今更気づき戦慄）
・Udemy　キカガク流【初級】　まずこの講座で基礎的な用語や、単回帰とは何かという説明を図を示してもらいながら理解した方が絶対いいと感じた。
・0メモ（0秒思考という本参照）4枚
昼から車で実家に帰省。夜は元上司と飲み会。日本酒飲みすぎて吐いた。

6.14(日)
二日酔いで朝はまともに動けず・・
昼に体調がやや回復し、夜に戻ってきた（高速料金が休日割引適用外のため、下道。片道４時間半・・・）
21:30~ 家。Qiita投稿。　タイピング練習。

6.15（月）
7:10～8:40 スタバ
上司から借りた本を返すため読書＆まとめ
夜はお世話になった大先輩と飲み会。

6.16(火)
7:10~8:30 ベローチェ
WiFiが革命的に遅い。何もできず（Qiita投稿すらできず）読書だけした。
夜異動が決まったこともあり、同期と飲み会（今週飲んでばっかじゃん・・・）

6.17(水)
7:30~8:30 ドトール
・Udemy キカガク初級
・0メモ　４枚
夜は残業のため何もできず。

6.18(木)
朝は純粋に寝坊。
夜は遠距離中の彼女が訪ねてきたため一緒に過ごす。

6.19(金)
家で引っ越し等のやることの確認で終了。
夜も同様。

・今週の反省点
異動が決まり、引っ越しや業務引継ぎ等に終われ、夜だけでなく、朝の勉強も確保できなかった。
・良かったこと
キカガクの動画を見始めたこと。機械学習の理解が進みそうなので、来週も忙しい中ではあるが、
一歩ずつ進めていきたい。
資料調査: PYNQ-Z1 > Video > AXI4-Stream to Video Outへのデータ供給 (DDRからFrame Buffer Readで読む)

```txt:動作環境
Windows 10 Pro (v1909) 
PYNQ-Z1 (Digilent) (以下、PYNQと表記)
Vivado v2019.1 (64-bit)
```

### 関連

- [PYNQ-Z1 > HDMI > TMDSを使ったHDMI出力 (Tutorialの実行) > カラーパターンの表示](https://qiita.com/7of9/items/d4b7e902cebe3ea798ee)


### ユーザデータのStreaming

AXI4-Stream to Video OutへはVideo Test Pattern Generator IPを使っていた。
これとは別に、ユーザが生成したデータをAXI4-Stream to Video Outへ入れるにはどうするかを調べていた。

下記を見つけた。

- [AXI4-Stream Video IP and System Design Guide](https://www.xilinx.com/support/documentation/ip_documentation/axi_videoip/v1_0/ug934_axi_videoIP.pdf)
    - UG934 October 30, 2019

p35 
Figure 2-12 Video System with Interlaced Content Using Frame Buffer Write/Read

![コメント 2020-06-14 212356.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/3ff87226-27f6-9752-ad84-06e1543fa69d.png)

- Frame Buffer WriteでDDR書き込み
- Frame Buffer ReadでDDRから読み込み、AXI4-Stream to Video Outへ

DDRにデータを設定できれば、HDMI出力できそうな気がする。

### 関連資料2

- [Simple HDMI + VGA Framebuffer Design Example on Neso Artix 7 FPGA Board ](https://numato.com/kb/simple-hdmi-vga-framebuffer-design-example-on-neso-artix-7-fpga-board/)

Vivadoのバージョンが違うためか、Block Designが正常に開かない。
参考程度までに記録を残しておく。
【Flutter】Text 長い文字列に対応する

## 事象
文字が長いと以下のようにエラーが出てしまいます。

```
A RenderFlex overflowed by 1312 pixels on the right.
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/fd0bdead-05b7-7d64-cb50-ea5c15f5799d.png)

Swiftなどだと、
UILabelの`truncate`パラメータ等で調整します。

## 解決方法

Textの｀Overflow｀パラメータを使用する。

```dart:修正前

                              Text(categoryName,
                                style: TextStyle(
                                  fontFamily: 'SFProDisplay',
                                  color: Color(0xffffffff),
                                  fontSize: 30,
                                  fontWeight: FontWeight.w400,
                                  fontStyle: FontStyle.normal,
                                  letterSpacing: 0.0075,
                                ),
                                textAlign: TextAlign.right,
                              ),
```

```dart:修正後

                              Text(categoryName,
                                style: TextStyle(
                                  fontFamily: 'SFProDisplay',
                                  color: Color(0xffffffff),
                                  fontSize: 30,
                                  fontWeight: FontWeight.w400,
                                  fontStyle: FontStyle.normal,
                                  letterSpacing: 0.0075,
                                ),
                                textAlign: TextAlign.right,
                                overflow: TextOverflow.ellipsis, //ここ！！
                              ),
```

### TextOverflow.ellipsis
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/7d598aab-fc29-6e43-fa1d-6961f842a804.png)

### TextOverflow.clip
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/9b197654-740f-52a6-f1a6-bb05ea8c8810.png)

### TextOverflow.fade
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/6155adfa-93d2-8866-557d-de16d11c5f9a.png)

### TextOverflow.visible
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/f70220dc-a4e3-20de-dc6d-4dc671171d7e.png)

## 参考記事
- [Flutterでのテキストを折り返す](https://qiita.com/superman9387/items/15e809dd2044f2e363c5)
地震が起きたときの地図上に震度が表示されるやつが気になったから作ってみた

皆さんは、地震が起きたとき何をしますか？

- Twitterで実況する
- テレビのチャンネルをNHKに変える
- ラジオを付ける

など、色々あるかと思います。
私は、Twitterで**特務機関NERV防災**のアカウントをチェックします。

**もちろん身の安全を確保するのが最優先です。**

Twitterでは特務機関NERVの他にYahooやらtenki.jpやらウェザーニューズなどが地震情報を発信しています。
このようなアカウントで私は毎回、下のような画像をどうやって生成するのが凄く気になっていました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【各地の震度 2018年9月6日】<br>震度6強：<br>［北海道］安平町早来北進、安平町追分柏が丘 <a href="https://t.co/9OtZggW7Pj">pic.twitter.com/9OtZggW7Pj</a></p>&mdash; 特務機関NERV (@UN_NERV) <a href="https://twitter.com/UN_NERV/status/1037403247298850816?ref_src=twsrc%5Etfw">September 5, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 調べてみた

この画像は、**震度分布図**と呼ぶみたいです。
似たようなものを作っていないかと、Qiitaで調べたところ以下のような記事がありました。

> 気象庁防災情報XMLとD3.jsを使って地震の震度分布図を作る 
> https://qiita.com/icchi_h/items/bbf563e1a7acec97a0e0

この記事によると、D3.jsを使用すればできるという内容が書かれています。
作ろうと思えば作れるということがわかったので、作ってみました。

## 作ってみた

記事には具体的な実装方法やソースコードはないため、node上でD3.jsを使用して試行錯誤しました。

D3.jsはバージョンが上がるごとに機能が頻繁に変更されているらしく、ネット上のソースコードが動かないなどがあり大変でした。

最終的にソースコードは以下のようになりました。

```javascript
const d3 = Object.assign({}, require('d3'), require('d3-queue'));
const fs = require('fs');
const simplify = require('simplify-geojson')

...

// 日本地図を読み込む
const q = d3.queue()
    .defer(fs.readFile, map);

q.awaitAll((err, files) => {
    if (err) throw err;
    var data = JSON.parse(files);
    // 地図を少し単純化する
    data = simplify(data, resolution);


    // 地図のどこを描画するか
    var aProjection = d3.geoMercator()
        .center(center)
        .translate([width / 2, height / 2])
        .scale(def_scale * _scale);

    var geoPath = d3.geoPath()
        .projection(aProjection);

    // SVGの設定
    var svg = d3.select(document.body)
        .append('svg')
        .attr('xmlns', 'http://www.w3.org/2000/svg')
        .attr('width', width)
        .attr('height', height)
        .attr('xmin', aProjection.invert([0, 0])[0])
        .attr('xmax', aProjection.invert([width, height])[0])
        .attr('ymin', aProjection.invert([width, height])[1])
        .attr('ymax', aProjection.invert([0, 0])[1])
        .attr('scale', aProjection.scale())
        .attr('encoding', 'utf-8')
        .style('background-color', sea_color);

    // 地図を描画させる
    svg.append('path')
        .datum(data)
        .attr('d', geoPath)
        .attr('stroke-width', 1)
        .attr('stroke-linejoin', 'round')
        .attr('stroke-linecap', 'round')
        .style('fill', land_color)
        .style('stroke', stroke_color);

    ...
}
```

詳しいソースコードはGithubに上げてあります。
https://github.com/earthquake-alert/map-draw

最終的にはこのような画像を生成できるようになりました。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416136/9c935771-9b22-92e7-4d3b-99b4f2bef8ce.png)

個人的に、

- 背景色、震度色など様々な設定を`json`ファイルで簡単に変更できる
- 画像の中心を震源地ではなく、すべての震度の平均値

を工夫しました。

ちなみに、明るい色バージョンも生成するとこのようになります。
![map_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416136/5f551da4-1f02-a623-eb7c-3866c68aedd2.png)

## 作ってみた感想

分布図生成→png画像に変換というすべての処理をする場合、最大3秒ほどかかってしまいます。
1秒以内で処理を完了していち早く情報を発信できる特務機関NERV防災はものすごいんだなと改めて感じました。

## 最後に

詳しく知りたいときはやはり自分で作ってみるのがいいですね！
【Shopify | Object】Objectでできること（blog編）

##blog（全12種）
###blog.all_tags
```
{% for tag in blog.all_tags %}
    {{ tag }}
{% endfor %}
```
ブログの全記事の全タグを返す。
###blog.articles
```
{% for article in blog.articles %}
    <h2>{{ article.title }}</h2>
{% endfor %}
```
ブログ内の全記事の配列を返す。[articleオブジェクト](https://qiita.com/haramatsuryota/items/77491f853fef2a2f3593)を使うことができる。
###blog.articles_count
```
{{ blog.articles_count }}
```
ブログの全記事数を返す。
###blog.comments_enabled?
```
{{ blog.comments_enabled? }}
```
コメントが有効であればtrueを、
コメントが無効であればfalseを返す。
###blog.handle
```
{{ blog.handle }}
``` 
blog/ハンドル名(例 news)などのハンドル名を返す。
###blog.id
```
{{ blog.id }}
``` 
ブログのIDを返す。
###blog.moderated?
```
{{ blog.moderated? }}
``` 
コメントが管理されていればtrueを、
コメントが管理されていなければfalseを返す。
###blog.next_article
```
{{ blog.next_article }}
``` 
次の記事を返す。次の記事がなければnilを返す。
###blog.previous_article
```
{{ blog.previous_article }}
``` 
前の記事を返す。前の記事がなければnilを返す。
###blog.tags
```
{{ blog.tags }}
``` 
ブログ内のすべてのタグを返す。
all_tagsに似ているが、フィルターされたビューにある記事のタグのみを返す。
###blog.title
```
{{ blog.title }}
``` 
ブログのタイトルを返す。
###blog.url
```
{{ blog.url }}
``` 
ブログの相対URLを返す。
##（参考）blog 全出力結果
next_articleとprevious_articleがないので空白になっている。 
![スクリーンショット 2020-06-14 20.23.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322356/12e80804-d851-84f1-abef-d4e9292bbf4a.png)
はじめてのThree.js 10章 日記

[はじめてのthree.js](https://www.amazon.co.jp/dp/4873117704)

#新たに知った知識
- バンプマップテクスチャで奥まで詳細に見える
![Screen Shot 2020-06-02 at 20.09.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/7d6b2650-8b4a-a0f8-609a-3ef174d4a6a7.png)
- バンプマップテクスチャで奥まで詳細に見える
- canvas-textureという手法でリアルタイムに手書きの絵が箱に映し出される



#気づいたこと
- uvマッピング楽しい

#wow moment
- canvas-texture
![Screen Shot 2020-06-13 at 20.06.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/b2a26cdf-c31f-e67e-8a28-e22c6539d8b3.png)



#まだ解決していない点
- フィルターの種類の違い
- 法線マップとバンプマップの違い
- uvマッピングの6つの値は一体何だったんだ。。




[11章はこちら]()
wpa_supplicant.confにおけるトラブル

またまたただのメモです。

引き続きラズパイ４をいじっておるのですが...なぜか、ヘッドレスインストールで無線LANが稼働しない。文字列をどういじってもうまくいかないのですが、...やっとわかったような感じです。

本来はMicroSDのbootパーティーションにwpa_supplicant.confを置いて起動する。それが失敗していたのはbyte order marker(BOM)が入っていたからっぽい。テキストエディタで見てもわからないところが怖い。SARS-CoV-2と同じで見えないものって怖いですね...
いろんなサイトに、wpa_supplicant.confは改行コードLF、文字コードUTF-8で保存と書いてあるのですが。。。文字コードは、UTF-8Nが正解で、これでBOMなしで保存できるということを覚えました。

なお、BOMありで保存してbootパーティーションにコピーしてしまった場合、
・ネットに接続できない
　（Updateとかしても一瞬で終わってしまう）
　（iwconfigとかしてもipが振られていない）
・sudo raspi-configなどで無線LAN接続を試みてもエラーが出る
といった感じになります。

無線LAN接続がなぜかできない人のためになることがあれば幸いです。
Appleに似たページを作る【レイアウト作成】 ~1日10行コーディング~

## 11日目

前回はほんとに雑魚雑魚HTMLかいただけだったので、スタイルを少し当てていきたいと思います！！

### 【技術テーマ】
ホームページ制作

### 言語
* HTML
* CSS

### 目標成果物

前回のHTMLにdivとかで構成を作って簡単なレイアウトだけ寄せる


### コードと資料

今回も前回に引き続きだいぶ基礎的な部分の記述になります。

1. 各要素をDIV等で囲う

前回のHTMLはほんとに並べただけなので、ひとまず文章部分とyoutubeの埋め込み部分を分離します。

```index.html
<body>
    <h1>僕のすすめる料理動画3選</h1>
    <div class="container">
        <div class="recommend">
            <div class="label">
                <span>【至高シリーズ】</span>
                <h2>ペペロンチーノ</h2>
                <span>料理研究家が辿り着いた最高の一皿</span>
            </div>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Jx-tqntWPCM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    
        </div>
        <div class="recommend">
            <div class="label">
                <span>【悪魔シリーズ】</span>
                <h2>万能ネギ</h2>
                <span>もう、醤油には戻れない</span>
            </div>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/MQFEBR4Eo1Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="recommend">
            <div class="label">
                <span>【レンチンシリーズ】</span>
                <h2>サラダチキン</h2>
                <span>もう市販のサラダチキンはいらない</span>
            </div>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/7il2sEYzMYA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    
        </div>
</body>
```

命名はかなり雑ですがこんな感じにして分離します。


2. スタイルをあてる


Appleのページでは左右で要素が分かれているので、上記のclassとかをもとに分けていきます。

```index.html
<style>
    .container{
        width:980px;
        margin:0 auto;
    }
    .recommend {
        margin-bottom: 10px;
        width: 100%;
        display: block;
        height: 315px;
        position: relative;
    }
    .recommend .label{
        position: absolute;
        top: 50%;
        -webkit-transform : translateY(-50%);
        transform : translateY(-50%);;
        content: 'BOX';
        width:40%;
    }
    .recommend iframe{
        width:60%;
        float: right;
    }
</style>
```
左右に分けるのはfloatでやり方を知っていたのですが、文字の部分を真ん中に寄せる方法がわからず他のサイトのをコピって実装しました。

上記の結果がこちら
↓
![](https://i.imgur.com/67LqHJt.png)


おぉ....！！少し近づきましたね。
次回で左/右の出し分けをして、できればフォントの調整をしていきたいです...!!!
ドキュメント生成の前処理でテキストを任意変換するSphinx拡張

# 前提
最近、Sphinxで文書作成しています。

+ restructuredTextより、markdownでゴリゴリ書きたい
+ 公式ドキュメントによるとcommonMark使えばいけるが、Table使えない
+ 「いいライブラリあるやんけ！」← [MarkdownとreStructuredTextを単一ファイルに混ぜ書きできるM2Rの紹介（Sphinx拡張対応）](http://h-miyako.hatenablog.com/entry/2017/08/11/133620)

ということで一旦解決したのだが、PlantUMLを使う際にVSCode上でプレビューできないのがストレスになってきた。

# やりたいこと

make htmlする時に、

```
```plantuml
```

の囲みを

```
.. uml::
```

に自動変換したい。

# 方針

[公式ドキュメント](https://www.sphinx-doc.org/en/master/extdev/appapi.html)内に、イベント実装方法あり。

- 「[Sphinx.connect(event, callback)](https://www.sphinx-doc.org/en/master/extdev/appapi.html#sphinx.application.Sphinx.connect)」でイベントに対するコールバック関数を指定する模様。
- 各種イベント定義は「[Sphinx core events](https://www.sphinx-doc.org/en/master/extdev/appapi.html#sphinx-core-events)」にあり。
- 今回のように素のテキストを変換したい場合、「[source-read(app, docname, source)](https://www.sphinx-doc.org/en/master/extdev/appapi.html#event-source-read)」が使えそう。

# 拡張プラグイン実装

こんな感じで書いてみた。

```python:uml_change.py
def uml_change(app, docname, source):  
    umlFlg = False
    lines = []
    for line in source[0].split("\n"):
        if umlFlg:
            if line.strip() == "```":
                # 囲みの終端が来たら削除する
                line = ""
                umlFlg = False
            else:
                # 囲みの中はインデントする
                line = "    " + line

        ### markdown表記をreST表記に変換
        if line.strip() == "```plantuml":
            line = ".. uml::"
            umlFlg = True
           
        lines.append(line)

    source[0] = "\n".join(lines)
  
def setup(app):  
    app.connect("source-read", uml_change)  
```

# conf.py設定

conf.py に以下の記載を追加する。

```python:conf.py
import sys
import os
sys.path.append(os.path.abspath("./bin")) #フォルダ名は一例です
```

上記スクリプトを指定したフォルダに格納する（上記例で言えばbin配下）。

extensionsに作成したプラグイン名を追加。

```python:conf.py
extensions = ['uml_change']
```

make html やってみて、uml画像が表示されていたら成功。

# 補足

この方法の応用で色々任意の前処理が書けるはず。markdownのリンク形式をrestructuredTextの書式に変換する、等。