OmniAICreator/Qiita-1.07M huggingface dataset:
オブジェクトを前後に分ける

エフェクトがキャラに干渉する素材をレンダリングする場合、普通はキャラで抜いたり、deepでマットアウトする。しかし、キャラのアニメーションがギリギリまでロックしなかったり、モデルに修正が加えらることはよくある。そのような場合は、キャラをサンドイッチできる素材にしておくと差し替えがなくて済む。



オブジェクトを基点にclipで切断。
clipのdirectionをカメラの向きにするとカメラの奥行きに対して前後に分けれる。
赤はカメラ手前、緑は奥。
clipノードでボリュームは切断できないが、メッシュやポイントなら綺麗に分けれる。

/obj階層にあるカメラは、objectMargeで位置を持ってこれる。
カメラの方向は、(カメラ－オブジェクト)で簡単に求められる。

```
vector origin = @opinput0_P;
vector camera = @opinput1_P;

v@dir = normalize(camera-origin); 
```


ポイントの場合
![bandicam 2020-04-26 17-59-44-443.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615517/fd3abbc5-b064-35ef-d5c6-00d6251d5047.jpeg)

メッシュの場合
![bandicam 2020-04-26 17-59-56-675.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615517/8547e35f-07f9-bad0-d3d0-6abc9bab2384.jpeg)

## HIPファイル
データの動作環境:
Houdini Apprentice 18.0.348

ダウンロード先リンク(Github):
https://github.com/DefultVFX/houdini/blob/master/cameraClip.v1.hipnc
P5.js 日本語リファレンス(bezier)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の bezier関数を説明します。

## bezier()

### 説明文

3次ベジェ曲線を描画します。これらの曲線は、 一連のアンカーポイントとコントロールポイントによって定義されます。最初の2つのパラメータは最初のアンカーポイントを指定し, 最後の2つのパラメータは他のアンカーポイントを指定します。これらは, 曲線の最初と最後のポイントになります。中央のパラメータは, 曲線の形状を定義する2つの制御点を指定します。近似的に言えば, コントロールポイントはカーブをその方向に「引き」ます。

ベジエ曲線はフランスの自動車技術者ピエールベジエによって開発され, 緩やかに傾斜した曲線を定義するためにコンピュータグラフィックスで一般的に使用されています。 curve()もご覧ください。

### 構文

bezier(x1, y1, x2, y2, x3, y3, x4, y4)

bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

### パラメタ

- x1  
Number：最初のアンカーポイントのx座標

- y1  
Number：最初のアンカーポイントのy座標

- x2  
Number：最初の制御点のx座標

- y2  
Number：最初の制御点のy座標

- x3  
Number：2番目の制御点のx座標

- y3  
Number：2番目の制御点のy座標

- x4  
Number：2番目のアンカーポイントのx座標

- y4  
Number：2番目のアンカーポイントのy座標

- z1  
Number：最初のアンカーポイントのZ座標

- z2  
Number：最初の制御点のz座標

- z3  
Number：2番目の制御点のz座標

- z4  
Number：2番目のアンカーポイントのZ座標


### 例1

```javascript
function draw() {
  noFill();
  stroke(255, 0, 0); // 赤色を指定
  line(10, 10, 85, 10); // 上の線を描画
  line(15, 80, 90, 80); // 下の線を描画
  stroke(0, 0, 0); // 黒色を指定
  bezier(85, 10, 10, 10, 90, 90, 15, 80); // 右上から左下に bezier 曲線を描画
}
```

### 実行結果

![bezier-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/226aed43-473d-bb9b-8d56-88c9de5d8c69.png)

### 例2

```javascript
function draw() {
  background(0, 0, 0);
  noFill();
  stroke(255); // 白色を指定
  bezier(150, 150, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0); // 下から上に bezier 曲線を描画
}
```

### 実行結果

![bezier-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/df7b877a-a212-3d8a-8e4f-ea84b9dbe809.png)
「data()」と「attr()」について

# 背景
カスタム属性を使う際に必須のメソッドの２つの違いがいまいち理解していなかったため調べて自分なりにまとめてみた。

## data()について
「data()」を使うとHTML要素内に付与されたdata属性に対して、取得・設定・変更などが簡単に行える。
独自の属性を作成して付与できるのがdata属性の特徴です。
このようにすることで、あとからJavaScriptやjQueryで取得・変更できるわけです。

## attr()について
dataメソッドと似ていますが、属性名の指定は「data-」の部分も一緒に記述しなければならない。

## data()の使い方


```javascript

<body>
<p data-name="sato" data-age="42" data-tel="012-3456-7890">私の名前は佐藤です</p>
 
<script>
    const result = $('p').data();
 
    console.log( result );
</script>
</body>
// =>{name: "sato", age: 42, tel: "012-3456-7890"}
```

 対象要素.data( 属性名, 値 )とすると設定・変更できる

```javascript

<body>
<p>おはよう</p>
 
<script>
    $('p').data('greet', 'morning');
 
    console.log( $('p').data('greet') );     //　属性の設定
 
 
    $('p').data('greet', 'hello');
 
    console.log( $('p').data('greet') );　　　//　属性の更新
</script>　
</body>
// => morning
 
// => evening
```

## attr()の使い方
対象要素.attr( 属性名, 値 )

```javascript

<body>
<p>おはよう</p>
 
<script>
    $('p').attr('data-greet', 'morning');
</script>
</body>
// => morning
```

##違いは？
「attr()」で設定した属性はHTML要素へ直接追加されるが、「data()」で設定した属性はjQuery内へ一時的に保持されるだけで直接HTML要素に追加されるわけではない。


```javascript

<body>
<p id="one">テスト1</p>
<p id="two">テスト2</p>
 
<script>
    $('#one').attr('data-name', 'sato');
 
    console.log( $('#one')[0] );
 
    $('#two').data('name', 'sato');
 
    console.log( $('#two')[0] );
</script>
</body>
// => <p id="one" data-name="taro">サンプルテキスト</p>　　　←追加されている
// => <p id="two">サンプルテキスト</p>       　　　　　　　　　←追加されていない

```
パイプラインを考慮した処理の高速化

　最初の投稿ですのでさすがにプログラミングに特化したことを書きたいと思います。
#パイプラインを考慮した処理の高速化
　現在組み込みにおいてもアセンブラで書くことは少なくなってきたと思います。アセンブラは可読性が低くバグの温床になるからです。しかし信号処理など一部の処理のみをあえてアセンブラで書くとかなり高速化できることもあります。使用するプロセッサのパイプラインを理解し専用のコードを書くことで大量の処理を高速に行うことができます。
　パイプライン、Threshold、Latencyについてはwikipediaに詳細に解説されていますので、ここでの説明は割愛します。

　Interfaceの付録の冊子に主要なプロセッサのLatency,Thresholdの一覧が掲載されており大変便利です。

[Interface2020年1月号](https://shop.cqpub.co.jp/hanbai/books/MIF/MIF202001.html)

#実際のコーディング
まずpipelineを考慮しない例を示します。

```
        VLD1.F32 D7, [R0]!
        VMUL.F32 D24, D7, D1[1]		
        VLD1.F32 D8, [R0]!              
        VMUL.F32 D25, D8, D1[1]	        
        VLD1.F32 D9, [R0]!     
        VMUL.F32 D26, D9, D1[1]	
        VLD1.F32 D10, [R0]!
        VMUL.F32 D27, D10, D1[1]	
        VLD1.F32 D11, [R0]!
        VMUL.F32 D28, D11, D1[1]	
        VLD1.F32 D12, [R0]!
        VMUL.F32 D29, D12, D1[1]	
        VLD1.F32 D13, [R0]!
        VMUL.F32 D30, D13, D1[1]	
        VLD1.F32 D14, [R0]!
        VMUL.F32 D31, D14, D1[1]	
```
　これは極端な例ですが、ロードしたデータをすぐ次の命令で使用するためpipelineはstallし、上の行の命令が終わるまで待たされます。Latencyが10 stageの1GHzのプロセッサの場合、
11*8 = 88 step = 88ns
掛かることになります。

　次にpipelineを考慮した例を示します。基本的にはストア先に同じレジスタを使わないようにし、また、ストアしたレジスタをすぐに使わないようにします。

```
        VLDM     R0, {D7-D14}
        VMUL.F32 D24, D7, D1[1]		
        VMUL.F32 D25, D8, D1[1]         
        VMUL.F32 D26, D9, D1[1]         
        VMUL.F32 D27, D10, D1[1]
        VMUL.F32 D28, D11, D1[1]
        VMUL.F32 D29, D12, D1[1]
        VMUL.F32 D30, D13, D1[1]
        VMUL.F32 D31, D14, D1[1]
```

　この例ですが、1行目から8行目まではストア先のレジスタ、ストア後の参照もないためpipelineで処理されます。同じくLatencyが10 stage、1GHzのプロセッサの場合、D31の結果が得られるまでに
10+7+10 = 27 step = 27ns
掛かることになります。
　常にpipelineで処理できれば良いのですが、そうもいかないのが難しいところです。

・SRAM,DRAMとのRead/Write Latency.特にDRAMはburst lengthを考慮しないといけない。
これはCacheを駆使してなるべく外部メモリへのアクセスを行わないように工夫します。
・プロセッサのレジスタの数（pipelineを組みたくてもレジスタが足りないことがある）
・処理の内容によってはpipeline不可能な部分はかなりある。
これはもう仕方ありませんが、他の処理と並列に動かすことができたりすれば高速化の余地はあります。

　開発終盤でCPUの性能不足に困ったときは一部の処理だけでも見直して書き直すとなんとか収まったりします。

#余談
　ARMv7のR0からR15レジスタは仮想化されているため生のレジスタを示しておらず、プロセッサにより実際のレジスタにいい感じにアサインされるそうです。これを活用してARM純正C/C++コンパイラはパイプラインの恩恵を最大限引き出しているとのことです。こうなってしまうとプロセッサの癖が解らずアセンブラでは手出しできないので、悩ましいところです。
Laravel7 makeコマンドのひな形ファイルをカスタマイズする

## 概要

Laravel7以降からStubのカスタマイズを簡単に行える機能が追加されました。
makeコマンドで使用される元のひな形ファイルを簡単にカスタマイズできて便利なのでご紹介します。

## 追記: コマンドを自作したい場合

- [Laravel7 make:xxx コマンドを作ってひな形ファイルを生成する](https://qiita.com/ucan-lab/items/387d964265225321f467)

## 環境

- Laravel 7.5.1

## モデルのひな形を生成するコマンド 

```
$ php artisan make:model Post
```

```php:app/Post.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
}
```

makeコマンドを実行するとこのようなファイルが生成されます。
このひな形の内容を変えたい場合は次のようにします。

## スタブファイルの公開

Laravel7以降では `stub:publish` コマンドが新たに追加されました。

```
$ php artisan stub:publish
Stubs published successfully.
```

実行すると次のファイル群が生成されます。

```
stubs/console.stub
stubs/controller.api.stub
stubs/controller.invokable.stub
stubs/controller.model.api.stub
stubs/controller.model.stub
stubs/controller.nested.api.stub
stubs/controller.nested.stub
stubs/controller.plain.stub
stubs/controller.stub
stubs/factory.stub
stubs/job.queued.stub
stubs/job.stub
stubs/middleware.stub
stubs/migration.create.stub
stubs/migration.stub
stubs/migration.update.stub
stubs/model.pivot.stub
stubs/model.stub
stubs/policy.plain.stub
stubs/policy.stub
stubs/request.stub
stubs/rule.stub
stubs/seeder.stub
stubs/test.stub
stubs/test.unit.stub
```

## make:model のカスタマイズ

`stubs/model.stub` ファイルを見ると次のようにスタブファイルが定義されています。

```php:stubs/model.stub
<?php

namespace {{ namespace }};

use Illuminate\Database\Eloquent\Model;

class {{ class }} extends Model
{
    //
}
```

このファイルを書き換えてあげると `make:model` コマンドに反映されます。

## 参考

- https://readouble.com/laravel/7.x/ja/releases.html
Rails で render の後に書かれた処理は実行されるけどレスポンスを返すのは全処理が終わった後

# 背景

- こちらの記事を読んで Rails で response を返した後の処理が実行されるのかが気になった
    - [アクションの中のrender(), redirect_to()の後の処理は実行される](https://donghai821.hatenadiary.org/entry/20081201/1228122804)
    - 書かれたのが10年以上前だったので最近だとどうなのかを調べたい
- 先に response を返せると何が嬉しいか？
    - タイムアウトまでの時間制限が厳しいシステムや機能と連携する際に非同期処理にしなくてもよくなる
    - 例えば Slack とか
        - https://api.slack.com/interactivity/slash-commands#responding_to_commands
        - `This confirmation must be received by Slack within 3000 milliseconds of the original request being sent, otherwise a Timeout was reached will be displayed to the user. `

# 環境

```sh
➜ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]
➜ rails -v
Rails 6.0.2.2
```

# 調べた結果

- 普通にタイムアウトした :sob: 
- `render` `head` などのレスポンス系のメソッドの後に書かれた処理も実行される
- ただ、アクションの中で書かれたすべての処理が実行された後に response を返すっぽい
- 処理の順番が逆になるわけではないので最後に render するのが自然

```ruby 
class HelloController < ApplicationController
  def hello
    render status: 200

    sleep 3.0

    slack_client = Slack::Web::Client.new(
      token: ENV['SLACK_TOKEN']
    )
    res = slack_client.chat_postMessage(
      channel: params[:channel_id],
      text: 'hello world'
    )
  end
end
```

- `after_action` 系を使っても同じ挙動

```ruby 
class HelloController < ApplicationController
  after_action :slack_post

  def hello
    render status: 200
  end

  def slack_post
    sleep 3.0

    slack_client = Slack::Web::Client.new(
      token: ENV['SLACK_TOKEN']
    )
    res = slack_client.chat_postMessage(
      channel: params[:channel_id],
      text: 'hello world'
    )
  end
end
```

- ただ `before_action` で render すると処理がそこで終わる

```ruby 
class HelloController < ApplicationController
  before_action :before_render

  def before_render
    render status: 200
  end

  def hello
    # ここは実行されない
    sleep 3.0

    slack_client = Slack::Web::Client.new(
      token: ENV['SLACK_TOKEN']
    )
    res = slack_client.chat_postMessage(
      channel: params[:channel_id],
      text: 'hello world'
    )
  end
end
```
Nginxでキャッシュに躓いた話

#始めに
今まではApacheを使っていましたがサーバーのOSを再インストールしてからWebサーバーを触っていなかったのでこの際Nginxに切り替えました。
インストールもリポジトリを追加しなきゃいけなかったのでめんどくさかったですが。
#本題
さて、インストールが終わり実際にホームページを作ろうとしたわけです。
JavaScriptのAlert関数に日本語を入れてブラウザで試したところ文字化けしていたので
文字コードをきちんとしたコードに指定してあげたのですが更新してもまだ文字化けしていました。
で、原因を探るわけですが環境が開発PCとサーバーはローカルで完結してるのでラグなどがないことや
その数時間後に更新しなおすと今度はきちんと文字化けが解消されてたのでバグや自分のHTMLの記述ミスでもないと...
となると残るはNginxのみ。
この時点で何となくキャッシュが原因であることには気づいていました。
しかし、そのキャッシュを無効化する方法がわからず調べること3時間。
そもそもインストールした時点でコンフィグなど触ってなかったのでコンフィグをきちんと設定することにしました。
#解決策
以下のサイトのようにコンフィグできちんとキャッシュに関する設定をすればキャッシュを無効化できました。
[Nginx キャッシュさせない disable cache 無効化 | システムガーディアン株式会社](https://sys-guard.com/post-14426/)
#終わりに
久しぶりにサーバー触ったのでLinuxのコマンドすら忘れていましたがなんとかWebサーバーをたてることはできました。
別にWebサイトを作るわけでもないのですが勉強がてらサーバーたてて、実際にサイトのデザインをしてみようと。
キャッシュは今回のような事象が発生するのであまりいい印象はないですね。
そもそもデフォルトでキャッシュを無効にしておいて欲しいです。
Alibaba CloudのSDKについて  ～.NET編～

# Alibaba Cloudから提供されているSDKについて
Alibaba Cloudから、製品によってSDKが提供され、言語別にリンクがまとめられています。
中国語サイトのため、翻訳してご利用ください。
[各種SDK一覧](https://develop.aliyun.com/tools/sdk#/java)

殆どのSDKはGitHubで公開されているので、リアルタイムで開発言語やフレームワークのバージョンなど確認しやすくなっています。
[Alibaba CloudのGitHub](https://github.com/aliyun)


# .NETのSDKについて
普段C#や.NET Coreを使って開発しているので、SDKの開発状況を見てみました。
[GitHubで公開されている.NETのSDK](https://github.com/aliyun/aliyun-openapi-net-sdk)

SDKを利用する際の必要最低限の条件として

* .NET Framework 4.5 以上
* .NET Standard 2.0 以上
* C# 4.0 以上

と記載されています。
まだ.NET Coreには対応していないみたいですね。
対応して欲しいなぁ。

最近更新されていたプロジェクトの.csprojを見てみると

```
<TargetFrameworks>netstandard2.0;net45</TargetFrameworks>
```

となっていました。(2020/04/26現在)

.NET Standard2.0に対応しているので、.NET Coreは2.0まで対応できると思います。
(2020/04/26時点では、.NET Coreは3.1.3が最新版です)
.NET Standardと.NET Framework、.NET Core等のバージョン対応表は[こちら](https://github.com/dotnet/standard/blob/master/docs/versions.md)


ちなみに、NuGetでもSDKが提供されているので、Visual Studio等で開発する際に利用しやすくなっています。
[Alibaba Cloud SDKのNuGet](https://www.nuget.org/profiles/aliyun-openapi-sdk)


# まとめ
SDKは、開発環境や言語のバージョンなどを確認してから利用しましょう！
公式ドキュメントに記載されている内容より、SDKが更新されている可能性もあります。
また、GitHubに公開されているので欲しい機能や改善ポイントはissueを書いたり、もしくはご自身で開発してプルリクを出して貢献することもできます。
私もチャレンジしてみたいなと思いました。
[rails]カート内の同じ種類の商品をまとめて表示する

railsのカート機能についてです。
すでにカートにある商品を、追加した場合なのですが、
数量表示のみを変更することができたので記しておきます。

具体的な方法としては、すでにカートにある商品がさらに追加されたときには、カートにある商品の数量を変更してupdateするようにしています。

```ruby:cart_items_controller
def create
    @cart_item = current_user.cart_items.build(cart_item_params)
    @cart_items = current_user.cart_items.all
end
```
すでにカートにある商品の情報が知りたいので、カートの商品を全て取ってきます。

```ruby:cart_items_controller

def create
    @cart_item = current_user.cart_items.build(cart_item_params)
    @cart_items = current_user.cart_items.all
    @cart_items.each do |cart_item|
      if cart_item.item_id == @cart_item.item_id
        
      end
　　end
end
```

カート内の商品と新しくカートに追加する商品で同じものがあるかどうかを探すために、each文で回してあげ、同じ商品があったときはカート内の同商品の数量を変更してあげるようにします。
すでにカートに入れてる数量と新しく追加した数量を足した数量を、
new_quantityとしてupdateしてみたら動きました。

```ruby:cart_items_controller

def create
  @cart_item = current_user.cart_items.build(cart_item_params)
  @cart_items = current_user.cart_items.all
  @cart_items.each do |cart_item|
    if cart_item.item_id == @cart_item.item_id
      new_quantity = cart_item.quantity + @cart_item.quantity
      cart_item.update_attribute(:quantity, new_quantity)
      @cart_item.delete
    end 
  end
  @cart_item.save
  redirect_to :cart_items
end
```

以上になります！
もっといいやり方があれば教えて下さい！
phpアプリをherokuにデプロイ→エラー　私がハマったポイント。

「おいおいにもデプロイできないのかよ、、、」と自分に幻滅していましたが、粘ってエラー解決しました。
自分用で書き残します。

# sqlファイルの読み込み
docker環境で開発していた際に使っていたDBをsqlファイルとしてエクスポートし、これをherokuでも使いたいなーと思っていました。
herokuのDBはpostgreSQLしかないもんだと思っていたので、postgreSQLを使おうとしていたのですが、これではMySQLが使えないのですね。
DBに関する知識に疎く、ここで時間を食ってしまいました。

どうやらherokuにおいてMySQLを使うならclearDBらしい。というわけでこれを使いました。
clearDBをアドオンに追加したらば、
http://hhmmm.hateblo.jp/entry/2016/02/15/204638
を参考にSequeｌ Proと連携。sqlファイルもカンタンに読み込めましたし、DBの操作・閲覧がカンタンにできるようになりました。

# ログイン機能が使えない
ログイン機能を付したアプリケーションでしたが、ログインをするとエラーに。
？？？？とおもってずっと苦戦していましたが、どうやらherokuでは`mb_strlen()`が使えないらしい。
バリデーションチェックのときにこの関数を使っていたため、エラーになったのだとか。
やはり、開発中は`ini_set('display_errors', 0);`にしておくべきですね;; 

最初はDBへの接続がうまくいかないものだと勝手に思い込んでしまい、環境変数が間違ってるんじゃないかーとかそもそもDBと連携できてないんじゃないかーとかいらんことばっかりやっていました。

これで解決しました。↓
https://qiita.com/taro-hida/items/f677abe2bc3b689002b3
Unityを使ってクリエィティブなゲームを作れるようになるまで。（2日目）

題名を(〇日目)のようにしました。
色んなゲームを作る予定ですので、私の成長過程を楽しんでもらえたら幸いです！:relaxed:

# 今日は何を作るの？
ネットサーフィンをしていると、なんと**N予備校の受講が無料**らしいとの事！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625289/d3ef8513-6451-bbdb-845e-0ac2832d1dbb.png)
引用：N予備校
　　https://www.nnn.ed.nico/

中を漁ってみると、なんとunityのコースが！
早速受講してゲームを作ろう！


# 作成したゲームはこれ
![unity_chan.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625289/59be2e4a-94fd-f985-c360-8432a631b054.gif)

受講したコース通り、キャラクターの後ろに付いている赤い球を箱にぶつけるゲームを作りました。

# 学んだこと
* Terrainオブジェクトを使用して、簡単に地形が作れる。
* Spring jointでキャラクターと玉の位置関係、バネの力で制御することができる。
* scriptの中のpublicで定義された変数・クラスは、GUIから代入することができる。
* ↑の仕組みであるため、script内にconstructorは持たない。
Intellij IDEA でタブを多段表示にする方法

#環境
Intellij IDEA 2020.1

#公式サイト
下記に方法が書いてあるが設定画面がなかったのでメモとして。
英語のままの人向けに。
https://pleiades.io/help/idea/settings-editor-tabs.html

#設定方法
Preferencesに進む。
「Show tabs in one row」のチェックを外せばOK。
「Apply」ボタンを押せば反映される。

<img width="1109" alt="スクリーンショット 2020-04-26 17.31.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624951/0b95879a-04d0-05f2-e5cf-b80c417aff79.png">
【Unity】UIの透過をスクリプトからまとめて調整するCanvasGroup

#環境
Unity 2019.3.7f1

#はじめに
ボタンの透過率を変更しても
ボタンに付けているテキストの透過率は一緒に変化しません。

まとめて透過率を変更したいときはCanvasGroupが便利です。



#手順
1.透過値を変更したいUIを適当オブジェクトにまとめる
2.まとめたオブジェクトにCanvasGroupコンポーネントを追加
3.スクリプトからCanvasGroupコンポーネントを取得しアルファ値を変更する
　CanvasGroup型の変数.alpha=0f～1f;

#具体例
3つのボタンの透過値を実行後50％に変更していきます。

**1.ボタンを3つ作成**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/19565330-5775-e973-2925-5553e80bbd39.png)
　
**2.CanvasにCanvasGroupコンポーネントを追加**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/8c829b06-7e06-b8ad-1cff-dd5893291a9c.png)

CanvasGroupコンポーネントが追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/745ba045-82fc-2dd2-ab6e-654a79a69c94.png)

**3.スクリプト作成**
スクリプトを新規作成します。スクリプト名はCanvasTestとしました。


```CSharp:CanvasTest
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//UIを使うとき追加

public class CanvasTest : MonoBehaviour
{
    [SerializeField] private CanvasGroup a;//CanvasGroup型の変数aを宣言　あとでCanvasGroupをアタッチする
        
    void Start()
    {
        a.alpha = 0.5f;//変数aのalpha値を変更
    }
}
```

**4.空のゲームオブジェクト作成＆スクリプトをアタッチ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/bd802526-4d18-0be6-1790-aeef521b42d9.png)

**5.スクリプトにCanvasGroupをアタッチ**
Canvasを空のオブジェクトのスクリプトの変数a欄にアタッチ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/ab32e983-61d1-913a-1780-7fefdb0ff7a6.png)

　
CanvasGroupの場所を覚えさせることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/c7d57a30-38c1-3bb9-c858-18311c88900c.png)

**6.実行結果**
透過率がまとめて変わりました～。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/0d072103-2ad0-6271-d44f-078c74620c5b.png)

#おわりに
個別の透過率変更とはサヨナラです♪
Herokuを使ってみた

#はじめに
適当にJSとかwebアプリケーションを勉強している学生が記録するために使っているので,あまり内容は期待しないでください。とりあえず今回はHTTPサーバをHerokuを使って公開してみます。

#1.Herokuとは
webサービスを動かせるプラットフォームを提供してるサービスらしい。小規模なら無料で使えるとのこと。

#2.Herokuのアカウント作成
とりあえずアカウント作成
https://jp.heroku.com/
でいろいろ個人情報を流出してきます。

ここで開発言語を選択するらしいですがまぁJS程度しかやってないのでNode.js一択ですね。

ドラえもんが引っかかってしまう私はロボットではありませんチャレンジをクリアしてメールアドレス認証。パスワード設定したら登録完了です。いやぁ非常にスムーズ,毎回どこかでつまづくんじゃないかと冷や冷やしながら登録してます。

#3.Heroku CLIをインストール
順番がゴチャゴチャしてきましたがherokuコマンドを利用しなきゃと思ったらHeroku CLIが必要らしい。まぁあるあるというか常識なのだろう。今回はUbuntuにインストールしちゃうのでiTerm2で仮想環境を起動するよ。

起動したところで
1.Virtual Box(バーチャルボックス)
2.Vagrant（ベイグラント）
という2つのソフトウェアを使った仮想環境でUbuntuを使用します。
```cd ~/vagrant/ubuntu
vagrant up
vagrant ssh
```
Ubuntuがインストールされたディレクトリに移動。vagrant upは仮想的なPCにインストールされたUbuntuを起動するコマンドで,vagrant sshはVagrantの仮想マシンがセットされている状態でSSHに接続します。

仮装環境を起動して以下のコマンドを実行。

```sudo snap install --classic heroku
```
sudoは管理者として実行するコマンド。
snap install --classicはsnapパッケージのコマンドで,snappyというUbuntu向けに開発されたパッケージ管理システムの一部らしい。Snapには、ソフトウェアを隔離してセキュリティを高めるサンドボックス機能があるが,この制限をかけると使い勝手が悪くなるパッケージがあるので、 そのリスクを承知してインストールをするために –classic オプションを追加してます。

まぁそんなこんなでHeroku CLIがインストールされましたね。

#4.Heroku CLIからHerokuにログイン
というわけでHeroku CLI から Heroku にログイン。

```heroku login -i
```
コンソールで以上を記入してログインします。

#5.Herokuで実際にデプロイしてみる(失敗)
とりあえずコンソールで使用したいファイルのディレクトリに移動します。
```cd node-js-http-3016```
そして以下のコマンドでHeroku 上で動かすための設定ファイルを作成します。
```echo "web: node index.js" > Procfile
```
echoは文字をそのまま出力するコマンド。ProcfileはHerokuがアプリを動作する時Herokuのプラットフォーム上にあるWebアプリがどのようなコマンドで実行されるのかを記述するファイルのこと。Webアプリを動かす指示書みたいなものらしい。いろいろ書き方があるみたいだけどとりあえず割愛。

##はいここで問題発生
Herokuではサーバー上へソースコードを配置するためにGitを利用している！！！
そのため、Heroku での実行前にGitのリポジトリにコミットすることが必要！！！

......まぁやりますよ、知らなかった自分が悪い

いろいろ調べた結果gitとリポジトリを保存しているgithubを連携する必要があるらしい。今回はSSHを使うのでsshを追加した後,新しい公開鍵情報をコンソールに表示させ,それをコピー。githubの右上アイコンからsettingという項目を表示し,SSH and GPG keysを選択してnew ssh keyでssh keyを追加。この設定の時に先ほどの公開鍵情報が必要。
まぁそんなこんなで追加が無事終了し,これでGitHubとマシンがSSHを利用した暗号化通信ができるらしい。もうなんか細かいことはわからなくなってきた。

#6.試しにGithubからクローンをしてみる
作ってきたリポジトリのclone or downloadの欄をクリックしSSHのリンクをコピー
コンソールに
```git clone SSHのリンク
``` 
を記述。これでなんとかgithubからgitにクローンできた様子。さすがです
```git pull origin gh-pages
```
を行ったところエラーなども表示せず,Already up-to-dateという感じでできてるっぽい。

#今度こそ実際にデプロイ!!
```heroku create
```
これでサーバを用意して
```git push heroku master-2020:master
```
以上でデプロイを実行!!
```remote: Verifying deploy.... done.
```
実行後にデプロイが完了したというお知らせ。まぁこれでなんとかデプロイできました。

実際のアプリケーションはというとなんか知らないけど問題がありそう。まぁそれについては今後考えます...とりあえずはお疲れ様でした


###おまけ1 : iTerm2とは
Terminal.appより簡単に便利な機能が使えるという噂のアプリ。実際のところTerminal.appすらまともに扱ったことがないので便利かどうかは不明。

###おまけ3 : Ubuntuとは
狭義ではカーネルに属すLinuxのOSとしての一つがUbuntu(Linuxディストリビュージョン)。PCとして使えたりする初心者におすすめしやすいものらしい（確証はないです）。


###おまけ2 : SSHとは
よく高校で使われるスーパーなんちゃらじゃない。どうやらSSHは一種の通信プロトコルらしい。
Laravelで ErrorException Creating default object from empty value というエラー

### エラーの原因
色々なケースでこのエラーは起こり得ますが、Laravelでこのエラーが出た時に多いパターンのひとつに「Soft Delete = 論理削除したデータ」を取ってこようとしてnullを取ってきてしまい、エラーになっているというものがあります。

```php:Product.php
// 実際のコード
// Productモデルにはソフトデリートが定義されている
namespace App\Models;

use Illuminate\Database\Eloquent\SoftDeletes;

class Product extends Model
{
use SoftDeletes;
}

// 加えてproductsテーブルにはdeleted_atのカラムに値が入っている
```

```php:ProductController.php
// id=1 のプロダクトが論理削除されている場合
// コントローラなどで該当のデータを取って来ようとすると...
$product = Product::find(1);
$product->name;

// 実行結果
ErrorException
Creating default object from empty value
```

つまり ```$product->name``` や大元の ```$product``` がnullになっているのに、それらに対して何かしらの操作をしようとして上記のエラーになる場合があります。

ということでDBからデータを引っ張ってくる時は、
- 該当のテーブルは論理削除を設定していないか？
- 該当のデータが論理削除されていないか？
を確認してみて下さい。



##### 論理削除
テーブルに```deleted_at```というカラムを持たせ、ここに日時が入ってるレコードは削除されたものとみなす。違う名前で```削除フラグ```のようなカラムを持たせる場合もあるが、Laravelのデフォルトでは```deleted_at```のカラムがその役割を担う。
このようなカラムがなく、データベースから完全にデータを削除する場合は```物理削除```と表現する。
（ご存知とは思いますが念の為。）

### 対策
このようなエラーを回避するには「論理削除のデータも含めて取得する」という操作が必要なので下記のように記載すれば大丈夫です。

```php
$product = Product::withTrashed()->find(1);
```

データにアクセスする際 ```withTrashed()``` を一緒に書けば、論理削除されたデータも検索して引っ張ってきてくれ、```ErrorException : Creating default object from empty value``` というエラーにはなりません。


##### 参考URL
[【Laravel5.8】Creating default object from empty valueを解決したい](https://nekorokkekun.hatenablog.com/entry/2019/07/20/103344)
[stdClassをnewしたらPHP Warning: Creating default object from empty value inとなったときの対応方法](https://qiita.com/ponsuke0531/items/3211dd78d1940b22eea5)
[PHP Warning: Creating default object from empty valueの原因と対応](https://leben.mobi/blog/php_warning_stdclass/php/)
[【php】 Creating default object from empty value](https://www.softel.co.jp/blogs/tech/archives/4966)
Ruby on Rails チュートリアル 14日目

##14日目
今日は、チュートリアルの10章をやりました。
ただ、テストしたときにfailuresが2つほどでていて確認を何度もしてもなおすことが出来ませんでした。
エラー文は、

```
  1) Failure:
SessionsHelperTest#test_current_user_returns_right_user_when_session_is_nil [/home/ec2-user/environment/sample_app/test/helpers/sessions_helper_test.rb:11]:
--- expected
+++ actual
@@ -1 +1 @@
-#<User id: 762146111, name: "Michael Example", email: "michael@example.com", created_at: "2020-04-26 11:46:57", updated_at: "2020-04-26 11:46:57", password_digest: "$2a$04$DZohi.XKs/8NYwsPk2KL0unKTXpv4ZK5.Fp.50ILSya...", remember_digest: "$2a$04$LxaSQdImJKy8LC3hG8bvau2qzKeRB2cRtpAhgalpXih...", admin: true>
+nil


  2) Failure:
UsersEditTest#test_successful_edit_with_friendly_forwarding [/home/ec2-user/environment/sample_app/test/integration/users_edit_test.rb:24]:
Expected response to be a redirect to <http://www.example.com/users/762146111/edit> but was a redirect to <http://www.example.com/users/762146111>.
Expected "http://www.example.com/users/762146111/edit" to be === "http://www.example.com/users/762146111".

```
と出ていたので下の2つを主に確認していました。

```test/helpers/sessions_helper_test.rb

require 'test_helper'

class SessionsHelperTest < ActionView::TestCase

  def setup
    @user = users(:michael)
    remember(@user)
  end

  test "current_user returns right user when session is nil" do
    assert_equal @user, current_user
    assert is_logged_in?
  end

  test "current_user returns nil when remember digest is wrong" do
    @user.update_attribute(:remember_digest, User.digest(User.new_token))
    assert_nil current_user
  end
end

```

```test/integration/users_edit_test.rb

require 'test_helper'

class UsersEditTest < ActionDispatch::IntegrationTest

  def setup
    @user = users(:michael)
  end

  test "unsuccessful edit" do
    log_in_as(@user)
    get edit_user_path(@user)
    assert_template 'users/edit'
    patch user_path(@user), params: { user: { name:  "",
                                              email: "foo@invalid",
                                              password:              "foo",
                                              password_confirmation: "bar" } }

    assert_template 'users/edit'
  end
  
  test "successful edit with friendly forwarding" do
    get edit_user_path(@user)
    log_in_as(@user)
    assert_redirected_to edit_user_url(@user)
    name  = "Foo Bar"
    email = "foo@bar.com"
    patch user_path(@user), params: { user: { name:  name,
                                              email: email,
                                              password:              "",
                                              password_confirmation: "" } }
    assert_not flash.empty?
    assert_redirected_to @user
    @user.reload
    assert_equal name,  @user.name
    assert_equal email, @user.email
  end
end

```

修正しなければいけないところを教えていただけると嬉しいです。
Pythonパッケージ管理ツール個人的まとめ

同種の記事は数多くあるが、今となってはマイナーなツールが混じっていたり、役割の違いがわかりにくかったりしていたので、簡単にまとめ直した。

# 機能まとめ
[Pyflow](https://github.com/David-OConnor/pyflow)による比較表を書き直した。pipとvenvはPython 3.4以降標準で付属している。

|ツール|パッケージインストール|依存関係解決|Pythonバージョン管理|仮想環境構築|ビルド・パブリッシュ|
|---|---|---|---|---|---|---|
|[pip](https://docs.python.org/ja/3/installing/index.html) |〇  |  |
|[venv](https://docs.python.org/ja/3/library/venv.html)|  |  | | 〇||
|[Anaconda](https://sandbox.anaconda.com/)|〇 |〇  |〇|〇
|[pyenv](https://github.com/pyenv/pyenv)([-virtualenv](https://github.com/pyenv/pyenv-virtualenv))|||〇|(〇)
|[Pipenv](https://github.com/pypa/pipenv)|〇|〇||〇
|[Poetry](https://github.com/python-poetry/poetry)|〇|〇||〇|〇
|[Pyflow](https://github.com/David-OConnor/pyflow)|〇|〇|〇|〇|〇

# 個人の感想
## Anaconda
- PATHを上書きする怪しい仕様があり、Homebrewと競合したりアンインストールに苦労したりする
- venv同様仮想環境を使うときにいちいち`activate`する必要がある
    - これらの問題があるのでpyenv経由で使うのが良い
- `conda install`でパッケージが見つからないときにanaconda cloudで検索する手間が発生する
- Anacondaを推奨しているパッケージを使いたいときは使う

## pip + pyenv (+pyenv-virtualenvプラグイン)
- Pythonバージョン管理に関しては最強
    - AnacondaやPyPyも扱える
- pyenv-virtualenvによる仮想環境管理もとても楽
- 仮想環境をプロジェクト間で使い回しやすい?
- (Windows環境は知らん)

## Pipenv
- 動作がどんどん遅くなっていく...
- 別バージョンのPythonを使いたくなったらpyenvと併用

## Poetry
- コードを配布する予定があるときは良さそう
- 別バージョンのPython (ry

## Pyflow
- まだまだ開発中という感じ
Git Hook pre-commit プログラミングの仕組みと解説

Git Hook pre-commit プログラミングの仕組みと解説
===

# About Hook

Hookとは、ある機能を実行する前後に、ユーザーにプログラムを実行する機会を与える機能です。

git hook とは、commit や push などの命令をする際、命令が実行される前や後に、シェル・スクリプトを実行できる機能です。

pre-commit や pre-push のポピュラーな機能として、**クラウドサーバーの秘密キーの公開を抑止する**というのがあります。

＊ **pre** とは、 **previous** の略で、〇〇する前という意味です。

# About git hook

リポジトリーをクローンしたディレクトリーには、`.git` という隠しディレクトリがあります。そのディレクトリーの中に、 `hooks` というディレクトリーがあり、ここに git hook で実行したいシェル・スクリプトを作成・設置します。

gitの特定のコマンド（ commit や push ）を実行すると、`.git/hooks` ディレクトリーに保存されているシェル・スクリプトが実行されます。これが git hook です。

保存したファイル名で hook されますので、任意のファイル名は使えません。

よく使われる git hook には以下のようなものがあります。

 * master に push したら、自動でサーバーにデプロイする
 * master を更新したら、自動でユニットテストが実行される
 * push する前に、特定の文字列やフォーマットをチェックする

できることの一覧は、***[公式サイト](https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-Git-%E3%83%95%E3%83%83%E3%82%AF)*** や ***[git hook はじめの一歩](https://qiita.com/mhimuro/items/adfc4e5a168d2d9295ae)*** をご覧ください。
サンプルファイルは、 `.git/hooks` ディレクトリに入っています。
何ができるか、どのように使うか、サンプルファイルをざっと眺めるのが一番勉強になります。個人的には git diff のオプションについて、とても参考になりました。

# Point

**git hook用の命令や変数などはありません。** （多分😅）
コミットやプッシュのタイミングで、シェル・スクリプトが実行されるだけです。
スクリプトでは、既存のgitのコマンドを使って、更新されたファイルの一覧を取得したり、差分をチェックしたりします。

# Important - 強制コミット

例えば、`var_dump` という文字列を発見したら、commit や push を禁止するというスクリプトを書いたとします。しかし、`var_dump`が必要で、どうしてもコミットしたいという場合があります。

そのような場合は git hook をスキップする（実行しない）というオプションを付与します。具体的なオプションは、`-n`（`--no-verify` の略） ですが、`git commit` の場合は、-mの前に付与する必要があります。

```sh
git commit -nm "Commit message"
```

**↑nは、mの前に付ける。逆だとエラーになります。**

# Script

今回は、 `var_dump`、`print_r`、`exit` が記述されていたら **push** できないというスクリプトを書きました。

スクリプトが、1を返すと命令は中断され、**pre-commit** の場合はコミットが実行されません。

`vi .git/hooks/pre-commit`

```sh:pre-commit
#!/usr/bin/env bash

# Case sensitive
shopt -s nocasematch

# Change delimiteir to only LF
IFS=$'\n'

# Get target files
files=`git diff --cached --name-only`;

# Loop for each file name
for file in $files
do
  # Get diff lines
  LINES=`git diff --cached "$file"`

  # Loop for each lines
  for LINE in $LINES
  do
    # Skip delete line
    if [[ $LINE =~ ^- ]]; then
      continue
    fi

    # Search deny word
    if [[ $LINE =~ var_dump|print_r|exit ]]; then
      # Error message
      echo
      echo ".git/hooks/pre-commit : $file --> ${BASH_REMATCH[0]}"
      echo
      echo "$LINES"
      exit 1
    fi

  done # end each lines
done   # end each files

# No problem
exit 0
```

# 余談

シェル・プログラミングは普段おこなわないので、PHPで書きたいと思ったのですが、シェバンを `#!/usr/bin/env php` として実行したところ、上手くいかずに断念しました。

また、シェルの正規表現でハマりました。

## そもそも正規表現のやり方が分からない。

`if [[ $LINE =~ ^.+$ ]]` という記法で正規表現が使えます

## for in ループで、スペース毎で区切られる → 行毎で取得できない

git diff の差分を for ループしようとしたら、差分が **『行』** 毎ではなく、**『単語』** 毎に変数へ代入された。

シェルの区切り文字のデフォルトは、改行・タブ・スペースだったので、改行（LF）だけに変更した。

```sh
# Change delimiteir to only LF
IFS=$'\n'
```

## 大文字・小文字の区別（ケースセンシティブ）をしない

```sh
# Case sensitive
shopt -s nocasematch
```

# こちらの記事が参考になりました。
https://qiita.com/myblackcat7112/items/5e8205f1b5161a1f8590
https://qiita.com/kazu56/items/83340a2e284298b9e237
【しくじり先生】ThinkPadキーボードのキートップを外して掃除した件

# しくじり先生が伝えたいこと
Thinkpadキーボードのキートップ外すなら、
- めっちゃ爪折れやすいから気をつけろ！
- できればパンダグラフは残しておけ！
- ヤフオクとかメルカリの中古部品、意外と高いぞ！

# キートップの外し方
## 公式HPの確認
まずは、[Lenovoの公式HP](https://support.lenovo.com/jp/ja/solutions/ht104954)を確認しましょう。

## しくじり先生の失敗談
### 解決したかった課題
糖分を含む飲料をキーボードにこぼしてしまった後、
Enterキーを押すと、べとっと押し込まれ、うにょっと戻るようになってしまった。
Enterキーを外して、内部のべたべたしたスライムを除去したい。

### やったこと
1. Enterキーの上側に人差し指の爪をひっかけ、引っ張るとキートップが外れた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108813/5994114e-287e-6784-9188-3fb5c1688ec3.png)

2. パンタグラフを外した。
このとき、２つのパーツからなるパンタグラフがばらけてしまった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108813/70bc974a-3965-9cda-6193-677e2fc7481c.png)

3. 掃除した。
4. パンタグラフを収納（部品が小さいのでちょっと難しい）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108813/f31e5790-f8ef-7099-ae9a-a953701f1ddd.png)
5. キートップを上に置いて、押し込む。
   一応、くっついた。重たさはないけど、打音が大きくなった(´;ω;｀)

## 部品だけ購入できるか？
Thinkpadから公式な販売もありそう（キートップだけ購入可能かは不明）。
[lenovoへ部品を注文する方法](http://thinkpadweb.com/lenovo%E3%81%B8%E9%83%A8%E5%93%81%E3%82%92%E6%B3%A8%E6%96%87%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/)

メルカリやヤフオクでキートップのばら売りをしている。
安いものはキートップ一つで316円。高いと、800円近くする場合も！
キーボードは壊れても、そのまま捨てずに、ばらして売るとお得！？
【React/laravel】axiosによる非同期のAPI callの結果を待ってからStateに値を入れたかった【小説印刷支援サイト】

# 承前

小説を簡単に同人誌の形にできる印刷できるWebサイトを作りたいと思っている。
今回はその前段階として、印刷する際のプレビュー画面を作成していたときに躓いた話。

# 事象

直前まで動いていたReactコンポーネントが急にエラーを吐き始めた。

```
Uncaught TypeError: Cannot read property 'chapterNumber' of undefined
    at RenderUi (index.js:70616)
    at renderWithHooks (index.js:48209)
    at mountIndeterminateComponent (index.js:50888)
    at beginWork (index.js:52002)
    at HTMLUnknownElement.callCallback (index.js:33594)
    at Object.invokeGuardedCallbackDev (index.js:33643)
    at invokeGuardedCallback (index.js:33698)
    at beginWork$1 (index.js:56609)
    at performUnitOfWork (index.js:55560)
    at workLoopSync (index.js:55536)

```

`chapterNumber`は`ChapterContent`のメンバ。
`ChapterContent`は`NovelWithContents`のメンバ。

# 調査

`ChapterContent`のインスタンスが空だった。
なんなら`NovelWithContents`のインスタンスも空だった。
('､3_ヽ)_


# やりたかったことと原因

## やりたかったこと



## `NovelWithContents`がなぜ空なのか

axiosで取得したJSONモデルデータが詰まっている予定だったが、ログを出してみたら問題が分かった。
* `componentDidMount()`はComponent描画後に呼ばれるため、Component描画時にココで取得する予定の値を参照してしまうとエラーになる。

その後、もう一つの問題も分かった。
* axiosは非同期処理をするので、Constructorなどで事前に値を取得しようとしてもデータ取得処理が間に合うかどうか分からない（間に合わない）

```typescript

    componentDidMount() {
        console.log(this.state.novelId+"sssssssssssssssssssssssss");
        axios
            .get(/*API CALL*/)
            .then(response => {
                let data: NovelWithContents = response.data;
                console.log(response.data);
                this.setState({ contentsJson: data });
            })
            .catch(() => {
                console.log("通信に失敗しました。")

            });
    }

```


## 結論

前処理の部分で、データが無いクラスのプロパティを参照してエラーを吐いていた。



# 対処

## 失敗した方法

`constructor`の`state`初期化後に`axios`以下を移してもうまく行かなかった。
`render`に移しても同様。


## うまく行った方法

色々やった。

* 前処理後の値をStateにして初期値を与えた。
    * 初回のRender時、即ちaxiosが間に合ってない時に空でエラーを吐かなくなった。
* 初期化処理をaxiosの`finally()`処理に集めた。
    * これによりデータ取得と初期化処理の順番の整合性を取りながら、非同期処理という体は崩さずに済んだ。
* 上記を可能にするために全体的にリファクタリング

```typescript

    componentDidMount() {
        axios
            .get(/*API CALL*/)
            .then(response => {
                let data: NovelWithContents = response.data;
                console.log(response.data);
                this.setState({ contentsJson: data });
            })
            .catch(() => {
                console.log("通信に失敗しました。")

            }).finally(()=>{
                let hoge="";
                //前処理。
                });

    }

```


結局3時間くらいハマってしまった。

# 反省

* Reactへの理解度が浅い中で始めたProjectだったので、設計はあとでキチンとやりなおす。

# 今回実現した機能

小説のページング

# 小説印刷支援サイト

やや遅れ気味。7月リリースを目指したい。
プリコンパイラ～ビルド～リリースまでのざっくりまとめ


まだプログラミング言語についてもよくわかっていない中、そもそもの業界用語を知らないという問題もあり、出てくる言葉は日々謎だらけです。自分用辞書として随時更新していきます。

#リリース偏
今回は、実際にソースコードを書いたあとにどのような作業を経て、ユーザが利用できるようになるのかをざっくりまとめました。

##プリコンパイラ
pre（前の）＋ compiler（コンパイラ）の意味のとおり、コンパイルされる前に行う準備のこと。コンパイルだけでは、読み込むことができない文法などがある。プリコンパイラを行うことで、文法をコンパイルが理解できる文法に変換することができる。
※コンパイルを行うソフトウエアを「コンパイラ」と呼ぶ

##コンパイル
人間が日々書いているソースコードは人間用の言葉で書いたテキストで記述されたプログラムである。コンピュータに理解させるためには、ソースコードをコンピュータ用の言葉に変換しなければならない。この変換作業をコンパイルと呼ぶ。コンパイルされたファイル（ソースコード）は「オブジェクトファイル」と呼ばれる。
ちなみに、コンパイルするにはコンパイラというソフトウェアが必要になる。それぞれの言語に対応したコンパイラがあるので必要なものを選ぶこと。

##リンク
コンパイルされた複数のファイルは、次にリンクという作業が行われ、実行形式のファイルに情報がまとめられる。いくつコードを分けて書いていようが、実際に実行するときはひとつにまとめられる必要があるのでリンク作業が必須となる。ちなみに、リンクされたファイルはリンカと呼ばれる。

##ビルド
上記で紹介したコンパイル～リンクまでの一連の流れのことをビルドと呼ぶ。
つまり、人間が書いたソースコードはただ書いてリロードしたり、保存したりするだけでは動かないということ。
今までビルドもコンパイルもしたことないけど動いたよ！という場合、なんらかの形で上記作業が補完されている可能性がある。つまり、人間の見えない部分で上記の工程がきちんと動いているということになる。

>【補足】
スクリプト（script）たるプログラム（JavaScript、PHPで作ったプログラムなど）があり、そのプログラムに関しては、コンパイル作業はコンピュータが裏で作動しているので、人間は書いてすぐ実行することができる。ように感じる。

##デプロイ
ビルドされたファイルを実際に利用可能な状態に配置する。つまり、テスト環境や本番環境に置いて、ユーザがアクセスできる環境にする。使ってもらうためには、みんなが使うことができる環境に置く必要がある。

##リリース
実際にユーザが利用することができるように、本番環境に配置すること。

##まとめ
ざっくりまとめるとこんな感じ
>【人間】プログラミング言語を使ってコードを書く
（自分のPCでちまちまとコードを書く）
↓
ファイルが**コンパイル**される（オブジェクトファイル）
（人間の言葉を機械語に翻訳）
↓
コンパイルされた複数のファイルたちが**リンク**される（リンカ）
（たくさんあるファイルをひとつにまとめる）
↓
【PC】送られてきたファイルを読み込む
（できあがったアプリケーションを読み込む）
↓
ファイルが実際に利用できるように**デプロイ**する
（ユーザが使える場所におく）
↓
**リリース**してユーザがアクセスできる状態にする
（使ってくれ状態）


##参照元
https://proengineer.internous.co.jp/content/columnfeature/6308
https://www.atmarkit.co.jp/ait/articles/1105/23/news128.html
関数に出てくる『 _ 』って何？

##基本的に関数を呼び出すには引数ラベルが必要

_ が用いられるまでの流れを追っていこうと思います。

例として、縦の長さと横の長さとして整数型の2つの引数を持ち、面積として2数の積を出力する関数を考えます。
最も基本的な書き方は

```swift
func area(width:Int, height:Int) -> Int {
   return width * height
}
```
そして呼び出す時には

```swift
area(width:3, height:4)
```

としなければなりません。
ここで***area(3,4)***とすると`Missing argument labels 'width:height:' in call`と怒られてしまいます。




##関数名(引数,引数)とするためには
なんとかしてarea(3,4)の形で呼び出したい...

```swift
func area(_ width:Int, _ height:Int) -> Int {
    return width * height
}
```

のように_ を用いることで

```swift
area(3,4)
```
で呼び出せるようになります。

ワイルドカードと呼ばれる_には他にも使い方があるようなので、調べて行こうと思います。
Excel の 5digit を日付に戻す方法

エクセルファイルで日付が 5 digit で表示された時に、日付を計算する方法です。
![date_apr26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/8af841ca-cfa0-e603-a4e7-084b9a3cfe03.png)

```py
#! /usr/bin/python
#
from dateutil.parser import parse
from datetime import timedelta
#
# ------------------------------------------------------------------
def convert_proc(tt):
	pp = parse("1900-1-1") + timedelta(days = tt - 2)
	return pp
# ------------------------------------------------------------------
tts = [43883,43915,43916]

for tt in tts:
	pp = convert_proc(tt)
	print(tt,pp)
# ------------------------------------------------------------------
```

実行結果

```text
$ ./convert.py
43883 2020-02-22 00:00:00
43915 2020-03-25 00:00:00
43916 2020-03-26 00:00:00
```
iroha Boardをインストールしてみる

# iroha Boardとは？
下記は公式サイトからの引用です

>
iroha Board は日本で生まれたオープンソースのeラーニングシステム(LMS)です。無料でダウンロードおよび利用が可能です。シンプルでフラットな構造と、使いやすいユーザインターフェイスが特徴で、手軽に独自のeラーニングシステムが構築できます。 既に多くの企業、学校で iroha Board を活用した eラーニングが実施されています。

https://irohaboard.irohasoft.jp/intro/


操作が簡単そうなので、ちょっと期待できそう。

# ダウンロード

ダウンロードは下記より可能です。
https://irohaboard.irohasoft.jp/files/irohaboard_v0.10.3.zip

# インストール
https://irohaboard.irohasoft.jp/download/
インストール要件
>
◆ サーバ環境
PHP : 5.4以上
MySQL : 5.1以上
Web サーバ : Apache, Nginx
Apache モジュール : mod_rewrite, mod_headers
PHP モジュール : mbstring, pdo_mysql
>
※ 2018.12.17 動作環境を変更いたしました
旧動作環境 (～v0.9.19)：PHP5.3以上(PHP7を除く), CakePHP2.7/2.8, MySQL 5.0以上
新動作環境 (v0.9.20～)：PHP5.4以上(PHP7を含む), CakePHP2.10, MySQL 5.1以上


## MySQLのDBを作成
事前に iroha Board 用に空のデータベースを作成しておく必要があります。推奨文字コード : UTF-8です。各サーバで準備しておいてください。


## データベースファイルの修正

データベースファイル(app/Config/database.php)を修正します。

>
※ 改行コードLFに対応しているテキストエディタを使用してください。
public $default = array(
    'datasource' => 'Database/Mysql',
    'persistent' => true,
    'host' => 'localhost', // ホスト名
    'login' => 'root', // MySQLのログインID
    'password' => '', // ログインIDのパスワード
    'database' => 'irohaboard', // 新規に作成したデータベース
    'prefix' => 'ib_', // 変更しないでください
    'encoding' => 'utf8'
);

https://ドメイン名/install/ にアクセスする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274506/94a0bc5b-3dad-f953-f854-6e2e2e1a19f7.png)

パスワードを登録し、管理画面にログイン。コンテンツを作っていけばOK。
研修でのgitコマンドまとめ

**研修でCRUDアプリを作成してレビューして完成させるまでのgitのコマンドを流れに沿ってまとめました。(備忘録用)**

まずCRUDアプリを作成するまでの流れを簡単に
1. githubでレポジトリ作成
2. ローカルでgit cloneしてディレクトリ作成
3. rails new で新規作成

#基本的な流れ

1.ブランチを切って作業する
2.作業完了後ファイルの変更箇所をリモートブランチにプッシュする
3.PRを作成してレビューをしてもら
4.修正依頼 or LGTM
5.修正依頼の場合、指摘箇所を修正してプッシュ　→2へ
6.LGTMの場合githubでマージしてその内容をmasterへpullする

```
1.ブランチを切って作業する
git branch -b 新ブランチ名　master　

2.作業完了後ファイルの変更箇所をリモートブランチにプッシュする
git add .

git commit -m 'メッセージ'

git push origin ブランチ名
```

3.PRを作成してレビューをしてもら

4.修正依頼 or LGTM

5.修正依頼の場合、指摘箇所を修正してプッシュ　→2の内容とほぼ同じ


6.LGTMの場合githubでマージしてその内容をmasterへpullする

```
# masterブランチへ移動
git checkout master

git pull origin master
```
その後にまたブランチを切って次の作業へ(1~6の繰り返し)

**ここまでが基本的な流れ**

#ケース1:レビューしてもらっている間に次の作業に取り掛かる

```
git branch -b 新ブランチ名　orgin/現作業ブランチ名
```

新ブランチで作業中に前の作業ブランチでLGTMをもらいmasterにmergeされた内容を取り込む

```
#変更を取り込む
git rebase master
```

コンフリクトが起きなければそのままでOK！
コンフリクトが起きたら解決(私の場合はVScodeで解決)してcontinue

```
# コンフリクト解決して
git add .
git rebase --continue

# 下記コマンドでrebaseを取り消すこともできる
git rebase --abort
```
#ケース2: pushしてPR作成後に微修正箇所が見つかった


```
#softオプションをつけてcommitの取り消し
git reset --soft

修正完了後
git add .

git commit -m 'コミットメッセージ'

# すでにリモートにはコミットが存在しローカル環境とのコミットの整合性が取れないので
# force push で強制的にpushする　-fは要注意
git push -f origin ブランチ名
```
#ケース3: リモートブランチのコミットを取り込む

 #1ブランチから新たに#2ブランチを切って作業中に#1のレビューで修正がありそのコミットを#2のブランチに取り込みたい

```
git pull --rebase origin #1
```

#ケース4: コミットせずにブランチを切り替える
 #2で作業中に#1のブランチの修正依頼があり#2の変更ファイルをコミットせずにブランチを切り替える

```
変更をコミットせずに退避
git stash save

退避する際に新規ファイルが存在する場合
git stash -u

#1にブランチ切り替え
git checkout #1

#1の修正 add commit push完了　#2ブランチに戻る
git checkout #2

退避した内容を戻す
git stash pop スタッシュ名
```

他にもgit statusやgit logなどもありましたが今回はCRUDアプリ作成に直接関係しなかったので省きました。
以上が私がCRUDアプリ作成時に使ったgitコマンドです。


**最後までご覧いただきありがとうございます。**
Mac Laravel 500 server errorが出た話

## 〜宣伝〜

:::note info
個人開発でエンジニア専門マッチングサービスを開発しましたので、是非未経験からエンジニア目指している人！現役エンジニアで教えたい人！使ってみてください！

β版リリース記念キャンペーン中です！

10名様限定、抽選でお好きな技術本1冊プレゼント！
🎉当選者にはメッセージ差し上げます(送付の際に住所はお聞きしません)
詳しくはこちらから↓

https://x.com/dokupro01/status/1796837336145436846
:::
https://dokupro.dev/

# 目的

- 環境構築直後にローカル開発環境で500 server errorが出た話をまとめる

# エラー概要

- `$ php artisan serve`を実行してブラウザで[http://127.0.0.1:8000/](http://127.0.0.1:8000/)を確認したところ500 server error(下記のもの)が出力された。

    <img width="371" alt="BC3D17BD-A681-4E81-A83F-B40391C770AA.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/acd59de9-dc1e-9a97-6802-04f9f8becf25.png">


# 解決法

1. アプリ名ディレクトリを確認すると.envが存在していないことがわかった。
1. 下記コマンドを実行して.envを作成する。

    ```terminal
    $ cd アプリ名ディレクトリ
    $ cp .env.example .env
    ```

1. laravelアプリを再起動してブラウザを確認したところ下記の画面が表示されていた。
    - アプリケーションを暗号化するためのキーがない、もしくは設定されていないらしい。

    <img width="441" alt="479CDDAB-834B-4E21-B3AA-339B422263BE.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/1cd87e4b-3c25-1320-e69e-a05a68471aa7.png">


    
1. 下記コマンドを実行して鍵を作成した。

    ```terminal
    $ php artisan key:generate
    >Application key set successfully.
    ```

1. laravelアプリを再起動してブラウザを確認したところ下記の画面が表示されており、問題は解決した。

    <img width="442" alt="38C8B2E5-0A42-40B6-9A96-6C978FD4DD91.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/279e5723-061f-1e47-37c7-32e2822e5036.png">
YARDをGitHub Pagesでホストする

自分用のメモ

https://yusukeiwaki.github.io/puppeteer-ruby/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74571/6acad780-a02b-7cdc-05ba-001459decd7e.png)


### ドキュメントの出力先を doc(デフォルト) から docsに変更する

```
bundle exec yardoc -o docs/
```

### GitHub Pagesで設定する

docsフォルダがmasterブランチにある状態じゃないと選べないので注意。

<img width="841" alt="貼り付けた画像_2020_04_26_16_49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74571/7240e6b1-3f14-dd9a-af6f-d429733050ae.png">


### ドキュメント更新もれがないか確認する

CircleCIで以下のようにする。（適当）

```yaml
  check_yardoc:
    docker:
      - image: circleci/ruby:2.6.3-stretch-node
    executor: ruby/default
    steps:
      - checkout
      - ruby/bundle-install
      - run:
          name: yardoc
          command: bundle exec yardoc --out docs_by_circleci
      - run:
          name: diff docs_by_circleci v.s. docs
          command: |
            find docs_by_circleci/ -name *.html | xargs sed -z -i -e 's/<div id="footer">.*<\/div>//'
            find docs/ -name *.html | xargs sed -z -i -e 's/<div id="footer">.*<\/div>//'
            diff -bru docs_by_circleci docs
```

footerをsedで消さないと、以下のように差分が出てしまってCIが落ちちゃう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74571/164f1298-e3b0-37e0-8cdd-0624d87ecf3f.png)
P5.js 日本語リファレンス(p5.Color)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の p5.Colorを説明します。

## p5.Color

### 説明文

各色は指定したカラーモードとレベルの最大値で格納します。

内部的には、理想的なRGBA値を表す配列を0から1に正規化した浮動小数点形式で格納します。そして、最も近い画面色(0から​​255までのRGBAレベル)を計算しこれを画面表示します。

また、色の正規化された浮動小数点データは, 計算時にさまざまな表現でキャッシュされます。これは、すでに実行された変換を繰り返すのを防ぐために行われます。

### 構文

new p5.Color() 

### メソッド

- toString()   
この関数は、文字列としてフォーマットされた色を返します。これは、デバッグや、他のライブラリでp5.jsを使用する場合に役立ちます。

- setRed()   
setRed関数は、赤色を設定します。範囲はカラーモードによって異なりますが、デフォルトのRGBモードでは0〜255です。

- setGreen()   
setGreen関数は、緑色を設定します。範囲はカラーモードによって異なりますが、デフォルトのRGBモードでは0〜255です。

- setBlue()  
setBlue関数は、青色を設定します。範囲はカラーモードによって異なりますが、デフォルトのRGBモードでは0〜255です。

- setAlpha()   
setAlpha関数は、色の透明度(アルファ)値を設定します。範囲はカラーモードによって異なりますが、デフォルトのRGBモードでは0〜255です。

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
bundle installでAn error occurred while installing mysql2

```
$ rails _5.2.4.1_ new appname --database=mysql --skip-test --skip-turbolinks --skip-bundle
```
でrailsアプリを新規作成した後、

```
$ bundle install
...
-----
Don't know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load
-----
-----
Setting libpath to /usr/local/Cellar/mysql/8.0.19/lib
-----
...
ld: library not found for -lssl
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make: *** [mysql2.bundle] Error 1

make failed, exit code 2

Gem files will remain installed in /Users/machoair/.rbenv/versions/2.6.1/lib/ruby/gems/2.6.0/gems/mysql2-0.5.3 for inspection.
Results logged to
/Users/machoair/.rbenv/versions/2.6.1/lib/ruby/gems/2.6.0/extensions/x86_64-darwin-17/2.6.0/mysql2-0.5.3/gem_make.out

An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'` succeeds before bundling.
```
のエラーが発生

# 解決策
上記の通り、エラー内容は

```
Don't know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load
Setting libpath to /usr/local/Cellar/mysql/8.0.19/lib
ld: library not found for -lssl
```
私もよく理解していませんが、「libssl.dylib」を探そうとして、「/usr/local/Cellar/mysql/8.0.19/lib」を探したがありませんというエラーらしいです。

【Rails】MySQL2がbundle installできない時の対応方法
https://qiita.com/fukuda_fu/items/463a39406ce713396403

の記事を参考に、

```
$ cd アプリ場所
$ brew info openssl
...
For compilers to find openssl@1.1 you may need to set:
  export LDFLAGS="-L/usr/local/opt/openssl@1.1/lib" #ここを参考に次のコマンドを書く
  export CPPFLAGS="-I/usr/local/opt/openssl@1.1/include"  #ここを参考に次のコマンドを書く
...
$ bundle config --local build.mysql2 "--with-cppflags=-I/usr/local/opt/openssl@1.1/include"
$ bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl@1.1/lib"      
You are replacing the current local value of build.mysql2, which is currently "--with-cppflags=-I/usr/local/opt/openssl@1.1/include"
$ bundle install
```
で解決しました！
P5.js 日本語リファレンス(saturation)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の saturation関数を説明します。

## saturation() 

### 説明文

指定した色から彩度値を抽出します。

HSBとHSLでは, 彩度のスケーリングが異なります。この関数は、HSBカラーを指定した場合にHSB彩度値を返しますが、それ以外の場合はデフォルトでHSL彩度値を返します。

### 構文

saturation(color)

### パラメタ

- color  
p5.Color | Number[ ] | String：p5.Colorオブジェクト、カラーコンポーネント、CSSカラー

### 戻り値

Number：彩度値

### 例

```javascript
function draw() {
  colorMode(HSB, 255); // カラーモードをHSBに設定
  let c = color(0, 190, 255);
  fill(c);
  rect(15, 20, 35, 60);
  value = saturation(c); // 彩度値190を取得する
  fill(value);
  rect(50, 20, 35, 60);
}
```

### 実行結果

![saturation.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/83cddb45-d255-1beb-e5bf-fe0d7ee0546b.jpeg)


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Amplifyコンソールの自動ビルド設定を手動に戻す

## はじめに
AmplifyコンソールとGitHubリポジトリを紐付ければ、コミット単位で自動でデプロイが走るので便利ですよね。ただ、開発運用次第ではやっぱり手動でのデプロイに戻したい！と思うこともあるかもしれません。
ここでは一度設定した自動ビルドを手動に戻す方法を記載します。

## 1.自動ビルドを無効にする
下記のドキュメントの「自動ビルドを無効にする」に記載の通り進めると自動ビルドが停止します。
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/build-settings.html#disable-automatic-builds

ただ、このままだと新たにソースコードをコミットしてもデプロイされないため、
次のIncoming Webhookの設定が必要になります。
（※設定をしないと最新のコミットメッセージの部分が自動ビルドを無効化する前と変わらない = 最新化されていない状態になります）

<img width="754" alt="スクリーンショット 2020-04-26 16.36.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208622/42ad94c4-3b2d-7321-10ba-e93e0c060b05.png">


## 2.Incoming Webhook(着信ウェブフック)の設定
下記の通り設定して、curl コマンドを実行するとデプロイが走ります。
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/webhooks.html


以上
NOOBSの日本ミラーサイト

何回も探してしまうのでメモ

###NOOBSの日本ミラーサイト
[http://ftp.jaist.ac.jp/pub/raspberrypi/NOOBS/images/](http://ftp.jaist.ac.jp/pub/raspberrypi/NOOBS/images/)

例えば[NOOBS_v3_3_1.zip](http://ftp.jaist.ac.jp/pub/raspberrypi/NOOBS/images/NOOBS-2020-02-14/NOOBS_v3_3_1.zip)が該当

###尚、Rapbianの日本ミラーサイトは以下
[http://ftp.jaist.ac.jp/pub/raspberrypi/raspbian/images/](http://ftp.jaist.ac.jp/pub/raspberrypi/raspbian/images/)

例えば[2020-02-13-raspbian-buster.zip](http://ftp.jaist.ac.jp/pub/raspberrypi/raspbian/images/raspbian-2020-02-14/2020-02-13-raspbian-buster.zip)が該当

###ミラーサイト一覧
[https://www.raspbian.org/RaspbianMirrors](https://www.raspbian.org/RaspbianMirrors)