OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails】プルダウンで投稿の公開範囲を設定する方法

#イメージ


#はじめに

自分のみ閲覧できるように投稿したい！公開、非公開等投稿の公開範囲を設定したい！！！
と思った時に、該当する記事が見つからない！！！！！不便だなと思ったので、ここにまとめておきます。

#環境
この記事では以下の環境（2021年6月22日時点）で実装できました。

Ruby: 2.6.6
Rails: 6.0.3

#つけていないといけない機能
①ログイン機能
②投稿機能

#実装

既に作成したテーブルに新しくカラムを追加する場合は
カラムを追加するマイグレーションファイルを作成する。

「rails g migration クラス名　カラム名:データ型」でコマンドを実行する。

例）tweetテーブルにprivacyカラムを追加する場合

```
$rails g migration AddPrivacyToTweets privacy:string
```

コントローラーにカラム名を追加する。
例）:privacy

```ruby:tweets_controller.rb
private
    def tweet_params
        params.require(:tweet).permit(:body,:privacy)
    end
```

投稿を作成するページに以下を記述する。
例)非公開と公開で設定したい場合

```ruby:new.html.erb
 <%= f.select :privacy, [["公開", 1], ["非公開", 2]], include_blank: "選択して下さい" %>
```

投稿を表示させるページに公開に設定したい投稿範囲を設定する。
公開したい範囲の最初に以下を記入する。

```ruby:index.html.erb
<% if t.privacy=="1" %>
```

同じページに非公開に設定したい投稿範囲を設定する。

```ruby:index.html.erb
<% elsif t.privacy=="2"&&t.user.id==current_user.id %>

<% end %>
```

#完成

公開で投稿すれば全ユーザーが閲覧できるが
非公開で投稿すれば自分のみしか閲覧できない

#追記
def_indexに@tweets = Tweet.allがなかったらActionView::Template::Error (undefined method `id' for nil:NilClass):が出てしまうことがあるので、エラーがでたら追記してください
Azure Blob Storage にホストした静的 Web サイトに対して認証・認可機能を実装する

[Azure Blob Storage にホストした静的 Web サイトに対して認証・認可機能を実装する](https://github.com/kohei3110/auth-spa-on-azure)

※個人的な技術調査結果を書いていますので、会社の公式見解ではないことをご了承ください。
【AWS CDK】cdk deploy, cdk destroyの `(y/n)?`を上書きする

## はじめに

通常、`cdk deploy`、`cdk destroy`すると以下のように`(y/n)?`と表示される。

```deploy.sh
$ cdk deploy
~~
Do you wish to deploy these changes (y/n)?
```

```destroy.sh
$ cdk destroy
~~
Are you sure you want to delete: YourStackName (y/n)?
```

ただ、これらのコマンドを自動化する際はこの表示が煩わしいため、オプションなりで上書きする方法を調べてみた。

## `cdk deploy`

`--require-approval` オプションに `never` を指定する。

```sh
cdk deploy --require-approval never
```

もしくは、`cdk.json` に `"requireApproval": "never"` を追加する。

## `cdk destroy`

`-f` or `--force` オプションを用いる。

```sh
cdk destroy --force
```

## 参考

- [AWS CDK Toolkit (cdk command) - AWS Cloud Development Kit (CDK)](https://docs.aws.amazon.com/ja_jp/cdk/latest/guide/cli.html#cli-security)
- [Override / Remove y/n prompt · Issue #3894 · aws/aws-cdk](https://github.com/aws/aws-cdk/issues/3894)
- [AWS Developer Forums: override or remove the y/n prompt for a ...](https://forums.aws.amazon.com/thread.jspa?threadID=308982)
【Kotlin研修14日目】マテリアルデザインとテーマファイルの定義

# マテリアルデザインとテーマファイル
[参考: Introduction](https://material.io/design/introduction)
`マテリアルデザイン`とは、`Google`が発表した`UI設計`に関するガイドラインであり、以下の**3原則**を遵守する。

* 物質とは象徴である

> 画面は`2次元`であるが、`UI部品`を物質として扱うことで`3次元`的に配置する。

* 大胆で、生動的で、計画的である

> `印刷デザイン手法`に基づき、タイポグラフィや配置、色を工夫することで、`ユーザ`に没入体験を持たせる。

* 動きには意図がある

> `UI部品`の役割に応じた動きをつけることで、`ユーザ`に継続的に集中させる。

`Android OS`も`Google`が開発したOSであるため、標準で`マテリアルデザイン`に基づいて設計されている。

`文字スタイル`や`配色`を定義する`テーマファイル`(=`themes.xml`)においても、
`マテリアルデザイン`に準拠したものになるよう、注意する必要がある。

## マテリアルテーマ
`マテリアルデザイン`を採用する`テーマ`。

### Android SDKのマテリアルテーマ
`テーマファイル`で`テーマ`を定義する場合、`<style>`タグを用いて記述する。
また、`アプリケーション`の`全般的テーマ`を`parent`属性で定義する。

|`parent`属性|内容|
|:--|:--|
|`Theme.MaterialComponents`|暗い色|
|`Theme.MaterialComponents.Light`|明るい色|
|`Theme.MaterialComponents.DayNight`|OSの`テーマ`に依存|

#### Android SDKの代替テーマ
[上記](https://qiita.com/b150005/items/85e237d28fd4c9b4252a#android-sdk%E3%81%AE%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%86%E3%83%BC%E3%83%9E)の`全般的テーマ`にはそれぞれ、`アクションバー`の配色を同時に定義する`代替テーマ`が存在する。

|テーマ|内容|アクションバー|暗い色に最適なアクションバー|
|:--|:--|:--:|:--:|
|`Theme.MaterialComponents`|暗い色|o|x|
|`.NoActionBar`|暗い色|x|-|
|`Theme.MaterialComponents.Light`|明るい色|o|x|
|`.NoActionBar`|明るい色|x|-|
|`.DarkActionBar`|明るい色|o|o|
|`Theme.MaterialComponents.DayNight`|OSの`テーマ`に依存|o|x|
|`.NoActionBar`|OSの`テーマ`に依存|x|-|
|`.DarkActionBar`(既定)|OSの`テーマ`に依存|o|o|

***

# マテリアルデザインの配色
`マテリアルデザイン`の配色は、`テーマファイル`の`<item>`タグで定義する。
なお、配色には4種類あり、`name`属性でそれぞれ指定する。

|配色名(=`name`属性値)|内容|用途|
|:--|:--|:--|
|`colorPrimary`|メイン色|`UI部品`|
|`colorSecondary`|アクセントカラー<br>=`colorPrimary`に対して目立つ色|`UI部品`の領域枠|
|`android:colorBackground`|背景色|画面の背景|
|`colorError`|エラー色|エラー内容を表示する`UI部品`|
[Ruby]スキルチェックDの一番小さい値/timeメソッド/標準入力を配列に/配列の最小値を出力

https://paiza.jp/works/mondai/skillcheck_sample/min_num

前回に引き続き挑戦しました。
一番小さい値 (paizaランク D 相当)の練習問題です。

私の作成したコードはこんな感じです。
paizaの解説のコードは３行でした...（追々、短く書けるといいです・・・）


```
array=[]                    ←配列の空箱用意。
i=0
while i<5
input_line=gets.to_i
array[i]=input_line
i=i+1
end

puts array.min
```

<h3>配列の最小値を取り出すには...<h3>


```
puts array.min
```

<h3>失敗！配列の並び変えで最小値取り出す<h3>

最初、array.sortで配列の並びかえを行い、一番先頭の配列をputs array[0]で最小値を取り出そうと
思ったのですが、失敗でした。
.sortで配列の並びは、確かに値の小さい順に並びますが、インデックス番号?([0]とか[3]）は変わらないため、
array[0]で取り出した値は最小値ではありませんでした。



<h1>timesメソッドって何...???

paizaの解答コードではtimesメソッドが使用されていたので、
調べてみました。

https://techacademy.jp/magazine/7570

https://pikawaka.com/ruby/times


timesメソッドを使用するとこうなります。

```
array = []
5.times { array.push gets.to_i }　　　　　　#処理する回数.time 行いたい処理

puts array.min
```

引き続き、がんばります。
Markdown の一覧

# 見出し
# H1
## h2
### h3
#### h4

```md
# H1
## h2
### h3
#### h4
```




# アコーディオン
<details open>
<summary>クリック</summary>
内容内容内容内容内容内容内容
内容内容内容内容内容内容内容
内容内容内容内容内容
内容内容内容内容内容
</details>

```md
<details open>
<summary>タイトル</summary>
内容内容内容内容内容内容内容
内容内容内容内容内容内容内容
内容内容内容内容内容
内容内容内容内容内容
</details>
```
# 文字の記述

**太字(\*\*)**
__太字(\_\_)__
*斜体(\*)*
_斜体(\_)_
~~訂正線(\~~)~~
[link](http:/App.java)
> これは引用です。

```md
**太字(\*\*)**
__太字(\_\_)__
*斜体(\*)*
_斜体(\_)_
~~訂正線(\~~)~~
[link](http:/App.java)
> これは引用です。
```
※　Markdownで使用されている記号「*」などを表記させたい場合、
　「\*」とバックスラッシュ入れると表示させれます。

# コード

## 部分的のコード
 これは `code` です

## 全体的なコード
使用ファイル：java
タイトル：タイトル
「```」で囲む


```java:タイトル
  void hello()
  {
      console.log("Hello World!");
  }
```

```
## 部分的のコード
 これは `code` です

## 全体的なコード
使用ファイル：java
タイトル：タイトル
```java:タイトル
  void hello()
  {
      console.log("Hello World!");
  }

\```
↑「\」を削除して使用してください。
```

# チェックボックス(checkBox)
- [ ] これからやるタスク
- [x] 完了したタスク

```markdown
- [ ] これからやるタスク
- [x] 完了したタスク
```

# リスト
## 箇条書き(番号なし)
- リスト[ - ]
* リスト[ * ]
+ リスト[ + ]
  + a
  + a

## 箇条書き(番号あり)
1. 番号リストA
1. 番号リストB
   1. aaaa
1. 番号リストC

```markdown
## 箇条書き(番号なし)
- リスト[ - ]
* リスト[ * ]
+ リスト[ + ]
  + a
  + a

## 箇条書き(番号あり)
1. 番号リストA
1. 番号リストB
   1. aaaa
1. 番号リストC
```
# 画像添付
![いらすとや](https://1.bp.blogspot.com/-gARR6ehVBP8/UZB6YR-tXBI/AAAAAAAASCo/fZGPc8JEd6w/s800/search_mushimegane.png)

```markdown
![いらすとや](https://1.bp.blogspot.com/-gARR6ehVBP8/UZB6YR-tXBI/AAAAAAAASCo/fZGPc8JEd6w/s800/search_mushimegane.png)
```

# 線
***
```markdown
***
---
_ _ _
```
# テーブル
| header1 | header2 | header3 |
| :------ | :-----: | ------: |
| hoge    |  fuga   |    piyo |
| hoge    |         |    piyo |
「:---」... 左揃え
「:--:」... 中央揃え
「---:」... 右揃え

```markdown
| header1 | header2 | header3 |
| :------ | :-----: | ------: |
| hoge    |  fuga   |    piyo |
| hoge    |         |    piyo |
```
vscodeで{}ブロックを自動フォーマットして困った話

#はじめに
RSpecの勉強中に{}ブロックが`do...end`に変換されてしまって困った。その時の対処についてです。

#症状
```rspec
it "does not delete the project" do
   sign_in @user
   expect do   #ココ
   delete :destory, params: { id: @project.id }
   end.to_not change(project, :count) #ココ
end
```
上記のコードを記述すると、画面遷移時に`expect{}`と書いた部分が`expect do...end`となって ~~RSpecを走らせることができなかった。~~

#誤りについて
追記：2021/06/23
@jnchitoさんからコメントを頂きました。
上記の内容でエラーを再現したところ、問題なく`Rubocop`が走ることを確認しました。

よく考えてみれば、`rubocop`自体は走った上で違反に引っかかっていただけの記憶もあります。となると上記の打ち消し線の表現は正しくありませんでした。

恐らく`do...end`の部分で違反が指摘され、それが`do...end`に原因があると思い込んでいたためと思います。

ご指摘頂いたように、どちらのブロック記法でも問題なく通ることが分かりましたので、下記の対処方法は今回のシーンにおいて必要ないことが分かりました。

次からは出力結果をもっと注意深く確認して、記事にはコードの詳細に触れていきたいと思います。

下記に関しては、上記との繋がりがなくなってしまいましたが一応残しておきたいと思います。

#結論(誤り)
~~`Rubocop`のチェック対象から外して、とりあえず解決した。~~

#~~Rubocopのチェック対象から外す~~

```.rubocop.yml
# 下記ファイルはチェックの対象から外す
 Exclude:
   - "Rakefile"
   - "spec/rails_helper.rb"
   - "spec/spec_helper.rb"
```
~~`Rubocop`を導入している前提となる。この設定をしてしまうと、他のフォーマットも動作しなくなるので根本の解決にはなっていないと思う。~~

#~~Prettierの自動修正をやめる~~
```settinges.json
 "ruby.intellisense": "rubyLocate",
  "ruby.useLanguageServer": true,
  "ruby.lint": {
    "rubocop": true
  },
  "ruby.format": "rubocop",
```
コード|説明
-|-
 "ruby.intellisense": "rubyLocate"|インテリセンスの設定 (ある程度、補完、定義ジャンプができるようになる)
  "ruby.useLanguageServer": true|Language Server 使う (構文チェックしてくれるようになる)
  "ruby.lint": { "rubocop": true } | Linter は rubocop
"ruby.format": "rubocop"| format は rubocop

と

```settinges.json
  "editor.formatOnSave": true,
```
~~`Prettier`の導入と上記の記述をしている前提です。
１つの部分を削れば自動修正は行われない。全ファイルを対象にして自動修正したくなければ、`"editor.formatOnSave": true,`~~

~~ただこれもブロックだけを対象としているわけではないので、根本の解決になっていないと思う。~~

#参考元
[自動調整ツールRubocopの導入と使い方](https://qiita.com/mr0216/items/38465a8bd0210c1eeb4c)
[VSCode で Ruby 書くための設定](https://ushumpei.hatenablog.com/entry/2019/08/08/005640)
window関数で各グループ上位Nレコードを取得 [SQL]


例えば、以下のようなテーブルがあり
A組の1位~10位、B組の1位~10位、、といった感じに。
各クラスのテスト結果が1位~10位までの生徒情報を出力したい時を考える。


■studetsテーブル

id|name|class_id|score|
---|---|---|---|
||生徒の名前|クラスのテーブルの主キー|テストの点数|


### 答え

```sql
select * from (
select *, row_number() over (partition by class_id order by score desc) as num
 from studets
 ) 
where num >= 10;
```
*row_numberは、連番を降る関数。


また、以下のようにはすることは残念ながら出来ない。

``` sql
select *, row_number() over (partition by class_id order by score desc) as num
 from studets
 where num >=10

```

なぜなら where句　→　select句　といった順番で実行されるので、
where句の段階ではまだ numカラムは存在していないためエラーが起きる。
Nuxtをマルチステージビルドでコンテナ化する

# はじめに
Nuxtをコンテナ化したときの覚書です。

# マルチステージビルド
前提省きますが、一般的なNuxtの構成です。

```Dockerfile.
FROM node:14.4.0-alpine as builder
WORKDIR /app
ADD . ./
RUN yarn install
RUN yarn build

FROM node:14.4.0-alpine
WORKDIR /app
ENV HOST=0.0.0.0
ADD package*.json ./
ADD nuxt.config.js ./
COPY --from=builder ./app/src ./src/
COPY --from=builder ./app/node_modules ./node_modules/
COPY --from=builder ./app/.nuxt ./.nuxt/
EXPOSE 3000

CMD ["yarn", "start"]
```

# Docker run
```
docker build -t <image-name> .
docker run -p 3000:3000 <image-name>
```

# 参考にさせていただいたもの
私はただコピペしただけです。多謝。

https://wf-yamaday-blog.netlify.app/posts/nuxt-js-docker

https://note.com/shift_tech/n/n0f7f16f39f43
Storybook が CANNOT get / と表示された時

## 概要

Next.js + TypeScript で Storybook を使用していたのですが、突然 `Cannot GET /` と表示されました。
その時の解決法について以下に記述します。

## 解決方法

どうやら、npm と yarn を混同して使っていたのが原因みたいでした。
そこで、以下を参考に `package-lock.json` と `node_modules` を削除した後、`yarn install` しました。
すると結果、元に戻りました！

## 参考サイト

> [Slow start React guide doesn't work ](https://github.com/storybookjs/storybook/issues/5051)
【エラー解決方法】Delete `␍` eslint(prettier/prettier)

## 概要
Nuxt.jsで アプリ開発中に以下のエラーが所狭しと出力されたので、その対処方法について記載します。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122485/156febac-8eb4-edd9-3926-fcd58f778bff.png)

```
Delete `␍` eslint(prettier/prettier)
```

## 開発環境

- OS : Windows
- IDE : Visual Studio Code
- Nuxt.js : 2.15.3
- eslint : 7.22.0
- prettier : 2.2.1

## 対処方法
先に結論から。
```package.json``` の lintコマンドにオプション ```--fix``` を追記します。

```json:package.json
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext \".js,.vue\" --ignore-path .gitignore . --fix" // 追記
  },
```

```npm run lint``` を実行します。

```
> npm run lint

> nuxt-app@1.0.0 lint 
> eslint --ext ".js,.vue" --ignore-path .gitignore . --fix
```

解消されていることを確認します。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122485/ad1a27af-fd06-17e9-42b0-9c44aa102609.png)

## 原因
[prettier の End of Line のデフォルト値](https://prettier.io/docs/en/options.html)が ```lf``` なのに対して、コード内に ```crlf``` が含まれているため。

## 解説
```--fix``` はlint実行時にコードを自動補正してくれるオプションです。
コード内に ```crlf``` が含まれていたら ```lf``` に自動変換します。

もし、LF以外の改行コードを利用したければ、 ```.prettierrc``` で宣言します。

```json:.prettierrc
{
  "semi": false,
  "endOfLine": "cr"
  "singleQuote": true
}
```
JavaScriptファイルをParcelでビルドする方法まとめ

備忘録も兼ねて、初心者さん用にParcelを使ったビルドの仕方をまとめました。

## コーディングが終わったら
コーディングが終わったら、ビルドを経て一つの大きなファイルにアウトプットし、リリースできる状態にします。

具体的には、
①ビルド
・モジュールごとに開発していたらそれをひとまとまりのファイルにアウトプット
・使わないコードを削除してファイルを圧縮
②トランスパイル/Polyfilling
・古いブラウザでもコードが読み込まれるよう、モダンJavaScriptのコードをES５の文法へ揃える
　（⇨BABELというツールが行ってくれます）

これはもちろん自分でやるのではなく、ビルドツールを使い上記の作業を行っていきます。
この記事では、Parcelというビルドツールを使います。

### Parcelとは
ビルドツール。
webpackはParcelより有名だが、設定ファイルなど作るのが難しい。
Parcelなら設定ファイルの作成が不要でサクッとビルドができます。

## ビルドの仕方
npmを使ってツールをプロジェクトフォルダにインストールしてビルドしていきます。

### ①``npm init``をしたらparcelをインストール。
ターミナルで、``npm install parcel --save-dev``
(ツール系は--save-devを文末につけて、package.jsonファイルのdevDependenciesに入るようにする)

### ②ビルドする
``npm init``をしたときにできるpackage.jsonファイルにスクリプトを書いていきます。

```json:package.json
"scripts": {
  "start": "parcel index.html"
}
```

※ "start"の箇所は好きな文字列を入れてOK。
※ index.htmlの箇所はエントリポイントで、必要ならindex.html以外を入れてもOK。

ターミナルに戻り、``npm run start``としてファイルをビルドします。

> ＜補足＞
私がインストールしたParcelのバージョンは1.12.4で、うまくビルドができませんでした。
別途parcel-bundlerを1.12.3でインストールするとうまくビルドができました！
```npm i parcel-bundler@1.12.3```

ビルドが上手くできたら、下記のようにターミナルにURLが出てきます。
```Server running at http://localhost:1234```
そのURLでブラウザを開くとlive-serverのようにファイル変更するたびに手動リロードなしでブラウザがリロードしてくれます

そしてプロジェクトフォルダにdistフォルダができていると思います。
それが最終的にリリースする用のフォルダになります。

### ③トランスパイル/Polyfilling
BABELを使いトランスパイルを行うのですが、Parcelは自動的にBABELを使いトランスパイルを行ってくれます。
（※Parcelがデフォルトで読み込んでくれるBABELは、@babel/preset-envというプリセット）
実際にdist/index.htmlが読み込んでいるscriptファイルを見ると、const等がvarに変わっているのがわかります。

ただ、BABELがしてくれることは、ES6文法をES5の文法にしてくれること。
文法はES５に変換してくれるのですが、.find()やPromiseなどES6で新たに追加された「機能」は変換してくれません。

ここでPolyfillingが必要になります。
やり方は、まずターミナルで下記のようにnpmでプロジェクトフォルダにインストール。
``npm i core-js``
``npm i regenerator-runtime/runtime``

そしてscript.jsに
``import 'core-js/stable';``
``import 'regenerator-runtime/runtime';``
を書くとライブラリを読み込みPollyfillをしてくれます。
※``import 'core-js/stable';``だと、実際に使用していないES6のメソッド等も追加されてしまうので、ファイルサイズを気にするなら、例えば``import 'core-js/stable/array/find';``と書いて必要なものだけインポートすることもできます
※ regenerator-runtime/runtimeは、Pollyfillingを非同期にしてくれるものです。

### ④ファイルを圧縮
package.jsonファイルのscripts部分位に下記のスクリプトを追加します。
``"build": "parcel build index.html"``
ターミナルで``npm run build``とすると、distに圧縮されたファイルが確認できると思います
vistaでquartus その52

#概要

vistaでquartusやってみた。
avrなcpu作ってみる。
インターフェースの構想編。

#方針

シリアルを使う。
cpuは、速い。
シリアルは、遅い。どうするか。
cpuからは、in,out命令を使う。
outバッファに出力して、エージェントがシリアル出力する。
inは、エージェントがシリアルを監視して、取り込む。
cpuは、inをポーリングで待つ。
なので、モジュールは、６つ、作る。

- avr
- getc
- putc
- fifo
- agent0
- agent1

以上。
[メモ] electron-flask

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75594/0412ef16-a333-7bad-0f72-0c987aa32a5f.png)


# 概要
- https://github.com/matbloch/electron-flask を使う。
    - `readme.md`の説明に書かれてる通り

# 環境
- Windows 10 64bit 21H1 (仮想機にて確認. 2021/6/21現在)
	- Python v3.9.5 (venv使用)
	- Node,js (LTS) v14.17.1
	- 作業フォルダ: `C:\develop\`

# 手順

## インストール関連
1. PowerShellを管理者で起動。Win+x a Alt+y

2. インストール: Chocolatey (パッケージマネージャ)

	```powershell:管理者
	Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
	```

3. インストール: python nodejs git vscode

	```powershell:管理者
	cinst -y vscode git python3 nodejs-lts ; exit
	```

4. インストール: VSCodeの拡張機能 <font color='red'>(お好みで)</font>
    - PowerShellをユーザで起動(Win+x i)して、以下、こぴぺ
   
        ```powershell:ユーザ
        code --install-extension GitHub.github-vscode-theme
        code --install-extension vscode-icons-team.vscode-icons
        code --install-extension CoenraadS.bracket-pair-colorizer-2
        code --install-extension oderwat.indent-rainbow
        #
        code --install-extension ms-python.python
        code --install-extension ecmel.vscode-html-css
        ```

5. ssh serverのインストール(デバッグ用)
    - https://docs.microsoft.com/ja-jp/windows-server/administration/openssh/openssh_install_firstuse

        ```powershell:管理者
        # Install the OpenSSH Server
        Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0
        #
        # Start the sshd service
        Start-Service sshd
        # OPTIONAL but recommended:
        Set-Service -Name sshd -StartupType 'Automatic'
        ```

##  Electron-Flask

- git-clone～実行前まで。

	```powershell:
	mkdir C:\develop
	cd C:\develop
	git clone https://github.com/matbloch/electron-flask
	cd electron-flask
	# venv
	python -m venv venv
	.\venv\Scripts\Activate.ps1
	#
	python -m pip install -r requirements.txt
	npm install
	```

- 実行

	```powershell:
	# 実行:Electronにて
	cd C:\develop\electron-flask
	.\venv\Scripts\Activate.ps1
	.\node_modules\.bin\electron .
	#
	# 実行: PythonのFlask
	# Webブラウザで、http://localhost:4040/ にアクセス
	python web_app/run_app.py
	```

- パッケージ作成
  git-bash をひらいて、以下実行。distフォルダにSetupファイルができてる。

	```sh:
	# パッケージ作成
	cd /c/develop/electron-flask
	source ./venv/Scripts/activate
	#
	npm run package
	```



# その他
- デスクトップアプリを作るとき、マルチプラットフォーム(Win/Linux)、Python使う、ってので調べてた時に見つけた
- アプリを立ち上げたまま、ブラウザで、`http://localhost:4040/`にアクセスすると、つながる。
vistaでquartus その51

#概要

vistaでquartusやってみた。
avrなcpu作ってみる。
環境を整える。

#環境

windows vista 32bit
tera term
quartus ii v13.0
ep2c5t144ボード
usb blaster
usb serial

#手順

- 電源をつなぐ。
- usb blasterをつなぐ。
- usb serialをつなぐ。
- 4番ピン、白、８番ピン、緑
- quartus起動、test2.qpfを選択。
- start compilationする。
- programmerで焼く。
- tera termを開く。
- シリアルを開く。

以上。
機械学習

#線形回帰モデル

線形回帰は、連続値をとる目的変数yと説明変数xの線形関係をモデル化します。線形関係とは、説明変数が増加（減少）するのに応じて、目的変数も単調に増加（減少）する関係です。説明変数が一つの場合を単回帰と呼び、説明変数が複数の場合を重回帰と呼びます。単回帰の式は、目的変数と説明変数の関係をモデル化する線形回帰モデルは以下で定義される。

```math
{y = w_0 + w_1x}
```

重回帰の式は、目的変数を説明変数の線形和で表現する線形回帰モデルは以下で定義されます。

```math
{y = w_0x_0 + w_1x_1 + \cdots +w_mx_m = \sum^m_{i=0}w_ix_i}
```

確率的勾配降下法におけるパラメータθの更新式

```math
θ_{t+1}=θ_{t}-\frac{\partial{f}}{\partial{x}}
```

モーメンタムにおけるパラメータθの更新式

```math
θ_{t+1}=θ_{t}-\frac{\partial{f}}{\partial{x}}
```

#非線形回帰モデル

回帰モデルが線形でないモデル。
非線形の場合は、基底展開法を用いる。

基底関数
ある関数を表現するの基底ベクトルのこと。
対象となる空間に属する全ての元（関数）は、この基底関数の線形結合で表される。
この基底関数と呼ばれる非線形関数とパラメータベクトルの線形結合を使用。
未知パラメータは最小二乗法や最尤法により推定する。

基底関数として、使われるものは次の通り。
多項式基底
ガウス型基底関数
スプライン関数/Bスプライン関数

#ロジスティック回帰モデル
#主成分分析
ライブラリ
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import sklearn
import scipy as sp
from sklearn.decomposition import PCA
from sklearn.preprocessing import StandardScaler
from pandas import plotting

データ
data = np.array([[-1, -1], [0, 0], [1, 1]])

標準化
sc = StandardScaler()
data_std = sc.fit_transform(data)

相関関数の算出とグラフ化
print('相関関数{:.3f}:'.format(sp.stats.pearsonr(data_std[:, 0], data_std[:, 1])[0]))
plt.scatter(data_std[:,0], data_std[:, 1])
plt.show()
![Figure_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670192/09fc8c4a-ed4b-e8d3-fac8-67a9111f6a5e.png)

主成分分析
pca = PCA(n_components = 2)
pca.fit(data_std)

固有ベクトル
print(pca.components_)

分散
print('各主成分の分散:{}'.format(pca.explained_variance_))

分散割合
print('各主成分の分散割合:{}'.format(pca.explained_variance_ratio_))

結果
相関関数1.000:
[[ 0.70710678  0.70710678]
 [ 0.70710678 -0.70710678]]
各主成分の分散:[3.00000000e+00 5.15937696e-33]
各主成分の分散割合:[1.00000000e+00 1.71979232e-33]
#アルゴリズム
#サポートベクターマシーン
[LaTeX][Fedora]latexindentコマンドを動かすまで

# 環境
- Fedora35
    - perl5.34.0
- texlive2021
    - latexindent3.9.3

# 背景
texliveでLaTeX環境をインストールし、VSCodeを使ってLaTeXを書いている。  
文書の整形を行ないたくLaTeX Workshopを入れてみたのだが、下記のようなエラーが出てうまく動作しなかった。 
 
```terminal
Formatting failed. Please refer to LaTeX Workshop Output for details.
```

ネットで色々と調べると、LaTeX Workshopのフォーマッタの本体はtexliveに同梱されている`latexindent`コマンドであるようで、このコマンドが正常に実行されていなかったようだ。  
ちなみにlatexindentコマンドをコンソールで動かすと次のようなエラーが出ていた。

```terminal
$ latexindent --version
Can't locate FindBin.pm in @INC (you may need to install the FindBin module) (@INC contains: /usr/local/lib64/perl5/5.34 /usr/local/share/perl5/5.34 /usr/lib64/perl5/vendor_perl /usr/share/perl5/vendor_perl /usr/lib64/perl5 /usr/share/perl5) at /usr/local/texlive/2021/bin/x86_64-linux/latexindent line 22.
BEGIN failed--compilation aborted at /usr/local/texlive/2021/bin/x86_64-linux/latexindent line 22.
```

# 解決策
このコマンドを動かすにはPerlのモジュールを追加でインストールしてやる必要があるようだ。
たとえば次のようにしたら正常に動くようになった。

```bash
sudo dnf install perl-FindBin perl-open perl-YAML perl-YAML-Tiny perl-File-HomeDir perl-Unicode-LineBreak
```

CPANはあまりつかったことがなかったので、OS標準のパッケージ管理ソフトdnfでやってしまったがCPAN経由で入れるのが正攻法だとは思う[^1]。  
[^1]: `Can't locate Unicode/GCString.pm in @INC (you may need to install the Unicode::GCString module)`というエラーが出た時、どのパッケージにこのモジュールが入っているのかわからず10分くらい悩んだ。結局`perl-Unicode-LineBreak`パッケージの中に入っていたのだが、CPANが使えたら悩む必要がなかった。

# 参考リンク
https://qiita.com/khys/items/332c3a3f34a82acf7a7a
[Rails]Arrayメソッド fromとto の使い方

## はじめに
Railsで使えるArrayメソッドの`from`と`to`を使用したので備忘録として残しておきます。

## 使い方

#### 1. from
`from`は引数に指定した位置から配列の最後までの要素を配列として返します。

```
[0,1,2,3].from(2) 
=> [2,3]
```


#### 2. to
`to`は引数に指定した位置まで要素を配列として返します。

```
[0,1,2,3].to(2)
=> [0,1,2]
```
Vue.js を使って、 Azure Static Web Apps の認証・認可機能を確認する

[Vue.js を使って、 Azure Static Web Apps の認証・認可機能を確認する。](https://github.com/kohei3110/auth-static-web-app)

※個人的な技術調査結果を書いていますので、会社の公式見解ではないことをご了承ください。
pandasでカンマ区切りをグループ単位で行展開

# はじめに
|user_id|created_at|editor|
|---|---|---|
|12345  |2020-01-01|atom,vim,vi|
|23456  |2020-01-02|vim,pycharm|
のように、editor列をuser_id単位に行を展開したい場合、たまにありますよね。こんな風に

|user_id|created_at|editor|
|---|---|---|
|12345  |2020-01-01|atom|
|12345  |2020-01-01|vim|
|12345  |2020-01-01|vi|
|23456  |2020-01-02|vim|
|23456  |2020-01-02|pycharm|

そんな時、pandasを使って可変する場合どうするか。

# 変形
アプローチは色々ありますが、一つ、stackを使う場合を想定します
列の数が多い場合に関しては、stackを使うのが有用ですが、少ない場合itertools.chainやnumpy.repeatを用いる場合もあります。
コードの可読性は決して高いとは言いませんが。。。

```python
>>> import pandas as pd
>>> df = pd.DataFrame({'user_id':[12345,23456],
...                   "created_at":['2020-01-01','2020-01-02'],
...                   "editor":["atom,vim,vi","vim,pycharm"]})
>>> df = df.set_index(['user_id','created_at']).apply(lambda x : x.str.split(',')).stack(
...     ).apply(pd.Series).stack().unstack(level=2).reset_index(level=[0,1])
>>> df
   user_id  created_at   editor
0    12345  2020-01-01     atom
1    12345  2020-01-01      vim
2    12345  2020-01-01       vi
0    23456  2020-01-02      vim
1    23456  2020-01-02  pycharm
```
Docker上のRailsのActiveStorageでActiveStorage::IntegrityErrorが出る

# 背景
私は普段Railsのアプリ開発でDockerではなくローカル上のrbenvから起動しているので遭遇しなかったのですが、最近フロントの業務委託の方からセットアップ時に `ActiveStorage::IntegrityError` が出て作業が進められないという連絡があり、調査することになりました。

# 原因
`Rails ActiveStorage IntegerityError Docker` といったワードで検索したところ、まず最初に[こちら](https://scrapbox.io/ohbarye/ActiveStorage::IntegrityError_on_Docker_for_Mac_3.3.0)のサイトが見つかりました。ここにあるgithubのissueを見たところ、どうも原因はDocker for Macのバグ？ということでした。

# （一時的な）解決方法
いくつかあったのですが、手っ取り早い方法をいくつか

### 1. Docker for Macのダウングレード
先程のサイトにもあるように、とりあえずDocker for Macを3.2.2にダウングレードするのが手っ取り早いと思います。ただ「ダウングレードするのはちょっと・・・」という方は次の方法を試すと良いかもしれません。

### 2. `TMPDIR` の設定
[こちら](https://github.com/docker/for-mac/issues/5570#issuecomment-847138515)にあるように、一旦`TMPDIR`を`/tmp`から`/app/tmp`等に変更する方法です。docker-composeを使っているのでしたら以下のように`environment`を設定することで簡単にできます。

```docker-compose.yml
version: "3"
services:
  rails:
    environment:
      TMPDIR: /app/tmp
```
しかし、もちろんこの方法には `TMPDIR: /app/tmp`という余計な記述をコミットしてしまうというリスクがあります。ただフロントエンドのみを開発する方などはそのレポジトリ上でgit操作をすることもないので、そういう方にはおすすめかもしれません。また、[このように](https://docs.docker.com/compose/extends/)手元のローカル上でのみ `docker-compose.yml` ファイルを上書きするのもアリかもしれませんね。

# まとめ
完全に一時対応ではありますが、私の周り以外でも困っている方がいるかもしれないのでメモとして投稿しました。早めに根本的な原因のバグが直ると良いですね。もし他にもこういう良い方法があるとか、もうすでにこの構成だとそんな対応しなくても大丈夫とか、何か情報がありましたらぜひ教えてください。
short_open_tagを有効にする方法【php7.2以上】

php勉強して数ヶ月…

```php
<?php *** ?>
```

「php」って毎度書くのめんどくない？！
と気付いたので、ショートカットできる方法を探した。
当方、**PHP Version 7.2.33**。
>  `php.ini` ファイル内の `short_open_tag ` を `On `にすれば良い

とのことで早速実践！

1つ目の段落では、デフォルトで↓
>; short_open_tag
;   **Default Value: On**
;   Development Value: Off
;   Production Value: Off

だけど、phpをショートカットできていない（現状そうだった
では次の段落。

>; Default Value: On
; Development Value: Off
; Production Value: Off
; http://php.net/short-open-tag
**short_open_tag=Off**

↑この `short_open_tag` が怪しいので早速 `On` へ変更！

無事に、

```php　
<? ***** ?>
```
で書けましたー！！
意外とあっさり解決できたので、満足しているうちにQiitaに書き留めます:writing_hand:
【Vue】webpack（等のバンドラ）が使えないときの x-template【CodePenとかに使える】

# x-template とは
https://jp.vuejs.org/v2/guide/components-edge-cases.html#X-%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88

> テンプレートを定義する別の方法は、type 属性text/x-templateを用いたスクリプト要素の内部で定義することです。そのとき、id によってテンプレートを参照する必要があります。

## what?
webpackとかがなくてSFCが使えないときのVueの書き方は一般的にこんな感じ

```vue:main.js
const App = {
  template: `
    <div>
      Hello World!
    </div>
  `
}

Vue.createApp(App).mount("#app");
```

わかる

これを、こんな感じにできる

```html:index.html
<body>
  <div id="app" />
</body>

<script id="component" type="text/x-template">
  <div>Hello World!</div>
</script>
```

```js:main.js

const App = {
  template: "#component" // x-template を探すセレクタを書く
}

Vue.createApp(App).mount("#app");
```

つまり、 template をHTMLとして書くことができる

## 何がうれしいの？

上述の例だとコードがシンプルすぎて分かりづらいが、コンポーネントを持つVueアプリケーションをバンドラなしで作りたいときに便利だと思う。
CodePenみたいな環境でSFCっぽいものを再現できるし。

### 例っぽいもの

```html:index.html
<body>
  <div id="app">
    <Parent />
  </div>
</body>

<script id="Parent" type="text/x-template">
  <div>
    <Child @from-child="emitFromChild" />
    <input type="text" v-model="parentText" />
  </div>
</script>

<script id="Child" type="text/x-template">
  <div>
    parent
    <button @click="emitFromChild">Emit!</button>
    <p>{{ text }}</p>
  </div>
</script>
```

```js:main.js
const Child = {
  template: "#Child",
  data() {
    return {
      text: ""
    };
  },
  methods: {
    emitFromChild() {
      this.$emit("fromChild", { fireFromParent: this.fireFromParent });
    },
    // このメソッドは子コンポーネントのスコープを持っている
    fireFromParent(text) {
      console.log("I'm Child");
      this.text = text;
    }
  }
};

const Parent = {
  template: "#Parent",
  components: {
    Child
  },
  data() {
    return {
      parentText: "from Parent !"
    };
  },
  methods: {
    emitFromChild(obj) {
      console.log("I'm Parent");
      obj.fireFromParent(this.parentText);
    }
  }
};

const App = {
  components: {
    Parent
  }
};

Vue.createApp(App).mount("#app");
```

https://codepen.io/fruitriin/pen/wvJbBXm?editors=0001
Python Challenge level 1

相変わらず[Python Challenge](http://www.pythonchallenge.com/)を解いていきます。ネタバレするのでこれからPython Challengeをやろうと思っている人は見ないでください。

#level 1
http://www.pythonchallenge.com/pc/def/map.html

ページを開いてみるとノートに書かれた謎の対応表が出てきます。
![map.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62130/76cf20c9-965a-1d72-36d6-06bd0e22eec6.jpeg)

キャプションには、"everybody thinks twice before solving this."、これを解く前に2回考えろ、という謎のヒント。さらにその下には、
>g fmnc wms bgblr rpylqjyrc gr zw fylb. rfyrq ufyr amknsrcpq ypc dmp. bmgle gr gl zw fylb gq glcddgagclr ylb rfyr'q ufw rfgq rcvr gq qm jmle. sqgle qrpgle.kyicrpylq() gq pcamkkclbcb. lmu ynnjw ml rfc spj.

という謎の文字列。これを解けということか。

単純に思いつくのはシーザー暗号ですね。実際、

K -> M
O -> Q
E -> G

これらはちょうどアルファベット順で２文字ずらしたものになっています。KLM, OPQ, EFGしかり。

いろいろ試行錯誤もしたのですが、結果だけ載せると

```python:1.py
#!/usr/bin/env python3

ss = "g fmnc wms bgblr rpylqjyrc gr zw fylb. rfyrq ufyr amknsrcpq ypc dmp. bmgle gr gl zw fylb gq glcddgagclr ylb rfyr'q ufw rfgq rcvr gq qm jmle. sqgle qrpgle.kyicrpylq() gq pcamkkclbcb. lmu ynnjw ml rfc spj."

ts = ""
initord = ord('a')
for s in ss:
    if s.isalpha():
        ts = ts + chr(((ord(s)-initord)+2)%26 + initord)
    else:
        ts = ts + s
print(ts)
```

その結果は
>i hope you didnt translate it by hand. thats what computers are for. doing it in by hand is inefficient and that's why this text is so long. using string.maketrans() is recommended. now apply on the url.

という文章が出てきました。string.maketransがおすすめだ、urlにシーザー暗号を適用しろという内容です。

まず前者のstring.maketransがおすすめということなので、使って書き直してみました。maketransの使い方はhelpを参照してください。

```python:1dash.py
#!/usr/bin/env python3

ss = "g fmnc wms bgblr rpylqjyrc gr zw fylb. rfyrq ufyr amknsrcpq ypc dmp. bmgle gr gl zw fylb gq glcddgagclr ylb rfyr'q ufw rfgq rcvr gq qm jmle. sqgle qrpgle.kyicrpylq() gq pcamkkclbcb. lmu ynnjw ml rfc spj."

import string
base = string.ascii_lowercase
trans = base[2:] + base[:2]
table = str.maketrans(base,trans)
print(ss.translate(table))
```

確かにやたら簡潔に書くことができるようになりました。

そして後者は、これをURLに適用しろということでしたね。実際やってみると、

```python:
print("map".translate(table))
```

その結果は
>ocr

となりました。つまりURLをmap -> ocrに書き換えろということですね。

## level 2
次への扉がひらかれました。mapといいつつmap関数は使いませんでしたね。
http://www.pythonchallenge.com/pc/def/ocr.html
疎行列 ― J 言語入門

J は、普通の配列以外に、疎行列も扱うことができます。特定の分野以外では使わないと思いますが、紹介だけしておきます。

# 配列の種類

普通の配列は、特に密な配列 (dense array) と呼ぶことがありますが、1 つの要素に対して 1 つの値が割り当てられるので、要素数と必要なメモリの量が比例します。

大きな行列を扱う計算では、ほとんどの要素が 0 であるような配列が必要になることがありますが、密な配列を使うとメモリを無駄に消費することになります。

そこで代わりに使われるのが、疎な配列 (sparse array)、すなわち疎行列です。この表現方法では 0 で*ない*要素だけを格納するので、効率的です。一般的には疎行列という用語が使われますが、この記事では「密な配列」との対比のために敢えて「疎な配列」と呼ぶことにします。

J では密な配列と疎な配列の 2 種類の配列を使うことができます [^1]。

# 相互変換

密から疎への変換には、`$.` (monad) を使います。

```j
   a=: 0 1 0 0 3 0 2 0 0
   b=: $.a
   b
1 │ 1
4 │ 3
6 │ 2
```

疎な配列は、0 以外の要素を並べて表示されます。`│` の左側が要素のインデックス、右側が値です。

逆の変換には `$.` を dyad として使います。左側の引数は `0` です。

```j
   0 $. b
0 1 0 0 3 0 2 0 0
   a
0 1 0 0 3 0 2 0 0
```

きちんと元の配列に戻っているのが確認できましたね。

# 比較・計算

疎な配列と密な配列は、同じように扱うことができます [^2]。

比較の際は、長さと各要素の値が同じなら等価と見なされます。

```j
   b -: a
1
```

混ぜて計算してもエラーにはなりません。

```j
   a + b
1 │ 2
4 │ 6
6 │ 4
```

また、配列に関する基本的な操作が同じように使えます。

```j
   #b
9
   4 { b
3
   1 i. b
1 │ 0
4 │ 1
6 │ 1
```

# 配列の型

密な配列と疎な配列は、別の型として扱われます。次の `datatype` の結果を見ればわかると思います。

```j
   datatype a
integer
   datatype b
sparse integer
```

密な配列は、要素の型がそのまま配列の型になります。一方、疎な配列は前に `sparse` と付け加えられています。異なる方法で値を表現しているので、別の名前を割り当てているのでしょう。

---

前回に続いて、マイナーなデータ型の紹介でした。次は、これまでの内容をまとめた記事にしたいと思います。

---

\[ 前 : [シンボル](https://qiita.com/unsigned-wrong-wrong-int/items/174cab8807feb3ac5584) \] \[ [目次](https://qiita.com/unsigned-wrong-wrong-int/items/e15a87999cedfc6b9ced) \] \[ 次 : [データ型のまとめ](https://qiita.com/unsigned-wrong-wrong-int/items/cf81b30258582f89676e) \]

[^1]: 密な配列の方が圧倒的に使用頻度が高いので、単に「配列」と言った場合密な配列を指すことが多いです。
[^2]: ただし、密な配列にしか使えない機能もあります。
【Vue】子コンポーネントから親コンポーネントに関数をemitするっていうアイデアを思いついた

子コンポーネントと親コンポーネントを行ったり来たり。
思いついたので公開しておく。（世間的には当たり前かもしれない）

オブジェクトにメソッドを持たせることを思いつけばemitもできてたのしい
なにかの拍子に役に立つかも。

CodePen
https://codepen.io/fruitriin/pen/wvJbBXm?editors=0001

```vue:parent.vue
<template>
  <div>
    <Child @from-child="emitFromChild" />
    <input type="text" v-model="parentText" />
  </div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      parentText: "from Parent !",
    };
  },
  methods: {
    emitFromChild(obj) {
      console.log("I'm Parent");
      obj.fireFromParent(this.parentText);
    },
  },
};
</script>
```

```vue:Child.vue
<template>
  <div>
    <button @click="emitFromChild">Emit!</button>
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    emitFromChild() {
      this.$emit("fromChild", { fireFromParent: this.fireFromParent });
    },
    // このメソッドは子コンポーネントのスコープを持っている
    fireFromParent(text) {
      this.text = text;
    },
  },
};
</script>
```
InDesign スクリプト 変数値と一致するテキストを変数に

変数値と一致するテキストを変数にするスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
更新 2021/6/22
*/

// アプリ指定
#target "indesign";

// スクリプト名
var scriptName = "変数値と一致するテキストを変数に";

//スクリプト動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名の指定）
app.doScript(function () {

    // ダイアログ
    var dialogueFlg = confirm("カスタムテキスト変数の値と一致するテキストを変数に置換します。"
    + "\r\r" + "選択がない場合はアクティブドキュメント全体で置換、選択がある場合は選択内で置換します。 ", "", scriptName);

    // Ｎｏの場合
    if (dialogueFlg == false) {

        // スクリプトを終了
        exit();
    }

    // 置換数
    var replaceNumber = 0;

    // 検索の初期化
    app.findTextPreferences = NothingEnum.nothing;

    // テキスト変数の数だけ繰り返す
    for(var i = 0; i < app.activeDocument.textVariables.count(); i++){

        // カスタムテキスト変数の場合
        if(app.activeDocument.textVariables.item(i).variableType == VariableTypes.CUSTOM_TEXT_TYPE){

            // 検索テキストに変数名を入れる
            app.findTextPreferences.findWhat = app.activeDocument.textVariables.item(i).variableOptions.contents;

            // 選択がない場合
            if(app.activeDocument.selection.length == 0){

                // テキスト変数挿入
                replaceNumber += insertTextVariableInstanceByContents(app.activeDocument,app.activeDocument.textVariables.item(i));

            // 以外の場合
            }else{

                // 選択の数だけ繰り返す
                for (var ii = 0; ii < app.activeDocument.selection.length; ii++){

                    // オブジェクトのメソッドにfindTextがある場合
                    if (typeof(app.activeDocument.selection[ii].findText) == "function"){

                        // テキスト変数挿入
                        replaceNumber += insertTextVariableInstanceByContents(app.activeDocument.selection[ii],app.activeDocument.textVariables.item(i));
                    }
                }
            }
        }
    }

    // 検索の初期化
    app.findTextPreferences = NothingEnum.nothing;

    // 結果の文
    var resultText;

    // 選択がない場合
    if(app.activeDocument.selection.length == 0){

        // 入れる
        resultText = "アクティブドキュメント全体で置換をおこないました。";

    // 以外の場合
    }else{

        // 入れる
        resultText = "選択内で置換をおこないました。";
    }

    // 結果を表示
    alert(resultText + "\r\r" + "置換数 " + replaceNumber, scriptName);

//スクリプト動作指定（一つのアンドゥ履歴にする及びアンドゥ名の指定）の続き
}, ScriptLanguage.JAVASCRIPT, [scriptName], UndoModes.ENTIRE_SCRIPT, scriptName);

/* テキスト変数挿入関数、引数（検索対象、テキスト変数）の宣言 */
function insertTextVariableInstanceByContents(searchTarget,targetTextVariable) {

    // 検索結果の配列
    var searchResultArray = searchTarget.findText();
    
    // 検索結果の範囲
    var searchResultRange;
    
    // 置換数
    var replaceNumber = 0;

    // 逆順に検索結果の数だけ繰り返す
    for(i = searchResultArray.length - 1; i >= 0; i--){
        
        // 範囲を入れる
        searchResultRange = searchResultArray[i].characters.itemByRange(0,-1);

        // テキスト変数を挿入
        searchResultArray[i].insertionPoints.lastItem().textVariableInstances.add().associatedTextVariable = targetTextVariable;
        
        // 検索結果を削除
        searchResultRange.remove();
     
        // 数を増やす
        replaceNumber++;
    }

    // 置換数を戻す
    return replaceNumber;
}
~~~
絶対Visual Studio Codeでフォーマッターを一時無効にするマン

ほかの人と共有しているファイルをVSCodeで少し編集したらファイルフォーマッターが作動してほとんどすべて書き換えられて頭を抱えたとき用の備忘録です。

- EditorConfig for VS Codeを現在のワークスペースで無効にする。
- 現在のワークスペース用の設定を、設定ファイルに**直に**書き込む。

```&nbsp;.vscode/settings.json
{
    "editor.formatOnPaste": false,
    "editor.formatOnSave": false,
    "editor.formatOnType": false,
    "files.trimTrailingWhitespace": false
}
```
Reactでステート変数を使用する際に注意する点の備忘録 

#ステート変数はセッターでないと値を変更できない
Reactを触っていれば必ず使う事になるステート変数。

```
const [var, setVar] = useState(初期値);
```

これを使うにあたり、少し複雑だなと感じた部分について記事にさせていただきます。

例えば、次のような10個の要素を持つ配列型のステート変数を宣言したとします。

```
const [arry, setArry] = useState([]);
setArry([...Array(10)]);
```

このarryに対して、spliceメソッドを使って２番目の要素を取り除きたいとします。
そのためには次のように記述する必要があります。

```
const newArry = [...arry];
newArry.splice(2, 1);
setArry(newArry);
```

ステート変数はセッターでなければ変更できないので、spliceを直接arryに使用するわけにはいきません。従って、スプレッド構文を使って...arryを要素とする新しい配列newArryを宣言し、newArryに対してspliceを実行するわけです。そして、要素を取り除いたnewArryをarryに対してセッターでセットします。

#まとめ

初めてReactを使った時、なかなかすんなりと理解できなかった部分だったので、記事にさせていただきました。
同じような点で躓いた方がおられれば、参考になれば幸いです。
webpackerでBootstrap4の導入

# 初めに
Railsでwebpackerを使ってBootstrap4の導入方法のまとめ。
# 導入手順
1. Gemfileにwebpackerを追加して、インストール
（今回は既に入っていたので、飛ばしてます。）
  ```Gemfile
   gem 'webpacker', '~> 3.5
   ```
2. bundle installの実行
3. Webpackerをプロジェクトにインストール
　`bundle exec rails webpacker:install`
 これでWebpackerを実行するための各種ファイルが生成。
4. app/javascript以下にsrcというディレクトリを作成し、application.scssを作成。
 ディレクトリはapp/javascript/src/application.scssとなる。
4. Bootstrapの導入
`yarn add bootstrap@4.3.1 jquery popper.js`を実行
5. BootstrapのJSをapp/javascript/packs/application.jsで、
CSSをapp/javascript/src/application.scssでインポート
```app/javascript/packs/application.js
import 'bootstrap'
import '../src/application.scss'
```
```app/javascript/src/application.scss
@import '~bootstrap/scss/bootstrap';
```
をそれぞれ追記。
6. アプリケーションがWebpackerでビルドしたJS/CSSを読み込むよう設定する。
```app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>RailsBootstrapTemplate</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

+    <%= javascript_pack_tag 'application' %>
+    <%= stylesheet_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
```
以上。
# 参考資料
[webpackerでBootstrap4の導入方法](https://qiita.com/rhistoba/items/f724dae231d7e28bf477)
Carrierwaveの実装　

## はじめに
画像登録の実装の際に、carrierwaveを用いて実装しました。
その時に調べたこと感じたことの記録です。
## 結論
実装自体は単純で、使い勝手が良い。
ドラッグ＆ドロップなどにも対応可能。
## 手順
### 1. インストール
ターミナル上で以下のコードを実行し、最新版のcarrierwaveをインストール
`$ gem install carrierwave`
Gemfile内に以下を追加
`gem 'carrierwave', '~> 2.0'`
### 2. 実装
1. `uploader`の実装
以下のコードを実行して、`uploader`を実装する。
```terminal
$ bundle exec rails generate uploader ###
```
`###`の部分は`image`や`avator`など、その時のカラムに合わせて変えてください。
そうすると
```
app/uploaders/###_uploader.rb
```
というファイルが作成されている。
中身は「保存先の指定」「アップロードする画像の種類」などの指定ができる。

2. uploaderを作成したら、モデルとの関連付け
以下のコードを関連付けしたいモデルに追記する。
（今回で言うと、document_images.rb)
```
mount_uploader :carrierwave用に作ったカラム名, carrierwaveの設定ファイルのクラス名
```

3. ファイルのアップロード
viewで画像を登録するのに、以下をviewのファイル書く。
今回はnew.html.erbにコードを書いてます。
```new.html.erb
<%= f.label :image %>
<%= f.file_field :image %>
```

## 注意点
複数枚の画像を登録する場合、まとめたファイルがdbに登録されます。
そのため、1枚1枚の写真を取り出すには別のメソッドを使用する必要があるそうです。
[【Rails】画像を複数投稿したい](https://qiita.com/miyyuk/items/cacdc5abb009d3307c5d)
参考サイトにもありますが、アンチメソッドのようです・・・
また、
```
mount_uploader :carrierwave用に作ったカラム名, carrierwaveの設定ファイルのクラス名
```
の`mount_uploader`を複数形にすると、carrierwave用に作ったカラムを配列形式で扱わないといけなくなるので、タイポ要注意です！
## さいごに
上記内容で、一通り実装は出来ます。
が、アンチメソッドを使った実装はまだしていないので、挙動は不明です。
ドキュメント自体に画像が登録されるかについても、show.html.erbにコードを書いていないので、別の記事で書きます！
残プロ　第-20回　~最速でFlaskを理解する~

# Flaskでhello.py

Flaskを使用する場合，おそらく一番単純なhello.pyが下記になります．

~~~ python:hello.py
import flask

app = flask.Flask(__name__)

@app.route('/hello')
def hello():
    return "Hello, World!"

if __name__ == '__main__':
    app.run()
~~~


### app=flask.Flask(__name__)

Flaskクラスのインスタンスを作成しています．__name__を渡すことでflaskがテンプレートを探しやすくなります．

> The first argument is the name of the application’s module or package. __name__ is a convenient shortcut for this that is appropriate for most cases. This is needed so that Flask knows where to look for resources such as templates and static files.

### @app.route('/')

pythonで@といえばデコレータですね．次の行で定義する関数helloに挙動を追加しています．
flaskではrouteを使用することでwebサイトのルーティングが実装できます．今回は'/'を指定しているため，http://127.0.0.1:5000/hello がリクエストされた際に，関数helloが実行されます．

### return "Hello, World!"

文字列を返り値とすることで以下のhtmlが得られます．htmlタグを用いることも可能です．

~~~ html:hello.html
<html>
    <head>
    </head>
    <body>Hello World!</body>
</html>
~~~

### app.run()

runメソッドによってflaskを動かします．tkinterのmainloopと同じ感じでしょうか．
POSIX MQは今いちイケてない

#TL;DR
標準仕様が使いづらいパラメータってのはどうなんよ？
動的にパラメータを変更させてくれよ。
#POSIX MQは便利で不便
POSIX MQは使ってみればわかるが便利だ。

- 高速（UDS/NamedPipe比）
- Read/Writeどちらが先にOpenしてもよい
- 両端を閉じても再びOpenすればデータが残っている（これは欠点でもある）
- リブートすればキューが消えるので後始末不要（これは欠点略

そんな使いやすいPOSIXメッセージキューだが大きな欠点がある。
パラメータのチューニングがシステムパラメータでしかできない。
設定は /proc/sys/fs/mqueue/ 配下に置かれている。
はい、ファイルです。編集には特権が必要です。まずこの時点でクソ。

キューのパラメータは標準では

- メッセージ数10
- メッセージサイズ8192 bytes

となっている。このパラメータ選定がさらにクソである。
メッセージサイズ8KBで保持数10とかまったく融通が利かない。

#UDS/Pipeと比較して
IPCの仕様を検討する場合、UDSやPIPEのようにストリームならNo Settingだ。
ただしメッセージ区切りがないのでWrite側がオーバーランすると面倒である。

その点、MQは固定サイズメッセージの配列と考えることができる。
Write側が多少オーバーランしても、Read側のまとめ読みで帳尻合わせできる。
固定サイズメッセージだから区切りもわかるしデータの振り分けもできる。
だが上記の基本パラメータは使いにくい。
#パラメータ変更のAPI
あることはある。とってもとっても使えないAPIだがある。
その名も[mq_setattr()](https://linuxjm.osdn.jp/html/LDP_man-pages/man3/mq_getattr.3.html)である。
だがこのAPI、メッセージ数もメッセージサイズも変更できない。
変更可能なのはキューのブロッキング属性のみである。
いやいやそんなもん**ブロッキングで使うに決まってる**でしょ。
yield()しながらノンブロッキングで高速回転なんて無駄すぎる。
まあそれにしてもメッセージ数とメッセージサイズは変更したかった。
4KB x 20msg とか
256byte x 320msgとか
柔軟な使い方がしたかったのだができない。できないものはできない。
#ということで
IEEE様がPOSIX MQの仕様を拡張してくれることを願うのみである。
有志では、メッセージキューの仕組みをso(DLL)で実現した人もいる。
本当に自由度のあるキューがほしいなら自作しかないのだろう。
とても残念だ。
【メモ】cProfile でプロファイリング

* 製造業出身のデータサイエンティストがお送りする記事
* cProfile でどこの処理で時間がかかっているかを調べられることを知ったので、メモとして残しておきます。

## はじめに
cProfile は、プログラムのどこで実行にどれだけ時間がかかったのかを提示してくれます。
普段、あまり使うことは無いのですが、処理を早くしたい時などに使える機能だなと思いました。

## 使い方

基本的な使い方は、`-m cProfile` を付けて.pyファイルを実行すると使えます。

```sample.py
def main(N):
    for i in range(N):
        pass
    a()
    b()

def a():
    pass

def b():
    for i in range(N):
        pass

if __name__ == '__main__':
    N = 10**6
    main(N)
```

実行結果は下記です。

```
~/Desktop ❯ python -m cProfile sample.py
         7 function calls in 0.074 seconds

   Ordered by: standard name

   ncalls  tottime  percall  cumtime  percall filename:lineno(function)
        1    0.000    0.000    0.074    0.074 sample.py:1(<module>)
        1    0.022    0.022    0.074    0.074 sample.py:1(main)
        1    0.020    0.020    0.029    0.029 sample.py:13(b)
        1    0.000    0.000    0.000    0.000 sample.py:9(a)
        1    0.000    0.000    0.000    0.000 {method 'disable' of '_lsprof.Profiler' objects}
        2    0.032    0.016    0.032    0.016 {range}
```

簡単に各項目の説明を下記に記載します。

|項目|概要|
|:--|:--|
|ncalls|呼び出し回数|
|tottime|関数で消費した合計時間|
|percall|tottime をncalls で割った値|
|cumtime|関数全てのsubfunction に消費された累積時間|
|percall|cumtime をプリミティブな呼び出し回数で割った値|
|filename:lineno(function)|ファイル名、行番号、関数名|


##さいごに
最後まで読んで頂き、ありがとうございました。
本日は短いですが、cProfile でプロファイリングできることを知りましたのでメモとして残しておきました。
ルパンのサブタイトルをVueを使って再現してみた

# はじめに
``Vue.js``の勉強がてら何か動きのあるページを作ってみようと思い、今回のものを作りました。
初めて``Vue``を触った+基礎しか理解できていないということでコードが雑になっています。
あしからず。
# 概要
ルパンのサブタイトル（ググれば出てくる）を再現できるWebアプリを作ってみた。
理由は最初にある通り。細かく言えばVue独特の**双方向のデータバインド**を試したかった。
# 環境
## 開発環境
- MacOS Sierra(10.12)
- vue(2.6.12)
- Vim

## 実行環境（サーバサイド）
- AWS
    - EC2(Amazon Linux)
    - Route53
    - S3
- nginx

AWSの構成図はこんなかんじ
![rupanaws.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148737/cb06f73f-fbaa-d267-9810-1457adfefe3b.png)


## 実行環境（クライアントサイド）
- Chrome(91.0.4472.106)

OSはWindows10/MacOS Sierra で実行できたことを確認済み

# 作成物
http://rupan-subtitle-gen.cf/

[githubはこちら](https://github.com/KenFujita/Rupan_no_turn)↓
https://github.com/KenFujita/Rupan_no_turn
ソースコードは上記を参照されたし。

# 工夫点
双方向のデータバインドが活かされるように、リアルタイムで再現できるようにした。
あとは最後の「タッタラターンダダッダダッダダッダダッダッダッダン!」という音を鳴らしているときは文字入力を受け付けないようにしている

```vue
<input type="text"
	v-bind:disabled="isDis"
	@keydown.enter="isEnter"
	@compositionstart="composing=true"
	@compositionend="composing=false"
	v-on:input="write" 
	v-model="word"
>
```

こんな感じに入力フォームを作成し

```javascript
if(!this.composing || (this.composing && this.word.length > 25)){
	this.isDis = true;
	this.enterPush.currentTime = 0;
	this.enterPush.play();
	const res = await this.donotWrite(this.enterPush);
	console.log(res);
	this.isDis = false;
	this.word = '';
}
```
```javascript
donotWrite:function(aud) {
	return new Promise((resolve) => {
		aud.addEventListener('ended',()=>{
			resolve('done');
		});
	});
}
```

これらを```methods```で関数として宣言してあげると、音楽が鳴っている間は入力させないといった機能が実装できる。

# 難しかったところ
あまり難しくないコードなので詰まるほどのものはなかった。
強いて言うなら、全角文字を扱う場合の文字変換の確定をするEnterとサブタイの音楽を鳴らすトリガーになるEnterの判定をしないといけなかった。
（そうしないと文字確定時のEnterキー押下イベントで音楽がなってしまうため）

あとVueのライフサイクル（今回だと```created```と```mounted```の違い）がよくわからなかった。

その他音楽ファイルを読み込むタイミング、文字入力を受け付けない処理の実装、```divタグ```の使い方、CSS、AWSなど

# 今後
CI/CDで継続的うんたらをやってみたい。
今の所AWS構成図の```Private EC2```が無職なのでそこで実践してみたいと思う

# 参考
https://wordpress.ideacompo.com/?p=13989
https://aqua-engineer.com/post-884/
https://gotohayato.com/content/496/

# おまけ
既に何名もの方々が再現アプリを作っていた模様。
https://qiita.com/Sirloin/items/3db49c97763042e95eb5

何番煎じになっているのかはさておき、先駆者様の作成したものも触れてみよう
【LINE Messaging API】Flex Message SimulatorでJSONを作成したときハマったこと


LINE Messaging APIで　Flex Message SimulatorでJSONを作ったときにハマったことをメモとして残します。


##症状
LINE FLEX MESSAGE SIMULATORで、FLEX MESSAGEを作成。

[![Image from Gyazo](https://i.gyazo.com/5f4b054700d90b3dcd6b22dabcb729f5.png)](https://gyazo.com/5f4b054700d90b3dcd6b22dabcb729f5)

さあ、JSONに変換
「View as JSON」をクリック
[![Image from Gyazo](https://i.gyazo.com/37e32db60defcf7a91613aa528af2baf.png)](https://gyazo.com/37e32db60defcf7a91613aa528af2baf)

JSONがでてきた。
これをコピーする。
[![Image from Gyazo](https://i.gyazo.com/4db67036d8a774e50c9510907ed29b93.png)](https://gyazo.com/4db67036d8a774e50c9510907ed29b93)

コードにペーストする。

```JS
replyMessage = {
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [

          //中略

    ]
  }
}
```
<br>
しかし、これで実行すると、HTTPエラーになる。

```
HTTPError: Request failed with status code 400
```
<br>
なんで？

<br>
##解決策

LINE Developersのドキュメントをよく見ると、
https://developers.line.biz/ja/reference/messaging-api/#flex-message

冒頭にこれが必要でした。

```
"type": "flex",
  "altText": "this is a flex message",
  "contents": {
```

つまり、

```JS
replyMessage = {
  "type": "flex",
  "altText": "this is a flex message",
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [

          //中略

      ]
    }
  }
}
```

##反省点
公式ドキュメントをよく読もう！

<br><br>
なぜrequire又はimportができない？！(a.k.awebpack投入の理由)

# 0. 当時の環境

```
C:\git\keepOnEye_money>node -v
v12.18.4
C:\git\keepOnEye_money>npm -v
6.14.6
```
# エラーモメント

ライブラリーをインストールは無事完了。

```
C:\git\keepOnEye_money>npm install pinyin

> nodejieba@2.5.2 install C:\git\node_modules\nodejieba
> node-pre-gyp install --fallback-to-build

[nodejieba] Success: "C:\git\node_modules\nodejieba\build\Release\nodejieba.node" is installed via remote
npm WARN saveError ENOENT: no such file or directory, open 'C:\git\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\git\package.json'
npm WARN git No description
npm WARN git No repository field.
npm WARN git No README data
npm WARN git No license field.

+ pinyin@2.10.2
added 60 packages from 97 contributors and audited 306 packages in 10.529s

19 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```
https://www.npmjs.com/package/pinyin

ドキュメントのサンプールコードを叩いてみよう。

```app.js
var unirest = require('unirest');
```
でも画面では効かないよう、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1070645/1c38586a-703c-9046-5b7b-36e1302b8268.png)

***Uncaught ReferenceError: require is not defined***

# 原因はCommonJSとes6の違い（と思いきや違ったことを後でわかる）
とても親切な説明がありまして貼っておくと、
https://zenn.dev/naoki_mochizuki/articles/46928ccb420ee733f78f

要するに
commonJS: requireが
es06: importで使うことになる
なので特にどっちを選んでも機能は同じのこと。

試しにimportに変えてみた。

```app.js
import unirest from 'unirest';
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1070645/218a2d60-524b-92d7-1602-4ddc5a759b40.png)


***Uncaught SyntaxError: Cannot use import statement outside a module***
モジュール関係の問題らしい、、

# webpackの登場。
簡単に言いますと、散らかっているモジュルを一つにまとめてくれるもの。開発環境とブラウザーは環境が違うため、ブラウザーで表現したい機能の実現のために開発環境から必要道具（？）をまとめて送る必要がある。
袋みたいに一つにまとめるものの認識。

# webpackをセットアップしてみよう。
```
npm init
npm i -D webpack webpack-cli
```
上記のコマンドを作成してwebpack.config.jsを生成、中身を埋める。

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

module.exports = {
    mode: 'production', // or "development" or "none",
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
    },
    entry:{
        main : "./app.js"
     },
  };
```
HTMLのjsパスをOUTPUTのパスに修正する。

```index.html
    <!-- <script src="app.js"></script> -->
    <script src="./dist/bundle.js"></script>
```
package.jsonへwebpack実行用コマンドを追加する。

```package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
```
最後に確認用コードを追加してみる

```app.js
var pinyin = require("pinyin");

console.log(pinyin("中心"));
```
それでは実行してみようー！

```
npm run build
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1070645/a7fae33c-8207-bc74-3bd4-b332332a798a.png)

できました！！

# なぜlibraryのrequire(import)が効かなかった？はnode.js はサーバーの言語なのでfrontのブラウザーと話すことがが違う

とのことでした。今のエラーはnode.jsのみの環境だと問題なしと思われて、画面側に持ち出した時の問題だったこと！