OmniAICreator/Qiita-1.07M huggingface dataset:
浮動小数点数をバイト列で交換する

# はじめに

センサーやデバイスと UART などで通信をしていると、浮動小数点数を IEEE754 でやり取りしたいことが多いので、そのための備忘メモです。

# Python の場合
Python の場合、struct モジュールの `pack` / `unpack` を使います。

ビッグエンディアンでバイト列に変換する場合以下のようになります。

```
>>> import struct
>>> value = 128.54
>>> buff = struct.pack('>f', value)
>>> print(buff.hex())
43008a3d
```

https://gregstoll.dyndns.org/~gregstoll/floattohex/ で、 `0x43008a3d` がいくつかを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63622/b93ec7ba-f01a-70ae-4a76-c4755827fedf.png)

`128.54` であることが確認できました。

戻すときは、同様に `unpack` を使います。

```
>>> import struct
>>> buff = bytes([0x43, 0x00, 0x8a, 0x3d])
>>> value = struct.unpack('>f', buff)[0]  
>>> print(value)
128.5399932861328
```

# JavaScript の場合
JavaScript の場合、 `ArrrayBuffer` を使用します。

```
const os = require('os');

const data = Buffer.from([0x43, 0x00, 0x8a, 0x3d]);
const buffer = new ArrayBuffer(4);
const f32 = new Float32Array(buffer);
const ui8 = new Uint8Array(buffer);

if (os.endianness() === 'LE') {
  ui8[0] = data[3];
  ui8[1] = data[2];
  ui8[2] = data[1];
  ui8[3] = data[0];
} else {
  ui8[0] = data[0];
  ui8[1] = data[1];
  ui8[2] = data[2];
  ui8[3] = data[3]; 
}

console.log(f32[0]);
```
【Swift5】iOSの設定アプリに遷移するための処理と注意点

# iOSの設定アプリに遷移させるための処理

```swift
guard let url = URL(string: UIApplication.openSettingsURLString), UIApplication.shared.canOpenURL(url) else { return }
UIApplication.shared.open(url, options: [:], completionHandler: nil)
```

# 注意点
## ①設定アプリに遷移するときの挙動

「設定アプリ」内にアプリ固有の設定項目がある場合は、アプリ固有の設定画面へ遷移します。

詳細な挙動については、下記の記事が参考になります。
[UIApplicationOpenSettingsURLStringから設定アプリを開いたときの挙動調査
](https://qiita.com/shtnkgm/items/3c32718b4ac7be4d2463)

## ②設定アプリの特定の画面に遷移させる処理（`App-Prefs:root= `）を使うとリジェクトされる

設定アプリの特定の画面に遷移させるとリジェクトされた例があるらしいので注意が必要です。

詳しくは下記記事に書かれています。
[App-Prefs:root= を使っていたため2.5.1リジェクトされたときの対処法](https://qiita.com/_mogaming/items/cf1b2b75e4be7041c011)
Multi-AZ構成のRDSを強制フェイルオーバーさせる方法


#Multi-AZ構成を構築する方法

下記の2手順で構築可能
1.RDSのコンソール画面を開き、「データベースの作成」を選択
![スクリーンショット 2021-01-20 16.52.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784921/f3c1a0a8-e84a-82f3-d1c0-9f31e1701466.png)

2.次画面の中盤あたりに、下記画像の項目があるので、「スタンバイインスタンスを作成する」を選択(Amazon aurora以外)

![スクリーンショット 2021-01-20 16.39.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784921/cb96d35c-82fc-aa15-2acd-dc506d4144b8.png)

Amazon auroraの場合は、少し表記が異なる。以下画像のように選択。
![スクリーンショット 2021-01-20 17.03.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784921/7a2e5942-f900-e2d9-fa31-17ca02dd08e9.png)

#強制的にフェイルオーバーさせる方法（手動)
フェイルオーバーさせる前の状況は、以下画像の通り。
プライマリが1cにセカンダリが1aに配置されている。また、マルチAZも「あり」と記載されていて有効だと分かる。
![スクリーンショット 2021-01-20 17.09.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784921/1cd7c6d6-0750-def1-9706-84b71d33cad9.png)

それでは、フェイルオーバー（手動）の作業に入る。
方法は簡単で、「アクション」から「再起動」を実行すれば実現できる。
![スクリーンショット 2021-01-20 17.16.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784921/27985ad1-450d-c792-224a-045c24a29b7d.png)
「フェイルオーバーで起動しますか？」のチェックを忘れずに。
![スクリーンショット 2021-01-20 17.15.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784921/93b5e675-25d6-ca12-9b4a-0efa1014ca38.png)

以下画像は再起動後の状態。プライマリが1aに、セカンダリが1cに変更している。
![スクリーンショット 2021-01-20 17.24.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784921/77538998-7293-a81e-61e3-9cfd11cd6b04.png)


なお、このまま処理を施さなければ、フェイルオーバー前に戻ることはない。
元に戻したい場合は、再度「再起動」を実行する。
Djangoのテンプレート側で日付のフォーマット

## やりたいこと
`datetime`で持っているデータ`2020-12-22 15:00:00`を
テンプレート側で日付のフォーマットをして
`2020/12/22`
で表示させたい。

## 解決方法

```
{{ product.updated_at|date:"Y/m/d" }}
```
active_hashを使って都道府県のセレクトバーを作成

今回はよく見かける都道府県のセレクトバーを作成していきたいと思います:grin:

##①　active_hash導入

```
gem 'active_hash'
```
```
$ bundle install
```

##②　関連するモデルにprefecture_id :integerを追加する
私の場合はpetモデルに追加します。

```rudy:db:migrate
  prefecture_id :integer
```

##③　prefectureモデルを手動で作る
modelのなかにprefecture.rbファイルを直接作成し、中身を記述。

```rudy:prefecture.rb
class Prefecture < ActiveHash::Base
  self.data = [
      {id: 1, name: '北海道'}, {id: 2, name: '青森県'}, {id: 3, name: '岩手県'},
      {id: 4, name: '宮城県'}, {id: 5, name: '秋田県'}, {id: 6, name: '山形県'},
      {id: 7, name: '福島県'}, {id: 8, name: '茨城県'}, {id: 9, name: '栃木県'},
      {id: 10, name: '群馬県'}, {id: 11, name: '埼玉県'}, {id: 12, name: '千葉県'},
      {id: 13, name: '東京都'}, {id: 14, name: '神奈川県'}, {id: 15, name: '新潟県'},
      {id: 16, name: '富山県'}, {id: 17, name: '石川県'}, {id: 18, name: '福井県'},
      {id: 19, name: '山梨県'}, {id: 20, name: '長野県'}, {id: 21, name: '岐阜県'},
      {id: 22, name: '静岡県'}, {id: 23, name: '愛知県'}, {id: 24, name: '三重県'},
      {id: 25, name: '滋賀県'}, {id: 26, name: '京都府'}, {id: 27, name: '大阪府'},
      {id: 28, name: '兵庫県'}, {id: 29, name: '奈良県'}, {id: 30, name: '和歌山県'},
      {id: 31, name: '鳥取県'}, {id: 32, name: '島根県'}, {id: 33, name: '岡山県'},
      {id: 34, name: '広島県'}, {id: 35, name: '山口県'}, {id: 36, name: '徳島県'},
      {id: 37, name: '香川県'}, {id: 38, name: '愛媛県'}, {id: 39, name: '高知県'},
      {id: 40, name: '福岡県'}, {id: 41, name: '佐賀県'}, {id: 42, name: '長崎県'},
      {id: 43, name: '熊本県'}, {id: 44, name: '大分県'}, {id: 45, name: '宮崎県'},
      {id: 46, name: '鹿児島県'}, {id: 47, name: '沖縄県'}
  ]

  include ActiveHash::Associations
  has_many :pets
end
```

petモデルにもリレーション追加

```rudy:pet.rb
class Pet < ApplicationRecord
 
  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to_active_hash :prefecture

end
```

##④　パラメーターに　:prefecture_idを追加

```rudy:pets.controller.rb
  private

  def pet_params
    params.require(:pet).permit(:name, :prefecture_id)
  end
end
```

##⑤　viewを追加

```
<%= form_with model: @pet, url: pets_path, method: :post, local: true do |f| %>
  <%= f.label :"都道府県" %>
  <%= f.collection_select :prefecture_id, Prefecture.all, :id, :name, prompt: "-- 選択してください--" %>
<%= end %>
```

完成です！！:blush:
【Vue.js】コンポーネントを動的に切り替える時とその注意点【動的コンポーネント】

#前提
__コンポーネントを複数用意した際の切り替え方。__
__その際注意すること。__

* __House__コンポーネント
* __Content__コンポーネント
* 親コンポーネント : __App.vue__

今回は__二つ__子コンポーネントを用意。
ボタンを押すことで二つの__コンポーネントを切り替える__ことができる。


__House__コンポーネント

```Vue:House.vue
<template>
  <div>
    <p>House</p>
  </div>
</template>
```

__Content__コンポーネント

```Vue:Content.vue
<template>
  <div>
    <p>Content</p>
    <input type="text">
  </div>
</template>

<script>
export default {
  destroyed() {
    console.log('destoryed');
  }
}
</script>
```

__親__コンポーネント

```Vue:App.vue
<template>
  <div>
    <button @click="currentComponent = 'Content'">Content</button>
    <button @click="currentComponent = 'House'">House</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'House',
    };
  },
}
<script>
```

##コンポーネントの切り替え
###keep-alive

* __keep-alive__タグ
* __component__タグ
* __v-bind:is__(:is)

__keep-alive__のなかに__component__を__ネスト__。
componentの中で__v-bind:is__を使って__プロパティを指定__すると完成。

App.vueではcurrentComponentプロパティにコンポーネントを値として挿入しているが、
__直接指定__も可能。


```Vue:App.vue
//直接指定

<component :is="House"></component>
<component :is="Content"></component>
```

##ライフサイクルフック
###ライフサイクル

* __activated__
* __deactivated__

__keep-alive__を使用することによって__新たなライフサイクル__が二つ追加される。

* created
* destroyed

この二つをイメージするとわかりやすい。

---

###注意点

__異なる点__として、__毎回インスタンス化されない__ため、実際にcreatedやdestroyedされているわけではない。

そのため、__inputなどに入力したデータは切り替え後も消えずに残る__。

##参照
udemy講座 : https://www.udemy.com/course/vue-js-complete-guide/learn/lecture/15371400#content
講師 : よしぴー(Yoshipi)さん
Githubにpushするまで

GitHubへPushするまでにかなり手こずったので
また同じようなことにならない為に記録しときたいと思います。

#環境
- macOS Big Sur (11.1)
- エディター　VSCode
- GitHubアカウントは登録済み
- 管理しているプロジェクトはrailsで実装済み

#1.リポジトリの作成

- [GitHub](https://github.com/)でRepositoriesの`New`をクリック
- `Repository name`で好きな名前（作っているアプリの名前）を入力
- `Public（公開）` `Private(非公開)`はお好きに決めてください
- `create Repository`でリポジトリの作成完了

#2.VSCodeでinitからcommitまで
- フォルダを開くをクリックしてpushしたいプロジェクトを開き、下のコードを入力


```:ターミナル
$ git init
$ git add -A
$ git commit -m "コメント"

```

`add -A`で現在のディレクトリ以下の全ファイルを選択
`commit　-m`でコミットメッセージを残す

これでpushする準備が完了！

#3. push

```:ターミナル
$ git remote add origin https://github.com/ユーザー名/リポジトリ名_app.git
$ git push -u origin master
```


#最後

これでpushが出来ました。
またこれで出来なくなったら編集し直そうと思います。
何か他にアドバイス、ご指摘あればお願い致します。
v-calender でCSSが効かない件

#環境
　エディタ：VS-CODE
  Vue:@vue/cli 4.5.9 vue": "2.6.11",
  "v-calendar": "2.1.6",
   "bootstrap": "4.5.3",
  
###初めての記事なので、わかりにくい場合は申し訳ありません。

カレンダーをVueで利用しようと思い、v-calenderを選択しました。
サンプルとして、GitHubの
https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue
からコードをコピペしてVS-CODEに張り付けたのですが、CSSが適用されず困っていました。
調べたところissueにも回答が見つけられず、自力で調べてみました。
参考issue : https://github.com/nathanreyes/v-calendar/issues/727
まだ、Gitのサンプルと違う？というところはありますが、備忘録的に記載しておきます。

##1.npm or yarn経由でTailwindをインストールする
  https://tailwindcss-ja.entap.app/docs/installation

  ```
   # Using npm
   npm install tailwindcss
   または、
   # Using Yarn
  yarn add tailwindcss 
```

##2.main.js にてCSSをインポートする。
　　CSSの該当ファイルが見つからず苦労しました・・・
###main.js
 ```
import "tailwindcss/dist/tailwind.css";
//VCalender の設定
import VCalendar from 'v-calendar';
Vue.use(VCalendar);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353526/adb886d5-681d-c552-7d22-eca2516c407b.png)


より良い方法があればご指導ください。
Gravio 4で呼び鈴

[前回Lチカでボタンを押してライトが点く][Prev]ところまで作ってみた。せっかくなのでお客様が来たときの呼び鈴を作ってみる。ライトがついても集中していて気づかないことがあるけど、音がなれば気づきやすいですからね。

Gravio 4はAmazon Pollyを使って音声を合成して再生する機能があります。Gravio 3まではWindowsのみの機能だったのですが、今回からLinuxでも使えるようになりました。

# 使用環境

* Windows 10 20H2 (19042.746)
* Gravio HubKit v4.1.4049.0
* Gravio Studio v4.1.5432.0
* Gravioライト
* Gravioワイヤレススイッチ
* Amazon Polly

※GravioライトとGravioワイヤレススイッチはBasicプラン(月額500円)を契約するとレンタルすることができます。

# 事前準備
* 「[Gravio 4でLチカ][Prev]」でボタンを押してライトが点くところまでやっておく。
* AWSのアクセスキー、シークレットキーを入手しておく

# 手順
## Amazon Pollyで音声を再生

「[Gravio 4でLチカ][Prev]」で作成した「TurnOnLight」を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/5f9d65b4-c423-c875-ac90-d3f282364983.png)

**AWS Polly Speech**コンポーネントを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/722860d8-e14a-afc3-2064-317db671b087.png)

プロパティに以下を設定します。

|プロパティ|値|
|:---|:---|
|テキスト|お客様がいらっしゃいました|
|音声|Mizuki Japanese-女性|
|アクセスキーID|＜AWSで入手したアクセスキー＞|
|シークレットアクセスキー|＜AWSで入手したシークレットキー＞|
|リージョン|Asia Pacific(Tokyo) ap-nbortheast-1|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/73fb206c-3d34-347c-39d6-7655351ffb23.png)

これでOKです。再生してみましょう。
「お客様がいらっしゃいました」とスピーカーから再生されましたか？
再生されたら、今度はボタンを押してみましょう。同じようにボタンからでも再生されたと思います。

# まとめ
Amazon Pollyで簡単に音声を再生できましたね。Linuxでも可能になったので、Gravio Hubやラズパイでもスピーカーを繋ぎさえすれば簡単に呼び鈴システムが作れますね。

[Prev]:https://qiita.com/zrock/items/fa2cf4f748803d35aed5
manimの作法 その20

#概要

manimの作法、調べてみた。
MovingCameraScene使ってみた。

#サンプルコード

```
from manimlib.imports import *

class test(GraphScene, MovingCameraScene):
	def setup(self):
		GraphScene.setup(self)
		MovingCameraScene.setup(self)
	def construct(self):
		self.camera_frame.save_state()
		self.setup_axes(animate = False)
		graph = self.get_graph(lambda x: np.sin(x), color = BLUE, x_min = 0, x_max = 3 * PI)
		moving_dot = Dot().move_to(graph.points[0]).set_color(ORANGE)
		dot_at_start_graph = Dot().move_to(graph.points[0])
		dot_at_end_grap = Dot().move_to(graph.points[-1])
		self.add(graph, dot_at_end_grap, dot_at_start_graph, moving_dot)
		self.play(self.camera_frame.scale, 0.5, self.camera_frame.move_to, moving_dot)
		def update_curve(mob):
			mob.move_to(moving_dot.get_center())
		self.camera_frame.add_updater(update_curve)
		self.play(MoveAlongPath(moving_dot, graph, rate_func = linear))
		self.camera_frame.remove_updater(update_curve)
		self.play(Restore(self.camera_frame))


```

#生成した動画

https://www.youtube.com/watch?v=63cCz1Rou3Q

以上。
SpringBootで日付の相関チェックをする

#概要
SpringBootで複数項目を比較してバリデーションを行う方法（相関チェック）をまとめる。

#コード
まず、ユーザから日付の入力を受け取るエンティティクラス。

``` java
package com.sample.Form;

import com.sample.Annotation.DayCheck;
import lombok.Data;

import javax.validation.constraints.NotNull;
import java.time.LocalDate;

@Data
@DayCheck //(1)
public class SearchLogForm {
  @NotNull(message = "日付入れてね^^") //(2)
  private LocalDate startDate;

  @NotNull(message = "日付入れてね^^")
  private LocalDate endDate;
}
```

解説
(1)->このあと作成する自作のアノテーションをクラス全体に付与。
(2)->そもそも日付が入力されていなければ意味がないのでNullを許さないように@NotNullアノテーションを付与。

次に、エンティティに付与するアノテーションクラス。

``` java
package com.sample.Annotation;

import com.sample.Validation.DayCheckValidation;

import javax.validation.Constraint;
import javax.validation.Payload;
import java.lang.annotation.*;

@Documented
@Constraint(validatedBy = DayCheckValidation.class) //(1)
@Target(ElementType.TYPE) //(2)
@Retention(RetentionPolicy.RUNTIME)
public @interface DayCheck {
  String message() default "終了日は開始日よりあとを入力してね^^";

  Class<?>[] groups() default {};

  Class<? extends Payload>[] payload() default {};
}
```

解説
(1)->このあと作成するバリデーションチェッククラスを指定。
(2)->複数項目をバリデートする場合クラスそのものに付与するのでTYPEを指定。

最後に、バリデーションチェッククラスを作成。

``` java
package com.sample.Validation;

import com.sample.Annotation.DayCheck;
import com.sample.Form.SearchLogForm;

import javax.validation.ConstraintValidator;
import javax.validation.ConstraintValidatorContext;

public class DayCheckValidation implements ConstraintValidator<DayCheck, SearchLogForm> { //(1)

  @Override
  public boolean isValid(SearchLogForm value, ConstraintValidatorContext context) {
    if (value.getStartDate() == null || value.getEndDate() == null) { //(2)
      return false;
    }
    return value.getStartDate().isBefore(value.getEndDate()) ? true : false; //(3)
  }
}
```

解説
(1)->[ConstraintValidator](https://spring.pleiades.io/specifications/platform/8/apidocs/javax/validation/constraintvalidator)の<>の中には、カンマ前には上で作成したアノテーションを、後にはアノテーションを付与する（チェックを行う）エンティティクラスを指定。
(2)->日付がnullだとぬるぽが発生するのでnullチェック。
(3)->日付を比較。終了日が開始日より前だった場合falseを、あとだった場合trueを返すように実装。

#実行結果
![1611130067549.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551999/397eda4e-0512-d6fb-1aa4-412cdf700264.jpeg)
開始日を終了日より前の日付にすると...

![1611130001999.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551999/cc6ae94b-c261-d128-62af-37a3a5d7043c.jpeg)
ちゃんとチェックできてました。



#参考文献
・https://terasolunaorg.github.io/guideline/public_review/ArchitectureInDetail/Validation.html#validation-correlation-check
・https://itneko.com/kotlin-validate-correlation/
Chart.jsで円グラフを書く

chart.jsでデータベースの値から簡単な円グラフを作成
スポーツの大会でよくある勝敗確率のグラフ(最高100%という設定)
![スクリーンショット 2021-01-20 16.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551832/1a9e46d3-40dd-17e4-c82a-9c716613656d.png)



####データベース
forecastsテーブル
numはwin_schoolの勝利確率
win_schoolは勝利予想されているチーム
lose_schoolは負け予想されているチーム

|id|num|user_id|win_school|lose_school|
|:--|:--:|--:|--:|--:
|1|60|1|A学園|B学園|


####コントローラー
idが1のデータを取ってこれる設定

```.rb
def show
  @forecast = Forecast.find(params[:id])
end
```

####htmlファイル

```html
<div class="win"><%= @forecast.win_school %></div><!-- A学園 -->
<div class="lose"><%= @forecast.lose_school %></div><!-- B学園 -->
<div class="win-rate"><%= @forecast.num %></div><!-- 60 -->
<div class="pie"><!-- グラフ描画部分 -->
  <div style="width:60%; height:60%";><canvas id="PieChart"></canvas></div>
</div>
<%= javascript_pack_tag 'forecast' %> <!-- js読み込み -->
```
非表示にさせたい場合はhiddenを使うと良いでしょう

```html
<div hidden class="win">
```

####jsファイル
app > javascript > packs > forecast.js

```js
var ctx = document.getElementById("PieChart");
var win = document.getElementsByClassName("win").textContent //クラス名winから値を取得(A学園)
var lose = document.getElementsByClassName("lose").textContent //クラス名loseから値を取得(B学園)
var winnum = document.getElementsByClassName("win-rate").textContent  //クラス名win-rateから値を取得(60)
var PieChart = new Chart(ctx, {
  type: 'pie', //グラフのタイプは円グラフです、という意味
  data: {
    labels: [win,lose], //円グラフのラベル(円グラフのA学園,B学園と表示されている箇所)
    datasets: [{
      backgroundColor: [ //円グラフの色
        "#FF0000", //1つめの色(ラベルwin)は赤
        "#33CCFF", //2つめの色(ラベルlose)は水色
      ],
      data: [winnum,100-winnum] //グラフの値 下記参照
    }]
  },
  options: { //オプションでカスタマイズ？
    title: {
      display: true,
      text: '勝利確率'//グラフのタイトル
    }
  }
});
```

data:でグラフに値を挿入しています
変数winnumには60が入っているので60,2つめは100-60で40が入るので
A学園の勝率60%,B学園の勝率40%ということになります

```.js
data: [winnum,100-winnum]
```

今回はhtmlファイルから値を取得しました
コントローラーから取得したい場合は、[gon](https://qiita.com/s_nakamura/items/5d153f7d9db1b1190296)を使えば良いと思います
Photoshopでマニュアル画像用の枠線を簡単につける

前提

1. Photoshop初心者
2. 忘備録
3. スクショ画像を加工したい
4. まだ本運用してない（忘備録なので
5. Adobe Photoshop 2021 (creative cloud)

経緯

・Webマニュアル作成にあたり、PaintやPaint3Dでの枠線は面倒（同じサイズの画像用意とか）
・アカウントはあれど、Photoshop使ったことないので、やり方忘れるので忘備録とする。

手順

1. Photoshopでファイル→開く→スクショしたpngファイルを選択
2. 開いたファイルのレイヤー（背景）に鍵アイコンが付いてたら、鍵アイコンをクリックして解除する（画像が背景→レイヤーという表記になる）。
![枠線_手順1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6861/d7d6ec9a-4e25-6707-752b-b85902b11213.png)
  ↓
![枠線_手順2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6861/49ac8f64-3e79-1225-2e83-b59ef2d6605d.png)

3. レイヤーのイメージ画像をダブルクリック
![枠線_手順3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6861/76327a92-6d5f-3235-455b-1a6e5c46266a.png)

4. レイヤースタイルで、「境界線」にチェック→OKボタンクリック
![枠線_手順4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6861/89606757-d4bc-8840-2829-311766f3afcd.png)

5. レイヤーに枠線がつく！
![枠線_手順5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6861/f75d10bd-e79e-4e60-ffb6-1d858dc8b78e.png)

6. 境界線の装飾は、境界線をダブルクリック
![枠線_手順6_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6861/7c639c82-6538-6d61-5a15-4f2d1ef20862.png)

7. レイヤースタイルで、内容変更する（境界線のサイズとか色とか）
![枠線_手順6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6861/c144ad57-6e7c-e6a3-948d-fac9fb7196ac.png)
　　↓
![枠線_手順7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6861/b32001fd-5f9e-65c4-3747-84a2e3543feb.png)

メモ）境界線のサイズは1px以上。それ以下は設定できない（みたい）

8. ファイル保存は、psd形式でしとくと、また後で修正できる。別名保存でpngファイルに。
統計情報ってなんだ

#前回から

統計情報とは。
表やインデックス、使用している領域、データの種類、データの分布等のデータ特性を表す情報のこと。
具体的には・・・・
・各テーブルのレコード数
・各テーブルの列数と列のサイズ
・列値のカーディナリティ(値の個数)
・列値のデータ分布(どの値がいくつあるかのヒストグラム)
・列内のNULLの数
・インデックス情報


このような情報を元にして、オプティマイザはどのような操作を行えば効率的に処理を実行できるかを判断している。
すごーい。

じゃぁ統計情報を元にオプティマイザが判断してくれればレスポンスはいつでも快適！
というわけにもいかない。

<font color="Red">
統計情報は常に最新というわけではなく、古い情報のまま残ってしまう場合がある！
</font>
適切なインデックスを作成し、レスポンスが改善しても月日が流れて遅くなる原因の一つですね。


#じゃぁ統計情報の更新タイミングはいつなんだ

データの分布って、テーブル内のデータを更新するたびにかわるよね？
じゃあ何をトリガーに統計情報って変わるんだ。

###・手動で更新する
```sql
--コマンドを利用して更新する。
UPDATE STATISTICS Table1--[テーブル名]
```
```sql
--SQL Serverの備えられているストアドで更新する。
EXEC sp_updatestats;
```
###・自動で更新する
統計の自動更新オプション AUTO_UPDATE_STATISTICS がオンの場合自動で更新が走る。
（規定値はON）

条件自体は細かく色々あるらしい、概要では全体の20%のデータが変動すると自動更新が走る設定になっている。

20％というように割合で更新されるなら、データが多くなればなるほど、自動更新頻度が下がっていきそう。。。

###・インデックスの再構築を行う
長くなりそうなので、別記事でアップしようと思います！

#統計情報の更新状態の確認方法

統計情報が最後にいつ更新されたのかを確認する

```sql
SELECT
    OBJECT_NAME(dsp.object_id) 
    , dsp.object_id 
    , ss.name
    , dsp.last_updated 
    , dsp.rows
    , dsp.rows_sampled 
    , dsp.steps 
    , dsp.unfiltered_rows 
    , dsp.modification_counter 
FROM
    sys.stats AS ss 
    CROSS APPLY 
    sys.dm_db_stats_properties(ss.object_id, ss.stats_id) AS dsp 
WHERE
    OBJECT_SCHEMA_NAME(dsp.object_id, DB_ID()) <> 'sys'
EXEC sp_updatestats;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260891/171bcbb7-dbf6-b8aa-b8c4-7aef1401d39e.png)


#統計情報って簡単なようで難しい
一言で言ってしまえばテーブルの状態なのだが、各種設定だったり、正直ややこしい。


次回はインデックスの再構成について
やめる方向に特化したふりかえり手法 "PECRS" を考えた

# はじめに
例えばですが、StarfishやSmall Starfishといったふりかえり手法ではLess ofやStopといった「やめる」アクションを出すような設計になっています。

参考 
Starfish : https://www.funretrospectives.com/starfish/
Small Starfish : https://www.funretrospectives.com/small-starfish/

日本語だと@viva_tweet_xさんの[ふりかえりカタログ](https://qiita.com/viva_tweet_x/items/cc3bad3bd298406b6cc7)がわかりやすいです。


このように「やめる」を考えることはふりかえりで時に必要なことです。なので「やめる」に特化したふりかえり手法としてPECRS（ピクルス）を考えました。
銀の弾丸ラジオの[Sprint.18](https://anchor.fm/silver-bullet-club/episodes/Sprint18-en4ijq/a-a3vtsna)でみやざきさんが「ECRS(イクルス)の原則」を紹介していて、考えるきっかけになったのでこちらも是非聞いてみるといいと思います。

# TL;DR
### 手法のイメージ
実際にやってみたものを少し一般化して載せてみました。
![2020_12_23 PECRS 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327865/9a8dacc6-7203-4bda-4708-f6fa593cd3e1.png)

### 進め方
* それぞれがP（プロブレム）を出す
* 全員でE→C→R→Sの順番にアクションを検討をしていく

ECRSの原則のそれぞれの項目は以下のとおりです。

* E : 作業改善などで、工程、作業、動作をなくすことができないか？（排除：Eliminate）
* C : 一緒にできないか？（統合：Combine）
* R : 順序を変更できないか？（交換：Rearrange）
* S : 単純化できないか？（簡素化：Simplify）

参考：https://logist.bz/improvement/2914/

### いいところ
* 「やめる」に特化して考えることができる
* P→E→C→R→Sの順に考えるため、左から右にというように思考の流れが明確

### 手法のポイント
* CやRを出すのが難しいので、すぐSに行かずよく考える
* Pをあらかじめグルーピングしておくと考えやすい

# まとめ
今回は自作ふりかえり手法について紹介しました。（といってもECRSの原則に従っただけなのと、ピクルスって言いたかった）
是非チームで使ってみてください！Twitterとかでフィードバックもお待ちしております。
Twitter：@hourglasshoro
【Instantiate関数】当たったときに複製を生成する【テンプレスクリプト】

下記スクリプトがアタッチされたオブジェクトは、
衝突判定時に、コンポーネントでアタッチされたオブジェクトを作成する。

- アタッチするオブジェクトがパーティクルの場合は、パーティクルが都度生成される。
- **パーティクルの場合は、生成されたクローンがそのまま残ってしまうので、パーティクルシステム内のコンポーネントで、「Stop Action」を「Destroy」にすればよい。**


```particleSpawn.cs
using UnityEngine;

public class particleSpawn : MonoBehaviour
{
    public GameObject particle;

    private void OnCollisionEnter(Collision col)
    {
        Instantiate(particle.gameObject, this.transform.position, Quaternion.identity);
    }
}
```
AngularのLazy Loadingについて

ルーティングでコンポーネントの切り替えができるようになった後に、Lazy Loadingという概念を勉強しました。
遅延読み込みというもので、ブラウザを開いた時にそのアプリケーションのデータやviewを全てその時にダウンロードするのではなく、一つずつ進めていくにつれてその都度必要なものを読み込んでいくという認識です。一度にダウンロードしないため、通信量を抑えることが可能となります。

## 遷移図
初めのページは'hoge1'でコンポーネントないのリンクをクリックしていくことで読み込んでいきます。


![遷移図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665867/f15f1f52-d927-64bf-c57a-499659d61ec2.png)

## やり方
①app-routing.moduleの編集

routing.moduleに下記のように記述します

```typescript:app-routing.module.ts
//これは使用例です
const routes: Routes = [
  {
    path: 'hoge1(',
    loadChildren: () => import('./hoge1/hoge1.module').then(m => m.Hoge1Module)
  }
];
```

urlで```localhost:4200/items```へ遷移する際にHoge1Moduleの内容を読み込むという意味になります。

Hoge1Moduleでも同じように読みこんでいく場合も同様な形で記述していきます。
その際はHoge1RoutingModuleを作成する必要があります。ドキュメントではModuleに書き込んでありますが、RoutingModuleには画面遷移機能を専用で作成し、Moduleにはそれらをまとめておくという方がみやすくなるため分けました。

また0からHoge1ModuleとHoge1RoutingModuleを同時に作成する場合は下記のようにコマンドを打ち込むと良いです。

```typescript:terminal
% ng g m hoge1 --routing //--routingと入れることでrouting.moduleも作成してくれる
```

②1つ目の画面遷移先であるHoge1Moduleの編集

```typescript:hoge1.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';   //画面遷移ができるようimport
import { Hoge1RoutingModule } from './hoge1-routing.module'; //自動的に追加される

import { Hoge1Component } from './hoge1.component'; //app.moduleからこちらに移動した。

@NgModule({
  declarations: [
    Hoge1Component //app.moduleからこちらに移動した。
  ],
  imports: [
    CommonModule,
    Hoge1RoutingModule  //自動的に追加される
  ]
})
export class Hoge1Module { }
```
③hoge1-routing.moduleを編集します

```typescript:hoge1-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmptyComponent } from '../empty/empty.component';
import { Hoge2Component } from '../hoge2/hoge2.component';
import { Hoge1Component } from './hoge1.component';

const routes: Routes = [
  { path: '', component: Hoge1Component},  //ここを追加 なおpathは'hoge1'ではない
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Hoge1RoutingModule { }
```

ここでpathを'hoge1'としてしまうと上の階層(app-routing.module)でも```path:'hoge1'```としていたので
urlで```localhost:4200/hoge1/hoge1となります。htmlのrouterLinkでそのように指定してやれば動作的には問題ないですが、非常にみづらくなりためやらない方がいいです。
このようにhoge1でmoduleとrouting.moduleを編集しました。
ブラウザで確認するとこのようになりました。
![画面遷移2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665867/48f5ed00-4cf4-77fb-6e02-6400d4e19137.png)


またターミナルを確認してみると下記のようにlazy loadingができています。
![lazyloading1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665867/37854334-6086-5c9c-4114-3e77da3a0341.png)


## 最後に
Railsを使って自作アプリを作成した後に、画像の読み込みがすごく遅かったのを覚えています。この概念を知って、読み込みが遅くなるということを解消してくれるのだろうと思いました。

## 参考にしたサイト
[Angular日本語ドキュメンテーション (フィーチャーモジュールの遅延ロード)](https://angular.jp/guide/lazy-loading-ngmodules)
【IQ Bot】 オンプレでCRと別マシンに建てるときに、IQ Bot側で必要な設定

[こちらの記事](https://qiita.com/IQ_Bocchi/items/529dc72b6ab3d26dbfe0)では、IQ BotとCRの同梱を前提としてインストール手順を紹介しています。

IQ BotとCRを別建てする場合は、通常のインストール手順の他にもうひと手順実施する必要があります。
このページでは、その手順を紹介します。

##IQ Botのセッティングファイルへの接続情報の書き込み

インストールが完了すると、IQ Botのサーバインストールフォルダ（デフォルトのままであれば`C:\Program Files (x86)\Automation Anywhere IQ Bot バージョン名`）配下のConfigurationsフォルダに、各種の設定ファイルが入ります。

その中の、Settings.txtを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/29be4bfa-123a-5d10-c6d5-e25c7c6f856a.png)

Settings.txtの中身は以下のようになっています。このうち、①と②を書き換える必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/84ade432-d64f-a50e-c61f-4b0464e8218c.png)

###① SQLServerAddress

デフォルトではLocal Hostになっていますが、これをIQ Bot用のSQL Serverが入っているサーバーのサーバー名に書き換えます。

###② ControlRoomLinkとControlRoomPort

こちらはデフォルトでは空白になっているので、以下のとおり指定します。

|項目|入力内容|
|:-----------------|:------------------|
|ControlRoomLink|CRが入っているサーバーのサーバ名を指定します。|
|ControlRoomPort|CRのポート番号を指定します。|

例えばCRのサーバー名がabc-server、ポートが80の場合は以下のように指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/bae318a5-b75f-0f47-7efa-89de179c65b3.png)

上記の設定を保存すると、CRとIQ Botを接続することができます。
【インフラ】PCのネットワークが繋がらない対応について

今回は私が過去に体験した、PCトラブルの稀な事例を共有したいと思います

#背景
とある日のこと、社内PCにて下記エラーが表示されネットワークが繋がらない事象が発生しました
>The Realtek Network Controller was not found.
>If Deep Sleep Mode is enabled Please Plug the Cable.

色々とトラブルシューティング（再起動、ドライバ更新等）を試しても改善しない状況が続き、かなり手こずっておりました

#結論！
下記の参考サイトに出会い、私は救われました
[Win7でﾛｰｶﾙｴﾘｱ接続が消えてネットに接続できない](https://kimama9.blog.fc2.com/blog-entry-670.html)

下記、一部抜粋します
>"電源プラグを抜いて１０分放置すれば治るよ"
本当かいなと思ってやってみると本当に回復して笑った。

エラー内容や事象も上記サイトと同じです、まさかとは思いましたが・・・放電してネットワークが繋がりましたｗ

台風や雷の後は帯電によってPC内部の回路や部品に電気が溜まってしまい「PCが起動しない事象がある」というのは知っておりましたが、まさか「ネットワークが繋がらない事象がある」とは知らず、原因特定に大分時間がかかりました。

#教訓
PCの動作がおかしいと思ったら大体最初はPC再起動を行うと思いますが、今回のように放電によりPCトラブルを解決出来る事もありますので、覚えて頂いて損は無いと思います！


#関連サイト
[専門知識一切不要！調子を回復させる「パソコンの放電」について](https://www.seikatsu110.jp/pc/pc_computer/32646/)
kubectlでラベルセレクターを利用してPod名のみ取得する


## Pod名のみ取得
```bash
kubectl get pod -l component=webserver -o=jsonpath={.items[*].metadata.name}
```

## 使い方
Podを作り直しながらデバッグするときとかにいちいち指定しなくて良くなるので便利

```bash
kubectl exec -it  $(kubectl get pod -l component=webserver -o=jsonpath={.items[*].metadata.name}) /bin/sh
```
Java Powerpointにフッタを挿入

<p> </p>
<p><strong>今日はJavaでPowerpointにフッタを挿入する方法を紹介します。Spire.Presentation for Javaというライブラリを使ってPowerpointにフッタを簡単に挿入することができます。</strong></p>
<h4><strong>下準備</strong></h4>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/presentation-for-java.html">Free Spire. Presentation for Java</a>無料版をダウンロードしてください。</strong></p>
<p><strong><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210120/20210120151857.png" alt="f:id:lendoris:20210120151857p:plain" title="" class="hatena-fotolife" itemprop="image" /></strong></p>
<p><strong>2.IDEを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire. Presentation.jarを参照に追加してください。</strong></p>
<p><strong><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210120/20210120151914.png" alt="f:id:lendoris:20210120151914p:plain" title="" class="hatena-fotolife" itemprop="image" /></strong></p>
<h4><strong>コード</strong></h4>
```JAVA
import com.spire.presentation.FileFormat;
import com.spire.presentation.Presentation;

public class AddFooter {
    public static void main(String[] args) throws Exception {
       
 //PowerPointドキュメントをロードします。
        Presentation presentation = new Presentation();
        presentation.loadFromFile("Input.pptx");

        //フッタを入れます。
        presentation.setFooterText("フッタです");
        //フッタを表示にします。
        presentation.setFooterVisible(true);
        //ページ番号を表示にします。
        presentation.setSlideNumberVisible(true);
        //日付を表示にします。
        presentation.setDateTimeVisible(true);

        //保存します。
        presentation.saveToFile("AddFooter.pptx", FileFormat.PPTX_2010);
    }
}
```
<h4><strong>実行結果</strong></h4>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210120/20210120155822.png" alt="f:id:lendoris:20210120155822p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p> </p>
【Shopify】LiquidのMoney filterを全てまとめてみた話

#はじめに
今回の記事では、ShopifyのMoney filterを全てまとめてみました。

[こちら](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/filters/money-filters)を参考にしました。

#Money filter
Moneyフィルタを使うことで、**一般設定にある通貨のフォーマットに基づいて価格を表示できます。**![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/6d4410b8-6ea3-090c-100b-197f3750c87e.png)

各 Money filter の説明の前に、軽く通貨のフォーマットについて説明します。

##通貨フォーマット
ストア上に表示される通貨や、価格表示を変更して、お客様が金額を読み取りやすいようにすることができます。

###通貨フォーマットの種類
通貨フォーマットの種類は全部で4つで、フォーマットによって使用箇所が変わります。

| フォーマット名 | 使用箇所 |
|:--|:--|
| **通貨があるHTML** | オンラインストアと管理画面|
| **通貨のないHTML** |  オンラインストアと管理画面|
| **通貨が表示されたメール**  | 通知  |
| **通貨が表示されていないメール** | 通知と[Order Printer](https://help.shopify.com/ja/manual/orders/order-printer)テンプレート |


###通貨フォーマットの選択肢
通貨額の価格表示方法を選べます。

| 価格表示形式 | 四捨五入 | 例 |
|:--|:--:|:--|
| {{ amount }}	  |   |  1,234.56 |
| {{ amount_no_decimals }}	  |  ✓ | 1,235  |
| {{ amount_with_comma_separator }}	  |   | 1.234,56  |
| {{ amount_no_decimals_with_comma_separator }}	  |  ✓ | 1.235|
| {{ amount_with_apostrophe_separator }} |   | 1'234.56  |

四捨五入を加えた通貨のフォーマットにすると、小数点以下の数が50以上の場合は切り上げ、50以下の場合は切り下げとなります。

**いずれの通貨のフォーマットを選択しても、ストアのチェックアウトでは小数点以下を含めた通貨が表示されます。**


参考記事：[Shopify ヘルプセンター - 通貨のフォーマット](https://help.shopify.com/ja/manual/payments/currency-formatting)
<br>
それでは、Money filtersを見てみましょう。

##money
`通貨のないHTMLの形式に基づいて価格をフォーマット化します。`

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/63feacd0-612d-28b5-a0d3-f764fd72e18c.png)

```.liquid
{{ 145 | money }}
```
>\<!-- if "HTML without currency" is ${{ amount }} -->
$1.45
<!-- if "HTML without currency" is €{{ amount_no_decimals }} -->
€1


##money_with

`通貨があるHTMLの形式に基づいて価格をフォーマット化します。`

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/06dd10ed-9a39-1bb9-3382-4f32b364d885.png)

```.liquid
{{ 145 | money_with_currency }}
```
>\<!-- if "HTML with currency" is ${{ amount }} CAD -->
$1.45 CAD



##money_without_trailing_zeros

`通貨があるHTMLの形式に基づいて、小数点と価格に影響がないゼロを除いた価格をフォーマット化します。`

つまり、入力値が 2000 の時は、＄20.00 ではなく、＄20 と返されます。


```.liquid
<!-- if "HTML with currency" is ${{ amount }} CAD -->
{{ 2000 | money_without_trailing_zeros }}
```
>$20

価格に影響がないゼロだけが削除され、他の数字は削除されません。

```.liquid
<!-- if "HTML with currency" is ${{ amount }} CAD -->
{{ 145 | money_without_trailing_zeros }}
```
>$1.45


##money_without_currency

`10進数を使用して価格をフォーマット化します。`

```.liquid
{{ 145 | money_without_currency }}
```
>1.45



#終わりに
今回の記事はここまでになります。

お疲れさまでした。

# Shopify アプリのご紹介

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

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

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search
ConfigurationPropertiesとValidatedを使う

# はじめに
- Springで環境変数にバリデーションをかけたい方
- Springで実行時引数などでバリデーションをかけたい方に読んでいただきたいです
- 他にもよりよい実装があると思うので、参考程度にお読みください
- 今回はSpringBatchで実装していますが、SpringWebでも使えます

# 環境
| 利用ライブラリ | バージョン | 備考 |
| --- | --- | --- |
| java | 11 |  |
| spring-boot-starter-parent | 2.3.0.RELEASE | |
| org.projectlomok | 1.18.12 | javaの決まり文句を省略してくれて、コードディングが楽になるので使ってます |
| javax.validation | 2.0.1.Final | バリデーションで利用 |
| org.hibernate | 5.3.6.Final | バリデーションで利用 |

# 実装

## 要件
- バッチの実行時に引数として都道府県コード(1〜47)が渡される
- 都道府県コード以外が渡されたら、DBへSQLを叩かずにバッチを終了させたい

## 実装内容
環境変数や実行時引数参照用のPropertyクラスを作成する

``` java:SampleArgsProperties.java
@Validated
@lombok.Getter
@lombok.RequiredArgsConstructor
@ConstructorBinding
@ConfigurationProperties(prefix = "extension.sample.batch-alpha")
public class SampleBatchAlphaArgsProperties {

   @NotNull
   @Min(value = 1)
   @Max(value = 47)
   private final Integer areaCode;

   @Nullable
   @Min(value = 300)
   private final Long hoge;
}
```

## エラー
- javaの実行時引数に `50` を与えると以下のエラーが吐かれる
    - `-Dextension.sample.batch-alpha.area-code=50`

```bash
Caused by: org.springframework.boot.context.properties.bind.validation.BindValidationException: Binding validation errors on extension.sample.batch-alpha
   - Field error in object 'extension.sample.batch-alpha' on field 'areaCode': rejected value [50]; codes [...
```

# 説明
- `RequiredArgsConstructor` + `ConstructorBinding` の組み合わせを利用し `Setter` を省略
- `ConfigurationProperties` で `Value` アノテーションを省略
- `javax.validation` の `Min` や `Max` を利用してバリデーション

# 最後に
- `@RequiredArgsConstructor` + `@ConstructorBinding` の組み合わせが最高
- if文を使わずにバリデーションできた
Railsのコントローラでparamをhashに変換する方法(随時更新)

params[:some_key]がStringだったり、ActionController::Parametersだったりしてややこしいので。



```rb

class MyController < ApplicatinoController
  def my_action
    #
    hash_of(params[:some_key]) # 呼び出し
    #
    head: :no_content
  end

  private
  def hash_of(param)
    case param
    when Hash              # 本当にhashがあり得るのかは調べてない。
      param
    when String
      JSON.parse(param)    # JSON stringじゃなかったらエラーを吐く
    when ApplicationController::Parameters
      param.to_unsafe_h
    end
  end
end
```



## 参考

- https://apidock.com/rails/ActionController/Parameters/to_unsafe_h
Java  PowerPoint パスワード設定と解除

<p><strong>Spire.Presentation for Javaを使ってPowerPointのファイルにパスワード設定することができます。今回はPowerPointにパスワードを設定・解除する方法を紹介していきます。</strong></p>
<h4><strong>下準備</strong></h4>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/presentation-for-java.html">Free Spire. Presentation for Java</a>無料版をダウンロードしてください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210120/20210120151857.png" alt="f:id:lendoris:20210120151857p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong>2.IDEを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire. Presentation.jarを参照に追加してください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210120/20210120151914.png" alt="f:id:lendoris:20210120151914p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<h4><strong>パスワードの設定</strong></h4>
```JAVA
import com.spire.presentation.*;

public class Protect {
public static void main(String[] args) throws Exception {

//ファイルをロードします。
Presentation presentation = new Presentation();
presentation.loadFromFile("C:\\Users\\Administrator\\Desktop\\Sample.pptx");

//パスワードをつけます
presentation.encrypt("e-iceblue");

//保存します。
presentation.saveToFile("output/Encrypted.pptx", FileFormat.PPTX_2010);
}
```

<h4><strong>実行結果</strong><strong> </strong></h4>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210120/20210120152033.png" alt="f:id:lendoris:20210120152033p:plain" title="" class="hatena-fotolife" itemprop="image" /><strong> </strong></p>
<h4><strong>読み取りパスワードの設定</strong></h4>
```JAVA
Presentation presentation = new Presentation();
presentation.loadFromFile("C:\\Users\\Administrator\\Desktop\\Sample.pptx");

//ファイルを保護します。
presentation.protect("123456");

//保存します。
presentation.saveToFile("output/Readonly.pptx", FileFormat.PPTX_2010);
```



<h4><strong>実行結果</strong></h4>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210120/20210120152159.png" alt="f:id:lendoris:20210120152159p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<h4><strong> </strong><strong>パスワードの解除</strong></h4>
```JAVA
Presentation presentation = new Presentation();
presentation.loadFromFile("C:\\Users\\Administrator\\Desktop\\Encrypted.pptx", FileFormat.PPTX_2010,"e-iceblue");

//パスワードを解除します。
presentation.removeEncryption();
 
//保存します。
presentation.saveToFile("output/Decrypted.pptx", FileFormat.PPTX_2010);
```
<h4><strong>パスワードの変更</strong></h4>
```JAVA
Presentation presentation = new Presentation();
presentation.loadFromFile("C:\\Users\\Administrator\\Desktop\\Encrypted.pptx", FileFormat.PPTX_2010,"e-iceblue");

//パスワードを解除します。
presentation.removeEncryption();

//パスワードを再設定します。
presentation.encrypt("Newpass");

//保存します。
presentation.saveToFile("output/Modifypass.pptx", FileFormat.PPTX_2010);
```

<p> </p>
動画ファイル(MP4)と字幕ファイル(SRT)の結合

<h2>はじめに</h2>

<p>この記事は自分用に書いているので読んでもわかりにくいかもしれない。</p>
<p>あくまでも備忘録代わりで書かせてもらう。</p>
<p><b>この記事では、字幕のない映画などの動画に字幕ファイルを合成して一つのファイルにする方法を記しておく。</b></p>


<h2>環境</h2>

<p>今回は<font color="blue">ffmpeg</font>を使用したものを紹介する。</p>
<p>ffmpegについては<a src="https://ffmpeg.org/">こちら</a>(https://ffmpeg.org/)からダウンロードすることができる。</p>
<p>今回は<b>windows10</b>で変換を行った。</p>
<p>windows10でやる方はPATHを通さないと実行できない。</p>


<h2>必要なもの</h2>

<p>動画ファイル　：　MP4など</p>
<p>字幕ファイル　：　SRTなど</p>
<p>コマンドプロンプト(ffmpegインストール済み)</p>


<h2>やり方</h2>

```
  ffmpeg -i 動画ファイル名.mp4 -vf subtitles=字幕ファイル名.srt 出力ファイル名.mp4
```
<h3>各部分についての説明</h3>
<p>・ffmpeg　：　コマンド本体</p>
<p>・-i　：　入力ファイル名を指定するオプション</p>
<p>・-vf　：　エフェクトの内容を指定</p>
<p>これだけ…っすね…</p>


<h2>あとがき</h2>

<p>かんたんすぎた</p>
<p>でもこれができればソフトなんかいらないね</p>
インドの護衛アブダビ

は、人気レベルのVIPアブダビエスコートデートサービスエージェンシーです。 Fly Set Modelsは、最も有名なワールドクラスのアブダビハイクラスエスコート組織を率いています。エスコートサービスの経験、慎重さ、揺るぎない品質を認める、一貫性のある充実した顧客リスト。私たちのエリート基準と優れたサービスは、私たちの繁栄と長年の前提です。私たちは、ゴージャスで魅力的で驚異的な友好的なすべての通常の護衛の女性とデートを調整します。私たちの仲間とアブダビエスコートのスーパーモデルは、魅力的な技量に精通しています
https://www.mannatarora.com/blog.php
Dataiku DSSのChart系プラグインのlog出力３パターン


Dataiku DSSのプラグインを開発していると、logどこに出るんだっけ？となるときがあります。通常のプラグインだとJobで出ますが、Chart系プラグインは違うところに出たりするので自分向けに整理。

Dataiku version  8.0.1
pythonは3.6とか。 　

Dataiku DSSのChart系プラグインのlogの出し方は、以下の３種類あるかと思います。

1. app.jsでconsol.log()を使ってデベロッパーツールのconsolで確認する
2. pythonのloggerを使って、backendのログに吐く
3. chart画面に表示する

※ちなみにChart系プラグインは、Chart画面ででるヒストグラムとか円グラフとかあれをプラグインで実装したもののことを指します。


### 1. app.jsでconsol.log()を使う
この場合は、chromどかのデベロッパーツールを使ってlogを確認することができます。
具体的にはapp.jsで以下のように書くとデベロッパーツールのコンソールに表示されます。

```{app.js}
  console.log("filters:", filters);
```

ブラウザのデベロッパーツールのconsoleについては説明省略します。

### 2. pythonのloggerを使う
backend.pyやpythonの独自ライブラリ内でloggerを使います。
python側では例えばこんな感じ。

```
import logging
logger = logging.getLogger(__name__)
logger.error(traceback.format_exc())
```

これが表示される場所はちょっとわかりにくいです。
下の画像の右上のオレンジで囲った矢印(Activity)をクリックするとBackend for Web appがでてくるので、赤で囲っているPlugin chartをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/ff20161f-290b-b545-8ef4-707aee606b6f.png)

でてきた画面の右側、Backend logsをクリックするとloggerで吐いたログを確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/55af2747-6fcf-dad9-2354-27157eaa3cab.png)


### 3. chart画面に表示する
これはログといか、エラーや警告をユーザーに伝えるのが主目的な気がします。
2で吐くやつをraiseしといてfrontの方で受け取って出力する感じですね。

描画画面はbody.htmlで定義しているので、そこに出すようにします。以下の例ではchart-pluginのとこに出します。

```{body.html}
<script type="text/javascript"></script>
<h1></h1>
<div style="text-align: center">
    <div id="chart-plugin"> </div>
</div>
```

app.jsではこんな感じ。err_messageは何らかのエラーメッセージです。

```{app.js}
$('#chart-plugin').html(err_message);
```

以上、Chart系プラグインのlog出力３パターンについてでした。
interfaceについて！！Unity日記#1

#始めに！！
・皆さん初めまして！！とある学校で専門生してるamanon（仮名）と申します！
　Unityを勉強してる皆様と情報共有できたらいいな～と思って初めてみました！

・Unity初心者さんや勉強中な人向けに記事を書いていきますのでよろしくお願いします！！

・第一回目はinterfaceです！（1回目にやる内容じゃないですが...(-_-;)）
　とても便利なので頑張って行きましょうー！！


##interfaceとは？
・クラスを作った人（作成側）とそのクラスを利用する側（利用者）でお約束事が出来る機能です


##interfaceの用途

・コードの疎結合化　

・実装の中身は利用者側は知らなくていい！

・メソッドの中身は利用者側が仕様を決めれることが出来ます！


まとめてみましたが全然理解しなくて大丈夫ですよ！！
言葉だけじゃ伝わらない部分もあるのでソース交えながらやっていきましょう！！

##使い方

```

public interface I_Damageble()
{
　//OK!!
  public  void Damage(int Value);

  //エラー
  public  void Damage(int Value)
　{
　　 helth-=Value;
  }
}
```
・今回はI_Damagebleというinterface(作成側)を作りDamageという関数を持たせました！
・interfaceはあくまでも機能だけ定義する事が出来て中身は作る事が出来ません！少し矛盾してるというか変ですよね.
・じゃあ関数なのに中身はどうやって実装するんだ？って思いますよね！そうです、中身は利用者側が実装しなければなりません！作っていきます！

```
public class Damageble:MonoBehaviour,I_Damageble <-ここに利用するinterface名
{
  //HP
  private int helth=0;
  //ダメージ関数
  public void  Damage(int Value)
  {
   helth-=Value;
  }
}
```

・Damagebleクラス（利用者）にI_Damageble（作成者）を継承させたらI_Damagebleの機能が使える事が出来ます！
・実際に継承させI_DamagebleのDamage関数の中身を実装してみました！


```
void OnCollisonEnter(Collison other)
{ 
　　//ohter(当たった情報)からIDamagebleを取得します！
　　//無い場合nullが返ってきます！
　　var id=other.gameobject.Getcopoment<IDamageble>();

　　//nullの場合に処理を実行するとIDamagebleの情報が無いのでエラー
　　// idにデーターが入った場合のみ実行する,nullの場合は処理しない
    if (id!=null)
    {
       id.Damage(10);
    }
}
```
・あとはこのDamage関数を当たり判定の関数の中で呼んであげればやる事は終わりです！
・ＦＰＳでプレイヤーが建物に当たった時にダメージ処理が実行されたらおかしいですよね。なのでnull処理は必ず入れてください。
  



##ここまで
interfaceの使い方を紹介しましたがどこが便利やねん！普通にダメージ関数を作った方が楽やんけ！！
と思った方もいらっしゃるかと思いますがこれから紹介していきます！！


```
void OnCollisonEnter(Collison other)
{ 
    if(other.gameobject.tag=="Enemy")
    {
      Damage(10);
    }
}
```
・おなじみの当たり判定処理ですね！！FPSやTPSなどでは問題ないですが宇宙区間で戦うシューティングを思い浮かべてみてください！

・もし岩や流星群、飛行機の破片が当たった時にダメージ処理したい場合それぞれの
　オブジェクトに"Enemy"というタグを設定しますか？しないですよね(;^ω^)だって敵じゃないですので！

・じゃそれぞれにタグを設定しますか？

```
void OnCollisonEnter(Collison other)
{ 
    if(other.gameobject.tag=="Enemy")
    {
      Damage(10);
    }
    if(other.gameobject.tag=="ryusei")
    {
      Damage(10);
    }
    if(other.gameobject.tag=="hahenn")
    {
      Damage(10);
    }

    if(other.gameobject.tag=="iwa")
    {
      Damage(10);
    }
}

```

・いい案ではありますがhit時ダメージ処理をしたいオブジェクトが増えるたびにコードも増えてバグの原因になりかねません。
・チーム制作なんかでやっているとヒューマンエラーにもつながります。

##解決法

・ここで便利になってくるのがinterfeceです！

```
//流星クラス
public class ryusei:MonoBehaviour,I_Damageble 
{
   public void Damage(int value)
   {
   }
}

//岩クラス
public class iwa:MonoBehaviour,I_Damageble 
{
   public void Damage(int value)
   {
   }
}

//欠片クラス
public class kakera:MonoBehaviour,I_Damageble 
{
   public void Damage(int value)
   {
   }
}

//プレイヤークラス
public class Player:MonoBehaviour
{
   void OnCollisonEnter(Collison other)
  { 
　　//これだけで欠片、岩、流星が当たった時の処理が出来ます
　　var id=other.gameobject.Getcopoment<IDamageble>();
    if (id!=null)
    {
       id.Damage(10);
    }
  }
}

```

・それぞれのクラスにinterfaceを背負わせる事で当たったときそのオブジェクトは
  interfaceを背負ってるか背負ってないかでダメージ処理が出来るので
  わざわざ文字列で判定をとらなくていいですしコードも少なくて済みます！とても便利ですよね！！！
    
  以上です！！お疲れ様でした！
                               
##おわりに
ここまで目を通してくださりありがとうございました！当たり判定をいっぱい取る場合には有効な手法ですので使ってみてください!!

初めての試みで不慣れですがまた定期的に書いていこうと思います!よろしくお願いします
freee for Salesforce InvoiceList のカスタムコンポーネントがない

freee for salesforce

マニュアルにはカスタムコンポーネントをページに追加せよとある。
しかし、ないんですねぇ。どこにも。それらしいapexはある。

もしかして　プロファイルの「有効な Apex クラス」にない？


回避策

ビンゴでした。関係しそうなApexをプロファイルの「有効な Apex クラス」に追加したら
表示されるようになった。
swiftでZXingを使用してバーコード、QRコードを生成する

探したんですがObj-cしか見当たらなかった為備忘録

#何故CIFilterではないか
現在CIFilterはcode128,pdf417,aztec,qrコードしか対応していない（はず）です。

なのでCodaBar（NW-7）などの形式を作成したいとなった時は外部ライブラリを使用するしかありません。

ということでコード
CocoaPods,CarthageなどでZXingを導入しておいて下さい。

```swift:BarCodeGenerator.swift
import UIKit
import ZXingObjC

class BarCodeGenerator {

    static public func generateBarCode(from string: String) -> UIImage? {
        do {
            let writer = ZXMultiFormatWriter()
            let hints = ZXEncodeHints() as ZXEncodeHints
            let result = try writer.encode(string, format: "好きなタイプ", width: 好きな幅, height: 好きな高さ, hints: hints)
            
            if let imageRef = ZXImage.init(matrix: result) {
                if let image = imageRef.cgimage {
                    return UIImage.init(cgImage: image)
                }
            }
        }
        catch {
            print(error)
        }
        return nil
    }
}

``` 

#使用方法

```swift
let image = BarCodeGenerator.generateBarCode(from: "aaa")
```

#バーコードタイプ

|type  |enum      |
|------|----------|
|Aztec|kBarcodeFormatAztec|
|Codabar|kBarcodeFormatCodabar|
|Code 39|kBarcodeFormatCode39|
|Code 93|kBarcodeFormatCode93|
|Code 128|kBarcodeFormatCode128|
|Data Matrix|kBarcodeFormatDataMatrix|
|EAN-8|kBarcodeFormatEan8|
|EAN-13|kBarcodeFormatEan13|
|ITF|kBarcodeFormatITF|
|MaxiCode|kBarcodeFormatMaxiCode|
|PDF417|kBarcodeFormatPDF417|
|QRCode|kBarcodeFormatQRCode|
|RSS14|kBarcodeFormatRSS14|
|RSS|kBarcodeFormatRSSExpanded|
|UPC-A|kBarcodeFormatUPCA|
|UPC-E |kBarcodeFormatUPCE|
|UPC/EAN |kBarcodeFormatUPCEANExtension|
PyInstallerについての調査

PyInstallerを使うと、Pythonで作ったプログラムを実行ファイルに変換できるので、とても便利です。しかも、以下のような感じで書くと、ライブラリも全部まとめて一つのファイルになります。かなり便利。

test.pyをtest.exeに変換する方法:

```
$ pyinstaller test.py --onefile
```

# PyInstallerのインストール

以下のようにpipを使って、PyInstallerをインストールできます。

```
$ pip install pyinstaller
```

# エラーが出る場合 - PythonバージョンやmacOS

macOSや新しいPythonのバージョンの対応は遅れています。対応バージョンを使いましょう。

 - https://pypi.org/project/pyinstaller/

# エラーが出る場合 - 暗黙的なインポート

暗黙的なインポートがある場合、エラーが出ます。以下のように、『--hidden-import=パッケージ名』を追記することで暗黙的なモジュールも追記します。

```
$ pyinstaller -F --hidden-import="sklearn.utils._cython_blas" --hidden-import="sklearn.neighbors.typedefs" --hidden-import="sklearn.neighbors.quad_tree" --hidden-import="sklearn.tree._utils" test.py
```

また、プログラム内に「import xxx」と暗黙的なモジュールを記載しておくこともできます。

# EXE化すると \_\_file\_\_ や \_\_dir\_\_ は使えない

そこで、exeファイルのパスはsys.argv[0]で取得します。

```test.py
import os, sys
exe = os.path.abspath(sys.argv[0])
exe_dir = os.path.dirname(exe)
```

# --onefile オプションをつけると起動が遅くなる

なお、--onefile オプションをつけてEXE化すると、一つのファイルを配布するだけですむので便利だが、その分、起動が遅くなります。起動時にファイルを展開してから実行するため。

どのくらい遅くなるのかベンチマーク。
コマンドラインに渡した文字列を表示するだけのプログラムを５回実行してみたところ、以下のようになりました。

| オプション | 経過秒数 |
|-----------+---------|
| --onefile | 1.44sec |
| なし       | 0.74sec |




# 参考

- [エラーが出るとき - stackoverflow](https://stackoverflow.com/questions/57108026/pyinstaller-modulenotfounderror-no-module-named-sklearn-utils-cython-blas)
- (EXE化した時の注意) https://qiita.com/ymdymd/items/f9f5587f0f3128285e25
Amazon API GatewayのHTTP APIをOpen APIを利用して定義してみた (1/2)

## はじめに

AWS ドキュメントを見ながら、Amazon API GatewayのHTTP APIをOpenAPIを利用して定義する機会があったので、メモとして残します。当記事は手順を簡単に解説し、別記事にて、実際のサンプルを提示したいと思います。

## サマリ
- Open APIを利用したAPI定義が可能
- 定義は別ファイルに外部化することも可能
- 外部化したファイルに対してもパラメータや他のスタックのExportした値、擬似変数が利用可能

## 今回試した設定のもとになる要件
- HTTP APIを採用する
- APIは数十のパスが想定され、メンテナンスが発生しやすい
- 統合先としては、VPC Linkを利用してプライベートなVPCのALBと、AWS Lambda関数がある
- mTLS接続をする。つまり、ためにカスタムドメインとトラストストアの構成,ACMの証明書が必要
- アクセスログを出力する 
- いくつかのパスはIAMによる認可が必要
- CORS設定が必要
- DeployはSAM(Serverless Application Model)を利用する

## 構成

### 概要
1. デフォルトVPCを利用。
2. Stack1：ALBやバケットなど周辺リソースを作成
3. Stack2: API やVPC Link、Logsなどを作成

### 定義ファイル
1. Stack1用のyaml(SAMテンプレート）
2. Stack2用のyaml(SAMテンプレート）
3. Stack2から参照するOpenAPI定義(yaml)

### デプロイ方法
以下のコマンドでビルド& デプロイ

```
sam build
sam deploy
```


## 構成の作成手順
###ざっくりと
1. まず、APIのバックエンドは前述の通りInternal なALB( Internet FacingしないALB)を利用するため、VPC１つ、Subnet2つ(ALBはサブネットが二つ必要）が必要だった。これは、一から作らず、既存のVPC/Subnetを利用することにして手抜きした。（しかもインターネットからアクセス可能なサブネットを利用）.
2. 続いて、ALBやALBに必要なSecurityGroup、HTTP APIの統合先として指定するALBのListenerをCFnで作成(Stack1)。その際、OutputsでHTTP ListenerやVPC/SubnetをExportとし別スタックで利用できるように作成。
3. mTLSで必要になるルートCAの証明書、中間CAの証明書を格納するためのS3バケットを作成(Stack1)し、Bucket名をOutputsでExport
5. mTLS用の証明書(ルートCAの証明書、中間CA証明書、クライアント証明書)をコマンドで手作業で発行した。Stack1でExportし、Importできるように構成
6. ACMを利用してGUIでAPI Gatewayで利用するためのサーバ証明書を発行、Stack1でExport（別にExportしなくてもよいが気分的にやってみました）
7. API GatewayからバックエンドのInternalなALBに接続をするために、VPC Linkと Security Groupを作成(Stack2)
4. パスが未定義な状態のAPI Gatewayを定義(Stack2)
5. デプロイされたAPI Gatewayにダミーでパスを手動で１つ登録し、OpenAPI 定義をYaml形式でExport
6. ExportしたOpenAPIのYAMLを利用してPaths等を定義
7. Stack2のUpdate

### API GatewayとOpenAPI部分の内容
1. API Gatewayのスタックで定義したもの
    2.  API Gatewayが利用するIAM ROle
    3.  API Gatewayのアクセスログ出力先のCloudWatch Logグループ
    4.  API定義
        5.  OpenAPIを定義したファイルのパス指定
        6.  Access Logの設定
        7.  警告発生時は失敗にする設定
        12. Domainの設定
        13. Domain Mappingの設定
7. Open APIを定義
    8. Pathsの定義
        9. HTTP Method
        10. Path
        11. Auth
        12. Parameter Mappings
        13. Integration(ALB/Lambda)
    12. CORS
    13. Security


API Gatewayの定義をしてからOpen APIの定義をExportし、ExportされたYAMLに対して必要な定義をした方法を選択したのは、APIGatewayのOpenAPI定義について熟練者ではない私にとっては、API Gatewayで定義したものがどういう形でExportされるのか確認し、それを参考に定義するのが速く、正確な方法だと理解したためである。いちから書ける人はダミーのパス登録やExportは不要だが、簡単な方法なので構造を把握するという意味で試すとよい。

次回は実際のコマンドやテンプレートを掲載する予定